/* Extracted from the original self-contained index.html */

:root{
      --uiScale:1;

      --bg:#070b14;
      --panel:#0c142b;
      --panel2:#0a1126;
      --text:#e8eefc;
      --muted:#a9b7e6;
      --accent:#b5bcc6;
      --accent2:#8f99a6;
      --accentRGB:181,188,198;
      --accentBRGB:143,153,166;
      --danger:#ff6b8b;
      --ok:#6ef39a;
      --shadow: 0 10px 25px rgba(0,0,0,.35);
      --radius:16px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      --themeDur:2s;
      --themeEase:ease;
    }

    /* Make key theme colors animatable so gradients (range "bars") can fade smoothly */
    @property --accentA { syntax: "<color>"; inherits: true; initial-value: rgba(181,188,198,.85); }
    @property --accentB { syntax: "<color>"; inherits: true; initial-value: rgba(143,153,166,.85); }
    @property --trackBg { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,.10); }

    /* Theme presets (FIXED: bind to :root so variables are truly global) */
    /* Give "midnight" and "solar" real accents (previously gray), so sliders/badges match the theme */
    :root[data-theme="midnight"]{--bg:#070b14;--panel:#0c142b;--text:#e8eefc;--muted:#a9b7e6;--accent:#7aa2ff;--accent2:#b86bff;}
    :root[data-theme="solar"]{--bg:#000f12;--panel:#002027;--text:#e9fff7;--muted:#b6f4e6;--accent:#2dd4bf;--accent2:#7df9ff;}
    :root[data-theme="mono"]{--bg:#0c0c0c;--panel:#151515;--text:#f1f1f1;--muted:#bdbdbd;--accent:#e0e0e0;--accent2:#9e9e9e;}
    :root[data-theme="candy"]{--bg:#1a0b22;--panel:#2a1033;--text:#fff2fb;--muted:#f0bfe3;--accent:#ff5bd6;--accent2:#7df9ff;}
    /* Warm themes */
    :root[data-theme="ember"]{--bg:#1a0c08;--panel:#2a120b;--text:#fff2e8;--muted:#f2c7ad;--accent:#ff8a3d;--accent2:#ffd166;}
    :root[data-theme="crimson"]{--bg:#17070b;--panel:#2a0c14;--text:#fff0f4;--muted:#f0b3c2;--accent:#ff3d63;--accent2:#ffb86b;}

    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);
         color:var(--text);font-family:var(--sans);}

    /* Slow, subtle fade between themes (variables animate where supported) */
    html, body, header, main, .card, .card .hd, .card .bd,
    button, input[type="text"], textarea, select,
    .pwSelectBtn, .pwSelectMenu, .iconBtn, .member, .ratePill, .pill{
      transition:
        background 2s ease,
        background-color 2s ease,
        color 2s ease,
        border-color 2s ease,
        box-shadow 2s ease,
        filter 2s ease;
    }
    /* Smooth theme fade across the whole UI (so every element matches the background transition) */
    :where(body, body *){
      transition-property:
        background,
        background-color,
        color,
        border-color,
        box-shadow,
        filter,
        outline-color,
        fill,
        stroke;
      transition-duration: var(--themeDur);
      transition-timing-function: var(--themeEase);
    }



    /* Keep the sticky headbar above *all* in-player overlays (controls, toasts, etc.) */
    header{position:sticky;top:0;z-index:1000;background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));backdrop-filter: blur(10px);}
    .wrap{max-width:1200px;margin:0 auto;padding:18px 16px 10px;}
    .topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;}
    .brand{display:flex;align-items:center;gap:10px;}
    .logo{
      width:36px;
      height:36px;
      border-radius:12px;
      background:linear-gradient(135deg, var(--accentA), var(--accentB));
      border:1px solid rgba(255,255,255,.35);
      box-shadow:
        0 6px 18px rgba(0,0,0,.35),
        0 0 18px rgba(var(--accentRGB), .45);
    }
    h1{font-size:16px;margin:0;letter-spacing:.3px}
    .pill{font-size:12px;color:var(--muted);padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.04)}

    /* Net status pill: reserve width so Connected/Disconnected doesn't jiggle */
    #statusPill{display:inline-flex;align-items:center;justify-content:center;min-width:132px;max-width:100%;}
    #statusPill .badge{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;}
    /* If the header is cramped, allow it to shrink like before */
    body.compactStatus #statusPill{min-width:0;}

    main{max-width:1200px;margin:0 auto;padding:12px 16px 28px;display:grid;grid-template-columns: 1.4fr .9fr;gap:14px;}

.leftCol,.rightCol{display:flex;flex-direction:column;gap:14px;min-width:0;}
    @media (max-width: 980px){main{grid-template-columns:1fr;}}

    .card{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10);
          border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
    .card .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:rgba(0,0,0,.18)}
    .card .hd .title{display:flex;align-items:center;gap:10px}
    .card .hd .title b{font-size:13px}
    .card .hd small{color:var(--muted)}
    .card .bd{padding:14px}

    /* Hide player header (keep DOM for JS bindings) */
    .videoStage .hd{display:none;}


    .videoStage{padding:0}
    /* Ensure overlayed player controls are positioned within the video card, not over the header */
    .videoStage .bd{position:relative;}

    .stage{position:relative;background:#000;border-radius:calc(var(--radius) - 6px);overflow:hidden}
    video{width:100%;height:auto;display:block;background:#000}
    .stage .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
    .dropHint{pointer-events:none;opacity:.85;background:rgba(0,0,0,.55);border:1px dashed rgba(255,255,255,.35);padding:14px 16px;border-radius:14px;color:var(--text);font-size:13px}

    .controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:10px}
    .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
    /* Connection panel: keep button to the right of inputs */
    .connRow{flex-wrap:nowrap}
    .connRow input{flex:1 1 auto;min-width:0}
    .connRow button{flex:0 0 auto;white-space:nowrap}

    button, input[type="text"], select, textarea{font-family:inherit;color:var(--text)}
    button{cursor:pointer;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);padding:8px 10px;border-radius:12px;
           transition:
           transform .04s ease,
           background var(--themeDur) var(--themeEase),
           background-color var(--themeDur) var(--themeEase),
           color var(--themeDur) var(--themeEase),
           border-color var(--themeDur) var(--themeEase),
           box-shadow var(--themeDur) var(--themeEase),
           filter var(--themeDur) var(--themeEase);border-color:rgba(var(--accentRGB),.55)}
    button.danger{background:rgba(255,107,139,.12);border-color:rgba(255,107,139,.4)}
    button.ok{background:rgba(110,243,154,.12);border-color:rgba(110,243,154,.4)}
    button.small{padding:6px 8px;border-radius:10px;font-size:12px}
    button.activeMode{
      box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 18px rgba(255,255,255,.22);
      border-color: rgba(255,255,255,.28);
    }

    .kv{display:grid;grid-template-columns: 130px 1fr;gap:10px;align-items:center;margin:10px 0}
    .kv.compact{margin:6px 0}
    .kv.compact + .kv.compact{margin-top:4px}
    .kv label{font-size:12px;color:var(--muted)}
    input[type="text"], textarea, select{width:100%;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 10px;outline:none}
    input[type="number"]{width:100%;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 10px;outline:none;color:var(--text)}

/* Theme dropdown: wider + gray highlight (avoids clipped option text) */
#themeSel{
  min-width: 170px;
}
select:focus{
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
/* Note: option styling is browser-dependent; this helps in Chromium/Firefox */
select option{
  background-color: rgba(0,0,0,.90);
  color: var(--text);
}
select option:checked,
select option:hover{
  background-color: rgba(180,180,180,.25);
  color: var(--text);
}

/* Custom theme picker (avoids native <select> blue hover + adds fade transition) */
.nativeSelect{display:none !important;}
.pwSelect{position:relative;width:100%;}
.pwSelectBtn{
  width:100%;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
  min-width:170px;
}
.pwSelectBtn:hover{background:rgba(255,255,255,.06);}
.pwSelectBtn:focus{
  outline:none;
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.pwCaret{opacity:.8;font-size:12px}
.pwSelectMenu{
  position:absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 50;
  padding:6px;
  border-radius:12px;
  background: rgba(0,0,0,.92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .16s ease, transform .16s ease;
}
.pwSelect.open .pwSelectMenu{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.pwSelectOpt{
  width:100%;
  text-align:left;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease;
}
.pwSelectOpt:hover{
  background: rgba(180,180,180,.25); /* gray hover (no blue) */
}
.pwSelectOpt[aria-selected="true"]{
  background: rgba(180,180,180,.35);
  border-color: rgba(255,255,255,.14);
}
    textarea{min-height:88px;resize:vertical;font-family:var(--mono);font-size:12px;line-height:1.35}

    .grid2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
    @media (max-width: 600px){.grid2{grid-template-columns:1fr}}

    .hint{color:var(--muted);font-size:12px;line-height:1.4}
    .kbd{font-family:var(--mono);font-size:11px;padding:2px 6px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(0,0,0,.25)}

    .log{font-family:var(--mono);font-size:12px;line-height:1.4;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12);
         border-radius:12px;padding:10px;max-height:190px;overflow:auto}
    .log .t{color:var(--muted)}

    .log .line-sys{color:var(--muted)}
    .log .line-me{color:var(--accent)}
    .log .line-err{color:var(--danger)}

    .chat{display:flex;gap:8px;margin-top:10px}
    .chat input{flex:1;color:var(--text);caret-color:var(--accent);-webkit-text-fill-color:var(--text)}
    .chat input::placeholder{color:var(--muted);opacity:1}

    .badge{display:inline-flex;align-items:center;gap:6px}
    .dot{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.35)}
    .dot.ok{background:var(--ok)}
    .dot.bad{background:var(--danger)}

    .range{display:flex;align-items:center;gap:8px}
    input[type="range"]{width:160px}

    /* Smoothly transition range track + thumb (including seek bar "bars" and thumb "bubbles") */
    input[type="range"]{
      transition: background var(--themeDur) var(--themeEase),
                  background-color var(--themeDur) var(--themeEase),
                  box-shadow var(--themeDur) var(--themeEase),
                  border-color var(--themeDur) var(--themeEase);
      accent-color: var(--accentA);
    }
    input[type="range"]::-webkit-slider-runnable-track{
      height:6px;border-radius:999px;
      background: var(--trackBg);
      transition: background-color var(--themeDur) var(--themeEase),
                  box-shadow var(--themeDur) var(--themeEase),
                  border-color var(--themeDur) var(--themeEase);
    }
    input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance:none;
      width:16px;height:16px;border-radius:999px;
      margin-top:-5px;
      background: var(--text);
      border:1px solid rgba(0,0,0,.35);
      box-shadow:
        0 6px 14px rgba(0,0,0,.25),
        0 0 12px rgba(var(--accentRGB), .35);
      transition: background-color var(--themeDur) var(--themeEase),
                  border-color var(--themeDur) var(--themeEase),
                  box-shadow var(--themeDur) var(--themeEase);
    }
    input[type="range"]::-moz-range-track{
      height:6px;border-radius:999px;background:var(--trackBg);
      transition: background-color var(--themeDur) var(--themeEase);
    }
    input[type="range"]::-moz-range-progress{
      height:6px;border-radius:999px;background:var(--accentA);
      transition: background-color var(--themeDur) var(--themeEase);
    }
    input[type="range"]::-moz-range-thumb{
      width:16px;height:16px;border-radius:999px;
      background:var(--text);
      border:1px solid rgba(0,0,0,.35);
      box-shadow:
        0 6px 14px rgba(0,0,0,.25),
        0 0 12px rgba(var(--accentRGB), .35);
      transition: background-color var(--themeDur) var(--themeEase),
                  border-color var(--themeDur) var(--themeEase),
                  box-shadow var(--themeDur) var(--themeEase);
    }


    .hr{height:1px;background:rgba(255,255,255,.10);margin:12px 0}

    .toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
           background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);
           color:var(--text);padding:10px 12px;border-radius:14px;box-shadow:var(--shadow);display:none;z-index:99;font-size:13px}

    .mini{font-size:12px;color:var(--muted)}

    .members{display:flex;flex-wrap:wrap;gap:8px}
    .peopleRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .peopleRow b{white-space:nowrap}
    .peopleRow .members{margin-top:0 !important}

    .member{padding:6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.2);font-size:12px}
    /* -----------------------------
       Modern custom player chrome
       ----------------------------- */
    video::-webkit-media-controls { display:none !important; }
    video::-webkit-media-controls-enclosure { display:none !important; }
    .hidden{display:none !important}

    .pwControls{
  margin-top:12px;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

    .pwRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .pwRow.space{justify-content:space-between}
    .pwLeft,.pwRight{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

    .controlsOneLine{flex-wrap:nowrap}
    .controlsAll{flex-wrap:nowrap;gap:10px}
    .vdiv{width:1px;height:26px;background:rgba(255,255,255,.15);margin:0 6px;flex:0 0 auto}
    .hotkeysBox{margin-top:12px}


    .iconBtn{
      width:40px;height:40px;
      display:inline-flex;align-items:center;justify-content:center;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
      transition:
      transform .04s ease,
      background var(--themeDur) var(--themeEase),
      background-color var(--themeDur) var(--themeEase),
      color var(--themeDur) var(--themeEase),
      border-color var(--themeDur) var(--themeEase),
      box-shadow var(--themeDur) var(--themeEase),
      filter var(--themeDur) var(--themeEase);
    }
    .iconBtn:hover{background:rgba(255,255,255,.10)}
    .iconBtn:active{transform:translateY(1px)}
    .iconBtn.primary{
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
    }
    .iconBtn.small{width:36px;height:36px;border-radius:12px}

    .seekWrap{flex:1;min-width:220px;display:flex;align-items:center;gap:10px}
    .seek{width:100%}
    .time{font-family:var(--mono);font-size:11px;color:var(--muted);min-width:92px;text-align:right}

    .sliders{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
    .sliderLabel{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
    .sliderLabel input[type="range"]{width:70px}

    /* -----------------------------
       Range styling to match theme
       ----------------------------- */
    .pwControls input[type="range"]{
      -webkit-appearance:none;
      appearance:none;
      height:6px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      outline:none;
      transition: background 2s ease;
    }
    .pwControls input[type="range"]::-webkit-slider-runnable-track{
      height:6px;border-radius:999px;background:transparent;
    }
    .pwControls input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance:none;
      appearance:none;
      width:16px;height:16px;border-radius:999px;
      background:var(--text);
      border:1px solid rgba(0,0,0,.35);
      box-shadow:
        0 6px 14px rgba(0,0,0,.25),
        0 0 12px rgba(var(--accentRGB), .35);
      margin-top:-5px;
    }
    .pwControls input[type="range"]::-moz-range-track{
      height:6px;border-radius:999px;background:rgba(255,255,255,.12);
    }
    .pwControls input[type="range"]::-moz-range-progress{
      height:6px;border-radius:999px;background:var(--accentA);
    }
    .pwControls input[type="range"]::-moz-range-thumb{
      width:16px;height:16px;border-radius:999px;
      background:var(--text);
      border:1px solid rgba(0,0,0,.35);
      box-shadow:
        0 6px 14px rgba(0,0,0,.25),
        0 0 12px rgba(var(--accentRGB), .35);
    }

    .ratePill{
      display:inline-flex;align-items:center;justify-content:center;
      padding:4px 8px;border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      color:var(--text);
      font-family:var(--mono);
      font-size:11px;
      min-width:44px;
    }

    /* -----------------------------
       Fullscreen: keep controls visible on mouse move
       ----------------------------- */
    .playerShell{position:relative}
    .isFullscreen .stage{height:100vh; border-radius:0}
    .isFullscreen video{height:100%; object-fit:contain}
    #pwControls{
      transform: scale(var(--uiScale,1));
      transform-origin: center bottom;
    }

    .isFullscreen #pwControls{
      position:absolute;
      left:16px; right:16px; bottom:16px;
      z-index:60;
      opacity:0;
      pointer-events:none;
      transform: translateY(10px) scale(var(--uiScale,1));
      transition:opacity .18s ease, transform .18s ease;
    }
    .isFullscreen #pwControls.show{
      opacity:1;
      pointer-events:auto;
      transform: translateY(0) scale(var(--uiScale,1));
    }

    /* -----------------------------
       YouTube-like seek bar layout
       ----------------------------- */
    .pwSeekTop{
      width:100%;
      padding:10px 6px 6px;
    }
    .seekTop{
      width:100% !important;
      display:block;
    }
    .pwMeta{
      padding:6px 6px 2px;
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:flex-start;
      color:var(--muted);
      font-family:var(--mono);
      font-size:12px;
    }
    .timeText{opacity:.95}

    .pwSeekLine{
      width:100%;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .pwSeekLine .seekTop{flex:1;min-width:0}
    .timeInline{
      font-family:var(--mono);
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      min-width:118px;
      text-align:right;
      opacity:.95;
    }

    /* Saturated accent (derived from selected theme) */
    :root{
      --trackBg: rgba(255,255,255,.10);
    }
.iconBtn.primary{
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
    }
    .pwControls input[type="range"]{
      background: var(--trackBg);
    }
    .pwControls input[type="range"]::-webkit-slider-thumb{
      background:linear-gradient(135deg, var(--accentA), var(--accentB));
      border:2px solid rgba(255,255,255,.65);
      /* extra glow for the thumb when themes change */
      box-shadow:
        0 6px 14px rgba(0,0,0,.25),
        0 0 14px rgba(var(--accentRGB), .45);
    }
    .pwControls input[type="range"]::-moz-range-thumb{
      background:linear-gradient(135deg, var(--accentA), var(--accentB));
      border:2px solid rgba(255,255,255,.65);
      box-shadow:
        0 6px 14px rgba(0,0,0,.25),
        0 0 14px rgba(var(--accentRGB), .45);
    }
    .ratePill{
      border-color: rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
    }
    .iconBtn.muted{
      border-color: rgba(255,120,120,.55);
      background: rgba(255,120,120,.16);
    }


/* -----------------------------
   SVG icon system + animations
   ----------------------------- */
.iconBtn .ico{width:18px;height:18px;display:block;transition:fill var(--themeDur) var(--themeEase), stroke var(--themeDur) var(--themeEase)}
.iconBtn .ico.stroke{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iconBtn .ico.fill{fill:currentColor}
.iconSwap{position:relative;width:18px;height:18px;display:block}
.iconSwap > *{position:absolute;inset:0;transform-origin:50% 50%;
  transition:opacity .18s ease, transform .18s ease;
}
.iconSwap .off{opacity:1;transform:scale(1) rotate(0deg)}
.iconSwap .on{opacity:0;transform:scale(.85) rotate(-12deg)}
.iconBtn.isOn .iconSwap .off{opacity:0;transform:scale(.85) rotate(12deg)}
.iconBtn.isOn .iconSwap .on{opacity:1;transform:scale(1) rotate(0deg)}


  
/* Host-only UI blocks */
    .hostOnly{display:none;}
    body.isHost .hostOnly{display:grid;}
    .hostOnly.inline{display:none;}
    body.isHost .hostOnly.inline{display:inline-flex;}

    /* Host-only UI blocks */
    .hostOnly{display:none;}
    body.isHost .hostOnly{display:grid;}

    /* Chat scrollbar themed */
    .log{
      scrollbar-width: thin;
      scrollbar-color: rgba(var(--accentRGB), .75) rgba(255,255,255,.08);
    }
    .log::-webkit-scrollbar{width:10px}
    .log::-webkit-scrollbar-track{
      background: rgba(255,255,255,.08);
      border-radius: 999px;
    }
    .log::-webkit-scrollbar-thumb{
      background: linear-gradient(180deg, var(--accentA), var(--accentB));
      border-radius: 999px;
      border: 2px solid rgba(0,0,0,.25);
    }

    /* Fullscreen: bigger controls for easier clicking */
    #pwControls{
      transform: scale(var(--uiScale,1));
      transform-origin: center bottom;
    }

    .isFullscreen #pwControls{
      padding:14px 16px;
      border-radius:22px;
    }
    .isFullscreen .iconBtn{width:56px;height:56px;border-radius:18px}
    .isFullscreen .iconBtn.small{width:50px;height:50px;border-radius:16px}
    .isFullscreen .ratePill{font-size:13px; padding:6px 10px; min-width:60px}
    .isFullscreen .timeInline{font-size:13px; min-width:138px}
    .isFullscreen .sliderLabel{font-size:13px}
    .isFullscreen .sliderLabel input[type="range"]{width:70px}

    /* Subtitles overlay (custom renderer) */
    .subsOverlay{
      position:absolute;
      inset:0;
      display:none;
      pointer-events:none;
      z-index: 5; /* above video, below the main overlay */
    }
    .subsOverlay.on{ display:block; }

    .subsBox{
      position:absolute;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      text-align:center;
      white-space:pre-wrap;
      line-height:1.25;
      width:auto;
      height:auto;
      padding:0;
    }

        .subsText{
      display:inline-block;
      max-width: 100%;
      word-break: break-word;
      font-family: var(--subs-font, var(--sans));
      font-size: var(--subs-size, 28px);
      color: var(--subs-color, #fff);
      font-weight: var(--subs-weight, 700);
      font-style: var(--subs-style, normal);
      text-decoration: var(--subs-deco, none);
      opacity: var(--subs-opacity, 1);
      padding: var(--subs-pad-t, 0) var(--subs-pad-r, 0) var(--subs-pad-b, 0) var(--subs-pad-l, 0);
      border-radius: 10px;
      background: var(--subs-bg, transparent);
      text-shadow: var(--subs-outline-shadow, none), 0 var(--subs-shadow-y, 0px) var(--subs-shadow, 0px) var(--subs-shadow-color, rgba(0,0,0,0));
    }

    /* Subtitles panel spacing: match other sections */
    .subsSection{gap:10px !important}
    .subsGrid{gap:10px !important}
    .subsGrid .kv{margin:0}
    #subsTrackSel{width:100%; height:40px;}
    .subsSection .hr{margin:8px 0}

    .chk{ display:flex; align-items:center; gap:6px; color:var(--text); font-size:12px; }
    .chk input{ accent-color: var(--accent); }

  
    /* -----------------------------
       On-video chat messages overlay
       ----------------------------- */
    .videoMsgOverlay{
      position:absolute;
      inset:0;
      z-index: 8;
      pointer-events:none;
      display:none;
    }
    .videoMsgOverlay.on{ display:block; }

    .videoMsgBubble{
      position:absolute;
      top: var(--vmTop, 12px);
      right: var(--vmRight, 12px);
      max-width: min(70%, calc(100% - (var(--vmRight, 12px) * 2)));
      background: rgba(0,0,0,.60);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px;
      padding: .45em .7em;
      box-shadow: 0 10px 25px rgba(0,0,0,.35);
      color: var(--text);
      font-size: var(--vmFont, 24px);
      line-height: 1.15;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 1s ease, transform 1s ease;
      will-change: opacity, transform;
    }
    .videoMsgBubble.show{
      opacity: 1;
      transform: translateY(0);
    }

    .videoMsgComposer{
      position:absolute;
      top: var(--vmTop, 12px);
      right: var(--vmRight, 12px);
      width: min(70%, calc(100% - (var(--vmRight, 12px) * 2)));
      background: rgba(0,0,0,.60);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px;
      padding: .55em .7em;
      box-shadow: 0 10px 25px rgba(0,0,0,.35);
      color: var(--text);
      font-size: var(--vmFont, 24px);
      line-height: 1.15;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 200ms ease, transform 200ms ease;
      pointer-events: auto;
      display: none;
    }
    .videoMsgComposer.on{
      display:block;
      opacity:1;
      transform: translateY(0);
    }
    .videoMsgComposer input{
      width: 100%;
      box-sizing: border-box;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 10px;
      padding: .55em .6em;
      color: var(--text);
      outline: none;
      font-size: 1em;
    }
    .videoMsgComposer input::placeholder{ color: rgba(255,255,255,.65); }
    .videoMsgComposeActions{
      display:flex;
      justify-content:flex-end;
      gap:8px;
      margin-top: .5em;
      pointer-events: auto;
    }

  
header .mini{
  color: var(--muted);
  opacity: .95;
}

.hotkeysCard .bd{padding-top:8px}


/* FIX: Right align control cluster */
.pwRight { margin-left: auto; justify-content: flex-end; }

/* FIX: Prevent fullscreen overflow */
.sliders { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }

/* FIX: Responsive volume slider */
.sliderLabel input[type="range"]{ width: clamp(48px, 10vw, 90px); min-width: 48px; }


/* FIX (mobile): keep fullscreen from dropping to its own line */
@media (max-width: 520px){
  .pwRow{gap:8px}
  .pwLeft,.pwRight{gap:8px}
  .iconBtn{width:34px;height:34px;border-radius:12px}
  .sliderLabel input[type="range"]{width:clamp(42px, 16vw, 70px);min-width:42px}
  /* prevent a single last item line when possible */
  .pwRight{flex-wrap:nowrap}
  .pwRight > *{flex:0 0 auto}
}

/* Hide the "Room" header above the video player (keep DOM for JS) */
.videoStage .hd{display:none;}


/* Prevent layout jump when swapping video src (MSE rebuild / seek) */
.stage{aspect-ratio:16/9;}
video{height:100%;object-fit:contain;}

/* -----------------------------
   UI: Debugging panel + responsive header tweaks
   ----------------------------- */
.debugGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.debugHdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 6px 2px;
  color:var(--muted);
  font-size:12px;
}
.debugLog{
  /* ~5 lines (matches .log line-height 1.4 + padding) */
  max-height: calc(5 * 1.4em + 20px);
}
.debugFooter{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:12px;
}
.debugBtns{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.chk{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  user-select:none;
}
.chk input{transform: translateY(1px);}

/* Portrait / cramped header: dot-only status + optionally logo-only brand text */
body.compactStatus #netText{display:none;}
body.compactStatus #statusPill .badge{gap:0;}
body.brandLogoOnly header .brand h1,
body.brandLogoOnly header .brand .mini{display:none;}
body.brandLogoOnly header .brand{gap:8px;}

/* Player controls: overlay on top of video even when not fullscreen */
#pwControls{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:60;
  margin-top:0 !important;
}
.pwControls{margin-top:0 !important;}

.role-toggle-fixed{
  text-align:center;
}

.role-toggle-fixed{ text-align:center; }

.debug-flash{
  animation: debugFlash 1.5s ease-out;
}

@keyframes debugFlash{
  0%{ background: rgba(255,80,80,0.45); }
  100%{ background: transparent; }
}


/* --- Next-level Debugging UI --- */
.dbg-scroll{
  max-height: 7.6em; /* ~5 lines depending on font */
  overflow-y: auto;
}

.dbg-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  margin: .4rem 0 .35rem 0;
  flex-wrap:wrap;
}

.dbg-left{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.dbg-label{
  font-weight:600;
  opacity:.9;
}

.dbg-badges{ display:flex; gap:.35rem; align-items:center; }
.dbg-badge{
  font-size:.8rem;
  padding:.12rem .45rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
}

.dbg-chip{
  font-size:.78rem;
  padding:.14rem .5rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: transparent;
  cursor:pointer;
  user-select:none;
}
.dbg-chip.active{
  outline: 2px solid rgba(255,255,255,0.25);
}

.dbg-chips{ display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }

.dbg-search{
  min-width: 10rem;
  padding:.22rem .5rem;
  border-radius: .5rem;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.15);
}

.dbg-pause{ display:flex; align-items:center; gap:.35rem; font-size:.8rem; opacity:.9; }

.dbg-line{ border-radius:.35rem; padding:.08rem .3rem; }
.dbg-error{ border-left: 3px solid rgba(255,80,80,0.85); }
.dbg-warn{ border-left: 3px solid rgba(255,200,80,0.85); }
.dbg-info{ border-left: 3px solid rgba(120,170,255,0.55); }

.dbg-header-badge{
  margin-left: .5rem;
  font-size: .82rem;
  padding:.12rem .45rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,80,80,0.14);
  user-select:none;
}

@keyframes debugFlash{
  0%{ background: rgba(255,80,80,0.45); }
  100%{ background: transparent; }
}
.debug-flash{
  animation: debugFlash 1.2s ease-out;
}

/* ---------- Player: no-window stage ---------- */
.videoStage.card{background:transparent;border:none;box-shadow:none}
.videoStage.card .bd{padding:0}

/* ---------- Seek bar: segment availability overlay ---------- */
:root{--segMark:rgba(var(--accentRGB),.26)}
.pwSeekLine{position:relative}
.segOverlay{position:absolute;left:0;right:0;top:50%;height:6px;transform:translateY(-50%);pointer-events:none;z-index:1}
.segOverlay .seg{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--segMark)}

/* ---------- Controls: hide low-priority items when cramped ---------- */
#pwControls.pwTight #btnStepBack,
#pwControls.pwTight #btnStepFwd{display:none}
#pwControls.pwTight .sliderLabel{display:none}

/* Stream Quality native selects styled to match Theme dropdown */
.pwSelectNative{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: var(--text);
  padding: 10px 12px;
  height: 40px;
  outline: none;
}
.pwSelectNative:focus{
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

/* Subtitles color pickers closer to current theme */
#subsSection input[type=color]{
  width: 44px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
#subsSection input[type=color]::-webkit-color-swatch-wrapper{
  padding: 6px;
}
#subsSection input[type=color]::-webkit-color-swatch{
  border: none;
  border-radius: 8px;
}

/* --- One-line controls overflow --- */
#pwControls .pwRow{flex-wrap:nowrap;}
#pwControls .pwLeft,#pwControls .pwRight{flex-wrap:nowrap;}
#pwControls.hideVolBar .ctl-volbar{display:none !important;}
.volWrap{display:inline-flex;align-items:center;gap:8px;}
#pwControls.hideStep .ctl-step{display:none !important;}
#pwControls.hideVolBtns .ctl-volbtn{display:none !important;}
#pwControls.hidePiP .ctl-pip{display:none !important;}
#pwControls.hideSkip10 .ctl-skip10{display:none !important;}
#btnStartStream{min-width:64px;}
#btnStartStream.on{box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;}
.subsSection input[type="color"]{width:42px;height:28px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:transparent;padding:0;overflow:hidden;}
.subsSection input[type="color"]::-webkit-color-swatch-wrapper{padding:0;}
.subsSection input[type="color"]::-webkit-color-swatch{border:none;border-radius:9px;}


/* --- Patch v8: Stream Quality layout + volume grouping --- */
.streamQuality .pwSelectBtn{min-width:0;}
.streamQuality .sqActions{display:flex;justify-content:flex-end;}
.streamQuality .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width: 980px){
  .streamQuality .grid2{grid-template-columns:1fr;}
}
/* Ensure dropdown menus are clickable above other panels */
.streamQuality .pwSelectMenu{z-index:200;}
/* Prevent clipping of dropdowns inside details cards */
details > .streamQuality{overflow:visible;}

/* Stream Quality dropdowns sit near the bottom of the sidebar.
   The sidebar card used overflow:hidden, which clips open dropdown menus
   and makes the controls appear broken (especially for Host). */
.rightCol > aside.card{overflow:visible;}
.rightCol > aside.card .bd{overflow:visible;}

/* Fullscreen: keep video centered and letterboxed instead of drifting on rotate */
video:fullscreen, video:-webkit-full-screen{
  width:100% !important;
  height:100% !important;
  object-fit:contain;
  object-position:center center;
}
/* Volume: keep +/- visible; allow slider to collapse on narrow widths (no hover behavior) */
@media (max-width: 720px){
  .ctl-volbar{display:none !important;}
}

/* =====================================================
   Patch: Text-only Start/End button (no icon)
   - Clean pill toggle style
   - Uses existing .on class to indicate active stream
===================================================== */
#btnStartStream{
  appearance:none;
  -webkit-appearance:none;
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid rgba(var(--accentRGB, 122,162,255), 0.95);
  color: rgb(var(--accentRGB, 122,162,255));
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.2px;
  padding: 7px 16px;
  border-radius: 999px; /* pill */
  min-width: 84px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#btnStartStream:hover{
  background-color: rgba(var(--accentRGB, 122,162,255), 0.14) !important;
  box-shadow: 0 0 0 3px rgba(var(--accentRGB, 122,162,255), 0.14);
}

#btnStartStream:active{
  transform: translateY(1px);
}

#btnStartStream:disabled{
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Active stream state (existing JS toggles .on) */
#btnStartStream.on{
  border-color: rgba(239, 68, 68, 0.95);
  color: rgb(239, 68, 68);
  background-color: rgba(239, 68, 68, 0.10) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

#btnStartStream.on:hover{
  background-color: rgba(239, 68, 68, 0.16) !important;
}

/* Remove any pseudo-element icons completely */
#btnStartStream::before,
#btnStartStream::after{
  content: none !important;
  display: none !important;
}

/* =====================================================
   Patch: Make Stream Quality controls native <select>
   Reason: custom pwSelect menus are DOM overlays that can be clipped/hidden
   by stacking/overflow in some browsers/layouts.
===================================================== */
.streamQuality .nativeSelect{
  display:block !important;
  width:100%;
}
/* Hide custom pwSelect wrappers just for Stream Quality */
#streamTypePicker,
#streamResPicker,
#streamFpsPicker,
#streamBitratePicker{
  display:none !important;
}

/* =====================================================
   Patch: Stream Quality dropdowns - remove custom styling
   - Keep them as native <select> controls with browser defaults
===================================================== */
.streamQuality select{
  background: initial !important;
  border: initial !important;
  border-radius: initial !important;
  padding: initial !important;
  height: auto !important;
  box-shadow: none !important;
  color: inherit !important;
  width: 100%;
  min-width: 0;
}
.streamQuality select:focus{
  box-shadow: none !important;
  outline: auto;
}