:root {
  --bg: #0b0b12;
  --panel: #13131d;
  --card: #1b1b28;
  --line: #262638;
  --text: #f3f3f8;
  --muted: #9d9db3;
  --brand-1: #ff4d6d;
  --brand-2: #7c5cff;
  --grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: Inter, system-ui, sans-serif; background: var(--bg); color: var(--text); display: flex; flex-direction: column; font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

body.no-media .has-media { display: none !important; }
#clipEditor[data-kind=image] .for-video, #clipEditor[data-kind=video] .for-image { display: none; }

/* Top bar */
.topbar { display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--panel); flex-shrink: 0; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.logo-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; color: #fff; }
.logo-mark svg { width: 16px; height: 16px; }
.filename { flex: 1; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.top-actions { display: flex; gap: 10px; }
.history { display: flex; gap: 4px; }
.btn.icon-only { width: 38px; padding: 0; height: 38px; }
.icon-only svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; cursor: pointer; background: none; transition: background .15s, opacity .15s; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--grad); color: #fff; }
.btn-ghost { border-color: var(--line); background: var(--tint-1); }
.btn-ghost:hover { background: var(--tint-2); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.danger { color: var(--danger); }

/* Workspace */
.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 360px; }
.stage-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 16px; gap: 10px; }
.stage-dock { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 16px; background: repeating-conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%) 0 0 / 24px 24px; }
.stage.drag { outline: 2px dashed var(--brand-1); outline-offset: -8px; }
#stage { position: absolute; inset: 12px; margin: auto; max-width: calc(100% - 24px); max-height: calc(100% - 24px); width: auto; height: auto; border-radius: 6px; box-shadow: 0 20px 50px -10px rgba(0,0,0,.7); touch-action: none; }
body.no-media #stage { visibility: hidden; }
.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-align: center; padding: 20px; }
.empty svg { width: 48px; height: 48px; fill: none; stroke: var(--brand-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.empty b { font-size: 18px; }
.empty span { color: var(--muted); }
body:not(.no-media) .empty { display: none; }

.transport { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); padding: 8px 12px; border-radius: 14px; flex-shrink: 0; }
.icon-btn { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--grad); display: grid; place-items: center; cursor: pointer; }
.icon-btn svg { width: 18px; height: 18px; fill: #fff; }
.icon-btn .i-pause { display: none; }
.icon-btn.playing .i-play { display: none; }
.icon-btn.playing .i-pause { display: block; }
.time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; white-space: nowrap; }
.time b { color: var(--text); font-weight: 600; }
.spacer { flex: 1; }
.zoom { display: flex; gap: 4px; }
.zoom .btn { width: 32px; padding: 7px 0; }

/* Timeline */
.timeline { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; flex-shrink: 0; }
.tl-scroll { overflow-x: auto; overflow-y: hidden; padding: 0 12px 10px; }
.tl-inner { position: relative; min-width: 100%; user-select: none; -webkit-user-select: none; cursor: pointer; touch-action: pan-x; }
.tl-ruler { position: relative; height: 24px; border-bottom: 1px solid var(--line); }
.tl-ruler span { position: absolute; bottom: 0; font-size: 10px; color: var(--muted); padding-left: 4px; border-left: 1px solid var(--line-strong); height: 12px; line-height: 12px; font-variant-numeric: tabular-nums; }
.tl-row { position: relative; margin-top: 8px; }
.tl-clips { height: 56px; display: flex; gap: 0; }
.tl-clip { position: relative; flex-shrink: 0; height: 100%; border-radius: 8px; overflow: hidden; background-color: var(--card); background-repeat: repeat-x; background-size: auto 100%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); cursor: grab; touch-action: none; transition: transform .12s; }
.tl-clip + .tl-clip { margin-left: 0; }
.tl-clip::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 45%, transparent 60%, rgba(0,0,0,.55)); }
.tl-clip span { position: absolute; left: 6px; bottom: 3px; font-size: 10px; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.tl-clip em { position: absolute; left: 6px; top: 3px; font-size: 10px; font-style: normal; font-weight: 800; background: rgba(0,0,0,.55); padding: 0 5px; border-radius: 4px; }
.tl-clip.selected { border-color: var(--brand-1); }
.tl-clip .fx { position: absolute; right: 4px; top: 3px; font-size: 10px; font-style: normal; line-height: 14px; width: 16px; text-align: center; border-radius: 4px; background: var(--grad); z-index: 1; }
.clip-stepper { margin-bottom: 4px; }
.clip-stepper h3 { margin: 0 !important; color: var(--text); font-size: 14px; }
.tl-clip.dragging { z-index: 5; opacity: .85; cursor: grabbing; transition: none; box-shadow: 0 10px 20px rgba(0,0,0,.6); }
.tl-clip::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--tr, 0); background: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 4px, transparent 4px 8px); border-right: 1px solid rgba(255,255,255,.5); pointer-events: none; }
.tl-clip[style*="--tr: 0px"]::after { display: none; }
.tl-trans { position: relative; height: 0; }
.tl-tr { position: absolute; top: -39px; width: 22px; height: 22px; margin-left: -11px; border-radius: 7px; border: 1.5px solid #fff; background: #0b0b12; color: #fff; font-size: 12px; line-height: 1; display: grid; place-items: center; cursor: pointer; z-index: 4; box-shadow: 0 2px 8px rgba(0,0,0,.6); transition: transform .12s; }
.tl-tr:hover { transform: scale(1.15); }
.tl-tr.set { background: var(--grad); border-color: transparent; }
.tl-tr.selected { outline: 2px solid #fff; outline-offset: 2px; }
.tl-texts, .tl-music, .tl-stickers { height: 22px; }
.tl-stickers .tl-bar { background: rgba(255, 210, 63, .22); border: 1px solid rgba(255, 210, 63, .6); font-size: 13px; line-height: 20px; padding: 0 6px; }
.tl-stickers .tl-bar.selected { background: rgba(255, 210, 63, .5); }
.tl-stickers .tl-bar img { height: 16px; vertical-align: middle; }
.tl-bar { position: absolute; top: 0; height: 22px; box-sizing: border-box; border-radius: 6px; font-size: 11px; line-height: 22px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Layers: hidden ones fade out, locked ones show a lock, motion keyframes show as diamonds */
.tl-bar.off { opacity: .38; }
.tl-bar.locked::after { content: "🔒"; position: absolute; right: 3px; top: 0; font-size: 10px; }
.tl-kf { position: absolute; bottom: 1px; width: 7px; height: 7px; margin-left: -3.5px; background: #fff; border: 1px solid rgba(0, 0, 0, .55); transform: rotate(45deg); pointer-events: none; }
/* Motion & layer section in the Text / Sticker / PiP panels */
.mk-box { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--card); }
.mk-box h3 { margin: 0 0 8px; }
.mk-box .row + .row { margin-top: 8px; }
.mk-box .mk-toggle.on { background: var(--brand-1); border-color: var(--brand-1); color: #fff; }
.mk-box .check { margin-top: 0; }
.mk-box .hint { margin: 8px 0 0; }
.tl-texts .tl-bar { background: rgba(255, 77, 109, .3); border: 1px solid rgba(255, 77, 109, .6); }
.tl-texts .tl-bar.selected { background: rgba(255, 77, 109, .6); }
.tl-music .tl-bar { background: rgba(40, 194, 255, .25); border: 1px solid rgba(40, 194, 255, .55); }
/* Music row is a little taller so its waveform reads clearly */
.tl-music { height: 30px; }
.tl-music .tl-bar { height: 30px; line-height: 28px; padding: 0; }
.tl-music .tl-bar > span { position: relative; padding: 0 8px; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.tl-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tl-empty { font-size: 11px; line-height: 22px; color: var(--muted); padding: 0 8px; border: 1px dashed var(--line); border-radius: 6px; display: inline-block; }
.tl-empty:hover { color: var(--text); border-color: var(--muted); }
.tl-playhead { position: absolute; top: 0; bottom: -4px; width: 2px; margin-left: -1px; background: var(--playhead); pointer-events: none; z-index: 6; }
.tl-playhead::before { content: ""; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top-color: var(--playhead); }
.clip-name { color: var(--muted); font-size: 12px; margin: -6px 0 6px; word-break: break-all; }

/* Range inputs */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: var(--line); outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--brand-1); }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--brand-1); }
input[type=color] { width: 40px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; padding: 2px; }
select, textarea { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
textarea { resize: vertical; }

/* Panel */
.panel { background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1 0 auto; min-width: 38px; padding-left: 0 !important; padding-right: 0 !important; letter-spacing: -.01em; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 2px 10px; cursor: pointer; color: var(--muted); font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tabs button b { font-size: 17px; color: var(--text); }
.tabs button.active { color: var(--text); border-bottom-color: var(--brand-1); }
.pane { display: none; padding: 18px; overflow-y: auto; flex: 1; }
.pane.active { display: block; }
.pane h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 0 10px; }
.pane h3:first-child, .row.between h3 { margin-top: 0; }
body.no-media .pane { opacity: .45; pointer-events: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.chips button.active { background: var(--grad); border-color: transparent; color: #fff; }
.field { display: block; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.field output { float: right; color: var(--text); font-variant-numeric: tabular-nums; }
.field input[type=range], .field select { margin-top: 8px; }
.field input[type=color] { display: block; margin-top: 6px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; margin-bottom: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.hint { color: var(--muted); font-size: 12px; margin-top: 12px; line-height: 1.5; }

.text-list { display: grid; gap: 6px; }
.text-list button { text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-list button.active { border-color: var(--brand-1); }
.text-editor { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

.filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.filters button { background: none; border: 2px solid transparent; border-radius: 10px; padding: 0 0 4px; cursor: pointer; font-size: 11px; color: var(--muted); overflow: hidden; }
.filters button img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; margin-bottom: 4px; background: var(--card); }
.filters button.active { border-color: var(--brand-1); color: var(--text); }

/* Picture-in-picture */
.tl-pip .tl-bar { background: rgba(124, 92, 255, .35) repeat-x left center / auto 100%; border: 1px solid rgba(124, 92, 255, .8); text-shadow: 0 1px 2px #000; font-weight: 700; }
.tl-pip .tl-bar.selected { border: 2px solid var(--playhead); }
.pip-editor { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--card); }
.pip-actions { gap: 6px; }
.pip-actions .btn { padding: 6px 10px; font-size: 12px; }
#pipEditor[data-kind=image] .for-video { display: none; }
.pip-editor select { background: var(--panel); }

/* Chroma key */
.key-box { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.key-box .check b { font-weight: 700; }
#pipKeyBox { margin-top: 12px; }
.key-color-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
#pipKeyPick.on { background: var(--brand-1); border-color: var(--brand-1); color: #fff; }
#pipKeyPresets { gap: 6px; margin-left: auto; }
#pipKeyPresets button { width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid #fff3; }
body.picking #stage { cursor: crosshair !important; outline: 2px dashed var(--brand-1); }

/* Clip keyframes */
.tl-clip .kf-mark { position: absolute; top: 50%; width: 9px; height: 9px; margin: -5px 0 0 -4px; background: #ffd23f; border: 1.5px solid #111; transform: rotate(45deg); z-index: 2; pointer-events: none; }
.kf-box { padding: 12px; border-radius: 12px; background: var(--card); }
.kf-presets { gap: 6px; margin-bottom: 12px; }
.kf-presets button { padding: 5px 10px; font-size: 12px; }
.kf-away { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kf-nav { display: flex; gap: 6px; margin-bottom: 12px; }
.kf-nav .btn:not(.kf-toggle) { flex: 0 0 auto; }
.kf-toggle { flex: 1; border: 1px solid var(--line); background: var(--panel); }
.kf-diamond { display: inline-block; width: 10px; height: 10px; border: 2px solid #ffd23f; transform: rotate(45deg); margin-right: 4px; }
.kf-toggle.on { border-color: #ffd23f; }
.kf-toggle.on .kf-diamond { background: #ffd23f; }
.kf-box .grid2 { margin-top: 0; }

/* Speed curve */
.curve-presets button { padding: 6px 11px; font-size: 12px; }
.curve-editor { margin-top: 12px; padding: 10px; border-radius: 12px; background: var(--card); }
#curveCanvas { display: block; width: 100%; height: 170px; border-radius: 8px; background: #11111a; touch-action: none; cursor: crosshair; user-select: none; }
.curve-editor .row { margin-top: 8px; }

/* Text animation */
.anim-box { margin: 4px 0 14px; padding: 12px; border-radius: 12px; background: var(--card); }
.anim-box .row.between { margin-bottom: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid3 .field { margin-bottom: 10px; }
.grid3 select { padding: 7px 6px; font-size: 13px; background: var(--panel); }

/* Voiceover */
.tl-voice { height: 22px; }
.tl-voice .tl-bar { background: rgba(52, 211, 153, .28) center / 100% 70% no-repeat; border: 1px solid rgba(52, 211, 153, .7); text-shadow: 0 1px 2px #000; }
.tl-voice .tl-bar.selected { background-color: rgba(52, 211, 153, .55); }
.rec-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px; border-radius: 14px; border: 1px solid rgba(255, 77, 109, .5); background: rgba(255, 77, 109, .12); color: var(--text); font-weight: 700; font-size: 15px; cursor: pointer; }
.rec-btn:hover { background: rgba(255, 77, 109, .2); }
.rec-btn i { width: 14px; height: 14px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 4px rgba(255, 59, 92, .25); }
.rec-btn.on { background: #ff3b5c; border-color: #ff3b5c; }
.rec-btn.on i { border-radius: 3px; background: #fff; box-shadow: none; }
.rec-quick.on { background: #ff3b5c; border-color: #ff3b5c; color: #fff; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-top: 10px; cursor: pointer; line-height: 1.4; }
.check input { margin-top: 2px; accent-color: var(--brand-1); }
.check small { color: var(--muted); font-size: 12px; }
.vo-editor { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--card); }
.vo-editor .field { margin-top: 12px; }
.music-editor { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--card); }
.music-editor .field { margin-top: 12px; }
.music-editor .field:first-child { margin-top: 0; }
.music-editor .row { margin-top: 10px; }
.music-editor .check { margin-top: 12px; }
.music-editor:not([hidden]) { animation: pane-in .3s var(--ease-out); }
.rec-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.rec-count { font-size: 96px; font-weight: 800; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.7); animation: rec-tick .7s ease-out infinite; }
.rec-pill { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.7); font-weight: 700; font-size: 13px; letter-spacing: .05em; }
.rec-pill i { width: 10px; height: 10px; border-radius: 50%; background: #ff3b5c; animation: rec-blink 1s steps(2) infinite; }
.rec-pill b { font-variant-numeric: tabular-nums; font-weight: 600; }
body.recording .stage { outline: 2px solid #ff3b5c; outline-offset: -2px; }
@keyframes rec-tick { from { transform: scale(1.4); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@keyframes rec-blink { 50% { opacity: 0; } }

/* Sticker picker */
.sticker-editor { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.st-preview { width: 48px; height: 48px; border-radius: 10px; background: var(--card); display: grid; place-items: center; font-size: 30px; flex-shrink: 0; }
.st-preview img { max-width: 40px; max-height: 40px; }
.sticker-editor .row.between { flex-wrap: nowrap; gap: 8px; }
.sticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sticker-grid:empty { display: none; }
.sticker-grid button { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background: repeating-conic-gradient(var(--checker-c) 0 25%, var(--checker-d) 0 50%) 0 0 / 12px 12px; cursor: pointer; display: grid; place-items: center; padding: 6px; transition: transform .1s, border-color .1s; }
.sticker-grid button:hover { transform: scale(1.06); border-color: var(--brand-1); }
.sticker-grid img { max-width: 100%; max-height: 100%; }
.upload-sticker { margin-top: 10px; width: 100%; white-space: normal; text-align: center; }
.emoji-cats { gap: 6px; margin-bottom: 10px; }
.emoji-cats button { padding: 5px 10px; font-size: 12px; }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.emoji-grid button { aspect-ratio: 1; border: 0; border-radius: 10px; background: none; font-size: 26px; line-height: 1; cursor: pointer; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; transition: transform .1s, background .1s; }
.emoji-grid button:hover { background: var(--card); transform: scale(1.15); }

/* Transition picker */
.tr-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tr-types button { background: var(--card); border: 2px solid transparent; border-radius: 10px; padding: 6px 6px 5px; cursor: pointer; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.tr-types button.active { border-color: var(--brand-1); color: var(--text); }
.tr-demo { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #ff8a5b, #ff4d6d); }
.tr-demo i { position: absolute; inset: 0; background: linear-gradient(135deg, #28c2ff, #7c5cff); opacity: 0; animation: 1.8s ease-in-out infinite alternate paused; }
.tr-types button:hover .tr-demo i, .tr-types button.active .tr-demo i { animation-play-state: running; }
.tr-none i { display: none; }
.tr-fade i { animation-name: tr-fade; }
.tr-black i { animation-name: tr-black; }
.tr-white i { animation-name: tr-white; }
.tr-slide i { opacity: 1; animation-name: tr-slide; }
.tr-slideup i { opacity: 1; animation-name: tr-slideup; }
.tr-wipe i { opacity: 1; animation-name: tr-wipe; }
.tr-circle i { opacity: 1; animation-name: tr-circle; }
.tr-zoom i { animation-name: tr-zoom; }
.tr-blur i { animation-name: tr-blur; }
@keyframes tr-fade { 20% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes tr-black { 0%, 15% { opacity: 0; background: #000; } 50% { opacity: 1; background: #000; } 85%, 100% { opacity: 1; background: #7c5cff; } }
@keyframes tr-white { 0%, 15% { opacity: 0; background: #fff; } 50% { opacity: 1; background: #fff; } 85%, 100% { opacity: 1; background: #7c5cff; } }
@keyframes tr-slide { 0%, 15% { transform: translateX(100%); } 85%, 100% { transform: none; } }
@keyframes tr-slideup { 0%, 15% { transform: translateY(100%); } 85%, 100% { transform: none; } }
@keyframes tr-wipe { 0%, 15% { clip-path: inset(0 100% 0 0); } 85%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes tr-circle { 0%, 15% { clip-path: circle(0% at 50% 50%); } 85%, 100% { clip-path: circle(75% at 50% 50%); } }
@keyframes tr-zoom { 0%, 15% { opacity: 0; transform: scale(.4); } 85%, 100% { opacity: 1; transform: none; } }
@keyframes tr-blur { 0%, 15% { opacity: 0; filter: blur(8px); } 85%, 100% { opacity: 1; filter: none; } }

/* Modal & toast */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px; width: min(380px, 100%); text-align: center; }
.modal-card h3 { margin-bottom: 16px; }
.progress { height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .2s; }
.modal-card .btn { margin-top: 16px; }
/* Export settings */
.export-card { width: min(420px, 100%); text-align: left; }
.export-card h3 { text-align: center; }
.ex-group { margin-top: 14px; }
.ex-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ex-group .chips button:disabled { opacity: .35; cursor: not-allowed; }
.ex-info { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: var(--card); font-size: 13px; font-variant-numeric: tabular-nums; }
.ex-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ex-actions .btn { margin-top: 16px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #fff; color: #111; padding: 10px 18px; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  body { height: auto; min-height: 100%; }
  .workspace { grid-template-columns: 1fr; }
  /* Phones: the preview and play bar stay pinned to the top while the timeline and tools
     scroll underneath. stage-wrap steps out of the layout so the pinned dock's range is the
     whole editor, not just the timeline section. */
  .stage-wrap { display: contents; }
  .stage-dock { position: sticky; top: 0; z-index: 30; flex: none; gap: 8px; padding: 8px 12px; background: var(--bg); box-shadow: 0 10px 18px -14px rgba(0, 0, 0, .55); }
  .stage-wrap > .timeline { margin: 8px 12px 12px; }
  /* The preview takes the video's own shape (set by the editor), so there's no empty band around it. */
  .stage { height: auto; aspect-ratio: var(--stage-ar, 16 / 9); max-height: 38vh; flex: none; }
  body.no-media .stage { aspect-ratio: auto; height: 34vh; }
  #stage { inset: 4px; max-width: calc(100% - 8px); max-height: calc(100% - 8px); border-radius: 4px; }
  .transport { padding: 6px 10px; }
  /* Never let a wide row stretch the page: the column may shrink below its content. */
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .stage-dock, .transport { min-width: 0; }
  .top-actions .btn:not(.icon-only) { padding: 8px 12px; font-size: 13px; }
  .btn.icon-only { width: 34px; height: 34px; }
  #snapshotBtn { display: none; }
  .panel { border-left: 0; border-top: 1px solid var(--line); }
  .pane { overflow: visible; }
  .logo-text { display: none; }
}

/* ================= Animation ================= */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* Buttons & chips: tactile press */
.btn, .chips button, .tabs button, .icon-btn, .filters button, .tr-types button, .sticker-grid button, .emoji-grid button, .rec-btn { transition: transform .15s var(--ease-spring), background .2s, border-color .2s, color .2s, opacity .15s, box-shadow .2s; }
.btn:active:not(:disabled), .chips button:active, .icon-btn:active, .filters button:active, .tr-types button:active, .rec-btn:active { transform: scale(.94); }
.chips button.active { animation: chip-pop .35s var(--ease-spring); }
@keyframes chip-pop { 50% { transform: scale(1.08); } }

/* Tabs: a single underline slides to the active tab (positioned by script) */
.tabs { position: relative; }
.tabs button.active { border-bottom-color: transparent; }
.tabs button b { transition: transform .25s var(--ease-spring); }
.tabs button.active b { transform: translateY(-2px) scale(1.12); }
.tab-ink { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; border-radius: 2px; background: var(--grad); transition: transform .35s var(--ease-out), width .35s var(--ease-out); pointer-events: none; }

/* Panels fade up when their tab opens */
.pane.active { animation: pane-in .3s var(--ease-out); }
@keyframes pane-in { from { opacity: 0; transform: translateY(8px); } }

/* Empty editor: the upload icon bobs; dropping a file pulses the stage */
.empty svg { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.empty b, .empty span { animation: pane-in .6s var(--ease-out) both; }
.empty span { animation-delay: .1s; }
.stage.drag { animation: drop-pulse 1s ease-in-out infinite; }
@keyframes drop-pulse { 50% { background-color: rgba(255, 77, 109, .08); } }
#stage { transition: box-shadow .3s; }
body:not(.no-media) #stage { animation: stage-in .5s var(--ease-out); }
@keyframes stage-in { from { opacity: 0; transform: scale(.97); } }

/* Play button breathes while playing */
.icon-btn.playing { animation: play-ring 1.6s ease-out infinite; }
@keyframes play-ring { from { box-shadow: 0 0 0 0 rgba(255, 77, 109, .55); } to { box-shadow: 0 0 0 12px rgba(255, 77, 109, 0); } }
.icon-btn svg { transition: transform .2s var(--ease-spring); }
.icon-btn:hover svg { transform: scale(1.12); }

/* Timeline: newly added clips pop in; selection glows */
.tl-clip.enter { animation: clip-in .5s var(--ease-spring) both; }
@keyframes clip-in { from { opacity: 0; transform: translateY(12px) scale(.9); } }
.tl-clip.selected { box-shadow: 0 0 0 1px var(--brand-1), 0 0 16px -2px rgba(255, 77, 109, .6); }
.tl-bar { transition: filter .15s, background-color .2s; }
.tl-bar:hover { filter: brightness(1.25); }
.tl-tr { transition: transform .2s var(--ease-spring), box-shadow .2s; }
.tl-tr:hover { box-shadow: 0 0 0 4px rgba(255, 77, 109, .3); }
.tl-empty { transition: color .2s, border-color .2s, transform .2s var(--ease-spring); }
.tl-empty:hover { transform: translateX(3px); }
.tl-playhead { transition: none; }
.tl-playhead::after { content: ""; position: absolute; top: -2px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .7); opacity: 0; transition: opacity .2s; }
body.is-playing .tl-playhead::after { opacity: 1; }

/* Toast springs up; export dialog pops; progress bar has moving stripes */
.toast { transition: opacity .25s, transform .45s var(--ease-spring); transform: translate(-50%, 24px) scale(.9); }
.toast.show { transform: translate(-50%, 0) scale(1); }
.modal:not([hidden]) { animation: fade-in .25s ease both; }
.modal:not([hidden]) .modal-card { animation: card-pop .45s var(--ease-spring) both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes card-pop { from { opacity: 0; transform: translateY(16px) scale(.92); } }
.progress i { background-image: linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%), var(--grad); background-size: 18px 18px, 100% 100%; animation: stripes .6s linear infinite; }
@keyframes stripes { to { background-position: 18px 0, 0 0; } }

/* Pickers: tiles lift, selected tiles glow */
.filters button, .tr-types button { transition: transform .2s var(--ease-spring), border-color .2s, color .2s; }
.filters button:hover, .tr-types button:hover { transform: translateY(-3px); }
.filters button.active img { animation: chip-pop .35s var(--ease-spring); }
.text-list button { transition: border-color .2s, transform .2s var(--ease-spring), background .2s; }
.text-list button:hover { transform: translateX(3px); }

/* Editors that appear after selecting something slide in */
.text-editor:not([hidden]), .sticker-editor:not([hidden]), .pip-editor:not([hidden]), .vo-editor:not([hidden]), .curve-editor:not([hidden]), #clipEditor:not([hidden]), #trEditor:not([hidden]), #filterEditor:not([hidden]) { animation: pane-in .3s var(--ease-out); }

/* Undo/redo icons nudge in their direction */
#undoBtn:not(:disabled):hover svg { animation: nudge-l .4s var(--ease-spring); }
#redoBtn:not(:disabled):hover svg { animation: nudge-r .4s var(--ease-spring); }
@keyframes nudge-l { 50% { transform: translateX(-3px) rotate(-12deg); } }
@keyframes nudge-r { 50% { transform: translateX(3px) rotate(12deg); } }

/* Export button shimmer when there's something to export */
#exportBtn:not(:disabled) { position: relative; overflow: hidden; isolation: isolate; }
#exportBtn:not(:disabled)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform: translateX(-130%); animation: shimmer 4s 1s ease-in-out infinite; }
@keyframes shimmer { 0%, 70% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

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

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Brand logo */
.logo-icon { width: 34px; height: 34px; flex-shrink: 0; }
.logo-text.wordmark { display: inline-flex; align-items: center; gap: 5px; font-family: Anton, Impact, "Arial Narrow Bold", sans-serif; font-weight: 400; font-size: 20px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--wordmark); }
.wordmark .wm-red { background: #e3141f; color: #fff; padding: 3px 5px 2px; border-radius: 2px; }

/* Phones: keep the top bar inside the screen (otherwise iOS Safari widens the whole page) */
/* (`clip` on body, not `hidden`: hidden would make body a scroll box and break the sticky preview) */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
.topbar { min-width: 0; }
.top-actions { flex-shrink: 0; align-items: center; margin-left: auto; }
@media (max-width: 860px) { .logo-text.wordmark { display: none; } }
@media (max-width: 480px) {
  .topbar { gap: 8px; padding: 0 10px; }
  .top-actions { gap: 6px; }
  .filename { display: none; }
  .top-actions .btn:not(.icon-only) { padding: 8px 11px; }
  .lbl-long { display: none; }
}
@media (max-width: 350px) { .history { display: none; } }
/* Phones: fit the play bar on one row (smaller gaps and buttons; zoom with pinch-free − / +). */
@media (max-width: 480px) {
  .transport { gap: 6px; padding: 6px 8px; }
  .transport .btn-sm { padding: 6px 9px; font-size: 12.5px; }
  .transport .icon-btn { width: 36px; height: 36px; }
  .time { font-size: 12px; }
  .zoom { gap: 2px; }
  .zoom .btn { width: 28px; padding: 6px 0; }
}
@media (max-width: 400px) { .lbl-mid { display: none; } }

/* The video players sit, really visible to the browser, in the middle of the preview area,
   directly BEHIND the preview canvas (which covers them). iOS doesn't decode frames for videos
   that are effectively invisible (tiny, transparent, tucked behind the page): with large 4K
   HEVC videos their seeks then never finish and playback never moves. All are stacked at the
   same spot so each counts as on-screen. */
.media-host { position: absolute; left: 50%; top: 50%; width: 160px; height: 90px; transform: translate(-50%, -50%); overflow: hidden; pointer-events: none; z-index: 0; }
.media-host video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#stage { z-index: 1; }

/* ================= Day / night themes ================= */
:root {
  --tint-1: rgba(255,255,255,.04); --tint-2: rgba(255,255,255,.09);
  --danger: #ff7a8f; --line-strong: #3a3a52; --playhead: #fff; --wordmark: #fff;
  --checker-a: #15151f; --checker-b: #11111a; --checker-c: #1f1f2e; --checker-d: #1a1a27;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eeeef4; --panel: #ffffff; --card: #f3f3f8; --line: #dedeea; --line-strong: #c4c4d6;
  --text: #15151f; --muted: #5a5a70; --danger: #d61f45; --playhead: #15151f; --wordmark: #111;
  --tint-1: rgba(20, 20, 45, .03); --tint-2: rgba(20, 20, 45, .07);
  --checker-a: #e6e6ee; --checker-b: #f0f0f6; --checker-c: #e9e9f1; --checker-d: #f3f3f8;
  color-scheme: light;
}
body { transition: background-color .3s ease, color .3s ease; }
:root[data-theme="light"] .tl-playhead::before { border-top-color: var(--playhead); }
:root[data-theme="light"] body.is-playing .tl-playhead::after { background: var(--brand-1); box-shadow: 0 0 10px rgba(255, 77, 109, .6); }
:root[data-theme="light"] #stage { box-shadow: 0 16px 40px -12px rgba(20, 20, 45, .35); }
:root[data-theme="light"] .tabs button.active b { color: var(--brand-1); }
:root[data-theme="light"] .toast { background: #15151f; color: #fff; }
:root[data-theme="light"] input[type=range]::-webkit-slider-thumb { box-shadow: 0 1px 3px rgba(0,0,0,.25); }

.theme-toggle { position: relative; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--tint-1); color: var(--text); cursor: pointer; display: grid; place-items: center; overflow: hidden; transition: background .2s, transform .2s; }
.theme-toggle:hover { background: var(--tint-2); transform: rotate(-12deg); }
.theme-toggle svg { position: absolute; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
.theme-toggle .i-sun { transform: rotate(90deg) scale(.4); opacity: 0; }
:root[data-theme="light"] .theme-toggle .i-sun { transform: none; opacity: 1; }
:root[data-theme="light"] .theme-toggle .i-moon { transform: rotate(-90deg) scale(.4); opacity: 0; }
@media (max-width: 860px) { .theme-toggle { width: 34px; height: 34px; } }