:root{
  --bg:#0b0c10; --panel:#111319; --panel2:#151824; --text:#e9edf1; --muted:#a9b3c3;
  --brand:#7c5cff; --ok:#34d399; --warn:#f59e0b; --danger:#ef4444; --ring:#1f2433;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  background:linear-gradient(180deg,var(--bg),#0d1117 50%, #0a0c12);}
.wrap{max-width:1100px;margin:0 auto;padding:20px}

.envwarn{background:#3a1a1a;border:1px solid #6c3131;color:#ffd6d6;padding:10px 14px}
.hidden{display:none}

.hdr{position:sticky;top:0;z-index:5;display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:12px 16px;background:linear-gradient(180deg,var(--panel),var(--panel2));box-shadow:var(--shadow)}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:conic-gradient(from 220deg,var(--brand), #5ad1ff 60%, var(--brand));color:#111;font-weight:900}
.title{font-weight:800;letter-spacing:.3px}
.subtitle{color:var(--muted);font-size:12px}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:none;border-radius:10px;padding:8px 12px;background:#0f1423;border:1px solid #27314b;color:var(--text);cursor:pointer}
.tab.active{background:linear-gradient(180deg,var(--brand),#5a47ff);border-color:transparent}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:none;border-radius:12px;padding:9px 12px;cursor:pointer;background:var(--panel2);color:var(--text);box-shadow:var(--shadow)}
.btn.ghost{background:transparent;border:1px solid #27314b}
.btn.primary{background:linear-gradient(180deg,var(--brand),#5a47ff)}
.btn.danger{background:linear-gradient(180deg,#ff6a6a,#ef4444)}
.small{font-size:12px}.big{font-weight:900;font-size:28px}.muted{color:var(--muted)}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin:16px 0}
.card-ghost{border:1px dashed #27314b;border-radius:14px;padding:12px}
.divider{height:1px;background:#1d2333;margin:10px 0}
.progress{height:10px;background:#1a2130;border-radius:999px;position:relative;overflow:hidden}
.progress>span{position:absolute;inset:0 0 0 0;width:0;background:linear-gradient(90deg,var(--brand),#5ad1ff)}
.kpis{display:flex;gap:14px;justify-content:space-between}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pill{padding:4px 8px;border-radius:999px;border:1px solid #27314b;background:#11182a;color:#cfe0ff;font-size:12px}

.list{display:flex;flex-direction:column;gap:12px}
.habit{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;background:linear-gradient(180deg,#0f121a,#0c1018);border:1px solid #20263a;border-radius:14px;padding:12px}
.habit .name{font-weight:700}
.habit .meta{color:var(--muted);font-size:12px}
.habit .streak{padding:4px 8px;border-radius:999px;background:#10221a;border:1px solid #1f3d2f;color:#b7f7d4}
.habit .row{display:flex;gap:8px;align-items:center}
.counter{display:flex;align-items:center;gap:6px;background:#0f1423;border:1px solid #27314b;border-radius:12px;padding:4px 6px}
.counter button{border:none;border-radius:8px;padding:4px 8px;cursor:pointer;background:#121a2d;color:#cfe0ff}
.counter .val{min-width:24px;text-align:center;font-weight:700}
.kal{display:flex;gap:6px;flex-wrap:wrap}
.day-pill{width:22px;height:22px;border-radius:6px;background:#0f1423;border:1px solid #27314b;display:grid;place-items:center;font-size:11px;color:#9fb3d9}
.day-pill.d{background:#17301f;border-color:#2f5c3b;color:#c7f3d8}
.day-pill.miss{background:#271515;border-color:#4b2a2a;color:#f3b1b1}
.empty{text-align:center;padding:20px}

.fab{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border:none;border-radius:50%;font-size:26px;cursor:pointer;color:white;background:linear-gradient(180deg,var(--brand),#5848ff);box-shadow:0 12px 30px rgba(90,72,255,.45)}
.mt{margin-top:10px}

dialog{border:none;border-radius:18px;padding:0;max-width:560px;width:95%;background:linear-gradient(180deg,var(--panel),var(--panel2));color:var(--text);box-shadow:var(--shadow)}
dialog form{display:flex;flex-direction:column;gap:12px;padding:16px}
dialog input[type="text"], dialog input[type="date"], dialog input[type="number"], dialog textarea{padding:10px 12px;border-radius:10px;border:1px solid #27314b;background:#0f1423;color:var(--text)}
dialog textarea{min-height:140px}
dialog fieldset{border:1px solid #27314b;border-radius:10px;padding:8px 10px}
dialog .days{display:flex;gap:8px;flex-wrap:wrap}
.row{display:flex;gap:10px}
.row.end{justify-content:flex-end}
.row.space{justify-content:space-between;align-items:center}
.page.hidden{display:none}

.tutorial .steps{min-height:140px}
.tutorial .step{display:none}
.tutorial .step.active{display:block}
.dots{display:flex;gap:6px}
.dots span{width:8px;height:8px;border-radius:999px;background:#24304a}
.dots span.active{background:#7c5cff}

.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#101525;border:1px solid #27314b;color:var(--text);padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.panel{background:#0f121a;border:1px solid #20263a;border-radius:14px;padding:12px}
.label{color:var(--muted);font-size:12px;margin-bottom:4px}
.history-board{display:flex;flex-wrap:wrap;gap:8px}

:root.light{--bg:#f5f7fb; --panel:#ffffff; --panel2:#f6f7fb; --text:#10141c; --muted:#51607a; --ring:#e8ebf3; --shadow:0 6px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6)}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:1fr} }