:root{
  --bg:#0f0f11; --surface:#161618; --surface2:#1c1c20; --line:#28282d;
  --line2:#3a3a40; --text:#e9e9ec; --muted:#9a9aa2; --faint:#6c6c74;
  --accent:#c8a24a; --accent-soft:rgba(200,162,74,.12);
  --green:#62ab5b; --green-soft:rgba(98,171,91,.13);
  --red:#c75c54; --red-soft:rgba(199,92,84,.13);
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,"Segoe UI",Inter,system-ui,Roboto,sans-serif;
}
*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:15px; line-height:1.5; padding:3rem 1.2rem 5rem; }
.wrap{ max-width:720px; margin:0 auto; }

header{ margin-bottom:2.2rem; }
.eyebrow{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:600; }
h1{ font-size:1.8rem; font-weight:650; letter-spacing:-.02em; margin:.35rem 0 .4rem; }
.lede{ color:var(--muted); margin:0; max-width:46ch; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:1.4rem 1.5rem; margin-bottom:1.1rem; }
.label{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); font-weight:600; margin:0 0 .9rem; }

/* name of the day */
.notd{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.notd .name{ font-family:var(--mono); font-size:1.7rem; font-weight:600; letter-spacing:-.01em; }
.notd .meta{ color:var(--faint); font-size:.82rem; margin-top:.15rem; }
.notd .right{ display:flex; align-items:center; gap:.5rem; }

/* controls */
label.field{ display:block; font-size:.8rem; color:var(--muted); margin:0 0 .45rem; }
input[type=text]{ width:100%; padding:.7rem .85rem; font-size:.95rem; background:var(--bg);
  border:1px solid var(--line2); border-radius:9px; color:var(--text); outline:none;
  font-family:var(--sans); transition:border-color .15s; }
input[type=text]:focus{ border-color:var(--accent); }
input[type=text]::placeholder{ color:var(--faint); }
input.tiny{ width:3.6rem; text-align:center; padding:.45rem; }
input[type=number]{ width:4rem; padding:.45rem; background:var(--bg); border:1px solid var(--line2);
  border-radius:8px; color:var(--text); text-align:center; }
select{ background:var(--bg); color:var(--text); border:1px solid var(--line2);
  border-radius:8px; padding:.5rem .6rem; font-family:var(--sans); font-size:.9rem; }

button{ font-family:var(--sans); font-size:.92rem; font-weight:600; cursor:pointer;
  border-radius:9px; border:1px solid transparent; padding:.7rem 1.25rem; transition:all .14s; }
.btn-primary{ background:var(--accent); color:#1a1509; }
.btn-primary:hover{ filter:brightness(1.07); }
.btn-ghost{ background:transparent; border-color:var(--line2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--muted); }
.btn-text{ background:none; border:none; color:var(--muted); padding:.4rem .2rem; font-weight:500; }
.btn-text:hover{ color:var(--text); }
button:disabled{ opacity:.5; cursor:default; }

.actionrow{ display:flex; align-items:center; gap:.6rem; margin-top:1rem; }
.spacer{ flex:1; }

/* preset segmented control */
.presets{ display:inline-flex; flex-wrap:wrap; gap:.3rem; background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:.3rem; margin-top:1rem; }
.presets button{ background:none; border:none; color:var(--muted); padding:.45rem .8rem;
  border-radius:7px; font-size:.85rem; font-weight:600; }
.presets button:hover{ color:var(--text); }
.presets button.active{ background:var(--surface2); color:var(--text); box-shadow:0 0 0 1px var(--line2); }

/* advanced disclosure */
.adv{ margin-top:1.3rem; border-top:1px solid var(--line); padding-top:1.3rem; display:none; }
.adv.open{ display:block; }
.section{ margin-bottom:1.7rem; }
.section:last-child{ margin-bottom:0; }
.section .help{ color:var(--faint); font-size:.8rem; margin:.1rem 0 .7rem; }
.row{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }

.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{ cursor:pointer; user-select:none; padding:.38rem .68rem; border:1px solid var(--line2);
  border-radius:999px; font-size:.82rem; color:var(--muted); text-transform:capitalize;
  background:var(--bg); transition:all .12s; }
.chip:hover{ border-color:var(--muted); }
.chip input{ display:none; }
.chip.on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }

.switches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem 1.1rem; }
.switch{ display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; font-size:.88rem; color:var(--text); }
.switch input{ appearance:none; -webkit-appearance:none; width:34px; height:20px; flex:none;
  background:var(--line2); border-radius:999px; position:relative; cursor:pointer; transition:background .15s; }
.switch input::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:#cfcfd4; transition:transform .15s; }
.switch input:checked{ background:var(--accent); }
.switch input:checked::after{ transform:translateX(14px); background:#1a1509; }

.sliders{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.55rem 1.4rem; }
.slider{ display:flex; align-items:center; gap:.7rem; font-size:.85rem; }
.slider label{ width:6rem; color:var(--muted); text-transform:capitalize; flex:none; }
.slider input[type=range]{ flex:1; accent-color:var(--accent); height:3px; }
.slider .val{ width:2.2rem; text-align:right; color:var(--faint); font-variant-numeric:tabular-nums; }

.minirow{ display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.85rem; flex-wrap:wrap; }

/* progress + results */
.bar{ height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-top:1rem; display:none; }
.bar.show{ display:block; }
.bar > i{ display:block; height:100%; width:0; background:var(--accent); transition:width .25s ease; }
.status{ color:var(--muted); font-size:.85rem; margin-top:.9rem; min-height:1.1em; }

.results{ list-style:none; padding:0; margin:.9rem 0 0; }
.item{ display:flex; align-items:center; gap:.85rem; padding:.6rem .25rem; border-bottom:1px solid var(--line); }
.item:last-child{ border-bottom:none; }
.item .nm{ font-family:var(--mono); font-size:1.02rem; font-weight:600; }
.item .sub{ color:var(--faint); font-size:.76rem; margin-top:.12rem; }
.item .bd{ font-family:var(--mono); font-size:.72rem; color:var(--faint); margin-top:.25rem; display:none; }
.item .bd.show{ display:block; }
.item .grow{ min-width:0; flex:1; }
.item .right{ display:flex; align-items:center; gap:.45rem; flex:none; }
.avatar{ width:30px; height:30px; border-radius:6px; image-rendering:pixelated; flex:none; }
.pill{ font-size:.7rem; font-weight:700; letter-spacing:.04em; padding:.22rem .5rem; border-radius:6px; white-space:nowrap; }
.pill.ok{ background:var(--green-soft); color:var(--green); }
.pill.no{ background:var(--red-soft); color:var(--red); }
.scorebadge{ font-family:var(--mono); font-size:.82rem; font-weight:600; color:var(--text);
  background:var(--surface2); border:1px solid var(--line2); border-radius:6px; padding:.18rem .45rem;
  cursor:help; min-width:2.4rem; text-align:center; }
.ico{ background:none; border:1px solid var(--line2); color:var(--muted); border-radius:6px;
  padding:.22rem .45rem; font-size:.75rem; cursor:pointer; text-decoration:none; line-height:1.4; }
.ico:hover{ border-color:var(--muted); color:var(--text); }
.ico.star.on{ color:var(--accent); border-color:var(--accent); }

/* leaderboard */
.tabs{ display:inline-flex; gap:.2rem; background:var(--bg); border:1px solid var(--line);
  border-radius:9px; padding:.25rem; }
.tabs button{ background:none; border:none; color:var(--muted); padding:.35rem .7rem;
  border-radius:6px; font-size:.82rem; font-weight:600; cursor:pointer; }
.tabs button:hover{ color:var(--text); }
.tabs button.active{ background:var(--surface2); color:var(--text); box-shadow:0 0 0 1px var(--line2); }
.rank{ font-family:var(--mono); font-size:.85rem; color:var(--faint); width:1.6rem; text-align:right; flex:none; }

footer{ color:var(--faint); font-size:.78rem; line-height:1.5; margin-top:1.5rem; text-align:center; }
a.link{ color:var(--accent); text-decoration:none; }
a.link:hover{ text-decoration:underline; }

/* cookie consent bar (unobtrusive, bottom) */
.consent{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex;
  align-items:center; justify-content:center; gap:.6rem 1rem; flex-wrap:wrap;
  padding:.7rem 1rem; background:rgba(22,22,24,.97); border-top:1px solid var(--line2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:.82rem; color:var(--muted); }
.consent-text{ max-width:58ch; }
.consent-actions{ display:flex; gap:.5rem; }
.consent-btn{ font-family:var(--sans); font-size:.8rem; font-weight:600; cursor:pointer;
  padding:.4rem .9rem; border-radius:7px; border:1px solid transparent; }
.consent-btn.accept{ background:var(--accent); color:#1a1509; }
.consent-btn.accept:hover{ filter:brightness(1.07); }
.consent-btn.ghost{ background:transparent; border-color:var(--line2); color:var(--text); }
.consent-btn.ghost:hover{ border-color:var(--muted); }