:root{
  --ink:#444; --soft:#888; --faint:#bbb; --line:#eee; --bg:#fff;
  --accent:#444; --worth:#1d9e75; --regret:#c0504d; --skim:#b58a2b;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-transform:lowercase;
}
a{color:var(--ink); text-decoration:none}
a:hover{color:#000}

header{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  max-width:720px; margin:0 auto; padding:26px 20px 14px;
  border-bottom:1px solid var(--line);
}
.wordmark{font-weight:600; letter-spacing:-.2px}
nav{display:flex; gap:16px; margin-left:auto}
nav a{color:var(--soft)}
nav a.on{color:var(--ink); font-weight:600}
.lock{font-size:12px; color:var(--faint); border:1px solid var(--line); padding:2px 8px; border-radius:20px}
.lock.on{color:var(--worth); border-color:#cfe9df}

main{max-width:720px; margin:0 auto; padding:8px 20px 80px}
h2{font-size:15px; font-weight:600; margin:34px 0 6px; display:flex; align-items:baseline; gap:10px}
h2 .count{color:var(--faint); font-weight:400}
h2 .sub,.cat{color:var(--soft); font-weight:400; font-size:13px}
.rail.quiet h2{color:var(--soft)}
h3.cat{font-size:12px; letter-spacing:.5px; color:var(--soft); margin:26px 0 4px}

.card{padding:16px 0; border-bottom:1px solid var(--line)}
.meta{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--soft); margin-bottom:3px}
.meta .chan{font-weight:600; color:var(--ink)}
.meta .dot{color:var(--faint)}
.kind{margin-left:6px; font-size:11px; color:var(--skim); border:1px solid #ecdcb8; padding:0 6px; border-radius:10px}
.title{display:block; font-size:16.5px; font-weight:500; line-height:1.4}
.payload{margin:5px 0 0; color:var(--soft); font-size:14px}
.topics{margin-top:8px; display:flex; flex-wrap:wrap; gap:6px}
.tag{font-size:11.5px; color:var(--soft); background:#f6f6f6; padding:2px 8px; border-radius:12px}

.actions{margin-top:11px; display:flex; gap:8px; flex-wrap:wrap}
.actions button{
  font:inherit; font-size:12.5px; text-transform:lowercase;
  border:1px solid var(--line); background:#fff; color:var(--soft);
  padding:4px 11px; border-radius:16px; cursor:pointer; transition:.12s;
}
.actions button:hover{color:var(--ink); border-color:var(--faint)}
.actions .v[data-verdict=worth]:hover{color:var(--worth); border-color:#cfe9df}
.actions .v[data-verdict=regret]:hover{color:var(--regret); border-color:#eecfcd}
.actions .q.on{color:var(--ink); border-color:var(--faint); background:#f6f6f6}

.empty,.stamp{color:var(--faint); font-size:13.5px; padding:14px 0}
.stamp{text-align:center; margin-top:30px}
code{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; background:#f6f6f6; padding:1px 5px; border-radius:4px}

.tally{display:flex; gap:16px; font-size:13px; color:var(--soft); margin:4px 0 10px}
.tally .w{color:var(--worth)} .tally .r{color:var(--regret)} .tally .s{color:var(--skim)}
.weights{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 20px}
.weights .lbl{font-size:12px; color:var(--faint); margin-right:4px}
.weights .tag.up{color:var(--worth); background:#eef8f3}
.weights .tag.down{color:var(--regret); background:#fbeeed}
.card.watched .title{color:var(--soft)}
.verdict-badge{font-weight:600}
.card.watched.worth .verdict-badge{color:var(--worth)}
.card.watched.regret .verdict-badge{color:var(--regret)}
.card.watched.skim .verdict-badge{color:var(--skim)}

.chanrow{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; flex-wrap:wrap}
.cname{font-weight:600}
.chandle,.cstat{color:var(--soft); font-size:12.5px}
.chanrow.feedempty .cname{color:var(--regret)}
.warn{font-size:11.5px; color:var(--regret); background:#fbeeed; padding:1px 8px; border-radius:10px}

.card.fade{opacity:0; transform:translateY(-4px); transition:.25s}

@media (prefers-color-scheme: dark){
  :root{--ink:#cfcfcf; --soft:#8a8a8a; --faint:#5a5a5a; --line:#242424; --bg:#141414}
  a:hover{color:#fff}
  .tag,.actions .q.on{background:#1e1e1e}
  code{background:#1e1e1e}
  .weights .tag.up{background:#12241d} .weights .tag.down{background:#2a1615}
  .warn{background:#2a1615}
}