@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{ color-scheme: light; }
:root{
  --bg:#fff8f3;--card:#fff;
  --or:#f97316;--or2:#ea580c;--orl:#fed7aa;--orxl:#fff7ed;
  --str:#ef4444;--per:#8b5cf6;--cha:#ec4899;--end:#10b981;--int:#3b82f6;--agi:#f59e0b;
  --t1:#1c1917;--t2:#78716c;--t3:#a8a29e;
  --bd:rgba(249,115,22,.18);--bd2:rgba(249,115,22,.4);
  --glow:rgba(249,115,22,.22);--sh:0 2px 12px rgba(249,115,22,.12);
  --bg1:rgba(249,115,22,.07);--bg2:rgba(234,88,12,.05);
  --r:14px;--r2:20px;--tr:all .22s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;-webkit-text-size-adjust:100%;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--t1);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 0%,var(--bg1),transparent 45%),radial-gradient(circle at 85% 100%,var(--bg2),transparent 45%);}
#app{position:relative;z-index:1;max-width:480px;margin:0 auto;height:var(--vh100,100dvh);display:flex;flex-direction:column;}

.app-header{padding:16px 16px 10px;background:var(--bg);position:sticky;top:0;z-index:100;}
.header-top{display:flex;align-items:center;justify-content:space-between;}
.app-logo{display:flex;align-items:center;gap:9px;}
.logo-icon{width:36px;height:36px;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px var(--glow);flex-shrink:0;}
.logo-icon img{width:100%;height:100%;object-fit:cover;display:block;}
.app-title{font-size:1.2rem;font-weight:800;background:linear-gradient(135deg,var(--or2),var(--or));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.header-date{text-align:right;}
.date-day{font-size:.82rem;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.date-full{font-size:.82rem;color:var(--t2);font-weight:500;}

.main-content{flex:1;min-height:0;overflow-y:auto;}
.page{display:none;padding:10px 16px 88px;box-sizing:border-box;}

.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--card);border-top:1px solid var(--bd);display:flex;z-index:200;padding-bottom:env(safe-area-inset-bottom);}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px;border:none;background:none;cursor:pointer;transition:var(--tr);color:var(--t3);}
.nav-btn .nav-icon{font-size:22px;transition:var(--tr);display:flex;align-items:center;justify-content:center;}
.nav-btn .nav-label{font-size:.68rem;font-weight:700;}
.nav-btn.active{color:var(--or);}
.nav-btn.active .nav-icon{transform:scale(1.1);}

.sub-tabs{display:flex;gap:5px;background:var(--card);border:1px solid var(--bd);border-radius:var(--r2);padding:4px;margin-bottom:14px;}
.sub-tab{flex:1;border:none;background:transparent;color:var(--t3);font-family:'Inter',sans-serif;font-size:.78rem;font-weight:700;padding:8px 4px;border-radius:var(--r);cursor:pointer;transition:var(--tr);white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:5px;}
.subtab-icon{width:16px;height:16px;object-fit:contain;display:inline-block;}
.sub-tab.active{background:linear-gradient(135deg,var(--or),var(--or2));color:#fff;box-shadow:0 2px 10px var(--glow);}

.spider-wrap{background:var(--card);border:1px solid var(--bd);border-radius:var(--r2);padding:16px;margin-bottom:12px;box-shadow:var(--sh);position:relative;}
.spider-help-btn{position:absolute;bottom:14px;right:14px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--bd2);background:var(--orxl);color:var(--or2);font-size:.72rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--tr);line-height:1;}
.spider-help-btn:hover,.spider-help-btn.active{background:var(--or);color:#fff;border-color:var(--or);}
.stat-help-panel{display:none;border-top:1px solid var(--bd);margin-top:8px;padding-top:10px;}
.stat-help-panel.open{display:block;}
.stat-help-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.78rem;color:var(--t2);}
.stat-help-item span{font-size:.7rem;font-weight:800;min-width:30px;}
.spider-title{font-size:.78rem;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;}
#spiderChart{width:100%;display:block;}
.stat-row{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:12px;}
.stat-pill{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:7px 3px;text-align:center;}
.stat-pill-val{font-size:1rem;font-weight:800;line-height:1;}
.stat-pill-key{font-size:.55rem;font-weight:700;text-transform:uppercase;color:var(--t3);}
.stat-pill.str .stat-pill-val{color:var(--str);}
.stat-pill.per .stat-pill-val{color:var(--per);}
.stat-pill.cha .stat-pill-val{color:var(--cha);}
.stat-pill.end .stat-pill-val{color:var(--end);}
.stat-pill.int .stat-pill-val{color:var(--int);}
.stat-pill.agi .stat-pill-val{color:var(--agi);}

.char-card{background:var(--card);border:1.5px solid var(--bd);border-radius:var(--r2);padding:14px 16px;margin-bottom:12px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:10px;}
.char-main-row{display:flex;align-items:center;justify-content:space-between;}
.char-lv-row{display:flex;align-items:baseline;gap:6px;}
.char-lv-label{font-size:.78rem;font-weight:700;color:var(--t3);letter-spacing:.03em;}
.char-lv-num{font-size:2rem;font-weight:800;color:var(--or);line-height:1;}
.char-xp-wrap{display:flex;align-items:center;gap:8px;}
.char-xp-bar-bg{flex:1;height:7px;border-radius:4px;background:var(--orl);overflow:hidden;}
.char-xp-bar-fill{height:100%;border-radius:4px;background:var(--or);transition:width .4s ease;}
.char-xp-text{font-size:.65rem;font-weight:600;color:var(--t3);white-space:nowrap;}
.char-rank-section{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.char-rank-row{display:flex;align-items:center;gap:8px;}
.char-rank-text{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.char-title-text{font-size:1rem;font-weight:700;color:var(--or2);}
.char-rank-desc{font-size:.7rem;color:var(--t3);text-align:right;font-style:italic;line-height:1.3;}
.char-rank-icon{width:28px;height:28px;object-fit:contain;}
.char-badges-row{display:flex;gap:3px;justify-content:flex-end;}
.char-badge-ico{font-size:1.05rem;line-height:1;}

.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.sc{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:11px 8px;text-align:center;box-shadow:var(--sh);}
.sc-val{font-size:1.5rem;font-weight:800;line-height:1;margin-bottom:3px;}
.sc-lbl{font-size:.62rem;color:var(--t3);font-weight:700;text-transform:uppercase;}
.sc.orange .sc-val{color:var(--or);}
.sc.green .sc-val{color:#10b981;}
.sc.red .sc-val{color:#ef4444;}

.progress-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:13px 15px;margin-bottom:12px;box-shadow:var(--sh);display:flex;align-items:center;gap:12px;}
.progress-info{flex:1;}
.progress-label{font-size:.78rem;color:var(--t2);font-weight:600;margin-bottom:7px;}
.progress-track{background:var(--orl);border-radius:999px;height:7px;overflow:hidden;}
.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--or),var(--or2));transition:width .55s ease;}
.progress-pct{font-size:1.3rem;font-weight:800;color:var(--or);min-width:46px;text-align:right;}

.week-nav{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:11px 15px;margin-bottom:12px;box-shadow:var(--sh);}
.wnb{background:none;border:none;color:var(--t2);font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:8px;transition:var(--tr);}
.wnb:hover{color:var(--or);background:var(--orxl);}
.wk-label{font-size:.85rem;font-weight:700;color:var(--t1);}
.days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px;}
.day-col{display:flex;flex-direction:column;align-items:center;gap:3px;}
.day-lbl{font-size:.6rem;font-weight:700;color:var(--t3);text-transform:uppercase;}
.day-bar-wrap{width:100%;height:60px;background:var(--orxl);border:1px solid var(--bd);border-radius:8px;display:flex;align-items:flex-end;overflow:hidden;}
.day-bar-fill{width:100%;background:linear-gradient(to top,var(--or),var(--or2));border-radius:8px;transition:height .5s ease;}
.day-bar-wrap.today{border-color:var(--or);box-shadow:0 0 6px var(--glow);}
.day-pct{font-size:.58rem;font-weight:700;color:var(--t2);}
.week-summary{background:var(--card);border:1px solid var(--bd);border-radius:var(--r2);padding:14px;margin-bottom:12px;box-shadow:var(--sh);}
.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.sg-item{background:var(--orxl);border:1px solid var(--bd);border-radius:var(--r);padding:11px;text-align:center;}
.sg-val{font-size:1.5rem;font-weight:800;line-height:1;margin-bottom:3px;}
.sg-lbl{font-size:.62rem;color:var(--t3);font-weight:700;text-transform:uppercase;}
.sg-item:nth-child(1) .sg-val{color:var(--or);}
.sg-item:nth-child(2) .sg-val{color:#10b981;}
.sg-item:nth-child(3) .sg-val{color:var(--or2);}
.sg-item:nth-child(4) .sg-val{color:#3b82f6;}
.eval-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r2);padding:16px;margin-bottom:12px;box-shadow:var(--sh);}
.eval-title{font-size:.88rem;font-weight:700;color:var(--t1);margin-bottom:12px;}
.star-row{display:flex;gap:6px;justify-content:center;margin-bottom:10px;}
.star-btn{background:none;border:none;font-size:1.8rem;cursor:pointer;filter:grayscale(1) opacity(.3);transition:var(--tr);}
.star-btn.active{filter:none;transform:scale(1.1);}
.eval-msg{text-align:center;font-size:.83rem;color:var(--t2);font-weight:500;min-height:20px;margin-bottom:10px;}
.eval-note{width:100%;background:var(--orxl);border:1.5px solid var(--bd);border-radius:var(--r);padding:10px 13px;color:var(--t1);font-family:'Inter',sans-serif;font-size:.85rem;outline:none;resize:none;min-height:75px;transition:var(--tr);line-height:1.6;}
.eval-note:focus{border-color:var(--or);box-shadow:0 0 0 3px var(--glow);}
.btn-save{width:100%;background:linear-gradient(135deg,var(--or),var(--or2));border:none;border-radius:var(--r);color:#fff;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:700;padding:12px;cursor:pointer;margin-top:10px;box-shadow:var(--sh);transition:var(--tr);}
.btn-save:hover{transform:translateY(-1px);}
.badges-count{font-size:.82rem;font-weight:700;color:var(--or2);text-align:center;margin-bottom:10px;padding:6px;background:var(--orxl);border-radius:var(--r);border:1px solid var(--bd);}
.badge-cat-hdr{grid-column:1/-1;font-size:.7rem;font-weight:800;color:var(--or);text-transform:uppercase;letter-spacing:.08em;padding:6px 2px 2px;border-bottom:1.5px solid var(--bd);}
.badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.badge-item{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:10px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;}
.badge-item.earned{border-color:var(--or);background:var(--orxl);box-shadow:0 0 8px var(--glow);}
.badge-emoji{font-size:1.5rem;display:flex;align-items:center;justify-content:center;}
.badge-emoji svg{width:22px;height:22px;stroke:var(--or);opacity:.55;}
.badge-name{font-size:.62rem;font-weight:700;color:var(--t3);text-transform:uppercase;line-height:1.2;}
.badge-desc{font-size:.55rem;color:var(--t3);line-height:1.3;}
.badge-item.earned .badge-name{color:var(--or2);}
.badge-item.earned .badge-desc{color:var(--t2);}
.achievement-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;}
.achievement-overlay.open{opacity:1;pointer-events:all;}
.achievement-popup{background:var(--card);border-radius:var(--r2);padding:28px 24px;text-align:center;max-width:280px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.25);transform:scale(.85);transition:transform .3s;display:flex;flex-direction:column;align-items:center;gap:10px;}
.achievement-overlay.open .achievement-popup{transform:scale(1);}
.achievement-label{font-size:.78rem;font-weight:800;color:var(--or);text-transform:uppercase;letter-spacing:.08em;}
.achievement-emoji{font-size:3.5rem;line-height:1;}
.achievement-name{font-size:1.15rem;font-weight:800;color:var(--t1);}
.achievement-desc{font-size:.82rem;color:var(--t2);line-height:1.4;}
.achievement-btn{margin-top:6px;padding:10px 32px;background:linear-gradient(135deg,var(--or),var(--or2));color:#fff;border:none;border-radius:var(--r);font-family:'Inter',sans-serif;font-size:.9rem;font-weight:700;cursor:pointer;box-shadow:0 3px 12px var(--glow);transition:var(--tr);}
.achievement-btn:hover{transform:translateY(-1px);}
.history-list{display:flex;flex-direction:column;gap:8px;}
.hist-item{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:13px;box-shadow:var(--sh);}
.hist-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.hist-week{font-size:.83rem;font-weight:700;color:var(--t1);}
.hist-bar{height:5px;background:var(--orl);border-radius:999px;overflow:hidden;margin-bottom:6px;}
.hist-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--or),var(--or2));}
.hist-stats{display:flex;gap:10px;flex-wrap:wrap;}
.hist-stat{font-size:.73rem;color:var(--t3);}
.hist-stat span{color:var(--t2);font-weight:600;}