:root{--bg: #070b14;--bg-2: #0c1322;--panel: #101a2e;--line: #1d2a44;--text: #e8edf5;--muted: #9aa8bd;--accent: #4f8ad8;--accent-deep: #3b6eb6;--radius: 10px;--radius-key: 6px;--font-head: "Barlow Condensed", "Arial Narrow", sans-serif;--font-body: "Inter", -apple-system, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", monospace;--tally-red: #ff3b30;--tally-red-dim: #4a1f1c;--listen-cyan: #35c9d1;--ring-amber: #ffb020}*{box-sizing:border-box}html,body{overflow-x:hidden;max-width:100%}body{margin:0;background:radial-gradient(1100px 500px at 50% -120px,#0e1730 0%,var(--bg) 65%) fixed,var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh}.wordmark{font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1;letter-spacing:.08em;color:var(--text);padding-right:12px;border-right:1px solid var(--line)}#app{display:flex;flex-direction:column;min-height:100vh;min-width:0}.chassis-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:max(14px,env(safe-area-inset-top)) 16px 14px;background:linear-gradient(180deg,#101a2e 0%,var(--bg-2) 100%);border-bottom:1px solid var(--line);box-shadow:inset 0 1px #ffffff0a,0 1px #04070d;min-width:0}.header-status-row,.header-operator-row{display:flex;align-items:center;gap:10px;min-width:0}@media (max-width: 480px){.chassis-header{flex-direction:column;align-items:stretch}.header-spacer{display:none}.header-status-row{margin-bottom:8px}.header-operator-row{flex-wrap:wrap}}.admin-nav-link{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--accent);border:1px solid var(--accent);border-radius:3px;padding:4px 8px;text-decoration:none;white-space:nowrap}.status-led{width:10px;height:10px;border-radius:50%;background:var(--muted);box-shadow:0 0 #0000;transition:background .2s,box-shadow .2s}.status-led[data-state=connecting]{background:var(--muted);animation:pulse 1.2s ease-in-out infinite}.status-led[data-state=connected]{background:var(--listen-cyan);box-shadow:0 0 8px var(--listen-cyan)}.status-led[data-state=disconnected]{background:var(--tally-red);box-shadow:0 0 8px var(--tally-red)}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.status-text{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--muted)}.header-spacer{flex:1}.connect-button{background:linear-gradient(180deg,var(--accent) 0%,var(--accent-deep) 100%);color:#f4f8ff;border:1px solid var(--accent);border-radius:4px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;padding:7px 14px;cursor:pointer;box-shadow:0 2px #26426e,inset 0 1px #ffffff2e}.connect-button:not(:disabled):active{transform:translateY(1px);box-shadow:0 1px #26426e,inset 0 1px #ffffff1f}.connect-button:disabled{opacity:.6;cursor:default}.panel-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;padding:20px 20px max(20px,env(safe-area-inset-bottom));align-content:start}@media (max-width: 600px){.panel-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:12px 12px max(12px,env(safe-area-inset-bottom))}.key-label{font-size:19px}}.panel-empty{grid-column:1 / -1;color:var(--muted);font-family:var(--font-body);font-size:14px;padding:40px 0;text-align:center}.key{position:relative;min-height:108px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,#15213b,#0e1830);border:1px solid #223456;border-radius:var(--radius-key);padding:12px 14px 10px;cursor:pointer;overflow:hidden;transition:background .12s,border-color .12s,transform .06s,box-shadow .06s;box-shadow:0 3px 0 -1px #050a14,0 6px 14px #00000073,inset 0 1px #ffffff0d;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}.key:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:transparent;transition:background .12s,box-shadow .12s}.key:not([data-listen-passive="1"]):hover{border-color:#33507f;background:linear-gradient(180deg,#192743,#111c36)}.key:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.key[data-talk-active="1"]{background:linear-gradient(180deg,#55201b 0%,var(--tally-red-dim) 100%);border-color:var(--tally-red);transform:translateY(2px);box-shadow:0 1px 0 -1px #050a14,0 2px 6px #00000080,inset 0 1px #ffffff0a}.key[data-talk-active="1"]:before{background:var(--tally-red);box-shadow:0 0 12px var(--tally-red)}.key[data-listen-passive="1"]{cursor:default;border-color:#1e4a55}.key[data-listen-passive="1"]:before{background:var(--listen-cyan);opacity:.6}.key-activity-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .15s,box-shadow .15s;flex-shrink:0}.key[data-listen-active="1"] .key-activity-dot{background:var(--listen-cyan);box-shadow:0 0 6px var(--listen-cyan);animation:dot-pulse .9s ease-in-out infinite}@keyframes dot-pulse{0%,to{opacity:.6}50%{opacity:1}}.key-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px}.key-mode-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;line-height:1;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:3px 5px}.key[data-talk-active="1"] .key-mode-tag{color:var(--text);border-color:#ffffff40}.key-label{font-family:var(--font-head);font-weight:600;font-size:22px;line-height:1.1;letter-spacing:.01em;color:var(--text)}.key-channel{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.key[data-talk-active="1"] .key-channel{color:#f4c9c6}.key-volume-row{display:flex;align-items:center;gap:6px;margin-top:6px;margin-right:4px;cursor:default;min-width:0}.key-mute-button{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--muted);font-size:10px;line-height:1;padding:0;cursor:pointer}.key-mute-button[data-muted="1"]{color:var(--muted);border-color:var(--muted);opacity:.6}.key-mute-button[data-muted="0"]{color:var(--listen-cyan);border-color:var(--listen-cyan)}.key-volume-slider{flex:1;min-width:0;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--line);border-radius:2px;cursor:pointer}.key-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--listen-cyan);cursor:pointer}.key-volume-slider::-moz-range-thumb{width:10px;height:10px;border:none;border-radius:50%;background:var(--listen-cyan);cursor:pointer}.key[data-ringing="1"]{border-color:var(--ring-amber);animation:ring .8s ease-in-out infinite}.key[data-ringing="1"]:before{background:var(--ring-amber);box-shadow:0 0 10px var(--ring-amber)}@keyframes ring{0%,to{background:var(--panel)}50%{background:#4a3a1c}}.page-shift-row{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;background:var(--bg-2);border-bottom:1px solid var(--line)}.page-shift-button{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:3px;font-family:var(--font-mono);font-size:14px;width:28px;height:28px;cursor:pointer}.page-shift-button:disabled{opacity:.3;cursor:default}.page-shift-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--muted);min-width:80px;text-align:center}.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}.login-card{width:100%;max-width:340px;display:flex;flex-direction:column;background:linear-gradient(180deg,#131f37 0%,var(--panel) 100%);border:1px solid #223456;border-radius:var(--radius);padding:36px 30px 30px;box-shadow:0 4px 0 -1px #050a14,0 20px 50px #00000080,inset 0 1px #ffffff0d}.login-card{position:relative;overflow:hidden}.login-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);opacity:.85}.login-title{font-family:var(--font-head);font-weight:700;font-size:38px;text-transform:uppercase;color:var(--text);margin:0;letter-spacing:.08em}.login-subtitle{font-family:var(--font-body);font-size:13px;color:var(--muted);margin:4px 0 24px}.login-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}.login-input{background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:3px;font-family:var(--font-body);font-size:14px;padding:9px 10px;margin-bottom:16px}.login-input:focus{outline:2px solid var(--accent);outline-offset:1px}.login-button{background:linear-gradient(180deg,var(--accent) 0%,var(--accent-deep) 100%);color:#f4f8ff;border:1px solid var(--accent);border-radius:4px;font-family:var(--font-body);font-weight:600;font-size:14px;padding:11px;cursor:pointer;margin-top:8px;box-shadow:0 2px #26426e,inset 0 1px #ffffff2e}.login-button:active{transform:translateY(1px);box-shadow:0 1px #26426e,inset 0 1px #ffffff1f}.login-error{color:var(--tally-red);font-size:13px;margin:12px 0 0;min-height:1em}.admin-page{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-body)}.admin-header{display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding:16px 24px;background:var(--bg-2);border-bottom:1px solid var(--line)}.admin-header h1{font-family:var(--font-head);font-size:22px;margin:0}.admin-nav{display:flex;flex-wrap:wrap;gap:8px}.admin-header-user{display:flex;align-items:center;gap:10px}@media (max-width: 700px){.admin-header{padding:12px 16px;gap:10px}.header-spacer{display:none}.admin-nav{flex-basis:100%;order:2}.admin-header-user{flex-basis:100%;order:3;flex-wrap:wrap}}.admin-nav a{color:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-decoration:none;padding:6px 10px;border-radius:3px}.admin-nav a.active,.admin-nav a:hover{color:var(--text);background:var(--panel)}.admin-content{max-width:960px;margin:0 auto;padding:24px}.admin-table{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.admin-table th,.admin-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px}.admin-table tbody tr:last-child td{border-bottom:none}.admin-table tbody tr:hover td{background:#4f8ad80f}.admin-table th{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;background:var(--bg-2)}@media (max-width: 700px){.admin-table{display:block;overflow-x:auto;white-space:nowrap}}.admin-table button{background:transparent;color:var(--accent);border:1px solid var(--line);border-radius:3px;font-size:12px;padding:3px 8px;cursor:pointer;margin-right:4px}.admin-table button:hover{border-color:var(--accent);background:#4f8ad814}.admin-table button.danger{color:var(--tally-red)}.admin-table button.danger:hover{border-color:var(--tally-red);background:#ff3b3014}.admin-table a{color:var(--accent);font-size:12px;margin-right:6px}.chip{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}.chip-user_admin{color:var(--accent);border-color:#2b4a75}.chip-full_admin{color:var(--ring-amber);border-color:#5c451c}.admin-form{display:flex;flex-wrap:wrap;gap:10px;align-items:end;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:24px}.admin-form label{display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}.admin-form input,.admin-form select{background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:3px;font-family:var(--font-body);font-size:13px;padding:6px 8px;min-width:120px}.admin-form input[type=checkbox]{min-width:auto;width:16px;height:16px;padding:0}.checkbox-label{flex-direction:row!important;align-items:center;gap:6px!important}.admin-form button[type=submit]{background:var(--accent-deep);color:var(--text);border:1px solid var(--accent);border-radius:3px;font-size:13px;padding:7px 14px;cursor:pointer;height:33px}.admin-preset-section{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}.admin-preset-section h3{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-size:18px}.admin-error{color:var(--tally-red);font-size:13px;margin:0 0 16px}.admin-empty{color:var(--muted);font-size:13px;padding:24px 0;text-align:center}.admin-content h3{font-family:var(--font-head);font-weight:600;font-size:19px;letter-spacing:.02em;margin:28px 0 10px}@media (prefers-reduced-motion: reduce){.status-led[data-state=connecting],.key[data-listen-active="1"] .key-activity-dot,.key[data-ringing="1"]{animation:none}.key,.key[data-talk-active="1"],.connect-button:not(:disabled):active,.login-button:active{transform:none;transition:none}}