:root {
  --bg: #0a0a0a;            /* neutral near-black, no tint */
  --track: #121212;         /* timeline tracks: the same, a touch brighter for contrast */
  --panel: #171717;         /* all greys neutral (no blue tint) */
  --panel-2: #1e1e1e;
  --line: #2a2a2a;
  --text: #ececec;
  --muted: #8e8e8e;
  --accent: #cfcfcf;        /* no blue: the accent is near-white (user's rule) */
  --accent-text: #0a0a0a;
  --cut: #e5484d;
  --zoom: #f5a524;
  --hl: #ffd60a;
  --sel: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13.5px/1.45 "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
}
button:hover { border-color: var(--muted); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
input[type="number"], textarea {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
}
input[type="number"] { width: 64px; }
textarea { width: 100%; resize: vertical; padding: 8px; }
.hidden { display: none !important; }

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--track);   /* our black, a touch brighter */
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; letter-spacing: 0.01em; margin-right: 10px; }
.brand img { height: 18px; width: auto; display: block; }
/* Original / Edited length: plain grey text */
.lengths { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.lengths .dot { margin: 0 8px; opacity: 0.6; }
.spacer { flex: 1; }
/* right side of the top bar: undo/redo icons, white primary */
.topbar button { font-size: 12.5px; font-weight: 500; height: 32px; padding: 0 15px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); transition: background 0.15s, border-color 0.15s, color 0.15s; }
.topbar button:hover:not(:disabled) { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.14); }
.topbar button:disabled { opacity: 0.35; }
.history { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
.topbar .iconbtn, .history .iconbtn { width: 28px; height: 26px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; border-radius: 6px; color: var(--muted); }
.topbar .iconbtn:hover:not(:disabled), .history .iconbtn:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: var(--text); }
.history .iconbtn:disabled { opacity: 0.35; }
.iconbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* styled dropdown (app.js fancySelect) */
.dd { position: relative; }
.topbar .dd-btn { display: flex; align-items: center; gap: 8px; border-radius: 6px 0 0 6px; padding: 0 10px 0 12px; background: transparent; }
.topbar .dd-btn:hover:not(:disabled) { background: rgba(255,255,255,0.05); }
.dd-btn svg { width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.dd.open .dd-btn svg { transform: rotate(180deg); }
.dd-menu { position: absolute; z-index: 40; top: calc(100% + 6px); right: -1px; min-width: 260px; padding: 4px; border-radius: 9px;
  background: #141414; border: 1px solid rgba(255,255,255,0.1); }
.dd-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.dd-item:hover { background: rgba(255,255,255,0.06); }
.dd-item b { display: block; font-weight: 500; font-size: 12.5px; color: var(--text); }
.dd-item i { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.dd-item i:empty { display: none; }
.dd-item svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.dd-item.on svg { visibility: visible; }
/* "..." menu */
.more { position: relative; }
.topbar #moreBtn { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.05); }
.topbar #moreBtn svg { fill: currentColor; stroke: none; }
.more .dd-menu { min-width: 190px; right: 0; }
.topbar .menu-item { display: block; width: 100%; text-align: left; height: auto; padding: 8px 10px; border: 0; border-radius: 6px;
  background: transparent; font-size: 12.5px; color: var(--text); }
.topbar .menu-item:hover:not(:disabled) { background: rgba(255,255,255,0.06); border: 0; }
.topbar button.primary { background: #cfcfcf; border-color: #cfcfcf; color: #0a0a0a; font-weight: 600; }
.topbar button.primary:hover:not(:disabled) { background: #dcdcdc; border-color: #dcdcdc; }

.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  /* sizes the user drags (app.js "resizable panels"), remembered per browser */
  /* minmax(0, 1fr): the middle never grows to fit its content (the timeline drawing),
     which made it widen on every redraw while dragging and push the layout around */
  grid-template-columns: var(--left-w, 210px) minmax(0, 1fr) var(--right-w, 400px);
  grid-template-rows: minmax(0, 1fr) var(--tl-row, var(--timeline-h, max(28vh, 345px)));
  overflow: hidden;
  overflow: clip;   /* hidden can still be scrolled by focus; the closed timeline hangs below the window, and a click on a switch used to scroll it into view */
  position: relative;
}
/* drag handles on the panel edges */
.splitter { position: absolute; z-index: 5; }
.splitter::after { content: ""; position: absolute; background: transparent; transition: background 0.12s; }
.splitter:hover::after, .splitter.dragging::after { background: rgba(255,255,255,0.35); }
.splitter.v { top: 0; bottom: 0; width: 9px; cursor: col-resize; }
.splitter.v::after { top: 0; bottom: 0; left: 4px; width: 2px; }
.splitter.h { height: 9px; cursor: row-resize; }
.splitter.h::after { left: 0; right: 0; top: 4px; height: 2px; }
#splitLeft { left: calc(var(--left-w, 210px) - 5px); }
#splitRight { right: calc(var(--right-w, 400px) - 5px); }
#splitTimeline { left: var(--left-w, 210px); right: var(--right-w, 400px); bottom: calc(var(--tl-row, var(--timeline-h, max(28vh, 345px))) - 5px); }
body.resizing { user-select: none; }
body.resizing.resize-col { cursor: col-resize; }
body.resizing.resize-row { cursor: row-resize; }
body.dragging-sfx, body.dragging-sfx * { cursor: grabbing !important; user-select: none; }

.videos { border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 8px; grid-row: 1 / 3; }
.side-title { color: var(--muted); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin: 2px 10px 10px; opacity: 0.8; }
/* video list: compact rows; the open one is just a soft grey fill */
.video-item {
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 1px;
  transition: background 0.12s;
}
.video-item:hover { background: rgba(255,255,255,0.035); }
.video-item.on { background: rgba(255,255,255,0.07); }
.video-item .name { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: 13.5px; color: #bdbdbd; line-height: 1.35; }
.video-item.on .name { color: var(--text); font-weight: 500; }
.video-item .name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-item .name em { font-style: normal; font-size: 11.5px; color: #6a6a6a; margin-left: auto; }
.video-item .name em:empty { display: none; }
/* a status shows only when something's up: analyzing (small spinner), error, not analyzed */
.video-item .state { display: flex; align-items: center; gap: 7px; color: #7a7a7a; font-size: 11.5px; margin-top: 3px; }
.video-item .state:empty { display: none; }
.video-item .state[data-s="busy"]::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.15); border-top-color: #cfcfcf; animation: spin 0.8s linear infinite; }
.video-item .state[data-s="error"] { color: #e5888b; }
@keyframes pulse { 50% { opacity: 0.35; } }

.stage { min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 14px; }
.empty { color: var(--muted); }
.analyzing { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.player { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; }
.frame {
  position: relative;
  flex: 1;
  min-height: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 8px;
}
/* The video only decodes; every frame is drawn onto #view at the exact zoom
   (drawImage with fractional crop = smooth, no pixel snapping = no shake). */
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Styled from the edit's caption settings in app.js (sizes are px of a 1920-high frame, scaled). */
.caption {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  cursor: ns-resize;
  user-select: none;
}
.caption .row-line { display: flex; justify-content: center; }
.caption .inner { display: inline-block; white-space: nowrap; line-height: 1; }
/* play bar: one soft pill holding a round play button, the time and a toggle */
.transport { display: flex; align-items: center; gap: 14px; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--track); border: 1px solid rgba(255,255,255,0.06); }
.playbtn { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: #cfcfcf; color: #0a0a0a; transition: background 0.15s; }
.playbtn:hover { background: #dcdcdc; }
.playbtn svg { width: 16px; height: 16px; fill: currentColor; display: none; }
.playbtn[data-state="play"] .i-play, .playbtn:not([data-state]) .i-play, .playbtn[data-state="pause"] .i-pause { display: block; }
.playbtn .i-load { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #0a0a0a; animation: spin 0.8s linear infinite; }
.playbtn[data-state="load"] .i-load { display: block; }
.time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; min-width: 96px; letter-spacing: 0.01em; }
.switch { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; cursor: pointer; user-select: none; }
.switch:hover { color: var(--text); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
/* neutral like the play button: off = dim track, grey knob; on = white track, black knob */
/* a proper switch: the knob fills the track (the old 8px dot looked unfinished) */
.switch .knob { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: #2a2a2a;
  border: 1px solid rgba(255,255,255,0.08); transition: background 0.18s, border-color 0.18s; }
.switch .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #9a9a9a; transition: transform 0.18s cubic-bezier(0.3, 0.7, 0.4, 1), background 0.18s; }
.switch:hover .knob { border-color: rgba(255,255,255,0.16); }
.switch input:checked + .knob { background: #cfcfcf; border-color: #cfcfcf; }
.switch input:checked + .knob::after { transform: translateX(14px); background: #0a0a0a; }
.switch input:focus-visible + .knob { outline: 2px solid var(--accent); outline-offset: 2px; }

/* thin, rounded scrollbars everywhere */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.28); }
::-webkit-scrollbar-button { display: none; }

.panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; grid-row: 1 / 3; grid-column: 3; }
/* tab row: soft grey pills like the Basic/Pro switch; fits narrow panels (scrolls sideways if it must) */
.tabs { display: flex; gap: 1px; padding: 8px 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1 0 auto; border: 0; border-radius: 8px; background: transparent; color: var(--muted); padding: 6px 7px; font-size: 12.5px;
  font-weight: 500; white-space: nowrap; transition: color 0.12s, background 0.12s; }
.tabs button:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.tabs button.on { color: var(--text); background: rgba(255,255,255,0.09); }
.tab { display: none; padding: 12px; overflow-y: auto; flex: 1; min-height: 0; }
.tab.on { display: block; }
.hint { color: var(--muted); font-size: 12px; margin: 4px 0 10px; }
.row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.row.wrap { flex-wrap: wrap; gap: 6px; }
.row label { display: flex; align-items: center; gap: 6px; }

/* transcript: calm reading text. Kept words bright, cut words dim grey with a
   faint strike, highlights yellow, the playing word softly lit. No underlines. */
#tab-transcript { padding: 14px 18px 24px; }
.tr-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 12px; color: #8e8e8e; cursor: help; }
.tr-keys span { display: inline-flex; align-items: center; gap: 6px; }
.tr-keys kbd { font: 600 10.5px/1 "Segoe UI", system-ui, sans-serif; color: #d6d6d6; padding: 4px 6px; border-radius: 5px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); min-width: 20px; text-align: center; }
.transcript { font-size: 15.5px; line-height: 1.85; color: #e4e4e4; user-select: none; }
.transcript .w { padding: 2px 1px; border-radius: 4px; cursor: pointer; transition: background 0.1s, color 0.1s; }
.transcript .w:hover { background: rgba(255,255,255,0.07); }
.transcript .w.cut { color: #565656; text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.2); text-decoration-thickness: 1px; }
.transcript .w.cut:hover { color: #8a8a8a; }
.transcript .w.hl { color: #f5b82e; font-weight: 600; }
.transcript .w.low:not(.cut) { text-decoration: underline dotted rgba(255,255,255,0.28); text-underline-offset: 5px; }
.transcript .w.now { color: #fff; background: rgba(255,255,255,0.12); }
.transcript .w.sel { color: #fff; background: rgba(255,255,255,0.18); }
.transcript .gap { color: #6a6a6a; font-size: 11px; }
.transcript input { font: inherit; width: 8em; padding: 1px 6px; color: var(--text); background: #1c1c1c; border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; outline: none; }

.zoom-item { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px; }
.zoom-item .top { display: flex; align-items: center; gap: 8px; }
.zoom-item select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px; }
.zoom-item .meta { color: var(--muted); font-size: 12px; grid-column: 1 / 3; cursor: pointer; }
.zoom-item .reason { color: var(--muted); font-size: 12px; grid-column: 1 / 3; }

input[type="text"] { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.sound { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.sound .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound .at { color: var(--muted); font-variant-numeric: tabular-nums; cursor: pointer; min-width: 44px; }
.sound .len { color: var(--muted); font-size: 12px; }
.sound button { padding: 2px 8px; }
.sound input[type="number"] { width: 52px; }
.group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 16px 0 8px; }
.group:first-child { margin-top: 4px; }
select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.grow { flex: 1; min-width: 0; }
.slider { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 8px; margin-bottom: 8px; }
.slider span { color: var(--muted); }
.slider b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.slider input { width: 100%; accent-color: var(--accent); }
.colors input[type="color"] { width: 34px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; }
.preset { color: var(--muted); font-size: 12px; white-space: pre-wrap; border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.preset:empty { display: none; }
.lengths.over .edited { color: var(--cut); }

/* ---- Ask AI tab: a chat (ChatGPT-like). Your comments = bubbles on the right,
   the AI's answers = text on the left with the logo. Solid surfaces, roomy type. */
.tab.ai.on { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ai-head { display: flex; align-items: center; gap: 8px; padding: 16px 18px 8px; font-weight: 600; font-size: 14px; }
.ai-count { font-size: 11.5px; font-weight: 600; color: #0a0a0a; padding: 0 7px; border-radius: 999px; background: #f5b82e; line-height: 19px; }
.ai-count:empty { display: none; }
.ai-clear { margin-left: auto; font-size: 12px; font-weight: 500; padding: 5px 11px; border: 0; background: rgba(255,255,255,0.05); color: #a8a8a8; border-radius: 6px; }
.ai-clear:hover { color: var(--text); background: rgba(255,255,255,0.09); }
.chat { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.chat:empty { display: none; }
.msg { display: flex; gap: 10px; max-width: 100%; }
/* you: right-aligned bubbles */
.msg.me { justify-content: flex-end; }
.msg.me + .msg.ai, .msg.ai + .msg.me { margin-top: 14px; }
.bubble { position: relative; max-width: 86%; padding: 10px 14px 12px; border-radius: 12px 12px 4px 12px; background: #262626; }
.msg.me + .msg.me .bubble { border-top-right-radius: 4px; }
.bubble-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.ai-text { font-size: 15px; line-height: 1.5; color: #f0f0f0; white-space: pre-wrap; word-break: break-word; }
.msg.me.done .bubble { background: #1b1b1b; }
.msg.me.done .ai-text { color: #8a8a8a; }
.ai-done { display: inline-grid; place-items: center; }
.ai-done svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: rgba(62,207,142,0.16); fill: none; stroke: #3ecf8e;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ai-del { margin-left: auto; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; display: grid; place-items: center;
  color: #8a8a8a; opacity: 0; transition: opacity 0.12s; }
.bubble:hover .ai-del { opacity: 1; }
.ai-del:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.ai-del svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* the AI: plain text, like ChatGPT's answers (no avatar) */
.msg.ai { align-items: flex-start; }
.ai-say { flex: 1; min-width: 0; max-width: 560px; padding: 0 4px; font-size: 15px; line-height: 1.6; color: #e9e9e9; white-space: pre-wrap; word-break: break-word; }
.msg.ai.error .ai-say { color: #f0a5a7; }
.typing { display: inline-flex; gap: 4px; padding: 8px 12px; border-radius: 8px; background: #1e1e1e; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9a9a9a; animation: bob 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bob { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
/* the yellow timestamp, as in the composer */
.ai-stamp { flex: none; font: 600 12px/1 "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  color: #f5b82e; background: rgba(245,184,46,0.14); border: 1px solid rgba(245,184,46,0.25); border-radius: 6px; padding: 5px 8px; }
button.ai-stamp { cursor: pointer; }
button.ai-stamp:hover { background: rgba(245,184,46,0.22); border-color: rgba(245,184,46,0.45); }
.msg.me.done .ai-stamp { color: #8a8a8a; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
.ai-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px; text-align: center; }
.ai-empty svg { width: 84px; height: 72px; margin-bottom: 10px; }
.ai-empty .b1 { fill: #1f1f1f; }
.ai-empty .b2 { fill: #2e2e2e; }
.ai-empty circle { fill: #0f0f0f; }
.ai-empty b { font-weight: 600; font-size: 15px; color: #d0d0d0; }
.ai-empty span { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 240px; }
/* composer: a big rounded box like ChatGPT's, with a round send button */
.ai-foot { padding: 6px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-compose { display: flex; align-items: flex-end; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 12px; background: #1c1c1c;
  border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.15s, background 0.15s; }
.ai-compose:focus-within { border-color: rgba(255,255,255,0.18); background: #202020; }
.ai-compose .ai-stamp { margin-bottom: 4px; }
.ai-compose textarea { flex: 1; border: 0; background: transparent; padding: 5px 0; resize: none; font-size: 14px; line-height: 1.5; outline: none; min-height: 26px; max-height: 140px; }
.ai-compose textarea::placeholder { color: #707070; }
.ai-send { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; background: #cfcfcf; color: #0a0a0a; transition: background 0.15s; }
.ai-send:hover { background: #dcdcdc; }
.ai-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ai-run { width: 100%; height: 42px; border-radius: 10px; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 9px; }
/* nothing to run: a quiet dark pill, not a faded white block */
.ai-run.primary:disabled { opacity: 1; background: #161616; border-color: rgba(255,255,255,0.06); color: #666; }
/* running: dark, a spinner, a soft light sweeping across */
.ai-run.primary.running:disabled { color: #dcdcdc; background: #1c1c1c; position: relative; overflow: hidden; }
.ai-run.running::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent); animation: sweep 1.8s ease-in-out infinite; }
@keyframes sweep { to { transform: translateX(100%); } }
.ai-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18); border-top-color: #e8e8e8; animation: spin 0.8s linear infinite; }
button.primary { background: #cfcfcf; border-color: #cfcfcf; color: #0a0a0a; }
button.primary:hover:not(:disabled) { background: #dcdcdc; border-color: #dcdcdc; }

.timeline-wrap { min-width: 0; grid-column: 2; border-top: 1px solid var(--line); background: var(--bg); padding-bottom: clamp(0.75rem, 2.2vh, 1.5rem); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#timelineScroll, #proScroll { flex: 1; min-height: 0; }
#proScroll { overflow-y: auto; }
.selbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.selbar span { color: var(--muted); margin-right: 6px; min-width: 140px; }
.timeline-scroll { overflow-x: auto; overflow-y: hidden; position: relative; }
/* 16px in from both sides: the playhead at 0:00 / the end stays clear of the panel dividers */
#timeline { display: block; margin: 0 16px; cursor: crosshair; -webkit-user-drag: none; user-select: none; touch-action: none; }
/* the playhead's grab area: 9px either side of the line, full height, above everything on the timeline */
.play-grip { position: absolute; top: 0; width: 19px; margin-left: -9.5px; z-index: 6; cursor: ew-resize;   /* above the panel dividers (5) */
  touch-action: none; user-select: none; -webkit-user-drag: none; }
.play-grip:hover, body.scrubbing .play-grip { background: rgba(255,255,255,0.06); }
#proTimeline { display: block; cursor: pointer; }
/* the report card: "Check 3 spots" (the checker's flags), list in the popover */
.check-btn { margin-left: auto; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; background: rgba(255,255,255,0.05);
  color: var(--text); padding: 0.28rem 0.8rem; font-size: 12px; font-weight: 500; cursor: pointer; }
.check-btn:hover { background: rgba(255,255,255,0.1); }
.check-btn .n { display: inline-block; min-width: 16px; margin-right: 6px; padding: 0 5px; border-radius: 8px;
  background: #f5a524; color: #111; font-weight: 700; font-size: 11px; text-align: center; }
.check-btn:not(.hidden) + .viewtoggle { margin-left: 8px; }   /* Basic / Pro stay on the right either way */
.post-part { margin-bottom: 10px; }
.post-part .field-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.post-part .field-top button { border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 5px; }
.post-part .field-top button:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.post-part textarea { width: 100%; resize: vertical; min-height: 38px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  background: rgba(255,255,255,0.04); color: var(--text); font: 13px/1.45 inherit; padding: 6px 8px; }
.flag-ctx { font-size: 12.5px; line-height: 1.55; color: var(--muted); background: rgba(255,255,255,0.04); border-radius: 8px;
  padding: 7px 9px; margin: 2px 0 8px; }
.flag-ctx .hit { color: var(--text); font-weight: 600; }
.flag-ctx .cut { text-decoration: line-through; opacity: 0.55; }
.flag-q { font-size: 13px; line-height: 1.45; color: var(--text); margin: 2px 0 10px; }
.flag-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.flag-opts button { border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; background: rgba(255,255,255,0.06); color: var(--text);
  padding: 0.35rem 0.7rem; font-size: 12px; cursor: pointer; }
.flag-opts button:first-child { background: #cfcfcf; color: #111; border-color: #cfcfcf; }
.flag-opts button:hover { filter: brightness(1.1); }
.flag-opts button.ignore, .ignore-all { background: transparent; border-color: transparent; color: var(--muted); }
.flag-opts button.ignore:hover, .ignore-all:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.ignore-all { margin-left: auto; border: 0; border-radius: 6px; padding: 0.2rem 0.5rem; font-size: 12px; cursor: pointer; }
.flag-list { max-height: 320px; overflow-y: auto; margin: 0 -6px 8px; }
.flag-list button { display: flex; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text);
  padding: 7px 6px; border-radius: 7px; font-size: 12.5px; cursor: pointer; }
.flag-list button:hover { background: rgba(255,255,255,0.06); }
.flag-list .t { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Basic / Pro: a segmented control - one soft track, the active option a raised tile */
.viewtoggle { margin-left: auto; display: inline-flex; gap: 2px; padding: 2px; border-radius: 6px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06); }
.viewtoggle button { border: 0; border-radius: 4px; background: transparent; color: var(--muted);
  padding: 0.28rem 0.95rem; font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s; }
.viewtoggle button:hover { color: var(--text); }
.viewtoggle button.on { background: rgba(255,255,255,0.11); color: var(--text); }

/* yellow note on the left of the timeline bar while Pro is showing */
.pro-note { color: var(--hl); font-size: 12px; padding: 3px 10px; border-radius: 6px;
  background: rgba(255,214,10,0.08); border: 1px solid rgba(255,214,10,0.22); }

/* hover tips on the timeline marks */
.tl-tip { position: fixed; z-index: 50; pointer-events: none; padding: 5px 9px; border-radius: 6px; font-size: 12px;
  color: var(--text); background: #161616; border: 1px solid rgba(255,255,255,0.12); white-space: nowrap; }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  max-width: 640px; padding: 10px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  white-space: pre-wrap;
}

/* ---- sliders everywhere: thin rounded track, filled up to the thumb (--p set in app.js), white thumb */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; accent-color: initial; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, #cfcfcf var(--p, 50%), rgba(255,255,255,0.12) var(--p, 50%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: #cfcfcf; border: 0; transition: transform 0.12s; }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }

/* ---- Captions tab */
#tab-captions { padding: 16px 16px 28px; }
/* "Show captions" then its switch right next to it - compact, no full-width box */
.cap-toggle { display: inline-flex; gap: 12px; margin: 2px 2px 22px; color: var(--text); font-size: 14px; font-weight: 600; }
.cap-toggle:hover { color: var(--text); }
.cap-label { font-size: 12px; font-weight: 600; color: #a0a0a0; margin: 0 2px 10px; }
.field { margin-bottom: 16px; }
.field-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 13px; color: #d0d0d0; }
.field-top b { font-weight: 500; font-size: 12px; color: #8e8e8e; font-variant-numeric: tabular-nums; }
.field-ends { display: flex; justify-content: space-between; font-size: 11px; color: #666; margin-top: 2px; }
.cap-tip { font-size: 12px; color: #7a7a7a; margin: -4px 2px 18px; }
/* advanced: a fold-out with labelled groups */
.advanced { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 4px; }
.advanced summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 12px 2px;
  font-size: 13.5px; font-weight: 600; color: #d6d6d6; user-select: none; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary:hover { color: #fff; }
.advanced summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.advanced[open] summary svg { transform: rotate(180deg); }
.adv-group { padding: 14px; margin-bottom: 12px; border-radius: 10px; background: #141414; border: 1px solid rgba(255,255,255,0.05); }
.adv-title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7a7a7a; margin-bottom: 12px; }
/* label column, then the control right next to it (not pushed to the far right) */
.adv-row { display: flex; align-items: center; gap: 12px; min-height: 32px; margin-bottom: 10px; font-size: 13px; color: #d0d0d0; }
.adv-row > span:first-child { flex: none; width: 118px; }
.adv-row.switch { color: #d0d0d0; font-size: 13px; }
.adv-row .grow-label { flex: none; width: 118px; }
.adv-row select { max-width: 60%; height: 32px; border-radius: 8px; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.08); padding: 0 8px; }
.adv-row input[type="color"] { width: 34px; height: 26px; padding: 2px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.12); background: #1c1c1c; cursor: pointer; }
.adv-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.adv-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.adv-group .field:last-child, .adv-group .adv-row:last-child { margin-bottom: 0; }
/* styled dropdowns inside the side panel (fancySelect) */
.adv-row .dd { min-width: 0; max-width: calc(100% - 130px); }
.adv-row .dd-btn { display: flex; align-items: center; gap: 8px; max-width: 100%; height: 32px; padding: 0 10px 0 12px; border-radius: 8px;
  background: #1c1c1c; border: 1px solid rgba(255,255,255,0.08); font-size: 12.5px; }
.adv-row .dd-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-row .dd-btn:hover { border-color: rgba(255,255,255,0.16); }
.adv-row .dd-menu { min-width: 220px; max-height: 280px; overflow-y: auto; }

/* ---- projects sidebar, empty / drop screen, menu extras */
.side-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px 0; }
.side-head .side-title { margin: 2px 10px 0; }
.side-new { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; display: grid; place-items: center;
  background: rgba(255,255,255,0.05); color: #cfcfcf; }
.side-new:hover { background: rgba(255,255,255,0.1); color: #fff; }
.side-new svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.side-empty { font-size: 12px; color: #6a6a6a; margin: 4px 10px; }
.empty { width: 100%; height: 100%; display: grid; place-items: center; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 360px; padding: 44px 36px; text-align: center;
  border: 1.5px dashed rgba(255,255,255,0.12); border-radius: 16px; transition: border-color 0.15s, background 0.15s; }
.drop svg { width: 34px; height: 34px; fill: none; stroke: #8e8e8e; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.drop b { font-size: 15px; font-weight: 600; color: #e6e6e6; }
.drop span { font-size: 12.5px; color: #7a7a7a; }
.drop button { margin-top: 8px; height: 36px; padding: 0 18px; border-radius: 9px; font-weight: 600; }
body.dropping .drop { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.03); }
body.dropping::after { content: "Drop to add"; position: fixed; inset: 10px; z-index: 100; display: grid; place-items: center; pointer-events: none;
  border: 2px dashed rgba(255,255,255,0.4); border-radius: 16px; background: rgba(10,10,10,0.6); color: #fff; font-size: 16px; font-weight: 600; }
.menu-sep { height: 1px; margin: 4px 6px; background: rgba(255,255,255,0.08); }
.topbar .menu-item.danger { color: #e5888b; }
.more .dd-menu { min-width: 230px; }
/* no project open: the drop screen fills the space (centered), editing controls hide */
body.no-project .stage { grid-column: 2 / 4; grid-row: 1 / 3; }
body.no-project #splitRight, body.no-project #splitTimeline,
body.no-project .history, body.no-project #render, body.no-project .lengths,
body.no-project #export, body.no-project #saveProject, body.no-project #saveProjectVideo,
body.no-project #deleteProject, body.no-project #moreMenu .sm-sep { display: none; }
/* settings switches: label then the switch, one per row */
.set-row { display: flex; gap: 12px; margin: 0 0 12px; font-size: 13px; color: #d0d0d0; }
.set-row .grow-label { width: 190px; flex: none; }

/* ---- Ask AI: setup + chat scroll together */
.ai-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.ai-scroll .chat { overflow: visible; flex: none; }
.setup { margin: 4px 14px 14px; padding: 16px; border-radius: 12px; background: #141414; border: 1px solid rgba(255,255,255,0.07); }
.setup-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.setup-sub { font-size: 12.5px; line-height: 1.5; color: #8e8e8e; margin-bottom: 16px; }
.setup .set-row .grow-label { width: auto; flex: 1; }
.setup-label { font-size: 12px; font-weight: 600; color: #a0a0a0; margin: 6px 0 8px; }
.setup textarea { width: 100%; min-height: 76px; padding: 10px 12px; border-radius: 10px; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.08);
  font-size: 13.5px; line-height: 1.5; resize: vertical; outline: none; }
.setup textarea:focus { border-color: rgba(255,255,255,0.2); }
.setup textarea::placeholder { color: #6a6a6a; }

/* transcript peek above the comment box */
.peek { padding: 12px 14px 14px; border-radius: 14px; background: #161616; border: 1px solid rgba(255,255,255,0.08); }
.peek-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.peek-head span:first-child { font-size: 12px; font-weight: 600; color: #cfcfcf; }
.peek-tip { font-size: 11px; color: #5f5f5f; }
.peek-text { font-size: 14px; line-height: 1.75; color: #b5b5b5; max-height: 132px; overflow-y: auto; user-select: none; cursor: text; }
.peek-text .pw { padding: 2px 0; cursor: pointer; transition: background 0.1s, color 0.1s; }
.peek-text .pw:hover { color: #fff; background: rgba(255,255,255,0.07); }
.peek-text .pw.now { color: #fff; text-decoration: underline; text-decoration-color: #f5b82e; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.peek-text .pw.cut { color: #4f4f4f; text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.18); }
.peek-text .pw.sel { color: #fff; background: rgba(245,184,46,0.28); }
.peek-text .pw:hover:not(.sel) { border-radius: 4px; }
.peek-none { color: #6a6a6a; }
.ai-peek-btn { flex: none; width: 30px; height: 30px; margin-top: -1px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center;
  background: transparent; color: #8e8e8e; }
.ai-peek-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ai-peek-btn.on { background: rgba(255,255,255,0.1); color: #fff; }
.ai-peek-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ai-compose { align-items: center; }

/* delete a project from the list (shows on hover) */
.video-item { position: relative; }
.item-del { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
  display: grid; place-items: center; background: #1e1e1e; color: #8e8e8e; opacity: 0; transition: opacity 0.12s; }
.video-item:hover .item-del { opacity: 1; }
.video-item:hover .name em { visibility: hidden; }
.item-del:hover { color: #e5888b; background: #262626; }
.item-del svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.app-version { margin-left: 2px; font-size: 11px; font-weight: 500; color: #6a6a6a; font-variant-numeric: tabular-nums; }

/* a selected part: the stamp shows the range, and a Cut button sits next to it */
.ai-stamp.range { color: #0a0a0a; background: #f5b82e; border-color: #f5b82e; }
.ai-cut { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 600;
  color: #f0a5a7; background: rgba(229,72,77,0.12); border: 1px solid rgba(229,72,77,0.3); }
.ai-cut:hover { background: rgba(229,72,77,0.2); color: #fff; }
.ai-cut svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* comment box: one line - time (or the selection) and Cut, the text, then transcript + send */
.ai-compose { flex-wrap: nowrap; align-items: center; }
.ai-compose .ai-stamp { order: 1; margin-bottom: 0; }
.ai-compose .ai-cut { order: 2; }
.ai-compose textarea { order: 3; flex: 1 1 auto; min-width: 60px; }
.ai-compose .ai-peek-btn { order: 4; margin: 0; }
.ai-compose .ai-send { order: 5; }

/* ---- AI at work: a dot grid drifting + a soft light sweeping over the video and the timeline */
.ai-working { position: absolute; inset: 0; z-index: 6; display: none; overflow: hidden; pointer-events: none; border-radius: inherit;
  background: rgba(8,8,8,0.55); backdrop-filter: blur(2px) saturate(0.6); }
body.ai-busy .ai-working { display: block; animation: aw-in 0.4s ease-out; }
.timeline-wrap { position: relative; }
/* ---- the timeline slides away: its row closes and it keeps its height, so the tracks aren't redrawn while it moves */
.layout { transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
body.resizing .layout { transition: none; }
body.tl-closed .layout { grid-template-rows: minmax(0, 1fr) 0px; }
.timeline-wrap { height: var(--timeline-h, max(28vh, 345px)); align-self: start; }
body.tl-closed #splitTimeline { display: none; }
/* more room under the play bar while the timeline is closed: the video never runs to the bottom, and the tab stands there */
body:not(.no-project) .stage { padding-bottom: 24px; transition: padding-bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
body.tl-closed:not(.no-project) .stage { padding-bottom: 96px; }
/* the tab: only while the timeline is closed, in the timeline's colour, as if the timeline's edge shows */
.tl-toggle { display: none; position: absolute; left: 50%; bottom: -96px; z-index: 6; height: 54px; padding: 7px 40px 0; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transform: translateX(-50%);
  border: 0; border-radius: 0; background: transparent; color: #b4b4b4; font-size: 15px; font-weight: 600; line-height: 1; transition: color 0.15s; }
.tl-toggle:hover { color: #e6e6e6; }
body.tl-closed .tl-toggle { display: inline-flex; }
/* stands on the bottom edge and gets wider towards it, tilted so any label length gets the same slope */
.tl-toggle::before { content: ""; position: absolute; inset: 0; z-index: -1; box-sizing: border-box; background: #040404; border-radius: 12px 12px 0 0;
  transform: perspective(70px) rotateX(16deg); transform-origin: bottom; transition: background 0.15s; }
.tl-toggle:hover::before { background: #111; }
.tl-toggle svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); }
body.ai-busy.tl-closed .tl-toggle { display: none; }
.aw-dots { position: absolute; inset: -40px; opacity: 0.55;
  background-image: radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1.6px); background-size: 18px 18px;
  animation: aw-drift 6s linear infinite, aw-breathe 2.4s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.ai-working.thin .aw-dots { opacity: 0.35; -webkit-mask-image: none; mask-image: none; }
.aw-sweep { position: absolute; top: 0; bottom: 0; width: 45%; left: -45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.10) 45%, rgba(245,184,46,0.12) 55%, transparent);
  animation: aw-sweep 2.6s ease-in-out infinite; }
.aw-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; color: #fff; white-space: nowrap; }
.aw-label b { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.aw-step { font-size: 12.5px; color: rgba(255,255,255,0.7); animation: aw-fade 9s ease-in-out infinite; }
.aw-orb { width: 34px; height: 34px; border-radius: 50%;
  background: conic-gradient(from 0deg, #f5b82e, #fff, #f5b82e00, #f5b82e); animation: spin 1.4s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
@keyframes aw-in { from { opacity: 0; } }
@keyframes aw-drift { to { transform: translate(18px, 18px); } }
@keyframes aw-breathe { 50% { opacity: 0.25; } }
@keyframes aw-sweep { to { left: 100%; } }
@keyframes aw-fade { 0%, 100% { opacity: 0.35; } 10%, 90% { opacity: 1; } }

/* preview note: just right of the video, level with its top */
.player { position: relative; }
.preview-note { position: absolute; top: 0; left: calc(50% + var(--frame-w, 400px) / 2 + 16px); width: 248px; z-index: 4;
  padding: 14px 38px 15px 16px; border-radius: 14px; background: #161616; border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 7px; }
.preview-note b { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #ececec; }
.preview-note b svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #f5b82e; stroke-width: 1.5; stroke-linecap: round; }
.preview-note span { font-size: 12.5px; line-height: 1.55; color: #9a9a9a; text-wrap: pretty; }
.pn-close { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
  display: grid; place-items: center; background: transparent; color: #7a7a7a; }
.pn-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pn-close svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* preview note: the timeline's colour, no border, equal padding, X level with the first line (the user) */
.preview-note { width: 240px; padding: 12px 40px 12px 12px !important; border: 0 !important; border-radius: 8px !important; background: #040404 !important; }
.preview-note span { line-height: 19px !important; }
.pn-close { top: 12px !important; right: 12px !important; width: 19px !important; height: 19px !important; border-radius: 4px !important; }
.pn-close svg { width: 9px !important; height: 9px !important; }
.preview-note:not(.show), .preview-note.no-room { display: none; }   /* shown from the first play on */   /* no room beside the video: hidden, never over the picture */

/* the selection menu */
.sel-menu { position: fixed; z-index: 60; min-width: 200px; padding: 5px; border-radius: 11px; background: #161616;
  border: 1px solid rgba(255,255,255,0.1); animation: sm-in 0.12s ease-out; }
@keyframes sm-in { from { opacity: 0; transform: translateY(4px); } }
.sm-head { padding: 6px 10px 7px; font-size: 11.5px; font-weight: 600; color: #8e8e8e; font-variant-numeric: tabular-nums; }
.sel-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 32px; padding: 0 10px;
  border: 0; border-radius: 7px; background: transparent; font-size: 13px; color: #e6e6e6; text-align: left; }
.sel-menu button:hover { background: rgba(255,255,255,0.07); }
.sel-menu button[data-sm="cut"] span { color: #f27478; }
.sel-menu kbd { font: 600 10.5px/1 "Segoe UI", system-ui, sans-serif; color: #8e8e8e; padding: 3px 6px; border-radius: 5px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
.sm-sep { height: 1px; margin: 4px 6px; background: rgba(255,255,255,0.07); }

/* admin-only, temporary: save for training */
.topbar .train-btn { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
  color: #f5b82e; background: rgba(245,184,46,0.08); border: 1px dashed rgba(245,184,46,0.4); }
.topbar .train-btn:hover:not(:disabled) { background: rgba(245,184,46,0.14); border-color: rgba(245,184,46,0.6); }
body.no-project .train-btn { display: none; }

/* Original / Edited length: in the timeline bar, on the left */
.selbar .lengths { margin-right: 12px; }

/* =====================================================================
   STYLE PASS (v24): same layout, a calmer, more product-like look.
   Inter, deeper black, one set of surfaces / borders / radii, no dashed
   boxes or badges. Everything below only restyles - remove the block to undo.
   ===================================================================== */
:root {
  --bg: #0b0b0b;
  --track: #111111;
  --panel: #141414;
  --panel-2: #1a1a1a;
  --line: rgba(255,255,255,0.07);
  --text: #ededed;
  --muted: #8b8b8b;
  --r: 10px;           /* corners */
  --surface: #141414;  /* cards, menus, inputs */
  --edge: rgba(255,255,255,0.07);
}
body, button, input, select, textarea { font-family: Inter, "Segoe UI", system-ui, sans-serif; font-feature-settings: "cv11", "ss01"; }
body { font-size: 13px; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; }

/* top bar: same black as the page, a hairline below */
.topbar { background: var(--bg); border-bottom: 1px solid var(--edge); padding: 10px 16px; }
.brand { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.app-version { color: #5d5d5d; }
.topbar button { border-radius: 9px; }
.history { background: transparent; border: 1px solid var(--edge); border-radius: 10px; }
.topbar #moreBtn { border-radius: 10px; border-color: var(--edge); background: var(--surface); }
.topbar .train-btn { border: 1px solid var(--edge); background: var(--surface); color: #c9a54a; font-weight: 500; }
.topbar .train-btn:hover:not(:disabled) { background: #1b1b1b; border-color: rgba(255,255,255,0.14); }
.dd-menu, .sel-menu { background: #151515; border-color: rgba(255,255,255,0.09); border-radius: 12px; }

/* side panels */
.videos, .panel { border-color: var(--edge); }
.videos { background: #010101; }
.side-title { font-size: 11px; letter-spacing: 0.06em; color: #6f6f6f; }
.video-item { border-radius: 9px; }
.video-item.on { background: #191919; }
.side-new { border-radius: 8px; background: transparent; border: 1px solid var(--edge); }

/* tabs: a quiet segmented row */
.tabs { gap: 2px; padding: 10px; border-bottom-color: var(--edge); }
.tabs button { border-radius: 8px; font-weight: 500; color: #8b8b8b; }
.tabs button.on { background: #1d1d1d; color: #fff; }

/* the video */
.frame { border: 0; border-radius: 14px; }
.transport { background: var(--surface); border-color: var(--edge); }

/* empty / drop screen: a plain card, no dashes */
.drop { border: 1px solid var(--edge); border-radius: 18px; background: #0f0f0f; padding: 48px 44px; gap: 8px; }
.drop svg { width: 28px; height: 28px; stroke: #8b8b8b; padding: 12px; box-sizing: content-box; border-radius: 12px; background: #191919; }
.drop b { font-size: 16px; letter-spacing: -0.015em; }
.drop button { border-radius: 10px; }
body.dropping .drop { border-color: rgba(255,255,255,0.3); }
body.dropping::after { border-style: solid; border-color: rgba(255,255,255,0.25); }

/* timeline bar: plain grey text instead of the yellow badge */
.timeline-wrap { border-top-color: var(--edge); }
.selbar { border-bottom-color: var(--edge); }
.pro-note { color: #8b8b8b; background: none; border: 0; padding: 0; }
.pro-note::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #c9a54a; vertical-align: 1px; }
.viewtoggle { border-radius: 10px; border-color: var(--edge); background: var(--surface); }
.viewtoggle button { border-radius: 7px; }

/* cards, inputs, notes: one surface */
.setup, .peek, .adv-group, .preview-note, .ai-compose, .cap-toggle { border-color: var(--edge); }
.setup, .peek, .adv-group, .preview-note { background: var(--surface); border-radius: 14px; }
.ai-compose { background: var(--surface); border-radius: 14px; }
.ai-compose:focus-within { background: #171717; border-color: rgba(255,255,255,0.14); }
.bubble { background: #1d1d1d; }
.ai-stamp { border-radius: 7px; }
.ai-run { border-radius: 12px; }
.toast { background: #161616; border-color: rgba(255,255,255,0.1); border-radius: 12px; }

/* scrollbars a touch quieter */
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }
.tabs { padding: 10px 8px; gap: 0; }
.tabs button { padding: 6px 7px; font-size: 12.5px; flex: 1 1 auto; }
.drop { max-width: 380px; }
.drop span { max-width: 260px; line-height: 1.5; text-wrap: balance; }
.tabs { padding: 10px 6px; }
.tabs button { padding: 6px 5px; font-size: 12px; letter-spacing: -0.01em; }

/* layers: navs (top bar, projects, right panel) a step lighter, the stage
   (where the video sits) the darkest, the timeline in between */
:root { --nav: #171717; --stage: #090909; --mid: #0f0f0f; }
body { background: var(--stage); }
.topbar, .videos, .panel { background: var(--nav); }
.stage { background: var(--stage); }
.timeline-wrap { background: var(--mid); }
/* things inside a nav sit one step up again */
.panel .setup, .panel .peek, .panel .adv-group, .panel .ai-compose, .panel .cap-toggle { background: #1b1b1b; }
.panel .bubble { background: #232323; }
.panel .ai-compose:focus-within { background: #1e1e1e; }
.panel .ai-run.primary:disabled { background: #1b1b1b; }
.video-item.on { background: #232323; }
.video-item:hover { background: #1b1b1b; }
.history, .topbar #moreBtn, .topbar .train-btn { background: #1b1b1b; }
.tabs button.on { background: #252525; }
.transport, .preview-note { background: #141414; }
.panel .setup, .panel .peek, .panel .adv-group, .panel .ai-compose, .panel .cap-toggle,
.history, .topbar #moreBtn, .topbar .train-btn, .video-item:hover { background: #1e1e1e; }
.video-item.on, .panel .bubble { background: #262626; }
/* transcript window: the tip sits right next to its title */
.peek-head { justify-content: flex-start; gap: 10px; }
/* the Pro note: all of it yellow (the user's choice) */
.pro-note { color: #f5b82e; }
.pro-note::before { background: #f5b82e; }

/* ---- Zooms + Sounds tabs */
.seg { display: flex; gap: 2px; padding: 3px; margin-bottom: 16px; border-radius: 10px; background: #111111; border: 1px solid var(--edge); }
.seg button { flex: 1; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: #8b8b8b; font-size: 12.5px; font-weight: 500; }
.seg button:hover { color: #fff; }
.seg button.on { background: #272727; color: #fff; }
.seg.small { margin-bottom: 12px; }
.seg.small button { height: 26px; font-size: 12px; }
.hidden-fields { display: none !important; }
.list-head { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.list-head .count { font-size: 11px; color: #8b8b8b; padding: 0 7px; border-radius: 999px; background: #1e1e1e; line-height: 18px; }
.list-head .count:empty { display: none; }
.lib-head { margin-top: 22px; }
.list-empty { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 12px; border: 1px solid var(--edge); background: #141414; }
.list-empty b { font-size: 13px; font-weight: 600; color: #d7d7d7; }
.list-empty span { font-size: 12.5px; line-height: 1.5; color: #8b8b8b; }
.zcard { padding: 12px 14px 4px; margin-bottom: 8px; border-radius: 12px; background: #1b1b1b; border: 1px solid var(--edge); }
.zc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.zc-words { flex: 1; min-width: 0; font-size: 12.5px; color: #bababa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-del { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; background: transparent; color: #7d7d7d; }
.row-del:hover { color: #f0a5a7; background: rgba(229,72,77,0.12); }
.row-del svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.srow { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: 10px; }
.srow:hover { background: #1b1b1b; }
.srow.placed { background: #1b1b1b; border: 1px solid var(--edge); margin-bottom: 6px; }
.srow .play { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #272727; color: #fff; }
.srow .play:hover { background: #dcdcdc; color: #0a0a0a; }
.srow .play svg { width: 11px; height: 11px; fill: currentColor; margin-left: 1px; }
.sname { flex: 1; min-width: 0; font-size: 13px; color: #e3e3e3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slen { flex: none; font-size: 12px; color: #787878; font-variant-numeric: tabular-nums; }
.srow .add { flex: none; height: 28px; padding: 0 11px; border-radius: 8px; font-size: 12px; font-weight: 600; background: #242424; border: 1px solid var(--edge); color: #e7e7e7; }
.srow .add:hover { background: #dcdcdc; color: #0a0a0a; border-color: #dcdcdc; }
.vol { flex: none; display: flex; align-items: center; gap: 8px; width: 120px; }
.vol input { flex: 1; min-width: 0; }
.vol b { width: 42px; text-align: right; font-size: 11.5px; font-weight: 500; color: #8b8b8b; font-variant-numeric: tabular-nums; }
.search { width: 100%; height: 34px; margin-bottom: 8px; padding: 0 12px; border-radius: 10px; background: #141414; border: 1px solid var(--edge); font-size: 13px; outline: none; }
.search:focus { border-color: rgba(255,255,255,0.18); }

.redo-box { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--edge); }
.redo-box button { height: 34px; padding: 0 14px; border-radius: 10px; background: #1e1e1e; border: 1px solid var(--edge); font-weight: 500; }
.redo-box button:hover { background: #272727; }
.redo-box span { font-size: 12px; color: #8b8b8b; }

/* Presets tab */
.preset-row { display: flex; gap: 6px; margin-bottom: 10px; }
.preset-pick { flex: 1; min-width: 0; }
.preset-pick .dd { width: 100%; }
.preset-pick .dd-btn { width: 100%; justify-content: space-between; height: 36px; padding: 0 12px; border-radius: 10px; background: #1b1b1b; border: 1px solid var(--edge); font-weight: 500; }
.preset-pick .dd-btn:hover { border-color: rgba(255,255,255,0.16); }
.preset-pick .dd-btn svg { width: 13px; height: 13px; fill: none; stroke: #8b8b8b; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.preset-pick .dd-menu { left: 0; right: auto; width: 100%; top: calc(100% + 6px); }
.icon-sq { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 10px; display: grid; place-items: center; background: #1b1b1b; border: 1px solid var(--edge); color: #d0d0d0; }
.icon-sq:hover:not(:disabled) { background: #242424; color: #fff; }
.icon-sq.danger:hover:not(:disabled) { color: #f0a5a7; background: rgba(229,72,77,0.12); }
.icon-sq:disabled { opacity: 0.35; }
.icon-sq svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.preset-actions { display: flex; gap: 6px; margin-bottom: 12px; }
.preset-actions button { flex: 1; height: 36px; border-radius: 10px; font-weight: 600; }
.preset-actions button:not(.primary) { background: #1b1b1b; border: 1px solid var(--edge); }
.preset-sum { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-bottom: 22px; border-radius: 12px; background: #141414; border: 1px solid var(--edge); white-space: normal; }
.preset-sum div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.preset-sum span { color: #8b8b8b; }
.preset-sum b { font-weight: 500; color: #e3e3e3; text-align: right; }
#tab-settings .set-row .grow-label { width: auto; flex: 1; }
.redo-ai { margin-top: 6px; height: 36px; padding: 0 14px; border-radius: 10px; background: #1b1b1b; border: 1px solid var(--edge); font-weight: 500; }
.redo-ai:hover { background: #242424; }
.preset-pick .dd-btn span { flex: 1; text-align: left; }
.preset-sum div span:empty { display: none; }
.preset-sum div:has(span:empty) b { text-align: left; color: #8b8b8b; font-weight: 400; }
body.resizing-zoom, body.resizing-zoom * { cursor: ew-resize !important; user-select: none; }

/* a zoom's / sound's options, next to it on the timeline */
.pop { position: fixed; z-index: 61; width: 280px; padding: 12px 14px 4px; border-radius: 14px; background: #161616; border: 1px solid rgba(255,255,255,0.1);
  animation: sm-in 0.12s ease-out; }
.pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pop-head b { font-size: 13px; font-weight: 600; }
.pop-head .pop-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-head .row-del { margin-left: auto; }
.pop-head .play { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #272727; color: #fff; }
.pop-head .play:hover { background: #dcdcdc; color: #0a0a0a; }
.pop-head .play svg, .sp-row .play svg { width: 11px; height: 11px; fill: currentColor; margin-left: 1px; }
.pop-words { font-size: 12.5px; color: #aaaaaa; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* sound picker (right-click > Add sound) */
.sound-pick { width: 260px; padding: 8px; }
.sound-pick .search { margin-bottom: 6px; }
.sp-list { max-height: 300px; overflow-y: auto; }
.sp-row { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 6px; border-radius: 8px; cursor: pointer; }
.sp-row:hover { background: rgba(255,255,255,0.07); }
.sp-row .play { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #272727; color: #fff; }
.sp-row .play:hover { background: #dcdcdc; color: #0a0a0a; }
.sp-none { padding: 10px 8px; font-size: 12.5px; color: #8b8b8b; }

/* chat: your messages read like messages - text first, a quiet line under it */
.bubble { padding: 10px 14px 8px; border-radius: 16px 16px 5px 16px; background: #242424; }
.panel .bubble { background: #242424; }
.bubble .ai-text { font-size: 14px; line-height: 1.5; color: #f0f0f0; }
.msg.me.done .bubble { background: #1e1e1e; }
.msg.me.done .ai-text { color: #c9c9c9; }
.bubble-meta { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.bubble-meta .ai-stamp { padding: 0; border: 0; background: none; font-size: 11.5px; font-weight: 500; color: #c9a54a; border-radius: 0; }
.bubble-meta .ai-stamp:hover { background: none; color: #f5b82e; text-decoration: underline; text-underline-offset: 3px; }
.msg.me.done .bubble-meta .ai-stamp { color: #8b8b8b; background: none; }
.bubble-meta .ai-done { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: #3ecf8e; }
.bubble-meta .ai-done svg { width: 12px; height: 12px; padding: 0; background: none; stroke: #3ecf8e; stroke-width: 2.2; }
.bubble-meta .ai-del { margin-left: auto; width: 22px; height: 22px; }

/* transcript window: kept text bright, cut words in muted red (like the timeline) */
.peek { padding: 12px 16px 14px; }
.peek-head span:first-child { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8b8b8b; }
.peek-tip { font-size: 11px; color: #5f5f5f; }
.peek-text { font-size: 14px; line-height: 1.7; color: #e5e5e5; }
.peek-text .pw.cut { color: rgba(240,130,133,0.55); text-decoration: line-through; text-decoration-color: rgba(229,72,77,0.6); }
.peek-text .pw.cut:hover { color: rgba(240,130,133,0.85); }

/* =====================================================================
   TYPE SCALE (v27): four sizes for the whole app, readable weights.
   12 meta / 13 controls / 15 reading text / 17 headings
   ===================================================================== */
:root { --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; }
body { font-size: var(--fs-sm); }

/* 12 - small meta */
.ai-stamp, .bubble-meta .ai-stamp, .bubble-meta .ai-done, .slen, .vol b, .field-ends, .peek-tip, .sm-head, kbd, .sel-menu kbd,
.app-version, .tl-tip, .ai-count, .list-head .count, .tr-keys, .tr-keys kbd, .video-item .name em, .video-item .state,
.dd-item i, .redo-box span, .preset-sum span, .field-top b, .side-title, .cap-label, .adv-title, .peek-head span:first-child,
.setup-label, .lengths, .pro-note, .sp-none { font-size: var(--fs-xs) !important; }

/* 13 - controls and labels */
button, select, .topbar button, .tabs button, .seg button, .seg.small button, .menu-item, .topbar .menu-item, .sel-menu button,
.dd-btn, .adv-row .dd-btn, .dd-item b, .srow .add, .field-top, .field-top span, .set-row, .adv-row, .switch, .cap-toggle,
.zc-words, .pop-words, .hint, .preset-sum div, .preset-sum b, .ai-head, .setup-sub, .list-empty span, .ai-empty span,
.drop span, .ai-clear, .ai-run, .redo-ai, .redo-box button, .preset-actions button, .icon-sq, .train-btn, .brand,
.video-item .name, .sname, .pop-head b { font-size: var(--fs-sm) !important; }

/* 14 - text you read or type */
.ai-text, .bubble .ai-text, .ai-say, .peek-text, .transcript, textarea, input[type="text"], .search,
.ai-compose textarea, .setup textarea, .aw-step { font-size: var(--fs-md) !important; }

/* 16 - headings */
.setup-title, .list-empty b, .ai-empty b, .drop b, .aw-label b { font-size: var(--fs-lg) !important; }

/* weights: medium for labels / controls, regular for reading text */
.field-top span, .set-row, .adv-row, .switch, .cap-label, .adv-title, .tabs button, .seg button, .menu-item,
.sel-menu button, .dd-item b, .video-item .name, .sname { font-weight: 500; }
.ai-text, .ai-say, .peek-text, .transcript { font-weight: 400; }
.cap-label, .adv-title, .side-title { letter-spacing: 0.02em; text-transform: none; color: #9b9b9b; }

/* chat messages, the way chat apps do it */
.msg.me { flex-direction: column; align-items: flex-end; gap: 4px; }
.msg.me + .msg.me { margin-top: 6px; }
.bubble, .panel .bubble, .msg.me.done .bubble { max-width: 85%; padding: 9px 15px 10px; border-radius: 20px; background: #303030; }
.bubble .ai-text, .msg.me.done .ai-text { font-size: 15px !important; line-height: 1.45; color: #ededed; }
.msg-meta { display: flex; align-items: center; gap: 6px; padding-right: 6px; font-size: 12px; color: #8b8b8b; }
.msg-meta .ai-stamp, .msg.me.done .msg-meta .ai-stamp { padding: 0; border: 0; border-radius: 0; background: none; color: #8b8b8b; font-weight: 400; font-size: 12px !important; }
.msg-meta .ai-stamp:hover { background: none; color: #ededed; }
.msg-meta .ai-done { font-size: 12px !important; color: #8b8b8b; font-weight: 400; }
.msg-meta .ai-del { width: 20px; height: 20px; opacity: 0; }
.msg.me:hover .msg-meta .ai-del { opacity: 1; }
.msg-meta .ai-del svg { width: 10px; height: 10px; }
/* transcript window header: the standard 13px, readable weights */
.peek-head span:first-child { font-size: var(--fs-sm) !important; font-weight: 600; text-transform: none; letter-spacing: 0; color: #e7e7e7; }
.peek-tip { font-size: var(--fs-sm) !important; font-weight: 500; color: #8b8b8b; }

/* ---- PROJECT LIST + HEADER (v28) ---- */
.video-item { display: flex; align-items: center; gap: 11px; padding: 7px 8px !important; border-radius: 10px; }
.video-item .thumb { width: 38px; height: 50px; flex: none; border-radius: 6px; overflow: hidden; background: #242424;
  outline: 1px solid rgba(255,255,255,0.06); outline-offset: -1px; }
.video-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-item .item-text { min-width: 0; flex: 1; }
.video-item .name { color: #d5d5d5; }
.video-item.on .name { color: #fff; }
.video-item .state { margin-top: 4px; color: #787878; font-variant-numeric: tabular-nums; }
.video-item .item-del { top: 50% !important; transform: translateY(-50%); }

.brand { gap: 10px; font-size: var(--fs-md) !important; font-weight: 650; letter-spacing: -0.015em; color: #f2f2f2; }
.brand img { height: 22px; }
.app-version { margin-left: 0; padding: 2px 7px; border-radius: 6px; background: #242424; color: #8b8b8b !important;
  font-size: var(--fs-xs) !important; font-weight: 500; letter-spacing: 0; line-height: 1.4; }

/* ---- SETTINGS CARDS: Cuts + Presets (v28) ---- */
.set-card + .set-card { margin-top: 12px; }
.set-card { padding: 16px 16px 6px; border-radius: 14px; background: #141414; border: 1px solid var(--edge); }
.card-head { margin-bottom: 14px; }
.card-head b { display: block; font-size: var(--fs-md) !important; font-weight: 600; color: #f2f2f2; }
.card-head p { margin: 3px 0 0; font-size: var(--fs-sm) !important; color: #8f8f8f; line-height: 1.45; }
.set-card .seg { margin-bottom: 8px; background: #0e0e0e; }
.mode-desc { margin: 0 2px 14px; font-size: var(--fs-sm) !important; color: #b5b5b5; line-height: 1.45; }
.field-desc { margin: 6px 0 0; font-size: var(--fs-xs) !important; color: #7f7f7f; line-height: 1.45; }
.set-card .field { margin-bottom: 16px; }
.set-card .set-row { align-items: center; margin: 0 0 14px; }
.set-row .grow-label small { display: block; margin-top: 2px; font-size: var(--fs-xs) !important; font-weight: 400; color: #7f7f7f; line-height: 1.4; }
.set-card .redo-ai { width: 100%; margin-top: 4px; }
.set-card .redo-ai + .field-desc { margin: 8px 0 10px; text-align: center; }
.sum-title { margin: 4px 2px 8px; font-size: var(--fs-xs) !important; font-weight: 600; color: #8f8f8f; }
.set-card .preset-sum { margin-bottom: 12px; background: #0e0e0e; }
.set-card .preset-actions { margin-bottom: 10px; }

/* ---- TRANSCRIPT TAB (v28) ---- */
#tab-transcript { padding: 14px 16px 24px; }
.tr-bar { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #141414; border: 1px solid var(--edge); }
.tr-how { font-size: var(--fs-sm) !important; color: #b5b5b5; line-height: 1.45; margin-bottom: 10px; }
.tr-bar .tr-keys { margin: 0; padding: 0; border: 0; gap: 8px 16px; cursor: default; color: #8f8f8f; }
.tr-bar .tr-keys kbd { font: 600 var(--fs-xs)/1 Inter, system-ui, sans-serif !important; color: #e7e7e7; padding: 5px 7px; min-width: 24px;
  border-radius: 6px; background: #242424; border: 1px solid #343434; border-bottom-width: 2px; }
.transcript { font-size: var(--fs-md) !important; line-height: 1.9; color: #e7e7e7; }
.transcript .w { padding: 3px 1px; }
.transcript .w.cut { color: #9a5254; text-decoration: line-through; text-decoration-color: rgba(229,72,77,0.6); }
.transcript .w.cut:hover { color: #c06a6d; }
.transcript .w.sel { color: #fff; background: rgba(255,255,255,0.2); }
.transcript .word-input { font: inherit; font-weight: 500; min-width: 3ch; padding: 2px 8px; margin: 0 1px; color: #fff; background: #202020;
  border: 1px solid rgba(255,255,255,0.55); border-radius: 7px; outline: 3px solid rgba(255,255,255,0.08); outline-offset: 0; }
.transcript .word-input::selection { background: rgba(255,255,255,0.28); color: #fff; }
/* a selected run reads as one block: each word covers the space after it */
.transcript .w.sel { border-radius: 0; padding-right: calc(1px + 0.28em); margin-right: -0.28em; }
.transcript .w.sel:not(:has(+ .w.sel)) { padding-right: 1px; margin-right: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.transcript .w.sel:first-child, .transcript .w:not(.sel) + .w.sel { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
#tab-settings .card-head { margin-bottom: 12px; }
#tab-settings .set-card .redo-ai { margin-bottom: 12px; }

/* ---- ZOOM / SOUND POPOVER (v28) ---- */
.pop { width: 296px; padding: 14px 16px 6px; border-radius: 16px; }
.pop .pop-head { display: flex; align-items: center; gap: 10px; height: 30px; margin-bottom: 6px; }
.pop .pop-head .pop-name { flex: 1; min-width: 0; font-size: var(--fs-md) !important; font-weight: 600; color: #f2f2f2; line-height: 30px; }
.pop .row-del { width: 30px; height: 30px; margin: 0 -6px 0 0; border-radius: 9px; align-self: center; }
.pop .row-del svg { display: block; width: 15px; height: 15px; }
.pop .pop-head .play { width: 30px; height: 30px; }
.pop-meta { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 14px; }
.pop-meta .ai-stamp { flex: none; margin: 0; }
.pop-meta .pop-words { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-xs) !important; color: #8f8f8f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop .seg { margin-bottom: 14px; }
.pop .field { margin-bottom: 12px; }
.side-btns { display: flex; gap: 6px; }
.drop-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.drop-btns button:not(.primary) { height: 36px; padding: 0 16px; border-radius: 10px; background: #1e1e1e; border: 1px solid var(--edge); font-weight: 500; }
.drop-btns button:not(.primary):hover { background: #272727; }

/* ---- TOOLTIPS (v28): one look for every hover tip ---- */
.hover-tip, .tl-tip { position: fixed; z-index: 90; pointer-events: none; max-width: 260px; padding: 7px 10px; border-radius: 8px;
  background: #272727; border: 1px solid rgba(255,255,255,0.1); color: #ededed; font-size: var(--fs-sm) !important; font-weight: 500;
  line-height: 1.4; white-space: normal; }
.hover-tip.hidden, .tl-tip.hidden { display: none; }

/* preview note: plain and small, just the sentence and a close button (v28) */
.preview-note { width: 230px; padding: 10px 34px 11px 12px; gap: 0; border-radius: 10px; background: #141414; border: 1px solid var(--edge); }
.preview-note span { font-size: var(--fs-sm) !important; font-weight: 400; line-height: 1.5; color: #a5a5a5; }
.pn-close { top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 5px; }
.pn-close svg { width: 10px; height: 10px; }

/* ---- SETUP CARD (v28): tiles you turn on / off, then a few simple settings ---- */
.panel .setup { margin: 4px 12px 14px; padding: 18px 16px 16px; border-radius: 16px; background: #161616; }
.setup-sub { margin-bottom: 16px !important; color: #8f8f8f !important; }
.su-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.su-tile { position: relative; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; border-radius: 12px; cursor: pointer;
  background: #111111; border: 1px solid var(--edge); color: #7f7f7f; font-size: var(--fs-sm); font-weight: 500; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.su-tile:hover { border-color: rgba(255,255,255,0.16); color: #c5c5c5; }
.su-tile input { position: absolute; opacity: 0; pointer-events: none; }
.su-tile svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.su-tile span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-check { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #3b3b3b; }
.su-tile:has(input:checked) { background: #262626; border-color: rgba(255,255,255,0.28); color: #f2f2f2; }
.su-tile:has(input:checked) .su-check { border: 0; background: #cfcfcf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='%230a0a0a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.su-tile:has(input:focus-visible) { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }
.su-tile.hidden { display: none; }
.setup .setup-label { margin: 0 2px 10px; font-size: var(--fs-sm) !important; font-weight: 600; color: #e7e7e7; }
.setup .setup-label em { font-style: normal; font-weight: 400; color: #787878; margin-left: 4px; }
.setup .su-len { margin-bottom: 20px; }
.setup .su-len .field-top span { font-weight: 600; color: #e7e7e7; }
.panel .setup textarea { min-height: 64px; background: #111111; border-color: var(--edge); }
.setup .setup-title { margin-bottom: 14px; }
body.scrubbing, body.scrubbing * { cursor: ew-resize !important; user-select: none; }
.ai-foot.pre-edit .peek, .ai-foot.pre-edit .ai-compose { display: none !important; }

/* setup tiles + caption samples, refined (v28): no tint, finer icons and checks */
.su-tile { gap: 11px; height: 46px; padding: 0 12px 0 13px; }
.su-tile svg { width: 16px; height: 16px; stroke-width: 1.4; opacity: 0.9; }
.su-check { width: 16px; height: 16px; border: 1px solid #3d3d3d; }
.su-tile:has(input:checked) .su-check { border: 0; background: #cfcfcf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8.3 7.1 10.3 11 6' fill='none' stroke='%230a0a0a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.su-tile:has(input:checked) { background: #232323; border-color: rgba(255,255,255,0.2); }
.su-check { width: 15px; height: 15px; }
.su-tile:has(input:checked) .su-check { background-size: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.3 8.3 7.2 10.1 10.8 6.2' fill='none' stroke='%230a0a0a' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---- AI at work, v2 (v28): a still, fine dot grid; a soft green wave rolls across
   and lights the dots it passes; green spinner. No drifting, no yellow. ---- */
.ai-working { background: rgba(8, 8, 8,0.6); backdrop-filter: blur(3px) saturate(0.5); }
.aw-dots { inset: 0; opacity: 1; animation: none;
  background-image: radial-gradient(rgba(255,255,255,0.16) 0.8px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: none; mask-image: none; }
.aw-dots::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(134,239,172,0.95) 0.9px, transparent 1.5px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(105deg, transparent 35%, #000 50%, transparent 65%); mask-image: linear-gradient(105deg, transparent 35%, #000 50%, transparent 65%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: aw-wave 3.2s cubic-bezier(0.45, 0, 0.35, 1) infinite; }
.ai-working.thin .aw-dots { opacity: 1; }
.aw-sweep { width: 60%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(74,222,128,0.05) 35%, rgba(74,222,128,0.13) 50%, rgba(74,222,128,0.05) 65%, transparent);
  animation: aw-sweep2 3.2s cubic-bezier(0.45, 0, 0.35, 1) infinite; }
.aw-orb { width: 30px; height: 30px; background: conic-gradient(from 0deg, rgba(74,222,128,0), #4ade80 70%, #bbf7d0);
  animation: spin 1.1s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
@keyframes aw-wave { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
@keyframes aw-sweep2 { from { left: -60%; } to { left: 100%; } }
.aw-sweep { background: linear-gradient(90deg, transparent, rgba(74,222,128,0.05) 30%, rgba(74,222,128,0.12) 50%, rgba(74,222,128,0.05) 70%, transparent); }

/* AI at work label (v28): a compact card - spinner left, title + current step right */
.aw-label { flex-direction: row; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 14px;
  background: rgba(18, 18, 18,0.86); border: 1px solid rgba(255,255,255,0.09); backdrop-filter: blur(8px); text-align: left; }
.aw-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aw-label b { font-size: var(--fs-md) !important; font-weight: 600; letter-spacing: 0; color: #f2f2f2; line-height: 1.3; }
.aw-step { font-size: var(--fs-sm) !important; color: #9b9b9b; line-height: 1.35; animation: none; }
.aw-step:empty { display: none; }
.aw-orb { width: 22px; height: 22px; flex: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }

/* preset dropdown (v29): name left, chevron right, both centered on one line */
.preset-pick .dd-btn { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px;
  height: 38px; padding: 0 12px 0 14px !important; line-height: 1; }
.preset-pick .dd-btn span { flex: 1; min-width: 0; text-align: left !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-pick .dd-btn svg { display: block; width: 16px !important; height: 16px !important; flex: none; stroke: #8b8b8b; stroke-width: 1.5 !important; }
/* presets: one card (v29) */
.sub-label { margin: 4px 2px 12px; font-size: var(--fs-sm) !important; font-weight: 600; color: #e7e7e7; }
.card-sep { height: 1px; background: var(--edge); margin: 4px -16px 14px; }
#tab-settings .set-card .preset-actions { margin: 6px 0 14px; }
#tab-settings .set-card .redo-ai { margin: 0 0 12px; }
.sub-label { margin: 6px 0 12px; }
#tab-settings .preset-row { margin-bottom: 16px; }
#tab-settings .set-card .preset-sum { margin: 6px 0 12px; }


/* busy card (v29): like a normal app's progress - title + %, a thin bar, one quiet line. No spinner. */
.aw-label { flex-direction: column; align-items: stretch; gap: 0; width: 240px; padding: 14px 16px 13px; border-radius: 12px;
  background: rgba(20, 20, 20,0.92); border: 1px solid rgba(255,255,255,0.08); }
.aw-orb { display: none; }
.aw-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.aw-label b { font-size: var(--fs-sm) !important; font-weight: 600; color: #f2f2f2; }
.aw-pct { font-size: var(--fs-sm) !important; font-weight: 500; color: #9b9b9b; font-variant-numeric: tabular-nums; }
.aw-bar { position: relative; height: 3px; margin: 10px 0 8px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.aw-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #cfcfcf; transition: width 0.3s ease; }
.aw-bar.busy i { width: 35% !important; transition: none; animation: aw-bar 1.6s cubic-bezier(0.45, 0, 0.35, 1) infinite; }
@keyframes aw-bar { from { left: -35%; } to { left: 100%; } }
.aw-step { font-size: var(--fs-xs) !important; color: #8b8b8b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* busy card: centered, no box of its own (v29) */
.aw-label { background: none; border: 0; backdrop-filter: none; padding: 0; text-align: center; align-items: center; }
.aw-row { justify-content: center; gap: 8px; }
.aw-bar { width: 100%; }

/* ---- STORAGE (v29): meter at the bottom of Projects + "Free up space" window ---- */
.videos { display: flex; flex-direction: column; }
#videoList { flex: none; }
.storage { margin-top: auto; position: sticky; bottom: 0; width: 100%; padding: 10px 10px 8px; border: 0; border-radius: 10px; text-align: left;
  background: var(--nav); cursor: pointer; }
.storage:hover { background: #1e1e1e; }
.st-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: var(--fs-xs) !important; }
.st-top span { color: #8f8f8f; font-weight: 600; }
.st-top b { color: #8f8f8f; font-weight: 500; font-variant-numeric: tabular-nums; }
.st-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: 2px; background: #9b9b9b; }
.storage[data-level="warn"] .st-bar i { background: #f5b82e; }
.storage[data-level="full"] .st-bar i { background: #e5484d; }
.storage[data-level="warn"] .st-top b { color: #f5b82e; }
.storage[data-level="full"] .st-top b { color: #f0a5a7; }

.modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,0.6); }
.modal.hidden { display: none; }
.modal-box { width: min(520px, 100%); max-height: min(640px, 100%); display: flex; flex-direction: column; padding: 18px 18px 12px; border-radius: 16px;
  background: #161616; border: 1px solid rgba(255,255,255,0.1); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head b { font-size: var(--fs-md) !important; font-weight: 600; color: #f2f2f2; }
.modal-head .iconbtn { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; background: transparent; color: #8f8f8f; }
.modal-head .iconbtn:hover { background: #242424; color: #fff; }
.modal-head svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.st-msg { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(245,184,46,0.08); border: 1px solid rgba(245,184,46,0.25);
  color: #f3d58a; font-size: var(--fs-sm) !important; line-height: 1.45; }
.st-msg.hidden { display: none; }
.st-list { overflow-y: auto; margin: 0 -6px; }
.st-row { display: flex; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 10px; }
.st-row:hover { background: #1c1c1c; }
.st-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-name b { font-size: var(--fs-sm) !important; font-weight: 500; color: #e7e7e7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-name span { font-size: var(--fs-xs) !important; color: #8b8b8b; font-variant-numeric: tabular-nums; }
.st-act { flex: none; height: 30px; padding: 0 10px; border-radius: 8px; background: #202020; border: 1px solid var(--edge); color: #d5d5d5;
  font-size: var(--fs-xs) !important; font-weight: 500; }
.st-act:hover { background: #2a2a2a; color: #fff; }
.st-act.danger { color: #e5888b; }
.st-act.danger:hover { color: #f0a5a7; background: rgba(229,72,77,0.12); }
.st-empty { padding: 14px 6px; color: #8b8b8b; font-size: var(--fs-sm) !important; }
/* switches sit next to their label (like Captions), in one column per tab (v29) */
.preview-making { margin-left: 4px; font-size: var(--fs-xs) !important; color: #8b8b8b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preview-making.hidden { display: none; }

/* project list: "Ready" when nothing runs on a project (v29) */
.video-item .state { gap: 6px; }
.ready-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; color: #9b9b9b; font-size: var(--fs-xs) !important; font-weight: 500; }
.ready-tag::before { content: "·"; color: #5d5d5d; margin-right: 1px; }
.ready-tag[data-s="ready"] { color: #86efac; }
.ready-tag[data-s="making"] { color: #9b9b9b; font-variant-numeric: tabular-nums; }

/* adding videos: a bar at the top of Projects; the add buttons wait (v30) */
.adding { margin: 0 2px 10px; padding: 10px 10px 9px; border-radius: 10px; background: #1b1b1b; border: 1px solid var(--edge); }
.adding.hidden { display: none; }
.adding .st-top span { color: #d5d5d5; }
.adding .st-bar i { background: #cfcfcf; transition: width 0.2s ease; }
.side-new:disabled, .drop-btns button:disabled, #emptyPick:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* storage bar: a solid footer across the whole list (the list showed through around it) */
.videos { padding-bottom: 0; }
.storage { margin: auto -8px 0; width: calc(100% + 16px); padding: 11px 18px 13px; border-radius: 0; border-top: 1px solid var(--edge);
  background: var(--nav) !important; z-index: 2; }
.storage:hover { background: #1c1c1c !important; }

/* ---- Captions style picker: a row that opens a panel over the right side */

.panel { position: relative; }
.cs { position: absolute; inset: 8px; z-index: 30; display: flex; flex-direction: column; min-height: 0; border-radius: 20px; background: #1d1d1d; border: 1px solid rgba(255,255,255,0.1);
  visibility: hidden; opacity: 0; transform: translateX(12px); transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.22s; }
.cs.open { visibility: visible; opacity: 1; transform: none; transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s; }
.cs-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cs-head b { font-size: var(--fs-md); font-weight: 600; color: #f2f2f2; }
.cs-back { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; background: transparent; border: 1px solid rgba(255,255,255,0.12); transition: background 0.12s, border-color 0.12s; }
.cs-back:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }
.cs-back svg { width: 16px; height: 16px; fill: none; stroke: #f2f2f2; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cs-show { justify-content: space-between; margin: 0; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); color: #f2f2f2; font-size: var(--fs-sm); }
.cs-show:hover { color: #f2f2f2; }
.cs-pills { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.cs-pills::-webkit-scrollbar { display: none; }
.cs-pills button { flex: none; height: 28px; padding: 0 11px; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; background: transparent; color: #c5c5c5; font-size: var(--fs-sm); font-weight: 500; transition: background 0.15s, color 0.15s; }
.cs-pills button:hover { color: #fff; background: rgba(255,255,255,0.06); }
.cs-pills button.on { background: #cfcfcf; border-color: #cfcfcf; color: #111111; }
.cs-search { flex: none; display: flex; align-items: center; gap: 10px; height: 40px; margin: 12px 14px 4px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,0.1); border: 1px solid transparent; transition: border-color 0.12s; }
.cs-search:focus-within { border-color: rgba(255,255,255,0.22); }
.cs-search svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #a1a1a1; stroke-width: 1.6; stroke-linecap: round; }
.cs-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #f2f2f2; font: inherit; font-size: var(--fs-sm); }
.cs-search input::placeholder { color: #a1a1a1; }
.cs-count { flex: none; padding: 10px 16px 2px; color: #8b8b8b; font-size: 11.5px; }
.cs-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 14px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 10px; align-content: start; }
.cs-empty { padding: 24px 0; text-align: center; color: #8e8e8e; font-size: var(--fs-sm); }
.cs-card { position: relative; border-radius: 12px; background: #161616; border: 1.5px solid rgba(255,255,255,0.06); cursor: pointer; overflow: hidden; outline: 0;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.cs-card:hover, .cs-card:focus-visible { border-color: rgba(255,255,255,0.3); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.cs-card.on { border-color: #cfcfcf; }
/* the picked look: a check in the corner */
.cs-card.on::after { content: ""; position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; background: #cfcfcf no-repeat center / 12px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.cs-card-view { height: 92px; background: #0e0e0e; }
.cs-card-foot { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 10px; }
.cs-card-name { flex: 1; min-width: 0; color: #d7d7d7; font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-card.on .cs-card-name { color: #fff; font-weight: 600; }
.cs-swatches { display: flex; }
.cs-swatches i { display: block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #161616; margin-left: -4px; }
.cs-swatches i:first-child { margin-left: 0; }
.cs-edit { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: 0.45; transition: opacity 0.12s, background 0.12s; }
.cs-card:hover .cs-edit, .cs-card.on .cs-edit, .cs-edit:focus-visible { opacity: 1; }
.cs-edit:hover { background: rgba(255,255,255,0.1); }
.cs-edit svg { width: 14px; height: 14px; fill: none; stroke: #f2f2f2; stroke-width: 1.4; stroke-linejoin: round; }
/* the sample uses the caption's own row / word styling */
.cs-look { position: relative; overflow: hidden; }
/* centered on the box, so a sample wider than its card shrinks around the card's middle */
.cs-sample { position: absolute; left: 50%; top: 50%; width: max-content; line-height: 1; text-align: center; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%); }
.cs-look .row-line { display: flex; justify-content: center; }
.cs-look .inner { display: inline-block; white-space: nowrap; line-height: 1; }
.active-box { display: inline-block; line-height: 1; padding: 0.2em 0.22em; margin: -0.2em -0.12em; border-radius: 0.14em; -webkit-text-stroke: 0; text-shadow: none; }

/* =====================================================================
   Cutly look (Version 45): the website's shapes on the dark app.
   No hairline boxes: surfaces are soft fills a step lighter than what
   they sit on, bigger corners, more room, tight bold headings, solid
   white primary + soft grey buttons. Restyle only - remove to undo.
   ===================================================================== */
:root {
  --stage: #070707;            /* where the video sits: darkest */
  --nav: #111111;              /* top bar, projects, right panel */
  --mid: #0c0c0c;              /* timeline */
  --soft: rgba(255,255,255,0.055);       /* cards / controls on a nav */
  --soft-2: rgba(255,255,255,0.09);      /* hover, selected */
  --soft-3: rgba(255,255,255,0.14);
  --edge: rgba(255,255,255,0.06);
  --text: #f2f2f2;
  --muted: #8d8d8d;
  --r-sm: 10px; --r: 14px; --r-lg: 18px;
}
body { letter-spacing: -0.011em; }

/* one calm frame: no lines between top bar and panels, the stage reads by being darker */
.topbar { background: var(--nav); border-bottom: 0; padding: 12px 16px; }
.videos, .panel { background: var(--nav); border: 0; }
.timeline-wrap { border-top: 0; }
.brand { font-size: 15px; letter-spacing: -0.02em; }

/* buttons: soft by default, white when it's the main action */
.topbar button, .history, .topbar #moreBtn, .topbar .train-btn,
.redo-box button, .preset-actions button:not(.primary), .icon-sq, .preset-pick .dd-btn, .srow .add {
  background: var(--soft); border-color: transparent; }
.history .iconbtn { background: transparent; }
.topbar button:hover:not(:disabled), .redo-box button:hover, .icon-sq:hover:not(:disabled), .preset-pick .dd-btn:hover,
.preset-actions button:not(.primary):hover { background: var(--soft-2); border-color: transparent; }
.history, .topbar #moreBtn { border-radius: 12px; }
.topbar button.primary, button.primary { background: #cfcfcf; border-color: #cfcfcf; color: #0a0a0a; font-weight: 600; border-radius: 12px; }
.topbar button.primary:hover:not(:disabled), button.primary:hover:not(:disabled) { background: #dcdcdc; border-color: #dcdcdc; }
.dd-menu, .sel-menu { background: #1b1b1b; border: 0; border-radius: var(--r); box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); padding: 6px; }
.dd-item, .topbar .menu-item { border-radius: 8px; }

/* tabs: soft pills */
.tabs { border-bottom: 0; padding: 12px 10px 6px; gap: 2px; }
.tabs button { border: 0; border-radius: var(--r-sm); color: var(--muted); font-weight: 500; }
.tabs button:hover { color: var(--text); background: transparent; }
.tabs button.on { background: var(--soft-2); color: var(--text); }

/* cards inside the panels: fills, no outlines, bigger corners */
.panel .setup, .panel .peek, .panel .adv-group, .panel .ai-compose, .panel .cap-toggle,
.zcard, .srow.placed, .list-empty, .preset-sum {
  background: var(--soft); border-color: transparent; border-radius: var(--r-lg); }
.panel .ai-compose:focus-within { background: var(--soft-2); }
.panel .bubble { background: var(--soft-2); border-radius: var(--r); }
.seg { background: rgba(0,0,0,0.35); border: 0; border-radius: 12px; padding: 4px; }
.seg button { border-radius: 9px; }
.seg button.on { background: var(--soft-3); }
.search, .cs-search { background: var(--soft); border-color: transparent; border-radius: 12px; }
.search:focus, .cs-search:focus-within { background: var(--soft-2); border-color: transparent; }
.redo-box { border-top-color: var(--edge); }

/* projects list */
.video-item { border-radius: 12px; }
.video-item:hover { background: var(--soft); }
.video-item.on { background: var(--soft-2); }
.side-new { border: 0; background: var(--soft); border-radius: 10px; }
.side-new:hover { background: var(--soft-2); }

/* the player's controls float on the stage */
.transport { background: rgba(255,255,255,0.06); border-color: transparent; border-radius: 999px; backdrop-filter: blur(12px); }
.viewtoggle { background: var(--soft); border-color: transparent; border-radius: 12px; }

/* ---- Captions style picker in this look */
.cs { background: #151515; border: 0; border-radius: 22px; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06); }
.cs-head, .cs-show { border-bottom-color: var(--edge); }
.cs-back { border: 0; background: var(--soft); border-radius: 10px; }
.cs-back:hover { background: var(--soft-2); }
.cs-pills button { border-color: transparent; background: var(--soft); }
.cs-pills button:hover { background: var(--soft-2); }
.cs-pills button.on { background: #cfcfcf; color: #0a0a0a; }
/* cards: a soft tile; the picked one gets a white ring floating just outside it (no badge) */
.cs-card { background: var(--soft); border: 0; border-radius: var(--r); transform: none; box-shadow: none; transition: background 0.15s, outline-color 0.15s; outline: 2px solid transparent; outline-offset: 2px; }
.cs-card:hover, .cs-card:focus-visible { background: var(--soft-2); transform: none; box-shadow: none; }
.cs-card.on { outline-color: #f5f5f5; background: var(--soft-2); }
.cs-card.on::after { content: none; }
.cs-card-view { margin: 5px 5px 0; border-radius: 10px; }
.cs-swatches i { border-color: #1d1d1d; }

/* ---- Style tiles (Captions tab + setup): the preview IS the tile, the name sits under it */
.cs-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-bottom: 28px; }
.cs-q, .cs-more { display: flex; flex-direction: column; gap: 8px; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; cursor: pointer; outline: 0; }
.cs-q-view, .cs-more-box { height: 84px; border-radius: 14px; transition: background 0.15s, box-shadow 0.15s, border-color 0.15s; }
.cs-q-view { background: #1c1c1c; }
.cs-q:hover .cs-q-view { background: #242424; }
/* picked: a white ring with a hair of space around the preview */
.cs-q.on .cs-q-view { box-shadow: 0 0 0 2px var(--nav), 0 0 0 4px #f5f5f5; }
.cs-q:focus-visible .cs-q-view, .cs-more:focus-visible .cs-more-box { box-shadow: 0 0 0 2px var(--nav), 0 0 0 4px rgba(255,255,255,0.45); }
.cs-q-name { padding: 0 2px; font-size: 12.5px; font-weight: 500; color: #8d8d8d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.cs-q:hover .cs-q-name, .cs-more:hover .cs-q-name { color: #d7d7d7; }
.cs-q.on .cs-q-name { color: #f5f5f5; }
.cs-more-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed rgba(255,255,255,0.18); color: #a9a9a9; font-size: 11.5px; }
.cs-more:hover .cs-more-box { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.03); color: #fff; }
.cs-more-box svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* =====================================================================
   Kling look (on top of the Cutly look): cool greys, quiet 12px labels,
   glass cards with a hairline edge, chunky soft sliders with the value
   in a small box, segmented controls as a faint track + a brighter fill.
   ===================================================================== */
:root {
  --stage: #090909;
  --nav: #101010;
  --mid: #010101;
  --glass: rgba(33, 33, 33,0.8);           /* cards, menus */
  --glass-edge: rgba(255,255,255,0.08);
  --soft: rgba(255,255,255,0.04);
  --soft-2: rgba(255,255,255,0.08);
  --soft-3: rgba(255,255,255,0.12);
  --text: #fbfbfb;
  --text-2: #bcbcbc;                     /* labels */
  --muted: #7e7e7e;
  --line: rgba(255,255,255,0.06);
}
body { color: var(--text); }
.topbar, .videos, .panel { background: var(--nav); }
.stage { background: var(--stage); }
.timeline-wrap { background: var(--mid); }

/* sliders: a thick soft track, grey fill, white thumb with a shadow */
input[type="range"] { height: 20px; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #919191 var(--p, 50%), rgba(255,255,255,0.08) var(--p, 50%)); }
input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -4px; background: #cfcfcf; box-shadow: 0 3px 6px rgba(0,0,0,0.45); }
input[type="range"]:hover::-webkit-slider-runnable-track { background: linear-gradient(90deg, #a7a7a7 var(--p, 50%), rgba(255,255,255,0.1) var(--p, 50%)); }

/* segmented choices */
.seg { background: var(--soft); border: 0; border-radius: 10px; padding: 3px; }
.seg button { height: 30px; border-radius: 8px; color: var(--text-2); font-weight: 400; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--soft-3); color: var(--text); font-weight: 500; }

/* cards and menus: glass with a hairline edge */
.panel .setup, .panel .peek, .panel .adv-group, .panel .ai-compose, .zcard, .srow.placed, .list-empty, .preset-sum {
  background: var(--glass); border: 0.8px solid var(--glass-edge); border-radius: 12px; }
.dd-menu, .sel-menu { background: rgba(33, 33, 33,0.96); backdrop-filter: blur(16px); border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.32), 0 0 0 0.8px var(--glass-edge); }
.tabs button { color: var(--muted); }
.tabs button.on { background: var(--soft-3); color: var(--text); }

/* style tiles in the cool greys */
.cs-q-view { background: var(--soft-2); border-radius: 12px; }
.cs-q:hover .cs-q-view { background: var(--soft-3); }
.cs-q-name { color: var(--muted); font-size: 12px; font-weight: 400; }
.cs-q:hover .cs-q-name, .cs-more:hover .cs-q-name { color: var(--text-2); }
.cs-q.on .cs-q-name { color: var(--text); font-weight: 500; }
.cs-more-box { border-radius: 12px; border-color: rgba(255,255,255,0.16); color: var(--text-2); }

/* ---- Captions tab: 20px edges, quiet labels, values in small boxes */
#tab-captions { padding: 20px 20px 32px; }
#tab-captions .cap-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; margin: 0 0 24px; padding: 0 14px 0 16px;
  background: var(--glass); border: 0.8px solid var(--glass-edge); border-radius: 12px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text); }
#tab-captions .cap-label, #tab-captions .field-top span { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--text-2); text-transform: none; }
#tab-captions .cap-label { margin: 0 0 10px; }
#tab-captions .field { margin-bottom: 20px; }
#tab-captions .field-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#tab-captions .field-top b { min-width: 52px; height: 26px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 8px; background: rgba(0,0,0,0.2);
  border: 0.8px solid rgba(255,255,255,0.12); font-size: 12px; font-weight: 400; color: var(--text); font-variant-numeric: tabular-nums; }
#tab-captions > .field .field-ends { display: none; }
#tab-captions .advanced { margin-top: 4px; border-top: 0.8px solid var(--line); }
#tab-captions .advanced summary { padding: 16px 0; font-size: 13px; font-weight: 500; color: var(--text-2); }
#tab-captions .advanced summary:hover { color: var(--text); }
#tab-captions .adv-group { padding: 4px 16px 6px; margin-bottom: 12px; }
#tab-captions .adv-title { margin: 12px 0 2px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); text-transform: none; }
#tab-captions .adv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0; padding: 0; }
#tab-captions .adv-row > span:first-child, #tab-captions .adv-row .grow-label { flex: 1; width: auto; font-size: 13px; font-weight: 400; color: var(--text); }
#tab-captions .adv-row + .adv-row, #tab-captions .adv-row + div > .adv-row:first-child { border-top: 0.8px solid var(--line); }
:is(#tab-captions, #hookDlg) .adv-row select, :is(#tab-captions, #hookDlg) .adv-row .dd-btn { height: 32px; border-radius: 8px; background: var(--soft); border: 0; color: var(--text); font-size: 12.5px; }
:is(#tab-captions, #hookDlg) .adv-row .dd-btn:hover { background: var(--soft-2); }
#tab-captions .adv-row input[type="color"] { width: 26px; height: 26px; padding: 0; border: 0.8px solid rgba(255,255,255,0.2); border-radius: 50%; overflow: hidden; cursor: pointer; background: none; }
#tab-captions .adv-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
#tab-captions .adv-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
#tab-captions .adv-group .field { margin: 10px 0 14px; }
#tab-captions .adv-group .field-top span { color: var(--text); font-size: 13px; }

/* ---- Cuts tab (Kling look): one glass card per topic, quiet labels, values in boxes */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Captions panel v2: big preview + style swatches on top, grouped rows below */
#tab-captions { padding: 18px 18px 32px; }
.cx-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 14px; }
.cx-head b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.cx-stage { position: relative; height: 150px; margin-bottom: 10px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #262626 0%, #141414 60%, #010101 100%); }
.cx-preview { position: absolute; inset: 0; }
.cx-name { position: absolute; left: 12px; bottom: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,0.45);
  font-size: 11.5px; font-weight: 500; color: #d4d4d4; pointer-events: none; }
/* the quick styles: one row of swatches, the dashed one opens them all */
.cs-quick.cx-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.cx-swatches .cs-q, .cx-swatches .cs-more { gap: 0; }
.cx-swatches .cs-q-view, .cx-swatches .cs-more-box { height: 52px; border-radius: 12px; }
.cx-swatches .cs-q-view { background: #1c1c1c; }
.cx-swatches .cs-q:hover .cs-q-view { background: #262626; }
.cx-swatches .cs-q-name, .cx-swatches .cs-more-box span { display: none; }
.cx-swatches .cs-more-box { border-color: #3a3a3a; color: #a3a3a3; }
.cx-swatches .cs-more:hover .cs-more-box { border-color: #6b6b6b; color: #fafafa; background: transparent; }
/* grouped rows: one rounded block, hairlines between rows */
.cx-group { margin-bottom: 10px; padding: 0 14px; border-radius: 14px; background: #181818; border: 0; }
.cx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 13px; color: var(--text); }
.cx-row + .cx-row { border-top: 0.5px solid #2a2a2a; }
.cx-step { display: inline-flex; align-items: center; gap: 4px; }
.cx-step button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: #262626; color: var(--text); font-size: 15px; line-height: 1; }
.cx-step button:hover { background: #333333; }
.cx-step b { min-width: 46px; text-align: center; font-size: 13px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.cx-seg.seg { margin: 0; padding: 2px; border-radius: 9px; background: #0e0e0e; }
.cx-seg.seg button { height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12px; }
.cx-seg.seg button.on { background: #2e2e2e; color: var(--text); }
#tab-captions details.cx-group { border-top: 0; margin-top: 0; }
#tab-captions details.cx-group summary { min-height: 48px; padding: 0; font-size: 13px; font-weight: 400; color: var(--text); }
#tab-captions details.cx-group summary svg { color: #7c7c7c; transition: transform 0.15s; }
#tab-captions details.cx-group[open] summary svg { transform: rotate(90deg); }
#tab-captions details.cx-group[open] { padding-bottom: 8px; }
#tab-captions details.cx-group .adv-group { background: #111111; border: 0; margin: 0 -6px 8px; }

/* ---- Inspector sections (Captions tab): icon heading, small grey labels, joined icon buttons, number fields */
.ix { margin: 0 -18px; padding: 18px 18px 20px; border-top: 1px solid #262626; }
.cx-swatches + .ix { margin-top: 4px; }
.ix-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #f5f5f5; }
.ix-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1.25px solid #8c8c8c; }
.ix-ico svg { width: 14px; height: 14px; fill: none; stroke: #e5e5e5; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ix-ico svg .dot { fill: #e5e5e5; stroke: none; }
.ix-label { margin: 0 0 8px; font-size: 12.5px; color: #8c8c8c; }
.ix-btns { display: inline-flex; gap: 2px; margin-bottom: 16px; }
.ix-btns button { display: grid; place-items: center; width: 56px; height: 40px; padding: 0; border: 0; border-radius: 0; background: #262626; color: #d4d4d4; transition: background 0.12s, color 0.12s; }
.ix-btns button:first-child { border-radius: 8px 0 0 8px; }
.ix-btns button:last-child { border-radius: 0 8px 8px 0; }
.ix-btns button:hover { background: #2f2f2f; color: #fff; }
.ix-btns button.on { background: #3d3d3d; color: #fff; }
.ix-btns svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.ix-btns svg rect { fill: currentColor; stroke: none; }
.ix-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ix-pair .ix-label { margin-top: 2px; }
.ix-field { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 10px; background: #262626; border: 1px solid transparent; cursor: text; transition: border-color 0.12s, background 0.12s; }
.ix-field:hover { background: #2b2b2b; }
.ix-field:focus-within { border-color: #6b6b6b; background: #2b2b2b; }
.ix-pre { flex: none; display: grid; place-items: center; min-width: 14px; font-size: 13px; color: #8c8c8c; }
.ix-pre svg { width: 16px; height: 16px; fill: none; stroke: #8c8c8c; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ix-field input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #f5f5f5;
  font: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ix-field input::-webkit-outer-spin-button, .ix-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ix-unit { flex: none; font-size: 13px; color: #8c8c8c; }
/* More settings: the same section line, then the old groups */
#tab-captions details.cx-group { margin: 0 -18px; padding: 0 18px; border-radius: 0; background: transparent; border-top: 1px solid #262626; }
#tab-captions details.cx-group summary { min-height: 56px; font-size: 14px; font-weight: 600; color: #f5f5f5; }
#tab-captions details.cx-group .adv-group { margin: 0 0 10px; background: #181818; }

/* ---- Captions panel v3: one system. Corners 8 (controls) / 12 (cards). Heights 32 / 36.
   Spacing on a 4px grid. Every surface has a 1px hairline + a faint top highlight. Neutral greys only. */
#tab-captions {
  --x-panel: #121212; --x-field: #1c1c1c; --x-field-hi: #232323; --x-on: #2a2a2a;
  --x-edge: rgba(255,255,255,0.07); --x-edge-hi: rgba(255,255,255,0.14); --x-lift: inset 0 1px 0 rgba(255,255,255,0.04);
  --x-text: #ededed; --x-text-2: #a1a1a1; --x-text-3: #6e6e6e;
  padding: 16px 16px 28px; font-size: 13px; }
#tab-captions .cx-head { margin: 0 0 12px; }
#tab-captions .cx-head b { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--x-text); }
#tab-captions .cx-head .knob { width: 30px; height: 18px; }
#tab-captions .cx-head .knob::after { width: 12px; height: 12px; top: 2px; left: 2px; }
#tab-captions .cx-head input:checked + .knob::after { transform: translateX(12px); }

/* preview */
#tab-captions .cx-stage { height: 124px; margin: 0 0 8px; border-radius: 12px; background: #0b0b0b; border: 1px solid var(--x-edge); box-shadow: var(--x-lift); }
#tab-captions .cx-name { top: 8px; left: 8px; bottom: auto; height: 20px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--x-edge); font-size: 11px; font-weight: 500; color: var(--x-text-2); }

/* style swatches */
#tab-captions .cs-quick.cx-swatches { gap: 6px; margin: 0 0 16px; }
#tab-captions .cx-swatches .cs-q-view, #tab-captions .cx-swatches .cs-more-box { height: 44px; border-radius: 8px; }
#tab-captions .cx-swatches .cs-q-view { background: var(--x-field); border: 1px solid var(--x-edge); box-shadow: var(--x-lift); transition: background 0.12s, border-color 0.12s; }
#tab-captions .cx-swatches .cs-q:hover .cs-q-view { background: var(--x-field-hi); border-color: var(--x-edge-hi); }
#tab-captions .cx-swatches .cs-q.on .cs-q-view { box-shadow: var(--x-lift), inset 0 0 0 1px var(--x-text); border-color: var(--x-text); background: var(--x-on); }
#tab-captions .cx-swatches .cs-q:focus-visible .cs-q-view, #tab-captions .cx-swatches .cs-more:focus-visible .cs-more-box { border-color: var(--x-text-2); box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
#tab-captions .cx-swatches .cs-more-box { border: 1px dashed rgba(255,255,255,0.18); color: var(--x-text-2); }
#tab-captions .cx-swatches .cs-more-box svg { width: 16px; height: 16px; }
#tab-captions .cx-swatches .cs-more:hover .cs-more-box { border-color: rgba(255,255,255,0.4); color: var(--x-text); background: rgba(255,255,255,0.02); }

/* sections */
#tab-captions .ix { margin: 0 -16px; padding: 16px; border-top: 1px solid var(--x-edge); }
:is(#tab-captions, #hookDlg) .ix-head { gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--x-text); }
:is(#tab-captions, #hookDlg) .ix-ico { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--x-edge-hi); background: var(--x-field); }
:is(#tab-captions, #hookDlg) .ix-ico svg { width: 12px; height: 12px; stroke: var(--x-text-2); }
:is(#tab-captions, #hookDlg) .ix-ico svg .dot { fill: var(--x-text-2); }
:is(#tab-captions, #hookDlg) .ix-label { margin: 0 0 6px; font-size: 12px; color: var(--x-text-3); }
/* one joined control, hairline between the buttons */
:is(#tab-captions, #hookDlg) .ix-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; width: calc(50% - 4px); margin: 0 0 12px; padding: 0; overflow: hidden;
  border-radius: 8px; background: var(--x-edge); border: 1px solid var(--x-edge); box-shadow: var(--x-lift); }
:is(#tab-captions, #hookDlg) .ix-btns button { width: auto; height: 30px; border-radius: 0; background: var(--x-field); color: var(--x-text-2); }
:is(#tab-captions, #hookDlg) .ix-btns button:hover { background: var(--x-field-hi); color: var(--x-text); }
:is(#tab-captions, #hookDlg) .ix-btns button.on { background: var(--x-on); color: var(--x-text); }
:is(#tab-captions, #hookDlg) .ix-btns svg { width: 15px; height: 15px; }
:is(#tab-captions, #hookDlg) .ix-pair { gap: 8px; }
:is(#tab-captions, #hookDlg) .ix-pair .ix-label { margin-top: 0; }
:is(#tab-captions, #hookDlg) .ix-field { height: 36px; gap: 8px; padding: 0 10px; border-radius: 8px; background: var(--x-field); border: 1px solid var(--x-edge); box-shadow: var(--x-lift); }
:is(#tab-captions, #hookDlg) .ix-field:hover { background: var(--x-field-hi); border-color: var(--x-edge-hi); }
:is(#tab-captions, #hookDlg) .ix-field:focus-within { background: var(--x-field-hi); border-color: rgba(255,255,255,0.32); box-shadow: 0 0 0 3px rgba(255,255,255,0.06); }
:is(#tab-captions, #hookDlg) .ix-pre { min-width: 12px; font-size: 12px; font-weight: 500; color: var(--x-text-3); }
:is(#tab-captions, #hookDlg) .ix-pre svg { width: 14px; height: 14px; stroke: var(--x-text-3); }
:is(#tab-captions, #hookDlg) .ix-field input { font-size: 13px; font-weight: 500; color: var(--x-text); }
:is(#tab-captions, #hookDlg) .ix-unit { font-size: 12px; color: var(--x-text-3); }

/* more settings */
#tab-captions details.cx-group { margin: 0 -16px; padding: 0 16px; border-top: 1px solid var(--x-edge); }
#tab-captions details.cx-group summary { min-height: 48px; font-size: 13px; font-weight: 600; color: var(--x-text); }
#tab-captions details.cx-group summary svg { width: 14px; height: 14px; color: var(--x-text-3); }
#tab-captions details.cx-group .adv-group { margin: 0 0 8px; padding: 4px 12px 6px; border-radius: 12px; background: var(--x-field); border: 1px solid var(--x-edge); box-shadow: var(--x-lift); }
#tab-captions details.cx-group .adv-title { margin: 10px 0 2px; font-size: 12px; color: var(--x-text-3); }
#tab-captions details.cx-group .adv-row { min-height: 40px; }
#tab-captions details.cx-group .adv-row + .adv-row, #tab-captions details.cx-group .adv-row + div > .adv-row:first-child { border-top: 1px solid var(--x-edge); }
#tab-captions details.cx-group .adv-row > span:first-child, #tab-captions details.cx-group .adv-row .grow-label { font-size: 13px; color: var(--x-text); }
:is(#tab-captions, #hookDlg) details.cx-group .adv-row select, :is(#tab-captions, #hookDlg) details.cx-group .adv-row .dd-btn { height: 30px; border-radius: 8px; background: var(--x-on); border: 1px solid var(--x-edge); font-size: 12.5px; }
/* icons: bigger, brighter; alignment bars solid, the guide line bold */
:is(#tab-captions, #hookDlg) .ix-btns button { height: 34px; color: #b5b5b5; }
:is(#tab-captions, #hookDlg) .ix-btns button:hover, :is(#tab-captions, #hookDlg) .ix-btns button.on { color: #ffffff; }
:is(#tab-captions, #hookDlg) .ix-btns svg { width: 20px; height: 20px; stroke-width: 1.8; }
:is(#tab-captions, #hookDlg) .ix-btns svg rect { fill: currentColor; opacity: 0.9; }
:is(#tab-captions, #hookDlg) .ix-ico { width: 24px; height: 24px; border-radius: 7px; border-color: rgba(255,255,255,0.22); background: #222222; }
:is(#tab-captions, #hookDlg) .ix-ico svg { width: 16px; height: 16px; stroke: #f0f0f0; stroke-width: 1.6; }
:is(#tab-captions, #hookDlg) .ix-ico svg .dot { fill: #f0f0f0; }
:is(#tab-captions, #hookDlg) .ix-pre { min-width: 16px; font-size: 13px; font-weight: 600; color: #a1a1a1; }
:is(#tab-captions, #hookDlg) .ix-pre svg { width: 17px; height: 17px; stroke: #a1a1a1; stroke-width: 1.6; }
:is(#tab-captions, #hookDlg) .ix-unit { color: #8a8a8a; }
/* the switch sits right after the "Captions" title, on the left */
#tab-captions .cx-head { justify-content: flex-start; gap: 10px; }

/* ---- Captions panel v4: filled cards, bigger padding and type (the user: "stuff that has background, bigger paddings") */
#tab-captions { padding: 16px 16px 32px; font-size: 14px; }
#tab-captions .cx-head { margin: 4px 2px 14px; }
#tab-captions .cx-head b { font-size: 17px; }
#tab-captions .cx-stage { height: 150px; margin-bottom: 10px; border-radius: 16px; }
#tab-captions .cx-name { top: 10px; left: 10px; height: 24px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
#tab-captions .cs-quick.cx-swatches { gap: 8px; margin-bottom: 12px; }
#tab-captions .cx-swatches .cs-q-view, #tab-captions .cx-swatches .cs-more-box { height: 56px; border-radius: 12px; }
#tab-captions .cx-swatches .cs-q-view { background: #1c1c1c; }
/* each section is a filled card */
#tab-captions .ix { margin: 0 0 10px; padding: 18px 16px 18px; border: 0; border-radius: 16px; background: #1a1a1a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
:is(#tab-captions, #hookDlg) .ix-head { gap: 10px; margin: 0 0 16px; font-size: 15px; font-weight: 600; }
:is(#tab-captions, #hookDlg) .ix-ico { width: 30px; height: 30px; border-radius: 9px; border: 0; background: #2a2a2a; }
:is(#tab-captions, #hookDlg) .ix-ico svg { width: 17px; height: 17px; stroke: #ffffff; }
:is(#tab-captions, #hookDlg) .ix-ico svg .dot { fill: #ffffff; }
:is(#tab-captions, #hookDlg) .ix-label { margin: 0 0 8px; font-size: 13px; color: #9a9a9a; }
/* alignment: three big buttons, a little frame showing where the caption sits + the word */
:is(#tab-captions, #hookDlg) .ix-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 0 0 18px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
:is(#tab-captions, #hookDlg) .ix-btns button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 74px; border-radius: 12px;
  background: #262626; color: #cfcfcf; font-size: 13px; font-weight: 500; }
:is(#tab-captions, #hookDlg) .ix-btns button:first-child, :is(#tab-captions, #hookDlg) .ix-btns button:last-child { border-radius: 12px; }
:is(#tab-captions, #hookDlg) .ix-btns button:hover { background: #303030; color: #ffffff; }
:is(#tab-captions, #hookDlg) .ix-btns button.on { background: #cfcfcf; color: #111111; }
:is(#tab-captions, #hookDlg) .ix-btns svg { width: 26px; height: 26px; }
:is(#tab-captions, #hookDlg) .ix-btns svg .frame { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 0.55; }
:is(#tab-captions, #hookDlg) .ix-btns svg .bar { fill: currentColor; stroke: none; opacity: 1; }
:is(#tab-captions, #hookDlg) .ix-btns button.on svg .frame { opacity: 0.45; }
/* fields: tall, filled, bold numbers */
:is(#tab-captions, #hookDlg) .ix-pair { gap: 10px; }
:is(#tab-captions, #hookDlg) .ix-field { height: 48px; gap: 10px; padding: 0 14px; border-radius: 12px; background: #262626; border: 1px solid transparent; box-shadow: none; }
:is(#tab-captions, #hookDlg) .ix-field:hover { background: #2c2c2c; border-color: transparent; }
:is(#tab-captions, #hookDlg) .ix-field:focus-within { background: #2c2c2c; border-color: rgba(255,255,255,0.35); box-shadow: none; }
:is(#tab-captions, #hookDlg) .ix-pre { min-width: 16px; font-size: 14px; font-weight: 600; color: #8f8f8f; }
:is(#tab-captions, #hookDlg) .ix-pre svg { width: 18px; height: 18px; stroke: #8f8f8f; }
:is(#tab-captions, #hookDlg) .ix-field input { font-size: 15px; font-weight: 600; }
:is(#tab-captions, #hookDlg) .ix-unit { font-size: 13px; color: #8f8f8f; }
/* More settings: the same filled card, a big row */
#tab-captions details.cx-group { margin: 0; padding: 0 16px; border: 0; border-radius: 16px; background: #1a1a1a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
#tab-captions details.cx-group summary { min-height: 60px; font-size: 15px; font-weight: 600; }
#tab-captions details.cx-group summary svg { width: 16px; height: 16px; color: #9a9a9a; }
#tab-captions details.cx-group[open] { padding-bottom: 12px; }
#tab-captions details.cx-group .adv-group { padding: 6px 14px 8px; border: 0; border-radius: 12px; background: #222222; box-shadow: none; }
#tab-captions details.cx-group .adv-title { font-size: 13px; color: #8f8f8f; }
#tab-captions details.cx-group .adv-row { min-height: 48px; }
#tab-captions details.cx-group .adv-row > span:first-child, #tab-captions details.cx-group .adv-row .grow-label { font-size: 14px; }
:is(#tab-captions, #hookDlg) details.cx-group .adv-row select, :is(#tab-captions, #hookDlg) details.cx-group .adv-row .dd-btn { height: 36px; border-radius: 10px; background: #2e2e2e; border: 0; font-size: 13px; }

/* ---- guides while dragging a caption: hatched unsafe edges, their edge lines, a centre line */
.safe-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.frame.moving-caption .safe-grid { opacity: 1; }
.frame.moving-caption .caption { cursor: grabbing; }
.safe-grid i { position: absolute; top: 0; bottom: 0; }
.safe-grid .side { width: 8%; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.32) 0 2px, transparent 2px 9px), rgba(0,0,0,0.12); }
.safe-grid .l { left: 0; border-right: 1.5px solid rgba(255,255,255,0.9); }
.safe-grid .r { right: 0; border-left: 1.5px solid rgba(255,255,255,0.9); }
.safe-grid .mid { left: 50%; width: 1.5px; transform: translateX(-50%); background: rgba(255,255,255,0.9); }
/* the video has square corners (the user) */
.frame, .frame canvas, .frame video { border-radius: 0 !important; }

/* ---- One neutral 'accent' (the user: no colour for now): white and grey only */
:root { --acc: #cfcfcf; --acc-2: #cfcfcf; --acc-rgb: 207, 207, 207; --acc-ink: #0a0a0a; }
:root { --acc-grad: linear-gradient(135deg, var(--acc) 0%, var(--acc-2) 100%); }

/* nav panels: a dark gradient instead of one flat grey */
.panel { background: linear-gradient(180deg, #151515 0%, #010101 100%); }
.videos { background: linear-gradient(180deg, #131313 0%, #0c0c0c 100%); }
.topbar { background: #0f0f0f; }
.tabs button.on { background: rgba(255,255,255,0.09); color: #fff; box-shadow: inset 0 -2px 0 var(--acc); border-radius: 10px 10px 4px 4px; }
.topbar button.primary, .ai-run.primary:not(:disabled), #emptyPick.primary { background: var(--acc-grad); border-color: transparent; color: var(--acc-ink); }
.topbar button.primary:hover:not(:disabled), .ai-run.primary:hover:not(:disabled) { background: var(--acc-grad); filter: brightness(1.08); }
.switch input:checked + .knob { background: var(--acc-grad); border-color: transparent; }
.switch input:checked + .knob::after { background: #cfcfcf; }
input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--acc) 0%, var(--acc-2) var(--p, 50%), rgba(255,255,255,0.08) var(--p, 50%)); }

/* ---- Captions panel: the accent where it means "this one" */
#tab-captions .cx-stage { background: radial-gradient(70% 90% at 50% 130%, rgba(var(--acc-rgb), 0.34) 0%, rgba(var(--acc-rgb), 0.08) 45%, transparent 70%), #070707;
  border: 1px solid rgba(255,255,255,0.06); }
#tab-captions .cx-name { display: inline-flex; gap: 6px; background: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.1); color: #e5e5e5; backdrop-filter: blur(8px); }
#tab-captions .cx-name::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc-grad); box-shadow: 0 0 8px rgba(var(--acc-rgb), 0.8); }
/* picked swatch: accent edge, a soft glow, tinted fill */
#tab-captions .cx-swatches .cs-q-view { background: linear-gradient(180deg, #1d1d1d, #161616); border: 1px solid rgba(255,255,255,0.06); transition: background 0.15s, border-color 0.15s, box-shadow 0.2s, transform 0.15s; }
#tab-captions .cx-swatches .cs-q:hover .cs-q-view { border-color: rgba(255,255,255,0.16); transform: translateY(-1px); }
#tab-captions .cx-swatches .cs-q.on .cs-q-view { border-color: var(--acc); background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.22), rgba(var(--acc-rgb), 0.06)), #141414;
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.18), 0 8px 24px -6px rgba(var(--acc-rgb), 0.45); }
#tab-captions .cx-swatches .cs-more:hover .cs-more-box { border-color: rgba(var(--acc-rgb), 0.7); color: #fff; }
/* section cards: a gentle top-lit gradient, hairline edge; icons in the accent */
#tab-captions .ix, #tab-captions details.cx-group { background: linear-gradient(180deg, #1b1b1b 0%, #141414 100%); border: 1px solid rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
:is(#tab-captions, #hookDlg) .ix-ico { background: rgba(var(--acc-rgb), 0.14); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), 0.3); }
:is(#tab-captions, #hookDlg) .ix-ico svg { stroke: var(--acc); }
:is(#tab-captions, #hookDlg) .ix-ico svg .dot { fill: var(--acc); }
/* alignment: the picked one in the accent gradient */
:is(#tab-captions, #hookDlg) .ix-btns button { background: #232323; border: 1px solid rgba(255,255,255,0.05); transition: background 0.15s, color 0.15s, box-shadow 0.2s; }
:is(#tab-captions, #hookDlg) .ix-btns button:hover { background: #2b2b2b; }
:is(#tab-captions, #hookDlg) .ix-btns button.on { background: var(--acc-grad); color: var(--acc-ink); border-color: transparent; box-shadow: 0 8px 22px -8px rgba(var(--acc-rgb), 0.7); }
:is(#tab-captions, #hookDlg) .ix-btns button.on svg .frame { opacity: 0.7; }
/* fields: accent focus */
:is(#tab-captions, #hookDlg) .ix-field { background: #232323; border: 1px solid rgba(255,255,255,0.05); }
:is(#tab-captions, #hookDlg) .ix-field:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.18); background: #262626; }
#tab-captions details.cx-group[open] summary svg { color: var(--acc); }
/* the full picker: the picked card and pill in the accent too */
.cs-card.on { outline-color: var(--acc); background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.16), rgba(var(--acc-rgb), 0.04)); }
.cs-pills button.on { background: var(--acc-grad); color: var(--acc-ink); }
/* drag guides, matched 1:1 to the reference: 9% edges, light 3px stripes every 11px, no shading, crisp 2px white lines */
.safe-grid .side { width: 9%; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.42) 0 3px, transparent 3px 11px); }
.safe-grid .l { border-right: 2px solid rgba(255,255,255,0.95); }
.safe-grid .r { border-left: 2px solid rgba(255,255,255,0.95); }
.safe-grid .mid { width: 2px; background: rgba(255,255,255,0.95); }

/* ---- Style picker, simplified: header with search, one scrolling row of categories, preview + name cards */
.cs { background: linear-gradient(180deg, #161616 0%, #0e0e0e 100%); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.07); }
.cs-head { gap: 10px; padding: 14px 14px 12px; border-bottom: 0; }
.cs-head b { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.cs-back { width: 36px; height: 36px; border-radius: 10px; background: #222222; flex: none; }
.cs-head .cs-search { flex: 1; min-width: 0; height: 36px; margin: 0 0 0 auto; max-width: 180px; padding: 0 10px; gap: 8px; border-radius: 10px; background: #1f1f1f; border: 1px solid rgba(255,255,255,0.06); }
.cs-head .cs-search:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.18); background: #222222; }
.cs-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 2px 14px 12px;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.cs-pills::-webkit-scrollbar { display: none; }
.cs-pills button { height: 32px; padding: 0 14px; border: 0; border-radius: 10px; background: #1f1f1f; color: #b5b5b5; font-size: 13px; font-weight: 500; }
.cs-pills button:hover { background: #292929; color: #fff; }
.cs-count { display: none; }
.cs-list { gap: 14px 10px; padding: 4px 14px 18px; }
.cs-card { background: transparent; border: 0; border-radius: 0; outline: 0; overflow: visible; }
.cs-card:hover, .cs-card:focus-visible { background: transparent; }
.cs-card.on { background: transparent; }
.cs-card-view { height: 96px; margin: 0; border-radius: 14px; background: linear-gradient(180deg, #1d1d1d, #151515); border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.15s; }
.cs-card:hover .cs-card-view { border-color: rgba(255,255,255,0.16); transform: translateY(-1px); }
.cs-card:focus-visible .cs-card-view { border-color: rgba(255,255,255,0.4); }
.cs-card.on .cs-card-view { border-color: var(--acc); background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.22), rgba(var(--acc-rgb), 0.06)), #141414;
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.18), 0 10px 26px -8px rgba(var(--acc-rgb), 0.5); }
.cs-card-foot { height: auto; padding: 8px 2px 0; }
.cs-card-name { font-size: 13px; font-weight: 500; color: #a3a3a3; }
.cs-card:hover .cs-card-name { color: #e5e5e5; }
.cs-card.on .cs-card-name { color: #ffffff; font-weight: 600; }
.cs-swatches, .cs-edit { display: none; }
.cs-empty { padding: 32px 0; }

/* ---- No colour, no glow, no shadows (the user). Picked = white edge or solid white. */
#tab-captions *, #tab-captions, .cs, .cs *, .tabs button, .topbar button.primary, .ai-run.primary { box-shadow: none !important; }
.switch input:checked + .knob { background: #cfcfcf; }
.switch input:checked + .knob::after { background: #0a0a0a; }
input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #d4d4d4 var(--p, 50%), rgba(255,255,255,0.08) var(--p, 50%)); }
.tabs button.on { border-radius: 10px; }
.topbar button.primary, .ai-run.primary:not(:disabled), #emptyPick.primary { background: #cfcfcf; color: #0a0a0a; }
.topbar button.primary:hover:not(:disabled), .ai-run.primary:hover:not(:disabled) { background: #dcdcdc; filter: none; }
#tab-captions .cx-stage { background: #0b0b0b; }
#tab-captions .cx-name { backdrop-filter: none; background: #1c1c1c; }
#tab-captions .cx-name::before { display: none; }
:is(#tab-captions, #hookDlg) .ix-ico { background: #262626; }
:is(#tab-captions, #hookDlg) .ix-ico svg { stroke: #ffffff; }
:is(#tab-captions, #hookDlg) .ix-ico svg .dot { fill: #ffffff; }
:is(#tab-captions, #hookDlg) .ix-btns button.on { background: #cfcfcf; color: #0a0a0a; }
:is(#tab-captions, #hookDlg) .ix-field:focus-within { border-color: rgba(255,255,255,0.45); }
#tab-captions .cx-swatches .cs-q.on .cs-q-view, .cs-card.on .cs-card-view { background: #262626; border: 1.5px solid #f2f2f2; }
.cs-head .cs-search:focus-within { border-color: rgba(255,255,255,0.35); }
.cs-pills button.on { background: #cfcfcf; color: #0a0a0a; }
.cs-card.on { outline: 0; }

/* nav panels: one flat colour, 95% black (the user), no gradient */
:root { --nav: #010101; }
.topbar, .videos, .panel { background: #010101; }

/* ---- picker ways out: a labelled Back, and Cancel / Done at the bottom */
.cs-back { width: auto; padding: 0 12px 0 8px; gap: 4px; display: inline-flex; align-items: center; color: #f2f2f2; font-size: 13px; font-weight: 500; }
.cs-back svg { width: 16px; height: 16px; }
.cs-back:hover { background: #2a2a2a; }
.cs-head .cs-search { max-width: 150px; }
.cs-foot { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid rgba(255,255,255,0.07); background: #010101; border-radius: 0 0 18px 18px; }
.cs-foot button { height: 44px; border-radius: 12px; border: 0; font-size: 14px; font-weight: 600; }
.cs-foot #csCancel { background: #222222; color: #e5e5e5; }
.cs-foot #csCancel:hover { background: #2a2a2a; }
.cs-foot #csDone { background: #cfcfcf; color: #0a0a0a; }
.cs-foot #csDone:hover { background: #dcdcdc; }
/* nav panels darker still (the user): ~97% black */
:root { --nav: #070707; }
.topbar, .videos, .panel, .cs-foot { background: #070707; }

/* ---- picker header: back + title alone; search on its own row; 4 filters sharing the width */
.cs-head { padding: 14px 14px 10px; }
.cs > .cs-search { flex: none; height: 42px; margin: 0 14px 10px; padding: 0 12px; gap: 10px; border-radius: 12px; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.06); }
.cs > .cs-search:focus-within { border-color: rgba(255,255,255,0.35); background: #1e1e1e; }
.cs > .cs-search input { font-size: 14px; }
.cs-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 14px 14px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.cs-pills button { width: 100%; padding: 0 6px; }

/* ---- a clear line between the top bar and everything under it */
.topbar { border-bottom: 1px solid rgba(255,255,255,0.09) !important; }

/* ---- panel tabs: one segmented control, equal widths, bold, solid white when picked */
.panel .tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin: 14px 14px 4px; padding: 4px;
  border: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: #121212; overflow: hidden; }
.panel .tabs button { height: 34px; padding: 0 4px; border: 0; border-radius: 10px; background: transparent; box-shadow: none;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: #8a8a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s, color 0.15s; }
.panel .tabs button:hover { background: #1e1e1e; color: #f2f2f2; }
.panel .tabs button.on, .panel .tabs button.on:hover { background: #dcdcdc; color: #0a0a0a; border-radius: 10px; }
.panel .tabs button:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 1px; }

/* tabs size to their words, so none gets cut off */
.panel .tabs { display: flex; }
.panel .tabs button { flex: 1 0 auto; padding: 0 10px; overflow: visible; text-overflow: clip; }

/* cards: one flat colour, a bit darker, 10% see-through (the user: no gradients) */
#tab-captions .ix, #tab-captions details.cx-group, #tab-captions .cx-swatches .cs-q-view, .cs-card-view, #tab-auto .set-card {
  background: rgba(20,20,20,0.9) !important; }
#tab-captions .cx-swatches .cs-q.on .cs-q-view, .cs-card.on .cs-card-view { background: rgba(38,38,38,0.9) !important; }
#tab-captions .cx-swatches .cs-q:hover .cs-q-view, .cs-card:hover .cs-card-view { background: rgba(30,30,30,0.9) !important; }
.cs { background: #0b0b0b; }
/* tab bar: a lot darker (the user) */
.panel .tabs { background: #020202; border-color: rgba(255,255,255,0.08); }
.panel .tabs button:hover { background: #121212; }
/* the right panel: pure black, all of it (the user) */
.panel, .cs, .cs-foot { background: #000000 !important; }
/* tab bar: no background, just the border, square corners (the user) */
.panel .tabs { background: transparent !important; border: 1px solid rgba(255,255,255,0.12); border-radius: 0; }
.panel .tabs button, .panel .tabs button.on, .panel .tabs button.on:hover { border-radius: 0; }
/* tab bar: a dark fill, no border, rounded like a modern segmented bar (the user) */
.panel .tabs { background: #0f0f0f !important; border: 0; border-radius: 12px; padding: 4px; }
.panel .tabs button, .panel .tabs button.on, .panel .tabs button.on:hover { border-radius: 9px; }
.panel .tabs button:hover { background: #1a1a1a; }

/* ---- no borders anywhere in the right panel or the style picker (the user). Picked = a lighter fill. */
.panel, .panel *, .cs, .cs * { border: 0 !important; outline-color: transparent; }
#tab-captions .cx-swatches .cs-more-box { background: rgba(20,20,20,0.9); }
#tab-captions .cx-swatches .cs-more:hover .cs-more-box { background: rgba(30,30,30,0.9); }
#tab-captions .cx-swatches .cs-q.on .cs-q-view, .cs-card.on .cs-card-view { background: #3a3a3a !important; }
:is(#tab-captions, #hookDlg) .ix-field:focus-within { background: #2e2e2e; }
.cs > .cs-search:focus-within { background: #242424; }

/* ---- opacity layers (the user: play with opacities). White at a few strengths over the black:
   cards 4%, controls in them 7%, hover 10%, picked 16%; text 100 / 50 / 40%. */
.panel { --o-card: rgba(255,255,255,0.04); --o-ctl: rgba(255,255,255,0.07); --o-hover: rgba(255,255,255,0.10); --o-on: rgba(255,255,255,0.16);
  --t-2: rgba(255,255,255,0.5); --t-3: rgba(255,255,255,0.4); }
.panel .tabs { background: var(--o-card) !important; }
.panel .tabs button { color: var(--t-2); }
.panel .tabs button:hover { background: var(--o-ctl); color: #fff; }
#tab-captions .cx-stage { background: var(--o-card); }
#tab-captions .cx-name { background: var(--o-ctl); color: rgba(255,255,255,0.85); }
#tab-captions .ix, #tab-captions details.cx-group, #tab-auto .set-card { background: var(--o-card) !important; }
#tab-captions .cx-swatches .cs-q-view, #tab-captions .cx-swatches .cs-more-box { background: var(--o-card) !important; }
#tab-captions .cx-swatches .cs-q:hover .cs-q-view, #tab-captions .cx-swatches .cs-more:hover .cs-more-box { background: var(--o-hover) !important; }
#tab-captions .cx-swatches .cs-q.on .cs-q-view { background: var(--o-on) !important; }
:is(#tab-captions, #hookDlg) .ix-ico { background: var(--o-ctl); }
:is(#tab-captions, #hookDlg) .ix-btns button { background: var(--o-ctl); color: rgba(255,255,255,0.75); }
:is(#tab-captions, #hookDlg) .ix-btns button:hover { background: var(--o-hover); color: #fff; }
:is(#tab-captions, #hookDlg) .ix-btns button.on { background: #cfcfcf; color: #0a0a0a; }
:is(#tab-captions, #hookDlg) .ix-field { background: var(--o-ctl); }
:is(#tab-captions, #hookDlg) .ix-field:hover { background: var(--o-hover); }
:is(#tab-captions, #hookDlg) .ix-field:focus-within { background: var(--o-on); }
:is(#tab-captions, #hookDlg) .ix-label, :is(#tab-captions, #hookDlg) details.cx-group .adv-title { color: var(--t-2); }
:is(#tab-captions, #hookDlg) .ix-pre, :is(#tab-captions, #hookDlg) .ix-unit { color: var(--t-3); }
:is(#tab-captions, #hookDlg) .ix-pre svg { stroke: var(--t-3); }
#tab-captions details.cx-group .adv-group { background: var(--o-card); }
:is(#tab-captions, #hookDlg) details.cx-group .adv-row select, :is(#tab-captions, #hookDlg) details.cx-group .adv-row .dd-btn { background: var(--o-ctl); }
/* the picker in the same layers */
.cs { --o-card: rgba(255,255,255,0.04); --o-ctl: rgba(255,255,255,0.07); --o-hover: rgba(255,255,255,0.10); --o-on: rgba(255,255,255,0.16); }
.cs-back, .cs > .cs-search, .cs-pills button, .cs-foot #csCancel { background: var(--o-ctl); }
.cs-back:hover, .cs-pills button:hover, .cs-foot #csCancel:hover { background: var(--o-hover); }
.cs > .cs-search:focus-within { background: var(--o-hover); }
.cs-card-view { background: var(--o-card) !important; }
.cs-card:hover .cs-card-view { background: var(--o-hover) !important; }
.cs-card.on .cs-card-view { background: var(--o-on) !important; }
.cs-card-name { color: rgba(255,255,255,0.5); }

/* ---- while dragging a caption (like Captions.ai): ghost at the start, outline on the moving one, a Y badge */
.cap-ghost { opacity: 0.35; pointer-events: none; }
.frame.moving-caption #caption .inner { outline: 1.5px solid rgba(255,255,255,0.95); outline-offset: 4px; }
.cap-badge { position: absolute; left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.75);
  color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; z-index: 3; }

/* ---- cards: a touch brighter at the top than the bottom (the user: ~5% difference) */
#tab-captions .ix, #tab-captions details.cx-group, #tab-auto .set-card, #tab-captions .cx-stage {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%) !important; }
/* cards: a 2-point step top to bottom (the user: less difference) */
#tab-captions .ix, #tab-captions details.cx-group, #tab-auto .set-card, #tab-captions .cx-stage { background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.03) 100%) !important; }
/* drag guides, closer to Captions.ai: steeper (60 deg) thinner denser stripes, a faint wash, crisp full-white lines */
.safe-grid .side { width: 9%; background: repeating-linear-gradient(120deg, rgba(255,255,255,0.55) 0 1.6px, transparent 1.6px 8.5px), rgba(255,255,255,0.07); }
.safe-grid .l { border-right: 1.5px solid #ffffff; }
.safe-grid .r { border-left: 1.5px solid #ffffff; }
.safe-grid .mid { width: 1.5px; background: #cfcfcf; }
/* thicker angled lines (the user) */
.safe-grid .side { background: repeating-linear-gradient(120deg, rgba(255,255,255,0.5) 0 3px, transparent 3px 10px), rgba(255,255,255,0.07); }

/* cards back to one even opacity (the user: no top-to-bottom difference) */
#tab-captions .ix, #tab-captions details.cx-group, #tab-auto .set-card, #tab-captions .cx-stage { background: rgba(255,255,255,0.04) !important; }

/* caption drag in both directions; the centre line thickens while it's snapped to the middle */
.caption { cursor: move; }
.cap-badge { left: 50%; }
.safe-grid .mid { transition: width 0.1s; }
.frame.snapped-x .safe-grid .mid { width: 3px; }
:is(#tab-captions, #hookDlg) .ix-after { margin-top: 12px; }

/* ---- switches, new design: rounded-rect track, rounded-square thumb, centred by position (not pixel offsets) */
.switch .knob { position: relative; flex: none; width: 40px !important; height: 24px !important; padding: 0; border: 0 !important; border-radius: 8px !important; background: rgba(255,255,255,0.14) !important; transition: background 0.18s; box-sizing: border-box; }
.switch .knob::after { content: ""; position: absolute; top: 50% !important; left: 4px !important; width: 16px !important; height: 16px !important; border-radius: 5px !important; background: #8f8f8f !important; transform: translateY(-50%) !important; transition: left 0.18s cubic-bezier(0.3, 0.7, 0.4, 1), background 0.18s; }
.switch input:checked + .knob { background: #cfcfcf !important; }
.switch input:checked + .knob::after { left: calc(100% - 20px) !important; background: #0a0a0a !important; transform: translateY(-50%) !important; }
.switch:hover .knob { background: rgba(255,255,255,0.2) !important; }
.switch:hover input:checked + .knob { background: #dcdcdc !important; }
/* switch: smaller and lower (the user) */
.switch .knob { width: 32px !important; height: 18px !important; border-radius: 6px !important; }
.switch .knob::after { left: 3px !important; width: 12px !important; height: 12px !important; border-radius: 4px !important; }
.switch input:checked + .knob::after { left: calc(100% - 15px) !important; }

/* captions off: everything under the title + switch greys out and can't be used (the switch stays live) */
#tab-captions > :not(.cx-head) { transition: opacity 0.2s, filter 0.2s; }
#tab-captions.caps-off > :not(.cx-head) { opacity: 0.35; filter: grayscale(1); pointer-events: none; user-select: none; }
/* the "more" tile says what it does: icon + "View all" */
#tab-captions .cx-swatches .cs-more-box { flex-direction: row; gap: 6px; }
#tab-captions .cx-swatches .cs-more-box span { display: inline; font-size: 12.5px; font-weight: 600; color: inherit; }
#tab-captions .cx-swatches .cs-more-box svg { width: 15px; height: 15px; margin: 0; }

/* ---- Text section: font, uppercase and text colour as rows under Size / Width */
:is(#tab-captions, #hookDlg) .ix-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
:is(#tab-captions, #hookDlg) .ix-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 8px 0 14px;
  border-radius: 12px; background: var(--o-ctl); font-size: 14px; font-weight: 500; color: #f2f2f2; cursor: default; }
:is(#tab-captions, #hookDlg) .ix-row.switch { cursor: pointer; padding-right: 14px; }
:is(#tab-captions, #hookDlg) .ix-row.switch:hover { background: var(--o-hover); }
:is(#tab-captions, #hookDlg) .ix-row .grow-label { flex: 1; color: #f2f2f2; font-size: 14px; font-weight: 500; }
:is(#tab-captions, #hookDlg) .ix-row .dd-btn { height: 36px; padding: 0 12px; border-radius: 9px; background: var(--o-ctl); color: #f2f2f2; font-size: 13px; font-weight: 600; }
:is(#tab-captions, #hookDlg) .ix-row .dd-btn:hover { background: var(--o-hover); }
/* the colour: a filled swatch + its hex, so it shows even when the colour is black */
:is(#tab-captions, #hookDlg) .ix-color { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; border-radius: 9px; background: var(--o-ctl); cursor: pointer; }
:is(#tab-captions, #hookDlg) .ix-color:hover { background: var(--o-hover); }
:is(#tab-captions, #hookDlg) .ix-color input[type="color"] { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
:is(#tab-captions, #hookDlg) .ix-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
:is(#tab-captions, #hookDlg) .ix-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
:is(#tab-captions, #hookDlg) .ix-color b { font-size: 12.5px; font-weight: 600; color: #e5e5e5; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
:is(#tab-captions, #hookDlg) .ix-color input[type="color"] { padding: 2px; background: rgba(255,255,255,0.3); border-radius: 7px; }
:is(#tab-captions, #hookDlg) .ix-color input[type="color"]::-webkit-color-swatch { border-radius: 5px; }
:is(#tab-captions, #hookDlg) .ix-row .dd-btn { display: inline-flex; align-items: center; gap: 8px; }
/* drag guides: thicker edge lines and thicker angled stripes (the user) */
.safe-grid .l { border-right: 3px solid #ffffff; }
.safe-grid .r { border-left: 3px solid #ffffff; }
.safe-grid .mid { width: 3px; }
.frame.snapped-x .safe-grid .mid { width: 4px; }
.safe-grid .side { background: repeating-linear-gradient(120deg, rgba(255,255,255,0.5) 0 5px, transparent 5px 14px), rgba(255,255,255,0.07); }

/* ---- dropdowns in the right panel (Background: Box, Font, ...): a filled button, bold label, spaced arrow; a matching menu */
.panel .dd-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 104px; height: 38px !important; padding: 0 12px 0 14px !important; border: 0 !important; border-radius: 10px !important; background: rgba(255,255,255,0.08) !important; color: #f2f2f2 !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; transition: background 0.15s; }
.panel .dd-btn:hover { background: rgba(255,255,255,0.13) !important; }
.panel .dd.open .dd-btn { background: rgba(255,255,255,0.16) !important; }
.panel .dd-btn svg { width: 14px; height: 14px; stroke: #9a9a9a; flex: none; }
.panel .dd-menu { min-width: 180px; padding: 6px; border-radius: 12px; background: #161616 !important; box-shadow: none !important; }
.panel .dd-item { padding: 9px 10px; border-radius: 8px; }
.panel .dd-item:hover { background: rgba(255,255,255,0.07); }
.panel .dd-item b { font-size: 13px; font-weight: 500; color: #e5e5e5; }
.panel .dd-item.on b { color: #fff; font-weight: 600; }
/* timeline area: a touch lighter than black, same as its canvas */
.timeline-wrap, #timelineScroll { background: #0c0c0c !important; }
/* timeline a bit darker again (the user) */
.timeline-wrap, #timelineScroll { background: #010101 !important; }

/* ---- lengths above the timeline: Original -> Edited chips + how much was cut */
.lengths { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.len-chip { display: inline-flex; align-items: baseline; gap: 6px; height: 28px; padding: 0 10px; align-items: center; border-radius: 8px; background: rgba(255,255,255,0.06); }
.len-chip i { font-style: normal; font-size: 11.5px; font-weight: 500; color: #8a8a8a; }
.len-chip b { font-size: 13px; font-weight: 600; color: #f2f2f2; letter-spacing: -0.01em; }
.len-arrow { width: 14px; height: 14px; fill: none; stroke: #6b6b6b; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.len-cut { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 2px; border-radius: 6px; background: rgba(255,255,255,0.1); color: #d4d4d4; font-size: 11.5px; font-weight: 600; }
.lengths.over .len-chip.edited b { color: var(--cut); }
/* the lengths chip sizes to its text (a .selbar span rule gave it 140px) */
.selbar .len-chip, .selbar .len-chip i, .selbar .len-chip b { min-width: 0; margin-right: 0; }
.len-chip { width: auto; gap: 7px; }
.len-chip i + b { margin-left: -1px; }

/* ---- timeline scrollbars: both ways, thin, rounded, grey on the timeline's dark */
.timeline-scroll { overflow: auto !important; scrollbar-width: auto; }
.timeline-scroll::-webkit-scrollbar, #proScroll::-webkit-scrollbar { width: 12px; height: 12px; }
.timeline-scroll::-webkit-scrollbar-track, #proScroll::-webkit-scrollbar-track { background: transparent; }
.timeline-scroll::-webkit-scrollbar-thumb, #proScroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; border: 3px solid #010101; background-clip: padding-box; }
.timeline-scroll::-webkit-scrollbar-thumb:hover, #proScroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); background-clip: padding-box; }
.timeline-scroll::-webkit-scrollbar-thumb:active, #proScroll::-webkit-scrollbar-thumb:active { background: rgba(255,255,255,0.45); background-clip: padding-box; }
.timeline-scroll::-webkit-scrollbar-corner, #proScroll::-webkit-scrollbar-corner { background: transparent; }
/* lengths: plain text, no box (the user) - "0:44.3 of 1:53.4" */
.lengths { gap: 7px; align-items: baseline; }
.selbar .lengths .len-now, .selbar .lengths .len-of { min-width: 0; margin: 0; }
.len-now { font-size: 14px; font-weight: 600; color: #f2f2f2; letter-spacing: -0.01em; }
.len-of { font-size: 12px; font-weight: 500; color: #7a7a7a; }
.lengths.over .len-now { color: var(--cut); }
/* timeline even darker (the user) */
.timeline-wrap, #timelineScroll { background: #040404 !important; }
.timeline-scroll::-webkit-scrollbar-thumb, #proScroll::-webkit-scrollbar-thumb { border-color: #040404; }

/* ---- timeline scrollbars, easier to grab (the user): 16px bars, a 10px rounded thumb on a faint track */
.timeline-scroll, #proScroll { scrollbar-color: rgba(255,255,255,0.35) rgba(255,255,255,0.04); }
.timeline-scroll::-webkit-scrollbar, #proScroll::-webkit-scrollbar { width: 16px; height: 16px; }
.timeline-scroll::-webkit-scrollbar-track, #proScroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 999px; border: 3px solid #040404; background-clip: padding-box; }
.timeline-scroll::-webkit-scrollbar-thumb, #proScroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.32); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; min-height: 40px; min-width: 40px; }
.timeline-scroll::-webkit-scrollbar-thumb:hover, #proScroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); background-clip: padding-box; }
.timeline-scroll::-webkit-scrollbar-thumb:active, #proScroll::-webkit-scrollbar-thumb:active { background: rgba(255,255,255,0.8); background-clip: padding-box; }
/* Chrome ignores the custom bars when scrollbar-color is set: leave it unset; no arrow buttons */
.timeline-scroll, #proScroll { scrollbar-color: auto; scrollbar-width: auto; }
.timeline-scroll::-webkit-scrollbar-button, #proScroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* scrollbars line up with the timeline: the same 16px in from each side; no arrow buttons, any direction */
.timeline-scroll::-webkit-scrollbar-track:horizontal, #proScroll::-webkit-scrollbar-track:horizontal { margin: 0 16px; }
.timeline-scroll::-webkit-scrollbar-track:vertical, #proScroll::-webkit-scrollbar-track:vertical { margin: 4px 0 4px; }
.timeline-scroll::-webkit-scrollbar-button:horizontal, .timeline-scroll::-webkit-scrollbar-button:vertical, #proScroll::-webkit-scrollbar-button:horizontal, #proScroll::-webkit-scrollbar-button:vertical { display: none; width: 0; height: 0; }

/* ---- scrollbars with room on every side (the user): 20px bars, an 8px thumb with 6px of space above / below it
   (left / right for the side bar); the bottom bar starts and ends 16px in, like the timeline */
.timeline-scroll::-webkit-scrollbar, #proScroll::-webkit-scrollbar { width: 20px; height: 20px; }
.timeline-scroll::-webkit-scrollbar-track:horizontal, #proScroll::-webkit-scrollbar-track:horizontal { margin: 0 16px; border-width: 6px 0; border-style: solid; border-color: transparent; background-clip: padding-box; border-radius: 999px; }
.timeline-scroll::-webkit-scrollbar-track:vertical, #proScroll::-webkit-scrollbar-track:vertical { margin: 6px 0; border-width: 0 6px; border-style: solid; border-color: transparent; background-clip: padding-box; border-radius: 999px; }
.timeline-scroll::-webkit-scrollbar-thumb:horizontal, #proScroll::-webkit-scrollbar-thumb:horizontal { border-width: 6px 0; border-style: solid; border-color: transparent; background-clip: padding-box; }
.timeline-scroll::-webkit-scrollbar-thumb:vertical, #proScroll::-webkit-scrollbar-thumb:vertical { border-width: 0 6px; border-style: solid; border-color: transparent; background-clip: padding-box; }

/* ---- timeline tips: a bold title with its details, the actions as small key hints below */
.tl-tip { max-width: 320px; padding: 9px 11px; border-radius: 10px; background: #161616; border: 0; box-shadow: none; color: #f2f2f2; font-size: 12.5px; line-height: 1.3; }
.tl-tip .tip-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.tl-tip .tip-top b { font-weight: 600; color: #ffffff; }
.tl-tip .tip-meta { color: #a3a3a3; font-variant-numeric: tabular-nums; }
.tl-tip .tip-meta::before { content: "·"; margin-right: 6px; color: #5c5c5c; }
.tl-tip .tip-hints { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,0.07); color: #8a8a8a; font-size: 11.5px; }
.tl-tip .tip-hint { display: inline-flex; align-items: center; gap: 5px; }
.tl-tip kbd { padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,0.1); color: #e5e5e5; font: 600 11px Inter, "Segoe UI", sans-serif; }

/* ---- zoom / sound popup: icon tile + title + a quiet jump-to time, roomier controls, no borders */
.pop { width: 300px; padding: 16px 16px 8px; border: 0 !important; border-radius: 16px; background: #1a1a1a; box-shadow: none; }
.pop .pop-head { display: flex; align-items: center; gap: 10px; height: auto; margin-bottom: 16px; }
.pop .pop-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; }
.pop .pop-ico svg { width: 17px; height: 17px; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pop .pop-ico.zoom { background: rgba(250,204,21,0.16); }
.pop .pop-ico.zoom svg { stroke: #facc15; }
.pop .pop-ico.sound { background: rgba(34,197,94,0.18); color: #4ade80; cursor: pointer; }
.pop .pop-ico.sound svg { fill: #4ade80; stroke: none; width: 13px; height: 13px; margin-left: 2px; }
.pop .pop-ico.sound:hover { background: rgba(34,197,94,0.3); }
.pop .pop-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pop .pop-title .pop-name { font-size: 15px !important; font-weight: 600; line-height: 1.2; color: #f5f5f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop .pop-when { align-self: flex-start; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 500; color: #8a8a8a; cursor: pointer; font-variant-numeric: tabular-nums; }
.pop .pop-when:hover { color: #f2f2f2; text-decoration: underline; text-underline-offset: 2px; }
.pop .row-del { width: 32px; height: 32px; margin: 0; border-radius: 9px; color: #8a8a8a; background: transparent; }
.pop .row-del:hover { background: rgba(229,72,77,0.14); color: #f0a5a7; }
.pop .seg { margin-bottom: 16px; padding: 3px; border-radius: 11px; background: rgba(255,255,255,0.05); }
.pop .seg button { height: 34px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #a3a3a3; }
.pop .seg button.on { background: #cfcfcf; color: #0a0a0a; font-weight: 600; }
.pop .field { margin-bottom: 14px; }
.pop .field-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pop .field-top span { font-size: 13px; font-weight: 500; color: #d4d4d4; }
.pop .field-top b { min-width: 48px; height: 26px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,0.08); font-size: 12.5px; font-weight: 600; color: #f2f2f2; font-variant-numeric: tabular-nums; }

/* ---- right-click menu: icons, roomier rows, a real chevron for the sound list */
#ctxMenu, #selMenu, #soundPick { padding: 6px; border: 0 !important; border-radius: 14px; background: #1a1a1a !important; box-shadow: none !important; min-width: 220px; }
#ctxMenu .sm-head, #selMenu .sm-head { padding: 6px 10px 6px; font-size: 11.5px; font-weight: 600; color: #7a7a7a; letter-spacing: 0.02em; }
#ctxMenu button, #selMenu button { justify-content: flex-start; gap: 10px; height: 36px; padding: 0 10px; border-radius: 9px; font-size: 13px; font-weight: 500; color: #ededed; }
#ctxMenu button span { flex: 1; text-align: left; }
#ctxMenu button:hover, #selMenu button:hover { background: rgba(255,255,255,0.08); }
#ctxMenu .sm-sep, #selMenu .sm-sep { height: 1px; margin: 5px 6px; background: rgba(255,255,255,0.06); }
.sm-ico { flex: none; width: 16px; height: 16px; fill: none; stroke: #a3a3a3; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sm-ico .dot { fill: currentColor; stroke: none; }
.sm-ico.zoom { stroke: #facc15; color: #facc15; }
.sm-ico.snd { stroke: #4ade80; }
.sm-ico.snd path:first-child { fill: rgba(74,222,128,0.25); }
.sm-chev { flex: none; width: 14px; height: 14px; fill: none; stroke: #7a7a7a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#ctxMenu button:hover .sm-chev { stroke: #f2f2f2; }

/* ---- the left gutter with the dashed + buttons (zoom row, sound row) */
#timeline { margin: 0 16px 0 48px; }
.timeline-scroll::-webkit-scrollbar-track:horizontal, #proScroll::-webkit-scrollbar-track:horizontal { margin: 0 16px 0 48px; }
.timeline-wrap { position: relative; }
.tl-add { position: absolute; left: 12px; z-index: 4; width: 28px; padding: 0; display: grid; place-items: center; border-radius: 7px;
  border: 1.5px dashed rgba(255,255,255,0.25) !important; background: transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.tl-add svg { width: 13px; height: 13px; fill: none; stroke-width: 2; stroke-linecap: round; }
.tl-add.zoom { border-color: rgba(250,204,21,0.45) !important; }
.tl-add.zoom svg { stroke: #facc15; }
.tl-add.zoom:hover { background: rgba(250,204,21,0.14); border-color: #facc15 !important; }
.tl-add.sound { border-color: rgba(74,222,128,0.45) !important; }
.tl-add.sound svg { stroke: #4ade80; }
.tl-add.sound:hover { background: rgba(34,197,94,0.14); border-color: #4ade80 !important; }
.tl-add.hidden { display: none; }

/* ---- timeline tips, easy to read: title (bold) / details / what you can do (smallest), 4px apart */
.tl-tip { padding: 10px 12px; border-radius: 10px; background: #1c1c1c; line-height: 1.35; max-width: 260px; }
.tl-tip .tip-title { font-size: 13.5px; font-weight: 600; color: #ffffff; }
.tl-tip .tip-title span { font-weight: 600; color: #d4d4d4; margin-left: 4px; font-variant-numeric: tabular-nums; }
.tl-tip .tip-detail { margin-top: 3px; font-size: 12px; color: #a3a3a3; font-variant-numeric: tabular-nums; }
.tl-tip .tip-do { margin-top: 8px; font-size: 11.5px; color: #7a7a7a; }
/* + buttons: small squares, centred in the 48px gutter; menu icons always their full size */
.tl-add { left: 13px; width: 22px !important; height: 22px !important; min-width: 22px; border-radius: 6px; }
.tl-add svg { width: 11px; height: 11px; }
#ctxMenu .sm-ico, #selMenu .sm-ico { width: 16px !important; height: 16px !important; min-width: 16px; }
/* ---- the trash icon, redrawn: lid + handle, a tapered bin, two inner lines; soft red on hover */
.row-del svg { width: 16px !important; height: 16px !important; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.row-del { color: #8a8a8a; transition: background 0.15s, color 0.15s; }
.row-del:hover { color: #ff8a8a; background: rgba(239,68,68,0.14); }
/* trash button in the app's neutral look (the user: the red hover didn't fit): grey icon, soft white tint + white icon on hover */
.row-del, .pop .row-del { width: 32px; height: 32px; border-radius: 9px; color: #9a9a9a !important; background: transparent !important; }
.row-del svg { stroke-width: 1.6 !important; }
.row-del:hover, .pop .row-del:hover { color: #ffffff !important; background: rgba(255,255,255,0.09) !important; }
.row-del:active, .pop .row-del:active { background: rgba(255,255,255,0.14) !important; }
/* the bar above the timeline: room on both sides (the time lines up with the timeline's gutter) */
.selbar { padding: 8px 16px 8px 20px !important; }

/* ---- Ask AI tab */
#tab-ai .ai-head { padding: 16px 18px 10px; border-bottom: 0; }
#tab-ai .ai-head > span:first-child { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #f5f5f5; }
#tab-ai .ai-count { margin-left: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; background: rgba(255,255,255,0.1); color: #f2f2f2; font-size: 11.5px; font-weight: 600; display: inline-grid; place-items: center; }
#tab-ai .ai-count:empty { display: none; }
#tab-ai .ai-clear { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #8a8a8a; font-size: 12.5px; font-weight: 500; }
#tab-ai .ai-clear:hover { background: rgba(255,255,255,0.07); color: #f2f2f2; }
#tab-ai .ai-scroll { padding: 4px 16px 16px; }
#tab-ai .ai-list.chat { display: flex; flex-direction: column; gap: 14px; }
/* the AI's answer: a card, one point per line */
#tab-ai .msg.ai { align-self: stretch; }
#tab-ai .ai-card { padding: 14px 16px 12px; border-radius: 14px; background: rgba(255,255,255,0.04); }
#tab-ai .ai-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: #a3a3a3; }
#tab-ai .ai-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #cfcfcf; color: #0a0a0a; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
#tab-ai .msg.ai.error .ai-mark { background: #e5484d; color: #fff; }
#tab-ai .ai-say { padding: 0; background: none; font-size: 13.5px; line-height: 1.6; color: #d4d4d4; white-space: normal; }
/* your comments: grey bubbles on the right */
#tab-ai .msg.me .bubble { background: rgba(255,255,255,0.1); border-radius: 14px 14px 4px 14px; padding: 10px 13px; font-size: 13.5px; line-height: 1.5; color: #f2f2f2; }
/* bottom: transcript card, the message box, Run AI */
#tab-ai .ai-foot { padding: 10px 16px 16px; gap: 8px; }
#tab-ai .peek { padding: 12px 14px; border: 0; border-radius: 14px; background: rgba(255,255,255,0.04) !important; }
#tab-ai .peek-head span:first-child { font-size: 12.5px; font-weight: 600; color: #f2f2f2; }
#tab-ai .peek-text { font-size: 13.5px; line-height: 1.65; color: #cfcfcf; }
#tab-ai .ai-compose { min-height: 52px; padding: 8px 8px 8px 10px; gap: 8px; border: 0; border-radius: 14px; background: rgba(255,255,255,0.06) !important; }
#tab-ai .ai-compose:focus-within { background: rgba(255,255,255,0.09) !important; }
#tab-ai .ai-compose .ai-stamp { height: 26px; padding: 0 8px; border: 0; border-radius: 7px; background: rgba(255,255,255,0.1); color: #e5e5e5; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
#tab-ai .ai-compose textarea { font-size: 14px; color: #f2f2f2; }
#tab-ai .ai-compose textarea::placeholder { color: #6b6b6b; }
#tab-ai .ai-send { width: 36px; height: 36px; border-radius: 10px; background: #cfcfcf; color: #0a0a0a; }
#tab-ai .ai-peek-btn { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,0.08); }
#tab-ai .ai-run { height: 46px; border-radius: 12px; font-size: 14px; font-weight: 600; }
#tab-ai .ai-run.primary:disabled { background: rgba(255,255,255,0.05) !important; color: #6b6b6b !important; opacity: 1; cursor: default; }

/* quoted words keep their rounded chip when they wrap */
/* the + in the message box and its menu */
#tab-ai .ai-plus { flex: none; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 9px; background: rgba(255,255,255,0.08); color: #e5e5e5; }
#tab-ai .ai-plus:hover { background: rgba(255,255,255,0.14); color: #fff; }
#tab-ai .ai-plus svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#aiAddMenu { position: fixed; z-index: 60; padding: 6px; border: 0 !important; border-radius: 14px; background: #1a1a1a !important; min-width: 220px; }
#aiAddMenu .sm-head { padding: 6px 10px; font-size: 11.5px; font-weight: 600; color: #7a7a7a; }
#aiAddMenu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; font-size: 13px; font-weight: 500; color: #ededed; text-align: left; }
#aiAddMenu button span { flex: 1; }
#aiAddMenu button:hover { background: rgba(255,255,255,0.08); }
#aiAddMenu .sm-ico { width: 16px !important; height: 16px !important; }
#tab-ai .ai-compose .ai-stamp { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; }
/* the time chip in the message box: yellow (the user) */
#tab-ai .ai-compose .ai-stamp { background: rgba(250,204,21,0.16) !important; color: #facc15 !important; }

/* ---- the message box, three times as tall: the text on top, a toolbar under it (+, time, transcript ... send) */
#tab-ai .ai-compose { flex-wrap: wrap; align-items: center; min-height: 150px; padding: 12px 10px 10px 14px; row-gap: 8px; }
#tab-ai .ai-compose textarea { order: -1; flex: 1 1 100%; width: 100%; min-height: 88px; padding: 2px 2px 0; resize: none; line-height: 1.5; font-size: 14.5px; }
#tab-ai .ai-compose .ai-send { margin-left: auto; width: 40px; height: 40px; border-radius: 11px; }
#tab-ai .ai-compose .ai-send svg { width: 17px; height: 17px; }
/* Run AI: always readable, a sparkle in front; white when it can run */
#tab-ai .ai-run { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; font-size: 14px; }
#tab-ai .ai-run::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l1.4 3.6 3.6 1.4-3.6 1.4L8 11.5 6.6 7.9 3 6.5l3.6-1.4zM12.5 10.5l.6 1.4 1.4.6-1.4.6-.6 1.4-.6-1.4-1.4-.6 1.4-.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l1.4 3.6 3.6 1.4-3.6 1.4L8 11.5 6.6 7.9 3 6.5l3.6-1.4zM12.5 10.5l.6 1.4 1.4.6-1.4.6-.6 1.4-.6-1.4-1.4-.6 1.4-.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
#tab-ai .ai-run.running::before { display: none; }
#tab-ai .ai-run.primary:disabled { background: rgba(255,255,255,0.08) !important; color: #a3a3a3 !important; }
#tab-ai .ai-run.primary:not(:disabled) { background: #cfcfcf !important; color: #0a0a0a !important; }
#tab-ai .ai-run.primary:not(:disabled):hover { background: #dcdcdc !important; }

/* ---- the transcript window, rebuilt: header with the time + close; karaoke words; a footer that helps or acts */
#tab-ai .peek { padding: 12px 14px 10px; border-radius: 14px; background: rgba(255,255,255,0.05) !important; }
#tab-ai .peek-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#tab-ai .peek-title { font-size: 13px; font-weight: 600; color: #f5f5f5; }
#tab-ai .peek-time { font-size: 12px; font-weight: 600; color: #8a8a8a; font-variant-numeric: tabular-nums; }
#tab-ai .peek-close { margin-left: auto; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #7a7a7a; }
#tab-ai .peek-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
#tab-ai .peek-close svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#tab-ai .peek-text { max-height: 104px; overflow: hidden; font-size: 15px; line-height: 1.75; color: #ededed; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
#tab-ai .peek-text .pw { cursor: pointer; border-radius: 5px; padding: 1px 0; transition: background 0.1s, color 0.1s; }
#tab-ai .peek-text .pw:hover { background: rgba(255,255,255,0.1); }
#tab-ai .peek-text .pw.past { color: #7a7a7a; }
#tab-ai .peek-text .pw.cut { color: #5c5c5c; text-decoration: line-through; text-decoration-color: rgba(229,72,77,0.7); }
#tab-ai .peek-text .pw.now { background: #cfcfcf; color: #0a0a0a; padding: 1px 4px; font-weight: 600; }
#tab-ai .peek-text .pw.sel { background: rgba(255,255,255,0.22); color: #fff; }
#tab-ai .peek-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 11.5px; color: #6e6e6e; }
#tab-ai .peek-foot.has-sel { display: flex; align-items: center; gap: 6px; color: #d4d4d4; font-size: 12.5px; font-weight: 500; }
#tab-ai .peek-foot.has-sel span { flex: 1; }
#tab-ai .peek-foot button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,0.09); color: #f2f2f2; font-size: 12.5px; font-weight: 600; }
#tab-ai .peek-foot button:hover { background: rgba(255,255,255,0.15); }
#tab-ai .peek-foot button[data-p="cut"] { background: #cfcfcf; color: #0a0a0a; }
#tab-ai .peek-head .peek-tip { display: none; }
/* message-box toolbar: bigger buttons and icons (the user) */
#tab-ai .ai-plus, #tab-ai .ai-peek-btn { width: 40px !important; height: 40px !important; border-radius: 11px !important; }
#tab-ai .ai-plus svg, #tab-ai .ai-peek-btn svg { width: 20px !important; height: 20px !important; stroke-width: 1.8; }
#tab-ai .ai-compose .ai-stamp { height: 40px !important; padding: 0 12px !important; border-radius: 11px !important; font-size: 14px !important; }
#tab-ai .ai-peek-btn.on { background: #cfcfcf !important; color: #0a0a0a !important; }
/* Run AI: thicker (the user) */
#tab-ai .ai-run { height: 58px !important; border-radius: 14px !important; font-size: 15px !important; }
#tab-ai .ai-run::before { width: 18px; height: 18px; }

/* ---- overlays (images / videos over the picture): soft blue-violet, like zooms are yellow and sounds green */
.sm-ico.ovl { stroke: #a78bfa; }
.sm-ico.ovl circle { fill: #a78bfa; stroke: none; }
.tl-add.ovl { border-color: rgba(167,139,250,0.5) !important; }
.tl-add.ovl svg { stroke: #a78bfa; }
.tl-add.ovl:hover { background: rgba(167,139,250,0.14); border-color: #a78bfa !important; }
.overlays { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.overlays .ovl { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: move; user-select: none; }
.overlays .ovl img, .overlays .ovl video { position: static; display: block; width: 100%; height: auto; opacity: 1; object-fit: fill; pointer-events: none; }
.overlays .ovl.sel { outline: 1.5px solid rgba(255,255,255,0.95); outline-offset: 2px; }
.overlays .ovl.hidden { display: none; }

/* the transcript window scrolls: the whole transcript, a slim scrollbar, the edges fade */
#tab-ai .peek-text { max-height: 132px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scroll-behavior: auto; }
#tab-ai .peek-text::-webkit-scrollbar { width: 10px; }
#tab-ai .peek-text::-webkit-scrollbar-track { background: transparent; }
#tab-ai .peek-text::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
#tab-ai .peek-text::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); background-clip: padding-box; }
/* menus: darker and a little see-through, a soft blur behind so the text stays readable (the user) */
#aiAddMenu, #ctxMenu, #selMenu, #soundPick { background: rgba(12,12,12,0.86) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#aiAddMenu button:hover, #ctxMenu button:hover, #selMenu button:hover { background: rgba(255,255,255,0.08); }
/* no Clear chat button (the user) */
#aiClear { display: none !important; }
.pop .pop-ico.ovl { background: rgba(167,139,250,0.18); }
.pop .pop-ico.ovl svg { stroke: #a78bfa; }
.pop .pop-ico.ovl svg circle { fill: #a78bfa; stroke: none; }

/* ---- the app's tooltip: a dark tile, small text, an arrow pointing at the element, a quick fade-in */
.hover-tip { max-width: 230px; padding: 7px 10px; border: 0 !important; border-radius: 8px; background: #1f1f1f; color: #ededed;
  font-size: 12px !important; font-weight: 500; line-height: 1.35; letter-spacing: 0; animation: tip-in 0.12s ease-out; }
.hover-tip::before { content: ""; position: absolute; top: -5px; left: var(--arrow-x, 50%); width: 10px; height: 10px; margin-left: -5px;
  background: #1f1f1f; border-radius: 2px; transform: rotate(45deg); }
.hover-tip.above::before { top: auto; bottom: -5px; }
@keyframes tip-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* transcript: cut words hidden unless "Cut words" is on; the switch sits in the header; no underline on the spoken word */
#aiPeekText:not(.show-cut) .pw.cut { display: none; }
#tab-ai .peek-cuts { margin-left: auto; gap: 8px; font-size: 12px; font-weight: 500; color: #8a8a8a; cursor: pointer; }
#tab-ai .peek-cuts:hover { color: #e5e5e5; }
#tab-ai .peek-close { margin-left: 6px; }
#tab-ai .peek-text .pw.now { border-bottom: 0 !important; box-shadow: none !important; text-decoration: none !important; }
#tab-ai .peek-cuts > span:first-child { font-size: 12px !important; font-weight: 500 !important; color: #8a8a8a !important; }
#tab-ai .peek-cuts:hover > span:first-child { color: #e5e5e5 !important; }

/* ---- transcript window: more room, 5 lines, a "Back to playhead" button when you've scrolled away */
#tab-ai .peek { padding: 14px 16px 12px; }
#tab-ai .peek-head { margin-bottom: 10px; }
#tab-ai .peek-text { max-height: 170px; font-size: 14.5px; line-height: 1.85; padding: 6px 10px 6px 2px; color: #e5e5e5; }
#tab-ai .peek-text .pw { padding: 2px 0; }
#tab-ai .peek-text .pw.now { padding: 2px 5px; }
#tab-ai .peek-foot { display: flex; align-items: center; gap: 8px; min-height: 34px; margin-top: 10px; padding-top: 10px; }
#tab-ai .peek-foot > span { flex: 1; }
#tab-ai .peek-foot .peek-now { display: none; height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: #cfcfcf; color: #0a0a0a; font-size: 12px; font-weight: 600; }
#tab-ai .peek-foot.away .peek-now { display: inline-flex; align-items: center; }
#tab-ai .peek-foot .peek-now:hover { background: #dcdcdc; }
/* menus a little less see-through (the user) */
#aiAddMenu, #ctxMenu, #selMenu, #soundPick { background: rgba(14,14,14,0.95) !important; }
#tab-ai .peek-foot .peek-now { white-space: nowrap; }

/* transcript: the spoken word in a yellow overlay with a small yellow playhead moving through it;
   between words the playhead waits just before the next one */
#tab-ai .peek-text .pw { position: relative; }
#tab-ai .peek-text .pw.now { background: rgba(250,204,21,0.22) !important; color: #fde68a !important; font-weight: 600; padding: 2px 4px !important; border-radius: 5px; }
#tab-ai .peek-text .pw.now::after, #tab-ai .peek-text .pw.next::before { content: ""; position: absolute; top: -2px; bottom: -2px; width: 2px; border-radius: 2px; background: #facc15; pointer-events: none; }
#tab-ai .peek-text .pw.now::after { left: clamp(2px, var(--prog, 0%), calc(100% - 6px)); }
#tab-ai .peek-text .pw.next::before { left: -3px; }
/* no time next to "Transcript" (the user) */
#aiPeekTime { display: none !important; }

/* the hint sits in the header; the footer shows only when there's something in it (a selection, Back to playhead) */
#tab-ai .peek-hint { font-size: 12px; font-weight: 500; color: #6e6e6e; }
#tab-ai .peek-foot:not(.has-sel):not(.away) { display: none; }
/* the header stays on one line: labels never wrap; the hint gives way first */
#tab-ai .peek-head { flex-wrap: nowrap; min-width: 0; }
#tab-ai .peek-title, #tab-ai .peek-cuts, #tab-ai .peek-cuts > span:first-child { white-space: nowrap; flex: none; }
#tab-ai .peek-hint { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 4px; }

/* "Show cut words" at the bottom: its own row (switch left; the selection count / Back to playhead right) */
#tab-ai .peek-bottom { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
#tab-ai .peek-bottom .peek-cuts { margin-left: 0; }
#tab-ai .peek-bottom .peek-foot { flex: 1; display: flex !important; justify-content: flex-end; align-items: center; gap: 8px; min-height: 30px; margin: 0; padding: 0; border: 0; }
#tab-ai .peek-bottom .peek-foot > span { flex: none; color: #a3a3a3; font-size: 12px; }
#tab-ai .peek-bottom .peek-foot:not(.has-sel) > span { display: none; }
#tab-ai .peek-close { margin-left: auto; }
/* overlay transform controls (left-click on the video): a white frame, 8 square handles */
.overlays .ovl .ovh { display: none; position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #cfcfcf; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
.overlays .ovl.sel .ovh { display: block; }
.overlays .ovl .ovh.nw { left: 0; top: 0; cursor: nwse-resize; }
.overlays .ovl .ovh.n { left: 50%; top: 0; cursor: ns-resize; }
.overlays .ovl .ovh.ne { left: 100%; top: 0; cursor: nesw-resize; }
.overlays .ovl .ovh.e { left: 100%; top: 50%; cursor: ew-resize; }
.overlays .ovl .ovh.se { left: 100%; top: 100%; cursor: nwse-resize; }
.overlays .ovl .ovh.s { left: 50%; top: 100%; cursor: ns-resize; }
.overlays .ovl .ovh.sw { left: 0; top: 100%; cursor: nesw-resize; }
.overlays .ovl .ovh.w { left: 0; top: 50%; cursor: ew-resize; }
.overlays .ovl.sel { outline-offset: 0; }
/* the overlay popup: the Captions inspector's controls (ix-field, ix-btns) */
.pop .ovp { padding-bottom: 8px; }
.pop .ovp .ix-label { margin: 0 0 6px; font-size: 12px; color: #8c8c8c; }
.pop .ovp .ix-field { height: 36px; padding: 0 10px; gap: 8px; border-radius: 8px; }
.pop .ovp .ix-field input { font-size: 13px; }
.pop .ovp .ix-btns { display: flex; margin-bottom: 14px; }
.pop .ovp .ix-btns button { flex: 1; width: auto; height: 32px; font-size: 12.5px; font-weight: 500; }
.ovp-pos { display: flex; gap: 10px; margin-bottom: 14px; }
.ovp-grid { flex: none; display: grid; grid-template-columns: repeat(3, 24px); gap: 3px; padding: 6px; border-radius: 8px; background: #262626; }
.ovp-grid button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; }
.ovp-grid button i { width: 6px; height: 6px; border-radius: 50%; background: #5c5c5c; }
.ovp-grid button:hover { background: #333; }
.ovp-grid button:hover i { background: #bdbdbd; }
.ovp-grid button.on { background: #cfcfcf; }
.ovp-grid button.on i { background: #111; }
.ovp-xy { flex: 1; min-width: 0; display: grid; gap: 6px; align-content: center; }
.ovp-size { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.ovp-size .ix-field { flex: 0 0 96px; }
.pop .ovp .ovp-size .ix-btns { flex: 1; margin-bottom: 0; }
.ovp-len { margin-bottom: 4px; }
.pop .ovp .ix-btns button.on { background: #cfcfcf; color: #111; }

/* Export video popup (app.js openExport): the Captions tab's colours and sizes; one list, label left, choice right */
#exportDlg { --o-card: rgba(255,255,255,0.04); --o-ctl: rgba(255,255,255,0.07); --o-hover: rgba(255,255,255,0.10); --o-on: rgba(255,255,255,0.16); --t-2: rgba(255,255,255,0.5); --t-3: rgba(255,255,255,0.4); }
#exportDlg .modal-box.xp-box { width: min(600px, 100%); max-height: min(820px, 100%); padding: 0; border: 0; border-radius: 20px; background: #000; overflow: hidden; box-shadow: none; }
.xp-box .modal-head { margin: 0; padding: 22px 20px 18px; }
.xp-box .modal-head b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: #ededed; }
.xp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 20px; }
.xp-field { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; margin: 0 0 14px; border-radius: 12px; background: var(--o-ctl); border: 1px solid transparent; cursor: text; transition: background 0.12s, border-color 0.12s, box-shadow 0.12s; }
.xp-field:hover { background: var(--o-hover); }
.xp-field:focus-within { background: var(--o-on); border-color: rgba(255,255,255,0.32); box-shadow: 0 0 0 3px rgba(255,255,255,0.06); }
.xp-field input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: #ededed; font-size: 15px; font-weight: 600; }
.xp-field input::selection { background: rgba(255,255,255,0.28); color: #fff; }
.xp-field span { flex: none; font-size: 13px; color: var(--t-3); }
.xp-rows { display: flex; flex-direction: column; gap: 12px; }
.xp-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 10px 0 18px; border-radius: 12px; background: var(--o-ctl); font-size: 14px; font-weight: 500; color: #f2f2f2; }
.xp-row.switch { padding-right: 18px; cursor: pointer; transition: background 0.12s; }
.xp-row.switch:hover { background: var(--o-hover); }
.xp-row .grow-label { flex: 1; color: #f2f2f2; font-size: 14px; font-weight: 500; }
.xp-row.hidden { display: none; }
.xp-row.off { opacity: 0.4; pointer-events: none; }
.xp-num { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 12px; background: rgba(0,0,0,0.4); cursor: text; transition: box-shadow 0.12s; }
.xp-num:focus-within { box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
.xp-num input { width: 100px; height: 40px; padding: 0 8px; border: 0; border-radius: 9px; outline: 0; box-shadow: none; background: transparent; color: #f2f2f2; font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.xp-num input::-webkit-outer-spin-button, .xp-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.xp-num span { padding-right: 10px; font-size: 13px; color: var(--t-3); }
.xp-seg button.xp-ellip { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.xp-go:disabled { opacity: 0.35; cursor: default; }
.xp-box details.cx-group { margin: 12px 0 0; padding: 0; border: 0; border-radius: 14px; background: var(--o-card); }
.xp-box details.cx-group summary { min-height: 60px; padding: 0 18px; font-size: 14px; font-weight: 600; color: #ededed; border-radius: 14px; }
.xp-box details.cx-group summary:hover { background: var(--o-card); color: #fff; }
.xp-box details.cx-group summary svg { width: 14px; height: 14px; color: var(--t-3); transform: none; transition: transform 0.15s; }
.xp-box details.cx-group[open] summary svg { transform: rotate(90deg); }
.xp-more-body { padding: 4px 12px 14px; }
.xp-box summary:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 2px; }
.xp-seg { display: inline-flex; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(0,0,0,0.4); max-width: 100%; }
.xp-seg button { height: 40px; min-width: 68px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background 0.12s, color 0.12s; }
.xp-seg button:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: #fff; }
.xp-seg button.on, .xp-seg button.on:hover { background: #dcdcdc; color: #0a0a0a; }
.xp-seg button:disabled { opacity: 0.35; cursor: default; }
.xp-seg button:focus-visible, .xp-cancel:focus-visible, .xp-go:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 2px; }
.xp-foot { display: flex; align-items: center; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid rgba(255,255,255,0.07); background: #000; }
.xp-summary { flex: 1; min-width: 0; font-size: 13px; color: var(--t-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-summary b { margin-right: 8px; font-size: 15px; font-weight: 600; color: #f2f2f2; }
.xp-cancel, .xp-go { flex: none; height: 44px; padding: 0 18px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.xp-cancel { border: 0; background: var(--o-ctl); color: #e5e5e5; }
.xp-cancel:hover { background: var(--o-hover); color: #fff; }
.xp-go { padding: 0 26px; }
@media (max-width: 460px) { .xp-seg { gap: 3px; padding: 4px; } .xp-seg button { min-width: 0; padding: 0 10px; font-size: 12.5px; } .xp-row { padding-left: 14px; gap: 8px; } .xp-foot { flex-wrap: wrap; } .xp-summary { flex-basis: 100%; } .xp-go { flex: 1; } }

/* undo / redo on the timeline bar: small, black, no border */
.selbar .history { gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; margin-right: 6px; }
.selbar .history .iconbtn { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: #161616; color: #e6e6e6; transition: background 0.12s, color 0.12s; }
.selbar .history .iconbtn svg { width: 15px; height: 15px; stroke-width: 1.6; }
.selbar .history .iconbtn:hover:not(:disabled) { background: #232323; color: #fff; }
.selbar .history .iconbtn:active:not(:disabled) { background: #2c2c2c; }
.selbar .history .iconbtn:disabled { opacity: 1; background: #0f0f0f; color: #4a4a4a; cursor: default; }
.selbar .history .iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the ⋯ menu: same look as the transcript selection menu, with icons */
#moreMenu { padding: 6px; border: 0 !important; border-radius: 14px; background: rgba(14,14,14,0.95) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none !important; min-width: 220px; }
#moreMenu button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; font-size: 13px; font-weight: 500; color: #ededed; text-align: left; }
#moreMenu button span { flex: 1; text-align: left; }
#moreMenu button:hover:not(:disabled) { background: rgba(255,255,255,0.08); border: 0; }
#moreMenu .sm-sep { height: 1px; margin: 5px 6px; background: rgba(255,255,255,0.06); }
#moreMenu .danger, #moreMenu .danger:hover:not(:disabled) { color: #e5888b; }
#moreMenu .danger:hover:not(:disabled) { background: rgba(239,68,68,0.12); }
#moreMenu .sm-ico { width: 16px; height: 16px; min-width: 16px; }
#moreMenu .danger .sm-ico { stroke: #e5888b; }

/* close button in every floating panel (menus and popups); a click anywhere outside closes them too (app.js FLOATERS) */
.panel-x, #ctxMenu .panel-x, #selMenu .panel-x, #aiAddMenu .panel-x, #soundPick .panel-x, #pop .panel-x, #trackMenu .panel-x, #newTrackMenu .panel-x, #projMenu .panel-x { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-height: 0; padding: 0; gap: 0; line-height: 0;
  border: 0; border-radius: 8px; background: transparent; color: #8a8a8a; cursor: pointer; transition: background 0.12s, color 0.12s; }
.panel-x svg, #ctxMenu .panel-x svg, #selMenu .panel-x svg, #aiAddMenu .panel-x svg, #soundPick .panel-x svg, #pop .panel-x svg, #trackMenu .panel-x svg, #newTrackMenu .panel-x svg, #projMenu .panel-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.panel-x:hover, #ctxMenu .panel-x:hover, #selMenu .panel-x:hover, #aiAddMenu .panel-x:hover, #soundPick .panel-x:hover, #pop .panel-x:hover, #trackMenu .panel-x:hover, #newTrackMenu .panel-x:hover, #projMenu .panel-x:hover { background: rgba(255,255,255,0.1); color: #fff; }
.panel-x:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 1px; }
#ctxMenu .sm-head, #selMenu .sm-head, #aiAddMenu .sm-head { padding-right: 38px; min-height: 26px; display: flex; align-items: center; }
#soundPick .search { padding-right: 40px; }
#pop .pop-head { padding-right: 0; }

/* cuts are red: "Cut this clip" in the right-click menu (like "Cut" in the selection menu) */
#ctxMenu button[data-c="cutclip"], #ctxMenu button[data-c="cutclip"] span { color: #f27478; }
#ctxMenu button[data-c="cutclip"] .sm-ico { stroke: #f27478; }
#ctxMenu button[data-c="cutclip"]:hover { background: rgba(242,116,120,0.13); }
/* close button position: in line with the menu's icon column (12px in), centred on the title row */
#ctxMenu .panel-x, #selMenu .panel-x, #aiAddMenu .panel-x { top: 8px; right: 12px; }
#pop .panel-x { top: 22px; right: 12px; }
#soundPick .panel-x { top: 10px; right: 10px; }

/* ---- tracks: lane controls in the left gutter, the gray + for a new track, the drop line, the two menus */
.tl-ctls { position: absolute; left: 0; top: 0; width: 48px; bottom: 0; z-index: 4; pointer-events: none; }
.tl-ctl { position: absolute; left: 0; width: 48px; height: 22px; display: flex; align-items: center; gap: 1px; padding-left: 2px; pointer-events: auto; }
.tl-ctl.hidden, .tl-newtrack.hidden { display: none; }
.tl-ctl .tl-add { position: relative; left: auto; top: auto; flex: none; }
.tl-grip { flex: none; width: 13px; height: 22px; padding: 0 !important; display: grid; place-items: center; border: 0 !important; border-radius: 4px !important; background: transparent !important; color: #4a4a4a; cursor: grab; }
.tl-grip svg { width: 7px; height: 13px; fill: currentColor; }
.tl-grip:hover { color: #c8c8c8; background: rgba(255,255,255,0.07) !important; }
.tl-grip:active { cursor: grabbing; }
.tl-newtrack { position: absolute; left: 16px; width: 22px; height: 22px; padding: 0 !important; display: grid; place-items: center; border-radius: 6px !important; pointer-events: auto;
  border: 1.5px dashed rgba(255,255,255,0.22) !important; background: rgba(255,255,255,0.05) !important; color: #9a9a9a; cursor: pointer; }
.tl-newtrack svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tl-newtrack:hover { color: #fff; border-color: rgba(255,255,255,0.5) !important; background: rgba(255,255,255,0.1) !important; }
.tl-drop { position: absolute; left: 8px; right: 16px; height: 3px; border-radius: 2px; background: #cfcfcf; pointer-events: none; z-index: 6; }
.tl-drop.hidden { display: none; }
body.moving-track, body.moving-track * { cursor: grabbing !important; user-select: none; }
#trackMenu, #newTrackMenu, #projMenu { padding: 6px; border: 0 !important; border-radius: 14px; background: rgba(14,14,14,0.95) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none !important; min-width: 220px; }
#trackMenu .sm-head, #newTrackMenu .sm-head, #projMenu .sm-head { padding: 6px 38px 6px 10px; min-height: 26px; display: flex; align-items: center; font-size: 11.5px; font-weight: 600; color: #7a7a7a; letter-spacing: 0.02em; }
#trackMenu button:not(.panel-x), #newTrackMenu button:not, #projMenu button:not(.panel-x) { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; font-size: 13px; font-weight: 500; color: #ededed; text-align: left; }
#trackMenu button:not(.panel-x) span, #newTrackMenu button:not, #projMenu button:not(.panel-x) span { flex: 1; text-align: left; }
#trackMenu button:not(.panel-x):hover:not(:disabled), #newTrackMenu button:not, #projMenu button:not(.panel-x):hover { background: rgba(255,255,255,0.08); }
#trackMenu button:disabled { opacity: 0.35; cursor: default; }
#trackMenu button.danger, #trackMenu button.danger .sm-ico { color: #f27478; stroke: #f27478; }
#trackMenu button.danger:hover:not(:disabled) { background: rgba(242,116,120,0.13); }
#trackMenu .sm-sep, #newTrackMenu .sm-sep, #projMenu .sm-sep { height: 1px; margin: 5px 6px; background: rgba(255,255,255,0.06); }
#trackMenu .sm-ico, #newTrackMenu .sm-ico, #projMenu .sm-ico { width: 16px; height: 16px; min-width: 16px; flex: none; }
#trackMenu .panel-x, #newTrackMenu .panel-x, #projMenu .panel-x { top: 8px; right: 12px; }

/* ---- "Check spots": the list and a single spot, in the panel's own look (soft cards, an amber ring badge) */
.pop .pop-ico.flag { background: rgba(245,165,36,0.14); }
.pop .pop-ico.flag svg { stroke: #f5a524; }
.pop .fl-head { margin-bottom: 14px; }
.fl-sub { font-size: 12px; font-weight: 500; color: #8a8a8a; }
.pop .ignore-all { flex: none; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: #8a8a8a; font-size: 12.5px; font-weight: 500; }
.pop .ignore-all:hover { background: rgba(255,255,255,0.08); color: #f2f2f2; }
.pop .fl-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; margin: 0 0 12px; overflow-y: auto; }
.pop .flag-list .fl-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 0; padding: 12px; border: 0; border-radius: 12px; background: rgba(255,255,255,0.05); color: #ededed; font-size: 13px; font-weight: 500; line-height: 1.45; text-align: left; transition: background 0.12s; }
.pop .flag-list .fl-row:hover { background: rgba(255,255,255,0.09); }
.fl-time { flex: none; padding: 2px 8px; border-radius: 7px; background: rgba(245,165,36,0.14); color: #f5a524; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.45; }
.fl-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fl-go { flex: none; width: 14px; height: 14px; margin-top: 3px; fill: none; stroke: #6e6e6e; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pop .flag-list .fl-row:hover .fl-go { stroke: #ededed; }
.pop .flag-q { margin: 0 0 12px; font-size: 14px; font-weight: 500; line-height: 1.45; color: #ededed; }
.pop .flag-ctx { margin: 0 0 14px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.05); font-size: 13px; line-height: 1.6; color: #8a8a8a; }
.pop .flag-ctx .hit { color: #f2f2f2; font-weight: 600; }
.pop .fl-opts { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; margin: 0 0 12px; }
.pop .fl-opts button { width: 100%; height: 40px; padding: 0 14px; border: 0; border-radius: 11px; background: rgba(255,255,255,0.07); color: #ededed; font-size: 13px; font-weight: 600; filter: none; transition: background 0.12s; }
.pop .fl-opts button:hover { background: rgba(255,255,255,0.12); filter: none; }
.pop .fl-opts button:first-child:not(.ignore) { background: #cfcfcf; color: #0a0a0a; }
.pop .fl-opts button:first-child:not(.ignore):hover { background: #dcdcdc; }
.pop .fl-opts button.ignore { background: transparent; color: #8a8a8a; font-weight: 500; }
.pop .fl-opts button.ignore:hover { background: rgba(255,255,255,0.08); color: #f2f2f2; }

/* ---- zoom popup: length as a number with - / +, speed as three presets (zoom level stays a slider) */
.pop .zp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.pop .zp-label { font-size: 13px; font-weight: 500; color: #d4d4d4; }
.pop .zp-input { display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: 11px; background: rgba(255,255,255,0.05); }
.pop .zp-step { flex: none; width: 32px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(255,255,255,0.07); color: #d8d8d8; font-size: 17px; font-weight: 500; line-height: 1; }
.pop .zp-step:hover { background: rgba(255,255,255,0.14); color: #fff; }
.pop .zp-num { display: flex; align-items: center; justify-content: center; gap: 2px; width: 72px; height: 34px; padding: 0 6px; border-radius: 8px; cursor: text; }
.pop .zp-num:focus-within { box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
.pop .zp-num input { width: 40px; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #f5f5f5; font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pop .zp-num input::-webkit-outer-spin-button, .pop .zp-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pop .zp-num span { font-size: 12px; color: #8a8a8a; }
.pop .zp-speed { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255,255,255,0.05); }
.pop .zp-speed button { height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #a3a3a3; font-size: 12.5px; font-weight: 500; }
.pop .zp-speed button:hover { color: #fff; background: rgba(255,255,255,0.08); }
.pop .zp-speed button.on { background: #cfcfcf; color: #0a0a0a; font-weight: 600; }
.pop .zp-row.hidden { display: none; }
.pop .zp-step:disabled { opacity: 0.3; cursor: default; background: rgba(255,255,255,0.07); color: #d8d8d8; }

/* ---- the zoom / sound / picture / spot popups: the right-click menu's look (near-black blurred panel, menu rows) */
#pop { width: 292px; padding: 6px 6px 8px; border: 0 !important; border-radius: 14px; background: rgba(14,14,14,0.95) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none !important; }
#pop .pop-head { margin: 0; padding: 8px 10px 10px; }
#pop > *:not(.pop-head):not(.pm-list):not(.pm-sep):not(.ovp) { margin-left: 10px; margin-right: 10px; }
#pop > .ovp { padding-left: 10px; padding-right: 10px; }
.pm-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.pm-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: #ededed; font-size: 13px; font-weight: 500; text-align: left; transition: background 0.12s; }
.pm-row span { flex: 1; text-align: left; }
.pm-row:hover { background: rgba(255,255,255,0.08); }
.pm-row.on { background: rgba(255,255,255,0.1); }
.pm-row .sm-ico { width: 16px; height: 16px; min-width: 16px; flex: none; }
.pm-check { width: 14px; height: 14px; flex: none; fill: none; stroke: #f2f2f2; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.pm-row.on .pm-check { visibility: visible; }
.pm-sep { height: 1px; margin: 5px 6px 12px; background: rgba(255,255,255,0.06); }
#pop .field .field-top span, #pop .zp-label { font-size: 13px; font-weight: 500; color: #ededed; }
.pm-select { position: relative; margin-bottom: 12px; }
.pm-cur { background: rgba(255,255,255,0.07); }
.pm-cur:hover { background: rgba(255,255,255,0.11); }
.pm-chev { width: 14px; height: 14px; flex: none; fill: none; stroke: #9a9a9a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pm-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 6; padding: 4px; border-radius: 12px; background: #1b1b1b; box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.07); }
.pm-menu.hidden { display: none; }

/* sound picker rows: icon, name and length on one line, evenly spaced; the icon plays / stops */
#soundPick .sp-list { padding-right: 2px; }
#soundPick .sp-row { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 6px; margin: 0; border-radius: 9px; }
#soundPick .sp-row .play { flex: none; box-sizing: border-box; width: 26px; height: 26px; min-width: 26px; min-height: 0; padding: 0; margin: 0; gap: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #2a2a2a; color: #fff; }
#soundPick .sp-row .play svg { width: 11px; height: 11px; margin: 0; fill: currentColor; stroke: none; }
#soundPick .sp-row .play .i-play { margin-left: 1px; }
#soundPick .sp-row .play .i-stop, #soundPick .sp-row .play.on .i-play { display: none; }
#soundPick .sp-row .play.on .i-stop { display: block; }
#soundPick .sp-row .play.on { background: #cfcfcf; color: #0a0a0a; }
#soundPick .sp-row .sname { flex: 1; min-width: 0; margin: 0; text-align: left; line-height: 1; }
#soundPick .sp-row .slen { flex: none; min-width: 34px; text-align: right; line-height: 1; }

/* Check spots button: borderless, soft pill with a round amber count */
.check-btn { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 6px; border: 0 !important; outline: 0; border-radius: 999px; background: rgba(255,255,255,0.07) !important; box-shadow: none !important; color: #ededed; font-size: 13px; font-weight: 600; transition: background 0.12s; }
.check-btn:hover { background: rgba(255,255,255,0.12) !important; }
.check-btn:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.25) !important; }
.check-btn .n { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: #f5a524; color: #1a1100; font-size: 12px; font-weight: 700; line-height: 1; }
.check-btn { height: 27.78px; padding: 0 12px 0 5px; gap: 7px; border-radius: 7px; background: #f5a524 !important; color: #1a1100; }   /* same height and corners as the Basic / Pro buttons next to it */
.check-btn:hover { background: #ffb73d !important; }
.check-btn .n { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: #1a1100; color: #f5a524; font-size: 11px; }
.sm-ico.ovl { stroke: #a78bfa; }

/* play bar in the house style: dark panel, 10-12 px corners, square-ish buttons (like Basic / Pro and the menus) */
.transport { gap: 12px; padding: 5px 14px 5px 5px; border: 0 !important; border-radius: 12px; background: rgba(14,14,14,0.92) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none; }
.transport .playbtn { width: 36px; height: 36px; border-radius: 9px; background: #cfcfcf; }
.transport .playbtn:hover { background: #dcdcdc; }
.transport .time { min-width: 0; padding: 0 2px; font-size: 12.5px; font-weight: 500; color: #a8a8a8; letter-spacing: 0; }
.transport .switch { gap: 9px; padding-left: 12px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,0.08); font-size: 12.5px; font-weight: 500; color: #a8a8a8; }
.transport .switch:hover { color: #fff; }

/* the lane controls live in a fixed gutter left of the tracks: the tracks start after it and never slide under it */
#timelineScroll { margin-left: 54px; }
.tl-drop { left: 8px; }
.tl-ctl { width: 48px; padding-left: 2px; }
.tl-newtrack { left: 16px; }

/* ---- the Projects sidebar in the house look: pure black like the right panel, soft rounded cards, no borders */
.videos, .storage { background: #000000 !important; }
.videos { border: 0 !important; padding: 14px 10px 0 !important; }
.videos .side-head { margin: 0 2px 12px 0; }
.videos .side-title { margin: 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #8b8b8b; opacity: 1; }
.videos .side-new { width: 30px; height: 30px; border: 0 !important; border-radius: 9px; background: rgba(255,255,255,0.07); color: #d8d8d8; }
.videos .side-new:hover { background: rgba(255,255,255,0.13); color: #fff; }
.videos #videoList { display: flex; flex-direction: column; gap: 4px; }
.videos .video-item { padding: 8px 10px 8px 8px !important; border-radius: 12px; background: transparent; border: 0 !important; transition: background 0.12s; }
.videos .video-item:hover { background: rgba(255,255,255,0.05); }
.videos .video-item.on { background: rgba(255,255,255,0.09); }
.videos .video-item .thumb { width: 40px; height: 52px; border-radius: 9px; background: #151515; }
.videos .video-item .name { font-size: 13.5px; font-weight: 600; color: #e8e8e8; }
.videos .video-item .state { font-size: 12px; margin-top: 5px; color: #7d7d7d; }
.videos .storage { margin: auto -10px 0; width: calc(100% + 20px); padding: 12px 20px 14px; border-radius: 0; border-top: 1px solid rgba(255,255,255,0.06) !important; }
.videos .storage:hover { background: #0b0b0b !important; }
.videos .st-bar { height: 5px; border-radius: 3px; }

/* storage: a soft rounded card like the project rows, big number, thicker bar */
.videos .storage { margin: auto 0 12px; width: 100%; padding: 12px 14px 14px; border: 0 !important; border-radius: 12px; background: rgba(255,255,255,0.05) !important; display: block; }
.videos .storage:hover { background: rgba(255,255,255,0.08) !important; }
.videos .storage .st-top { align-items: baseline; margin-bottom: 10px; }
.videos .storage .st-top span { font-size: 12px; font-weight: 600; color: #a8a8a8; }
.videos .storage .st-top b { font-size: 12px; font-weight: 500; color: #8b8b8b; }
.videos .storage .st-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); }
.videos .storage .st-bar i { border-radius: 3px; background: #cfcfcf; }
.videos .storage[data-level="warn"] .st-bar i { background: #f5b82e; }
.videos .storage[data-level="full"] .st-bar i { background: #e5484d; }

/* ---- project rows: the picture is the main thing, then the name, then the status. Flat: no shadows, badges or edges */
.videos .video-item { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px !important; border-radius: 14px; box-shadow: none; }
.videos .video-item.on { background: rgba(255,255,255,0.08); box-shadow: none; }
.videos .video-item .thumb { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 10px; box-shadow: none; background: #151515; }
.videos .video-item .thumb::after { content: none !important; }
.videos .video-item .item-text { flex: none; padding: 0 2px 2px; }
.videos .video-item .name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.videos .video-item .state { margin-top: 3px; font-size: 12px; color: #7d7d7d; }
.videos .video-item .ready-tag { margin-left: 0; gap: 5px; font-size: 12px; font-weight: 500; }
.videos .video-item .ready-tag::before { content: "·"; width: auto; height: auto; margin: 0 1px 0 0; border-radius: 0; background: none; color: #5d5d5d; }
.videos .video-item .ready-tag[data-s="ready"] { color: #5fd38d; }
.videos .video-item .ready-tag[data-s="new"] { color: #9b9b9b; }
.videos .video-item .item-del { top: 14px !important; right: 14px; transform: none; width: 28px; height: 28px; border-radius: 8px; background: rgba(0,0,0,0.6); }

.videos { background: #070707 !important; }

/* the gutter is the left padding now: the track itself starts right at it */
#timeline { margin-left: 0; }

/* project rows: a modest picture in the video's own shape (tall for phone videos, wide for landscape), text beside it */
.videos .video-item { flex-direction: row; align-items: center; gap: 12px; padding: 8px !important; }
.videos .video-item .thumb { flex: none; width: auto; height: 78px; max-width: 112px; aspect-ratio: auto; border-radius: 9px; overflow: hidden; background: #151515; display: block; }
.videos .video-item .thumb img { height: 100%; width: auto; max-width: 112px; display: block; object-fit: cover; }
.videos .video-item .thumb:empty { width: 44px; }
.videos .video-item .item-text { flex: 1; min-width: 0; padding: 0; }
.videos .video-item .item-del { top: 50% !important; right: 8px; transform: translateY(-50%); background: rgba(255,255,255,0.06); }

.videos .video-item .item-del { width: 30px; height: 30px; border-radius: 9px; color: #b5b5b5; background: rgba(255,255,255,0.07); }
.videos .video-item .item-del svg { width: 16px; height: 16px; stroke-width: 1.4; }
.videos .video-item .item-del:hover { color: #ff7b80; background: rgba(229,72,77,0.16); }

/* the ... button on a project row: always faint, brighter on hover; opens #projMenu */
.videos .video-item .item-more { opacity: 0; color: #b5b5b5; background: rgba(255,255,255,0.07); }
.videos .video-item:hover .item-more, .videos .video-item .item-more:focus-visible { opacity: 1; }
.videos .video-item .item-more svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.videos .video-item .item-more:hover { color: #fff; background: rgba(255,255,255,0.14); }
#projMenu { min-width: 200px; }

/* project rows, tidy: every picture sits in the same 56 x 70 frame (so the names line up), the whole frame of the video shown;
   under the name: the length, then the status as a small tinted tag */
.videos #videoList { gap: 2px; }
.videos .video-item { gap: 12px; padding: 7px 8px !important; border-radius: 12px; }
.videos .video-item .thumb { width: 56px; height: 70px; max-width: none; border-radius: 9px; display: grid; place-items: center; background: #141414; overflow: hidden; }
.videos .video-item .thumb img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.videos .video-item .thumb:empty { width: 56px; }
.videos .video-item .name { font-size: 14px; font-weight: 600; }
.videos .video-item .state { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: #8b8b8b; font-variant-numeric: tabular-nums; }
.videos .video-item .ready-tag { margin: 0; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: rgba(255,255,255,0.07); }
.videos .video-item .ready-tag::before { content: none; }
.videos .video-item .ready-tag[data-s="ready"] { color: #5fd38d; background: rgba(95,211,141,0.13); }
.videos .video-item .ready-tag[data-s="new"] { color: #b0b0b0; background: rgba(255,255,255,0.08); }

/* the project ... menu: exactly the top bar's ... menu (rows, icon column, text on the left) */
#projMenu { padding: 6px; border: 0 !important; border-radius: 14px; background: rgba(14,14,14,0.95) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none !important; min-width: 220px; }
#projMenu button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; font-size: 13px; font-weight: 500; color: #ededed; text-align: left; }
#projMenu button span { flex: 1; text-align: left; }
#projMenu button:hover:not(:disabled) { background: rgba(255,255,255,0.08); border: 0; }
#projMenu .sm-sep { height: 1px; margin: 5px 6px; background: rgba(255,255,255,0.06); }
#projMenu .danger, #projMenu .danger:hover:not(:disabled) { color: #e5888b; }
#projMenu .danger:hover:not(:disabled) { background: rgba(239,68,68,0.12); }
#projMenu .sm-ico { width: 16px; height: 16px; min-width: 16px; }
#projMenu .danger .sm-ico { stroke: #e5888b; }
#projMenu button.danger, #projMenu button.danger span { color: #f27478 !important; }
#projMenu button.danger .sm-ico { stroke: #f27478 !important; }
#projMenu button.danger:hover:not(:disabled) { background: rgba(242,116,120,0.14) !important; }

/* the length: top right of the row, in line with the name; the status tag sits alone under it */
.videos .video-item .name { align-items: center; justify-content: space-between; gap: 8px; }
.videos .video-item .name em { margin-left: auto; font-size: 12px; font-weight: 500; color: #8b8b8b; font-variant-numeric: tabular-nums; }
.videos .video-item .state { margin-top: 7px; }

/* moving a track: a coloured ghost follows the mouse, the old lane is dashed and dim, the drop line is a rounded bar in the track's colour with a dot at each end */
.tl-ghost { position: absolute; left: 54px; right: 16px; height: 22px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; pointer-events: none; z-index: 7; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(167,139,250,0.28); border: 1px solid rgba(167,139,250,0.7); box-shadow: 0 6px 18px rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tl-ghost[data-kind="zoom"] { background: rgba(250,204,21,0.26); border-color: rgba(250,204,21,0.75); }
.tl-ghost[data-kind="sound"] { background: rgba(74,222,128,0.24); border-color: rgba(74,222,128,0.7); }
.tl-ghost.hidden { display: none; }
.tl-drop { left: 50px; right: 12px; height: 4px; border-radius: 2px; background: #a78bfa; box-shadow: 0 0 10px rgba(167,139,250,0.7); }
.tl-drop[data-kind="zoom"] { background: #facc15; box-shadow: 0 0 10px rgba(250,204,21,0.7); }
.tl-drop[data-kind="sound"] { background: #4ade80; box-shadow: 0 0 10px rgba(74,222,128,0.7); }
.tl-drop::before, .tl-drop::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: inherit; }
.tl-drop::before { left: -4px; }
.tl-drop::after { right: -4px; }

/* no glow */
.tl-ghost { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tl-drop, .tl-drop[data-kind="zoom"], .tl-drop[data-kind="sound"] { box-shadow: none; }

/* the Add button in the play bar: a zoom, sound or overlay at the playhead, from right under the video */
.transport .stage-plus { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; margin-left: 2px; border: 0; border-radius: 9px; background: rgba(255,255,255,0.09); color: #f2f2f2; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.12s; }
.transport .stage-plus:hover { background: rgba(255,255,255,0.16); }
.transport .stage-plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* sound list play button: the icon dead centre (a global button rule had it pushed to the left) */
#soundPick .sp-row .play { display: flex !important; align-items: center; justify-content: center !important; }
#soundPick .sp-row .play .i-play { margin-left: 1px; }
#soundPick .sp-row .play .i-stop, #soundPick .sp-row .play.on .i-play { display: none !important; }
#soundPick .sp-row .play.on .i-stop { display: block !important; margin: 0; }

/* a video being worked on: one quiet line, a small spinner and the step, no wrapping */
.videos .video-item .state[data-s="busy"] { display: flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; padding: 3px 10px 3px 8px; border-radius: 7px; background: rgba(255,255,255,0.07); color: #cfcfcf; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.videos .video-item .state[data-s="busy"]::before { width: 10px; height: 10px; border: 2px solid rgba(255,255,255,0.18); border-top-color: #f2f2f2; }

/* the working screen: a small animated sound wave, the step, a quiet hint, a slim moving bar */
.analyzing { gap: 18px; }
.work-bars { display: flex; align-items: center; gap: 5px; height: 44px; }
.work-bars i { width: 5px; height: 100%; border-radius: 3px; background: #cfcfcf; transform-origin: center; animation: work-wave 1.1s ease-in-out infinite; }
.work-bars i:nth-child(2) { animation-delay: -0.9s; }
.work-bars i:nth-child(3) { animation-delay: -0.7s; }
.work-bars i:nth-child(4) { animation-delay: -0.5s; }
.work-bars i:nth-child(5) { animation-delay: -0.3s; }
@keyframes work-wave { 0%, 100% { transform: scaleY(0.25); opacity: 0.45; } 50% { transform: scaleY(1); opacity: 1; } }
.work-text { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.work-text b { font-size: 16px; font-weight: 600; color: #f2f2f2; letter-spacing: -0.01em; }
.work-text span { font-size: 12.5px; color: #7d7d7d; }
.work-text span:empty { display: none; }
.work-track { width: 180px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.work-track i { display: block; width: 35%; height: 100%; border-radius: 2px; background: #cfcfcf; animation: work-slide 1.6s cubic-bezier(0.45, 0, 0.35, 1) infinite; }
@keyframes work-slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

/* the working screen in the Ask AI / Captions look: soft card (white 4%), tile (white 7%), 12-14 px corners, white title, 40% grey hint */
.analyzing { padding: 28px 36px 30px; min-width: 300px; border-radius: 14px; background: rgba(255,255,255,0.04); gap: 18px; }
.work-bars { box-sizing: content-box; height: 30px; padding: 16px 22px; border-radius: 12px; background: rgba(255,255,255,0.07); }
.work-bars i { width: 4px; border-radius: 2px; background: #ededed; }
.work-text b { font-size: 16px; font-weight: 600; color: #ffffff; }
.work-text span { font-size: 13px; color: rgba(255,255,255,0.4); }
.work-track { width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); }
.work-track i { background: #ededed; }

/* the Set up your edit card in the Captions tab's look: the same swatch tiles, icon heading, grey labels, tile and field colours */
#aiSetup .cs-quick.cx-swatches { gap: 6px; margin: 0 0 16px; }
#aiSetup .cx-swatches .cs-q-view, #aiSetup .cx-swatches .cs-more-box { height: 44px; border-radius: 8px; }
#aiSetup .cx-swatches .cs-q-view { background: var(--x-field); border: 1px solid var(--x-edge); box-shadow: var(--x-lift); transition: background 0.12s, border-color 0.12s; }
#aiSetup .cx-swatches .cs-q:hover .cs-q-view { background: var(--x-field-hi); border-color: var(--x-edge-hi); }
#aiSetup .cx-swatches .cs-q.on .cs-q-view { box-shadow: var(--x-lift), inset 0 0 0 1px var(--x-text); border-color: var(--x-text); background: var(--x-on); }
#aiSetup .cx-swatches .cs-q:focus-visible .cs-q-view, #aiSetup .cx-swatches .cs-more:focus-visible .cs-more-box { border-color: var(--x-text-2); box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
#aiSetup .cx-swatches .cs-more-box { border: 1px dashed rgba(255,255,255,0.18); color: var(--x-text-2); }
#aiSetup .cx-swatches .cs-more-box svg { width: 16px; height: 16px; }
#aiSetup .cx-swatches .cs-more:hover .cs-more-box { border-color: rgba(255,255,255,0.4); color: var(--x-text); background: rgba(255,255,255,0.02); }
#aiSetup .cs-quick.cx-swatches { gap: 8px; margin-bottom: 12px; }
#aiSetup .cx-swatches .cs-q-view, #aiSetup .cx-swatches .cs-more-box { height: 56px; border-radius: 12px; }
#aiSetup .cx-swatches .cs-q-view { background: #1c1c1c; }
#aiSetup .cx-swatches .cs-q-view { background: linear-gradient(180deg, #1d1d1d, #161616); border: 1px solid rgba(255,255,255,0.06); transition: background 0.15s, border-color 0.15s, box-shadow 0.2s, transform 0.15s; }
#aiSetup .cx-swatches .cs-q:hover .cs-q-view { border-color: rgba(255,255,255,0.16); transform: translateY(-1px); }
#aiSetup .cx-swatches .cs-more:hover .cs-more-box { border-color: rgba(var(--acc-rgb), 0.7); color: #fff; }
#aiSetup .cx-swatches .cs-q.on .cs-q-view { background: #262626; border: 1.5px solid #f2f2f2; }
#aiSetup .cx-swatches .cs-q.on .cs-q-view { background: rgba(38,38,38,0.9) !important; }
#aiSetup .cx-swatches .cs-q:hover .cs-q-view { background: rgba(30,30,30,0.9) !important; }
#aiSetup .cx-swatches .cs-more-box { background: rgba(20,20,20,0.9); }
#aiSetup .cx-swatches .cs-more:hover .cs-more-box { background: rgba(30,30,30,0.9); }
#aiSetup .cx-swatches .cs-q.on .cs-q-view { background: #3a3a3a !important; }
#aiSetup .cx-swatches .cs-q-view, #aiSetup .cx-swatches .cs-more-box { background: var(--o-card) !important; }
#aiSetup .cx-swatches .cs-q:hover .cs-q-view, #aiSetup .cx-swatches .cs-more:hover .cs-more-box { background: var(--o-hover) !important; }
#aiSetup .cx-swatches .cs-q.on .cs-q-view { background: var(--o-on) !important; }
#aiSetup .cx-swatches .cs-more-box { flex-direction: row; gap: 6px; }
#aiSetup .cx-swatches .cs-more-box span { display: inline; font-size: 12.5px; font-weight: 600; color: inherit; }
#aiSetup .cx-swatches .cs-more-box svg { width: 15px; height: 15px; margin: 0; }
#aiSetup { padding: 18px; border: 0 !important; border-radius: 14px; background: var(--o-card) !important; }
#aiSetup .ix-head { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
#aiSetup .ix-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--o-ctl); }
#aiSetup .ix-ico svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#aiSetup .su-tile { height: 52px; border: 0 !important; border-radius: 12px; background: var(--o-card) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); color: var(--t-2); font-size: 13px; font-weight: 600; }
#aiSetup .su-tile:hover { background: var(--o-ctl) !important; color: #fff; }
#aiSetup .su-tile:has(input:checked) { background: var(--o-ctl) !important; box-shadow: none; color: #fff; }
#aiSetup .setup-label { margin: 0 0 8px; font-size: 13px !important; font-weight: 400; color: var(--t-2); }
#aiSetup .setup-label em { color: var(--t-3); }
#aiSetup .su-len .field-top span { font-weight: 400; color: var(--t-2); font-size: 13px; }
#aiSetup .su-len .field-top b { color: #fff; font-weight: 600; }
#aiSetup textarea { border: 0 !important; border-radius: 12px; background: var(--o-ctl) !important; color: #fff; }
#aiSetup .cs-quick.cx-swatches { margin-bottom: 18px; }
#aiSetup .ix-ico { width: 30px; height: 30px; border-radius: 9px; }
#aiSetup .ix-ico svg { width: 17px; height: 17px; }

/* ---- Set up your edit: the redesigned card — sections with room between them, bigger tiles, overlay upload ---- */
#aiSetup { padding: 24px 22px 26px; border-radius: 18px; }
#aiSetup .ix-head { margin: 0 0 22px; font-size: 16px; }
#aiSetup .su-sec { margin-top: 30px; }
#aiSetup .su-sec-h { margin: 0 0 12px 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-3); }
#aiSetup .su-sec-h em { margin-left: 6px; font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--t-3); opacity: 0.8; }
#aiSetup > .su-sec-h:first-of-type { margin-top: 0; }
#aiSetup .su-tiles { gap: 12px; margin-bottom: 0; }
#aiSetup .su-tile { height: 58px; padding: 0 16px; gap: 12px; border-radius: 14px; font-size: 13.5px; }
#aiSetup .su-tile.su-caps-only { grid-column: 1 / -1; }
#aiSetup .cs-quick.cx-swatches { gap: 12px; margin: 0; }
#aiSetup .su-len { margin: 0; padding: 4px 2px 0; }
#aiSetup .su-len .field-top { margin-bottom: 14px; }
#aiSetup textarea { min-height: 88px; padding: 14px 16px; line-height: 1.5; }
#aiSetup .su-ov-list:empty { display: none; }
#aiSetup .su-ov-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
#aiSetup .su-ov { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; border-radius: 14px; background: var(--o-ctl); }
#aiSetup .su-ov-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
#aiSetup .su-ov-top > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
#aiSetup .su-ov-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aiSetup .su-ov-del { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--t-2); cursor: pointer; }
#aiSetup .su-ov-del:hover { background: var(--o-hover); color: #fff; }
#aiSetup .su-ov-del svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
#aiSetup .su-ov-when { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 11px; background: rgba(0,0,0,0.28); }
#aiSetup .su-ov-when button { height: 32px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; color: var(--t-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#aiSetup .su-ov-when button:hover { color: #fff; }
#aiSetup .su-ov-when button.on { background: var(--o-on); color: #fff; }
#aiSetup .su-ov-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#aiSetup .su-ov-times.hidden { display: none; }
#aiSetup .su-ov-times label { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(0,0,0,0.28); font-size: 12.5px; color: var(--t-2); }
#aiSetup .su-ov-times input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; text-align: right; }
#aiSetup .su-ov-times i { font-style: normal; color: var(--t-3); }
#aiSetup .su-ov-add { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; border: 1.5px dashed rgba(255,255,255,0.18); border-radius: 14px;
  background: transparent; color: var(--t-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
#aiSetup .su-ov-add:hover { border-color: rgba(255,255,255,0.4); background: var(--o-card); color: #fff; }
#aiSetup .su-ov-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* overlay upload: a clear, filled button instead of a faint dashed box */
#aiSetup .su-ov-add { height: 64px; border: 1px solid rgba(255,255,255,0.22); background: var(--o-on); color: #fff; font-size: 14.5px; gap: 12px; }
#aiSetup .su-ov-add:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.4); }
#aiSetup .su-ov-add svg { box-sizing: content-box; width: 18px; height: 18px; padding: 7px; border-radius: 10px; background: #cfcfcf; stroke: #0a0a0a; stroke-width: 1.7; }

/* overlay upload: same look as the option tiles above it, with an icon chip like the card heading */
#aiSetup .su-ov-add { height: 58px; padding: 0 12px; justify-content: flex-start; gap: 12px; border: 0; border-radius: 14px; background: var(--o-card); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); font-size: 13.5px; }
#aiSetup .su-ov-add:hover { background: var(--o-ctl); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); color: #fff; }
#aiSetup .su-ov-add svg { width: 17px; height: 17px; padding: 8px; border-radius: 10px; background: var(--o-ctl); stroke: #fff; stroke-width: 1.5; }
#aiSetup .su-ov-add:hover svg { background: var(--o-on); }

/* option tiles: an icon chip that fills in when the option is on, dim text when off; Highlight words is a slimmer sub-option of Captions */
#aiSetup .su-tile { height: 64px; padding: 0 14px 0 12px; gap: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); color: var(--t-2); transition: background 0.15s, box-shadow 0.15s, color 0.15s; }
#aiSetup .su-tile svg { box-sizing: content-box; width: 18px; height: 18px; padding: 8px; border-radius: 11px; background: var(--o-ctl); stroke: rgba(255,255,255,0.6); stroke-width: 1.5; opacity: 1; transition: background 0.15s, stroke 0.15s; }
#aiSetup .su-tile:has(input:checked) { background: var(--o-ctl) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); color: #fff; }
#aiSetup .su-tile:has(input:checked) svg { background: #cfcfcf; stroke: #0a0a0a; }
#aiSetup .su-tile .su-check { width: 18px; height: 18px; border: 1.5px solid rgba(255,255,255,0.22); }
#aiSetup .su-tile.su-caps-only { height: 48px; margin-top: -2px; padding-left: 36px; background: transparent !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); font-weight: 500; }
#aiSetup .su-tile.su-caps-only svg { padding: 5px; border-radius: 8px; width: 16px; height: 16px; }
#aiSetup .su-tile.su-caps-only:has(input:checked) { background: var(--o-card) !important; }

/* notes counter, right side of the label row */
#aiSetup .su-sec-h:has(.su-count) { display: flex; align-items: baseline; }
#aiSetup .su-count { margin-left: auto; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; color: var(--t-3); }
#aiSetup .su-count.full { color: #f27478; }
#aiSetup #suBrief { resize: none; }

/* no borders anywhere in the setup card: shapes are told apart by fill only */
#aiSetup .su-tile, #aiSetup .su-tile:hover, #aiSetup .su-tile:has(input:checked), #aiSetup .su-tile.su-caps-only,
#aiSetup .su-ov-add, #aiSetup .su-ov-add:hover { border: 0 !important; box-shadow: none !important; }
#aiSetup .su-tile:hover { background: var(--o-ctl) !important; }
#aiSetup .su-tile .su-check { border: 0; background-color: rgba(255,255,255,0.1); }
#aiSetup .su-tile:has(input:checked) .su-check { background-color: #cfcfcf; }
#aiSetup .su-tile:focus-within { outline: 0; }
#aiSetup .su-tile:has(input:focus-visible) { background: var(--o-ctl) !important; }
#aiSetup .su-tile.su-caps-only { background: var(--o-card) !important; }
#aiSetup .su-ov { box-shadow: none; border: 0; }
#aiSetup textarea, #aiSetup textarea:focus { border: 0 !important; outline: 0; box-shadow: none; }

/* option tiles, third take: pill chips, white when on, grey when off; no check circles, no icon boxes */
#aiSetup .su-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
#aiSetup .su-tile, #aiSetup .su-tile.su-caps-only { flex: none; width: auto; height: 46px; margin: 0; padding: 0 20px 0 16px; gap: 9px; border-radius: 999px;
  background: var(--o-ctl) !important; color: rgba(255,255,255,0.6); font-size: 13.5px; font-weight: 600; }
#aiSetup .su-tile.su-caps-only { grid-column: auto; }
#aiSetup .su-tile:hover, #aiSetup .su-tile.su-caps-only:hover { background: var(--o-hover) !important; color: #fff; }
#aiSetup .su-tile svg, #aiSetup .su-tile.su-caps-only svg { width: 17px; height: 17px; padding: 0; border-radius: 0; background: none !important; stroke: currentColor !important; }
#aiSetup .su-tile span { flex: none; overflow: visible; }
#aiSetup .su-tile .su-check { display: none; }
#aiSetup .su-tile:has(input:checked), #aiSetup .su-tile.su-caps-only:has(input:checked) { background: #cfcfcf !important; color: #0a0a0a; }
#aiSetup .su-tile:has(input:checked) svg { stroke: #0a0a0a !important; }
#aiSetup .su-tile.hidden { display: none; }

/* narrow panel: the setup card shrinks with it instead of overflowing */
#aiScroll { container-type: inline-size; }
#aiSetup { min-width: 0; overflow: hidden; }
#aiSetup .su-tiles { min-width: 0; }
#aiSetup .su-tile { max-width: 100%; }
#aiSetup .su-tile span { white-space: nowrap; }
#aiSetup .cs-quick.cx-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
#aiSetup .cs-quick.cx-swatches > * { min-width: 0; }
#aiSetup .su-sec-h { white-space: nowrap; }
#aiSetup .su-ov-add span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 380px) {
  #aiSetup { padding: 18px 14px 20px; margin-left: 8px; margin-right: 8px; }
  #aiSetup .su-sec { margin-top: 24px; }
  #aiSetup .su-tiles { gap: 8px; }
  #aiSetup .su-tile, #aiSetup .su-tile.su-caps-only { height: 42px; padding: 0 14px 0 12px; font-size: 13px; }
  #aiSetup .su-ov-when { grid-template-columns: 1fr 1fr; }
  #aiSetup .su-ov-times { grid-template-columns: 1fr; }
}
@container (max-width: 300px) {
  #aiSetup .su-sec-h em { display: none; }
  #aiSetup .su-ov-add { padding: 0 10px; gap: 10px; }
}

/* chips use the same corner radius as the other setup options */
#aiSetup .su-tile, #aiSetup .su-tile.su-caps-only { border-radius: 12px; }
#aiSetup .su-ov-add, #aiSetup .su-ov { border-radius: 12px; }

/* max length: a filled card, the value as a chip, a thicker slider, quick picks */
#aiSetup .su-len { margin: 0; padding: 18px 18px 16px; border-radius: 12px; background: var(--o-card); }
#aiSetup .su-len .field-top { align-items: center; margin-bottom: 18px; }
#aiSetup .su-len .field-top span { font-size: 13.5px; font-weight: 600; color: #fff; }
#aiSetup .su-len .field-top b { padding: 5px 11px; border-radius: 8px; background: var(--o-ctl); font-size: 13px; font-weight: 600; color: #fff; }
#aiSetup .su-len input[type="range"] { height: 24px; }
#aiSetup .su-len input[type="range"]::-webkit-slider-runnable-track { height: 8px; }
#aiSetup .su-len input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -7px; }
#aiSetup .su-len-pre { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#aiSetup .su-len-pre button { height: 32px; padding: 0 13px; border: 0; border-radius: 8px; background: var(--o-ctl); color: var(--t-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
#aiSetup .su-len-pre button:hover { background: var(--o-hover); color: #fff; }
#aiSetup .su-len-pre button.on { background: #cfcfcf; color: #0a0a0a; }

/* max length, third take: one slim row, label left, a - 59s + stepper right */
#aiSetup .su-len { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; margin: 0; padding: 0 8px 0 18px; border-radius: 12px; background: var(--o-card); }
#aiSetup .su-len-l { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aiSetup .su-step { display: flex; align-items: center; flex: none; }
#aiSetup .su-step b { min-width: 68px; text-align: center; font-size: 13.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
#aiSetup .su-step button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--o-ctl); color: #fff; cursor: pointer; }
#aiSetup .su-step button:hover { background: var(--o-hover); }
#aiSetup .su-step button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* notes for the AI: above the Edit button, like the comment box (soft fill, no border, counter inside) */
.ai-foot .su-notes { display: none; position: relative; }
.ai-foot.pre-edit .su-notes { display: block; }
.su-notes textarea { display: block; width: 100%; min-height: 96px; max-height: 160px; padding: 14px 16px 34px; border: 0 !important; border-radius: 14px; outline: 0; resize: none;
  background: rgba(255,255,255,0.06) !important; color: #f2f2f2; font: inherit; font-size: 14px; line-height: 1.5; }
.su-notes textarea:focus { background: rgba(255,255,255,0.09) !important; }
.su-notes textarea::placeholder { color: #6b6b6b; }
.su-notes .su-count { position: absolute; right: 14px; bottom: 11px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.4); pointer-events: none; }
.su-notes .su-count.full { color: #f27478; }

/* the setup scrolls when the panel is short: fill all the free space first, show a slim scrollbar and a fade at the edge that still has more */
#aiScroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) transparent; }
#aiScroll::-webkit-scrollbar { width: 8px; }
#aiScroll::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(255,255,255,0.25); border: 2px solid transparent; background-clip: content-box; }
#aiScroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); background-clip: content-box; }
.su-notes textarea { min-height: 76px; }

/* overlay rows: a preview, the name, two ways to time it (at the product / when I say...) */
#aiSetup .su-ov { gap: 12px; }
#aiSetup .su-ov-thumb { flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 10px; background: rgba(0,0,0,0.35); }
#aiSetup .su-ov-thumb img, #aiSetup .su-ov-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
#aiSetup .su-ov-top > .su-ov-thumb svg { width: 20px; height: 20px; }
#aiSetup .su-ov-when { grid-template-columns: 1fr 1fr; }
#aiSetup .su-ov-hint { padding: 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--t-2); }
#aiSetup .su-ov-q { width: 100%; height: 42px; padding: 0 14px; border: 0; outline: 0; border-radius: 10px; background: rgba(0,0,0,0.28); color: #fff; font: inherit; font-size: 13.5px; }
#aiSetup .su-ov-q::placeholder { color: var(--t-3); }
#aiSetup .su-ov-res { display: flex; flex-direction: column; gap: 4px; }
#aiSetup .su-ov-res:empty { display: none; }
#aiSetup .su-ov-res button { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: rgba(0,0,0,0.22); color: var(--t-2); font: inherit; font-size: 12.5px; line-height: 1.4; text-align: left; cursor: pointer; }
#aiSetup .su-ov-res button:hover { background: var(--o-hover); color: #fff; }
#aiSetup .su-ov-res button i { flex: none; font-style: normal; font-variant-numeric: tabular-nums; color: var(--t-3); }
#aiSetup .su-ov-res button b { color: #fff; font-weight: 600; }
#aiSetup .su-ov-none { padding: 4px 2px; font-size: 12.5px; color: var(--t-3); }
#aiSetup .su-ov-at { display: flex; align-items: center; gap: 8px; padding: 0 2px; font-size: 12.5px; color: var(--t-2); }
#aiSetup .su-ov-at b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
#aiSetup .su-ov-at input { width: 54px; height: 30px; padding: 0 8px; border: 0; outline: 0; border-radius: 8px; background: rgba(0,0,0,0.28); color: #fff; font: inherit; font-size: 13px; font-weight: 600; text-align: right; }
#aiSetup .su-ov-at i { font-style: normal; color: var(--t-3); }

/* custom overlay: the button that opens the transcript popup */
#aiSetup .su-ov-pick { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(0,0,0,0.28); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
#aiSetup .su-ov-pick:hover { background: rgba(0,0,0,0.4); }
#aiSetup .su-ov-pick svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: 0.7; }
#aiSetup .su-ov-pick span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aiSetup .su-ov-pick b { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--t-2); }

/* the transcript popup, in the export popup's look: black box, big title, soft fields, no borders */
.ovp-back { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,0.6); }
.ovp { display: flex; flex-direction: column; width: min(600px, 100%); max-height: min(760px, 100%); padding: 0; border-radius: 20px; background: #000; overflow: hidden; }
.ovp-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 18px; }
.ovp-head b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: #ededed; }
.ovp-x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--t-2); cursor: pointer; transition: background 0.12s, color 0.12s; }
.ovp-x:hover { background: var(--o-ctl); color: #fff; }
.ovp-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ovp-search { display: flex; align-items: center; gap: 10px; height: 52px; margin: 0 20px 14px; padding: 0 16px; border-radius: 12px; background: var(--o-ctl); cursor: text; transition: background 0.12s, box-shadow 0.12s; }
.ovp-search:hover { background: var(--o-hover); }
.ovp-search:focus-within { background: var(--o-on); box-shadow: 0 0 0 3px rgba(255,255,255,0.06); }
.ovp-search svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--t-3); stroke-width: 1.6; stroke-linecap: round; }
.ovp-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #ededed; font: inherit; font-size: 15px; font-weight: 600; }
.ovp-search input::placeholder { color: var(--t-3); font-weight: 500; }
.ovp-text { flex: 1; min-height: 180px; margin: 0 20px; padding: 18px 20px; overflow-y: auto; border-radius: 14px; background: var(--o-card); font-size: 15px; line-height: 2.1; color: rgba(255,255,255,0.62); user-select: none; cursor: pointer; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }
.ovp-text span { padding: 3px 2px; border-radius: 6px; transition: background 0.1s, color 0.1s; }
.ovp-text span:hover { background: var(--o-on); color: #fff; }
.ovp-text span.hit { background: rgba(250,204,21,0.2); color: #facc15; }
.ovp-text span.on, .ovp-text span.on:hover { background: #dcdcdc; color: #0a0a0a; }
.ovp-foot { display: flex; align-items: center; gap: 12px; padding: 18px 20px 20px; }
.ovp-sum { flex: 1; min-width: 0; font-size: 13px; color: var(--t-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovp-sum b { margin-right: 10px; font-size: 15px; font-weight: 600; color: #f2f2f2; font-variant-numeric: tabular-nums; }
.ovp-done { flex: none; height: 44px; padding: 0 28px; border: 0; border-radius: 12px; background: #cfcfcf; color: #0a0a0a; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ovp-done:hover { background: #dcdcdc; }
@media (max-width: 460px) { .ovp-sum { display: none; } .ovp-done { flex: 1; } }

/* the scrollbar only appears when something really overflows: no arrow buttons, no track, and an empty chat list takes no room */
#aiScroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
#aiScroll::-webkit-scrollbar-track, #aiScroll::-webkit-scrollbar-corner { background: transparent; }
#aiList:empty { display: none; }
#tab-ai .ai-scroll { padding-bottom: 8px; }

/* Ask AI scrollbar: thicker, a track with its own background, a lighter handle, no arrows, inset from the top and bottom */
#aiScroll { scrollbar-width: auto; scrollbar-color: auto; }
#aiScroll::-webkit-scrollbar { width: 14px; }
#aiScroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
#aiScroll::-webkit-scrollbar-track { margin: 14px 0 14px; border-radius: 10px; background: rgba(255,255,255,0.06); }
#aiScroll::-webkit-scrollbar-thumb { min-height: 48px; border-radius: 10px; border: 3px solid transparent; background: rgba(255,255,255,0.4) padding-box; }
#aiScroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.6) padding-box; }

/* no scrollbar when the setup card fits: its bottom margin and the scroll area's bottom padding used to push it a few pixels past the edge */
#aiScroll, #tab-ai .ai-scroll { padding-bottom: 0 !important; }
#tab-ai #aiSetup, .panel #aiSetup { margin-bottom: 0 !important; }
#tab-ai .ai-foot { padding-top: 14px; }
#aiList:not(:has(*)) { display: none !important; }

/* overlay rows, compact: smaller preview, slimmer switch, no hint line, no text selection */
#aiSetup .su-ov { gap: 10px; padding: 12px 12px 12px 14px; user-select: none; }
#aiSetup .su-ov-top { gap: 12px; }
#aiSetup .su-ov-thumb { width: 38px; height: 38px; border-radius: 9px; }
#aiSetup .su-ov-name { font-size: 13px; }
#aiSetup .su-ov-del { width: 26px; height: 26px; }
#aiSetup .su-ov-when { gap: 3px; padding: 3px; border-radius: 10px; }
#aiSetup .su-ov-when button { height: 30px; font-size: 12.5px; border-radius: 8px; }
#aiSetup .su-ov-pick { height: 38px; padding: 0 12px; font-size: 13px; }

/* before the first AI edit the "Ask AI" title is hidden and the setup card sits at the very top */
#tab-ai:has(#aiSetup:not(.hidden)) .ai-scroll { padding-top: 12px !important; }
#tab-ai #aiSetup, .panel #aiSetup { margin-top: 0 !important; }

/* transcript search: bigger and thicker, one soft fill, no border of its own */
.ovp .ovp-search { height: 60px; padding: 0 20px; gap: 12px; border: 0 !important; border-radius: 14px; }
.ovp .ovp-search svg { width: 19px; height: 19px; }
.ovp .ovp-search input.ovp-q { height: 100%; padding: 0; border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; font-size: 16px; font-weight: 600; }

/* the remove X: the button had its default padding (5px 11px), which pushed the cross off centre */
#aiSetup .su-ov-del { padding: 0 !important; margin: 0; box-sizing: border-box; }
#aiSetup .su-ov-del svg { margin: 0; }

/* the timing choice is a dropdown on the name row: preview | name ... | At the product v | x */
#aiSetup .su-ov-when { display: none; }
#aiSetup .su-ov-mode { flex: none; width: 138px; height: 32px; padding: 0 30px 0 12px; border: 0; border-radius: 8px; outline: 0; cursor: pointer; color-scheme: dark;
  -webkit-appearance: none; appearance: none; background: rgba(0,0,0,0.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 9px center / 14px no-repeat;
  color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; }
#aiSetup .su-ov-mode:hover, #aiSetup .su-ov-mode:focus { background-color: rgba(0,0,0,0.42); }
#aiSetup .su-ov-top { gap: 10px; }
#aiSetup .su-ov-name { min-width: 0; }

/* transcript search: the same bar as "Search sounds" - one plain field, the text big, a clear X on the right */
.ovp .ovp-search { position: relative; display: block; height: auto; padding: 0; background: transparent; }
.ovp .ovp-search:hover, .ovp .ovp-search:focus-within { background: transparent; box-shadow: none; }
.ovp .ovp-search svg { display: none; }
.ovp .ovp-search input.ovp-q { display: block; width: 100%; height: 52px; padding: 0 48px 0 18px; border-radius: 14px !important; background: rgba(255,255,255,0.06) !important; color: #f2f2f2; font-size: 16px; font-weight: 500; transition: background 0.12s; }
.ovp .ovp-search input.ovp-q:hover, .ovp .ovp-search input.ovp-q:focus { background: rgba(255,255,255,0.09) !important; }
.ovp .ovp-search input.ovp-q::placeholder { color: rgba(255,255,255,0.4); font-weight: 500; }
.ovp .ovp-qx { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,0.55); cursor: pointer; }
.ovp .ovp-qx:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ovp .ovp-qx svg { display: block; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* the dropdown button and its menu (our own, not the browser's) */
#aiSetup .su-ov-mode { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 0 12px; background-image: none; }
#aiSetup .su-ov-mode span { white-space: nowrap; }
#aiSetup .su-ov-mode svg { flex: none; width: 14px; height: 14px; fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* the overlay dropdowns use the app's standard popup (.sel-menu); only the check mark and the size are theirs, and no drop shadow */
.ovm { z-index: 9100; width: max-content; max-width: calc(100vw - 16px); box-shadow: 0 0 0 0.8px var(--glass-edge, rgba(255,255,255,0.09)); }
.ovm button span { white-space: nowrap; }
.ovm button { gap: 14px; }
.ovm button svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.ovm button.on { color: #fff; }
.ovm button.on svg { visibility: visible; }

/* popup footer: the time chip and the hint share one centre line with the Done button */
.ovp .ovp-foot { align-items: center; padding: 16px 20px 20px; }
.ovp .ovp-sum { display: flex; align-items: center; gap: 12px; line-height: 1; }
.ovp .ovp-sum b { margin: 0; padding: 0 12px; display: inline-flex; align-items: center; height: 36px; border-radius: 10px; background: var(--o-ctl); font-size: 14px; line-height: 1; }

/* transcript popup alignment: one left edge (title, search, card, time chip) at 20px, one right edge, the same inner text start, 16px between blocks */
.ovp .ovp-head { padding: 22px 20px 16px; }
.ovp .ovp-x { margin-right: -10px; }
.ovp .ovp-search { margin: 0 20px 16px; }
.ovp .ovp-search input.ovp-q { padding: 0 48px 0 20px; }
.ovp .ovp-text { margin: 0 20px; padding: 18px 18px 18px 18px; scrollbar-width: auto; scrollbar-color: auto; line-height: 2.1; }
.ovp .ovp-foot { padding: 16px 20px 20px; }
/* scrollbar: no arrows, a soft track, a lighter handle */
.ovp .ovp-text::-webkit-scrollbar { width: 12px; }
.ovp .ovp-text::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.ovp .ovp-text::-webkit-scrollbar-track { margin: 8px 0; border-radius: 8px; background: transparent; }
.ovp .ovp-text::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid transparent; background: rgba(255,255,255,0.3) padding-box; }
.ovp .ovp-text::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5) padding-box; }

/* the AI is editing: the setup and the notes are greyed out and can't be changed */
#aiSetup, .su-notes { transition: opacity 0.2s; }
#aiSetup.locked, .su-notes.locked { opacity: 0.4; pointer-events: none; user-select: none; filter: saturate(0.5); }
.transport { transition: opacity 0.2s; }
.transport.locked { opacity: 0.4; pointer-events: none; user-select: none; filter: saturate(0.5); }

/* while the AI works: a bit more blur on the picture, the rest of the animation is the original */
.ai-working { -webkit-backdrop-filter: blur(9px) saturate(0.6); backdrop-filter: blur(9px) saturate(0.6); }

/* ---- the New edit page: the setup lives on the main page, before any video exists. No borders. */
#empty { display: block; overflow-y: auto; align-self: stretch; justify-self: stretch; padding: 40px 20px 56px; }
#empty > .drop { margin: 12vh auto 0; }
.newpage { width: 100%; }
.np-inner { width: 100%; max-width: 620px; margin: 0 auto; }
.np-title { margin: 0 0 22px; font-size: 28px; font-weight: 650; letter-spacing: -0.02em; color: #f2f2f2; }
.np-sub { margin: 0 0 22px; font-size: 14px; color: #8a8a8a; }
.np-card { display: flex; flex-direction: column; gap: 14px; }
.np-media { display: flex; flex-direction: column; gap: 8px; }
.np-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 190px; padding: 0 20px; border: 0 !important; border-radius: 18px; background: #161616; color: #8a8a8a; cursor: pointer; transition: background 0.15s; }
.np-drop:hover { background: #1c1c1c; }
.np-drop.has { height: 84px; flex-direction: row; gap: 12px; }
.np-drop b { font-size: 16px; font-weight: 600; color: #ececec; }
.np-drop > span:last-child { font-size: 13px; }
.np-drop.has > span:last-child { display: none; }
.np-stack { position: relative; display: block; width: 52px; height: 52px; margin-bottom: 6px; }
.np-drop.has .np-stack { width: 30px; height: 30px; margin: 0; }
.np-stack i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; background: #262626; }
.np-stack i:first-child { transform: rotate(-9deg) translateX(-6px); background: #1f1f1f; }
.np-stack svg { width: 55%; height: 55%; fill: none; stroke: #d8d8d8; stroke-width: 1.8; stroke-linecap: round; }
.np-files { display: flex; flex-direction: column; gap: 6px; }
.np-file { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 10px; border-radius: 12px; background: #161616; }
.np-file-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #232323; }
.np-file-ico svg { width: 16px; height: 16px; fill: none; stroke: #bdbdbd; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.np-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #e4e4e4; }
.np-file i { font-style: normal; font-size: 12px; color: #777; }
.np-file-x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0 !important; border-radius: 8px; background: transparent; }
.np-file-x:hover { background: #262626; }
.np-file-x svg { width: 13px; height: 13px; fill: none; stroke: #9a9a9a; stroke-width: 1.7; stroke-linecap: round; }
.newpage .setup { margin: 0; padding: 18px; border: 0 !important; border-radius: 18px; background: #161616; }
.newpage .su-notes { margin: 0; }
.np-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.np-more { height: 42px; padding: 0 16px; border: 0 !important; border-radius: 12px; background: #161616; color: #bdbdbd; }
.np-more:hover { background: #1e1e1e; }
.np-go { height: 46px; padding: 0 28px; border-radius: 13px; font-size: 15px; font-weight: 650; }
.np-go:disabled { opacity: 0.4; cursor: default; }
/* the caption style picker, opened from the page: a centered window */
.cs.as-modal { position: fixed; inset: auto; left: 50%; top: 50%; width: min(560px, calc(100vw - 24px)); height: min(680px, calc(100vh - 24px)); margin: 0; transform: translate(-50%, -50%) !important; z-index: 200; }

/* New edit page: media card, then one setup card holding the options and the notes */
.newpage { --o-card: rgba(255,255,255,0.04); --o-ctl: rgba(255,255,255,0.07); --o-hover: rgba(255,255,255,0.10); --o-on: rgba(255,255,255,0.16); --t-2: rgba(255,255,255,0.5); --t-3: rgba(255,255,255,0.4);
  --x-field: #1c1c1c; --x-field-hi: #232323; --x-on: #2a2a2a; --x-edge: rgba(255,255,255,0.07); --x-edge-hi: rgba(255,255,255,0.14); --x-lift: inset 0 1px 0 rgba(255,255,255,0.04); --x-text: #ededed; --x-text-2: #a1a1a1; --x-text-3: #6e6e6e; }
.newpage #aiSetup { margin: 0; padding: 22px; border-radius: 18px; }
.newpage #aiSetup { background: #121212 !important; }
.newpage #aiSetup .su-notes { position: relative !important; }
/* the page starts with only "Add media"; the options show once a video is added */
.newpage:not(.has-media) #aiSetup, .newpage:not(.has-media) #npGo { display: none !important; }
/* picked videos: a grid of previews, like attachments in a chat */
.np-files { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.np-files.hidden { display: none !important; }
.np-file { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; height: auto; padding: 0; background: none; min-width: 0; }
.np-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #161616; display: grid; place-items: center; }
.np-thumb > svg { width: 28px; height: 28px; fill: none; stroke: #5d5d5d; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.np-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.2s; }
.np-thumb video.ok { opacity: 1; }
.np-thumb .np-file-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.12s; }
.np-thumb .np-file-x:hover { background: rgba(0,0,0,0.85); }
.np-thumb .np-file-x svg { stroke: #fff; }
.np-file:hover .np-file-x, .np-file-x:focus-visible { opacity: 1; }
.np-file .np-file-name { flex: none; padding: 6px 2px 0; font-size: 12.5px; }
.np-file > i { padding: 0 2px; font-size: 11.5px; }
/* picked videos: one scrollable row, each tile in its video's own shape */
.np-files { display: flex !important; flex-direction: row; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 0 0 10px; grid-template-columns: none; scrollbar-width: thin; scrollbar-color: #2e2e2e transparent; }
.np-files.hidden { display: none !important; }
.np-file { flex: none; width: auto; }
.np-thumb { height: 150px; width: auto; aspect-ratio: 9 / 16; border-radius: 12px; }
.np-file .np-file-name { max-width: 100%; width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.np-file { align-items: flex-start; }
.np-file .np-file-name, .np-file > i { align-self: stretch; }
/* the video row: slim rounded scrollbar, no arrows; calmer tiles */
.np-files { scrollbar-width: auto !important; scrollbar-color: auto !important; padding: 2px 2px 14px; gap: 12px; }
.np-files::-webkit-scrollbar { height: 8px; }
.np-files::-webkit-scrollbar-track { background: transparent; margin: 0 2px; }
.np-files::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 8px; }
.np-files::-webkit-scrollbar-thumb:hover { background: #3d3d3d; }
.np-files::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.np-thumb { height: 164px; border-radius: 14px; background: #1a1a1a; transition: transform 0.15s, filter 0.15s; }
.np-file:hover .np-thumb { filter: brightness(1.08); }
.np-file .np-file-name { padding: 8px 2px 0; font-size: 12.5px; font-weight: 500; color: #e6e6e6; }
.np-file > i { padding: 1px 2px 0; font-size: 11.5px; color: #6f6f6f; }
.newpage #aiSetup .su-notes { margin-top: 22px; }
/* attachments, chat-style: the row is a card, each video a smaller card with its picture, name and size inside */
.np-files { padding: 14px 14px 20px !important; gap: 10px !important; border-radius: 18px; background: #121212; }
.np-file { padding: 8px 8px 10px; border-radius: 14px; background: #1b1b1b; }
.np-thumb { height: 136px !important; border-radius: 10px !important; background: #141414 !important; }
.np-file .np-file-name { padding: 9px 2px 0 !important; font-size: 12px !important; font-weight: 500; line-height: 1.3; }
.np-file > i { padding: 2px 2px 0 !important; font-size: 11px !important; }
.np-thumb .np-file-x { top: 5px !important; right: 5px !important; width: 22px !important; height: 22px !important; border-radius: 7px !important; background: rgba(20,20,20,0.85) !important; }
.np-thumb .np-file-x svg { width: 10px !important; height: 10px !important; stroke: #e8e8e8; }
.np-thumb .np-file-x:hover { background: #f27478 !important; }
.np-thumb .np-file-x:hover svg { stroke: #fff; }
/* the row card holds a scroller inside its padding, so the scrollbar lines up with the tiles */
.np-files { display: block !important; overflow: hidden !important; padding: 14px !important; }
.np-files.hidden { display: none !important; }
.np-row { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 14px; }
.np-row::-webkit-scrollbar { height: 8px; }
.np-row::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 8px; }
.np-row::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 8px; }
.np-row::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
.np-row::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* caption looks on the New project page: the Captions tab's look, two to a row */
.newpage #aiSetup .cs-quick.cx-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.newpage #aiSetup .cx-swatches .cs-q-view, .newpage #aiSetup .cx-swatches .cs-more-box { height: 64px; border: 0 !important; border-radius: 12px; box-shadow: none !important; transform: none !important; }
.newpage #aiSetup .cx-swatches .cs-q-view, .newpage #aiSetup .cx-swatches .cs-more-box { background: var(--o-card) !important; }
.newpage #aiSetup .cx-swatches .cs-q:hover .cs-q-view, .newpage #aiSetup .cx-swatches .cs-more:hover .cs-more-box { background: var(--o-hover) !important; }
.newpage #aiSetup .cx-swatches .cs-q.on .cs-q-view { background: var(--o-on) !important; }
.newpage #aiSetup .cx-swatches .cs-more-box { color: var(--t-2); }
.newpage #aiSetup .cx-swatches .cs-more:hover .cs-more-box { color: #fff; }
/* New project page: the side panel's layers (card 4%, control 7%, hover 10%, picked 16%) */
.newpage #aiSetup, .newpage .np-drop, .newpage .np-files { background: var(--o-card) !important; }
.newpage .np-drop:hover { background: var(--o-ctl); }
.newpage .np-file { background: var(--o-ctl); }
.newpage .np-thumb { background: rgba(0,0,0,0.25) !important; }
.newpage #aiSetup .cx-swatches .cs-q-view, .newpage #aiSetup .cx-swatches .cs-more-box, .newpage #aiSetup .su-len, .newpage #aiSetup .su-notes textarea { background: var(--o-ctl) !important; }
.newpage #aiSetup .cx-swatches .cs-q:hover .cs-q-view, .newpage #aiSetup .cx-swatches .cs-more:hover .cs-more-box { background: var(--o-hover) !important; }
.newpage #aiSetup .su-notes textarea:focus { background: var(--o-hover) !important; }
.newpage .np-more { background: var(--o-card); }
.newpage .np-more:hover { background: var(--o-ctl); }
/* two looks and "View all" in one row (the 3rd slot still takes a look picked from the full list) */
.newpage #aiSetup .cs-quick.cx-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.newpage #aiSetup .cs-quick.cx-swatches > .cs-q:nth-child(2) { display: none; }
.newpage #aiSetup .cx-swatches .cs-q-view, .newpage #aiSetup .cx-swatches .cs-more-box { height: 56px; }
/* unpicked looks sit darker than the picked one */
.newpage #aiSetup .cx-swatches .cs-q:not(.on) .cs-q-view, .newpage #aiSetup .cx-swatches .cs-more-box { background: rgba(255,255,255,0.035) !important; }
.newpage #aiSetup .cx-swatches .cs-q:not(.on) .cs-q-view > *  { opacity: 0.7; }
.newpage #aiSetup .cx-swatches .cs-q:not(.on):hover .cs-q-view, .newpage #aiSetup .cx-swatches .cs-more:hover .cs-more-box { background: rgba(255,255,255,0.07) !important; }
.newpage #aiSetup .cx-swatches .cs-q:not(.on):hover .cs-q-view > * { opacity: 1; }
/* AI is editing: same animation, a calmer and more readable label */
.aw-label { width: min(300px, 80%); }
.aw-label b { font-size: 20px !important; font-weight: 650; letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0,0,0,0.6); }
.aw-bar { height: 5px; margin: 16px 0 14px; border-radius: 5px; background: rgba(255,255,255,0.14); }
.aw-bar i { border-radius: 5px; }
.aw-step { font-size: 13px !important; font-weight: 500; color: rgba(255,255,255,0.62); text-shadow: 0 1px 12px rgba(0,0,0,0.7); }
.aw-pct { font-size: 15px !important; }
/* the side panel while the AI edits: greyed out, untouchable */
#panel { transition: opacity 0.2s, filter 0.2s; }
body.ai-busy #panel { opacity: 0.4; filter: grayscale(1); pointer-events: none; user-select: none; }
/* AI is editing label: an icon, a quiet title, a slim track with a soft moving light, one status line */
.aw-label { width: min(260px, 80%); gap: 0; }
.aw-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 14px; background: rgba(255,255,255,0.1); animation: aw-ico 2.4s ease-in-out infinite; }
.aw-ico svg { width: 22px; height: 22px; fill: #cfcfcf; stroke: none; }
@keyframes aw-ico { 0%, 100% { transform: scale(1); background: rgba(255,255,255,0.1); } 50% { transform: scale(1.06); background: rgba(255,255,255,0.18); } }
.aw-label b { font-size: 16px !important; font-weight: 600; letter-spacing: 0; }
.aw-bar { height: 4px; margin: 14px 0 12px; border-radius: 4px; background: rgba(255,255,255,0.12); }
.aw-bar i { border-radius: 4px; background: linear-gradient(90deg, rgba(207,207,207,0), #cfcfcf 45%, #cfcfcf); }
.aw-step { font-size: 12.5px !important; font-weight: 500; color: rgba(255,255,255,0.6); }
.aw-pct { font-size: 13px !important; }
@media (prefers-reduced-motion: reduce) { .aw-ico { animation: none; } }
/* the icon: a loading ring with the sparkle inside */
.aw-ico { position: relative; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%; background: none; animation: none; }
.aw-ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 2.5; animation: aw-spin 1.4s linear infinite; }
.aw-ring .t { stroke: rgba(255,255,255,0.14); }
.aw-ring .a { stroke: #cfcfcf; stroke-linecap: round; stroke-dasharray: 46 112; }
.aw-ico .aw-star { position: relative; width: 22px; height: 22px; fill: #fff; animation: aw-twinkle 2.4s ease-in-out infinite; }
@keyframes aw-spin { to { transform: rotate(360deg); } }
@keyframes aw-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.65; transform: scale(0.92); } }
@media (prefers-reduced-motion: reduce) { .aw-ring, .aw-ico .aw-star { animation: none; } }
/* the progress is the ring (spinning for the AI, filling for export / upload); the flat bar is gone */
.aw-bar { display: none !important; }
.aw-label .aw-row { margin-top: 0; }
.aw-label .aw-step { margin-top: 10px; }
.aw-ico svg.aw-ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 2.5; }
.aw-ico svg.aw-ring circle { fill: none; }
.aw-ico svg.aw-star { position: relative; width: 22px; height: 22px; fill: #fff; stroke: none; }
.aw-ico.det .aw-ring { animation: none; transform: rotate(-90deg); }
.aw-ico.det .aw-ring .a { transition: stroke-dasharray 0.3s ease; }
.topbar #render[inert], .topbar #trainSave[inert], .topbar #moreBtn[inert] { opacity: 0.4; filter: grayscale(1); pointer-events: none; }
/* AI is editing icon, finer: bigger disc, soft inner glow, a tail on the spinning arc */
.aw-ico { width: 76px; height: 76px; margin-bottom: 18px; background: radial-gradient(circle, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 70%); box-shadow: 0 0 36px rgba(255,255,255,0.08); }
.aw-ico svg.aw-ring { stroke-width: 2.2; }
.aw-ring .t { stroke: rgba(255,255,255,0.12); }
.aw-ring .a { stroke: url(#awg); stroke-dasharray: 100 157; }
.aw-ico.det .aw-ring .a { stroke: #cfcfcf; }
.aw-ico svg.aw-star { width: 28px; height: 28px; filter: drop-shadow(0 0 8px rgba(255,255,255,0.45)); }
.aw-label b { font-size: 17px !important; }
.aw-label .aw-step { margin-top: 8px; }
/* copy of the reference: a plain ring (faint track, brighter arc), a thin line icon inside, title, one line under */
.aw-ico { width: 80px; height: 80px; margin-bottom: 22px; background: none; box-shadow: none; }
.aw-ico svg.aw-ring { stroke-width: 3; }
.aw-ring .t { stroke: rgba(255,255,255,0.22); }
.aw-ring .a { stroke: rgba(255,255,255,0.9); stroke-dasharray: 40 157; }
.aw-ico.det .aw-ring .a { stroke: rgba(255,255,255,0.9); }
.aw-ico svg.aw-star { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: none; animation: none; }
.aw-label b { font-size: 17px !important; font-weight: 600; }
.aw-label .aw-step { margin-top: 10px; font-size: 14px !important; font-weight: 500; color: rgba(255,255,255,0.6); }
/* AI is editing background, finer: small dots fading out toward the edges, a wide soft light that lights them as it passes */
.aw-dots { background-image: radial-gradient(rgba(255,255,255,0.2) 0.7px, transparent 1.2px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.12) 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.12) 100%); }
.aw-dots::after { background-image: radial-gradient(rgba(167,243,208,1) 0.8px, transparent 1.4px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(105deg, transparent 20%, #000 50%, transparent 80%); mask-image: linear-gradient(105deg, transparent 20%, #000 50%, transparent 80%);
  animation-duration: 3.8s; }
.aw-sweep { width: 90%; left: -90%; filter: blur(14px);
  background: linear-gradient(105deg, transparent, rgba(45,212,191,0.07) 30%, rgba(74,222,128,0.16) 50%, rgba(45,212,191,0.07) 70%, transparent);
  animation: aw-sweep3 3.8s cubic-bezier(0.45, 0, 0.35, 1) infinite; }
@keyframes aw-sweep3 { from { left: -90%; } to { left: 100%; } }
.ai-working { background: rgba(8,8,8,0.55); }
.aw-ico svg.aw-star { width: 28px; height: 28px; stroke-width: 1.5; }
/* a running job's chip is as wide as its text, so the "..." button never sits on top of it */
.videos .video-item .state[data-s="busy"] { width: fit-content; max-width: calc(100% - 38px); }
/* a video from the New project page: while it gets ready, the screen already looks like the AI edit */
.analyzing.as-ai { padding: 0; min-width: 0; height: 100%; background: none; justify-content: center; }
.analyzing.as-ai > .work-bars, .analyzing.as-ai > .work-text, .analyzing.as-ai > .work-track { display: none; }
.an-frame { position: relative; display: none; height: min(100%, 720px); max-width: 100%; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: #111; }
.analyzing.as-ai .an-frame { display: block; }
.an-thumb, .an-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.an-frame .ai-working { display: block; animation: none; }
body.no-project #more { display: none; }
/* the status line wraps instead of being cut off in a narrow frame */
.aw-label { max-width: 92%; }
.aw-label .aw-step { white-space: normal; text-align: center; }
.aw-label b { white-space: normal; }
/* the queue, above the project list */
.queue-note { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); font-size: 12px; color: #a1a1a1; font-variant-numeric: tabular-nums; }
.queue-note.hidden, .queue-note button.hidden { display: none; }
.queue-note span { flex: 1; min-width: 0; }
.video-item .state[data-q]::before { display: none !important; }   /* waiting, not working: no spinner */
.queue-note button { height: 24px; padding: 0 9px; border: 0 !important; border-radius: 7px; background: rgba(255,255,255,0.07); font-size: 11.5px; color: #d8d8d8; cursor: pointer; }
.queue-note button:hover { background: rgba(255,255,255,0.12); }
/* upload progress on the New project page: on each video, and in the Add media card */
.np-prog { position: absolute; inset: 0; display: none; place-items: center; background: rgba(0,0,0,0.55); font-size: 13px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.np-prog.on { display: grid; }
.np-prog.bad { color: #f27478; }
.np-pct { display: none; }
.np-bar { display: none; grid-area: bar; width: 100%; height: 6px; margin-top: 14px; border-radius: 6px; background: rgba(255,255,255,0.1); overflow: hidden; }
.np-bar > i { display: block; width: 0; height: 100%; border-radius: 6px; background: #cfcfcf; transition: width 0.25s ease; }
.np-drop.up .np-bar { display: block; }
/* while uploading: what is going on at the left, the batch's percent at the right, the bar across the whole card */
.np-drop.up, .np-drop.up.has { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title pct" "file pct" "bar bar"; align-content: center; column-gap: 16px; row-gap: 2px; height: auto; min-height: 84px; padding: 18px 22px; text-align: left; }
.np-drop.up b { grid-area: title; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.np-drop.up .np-pct { display: block; grid-area: pct; align-self: center; font-size: 24px; font-weight: 600; font-style: normal; letter-spacing: -0.01em; color: #ececec; font-variant-numeric: tabular-nums; }
.np-drop.up.has > span:last-of-type { display: block; grid-area: file; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #8a8a8a; }
.np-drop.up .np-stack { display: none; }
/* AI is editing: everything scales with the size of the picture it sits on */
.ai-working { container-type: size; }
.aw-label { width: 86cqw; max-width: 86cqw; }
.aw-ico { width: clamp(40px, 34cqw, 80px); height: clamp(40px, 34cqw, 80px); margin-bottom: clamp(8px, 5cqw, 18px); }
.aw-ico svg.aw-star { width: 34%; height: 34%; }
.aw-label b { font-size: clamp(12px, 7.2cqw, 17px) !important; line-height: 1.25; text-wrap: balance; }
.aw-label .aw-step { font-size: clamp(10px, 5cqw, 14px) !important; margin-top: clamp(4px, 2.5cqw, 10px); line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
@container (max-height: 260px) { .aw-ico { display: none; } }
/* project list: the busy chip may wrap onto two lines, and the ... button sits at the top so it never covers it */
.videos .video-item .state[data-s="busy"] { width: auto; max-width: 100%; flex-wrap: wrap; white-space: normal; row-gap: 3px; }
.videos .video-item .item-del { top: 12px !important; transform: none !important; }
/* the ring's number: an estimate of how far the AI is (replaces the icon once it is above 0) */
.aw-ico .aw-num { display: none; position: relative; font-size: clamp(10px, 7.6cqw, 17px) !important; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; }
.aw-ico.num .aw-num { display: block; }
.aw-ico.num .aw-star { display: none; }
.aw-ico.num .aw-ring .a { transition: stroke-dasharray 0.9s linear; }
/* the projects column when it is dragged very narrow: everything stacks and wraps instead of being cut off */
.videos { container-type: inline-size; container-name: side; min-width: 0; }
.brand { min-width: 0; overflow: hidden; }
@container side (max-width: 168px) {
  .side-head { flex-wrap: wrap; gap: 6px; }
  .side-head .side-title { margin: 2px 4px 0; }
  .videos .video-item { flex-direction: column; align-items: stretch; gap: 8px; }
  .videos .video-item .thumb { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; }
  .videos .video-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
  .videos .video-item .item-text { width: 100%; min-width: 0; }
  .videos .video-item .name { flex-wrap: wrap; gap: 2px 6px; }
  .videos .video-item .name span { white-space: normal; overflow-wrap: anywhere; }
  .videos .video-item .state { flex-wrap: wrap; white-space: normal; }
  .storage .st-top { flex-direction: column; gap: 2px; }
  .storage .st-top b { white-space: normal; overflow-wrap: anywhere; }
}
@container side (max-width: 110px) {
  .side-head .side-title { display: none; }
  .videos .video-item .name em { display: none; }
  .storage { padding: 8px 6px; }
}

/* ---- Ask AI transcript window: the Transcript tab's look (red struck cut words, amber key words, soft playhead word) + a search box */
#tab-ai .peek-text { color: #e5e5e5; }
#tab-ai .peek-text .pw { padding: 3px 1px; border-radius: 4px; }
#tab-ai .peek-text .pw.past { color: inherit; }
#tab-ai .peek-text .pw:hover { background: rgba(255,255,255,0.07); }
#tab-ai .peek-text .pw.cut { color: #9a5254; text-decoration: line-through; text-decoration-color: rgba(229,72,77,0.6); text-decoration-thickness: 1px; }
#tab-ai .peek-text .pw.cut:hover { color: #c06a6d; }
#tab-ai .peek-text .pw.hl { color: #f5b82e; font-weight: 600; }
#tab-ai .peek-text .pw.hl.now { color: #f5b82e; }
#tab-ai .peek-text .pw.sel { background: rgba(255,255,255,0.2); color: #fff; }
#tab-ai .peek-text .pw.hit { background: rgba(245,184,46,0.28); color: #fff; }
.peek-search { flex: 1; min-width: 0; max-width: 190px; margin-left: auto; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 9px; background: rgba(255,255,255,0.08); transition: background 0.12s; }
.peek-search:focus-within { background: rgba(255,255,255,0.14); }
.peek-search svg { flex: none; width: 13px; height: 13px; fill: none; stroke: #a1a1a1; stroke-width: 1.7; stroke-linecap: round; }
.peek-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #f2f2f2; font: inherit; font-size: 12.5px; }
.peek-search input::placeholder { color: #a1a1a1; }
.peek-search input::-webkit-search-cancel-button { display: none; }
.peek-count { flex: none; font-size: 11px; color: #8a8a8a; font-variant-numeric: tabular-nums; }
#tab-ai .peek-close { margin-left: 0; }
.peek-hint { display: none; }

/* Pro view: only its own canvas; the Basic timeline's gutter controls, drop line and playhead grip stay hidden */
body.view-pro #tlCtls, body.view-pro #playGrip, body.view-pro .tl-drop { display: none !important; }

/* our own confirm / prompt dialog (askDialog): the Export popup's look */
.dlg-back { --o-card: rgba(255,255,255,0.04); --o-ctl: rgba(255,255,255,0.07); --o-hover: rgba(255,255,255,0.10); --o-on: rgba(255,255,255,0.16); --t-2: rgba(255,255,255,0.5); --t-3: rgba(255,255,255,0.4); z-index: 400; animation: dlgFade 0.12s ease-out; }
.dlg-back .modal-box.dlg { width: min(460px, 100%); max-height: min(640px, 100%); padding: 0; border: 0; border-radius: 20px; background: #000; overflow: hidden; box-shadow: none; animation: dlgPop 0.14s ease-out; }
.dlg .dlg-body { padding: 0 20px 22px; overflow: visible; }
.dlg .dlg-text { margin: 0 0 4px; font-size: 14px; line-height: 1.55; color: var(--t-2); }
.dlg .dlg-text[hidden], .dlg .dlg-field[hidden], .dlg .dlg-rows[hidden] { display: none; }
.dlg .dlg-field { margin: 4px 0 0; }
.dlg .dlg-rows { margin-top: 14px; }
.dlg .dlg-row { min-height: 68px; padding-right: 12px; }
.dlg .dlg-row .grow-label { display: flex; flex-direction: column; gap: 3px; }
.dlg .dlg-row i { font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--t-2); }
.dlg .dlg-act { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: #cfcfcf; color: #0a0a0a; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.12s; }
.dlg .dlg-act:hover:not(:disabled) { background: #dcdcdc; }
.dlg .dlg-act:disabled { opacity: 0.5; cursor: default; }
.dlg .dlg-act.done { background: var(--o-on); color: #f2f2f2; opacity: 1; }
.dlg .dlg-foot .dlg-gap { flex: 1; }
.dlg .dlg-ok.danger { background: #e5484d; border-color: #e5484d; color: #fff; }
.dlg .dlg-ok.danger:hover { background: #f0585d; }
.dlg .dlg-x:focus-visible, .dlg .dlg-act:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 2px; }
@keyframes dlgFade { from { opacity: 0; } }
@keyframes dlgPop { from { opacity: 0; transform: scale(0.97) translateY(6px); } }

/* Basic timeline: each track's name sits next to its grip and + in the gutter (no track tags like A1) */
#timelineScroll { margin-left: 128px; }
.tl-ctl { width: 122px; }
.tl-ctl .tl-name { flex: 1; min-width: 0; margin-left: 8px; font-size: 12px; font-weight: 500; color: #8b8b8b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tl-ctl .tl-sp { flex: none; width: 36px; height: 22px; }
.tl-drop { left: 8px; }

/* Transcript tab: the same tools and playhead word as the Ask AI transcript window */
.tr-tools { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.tr-tools .peek-search { max-width: none; margin-left: 0; height: 36px; border-radius: 10px; }
.tr-tools .peek-search input { font-size: 13.5px; }
.tr-tools .peek-cuts { margin-left: auto; flex: none; gap: 8px; white-space: nowrap; cursor: pointer; }
.tr-tools .peek-cuts > span:first-child { font-size: 12px; font-weight: 500; color: #8a8a8a; }
.tr-tools .peek-cuts:hover > span:first-child { color: #e5e5e5; }
#transcript:not(.show-cut) .w.cut { display: none; }
#transcript .w.hit { background: rgba(245,184,46,0.28); color: #fff; }
/* the word being said: the same light pill in the comment window and the tab */

/* ---- Transcript tab, polished: roomy text, soft cards, and the playhead as a yellow line over a soft yellow word */
#tab-transcript .tr-bar { margin: 0 0 12px; padding: 16px 18px; border: 0; border-radius: 14px; background: rgba(255,255,255,0.05); }
#tab-transcript .tr-how { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #a8a8a8; }
#tab-transcript .tr-bar .tr-keys { gap: 8px 18px; }
#tab-transcript .tr-keys span { gap: 8px; font-size: 13px; color: #8f8f8f; }
#tab-transcript .tr-bar .tr-keys kbd { padding: 6px 8px; min-width: 28px; border-radius: 7px; background: rgba(255,255,255,0.08); border: 0; text-align: center; }
#tab-transcript .tr-tools { gap: 16px; margin: 0 0 18px; }
#tab-transcript .tr-tools .peek-search { max-width: none; flex: 1; height: 44px; padding: 0 14px; gap: 10px; border-radius: 12px; background: rgba(255,255,255,0.07); }
#tab-transcript .tr-tools .peek-search:focus-within { background: rgba(255,255,255,0.12); }
#tab-transcript .tr-tools .peek-search svg { width: 15px; height: 15px; }
#tab-transcript .tr-tools .peek-search input { font-size: 14.5px; }
#tab-transcript .tr-tools .peek-cuts > span:first-child { font-size: 13px; }
#tab-transcript .transcript { padding: 4px 6px 28px; font-size: 16.5px; line-height: 2.05; letter-spacing: -0.003em; color: #ececec; word-spacing: 0.04em; }
#tab-transcript .transcript .w { position: relative; padding: 3px 2px; border-radius: 6px; }
#tab-transcript .transcript .w.cut { color: #b0585b; text-decoration-color: rgba(229,72,77,0.65); }
#tab-transcript .transcript .w.hl { color: #f5b82e; font-weight: 600; }
#tab-transcript .transcript .w.sel { background: rgba(255,255,255,0.18); color: #fff; }
#tab-transcript .transcript .w.hit { background: rgba(245,184,46,0.28); color: #fff; }
#tab-transcript .transcript .w.now { background: rgba(250,204,21,0.2); color: #fde68a; font-weight: 600; }
#tab-transcript .transcript .w.now::after, #tab-transcript .transcript .w.next::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: #facc15; pointer-events: none; }
#tab-transcript .transcript .w.now::after { left: clamp(1px, var(--prog, 0%), calc(100% - 3px)); }
#tab-transcript .transcript .w.next::before { left: -3px; }

/* ---- Transcript tab top: a clear how-to, four equal shortcut tiles, and the search + cut switch as one aligned row */
#tab-transcript .tr-bar { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
#tab-transcript .tr-how { margin: 0; display: flex; flex-direction: column; gap: 3px; }
#tab-transcript .tr-how b { font-size: 15px; font-weight: 600; color: #f2f2f2; letter-spacing: -0.01em; }
#tab-transcript .tr-how span { font-size: 13px; color: #8f8f8f; }
#tab-transcript .tr-bar .tr-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#tab-transcript .tr-keys span { flex-direction: column; justify-content: center; gap: 8px; min-height: 68px; padding: 10px 6px; border-radius: 12px; background: rgba(255,255,255,0.05); font-size: 12.5px; font-weight: 500; color: #a8a8a8; text-align: center; white-space: nowrap; }
#tab-transcript .tr-bar .tr-keys kbd { min-width: 38px; padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,0.12); font-size: 13px !important; color: #fff; }
#tab-transcript .tr-tools { display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 10px; margin: 0 0 18px; }
#tab-transcript .tr-tools .peek-search { height: 46px; margin: 0; }
#tab-transcript .tr-tools .peek-cuts { margin: 0; height: 46px; padding: 0 14px 0 16px; border-radius: 12px; background: rgba(255,255,255,0.07); gap: 12px; align-items: center; transition: background 0.12s; }
#tab-transcript .tr-tools .peek-cuts:hover { background: rgba(255,255,255,0.11); }
#tab-transcript .tr-tools .peek-cuts > span:first-child { font-size: 13.5px; font-weight: 500; color: #d0d0d0 !important; }
@media (max-width: 420px) { #tab-transcript .tr-tools { grid-template-columns: 1fr; } #tab-transcript .tr-keys span { min-height: 60px; font-size: 12px; } }

/* what the mouse does on the timeline, next to undo / redo */
.tl-hint { display: flex; align-items: center; gap: 4px 16px; margin-left: 10px; min-width: 0; flex-wrap: wrap; font-size: 12px; color: #7d7d7d; white-space: nowrap; }
.tl-hint span { display: inline-flex; align-items: center; gap: 7px; }
.tl-hint b { padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,0.08); color: #d6d6d6; font-size: 11.5px; font-weight: 600; }
body.view-pro .tl-hint { display: none; }
@media (max-width: 1200px) { .tl-hint span:nth-child(3) { display: none; } }
@media (max-width: 1000px) { .tl-hint { display: none; } }
.selbar .tl-hint span { min-width: 0; margin-right: 0; }

/* shortcuts: back to one inline row, the keys drawn like real keycaps */
#tab-transcript .tr-bar .tr-keys { display: flex; flex-wrap: wrap; gap: 10px 18px; }
#tab-transcript .tr-keys span { flex-direction: row; justify-content: flex-start; gap: 9px; min-height: 0; padding: 0; border-radius: 0; background: none; font-size: 13px; color: #a8a8a8; text-align: left; }
#tab-transcript .tr-bar .tr-keys kbd { min-width: 30px; padding: 6px 9px 7px; border-radius: 7px; background: linear-gradient(180deg, #4a4a4c 0%, #353537 100%); color: #f5f5f5; font-size: 12.5px !important; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 0 #1a1a1b, 0 3px 0 #0a0a0a, 0 4px 6px rgba(0,0,0,0.5); transform: translateY(-1px); }

.tl-help { width: 30px; height: 30px; margin-left: 4px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; background: transparent; color: #8a8a8a; cursor: pointer; }
.tl-help:hover { background: rgba(255,255,255,0.08); color: #fff; }
.tl-help svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.tl-help svg .dot { fill: currentColor; stroke: currentColor; stroke-width: 1.2; }
body.view-pro .tl-help { display: none; }
/* the timeline help popup: the gestures on the left, one acted out on a small timeline on the right (timeline-help.js) */
.dlg-back .modal-box.dlg.dlg-tlh { width: min(912px, 100%); max-height: 100%; }
.dlg-tlh .dlg-body { overflow: auto; min-height: 0; }
.tlh { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.tlh-rows { display: grid; grid-auto-rows: 1fr; gap: 6px; }
.tlh-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 12px; border: 0; border-radius: 12px; overflow: hidden; background: transparent; color: #f2f2f2; font: inherit; text-align: left; cursor: pointer; transition: background 0.14s, color 0.14s; }
.tlh-row:hover { background: var(--o-card); }
.tlh-row.on { background: #cfcfcf; color: #0a0a0a; }
.tlh-row:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 2px; }
.tlh-ico { position: relative; flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 9px; background: var(--o-ctl); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: background 0.14s; }
.tlh-ico .lit { fill: currentColor; stroke: none; }
.tlh-row.on .tlh-ico { background: rgba(0,0,0,0.08); }
.tlh-words { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tlh-row b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.tlh-row i { font-style: normal; font-size: 12.5px; line-height: 1.3; color: var(--t-2); }
.tlh-row.on i { color: rgba(10,10,10,0.62); }
/* how far this demo has played: the chosen row slowly fills up */
.tlh-bar { position: absolute; inset: 0; background: rgba(0,0,0,0.07); transform: scaleX(0); transform-origin: left; visibility: hidden; }
.tlh-row.on .tlh-bar { visibility: visible; }
.tlh-stage { min-width: 0; border-radius: 12px; overflow: hidden; background: #040404; }   /* the timeline's black: a taller stage just has more of it */
.tlh-svg { display: block; width: 100%; height: auto; font-family: Inter, "Segoe UI", system-ui, sans-serif; user-select: none; }
.tlh-svg .tlh-time { font-size: 13px; font-weight: 500; fill: #cfcfcf; font-variant-numeric: tabular-nums; }
.tlh-svg .tlh-ruler { font-size: 10px; fill: #8a8a8a; }
.tlh-svg .tlh-say { font-size: 12px; font-weight: 500; fill: #f2f2f2; }
.tlh-svg .tlh-key { font-size: 12.5px; font-weight: 600; }
.tlh-svg .tlh-chip { font-size: 11px; font-weight: 600; fill: #0a0a0a; }
.tlh-svg .tlh-mhead { font-size: 10.5px; font-weight: 600; fill: #7a7a7a; }
.tlh-svg .tlh-mitem { font-size: 12px; font-weight: 500; }
@media (max-width: 760px) {
  .tlh { grid-template-columns: minmax(0, 1fr); }
  .tlh-stage { order: -1; }
}

/* keycaps a little darker */
#tab-transcript .tr-bar .tr-keys kbd { background: linear-gradient(180deg, #2c2c2e 0%, #212123 100%); color: #cfcfcf;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 0 #0f0f10, 0 3px 0 #000, 0 4px 6px rgba(0,0,0,0.5); }


/* keycaps: much darker, no shadow underneath */
#tab-transcript .tr-bar .tr-keys kbd { background: #181819; color: #bdbdbd; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); transform: none; }




.dlg { user-select: none; -webkit-user-select: none; }
.dlg .dlg-input { user-select: text; -webkit-user-select: text; }
.dlg .dlg-extra[hidden] { display: none; }
.dlg .dlg-extra { white-space: nowrap; }
.dlg .dlg-extra.done { color: #8fd9a8; }
.dlg .dlg-extra:disabled { opacity: 0.7; cursor: default; }

/* editing the whole transcript as one block of text */
.tr-edit.hidden, .tr-editbar.hidden { display: none; }
#tab-transcript .tr-edit { display: block; width: 100%; min-height: 240px; padding: 18px; border: 0; border-radius: 14px; outline: 0; resize: none; background: rgba(255,255,255,0.06); color: #f2f2f2; font: inherit; font-size: 16px; line-height: 1.9; letter-spacing: -0.003em; }
#tab-transcript .tr-edit:focus { background: rgba(255,255,255,0.08); }
#tab-transcript .tr-edit::selection { background: rgba(250,204,21,0.35); color: #fff; }
#tab-transcript .tr-editbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 4px 0 10px; background: #000; }
#tab-transcript .tr-editbar span { flex: 1; font-size: 13.5px; font-weight: 600; color: #f2f2f2; }
#tab-transcript .tr-editbar button { height: 38px; padding: 0 18px; border: 0; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
#tab-transcript .tr-ecancel { background: rgba(255,255,255,0.09); color: #e5e5e5; }
#tab-transcript .tr-ecancel:hover { background: rgba(255,255,255,0.15); }
#tab-transcript .tr-edone { background: #cfcfcf; color: #0a0a0a; }
#tab-transcript .tr-edone:hover { background: #dcdcdc; }


/* the transcript itself becomes the text box: same text, same lines, no card (just the typing cursor) */
#tab-transcript .tr-edit { min-height: 0; padding: 4px 6px 28px; border-radius: 0; background: transparent; color: #ececec; font-size: 16.5px; line-height: 2.05; letter-spacing: -0.003em; word-spacing: 0.04em; overflow: hidden; caret-color: #facc15; }
#tab-transcript .tr-edit:focus { background: transparent; }
#tab-transcript .tr-editbar { margin: 0 0 6px; }

/* editing in place: the same transcript, with a soft background and a typing cursor */
#tab-transcript .transcript.editing { margin: 0 -8px; padding: 12px 14px 28px; border-radius: 14px; background: rgba(255,255,255,0.06); outline: 0; user-select: text; -webkit-user-select: text; cursor: text; caret-color: #facc15; }
#tab-transcript .transcript.editing .w { cursor: text; }
#tab-transcript .transcript.editing .w:hover { background: transparent; }
#tab-transcript .transcript.editing .w.now::after, #tab-transcript .transcript.editing .w.next::before { display: none; }

/* editing in place must not move anything: same box, same lines; the soft background is drawn outside the text with a shadow */
#tab-transcript .transcript.editing { margin: 0; padding: 4px 6px 28px; border-radius: 6px; background: rgba(255,255,255,0.06); box-shadow: 0 0 0 8px rgba(255,255,255,0.06); }

/* the edit bar lines up with the text: label at the text's left edge, buttons at its right edge, same height and width */
#tab-transcript .tr-editbar { align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 6px 12px; }
#tab-transcript .tr-editbar span { padding: 0; line-height: 44px; }
#tab-transcript .tr-editbar button { box-sizing: border-box; height: 44px; min-width: 96px; padding: 0 20px; line-height: 1; }

/* popups (our dialogs, Export, storage): a lighter card, smaller corners, a clean divider, easier text */
#exportDlg .modal-box.xp-box, .dlg-back .modal-box.dlg { background: #171717; border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,0.55); }
#exportDlg .xp-foot, .dlg-back .xp-foot { background: transparent; border-top: 1px solid rgba(255,255,255,0.09); padding: 16px 20px 20px; }
#exportDlg .xp-box .modal-head, .dlg-back .xp-box .modal-head { padding: 22px 20px 14px; }
.dlg-back .modal-box.dlg { width: min(460px, 100%); }
.dlg .modal-head b { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: #f5f5f5; }
.dlg .dlg-body { padding: 0 20px 22px; }
.dlg .dlg-text { margin: 0; font-size: 15px; line-height: 1.6; color: #c4c4c4; max-width: 40ch; }
.dlg .dlg-text + .dlg-rows, .dlg .dlg-text + .dlg-field { margin-top: 16px; }
.dlg .xp-cancel, .dlg .xp-go { height: 44px; border-radius: 10px; font-size: 14.5px; }
.dlg .xp-cancel { background: rgba(255,255,255,0.09); }
.dlg .xp-cancel:hover { background: rgba(255,255,255,0.15); }
.dlg .dlg-row, .dlg .dlg-field, #exportDlg .xp-row, #exportDlg .xp-field { border-radius: 10px; }
#exportDlg .xp-seg { border-radius: 10px; }
.dlg .dlg-x { border-radius: 8px; }
.dlg .dlg-foot { gap: 8px; }

/* editing never changes the width or the text position: the soft background stays inside the transcript's own box */
#tab-transcript .transcript, #tab-transcript .transcript.editing { margin: 0; padding: 12px 14px 28px; }
#tab-transcript .transcript.editing { box-shadow: none; border-radius: 12px; }

/* popups: no drop shadow */
#exportDlg .modal-box.xp-box, .dlg-back .modal-box.dlg, .modal-box { box-shadow: none !important; }

/* the divider above the buttons: a soft line inset from the card's edges instead of a hard edge-to-edge rule */
#exportDlg .xp-foot, .dlg-back .xp-foot { position: relative; border-top: 0 !important; padding-top: 20px; }
#exportDlg .xp-foot::before, .dlg-back .xp-foot::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: rgba(255,255,255,0.07); }

/* Transcript tips: X top right, a ? beside the search to bring them back */
#tab-transcript .tr-bar { position: relative; }
#tab-transcript .tr-bar.closed { display: none; }
.tr-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; background: transparent; color: #7a7a7a; cursor: pointer; }
.tr-x:hover { background: rgba(255,255,255,0.08); color: #fff; }
.tr-x svg, .tr-tipbtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tr-tipbtn { flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,0.07); color: #bdbdbd; cursor: pointer; }
.tr-tipbtn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.tr-tipbtn svg { width: 18px; height: 18px; stroke-width: 1.5; }
.tr-tipbtn svg .dot { fill: currentColor; stroke: currentColor; stroke-width: 1.2; }
.tr-tipbtn.hidden { display: none; }
#tab-transcript .tr-tools { grid-template-columns: auto 1fr auto; }
#tab-transcript .tr-tools .tr-tipbtn.hidden { display: none; }
#tab-transcript .tr-tools { display: flex; gap: 10px; }
#tab-transcript .tr-tools .peek-search { flex: 1; min-width: 0; }
#tab-transcript .tr-tools .tr-tipbtn { order: 3; }
@media (max-width: 420px) { #tab-transcript .tr-tools { flex-wrap: wrap; } }


/* a fainter divider above the popup buttons */
#exportDlg .xp-foot::before, .dlg-back .xp-foot::before { background: rgba(255,255,255,0.04); }

/* New project page: pick a preset */
.su-pre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 10px 12px 10px 18px; border-radius: 12px; background: var(--o-card); font-size: 13.5px; font-weight: 600; color: #fff; }
.su-pre.hidden { display: none; }
.su-pre-pick { width: 180px; }
.su-pre-pick .dd { width: 100%; }
.su-pre-pick .dd-btn { height: 38px; border: 0; border-radius: 9px; background: var(--o-ctl); }
.su-pre-pick .dd-btn { width: 100%; }

/* Preset dropdown (New project page): name on the left, chevron on the right */
.su-pre .su-pre-pick .dd .dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: 10px; background: rgba(255,255,255,0.07); color: #f2f2f2; font-size: 14px; font-weight: 600; transition: background 0.12s; }
.su-pre .su-pre-pick .dd .dd-btn:hover { background: rgba(255,255,255,0.11); }
.su-pre .su-pre-pick .dd .dd-btn span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-pre .su-pre-pick .dd .dd-btn svg { flex: none; width: 16px; height: 16px; stroke: rgba(255,255,255,0.6); stroke-width: 1.7; }
.su-pre .su-pre-pick .dd.open .dd-btn { background: rgba(255,255,255,0.11); }
.su-pre .su-pre-pick .dd.open .dd-btn svg { stroke: #fff; }

.sm-ico.pre { stroke: none; fill: #d8b4fe; }

/* Re-edit with a preset: the same popup as the + menu / right-click menus */
#presetPick { position: fixed; z-index: 60; padding: 6px; border: 0 !important; border-radius: 14px; background: #1a1a1a !important; min-width: 220px; }
#presetPick .sm-head { padding: 6px 10px; font-size: 11.5px; font-weight: 600; color: #7a7a7a; }
#presetPick button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; font-size: 13px; font-weight: 500; color: #ededed; text-align: left; }
#presetPick button span { flex: 1; }
#presetPick button:hover { background: rgba(255,255,255,0.08); }
#presetPick .sm-ico { width: 16px !important; height: 16px !important; }
#presetPick { background: rgba(12,12,12,0.86) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#presetPick button:hover { background: rgba(255,255,255,0.08); }
#presetPick { background: rgba(14,14,14,0.95) !important; }
#presetPick .panel-x { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-height: 0; padding: 0; gap: 0; line-height: 0; border: 0; border-radius: 8px; background: transparent; color: #8a8a8a; cursor: pointer; transition: background 0.12s, color 0.12s; }
#presetPick .panel-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#presetPick .panel-x:hover { background: rgba(255,255,255,0.1); color: #fff; }
#presetPick .sm-head { padding-right: 38px; min-height: 26px; display: flex; align-items: center; }
#presetPick .panel-x { top: 8px; right: 12px; }
#presetPick button .pp-cost { flex: none; font-style: normal; font-size: 11.5px; font-weight: 600; color: #8e8e8e; }
#presetPick .pp-note { padding: 2px 10px 8px; font-size: 12px; line-height: 1.45; color: #7a7a7a; }
#presetPick button .pp-cost { font-style: normal !important; }

#aiAddMenu button .pp-cost { flex: none; font-style: normal !important; font-size: 11.5px; font-weight: 600; color: #8e8e8e; }

/* project list: every row is the same height, selected or not, busy or ready, so switching video never moves the rows below (the busy chip used to wrap and grow the row) */
.videos .video-item .item-text { overflow: hidden; }
.videos .video-item .name { height: 20px; overflow: hidden; flex-wrap: nowrap; }
.videos .video-item .name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.videos .video-item .state, .videos .video-item .state[data-s="busy"] { box-sizing: border-box; height: 24px; margin-top: 6px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; max-width: 100%; }
@container side (min-width: 169px) {
  .videos .video-item { box-sizing: border-box; height: 84px; min-height: 84px; max-height: 84px; }
}

/* Storage: a solid strip behind the box, so the videos end above it and never show through */
.videos .storage { position: sticky; bottom: 12px; z-index: 3; background: none !important; }
.videos .storage::before { content: ""; position: absolute; z-index: -2; left: -10px; right: -10px; top: -22px; bottom: -12px; pointer-events: none; background: linear-gradient(180deg, rgba(7,7,7,0), #070707 12px); }
.videos #videoList { margin-bottom: 24px; }   /* the last video stops clear of the strip */
.videos .storage::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 12px; background: #141414; transition: background 0.15s; }
.videos .storage:hover::after { background: #1a1a1a; }

/* messages: at the top of the screen, under the top bar, where they get seen. Good news is green */
.toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 9500; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: min(620px, calc(100vw - 32px)); pointer-events: none; }
.toasts .toast { position: static; inset: auto; transform: none; margin: 0; max-width: 100%; padding: 12px 18px; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; background: #1b1b1b; color: #f2f2f2; font-size: 14px; font-weight: 500; line-height: 1.35; text-align: left; box-shadow: 0 12px 36px rgba(0,0,0,0.55); pointer-events: auto; animation: toast-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.toasts .toast.hidden { display: none; }
.toasts .toast-done { display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px; border-color: rgba(74,222,128,0.45) !important; background: #0f2c1c; color: #e9fff1; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 36px rgba(0,0,0,0.55); }
.toasts .toast-done:hover { background: #133622; }
.toasts .toast-done svg { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: #4ade80; fill: none; stroke: #06210f; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .toasts .toast { animation: none; } }

/* the version badge when the running server is older than the code */
.ai-mode { margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: #d93a3f; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.4; cursor: help; }
.ai-mode[hidden] { display: none; }
.app-version.stale { background: rgba(245,184,46,0.16) !important; color: #f5b82e !important; font-weight: 600; cursor: help; }
/* select several projects: ticking rows and a bar with the action */
#pickProjects svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#pickProjects.on { background: #cfcfcf !important; color: #111 !important; }
/* the select bar is a panel card (panel-style.css: ps-card, ps-btn), only the layout and the red button are its own */
#pickBar { --ps-card: rgba(255,255,255,0.04); --ps-ctl: rgba(255,255,255,0.07); --ps-hover: rgba(255,255,255,0.10); --ps-text: #ededed; --ps-text-3: rgba(255,255,255,0.4); --ps-r-card: 16px; --ps-r-ctl: 12px; --ps-r-ico: 9px; --ps-h: 48px; display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; font-family: Inter, "Segoe UI", system-ui, sans-serif; }
#pickBar.hidden { display: none; }
#pickBar .ps-head { margin: 0 0 8px; }
#pickBar .ps-head b { font-weight: 600; font-variant-numeric: tabular-nums; }
#pickBar .pick-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#pickBar .ps-btn { width: 100%; padding: 0 10px; white-space: nowrap; }
#pickBar .ps-btn:hover { background: var(--ps-hover); }
#pickBar .ps-btn.danger { background: #e5484d; color: #fff; font-weight: 600; }
#pickBar .ps-btn.danger:hover { background: #f05a5f; }
#pickBar .ps-btn.danger:disabled { background: var(--ps-ctl); color: var(--ps-text-3); cursor: default; }
.video-item.picked, .videos .video-item:has(.pick-box) { position: relative; }
.pick-box { position: absolute; top: 12px; left: 12px; z-index: 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,0.85); background: rgba(0,0,0,0.5); }
.pick-box svg { width: 14px; height: 14px; fill: none; stroke: #06210f; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.video-item.picked .pick-box { border-color: #4ade80; background: #4ade80; }
.video-item.picked .pick-box svg { opacity: 1; }
.video-item.picked { background: rgba(255,255,255,0.08) !important; }

/* time elapsed: low on the video, quiet */
.ai-working > .aw-time { color: #fff; position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 11px !important; opacity: 0.4; text-shadow: none; }

.np-gowrap { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.np-cost { font-size: 12px; color: #8b8b8b; line-height: 1.4; }
.np-cost.hidden { display: none; }

.ready-tag[data-s="failed"] { background: rgba(242,116,120,0.16); color: #f27478; }

/* "video edited" note: in the empty space top left of the stage, small and quiet, never in the middle */
.done-box { position: fixed; top: 60px; left: 214px; z-index: 9400; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.done-box .toast-done { position: static; display: flex; align-items: center; gap: 9px; margin: 0; padding: 7px 14px 7px 8px; border: 0 !important; border-radius: 999px; background: rgba(74,222,128,0.12); color: #bff0d1; font-size: 13px; font-weight: 600; box-shadow: none; pointer-events: auto; cursor: pointer; animation: toast-in 0.28s ease-out; }
.done-box .toast-done:hover { background: rgba(74,222,128,0.2); }
.done-box .toast-done svg { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #4ade80; fill: none; stroke: #06210f; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .done-box { left: 16px; top: auto; bottom: 16px; } }

/* test mode for the app's messages (admin) */
#popupTestPanel { position: fixed; top: 52px; right: 12px; bottom: 12px; width: 380px; z-index: 90; display: flex; flex-direction: column; border-radius: 16px; background: #171717; box-shadow: 0 18px 50px rgba(0,0,0,0.6); overflow: hidden; }
#popupTestPanel .pt-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
#popupTestPanel .pt-body { flex: 1; overflow-y: auto; padding: 4px 10px 14px; }
#popupTestPanel .pt-group { margin: 16px 6px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #8b8b8b; }
#popupTestPanel .pt-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,0.04); margin-bottom: 4px; }
#popupTestPanel .pt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: #e4e4e4; }
#popupTestPanel .pt-text small { font-size: 10.5px; color: #7d7d7d; }
#popupTestPanel .pt-row button { flex: none; height: 26px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,0.09); color: #e8e8e8; font-size: 12px; cursor: pointer; }
#popupTestPanel .pt-row button:hover { background: rgba(255,255,255,0.16); }
.pt-tip { position: fixed; z-index: 9600; max-width: 280px; padding: 7px 11px; border-radius: 9px; background: #262626; color: #f0f0f0; font-size: 12px; line-height: 1.35; box-shadow: 0 8px 24px rgba(0,0,0,0.5); pointer-events: none; }
.pt-flash { outline: 2px solid #4ade80; outline-offset: 2px; }

.np-go { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.np-go.two { height: 54px; }
.np-go small { font-size: 11.5px; font-weight: 500; color: rgba(0,0,0,0.5); line-height: 1.2; }
.np-go small:empty { display: none; }
.np-cost { display: none !important; }

.np-go.two { height: 46px; }
.np-count { margin: 12px 2px 0; font-size: 12px; color: #8b8b8b; }
.np-count.hidden { display: none; }


/* picker pills: the text stays readable on hover (it went dark on dark) */
.cs-pills button:not(.on):hover { color: #fff; background: var(--o-hover); }
.cs-pills button.on, .cs-pills button.on:hover { background: #dcdcdc; color: #0a0a0a; }

/* New project: only the Preset shows; every other option sits in the Advanced settings fold, closed by default */
.su-adv > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 12px; background: var(--o-card); font-size: 13.5px; font-weight: 600; color: #cfcfcf; cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s; }
.su-adv > summary::-webkit-details-marker { display: none; }
.su-adv > summary:hover { background: var(--o-hover); color: #fff; }
.su-adv > summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.su-adv[open] > summary svg { transform: rotate(180deg); }
.su-adv-body { padding-top: 22px; }
.su-adv .su-pre { margin-bottom: 0; }

/* New project: pick videos in the thumbnail box, then Add overlay; the upload bar in the signature bluish green */
:root { --brand-green: linear-gradient(90deg, #0e9f6e, #2dd4bf 60%, #5eead4); }
.np-bar > i { background: var(--brand-green); }

.np-file { position: relative; transition: background 0.15s, box-shadow 0.15s; }
.np-foot2 { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 14px 2px 2px; border-top: 1px solid rgba(255,255,255,0.07); }
.np-foot2 .np-count { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1; color: #9a9a9a; white-space: nowrap; }
#aiSetup .su-ov-for { font-size: 12px; color: var(--t-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* small previews of a video's overlays, on its thumbnail (the box on the New project page and the overlay window) */
.np-ovp, .ovwin-ovp { position: absolute; left: 6px; bottom: 6px; z-index: 2; display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: 9px; background: rgba(14,14,14,0.85); }
.np-ovp i, .ovwin-ovp i { display: block; width: 24px; height: 24px; border-radius: 6px; overflow: hidden; background: #2a2a2a; }
.np-ovp img, .np-ovp video, .ovwin-ovp img, .ovwin-ovp video { display: block; width: 100%; height: 100%; object-fit: cover; }
.np-ovp b, .ovwin-ovp b { padding: 0 5px 0 3px; font-size: 11.5px; font-weight: 700; color: #e8e8e8; }
/* the overlay window */
.ovwin { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }
.ovwin.hidden { display: none; }
.ovwin-card { width: min(780px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column; border-radius: 22px; background: #141414; overflow: hidden; }
.ovwin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 22px 6px 26px; }
.ovwin-title { display: flex; flex-direction: column; gap: 6px; }
.ovwin-title b { font-size: 18px; font-weight: 700; color: #fff; }
.ovwin-title span { font-size: 13px; color: #8e8e8e; }
.ovwin-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: #9a9a9a; cursor: pointer; }
.ovwin-x:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ovwin-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ovwin-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; padding: 16px 22px 18px 26px; }
.ovwin-v { display: flex; flex-direction: column; gap: 9px; padding: 8px 8px 10px; border: 0; border-radius: 16px; background: rgba(255,255,255,0.05); color: #e8e8e8; font: inherit; text-align: left; cursor: pointer; transition: background 0.15s; }
.ovwin-v:hover { background: rgba(255,255,255,0.09); }
.ovwin-v.sel { background: rgba(255,255,255,0.1); outline: 2px solid #f2f2f2; outline-offset: -2px; }
.ovwin-thumb { position: relative; display: block; height: 168px; border-radius: 10px; overflow: hidden; background: #0a0a0a; }
.ovwin-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ovwin-tick { position: absolute; left: 8px; top: 8px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box; border: 2px solid rgba(255,255,255,0.7); border-radius: 8px; background: rgba(10,10,10,0.55); transition: background 0.15s, border-color 0.15s; }
.ovwin-tick svg { width: 16px; height: 16px; fill: none; stroke: #0a0a0a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ovwin-v:hover .ovwin-tick { border-color: #dcdcdc; }
.ovwin-v.sel .ovwin-tick { background: #cfcfcf; border-color: #cfcfcf; }
.ovwin-v.sel .ovwin-tick svg { opacity: 1; }
.ovwin-name { padding: 0 2px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovwin-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px 20px 26px; border-top: 1px solid rgba(255,255,255,0.07); }
.ovwin-gap { flex: 1; }
.ovwin-foot button { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px; border: 0; border-radius: 11px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s, opacity 0.15s; }
.ovwin-foot .ovwin-ghost { background: rgba(255,255,255,0.07); color: #d0d0d0; }
.ovwin-foot .ovwin-ghost:hover { background: rgba(255,255,255,0.13); color: #fff; }
.ovwin-foot .ovwin-ghost.hidden { display: none; }
.ovwin-foot .ovwin-go { background: #cfcfcf; color: #0a0a0a; }
.ovwin-foot .ovwin-go:hover:not(:disabled) { background: #dcdcdc; }
.ovwin-foot .ovwin-go:disabled { opacity: 0.35; cursor: default; }
.ovwin-go svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ovwin-v { transition: background 0.15s, opacity 0.15s; }
.ovwin-grid.has-sel .ovwin-v:not(.sel) { opacity: 0.4; }
.ovwin-grid.has-sel .ovwin-v:not(.sel):hover { opacity: 0.8; }
.ovwin-v:not(.sel):hover .ovwin-tick { background: rgba(255,255,255,0.25); }

/* an overlay row: its name with the videos it is on right under it */
#aiSetup .su-ov-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#aiSetup .su-ov-info .su-ov-name { flex: none; }
#aiSetup .su-ov-info .su-ov-for { font-size: 12px; line-height: 1.2; color: var(--t-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the mode button grows with its text, so the arrow always stays inside the pill (at any text size) */
#aiSetup .su-ov-mode { width: auto; min-width: 138px; flex: none; white-space: nowrap; }
#aiSetup .su-ov-mode span { overflow: visible; }


/* caption fill: preview strip + primary / secondary colour rows */
.fill-prev { height: 34px; margin: 2px 0 6px; border-radius: 10px; border: 0.8px solid rgba(255,255,255,0.16); }
#tab-captions .box-only .fill-prev + .adv-row { border-top: 0; }

.fill-mode { margin: 0 0 10px; }
.fill-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fill-col { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border-radius: 12px; background: #1c1c1c; font-size: 13px; color: var(--text); cursor: pointer; }
.fill-col input[type="color"] { width: 26px; height: 26px; padding: 0; border: 0.8px solid rgba(255,255,255,0.2); border-radius: 50%; overflow: hidden; background: none; cursor: pointer; }
.fill-col input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.fill-col input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.cx-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: -8px 0 18px; }
.cx-act { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 0; border-radius: 12px; background: #1c1c1c; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.cx-act:hover { background: #262626; }
.cx-act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.ps-lock { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: #1c1c1c; color: #b4b4b4; font-size: 12.5px; line-height: 1.4; }
#tab-settings.default-locked > .ps-card:not(:first-child), #tab-settings.default-locked > .ps-action, #tab-settings.default-locked #ssPanels { opacity: 0.45; }

/* every dropdown and menu: the look of the ... menu, solid (nothing shows through) */
.dd-menu, .sel-menu, .panel .dd-menu, .ovm { background: #0e0e0e !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-radius: 14px !important; padding: 6px !important; box-shadow: 0 0 0 0.8px rgba(255,255,255,0.09) !important; }
.dd-item, .sel-menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 9px; font-size: 13px; }
.dd-item:hover, .sel-menu button:hover { background: rgba(255,255,255,0.08); }
.dd-item.on { background: rgba(255,255,255,0.06); }

/* Reset to default / Load a preset */
.cx-acts { gap: 10px; margin: 14px 0 24px; }
.cx-act { height: 46px; border-radius: 12px; background: #151515; box-shadow: 0 0 0 0.8px rgba(255,255,255,0.08); gap: 10px; font-size: 13px; }
.cx-act:hover { background: #1f1f1f; }
.cx-act svg { width: 16px; height: 16px; }

/* More settings: section headers with icon, room between sections */
#tab-captions details.cx-group > .adv-group { margin: 0 0 10px; }
:is(#tab-captions, #hookDlg) details.cx-group > .adv-group:has(> .ix-head) { padding: 16px 16px 18px; }
:is(#tab-captions, #hookDlg) details.cx-group > .adv-group > .ix-head { margin: 0 0 14px; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); }
:is(#tab-captions, #hookDlg) details.cx-group > .adv-group .ix-label { margin-bottom: 8px; }
:is(#tab-captions, #hookDlg) details.cx-group > .adv-group .ix-pair + .ix-pair { margin-top: 14px; }

/* Captions dropdowns: one clean look (button, menu under it, tidy rows) */
:is(#tab-captions, #hookDlg) .dd { position: relative; }
:is(#tab-captions, #hookDlg) .dd-btn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 14px; border: 0; border-radius: 10px; background: #2a2a2a; color: #f2f2f2; font-size: 13px; font-weight: 600; }
:is(#tab-captions, #hookDlg) .dd-btn:hover, :is(#tab-captions, #hookDlg) .dd.open .dd-btn { background: #333333; }
:is(#tab-captions, #hookDlg) .dd-btn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: #9a9a9a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
:is(#tab-captions, #hookDlg) .dd.open .dd-btn svg { transform: rotate(180deg); }
:is(#tab-captions, #hookDlg) .dd-menu { top: calc(100% + 8px); left: auto; right: 0; min-width: 100%; width: max-content; max-width: 280px; padding: 6px !important; }
:is(#tab-captions, #hookDlg) .dd-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; padding: 0 12px; border-radius: 9px; color: #cfcfcf; }
:is(#tab-captions, #hookDlg) .dd-item b { font-size: 13px; font-weight: 500; color: inherit; }
:is(#tab-captions, #hookDlg) .dd-item i { display: none; }
:is(#tab-captions, #hookDlg) .dd-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
:is(#tab-captions, #hookDlg) .dd-item.on { background: transparent; color: #fff; }
:is(#tab-captions, #hookDlg) .dd-item.on b { font-weight: 600; }
:is(#tab-captions, #hookDlg) .dd-item svg { width: 14px; height: 14px; flex: none; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
:is(#tab-captions, #hookDlg) .dd-item.on svg { visibility: visible; }

/* Style group: room between the Background row, the preview strip and the colour tiles */
#tab-captions .box-only { padding-bottom: 10px; }
#tab-captions .fill-prev { margin: 6px 0 12px; height: 36px; }
#tab-captions .fill-pair { gap: 10px; margin-top: 6px; }
#tab-captions .fill-pair:has(.grad-only.hidden) { grid-template-columns: 1fr; }
#tab-captions .fill-col { height: 48px; padding: 0 14px; gap: 12px; }

/* dropdowns: scroll when long, smaller corners */
.dd-menu { max-height: min(320px, 55vh) !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.dd-menu, .sel-menu, .panel .dd-menu, .ovm { border-radius: 10px !important; }
.dd-item, .sel-menu button, :is(#tab-captions, #hookDlg) .dd-item { border-radius: 7px; }
:is(#tab-captions, #hookDlg) .dd-btn, .adv-row .dd-btn, .ps-row .dd-btn { border-radius: 8px; }

/* rows inside a wrapper keep the same gap as the other colour rows */
:is(#tab-captions, #hookDlg) .ix-rows .act-only { display: flex; flex-direction: column; gap: 8px; }
:is(#tab-captions, #hookDlg) .ix-rows .act-only.hidden { display: none; }
#tab-captions .fill-rows { margin-top: 10px; }
#tab-captions .fill-prev { margin: 8px 0 0; }

.pro-btn { margin-left: 8px; padding: 2px 9px; font: inherit; color: var(--text, #e8e8ea); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; cursor: pointer; }
.pro-btn:hover { background: rgba(255,255,255,0.13); }
.pro-btn:disabled { opacity: 0.4; cursor: default; }

.tl-zoom { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.tl-zoom .pro-btn { margin-left: 4px; }

.tl-zoom .zbtn svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.tl-zoom .zbtn:disabled { opacity: 0.35; cursor: default; }
#tlZoomBar { -webkit-appearance: none; appearance: none; width: 160px; height: 18px; margin: 0 6px; background: transparent; cursor: pointer; }
#tlZoomBar::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: #cfcfcf; }
#tlZoomBar::-webkit-slider-thumb { -webkit-appearance: none; width: 5px; height: 16px; margin-top: -6.5px; border-radius: 2px; background: #cfcfcf; border: 0; }
#tlZoomBar::-moz-range-track { height: 3px; border-radius: 3px; background: #cfcfcf; }
#tlZoomBar::-moz-range-thumb { width: 5px; height: 16px; border-radius: 2px; background: #cfcfcf; border: 0; }

.tl-zoom .zbtn { background: none; border: 0; }
.tl-zoom .zbtn:hover:not(:disabled) { background: rgba(255,255,255,0.08); }

/* zoom bar: just the icons (grey, no box, no border), everything on one centre line */
.tl-zoom { display: inline-flex !important; align-items: center !important; height: 34px; gap: 0 !important; margin-right: 8px; }
.tl-zoom .zbtn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; border-radius: 6px; box-shadow: none !important; }
.tl-zoom .zbtn:hover:not(:disabled) { background: none !important; }
.tl-zoom .zbtn:hover:not(:disabled) svg { stroke: #c4c6cc; }
.tl-zoom .zbtn svg { display: block; width: 20px; height: 20px; stroke: #8b8d94 !important; fill: none; }
.tl-zoom .zbtn:disabled { opacity: 0.4; }
#tlZoomBar { display: block; margin: 0 4px !important; align-self: center; }

/* Basic / Pro: the buttons' corners follow the container's (container radius - its padding) */
.viewtoggle { border-radius: 12px !important; padding: 3px !important; gap: 3px !important; }
.viewtoggle button { border-radius: 9px !important; }

.tr-fix { margin: -6px 0 12px; gap: 6px; }
.tr-fix .tr-rep { flex: 1; height: 32px; border-radius: 10px; }
.tr-fix .pro-btn { margin-left: 0; height: 32px; padding: 0 12px; }
.tr-case .pro-btn { flex: 1; }

/* timeline scrollbars: the thumb and track were pinched to a lens at the ends (a border on two sides only made the inner radius elliptical):
   a border on all four sides keeps the ends round */
.timeline-scroll::-webkit-scrollbar-track:horizontal, #proScroll::-webkit-scrollbar-track:horizontal { margin: 0 10px 0 42px; border: 6px solid transparent; border-radius: 999px; background-clip: padding-box; }
.timeline-scroll::-webkit-scrollbar-track:vertical, #proScroll::-webkit-scrollbar-track:vertical { margin: 0; border: 6px solid transparent; border-radius: 999px; background-clip: padding-box; }
.timeline-scroll::-webkit-scrollbar-thumb:horizontal, .timeline-scroll::-webkit-scrollbar-thumb:vertical, #proScroll::-webkit-scrollbar-thumb:horizontal, #proScroll::-webkit-scrollbar-thumb:vertical { border: 6px solid transparent; border-radius: 999px; background-clip: padding-box; }

/* the timeline help button says Help (the user), plain grey text like the zoom icons */
.tl-help { width: auto; padding: 0 10px; font: 600 13px Inter, "Segoe UI", sans-serif; }

/* every floating panel (right-click menus, + menu, sound list, zoom / sound / overlay popups, the ... menu, drop-downs): a nice blur behind it
   so the text reads, and a tiny bit less see-through than before (0.95 -> 0.96). One rule, last, so no older rule turns the blur off. */
#aiAddMenu, #ctxMenu, #selMenu, #soundPick, #moreMenu, #trackMenu, #newTrackMenu, #projMenu, #pop, #presetPick, .dd-menu, .sel-menu, .ovm, .panel .dd-menu {
  background: rgba(14,14,14,0.96) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important; backdrop-filter: blur(22px) saturate(1.2) !important;
}

/* the timeline help button: the ? and a small "Help", inline, a small button */
.tl-help { display: inline-flex; align-items: center; gap: 5px; width: auto; height: 26px; padding: 0 8px 0 6px; font: 500 12px Inter, "Segoe UI", sans-serif; }
.tl-help svg { width: 15px; height: 15px; }
/* the Help button is only as wide as the ? and its text (a flex / grid parent was stretching it) */
#tlHelp.tl-help { flex: 0 0 auto !important; width: max-content !important; min-width: 0 !important; max-width: max-content; justify-self: start; align-self: center; background: transparent; }
#tlHelp.tl-help span { color: inherit; }
/* the Help button: beats `.selbar .history .iconbtn` (grid, 30px, centred), which put the ? and the word far apart */
.selbar .history #tlHelp.tl-help, #tlHelp.tl-help { display: inline-flex !important; flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px; width: max-content !important; height: 26px !important; padding: 0 8px 0 6px !important; grid-template-columns: none; place-items: unset; }
#tlHelp.tl-help svg { flex: none; width: 15px; height: 15px; }
#tlHelp.tl-help span { flex: none; font: 500 12px Inter, "Segoe UI", sans-serif; line-height: 1; }

/* Version 204: NO backdrop blur anywhere (it showed blocky artifacts behind the text and made it hard to read). Instead every floating
   panel and tooltip is solid, with a soft top-to-bottom gradient that imitates the frosted look. This rule is last. */
#aiAddMenu, #ctxMenu, #selMenu, #soundPick, #moreMenu, #trackMenu, #newTrackMenu, #projMenu, #pop, #presetPick, .dd-menu, .sel-menu, .ovm, .panel .dd-menu,
.hover-tip, .tl-tip, #tip {
  background: var(--popup-bg) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.hover-tip::before { background: var(--popup-bg) !important; }
/* Help: `.selbar span { min-width: 140px; margin-right: 6px }` was pushing the word away from the ? */
#tlHelp.tl-help span { min-width: 0 !important; margin: 0 !important; color: inherit; }
/* the Help button lives inside the zoom group now: one row, everything centred on the same line (the ?, the word, the zoom icons) */
.tl-zoom #tlHelp.tl-help { margin: 0 0 0 10px !important; align-self: center; }
/* Help: `place-items: unset` above reset align-items to normal, so the ? and the word hung at the top of the button: centre them */
.selbar .history #tlHelp.tl-help, #tlHelp.tl-help { align-items: center !important; place-items: center start !important; }
#tlHelp.tl-help span { height: auto !important; }
/* the right-click / selection / + menus: the same 16px of room on every side (measured: icons and chevrons sit 16px from the left / right,
   the last row 16px from the bottom; the title was 13px from the top and the X 19px from the right) */
#ctxMenu, #selMenu, #aiAddMenu { padding-top: 9px !important; }
#ctxMenu .panel-x, #selMenu .panel-x, #aiAddMenu .panel-x { top: 9px !important; right: 9px !important; }

/* Version 208: every track takes any item, so the + and the ghost are neutral */
.tl-add.gen { border-color: rgba(255,255,255,0.28) !important; }
.tl-add.gen svg { stroke: #cfcfcf; }
.tl-add.gen:hover { background: rgba(255,255,255,0.1); border-color: #e5e5e5 !important; }
.tl-ghost[data-kind="layer"] { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); }
.tl-drop[data-kind="layer"] { background: #e5e5e5; box-shadow: none; }

/* the Add menu (the + on a track): narrow, labels on the left, the X level with the title */
#newTrackMenu { min-width: 0 !important; width: 168px; padding: 6px !important; }
#newTrackMenu .sm-head { height: 36px; min-height: 36px; padding: 0 10px; box-sizing: border-box; }
#newTrackMenu button:not(.panel-x) { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; font-size: 13px; font-weight: 500; color: #ededed; text-align: left; }
#newTrackMenu button:not(.panel-x) span { flex: 1; text-align: left; }
#newTrackMenu button:not(.panel-x):hover { background: rgba(255,255,255,0.08); }
#newTrackMenu .sm-ico { width: 16px; height: 16px; min-width: 16px; flex: none; }
#newTrackMenu .panel-x { top: 11px; right: 11px; width: 26px; height: 26px; }

/* Check spots and Basic / Pro: one height (32px) and one corner (8px); the buttons inside Basic / Pro follow the box */
.check-btn { height: 32px !important; border-radius: 8px !important; }
.viewtoggle { height: 32px !important; box-sizing: border-box !important; border-radius: 8px !important; padding: 2px !important; gap: 2px !important; align-items: stretch; }
.viewtoggle button { height: 28px !important; border-radius: 6px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex; align-items: center; }

/* Basic / Pro, inside: an even 3px frame all round, the inner corner is the outer 8px minus that 3px (5px), text centred, both buttons the same width */
.viewtoggle { padding: 3px !important; gap: 3px !important; }
.viewtoggle button { height: 26px !important; min-width: 58px; padding: 0 14px !important; border-radius: 5px !important; justify-content: center; line-height: 1 !important; margin: 0 !important; }

/* the box had a 1px border that ate into its 32px, so the 26px button sat lower than centre: no border, 3 + 26 + 3 = 32 exactly */
.viewtoggle { border: 0 !important; align-items: center !important; }

/* the track menu (grip click, right-click on a track): the old rules had a broken selector and were dropped; same clean look as the Add menu */
#trackMenu { min-width: 0 !important; width: 188px; padding: 6px !important; }
#trackMenu .sm-head { height: 36px; min-height: 36px; padding: 0 10px; box-sizing: border-box; }
#trackMenu button:not(.panel-x) { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent !important; font-size: 13px; font-weight: 500; color: #ededed; text-align: left; }
#trackMenu button:not(.panel-x) span { flex: 1; text-align: left; }
#trackMenu button:not(.panel-x):hover:not(:disabled) { background: rgba(255,255,255,0.08) !important; }
#trackMenu button.danger, #trackMenu button.danger .sm-ico { color: #f27478; stroke: #f27478; }
#trackMenu button.danger:hover:not(:disabled) { background: rgba(242,116,120,0.13) !important; }
#trackMenu .sm-ico { width: 16px; height: 16px; min-width: 16px; flex: none; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#trackMenu .panel-x { top: 11px; right: 11px; width: 26px; height: 26px; }
#trackMenu .sm-sep { height: 1px; margin: 5px 6px; background: rgba(255,255,255,0.06); }

/* Check spots = the grey Basic button's size and corners (26px, 5px); its number tile sits 4px from the top, bottom and left, so the gaps are even */
.check-btn { height: 26px !important; border-radius: 5px !important; padding: 0 12px 0 4px !important; gap: 8px !important; align-self: center; line-height: 1 !important; }
.check-btn .n { min-width: 18px !important; height: 18px !important; padding: 0 5px !important; border-radius: 3px !important; font-size: 11px !important; line-height: 1 !important; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; }

/* Check spots list: Ignore all is a dark grey button as wide as the card */
#pop .fl-head .ignore-all { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; padding: 0; border: 0; border-radius: 6px; background: #2a2a2c !important; color: #d6d6d6; font-size: 13px; font-weight: 600; }
#pop .fl-head .ignore-all:hover { background: #343437 !important; color: #fff; }

/* Check spots list rows: even, centred, small corners; a fixed-width time tile, one line of text, the arrow centred */
.pop .fl-list { gap: 6px; }
.pop .flag-list .fl-row { align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px 8px 8px; border-radius: 6px; background: rgba(255,255,255,0.05); line-height: 1.35; }
.pop .flag-list .fl-row:hover { background: rgba(255,255,255,0.09); }
.fl-time { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 28px; padding: 0 8px; box-sizing: border-box; border-radius: 4px; background: rgba(245,165,36,0.16); color: #f5a524; font-size: 12px; font-weight: 700; line-height: 1; }
.fl-text { -webkit-line-clamp: 2; font-size: 13px; font-weight: 500; color: #e6e6e6; }
.fl-go { margin-top: 0; }
#pop .fl-head .ignore-all { background: #0d0d0e !important; color: #b9b9bd; }
#pop .fl-head .ignore-all:hover { background: #010101 !important; color: #fff; }
/* the time tile inside the sentence */
.fl-text .fl-time { display: inline-flex; min-width: 0; height: 22px; padding: 0 7px; margin-left: 2px; vertical-align: middle; border-radius: 4px; font-size: 12px; }
.pop .flag-list .fl-text { display: block; -webkit-line-clamp: unset; line-height: 26px; }

/* the Check spots list: 10px of space on every side (top, left, right, bottom), Ignore all a touch darker than the rows, not black */
#pop.pop-flags { padding: 10px !important; }
#pop.pop-flags > *:not(.pop-head) { margin-left: 0 !important; margin-right: 0 !important; }
#pop.pop-flags .pop-head { margin: 0 0 6px !important; padding: 0 !important; }
#pop.pop-flags .fl-list { margin: 0 !important; }
#pop .fl-head .ignore-all { background: #1d1d1f !important; color: #c9c9cd; border: 0 !important; }
#pop .fl-head .ignore-all:hover { background: #262629 !important; color: #fff; }

/* the Check spots panels (the list and an opened spot): corners halved (panel 16 -> 8, rows and buttons 6 -> 3, time tile 4 -> 2) */
#pop.pop-flags { border-radius: 8px !important; }
#pop.pop-flags .fl-row, #pop.pop-flags .fl-head .ignore-all, #pop.pop-flags .fl-opts button, #pop.pop-flags .flag-ctx { border-radius: 3px !important; }
#pop.pop-flags .fl-time { border-radius: 2px !important; }

/* Ignore all sits under the spots */
#pop.pop-flags .pop-head { margin: 0 !important; }
#pop.pop-flags .fl-list { margin: 0 0 6px !important; }

/* the opened spot, cleaned up: the sentence, a quiet box with the words, then equal full-width buttons (the first one white, the rest dark grey, Ignore dark like Ignore all) */
#pop.pop-flags .flag-q { padding: 6px 4px 12px; font-size: 14px; font-weight: 600; line-height: 1.4; color: #f2f2f2; }
#pop.pop-flags .flag-ctx { margin: 0 0 10px !important; padding: 12px !important; background: rgba(255,255,255,0.04) !important; font-size: 13px; line-height: 1.6; color: #8f8f94; }
#pop.pop-flags .flag-ctx .hit { color: #f2f2f2; font-weight: 600; }
#pop.pop-flags .flag-ctx .cut { color: #6c6c70; }
#pop.pop-flags .fl-opts { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; padding: 0 !important; }
#pop.pop-flags .fl-opts button { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin: 0; padding: 0 12px; border: 0 !important; border-radius: 3px !important; background: #2a2a2c !important; color: #d8d8dc; font-size: 13px; font-weight: 600; }
#pop.pop-flags .fl-opts button:hover { background: #343437 !important; color: #fff; }
#pop.pop-flags .fl-opts button:first-child:not(.ignore) { background: #cfcfcf !important; color: #0a0a0a; }
#pop.pop-flags .fl-opts button:first-child:not(.ignore):hover { background: #dcdcdc !important; color: #0a0a0a; }
#pop.pop-flags .fl-opts button.ignore { background: #1d1d1f !important; color: #c9c9cd; }
#pop.pop-flags .fl-opts button.ignore:hover { background: #262629 !important; }
#pop.pop-flags .flag-q .fl-time { display: inline-flex; min-width: 0; height: 22px; padding: 0 7px; margin-left: 2px; vertical-align: middle; font-size: 12px; }
#pop .fl-head .ignore-all { background: #cfcfcf !important; color: #0a0a0a; }
#pop .fl-head .ignore-all:hover { background: #dcdcdc !important; color: #0a0a0a; }

/* easier to read: the words are a light grey, the spot's own word is amber and bold, cut words are dim and struck through; buttons in three steps (white = the main answer, grey = the other answer, plain text = Ignore) */
#pop.pop-flags .flag-ctx { padding: 14px !important; margin: 0 0 14px !important; font-size: 13.5px; line-height: 1.75; color: #b9b9be; background: rgba(255,255,255,0.045) !important; }
#pop.pop-flags .flag-ctx .hit { color: #f5a524; font-weight: 700; }
#pop.pop-flags .flag-ctx .cut { color: #66666b; text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.28); }
#pop.pop-flags .flag-ctx .hit.cut { color: #b8781a; }
#pop.pop-flags .flag-q { padding: 4px 4px 14px; }
#pop.pop-flags .fl-opts { gap: 8px; }
#pop.pop-flags .fl-opts button { height: 42px; }
#pop.pop-flags .fl-opts button.ignore { height: 34px; background: transparent !important; color: #8d8d92; font-weight: 500; }
#pop.pop-flags .fl-opts button.ignore:hover { background: rgba(255,255,255,0.06) !important; color: #e6e6e8; }

/* the default popup colour: every popup, menu, dropdown and tooltip uses this one (the right-click menu's colour) */
:root { --popup-bg: #1b1b1d; }

/* the rows / boxes / grey buttons in the Check spots panels stand out more from the panel (#1b1b1d): about 9% white instead of 5% */
.pop .flag-list .fl-row, #pop.pop-flags .fl-row { background: #313134 !important; }
.pop .flag-list .fl-row:hover, #pop.pop-flags .fl-row:hover { background: #3a3a3e !important; }
#pop.pop-flags .flag-ctx { background: #2a2a2d !important; }
#pop.pop-flags .fl-opts button { background: #313134 !important; }
#pop.pop-flags .fl-opts button:hover { background: #3a3a3e !important; }
#pop.pop-flags .fl-opts button:first-child:not(.ignore) { background: #cfcfcf !important; }
#pop.pop-flags .fl-opts button.ignore { background: transparent !important; }
#pop.pop-flags .fl-opts button.ignore:hover { background: rgba(255,255,255,0.06) !important; }
.fl-nw { white-space: nowrap; }

/* Check spots panels: corners a touch rounder than the halved ones (panel 10, rows and buttons 5, time tile 3) */
#pop.pop-flags { border-radius: 10px !important; }
#pop.pop-flags .fl-row, #pop.pop-flags .fl-head .ignore-all, #pop.pop-flags .fl-opts button, #pop.pop-flags .flag-ctx { border-radius: 5px !important; }
#pop.pop-flags .fl-time { border-radius: 3px !important; }

/* Check spots: the rows / boxes inside the panel are very dark (the panel is #1b1b1d), so their outline reads clearly */
.pop .flag-list .fl-row, #pop.pop-flags .fl-row { background: #101011 !important; }
.pop .flag-list .fl-row:hover, #pop.pop-flags .fl-row:hover { background: #171718 !important; }
#pop.pop-flags .flag-ctx { background: #101011 !important; }
#pop.pop-flags .fl-opts button:not(:first-child):not(.ignore) { background: #101011 !important; }

/* the opened spot, tidied: the sentence sits in a dark row like the list's rows (same left edge as the buttons), then two equal buttons 6px apart: Comment for AI in amber, Ignore dark */
#pop.pop-flags .flag-q { margin: 0 0 6px; padding: 0 12px; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; background: #101011; border-radius: 5px; font-size: 13px; font-weight: 600; line-height: 1.5; color: #e8e8ea; box-sizing: border-box; }
#pop.pop-flags .fl-opts { gap: 6px; }
#pop.pop-flags .fl-opts button { height: 44px; }
#pop.pop-flags .fl-opts button.fl-comment { background: #f5a524 !important; color: #1a1100; }
#pop.pop-flags .fl-opts button.fl-comment:hover { background: #ffb73d !important; color: #1a1100; }
#pop.pop-flags .fl-opts button.ignore { height: 44px; background: #101011 !important; color: #b4b4b9; font-weight: 600; }
#pop.pop-flags .fl-opts button.ignore:hover { background: #171718 !important; color: #fff; }

/* opened spot, fixed: the sentence is a normal block with room above and below when it wraps; Comment for AI really is amber (the white first-button rule was winning) */
#pop.pop-flags .flag-q { display: block; padding: 11px 12px; min-height: 44px; line-height: 26px; box-sizing: border-box; }
#pop.pop-flags .fl-opts button.fl-comment:first-child:not(.ignore) { background: #f5a524 !important; color: #1a1100; }
#pop.pop-flags .fl-opts button.fl-comment:first-child:not(.ignore):hover { background: #ffb73d !important; color: #1a1100; }

/* opened spot: wider so the sentence fits on one line, and no dark box behind the sentence (just the words on the panel) */
#pop.pop-flags { width: 350px !important; }
#pop.pop-flags .flag-q { background: transparent !important; min-height: 0; padding: 8px 4px 14px; }

/* the list only: more room above Ignore all */
#pop.pop-flags .fl-list { margin: 0 0 12px !important; }

/* Comment for AI is white (the user), dark text */
#pop.pop-flags .fl-opts button.fl-comment:first-child:not(.ignore) { background: #cfcfcf !important; color: #0a0a0a; }
#pop.pop-flags .fl-opts button.fl-comment:first-child:not(.ignore):hover { background: #dcdcdc !important; color: #0a0a0a; }

/* dark items in the Check spots panels get darker on hover (not lighter) */
.pop .flag-list .fl-row:hover, #pop.pop-flags .fl-row:hover { background: #08080a !important; }
#pop.pop-flags .fl-opts button.ignore:hover { background: #08080a !important; color: #fff; }
#pop.pop-flags .fl-opts button:not(:first-child):not(.ignore):hover { background: #08080a !important; }

/* wrapping: the lines come out even (balanced), not one long line and one short */
.fl-text, #pop.pop-flags .flag-q { text-wrap: balance; }

/* Zoom popup, redesigned (the user): the popup colour, equal 12px padding, a three-way type switch, dark tiles for level and length, no borders */
#pop.pop-zoom { width: 296px !important; padding: 12px !important; border-radius: 10px !important; background: var(--popup-bg) !important; }
#pop.pop-zoom > *:not(.pop-head) { margin-left: 0 !important; margin-right: 0 !important; }
#pop.pop-zoom .pop-head { margin: 0 0 12px !important; padding: 0 !important; gap: 10px; }
#pop.pop-zoom .pop-ico { width: 36px; height: 36px; border-radius: 6px; }
#pop.pop-zoom .pop-title .pop-name { font-size: 14px !important; }
#pop.pop-zoom .row-del { width: 32px; height: 32px; border-radius: 6px; }
#pop.pop-zoom .zp-seg { display: flex; gap: 2px; margin: 0 0 6px; padding: 3px; border-radius: 8px; background: #101011; }
#pop.pop-zoom .zp-seg button { flex: 1; height: 32px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #a3a3a8; font-size: 12.5px; font-weight: 500; }
#pop.pop-zoom .zp-seg button:hover { background: #08080a; color: #fff; }
#pop.pop-zoom .zp-seg button.on { background: #cfcfcf; color: #0a0a0a; font-weight: 600; }
#pop.pop-zoom .zp-tile { margin: 0 0 6px; padding: 12px; border-radius: 8px; background: #101011; }
#pop.pop-zoom .zp-tile:last-of-type { margin-bottom: 0; }
#pop.pop-zoom .zscale .field-top { margin-bottom: 8px; }
#pop.pop-zoom .zscale .field-top b { min-width: 0; height: auto; padding: 0; background: none; border-radius: 0; font-size: 14px; font-weight: 600; color: #f2f2f2; }
#pop.pop-zoom .zp-row.zlen { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 12px; }
#pop.pop-zoom .zp-input { padding: 0; gap: 2px; background: transparent; }
#pop.pop-zoom .zp-step { width: 32px; height: 32px; border-radius: 5px; background: var(--popup-bg); }
#pop.pop-zoom .zp-step:hover { background: #26262a; }
#pop.pop-zoom .zp-step:disabled { background: var(--popup-bg); }
#pop.pop-zoom .zp-num { width: 64px; height: 32px; }

/* Zoom popup, pass 2 (the user): one rhythm. Panel padding 12; blocks 6 apart; inner inset 12 (8 around buttons); same 13px text; all 36px controls */
#pop.pop-zoom .pop-head { height: 36px; margin: 0 0 12px !important; }
#pop.pop-zoom .zp-seg { height: 44px; box-sizing: border-box; margin: 0 0 6px !important; padding: 4px; gap: 4px; border-radius: 8px; }
#pop.pop-zoom .zp-seg button { height: 36px; border-radius: 5px; font-size: 13px; }
#pop.pop-zoom .zp-tile { box-sizing: border-box; margin: 0 0 6px !important; border-radius: 8px; }
#pop.pop-zoom .zp-tile.zlen { margin-bottom: 0 !important; }
#pop.pop-zoom .zscale { padding: 12px 12px 10px; }
#pop.pop-zoom .zscale .field-top { height: 20px; margin: 0 0 8px; }
#pop.pop-zoom .zscale .field-top span, #pop.pop-zoom .zp-label { font-size: 13px; font-weight: 500; color: #ededed; line-height: 20px; }
#pop.pop-zoom .zscale .field-top b { font-size: 13px; line-height: 20px; }
#pop.pop-zoom .zscale input[type="range"] { display: block; width: 100%; height: 20px; margin: 0; }
#pop.pop-zoom .zscale input[type="range"]::-webkit-slider-runnable-track { height: 6px; }
#pop.pop-zoom .zscale input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5px; box-shadow: none; }
#pop.pop-zoom .zp-row.zlen { height: 52px; padding: 8px 8px 8px 12px; }
#pop.pop-zoom .zp-step { width: 36px; height: 36px; border-radius: 5px; font-size: 16px; }
#pop.pop-zoom .zp-num { width: 60px; height: 36px; padding: 0; }
#pop.pop-zoom .zp-num input { width: 38px; font-size: 13px; }

/* Zoom popup header, redesigned (the user): one dark tile with the zoom icon, the time range and the length, and the bin as a tile beside it */
#pop.pop-zoom .zp-head { display: flex; align-items: stretch; gap: 6px; height: 44px; margin: 0 0 6px !important; padding: 0 !important; }
#pop.pop-zoom .zp-when { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; align-self: stretch; height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 8px; background: #101011; color: #f2f2f2; font-size: 13px; font-weight: 600; text-decoration: none !important; }
#pop.pop-zoom .zp-when:hover { background: #08080a; color: #fff; }
#pop.pop-zoom .zp-when svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #facc15; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#pop.pop-zoom .zp-when .zt { font-variant-numeric: tabular-nums; }
#pop.pop-zoom .zp-when .zd { margin-left: auto; font-style: normal; font-weight: 500; color: #8d8d92; font-variant-numeric: tabular-nums; }
#pop.pop-zoom .zp-head .row-del { flex: none; width: 44px; height: 44px; margin: 0; border-radius: 8px; background: #101011; color: #b4b4b9; }
#pop.pop-zoom .zp-head .row-del:hover { background: #08080a; color: #f27478; }
/* type switch: more room round the white pill, 6px on every side */
#pop.pop-zoom .zp-seg { height: 48px; padding: 6px; gap: 6px; }
#pop.pop-zoom .zp-seg button { height: 36px; border-radius: 4px; }
/* length number: number + unit centred together on one line */
#pop.pop-zoom .zp-num { display: flex; align-items: center; justify-content: center; gap: 3px; width: 64px; padding: 0; }
#pop.pop-zoom .zp-num input { width: 30px; height: 20px; padding: 0; margin: 0; font-size: 14px; line-height: 20px; text-align: right; }
#pop.pop-zoom .zp-num span { font-size: 13px; line-height: 20px; margin: 0; }
/* typing the length: no outline ring (never borders), the field just lights up as a tile and the caret is white */
#pop.pop-zoom .zp-num { border-radius: 5px; background: transparent; transition: background 0.12s; }
#pop.pop-zoom .zp-num:hover { background: #08080a; }
#pop.pop-zoom .zp-num:focus-within { box-shadow: none !important; outline: 0; background: #26262a; }
#pop.pop-zoom .zp-num input { caret-color: #fff; }
#pop.pop-zoom .zp-num input::selection { background: rgba(255,255,255,0.22); color: #fff; }
/* zoom popup bin: its own dark tile, red by default (the user) */
#pop.pop-zoom .zp-head .row-del { background: #101011 !important; color: #f27478 !important; }
#pop.pop-zoom .zp-head .row-del:hover { background: #08080a !important; color: #ff8a8e !important; }
#pop.pop-zoom .zp-head .row-del svg { stroke: currentColor; }
/* length: the NUMBER sits exactly between - and +; the unit hangs at the right edge */
#pop.pop-zoom .zp-num { position: relative; display: block; width: 72px; }
#pop.pop-zoom .zp-num input { display: block; width: 100%; height: 36px; line-height: 36px; text-align: center; }
#pop.pop-zoom .zp-num span { position: absolute; right: 9px; top: 0; line-height: 36px; pointer-events: none; }
/* Level value you can click and type (the user): plain bold text that lights up as a tile when hovered / typed in */
#pop.pop-zoom .zp-lvl { display: flex; align-items: center; justify-content: flex-end; height: 28px; margin: -4px -6px -4px 0; padding: 0 6px; border-radius: 5px; background: transparent; cursor: text; transition: background 0.12s; }
#pop.pop-zoom .zp-lvl:hover { background: #08080a; }
#pop.pop-zoom .zp-lvl:focus-within { background: #26262a; }
#pop.pop-zoom .zp-lvl input { width: 30px; height: 20px; padding: 0; border: 0; outline: 0; background: transparent; color: #f2f2f2; font-size: 13px; font-weight: 600; line-height: 20px; text-align: right; caret-color: #fff; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
#pop.pop-zoom .zp-lvl input::-webkit-outer-spin-button, #pop.pop-zoom .zp-lvl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#pop.pop-zoom .zp-lvl span { font-size: 13px; font-weight: 600; line-height: 20px; color: #f2f2f2; }

/* Picture + sound popups, built like the zoom popup (the user): same shell, tiles, controls */
#pop.pop-zoom .zp-play { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: #101011; color: #4ade80; }
#pop.pop-zoom .zp-play:hover { background: #08080a; }
#pop.pop-zoom .zp-play svg { width: 14px; height: 14px; fill: currentColor; margin-left: 2px; }
#pop.pop-zoom .zp-when .zt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pop.pop-zoom .zp-when .zd { flex: none; white-space: nowrap; }
#pop.pop-zoom .zp-when.ovl svg { stroke: #8b5cf6; }
#pop.pop-zoom .zp-when.ovl svg circle { fill: #8b5cf6; stroke: none; }
#pop.pop-zoom .zp-cap { margin: 0 0 8px; font-size: 13px; font-weight: 500; line-height: 20px; color: #ededed; }
#pop.pop-zoom .ovp-pos { display: flex; gap: 6px; margin: 0; }
#pop.pop-zoom .ovp-grid { flex: none; display: grid; grid-template-columns: repeat(3, 24px); gap: 3px; padding: 4px; border-radius: 6px; background: var(--popup-bg); }
#pop.pop-zoom .ovp-grid button { width: 24px; height: 24px; border-radius: 4px; }
#pop.pop-zoom .ovp-grid button:hover { background: #26262a; }
#pop.pop-zoom .ovp-xy { flex: 1; min-width: 0; display: grid; gap: 6px; align-content: stretch; }
#pop.pop-zoom .ovp-size { display: flex; gap: 6px; margin: 0; align-items: stretch; }
#pop.pop-zoom .ovp-size .ix-field { flex: 0 0 92px; }
#pop.pop-zoom .ix-field { height: 36px; gap: 6px; padding: 0 10px; border: 0 !important; border-radius: 5px; background: var(--popup-bg) !important; box-shadow: none !important; }
#pop.pop-zoom .ix-field:hover, #pop.pop-zoom .ix-field:focus-within { background: #26262a !important; }
#pop.pop-zoom .ix-field input { font-size: 13px; font-weight: 600; caret-color: #fff; }
#pop.pop-zoom .ix-field .ix-pre, #pop.pop-zoom .ix-field .ix-unit { font-size: 13px; font-weight: 500; color: #8d8d92; }
#pop.pop-zoom .ix-btns { display: flex; gap: 6px; flex: 1; margin: 0; }
#pop.pop-zoom .ix-btns button, #pop.pop-zoom .ix-btns button:first-child, #pop.pop-zoom .ix-btns button:last-child { flex: 1; width: auto; height: 36px; border: 0; border-radius: 5px; background: var(--popup-bg); color: #a3a3a8; font-size: 13px; font-weight: 500; }
#pop.pop-zoom .ix-btns button:hover { background: #26262a; color: #fff; }
#pop.pop-zoom .ix-btns button.on { background: #cfcfcf !important; color: #0a0a0a !important; font-weight: 600; }
/* sound popup: the play button turns into stop while it plays */
#pop.pop-zoom .zp-play .i-stop { display: none; margin-left: 0; }
#pop.pop-zoom .zp-play.on .i-play { display: none; }
#pop.pop-zoom .zp-play.on .i-stop { display: block; }
/* Ask AI: the one AI notice at the top of the chat */
#tab-ai .ai-disclaimer { margin: 0 0 14px; font-size: 12px; line-height: 1.4; color: #454545; text-align: center; }
/* Ask AI: the AI's suggestions above the change box */
#tab-ai .ai-sugs { display: flex; flex-direction: column; gap: 6px; }
#tab-ai .ai-sug { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 8px; background: rgba(255,255,255,0.05); }
#tab-ai .ai-sug-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; color: #d4d4d4; }
#tab-ai .ai-sug .ai-stamp { display: inline; padding: 2px 6px; border: 0; border-radius: 5px; background: rgba(250,204,21,0.16); color: #facc15; font-size: 12px; white-space: nowrap; }
#tab-ai .ai-sug .ai-stamp:hover { background: rgba(250,204,21,0.26); }
#tab-ai .ai-sug-plus { flex: none; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: #cfcfcf; color: #0a0a0a; cursor: pointer; }
#tab-ai .ai-sug-plus:hover { background: #dcdcdc; }
#tab-ai .ai-sug-plus:disabled { opacity: 0.4; cursor: default; }
#tab-ai .ai-sug-plus svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* the bar under the video: the same space around the play button and the Add button */
.transport { padding: 5px; }
/* moving between projects: the editor stays on screen while the next one loads, its controls wait */
body.switching .stage, body.switching .panel, body.switching .timeline-wrap, body.switching #timelineWrap { pointer-events: none; }
#tab-ai .ai-sugs-title { margin-bottom: 4px; font-size: 12px; font-weight: 600; color: #666666; }
/* the chat's messages line up with the boxes under them (suggestions, change box) */
#tab-ai .ai-list.chat { padding-left: 0; padding-right: 0; }
/* the X on every menu: a small dark tile, darker on hover */
.panel-x, #ctxMenu .panel-x, #selMenu .panel-x, #aiAddMenu .panel-x, #soundPick .panel-x, #pop .panel-x, #trackMenu .panel-x, #newTrackMenu .panel-x, #projMenu .panel-x, #presetPick .panel-x { width: 26px !important; height: 26px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 6px !important; background: #101011 !important; color: #a3a3a3 !important; display: flex !important; align-items: center; justify-content: center; }
.panel-x:hover, #ctxMenu .panel-x:hover, #selMenu .panel-x:hover, #aiAddMenu .panel-x:hover, #soundPick .panel-x:hover, #pop .panel-x:hover, #trackMenu .panel-x:hover, #newTrackMenu .panel-x:hover, #projMenu .panel-x:hover, #presetPick .panel-x:hover { background: #08080a !important; color: #ffffff !important; }
.panel-x svg, #ctxMenu .panel-x svg, #selMenu .panel-x svg, #aiAddMenu .panel-x svg, #soundPick .panel-x svg, #pop .panel-x svg, #trackMenu .panel-x svg, #newTrackMenu .panel-x svg, #projMenu .panel-x svg, #presetPick .panel-x svg { width: 10px !important; height: 10px !important; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* the + menu: "Add at" + the time in yellow, the options in groups */
/* the suggestions slide open and closed */
#tab-ai #aiSugs { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, margin-bottom 0.26s cubic-bezier(0.4, 0, 0.2, 1); }
#tab-ai #aiSugs.sugs-off { grid-template-rows: 0fr; opacity: 0; margin-bottom: -8px; pointer-events: none; }
#tab-ai #aiSugs .ai-sugs-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
@media (prefers-reduced-motion: reduce) { #tab-ai #aiSugs { transition: none; } }
.cs.as-modal.for-hook { z-index: 450; }
.cs.for-hook .cs-edit { display: none; }
/* a suggestion row is one button: it goes to its moment, its text can't be selected */
#tab-ai .ai-sug { cursor: pointer; user-select: none; -webkit-user-select: none; }
#tab-ai .ai-sug:hover { background: rgba(255,255,255,0.03); }
/* the hook text popup: the Ask AI chat's own colours, corners, type and sizes */
:is(#hookDlg, #hookEdit) .hk-box { width: min(430px, 100%); box-sizing: border-box; padding: 16px; border-radius: 12px; background: #000000; display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; animation: dlgPop 0.18s ease-out; }
:is(#hookDlg, #hookEdit) .hk-head { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 12px; }
:is(#hookDlg, #hookEdit) .hk-head b { font-size: 15px; font-weight: 600; color: #f5f5f5; }
:is(#hookDlg, #hookEdit) .hk-x { width: 28px; height: 28px; margin-right: -6px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #8a8a8a; cursor: pointer; transition: background 0.15s, color 0.15s; }
:is(#hookDlg, #hookEdit) .hk-x:hover { background: rgba(255,255,255,0.08); color: #ffffff; }
:is(#hookDlg, #hookEdit) .hk-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
:is(#hookDlg, #hookEdit) .hk-text { display: block; width: 100%; box-sizing: border-box; height: 104px; padding: 12px 14px; border: 0; outline: 0; border-radius: 8px; background: rgba(255,255,255,0.06); color: #f2f2f2; font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.5; resize: none; box-shadow: none; user-select: text; -webkit-user-select: text; }
:is(#hookDlg, #hookEdit) .hk-text:focus { background: rgba(255,255,255,0.06); border: 0; outline: 0; box-shadow: none; }
:is(#hookDlg, #hookEdit) .hk-text::placeholder { color: #6b6b6b; }
:is(#hookDlg, #hookEdit) .hk-label { margin: 24px 0 10px; font-size: 12px; font-weight: 600; color: #666666; }
:is(#hookDlg, #hookEdit) .hk-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:is(#hookDlg, #hookEdit) .hk-look, :is(#hookDlg, #hookEdit) .hk-more { height: 56px; padding: 0; border: 0; outline: 0; border-radius: 8px; background: rgba(255,255,255,0.04); cursor: pointer; transition: background 0.15s, color 0.15s; }
:is(#hookDlg, #hookEdit) .hk-look { display: block; position: relative; overflow: hidden; }
:is(#hookDlg, #hookEdit) .hk-look:hover, :is(#hookDlg, #hookEdit) .hk-more:hover { background: rgba(255,255,255,0.10); }
:is(#hookDlg, #hookEdit) .hk-look.on, :is(#hookDlg, #hookEdit) .hk-look.on:hover { background: rgba(255,255,255,0.16); }
:is(#hookDlg, #hookEdit) .hk-view { position: relative; display: block; height: 100%; overflow: hidden; }
:is(#hookDlg, #hookEdit) .hk-more { display: flex; align-items: center; justify-content: center; gap: 6px; color: #a1a1a1; font-size: 12.5px; font-weight: 600; }
:is(#hookDlg, #hookEdit) .hk-more:hover { color: #ffffff; }
:is(#hookDlg, #hookEdit) .hk-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
:is(#hookDlg, #hookEdit) .hk-whole { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; height: 48px; margin: 24px 0 0; padding: 0 14px; border: 0; border-radius: 8px; background: rgba(255,255,255,0.04); font-size: 13px; font-weight: 400; line-height: 1.5; color: #d4d4d4; cursor: pointer; }
:is(#hookDlg, #hookEdit) .hk-add { flex: none; height: 58px; margin-top: 24px; border: 0; border-radius: 8px; background: #cfcfcf; color: #0a0a0a; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
:is(#hookDlg, #hookEdit) .hk-add:hover { background: #dcdcdc; }
:is(#hookDlg, #hookEdit) .hk-add:disabled { background: rgba(255,255,255,0.08); color: #a3a3a3; cursor: default; }
/* titles sit a little inside the rounded boxes' edge, so they look lined up with them */
:is(#hookDlg, #hookEdit) .hk-head b, :is(#hookDlg, #hookEdit) .hk-label { padding-left: 2px; }
/* the hook text popup: More settings */
:is(#hookDlg, #hookEdit) .hk-box { max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; }
:is(#hookDlg, #hookEdit) .hk-box > * { flex: none; }
:is(#hookDlg, #hookEdit) .hk-adv { margin-top: 8px; border-radius: 8px; background: rgba(255,255,255,0.04); }
:is(#hookDlg, #hookEdit) .hk-adv summary { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 14px; border-radius: 8px; font-size: 13px; line-height: 1.5; color: #d4d4d4; cursor: pointer; list-style: none; }
:is(#hookDlg, #hookEdit) .hk-adv summary::-webkit-details-marker { display: none; }
:is(#hookDlg, #hookEdit) .hk-adv summary:hover { color: #ffffff; }
:is(#hookDlg, #hookEdit) .hk-adv summary svg { width: 14px; height: 14px; fill: none; stroke: #8a8a8a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
:is(#hookDlg, #hookEdit) .hk-adv[open] summary svg { transform: rotate(90deg); }
:is(#hookDlg, #hookEdit) .hk-adv-body { display: flex; flex-direction: column; padding: 0 14px 6px; }
/* a clicked hook text: its settings take over the Captions tab */
#tab-captions.hook-on > *:not(#hookEdit) { display: none !important; }
/* the chat reads like a messaging app: the AI's icon outside its bubble, level with the first line; one text size and line height; the corner by the sender is the tight one */
#tab-ai .ai-list.chat { gap: 12px; }
#tab-ai .msg.ai { display: flex; align-items: flex-start; gap: 8px; }
#tab-ai .msg.ai .ai-mark { flex: none; width: 28px; height: 28px; margin-top: 4px; display: grid; place-items: center; border-radius: 50%; background: #cfcfcf; color: #0a0a0a; }
#tab-ai .msg.ai .ai-mark svg { width: 15px; height: 15px; fill: currentColor; display: block; }
#tab-ai .msg.ai.error .ai-mark { background: #e5484d; color: #ffffff; }
#tab-ai .ai-card { display: block; max-width: calc(100% - 64px); padding: 8px 0; border-radius: 0; background: transparent; }
#tab-ai .ai-say { font-size: 14px !important; line-height: 20px; color: #f2f2f2; }
/* the number beside Ask AI: smaller, close to the title */
#tab-ai .ai-count { margin-left: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px; font-size: 10px !important; line-height: 16px; }
/* the hook text settings use the Captions tab's own controls, a little smaller */
#hookDlg { --x-panel: #121212; --x-field: #1c1c1c; --x-field-hi: #232323; --x-on: #2a2a2a; --x-edge: rgba(255,255,255,0.07); --x-edge-hi: rgba(255,255,255,0.14); --x-lift: inset 0 1px 0 rgba(255,255,255,0.04); --x-text: #ededed; --x-text-2: #a1a1a1; --x-text-3: #6e6e6e; }
:is(#hookDlg, #hookEdit) .hk-adv-body .ix-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0; padding: 0; background: none; border: 0; font-size: 13px; font-weight: 400; color: #a1a1a1; }
:is(#hookDlg, #hookEdit) .hk-adv-body .ix-row > span:first-child { flex: none; color: #a1a1a1; }
:is(#hookDlg, #hookEdit) .hk-adv-body .ix-color { height: 32px; }
:is(#hookDlg, #hookEdit) .hk-adv-body .ix-field { width: 90px; height: 32px; }
:is(#hookDlg, #hookEdit) .hk-adv-body .ix-field input { width: 100%; min-width: 0; background: transparent; border: 0; outline: 0; }
:is(#hookDlg, #hookEdit) .hk-adv-body .ix-btns { width: auto; margin: 0; }
:is(#hookDlg, #hookEdit) .hk-adv-body .ix-btns button { width: 44px; height: 32px; }
/* the hook text settings: exact matches with the Captions tab, a quiet scrollbar */
:is(#hookDlg, #hookEdit) .hk-adv-body .ix-field, :is(#hookDlg, #hookEdit) .hk-adv-body .ix-btns button { border: 0; }
#hookDlg .hk-box { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }
/* the Captions dropdown as it is, only less tall */
:is(#hookDlg, #hookEdit) .hk-adv-body .dd-btn { justify-content: space-between; min-width: 104px; height: 32px; padding: 0 12px 0 14px; border: 0; border-radius: 10px; background: rgba(255,255,255,0.08); transition: background 0.15s; }
:is(#hookDlg, #hookEdit) .hk-adv-body .dd-btn:hover, :is(#hookDlg, #hookEdit) .hk-adv-body .dd.open .dd-btn { background: rgba(255,255,255,0.12); }
:is(#hookDlg, #hookEdit) .hk-text-wrap { position: relative; }
:is(#hookDlg, #hookEdit) .hk-text { padding-right: 44px; }
:is(#hookDlg, #hookEdit) .hk-emoji { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #a1a1a1; cursor: pointer; transition: background 0.15s, color 0.15s; }
:is(#hookDlg, #hookEdit) .hk-emoji:hover { background: rgba(255,255,255,0.08); color: #ffffff; }
:is(#hookDlg, #hookEdit) .hk-emoji svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
:is(#hookDlg, #hookEdit) .hk-emoji svg .dot { fill: currentColor; stroke: none; }
:is(#hookDlg, #hookEdit) .hk-emoji-panel.hidden { display: none; }
#tab-ai .msg.me .bubble .ai-text, #tab-ai .msg.me.done .bubble .ai-text { min-width: 0; font-size: 14px !important; line-height: 20px; color: #f2f2f2; overflow-wrap: anywhere; }
#tab-ai .ai-tick { width: 12px; height: 12px; fill: none; stroke: #737373; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(#hookDlg, #hookEdit) .hk-emoji-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; box-sizing: border-box; padding: 8px; border-radius: 8px; background: var(--popup-bg); }
:is(#hookDlg, #hookEdit) .hk-emoji-search input { display: block; width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px; border: 0; outline: 0; border-radius: 6px; background: rgba(255,255,255,0.06); color: #f2f2f2; font-size: 13px; box-shadow: none; }
:is(#hookDlg, #hookEdit) .hk-emoji-search input::placeholder { color: #737373; }
:is(#hookDlg, #hookEdit) .hk-emoji-list { max-height: 240px; margin-top: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }
:is(#hookDlg, #hookEdit) .hk-emoji-head { padding: 8px 2px 4px; font-size: 12px; font-weight: 600; color: #737373; }
:is(#hookDlg, #hookEdit) .hk-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
:is(#hookDlg, #hookEdit) .hk-emoji-grid.hidden, :is(#hookDlg, #hookEdit) .hk-emoji-head.hidden, :is(#hookDlg, #hookEdit) .hk-emoji-grid button.hidden { display: none; }
:is(#hookDlg, #hookEdit) .hk-emoji-grid button { aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: 19px; line-height: 1; cursor: pointer; }
:is(#hookDlg, #hookEdit) .hk-emoji-grid button:hover { background: rgba(255,255,255,0.10); }
/* the 5 s wait in the chat: the dots on the left, a word beside them */
#tab-ai .ai-progress { display: flex; align-items: center; gap: 10px; }
#tab-ai .ai-progress-word { font-size: 13px; line-height: 20px; color: #a1a1a1; }
/* the user's messages: dark gray, the same simple shape as the AI's, the time under the bubble */
#tab-ai .msg.me { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#tab-ai .msg.me .bubble, #tab-ai .msg.me.done .bubble { display: block; flex: 0 1 auto; min-width: 0; max-width: 80%; padding: 8px 12px; border-radius: 6px; background: #262626; }
#tab-ai .msg.me > .msg-meta { flex: none; display: inline-flex; align-items: center; gap: 3px; margin: 0; padding: 0 2px 0 0; color: #737373; }
#tab-ai .msg.me > .msg-meta .ai-stamp, #tab-ai .msg.me.done > .msg-meta .ai-stamp { padding: 0; border: 0; border-radius: 0; background: none; color: #737373; font-size: 11px !important; font-weight: 400; line-height: 16px; cursor: pointer; }
#tab-ai .msg.me > .msg-meta .ai-stamp:hover { background: none; color: #f2f2f2; }
/* a file sent in the chat: a standard square preview whatever its shape, the words under it */
#tab-ai .msg.me .bubble.ai-added { display: block; width: fit-content; max-width: 80%; padding: 4px; }
#tab-ai .ai-added-pic { width: 96px; height: 96px; overflow: hidden; border-radius: 3px; background: #1b1b1d; }
#tab-ai .ai-added-pic img, #tab-ai .ai-added-pic video { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
#tab-ai .ai-added .ai-text { padding: 6px 8px 4px; }
/* the controls of a selected picture on the video, as in Photoshop: a thin blue line, small white squares with a blue edge */
.overlays .ovl.sel { outline: 1px solid #2b8cff; outline-offset: 0; }
.overlays .ovl .ovh { box-sizing: border-box; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 1px solid #2b8cff; border-radius: 0; background: #cfcfcf; box-shadow: none; }
.overlays .ovl .ovh::before { content: ""; position: absolute; inset: -5px; }
:is(#hookDlg, #hookEdit) .hk-text-wrap { display: flex; align-items: center; min-height: 124px; box-sizing: border-box; padding: 18px 0 18px; border-radius: 8px; background: rgba(255,255,255,0.06); }
:is(#hookDlg, #hookEdit) .hk-canvas { position: relative; width: 100%; }
:is(#hookDlg, #hookEdit) .hk-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
:is(#hookDlg, #hookEdit) .hk-mirror { position: absolute; left: 0; top: 0; width: 100%; box-sizing: border-box; padding: 2px 34px; text-align: center; white-space: pre-wrap; overflow-wrap: break-word; pointer-events: none; font-weight: 400; }
:is(#hookDlg, #hookEdit) .hk-text, :is(#hookDlg, #hookEdit) .hk-text:hover, :is(#hookDlg, #hookEdit) .hk-text:focus { position: relative; display: block; width: 100%; min-height: 0; height: auto; box-sizing: border-box; padding: 2px 34px; background: transparent; border: 0; outline: 0; box-shadow: none; border-radius: 0; color: transparent; text-align: center; white-space: pre-wrap; overflow: hidden; resize: none; font-weight: 400; }
:is(#hookDlg, #hookEdit) .hk-text::placeholder { color: transparent; }
/* the hook text box: the whole box is the place to type, gentle changes */
:is(#hookDlg, #hookEdit) .hk-text-wrap { cursor: text; transition: background 0.15s; }
:is(#hookDlg, #hookEdit) .hk-text-wrap:hover { background: rgba(255,255,255,0.07); }
:is(#hookDlg, #hookEdit) .hk-text-wrap:focus-within { background: rgba(255,255,255,0.09); }
:is(#hookDlg, #hookEdit) .hk-shape path { transition: fill 0.15s, d 0.1s ease-out; }
:is(#hookDlg, #hookEdit) .hk-mirror { transition: color 0.15s, opacity 0.15s; }
:is(#hookDlg, #hookEdit) .hk-text::selection { background: rgba(43,140,255,0.32); color: transparent; }
:is(#hookDlg, #hookEdit) .hk-emoji { z-index: 2; }
:is(#hookDlg, #hookEdit) .hk-look, :is(#hookDlg, #hookEdit) .hk-add { user-select: none; -webkit-user-select: none; }
/* the user's messages go to their moment when clicked */
#tab-ai .msg.me .bubble { cursor: pointer; }
/* the + menu: one row shape, one icon tile, short names under small group titles */
#aiAddMenu { box-sizing: border-box; width: 252px; min-width: 0; padding: 8px; border: 0 !important; border-radius: 12px; background: var(--popup-bg) !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
#aiAddMenu .panel-x { top: 9px !important; right: 9px !important; }
#aiAddMenu .add-head { display: flex; align-items: center; gap: 6px; min-height: 26px; margin: 0 0 2px; padding: 0 34px 0 6px; font-size: 13px; font-weight: 600; color: #f2f2f2; }
#aiAddMenu .add-time { padding: 2px 6px; border-radius: 5px; background: rgba(250,204,21,0.16); color: #facc15; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
#aiAddMenu .add-sep { height: 1px; margin: 8px 6px; background: rgba(255,255,255,0.07); }
#aiAddMenu button[data-a] { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 8px 0 5px; border: 0; border-radius: 8px; background: transparent; color: #ededed; text-align: left; cursor: pointer; transition: background 0.12s; }
#aiAddMenu button[data-a]:hover { background: rgba(255,255,255,0.07); }
#aiAddMenu .add-ico { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,0.06); }
#aiAddMenu .add-ico svg { display: block; width: 16px !important; height: 16px !important; }
#aiAddMenu .add-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aiAddMenu .add-chev { flex: none; width: 14px; height: 14px; fill: none; stroke: #737373; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the + menu's head: one quiet line, the time in yellow words, a plain X */
#aiAddMenu .add-head { gap: 5px; min-height: 28px; margin: 0 0 4px; padding: 0 34px 0 6px; font-size: 13px; font-weight: 500; color: #a1a1a1; }
#aiAddMenu .add-time { padding: 0; border-radius: 0; background: none; color: #facc15; font-size: 13px; font-weight: 600; }
#aiAddMenu .panel-x { top: 9px !important; right: 8px !important; width: 28px !important; height: 28px !important; border-radius: 6px !important; background: transparent !important; color: #8a8a8a !important; }
#aiAddMenu .panel-x:hover { background: rgba(255,255,255,0.07) !important; color: #ffffff !important; }
#aiAddMenu .panel-x svg { width: 14px !important; height: 14px !important; stroke-width: 1.6; }
#aiAddMenu .add-sep { margin: 6px; background: rgba(255,255,255,0.04); }

/* question and "couldn't find it" messages (looks are edited in Cutly Admin > Chat looks) */
#tab-ai .ai-q, #tab-ai .ai-unres { margin: 4px 0 0 30px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.04); color: #e9e9e9; font-size: 14px; line-height: 1.5; }
#tab-ai .ai-q-text, #tab-ai .ai-unres-text { margin-bottom: 10px; }
#tab-ai .ai-q-opts { display: flex; flex-wrap: wrap; gap: 8px; }
#tab-ai .ai-q-btn { font: inherit; font-size: 13px; padding: 8px 14px; border: 0; border-radius: 999px; background: #303030; color: #ededed; cursor: pointer; }
#tab-ai .ai-q-btn:hover { background: #3a3a3a; }
#tab-ai .ai-q-btn.pick { background: #cfcfcf; color: #0a0a0a; }

.find-flash { outline: 2px solid #cfcfcf; outline-offset: 2px; border-radius: 4px; }
#tab-ai .ai-cost { margin: 2px 0 0 34px; font-size: 12px; color: #8b8b8b; }

/* the user's comment bubble: a big soft pill-like shape (the user's reference), roomy padding and line height; colour unchanged */
#tab-ai .msg.me .bubble:not(.ai-added) { max-width: 88%; padding: 10px 16px 11px; border-radius: 14px 14px 4px 14px; }
#tab-ai .msg.me .bubble:not(.ai-added) .ai-text { font-size: 15px !important; line-height: 1.5; }

/* Ask AI header and the AI notice (restyle): bigger title, the count a small grayish-white dot, the notice a soft translucent chip */
#tab-ai .ai-head { padding: 18px 18px 12px; gap: 10px; }
#tab-ai .ai-head > span:first-child { font-size: 17px; letter-spacing: -0.015em; }
#tab-ai .ai-count { margin-left: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #cfcfcf; color: #0a0a0a; font-size: 11px !important; font-weight: 700; line-height: 20px; }
#tab-ai .ai-disclaimer { display: block; width: fit-content; max-width: calc(100% - 36px); margin: 2px auto 16px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #8f8f8f; font-size: 12px; line-height: 1.3; text-align: center; }

/* the whole app's background: 95% black (#010101), every main area the same; things on top (cards, controls) keep their own lighter fills */
:root { --bg: #010101; --stage: #010101; --nav: #010101; --mid: #010101; --panel: #010101; }
html, body { background: linear-gradient(90deg, #000000, #010101) fixed !important; }
.topbar, .videos, .timeline-wrap, .panel, #tab-ai, #tab-ai .ai-scroll { background: transparent !important; }

/* every big panel gets a plain dark edge on all four sides (an outline drawn inside, so nothing shifts) - desktop */
@media (min-width: 821px) {
  .topbar, .videos, .stage, .timeline-wrap, .panel { outline: 1px solid #111111; outline-offset: -1px; }
}

/* only the area behind the video (the stage) is 98% black, #010101; everything else is the app background */
.stage { background: #010101 !important; }

/* the Open timeline tab's own shape (the flared tab) is pure black; the box behind it stays transparent */
.tl-toggle { background: transparent !important; }
.tl-toggle::before { background: #000000 !important; }
.tl-toggle:hover::before { background: #111111 !important; }

/* Ask AI chat polish: calmer notice, the AI's answer in a soft card that mirrors the user's bubble, bubbles with a faint edge, more air between turns */
#tab-ai .ai-disclaimer { margin: 0 auto 18px; padding: 6px 12px; font-size: 11.5px; color: #7d7d7d; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.05); }
#tab-ai .ai-list { gap: 0; padding: 0 14px 12px; }
#tab-ai .msg.ai { align-items: flex-start; gap: 10px; margin: 6px 0 18px; }
#tab-ai .msg.ai .ai-mark { width: 26px; height: 26px; margin-top: 1px; background: #cfcfcf; }
/* no background or edge on the AI's answer, but its text keeps the padding a card would give it, so it lines up as if it had one */
#tab-ai .msg.ai:not(.error) .ai-card { padding: 10px 14px 11px !important; border-radius: 4px 14px 14px 14px !important; background: transparent !important; border: 1px solid transparent; }
#tab-ai .msg.ai .ai-say { padding: 0 !important; font-size: 14.5px; line-height: 1.5; color: #e8e8e8; }
#tab-ai .msg.me { margin-top: 4px; }
#tab-ai .msg.me .bubble:not(.ai-added) { background: rgba(255,255,255,0.09) !important; border: 1px solid rgba(255,255,255,0.07); }
#tab-ai .msg.me + .msg.me { margin-top: 14px; }
#tab-ai .msg-meta { margin: 1px 4px 0 0; font-size: 11px; color: #707070; }
#tab-ai .ai-cost { margin: 4px 0 0 36px; font-size: 11px; color: #707070; }

/* user bubbles: one solid dark colour, #1a1a1a, no fade and no edge */
#tab-ai .msg.me .bubble:not(.ai-added) { background: #171717 !important; border-color: transparent !important; }

/* the AI's answer like a real message: the text starts at the icon's top (not centred on it) and sits close to it */
#tab-ai .msg.ai { gap: 8px; }
#tab-ai .msg.ai .ai-mark { margin-top: 0; }
#tab-ai .msg.ai:not(.error) .ai-card { padding: 3px 4px 4px 0 !important; }

/* the open-comment count next to "Ask AI" is removed entirely */
#aiCount, #tab-ai .ai-count, .ai-count { display: none !important; }

/* ONE spacing in the chat: 16 px between the notice and the first message and between every two messages, whoever wrote them */
#tab-ai { --chat-gap: 16px; }
#tab-ai .ai-disclaimer { margin: 0 auto calc(var(--chat-gap) * 2) !important; }
#tab-ai .ai-list { display: flex !important; flex-direction: column; gap: var(--chat-gap) !important; }
#tab-ai .ai-list > .msg, #tab-ai .ai-list > .msg + .msg, #tab-ai .msg.me + .msg.me, #tab-ai .msg.me + .msg.ai, #tab-ai .msg.ai + .msg.me, #tab-ai .msg.ai { margin-top: 0 !important; margin-bottom: 0 !important; }

/* a plain gray line under the whole nav area (the container around the tab bar, full width), like the other navs; the tab bar itself is unchanged */
.panel > .tabs-bar { border-bottom: 1px solid #2a2a2a !important; padding-bottom: 10px; margin-bottom: 6px; }

/* every white is our grayish white #cfcfcf: the text colour, the filled buttons (open tab, Export, Run AI, send) and the near-white labels */
:root { --text: #cfcfcf; }
.panel .tabs button.on, .panel .tabs button.on:hover, #render, #render.primary, .ai-run, #aiRun, #aiAdd, .ai-send { background: #cfcfcf !important; border-color: #cfcfcf !important; color: #0a0a0a !important; }
.ai-head > span:first-child, #tab-ai .ai-text, #tab-ai .ai-say, #aiText, .ai-plus, #aiPlus, .brand, .brand-d, #csBack, #csCancel { color: #cfcfcf !important; }
#tab-ai .msg.me .bubble .ai-text { color: #cfcfcf !important; }
.cs-head b, #csSearch { color: #cfcfcf !important; }

/* the grayish-white fills get a slight sideways gradient: #cfcfcf on the left, 2% darker (#cacaca) on the right */
.panel .tabs button.on, .panel .tabs button.on:hover, #render, #render.primary, .ai-run, #aiRun, #aiAdd, .ai-send, #tab-ai .msg.ai .ai-mark, .count-badge { background: linear-gradient(90deg, #c2c2c2, #9e9e9e) !important; }
#tab-ai .ai-run.primary:not(:disabled) { background: linear-gradient(90deg, #c2c2c2, #9e9e9e) !important; }
#tab-ai .ai-run.primary:not(:disabled):hover { background: linear-gradient(90deg, #cbcbcb, #a7a7a7) !important; }
/* the send arrow and Run AI are the same colour, resting and on hover */
#tab-ai .ai-send, #aiAdd, #tab-ai .ai-run.primary:not(:disabled) { background: linear-gradient(90deg, #c2c2c2, #9e9e9e) !important; }
#tab-ai .ai-send:hover, #aiAdd:hover, #tab-ai .ai-run.primary:not(:disabled):hover { background: linear-gradient(90deg, #cbcbcb, #a7a7a7) !important; }

/* the moment chip (0:00.0) is a full colour, a vivid green (#3ecf8e text on a 16% wash), the same green as the app's done tick; a picked range is a grayish-white chip */
#tab-ai .ai-compose .ai-stamp { background: rgba(74,222,128,0.14) !important; color: #4ade80 !important; border: 1px solid rgba(74,222,128,0.3) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#tab-ai .ai-compose .ai-stamp:hover { background: rgba(74,222,128,0.22) !important; }
#tab-ai .ai-compose .ai-stamp.range, .ai-stamp.range { background: linear-gradient(90deg, #c2c2c2, #9e9e9e) !important; color: #0a0a0a !important; border-color: transparent !important; }
button.ai-stamp:hover { border-color: transparent; }
#aiAddMenu .add-time, #aiAddMenu .add-head { color: #cfcfcf !important; }
.bubble-meta .ai-stamp, .msg-meta .ai-stamp { color: #8b8b8b; }

/* the area behind the video stays 98% black, #050505; everything else (page, navs, panels) is 99% black, #010101 */
.stage { background: #050505 !important; }

/* the message box: darker, 10% see-through with the content behind it blurred, and a 1% sideways gradient (left #161616 -> right #191919), fully opaque */
#tab-ai .ai-compose { background: linear-gradient(90deg, #090909, #0c0c0c) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* the message box buttons in a logical order: when (the moment chip), what to cut, the transcript to find it, then + to add things; send stays on the right */
#tab-ai .ai-compose .ai-stamp { order: 1 !important; }
#tab-ai .ai-compose .ai-cut { order: 2 !important; }
#tab-ai .ai-compose .ai-peek-btn { order: 3 !important; }
#tab-ai .ai-compose .ai-plus { order: 4 !important; }
#tab-ai .ai-compose .ai-send { order: 6 !important; margin-left: auto; }

/* tab bar (modern): the same dark gradient as the message box, a soft pill shape; each tab has an icon, the open one grows to show its name (gray-white gradient), the others are icon-only */
.panel .tabs-bar .tabs { display: flex !important; gap: 4px; margin: 12px 14px 0 !important; padding: 5px !important; border: 0 !important; border-radius: 18px !important; background: linear-gradient(90deg, #090909, #0c0c0c) !important; overflow: hidden; }
.panel .tabs-bar .tabs button { flex: 0 0 46px !important; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 !important; border-radius: 13px !important; background: transparent !important; color: #8f8f8f; font-size: 13px; font-weight: 600; overflow: hidden; transition: flex-basis 0.2s ease, background 0.15s, color 0.15s; }
.panel .tabs-bar .tabs button svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.panel .tabs-bar .tabs button span { display: none; white-space: nowrap; }
.panel .tabs-bar .tabs button:hover { background: rgba(255,255,255,0.07) !important; color: #e2e2e2; }
.panel .tabs-bar .tabs button.on, .panel .tabs-bar .tabs button.on:hover { flex: 1 1 auto !important; background: linear-gradient(90deg, #c2c2c2, #9e9e9e) !important; color: #0a0a0a; }
.panel .tabs-bar .tabs button.on span { display: inline; }

/* every tab shows its name (icon above the label), equal widths, so the options can be read before clicking */
.panel .tabs-bar .tabs button, .panel .tabs-bar .tabs button.on, .panel .tabs-bar .tabs button.on:hover { flex: 1 1 0 !important; min-width: 0; height: 50px; flex-direction: column; gap: 5px; padding: 0 2px !important; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; }
.panel .tabs-bar .tabs button svg { width: 17px; height: 17px; }
.panel .tabs-bar .tabs button span, .panel .tabs-bar .tabs button.on span { display: block; line-height: 1; }

/* the nav may scroll sideways: every tab is icon + name in one row at its natural width (the user: scrolling is fine) */
.panel .tabs-bar .tabs { overflow-x: auto !important; overflow-y: hidden; scrollbar-width: none; }
.panel .tabs-bar .tabs::-webkit-scrollbar { display: none; }
.panel .tabs-bar .tabs button, .panel .tabs-bar .tabs button.on, .panel .tabs-bar .tabs button.on:hover { flex: 0 0 auto !important; height: 40px; flex-direction: row; gap: 8px; padding: 0 14px !important; font-size: 13px; letter-spacing: 0; }
.panel .tabs-bar .tabs button svg { width: 16px; height: 16px; }

/* compact tabs, so more can be added later without the bar getting crazy */
.panel .tabs-bar .tabs { gap: 2px; margin: 10px 10px 0 !important; padding: 4px !important; border-radius: 16px !important; }
.panel .tabs-bar .tabs button, .panel .tabs-bar .tabs button.on, .panel .tabs-bar .tabs button.on:hover { height: 36px; gap: 6px; padding: 0 10px !important; font-size: 12px; border-radius: 12px !important; }
.panel .tabs-bar .tabs button svg { width: 15px; height: 15px; }

/* tab bar: the whole rectangle is the background (no pill), a thin scrollbar, a little more air */
.panel > .tabs-bar { background: linear-gradient(90deg, #090909, #0c0c0c) !important; padding: 8px 10px 0 !important; margin-bottom: 6px; }
.panel .tabs-bar .tabs { margin: 0 !important; padding: 0 0 8px !important; gap: 4px; background: transparent !important; border-radius: 0 !important; overflow-x: auto !important; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.panel .tabs-bar .tabs::-webkit-scrollbar { display: block; height: 4px; }
.panel .tabs-bar .tabs::-webkit-scrollbar-track { background: transparent; }
.panel .tabs-bar .tabs::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 4px; }
.panel .tabs-bar .tabs button, .panel .tabs-bar .tabs button.on, .panel .tabs-bar .tabs button.on:hover { height: 38px; padding: 0 12px !important; }

/* tab bar: back to the panel's black, no pill; the scrollbar sits in its own rounded track, no arrows */
.panel > .tabs-bar { background: transparent !important; padding: 8px 10px 10px !important; }
.panel .tabs-bar .tabs { padding: 0 0 10px !important; scrollbar-width: auto !important; scrollbar-color: auto !important; }
.panel .tabs-bar .tabs::-webkit-scrollbar { display: block; height: 8px; }
.panel .tabs-bar .tabs::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.panel .tabs-bar .tabs::-webkit-scrollbar-track { background: #141414; border-radius: 8px; }
.panel .tabs-bar .tabs::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 8px; border: 1px solid #141414; }

/* tab bar: more air around, the scrollbar is a quiet hairline so the tabs keep the spotlight */
.panel > .tabs-bar { padding: 14px 16px 12px !important; }
.panel .tabs-bar .tabs { gap: 6px; padding: 0 0 12px !important; }
.panel .tabs-bar .tabs::-webkit-scrollbar { height: 3px; }
.panel .tabs-bar .tabs::-webkit-scrollbar-track { background: #0d0d0d; border-radius: 3px; }
.panel .tabs-bar .tabs::-webkit-scrollbar-thumb { background: #232323; border: 0; border-radius: 3px; }
.panel .tabs-bar .tabs:hover::-webkit-scrollbar-thumb { background: #333; }

/* moment chip: soft transparent green glass pill (option 8) */
#tab-ai .ai-compose .ai-stamp { background: linear-gradient(90deg, rgba(74,222,128,0.10), rgba(74,222,128,0.02)) !important; color: #4ade80 !important; border: 1px solid rgba(74,222,128,0.18) !important; border-radius: 999px !important; }
#tab-ai .ai-compose .ai-stamp:hover { background: linear-gradient(90deg, rgba(74,222,128,0.16), rgba(74,222,128,0.05)) !important; }
#tab-ai .ai-compose .ai-stamp.range { background: linear-gradient(90deg, #c2c2c2, #9e9e9e) !important; color: #0a0a0a !important; border-color: transparent !important; }

/* tab bar: the scrollbar sits just above the border, no empty band under it */
.panel > .tabs-bar { padding-bottom: 3px !important; margin-bottom: 0 !important; }
.panel .tabs-bar .tabs { padding-bottom: 8px !important; }

/* moment chip: same corners as the + button (11px), darker, calmer glow */
#tab-ai .ai-compose .ai-stamp { background: linear-gradient(90deg, rgba(74,222,128,0.06), rgba(74,222,128,0.01)) !important; color: #3dbb69 !important; border: 1px solid rgba(74,222,128,0.12) !important; border-radius: 11px !important; }
#tab-ai .ai-compose .ai-stamp:hover { background: linear-gradient(90deg, rgba(74,222,128,0.10), rgba(74,222,128,0.03)) !important; }
#tab-ai .ai-compose .ai-stamp.range { background: linear-gradient(90deg, #c2c2c2, #9e9e9e) !important; color: #0a0a0a !important; border-color: transparent !important; }

/* moment chip: the brighter green as the base, a tiny bit darker, the right side 2% less opaque */
#tab-ai .ai-compose .ai-stamp { background: linear-gradient(90deg, rgba(74,222,128,0.09), rgba(74,222,128,0.07)) !important; color: #46d377 !important; border: 1px solid rgba(74,222,128,0.16) !important; border-radius: 11px !important; }
#tab-ai .ai-compose .ai-stamp:hover { background: linear-gradient(90deg, rgba(74,222,128,0.14), rgba(74,222,128,0.11)) !important; }
#tab-ai .ai-compose .ai-stamp.range { background: linear-gradient(90deg, #c2c2c2, #9e9e9e) !important; color: #0a0a0a !important; border-color: transparent !important; }

/* suggestion times: the same green as the moment chip */
#tab-ai .ai-sug .ai-stamp { background: linear-gradient(90deg, rgba(74,222,128,0.09), rgba(74,222,128,0.07)) !important; color: #46d377 !important; }
#tab-ai .ai-sug .ai-stamp:hover { background: linear-gradient(90deg, rgba(74,222,128,0.14), rgba(74,222,128,0.11)) !important; }

/* top bar buttons: one height, the same 11px corners as the chat buttons, quiet colours */
.topbar #trainSave, .topbar #render, .topbar #moreBtn { height: 38px; border-radius: 11px !important; font-size: 13px; line-height: 1; }
.topbar #trainSave { padding: 0 16px; font-weight: 600; background: linear-gradient(90deg, rgba(74,222,128,0.09), rgba(74,222,128,0.07)) !important; color: #46d377 !important; border: 1px solid rgba(74,222,128,0.16) !important; }
.topbar #trainSave:hover:not(:disabled) { background: linear-gradient(90deg, rgba(74,222,128,0.14), rgba(74,222,128,0.11)) !important; }
.topbar #render { padding: 0 20px; font-weight: 600; background: linear-gradient(90deg, #c2c2c2, #9e9e9e) !important; color: #0a0a0a !important; border: 0 !important; }
.topbar #render:hover:not(:disabled) { filter: brightness(1.06); }
.topbar #moreBtn { width: 38px; padding: 0; background: linear-gradient(90deg, #090909, #0c0c0c) !important; border: 1px solid #1c1c1c !important; color: #9a9a9a; }
.topbar #moreBtn:hover { color: #e2e2e2; border-color: #2a2a2a !important; }
.topbar #moreBtn svg { fill: currentColor; }

/* Save for training: plain gray box, yellow text (for now) */
.topbar #trainSave { background: #1b1b1b !important; color: #facc15 !important; border: 0 !important; }
.topbar #trainSave:hover:not(:disabled) { background: #242424 !important; }

/* More (three dots): no border */
.topbar #moreBtn, .topbar #moreBtn:hover { border: 0 !important; }

/* message box: a gentler gradient, the dark end stays, the light end is a little lower */
#tab-ai .ai-compose { background: linear-gradient(90deg, #090909, #0b0b0b) !important; }

/* More menu: gradient panel (option 2), gray pill hover (option 1), red Delete pill, every label on one line, icons in one column */
#moreMenu.dd-menu { background: linear-gradient(180deg, #0e0e0e, #080808) !important; border: 0 !important; border-radius: 16px !important; padding: 8px !important; width: max-content !important; min-width: 250px !important; max-width: calc(100vw - 24px) !important; max-height: min(480px, 85vh) !important; }
#moreMenu button { height: 40px; padding: 0 14px; gap: 12px; border-radius: 11px; color: #cfcfcf; white-space: nowrap; margin-bottom: 2px; }
#moreMenu button span { flex: 1; white-space: nowrap; text-align: left; line-height: 1; }
#moreMenu .sm-ico { width: 16px; height: 16px; min-width: 16px; flex: none; }
#moreMenu button:hover:not(:disabled) { background: #181818; color: #f2f2f2; border: 0; }
#moreMenu .sm-sep { margin: 6px 6px; background: #141414; }
#moreMenu .danger, #moreMenu .danger .sm-ico { color: #1a0808; stroke: #1a0808; }
#moreMenu button.danger { background: #f27478; }
#moreMenu button.danger:hover:not(:disabled) { background: #f58a8e; color: #1a0808; }

/* More menu: a barely-there gradient, a deeper crimson Delete pill */
#moreMenu.dd-menu { background: linear-gradient(180deg, #0c0c0c, #0a0a0a) !important; }
#moreMenu button.danger { background: #c4434f; }
#moreMenu .danger, #moreMenu .danger .sm-ico { color: #fff1f2; stroke: #fff1f2; }
#moreMenu button.danger:hover:not(:disabled) { background: #d44e5a; color: #fff1f2; }

/* More menu: more compact */
#moreMenu.dd-menu { padding: 6px !important; min-width: 214px !important; border-radius: 14px !important; }
#moreMenu button { height: 34px; padding: 0 11px; gap: 10px; border-radius: 10px; font-size: 13px; margin-bottom: 1px; }
#moreMenu .sm-sep { margin: 4px 6px; }

/* More menu: rows match the nav buttons (12px), the panel a little less round */
#moreMenu.dd-menu { border-radius: 12px !important; }
#moreMenu button { border-radius: 12px; }
#moreMenu .sm-ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* More menu: the gradient only uses dark colours */
#moreMenu.dd-menu { background: linear-gradient(180deg, #0a0a0a, #060606) !important; }

/* More menu: a gentler gradient, the dark end is the main colour */
#moreMenu.dd-menu { background: linear-gradient(180deg, #080808, #060606) !important; }

/* More menu icons: a little larger and clearer */
#moreMenu .sm-ico { width: 18px; height: 18px; min-width: 18px; stroke-width: 1.4; }

/* Delete project: not filled, red text and icon, a soft red wash on hover */
#moreMenu button.danger { background: transparent; }
#moreMenu .danger, #moreMenu .danger .sm-ico { color: #e5646f; stroke: #e5646f; }
#moreMenu button.danger:hover:not(:disabled) { background: rgba(229,100,111,0.12); color: #ef7a84; }
#moreMenu button.danger:hover:not(:disabled) .sm-ico { stroke: #ef7a84; }

/* Testing section of the More menu (admin only, to delete later) */
#moreMenu .menu-label { padding: 6px 11px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a8892a; }
#moreMenu #trainSave { height: 34px; padding: 0 11px; border-radius: 12px; background: transparent !important; color: #cfcfcf !important; border: 0 !important; font-size: 13px; font-weight: 500; }
#moreMenu #trainSave:hover:not(:disabled) { background: #181818 !important; color: #f2f2f2 !important; }

/* moment chip: option 18, tight 7px corners, flat soft green with a faint edge */
#tab-ai .ai-compose .ai-stamp { background: rgba(74,222,128,0.09) !important; color: #46d377 !important; border: 1px solid rgba(74,222,128,0.16) !important; border-radius: 7px !important; }
#tab-ai .ai-compose .ai-stamp:hover { background: rgba(74,222,128,0.14) !important; }
#tab-ai .ai-compose .ai-stamp.range { background: linear-gradient(90deg, #c2c2c2, #9e9e9e) !important; color: #0a0a0a !important; border-color: transparent !important; }

/* moment chip: option 19, dark box with a green edge */
#tab-ai .ai-compose .ai-stamp { background: #0a0a0a !important; color: #46d377 !important; border: 1px solid rgba(74,222,128,0.28) !important; border-radius: 9px !important; }
#tab-ai .ai-compose .ai-stamp:hover { background: #101010 !important; border-color: rgba(74,222,128,0.4) !important; }
#tab-ai .ai-compose .ai-stamp.range { background: linear-gradient(90deg, #c2c2c2, #9e9e9e) !important; color: #0a0a0a !important; border-color: transparent !important; }

/* project list: the Edited tag matches the moment chip; the Storage card matches the message box */
.videos .video-item .ready-tag[data-s="ready"] { color: #46d377; background: #0a0a0a; border: 1px solid rgba(74,222,128,0.28); border-radius: 7px; padding: 1px 8px; }
.videos .storage::after { background: linear-gradient(90deg, #090909, #0b0b0b) !important; border-radius: 12px; }
.videos .storage:hover::after { background: linear-gradient(90deg, #0c0c0c, #0e0e0e) !important; }
.videos .storage .st-top span { color: #cfcfcf; }
.videos .storage .st-top b { color: #7d7d7d; }
.videos .storage .st-bar { height: 4px; border-radius: 4px; background: #1a1a1a; }
.videos .storage .st-bar i { border-radius: 4px; background: linear-gradient(90deg, #c2c2c2, #9e9e9e); }

/* project list: only the list scrolls (its scrollbar stops above Storage); Storage is a fixed footer on the nav's own colour, split off by a border */
.videos { display: flex !important; flex-direction: column; overflow: hidden !important; }
.videos > * { flex: 0 0 auto; }
.videos #videoList { flex: 1 1 auto; min-height: 0; margin-bottom: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; padding-bottom: 8px; }
.videos .side-empty { flex: 0 0 auto; }
.videos .storage { position: static !important; flex: 0 0 auto; margin: 6px -10px 0; width: calc(100% + 20px); padding: 12px 20px 14px; background: transparent !important; border: 0 !important; border-top: 1px solid #141414 !important; border-radius: 0 !important; }
.videos .storage::before, .videos .storage::after { display: none !important; }
.videos .storage:hover { background: rgba(255,255,255,0.02) !important; }

/* left bar: nav rows (Profile, Plan, Settings, Help) with Storage right below */
.videos .side-nav { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; margin: 6px -10px 0; padding: 8px 10px 4px; border-top: 1px solid #141414; }
.videos .side-nav button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: 12px; color: #bdbdbd; font-size: 13px; font-weight: 500; cursor: pointer; }
.videos .side-nav button:hover { background: #121212; color: #f2f2f2; }
.videos .side-nav button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.videos .storage { margin-top: 0 !important; border-top: 0 !important; padding-top: 6px !important; }

/* ===== left bar, round 2: list-menu nav with Storage inside it; roomier, calmer project rows ===== */
.videos .side-nav { gap: 1px; margin: 6px -10px 0; padding: 8px 10px 10px; }
.videos .side-nav > button, .videos .side-nav > .storage { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 0 12px; border-radius: 12px; color: #bdbdbd; font-size: 13px; font-weight: 500; cursor: pointer; position: static !important; width: auto !important; margin: 0 !important; background: transparent !important; border: 0 !important; }
.videos .side-nav > button:hover, .videos .side-nav > .storage:hover { background: #101010 !important; color: #f2f2f2; }
.videos .side-nav svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.videos .side-nav .chev { width: 14px; height: 14px; margin-left: auto; color: #6f6f6f; }
.videos .side-nav .me { margin-top: 6px; padding-top: 0; border-top: 0; height: 44px; color: #e6e6e6; }
.videos .side-nav .me::before { content: ""; position: absolute; }
.videos .side-nav .avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #c2c2c2, #8a8a8a); flex: none; }
.videos .side-nav > .storage { display: grid !important; grid-template-columns: 18px 1fr; column-gap: 12px; row-gap: 7px; align-items: center; padding: 8px 12px 10px; }
.videos .side-nav > .storage.hidden { display: none !important; }
.videos .side-nav > .storage .st-top { display: contents; }
.videos .side-nav > .storage .st-top svg { grid-row: 1; grid-column: 1; }
.videos .side-nav > .storage .st-top span { grid-row: 1; grid-column: 2; font-size: 13px; font-weight: 500; color: inherit; }
.videos .side-nav > .storage .st-top b { grid-row: 1; grid-column: 2; justify-self: end; font-size: 11.5px; font-weight: 400; color: #6f6f6f; }
.videos .side-nav > .storage .st-bar { grid-row: 2; grid-column: 2; height: 3px; border-radius: 3px; background: #1a1a1a; }
.videos .side-nav > .storage .st-bar i { border-radius: 3px; background: linear-gradient(90deg, #c2c2c2, #9e9e9e); }


/* nav rows: one icon column (20px), one text start, every row the same size and weight */
.videos .side-nav > button, .videos .side-nav > .storage { padding: 0 14px !important; gap: 14px !important; min-height: 40px !important; font-size: 13px !important; font-weight: 500 !important; color: #bdbdbd !important; }
.videos .side-nav svg:not(.chev) { width: 20px !important; height: 20px !important; stroke-width: 1.4 !important; }
.videos .side-nav .avatar { width: 20px !important; height: 20px !important; }
.videos .side-nav .me { height: 40px !important; margin-top: 4px; color: #bdbdbd !important; }
.videos .side-nav .me span { font-size: 13px; font-weight: 500; }
.videos .side-nav > .storage { grid-template-columns: 20px 1fr !important; column-gap: 14px !important; padding-top: 8px !important; padding-bottom: 10px !important; }
.videos .side-nav > .storage .st-bar { margin-bottom: 0; }
.videos .side-nav > button:hover, .videos .side-nav > .storage:hover { color: #f2f2f2 !important; }

/* project list: same look, one card per project, name on top, then the tag (left) and the length (right) */
@media all {
  .videos #videoList { gap: 8px !important; }
  .videos .video-item { background: linear-gradient(90deg, #090909, #0b0b0b) !important; border-radius: 14px !important; padding: 8px 10px 8px 8px !important; box-sizing: border-box; height: 86px !important; min-height: 86px !important; max-height: 86px !important; align-items: center; }
  .videos .video-item:hover { background: linear-gradient(90deg, #0c0c0c, #0e0e0e) !important; }
  .videos .video-item.on { background: linear-gradient(90deg, #141414, #171717) !important; }
  .videos .video-item .thumb { align-self: center; }
  .videos .video-item .item-text { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 10px; align-content: center; align-items: center; min-width: 0; flex: 1; overflow: hidden; }
  .videos .video-item .name { display: contents !important; }
  .videos .video-item .name span { grid-column: 1 / -1; grid-row: 1; min-width: 0; max-width: calc(100% - 30px); font-size: 14px; font-weight: 600; color: #ececec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .videos .video-item .state, .videos .video-item .state[data-s="busy"] { grid-column: 1; grid-row: 2; margin: 0 !important; justify-self: start; }
  .videos .video-item .name em { grid-column: 2; grid-row: 2; justify-self: end; margin: 0 !important; font-style: normal; font-size: 12px; font-weight: 500; color: #8b8b8b; font-variant-numeric: tabular-nums; }
  .videos .video-item .item-del { top: 8px !important; right: 8px !important; }
}

/* project list scrollbar: right against the sidebar's border, thin, no arrows */
@media (min-width: 821px) {
  .videos #videoList { margin-right: -10px !important; padding-right: 10px !important; scrollbar-width: auto !important; scrollbar-color: auto !important; }
  .videos #videoList::-webkit-scrollbar { width: 6px; }
  .videos #videoList::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  .videos #videoList::-webkit-scrollbar-track { background: transparent; }
  .videos #videoList::-webkit-scrollbar-thumb { background: #262626; border-radius: 6px; border: 1px solid transparent; background-clip: padding-box; }
  .videos #videoList::-webkit-scrollbar-thumb:hover { background: #343434; background-clip: padding-box; }
}

/* project cards: smaller corners, no length */
@media all {
  .videos .video-item { border-radius: 10px !important; }
  .videos .video-item .thumb { border-radius: 7px !important; }
  .videos .video-item .name em { display: none !important; }
}

/* project cards: the length sits right after the name; the status is a quiet dot + word, no box */
@media all {
  .videos .video-item .item-text { grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: 8px; row-gap: 9px; }
  .videos .video-item .name span { grid-column: 1; max-width: 100%; }
  .videos .video-item .name em { display: block !important; grid-column: 2; grid-row: 1; justify-self: start; font-size: 12px; font-weight: 500; color: #6f6f6f; }
  .videos .video-item .state, .videos .video-item .state[data-s="busy"] { grid-column: 1 / -1; grid-row: 2; }
  .videos .video-item .ready-tag { display: inline-flex; align-items: center; gap: 7px; padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: #8f8f8f; }
  .videos .video-item .ready-tag::before { content: "" !important; display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
  .videos .video-item .ready-tag[data-s="ready"] { color: #46d377; }
  .videos .video-item .ready-tag[data-s="failed"] { color: #ef7a84; }
  .videos .video-item .ready-tag[data-s="new"] { color: #8f8f8f; }
  .videos .video-item .ready-tag[data-s="making"] { color: #e0b341; }
}

/* project cards: status is only its coloured word (no dots); the length shares the name's baseline */
@media all {
  .videos .video-item .state::before, .videos .video-item .ready-tag::before { display: none !important; content: none !important; }
  .videos .video-item .ready-tag { gap: 0; }
  .videos .video-item .name span, .videos .video-item .name em { align-self: baseline; line-height: 1.2; }
  .videos .video-item .name em { padding-bottom: 0; transform: none; }
}

/* project ... menu: the same look as the top bar ... menu */
#projMenu.sel-menu { background: linear-gradient(180deg, #080808, #060606) !important; border: 0 !important; border-radius: 12px !important; padding: 6px !important; width: max-content !important; min-width: 214px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#projMenu button { height: 34px; padding: 0 11px; gap: 10px; border-radius: 12px; color: #cfcfcf; font-size: 13px; font-weight: 500; white-space: nowrap; margin-bottom: 1px; }
#projMenu button span { flex: 1; white-space: nowrap; text-align: left; line-height: 1; }
#projMenu .sm-ico { width: 18px; height: 18px; min-width: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#projMenu button:hover:not(:disabled) { background: #181818; color: #f2f2f2; border: 0; }
#projMenu .sm-sep { margin: 4px 6px; background: #141414; }
#projMenu .danger, #projMenu .danger .sm-ico { color: #e5646f; stroke: #e5646f; }
#projMenu button.danger { background: transparent; }
#projMenu button.danger:hover:not(:disabled) { background: rgba(229,100,111,0.12); color: #ef7a84; }
#projMenu button.danger:hover:not(:disabled) .sm-ico { stroke: #ef7a84; }

/* project cards: type sized like the rest of the app, even spacing between the two lines */
@media all {
  .videos .video-item .item-text { row-gap: 5px !important; align-content: center; }
  .videos .video-item .name span { font-size: 13px !important; font-weight: 600; line-height: 18px !important; height: 18px !important; }
  .videos .video-item .name em { font-size: 11px !important; line-height: 18px !important; }
  .videos .video-item .state, .videos .video-item .state[data-s="busy"] { font-size: 11.5px !important; line-height: 18px !important; height: 18px !important; padding: 0 !important; }
  .videos .video-item .ready-tag { font-size: 11.5px !important; line-height: 18px !important; height: 18px; }
}

/* left nav: breathing room under Profile */
.videos .side-nav { padding-bottom: 22px !important; }

/* tab bar: the same gap under its scrollbar as the project list has */
.panel > .tabs-bar { padding-bottom: 3px !important; }

/* Storage row: the same 12px corners as the other nav rows on hover */
.videos .side-nav > .storage { border-radius: 12px !important; }

/* select videos: one slim row of three small buttons, no title, no big card */
#pickBar { display: flex !important; gap: 6px; align-items: center; padding: 6px !important; margin: 4px 0 8px !important; border-radius: 12px !important; background: #0b0b0b !important; border: 0 !important; }
#pickBar.hidden { display: none !important; }
#pickBar .ps-head { display: none !important; }
#pickBar .pick-btns { display: contents !important; }
#pickBar .ps-btn { flex: 1 1 0; width: auto !important; min-width: 0; height: 30px !important; padding: 0 8px !important; border-radius: 9px !important; font-size: 12px !important; font-weight: 500 !important; background: #161616 !important; color: #cfcfcf !important; border: 0 !important; }
#pickBar #pickAll { order: 1; }
#pickBar #pickCancel { order: 2; }
#pickBar .ps-btn.danger { order: 3; background: rgba(229,100,111,0.14) !important; color: #ef7a84 !important; }
#pickBar .ps-btn:hover:not(:disabled) { background: #1f1f1f !important; }
#pickBar .ps-btn.danger:hover:not(:disabled) { background: rgba(229,100,111,0.22) !important; }
#pickBar .ps-btn.danger:disabled { background: #111 !important; color: #4a4a4a !important; }

/* select mode: unselected cards fade so the checkbox stands out; a selected card is full strength */
.videos .video-item:has(.pick-box) .thumb, .videos .video-item:has(.pick-box) .item-text { opacity: 0.45; transition: opacity 0.15s; }
.videos .video-item:has(.pick-box):hover .thumb, .videos .video-item:has(.pick-box):hover .item-text { opacity: 0.75; }
.videos .video-item.picked .thumb, .videos .video-item.picked .item-text { opacity: 1 !important; }
.videos .video-item .pick-box { top: 50%; left: auto; right: 12px; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 8px; border: 2px solid #8a8a8a; background: #0a0a0a; }
.videos .video-item .pick-box svg { width: 16px; height: 16px; }
.videos .video-item.picked .pick-box { border-color: #4ade80; background: #4ade80; }
.videos .video-item.picked { background: linear-gradient(90deg, #141414, #171717) !important; }

/* select mode (option 8): small chips under the header */
#pickBar.pick-chips { display: flex !important; flex-wrap: wrap; gap: 6px; padding: 0 2px !important; margin: 2px 0 10px !important; background: transparent !important; border-radius: 0 !important; }
#pickBar.pick-chips.hidden { display: none !important; }
#pickBar .pk-chip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border-radius: 9px; background: #161616; color: #cfcfcf; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
#pickBar .pk-chip:hover:not(:disabled) { background: #1f1f1f; color: #f2f2f2; }
#pickBar .pk-chip.red { background: rgba(229,100,111,0.14); color: #ef7a84; }
#pickBar .pk-chip.red:hover:not(:disabled) { background: rgba(229,100,111,0.22); }
#pickBar .pk-chip:disabled { background: #101010; color: #484848; cursor: default; }
#pickBar .pk-chip.x { width: 28px; padding: 0; }
#pickBar .pk-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* select chips: one row in this order: Select all, Delete N, X (older id rules had reordered and stacked them) */
#pickBar.pick-chips { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; text-align: left !important; padding: 0 12px !important; margin: 4px 0 10px !important; width: 100%; box-sizing: border-box; }
#pickBar.pick-chips > * { order: 0 !important; flex: 0 1 auto !important; width: auto; }
#pickBar #pickAll { order: 1 !important; }
#pickBar #pickDelete { order: 2 !important; }
#pickBar #pickCancel { order: 3 !important; width: 28px !important; flex: none !important; }
#pickBar .pk-chip { padding: 0 11px !important; }

/* select chips: Cancel as a word, chips line up with the cards' left edge, same 10px corners as the cards */
#pickBar.pick-chips { padding: 0 !important; gap: 6px !important; }
#pickBar .pk-chip { height: 30px !important; border-radius: 10px !important; padding: 0 12px !important; }
#pickBar #pickCancel { width: auto !important; flex: 0 1 auto !important; padding: 0 12px !important; }

/* select chips: three different roles */
#pickBar #pickAll { background: linear-gradient(90deg, #c2c2c2, #9e9e9e) !important; color: #0a0a0a !important; font-weight: 600 !important; }
#pickBar #pickAll:hover { filter: brightness(1.06); }
#pickBar #pickCancel { background: transparent !important; color: #8f8f8f !important; }
#pickBar #pickCancel:hover { background: #141414 !important; color: #f2f2f2 !important; }

/* version: plain quiet text, no tag */
.app-version { background: transparent !important; padding: 0 !important; border-radius: 0 !important; margin-left: 6px !important; color: #4f4f4f !important; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.app-version.stale { background: transparent !important; color: #f5b82e !important; }

/* select chips: squarer corners, all the same height */
#pickBar .pk-chip, #pickBar #pickAll, #pickBar #pickDelete, #pickBar #pickCancel { height: 30px !important; min-height: 30px !important; max-height: 30px !important; line-height: 1 !important; border-radius: 6px !important; padding: 0 14px !important; box-sizing: border-box !important; align-self: center; }
#pickBar #pickCancel { background: #101010 !important; }

/* select chips: a touch to the right, to line up optically with the rounded cards below */
#pickBar.pick-chips { padding-left: 4px !important; }

/* project cards: slightly squarer */
@media all {
  .videos .video-item { border-radius: 7px !important; }
  .videos .video-item .thumb { border-radius: 5px !important; }
}
#pickBar.pick-chips { padding-left: 2px !important; }

/* New project: the Upload folder button */
.newpage .np-foot { margin-top: 20px; gap: 12px; }
.newpage .np-more { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 12px; background: linear-gradient(90deg, #0d0d0d, #101010); color: #cfcfcf; font-size: 13.5px; font-weight: 500; }
.newpage .np-more svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.newpage .np-more:hover { background: linear-gradient(90deg, #131313, #161616); color: #f2f2f2; }

/* Upload folder: sits close under the drop box */
.newpage .np-foot { margin-top: 0 !important; }

/* Upload folder: a gentler gradient */
.newpage .np-more { background: linear-gradient(90deg, #0f0f0f, #101010); }
.newpage .np-more:hover { background: linear-gradient(90deg, #141414, #151515); }

/* Upload folder: practically flat */
.newpage .np-more { background: linear-gradient(90deg, #101010, #101010); }
.newpage .np-more:hover { background: #151515; }

/* New project: articles from the blog (placeholders for now): fixed-size cards, app.js sets --np-row to whole cards + the arrow */
.newpage.has-media .np-blog { display: none; }
.np-blog { --blog-w: var(--np-row, 100%); width: var(--blog-w); margin: 44px 0 0 calc((100% - var(--blog-w)) / 2); }
.np-blog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 5px; }
.np-blog.has-arrow .np-blog-head { padding-right: 53px; }
.np-blog-head h2 { margin: 0; font-size: 15px; font-weight: 600; color: #e6e6e6; }
.np-all { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 500; color: #a8a8a8; text-decoration: none; transition: color 0.15s; }
.np-all svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.np-all:hover { color: #f2f2f2; }
.np-all:hover svg { transform: translateX(2px); }
.np-posts-wrap { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.np-posts { flex: 1 1 0; min-width: 0; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.np-posts::-webkit-scrollbar { display: none; }
.np-post { flex: 0 0 200px; min-width: 0; scroll-snap-align: start; box-sizing: border-box; display: flex; flex-direction: column; padding: 5px 5px 12px; border-radius: 13px; background: #0e0e0f; text-decoration: none; color: inherit; transition: background 0.15s; }
.np-post:hover { background: #161617; }
.np-art { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 9px; margin-bottom: 10px; background: #141416; }
.np-art svg { display: block; width: 100%; height: 100%; }
.np-art text { font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.np-post b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.6em; padding: 0 7px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #e6e6e6; }
.np-desc { display: block; margin-top: 4px; padding: 0 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; line-height: 1.4; color: #6f6f6f; }
.np-post:hover .np-desc { color: #8a8a8a; }
/* the thumbnails: dark, one quiet colour each */
.np-post-cut .np-art { background: linear-gradient(135deg, #17423f, #0d1413); }
.np-post-hook .np-art { background: linear-gradient(135deg, #47261a, #140e0c); }
.np-post-caps .np-art { background: linear-gradient(135deg, #2b2a58, #0f0f18); }
.np-post-zoom .np-art { background: linear-gradient(135deg, #3d3714, #10100b); }
.np-post-batch .np-art { background: linear-gradient(135deg, #1c3250, #0c1016); }
.np-next, .np-prev { flex: none; margin-top: 44px; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; background: #1b1b1d; color: #cfcfcf; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background 0.15s; }
.np-prev { position: absolute; left: -10px; top: 0; }
.np-next:hover, .np-prev:hover { background: #262628; color: #fff; }
.np-next svg, .np-prev svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.np-prev svg { transform: scaleX(-1); }
.np-posts-wrap.at-end .np-next, .np-posts-wrap.at-start .np-prev { visibility: hidden; }
.np-posts-wrap.all-fit .np-next { display: none; }

/* New project: the flowing light behind the page is drawn by glow.js; without WebGL this plain gradient stays. It stays put while the page scrolls */
.newpage .np-inner { position: relative; z-index: 1; }
.np-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(70% 70% at 50% -10%, rgba(37,99,235,0.32), transparent 72%), radial-gradient(45% 60% at 72% -5%, rgba(124,58,237,0.26), transparent 74%); }
.np-glow canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
.np-glow canvas.on { opacity: 1; }

/* New project: every panel and the plus icon are the same 10% white, with a blur behind the panels */
.newpage .np-drop { background: rgba(255,255,255,0.1) !important; color: #f2f2f2; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.newpage .np-drop:hover { background: rgba(255,255,255,0.16) !important; }
.newpage .np-drop b, .newpage .np-drop .np-pct { color: #f2f2f2 !important; }
.newpage .np-drop > span:not(.np-stack), .newpage .np-drop.up.has > span:last-of-type { color: rgba(255,255,255,0.72) !important; }
.newpage #aiSetup, .newpage .np-files { background: rgba(255,255,255,0.1) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.newpage .np-stack i { background: rgba(255,255,255,0.1) !important; }
.np-post, .np-next, .np-prev { background: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.np-post:hover, .np-next:hover, .np-prev:hover { background: rgba(255,255,255,0.16); }
.np-desc { color: rgba(255,255,255,0.6); }
.np-post:hover .np-desc { color: rgba(255,255,255,0.72); }
.newpage .np-more { background: rgba(255,255,255,0.1) !important; color: #f2f2f2; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.newpage .np-more:hover { background: rgba(255,255,255,0.16) !important; color: #fff; }

/* No padding under the timeline: its scrollbar sits at the very bottom */
.timeline-wrap { padding-bottom: 0; }

/* Project list scrollbar: 3px from the sidebar's border and from the border above Storage; the cards don't move */
@media (min-width: 821px) {
  .videos #videoList { margin-right: -7px !important; padding-right: 7px !important; }
  .videos #sideNav { margin-top: 3px !important; }
}

/* No project open: no top bar. Only the logo stays, at the top of the sidebar; the bar comes back when a project opens */
@media (min-width: 821px) {
  body.no-project .topbar { position: fixed; top: 0; left: 0; z-index: 3; width: var(--left-w, 210px); box-sizing: border-box; background: transparent !important; border: 0; outline: 0; pointer-events: none; }
  body.no-project .videos::before { content: ""; flex: none; height: 47px; }
}

/* New project: the whole page sits in the middle of the window, up and down too; taller than the window it starts at the top and scrolls */
.empty:has(> .newpage:not(.hidden)) { display: block; padding-top: 48px !important; padding-bottom: 48px !important; }
.newpage { min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.newpage > .np-inner { margin-top: auto; margin-bottom: auto; }

/* Transcript tab: Replace / Delete appear while searching; the text style row works like a text editor's */
#tab-transcript .tr-tools { margin-bottom: 10px; }
.tr-found { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.tr-found.hidden { display: none; }
.tr-found .tr-rep { display: none; flex: 1; min-width: 0; height: 36px; margin: 0; padding: 0 12px; border-radius: 10px; }
.tr-found.replacing .tr-rep { display: flex; }
.tr-act { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255,255,255,0.07); color: #d0d0d0; font-size: 13px; font-weight: 500; cursor: pointer; }
.tr-act:hover { background: rgba(255,255,255,0.11); color: #fff; }
.tr-format { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 14px; padding: 3px; border-radius: 11px; background: rgba(255,255,255,0.07); }
.tr-format button { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #d0d0d0; font-size: 14px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.tr-format button b { font-weight: 800; }
.tr-format button i { font-style: italic; font-family: Georgia, "Times New Roman", serif; font-weight: 600; }
.tr-format button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tr-format button:hover { background: rgba(255,255,255,0.09); color: #fff; }
.tr-format button.on { background: #cfcfcf; color: #0a0a0a; }
.tr-format.no-words button { color: #6f6f6f; }
.tr-fsep { width: 1px; height: 18px; margin: 0 4px; background: rgba(255,255,255,0.12); }
#tab-transcript .transcript .w.sb { font-weight: 800; }
#tab-transcript .transcript .w.si { font-style: italic; }
#tab-transcript .transcript .w.su:not(.cut) { text-decoration: underline; text-underline-offset: 3px; }

/* A word's own style in the caption preview, the same look as the caption pictures (captions_render.py: BOLD_FAT, ITALIC_LEAN) */
.cap-i { font-style: italic; font-synthesis: style; }
.cap-u { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.1em; }
.cap-b { position: relative; }
.cap-b::after { content: attr(data-t); position: absolute; left: 0; white-space: nowrap; -webkit-text-stroke: 0.06em currentColor; paint-order: normal; pointer-events: none; }

/* The transcript is always editable, like a document: a typing cursor on click, the same look */
#tab-transcript .transcript.live { user-select: text; -webkit-user-select: text; cursor: text; outline: 0; caret-color: #fff; }
#tab-transcript .transcript.live { padding: 14px 16px 20px; border-radius: 12px; background: rgba(255,255,255,0.07); font-size: 14px !important; font-weight: 400; line-height: 1.7; letter-spacing: 0; word-spacing: 0; color: #e6e6e6; }
#tab-transcript .transcript.live .w { padding: 2px 1px; border-radius: 4px; }
#tab-transcript .transcript.live .w { cursor: text; }

/* Upload Preferences: the real Captions and Cuts tabs sit inside it, one under the other. Their own video-only buttons are not for a preset */
#ssPanels #tab-auto { display: block; flex: none; min-height: 0; padding: 0; overflow: visible; }
#ssPanels #tab-auto > .ps-action { display: none !important; }
#ssPanels { margin: 10px 0; }
#tab-settings .ss-title { margin: 22px 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: #ededed; }

/* Upload Preferences: the panels inherit the same text colour as in their own tabs; the name box and the two buttons at the bottom */
#ssPanels { color: #cfcfcf; }
#tab-settings .ss-name { margin-bottom: 8px; }
#tab-settings .ss-name input { text-align: left; }
#tab-settings .ss-name input:read-only { color: #8a8a8a; cursor: default; }
#tab-settings .ss-actions { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
#tab-settings .ss-actions button { display: block; min-width: 0; height: 52px; padding: 0 12px; font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#tab-settings .ss-actions button::before { display: none; }
#tab-settings .ss-actions button.alt { background: rgba(255,255,255,0.1); color: #f2f2f2; }
#tab-settings .ss-actions button.alt:hover { background: rgba(255,255,255,0.16); }

/* Save new preset: the Hook text popup's look */
#presetDlg .hk-box { width: min(430px, 100%); box-sizing: border-box; padding: 16px; border-radius: 12px; background: #000000; display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; animation: dlgPop 0.18s ease-out; }
#presetDlg .hk-head { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 12px; }
#presetDlg .hk-head b { padding-left: 2px; font-size: 15px; font-weight: 600; color: #f5f5f5; }
#presetDlg .hk-x { width: 28px; height: 28px; margin-right: -6px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #8a8a8a; cursor: pointer; transition: background 0.15s, color 0.15s; }
#presetDlg .hk-x:hover { background: rgba(255,255,255,0.08); color: #ffffff; }
#presetDlg .hk-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
#presetDlg .hk-name { display: block; width: 100%; box-sizing: border-box; height: 58px; padding: 0 16px; border: 0; outline: 0; border-radius: 8px; background: rgba(255,255,255,0.06); color: #f2f2f2; font-family: inherit; font-size: 15px; user-select: text; -webkit-user-select: text; }
#presetDlg .hk-name:focus { background: rgba(255,255,255,0.08); border: 0; outline: 0; box-shadow: none; }
#presetDlg .hk-name::placeholder { color: #6b6b6b; }
#presetDlg .hk-add { flex: none; height: 58px; margin-top: 12px; border: 0; border-radius: 8px; background: #cfcfcf; color: #0a0a0a; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
#presetDlg .hk-add:hover { background: #dcdcdc; }
#presetDlg .hk-add:disabled { background: rgba(255,255,255,0.08); color: #a3a3a3; cursor: default; }

/* Popups have a thin border in the colour of the nav's line */
#hookDlg .hk-box, #presetDlg .hk-box, .dlg-back .modal-box.dlg { border: 1px solid rgba(255,255,255,0.09) !important; }

/* The action buttons of a panel (Update / Save new preset, Redo auto cuts) sit on a solid strip at the very bottom of the panel: nothing shows through or around them while scrolling */
.tab.ps-panel { padding-bottom: 0 !important; }
.ps-panel > .ps-action { bottom: 0; margin: 18px -16px 0; padding: 12px 16px 12px; background: #000; z-index: 3; }
.ps-panel > .ps-action > span { margin-top: -2px; }
.ps-action button:disabled { opacity: 1; background: #1c1c1c; color: #7a7a7a; }
.ps-action button:disabled:hover { background: #1c1c1c; }
#tab-settings .ss-actions button:disabled { background: #1c1c1c; color: #7a7a7a; }

/* Upload Preferences: Captions and Cuts are accordions. The heading is a card; the real panel opens under it */
#ssPanels { margin: 10px 0; display: flex; flex-direction: column; gap: 10px; }
#ssPanels .ss-acc { margin: 0; }
#ssPanels .ss-acc.closed + .ss-body { display: none; }
#ssPanels .ss-body { margin: 0 0 8px; }
#ssPanels .ss-acc .ps-head { margin-bottom: 0; }
/* a short panel still has its action buttons at the very bottom */
.tab.ps-panel.on { display: flex; flex-direction: column; }
.tab.ps-panel.on > * { flex: none; }
.tab.ps-panel.on > .ps-action { margin-top: auto; }

/* Caption presets, at the top of the Captions panel */
#tab-captions .cp-card { display: flex; flex-direction: column; gap: 8px; }
#tab-captions .cp-card .ix-head { margin-bottom: 4px; }
.cp-row { display: flex; gap: 8px; }
.cp-pick { flex: 1; min-width: 0; }
.cp-pick .dd, .cp-pick select { width: 100%; }
.cp-del { flex: none; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(255,255,255,0.07); color: #f27478; cursor: pointer; }
.cp-del:hover:not(:disabled) { background: rgba(255,255,255,0.11); }
.cp-del:disabled { color: #5c5c5c; cursor: default; }
.cp-del svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#tab-captions .cp-name.hidden, .cp-acts button.hidden { display: none; }
#tab-captions .cp-name input { text-align: left; }
.cp-acts { display: flex; gap: 8px; }
.cp-acts button { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; font-size: 13px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
#capPresetUpdate { background: #cfcfcf; color: #0a0a0a; }
#capPresetUpdate:hover:not(:disabled) { background: #dcdcdc; }
#capPresetUpdate:disabled { background: #1c1c1c; color: #7a7a7a; cursor: default; }
#capPresetNew { background: rgba(255,255,255,0.1); color: #f2f2f2; }
#capPresetNew:hover { background: rgba(255,255,255,0.16); }

/* An open accordion is one block in the same colour as the AI edit card. Everything inside is grouped on it: no cards inside, only the controls have a fill */
#ssPanels .ss-acc:not(.closed) { background: var(--ps-card); border-radius: 16px 16px 0 0; padding-bottom: 6px; }
#ssPanels .ss-acc:not(.closed) + .ss-body { margin: -10px 0 0; padding: 6px 16px 18px; background: var(--ps-card); border-radius: 0 0 16px 16px; }
#ssPanels .ss-body .ps-card, #ssPanels .ss-body .ix, #ssPanels .ss-body details.cx-group, #ssPanels .ss-body .cx-stage { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#ssPanels .ss-body .ps-card, #ssPanels .ss-body .ix { margin: 0 0 22px !important; padding: 0 !important; border-radius: 0 !important; }
#ssPanels .ss-body .ps-card:last-of-type, #ssPanels .ss-body details.cx-group { margin-bottom: 0 !important; }
/* The Name boxes use the same size as the dropdown above them */
#tab-settings .ss-name input, #tab-captions .cp-name input { font-size: 14px !important; font-weight: 600; }
#tab-settings .ss-name .ps-pre, #tab-captions .cp-name .ix-pre { font-size: 13px !important; font-weight: 500; }

/* Upload Preferences: Caption style card. The tiles look like the Captions tab's */
#ssCaptionStyle .cs-quick { margin-bottom: 0; }
#ssCaptionStyle .ps-label { margin-top: 14px; }
#ssCaptionStyle .cs-q-name { display: none; }
#ssCaptionStyle .ss-own .cs-q-name { display: block; margin-top: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: #a1a1a1; text-align: center; }
#ssCaptionStyle .cs-more { padding: 0; border: 0; background: transparent; cursor: pointer; }
#ssCaptionStyle .cs-more-box { display: flex; align-items: center; justify-content: center; gap: 5px; height: 52px; border-radius: 12px; background: rgba(255,255,255,0.07); color: #d0d0d0; font-size: 12px; font-weight: 500; white-space: nowrap; }
#ssCaptionStyle .cs-more:hover .cs-more-box { background: rgba(255,255,255,0.11); color: #fff; }
#ssCaptionStyle .cs-more-box span { display: inline !important; }
#ssCaptionStyle .cs-more-box svg { flex: none; width: 13px; height: 13px; }
/* Inside an open accordion each group (Video length, Cut style...) is its own dark card */
#ssPanels .ss-body .ps-card { background: #070708 !important; margin: 0 0 8px !important; padding: 14px !important; border-radius: 12px !important; }
#ssPanels .ss-body .ps-card:last-of-type { margin-bottom: 0 !important; }
#ssPanels .ss-acc:not(.closed) + .ss-body { padding: 4px 12px 12px; }

/* The whole Upload Preferences tab has one look: an accordion in the AI edit colour, its content on dark cards, the options as they are */
#tab-settings > .ps-card:not(.closed) { padding: 18px 12px 12px; }
#tab-settings > .ps-card:not(.closed) > .ps-head { padding: 0 4px; margin-bottom: 12px; }
#tab-settings > .ps-card > .ss-inner { padding: 14px; border-radius: 12px; background: #070708; }
#tab-settings > .ps-card.closed > .ss-inner { display: none; }
#tab-settings > .ps-card > .ss-inner > :first-child { margin-top: 0; }
#tab-settings > .ps-card > .ss-inner > :last-child { margin-bottom: 0; }
#ssPanels .ss-acc:not(.closed) { padding: 18px 16px 6px; }
#ssPanels .ss-acc:not(.closed) > .ps-head { padding: 0; margin-bottom: 6px; }
#tab-settings .ss-actions #presetCancel { padding: 0 14px; }
/* Caption style tiles: like the Captions tab's, no frame: the chosen one is bright, the others at half strength; smaller corners */
#ssCaptionStyle .cs-q { padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; }
#ssCaptionStyle .cs-q::before, #ssCaptionStyle .cs-q::after, #ssCaptionStyle .cs-q-view::before, #ssCaptionStyle .cs-q-view::after { display: none !important; }
#ssCaptionStyle .cs-q-view { height: 56px; border: 0 !important; outline: 0 !important; box-shadow: none !important; border-radius: 8px !important; background: rgba(255,255,255,0.04) !important; }
#ssCaptionStyle .cs-q.on .cs-q-view { background: rgba(255,255,255,0.16) !important; }
#ssCaptionStyle .cs-q:not(.on):hover .cs-q-view { background: rgba(255,255,255,0.1) !important; }
#ssCaptionStyle .cs-q:not(.on) .cs-q-view > * { opacity: 0.5; }
#ssCaptionStyle .cs-q:not(.on):hover .cs-q-view > * { opacity: 1; }
#ssCaptionStyle .cs-more-box { height: 56px; border-radius: 8px; background: rgba(255,255,255,0.04); color: #a1a1a1; }
#ssCaptionStyle .cs-more:hover .cs-more-box { background: rgba(255,255,255,0.1); }
/* the three bottom buttons fit their words */
#tab-settings .ss-actions button { padding: 0 8px; font-size: 13px; }

/* Upload Preferences: captions on / off above the style tiles (faded while off), the profile's notes for the AI */
#ssCaptionStyle .ss-capsw { margin: 0 0 10px; }
#ssCaptionStyle.caps-off .cs-quick, #ssCaptionStyle.caps-off #ssOwnLabel { opacity: 0.4; }
#tab-settings .ss-notes { display: block; position: relative; margin: 8px 0 0; }
#tab-settings .ss-notes textarea { box-sizing: border-box; background: rgba(255,255,255,0.07) !important; color: #f2f2f2; font-family: inherit; font-size: 14px; }

/* Renaming a project in its row: same text, a soft fill */
.videos .video-item .name .name-edit { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; box-sizing: border-box; height: 22px; margin: -2px 0; padding: 0 5px; border: 0; outline: 0; border-radius: 4px; background: rgba(255,255,255,0.1); color: #ececec; font: inherit; font-size: 13px; font-weight: 600; user-select: text; -webkit-user-select: text; }
.videos .video-item:has(.name-edit) .name em { display: none !important; }
.videos .video-item .name .name-edit { font-size: 13px !important; font-weight: 600 !important; line-height: 18px; }

/* Upload Preferences: only Cuts has the third colour. The other cards are the card's background and the options' background */
#tab-settings > .ps-card:not(.closed) { padding: 18px 16px 16px; }
#tab-settings > .ps-card:not(.closed) > .ps-head { padding: 0; }
#tab-settings > .ps-card > .ss-inner { padding: 0; border-radius: 0; background: transparent; }

/* The preview note on the stage (#050505): fully black, no border */
.preview-note { background: #000000 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; }

/* ---- sign-in screen (public app only; shown by auth.js when there is no session). STYLE.md: flat, no borders, no shadows, popup colour. */
.signin { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: var(--stage, #070707); }
.signin.hidden { display: none; }
.signin-box { width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 32px 28px; border-radius: 16px; background: var(--popup-bg, #1b1b1d); }
.signin-box h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--text); text-align: center; }
.signin-google { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 8px; background: #f2f2f2; color: #111; font-size: 15px; font-weight: 600; cursor: pointer; }
.signin-google:hover { background: #fff; }
.signin-google svg { width: 20px; height: 20px; }
.signin-note { margin: 0; font-size: 13px; line-height: 1.4; text-align: center; color: #e5888b; }
.signin-note.hidden { display: none; }
.signin-small { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
body.signed-out { overflow: hidden; }