:root {
  --bg: #f7f6f2;
  --surface: #ffffff;
  --ink: #23221f;
  --ink-2: #52514e;
  --ink-3: #8a8983;
  --grid: #e6e4dc;
  --line: #2a78d6;
  --threshold: #6b6a64;
  --below-zone: rgba(214, 120, 40, 0.07);
  --good: #1a7f4e;
  --good-bg: #e6f4ec;
  --warn: #b5530f;
  --warn-bg: #fbeee2;
  --border: #e1dfd6;
  --s0: #2a78d6;
  --s1: #7c4dcc;
  --s2: #11877a;
  --s3: #a16207;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141413;
    --surface: #1c1c1a;
    --ink: #ecebe6;
    --ink-2: #b8b7b0;
    --ink-3: #85847e;
    --grid: #2e2d2a;
    --line: #5b9cf0;
    --threshold: #a3a29b;
    --below-zone: rgba(240, 150, 70, 0.08);
    --good: #4cc488;
    --good-bg: #13291e;
    --warn: #f0a060;
    --warn-bg: #2e1d10;
    --border: #2c2b28;
    --s0: #5b9cf0;
    --s1: #a98bf5;
    --s2: #3cc4b2;
    --s3: #e0b13c;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

header h1 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0;
}

.linklike {
  background: none;
  border: 0;
  color: var(--ink-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
}

.linklike:hover { color: var(--ink); }

.verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 650;
  background: var(--surface);
  border: 1px solid var(--border);
}

.verdict .icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: none;
}

.verdict.above { background: var(--good-bg); color: var(--good); border-color: transparent; }
.verdict.above .icon { background: var(--good); color: var(--good-bg); }
.verdict.below { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.verdict.below .icon { background: var(--warn); color: var(--warn-bg); }
.verdict.waiting { color: var(--ink-3); }
.verdict.waiting .icon { border: 2px solid var(--ink-3); }
.verdict[hidden] { display: none; }
.verdict.small { margin-top: 10px; font-size: 16px; padding: 11px 20px; }
.verdict.small .icon { width: 26px; height: 26px; font-size: 14px; }
.verdict { flex-wrap: wrap; row-gap: 2px; }
.verdict .amount { margin-left: auto; font-size: 0.82em; font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0.85; }
.verdict .amount:empty { display: none; }

.chart-card {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 14px 8px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 6px 4px;
}

.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend span[hidden] { display: none; }
.swatch { width: 22px; height: 0; border-top: 2px solid var(--line); }
.legend .legend-group { display: contents; }
.key { flex: none; overflow: visible; }
.chart-card[hidden] { display: none; }

.plot { width: 100%; display: block; }
#chart { height: 420px; }
.plot text { fill: var(--ink-3); font-size: 11.5px; }
.plot .grid { stroke: var(--grid); stroke-width: 1; }
.plot .live { fill: none; stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }
/* percentile lines, in CHECK_PERCENTILES order (the chart and the legend keys); more lines reuse these in turn */
.band { fill: none; stroke: var(--threshold); stroke-width: 2; }
.band-0 { stroke-dasharray: 6 5; }
.band-1 { stroke-dasharray: 1.5 4; stroke-linecap: round; }
.band-2 { stroke-dasharray: 12 4 2 4; }
.band-3 { stroke-dasharray: 3 3; opacity: 0.6; }
.plot .zone { fill: var(--below-zone); }
.plot .now { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 4; }
.plot .dot { fill: var(--line); stroke: var(--surface); stroke-width: 2; }

/* pushed charts: one colour per line, in the order the pusher sends them */
.series { fill: none; stroke-width: 2; stroke-linejoin: round; }
.series.s-0 { stroke: var(--s0); }
.plot .dot.s-0 { fill: var(--s0); }
.series.s-1 { stroke: var(--s1); }
.plot .dot.s-1 { fill: var(--s1); }
.series.s-2 { stroke: var(--s2); }
.plot .dot.s-2 { fill: var(--s2); }
.series.s-3 { stroke: var(--s3); }
.plot .dot.s-3 { fill: var(--s3); }
.plot .ref { stroke: var(--threshold); stroke-width: 1.2; stroke-dasharray: 2 4; }
.plot text.ref-label { fill: var(--ink-2); }
.feed h2 { margin: 2px 0 2px 4px; font-size: 15px; font-weight: 650; color: var(--ink); }
.feed-note { margin: 0 0 10px 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.feed-plot { height: 260px; }
.feed-status { margin: 4px 0 4px 4px; font-size: 12.5px; color: var(--ink-3); }
.feed-status.err { color: var(--warn); }

.status {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.status .err { color: var(--warn); }

/* login */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 22px;
}

.login-card h1 { font-size: 18px; margin: 0 0 18px; }
.login-card label { display: block; font-size: 13px; color: var(--ink-2); margin: 12px 0 5px; }

.login-card input[type=text], .login-card input[type=password] {
  width: 100%;
  padding: 10px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

.login-card .remember { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--ink-2); font-size: 14px; }
.login-card .remember label { margin: 0; font-size: 14px; }

.login-card button {
  width: 100%;
  margin-top: 18px;
  padding: 11px;
  border: 0;
  border-radius: 8px;
  background: var(--line);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.login-error { color: var(--warn); font-size: 14px; margin: 0 0 6px; }

@media (max-width: 600px) {
  .verdict { font-size: 18px; padding: 14px; }
  #chart { height: 300px; }
}