/* ============ BeatMind — lyric video UI ============
   The canvas is the video. Everything here is chrome that
   must stay OUT of the recorded frame (see body.recording). */

*,*::before,*::after{box-sizing:border-box}

:root{
  --ui-bg:      rgba(8,6,20,.82);
  --ui-line:    rgba(255,255,255,.14);
  --ui-fg:      #eae6ff;
  --ui-dim:     #8d86b5;
  --accent:     #00e5ff;
  --accent-2:   #ff2d95;
  --accent-3:   #b14bff;
  --danger:     #ff3b5c;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", ui-monospace, Consolas, monospace;
}

html,body{height:100%}
body{
  margin:0; background:#05030f; color:var(--ui-fg);
  font-family:var(--font); overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- stage / canvas ---------- */
#stage{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:#05030f;
}
#scene{
  /* 16:9 letterboxed to fit whatever the window is */
  max-width:100%; max-height:100%;
  aspect-ratio:16/9; width:100%;
  display:block;
  background:#05030f;
}

/* ================= LOADER ================= */
#loader{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  background:#05030f;
  transition:opacity .5s ease;
}
body:not(.is-loading) #loader{opacity:0; pointer-events:none}
.loader-inner{text-align:center}
.loader-title{
  font-size:clamp(28px,5vw,54px); font-weight:900; letter-spacing:.22em;
  background:linear-gradient(90deg,var(--accent),var(--accent-3),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.75}50%{opacity:1}}
.loader-bar{
  width:min(340px,60vw); height:3px; margin:22px auto 10px;
  background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden;
}
#loader-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .25s ease;
}
.loader-status{font:11px/1 var(--mono); color:var(--ui-dim); letter-spacing:.1em}

/* ================= START GATE ================= */
#gate{
  position:fixed; inset:0; z-index:55;
  display:grid; place-items:center;
  background:radial-gradient(ellipse at center,rgba(30,10,60,.6),#05030f 70%);
  backdrop-filter:blur(4px);
}
#gate[hidden]{display:none}
.gate-inner{text-align:center}
.gate-title{
  font-size:clamp(38px,8vw,90px); font-weight:900; letter-spacing:.18em;
  background:linear-gradient(90deg,var(--accent),var(--accent-3),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 30px rgba(177,75,255,.5));
}
.gate-sub{
  font:12px/1 var(--mono); letter-spacing:.35em; color:var(--ui-dim);
  text-transform:uppercase; margin-top:6px;
}
.big-btn{
  margin-top:34px; padding:16px 46px;
  font:700 16px/1 var(--font); letter-spacing:.16em;
  color:#05030f; cursor:pointer; border:0; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 40px rgba(0,229,255,.35);
  transition:transform .16s ease, box-shadow .16s ease;
}
.big-btn:hover{transform:scale(1.06); box-shadow:0 0 60px rgba(255,45,149,.5)}
.gate-hint{margin-top:26px; font:11px/1.8 var(--mono); color:var(--ui-dim)}

kbd{
  font:10px/1 var(--mono); padding:3px 6px; border-radius:4px;
  background:rgba(255,255,255,.08); border:1px solid var(--ui-line);
  color:var(--ui-fg);
}

/* ================= UI OVERLAY ================= */
#ui{position:fixed; inset:0; z-index:40; pointer-events:none}
#ui > *{pointer-events:auto}

/* Hidden while recording and in clean mode — the canvas is the product. */
#ui{transition:opacity .3s ease}
body.recording #ui,
body.clean #ui,
body.is-loading #ui{opacity:0; pointer-events:none}
body.hide-cursor{cursor:none}

.ui-top{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; gap:16px;
  background:linear-gradient(180deg,rgba(5,3,15,.85),transparent);
}
.brand{
  font-weight:900; letter-spacing:.2em; font-size:13px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.modes{display:flex; gap:8px}

.mode-btn,.rec-btn,.t-btn,.s-btn{
  font:600 11px/1 var(--font); letter-spacing:.12em;
  padding:9px 16px; border-radius:99px; cursor:pointer;
  background:rgba(255,255,255,.06); color:var(--ui-dim);
  border:1px solid var(--ui-line);
  transition:all .16s ease;
}
.mode-btn:hover,.t-btn:hover,.s-btn:hover{color:var(--ui-fg); background:rgba(255,255,255,.12)}
.mode-btn.active{
  color:#05030f; border-color:transparent;
  background:linear-gradient(90deg,var(--accent),var(--accent-3));
}
.rec-btn{color:var(--danger); border-color:rgba(255,59,92,.45)}
.rec-btn:hover{background:var(--danger); color:#fff; box-shadow:0 0 24px rgba(255,59,92,.5)}

/* ---------- transport ---------- */
.ui-bottom{
  position:absolute; left:0; right:0; bottom:0;
  padding:20px;
  background:linear-gradient(0deg,rgba(5,3,15,.9),transparent);
}
.transport{display:flex; align-items:center; gap:14px}
.t-btn{width:40px; height:40px; padding:0; border-radius:50%; font-size:12px}
.time{font:11px/1 var(--mono); color:var(--ui-dim); min-width:38px; text-align:center}

#timeline{
  position:relative; flex:1; height:44px; cursor:pointer;
  border-radius:8px; overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid var(--ui-line);
}
#waveform{position:absolute; inset:0; width:100%; height:100%}
#tl-progress{
  position:absolute; top:0; bottom:0; left:0; width:0%;
  background:linear-gradient(90deg,rgba(0,229,255,.28),rgba(255,45,149,.28));
  pointer-events:none;
}
#tl-head{
  position:absolute; top:0; bottom:0; left:0; width:2px;
  background:#fff; box-shadow:0 0 12px var(--accent);
  pointer-events:none;
}

/* ================= SYNC PANEL ================= */
#sync-panel{
  position:absolute; top:56px; bottom:96px; right:20px;
  width:min(430px,42vw);
  display:none; flex-direction:column;
  background:var(--ui-bg); backdrop-filter:blur(14px);
  border:1px solid var(--ui-line); border-radius:14px;
  overflow:hidden;
}
body.mode-sync #sync-panel{display:flex}

.sync-head{
  padding:14px 16px; border-bottom:1px solid var(--ui-line);
  display:flex; flex-direction:column; gap:12px;
}
.sync-head strong{font-size:12px; letter-spacing:.16em; color:var(--accent)}
.sync-help{display:block; margin-top:8px; font:10px/1.9 var(--mono); color:var(--ui-dim)}
.sync-actions{display:flex; gap:8px; flex-wrap:wrap}
.s-btn{padding:8px 12px; font-size:10px}
.s-btn.primary{
  color:#05030f; border-color:transparent;
  background:linear-gradient(90deg,var(--accent),var(--accent-3));
}
.s-btn.danger{color:var(--danger); border-color:rgba(255,59,92,.4)}
.s-btn.danger:hover{background:var(--danger); color:#fff}

#sync-list{flex:1; overflow-y:auto; padding:8px}
#sync-list::-webkit-scrollbar{width:8px}
#sync-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:99px}

.sec-label{
  padding:14px 10px 6px; font:10px/1 var(--mono);
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent-3);
}
.ln{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  font-size:12.5px; line-height:1.35; color:var(--ui-dim);
  border:1px solid transparent;
  transition:background .12s ease;
}
.ln:hover{background:rgba(255,255,255,.05)}
.ln .t{
  font:10px/1 var(--mono); min-width:46px;
  color:var(--accent); opacity:.85;
}
.ln .txt{flex:1}
.ln.set{color:var(--ui-fg)}
.ln.cursor{
  background:rgba(0,229,255,.13);
  border-color:rgba(0,229,255,.45);
  color:#fff;
}
.ln.playing{background:rgba(255,45,149,.15)}
.ln.skip{opacity:.32; text-decoration:line-through}
.ln.skip .t{color:var(--danger)}

/* ================= REC OVERLAY ================= */
#rec-overlay{
  position:fixed; z-index:70; top:18px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  padding:10px 18px; border-radius:99px;
  background:rgba(8,6,20,.92); border:1px solid rgba(255,59,92,.5);
  backdrop-filter:blur(10px);
}
#rec-overlay[hidden]{display:none}
.rec-dot{
  width:10px; height:10px; border-radius:50%; background:var(--danger);
  animation:blink 1s steps(2,end) infinite;
}
@keyframes blink{50%{opacity:.15}}
.rec-text{font:700 11px/1 var(--font); letter-spacing:.18em; color:var(--danger)}
.rec-time{font:11px/1 var(--mono); color:var(--ui-dim)}

/* ================= TOAST ================= */
#toast{
  position:fixed; z-index:80; bottom:96px; left:50%;
  transform:translate(-50%,16px);
  padding:11px 20px; border-radius:99px;
  background:rgba(8,6,20,.95); border:1px solid var(--ui-line);
  font:12px/1 var(--font); color:var(--ui-fg);
  opacity:0; pointer-events:none; transition:all .25s ease;
  max-width:80vw; text-align:center;
}
#toast.show{opacity:1; transform:translate(-50%,0)}

/* ================= FORMAT TOGGLE ================= */
.fmt{
  display:flex; gap:2px; padding:2px;
  border-radius:99px; border:1px solid var(--ui-line);
  background:rgba(255,255,255,.04);
}
.fmt-btn{
  font:700 10px/1 var(--font); letter-spacing:.1em;
  padding:7px 12px; border:0; border-radius:99px; cursor:pointer;
  background:transparent; color:var(--ui-dim);
  transition:all .16s ease;
}
.fmt-btn:hover{color:var(--ui-fg)}
.fmt-btn.active{
  color:#05030f;
  background:linear-gradient(90deg,var(--accent),var(--accent-3));
}

/* ================= CONVERT OVERLAY ================= */
#convert-overlay{
  position:fixed; inset:0; z-index:75;
  display:grid; place-items:center;
  background:rgba(5,3,15,.93); backdrop-filter:blur(10px);
}
#convert-overlay[hidden]{display:none}
.convert-inner{text-align:center; width:min(460px,80vw)}
.convert-title{
  font-size:clamp(20px,3.4vw,32px); font-weight:900; letter-spacing:.2em;
  background:linear-gradient(90deg,var(--accent),var(--accent-3),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.convert-bar{
  height:4px; margin:24px 0 12px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.1);
}
#convert-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .3s ease;
}
.convert-status{font:11px/1.6 var(--mono); color:var(--ui-fg); letter-spacing:.06em}
.convert-note{margin-top:14px; font:10px/1.6 var(--mono); color:var(--ui-dim)}