* { box-sizing: border-box; }
html{ scrollbar-gutter: stable; }

:root{
  --bg0:#0b1020;
  --bg1:#141a33;
  --text:#f3f6ff;
  --muted: rgba(243,246,255,0.78);
  /* Updated at runtime to keep sticky panels aligned under the header */
  --topbar-h: 86px;
  --accent1:#7c5cff; /* purple */
  --accent2:#00d4ff; /* cyan */
  --accent4:#42ff9e; /* green */
  --warn:#ffcc66;    /* amber */
  --danger:#ff4d6d;
  --blue:#3aa0ff;
  --teal:#00d4ff;
  --slate:#8aa0c6;
}



body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(124,92,255,0.35), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(0,212,255,0.28), transparent 60%),
    radial-gradient(800px 650px at 60% 85%, rgba(255,79,216,0.20), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.topbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: var(--bg0);
  backdrop-filter: none;
  position: sticky;
  top:0;
  z-index:10;
}

/* Header layout: title left, action buttons centered */
.topbar .left{ grid-column: 1; }
.topbar .right{
  grid-column: 2;
  justify-self: center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  flex-wrap: wrap;
}

button{
  cursor:pointer;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.1px;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.25),
    0 0 0 1px rgba(255,255,255,0.05) inset;
  transition:
    transform 0.06s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}

/* Buttons with SVG icons (used in header + any other places we switch to SVG) */
.btnWithIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}

.btnIcon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

/* Icon-only toolbar buttons (no text label) */
.btnIconOnly{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  cursor:pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.btnIconOnly .btnIcon{
  width:20px;
  height:20px;
}

.btnIconOnly:hover{
  background:rgba(212,175,55,0.14);
  border-color:rgba(212,175,55,0.45);
  box-shadow:0 0 8px rgba(212,175,55,0.2);
}

.btnIconOnly:active{
  transform:translateY(1px);
}

button:hover{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.30);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,255,255,0.07) inset;
}

button:active{ transform: translateY(1px); }

button:focus-visible{
  outline: none;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,255,255,0.07) inset,
    0 0 0 3px rgba(0,212,255,0.28);
}

/* 
  Button colour system (semantic, keeps the dark vibe but makes actions pop)
  - Primary: main actions (Add, Export, Save Voice)
  - Secondary: safe utility actions (Save/Open)
  - Utility: help / non-critical
  - Play: audio playback
  - Move: reorder
  - Danger: delete/stop
  - Insert: insert-under buttons
*/

button.btn-primary{
  border-color: rgba(58,160,255,0.70);
  background: linear-gradient(135deg, rgba(58,160,255,0.55), rgba(0,212,255,0.25));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.32),
    0 0 0 1px rgba(58,160,255,0.18) inset,
    0 0 18px rgba(58,160,255,0.14);
}

button.btn-secondary{
  border-color: rgba(138,160,198,0.55);
  background: linear-gradient(135deg, rgba(138,160,198,0.30), rgba(255,255,255,0.08));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(138,160,198,0.12) inset;
}

button.btn-utility{
  border-color: rgba(124,92,255,0.65);
  background: linear-gradient(135deg, rgba(124,92,255,0.40), rgba(255,255,255,0.06));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(124,92,255,0.14) inset,
    0 0 16px rgba(124,92,255,0.10);
}

button.btn-success,
button.btn-play{
  border-color: rgba(66,255,158,0.65);
  background: linear-gradient(135deg, rgba(66,255,158,0.34), rgba(0,0,0,0.10));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(66,255,158,0.14) inset,
    0 0 16px rgba(66,255,158,0.10);
}

button.btn-move{
  border-color: rgba(255,204,102,0.62);
  background: linear-gradient(135deg, rgba(255,204,102,0.26), rgba(0,0,0,0.10));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.26),
    0 0 0 1px rgba(255,204,102,0.12) inset;
}

button.btn-insert{
  border-color: rgba(124,92,255,0.62);
  background: linear-gradient(135deg, rgba(124,92,255,0.34), rgba(0,212,255,0.08));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.26),
    0 0 0 1px rgba(124,92,255,0.12) inset;
}

button.btn-danger{
  border-color: rgba(255,77,109,0.70);
  background: linear-gradient(135deg, rgba(255,77,109,0.34), rgba(0,0,0,0.12));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,77,109,0.12) inset,
    0 0 16px rgba(255,77,109,0.10);
}

/* Boost hover contrast on coloured buttons */
button.btn-primary:hover,
button.btn-secondary:hover,
button.btn-utility:hover,
button.btn-success:hover,
button.btn-play:hover,
button.btn-move:hover,
button.btn-insert:hover,
button.btn-danger:hover{
  filter: brightness(1.08) saturate(1.08);
}

button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

/* Header */
.left{ display:flex; flex-direction:column; gap: 8px; }
.titleBlock{ display:flex; align-items:center; gap: 10px; line-height: 1.15; }
.titleMain{ display:flex; align-items:center; gap: 10px; font-weight: 900; font-size: 18px; letter-spacing: 0.2px; }
.titleSub{ display:block; margin-top: 2px; font-size: 12px; color: var(--muted); }

.lenRow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

/* Bubbles */
.showLenBubble{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(66,255,158,0.60);
  background: rgba(66,255,158,0.14);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.22),
    0 0 0 1px rgba(66,255,158,0.14) inset;
  width: fit-content;
}

.showLenLabel{
  font-size: 12px;
  color: rgba(66,255,158,0.85);
  font-weight: 800;
  letter-spacing: 0.1px;
}

.showLenValue{
  font-size: 12px;
  color: rgba(66,255,158,1);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* Analysis bubble */
.analyzeBubble{
  border: 1px solid rgba(255,204,102,0.60);
  background: rgba(255,204,102,0.14);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,204,102,0.14) inset;
}
.analyzeBubble .showLenLabel,
.analyzeBubble .showLenValue{
  color: rgba(255,204,102,0.95);
}

.layout{
  width: 100%;
  max-width: none;
  margin: 18px 0;
  padding: 0 24px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.panel{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  border-radius: 18px;
  padding: 14px;
}

.panelTitle{
  font-weight: 900;
  margin: 2px 0 10px;
  display: block;
}
.panelTitleMain { display:block; line-height: 1.15; }
.panelTitleSub { margin: 2px 0 0 0; font-weight: 400; opacity: 0.75; line-height: 1.2; }

.dropZone{
  border: 1px dashed rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
  border-radius: 18px;
  padding: 18px;
  text-align:center;
  color: var(--muted);
  margin-bottom: 10px; /* small clean gap before first playlist item */
}
.dropZone.drag{
  border-color: rgba(0,212,255,0.65);
  background: rgba(0,212,255,0.10);
}

.list{ list-style:none; padding:0; margin:0; }

/* Playlist status row (show length + analysis) */
.playlistStatusRow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin: 2px 0 12px;
}

.item{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.20);
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 10px;
}

.itemHeader{
  display:flex;
  justify-content:space-between;
  gap: 12px;
}

.itemLeft{
  flex: 1 1 auto;
  min-width: 0;
}

.itemTopRow{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Keep title/meta on their own lines below the top row */
.itemTitle, .metaRow, .insertRow{
  width: 100%;
}


.badge{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow: hidden;
}

.badgeGrip{
  width: 26px;
  height: 24px;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: grab;
}

.badgeGrip:active{
  cursor: grabbing;
}

.badgeText{
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  white-space: nowrap;
  min-width: 62px;
  text-align: center;
  display: inline-block;
}

.path{
  font-size: 12px;
  color: rgba(243,246,255,0.70);
  margin-top: 6px;
  word-break: break-all;
}

.rowBtns button{
  margin-left:6px;
  padding: 0;
  border-radius: 12px;
  font-weight: 900;
  height: 34px;
  width: 34px;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.rowBtns select.mixSelect{
  margin-left: 6px;
  height: 34px;
  border-radius: 12px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 34px;
  border: 1px solid rgba(255,255,255,0.22);
  background: #1a1a1a;
  color: #ffffff;
  outline: none;
  cursor: pointer;
}
.mixSelect:hover{
  filter: brightness(1.06);
}
.mixSelect:focus{
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}


/* Text note type dropdown (note editor) */
.noteTypeSelect{
  height: 34px;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  line-height: 34px;
  border: 1px solid rgba(255,255,255,0.22);
  background: #1a1a1a;
  color: #2EE28A; /* keep the green note label style */
  outline: none;
  cursor: pointer;
}
.noteTypeSelect:hover{ filter: brightness(1.06); }
.noteTypeSelect:focus{
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}


/* Meta + Mix column (Mix sits under Meta so it’s easier to spot) */
.rowBtns .metaMixCol{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: 6px;
}

.rowBtns .mixRow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  opacity: 0.95;
}

.rowBtns .mixLabel{
  white-space: nowrap;
  color: rgba(243,246,255,0.78);
}

/* Improve native select theming (Electron/Chromium) */
.rowBtns select.mixSelect{
  color-scheme: dark; /* helps prevent white dropdown in Chromium */
}

.rowBtns select.mixSelect option{
  background-color: #1a1a1a;
  color: #ffffff;
}

/* Make Mix obvious when active */
.mixSelect.active{
  border-color: rgba(0,212,255,0.55);
  background: #1a1a1a;
  color: #ffffff;
  font-weight: 800;
}

/* Mix help button (next to Mix dropdown) */
.mixHelpBtn{
  height: 26px;
  width: 26px;
  min-width: 26px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.mixHelpBtn:hover{
  background: rgba(212,175,55,0.18);
  border-color: rgba(212,175,55,0.6);
  box-shadow: 0 0 8px rgba(212,175,55,0.2);
  transform: scale(1.08);
}

.mixHelpBtn:active{
  transform: scale(0.95);
}

.mixHelpIcon{
  width: 15px;
  height: 15px;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.15s, filter 0.15s;
}

.mixHelpBtn:hover .mixHelpIcon{
  opacity: 1;
  filter: brightness(1.2);
}

/* Mix help modal */
.mixHelpOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.mixHelpCard{
  width: min(620px, 100%);
  background: linear-gradient(168deg, rgba(18,20,36,0.98), rgba(10,12,24,0.99));
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 18px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    0 0 20px rgba(212,175,55,0.06);
  color: #f3f6ff;
  padding: 22px 24px;
  backdrop-filter: blur(12px);
}

.mixHelpTitle{
  font-size: 15px;
  font-weight: 800;
  color: #D4AF37;
  letter-spacing: 0.3px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212,175,55,0.18);
}

.mixHelpBody{
  font-size: 13px;
  line-height: 1.65;
  color: rgba(243,246,255,0.82);
}

.mixHelpBody p{
  margin: 0 0 10px;
}

.mixHelpBody b{
  color: rgba(255,255,255,0.95);
}

.mixHelpBody ul{
  margin: 8px 0 10px 18px;
  padding: 0;
}

.mixHelpBody li{
  margin-bottom: 4px;
}

.mixHelpBtnRow{
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.mixHelpClose{
  padding: 8px 20px;
  border-radius: 10px;
  border: 1px solid rgba(212,175,55,0.4);
  background: rgba(212,175,55,0.1);
  color: #D4AF37;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.mixHelpClose:hover{
  background: rgba(212,175,55,0.2);
  border-color: rgba(212,175,55,0.65);
  box-shadow: 0 0 10px rgba(212,175,55,0.15);
}

.progressWrap{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}
.progressText{ font-size: 12px; color: var(--muted); }
.progressBar{
  height: 10px;
  margin-top: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  overflow:hidden;
}
.progressFill{
  height: 100%;
  width: 0%;
  transform: translateX(0);
  background: linear-gradient(90deg, rgba(124,92,255,0.75), rgba(0,212,255,0.65), rgba(66,255,158,0.55));
}

/* Indeterminate progress (used for long stages where percent is unknown) */
.progressBar.indeterminate .progressFill{
  width: 40%;
  animation: vtIndeterminate 1.15s infinite ease-in-out;
}

@keyframes vtIndeterminate{
  0%   { transform: translateX(-140%); }
  100% { transform: translateX(320%); }
}

.recBox .row{
  display:flex;
  gap: 8px;
  align-items:center;
  margin-bottom: 8px;
}
.recBox audio{ width: 100%; outline: none; }

/* Export button placement (just above Export Progress) */
.exportActions{
  margin-top: 12px;   /* space below the voice player */
  margin-bottom: 6px; /* small gap before Export Progress title */
}

.exportTitle{
  margin-top: 0;
}

/* Export button area (sits below voice player, above Export Progress text) */
.exportActions{
  margin-top: 12px;
  margin-bottom: 8px;
}

.exportTitle{
  margin-top: 10px;
}

/* Meta row */
.metaRow{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  display:flex;
  gap: 10px;
  align-items:center;
}
.metaRow .dur{
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.metaRow .dur.live{
  border-color: rgba(255,204,102,0.35);
  background: rgba(255,204,102,0.10);
  color: rgba(255,204,102,0.95);
}

.itemClock{
  padding: 2px 8px;
  border: 1px solid rgba(255,204,102,0.30);
  border-radius: 999px;
  background: rgba(255,204,102,0.08);
  color: rgba(255,204,102,0.92);
  font-family: "Consolas", "Monaco", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.rowBtns button.playBtn{ width: 34px; min-width: 34px; padding: 0; }


@media (max-width: 960px){
  .layout{ grid-template-columns: 1fr; }
}

.item.playing{
  border-color: rgba(0,212,255,0.55);
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.18) inset,
    0 0 22px rgba(0,212,255,0.18);
}


/* Insert-under buttons (per track) */
.rowBtns button{
  font-size: 12px;
}


/* SVG icons (gold) for MUSIC / VOICE labels and insert buttons */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.badgeIcon {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.btn-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-icon .insPlus {
  font-weight: 900;
  line-height: 1;
}

.btn-icon .btnIcon {
  width: 14px;
  height: 14px;
  display: inline-block;
}
/* =========================================================
   Recorder countdown modal (VT modal version)

   Uses: #recCountdownModal.vtModalOverlay + .isOpen
   ========================================================= */
.vtModalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.vtModalOverlay.isOpen{
  display: flex;
}

.vtModalCard{
  background: linear-gradient(180deg, rgba(20,26,51,0.95), rgba(11,16,32,0.95));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  padding: 28px 34px;
  min-width: 280px;
  text-align: center;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}

.vtModalTitle{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12px;
  color: rgba(243,246,255,0.75);
  margin-bottom: 8px;
}

.vtModalNum{
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--warn);
  text-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    0 0 22px rgba(255,204,102,0.35);
}

.vtModalSub{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(243,246,255,0.78);
  line-height: 1.45;
}
/* Insert buttons under each track */
.insertRow{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.insertRow .insertBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-weight: 900;
  height: 34px;
}

.insertRow .insertBtn:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.20);
}

.insertRow .insertMusic{
  border-color: rgba(124,92,255,0.45);
}

.insertRow .insertVoice{
  border-color: rgba(0,212,255,0.45);
}

.btnIcon{
  width: 16px;
  height: 16px;
  display: inline-block;
}


/* Topbar icon + label buttons */
button{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Keep small icons tidy everywhere */
.iconLabelBtn .btnIcon{
  width: 18px;
  height: 18px;
}

/* Optional: make sure these read as “gold” even if the SVG is monochrome */
.goldIcon{
  /* If your SVGs are already gold, this won’t change much. If they’re white, this gives a warm-gold tint. */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)) brightness(1.05) saturate(1.25);
}

/* Playlist bubbles centered at the top of the playlist panel */
.playlistTopCenter{
  display:flex;
  justify-content:center;
  margin: 10px 0 14px;
}

.lenRow.center{
  justify-content:center;
}
/* PERFECTLY CENTER PLAY / PAUSE BUTTONS */
.rowBtns button.playBtn{ width: 34px; min-width: 34px; padding: 0; }

/* Optional: slightly bolder pause symbol */
.rowBtns button.playBtn{ width: 34px; min-width: 34px; padding: 0; }

/* Ensure text rendering doesn't shift */
.rowBtns button.playBtn::before{
  display: none;
}




.micRow {
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.micLabel {
  opacity: 0.9;
  font-size: 12px;
}

.smallBtn {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color: inherit;
  cursor: pointer;
}

.smallBtn:hover {
  filter: brightness(1.08);
}

.micLevel {
  width: 160px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  overflow: hidden;
}

.micLevelFill {
  width: 0%;
  height: 100%;
  background: rgba(0, 255, 120, 0.8);
  transition: width 60ms linear;
}

.micStatus {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.95;
  min-height: 16px;
}

.micStatus.ok { color: rgba(0, 255, 140, 0.95); }
.micStatus.warn { color: rgba(255, 210, 80, 0.95); }
.micStatus.err { color: rgba(255, 90, 90, 0.95); }
.micStatus.info { color: rgba(200, 200, 200, 0.95); }


.recBox .row.micRow{
  flex-direction: column;
  align-items: stretch;
}

.micLabel{
  display:block;
  margin-bottom: 4px;
  font-size: 12px;
  opacity: 0.9;
}

.micControls{
  display:flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.micMeterLabel{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.9;
}

/* ===== Mic selector + test (polished) ===== */
.recBox .row.micRow{
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.micLabel{
  display:block;
  font-size: 12px;
  opacity: 0.9;
}

.micControls{
  display:flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.micSelect{
  min-width: 240px;
  max-width: 520px;
  flex: 1 1 240px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  background: #1a1a1a;       /* dark grey */
  color: #ffffff;
  outline: none;
}

.micSelect option{
  background: #1a1a1a;
  color: #ffffff;
}

.smallBtn{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: #1a1a1a;
  color: #ffffff;
  cursor: pointer;
}

.smallBtn:hover{
  filter: brightness(1.08);
}

.micMeterRow{
  display:flex;
  align-items:center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.micMeterLabel{
  font-size: 12px;
  opacity: 0.9;
}

.micLevel{
  width: 180px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  overflow: hidden;
}

.micLevelFill{
  width: 0%;
  height: 100%;
  background: rgba(0, 255, 120, 0.8);
  transition: width 60ms linear;
}

.micStatus{
  font-size: 12px;
  min-height: 16px;
  white-space: nowrap;
}

.micStatus.ok { color: rgba(0, 255, 140, 0.95); }
.micStatus.warn { color: rgba(255, 210, 80, 0.95); }
.micStatus.err { color: rgba(255, 90, 90, 0.95); }
.micStatus.info { color: rgba(200, 200, 200, 0.95); }

.voiceLinksTitle{
  margin-top: 6px;
}


.recBox audio{
  width: 100%;
  outline: none;
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 6px;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  accent-color: var(--teal);
}

.recBox audio::-webkit-media-controls-panel{
  background: rgba(0,0,0,0.18);
}

.recBox audio::-webkit-media-controls-current-time-display,
.recBox audio::-webkit-media-controls-time-remaining-display{
  color: rgba(243,246,255,0.92);
}

.recBox audio::-webkit-media-controls-play-button,
.recBox audio::-webkit-media-controls-mute-button{
  filter: brightness(1.15);
}

.recBox audio::-webkit-media-controls-timeline{
  filter: brightness(1.05);
}

.recBox audio{
  width: 100%;
  outline: none;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.14);
  padding: 8px 10px;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.05) inset;
  accent-color: var(--teal);
}

.recBox audio{
  width: 100%;
  outline: none;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.28);
  padding: 8px 10px;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  accent-color: rgba(0,212,255,0.85);
}

/* Electron/Chromium tuning (keeps it subtle) */
.recBox audio::-webkit-media-controls-panel{
  background: rgba(0,0,0,0.22);
}

.recBox audio::-webkit-media-controls-current-time-display,
.recBox audio::-webkit-media-controls-time-remaining-display{
  color: rgba(243,246,255,0.65);
}

.recBox audio::-webkit-media-controls-play-button,
.recBox audio::-webkit-media-controls-mute-button{
  filter: brightness(0.95) saturate(0.95);
}

.recBox audio::-webkit-media-controls-timeline{
  filter: brightness(0.95);
}
/* Mic meter block directly under dropdown */
.micMeterBlock{
  margin-top: 4px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.micMeterRow{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}


/* ===== Custom preview player (matches VT theme) ===== */
.playerBox{
  margin-top: 6px;
  border-radius: 16px;
  border: 1px solid rgba(242,201,76,0.18);
  background: rgba(0,0,0,0.26);
  padding: 10px 10px 12px;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.22),
    0 0 0 1px rgba(242,201,76,0.10) inset;
}

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

.playerBtn{
  width: 44px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(242,201,76,0.40);
  background: rgba(242,201,76,0.14);
  color: rgba(242,201,76,0.98);
  font-weight: 900;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.playerBtn:hover{ filter: brightness(1.06); }
.playerBtn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.playerTime{
  font-size: 12px;
  color: rgba(243,246,255,0.68); /* less white */
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.playerSeek{
  width: 100%;
  margin: 0;
  accent-color: rgba(242,201,76,0.95);
}

.playerBottom{
  margin-top: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.playerHint{
  font-size: 12px;
  color: rgba(243,246,255,0.55);
  font-weight: 800;
}

.playerVol{
  display:flex;
  align-items:center;
  gap: 8px;
}

.volLabel{
  font-size: 12px;
  color: rgba(242,201,76,0.85);
  font-weight: 800;
}

.playerVolSlider{
  width: 100%;
  accent-color: rgba(242,201,76,0.95);
}

/* Hide the raw audio element (we drive it via custom UI) */
.playerBox audio{
  display:none;
}


/* ===== Section dividers (right panel) ===== */
.panelDivider{
  margin: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 0 rgba(0,0,0,0.35) inset;
}

/* Ensure meter never collapses */
.micLevel{
  display: block;
}

/* Custom player tweaks */
.playerLeft{
  display:flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.playerPreviewLabel{
  font-size: 12px;
  font-weight: 900;
  color: rgba(242,201,76,0.85);
  letter-spacing: 0.1px;
}
/* Playlist filename (top line) */
.itemTitle{
  font-size: 12px;   /* try 12px */
  line-height: 1.25;
}


/* Title area: artwork/type icon to the LEFT of the 2-line meta block */
.metaTitleRow{
  margin-top: 6px;
  display: flex;
  align-items: center; /* centers against the combined 2-line block */
  gap: 10px;
}

.trackArtIcon{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(10,10,20,0.35);
  border: 1px solid rgba(212,175,55,0.18);
}

.trackMetaText{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; /* allow ellipsis */
}

.trackMetaText .itemTitle,
.trackMetaText .itemArtist{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* MUSIC metadata lines (Artist + filename hint) */
.itemArtist{
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  color: rgba(243,246,255,0.78);
}

.itemFileName{
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
  color: rgba(243,246,255,0.45);
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ---------------------------------
   Playlist drag reorder (custom)
---------------------------------- */
.item{
  position: relative;
}

.dragHandle{ display:none; }

.dragHandle:active{
  cursor: grabbing;
}

.item.isDragging{
  opacity: 0.35;
}

.dropPlaceholder{
  border: 2px dashed rgba(255,215,0,0.55);
  background: rgba(255,215,0,0.06);
  border-radius: 16px;
  margin-bottom: 10px;
}

.dragGhost{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.95;
  transform: translate(-9999px, -9999px);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
}

.dragGhost .itemHeader{
  border-radius: 16px;
}


/* ---------------------------------
   Playlist item alternating tones
---------------------------------- */
.item.toneA{
  background: rgba(0,0,0,0.20);
  border-color: rgba(255,255,255,0.12);
}

.item.toneB{
  background: rgba(0,0,0,0.28);
  border-color: rgba(255,255,255,0.16);
}

/* subtle left accent to help scanning */
.item.toneA::before,
.item.toneB::before{
  content:"";
  position:absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: rgba(255,215,0,0.18);
  opacity: 0.9;
}



/* Jingle button + per-item insert */
.insertBtn.insertJingle {
  border-color: rgba(255, 215, 128, 0.35);
}

/* Jingle mode selector */

/* Mix dropdown shown on every row (next to Type) */
.mixTopWrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
}

.mixTopLabel{
  opacity: 0.85;
  font-size: 12px;
}
.jingleModeWrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
}

.jingleModeLabel {
  opacity: 0.85;
  font-size: 12px;
}

.jingleModeSelect {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.22);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.typeChangeSelect option,
.jingleModeSelect option{
  background: #1a1a1a;
  color: #ffffff;
}


.jingleModeSelect:focus {
  outline: 2px solid rgba(255, 215, 128, 0.55);
  outline-offset: 2px;
}


/* Type-based row coloring (strong scan, still subtle) */
.item.isMusic{
  background: linear-gradient(0deg, rgba(80, 140, 255, 0.13), rgba(80, 140, 255, 0.13));
}
.item.isVoice{
  background: linear-gradient(0deg, rgba(255, 180, 60, 0.14), rgba(255, 180, 60, 0.14));
}
.item.isJingle{
  background: linear-gradient(0deg, rgba(200, 90, 255, 0.14), rgba(200, 90, 255, 0.14));
}
.item.isAdvert{
  background: linear-gradient(0deg, rgba(43, 188, 179, 0.14), rgba(43, 188, 179, 0.14));
}

/* Preserve your existing toneA/toneB shading by layering it underneath */
.item.toneA.isMusic{ background: linear-gradient(0deg, rgba(80, 140, 255, 0.13), rgba(80, 140, 255, 0.13)), rgba(255,255,255,0.04); }
.item.toneB.isMusic{ background: linear-gradient(0deg, rgba(80, 140, 255, 0.13), rgba(80, 140, 255, 0.13)), rgba(0,0,0,0.10); }

.item.toneA.isVoice{ background: linear-gradient(0deg, rgba(255, 180, 60, 0.14), rgba(255, 180, 60, 0.14)), rgba(255,255,255,0.04); }
.item.toneB.isVoice{ background: linear-gradient(0deg, rgba(255, 180, 60, 0.14), rgba(255, 180, 60, 0.14)), rgba(0,0,0,0.10); }

.item.toneA.isJingle{ background: linear-gradient(0deg, rgba(200, 90, 255, 0.14), rgba(200, 90, 255, 0.14)), rgba(255,255,255,0.04); }
.item.toneB.isJingle{ background: linear-gradient(0deg, rgba(200, 90, 255, 0.14), rgba(200, 90, 255, 0.14)), rgba(0,0,0,0.10); }

.item.toneA.isAdvert{ background: linear-gradient(0deg, rgba(43, 188, 179, 0.14), rgba(43, 188, 179, 0.14)), rgba(255,255,255,0.04); }
.item.toneB.isAdvert{ background: linear-gradient(0deg, rgba(43, 188, 179, 0.14), rgba(43, 188, 179, 0.14)), rgba(0,0,0,0.10); }

/* Hover stays readable */
.item.isMusic:hover,
.item.isVoice:hover,
.item.isJingle:hover,
.item.isAdvert:hover,
.item.isMissing:hover{
  filter: brightness(1.05);
}


/* Per-type badge text colours (slightly brighter than row tint) */
.item.isMusic .badgeText{
  color: #8fb9ff;
}

.item.isVoice .badgeText{
  color: #ffd27a;
}

.item.isJingle .badgeText{
  color: #e7b0ff;
}

.item.isAdvert .badgeText{
  color: #5cd6ce;
}

/* Missing file items — red tint */
.item.isMissing{
  background: linear-gradient(0deg, rgba(255, 77, 109, 0.18), rgba(255, 77, 109, 0.18)) !important;
}
.item.toneA.isMissing{
  background: linear-gradient(0deg, rgba(255, 77, 109, 0.14), rgba(255, 77, 109, 0.14)), rgba(255,255,255,0.04) !important;
}
.item.toneB.isMissing{
  background: linear-gradient(0deg, rgba(255, 77, 109, 0.20), rgba(255, 77, 109, 0.20)), rgba(0,0,0,0.10) !important;
}
.item.isMissing .badgeText{
  color: #ff4d6d !important;
}


/* Type changer (always visible) */
.typeChangeWrap{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  margin-left: 0;
}

.typeChangeLabel{
  font-size: 11px;
  opacity: 0.70;
}

.typeChangeSelect{
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  background: #1a1a1a;
  color: #ffffff;
  padding: 0 10px;
  outline: none;
}

.typeChangeSelect:hover{
  filter: brightness(1.06);
}

.typeChangeSelect:focus{
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

.typeChangeSelect option{
  background: #1a1a1a;
  color: #ffffff;
}


/* Keep the right-hand panel fixed while the playlist scrolls */
.sidebarPanel{
  position: sticky;
  top: calc(var(--topbar-h) + 14px); /* sits below the sticky header */
  align-self: start;
  max-height: calc(100vh - var(--topbar-h) - 28px);
  overflow: auto;
}



/* ===========================
   Mic UI tweak (safe, scoped)
   - Select stays on its own line
   - Meter + bar share the next line with Mic Test + Refresh (right)
   - No layout impact on Voice Links / player
   =========================== */

.recBox .row.micRow{
  position: relative;           /* anchor for absolutely positioned buttons */
  overflow-x: hidden;           /* prevent accidental horizontal scrollbars */
}

/* Force the dropdown onto its own line */
.recBox .row.micRow .micControls{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.recBox .row.micRow .micControls .micSelect{
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Put the buttons visually on the next line, aligned right (without taking layout width) */
.recBox .row.micRow .micControls #btnMicTest,
.recBox .row.micRow .micControls #btnMicRefresh{
  position: absolute;
  top: calc(100% + 6px);        /* aligns with the meter line */
  z-index: 2;
}

/* Refresh sits left of Test */
.recBox .row.micRow .micControls #btnMicTest{
  right: 0;
  min-width: 120px;             /* makes icon + text sit side-by-side */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.recBox .row.micRow .micControls #btnMicRefresh{
  right: 132px;                 /* = test min-width + gap */
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Make sure the meter line reserves space for the two buttons on the right */
.recBox .row.micRow .micMeterBlock{
  margin-top: 6px;              /* matches the button top offset */
  padding-right: 190px;         /* reserve space for Test + Refresh */
}

/* Keep meter elements on one neat line */
.recBox .row.micRow .micMeterRow{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.recBox .row.micRow .micMeterLabel{
  margin-top: 0;
  white-space: nowrap;
}

.recBox .row.micRow .micLevel{
  width: auto;
  flex: 1 1 auto;
  max-width: 260px;
}

/* Small screens: if it still gets tight, allow the meter to shorten */
@media (max-width: 1050px){
  .recBox .row.micRow .micMeterBlock{
    padding-right: 170px;
  }
  .recBox .row.micRow .micControls #btnMicRefresh{
    right: 126px;
  }
}


/* =========================
   UI tweaks (build v5)
   ========================= */

/* Title area (title + byline + fixed show summary under the title) */
.titleBlock{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.titleBy{
  font-size: 12px;
  opacity: 0.85;
  font-weight: 700;
  position: relative;
  top: -1px;
}

.appIcon{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: inline-block;
}

/* Fixed summary line under the app title */
.headerSummary{
  display:flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
  padding: 2px 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
  opacity: 0.95;
}

/* Optional line under the header summary showing: Presenter - Show name */
.showMetaSummary{
  display: block;

  margin-top: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  color: #D4AF37;
  opacity: 0.95;
  line-height: 1.15;
  /* Allow a 2-line block (title + station/date) */
  white-space: normal;
  max-width: 100%;
}


.showMetaWrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.showArtIcon{
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(10,10,20,0.35);
  border: 1px solid rgba(212,175,55,0.18);
}

.showMetaTextBlock{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.showMetaTextSub{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.72;
  margin-top: 2px;
}


/* Top row: color-code the 3 add buttons */
.topBtnMusic{
  background: rgba(59,130,246,0.22);
  border-color: rgba(59,130,246,0.45);
}
.topBtnVoice{
  background: rgba(205,127,50,0.18); /* bronze */
  border-color: rgba(205,127,50,0.45);
}
.topBtnJingle{
  background: rgba(168,85,247,0.18); /* purple */
  border-color: rgba(168,85,247,0.45);
}
.topBtnAdvert{
  background: rgba(43,188,179,0.18); /* teal */
  border-color: rgba(43,188,179,0.45);
}
.topBtnRecord{
  background: rgba(220,50,50,0.28); /* red */
  border-color: rgba(220,50,50,0.55);
}
.topBtnOverlap{
  background: rgba(245,180,50,0.18); /* amber */
  border-color: rgba(245,180,50,0.45);
}
.topBtnPreview{
  background: rgba(60,180,75,0.18); /* green */
  border-color: rgba(60,180,75,0.45);
}

/* Playlist header row (title + show length + analysis) */
.panelHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.playlistMeta{
  display:flex;
  align-items:center;
  gap: 10px;
}

.metaBlock{
  display:flex;
  flex-direction: column;
  align-items:flex-end;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: none;
  min-width: 120px;
}

.metaLabel{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  opacity: 0.9;
}

.metaValue{
  font-size: 12px;
  font-weight: 900;
  opacity: 0.95;
}

/* Give the two meta blocks their existing “bubble” colors, but without bubbles */
#showLen .metaLabel, #showLen .metaValue{
  color: rgba(66,255,158,0.95);
}

/* Type dropdown: dark like other dropdowns */
.typeChangeSelect,
.jingleModeSelect{
  background: rgba(0,0,0,0.35);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 0 12px;
  height: 34px;
}

/* Insert buttons inline with the type dropdown */
.typeChangeWrap{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.typeInsertRow{
  display:flex;
  align-items:center;
  gap: 8px;
}

.typeInsertRow .insertBtn{
  padding: 8px 10px;
  border-radius: 10px;
  height: 36px;           /* match select height */
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

/* Delete button: RED */
.rowBtns .deleteBtn{
  background: rgba(239,68,68,0.18);
  border: 1px solid rgba(239,68,68,0.45);
  color: rgba(255,220,220,1);
}
.rowBtns .deleteBtn:hover{
  background: rgba(239,68,68,0.24);
  border-color: rgba(239,68,68,0.60);
}

/* Mic test bubble: tighter */
.smallBtn{
  padding: 6px 10px;
}

/* Recorder preview: remove seek bar and align volume with play button */
.playerControlsInline{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.playerVolInline{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 0;
  flex: 1;
  min-width: 0;
}
.playerVolInline .volLabel{
  font-size: 12px;
  opacity: 0.85;
}

/* About modal */
.aboutCard{
  max-width: 680px;
}
.aboutHeader{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}
.aboutAppIcon{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}
.aboutVersion{
  font-size: 13px;
  opacity: 0.85;
  margin-top: 2px;
}
.aboutCopy{
  font-size: 13px;
  opacity: 0.92;
}
.aboutActions{
  display:flex;
  justify-content:flex-end;
  margin-top: 14px;
}

/* Runsheet Preview modal */
.runsheetPreviewCard{
  /* A4 portrait proportions (210mm x 297mm ≈ 1:1.414) */
  width: min(calc((100vh - 120px) / 1.414), calc(100vw - 80px));
  height: calc(100vh - 60px);
  max-width: none;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 22px 28px 20px;
}

.runsheetPreviewHeader{
  flex: 0 0 auto;
  margin-bottom: 12px;
}

.runsheetPreviewBody{
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;
  overflow: hidden;
  background: #fff;
}

.runsheetPreviewFrame{
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

.runsheetPreviewActions{
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* Export complete modal */
.exportDoneCard{
  max-width: 640px;
  width: min(640px, calc(100vw - 48px));
  text-align: left;
  padding: 26px 28px;
}

.exportDonePathWrap{
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(0,0,0,0.20);
}

.exportDoneLabel{
  font-size: 12px;
  font-weight: 800;
  color: rgba(243,246,255,0.72);
  margin-bottom: 6px;
}

.exportDonePath{
  font-size: 13px;
  font-weight: 800;
  color: rgba(243,246,255,0.92);
  word-break: break-all;
  user-select: text;
}

.exportDoneActions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* Modal open state (reuses existing overlay) */
.vtModalOverlay.open{
  display:flex;
}

/* =========================================================
   Voice Recorder popup positioning (dock right, no blur)

   The recorder uses #voiceRecModal.vtModalOverlay
   We keep other modals using the default overlay styling.
   ========================================================= */
#voiceRecModal{
  /* Remove blur/dim */
  background: transparent !important;
  backdrop-filter: none !important;

  /* Dock to the far right */
  align-items: flex-start;
  justify-content: flex-end;
  padding: 16px;

  /* Let the page remain interactive behind it */
  pointer-events: none;
}

#voiceRecModal .voiceRecCard{
  margin: 0;
  max-height: calc(100vh - 32px);
  overflow: auto;
  pointer-events: auto;
}



/* Danger buttons */
.dangerTop{
  background: rgba(255,0,0,0.18);
  border: 1px solid rgba(255,0,0,0.35);
  color: #fff;
}
.dangerTop:hover{ background: rgba(255,0,0,0.28); }

.dangerBtn{
  background: rgba(255,0,0,0.18);
  border: 1px solid rgba(255,0,0,0.35);
  color: #fff;
}
.dangerBtn:hover{ background: rgba(255,0,0,0.28); }


/* Uniform small row buttons */
.miniBtn{
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.playBtn.miniBtn{ padding: 0; }


.exportNote{
  font-size: 12px;
  font-weight: 400;
  opacity: 0.8;
}

.btnExportSection{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 10px;
}


/* ==============================================
   About modal polish
   ============================================== */

.aboutCard{
  width: min(680px, calc(100vw - 80px));
  padding: 26px 28px;
  text-align: left;
  border-radius: 22px;
}

.aboutHeader{
  gap: 14px;
  margin-bottom: 14px;
}

.aboutIcon{
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutTitleWrap{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.aboutCard .vtModalTitle{
  font-size: 18px;
  margin: 0;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.2px;
}

.aboutVersion{
  font-size: 13px;
  color: rgba(243,246,255,0.72);
  opacity: 1;
}

.aboutBody{
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.aboutCopy{
  font-size: 13px;
  color: rgba(243,246,255,0.78);
  line-height: 1.35;
}

.aboutActions{
  margin-top: 18px;
}

.aboutActions .primary{
  min-width: 120px;
}

/* Donate section inside About modal */
.aboutDonateSection{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}
.aboutDonateRow{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  text-align: left;
}
.aboutDonateCopy{
  font-size: 12.5px;
  color: rgba(243,246,255,0.72);
  line-height: 1.45;
}
.aboutDonateLink{
  color: #F2C94C;
  text-decoration: none;
  font-weight: 600;
}
.aboutDonateLink:hover{
  color: #FFD966;
  text-decoration: underline;
}
.aboutDonatelogo{
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  object-fit: contain;
}
.aboutDonateBtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 8px;
  border: 1.5px solid rgba(212, 175, 55, 0.7);
  background: rgba(10, 10, 15, 0.95);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 8px rgba(212,175,55,0.15);
  transition: filter 0.15s, border-color 0.15s;
}
.aboutDonateBtn:hover{
  filter: brightness(1.15);
  border-color: rgba(212, 175, 55, 0.95);
}
.aboutDonateHeart{
  font-size: 15px;
  line-height: 1;
}
/* Playlist header – inline status bar */
.playlistHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}

.playlistTitle {
  font-weight: 800;
  color: #ffffff;
}

.playlistLabel {
  color: rgba(255,255,255,0.75);
}

.playlistSep {
  color: rgba(255,255,255,0.35);
}

.playlistValue {
  font-weight: 700;
}

.lengthValue {
  color: #3dff9b; /* green */
}



/* Mic test: hide status text, keep meter + buttons centered */
#micStatus{ display:none !important; }
#btnMicTest, #btnMicRefresh{ min-width: 0 !important; width: auto !important; }
.recBox .row.micRow .micMeterBlock{ padding-right: 0 !important; }
.recBox .row.micRow .micControls{ position: static !important; padding-bottom: 0 !important; }


/* =========================
   Text Note playlist items
   ========================= */
.item.isTextNote{
  background: linear-gradient(0deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08));
  border-color: rgba(255,255,255,0.18);
}
.item.isTextNote .badgeText{
  color: rgba(243,246,255,0.92);
}
.item.isTextNote .noteTitle{
  font-style: italic;
  opacity: 0.95;
}

.noteInlineRow{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-left: 4px;
}
.noteInlineText{
  color: rgba(160,210,160,0.85);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.2px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  cursor: pointer;
  max-width: 150ch;
  padding: 4px 0 4px 14px;
}
.noteInlineText:hover{
  color: rgba(180,235,180,1);
}

/* Text note type dropdown shown in the playlist (green line under NOTE badge) */
.noteTypeSelectPlaylist{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(11,11,22,0.95);
  border: 1px solid rgba(255,255,255,0.18);
  color: #3fbf6f;
  border-radius: 10px;
  padding: 0 20px 0 7px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  height: 24px;
  cursor: pointer;
  min-width: 115px;
  max-width: 115px;
  overflow: hidden;
  white-space: nowrap;
  margin-right: -4px;
}

.noteTypeSelectPlaylist:focus{
  outline: 2px solid rgba(242,201,76,0.55);
  outline-offset: 2px;
}

.noteTypeSelectPlaylist:hover{
  border-color: rgba(255,255,255,0.28);
}

/* Add a simple ▼ caret using background */
.noteTypeSelectPlaylist{
  background-image: linear-gradient(45deg, transparent 50%, rgba(234,240,255,0.72) 50%),
                    linear-gradient(135deg, rgba(234,240,255,0.72) 50%, transparent 50%),
                    linear-gradient(to right, rgba(255,255,255,0.0), rgba(255,255,255,0.0));
  background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%, 0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
}

/* Selected playlist item (for insert-at-position workflows) */
.item.isSelected{
  outline: 2px solid rgba(0,212,255,0.55);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(0,212,255,0.18) inset, 0 0 18px rgba(0,212,255,0.14);
}

/* Insert Note button */
.typeInsertRow .insertBtn.insertNote{
  border-color: rgba(255,255,255,0.22);
}

/* =========================================================
   Mic UI stability fixes
   - Prevent dropdown/meter shifting on Test/Refresh
   - Prevent micro scrollbar flash
   ========================================================= */
#btnMicTest{
  width: 84px !important;          /* fixed width stops Test ↔ Stop reflow */
  min-width: 84px !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

#btnMicRefresh{
  width: 44px !important;
  min-width: 44px !important;
  justify-content: center !important;
}

.micSelect{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Use a single consistent layout model (no absolute positioning) */
.recBox .row.micRow .micControls{
  position: static !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.recBox .row.micRow .micControls .micSelect{
  flex: 1 1 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Ensure the meter row doesn't reserve phantom space */
.recBox .row.micRow .micMeterBlock{
  padding-right: 0 !important;
}

/* =========================================================
   Mic UI stability (v3)
   Root cause observed: on click, buttons move down by 1px due to global
   button:active { transform: translateY(1px); } which can clip bottoms
   inside a tight container, causing a momentary vertical overflow scrollbar.
   Fix: disable the active transform for mic buttons and ensure enough height.
   ========================================================= */

/* Keep sidebar stable (no flash) */
html{ scrollbar-gutter: stable; }
.sidebarPanel{ scrollbar-gutter: stable; overflow-y: auto; }

/* DO NOT clip mic controls */
.recBox .row.micRow{ overflow: visible !important; }

/* Stable meter row layout (meter grows, buttons fixed) */
.recBox .row.micRow .micMeterRow{
  display: grid !important;
  grid-template-columns: 1fr 44px 84px !important; /* meter | refresh | test */
  align-items: center !important;
  justify-content: stretch !important;
  gap: 10px !important;
  padding-bottom: 2px !important; /* tiny breathing room prevents cut-off */
}

.recBox .row.micRow .micLevel{
  width: 100% !important;
  max-width: none !important;
}

/* Lock dropdown width */
.recBox .row.micRow .micControls{ display: block !important; }
.recBox .row.micRow .micControls .micSelect{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Fixed button sizing + disable active press shift just for these */
#btnMicRefresh, #btnMicTest{
  height: 34px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

#btnMicRefresh{
  width: 44px !important;
  min-width: 44px !important;
}

#btnMicTest{
  width: 84px !important;
  min-width: 84px !important;
}

/* Prevent the global translateY(1px) from clipping these buttons */
#btnMicRefresh:active,
#btnMicTest:active{
  transform: none !important;
}



/* =========================================================
   Music metadata editor (music items only)
   ========================================================= */

.metaOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.metaModal{
  width: min(560px, 92vw);
  background: linear-gradient(180deg, rgba(20,26,51,0.97), rgba(10,12,22,0.96));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.55);
  padding: 18px 18px 16px;
}

.metaModal h2{
  margin: 0 0 8px 0;
  font-size: 18px;
  letter-spacing: 0.2px;
}

.metaSub{
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(243,246,255,0.65);
  margin-bottom: 14px;
}

.metaGrid{
  display: grid;
  gap: 12px;
}

.metaWriteRow{
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}

.metaWriteRow input[type="checkbox"]{
  transform: translateY(1px);
  margin-right: 10px;
}

.metaWriteLabel{
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(243,246,255,0.90);
  cursor: pointer;
}

.metaWriteWarn{
  margin-top: 6px;
  margin-left: 24px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(243,246,255,0.65);
}

.metaHelp{
  margin-top: 6px;
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
  white-space: pre-line;
}

.metaField label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(243,246,255,0.78);
  margin: 0 0 6px 0;
}

.metaField input{
  width: 100%;
  padding: 10px 12px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: rgba(243,246,255,0.92);
  outline: none;
}

.metaField input:focus{
  border-color: rgba(58,160,255,0.65);
  box-shadow: 0 0 0 3px rgba(58,160,255,0.18);
}
.metaField input[type="time"],
.metaField input[type="date"]{
  cursor: pointer;
  color-scheme: dark;
  position: relative;
  height: 40px;
  box-sizing: border-box;
}
.metaField input[type="time"]::-webkit-calendar-picker-indicator,
.metaField input[type="date"]::-webkit-calendar-picker-indicator{
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.metaField input[type="time"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
.metaField input[type="date"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

.metaSelect{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #1a1a22;
  color: rgba(243,246,255,0.92);
  outline: none;
  font-size: 14px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.metaSelect option{
  background: #1a1a22;
  color: rgba(243,246,255,0.92);
}
.metaSelect:focus{
  border-color: rgba(58,160,255,0.65);
  box-shadow: 0 0 0 3px rgba(58,160,255,0.18);
}
.exportBitrateSelect{
  width: auto;
  min-width: 110px;
}

.metaButtons{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

.metaBtn{
  font-weight: 800;
}

.metaBtnGhost{
  background: #2a2a33;
  color: #e6e6e6;
  border: 1px solid rgba(255,255,255,0.10);
}
.metaBtnGhost:hover{
  background: #343443;
}

.metaBtnSave{
  background: rgba(58,160,255,0.92);
  color: #07101b;
  border: 1px solid rgba(255,255,255,0.12);
}
.metaBtnSave:hover{
  background: rgba(58,160,255,1);
}


.metaBtnSkip{
  background: rgba(255, 193, 7, 0.85);
  color: #1b1400;
  border: 1px solid rgba(255,255,255,0.12);
}
.metaBtnSkip:hover{
  background: rgba(255, 193, 7, 1);
}


/* Export metadata modal button colors */
.exportMetaButtons button {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 700;
}
.exportMetaButtons .btnCancel {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
}
.exportMetaButtons .btnCancel:hover {
  background: rgba(255,255,255,0.10);
}
.exportMetaButtons .btnExport {
  background: rgba(60, 140, 255, 0.85);
  color: #fff;
  border-color: rgba(60, 140, 255, 0.95);
}
.exportMetaButtons .btnExport:hover {
  background: rgba(60, 140, 255, 1);
}


/* New Playlist button (top row, far right) */
.newPlaylistBtn{
  padding: 8px 12px;
  border-radius: 14px;
  font-weight: 900;
  background: rgba(220, 53, 69, 0.18);
  border: 1px solid rgba(220, 53, 69, 0.35);
}
.newPlaylistBtn:hover{
  background: rgba(220, 53, 69, 0.26);
  border-color: rgba(220, 53, 69, 0.55);
  filter: brightness(1.05);
}

/* Confirm modal buttons */
.metaBtnSave{
  background: rgba(40, 167, 69, 0.85);
  color: #061a0c;
  border: 1px solid rgba(255,255,255,0.12);
}
.metaBtnDontSave{
  background: rgba(220, 53, 69, 0.85);
  color: #220608;
  border: 1px solid rgba(255,255,255,0.12);
}
.metaBtnCancel{
  background: rgba(255,255,255,0.10);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.20);
}


/* --- Playlist: filename inline with duration/status bubbles (music only) --- */
.metaRow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.itemFileNameInline{
  flex:0 1 auto;
  min-width: 0;
  max-width: 340px;
  font-size: 12px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  padding-right: 6px;
}

.itemFileNameInline:focus{
  outline: 2px solid rgba(255,255,255,0.25);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ================================
   Playlist header spacing tweak
   (Panel header + New Playlist btn)
   ================================ */

.panelHeader{
  padding-bottom: 10px;   /* creates breathing room above the drop zone */
}

.panelTitle.playlistInline{
  margin: 0;              /* removes the built-in bottom margin that pushes the header taller */
  line-height: 1.2;       /* keeps text vertically tidy */
}

.newPlaylistBtn{
  align-self: center;     /* ensures it sits centered in the header row */
  margin-top: 0;          /* prevents it drifting down */
}

/* extra safety gap (optional) */
.dropZone{
  margin-top: 2px;
}
/* ================================
   Export metadata popup – small UI tweaks only
   (safe: does NOT change modal layout/position)
   ================================ */

.metaTitle{
  font-size: 20px;
  font-weight: 700;
}

.metaField + .metaField{
  margin-top: 14px; /* pushes "Show name / Title" down a touch */
}
.metaField + .showSetupDateTimeRow,
.metaModal .showSetupDateTimeRow{
  margin-top: 14px;
}
.showSetupDateTimeRow + .metaField{
  margin-top: 14px;
}
/* =========================================================
   Voice Recorder modal
   ========================================================= */
.voiceRecCard{ 
  width: min(920px, 94vw);
  max-height: min(86vh, 860px);
  text-align: left;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;

  border: 1px solid rgba(43,214,111,0.45);
  box-shadow: 0 0 18px rgba(43,214,111,0.15);
}

.voiceRecHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.voiceRecTitle{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--warn);
}

.voiceRecClose{
  margin-left:auto;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(234,240,255,0.92);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 800;
}

.voiceRecClose:hover{
  background: rgba(255,255,255,0.10);
}

.voiceRecBody{
  display:flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding-right: 4px;
}

.voiceRecMicRow{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.voiceRecMicRow .micControls{
  min-width: 260px;
}

.voiceRecWaveWrap{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 10px;
}

#recWave{
  width: 100%;
  height: 160px;
  display:block;
  border-radius: 12px;
  background: rgba(0,0,0,0.25);
}

.voiceRecStatus{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}

.recStatusLeft{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
}

.recLiveDot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset;
}

.recLiveDot.isLive{
  background: rgba(255,60,60,0.95);
  animation: recPulse 0.9s infinite;
  box-shadow: 0 0 16px rgba(255,60,60,0.35);
}

@keyframes recPulse{
  0%,100%{ transform: scale(1); filter: brightness(1); }
  50%{ transform: scale(1.18); filter: brightness(1.25); }
}

#recTimer{
  font-weight: 900;
  letter-spacing: 0.2px;
  color: rgba(234,240,255,0.92);
}

.voiceRecControls{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.voiceRecControls button{
  padding: 10px 12px;
  border-radius: 12px;
}


/* --- Voice Recorder control button colors --- */
#voiceRecModal #btnRecStart{
  background: rgba(43,214,111,0.18);
  border: 1px solid rgba(43,214,111,0.45);
  color: rgba(243,246,255,0.95);
  font-weight: 900;
  cursor: pointer;
}
#voiceRecModal #btnRecStart:hover{
  background: rgba(43,214,111,0.28);
  border-color: rgba(43,214,111,0.65);
}

#voiceRecModal #btnRecStop{
  background: rgba(255,77,77,0.18);
  border: 1px solid rgba(255,77,77,0.45);
  color: rgba(243,246,255,0.95);
  font-weight: 900;
  cursor: pointer;
}
#voiceRecModal #btnRecStop:hover{
  background: rgba(255,77,77,0.28);
  border-color: rgba(255,77,77,0.65);
}

#voiceRecModal #btnRecUse{
  background: rgba(245,196,0,0.18);
  border: 1px solid rgba(245,196,0,0.50);
  color: rgba(243,246,255,0.96);
  font-weight: 900;
  cursor: pointer;
}
#voiceRecModal #btnRecUse:hover{
  background: rgba(245,196,0,0.26);
  border-color: rgba(245,196,0,0.70);
}

#voiceRecModal #btnRecClear{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(243,246,255,0.92);
  font-weight: 900;
  cursor: pointer;
}
#voiceRecModal #btnRecClear:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}

/* Disabled state (keep readable, but clearly inactive) */
#voiceRecModal .voiceRecControls button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

/* Close button: give it a little colour */
#voiceRecModal .voiceRecClose{
  border-color: rgba(255,77,77,0.35);
  background: rgba(255,77,77,0.10);
}
#voiceRecModal .voiceRecClose:hover{
  border-color: rgba(255,77,77,0.55);
  background: rgba(255,77,77,0.18);
}



.voiceRecFooter{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

@media (max-width: 520px){
  #recWave{ height: 140px; }
  .voiceRecStatus{ flex-direction: column; align-items: flex-start; }
}


/* =========================================================
   Voice Recorder modal
   ========================================================= */

.voiceRecCard{
  width: min(900px, 94vw);
  max-height: 88vh;
  text-align: left;
  padding: 18px 18px 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.voiceRecHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 6px 10px;
}

.voiceRecTitle{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 900;
  color: rgba(243,246,255,0.92);
}

.voiceRecClose{
  margin-left: auto;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(243,246,255,0.92);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 900;
}

.voiceRecClose:hover{
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
}

.voiceRecBody{
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding: 6px;
}

.voiceRecMic{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 12px;
}

.voiceRecMic .micRow{
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 10px;
  row-gap: 10px;
  align-items: center;
}

.voiceRecMic .micSelect{
  width: 100%;
  min-width: 260px;
}

.voiceRecMic .micMeterBlock{
  grid-column: 1 / 2;
  width: 100%;
}

.voiceRecMic .micLevel{
  width: 100%;
}

.voiceRecWaveWrap{
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 12px;
}

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

.voiceRecWaveTitle .label{
  font-size: 13px;
  font-weight: 900;
  color: rgba(243,246,255,0.78);
}

.voiceRecStatus{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.recLiveDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.recLiveDot.isLive{
  background: #ff3b30;
  animation: recPulse 1s infinite;
  box-shadow: 0 0 14px rgba(255,59,48,0.55);
}

@keyframes recPulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.12); opacity: 0.55; }
}

.recLiveLabel{
  font-size: 12px;
  font-weight: 900;
  color: rgba(243,246,255,0.78);
}

.recTimer{
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 900;
  color: rgba(243,246,255,0.92);
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.recWave{
  width: 100%;
  height: 160px;
  display: block;
  border-radius: 12px;
  background: rgba(0,0,0,0.26);
}

.voiceRecControls{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.voiceRecControls button{
  border-radius: 14px;
}

.voiceRecPreview{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 12px;
}

.voiceRecPreview .playerBox{
  margin: 0;
}

.voiceRecFooter{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 6px 0;
}

@media (max-width: 640px){
  .voiceRecStatus{ width: 100%; justify-content: flex-start; margin-left: 0; }
  .voiceRecWaveTitle{ flex-direction: column; align-items: flex-start; }
}

/* Force the LIVE dot to be obvious on all displays */
.recLiveDot{
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45) inset,
    0 0 0 1px rgba(255,255,255,0.14);
}

.recLiveDot.isLive{
  background: #ff3b30;
  animation: recPulse 0.9s infinite;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.40) inset,
    0 0 18px rgba(255,59,48,0.55);
}


.micGrid{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;}
.micGrid .micSelect{grid-column:1/2;}
.micGrid #btnMicRefresh{grid-column:2/3;}
.micGrid #btnMicTest{grid-column:3/4;}
.micGrid .micMeterBlock{grid-column:1/2;grid-row:2; width:100%;}


/* Export progress modal */
.exportProgressCard{max-width:520px;width:min(520px, 94vw);} 
.exportProgressBody{padding:14px 16px 18px;}
.exportProgressActions{display:flex;justify-content:flex-end;margin-top:14px;gap:10px;}


/* Voice Recorder highlight */
#btnOpenRecorder {
  background: linear-gradient(180deg, rgba(90,200,120,0.35), rgba(40,140,80,0.35));
  border: 1px solid rgba(120,255,170,0.6);
  color: #eafff0;
  box-shadow: inset 0 0 8px rgba(120,255,170,0.25);
}

#btnOpenRecorder:hover {
  background: linear-gradient(180deg, rgba(110,230,150,0.45), rgba(60,170,110,0.45));
  box-shadow: 0 0 10px rgba(120,255,170,0.45), inset 0 0 10px rgba(120,255,170,0.35);
}

#btnOpenRecorder:active {
  transform: translateY(1px);
}


/* Export button – distinct blue (final action) */
#btnExport {
  background: linear-gradient(180deg, rgba(70,120,220,0.45), rgba(40,80,170,0.45));
  border: 1px solid rgba(120,170,255,0.65);
  color: #eef4ff;
  box-shadow: inset 0 0 8px rgba(120,170,255,0.25);
}

#btnExport:hover {
  background: linear-gradient(180deg, rgba(90,145,255,0.55), rgba(60,105,210,0.55));
  box-shadow:
    0 0 10px rgba(120,170,255,0.45),
    inset 0 0 10px rgba(120,170,255,0.35);
}

#btnExport:active {
  transform: translateY(1px);
}


/* Topbar group dividers */
.topbarDivider{
  display: inline-block;
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.15);
  margin: 0 4px;
  flex-shrink: 0;
  align-self: center;
}

/* Top row spacing */

/* Push entire right menu from title block */
.topbar .right {
  padding-left: 70px !important;
}

/* Separation after Export */
#btnExport {
  margin-right: 10px !important;
}

/* Icon-only buttons (Save/Open/Undo/Redo/Help/About) — tight cluster */
.topbar .right .btnIconOnly {
  margin-left: 2px !important;
  margin-right: 0 !important;
}


/* Prevent app title wrapping (keep on one line) */
.titleMain {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.titleMain > span {
  white-space: nowrap;
}

/* Ensure left header area doesn't collapse too much */
.topbar .left {
  min-width: 360px;
}


/* Mini SVG icons (playlist row buttons) */
.miniIcon{
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}

.miniBtn:hover .miniIcon{
  filter: drop-shadow(0 0 10px rgba(255,210,120,0.55)) brightness(1.12) saturate(1.35);
}

.playBtn .miniIcon{
  width: 17px;
  height: 17px;
}


/* Larger, better-aligned playlist SVG icons */
.miniIcon{
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

.playBtn .miniIcon{
  width: 22px;
  height: 22px;
}

/* Ensure all row buttons align perfectly */
.rowBtns button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Delete button alignment (uses SVG instead of text) */
.deleteBtn{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* === Playlist icon normalisation === */
/* All playlist icons identical size and perfectly centred */

.miniIcon{
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}

.playBtn .miniIcon{
  width: 22px;
  height: 22px;
}

/* Ensure all row buttons align identically */
.rowBtns button,
.miniBtn,
.playBtn,
.deleteBtn{
  height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* --- Track meta helper (bubbles ? icon) --- */
.metaHelpBtn{
  height: 26px;
  width: 26px;
  min-width: 26px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.metaHelpBtn:hover{
  background: rgba(212,175,55,0.18);
  border-color: rgba(212,175,55,0.6);
  box-shadow: 0 0 8px rgba(212,175,55,0.2);
  transform: scale(1.08);
}

.metaHelpBtn:active{
  transform: scale(0.95);
}

.metaHelpIcon{
  width: 15px;
  height: 15px;
  display: block;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.15s, filter 0.15s;
}

.metaHelpBtn:hover .metaHelpIcon{
  opacity: 1;
  filter: brightness(1.2);
}


/* --- New Show Setup Modal --- */
.showSetupOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.60);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.showSetupCard{
  width: min(560px, 96vw);
  background: rgba(8, 12, 24, 0.98);
  border: 1px solid rgba(242,201,76,0.35);
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.65);
  padding: 18px 18px 14px;
}

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

.showSetupTitle h2{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #F2C94C;
  letter-spacing: 0.2px;
}

.showSetupBody{
  display: grid;
  gap: 12px;
}

.showSetupField label{
  display:block;
  margin: 0 0 6px;
  font-size: 12px;
  color: rgba(234,240,255,0.82);
}

.showSetupField input{
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(234,240,255,0.95);
  outline: none;
}

.showSetupField input:focus{
  border-color: rgba(242,201,76,0.55);
  box-shadow: 0 0 0 3px rgba(242,201,76,0.12);
}

/* Time & date inputs — white icons, dark picker, click anywhere to open */
.showSetupField input[type="time"],
.showSetupField input[type="date"]{
  cursor: pointer;
  color-scheme: dark;
  position: relative;
}
.showSetupField input[type="time"]::-webkit-calendar-picker-indicator,
.showSetupField input[type="date"]::-webkit-calendar-picker-indicator{
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
/* Visible replacement icons via background on the input itself */
.showSetupField input[type="time"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
.showSetupField input[type="date"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

.showSetupDateTimeRow{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.showSetupPreview{
  margin-top: 2px;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: rgba(234,240,255,0.85);
  font-size: 12px;
  line-height: 1.35;
}
.showSetupPreview b{
  color: rgba(234,240,255,0.95);
}

.showSetupButtons{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.showSetupBtn{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(234,240,255,0.92);
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
}

.showSetupBtn:hover{
  background: rgba(255,255,255,0.09);
}

.showSetupBtnPrimary{
  border-color: rgba(242,201,76,0.55);
  background: rgba(242,201,76,0.12);
  color: #F2C94C;
}

.showSetupBtnPrimary:hover{
  background: rgba(242,201,76,0.18);
}


/* --- Voice recorder: dock far-right, vertically centered, no blur/dim --- */
#voiceRecModal.vtModalOverlay{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* keep the existing modal show/hide behaviour (do NOT force display) */
  justify-content: flex-end !important;
  align-items: center !important;

  padding-right: 20px !important;
}

/* the actual popup card */
#voiceRecModal .vtModalCard.voiceRecCard{
  width: 550px !important;
  max-width: 550px !important;
  margin: 0 !important;
}


/* Make header show meta look clickable */
.showMetaSummary.is-clickable{
  cursor: pointer;
}
.showMetaSummary.is-clickable:hover{
  text-decoration: underline;
}
.showMetaSummary.is-clickable:focus{
  outline: 2px solid rgba(242,201,76,0.8);
  outline-offset: 3px;
}

/* Placeholder state for header show meta */
.showMetaSummary.is-placeholder{
  opacity: 0.7;
  font-style: italic;
}

/* ----------------------------------------------------
   Artwork pickers (track meta + show details)
----------------------------------------------------- */

.metaArtRow {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 8px;
}

.metaArtLabel {
  font-weight: 600;
  opacity: 0.9;
  padding-top: 6px;
}

.metaArtContent {
  display: flex;
  gap: 10px;
  align-items: center;
}

.metaArtPreview {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.15);
}

.metaArtButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.showArtRow {
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.showArtInner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.showArtPreview {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.15);
}

.showArtButtons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Track meta editor: keep artwork preview aligned with the Show Details style but slightly smaller */
.metaModal .showArtPreview {
  width: 92px;
  height: 92px;
}

.metaModal .showArtRow {
  margin-top: 8px;
  margin-bottom: 4px;
}

/* ── Show Preview modal ── */
.previewCard{
  max-width:820px;
  width:min(820px, 94vw);
}

.previewHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 10px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}

.previewTitle{
  font-size:15px;
  font-weight:900;
  letter-spacing:0.2px;
  color:rgba(212,175,55,0.95);
}

.previewSubtitle{
  font-size:11px;
  font-weight:600;
  color:rgba(234,240,255,0.45);
  text-align:center;
  padding:6px 8px 0;
}

.previewBody{
  padding:16px 0 6px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.previewVizCanvas{
  width:100%;
  height:64px;
  display:block;
  border-radius:8px;
  background:rgba(0,0,0,0.25);
}

.previewNowPlaying{
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:rgba(242,201,76,0.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 8px;
  min-height:18px;
}

.previewTimeRow{
  display:flex;
  align-items:center;
  gap:10px;
}

.previewTime{
  font-size:12px;
  font-weight:700;
  color:rgba(234,240,255,0.80);
  font-family:'Courier New', monospace;
  min-width:52px;
  white-space:nowrap;
}

.previewTime:first-child{ text-align:right; }
.previewTime:last-child{ text-align:left; }

.previewProgressBar{
  flex:1;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  overflow:hidden;
  cursor:pointer;
  position:relative;
}

.previewProgressFill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, rgba(212,175,55,0.85), rgba(242,201,76,0.75));
  border-radius:999px;
  transition:width 0.15s linear;
  pointer-events:none;
}

/* Track boundary markers */
.previewMarker{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(242,201,76,0.7);
  pointer-events:none;
  z-index:2;
}

/* Overlap zones */
.previewOverlap{
  position:absolute;
  top:0;
  bottom:0;
  background:rgba(242,201,76,0.15);
  border-left:1px solid rgba(242,201,76,0.3);
  border-right:1px solid rgba(242,201,76,0.3);
  pointer-events:none;
  z-index:1;
}

.previewControls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding-top:4px;
}

.previewTransportBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:38px;
  min-width:52px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  color:rgba(234,240,255,0.85);
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.previewTransportBtn:hover{
  background:rgba(212,175,55,0.14);
  border-color:rgba(212,175,55,0.45);
  box-shadow:0 0 8px rgba(212,175,55,0.2);
}

.previewTransportBtn:active{
  transform:translateY(1px);
}

.previewBtnIcon{
  width:18px;
  height:18px;
  display:block;
  flex:0 0 auto;
}

.previewBtnLabel{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.2px;
}

.previewPlayBtn{
  height:38px;
  min-width:64px;
  padding:0 18px;
  border-radius:10px;
  border-color:rgba(212,175,55,0.50);
  background:rgba(212,175,55,0.14);
}

.previewPlayBtn .previewPlayIcon{
  width:20px;
  height:20px;
}

.previewPlayBtn:hover{
  background:rgba(212,175,55,0.24);
  border-color:rgba(212,175,55,0.70);
  box-shadow:0 0 14px rgba(212,175,55,0.4);
}

/* Volume row */
.previewVolumeRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding-top:2px;
}

.previewVolIcon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  opacity:0.75;
}

.previewVolSlider{
  width:120px;
  height:6px;
  -webkit-appearance:none;
  appearance:none;
  background:rgba(255,255,255,0.12);
  border-radius:999px;
  outline:none;
  cursor:pointer;
}

.previewVolSlider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(135deg, #FFD966, #D4AF37);
  border:1px solid rgba(212,175,55,0.6);
  cursor:pointer;
  box-shadow:0 0 4px rgba(212,175,55,0.3);
}

/* ── Processing overlay ── */
.processingOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(10,12,20,0.75);
  backdrop-filter:blur(4px);
}

.processingOverlay.open{
  display:flex;
}

.processingCard{
  background:linear-gradient(170deg, rgba(30,34,52,0.98), rgba(18,20,32,0.98));
  border:1px solid rgba(212,175,55,0.35);
  border-radius:16px;
  padding:28px 36px;
  text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,0.5), 0 0 20px rgba(212,175,55,0.08);
  min-width:300px;
}

.processingTitle{
  font-size:16px;
  font-weight:900;
  color:rgba(212,175,55,0.95);
  margin-bottom:12px;
}

.processingStatus{
  font-size:13px;
  color:rgba(234,240,255,0.80);
  margin-bottom:14px;
}

.processingBarWrap{
  padding:0 10px;
}

.processingBar{
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  overflow:hidden;
}

.processingBarFill{
  height:100%;
  width:35%;
  background:linear-gradient(90deg, rgba(212,175,55,0.85), rgba(242,201,76,0.75));
  border-radius:999px;
  animation:processingPulse 1.2s infinite ease-in-out;
}

@keyframes processingPulse{
  0%   { transform:translateX(-140%); }
  100% { transform:translateX(380%); }
}

.processingHint{
  margin-top:14px;
  font-size:12px;
  color:rgba(234,240,255,0.50);
  font-weight:600;
}

/* ── Update available modal ── */
.updateCard{
  max-width:420px;
  width:min(420px, 92vw);
}

.updateHeader{
  padding:2px 2px 10px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}

.updateTitle{
  font-size:15px;
  font-weight:900;
  letter-spacing:0.2px;
  color:rgba(212,175,55,0.95);
}

.updateBody{
  padding:14px 0 8px;
}

.updateText{
  color:rgba(234,240,255,0.85);
  font-size:14px;
  line-height:1.5;
  margin:0 0 8px;
}

.updateVersion{
  color:rgba(242,201,76,0.92);
  font-size:14px;
  font-weight:700;
  margin:0;
}

.updateActions{
  padding-top:10px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* Release Notes modal */
.releaseNotesCard{
  max-width:820px;
  width:min(820px, 94vw);
  text-align:left;
}
.releaseNotesHeader{
  padding:2px 2px 10px;
  border-bottom:1px solid rgba(255,255,255,0.10);
  text-align:left;
}
.releaseNotesTitle{
  font-size:1.18rem;
  font-weight:700;
  color:#fff;
}
.releaseNotesBody{
  padding:14px 0 8px;
  max-height:50vh;
  overflow-y:auto;
  text-align:left;
}
.releaseNotesContent{
  margin:0;
  white-space:pre-wrap;
  word-wrap:break-word;
  font-family:inherit;
  font-size:0.88rem;
  line-height:1.55;
  color:rgba(255,255,255,0.85);
  text-align:left;
}
.releaseNotesCard .vtModalActions{
  justify-content:flex-start;
}

/* =========================================================
   Settings modal
   ========================================================= */
.settingsCard{
  width: min(600px, calc(100vw - 60px));
  text-align: left;
  padding: 24px 28px 20px;
}

.settingsHeader{
  margin-bottom: 14px;
}

/* Tab bar */
.settingsTabBar{
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 18px;
  padding-bottom: 0;
}

.settingsTab{
  padding: 8px 16px !important;
  border: none !important;
  border-radius: 10px 10px 0 0 !important;
  background: transparent !important;
  color: rgba(243,246,255,0.55) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.settingsTab:hover{
  color: rgba(243,246,255,0.8) !important;
  background: rgba(255,255,255,0.05) !important;
}

.settingsTab.active{
  color: #fff !important;
  background: rgba(124,92,255,0.25) !important;
  border-bottom: 2px solid var(--accent1) !important;
}

/* Pane content */
.settingsPane{
  min-height: 220px;
}

.settingsRow{
  margin-bottom: 14px;
}

.settingsLabel{
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(243,246,255,0.72);
  margin-bottom: 5px;
}

.settingsInput,
.settingsSelect{
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(10,14,28,0.9);
  color: #eaf0ff;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s;
}

.settingsInput:focus,
.settingsSelect:focus{
  border-color: rgba(124,92,255,0.6);
}

.settingsRowCheckbox{
  display: flex;
  align-items: center;
}

.settingsCheckLabel{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(243,246,255,0.85);
  cursor: pointer;
}

.settingsCheckLabel input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--accent1);
  cursor: pointer;
}

/* Mic row (select + refresh button side by side) */
.settingsMicRow{
  display: flex;
  gap: 8px;
}

.settingsMicSelect{
  flex: 1;
}

.settingsMicBtn{
  flex-shrink: 0;
  padding: 8px 12px !important;
  font-size: 12px !important;
}

/* Reset button row */
.settingsResetRow{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.settingsResetBtn{
  font-size: 12px !important;
  padding: 6px 14px !important;
}

/* Footer */
.settingsActions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
}