:root{
  --bg:#f6f7f9;--card:#fff;--ink:#1a1d21;--muted:#5b6470;--line:#e3e6ea;
  --quente:#d4362a;--quente-bg:#fdecea;--morno:#b7791f;--morno-bg:#fdf3e0;
  --frio:#3b6ea5;--frio-bg:#e9f1fa;--bar:#c9ced6;--accent:#2f6f4f;
}
:root:not([data-theme="light"]){}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#14171a;--card:#1e2226;--ink:#eceff2;--muted:#9aa4af;--line:#2c3238;
  --quente:#ff6b5e;--quente-bg:#3a1f1c;--morno:#e2a53f;--morno-bg:#332a17;
  --frio:#6ea8e0;--frio-bg:#1b2a3a;--bar:#3a4149;--accent:#4fae7f;
}}
:root[data-theme="dark"]{
  --bg:#14171a;--card:#1e2226;--ink:#eceff2;--muted:#9aa4af;--line:#2c3238;
  --quente:#ff6b5e;--quente-bg:#3a1f1c;--morno:#e2a53f;--morno-bg:#332a17;
  --frio:#6ea8e0;--frio-bg:#1b2a3a;--bar:#3a4149;--accent:#4fae7f;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:24px}
h1{font-size:22px;margin:0 0 4px}
.back{display:inline-block;color:var(--muted);text-decoration:none;font-size:13px;margin-bottom:14px}
.back:hover{color:var(--accent)}
.sub{color:var(--muted);margin:0 0 8px;font-size:14px}
.note{color:var(--muted);margin:0 0 20px;font-size:12.5px;max-width:760px}
.summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.pill{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;font-size:13px}
.pill b{font-size:18px;display:block}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.controls button,.controls select{background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer}
.controls button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.controls label{font-size:13px;color:var(--muted);display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px;border-left:5px solid var(--line)}
.card.quente{border-left-color:var(--quente)}
.card.morno{border-left-color:var(--morno)}
.card.frio{border-left-color:var(--frio)}
.card h3{margin:0 0 2px;font-size:16px}
.cat{color:var(--muted);font-size:13px;margin-bottom:8px}
.badge{float:right;font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px}
.badge.quente{background:var(--quente-bg);color:var(--quente)}
.badge.morno{background:var(--morno-bg);color:var(--morno)}
.badge.frio{background:var(--frio-bg);color:var(--frio)}
.score{font-size:28px;font-weight:700;line-height:1}
.score small{font-size:13px;color:var(--muted);font-weight:400}
.meta{font-size:13px;color:var(--muted);margin:8px 0}
.meta a{color:var(--accent);text-decoration:none}
.meta a:hover{text-decoration:underline}
.gancho{font-size:13px;font-style:italic;margin:8px 0;padding:8px;
  background:var(--bg);border-radius:8px}
.bk{margin-top:10px}
.bk .row{display:flex;align-items:center;gap:6px;font-size:11px;margin:3px 0}
.bk .lbl{width:96px;color:var(--muted);text-transform:capitalize}
.bk .track{flex:1;height:6px;background:var(--bar);border-radius:3px;overflow:hidden}
.bk .fill{height:100%;background:var(--accent)}
.empty{text-align:center;color:var(--muted);padding:40px;grid-column:1/-1}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Hub (index) page */
.hub-card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:18px;text-decoration:none;color:var(--ink);display:block;transition:border-color .15s}
.hub-card:hover{border-color:var(--accent)}
.hub-card h3{margin:0 0 4px;font-size:17px}
.hub-card .cidade{color:var(--muted);font-size:13px;margin-bottom:12px}
.hub-card .stats{display:flex;gap:8px;flex-wrap:wrap}
.hub-card .stat{font-size:12px;padding:3px 9px;border-radius:20px;background:var(--bg);color:var(--muted)}
.hub-card .stat.quente{background:var(--quente-bg);color:var(--quente)}
.hub-card .stat.morno{background:var(--morno-bg);color:var(--morno)}
.hub-card .stat.frio{background:var(--frio-bg);color:var(--frio)}