:root{
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#f1f3f7; --border:#e1e5ec; --border-strong:#cdd3dd;
  --ink:#0e1522; --ink-soft:#4a5466; --ink-faint:#8791a3;
  --accent:#2355d8; --accent-hover:#1b46bb; --accent-ink:#ffffff; --accent-soft:#e8eefd; --accent-soft-ink:#1c3f9f;
  --danger:#c3352c; --danger-soft:#fdeceb; --danger-ink:#8f1f18;
  --ok:#14824b; --ok-soft:#e5f5ec; --ok-ink:#0c5c34;
  --warn-soft:#fff3df; --warn-ink:#7a4500;
  --shadow:0 1px 2px rgba(14,21,34,.05), 0 18px 40px -24px rgba(14,21,34,.28);
  --display:"Sora", ui-sans-serif, system-ui, sans-serif;
  --sans:"Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#090e17; --surface:#101826; --surface-2:#162033; --border:#223049; --border-strong:#31415f;
    --ink:#e8edf5; --ink-soft:#a9b3c4; --ink-faint:#6f7b90;
    --accent:#7fa1ff; --accent-hover:#9db8ff; --accent-ink:#0a1433; --accent-soft:#17234a; --accent-soft-ink:#bccdff;
    --danger:#ff8f86; --danger-soft:#351a1a; --danger-ink:#ffb8b2;
    --ok:#5ed39b; --ok-soft:#10281c; --ok-ink:#a2ebc6;
    --warn-soft:#2c2211; --warn-ink:#f6d69d;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 40px -24px rgba(0,0,0,.8);
  }
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 var(--sans); min-height:100vh; display:flex; flex-direction:column}
h1,h2,h3{font-family:var(--display); letter-spacing:-.02em; margin:0; text-wrap:balance}
a{color:var(--accent)}
.a-wrap{width:100%; max-width:1080px; margin:0 auto; padding-inline:20px}
.a-top{background:var(--surface); border-bottom:1px solid var(--border); padding-top:env(safe-area-inset-top,0px)}
.a-bar{height:64px; display:flex; align-items:center; gap:16px}
.a-brand img{display:block; height:34px; width:auto}
.a-brand .t-dark{display:none}
@media (prefers-color-scheme: dark){ .a-brand .t-dark{display:block} .a-brand .t-light{display:none} }
.a-nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
.a-nav a{color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:.86rem; padding:7px 11px; border-radius:9px}
.a-nav a:hover{background:var(--surface-2); color:var(--ink)}
.a-main{flex:1; padding-block:40px 56px}
.a-foot{border-top:1px solid var(--border); background:var(--surface); color:var(--ink-faint); font-size:.8rem; padding-block:18px calc(18px + env(safe-area-inset-bottom,0px))}
.a-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:28px}
.a-narrow{max-width:420px; margin:0 auto}
.a-card h1{font-size:1.45rem}
.a-sub{color:var(--ink-soft); margin:6px 0 22px; font-size:.92rem}
.a-field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.a-field label{font-size:.8rem; font-weight:600; color:var(--ink-soft)}
.a-input{width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--surface-2); border:1.5px solid var(--border); border-radius:11px; padding:11px 13px}
.a-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.a-check{display:flex; gap:8px; align-items:center; font-size:.88rem; color:var(--ink-soft)}
.a-btn{appearance:none; border:0; cursor:pointer; font:600 .92rem var(--sans); border-radius:11px; padding:11px 18px; background:var(--accent); color:var(--accent-ink); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px}
.a-btn:hover{background:var(--accent-hover)}
.a-btn:focus-visible,.a-input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.a-btn.full{width:100%}
.a-btn.ghost{background:var(--surface-2); color:var(--ink); border:1px solid var(--border)}
.a-btn.ghost:hover{background:var(--border)}
.a-btn.danger{background:var(--danger-soft); color:var(--danger-ink)}
.a-btn.sm{padding:6px 10px; font-size:.78rem; border-radius:8px}
.a-alert{border-radius:11px; padding:11px 14px; font-size:.88rem; margin-bottom:16px}
.a-ok{background:var(--ok-soft); color:var(--ok-ink)}
.a-err{background:var(--danger-soft); color:var(--danger-ink)}
.a-info{background:var(--accent-soft); color:var(--accent-soft-ink)}
.a-warn{background:var(--warn-soft); color:var(--warn-ink)}
.a-pass{font:600 1.05rem var(--mono); letter-spacing:.04em; background:var(--surface); border:1px dashed var(--border-strong); border-radius:8px; padding:3px 8px; user-select:all}
.a-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start}
@media (max-width:860px){ .a-grid{grid-template-columns:1fr} }
.a-h2{font-size:1.1rem; margin-bottom:14px}
.a-tblwrap{overflow-x:auto}
.a-tbl{width:100%; border-collapse:collapse; font-size:.86rem}
.a-tbl th{text-align:left; font:600 .68rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:8px 10px; border-bottom:1px solid var(--border)}
.a-tbl td{padding:10px; border-bottom:1px solid var(--border); vertical-align:middle}
.a-tbl td.acts{min-width:190px}
.a-tbl td.acts .acts-in{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.a-tbl form{display:inline}
.a-tag{display:inline-block; font-size:.7rem; font-weight:700; border-radius:999px; padding:2px 8px}
.a-tag.on{background:var(--ok-soft); color:var(--ok-ink)}
.a-tag.off{background:var(--danger-soft); color:var(--danger-ink)}
.a-tag.adm{background:var(--accent-soft); color:var(--accent-soft-ink)}
.a-muted{color:var(--ink-faint); font-size:.8rem}
@media (max-width:640px){
  .a-tbl thead{display:none}
  .a-tbl tr{display:block; border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:10px}
  .a-tbl td{display:block; border:0; padding:3px 0}
  .a-tbl td.acts{white-space:normal; padding-top:8px}
}
.a-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:640px){
  .a-bar{height:auto; min-height:64px; flex-wrap:wrap; row-gap:6px; padding-block:10px}
  .a-nav{margin-left:0; width:100%; gap:2px}
  .a-nav a{padding:6px 9px}
}