:root {
  color-scheme: dark;
  --bg: #071119;
  --panel: #0d1923;
  --panel-2: #12222e;
  --line: #223746;
  --line-soft: rgba(122, 157, 178, .16);
  --text: #eef5f6;
  --muted: #91a7b5;
  --green: #35d17e;
  --green-dark: #123e2a;
  --amber: #ffb629;
  --red: #ff6978;
  --blue: #68b7ff;
  --lcd: #dbe8ad;
  --lcd-text: #182312;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; }
html, body { min-height: 100%; }
body { margin: 0; overflow-x: hidden; background: radial-gradient(circle at 80% -10%, #153246 0, transparent 35%), var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 230px minmax(0, 1fr); padding-bottom: 86px; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 230px; border-right: 1px solid var(--line-soft); background: rgba(7,17,25,.86); backdrop-filter: blur(22px); padding: 24px 18px; display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 34px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; letter-spacing: .02em; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.brand-mark { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; color: #08110b; background: var(--lcd); box-shadow: inset 0 0 0 2px #88976a, 0 10px 28px rgba(0,0,0,.28); font-weight: 900; letter-spacing: -.08em; font-size: 24px; }
.brand-mark.small { width: 42px; height: 42px; border-radius: 12px; font-size: 16px; }
nav { display: grid; gap: 6px; }
.sidebar nav a { color: var(--muted); text-decoration: none; padding: 11px 13px; border-radius: 10px; font-weight: 650; font-size: 14px; }
.sidebar nav a:hover, .sidebar nav a.active { background: var(--panel-2); color: var(--text); }
.sidebar nav a.active { box-shadow: inset 3px 0 var(--green); }
.sidebar-foot { margin-top: auto; color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.status-dot, .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px currentColor; flex: 0 0 auto; }
.status-dot.ok, .live-dot.ok { background: var(--green); }
.workspace { grid-column: 2; width: 100%; min-width: 0; }
.topbar { min-height: 94px; padding: 22px clamp(20px, 3vw, 44px); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: rgba(7,17,25,.78); backdrop-filter: blur(18px); z-index: 8; }
.topbar-title { min-width: 0; }
.mobile-menu-button, .mobile-audio-button, .mobile-listen-panel, .mobile-drawer, .drawer-backdrop { display: none; }
h1, h2, h3, p { margin-top: 0; }
.topbar h1 { margin: 2px 0 0; font-size: 23px; }
.eyebrow { color: var(--muted); letter-spacing: .16em; font-size: 10px; font-weight: 800; margin-bottom: 5px; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font-size: 11px; font-weight: 800; }
.badge.good { color: var(--green); background: rgba(53,209,126,.08); }
.badge.warning { color: var(--amber); background: rgba(255,182,41,.08); }
.badge.bad { color: var(--red); background: rgba(255,105,120,.08); }
.icon-button, .avatar, .round-button { border: 1px solid var(--line); color: var(--text); background: var(--panel); cursor: pointer; }
.icon-button, .avatar { width: 38px; height: 38px; border-radius: 11px; }
.avatar { border-radius: 50%; font-size: 11px; font-weight: 800; background: #203d50; }
.view { padding: clamp(20px, 3vw, 44px); max-width: 1500px; margin: 0 auto; }
.connection-banner { position: sticky; top: 94px; z-index: 7; min-height: 38px; padding: 10px 18px; text-align: center; color: #1f1602; background: var(--amber); font-size: 12px; font-weight: 800; }
.status-strip { min-height: 52px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(104,183,255,.06); }
.status-strip span { color: var(--muted); font-size: 12px; }
.status-strip.good { border-color: rgba(53,209,126,.35); }
.status-strip.warning { border-color: rgba(255,182,41,.42); }
.status-strip.bad { border-color: rgba(255,105,120,.5); }
.dashboard-grid { align-items: stretch; }
.receiver-card, .health-card { min-height: 560px; }
.health-stats { margin-top: 16px; }
.more-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.more-links a { display: grid; gap: 5px; min-height: 86px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; text-decoration: none; background: rgba(2,10,15,.28); }
.more-links a span { color: var(--muted); font-size: 11px; }
.grid { display: grid; gap: 16px; min-width: 0; }
.grid > *, .card > *, .form-grid > *, .split-toolbar > *, .filters > *, .button-row > * { min-width: 0; max-width: 100%; }
.grid.two { grid-template-columns: minmax(0, 1.4fr) minmax(290px, .6fr); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: linear-gradient(145deg, rgba(18,34,46,.96), rgba(11,23,32,.96)); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 18px 44px rgba(0,0,0,.14); min-width: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card h2 { font-size: 17px; margin-bottom: 4px; }
.card h3 { font-size: 14px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.lcd { position: relative; isolation: isolate; overflow: hidden; color: var(--lcd-text); background: linear-gradient(150deg, #e5efbd, #cedd99); border: 2px solid #849369; border-radius: 16px; padding: 18px 20px; box-shadow: inset 0 2px 8px rgba(36,53,24,.26), inset 0 -12px 30px rgba(68,88,42,.12), inset 8px 0 22px rgba(255,255,255,.18), 0 12px 28px rgba(0,0,0,.2); min-height: 168px; }
.lcd::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .13; background-image: repeating-linear-gradient(0deg, rgba(34,52,25,.18) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(34,52,25,.09) 0 1px, transparent 1px 5px), radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.42), transparent 72%); mix-blend-mode: multiply; }
.lcd::after { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 12px; pointer-events: none; box-shadow: inset 0 0 18px rgba(38,54,27,.18); }
.lcd.recording { background: linear-gradient(150deg, #f2c4ba, #d99d97); border-color: #9a5c58; }
.lcd.stopped { color: #391318; background: linear-gradient(150deg, #efb2b2, #c9797f); border-color: #9f454d; box-shadow: inset 0 0 24px rgba(91,15,23,.2), 0 12px 28px rgba(0,0,0,.2); }
.lcd.stopped .lcd-chip { border-color: rgba(77,17,23,.28); }
.lcd.fault { background: linear-gradient(150deg, #f49ca3, #b84e5b); animation: fault-pulse 1.8s ease-in-out infinite; }
@keyframes fault-pulse { 50% { box-shadow: inset 0 0 28px rgba(91,15,23,.3), 0 0 22px rgba(255,105,120,.22); } }
.lcd-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.lcd-chip { border: 1px solid rgba(43,59,31,.22); border-radius: 999px; padding: 5px 10px; font: 800 11px ui-monospace, Consolas, monospace; text-transform: uppercase; }
.lcd-channel { margin: 18px 0 14px; font: 900 clamp(23px, 4vw, 38px) ui-monospace, Consolas, monospace; letter-spacing: -.05em; text-transform: uppercase; line-height: .95; overflow-wrap: anywhere; }
.lcd-foot { display: flex; justify-content: space-between; gap: 16px; font: 800 10px ui-monospace, Consolas, monospace; text-transform: uppercase; }
.button { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 10px; padding: 9px 13px; cursor: pointer; font-weight: 750; font-size: 13px; }
.button:hover { border-color: #3b5c70; transform: translateY(-1px); }
.button.primary { background: linear-gradient(180deg, #218b58, #176a44); border-color: #2aa76a; }
.button.danger { background: #4b2029; border-color: #7c3543; color: #ffdce1; }
.button.subtle { background: transparent; }
.button.wide { width: 100%; }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.health-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.health { border: 1px solid var(--line-soft); background: rgba(2,10,15,.28); border-radius: 12px; padding: 13px; min-width: 0; overflow: hidden; }
.health-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.health strong { text-transform: capitalize; font-size: 13px; }
.health p { color: var(--muted); font-size: 11px; margin: 7px 0 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; }
.meter { height: 10px; border-radius: 999px; overflow: hidden; background: #071017; border: 1px solid var(--line); }
.meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--amber), var(--red)); transition: width .14s linear; }
.audio-monitor { margin-top: 16px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 13px; background: rgba(2,10,15,.32); transition: border-color .15s, box-shadow .15s; }
.audio-monitor.signal-active { border-color: rgba(53,209,126,.55); box-shadow: inset 0 0 22px rgba(53,209,126,.05); }
.audio-monitor-head, .signal-summary { display: flex; align-items: center; gap: 10px; }
.audio-monitor-head { justify-content: space-between; margin-bottom: 10px; }
.signal-summary span:last-child, .signal-summary strong, .signal-summary small { display: block; }
.signal-summary strong { font-size: 13px; }
.signal-summary small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.signal-light { width: 12px; height: 12px; border-radius: 50%; background: #3e505b; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); flex: 0 0 auto; }
.signal-light.active { background: var(--green); box-shadow: 0 0 14px rgba(53,209,126,.8); }
.signal-value { color: var(--muted); font: 700 11px ui-monospace, Consolas, monospace; }
.meter-large { position: relative; height: 15px; overflow: visible; }
.meter-large .meter-fill { border-radius: 999px; }
.trigger-marker { position: absolute; top: -4px; bottom: -4px; left: 65%; width: 2px; background: #fff; opacity: .85; box-shadow: 0 0 5px rgba(255,255,255,.5); }
.meter-scale { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; margin-top: 6px; }
.control-block { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.control-copy strong, .control-copy span { display: block; }
.control-copy strong { font-size: 13px; }
.control-copy span { color: var(--muted); font-size: 10px; margin-top: 3px; max-width: 420px; }
.native-window-controls { margin-top: 13px; color: var(--muted); font-size: 11px; }
.native-window-controls summary { cursor: pointer; font-weight: 700; }
.native-window-controls p { margin: 9px 0; }
.stat { padding: 15px; border: 1px solid var(--line-soft); border-radius: 12px; }
.stat strong { display: block; font-size: 23px; margin-top: 4px; }
.table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow: auto; border: 1px solid var(--line-soft); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { color: var(--muted); text-align: left; letter-spacing: .08em; text-transform: uppercase; font-size: 9px; position: sticky; top: 0; background: #101f29; }
th, td { padding: 10px 11px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:hover { background: rgba(104,183,255,.035); }
td input { min-width: 90px; }
.call-title { font-weight: 800; color: var(--text); }
.call-sub { color: var(--muted); margin-top: 3px; }
.call-play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #31556b; color: var(--text); background: #163044; cursor: pointer; }
input, select, textarea { width: 100%; color: var(--text); background: #08141c; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(104,183,255,.09); }
input[type=checkbox] { width: 17px; height: 17px; }
input[type=range] { padding: 0; accent-color: var(--green); border: 0; }
textarea { min-height: 420px; resize: vertical; font: 12px/1.55 ui-monospace, Consolas, monospace; tab-size: 2; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-grid .wide { grid-column: 1/-1; }
.issues { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.issues li { border-left: 3px solid var(--amber); padding: 5px 8px; color: var(--muted); font-size: 11px; }
.issues li.error { border-color: var(--red); color: #ffc7cd; }
.call-list { display: grid; gap: 10px; }
.call-card { display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px; }
.empty { text-align: center; padding: 42px 16px; color: var(--muted); }
.persistent-player { position: fixed; left: 248px; right: 18px; bottom: 14px; z-index: 20; min-height: 62px; border: 1px solid #2b4758; background: rgba(11,25,34,.94); backdrop-filter: blur(22px); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; box-shadow: 0 18px 50px rgba(0,0,0,.42); }
.player-meta, .player-controls { display: flex; align-items: center; gap: 11px; min-width: 0; }
.player-meta span:last-child { min-width: 0; }
.player-meta small, .player-meta strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-meta small { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.player-meta strong { margin-top: 2px; font-size: 13px; max-width: 45vw; }
.round-button { width: 38px; height: 38px; border-radius: 50%; }
#playerVolume { width: 120px; }
#playerSeek { width: min(260px,22vw); }
.auth-gate { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; z-index: 50; background: radial-gradient(circle at 50% 20%, #18394b, var(--bg) 54%); }
.auth-card { width: min(420px,100%); background: rgba(13,25,35,.94); border: 1px solid var(--line); border-radius: 22px; padding: 30px; box-shadow: 0 32px 100px rgba(0,0,0,.45); display: grid; gap: 15px; }
.auth-card .brand-mark { margin-bottom: 5px; }
.auth-card h1 { margin-bottom: 0; }
.auth-card p { margin-bottom: 0; }
.form-error { color: var(--red); font-size: 12px; min-height: 16px; }
.toast { position: fixed; right: 24px; bottom: 94px; z-index: 80; max-width: 360px; border: 1px solid var(--line); background: #162934; padding: 12px 15px; border-radius: 11px; box-shadow: 0 16px 40px rgba(0,0,0,.36); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: #7d3542; color: #ffd2d7; }
.mobile-nav { display: none; }
pre.log { margin: 0; padding: 14px; max-height: 480px; overflow: auto; background: #050d12; border-radius: 10px; color: #aac0ca; font: 11px/1.55 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.split-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 9px; }
.filters input, .filters select { width: auto; min-width: 150px; }
.call-dialog { width: min(680px,calc(100% - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text); box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.call-dialog::backdrop { background: rgba(1,7,11,.72); backdrop-filter: blur(6px); }
.dialog-card { padding: 22px; display: grid; gap: 16px; }
.call-detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.call-detail-grid .stat strong { font-size: 14px; overflow-wrap: anywhere; }
.note-area { min-height: 110px; }
.row-actions { display: flex; gap: 4px; }
.row-actions button { width: 27px; height: 27px; padding: 0; }
.scan-cards { display: grid; gap: 10px; }
.scan-group { margin: 14px 2px 0; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.scan-card { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line-soft); border-radius: 13px; background: rgba(2,10,15,.28); }
.scan-card-head, .toggle-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toggle-line { justify-content: flex-start; }

@media (max-width: 980px) {
  .grid.two, .grid.three { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  html, body { height: 100%; overflow: hidden; }
  body { min-height: 100dvh; }
  .app-shell { display: block; height: 100dvh; min-height: 0; padding: 0; overflow: hidden; }
  .sidebar { display: none; }
  .workspace { width: 100%; height: 100dvh; overflow: hidden; }
  .topbar { position: fixed; inset: 0 0 auto 0; height: calc(56px + env(safe-area-inset-top)); min-height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0; gap: 9px; }
  .mobile-menu-button, .mobile-audio-button { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; }
  .mobile-audio-button { display: none; }
  body.audio-active .mobile-audio-button { display: grid; }
  .topbar-title { flex: 1 1 auto; overflow: hidden; }
  .topbar .eyebrow { display: none; }
  .topbar h1 { font-size: 19px; }
  #networkBadge { display: inline-flex; padding: 4px 7px; font-size: 9px; }
  .top-actions [data-action="refresh"] { display: none; }
  .top-actions { gap: 7px; }
  .top-actions .icon-button, .top-actions .avatar { width: 34px; height: 34px; }
  .connection-banner { position: fixed; top: calc(56px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 12; min-height: 36px; }
  .view { position: fixed; inset: calc(56px + env(safe-area-inset-top)) 0 0 0; width: 100%; max-width: 100%; padding: 12px 12px max(18px,env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .card { padding: 15px; border-radius: 15px; }
  .status-strip { height: 58px; min-height: 58px; padding: 9px 12px; overflow: hidden; }
  .status-strip { align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; }
  .status-strip strong, .status-strip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
  .dashboard-grid { display: block; width: 100%; }
  .receiver-card, .health-card { min-height: 0; }
  .dashboard-grid > .health-card { display: none; }
  .receiver-card { width: 100%; max-width: 100%; }
  .lcd { padding: 13px; height: 184px; min-height: 184px; overflow: hidden; }
  .lcd-chips { height: 29px; overflow: hidden; flex-wrap: nowrap; }
  .lcd-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 8px; }
  .lcd-channel { display: -webkit-box; height: 62px; margin: 17px 0 13px; font-size: clamp(22px,7vw,29px); line-height: 1.04; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .lcd-foot { white-space: nowrap; overflow: hidden; }
  .lcd-foot span { text-overflow: ellipsis; overflow: hidden; }
  #lcdFreq, .lcd-foot, .signal-value { font-variant-numeric: tabular-nums; }
  .audio-monitor { height: 105px; min-height: 105px; overflow: hidden; }
  .control-block { align-items: flex-start; flex-direction: column; margin-top: 13px; padding-top: 13px; }
  .control-block .button-row { width: 100%; }
  .scanner-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .scanner-buttons .button { width: 100%; padding-inline: 6px; }
  .audio-monitor-head { align-items: flex-start; }
  .native-window-controls { display: none; }
  .health-grid { grid-template-columns: 1fr; }
  .persistent-player { display: none; }
  .mobile-listen-panel { display: flex; min-height: 62px; margin-top: 13px; padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 13px; background: rgba(2,10,15,.38); align-items: center; justify-content: space-between; gap: 8px; overflow: hidden; }
  .mobile-listen-panel.is-playing { border-color: rgba(53,209,126,.45); box-shadow: inset 0 0 18px rgba(53,209,126,.04); }
  .mobile-listen-panel .player-meta { flex: 1 1 auto; overflow: hidden; }
  .mobile-listen-panel .player-meta strong { max-width: none; font-size: 11px; }
  .mobile-listen-panel .player-controls { flex: 0 0 auto; gap: 6px; }
  .mobile-listen-panel .button { padding: 8px 9px; font-size: 10px; }
  .player-meta { flex: 1 1 auto; overflow: hidden; }
  .player-meta strong { max-width: 44vw; }
  .player-controls { flex: 0 0 auto; gap: 7px; }
  .player-controls .button { padding: 8px 9px; font-size: 11px; }
  #playerVolume { display: none; }
  #playerSeek { width: 95px; }
  .call-detail-grid { grid-template-columns: 1fr 1fr; }
  .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 38; width: 100%; height: 100%; border: 0; background: rgba(1,7,11,.68); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .mobile-drawer { display: flex; position: fixed; inset: 0 auto 0 0; z-index: 39; width: min(84vw,320px); padding: max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom)); border-right: 1px solid var(--line); background: #09151e; box-shadow: 20px 0 60px rgba(0,0,0,.48); transform: translateX(-105%); transition: transform .22s ease; flex-direction: column; overflow-y: auto; }
  .drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
  .drawer-open .mobile-drawer { transform: translateX(0); }
  .drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .drawer-head .brand { margin: 0 0 22px; }
  .mobile-drawer nav { gap: 5px; }
  .mobile-drawer nav a { padding: 13px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 750; }
  .mobile-drawer nav a.active { color: var(--text); background: var(--panel-2); box-shadow: inset 3px 0 var(--green); }
  .drawer-note { margin: auto 4px 0; padding-top: 22px; color: var(--muted); font-size: 10px; line-height: 1.45; }
  .form-grid { grid-template-columns: 1fr; }
  .filters input, .filters select { width: 100%; }
  .call-card { grid-template-columns: auto auto minmax(0,1fr); align-items: start; }
  .call-card > .button-row { grid-column: 2 / -1; }
  .call-sub { line-height: 1.45; }
  .more-links { grid-template-columns: 1fr; }
  .table-wrap { max-width: 100%; }
  .card, .status-strip, .call-card, .scan-card, .stat, .health, .more-links, .split-toolbar, .filters { width: 100%; max-width: 100%; min-width: 0; }
  .button-row { max-width: 100%; }
  pre.log, textarea, input, select { max-width: 100%; }
  .health-top > *, .call-card > *, .audio-monitor-head > * { min-width: 0; }
  .health strong, .health p, .stat strong, .call-title, .call-sub { overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
  .view { padding: 9px; }
  .card { padding: 12px; }
  .player-meta strong { max-width: 36vw; font-size: 11px; }
  .health-grid { gap: 8px; }
  .health { padding: 10px; }
}