:root{
  --bg:#0f172a; --surface:#1e293b; --line:#334155; --text:#e2e8f0;
  --muted:#94a3b8; --accent:#3b82f6; --green:#22c55e; --yellow:#f59e0b;
  --red:#ef4444; --grey:#64748b;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.small{font-size:12px}
.err{color:var(--red)}

.topbar{
  display:flex; align-items:center; gap:22px; padding:12px 20px;
  background:var(--surface); border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.brand{font-weight:600}
.topbar nav{display:flex; gap:16px; flex-wrap:wrap}
.topbar nav a{color:var(--muted); padding:4px 2px}
.topbar nav a.on{color:var(--text); border-bottom:2px solid var(--accent)}
.topbar .acct{margin-left:auto; display:flex; gap:14px}
.topbar .acct a{color:var(--muted); font-size:13px}

.wrap{max-width:980px; margin:0 auto; padding:24px 18px 60px}
.foot{text-align:center; color:var(--muted); font-size:12px; padding:20px}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:20px; margin-bottom:18px;
}
.card.narrow{max-width:380px; margin:8vh auto 0}
h1{font-size:22px; margin:0 0 6px} h2{font-size:17px; margin:0 0 6px}

label{display:block; margin:10px 0; font-size:13px; color:var(--muted)}
input,textarea,button{font:inherit}
input[type=text],input[type=password],input[type=number],textarea{
  width:100%; margin-top:5px; padding:9px 11px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg); color:var(--text);
}
form.row{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
form.row label{margin:0; flex:0 0 auto}
form.row input[type=text]{width:auto; min-width:220px}
button{
  padding:9px 16px; border-radius:8px; border:0; cursor:pointer;
  background:var(--accent); color:#fff; font-weight:500;
}
button:hover{filter:brightness(1.08)}
button:disabled{opacity:.55; cursor:default}
button.ghost{background:transparent; border:1px solid var(--line); color:var(--text)}

.banner{padding:10px 12px; border-radius:8px; margin:12px 0; font-size:14px}
.banner.error{background:#7f1d1d; color:#fecaca}
.banner.warn{background:#78350f; color:#fde68a}
.banner.ok{background:#14532d; color:#bbf7d0}

.rowspread{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600}
.chip.recommended{background:#15803d; color:#fff}
.chip.consider{background:#b45309; color:#fff}
.chip.avoid{background:#b91c1c; color:#fff}
.chip.error{background:#475569; color:#fff}

.tablewrap{overflow-x:auto; margin-top:10px}
table.results{border-collapse:collapse; width:100%; font-size:13.5px}
table.results th,table.results td{padding:7px 10px; text-align:center; white-space:nowrap}
table.results thead th{color:var(--muted); font-weight:500; border-bottom:1px solid var(--line)}
table.results tbody tr{border-bottom:1px solid rgba(51,65,85,.5)}
table.results td .sym{font-weight:600}
tr.rate-recommended{background:rgba(21,128,61,.16)}
tr.rate-consider{background:rgba(180,83,9,.16)}
tr.rate-avoid{background:rgba(185,28,28,.12)}
tr.rate-error{background:rgba(71,85,105,.16)}

.pill{padding:2px 8px; border-radius:6px; font-size:12px; font-weight:600}
.pill.recommended{background:#15803d; color:#fff}
.pill.consider{background:#b45309; color:#fff}
.pill.avoid{background:#b91c1c; color:#fff}
.pill.error{background:#475569; color:#fff}

.ratingbadge{
  display:block; text-align:center; padding:10px; border-radius:8px;
  font-size:20px; font-weight:700; color:#fff; margin:14px 0;
}
.ratingbadge.recommended{background:var(--green)}
.ratingbadge.consider{background:var(--yellow); color:#111827}
.ratingbadge.avoid{background:var(--red)}
.ratingbadge.error{background:var(--grey)}

.metrics{display:grid; gap:10px}
.metric{background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px}
.metric-label{color:var(--muted); font-size:12px}
.metric-row{display:flex; align-items:center; justify-content:space-between; margin:3px 0}
.metric-value{font-size:16px; font-weight:600}
.metric-crit{color:var(--muted); font-size:11px}
.pf{padding:2px 8px; border-radius:6px; font-size:11px; font-weight:700; color:#fff}
.pf.pass{background:var(--green)} .pf.fail{background:var(--red)}
.bignum{font-size:22px; font-weight:700; color:var(--accent)}

.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px}
.tab{background:var(--surface); border:1px solid var(--line); color:var(--muted); padding:6px 12px; border-radius:8px}
.tab.on{background:var(--accent); color:#fff; border-color:var(--accent)}
.daypane.hidden{display:none}

.progress{margin:12px 0}
.progress-label{font-size:13px; margin-bottom:6px}
.bar{height:10px; background:var(--bg); border-radius:999px; overflow:hidden; border:1px solid var(--line)}
.fill{height:100%; background:var(--accent); transition:width .3s}
.back{font-size:13px; color:var(--muted)}