:root {
  --bg:#FBFBFA; --card:#FFFFFF; --ink:#37352F; --muted:#787774; --line:#E9E9E7; --tint:#F3F3F1;
  --accent:#6366F1; --accent-hover:#4F46E5; --accent-ink:#4F46E5; --accent-soft:rgba(99,102,241,.1); --accent-line:rgba(99,102,241,.3);
  --good:#15803D; --warn:#B45309;
  --shadow:0 1px 2px rgba(15,15,15,.05), 0 6px 20px rgba(15,15,15,.06);
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#191919; --card:#242424; --ink:#EBEBEA; --muted:#9B9A97; --line:#343434; --tint:#2C2C2C;
  --accent-ink:#A5B4FC; --accent-soft:rgba(129,140,248,.15); --accent-line:rgba(129,140,248,.38);
  --good:#4ADE80; --warn:#FBBF24; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
} }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
main, header.bar { max-width: 760px; margin: 0 auto; padding: 0 22px; }
header.bar { display:flex; align-items:center; gap:12px; padding-top:22px; padding-bottom:22px; }
header.bar nav { margin-left:auto; display:flex; gap:18px; font-size:14.5px; }
h1 { font:800 40px/1.12 var(--sans); letter-spacing:-.03em; margin:0 0 12px; }
h2 { font:700 24px/1.25 var(--sans); letter-spacing:-.02em; margin:36px 0 12px; }
h3 { font:650 17px/1.3 var(--sans); margin:0 0 8px; }
p { margin:0 0 16px; }
a { color:var(--accent-ink); text-underline-offset:2px; }
.logo { display:inline-block; width:34px; height:34px; border-radius:9px; flex:none; box-shadow:0 2px 8px rgba(99,102,241,.4);
  background: linear-gradient(#fff,#fff) 8px 9px/18px 3px no-repeat, linear-gradient(#C7D2FE,#C7D2FE) 8px 15px/18px 3px no-repeat, linear-gradient(#fff,#fff) 8px 21px/10px 3px no-repeat, var(--accent); }
.wordmark { font:800 19px var(--sans); letter-spacing:-.02em; }
.lede { font-size:19px; color:var(--muted); margin-bottom:26px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px; box-shadow:var(--shadow); margin:0 0 16px; }
.btn { display:inline-block; border:1px solid transparent; border-radius:10px; padding:13px 20px; font:600 15px var(--sans); cursor:pointer;
  background:var(--accent); color:#fff; text-decoration:none; box-shadow:0 1px 2px rgba(79,70,229,.35);
  transition: background .2s ease, transform .18s var(--ease), box-shadow .2s ease; }
.btn:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 6px 16px rgba(99,102,241,.35); }
.btn:active { transform:scale(.97); box-shadow:none; }
.btn.ghost { background:var(--card); color:var(--ink); border-color:var(--line); box-shadow:none; }
.btn.ghost:hover { background:var(--tint); }
.btn:disabled { opacity:.55; cursor:default; transform:none; box-shadow:none; }
input, select { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font:15px var(--sans); }
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.22); }
label { display:block; font:600 13px var(--sans); color:var(--muted); margin-bottom:6px; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.row > input { flex:1; min-width:200px; }
.muted { color:var(--muted); font-size:14px; }
.pill { display:inline-block; padding:4px 12px; border-radius:99px; background:var(--accent-soft); color:var(--accent-ink); font:600 13px var(--sans); }
.pill.good { background:rgba(21,128,61,.12); color:var(--good); }
.pill.warn { background:rgba(180,83,9,.12); color:var(--warn); }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.stat { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); }
.stat .n { font:800 30px/1.1 var(--sans); letter-spacing:-.03em; display:block; margin-bottom:2px; }
.stat .k { color:var(--muted); font-size:13.5px; }
code.key { display:inline-block; font:15px ui-monospace,Consolas,monospace; background:var(--tint); border:1px solid var(--line);
  padding:9px 12px; border-radius:8px; user-select:all; word-break:break-all; }
table { width:100%; border-collapse:collapse; font-size:14.5px; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; font-size:13px; }
.bars { display:flex; align-items:flex-end; gap:8px; height:110px; margin-top:8px; }
.bars div { flex:1; background:var(--accent); border-radius:6px 6px 0 0; min-height:3px; position:relative; transition:height .5s var(--ease); }
.bars span { position:absolute; left:0; right:0; bottom:-22px; text-align:center; font-size:11px; color:var(--muted); }
footer { max-width:760px; margin:60px auto 40px; padding:22px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
footer a { margin-right:16px; }
.skel { height:13px; border-radius:6px; margin:10px 0; background:linear-gradient(90deg,var(--tint) 0%,var(--line) 50%,var(--tint) 100%); background-size:200% 100%; }
.msg { margin-top:14px; font-size:14.5px; }
.msg.err { color:var(--warn); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: shimmer 1.4s ease-in-out infinite; }
  @keyframes shimmer { from { background-position:100% 0; } to { background-position:-100% 0; } }
  .card, .stat { animation: rise .4s var(--ease) both; }
  @keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
}
@media (max-width: 560px) { h1 { font-size:32px; } }