/* ═══════════════════════════════════════════════════════════════════════════
   Vid2Shorts Studio — "SIGNAL" art direction.
   Loads AFTER studio.css and gives the editor a new face: a broadcast control
   room. Carbon machined panels floating over a faint blueprint grid and
   scanlines, electric ultramarine for every action, a hot coral playhead,
   JetBrains Mono for every readout. The DOM contract and all mechanics stay
   in studio.css / studio.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --brand-1: #3d5bff;
  --brand-2: #7d92ff;
  --grad: linear-gradient(120deg, #7d92ff, #3d5bff 60%);
  --bg: #0b0d11;
  --bg-2: #10131a;
  --panel: rgba(237, 240, 245, 0.04);
  --panel-2: rgba(237, 240, 245, 0.07);
  --stroke: #232833;
  --stroke-2: #2e3542;
  --ink: #edf0f5;
  --ink-2: #8b93a3;
  --ink-3: #5b6373;
  --accent: #3d5bff;
  --accent-2: #ff4d6b;
  --accent-dim: rgba(61, 91, 255, 0.14);
  --good: #6ef0b0;
  --warn: #ffc46b;
  --volt-2: #7d92ff;
  --line-volt: rgba(61, 91, 255, 0.45);
  --radius: 12px;
  --blur: 16px;
  --dock-blur: 18px;
  --stage-vignette: radial-gradient(120% 90% at 50% 0%, rgba(61, 91, 255, 0.08), transparent 60%);
  --font: "Archivo", -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", ui-monospace, Consolas, monospace;
}
::selection { background: rgba(61, 91, 255, 0.4); }

/* ── The air: grid + scanlines behind the panels ── */
.app {
  background:
    radial-gradient(50vw 38vw at 82% -8%, rgba(61, 91, 255, 0.13), transparent 62%),
    radial-gradient(44vw 36vw at 4% 96%, rgba(255, 77, 107, 0.05), transparent 60%),
    var(--bg);
}
.app::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(237, 240, 245, 0.015) 0 1px, transparent 1px 4px),
    linear-gradient(rgba(237, 240, 245, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 240, 245, 0.02) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  mask-image: radial-gradient(85vw 80vh at 50% 15%, #000 25%, transparent 85%);
}
.topbar, .work { position: relative; z-index: 1; }

/* ── Top bar: the console header ── */
.topbar {
  margin: 10px clamp(10px, 1.6vw, 16px) 0;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: rgba(16, 19, 26, 0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.9);
  position: relative;
}
.topbar::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61, 91, 255, 0.55) 40%, rgba(255, 77, 107, 0.4) 75%, transparent);
  pointer-events: none;
}
.brand-glyph {
  border-radius: 8px;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(125, 146, 255, 0.4), 0 6px 20px -6px rgba(61, 91, 255, 0.8);
}
.brand-name {
  font-weight: 800; font-stretch: 90%; text-transform: uppercase; letter-spacing: 0;
  background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--ink);
}
.brand-name::after { content: ""; }
.brand-sub { font-family: var(--mono); letter-spacing: 0.2em; color: var(--ink-3); }

/* ── Buttons: volt means go, white text always ── */
.btn { border-radius: 9px; }
.btn-primary {
  color: #fff; background: var(--grad);
  box-shadow: 0 0 0 1px rgba(125, 146, 255, 0.4), 0 10px 26px -10px rgba(61, 91, 255, 0.85);
}
.btn-primary:hover {
  color: #fff; background: var(--grad);
  box-shadow: 0 0 0 1px rgba(125, 146, 255, 0.6), 0 16px 36px -12px rgba(61, 91, 255, 1);
}

/* history + mode switch */
.hist-group, .mode-switch { border-radius: 10px; }
.ms-btn { border-radius: 8px; }
.ms-btn.active { background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--line-volt); }
.ms-btn.active svg { color: var(--volt-2); }

/* ── Workspace: machined panels with air between them ── */
@media (min-width: 861px) {
  .work { gap: 0 12px; padding: 12px clamp(10px, 1.6vw, 16px); }
  .rail {
    border: 1px solid var(--stroke); border-right: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: rgba(16, 19, 26, 0.6);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.8);
  }
  .props {
    border: 1px solid var(--stroke); border-left: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: rgba(16, 19, 26, 0.6);
    box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.8);
  }
}

/* rail tools */
.tool { border-radius: 10px; }
.tool.active {
  color: var(--ink);
  background: var(--accent-dim);
  border-color: var(--line-volt);
  box-shadow: 0 0 24px -10px rgba(61, 91, 255, 0.7);
}
.tool.active svg { stroke: var(--volt-2); }
.tool-export { color: var(--volt-2); }
.rail-adv { border-radius: 9px; }
.app.show-adv .rail-adv { color: var(--accent-2); }

/* ── Stage: the monitor ── */
.canvas-frame {
  border-radius: 14px;
  box-shadow:
    0 40px 90px -34px rgba(0, 0, 0, 0.95),
    0 0 0 1px var(--stroke-2),
    0 0 60px -20px rgba(61, 91, 255, 0.3);
}
.aspect-quick .seg-btn { border-radius: 8px; font-family: var(--mono); font-size: 11px; }
.seg-btn.active { border-color: var(--line-volt); background: var(--accent-dim); color: var(--ink); }
.seg-btn.active .ico { border-color: var(--volt-2); }

/* transport */
.mini-tl {
  border-radius: var(--radius);
  background: rgba(16, 19, 26, 0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-color: var(--stroke);
  box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.9);
}
.mini-play {
  border-radius: 9px; color: #fff;
  box-shadow: 0 0 0 1px rgba(125, 146, 255, 0.35), 0 8px 20px -8px rgba(61, 91, 255, 0.8);
}
.mini-head { background: #fff; box-shadow: 0 0 8px rgba(125, 146, 255, 0.9), 0 1px 4px rgba(0, 0, 0, 0.6); }

/* loading veil */
.frame-veil { background: rgba(11, 13, 17, 0.82); }
.frame-veil .veil-title { font-weight: 800; font-stretch: 92%; text-transform: uppercase; letter-spacing: 0.01em; }
.spinner { border-top-color: var(--accent); }

/* watermark */
.wm .wm-mark {
  border-radius: 2.2cqw; background: var(--grad); color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.wm .wm-url { color: #fff; }

/* ── Properties panel ── */
.prop-h {
  font-family: var(--mono); font-weight: 600; letter-spacing: 0.18em;
  color: var(--volt-2);
  display: flex; align-items: center; gap: 10px;
}
.prop-h::before { content: "//"; color: var(--ink-3); }
.prop-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--stroke-2), transparent); }
.card { border-radius: var(--radius); }
.sw input:checked + .track { background: var(--grad); }
.sw input:checked + .track + .knob { background: #fff; }
.swatch-btn { border-radius: 7px; }
.swatch-btn.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent-2); }
.pro-chip { color: var(--volt-2); background: var(--accent-dim); border-color: var(--line-volt); border-radius: 6px; font-family: var(--mono); }
.field { border-radius: 8px; background: rgba(11, 13, 17, 0.6); }
.field:focus { border-color: var(--line-volt); box-shadow: 0 0 0 3px rgba(61, 91, 255, 0.14); }
.slider::-webkit-slider-thumb { background: var(--volt-2); box-shadow: 0 2px 8px -2px rgba(61, 91, 255, 0.9); }
.slider::-moz-range-thumb { background: var(--volt-2); }
.kbd { border-radius: 5px; }

/* music picker */
.music-row { border-radius: 9px; }
.music-row.sel { border-color: var(--line-volt); background: var(--accent-dim); }
.music-play.playing { color: #fff; }
.music-check { color: var(--good); }

/* ── Empty state ── */
.se-card {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(61, 91, 255, 0.05), rgba(237, 240, 245, 0.015) 55%);
  border-color: var(--stroke-2);
  box-shadow: 0 40px 90px -42px rgba(0, 0, 0, 0.9), 0 0 60px -30px rgba(61, 91, 255, 0.35);
  position: relative; overflow: hidden;
}
.se-card::before {
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-2) 70%, transparent);
}
.se-icon {
  border-radius: 12px; color: #fff;
  box-shadow: 0 0 0 1px rgba(125, 146, 255, 0.4), 0 14px 34px -12px rgba(61, 91, 255, 0.8);
}
.se-title { font-weight: 800; font-stretch: 90%; text-transform: uppercase; letter-spacing: 0; }
.se-urlrow input { border-radius: 9px; background: rgba(11, 13, 17, 0.6); font-size: 13.5px; }
.se-urlrow input:focus { border-color: var(--line-volt); }
.se-path { border-radius: var(--radius); }
.se-path.is-ai { border-color: var(--line-volt); }
.se-path-badge { background: var(--grad); color: #fff; }
.se-path-meta { font-family: var(--mono); }
.se-clip { border-radius: 10px; }
.se-clip:hover { border-color: var(--line-volt); }
.se-clip-dur { font-family: var(--mono); }

/* ── Wizard mode pre-screen ── */
.wiz-choice { background: rgba(11, 13, 17, 0.86); }
.wiz-choice-kicker {
  font-family: var(--mono); font-weight: 600; letter-spacing: 0.3em;
  background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--volt-2);
}
.wiz-choice-title { font-weight: 800; font-stretch: 88%; text-transform: uppercase; letter-spacing: -0.01em; }
.wiz-card { border-radius: 14px; }
.wiz-card:hover, .wiz-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 18px 50px -18px rgba(61, 91, 255, 0.45);
}
.wiz-card.is-easy {
  border-color: var(--line-volt);
  background: linear-gradient(160deg, var(--accent-dim), transparent 55%), var(--panel);
}
.wiz-card-badge { background: var(--grad); color: #fff; box-shadow: 0 6px 18px -6px rgba(61, 91, 255, 0.8); font-family: var(--mono); letter-spacing: 0.1em; }
.wiz-card-ic { border-radius: 10px; }
.wiz-card > b { font-weight: 800; font-stretch: 92%; text-transform: uppercase; font-size: 15.5px; letter-spacing: 0.01em; }
.wiz-card-cta { color: var(--volt-2); }
.wiz-card.is-studio .wiz-card-cta { color: var(--accent-2); }
.wiz-remember input { accent-color: var(--accent); }

/* wizard step chrome */
.wiz-moment { font-family: var(--mono); }
.wiz-dot.done { background: var(--accent); }
.wiz-dot.cur { background: var(--grad); box-shadow: 0 0 10px rgba(61, 91, 255, 0.8); }
.wiz-head-lbl { font-family: var(--mono); letter-spacing: 0.14em; }

/* ── Wizard payoff screen ── */
.wd-card {
  border-radius: 16px;
  background: linear-gradient(160deg, var(--accent-dim), transparent 45%), var(--panel);
  border-color: var(--stroke-2);
}
.wd-media { border-radius: 12px; box-shadow: 0 0 0 6px #10131a, 0 0 0 7px var(--line-volt), 0 24px 60px -22px rgba(0, 0, 0, 0.95); }
.wd-badge { font-family: var(--mono); letter-spacing: 0.14em; }
.wd-title { font-weight: 800; font-stretch: 88%; text-transform: uppercase; letter-spacing: 0; }
.wd-hint a { color: var(--volt-2); }

/* ── Moment picker + AI deck ── */
.ai-deck { border-radius: var(--radius); }
.ms-range-in, .ms-range-out, .ms-range-len, .ms-len { font-family: var(--mono); }

/* ── Timeline: coral playhead over volt selection ── */
.studio-tl .stl-btn.stl-play { color: #fff; }
.studio-tl .stl-playhead {
  background: linear-gradient(var(--accent-2), rgba(255, 77, 107, 0.5));
  box-shadow: 0 0 10px rgba(255, 77, 107, 0.8);
}
.studio-tl .stl-playhead::before { background: var(--accent-2); box-shadow: 0 0 10px rgba(255, 77, 107, 0.9); }
.stl-addcue { border-radius: 8px; }
.fxtl { border-radius: var(--radius); }

/* ── Mobile: floating dock ── */
@media (max-width: 860px) {
  .topbar { margin: 8px 8px 0; border-radius: 10px; }
  .dock {
    margin: 0 8px calc(6px + env(safe-area-inset-bottom));
    padding: 6px 6px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: rgba(16, 19, 26, 0.85);
    box-shadow: 0 -14px 40px -24px rgba(0, 0, 0, 0.9);
  }
}
.dtool { border-radius: 10px; }
.dtool.active { color: var(--volt-2); background: var(--accent-dim); }
.sheet {
  background: #10131a;
  border-top: 1px solid var(--line-volt);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
}
.sheet-grip { background: var(--stroke-2); }

/* ── Focus bar ── */
.focus-bar {
  border-radius: var(--radius);
  background: rgba(16, 19, 26, 0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--stroke-2);
}
.fb-play { color: #fff; background: var(--grad); border-radius: 9px; }
.fb-time { font-family: var(--mono); }

/* ── Scrollbars ── */
* { scrollbar-width: thin; scrollbar-color: rgba(61, 91, 255, 0.3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(61, 91, 255, 0.25); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(61, 91, 255, 0.4); }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .app::before { background-image: none; }
}