/* ==========================================================
   宠念 v4 — 像素卡通风设计系统（重构版）
   设计原则：方角 · 像素边框 · 块状阴影 · 复古色板
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{
  --bg:#FFF5E6; --card:#FFFDF7;
  --cyan:#5BC0EB; --green:#6CC24A; --grass:#90EE90;
  --orange:#F7941D; --coral:#FF6B6B; --pink:#FF9ECD;
  --purple:#9B59B6; --grape:#C39BD3; --lavender:#E8D5F5;
  --sky:#87CEEB; --mint:#98D8C8; --sand:#F7DC6F;
  --brown:#4A3728; --brown2:#7B6352; --brown3:#B8A898;
  --gray:#E8E0D5; --gray2:#D5CCC0;
  --shadow:4px 4px 0 rgba(74,55,40,.15);
  --shadow-sm:3px 3px 0 rgba(74,55,40,.12);
  --shadow-lg:6px 6px 0 rgba(74,55,40,.18);
  --shadow-glow:0 0 12px rgba(247,148,29,.3);
  --border:2px solid var(--brown);
  --border-thick:3px solid var(--brown);
  --border-thin:1px solid var(--brown);
  --safe-b:env(safe-area-inset-bottom,0px);
  --font-pixel:'Press Start 2P',monospace;
  --font-body:-apple-system,"PingFang SC","Helvetica Neue",sans-serif;
  --dur:0.12s;
}



/* ========== Page Loading ========== */
.app-loading{position:absolute;inset:0;background:var(--bg);z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .3s ease}
.app-loading.hidden{opacity:0;pointer-events:none}
.loading-paw{font-size:48px;animation:pixelBounce .8s steps(4) infinite;image-rendering:pixelated}
.loading-text{font-family:var(--font-pixel);font-size:11px;color:var(--brown2);margin-top:12px;letter-spacing:1px}

/* ========== Reset ========== */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;scroll-behavior:smooth}
body{font:var(--font-body);background:#2C2C2C;color:var(--brown);font-size:14px;line-height:1.5;image-rendering:auto}
button,input,select,textarea{font:inherit;color:inherit;outline:none;border:none;background:none}
input::placeholder,textarea::placeholder{color:var(--brown3)}

/* ========== App Shell ========== */
.app{max-width:430px;margin:0 auto;height:100vh;height:100dvh;position:relative;
  background:var(--bg);overflow:hidden;border-left:3px solid var(--brown);border-right:3px solid var(--brown)}

/* ========== Views ========== */
.view{position:absolute;inset:0;bottom:calc(60px + var(--safe-b));
  display:none;flex-direction:column;overflow:hidden}
.view.active{display:flex}
.view-memorial,.view-chat{bottom:0!important}

/* ========== View Transitions ========== */
.view{animation:none;transition:opacity .15s ease,transform .15s ease}
.view.active{animation:viewIn .15s ease}
@keyframes viewIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}

/* ========== Pixel Utilities ========== */
.pixel-border{border:var(--border)}
.pixel-shadow{box-shadow:var(--shadow)}
.pixel-title{font-family:var(--font-pixel);font-size:10px;letter-spacing:1px;line-height:1.8}
.pixel-btn{border:var(--border-thick);box-shadow:var(--shadow);cursor:pointer;transition:all var(--dur);
  font-weight:700;position:relative}
.pixel-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(74,55,40,.12)}

/* ========== Page Header ========== */
.page-header{padding:12px 16px 8px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;background:var(--bg);z-index:2;border-bottom:1px solid var(--gray)}
.page-header h1{font-family:var(--font-pixel);font-size:13px;letter-spacing:1px}
.page-header.has-back{padding-left:8px}
.header-date{font-size:11px;color:var(--brown2)}
.back-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:var(--sand);border:var(--border);cursor:pointer;font-size:14px;box-shadow:var(--shadow-sm);transition:all var(--dur)}
.back-btn:active{transform:translate(2px,2px);box-shadow:none}
.back-btn.light{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);color:#fff}

/* ========== Page Body ========== */
.page-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 16px 24px;-webkit-overflow-scrolling:touch}
.page-body::-webkit-scrollbar{width:6px}
.page-body::-webkit-scrollbar-track{background:var(--gray)}
.page-body::-webkit-scrollbar-thumb{background:var(--brown3);border:1px solid var(--brown)}

/* ========== Buttons ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 20px;font-weight:700;font-size:13px;cursor:pointer;
  border:var(--border-thick);box-shadow:var(--shadow);transition:all var(--dur);position:relative}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.1) 2px,rgba(255,255,255,.1) 4px);pointer-events:none}
.btn-ghost{background:var(--gray);color:var(--brown2)}
.btn-mint{background:var(--mint);color:#2a6b5a}
.btn-lav{background:var(--lavender);color:#6b4a9e}
.btn-cyan{background:var(--cyan);color:#fff}
.btn-coral{background:var(--coral);color:#fff}
.btn-sm{padding:6px 14px;font-size:12px;border-width:2px}
.btn-lg{padding:14px 28px;font-size:14px}
.btn-block{width:100%;margin-top:16px}

/* ========== Chips ========== */
.chip{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;
  font-size:11px;font-weight:600;background:var(--gray);color:var(--brown2);
  cursor:pointer;border:2px solid var(--brown);transition:all var(--dur)}
.chip.active{background:var(--orange);color:#fff;border-color:var(--brown)}
.chip:active{transform:translate(1px,1px)}
.chip-icon{font-size:14px}

/* ========== Empty State ========== */
.empty-state{text-align:center;padding:48px 20px;color:var(--brown2)}
.empty-emoji{font-size:48px;margin-bottom:12px;animation:pixelFloat 2s steps(6) infinite}
@keyframes pixelFloat{0%,100%{transform:translateY(0)}25%{transform:translateY(-3px)}50%{transform:translateY(-6px)}75%{transform:translateY(-3px)}}
.empty-state p{margin-bottom:16px}

/* ========== Login ========== */
.view-login{justify-content:center;align-items:center;position:absolute;overflow-y:auto;bottom:0!important;
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky) 60%,var(--grass) 60%,var(--green) 100%)}
.login-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.login-pixel-cloud{position:absolute;background:#fff;border:2px solid var(--brown);width:80px;height:30px;image-rendering:pixelated}
.login-pixel-cloud::before{content:'';position:absolute;top:-15px;left:15px;width:50px;height:20px;background:#fff;border:2px solid var(--brown)}
.login-pixel-cloud.c1{top:10%;left:15%;animation:cloudMove 20s linear infinite}
.login-pixel-cloud.c2{top:20%;right:10%;width:60px;animation:cloudMove 25s linear infinite reverse}
.login-pixel-cloud.c3{top:35%;left:40%;width:70px;animation:cloudMove 30s linear infinite}
@keyframes cloudMove{0%{transform:translateX(-20px)}50%{transform:translateX(20px)}100%{transform:translateX(-20px)}}
.login-ground{position:absolute;bottom:0;left:0;right:0;height:40%;
  background:repeating-linear-gradient(90deg,var(--grass) 0px,var(--grass) 8px,var(--green) 8px,var(--green) 16px)}
.login-ground::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--green);border-top:2px solid var(--brown)}
.login-card{text-align:center;padding:30px 24px;z-index:1;
  background:var(--card);border:var(--border-thick);box-shadow:var(--shadow-lg);
  position:relative;max-width:320px;width:90%}
.login-card::before{content:'';position:absolute;top:4px;left:4px;right:4px;height:2px;background:repeating-linear-gradient(90deg,var(--orange) 0px,var(--orange) 4px,transparent 4px,transparent 8px)}
.login-logo{font-size:56px;margin-bottom:8px;animation:pixelBounce 1s steps(4) infinite;image-rendering:pixelated}
@keyframes pixelBounce{0%,100%{transform:translateY(0)}25%{transform:translateY(-4px)}50%{transform:translateY(-8px)}75%{transform:translateY(-4px)}}
.login-title{font-family:var(--font-pixel);font-size:18px;color:var(--orange);letter-spacing:2px;margin-bottom:4px;
  text-shadow:3px 3px 0 var(--brown)}
.login-sub{font-size:13px;color:var(--brown2);margin-bottom:28px}
.login-card .btn{width:100%;margin-bottom:10px}

/* ========== Section Title ========== */
.section-title{font-family:var(--font-pixel);font-size:10px;letter-spacing:1px;
  margin:18px 0 10px;display:flex;align-items:center;gap:8px;color:var(--brown);line-height:1.8}
.section-title .emoji{font-size:16px}

/* ========== Home ========== */
.home-date-bar{padding:14px 16px 4px}
.home-greeting{font-family:var(--font-pixel);font-size:14px;letter-spacing:1px;line-height:1.8}
.home-greeting-sub{font-size:12px;color:var(--brown2);margin-top:2px}
.pet-hero{display:flex;align-items:center;gap:14px;padding:16px;margin:12px 0 16px;
  background:var(--sand);border:var(--border-thick);box-shadow:var(--shadow-lg);cursor:pointer;position:relative;transition:all var(--dur)}
.pet-hero:hover{box-shadow:var(--shadow)}
.pet-hero:active{transform:translate(2px,2px);box-shadow:var(--shadow-sm)}
.pet-hero::after{content:'';position:absolute;top:0;right:0;width:20px;height:20px;background:var(--brown);clip-path:polygon(100% 0,0 0,100% 100%)}
.hero-avatar{width:64px;height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:32px;background:var(--card);border:var(--border);overflow:hidden;image-rendering:pixelated}
.hero-avatar img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.hero-info{flex:1;min-width:0}
.hero-name{font-family:var(--font-pixel);font-size:14px;letter-spacing:1px}
.hero-meta{font-size:12px;color:var(--brown2);margin-top:4px}
.hero-tags{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.hero-tags .chip{padding:3px 8px;font-size:9px;border-width:1.5px}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.quick-card{background:var(--card);border:var(--border);box-shadow:var(--shadow);padding:14px;
  cursor:pointer;transition:all var(--dur);position:relative}
.quick-card:active{transform:translate(2px,2px);box-shadow:none}
.quick-card:nth-child(1){border-top:4px solid var(--orange)}
.quick-card:nth-child(2){border-top:4px solid var(--green)}
.quick-card:nth-child(3){border-top:4px solid var(--cyan)}
.quick-card:nth-child(4){border-top:4px solid var(--purple)}
.quick-card::after{content:'';position:absolute;top:0;right:0;width:8px;height:8px;background:var(--brown);clip-path:polygon(100% 0,0 0,100% 100%)}
.quick-ic{font-size:24px;margin-bottom:4px}
.quick-lbl{font-weight:700;font-size:13px}
.quick-sub{font-size:11px;color:var(--brown3);margin-top:2px}

/* Recent list */
.recent-list{display:flex;flex-direction:column;gap:8px}
.recent-item{display:flex;align-items:center;gap:12px;padding:12px;
  background:var(--card);border:var(--border);box-shadow:var(--shadow);cursor:pointer;transition:all var(--dur)}
.recent-item:active{transform:translate(1px,1px);box-shadow:var(--shadow-sm)}
.recent-ic{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-size:20px;border:1.5px solid var(--gray2);flex-shrink:0}
.recent-info{flex:1;min-width:0}
.recent-txt{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-date{font-size:10px;color:var(--brown3);margin-top:2px}

/* ========== TabBar ========== */
.tabbar{position:absolute;bottom:0;left:0;right:0;height:calc(60px + var(--safe-b));
  padding-bottom:var(--safe-b);display:flex;background:var(--card);
  border-top:var(--border-thick);z-index:10}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;cursor:pointer;transition:all var(--dur);position:relative;border-right:1px solid var(--gray)}
.tab:last-child{border-right:none}
.tab-ic{font-size:20px;transition:all var(--dur)}
.tab-lbl{font-size:9px;font-weight:700;color:var(--brown3);font-family:var(--font-pixel)}
.tab.active{background:var(--sand)}
.tab.active .tab-lbl{color:var(--orange)}
.tab.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--orange)}

/* ========== Pixel Map ========== */
.map-area-selector{display:flex;align-items:center;gap:8px;padding:0 16px 8px}
.area-btn{display:flex;align-items:center;gap:4px;padding:6px 14px;
  font-size:12px;font-weight:700;background:var(--card);border:var(--border);
  box-shadow:var(--shadow-sm);cursor:pointer;transition:all var(--dur)}
.area-btn:active{transform:translate(1px,1px);box-shadow:none}
.area-btn .arrow{font-size:10px;color:var(--brown3)}
.map-container{flex:1;position:relative;min-height:200px;background:var(--sky);overflow:visible}
.map-placeholder{position:absolute;top:0;left:0;right:0;bottom:48px;overflow:auto;background:var(--sky);-webkit-overflow-scrolling:touch;scroll-behavior:auto;user-select:none;-webkit-user-select:none}
.pixel-map{width:100%;height:100%;
  background:repeating-linear-gradient(0deg,#C5E8B7 0px,#C5E8B7 2px,#B8DC9F 2px,#B8DC9F 4px)}
.pixel-map-inner{position:relative}
.pixel-map-inner *{pointer-events:auto}
.pixel-map-water{position:absolute;background:linear-gradient(180deg,#5BC0EB,#4AA8D4);border:2px solid #3D8EB9;image-rendering:pixelated}
.pixel-map-road{position:absolute;background:repeating-linear-gradient(90deg,#D5CCC0 0px,#D5CCC0 4px,#C8BFB3 4px,#C8BFB3 8px);border:1px solid #B8A898}
.pixel-map-building{position:absolute;border:2px solid var(--brown);display:flex;align-items:center;justify-content:center;font-size:14px;image-rendering:pixelated}
.pixel-map-label{position:absolute;font-family:var(--font-pixel);font-size:7px;color:var(--brown);
  background:rgba(255,255,255,.9);padding:2px 4px;border:1px solid var(--brown);white-space:nowrap;
  box-shadow:1px 1px 0 rgba(0,0,0,.1)}
.pixel-map-marker{position:absolute;width:32px;height:32px;border:2px solid var(--brown);
  display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;
  box-shadow:2px 2px 0 rgba(0,0,0,.2);z-index:4;transition:all var(--dur);image-rendering:pixelated;pointer-events:auto}
.pixel-map-marker:hover{transform:scale(1.3);z-index:14}
.pixel-map-marker:active{transform:scale(1.1)}
.pixel-map-marker.pet{background:var(--sand)}
.pixel-map-marker.stray{background:var(--pink)}
.pixel-map-marker.memorial{background:var(--lavender)}
.map-layer-switch{display:flex;gap:6px;padding:0 16px 8px;overflow-x:auto}
.map-layer-switch .chip{font-size:10px;padding:5px 10px;flex-shrink:0}
.map-bottom-sheet{position:absolute;bottom:0;left:0;right:0;
  background:var(--card);border-top:var(--border-thick);
  max-height:45vh;transition:max-height .3s ease;z-index:5;display:flex;flex-direction:column}
.map-bottom-sheet.collapsed{max-height:48px}
.sheet-handle{width:40px;height:4px;background:var(--gray2);margin:10px auto 6px;cursor:pointer}
.map-list-header{display:flex;align-items:center;justify-content:space-between;
  padding:0 16px 8px;font-weight:700;font-size:13px;font-family:var(--font-pixel);letter-spacing:.5px}
.map-list-count{font-size:10px;color:var(--brown2);font-family:var(--font-body);font-weight:400}
.map-list-scroll{flex:1;overflow-y:auto;padding:0 16px 12px}

/* Map list cards */
.map-pet-card{display:flex;align-items:center;gap:10px;padding:10px;
  border:var(--border);box-shadow:var(--shadow-sm);background:var(--card);margin-bottom:8px;cursor:pointer;transition:all var(--dur)}
.map-pet-card:active{transform:translate(1px,1px);box-shadow:none}
.map-pet-av{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:22px;border:2px solid var(--brown);flex-shrink:0;overflow:hidden;image-rendering:pixelated}
.map-pet-av img{width:100%;height:100%;object-fit:cover}
.map-pet-info{flex:1;min-width:0}
.map-pet-name{font-weight:700;font-size:13px}
.map-pet-meta{font-size:11px;color:var(--brown2);margin-top:2px}
.map-pet-dist{font-family:var(--font-pixel);font-size:9px;color:var(--orange);flex-shrink:0}
.map-pet-card.stray{border-left:4px solid var(--coral)}
.map-pet-card.memorial-card{border-left:4px solid var(--purple)}
.stray-badge{display:inline-block;padding:2px 6px;font-size:9px;font-weight:700;
  background:var(--coral);color:#fff;border:1px solid var(--brown);margin-left:4px}
.memorial-badge{display:inline-block;padding:2px 6px;font-size:9px;font-weight:700;
  background:var(--purple);color:#fff;border:1px solid var(--brown);margin-left:4px}
.adopt-badge{display:inline-block;padding:2px 6px;font-size:9px;font-weight:700;border:1px solid var(--brown)}
.adopt-badge.available{background:var(--green);color:#fff}
.adopt-badge.adopting{background:var(--sand);color:var(--brown)}
.adopt-badge.adopted{background:var(--cyan);color:#fff}

/* Pet popup card */
.card-mask{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:20;display:none;opacity:0;transition:opacity .2s}
.card-mask.show{display:block;opacity:1}
.pet-popup-card{position:absolute;left:16px;right:16px;bottom:80px;
  background:var(--card);border:var(--border-thick);box-shadow:var(--shadow-lg);
  padding:18px;z-index:21;display:none}
.pet-popup-card.show{display:block}
.popup-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.popup-avatar{width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  font-size:26px;border:var(--border);flex-shrink:0;overflow:hidden;image-rendering:pixelated}
.popup-name{font-family:var(--font-pixel);font-size:12px;letter-spacing:1px}
.popup-meta{font-size:12px;color:var(--brown2)}
.popup-owner{font-size:11px;color:var(--brown3);margin-top:4px;font-style:italic}
.popup-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.popup-actions{display:flex;gap:8px}
.popup-actions .btn{flex:1}

/* ========== Pet Space ========== */
.space-hero{text-align:center;padding:24px 16px 18px;border:var(--border-thick);
  box-shadow:var(--shadow-lg);margin-bottom:16px;background:var(--sand);position:relative}
.space-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--orange) 0px,var(--orange) 8px,transparent 8px,transparent 16px)}
.space-avatar{width:80px;height:80px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
  font-size:40px;background:var(--card);border:var(--border-thick);overflow:hidden;image-rendering:pixelated}
.space-avatar img{width:100%;height:100%;object-fit:cover}
.space-name{font-family:var(--font-pixel);font-size:16px;letter-spacing:1px}
.space-meta{font-size:12px;color:var(--brown2);margin-top:4px}
.space-msg{font-size:12px;color:var(--brown2);margin-top:10px;font-style:italic;
  padding:10px;background:var(--card);border:var(--border)}
.space-msg::before{content:'"';font-family:var(--font-pixel);color:var(--orange);font-size:20px;margin-right:2px}
.space-msg::after{content:'"';font-family:var(--font-pixel);color:var(--orange);font-size:20px;margin-left:2px}
.space-stats{display:flex;gap:12px;margin-top:14px;justify-content:center}
.space-stat{text-align:center;padding:8px 16px;background:var(--card);border:var(--border);position:relative}
.space-stat::after{content:'';position:absolute;bottom:0;right:0;width:6px;height:6px;background:var(--brown);clip-path:polygon(100% 0,0 100%,100% 100%)}
.space-stat-num{font-family:var(--font-pixel);font-size:16px;color:var(--orange)}
.space-stat-lbl{font-size:10px;color:var(--brown2)}

/* ========== Timeline ========== */
.timeline{position:relative;padding-left:28px}
.timeline::before{content:'';position:absolute;left:10px;top:6px;bottom:6px;
  width:3px;background:repeating-linear-gradient(180deg,var(--brown) 0px,var(--brown) 4px,transparent 4px,transparent 8px)}
.tl-item{position:relative;margin-bottom:12px}
.tl-dot{position:absolute;left:-22px;top:8px;width:12px;height:12px;
  border:2px solid var(--orange);background:var(--card)}
.tl-card{background:var(--card);border:var(--border);box-shadow:var(--shadow-sm);padding:12px;transition:all var(--dur)}
.tl-card:hover{box-shadow:var(--shadow)}
.tl-card-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tl-card-emoji{font-size:18px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--gray2)}
.tl-card-type{font-size:11px;font-weight:700}
.tl-card-date{font-size:10px;color:var(--brown3);margin-left:auto}
.tl-card-txt{font-size:13px;line-height:1.6}
.tl-card-num{font-family:var(--font-pixel);font-size:18px;color:var(--orange);margin-top:4px}

/* ========== Records ========== */
.rec-filters{display:flex;gap:6px;padding:8px 0;overflow-x:auto;flex-shrink:0}

/* ========== Expenses ========== */
.exp-summary{border:var(--border-thick);box-shadow:var(--shadow-lg);
  padding:18px;margin-bottom:16px;text-align:center;background:var(--sand)}
.exp-total{font-family:var(--font-pixel);font-size:24px;color:var(--orange)}
.exp-total-lbl{font-size:12px;color:var(--brown2);margin-top:4px}
.exp-pie{width:140px;height:140px;margin:14px auto;position:relative;border:var(--border);image-rendering:pixelated}
.exp-pie-center{position:absolute;inset:26px;background:var(--card);display:flex;
  align-items:center;justify-content:center;flex-direction:column;border:var(--border)}
.exp-pie-center-num{font-family:var(--font-pixel);font-size:12px}
.exp-pie-center-lbl{font-size:9px;color:var(--brown2)}
.exp-legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.exp-legend-item{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--brown2)}
.exp-legend-dot{width:10px;height:10px;border:1px solid var(--brown);flex-shrink:0}
.exp-list{display:flex;flex-direction:column;gap:8px}
.exp-item{display:flex;align-items:center;gap:10px;padding:10px;
  background:var(--card);border:var(--border);box-shadow:var(--shadow-sm);transition:all var(--dur)}
.exp-item:hover{box-shadow:var(--shadow)}
.exp-item-ic{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  font-size:18px;border:1.5px solid var(--gray2);flex-shrink:0}
.exp-item-info{flex:1;min-width:0}
.exp-item-cat{font-size:13px;font-weight:600}
.exp-item-note{font-size:11px;color:var(--brown3)}
.exp-item-amt{font-family:var(--font-pixel);font-size:12px;color:var(--brown);flex-shrink:0}

/* ========== Memorial ========== */
.view-memorial{background:#1a1a2e;color:#e8e0f0}
.view-memorial .page-header{background:#1a1a2e;border-color:rgba(255,255,255,.1)}
.stars-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.star{position:absolute;background:#fff;animation:twinkle var(--dur,3s) ease-in-out infinite;image-rendering:pixelated}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}}
.star-glow{box-shadow:0 0 6px 2px rgba(255,255,255,.4);animation:twinkleGlow var(--dur,4s) ease-in-out infinite}
@keyframes twinkleGlow{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
.shooting-star{position:absolute;width:2px;height:2px;background:#fff;border-radius:0;animation:shoot 4s linear infinite;opacity:0}
.shooting-star::after{content:'';position:absolute;top:0;right:0;width:40px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.8),transparent);transform:rotate(-30deg);transform-origin:right center}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(-30deg)}5%{opacity:1}10%{opacity:0;transform:translate(-120px,60px) rotate(-30deg)}100%{opacity:0;transform:translate(-120px,60px) rotate(-30deg)}}
.candle{display:inline-block;animation:flicker 2s steps(4) infinite}
@keyframes flicker{0%,100%{opacity:1}50%{opacity:.6}}
.candle-wrap{position:relative;display:inline-block}
.candle-flame{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:6px;height:10px;background:var(--orange);animation:candleBreath 1.5s ease-in-out infinite;image-rendering:pixelated}
.candle-flame::after{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:3px;height:4px;background:#fff;opacity:.6}
@keyframes candleBreath{0%,100%{transform:translateX(-50%) scaleY(1);opacity:.9}25%{transform:translateX(-50%) scaleY(.7) translateX(1px);opacity:.6}50%{transform:translateX(-50%) scaleY(1.1);opacity:1}75%{transform:translateX(-50%) scaleY(.8) translateX(-1px);opacity:.7}}
.memorial-hero{text-align:center;padding:32px 20px}
.memorial-avatar{width:90px;height:90px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  font-size:44px;border:3px solid rgba(255,255,255,.3);box-shadow:0 0 30px rgba(155,89,182,.4);overflow:hidden;image-rendering:pixelated}
.memorial-name{font-family:var(--font-pixel);font-size:16px;color:#fff;letter-spacing:1px}
.memorial-age{font-size:13px;color:rgba(255,255,255,.5);margin-top:4px}
.memorial-story{font-size:13px;color:rgba(255,255,255,.6);line-height:1.8;margin-top:14px;
  padding:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.memorial-msgs{margin-top:20px}
.memorial-msg{padding:12px;background:rgba(255,255,255,.04);margin-bottom:8px;
  border-left:3px solid var(--grape);transition:all var(--dur)}
.memorial-msg:hover{background:rgba(255,255,255,.08)}
.memorial-msg-from{font-size:11px;color:var(--grape);font-weight:700;margin-bottom:4px}
.memorial-msg-txt{font-size:13px;color:rgba(255,255,255,.8);line-height:1.6}
.memorial-msg-date{font-size:10px;color:rgba(255,255,255,.25);margin-top:4px}
.memorial-write{margin-top:18px}
.memorial-write textarea{width:100%;min-height:70px;padding:12px;background:rgba(255,255,255,.06);
  color:#e8e0f0;font-size:13px;resize:none;border:1px solid rgba(255,255,255,.1)}
.memorial-write textarea::placeholder{color:rgba(255,255,255,.25)}
.memorial-list-body{padding-top:8px}
.mem-card{background:rgba(155,89,182,.15);border:2px solid rgba(155,89,182,.3);
  padding:16px;margin-bottom:10px;cursor:pointer;color:#e8e0f0;transition:all var(--dur)}
.mem-card:active{background:rgba(155,89,182,.25)}
.mem-card-top{display:flex;align-items:center;gap:12px}
.mem-card-av{width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  font-size:24px;border:2px solid rgba(255,255,255,.15);overflow:hidden;image-rendering:pixelated}
.mem-card-name{font-family:var(--font-pixel);font-size:12px;color:#fff;letter-spacing:1px}
.mem-card-breed{font-size:11px;color:rgba(255,255,255,.4)}
.mem-card-story{font-size:12px;color:rgba(255,255,255,.5);margin-top:8px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mem-card-msgs{font-size:10px;color:var(--grape);margin-top:6px}

/* ========== Chat ========== */
.view-chat{background:#1a1a2e;color:#e8e0f0}
.view-chat .page-header{background:#1a1a2e;border-color:rgba(255,255,255,.1)}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-bubble{max-width:80%;padding:10px 14px;font-size:13px;line-height:1.6;border:2px solid;animation:chatIn .2s ease}
@keyframes chatIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.chat-bubble.pet{align-self:flex-start;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
.chat-bubble.user{align-self:flex-end;background:var(--orange);border-color:var(--brown);color:#fff}
.chat-bubble.typing{align-self:flex-start;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);padding:14px 18px}
.typing-dots{display:flex;gap:4px}
.typing-dots span{width:6px;height:6px;background:rgba(255,255,255,.4);animation:typeBounce .6s steps(4) infinite}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes typeBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.chat-quick{display:flex;gap:6px;padding:8px 16px;overflow-x:auto;flex-shrink:0}
.chat-quick::-webkit-scrollbar{height:0}
.chat-quick .chip{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);font-size:11px;
  white-space:nowrap;border-color:rgba(255,255,255,.15)}
.chat-input-bar{display:flex;gap:8px;padding:10px 16px;padding-bottom:calc(10px + var(--safe-b));
  background:rgba(0,0,0,.3);border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}
.chat-input{flex:1;padding:10px 16px;background:rgba(255,255,255,.08);
  color:#e8e0f0;font-size:13px;border:1px solid rgba(255,255,255,.1)}
.chat-send-btn{padding:10px 20px;background:var(--orange);color:#fff;
  font-weight:700;font-size:13px;cursor:pointer;border:2px solid var(--brown);transition:all var(--dur)}
.chat-send-btn:active{transform:translate(1px,1px)}

/* ========== Create Form ========== */
.create-body{padding-top:4px}
.create-section{margin-bottom:18px}
.create-section-title{font-family:var(--font-pixel);font-size:9px;color:var(--brown2);
  margin-bottom:8px;letter-spacing:1px;display:flex;align-items:center;gap:6px}
.photo-upload-area{width:96px;height:96px;margin:0 auto 6px;display:flex;align-items:center;
  justify-content:center;background:var(--gray);border:var(--border-thick);cursor:pointer;
  overflow:hidden;position:relative;box-shadow:var(--shadow-sm);transition:all var(--dur)}
.photo-upload-area:hover{border-color:var(--orange)}
.photo-upload-area.has-photo{border-color:var(--orange)}
.photo-upload-area img{width:100%;height:100%;object-fit:cover}
.photo-upload-hint{text-align:center;font-size:11px;color:var(--brown3);margin-bottom:14px}
.photo-upload-plus{font-size:28px;color:var(--brown3)}
.breed-picker{position:relative}
.breed-search{width:100%;padding:10px 14px 10px 36px;font-size:13px;
  background:var(--gray);border:var(--border);box-shadow:var(--shadow-sm);transition:all var(--dur)}
.breed-search:focus{border-color:var(--orange);background:var(--card)}
.breed-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none}
.breed-dropdown{position:absolute;left:0;right:0;top:100%;margin-top:4px;
  background:var(--card);border:var(--border-thick);box-shadow:var(--shadow-lg);
  max-height:220px;overflow-y:auto;z-index:10;display:none}
.breed-dropdown.show{display:block}
.breed-opt{padding:8px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--gray);transition:all var(--dur)}
.breed-opt:active,.breed-opt:hover{background:var(--sand)}
.breed-opt-name{font-weight:600;font-size:13px}
.breed-opt-meta{font-size:10px;color:var(--brown3)}
.breed-cat{padding:6px 14px;font-size:10px;font-weight:700;color:var(--brown3);
  background:var(--gray);position:sticky;top:0;z-index:1;border-bottom:1px solid var(--brown)}
.breed-selected{display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:var(--sand);border:var(--border);margin-bottom:8px}
.breed-selected-name{font-weight:700;font-size:14px;flex:1}
.breed-selected-info{font-size:10px;color:var(--brown2)}
.breed-selected-close{cursor:pointer;font-size:16px;color:var(--brown3);padding:4px;transition:all var(--dur)}
.breed-selected-close:hover{color:var(--coral)}
.date-row{display:flex;gap:8px}
.date-select{flex:1;padding:10px;font-size:13px;text-align:center;
  background:var(--gray);border:var(--border);cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--dur)}
.date-select:focus{border-color:var(--orange);background:var(--card)}
.gender-row{display:flex;gap:10px}
.gender-btn{flex:1;padding:14px;text-align:center;cursor:pointer;
  background:var(--gray);border:var(--border);box-shadow:var(--shadow-sm);font-weight:700;font-size:13px;transition:all var(--dur)}
.gender-btn:active{transform:translate(2px,2px);box-shadow:none}
.gender-btn.active{background:var(--sand);border-color:var(--orange);border-width:2px}
.gender-btn .emoji{font-size:22px;display:block;margin-bottom:4px}
.tag-grid{display:flex;flex-wrap:wrap;gap:6px}
.tag-chip{padding:7px 14px;font-size:12px;cursor:pointer;
  background:var(--gray);border:2px solid var(--brown);transition:all var(--dur);font-weight:500}
.tag-chip:active{transform:translate(1px,1px)}
.tag-chip.active{background:var(--sand);border-color:var(--orange);color:var(--orange)}

/* ========== My Page ========== */
.me-pet-card{display:flex;align-items:center;gap:12px;padding:16px;
  background:var(--sand);border:var(--border-thick);box-shadow:var(--shadow-lg);
  margin-bottom:14px;cursor:pointer;transition:all var(--dur)}
.me-pet-card:active{transform:translate(2px,2px);box-shadow:var(--shadow-sm)}
.me-pet-av{width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  font-size:26px;background:var(--card);border:var(--border);flex-shrink:0;overflow:hidden;image-rendering:pixelated}
.me-pet-av img{width:100%;height:100%;object-fit:cover}
.me-pet-name{font-family:var(--font-pixel);font-size:12px;letter-spacing:1px}
.me-pet-meta{font-size:11px;color:var(--brown2)}
.me-menu-item{display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--card);border:var(--border);box-shadow:var(--shadow-sm);margin-bottom:8px;cursor:pointer;transition:all var(--dur)}
.me-menu-item:active{transform:translate(1px,1px);box-shadow:none}
.me-menu-ic{font-size:20px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--gray2);flex-shrink:0}
.me-menu-lbl{flex:1;font-size:13px;font-weight:500}
.me-menu-arrow{color:var(--brown3);font-size:14px}

/* ========== Bottom Sheet ========== */
.sheet-mask{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:30;display:none;opacity:0;transition:opacity .25s}
.sheet-mask.show{display:block;opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--card);
  border-top:var(--border-thick);box-shadow:0 -4px 20px rgba(0,0,0,.15);
  z-index:31;transform:translateY(100%);transition:transform .3s ease;
  max-height:78vh;display:flex;flex-direction:column}
.sheet.show{transform:translateY(0)}
.sheet-handle-bar{width:40px;height:4px;background:var(--gray2);margin:10px auto 6px;flex-shrink:0}
.sheet-title{font-family:var(--font-pixel);font-size:12px;padding:0 20px 10px;flex-shrink:0;letter-spacing:1px}
.sheet-body{flex:1;overflow-y:auto;padding:0 20px 20px}
.rec-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.rec-type-opt{text-align:center;padding:12px 4px;background:var(--gray);
  border:var(--border);cursor:pointer;transition:all var(--dur)}
.rec-type-opt.active{background:var(--sand);border-color:var(--orange);border-width:2px}
.rec-type-opt-emoji{font-size:24px}
.rec-type-opt-lbl{font-size:10px;margin-top:4px;font-weight:600}
.key-display{text-align:center;padding:14px;margin-bottom:10px}
.key-display .num{font-family:var(--font-pixel);font-size:28px;color:var(--brown)}
.key-display .yen{font-size:18px;color:var(--brown2)}
.key-display .cat-lbl{font-size:12px;color:var(--brown2);margin-bottom:4px}
.exp-cat-scroll{display:flex;gap:6px;overflow-x:auto;padding:8px 0;margin-bottom:10px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.key{height:46px;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;background:var(--gray);border:var(--border);
  cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--dur)}
.key:active{transform:translate(2px,2px);box-shadow:none}
.key.del{color:var(--coral);font-size:24px}
.stray-detail-img{width:100%;height:160px;background:var(--gray);border:var(--border);
  display:flex;align-items:center;justify-content:center;font-size:56px;margin-bottom:12px}
.stray-detail-row{display:flex;gap:8px;margin-bottom:6px;font-size:13px}
.stray-detail-lbl{color:var(--brown2);min-width:56px}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:700;margin-bottom:4px;color:var(--brown2)}
.input{width:100%;padding:10px 14px;background:var(--gray);border:var(--border);
  font-size:14px;box-shadow:var(--shadow-sm);transition:all var(--dur)}
.input:focus{border-color:var(--orange);background:var(--card);outline:2px solid rgba(247,148,29,.2)}

/* ========== Family Sharing ========== */
.family-card{display:flex;align-items:center;gap:10px;padding:10px;
  background:var(--card);border:var(--border);box-shadow:var(--shadow-sm);margin-bottom:8px;transition:all var(--dur)}
.family-card:hover{box-shadow:var(--shadow)}
.family-av{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:var(--sand);border:var(--border);flex-shrink:0}
.family-name{font-weight:700;font-size:13px}
.family-role{font-size:10px;color:var(--brown3)}

/* ========== Camera Button ========== */
.camera-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;
  background:var(--cyan);color:#fff;border:2px solid var(--brown);font-size:11px;
  font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--dur)}
.camera-btn:active{transform:translate(1px,1px);box-shadow:none}

/* ========== Toast ========== */
.toast{position:absolute;top:60px;left:50%;transform:translateX(-50%) translateY(-20px);
  padding:10px 20px;background:var(--brown);color:#fff;font-size:13px;font-weight:700;
  opacity:0;transition:all .3s ease;z-index:50;pointer-events:none;white-space:nowrap;
  border:2px solid var(--brown);box-shadow:var(--shadow);font-family:var(--font-pixel);font-size:9px;letter-spacing:.5px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast::before{content:'';position:absolute;top:2px;left:2px;right:2px;height:2px;background:repeating-linear-gradient(90deg,var(--sand) 0px,var(--sand) 3px,transparent 3px,transparent 6px)}

/* ========== Utilities ========== */
.text-center{text-align:center}
.text-sm{font-size:12px}.text-xs{font-size:10px}
.text-muted{color:var(--brown2)}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}

/* ========== Search ========== */
.search-hot{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.search-hot .chip{font-size:10px;padding:4px 10px}
.search-results{max-height:260px;overflow-y:auto}
.search-result-item{padding:10px;background:var(--card);border:var(--border);margin-bottom:6px;cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--dur)}
.search-result-item:active{transform:translate(1px,1px);box-shadow:none}
.search-result-q{font-weight:700;font-size:13px;color:var(--orange)}
.search-result-a{font-size:12px;color:var(--brown2);margin-top:4px;line-height:1.5}

/* ========== Banners ========== */
.home-banners{display:flex;gap:10px;overflow-x:auto;padding:4px 0 12px;scroll-snap-type:x mandatory}
.home-banners::-webkit-scrollbar{height:0}
.banner-card{min-width:85%;scroll-snap-align:start;padding:16px;border:var(--border);
  box-shadow:var(--shadow);cursor:pointer;position:relative;overflow:hidden;transition:all var(--dur)}
.banner-card:active{transform:translate(2px,2px);box-shadow:var(--shadow-sm)}
.banner-tag{display:inline-block;padding:2px 8px;font-size:9px;font-weight:700;
  border:1px solid var(--brown);margin-bottom:8px;background:rgba(255,255,255,.7)}
.banner-title{font-family:var(--font-pixel);font-size:11px;letter-spacing:.5px;line-height:1.6;margin-bottom:6px}
.banner-sub{font-size:12px;color:var(--brown2);line-height:1.5}
.banner-emoji{position:absolute;right:12px;bottom:8px;font-size:36px;opacity:.3;image-rendering:pixelated}

/* ========== Daily Status ========== */
.daily-status{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px}
.daily-stat{padding:10px;border:var(--border);text-align:center;background:var(--card);box-shadow:var(--shadow-sm);position:relative;transition:all var(--dur)}
.daily-stat:hover{box-shadow:var(--shadow)}
.daily-stat::after{content:'';position:absolute;bottom:0;right:0;width:6px;height:6px;background:var(--brown);clip-path:polygon(100% 0,0 100%,100% 100%)}
.daily-stat-emoji{font-size:20px;margin-bottom:2px}
.daily-stat-num{font-family:var(--font-pixel);font-size:14px;color:var(--orange)}
.daily-stat-lbl{font-size:9px;color:var(--brown2);margin-top:2px}

/* ========== Feeder Tracker ========== */
.feeding-tracker{margin-bottom:16px}
.feeder-card{border:var(--border);box-shadow:var(--shadow);padding:14px;margin-bottom:14px;
  background:var(--card);position:relative;transition:all var(--dur)}
.feeder-card:hover{box-shadow:var(--shadow-lg)}
.feeder-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.feeder-icon{font-size:24px}
.feeder-title{font-family:var(--font-pixel);font-size:10px;letter-spacing:.5px}
.feeder-sub{font-size:11px;color:var(--brown2)}
.feeder-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.feeder-stat{text-align:center;padding:8px;background:var(--bg);border:1px solid var(--gray2)}
.feeder-stat-num{font-family:var(--font-pixel);font-size:16px;color:var(--orange)}
.feeder-stat-lbl{font-size:9px;color:var(--brown2);margin-top:2px}
.feeder-log{margin-top:10px;max-height:120px;overflow-y:auto}
.feeder-log-item{display:flex;align-items:center;gap:8px;padding:6px 0;
  border-bottom:1px dashed var(--gray);font-size:12px}
.feeder-log-time{font-family:var(--font-pixel);font-size:8px;color:var(--brown3);min-width:50px}
.feeder-log-txt{flex:1;color:var(--brown2)}
.feeder-log-amt{font-weight:700;color:var(--orange)}

/* ========== Content Cards ========== */
.content-cards{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.content-card{display:flex;gap:12px;padding:12px;background:var(--card);border:var(--border);
  box-shadow:var(--shadow-sm);cursor:pointer;transition:all var(--dur)}
.content-card:active{transform:translate(1px,1px);box-shadow:none}
.content-card-img{width:72px;height:72px;display:flex;align-items:center;justify-content:center;
  font-size:36px;background:var(--bg);border:1px solid var(--gray2);flex-shrink:0}
.content-card-info{flex:1;min-width:0}
.content-card-title{font-weight:700;font-size:13px;line-height:1.4;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.content-card-meta{font-size:10px;color:var(--brown3)}

/* ========== Pixel Avatar Generator ========== */
.pixel-avatar{image-rendering:pixelated;display:inline-block}

/* ========== Stats Page ========== */
.stats-section{margin-bottom:20px}
.stats-big-num{text-align:center;padding:20px;border:var(--border-thick);box-shadow:var(--shadow-lg);
  background:var(--sand);margin-bottom:14px;position:relative}
.stats-big-num::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--orange) 0px,var(--orange) 8px,transparent 8px,transparent 16px)}
.stats-big-num-num{font-family:var(--font-pixel);font-size:32px;color:var(--orange)}
.stats-big-num-lbl{font-size:12px;color:var(--brown2);margin-top:4px}
.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.stats-box{padding:14px;border:var(--border);text-align:center;background:var(--card);box-shadow:var(--shadow-sm);transition:all var(--dur)}
.stats-box:hover{box-shadow:var(--shadow)}
.stats-box-num{font-family:var(--font-pixel);font-size:18px;color:var(--brown)}
.stats-box-lbl{font-size:10px;color:var(--brown2);margin-top:4px}
.stats-bar-chart{margin-bottom:14px}
.stats-bar{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.stats-bar-lbl{font-size:11px;min-width:40px;text-align:right;color:var(--brown2)}
.stats-bar-fill{height:18px;border:1px solid var(--brown);position:relative;transition:width .5s ease}
.stats-bar-val{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--font-pixel);font-size:7px;color:var(--brown)}

/* ========== Pixel Art Loading ========== */
.pixel-loading{display:flex;gap:4px;align-items:center;justify-content:center;padding:20px}
.pixel-loading span{width:8px;height:8px;background:var(--orange);border:1px solid var(--brown);animation:pixelLoad .8s steps(4) infinite}
.pixel-loading span:nth-child(2){animation-delay:.15s}
.pixel-loading span:nth-child(3){animation-delay:.3s}
.pixel-loading span:nth-child(4){animation-delay:.45s}
@keyframes pixelLoad{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

/* ========== Pixel Grid Background Pattern ========== */
.pixel-grid-bg{background-image:
  linear-gradient(var(--gray2) 1px,transparent 1px),
  linear-gradient(90deg,var(--gray2) 1px,transparent 1px);
  background-size:8px 8px;background-position:-1px -1px}

/* ========== Responsive Fine-tuning ========== */
@media(max-width:380px){
  .home-greeting{font-size:12px}
  .hero-name{font-size:12px}
  .quick-grid{gap:8px}
  .quick-card{padding:10px}
}