:root {
  --bg: #0a1119; --panel: rgba(10, 17, 25, 0.9); --rail: rgba(5, 10, 16, 0.55); --raised: #0f1822;
  --line: #1d2a38; --line-strong: #2a3b4d;
  --fg: #e6eef6; --soft: #c3cfdb; --dim: #8b9db0;
  --accent: #6ec6ff; --on-accent: #04121d; --accent-tint: rgba(110, 198, 255, 0.1);
  --field: #0b141d; --warn: #ffd34d; --danger: #ff8a80;
  --speed: #2f98d6; --height: #d07a2e;
  --display: "Chakra Petch", "Inter", system-ui, sans-serif;
  color-scheme: dark;
}
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 13.5px/1.45 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
[hidden] { display: none !important; }
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #2a3b4d transparent; }
button, input, select { font: inherit; color: inherit; }
.dim { color: var(--dim); }
.small { font-size: 12px; }

.top { height: 48px; display: flex; align-items: center; gap: 20px; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--rail); }
/* the title like the game menu's: the logo, then the name (no accent) */
h1 { margin: 0; display: flex; align-items: center; white-space: nowrap; font: italic 700 20px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); }
h1 .logo { flex: none; width: 28px; height: 28px; margin-right: 10px; border-radius: 7px; }
#status { color: var(--dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#status.err { color: var(--danger); }

.app { height: calc(100% - 48px); display: grid; grid-template-columns: 270px 290px minmax(0, 1fr); }
.pane { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--rail); }
.pane-head { padding: 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.pane-head .row { display: flex; gap: 6px; }
.pane-head .row > * { flex: 1; min-width: 0; }
input[type=search], select { background: var(--field); border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; outline: none; }
input[type=search]:focus, select:focus { border-color: var(--accent); }
.title { font: 600 16px/1.2 var(--display); letter-spacing: 0.02em; }
.list { overflow-y: auto; flex: 1; min-height: 0; padding: 4px 0; }

.map { padding: 7px 12px; cursor: pointer; border-left: 2px solid transparent; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
.map:hover { background: var(--accent-tint); }
.map.on { background: var(--accent-tint); border-left-color: var(--accent); }
.map .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map .n { font: 600 12px var(--display); color: var(--soft); align-self: center; grid-row: span 2; background: var(--field); border: 1px solid var(--line-strong); border-radius: 10px; padding: 1px 8px; }
.map .s { color: var(--dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.way { padding: 10px 12px 4px; font: 600 12px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.way span { color: var(--dim); letter-spacing: 0; text-transform: none; font-weight: 500; }
.run { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 0 8px; padding: 5px 12px; cursor: pointer; border-left: 2px solid transparent; align-items: baseline; }
.run:hover { background: var(--accent-tint); }
.run.on { background: var(--accent-tint); border-left-color: var(--accent); }
.run .r { color: var(--dim); font: 600 12px var(--display); }
.run .p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run .tm { font: 600 13px var(--display); font-variant-numeric: tabular-nums; }
.run .cached { color: var(--accent); font-size: 10px; margin-left: 4px; }

.stage { overflow: hidden; min-width: 0; min-height: 0; padding: 12px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.analysis { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.jumps-wrap { flex: 1; min-height: 80px; overflow-y: auto; }
.jumps thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
.player { display: flex; flex-direction: column; gap: 8px; }
.viewport { position: relative; width: 100%; max-width: calc(var(--vp-h, 44vh) * 16 / 9); aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; align-self: center; }
.viewport iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
#shield { position: absolute; inset: 0; cursor: pointer; }
#overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;
  background: rgba(5, 9, 14, 0.82); color: var(--soft); font: 600 15px var(--display); letter-spacing: 0.04em; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; background: var(--field); }
.seg button { border: 0; background: none; padding: 5px 11px; cursor: pointer; color: var(--soft); border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--accent-tint); color: var(--fg); }
.seg button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.clock { font: 600 14px var(--display); font-variant-numeric: tabular-nums; min-width: 170px; text-align: center; color: var(--soft); }
.toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--soft); cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--accent); }

.run-head { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.run-head .who { font: 600 18px var(--display); }
.stat { display: flex; flex-direction: column; }
.stat b { font: 600 18px var(--display); font-variant-numeric: tabular-nums; }
.stat span { color: var(--dim); font-size: 11.5px; }
.graph-wrap { position: relative; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 8px 8px 6px; }
#graph { width: 100%; height: var(--graph-h, 230px); display: block; cursor: crosshair; touch-action: none; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11.5px; color: var(--soft); padding: 4px 6px 0; }
.sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: 3px; margin-right: 5px; }
.sw.speed { background: var(--speed); } .sw.height { background: var(--height); }
.sw.void { background: rgba(170, 140, 255, 0.55); height: 6px; vertical-align: 1px; }
.sw.tp { background: none; border-top: 2px dashed var(--danger); height: 0; }
.sw.best { background: rgba(255, 211, 77, 0.3); height: 9px; vertical-align: -1px; }
.tip { position: absolute; pointer-events: none; background: rgba(5, 10, 16, 0.94); border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 6px 9px; font-size: 12px; line-height: 1.5; white-space: nowrap; z-index: 2; }
.tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

.jumps-head { display: flex; align-items: center; gap: 14px; }
.jumps-head h2 { margin: 0; font: 600 15px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
table.jumps { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.jumps th { text-align: right; font: 600 11px var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim);
  padding: 6px 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.jumps td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.jumps th:first-child, .jumps td:first-child { text-align: left; }
.jumps tr.j { cursor: pointer; }
.jumps tr.j:hover td { background: var(--accent-tint); }
.jumps tr.on td { background: rgba(110, 198, 255, 0.18); }
.jumps tr.best td:first-child { color: var(--warn); font-weight: 600; }
.jumps .tag { display: inline-block; font: 600 10px var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--warn);
  border: 1px solid rgba(255, 211, 77, 0.4); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.jumps td.k { color: var(--fg); font-weight: 600; }
.jumps .copy { background: var(--field); border: 1px solid var(--line-strong); border-radius: 5px; padding: 2px 8px; cursor: pointer; color: var(--soft); font-size: 11.5px; }
.jumps .copy:hover { border-color: var(--accent); color: var(--fg); }
.pos { color: #8fe3a1; } .neg { color: var(--danger); }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--on-accent);
  padding: 8px 16px; border-radius: 8px; font-weight: 600; z-index: 10; }
.seg button svg { width: 14px; height: 14px; display: block; fill: currentColor; }
#playBtn, #prevJ, #nextJ { padding: 6px 12px; }

/* brightness + export */
.bright { display: inline-flex; align-items: center; gap: 5px; color: var(--soft); }
.bright svg { width: 15px; height: 15px; fill: currentColor; color: var(--soft); }
.bright input[type=range] { width: 80px; accent-color: var(--accent); }
.bright .v { font: 600 12px var(--display); font-variant-numeric: tabular-nums; min-width: 38px; }
button.mini { background: var(--field); border: 1px solid var(--line-strong); border-radius: 5px; padding: 2px 8px; cursor: pointer; color: var(--soft); font-size: 11.5px; }
button.mini:hover { border-color: var(--accent); color: var(--fg); }
button.primary { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 7px; padding: 6px 14px; font-weight: 600; cursor: pointer; }
button.primary:disabled { opacity: 0.5; cursor: default; }
.jumps .loc { color: var(--soft); font-weight: 400; margin-left: 6px; }
dialog.export { position: fixed; z-index: 50; inset: auto 16px 16px auto; margin: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--raised); color: var(--fg); border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
dialog.export::backdrop { background: transparent; }
.ex-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ex-head h2 { margin: 0; font: 600 15px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.ex-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ex-row .lbl { width: 78px; color: var(--dim); font-size: 12px; }
.ex-row input[type=number] { width: 78px; background: var(--field); border: 1px solid var(--line-strong); border-radius: 6px; padding: 3px 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.checks label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.checks input, .ex-row input[type=checkbox] { accent-color: var(--accent); }
.ex-sum { padding: 10px 0 4px; font-size: 12.5px; color: var(--soft); word-break: break-all; }
.ex-prog .bar { height: 8px; background: var(--field); border-radius: 4px; overflow: hidden; margin: 6px 0; }
.ex-prog .bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.ex-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 10px; }
.ex-foot #exMsg { margin-right: auto; color: var(--soft); }
.ex-foot #exMsg.err { color: var(--danger); }
.viewport.exporting { outline: 2px solid var(--accent); }

/* map + run lists collapsible: more room for the player, graph and jumps */
.side-btn { background: none; border: 1px solid var(--line-strong); color: var(--fg); border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.side-btn:hover { border-color: var(--accent); color: var(--accent); }
.app.collapsed { grid-template-columns: minmax(0, 1fr); }
.app.collapsed > .pane.maps, .app.collapsed > .pane.runs { display: none; }

/* Export: top right, above the game view (same width as the view) */
.vp-top { width: 100%; max-width: calc(var(--vp-h, 44vh) * 16 / 9); align-self: center; display: flex; justify-content: flex-end; margin-bottom: -2px; }
dialog.export { inset: 104px 18px auto auto !important; max-height: calc(100vh - 120px); overscroll-behavior: contain; }

.ex-warn { margin: 4px 0 2px; padding: 8px 10px; border: 1px solid #b8862b; background: rgba(255, 179, 71, 0.08); color: #ffd28a; border-radius: 8px; font-size: 12px; line-height: 1.45; }

/* My pk3s: the user's own files (drop anywhere) */
.demo-btn { margin-left: auto; }
.pk3-btn b { color: var(--accent); font-weight: 600; }
dialog.pk3 { width: min(520px, calc(100vw - 32px)); }
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 22px 14px; margin: 4px 0 10px;
  border: 1.5px dashed var(--line-strong); border-radius: 10px; background: var(--field); cursor: pointer; transition: border-color .15s, background .15s; }
.drop b { font: 600 14px var(--display); letter-spacing: 0.04em; }
.drop span { color: var(--dim); font-size: 12px; }
.drop code { color: var(--soft); }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-tint); }
.pk3-list { display: flex; flex-direction: column; max-height: max(120px, calc(100vh - 470px)); overflow-y: auto; overscroll-behavior: contain; }
.pk3-list .f { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.pk3-list .f .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk3-list .f .z { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.pk3-list .empty { color: var(--dim); font-size: 12px; padding: 4px 2px 8px; }
.pk3-note { margin: 10px 0 0; line-height: 1.5; }
.drop-shade { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(5, 10, 16, 0.72); pointer-events: none; }
.drop-shade div { padding: 28px 40px; border: 2px dashed var(--accent); border-radius: 14px; font: 600 18px var(--display); letter-spacing: 0.05em; color: var(--accent); background: var(--raised); }
.run.own .r { color: var(--accent); }
.run .p i.dim { font-style: normal; font-size: 11.5px; }

/* Jump / Frag mode: Frag hides the jump map list (frag demos bring their own map) */
.mode-seg button { padding: 4px 12px; font-size: 12px; }
.app.frag { grid-template-columns: 290px minmax(0, 1fr); }
.app.frag > .pane.maps { display: none; }
.app.frag.collapsed { grid-template-columns: minmax(0, 1fr); }
.app:not(.frag) .frag-legend, .app.frag .jump-legend { display: none; }
.legend .sw.won { background: rgba(143,227,161,0.5); }
.legend .sw.lost { background: rgba(255,92,92,0.45); }
.legend .sw.life { background: rgba(110,198,255,0.7); }
.legend .mk { font-size: 11px; margin-right: 5px; }
.legend .mk.kill { color: #ffd34d; } .legend .mk.death { color: #ff5c5c; } .legend .mk.other { color: var(--dim); }
.jumps td.won { color: #8fe3a1; } .jumps td.lost { color: #ff8a80; }

/* resizable sections: drag handles between the game view, the graph and the table */
.split { flex: none; height: 11px; margin: -4px 0; cursor: row-resize; position: relative; z-index: 2; touch-action: none; }
/* a full-width line with a grip in the middle; accent while hovered / dragged */
.split::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--line-strong); transition: background .15s, height .15s, top .15s; }
.split::after { content: ""; position: absolute; left: 50%; top: 3px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--raised); border: 1px solid var(--line-strong); box-sizing: border-box; transition: background .15s, border-color .15s; }
.split:hover::before, .split.drag::before { background: var(--accent); height: 2px; top: 4.5px; }
.split:hover::after, .split.drag::after { background: var(--accent); border-color: var(--accent); }
body.resizing, body.resizing * { cursor: row-resize !important; user-select: none; }
body.resizing iframe { pointer-events: none; }

/* the game view fullscreen (double click / F): the whole screen, the picture letterboxed 16:9 */
.viewport:fullscreen { max-width: none; width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; border-radius: 0; display: grid; place-items: center; }
.viewport:fullscreen iframe { inset: 0; margin: auto; width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); }

/* Frag mode: the scoreboard next to the game view (at the playhead) */
.vp-row { display: flex; justify-content: center; align-items: stretch; gap: 12px; width: 100%; min-width: 0; }
.vp-row .viewport { align-self: auto; flex: 0 1 auto; min-width: 0; }
.scoreboard { flex: none; width: 250px; overflow-y: auto; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.scoreboard .sb-score { display: flex; justify-content: center; align-items: baseline; gap: 10px; font: 700 24px/1 var(--display); margin: 2px 0 2px; }
.scoreboard .sb-score .red { color: #ff7a6e; } .scoreboard .sb-score .blue { color: #6fa8ff; } .scoreboard .sb-score i { color: var(--dim); font-style: normal; font-size: 16px; }
.scoreboard .sb-round { text-align: center; color: var(--dim); font-size: 11.5px; margin-bottom: 8px; }
.scoreboard h3 { margin: 8px 0 3px; font: 600 11.5px var(--display); letter-spacing: .08em; text-transform: uppercase; display: flex; justify-content: space-between; }
.scoreboard h3.red { color: #ff7a6e; } .scoreboard h3.blue { color: #6fa8ff; } .scoreboard h3.none { color: var(--dim); }
.scoreboard h3 span { color: var(--dim); font-weight: 500; letter-spacing: 0; text-transform: none; }
.scoreboard .p { display: grid; grid-template-columns: minmax(0, 1fr) 26px 26px; gap: 6px; padding: 2px 4px; border-radius: 4px; }
.scoreboard .p .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scoreboard .p b, .scoreboard .p span:not(.n) { text-align: right; }
.scoreboard .p.dead { color: var(--dim); }
.scoreboard .p.dead .n { text-decoration: line-through; text-decoration-color: rgba(139,157,176,.5); }
.scoreboard .p.me { background: var(--accent-tint); color: var(--fg); }
.scoreboard .p.hd { color: var(--dim); font-size: 10.5px; padding-top: 0; padding-bottom: 0; }

/* ---- Video mode (video.js): song, timeline, jump bin, editor ---- */
.video-panel { display: none; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.app.video .video-panel { display: flex; }
.app.video .analysis { display: none; }
.app.video .split[data-split="graph"] { display: none; }
.vrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vrow .grow { flex: 1; }
.vsong { display: flex; gap: 10px; align-items: baseline; min-width: 0; flex: 1; }
.vsong b { font: 600 14px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.vsong .err { color: var(--danger); }
.vclock { font: 600 13px var(--display); font-variant-numeric: tabular-nums; min-width: 110px; }
.vmore { position: relative; }
.vmore summary { list-style: none; cursor: pointer; }
.vmore-body { position: absolute; right: 0; top: 30px; z-index: 5; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px; display: grid; gap: 8px; width: 240px; }
.vmore-body label { display: flex; justify-content: space-between; gap: 8px; color: var(--dim); }
.vmore-body input { width: 90px; background: var(--field); border: 1px solid var(--line-strong); border-radius: 5px; padding: 3px 6px; }
.mini.danger { color: var(--danger); }
.vtl-wrap { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--field); flex: none; }
.vtl { position: relative; height: 150px; min-width: 100%; user-select: none; }
.vtl .bar { position: absolute; top: 0; bottom: 0; width: 1px; background: #1a2735; }
.vtl .beat { position: absolute; top: 0; height: 8px; width: 1px; background: #24364a; }
.vtl .bn { position: absolute; top: 0; font-size: 10px; color: var(--dim); }
.vtl .vsec { position: absolute; top: 14px; height: 16px; font: 600 10.5px/16px var(--display); color: var(--on-accent); padding: 0 5px; overflow: hidden; white-space: nowrap; border-radius: 3px; opacity: .9; }
.vtl .hit { position: absolute; top: 32px; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: #ff8a80; }
.vcut { position: absolute; top: 40px; height: 74px; border-radius: 5px; background: #12212f; border: 1px solid var(--line-strong); padding: 4px 6px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; gap: 1px; font-size: 11px; line-height: 1.25; }
.vcut b { font: 600 11.5px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcut span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcut.cam-first { border-top: 3px solid var(--accent); }
.vcut.cam-chase { border-top: 3px solid var(--height); }
.vcut.cam-urt { border-top: 3px solid #9be15d; }
.vcut.empty { background: transparent; border-style: dashed; }
.vcut.sel { outline: 2px solid var(--accent); z-index: 2; }
.vcut.over { outline: 2px dashed var(--warn); background: rgba(255, 211, 77, .12); }
.vedge { position: absolute; top: 40px; height: 74px; width: 8px; cursor: ew-resize; z-index: 3; }
.vedge:hover { background: rgba(110, 198, 255, .35); border-radius: 3px; }
.vtxt { position: absolute; top: 120px; height: 24px; border-radius: 4px; background: rgba(255, 211, 77, .16); border: 1px solid var(--warn); font: 600 11px/22px var(--display); padding: 0 6px; overflow: hidden; white-space: nowrap; cursor: grab; }
.vtxt.sel { background: rgba(255, 211, 77, .35); }
.vhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; z-index: 4; }
.vlower { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; flex: 1; min-height: 0; }
.vbin { overflow-y: auto; min-height: 0; }
.pane.vjumps { display: none; }
.app.video > .pane.vjumps { display: flex; }
.vbh { position: sticky; top: 0; background: var(--bg); padding: 6px 10px; font: 600 12px var(--display); color: var(--accent); border-bottom: 1px solid var(--line); }
.vjump { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 5px 10px; border-bottom: 1px solid var(--line); cursor: grab; }
.vjump:hover { background: var(--accent-tint); }
.vjump b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vjump span { color: var(--dim); font-size: 11.5px; }
.vjump .sc { grid-row: span 2; align-self: center; font: 600 12px var(--display); color: var(--soft); }
.vedit { overflow-y: auto; min-height: 0; padding: 2px 4px; }
.vf { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 8px; }
.vf .lbl { color: var(--dim); }
.vf input { background: var(--field); border: 1px solid var(--line-strong); border-radius: 5px; padding: 4px 7px; }
.vf input[type=number] { width: 90px; }
.vf .mini { margin-right: 4px; }
#vTprev { width: 320px; height: 180px; border-radius: 6px; border: 1px solid var(--line); margin-top: 4px; }
.app.video .vp-top { display: none; }
.vmore summary { background: var(--field); border: 1px solid var(--line-strong); border-radius: 5px; padding: 2px 8px; color: var(--soft); font-size: 11.5px; }
button.mini:disabled { opacity: .45; cursor: default; }
.vtext-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the same jump used in more than one place */
.vcut.reused { background: repeating-linear-gradient(135deg, #12212f 0 8px, #2a2412 8px 16px); }
.vcut .reuse { position: absolute; right: 3px; top: 3px; font: 600 10px var(--display); font-style: normal; color: #000; background: var(--warn); border-radius: 3px; padding: 0 4px; }
.vcut.reused b { padding-right: 26px; }
.vjump em.uses { font: 600 10px var(--display); font-style: normal; color: var(--soft); border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 3px; margin-right: 5px; }
.vjump em.uses.multi { color: #000; background: var(--warn); border-color: var(--warn); }
.reuse-note { color: var(--warn); }
.reuse-note button { margin: 0 2px; }
/* Video mode: saved videos, a sidebar on the right */
.pane.vsaved { display: none; border-right: 0; border-left: 1px solid var(--line); }
.app.video { grid-template-columns: 270px 290px 270px minmax(0, 1fr) 250px; }
.app.video.collapsed { grid-template-columns: 270px minmax(0, 1fr) 250px; }
.app.video > .pane.vsaved { display: flex; }
.vsaved .row button { flex: 1; }
.vsv { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1px 6px; padding: 7px 12px; cursor: pointer; border-left: 2px solid transparent; font-size: 12px; }
.vsv:hover { background: var(--accent-tint); }
.vsv.on { border-left-color: var(--accent); background: var(--accent-tint); }
.vsv .n { font: 600 13px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsv .dot { font-style: normal; color: var(--warn); font-size: 10px; align-self: center; }
.vsv .x { grid-column: 3; grid-row: 1; background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; visibility: hidden; }
.vsv:hover .x { visibility: visible; }
.vsv .x:hover { color: var(--danger); }
.vsv > span { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vfx input { width: 64px; }
.vsv .tag { grid-column: 3; grid-row: 1; font: 600 9.5px var(--display); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 4px; align-self: center; }
.vsv.builtin { border-bottom: 1px solid var(--line); }
.vsaved .row #vNewProj { flex: 0 0 auto; }
.vhud label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-right: 6px; }
/* the jump playing now / the selected cut's jump in the jump list */
.vjump { border-left: 3px solid transparent; }
.vjump.now { border-left-color: var(--accent); background: var(--accent-tint); }
.vjump.now b::before { content: '▶ '; color: var(--accent); font-size: 10px; }
.vjump.sel { box-shadow: inset 0 0 0 1px var(--warn); }
.vnow-dot, .vsel-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; vertical-align: middle; }
.vnow-dot { background: var(--accent); }
.vsel-dot { border: 1px solid var(--warn); }
/* Fill from this map: the studio's magic, the button to see (wand, flowing colours, glow, a shine) */
.vfill { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 8px 12px; border: 0; border-radius: 10px; cursor: pointer;
  font: 700 14px var(--display); letter-spacing: .04em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45);
  background: linear-gradient(110deg, #6ec6ff, #a66bff, #ff6ec7, #ffb347, #6ec6ff, #a66bff); background-size: 300% 100%;
  animation: vfill-flow 5s linear infinite, vfill-glow 1.8s ease-in-out infinite; }
.vfill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%); animation: vfill-shine 2.6s ease-in-out infinite; pointer-events: none; }
.vfill:hover { transform: translateY(-1px) scale(1.03); }
.vfill:active { transform: scale(.98); }
.vfill .wand { width: 22px; height: 22px; flex: none; overflow: visible; animation: vfill-wave 1.8s ease-in-out infinite; transform-origin: 20% 80%; }
.vfill .wand .stick { fill: #fff; }
.vfill .wand .tip { fill: #ffe680; }
.vfill .wand .spark { fill: #fff8c4; transform-box: fill-box; transform-origin: center; animation: vfill-twinkle 1.2s ease-in-out infinite; }
.vfill .wand .s2 { animation-delay: .4s; }
.vfill .wand .s3 { animation-delay: .8s; }
.vfill.busy { animation-duration: 1.2s, .9s; }
.vfill.busy .wand { animation-duration: .6s; }
.vfill:disabled:not(.busy) { filter: grayscale(.9) brightness(.7); cursor: default; animation: none; }
.vfill:disabled:not(.busy)::after, .vfill:disabled:not(.busy) .wand, .vfill:disabled:not(.busy) .spark { animation: none; }
@keyframes vfill-flow { to { background-position: 300% 0; } }
@keyframes vfill-glow { 0%, 100% { box-shadow: 0 0 6px rgba(166,107,255,.45), 0 0 0 1px rgba(255,255,255,.15) inset; }
  50% { box-shadow: 0 0 20px rgba(255,110,199,.85), 0 0 6px rgba(110,198,255,.9), 0 0 0 1px rgba(255,255,255,.35) inset; } }
@keyframes vfill-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes vfill-wave { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes vfill-twinkle { 0%, 100% { opacity: .25; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .vfill, .vfill::after, .vfill .wand, .vfill .spark { animation: none !important; } }
/* + New: the song question */
dialog.vnew { width: min(440px, calc(100vw - 32px)); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--raised, var(--rail)); color: var(--fg); padding: 16px 18px; }
dialog.vnew::backdrop { background: rgba(5, 10, 16, .6); }
dialog.vnew h2 { margin: 0; font: 600 17px var(--display); }
dialog.vnew p { margin: 10px 0; line-height: 1.5; }
.vnew-btns { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.vnew-btns button { padding: 10px 14px; font-size: 14px; }
.vnew-demo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--field); border: 1px solid var(--line-strong); border-radius: 7px; color: var(--fg); cursor: pointer; text-align: left; }
.vnew-demo:hover { border-color: var(--accent); }
/* after the first use: a regular button (the wand stays as its icon) */
.vfill.tamed { overflow: visible; padding: 3px 10px 3px 7px; gap: 5px; border-radius: 5px; font-family: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-shadow: none;
  color: var(--soft); background: var(--field); border: 1px solid var(--line-strong); animation: none; box-shadow: none; }
.vfill.tamed::after { content: none; }
.vfill.tamed:hover { transform: none; border-color: var(--accent); color: var(--fg); }
.vfill.tamed .wand { width: 14px; height: 14px; animation: none; }
.vfill.tamed .wand .stick { fill: currentColor; }
.vfill.tamed .wand .tip, .vfill.tamed .wand .spark { fill: var(--accent); }
.vfill.tamed .wand .spark { animation: none; opacity: 1; }
.vfill.tamed.busy { color: var(--fg); border-color: var(--accent); }
.vfill.tamed:disabled:not(.busy) { filter: none; opacity: .45; }