:root {
  --accent: #6576ff;
  --accent-dim: #ebeefe;
  --base: #364a63;
  --soft: #8094ae;
  --line: #e5e9f2;
  --bg: #f5f6fa;
  --card: #fff;
  --ok: #1ee0ac;
  --warn: #f4bd0e;
  --danger: #e85347;
  --radius: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --base: #b6c6e3; --soft: #8094ae; --line: #2b3748; --bg: #101924; --card: #18212d; --accent-dim: #1f2b4d; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.6 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--base); background: var(--bg); }
.top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 1.5rem; padding: 0 1.25rem; height: 60px; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; white-space: nowrap; }
.mark { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: .375rem; border-radius: 50%; background: var(--accent-dim); color: var(--accent); font-size: 12px; }
.tabs { display: flex; gap: .25rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tabs button { padding: 1.1rem .75rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--soft); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.narrow { max-width: 440px; margin: 10vh auto 0; }
h1 { margin: 0 0 .5rem; font-size: 1.375rem; }
h2 { margin: 0; font-size: 1.125rem; }
.soft { color: var(--soft); }
.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
form { display: flex; gap: .5rem; flex-wrap: wrap; }
input, select { flex: 1 1 12rem; min-height: 38px; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: inherit; font: inherit; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button.primary, button.outline, button.danger { min-height: 38px; padding: .4rem 1rem; border-radius: var(--radius); font: inherit; font-weight: 500; cursor: pointer; }
button.primary { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
button.outline { border: 1px solid var(--line); background: var(--card); color: var(--base); }
button.danger { border: 1px solid var(--danger); background: none; color: var(--danger); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.link { margin-left: auto; border: 0; background: none; color: var(--soft); cursor: pointer; font: inherit; }
.list { margin: 0; padding: 0; list-style: none; }
.list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.grow { flex: 1 1 14rem; min-width: 0; }
.grow strong { display: block; overflow-wrap: anywhere; }
.pill { padding: 0 .5rem; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.25rem; background: var(--accent-dim); color: var(--accent); white-space: nowrap; }
.pill.ok { background: rgba(30, 224, 172, .15); color: #0c9b74; }
.pill.warn { background: rgba(244, 189, 14, .15); color: #a07a00; }
.pill.bad { background: rgba(232, 83, 71, .12); color: var(--danger); }
.targets { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .375rem; }
.empty { padding: 2.5rem 1rem; text-align: center; color: var(--soft); }
.error { color: var(--danger); }
.panel { margin-top: .75rem; padding: 1rem; border-radius: var(--radius); background: var(--bg); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .25rem 1rem; margin: .5rem 0 1rem; }
.toast { position: fixed; right: 1rem; bottom: 1rem; max-width: 22rem; padding: .75rem 1rem; border-radius: var(--radius); background: var(--base); color: var(--card); box-shadow: 0 6px 20px -8px rgba(0,0,0,.3); }
code { font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .top { gap: .75rem; padding: 0 1rem; }
  .brand span:not(.mark) { display: none; }
  main { padding: 1rem 1rem 4rem; }
  .list li { padding: .875rem 1rem; }
}
input[type=checkbox] { flex: none; width: auto; min-height: 0; margin: 0 .375rem 0 0; vertical-align: middle; }
.checks label { display: flex; align-items: center; }
.section { margin-top: 2rem; }
.panel.flat { margin: 0; border-radius: 0; border-top: 1px solid var(--line); background: none; }
.stack { padding: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 1rem 1.25rem; }
.row + .row { border-top: 1px solid var(--line); }
.row .grow span, .list .grow span { display: block; }
select.compact { flex: 0 1 auto; min-height: 32px; padding: .2rem .5rem; font-size: 13px; }
input, select { min-width: 0; max-width: 100%; }
.tabs { min-width: 0; }