:root {
  /* Shared aesthetic tokens — Murmur black-cassette-deck (prep/design.html) */
  --bg: #050607;
  --bg2: #0a0c0e;
  --panel: #0e1114;
  --panel-2: #121619;
  --text: #e8ede9;
  --muted: #8a968f;
  --faint: #5b665f;
  --line: #1c2226;
  --accent: #5bd58a;
  --accent-d: #2f8f5b;
  --lcd: #7fe0b0;
  --bad: #ff5b5b;
  --warn: #f2b134;
  --ok: #7ddc8a;
  --chrome: #2a3238;
  --r: 12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  background:
    radial-gradient(1200px 500px at 50% -8%, #10161a, #050607 60%),
    var(--bg);
}

body {
  display: flex;
  justify-content: center;
  padding: 24px;
}

main {
  width: 100%;
  max-width: 920px;
  min-width: 0;
  display: grid;
  gap: 16px;
}

.topbar { order: 1; }
.input-row { order: 2; }
.storage-panel { order: 3; }
.transcripts-view { order: 4; display: none !important; }
.model-panel { order: 5; }
.bar { order: 6; }
.metrics { order: 7; }
.runner-panel { order: 8; }
.telemetry { order: 9; }
footer { order: 10; }

body.preboot > main > .model-panel,
body.preboot > main > .runner-panel,
body.preboot > main > .mic-panel,
body.preboot > main > .playback-panel,
body.preboot > main > .telemetry,
body.preboot > main > .metrics,
body.preboot > main > .bar,
body.preboot > main > .chunk-mode {
  display: none !important;
}

/* ---- Section 1 — Top bar: compact rail (variant C) ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
}

.sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* circular cassette buttons */
.circ {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #20272b, #0c0f11);
  border: 1px solid #2b343a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.5);
  color: var(--muted);
  cursor: pointer;
  position: relative;
  flex: none;
  padding: 0;
}
.circ svg { width: 18px; height: 18px; fill: currentColor; }
.circ.sm { width: 34px; height: 34px; }
.circ.sm svg { width: 14px; height: 14px; }
.circ.power { color: var(--accent); }
.circ.on {
  color: var(--accent);
  box-shadow: inset 0 0 8px rgba(91,213,138,.25), 0 0 10px rgba(91,213,138,.15);
}
.circ:hover { border-color: var(--chrome); }

.reset-wrap {
  position: relative;
  flex: none;
}

.reset-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0a0d0f;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
}

.reset-menu[hidden] { display: none; }
.reset-menu button {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  padding: 9px 10px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.reset-menu button:hover,
.reset-menu button:focus-visible {
  outline: none;
  border-color: var(--chrome);
  background: var(--panel-2);
}

.zoom-reset[hidden] { display: none; }
.zoom-reset {
  color: var(--warn);
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
}
.zoom-reset span {
  transform: translateY(1px);
}

/* LCD-style stage readout */
.lcd {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #06110c;
  border: 1px solid #123322;
  color: var(--lcd);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: .5px;
  box-shadow: inset 0 0 10px rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-wrap: anywhere;
}
.lcd .dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  flex: none;
  background: var(--lcd);
  box-shadow: 0 0 6px var(--lcd);
}
.lcd.idle { color: var(--faint); }
.lcd.idle .dot { background: var(--faint); box-shadow: none; }
.lcd.clickable {
  cursor: pointer;
  border-color: #1d6d45;
}
.lcd.clickable:focus-visible {
  outline: 2px solid var(--lcd);
  outline-offset: 2px;
}
.status-arrow {
  appearance: none;
  border: 1px solid #1d6d45;
  background: #07160f;
  color: var(--lcd);
  border-radius: 4px;
  min-width: 20px;
  height: 22px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.status-arrow[hidden] { display: none; }
.status-arrow:focus-visible,
.status-action:focus-visible {
  outline: 2px solid var(--lcd);
  outline-offset: 2px;
}
#status {
  min-width: 0;
  flex: 1;
}
.status-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
}
.status-actions[hidden] { display: none; }
.status-action {
  appearance: none;
  border: 1px solid #1d6d45;
  background: #07160f;
  color: var(--lcd);
  border-radius: 5px;
  min-height: 22px;
  padding: 2px 7px;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

/* status lamps — lit chip look */
.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: #0a0d0f;
  color: var(--faint);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}

.badge.ok { color: var(--lcd); border-color: #123322; background: #06110c; }
.badge.warn { color: var(--warn); border-color: #5c491c; }
.badge.bad { color: var(--bad); border-color: #5c2030; }

.bar-hint {
  display: none;
  color: var(--faint);
  font-size: 12px;
  align-self: center;
}

/* Runtime badges shown inside Activity. */
.telemetry {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r);
  padding: 8px 12px;
}
.telemetry-label {
  color: var(--faint);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  margin-right: 4px;
}

/* Power-off deck state (R3) — dim + inert everything except the top bar */
main.deck-off > section,
main.deck-off > footer { opacity: .4; pointer-events: none; filter: grayscale(.35); }
.circ.power.off {
  color: var(--bad);
  border-color: #5c2030;
  box-shadow: inset 0 0 8px rgba(255,91,91,.22), 0 0 10px rgba(255,91,91,.12);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.controls {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  padding: 12px;
  min-width: 0;
}

/* ---- Section 2 — Input row: Mic · Upload · Stored ---- */
.input-row {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r);
  padding: 12px;
  min-width: 0;
}

.inputrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.input-row.drag {
  border-color: var(--accent-d);
  background: #06110c;
}

.input-row.drag .bigbtn {
  border-color: var(--accent-d);
}

.bigbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  text-align: center;
  padding: 46px 12px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  position: relative;
  font: inherit;
  background-repeat: no-repeat;
  background-position: center 16px;
  background-size: 30px 30px;
}
.bigbtn strong { font-size: 15px; font-weight: 650; }
.bigbtn span { color: var(--faint); font-size: 11px; line-height: 1.35; }
.bigbtn:hover:not(:disabled) { border-color: var(--chrome); }

/* record: mic glyph via CSS background so app.js textContent swaps survive */
.bigbtn.mic {
  border-color: var(--accent-d);
  background-color: #0c130f;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="%235bd58a"><path d="M192 0a96 96 0 0 0-96 96v160a96 96 0 0 0 192 0V96a96 96 0 0 0-96-96zM64 216a24 24 0 0 0-48 0v40a176 176 0 0 0 152 174v34h-40a24 24 0 0 0 0 48h128a24 24 0 0 0 0-48h-40v-34a176 176 0 0 0 152-174v-40a24 24 0 0 0-48 0v40a128 128 0 0 1-256 0z"/></svg>'),
    linear-gradient(#12241a, #0c130f);
  background-repeat: no-repeat, no-repeat;
  background-position: center 16px, center;
  background-size: 30px 30px, cover;
  color: var(--accent);
  font-weight: 650;
  font-size: 15px;
}
#recordBtn.recording {
  border-color: #7a2638;
  background-color: #2a0810;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="%23ff9bad"><path d="M192 0a96 96 0 0 0-96 96v160a96 96 0 0 0 192 0V96a96 96 0 0 0-96-96zM64 216a24 24 0 0 0-48 0v40a176 176 0 0 0 152 174v34h-40a24 24 0 0 0 0 48h128a24 24 0 0 0 0-48h-40v-34a176 176 0 0 0 152-174v-40a24 24 0 0 0-48 0v40a128 128 0 0 1-256 0z"/></svg>'),
    linear-gradient(#2a0810, #1a060c);
  background-position: center 16px, center;
  background-size: 30px 30px, cover;
  color: #ff9bad;
}

.bigbtn.upload {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23e8ede9"><path d="M256 32 152 136a24 24 0 0 0 34 34l46-46v230a24 24 0 0 0 48 0V124l46 46a24 24 0 0 0 34-34zM80 320a24 24 0 0 0-48 0v96a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48v-96a24 24 0 0 0-48 0v96H80z"/></svg>');
}
#dropzone.drag,
.input-row.drag #dropzone {
  border-color: var(--accent);
  background-color: #061716;
}

.bigbtn.stored {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%238a968f"><path d="M48 128a64 64 0 0 1 64-64h94a48 48 0 0 1 34 14l42 42h118a64 64 0 0 1 64 64v200a64 64 0 0 1-64 64H112a64 64 0 0 1-64-64zm64-16a16 16 0 0 0-16 16v32h320a16 16 0 0 0-16-16H272a48 48 0 0 1-34-14l-42-42h-84zm-16 96v176a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16V208z"/></svg>');
}
.bigbtn.stored:disabled { opacity: .5; cursor: not-allowed; }

.mic-detail {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.mic-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.mic-toggle input {
  inline-size: 16px;
  block-size: 16px;
  accent-color: var(--accent);
}

label.control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.control span {
  color: var(--muted);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

select {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  min-width: 0;
}

/* ---- Section 3 — Model picker: segmented tier rail (variant A) ---- */
.model-picker {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.model-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.model-head-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
.model-head-ic { width: 15px; height: 15px; fill: var(--muted); }
.model-head-hint { font-size: 11px; margin-left: auto; }
.faint { color: var(--faint); }

/* R2: single contiguous horizontal rail — a scroll-snap slider that overflows
   into a carousel with a dots indicator instead of a segmented/card grid. */
.model-rail-wrap { position: relative; min-width: 0; }
.model-rail {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  background: #0a0d0f;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px;
  scrollbar-width: thin;
  scrollbar-color: var(--chrome) transparent;
}
.model-rail::-webkit-scrollbar { height: 6px; }
.model-rail::-webkit-scrollbar-thumb { background: var(--chrome); border-radius: 999px; }
.model-rail .model-group { display: contents; }

.model-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding-top: 2px;
  min-height: 9px;
}
.model-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #2a3238;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.model-dot.active { background: var(--accent); box-shadow: 0 0 5px rgba(91,213,138,.5); }

.model-detail {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.model-detail strong { color: var(--accent); font-weight: 650; }

.model-group {
  display: grid;
  gap: 8px;
}

.model-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.model-option {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
  min-width: 92px;
  flex: 0 0 auto;
  scroll-snap-align: center;
  border: 1px solid transparent;
  background: none;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
}

.model-option:hover { background: #10151a; }

.model-option:has(input:checked) {
  border-color: var(--accent-d);
  background: #1a2420;
}
.model-option:has(input:checked) .model-name { color: var(--accent); }

.model-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.model-option .model-name {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

.model-option .model-meta {
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  overflow-wrap: anywhere;
}

.advanced-models {
  border: 1px solid var(--line);
  background: #070707;
  border-radius: 8px;
  padding: 8px 9px;
}

.advanced-models summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}

.advanced-models summary::-webkit-details-marker {
  display: none;
}

.advanced-models .model-options {
  margin-top: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fit-gauge {
  display: grid;
  gap: 6px;
  justify-items: start;
  color: var(--muted);
  font-size: 13px;
  min-width: 0;
}

.gauge-dot {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 999px;
  background: #666;
  box-shadow: 0 0 0 1px #777;
  display: inline-block;
  margin-right: 7px;
  vertical-align: -1px;
}

.fit-gauge[data-fit="green"] .gauge-dot { background: var(--ok); box-shadow: 0 0 0 1px #2f6a39; }
.fit-gauge[data-fit="yellow"] .gauge-dot { background: var(--warn); box-shadow: 0 0 0 1px #6d5518; }
.fit-gauge[data-fit="red"] .gauge-dot { background: var(--bad); box-shadow: 0 0 0 1px #6d2638; }
.fit-gauge[data-fit="grey"] .gauge-dot { background: #696969; box-shadow: 0 0 0 1px #777; }

.fit-detail {
  overflow-wrap: anywhere;
}

input[type="file"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  padding: 12px;
}

#status {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.share-actions {
  display: none;
  gap: 10px;
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.share-actions.ready {
  display: none;
}

.share-actions [hidden] {
  display: none;
}

.export-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.export-title {
  min-width: 68px;
  color: var(--muted);
  font-size: 11px;
}

.share-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
}

.share-actions button::before {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

[data-deep-dive="bing"]::before { content: "b"; background: #0b5; color: #001b12; }
[data-deep-dive="breeze"]::before { content: "br"; background: #15191f; color: #9ed7ff; }
#chatgptBtn::before { content: "gpt"; background: #12352b; color: #c7f3df; }
[data-deep-dive="duckduckgo"]::before { content: "d"; background: #f26b21; color: #1a0800; }
[data-deep-dive="gemini"]::before { content: "g"; background: #2b58ff; color: #eaf0ff; }
[data-deep-dive="google"]::before { content: "g"; background: #fff; color: #4285f4; }
[data-deep-dive="perplexity"]::before { content: "p"; background: #163b3d; color: #9df1ee; }
#claudeBtn::before { content: "c"; background: #5a2f20; color: #ffe0cb; }
#csvBtn::before { content: "csv"; }
#jsonBtn::before { content: "{}"; }
#srtBtn::before { content: "srt"; }
#txtBtn::before { content: "txt"; }
#vttBtn::before { content: "vtt"; }
#wavBtn::before,
#rawWavBtn::before { content: "wav"; }
#copyBtn::before,
#chatgptCopyOpenBtn::before,
#claudeCopyOpenBtn::before { content: "⧉"; }
#emailBtn::before { content: "@"; }
#shareBtn::before { content: "↗"; }
#reportBtn::before { content: "!"; }

.share-actions button:has(svg)::before,
.share-actions .brand-button::before {
  display: none;
}

.share-actions button svg,
.brand-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.brand-icon {
  object-fit: contain;
}

.share-actions button svg {
  fill: currentColor;
}

.brand-icon {
  border-radius: 4px;
  object-fit: contain;
}

button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

button:hover:not(:disabled) { border-color: #555; }
button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.icon-btn {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.icon-btn svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.icon-btn.danger {
  color: var(--bad);
}

.icon-btn.active {
  border-color: rgba(91, 213, 138, .45);
  color: var(--accent);
}

#cancelBtn:not(:disabled) {
  border-color: #5c2030;
  color: #ff9bad;
}

#cancelBtn:disabled {
  display: none;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.metric {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  padding: 11px;
  min-width: 0;
}

.metric .label {
  color: var(--muted);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

.metric .value {
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  overflow-wrap: anywhere;
}

/* ---- Section 4 — Runner controls: engine · threads · heap · AGC/ANC/EC ---- */
.runner-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.runner-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.runner-head-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
}
.runner-head-hint { font-size: 11px; margin-left: auto; }

.runner-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
  min-width: 0;
}
.runner-sliders {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 280px;
}
.runner-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.runner-line .cap {
  min-width: 78px;
  color: var(--muted);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}
.runner-select {
  appearance: none;
  border: 1px solid var(--line);
  background: #0a0d0f;
  color: var(--text);
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.runner-select:hover { border-color: var(--chrome); }

/* R7: backend segmented toggle (Auto / Scalar / SIMD) — separate from threads */
.seg-toggle {
  display: inline-flex;
  gap: 2px;
  background: #0a0d0f;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
}
.seg-toggle .seg { position: relative; display: inline-flex; }
.seg-toggle .seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-toggle .seg span {
  display: block;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
}
.seg-toggle .seg:has(input:checked) span { background: #1a2420; color: var(--accent); }
.seg-toggle .seg input:focus-visible + span { box-shadow: 0 0 0 2px rgba(91,213,138,.35); }

.runner-line .range {
  flex: 1;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: #0a0d0f;
  border: 1px solid var(--line);
  outline: none;
}
.runner-line .range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(#e8ede9, #9fb0a6);
  border: 1px solid #0a0d0f;
  cursor: pointer;
}
.runner-line .range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(#e8ede9, #9fb0a6);
  border: 1px solid #0a0d0f;
  cursor: pointer;
}
.runner-line .range:disabled { opacity: .5; cursor: not-allowed; }
.runner-line .val {
  min-width: 62px;
  text-align: right;
  color: var(--lcd);
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.badge-lit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--lcd);
  white-space: nowrap;
}
.badge-lit .d {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--lcd);
  box-shadow: 0 0 5px var(--lcd);
}

.runner-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.deck-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--accent-d);
  background: linear-gradient(#1c3327, #12241a);
  color: var(--accent);
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.deck-btn svg { width: 15px; height: 15px; fill: currentColor; }
.deck-btn:disabled { opacity: .5; cursor: not-allowed; }
.deck-btn:hover:not(:disabled) { border-color: var(--accent); }

.audioproc {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.rocker {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  user-select: none;
  cursor: pointer;
}
.rocker input { position: absolute; opacity: 0; width: 0; height: 0; }
.rocker .lbl {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}
.rocker .sw {
  width: 46px;
  height: 26px;
  border-radius: 6px;
  background: #0a0d0f;
  border: 1px solid var(--line);
  position: relative;
  transition: .15s;
}
.rocker .sw::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(#2a3238, #171c20);
  transition: .15s;
}
.rocker .rk-sub { font-size: 9px; color: var(--faint); }
.rocker:has(input:checked) .lbl { color: var(--accent); }
.rocker:has(input:checked) .sw { background: #0c1a12; border-color: var(--accent-d); }
.rocker:has(input:checked) .sw::before {
  left: 24px;
  background: linear-gradient(#6fe6a0, #2f8f5b);
}
.rocker input:focus-visible + .sw { border-color: var(--chrome); box-shadow: 0 0 0 2px rgba(91,213,138,.3); }

/* ---- Section 5 — Transcripts subview: variant B (list / reader) ---- */
.transcripts-view {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r);
  padding: 12px;
}
.tv-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tv-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
}
.tv-title-ic { width: 15px; height: 15px; fill: var(--accent); }
.hitnav {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.hitnav .nav {
  min-width: 30px;
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
  background: #0a0d0f;
}
.hitnav .count {
  min-width: 54px;
  text-align: center;
  color: var(--lcd);
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tv-search {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #0a0d0f;
  border-radius: 8px;
  padding: 6px 10px;
}
.tv-search-ic { width: 14px; height: 14px; fill: var(--faint); flex: none; }
.tv-search input {
  flex: 1;
  appearance: none;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}

#transcript {
  width: 100%;
  min-height: 360px;
  resize: vertical;
  border: 1px solid var(--line);
  background: #050505;
  color: var(--text);
  border-radius: 8px;
  padding: 14px;
  font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.tv-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tv-playback {
  font-size: 11px;
  padding: 5px 10px;
}
.reader-audio {
  flex: 1 1 220px;
  min-width: 0;
}
.reader-audio[hidden] {
  display: none;
}
.reader-audio audio {
  width: 100%;
  max-height: 34px;
  display: block;
}
.tv-hint { font-size: 11px; }

.storage-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  min-width: 0;
  max-height: clamp(420px, calc(100vh - 220px), 760px);
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.storage-panel::-webkit-scrollbar { display: none; }

.storage-quota {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
}

.storage-quota:hover,
.storage-quota:focus-visible {
  color: var(--text);
  border-color: var(--accent-d);
  outline: none;
}

.tabs {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 188px 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #0e1114;
  box-shadow: 0 2px 0 #0e1114;
  scrollbar-width: none;
}

.tabs::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 1;
  width: 198px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 17, 20, 0), #0e1114 22px, #0e1114);
}

.tabs .tab[data-tray-tab="models"],
.tabs .tab[data-tray-tab="storage"],
.tabs .tab[data-tray-tab="settings"] {
  position: absolute;
  right: 74px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  justify-content: center;
  gap: 0;
  width: 28px;
  min-height: 28px;
  padding: 0;
  border-color: var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: transparent;
  font-size: 0;
  overflow: hidden;
}

.tabs .tab[data-tray-tab="models"] { right: 74px; }
.tabs .tab[data-tray-tab="storage"] { right: 112px; }
.tabs .tab[data-tray-tab="settings"] { right: 150px; }

.tabs .tab[data-tray-tab="models"] svg,
.tabs .tab[data-tray-tab="storage"] svg,
.tabs .tab[data-tray-tab="settings"] svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
  fill: currentColor;
}

.tabs .tab[data-tray-tab="models"].active,
.tabs .tab[data-tray-tab="models"]:hover,
.tabs .tab[data-tray-tab="models"]:focus-visible,
.tabs .tab[data-tray-tab="storage"].active,
.tabs .tab[data-tray-tab="storage"]:hover,
.tabs .tab[data-tray-tab="storage"]:focus-visible,
.tabs .tab[data-tray-tab="settings"].active,
.tabs .tab[data-tray-tab="settings"]:hover,
.tabs .tab[data-tray-tab="settings"]:focus-visible {
  border-color: var(--accent-d);
  color: transparent;
}

.tabs .tab[data-tray-tab="models"].active svg,
.tabs .tab[data-tray-tab="models"]:hover svg,
.tabs .tab[data-tray-tab="models"]:focus-visible svg,
.tabs .tab[data-tray-tab="storage"].active svg,
.tabs .tab[data-tray-tab="storage"]:hover svg,
.tabs .tab[data-tray-tab="storage"]:focus-visible svg,
.tabs .tab[data-tray-tab="settings"].active svg,
.tabs .tab[data-tray-tab="settings"]:hover svg,
.tabs .tab[data-tray-tab="settings"]:focus-visible svg {
  color: var(--text);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}

.tab svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.tab.active {
  color: var(--lcd);
  border-color: var(--accent-d);
  background: #06110c;
  box-shadow: inset 0 0 0 1px rgba(91, 213, 138, .14);
}

.tray-toolbar {
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: #0e1114;
  box-shadow: 0 3px 0 #0e1114;
}

.tray-toolbar[hidden] {
  display: none;
}

.tray-toolbar:not(.text-active) {
  grid-template-columns: auto auto;
  justify-content: end;
}

.tray-toolbar:not(.text-active) .text-only-tool {
  display: none;
}

.tray-toolbar input {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
}

.tray-toolbar select {
  width: 110px;
}

.tray-eye[hidden] {
  display: none;
}

.search-clear[hidden] {
  display: none;
}

.search-clear svg {
  width: 12px;
  height: 12px;
}

.search-state-source {
  display: none !important;
}

.search-options-btn svg {
  width: 13px;
  height: 13px;
}

.tray-delete {
  color: var(--bad);
  border-color: rgba(255, 92, 122, .45);
}

.tray-delete svg {
  width: 13px;
  height: 13px;
}

.tray-delete-count {
  min-width: 1ch;
  color: currentColor;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.search-mode-rocker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  min-height: 34px;
  padding: 2px;
}

.search-display-rocker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  min-height: 34px;
  padding: 2px;
}

.search-mode-rocker button,
.search-display-rocker button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  padding: 6px 7px;
  min-width: 27px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.search-mode-rocker button span,
.search-display-rocker button span,
.search-scope label span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.search-mode-rocker button.active,
.search-mode-rocker button[aria-pressed="true"],
.search-display-rocker button.active,
.search-display-rocker button[aria-pressed="true"] {
  background: #06110c;
  color: var(--lcd);
}

.search-mode-rocker button:disabled,
.search-display-rocker button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.search-mode-rocker svg,
.search-display-rocker svg,
.search-scope svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  flex: none;
  pointer-events: none;
}

.search-scope {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.1;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  padding: 2px;
  min-height: 34px;
}

.search-scope label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 6px 7px;
  min-width: 27px;
  cursor: pointer;
}

.search-scope input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.search-scope label:has(input:checked) {
  background: #06110c;
  color: var(--lcd);
}

.filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #08100c;
  color: var(--muted);
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 12px;
}

.filter-banner span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-banner button {
  min-height: 28px;
  padding: 5px 9px;
  white-space: nowrap;
}

.transcript-versions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.version-chip {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--muted);
}

.version-chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: #08170f;
}

.tray {
  display: none;
  min-height: 0;
  overflow: auto;
  padding: 8px 12px 12px;
  scrollbar-width: none;
}

.tray::-webkit-scrollbar {
  display: none;
}

.tray.active {
  display: grid;
  gap: 8px;
  width: 100%;
  align-content: start;
}

.tray > .controls,
.tray > .telemetry,
.tray > .metrics,
.tray > .bar,
.tray > .transcripts-view {
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.tray > .controls {
  grid-template-columns: 1fr;
}

#transcriptsTray > .transcripts-view {
  display: none;
}

.tray-list {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.intro-hello {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border-color: #244332;
  background:
    linear-gradient(180deg, rgba(91, 213, 138, .10), rgba(6, 17, 12, .35)),
    #070a0c;
}

.intro-hello-main {
  min-width: 0;
}

.intro-hello-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.intro-hello-title {
  margin-top: 2px;
  color: var(--text);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.15;
}

.intro-hello-detail {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.intro-hello-facts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 86px;
}

.intro-hello-fact {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 6px;
  border: 1px solid #14221a;
  border-radius: 6px;
  background: #050708;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.2;
}

.intro-hello-fact strong {
  color: var(--lcd);
  font-weight: 700;
}

.intro-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.intro-card-primary {
  border-color: #1d6d45;
  background: linear-gradient(180deg, #08120d, #050706);
}

.intro-card-icon {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #07100c;
  color: var(--lcd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.intro-card-icon svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.intro-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.intro-card-actions .deck-btn,
.intro-settings-row .deck-btn {
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1;
}

.intro-card-actions .intro-dive-btn {
  border-color: var(--line);
  background: #090d0f;
  color: var(--muted);
}

.intro-card .item-name {
  font-size: 13px;
  line-height: 1.25;
}

.intro-card .item-meta {
  font-size: 11px;
  line-height: 1.3;
}

.intro-progress {
  display: grid;
  grid-template-columns: minmax(52px, 96px) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-top: 6px;
}

.intro-progress-bar {
  height: 6px;
  overflow: hidden;
  border: 1px solid #193324;
  border-radius: 999px;
  background: #050708;
}

.intro-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.intro-progress-label {
  min-width: 0;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intro-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.intro-step {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--muted);
  background: #050708;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.intro-step[data-state="done"] {
  color: var(--ok);
  border-color: #234a2b;
  background: #071609;
}

.intro-step[data-state="running"],
.intro-step[data-state="queued"] {
  color: var(--accent);
  border-color: var(--accent-d);
  background: #06110c;
}

.intro-settings-row {
  display: flex;
  justify-content: flex-start;
}

.activity-overview {
  display: block;
}

.activity-filters {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.activity-filters::-webkit-scrollbar {
  display: none;
}

.activity-filter {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  background: #050708;
}

.activity-filter[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent-d);
  background: #06110c;
}

.activity-metrics-card {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #070707;
  padding: 10px;
}

.activity-metrics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #11191d;
}

.activity-metrics-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.activity-metrics-head span {
  color: var(--faint);
  font-size: 11px;
}

.activity-metrics-rows {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding-top: 8px;
}

.activity-metric {
  min-width: 0;
}

.activity-metric span,
.tray-section-label {
  display: block;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.2;
}

.activity-metric strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.activity-metric[data-tone="ready"] strong { color: var(--accent); }
.activity-metric[data-tone="busy"] strong { color: var(--text); }

.tray-section-label {
  margin-top: 4px;
  text-transform: none;
}

#modelsTray .model-rail {
  display: grid;
  overflow: visible;
  scroll-snap-type: none;
}

#modelsTray .model-rail .model-group {
  display: grid;
  gap: 6px;
}

#modelsTray .model-option {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-items: start;
  align-items: center;
  text-align: left;
  background: #080b0d;
  border-color: var(--line);
  padding: 10px;
}

#modelsTray .model-card-main,
#modelsTray .model-card-side {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#modelsTray .model-card-side {
  justify-self: end;
  justify-items: end;
}

#modelsTray .model-card-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

#modelsTray .model-note,
#modelsTray .model-size,
#modelsTray .model-cache-status {
  color: var(--faint);
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#modelsTray .model-fit {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
}

#modelsTray .model-fit[data-fit="green"] {
  border-color: rgba(91, 213, 138, .45);
  color: var(--accent);
}

#modelsTray .model-fit[data-fit="yellow"] {
  border-color: rgba(227, 188, 98, .5);
  color: var(--warn);
}

#modelsTray .model-fit[data-fit="red"] {
  border-color: rgba(255, 92, 122, .55);
  color: var(--bad);
}

#modelsTray .model-fit[data-fit="grey"] {
  border-color: rgba(142, 148, 155, .35);
  color: var(--faint);
}

#modelsTray .model-card-actions {
  display: inline-flex;
  gap: 5px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

#modelsTray .model-card-actions button {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

#modelsTray .model-card-actions button svg {
  width: 12px;
  height: 12px;
}

#modelsTray .model-download.busy svg {
  animation: chip-spin .9s linear infinite;
}

#modelsTray .model-download.queued {
  border-style: dashed;
}

#modelsTray .model-dots {
  display: none;
}

#modelsTray .model-detail,
#modelsTray .fit-gauge {
  display: none;
}

.storage-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #070707;
}

.storage-item.selectable {
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
}

.storage-item.active {
  border-color: var(--accent);
  background: #0b1010;
}

.storage-item.search-muted {
  opacity: .42;
}

.storage-item.search-muted mark {
  opacity: 1;
}

.storage-item.hidden-item,
.model-option.hidden-item {
  border-style: dashed;
  opacity: .62;
}

.storage-item.openable {
  cursor: pointer;
}

#audioTray .storage-item {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

#audioTray .storage-item > .storage-item-main {
  grid-column: 2;
}

#audioTray .item-title-row {
  min-width: 0;
}

#audioTray .audio-title-edit {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4px;
}

#audioTray .audio-title-edit:focus {
  outline: 1px solid var(--accent-d);
  outline-offset: 2px;
  background: #08170f;
  color: var(--lcd);
}

#audioTray .storage-item > .item-meta {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  margin-top: 0;
}

#audioTray .storage-item > .item-meta audio {
  display: block;
  width: 100%;
  max-width: 100%;
}

#audioTray .storage-item > .audio-inline-text {
  grid-column: 2;
}

#audioTray .storage-item > .storage-actions {
  grid-column: 2;
  justify-content: flex-end;
  width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

#audioTray .storage-item > .storage-actions::-webkit-scrollbar {
  display: none;
}

#audioTray .audio-actions .icon-btn {
  flex: 0 0 30px;
}

.storage-item-main {
  min-width: 0;
  border-radius: 6px;
}

.storage-item-main:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.storage-select {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  align-self: center;
  cursor: pointer;
}

.storage-select input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.storage-select span {
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #050608;
}

.storage-select input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 4px #050608;
}

.item-name {
  font-size: 13px;
  overflow-wrap: break-word;
  word-break: normal;
}

.item-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.transcript-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
}

.transcript-row .storage-item-main {
  display: grid;
  gap: 5px;
}

.transcript-row[data-expanded="false"] .storage-item-main {
  grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}

.transcript-title-line {
  min-width: 0;
}

.transcript-title-edit {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4px;
}

.transcript-title-edit:focus {
  outline: 1px solid var(--accent-d);
  outline-offset: 2px;
  background: #08170f;
  color: var(--lcd);
}

.transcript-detail-line {
  margin: 0;
}

.transcript-row[data-expanded="false"] .transcript-detail-line {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transcript-row-actions {
  align-self: start;
  justify-content: flex-end;
}

.transcript-row[data-expanded="false"] .transcript-row-actions {
  flex-wrap: nowrap;
}

.transcript-row-toggle svg {
  transform: rotate(-90deg);
  transition: transform .15s ease;
}

.transcript-row-toggle[aria-expanded="true"] svg {
  transform: rotate(0deg);
}

.transcript-inline {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050607;
  padding: 10px;
  min-width: 0;
}

.transcript-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.transcript-inline-title {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.transcript-inline-body {
  max-height: none;
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid #11191d;
  border-radius: 6px;
  background: #020303;
  padding: 10px;
  color: var(--text);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.transcript-inline-editor {
  display: block;
  width: 100%;
  min-height: 96px;
  max-height: 52vh;
  resize: none;
  overflow: hidden;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  white-space: pre-wrap;
}

.transcript-inline-editor.is-scrollable {
  overflow: auto;
}

.transcript-inline-editor:focus {
  border-color: var(--accent-d);
  box-shadow: inset 0 0 0 1px rgba(91, 213, 138, .18);
}

.transcript-inline-modes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}

.transcript-inline-modes button {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 26px;
  padding: 4px 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  border-radius: 5px;
}

.transcript-inline-modes button.active {
  border-color: var(--accent-d);
  background: #06110c;
  color: var(--lcd);
}

.transcript-inline-body mark {
  background: rgba(91, 213, 138, .22);
  color: var(--lcd);
  border-radius: 3px;
  padding: 0 1px;
}

.transcript-inline-audio audio {
  width: 100%;
  display: block;
  max-height: 34px;
}

.audio-inline-text {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  border: 1px solid #11191d;
  border-radius: 8px;
  background: #050607;
  padding: 10px;
  min-width: 0;
}

.audio-inline-text-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-inline-text-head strong {
  font-size: 12px;
}

.audio-inline-text-head span {
  color: var(--muted);
  font-size: 11px;
}

.audio-inline-text-head .icon-btn {
  margin-left: auto;
}

.audio-inline-text-body {
  max-height: 96px;
  overflow: auto;
  color: var(--muted);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.action-palette {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .68);
}

.action-palette-card {
  width: min(360px, 100%);
  max-height: min(520px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--accent-d);
  border-radius: 10px;
  background: #090d0f;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .52), inset 0 0 0 1px rgba(91, 213, 138, .12);
  padding: 10px;
}

.action-palette-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid #11191d;
}

.action-palette-head strong {
  font-size: 13px;
  font-weight: 700;
}

.action-palette-head .icon-btn {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.action-palette-head .icon-btn:hover:not(:disabled),
.action-palette-head .icon-btn:focus-visible {
  border-color: transparent;
  background: #11191d;
  outline: none;
}

.action-palette-list {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.action-palette-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  text-align: left;
  border: 1px solid #11191d;
  border-radius: 7px;
  background: #050708;
}

.action-palette-list button svg {
  width: 15px;
  height: 15px;
  justify-self: center;
  fill: currentColor;
  grid-column: 2;
  grid-row: 1;
}

.action-palette-list button img {
  width: 16px;
  height: 16px;
  justify-self: center;
  object-fit: contain;
  border-radius: 4px;
  grid-column: 2;
  grid-row: 1;
}

.action-palette-list button span {
  overflow-wrap: anywhere;
  grid-column: 1;
  grid-row: 1;
}

.action-palette-info {
  display: grid;
  gap: 3px;
  min-height: 38px;
  padding: 8px 9px;
  border: 1px solid #11191d;
  border-radius: 7px;
  background: #050708;
}

.action-palette-info span {
  color: var(--faint);
  font-size: 10px;
}

.action-palette-info strong {
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.storage-ledger-card {
  width: min(430px, 100%);
}

.storage-ledger-list {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.storage-ledger-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 7px 7px 9px;
  border: 1px solid #11191d;
  border-radius: 8px;
  background: #050708;
}

.storage-ledger-type {
  justify-self: start;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  text-transform: lowercase;
}

.storage-ledger-item[data-type="text"] .storage-ledger-type,
.storage-ledger-item[data-type="transcript"] .storage-ledger-type { color: #9fd4ff; }
.storage-ledger-item[data-type="audio"] .storage-ledger-type { color: #a8e889; }
.storage-ledger-item[data-type="model"] .storage-ledger-type { color: #ffd36f; }
.storage-ledger-item[data-type="activity"] .storage-ledger-type { color: #c4b5fd; }

.storage-ledger-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.storage-ledger-main strong,
.storage-ledger-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storage-ledger-main strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.storage-ledger-main span {
  color: var(--faint);
  font-size: 10px;
}

.storage-ledger-score {
  justify-self: end;
  min-width: 42px;
  padding: 3px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--lcd);
  font-size: 10px;
  line-height: 1;
  text-align: right;
}

.storage-ledger-item .icon-btn {
  width: 28px;
  height: 28px;
  border-color: var(--line);
  background: #090d0f;
}

.storage-ledger-item .icon-btn svg {
  width: 14px;
  height: 14px;
}

.storage-ledger-summary {
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid #11191d;
  border-radius: 8px;
  background: #050708;
  color: var(--muted);
  font-size: 12px;
}

.tray-storage-ledger {
  padding-top: 0;
}

.tray-storage-ledger .storage-ledger-item {
  background: #070a0c;
}

.tray-help-card {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid #11191d;
  border-radius: 8px;
  background: #050708;
  color: var(--muted);
}

.tray-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tray-help-head strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.tray-help-head .icon-btn {
  width: 26px;
  height: 26px;
  border-color: var(--line);
  background: #090d0f;
}

.tray-help-head .icon-btn svg {
  width: 13px;
  height: 13px;
}

.tray-help-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.search-options-card {
  width: min(360px, 100%);
}

.search-options-list {
  grid-template-columns: 1fr 1fr;
}

.search-options-list .action-palette-info {
  grid-column: 1 / -1;
}

.search-option-row {
  min-height: 40px;
}

.search-option-row[aria-pressed="true"],
.search-option-row.active {
  border-color: var(--accent-d);
  background: #06110c;
  color: var(--lcd);
  box-shadow: inset 0 0 0 1px rgba(91, 213, 138, .1);
}

.empty {
  color: var(--muted);
  font-size: 13px;
  padding: 12px 2px;
}

/* Chunk-mode setting control */
.chunk-mode summary .chunk-mode-tag {
  color: var(--muted);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
}

.chunk-mode-body {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.chunk-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.chunk-mode-body input[type="number"] {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  width: 120px;
}

.chunk-mode-body input[type="number"]:disabled {
  opacity: .45;
}

.chunk-mode-hint {
  margin-top: 0;
}

/* Optimistic-row status chips */
.item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.status-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  color: var(--muted);
  white-space: nowrap;
}
button.status-chip {
  font-family: inherit;
  cursor: pointer;
}
button.status-chip:focus-visible {
  outline: 2px solid var(--lcd);
  outline-offset: 2px;
}

.status-chip.status-recording { color: #ff9bad; border-color: #5c2030; background: #1a060c; }
.status-chip.status-recorded { color: var(--warn); border-color: #5c491c; background: #16120a; }
.status-chip.status-transcribing { color: var(--accent); border-color: #245b55; background: #061716; }
.status-chip.status-done { color: var(--ok); border-color: #234a2b; background: #071609; }
.status-chip.status-error { color: var(--bad); border-color: #5c2030; background: #1a060c; }
.status-chip.status-interrupted { color: var(--muted); }
.status-chip.status-waiting-model { color: var(--warn); border-color: #5c491c; background: #16120a; }

.chip-spinner {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: chip-spin 700ms linear infinite;
}

@keyframes chip-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .chip-spinner { animation: none; opacity: .6; }
}

.storage-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.storage-actions .icon-btn {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--text);
}

.storage-actions .icon-btn:hover:not(:disabled),
.storage-actions .icon-btn:focus-visible {
  border-color: var(--accent-d);
  color: var(--lcd);
  outline: none;
}

.storage-actions .icon-btn.danger {
  border-color: rgba(255, 91, 91, .36);
  color: var(--bad);
}

footer {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  body { padding: 16px; }
  .topbar {
    display: grid;
    grid-template-columns: 34px 34px minmax(0, 1fr) 34px 34px;
    gap: 7px;
    padding: 8px;
  }
  .lcd {
    flex-basis: auto;
    padding: 7px 9px;
    font-size: 11px;
    min-height: 34px;
  }
  .badges { justify-content: flex-start; }
  .inputrow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bigbtn { min-height: 96px; padding: 40px 8px 12px; }
  .bigbtn strong { font-size: 13px; }
  .bigbtn span { display: none; }
  .mic-detail { grid-template-columns: 1fr; }
  #transcript { min-height: 300px; }
  .bar { grid-template-columns: 1fr; }
  .actions { justify-content: flex-start; }
  .controls { grid-template-columns: 1fr; }
  .model-rail-wrap { overflow: hidden; }
  .runner-grid { display: grid; grid-template-columns: 1fr; }
  .runner-sliders { min-width: 0; }
  .runner-line { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; }
  .runner-line[data-slider="backend"] { grid-template-columns: 68px minmax(0, 1fr); }
  .runner-line[data-slider="backend"] .badge-lit { grid-column: 2; justify-self: start; }
  .runner-line .cap { min-width: 0; }
  .seg-toggle { max-width: 100%; overflow-x: auto; }
  .runner-aside { min-width: 0; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-hello {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }
  .intro-hello-title {
    font-size: 15px;
  }
  .intro-hello-detail {
    display: none;
  }
  .intro-hello-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .intro-hello-fact {
    padding: 2px 5px;
    gap: 5px;
  }
  .storage-head,
  .tray-toolbar,
  .storage-item { grid-template-columns: 1fr; }
  .tray-toolbar.text-active {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
  }
  .tray-toolbar.text-active input {
    min-width: 0;
  }
  .storage-item.selectable {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .storage-item.selectable > .item-meta,
  .storage-item.selectable > .storage-actions,
  .storage-item.selectable > button {
    grid-column: 2;
  }
  .storage-item.selectable audio {
    max-width: 100%;
  }
  .tabs {
    gap: 6px;
  }
  .tabs .tab:not([data-tray-tab="models"]):not([data-tray-tab="storage"]):not([data-tray-tab="settings"]) {
    justify-content: center;
    gap: 0;
    width: 34px;
    min-height: 34px;
    padding: 0;
    font-size: 0;
    overflow: hidden;
  }
  .tabs .tab:not([data-tray-tab="models"]):not([data-tray-tab="storage"]):not([data-tray-tab="settings"]) svg {
    width: 15px;
    height: 15px;
  }
  .storage-quota { text-align: left; }
}

/* Dev tray cleanup overrides */
.help-panel {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: start center;
  padding: 76px 14px 14px;
  background: rgba(0, 0, 0, .68);
}

.help-panel[hidden] { display: none; }

.help-card {
  width: min(520px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #090b0d;
  padding: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}

.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.help-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.help-markdown {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.help-markdown h2,
.help-markdown p,
.help-markdown ul {
  margin: 0;
}

.help-markdown h2 {
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.help-markdown ul {
  padding-left: 18px;
}

#settingsTray {
  gap: 8px;
}

#settingsTray > .controls,
#settingsTray > details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050708;
  padding: 9px;
}

#settingsTray > .controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

#settingsTray .mic-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

#settingsTray .runner-grid,
#settingsTray .runner-grid.compact {
  display: grid;
  gap: 8px;
}

#settingsTray .runner-sliders,
#settingsTray .runner-aside {
  min-width: 0;
  width: 100%;
}

#settingsTray .runner-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 7px;
}

#settingsTray .control,
#settingsTray .runner-line,
#settingsTray .audioproc {
  min-width: 0;
  padding: 8px;
  border: 1px solid #11191d;
  border-radius: 7px;
  background: #070a0c;
}

#settingsTray .control {
  display: grid;
  gap: 5px;
}

#settingsTray .control > span,
#settingsTray .runner-line .cap {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.1;
}

#settingsTray .control select,
#settingsTray .runner-select {
  width: 100%;
}

#settingsTray .runner-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

#settingsTray .runner-head {
  gap: 6px;
  padding-bottom: 2px;
}

#settingsTray .chunk-mode summary {
  min-height: 26px;
  color: var(--text);
  padding: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
}

#settingsTray .chunk-mode summary::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  opacity: .92;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 104a24 24 0 0 1 24-24h232a80 80 0 0 1 152 0h80a24 24 0 0 1 0 48h-80a80 80 0 0 1-152 0H24a24 24 0 0 1-24-24zm304 0a32 32 0 1 0 64 0 32 32 0 0 0-64 0zM0 256a24 24 0 0 1 24-24h80a80 80 0 0 1 152 0h232a24 24 0 0 1 0 48H256a80 80 0 0 1-152 0H24a24 24 0 0 1-24-24zm152 0a32 32 0 1 0 64 0 32 32 0 0 0-64 0zM0 408a24 24 0 0 1 24-24h232a80 80 0 0 1 152 0h80a24 24 0 0 1 0 48h-80a80 80 0 0 1-152 0H24a24 24 0 0 1-24-24zm304 0a32 32 0 1 0 64 0 32 32 0 0 0-64 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 104a24 24 0 0 1 24-24h232a80 80 0 0 1 152 0h80a24 24 0 0 1 0 48h-80a80 80 0 0 1-152 0H24a24 24 0 0 1-24-24zm304 0a32 32 0 1 0 64 0 32 32 0 0 0-64 0zM0 256a24 24 0 0 1 24-24h80a80 80 0 0 1 152 0h232a24 24 0 0 1 0 48H256a80 80 0 0 1-152 0H24a24 24 0 0 1-24-24zm152 0a32 32 0 1 0 64 0 32 32 0 0 0-64 0zM0 408a24 24 0 0 1 24-24h232a80 80 0 0 1 152 0h80a24 24 0 0 1 0 48h-80a80 80 0 0 1-152 0H24a24 24 0 0 1-24-24zm304 0a32 32 0 1 0 64 0 32 32 0 0 0-64 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#settingsTray .chunk-mode summary::after {
  content: "";
  width: 26px;
  height: 26px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    var(--panel-2)
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%238a968f' d='M239 352 111 224a24 24 0 1 1 34-34l111 111 111-111a24 24 0 0 1 34 34L273 352a24 24 0 0 1-34 0z'/%3E%3C/svg%3E")
    center / 14px 14px no-repeat;
}

#settingsTray .settings-collapse {
  width: 26px;
  height: 26px;
  margin-left: auto;
}

#settingsTray .section-collapsed > :not(.runner-head) {
  display: none;
}

#settingsTray .runner-head-title {
  font-size: 13px;
}

#settingsTray .runner-head-hint {
  font-size: 10px;
  margin-left: auto;
}

#settingsTray .runner-line .cap {
  min-width: 0;
}

#settingsTray .chunk-mode-body {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

#settingsTray .chunk-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid #11191d;
  border-radius: 7px;
  background: #070a0c;
}

#settingsTray .chunk-mode-row .mic-toggle {
  justify-content: center;
  min-width: 0;
}

#settingsTray .chunk-mode-hint {
  color: var(--faint);
  font-size: 11px;
}

#settingsTray .deck-btn {
  min-height: 31px;
  padding: 6px 10px;
}

#settingsTray .audioproc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#settingsTray .rocker {
  gap: 3px;
  min-width: 0;
  justify-content: center;
  padding: 6px 4px;
  border: 1px solid #11191d;
  border-radius: 6px;
  background: #050708;
}

#settingsTray .rocker .sw {
  width: 40px;
  height: 22px;
}

#settingsTray .rocker .sw::before {
  width: 18px;
  height: 18px;
}

#settingsTray .rocker:has(input:checked) .sw::before {
  left: 20px;
}