:root{
  --bg:#fbfaf8; --fg:#1c1a17; --muted:#6c6660; --line:#e2ded8;
  --bad:#a3231b; --bad-bg:#fdf1f0; --warn:#8a5a08; --warn-bg:#fdf6e8;
  --ok:#1d6b3f; --ok-bg:#eef7f1; --accent:#2c4a7c;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#16171a; --fg:#e8e6e3; --muted:#9a948d; --line:#2e3034;
    --bad:#ff8a80; --bad-bg:#2a1a19; --warn:#e0b463; --warn-bg:#2a2318;
    --ok:#7fcf9f; --ok-bg:#18251d; --accent:#8fb4e8;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
header{display:flex;gap:1.5rem;align-items:baseline;padding:.9rem 1.5rem;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
header strong{font-size:1.05rem;letter-spacing:.02em}
nav a{margin-right:1rem;color:var(--accent);text-decoration:none}
nav a:hover{text-decoration:underline}
main{padding:1.5rem;max-width:1400px}
footer{padding:1.5rem;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);margin-top:3rem}
h1{font-size:1.5rem;margin:0 0 .5rem}
h2{font-size:1.1rem;margin:2rem 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)}
a{color:var(--accent)}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.small{font-size:.82rem}
.meta{color:var(--muted);font-size:.85rem}
.empty{color:var(--muted);font-style:italic}
.num{text-align:right;font-variant-numeric:tabular-nums}
.bad{color:var(--bad)}
.trunc{max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin:1rem 0}
.tile{border:1px solid var(--line);border-radius:8px;padding:.85rem 1rem;background:transparent}
.tile.bad{border-color:var(--bad);background:var(--bad-bg)}
.tile.warn{border-color:var(--warn);background:var(--warn-bg)}
.tile .n{display:block;font-size:1.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.tile .l{display:block;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}

table{width:100%;border-collapse:collapse;margin:.5rem 0 1.5rem}
table.narrow{font-size:.9rem}
th,td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
tr.row-bad td{background:var(--bad-bg)}
tr.unack td{font-weight:500}

.pill{display:inline-block;padding:.1rem .45rem;border-radius:99px;font-size:.75rem;
  border:1px solid var(--line)}
.pill.open,.pill.failed{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
.pill.running,.pill.queued,.pill.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-bg)}
.pill.done,.pill.resolved{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}

.card{border:1px solid var(--line);border-radius:8px;padding:1rem;margin:0 0 1rem}
.card-head{display:flex;gap:1rem;align-items:flex-start}
.score{font-size:1.5rem;font-weight:600;min-width:2.5rem;text-align:center;
  color:var(--warn);font-variant-numeric:tabular-nums}
table.compare{font-size:.9rem;margin:.75rem 0}
table.compare td:first-child{color:var(--muted);width:6rem}
pre{white-space:pre-wrap;word-break:break-word;background:var(--warn-bg);
  padding:.6rem;border-radius:6px;overflow-x:auto}

form.decide{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.75rem}
form.decide input[type=text]{flex:1;min-width:12rem}
form.scan{display:flex;gap:.5rem;margin:1rem 0;flex-wrap:wrap}
form.scan input{flex:1;min-width:20rem}
input{padding:.5rem .6rem;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);color:var(--fg);font:inherit}
button{padding:.5rem .9rem;border-radius:6px;border:1px solid var(--line);
  background:var(--fg);color:var(--bg);font:inherit;cursor:pointer}
button.ok{background:var(--ok);border-color:var(--ok);color:#fff}
button.no{background:transparent;color:var(--bad);border-color:var(--bad)}
button.secondary{background:transparent;color:var(--fg)}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:.6rem;flex-wrap:wrap}
.tabs a{margin-right:1rem;text-decoration:none}
.tabs a.active{font-weight:600;border-bottom:2px solid var(--accent)}
.pager{display:flex;gap:1.5rem;margin:1.5rem 0}
#scan-status{margin:.5rem 0;font-size:.9rem}

/* --- auth pages --- */
body.centered{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem}
main.auth{max-width:24rem;width:100%;border:1px solid var(--line);border-radius:10px;padding:1.75rem}
main.auth h1{margin:0 0 .25rem}
main.auth form{display:flex;flex-direction:column;gap:.85rem;margin:1.25rem 0}
main.auth label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted)}
main.auth input{font-size:1rem}
main.auth button{margin-top:.35rem;padding:.6rem}
.alert{padding:.6rem .8rem;border-radius:6px;font-size:.9rem;margin:.75rem 0}
.alert.bad{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad)}
.alert.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn)}
.alert.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok)}
header .who{margin-left:auto;display:flex;gap:.75rem;align-items:baseline}
tr.inactive td{opacity:.5}
label.inline{display:inline-flex;flex-direction:row;gap:.35rem;align-items:center}
button.small{padding:.25rem .5rem;font-size:.8rem}
td.row form{display:inline}
.linkbox{display:flex;flex-direction:column;gap:.4rem;border:1px solid var(--warn);
  background:var(--warn-bg);border-radius:8px;padding:.85rem;margin:.75rem 0}
.linkbox input{font-family:ui-monospace,monospace;font-size:.85rem}
.linkbox button{align-self:flex-start}

/* --- settings --- */
table.settings{width:100%;margin:.5rem 0 1.25rem}
table.settings th{width:13rem;text-align:left;vertical-align:top;padding-top:.7rem;
  font-size:.85rem;text-transform:none;letter-spacing:0;color:var(--fg);font-weight:500}
table.settings td{padding:.35rem .6rem}
table.settings input[type=text],table.settings input[type=password],
table.settings input[type=email],table.settings select,table.settings textarea{
  width:100%;max-width:34rem;font-family:inherit}
table.settings textarea{font-family:ui-monospace,monospace;font-size:.8rem}
h3{font-size:.95rem;margin:1.25rem 0 .4rem;color:var(--muted)}