:root {
  --bg: #0e1013;
  --panel: #161a1f;
  --panel-2: #1d2229;
  --panel-3: #262d36;
  --line: #2b323b;
  --text: #e8ecf1;
  --muted: #8b95a3;
  --accent: #ff7a45;
  --accent-2: #ffb347;
  --ok: #3ecf8e;
  --danger: #ff5c6c;
  --clip-video: #3b6fd4;
  --clip-audio: #2a9d8f;
  --clip-text: #b5651d;
  --clip-image: #7a4fd0;
  --radius: 8px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-2); }

/* ---------- auth + admin pages ---------- */
.auth-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(900px 500px at 20% -10%, #2a1a12 0%, transparent 60%), var(--bg); }
.card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; letter-spacing: .2px; }
.brand .logo { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #1a0f08; font-size: 16px; }
.sub { color: var(--muted); margin: 6px 0 20px; font-size: 14px; }
.tabs { display: flex; gap: 4px; background: var(--panel-2); padding: 4px; border-radius: 10px; margin-bottom: 18px; }
.tabs button { flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 7px; color: var(--muted); }
.tabs button.active { background: var(--panel-3); color: var(--text); }
label.field { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 5px; }
.input { width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; outline: none; }
.input:focus { border-color: var(--accent); }
.btn { border: 1px solid var(--line); background: var(--panel-3); border-radius: var(--radius); padding: 8px 14px; }
.btn:hover { border-color: #3a4450; }
.btn.primary { background: linear-gradient(135deg, var(--accent), #ff5d3a); border: 0; color: #1a0f08; font-weight: 700; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.block { width: 100%; padding: 11px; margin-top: 18px; }
.btn.danger { color: var(--danger); }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.msg { margin-top: 14px; font-size: 13px; border-radius: 8px; padding: 10px 12px; display: none; }
.msg.show { display: block; }
.msg.err { background: #3a1a20; color: #ffb3bb; border: 1px solid #5a2630; }
.msg.ok { background: #14301f; color: #9be8c0; border: 1px solid #1f5233; }
.msg.info { background: #1b2733; color: #a9cdf0; border: 1px solid #2a4157; }
.hint { font-size: 12px; color: var(--muted); margin-top: 16px; text-align: center; }

.admin { max-width: 1000px; margin: 0 auto; padding: 24px; }
.admin header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 10px; flex-wrap: wrap; }
table.users { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
table.users th, table.users td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
table.users th { background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 12px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; }
.pill.ok { background: #14301f; color: #9be8c0; }
.pill.wait { background: #3a2e12; color: #ffd98a; }
.pill.admin { background: #2a2147; color: #c9b6ff; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- editor ---------- */
.app { display: grid; height: 100vh; grid-template-rows: 42px 52px 1fr 8px var(--tlh, clamp(150px, 25vh, 240px));
  grid-template-columns: 250px minmax(250px, 290px) 1fr; grid-template-areas:
    "top top top" "tabs tabs preview" "media props preview" "split split split" "timeline timeline timeline"; }
.tabbar { grid-area: tabs; display: flex; background: var(--panel); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: var(--muted); font-size: 12px; border-bottom: 2px solid transparent; }
.tabbar button .ti { font-size: 16px; line-height: 1; }
.tabbar button:hover { color: var(--text); }
.tabbar button.active { color: var(--accent-2); border-bottom-color: var(--accent); background: var(--panel-2); }
.tl-tools .btn.ic { width: 32px; padding: 4px 0; font-size: 15px; text-align: center; }
.project-info div { display: grid; grid-template-columns: 100px 1fr; gap: 8px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.project-info span { color: var(--muted); }
.topbar { grid-area: top; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.topbar .spacer { flex: 1; }
.topbar .brand { font-size: 17px; margin-right: 10px; }
.topbar .brand .logo { width: 24px; height: 24px; font-size: 13px; }
.topbar input.title { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; width: 200px; }
.topbar input.title:hover, .topbar input.title:focus { border-color: var(--line); outline: none; }
.saved { color: var(--muted); font-size: 12px; }
.panel { background: var(--panel); overflow: auto; min-height: 0; }
.props-panel { border-right: 1px solid var(--line); }
.media-panel { grid-area: media; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.props-panel { grid-area: props; border-left: 1px solid var(--line); padding: 12px; }
.preview-panel { grid-area: preview; background: #0a0b0d; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.stage { flex: 1 1 0; display: grid; place-items: center; padding: 6px; min-height: 0; min-width: 0; overflow: hidden; position: relative; }
.stage-inner { position: relative; box-shadow: 0 8px 40px rgba(0,0,0,.6); background: #000; line-height: 0; }
/* The canvas size is set by JS (layoutPreview) so it always fits inside the stage. */
.stage canvas { display: block; background: #000; }
.transport { flex: 0 0 auto; }
.transport { display: flex; align-items: center; gap: 8px; padding: 2px 14px 4px; border-top: 1px solid var(--line); background: var(--panel); }
.transport .time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); min-width: 130px; }
.icon-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-3); display: grid; place-items: center; font-size: 14px; }
.icon-btn.play { background: var(--accent); color: #1a0f08; border: 0; width: 34px; height: 34px; }
.splitter { grid-area: split; background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: row-resize; }

.tabs-sm { display: flex; border-bottom: 1px solid var(--line); }
.tabs-sm button { flex: 1; border: 0; background: transparent; padding: 10px 6px; color: var(--muted); border-bottom: 2px solid transparent; font-size: 13px; }
.tabs-sm button.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-body { padding: 12px; overflow: auto; flex: 1; }
.dropzone { border: 1.5px dashed var(--line); border-radius: 10px; padding: 18px; text-align: center; color: var(--muted); font-size: 13px; cursor: pointer; }
.dropzone.drag { border-color: var(--accent); color: var(--text); background: #221812; }
.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.media-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: grab; position: relative; }
.media-item:hover { border-color: var(--accent); }
.media-item .thumb { height: 66px; background: #000 center/cover no-repeat; display: grid; place-items: center; color: var(--muted); font-size: 22px; }
.media-item .name { font-size: 11px; padding: 5px 6px 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-item .dur { font-size: 10px; color: var(--muted); padding: 0 6px 5px; }
.media-item .add { position: absolute; right: 4px; top: 4px; background: rgba(0,0,0,.65); border: 0; border-radius: 6px; color: #fff; width: 22px; height: 22px; font-size: 14px; line-height: 1; }
.media-item .del { position: absolute; left: 4px; top: 4px; background: rgba(0,0,0,.65); border: 0; border-radius: 6px; color: #fff; width: 22px; height: 22px; font-size: 12px; line-height: 1; opacity: 0; }
.media-item:hover .del { opacity: 1; }
.preset { display: block; width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 8px; }
.preset:hover { border-color: var(--accent); }
.filter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.filter-chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px 6px; text-align: center; font-size: 12px; }
.filter-chip:hover { border-color: var(--accent); }
.filter-chip .sw { display: block; height: 8px; border-radius: 4px; margin: 0 auto 8px; width: 80%; }
.grid-title { grid-column: 1 / -1; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 10px 0 0; }
.grid-title:first-child { margin-top: 0; }

.props-panel h4 { margin: 14px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.props-panel h4:first-child { margin-top: 0; }
.prop { display: grid; grid-template-columns: 90px 1fr 46px; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.prop input[type=range] { width: 100%; accent-color: var(--accent); }
.prop .val { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.prop.wide { grid-template-columns: 90px 1fr; }
.empty { color: var(--muted); font-size: 13px; text-align: center; padding: 40px 10px; line-height: 1.6; }

.timeline { grid-area: timeline; background: var(--panel); display: grid; grid-template-columns: 120px 1fr; grid-template-rows: 36px 1fr; min-height: 0; border-top: 1px solid var(--line); }
.tl-tools { grid-column: 1 / 3; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.tl-tools .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.tl-tools .btn { padding: 4px 10px; font-size: 12px; }
.tl-tools input[type=range] { width: 110px; accent-color: var(--accent); }
.track-heads { overflow: hidden; border-right: 1px solid var(--line); background: var(--panel); padding-top: 26px; }
.track-head { height: 56px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 8px; font-size: 12px; color: var(--muted); }
.track-head .tbtns { display: flex; gap: 3px; }
.track-head .tbtns button { border: 1px solid var(--line); background: var(--panel-2); border-radius: 5px; width: 22px; height: 22px; font-size: 10px; color: var(--muted); padding: 0; }
.track-head .tbtns button.on { background: var(--accent); color: #1a0f08; border-color: var(--accent); }
.tl-scroll { overflow: auto; position: relative; }
.tl-content { position: relative; min-width: 100%; }
.ruler { height: 26px; position: sticky; top: 0; z-index: 5; background: var(--panel-2); border-bottom: 1px solid var(--line); cursor: pointer; }
.tick { position: absolute; top: 0; height: 100%; border-left: 1px solid var(--line); font-size: 10px; color: var(--muted); padding-left: 4px; padding-top: 5px; pointer-events: none; }
.track-lane { height: 56px; border-bottom: 1px solid var(--line); position: relative; }
.track-lane:nth-child(even) { background: rgba(255,255,255,.015); }
.track-lane.muted { opacity: .45; }
.clip { position: absolute; top: 4px; height: 48px; border-radius: 6px; overflow: hidden; font-size: 11px; padding: 4px 8px; white-space: nowrap; cursor: grab; border: 1px solid rgba(255,255,255,.18); user-select: none; color: #fff; text-overflow: ellipsis; }
.clip.video { background: linear-gradient(180deg, #4a7fe6, var(--clip-video)); }
.clip.image { background: linear-gradient(180deg, #8d63e3, var(--clip-image)); }
.clip.audio { background: linear-gradient(180deg, #34b3a3, var(--clip-audio)); }
.clip.text { background: linear-gradient(180deg, #d2792b, var(--clip-text)); }
.clip.selected { outline: 2px solid #fff; z-index: 3; }
.clip .handle { position: absolute; top: 0; width: 7px; height: 100%; cursor: ew-resize; background: rgba(0,0,0,.35); }
.clip .handle.l { left: 0; }
.clip .handle.r { right: 0; }
.clip .lbl { pointer-events: none; display: block; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.playhead { position: absolute; top: 0; width: 3px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 6px rgba(255,122,69,.55); z-index: 6; pointer-events: none; }
.playhead::before { content: none; }
.ph-head { position: absolute; left: 50%; top: var(--st, 0px); width: 22px; height: 24px; margin-left: -11px; background: var(--accent); border-radius: 6px 6px 12px 12px; pointer-events: auto; cursor: ew-resize; touch-action: none; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.ph-head::after { content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 8px; border-left: 2px solid rgba(255,255,255,.75); border-right: 2px solid rgba(255,255,255,.75); }
.ph-cut { position: absolute; left: 50%; top: calc(var(--st, 0px) + 34px); width: 32px; height: 48px; margin-left: -16px; border-radius: 16px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 18px; line-height: 1; pointer-events: auto; cursor: pointer; touch-action: none; box-shadow: 0 2px 8px rgba(0,0,0,.55); transition: transform .08s; }
.ph-cut:hover { background: var(--accent-2); color: #1a0f08; transform: scale(1.06); }
.ph-cut .ph-ico { pointer-events: none; }
.ph-step { position: absolute; top: 14px; width: 14px; height: 20px; display: grid; place-items: center; font-size: 12px; color: #ffd9c5; cursor: pointer; border-radius: 4px; }
.ph-step.l { left: -15px; } .ph-step.r { right: -15px; }
.ph-step:hover { color: #fff; background: rgba(255,122,69,.55); }
.snapline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent-2); z-index: 4; display: none; pointer-events: none; }

.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: none; place-items: center; z-index: 50; }
.modal-bg.show { display: grid; }
.modal { width: 420px; max-width: 92vw; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.modal h3 { margin: 0 0 14px; }
.progress { height: 10px; background: var(--panel-3); border-radius: 99px; overflow: hidden; margin: 14px 0 6px; }
.progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .2s; }
.banner { background: #3a2e12; color: #ffd98a; font-size: 12px; padding: 6px 12px; text-align: center; display: none; }
.banner.show { display: block; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--panel-3); border: 1px solid var(--line); padding: 10px 16px; border-radius: 10px; font-size: 13px; z-index: 60; display: none; }
.toast.show { display: block; }
.kicked { position: fixed; inset: 0; background: rgba(8,9,11,.96); z-index: 100; display: none; place-items: center; text-align: center; padding: 20px; }
.kicked.show { display: grid; }
.kicked .box { max-width: 420px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 46px 56px 220px 260px 8px 280px; grid-template-areas: "top" "tabs" "preview" "media" "split" "timeline"; }
  .props-panel { display: none; }
}

/* on-canvas move / resize handles */
.ov-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ov-box { position: absolute; border: 2px solid #ff7a3d; box-sizing: border-box; pointer-events: auto; cursor: move; touch-action: none; }
.ov-h { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid #ff7a3d; border-radius: 3px; box-sizing: border-box; }
.ov-h.nw { left: -8px; top: -8px; cursor: nwse-resize; }
.ov-h.ne { right: -8px; top: -8px; cursor: nesw-resize; }
.ov-h.sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.ov-h.se { right: -8px; bottom: -8px; cursor: nwse-resize; }

/* waveform + volume line on clips */
.clip .wavebox { position: absolute; inset: 0; pointer-events: none; }
.clip .wave { width: 100%; height: 100%; display: block; }
.clip .wave path { fill: rgba(255,255,255,.35); }
.clip.audio .wave path { fill: rgba(255,255,255,.5); }
.clip .vol-line { position: absolute; left: 7px; right: 7px; height: 12px; margin-top: -6px; cursor: ns-resize; z-index: 2; touch-action: none; }
.clip .vol-line::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); border-radius: 2px; }
.clip .vol-line:hover::after, .clip.vol-drag .vol-line::after { background: var(--accent-2); height: 3px; top: 4.5px; }
.clip .vol-tip { position: absolute; right: 4px; top: -8px; font-size: 10px; background: rgba(0,0,0,.75); color: #fff; padding: 1px 5px; border-radius: 4px; display: none; line-height: 1.4; pointer-events: none; }
.clip:hover .vol-tip, .clip.vol-drag .vol-tip { display: block; }
.clip .lbl { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* seek bar under the player */
.seekrow { flex: 0 0 auto; padding: 4px 16px 0; background: var(--panel); border-top: 1px solid var(--line); }
.seekbar { position: relative; height: 26px; cursor: pointer; touch-action: none; user-select: none; }
.seekbar::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 3px; background: var(--panel-3); }
.seek-fill { position: absolute; left: 0; top: 10px; height: 6px; border-radius: 3px; background: var(--accent); width: 0; pointer-events: none; }
.seek-knob { position: absolute; top: 5px; left: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-sizing: border-box; box-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
.seekbar:hover .seek-knob, .seekbar.dragging .seek-knob { transform: scale(1.25); }

/* big preview mode: side panels hidden, video as large as possible */
#focus-btn.on { background: var(--accent); color: #1a0f08; border-color: transparent; }
.app.focus { grid-template-columns: 1fr; grid-template-rows: 42px 1fr 8px 128px; grid-template-areas: "top" "preview" "split" "timeline"; }
.app.focus .tabbar, .app.focus .media-panel, .app.focus .props-panel { display: none; }

#focus-btn { width: auto; border-radius: 16px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
[hidden]{display:none!important}

/* filter / effect tracks are slimmer so the video tracks stay in view */
.track-head.fx, .track-lane.fx { height: 38px; }
.track-lane.fx .clip { top: 3px; height: 32px; padding-top: 6px; }
.clip.fx { background: linear-gradient(180deg, #b45ce0, #8a3fc0); }
.clip.fx .wavebox { display: none; }