:root {
  color-scheme: dark;

  --bg: #0b0e14;
  --panel: #141a23;
  --panel-2: #1b222d;
  --elev: #242e3c;            /* hover / raised surface */
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .15);
  --text: #e9eef4;
  --text-dim: #8a97a8;

  --accent: #4f8cff;          /* overridden from JS by the user's chosen accent */
  --accent-2: #f59e0b;
  --green: #34d399;
  --danger: #ef4444;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 30px -8px rgba(0, 0, 0, .55);
  --shadow-3: 0 24px 70px -16px rgba(0, 0, 0, .72);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent);

  --scrim: rgba(3, 5, 8, .6);
  --stage-bg: radial-gradient(120% 120% at 50% 0%, #0a0f16 0%, #05070a 70%);
  --stage-shadow: inset 0 0 60px rgba(0, 0, 0, .45);
  --lane-audio: rgba(30, 37, 45, .7);
  --lane-ol: rgba(30, 37, 45, .5);
  --lane-stripe: rgba(15, 18, 22, .5);
  --playhead: #ffffff;
  --playhead-glow: rgba(255, 255, 255, .75);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

body { display: flex; flex-direction: column; }

/* ---------- scrollbars ---------- */

* { scrollbar-width: thin; scrollbar-color: var(--panel-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--panel-2);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--elev); background-clip: padding-box; }

/* ---------- top bar ---------- */

#topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, #fff 4%), var(--panel));
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
}

.brand {
  font-size: 16px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  line-height: 1.15;
}
.brand-top {
  display: flex;
  align-items: center;
  gap: 7px;
}
.brand strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  background: linear-gradient(90deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand .tagline {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  opacity: .75;
  white-space: nowrap;
}

/* group separator so the toolbar reads as a few clusters, not one long wall */
.topbar-sep {
  align-self: center;
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background: var(--border-strong);
}

.topbar-actions { display: flex; gap: 6px; }

/* slightly denser controls in the toolbar only, so the row breathes */
#topbar .btn { padding: 8px 12px; }

/* the tagline is a nice-to-have; drop it before the buttons get cramped */
@media (max-width: 1180px) {
  .brand .tagline { display: none; }
}

.file-name {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 12px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-name.editable { cursor: pointer; }
.file-name.editable:hover { color: var(--text); text-decoration: underline dotted; text-underline-offset: 3px; }
#projectNameInput {
  width: 180px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
#projectNameInput:focus-visible { outline: none; box-shadow: var(--ring); }

/* the topbar File menu reuses the injected .trz-menu look; only the disabled
   state needs a rule of its own */
.trz-menu-item:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- floating toolbar on the selected clip ---------- */

#clipToolbar {
  position: fixed;
  z-index: 60;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
}
#clipToolbar[hidden] { display: none; }
#clipToolbar button {
  background: none;
  border: none;
  color: var(--text);
  font-size: 13px;
  width: 28px;
  height: 24px;
  line-height: 1;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
}
#clipToolbar button:hover { background: var(--elev); }

/* ---------- buttons & inputs ---------- */

.btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease), transform .06s var(--ease);
}
.btn:hover:not(:disabled) { background: var(--elev); border-color: var(--border-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn kbd { margin-left: 6px; }
.btn.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }

.btn-accent {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn-accent:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 86%, #fff);
  border-color: transparent;
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--accent) 65%, transparent);
}

.btn-big { font-size: 15px; padding: 11px 24px; border-radius: var(--radius); }
.btn-small { font-size: 12px; padding: 6px 11px; }
.btn-icon { width: 40px; padding: 8px 0; font-size: 15px; text-align: center; }

.btn-col { display: flex; flex-direction: column; gap: 8px; }
.btn-col .btn { text-align: left; }

input[type="number"], input[type="text"], select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 9px;
  font-size: 13px;
  font-family: inherit;
  width: 90px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input[type="number"]:focus, input[type="text"]:focus, select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border-strong));
  box-shadow: var(--ring);
}
input[type="text"] { width: auto; flex: 1; }
input[type="color"] {
  width: 34px; height: 28px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  cursor: pointer;
}
select { width: auto; }

/* custom range sliders */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  background: var(--panel-2);
  border-radius: 999px;
  cursor: pointer;
  accent-color: var(--accent);
}
input[type="range"]:disabled { opacity: .4; cursor: not-allowed; }
input[type="range"]:focus-visible { outline: none; box-shadow: var(--ring); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  transition: transform .12s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

kbd {
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: inherit;
}

/* ---------- layout ---------- */

#workspace { display: flex; flex: 1 1 auto; min-height: 0; }

#stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 18px;
  gap: 10px;
}

#previewWrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stage-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--stage-shadow);
  position: relative;
  overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

/* When showing the empty/drop state the content can be taller than the stage
   (icon + heading + buttons + note + resume card). Let it scroll instead of
   getting clipped, and use `safe center` so the top never overflows past the
   scrollable start edge. */
body:not(.has-video) #previewWrap {
  overflow-y: auto;
  align-items: safe center;
}

#canvas { max-width: 100%; max-height: 100%; display: none; cursor: default; }
body.has-video #canvas { display: block; }
body.has-video #emptyState { display: none; }

#emptyState { text-align: center; color: var(--text-dim); padding: 18px; }
#emptyState h1 { color: var(--text); font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin: 6px 0; }
#emptyState p { margin: 5px 0; }
.empty-icon {
  font-size: 30px;
  width: 60px; height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.empty-note { font-size: 12px; max-width: 380px; margin: 10px auto 0 !important; line-height: 1.5; }

#resumeBox {
  margin: 12px auto 0;
  padding: 13px 18px;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
#resumeBox[hidden] { display: none; }
#resumeInfo { font-size: 13px; color: var(--text); margin-bottom: 10px; }
.resume-file-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, var(--text));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.resume-file-note[hidden] { display: none; }
.resume-actions { display: flex; gap: 8px; justify-content: center; }

/* ---------- big play button over the preview ---------- */

#bigPlay {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(10, 13, 17, .55);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: #fff;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 7px;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  z-index: 5;
}
body.has-video:not(.playing) #bigPlay { opacity: 1; }
body.playing #bigPlay { transform: translate(-50%, -50%) scale(.85); }
/* Recede while working in the preview so it doesn't cover center overlays/handles.
   Clicks still pass through (pointer-events:none) and start playback. */
body.has-video:not(.playing) #previewWrap:hover #bigPlay {
  opacity: .08;
  transform: translate(-50%, -50%) scale(.9);
}

/* ---------- transport & layer tracks ---------- */

#transport {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-1);
}

.transport-btns {
  display: grid;
  grid-template-columns: repeat(2, 30px);
  gap: 4px;
  flex: 0 0 auto;
}

/* compact transport quick-action buttons */
.tq {
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .06s var(--ease);
}
.tq:hover:not(:disabled) { background: var(--elev); border-color: var(--border-strong); }
.tq:active:not(:disabled) { transform: translateY(1px); }
.tq:focus-visible { outline: none; box-shadow: var(--ring); }
.tq:disabled { opacity: .4; cursor: not-allowed; }
.tq.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }
.tq-wide { grid-column: 1 / -1; }

.tq-play {
  grid-column: 1 / -1;
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.tq-play:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 86%, #fff);
  border-color: transparent;
}
.tq-play .tq-i-pause { display: none; }
body.playing .tq-play .tq-i-play { display: none; }
body.playing .tq-play .tq-i-pause { display: inline; }

#transportSide {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding-top: 18px;
}

#timeLabel {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
  min-width: 110px;
  text-align: right;
}

#zoomBar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px 3px 4px;
}
#zoomBar #zoomSlider { width: 84px; }
#zoomBar .btn-icon {
  width: auto;
  padding: 3px 8px;
  font-size: 14px;
  line-height: 1;
  background: none;
  border: none;
  border-radius: 999px;
}
#zoomBar .btn-icon:hover:not(:disabled) { background: var(--elev); }
#zoomBar input[type="range"] { background: var(--elev); }
#zoomLabel {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-size: 11px;
  min-width: 40px;
  text-align: right;
}

#trackStack {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#ruler {
  flex: 0 0 auto;
  width: 100%;
  height: 18px;
  display: block;
  cursor: pointer;
  touch-action: none;
}

#tracks {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;          /* room for the playhead handle above the first lane */
  max-height: min(48vh, 360px);
  overflow: auto;             /* x = zoom scroll, y = scroll the lane stack top<->bottom */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  --track-w: 600px;           /* zoomed width of each lane body; set from JS */
}
#tracks::-webkit-scrollbar { width: 10px; height: 10px; }
#tracks::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}
#tracks::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
#tracks.panning { cursor: grabbing; }
#tracks.panning * { cursor: grabbing !important; }

.track-row { display: flex; align-items: stretch; gap: 6px; width: max-content; }

.track-label {
  position: sticky;
  left: 0;
  z-index: 8;
  flex: 0 0 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  overflow: hidden;
  white-space: nowrap;
  background: var(--panel);
}

.track-btns { display: flex; gap: 2px; }
.track-btns button, .ol-del {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 1px 3px;
  border-radius: 4px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.track-btns button:hover:not(:disabled), .ol-del:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.track-btns button:disabled { opacity: .35; cursor: not-allowed; }
.track-btns button.active { color: var(--accent-2); }

.track-body {
  position: relative;
  flex: 0 0 var(--track-w);
  width: var(--track-w);
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
}

#timeline { height: 56px; }

#clipsLayer { position: absolute; inset: 0; }

.clip {
  position: absolute;
  top: 0; bottom: 0;
  overflow: hidden;
  background: #0a0d11;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: box-shadow .15s var(--ease);
}
.clip canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
  pointer-events: none;
}
.clip.current { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 85%, transparent); }
.clip.selected {
  /* outer glow only: the ring itself is drawn by ::after below */
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent);
  z-index: 3;
}
/* The selected ring must be its own layer stacked ABOVE the clip's canvas.
   An inset box-shadow paints under child content, and the video thumbnail is an
   opaque canvas covering the whole clip, so an inset ring was invisible on the
   video lane (the audio waveform canvas is transparent, which is why the ring
   showed there and nowhere else). z-index 3 sits over the canvas but under the
   action buttons (z-index 4). */
.clip.selected::after,
.aclip.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--accent),
              inset 0 0 0 4px rgba(255, 255, 255, .55);
  pointer-events: none;
  z-index: 3;
}
.clip.dragging { opacity: .45; cursor: grabbing; }

/* action toolbar: appears on a clip once it is selected */
.clip-actions {
  position: absolute;
  top: 3px; right: 3px;
  display: none;
  gap: 3px;
  z-index: 4;
  pointer-events: none;
}
.clip.selected .clip-actions { display: flex; pointer-events: auto; }
.clip.dragging .clip-actions { display: none; }
.clip-act {
  width: 20px; height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  background: rgba(10, 13, 17, .82);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .06s var(--ease);
}
.clip-act:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.clip-act:active:not(:disabled) { transform: translateY(1px); }
.clip-act:disabled { opacity: .35; cursor: not-allowed; }

/* source file name shown on each clip when several videos share the timeline */
.clip-name {
  position: absolute;
  top: 3px; left: 4px;
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1.3;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  pointer-events: none;
  z-index: 1;
}
:root[data-theme="light"] .clip-name { background: rgba(255, 255, 255, .75); color: #1c2735; }

.clip-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 2;
}
.clip-edge.left { left: 0; border-radius: 6px 0 0 6px; }
.clip-edge.right { right: 0; border-radius: 0 6px 6px 0; }
.clip-edge:hover, .clip-edge.active { background: color-mix(in srgb, #ff8c2b 60%, transparent); }

/* "+" buttons on each clip boundary: insert a clip before/after/between clips */
.clip-add {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%) scale(.6);
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1.5px solid var(--bg);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  transition: opacity .12s var(--ease), transform .12s var(--ease), background .12s var(--ease);
}
.clip-add.at-start { transform: translate(2px, -50%) scale(.6); }
.clip-add.at-end { transform: translate(calc(-100% - 2px), -50%) scale(.6); }
#timeline:hover .clip-add,
.clip-add:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
#timeline:hover .clip-add.at-start,
.clip-add.at-start:focus-visible { transform: translate(2px, -50%) scale(1); }
#timeline:hover .clip-add.at-end,
.clip-add.at-end:focus-visible { transform: translate(calc(-100% - 2px), -50%) scale(1); }
.clip-add:hover { background: color-mix(in srgb, var(--accent) 80%, #fff); }

/* transition markers at each internal clip boundary */
.clip-trans {
  position: absolute;
  top: 2px;
  left: 0;
  transform: translateX(-50%);
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  background: rgba(10, 13, 17, .85);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: opacity .12s var(--ease), background .12s var(--ease);
}
#timeline:hover .clip-trans,
.clip-trans:focus-visible { opacity: .8; pointer-events: auto; }
.clip-trans.set {
  opacity: 1;
  pointer-events: auto;
  background: var(--accent);
  border-color: var(--bg);
}
.clip-trans:hover { background: color-mix(in srgb, var(--accent) 80%, #fff); }

.drop-marker {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 3px;
  margin-left: -1px;
  background: var(--accent-2);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(245, 158, 11, .8);
  z-index: 5;
  pointer-events: none;
}

#audioLane { height: 36px; background: var(--lane-audio); }
#audioClipsLayer { position: absolute; inset: 0; pointer-events: none; }
.aclip {
  position: absolute;
  top: 0; bottom: 0;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, .15);
  pointer-events: auto;
  cursor: pointer;
}
.aclip:first-child { border-left: none; }
.aclip.selected {
  /* mirror the video clip: outer glow here, ring drawn by the shared ::after */
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent);
  z-index: 3;
}
.aclip canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* clickable per-clip noise-cancellation toggle + indicator on the audio lane */
.aclip .nr-badge {
  position: absolute;
  top: 3px; left: 4px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.5;
  color: #fff;
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  border-radius: 4px;
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, .5);
  transition: background .15s var(--ease), opacity .15s var(--ease), transform .06s var(--ease);
}
.aclip .nr-badge[hidden] { display: none; }
.aclip .nr-badge::before { content: "\1F507"; font-size: 9px; }
.aclip .nr-badge.on { background: color-mix(in srgb, var(--accent) 88%, #000); }
.aclip .nr-badge.off {
  background: rgba(10, 14, 20, .78);
  border-color: color-mix(in srgb, #fff 18%, transparent);
  opacity: .55;
}
.aclip:hover .nr-badge.off, .aclip.selected .nr-badge.off { opacity: .9; }
.aclip .nr-badge:hover { transform: translateY(-1px); }
.aclip .nr-badge.off:hover { background: color-mix(in srgb, var(--accent) 60%, #000); opacity: 1; }
.aclip .nr-badge:focus-visible { outline: none; box-shadow: var(--ring); }
#audioLane.removed .aclip { opacity: .18; }
#audioLane.noaudio:not(.removed)::after {
  content: "no audio detected";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  pointer-events: none;
}
#audioLane.removed::after {
  content: "audio removed";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--danger);
  background: repeating-linear-gradient(
    -45deg,
    var(--lane-stripe) 0 8px,
    rgba(239, 68, 68, .15) 8px 12px
  );
  pointer-events: none;
}

#overlayRows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: max-content;
}

.ol-lane { height: 22px; background: var(--lane-ol); }
.ol-name {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
}
.ol-name:hover { color: var(--text); }

#playhead {
  position: absolute;
  top: 6px; bottom: 2px;
  width: 2px;
  background: var(--playhead);
  box-shadow: 0 0 6px var(--playhead-glow);
  pointer-events: none;
  z-index: 6;
}

#playheadHandle {
  position: absolute;
  top: 0;
  left: 0;
  width: 19px;
  height: 19px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent, #4f8cff);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .55);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  z-index: 7;
  display: none;
  transition: background .15s var(--ease);
}
body.has-video #playheadHandle { display: block; }
#playheadHandle:hover { background: var(--accent, #4f8cff); }
#playheadHandle.dragging { cursor: grabbing; background: #ff8c2b; border-color: #ff8c2b; }

.obar {
  position: absolute;
  top: 1px; bottom: 1px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 18px;
  color: #fff;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: grab;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 90%, transparent);
  touch-action: none;
  user-select: none;
}
.obar.image { background: rgba(52, 211, 153, .45); border-color: rgba(52, 211, 153, .9); }
.obar.music { background: rgba(245, 158, 11, .4); border-color: rgba(245, 158, 11, .85); }
.obar.selected { box-shadow: 0 0 0 2px #fff inset; }

/* trim handles at both ends of overlay / caption / audio-track bars, the same
   affordance as .clip-edge on the video lane: ew-resize cursor + orange glow */
.obar-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 2;
}
.obar-edge.left { left: 0; border-radius: 4px 0 0 4px; }
.obar-edge.right { right: 0; border-radius: 0 4px 4px 0; }
.obar-edge:hover, .obar-edge.active { background: color-mix(in srgb, #ff8c2b 60%, transparent); }

#musicRow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: max-content;
}

.music-name {
  font-size: 12px;
  color: var(--text);
  margin: 4px 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#musicControls {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
}
#musicControls[hidden] { display: none; }
#btnAddMusic { margin-bottom: 12px; }
#btnAddMusic[hidden] { display: none; }

/* ---------- sidebar ---------- */

#sidebar {
  order: -1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  background: var(--panel);
  border-right: 1px solid var(--border);
  min-height: 0;
}

/* vertical icon rail; the options column next to it collapses */
#tabs {
  flex: 0 0 66px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 6px;
  background: var(--panel-2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  padding: 9px 2px;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 500;
  transition: color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.tab-ico { font-size: 17px; line-height: 1; }
.tab-ico svg { width: 17px; height: 17px; display: block; }
.tab:hover { color: var(--text); background: var(--elev); }
.tab:focus-visible { outline: none; box-shadow: var(--ring); }
.tab.active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 70%, transparent);
}
/* while the options column is closed, the rail shows nothing as selected */
#sidebar.collapsed .tab.active {
  color: var(--text-dim);
  background: none;
  box-shadow: none;
}
#sidebar.collapsed .tab.active:hover { color: var(--text); background: var(--elev); }

#panels {
  position: relative;
  width: 312px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#sidebar.collapsed #panels { display: none; }

#btnPanelClose {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease);
}
#btnPanelClose:hover { color: var(--text); background: var(--elev); }
#btnPanelClose:focus-visible { outline: none; box-shadow: var(--ring); }

.panel { display: none; padding: 14px 18px 18px; overflow-y: auto; min-height: 0; }
.panel.active { display: block; flex: 1 1 auto; }
.panel h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin: 0 26px 8px 0; }  /* right margin clears the ✕ close button */
.panel h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  margin: 18px 0 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
}

.hint { color: var(--text-dim); font-size: 12px; line-height: 1.55; margin: 0 0 14px; }

/* ---------- sub-tabs inside a panel (segmented control) ---------- */

.subtabs {
  display: flex;
  gap: 3px;
  margin: 0 0 14px;
  padding: 3px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.subtab {
  flex: 1 1 0;
  min-width: 0;
  background: none;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.subtab:hover { color: var(--text); background: var(--elev); }
.subtab:focus-visible { outline: none; box-shadow: var(--ring); }
.subtab.active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 70%, transparent);
}

.subtab-page { display: none; }
.subtab-page.active { display: block; }
/* a page opens with content, not a big section header gap */
.subtab-page > h3:first-child { margin-top: 2px; }

/* ---------- collapsible effects sections ---------- */

.fx-acc { margin: 0 0 4px; }
.fx-acc > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  margin: 14px 0 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
}
.fx-acc > summary::-webkit-details-marker { display: none; }
.fx-acc > summary::before {
  content: '▸';
  font-size: 10px;
  transition: transform .18s var(--ease);
}
.fx-acc[open] > summary::before { transform: rotate(90deg); }
.fx-acc > summary:hover { color: var(--text); }
.fx-acc > .acc-body { padding-top: 10px; }

/* ---------- one-click color looks ---------- */

.fx-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.fx-presets button {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
}
.fx-presets button:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border-strong)); color: var(--text); }
.fx-presets button.active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }

.link-help {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.link-help:hover { text-decoration: underline; }
.link-help:focus-visible { outline: none; text-decoration: underline; }

.shortcut-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}
.shortcut-grid li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.shortcut-grid li span { flex: 1; }
@media (max-width: 560px) {
  .shortcut-grid { grid-template-columns: 1fr; }
}

.field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.field-row label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.field-col { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.field-col label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); }
.check { cursor: pointer; }

.stat-block {
  margin-top: 16px;
  line-height: 1.9;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.stat { font-size: 13px; color: var(--text-dim); }
.stat strong { color: var(--text); }

/* ---------- effects ---------- */

.fx label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 13px; }
.fx label span { float: right; color: var(--text); font-variant-numeric: tabular-nums; }
.fx input[type="range"] { width: 100%; margin-top: 6px; }

/* ---------- per-clip noise cancellation ---------- */
.nr-block .nr-enable { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); margin-bottom: 12px; cursor: pointer; }
.nr-block .nr-enable input { width: auto; }
#nrOptions[hidden] { display: none; }
.nr-presets { display: flex; gap: 6px; margin: -4px 0 14px; }
.nr-presets button {
  flex: 1;
  padding: 5px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nr-presets button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 60%, var(--border-strong)); color: var(--text); }
.nr-presets button.active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }
.nr-presets button:disabled { opacity: .5; cursor: default; }
.nr-block .nr-profile select {
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nr-block label.disabled, .nr-block input:disabled, .nr-block select:disabled { opacity: .55; }

/* ---------- overlay list ---------- */

#overlayList { list-style: none; margin: 14px 0 0; padding: 0; }

.ov-item {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.ov-item:hover { border-color: var(--border-strong); }
.ov-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 18px -8px color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel-2));
}
/* collapsed cards (everything except the selected overlay): compact one-liner */
.ov-item:not(.selected) { padding: 8px 10px; }
.ti-head.ti-collapsed { margin-bottom: 0; }
.ti-head.ti-collapsed .ti-type {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* card header: type badge / thumb + name + actions */
.ti-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ti-head .ti-dup { margin-left: auto; }
.ti-head .ti-name + .ti-dup { margin-left: 0; }
.ti-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
}

/* labelled text editor */
.ti-field { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 10px; }
.ti-content {
  display: block;
  width: 100%;
  margin-top: 5px;
  min-height: 60px;
  resize: vertical;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.ov-item.selected .ti-content { background: var(--panel); }
.ti-content:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.ti-content:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.ti-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ti-row:last-child { margin-bottom: 0; }
.ti-row label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); flex: 0 1 auto; }
.ti-row input[type="number"] { width: 66px; padding: 4px 6px; }
.ti-row select { flex: 1; min-width: 0; padding: 4px 6px; }
.ti-row input[type="range"] { flex: 1; min-width: 50px; }

.ti-thumb {
  width: 40px; height: 28px;
  object-fit: contain;
  background: #05070a;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.ti-name { flex: 1; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ti-del, .ti-dup {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.ti-dup:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ti-del:hover { color: var(--danger); background: rgba(239, 68, 68, .12); }

/* ---------- bundled sound library ---------- */

#soundLibBlock { margin-top: 14px; }
.snd-search-row { margin: 0 0 10px; }
.snd-search {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.snd-search::placeholder { color: var(--text-dim); }
.snd-search:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.snd-empty { margin: 8px 2px 0; }
.snd-cat {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.snd-cat summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  user-select: none;
  transition: color .15s var(--ease);
}
.snd-cat summary:hover { color: var(--text); }
.snd-cat[open] summary { color: var(--text); border-bottom: 1px solid var(--border); }
.snd-list { list-style: none; margin: 0; padding: 5px 7px; max-height: 240px; overflow-y: auto; }
.snd-list li { display: flex; align-items: center; gap: 8px; padding: 3px 5px; border-radius: 5px; }
.snd-list li[hidden] { display: none; }   /* outrank the flex rule so search can hide rows */
.snd-cat[hidden] { display: none; }
.snd-empty[hidden] { display: none; }
.snd-list li:hover { background: var(--elev); }
.snd-name { flex: 1; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snd-play, .snd-add {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.snd-play:hover { color: var(--text); border-color: var(--border-strong); }
.snd-add { font-size: 15px; font-weight: 600; }
.snd-add:hover { color: var(--accent); border-color: var(--accent); }
.snd-add:disabled { opacity: .5; cursor: default; }

/* ---------- modals ---------- */

.modal {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: modal-fade .2s var(--ease);
}
.modal[hidden] { display: none; }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.modal-card {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  width: 400px;
  text-align: center;
  box-shadow: var(--shadow-3);
  animation: modal-pop .24s var(--ease);
}
.modal-card h2 { margin: 0 0 6px; font-weight: 650; letter-spacing: -.01em; }
.modal-card p { color: var(--text-dim); font-size: 12px; margin: 0 0 18px; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }

/* export dialog: file name + size estimate */
.exp-name-wrap { display: flex; align-items: center; gap: 2px; min-width: 0; }
.exp-name-wrap input {
  width: 150px;
  min-width: 0;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.exp-name-wrap input:focus-visible { outline: none; box-shadow: var(--ring); }
.exp-ext { color: var(--text-dim); font-size: 12px; }
.modal-card p.exp-estimate { margin: 14px 0 0; text-align: center; }

.export-track {
  height: 10px;
  background: var(--panel-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
#exportBar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); transition: width .2s linear; }
#exportPct { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; font-variant-numeric: tabular-nums; }

/* ---------- toast ---------- */

#statusToast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--panel-2) 85%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 11px 20px;
  font-size: 13px;
  z-index: 60;
  box-shadow: var(--shadow-2);
  max-width: 80vw;
  animation: toast-in .24s var(--ease);
}
#statusToast[hidden] { display: none; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- how-to onboarding tour ---------- */

/* First-visit nudge: pulse the How to use button for ~10s (1s × 10). */
.howto-blink {
  animation: howto-blink 1s var(--ease) 0s 10;
}
@keyframes howto-blink {
  0%, 100% {
    box-shadow: 0 0 0 0 transparent;
    border-color: var(--border-strong);
    color: var(--text);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 42%, transparent);
    border-color: var(--accent);
    color: var(--accent);
  }
}

#tourOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  animation: modal-fade .2s var(--ease);
}
#tourOverlay[hidden] { display: none; }
/* Steps with no target dim the whole screen; targeted steps dim via the spot's ring. */
#tourOverlay.centered { background: rgba(3, 5, 8, .72); backdrop-filter: blur(3px); }

#tourSpot {
  position: absolute;
  border-radius: 10px;
  box-shadow:
    0 0 0 9999px rgba(3, 5, 8, .72),
    0 0 0 2px var(--accent),
    0 0 24px 5px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: left .3s var(--ease), top .3s var(--ease), width .3s var(--ease), height .3s var(--ease);
  pointer-events: none;
}

#tourCard {
  position: absolute;
  width: 320px;
  max-width: 90vw;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-3);
  text-align: left;
  animation: modal-pop .24s var(--ease);
}
#tourCard .tour-step {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
  margin-bottom: 6px;
}
#tourCard h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
}
#tourCard p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
}
.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}
.tour-nav { display: flex; gap: 8px; }

/* First-run empty-state sample-clip CTA */
.empty-or { font-size: 12px; color: var(--text-dim); margin: 7px 0 6px !important; }
#btnTrySample:disabled { opacity: .7; cursor: default; }

/* Non-blocking contextual coach-marks (appear after the first video loads) */
#coachMark {
  position: fixed;
  z-index: 70;
  width: 300px;
  max-width: 88vw;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-3);
  animation: modal-pop .2s var(--ease);
}
#coachMark[hidden] { display: none; }
#coachMark p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text); }
#coachMark::before {
  content: '';
  position: absolute;
  left: var(--arrow-x, 24px);
  width: 0; height: 0;
  border: 8px solid transparent;
}
#coachMark.arrow-top::before { top: -16px; border-bottom-color: var(--accent); }
#coachMark.arrow-bottom::before { bottom: -16px; border-top-color: var(--accent); }
.coach-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coach-step { font-size: 11px; color: var(--text-dim); }
.coach-nav { display: flex; gap: 8px; }

/* ---------- context menu ---------- */

.ctx-menu {
  position: fixed;
  z-index: 100;
  min-width: 180px;
  padding: 5px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  animation: modal-pop .14s var(--ease);
}
.ctx-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 8px 11px;
  font-size: 12px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s var(--ease);
}
.ctx-menu button:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.ctx-menu button:disabled { opacity: .4; cursor: default; }
.ctx-menu button.danger { color: var(--danger); }
.ctx-menu button.danger:hover:not(:disabled) { background: rgba(239, 68, 68, .15); }
.ctx-menu .sep { height: 1px; background: var(--border); margin: 5px 6px; }

/* per-clip noise cancellation popover (opened from an audio clip's badge) */
.nr-menu { min-width: 216px; padding: 10px 11px 11px; }
.nr-menu-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-dim);
  margin-bottom: 9px;
}
.nr-menu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  margin-bottom: 10px;
}
.nr-menu-toggle input { width: auto; margin: 0; }
.nr-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 5px;
}
.nr-menu-row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.nr-menu-slider { width: 100%; margin: 2px 0 10px; }
.nr-menu-presets { display: flex; gap: 5px; margin-bottom: 11px; }
.nr-menu-presets button {
  flex: 1;
  width: auto;
  padding: 5px 4px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nr-menu-presets button:hover:not(:disabled) { background: var(--elev); color: var(--text); }
.nr-menu-presets button.active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); }
.nr-menu-row select { width: 118px; padding: 5px 7px; font-size: 12px; }
.nr-menu.is-off .nr-menu-row, .nr-menu.is-off .nr-menu-presets { opacity: .5; }

/* ---------- drag & drop ---------- */

body.dragging #previewWrap { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------- light theme ---------- */

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f6;
  --panel: #ffffff;
  --panel-2: #f1f4f8;
  --elev: #e4e9f0;
  --border: rgba(15, 23, 42, .1);
  --border-strong: rgba(15, 23, 42, .18);
  --text: #131a24;
  --text-dim: #5c6b7d;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, .07);
  --shadow-2: 0 10px 30px -8px rgba(15, 23, 42, .18);
  --shadow-3: 0 24px 70px -16px rgba(15, 23, 42, .28);

  --scrim: rgba(15, 23, 42, .38);
  --stage-bg: radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #dfe5ee 75%);
  --stage-shadow: inset 0 0 50px rgba(15, 23, 42, .05);
  --lane-audio: rgba(148, 163, 184, .28);
  --lane-ol: rgba(148, 163, 184, .18);
  --lane-stripe: rgba(255, 255, 255, .6);
  --playhead: #1c2735;
  --playhead-glow: rgba(15, 23, 42, .35);
}
:root[data-theme="light"] kbd { background: rgba(15, 23, 42, .05); }
:root[data-theme="light"] #topbar {
  background: linear-gradient(180deg, #ffffff, #fafbfd);
}
:root[data-theme="light"] .btn-accent {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .15), inset 0 1px 0 rgba(255, 255, 255, .25);
}
:root[data-theme="light"] .clip { background: #cdd6e1; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18); }
:root[data-theme="light"] .clip.current { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 85%, transparent); }
/* keep the selected glow in light theme: the base .clip override above
   out-specifies plain .clip.selected and would otherwise cancel it. The ring
   itself comes from .clip.selected::after, which no theme rule touches. */
:root[data-theme="light"] .clip.selected {
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent);
}
:root[data-theme="light"] #playheadHandle { box-shadow: 0 1px 5px rgba(15, 23, 42, .3); }
:root[data-theme="light"] .aclip { border-left-color: rgba(15, 23, 42, .15); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- settings ---------- */

.modal-card-wide { width: 460px; max-width: 92vw; }
.settings-card { text-align: left; max-height: 88vh; display: flex; flex-direction: column; }
.settings-card h2 { text-align: center; }
.settings-card > p { text-align: center; }

.settings-body { overflow-y: auto; padding-right: 4px; }

.set-group { padding: 16px 0; border-top: 1px solid var(--border); }
.set-group:first-child { border-top: none; padding-top: 4px; }
.set-group h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}
.set-note { font-size: 11px; color: var(--text-dim); margin: -4px 0 10px; }
/* shown when the app is opened straight off disk and can't remember a folder */
.set-note-warn {
  color: var(--text);
  background: rgba(239, 68, 68, .10);
  border-left: 3px solid var(--danger);
  border-radius: 4px;
  padding: 7px 9px;
  margin: -2px 0 10px;
}

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text);
  margin: 8px 0;
}
.set-row-top { align-items: flex-start; }
.set-row select, .set-row input[type="color"] { min-width: 150px; }
.set-row input[type="color"] {
  width: 44px; min-width: 44px; height: 28px; padding: 2px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer;
}
.check-row { justify-content: flex-start; gap: 8px; cursor: pointer; }
.check-row input { width: auto; }

.swatches { display: flex; gap: 8px; }
.swatch {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sw);
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer; padding: 0;
  transition: transform .12s var(--ease);
}
.swatch:hover { transform: scale(1.12); }
.swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--sw); }

/* ---------- autosave reminder banner ---------- */

.app-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--text);
  font-size: 13px;
}
.app-banner[hidden] { display: none; }

.app-banner-icon { font-size: 18px; line-height: 1; }
.app-banner-text { flex: 1 1 240px; min-width: 0; color: var(--text); }
.app-banner-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.app-banner-close {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.app-banner-close:hover { color: var(--text); background: var(--elev); }

/* brief highlight when the banner sends the user to the Autosave settings */
.set-group-flash {
  animation: set-group-flash 1.6s var(--ease);
  border-radius: var(--radius-sm);
}
@keyframes set-group-flash {
  0%, 100% { background: transparent; }
  20%, 60% { background: color-mix(in srgb, var(--accent) 16%, transparent); }
}

/* autosave location row (inside Settings) */
.autosave-loc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.loc-path {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* voiceover: recording state on the record button */
#btnRecordVoiceover.recording {
  background: #e5484d;
  border-color: #e5484d;
  color: #fff;
  animation: recPulse 1.2s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}