:root { --accent:#ff9f0a; --accent-ink:#1a1100; }
@media (prefers-color-scheme: light) { :root { --accent:#ff9500; } }
.count { text-align:center; padding:24px 0 8px; }
.count .num { font-size:6rem; font-weight:800; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.add-btn { width:100%; font-size:1.4rem; padding:18px; border-radius:16px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { padding:7px 12px; border-radius:99px; font-size:.9rem; }
.chip.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
.list { list-style:none; margin:0; padding:0; }
.list li { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.list li:last-child { border:0; } .list .grow { flex:1; min-width:0; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.tile-stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px; }
.tile-stat .v { font-size:1.8rem; font-weight:700; font-variant-numeric:tabular-nums; } .tile-stat .l { color:var(--muted); font-size:.82rem; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
svg.chart { width:100%; height:auto; display:block; } svg.chart .bar { fill:var(--accent); } svg.chart .bar.zero { fill:var(--line); }
svg.chart text { fill:var(--muted); font-size:10px; font-family:inherit; }
.hbar { display:grid; grid-template-columns:110px 1fr 40px; gap:8px; align-items:center; margin:6px 0; font-size:.9rem; }
.hbar .track { background:var(--panel2); border-radius:6px; height:12px; overflow:hidden; } .hbar .fill { background:var(--accent); height:100%; }
.hbar .n { text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); }
.stars { color:var(--accent); letter-spacing:2px; white-space:nowrap; }
.stars .off { color:var(--line); }
.rate-in { display:flex; align-items:center; gap:12px; } .rate-in input[type=range] { padding:0; accent-color:var(--accent); }
.me { color:var(--accent); font-weight:600; }
nav.tabs { margin:6px 0 18px; position:sticky; top:0; z-index:5; backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); background:color-mix(in srgb,var(--bg) 70%,transparent); padding:8px 0; border-radius:0; }

.count .num.done { color:var(--ok); }
.limit { max-width:320px; margin:12px auto 0; } .ok { color:var(--ok); } .bad2 { color:var(--bad); }
.track { background:var(--panel2); border-radius:6px; height:10px; overflow:hidden; } .track.sm { height:6px; margin-top:6px; }
.track .fill { background:var(--accent); height:100%; } .track .fill.done { background:var(--ok); }
.kindgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.kind { display:flex; flex-direction:column; align-items:center; gap:2px; padding:16px 8px; border-radius:var(--radius); background:var(--panel); }
.kind:hover { transform:translateY(-1px); background:var(--panel2); } .kind:active { transform:scale(.97); }
.kind .ke { font-size:2rem; line-height:1.1; } .kind .kn { font-weight:600; } .kind.ghost { border-style:dashed; background:transparent; }
button:disabled { opacity:.5; cursor:default; }
.badges { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.bdg { display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); opacity:.55; filter:grayscale(.8); }
.bdg.on { opacity:1; filter:none; border-color:var(--accent); } .bdg .bi { font-size:1.8rem; line-height:1; } .bdg > div:last-child { flex:1; }
svg.chart .h { fill:var(--panel2); } svg.chart .h1 { fill:color-mix(in srgb,var(--accent) 30%,var(--panel2)); } svg.chart .h2 { fill:color-mix(in srgb,var(--accent) 55%,var(--panel2)); }
svg.chart .h3 { fill:color-mix(in srgb,var(--accent) 80%,var(--panel2)); } svg.chart .h4 { fill:var(--accent); }
svg.chart.heat { max-width:480px; }
.mini { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:6px; font-size:.9rem; color:var(--muted); } .mini b { color:var(--text); }

.kind { border-radius:20px; } .count .num { font-weight:800; letter-spacing:-.04em; }
@media (max-width:640px) { .count .num { font-size:5rem; } .kindgrid { grid-template-columns:repeat(2,1fr); } nav.tabs { overflow-x:auto; flex-wrap:nowrap; } nav.tabs button { flex:none; white-space:nowrap; } }