/* 哪个便宜 — one stylesheet, no framework, no client script.

   A chart-first tool, so the page is built to put a line chart in the middle
   of it and keep everything else quiet: a deep slate ground, one amber for
   anything you press, and three plan colours that are distinguishable from
   each other rather than pretty next to each other. */

:root {
  --bg: #12161c;
  --panel: #1a2029;
  --panel2: #212936;
  --line: #2c3542;
  --ink: #e8ecf1;
  --dim: #a7b1bf;
  --faint: #74808f;
  --amber: #e0a13a;
  --ok: #4fb286;
  --warn: #e0a13a;
  --bad: #d9705f;
  --a: #e0a13a;
  --b: #46a9a0;
  --c: #9b8ad6;
  --d: #d9705f;
  --e: #7f8fa6;
  --radius: 11px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 14px calc(30px + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", "Noto Sans SC", "PingFang SC", sans-serif;
  overflow-wrap: anywhere;
}
main { max-width: 800px; margin: 0 auto; }

.topbar {
  max-width: 800px; margin: 0 auto; padding: 22px 0 14px;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: start;
}
.mark {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(155deg, var(--amber) 0%, #b3762a 100%);
  color: #16110a; font-size: 22px; font-weight: 700;
}
.titles h1 { margin: 0; font-size: 21px; letter-spacing: -0.01em; line-height: 1.25; }
.titles p { margin: 4px 0 0; color: var(--dim); font-size: 14px; }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin: 14px 0;
}
.panel h2 { margin: 0 0 8px; font-size: 15px; }
.panel h2.spaced { margin-top: 20px; }
.sub { margin: 0 0 10px; color: var(--dim); font-size: 14px; }
.sub:last-child { margin-bottom: 0; }
.tiny { margin: 9px 0 0; color: var(--faint); font-size: 12.5px; line-height: 1.55; }
.quiet { background: transparent; }
code {
  font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}

/* ------------------------------------------------------------------ form */

.egs { display: grid; gap: 8px; margin-bottom: 14px; }
.eg {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font: inherit;
}
.eg b { display: block; font-size: 14px; }
.eg span { display: block; color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.eg.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.eg:focus-visible, .go:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}
.lbl { display: block; margin: 6px 0 7px; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
textarea {
  width: 100%; min-width: 0; resize: vertical;
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: 10px;
  font: 12.5px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dials { margin-top: 13px; }
.go {
  cursor: pointer; border: 0; border-radius: 9px; padding: 11px 22px;
  background: var(--amber); color: #16110a; font: inherit; font-weight: 700;
}

/* --------------------------------------------------------------- verdict */

.verdict {
  border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: var(--radius); background: var(--panel); padding: 15px 16px; margin: 14px 0;
}
.verdict > b { display: block; font-size: 20px; line-height: 1.3; }
.verdict .say { margin: 7px 0 0; color: var(--dim); font-size: 14px; }
.verdict.ok { border-left-color: var(--ok); }
.verdict.warn { border-left-color: var(--warn); }
.verdict.na { border-left-color: var(--faint); }

.finding { border-top: 1px solid var(--line); padding: 13px 0; }
.finding:first-child { border-top: 0; padding-top: 0; }
.finding:last-child { padding-bottom: 0; }
.finding > b { display: block; font-size: 14.5px; }
.finding > p { margin: 5px 0 0; color: var(--dim); font-size: 13.5px; }
.finding.ok > b { color: var(--ok); }
.finding.warn > b { color: var(--warn); }
.finding.bad > b { color: var(--bad); }

/* ----------------------------------------------------------------- chart */

svg.cx { display: block; width: 100%; height: auto; }
.gl, .glv { stroke: var(--line); stroke-width: 1; }
.glv { stroke-dasharray: 2 4; }
.gy, .gx, .ax { fill: var(--faint); font-size: 10px; font-family: inherit; }
.band { fill: var(--panel2); }
.you { stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 4 3; }
.youlab { fill: var(--dim); font-size: 10.5px; font-family: inherit; font-weight: 600; }
.pl { stroke-width: 2.2; fill: none; stroke-linecap: round; }
.cross { fill: var(--ink); fill-opacity: 0.55; }
.pl.a, .dot.a { stroke: var(--a); }
.pl.b, .dot.b { stroke: var(--b); }
.pl.c, .dot.c { stroke: var(--c); }
.pl.d, .dot.d { stroke: var(--d); }
.pl.e, .dot.e { stroke: var(--e); }
.dot { stroke-width: 2; fill: var(--bg); }

.legend { display: grid; gap: 6px; margin-top: 12px; }
.lg {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto;
  gap: 9px; align-items: baseline; font-size: 13px;
}
.lg .sw { width: 12px; height: 3px; border-radius: 2px; align-self: center; }
.lg.a .sw { background: var(--a); }
.lg.b .sw { background: var(--b); }
.lg.c .sw { background: var(--c); }
.lg.d .sw { background: var(--d); }
.lg.e .sw { background: var(--e); }
.lg .cost { font-variant-numeric: tabular-nums; font-weight: 650; }
.lg .gap { color: var(--faint); font-size: 12px; white-space: nowrap; }

/* ----------------------------------------------------------------- table */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.rt { border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap; }
table.rt th, table.rt td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: right; }
table.rt thead th { color: var(--faint); font-weight: 600; font-size: 12px; }
table.rt th.ln { text-align: left; font-weight: 600; white-space: normal; min-width: 130px; }
table.rt td { font-variant-numeric: tabular-nums; color: var(--dim); }
table.rt td.tot { color: var(--ink); font-weight: 650; }
table.rt tr.best th.ln, table.rt tr.best td.tot { color: var(--ok); }

.xs { margin: 0; padding-left: 18px; color: var(--dim); font-size: 13.5px; }
.xs li { margin: 6px 0; }
.xs b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- lists */

.bad { border-color: var(--bad); }
.note { border-color: var(--amber); }
.badlist { margin: 0; padding-left: 18px; color: var(--dim); font-size: 13px; }
.badlist li { margin: 6px 0; }
.badlist b { color: var(--ink); }

.foot {
  max-width: 800px; margin: 22px auto 0; padding-top: 14px;
  border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px;
}