/* Phone Audio Stream theme: the app's tokens plus pa- components. Source: phone-audio-stream/static/index.html, gui.html and splash.html (2026-11-02). */
/* pa-* = phone player page (index.html). pa-gui-* = desktop window (gui.html), inside .pa-gui. pa-splash-* = launch splash. One green palette across all three. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
:root {
  --font-ui: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
  /* one palette for phone, desktop window and splash */
  --bg: #0a0a0a; --bg2: #0d0d0d; --surface: #111; --surface2: #191919; --surface3: #222;
  --border: #252525; --border2: #333; --border3: #3a3a3a;
  --text: #ececec; --muted: #888; --muted2: #555;
  --green: #4caf7d; --green2: #6fcf9a; --gold: #e6c050; --red: #e05555;
  /* roles: LAN and good are green, tunnel and warn are gold, error and bad are red */
  --lan: var(--green); --tunnel: var(--gold); --good: var(--green); --warn: var(--gold); --bad: var(--red); --accent2: var(--green2);
  --rec-rgb: 224, 85, 85;
  --danger-ink: #ffb0ba; --danger-fill: #3a1820; --danger-line: #5a2730; --danger-line2: #7a3540;
  /* resting page glow, overridden by .pa-conn-lan / .pa-conn-tunnel / .pa-state-error */
  --glow: rgba(120, 120, 130, .12); --glow-strong: rgba(120, 120, 130, .18); --glow-rgb: 120, 120, 130; --accent: #888;
  --frame-inset-top: calc(6px + env(safe-area-inset-top)); --frame-inset-right: calc(6px + env(safe-area-inset-right));
  --frame-inset-bottom: calc(6px + env(safe-area-inset-bottom)); --frame-inset-left: calc(6px + env(safe-area-inset-left));
  /* desktop window */
  --gui-muted2: #7a7a7a; --gui-titlebar: linear-gradient(180deg, #161616 0%, #0d0d0d 100%); --gui-tb-hover: #1c1c1c;
  /* radii */
  --r-xs: 3px; --r-sm: 4px; --r-gui: 6px; --r-item: 8px; --r-row: 10px; --r-pop: 14px; --r-pill: 999px;
  /* shadows */
  --pop-shadow: 0 8px 24px rgba(0, 0, 0, .45); --toast-shadow: 0 8px 30px rgba(0, 0, 0, .55); --qr-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  /* easing */
  --ease-spring: cubic-bezier(.3, 1.6, .5, 1); --ease-fill: cubic-bezier(.15, .85, .25, 1);
}
/* connection and state hues; put them on <body> (the phone page does) or any wrapper */
.pa-conn-lan { --conn-accent: #4caf7d; --conn-rgb: 76, 175, 125; --accent: #4caf7d; --glow-rgb: 76, 175, 125; --glow: rgba(76, 175, 125, .12); --glow-strong: rgba(76, 175, 125, .22); }
.pa-conn-tunnel { --conn-accent: #e6c050; --conn-rgb: 230, 192, 80; --accent: #e6c050; --glow-rgb: 230, 192, 80; --glow: rgba(230, 192, 80, .12); --glow-strong: rgba(230, 192, 80, .22); }
.pa-state-error { --glow: rgba(224, 85, 85, .18); --glow-strong: rgba(224, 85, 85, .32); --glow-rgb: 224, 85, 85; --accent: #e05555; }
/* desktop window scope: lighter --muted2 and green resting accent */
.pa-gui { --muted2: var(--gui-muted2); --accent: var(--green); color: var(--text); font: 13px/1.4 var(--font-ui); -webkit-font-smoothing: antialiased; }
.pa-gui button, .pa-gui input { font: inherit; color: inherit; }

/* base */
html { color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 var(--font-ui); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }

/* page frame: inset glow plus corner brackets in the accent hue */
.pa-frame::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 900; border-radius: 2px;
  box-shadow: inset 0 0 28px 0 var(--glow), inset 0 0 0 1px rgba(var(--glow-rgb), .10); transition: box-shadow .55s ease; }
.pa-frame::after { content: ""; position: fixed; top: var(--frame-inset-top); right: var(--frame-inset-right); bottom: var(--frame-inset-bottom); left: var(--frame-inset-left);
  pointer-events: none; z-index: 901; opacity: .35; transition: opacity .4s, background .4s;
  background: linear-gradient(var(--accent), var(--accent)) top left / 14px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) top left / 1px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 14px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) top right / 1px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 14px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 14px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom right / 1px 14px no-repeat; }
.pa-frame.pa-state-live::after { opacity: .65; }
.pa-frame.pa-state-error::after { opacity: .7; }
.pa-frame.pa-conn-lan::after, .pa-frame.pa-conn-tunnel::after { opacity: .55;
  background: linear-gradient(var(--conn-accent), var(--conn-accent)) top left / 14px 1px no-repeat, linear-gradient(var(--conn-accent), var(--conn-accent)) top left / 1px 14px no-repeat,
    linear-gradient(var(--conn-accent), var(--conn-accent)) top right / 14px 1px no-repeat, linear-gradient(var(--conn-accent), var(--conn-accent)) top right / 1px 14px no-repeat,
    linear-gradient(var(--conn-accent), var(--conn-accent)) bottom left / 14px 1px no-repeat, linear-gradient(var(--conn-accent), var(--conn-accent)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--conn-accent), var(--conn-accent)) bottom right / 14px 1px no-repeat, linear-gradient(var(--conn-accent), var(--conn-accent)) bottom right / 1px 14px no-repeat; }
.pa-fade-in { animation: pa-page-fade-in .35s ease-out backwards; }
@keyframes pa-page-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* type */
.pa-mono { font-family: var(--font-mono); }

/* live tile: the round power button (listen) */
.pa-tile { position: relative; width: 240px; height: 240px; border-radius: 50%; background: transparent; border: 2px solid var(--muted2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer; overflow: hidden; color: var(--muted); padding: 24px;
  transition: border-color .2s, transform .08s, color .2s, box-shadow .3s; box-shadow: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.pa-tile.pressed { transform: scale(.93) translateY(3px); transition: transform .07s ease-out, box-shadow .07s; }
.pa-tile.release { animation: pa-tile-spring .42s var(--ease-spring); }
@keyframes pa-tile-spring { 0% { transform: scale(.93) translateY(3px) } 55% { transform: scale(1.035) } 100% { transform: scale(1) } }
.pa-tile.playing { color: var(--conn-accent, #888); border-color: var(--conn-accent, #888);
  box-shadow: 0 0 22px rgba(var(--conn-rgb, 120, 120, 130), .75), 0 0 60px rgba(var(--conn-rgb, 120, 120, 130), .4), inset 0 0 18px rgba(var(--conn-rgb, 120, 120, 130), .35); }
.pa-tile.error { color: var(--red); border-color: var(--red); }
.pa-power { width: 96px; height: 96px; display: block; position: relative; z-index: 1; }
.pa-tile-fill { position: absolute; inset: 0; border-radius: inherit; transform: scale(0); transform-origin: center; opacity: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(var(--conn-rgb, 120, 120, 130), 0.28), rgba(var(--conn-rgb, 120, 120, 130), 0.04)); }
.pa-tile-fill.run { opacity: 1; transform: scale(.9); transition: transform 2.6s var(--ease-fill), opacity .12s ease-out; }
.pa-tile-fill.done { opacity: 0; transform: scale(1); transition: transform .2s ease-out, opacity .4s ease-out .12s; }
.pa-tile-meta { position: relative; z-index: 1; max-width: 200px; }
.pa-tile-status { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-tile-status:empty { display: none; }
.pa-tile-latency { font-size: 10px; font-weight: 600; letter-spacing: .1em; color: var(--muted); text-align: center; margin-top: 3px; font-variant-numeric: tabular-nums; }
.pa-tile-latency:empty { display: none; }
.pa-tile.playing .pa-tile-status { color: var(--conn-accent, var(--green)); }
.pa-tile.error .pa-tile-status { color: var(--red); }
.pa-tile.locked .pa-tile-status::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: middle; border-radius: 50%; background: currentColor; }
.pa-eq { display: flex; align-items: flex-end; gap: 4px; height: 26px; flex-shrink: 0; position: relative; z-index: 1; }
.pa-eq span { display: block; width: 5px; height: 4px; background: var(--muted); border-radius: 2px; transition: height .07s linear, background .2s; }
.pa-tile.playing .pa-eq span { background: var(--conn-accent, #888); }
.pa-tile.playing .pa-power { filter: drop-shadow(0 0 6px rgba(var(--conn-rgb, 120, 120, 130), .55)); }
.pa-tile.playing .pa-eq { filter: drop-shadow(0 0 5px rgba(var(--conn-rgb, 120, 120, 130), .5)); }
.pa-tile.playing .pa-tile-status, .pa-tile.playing .pa-tile-latency { text-shadow: 0 0 6px rgba(var(--conn-rgb, 120, 120, 130), .25); }
.pa-tap-spark { position: fixed; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; pointer-events: none; z-index: 5;
  background: rgb(var(--conn-rgb, 170, 170, 180)); box-shadow: 0 0 6px rgba(var(--conn-rgb, 170, 170, 180), .8); }

/* gear and settings popover */
.pa-gear { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border2); background: var(--surface2); color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; }
.pa-gear.fixed { position: fixed; top: calc(env(safe-area-inset-top) + 12px); right: 16px; z-index: 50; }
.pa-gear svg { width: 18px; height: 18px; }
.pa-gear.open { color: var(--text); }
.pa-pop { min-width: 220px; padding: 12px; border-radius: var(--r-pop); background: var(--surface2); border: 1px solid var(--border2); box-shadow: var(--pop-shadow); }
.pa-pop.fixed { position: fixed; top: calc(env(safe-area-inset-top) + 58px); right: 16px; z-index: 50; }
.pa-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.pa-set-row select, .pa-select { font: inherit; font-size: 13px; color: var(--text); background: var(--surface3); border: 1px solid var(--border2); border-radius: var(--r-item); padding: 6px 8px; color-scheme: dark; user-select: auto; }

/* server unreachable overlay */
.pa-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(10, 11, 14, .96); padding: 24px; }
.pa-overlay[hidden] { display: none; }
.pa-sd-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pop); padding: 24px 22px; max-width: 340px; text-align: center; }
.pa-sd-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.pa-sd-msg { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; }
.pa-sd-actions { display: flex; gap: 10px; justify-content: center; }
.pa-sd-btn { background: var(--accent); color: #0a0a0a; border: 0; border-radius: var(--r-item); padding: 10px 22px; font: 13px/1 var(--font-ui); font-weight: 600; cursor: pointer; }
.pa-sd-btn:active { background: var(--accent2); }
.pa-sd-btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.pa-sd-btn.ghost:active { background: rgba(255, 255, 255, 0.05); color: var(--text); }

/* ===== desktop window (gui.html), inside .pa-gui ===== */
.pa-gui-titlebar { height: 32px; display: flex; align-items: center; background: var(--gui-titlebar); border-bottom: 1px solid var(--border); padding: 0 0 0 12px; flex-shrink: 0; position: relative; }
.pa-gui-tb-title { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; font-weight: 500; }
.pa-gui-tb-title b { color: var(--text); font-weight: 600; letter-spacing: 0; margin-right: 5px; }
.pa-gui-tb-status { margin-left: 12px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.pa-gui-tb-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted2); }
.pa-gui-tb-status.online .dot { background: var(--good); }
.pa-gui-tb-status.waiting .dot { background: var(--warn); animation: pa-pulse 1.4s infinite; }
@keyframes pa-pulse { 50% { opacity: .45 } }
.pa-gui-tb-spacer { flex: 1; }
.pa-gui-tb-controls { display: flex; height: 100%; }
.pa-gui-tb-btn { width: 42px; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--muted); transition: background .12s, color .12s; }
.pa-gui-tb-btn:hover { background: var(--gui-tb-hover); color: var(--text); }
.pa-gui-tb-btn.close:hover { background: var(--red); color: #fff; }
.pa-gui-tb-btn svg { width: 10px; height: 10px; display: block; }
.pa-gui-tb-btn:disabled { opacity: .45; cursor: default; }
.pa-gui-tb-btn.push { position: relative; }
.pa-gui-tb-btn.push.dirty { color: var(--warn); }
.pa-gui-tb-btn.push.dirty::after { content: ""; position: absolute; top: 7px; right: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }
.pa-gui-tb-btn.push.busy svg { animation: pa-spin 1s linear infinite; }
@keyframes pa-spin { to { transform: rotate(360deg) } }
.pa-gui-body { height: calc(100vh - 32px); display: flex; flex-direction: column; padding: 8px 12px 12px; gap: 4px; overflow: auto; scrollbar-gutter: stable; scrollbar-color: var(--border2) transparent; }
.pa-gui-body::-webkit-scrollbar, .pa-gui-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.pa-gui-body::-webkit-scrollbar-track, .pa-gui-scroll::-webkit-scrollbar-track { background: transparent; }
.pa-gui-body::-webkit-scrollbar-thumb, .pa-gui-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* collapsible groups (<details class="pa-gui-grp">) */
.pa-gui-grp { flex-shrink: 0; border-bottom: 1px solid var(--border); }
.pa-gui-grp:last-child { border-bottom: 0; }
.pa-gui-grp.fill[open] { flex: 1 1 auto; min-height: 96px; display: flex; flex-direction: column; }
.pa-gui-grp.fill[open]::details-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pa-gui-grp.fill[open] > .pa-gui-grp-body { flex: 1; min-height: 0; }
.pa-gui-grp > summary { list-style: none; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 4px; cursor: pointer; color: var(--muted);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; user-select: none; }
.pa-gui-grp > summary::-webkit-details-marker { display: none; }
.pa-gui-grp > summary::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid var(--muted2); border-bottom: 1.5px solid var(--muted2); transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform .12s; flex-shrink: 0; }
.pa-gui-grp[open] > summary::before { transform: rotate(45deg); margin-top: -3px; }
.pa-gui-grp > summary:hover { color: var(--text); }
.pa-gui-grp > summary .n { color: var(--muted2); letter-spacing: 0; font-weight: 500; }
.pa-gui-grp > summary .n:empty { display: none; }
.pa-gui-grp > summary .live { margin-left: auto; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--muted2); }
.pa-gui-grp > summary .live.active { color: var(--good); }
.pa-gui-grp > summary .live:empty { display: none; }
.pa-gui-grp-body { display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 10px 20px; }

/* rows and fields */
.pa-gui-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pa-gui-row.adv { gap: 8px; }
.pa-gui-row.adv .pa-gui-flbl { width: auto; }
.pa-gui-row.adv .pa-gui-flbl:not(:first-child) { margin-left: 8px; }
.pa-gui-row.adv .pa-gui-val { max-width: 160px; }
.pa-gui-row.adv .end { margin-left: auto; }
.pa-gui-field { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.pa-gui-flbl { width: 64px; flex-shrink: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.pa-gui-val { font: 11.5px var(--font-mono); color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; }
.pa-gui-input { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r-gui); height: 28px; padding: 0 8px; font-size: 11.5px; width: 72px; font-family: var(--font-mono); color: var(--text); }
.pa-gui .pa-gui-input { font-family: var(--font-mono); font-size: 11.5px; }
.pa-gui-input:focus { outline: none; border-color: var(--accent); }
.pa-gui-select { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r-gui); height: 28px; padding: 0 8px; font-size: 11.5px; flex: 1 1 120px; min-width: 0; color: var(--text); font-family: inherit; cursor: pointer; }
.pa-gui-select:focus { outline: none; border-color: var(--accent); }
.pa-gui-link { color: var(--accent2); text-decoration: none; }
.pa-gui-link:hover { text-decoration: underline; }

/* connect: QR card and URL box */
.pa-gui-connect { display: flex; gap: 12px; align-items: flex-start; }
.pa-gui-connect-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pa-gui-qr { background: #fff; padding: 6px; border-radius: var(--r-item); flex-shrink: 0; width: 112px; height: 112px; box-shadow: var(--qr-shadow); }
.pa-gui-qr img, .pa-gui-qr .placeholder { display: block; width: 100px; height: 100px; border-radius: 3px; pointer-events: none; }
.pa-gui-qr .placeholder { background: #f4f4f6; }
.pa-gui-qr.unavailable { opacity: .55; filter: grayscale(.5); }
.pa-gui-url { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-gui);
  font: 11px var(--font-mono); color: var(--accent2); min-width: 0; }
.pa-gui-url-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: text; cursor: text; }
.pa-gui-url button { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); font-size: 11px; height: 22px; padding: 0 8px; border-radius: var(--r-sm); cursor: pointer;
  transition: all .12s; flex-shrink: 0; font-family: var(--font-ui); }
.pa-gui-url button:hover { background: var(--surface3); color: var(--text); border-color: var(--border3); }

/* buttons */
.pa-gui-btn { background: var(--surface2); color: var(--text); border: 1px solid var(--border2); border-radius: var(--r-gui); height: 28px; padding: 0 10px; font-size: 11.5px; font-weight: 500; cursor: pointer;
  transition: all .12s; display: inline-flex; align-items: center; gap: 5px; line-height: 1; white-space: nowrap; flex-shrink: 0; }
.pa-gui-btn:hover:not(:disabled) { background: var(--surface3); border-color: var(--border3); }
.pa-gui-btn:disabled { opacity: .4; cursor: not-allowed; }
.pa-gui-btn.primary { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.pa-gui-btn.primary:hover:not(:disabled) { background: var(--accent2); border-color: var(--accent2); }
.pa-gui-btn.danger { background: transparent; border-color: var(--danger-line); color: var(--danger-ink); }
.pa-gui-btn.danger:hover:not(:disabled) { background: var(--danger-fill); border-color: var(--danger-line2); }
.pa-gui-btn svg { width: 11px; height: 11px; }
.pa-gui-btn .rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted2); flex-shrink: 0; transition: background .15s, box-shadow .15s; }
.pa-gui-btn.rec.recording { background: rgba(var(--rec-rgb), 0.10); border-color: rgba(var(--rec-rgb), 0.45); color: var(--bad); }
.pa-gui-btn.rec.recording:hover:not(:disabled) { background: rgba(var(--rec-rgb), 0.18); }
.pa-gui-btn.rec.recording .rec-dot { background: var(--bad); animation: pa-rec-pulse 1.4s ease-in-out infinite; }
.pa-gui-btn.loop.active { background: rgba(76, 175, 125, 0.14); border-color: var(--accent); color: var(--accent2); }
@keyframes pa-rec-pulse { 50% { opacity: .55; } }

/* status pills */
.pa-gui-pill { display: inline-block; padding: 1px 7px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--muted2); border: 1px solid var(--border2); }
.pa-gui-pill:empty { display: none; }
.pa-gui-pill.live { background: rgba(76, 175, 125, 0.10); color: var(--good); border-color: rgba(76, 175, 125, 0.35); }
.pa-gui-pill.no-cable { background: rgba(230, 192, 80, 0.08); color: var(--warn); border-color: rgba(230, 192, 80, 0.30); }
.pa-gui-pill.recording { background: rgba(var(--rec-rgb), 0.10); color: var(--bad); border-color: rgba(var(--rec-rgb), 0.40); animation: pa-rec-pulse 1.4s ease-in-out infinite; }
.pa-gui-elapsed { font: 11px var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.pa-gui-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--bad); background: rgba(var(--rec-rgb), 0.10); border: 1px solid rgba(var(--rec-rgb), 0.25);
  padding: 2px 6px; border-radius: var(--r-xs); margin-right: 6px; text-transform: uppercase; flex-shrink: 0; }

/* switch (<label class="pa-gui-switch"><input type="checkbox"><span class="pa-gui-switch-track"><span class="pa-gui-switch-thumb"></span></span><span class="pa-gui-switch-label">) */
.pa-gui-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 11.5px; color: var(--text); user-select: none; height: 28px; }
.pa-gui-switch input { display: none; }
.pa-gui-switch-track { width: 30px; height: 16px; border-radius: var(--r-pill); background: var(--surface3); border: 1px solid var(--border2); position: relative; transition: background .15s, border-color .15s; flex-shrink: 0; }
.pa-gui-switch-thumb { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform .18s ease, background .15s; }
.pa-gui-switch input:checked + .pa-gui-switch-track { background: rgba(76, 175, 125, 0.20); border-color: var(--good); }
.pa-gui-switch input:checked + .pa-gui-switch-track .pa-gui-switch-thumb { transform: translateX(14px); background: var(--good); }
.pa-gui-switch-label { color: var(--muted); font-weight: 500; }

/* capture list and segment rows */
.pa-gui-caps { display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto; }
.pa-gui-empty { color: var(--muted2); font-size: 11.5px; }
.pa-gui-seg { display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-row);
  transition: background .12s, border-color .12s, opacity .15s; flex-wrap: wrap; row-gap: 4px; min-width: 0; cursor: grab; }
.pa-gui-seg:active { cursor: grabbing; }
.pa-gui-seg.dragging { opacity: .45; border-style: dashed; }
.pa-gui-seg.file-dragging { opacity: .65; border-color: var(--accent); }
.pa-gui-seg.drop-before { box-shadow: 0 -2px 0 var(--accent) inset, 0 0 0 1px var(--accent); }
.pa-gui-seg.drop-after { box-shadow: 0 2px 0 var(--accent) inset, 0 0 0 1px var(--accent); }
.pa-gui-seg.playing { border-color: var(--accent); background: rgba(76, 175, 125, 0.08); }
.pa-gui-grip { color: var(--muted2); font-size: 13px; line-height: 1; user-select: none; cursor: grab; padding: 0 1px; flex-shrink: 0; }
.pa-gui-seg-num { width: 18px; text-align: right; font: 11px var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pa-gui-seg-play { width: 26px; height: 26px; border-radius: 50%; padding: 0; background: var(--surface2); border: 1px solid var(--border2); color: var(--text); cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
.pa-gui-seg-play:hover { background: var(--surface3); border-color: var(--accent); }
.pa-gui-seg-play svg { width: 10px; height: 10px; display: block; }
.pa-gui-seg.playing .pa-gui-seg-play { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.pa-gui-seg-scrub { flex: 1; min-width: 80px; height: 4px; border-radius: 2px; background: var(--surface3); position: relative; cursor: pointer; }
.pa-gui-seg-scrub .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--accent); width: 0%; transition: width .07s linear; }
.pa-gui-seg-scrub .thumb { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--text); transform: translate(-50%, -50%); left: 0%; box-shadow: 0 0 0 2px var(--bg2); opacity: 0; transition: opacity .12s; }
.pa-gui-seg:hover .pa-gui-seg-scrub .thumb, .pa-gui-seg.playing .pa-gui-seg-scrub .thumb { opacity: 1; }
.pa-gui-seg-time { font: 11px var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 78px; text-align: right; }
.pa-gui-seg-meta { font-size: 11px; color: var(--muted2); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.pa-gui-seg-actions { display: flex; gap: 3px; flex-shrink: 0; }
.pa-gui-seg-actions button { background: transparent; border: 1px solid var(--border2); color: var(--muted); border-radius: var(--r-sm); padding: 3px 6px; font-size: 11px; cursor: pointer; font-family: var(--font-ui);
  display: inline-flex; align-items: center; justify-content: center; transition: all .12s; }
.pa-gui-seg-actions button:hover { background: var(--surface2); color: var(--text); }
.pa-gui-seg-actions button.danger:hover { background: var(--danger-fill); color: var(--danger-ink); border-color: var(--danger-line2); }
.pa-gui-seg-actions svg { width: 11px; height: 11px; display: block; }

/* device sessions */
.pa-gui-sessions { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.pa-gui-session { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-row); }
.pa-gui-session .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--muted2); }
.pa-gui-session.active .dot { background: var(--good); }
.pa-gui-session.streaming .dot { background: var(--bad); animation: pa-session-pulse 1.6s ease-in-out infinite; }
@keyframes pa-session-pulse { 50% { box-shadow: 0 0 0 3px rgba(224, 85, 85, 0.20); } }
.pa-gui-session-info { flex: 1; min-width: 0; }
.pa-gui-session-nick { font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; border-bottom: 1px dashed transparent; }
.pa-gui-session:hover .pa-gui-session-nick { border-bottom-color: var(--border2); }
.pa-gui-session-nick-input { font-size: 12px; font-weight: 600; color: var(--text); background: var(--bg2); border: 1px solid var(--accent); border-radius: var(--r-sm); padding: 1px 6px; width: 120px; font-family: inherit; }
.pa-gui-session-nick-input:focus { outline: none; }
.pa-gui-session-ip { font: 11px var(--font-mono); color: var(--text); }
.pa-gui-session-sub { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-gui-session button { background: transparent; border: 1px solid var(--border2); color: var(--muted); border-radius: var(--r-sm); padding: 3px 8px; font-size: 11px; cursor: pointer; transition: all .12s; font-family: var(--font-ui); }
.pa-gui-session button:hover { background: var(--danger-fill); color: var(--danger-ink); border-color: var(--danger-line2); }
.pa-gui-session button.forget { padding: 3px 7px; margin-left: 4px; }
.pa-gui-session button.forget:hover { background: var(--danger-fill); color: var(--danger-ink); border-color: var(--danger-line2); }
.pa-gui-blocked { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.pa-gui-blocked:empty { display: none; }
.pa-gui-blocked span { font: 11px var(--font-mono); background: var(--danger-fill); color: var(--danger-ink); padding: 1px 5px; border-radius: var(--r-xs); margin-right: 5px; cursor: pointer; }

/* context menu and toasts */
.pa-gui-ctx { position: fixed; z-index: 200; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--r-gui); padding: 4px; display: none; flex-direction: column; min-width: 120px; box-shadow: var(--pop-shadow); }
.pa-gui-ctx.show { display: flex; }
.pa-gui-ctx button { background: none; border: 0; color: var(--text); text-align: left; height: 28px; padding: 0 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 11.5px; }
.pa-gui-ctx button:hover { background: var(--surface3); }
.pa-gui-toast { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--r-row);
  padding: 8px 14px; font-size: 11.5px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; box-shadow: var(--toast-shadow); z-index: 50; }
.pa-gui-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pa-gui-push-toast { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(8px); background: var(--surface2); color: var(--text); border: 1px solid var(--border2);
  padding: 8px 14px; border-radius: var(--r-row); font-size: 11.5px; max-width: 82%; box-shadow: var(--pop-shadow); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 9999; white-space: pre-wrap; text-align: center; }
.pa-gui-push-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pa-gui-push-toast.ok { border-color: var(--good); }
.pa-gui-push-toast.err { border-color: var(--red); }

/* frameless window resize handles: <div class="pa-gui-resize n" data-edge="n"> for n s w e nw ne sw se */
.pa-gui-resize { position: fixed; z-index: 100; background: transparent; }
.pa-gui-resize.n { top: 0; left: 6px; right: 6px; height: 5px; cursor: n-resize; }
.pa-gui-resize.s { bottom: 0; left: 6px; right: 6px; height: 5px; cursor: s-resize; }
.pa-gui-resize.w { top: 6px; bottom: 6px; left: 0; width: 5px; cursor: w-resize; }
.pa-gui-resize.e { top: 6px; bottom: 6px; right: 0; width: 5px; cursor: e-resize; }
.pa-gui-resize.nw { top: 0; left: 0; width: 8px; height: 8px; cursor: nw-resize; }
.pa-gui-resize.ne { top: 0; right: 0; width: 8px; height: 8px; cursor: ne-resize; }
.pa-gui-resize.sw { bottom: 0; left: 0; width: 8px; height: 8px; cursor: sw-resize; }
.pa-gui-resize.se { bottom: 0; right: 0; width: 8px; height: 8px; cursor: se-resize; }

/* ===== splash (splash.html) ===== */
.pa-splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; font-family: var(--font-ui); cursor: default;
  -webkit-user-select: none; user-select: none; background: radial-gradient(900px 500px at 50% -10%, rgba(76, 175, 125, 0.12), transparent 60%), #0a0a0a; }
.pa-splash-ring { width: 64px; height: 64px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.08); border-top-color: var(--green); border-right-color: var(--green2);
  animation: pa-spin 0.85s linear infinite; box-shadow: 0 0 24px rgba(76, 175, 125, 0.35); }
.pa-splash-title { color: var(--text); font-size: 19px; font-weight: 600; letter-spacing: 0.4px; }
.pa-splash-title b { color: var(--green2); font-weight: 600; }
.pa-splash-status { color: var(--muted); font-size: 13px; min-height: 18px; transition: opacity 0.25s ease; }
.pa-splash-bar { width: 220px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.pa-splash-bar i { display: block; height: 100%; width: 40%; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--green), transparent); animation: pa-slide 1.3s ease-in-out infinite; }
@keyframes pa-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(370%); } }