:root {
  --accent: #cd7f32;   /* bronze, matches the WSG family */
  --rec: #e0443e;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* Night = dark page (screen does NOT light the face). Light = bright page (lights the face). */
body.night  { background: #0b0f14; color: #e7edf3; }
body.light  { background: #f4f6f9; color: #11151a; }

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1.2rem; border-bottom: 1px solid rgba(128,128,128,.25);
}
.brand { font-weight: 700; font-size: 1.05rem; }
.hdr-right { display: flex; align-items: center; gap: .8rem; }
.muted { opacity: .65; font-size: .85rem; }

main { max-width: 980px; margin: 0 auto; padding: 1.2rem; }
h2 { margin: .2rem 0 .3rem; }

button, select {
  font: inherit; border-radius: 9px; padding: .5rem .8rem; cursor: pointer;
  border: 1px solid rgba(128,128,128,.4); background: transparent; color: inherit;
}
/* Dropdowns: force readable option colors per theme (the OS renders <option> with
   its own defaults otherwise — dark text on dark = unreadable). */
body.night select { background: #11161d; color: #e7edf3; }
body.light select { background: #fff; color: #11151a; }
body.night select option { background: #11161d; color: #e7edf3; }
body.light select option { background: #fff; color: #11151a; }
select option:checked, select option:hover { background: var(--accent); color: #fff; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.rec { background: var(--rec); border-color: var(--rec); color: #fff; font-weight: 700; }
button.ghost { opacity: .9; }
button:disabled { opacity: .4; cursor: not-allowed; }
label { display: inline-flex; flex-direction: column; gap: .25rem; font-size: .78rem; opacity: .85; }

/* queue */
.queue { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.qcard {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; border: 1px solid rgba(128,128,128,.3); border-radius: 12px;
  background: rgba(128,128,128,.06);
}
.qcard .qt { font-weight: 600; }
.badge { font-size: .72rem; padding: .15rem .5rem; border-radius: 20px; background: rgba(205,127,50,.2); color: var(--accent); }
.badge.done { background: rgba(70,170,90,.2); color: #46aa5a; }

/* studio */
.studio-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.studio-top .title { font-weight: 700; font-size: 1.05rem; }
.controls, .recbar, .reviewbar { display: flex; gap: .7rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.recbar { align-items: center; }

/* Teleprompter is full-width; the camera + meter float in the top-right corner
   (classic teleprompter cam position, near the lens). */
.studio-body { display: block; }
.studio-side { position: fixed; top: 62px; right: 16px; width: 240px; z-index: 50;
  display: flex; flex-direction: column; gap: .45rem; }
.studio-top, .controls { padding-right: 258px; }   /* keep top controls clear of the floating cam */
@media (max-width: 880px) {
  .studio-side { position: static; width: 100%; margin-bottom: 1rem; }
  .studio-top, .controls { padding-right: 0; }
}

/* self-view preview — floating PiP */
#selfwrap { position: relative; width: 100%; border: 2px solid var(--accent); border-radius: 12px;
  overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
/* mirror + force its own GPU layer so meter repaints never touch the video */
#selfview { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1) translateZ(0); will-change: transform; backface-visibility: hidden; }
.prevtag { position: absolute; top: 6px; left: 8px; z-index: 2; color: #fff; background: rgba(0,0,0,.55);
  font-size: .68rem; font-weight: 600; padding: .1rem .45rem; border-radius: 6px; }
#rectag { position: absolute; top: 6px; right: 8px; color: #fff; background: var(--rec);
  font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; }
.nopreview { display: none; aspect-ratio: 16 / 9; width: 100%; border: 1px dashed rgba(128,128,128,.4);
  border-radius: 12px; align-items: center; justify-content: center; text-align: center; opacity: .6; font-size: .8rem; }
.prevoff { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; color: #fff; font-size: .85rem; font-weight: 600; gap: .15rem; }
#reviewVid { width: 100%; border-radius: 12px; background: #000; display: block; margin-bottom: .6rem; }

/* mic level meter */
.meterrow { display: flex; align-items: center; gap: .6rem; }
#meterWrap { flex: 1; height: 12px; border-radius: 8px; background: rgba(128,128,128,.25); overflow: hidden; }
/* animate via transform (GPU, no layout/paint) so the meter never reflows the panel
   or stutters the video preview. The bar is full-width and scaled from the left. */
#meter { height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0);
  background: var(--accent); will-change: transform; }

/* teleprompter */
.prompter-head { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 .4rem; }
.prompter {
  font-size: 2rem; line-height: 1.5; font-weight: 600; white-space: pre-wrap;
  max-height: 60vh; overflow-y: auto; padding: 1rem 1.2rem; border-radius: 12px;
  border: 1px solid rgba(128,128,128,.25);
}
body.light .prompter { background: #fff; }
body.night .prompter { background: #11161d; }

.hidden { display: none !important; }