/* ===== Audacity classic (2.x) theme ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --tb-hi: #dfe4ee;
  --tb-lo: #b3bdd2;
  --tb-edge-hi: #f4f6fb;
  --tb-edge-lo: #7a8499;
  --panel-hi: #d6ddeb;
  --panel-lo: #a9b4cd;
  --wave-bg: #f4f4f4;
  --wave-col: #5c5cc8;
  --wave-rms: #a9a9e0;
  --wave-sel-bg: #aeb6c6;
  --wave-sel-col: #3d3d9e;
  --wave-sel-rms: #7c7cba;
  --clip-red: #e02020;
  --dlg-bg: #ece9d8;
}

html, body { height: 100%; overflow: hidden; }
body {
  font-family: Tahoma, "Segoe UI", Geneva, Verdana, sans-serif;
  font-size: 11px;
  color: #000;
  background: #d4d0c8;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

#aud-app { display: flex; flex-direction: column; height: 100vh; }

/* ===== Menu bar ===== */
#aud-menubar {
  display: flex; align-items: stretch;
  background: linear-gradient(#fcfcfc, #ececec);
  border-bottom: 1px solid #a0a0a0;
  height: 22px; flex: 0 0 22px;
  padding: 0 2px;
  position: relative; z-index: 300;
}
.aud-menu-btn {
  padding: 3px 8px 2px; line-height: 16px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.aud-menu-btn:hover, .aud-menu-btn.aud-open {
  background: #316ac5; color: #fff;
}
.aud-menu-dropdown {
  position: absolute; top: 100%;
  min-width: 220px;
  background: #f5f4ee;
  border: 1px solid #716f64;
  box-shadow: 3px 3px 4px rgba(0,0,0,.35);
  padding: 2px;
  z-index: 400;
}
.aud-mi {
  display: flex; align-items: center;
  padding: 3px 20px 3px 22px;
  position: relative; white-space: nowrap;
  color: #000;
}
.aud-mi:hover:not(.aud-disabled) { background: #316ac5; color: #fff; }
.aud-mi.aud-disabled { color: #888; }
.aud-mi .aud-mi-check { position: absolute; left: 6px; width: 12px; }
.aud-mi .aud-mi-label { flex: 1; }
.aud-mi .aud-mi-accel { margin-left: 28px; color: #666; }
.aud-mi:hover:not(.aud-disabled) .aud-mi-accel { color: #cfe0ff; }
.aud-mi-sep { height: 1px; background: #a39f93; margin: 3px 4px; box-shadow: 0 1px 0 #fff; }

/* ===== Toolbars ===== */
#aud-toolbars {
  background: linear-gradient(var(--tb-hi), var(--tb-lo));
  border-bottom: 1px solid #6d7686;
  padding: 3px 4px;
  display: flex; flex-wrap: wrap; gap: 4px;
  flex: 0 0 auto; z-index: 200;
}
.aud-toolbar {
  display: flex; align-items: center; gap: 2px;
  background: linear-gradient(#cfd6e4, #aab5cc);
  border: 1px solid var(--tb-edge-lo);
  border-top-color: var(--tb-edge-hi);
  border-left-color: var(--tb-edge-hi);
  border-radius: 3px;
  padding: 3px 5px 3px 12px;
  position: relative;
  min-height: 40px;
}
.aud-toolbar::before {
  content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 4px;
  background: repeating-linear-gradient(to bottom, #8c96ab 0 2px, transparent 2px 5px);
  border-radius: 2px;
}
.aud-toolbar .aud-tb-label {
  font-size: 10px; color: #2c3444; margin: 0 4px 0 2px; align-self: flex-start;
}

.aud-tbtn {
  width: 27px; height: 27px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(#f2f5fa, #c9d1e0);
  border: 1px solid #77809a;
  border-top-color: #fff; border-left-color: #fff;
  border-radius: 3px;
  cursor: pointer; position: relative;
}
.aud-tbtn:hover:not(.aud-disabled) { background: linear-gradient(#ffffff, #d6deeb); }
.aud-tbtn.aud-down, .aud-tbtn:active:not(.aud-disabled) {
  background: linear-gradient(#9fadcc, #c2cbdd);
  border-color: #8a93a8; border-top-color: #5d6578; border-left-color: #5d6578;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,.3);
}
.aud-tbtn.aud-disabled { opacity: .45; cursor: default; }
.aud-tbtn svg { display: block; pointer-events: none; }
.aud-tbtn.aud-recording { background: linear-gradient(#ff9d9d, #e05b5b); }

.aud-tb-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: #8c96ab; box-shadow: 1px 0 0 #f0f3fa; }

/* transport buttons are a bit rounder */
#aud-transport .aud-tbtn { border-radius: 6px; width: 30px; height: 30px; }

/* mixer sliders */
.aud-mixer-group { display: flex; align-items: center; gap: 4px; padding: 0 3px; }
.aud-mixer-group svg { flex: 0 0 auto; }

input[type="range"].aud-slider {
  -webkit-appearance: none; appearance: none;
  width: 110px; height: 14px; background: transparent; cursor: pointer;
}
input[type="range"].aud-slider::-webkit-slider-runnable-track {
  height: 5px; background: linear-gradient(#8d97ad, #aeb7c9);
  border: 1px solid #6a7386; border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
input[type="range"].aud-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 15px; margin-top: -6px;
  background: linear-gradient(to right, #f5f7fb 0%, #c3cbe0 45%, #96a1bd 55%, #d9dfec 100%);
  border: 1px solid #5d6578; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
input[type="range"].aud-slider.aud-mini { width: 86px; }

/* meters */
.aud-meter-wrap { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px; }
.aud-meter {
  width: 130px; height: 11px; position: relative;
  background: #202020; border: 1px solid #0f0f0f; box-shadow: inset 0 1px 3px #000;
}
.aud-meter canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.aud-meter-label { font-size: 9px; color: #2c3444; display: flex; justify-content: space-between; }

/* ===== Track area ===== */
#aud-trackarea { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; background: #808080; position: relative; }

#aud-ruler-row { display: flex; flex: 0 0 34px; background: #d8dbe3; border-bottom: 1px solid #707070; }
#aud-ruler-corner {
  flex: 0 0 180px; border-right: 1px solid #707070;
  background: linear-gradient(var(--tb-hi), var(--tb-lo));
  display: flex; align-items: center; justify-content: flex-end; padding-right: 6px;
  color: #333; font-size: 10px;
}
#aud-ruler { flex: 1 1 auto; display: block; cursor: text; }
#aud-vscroll-slot { flex: 0 0 0px; }

#aud-tracks-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; position: relative; background: #9099a8; }
#aud-tracks { position: relative; }
#aud-overlay { position: absolute; top: 0; pointer-events: none; z-index: 5; }
#aud-playhead {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px solid rgba(0,120,0,.9);
  display: none; pointer-events: none; z-index: 6;
}
#aud-playhead::before {
  content: ""; position: absolute; top: 0; left: -5px;
  border: 4px solid transparent; border-top: 6px solid rgba(0,120,0,.9);
}
#aud-rubberband {
  position: absolute; display: none; background: rgba(49,106,197,.18);
  border: 1px dashed #316ac5; z-index: 7; pointer-events: none;
}

.aud-track-row { display: flex; border-bottom: 1px solid #606060; position: relative; }
.aud-track-row.aud-selected .aud-wave { background: #e8e8f0; }

.aud-cp {
  flex: 0 0 180px; border-right: 1px solid #707070;
  background: linear-gradient(var(--panel-hi), var(--panel-lo));
  padding: 3px 5px; display: flex; flex-direction: column; gap: 3px;
  overflow: hidden; position: relative;
}
.aud-track-row.aud-selected .aud-cp { background: linear-gradient(#e4e9f5, #bfc9de); }
.aud-cp-top { display: flex; align-items: center; gap: 3px; }
.aud-cp-close {
  width: 15px; height: 15px; flex: 0 0 auto; font-size: 10px; line-height: 13px; text-align: center;
  background: linear-gradient(#f2f5fa, #c9d1e0); border: 1px solid #77809a;
  border-top-color: #fff; border-left-color: #fff; border-radius: 2px; cursor: pointer;
}
.aud-cp-close:hover { color: #c00; }
.aud-cp-name {
  flex: 1; font-weight: bold; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px 3px; border: 1px solid transparent; cursor: pointer;
}
.aud-cp-name:hover { border-color: #77809a; background: rgba(255,255,255,.5); }
.aud-cp-chev {
  width: 15px; height: 15px; flex: 0 0 auto; font-size: 8px; line-height: 13px; text-align: center;
  background: linear-gradient(#f2f5fa, #c9d1e0); border: 1px solid #77809a;
  border-top-color: #fff; border-left-color: #fff; border-radius: 2px; cursor: pointer;
}
.aud-cp-mid { display: flex; gap: 4px; align-items: center; }
.aud-cp-btn {
  flex: 1; text-align: center; font-size: 10px; padding: 2px 0;
  background: linear-gradient(#f2f5fa, #c9d1e0); border: 1px solid #77809a;
  border-top-color: #fff; border-left-color: #fff; border-radius: 2px; cursor: pointer;
}
.aud-cp-btn.aud-mute-on { background: linear-gradient(#e8a25c, #d97e1e); color: #fff; text-shadow: 0 1px 1px #7a4a00;
  border-color: #8a5a10; box-shadow: inset 1px 1px 3px rgba(0,0,0,.3); }
.aud-cp-btn.aud-solo-on { background: linear-gradient(#f4d33f, #d4af1d); color: #4a3c00;
  border-color: #9a8410; box-shadow: inset 1px 1px 3px rgba(0,0,0,.3); }
.aud-cp-slider-row { display: flex; align-items: center; gap: 4px; }
.aud-cp-slider-row .aud-cp-ico { flex: 0 0 12px; font-size: 10px; color: #2c3444; text-align: center; }
.aud-cp-slider-row .aud-cp-val { flex: 0 0 34px; font-size: 9px; text-align: left; color: #1c2434; }
.aud-cp-vzoom { position: absolute; right: 3px; bottom: 3px; display: flex; gap: 2px; }
.aud-cp-vzoom button {
  width: 14px; height: 12px; font-size: 8px; line-height: 10px; cursor: pointer;
  background: linear-gradient(#f2f5fa, #c9d1e0); border: 1px solid #77809a; border-radius: 2px;
}

.aud-wave-wrap { flex: 1 1 auto; position: relative; min-width: 0; }
canvas.aud-wave { display: block; width: 100%; height: 100%; }

.aud-drop-info {
  padding: 30px; color: #4a5468; text-align: center; font-size: 12px;
}

/* ===== horizontal scroll row ===== */
#aud-hscroll-row { display: flex; flex: 0 0 16px; background: #d4d0c8; }
#aud-hscroll-corner { flex: 0 0 180px; border-right: 1px solid #707070; background: linear-gradient(var(--tb-hi), var(--tb-lo)); }
#aud-hscroll { flex: 1; overflow-x: auto; overflow-y: hidden; background: #ececec; }
#aud-hscroll-spacer { height: 1px; }

/* ===== Selection bar ===== */
#aud-selbar {
  flex: 0 0 44px; display: flex; align-items: center; gap: 8px;
  background: linear-gradient(var(--tb-hi), var(--tb-lo));
  border-top: 1px solid #6d7686; padding: 3px 8px; z-index: 200;
  flex-wrap: wrap;
}
.aud-selbar-group { display: flex; align-items: center; gap: 4px; }
.aud-selbar-group label { font-size: 10px; color: #2c3444; }
.aud-timefield {
  width: 92px; padding: 2px 4px; font: 11px Tahoma, sans-serif;
  background: #fff; border: 1px solid #6a7386; box-shadow: inset 1px 1px 2px rgba(0,0,0,.25);
}
.aud-selbar select, .aud-dlg select {
  font: 11px Tahoma, sans-serif; background: #fff; border: 1px solid #6a7386;
}
.aud-snap-wrap { display: flex; align-items: center; gap: 3px; font-size: 10px; color: #2c3444; }

#aud-statusbar {
  flex: 0 0 18px; background: #ececec; border-top: 1px solid #a0a0a0;
  font-size: 10px; color: #333; display: flex; align-items: center; padding: 0 8px; gap: 16px;
}

/* ===== Dialogs ===== */
#aud-dlg-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
.aud-dlg {
  background: var(--dlg-bg); border: 1px solid #404040;
  box-shadow: 4px 4px 10px rgba(0,0,0,.5);
  min-width: 320px; max-width: 90vw; max-height: 88vh;
  display: flex; flex-direction: column;
}
.aud-dlg-title {
  background: linear-gradient(to right, #0058e6, #3a93ff);
  color: #fff; font-weight: bold; padding: 4px 8px; font-size: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.aud-dlg-title .aud-dlg-x { cursor: pointer; padding: 0 4px; font-weight: normal; }
.aud-dlg-body { padding: 12px 14px; overflow: auto; }
.aud-dlg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.aud-dlg-row label:first-child { flex: 0 0 130px; text-align: right; }
.aud-dlg-row input[type="text"], .aud-dlg-row input[type="number"] {
  flex: 1; min-width: 80px; padding: 2px 4px; font: 11px Tahoma, sans-serif;
  border: 1px solid #7f9db9; box-shadow: inset 1px 1px 2px rgba(0,0,0,.15);
}
.aud-dlg-row input[type="range"] { flex: 1; }
.aud-dlg-row .aud-dlg-val { flex: 0 0 90px; font-size: 11px; }
.aud-dlg-check { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.aud-dlg-btns {
  display: flex; justify-content: center; gap: 10px;
  padding: 10px; border-top: 1px solid #aca899;
}
.aud-btn {
  min-width: 74px; padding: 4px 12px; font: 11px Tahoma, sans-serif;
  background: linear-gradient(#fdfdf9, #d9d4c4);
  border: 1px solid #706c5c; border-radius: 2px; cursor: pointer;
  box-shadow: 1px 1px 0 rgba(255,255,255,.8) inset;
}
.aud-btn:hover { background: linear-gradient(#fff, #e4dfd0); }
.aud-btn:active { box-shadow: inset 1px 1px 3px rgba(0,0,0,.3); }
.aud-btn.aud-default { border: 2px solid #0a246a; }
.aud-dlg-note { font-size: 10px; color: #555; margin-top: 2px; }
.aud-dlg canvas { background: #fff; border: 1px solid #7f7f7f; }
.aud-dlg-static { line-height: 1.5; }
.aud-dlg-static b { color: #0a246a; }

/* EQ canvas slider area */
.aud-eq-bands { display: flex; gap: 8px; justify-content: space-between; margin-top: 6px; }
.aud-eq-band { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; }
.aud-eq-band input[type="range"] {
  writing-mode: vertical-lr; direction: rtl;
  width: 14px; height: 90px;
}

/* history list */
.aud-history-list {
  width: 380px; height: 200px; overflow: auto; background: #fff;
  border: 1px solid #7f9db9; padding: 2px;
}
.aud-history-list div { padding: 2px 6px; }
.aud-history-list div.aud-hist-cur { background: #316ac5; color: #fff; }

/* tooltips */
#aud-tooltip {
  position: fixed; z-index: 900; pointer-events: none; display: none;
  background: #ffffe1; border: 1px solid #000; padding: 2px 6px; font-size: 10px;
  box-shadow: 2px 2px 3px rgba(0,0,0,.3);
}