/* ============================================================================
   TreeSelector.css (PUBLIC) — CLEAN REBUILD — EDGE-PINNED
   BASELINE: 13" MacBook class viewport
   - NO ROUNDED CORNERS
   - NO pixel grids / no 3×3 overlay
   - Hover effect: FONT SCALE
   - Active/Selected effect: stronger FONT SCALE
   - NO logo swaps on active
   - LEFT RAIL keeps structural width so hover labels are not clipped by content
   ========================================================================== */

/* ───────────────── TOKENS ───────────────── */
:root{
  --bg-page:#000;

  --text:#e5e7eb;
  --text-dim:#cbd5e1;
  --text-faint:#9ca3af;

  /* typography */
  --fs-base:14px;
  --fs-ui-sm:13px;
  --fs-meta:12px;
  --ui-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* -------------------------------------------------------------------------
     BASELINE = 13" MacBook-like viewport
     IMPORTANT:
     - structure stays wide enough for hover labels
     - only visual logo tile size scales
     ------------------------------------------------------------------------- */
  --chess-tile:150px;                 /* structural column / row cell */
  --left-rail-w:150px;                /* MUST stay roomy to avoid label clipping */
  --shell-slug:150px;                 /* right rail width */
  --chess-sub-h: calc(var(--chess-tile) * .5);

  /* visual size of row1 logo tiles inside the structural 150px cell */
  --row1-scale: 0.72;
  --row1-tile: calc(var(--chess-tile) * var(--row1-scale));

  --slug-pad-x: 4px;
  --shell-safe-pad: 0px; /* EDGE-PINNED */

  /* NONFIN sizing */
  --nonfin-tile: calc(var(--chess-tile) * 0.8);
  --nonfin-btn-h: calc(var(--nonfin-tile) * 0.5);

  /* TOP SAFE HEIGHT */
  --top-safe-h: max(
    var(--row1-tile),
    calc(var(--chess-sub-h) + var(--nonfin-btn-h))
  );

  /* label */
  --label-shadow: 0 2px 10px rgba(0,0,0,0.78);

  /* idle gradient (unselected) */
  --idle-g-a: rgba(0,0,0,0.78);
  --idle-g-b: rgba(0,0,0,0.54);
  --idle-g-c: rgba(0,0,0,0.34);
  --idle-text: rgba(255,255,255,0.86);

  /* optional dim */
  --idle-opacity: 0.72;

  /* scrollbar */
  --sb-w: 8px;
  --sb-thumb: rgba(0,0,0,.25);
  --sb-border: rgba(255,255,255,.15);

  /* pinned clusters */
  --quick-auth-w: calc(1 * var(--chess-tile));
  --public-cluster-count: 3;
  --public-cluster-w: calc(var(--public-cluster-count) * var(--chess-tile));

  --dash-tools-count: 2;
  --dash-tools-w: calc(var(--dash-tools-count) * var(--chess-tile));
}

/* larger desktops can breathe a bit more */
@media screen and (min-width: 1500px) and (min-height: 900px){
  :root{
    --row1-scale: 0.80;
  }
}

/* pre-mobile tightening: shrink VISUAL logo tiles, not structure */
@media screen and (max-width: 1280px), screen and (max-height: 820px){
  :root{
    --row1-scale: 0.64;
    --fs-ui-sm:12px;
  }
}

@media screen and (max-width: 1180px), screen and (max-height: 760px){
  :root{
    --row1-scale: 0.58;
    --fs-ui-sm:11px;
  }
}

/* ───────────────── RESET / BASE ───────────────── */
html, body{
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;

  scrollbar-width:thin;
  scrollbar-color:var(--sb-thumb) transparent;
  scrollbar-gutter:auto !important;
}
body{
  font-size:var(--fs-base);
  background:var(--bg-page);
  color:var(--text);
  font-family:var(--ui-font);
  line-height:1.5;
}

/* hard rule: never round */
*{ border-radius:0 !important; }

/* shared webkit scrollbars (only where overflow is enabled) */
body::-webkit-scrollbar,
.shell-main::-webkit-scrollbar,
.slug-shell.subsidebar::-webkit-scrollbar,
.top-chessboard .chess-grid-top::-webkit-scrollbar{ width:var(--sb-w); }

body::-webkit-scrollbar-track,
.shell-main::-webkit-scrollbar-track,
.slug-shell.subsidebar::-webkit-scrollbar-track,
.top-chessboard .chess-grid-top::-webkit-scrollbar-track{ background:transparent; }

body::-webkit-scrollbar-thumb,
.shell-main::-webkit-scrollbar-thumb,
.slug-shell.subsidebar::-webkit-scrollbar-thumb,
.top-chessboard .chess-grid-top::-webkit-scrollbar-thumb{
  background:var(--sb-thumb);
  border:1px solid var(--sb-border);
}

/* ───────────────── SHELL ROOT ───────────────── */
.shell-root{
  height:100vh;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-sizing:border-box;
  font-family:var(--ui-font);
}

/* ───────────────── GRID (PUBLIC disables left sidebar placeholder) ───────────────── */
.shell-grid-3{
  flex:1 1 auto;
  display:grid !important;
  grid-template-columns: 0px 1fr 0px !important;
  column-gap:0;
  min-height:0;
  overflow:hidden;
  align-items:stretch;
  box-sizing:border-box;
}
.shell-grid-3 > *{ min-width:0; min-height:0; }
.shell-grid-3 > .left-shell{ grid-column:1 !important; }
.shell-grid-3 > .shell-main{ grid-column:2 !important; }
.shell-grid-3 > .slug-shell{ grid-column:3 !important; }

/* PUBLIC: left sidebar disabled */
.left-shell.sidebar{ display:none !important; }

/* ───────────────── MAIN CONTENT ───────────────── */
.shell-main{
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;

  padding:
    calc(var(--shell-safe-pad) + var(--top-safe-h))
    calc(var(--shell-safe-pad) + var(--shell-slug))
    18px
    calc(var(--shell-safe-pad) + var(--left-rail-w));

  box-sizing:border-box;
  overscroll-behavior:contain;

  scrollbar-width:thin;
  scrollbar-color:var(--sb-thumb) transparent;
  scrollbar-gutter:stable !important;

  position:relative;
}

/* ───────────────── HOST MODE — keep inner apps full height ───────────────── */
.shell-main:has(.browser-ytb-root){
  overflow:hidden !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}
.shell-main:has(.ytm-root),
.shell-main:has(.ytm-all-root),
.shell-main:has(.ytmPmain-root),
.shell-main:has(.browser-ytb-main-root),
.shell-main:has(.browser-ytb-root){
  overflow:hidden !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
}
.shell-main:has(.ytm-root) > *,
.shell-main:has(.ytm-all-root) > *,
.shell-main:has(.ytmPmain-root) > *,
.shell-main:has(.browser-ytb-main-root) > *,
.shell-main:has(.browser-ytb-root) > *{
  min-height:0 !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
.shell-main .ytm-root,
.shell-main .ytm-all-root,
.shell-main .ytmPmain-root,
.shell-main .browser-ytb-main-root,
.shell-main .browser-ytb-root{
  min-height:0 !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  max-width:100% !important;
}

/* ───────────────── SLUG SIDEBAR (FIXED RIGHT RAIL) ───────────────── */
.slug-shell.subsidebar{
  position:fixed !important;
  right:0 !important;
  top: var(--top-safe-h) !important;

  width: var(--shell-slug) !important;
  min-width: var(--shell-slug) !important;
  max-width: var(--shell-slug) !important;

  height: calc(100vh - var(--top-safe-h)) !important;
  padding:8px var(--slug-pad-x) 10px;
  box-sizing:border-box;

  background:transparent;
  border:none;

  overflow-y:auto !important;
  overflow-x:hidden !important;
  z-index:650 !important;

  overscroll-behavior:contain;

  scrollbar-width:thin;
  scrollbar-color:var(--sb-thumb) transparent;
  scrollbar-gutter:stable !important;
}

/* slug search (sticky) */
.slug-search-input{
  width:100%;
  margin:0 0 8px 0;
  padding:6px 8px;

  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.72);
  color:rgba(255,255,255,0.88);
  font-size:var(--fs-ui-sm);
  box-sizing:border-box;
  outline:none;
  font-family:var(--ui-font);
  font-weight:400;

  position:sticky;
  top:0;
  z-index:900;
}
.slug-search-input::placeholder{ color:rgba(255,255,255,0.35); }
.slug-search-input:focus{ border-color:rgba(255,255,255,0.22); }

/* tree layout */
.tree{ display:flex; flex-direction:column; gap:16px; }
.tree-card{ background:transparent; border:none; padding:0; margin:0; }
.tree-empty{ opacity:.7; font-size:var(--fs-meta); padding:8px 10px; color:var(--text-faint); }

.shell-root .slug-shell.subsidebar a.sub-link{
  display:block;
  width:100%;
  text-decoration:none;
  color:inherit;
  position:relative;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* slug button (base) */
.tree-btn{
  display:block;
  width:100%;
  box-sizing:border-box;
  text-align:center;

  font-family:var(--ui-font);
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:rgba(255,255,255,0.84);
  background:transparent !important;
  border:none;

  padding:10px 6px;
  margin:0;

  user-select:none;
  line-height:1.15;
  position:relative;
  z-index:5;

  font-size:12px !important;

  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  hyphens:auto !important;

  transform:scale(1);
  transform-origin:center center;
  transition:transform .11s ease, color .11s ease, opacity .11s ease;
  will-change:transform;
}

/* hard lock spacing so it never "grows" from padding/font-size changes */
.shell-root .slug-shell.subsidebar :is(
  .tree-btn,
  a.sub-link:hover > .tree-btn,
  a.sub-link:focus-visible > .tree-btn,
  a.sub-link.active > .tree-btn,
  a.sub-link[aria-selected="true"] > .tree-btn,
  a.sub-link[aria-current="page"] > .tree-btn
){
  padding:10px 6px !important;
  line-height:1.15 !important;
  font-size:12px !important;
  -webkit-text-size-adjust:100% !important;
  zoom:1 !important;
}

/* ───────────────── TOP UI SAFE BAR ───────────────── */
.top-chessboard{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;

  height: var(--top-safe-h) !important;
  z-index:2000 !important;

  overflow:visible !important;
  box-sizing:border-box;

  background-color: rgba(5,5,7,0.38) !important;
  background-image: linear-gradient(
    180deg,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.34) 55%,
    rgba(0,0,0,0.16) 100%
  ) !important;

  border:none !important;
  box-shadow:0 12px 28px rgba(0,0,0,0.65) !important;
  outline:none !important;
}
.top-chessboard::before,
.top-chessboard::after{ content:none !important; display:none !important; }
.top-chessboard .chess-brand{ display:none !important; }

/* inner wrappers should not paint */
.top-chessboard :is(.chess-grid, .chess-grid-top, .chess-grid-sub, .top-nonfin-strip){
  background:transparent !important;
}

/* keep tiles above */
.top-chessboard > *{ position:relative; z-index:1; }

/* ───────────────── ROW1: VERTICAL LEFT RAIL ───────────────── */
.top-chessboard .chess-grid{
  position:absolute;
  margin:0;
  padding:0;
  overflow:visible !important;
}
.top-chessboard .chess-grid-top{
  top:0;
  left:0;

  display:grid !important;
  grid-template-columns: var(--chess-tile) !important;
  grid-auto-rows: var(--chess-tile) !important;
  grid-auto-flow: row !important;
  gap:0;

  width: var(--chess-tile) !important;
  max-width: var(--chess-tile) !important;
  max-height:100vh !important;
  overflow-y:auto !important;
  overflow-x:visible !important;
  overscroll-behavior:contain;
  z-index:2100 !important;
}

/* ───────────────── ROW2: TOP STRIP ───────────────── */
.top-chessboard .chess-grid-sub{
  top:0;
  left: var(--chess-tile);
  right: calc(var(--row1-tile) + var(--dash-tools-w)) !important;

  height: var(--chess-sub-h) !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:0 !important;

  align-items:stretch !important;
  justify-content:flex-start !important;

  overflow:hidden !important;
}

/* ───────────────── TILE BASE LOOK ───────────────── */
.chess-tile{
  width:var(--chess-tile);
  height:var(--chess-tile);
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;

  text-decoration:none;
  user-select:none;

  font-family:var(--ui-font);
  font-size:12px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--idle-text);

  background:
    linear-gradient(180deg,
      var(--idle-g-a) 0%,
      var(--idle-g-b) 48%,
      var(--idle-g-c) 100%
    ) !important;

  border:none;

  box-shadow:
    0 10px 20px rgba(0,0,0,0.72),
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 -1px 0 rgba(0,0,0,0.55) inset !important;

  position:relative;
  overflow:visible;
  isolation:isolate;

  transition:opacity .12s ease, box-shadow .12s ease, color .12s ease;
  pointer-events:auto !important;
}

/* IMPORTANT: remove ALL overlay/pixel pseudo-surfaces */
.top-chessboard .chess-tile::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

.chess-tile.empty{
  visibility:hidden;
  pointer-events:none;
  box-shadow:none !important;
  background:transparent !important;
}

/* label baseline */
.chess-tile .tile-label{
  z-index:110;
  display:inline-block;
  text-shadow: var(--label-shadow);
  font-weight:400 !important;

  transform:scale(1);
  transform-origin:center center;
  transition:transform .11s ease;
  will-change:transform;
}

/* Dim idle items (optional) */
.top-chessboard .chess-tile:not(.empty):not(.active):not([aria-selected="true"]){
  opacity: var(--idle-opacity);
}
.top-chessboard .chess-tile:not(.empty):hover{ opacity:1; }
.top-chessboard .chess-tile:is(.active,[aria-selected="true"]){ opacity:1; }

/* ───────────────── ROW1 (logos) ───────────────── */
.top-chessboard .chess-grid-top .chess-tile::before{
  content:"";
  position:absolute;
  left:50%;
  top:38%;
  transform: translate(-50%, -50%);
  width:85%;
  height:85%;
  z-index:90;
  pointer-events:none;

  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  opacity:0.40;
}

/* idle logos ONLY (no active variants) */
.top-chessboard .chess-grid-top .chess-tile[data-logo="logo1"]::before{ background-image:url("/static/img/logo1at.png") !important; }
.top-chessboard .chess-grid-top .chess-tile[data-logo="logo2"]::before{ background-image:url("/static/img/logo2at.png") !important; }
.top-chessboard .chess-grid-top .chess-tile[data-logo="logo3"]::before{ background-image:url("/static/img/logo3at.png") !important; }
.top-chessboard .chess-grid-top .chess-tile[data-logo="logo4"]::before{ background-image:url("/static/img/logo4at.png") !important; }
.top-chessboard .chess-grid-top .chess-tile[data-logo="logo5"]::before{ background-image:url("/static/img/logo5art2.png") !important; }
.top-chessboard .chess-grid-top .chess-tile[data-logo="logo9"]::before{ background-image:url("/static/img/logo1client.png") !important; }

/* hover OR active => logo brighter */
.top-chessboard .chess-grid-top .chess-tile:not(.empty):hover::before,
.top-chessboard .chess-grid-top .chess-tile:is(.active,[aria-selected="true"])::before{
  opacity:0.88 !important;
}

/* ROW1 visual shrink inside structural 150px cell */
.top-chessboard .chess-grid-top .chess-tile:not(.empty){
  width: var(--row1-tile) !important;
  height: var(--row1-tile) !important;
  justify-self:center !important;
  align-self:center !important;
  margin:auto !important;
}

/* ROW1 label: bottom centered */
.top-chessboard .chess-grid-top .chess-tile .tile-label{
  position:absolute;
  left:50% !important;
  bottom:8px !important;
  transform: translateX(-50%) scale(1) !important;

  text-align:center !important;
  width: calc(100% - 14px) !important;

  background:transparent !important;
  padding:0 !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;

  font-size:14px !important;
  letter-spacing:.08em !important;
  line-height:1.04 !important;
  z-index:120 !important;
  transform-origin:center center !important;
}

/* smaller screens: row1 label down a bit more */
@media screen and (max-width: 1280px), screen and (max-height: 820px){
  .top-chessboard .chess-grid-top .chess-tile .tile-label{
    font-size:12px !important;
    letter-spacing:.06em !important;
    bottom:6px !important;
    width: calc(100% - 10px) !important;
  }
}

/* ───────────────── ROW2 tiles: HALF HEIGHT, NO LOGOS ───────────────── */
.top-chessboard .chess-grid-sub .chess-tile{
  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;
  min-height: var(--chess-sub-h) !important;

  align-items:center;
  justify-content:center;

  font-size:12.9px !important;
  letter-spacing:.10em !important;

  box-shadow: 0 6px 14px rgba(0,0,0,0.50);
}
.top-chessboard .chess-grid-sub .chess-tile::before{
  content:none !important;
  display:none !important;
}

/* row2 label: ellipsis-safe */
.top-chessboard .chess-grid-sub .tile-label{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.05;
  padding:0 6px;
  text-align:right;
  text-shadow:none !important;
}

/* slightly tighter row2 / nonfin on smaller screens */
@media screen and (max-width: 1280px), screen and (max-height: 820px){
  .top-chessboard .chess-grid-sub .chess-tile{
    font-size:11.8px !important;
    letter-spacing:.08em !important;
  }
  .top-chessboard .top-nonfin-strip .nonfin-switch-btn{
    font-size:11.8px !important;
    letter-spacing:.08em !important;
  }
}

/* ───────────────── NONFIN STRIP (horizontal under ROW2) ───────────────── */
.top-chessboard .top-nonfin-strip{
  position:fixed !important;
  top: var(--chess-sub-h) !important;
  left: var(--chess-tile) !important;
  right: calc(var(--row1-tile) + var(--public-cluster-w)) !important;

  height: var(--nonfin-btn-h) !important;
  z-index:1600 !important;

  overflow:visible !important;
  pointer-events:auto !important;
  background:transparent !important;
}

/* container */
.top-chessboard .top-nonfin-strip :is(.nonfin-switch-wrap,.nonfin-switch){
  height:100% !important;
  width:100% !important;

  display:flex !important;
  flex-direction:row !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:0 !important;

  margin:0 !important;
  padding:0 !important;

  background:transparent !important;
  border:none !important;
}

/* button look */
.top-chessboard .top-nonfin-strip .nonfin-switch-btn{
  width: var(--nonfin-tile) !important;
  height: var(--nonfin-btn-h) !important;

  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-family:var(--ui-font) !important;
  font-size:12.9px !important;
  font-weight:400 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  line-height:1.05 !important;

  color:var(--idle-text) !important;
  background:
    linear-gradient(180deg,
      var(--idle-g-a) 0%,
      var(--idle-g-b) 48%,
      var(--idle-g-c) 100%
    ) !important;

  border:none !important;

  box-shadow:
    0 10px 20px rgba(0,0,0,0.72),
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 -1px 0 rgba(0,0,0,0.55) inset !important;

  position:relative !important;
  isolation:isolate !important;
  text-decoration:none !important;

  opacity: var(--idle-opacity);
  transition: transform .11s ease, opacity .12s ease, box-shadow .12s ease, color .12s ease !important;

  transform: scale(1);
  transform-origin:center center;
  will-change: transform;
}

/* no pseudo overlays */
.top-chessboard .top-nonfin-strip .nonfin-switch-btn::before,
.top-chessboard .top-nonfin-strip .nonfin-switch-btn::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* active/hover opacity */
.top-chessboard .top-nonfin-strip .nonfin-switch-btn:hover{ opacity:1; }
.top-chessboard .top-nonfin-strip .nonfin-switch-btn.is-active{ opacity:1; }

/* ───────────────── FONT SCALE HOVER/ACTIVE (ALL BUTTONS) ───────────────── */
@media (hover:hover){
  .top-chessboard .chess-tile:not(.empty):hover .tile-label,
  .top-chessboard .chess-tile:not(.empty):focus-visible .tile-label{
    transform: scale(1.15) !important;
  }

  .top-chessboard .top-nonfin-strip .nonfin-switch-btn:hover,
  .top-chessboard .top-nonfin-strip .nonfin-switch-btn:focus-visible{
    transform: scale(1.15) !important;
  }

  .shell-root .slug-shell.subsidebar a.sub-link:hover > .tree-btn,
  .shell-root .slug-shell.subsidebar a.sub-link:focus-visible > .tree-btn,
  .shell-root .slug-shell.subsidebar .tree-btn:hover,
  .shell-root .slug-shell.subsidebar .tree-btn:focus-visible{
    transform: scale(1.15) !important;
  }
}

/* ACTIVE/SELECTED */
.top-chessboard .chess-tile:is(.active,[aria-selected="true"]) .tile-label{
  transform: scale(1.30) !important;
}

.top-chessboard .top-nonfin-strip .nonfin-switch-btn.is-active{
  transform: scale(1.30) !important;
}

.shell-root .slug-shell.subsidebar :is(
  a.sub-link.active > .tree-btn,
  a.sub-link[aria-selected="true"] > .tree-btn,
  a.sub-link[aria-current="page"] > .tree-btn
){
  transform: scale(1.30) !important;
}

/* ───────────────── PINNED PUBLIC TILES — edge aligned ───────────────── */
.shell-root .top-chessboard :is(
  [data-pin="dashboard"],
  .chess-grid-top .chess-tile[data-logo="logo9"],
  a[href*="#/auth"]
){
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  margin:0 !important;

  width: var(--row1-tile) !important;
  height: var(--row1-tile) !important;

  z-index:2600 !important;

  display:flex !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* dashboard label */
.shell-root .top-chessboard :is(
  [data-pin="dashboard"],
  .chess-grid-top .chess-tile[data-logo="logo9"],
  a[href*="#/auth"]
) .tile-label{
  position:absolute !important;
  left:50% !important;
  bottom:8px !important;
  transform: translateX(-50%) scale(1) !important;
  width: calc(100% - 14px) !important;
  text-align:center !important;
  background:transparent !important;
  padding:0 !important;
  text-shadow:var(--label-shadow) !important;
  font-weight:400 !important;
}

/* ───────────────── PUBLIC CLUSTER — About + Terms + Offer ───────────────── */
.shell-root .top-chessboard .public-about-terms{
  position:fixed !important;
  top:0 !important;
  right: calc(var(--row1-tile) + var(--chess-tile)) !important;
  left:auto !important;
  bottom:auto !important;

  width: calc(2 * var(--chess-tile)) !important;
  height: var(--chess-sub-h) !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:0 !important;

  padding:0 !important;
  margin:0 !important;

  z-index:2555 !important;
  overflow:visible !important;
  pointer-events:auto !important;
}

.shell-root .top-chessboard .public-about-terms > a.chess-tile{
  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;
  min-height: var(--chess-sub-h) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.shell-root .top-chessboard .public-about-terms > a.chess-tile .tile-label{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  padding:0 10px !important;
  margin:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-shadow:none !important;
  line-height:1 !important;
}

/* OFFER pinned next to avatar */
.shell-root .top-chessboard .public-quick-auth{
  position:fixed !important;
  top:0 !important;
  right: var(--row1-tile) !important;
  left:auto !important;

  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:0 !important;

  z-index:2555 !important;
  pointer-events:auto !important;
}

.shell-root .top-chessboard .public-quick-auth > a.chess-tile{
  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;
  min-height: var(--chess-sub-h) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.shell-root .top-chessboard .public-quick-auth > a.chess-tile .tile-label{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  padding:0 10px !important;
  margin:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-shadow:none !important;
  line-height:1 !important;
}

/* neutralize older pinning by href */
.shell-root .top-chessboard :is(
  a[href*="/offer"], a[href*="/pricing"], a[href*="/google"], a[href*="/accounts/google/login"]
){
  left:auto !important;
}

/* ───────────────── EXTENDED — pin My Channels + Watchlist ───────────────── */
.shell-root .top-chessboard .chess-grid-sub{
  right: calc(var(--row1-tile) + var(--dash-tools-w)) !important;
}

.shell-root .top-chessboard .chess-grid-sub a.chess-tile[href^="#/watchlist"]{
  position:fixed !important;
  top:0 !important;
  right: var(--row1-tile) !important;

  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;
  min-width: var(--chess-tile) !important;
  max-width: var(--chess-tile) !important;
  min-height: var(--chess-sub-h) !important;
  max-height: var(--chess-sub-h) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  z-index:2555 !important;
  flex:0 0 auto !important;
}

.shell-root .top-chessboard .chess-grid-sub a.chess-tile[href^="#/my_channels"]{
  position:fixed !important;
  top:0 !important;
  right: calc(var(--row1-tile) + var(--chess-tile)) !important;

  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;
  min-width: var(--chess-tile) !important;
  max-width: var(--chess-tile) !important;
  min-height: var(--chess-sub-h) !important;
  max-height: var(--chess-sub-h) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  z-index:2555 !important;
  flex:0 0 auto !important;
}

.shell-root .top-chessboard .chess-grid-sub :is(
  a.chess-tile[href^="#/my_channels"],
  a.chess-tile[href^="#/watchlist"]
) .tile-label{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  height:100% !important;

  padding:0 10px !important;
  margin:0 !important;

  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-shadow:none !important;

  font-size:12.9px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
}

.shell-root .top-chessboard .chess-grid-sub :is(
  a.chess-tile[href^="#/my_channels"],
  a.chess-tile[href^="#/watchlist"]
){
  transform:none !important;
}

/* ───────────────── SEO iframe host mode ───────────────── */
.shell-main:has(.seo-embed-iframe){
  overflow:hidden !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}
.seo-embed-host{
  flex:1 1 auto !important;
  min-height:0 !important;
  min-width:0 !important;
  width:100% !important;
  height:100% !important;
}
.seo-embed-iframe{
  flex:1 1 auto !important;
  min-height:0 !important;
  min-width:0 !important;
}

/* ───────────────── KEYBOARD FOCUS BASELINE ───────────────── */
.top-chessboard .chess-tile:focus-visible,
.top-chessboard .top-nonfin-strip .nonfin-switch-btn:focus-visible,
.shell-root .slug-shell.subsidebar a.sub-link:focus-visible > .tree-btn,
.shell-root .slug-shell.subsidebar .tree-btn:focus-visible{
  outline:1px solid rgba(255,255,255,0.22) !important;
  outline-offset:-2px !important;
}

/* ───────────────── HOMEPAGE: hide right slug rail ───────────────── */
.shell-root.is-homepage .slug-shell{ display:none !important; }
.shell-root.is-homepage .left-shell.sidebar{ display:none !important; }

.shell-root.is-homepage .shell-grid-3{
  display:grid !important;
  grid-template-columns:1fr !important;
}

.shell-root.is-homepage .shell-main{
  padding-right:10px !important;
  margin-right:0 !important;
  overflow:auto !important;
  min-width:0 !important;
}

body.hp-hide-slugrail .slug-shell.subsidebar{
  position:absolute !important;
  right:-99999px !important;
}

/* ───────────────── DASH LOADING OVERLAY ─────────────────
   DISABLED HERE.
   SINGLE SOURCE OF TRUTH = iframe loader from:
   templates/django_plotly_dash/plotly_app.html
────────────────────────────────────────────────────────── */
#content.shell-main{
  position:relative;
  min-height:100%;
}

#content.shell-main[data-dash-is-loading="true"]::before,
#content.shell-main[data-dash-is-loading="true"]::after{
  content:none !important;
  display:none !important;
}

.dash-loading{
  opacity:1 !important;
}
.dash-loading *{
  border-radius:0 !important;
}

/* =============================================================================
   FIX: DETAIL VIEW scroll on SHELL-MAIN
============================================================================= */
.shell-main:has(.ytd-root){
  overflow-y:auto !important;
  overflow-x:hidden !important;

  padding-top: calc(var(--shell-safe-pad) + var(--top-safe-h)) !important;
  padding-right: calc(var(--shell-safe-pad) + var(--shell-slug)) !important;
  padding-bottom: 18px !important;
  padding-left: calc(var(--shell-safe-pad) + var(--left-rail-w)) !important;

  display:block !important;
  min-height:0 !important;
}

.shell-main:has(.ytd-root) .ytd-root{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  padding:14px !important;
}

.shell-main:has(.ytd-root) :is(.ytd-root, .ytd-container, .ytd-tab-body){
  min-height:0 !important;
}

.shell-main:has(.ytd-root).ytm-host,
.shell-main:has(.ytd-root).ytm-host.ytm-mounted{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-top: calc(var(--shell-safe-pad) + var(--top-safe-h)) !important;
  padding-right: calc(var(--shell-safe-pad) + var(--shell-slug)) !important;
  padding-left: calc(var(--shell-safe-pad) + var(--left-rail-w)) !important;
}

/* =============================================================================
   FIX: ALL VIEW scroll on SHELL-MAIN
============================================================================= */
.shell-main:has(.ytm-all-root){
  overflow-y:auto !important;
  overflow-x:hidden !important;

  padding-top: calc(var(--shell-safe-pad) + var(--top-safe-h)) !important;
  padding-right: calc(var(--shell-safe-pad) + var(--shell-slug)) !important;
  padding-bottom: 18px !important;
  padding-left: calc(var(--shell-safe-pad) + var(--left-rail-w)) !important;

  display:block !important;
  min-height:0 !important;
}

.shell-main:has(.ytm-all-root) .ytm-all-root{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
}

.shell-main:has(.ytm-all-root).ytm-host,
.shell-main:has(.ytm-all-root).ytm-host.ytm-mounted{
  overflow-y:auto !important;
  overflow-x:hidden !important;

  padding-top: calc(var(--shell-safe-pad) + var(--top-safe-h)) !important;
  padding-right: calc(var(--shell-safe-pad) + var(--shell-slug)) !important;
  padding-left: calc(var(--shell-safe-pad) + var(--left-rail-w)) !important;
  padding-bottom: 18px !important;

  display:block !important;
}

/* ───────────────── SLUG TEXT LOOK ───────────────── */
.shell-root .slug-shell.subsidebar a.sub-link > .tree-btn{
  color:rgba(255,255,255,0.52) !important;
  opacity:0.85 !important;
  text-shadow:none !important;
}

.shell-root .slug-shell.subsidebar :is(
  a.sub-link.active > .tree-btn,
  a.sub-link[aria-selected="true"] > .tree-btn,
  a.sub-link[aria-current="page"] > .tree-btn
){
  color:rgba(255,255,255,0.98) !important;
  text-shadow:0 0 10px rgba(255,255,255,0.18), var(--label-shadow) !important;
  opacity:1 !important;
}

/* ───────────────── conditional nonfin buttons ───────────────── */
.nonfin-switch[data-has-bili="0"] .nonfin-switch-btn--bilibili{
  display:none !important;
}
.nonfin-switch[data-has-podcast="0"] .nonfin-switch-btn--podcast{
  display:none !important;
}

/* ============================================================================
   LEFT RAIL LABELS — keep label UNDER image, but allow overflow over content
   ========================================================================== */

.top-chessboard,
.top-chessboard .chess-grid,
.top-chessboard .chess-grid-top,
.top-chessboard .chess-grid-top .chess-tile{
  overflow: visible !important;
}

.top-chessboard .chess-grid-top{
  z-index: 2200 !important;
}

.top-chessboard .chess-grid-top .chess-tile{
  position: relative !important;
  z-index: 2200 !important;
}

/* label stays under image */
.top-chessboard .chess-grid-top .chess-tile .tile-label{
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: 8px !important;

  /* kluczowe: nie ograniczaj szerokości do kafla */
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;

  transform: translateX(-50%) scale(1) !important;
  transform-origin: center center !important;

  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;

  padding: 0 !important;
  margin: 0 !important;

  text-align: center !important;
  line-height: 1.02 !important;

  z-index: 5000 !important;
  pointer-events: none !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* hovered / active tile above content */
.top-chessboard .chess-grid-top .chess-tile:hover,
.top-chessboard .chess-grid-top .chess-tile:focus-visible,
.top-chessboard .chess-grid-top .chess-tile.active,
.top-chessboard .chess-grid-top .chess-tile[aria-selected="true"]{
  z-index: 5000 !important;
}

.top-chessboard .chess-grid-top .chess-tile:hover .tile-label,
.top-chessboard .chess-grid-top .chess-tile:focus-visible .tile-label{
  transform: translateX(-50%) scale(1.15) !important;
}

.top-chessboard .chess-grid-top .chess-tile.active .tile-label,
.top-chessboard .chess-grid-top .chess-tile[aria-selected="true"] .tile-label{
  transform: translateX(-50%) scale(1.30) !important;
}

/* dashboard tile zostaje po staremu */
.shell-root .top-chessboard :is(
  [data-pin="dashboard"],
  .chess-grid-top .chess-tile[data-logo="logo9"],
  a[href*="#/auth"]
) .tile-label{
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: 8px !important;
  width: calc(100% - 14px) !important;
  max-width: calc(100% - 14px) !important;
  white-space: normal !important;
  text-align: center !important;
  transform: translateX(-50%) scale(1) !important;
  transform-origin: center center !important;
}


/* ============================================================================
   LEFT RAIL LABELS — under image, but expand mostly to the right
   ========================================================================== */

.top-chessboard,
.top-chessboard .chess-grid,
.top-chessboard .chess-grid-top,
.top-chessboard .chess-grid-top .chess-tile{
  overflow: visible !important;
}

.top-chessboard .chess-grid-top{
  z-index: 2200 !important;
}

.top-chessboard .chess-grid-top .chess-tile{
  position: relative !important;
  z-index: 2200 !important;
}

/* idle: label under image */
.top-chessboard .chess-grid-top .chess-tile .tile-label{
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: 8px !important;

  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;

  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;

  padding: 0 !important;
  margin: 0 !important;

  text-align: center !important;
  line-height: 1.02 !important;

  /* kluczowe */
  transform: translateX(-50%) scale(1) !important;
  transform-origin: left center !important;

  z-index: 5000 !important;
  pointer-events: none !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* hovered / active tile above content */
.top-chessboard .chess-grid-top .chess-tile:hover,
.top-chessboard .chess-grid-top .chess-tile:focus-visible,
.top-chessboard .chess-grid-top .chess-tile.active,
.top-chessboard .chess-grid-top .chess-tile[aria-selected="true"]{
  z-index: 5000 !important;
}

/* hover: still anchored under image, but expands more to the right */
.top-chessboard .chess-grid-top .chess-tile:hover .tile-label,
.top-chessboard .chess-grid-top .chess-tile:focus-visible .tile-label{
  transform: translateX(-42%) scale(1.15) !important;
}

/* active: stronger version */
.top-chessboard .chess-grid-top .chess-tile.active .tile-label,
.top-chessboard .chess-grid-top .chess-tile[aria-selected="true"] .tile-label{
  transform: translateX(-38%) scale(1.30) !important;
}

/* dashboard tile stays unchanged */
.shell-root .top-chessboard :is(
  [data-pin="dashboard"],
  .chess-grid-top .chess-tile[data-logo="logo9"],
  a[href*="#/auth"]
) .tile-label{
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: 8px !important;
  width: calc(100% - 14px) !important;
  max-width: calc(100% - 14px) !important;
  white-space: normal !important;
  text-align: center !important;
  transform: translateX(-50%) scale(1) !important;
  transform-origin: center center !important;
}




/* ============================================================================
   RIGHT SLUG RAIL — multiline labels on space / hyphen / underscore
   ========================================================================== */

.tree-btn{
  display:block;
  width:100%;
  box-sizing:border-box;
  text-align:center;

  font-family:var(--ui-font);
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:rgba(255,255,255,0.84);
  background:transparent !important;
  border:none;

  padding:10px 6px;
  margin:0;

  user-select:none;
  line-height:1.08;
  position:relative;
  z-index:5;

  font-size:12px !important;

  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  hyphens:manual !important;

  transform:scale(1);
  transform-origin:center center;
  transition:transform .11s ease, color .11s ease, opacity .11s ease;
  will-change:transform;
}

.shell-root .slug-shell.subsidebar a.sub-link > .tree-btn,
.shell-root .slug-shell.subsidebar .tree-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  min-height:32px !important;
}

.shell-root .slug-shell.subsidebar .tree-label{
  display:inline-block !important;
  width:100% !important;
  white-space:normal !important;
  line-height:1.02 !important;
  text-align:center !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
}

/* każdy ręcznie wstawiony <br> ma być zwartą nową linią */
.shell-root .slug-shell.subsidebar .tree-label br{
  display:block !important;
  content:"" !important;
  margin:0 !important;
}

/* zachowaj hover/active scale bez rozjeżdżania boxów */
.shell-root .slug-shell.subsidebar :is(
  .tree-btn,
  a.sub-link:hover > .tree-btn,
  a.sub-link:focus-visible > .tree-btn,
  a.sub-link.active > .tree-btn,
  a.sub-link[aria-selected="true"] > .tree-btn,
  a.sub-link[aria-current="page"] > .tree-btn
){
  padding:10px 6px !important;
  line-height:1.08 !important;
  font-size:12px !important;
  -webkit-text-size-adjust:100% !important;
  zoom:1 !important;
}



/* ============================================================================
   PATCH — row1 left rail: a bit larger spacing + wider left reserve
   Wklej NA KOŃCU TreeSelector.css
   ========================================================================== */

:root{
  --row1-base: 150px !important;
  --row1-tile: calc(var(--row1-base) * var(--row1-scale)) !important;

  /* większy odstęp między kaflami */
  --row1-gap: clamp(12px, calc(var(--row1-tile) * 0.22), 28px) !important;

  /* komórka strukturalna = kafel + odstęp */
  --chess-tile: calc(var(--row1-tile) + var(--row1-gap)) !important;

  /* trochę szersza rezerwa po lewej, żeby treść nie była tak blisko */
  --left-rail-w: calc(var(--chess-tile) + 18px) !important;
}

/* lewa pionowa kolumna */
.top-chessboard .chess-grid-top{
  grid-template-columns: var(--chess-tile) !important;
  grid-auto-rows: var(--chess-tile) !important;
  width: var(--chess-tile) !important;
  max-width: var(--chess-tile) !important;
}

/* sam kafel pozostaje wyśrodkowany w większej komórce */
.top-chessboard .chess-grid-top .chess-tile:not(.empty){
  width: var(--row1-tile) !important;
  height: var(--row1-tile) !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
}

/* dashboard tile jak reszta */
.shell-root .top-chessboard :is(
  [data-pin="dashboard"],
  .chess-grid-top .chess-tile[data-logo="logo9"],
  a[href*="#/auth"]
){
  width: var(--row1-tile) !important;
  height: var(--row1-tile) !important;
}

/* zachowaj poprawne odsunięcia górnych pasów */
.top-chessboard .chess-grid-sub{
  left: var(--chess-tile) !important;
  right: calc(var(--row1-tile) + var(--dash-tools-w)) !important;
}

.top-chessboard .top-nonfin-strip{
  left: var(--chess-tile) !important;
  right: calc(var(--row1-tile) + var(--public-cluster-w)) !important;
}

/* delikatna korekta na mniejszych ekranach */
@media screen and (max-width: 1280px), screen and (max-height: 820px){
  :root{
    --row1-gap: clamp(9px, calc(var(--row1-tile) * 0.18), 20px) !important;
    --left-rail-w: calc(var(--chess-tile) + 14px) !important;
  }
}

@media screen and (max-width: 1180px), screen and (max-height: 760px){
  :root{
    --row1-gap: clamp(7px, calc(var(--row1-tile) * 0.15), 16px) !important;
    --left-rail-w: calc(var(--chess-tile) + 10px) !important;
  }
}


/* ============================================================================
   EXTENDED: when right slug shell is hidden inline, remove reserved space
   ========================================================================== */

/* sam shell znika całkowicie */
.shell-grid-3:has(#slug-shell[style*="display: none"]) > #slug-shell,
.shell-grid-3:has(#slug-shell[style*="display:none"]) > #slug-shell{
  display:none !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  overflow:hidden !important;
}

/* grid bez prawego raila */
.shell-grid-3:has(#slug-shell[style*="display: none"]),
.shell-grid-3:has(#slug-shell[style*="display:none"]){
  grid-template-columns: 0px 1fr 0px !important;
}

/* usuń rezerwę po prawej w zwykłym shell-main */
.shell-grid-3:has(#slug-shell[style*="display: none"]) > .shell-main,
.shell-grid-3:has(#slug-shell[style*="display:none"]) > .shell-main{
  padding-right: 10px !important;
  margin-right: 0 !important;
}

/* nadpisz także host/detail/all rules, które przywracają --shell-slug */
.shell-grid-3:has(#slug-shell[style*="display: none"]) > .shell-main:has(.ytd-root),
.shell-grid-3:has(#slug-shell[style*="display:none"]) > .shell-main:has(.ytd-root),
.shell-grid-3:has(#slug-shell[style*="display: none"]) > .shell-main:has(.ytm-all-root),
.shell-grid-3:has(#slug-shell[style*="display:none"]) > .shell-main:has(.ytm-all-root),
.shell-grid-3:has(#slug-shell[style*="display: none"]) > .shell-main:has(.ytm-root),
.shell-grid-3:has(#slug-shell[style*="display:none"]) > .shell-main:has(.ytm-root),
.shell-grid-3:has(#slug-shell[style*="display: none"]) > .shell-main:has(.ytmPmain-root),
.shell-grid-3:has(#slug-shell[style*="display:none"]) > .shell-main:has(.ytmPmain-root),
.shell-grid-3:has(#slug-shell[style*="display: none"]) > .shell-main:has(.browser-ytb-main-root),
.shell-grid-3:has(#slug-shell[style*="display:none"]) > .shell-main:has(.browser-ytb-main-root),
.shell-grid-3:has(#slug-shell[style*="display: none"]) > .shell-main:has(.browser-ytb-root),
.shell-grid-3:has(#slug-shell[style*="display:none"]) > .shell-main:has(.browser-ytb-root){
  padding-right: 10px !important;
  margin-right: 0 !important;
}

/* opcjonalnie: jeśli to homepage/breaking, schowaj też input search w railu */
.shell-grid-3:has(#slug-shell[style*="display: none"]) .slug-search-input,
.shell-grid-3:has(#slug-shell[style*="display:none"]) .slug-search-input{
  display:none !important;
}



/* =====================================================================
   GLOBAL NONFIN (FIX FOR FINANCE AI SWITCH)
   ===================================================================== */

/* wrapper */
.nonfin-switch-wrap{
  display:flex;
  width:100%;
  justify-content:center;
  align-items:center;
}

/* container */
.nonfin-switch{
  display:flex;
  flex-direction:row;
  gap:0;
  align-items:stretch;
}

/* BUTTON STYLE = IDENTYCZNY jak w top-nonfin-strip */
.nonfin-switch-btn{
  width: var(--nonfin-tile);
  height: var(--nonfin-btn-h);

  display:flex;
  align-items:center;
  justify-content:center;

  font-family:var(--ui-font);
  font-size:12.9px;
  font-weight:400;
  letter-spacing:.10em;
  text-transform:uppercase;
  line-height:1.05;

  color:var(--idle-text);

  background:
    linear-gradient(180deg,
      var(--idle-g-a) 0%,
      var(--idle-g-b) 48%,
      var(--idle-g-c) 100%
    );

  border:none;

  box-shadow:
    0 10px 20px rgba(0,0,0,0.72),
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 -1px 0 rgba(0,0,0,0.55) inset;

  text-decoration:none;

  opacity: var(--idle-opacity);

  transform: scale(1);
  transform-origin:center center;

  transition:
    transform .11s ease,
    opacity .12s ease,
    box-shadow .12s ease,
    color .12s ease;

  will-change: transform;
}

/* hover */
.nonfin-switch-btn:hover{
  opacity:1;
  transform: scale(1.15);
}

/* active */
.nonfin-switch-btn.is-active{
  opacity:1;
  transform: scale(1.30);
}

/* label */
.nonfin-switch-btn .tile-label{
  display:flex;
  align-items:center;
  justify-content:center;
}



/* ============================================================================
   PATCH — dynamic font scaling for ALL horizontal top bars
   - row2 (sub categories)
   - offer / about / terms
   - top nonfin strip
   - finance AI switch / generic nonfin buttons
   ========================================================================== */

/* 1) global fluid font tokens for horizontal bars */
:root{
  --topbar-fs: clamp(10px, 0.72vw, 12.9px) !important;
  --topbar-fs-lg: clamp(11px, 0.78vw, 14px) !important;
  --topbar-ls: clamp(.05em, 0.08vw, .10em) !important;
}

/* 2) row2 category tiles */
.top-chessboard .chess-grid-sub .chess-tile{
  font-size: var(--topbar-fs) !important;
  letter-spacing: var(--topbar-ls) !important;
}

.top-chessboard .chess-grid-sub .tile-label{
  font-size: inherit !important;
  letter-spacing: inherit !important;
  padding: 0 clamp(4px, 0.5vw, 6px) !important;
}

/* 3) offer / pricing / about / terms */
.shell-root .top-chessboard .public-about-terms > a.chess-tile,
.shell-root .top-chessboard .public-quick-auth > a.chess-tile{
  font-size: var(--topbar-fs) !important;
  letter-spacing: var(--topbar-ls) !important;
}

.shell-root .top-chessboard .public-about-terms > a.chess-tile .tile-label,
.shell-root .top-chessboard .public-quick-auth > a.chess-tile .tile-label{
  font-size: inherit !important;
  letter-spacing: inherit !important;
  padding: 0 clamp(6px, 0.7vw, 10px) !important;
}

/* 4) top horizontal nonfin strip */
.top-chessboard .top-nonfin-strip .nonfin-switch-btn{
  font-size: var(--topbar-fs) !important;
  letter-spacing: var(--topbar-ls) !important;
}

.top-chessboard .top-nonfin-strip .nonfin-switch-btn .tile-label{
  font-size: inherit !important;
  letter-spacing: inherit !important;
  padding: 0 clamp(4px, 0.6vw, 8px) !important;
}

/* 5) global nonfin buttons outside strip (finance ai etc.) */
.nonfin-switch-btn{
  font-size: var(--topbar-fs) !important;
  letter-spacing: var(--topbar-ls) !important;
}

.nonfin-switch-btn .tile-label{
  font-size: inherit !important;
  letter-spacing: inherit !important;
  padding: 0 clamp(4px, 0.6vw, 8px) !important;
}

/* 6) pinned extended horizontal tools if present */
.shell-root .top-chessboard .chess-grid-sub :is(
  a.chess-tile[href^="#/my_channels"],
  a.chess-tile[href^="#/watchlist"]
){
  font-size: var(--topbar-fs) !important;
  letter-spacing: var(--topbar-ls) !important;
}

.shell-root .top-chessboard .chess-grid-sub :is(
  a.chess-tile[href^="#/my_channels"],
  a.chess-tile[href^="#/watchlist"]
) .tile-label{
  font-size: inherit !important;
  letter-spacing: inherit !important;
  padding: 0 clamp(6px, 0.7vw, 10px) !important;
}

/* 7) optional: on very large screens give a bit more breathing room */
@media screen and (min-width: 1500px) and (min-height: 900px){
  :root{
    --topbar-fs: clamp(11px, 0.68vw, 13.6px) !important;
    --topbar-fs-lg: clamp(12px, 0.76vw, 14.6px) !important;
  }
}

/* 8) smaller desktops / tighter laptop heights */
@media screen and (max-width: 1280px), screen and (max-height: 820px){
  :root{
    --topbar-fs: clamp(9.5px, 0.82vw, 11.8px) !important;
    --topbar-fs-lg: clamp(10px, 0.90vw, 12.4px) !important;
    --topbar-ls: clamp(.04em, 0.06vw, .08em) !important;
  }
}

@media screen and (max-width: 1180px), screen and (max-height: 760px){
  :root{
    --topbar-fs: clamp(9px, 0.88vw, 11.2px) !important;
    --topbar-fs-lg: clamp(9.5px, 0.95vw, 11.8px) !important;
    --topbar-ls: clamp(.03em, 0.05vw, .07em) !important;
  }
}



/* finance right slug panel: multi-line labels for channel names */

.finance-tree .tree-leaf.sub-link .tree-btn,
.finance-tree .tree-btn.tree-btn--small {
  white-space: pre-line;
  line-height: 1.05;
  text-align: center;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.finance-tree .tree-leaf.sub-link {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.finance-tree .tree-leaf.sub-link .tree-btn {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
}