/* Design tokens, reset, layout shell, typography, forms, buttons, messages. */
:root { --bg:#0f1720; --panel:#17212d; --line:#263445; --text:#e6edf3; --muted:#8b9bb0;
        --accent:#3b9eff; --ok:#3fb27f; --warn:#e0a526; --bad:#e5534b;
        --card:#141e2a; --card2:#1a2736; --open:#2fd18b; --closed:#6b7a8d; --amber:#e0a526; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 system-ui,Segoe UI,Arial,sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); }
header { display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
header h1 { font-size:16px; margin:0 8px 0 0; white-space:nowrap; }
nav { display:flex; gap:2px; flex-wrap:wrap; flex:1; min-width:0; }
nav button { background:none; border:0; color:var(--muted); padding:8px 10px; cursor:pointer; border-radius:6px; font:inherit; white-space:nowrap; }
nav button.on, nav button:hover { background:var(--line); color:var(--text); }
main { padding:20px; max-width:1240px; margin:0 auto; }
h2 { font-size:15px; margin:24px 0 8px; }
h3 { margin:0; }
.muted { color:var(--muted); }
.hint { color:var(--muted); font-size:11px; }
.bad-text { color:var(--bad); font-weight:600; }
code, pre { background:#0c121a; border:1px solid var(--line); border-radius:6px; padding:2px 6px; word-break:break-all; }
pre { padding:10px; white-space:pre-wrap; }
details summary { cursor:pointer; font-weight:600; }

/* the hidden attribute must win over any component's display rule */
[hidden] { display:none !important; }

/* forms and buttons */
input, select, button.btn { font:inherit; background:#0c121a; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:7px 9px; }
input:focus, select:focus, button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
input.invalid { border-color:var(--bad); background:#241517; }
button.btn { cursor:pointer; background:var(--line); }
button.btn:hover { border-color:var(--accent); }
button.primary { background:var(--accent); border-color:var(--accent); color:#031018; font-weight:600; }
button.danger { background:transparent; border-color:var(--bad); color:var(--bad); }
button.solid { background:var(--bad); color:#fff; border-color:var(--bad); font-weight:600; }
button.small { padding:3px 8px; font-size:12px; margin-right:4px; }
button.btn:disabled { opacity:.45; cursor:not-allowed; }
form.row { display:flex; gap:8px; flex-wrap:wrap; align-items:end; }
label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.check-row { flex-direction:row; align-items:center; gap:8px; color:var(--text); }
.stack { display:flex; flex-direction:column; gap:12px; }
.stack-tight { display:flex; flex-direction:column; gap:4px; }
.icon-btn { background:none; border:0; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px; }
.icon-btn:hover { color:var(--text); background:var(--line); }

/* messages and tags */
.tag { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; border:1px solid var(--line); }
.tag.ok { color:var(--ok); border-color:var(--ok); } .tag.warn { color:var(--warn); border-color:var(--warn); } .tag.bad { color:var(--bad); border-color:var(--bad); }
.msg { padding:8px 12px; border-radius:6px; margin:10px 0; }
.msg.err { background:#3a1d1d; color:#ffb4ae; } .msg.good { background:#12301f; color:#9be3bd; }
.msg.warn { background:#352c10; color:#f3d37a; } .msg.soft { background:#2a1b1b; font-size:12px; }
.bad-text { color:var(--bad); }

/* login */
.login { max-width:340px; margin:12vh auto; }
.login form { display:flex; flex-direction:column; gap:12px; }