:root {
  --bg:#f6f7f9; --panel:#fff; --fg:#1b1f24; --muted:#6a737d; --line:#e1e4e8;
  --ok:#1a7f37; --warn:#9a6700; --bad:#cf222e; --accent:#0969da;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0d1117; --panel:#161b22; --fg:#e6edf3; --muted:#8b949e; --line:#30363d;
    --ok:#3fb950; --warn:#d29922; --bad:#f85149; --accent:#58a6ff;
  }
}
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--fg);
       font:14px/1.5 ui-sans-serif,-apple-system,Segoe UI,Roboto,sans-serif }
h1 { font-size:1.25rem; margin:0 0 .25rem }
.head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem }
#who { color:var(--muted); font-size:.85rem; text-align:right }
#who button { padding:.25rem .6rem; font-size:.8rem; font-weight:500;
              background:transparent; color:var(--accent) }
.gate { padding:2rem; text-align:center; background:var(--panel);
        border:1px solid var(--line); border-radius:8px;
        max-width:420px; margin:4rem auto }
.gate button { margin-top:.9rem }
.hidden { display:none }
h2 { font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
     color:var(--muted); margin:1.75rem 0 .6rem }
.sub { color:var(--muted); margin:0 0 1.5rem; font-variant-numeric:tabular-nums }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px;
         overflow:hidden }
.scroll { overflow-x:auto }
table { border-collapse:collapse; width:100%; min-width:640px }
th { text-align:left; font-size:.72rem; text-transform:uppercase;
     letter-spacing:.05em; color:var(--muted); font-weight:600;
     padding:.6rem .8rem; border-bottom:1px solid var(--line) }
td { padding:.55rem .8rem; border-bottom:1px solid var(--line);
     vertical-align:top }
tr:last-child td { border-bottom:0 }
code, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em }
.tag { display:inline-block; padding:.1rem .45rem; border-radius:999px;
       font-size:.72rem; border:1px solid var(--line); color:var(--muted) }
.ok { color:var(--ok) } .warn { color:var(--warn) } .bad { color:var(--bad) }
.new { color:var(--ok); font-weight:600 }
button { font:inherit; font-weight:600; padding:.5rem 1rem; border-radius:6px;
         border:1px solid var(--accent); background:var(--accent); color:#fff;
         cursor:pointer }
button:disabled { opacity:.55; cursor:default }
.bar { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap }
.empty { padding:.8rem; color:var(--muted) }
.result { margin-top:1rem; padding:.9rem 1rem; border-radius:8px;
          border:1px solid var(--line); background:var(--panel) }
.result ul { margin:.35rem 0 0; padding-left:1.1rem }
.muted { color:var(--muted) }
.drop { margin-top:.75rem; padding:1.1rem; border:1.5px dashed var(--line);
        border-radius:8px; background:var(--panel); text-align:center;
        color:var(--muted); transition:border-color .12s, background .12s }
.drop.over { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent) }
.drop strong { color:var(--fg) }
.link { color:var(--accent); cursor:pointer; text-decoration:underline }
.bar2 { display:flex; gap:.6rem; align-items:center; justify-content:center;
        margin-top:.6rem; flex-wrap:wrap }
label.chk { color:var(--muted); font-size:.85rem; display:flex; gap:.35rem;
            align-items:center; cursor:pointer }
input[type=text], input[type=number], select, textarea {
  font:inherit; width:100%; padding:.3rem .4rem; border-radius:4px;
  border:1px solid var(--line); background:var(--bg); color:var(--fg) }
input::placeholder { color:var(--muted); opacity:.8 }
textarea { min-height:14rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
           font-size:.85em }
button.ghost { background:transparent; color:var(--accent) }
button.danger { padding:.2rem .5rem; background:transparent;
                border-color:var(--line); color:var(--bad) }
button.small { padding:.3rem .7rem; font-size:.85rem }
#editor { margin-bottom:1.5rem }
#editor .panel { padding:1rem }
#editor .row { display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap;
               margin:.5rem 0 }
#editor .row label { flex:1 1 11rem; color:var(--muted); font-size:.85rem }
#editor details summary { cursor:pointer; color:var(--muted); margin:.4rem 0 }
#editor table { min-width:620px }
#editor td { padding:.35rem .4rem }
.ed-head { display:flex; justify-content:space-between; align-items:baseline;
           gap:1rem; flex-wrap:wrap }

/* ---- metadata editor: overview + class detail ---- */
.ed-section-title { font-weight:600 }
#editor .link-strong { font-weight:600 }
/* class detail: data key/value rows and threshold rows */
.kv-key { width:100% }
#ec-data td, #ec-thr td { padding:.3rem .4rem }
#ec-data .kv-type { min-width:7rem }
.ec-advisory { margin:.3rem 0 .2rem; font-size:.85rem }
/* classes table: data shown as key: value pairs */
.kv-pair { display:block; white-space:nowrap; color:var(--fg) }
.kv-pair .kv-k { color:var(--muted) }
.col-num { width:9rem }
.cell-shrink { white-space:nowrap; width:1% }
#ec-thr-raw { min-height:8rem }
.hint { color:var(--muted); font-size:.82rem; margin-top:.3rem }

/* ---- heads table: versions grouped under one head name ---- */
#heads .grp-name { vertical-align:top; border-right:1px solid var(--line) }
#heads .grp-name div { font-size:.78rem }
#heads tr.grp-start td { border-top:2px solid var(--line) }
#heads tr.grp-start:first-child td { border-top:0 }

/* ====================== dashboard app shell ====================== */
/* `:not(.hidden)` so this id-level rule does not out-specify `.hidden`
   (display:none) when the gate hides the shell — otherwise the empty shell
   stays on screen and pushes the login card below the fold. */
#app:not(.hidden) { display:flex; min-height:100vh; align-items:stretch }
#sidebar { flex:0 0 220px; width:220px; background:var(--panel);
           border-right:1px solid var(--line); padding:1.1rem .9rem;
           display:flex; flex-direction:column; gap:1rem;
           position:sticky; top:0; align-self:flex-start; height:100vh }
.brand { font-weight:700; font-size:1.05rem; letter-spacing:.01em; padding:.2rem .4rem }
.nav { display:flex; flex-direction:column; gap:.15rem }
.nav a { display:block; padding:.5rem .6rem; border-radius:6px; color:var(--fg);
         text-decoration:none; font-weight:500 }
.nav a:hover { background:color-mix(in srgb,var(--accent) 10%,transparent) }
.nav a.active { background:color-mix(in srgb,var(--accent) 16%,transparent);
                color:var(--accent); font-weight:600 }
.side-foot { margin-top:auto; display:flex; flex-direction:column; gap:.6rem;
             font-size:.8rem; word-break:break-all }
#content { flex:1 1 auto; min-width:0; padding:1.5rem 2rem }
.page { min-width:0 }

/* ---- stat cards ---- */
.cards { display:grid; gap:.75rem; margin:.4rem 0 .5rem;
         grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px;
        padding:.8rem .9rem }
.card-val { font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums;
            line-height:1.2 }
.card-label { color:var(--muted); font-size:.78rem; text-transform:uppercase;
              letter-spacing:.05em; margin-top:.2rem }

/* ---- charts ---- */
.chart-grid { display:grid; gap:.75rem;
              grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.chart-card { padding:.8rem .9rem }
.chart-title { color:var(--muted); font-size:.78rem; text-transform:uppercase;
               letter-spacing:.05em; margin-bottom:.5rem }
.chart { width:100% }
.line-svg { width:100%; height:auto; display:block }
.line-svg .axis { stroke:var(--line); stroke-width:1 }
.line-svg .axl { fill:var(--muted); font-size:9px }
.legend { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.4rem;
          color:var(--muted); font-size:.78rem }
.legend .lg { display:inline-flex; align-items:center; gap:.3rem }
.legend .sw { width:.7rem; height:.7rem; border-radius:2px; display:inline-block }

/* ---- horizontal bar charts ---- */
.bars { display:flex; flex-direction:column; gap:.3rem }
.bar-row { display:grid; grid-template-columns:11rem 1fr 5rem; align-items:center;
           gap:.6rem }
.bar-label { color:var(--muted); font-size:.82rem; overflow:hidden;
             text-overflow:ellipsis; white-space:nowrap }
.bar-track { background:color-mix(in srgb,var(--line) 60%,transparent);
             border-radius:4px; height:.85rem; overflow:hidden }
.bar-fill { height:100%; border-radius:4px; min-width:2px }
.bar-val { text-align:right; font-variant-numeric:tabular-nums; font-size:.82rem;
           font-family:ui-monospace,SFMono-Regular,Menlo,monospace }

/* ---- errors table ---- */
.err-filters { margin:.3rem 0 .6rem; gap:1rem }
.err-filters input[type=datetime-local] { width:auto }
.pager { margin-top:.6rem; justify-content:space-between }
.pager .muted { font-variant-numeric:tabular-nums }
.nowrap { white-space:nowrap }
.err-row.has-tb { cursor:pointer }
.err-row.has-tb:hover td { background:color-mix(in srgb,var(--accent) 6%,transparent) }
.err-tb td { background:var(--bg) }
pre.tb { margin:0; padding:.6rem .8rem; overflow-x:auto; font-size:.8em;
         font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
         white-space:pre; color:var(--fg) }

/* ---- narrow screens: sidebar becomes a top bar ---- */
@media (max-width:760px) {
  #app { flex-direction:column }
  #sidebar { flex-basis:auto; width:auto; height:auto; position:static;
             border-right:0; border-bottom:1px solid var(--line) }
  .nav { flex-direction:row; flex-wrap:wrap }
  .side-foot { margin-top:.4rem }
  #content { padding:1.1rem 1rem }
  .bar-row { grid-template-columns:8rem 1fr 4.5rem }
}