/* Fluorescent theme — token NAMES kept stable (gold/scope/tally/ok) across
   every file that references them; only the VALUES moved to a neon
   magenta / cyan / orange / lime palette on a violet-black canvas. If you
   touch these, grep for the old hex (E8B84B, 4DD8E8, FF3B3B, 4ADE80,
   0B0D10) first — a few JS files carry matching hardcoded copies for
   canvas-drawn UI (timeline, watermark box, redact tool) that don't read
   CSS variables. */
:root{
  --bg:#0A0614; --panel:#150F22; --panel-2:#1E1730; --edge:#3D2E5C;
  --ink:#F5F0FF; --dim:#9C8FC4;
  --gold:#FF2E9A; --gold-dim:#C21F79;   /* neon magenta/pink — primary accent */
  --tally:#FF5F1F;                       /* neon orange — alerts, redact, destructive */
  --scope:#2EF6FF;                       /* neon cyan — data, waveform, secondary */
  --ok:#A6FF3D;                          /* neon lime — success, connected */
}

*{ scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--edge); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; box-shadow:0 0 0 4px rgba(255,46,154,.25); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

body{ background-image: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(255,46,154,.08), transparent), radial-gradient(ellipse 700px 400px at 100% 100%, rgba(46,246,255,.05), transparent); background-attachment: fixed; }

/* ---------- Stage tabs ---------- */
.stage-tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:8px 2px; color:var(--dim); border-bottom:2px solid transparent;
  font-weight:600; letter-spacing:.04em; transition:color .15s, border-color .15s, text-shadow .15s;
}
.stage-tab:hover{ color:var(--ink); }
.stage-tab.is-active{ color:var(--gold); border-color:var(--gold); text-shadow:0 0 10px rgba(255,46,154,.6); }
.stage-num{ font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--dim); }
.stage-tab.is-active .stage-num{ color:var(--gold); }

/* ---------- Panels ---------- */
.panel-title{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:20px; letter-spacing:.02em; }
.panel-sub{ color:var(--dim); font-size:12.5px; line-height:1.5; margin-top:4px; }

/* ---------- Fields ---------- */
.field-label{ display:flex; flex-direction:column; gap:4px; font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.field-label-sm{ display:block; font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.field-mono{
  background:var(--panel-2); border:1px solid var(--edge); border-radius:6px;
  padding:6px 8px; color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:12px;
  text-transform:none; letter-spacing:normal; outline:none; transition:border-color .15s, box-shadow .15s;
}
.field-mono:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,46,154,.18); }

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--gold); color:var(--bg); font-weight:600; font-size:13px;
  padding:9px 14px; border-radius:8px; transition:background .15s, transform .1s, box-shadow .2s;
  box-shadow:0 0 14px rgba(255,46,154,.35), 0 0 2px rgba(255,46,154,.6);
}
.btn-primary:hover{ background:#FF5CB8; box-shadow:0 0 22px rgba(255,46,154,.55), 0 0 4px rgba(255,46,154,.8); }
.btn-primary:active{ transform:scale(.98); }
.btn-primary:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }

.btn-secondary{
  background:var(--panel-2); color:var(--ink); font-weight:500; font-size:13px;
  padding:9px 14px; border-radius:8px; border:1px solid var(--edge);
  transition:border-color .15s, color .15s, box-shadow .15s;
}
.btn-secondary:hover{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 12px rgba(255,46,154,.2); }

/* ---------- Ratio buttons ---------- */
.ratio-btn{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--panel-2); border:1px solid var(--edge); border-radius:10px;
  padding:10px 6px; font-size:11px; color:var(--dim); transition:border-color .15s, color .15s, box-shadow .15s;
}
.ratio-btn:hover{ border-color:var(--gold-dim); color:var(--ink); }
.ratio-btn.is-active{ border-color:var(--gold); color:var(--gold); background:rgba(255,46,154,.1); box-shadow:0 0 14px rgba(255,46,154,.25) inset; }
.ratio-swatch{ width:60%; max-height:34px; border:1.5px solid currentColor; border-radius:3px; opacity:.85; }

/* ---------- Caption style / position buttons ---------- */
.cap-style-btn, .pos-btn, .corner-btn, .scene-mode-btn{
  background:var(--panel-2); border:1px solid var(--edge); border-radius:8px;
  padding:8px 6px; font-size:12px; color:var(--dim); transition:border-color .15s, color .15s, box-shadow .15s;
}
.cap-style-btn:hover, .pos-btn:hover, .corner-btn:hover, .scene-mode-btn:hover{ color:var(--ink); border-color:var(--gold-dim); }
.cap-style-btn.is-active, .pos-btn.is-active, .corner-btn.is-active, .scene-mode-btn.is-active{
  border-color:var(--gold); color:var(--gold); background:rgba(255,46,154,.1); box-shadow:0 0 14px rgba(255,46,154,.25) inset;
}
.corner-btn{ font-size:16px; padding:8px; }

/* ---------- Range sliders ---------- */
.range-thin{ -webkit-appearance:none; appearance:none; height:4px; background:var(--edge); border-radius:2px; outline:none; touch-action:none; }
.range-thin::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--gold); border:2px solid var(--bg); cursor:pointer; margin-top:0;
  box-shadow:0 0 0 1px var(--gold), 0 0 10px rgba(255,46,154,.7);
}
.range-thin::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--gold); border:2px solid var(--bg); cursor:pointer;
  box-shadow:0 0 10px rgba(255,46,154,.7);
}
.range-thin::-moz-range-track{ height:4px; background:var(--edge); border-radius:2px; }

/* ---------- Timeline / filmstrip signature ---------- */
#timeline{ overflow:hidden; }
.sprocket-row{
  height:8px;
  background-image: radial-gradient(circle, var(--bg) 2.2px, transparent 2.6px);
  background-size: 14px 8px;
  background-position: 6px 4px;
  background-color: var(--edge);
}
#track-thumbs{ background-size:cover; background-repeat:no-repeat; }
.thumb-frame{ height:100%; flex-shrink:0; background-size:cover; background-position:center; border-right:1px solid var(--bg); }

.trim-shade{ position:absolute; top:0; bottom:0; background:rgba(0,0,0,.6); }
.trim-shade-l{ left:0; right:calc(100% - var(--l,0%)); }
.trim-shade-r{ right:0; left:var(--r,100%); }
.trim-handle{
  position:absolute; top:-2px; bottom:-2px; width:10px; margin-left:-5px;
  background:var(--gold); border-radius:3px; cursor:ew-resize; z-index:5; touch-action:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 10px rgba(255,46,154,.6);
}
.trim-handle::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:2px; height:40%; background:var(--bg); border-radius:1px;
}

#playhead{ z-index:6; box-shadow:0 0 6px var(--scope); }
.playhead-flag{
  position:absolute; top:-1px; left:-5px; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--tally);
  filter: drop-shadow(0 0 4px rgba(255,95,31,.8));
}

/* ---------- Crop guide overlay (Frame tab) ---------- */
.crop-guide-mask{
  position:absolute; inset:0;
  box-shadow: 0 0 0 2000px rgba(0,0,0,.55), 0 0 20px rgba(255,46,154,.5);
  border:1.5px dashed var(--gold);
}

/* ---------- Redact draw rectangle ---------- */
.redact-draw-rect{
  position:absolute; border:1.5px dashed var(--tally); background:rgba(255,95,31,.12);
}

/* ---------- Caption live preview ---------- */
.cap-live{
  font-family:'IBM Plex Sans',sans-serif; font-weight:700; text-align:center;
  padding:.25em .6em; border-radius:6px; line-height:1.3; max-width:100%;
}
.cap-style-bold-pop .cap-live{ background:rgba(0,0,0,.75); color:#fff; font-size:clamp(14px,3.6vw,28px); text-transform:uppercase; letter-spacing:.01em; }
.cap-style-clean-minimal .cap-live{ background:transparent; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.9); font-size:clamp(13px,3vw,22px); font-weight:500; }
.cap-style-karaoke .cap-live{ background:rgba(0,0,0,.75); color:var(--ink); font-size:clamp(14px,3.6vw,26px); }
.cap-style-karaoke .cap-live .word-done{ color:var(--gold); text-shadow:0 0 8px rgba(255,46,154,.8); }
.cap-style-neon-glow .cap-live{ background:transparent; color:var(--scope); font-size:clamp(14px,3.6vw,26px); text-shadow:0 0 6px var(--scope), 0 0 16px var(--scope); }

/* ---------- List items (JS-generated) ---------- */
.list-item{
  display:flex; align-items:center; gap:8px; background:var(--panel-2);
  border:1px solid var(--edge); border-radius:8px; padding:7px 9px; font-size:12px;
}
.list-item button{ color:var(--dim); }
.list-item button:hover{ color:var(--tally); }

/* ---------- Platform cards ---------- */
.platform-card{ background:var(--panel-2); border:1px solid var(--edge); border-radius:10px; padding:12px; }
.status-pill{ font-size:10px; padding:2px 7px; border-radius:999px; font-weight:600; letter-spacing:.03em; }
.status-pill.connected{ background:rgba(166,255,61,.15); color:var(--ok); text-shadow:0 0 8px rgba(166,255,61,.5); }
.status-pill.disconnected{ background:rgba(156,143,196,.15); color:var(--dim); }

/* ---------- Toasts ---------- */
.toast{
  pointer-events:auto; background:var(--panel); border:1px solid var(--edge); border-left:3px solid var(--gold);
  color:var(--ink); font-size:12.5px; padding:10px 14px; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 16px rgba(255,46,154,.15);
  max-width:320px; animation:toast-in .18s ease-out;
}
.toast.error{ border-left-color:var(--tally); box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 16px rgba(255,95,31,.2); }
.toast.success{ border-left-color:var(--ok); box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 16px rgba(166,255,61,.2); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- Misc ---------- */
input[type="color"]{ padding:0; }
#overlay-canvas{ touch-action:none; }