/* ===========================================================
   TGGTube+  —  styles
   =========================================================== */

:root{
  --bg:          #ffffff;
  --bg-elev:     #f9f9f9;
  --bg-sunken:   #f2f2f2;
  --surface:     #ffffff;
  --border:      #e3e3e3;
  --text:        #0f0f0f;
  --text-dim:    #606060;
  --text-faint:  #909090;
  --accent:      #ff2d55;
  --accent-ink:  #ffffff;
  --chip:        #f2f2f2;
  --chip-active: #0f0f0f;
  --chip-active-ink:#ffffff;
  --hover:       #f2f2f2;
  --skel-a:      #ececec;
  --skel-b:      #f6f6f6;
  --shadow:      0 2px 14px rgba(0,0,0,.10);

  --mast-h: 56px;
  --side-w: 240px;
  --radius:  12px;
  --font: "Roboto", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"]{
  --bg:          #0f0f0f;
  --bg-elev:     #181818;
  --bg-sunken:   #000000;
  --surface:     #181818;
  --border:      #2b2b2b;
  --text:        #f1f1f1;
  --text-dim:    #aaaaaa;
  --text-faint:  #717171;
  --chip:        #272727;
  --chip-active: #f1f1f1;
  --chip-active-ink:#0f0f0f;
  --hover:       #272727;
  --skel-a:      #202020;
  --skel-b:      #2a2a2a;
  --shadow:      0 2px 18px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }

/* The `hidden` attribute must beat any layout rule below. Author
   rules like `.modal{display:grid}` otherwise outrank the UA
   stylesheet's [hidden] and the element stays on screen. */
[hidden]{ display:none !important; }

html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-y:scroll;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; }
svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9;
     stroke-linecap:round; stroke-linejoin:round; }

/* ───────────── masthead ───────────── */
.masthead{
  position:fixed; inset:0 0 auto 0; height:var(--mast-h); z-index:60;
  display:flex; align-items:center; gap:16px; padding:0 16px;
  background:var(--bg); border-bottom:1px solid transparent;
}
.masthead.scrolled{ border-bottom-color:var(--border); }
.mast-left,.mast-right{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.mast-right{ margin-left:auto; }

.icon-btn{
  width:40px; height:40px; border:0; border-radius:50%; background:transparent;
  display:grid; place-items:center; cursor:pointer; flex:0 0 auto;
}
.icon-btn:hover{ background:var(--hover); }

.brand{ display:flex; align-items:center; gap:6px; margin-left:4px; }
.brand-mark svg{ width:34px; height:24px; fill:var(--accent); stroke:none; }
.brand-text{ font-size:20px; font-weight:700; letter-spacing:-1.1px; }
.brand-plus{ color:var(--accent); }

.searchbar{ flex:1 1 640px; max-width:640px; display:flex; align-items:center; gap:8px; margin:0 auto; }
.search-field{
  flex:1; display:flex; align-items:center;
  border:1px solid var(--border); border-radius:999px; background:var(--bg-sunken);
  padding:0 6px 0 16px; height:40px;
}
.search-field:focus-within{ border-color:#3ea6ff; background:var(--bg); }
.search-field input{
  flex:1; border:0; outline:0; background:transparent; color:var(--text);
  font-size:15px; height:100%; min-width:0;
}
.clear-btn{ width:28px;height:28px;border:0;border-radius:50%;background:transparent;cursor:pointer;
            display:grid;place-items:center; }
.clear-btn:hover{ background:var(--hover); }
.clear-btn svg{ width:16px; height:16px; }
.search-go{
  width:60px; height:40px; border:1px solid var(--border); border-radius:999px;
  background:var(--chip); cursor:pointer; display:grid; place-items:center; flex:0 0 auto;
}
.search-go:hover{ background:var(--hover); }

.avatar{
  width:32px;height:32px;border-radius:50%;margin-left:8px;flex:0 0 auto;
  background:linear-gradient(135deg,#ff2d55,#ff7a3d); color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px;
  overflow:hidden; cursor:pointer;
}
/* Without this an <img> keeps its natural size and spills past the circle. */
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ───────────── sidebar ───────────── */
/* Above the watch overlay (55) so the menu still opens over a
   playing video, but below the masthead (60) that toggles it. */
.sidebar{
  position:fixed; top:var(--mast-h); left:0; bottom:0; width:var(--side-w); z-index:59;
  background:var(--bg); overflow-y:auto; padding:12px 0 24px;
  scrollbar-width:thin;
}
.sidebar::-webkit-scrollbar{ width:8px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
.nav-group{ padding:0 12px; }
.nav-heading{ font-size:15px; font-weight:600; padding:8px 12px 4px; }
.nav-item{
  display:flex; align-items:center; gap:24px; height:40px; padding:0 12px;
  border-radius:10px; font-size:14px; cursor:pointer;
}
.nav-item:hover{ background:var(--hover); }
.nav-item.active{ background:var(--hover); font-weight:600; }
.nav-item svg{ width:23px;height:23px; flex:0 0 auto; }
.nav-item.active svg{ fill:currentColor; stroke-width:0; }
.nav-item span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-sep{ height:1px; background:var(--border); margin:12px; }
.sidebar-foot{ padding:16px 24px; color:var(--text-faint); font-size:12px; line-height:1.5; }
/* Just under the sidebar it dims for, and above the watch overlay. */
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:57; display:none; }

body.nav-collapsed .sidebar{ transform:translateX(-100%); }
body.nav-collapsed #main{ margin-left:0; }
body.nav-open .scrim{ display:block; }

/* ───────────── main ───────────── */
#main{
  margin-left:var(--side-w); padding-top:var(--mast-h);
  min-height:100vh;
}
.chiprail{
  position:sticky; top:var(--mast-h); z-index:40; background:var(--bg);
  display:flex; gap:12px; padding:12px 24px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--border);
}
.chiprail::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; height:32px; padding:0 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--chip); font-size:14px; cursor:pointer; white-space:nowrap;
}
.chip:hover{ background:var(--hover); }
.chip.active{ background:var(--chip-active); color:var(--chip-active-ink); border-color:var(--chip-active); }

.banner{
  margin:16px 24px; padding:14px 18px; border-radius:var(--radius);
  background:var(--bg-elev); border:1px solid var(--border);
  font-size:14px; line-height:1.55; color:var(--text-dim);
  display:flex; gap:14px; align-items:flex-start;
}
.banner strong{ color:var(--text); }
.banner code{
  background:var(--chip); color:var(--text); border-radius:5px;
  padding:1px 6px; font-size:12.5px; white-space:nowrap;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
.banner .banner-act{
  margin-left:auto; flex:0 0 auto; border:0; border-radius:999px; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:13px;
  padding:8px 16px; white-space:nowrap;
}
.banner.err{ border-color:var(--accent); }

.section-title{ margin:24px 24px 0; font-size:20px; font-weight:700; }
.section-sub{ margin:4px 24px 0; font-size:13px; color:var(--text-dim); }

/* ───────────── grid + cards ───────────── */
.grid{
  display:grid; gap:16px 16px; padding:20px 24px 48px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.card{ cursor:pointer; display:flex; flex-direction:column; gap:10px; }
.thumb{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius);
  overflow:hidden; background:var(--skel-a);
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.card:hover .thumb img{ transform:scale(1.03); }
.thumb img{ transition:transform .25s ease; }
.badge{
  position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.82); color:#fff;
  font-size:12px; font-weight:600; padding:2px 5px; border-radius:4px; letter-spacing:.2px;
}
.card-body{ display:flex; gap:12px; }
.card-avatar{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-weight:700;font-size:15px;color:#fff; overflow:hidden;
}
.card-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-text{ min-width:0; }
.card-title{
  font-size:15px; font-weight:600; line-height:1.35; margin:0 0 4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-meta{ font-size:13px; color:var(--text-dim); line-height:1.4; }
.card-meta a:hover{ color:var(--text); }

/* list rows (search results / sidebar) */
.rows{ padding:20px 24px 48px; display:flex; flex-direction:column; gap:16px; max-width:1100px; }
.row{ display:flex; gap:16px; cursor:pointer; }
.row .thumb{ width:360px; flex:0 0 360px; }
.row-text{ min-width:0; }
.row-title{ font-size:18px; font-weight:500; margin:0 0 6px; line-height:1.3;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.row-meta{ font-size:12px; color:var(--text-dim); margin-bottom:8px; }
.row-desc{ font-size:12px; color:var(--text-dim); line-height:1.5;
           display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* skeletons */
.skel{ background:linear-gradient(90deg,var(--skel-a) 25%,var(--skel-b) 37%,var(--skel-a) 63%);
       background-size:400% 100%; animation:shimmer 1.3s ease infinite; border-radius:6px; }
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }
.skel-line{ height:12px; margin-bottom:8px; }
.skel-line.w70{ width:70%; } .skel-line.w45{ width:45%; }

.empty{ padding:64px 24px; text-align:center; color:var(--text-dim); }
.empty h3{ color:var(--text); font-size:18px; margin:0 0 8px; }
.load-more{ display:block; margin:8px auto 56px; padding:10px 22px; border-radius:999px;
            border:1px solid var(--border); background:var(--bg-elev); cursor:pointer; font-size:14px; }
.load-more:hover{ background:var(--hover); }

/* ───────────── watch view ───────────── */
/* Starts below the masthead so the logo, menu button and search bar
   stay usable while a video is playing, the way YouTube behaves. */
.watch{
  position:fixed; inset:var(--mast-h) 0 0 0; z-index:55;
  background:var(--bg); overflow-y:auto;
}
.watch-inner{
  display:grid; grid-template-columns:minmax(0,1fr) 402px; gap:24px;
  max-width:1754px; margin:0 auto; padding:24px 24px 80px;
}
.player-shell{
  width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden;
}
#player,#player iframe{ width:100%; height:100%; border:0; display:block; }
.watch-title{ font-size:20px; font-weight:700; line-height:1.4; margin:14px 0 8px; }
.watch-meta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.wm-channel{ display:flex; align-items:center; gap:12px; }
.ch-avatar{ width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
            font-weight:700;color:#fff;background:linear-gradient(135deg,#7b61ff,#3ea6ff);
            flex:0 0 auto; overflow:hidden; }
.ch-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.ch-lines{ display:flex; flex-direction:column; line-height:1.3; }
.ch-name{ font-size:15px; font-weight:600; }
.ch-sub{ font-size:12px; color:var(--text-dim); }
.btn-sub{
  margin-left:10px; border:0; border-radius:999px; padding:9px 16px; cursor:pointer;
  background:var(--text); color:var(--bg); font-weight:600; font-size:14px;
}
.btn-sub.on{ background:var(--chip); color:var(--text); }
.wm-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 15px;
  border:0; border-radius:999px; background:var(--chip); cursor:pointer; font-size:14px; font-weight:500;
}
.pill:hover{ background:var(--hover); }
.pill.on{ background:var(--accent); color:var(--accent-ink); }
.pill svg{ width:19px; height:19px; }
.pill-group{ display:flex; align-items:center; background:var(--chip); border-radius:999px; }
.pill-group .pill{ background:transparent; }
.pill-divider{ width:1px; height:22px; background:var(--border); }

.desc-card{
  margin-top:14px; background:var(--bg-elev); border-radius:var(--radius); padding:14px;
  font-size:14px; line-height:1.55;
}
.desc-stats{ font-weight:600; margin-bottom:8px; }
.desc-body{ white-space:pre-wrap; word-break:break-word; max-height:64px; overflow:hidden; color:var(--text); }
.desc-body a{ color:#3ea6ff; }
.desc-card.open .desc-body{ max-height:none; }
.desc-more{ margin-top:8px; border:0; background:transparent; cursor:pointer; font-weight:600; font-size:14px; padding:0; }

/* ── playlists ── */
.list-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:24px 24px 0;
}
.list-head-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.list-head-actions button{ padding:9px 16px; font-size:14px; }

/* Playlist cards get the stacked-paper look: two offset slivers
   peeking out above the cover, so they read as a set of videos. */
.pl-card{ position:relative; }
.pl-card .pl-stack{ position:relative; padding-top:8px; }
.pl-card .pl-stack::before,
.pl-card .pl-stack::after{
  content:''; position:absolute; left:50%; translate:-50% 0;
  border-radius:8px 8px 0 0; background:var(--skel-a);
  border:1px solid var(--border); border-bottom:0;
}
.pl-card .pl-stack::before{ top:0;  width:88%; height:8px; opacity:.55; }
.pl-card .pl-stack::after{  top:4px; width:94%; height:8px; opacity:.8; }
.pl-thumb{ background:var(--bg-elev); }
.pl-count{ display:inline-flex; align-items:center; gap:5px; }
.pl-count svg{ width:14px; height:14px; }
.pl-empty-cover{
  width:100%; height:100%; display:grid; place-items:center;
  font-size:40px; color:var(--text-faint);
}

/* Playlist detail: tinted panel on the left, rows on the right. */
.plx{
  display:grid; grid-template-columns:360px minmax(0,1fr); gap:24px;
  padding:24px; align-items:start;
}
.plx-panel{
  position:sticky; top:calc(var(--mast-h) + 24px);
  border-radius:16px; padding:22px; color:#fff;
  background:
    linear-gradient(180deg,
      hsl(var(--plx-hue) 55% 34%) 0%,
      hsl(var(--plx-hue) 50% 22%) 55%,
      hsl(var(--plx-hue) 45% 14%) 100%);
  box-shadow:var(--shadow);
}
.plx-cover{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:12px;
  overflow:hidden; background:rgba(0,0,0,.35); margin-bottom:16px;
}
.plx-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.plx-cover-count{
  position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.8); color:#fff; font-size:12px; font-weight:600;
  padding:4px 8px; border-radius:6px;
}
.plx-cover-count svg{ width:15px; height:15px; }
.plx-title{ font-size:26px; font-weight:700; line-height:1.25; margin:0 0 8px; color:#fff; }
.plx-meta{ font-size:13px; color:rgba(255,255,255,.72); margin-bottom:10px; }
.plx-desc{
  font-size:13px; color:rgba(255,255,255,.72); line-height:1.5; margin:0 0 14px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.plx-buttons{ display:flex; gap:10px; margin:16px 0 8px; flex-wrap:wrap; }
.plx-play,.plx-shuffle{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:999px; padding:10px 20px; cursor:pointer;
  font-size:14px; font-weight:600; font-family:inherit; flex:1 1 auto;
}
.plx-play{ background:#fff; color:#0f0f0f; }
.plx-shuffle{ background:rgba(255,255,255,.18); color:#fff; }
.plx-play:hover{ background:rgba(255,255,255,.88); }
.plx-shuffle:hover{ background:rgba(255,255,255,.28); }
.plx-play svg,.plx-shuffle svg{ width:18px; height:18px; }
.plx-tools{ display:flex; gap:4px; }
.plx-tools .icon-btn{ width:36px; height:36px; color:#fff; }
.plx-tools .icon-btn:hover{ background:rgba(255,255,255,.18); }
.plx-tools svg{ width:18px; height:18px; }

.plx-rows{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.plx-row{
  display:flex; align-items:center; gap:12px; padding:6px 8px;
  border-radius:10px; cursor:pointer;
}
.plx-row:hover{ background:var(--hover); }
.plx-num{
  width:24px; text-align:center; color:var(--text-dim); font-size:13px; flex:0 0 auto;
}
.plx-row-thumb{ width:160px; flex:0 0 160px; border-radius:8px; }
.plx-row-text{ flex:1; min-width:0; }
.plx-row-title{
  font-size:15px; font-weight:600; margin:0 0 4px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.plx-row-meta{ font-size:13px; color:var(--text-dim); }
.plx-row-actions{ display:flex; gap:2px; flex:0 0 auto; opacity:0; transition:opacity .12s; }
.plx-row:hover .plx-row-actions,.plx-row:focus-within .plx-row-actions{ opacity:1; }
.plx-row-actions .icon-btn{ width:32px; height:32px; }
.plx-row-actions svg{ width:17px; height:17px; }
.plx-row-actions .icon-btn[disabled]{ opacity:.3; cursor:default; }
.plx-row-actions .icon-btn[disabled]:hover{ background:transparent; }

@media (max-width:1000px){
  .plx{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .plx-panel{ position:static; }
  /* Touch has no hover, so the row controls stay visible. */
  .plx-row-actions{ opacity:1; }
}
@media (max-width:760px){
  .plx{ padding:14px; }
  .plx-row-thumb{ width:120px; flex-basis:120px; }
  .plx-title{ font-size:21px; }
}

/* queue panel on the watch page */
.queue-card{
  border:1px solid var(--border); border-radius:12px; margin-bottom:18px; overflow:hidden;
  background:var(--bg-elev);
}
.queue-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
.queue-name{ font-size:15px; font-weight:700; }
.queue-name:hover{ text-decoration:underline; }
.queue-pos{ font-size:12px; color:var(--text-dim); margin-top:2px; }
.queue-list{ max-height:330px; overflow-y:auto; }
.queue-item{ display:flex; align-items:center; gap:8px; padding:6px 10px; cursor:pointer; }
.queue-item:hover{ background:var(--hover); }
.queue-item.current{ background:var(--hover); }
.queue-num{ width:18px; text-align:center; font-size:12px; color:var(--text-dim); flex:0 0 auto; }
.queue-thumb{ width:88px; flex:0 0 88px; border-radius:6px; }
.queue-text{ min-width:0; }
.queue-title{
  font-size:13px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* save picker + share/import dialogs */
.save-card{ width:min(440px,100%); }
.save-list{ display:flex; flex-direction:column; gap:2px; max-height:52vh; overflow-y:auto; }
.save-row{
  display:flex; align-items:center; gap:12px; padding:10px 8px;
  border-radius:8px; cursor:pointer; font-size:14px;
}
.save-row:hover{ background:var(--hover); }
.save-row input{ width:18px; height:18px; accent-color:var(--accent); cursor:pointer; flex:0 0 auto; }
.save-sep{ height:1px; background:var(--border); margin:6px 0; }

.share-code{
  width:100%; font-family:ui-monospace,Consolas,monospace; font-size:12.5px; line-height:1.5;
  border:1px solid var(--border); border-radius:10px; background:var(--bg-sunken);
  color:var(--text); padding:12px; resize:vertical; outline:0; word-break:break-all;
}
.share-code:focus{ border-color:#3ea6ff; }
.import-file{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.file-btn{ display:inline-block; cursor:pointer; }

/* ── channel page ── */
.channel-head{
  display:flex; align-items:center; gap:24px; padding:28px 24px 8px; flex-wrap:wrap;
}
.ch-banner-avatar{
  width:112px; height:112px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:grid; place-items:center; font-size:44px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#7b61ff,#3ea6ff);
}
.ch-banner-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.channel-info{ flex:1; min-width:0; }
.channel-name{ font-size:28px; font-weight:700; margin:0 0 6px; line-height:1.2; }
.channel-facts{ font-size:14px; color:var(--text-dim); margin-bottom:6px; }
.channel-desc{
  font-size:14px; color:var(--text-dim); margin:0; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.channel-actions{ flex:0 0 auto; }
.channel-actions .btn-sub{ margin-left:0; padding:11px 20px; }

/* channel toolbar: sub-tabs + sort chips */
.channel-toolbar{
  display:flex; flex-direction:column; gap:12px;
  padding:14px 24px 0; border-bottom:1px solid var(--border);
}
.ch-tabs{ display:flex; gap:6px; }
.ch-tab{
  border:0; background:transparent; cursor:pointer; padding:8px 14px;
  font-size:15px; font-weight:600; color:var(--text-dim);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.ch-tab:hover{ color:var(--text); }
.ch-tab.active{ color:var(--text); border-bottom-color:var(--text); }
.ch-sorts{ display:flex; gap:8px; overflow-x:auto; padding-bottom:12px; scrollbar-width:none; }
.ch-sorts::-webkit-scrollbar{ display:none; }

/* Shorts are vertical, so their cards use a 9:16 thumbnail. */
/* Grid form, still used by the channel page's Shorts tab. */
.shorts-grid{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.shorts-grid .thumb{ aspect-ratio:9/16; }
.shorts-grid .card-avatar{ display:none; }

/* ── Shorts feed: one per screen, snapping as you scroll ── */
.shorts-feed{
  height:calc(100vh - var(--mast-h));
  overflow-y:auto; scroll-snap-type:y mandatory;
  scrollbar-width:none; overscroll-behavior:contain;
}
.shorts-feed::-webkit-scrollbar{ display:none; }
.shorts-frame{
  position:relative; height:calc(100vh - var(--mast-h));
  scroll-snap-align:center; scroll-snap-stop:always;
  display:grid; place-items:center; padding:16px 0;
}
.shorts-stage{
  position:relative; height:min(100%, 88vh); aspect-ratio:9/16;
  border-radius:14px; overflow:hidden; background:#000;
  box-shadow:var(--shadow);
}
.shorts-stage iframe{ width:100%; height:100%; border:0; display:block; }
.shorts-poster{ width:100%; height:100%; object-fit:cover; display:block; }
.shorts-playbtn{
  position:absolute; inset:0; margin:auto; width:64px; height:64px;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.6); color:#fff; display:grid; place-items:center;
}
.shorts-playbtn:hover{ background:rgba(0,0,0,.75); }
.shorts-playbtn svg{ width:30px; height:30px; margin-left:3px; }
.shorts-loading{ display:grid; place-items:center; height:calc(100vh - var(--mast-h)); }
.shorts-loading .shorts-stage{ border-radius:14px; }

/* caption block, bottom-left over the video */
.shorts-info{
  position:absolute; left:50%; bottom:34px; translate:-50% 0;
  width:min(46vh, 92vw); max-width:420px; color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.85); pointer-events:none;
}
.shorts-info > *{ pointer-events:auto; }
.shorts-chan{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.shorts-avatar{
  width:32px; height:32px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff;
  border:1px solid rgba(255,255,255,.55);
}
.shorts-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.shorts-chan-name{ font-size:14px; font-weight:600; cursor:pointer; }
.shorts-chan-name:hover{ text-decoration:underline; }
.shorts-title{
  font-size:14px; line-height:1.45; margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.shorts-stats{ font-size:12px; opacity:.85; }

/* action rail down the right of the video */
.shorts-rail{
  position:absolute; left:50%; bottom:34px;
  translate:calc(min(23vh, 46vw) + 14px) 0;
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.shorts-rail-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:0; background:transparent; cursor:pointer; color:var(--text);
  font-size:11px; font-family:inherit;
}
.shorts-rail-btn > span:first-child,
.shorts-rail-btn > svg{
  width:44px; height:44px; border-radius:50%; background:var(--chip);
  display:grid; place-items:center; padding:11px;
}
.shorts-rail-btn:hover > svg{ background:var(--hover); }
.shorts-rail-btn.on > svg{ background:var(--accent); color:#fff; }
.shorts-rail-label{ opacity:.85; }

@media (max-width:760px){
  .shorts-stage{ height:100%; border-radius:0; }
  .shorts-frame{ padding:0; }
  .shorts-info{ left:14px; translate:none; width:calc(100% - 92px); bottom:20px; }
  .shorts-rail{ left:auto; right:8px; translate:none; bottom:20px; }
  .shorts-rail-btn > svg{ width:40px; height:40px; background:rgba(0,0,0,.45); color:#fff; }
  .shorts-rail-label{ color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.9); }
}

/* A vertical video gets a tall, centred player instead of 16:9. */
.player-shell.vertical{
  aspect-ratio:9/16; max-height:min(84vh,860px); width:auto; max-width:100%;
  margin:0 auto; background:#000;
}

/* anything that opens a channel */
.ch-link{ cursor:pointer; }
.ch-link:hover{ color:var(--text); text-decoration:underline; }
.card-avatar.ch-link:hover,.ch-avatar.ch-link:hover{ filter:brightness(1.12); text-decoration:none; }
.comment-avatar.ch-link:hover{ filter:brightness(1.12); }

@media (max-width:760px){
  .channel-head{ padding:20px 16px 4px; gap:16px; }
  .ch-banner-avatar{ width:80px; height:80px; font-size:32px; }
  .channel-name{ font-size:22px; }
}

/* ── comments (read-only) ── */
.comments{ margin-top:26px; }
.comments-head{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.comments-head h2{ font-size:18px; font-weight:700; margin:0; }
.comment-list{ display:flex; flex-direction:column; gap:18px; }
.comment{ display:flex; gap:14px; }
.comment-avatar{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:grid; place-items:center; font-weight:700; color:#fff; font-size:16px;
}
.comment-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.comment-body{ min-width:0; flex:1; }
.comment-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:3px; flex-wrap:wrap; }
.comment-author{ font-size:13px; font-weight:600; }
.comment-when{ font-size:12px; color:var(--text-dim); }
.comment-text{
  font-size:14px; line-height:1.55; white-space:pre-wrap; word-break:break-word;
  max-height:104px; overflow:hidden;
}
.comment.open .comment-text{ max-height:none; }
.comment-more{
  border:0; background:transparent; cursor:pointer; padding:2px 0;
  font-size:13px; font-weight:600; color:var(--text-dim);
}
.comment-more:hover{ color:var(--text); }
.comment-foot{ display:flex; align-items:center; gap:16px; margin-top:6px; color:var(--text-dim); }
.comment-likes{ display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.comment-likes svg{ width:16px; height:16px; }
.comment-replies{ font-size:12px; font-weight:600; }
.comments-note{ font-size:14px; color:var(--text-dim); padding:10px 0; line-height:1.6; }

.watch-secondary .side-head{ font-size:16px; font-weight:600; margin-bottom:12px; }
.side-list{ display:flex; flex-direction:column; gap:8px; }
.side-item{ display:flex; gap:8px; cursor:pointer; border-radius:10px; padding:4px; }
.side-item:hover{ background:var(--hover); }
.side-item .thumb{ width:168px; flex:0 0 168px; border-radius:8px; }
.side-title{ font-size:14px; font-weight:600; line-height:1.3; margin:0 0 4px;
             display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.side-meta{ font-size:12px; color:var(--text-dim); line-height:1.4; }

/* Sits just under the masthead, not over it, now that the overlay
   starts below the top bar. */
.watch-close{
  position:fixed; top:calc(var(--mast-h) + 12px); right:18px; z-index:58;
  width:40px;height:40px;border:0;border-radius:50%;
  background:var(--chip); cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow);
}
.watch-close:hover{ background:var(--hover); }

/* ───────────── modal + toast ───────────── */
.modal{ position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.6);
        display:grid; place-items:center; padding:20px; }
.modal-card{
  width:min(560px,100%); background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:24px; box-shadow:var(--shadow); max-height:90vh; overflow-y:auto;
}
.modal-card h2{ margin:0 0 10px; font-size:19px; }
.modal-copy{ font-size:14px; line-height:1.6; color:var(--text-dim); margin:0 0 14px; }
.modal-steps{ font-size:13px; line-height:1.7; color:var(--text-dim); margin:0 0 16px; padding-left:20px; }
.modal-steps a{ color:#3ea6ff; }
.modal-card input[type=password],.modal-card input[type=text]{
  width:100%; height:42px; padding:0 14px; font-size:14px; font-family:inherit;
  border:1px solid var(--border); border-radius:10px; background:var(--bg-sunken); color:var(--text); outline:0;
}
.modal-card input:focus{ border-color:#3ea6ff; }
.modal-check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); margin-top:10px; }
.key-status{ font-size:13px; margin-top:10px; min-height:18px; }
.key-status.ok{ color:#2ba640; } .key-status.bad{ color:var(--accent); }
/* settings: head + tabs */
.settings-card{ width:min(620px,100%); }
.settings-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.settings-head h2{ margin:0; }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin:12px 0 18px; }
.tab{
  border:0; background:transparent; cursor:pointer; padding:10px 14px;
  font-size:14px; font-weight:600; color:var(--text-dim);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--text); border-bottom-color:var(--accent); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.field-label{ display:block; font-size:13px; font-weight:600; margin:0 0 6px; }
.field-hint{ font-size:12px; color:var(--text-dim); line-height:1.5; margin:8px 0 0; }

/* profile picture preview */
.pfp-row{ display:flex; gap:16px; align-items:center; margin-bottom:18px; }
.pfp-preview{
  width:72px; height:72px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:grid; place-items:center; font-size:28px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#ff2d55,#ff7a3d); border:1px solid var(--border);
}
.pfp-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.pfp-fields{ flex:1; min-width:0; }

/* API key list */
.key-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.key-row{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:var(--bg-sunken); border:1px solid var(--border); border-radius:10px;
}
.key-text{ flex:1; min-width:0; font-size:13px; font-family:ui-monospace,Consolas,monospace;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.key-tag{ font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px;
          background:var(--chip); color:var(--text-dim); flex:0 0 auto; }
.key-tag.live{ background:#2ba640; color:#fff; }
.key-tag.dead{ background:var(--accent); color:#fff; }
.key-del{ border:0; background:transparent; cursor:pointer; padding:4px; border-radius:6px;
          color:var(--text-dim); flex:0 0 auto; display:grid; place-items:center; }
.key-del:hover{ background:var(--hover); color:var(--text); }
.key-del svg{ width:16px; height:16px; }
.key-add{ display:flex; gap:8px; }
.key-add input{ flex:1; }
.key-empty{ font-size:13px; color:var(--text-dim); padding:10px 0; }

.proxy-note{
  display:flex; gap:10px; padding:12px 14px; border-radius:10px; margin-bottom:16px;
  background:rgba(43,166,64,.12); border:1px solid rgba(43,166,64,.4);
  font-size:13px; line-height:1.55;
}
.proxy-note strong{ color:var(--text); }

.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; }
.btn-primary,.btn-ghost{ border:0; border-radius:999px; padding:10px 20px; cursor:pointer; font-size:14px; font-weight:600; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-ghost{ background:var(--chip); }
.btn-ghost:hover,.btn-primary:hover{ filter:brightness(1.08); }

.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:120;
  background:var(--text); color:var(--bg); padding:12px 20px; border-radius:10px;
  font-size:14px; box-shadow:var(--shadow);
}

/* theme icon swap */
.ico-moon{ display:none; }
:root[data-theme="dark"] .ico-sun{ display:none; }
:root[data-theme="dark"] .ico-moon{ display:block; }

/* ───────────── responsive ───────────── */
@media (max-width:1300px){
  .watch-inner{ grid-template-columns:minmax(0,1fr) 340px; }
  .side-item .thumb{ width:140px; flex-basis:140px; }
}
@media (max-width:1100px){
  .watch-inner{ grid-template-columns:minmax(0,1fr); }
  .row .thumb{ width:260px; flex-basis:260px; }
}
@media (max-width:1000px){
  .sidebar{ transform:translateX(-100%); transition:transform .18s ease; }
  #main{ margin-left:0; }
  body.nav-open .sidebar{ transform:none; box-shadow:var(--shadow); }
}
@media (max-width:760px){
  .masthead{ gap:8px; padding:0 8px; }
  .brand-text{ display:none; }
  .mast-right .icon-btn:not(#settingsBtn):not(#themeToggle){ display:none; }
  .grid{ grid-template-columns:1fr; padding:16px; gap:22px; }
  .rows{ padding:16px; }
  .row{ flex-direction:column; }
  .row .thumb{ width:100%; flex-basis:auto; }
  .watch-inner{ padding:0 0 60px; }
  .player-shell{ border-radius:0; }
  .watch-title,.watch-meta,.desc-card,.watch-secondary{ padding-left:14px; padding-right:14px; }
  .side-item .thumb{ width:160px; flex-basis:160px; }
  .chiprail{ padding:10px 14px; }
  .banner{ margin:12px 14px; flex-direction:column; }
  .banner .banner-act{ margin-left:0; }
}