@font-face { font-family: "StampMono"; src: url("fonts/stamp.ttf") format("truetype"); font-display: block; }
:root { --bg:#0d1015; --panel:#161a21; --panel2:#1c212a; --line:#2a303b; --text:#e7eaef; --muted:#8a94a3; --accent:#3b82f6; --accent2:#2563eb; --warn:#f59e0b; --sel:#facc15; }
* { box-sizing: border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; display:flex; flex-direction:column; min-height:100vh; }
.hidden { display:none !important; }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 22px; border-bottom:1px solid var(--line); background:#0f1319; }
.topbar h1 { margin:0; font-size:17px; font-weight:600; letter-spacing:.2px; }
.export-area { display:flex; align-items:center; gap:10px; }
.status-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:0 22px; min-height:0; }
.status-bar:has(.status:not(:empty)), .status-bar:has(.downloads:not(:empty)) { padding:8px 22px; border-bottom:1px solid var(--line); background:#10151c; }
.status { color:var(--muted); font-size:13px; white-space:pre-wrap; }
.status.err { color:#f87171; }
.downloads { display:flex; align-items:center; gap:14px; }
.downloads a.dl-main { padding:7px 14px; border-radius:8px; background:#16a34a; color:#fff; text-decoration:none; font-weight:600; }
.downloads a.dl-log { color:var(--muted); font-size:13px; }

.workspace { flex:1 0 auto; display:grid; grid-template-columns: 1fr 300px; gap:18px; padding:16px 22px; align-items:start; }
@media (max-width: 900px) { .workspace { grid-template-columns: 1fr; } }
.viewer { min-width:0; display:flex; }
.drop { flex:1; border:2px dashed var(--line); border-radius:14px; display:flex; align-items:center; justify-content:center; min-height:52vh; background:#0f141b; transition:.15s; }
.drop.over, .strip.over { border-color:var(--accent); background:#111a28; }
.drop-inner { text-align:center; }
.drop .big { font-size:22px; font-weight:600; margin-bottom:6px; }
.hint, .small { color:var(--muted); font-size:12.5px; margin:8px 0; }
.stage { flex:1; position:relative; background:#000; border-radius:12px; overflow:hidden; line-height:0; display:flex; align-items:center; justify-content:center; min-height:52vh; }
.stage video { width:100%; height:100%; max-height:62vh; display:block; }
.stage canvas { position:absolute; pointer-events:none; }

.side { display:flex; flex-direction:column; gap:12px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.card-title { font-weight:600; margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
details.card > summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; }
details.card > summary::after { content:"▸"; color:var(--muted); }
details.card[open] > summary::after { content:"▾"; }
details.card[open] > summary { margin-bottom:6px; }
.ends { color:var(--muted); font-size:12.5px; margin:-2px 0 6px; }
label { display:block; margin:8px 0; font-size:13px; color:#cfd5de; }
label.check { display:flex; gap:8px; align-items:center; }
input[type=text], input[type=datetime-local], select { width:100%; margin-top:4px; padding:7px 9px; background:#0e1218; color:var(--text); border:1px solid var(--line); border-radius:7px; font:inherit; color-scheme:dark; }
#start { font-size:15px; padding:9px; border-color:#3a4658; }
input[type=color] { width:100%; height:34px; margin-top:4px; background:#0e1218; border:1px solid var(--line); border-radius:7px; padding:3px; }
input[type=range] { width:100%; accent-color:var(--accent); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row.btns { gap:8px; }
button { font:inherit; border-radius:8px; padding:8px 12px; cursor:pointer; border:1px solid var(--line); background:#1f2631; color:var(--text); }
button.ghost { background:transparent; font-size:12.5px; }
button.ghost:hover { border-color:var(--accent); }
button.primary { background:var(--accent); border-color:var(--accent); font-weight:600; color:#fff; }
#export { padding:9px 26px; font-size:15px; }
button.primary:hover:not(:disabled) { background:var(--accent2); }
button:disabled { opacity:.45; cursor:not-allowed; }
.small-btn { margin:6px 0; }
.progress { width:220px; height:8px; background:#0e1218; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
#prog { height:100%; width:0; background:linear-gradient(90deg,var(--accent),#60a5fa); transition:width .2s; }
.note { padding:10px 12px; border-left:3px solid var(--warn); background:#1a1712; color:#d6ccb9; border-radius:6px; font-size:12.5px; }

.timeline { position:sticky; bottom:0; z-index:5; border-top:1px solid var(--line); background:#0f1319; padding:10px 22px 12px; box-shadow:0 -8px 20px rgba(0,0,0,.35); }
.strip { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 8px; border:2px solid transparent; border-radius:10px; min-height:118px; align-items:stretch; }
.clip { position:relative; flex:0 0 190px; background:var(--panel2); border:2px solid var(--line); border-radius:9px; overflow:hidden; cursor:grab; user-select:none; }
.clip.sel { border-color:var(--sel); }
.clip.dragging { opacity:.4; }
.clip.drop-before { box-shadow:-5px 0 0 -1px var(--accent); }
.clip.drop-after { box-shadow:5px 0 0 -1px var(--accent); }
.clip .thumb { width:100%; height:72px; object-fit:cover; display:block; background:#000; pointer-events:none; }
.clip .num { position:absolute; top:4px; left:5px; background:rgba(0,0,0,.65); color:#fff; font-size:11px; padding:1px 6px; border-radius:5px; }
.clip .dur { position:absolute; top:4px; right:28px; background:rgba(0,0,0,.65); color:#fff; font-size:11px; padding:1px 6px; border-radius:5px; }
.clip .x { position:absolute; top:3px; right:3px; width:22px; height:20px; padding:0; line-height:18px; font-size:14px; border-radius:5px; background:rgba(0,0,0,.65); border:none; }
.clip .x:hover { background:#b91c1c; }
.clip .meta { padding:5px 8px 6px; }
.clip .t { font-family:StampMono, ui-monospace, monospace; font-size:11.5px; color:#fde68a; cursor:text; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:4px; }
.clip .t:hover { background:#2b3341; }
.clip .n { color:var(--muted); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.add-clip { flex:0 0 110px; border:2px dashed var(--line); border-radius:9px; background:transparent; color:var(--muted); font-size:13px; }
.add-clip:hover { border-color:var(--accent); color:var(--text); }
.empty-strip { color:var(--muted); align-self:center; padding-left:8px; }

/* ---- promo (outside the editor) ---- */
.thanks { display:flex; align-items:center; gap:16px; margin:12px 22px 0; padding:12px 16px; border:1px solid #2b3a52; border-left:3px solid var(--accent); border-radius:10px; background:#121a26; }
.thanks-text { flex:1; color:#c9d1dc; font-size:13.5px; }
.thanks-text strong { color:var(--text); margin-right:6px; }
.thanks-cta { white-space:nowrap; padding:7px 14px; border-radius:8px; background:var(--accent2); color:#fff; text-decoration:none; font-weight:600; font-size:13px; }
.thanks-cta:hover { background:var(--accent); }
.thanks-x { background:none; border:0; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; }
.thanks-x:hover { color:var(--text); }
.below { padding:28px 22px 8px; border-top:1px solid var(--line); background:var(--bg); }
.below-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; max-width:1200px; }
.info-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.info-card h2 { margin:0 0 8px; font-size:15px; font-weight:600; }
.info-card p { margin:0 0 10px; color:#c3cad4; font-size:13.5px; }
.info-card p.muted { color:var(--muted); font-size:13px; }
.info-card a { color:#8fb8ff; }
.info-card.pro { border-color:#2b3a52; }
.card-btn { display:inline-block; padding:8px 14px; border-radius:8px; background:var(--accent2); color:#fff !important; text-decoration:none; font-weight:600; font-size:13px; }
.card-btn:hover { background:var(--accent); }
.card-link { text-decoration:none; font-weight:500; font-size:13.5px; }
.site-footer { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:14px 22px 18px; color:var(--muted); font-size:12.5px; }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { color:var(--text); text-decoration:underline; }
.site-footer .sep { opacity:.5; }
@media (max-width: 700px) { .thanks { flex-wrap:wrap; } }