:root {
  --bg: #f6f5f2; --surface: #ffffff; --sunken: #efede8; --ink: #1d1f23; --ink-2: #4a4f57; --ink-3: #7a8089;
  --rule: #dedbd3; --accent: #1f5fae; --accent-soft: #e6eef8; --pass: #2f7d4f; --fail: #b4442f; --fail-soft: #fbece8;
  --r: 8px; --f: "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a; --surface: #1d2024; --sunken: #23272c; --ink: #eceae6; --ink-2: #c1c4c9; --ink-3: #8d939b;
    --rule: #33383f; --accent: #7fb0ec; --accent-soft: #1d2b3c; --pass: #6cc293; --fail: #ec8a74; --fail-soft: #3a2420;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--f); }
a { color: var(--accent); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  background: var(--surface); border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); text-decoration: none; }
.mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--accent);
  color: var(--surface); font-weight: 700; }
.who { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 14px; min-width: 0; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { padding-top: 32px; padding-bottom: 48px; }
h1 { font-size: 26px; margin: 0 0 6px; }
h2 { font-size: 18px; margin: 32px 0 12px; }
.muted { color: var(--ink-3); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r); border: 1px solid var(--accent);
  background: var(--accent); color: var(--surface); font: 600 14px var(--f); text-decoration: none; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.danger { border-color: var(--fail); color: var(--fail); background: transparent; }
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 20px; }
.hero { max-width: 560px; margin: 48px auto; text-align: center; }
.hero p { color: var(--ink-2); }
.note { padding: 10px 14px; border-radius: var(--r); background: var(--accent-soft); margin-bottom: 16px; }
.note.err { background: var(--fail-soft); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card { display: grid; gap: 4px; padding: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--ink); text-decoration: none; }
.card:hover { border-color: var(--accent); }
.card b { font-size: 16px; }
.tag { justify-self: start; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--sunken); color: var(--ink-2); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--ink-3); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.tbl { overflow-x: auto; }
form.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
input, select { font: 14px var(--f); padding: 7px 9px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); }
.stack { display: grid; gap: 16px; }
.foot { color: var(--ink-3); font-size: 13px; padding-bottom: 24px; }