/* ============================================================
   Itahuka Mixer — Hardware Skin (v3)
   Changes requested:
   - Replace Hi/Mid/Lo with ONE PAN L/R control on every strip
   - Remove “Intellipan” label area (kept clean)
   - LED meters as segmented blocks (like reference image)
   - Player: selectable playlist view
   - Guest Join page + LiveKit Guest slots 1–5
   ============================================================ */

/* ---------------------------
   TUNER — QUICK CUSTOMIZATION
--------------------------- */
:root{
  /* Base stage (matches app.js) */
  --stage-w: 1920;
  --stage-h: 900;

  /* Density / spacing */
  --outer-pad: 10px;
  --grid-gap: 12px;
  --bank-pad: 10px;
  --bank-header-h: 42px;

  /* Strip geometry */
  --strip-h: 712px;
  --strip-pad: 10px;
  --strip-gap: 8px;

  /* Buttons / controls */
  --btn-radius: 12px;
  --btn-radius-sm: 10px;
  --btn-pad-y: 9px;
  --btn-pad-x: 12px;
  --btn-pad-sm-y: 6px;
  --btn-pad-sm-x: 10px;
  --btn-pad-tiny-y: 5px;
  --btn-pad-tiny-x: 8px;
  --btn-font: 12px;
  --btn-font-sm: 12px;
  --btn-font-tiny: 11px;

  /* LED Meter tuning (segmented) */
  --meter-w: 22px;
  --meter-frame-pad: 5px;
  --meter-cols-gap: 3px;
  --meter-segments: 40; /* JS uses same count; change in app.js if you change this */
  --meter-seg-gap: 2px;

  /* Meter colors (like reference: cyan/ice) */
  --meter-on0: rgba(145, 240, 255, .92);
  --meter-on1: rgba(145, 240, 255, .72);
  --meter-peak: rgba(255,255,255,.90);
  --meter-off: rgba(12, 18, 26, .95);
  --meter-off2: rgba(28, 42, 56, .45);

  /* Fader tuning */
  --fader-cap-w: 44px;
  --fader-cap-h: 72px;
  --fader-track-w: 22px;

  /* Texture */
  --noiseOpacity: .16;

  /* Palette */
  --bg0: #0b111a;
  --bg1: #0f1722;
  --panel0: #1e2936;
  --panel1: #243243;
  --recess: #141d2a;
  --recess2:#0f1520;

  --line0: rgba(255,255,255,.08);
  --line1: rgba(255,255,255,.12);
  --line2: rgba(0,0,0,.55);

  --text0: rgba(240,250,255,.92);
  --text1: rgba(240,250,255,.72);
  --text2: rgba(240,250,255,.50);

  --ok: #52e08b;
  --warn: #f6b548;
  --bad: #ff5e6a;
  --cyan: #6bd8ff;

  /* Edges / depth */
  --radius: 14px;
  --radius2: 18px;
  --shadow: 0 14px 28px rgba(0,0,0,.50);
  --shadow2: 0 8px 16px rgba(0,0,0,.45);
  --innerTop: inset 0 1px 0 rgba(255,255,255,.10);
  --innerBottom: inset 0 -10px 18px rgba(0,0,0,.45);
  --innerBevel: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 2px rgba(0,0,0,.35);
  --glow: 0 0 18px rgba(106,220,255,.16);

  /* Fonts */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  background:
    radial-gradient(1200px 650px at 40% 0%, rgba(120,170,220,.18), rgba(0,0,0,0) 60%),
    radial-gradient(1000px 600px at 85% 10%, rgba(80,140,210,.10), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  color: var(--text0);
  font-family: var(--font);
  overflow:hidden;
}

.mono{ font-family: var(--mono); }

.fx-svg{
  position:fixed;
  width:0;
  height:0;
  left:-9999px;
  top:-9999px;
}

#app{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}

#stageWrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

#stage{
  width: calc(var(--stage-w) * 1px);
  height: calc(var(--stage-h) * 1px);
  position:relative;
  transform-origin: top left;
  border-radius: calc(var(--radius2) + 8px);
  background:
    radial-gradient(1400px 700px at 40% 0%, rgba(170,210,255,.11), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(38,55,73,.55), rgba(10,15,24,.45));
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  overflow:hidden;
}

/* Global noise layer (SVG turbulence + subtle scanlines) */
#stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: var(--noiseOpacity);
  filter: url(#noiseFilter);
  mix-blend-mode: overlay;
}
#stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.02) 0px,
      rgba(255,255,255,.02) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    );
  opacity: .18;
  mix-blend-mode: soft-light;
}

/* ---------------- Panels / Bevel system ---------------- */
.panel{
  position:relative;
  border-radius: var(--radius2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
    linear-gradient(180deg, var(--panel1), var(--panel0));
  box-shadow: var(--shadow2);
  border: 1px solid rgba(255,255,255,.06);
}
.panel--top{
  border-radius: 18px;
}
.panel--inset{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.24)),
    linear-gradient(180deg, var(--recess), var(--recess2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -14px 22px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.06);
}

/* ---------------- Top bar ---------------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 9px 14px;
  margin: var(--outer-pad);
  gap: 14px;
  box-shadow: var(--shadow);
}
.brand{ display:flex; align-items:center; gap:10px; min-width:220px; }
.brandBadge{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.22));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--innerBevel);
  padding:6px 8px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #ffefe2;
}
.brandName{ display:flex; flex-direction:column; line-height:1; }
.brandTitle{ font-size: 18px; font-weight: 800; letter-spacing: .7px; }
.brandSub{ font-size: 16px; font-style: italic; opacity:.9; margin-top:2px; color: rgba(255,230,170,.86); }

.topbarCenter{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.topPills{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  min-width:22px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18));
  box-shadow: var(--innerBevel);
  color: var(--text1);
  font-weight:700;
  font-size:12px;
}
.pill--muted{ opacity:.8; }
.pill--warn{
  color: rgba(255,226,180,.95);
  border-color: rgba(246,181,72,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -8px 12px rgba(0,0,0,.45);
}
.topInfo{ font-size: 12px; color: var(--text2); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.topbarRight{ display:flex; align-items:center; gap:10px; min-width:360px; justify-content:flex-end; }
.ioBlock{ text-align:right; margin-right:6px; }
.ioTitle{ font-size:11px; letter-spacing:.9px; opacity:.85; }
.ioMeta{ font-size:11px; color: var(--text2); }

/* ---------------- Buttons / selects ---------------- */
.btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text0);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.25)),
    linear-gradient(180deg, rgba(50,70,92,.95), rgba(22,30,44,.95));
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  cursor:pointer;
  box-shadow: var(--innerBevel);
  font-weight: 700;
  letter-spacing:.2px;
  font-size: var(--btn-font);
  line-height: 1;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.btn:hover{ filter: brightness(1.06); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; filter: none; transform:none; }
.btn--primary{
  border-color: rgba(107,216,255,.22);
  box-shadow: var(--innerBevel), var(--glow);
}
.btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.btn--small{
  padding: var(--btn-pad-sm-y) var(--btn-pad-sm-x);
  border-radius: var(--btn-radius-sm);
  font-size: var(--btn-font-sm);
}
.btn--tiny{
  padding: var(--btn-pad-tiny-y) var(--btn-pad-tiny-x);
  border-radius: 9px;
  font-size: var(--btn-font-tiny);
  min-width: 54px;
}
.btn--tinyWide{ min-width: 92px; }
.btn--tinyGhost{
  opacity:.55;
  filter:saturate(.8);
}

.sel{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22)),
    linear-gradient(180deg, rgba(26,36,52,.92), rgba(14,20,30,.92));
  color: var(--text0);
  box-shadow: var(--innerBevel);
  padding:6px 8px;
}
.sel--tiny{
  padding:5px 7px;
  font-size: 12px;
  max-width: 118px;
}

/* ---------------- Layout ---------------- */
.mainGrid{
  position:absolute;
  left: var(--outer-pad);
  right: var(--outer-pad);
  top: 72px;
  bottom: 52px;
  display:grid;
  grid-template-columns: 580px 1fr 420px;
  gap: var(--grid-gap);
}

.bank{
  padding: var(--bank-pad);
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}
.bankHeader{
  height: var(--bank-header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  margin-bottom:10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -12px 20px rgba(0,0,0,.42);
}
.bankTitle{ font-weight: 800; letter-spacing:.8px; font-size: 12px; color: var(--text0); }
.bankHint{ font-size: 11px; color: var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 70%; }

.stripRow{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
  min-width:0;
  overflow:hidden;
}
.stripRow--center{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bank--right .masterGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  align-content:start;
}

.centerTop{
  display:grid;
  grid-template-columns: 260px 1fr 260px;
  gap:10px;
  margin-bottom:10px;
  min-height: 290px;
}

.eqZone, .playerZone, .guestsZone{ padding:10px; overflow:hidden; }
.eqTitle, .playerTitle, .fxTitle, .wideTitle{
  font-size: 12px;
  letter-spacing:.9px;
  font-weight: 900;
  margin-bottom:8px;
  color: var(--text1);
}
.eqHelp{
  font-size: 11px;
  color: var(--text2);
  margin-bottom:8px;
}
.eqKnobWall{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.eqKnobGroup{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  align-items:center;
}
.eqKnobLabel{ font-size:11px; color: var(--text2); text-align:center; margin-top:2px; }

.playerRow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.fileBtn input{ display:none; }

.playlist{
  margin-top:10px;
  padding:8px;
  border-radius: 14px;
  height: 170px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.plistHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 11px;
  color: var(--text2);
  letter-spacing:.8px;
  font-weight: 900;
}
.plistList{
  flex:1;
  overflow:auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  padding:6px;
}
.plItem{
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px 8px;
  border-radius: 10px;
  cursor:pointer;
  user-select:none;
}
.plItem:hover{ background: rgba(255,255,255,.04); }
.plItem.is-active{
  background: linear-gradient(180deg, rgba(107,216,255,.12), rgba(0,0,0,.20));
  border: 1px solid rgba(107,216,255,.16);
}
.plName{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size: 12px;
  color: var(--text1);
}
.plMeta{
  font-size: 11px;
  color: var(--text2);
  font-family: var(--mono);
}

.playerMeta{
  display:flex;
  justify-content:space-between;
  font-size: 11px;
  color: var(--text2);
  margin-top:8px;
  gap:10px;
}

.footer{
  position:absolute;
  left: var(--outer-pad);
  right: var(--outer-pad);
  bottom: var(--outer-pad);
  display:flex;
  justify-content:space-between;
  padding:8px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.20));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}
.footLeft,.footRight{ font-size: 11px; color: var(--text2); }

/* ---------------- Channel Strip ---------------- */
.strip{
  height: var(--strip-h);
  padding: var(--strip-pad);
  display:flex;
  flex-direction:column;
  gap: var(--strip-gap);
  min-width:0;
  border-radius: 16px;
  overflow:hidden;
}

/* Top area: name/sub/chip always fits */
.stripTop{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap:6px 8px;
  align-items:center;
}
.stripName{ font-weight:900; letter-spacing:.4px; font-size:12px; }
.stripSub{ font-size:11px; color: var(--text2); }
.stripChip{
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self:start;
  font-size: 11px;
  padding:4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22));
  box-shadow: var(--innerBevel);
  color: var(--text1);
  max-width: 104px;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stripChip--ok{ color: rgba(200,255,225,.92); border-color: rgba(82,224,139,.18); }
.stripChip--warn{ color: rgba(255,240,210,.92); border-color: rgba(246,181,72,.18); }
.stripChip--bad{ color: rgba(255,215,218,.92); border-color: rgba(255,94,106,.22); }

.stripModeRow{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  min-width:0;
}

/* PAN control (replaces Hi/Mid/Lo and keeps the row clean) */
.panCtl{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.16));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -12px 18px rgba(0,0,0,.42);
}
.panLabel{
  font-size: 11px;
  color: var(--text2);
  font-weight: 900;
  letter-spacing:.8px;
}
.panVal{
  font-size: 11px;
  color: var(--text2);
  min-width: 22px;
  text-align:right;
}

/* Pan knob */
.panKnob{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  position:relative;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.14), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 50% 120%, rgba(0,0,0,.55), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.26)),
    linear-gradient(180deg, rgba(38,55,73,.95), rgba(14,20,30,.95));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 16px rgba(0,0,0,.55), 0 6px 10px rgba(0,0,0,.35);
  cursor: ew-resize;
  outline:none;
  flex:0 0 auto;
}
.panKnob::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius: 999px;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.08) 0deg 4deg,
      rgba(0,0,0,0) 4deg 10deg
    );
  opacity: .16;
}
.panKnob::after{
  content:"";
  position:absolute;
  left:50%;
  top:10px;
  width: 2px;
  height: 14px;
  transform: translateX(-50%) rotate(var(--prot, 0deg));
  transform-origin: 50% 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(145,240,255,.65));
  border-radius: 99px;
  box-shadow: 0 0 10px rgba(145,240,255,.12);
}

/* Middle: meter + fader constrained */
.stripMid{
  flex:1;
  min-height: 0;
  display:grid;
  grid-template-columns: calc(var(--meter-w) + 10px) 1fr;
  gap:10px;
  align-items:end;
  padding-top:6px;
}

/* Routing: fixed height so it doesn't push bottom buttons out */
.stripRoute{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:6px;
}

.routeBtn{
  border-radius: 10px;
  padding: 7px 6px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22)),
    linear-gradient(180deg, rgba(24,34,49,.92), rgba(14,20,30,.92));
  box-shadow: var(--innerBevel);
  color: var(--text1);
  font-weight: 800;
  font-size: 12px;
  cursor:pointer;
  line-height: 1;
  min-width: 0;
  user-select:none;
}
.routeBtn--ghost{ opacity:.40; cursor:not-allowed; }
.routeBtn.is-on{
  border-color: rgba(107,216,255,.22);
  color: rgba(210,250,255,.95);
  box-shadow: var(--innerBevel), 0 0 16px rgba(107,216,255,.18);
}

.stripBottom{
  display:flex;
  justify-content:space-between;
  gap:8px;
}

/* ---------------- LED Meter (segmented blocks like reference) ---------------- */
.meter{
  height: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  min-height: 0;
}
.meter--tall{ height: 560px; }
.meter--guest{ height: 210px; }

.meterFrame{
  width: var(--meter-w);
  height: 100%;
  border-radius: 6px;
  padding: var(--meter-frame-pad);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.22)),
    linear-gradient(180deg, rgba(18,26,38,.95), rgba(10,14,22,.95));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -18px 24px rgba(0,0,0,.65);
}

.meterLed{
  position:relative;
  height:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--meter-cols-gap);
}

.meterCol{
  display:flex;
  flex-direction:column-reverse;
  gap: var(--meter-seg-gap);
}

.mSeg{
  flex: 1 1 0;
  border-radius: 1px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.30)),
    linear-gradient(180deg, var(--meter-off2), var(--meter-off));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  opacity: .92;
}
.mSeg.on{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.25)),
    linear-gradient(180deg, var(--meter-on0), var(--meter-on1));
  border-color: rgba(145,240,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 10px rgba(145,240,255,.10);
}

.meterPeakLine{
  position:absolute;
  left:0;
  right:0;
  height: 2px;
  background: var(--meter-peak);
  border-radius: 999px;
  opacity: .75;
  box-shadow: 0 0 10px rgba(255,255,255,.18);
  bottom: 0%;
  pointer-events:none;
}

/* ---------------- Faders ---------------- */
.fader{
  position:relative;
  height: 100%;
  min-height: 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
}
.faderTrack{
  position:absolute;
  left:50%;
  top:8px;
  bottom:52px;
  width: var(--fader-track-w);
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25)),
    linear-gradient(180deg, rgba(10,14,22,.75), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -16px 20px rgba(0,0,0,.6);
}
.faderCap{
  width: var(--fader-cap-w);
  height: var(--fader-cap-h);
  border-radius: 14px;
  position:absolute;
  left:50%;
  bottom: 60px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.32)),
    linear-gradient(180deg, rgba(72,190,140,.86), rgba(38,118,84,.86));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -14px 18px rgba(0,0,0,.45), 0 10px 16px rgba(0,0,0,.38);
  cursor: ns-resize;
  outline:none;
  user-select:none;
}
.faderCap::before{
  content:"";
  position:absolute;
  left:9px; right:9px;
  top:9px; height:10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.10));
  opacity:.9;
}
.faderCap::after{
  content:"";
  position:absolute;
  left:8px; right:8px;
  bottom:10px; height:10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(255,255,255,.06));
  opacity:.55;
}

.faderReadout{
  position:absolute;
  left:50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text1);
  background: rgba(0,0,0,.22);
  padding:4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Master variants */
.masterStrip{
  padding:10px;
  height: var(--strip-h);
  display:flex;
  flex-direction:column;
  gap: var(--strip-gap);
  border-radius: 16px;
  overflow:hidden;
}
.masterStrip .stripMid{ grid-template-columns: calc(var(--meter-w) + 10px) 1fr; }
.masterStripWide{
  grid-column: 1 / span 2;
  padding:10px;
  border-radius: 16px;
  overflow:hidden;
}
.wideRow{ margin-top:8px; }
.toggles{ display:flex; gap:8px; flex-wrap:wrap; }
.statusLine{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size: 11px;
  color: var(--text2);
}
.smallNote{
  font-size: 11px;
  color: var(--text2);
  line-height:1.35;
}

/* ---------------- Guests panel ---------------- */
.guestsTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.guestsBtns{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.lkStatus{
  font-size: 11px;
  color: var(--text2);
  margin-bottom:8px;
}
.guestSlots{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.guestSlot{
  display:grid;
  grid-template-columns: 22px 1fr 46px;
  gap:8px;
  align-items:center;
  padding:6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.slotNum{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 8px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  font-weight: 900;
  color: var(--text2);
  font-size: 12px;
}
.slotName{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size: 12px;
  color: var(--text1);
}
.slotState{
  text-align:right;
  font-size: 11px;
  color: var(--text2);
  font-family: var(--mono);
}

/* ---------------- Modal ---------------- */
.modal{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(4px);
}
.modalCard{
  width: 720px;
  max-width: calc(100% - 40px);
  padding: 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,.65);
}
.modalTitle{
  font-weight: 900;
  letter-spacing:.8px;
  margin-bottom: 10px;
}
.formRow{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.formLabel{
  font-size: 11px;
  color: var(--text2);
  letter-spacing:.7px;
  font-weight: 900;
}
.inp{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px 10px;
  background: rgba(0,0,0,.18);
  color: var(--text0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  outline:none;
}
.inp--ta{
  resize: vertical;
  min-height: 92px;
}
.modalBtns{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top: 8px;
}

/* Hidden audio sink for LiveKit */
.hiddenSink{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Focus outlines */
.btn:focus, .sel:focus, .routeBtn:focus, .panKnob:focus, .faderCap:focus, .inp:focus, textarea:focus{
  outline: 2px solid rgba(107,216,255,.35);
  outline-offset: 2px;
}

/* ---------------- Guest Join page (simple centered layout) ---------------- */
body.guestBody{ overflow:auto; }
.guestWrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px;
}
.guestCard{
  width: 980px;
  max-width: 100%;
  padding: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.60);
}
.guestTitleMain{
  font-size: 22px;
  font-weight: 950;
  letter-spacing:.6px;
}
.guestTitleSub{
  margin-top:4px;
  font-size: 12px;
  color: var(--text2);
}
.guestForm{ margin-top: 14px; }
.guestBtns{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 8px;
}
.guestStatus{
  font-size: 12px;
  color: var(--text2);
}
.guestMeters{
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
}
.guestMetersTitle{
  font-weight: 900;
  letter-spacing:.8px;
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 10px;
}
.guestMeterRow{
  display:grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items:start;
}
.guestMeterNote{
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}

/* Responsive safety */
@media (max-height: 820px){
  :root{
    --strip-h: 680px;
  }
  .meter--tall{ height: 510px; }
  .centerTop{ min-height: 270px; }
}

/* Hidden download link until recording exists */
#recDownload[hidden]{ display:none !important; }