/* ===== Tema: fresh (default) · lux · premium · pro ===== */
:root,[data-theme=fresh]{
 --bgfill:linear-gradient(160deg,#ecfdf5,#f0f9ff);--card:#fff;--ink:#0f2a24;--mut:#5b7a72;--line:#d9ece6;
 --pri:#10b981;--on-pri:#fff;--accent:#06b6d4;--ok:#10b981;--bad:#ef4444;
 --side:#fff;--side-ink:#0f2a24;--side-on:#10b981;--side-on-ink:#fff;
 --radius:16px;--shadow:0 6px 24px rgba(16,185,129,.10);--font:ui-rounded,"Segoe UI",system-ui,sans-serif;--font-h:var(--font);
 --today:rgba(16,185,129,.14);--ringin:#fff;--flash-bg:#d1fae5;--flash-ink:#065f46;
 --c1:#10b981;--c2:#06b6d4;--c3:#84cc16;--c4:#f59e0b;--c5:#8b5cf6}
[data-theme=lux]{
 --bgfill:#0a0a0b;--card:#151517;--ink:#f3ecda;--mut:#a79d84;--line:#2c2820;
 --pri:#d4af37;--on-pri:#17120a;--accent:#f0d98a;--ok:#c9a227;--bad:#d9534f;
 --side:#0f0f10;--side-ink:#d9cfb4;--side-on:#d4af37;--side-on-ink:#17120a;
 --radius:3px;--shadow:0 0 0 1px #2c2820;--font:"Helvetica Neue",Arial,sans-serif;--font-h:"Playfair Display",Georgia,"Times New Roman",serif;
 --today:rgba(212,175,55,.14);--ringin:#151517;--flash-bg:#2a2410;--flash-ink:#f0d98a;
 --c1:#d4af37;--c2:#f0d98a;--c3:#b08d57;--c4:#8c7853;--c5:#e7c873;color-scheme:dark}
[data-theme=premium]{
 --bgfill:linear-gradient(135deg,#0f0c29,#302b63 55%,#24243e);--card:rgba(255,255,255,.07);--ink:#f1f0ff;--mut:#b5b0dc;--line:rgba(255,255,255,.14);
 --pri:#8b5cf6;--on-pri:#fff;--accent:#ec4899;--ok:#34d399;--bad:#fb7185;
 --side:rgba(15,12,41,.55);--side-ink:#e5e2ff;--side-on:linear-gradient(90deg,#8b5cf6,#ec4899);--side-on-ink:#fff;
 --radius:20px;--shadow:0 10px 40px rgba(0,0,0,.35);--font:"Segoe UI",system-ui,sans-serif;--font-h:var(--font);
 --today:rgba(139,92,246,.25);--ringin:#2a2559;--flash-bg:rgba(52,211,153,.18);--flash-ink:#a7f3d0;
 --c1:#8b5cf6;--c2:#ec4899;--c3:#22d3ee;--c4:#fbbf24;--c5:#34d399;color-scheme:dark}
[data-theme=pro]{
 --bgfill:#f1f5f9;--card:#fff;--ink:#0f172a;--mut:#64748b;--line:#e2e8f0;
 --pri:#2563eb;--on-pri:#fff;--accent:#0ea5e9;--ok:#16a34a;--bad:#dc2626;
 --side:#0f172a;--side-ink:#cbd5e1;--side-on:#2563eb;--side-on-ink:#fff;
 --radius:6px;--shadow:0 1px 2px rgba(15,23,42,.08);--font:Inter,"Segoe UI",system-ui,sans-serif;--font-h:var(--font);
 --today:rgba(37,99,235,.10);--ringin:#fff;--flash-bg:#dbeafe;--flash-ink:#1e3a8a;
 --c1:#2563eb;--c2:#0ea5e9;--c3:#16a34a;--c4:#f59e0b;--c5:#7c3aed}

*{box-sizing:border-box}
body{margin:0;font:15px/1.5 var(--font);background:var(--bgfill) fixed;color:var(--ink);display:flex;min-height:100vh}
h1,h2,h3{font-family:var(--font-h)}
[data-theme=lux] h2{font-weight:400;letter-spacing:.05em}
[data-theme=pro] body,[data-theme=pro] td,[data-theme=pro] th{font-size:14px}
[data-theme=pro] td,[data-theme=pro] th{padding-top:6px;padding-bottom:6px}

.side{width:230px;background:var(--side);color:var(--side-ink);border-right:1px solid var(--line);padding:16px;position:sticky;top:0;height:100vh;flex:none;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
[data-theme=premium] .side{backdrop-filter:blur(18px)}
.side h1{font-size:18px;margin:0}
.badge{background:var(--pri);color:var(--on-pri);font:700 10px/1 var(--font);padding:3px 6px;border-radius:99px;vertical-align:middle;letter-spacing:.06em}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side nav a{display:block;padding:8px 10px;border-radius:calc(var(--radius) / 2);color:var(--side-ink);text-decoration:none}
.side nav a:hover{background:var(--today)}
.side nav a.on{background:var(--side-on);color:var(--side-on-ink)}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.themes .sw{display:flex;align-items:center;gap:6px;background:transparent;color:var(--side-ink);border:1px solid var(--line);padding:5px 8px;font-size:12px;text-transform:capitalize}
.themes .sw::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--dot)}
.themes .sw.on{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri)}
.sw-fresh{--dot:#10b981}.sw-lux{--dot:#d4af37}.sw-premium{--dot:linear-gradient(135deg,#8b5cf6,#ec4899)}.sw-pro{--dot:#2563eb}

main{flex:1;padding:24px;min-width:0}
h2{margin:0 0 16px}h3{margin:24px 0 8px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid2{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
[data-theme=premium] .card,[data-theme=premium] table{backdrop-filter:blur(16px)}
.card .v{font-size:28px;font-weight:700;font-family:var(--font-h)}.card .l{color:var(--mut);font-size:13px}
.stat{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ring{--p:0;width:60px;height:60px;border-radius:50%;flex:none;background:conic-gradient(var(--pri) calc(var(--p) * 1%),var(--line) 0);position:relative}
.ring::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--ringin)}

table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
tr:last-child>td{border-bottom:0}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.scroll{overflow-x:auto}
a{color:var(--pri)}
input,select,textarea,button,.btn{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:calc(var(--radius) / 2 + 2px);background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink)}
button,.btn{background:var(--pri);color:var(--on-pri);border-color:var(--pri);cursor:pointer;text-decoration:none;display:inline-block}
[data-theme=premium] button:not(.sec):not(.danger):not(.sw),[data-theme=premium] .btn:not(.sec){background:linear-gradient(90deg,#8b5cf6,#ec4899);border-color:transparent}
.btn.sec,button.sec{background:transparent;color:var(--ink);border-color:var(--line)}
button.danger{background:var(--bad);border-color:var(--bad);color:#fff}
form.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
label{display:flex;flex-direction:column;font-size:12px;color:var(--mut);gap:2px}
.flash{background:var(--flash-bg);color:var(--flash-ink);padding:10px 14px;border-radius:var(--radius);margin-bottom:16px}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),var(--accent))}.bar.ok i{background:var(--ok)}
.matrix td,.matrix th{padding:4px;text-align:center;font-size:12px}
.matrix td.name{text-align:left;white-space:nowrap;position:sticky;left:0;background:var(--card)}
.cell{width:28px;min-width:28px;cursor:pointer;color:#fff;font-weight:700}
.cell:hover{background:var(--line)}.cell.done,.cell.done:hover{background:var(--ok)}
.cell.future{opacity:.35;cursor:default}.istoday{background:var(--today)}
.heat{display:grid;grid-template-columns:repeat(15,1fr);gap:4px}
.heat i{aspect-ratio:1;border-radius:4px;background:var(--line)}
.heat .l1{background:color-mix(in srgb,var(--ok) 35%,transparent)}
.heat .l2{background:color-mix(in srgb,var(--ok) 65%,transparent)}
.heat .l3{background:var(--ok)}
.tag{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;color:#fff;background:var(--mut)}
.mut{color:var(--mut)}.right{text-align:right}
.chart{position:relative;height:260px}
@media(max-width:800px){body{display:block}.side{width:auto;height:auto;position:static}.side nav{flex-direction:row;flex-wrap:wrap}}

/* ===== v2: multi-user, badge, kalender setahun, jurnal ===== */
.who{font-size:13px;color:var(--side-ink);padding:6px 10px;border-top:1px solid var(--line)}
.year-months,.year{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:3px}
.year-months{margin-bottom:4px;font-size:11px;color:var(--mut)}
.year{grid-template-rows:repeat(7,1fr);grid-auto-flow:column}
.year i,.lg{display:inline-block;aspect-ratio:1;border-radius:3px;background:var(--line)}
.lg{width:12px;vertical-align:middle;margin:0 1px}
.year i.e{background:transparent}.year i.f{background:transparent;border:1px dashed var(--line)}
.year i.l1,.lg.l1{background:color-mix(in srgb,var(--ok) 30%,transparent)}
.year i.l2,.lg.l2{background:color-mix(in srgb,var(--ok) 55%,transparent)}
.year i.l3,.lg.l3{background:color-mix(in srgb,var(--ok) 80%,transparent)}
.year i.l4,.lg.l4{background:var(--ok)}
.badge-card{display:flex;gap:12px;align-items:flex-start}
.badge-card .ico{font-size:34px;line-height:1}
.badge-card.locked .ico{filter:grayscale(1);opacity:.45}
.mood input{display:none}
.mood span{font-size:26px;padding:4px 8px;border-radius:10px;cursor:pointer;opacity:.45}
.mood input:checked+span{opacity:1;background:var(--today)}
.mood-strip{display:flex;flex-wrap:wrap;gap:2px}
.mood-strip a{width:26px;text-align:center;text-decoration:none;color:var(--mut)}
textarea{width:100%;font:inherit}