:root{
  --bg:#0b0d12; --card:#151922; --card2:#1d2230; --line:#262c3b;
  --txt:#f1f3f8; --dim:#8b93a7; --acc:#7c8cff; --acc2:#34d399; --warn:#fbbf24; --bad:#f87171;
  --r:20px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  font-family:ui-rounded,-apple-system,"SF Pro Rounded","PingFang TC",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--txt);height:100%}
body{overscroll-behavior:none;-webkit-user-select:none;user-select:none}
#app{max-width:560px;margin:0 auto;padding:calc(var(--safe-t) + 18px) 16px calc(100px + var(--safe-b))}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
input,textarea,select{font:inherit;color:var(--txt);background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;width:100%;outline:none;-webkit-user-select:text;user-select:text}
input:focus,textarea:focus{border-color:var(--acc)}
textarea{resize:none;min-height:110px}
h1{font-size:26px;margin:0}
h2{font-size:17px;margin:22px 0 10px}
.dim{color:var(--dim)} .sm{font-size:13px}
.row{display:flex;align-items:center;gap:10px}
.sp{flex:1}
.card{background:var(--card);border-radius:var(--r);padding:16px}

/* header / hero */
.head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.hero{background:linear-gradient(135deg,#2a2f6b,#1b3a4b);border-radius:24px;padding:18px;margin-bottom:18px}
.lv{display:flex;align-items:center;gap:14px}
.lvbadge{width:56px;height:56px;border-radius:18px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:22px;font-weight:800}
.bar{height:10px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:6px}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc2),#a7f3d0);transition:width .5s}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 13px;border-radius:99px;background:var(--card2);font-size:14px;color:var(--dim)}
.chip.on{background:var(--acc);color:#fff}
.stat{background:rgba(255,255,255,.1);border-radius:14px;padding:8px 12px;font-size:14px}

/* week strip */
.week{display:flex;justify-content:space-between;margin:0 0 6px}
.wd{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
.wd b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;background:var(--card);color:var(--dim)}
.wd.done b{background:var(--acc2);color:#05281d}
.wd.part b{background:#2a3b3a;color:var(--acc2)}
.wd.today b{outline:2px solid var(--acc);outline-offset:2px}

/* habit item */
.group{font-size:13px;color:var(--dim);margin:18px 4px 8px}
.hb{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:var(--card);margin-bottom:10px;overflow:hidden;transition:transform .15s}
.hb:active{transform:scale(.98)}
.hb .fill{position:absolute;inset:0 auto 0 0;background:var(--c);opacity:.22;transition:width .4s;pointer-events:none}
.hb.done .fill{opacity:.35}
.hb>*{position:relative}
.hi{width:44px;height:44px;border-radius:14px;background:var(--c);display:grid;place-items:center;font-size:22px;flex:none}
.hb .nm{font-weight:600;font-size:16px}
.hb.done .nm{opacity:.65;text-decoration:line-through}
.ck{width:40px;height:40px;border-radius:50%;border:2.5px solid var(--c);display:grid;place-items:center;font-size:18px;flex:none;color:#fff}
.hb.done .ck{background:var(--c)}
.mini{font-size:12px;padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.09);color:var(--txt)}
.fire{color:var(--warn);font-size:13px}
.empty{text-align:center;padding:36px 10px;color:var(--dim)}
.fab{width:100%;padding:14px;border-radius:18px;border:2px dashed var(--line);color:var(--dim);font-size:15px;margin-top:4px}

/* buttons */
.btn{padding:13px 18px;border-radius:16px;background:var(--acc);color:#fff;font-weight:700;font-size:16px;text-align:center}
.btn.ghost{background:var(--card2);color:var(--txt)}
.btn.good{background:var(--acc2);color:#05281d}
.btn.block{width:100%;display:block}
.btn.sm{padding:8px 14px;font-size:14px;border-radius:12px}

/* tabs */
#tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:4px;padding:8px 12px calc(8px + var(--safe-b));background:linear-gradient(transparent,var(--bg) 35%);z-index:5}
#tabs .in{display:flex;gap:2px;background:rgba(29,34,48,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:26px;padding:6px;width:100%;max-width:420px}
#tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0;border-radius:20px;font-size:11px;color:var(--dim)}
#tabs button span{font-size:20px}
#tabs button.on{background:var(--acc);color:#fff}

/* sheet */
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;z-index:10}
#overlay.show{display:flex}
.sheet{background:var(--card);width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:28px 28px 0 0;padding:20px 18px calc(24px + var(--safe-b));animation:up .25s}
.sheet.center{border-radius:28px;margin:auto 16px;align-self:center;text-align:center}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.sheet h3{margin:0 0 14px;font-size:19px}
.fl{font-size:13px;color:var(--dim);margin:14px 0 6px}
.emojis{display:flex;flex-wrap:wrap;gap:8px}
.emojis button{width:42px;height:42px;border-radius:12px;background:var(--card2);font-size:21px}
.emojis button.on{outline:2px solid var(--acc)}
.dots{display:flex;gap:10px}
.dots button{width:30px;height:30px;border-radius:50%;background:var(--c)}
.dots button.on{outline:3px solid #fff;outline-offset:2px}

/* sprint timer */
.ring{width:210px;height:210px;margin:6px auto 14px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .t{position:absolute;inset:0;display:grid;place-items:center;font-size:46px;font-weight:800;font-variant-numeric:tabular-nums}

/* suggestions */
.sg{display:flex;gap:12px;align-items:center;padding:14px;background:var(--card);border-radius:18px;margin-bottom:10px}
.sg .hi{background:var(--card2)}
.tag{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--card2);color:var(--dim);margin-left:6px;font-weight:500}

/* mood */
.moods{display:flex;justify-content:space-between}
.moods button{font-size:34px;width:58px;height:58px;border-radius:18px;background:var(--card2);filter:grayscale(.9);opacity:.7}
.moods button.on{filter:none;opacity:1;outline:2px solid var(--acc)}
.breath{width:150px;height:150px;border-radius:50%;margin:20px auto;background:radial-gradient(circle,#7c8cff,#34d39988);display:grid;place-items:center;font-weight:700;font-size:18px;transition:transform 4s ease-in-out}

/* heat + badges */
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.heat i{aspect-ratio:1;border-radius:7px;background:var(--card2)}
.heat i.l1{background:#1f4a47}.heat i.l2{background:#25826b}.heat i.l3{background:var(--acc2)}
.bd{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bd div{background:var(--card);border-radius:18px;padding:14px 8px;text-align:center;font-size:12px;color:var(--dim)}
.bd div b{display:block;font-size:28px;margin-bottom:4px;filter:grayscale(1);opacity:.35}
.bd div.on{color:var(--txt)} .bd div.on b{filter:none;opacity:1}
.cols{display:flex;gap:8px;align-items:flex-end;height:90px}
.cols div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;font-size:11px;color:var(--dim)}
.cols i{width:100%;border-radius:8px;background:var(--acc);min-height:4px}

#toast{position:fixed;left:50%;top:calc(var(--safe-t) + 14px);transform:translate(-50%,-80px);background:#fff;color:#111;padding:10px 18px;border-radius:99px;font-weight:700;font-size:14px;z-index:20;transition:transform .3s;white-space:nowrap}
#toast.show{transform:translate(-50%,0)}
.pop{animation:pop .4s}
@keyframes pop{50%{transform:scale(1.04)}}