/* ============================================================================
   yt.css — the YouTube-clone surface (shared by the friend app/website AND the
   admin desktop). Mirrors YouTube's dark theme 1:1 where practical:
   bg #0f0f0f · text #f1f1f1 · secondary #aaaaaa · chip #272727 · red #ff0000.
   Mobile (<950px) = YouTube mobile app layout; ≥950px = desktop with sidebar.
   ========================================================================== */

.ytui{ --yt-bg:#0f0f0f; --yt-raise:#212121; --yt-chip:#272727; --yt-chip-on:#f1f1f1;
  --yt-txt:#f1f1f1; --yt-dim:#aaaaaa; --yt-line:rgba(255,255,255,.1); --yt-red:#ff0000;
  --yt-blue:#3ea6ff; --yt-navh: var(--nav-h, 0px);
  /* Where anything sticky inside this panel has to stop: under the app's own
     top bar, which is itself sticky at z-40. The friend shell declares
     --ph-top-h (safe-area + 50px) and the admin desktop shell has no top bar
     at all, so the 0px fallback is the right answer there rather than a guess. */
  --yt-stick: var(--ph-top-h, 0px);
  background:var(--yt-bg); color:var(--yt-txt); min-height:70vh; border-radius:14px;
  position:relative;
  /* CLIP, NOT HIDDEN — and the two lines are not a typo. `overflow:hidden`
     makes this box a SCROLL CONTAINER, and a scroll container becomes the
     scrollport for every position:sticky descendant. This panel never scrolls
     (the document does), so `.yt-top{position:sticky;top:0}` was sticking to a
     port that never moves: measured at top:-2150 while the page was scrolled
     2150px, i.e. it simply travelled away with the content and the header, its
     search icon and the avatar were gone the moment you moved. `overflow:clip`
     clips exactly the same way — rounded corners included — WITHOUT creating a
     scroll container, so sticky descendants stick to the viewport again. The
     `hidden` line stays first as the fallback for an engine that predates
     `clip` (Safari < 16): it keeps today's clipping rather than losing it. */
  overflow:hidden;
  overflow:clip;
  font-family:"Roboto","Segoe UI",system-ui,-apple-system,Arial,sans-serif; }
.ytui *{ box-sizing:border-box; }
.ytui img{ display:block; }
.ytui button{ font-family:inherit; }

/* ---------------- top bar ---------------- */
.yt-top{ display:flex; align-items:center; gap:10px; padding:8px 14px; position:sticky;
  top:var(--yt-stick); z-index:30; background:var(--yt-bg); }
.yt-logo{ display:flex; align-items:center; gap:5px; font-weight:700; font-size:var(--fs-head);
  letter-spacing:-.5px; cursor:pointer; user-select:none; flex:0 0 auto; }
.yt-logo .mark{ width:30px; height:21px; background:var(--yt-red); border-radius:6px;
  display:flex; align-items:center; justify-content:center; }
.yt-logo .mark::after{ content:""; border-style:solid; border-width:5.5px 0 5.5px 9px;
  border-color:transparent transparent transparent #fff; margin-left:1px; }
.yt-top .sp{ flex:1; }
.yt-iconbtn{ width:38px; height:38px; border-radius:50%; border:0; background:transparent;
  color:var(--yt-txt); display:flex; align-items:center; justify-content:center; cursor:pointer;
  flex:0 0 auto; font-size:var(--fs-title); }
.yt-iconbtn:active{ background:var(--yt-chip); }
.yt-avatar{ width:30px; height:30px; border-radius:50%; object-fit:cover; background:#333;
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-small); font-weight:700;
  color:#fff; overflow:hidden; flex:0 0 auto; }

/* desktop search */
.yt-searchwrap{ flex:1; max-width:560px; display:none; }
.yt-searchwrap form{ display:flex; width:100%; }
.yt-searchwrap input{ flex:1; background:#121212; color:var(--yt-txt); border:1px solid #303030;
  border-right:0; border-radius:20px 0 0 20px; padding:9px 16px; font-size:var(--fs-read); outline:none; }
.yt-searchwrap input:focus{ border-color:#1c62b9; }
.yt-searchwrap button{ width:60px; border:1px solid #303030; background:#222222;
  border-radius:0 20px 20px 0; color:var(--yt-txt); cursor:pointer; font-size:var(--fs-read); }

/* mobile search overlay */
.yt-msearch{ position:absolute; inset:0; z-index:60; background:var(--yt-bg); display:none;
  flex-direction:column; }
.yt-msearch.on{ display:flex; }
.yt-msearch .bar{ display:flex; align-items:center; gap:6px; padding:8px 10px; }
.yt-msearch input{ flex:1; background:var(--yt-chip); border:0; border-radius:20px;
  color:var(--yt-txt); padding:10px 16px; font-size:var(--fs-title); outline:none; }
/* The search screen used to be a back arrow, a box and nothing at all. */
.yt-recents{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--sa-b) + 20px); }
.yt-rechead{ padding:12px 18px 4px; font-size:var(--fs-meta); font-weight:700;
  color:var(--yt-dim); letter-spacing:.04em; text-transform:uppercase; }
.yt-recrow{ display:flex; align-items:center; gap:14px; padding:11px 18px; cursor:pointer; }
.yt-recrow:active{ background:rgba(255,255,255,.06); }
.yt-recrow .ic{ color:var(--yt-dim); display:flex; flex:0 0 18px; }
.yt-recrow .q{ flex:1; min-width:0; font-size:var(--fs-small); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.yt-recrow.clear .q{ color:var(--yt-dim); }
.yt-recx{ border:0; background:transparent; color:var(--yt-dim); cursor:pointer;
  display:flex; padding:4px; margin:-4px; }

/* ---------------- chips ---------------- */
.yt-chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 14px 10px; scrollbar-width:none;
  background:var(--yt-bg); }
.yt-chips::-webkit-scrollbar{ display:none; }
.yt-chip{ flex:0 0 auto; padding:7px 13px; border-radius:8px; background:var(--yt-chip);
  color:var(--yt-txt); font-size:var(--fs-small); font-weight:500; cursor:pointer; white-space:nowrap;
  border:0; }
.yt-chip.on{ background:var(--yt-chip-on); color:#0f0f0f; }

/* ---------------- internal tabs (mobile: Home/Subs/You) ---------------- */
.yt-tabs{ display:flex; border-bottom:1px solid var(--yt-line); margin:0 0 2px; }
.yt-tab{ flex:1; text-align:center; padding:11px 0 10px; font-size:var(--fs-small); font-weight:600;
  color:var(--yt-dim); cursor:pointer; border-bottom:2.5px solid transparent; user-select:none; }
.yt-tab.on{ color:var(--yt-txt); border-bottom-color:var(--yt-txt); }

/* ---------------- layout: content + desktop sidebar ---------------- */
.yt-body{ display:flex; align-items:flex-start; }
.yt-side{ display:none; }
.yt-main{ flex:1; min-width:0; padding:0 0 40px; }

@media (min-width:950px){
  .yt-searchwrap{ display:block; }
  .yt-iconbtn.msearch{ display:none; }
  .yt-tabs{ display:none; }
  /* 54px is the height of .yt-top, which now parks at --yt-stick rather than
     at 0 — the sidebar has to follow it or it tucks under the header. */
  .yt-side{ display:block; width:220px; flex:0 0 220px; padding:6px 8px 30px;
    position:sticky; top:calc(var(--yt-stick) + 54px);
    max-height:calc(100vh - var(--yt-stick) - 60px); overflow-y:auto; }
  .yt-sitem{ display:flex; align-items:center; gap:18px; padding:9px 14px; border-radius:10px;
    font-size:var(--fs-small); cursor:pointer; color:var(--yt-txt); user-select:none; }
  .yt-sitem:hover{ background:var(--yt-chip); }
  .yt-sitem.on{ background:var(--yt-chip); font-weight:600; }
  .yt-sitem .ic{ width:22px; text-align:center; font-size:var(--fs-title); }
  .yt-sitem img{ width:24px; height:24px; border-radius:50%; object-fit:cover; }
  .yt-sdiv{ height:1px; background:var(--yt-line); margin:10px 6px; }
  .yt-shead{ font-size:var(--fs-small); font-weight:600; padding:6px 14px 4px; color:var(--yt-txt); }
  .yt-main{ padding:0 20px 60px 6px; }
}

/* ---------------- video cards ---------------- */
.yt-feed{ display:flex; flex-direction:column; }
.yt-card{ cursor:pointer; margin-bottom:14px; content-visibility:auto;
  contain-intrinsic-size: 1px 300px; }
.yt-thumbwrap{ position:relative; width:100%; aspect-ratio:16/9; background:#181818;
  overflow:hidden; }
.yt-thumbwrap img{ width:100%; height:100%; object-fit:cover; }
.yt-dur{ position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,.85); color:#fff;
  font-size:var(--fs-meta); font-weight:600; padding:1px 5px; border-radius:4px; }
.yt-livepill{ position:absolute; bottom:6px; right:6px; background:#f00; color:#fff;
  font-size:var(--fs-micro); font-weight:700; padding:1px 6px; border-radius:4px; letter-spacing:.4px; }
.yt-cbody{ display:flex; gap:12px; padding:10px 12px 0; }
.yt-cav{ width:36px; height:36px; border-radius:50%; flex:0 0 36px; background:#333;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-read);
  color:#fff; overflow:hidden; }
.yt-cav img{ width:100%; height:100%; object-fit:cover; }
.yt-cmain{ flex:1; min-width:0; }
.yt-ctitle{ font-size:var(--fs-small); font-weight:500; line-height:1.35; color:var(--yt-txt);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* One line, always — in a 3-up grid "ESPN College Football · 5M views" wrapped
   and pushed "views" onto a line of its own. */
.yt-cmeta{ font-size:var(--fs-meta); color:var(--yt-dim); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yt-kebab{ width:34px; height:34px; flex:0 0 34px; border:0; background:transparent;
  color:var(--yt-txt); font-size:var(--fs-title); cursor:pointer; border-radius:50%; margin-top:-4px; }
.yt-kebab:active{ background:var(--yt-chip); }

@media (min-width:950px){
  /* 250px was tuned when <main> still capped this page at 1060px, so "5 at
     1920" was never reachable — the page only ever had 814px of content and
     got 3. Now that the tab is genuinely full-bleed, 250px overshoots the
     other way: 6 columns of 264px with 149px-tall thumbnails at 1920, denser
     than youtube.com. 300px lands on 3 columns at 1280 (331px cards, still
     more than the 261px they used to get) and 5 at 1920 (320px, 180px
     thumbnails) — which is what YouTube itself shows at those widths. */
  .yt-feed{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:24px 16px; padding-top:16px; }
  .yt-card{ margin-bottom:0; }
  .yt-thumbwrap{ border-radius:12px; }
  .yt-cbody{ padding:10px 0 0; }
}

/* skeletons */
@keyframes ytshimmer{ 0%{opacity:.55} 50%{opacity:.85} 100%{opacity:.55} }
.yt-skel .yt-thumbwrap{ background:#1e1e1e; animation:ytshimmer 1.4s infinite; }
.yt-skel .l1{ height:14px; width:88%; background:#1e1e1e; border-radius:4px; margin:10px 12px 7px;
  animation:ytshimmer 1.4s infinite; }
.yt-skel .l2{ height:12px; width:55%; background:#1e1e1e; border-radius:4px; margin:0 12px;
  animation:ytshimmer 1.4s infinite; }

.yt-empty{ color:var(--yt-dim); text-align:center; padding:42px 20px; font-size:var(--fs-small);
  line-height:1.6; }

/* ===== A REAL EMPTY STATE =====
   The subscriptions feed with nothing in it was one grey sentence floating in
   a panel of black — and the sentence told you to "connect your account in the
   You tab" while offering nothing to tap, so the only instruction on screen
   was one you had to carry somewhere else by hand. `.rich` gives an empty
   state the three things it needs: something to look at, a heading that says
   what is true, and the control the sentence is pointing at. Centred in a
   block of its own height so it reads as a designed state rather than as
   content that failed to arrive. */
.yt-empty.rich{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; min-height:min(46vh,340px); padding:34px 26px; }
.yt-empty.rich .art{ width:84px; height:84px; border-radius:50%; background:var(--yt-raise);
  display:flex; align-items:center; justify-content:center; color:var(--yt-dim); margin-bottom:14px; }
.yt-empty.rich .t{ font-size:var(--fs-title); font-weight:700; color:var(--yt-txt); }
.yt-empty.rich .s{ max-width:34ch; }
.yt-empty.rich .yt-bluebtn{ margin-top:16px; padding:10px 20px; }

/* ===== ROWS THAT SCROLL SIDEWAYS SAY SO =====
   "News" was cut off mid-word on the Home chips and "Downloa" on the watch
   action row, with nothing at either edge to suggest a swipe would help. The
   fade is driven by data-xf, which yt-ui.js sets from scrollLeft: it appears
   only on a side there is genuinely more content on, and moves to the other
   side when you reach the end — a permanent fade would be decoration, and the
   thing a viewer needs to learn is *which way* to push. Elements opt in by
   carrying .yt-xs, which the same code adds, so no markup had to change. */
.yt-xs[data-xf="r"]{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent); }
.yt-xs[data-xf="l"]{ -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent); }
.yt-xs[data-xf="lr"]{ -webkit-mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent); }

/* ---------------- subscriptions rail ---------------- */
.yt-subrail{ display:flex; gap:16px; overflow-x:auto; padding:12px 14px 6px;
  scrollbar-width:none; }
.yt-subrail::-webkit-scrollbar{ display:none; }
.yt-subch{ display:flex; flex-direction:column; align-items:center; gap:6px; width:64px;
  flex:0 0 64px; cursor:pointer; }
.yt-subch .av{ width:56px; height:56px; border-radius:50%; background:#333; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-head); }
.yt-subch .av img{ width:100%; height:100%; object-fit:cover; }
.yt-subch span{ font-size:var(--fs-micro); color:var(--yt-dim); max-width:64px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

/* ---------------- channel page ---------------- */
.yt-chanhead{ padding:16px 14px 4px; }
.yt-chanrow{ display:flex; align-items:center; gap:16px; }
.yt-chanrow .av{ width:72px; height:72px; border-radius:50%; background:#333; overflow:hidden;
  flex:0 0 72px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-hero);
  font-weight:700; }
.yt-chanrow .av img{ width:100%; height:100%; object-fit:cover; }
/* The channel page was the one pushed page in this module with no way back on
   screen - the playlist has [data-plback] and Manage subscriptions has
   [data-mgback]. Compact so it costs the name almost nothing at 390px, and the
   gap tightens to pay for it. */
.yt-chanrow:has([data-chanback]){ gap:10px; }
.yt-chanrow [data-chanback]{ flex:0 0 30px; width:30px; height:30px; margin-left:-8px;
  color:var(--yt-txt); }
.yt-channame{ font-size:var(--fs-head); font-weight:700; }
.yt-chansub{ font-size:var(--fs-meta); color:var(--yt-dim); margin-top:3px; }

/* subscribe buttons — YouTube pill style */
.yt-subbtn{ border:0; border-radius:18px; padding:9px 16px; font-size:var(--fs-small); font-weight:600;
  cursor:pointer; background:#f1f1f1; color:#0f0f0f; }
.yt-subbtn.subbed{ background:var(--yt-chip); color:var(--yt-txt); }

/* ---------------- watch overlay ---------------- */
/* THE WATCH PAGE COVERED THE APP NAV. It was inset:0 at z-130 while the app's
   bottom bar is z-40 (and the desktop shell turns that bar into a left
   sidebar, which was covered too) - so with a video open there was no way to
   reach any other tab. It now stops above the nav: --yt-navh is the app nav
   height the mount passes in (friend page = the real bar height; admin passes
   0px, so admin - which has no bottom bar - is untouched). Tapping a tab
   while watching minimises to the mini-player via YTUI.setVisible. */
.yt-watch{ position:fixed; top:0; left:0; right:0;
  bottom:calc(var(--yt-navh,0px) + var(--sa-b));
  z-index:130; background:var(--yt-bg); display:none;
  flex-direction:column; }
.yt-watch.on{ display:flex; }
.yt-stage{ position:relative; background:#000; width:100%; flex:0 0 auto; }
.yt-stage video{ width:100%; aspect-ratio:16/9; max-height:52vh; background:#000; display:block; }


/* custom controls */
.yt-ctrl{ position:absolute; inset:0; display:flex; flex-direction:column; z-index:5;
  background:linear-gradient(rgba(0,0,0,.4),transparent 30%,transparent 65%,rgba(0,0,0,.55));
  opacity:0; transition:opacity .18s; pointer-events:none; }
.yt-ctrl.show{ opacity:1; pointer-events:auto; }
.yt-ctrl .row-top{ display:flex; align-items:center; padding:6px 8px; gap:4px; }
.yt-ctrl .row-mid{ flex:1; display:flex; align-items:center; justify-content:center; gap:52px; }
.yt-ctrl .row-bot{ padding:0 12px 8px; }
.yt-cbtn{ border:0; background:transparent; color:#fff; cursor:pointer; display:flex;
  align-items:center; justify-content:center; }
.yt-bigpp{ width:64px; height:64px; font-size:34px /* glyph box, not type */; }
.yt-skipbtn{ width:46px; height:46px; font-size:var(--fs-big); opacity:.92; }
.yt-times{ display:flex; justify-content:space-between; font-size:var(--fs-meta); color:#eee;
  margin-bottom:4px; }
.yt-seek{ position:relative; height:16px; display:flex; align-items:center; cursor:pointer;
  touch-action:none; }
.yt-seek .track{ position:absolute; left:0; right:0; height:3px; background:rgba(255,255,255,.3);
  border-radius:2px; }
.yt-seek .buf{ position:absolute; left:0; height:3px; background:rgba(255,255,255,.5);
  border-radius:2px; }
.yt-seek .played{ position:absolute; left:0; height:3px; background:var(--yt-red);
  border-radius:2px; }
.yt-seek .knob{ position:absolute; width:13px; height:13px; border-radius:50%;
  background:var(--yt-red); transform:translateX(-50%); }
/* double-tap ripples */
.yt-ripple{ position:absolute; top:0; bottom:0; width:38%; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:var(--fs-read); font-weight:600; opacity:0;
  pointer-events:none; z-index:6; }
.yt-ripple.left{ left:0; border-radius:0 50% 50% 0; }
.yt-ripple.right{ right:0; border-radius:50% 0 0 50%; }
.yt-ripple.flash{ animation:ytflash .5s; }
@keyframes ytflash{ 0%{opacity:0} 25%{opacity:1; background:rgba(255,255,255,.14)} 100%{opacity:0} }

/* settings menu */
.yt-menu{ position:absolute; right:10px; bottom:56px; background:rgba(28,28,28,.98);
  border-radius:12px; min-width:210px; z-index:8; padding:6px 0; display:none; }
.yt-menu.on{ display:block; }
.yt-mitem{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 16px; font-size:var(--fs-small); cursor:pointer; color:var(--yt-txt); }
.yt-mitem:hover{ background:rgba(255,255,255,.08); }
.yt-mitem .val{ color:var(--yt-dim); font-size:var(--fs-meta); }
/* Said when the quality list is the STANDARD one rather than this video's,
   because the probe has not answered. Without it the fallback ladder is
   presented exactly like a measured one, tick and all. */
.yt-mnote{ padding:8px 16px 12px; font-size:var(--fs-micro); color:var(--yt-dim);
  line-height:1.45; max-width:32ch; }

/* watch scroll area */
.yt-wscroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--sa-b) + 30px); }
.yt-wtitle{ font-size:var(--fs-title); font-weight:600; line-height:1.4; padding:12px 14px 2px; }
.yt-wmeta{ font-size:var(--fs-meta); color:var(--yt-dim); padding:2px 14px 10px; }
.yt-actions{ display:flex; gap:8px; overflow-x:auto; padding:2px 14px 12px; scrollbar-width:none; }
.yt-actions::-webkit-scrollbar{ display:none; }
.yt-act{ flex:0 0 auto; display:flex; align-items:center; gap:7px; background:var(--yt-chip);
  border:0; border-radius:18px; color:var(--yt-txt); padding:8px 14px; font-size:var(--fs-small);
  font-weight:600; cursor:pointer; }
.yt-act.on{ background:#f1f1f1; color:#0f0f0f; }
.yt-wchan{ display:flex; align-items:center; gap:12px; padding:10px 14px;
  border-top:1px solid var(--yt-line); border-bottom:1px solid var(--yt-line); }
.yt-wchan .av{ width:40px; height:40px; border-radius:50%; background:#333; overflow:hidden;
  flex:0 0 40px; display:flex; align-items:center; justify-content:center; font-weight:700;
  cursor:pointer; }
.yt-wchan .av img{ width:100%; height:100%; object-fit:cover; }
.yt-wchan .nm{ flex:1; min-width:0; font-size:var(--fs-small); font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.yt-desc{ margin:10px 14px; padding:12px; background:var(--yt-raise); border-radius:12px;
  font-size:var(--fs-small); line-height:1.5; color:var(--yt-txt); cursor:pointer; }
.yt-desc .body{ white-space:pre-wrap; word-break:break-word; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.yt-desc.open .body{ display:block; -webkit-line-clamp:unset; }
.yt-desc .more{ color:var(--yt-dim); font-weight:600; margin-top:6px; font-size:var(--fs-meta); }
.yt-uphead{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 6px; }
.yt-uphead h3{ margin:0; font-size:var(--fs-read); }
.yt-auto{ display:flex; align-items:center; gap:7px; font-size:var(--fs-meta); color:var(--yt-dim); }
.yt-switch{ width:34px; height:18px; border-radius:10px; background:#555; position:relative;
  cursor:pointer; transition:background .15s; flex:0 0 34px; }
.yt-switch::after{ content:""; position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:#fff; transition:left .15s; }
.yt-switch.on{ background:var(--yt-red); }
.yt-switch.on::after{ left:18px; }

/* up-next rows */
.yt-uprow{ display:flex; gap:10px; padding:6px 14px; cursor:pointer; }
.yt-uprow:hover{ background:rgba(255,255,255,.04); }
.yt-uprow .th{ position:relative; width:150px; flex:0 0 150px; aspect-ratio:16/9;
  border-radius:8px; overflow:hidden; background:#181818; }
.yt-uprow .th img{ width:100%; height:100%; object-fit:cover; }
.yt-uprow .tx{ flex:1; min-width:0; }
.yt-uprow .t1{ font-size:var(--fs-small); font-weight:500; line-height:1.3; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.yt-uprow .t2{ font-size:var(--fs-meta); color:var(--yt-dim); margin-top:3px; }
.yt-qbadge{ font-size:var(--fs-micro); font-weight:700; color:#0f0f0f; background:#f1f1f1;
  border-radius:4px; padding:1px 5px; margin-right:6px; }

/* THE WATCH PAGE PRINTED "Up next" TWICE. .yt-wright is the DESKTOP up-next
   column; the phone layout has its own copy inside .yt-wscroll. The column had
   a rule only inside the 950px block, so below 950px it was a plain block
   element and both headings rendered — the second one pinned under the fold of
   a column-flex .yt-watch, with an empty list under it. Screenshotted at 390px
   with both lists still loading, which is exactly how it was reported. It is
   also why the whole up-next list rendered twice once it did load. */
.yt-wright{ display:none; }

@media (min-width:950px){
  .yt-watch{ flex-direction:row; padding:20px 40px; gap:24px; overflow-y:auto;
    align-items:flex-start; }
  .yt-wleft{ flex:1.9; min-width:0; }
  .yt-stage{ border-radius:14px; overflow:hidden; }
  .yt-stage video{ max-height:calc(100vh - 220px); }
  .yt-wright{ display:block; flex:1; min-width:320px; max-width:420px; }
  .yt-wscroll{ overflow:visible; }
  /* ...and on a desktop it is the PHONE's copy that goes away, or the heading
     prints twice from the other direction. Only the heading and the list: the
     Autoplay switch beside it (data-w-auto2) is the one the right-hand column
     does not carry, so it moves up to sit on its own above the list instead of
     disappearing with them. */
  .yt-wscroll > .yt-uphead > h3, .yt-wscroll > [data-w-upnext]{ display:none; }
  .yt-wscroll > .yt-uphead{ justify-content:flex-end; }
}
.yt-closefloat{ width:40px; height:40px; border-radius:50%; border:0; background:rgba(28,28,28,.8);
  color:#fff; font-size:var(--fs-head); cursor:pointer; flex:0 0 40px; }

/* ---------------- mini player ---------------- */
.yt-mini{ position:fixed; left:0; right:0; bottom:calc(var(--yt-navh) + var(--sa-b));
  z-index:120; background:#212121; display:none; align-items:center; height:56px;
  border-top:1px solid var(--yt-line); }
.yt-mini.on{ display:flex; }
.yt-mini .vwrap{ width:100px; height:56px; flex:0 0 100px; background:#000; overflow:hidden;
  cursor:pointer; }
.yt-mini .vwrap video{ width:100%; height:100%; object-fit:cover; aspect-ratio:auto;
  max-height:none; }
.yt-mini .tx{ flex:1; min-width:0; padding:0 10px; cursor:pointer; }
.yt-mini .t1{ font-size:var(--fs-small); font-weight:500; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.yt-mini .t2{ font-size:var(--fs-meta); color:var(--yt-dim); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.yt-mini .yt-iconbtn{ width:44px; height:44px; font-size:var(--fs-head); }

/* ---------------- bottom sheet (kebab menus) ---------------- */
.yt-sheetveil{ position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.5); display:none; }
.yt-sheetveil.on{ display:block; }
.yt-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:151; background:#212121;
  border-radius:16px 16px 0 0; transform:translateY(105%); transition:transform .22s;
  padding:10px 0 calc(var(--sa-b) + 14px); max-height:70vh; overflow-y:auto; }
.yt-sheet.on{ transform:translateY(0); }
.yt-sheet .grab{ width:40px; height:4px; border-radius:2px; background:#555; margin:2px auto 10px; }
.yt-shitem{ display:flex; align-items:center; gap:16px; padding:13px 20px; font-size:var(--fs-small);
  cursor:pointer; color:var(--yt-txt); }
.yt-shitem:active{ background:rgba(255,255,255,.07); }
.yt-shitem .ic{ width:24px; text-align:center; font-size:var(--fs-title); }

/* ---------------- You page ---------------- */
.yt-youhead{ display:flex; align-items:center; gap:14px; padding:18px 14px 8px; }
.yt-youhead .av{ width:64px; height:64px; border-radius:50%; background:#333; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-big); font-weight:700; }
.yt-youhead .av img{ width:100%; height:100%; object-fit:cover; }
.yt-youname{ font-size:var(--fs-head); font-weight:700; }
/* Names the Plex profile underneath the connected YouTube account, so the two
   identities can never be mistaken for each other again. */
.yt-yousub{ font-size:var(--fs-meta); opacity:.62; margin-top:2px; }
.yt-yourow{ display:flex; align-items:center; gap:16px; padding:13px 16px; cursor:pointer;
  font-size:var(--fs-small); }
.yt-yourow:active{ background:var(--yt-chip); }
.yt-yourow .ic{ width:24px; text-align:center; font-size:var(--fs-head); }
.yt-hscroll{ display:flex; gap:10px; overflow-x:auto; padding:6px 14px 12px; scrollbar-width:none; }
.yt-hscroll::-webkit-scrollbar{ display:none; }
.yt-hcard{ width:160px; flex:0 0 160px; cursor:pointer; }
.yt-hcard .th{ position:relative; width:100%; aspect-ratio:16/9; border-radius:8px;
  overflow:hidden; background:#181818; }
.yt-hcard .th img{ width:100%; height:100%; object-fit:cover; }
.yt-hcard .t1{ font-size:var(--fs-meta); font-weight:500; margin-top:6px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.yt-sechead{ font-size:var(--fs-title); font-weight:700; padding:14px 14px 6px; }

/* account connect card (inside You) */
.yt-connect{ margin:10px 14px; padding:14px; background:var(--yt-raise); border-radius:12px; }
.yt-connect .t{ font-weight:700; font-size:var(--fs-small); margin-bottom:4px; }
.yt-connect .s{ font-size:var(--fs-meta); color:var(--yt-dim); line-height:1.5; }
.yt-connect .btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.yt-bluebtn{ border:0; border-radius:18px; background:var(--yt-blue); color:#0f0f0f;
  font-weight:700; font-size:var(--fs-small); padding:8px 14px; cursor:pointer; }
.yt-ghostbtn{ border:1px solid var(--yt-line); border-radius:18px; background:transparent;
  color:var(--yt-txt); font-weight:600; font-size:var(--fs-small); padding:8px 14px; cursor:pointer; }
.yt-connect textarea{ width:100%; min-height:110px; background:#121212; color:var(--yt-txt);
  border:1px solid #303030; border-radius:8px; margin-top:10px; padding:9px;
  font-family:monospace; font-size:var(--fs-micro); }
.yt-okpill{ display:inline-block; font-size:var(--fs-micro); font-weight:700; padding:2px 8px;
  border-radius:999px; background:rgba(46,194,126,.18); color:#2ec27e; }
.yt-confirm input{ background:#121212; color:var(--yt-txt); border:1px solid #303030;
  border-radius:8px; padding:9px 12px; font-size:var(--fs-small); width:150px; }

/* ---------------- v2 polish: portal, icons, like pill, comments, spinner ------- */
.yt-portal{ background:transparent; min-height:0; border-radius:0; overflow:visible;
  position:static; }
.yi{ display:inline-block; vertical-align:middle; flex:0 0 auto; }
.yt-act .yi{ margin-right:2px; }
.yt-sitem .ic{ display:flex; align-items:center; justify-content:center; }
.yt-yourow .ic{ display:flex; align-items:center; justify-content:center; }
.yt-shitem .ic{ display:flex; align-items:center; justify-content:center; }

/* like/dislike joined pill (YouTube style) */
.yt-likepill{ flex:0 0 auto; display:flex; align-items:center; background:var(--yt-chip);
  border-radius:18px; overflow:hidden; }
.yt-likepill button{ display:flex; align-items:center; gap:7px; background:transparent;
  border:0; color:var(--yt-txt); padding:8px 14px; font-size:var(--fs-small); font-weight:600;
  cursor:pointer; }
.yt-likepill button.on{ background:#f1f1f1; color:#0f0f0f; }
.yt-likepill .sep{ width:1px; height:20px; background:rgba(255,255,255,.2); }

/* comments bar + sheet rows */
.yt-combar{ margin:10px 14px; padding:12px; background:var(--yt-raise); border-radius:12px;
  display:flex; align-items:center; gap:10px; font-size:var(--fs-small); font-weight:600; cursor:pointer; }
.yt-combar .chev{ margin-left:auto; color:var(--yt-dim); }
.yt-crow{ display:flex; gap:12px; padding:10px 20px; }
.yt-crow .cav{ width:32px; height:32px; border-radius:50%; flex:0 0 32px; background:#333;
  object-fit:cover; display:flex; align-items:center; justify-content:center; font-weight:700;
  font-size:var(--fs-small); overflow:hidden; }
.yt-crow .cbody{ flex:1; min-width:0; }
.yt-crow .chead{ font-size:var(--fs-meta); color:var(--yt-dim); margin-bottom:3px; }
.yt-crow .cowner{ background:var(--yt-chip); border-radius:999px; padding:1px 8px;
  color:var(--yt-txt); font-weight:600; }
.yt-crow .ctime{ margin-left:4px; }
.yt-crow .ctext{ font-size:var(--fs-small); line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.yt-crow .clikes{ display:flex; align-items:center; gap:5px; font-size:var(--fs-meta);
  color:var(--yt-dim); margin-top:5px; }
.yt-comload{ display:flex; align-items:center; gap:12px; justify-content:center;
  color:var(--yt-dim); padding:26px; font-size:var(--fs-small); }

/* buffering spinner */
.yt-spin{ position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  z-index:4; pointer-events:none; }
.yt-spin.on{ display:flex; }
.yt-spin .ring,.yt-comload .ring{ width:42px; height:42px; border-radius:50%;
  border:4px solid rgba(255,255,255,.25); border-top-color:#fff; animation:ytspin .8s linear infinite; }
.yt-comload .ring{ width:22px; height:22px; border-width:3px; }
@keyframes ytspin{ to{ transform:rotate(360deg); } }

/* ===== WHEN A VIDEO WILL NOT PLAY =====
   The only report of a failed stream was a toast, and 2.6 seconds later the
   stage was a black rectangle with a play button on it and no account of
   itself anywhere. This is the persistent version: it sits ON the stage, over
   the video element, and carries the two things a viewer can do about it.
   z-index 6 draws it above .yt-ctrl (5), but pointer-events:none on the CARD
   and auto on its BUTTONS: a stage tap is what reveals .yt-ctrl, which is where
   the Minimize button lives, so a card that swallowed that tap would have
   replaced a silent failure with a trap - a worse bug than the one being fixed.
   Verified by hit-testing: a tap at the stage centre still lands on the VIDEO,
   Minimize is reachable once the controls show, and Try again is pressable. */
.yt-stagefail{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; text-align:center;
  padding:20px 24px; background:rgba(0,0,0,.82); pointer-events:none; }
.yt-stagefail[hidden]{ display:none; }
.yt-stagefail .t{ font-size:var(--fs-read); font-weight:700; color:var(--yt-txt); }
.yt-stagefail .s{ font-size:var(--fs-small); color:var(--yt-dim); max-width:38ch; line-height:1.5; }
.yt-stagefail .a{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; justify-content:center;
  pointer-events:auto; }
/* And the transport goes DISABLED rather than dead: a play button on a stream
   that could not be opened is not a control, and pressing it silently is
   exactly the thing this whole pass is about. */
.yt-stage.failed .yt-bigpp, .yt-stage.failed .yt-skipbtn{ opacity:.35; cursor:default; }
.yt-stage.failed .yt-seek{ opacity:.35; pointer-events:none; }
.yt-stagefail .yt-ghostbtn[hidden]{ display:none; }

/* A FAILED LOAD IS NOT AN EMPTY LIST, so it does not look like one: the same
   rich layout, a red-tinted mark instead of the neutral one, and a button that
   retries in place rather than an instruction to go somewhere else. */
.yt-empty.rich.yt-failed .art{ background:rgba(255,86,86,.14); color:#ff7a7a; }

/* mini-player progress line */
.yt-mini .prog{ position:absolute; top:-2px; left:0; right:0; height:2px;
  background:rgba(255,255,255,.15); }
.yt-mini .prog i{ display:block; height:100%; width:0; background:var(--yt-red); }

/* YTUI toast (above the z-130 watch overlay — the app toast sits below it) */
.yt-toast{ position:fixed; left:50%; transform:translateX(-50%) translateY(16px);
  bottom:calc(var(--yt-navh) + var(--sa-b) + 76px); z-index:210;
  background:#f1f1f1; color:#0f0f0f; font-size:var(--fs-small); font-weight:600; padding:11px 18px;
  border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s;
  max-width:86vw; text-align:center; }
.yt-toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* download progress bar */
.yt-dlbar{ height:3px; border-radius:2px; background:rgba(255,255,255,.15); margin-top:6px; overflow:hidden; }
.yt-dlbar i{ display:block; height:100%; background:var(--yt-red); transition:width .5s; }

/* YouTube-style icon bottom bar (mobile) — sits above the Plex Hub nav */
.yt-bnav{ position:sticky; bottom:0; z-index:28; display:flex; background:var(--yt-bg);
  border-top:1px solid var(--yt-line); order:99; }
.ytui .yt-bnav{ position:fixed; left:0; right:0;
  bottom:calc(var(--yt-navh) + var(--sa-b)); display:flex; }
.yt-bnav .bni{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:7px 0 8px; color:var(--yt-dim); font-size:var(--fs-micro); font-weight:500; cursor:pointer; }
.yt-bnav .bni.on{ color:var(--yt-txt); }
.yt-main{ padding-bottom:120px; }
@media (min-width:950px){ .ytui .yt-bnav{ display:none; } .yt-main{ padding-bottom:60px; } }
@media (max-width:949px){ .yt-tabs{ display:none; } }
/* mini stacks above the music bar when both are alive */
.yt-mini{ transition:margin-bottom .2s; }

/* FULLSCREEN. goFullscreen() makes the STAGE fullscreen, and the video inside it
   kept max-height:52vh (calc(100vh - 220px) on a wide screen) plus a forced
   16/9 aspect-ratio. Neither is lifted by going fullscreen, so the video stayed
   capped at roughly half the screen while the stage's black background filled
   everything around it - the "weird black borders all around". Height is
   released here and object-fit:contain keeps the real aspect, so a 16:9 video
   fills the screen and only genuinely non-16:9 content is letterboxed at all.
   Both spellings: WebView2 and iOS report the unprefixed and prefixed forms
   inconsistently, and a media query does not add specificity, so these rules
   sit at the END of the file, after the 950px block, on purpose. */
.yt-stage:fullscreen, .yt-stage:-webkit-full-screen{
  width:100vw; height:100vh; max-height:none; border-radius:0;
  display:flex; align-items:center; justify-content:center; }
.yt-stage:fullscreen video, .yt-stage:-webkit-full-screen video{
  width:100%; height:100%; max-height:none; aspect-ratio:auto; object-fit:contain; }
/* iOS hands the VIDEO itself to the system player (webkitEnterFullscreen), which
   is a different element going fullscreen - cover that too. */
video:fullscreen, video:-webkit-full-screen{
  width:100%; height:100%; max-height:none; aspect-ratio:auto; object-fit:contain; }

/* The "your Home is emulated" banner (shown until the cookie is pasted). */
.yt-ckbanner{ margin:10px 12px 4px; padding:12px 14px; border-radius:12px;
  background:linear-gradient(120deg,#1c2733,#18202a); border:1px solid #2c3b4a; }
.yt-ckbanner .tx{ font-size:var(--fs-meta); line-height:1.5; color:#cfd8e3; }
.yt-ckbanner .tx b{ color:#fff; }
.yt-ckbanner .acts{ display:flex; gap:8px; margin-top:10px; }

/* Shorts shelf (R5-F6) — 9:16 cards in a horizontal row above the grid. */
.yt-shorts{ margin:4px 0 10px; }
.yt-shrow{ display:flex; gap:10px; overflow-x:auto; padding:2px 12px 6px; scrollbar-width:none; }
.yt-shrow::-webkit-scrollbar{ display:none; }
.yt-shcard{ flex:0 0 128px; cursor:pointer; }
.yt-shthumb{ width:128px; height:228px; border-radius:10px; overflow:hidden; background:#000; }
.yt-shthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.yt-shtitle{ font-size:var(--fs-meta); line-height:1.35; margin-top:6px; max-height:34px; overflow:hidden; }

/* Autoplay countdown (R5-F9). */
.yt-nextup{ position:absolute; right:14px; bottom:74px; z-index:9; width:min(300px,72vw);
  background:rgba(20,20,20,.96); border:1px solid #333; border-radius:12px; padding:12px 14px; }
.yt-nextup .t{ font-size:var(--fs-meta); color:#aaa; }
.yt-nextup .n{ font-size:var(--fs-small); font-weight:700; margin:4px 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.yt-nextup .a{ display:flex; gap:8px; }

/* ===== R5-I2 . Landscape insets on the watch page =====
   .yt-watch already inset its BOTTOM, but not top/left/right. In landscape the
   notch is on a SIDE, which is where the back button and the title live, and
   they were sliding under it. The video surface itself stays full-bleed. */
.yt-watch{ padding-top:var(--sa-t); padding-left:var(--sa-l); padding-right:var(--sa-r); }
.yt-watch .yt-vwrap, .yt-watch video{ margin-left:calc(-1 * var(--sa-l)); margin-right:calc(-1 * var(--sa-r)); }

/* ===== R5-F7 . Channel tabs ===== */
/* THIS ROW SCROLLS, and until now it said so only in an inline style written
   by chanTabsHtml - so the stylesheet, and every test that reads it, believed
   it did not. Measured at 390px: 362px of box, 372px of tabs, scrollable, and
   no cue at either edge, which is why Playlists and About were invisible.
   Declared here, and .yt-chantabs is in XF_ROWS so it gets the same measured
   edge fade as every other rail in this module. */
.yt-chantabs{ display:flex; gap:4px; padding:8px 12px 0; border-bottom:1px solid var(--yt-line);
  overflow-x:auto; scrollbar-width:none; }
.yt-chantabs::-webkit-scrollbar{ display:none; }
.yt-chantab{ flex:0 0 auto; padding:8px 14px; font-size:var(--fs-small); font-weight:600; color:#aaa;
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.yt-chantab.on{ color:#fff; border-bottom-color:#fff; }
.yt-about{ padding:16px 14px; }
.yt-aboutstat{ font-size:var(--fs-small); color:#aaa; margin-bottom:10px; }
.yt-abouttx{ font-size:var(--fs-small); line-height:1.55; white-space:pre-wrap; word-break:break-word; }

/* ===== E4 sponsor segments + E5 chapters on the timeline ===== */
/* Under .played and .knob on purpose: the segment shading is context, and it
   must never obscure where you actually are. */
.yt-seek .segs{ position:absolute; left:0; right:0; height:3px; pointer-events:none; }
.yt-seek .segs i{ position:absolute; height:100%; border-radius:2px; }
/* Amber = goes by itself. Grey-blue = offered, your call. Two colours because
   the difference between "this will vanish" and "you may skip this" is the
   only thing about the feature a viewer needs to learn. */
.yt-seek .segs i.auto{ background:#f6c744; }
.yt-seek .segs i.offer{ background:rgba(140,180,255,.72); }
/* Chapter boundary: a hairline, not a block — it divides, it does not label. */
.yt-seek .segs b{ position:absolute; width:2px; height:100%; background:rgba(255,255,255,.85);
  transform:translateX(-1px); border-radius:1px; }
/* The manual skip button. Same shape as the library player's pill so the two
   surfaces do not each invent their own. */
/* NAMED yt-segskip, NOT yt-skipbtn. `.yt-skipbtn` is already the prev/next
   transport pair (yt.css:198, 46x46 icon buttons) — the first version of this
   restyled both of them into white pills. Same mistake as `.lrow`, caught the
   same way: by measuring the rendered element instead of reading the file. */
.yt-segskip{ position:absolute; right:14px; bottom:74px; z-index:6; border:0; cursor:pointer;
  padding:11px 18px; border-radius:12px; background:#fff; color:#111; white-space:nowrap;
  font-size:var(--fs-small); font-weight:800; letter-spacing:.2px; box-shadow:0 8px 22px rgba(0,0,0,.5); }
.yt-segskip[hidden]{ display:none; }
.yt-segskip:active{ transform:scale(.97); }
/* Current chapter, under the scrubber. */
.yt-chap{ font-size:var(--fs-meta); font-weight:700; color:rgba(255,255,255,.82); padding:2px 2px 0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yt-chap[hidden]{ display:none; }

/* ===== E2 . Manage subscriptions ===== */
.yt-submanage{ display:flex; align-items:center; gap:10px; padding:10px 14px 2px;
  font-size:var(--fs-small); font-weight:700; color:var(--yt-dim); }
.yt-submanage span{ flex:1; }
.yt-mgbtn{ border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:inherit;
  padding:7px 14px; border-radius:999px; font-size:var(--fs-small); font-weight:700; cursor:pointer; white-space:nowrap; }
.yt-mgbtn:active{ transform:scale(.97); }
.yt-mgbtn.ghost{ background:transparent; }
/* Destructive, and it reaches the real account — it should not look like Clear. */
.yt-mgbtn.danger{ background:#c8452b; border-color:#c8452b; color:#fff; }
.yt-mgbtn[disabled]{ opacity:.6; cursor:default; }
.yt-mghead{ display:flex; align-items:center; gap:6px; padding:8px 8px 4px; }
.yt-mgtitle{ font-size:var(--fs-head); font-weight:800; display:flex; align-items:baseline; gap:9px; }
.yt-mgtitle span{ font-size:var(--fs-small); font-weight:600; opacity:.6; }
.yt-mgsearch{ width:calc(100% - 28px); margin:6px 14px 10px; padding:11px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:inherit; font-size:var(--fs-small); outline:none; }
.yt-mgsearch:focus{ border-color:rgba(255,255,255,.4); }
/* Sticky so the count and the button stay reachable 60 rows down — under
   .yt-top (54px) which is itself stuck at --yt-stick. */
.yt-mgbar{ position:sticky; top:calc(var(--yt-stick) + 54px); z-index:3; display:flex; align-items:center; gap:9px;
  padding:10px 14px; margin-bottom:4px; background:var(--yt-bg);
  border-bottom:1px solid rgba(255,255,255,.1); font-size:var(--fs-small); font-weight:700; }
.yt-mgbar[hidden]{ display:none; }
.yt-mglist{ padding-bottom:24px; }
.yt-mgrow{ display:flex; align-items:center; gap:12px; padding:9px 14px; cursor:pointer; }
.yt-mgrow:active{ background:rgba(255,255,255,.06); }
.yt-mgrow.on{ background:rgba(255,255,255,.09); }
.yt-mgrow .tick{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; border:2px solid rgba(255,255,255,.28); }
.yt-mgrow.on .tick{ background:#fff; color:#111; border-color:#fff; }
.yt-mgrow .av{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:var(--fs-read); }
.yt-mgrow .av img{ width:100%; height:100%; object-fit:cover; }
.yt-mgrow .nm{ flex:1; min-width:0; font-size:var(--fs-small); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yt-mgone{ flex:0 0 auto; border:1px solid rgba(255,255,255,.22); background:transparent; color:inherit;
  padding:6px 12px; border-radius:999px; font-size:var(--fs-meta); font-weight:700; cursor:pointer; white-space:nowrap; }
.yt-mgone[disabled]{ opacity:.6; }

/* ===== E3 . Live chat ===== */
.yt-livechat{ margin:10px 14px 0; border:1px solid rgba(255,255,255,.12); border-radius:12px;
  background:rgba(255,255,255,.03); overflow:hidden; }
.yt-livechat[hidden]{ display:none; }
.lc-head{ display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:var(--fs-small);
  font-weight:800; border-bottom:1px solid rgba(255,255,255,.08); }
.lc-dot{ width:8px; height:8px; border-radius:50%; background:var(--yt-red); flex:0 0 auto; }
.lc-note{ margin-left:auto; color:rgba(255,255,255,.55); font-size:var(--fs-meta); font-weight:600; }
/* Its own scroller with a fixed height: the chat must never grow the page —
   the page owns scrolling, the chat scrolls inside itself. */
.lc-list{ height:260px; overflow-y:auto; padding:8px 12px; overscroll-behavior:contain; }
.lc-row{ display:flex; gap:8px; padding:3px 0; font-size:var(--fs-small); line-height:1.45; }
.lc-av{ width:20px; height:20px; border-radius:50%; flex:0 0 auto; margin-top:1px; }
.lc-row b{ color:rgba(255,255,255,.6); font-weight:700; margin-right:2px; }
.lc-row span{ min-width:0; overflow-wrap:anywhere; }

/* R6 chunk 10 — chapter outline + transcript panel (Y2.1/2.3/2.4) */
.yt-trsearch{ padding:0 20px 10px; }
.yt-trsearch input{ width:100%; padding:9px 12px; border-radius:9px; border:1px solid var(--yt-line);
  background:var(--yt-chip); color:var(--yt-txt); font:inherit; font-size:var(--fs-small); }
.yt-tlist{ padding:0 8px 24px; max-height:100%; overflow-y:auto; }
.yt-trow{ display:flex; gap:10px; padding:8px 12px; border-radius:8px; cursor:pointer; align-items:baseline; }
.yt-trow:hover{ background:var(--yt-chip); }
.yt-trow.on{ background:rgba(229,160,13,.14); }
.yt-tt{ color:#e5a00d; font-size:var(--fs-meta); font-variant-numeric:tabular-nums; flex:0 0 auto; min-width:48px; }
.yt-tx{ font-size:var(--fs-small); line-height:1.45; }
.yt-tx mark{ background:rgba(229,160,13,.35); color:inherit; border-radius:3px; padding:0 1px; }

/* ===== R6 chunk 22 — feed & subscriptions controls =====
   The bar above the subscriptions feed (bundles, unwatched, filters), the
   unread dot on a card, the three-way notification control in the manage list,
   and the bundle editor's channel picker. */
.yt-fbar{ display:flex; flex-direction:column; gap:8px; padding:8px 12px 10px; }
.yt-fchips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.yt-fchips::-webkit-scrollbar{ display:none; }
.yt-fchip{ flex:0 0 auto; padding:7px 13px; border-radius:8px; background:var(--yt-chip);
  color:var(--yt-txt); font-size:var(--fs-small); font-weight:600; cursor:pointer; white-space:nowrap;
  border:0; }
.yt-fchip.on{ background:var(--yt-chip-on); color:#0f0f0f; }
.yt-fchip.ghost{ background:transparent; border:1px solid var(--yt-line); color:var(--yt-dim); }
.yt-fchip b{ font-weight:800; }
.yt-fnote{ font-size:var(--fs-meta); color:var(--yt-dim); }
/* FILTERS ARE NOT ACTIONS. The subscriptions bar used to split its chips by
   "bundles" vs "everything else", so All and Bundles sat on one ragged line
   and Unwatched, Filters and "Mark all read" on another — a thing that changes
   what you are looking at, standing shoulder to shoulder in the same pill with
   a thing that changes your data. The filters now share one scrolling line
   (see .yt-xs above) and the verbs get a line of their own, right-aligned and
   quieter, because they are the answer to a different question. */
.yt-facts{ display:flex; align-items:center; justify-content:flex-end; gap:8px;
  flex-wrap:wrap; }
.yt-facts .yt-fchip{ font-weight:600; }
/* Y1.9 — an unread card is marked, not recoloured: the feed is mostly unread,
   so highlighting every one of them would just be a brighter feed. */
.yt-card.yt-unread .yt-ctitle::before{ content:''; display:inline-block; width:7px; height:7px;
  border-radius:50%; background:var(--yt-blue); margin-right:7px; vertical-align:1px; }
.yt-shhead{ font-size:var(--fs-read); font-weight:800; padding:4px 16px 10px; color:var(--yt-txt); }
.yt-shrow{ display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:var(--fs-small);
  color:var(--yt-txt); border-bottom:1px solid var(--yt-line); }
.yt-shrow > span:first-child{ flex:1 1 auto; display:flex; flex-direction:column; }
.yt-shrow i{ font-style:normal; font-size:var(--fs-meta); color:var(--yt-dim); }
.yt-shrow select{ background:var(--yt-chip); color:var(--yt-txt); border:0; border-radius:8px;
  padding:6px 8px; font-size:var(--fs-small); }
.yt-shnote{ padding:10px 16px; font-size:var(--fs-meta); color:var(--yt-dim); line-height:1.45; }
.yt-nsegs{ display:inline-flex; flex:0 0 auto; border:1px solid var(--yt-line); border-radius:8px;
  overflow:hidden; margin-right:8px; }
.yt-nseg{ background:transparent; border:0; color:var(--yt-dim); font-size:var(--fs-micro); font-weight:700;
  padding:5px 9px; cursor:pointer; }
.yt-nseg.on{ background:var(--yt-chip-on); color:#0f0f0f; }
.yt-bchans{ max-height:46vh; overflow-y:auto; padding:4px 16px; }
.yt-bchan{ display:flex; align-items:center; gap:10px; padding:8px 0; font-size:var(--fs-small);
  color:var(--yt-txt); border-bottom:1px solid var(--yt-line); }
@media(max-width:620px){ .yt-nsegs{ margin-right:4px; } .yt-nseg{ padding:5px 7px; font-size:var(--fs-micro); } }