/* =========================================================
   HABITFLOW PRO — DESIGN SYSTEM
   ========================================================= */
:root{
  --bg:#070a11;--surface:#0d121c;--surface-2:#111827;--surface-3:#151e2d;
  --line:#202b3d;--line-strong:#2b3a52;--text:#f5f7fb;--muted:#8995a8;
  --primary:#6d7cff;--primary-2:#8d7bff;--green:#35d583;--yellow:#ffb547;
  --red:#ff6475;--cyan:#42c8ff;--shadow:0 20px 60px #0006;
  --radius:16px;--radius-sm:11px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1000px 500px at 50% -100px,#18223b 0,#070a11 55%);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.light{--bg:#f4f6fa;--surface:#fff;--surface-2:#f8f9fc;--surface-3:#eef1f7;--line:#e2e7ef;--line-strong:#ccd5e2;--text:#141824;--muted:#667085;background:var(--bg)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.hidden{display:none!important}
.app{min-height:100vh}
.shell{display:grid;grid-template-columns:238px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:22px 14px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(18px);z-index:10}
.brand{display:flex;gap:10px;align-items:center;padding:3px 8px 28px}
.brand-mark{width:39px;height:39px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:grid;place-items:center;color:white;font-weight:900;font-size:20px;box-shadow:0 10px 30px #6d7cff35}
.brand strong{font-size:17px;display:block}.brand small{color:var(--muted);font-size:9px}
.nav-title{font-size:9px;text-transform:uppercase;letter-spacing:1.6px;color:#657187;padding:0 11px 7px}
.nav{display:grid;gap:4px;margin-bottom:25px}
.nav button{width:100%;border:0;background:transparent;color:var(--muted);padding:11px 12px;border-radius:10px;text-align:left}
.nav button:hover,.nav button.active{background:#6d7cff14;color:var(--primary)}
.nav button span{display:inline-block;width:25px}
.sidebar-bottom{position:absolute;left:20px;right:20px;bottom:20px;color:#5d697c;font-size:10px}
.main{min-width:0;padding:26px 28px 40px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:25px}
.page-title{font-size:26px;letter-spacing:-.7px;margin:0}.page-sub{color:var(--muted);font-size:12px;margin:3px 0 0}
.top-actions{display:flex;gap:7px}.icon-btn,.soft-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;height:39px;padding:0 12px}
.icon-btn{width:39px;padding:0}.primary-btn{border:0;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:white;border-radius:10px;padding:10px 14px;font-weight:750}
.grid{display:grid;gap:14px}.stats{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:14px}
.card{background:linear-gradient(145deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:var(--radius);padding:17px;box-shadow:0 8px 35px #00000012}
.stat-card{min-height:112px}.label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.7px}.stat-value{font-size:26px;font-weight:800;margin-top:11px;letter-spacing:-.5px}.stat-note{font-size:10px;color:var(--muted);margin-top:2px}
.progress-ring{float:right;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) var(--p,0%),var(--line) 0);position:relative}.progress-ring:after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}.progress-ring b{position:relative;z-index:1;font-size:10px}
.content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:14px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.card-head h2{font-size:15px;margin:0}.card-head p{font-size:11px;color:var(--muted);margin:3px 0 0}
.search{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:9px;padding:8px 10px;width:160px}
.filters{display:flex;gap:5px;overflow:auto;padding-bottom:2px;margin-bottom:11px}.filter{white-space:nowrap;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);border-radius:8px;padding:6px 9px;font-size:10px}.filter.active{color:var(--primary);border-color:var(--primary)}
.habit{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);background:var(--surface-3);border-radius:12px;margin:7px 0;transition:.15s}.habit:hover{border-color:var(--line-strong);transform:translateY(-1px)}.habit.completed{border-color:#35d58355}.habit-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#6d7cff16;font-size:18px}.habit-name{font-weight:750;font-size:13px}.habit-meta{font-size:10px;color:var(--muted);margin-top:2px}.habit-side{display:flex;align-items:center;gap:5px}.check{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);background:transparent;color:transparent}.completed .check{background:var(--green);border-color:var(--green);color:#042014}.more{width:30px;height:30px;border:0;background:transparent;color:var(--muted)}
.streak-badge{font-size:9px;color:var(--yellow);padding:5px 7px;background:#ffb54710;border-radius:7px}
.empty{text-align:center;padding:38px 15px;color:var(--muted)}.empty-mark{width:48px;height:48px;margin:0 auto 10px;border-radius:14px;background:var(--surface-3);display:grid;place-items:center;color:var(--primary);font-size:22px}.empty h3{color:var(--text);margin:0}.empty p{font-size:11px}
.side-stack{display:grid;gap:14px}.ring-large{width:170px;height:170px;margin:8px auto 17px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--primary) var(--p,0%),var(--line) 0);position:relative}.ring-large:after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--surface)}.ring-inner{position:relative;z-index:1;text-align:center}.ring-inner strong{font-size:31px;display:block}.ring-inner small{color:var(--muted);font-size:10px}
.week-row{display:grid;grid-template-columns:35px 1fr 34px;align-items:center;gap:7px;margin:11px 0;font-size:10px}.bar-bg{height:7px;border-radius:8px;background:var(--surface-3);overflow:hidden}.bar-fill{height:100%;width:var(--w);background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:8px}
.chart{height:220px;display:flex;align-items:end;gap:7px;padding-top:15px}.chart-col{flex:1;text-align:center}.chart-bar{height:165px;background:var(--surface-3);border-radius:8px;display:flex;align-items:end;overflow:hidden}.chart-bar i{width:100%;height:var(--h);background:linear-gradient(var(--primary),var(--primary-2));border-radius:8px 8px 0 0}.chart-col small{font-size:9px;color:var(--muted);display:block;margin-top:6px}
.heatmap{display:grid;grid-template-columns:repeat(14,1fr);gap:5px}.heat{aspect-ratio:1;border-radius:4px;background:var(--surface-3)}.heat.l1{background:#123c30}.heat.l2{background:#12694c}.heat.l3{background:#16a46f}.heat.l4{background:#35d583}
.performance-row{padding:12px 0;border-bottom:1px solid var(--line)}.performance-top{display:flex;justify-content:space-between;font-size:11px}.mini-progress{height:6px;background:var(--surface-3);border-radius:6px;margin-top:7px;overflow:hidden}.mini-progress i{height:100%;display:block;width:var(--w);background:var(--green)}
.calendar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.month-title{text-align:center}.month-title strong{display:block}.month-title small{color:var(--muted);font-size:10px}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.cal-label{text-align:center;color:var(--muted);font-size:9px;padding:4px}.cal-day{min-height:58px;padding:6px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);cursor:pointer}.cal-day:hover{border-color:var(--primary)}.cal-day.today{outline:2px solid var(--primary)}.cal-day.muted{opacity:.3}.cal-day b{font-size:10px}.dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:7px}.dot{width:5px;height:5px;border-radius:50%;background:var(--green)}.detail{padding:12px;border-radius:11px;background:var(--surface-3);margin-top:12px;color:var(--muted);font-size:11px;min-height:40px}
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;padding:18px;z-index:100}.modal-box{width:min(470px,100%);background:var(--surface);border:1px solid var(--line-strong);border-radius:17px;padding:20px;box-shadow:var(--shadow)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.modal-head h2{margin:0;font-size:17px}.modal-box label{display:block;color:var(--muted);font-size:10px;margin:12px 0}.modal-box input,.modal-box select{width:100%;display:block;margin-top:6px;padding:11px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--text)}.modal-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:18px}
.toast{position:fixed;right:18px;bottom:18px;background:#101827;color:white;border:1px solid var(--line-strong);padding:11px 14px;border-radius:10px;z-index:200;font-size:11px}
.mobile-nav{display:none}
@media(max-width:1050px){.stats{grid-template-columns:repeat(3,1fr)}.content-grid{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.shell{grid-template-columns:1fr}.sidebar{display:none}.main{padding:18px 12px 78px}.stats{grid-template-columns:repeat(2,1fr)}.topbar{align-items:flex-start}.top-actions .soft-btn{display:none}.page-title{font-size:22px}.content-grid{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr}.search{width:120px}.mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--line);z-index:20;padding:7px}.mobile-nav button{border:0;background:transparent;color:var(--muted);font-size:10px}.mobile-nav button.active{color:var(--primary)}.calendar{gap:3px}.cal-day{min-height:48px}.heatmap{gap:3px}}