:root{--bg:#0b1116;--panel:rgba(255,255,255,.04);--line:rgba(255,255,255,.08);--text:#eaf2f7;--muted:#9db2bf;--accent:#b3ff3a;--accent2:#58ffb5;--accentText:#6CFF6C;--warn:#ff7a7a}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:radial-gradient(1000px 700px at 20% -10%,#0f1821,#080c11 60%) fixed}
.hero{display:flex;justify-content:space-between;gap:12px;margin:12px;padding:12px 12px 8px;background:var(--panel);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:18px}
.brand .logo{display:flex;gap:10px;align-items:center}.logo .fuel{font-weight:1000;letter-spacing:.5px;font-size:44px}.logo .hq{font-weight:1000;font-size:44px;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pulse{height:2px;margin:6px 0 2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);opacity:.45;animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%{opacity:.2}50%{opacity:.6}100%{opacity:.2}}
.ring-wrap{position:relative;width:120px;height:120px}.ring{width:120px;height:120px}.ring-bg{fill:none;stroke:#132028;stroke-width:10}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:326;stroke-dashoffset:326;transition:stroke-dashoffset .25s ease}
.ring-sweep{fill:none;stroke:url(#grad);stroke-width:2.5;opacity:.7;stroke-dasharray:40 360;animation:orbit 4.5s linear infinite;transform-origin:50% 50%}
@keyframes orbit{to{transform:rotate(360deg)}}
.ring-label{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.topnav{display:flex;gap:8px;margin:0 12px 8px}.topnav button{flex:1;height:44px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:#cde}
.topnav .active{outline:2px solid var(--accent);color:#000;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.pane h2{font-size:22px;margin:10px 2px}.sub{color:var(--muted);margin:6px 2px 10px}.small{font-size:12px;opacity:.8}.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px;margin:12px 0}
.chips{display:flex;gap:10px;margin:8px 0 2px}.chip{padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:#0e151b;color:var(--muted);font-weight:700;cursor:pointer}.chip.active{box-shadow:inset 0 0 0 2px var(--accent);background:linear-gradient(180deg,#122029,#0e141a);color:var(--accentText)}
.progressbar{height:6px;background:#132028;border-radius:999px;overflow:hidden}.progressbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s ease-in-out}
.progressbar.big{height:10px}
.checks{list-style:none;margin:0;padding:0}.checks li{padding:6px 2px}
.row-actions{display:flex;gap:10px;margin-top:8px}.btn{background:transparent;border:1px solid var(--line);color:var(--muted);padding:8px 12px;border-radius:12px;cursor:pointer}.btn.ghost{border-style:dashed}
.week-grid{display:grid;grid-template-columns:1fr;gap:10px}.week-day{border:1px dashed var(--line);border-radius:14px;padding:10px}
.pill{display:inline-block;font-size:12px;color:#000;background:linear-gradient(90deg,var(--accent),var(--accent2));padding:6px 10px;border-radius:999px;margin-bottom:6px}
.cue{color:#9ad1b0;font-size:12px;margin:2px 0 0 24px;opacity:.95}
.finisher{border-left:3px solid var(--accent);padding:8px 10px;margin-top:8px;background:rgba(179,255,58,.06);border-radius:8px}
/* Gating — lockbar, no full overlay */
.blur{filter:blur(4px);pointer-events:none}
.lockbar{margin-top:8px;padding:10px;border:1px dashed var(--line);border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.lockbar .cta{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#001;border:none;padding:8px 12px;border-radius:999px;cursor:pointer}
/* Account */
.acct{display:flex;gap:12px;align-items:center}.pfp{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:#101a22;border:1px solid var(--line)}
.avatars{margin-top:8px}.avatars .avatar{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#0e151b;border:1px solid var(--line);margin-right:6px;cursor:pointer}
.avatars .avatar.selected{outline:2px solid var(--accent)}
/* Sleep cards */
.sleepCard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px;margin:12px 0}
.sleepCard h3{margin:0 0 6px}
.tip{color:#cfe;opacity:.8;font-size:12px}
/* Fireworks */
@keyframes fall{to{transform:translateY(120vh) rotate(0)}}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
.confetti{position:absolute;width:8px;height:14px;background:#b3ff3a;opacity:.9;animation:fall 1200ms linear forwards,spin 1200ms ease-in-out forwards}
@media (max-width:420px){.logo .fuel,.logo .hq{font-size:36px}}