/* Optional gothic grayscale theme; enabled by the appearance selector. */
:root {
  --navy: #080808;
  --slate: #454545;
  --coral: #c0c0c0;
  --action: #515151;
  --burgundy: #262626;
  --ink: #f4f4f4;
  --muted: #c9c9c9;
  --paper: #2b2b2b;
  --line: #666666;
  --amber: var(--coral);
  --amber2: #d9d9d9;
  --tx2: #e7e7e7;
  --tx3: var(--muted);
  --green: var(--action);
  --red: #b1b1b1;
}
body { background: #000000; background-image: none; }
.loop-overlay { background: #ffffff26; border-color: #cccccc; }
.start-handle, .end-handle { background: #555555; color: white; }
.preset-btn:hover:not(:disabled), .clear-btn:hover { background: #555555; color: white; }
.editor-hdr { border-color: var(--line); }
.app-container { background: var(--navy); border-color: #444444; box-shadow: 0 18px 60px #00000040; }
.main-toolbar { background: #222222; }
.brand h1, .brand h1 .badge-mini, .studio-eyebrow { color: var(--coral); }
.studio-intro h2 { color: var(--ink); }
.transport { background: #2b2b2b; }
.transport-below { box-shadow: 0 3px 8px #00000020; }
.ctrl-btn, .bypass-btn { background: var(--slate); color: var(--ink); }
.ctrl-btn:hover:not(:disabled) { background: #5b5b5b; color: white; }
#playPauseBtn, .download-btn { background: var(--action); color: white; }
#playPauseBtn:hover:not(:disabled), .download-btn:hover:not(:disabled) { background: #424242; color: white; }
.bypass-btn.active, #loopBtn.active, #matchBtn[aria-pressed="true"] { background: var(--coral); color: var(--navy); }
.clear-btn { background: var(--burgundy); color: #d9d9d9; }
.preset-btn, .time-display { color: var(--tx2); }
.local-badge { background: var(--burgundy); color: #d9d9d9; border-color: #5e5e5e; }
.local-badge span { background: var(--coral); }
.waveform-container { background: #393939; border-color: #969696; box-shadow: inset 0 2px 8px #00000015; }
.waveform-container.drag-over { border-color: var(--coral); box-shadow: 0 0 0 3px #c0c0c033; }
.drop-icon, .pre-idle i { color: var(--coral); }
.drop-title { color: var(--ink); }
.drop-sub, .drop-formats { color: #d4d4d4; }
.drag-over .drop-title, .drag-over .drop-sub, .drag-over .drop-icon, .drag-over .drop-formats { color: #d9d9d9; }
.studio-guide { color: var(--coral); }
.studio-guide b { color: var(--ink); }
.studio-guide p { color: var(--muted); }
.mode-btn { background: var(--slate); color: var(--ink); }
.mode-btn-sub { color: #dedede; }
.mode-btn:hover { background: #575757; color: white; border-color: var(--coral); }
.mode-btn-active, .mode-btn-active:hover { background: var(--coral); color: var(--navy); border-color: var(--coral); }
.mode-btn-active .mode-btn-icon, .mode-btn-active .mode-btn-sub { color: #272727; }
.ws-left { background: #333333; }
.ws-idle-msg i, .ws-right-idle i { color: #a6a6a6; }
.ws-idle-msg p, .ws-right-idle p, .editor-no-params, .preset-note { color: var(--muted); }
.presets-cat-label { color: var(--coral); }
.preset-card { background: var(--slate); border-color: #7d7d7d; }
.preset-card:hover { background: #575757; border-color: var(--coral); }
.preset-active, .preset-active:hover { background: var(--burgundy); border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.preset-name { color: var(--ink); }
.preset-active .preset-name { color: #d9d9d9; }
.bar-up, .preset-active .bar-up, .preset-active .bar-flat { background: var(--coral); }
.bar-zero, .bar-flat { background: #a6a6a6; }
.bar-down, .preset-active .bar-down { background: #a3a3a3; }
.comp-dot { background: #393939; border-color: #959595; }
.comp-dot-on, .preset-active .comp-dot-on { background: var(--coral); border-color: var(--coral); }
.ehdr-preset, .ehdr-fix, .ehdr-warn, .ehdr-ok { background: var(--burgundy); }
.ehdr-text b { color: var(--ink); }
.ehdr-text p, .param-label { color: var(--tx2); }
.ehdr-preset .ehdr-icon, .param-icon, .param-val { color: var(--coral); }
.param-range, .param-range::-webkit-slider-runnable-track { background: #787878; }
.param-range::-webkit-slider-thumb { background: var(--coral); box-shadow: 0 2px 4px #00000030; }
.param-range::-moz-range-thumb { background: var(--coral); }
.param-range::-moz-range-track { background: #787878; }
.param-restore { color: var(--tx2); border-color: #858585; }
.param-restore:hover { color: var(--coral); border-color: var(--coral); }
.astat { background: var(--slate); color: #dedede; }
.astat b, .fr-label { color: var(--ink); }
.finding-row:hover, .finding-row.fr-selected { background: var(--slate); }
.fr-ok .fr-badge, .ehdr-ok .ehdr-icon { color: #d8d8d8; }
.fr-warn .fr-badge, .ehdr-warn .ehdr-icon { color: #d9d9d9; }
.fr-fix .fr-badge, .ehdr-fix .ehdr-icon { color: #b1b1b1; }
.toggle-track { background: #787878; }
.toggle-thumb { background: #e7e7e7; }
.fr-na, .editor-no-params i { color: var(--muted); }
.toggle-inp:checked + .toggle-track { background: #5e5e5e; }
.toggle-inp:checked + .toggle-track .toggle-thumb { background: var(--coral); }
.ws-analyzing, .ws-analyzing i { color: var(--coral); }
.status-bar { background: #393939; color: var(--tx2); }
.status-center i { color: var(--coral); }
.app-footer { background: var(--burgundy); border-color: #5e5e5e; }
.app-footer .copyright-text, .app-footer .foot-sep { color: #cfcfcf; }
.app-footer .foot-link { color: #d9d9d9; }
.foot-link:hover, .modal-body a:hover { color: white; text-decoration: underline; }
.hamburger-menu, .modal-window { border-color: var(--line); box-shadow: 0 12px 30px #00000040; }
.hmenu-section, .hmenu-lang { color: var(--muted); }
.hmenu-item, .modal-body { color: var(--tx2); }
.hmenu-item:hover, .modal-header { background: var(--slate); }
.hmenu-lang { border-color: var(--line); }
.modal-body a, .modal-close { color: var(--coral); }
#exportFmtBox { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--line) !important; }
#exportFmtBox h3 { color: var(--coral) !important; }
#exportFmtBox .efmt-label, #exportFmtBox .efmt-cancel, #exportFmtBox .efmt-opt { color: var(--tx2); border-color: var(--line); }
#exportFmtBox .efmt-opt.sel, #exportFmtBox .efmt-go { background: var(--action); border-color: var(--action); color: white; }
button:focus-visible, a:focus-visible, input:focus-visible { outline-color: var(--coral); }