/* Silence Cutter — Application Stylesheet
 * Phase 2C-2B: Extracted from index.html inline <style> blocks.
 *
 * Previously: two inline <style> blocks in index.html
 *   Block 1 (lines 16–411): main application stylesheet
 *   Block 2 (lines 418–554, id="v8-patch"): v8 design refinements
 * Now: single external stylesheet for CSP compliance (style-src 'self').
 *
 * IMPORTANT: Block 2 (v8-patch) must follow Block 1 to preserve cascade order.
 * @font-face paths (./fonts/) remain correct — styles.css is in the same
 * app/ directory as index.html, so relative paths resolve identically.
 */

/* ════════════════════════════════════════════════════════════════
   BLOCK 1 — MAIN APPLICATION STYLESHEET (verbatim from index.html)
   ════════════════════════════════════════════════════════════════ */

/* Phase 2C-2A: Local font hosting — Google Fonts @import removed.
   IBM Plex Mono and IBM Plex Sans are now served from ./fonts/.
   Google Fonts CSP allowances (fonts.googleapis.com, fonts.gstatic.com)
   remain in _headers temporarily; removal is reserved for Phase 2C-2D. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;font-display:swap;src:url('./fonts/ibm-plex-sans-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
:root{
  --bg:#0c0c0c;--bg1:#141414;--bg2:#1c1c1c;--bg3:#262626;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.13);
  --text:#e8e8e8;--text2:#888;--text3:#4e4e4e;
  --accent:#e8ff47;--accent-dim:rgba(232,255,71,0.11);--accent-dim2:rgba(232,255,71,0.05);
  --red:#ff4f4f;--red-dim:rgba(255,79,79,0.11);
  --green:#4fff9f;--green-dim:rgba(79,255,159,0.09);
  --blue:#5bc0ff;
  --orange:#ffad5b;
  --mono:'IBM Plex Mono',monospace;--sans:'IBM Plex Sans',sans-serif;
  --radius:6px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;}
.app{display:grid;grid-template-columns:340px 1fr;min-height:100vh;}
.sidebar{background:var(--bg1);border-right:1px solid var(--border);padding:22px 18px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.main{padding:24px;display:flex;flex-direction:column;gap:16px;}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:2px;}
.logo{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.logo-mark{width:30px;height:30px;background:var(--accent);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-mark svg{width:15px;height:15px;}
.logo-title{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text);}
.logo-sub{font-size:10px;color:var(--text3);font-family:var(--mono);margin-top:1px;}
.sec-label{font-family:var(--mono);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;}
.divider{height:1px;background:var(--border);}
/* PRESETS */
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.preset-btn{padding:8px 10px;border:1px solid var(--border2);background:var(--bg2);border-radius:var(--radius);cursor:pointer;transition:all 0.15s;text-align:left;width:100%;}
.preset-btn:hover{background:var(--bg3);}
.preset-btn.active{border-color:var(--accent);background:var(--accent-dim);}
.pb-name{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--text);}
.pb-name.active-text{color:var(--accent);}
.pb-desc{font-size:10px;color:var(--text3);margin-top:2px;}
/* CUSTOM PRESETS */
.my-presets-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
.save-preset-btn{font-family:var(--mono);font-size:10px;color:var(--accent);background:none;border:1px solid rgba(232,255,71,0.25);border-radius:4px;padding:3px 8px;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.save-preset-btn:hover{background:var(--accent-dim);}
.save-preset-form{display:flex;gap:5px;margin-bottom:7px;}
.preset-name-input{flex:1;font-family:var(--mono);font-size:11px;background:var(--bg2);border:1px solid var(--border2);color:var(--text);border-radius:4px;padding:5px 8px;outline:none;}
.preset-name-input:focus{border-color:var(--accent);}
.psf-confirm{font-family:var(--mono);font-size:10px;background:var(--accent);color:#0c0c0c;border:none;border-radius:4px;padding:5px 9px;cursor:pointer;font-weight:500;}
.psf-cancel{font-family:var(--mono);font-size:10px;background:none;color:var(--text3);border:1px solid var(--border2);border-radius:4px;padding:5px 8px;cursor:pointer;}
.custom-preset-list{display:flex;flex-direction:column;gap:4px;}
.cpi{display:flex;align-items:center;gap:6px;padding:7px 9px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);transition:all 0.15s;}
.cpi:hover{border-color:var(--border2);}
.cpi.active{border-color:var(--accent);background:var(--accent-dim);}
.cpi-name{flex:1;font-family:var(--mono);font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
.cpi-name:hover{color:var(--text);}
.cpi-name.active-text{color:var(--accent);}
.cpi-rename-input{flex:1;font-family:var(--mono);font-size:11px;background:var(--bg3);border:1px solid var(--accent);color:var(--text);border-radius:3px;padding:2px 6px;outline:none;}
.cpi-actions{display:flex;gap:3px;flex-shrink:0;}
.cpi-btn{font-family:var(--mono);font-size:9px;background:none;border:1px solid var(--border2);color:var(--text3);border-radius:3px;padding:2px 6px;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.cpi-btn:hover{background:var(--bg3);color:var(--text);}
.cpi-btn.del:hover{background:var(--red-dim);color:var(--red);border-color:rgba(255,79,79,0.3);}
.cpi-btn.ok{background:var(--accent-dim);color:var(--accent);border-color:rgba(232,255,71,0.25);}
/* ── PRESET SAVE (FLOPPY) BUTTON ── */
.cpi-save-btn{display:inline-flex;align-items:center;justify-content:center;padding:3px 5px;}
.cpi-save-btn:disabled{opacity:0.28;cursor:default;pointer-events:none;}
.cpi-save-btn.has-changes{color:var(--accent);border-color:rgba(232,255,71,0.45);}
.cpi-save-btn.has-changes:hover{background:var(--accent-dim);}
.cpi-save-btn.saved-flash{color:#5eead4;border-color:rgba(94,234,212,0.45);}
/* ── PRESET UNSAVED DOT ── */
.cpi-unsaved-dot{display:none;width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-right:1px;align-self:center;}
.no-custom-presets{font-size:11px;color:var(--text3);font-family:var(--mono);padding:8px 0;}
/* ── UNSAVED CHANGES DIALOG ── */
.ucd-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:9000;align-items:center;justify-content:center;}
.ucd-overlay.open{display:flex;}
.ucd-box{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:20px 22px 18px;max-width:340px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.6);}
.ucd-title{font-size:12px;font-weight:600;color:var(--text);margin:0 0 4px;}
.ucd-msg{font-size:11px;color:var(--text2);line-height:1.55;margin:0 0 16px;font-family:var(--mono);}
.ucd-msg strong{color:var(--accent);}
.ucd-actions{display:flex;flex-direction:column;gap:7px;}
.ucd-btn{font-family:var(--mono);font-size:11px;border-radius:5px;padding:7px 10px;cursor:pointer;transition:all 0.15s;border:1px solid var(--border2);text-align:left;background:var(--bg3);color:var(--text2);}
.ucd-btn:hover{background:var(--bg3);color:var(--text);}
.ucd-btn.save{background:var(--accent-dim);color:var(--accent);border-color:rgba(232,255,71,0.3);}
.ucd-btn.save:hover{background:rgba(232,255,71,0.18);}
.ucd-btn.discard{color:var(--text3);}
.ucd-btn.discard:hover{background:var(--red-dim);color:var(--red);border-color:rgba(255,79,79,0.25);}
.ucd-btn.cancel{border-color:var(--border2);}
.ucd-btn.cancel:hover{background:var(--bg3);color:var(--text);}
.ucd-btn.delete-confirm{background:var(--red-dim);color:var(--red);border-color:rgba(255,79,79,0.3);}
.ucd-btn.delete-confirm:hover{background:rgba(255,79,79,0.22);border-color:rgba(255,79,79,0.55);}
/* SETTINGS */
.setting{margin-bottom:13px;}
.setting:last-child{margin-bottom:0;}
.setting-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.setting-left{display:flex;align-items:center;gap:5px;}
.setting-name{font-size:12px;color:var(--text2);}
.setting-val{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:500;}
/* TOOLTIP */
.tip-wrap{position:relative;display:inline-flex;}
.tip-icon{width:13px;height:13px;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);font-size:8px;color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:help;font-family:var(--mono);flex-shrink:0;outline:none;}
.tip-icon:focus-visible{border-color:var(--accent);color:var(--accent);}
.tip-box{display:none;position:fixed;width:280px;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);overflow-y:auto;padding:11px 13px;background:var(--bg3);border:1px solid var(--border2);border-radius:7px;font-size:12px;color:#aaa;line-height:1.6;z-index:850;pointer-events:none;box-shadow:0 8px 28px rgba(0,0,0,0.72);word-break:normal;overflow-wrap:break-word;}
.tip-box strong{color:var(--text);font-weight:500;display:block;margin-bottom:5px;}
.tip-box em{color:var(--accent);font-style:normal;}
/* hover rule removed — JS manages show/hide for viewport-aware positioning */
input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:var(--bg3);border-radius:2px;outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;}
.range-hints{display:flex;justify-content:space-between;margin-top:3px;}
.rh{font-size:10px;color:var(--text3);font-family:var(--mono);}
/* TOGGLE */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;background:var(--bg2);border-radius:var(--radius);border:1px solid var(--border);}
.toggle-left{display:flex;align-items:center;gap:6px;}
.toggle-label{font-size:12px;color:var(--text2);}
.toggle{position:relative;width:32px;height:18px;cursor:pointer;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{position:absolute;inset:0;background:var(--bg3);border-radius:9px;border:1px solid var(--border2);transition:all 0.2s;}
.toggle input:checked + .toggle-track{background:var(--accent);border-color:var(--accent);}
.toggle-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--text3);transition:all 0.2s;}
.toggle input:checked ~ .toggle-thumb{left:16px;background:#0c0c0c;}
/* BITRATE */
.bitrate-group{display:flex;gap:5px;}
.br-btn{flex:1;padding:6px 0;font-family:var(--mono);font-size:11px;border:1px solid var(--border2);background:var(--bg2);color:var(--text2);border-radius:var(--radius);cursor:pointer;transition:all 0.15s;text-align:center;}
.br-btn:hover{background:var(--bg3);color:var(--text);}
.br-btn.active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);}
/* BUTTONS */
.preview-btn{width:100%;padding:10px;font-family:var(--mono);font-size:11px;font-weight:500;background:transparent;color:var(--text2);border:1px solid var(--border2);border-radius:var(--radius);cursor:pointer;transition:all 0.15s;letter-spacing:0.04em;}
.preview-btn:hover{background:var(--bg2);color:var(--text);}
.preview-btn:disabled{opacity:0.3;cursor:not-allowed;}
.process-btn{width:100%;padding:11px;font-family:var(--mono);font-size:11px;font-weight:500;background:var(--accent);color:#0c0c0c;border:none;border-radius:var(--radius);cursor:pointer;transition:opacity 0.15s;letter-spacing:0.05em;}
.process-btn:hover{opacity:0.9;}
.process-btn:disabled{opacity:0.3;cursor:not-allowed;}
/* DROP ZONE */
.dropzone{border:1px dashed var(--border2);border-radius:10px;padding:26px 24px;text-align:center;cursor:pointer;transition:all 0.15s;background:var(--bg1);}
.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:var(--accent-dim2);}
.dz-icon{width:36px;height:36px;border-radius:50%;background:var(--bg2);border:1px solid var(--border2);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;}
.dz-title{font-size:14px;font-weight:500;color:var(--text);margin-bottom:3px;}
.dz-sub{font-size:12px;color:var(--text3);}
/* SUMMARY BAR */
.summary-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.stat-card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;}
.stat-label{font-size:10px;color:var(--text3);margin-bottom:4px;font-family:var(--mono);}
.stat-value{font-family:var(--mono);font-size:17px;font-weight:500;color:var(--text);}
.stat-value.accent{color:var(--accent);}
/* QUEUE */
.queue-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
.clear-btn{font-size:11px;color:var(--text3);background:none;border:none;cursor:pointer;font-family:var(--mono);padding:3px 7px;border-radius:4px;transition:all 0.15s;}
.clear-btn:hover{color:var(--red);background:var(--red-dim);}
/* GLOBAL PLAYER BAR */
.global-player-bar{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--bg1);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;}
.gp-btn{height:24px;min-width:24px;border-radius:4px;background:var(--bg2);border:1px solid var(--border2);color:var(--text2);font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;flex-shrink:0;padding:0 6px;gap:4px;font-family:var(--mono);}
.gp-btn:hover{background:var(--bg3);color:var(--text);}
.gp-btn.playing{background:var(--accent-dim);border-color:rgba(232,255,71,0.35);color:var(--accent);}
.gp-now-playing{flex:1;font-family:var(--mono);font-size:10px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
.gp-now-playing.active{color:var(--text2);}
.speed-group{display:flex;gap:2px;}
.speed-btn{font-family:var(--mono);font-size:9px;padding:0 5px;height:20px;border-radius:3px;background:var(--bg2);border:1px solid var(--border2);color:var(--text3);cursor:pointer;transition:all 0.15s;}
.speed-btn:hover{background:var(--bg3);color:var(--text);}
.speed-btn.active{background:var(--accent-dim);border-color:rgba(232,255,71,0.3);color:var(--accent);}
/* QUEUE ITEMS */
.queue-list{display:flex;flex-direction:column;gap:5px;min-height:40px;}
.queue-item{display:flex;flex-direction:column;background:var(--bg1);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color 0.15s,background 0.15s;user-select:none;}
.queue-item:hover{border-color:var(--border2);}
.queue-item.dragging{opacity:0.4;border-color:var(--accent);}
.queue-item.drag-over{border-color:var(--accent);background:var(--accent-dim2);}
.queue-item.qi-playing{border-color:rgba(232,255,71,0.4);background:var(--accent-dim2);}
/* QI TOP ROW */
.qi-top{display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:grab;}
.qi-top:active{cursor:grabbing;}
.qi-handle{display:flex;flex-direction:column;gap:3px;flex-shrink:0;}
.qi-handle span{display:block;width:13px;height:1.5px;background:var(--text3);border-radius:1px;}
.qi-index{font-family:var(--mono);font-size:10px;color:var(--text3);min-width:22px;flex-shrink:0;font-weight:500;}
.qi-playing .qi-index{color:var(--accent);}
.qi-info{flex:1;overflow:hidden;}
.qi-name{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qi-meta{font-family:var(--mono);font-size:10px;color:var(--text3);margin-top:1px;}
/* PER-ITEM PLAY BUTTON */
.qi-play-btn{width:26px;height:26px;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all 0.15s;font-size:9px;line-height:1;}
.qi-play-btn:hover{background:var(--bg2);color:var(--text);border-color:var(--border2);}
.qi-playing .qi-play-btn{background:var(--accent);color:#0c0c0c;border-color:var(--accent);}
/* STATUS BADGE */
.qi-status{font-family:var(--mono);font-size:10px;flex-shrink:0;padding:2px 6px;border-radius:3px;}
.qi-status.pending{color:var(--text3);background:var(--bg3);}
.qi-status.processing{color:var(--accent);background:var(--accent-dim);}
.qi-status.done{color:var(--green);background:var(--green-dim);}
.qi-status.error{color:var(--red);background:var(--red-dim);}
/* REMOVE */
.qi-remove{width:20px;height:20px;border-radius:4px;background:none;border:none;cursor:pointer;color:var(--text3);display:flex;align-items:center;justify-content:center;transition:all 0.15s;flex-shrink:0;font-size:15px;line-height:1;}
.qi-remove:hover{background:var(--red-dim);color:var(--red);}
/* PLAYER AREA */
.qi-player{border-top:1px solid var(--border);padding:8px 11px 12px;display:flex;flex-direction:column;gap:8px;}
/* WAVEFORM */
.qi-wave-wrap{position:relative;height:46px;border-radius:3px;overflow:hidden;background:var(--bg2);cursor:crosshair;user-select:none;}
.qi-wave-wrap:hover{box-shadow:0 0 0 1px rgba(232,255,71,0.2);}
.qi-waveform{width:100%;height:46px;display:block;pointer-events:none;}
/* PLAYER CONTROLS */
.qi-ctrl-row{display:flex;align-items:center;gap:5px;}
.qi-ctrl-btn{height:22px;min-width:22px;border-radius:4px;background:none;border:1px solid var(--border2);color:var(--text3);font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;flex-shrink:0;padding:0 4px;}
.qi-ctrl-btn:hover{background:var(--bg2);color:var(--text);}
.qi-ctrl-pp{background:var(--bg3);color:var(--text2);}
.qi-ctrl-pp:hover{background:var(--bg2);color:var(--text);}
.qi-skip-btn{font-family:var(--mono);font-size:9px;letter-spacing:-0.03em;padding:0 6px;}
.qi-time{font-family:var(--mono);font-size:10px;color:var(--text2);flex:1;text-align:center;}
.qi-kbd-hint{font-family:var(--mono);font-size:9px;color:var(--text3);white-space:nowrap;}
/* EMPTY QUEUE */
.empty-queue{text-align:center;padding:26px;color:var(--text3);font-size:12px;border:1px dashed var(--border);border-radius:var(--radius);}
/* PREVIEW PANEL */
.preview-panel{background:var(--bg1);border:1px solid var(--border2);border-radius:10px;padding:18px;}
.preview-title{font-family:var(--mono);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:12px;}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px;}
.pv-card{background:var(--bg2);border-radius:var(--radius);padding:9px 11px;}
.pv-label{font-size:10px;color:var(--text3);margin-bottom:3px;font-family:var(--mono);}
.pv-val{font-family:var(--mono);font-size:14px;font-weight:500;}
.pv-val.green{color:var(--green);}
.pv-val.orange{color:var(--orange);}
.pv-val.blue{color:var(--blue);}
.pv-val.accent{color:var(--accent);}
.pv-val.dim{color:var(--text2);}
.ratio-section{margin-bottom:10px;}
.ratio-label{font-size:10px;color:var(--text3);font-family:var(--mono);margin-bottom:5px;}
.preview-bar{height:24px;background:var(--bg2);border-radius:4px;overflow:hidden;display:flex;}
.pb-audio{background:var(--accent);opacity:0.65;height:100%;transition:width 0.5s;}
.pb-silence{background:var(--bg3);height:100%;transition:width 0.5s;}
.pb-hint{display:flex;gap:14px;margin-top:5px;}
.pb-hint-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text3);font-family:var(--mono);}
.pb-dot{width:8px;height:8px;border-radius:2px;}
.file-breakdown{border-top:1px solid var(--border);padding-top:10px;margin-top:10px;}
.fb-title{font-size:10px;color:var(--text3);font-family:var(--mono);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:7px;}
.fb-row{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid var(--border);}
.fb-row:last-child{border-bottom:none;}
.fb-num{font-family:var(--mono);font-size:10px;color:var(--text3);min-width:18px;}
.fb-name{flex:1;font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fb-segs{font-family:var(--mono);font-size:10px;color:var(--accent);min-width:48px;text-align:right;}
.fb-removed{font-family:var(--mono);font-size:10px;color:var(--orange);min-width:48px;text-align:right;}
.fb-dur{font-family:var(--mono);font-size:10px;color:var(--text3);min-width:42px;text-align:right;}
/* PROGRESS */
.progress-section{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:18px;}
.progress-title{font-family:var(--mono);font-size:11px;color:var(--text2);margin-bottom:12px;}
.file-progress{margin-bottom:9px;}
.fp-row{display:flex;justify-content:space-between;margin-bottom:4px;}
.fp-name{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72%;}
.fp-status{font-family:var(--mono);font-size:10px;color:var(--text3);}
.progress-track{height:2px;background:var(--bg3);border-radius:2px;overflow:hidden;}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width 0.25s;width:0%;}
.progress-fill.done{background:var(--green);}
.progress-fill.error{background:var(--red);}
.overall-progress{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.op-row{display:flex;justify-content:space-between;margin-bottom:5px;}
.op-label{font-family:var(--mono);font-size:10px;color:var(--text3);}
.op-pct{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--accent);}
.op-track{height:4px;background:var(--bg3);border-radius:3px;overflow:hidden;}
.op-fill{height:100%;background:var(--accent);border-radius:3px;transition:width 0.25s;width:0%;}
/* RESULTS */
.results-section{background:var(--bg1);border:1px solid var(--border2);border-radius:10px;padding:18px;}
.results-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.results-title{font-family:var(--mono);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;}
.stale-badge{font-family:var(--mono);font-size:10px;color:var(--orange);background:var(--orange-dim);border:1px solid rgba(255,173,91,0.25);border-radius:4px;padding:3px 9px;white-space:nowrap;}
.results-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px;}
.r-stat{background:var(--bg2);border-radius:var(--radius);padding:9px 11px;}
.r-stat-label{font-size:10px;color:var(--text3);margin-bottom:3px;}
.r-stat-val{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--text);}
/* FINAL OUTPUT PLAYER */
.final-player{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:12px 14px;margin-bottom:12px;}
.final-player.stale{border-color:rgba(255,173,91,0.3);opacity:0.6;}
.fp2-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.fp2-label{font-family:var(--mono);font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:0.08em;}
.fp2-filename{font-family:var(--mono);font-size:10px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%;text-align:right;}
.fp2-wave-wrap{height:56px;border-radius:4px;overflow:hidden;background:var(--bg3);cursor:crosshair;user-select:none;margin-bottom:9px;position:relative;}
.fp2-wave-wrap:hover{box-shadow:0 0 0 1px rgba(232,255,71,0.2);}
.fp2-waveform{width:100%;height:56px;display:block;pointer-events:none;}
.fp2-controls{display:flex;align-items:center;gap:9px;}
.fp2-play-btn{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#0c0c0c;border:none;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity 0.15s;}
.fp2-play-btn:hover{opacity:0.85;}
.fp2-skip{height:22px;padding:0 6px;font-family:var(--mono);font-size:9px;background:none;border:1px solid var(--border2);color:var(--text2);border-radius:4px;cursor:pointer;transition:all 0.15s;flex-shrink:0;}
.fp2-skip:hover{background:var(--bg3);color:var(--text);}
.fp2-time{font-family:var(--mono);font-size:10px;color:var(--text2);flex:1;text-align:center;}
.fp2-size{font-family:var(--mono);font-size:10px;color:var(--text3);}
/* tl-label, tl-list etc */
.tl-label{font-family:var(--mono);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px;}
.tl-list{display:flex;flex-direction:column;gap:3px;margin-bottom:12px;}
.tl-item{display:flex;align-items:center;gap:8px;font-size:11px;padding:5px 9px;background:var(--bg2);border-radius:4px;}
.tl-num{font-family:var(--mono);font-size:10px;color:var(--text3);min-width:18px;}
.tl-name{flex:1;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tl-segs{font-family:var(--mono);font-size:10px;color:var(--accent);}
.tl-dur{font-family:var(--mono);font-size:10px;color:var(--text3);}
.dl-btn{width:100%;padding:12px;font-family:var(--mono);font-size:12px;font-weight:500;background:var(--accent);color:#0c0c0c;border:none;border-radius:var(--radius);cursor:pointer;letter-spacing:0.04em;transition:opacity 0.15s;}
.dl-btn:hover{opacity:0.9;}
.dl-note{font-size:10px;color:var(--text3);text-align:center;margin-top:6px;font-family:var(--mono);}
.error-msg{padding:9px 11px;background:var(--red-dim);border:1px solid rgba(255,79,79,0.2);border-radius:var(--radius);color:var(--red);font-size:11px;font-family:var(--mono);}
/* TAB BAR */
.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:8px;}
.tab-btn{flex:1;padding:8px 12px;font-family:var(--mono);font-size:11px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--text3);cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:6px;}
.tab-icon{width:14px;height:14px;flex-shrink:0;opacity:0.55;transition:opacity 0.15s;}
.tab-btn.active .tab-icon{opacity:1;}
.tab-btn:hover .tab-icon{opacity:0.8;}
/* Presets section label with icon */
.sec-label-row{display:flex;align-items:center;gap:6px;}
.sec-label-icon{width:14px;height:14px;flex-shrink:0;color:var(--text3);}
.my-presets-header .sec-label-icon{color:var(--text3);}
.tab-btn:hover{color:var(--text2);}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
.tab-count{font-size:10px;padding:1px 5px;border-radius:10px;background:var(--bg3);color:var(--text3);transition:all 0.15s;}
.tab-btn.active .tab-count{background:var(--accent-dim);color:var(--accent);}
/* SAVE BUTTON on queue items */
.qi-save-btn{width:22px;height:22px;border-radius:4px;background:none;border:1px solid var(--border2);color:var(--text3);font-size:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all 0.15s;}
.qi-save-btn:hover{background:var(--accent-dim);color:var(--accent);border-color:rgba(232,255,71,0.35);}
/* LIBRARY */
.lib-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.lib-search{flex:1;font-family:var(--sans);font-size:12px;background:var(--bg2);border:1px solid var(--border2);color:var(--text);border-radius:var(--radius);padding:7px 10px;outline:none;transition:border-color 0.15s;}
.lib-search:focus{border-color:var(--accent);}
.lib-storage{font-family:var(--mono);font-size:10px;color:var(--text3);white-space:nowrap;flex-shrink:0;}
.lib-selection-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--accent-dim);border:1px solid rgba(232,255,71,0.2);border-radius:var(--radius);margin-bottom:8px;}
.lib-sel-info{font-family:var(--mono);font-size:11px;color:var(--accent);flex:1;}
.lib-sel-btn{font-family:var(--mono);font-size:10px;padding:4px 10px;border-radius:4px;cursor:pointer;border:none;transition:all 0.15s;}
.lib-sel-add{background:var(--accent);color:#0c0c0c;}
.lib-sel-add:hover{opacity:0.85;}
.lib-sel-clear{background:none;color:var(--text3);border:1px solid var(--border2);}
.lib-sel-clear:hover{background:var(--bg3);color:var(--text);}
.lib-list{display:flex;flex-direction:column;gap:4px;}
.lib-item{display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--bg1);border:1px solid var(--border);border-radius:var(--radius);transition:all 0.15s;}
.lib-item:hover{border-color:var(--border2);}
.lib-item.lib-selected{border-color:rgba(232,255,71,0.3);background:var(--accent-dim2);}
.lib-item.lib-playing{border-color:rgba(232,255,71,0.4);}
.lib-checkbox{width:14px;height:14px;cursor:pointer;flex-shrink:0;accent-color:var(--accent);}
.lib-play-btn{width:26px;height:26px;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:9px;transition:all 0.15s;}
.lib-play-btn:hover{background:var(--bg2);color:var(--text);}
.lib-playing .lib-play-btn{background:var(--accent);color:#0c0c0c;border-color:var(--accent);}
.lib-info{flex:1;overflow:hidden;}
.lib-name{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lib-meta{font-family:var(--mono);font-size:10px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lib-rename-input{width:100%;font-family:var(--sans);font-size:12px;background:var(--bg3);border:1px solid var(--accent);color:var(--text);border-radius:3px;padding:2px 6px;outline:none;}
.lib-actions{display:flex;gap:4px;flex-shrink:0;}
.lib-btn{font-family:var(--mono);font-size:9px;background:none;border:1px solid var(--border2);color:var(--text3);border-radius:3px;padding:3px 7px;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.lib-btn:hover{background:var(--bg3);color:var(--text);}
.lib-add-btn:hover{background:var(--accent-dim);color:var(--accent);border-color:rgba(232,255,71,0.3);}
.lib-del-btn:hover,.lib-del-btn.confirming{background:var(--red-dim);color:var(--red);border-color:rgba(255,79,79,0.3);}
.lib-rename-btn.ok{background:var(--accent-dim);color:var(--accent);border-color:rgba(232,255,71,0.25);}
.lib-empty{text-align:center;padding:32px 16px;color:var(--text3);font-size:12px;line-height:1.8;}
.lib-empty strong{display:block;font-size:13px;color:var(--text2);margin-bottom:5px;}
.lib-idb-warning{padding:10px 12px;background:var(--orange-dim);border:1px solid rgba(255,173,91,0.25);border-radius:var(--radius);color:var(--orange);font-size:11px;font-family:var(--mono);}
.hidden{display:none!important;}
/* HEALTH CHECK MODAL */
.hc-trigger{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;color:var(--text3);background:none;border:1px solid var(--border);border-radius:4px;padding:5px 9px;cursor:pointer;transition:all 0.15s;width:100%;}
.hc-trigger:hover{background:var(--bg2);color:var(--text2);border-color:var(--border2);}
.hc-dot{width:6px;height:6px;border-radius:50%;background:var(--text3);flex-shrink:0;transition:background 0.3s;}
.hc-dot.ok{background:var(--green);}
.hc-dot.warn{background:var(--orange);}
.hc-dot.fail{background:var(--red);}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.72);z-index:900;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-box{background:var(--bg1);border:1px solid var(--border2);border-radius:12px;padding:22px 24px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.modal-title{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--text);}
.modal-close{background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;line-height:1;padding:2px 5px;border-radius:4px;transition:all 0.15s;}
.modal-close:hover{background:var(--bg3);color:var(--text);}
.hc-list{display:flex;flex-direction:column;gap:7px;}
.hc-item{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;background:var(--bg2);border-radius:6px;}
.hc-icon{font-size:14px;flex-shrink:0;margin-top:1px;}
.hc-info{flex:1;}
.hc-label{font-family:var(--mono);font-size:11px;color:var(--text);margin-bottom:2px;}
.hc-detail{font-size:10px;color:var(--text3);}
.hc-status{font-family:var(--mono);font-size:10px;flex-shrink:0;padding:2px 7px;border-radius:3px;align-self:center;}
.hc-status.ok{color:var(--green);background:var(--green-dim);}
.hc-status.warn{color:var(--orange);background:rgba(255,173,91,0.09);}
.hc-status.fail{color:var(--red);background:var(--red-dim);}
.hc-refresh{width:100%;margin-top:14px;font-family:var(--mono);font-size:11px;padding:8px;background:var(--bg2);border:1px solid var(--border2);color:var(--text2);border-radius:6px;cursor:pointer;transition:all 0.15s;}
.hc-refresh:hover{background:var(--bg3);color:var(--text);}
/* LIB BACKUP BUTTONS */
.lib-backup-btn{font-family:var(--mono);font-size:10px;color:var(--text3);background:none;border:1px solid var(--border2);border-radius:4px;padding:5px 8px;cursor:pointer;transition:all 0.15s;white-space:nowrap;flex-shrink:0;}
.lib-backup-btn:hover{background:var(--bg3);color:var(--text);}
.lib-backup-btn.import:hover{background:var(--accent-dim);color:var(--accent);border-color:rgba(232,255,71,0.3);}
/* INSTALL BANNER — Phase 2C-2B: positioning absorbed from inline style */
.pwa-install-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--accent-dim2);border:1px solid rgba(232,255,71,0.12);border-radius:var(--radius);font-family:var(--mono);font-size:10px;color:var(--text3);gap:10px;position:fixed;bottom:14px;right:14px;z-index:800;max-width:320px;}
.pwa-install-btn{font-family:var(--mono);font-size:10px;padding:4px 10px;background:var(--accent);color:#0c0c0c;border:none;border-radius:3px;cursor:pointer;font-weight:500;flex-shrink:0;}
/* SW UPDATE BAR — Phase 2C-2D: update notification (network-first lifecycle)
   Justification: CSP style-src-attr 'none' prohibits all inline style= attributes.
   All .sw-update-bar styles must live in this external stylesheet.
   Base rule: display:none. .sw-update-bar:not(.hidden) enables flex when bar is shown.
   Positioned bottom-left to avoid overlap with .pwa-install-bar (bottom-right). */
.sw-update-bar{display:none;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);font-family:var(--mono);font-size:10px;color:var(--text2);gap:10px;position:fixed;bottom:14px;left:14px;z-index:801;max-width:280px;}
.sw-update-bar:not(.hidden){display:flex;}
.sw-update-btn{font-family:var(--mono);font-size:10px;padding:4px 10px;background:var(--accent);color:#0c0c0c;border:none;border-radius:3px;cursor:pointer;font-weight:500;flex-shrink:0;}
/* ── FAVORITES FILTER BUTTON ── */
.lib-fav-filter{font-family:var(--mono);font-size:10px;color:var(--text3);background:none;border:1px solid var(--border2);border-radius:4px;padding:5px 8px;cursor:pointer;transition:all 0.15s;white-space:nowrap;flex-shrink:0;}
.lib-fav-filter:hover{background:var(--bg3);color:var(--text);}
.lib-fav-filter.active{background:var(--accent-dim);color:var(--accent);border-color:rgba(232,255,71,0.3);}
/* ── STAR BUTTON ── */
.lib-star-btn{font-size:13px;background:none;border:none;cursor:pointer;flex-shrink:0;padding:2px 3px;opacity:0.55;transition:opacity 0.15s;line-height:1;}
.lib-star-btn:hover{opacity:0.65;}
.lib-star-btn.starred{opacity:1;color:#f5c842;}
/* ── EXPORT HISTORY ── */
.hist-item{display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--bg1);border:1px solid var(--border);border-radius:var(--radius);}
.hist-name{flex:1;font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);}
.hist-meta{font-family:var(--mono);font-size:10px;color:var(--text3);white-space:nowrap;flex-shrink:0;}
.hist-dl-btn{font-family:var(--mono);font-size:9px;background:none;border:1px solid var(--border2);color:var(--text3);border-radius:3px;padding:4px 8px;cursor:pointer;transition:all 0.15s;flex-shrink:0;}
.hist-dl-btn:hover{background:var(--accent-dim);color:var(--accent);border-color:rgba(232,255,71,0.3);}
.hist-empty{text-align:center;padding:28px;color:var(--text3);font-size:12px;line-height:1.8;}
.hist-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.hist-clear-btn{font-family:var(--mono);font-size:10px;color:var(--text3);background:none;border:1px solid var(--border2);border-radius:4px;padding:3px 9px;cursor:pointer;transition:all 0.15s;}
.hist-clear-btn:hover{color:var(--red);background:var(--red-dim);border-color:rgba(255,79,79,0.3);}
.hist-list{display:flex;flex-direction:column;gap:4px;}

/* ════════════════════════════════════════════════════════════════
   BLOCK 2 — v8 DESIGN PATCH (verbatim from <style id="v8-patch">)
   Must follow Block 1 to preserve cascade and token override order.
   ════════════════════════════════════════════════════════════════ */

/* ── TOKEN ADDITIONS ─────────────────────────────────────────── */
:root {
  --radius-sm: 4px;   /* small chrome: badges, action btns, icon btns */
  --stat-size: 16px;  /* unified stat card value size                  */
}

/* ── P1-A: RAISE SUB-READABLE 9px TEXT ──────────────────────── */
/* Preset action buttons (⧉ duplicate, × delete, rename confirm) */
.cpi-btn { font-size: 11px; }

/* Queue item skip / keyboard hint labels */
.qi-skip-btn { font-size: 11px; }
.qi-kbd-hint { font-size: 10px; }

/* Audio Library action buttons (Add to Queue, Rename, Delete) */
.lib-btn { font-size: 11px; padding: 3px 9px; }

/* Final-player skip buttons (−5s / +5s) */
.fp2-skip { font-size: 11px; height: 24px; }

/* History tab download button */
.hist-dl-btn { font-size: 11px; padding: 5px 10px; }

/* Queue item play-button icon (currently 9px, raises icon legibility) */
.qi-play-btn { font-size: 11px; }

/* ── P1-B: UNIFIED STAT CARD VALUE SIZES ────────────────────── */
/* Queue stats (was 17px) and Results stats (was 15px) → 16px each */
.stat-value  { font-size: var(--stat-size); }
.r-stat-val  { font-size: var(--stat-size); }

/* ── P1-C: TOKENIZE --radius-sm ─────────────────────────────── */
.cpi-btn        { border-radius: var(--radius-sm); }
.qi-status      { border-radius: var(--radius-sm); }
.lib-btn        { border-radius: var(--radius-sm); }
.lib-rename-input { border-radius: var(--radius-sm); }
.hc-status      { border-radius: var(--radius-sm); }
.stale-badge    { border-radius: var(--radius-sm); }
.tl-item        { border-radius: var(--radius-sm); }
.hist-dl-btn    { border-radius: var(--radius-sm); }

/* ── P2-A: UNIFIED PLAY BUTTON SIZE ─────────────────────────── */
/* Queue item play (was 26×26) → 28×28 to match final player */
.qi-play-btn { width: 28px; height: 28px; }

/* ── P2-B: RAISE SMALL TOUCH TARGETS ────────────────────────── */
/* Remove button (was 20×20) → 26×26 — safer tap area, same visual weight */
.qi-remove { width: 26px; height: 26px; font-size: 14px; }

/* Save (floppy) button (was 22×22) → 26×26 — matches remove */
.qi-save-btn { width: 26px; height: 26px; }

/* Queue control row buttons (was 22px height) → 24px */
.qi-ctrl-btn { height: 24px; min-width: 24px; }

/* ── P2-C: UNIFIED WAVEFORM BACKGROUNDS ─────────────────────── */
/* Final player waveform (was --bg3) → --bg2, matching queue waveform */
.fp2-wave-wrap { background: var(--bg2); }

/* ── P2-D: STRENGTHEN TAB BAR BORDER ────────────────────────── */
/* Was --border (0.07 alpha); raise to --border2 (0.13 alpha) */
.tab-bar { border-bottom: 1px solid var(--border2); }

/* ── P2-E: LIBRARY EMPTY STATE BORDER ───────────────────────── */
/* Matches .empty-queue dashed treatment for visual consistency */
.lib-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ── P2-F: TOKENIZE ICON BUTTON RADIUS ──────────────────────── */
/* Consolidates hardcoded 4px values onto --radius-sm token */
.qi-ctrl-btn  { border-radius: var(--radius-sm); }
.gp-btn       { border-radius: var(--radius-sm); }
.qi-save-btn  { border-radius: var(--radius-sm); }
.modal-close  { border-radius: var(--radius-sm); }
.hist-clear-btn { border-radius: var(--radius-sm); }
.lib-fav-filter { border-radius: var(--radius-sm); }
.lib-sel-btn  { border-radius: var(--radius-sm); }

/* ── POLISH PASS ─────────────────────────────────────────────── */

/* 1. STAT CARDS — brighter labels, tighter vertical rhythm */
.stat-label{color:var(--text2);letter-spacing:0.04em;}
.stat-card{padding:9px 12px 8px;}

/* 2. SLIDERS — brighter track + min/max hint contrast */
input[type=range]{background:rgba(255,255,255,0.12);}
input[type=range]:focus-visible{outline:1px solid var(--accent);outline-offset:3px;border-radius:2px;}
.rh{color:var(--text2);}

/* 3. PRESET CARDS — description contrast + active border glow */
.pb-desc{color:var(--text2);}
.preset-btn.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-dim);}
.preset-btn:focus-visible{outline:1px solid var(--accent);outline-offset:2px;}
/* Custom preset action icon contrast */
.cpi-btn{color:var(--text2);}
.cpi-save-btn:disabled{opacity:0.38;}

/* 4. TAB BAR — thinner active underline + slightly brighter inactive text */
.tab-btn{color:var(--text2);border-bottom-width:1px;}
.tab-btn.active{border-bottom-width:2px;}
.tab-btn:focus-visible{outline:1px solid var(--accent);outline-offset:-2px;border-radius:3px;}

/* 5. EMPTY QUEUE — inline waveform icon, no size change */
.empty-queue{display:flex;flex-direction:column;align-items:center;gap:8px;}
.empty-queue-icon{color:var(--text3);opacity:0.4;flex-shrink:0;}

/* 6. FOCUS-VISIBLE — consistent ring on interactive buttons */
.clear-btn:focus-visible,
.gp-btn:focus-visible,
.qi-ctrl-btn:focus-visible,
.qi-play-btn:focus-visible,
.qi-remove:focus-visible,
.qi-save-btn:focus-visible,
.save-preset-btn:focus-visible,
.cpi-btn:focus-visible,
.lib-btn:focus-visible,
.hist-dl-btn:focus-visible{outline:1px solid var(--accent);outline-offset:2px;}

/* 7. SETTINGS SIDEBAR POLISH */
/* F2: Toggle thumb visible in off state */
.toggle-thumb{background:#777;}
/* F3: Section labels readable */
.sec-label{color:var(--text2);}
.sec-label-icon{color:var(--text2);}
/* F4: Toggle row border sharper */
.toggle-row{border-color:var(--border2);}
/* F5: Slider thumb depth */
input[type=range]::-webkit-slider-thumb{box-shadow:0 1px 4px rgba(0,0,0,0.55),0 0 0 1.5px rgba(232,255,71,0.18);}
input[type=range]::-moz-range-thumb{box-shadow:0 1px 4px rgba(0,0,0,0.55),0 0 0 1.5px rgba(232,255,71,0.18);}
/* F6: Tabular numbers on value labels */
.setting-val{font-variant-numeric:tabular-nums;}

/* ════════════════════════════════════════════════════════════════
   PHASE 2C-2B ADDITIONS — Replacing all 18 style= attributes
   and fixing RS-03 / RS-12 CSP-relevant innerHTML injections.
   ════════════════════════════════════════════════════════════════ */

/* ── Hidden file inputs (SS-10, SS-13) ── */
/* Were: style="display:none" on #fileInput and #libImportInput */
#fileInput,
#libImportInput { display: none; }

/* ── Sidebar bottom group (SS-08) ── */
/* Was: style="margin-top:auto;display:flex;flex-direction:column;gap:7px" */
.sidebar-bottom-group {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* ── Queue header controls group (SS-12) ── */
/* Was: style="display:flex;gap:6px;align-items:center" on inner div */
.queue-header-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── My Presets header sec-label margin reset (SS-01) ── */
/* Was: style="margin:0;" on .sec-label inside .my-presets-header */
.my-presets-header .sec-label { margin: 0; }

/* ── Queue header sec-label margin reset (SS-11) ── */
/* Was: style="margin:0;" on .sec-label inside .queue-header */
.queue-header .sec-label { margin: 0; }

/* ── Toggle row spacing variants (SS-02, SS-04, SS-06) ── */
/* SS-02 (line 623): style="margin-bottom:9px" on .toggle-row (edge cleanup toggle) */
/* SS-06 (line 655): style="margin-bottom:9px" on .toggle-row (normalize volume toggle) */
.toggle-row--spaced-bottom { margin-bottom: 9px; }
/* SS-04 (line 640): style="margin-top:9px;margin-bottom:9px" on .toggle-row (max pause) */
.toggle-row--spaced-both   { margin-top: 9px; margin-bottom: 9px; }

/* ── SS-03, SS-05, SS-07: REDUNDANT — already covered by Block 1 ──
   SS-03 (line 633): style="margin-bottom:0" on .setting — covered by .setting:last-child{margin-bottom:0;}
   SS-05 (line 645): style="margin-bottom:0" on .setting — covered by .setting:last-child{margin-bottom:0;}
   SS-07 (line 660): style="margin-bottom:6px" on .setting-row — covered by .setting-row{margin-bottom:6px;}
   These inline styles are simply removed from HTML with no CSS addition needed. */

/* ── Drop zone upload icon color (SS-09) ── */
/* Was: style="color:#666" on SVG inside drop zone */
.upload-icon { color: #666; }

/* ── Preview bar legend dots (SS-16, SS-17) ── */
/* SS-16: style="background:var(--accent);opacity:0.65" on first .pb-dot */
.pb-dot--audio   { background: var(--accent); opacity: 0.65; }
/* SS-17: style="background:var(--bg3)" on second .pb-dot */
.pb-dot--silence { background: var(--bg3); }

/* ── SS-14, SS-15: pb-audio/pb-silence initial widths ──
   style="width:70%" and style="width:30%" are removed.
   These widths are set dynamically by syncPreviewBar() in app.js.
   The preview panel is hidden (.hidden class) on page load until
   syncPreviewBar() runs, so no flash of unstyled content occurs. */

/* ── SS-18: .pwa-install-bar fixed positioning ──
   Absorbed into .pwa-install-bar rule in Block 1 above. */

/* ── RS-03: Delete confirmation caution text ── */
/* Was: innerHTML with <span style="color:var(--text3);font-size:10px;"> in app.js line 164 */
.dcd-caution-text {
  color: var(--text3);
  font-size: 10px;
}

/* ── RS-12: History header sec-label margin reset ── */
/* Was: innerHTML with <div class="sec-label" style="margin:0;"> in app.js line 1461 */
.hist-header .sec-label { margin: 0; }