:root {
  --bg:#F1F3F7; --surface:#FFFFFF; --surface-2:#E6EAF1; --text:#131822;
  --muted:#5C6679; --line:#D5DAE4; --accent:#1F5C8B;
  --ok:#1B7A52; --ok-bg:#E3F2EA; --warn:#9E5D00; --warn-bg:#FBEEDA;
  --crit:#A82F26; --crit-bg:#FBE6E3; --code-bg:#EDF0F5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0D1117; --surface:#151B24; --surface-2:#1D2530; --text:#E3E8F0;
    --muted:#8C96A8; --line:#29323F; --accent:#63A9DA;
    --ok:#48BA88; --ok-bg:#12291F; --warn:#E0A144; --warn-bg:#2C2011;
    --crit:#EB7268; --crit-bg:#2E1614; --code-bg:#0F151D;
  }
}
:root[data-theme="dark"] {
  --bg:#0D1117; --surface:#151B24; --surface-2:#1D2530; --text:#E3E8F0;
  --muted:#8C96A8; --line:#29323F; --accent:#63A9DA;
  --ok:#48BA88; --ok-bg:#12291F; --warn:#E0A144; --warn-bg:#2C2011;
  --crit:#EB7268; --crit-bg:#2E1614; --code-bg:#0F151D;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap { max-width:1080px; margin:0 auto; padding:32px 20px 80px;
        display:flex; flex-direction:column; gap:32px; }
h1,h2,h3 { font-family:Archivo,"IBM Plex Sans",sans-serif; margin:0;
           letter-spacing:-.015em; text-wrap:balance; }
h1 { font-size:1.9rem; font-weight:700; }
h2 { font-size:1.25rem; font-weight:600; }
.eyebrow { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.7rem;
           letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.mono, code { font-family:"IBM Plex Mono",ui-monospace,monospace; }
.age { font-size:.74rem; color:var(--muted); font-family:"IBM Plex Mono",monospace; }

.verdict { border:1px solid var(--line); border-left:5px solid var(--muted);
           border-radius:4px; background:var(--surface); padding:20px 24px;
           display:flex; flex-direction:column; gap:8px; }
.verdict-green { border-left-color:var(--ok); }
.verdict-amber { border-left-color:var(--warn); }
.verdict-red   { border-left-color:var(--crit); }
.verdict ul { margin:6px 0 0; padding-left:20px; }

.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
         gap:1px; background:var(--line); border:1px solid var(--line);
         border-radius:4px; overflow:hidden; }
.tile { background:var(--surface); padding:14px 16px; display:flex;
        flex-direction:column; gap:3px; }
.tile-label { font-family:"IBM Plex Mono",monospace; font-size:.65rem;
              letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.tile-value { font-family:Archivo,sans-serif; font-size:1.5rem; font-weight:600;
              font-variant-numeric:tabular-nums; }

.panel { background:var(--surface); border:1px solid var(--line);
         border-radius:4px; padding:18px 22px; display:flex;
         flex-direction:column; gap:12px; }
.row { display:flex; justify-content:space-between; align-items:baseline;
       gap:14px; padding:7px 0; border-bottom:1px solid var(--line); }
.row:last-child { border-bottom:none; }

.chip { font-family:"IBM Plex Mono",monospace; font-size:.64rem; font-weight:600;
        letter-spacing:.09em; text-transform:uppercase; padding:2px 7px;
        border-radius:3px; white-space:nowrap; }
.chip-ok { background:var(--ok-bg); color:var(--ok); }
.chip-warn { background:var(--warn-bg); color:var(--warn); }
.chip-crit, .chip-error { background:var(--crit-bg); color:var(--crit); }

.spark-line { stroke:var(--accent); stroke-width:1.5; fill:none; }
.spark-area { fill:var(--accent); opacity:.12; }
.spark-end  { fill:var(--accent); }
.spark-empty{ fill:var(--muted); font-size:9px;
              font-family:"IBM Plex Mono",monospace; }

.table-scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:.87rem; min-width:520px; }
th,td { text-align:left; padding:8px 12px; border-bottom:1px solid var(--line); }
thead th { font-family:"IBM Plex Mono",monospace; font-size:.64rem;
           letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
           background:var(--surface-2); font-weight:500; }
td.num { font-variant-numeric:tabular-nums; font-family:"IBM Plex Mono",monospace; }

.login { max-width:380px; margin:12vh auto; display:flex; flex-direction:column;
         gap:16px; background:var(--surface); border:1px solid var(--line);
         border-radius:4px; padding:28px; }
.login input { width:100%; padding:10px 12px; font-size:1rem;
               border:1px solid var(--line); border-radius:3px;
               background:var(--bg); color:var(--text); }
.login button { padding:10px 14px; font-size:1rem; font-weight:600; border:none;
                border-radius:3px; background:var(--accent); color:#fff;
                cursor:pointer; }
.error { color:var(--crit); background:var(--crit-bg); padding:9px 12px;
         border-radius:3px; font-size:.9rem; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { * { animation:none!important;
                                              transition:none!important; } }