:root{
    --bg:#0d100e;
    --panel:#111512;
    --panel2:#171c18;
    --line:#293129;
    --text:#f2f5f2;
    --muted:#9aa59c;
    --kick:#53fc18;
    --danger:#ff5b5b;
    --header-h:65px;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
  /* v6.80.5-dev: MultiKick-style layout -- every tile always fits inside
     the available area (tiles shrink as needed, 16:9 preserved), so
     neither axis is expected to overflow and scrolling is not the design. */
  body{overflow:hidden}

  header{
    height:var(--header-h);
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    border-bottom:1px solid var(--line);
    background:rgba(11,13,12,.97);
    position:relative;
    z-index:20;
  }
  /* Transient status feedback belongs beside the product name. */
  .focus-indicator.toast-hidden,
  .sub-audio-indicator.toast-hidden{
    display:none !important;
  }
  .toast{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    max-width:0;
    margin-left:0;
    padding:0;
    border-radius:8px;
    background:rgba(11,13,12,.82);
    color:#e7ece8;
    font-size:12px;
    line-height:1.4;
    pointer-events:none;
    opacity:0;
    transform:translateX(8px);
    transition:max-width .25s ease,margin-left .25s ease,padding .25s ease,opacity .25s ease,transform .25s ease;
    white-space:nowrap;
    overflow:hidden;
  }
  .toast.visible{
    opacity:1;
    transform:translateX(0);
    max-width:500px;
    margin-left:3px;
    padding:5px 8px;
  }
  .toast-icon{
    width:13px;height:13px;flex:none;
    fill:none;stroke:var(--kick);stroke-width:2.1;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .toast-text{
    min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .toast.marquee .toast-text{
    text-overflow:clip;
    animation:toast-marquee var(--toast-marquee-duration, 18s) ease-in-out infinite alternate;
    will-change:transform;
  }
  @keyframes toast-marquee{
    0%,18%{transform:translateX(0)}
    82%,100%{transform:translateX(var(--toast-scroll-distance,0px))}
  }
  @media(prefers-reduced-motion:reduce){
    .toast.marquee .toast-text{animation:none;transform:none}
  }
  @media(max-width:700px){
    .toast.visible{max-width:min(55vw, 240px)}
  }
  .brand{
    display:flex;align-items:center;gap:9px;
    font-weight:800;white-space:nowrap;
  }
  .logo{
    width:25px;height:25px;border-radius:7px;
    display:grid;place-items:center;background:var(--kick);color:#071006;
    font-size:14px;font-weight:950;
  }
  .input-wrap{
    display:flex;
    align-items:center;
    gap:7px;
    flex:1;
    min-width:120px;
  }
  input{
    width:100%;
    min-width:0;
    height:36px;
    border:1px solid var(--line);
    outline:0;
    background:var(--panel);
    color:var(--text);
    border-radius:8px;
    padding:0 11px;
    line-height:36px;
  }
  input:focus{border-color:#4d6750}
  button{
    height:36px;
    min-height:36px;
    max-height:36px;
    border:1px solid var(--line);
    background:var(--panel2);
    color:var(--text);
    border-radius:8px;
    padding:0 11px;
    cursor:pointer;
    font-weight:650;
    line-height:1;
    white-space:nowrap;
    flex:none;
  }
  button:hover{border-color:#526153}
  button.primary{background:var(--kick);color:#071006;border-color:var(--kick)}
  button.icon{
    width:36px;
    height:36px;
    padding:0;
  }
  .status{
    font-size:12px;color:var(--muted);white-space:nowrap;
    max-width:340px;overflow:hidden;text-overflow:ellipsis;
    display:inline-flex;align-items:center;gap:10px;
  }
  .status-segment{
    display:inline-flex;align-items:center;gap:3px;
  }
  .status-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:15px;
    height:15px;
    padding:0 4px;
    border-radius:999px;
    background:#fff;
    color:#0b0d0b;
    font-weight:800;
    font-size:9px;
    line-height:1;
  }
  /* Only shown while a channel is pinned as the max tile (see
     setManualFocusSlug()/updateFocusIndicator()). */
  .focus-indicator{
    display:none;
    align-items:center;
    gap:1px;
    max-width:240px;
    height:22px;
    padding:0 8px 0 5px;
    margin-left:4px; /* now sits inside .brand, right after the logo/name */
    border-radius:999px;
    background:rgba(83,252,24,.14);
    border:1px solid rgba(83,252,24,.5);
    color:var(--kick);
    font-size:11px;
    font-weight:750;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
  }
  .focus-indicator:hover{background:rgba(83,252,24,.24)}
  .focus-indicator.visible{display:inline-flex}
  .focus-indicator-icon{
    width:12px;height:12px;flex:none;
    fill:currentColor;stroke:none;
  }
  .focus-indicator-label{
    min-width:0;overflow:hidden;text-overflow:ellipsis;
  }
  .sub-audio-indicator{
    display:none;
    align-items:center;
    gap:1px;
    max-width:240px;
    height:22px;
    padding:0 8px 0 5px;
    margin-left:4px;
    border-radius:999px;
    background:rgba(83,252,24,.14);
    border:1px solid rgba(83,252,24,.5);
    color:var(--kick);
    font-size:11px;
    font-weight:750;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
  }
  .sub-audio-indicator:hover{background:rgba(83,252,24,.24)}
  .sub-audio-indicator.visible{display:inline-flex}
  
  .sub-audio-indicator-icon{
    width:15px;height:15px;flex:none;
    fill:currentColor;stroke:none;
  }
  .sub-audio-indicator-label{
    min-width:0;overflow:hidden;text-overflow:ellipsis;
  }
  .raid-sub-options{
    margin-top:6px;
    padding:6px 0 0;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    flex-direction:column;
    gap:5px;
    transition:opacity .2s;
  }
  .raid-sub-options.disabled{opacity:.35;pointer-events:none}
  .raid-sub-option{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    color:rgba(255,255,255,.7);
    cursor:pointer;
  }
  .raid-sub-option input[type="checkbox"]{
    width:14px;height:14px;margin:0;accent-color:var(--kick);cursor:pointer;
  }


  #grid{
    height:calc(100vh - var(--header-h));
    position:relative;
    overflow:hidden;
    padding:0;
  }

  .card{
    position:absolute;
    overflow:hidden;
    border-radius:0;
    border:0;
    background:#000;
    min-width:0;
    min-height:0;
    transition:opacity .12s ease;
    contain:layout paint;
    will-change:auto;
  }

  .card.hero .name{font-size:14px}
  .card.large .name{font-size:12px}
  .card.medium .name{font-size:11px}
  .card.small .name{font-size:10px}
  .card.tiny .name{font-size:9px}
  .card.small .meta,.card.tiny .meta{
    right:28px;
    top:3px;
    left:6px;
    gap:2px;
  }
  .card.small .remove,.card.tiny .remove{right:3px;top:3px;width:20px;height:20px;font-size:10px}

  .audio-badge{
    position:absolute;
    right:8px;
    bottom:8px;
    z-index:12;
    font-size:9px;
    font-weight:800;
    letter-spacing:.03em;
    padding:4px 7px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:5px;
    background:rgba(0,0,0,.74);
    color:#d7ddd8;
    cursor:pointer;
    pointer-events:auto;
    user-select:none;
  }
  .audio-badge:hover{
    background:rgba(30,36,32,.92);
  }

  /* v6.80.5-dev: a dedicated top-layer pseudo-element, not a box-shadow on
     .card itself -- the video/iframe child fills the card edge-to-edge and
     paints over a parent box-shadow, making it invisible. ::after sits in
     its own stacking position above every other child (pulse-ui, remove
     button, etc.) with pointer-events:none, so it's always visible on
     hover without ever intercepting clicks meant for those controls.
     Inset (not outline) so hovering never nudges/overlaps a neighboring
     tile; KICK green per request. */
  .card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:40;
    pointer-events:none;
    border:2px solid transparent;
    box-sizing:border-box;
    transition:border-color .1s ease;
  }
  .card:hover::after{border-color:var(--kick)}
  .card.random-selected::after{border-color:var(--kick)}
  .card.sub-audio::after{border-color:var(--kick);border-width:3px}
  .card.sub-audio:hover::after{border-color:var(--kick)}
  .card.small .meta{right:30px;top:4px;left:6px;gap:4px}
  .card.small .name{font-size:10px}
  .card.small .viewers{font-size:9px;padding:2px 5px}
  .card.small .remove{right:3px;top:3px;width:22px;height:22px;font-size:11px}
  .card.small .rank{left:5px;bottom:4px;font-size:8px;padding:2px 4px}

  .player-viewport{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:#000;
    z-index:1;
  }

  .player-stage{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transform:none !important;
    background:#000;
    pointer-events:none;
  }

  .player-stage iframe,
  .player-stage video{
    width:100% !important;
    height:100% !important;
    border:0;
    display:block;
    background:#000;
    pointer-events:none !important;
  }
  .meta{
    z-index:40;
    position:absolute;left:8px;top:6px;right:42px;
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;pointer-events:none;
    text-shadow:0 1px 2px #000;
  }
  .name{
    margin-top:2px;
    font-size:13px;
    font-weight:750;
    line-height:1.1;
    color:rgba(255,255,255,.86);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .viewers{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:rgba(0,0,0,.52);
    border:1px solid rgba(255,255,255,.42);
    border-radius:4px;
    padding:4px 7px;
    font-size:18px;
    font-weight:850;
    line-height:1;
  }
  .card.hero .viewers{font-size:24px;padding:5px 9px}
  .card.large .viewers{font-size:20px}
  .card.medium .viewers{font-size:17px}
  .card.small .viewers{font-size:14px}
  .card.tiny .viewers{font-size:12px}

  .dot{width:6px;height:6px;border-radius:50%;background:var(--kick);box-shadow:0 0 8px var(--kick)}
  .offline .dot{background:#777;box-shadow:none}
  .offline .viewers{color:#bbb}
  .remove{
    z-index:45;
    position:absolute;right:8px;top:7px;z-index:5;width:28px;height:28px;padding:0;
    border-radius:999px;background:rgba(0,0,0,.64);border-color:rgba(255,255,255,.15);
    opacity:.45;
  }
  .card:hover .remove{opacity:1}

  .empty{
    grid-column:1/-1;display:grid;place-items:center;text-align:center;
    min-height:70vh;color:var(--muted);padding:30px;
  }
  .empty b{display:block;color:var(--text);font-size:22px;margin-bottom:8px}
  .empty code{color:#c8d2ca}
  dialog{
    width:min(620px,calc(100vw - 24px));border:1px solid var(--line);
    border-radius:12px;background:var(--panel);color:var(--text);padding:18px;
  }
  dialog::backdrop{background:rgba(0,0,0,.65)}
  .picker-tab-content{display:flex;flex-direction:column;flex:1;min-height:0}
  .picker-tab-body{padding:24px;overflow:auto;flex:1;display:flex;flex-direction:column;min-height:0}
  .settings-grid{
  display:grid;
  grid-template-columns:minmax(90px,180px) 1fr;
  align-items:start;
  gap:14px 16px;
}
.settings-grid select{padding:8px 10px;padding-right:28px;background:#1a1d22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 10px center;-webkit-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.10);border-radius:8px;color:#fff}
.settings-grid input[type="number"]{padding:8px 10px;background:#1a1d22;border:1px solid rgba(255,255,255,.10);border-radius:8px;color:#fff}
.settings-row{
  display:contents;
}
.settings-row + .settings-row > .settings-label{
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:14px;
}
.settings-row + .settings-row > .settings-field{
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:14px;
}
.settings-label{
  font-size:12px;
  color:var(--muted);
  padding-top:6px;
  text-align:left;
}
.settings-field{display:flex;flex-wrap:wrap;align-items:start;gap:6px;min-width:0}
.settings-field select,.settings-field input[type="number"]{width:auto;box-sizing:border-box}
.settings-field .help{width:100%}
.settings-metric-toggle{width:34px;height:20px;margin:0;align-self:center}
.settings-row-toggle > .settings-label{padding-top:6px;align-self:start}
.settings-row-toggle + .settings-row-toggle > .settings-label{padding-top:14px}
.settings-row-toggle > .settings-field{align-items:start}
.settings-metric-toggle .watch-toggle-track{width:34px;height:20px}
.settings-metric-toggle .watch-toggle-track::after{width:14px;height:14px}
.settings-metric-toggle input:checked + .watch-toggle-track::after{transform:translateX(14px)}
label{display:grid;gap:6px;font-size:12px;color:var(--muted)}
  .help{font-size:12px;line-height:1.55;color:var(--muted)}
  .help strong{color:var(--text)}

  .follow-list{display:grid;gap:8px;max-height:52vh;overflow:auto;margin:12px 0;padding-right:4px}
  .follow-item{display:grid;grid-template-columns:24px 42px 1fr auto;align-items:center;gap:9px;padding:8px;border:1px solid var(--line);border-radius:9px;background:#0d110e}
  .follow-item img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#222}
  .follow-name{font-weight:750;font-size:13px}
  .follow-sub{font-size:11px;color:var(--muted);margin-top:2px}
  .live-badge{font-size:10px;font-weight:800;color:#071006;background:var(--kick);padding:3px 6px;border-radius:999px}
  .offline-badge{font-size:10px;color:var(--muted);border:1px solid var(--line);padding:3px 6px;border-radius:999px}
  .follow-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .follow-tools input{flex:1;min-width:160px}
  textarea{width:100%;min-height:150px;background:#0d110e;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;resize:vertical}

  @media(max-width:1000px){
    .status{display:none}
  }
  @media(max-width:700px){
    :root{--header-h:105px}
    header{height:var(--header-h);flex-wrap:wrap}
    .brand{width:auto}
    .input-wrap{order:3;flex-basis:100%}
  }

  .watchlist-panel{
    margin-top:0;
    padding-top:0;
    display:flex;flex-direction:column;flex:1;min-height:0;
  }
  .watchlist-header{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;margin-bottom:8px;
  }
  .watchlist-title{font-weight:800}
  .watchlist-count{font-size:11px;color:#aab2ac;margin-top:2px}
  .watchlist{
    display:flex;flex-direction:column;gap:6px;
    overflow:auto;flex:1;min-height:0;
  }
  .watch-item{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;gap:8px;
    padding:8px 9px;
    background:#111512;
    border:1px solid rgba(255,255,255,.08);
    border-radius:7px;
  }
  .watch-name{
    min-width:0;font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .watch-status{
    font-size:10px;font-weight:800;
    border:1px solid rgba(255,255,255,.18);
    border-radius:4px;padding:2px 6px;white-space:nowrap;
  }
  .watch-remove{
    width:30px;height:30px;min-width:30px;padding:0;
    border-radius:6px;font-size:16px;line-height:1;
  }
  .watch-empty{padding:10px;color:#aab2ac;font-size:12px}
  .watch-section-divider{
    grid-column:1 / -1;
    height:0;
    margin:4px 0 1px;
    border-top:1px solid rgba(255,255,255,.22);
  }


.card iframe,.card video{
    display:block;
  }


.card.left-edge{
    border-left:0 !important;
  }
  .card.right-edge{
    border-right:0 !important;
  }
  .card.bottom-edge{
    border-bottom:0 !important;
  }
header{
    display:grid !important;
    grid-template-columns:1fr minmax(360px,560px) 1fr;
    align-items:center;
    gap:14px;
  }
  .brand{
    justify-self:start;
  }
  .input-wrap{
    justify-self:center;
    width:100%;
    max-width:560px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:0 !important;
  }
  .status{
    justify-self:end;
  }
  #refreshBtn,
  #settingsBtn{
    justify-self:end;
  }

  header{
    position:relative;
    display:flex !important;
    align-items:flex-start;
    justify-content:center;
  }
  .brand{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
  }
  .input-wrap{
    width:min(560px, calc(100vw - 420px));
    max-width:560px;
    min-width:360px;
    margin:0 auto !important;
  }
  .status{
    position:absolute;
    right:110px;
    top:50%;
    transform:translateY(-50%);
  }
  #refreshBtn{
    position:absolute;
    right:62px;
    top:50%;
    transform:translateY(-50%);
  }
  #settingsBtn{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
  }

  @media (max-width:900px){
    header{
      padding-top:12px;
      padding-bottom:12px;
    }
    .brand{
      position:static;
      transform:none;
      align-self:center;
      margin-right:10px;
    }
    .input-wrap{
      width:auto;
      min-width:0;
      flex:1;
    }
    .status{
      display:none;
    }
    #refreshBtn,
    #settingsBtn{
      position:static;
      transform:none;
      align-self:center;
    }
  }


  .stream-refresh{
    position:absolute;
    left:8px;
    bottom:8px;
    z-index:12;
    width:27px;
    height:27px;
    padding:0;
    border:1px solid rgba(255,255,255,.24);
    border-radius:5px;
    background:rgba(0,0,0,.74);
    color:#d7ddd8;
    font-size:15px;
    line-height:1;
    cursor:pointer;
    pointer-events:auto;
  }
  .stream-refresh:hover{
    background:rgba(30,36,32,.92);
  }
  .card.small .audio-badge,
  .card.tiny .audio-badge{
    right:5px;
    bottom:4px;
    padding:2px 5px;
    font-size:8px;
  }
  .card.small .stream-refresh,
  .card.tiny .stream-refresh{
    left:5px;
    bottom:4px;
    width:22px;
    height:22px;
    font-size:12px;
  }


  header{
    transition:transform .22s ease, opacity .22s ease;
    will-change:transform;
  }

  body.header-hidden header{
    transform:translateY(-105%) !important;
    opacity:0;
    pointer-events:none;
  }

  .top-reveal-zone{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:10px;
    z-index:9999;
    background:transparent;
  }

  body.header-hidden #grid{
    height:100vh;
    margin-top:calc(-1 * var(--header-h));
  }

  /* #grid width/height/margin are always applied immediately -- no
     transition, ever. The header show/hide animation is carried entirely
     by the header element's own transform/opacity transition. */


  /* v6.80.5-dev: a gap between tiles, not a visible dividing line -- the
     border is colored to match #grid's own background so it reads as
     empty space, not a seam. box-sizing:border-box means this eats into
     each card's own JS-computed rect rather than pushing neighbors past
     it, so the layout engine's "everything fits inside available area"
     guarantee is untouched. Drawn once per shared edge (right/bottom only)
     so adjacent tiles don't double up to a 4px gap. */
  .card{
    box-sizing:border-box;
    border:0 !important;
  }
  .card:not(.right-edge){
    border-right:2px solid #080a09 !important;
  }
  .card:not(.bottom-edge){
    border-bottom:2px solid #080a09 !important;
  }


  .bottom-controls{
    position:absolute;
    right:8px;
    bottom:8px;
    z-index:14;
    display:flex;
    gap:5px;
    align-items:center;
    pointer-events:auto;
  }
  .bottom-controls .audio-badge,
  .bottom-controls .stream-refresh{
    position:static !important;
    inset:auto !important;
    transform:none !important;
  }
  .bottom-controls .stream-refresh{
    width:27px;
    height:27px;
    min-width:27px;
  }
  .bottom-controls .audio-badge{
    min-height:27px;
  }
  .card.small .bottom-controls,
  .card.tiny .bottom-controls{
    right:5px;
    bottom:4px;
    gap:4px;
  }
  .card.small .bottom-controls .stream-refresh,
  .card.tiny .bottom-controls .stream-refresh{
    width:22px;
    height:22px;
    min-width:22px;
  }
  .card.small .bottom-controls .audio-badge,
  .card.tiny .bottom-controls .audio-badge{
    min-height:22px;
  }
  .card.small .quality-badge,
  .card.tiny .quality-badge{
    left:5px;
    bottom:4px;
    padding:2px 4px;
    font-size:7px;
  }

  .player-message{
    position:absolute;
    inset:0;
    z-index:3;
    display:none;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:#000;
    color:#c0c8c2;
    font-size:11px;
    pointer-events:none;
  }
  .card.player-loading .player-message,
  .card.player-error .player-message{
    display:flex;
  }
  .player-loading-icon{
    display:inline-block;
    font-size:13px;
    animation:kw-spin 1s linear infinite;
  }
  @keyframes kw-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

  .card:fullscreen .player-message,
  .card:-webkit-full-screen .player-message{
    font-size:18px;
    background:rgba(0,0,0,.85);
  }
  .card:fullscreen .player-loading-icon,
  .card:-webkit-full-screen .player-loading-icon{
    font-size:28px;
  }


  .follow-import-panel{
    margin-top:14px;
    padding:14px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:rgba(255,255,255,.035);
  }
  .follow-import-title{
    font-size:13px;
    font-weight:800;
    margin-bottom:6px;
  }
  .follow-import-help{
    font-size:11px;
    line-height:1.55;
    opacity:.72;
    margin-bottom:10px;
  }
  .follow-import-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .follow-import-actions a,
  .follow-import-actions button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 12px;
    border-radius:8px;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
  }
  .follow-import-actions a{
    background:#53fc18;
    color:#000;
  }


  .follow-fetch-row{
    display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap;
  }
  #fetchFollowedBtn{
    min-height:34px; padding:0 12px; border-radius:8px; border:0;
    background:#53fc18; color:#000; font-weight:900; cursor:pointer;
  }
  .follow-status{font-size:11px;opacity:.72}

  .watch-item{
    display:grid !important;
    grid-template-columns:25px minmax(0,1fr) auto auto !important;
    align-items:center; gap:8px;
  }
  .watch-avatar,.watch-avatar-fallback{
    width:25px;height:25px;border-radius:50%;background:#242925;flex:none;
  }
  .watch-avatar{object-fit:cover}
  .watch-avatar-fallback{
    display:flex;align-items:center;justify-content:center;
    color:#dfe5e0;font-size:10px;font-weight:800;
  }
  .watch-main{min-width:0}
  .watch-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .watch-toggle{position:relative;width:38px;height:22px;flex:none}
  .watch-toggle input{position:absolute;opacity:0;pointer-events:none}
  .watch-toggle-track{
    display:block;width:38px;height:22px;border-radius:999px;
    background:#3b403c;cursor:pointer;transition:.18s ease;
  }
  .watch-toggle-track::after{
    content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;
    border-radius:50%;background:#fff;transition:.18s ease;
  }
  .watch-toggle input:checked + .watch-toggle-track{background:#53fc18}
  .watch-toggle input:checked + .watch-toggle-track::after{transform:translateX(16px)}


  .watch-item{
    display:grid !important;
    grid-template-columns:25px auto minmax(0,1fr) auto auto !important;
    align-items:center;
    gap:7px;
  }
  .watch-live-badge{
    display:none;
    align-items:center;
    gap:4px;
    font-size:9px;
    font-weight:900;
    color:#53fc18;
    white-space:nowrap;
  }
  .watch-live-badge.is-live{display:inline-flex}
  .watch-live-dot{
    width:6px;height:6px;border-radius:50%;
    background:#53fc18;
    box-shadow:0 0 7px rgba(83,252,24,.55);
  }
  .watchlist{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    overflow:auto;
    flex:1;
  }
  .watch-item{
    min-width:0;
    grid-template-columns:34px auto minmax(0,1fr) auto !important;
    grid-template-areas:"avatar live name actions";
    align-items:center;
    gap:7px;
    padding:10px;
    background:#1a1d22;
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
  }
  .watch-avatar,.watch-avatar-fallback{
    grid-area:avatar;
    width:34px;
    height:34px;
  }
  .watch-avatar-fallback{font-size:12px}
  .watch-main{grid-area:name;align-self:center}
  .watch-name{font-size:13px}
  .watch-live-badge{grid-area:live;align-self:center}
  .watch-actions{grid-area:actions;display:flex;align-items:center;gap:5px}
  .watch-actions .watch-toggle{align-self:center}
  .watch-actions .watch-remove{
    width:22px !important;height:22px !important;
    min-width:22px !important;min-height:22px !important;max-height:22px !important;
    padding:0;border-radius:5px;font-size:14px;line-height:1;
  }
  .watch-item.is-offline .watch-avatar{
    filter:grayscale(1) opacity(.55);
  }
  .watch-item.is-offline .watch-avatar-fallback{
    background:#444947;
    color:#c0c5c1;
  }
  @media(max-width:780px){
    .watchlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(max-width:540px){
    .watchlist{grid-template-columns:minmax(0,1fr)}
  }



  .search-wrap{position:relative;flex:1;min-width:0}
  .search-results{
    position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:120;
    display:none;max-height:min(52vh,420px);overflow:auto;
    background:#101410;border:1px solid rgba(255,255,255,.10);
    border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.45);
    padding:6px;
  }
  .search-results.open{display:block}
  .search-item{
    display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;
    padding:8px 10px;border-radius:10px;cursor:pointer;
  }
  .search-item:hover{background:rgba(255,255,255,.06)}
  .search-avatar,.search-avatar-placeholder{
    width:28px;height:28px;border-radius:50%;object-fit:cover;background:#262d28;display:grid;place-items:center;font-size:11px;font-weight:800;color:#e7ece8;
  }
  .search-item-name{font-size:13px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .search-empty{padding:14px 12px;font-size:12px;color:#b3beb6}

  dialog.picker-dialog{
    width:min(1220px,calc(100vw - 28px));
    max-width:1220px;
    max-height:calc(100vh - 28px);
    padding:0;border-radius:16px;overflow:hidden;background:#15181e;border:1px solid rgba(255,255,255,.10);
  }
  .picker-shell{display:flex;flex-direction:column;height:min(900px,calc(100vh - 28px));}
  .picker-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:22px 24px 14px;border-bottom:1px solid rgba(255,255,255,.10);
  }
  .picker-title-wrap{display:flex;align-items:center;gap:10px}
  .picker-title-icon{line-height:0;color:#aeb6b1;display:flex;align-items:center}
  .picker-title{font-size:22px;font-weight:900;letter-spacing:-.01em}
  .picker-close{
    width:38px;height:38px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);font-size:20px;line-height:1;padding:0;
  }
  .picker-close:hover{background:rgba(255,255,255,.12)}
  .picker-tabs{display:flex;align-items:center;gap:20px;padding:0 24px 0;margin-top:14px;border-bottom:1px solid rgba(255,255,255,.08)}
  .picker-tab{
    appearance:none;border:0;background:transparent;color:#7a827c;padding:10px 0 12px;min-height:auto;height:auto;font-size:14px;font-weight:800;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-2px;
  }
  .picker-tab:hover{color:#c0c8c2}
  .picker-tab.active{color:#f4f6f4;border-bottom-color:#53fc18}
  .picker-toolbar{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
    padding:14px 24px 16px;
  }
  .picker-search{position:relative}
  .picker-search input{
    height:42px;border-radius:10px;padding:0 14px 0 40px;background:#1a1d22;border:1px solid rgba(255,255,255,.10);
    font-size:14px;
  }
  .picker-search-icon{
    position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:16px;color:#8f9892;pointer-events:none;
  }
  .picker-filter{display:flex;align-items:center;gap:10px;color:#c9d0cb;font-size:13px;font-weight:700;white-space:nowrap}
  .picker-filter select{
    height:42px;border-radius:10px;background:#1a1d22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 10px center;-webkit-appearance:none;appearance:none;color:#fff;border:1px solid rgba(255,255,255,.10);padding:8px 28px 8px 12px;font-size:14px;font-weight:800;border-radius:8px;
  }
  .picker-section-row{display:flex;align-items:center;justify-content:space-between;padding:0 24px 10px}
  .picker-section-title{font-size:13px;color:#aeb6b1;font-weight:700}
  .picker-status{font-size:13px;color:#aeb6b1;display:flex;align-items:center;gap:8px;text-align:right}
  .picker-status strong{color:#fff}
  .picker-grid-wrap{padding:4px 24px 20px;overflow:auto;flex:1}
  .picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;align-content:start}
  .picker-card{
    background:#171a20;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;cursor:pointer;position:relative;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
  }
  .picker-card:hover{transform:translateY(-1px);border-color:rgba(83,252,24,.45);box-shadow:0 14px 28px rgba(0,0,0,.28)}
  .picker-card.selected{border-color:#53fc18;box-shadow:0 0 0 1px rgba(83,252,24,.25) inset}
  .picker-card.already-added{opacity:.65;cursor:default}
  .picker-thumb-wrap{position:relative;aspect-ratio:16/9;background:#0a0a0a;overflow:hidden}
  .picker-thumb{width:100%;height:100%;object-fit:cover;display:block}
  .picker-thumb-fallback{width:100%;height:100%;display:grid;place-items:center;color:#e4ebe5;font-size:34px;font-weight:900;background:linear-gradient(135deg,#0f1511,#1b211c)}
  .picker-viewers{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.78);border-radius:8px;padding:4px 7px;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:900}
  .picker-viewers .dot{width:6px;height:6px}
  .picker-check{position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:999px;background:rgba(0,0,0,.78);display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff;border:1px solid rgba(255,255,255,.08)}
  .picker-card.selected .picker-check{background:#53fc18;color:#071006}
  .picker-card.already-added .picker-check{background:rgba(0,0,0,.70);color:#fff;font-size:9px;width:auto;min-width:24px;padding:0 6px;border-radius:999px}
  .picker-meta{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:center;padding:7px 9px 8px}
  .picker-avatar,.picker-avatar-fallback{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#252b28;display:grid;place-items:center;color:#ebefeb;font-size:11px;font-weight:800}
  .picker-name{font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .picker-sub{font-size:11px;color:#aeb6b1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .picker-live-line{display:flex;align-items:center;gap:8px;min-width:0}
  .picker-live-tag{display:inline-flex;align-items:center;gap:5px;color:#53fc18;font-size:10px;font-weight:900;white-space:nowrap}
  .picker-live-tag .dot{width:6px;height:6px}
  .picker-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;border-top:1px solid rgba(255,255,255,.10)}
  .picker-actions-left{font-size:12px;color:#aeb6b1}
  .picker-actions-right{display:flex;gap:10px;align-items:center}
  .picker-load-more{padding:0 16px}
  .picker-empty{padding:36px 18px;border:1px dashed rgba(255,255,255,.10);border-radius:16px;text-align:center;color:#aab2ac;background:rgba(255,255,255,.02)}

  @media(max-width:780px){
    dialog.picker-dialog{width:calc(100vw - 12px);max-height:calc(100vh - 12px)}
    .picker-shell{height:calc(100vh - 12px)}
    .picker-toolbar{grid-template-columns:1fr;gap:10px}
    .picker-filter{justify-content:space-between}
    .picker-grid{grid-template-columns:1fr}
    .picker-actions{flex-direction:column;align-items:stretch}
    .picker-actions-right{width:100%;display:grid;grid-template-columns:1fr 1fr}
    .picker-actions-right button{width:100%}
  }


  /* v2 header: no top search form; Add is the rightmost control */
  header{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    padding:9px 12px !important;
  }
  header .brand{
    position:static !important;
    transform:none !important;
    margin-right:auto !important;
  }
  header .status{
    position:static !important;
    transform:none !important;
    /* See the later "rebuilt header" .status rule for why this isn't
       margin-left:auto -- same reasoning applies here (this block is
       superseded by that one for every OTHER property, but CSS cascades
       per-property, so leaving margin-left:auto here alone would still
       win since the later rule no longer declares it at all). */
    max-width:280px;
  }
  #refreshBtn,
  #settingsBtn,
  #addBtn{
    position:static !important;
    transform:none !important;
    flex:none !important;
  }
  #addBtn{
    order:99;
    width:max-content;min-width:0;
    font-weight:900;
  }
  #channelInput{
    display:none !important;
  }
  @media(max-width:700px){
    :root{--header-h:58px}
    header{height:var(--header-h) !important;flex-wrap:nowrap !important}
    header .status{display:none !important}
  }


  /* rebuilt header */
  header{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    padding:9px 12px !important;
    transition:
      transform .36s cubic-bezier(.22,.8,.24,1),
      opacity .28s ease !important;
    will-change:transform,opacity;
  }
  header .brand{
    position:static !important;
    transform:none !important;
    margin-right:auto !important;
  }
  header .status{
    position:static !important;
    transform:none !important;
    /* NOT margin-left:auto -- with .focus-indicator now sitting between
       .brand and .status in the DOM, an auto margin here claimed its own
       share of free space independently of .brand's margin-right:auto,
       splitting one gap into two (a big gap after the logo, a second big
       gap before the "閲覧中" counter, stranding the pin badge in between).
       .brand's own margin-right:auto is already enough on its own to push
       the entire rest of the header -- focus-indicator, status, icons,
       addBtn -- flush right as one adjacent cluster. */
    max-width:280px;
  }
  #refreshBtn,#settingsBtn,#addBtn{
    position:static !important;
    transform:none !important;
    flex:none !important;
  }
  #addBtn{order:99;width:max-content;min-width:0;font-weight:900}
  #channelInput{display:none !important}
  .top-icon-btn{
    width:40px !important;height:40px !important;min-width:40px !important;
    max-width:40px !important;min-height:40px !important;max-height:40px !important;
    padding:7px !important;display:grid !important;place-items:center !important;
    border-radius:10px !important;box-sizing:border-box !important;
  }
  .top-icon-btn svg{
    width:24px;height:24px;display:block;fill:none;stroke:currentColor;
    stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  }
  .top-icon-btn .random-icon{
    width:28px !important;
    height:21px !important;
    fill:none;
    stroke:none;
  }
  .top-icon-btn .random-icon .shuffle-line{
    fill:none;
    stroke:currentColor;
    stroke-width:31;
    stroke-linejoin:round;
  }
  .top-icon-btn .random-icon .shuffle-arrow{
    fill:currentColor;
    stroke:none;
  }
  .top-icon-btn.random-active,
  .top-icon-btn.settings-active{
    color:var(--kick) !important;
    border-color:rgba(83,252,24,.72) !important;
  }
  body.header-hidden header{
    transform:translateY(calc(-100% - 3px)) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  @media(max-width:700px){
    :root{--header-h:58px}
    header{height:var(--header-h) !important;flex-wrap:nowrap !important}
    header .status{display:none !important}
  }




  /* Mobile: keep all primary controls reachable in a bottom bar. */
  @media(max-width:700px){
    :root{--header-h:52px}
    header{
      position:fixed !important;
      left:0 !important;
      right:0 !important;
      top:auto !important;
      bottom:0 !important;
      width:100% !important;
      height:var(--header-h) !important;
      min-height:var(--header-h) !important;
      padding:4px 6px !important;
      justify-content:center !important;
      gap:4px !important;
      background:rgba(11,13,12,.97) !important;
      border-top:1px solid var(--line) !important;
      border-bottom:0 !important;
      z-index:100 !important;
    }
    header .brand{
      display:flex !important;
      align-items:center !important;
      gap:5px !important;
      margin-right:0 !important;
      font-size:11px !important;
    }
    header .brand .logo{
      width:20px !important;
      height:20px !important;
      border-radius:5px !important;
      font-size:11px !important;
    }
    header .status{
      display:none !important;
    }
    #refreshBtn,
    #settingsBtn,
    #addBtn,
    #uniformLayoutBtn,
    #randomPlayBtn,
    #chatPanelBtn{
      position:static !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      flex:0 0 auto !important;
      transform:none !important;
    }
    .top-icon-btn{
      width:36px !important;
      height:36px !important;
      min-width:36px !important;
      max-width:36px !important;
      min-height:36px !important;
      max-height:36px !important;
      padding:6px !important;
      border-radius:8px !important;
    }
    #addBtn{
      height:41px !important;
      min-height:41px !important;
      max-height:41px !important;
      padding:0 9px !important;
      border-radius:5px !important;
    }
    #grid{
      top:0 !important;
      bottom:auto !important;
      height:calc(100vh - var(--header-h)) !important;
      min-height:0 !important;
    }
    body.header-hidden header{
      transform:translateY(calc(100% + 3px)) !important;
    }
  }

  /* Portrait phones: identity/status at top, controls at bottom. */
  @media(max-width:700px) and (orientation:portrait){
    :root{--header-h:52px}
    header{
      position:relative !important;
      top:auto !important;
      bottom:auto !important;
      height:var(--header-h) !important;
      min-height:var(--header-h) !important;
      padding:6px 8px !important;
      justify-content:flex-start !important;
      background:rgba(11,13,12,.97) !important;
      border-top:0 !important;
      border-bottom:1px solid var(--line) !important;
      z-index:100 !important;
    }
    header .brand{
      display:flex !important;
      margin-right:auto !important;
      gap:4px !important;
      font-size:10px !important;
    }
    header .brand .logo{
      width:18px !important;
      height:18px !important;
      border-radius:4px !important;
      font-size:10px !important;
    }
    header .status{
      display:inline-flex !important;
      max-width:180px !important;
      font-size:10px !important;
      margin-right:4px !important;
    }
    header::after{
      content:"";
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      height:52px;
      background:rgba(11,13,12,.97);
      border-top:1px solid var(--line);
      z-index:-1;
      pointer-events:none;
    }
    #refreshBtn,
    #settingsBtn,
    #addBtn,
    #uniformLayoutBtn,
    #randomPlayBtn,
    #chatPanelBtn{
      position:fixed !important;
      bottom:8px !important;
      top:auto !important;
      transform:none !important;
      z-index:101 !important;
    }
    #refreshBtn{left:6px}
    #uniformLayoutBtn{left:42px}
    #randomPlayBtn{left:78px}
    #chatPanelBtn{left:114px}
    #settingsBtn{right:42px}
    #addBtn{right:6px}
    .top-icon-btn{
      width:32px !important;
      height:32px !important;
      min-width:32px !important;
      max-width:32px !important;
      min-height:32px !important;
      max-height:32px !important;
      padding:5px !important;
      border-radius:7px !important;
    }
    #addBtn{
      height:32px !important;
      min-height:32px !important;
      max-height:32px !important;
      padding:0 7px !important;
      font-size:11px !important;
    }
    #grid{
      top:auto !important;
      bottom:auto !important;
      height:calc(100vh - var(--header-h) - 52px) !important;
      min-height:0 !important;
    }
    body.header-hidden header{
      transform:none !important;
      opacity:1 !important;
      pointer-events:auto !important;
    }
  }

  /* Landscape phones: use the same top-row placement as desktop. */
  @media(max-width:700px) and (orientation:landscape){
    :root{--header-h:58px}
    header{
      position:relative !important;
      top:auto !important;
      bottom:auto !important;
      height:var(--header-h) !important;
      min-height:var(--header-h) !important;
      padding:9px 12px !important;
      justify-content:flex-start !important;
      gap:8px !important;
      background:rgba(11,13,12,.97) !important;
      border-top:0 !important;
      border-bottom:1px solid var(--line) !important;
    }
    header .brand{
      display:flex !important;
      margin-right:auto !important;
      font-size:12px !important;
    }
    header .brand .logo{
      width:25px !important;
      height:25px !important;
      border-radius:7px !important;
      font-size:14px !important;
    }
    header .status{
      display:inline-flex !important;
      max-width:190px !important;
      font-size:10px !important;
      margin-right:0 !important;
    }
    header::after{display:none !important}
    #refreshBtn,
    #settingsBtn,
    #addBtn,
    #uniformLayoutBtn,
    #randomPlayBtn,
    #chatPanelBtn{
      position:static !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      transform:none !important;
      z-index:auto !important;
    }
    .top-icon-btn{
      width:36px !important;
      height:36px !important;
      min-width:36px !important;
      max-width:36px !important;
      min-height:36px !important;
      max-height:36px !important;
      padding:6px !important;
    }
    #grid{
      top:auto !important;
      bottom:auto !important;
      height:calc(100vh - var(--header-h)) !important;
      min-height:0 !important;
    }
  }

  .stream-overflow-indicator{
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:30;
    min-width:42px;
    height:28px;
    padding:0 9px;
    border-radius:999px;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.78);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    font-size:11px;
    font-weight:900;
    pointer-events:none;
  }
  .stream-overflow-indicator.visible{display:flex}


  /* v6.12: board dimensions are chosen dynamically and the occupied block is centered.
     The koma group is centered horizontally and vertically in the usable viewport.
     v6.9: board dimensions are chosen dynamically.
     A single logical koma remains 16:9; board rows/columns adapt to the window. */
  #grid{
    position:relative;
    overflow:hidden;
    background-color:#080a09;
  }

  /* #grid geometry (width/height/margin) is never eased. Any header
     show/hide animation must come from the header element's own
     transform/opacity transition only -- easing grid geometry caused a
     transient aspect-ratio mismatch, tile drift, and resize recompute
     races while it animated. */

  .card video{
    object-fit:cover;
  }


  /* The icon shows the CURRENT mode: the 2x2 grid while uniform (均等表示)
     is active, the two-overlapping-windows icon while adaptive
     (閲覧数別表示) is active. */
  #sortModeBtn{order:0}
  #sortModeBtn.active{}
  #sortModeBtn .sort-icon{width:24px;height:24px;display:none;place-self:center;object-fit:contain;filter:invert(1)}
  #sortModeBtn .sort-icon-viewers{display:block}
  #sortModeBtn.active .sort-icon-viewers{display:none}
  #sortModeBtn.active .sort-icon-active{display:block}
  #uniformLayoutBtn.active .icon-uniform{display:block}
  #uniformLayoutBtn.active .icon-adaptive{display:none}
  #uniformLayoutBtn:not(.active) .icon-uniform{display:none}
  #uniformLayoutBtn:not(.active) .icon-adaptive{display:block}


  .card[data-sub-tier^="micro"] .meta,
  .card[data-sub-tier^="micro"] .bottom-controls{
    display:none !important;
  }
  .card[data-sub-tier^="micro"] .remove{
    display:none !important;
  }
  .card[data-sub-tier^="micro"]:hover .remove{
    display:block !important;
  }


  /* v6.21: channel name and viewer count overlays removed */
  .card .meta,
  .card .viewers,
  .card .name{
    display:none !important;
  }


  /* v6.23: whole-tile click restores "最大表示・音声ON". */
  .focus-overlay{
    position:absolute;
    inset:0;
    z-index:18;
    cursor:pointer;
    background:transparent;
  }

  /* The KICK iframe is never exposed directly in adaptive mode.
     This prevents its internal controls from changing audio state. */
  .card.is-main .focus-overlay{
    display:block;
  }

  .card:hover{
    z-index:4;
  }

  /* Keep our controls above the click overlay. */
  .card .remove,
  .card .bottom-controls{
    z-index:30;
  }


  /* v6.24: never dim stream video/iframe because of tile size or hover state. */
  .card iframe,
  .card video,
  .card.small iframe,
  .card.medium iframe,
  .card.tiny iframe,
  .card.small video,
  .card.medium video,
  .card.tiny video{
    opacity:1 !important;
    filter:none !important;
  }


  /* v6.36: iframe pointer events stay disabled.
     All interaction is handled by our own stable overlay UI. */


  .card.focus-pending{
    outline:2px solid rgba(83,252,24,.85) !important;
  }


  .pulse-ui{
    position:absolute;
    inset:0;
    z-index:24;
    pointer-events:none;
    opacity:0;
    transition:opacity .12s ease;
  }
  .card:hover .pulse-ui{
    opacity:1;
  }

  /* Speech-bubble tooltip shown immediately on hover, for cards whose tier
     hides .pulse-name/.pulse-title outright to save space (tiny/micro) --
     this is the only way to read the channel name/title on them.
     position:fixed + appended to <body> so it escapes each card's own
     overflow:hidden and z-index stack. */
  .card-hover-tooltip{
    position:fixed;
    z-index:60;
    max-width:320px;
    padding:8px 10px;
    border-radius:8px;
    background:#0f110f;
    border:1.5px solid var(--kick);
    box-shadow:0 0 12px rgba(83,252,24,.4),0 10px 26px rgba(0,0,0,.5);
    color:var(--text);
    font-size:12px;
    line-height:1.4;
    pointer-events:none;
    opacity:0;
    transform:translateY(4px);
    transition:opacity .14s ease,transform .14s ease;
  }
  .card-hover-tooltip.visible{opacity:1;transform:translateY(0)}
  /* Bordered speech-bubble tail: a slightly larger triangle in the border
     color sits behind a slightly smaller one in the background color,
     giving the small arrow its own visible green outline instead of just
     blending into the box. Default (::before/::after with no "below"
     class) points down, i.e. the tooltip sits ABOVE the card. */
  .card-hover-tooltip::before,
  .card-hover-tooltip::after{
    content:"";
    position:absolute;
    left:50%;
    margin-left:-8px;
    border:8px solid transparent;
  }
  .card-hover-tooltip::before{
    bottom:-15px;
    border-top-color:var(--kick);
  }
  .card-hover-tooltip::after{
    bottom:-12px;
    margin-left:-6.5px;
    border-width:6.5px;
    border-top-color:#0f110f;
  }
  .card-hover-tooltip.tooltip-below::before{
    bottom:auto;
    top:-15px;
    border-top-color:transparent;
    border-bottom-color:var(--kick);
  }
  .card-hover-tooltip.tooltip-below::after{
    bottom:auto;
    top:-12px;
    border-top-color:transparent;
    border-bottom-color:#0f110f;
  }
  .card-hover-tooltip-name{
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .card-hover-tooltip-title{
    margin-top:3px;
    color:var(--muted);
    overflow-wrap:break-word;
  }
  .card-hover-tooltip-title[hidden]{display:none}

  .card-hover-tooltip.tooltip-left::before,
  .card-hover-tooltip.tooltip-left::after{
    left:auto;
    right:-15px;
    top:50%;
    bottom:auto;
    margin-left:0;
    margin-top:-8px;
    border:8px solid transparent;
  }
  .card-hover-tooltip.tooltip-left::before{
    border-left-color:var(--kick);
    border-top-color:transparent;
    border-bottom-color:transparent;
    right:-16px;
  }
  .card-hover-tooltip.tooltip-left::after{
    border-width:6.5px;
    border-left-color:#0f110f;
    border-top-color:transparent;
    border-bottom-color:transparent;
    right:-13px;
    margin-top:-6.5px;
  }
  .card-hover-tooltip.tooltip-right::before,
  .card-hover-tooltip.tooltip-right::after{
    left:-15px;
    right:auto;
    top:50%;
    bottom:auto;
    margin-left:0;
    margin-top:-8px;
    border:8px solid transparent;
  }
  .card-hover-tooltip.tooltip-right::before{
    border-right-color:var(--kick);
    border-top-color:transparent;
    border-bottom-color:transparent;
    left:-16px;
  }
  .card-hover-tooltip.tooltip-right::after{
    border-width:6.5px;
    border-right-color:#0f110f;
    border-top-color:transparent;
    border-bottom-color:transparent;
    left:-13px;
    margin-top:-6.5px;
  }

  .pulse-top{
    position:absolute;
    left:8px;
    top:7px;
    display:flex;
    align-items:center;
    gap:6px;
    max-width:calc(100% - 48px);
    pointer-events:none;
  }
  .pulse-pill{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 8px;
    border-radius:6px;
    background:rgba(16,16,16,.82);
    border:1px solid rgba(255,255,255,.13);
    color:#fff;
    font-size:11px;
    font-weight:750;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .pulse-name{padding-left:0;overflow:visible}
  .pulse-live{
    background:#ff1744;
    color:#fff;
    font-weight:900;
    font-size:10px;
    padding:0 7px;
    border-radius:5px 0 0 5px;
    margin:-1px 7px -1px -1px;
    flex-shrink:0;
    align-self:stretch;
    display:inline-flex;
    align-items:center;
  }
  .pulse-viewers::before{
    content:"●";
    color:var(--kick);
    font-size:8px;
    margin-right:0;
  }
  .pulse-viewers{
    gap:2px;
    font-weight:400;
  }
  .pulse-metric-number{
    font-weight:800;
    font-variant-numeric:tabular-nums;
  }
  .pulse-metric-label{
    color:rgba(255,255,255,.82);
    font-weight:400;
    margin-left:2px;
  }
  .pulse-metric-divider{
    width:1px;
    height:.9em;
    margin:0 3px;
    flex:0 0 1px;
    background:rgba(255,255,255,.42);
  }
  .pulse-metric-group{display:inline-flex;align-items:center;min-width:0}
  /* Added only when the actual metric width exceeds this tile's top row. */
  .card.metric-wrap .pulse-viewers{
    flex-wrap:wrap;
    align-content:center;
    column-gap:0;
    row-gap:1px;
    padding:2px 0;
  }
  .card.metric-wrap .pulse-metric-divider{display:none}
  .card.metric-wrap .pulse-metric-secondary{
    flex:0 0 calc(100% - 10px);
    margin-left:10px;
  }

  .pulse-bottom{
    position:absolute;
    left:8px;
    right:8px;
    bottom:8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
  }
  .pulse-title-group{
    min-width:0;
    max-width:65%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
  }
  .pulse-quality{
    font-size:10px;
    font-weight:700;
    color:#53fc18;
    background:rgba(0,0,0,.70);
    padding:1px 6px;
    border-radius:4px;
    pointer-events:none;
  }
  .pulse-quality:empty{display:none}
  .pulse-title{
    min-width:0;
    padding:6px 8px;
    border-radius:6px;
    background:rgba(0,0,0,.70);
    color:#fff;
    font-size:10px;
    line-height:1.2;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .pulse-actions{
    margin-left:auto;
    display:flex;
    gap:5px;
    align-items:center;
    pointer-events:auto;
  }
  .pulse-action{
    min-width:30px;
    height:30px;
    padding:0 8px;
    border-radius:7px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(0,0,0,.78);
    color:#fff;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
  }
  .pulse-action:hover{
    background:rgba(34,40,36,.94);
  }
  .pulse-action.audio-on{
    color:#071006;
    background:var(--kick);
    border-color:var(--kick);
  }
  .pulse-action.sub-audio-on{
    color:#071006;
    background:var(--kick);
    border-color:var(--kick);
  }

  /* Old bottom controls are replaced by the custom overlay UI. */
  .bottom-controls{
    display:none !important;
  }

  .card.small .pulse-category,
  .card.small .pulse-elapsed,
  .card.tiny .pulse-category,
  .card.tiny .pulse-elapsed,
  .card.tiny .pulse-name,
  .card.tiny .pulse-title{
    display:none;
  }
  .card.small .pulse-metric-label,
  .card.small .pulse-metric-secondary,
  .card.small .pulse-metric-divider,
  .card.tiny .pulse-metric-label,
  .card.tiny .pulse-metric-secondary,
  .card.tiny .pulse-metric-divider{
    display:none;
  }
  .card.tiny .pulse-top{
    left:4px;
    top:4px;
    gap:3px;
  }
  .card.tiny .pulse-pill{
    min-height:18px;
    padding:0 5px;
    font-size:8px;
  }
  .card.tiny .pulse-bottom{
    left:4px;
    right:4px;
    bottom:4px;
  }
  .card.tiny .pulse-action{
    min-width:22px;
    width:22px;
    height:22px;
    padding:0;
    font-size:9px;
  }


  /* v6.37: every custom control, including close, is hover-only. */
  .card .remove{
    opacity:0 !important;
    pointer-events:none !important;
  }
  .card:hover .remove{
    opacity:1 !important;
    pointer-events:auto !important;
  }


  .favorite-card{
    cursor:default;
  }
  .favorite-card.already-added{
    opacity:1 !important;
  }
  .favorite-live{
    cursor:pointer;
  }
  .favorite-live-tag{
    position:absolute;
    right:12px;
    top:12px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:6px 9px;
    border-radius:9px;
    background:rgba(0,0,0,.78);
    color:#53fc18;
    font-size:11px;
    font-weight:900;
  }
  .favorite-meta{
    grid-template-columns:40px minmax(0,1fr) auto !important;
  }
  .favorite-copy{
    min-width:0;
  }
  .favorite-offline{
    min-height:0;
  }
  .favorite-compact{
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:11px;
  }
  .favorite-avatar{
    width:40px !important;
    height:40px !important;
  }
  .favorite-compact-name{
    min-width:0;
    font-size:14px;
    font-weight:850;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .favorite-toggle{
    z-index:5;
  }

  .picker-thumb-channel-fallback{
    object-fit:cover;
    filter:brightness(.72);
    transform:scale(1.04);
  }

  /* v6.39: compact custom UI for tiny / micro tiles. */
  .card.tiny .pulse-ui{
    font-size:7px;
  }

  .card.tiny .pulse-top{
    left:2px;
    right:2px;
    top:2px;
    gap:2px;
    max-width:calc(100% - 4px);
  }

  .card.tiny .pulse-pill{
    min-height:14px;
    padding:0 3px;
    border-radius:3px;
    font-size:6px;
    letter-spacing:-.02em;
  }

  .card.tiny .pulse-name{
    max-width:42%;
  }

  .card.tiny .pulse-viewers{
    max-width:58%;
  }

  .card.tiny .pulse-viewers::before{
    font-size:5px;
    margin-right:2px;
  }

  .card.tiny .pulse-live{
    display:none;
  }

  .card.tiny .pulse-bottom{
    left:2px;
    right:2px;
    bottom:2px;
    gap:2px;
  }

  .card.tiny .pulse-actions{
    gap:2px;
  }

  .card.tiny .pulse-action{
    min-width:17px;
    width:17px;
    height:17px;
    padding:0;
    border-radius:3px;
    font-size:7px;
  }

  .card.tiny .remove{
    right:2px !important;
    top:2px !important;
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    font-size:10px !important;
  }

  /* The ultra-small sub tiers need even tighter typography.
     Keep only channel ID + viewers readable. */
  .card[data-sub-tier="micro8"] .pulse-pill,
  .card[data-sub-tier="micro10"] .pulse-pill{
    min-height:12px;
    padding:0 2px;
    font-size:5.5px;
  }

  .card[data-sub-tier="micro20"] .pulse-pill,
  .card[data-sub-tier="micro50"] .pulse-pill,
  .card[data-sub-tier="micro80"] .pulse-pill{
    min-height:10px;
    padding:0 2px;
    font-size:5px;
  }

  .card[data-sub-tier^="micro"] .pulse-category,
  .card[data-sub-tier^="micro"] .pulse-elapsed,
  .card[data-sub-tier^="micro"] .pulse-title{
    display:none !important;
  }

  .card[data-sub-tier^="micro"] .pulse-name{
    display:inline-flex !important;
    max-width:54%;
  }

  .card[data-sub-tier^="micro"] .pulse-viewers{
    display:inline-flex !important;
    max-width:42%;
  }

  .card[data-sub-tier="micro20"] .pulse-actions,
  .card[data-sub-tier="micro50"] .pulse-actions,
  .card[data-sub-tier="micro80"] .pulse-actions{
    display:none;
  }

  .card[data-sub-tier="micro20"] .remove,
  .card[data-sub-tier="micro50"] .remove,
  .card[data-sub-tier="micro80"] .remove{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    font-size:10px !important;
  }



  /* v6.40: pixel-aware compact UI for smaller cards.
     This is more reliable than only relying on tier names. */
  .card.ui-compact .pulse-top,
  .card.ui-mini .pulse-top,
  .card.ui-micro .pulse-top{
    left:3px;
    right:24px;
    top:3px;
    gap:3px;
    max-width:calc(100% - 30px);
  }

  .card.ui-compact .pulse-pill{
    min-height:18px;
    padding:0 5px;
    border-radius:4px;
    font-size:7.5px;
  }
  .card.ui-compact .pulse-viewers::before{
    font-size:6px;
    margin-right:3px;
  }
  .card.ui-compact .pulse-title{
    max-width:42%;
    padding:4px 6px;
    font-size:8px;
  }
  .card.ui-compact .pulse-bottom{
    left:3px;
    right:3px;
    bottom:3px;
    gap:3px;
  }
  .card.ui-compact .pulse-actions{gap:3px;}
  .card.ui-compact .pulse-action{
    min-width:22px;
    width:22px;
    height:22px;
    padding:0 4px;
    border-radius:4px;
    font-size:8px;
  }
  .card.ui-compact .remove{
    right:3px !important;
    top:3px !important;
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    font-size:10px !important;
  }
  .card.ui-compact .pulse-name{max-width:32%;}
  .card.ui-compact .pulse-viewers{max-width:50%;}
  .card.ui-compact .pulse-category{max-width:22%;}
  .card.ui-compact .pulse-elapsed{max-width:18%;}

  .card.ui-mini .pulse-pill{
    min-height:15px;
    padding:0 4px;
    border-radius:4px;
    font-size:6.5px;
  }
  .card.ui-mini .pulse-live,
  .card.ui-mini .pulse-category,
  .card.ui-mini .pulse-elapsed{
    display:none !important;
  }
  .card.ui-compact .pulse-metric-label,
  .card.ui-compact .pulse-metric-secondary,
  .card.ui-compact .pulse-metric-divider,
  .card.ui-mini .pulse-metric-label,
  .card.ui-mini .pulse-metric-secondary,
  .card.ui-mini .pulse-metric-divider,
  .card.ui-micro .pulse-metric-label,
  .card.ui-micro .pulse-metric-secondary,
  .card.ui-micro .pulse-metric-divider{
    display:none !important;
  }
  .card.ui-mini .pulse-name{max-width:48%;}
  .card.ui-mini .pulse-viewers{max-width:58%;}
  .card.ui-mini .pulse-viewers::before{
    font-size:5px;
    margin-right:2px;
  }
  .card.ui-mini .pulse-title{
    max-width:34%;
    padding:3px 5px;
    font-size:7px;
    line-height:1.1;
  }
  .card.ui-mini .pulse-bottom{
    left:2px;
    right:2px;
    bottom:2px;
    gap:2px;
  }
  .card.ui-mini .pulse-actions{gap:2px;}
  .card.ui-mini .pulse-action{
    min-width:18px;
    width:18px;
    height:18px;
    padding:0;
    border-radius:3px;
    font-size:7px;
  }
  .card.ui-mini .remove{
    right:2px !important;
    top:2px !important;
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    font-size:10px !important;
  }

  .card.ui-micro .pulse-top{
    right:18px;
    max-width:calc(100% - 21px);
  }
  .card.ui-micro .pulse-pill{
    min-height:12px;
    padding:0 3px;
    border-radius:3px;
    font-size:5.5px;
  }
  .card.ui-micro .pulse-live,
  .card.ui-micro .pulse-category,
  .card.ui-micro .pulse-elapsed,
  .card.ui-micro .pulse-title,
  .card.ui-micro .pulse-refresh,
  .card.ui-micro .pulse-open{
    display:none !important;
  }
  .card.ui-micro .pulse-name{max-width:54%;}
  .card.ui-micro .pulse-viewers{max-width:40%;}
  .card.ui-micro .pulse-viewers::before{
    font-size:4px;
    margin-right:2px;
  }
  .card.ui-micro .pulse-bottom{
    left:2px;
    right:2px;
    bottom:2px;
    justify-content:flex-end;
    gap:2px;
  }
  .card.ui-micro .pulse-actions{gap:2px;}
  .card.ui-micro .pulse-action{
    min-width:16px;
    width:16px;
    height:16px;
    padding:0;
    border-radius:3px;
    font-size:6px;
  }
  .card.ui-micro .remove{
    right:1px !important;
    top:1px !important;
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    font-size:10px !important;
  }


  /* v6.41: keep bottom action buttons horizontal and compact. */
  .pulse-actions{
    flex-wrap:nowrap !important;
    white-space:nowrap;
  }

  .pulse-action{
    box-sizing:border-box;
    flex:0 0 auto;
    width:30px;
    min-width:30px;
    height:30px;
    padding:0 !important;
    display:inline-grid;
    place-items:center;
    line-height:1;
  }

  .pulse-audio{
    width:auto !important;
    min-width:54px !important;
    padding:0 8px !important;
  }

  .card.ui-compact .pulse-action{
    width:22px !important;
    min-width:22px !important;
    height:22px !important;
    padding:0 !important;
  }

  .card.ui-compact .pulse-audio{
    width:auto !important;
    min-width:46px !important;
    padding:0 6px !important;
  }

  .card.ui-mini .pulse-action{
    width:18px !important;
    min-width:18px !important;
    height:18px !important;
    padding:0 !important;
  }

  .card.ui-mini .pulse-audio{
    width:auto !important;
    min-width:39px !important;
    padding:0 4px !important;
    font-size:6.5px !important;
  }

  .card.ui-micro .pulse-action{
    width:16px !important;
    min-width:16px !important;
    height:16px !important;
    padding:0 !important;
  }

  .card.ui-micro .pulse-audio{
    width:auto !important;
    min-width:34px !important;
    padding:0 3px !important;
    font-size:5.5px !important;
  }

  /* With MAX removed, give the title a little more room. */
  .pulse-title{
    max-width:72%;
  }
  .card.ui-compact .pulse-title{
    max-width:50%;
  }
  .card.ui-mini .pulse-title{
    max-width:42%;
  }


  /* v6.42: override the global 36px button min/max height.
     Without this, compact stream controls become vertical rectangles. */
  .pulse-action{
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
  }

  .pulse-audio{
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
  }

  .card.ui-compact .pulse-action{
    width:22px !important;
    min-width:22px !important;
    max-width:22px !important;
    height:22px !important;
    min-height:22px !important;
    max-height:22px !important;
  }

  .card.ui-compact .pulse-audio{
    width:auto !important;
    min-width:46px !important;
    max-width:none !important;
    height:22px !important;
    min-height:22px !important;
    max-height:22px !important;
  }

  .card.ui-mini .pulse-action{
    width:18px !important;
    min-width:18px !important;
    max-width:18px !important;
    height:18px !important;
    min-height:18px !important;
    max-height:18px !important;
  }

  .card.ui-mini .pulse-audio{
    width:auto !important;
    min-width:39px !important;
    max-width:none !important;
    height:18px !important;
    min-height:18px !important;
    max-height:18px !important;
  }

  .card.ui-micro .pulse-action{
    width:16px !important;
    min-width:16px !important;
    max-width:16px !important;
    height:16px !important;
    min-height:16px !important;
    max-height:16px !important;
  }

  .card.ui-micro .pulse-audio{
    width:auto !important;
    min-width:34px !important;
    max-width:none !important;
    height:16px !important;
    min-height:16px !important;
    max-height:16px !important;
  }

  .pulse-bottom{
    align-items:flex-end !important;
  }


  /* v6.43: make the fullscreen card actually fill the screen. */
  .card:fullscreen,
  .card:-webkit-full-screen{
    position:fixed !important;
    inset:0 !important;
    left:0 !important;
    top:0 !important;
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:#000 !important;
  }
  .card:fullscreen::after,
  .card:-webkit-full-screen::after{
    border-color:transparent !important;
    box-shadow:none !important;
  }

  .card:fullscreen .player-viewport,
  .card:-webkit-full-screen .player-viewport{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }

  /* Give KICK the real fullscreen dimensions instead of a scaled 480x270
     surface.  This lets the official player use the whole fullscreen area. */
  .card:fullscreen .player-stage,
  .card:-webkit-full-screen .player-stage,
  .card:fullscreen .player-stage iframe,
  .card:-webkit-full-screen .player-stage iframe,
  .card:fullscreen .player-stage video,
  .card:-webkit-full-screen .player-stage video{
    position:absolute !important;
    inset:0 !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
  }

  .card:fullscreen .pulse-ui,
  .card:-webkit-full-screen .pulse-ui{
    z-index:60;
  }

  .card:fullscreen .remove,
  .card:-webkit-full-screen .remove{
    display:none !important;
  }

  .card:fullscreen.sub-audio::after,
  .card:-webkit-full-screen.sub-audio::after{
    border-color:transparent;
  }


  /* v6.44: keep the per-stream close button perfectly square. */
  .card .remove{
    box-sizing:border-box !important;
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    padding:0 !important;
    line-height:1 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:999px !important;
  }

  .card.ui-compact .remove{
    width:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    height:20px !important;
    min-height:20px !important;
    max-height:20px !important;
  }

  .card.ui-mini .remove{
    width:17px !important;
    min-width:17px !important;
    max-width:17px !important;
    height:17px !important;
    min-height:17px !important;
    max-height:17px !important;
  }

  .card.ui-micro .remove{
    width:15px !important;
    min-width:15px !important;
    max-width:15px !important;
    height:15px !important;
    min-height:15px !important;
    max-height:15px !important;
  }


  /* v6.45: AUDIO/MUTED text replaced by compact speaker icons. */
  .pulse-audio{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    padding:0 !important;
  }

  .pulse-audio-icon{
    display:block;
    width:17px;
    height:17px;
    pointer-events:none;
  }

  .pulse-audio.audio-on{
    color:#071006;
    background:var(--kick);
    border-color:var(--kick);
  }

  .card.ui-compact .pulse-audio{
    width:22px !important;
    min-width:22px !important;
    max-width:22px !important;
    padding:0 !important;
  }
  .card.ui-compact .pulse-audio-icon{
    width:13px;
    height:13px;
  }

  .card.ui-mini .pulse-audio{
    width:18px !important;
    min-width:18px !important;
    max-width:18px !important;
    padding:0 !important;
  }
  .card.ui-mini .pulse-audio-icon{
    width:11px;
    height:11px;
  }

  .card.ui-micro .pulse-audio{
    width:16px !important;
    min-width:16px !important;
    max-width:16px !important;
    padding:0 !important;
  }
  .card.ui-micro .pulse-audio-icon{
    width:10px;
    height:10px;
  }

  /* Readability floor: below 8px is not usable for stream metadata.
     Reduce what is shown on tiny cards instead of shrinking text further. */
  .pulse-pill{font-size:12px}
  .pulse-title{font-size:11px}
  .card.ui-compact .pulse-pill,.card.ui-compact .pulse-title{font-size:8px !important}
  .card.ui-mini .pulse-pill,.card.ui-mini .pulse-title{font-size:8px !important}
  .card.ui-micro .pulse-pill{font-size:8px !important}
  .card.ui-micro .pulse-name{display:none !important}
  .card.ui-micro .pulse-viewers{max-width:100% !important}
  .card.ui-compact .pulse-viewers::before,.card.ui-mini .pulse-viewers::before,.card.ui-micro .pulse-viewers::before{font-size:8px !important}

  /* Larger, touch-friendly overlay controls. */
  .pulse-action{width:36px !important;min-width:36px !important;height:36px !important;min-height:36px !important;max-height:36px !important;font-size:16px !important}
  .pulse-open-icon{width:1em;height:1em;vertical-align:middle;fill:currentColor}
  .pulse-audio{width:36px !important;min-width:36px !important;max-width:36px !important;height:36px !important;min-height:36px !important;max-height:36px !important}
  .pulse-audio-icon{width:20px;height:20px}
  .card.ui-compact .pulse-action,.card.ui-compact .pulse-audio{width:28px !important;min-width:28px !important;max-width:28px !important;height:28px !important;min-height:28px !important;max-height:28px !important}
  .card.ui-compact .pulse-audio-icon{width:16px;height:16px}
  .card.ui-mini .pulse-action,.card.ui-mini .pulse-audio{width:24px !important;min-width:24px !important;max-width:24px !important;height:24px !important;min-height:24px !important;max-height:24px !important}
  .card.ui-mini .pulse-audio-icon{width:14px;height:14px}
  .card.ui-micro .pulse-action,.card.ui-micro .pulse-audio{width:20px !important;min-width:20px !important;max-width:20px !important;height:20px !important;min-height:20px !important;max-height:20px !important}
  .card.ui-micro .pulse-audio-icon{width:12px;height:12px}
  @media (max-width:900px){
    .pulse-pill{font-size:11px}.pulse-title{font-size:10px}
    .pulse-action,.pulse-audio{width:34px !important;min-width:34px !important;height:34px !important;min-height:34px !important;max-height:34px !important}
  }
  @media (max-width:600px){
    .pulse-pill{font-size:10px}.pulse-title{font-size:9px}
    .pulse-action,.pulse-audio{width:32px !important;min-width:32px !important;height:32px !important;min-height:32px !important;max-height:32px !important}
  }

  /* The sort label is the primary metric.  It must never be ellipsized;
     the channel ID yields first when top-row width is constrained. */
  .pulse-name{min-width:0;flex:0 1 auto}
  .pulse-name-text{overflow:hidden;text-overflow:ellipsis}
  .pulse-viewers{
    flex:0 0 auto;
    max-width:none !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  /* Keep the dot-to-number spacing identical across every tile sub-tier.
     The only remaining spacing is .pulse-viewers { gap:2px }. */
  .pulse-viewers::before{margin-right:0 !important}

  /* Persistent metric mode keeps only the combined Active/PV pill visible.
     Hover retains the normal title and controls without recreating players. */
  .card.metrics-always-on .pulse-ui{opacity:1}
  .card.metrics-always-on:not(:hover) .pulse-live,
  .card.metrics-always-on:not(:hover) .pulse-name,
  .card.metrics-always-on:not(:hover) .pulse-bottom{display:none !important}
  .card.metrics-always-on:not(:hover) .pulse-top{max-width:calc(100% - 42px)}


  .player-placeholder{
    position:absolute; inset:0; display:grid; place-items:center;
    padding:24px; background:#050505; color:#9ca3af;
    font-size:13px; text-align:center;
  }

  /* A single, independent KICK pop-out chat.  It deliberately reserves
     layout space instead of covering the player grid. */
  .chat-panel{
    position:fixed;
    z-index:19;
    top:var(--header-h);
    right:0;
    bottom:0;
    width:min(360px,34vw);
    min-width:280px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    color:#f4f4f5;
    background:#111214;
    border-left:1px solid rgba(255,255,255,.16);
    transform:translateX(102%);
    transition:transform .22s ease;
    pointer-events:none;
  }
  body.chat-panel-open .chat-panel{
    transform:translateX(0);
    pointer-events:auto;
  }
  .chat-panel-head{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:48px;
    padding:8px 9px 8px 12px;
    background:#111214;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .chat-resize-handle{
    display:none;
    align-items:center;
    justify-content:center;
    width:100%;
    height:18px;
    cursor:ns-resize;
    touch-action:none;
    flex:none;
    user-select:none;
    -webkit-user-select:none;
    background:#111214;
  }
  .chat-resize-handle-bar{
    width:36px;
    height:4px;
    border-radius:2px;
    background:rgba(255,255,255,.25);
  }
  .chat-resize-handle:active .chat-resize-handle-bar{background:rgba(255,255,255,.5)}
  .chat-channel-picker{position:relative;flex:1;min-width:0}
  .chat-channel-picker-btn{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    min-width:0;
    height:34px;
    padding:0 10px;
    padding-right:28px;
    position:relative;
    color:#fff;
    background:#1a1d22;
    border:1px solid rgba(255,255,255,.10);
    border-radius:8px;
    font:inherit;
    font-size:12px;
    text-align:left;
    cursor:pointer;
  }
  .chat-channel-picker-avatar-wrap,.chat-channel-picker-item-avatar-wrap{
    position:relative;
    width:22px;
    height:22px;
    flex:none;
    border-radius:50%;
    overflow:hidden;
    background:#1c1f24;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .chat-channel-picker-avatar,.chat-channel-picker-item-avatar{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .chat-channel-picker-avatar-fallback,.chat-channel-picker-item-avatar-fallback{
    font-size:10px;
    font-weight:800;
    color:#dfe5e0;
  }
  .chat-channel-picker-label,.chat-channel-picker-item-label{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .chat-channel-picker-caret{position:absolute;right:10px;top:50%;transform:translateY(-50%);flex:none;width:10px;height:6px;font-size:0;opacity:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat center}
  .chat-channel-picker-menu{
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    right:0;
    max-height:320px;
    overflow-y:auto;
    background:#1b1d22;
    border:1px solid rgba(255,255,255,.16);
    border-radius:8px;
    box-shadow:0 12px 28px rgba(0,0,0,.45);
    z-index:5;
    padding:4px;
  }
  .chat-channel-picker-menu[hidden]{display:none}
  .chat-channel-picker-item{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    padding:6px 8px;
    border-radius:6px;
    background:transparent;
    border:0;
    color:#f5f5f5;
    font:inherit;
    font-size:12px;
    text-align:left;
    cursor:pointer;
  }
  .chat-channel-picker-item:hover,.chat-channel-picker-item.is-active{background:rgba(255,255,255,.09)}
  .chat-messages{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:10px 12px 14px;
    font-size:13px;
    line-height:1.5;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .chat-message{word-break:break-word}
  .chat-message-user{font-weight:800}
  .chat-message-badge{
    display:inline-block;
    height:14px;width:14px;
    vertical-align:middle;
    margin-right:2px;
    object-fit:contain;
  }
  .chat-message img.chat-inline-emote{
    height:20px;width:auto;
    vertical-align:middle;
    margin:-3px 1px;
    object-fit:contain;
  }
  .chat-message-reply{
    font-size:11px;
    color:var(--muted);
    padding:1px 8px;
    margin-top:2px;
    border-left:2px solid rgba(255,255,255,.2);
  }
  .chat-connection-state{
    font-size:11px;
    color:var(--muted);
    text-align:center;
    padding:6px;
  }
  .chat-login-overlay{
    position:relative;
    z-index:2;
    flex:none;
    display:flex;
    align-items:flex-end;
    padding:14px;
    background:#111214;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .chat-login-overlay.logged-in .chat-login-overlay-btn{display:none !important}
  .chat-login-overlay.logged-in{height:auto !important;padding:0;border-top:0;background:transparent}
  .chat-login-overlay-btn{
    width:auto;
    height:40px;
    padding:0 20px;
    border-radius:8px;
    font-size:13px;
    font-weight:800;
    color:#071006;
    background:var(--kick);
    border-color:var(--kick);
  }
  .chat-send-box{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
  }
  .chat-send-box[hidden]{display:none}
  .chat-send-input-wrap{position:relative;flex:1;min-width:0}
  .chat-send-input{
    width:100%;
    min-height:40px;
    max-height:96px;
    overflow-y:auto;
    padding:10px 36px 10px 12px;
    border-radius:8px;
    background:#1a1d22;
    border:1px solid rgba(255,255,255,.17);
    color:#f5f5f5;
    font-size:13px;
    line-height:20px;
    box-sizing:border-box;
    white-space:pre-wrap;
    word-break:break-word;
    outline:none;
  }
  .chat-send-input:focus{border-color:var(--kick)}
  .chat-send-input:empty::before{
    content:attr(data-placeholder);
    color:#7c847e;
    pointer-events:none;
  }
  .chat-send-input img.chat-inline-emote{
    height:20px;
    width:auto;
    vertical-align:middle;
    display:inline-block;
    margin:-3px 1px 0;
  }
  .chat-emote-toggle-btn{
    position:absolute;
    right:4px;top:50%;
    transform:translateY(-50%);
    width:28px;height:28px;
    padding:0;
    display:grid;
    place-items:center;
    background:transparent;
    border:0;
    color:#a8b0ab;
  }
  .chat-emote-toggle-btn:hover{color:var(--kick)}
  .chat-emote-toggle-icon{
    width:19px;height:19px;
    fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  }
  .chat-send-btn{
    flex:none;
    width:40px;
    height:40px;
    padding:0;
    border-radius:8px;
    font-size:16px;
    color:#071006;
    background:var(--kick);
    border-color:var(--kick);
  }
  .chat-send-btn:disabled{opacity:.5;cursor:default}
  .chat-logout-btn{
    flex:none;
    width:40px;
    height:40px;
    padding:0;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:transparent;
    border:1px solid var(--line);
    color:#a8b0ab;
  }
  .chat-logout-btn:hover{color:var(--kick);border-color:var(--kick)}
  .chat-logout-icon{
    width:20px;height:20px;
    fill:currentColor;
    stroke:none;
  }
  .chat-emote-picker{
    position:absolute;
    left:14px;right:14px;
    bottom:100%;
    margin-bottom:8px;
    max-height:320px;
    display:flex;
    flex-direction:column;
    background:#181a1e;
    border:1px solid rgba(255,255,255,.14);
    border-radius:10px;
    padding:10px;
    box-shadow:0 10px 24px rgba(0,0,0,.4);
  }
  .chat-emote-picker[hidden]{display:none}
  .chat-emote-search{
    height:32px;
    padding:0 10px;
    border-radius:7px;
    background:#111214;
    border:1px solid rgba(255,255,255,.14);
    color:#f5f5f5;
    font-size:12px;
    margin-bottom:8px;
    flex:none;
  }
  .chat-emote-grid{
    display:flex;
    flex-direction:column;
    gap:4px;
    overflow-y:auto;
  }
  .chat-emote-grid-row{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(36px,1fr));
    gap:6px;
  }
  .chat-emote-grid-row img{
    width:32px;
    height:32px;
    object-fit:contain;
    cursor:pointer;
    border-radius:4px;
  }
  .chat-emote-grid-row img:hover{background:rgba(255,255,255,.1)}
  .chat-emote-section-title{
    font-size:10px;
    color:var(--muted);
    font-weight:700;
    margin:6px 0 2px;
  }
  .chat-emote-section-title:first-child{margin-top:0}
  .chat-emote-empty{
    font-size:11px;
    color:var(--muted);
    padding:8px 0;
    text-align:center;
  }
  .chat-empty{
    display:none;
    flex:1;
    align-items:center;
    justify-content:center;
    padding:24px;
    color:#a1a1aa;
    font-size:13px;
    text-align:center;
  }
  .chat-panel.is-empty .chat-messages{display:none}
  .chat-panel.is-empty .chat-empty{display:flex}
  .top-icon-btn.chat-active{
    color:var(--kick) !important;
    border-color:rgba(83,252,24,.72) !important;
  }
  @media(max-width:744px){
    .chat-panel{
      top:auto;
      right:0;
      left:0;
      width:auto;
      min-width:0;
      height:min(48vh,440px);
      transform:translateY(102%);
      border-top:1px solid rgba(255,255,255,.16);
      border-left:0;
    }
    body.chat-panel-open .chat-panel{transform:translateY(0)}
    .chat-panel{bottom:52px;padding-bottom:0;box-sizing:border-box;}
    .chat-resize-handle{display:flex}
  }


  /* Narrow viewport guard: prevent the header controls from overlapping. */
  @media (max-width:900px){
    header .brand{
      min-width:0 !important;
      overflow:hidden !important;
      flex:1 1 auto !important;
      margin-right:4px !important;
    }
    header .brand > span:not(.logo):not(.focus-indicator):not(.sub-audio-indicator):not(.toast){
      min-width:0 !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
      white-space:nowrap !important;
    }
    #focusIndicator{
      display:none !important;
    }
    #subAudioIndicator{
      display:none;
    }
    #subAudioIndicator.visible{
      display:inline-flex !important;
    }
    header .status{
      flex:0 1 auto !important;
      min-width:0 !important;
      max-width:130px !important;
      overflow:hidden !important;
      white-space:nowrap !important;
      font-size:10px !important;
    }
    .top-icon-btn{
      width:32px !important;
      height:32px !important;
      min-width:32px !important;
      max-width:32px !important;
      min-height:32px !important;
      max-height:32px !important;
      padding:5px !important;
      border-radius:7px !important;
    }
    #addBtn{
      height:32px !important;
      min-height:32px !important;
      max-height:32px !important;
      padding:0 8px !important;
      font-size:12px !important;
      white-space:nowrap !important;
      border-radius:5px !important;
    }
    header{
      gap:3px !important;
      padding-left:6px !important;
      padding-right:6px !important;
    }
  }



  /* Extra compact phone layout. */
  @media (max-width:720px), (max-device-width:720px){
    header .brand > span:nth-child(2){
      display:none !important;
    }
    header .status{
      display:none !important;
    }
    header .brand{
      flex:1 1 auto !important;
    }
    header .focus-indicator,
    header .sub-audio-indicator{
      max-width:110px !important;
      margin-left:0 !important;
      padding:0 6px !important;
      font-size:10px !important;
    }
    #refreshBtn{
      display:none !important;
    }
    #uniformLayoutBtn,
    #randomPlayBtn,
    #chatPanelBtn,
    #settingsBtn{
      position:fixed !important;
      top:auto !important;
      bottom:8px !important;
      z-index:101 !important;
      width:32px !important;
      height:32px !important;
      min-width:32px !important;
      max-width:32px !important;
      min-height:32px !important;
      max-height:32px !important;
    }
    #uniformLayoutBtn{left:6px !important}
    #randomPlayBtn{left:44px !important}
    #chatPanelBtn{left:82px !important}
    #settingsBtn{right:6px !important}
    #addBtn{
      height:30px !important;
      min-height:30px !important;
      max-height:30px !important;
      padding:0 7px !important;
      font-size:11px !important;
    }
    header{
      min-height:52px !important;
      height:52px !important;
      padding:5px 6px !important;
    }
    header::after{
      content:"";
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      height:48px;
      background:rgba(11,13,12,.97);
      border-top:1px solid var(--line);
      z-index:100;
      pointer-events:none;
    }
  }



  /* JS-backed fallback for browsers whose CSS viewport is scaled. */
  html.compact-narrow-window header{
    will-change:auto !important;
    transform:none !important;
  }
  html.compact-narrow-window #focusIndicator.visible{
    display:inline-flex !important;
  }
  html.compact-narrow-window #streamOverflowIndicator{
    display:none !important;
  }
  html.compact-narrow-window #grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-rows:auto !important;
    column-gap:2px !important;
    row-gap:2px !important;
    align-content:start !important;
    height:calc(100vh - var(--header-h)) !important;
    min-height:0 !important;
    margin-top:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow:auto !important;
    padding-bottom:56px !important;
    box-sizing:border-box !important;
  }
  html.compact-narrow-window body.chat-panel-open #grid{
    height:calc(100vh - var(--header-h) - min(28vh,300px)) !important;
  }
  html.compact-narrow-window #grid .card{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    height:auto !important;
    border:0 !important;
    align-self:stretch !important;
    justify-self:stretch !important;
    min-width:0 !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
  }
  html.compact-narrow-window #grid{
    grid-auto-rows:calc((100vw - 2px) * 0.1875) !important;
    grid-auto-flow:dense !important;
  }
  html.compact-narrow-window #grid .card{
    grid-column:auto !important;
    grid-row:auto !important;
  }
  html.compact-narrow-window #grid .card.large{
    grid-column:span 2 !important;
    grid-row:span 2 !important;
  }
  html.compact-narrow-window #grid > #streamOverflowIndicator + .card{
    grid-column:1 / -1 !important;
    grid-row:span 3 !important;
  }
  html.compact-narrow-window #grid > #streamOverflowIndicator + .card{
    grid-column:1 / -1 !important;
  }
  html.compact-narrow-window #grid > #streamOverflowIndicator + .card + .card{
    grid-column:span 2 !important;
  }
  /* Compact view: keep only the first stream full-width; pack all following
     streams into ordinary 16:9 grid cells so no right-side holes remain. */
  html.compact-narrow-window #grid > .card.large{
    grid-column:auto !important;
    grid-row:auto !important;
    aspect-ratio:16 / 9 !important;
  }
  html.compact-narrow-window #grid > #streamOverflowIndicator + .card{
    grid-column:1 / -1 !important;
    grid-row:span 3 !important;
  }
  /* Every card after the first full-width stream is one normal 16:9 cell.
     This overrides the legacy second-card span rule. */
  html.compact-narrow-window #grid > #streamOverflowIndicator + .card ~ .card{
    grid-column:auto !important;
    grid-row:auto !important;
    aspect-ratio:16 / 9 !important;
  }
  /* 2nd-ranked stream gets a 2x2 tile in compact mode */
  html.compact-narrow-window:not(:has(#uniformLayoutBtn.active)) #grid > .card[data-rank="2"]:not(.is-main){
    grid-column:span 2 !important;
    grid-row:span 2 !important;
  }
  /* At 440px and below, uniform mode must override the adaptive
     full-width-first-card rules and make every visible stream one equal cell. */
  @media (max-width:440px){
    html.compact-narrow-window:has(#uniformLayoutBtn.active) #grid > .card{
      grid-column:auto !important;
      grid-row:auto !important;
      aspect-ratio:16 / 9 !important;
    }
  }
  /* The JS compact breakpoint can be wider than the CSS 440px viewport
     in scaled Brave windows. Use the compact state itself so uniform mode
     always removes the adaptive first-card enlargement. */
  html.compact-narrow-window:has(#uniformLayoutBtn.active) #grid > .card{
    grid-column:auto !important;
    grid-row:auto !important;
    aspect-ratio:16 / 9 !important;
  }
  /* In compact adaptive mode, the clicked/focused card is the large card.
     Do not keep the first DOM card enlarged after focus changes. */
  html.compact-narrow-window:not(:has(#uniformLayoutBtn.active)) #grid > .card{
    grid-column:auto !important;
    grid-row:auto !important;
    aspect-ratio:16 / 9 !important;
  }
  html.compact-narrow-window:not(:has(#uniformLayoutBtn.active)) #grid > .card.is-main{
    grid-column:1 / -1 !important;
    grid-row:span 3 !important;
    aspect-ratio:16 / 9 !important;
    order:-1 !important;
  }
  html.compact-narrow-window:not(:has(#uniformLayoutBtn.active)) #grid > .card:not(.is-main){
    order:0 !important;
  }
  html.compact-narrow-window header .brand > span:nth-child(2){
    display:inline !important;
    font-size:14px !important;
    line-height:1 !important;
    letter-spacing:-.02em !important;
  }
  html.compact-narrow-window header .brand .logo{
    width:24px !important;
    height:24px !important;
    font-size:15px !important;
  }
  html.compact-narrow-window header .status{
    display:inline-flex !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:120px !important;
    font-size:10px !important;
    gap:5px !important;
    overflow:hidden !important;
  }
  html.compact-narrow-window header .status-segment{min-width:0 !important}
  html.compact-narrow-window header .status-segment:not(:first-child){display:none !important}
  html.compact-narrow-window header .status{display:none !important}
  html.compact-narrow-window header .focus-indicator{
    max-width:110px !important;
    margin-left:0 !important;
    padding:0 6px !important;
    font-size:10px !important;
  }
  html.compact-narrow-window header .sub-audio-indicator{
    max-width:110px !important;
    margin-left:0 !important;
    padding:0 6px !important;
    font-size:10px !important;
  }
  html.compact-narrow-window{
    --header-h:48px !important;
  }
  html.compact-narrow-window header{
    height:48px !important;
    min-height:48px !important;
  }
  html.compact-narrow-window #addBtn{
    position:absolute !important;
    right:6px !important;
    left:auto !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    z-index:102 !important;
    height:29px !important;
    min-height:29px !important;
    max-height:29px !important;
    padding:0 8px !important;
    font-size:11px !important;
    border-radius:5px !important;
  }
  html.compact-narrow-window #refreshBtn{display:none !important}
  html.compact-narrow-window dialog.picker-dialog{
    top:calc(var(--header-h) + 6px) !important;
    bottom:56px !important;
    max-height:none !important;
    height:auto !important;
    margin:auto !important;
  }
  html.compact-narrow-window dialog.picker-dialog .picker-shell{
    height:100% !important;
    max-height:none !important;
  }
  html.compact-narrow-window #uniformLayoutBtn,
  html.compact-narrow-window #randomPlayBtn,
  html.compact-narrow-window #chatPanelBtn,
  html.compact-narrow-window #settingsBtn{
    position:fixed !important;
    top:auto !important;
    bottom:8px !important;
    z-index:101 !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }
  html.compact-narrow-window #uniformLayoutBtn{left:6px !important}
  html.compact-narrow-window #randomPlayBtn{left:44px !important}
  html.compact-narrow-window #chatPanelBtn{left:82px !important}
  html.compact-narrow-window #settingsBtn{right:6px !important;left:auto !important}
  html.compact-narrow-window #chatPanelBtn{right:44px !important;left:auto !important}
  html.compact-narrow-window #randomPlayBtn{right:82px !important;left:auto !important}
  html.compact-narrow-window #uniformLayoutBtn{right:120px !important;left:auto !important}
  html.compact-narrow-window .chat-panel{
    top:auto !important;
    right:0 !important;
    left:0 !important;
    width:auto !important;
    min-width:0 !important;
    height:min(28vh,300px) !important;
    padding-bottom:48px !important;
    box-sizing:border-box !important;
    transform:translateY(102%) !important;
    border-top:1px solid rgba(255,255,255,.16) !important;
    border-left:0 !important;
  }
  html.compact-narrow-window body.chat-panel-open .chat-panel{transform:translateY(0) !important}
  html.compact-narrow-window .chat-panel::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:99px;
    border-top:1px solid rgba(255,255,255,.12);
    pointer-events:none;
    z-index:24;
  }
  html.compact-narrow-window .chat-login-overlay.logged-in ~ .chat-panel::before,
  html.compact-narrow-window .chat-panel:has(.chat-login-overlay.logged-in)::before{
    display:none !important;
  }
  html.compact-narrow-window .chat-login-overlay{
    position:absolute !important;
    left:14px !important;
    right:14px !important;
    bottom:49px !important;
    padding:0 !important;
    border-top:0 !important;
    background:transparent !important;
    z-index:25 !important;
  }
  html.compact-narrow-window .chat-login-overlay.logged-in{
    left:0 !important;
    right:0 !important;
    bottom:55px !important;
    height:auto !important;
    padding:4px 14px !important;
    background:#111214 !important;
    border-top:0 !important;
  }
  html.compact-narrow-window .chat-login-overlay.logged-in #chatSendBox{
    position:static !important;
    width:100% !important;
  }
  html.compact-narrow-window .chat-panel #chatMessages{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:56px !important;
    bottom:99px !important;
    height:auto !important;
    padding-bottom:8px !important;
    box-sizing:border-box !important;
  }
  html.compact-narrow-window .chat-panel #chatSendBox{
    position:static !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  html.compact-narrow-window body.chat-panel-open #grid{
    height:calc(100vh - var(--header-h) - min(28vh,300px)) !important;
  }
  html.compact-narrow-window header::after{
    content:"";
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:48px;
    background:rgba(11,13,12,.97);
    border-top:1px solid var(--line);
    z-index:100;
    pointer-events:none;
  }

  @media (max-width:440px){
    html.compact-narrow-window dialog.picker-dialog{
      width:calc(100vw - 12px) !important;
      border-radius:10px !important;
    }
    html.compact-narrow-window dialog.picker-dialog .picker-head{
      padding:12px 14px 9px !important;
    }
    html.compact-narrow-window dialog.picker-dialog .picker-title{
      font-size:17px !important;
    }
    html.compact-narrow-window dialog.picker-dialog .picker-close{
      width:30px !important; height:30px !important; font-size:17px !important;
    }
    html.compact-narrow-window dialog.picker-dialog .picker-tabs{
      gap:8px !important; padding:0 12px !important; margin-top:8px !important;
    }
    html.compact-narrow-window dialog.picker-dialog .picker-tab{
      padding:8px 7px !important; font-size:11px !important;
    }
    html.compact-narrow-window dialog.picker-dialog .picker-tab-body{
      padding:12px !important;
    }
    html.compact-narrow-window dialog.picker-dialog .settings-grid{
      grid-template-columns:82px minmax(0,1fr) !important;
      gap:9px 8px !important;
    }
    html.compact-narrow-window dialog.picker-dialog .settings-label,
    html.compact-narrow-window dialog.picker-dialog .settings-field,
    html.compact-narrow-window dialog.picker-dialog .help{
      font-size:11px !important;
      line-height:1.4 !important;
    }
    html.compact-narrow-window dialog.picker-dialog .settings-field select,
    html.compact-narrow-window dialog.picker-dialog .settings-field input[type="number"]{
      max-width:100% !important;
      font-size:11px !important;
      padding:6px 8px !important;
    }
    html.compact-narrow-window dialog.picker-dialog .picker-actions{
      padding:9px 12px !important;
    }
    html.compact-narrow-window dialog.picker-dialog .picker-title,
    html.compact-narrow-window dialog.picker-dialog .picker-tab,
    html.compact-narrow-window dialog.picker-dialog .settings-label,
    html.compact-narrow-window dialog.picker-dialog .settings-field,
    html.compact-narrow-window dialog.picker-dialog .settings-field *,
    html.compact-narrow-window dialog.picker-dialog .help,
    html.compact-narrow-window dialog.picker-dialog .picker-actions button{
      font-size:70% !important;
    }
  }
  @media (max-width:820px){
  /* Responsive layout: CSS media queries are the sole layout authority. */
   header{
    will-change:auto !important;
    transform:none !important;
  }
   #focusIndicator.visible{
    display:inline-flex !important;
  }
   #streamOverflowIndicator{
    display:none !important;
  }
   #grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-rows:auto !important;
    column-gap:2px !important;
    row-gap:2px !important;
    align-content:start !important;
    height:calc(100vh - var(--header-h)) !important;
    min-height:0 !important;
    margin-top:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow:auto !important;
    padding-bottom:56px !important;
    box-sizing:border-box !important;
  }
   body.chat-panel-open #grid{
    height:calc(100vh - var(--header-h) - min(28vh,300px)) !important;
  }
   #grid .card{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    height:auto !important;
    border:0 !important;
    align-self:stretch !important;
    justify-self:stretch !important;
    min-width:0 !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
  }
   #grid{
    grid-auto-rows:calc((100vw - 2px) * 0.1875) !important;
    grid-auto-flow:dense !important;
  }
   #grid .card{
    grid-column:auto !important;
    grid-row:auto !important;
  }
   #grid .card.large{
    grid-column:span 2 !important;
    grid-row:span 2 !important;
  }
   #grid > #streamOverflowIndicator + .card{
    grid-column:1 / -1 !important;
    grid-row:span 3 !important;
  }
   #grid > #streamOverflowIndicator + .card{
    grid-column:1 / -1 !important;
  }
   #grid > #streamOverflowIndicator + .card + .card{
    grid-column:span 2 !important;
  }
  /* Compact view: keep only the first stream full-width; pack all following
     streams into ordinary 16:9 grid cells so no right-side holes remain. */
   #grid > .card.large{
    grid-column:auto !important;
    grid-row:auto !important;
    aspect-ratio:16 / 9 !important;
  }
   #grid > #streamOverflowIndicator + .card{
    grid-column:1 / -1 !important;
    grid-row:span 3 !important;
  }
  /* Every card after the first full-width stream is one normal 16:9 cell.
     This overrides the legacy second-card span rule. */
   #grid > #streamOverflowIndicator + .card ~ .card{
    grid-column:auto !important;
    grid-row:auto !important;
    aspect-ratio:16 / 9 !important;
  }
  /* At 440px and below, uniform mode must override the adaptive
     full-width-first-card rules and make every visible stream one equal cell. */
  @media (max-width:440px){
    :has(#uniformLayoutBtn.active) #grid > .card{
      grid-column:auto !important;
      grid-row:auto !important;
      aspect-ratio:16 / 9 !important;
    }
  }
  /* The JS compact breakpoint can be wider than the CSS 440px viewport
     in scaled Brave windows. Use the compact state itself so uniform mode
     always removes the adaptive first-card enlargement. */
  :has(#uniformLayoutBtn.active) #grid > .card{
    grid-column:auto !important;
    grid-row:auto !important;
    aspect-ratio:16 / 9 !important;
  }
  /* In compact adaptive mode, the clicked/focused card is the large card.
     Do not keep the first DOM card enlarged after focus changes. */
  :not(:has(#uniformLayoutBtn.active)) #grid > .card{
    grid-column:auto !important;
    grid-row:auto !important;
    aspect-ratio:16 / 9 !important;
  }
  :not(:has(#uniformLayoutBtn.active)) #grid > .card.is-main{
    grid-column:1 / -1 !important;
    grid-row:span 3 !important;
    aspect-ratio:16 / 9 !important;
    order:-1 !important;
  }
  :not(:has(#uniformLayoutBtn.active)) #grid > .card:not(.is-main){
    order:0 !important;
  }
  :not(:has(#uniformLayoutBtn.active)) #grid > .card[data-rank="2"]:not(.is-main){
    grid-column:span 2 !important;
    grid-row:span 2 !important;
  }
   header .brand > span:nth-child(2){
    display:inline !important;
    font-size:14px !important;
    line-height:1 !important;
    letter-spacing:-.02em !important;
  }
   header .brand .logo{
    width:24px !important;
    height:24px !important;
    font-size:15px !important;
  }
   header .status{
    display:inline-flex !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:120px !important;
    font-size:10px !important;
    gap:5px !important;
    overflow:hidden !important;
  }
   header .status-segment{min-width:0 !important}
   header .status-segment:not(:first-child){display:none !important}
   header .status{display:none !important}
   header .focus-indicator{
    max-width:110px !important;
    margin-left:0 !important;
    padding:0 6px !important;
    font-size:10px !important;
  }
  :root{
    --header-h:48px !important;
  }
   header{
    height:48px !important;
    min-height:48px !important;
  }
   #addBtn{
    position:absolute !important;
    right:6px !important;
    left:auto !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    z-index:102 !important;
    border-radius:5px !important;
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    padding:0 8px !important;
    font-size:11px !important;
  }
   #refreshBtn{display:none !important}
   dialog.picker-dialog{
    top:calc(var(--header-h) + 6px) !important;
    bottom:56px !important;
    max-height:none !important;
    height:auto !important;
    margin:auto !important;
  }
   dialog.picker-dialog .picker-shell{
    height:100% !important;
    max-height:none !important;
  }
   #sortModeBtn,
   #uniformLayoutBtn,
   #randomPlayBtn,
   #chatPanelBtn,
   #settingsBtn{
    position:fixed !important;
    top:auto !important;
    bottom:8px !important;
    z-index:101 !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }
   #sortModeBtn{left:6px !important}
   #uniformLayoutBtn{left:44px !important}
   #randomPlayBtn{left:82px !important}
   #chatPanelBtn{left:120px !important}
   #settingsBtn{right:6px !important;left:auto !important}
   #chatPanelBtn{right:44px !important;left:auto !important}
   #randomPlayBtn{right:82px !important;left:auto !important}
   #uniformLayoutBtn{right:120px !important;left:auto !important}
   #sortModeBtn{right:158px !important;left:auto !important}
   .chat-panel{
    top:auto !important;
    right:0 !important;
    left:0 !important;
    bottom:55px !important;
    width:auto !important;
    min-width:0 !important;
    height:min(28vh,300px) !important;
    padding-bottom:0 !important;
    box-sizing:border-box !important;
    transform:translateY(102%) !important;
    border-top:1px solid rgba(255,255,255,.16) !important;
    border-left:0 !important;
  }
   body.chat-panel-open .chat-panel{transform:translateY(0) !important}
   .chat-resize-handle{display:flex !important}
   .chat-panel::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:50px;
    border-top:1px solid rgba(255,255,255,.12);
    pointer-events:none;
    z-index:24;
  }
   .chat-login-overlay{
    position:absolute !important;
    left:14px !important;
    right:14px !important;
    bottom:0 !important;
    height:40px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-top:0 !important;
    background:transparent !important;
    z-index:25 !important;
  }
   .chat-login-overlay .chat-login-overlay-btn{
    width:auto !important;
    height:40px !important;
    padding:0 20px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
   .chat-login-overlay .chat-login-overlay-btn[hidden]{
    display:none !important;
  }
   .chat-login-overlay.logged-in{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:auto !important;
    padding:4px 14px !important;
    background:#111214 !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
  }
   .chat-login-overlay.logged-in #chatSendBox{
    position:static !important;
    width:100% !important;
  }
   .chat-panel #chatMessages{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:75px !important;
    bottom:45px !important;
    height:auto !important;
    padding-bottom:8px !important;
    box-sizing:border-box !important;
  }
   .chat-panel #chatSendBox{
    position:static !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
   body.chat-panel-open #grid{
    height:calc(100vh - var(--header-h) - min(28vh,300px)) !important;
  }
   header::after{
    content:"";
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:48px;
    background:rgba(11,13,12,.97);
    border-top:1px solid var(--line);
    z-index:100;
    pointer-events:none;
  }

  @media (max-width:440px){
     dialog.picker-dialog{
      width:calc(100vw - 12px) !important;
      border-radius:10px !important;
    }
     dialog.picker-dialog .picker-head{
      padding:12px 14px 9px !important;
    }
     dialog.picker-dialog .picker-title{
      font-size:17px !important;
    }
     dialog.picker-dialog .picker-close{
      width:30px !important; height:30px !important; font-size:17px !important;
    }
     dialog.picker-dialog .picker-tabs{
      gap:8px !important; padding:0 12px !important; margin-top:8px !important;
    }
     dialog.picker-dialog .picker-tab{
      padding:8px 7px !important; font-size:11px !important;
    }
     dialog.picker-dialog .picker-tab-body{
      padding:12px !important;
    }
     dialog.picker-dialog .settings-grid{
      grid-template-columns:82px minmax(0,1fr) !important;
      gap:9px 8px !important;
    }
     dialog.picker-dialog .settings-label,
     dialog.picker-dialog .settings-field,
     dialog.picker-dialog .help{
      font-size:11px !important;
      line-height:1.4 !important;
    }
     dialog.picker-dialog .settings-field select,
     dialog.picker-dialog .settings-field input[type="number"]{
      max-width:100% !important;
      font-size:11px !important;
      padding:6px 8px !important;
    }
     dialog.picker-dialog .picker-actions{
      padding:9px 12px !important;
    }
     dialog.picker-dialog .picker-title,
     dialog.picker-dialog .picker-tab,
     dialog.picker-dialog .settings-label,
     dialog.picker-dialog .settings-field,
     dialog.picker-dialog .settings-field *,
     dialog.picker-dialog .help,
     dialog.picker-dialog .picker-actions button{
      font-size:70% !important;
    }
  }
  }
  @media (max-width:820px){
    /* Mobile browsers may receive a narrower inline board width from the
       geometry calculator. The CSS viewport remains the source of truth. */
    #grid{
      width:100vw !important;
      max-width:100vw !important;
      margin-left:0 !important;
      margin-right:0 !important;
    }
  }

  /* Keep the settings/picker window inside the app chrome at every width. */
  dialog.picker-dialog{
    position:fixed !important;
    top:calc(var(--header-h) + 6px) !important;
    bottom:6px !important;
    height:min(900px, calc(100dvh - var(--header-h) - 12px)) !important;
    max-height:calc(100dvh - var(--header-h) - 12px) !important;
    margin:auto !important;
    box-sizing:border-box !important;
  }
  dialog.picker-dialog .picker-shell{
    height:100% !important;
    max-height:100% !important;
  }
  @media (max-width:820px){
    dialog.picker-dialog{
      top:calc(var(--header-h) + 6px) !important;
      bottom:56px !important;
      height:calc(100dvh - var(--header-h) - 62px) !important;
      max-height:calc(100dvh - var(--header-h) - 62px) !important;
    }
  }

  /* Live picker toolbar: search and language always share one row. */
  dialog.picker-dialog .picker-toolbar{
    grid-template-columns:minmax(0,1fr) clamp(104px,20vw,170px) !important;
    gap:10px !important;
    align-items:center !important;
  }
  dialog.picker-dialog .picker-search{
    min-width:0 !important;
  }
  dialog.picker-dialog .picker-search input{
    width:100% !important;
    min-width:0 !important;
    padding-left:38px !important;
    font-size:13px !important;
  }
  dialog.picker-dialog .picker-search-icon{
    left:12px !important;
    font-size:19px !important;
    line-height:1 !important;
  }
  dialog.picker-dialog .picker-filter{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }
  dialog.picker-dialog .picker-filter select{
    width:100% !important;
    min-width:0 !important;
  }
  @media (max-width:440px){
    dialog.picker-dialog .picker-toolbar{
      grid-template-columns:minmax(0,1fr) 104px !important;
      gap:8px !important;
      padding-left:12px !important;
      padding-right:12px !important;
    }
    dialog.picker-dialog .picker-search input{
      padding-left:34px !important;
      font-size:11px !important;
    }
    dialog.picker-dialog .picker-search-icon{
      left:10px !important;
      font-size:17px !important;
    }
  }

  /* Reduce only the picker window's outer content padding by about 5px. */
  dialog.picker-dialog .picker-head{
    padding:17px 19px 9px !important;
  }
  dialog.picker-dialog .picker-tabs{
    padding-left:19px !important;
    padding-right:19px !important;
  }
  dialog.picker-dialog .picker-toolbar{
    padding:9px 19px 11px !important;
  }
  dialog.picker-dialog .picker-section-row{
    padding:0 19px 5px !important;
  }
  dialog.picker-dialog .picker-grid-wrap{
    padding:0 19px 15px !important;
  }
  dialog.picker-dialog .picker-tab-body{
    padding:19px !important;
  }
  dialog.picker-dialog .picker-actions{
    padding:9px 19px !important;
  }
  @media (max-width:440px){
    dialog.picker-dialog .picker-head{
      padding:7px 9px 4px !important;
    }
    dialog.picker-dialog .picker-tabs{
      padding-left:7px !important;
      padding-right:7px !important;
    }
    dialog.picker-dialog .picker-toolbar{
      padding:9px 7px 11px !important;
    }
    dialog.picker-dialog .picker-section-row{
      padding:0 19px 5px !important;
    }
    dialog.picker-dialog .picker-grid-wrap{
      padding:0 19px 15px !important;
    }
    dialog.picker-dialog .picker-tab-body{
      padding:7px !important;
    }
    dialog.picker-dialog .picker-actions{
      padding:4px 7px !important;
    }
  }

  /* Live stream cards never collapse to one column. */
  @media (max-width:820px){
    dialog.picker-dialog .picker-tab-content[data-tab-content="live"] .picker-grid{
      grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
  }
  @media (max-width:440px){
    dialog.picker-dialog .picker-tab-content[data-tab-content="live"] .picker-grid{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
  }

  dialog.picker-dialog .picker-tab-content[data-tab-content="live"] .picker-section-row{
    padding-bottom:5px !important;
  }
  dialog.picker-dialog .picker-tab-content[data-tab-content="live"] .picker-section-title,
  dialog.picker-dialog .picker-tab-content[data-tab-content="live"] .picker-status{
    font-size:12px !important;
  }

  dialog.picker-dialog .picker-title{
    font-size:15px !important;
  }

  dialog.picker-dialog .picker-head{
    padding-top:12px !important;
    padding-bottom:4px !important;
  }
  @media (max-width:440px){
    dialog.picker-dialog .picker-head{
      padding-top:2px !important;
      padding-bottom:0 !important;
    }
  }