/* Scissor Film editor at /app/: flat, dense, one accent colour. Uses the tokens from app.css. */

html, body { height: 100%; }
body.ed-page { overflow: hidden; font-size: 13px; letter-spacing: -0.01em; background: var(--bg-alt); touch-action: pan-x pan-y; }
.ed {
  width: 100%; height: 100dvh; display: grid;
  grid-template-columns: 72px 280px minmax(0, 1fr) 280px;
  grid-template-rows: 48px minmax(0, 1fr) min(var(--tl-h, 270px), 46vh);
  grid-template-areas: 'top top top top' 'rail panel stage inspect' 'tl tl tl tl';
}
.ed svg.i { width: 18px; height: 18px; flex: none; }
.ed h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.ed-hint { color: var(--text-2); font-size: 12px; line-height: 1.45; margin: 10px 0; }

/* Top bar */
.ed-top { grid-area: top; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px; background: var(--surface); border-bottom: 1px solid var(--hair); }
.ed-top .brand { font-size: 15px; white-space: nowrap; }
.ed-sep { width: 1px; height: 20px; background: var(--line); }
.ed-name { border: 1px solid transparent; background: none; border-radius: 6px; padding: 4px 6px; font-size: 14px; font-weight: 600; width: 220px; }
.ed-name:hover { border-color: var(--line); }
.ed-name:focus { outline: none; border-color: var(--accent); }
.ed-badge { font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface-2); padding: 3px 8px; border-radius: 999px; }
.ed-top-end { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.ed-top-end .btn { margin-inline-start: 8px; }
.ed-top-end .btn svg.i { width: 15px; height: 15px; }
.ed-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.ed-icon:hover { background: var(--surface-2); }
.ed-icon[disabled] { opacity: 0.4; pointer-events: none; }
.ed-icon.big { width: 40px; height: 40px; }
.ed-icon.big svg.i { width: 24px; height: 24px; }
#play-btn .i-pause, #play-btn.on .i-play, #mute-btn .i-mute, #mute-btn.on .i-volume { display: none; }
#play-btn.on .i-pause, #mute-btn.on .i-mute { display: block; }

/* Tool rail */
.ed-rail { grid-area: rail; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--surface); border-right: 1px solid var(--hair); }
.ed-rail button { display: grid; justify-items: center; gap: 4px; padding: 10px 0 8px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font-size: 11px; cursor: pointer; }
.ed-rail button:hover { background: var(--surface-2); color: var(--text); }
.ed-rail button[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent); }
.ed-rail svg.i { width: 22px; height: 22px; }

/* Left panel */
.ed-panel { grid-area: panel; overflow: auto; padding: 16px; background: var(--surface); border-right: 1px solid var(--hair); }
.ed-panel .btn.block svg.i { width: 15px; height: 15px; }
.ed-tabs { display: flex; gap: 16px; margin: 14px 0 12px; border-bottom: 1px solid var(--hair); }
.ed-tabs button { border: 0; background: none; padding: 6px 0; color: var(--text-2); cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ed-tabs button[aria-selected='true'] { color: var(--text); font-weight: 600; border-color: var(--accent); }
.ed-media { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-media.list { grid-template-columns: 1fr; margin-top: 12px; }
.ed-item { position: relative; }
.ed-item-main { display: grid; gap: 4px; width: 100%; border: 0; padding: 0; background: none; text-align: start; cursor: pointer; color: var(--text); }
.ed-item-layer { position: absolute; right: 30px; top: 4px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.6); color: #fff; display: none; place-items: center; cursor: pointer; }
.ed-item-layer:hover { background: rgba(0, 0, 0, 0.8); }
.ed .ed-item-layer svg.i { width: 14px; height: 14px; }
.ed-item:hover .ed-item-layer, .ed-item:focus-within .ed-item-layer { display: grid; }
.ed-media.list .ed-item-layer { right: auto; left: 4px; }
.ed-item .th { position: relative; aspect-ratio: 16/10; border-radius: 6px; overflow: hidden; background-color: var(--fill); background-position: center; background-size: cover; background-repeat: no-repeat; display: grid; place-items: center; color: var(--text-2); }
.ed-item .th svg.i { width: 26px; height: 26px; }
.ed-item .dur { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.ed-item .add { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: #fff; display: none; place-items: center; }
.ed-item .add svg.i { width: 14px; height: 14px; }
.ed-item:hover .add, .ed-item:focus-within .add { display: grid; }
.ed-item .nm { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-item.used .th::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--accent); border-radius: 6px; }
.ed-media.list .ed-item-main { grid-template-columns: 56px 1fr; align-items: center; gap: 10px; }
.ed-media.list .ed-item .th { aspect-ratio: 1; }
.ed-empty { color: var(--text-2); font-size: 12px; line-height: 1.45; text-align: center; padding: 24px 8px; border: 1px dashed var(--line); border-radius: 10px; }
.ed-cards { display: grid; gap: 8px; margin-bottom: 12px; }
.ed-cards.two { grid-template-columns: 1fr 1fr; }
.ed-cards button, .ed-cards label { display: grid; gap: 2px; padding: 12px; border: 0; border-radius: 10px; background: var(--surface-2); text-align: start; cursor: pointer; color: var(--text); }
.ed-cards button:hover, .ed-cards label:hover { background: var(--fill); }
.ed-cards button[aria-pressed='true'], .ed-cards label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); }
.ed-cards label input { display: none; }
.ed-cards small { color: var(--text-2); font-size: 11px; }
.t-title { font-size: 20px; } .t-caption { font-size: 14px; } .t-tag { font-size: 13px; }
.ed-looks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-looks button { display: grid; gap: 4px; border: 0; padding: 0; background: none; cursor: pointer; color: var(--text); text-align: start; font-size: 12px; }
.ed-looks .th { aspect-ratio: 16/10; border-radius: 6px; background-color: var(--fill); background-position: center; background-size: cover; }
.ed-looks .th:not([class*=' f-']) { background-image: linear-gradient(135deg, #3a8dff, #30d158 50%, #ffd60a); }
.ed-looks button[aria-pressed='true'] .th { box-shadow: 0 0 0 2px var(--accent); }

/* Stage */
.ed-stage { grid-area: stage; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; padding: 16px; min-width: 0; }
.ed-viewport { display: grid; place-items: center; min-height: 0; container-type: size; }
.ed-frame { direction: ltr; --ar: 16/9; position: relative; touch-action: none; user-select: none; -webkit-user-select: none; aspect-ratio: var(--ar); width: min(100cqw, 100cqh * var(--ar)); background: #000; border-radius: 8px; overflow: hidden; }
.ed-frame .ed-media { position: absolute; left: 0; top: 0; max-width: none; object-fit: fill; transform-origin: center; visibility: hidden; -webkit-user-drag: none; }
#bgc { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(18px) brightness(0.85); transform: scale(1.15); z-index: 0; }
.ed-overlay { z-index: 500; }
.ed-selbox { position: absolute; z-index: 600; pointer-events: none; box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 3px rgba(0, 0, 0, 0.25); border-radius: 2px; }
.ed-cropbox { position: absolute; z-index: 600; overflow: hidden; touch-action: none; --inv: 1; }
.cb-area { position: absolute; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); outline: 1.5px solid #fff; cursor: move; }
.cb-area i { position: absolute; width: 14px; height: 14px; margin: -7px; background: #fff; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); transform: scale(var(--inv)); }
.cb-area i[data-h='tl'] { left: 0; top: 0; cursor: nwse-resize; } .cb-area i[data-h='br'] { right: 0; bottom: 0; cursor: nwse-resize; }
.cb-area i[data-h='tr'] { right: 0; top: 0; cursor: nesw-resize; } .cb-area i[data-h='bl'] { left: 0; bottom: 0; cursor: nesw-resize; }
.cb-area i[data-h='l'] { left: 0; top: 50%; cursor: ew-resize; } .cb-area i[data-h='r'] { right: 0; top: 50%; cursor: ew-resize; }
.cb-area i[data-h='t'] { top: 0; left: 50%; cursor: ns-resize; } .cb-area i[data-h='b'] { bottom: 0; left: 50%; cursor: ns-resize; }
.ed-overlay { position: absolute; inset: 0; pointer-events: none; container-type: size; }
.ed-overlay .tx { position: absolute; left: 50%; transform: translate(-50%, -50%); max-width: 90%; text-align: center; font-weight: 700; line-height: 1.15; white-space: pre-wrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.ed-overlay .tx.box { text-shadow: none; padding: 0.2em 0.5em; border-radius: 0.2em; background: rgba(0, 0, 0, 0.7); }
.ed-overlay .tx.left { left: 5%; transform: translateY(-50%); text-align: start; }
.ed-drop { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #a1a1a6; font-size: 13px; }
.ed-drop svg.i { width: 36px; height: 36px; margin: 0 auto 10px; }
.ed-drop b { color: #f5f5f7; font-size: 15px; }
body.dragging .ed-frame { box-shadow: 0 0 0 3px var(--accent); }
.ed-transport { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--surface); }
.ed-time { font-variant-numeric: tabular-nums; color: var(--text-2); }
.ed-play { display: flex; gap: 6px; align-items: center; }
.ed-transport-end { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.ed-select { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 4px 8px; font-size: 12px; }

/* Inspector */
.ed-inspect { grid-area: inspect; overflow: auto; background: var(--surface); border-left: 1px solid var(--hair); }
.ed-inspect .ed-tabs { margin: 0; padding: 0 16px; gap: 20px; }
.ed-inspect .ed-tabs button { display: flex; gap: 6px; align-items: center; padding: 14px 0 12px; }
.ed-inspect .ed-tabs svg.i { width: 16px; height: 16px; }
.ed-group { padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.ed-group h3 { font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.ed-row { display: grid; grid-template-columns: 76px 1fr 52px; align-items: center; gap: 8px; min-height: 32px; }
.ed-row > span { color: var(--text-2); }
.ed-row input[type='range'] { width: 100%; }
.ed-row .num, .ed-field { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 4px 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ed-row.wide { grid-template-columns: 76px 1fr; }
.ed-row.wide .pair { display: flex; gap: 6px; }
textarea.ed-field { resize: vertical; min-height: 60px; font: inherit; font-size: 13px; }
.ed-row input[type='color'] { width: 36px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
.ed-seg { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface-2); }
.ed-seg button { flex: 1; border: 0; border-radius: 6px; padding: 4px 0; background: none; font-size: 12px; cursor: pointer; color: var(--text-2); }
.ed-seg button[aria-pressed='true'] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 0.5px var(--line); }
.ed-none { padding: 24px 16px; color: var(--text-2); line-height: 1.5; }
.ed-none kbd { font: inherit; font-size: 11px; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); box-shadow: 0 0 0 0.5px var(--line); }
.ed-none ul { padding-inline-start: 18px; margin: 8px 0 0; }

/* Timeline. Time runs left to right in every language. */
.ed-timeline { grid-area: tl; direction: ltr; display: grid; grid-template-rows: 40px minmax(0, 1fr); background: var(--surface); border-top: 1px solid var(--hair); min-height: 0; }
.ed-tools { display: flex; align-items: center; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--hair); }
.ed-tools > button { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.ed-tools > button:hover { background: var(--surface-2); }
.ed-tools > button[disabled] { opacity: 0.4; pointer-events: none; }
.ed-tools svg.i { width: 16px; height: 16px; }
.ed-zoom { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.ed-zoom input { width: 120px; }
.ed-tracks { display: grid; grid-template-columns: 116px minmax(0, 1fr); min-height: 0; overflow-y: auto; align-items: start; }
.ed-heads { display: grid; grid-template-rows: 26px 34px 56px 36px 36px; gap: 6px; padding: 0 0 8px 8px; align-content: start; }
.ed-head { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); font-size: 12px; }
.ed-head svg.i { width: 15px; height: 15px; }
.ed-scroll { overflow-x: auto; overflow-y: hidden; position: relative; touch-action: none; }
.ed-lanes { position: relative; display: grid; grid-template-rows: 26px 34px 56px 36px 36px; gap: 6px; padding: 0 12px 8px; min-width: 100%; }
.ed-ruler { position: relative; cursor: pointer; border-bottom: 1px solid var(--hair); }
.ed-ruler i { position: absolute; bottom: 0; width: 1px; height: 5px; background: var(--line); }
.ed-ruler i.major { height: 9px; background: var(--text-3); }
.ed-ruler b { position: absolute; top: 3px; font-size: 10px; font-weight: 400; color: var(--text-2); transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.ed-ruler b:first-of-type { transform: translateX(4px); }
.ed-lane { position: relative; border-radius: 6px; }
.ed-lane.over { background: var(--accent-soft); }
.ed-clip { position: absolute; top: 0; bottom: 0; border-radius: 6px; overflow: hidden; cursor: grab; user-select: none; touch-action: none; }
.ed-clip.sel { box-shadow: 0 0 0 2px var(--accent); z-index: 2; }
.ed-clip.drag { opacity: 0.75; cursor: grabbing; z-index: 3; }
.ed-clip .strip { position: absolute; inset: 0; display: flex; background: #222; }
.ed-clip .strip span { flex: none; height: 100%; background-color: #333; background-position: center; background-size: cover; background-repeat: no-repeat; border-right: 1px solid rgba(0, 0, 0, 0.35); }
.ed-clip .lbl { position: absolute; left: 6px; bottom: 3px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); pointer-events: none; }
.ed-clip.text { background: #bf5af2; color: #fff; }
.ed-clip.text .lbl { top: 50%; bottom: auto; transform: translateY(-50%); text-shadow: none; }
.ed-clip.audio { background: #7ad1b8; }
@media (prefers-color-scheme: dark) { .ed-clip.audio { background: #1f6f5c; } }
.ed-clip.sound { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.ed-clip.sound canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ed-clip.sound .lbl { top: 2px; bottom: auto; color: var(--text); text-shadow: none; }
.ed-clip .lbl { display: flex; align-items: center; gap: 4px; }
.ed-clip .lnk { display: inline-grid; place-items: center; flex: none; }
.ed-clip .lnk svg.i { width: 11px; height: 11px; }
.ed-head span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-tmute { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-inline-end: -4px; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; }
.ed-tmute:hover { background: var(--fill); color: var(--text); }
.ed-tmute[aria-pressed='true'] { background: var(--danger); color: #fff; }
.ed .ed-tmute svg.i { width: 13px; height: 13px; }
.ed-clip.audio canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ed-clip.audio .lbl { top: 2px; bottom: auto; }
.ed-clip .h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 1; }
.ed-clip .h.l { left: 0; } .ed-clip .h.r { right: 0; }
.ed-clip.sel .h { background: var(--accent); }
.ed-clip.sel .h::after { content: ''; position: absolute; left: 3px; top: 35%; bottom: 35%; width: 2px; border-radius: 1px; background: #fff; }
.ed-clip .fx { position: absolute; top: 0; bottom: 0; width: 14px; pointer-events: none; }
.ed-clip .fx.in { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent); }
.ed-clip .fx.out { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0.7), transparent); }
.ed-lane .ghost { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--accent); border-radius: 1px; }
.ed-playhead { position: absolute; top: 0; bottom: 0; width: 0; z-index: 4; pointer-events: none; }
.ed-playhead::before { content: ''; position: absolute; top: 12px; bottom: 0; left: -1px; width: 2px; background: var(--accent); }
.ed-playhead span { position: absolute; top: 2px; left: -6px; width: 12px; height: 14px; border-radius: 3px 3px 6px 6px; background: var(--accent); cursor: ew-resize; pointer-events: auto; }

.ed-dialog { border: 0; border-radius: 14px; padding: 20px; width: min(440px, 100% - 32px); background: var(--surface); color: var(--text); box-shadow: var(--lift); }
.ed-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.ed-dialog-end { display: flex; justify-content: flex-end; }

/* Narrow windows: stack the stage over the timeline and keep the tools in a bottom bar. */
@media (max-width: 1100px) {
  .ed { grid-template-columns: 64px 240px minmax(0, 1fr); grid-template-areas: 'top top top' 'rail panel stage' 'tl tl tl'; }
  .ed-inspect { display: none; }
}
@media (max-width: 760px) {
  body.ed-page { overflow: auto; }
  .ed { height: auto; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px auto auto auto auto; grid-template-areas: 'top' 'stage' 'tl' 'panel' 'rail'; }
  .ed-name, .ed-badge, .ed-sep { display: none; }
  .ed-stage { padding: 10px; }
  .ed-viewport { height: 56vw; max-height: 60vh; }
  .ed-transport-end .ed-select { display: none; }
  .ed-rail { position: sticky; bottom: 0; flex-direction: row; justify-content: space-around; border: 0; border-top: 1px solid var(--hair); z-index: 5; }
  .ed-rail button { flex: 1; }
  .ed-panel { border: 0; }
  .ed-tools > button { padding: 6px; font-size: 0; }
  .ed-zoom input { width: 70px; }
  .ed-tracks { grid-template-columns: 44px minmax(0, 1fr); }
  .ed-head { font-size: 0; padding: 0; justify-content: center; }
  .ed-head span { display: none; }
}

/* Language menu */
.ed-lang { position: relative; }
.ed-lang summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; cursor: pointer; color: var(--text-2); font-size: 13px; }
.ed-lang summary::-webkit-details-marker { display: none; }
.ed-lang summary:hover, .ed-lang[open] summary { background: var(--surface-2); color: var(--text); }
.ed-lang .lang-pop { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 60; width: 380px; max-height: 70vh; overflow: auto; padding: 6px; border-radius: 12px; background: var(--surface); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14), 0 0 0 0.5px var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ed-lang .lang-pop a { padding: 7px 10px; border-radius: 8px; color: var(--text); font-size: 13px; }
.ed-lang .lang-pop a:hover { background: var(--surface-2); text-decoration: none; }
.ed-lang .lang-pop a[aria-current] { background: var(--accent); color: #fff; }
@media (max-width: 760px) { .ed-lang summary span { display: none; } .ed-lang .lang-pop { width: min(380px, 100vw - 24px); } }

/* Scene shapes, layers, transitions */
.ed-shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.ed-shapes button { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 12px; text-align: start; cursor: pointer; }
.ed-shapes button:hover { background: var(--fill); }
.ed-shapes button[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--accent); }
.ed-shapes i { flex: none; height: 16px; max-width: 26px; border: 1.5px solid currentColor; border-radius: 3px; opacity: 0.6; }
.ed-row.wide .pair { align-items: center; }
.ed-row.wide .pair .num { width: 72px; }
.ed-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ed-btns .btn svg.i, .ed-group .btn svg.i { width: 14px; height: 14px; }
.ed-sub { font-size: 13px; font-weight: 600; margin: 18px 0 4px; }
.ed-val { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: end; }
#tdur-row { grid-template-columns: 60px 1fr 44px; margin-bottom: 4px; }
.ed-trans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
.ed-trans button { padding: 6px 4px; border: 0; border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 12px; cursor: pointer; }
.ed-trans button[aria-pressed='true'] { background: var(--accent); color: #fff; }
.ed-clip .tmark { position: absolute; top: 0; bottom: 0; right: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 0 4px, rgba(255, 255, 255, 0.15) 4px 8px); border-left: 1.5px solid #fff; }
.ed-clip.layer { background: #2a2140; }
.ed-head.t-layer { color: #bf5af2; }
#layer-hint { display: flex; gap: 6px; margin-top: 14px; }
#layer-hint svg.i { flex: none; width: 15px; height: 15px; margin-top: 1px; }

/* Speech to text and the subtitle list */
.ed-sub svg.i { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; }
#sp-lang { width: 100%; }
.ed-panel .ed-row.wide { grid-template-columns: 70px 1fr; margin-bottom: 6px; }
.ed-speech { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--surface-2); }
.ed-speech .ed-hint { margin: 8px 0; }
.ed-progress { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.ed-progress i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width 0.2s; }
.ed-subs { display: grid; gap: 6px; margin-bottom: 4px; }
.ed-subs .sub { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: start; }
.ed-subs .sub.on textarea { border-color: var(--accent); }
.ed-subs .sub-t { border: 0; padding: 5px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); font-size: 11px; font-variant-numeric: tabular-nums; cursor: pointer; }
.ed-subs .sub-t:hover { color: var(--accent); }
.ed-subs textarea { width: 100%; min-height: 30px; resize: vertical; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 5px 7px; font: inherit; font-size: 12px; line-height: 1.35; color: var(--text); }
.ed-subs textarea:focus { outline: none; border-color: var(--accent); }
.ed-subs .sub-x { border: 0; background: none; color: var(--text-3); padding: 5px 2px; cursor: pointer; }
.ed-subs .sub-x:hover { color: var(--danger); }
.ed-subs .sub-x svg.i { width: 14px; height: 14px; }

/* From editor-kit v1 (scissor-audio site/assets/editor-kit.css), unchanged, so Audio and Film sliders match. */
/* Sliders: a thin track filled with the accent up to the value (--v, set by the app), and a round
   handle. One look in every browser instead of each one's own. */
.ed input[type='range'] { -webkit-appearance: none; appearance: none; height: 22px; margin: 0; background: transparent; cursor: pointer; --v: 50%; --track: linear-gradient(to right, var(--accent) var(--v), var(--fill) var(--v)); }
[dir='rtl'] .ed input[type='range'] { --track: linear-gradient(to left, var(--accent) var(--v), var(--fill) var(--v)); }
.ed input[type='range']:disabled { cursor: default; opacity: 0.4; }
.ed input[type='range']:focus { outline: none; }
.ed input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--track); }
.ed input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.08); transition: transform 0.12s; }
.ed input[type='range']:hover:not(:disabled)::-webkit-slider-thumb, .ed input[type='range']:active::-webkit-slider-thumb { transform: scale(1.15); }
.ed input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft), 0 1px 3px rgba(0, 0, 0, 0.25); }
.ed input[type='range']::-moz-range-track { height: 4px; border-radius: 2px; background: var(--fill); }
.ed input[type='range']::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.ed input[type='range']::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.12s; }
.ed input[type='range']:hover:not(:disabled)::-moz-range-thumb { transform: scale(1.15); }
.ed input[type='range']:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-soft), 0 1px 3px rgba(0, 0, 0, 0.25); }
.ed button:focus-visible, .ed select:focus-visible, .ed textarea:focus-visible, .ed input:focus-visible:not([type='range']) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ed .btn:disabled, .ed .btn[disabled] { opacity: 0.4; pointer-events: none; }
.ed-drop h1 { margin: 0 0 8px; font-size: clamp(16px, 2.4vw, 22px); font-weight: 600; color: #f5f5f7; letter-spacing: -0.01em; }
.ed-drop .ed-intro { max-width: 440px; margin: 0 auto 14px; color: #a1a1a6; line-height: 1.45; }
.ed-drop > div { padding: 16px; }
@media (max-width: 760px) {
  .ed-top { gap: 6px; padding: 0 8px 0 10px; }
  .ed-top-end { gap: 2px; }
  .ed-top-end > [data-act='undo'], .ed-top-end > [data-act='redo'] { display: none; }
  .ed-top-end .btn { margin-inline-start: 4px; padding: 4px 10px; }
  .ed-lang summary { padding: 0 6px; }
  .ed-rail { padding: 4px; gap: 2px; }
  .ed-rail button { min-width: 0; font-size: 10px; padding: 8px 0 6px; }
  .ed-rail button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .ed-stage, .ed-timeline, .ed-panel { min-width: 0; }
}
@media (max-width: 760px) { .ed-drop .ed-intro, .ed-drop svg.i { display: none; } .ed-drop h1 { font-size: 15px; } }

/* From editor-kit v2 (scissor-audio add9083), unchanged: toast and privacy pill. The toast sits above the timeline here. */
.ed-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; max-width: calc(100% - 32px); background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: 14px; font-size: 14px; line-height: 1.4; text-align: center; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); }
.ed-toast[hidden] { display: none; }
.ed-toast { bottom: calc(min(var(--tl-h, 270px), 46vh) + 20px); }
.ed-private { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 10px; margin-inline-start: 6px; border: 0; border-radius: 999px; background: color-mix(in srgb, #30d158 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #30d158 35%, transparent); color: #1f9d55; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: help; }
@media (prefers-color-scheme: dark) { .ed-private { color: #30d158; } }
@media (max-width: 1100px) { .ed-private span { display: none; } .ed-private { width: 30px; padding: 0; justify-content: center; } }
.ed .ed-private svg.i { width: 13px; height: 13px; }
/* Header pills are 30px, as in Audio. */
.ed-top .apps-btn, .ed-lang summary { height: 30px; border-radius: 999px; }
.ed-lang summary { background: var(--fill); color: var(--text); padding: 0 10px; }