:root{--bg: #0a0e14;--bg2: #121926;--card: #151d2b;--line: #2a3648;--ink: #e8eef7;--dim: #8b9bb0;--ok: #2dd4a0;--ok-dim: rgba(45, 212, 160, .15);--warn: #f5b942;--bad: #f0435a;--bad-dim: rgba(240, 67, 90, .18);--accent: #3b9eff;--rubber: #1a1a1a;--metal: #c4ccd8;--fabric: #f7a8c0;--door: #4a6d8c;--font: "DM Sans", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, monospace;--display: "Instrument Serif", Georgia, serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}a{color:inherit}.topbar{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);background:#0a0e14eb;backdrop-filter:blur(10px);position:sticky;top:0;z-index:40}.brand{font-weight:700;font-size:14px;letter-spacing:.02em;display:flex;align-items:center;gap:8px;text-decoration:none}.brand .mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#1a5a9e);display:grid;place-items:center;font-size:14px}.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}.nav a{text-decoration:none;font-size:12px;font-weight:600;padding:7px 11px;border-radius:8px;color:var(--dim);border:1px solid transparent}.nav a:hover{color:var(--ink);background:var(--card)}.nav a.active{color:var(--ink);background:var(--card);border-color:var(--line)}.pill{font-family:var(--mono);font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line)}.pill.ok{color:var(--ok);background:var(--ok-dim);border-color:transparent}.pill.warn{color:var(--warn);background:#f5b94224;border-color:transparent}.pill.bad{color:var(--bad);background:var(--bad-dim);border-color:transparent}.btn{font:inherit;font-weight:600;font-size:13px;padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:transform .12s,background .15s,border-color .15s}.btn:hover{transform:translateY(-1px);border-color:#3d4d66}.btn.primary{background:linear-gradient(135deg,#2a7fd4,#1a5a9e);border-color:transparent}.btn.danger{background:linear-gradient(135deg,#d43a52,#9e1a32);border-color:transparent}.btn.ghost{background:transparent}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.chip{font-size:12px;font-weight:600;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer}.chip:hover{color:var(--ink)}.chip.on{color:var(--ink);background:var(--card);border-color:var(--accent);box-shadow:0 0 0 1px #3b9eff40}.btn,.chip,.nav a{min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.chip{display:inline-flex;align-items:center;justify-content:center;min-height:40px}#audio-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#audio-controls .audio-hint{font-size:11px;color:var(--dim)}.pa-banner{display:none;font-size:12px;line-height:1.4;padding:8px 12px;border-radius:10px;background:#3b9eff1f;border:1px solid rgba(59,158,255,.28);color:var(--ink)}.pa-banner.on{display:block}.pa-banner em{font-style:normal;color:#7ec4ff}@media(max-width:720px){.topbar{flex-wrap:wrap;gap:8px;padding:10px 12px}.brand{font-size:13px}.brand .mark{width:26px;height:26px}.nav{order:3;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px}.nav a{flex:0 0 auto;white-space:nowrap;padding:8px 12px;font-size:12px}#status-pill{margin-left:auto}.btn{padding:12px 16px;font-size:14px}}