/* Video Editor — tokens for the three themes (Pro, Light, Classic 98), base, layout, top bar and buttons. */
:root {
  --ink: #0a0a0a; --bone: #f1ede4; --lime: #a2fff6;
  --font-ui: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Archivo', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --fs: 12.5px; --fs-s: 11px;
  --top-h: 48px; --bin-w: 300px; --insp-w: 300px; --status-h: 24px; --tl-h: 300px;
  --radius: 8px; --radius-s: 6px;
  /* Colours follow the shared ITpris theme (--sl-*, set by shared/theme/theme.js). The value after each var() is the Pro fallback. */
  --bg: var(--sl-background, #0b0b0d); --panel: var(--sl-surface, #141417); --panel-2: color-mix(in srgb, var(--panel) 96%, var(--fg)); --surface: var(--bg);
  --line: var(--sl-border, #222228); --line-2: color-mix(in srgb, var(--line) 85%, var(--fg));
  --fg: var(--sl-text, #ececef); --dim: color-mix(in srgb, var(--fg) 74%, transparent); --faint: color-mix(in srgb, var(--fg) 60%, transparent);
  --accent: var(--sl-accent, #a2fff6); --accent-ink: var(--sl-on-accent, #0a0a0a); --accent-line: var(--accent); --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --hover: color-mix(in srgb, var(--fg) 8%, var(--panel)); --active: color-mix(in srgb, var(--fg) 16%, var(--panel)); --input: var(--sl-surface, #0f0f12);
  --danger: #ff5a6e; --ok: #4be3d4; --warn: #ffc94a;
  --clip-video: #3d6fd6; --clip-audio: #2e9c74; --clip-image: #9b59d6; --clip-title: #d68a2e; --clip-color: #6b6b78;
  --tl-bg: var(--bg); --tl-lane: var(--panel); --tl-lane2: color-mix(in srgb, var(--panel) 94%, var(--fg)); --tl-ruler: var(--panel-2); --playhead: #ff4d5e;
  --shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
  --bevel: none; --bevel-in: none;
  --sui-bg: var(--panel); --sui-bg2: var(--panel-2); --sui-input: var(--input); --sui-line: var(--line-2); --sui-fg: var(--fg); --sui-dim: var(--dim); --sui-faint: var(--faint);
  --sui-hover: var(--hover); --sui-sel: var(--active); --sui-accent: var(--accent); --sui-accent-ink: var(--accent-ink); --sui-radius: 6px; --sui-shadow: var(--shadow); --sui-font: var(--font-ui); --sui-mono: var(--mono);
  color-scheme: dark;
}
:root[data-tlbx-theme="light"] {
  --accent-line: var(--sl-accent, #008175);
  --danger: #d0263f; --ok: #007c6f; --warn: #a66b00;
  --playhead: #e0263a;
  --shadow: 0 16px 44px rgba(40, 30, 10, .2), 0 2px 6px rgba(40, 30, 10, .12);
  color-scheme: light;
}
:root[data-tlbx-theme="classic"] {
  --font-ui: Tahoma, 'MS Sans Serif', 'Microsoft Sans Serif', 'Segoe UI', Geneva, Verdana, sans-serif;
  --font-display: Tahoma, 'MS Sans Serif', Verdana, sans-serif;
  --mono: 'Lucida Console', 'Courier New', monospace;
  --fs: 11px; --fs-s: 11px; --radius: 0; --radius-s: 0; --top-h: 40px;
  --line-2: var(--line); --active: var(--accent); --hover: color-mix(in srgb, var(--bg) 60%, var(--input));
  --danger: #a00000; --ok: #006000; --warn: #805000;
  --clip-video: #000080; --clip-audio: #008000; --clip-image: #800080; --clip-title: #808000; --clip-color: #404040;
  --playhead: #ff0000;
  --shadow: 2px 2px 0 rgba(0, 0, 0, .55);
  --bevel: inset -1px -1px var(--fg), inset 1px 1px var(--input), inset -2px -2px var(--line), inset 2px 2px color-mix(in srgb, var(--bg) 45%, var(--input));
  --bevel-in: inset -1px -1px var(--input), inset 1px 1px var(--fg), inset -2px -2px color-mix(in srgb, var(--bg) 45%, var(--input)), inset 2px 2px var(--line);
  --sui-radius: 0;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; background: var(--bg); color: var(--fg); font: var(--fs)/1.4 var(--font-ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .4; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.noscript { padding: 40px; text-align: center; }

/* ---------------------------------------------------------------- layout */
.app { display: grid; height: 100vh; height: 100dvh;
  grid-template-columns: var(--bin-w) minmax(0, 1fr) var(--insp-w);
  grid-template-rows: var(--top-h) minmax(160px, 1fr) var(--tl-h) var(--status-h);
  grid-template-areas: "top top top" "bin mon insp" "tl tl tl" "status status status"; }
.topbar { grid-area: top; }
.bin { grid-area: bin; border-right: 1px solid var(--line); }
.monitor { grid-area: mon; }
.insp { grid-area: insp; border-left: 1px solid var(--line); }
.timeline { grid-area: tl; }
.statusbar { grid-area: status; }
.mtabs { display: none; }

/* ---------------------------------------------------------------- top bar */
.topbar { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 10px; background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0; }
.brand { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ink); flex: none; }
.brand-mark { width: 21px; height: 21px; }
.brand-mark path:first-child { fill: var(--lime); }
.brand-mark .shine { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; opacity: .85; }
.appname { display: flex; flex-direction: column; line-height: 1.05; margin: 0 8px 0 4px; flex: none; }
.appname b { font: 800 16px/1.1 var(--font-display); letter-spacing: -.01em; }
.home-link { font: 500 10.5px/1.3 var(--mono); color: var(--faint); text-decoration: none; }
.home-link:hover { color: var(--accent-line); }
.menus { display: flex; gap: 1px; }
.menu-b { height: 28px; padding: 0 9px; border: 0; border-radius: var(--radius-s); background: none; color: var(--dim); font-weight: 500; }
.menu-b:hover, .menu-b:focus-visible { background: var(--hover); color: var(--fg); }
.tb-group { display: flex; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); }
.tb-flex { flex: 1; min-width: 4px; }
.tb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: var(--radius-s); background: none; color: var(--dim); white-space: nowrap; flex: none; }
.tb:hover:not(:disabled) { background: var(--hover); color: var(--fg); }
.tb.on { background: var(--accent-soft); color: var(--accent-line); }
.tb-sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 4px; flex: none; }
.local-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-line); font: 600 10.5px/1 var(--mono); white-space: nowrap; flex: none; }
.local-badge .ic { width: 14px; height: 14px; }
.fname input { width: 180px; height: 30px; padding: 0 10px; border-radius: var(--radius-s); border: 1px solid var(--line-2); background: var(--input); color: var(--fg); font: 500 12px var(--mono); }
.fname input:focus { outline: none; border-color: var(--accent-line); }
#btnMore { display: none; }
/* The shared header buttons (Drive, Tour, View, Theme, Apps: shared/ui/hbtn.css) wear the look of .tb. */
.topbar { --tlbx-hbtn-h: 30px; --tlbx-hbtn-radius: var(--radius-s); --tlbx-hbtn-bg: transparent; --tlbx-hbtn-line: transparent; --tlbx-hbtn-hover: var(--hover); --tlbx-hbtn-fs: 12px; }

/* buttons and inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--radius-s); border: 1px solid var(--line-2); background: var(--panel-2); color: var(--fg); font-weight: 500; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--hover); border-color: var(--faint); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.btn.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.07); }
.btn.sm { height: 26px; padding: 0 9px; font-size: var(--fs-s); }
.btn.lg { height: 40px; padding: 0 18px; font-size: 13.5px; border-radius: 9px; }
.btn .ic { width: 16px; height: 16px; }
.inp { height: 26px; min-width: 0; padding: 0 7px; border-radius: var(--radius-s); border: 1px solid var(--line-2); background: var(--input); color: var(--fg); font: 500 11.5px var(--mono); }
.inp:focus { outline: none; border-color: var(--accent-line); }
select.inp { font-family: var(--font-ui); }
input[type=range] { accent-color: var(--accent-line); min-width: 0; }
input[type=color] { width: 30px; height: 24px; padding: 0; border: 1px solid var(--line-2); border-radius: 4px; background: none; }

/* status bar */
.statusbar { display: flex; align-items: center; gap: 14px; padding: 0 12px; background: var(--panel); border-top: 1px solid var(--line); color: var(--faint); font: 500 10.5px var(--mono); white-space: nowrap; overflow: hidden; }
.st-msg { color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.st-local { display: inline-flex; align-items: center; gap: 4px; }
.st-local .ic { width: 12px; height: 12px; }

.drop-overlay { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: rgba(10, 10, 12, .7); backdrop-filter: blur(3px); pointer-events: none; }
.drop-overlay > div { display: grid; justify-items: center; gap: 6px; padding: 30px 46px; border: 2px dashed var(--accent-line); border-radius: 18px; background: var(--panel); color: var(--fg); }
.drop-overlay .ic { width: 34px; height: 34px; color: var(--accent-line); }
.drop-overlay span { color: var(--dim); }

/* Drop strip over the monitor (shared/drop, compact) */
#monitor { position: relative; }
.sc-dropstrip { position: absolute; left: 12px; top: 12px; z-index: 5; max-width: min(420px, calc(100% - 24px)); max-height: 50%; overflow: auto; background: var(--panel, #fff); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.2); }