:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0c0f14;
  color: #ecf1f8;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #17202c 0, #0c0f14 42%); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

.app-shell { width: calc(100% - 32px); max-width: none; margin: 0 auto; padding: 28px 0 48px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 20px; }
h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.topbar p { margin: 6px 0 0; color: #9cabbd; }
.status-pill { border: 1px solid #344254; background: #141b24; border-radius: 999px; padding: 8px 12px; color: #b8c5d5; font-size: .9rem; }

.panel { background: rgba(20, 27, 36, .92); border: 1px solid #293646; border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.2); }
.setup-panel { display: grid; grid-template-columns: 1fr 220px; gap: 18px; padding: 18px; margin-bottom: 14px; }
.field-group label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #8495aa; margin-bottom: 8px; }
input[type="text"], select { width: 100%; border: 1px solid #344254; background: #0f141b; color: #e7edf5; border-radius: 10px; padding: 10px 12px; }
button { border: 1px solid #3a4859; background: #1b2430; color: #edf3f9; border-radius: 10px; padding: 10px 14px; }
button:hover:not(:disabled) { background: #253242; }
button.primary { background: #246bfe; border-color: #246bfe; }
button.primary:hover:not(:disabled) { background: #3a7cff; }
.stream-option { display: flex !important; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 12px !important; margin-bottom: 0 !important; color: #d8e1ec !important; text-transform: none !important; letter-spacing: normal !important; font-size: .9rem !important; cursor: pointer; }
.stream-note { color: #8fa0b5; font-size: .78rem; font-weight: 400; }
.stream-option input { width: 17px; height: 17px; margin: 0; accent-color: #5b8cff; }
.setting-help { margin-top: 5px; color: #7f90a5; font-size: .78rem; line-height: 1.35; }

.transport-panel { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 22px; padding: 16px 18px; margin-bottom: 22px; }
.transport-buttons { display: flex; gap: 9px; }
.transport { min-width: 92px; }
.timeline-wrap { min-width: 0; width: 100%; }
.time-row { display: flex; justify-content: space-between; color: #8fa0b5; font-variant-numeric: tabular-nums; font-size: .86rem; margin-top: 2px; }

.tracks-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tracks-head h2 { margin: 0; }
.loading-cluster { min-width: min(520px, 55vw); }
.loading-text { color: #8fa0b5; font-size: .9rem; text-align: right; }
.conversion-progress { margin-top: 7px; }
.conversion-progress-row { display: flex; justify-content: space-between; gap: 16px; color: #aebbd0; font-size: .82rem; }
.progress-track { height: 7px; margin-top: 5px; background: #0a0e13; border: 1px solid #263445; border-radius: 999px; overflow: hidden; }
.progress-bar { width: 0%; height: 100%; background: #5b8cff; transition: width .2s ease; }
.tracks { display: grid; gap: 10px; }
.empty-state { min-height: 180px; place-items: center; color: #8291a4; border: 1px dashed #304052; border-radius: 14px; display: grid; }
.track { display: grid; grid-template-columns: minmax(160px, 220px) minmax(320px, 1fr) 110px; gap: 16px; align-items: center; padding: 12px; border: 1px solid #263445; border-radius: 14px; background: rgba(14, 20, 28, .9); }
.track-meta { min-width: 0; }
.track-name { font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track-file { color: #77899e; font-size: .8rem; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wave-wrap { position: relative; height: 82px; border-radius: 10px; overflow: hidden; background: #0a0e13; border: 1px solid #202b38; cursor: pointer; }
.wave { display: block; width: 100%; height: 100%; }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.65); pointer-events: none; transform: translateX(-1px); left: 0; }
.track-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; align-self: stretch; }
.volume-stack { height: 82px; width: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.mute-btn.active { background: #c63f4d; border-color: #df5361; }
.volume { width: 22px; height: 60px; accent-color: #5b8cff; writing-mode: vertical-lr; direction: rtl; }
.volume-value { width: 42px; text-align: center; font-size: .75rem; color: #a8b5c5; font-variant-numeric: tabular-nums; }

.message { position: fixed; right: 22px; bottom: 22px; max-width: min(520px, calc(100vw - 44px)); padding: 12px 15px; border-radius: 11px; background: #2b1820; border: 1px solid #763344; color: #ffd9df; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.hidden { display: none; }

@media (max-width: 980px) {
  .setup-panel { grid-template-columns: 1fr; }
  .transport-panel { grid-template-columns: 1fr; }
  .tracks { overflow-x: auto; }
  .track { min-width: 760px; }
  .tracks-head { align-items: flex-start; gap: 12px; }
  .loading-cluster { min-width: 0; width: 58%; }
}

@media (max-width: 650px) {
  .app-shell { width: calc(100% - 20px); max-width: none; padding-top: 16px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .transport-buttons { width: 100%; }
  .transport { flex: 1; min-width: 0; }
}


.notes-panel { margin-top: 22px; padding: 18px; }
.notes-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.notes-head h2 { margin: 0; }
.notes-panel textarea { width: 100%; resize: vertical; min-height: 140px; border: 1px solid #344254; background: #0f141b; color: #e7edf5; border-radius: 10px; padding: 12px; font: inherit; line-height: 1.5; }
.notes-panel textarea:disabled { opacity: .55; cursor: not-allowed; }
.notes-status { margin-top: 8px; min-height: 1.2em; color: #91a2b7; font-size: .84rem; }
#exportBtn { min-width: 112px; }

.export-download { display: inline-block; margin-top: 8px; color: #9fc0ff; font-size: .86rem; text-decoration: none; }
.export-download:hover { text-decoration: underline; }
.export-download.hidden { display: none; }

.topbar-actions{display:flex;align-items:center;gap:10px}.signed-in{font-size:.9rem;opacity:.8}.topbar-actions form{margin:0}.logout-btn{padding:8px 12px;border-radius:8px}.login-page{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:min(420px,100%);padding:28px;border:1px solid var(--border, #333);border-radius:16px;background:var(--panel, #161616)}.login-card h1{margin-top:0}.login-form{display:grid;gap:16px}.login-form label{display:grid;gap:7px}.login-form input{width:100%;box-sizing:border-box;padding:12px;border-radius:8px;border:1px solid #555;background:#111;color:#fff}.login-error{margin:12px 0;padding:10px;border-radius:8px;background:#5a1d1d;color:#fff}

/* Compact recording/session selector row */
.setup-panel { display: block; padding: 18px; margin-bottom: 14px; }
.selector-row { display: grid; grid-template-columns: auto minmax(240px, 1fr) auto minmax(140px, 220px); align-items: center; gap: 10px 12px; }
.selector-row > label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #8495aa; white-space: nowrap; }
.selector-row > select { min-width: 0; }
.admin-btn { display: inline-flex; align-items: center; border: 1px solid #3a4859; background: #1b2430; color: #edf3f9; border-radius: 10px; padding: 8px 12px; text-decoration: none; font-size: .9rem; }
.admin-btn:hover { background: #253242; }

/* Admin user management */
.admin-shell { max-width: 1050px; }
.admin-panel { padding: 18px; margin-bottom: 16px; }
.admin-panel h2 { margin: 0 0 14px; }
.user-form { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(260px, 1.6fr) minmax(180px, 1fr) auto auto; gap: 12px; align-items: end; }
.user-form > label { display: grid; gap: 7px; color: #aebbd0; font-size: .82rem; }
.user-form input[type="text"], .user-form input:not([type]) , .user-form input[type="password"] { width: 100%; border: 1px solid #344254; background: #0f141b; color: #e7edf5; border-radius: 10px; padding: 10px 12px; }
.admin-checkbox { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; min-height: 42px; white-space: nowrap; }
.admin-checkbox input { width: 17px; height: 17px; }
.admin-users-list { display: grid; gap: 14px; }
.user-card { position: relative; }
.user-card .user-form { grid-template-columns: minmax(260px, 1.5fr) minmax(220px, 1fr) auto auto; }
.user-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.user-card-head h2 { margin: 0; }
.admin-badge { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; background: #244d33; border: 1px solid #37724b; color: #bce5c8; padding: 4px 7px; border-radius: 999px; }
.field-hint { color: #75869a; font-weight: 400; }
.user-actions { display: flex; align-items: end; }
.delete-user-form { margin-top: 10px; text-align: right; }
.danger-btn { background: #4b2027; border-color: #74313d; color: #ffd9df; }
.danger-btn:hover:not(:disabled) { background: #652832; }
.admin-message { padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; }
.admin-message.success { background: #173b27; border: 1px solid #2e6844; color: #c9f1d5; }
.admin-message.error { background: #4a1d25; border: 1px solid #74313d; color: #ffd9df; }

@media (max-width: 900px) {
  .selector-row { grid-template-columns: auto minmax(180px, 1fr) auto minmax(110px, .6fr); }
  .user-form, .user-card .user-form { grid-template-columns: 1fr; align-items: stretch; }
  .admin-checkbox { min-height: auto; }
}

@media (max-width: 650px) {
  .selector-row { grid-template-columns: auto 1fr; }
}

/* Compact transport icons and master volume */
.transport.icon-btn { min-width: 44px; width: 44px; padding: 9px; font-size: 1.05rem; line-height: 1; }
.mute-btn.icon-btn { width: 38px; min-width: 38px; height: 38px; padding: 5px; font-size: 1.05rem; line-height: 1; }
.master-volume-control { min-width: 300px; display: grid; grid-template-columns: auto minmax(150px, 1fr) auto auto; align-items: center; gap: 8px; color: #aebbd0; font-size: .82rem; }
.master-volume-control > label:first-child { text-transform: uppercase; letter-spacing: .06em; color: #8495aa; font-size: .72rem; white-space: nowrap; }
.master-volume { width: 100%; height: auto; accent-color: #5b8cff; }
.boost-option { white-space: nowrap; font-size: .76rem; }
#masterVolume { width: 100%; accent-color: #5b8cff; }
#masterVolumeValue { font-variant-numeric: tabular-nums; text-align: right; }
.boost-option { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; color: #d8e1ec; }
.boost-option input { accent-color: #5b8cff; }

@media (max-width: 980px) {
}

/* Per-track boost */
.volume-stack { height: 100px; }
.track { grid-template-columns: minmax(160px, 220px) minmax(320px, 1fr) 130px; }
.track-boost { display: inline-flex; align-items: center; gap: 3px; color: #8fa0b5; font-size: .68rem; white-space: nowrap; cursor: pointer; }
.track-boost input { width: 13px; height: 13px; margin: 0; accent-color: #5b8cff; }

/* Self-service password page */
.password-shell { max-width: 760px; }
.password-panel { padding: 22px; }
.password-form { display: grid; gap: 16px; max-width: 480px; }
.password-form label { display: grid; gap: 7px; color: #aebbd0; font-size: .84rem; }
.password-form input[type="password"] { width: 100%; box-sizing: border-box; border: 1px solid #344254; background: #0f141b; color: #e7edf5; border-radius: 10px; padding: 11px 12px; }
.password-form button { justify-self: start; }

/* Exported mixes */
.mixes-panel { margin-top: 22px; padding: 18px; }
.mixes-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.mixes-head h2 { margin: 0; }
.mix-player-row { display: grid; grid-template-columns: auto minmax(260px, 1fr) auto auto minmax(110px, 180px) 48px auto; align-items: center; gap: 10px; margin-top: 14px; }
.mix-player-row > label { color: #8495aa; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.mix-player-row select { min-width: 0; }
.mix-transport { display: flex; gap: 7px; }
#mixVolume { width: 100%; accent-color: #5b8cff; }
#mixVolumeValue { color: #aebbd0; font-size: .82rem; font-variant-numeric: tabular-nums; text-align: right; }
.mixes-panel .export-download { margin-top: 0; white-space: nowrap; }

@media (max-width: 980px) {
  .mix-player-row { grid-template-columns: auto minmax(220px, 1fr) auto; }
  .mix-player-row > label[for="mixVolume"] { grid-column: 1; }
  #mixVolume { grid-column: 2; }
  #mixVolumeValue { grid-column: 3; }
  .mix-transport { grid-column: 3; grid-row: 1; }
  .mixes-panel .export-download { grid-column: 2 / -1; }
}


/* Session range selection and clipping protection */
.selection-controls { margin-top: 12px; padding-top: 10px; border-top: 1px solid #263445; }
.selection-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 6px; color: #8fa0b5; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.focus-option, .prevent-clipping { display: inline-flex; align-items: center; gap: 7px; color: #aebbd0; font-size: .8rem; text-transform: none; letter-spacing: normal; white-space: nowrap; }
.focus-option { padding: 7px 11px; border: 1px solid #52647c; border-radius: 7px; background: #1b2532; color: #d7e2f0; font-weight: 650; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.focus-option:hover { border-color: #7290b7; background: #202d3d; }
.focus-option:has(input:checked) { background: #2463d4; border-color: #6fa0ff; color: #fff; box-shadow: 0 0 0 2px rgba(91,140,255,.18); }
.focus-option:has(input:disabled) { opacity: .48; cursor: not-allowed; }
.focus-option input { accent-color: #ffffff; }
.range-pair { position: relative; height: 24px; width: 100%; }
.selection-range { position: absolute; inset: 0; width: 100%; margin: 0; pointer-events: none; background: transparent; accent-color: #5b8cff; }
.selection-range::-webkit-slider-thumb { pointer-events: auto; }
.selection-range::-moz-range-thumb { pointer-events: auto; }
.selection-time-row { display: flex; justify-content: space-between; gap: 16px; color: #7f90a5; font-size: .75rem; font-variant-numeric: tabular-nums; }
.selection-time-row strong { color: #c6d2e0; font-weight: 500; }
.export-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 980px) {
  .transport-panel { grid-template-columns: auto auto minmax(360px, 1fr); overflow-x: auto; }
  .timeline-wrap { min-width: 360px; }
}

/* Playback streaming options, mix seek timeline, note dirty state, and track selection shading */
.track-transport-cluster { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 172px; }
.compact-stream-option { margin: 0 !important; flex-wrap: nowrap; font-size: .78rem !important; white-space: nowrap; }
#masterVolume.master-volume { width: 100%; height: auto; writing-mode: horizontal-tb; direction: ltr; }

.wave-wrap .selection-highlight { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(150, 158, 168, .22); border-left: 1px solid rgba(205, 212, 220, .35); border-right: 1px solid rgba(205, 212, 220, .35); pointer-events: none; z-index: 0; }
.wave-wrap .wave { position: relative; z-index: 1; }
.wave-wrap .playhead { z-index: 2; }

#saveNotesBtn.unsaved:not(:disabled) { background: #a92d3d; border-color: #d84a5c; color: #fff; }
#saveNotesBtn.unsaved:hover:not(:disabled) { background: #c1374a; }

.mix-stream-option { margin: 12px 0 0 !important; font-size: .82rem !important; }
.mix-timeline-wrap { width: 100%; margin-top: 12px; padding-top: 10px; border-top: 1px solid #263445; }
.mix-seek { width: 100%; accent-color: #5b8cff; cursor: pointer; }
.mix-seek:disabled { cursor: not-allowed; }
.mix-time-row { margin-top: 3px; }

@media (max-width: 980px) {
  .track-transport-cluster { min-width: 172px; }
}

/* Admin WAV-to-MP3 batch overlay */
.admin-convert-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(4, 8, 13, .78); backdrop-filter: blur(3px); }
.admin-convert-overlay.hidden { display: none; }
.admin-convert-dialog { width: min(980px, 96vw); max-height: min(82vh, 820px); overflow: auto; border: 1px solid #34465b; border-radius: 16px; background: #111923; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.admin-convert-toolbar { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 18px; background: rgba(17,25,35,.97); border-bottom: 1px solid #314155; backdrop-filter: blur(8px); }
.admin-convert-toolbar h2 { margin: 0 0 4px; font-size: 1.05rem; }
.admin-convert-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.admin-convert-list { display: grid; gap: 1px; padding: 8px 0; }
.admin-convert-row { display: grid; grid-template-columns: 28px minmax(240px, 1fr) minmax(190px, .65fr) 100px; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid rgba(49,65,85,.55); }
.admin-convert-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: #5b8cff; }
.admin-convert-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .87rem; }
.admin-file-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #263445; }
.admin-file-progress > div { height: 100%; width: 0; background: #5b8cff; transition: width .18s ease; }
.admin-convert-status { color: #93a5ba; font-size: .76rem; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-convert-row.done .admin-convert-status { color: #8bd3a2; }
.admin-convert-row.error .admin-convert-status { color: #ff8d9e; }
.admin-convert-row.converting { background: rgba(91,140,255,.07); }
.admin-convert-empty { padding: 28px 18px; color: #8fa0b5; text-align: center; }
@media (max-width: 700px) { .admin-convert-overlay { padding: 10px; } .admin-convert-row { grid-template-columns: 26px minmax(150px, 1fr) 76px; } .admin-file-progress { grid-column: 2 / -1; grid-row: 2; } .admin-convert-status { grid-column: 3; } .admin-convert-toolbar { align-items: flex-start; } }

/* Selection range visualization and synchronized waveform zoom */
.range-pair { height: 30px; }
.selection-track-base {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #566171;
  overflow: hidden;
  pointer-events: none;
}
.selection-track-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: inherit;
  background: #5b8cff;
}
.selection-range {
  -webkit-appearance: none;
  appearance: none;
  height: 30px;
  cursor: default;
  accent-color: transparent;
}
.selection-range::-webkit-slider-runnable-track { height: 5px; background: transparent; border: 0; }
.selection-range::-moz-range-track { height: 5px; background: transparent; border: 0; }
.selection-range::-moz-range-progress { background: transparent; }
.selection-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7.5px;
  border-radius: 50%;
  border: 2px solid #f2f5f8;
  background: #657080;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45);
  cursor: ew-resize;
  pointer-events: auto;
}
.selection-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #f2f5f8;
  background: #657080;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45);
  cursor: ew-resize;
  pointer-events: auto;
}
.selection-range:disabled::-webkit-slider-thumb,
.selection-range:disabled::-moz-range-thumb { cursor: not-allowed; opacity: .55; }

.zoom-control {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) 48px;
  align-items: center;
  gap: 10px;
  margin: 7px 0 5px;
  color: #8fa0b5;
  font-size: .76rem;
}
.zoom-control label { white-space: nowrap; }
#waveZoom { width: 100%; cursor: ew-resize; accent-color: #5b8cff; }
#waveZoom:disabled { cursor: not-allowed; opacity: .5; }
#waveZoomValue { color: #c6d2e0; text-align: right; font-variant-numeric: tabular-nums; }

.wave-wrap { cursor: grab; touch-action: none; user-select: none; }
.wave-wrap .selection-highlight {
  z-index: 2;
  pointer-events: none;
  background: rgba(150, 158, 168, .25);
  border-left: 2px solid rgba(230, 235, 240, .75);
  border-right: 2px solid rgba(230, 235, 240, .75);
}
.wave-wrap .wave { z-index: 1; }
.wave-wrap .playhead { z-index: 3; pointer-events: none; }
.wave-wrap .selection-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.08), transparent);
}
.wave-wrap .selection-edge-start { left: -5px; }
.wave-wrap .selection-edge-end { right: -5px; }

/* Account hamburger menu */
.account-menu { position: relative; }
.account-menu > summary { list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.hamburger-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 38px;
  border: 1px solid #3a4859;
  border-radius: 10px;
  background: #1b2430;
  color: #edf3f9;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.hamburger-btn:hover, .account-menu[open] .hamburger-btn { background: #253242; }
.account-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  min-width: 180px;
  padding: 7px;
  border: 1px solid #344254;
  border-radius: 11px;
  background: #111923;
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
}
.account-menu-panel a,
.account-menu-panel button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #edf3f9;
  text-align: left;
  text-decoration: none;
  font-size: .88rem;
}
.account-menu-panel a:hover,
.account-menu-panel button:hover { background: #253242; }
.account-menu-panel form { margin: 0; }

/* Selection is edited directly on the track waveforms. Keep the shade neutral,
   but use orange editor handles so the draggable boundaries are obvious. */
.wave-wrap .selection-highlight {
  background: rgba(150, 158, 168, .23);
  border-left: 3px solid #f59e0b;
  border-right: 3px solid #f59e0b;
  box-shadow: inset 5px 0 8px -7px #f59e0b, inset -5px 0 8px -7px #f59e0b;
}
.wave-wrap .selection-edge {
  width: 14px;
  background: linear-gradient(to right, transparent, rgba(245,158,11,.32), transparent);
}
.wave-wrap .selection-edge-start { left: -7px; }
.wave-wrap .selection-edge-end { right: -7px; }

/* The separate selection slider was removed; selection/zoom controls stay compact. */
.selection-controls { padding-top: 8px; }
.selection-heading { margin-bottom: 4px; }
.zoom-control { margin-top: 4px; }

/* Playback panel cleanup: selectors live with transport controls, no separate
   Selected part slider/header, and track loading status has no Tracks heading. */
.transport-panel {
  display: block;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.transport-selector-row {
  margin-bottom: 16px;
}
.transport-main-row {
  display: grid;
  grid-template-columns: auto minmax(300px, 430px) minmax(320px, 1fr);
  align-items: center;
  gap: 22px;
}
.selection-controls {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}
.selection-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.selection-toolbar .zoom-control { margin-top: 0; flex: 1 1 300px; }
.selection-play-btn { border-color: #b97813; color: #ffd38a; }
.selection-play-btn:hover:not(:disabled) { background: #493116; border-color: #f59e0b; }
.tracks-head-loading-only { justify-content: flex-end; min-height: 0; }
.tracks-head-loading-only .loading-cluster { width: min(620px, 100%); }

@media (max-width: 980px) {
  .transport-panel { overflow: visible; }
  .transport-main-row { grid-template-columns: 1fr; }
  .timeline-wrap { min-width: 0; }
  .tracks-head-loading-only .loading-cluster { width: 100%; }
}

/* Compact transport subsections for selection and synchronized zoom. */
.selection-controls {
  display: grid;
  grid-template-columns: minmax(260px, auto) minmax(280px, 1fr);
  gap: 12px;
  align-items: stretch;
}
.transport-subsection {
  border: 1px solid #263445;
  border-radius: 10px;
  background: rgba(10, 14, 19, .34);
  padding: 9px 11px;
  min-width: 0;
}
.subsection-title {
  margin-bottom: 7px;
  color: #aebbd0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.selection-subsection .selection-time-row { margin-bottom: 8px; }
.selection-subsection .focus-option { margin: 0; }
.zoom-subsection .zoom-control { margin: 0; }
.track-file-date { color: #93a3b6; }

@media (max-width: 1180px) {
  .selection-controls { grid-template-columns: 1fr; }
}


/* Admin recording-length overview */
.account-menu-panel .account-menu-action { width: 100%; border: 0; border-radius: 0; background: transparent; color: inherit; padding: 9px 12px; text-align: left; font: inherit; cursor: pointer; }
.account-menu-panel .account-menu-action:hover { background: rgba(255,255,255,.07); }
.admin-lengths-list { padding: 10px 14px 16px; display: grid; gap: 10px; }
.admin-length-group { overflow: hidden; border: 1px solid #2d3d50; border-radius: 10px; background: rgba(255,255,255,.018); }
.admin-length-group.matching { border-color: rgba(232,139,66,.6); }
.admin-length-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 12px; border-bottom: 1px solid rgba(49,65,85,.65); background: rgba(255,255,255,.025); }
.admin-length-group.matching .admin-length-group-head strong { color: #f0a15f; }
.admin-length-group-head span { color: #8fa0b5; font-size: .78rem; white-space: nowrap; }
.admin-length-files { display: grid; }
.admin-length-file { min-width: 0; padding: 7px 12px; border-bottom: 1px solid rgba(49,65,85,.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.admin-length-file:last-child { border-bottom: 0; }
.admin-length-group.unreadable { border-color: rgba(255,141,158,.45); }
.admin-length-group.unreadable .admin-length-group-head strong { color: #ff8d9e; }

/* Unified transport subsections: playback, selection and zoom. */
.transport-main-row {
  display: grid;
  grid-template-columns: minmax(420px, 1.6fr) minmax(270px, .9fr) minmax(230px, .75fr);
  align-items: stretch;
  gap: 12px;
}
.playback-subsection { display: flex; flex-direction: column; gap: 9px; }
.playback-controls-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.playback-time-row { display: flex; align-items: center; gap: 18px; color: #93a5ba; font-size: .82rem; }
.playback-time-row strong { color: #dce6f3; font-variant-numeric: tabular-nums; }
.playback-subsection .track-transport-cluster { min-width: 172px; }
.playback-subsection .master-volume-control { flex: 1 1 300px; min-width: 280px; }
.zoom-subsection .zoom-control { display: grid; grid-template-columns: minmax(150px, 1fr) auto; align-items: center; gap: 10px; }
.zoom-subsection .zoom-control label { display: none; }

@media (max-width: 1100px) {
  .transport-main-row { grid-template-columns: 1fr 1fr; }
  .playback-subsection { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .transport-main-row { grid-template-columns: 1fr; }
  .playback-subsection { grid-column: auto; }
  .playback-subsection .master-volume-control { min-width: 0; width: 100%; }
}

/* Recording-length group actions */
.admin-length-group-head .admin-length-use-btn { margin-left: auto; white-space: nowrap; padding: 6px 10px; }
.admin-length-group-head > span { margin-left: auto; }
@media (max-width: 680px) {
  .admin-length-group-head { align-items: center; flex-wrap: wrap; }
  .admin-length-group-head .admin-length-use-btn { margin-left: 0; }
  .admin-length-group-head > span { margin-left: 0; }
}


/* Selection playback action and cross-folder duration comparison */
.selection-actions-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.selection-actions-row .selection-play-btn { flex: 0 0 auto; }
.similar-length-file { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.similar-length-file strong { color: #f0a15f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.similar-length-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .similar-length-file { grid-template-columns: 1fr; gap: 2px; } }

/* Similar-file admin editor */
.similar-length-file { align-items: center; }
.similar-file-controls { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 8px; align-items: center; min-width: 0; }
.similar-file-name-input { width: 100%; min-width: 0; box-sizing: border-box; padding: 7px 9px; border: 1px solid #4b5563; border-radius: 7px; background: #151c27; color: inherit; font: inherit; }
.similar-file-name-input:focus { outline: 2px solid rgba(240,161,95,.35); border-color: #f0a15f; }
.similar-file-save { white-space: nowrap; }
.similar-file-delete-mark { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; color: #ffd9df; }
.similar-file-delete-checkbox { width: 18px; height: 18px; accent-color: #f0a15f; cursor: pointer; }
@media (max-width: 700px) {
  .similar-file-controls { grid-template-columns: 1fr auto auto; width: 100%; }
}
@media (max-width: 480px) {
  .similar-file-controls { grid-template-columns: 1fr 1fr; }
  .similar-file-name-input { grid-column: 1 / -1; }
}

/* Editable filenames in the Recording lengths overview. */
.admin-length-rename-controls { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px; align-items: center; min-width: 0; }
@media (max-width: 640px) {
  .admin-length-rename-controls { grid-template-columns: 1fr auto; width: 100%; }
}

/* All-recording-folder recording-length overview */
.recording-length-folder { border: 1px solid #25364a; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.012); }
.recording-length-folder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 13px; background: rgba(255,255,255,.04); border-bottom: 1px solid #2d3d50; }
.recording-length-folder-head h3 { margin: 0; font-size: .98rem; color: #dce6f3; }
.recording-length-folder-head span { color: #8fa0b5; font-size: .78rem; }
.recording-length-folder-groups { display: grid; gap: 9px; padding: 10px; }
@media (max-width: 720px) { .recording-length-folder-head { align-items: flex-start; flex-direction: column; gap: 4px; } }

/* Settings / selectable application background */
body.has-custom-background {
  background-image:
    linear-gradient(rgba(8, 12, 18, .72), rgba(8, 12, 18, .84)),
    var(--jam-background-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.settings-dialog { width: min(620px, 94vw); }
.settings-body { padding: 18px; display: grid; gap: 10px; }
.settings-field { display: grid; gap: 8px; }
.settings-field > span { font-weight: 650; color: #dbe6f3; }
.settings-field select { width: 100%; }


/* Per-track three-band EQ */
.track-eq { position: relative; }
.track-eq > summary { list-style: none; cursor: pointer; user-select: none; border: 1px solid #3a4859; background: #1b2430; color: #edf3f9; border-radius: 8px; padding: 7px 9px; font-size: .78rem; font-weight: 700; }
.track-eq > summary::-webkit-details-marker { display: none; }
.track-eq[open] > summary, .track-eq > summary:hover { background: #253242; border-color: #52647c; }
.track-eq-panel { position: absolute; z-index: 20; right: 0; top: calc(100% + 7px); width: 285px; padding: 12px; display: grid; gap: 9px; border: 1px solid #405168; border-radius: 11px; background: #111923; box-shadow: 0 16px 36px rgba(0,0,0,.45); }
.track-eq-panel label { display: grid; grid-template-columns: 42px 1fr 52px; gap: 8px; align-items: center; font-size: .78rem; }
.track-eq-panel input[type="range"] { width: 100%; min-width: 0; accent-color: #f59e0b; }
.track-eq-panel output { text-align: right; color: #aebdce; font-variant-numeric: tabular-nums; white-space: nowrap; }
.track-eq-panel .eq-reset { justify-self: end; padding: 6px 10px; font-size: .76rem; }
@media (max-width: 980px) { .track-eq-panel { right: 0; } }
.saved-items-dialog{max-width:900px}.saved-item-create{display:flex;gap:10px;padding:14px 0}.saved-item-create input{flex:1}.saved-items-list{display:grid;gap:8px;max-height:65vh;overflow:auto}.saved-item-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(0,0,0,.22)}.saved-item-row .saved-name{flex:1;min-width:140px}.saved-owner{opacity:.7;font-size:.88em}.saved-times{display:flex;gap:6px;align-items:center}.saved-times input{width:105px}.compact-action{white-space:nowrap}.saved-overlay-layer{position:absolute;inset:0;pointer-events:none;z-index:4}.saved-overlay-layer>*{pointer-events:auto}.saved-marker-line{position:absolute;top:0;bottom:0;width:3px;background:#e53935;cursor:ew-resize}.saved-marker-line.foreign{cursor:default}.saved-selection-span{position:absolute;top:0;bottom:0;background:rgba(156,106,222,.08);border-left:3px solid #9c6ade;border-right:3px solid #9c6ade;cursor:grab}.saved-selection-span.foreign{cursor:default}


/* Compact saved-setting/selection controls */
.saved-control-btn {
  width: auto;
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: .78rem;
  line-height: 1.15;
}
.sound-settings-btn { align-self: flex-start; }
.focus-toggle-btn {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid #3a4859;
  border-radius: 6px;
  background: #1b2430;
  color: #edf3f9;
  font: inherit;
  font-size: .78rem;
  line-height: 1.15;
  cursor: pointer;
}
.focus-toggle-btn[aria-pressed="true"],
.focus-toggle-btn.active {
  background: #d47720;
  border-color: #f09a46;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.focus-toggle-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Saved overlay hit priority: active/main selection interaction is forwarded
   first; among saved overlays markers sit above saved selections. */
.saved-overlay-layer { z-index: 4; }
.saved-selection-span { z-index: 1; }
.saved-marker-line { z-index: 2; }
.saved-selection-span.own { cursor: grab; }
.saved-selection-span.own:active { cursor: grabbing; }
.saved-marker-line.own { cursor: ew-resize; }
.saved-selection-span.foreign,
.saved-marker-line.foreign { pointer-events: none; cursor: default; }

/* Per-track effects */
.track-fx-panel { width: 330px; max-height: 70vh; overflow: auto; }
.track-fx-panel fieldset { border: 1px solid #34465b; border-radius: 8px; padding: 8px; margin: 0; display: grid; gap: 7px; }
.track-fx-panel legend { padding: 0 5px; font-size: .78rem; font-weight: 700; }
.track-fx-panel legend label { display: flex; grid-template-columns: none; gap: 6px; }
.track-fx-panel .fx-reset { justify-self: end; padding: 6px 10px; font-size: .76rem; }


/* Recording workspace tabs */
.workspace-panel { margin-top: 22px; padding: 0; overflow: visible; }
.workspace-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 12px 0;
  border-bottom: 1px solid #2b394a;
}
.workspace-tab {
  border: 1px solid #34465b;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #151e29;
  color: #aebdce;
  padding: 8px 14px;
  font-size: .84rem;
  cursor: pointer;
}
.workspace-tab.active {
  background: #202c3a;
  color: #fff;
  position: relative;
  bottom: -1px;
}
.workspace-tab-panel { display: none; padding: 16px 18px 18px; }
.workspace-tab-panel.active { display: block; }
.tab-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
.tab-section-head h2 { margin:0 0 3px; font-size:1rem; }

/* Per-user notes stored in settings.json */
.user-notes-list { display:grid; gap:12px; }
.user-note-card { border:1px solid #2e3d50; border-radius:10px; padding:10px; background:rgba(8,13,19,.38); }
.user-note-card.own-note { border-color:#4b6079; }
.user-note-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:7px; font-size:.82rem; }
.user-note-head span { color:#8293a7; font-size:.75rem; }
.user-note-card textarea {
  width:100%;
  resize:vertical;
  min-height:115px;
  border:1px solid #344254;
  background:#0f141b;
  color:#e7edf5;
  border-radius:9px;
  padding:10px;
  font:inherit;
  line-height:1.45;
}
.user-note-card textarea:disabled { opacity:.62; cursor:not-allowed; background:#0b1016; }

/* Vertical track label and stacked EQ/FX controls */
.track { grid-template-columns: 48px minmax(320px, 1fr) 110px; }
.track-meta {
  height:82px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.track-name {
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  max-height:82px;
  max-width:42px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height:1.1;
  text-align:center;
}
.track-effect-buttons {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
}
.track-effect-buttons .track-eq > summary {
  min-width:34px;
  text-align:center;
  padding:5px 7px;
}


/* Split selection layers so the gray active-selection fill cannot cover the
   hover/drag targets for saved selections and markers. */
.wave-wrap .selection-highlight {
  z-index: 2;
  pointer-events: none;
  border: 0;
}
.wave-wrap .saved-overlay-layer {
  z-index: 5;
  pointer-events: none;
}
.saved-overlay-layer > * { pointer-events: auto; }
.saved-marker-line { z-index: 1; }
.saved-selection-span { z-index: 2; }

.main-selection-edges {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 7;
  pointer-events: none;
}
.main-selection-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  transform: translateX(-5px);
  background: linear-gradient(to right, transparent, rgba(255,255,255,.08), transparent);
  border-left: 3px solid #f59e0b;
  pointer-events: none;
}
.main-selection-edge-start { left: 0; }
.main-selection-edge-end { left: 100%; }

/* Own saved items expose their drag cursor above the non-interactive gray fill. */
.saved-selection-span.own { cursor: grab !important; }
.saved-selection-span.own:active { cursor: grabbing !important; }
.saved-marker-line.own { cursor: ew-resize !important; }


/* Loading/conversion status now lives in the same area that becomes the track list. */
.track-loading-status { width:min(760px, 100%); margin:0 auto; display:grid; gap:10px; }
.track-loading-status .loading-text { text-align:center; }
.track-loading-status .conversion-progress { width:100%; margin:0; }


/* Requested control layout */
.selection-actions-row { display:flex; align-items:center; flex-wrap:nowrap; gap:8px; }
.selection-save-controls { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }
.master-volume-control { display:flex; flex-direction:column; align-items:stretch; gap:4px; }
.master-volume-label { display:block; text-align:left; }
.master-volume-slider-row { display:flex; align-items:center; gap:8px; }
.master-volume-slider-row .master-volume { flex:1; }
.master-boost-below { align-self:flex-start; margin-top:1px; }
.track-effect-buttons { display:flex; flex-direction:column; align-items:stretch; gap:5px; }
.track-mute-below { align-self:stretch; min-width:34px; margin-top:1px; }


/* Mixes and Settings now live in workspace tabs. */
.workspace-tab-panel.mixes-panel { margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; }

/* EQ, FX and Mute use the same compact button footprint. */
.track-effect-buttons > details > summary,
.track-effect-buttons > .track-mute-below {
  box-sizing:border-box;
  width:100%;
  min-width:48px;
  height:28px;
  min-height:28px;
  padding:4px 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.track-mute-below { align-self:stretch; }

/* Selection play button matches Focus/Save/Mark height. */
.selection-actions-row .selection-play-btn {
  box-sizing:border-box;
  min-height:26px;
  height:26px;
  padding-top:3px;
  padding-bottom:3px;
}

/* Recording selector is now its own transport subsection left of Playback. */
.transport-main-row { grid-template-columns:minmax(220px,.72fr) minmax(430px,1.45fr) minmax(360px,1.15fr); align-items:stretch; }
.recording-subsection .transport-selector-row { margin:0; display:grid; grid-template-columns:1fr; gap:5px; }
.recording-subsection .transport-selector-row label { margin-top:2px; }
.recording-subsection .transport-selector-row select { width:100%; }
.master-bottom-row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.master-bottom-row .playback-time-row { margin-left:auto; }
.selection-subsection { display:flex; flex-direction:column; }
.selection-zoom-control { margin-top:auto !important; padding-top:10px; display:grid; grid-template-columns:minmax(150px,1fr) auto; gap:10px; align-items:center; }
.admin-note-edit-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start; }
.admin-note-edit-row textarea { min-width:0; }
.admin-note-edit { min-height:30px; padding:5px 10px; }
@media (max-width:1100px){.transport-main-row{grid-template-columns:1fr 1fr}.recording-subsection{grid-column:1/-1}}
@media (max-width:720px){.transport-main-row{grid-template-columns:1fr}.recording-subsection{grid-column:auto}.master-bottom-row .playback-time-row{margin-left:0}}

/* Transport/tab refinements. */
.recording-subsection .transport-selector-row { gap:8px; }
.selection-zoom-block { margin-top:6px; display:grid; gap:2px; align-content:start; }
.selection-zoom-label { font-size:.78rem; line-height:1; color:#aebdce; }
.selection-zoom-control { margin-top:0 !important; padding-top:0 !important; }
.selection-subsection { justify-content:flex-start; }


/* Main playback transport: consistent icon scale plus 10-second skip controls. */
.transport-buttons .pause-btn {
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1;
}
.transport-buttons .skip-btn {
  font-size: 1.05rem;
  line-height: 1;
}

/* Selection loop toggle sits directly beside Play from selection start. */
.selection-actions-row .selection-loop-btn { flex: 0 0 auto; white-space: nowrap; }

/* Tabulation editor */
.tabs-toolbar { align-items:flex-end; gap:16px; }
.tabs-toolbar-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tabs-toolbar-actions select { min-width:280px; }
.tab-new-form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:12px 0; padding:12px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(0,0,0,.18); }
.tab-new-form label { display:grid; gap:4px; font-size:.8rem; }
.tab-new-form input,.tab-new-form select { min-width:150px; }
.tab-empty { padding:18px 0; }
.tab-editor { margin-top:12px; }
.tab-editor-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.tab-lines { display:grid; gap:14px; }
.tab-line-block { padding:10px; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:rgba(0,0,0,.2); overflow-x:auto; }
.tab-line-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.tab-grid { display:grid; gap:3px; min-width:1500px; }
.tab-string-row { display:grid; grid-template-columns:34px repeat(24, 56px); gap:2px; align-items:center; }
.tab-string-label { font-family:monospace; font-weight:700; text-align:right; padding-right:5px; }
.tab-fret { width:56px; min-width:0; height:28px; padding:2px 3px; text-align:center; font-family:monospace; font-size:15px; box-sizing:border-box; border-radius:3px; }
.tab-fret.measure-end { margin-right:7px; border-right:2px solid rgba(255,255,255,.55); }
.tab-line-notes { display:block; width:100%; min-height:62px; margin-top:9px; resize:vertical; }
.tab-remove-line { padding:3px 7px; min-height:0; }
@media (max-width:700px){.tabs-toolbar{align-items:stretch}.tabs-toolbar-actions{align-items:stretch}.tabs-toolbar-actions select{min-width:0;flex:1}.tab-editor-head{align-items:flex-start;flex-direction:column}}

.tab-editor-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tab-fields-per-bar { display:flex; align-items:center; gap:5px; font-size:.78rem; }
.tab-fields-per-bar input { width:58px; min-width:58px; text-align:center; }

/* New-tab setup is shown only as a modal overlay. */
.tab-new-overlay { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; background:rgba(4,8,13,.78); backdrop-filter:blur(3px); }
.tab-new-overlay.hidden { display:none; }
.tab-new-dialog { width:min(760px,96vw); padding:20px; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:#111922; box-shadow:0 18px 60px rgba(0,0,0,.45); }
.tab-new-dialog h3 { margin:0 0 12px; }
.tab-new-dialog .tab-new-form { margin:0; padding:0; border:0; background:none; }
.tab-new-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* A tab-line note starts as one row, while remaining vertically resizable. */
.tab-line-notes { min-height:32px; height:32px; line-height:20px; resize:vertical; }

/* Master playback EQ. */
.master-eq { margin-top:3px; }
.master-eq summary { cursor:pointer; font-size:.78rem; color:#aebbd0; }
.master-eq-panel { display:grid; gap:5px; margin-top:6px; padding:8px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(0,0,0,.18); }
.master-eq-panel label { display:grid; grid-template-columns:36px minmax(120px,1fr) 50px; gap:7px; align-items:center; font-size:.76rem; }
.master-eq-panel output { text-align:right; }
.master-eq-panel button { justify-self:end; }

/* Per-track stereo pan, below volume/boost. */
.track-pan { display:grid; grid-template-columns:1fr auto; gap:2px 5px; align-items:center; width:92px; font-size:.7rem; text-align:center; }
.track-pan span { grid-column:1 / -1; }
.track-pan input { width:70px; min-width:70px; }
.track-pan output { min-width:20px; font-family:monospace; }

/* Horizontal track volume/pan controls and compact one-line tab notes. */
.volume-stack { width:220px; height:auto; align-items:stretch; justify-content:center; }
.volume { width:180px; height:auto; writing-mode:horizontal-tb; direction:ltr; }
.volume-value { width:auto; text-align:left; }
.track-pan { display:grid; grid-template-columns:28px 1fr 34px; gap:5px; align-items:center; width:210px; }
.track-pan input { width:100%; }
.tab-line-notes { min-height:0 !important; height:28px !important; line-height:18px; resize:none !important; overflow:hidden; }
.playback-speed { display:grid; grid-template-columns:auto 90px 44px; gap:5px; align-items:center; font-size:.75rem; margin-top:4px; }
.playback-speed input { width:90px; }
.master-fx { margin-top:3px; }


/* 2026-10-01: horizontal track controls without overflowing the waveform. */
.track { grid-template-columns: 48px minmax(320px, 1fr) minmax(270px, 300px); }
.track-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  justify-content: stretch;
  gap: 10px;
  align-self: stretch;
  min-width: 0;
}
.volume-stack {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 7px;
  min-width: 0;
}
.track-volume-row,
.track-pan {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 42px;
  gap: 7px;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  font-size: .72rem;
  text-align: left;
}
.track-volume-row input[type="range"],
.track-pan input[type="range"] {
  width: 100%;
  min-width: 0;
  height: auto;
  writing-mode: horizontal-tb;
  direction: ltr;
}
.track-volume-row output,
.track-pan output {
  min-width: 0;
  width: 42px;
  text-align: right;
  font-family: monospace;
  font-size: .72rem;
}
.track-volume-row .volume-value { width: 42px; text-align: right; }
.track-pan span { grid-column: auto; }
.track-boost { justify-self: start; }
.track-effect-buttons { min-width: 44px; }

/* Master EQ and FX share one row; playback speed lives beneath them. */
.master-processing-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.master-processing-row .master-eq { margin-top: 0; position: relative; }
.master-processing-row .master-eq > summary {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #3a4859;
  border-radius: 8px;
  background: #1b2430;
  color: #dce6f2;
  font-weight: 700;
  list-style: none;
}
.master-processing-row .master-eq > summary::-webkit-details-marker { display:none; }
.master-processing-row .master-eq[open] > summary { background:#253242; border-color:#52647c; }
.master-processing-row .master-eq-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 300px;
  min-width: 300px;
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
}
.master-processing-row .master-fx .master-eq-panel {
  width: 340px;
  min-width: 340px;
}
.playback-speed {
  display: grid;
  grid-template-columns: 48px minmax(140px, 1fr) 50px;
  gap: 8px;
  align-items: center;
  width: min(360px, 100%);
  margin-top: 5px;
  font-size: .76rem;
}
.playback-speed input { width: 100%; min-width: 0; }
.playback-speed output { text-align: right; }

@media (max-width: 900px) {
  .track { grid-template-columns: 48px minmax(220px, 1fr); }
  .track-controls { grid-column: 2; grid-template-columns: minmax(0, 1fr) 48px; }
}


/* 2026-10-01: transport status section and reliable stereo track panning layout */
.app-shell { padding-top: 16px; }
.transport-main-row { grid-template-columns: minmax(180px,.75fr) minmax(520px,1.8fr) minmax(170px,.65fr) minmax(360px,1.1fr); align-items: stretch; }
.status-subsection { min-width: 0; }
.status-section-row { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.status-section-row .status-pill { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-section-row .account-menu { flex: 0 0 auto; position: relative; }
.status-section-row .account-menu-panel { right: 0; left: auto; }
@media (max-width: 1320px) {
  .transport-main-row { grid-template-columns: 1fr 1.8fr 1fr; }
  .status-subsection { grid-column: 1; }
  .selection-subsection { grid-column: 2 / -1; }
}
@media (max-width: 820px) {
  .transport-main-row { grid-template-columns: 1fr; }
  .status-subsection, .selection-subsection { grid-column: auto; }
}

/* 2026-10-01: final pan/status/speed layout adjustments */
/* Status is the last subsection in the DOM, so it occupies the right-most grid column. */
.playback-speed { width: 100%; }
.playback-speed input { width: 100%; }

/* 2026-10-03: overdub recording track */
.recording-add-btn { margin-top: 5px; width: 100%; }
.recording-track-dialog { width: min(620px, calc(100vw - 32px)); }
.recording-track-form { display: grid; gap: 12px; padding-top: 12px; }
.recording-track-form > label:not(.recording-monitor-option) { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 12px; align-items: center; }
.recording-track-form input[type="text"], .recording-track-form select, .recording-track-form input[type="number"] { width: 100%; min-width: 0; }
.recording-latency-row { display: grid; grid-template-columns: 110px auto; align-items: center; gap: 8px; }
.recording-monitor-option { display: flex; align-items: center; gap: 8px; }
.recording-track-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.recording-track-row { border-color: rgba(214,71,71,.7); background: rgba(70,20,20,.18); }
.recording-arm-dot { color: #ff5757; font-size: 1.25rem; text-align: center; }
.recording-track-main { min-width: 0; display: grid; gap: 8px; align-content: center; }
.recording-track-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.recording-track-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recording-track-state { font-size: .72rem; color: #ff8b8b; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.recording-track-detail { font-size: .72rem; color: #aeb9c7; }
.recording-meter { height: 10px; overflow: hidden; border-radius: 999px; background: #151b23; border: 1px solid #354151; }
.recording-meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, #55b978 0 72%, #d8b84c 72% 90%, #df5c5c 90% 100%); transition: width 60ms linear; }
.recording-meter.clipping { box-shadow: 0 0 0 1px #ff6565, 0 0 10px rgba(255,80,80,.45); }
.recording-track-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 220px; }
.recording-start-btn.recording-active { background: #7c2020; border-color: #d94e4e; }
@media (max-width: 900px) {
  .recording-track-row { grid-template-columns: 48px minmax(0,1fr); }
  .recording-track-actions { grid-column: 2; justify-content: flex-start; min-width: 0; }
  .recording-track-form > label:not(.recording-monitor-option) { grid-template-columns: 1fr; gap: 5px; }
}

/* 2026-10-06: metronome workspace */
.metronome-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px 22px;
  max-width: 920px;
  margin-top: 14px;
}
.metronome-controls > label { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; }
.metronome-inline { display: flex; align-items: center; gap: 8px; }
.metronome-inline input[type="number"] { width: 90px; }
.metronome-signature input[type="number"] { width: 68px; }
.metronome-signature select { width: 76px; }
.metronome-tone-row { display: grid; grid-template-columns: minmax(140px, 1fr) 70px; gap: 10px; align-items: center; }
.metronome-tone-row input[type="range"] { width: 100%; min-width: 0; }
.metronome-tone-row output { text-align: right; font-variant-numeric: tabular-nums; }
.metronome-transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.metronome-readout { display: flex; gap: 16px; margin-left: 8px; color: #c8d2df; font-variant-numeric: tabular-nums; }
.metronome-beat-dots { display: flex; align-items: center; gap: 8px; min-height: 26px; margin-top: 14px; flex-wrap: wrap; }
.metronome-beat-dot { width: 14px; height: 14px; border-radius: 50%; background: #455160; border: 1px solid #697789; transition: transform .05s ease, background .05s ease; }
.metronome-beat-dot.last { border-radius: 3px; border-color: #b88b4a; }
.metronome-beat-dot.active { background: #f0f3f7; transform: scale(1.25); }
.metronome-beat-dot.last.active { background: #e6a848; }
@media (max-width: 760px) {
  .metronome-controls { grid-template-columns: 1fr; }
  .metronome-controls > label { grid-template-columns: 1fr; gap: 5px; }
  .metronome-readout { width: 100%; margin-left: 0; }
}

/* 2026-10-06: metronome dual volumes, selection containment, compact status, YouTube library */
.selection-actions-row { display:grid; gap:7px; min-width:0; }
.selection-primary-actions,
.selection-secondary-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0; }
.selection-primary-actions > *,
.selection-secondary-actions > * { max-width:100%; }
.selection-secondary-actions { padding-left:0; }
.selection-subsection { overflow:hidden; }
.selection-subsection .saved-control-btn { flex:0 1 auto; }

.status-section-row { flex-direction:column; align-items:flex-start; gap:8px; min-height:0; }
.status-section-row .status-pill { flex:0 1 auto; width:min(220px,100%); max-width:100%; min-height:34px; padding:7px 10px; }
.status-section-row .account-menu { flex:0 0 auto; align-self:flex-start; }
.status-section-row .hamburger-btn { min-width:42px; }

.youtube-audio-section { margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); }
.youtube-section-head h3 { margin:0 0 4px; }
.youtube-add-row { display:grid; grid-template-columns:minmax(140px,.55fr) minmax(260px,1.45fr) auto; gap:8px; align-items:center; }
.youtube-play-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:9px; }
.youtube-play-row select { min-width:min(420px,100%); max-width:100%; flex:1 1 320px; }
.youtube-player-wrap { margin-top:12px; width:320px; max-width:100%; }
.youtube-player-wrap iframe { display:block; width:320px; max-width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:8px; background:#000; }
@media (max-width:720px) {
  .youtube-add-row { grid-template-columns:1fr; }
  .youtube-add-row .transport { justify-self:start; }
}

/* Keep Selection roomy and Status compact/right-most. */
.transport-main-row {
  grid-template-columns: minmax(180px,.75fr) minmax(520px,1.8fr) minmax(310px,1.05fr) minmax(150px,.5fr);
}
@media (max-width:1320px) and (min-width:821px) {
  .transport-main-row { grid-template-columns: minmax(180px,.8fr) minmax(520px,1.8fr) minmax(150px,.55fr); }
  .selection-subsection { grid-column:1 / 3; }
  .status-subsection { grid-column:3; }
}

/* Main playback mode selector: stream (default), decoded memory, or persistent browser disk cache. */
.playback-mode-option {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #d8e1ec;
  font-size: .78rem;
  white-space: nowrap;
}
.playback-mode-option select {
  min-width: 168px;
  max-width: 220px;
  height: 30px;
  padding: 3px 28px 3px 8px;
  border: 1px solid #40516a;
  border-radius: 7px;
  background: #111a25;
  color: #e8eef7;
  font: inherit;
}
@media (max-width: 760px) {
  .playback-mode-option { align-items: flex-start; flex-direction: column; white-space: normal; }
  .playback-mode-option select { width: 100%; max-width: none; }
}
\n\n/* Local disk cache log */\n.cache-log-head { align-items: flex-start; }\n.cache-log-summary { display: grid; gap: 6px; padding: 12px 14px; margin: 10px 0 12px; border: 1px solid #2b3b4f; border-radius: 10px; background: rgba(0,0,0,.18); }\n.cache-log-summary code, .cache-log-path { overflow-wrap: anywhere; word-break: break-word; }\n.cache-log-entries { display: grid; gap: 9px; margin-top: 10px; }\n.cache-log-row, .cache-runtime-log { display: grid; gap: 5px; padding: 10px 12px; border: 1px solid #2b3b4f; border-radius: 9px; background: rgba(0,0,0,.18); }\n.cache-log-title { font-weight: 700; color: #e8f0f8; }\n.cache-log-path { display: block; color: #9ec9ff; font-size: .82rem; white-space: normal; }\n.cache-runtime-log { max-height: 220px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; color: #b9c8d8; }\n.cache-runtime-log strong { font-family: inherit; color: #e8f0f8; margin-bottom: 3px; }\n
/* Empty recording-folder creation and movable per-track timeline placement. */
.recording-folder-create {
  margin-top: 8px;
  width: 100%;
  min-width: 0;
  padding: 6px 9px;
  font-size: .78rem;
}
.track-audio-span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  min-width: 1px;
  box-sizing: border-box;
  background: #0a0e13;
}
.track-audio-span::before,
.track-audio-span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #050607;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  z-index: 5;
  pointer-events: none;
}
.track-audio-span::before { left: 0; }
.track-audio-span::after { right: 0; }
.track-audio-span .wave {
  width: 100%;
  height: 100%;
}
.track-offset-handle {
  position: absolute;
  z-index: 18;
  top: 1px;
  height: 13px;
  min-width: 44px;
  padding: 0;
  border: 1px solid #ff9d22;
  border-radius: 3px;
  background: #ff8400;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 3px rgba(0,0,0,.75);
  color: transparent;
  cursor: ew-resize;
  touch-action: none;
  pointer-events: auto;
  opacity: 1;
  display: block;
}

.track-offset-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 3px;
  width: 12px;
  height: 5px;
  transform: translateX(-50%);
  border-left: 2px solid rgba(42,25,0,.65);
  border-right: 2px solid rgba(42,25,0,.65);
}
.track-offset-handle:hover,
.track-offset-handle.dragging {
  background: #ffa126;
  border-color: #ffd08a;
}
.track-offset-handle.hidden-handle { display: none; }

/* Status display moved to Log; keep only the account menu at far right. */
.transport-main-row {
  grid-template-columns: minmax(180px,.75fr) minmax(520px,1.8fr) minmax(310px,1.05fr) 56px;
  align-items: stretch;
}
.account-subsection {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 9px 6px;
  min-width: 0;
}
.account-subsection .account-menu { margin: 0; }
.account-subsection .hamburger-btn { min-width: 42px; }
@media (max-width:1320px) and (min-width:821px) {
  .transport-main-row { grid-template-columns: minmax(180px,.8fr) minmax(520px,1.8fr) 56px; }
  .selection-subsection { grid-column: 1 / 3; }
  .account-subsection { grid-column: 3; grid-row: 1 / 3; }
}
@media (max-width:820px) {
  .transport-main-row { grid-template-columns: 1fr; }
  .selection-subsection, .account-subsection { grid-column: auto; grid-row: auto; }
  .account-subsection { justify-content: flex-start; }
}

/* Quick sound-preset recall beside Master FX. */
.sound-preset-quick-select {
  min-height: 30px;
  min-width: 150px;
  max-width: 220px;
  padding: 4px 28px 4px 8px;
  border: 1px solid #3a4859;
  border-radius: 8px;
  background: #1b2430;
  color: #dce6f2;
  font-size: .76rem;
}

.app-status-log { margin: 10px 0 12px; }
.app-status-log > div { display: grid; gap: 3px; }

/* Marker carets: markers live in a narrow lane above each waveform instead of
   drawing vertical lines through the audio. */
.track-wave-cell {
  position: relative;
  min-width: 0;
  padding-top: 16px;
}
.track-wave-cell .wave-wrap { width: 100%; }
.marker-caret-lane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  overflow: visible;
  pointer-events: none;
  z-index: 12;
}
.saved-marker-caret {
  position: absolute;
  z-index: 20;
  top: 1px;
  width: 0;
  height: 0;
  transform: translateX(-7px);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid #e53935;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.8));
  pointer-events: auto;
  cursor: default;
}
.saved-marker-caret.own { cursor: grab; }
.saved-marker-caret.own:active { cursor: grabbing; }
.saved-marker-caret::after {
  content: attr(data-label);
  position: absolute;
  left: 7px;
  bottom: 15px;
  transform: translateX(-50%);
  max-width: 260px;
  padding: 4px 7px;
  border: 1px solid #48576a;
  border-radius: 6px;
  background: #111923;
  color: #f2f6fb;
  font-size: .75rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 30;
}
.saved-marker-caret:hover::after,
.saved-marker-caret:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
/* Old line marker class is retained only for compatibility with stale DOM; it
   is no longer created by app.js. */
.saved-marker-line { display: none !important; }

/* Mute/solo controls */
.track-mute-solo-row { display:flex; gap:5px; align-items:stretch; }
.track-mute-solo-row .track-mute-below,
.track-mute-solo-row .track-solo-below { flex:1 1 0; min-width:34px; margin-top:1px; }
.track-solo-below { min-height:30px; border:1px solid rgba(255,255,255,.18); border-radius:6px; background:rgba(255,255,255,.06); color:inherit; font-weight:700; cursor:pointer; }
.track-solo-below.active { background:#d69b17; color:#111; border-color:#f4c45e; }


/* 2026-10-06: keep Mute/Solo/Delete inside each track control column. */
.track-controls { grid-template-columns: minmax(0, 1fr) 82px; }
.track-effect-buttons { width:82px; min-width:0; max-width:82px; box-sizing:border-box; }
.track-mute-solo-row { width:100%; min-width:0; }
.track-mute-solo-row .track-mute-below,
.track-mute-solo-row .track-solo-below { min-width:0; width:auto; flex:1 1 0; padding-left:4px; padding-right:4px; }
.mute-btn.solo-forced { background:#c63f4d; border-color:#df5361; }
.track-delete-below {
  width:100%; min-width:0; min-height:28px; padding:4px 5px;
  border:1px solid #7a3340; border-radius:6px; background:#351820; color:#ffd9df;
  font-size:.7rem; font-weight:700; cursor:pointer;
}
.track-delete-below:hover { background:#4a202a; }
@media (max-width:900px) { .track-controls { grid-template-columns:minmax(0,1fr) 82px; } }


/* Timeline placement clarity: no-audio areas are visibly different from the actual clip. */
.track-wave-cell .wave-wrap {
  background: repeating-linear-gradient(135deg, #303740 0, #303740 8px, #2b323a 8px, #2b323a 16px);
}
.track-wave-cell .track-audio-span {
  background: #0a0e13;
}

/* Track move handle is a direct child of the waveform cell so it remains visible even when the marker lane has pointer-events disabled. */
.track-wave-cell > .track-offset-handle { pointer-events:auto; }
.track-wave-cell > .marker-caret-lane { pointer-events:none; }
.track-wave-cell > .marker-caret-lane .saved-marker-caret { pointer-events:auto; }


/* 2026-10-07: keep the main transport interface visible while scrolling. */
.transport-panel {
  position: sticky;
  top: 8px;
  z-index: 900;
  background: rgba(20, 27, 36, .97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Three-way track deletion choice: archive, permanent delete, or cancel. */
.track-delete-dialog { width: min(560px, 94vw); overflow: hidden; }
.track-delete-choice-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; padding:18px; }
.track-delete-choice-actions .transport { flex:0 0 auto; }
.track-delete-choice-actions .danger { border-color:#8e3947; background:#4a2029; color:#ffe5e9; }
.track-delete-choice-actions .danger:hover { background:#652b37; }
@media (max-width:620px) {
  .transport-panel { top:4px; }
  .track-delete-choice-actions .transport { flex:1 1 100%; }
}

/* Admin Coversongs library */
.coversongs-head { gap:12px; }
.coversongs-path-row { display:grid; grid-template-columns:auto minmax(260px,1fr) auto; gap:8px; align-items:center; }
.coversongs-path-row label { font-size:.82rem; color:var(--muted); }
.coversongs-path-row input,
.coversongs-search-row input { width:100%; min-width:0; }
.coversongs-search-row { display:flex; gap:10px; align-items:center; margin-top:10px; }
.coversongs-search-row input { max-width:520px; }
.coversongs-list { margin-top:10px; display:flex; flex-direction:column; gap:6px; max-height:460px; overflow:auto; padding-right:2px; }
.coversong-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; border:1px solid rgba(255,255,255,.10); border-radius:9px; background:rgba(13,22,31,.72); padding:6px; }
.coversong-row.selected { border-color:rgba(91,148,255,.65); background:rgba(48,86,136,.22); }
.coversong-row.playing { box-shadow:inset 3px 0 0 rgba(87,179,255,.9); }
.coversong-select { appearance:none; border:0; background:transparent; color:inherit; padding:5px 7px; min-width:0; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.coversong-title { font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.coversong-path { color:var(--muted); font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.coversong-actions { display:flex; gap:5px; align-items:center; }
.coversong-actions .icon-btn { min-width:38px; }
.coversongs-text-panel { margin-top:14px; border-top:1px solid rgba(255,255,255,.12); padding-top:12px; }
.coversongs-text-head { display:flex; gap:10px; align-items:baseline; justify-content:space-between; flex-wrap:wrap; margin-bottom:7px; }
#coverSongsText { margin:0; padding:12px; min-height:180px; max-height:520px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid rgba(255,255,255,.10); border-radius:8px; background:rgba(7,13,20,.78); color:inherit; font:inherit; line-height:1.45; }
@media (max-width:760px) {
  .coversongs-path-row { grid-template-columns:1fr; }
  .coversongs-path-row .transport { justify-self:start; }
  .coversong-row { grid-template-columns:1fr; }
  .coversong-actions { justify-content:flex-start; }
}

/* 2026-10-14 layered recording tracks */
.recording-admin-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:5px; }
.recording-admin-actions .recording-add-btn { margin-top:0; }
.lane-record-btn {
  width:100%; min-height:28px; margin-top:4px; border:1px solid #8e2b35; border-radius:6px;
  background:#2a1115; color:#ff4d5b; font-size:1.15rem; line-height:1; cursor:pointer;
}
.lane-record-btn:hover { background:#3b151c; }
.lane-record-btn.recording-active { background:#5b1019; color:#ff1f32; box-shadow:0 0 0 2px rgba(255,50,65,.18); }
.lane-record-btn:disabled { opacity:.35; cursor:not-allowed; }
.empty-recording-lane .empty-lane-wave { display:flex; align-items:center; justify-content:center; color:#728091; font-size:.78rem; min-height:80px; }
.layered-clip-span { outline:1px solid rgba(99,169,255,.35); }
.layered-clip-span:hover, .track-audio-span:hover { outline:1px solid rgba(255,153,34,.8); }
.layered-offset-handle { top:1px; }
.clip-context-menu {
  position:fixed; z-index:5000; min-width:170px; display:grid; gap:3px; padding:6px;
  border:1px solid #48576a; border-radius:8px; background:#111923; box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.clip-context-menu button, .clip-context-menu select { width:100%; min-height:30px; text-align:left; border:1px solid transparent; border-radius:5px; background:transparent; color:#e8eef7; padding:5px 8px; }
.clip-context-menu button:hover { background:#243244; border-color:#40536a; }
.clip-context-menu select { background:#182230; border-color:#34475d; }
.clip-context-separator { height:1px; background:#334355; margin:2px 0; }


/* 2026-10-14 lane UI refresh: keep the playback position visible above every layered clip. */
.wave-wrap .playhead {
  z-index: 500;
  display: block;
}
.empty-recording-lane .wave-wrap .playhead { z-index: 500; }

/* 2026-10-14 recording input + logical-lane control refinements */
.recording-admin-actions {
  grid-template-columns: auto minmax(190px, 1fr);
  align-items: end;
}
.recording-device-inline {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #8fa0b5;
  font-size: .68rem;
}
.recording-device-inline select {
  min-width: 0;
  width: 100%;
  max-width: 280px;
  font-size: .75rem;
  padding: 5px 7px;
}
.recording-settings-card {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid;
  gap: 10px;
}
.recording-settings-card h3 { margin: 0 0 2px; }
.recording-settings-card .recording-monitor-option {
  display: flex;
  align-items: center;
  gap: 8px;
}
.empty-recording-lane .track-controls { opacity: 1; }
.empty-recording-lane .empty-lane-label {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.layered-overlap-handle {
  background: #d9902e;
  border-color: #ffc36e;
}
.layered-overlap-handle:hover,
.layered-overlap-handle.dragging {
  background: #e5a044;
  border-color: #ffdc9c;
}
@media (max-width: 900px) {
  .recording-admin-actions { grid-template-columns: 1fr; }
  .recording-device-inline select { max-width: none; }
}

/* Live clip shown while an admin recording is in progress. */
.live-recording-clip {
  position: absolute;
  top: 16px;
  bottom: 0;
  min-width: 3px;
  border: 1px solid rgba(255, 74, 86, .95);
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(128,18,27,.75), rgba(240,48,61,.82));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 8px rgba(255,45,60,.25);
  z-index: 430;
  pointer-events: none;
}
.live-recording-clip::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: #ff3347;
}

/* Track renaming and recording-context deletion. */
.track-name-editable { cursor: pointer; text-decoration: underline dotted rgba(255,255,255,.35); text-underline-offset: 3px; }
.track-name-editable:hover, .track-name-editable:focus { color: #fff; text-decoration-color: #f0a15f; outline: none; }
.track-rename-dialog { width: min(440px, calc(100vw - 32px)); }
.track-rename-dialog h2 { margin-top: 0; }
.track-rename-label { display: grid; gap: 7px; color: #aebed1; }
.track-rename-input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #40536a; border-radius: 7px; background: #111923; color: #eef4fb; font: inherit; }
.track-rename-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.clip-context-menu .clip-context-delete { color: #ffb8c0; }
.clip-context-menu .clip-context-delete:hover { background: rgba(160,32,48,.25); border-color: #8a3541; }

/* 2026-10-14: combined per-track EQ/FX/pan panel + uniform action buttons. */
.track-eq-fx-combined > summary { width:100%; }
.track-combined-panel {
  width: 350px;
  max-height: 72vh;
  overflow: auto;
  gap: 9px;
}
.track-panel-section-title {
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px solid #34465b;
  color: #c8d4e1;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.track-panel-section-title:first-child { margin-top:0; padding-top:0; border-top:0; }
.track-combined-panel .track-pan { display:grid; grid-template-columns:42px 1fr 52px; gap:8px; align-items:center; }
.track-reset-row { display:flex; justify-content:flex-end; gap:8px; padding-top:2px; }
.track-reset-row .eq-reset,
.track-reset-row .fx-reset { justify-self:auto; padding:6px 10px; font-size:.76rem; }

.track-action-grid {
  display:grid;
  grid-template-columns:38px 38px;
  gap:5px;
  justify-content:center;
  align-items:center;
  width:82px;
}
.track-action-grid .track-mute-below,
.track-action-grid .track-solo-below,
.track-action-grid .track-delete-below,
.track-action-grid .lane-record-btn {
  box-sizing:border-box;
  width:38px;
  min-width:38px;
  max-width:38px;
  height:38px;
  min-height:38px;
  max-height:38px;
  margin:0;
  padding:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.track-action-grid .track-solo-below,
.track-action-grid .track-delete-below { font-size:.72rem; }
.track-action-grid .lane-record-btn { font-size:1.05rem; }

/* 2026-10-15: recording/session actions and compact mixer layout. */
.recording-create-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  flex-wrap: wrap;
}
.recording-create-actions .transport { min-width: 0; }
.tracks-footer-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.tracks-footer-actions .recording-add-btn { min-width: 92px; }
.recording-settings-card #recordingInputDevice {
  width: min(520px, 100%);
  min-width: 0;
}

/* One combined master-processing popup, with the preset selector beside it. */
.master-processing-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
}
.master-processing-row .master-eq-fx-combined { flex: 0 0 auto; }
.master-processing-row .master-combined-panel {
  width: 350px;
  min-width: 350px;
  max-height: 72vh;
  overflow: auto;
  display: grid;
  gap: 9px;
}
.master-boost-panel {
  display: flex !important;
  align-items: center;
  gap: 7px;
  font-size: .76rem;
  justify-self: start;
}
.master-reset-row { justify-content: flex-end; }
.master-reset-row button { padding: 6px 10px; font-size: .76rem; }
.sound-preset-quick-select { flex: 0 1 220px; }

/* Narrow track-name rail, vertical volume only, boost moved into EQ/FX. */
.track {
  grid-template-columns: 24px minmax(320px, 1fr) 126px;
}
.track-meta {
  width: 24px;
  min-width: 24px;
  height: 82px;
}
.track-name {
  max-width: 20px;
  font-size: .72rem;
}
.track-controls {
  display: grid;
  grid-template-columns: 34px 82px;
  gap: 8px;
  align-items: center;
  justify-content: end;
  min-width: 0;
}
.volume-stack {
  width: 34px;
  min-width: 34px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.track-volume-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 82px;
  margin: 0;
}
.track-volume-row input[type="range"] {
  width: 22px;
  height: 74px;
  writing-mode: vertical-lr;
  direction: rtl;
  margin: 0;
}
.track-volume-row .volume-value { display: none !important; }
.track-boost-panel {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 7px;
  width: auto !important;
  justify-self: start;
  font-size: .76rem;
}
.track-effect-buttons { width: 82px; max-width: 82px; }

@media (max-width: 900px) {
  .track { grid-template-columns: 24px minmax(220px, 1fr); }
  .track-controls { grid-column: 2; grid-template-columns: 34px 82px; justify-content: end; }
  .master-processing-row { flex-wrap: wrap; }
}

/* 2026-10-15: playback toolbar alignment, overlay stacking, and compact recording actions. */
/* Keep both EQ/FX popovers above every waveform/clip layer and give them a solid surface. */
.track-eq[open],
.master-eq-fx-combined[open] {
  z-index: 2400;
}
.track-eq-panel,
.master-processing-row .master-eq-panel,
.master-processing-row .master-combined-panel {
  z-index: 2500;
  background: #111923 !important;
  border: 1px solid #405168;
  box-shadow: 0 18px 42px rgba(0,0,0,.68);
  isolation: isolate;
}
.track-eq-panel { z-index: 2600; }

/* Recording actions fill the same width as the two selectors above them. */
.recording-create-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  width: 100%;
  gap: 8px;
}
.recording-create-actions .transport {
  width: 100%;
  min-width: 0;
}

/* Playback content starts at the top instead of vertically centering mixed-height controls. */
.playback-controls-row {
  align-items: flex-start !important;
}
.playback-subsection .track-transport-cluster,
.playback-subsection .master-volume-control {
  align-self: flex-start;
}

/* Unified neutral media controls with clearer symbols. */
.transport-buttons .transport.icon-btn,
.transport-buttons .transport.icon-btn.primary,
.transport-buttons .pause-btn,
.transport-buttons .skip-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: #1b2430;
  border-color: #3a4859;
  color: #edf3f9;
  font-size: 1rem;
  line-height: 1;
}
.transport-buttons .transport.icon-btn:hover:not(:disabled) {
  background: #253242;
  border-color: #52647c;
}
.transport-icon { display:inline-block; font-size:1.2rem; line-height:1; }
.pause-glyph { font-size:.9rem; letter-spacing:-.12em; transform:translateX(-1px); }
.stop-glyph { font-size:.9rem; }
.transport-icon-ten { font-size:.52rem; font-weight:800; line-height:1; margin-left:-3px; margin-top:10px; }

/* Master volume: percentage hidden; current time hugs left, total time hugs right. */
#masterVolumeValue { display:none !important; }
.master-volume-slider-row { gap: 0; }
.master-bottom-row { width: 100%; display:block; }
.master-bottom-row .playback-time-row {
  width: 100%;
  margin-left: 0 !important;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.master-bottom-row .playback-time-row > span:first-child { text-align:left; }
.master-bottom-row .playback-time-row > span:last-child { margin-left:auto; text-align:right; }

@media (max-width: 650px) {
  .recording-create-actions { grid-template-columns: 1fr; }
}


/* 2026-10-15: tighter playback/zoom alignment requested by user. */
.transport-main-row {
  align-items: start !important;
}
.transport-main-row > .transport-subsection {
  align-self: start !important;
}
.playback-subsection,
.playback-subsection .playback-controls-row,
.playback-subsection .track-transport-cluster,
.playback-subsection .master-volume-control {
  align-content: start;
  justify-content: flex-start;
}

/* Playback mode dropdown matches the complete five-button transport width. */
.playback-subsection .track-transport-cluster {
  width: 256px;
  min-width: 256px;
}
.playback-mode-option {
  display: block;
  width: 256px;
  margin-top: 8px;
}
.playback-mode-option select {
  width: 256px;
  min-width: 256px;
  max-width: 256px;
}

/* Speed: caption/value above, slider below, same usable width as master volume. */
.playback-speed {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: 5px;
}
.playback-speed-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #aebdce;
  font-size: .76rem;
}
.playback-speed-heading output {
  margin-left: auto;
  text-align: right;
}
.playback-speed input {
  width: 100% !important;
  min-width: 0;
}

/* Zoom: label and zoom factor share the row above the slider. */
.selection-zoom-block {
  display: grid;
  gap: 3px;
}
.selection-zoom-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.selection-zoom-heading #waveZoomValue {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  color: #aebdce;
  font-size: .78rem;
}
.selection-zoom-control {
  display: block !important;
  width: 100%;
}
.selection-zoom-control input {
  width: 100%;
}

@media (max-width: 650px) {
  .playback-subsection .track-transport-cluster,
  .playback-mode-option,
  .playback-mode-option select {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}


/* YouTube saved-link editor: edit name and URL together. */
.youtube-edit-dialog { width:min(620px, 96vw); }
.youtube-edit-fields { display:grid; gap:12px; margin:16px 0; }
.youtube-edit-fields label { display:grid; gap:6px; font-weight:600; }
.youtube-edit-fields input { width:100%; box-sizing:border-box; }
.youtube-edit-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }