/* AI Dream Tube — layout modeled on familiar video-platform conventions,
   with blue as the brand color. Tokens first, then shell, then views. */

:root {
  /* brand */
  --brand: #1d6bf3;          /* icons, progress, underlines */
  --brand-2: #4fa3ff;
  --brand-fill: #1d6bf3;     /* filled buttons with white text (4.72:1) */
  --brand-ink: #ffffff;
  --brand-soft: #e7f0ff;
  --brand-ring: #1d6bf3;
  --link: #0b57d0;           /* text links on chip/grey surfaces (5.7:1 on #f2f2f2) */

  /* surfaces */
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --bg-hover: #f2f2f2;
  --bg-active: #e5e5e5;
  --chip: #f2f2f2;
  --chip-hover: #e5e5e5;
  --chip-active-bg: #0f0f0f;
  --chip-active-fg: #ffffff;
  --text: #0f0f0f;
  --text-2: #606060;
  --text-3: #c4c4c4;      /* drag handles, tertiary glyphs */
  --border: #e5e5e5;
  --search-bg: #ffffff;
  --search-btn: #f8f8f8;
  --scrim: rgba(0, 0, 0, 0.5);
  --shadow: 0 4px 32px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.08);
  --skeleton: #e9e9e9;
  --skeleton-hi: #f6f6f6;
  --toast-bg: #0f0f0f;
  --toast-fg: #ffffff;
  --toast-action: #66a3ff;

  /* layout */
  --masthead-h: 56px;
  --masthead-pad-x: 16px;
  --sheet-h: 0px;
  --guide-w: 240px;
  --mini-w: 72px;
  --bottom-h: 48px;
  --radius: 12px;
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* motion */
  --ease-std: cubic-bezier(.2, 0, 0, 1);
  --ease-decel: cubic-bezier(.2, 0, 0, 1);   /* short (<=300ms) entrances */
  --ease-emph: cubic-bezier(.05, .7, .1, 1);  /* emphasized decelerate: only with >=400ms */
  --ease-accel: cubic-bezier(.3, 0, .8, .15);
  --dur-xs: 100ms;
  --dur-s: 150ms;
  --dur-m: 250ms;
  --dur-l: 350ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3d8bff;
    --brand-2: #7cc0ff;
    --brand-fill: #1a5fd6;
    --brand-soft: #102a52;
    --brand-ring: #3ea6ff;
    --link: #66a3ff;
    --bg: #0f0f0f;
    --bg-elev: #212121;
    --bg-hover: #272727;
    --bg-active: #3f3f3f;
    --chip: #272727;
    --chip-hover: #3f3f3f;
    --chip-active-bg: #f1f1f1;
    --chip-active-fg: #0f0f0f;
    --text: #f1f1f1;
    --text-2: #aaaaaa;
    --text-3: #717171;
    --border: #3f3f3f;
    --search-bg: #121212;
    --search-btn: #222222;
    --shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.5);
    --skeleton: #272727;
    --skeleton-hi: #333333;
    --toast-bg: #f1f1f1;
    --toast-fg: #0f0f0f;
    --toast-action: #0b57d0;
  }
}
:root[data-theme="dark"] {
  --brand: #3d8bff;
  --brand-2: #7cc0ff;
  --brand-fill: #1a5fd6;
  --brand-soft: #102a52;
  --brand-ring: #3ea6ff;
  --link: #66a3ff;
  --bg: #0f0f0f;
  --bg-elev: #212121;
  --bg-hover: #272727;
  --bg-active: #3f3f3f;
  --chip: #272727;
  --chip-hover: #3f3f3f;
  --chip-active-bg: #f1f1f1;
  --chip-active-fg: #0f0f0f;
  --text: #f1f1f1;
  --text-2: #aaaaaa;
  --text-3: #717171;
  --border: #3f3f3f;
  --search-bg: #121212;
  --search-btn: #222222;
  --shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.5);
  --skeleton: #272727;
  --skeleton-hi: #333333;
  --toast-bg: #f1f1f1;
  --toast-fg: #0f0f0f;
  --toast-action: #0b57d0;
}

/* ================================================================ base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html.scroll-lock, body.sheet-lock { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/20px var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:disabled { cursor: default; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.thumb:focus-visible { outline-offset: -2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--brand-fill); color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip-link:focus { top: 8px; }
.spacer { flex: 1; }
.dot-sep { margin: 0 4px; }
/* separators attach to the start of the next item, so a bullet never ends a line */
.sep-item::before { content: '•'; margin: 0 4px; }
.clamp-1, .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
.link { color: var(--link); }
.nowrap { white-space: nowrap; }
.link:hover { text-decoration: underline; }

/* ================================================================ buttons */
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none; position: relative;
  transition: background-color var(--dur-xs) var(--ease-std);
}
.icon-btn:active { background: var(--bg-active); }
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:disabled { opacity: .4; }
@media (hover: hover) { .icon-btn:hover { background: var(--bg-hover); } }

.btn {
  height: 36px; padding: 0 16px; border-radius: 18px; font-weight: 500; font-size: 14px; line-height: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  transition: background-color var(--dur-xs) var(--ease-std), transform var(--dur-xs) var(--ease-std);
}
.btn svg { width: 20px; height: 20px; }
.btn.primary { background: var(--brand-fill); color: #fff; }
.btn.primary:disabled { background: var(--chip); color: var(--text-2); }
.btn.tonal { background: var(--chip); }
.btn.outline { border: 1px solid var(--border); line-height: 34px; }
.btn.text-brand { color: var(--link); }
.btn.sm { height: 32px; line-height: 30px; padding: 0 12px; font-size: 13px; }
.btn.on-dark { background: rgba(255, 255, 255, .15); color: #fff; }
.btn.on-light { background: #fff; color: #0f0f0f; }
.btn.on-glass { background: rgba(255, 255, 255, .2); color: #fff; }
@media (hover: hover) {
  .btn:hover { background: var(--bg-hover); }
  .btn.primary:not(:disabled):hover { background: color-mix(in srgb, var(--brand-fill) 88%, #000); }
  .btn.tonal:hover { background: var(--chip-hover); }
  .btn.text-brand:hover { background: var(--brand-soft); }
  .btn.on-dark:hover { background: rgba(255, 255, 255, .25); }
  .btn.on-light:hover { background: #e6e6e6; }
  .btn.on-glass:hover { background: rgba(255, 255, 255, .3); }
}
:is(.pill, .chip, .btn, .subscribe, .create-btn):not(:disabled):active { transform: scale(.96); }
.menu-item:active, .guide-item:active { background: var(--bg-active); }

/* ================================================================ masthead */
.masthead {
  position: fixed; inset: 0 0 auto 0; height: var(--masthead-h); z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--masthead-pad-x); background: var(--bg);
}
.masthead-start, .masthead-end { display: flex; align-items: center; gap: 4px; flex: none; }
.masthead-end { gap: 8px; }
.logo { display: flex; align-items: center; gap: 4px; padding: 8px 14px 8px 12px; border-radius: 8px; }
.logo-word { font-weight: 700; font-size: 18px; letter-spacing: -0.6px; white-space: nowrap; }
.logo-word span { color: var(--brand); }
.logo-mark { display: block; }

.nav-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--brand);
  transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none;
}
.nav-progress.start { opacity: 1; }
.nav-progress.run { transform: scaleX(.7); transition: transform 300ms var(--ease-decel); }
.nav-progress.done { transform: scaleX(1); opacity: 0; transition: transform 200ms var(--ease-std), opacity 200ms 80ms; }

.search { flex: 0 1 728px; display: flex; align-items: center; gap: 12px; min-width: 0; margin-left: 40px; }
.search form { flex: 1; display: flex; min-width: 0; height: 40px; }
.search-field { position: relative; flex: 1; min-width: 0; display: flex; }
.search input {
  flex: 1; min-width: 0; height: 40px; padding: 0 4px 0 16px;
  border: 1px solid var(--border); border-right: 0; border-radius: 40px 0 0 40px;
  background: var(--search-bg); color: var(--text); font: inherit; font-size: 16px; outline: none;
}
.search input:focus { border-color: var(--brand); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search input { padding-right: 48px; }
.search-clear { position: absolute; right: 4px; top: 0; z-index: 1; color: var(--text); }
.search-clear svg { width: 24px; height: 24px; }
.search-clear[hidden] { display: none; }
@media (hover: hover) { .search-clear:hover { background: var(--bg-hover); } }
.search-submit {
  width: 64px; height: 40px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--border); border-radius: 0 40px 40px 0; background: var(--search-btn);
}
@media (hover: hover) { .search-submit:hover { background: var(--bg-hover); } }
.search .icon-btn.mic { background: var(--chip); }
@media (hover: hover) { .search .icon-btn.mic:hover { background: var(--chip-hover); } }
.search-back, .search-open { display: none; }

.suggest {
  position: absolute; top: 44px; left: 0; right: 0; z-index: 45; list-style: none; margin: 0; padding: 16px 0;
  background: var(--bg-elev); border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--border);
  animation: menu-in var(--dur-s) var(--ease-decel);
}
.sugg { display: flex; align-items: center; gap: 16px; height: 32px; padding: 0 16px 0 16px; cursor: pointer; font-size: 16px; }
.sugg-fill { display: none; width: 40px; height: 40px; margin-right: -12px; border-radius: 50%; place-items: center; color: var(--text-2); flex: none; }
.sugg-fill svg { width: 20px; height: 20px; transform: rotate(45deg); }
.sugg svg { width: 20px; height: 20px; flex: none; color: var(--text-2); }
.sugg.hist .sugg-text { color: #7b3fc4; }
:root[data-theme="dark"] .sugg.hist .sugg-text { color: #c9a6f5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sugg.hist .sugg-text { color: #c9a6f5; } }
.sugg-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugg-text b { font-weight: 700; }
.sugg[aria-selected="true"] { background: var(--bg-hover); }
@media (hover: hover) { .sugg:hover { background: var(--bg-hover); } }
.sugg-remove { font-size: 12px; color: var(--link); padding: 4px; text-decoration: underline; opacity: 0; }
.sugg:hover .sugg-remove, .sugg[aria-selected="true"] .sugg-remove { opacity: 1; }

.create-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 10px;
  border-radius: 18px; background: var(--chip); font-weight: 500;
  transition: background-color var(--dur-xs) var(--ease-std), transform var(--dur-xs) var(--ease-std);
}
@media (hover: hover) { .create-btn:hover { background: var(--chip-hover); } }
.badge-wrap { position: relative; margin-right: 8px; }
/* the badge stays inside the 40px bell box, so it never touches the avatar */
.badge {
  position: absolute; top: 2px; right: 0; left: auto; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--brand-fill); color: #fff; font: 500 11px/16px var(--font);
  text-align: center; border: 2px solid var(--bg); box-sizing: content-box; pointer-events: none;
  transition: transform var(--dur-s) var(--ease-accel), opacity var(--dur-s) var(--ease-accel);
}
.badge.leaving { transform: scale(0); opacity: 0; }
.avatar-btn { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; margin: 0 8px 0 0; flex: none; }
.avatar-btn img { width: 100%; height: 100%; }
.avatar-sk { display: block; width: 32px; height: 32px; border-radius: 50%; }
#notif-btn[aria-expanded="true"] { background: var(--bg-active); }

/* ================================================================ menus */
.menu {
  position: fixed; z-index: 40; min-width: 200px; padding: 8px 0;
  background: var(--bg-elev); border-radius: 12px; box-shadow: var(--shadow);
  opacity: 0; transform: scale(.96) translateY(-4px); transform-origin: top right; visibility: hidden;
  transition: opacity 120ms var(--ease-accel), transform 120ms var(--ease-accel), visibility 0s 120ms;
}
.menu.open {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity var(--dur-s) var(--ease-decel), transform 200ms var(--ease-decel);
}
.masthead-menu { top: 52px; max-height: calc(100vh - 64px); overflow-y: auto; }
.notif-menu { right: 64px; width: min(480px, calc(100vw - 16px)); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.account-menu { right: 16px; width: 300px; }
@keyframes menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }

.menu-head { display: flex; gap: 16px; padding: 16px; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.menu-head img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.menu-head strong { display: block; font-size: 16px; font-weight: 500; line-height: 22px; }
.menu-head .menu-handle { display: block; color: var(--text-2); }
.menu-head .link { display: inline-block; margin-top: 8px; }
.menu-item {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 0 16px; height: 40px; text-align: left;
  font-size: 14px; transition: background-color var(--dur-xs) var(--ease-std);
}
.menu-item svg { width: 24px; height: 24px; flex: none; }
.menu-item > span:not(.menu-check):not(.menu-chev):not(.menu-hint) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item:focus-visible { background: var(--bg-hover); }
@media (hover: hover) { .menu-item:hover { background: var(--bg-hover); } }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-check { width: 24px; height: 24px; flex: none; display: grid; place-items: center; }
.menu-check.trail { margin-left: auto; color: var(--text); }
.menu-chev svg { width: 16px; height: 16px; color: var(--text-2); }
.menu-sep { height: 1px; background: var(--border); margin: 8px 0; }
.menu-label { margin: 0; padding: 12px 16px 4px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.menu-subhead { display: flex; align-items: center; gap: 8px; padding: 0 8px 8px; border-bottom: 1px solid var(--border); font-size: 16px; }
.menu-note { margin: 8px 16px; color: var(--text-2); font-size: 12px; line-height: 16px; }
.menu-titlebar { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 4px 16px; height: 48px; border-bottom: 1px solid var(--border); flex: none; }
.menu-titlebar h2 { margin: 0; font-size: 16px; font-weight: 400; flex: 1; }
.menu-titlebar .menu-close { display: none; margin-left: -8px; }
.menu-sheet-head { display: none; }
.notif-scroll { overflow-y: auto; overscroll-behavior: contain; max-height: min(640px, calc(100vh - 120px)); padding-bottom: 8px; }
.notif-scroll.more-below { -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
.notif { position: relative; display: flex; align-items: flex-start; padding: 0 0 0 16px; }
@media (hover: hover) { .notif:hover { background: var(--bg-hover); } }
/* unread dot: centred on the 48px avatar (16px row padding + 24px - 2px) */
.notif .dot { width: 4px; height: 4px; border-radius: 50%; margin: 38px 4px 0 0; flex: none; }
.notif.unread .dot { background: var(--brand); }
.notif-link { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 16px; padding: 16px 0 16px 8px; }
.notif-link:focus-visible { outline-offset: -2px; }
.notif img.av { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.notif img.th { width: 86px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.notif-text { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; }
.notif-text small { display: block; color: var(--text-2); font-size: 12px; line-height: 18px; margin-top: 4px; }
.notif-more { margin: 12px 4px 0 0; opacity: 0; }
.notif:hover .notif-more, .notif:focus-within .notif-more { opacity: 1; }
@media (hover: none) { .notif-more { opacity: 1; } }

/* popup menus & sheets */
.popup { position: fixed; max-height: calc(100vh - 16px); overflow-y: auto; }
.popup .menu-item { height: 40px; }
.popup.sheet {
  left: 0; right: 0; bottom: 0; top: auto; border-radius: 12px 12px 0 0; min-width: 0 !important;
  padding: 4px 0 calc(8px + env(safe-area-inset-bottom)); transform: translateY(100%); opacity: 1;
  transition: transform 200ms var(--ease-accel), visibility 0s 200ms; z-index: 56;
}
.popup.sheet.open { transform: none; transition: transform 400ms var(--ease-emph); }
.popup.sheet .menu-item { height: 48px; font-size: 16px; }
.popup.sheet { max-height: 70dvh; overscroll-behavior: contain; }
/* the sheet surface continues below the screen edge, so an upward rubber-band never shows a gap under it */
.popup.sheet { box-shadow: 0 32px 0 0 var(--bg-elev), var(--shadow); }
.sheet-title { margin: 0; padding: 0 16px; height: 48px; display: flex; align-items: center; font-size: 16px; font-weight: 500; line-height: 22px; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.popup.sheet .sheet-handle, .comments-full > .sheet-handle, .dialog-handle { touch-action: none; }
.popup.sheet .sheet-handle { margin: 8px auto 4px; background: var(--text-3); }
.menu-hint { margin-left: auto; padding-left: 12px; color: var(--text-2); font-size: 14px; white-space: nowrap; flex: none; }
.menu-item > .menu-hint + .menu-chev { margin-left: -4px; }
.menu-chev { display: inline-grid; place-items: center; flex: none; }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--text-3); margin: 8px auto; flex: none; }
.dialog-handle { display: none; }
.sheet-title .sheet-back { width: 40px; height: 40px; margin: 0 8px 0 -8px; flex: none; }
.sheet-title .sheet-back svg { width: 24px; height: 24px; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 55; background: var(--scrim); opacity: 0; transition: opacity 200ms var(--ease-std); }
.sheet-backdrop.open { opacity: 1; }

/* ================================================================ guide / drawer */
.guide {
  position: fixed; top: var(--masthead-h); bottom: 0; left: 0; width: var(--guide-w); z-index: 20;
  overflow-y: auto; padding: 12px; background: var(--bg); scrollbar-width: thin; scrollbar-color: transparent transparent;
}
body.guide-open .guide { touch-action: pan-y; }
.guide:hover { scrollbar-color: var(--bg-active) transparent; }
.guide-section { padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.guide-section:last-of-type { border: 0; }
.guide-title { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin: 0; font-size: 16px; font-weight: 500; border-radius: 10px; }
@media (hover: hover) { a.guide-title:hover { background: var(--bg-hover); } }
.guide-title svg { width: 16px; height: 16px; }
.guide-item {
  width: 100%; display: flex; align-items: center; gap: 24px; height: 40px; padding: 0 12px; border-radius: 10px;
  white-space: nowrap; overflow: hidden; text-align: left; font-size: 14px;
  transition: background-color var(--dur-xs) var(--ease-std);
}
.guide-item span { overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .guide-item:hover { background: var(--bg-hover); } }
.guide-item.active { background: var(--bg-hover); font-weight: 500; }
.guide-item.active svg { color: var(--brand); }
.guide-item:focus-visible { outline-offset: -2px; }
.guide-item svg { flex: none; }
.guide-item img { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.guide-item .live-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.guide-note { padding: 4px 12px; margin: 0; color: var(--text-2); font-size: 13px; }
.guide-foot { padding: 16px 12px; color: var(--text-2); font-size: 12px; line-height: 18px; }
.guide-head { display: none; position: fixed; top: 0; left: 0; width: var(--guide-w); height: var(--masthead-h); align-items: center; padding: 0 16px 0 var(--masthead-pad-x); gap: 4px; background: var(--bg); z-index: 37; }
/* static shell skeleton (index.html), replaced on boot */
.guide-sk-row { display: flex; align-items: center; gap: 24px; height: 40px; padding: 0 12px; }
.guide-sk-ic { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.guide-sk-bar { width: 120px; height: 14px; border-radius: 4px; }
.guide-sk-sep { height: 1px; background: var(--border); margin: 12px 0; }
.mini-sk { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0 14px; }
.mini-sk-bar { width: 40px; height: 10px; border-radius: 4px; }

.mini-guide {
  display: none; position: fixed; top: var(--masthead-h); left: 0; bottom: 0; width: var(--mini-w); z-index: 20;
  padding: 4px; background: var(--bg);
}
.mini-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0 14px;
  border-radius: 10px; font-size: 10px; line-height: 14px;
}
.mini-item span { max-width: 68px; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 14px; letter-spacing: -.3px; }
.mini-item[data-label="Subscriptions"] span { font-size: 9.5px; letter-spacing: -.4px; }
@media (hover: hover) { .mini-item:hover { background: var(--bg-hover); } }
.mini-item.active svg { color: var(--brand); }
.mini-item:focus-visible { outline-offset: -2px; }

.scrim {
  position: fixed; inset: 0; z-index: 34; background: var(--scrim); opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--ease-std);
}

.page { padding-top: var(--masthead-h); margin-left: var(--guide-w); min-height: 100vh; outline: none; }
@media (min-width: 1313px) {
  body.guide-collapsed .guide { display: none; }
  body.guide-collapsed .mini-guide { display: block; }
  body.guide-collapsed .page { margin-left: var(--mini-w); }
}
.page.view-in { animation: view-in 150ms var(--ease-std); }
@keyframes view-in { from { opacity: 0; } }
@keyframes search-in { from { opacity: 0; transform: translateX(16px); } }
body.search-mode .search form { animation: search-in 200ms var(--ease-decel); }
body.search-mode .search .suggest:not([hidden]) { animation: view-in 150ms var(--ease-std); }

/* overlay drawer: tablet widths, and always on the watch page */
@media (max-width: 1312px) {
  .page { margin-left: var(--mini-w); }
  .mini-guide { display: block; }
}
@media (max-width: 1312px) {
  .guide {
    top: 0; padding-top: calc(var(--masthead-h) + 12px); z-index: 35; box-shadow: none;
    transform: translateX(-100%); visibility: hidden;
    transition: transform 200ms var(--ease-accel), visibility 0s 200ms, box-shadow 200ms;
  }
  body.guide-open .guide { transform: none; visibility: visible; box-shadow: var(--shadow); transition: transform 400ms var(--ease-emph); }
  body.guide-open .scrim { opacity: 1; pointer-events: auto; }
  body.guide-open .guide-head { display: flex; }
}
body.watch-page .guide, body.watch-page.guide-collapsed .guide {
  display: block; top: 0; padding-top: calc(var(--masthead-h) + 12px); z-index: 35;
  transform: translateX(-100%); visibility: hidden;
  transition: transform 200ms var(--ease-accel), visibility 0s 200ms;
}
body.watch-page.guide-open .guide { transform: none; visibility: visible; box-shadow: var(--shadow); transition: transform 400ms var(--ease-emph); }
body.watch-page.guide-open .scrim { opacity: 1; pointer-events: auto; }
body.watch-page.guide-open .guide-head { display: flex; }
body.watch-page .mini-guide { display: none !important; }
body.watch-page .page { margin-left: 0 !important; }

/* bottom navigation (phone) */
.bottom-bar { display: none; }

/* ================================================================ chips */
.chips-bar { position: sticky; top: var(--masthead-h); z-index: 10; background: var(--bg); display: flex; align-items: center; }
.chips {
  flex: 1; min-width: 0; display: flex; gap: 12px; padding: 12px 24px; overflow-x: auto; scrollbar-width: none;
  scroll-padding: 0 48px;
}
.chips::-webkit-scrollbar { display: none; }
.chips-arrow {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: 72px; display: flex; align-items: center;
  background: linear-gradient(90deg, var(--bg) 50%, transparent);
}
.chips-arrow svg { width: 40px; height: 40px; padding: 8px; border-radius: 50%; }
@media (hover: hover) { .chips-arrow:hover svg { background: var(--bg-hover); } }
.chips-arrow.left { left: 0; padding-left: 12px; }
.chips-arrow.right { right: 0; justify-content: flex-end; padding-right: 12px; background: linear-gradient(270deg, var(--bg) 50%, transparent); }
.chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px;
  border-radius: 8px; background: var(--chip); font: 500 14px/20px var(--font); white-space: nowrap; color: var(--text);
  transition: background-color var(--dur-s) var(--ease-std), color var(--dur-s) var(--ease-std), transform var(--dur-xs) var(--ease-std);
}
@media (hover: hover) { .chip:hover { background: var(--chip-hover); } }
.chip.active, .chip[aria-pressed="true"] { background: var(--chip-active-bg); color: var(--chip-active-fg); }
.sk-chip { width: 72px; }

/* ================================================================ cards / grid */
.grid {
  display: grid; gap: 40px 16px; padding: 12px 24px 48px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
@media (min-width: 900px) and (max-width: 1312px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 899px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid.fade-in > * { animation: view-in 200ms var(--ease-std); }
.card { display: flex; flex-direction: column; gap: 12px; min-width: 0; position: relative; }
.card.dismissed { display: none; }
.thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: var(--skeleton); isolation: isolate;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
html.app-ready .thumb img { opacity: 0; transition: opacity 200ms var(--ease-std); }
html.app-ready .thumb img.loaded { opacity: 1; }
.thumb video.preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 200ms var(--ease-std); z-index: 1; }
.thumb video.preview.on { opacity: 1; }
.preview-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: rgba(255,255,255,.3); }
.preview-bar i { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }
@media (hover: hover) { .card .thumb { transition: border-radius 200ms var(--ease-std); } .card .thumb.previewing { border-radius: 0; } }
.duration {
  position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 1px 4px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 12px; font-weight: 500; line-height: 18px;
}
.thumb .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.4); z-index: 2; }
.thumb .progress i { display: block; height: 100%; background: var(--brand); }
.thumb .progress ~ .duration, .thumb .duration:has(+ .progress) { bottom: 12px; }
.meta { display: flex; gap: 12px; min-width: 0; }
.meta .av { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.meta .av img { width: 36px; height: 36px; border-radius: 50%; }
/* break-word (not anywhere): it never lowers min-content, so flex can't split '8.8M' from 'views' */
.meta-text { min-width: 0; flex: 1; overflow-wrap: break-word; }
.title-link { display: block; border-radius: 4px; }
.v-title {
  margin: 0 0 4px; font-size: 16px; line-height: 22px; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v-sub { color: var(--text-2); font-size: 14px; line-height: 20px; }
.v-sub a:hover { color: var(--text); }
.ch-line { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.verified { display: inline-flex; flex: none; color: var(--text-2); }
/* "Channel • views" separator is real markup (never a pseudo-element); only the one-line phone meta shows it */
.v-sub > .ch-sep { display: none; }
.verified svg { width: 14px; height: 14px; }
.card .more-btn { margin: -6px -8px 0 -4px; opacity: 0; transition: opacity var(--dur-xs) var(--ease-std); }
.card:hover .more-btn, .card:focus-within .more-btn, .more-btn[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .card .more-btn { opacity: 1; } }

/* skeletons */
.sk, .skeleton { background: var(--skeleton); position: relative; overflow: hidden; }
.sk::after, .skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-hi), transparent);
  transform: translateX(-100%); animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-thumb { aspect-ratio: 16 / 9; border-radius: var(--radius); }
.sk-av { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.sk-line { height: 20px; width: 90%; border-radius: 4px; margin-bottom: 8px; }
.sk-line.short { height: 16px; width: 60%; }
/* card skeleton matches the real card: 2-line title (44px) + channel + views (88px meta) */
.sk-card .meta { min-height: 88px; }
.sk-card .meta-text .sk-line { margin: 0; height: 20px; width: 90%; }
.sk-card .meta-text .sk-line.t2 { margin-top: 4px; width: 70%; }
.sk-card .meta-text .sk-line.short { margin-top: 10px; height: 14px; width: 50%; }
.sk-card .meta-text .sk-line.short.s2 { margin-top: 6px; width: 40%; }
.boot-skeleton .chips-bar { position: static; }
.boot-skeleton .chip { color: transparent; }

/* shelves */
.shelf { padding: 24px 0 8px; border-bottom: 1px solid var(--border); }
.shelf:last-child { border-bottom: 0; }
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.shelf-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; }
.shelf-h svg { width: 24px; height: 24px; }
.shelf-count { color: var(--text-2); font-size: 16px; font-weight: 400; margin-left: 4px; }
.shelf-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 16px; overflow-x: auto; padding-bottom: 16px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.shelf-row > * { scroll-snap-align: start; }
.shelf-row .card { gap: 8px; }
.shelf-row .v-title { font-size: 14px; line-height: 20px; }
.shelf-row .v-sub { font-size: 12px; line-height: 18px; }
.shelf-row .meta .av { display: none; }
.shelf-row .thumb { border-radius: 8px; }
.shelf-empty { color: var(--text-2); margin: 0; grid-column: 1 / -1; }
.shelf-row .meta-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hist-grid { padding: 0 0 8px; }

/* playlist cards (stacked thumbnails) */
.playlist-card .thumb.stack { overflow: visible; background: none; margin-top: 8px; }
.playlist-card .thumb.stack::before, .playlist-card .thumb.stack::after {
  content: ''; position: absolute; left: 50%; height: 4px; border-radius: 6px 6px 0 0; background: var(--text-2);
}
.playlist-card .thumb.stack::before { top: -4px; width: 92%; transform: translateX(-50%); opacity: .6; }
.playlist-card .thumb.stack::after { top: -8px; width: 84%; transform: translateX(-50%); opacity: .3; }
.playlist-card .thumb.stack img, .stack-empty { border-radius: var(--radius); }
.stack-empty { display: grid; place-items: center; width: 100%; height: 100%; background: var(--chip); color: var(--text-2); }
.pl-count {
  position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; z-index: 2;
  padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.8); color: #fff; font-size: 12px; font-weight: 500;
}
.pl-count svg { width: 16px; height: 16px; }
.pl-hover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 1;
  background: rgba(0,0,0,.6); color: #fff; font-weight: 500; opacity: 0; border-radius: inherit;
  transition: opacity var(--dur-s) var(--ease-std);
}
.pl-hover svg { width: 24px; height: 24px; }
.thumb:hover .pl-hover { opacity: 1; }
.view-full { display: inline-block; margin-top: 4px; }

/* empty states + illustrations */
.empty { text-align: center; padding: 64px 24px; color: var(--text-2); }
.empty h2 { color: var(--text); font-size: 20px; line-height: 28px; font-weight: 500; margin: 24px 0 8px; }
.empty p { max-width: 440px; margin: 0 auto 24px; overflow-wrap: anywhere; }
.empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.illus { position: relative; width: 120px; height: 120px; margin: 0 auto; display: grid; place-items: center; }
.illus-bg { position: absolute; inset: 0; }
.illus-disc { fill: var(--chip); }
.illus-ring { fill: none; stroke: var(--brand); stroke-width: 2; stroke-dasharray: 4 6; opacity: .45; }
.illus-spark { fill: var(--brand); }
.illus-spark.sm { opacity: .6; }
.illus-dot { fill: var(--brand-2); opacity: .6; }
.illus-icon { position: relative; width: 56px; height: 56px; color: var(--brand); }
.illus-icon svg { width: 56px; height: 56px; }
.illus-logo { position: relative; }
.illus-logo .logo-mark { width: 72px; height: 50px; }

.not-found { max-width: 560px; margin: 0 auto; padding: 72px 24px; text-align: center; }
.not-found .illus { width: 200px; height: 200px; }
.not-found .illus-bg { width: 200px; height: 200px; }
.not-found .illus-logo .logo-mark { width: 120px; height: 84px; }
.not-found h1 { font-size: 20px; line-height: 28px; font-weight: 500; margin: 24px 0 8px; }
.not-found p { color: var(--text-2); margin: 0 0 24px; }
.nf-search { display: flex; max-width: 400px; margin: 0 auto 24px; height: 40px; }
.nf-search input { flex: 1; min-width: 0; border: 1px solid var(--border); border-right: 0; border-radius: 20px 0 0 20px; padding: 0 16px; background: var(--search-bg); color: var(--text); font: inherit; font-size: 16px; }
.nf-search input:focus { outline: none; border-color: var(--brand); }
.nf-submit { width: 64px; border: 1px solid var(--border); border-radius: 0 20px 20px 0; background: var(--search-btn); display: grid; place-items: center; }
.nf-home { display: inline-flex; align-items: center; gap: 8px; color: var(--link); font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.nf-home .logo-mark { width: 32px; height: 22px; }

/* ================================================================ watch page */
.watch {
  display: grid; grid-template-columns: minmax(0, 1fr) 402px; grid-template-rows: auto 1fr;
  grid-template-areas: "player side" "info side"; column-gap: 24px;
  padding: 24px 24px 0; max-width: 1754px; margin: 0 auto; align-items: start;
}
.watch-player { grid-area: player; min-width: 0; }
.watch-info { grid-area: info; min-width: 0; }
.watch-secondary { grid-area: side; min-width: 0; }
@media (min-width: 1700px) { .watch { grid-template-columns: minmax(0, 1fr) 426px; } }
body.theater .watch { grid-template-areas: "player player" "info side"; padding-top: 0; }
body.theater .watch-player { margin: 0 -24px 24px; background: #000; }
body.theater .player { border-radius: 0; aspect-ratio: auto; width: 100%; height: min(56.25vw, calc(100vh - 169px)); margin: 0 auto; }
/* the AI chip sits on the picture, not on the pillarbox: offset by half the side bars */
@media (min-width: 793px) {
  body.theater .player:not(.fullscreen) .player-top { left: max(0px, calc((100% - min(100%, (100vh - 169px) * 16 / 9)) / 2)); right: auto; }
}

/* ---------- player ---------- */
.player {
  position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius);
  overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; outline: none;
  container-type: inline-size; color: #fff;
}
.player video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.player :focus-visible { outline: 2px solid #fff; outline-offset: -2px; box-shadow: 0 0 0 4px rgba(0,0,0,.6); }
.player-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
}
.player-top { position: absolute; top: 0; left: 0; right: 0; padding: 12px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.ai-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 4px;
  background: rgba(0,0,0,.6); color: #fff; font: 500 12px/16px var(--font);
}
.ai-chip svg { width: 14px; height: 14px; color: #8fc1ff; }
.player-top-title { display: none; font-size: 18px; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player.fullscreen .player-top { background: linear-gradient(rgba(0,0,0,.6), transparent); padding: 16px 24px 32px; }
.player.fullscreen .player-top-title { display: block; }
.player.fullscreen { border-radius: 0; }

.controls, .player-shade, .player-top {
  opacity: 1; transition: opacity var(--dur-xs) var(--ease-decel);
}
.controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 12px; }
.player.playing:not(.controls-on) :is(.controls, .player-shade, .player-top) {
  opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease-accel);
}
.player.playing:not(.controls-on):not(.menu-open) { cursor: none; }
.player.ended .controls, .player.ended .player-shade { opacity: 0; pointer-events: none; }

/* scrub */
.scrub { position: relative; height: 20px; display: flex; align-items: center; cursor: pointer; outline-offset: 0 !important; }
.scrub-track { position: relative; width: 100%; height: 5px; background: rgba(255,255,255,.2); transform: scaleY(.6); transition: transform var(--dur-xs) var(--ease-std); }
.scrub:hover .scrub-track, .scrub.dragging .scrub-track, .scrub:focus-visible .scrub-track { transform: none; }
.scrub-buffer, .scrub-hover, .scrub-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); }
.scrub-buffer { background: rgba(255,255,255,.4); }
.scrub-hover { background: rgba(255,255,255,.5); opacity: 0; }
.scrub.hovering .scrub-hover { opacity: 1; }
.scrub-fill { background: var(--brand); }
.scrub-knob { position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; pointer-events: none; }
.scrub-knob::before {
  content: ''; display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--brand);
  transform: scale(0); transition: transform var(--dur-xs) var(--ease-std);
}
.scrub:hover .scrub-knob::before, .scrub.dragging .scrub-knob::before, .scrub:focus-visible .scrub-knob::before { transform: scale(1); }
@media (hover: none) { .player.controls-on .scrub-knob::before, .player:not(.playing) .scrub-knob::before { transform: scale(1); } }
.scrub-tooltip {
  position: absolute; left: 0; bottom: 28px; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; width: 164px;
}
.scrub-tooltip { display: flex; opacity: 0; visibility: hidden; transition: opacity var(--dur-xs) var(--ease-std), visibility 0s var(--dur-xs); }
.scrub.hovering .scrub-tooltip { opacity: 1; visibility: visible; transition: opacity var(--dur-xs) var(--ease-std); }
.scrub-frame {
  width: 164px; height: 94px; border: 2px solid #fff; border-radius: 8px; overflow: hidden; background: #000 var(--poster) center / cover no-repeat;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.scrub-frame video { width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; }
.scrub-time { font: 500 12px/16px var(--font); padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.8); color: #fff; }

.ctrl-row { display: flex; align-items: center; height: 48px; }
.ctrl-row .icon-btn { color: #fff; width: 48px; height: 48px; border-radius: 50%; }
.ctrl-row .icon-btn svg { width: 24px; height: 24px; }
@media (hover: hover) { .ctrl-row .icon-btn:hover { background: rgba(255,255,255,.1); } }
.time { font-size: 14px; line-height: 48px; padding: 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.time-sep { opacity: .8; }
.vol-wrap { display: flex; align-items: center; position: relative; }
/* the slider overlays the time label, which slides aside with a transform (no row reflow on hover) */
.vol { position: absolute; left: 100%; top: 0; bottom: 0; width: 64px; display: flex; align-items: center; clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-s) var(--ease-std); }
.vol-wrap:hover .vol, .vol-wrap:focus-within .vol { clip-path: inset(0); }
.vol-wrap + .time { transition: transform var(--dur-s) var(--ease-std); }
.vol-wrap:hover + .time, .vol-wrap:focus-within + .time { transform: translateX(64px); }
.vol input { width: 56px; accent-color: #fff; }
.autoplay-switch { height: 48px; width: 52px; display: grid; place-items: center; }
.switch-track { position: relative; width: 36px; height: 14px; border-radius: 7px; background: rgba(255,255,255,.3); transition: background-color var(--dur-s) var(--ease-std); }
.switch-knob {
  position: absolute; top: -3px; left: -2px; width: 20px; height: 20px; border-radius: 50%; background: #717171; color: #fff;
  display: grid; place-items: center; transition: transform var(--dur-s) var(--ease-std), background-color var(--dur-s);
}
.switch-knob svg { width: 12px; height: 12px; }
.autoplay-switch[aria-checked="true"] .switch-track { background: rgba(143,193,255,.5); }
.autoplay-switch[aria-checked="true"] .switch-knob { transform: translateX(20px); background: #fff; color: #0f0f0f; }
.gear svg { transition: transform var(--dur-m) var(--ease-std); }
.gear[aria-expanded="true"] svg { transform: rotate(30deg); }
.player.menu-open .touch-layer { display: none !important; }

/* buffering spinner (only while waiting for data) */
.spinner { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; display: none; pointer-events: none; }
.player.buffering .spinner { display: block; }
.spinner svg { width: 48px; height: 48px; animation: spin 1s linear infinite; }
.spinner circle { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 94 126; }
@keyframes spin { to { transform: rotate(360deg); } }

.big-play { display: none; }
/* Touch: one centred prev / play / next cluster for both paused and playing, fading like the
   rest of the chrome (opacity + visibility, so the exit is animated too). */
.touch-layer {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 48px;
  background: rgba(0,0,0,.45); pointer-events: none; z-index: 1;
}
@media (hover: none) {
  .touch-layer { display: flex; opacity: 0; visibility: hidden; transition: opacity var(--dur-m) var(--ease-accel), visibility 0s var(--dur-m); }
  .player:not(.playing):not(.buffering):not(.ended):not(.errored):not(.menu-open) .touch-layer,
  .player.playing.controls-on:not(.buffering):not(.ended):not(.errored):not(.menu-open) .touch-layer {
    opacity: 1; visibility: visible; transition: opacity var(--dur-xs) var(--ease-std);
  }
  /* no second play button in the bottom bar; the progress bar hugs the bottom edge */
  .ctrl-row [data-act="play"], .ctrl-row [data-act="next"] { display: none; }
  .controls { padding: 0; z-index: 2; }
  .ctrl-row { padding: 0 4px 14px 12px; }
  .scrub { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; margin: 0; align-items: flex-end; }
  .scrub-track { transform-origin: bottom; }
  .scrub-knob { top: auto; bottom: -5px; margin: 0 0 0 -6.5px; }
  .scrub-tooltip { bottom: 36px; }
}
.touch-btn { pointer-events: auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.4); color: #fff; }
.touch-btn svg { width: 32px; height: 32px; }
.touch-btn.sm { width: 40px; height: 40px; }
.touch-btn.sm svg { width: 24px; height: 24px; }
.touch-btn:disabled { opacity: .4; }

.seek-ripple {
  position: absolute; top: 0; bottom: 0; width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgba(255,255,255,.15); opacity: 0; pointer-events: none; font: 500 12px/16px var(--font); z-index: 2;
}
.player.ended .seek-ripple, .player.ended .hud { display: none; }
/* while a double-tap ripple shows, the centre controls get out of its way */
.player.tap-seeking .touch-layer, .player.tap-seeking .big-play { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: opacity 100ms var(--ease-accel), visibility 0s 100ms !important; }
.seek-ripple.right { align-items: flex-end; padding-right: 8%; }
.seek-ripple.left { align-items: flex-start; padding-left: 8%; }
.seek-ripple .ripple-chev, .seek-ripple .ripple-label { width: 88px; justify-content: center; text-align: center; }
.player.ended .player-top { opacity: 0; visibility: hidden; }
.seek-ripple.left { left: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; }
.seek-ripple.right { right: 0; border-radius: 50% 0 0 50% / 50% 0 0 50%; }
.seek-ripple.left .ripple-chev { transform: scaleX(-1); }
.ripple-chev { display: flex; }
.ripple-chev svg { width: 18px; height: 18px; margin: 0 -3px; opacity: .3; }
.seek-ripple.show { animation: ripple 700ms var(--ease-decel) forwards; }
.seek-ripple.show .ripple-chev svg { animation: chev 600ms linear infinite; }
.seek-ripple.show .ripple-chev svg:nth-child(2) { animation-delay: 150ms; }
.seek-ripple.show .ripple-chev svg:nth-child(3) { animation-delay: 300ms; }
@keyframes ripple { 0% { opacity: 0; transform: scale(.85); } 20% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes chev { 0%, 100% { opacity: .2; } 30% { opacity: 1; } }

.hud { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.hud-inner {
  min-width: 56px; height: 56px; padding: 0 8px; border-radius: 28px; background: rgba(0,0,0,.6); color: #fff;
  display: grid; place-items: center; opacity: 0;
}
.hud-inner svg { width: 32px; height: 32px; }
.hud-text { padding: 0 12px; font-size: 16px; font-weight: 500; white-space: nowrap; }
.hud.show .hud-inner { animation: hud 650ms var(--ease-std) forwards; }
@keyframes hud { 0% { opacity: 0; transform: scale(.9); } 20% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }

.error-panel { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; background: rgba(0,0,0,.85); padding: 24px; }
.player.errored .spinner, .player.errored .big-play, .player.errored .touch-layer, .player.errored .hud, .player.errored .upnext { display: none !important; }
/* no dead controls behind the error scrim */
.player.errored .controls, .player.errored .scrub, .player.errored .touch-center { display: none !important; }
.error-icon { display: block; width: 40px; height: 40px; margin: 0 auto 12px; color: rgba(255,255,255,.7); }
.error-icon svg { width: 40px; height: 40px; }
.error-panel strong { display: block; }
.player.errored .player-shade { opacity: 0; }
.error-panel strong { font-size: 18px; font-weight: 500; }
.error-panel p { margin: 8px 0 16px; opacity: .8; }

/* end screen */
.upnext { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(0,0,0,.6); padding: 16px; animation: view-in var(--dur-m) var(--ease-decel); }
.upnext-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 8px; animation: upnext-in var(--dur-m) var(--ease-decel); }
@keyframes upnext-in { from { opacity: 0; transform: translateY(16px); } }
.upnext-label { font-size: 14px; color: rgba(255,255,255,.85); }
.upnext-label b { color: #fff; font-weight: 700; font-size: 16px; }
.upnext-thumb { position: relative; display: block; width: 100%; max-width: 320px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.upnext-thumb img { width: 100%; height: 100%; object-fit: cover; }
.upnext-title { font-size: 18px; line-height: 26px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.upnext-ch { font-size: 14px; color: rgba(255,255,255,.75); }
.upnext-actions { display: flex; gap: 8px; margin-top: 4px; }
.upnext-actions .btn { flex: 1; }
.ring { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 2.5; stroke: rgba(15,15,15,.2); }
.ring .ring-fg { stroke: #0f0f0f; stroke-dasharray: 62.83; stroke-dashoffset: 0; }
.upnext.counting .ring-fg { animation: ring 5s linear forwards; }
@keyframes ring { from { stroke-dashoffset: 62.83; } to { stroke-dashoffset: 0; } }
.upnext:not(.counting) .ring { display: none; }
.replay-btn { position: absolute; left: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; display: none; place-items: center; color: #fff; background: rgba(0,0,0,.4); }
/* wide players keep the whole control row on the end screen (play glyph -> replay, bar at 100%) */
@container (min-width: 561px) {
  .player.ended .controls, .player.ended .player-shade { opacity: 1; pointer-events: auto; }
  .player.ended .controls { z-index: 4; }
  .player.ended .upnext { padding-bottom: 64px; }
}
@container (max-width: 560px) {
  /* compact end card: 120x68 thumb + text row, full scrim, centred in the player */
  .upnext { padding: 0 16px; background: rgba(0,0,0,.78); place-items: center; }
  .upnext-card {
    max-width: 380px; display: grid; grid-template-columns: 120px minmax(0, 1fr);
    grid-template-areas: "label label" "thumb text" "acts acts"; column-gap: 12px; row-gap: 8px; align-items: center;
  }
  .upnext-label { grid-area: label; font-size: 13px; line-height: 18px; }
  .upnext-thumb { grid-area: thumb; width: 120px; height: 68px; aspect-ratio: auto; }
  .upnext-thumb .duration { right: 4px; bottom: 4px; font-size: 11px; line-height: 14px; }
  .upnext-text { grid-area: text; min-width: 0; }
  .upnext-title { font-size: 14px; line-height: 20px; -webkit-line-clamp: 2; }
  .upnext-ch { font-size: 12px; line-height: 18px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .upnext-actions { grid-area: acts; margin-top: 0; }
  .upnext-actions .btn { height: 36px; }
  .replay-btn { display: grid; left: 8px; bottom: 8px; width: 40px; height: 40px; }
  /* while the countdown card is up, replay would crowd Cancel; it returns once cancelled */
  .upnext.counting .replay-btn { display: none; }
}

/* settings menu */
.player-menu {
  position: absolute; right: 12px; bottom: 60px; width: 288px; max-width: calc(100% - 24px); max-height: calc(100% - 72px); overflow-y: auto;
  background: rgba(28,28,28,.92); backdrop-filter: blur(8px); border-radius: 12px; padding: 8px 0; color: #fff;
  opacity: 0; transform: translateY(8px); transition: opacity 120ms var(--ease-accel), transform 120ms var(--ease-accel);
  scrollbar-width: thin;
}
.player-menu.open { opacity: 1; transform: none; transition: opacity var(--dur-s) var(--ease-decel), transform var(--dur-s) var(--ease-decel); }
.pm-item, .pm-back {
  width: 100%; height: 40px; padding: 0 16px; display: flex; align-items: center; gap: 16px; text-align: left;
  font: 400 14px/20px var(--font); color: #fff;
}
.pm-item:focus-visible, .pm-back:focus-visible { background: rgba(255,255,255,.1); }
@media (hover: hover) { .pm-item:hover, .pm-back:hover { background: rgba(255,255,255,.1); } }
.pm-item > svg:first-child { width: 24px; height: 24px; flex: none; }
.pm-item > span:nth-of-type(1) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pm-item > span { white-space: nowrap; }
.pm-item.radio > span:nth-of-type(1) { flex: none; }
.pm-item.radio > span:nth-of-type(2) { flex: 1; }
.pm-val { flex: none; margin-left: auto; padding-left: 16px; opacity: .8; font-size: 13px; }
.pm-item:not(.radio) { gap: 16px; }
.pm-item > .pm-val + svg { margin-left: -8px; }
.pm-item > svg:last-child:not(:first-child) { width: 16px; height: 16px; flex: none; opacity: .8; }
.pm-back { border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 8px; height: 48px; font-weight: 500; }
.pm-back svg { width: 20px; height: 20px; }
.pm-check { width: 24px; display: grid; place-items: center; visibility: hidden; }
.pm-check svg { width: 20px; height: 20px; }
.pm-item[aria-checked="true"] .pm-check { visibility: visible; }

/* ---------- title / owner / actions ---------- */
.watch-title { margin: 12px 0 0; font-size: 20px; line-height: 28px; font-weight: 700; overflow-wrap: anywhere; }
.watch-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 12px; flex-wrap: wrap; }
.owner { display: flex; align-items: center; gap: 12px; min-width: 0; }
.owner-av img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.owner-av { flex: none; border-radius: 50%; }
.owner-text { min-width: 0; display: flex; flex-direction: column; }
.owner-name { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 16px; line-height: 22px; font-weight: 500; }
.ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-subs { color: var(--text-2); font-size: 12px; line-height: 18px; white-space: nowrap; }
.owner .subscribe, .owner .btn { margin-left: 12px; }

.subscribe {
  height: 36px; padding: 0 16px; border-radius: 18px; font-weight: 500; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0; white-space: nowrap; overflow: hidden; flex: none;
  background: var(--chip-active-bg); color: var(--chip-active-fg);
  transition: background-color var(--dur-s) var(--ease-std), color var(--dur-s) var(--ease-std), transform var(--dur-xs) var(--ease-std);
}
.subscribe .sub-bell, .subscribe .sub-caret { display: none; }
.subscribe .sub-label { display: inline-block; }
.subscribe.on { background: var(--chip); color: var(--text); padding: 0 10px 0 12px; gap: 6px; }
.subscribe.on .sub-bell, .subscribe.on .sub-caret { display: inline-flex; }
.subscribe svg { width: 22px; height: 22px; }
.subscribe .sub-caret svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .subscribe:not(.on):hover { background: color-mix(in srgb, var(--chip-active-bg) 85%, var(--chip-active-fg)); }
  .subscribe.on:hover { background: var(--chip-hover); }
}

.actions { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pill {
  height: 36px; padding: 0 16px; border-radius: 18px; background: var(--chip);
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; flex: none; position: relative;
  transition: background-color var(--dur-xs) var(--ease-std), transform 80ms var(--ease-std);
}
@media (hover: hover) { .pill:hover { background: var(--chip-hover); } }
.pill svg { width: 24px; height: 24px; }
.pill-ic { display: inline-grid; place-items: center; }
.pill.active .pill-ic svg, .pill.active > svg { color: var(--text); }
.pill.round { width: 36px; padding: 0; justify-content: center; }
.seg { display: inline-flex; border-radius: 18px; background: var(--chip); flex: none; }
.seg .pill { background: transparent; border-radius: 18px 0 0 18px; }
.seg .pill + .pill { border-radius: 0 18px 18px 0; padding: 0 16px; }
.seg .pill + .pill::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
@media (hover: hover) { .seg .pill:hover { background: var(--chip-hover); } }
.like-count { display: inline-block; min-width: 1ch; overflow: hidden; height: 20px; line-height: 20px; font-variant-numeric: tabular-nums; }
.roll { position: relative; display: inline-grid; overflow: hidden; height: 20px; line-height: 20px; vertical-align: top; }
.roll > span { grid-area: 1 / 1; }
.pill-ic { position: relative; }
.pill.burst .pill-ic::after {
  /* 32px ring, max 35px at 1.1x: always inside the 36px pill */
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--brand-ring); pointer-events: none; animation: burst 350ms cubic-bezier(.2,0,0,1) forwards;
}
@keyframes burst { 0% { transform: scale(.7); opacity: 1; } 40% { opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
.pill[data-wl].active svg { color: var(--brand); }

/* ---------- description ---------- */
.desc {
  position: relative; margin-top: 12px; padding: 12px; border-radius: var(--radius); background: var(--chip); cursor: pointer;
  transition: background-color var(--dur-s) var(--ease-std);
}
@media (hover: hover) { .desc:not(.open):hover { background: var(--chip-hover); } }
.desc.open { cursor: default; }
.desc-stats { font-weight: 500; display: flex; flex-wrap: wrap; column-gap: 8px; }
.desc-stats .tag { color: var(--link); font-weight: 500; }
.desc-stats .tag:hover { text-decoration: underline; }
.desc-body { white-space: pre-line; overflow-wrap: anywhere; }
.desc:not(.open) .desc-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.desc-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 250ms var(--ease-std); }
.desc.open .desc-more { grid-template-rows: 1fr; }
.desc-more > .desc-extra { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s 250ms; }
.desc.open .desc-more > .desc-extra { visibility: visible; transition: none; }
.desc-toggle { font-weight: 500; margin-top: 8px; border-radius: 4px; }
.desc:not(.open) .desc-toggle {
  position: absolute; right: 12px; bottom: 12px; margin: 0; padding-left: 40px; line-height: 20px;
  background: linear-gradient(90deg, transparent, var(--chip) 32px);
}
@media (hover: hover) { .desc:not(.open):hover .desc-toggle { background: linear-gradient(90deg, transparent, var(--chip-hover) 32px); } }
.desc-h { display: flex; align-items: center; gap: 8px; margin: 20px 0 12px; font-size: 16px; line-height: 22px; font-weight: 700; }
.desc-h svg { width: 20px; height: 20px; color: var(--brand); flex: none; margin-left: -2px; }
.chapters { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.chapter { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; background: var(--bg); text-align: left; }
@media (hover: hover) { .chapter:hover { background: var(--bg-hover); } }
.chapter img { width: 88px; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; flex: none; }
.chapter-text { display: flex; flex-direction: column; min-width: 0; }
.chapter-text b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-text span { font-size: 12px; color: var(--link); }
.ai-card { margin: 0; padding: 4px 16px; border-radius: 12px; background: var(--bg); }
.ai-card > div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ai-card > div:last-child { border: 0; }
.comment { min-width: 0; }
.ai-card dt { color: var(--text-2); font-size: 12px; line-height: 20px; }
.ai-card dd { margin: 0; font: 14px/20px var(--font); overflow-wrap: anywhere; }
/* only the seed is a code-like value: tabular mono */
.ai-card dd.seed { font: 500 13px/20px var(--mono); font-variant-numeric: tabular-nums; }
.desc-note { color: var(--text-2); font-size: 13px; margin: 12px 0; }
.desc-channel { display: inline-flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--bg); }
.desc-channel img { width: 40px; height: 40px; border-radius: 50%; }
.desc-channel span { display: flex; flex-direction: column; }
.desc-channel b { font-weight: 500; }
.desc-channel small { color: var(--text-2); font-size: 12px; }

/* ---------- comments ---------- */
.comments { margin-top: 24px; }
.comments-teaser, .teaser-compose, .sheet-close, .comments-full > .sheet-handle { display: none; }
.teaser-sort { display: none; }
.comments-head { display: flex; align-items: center; gap: 32px; margin-bottom: 24px; }
.comments-head h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; }
.sort-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; height: 36px; padding: 0 8px; margin-left: -8px; border-radius: 18px; }
@media (hover: hover) { .sort-btn:hover { background: var(--bg-hover); } }

.composer { display: flex; gap: 16px; margin-bottom: 32px; }
.composer-av { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.composer-main { flex: 1; min-width: 0; }
.composer textarea {
  display: block; width: 100%; min-height: 26px; padding: 2px 0 4px; border: 0; border-bottom: 1px solid var(--border); resize: none; overflow: hidden;
  background: transparent; color: var(--text); font: 400 14px/20px var(--font); outline: none;
  transition: box-shadow var(--dur-m) var(--ease-decel);
}
.composer textarea:focus { box-shadow: inset 0 -1px 0 var(--text); border-bottom-color: var(--text); }
.composer textarea::placeholder { color: var(--text-2); }
.composer-row { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 200ms var(--ease-decel), opacity 200ms var(--ease-decel); }
.composer.active .composer-row { grid-template-rows: 1fr; opacity: 1; }
.composer-row-inner { min-height: 0; overflow: hidden; display: flex; align-items: center; gap: 8px; }
.composer.active .composer-row-inner { padding-top: 8px; }
.composer-count { font-size: 12px; color: var(--text-2); }
.reply-composer { gap: 12px; margin: 8px 0 8px; }
.reply-composer .composer-av { width: 24px; height: 24px; }
.reply-composer .btn { height: 32px; line-height: 32px; }

.comment { display: flex; gap: 16px; margin-bottom: 24px; border-radius: 12px; position: relative; }
.comment.fresh { animation: fresh 2700ms linear; }
/* highlight hugs the column: 8px bleed each side, never wider than the list */
#comment-list > .comment.fresh { margin: -8px -8px 16px; padding: 8px; max-width: calc(100% + 16px); }
#comment-list > .c-wrap > .comment.fresh { margin: -8px -8px -8px; padding: 8px; max-width: calc(100% + 16px); }
@keyframes fresh { 0%, 55% { background: var(--bg-hover); } 100% { background: transparent; } }
.c-av { flex: none; }
.c-av img { width: 40px; height: 40px; border-radius: 50%; }
.c-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pinned { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; color: var(--text-2); margin-bottom: 2px; }
.pinned svg { width: 16px; height: 16px; }
.who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; line-height: 18px; }
.c-handle { font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.c-handle.creator { background: var(--chip); padding: 0 6px; border-radius: 12px; }
.c-handle svg { width: 12px; height: 12px; color: var(--text-2); }
.c-time { color: var(--text-2); font-size: 12px; }
.c-text { margin: 2px 0 0; line-height: 20px; overflow-wrap: anywhere; word-break: break-word; white-space: pre-line; }
.comment-actions { display: flex; align-items: center; gap: 0; height: 32px; margin: 4px 0 0 -8px; color: var(--text-2); font-size: 12px; }
.comment-actions .icon-btn { width: 32px; height: 32px; color: var(--text); }
.comment-actions .icon-btn svg { width: 18px; height: 18px; }
.comment-actions .count { min-width: 24px; padding: 0 8px 0 2px; }
.comment-actions .count:empty { min-width: 8px; padding: 0; }
.reply-btn { height: 32px !important; padding: 0 16px !important; border-radius: 16px; font-size: 12px !important; color: var(--text); margin-left: 4px; }
.heart { position: relative; width: 32px; height: 32px; display: grid; place-items: center; }
.heart img { width: 20px; height: 20px; border-radius: 50%; }
.heart svg { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; color: #e5395b; }
.c-more { opacity: 0; transition: opacity var(--dur-xs) var(--ease-std); margin-top: -4px; }
.comment:hover > .c-more, .comment:focus-within > .c-more, .c-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .c-more { opacity: 1; } }
.replies-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 12px; margin: 4px 0 0 -12px;
  border-radius: 18px; color: var(--link); font-weight: 500;
}
@media (hover: hover) { .replies-toggle:hover { background: var(--brand-soft); } }
.replies-toggle svg { width: 20px; height: 20px; transition: transform 200ms var(--ease-std); }
.replies-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* collapsible blocks (reply threads, freshly posted comments): animate grid rows 0fr -> 1fr */
.replies, .c-wrap {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--dur-m) var(--ease-std), opacity 200ms var(--ease-std);
}
.replies.open, .c-wrap.open { grid-template-rows: 1fr; opacity: 1; }
.replies > .replies-inner, .c-wrap > .comment { min-height: 0; overflow: hidden; }
.replies-inner > :first-child { margin-top: 8px; }
.replies .c-wrap.open { margin-bottom: 16px; }
.c-wrap { margin-bottom: 0; transition: grid-template-rows 250ms cubic-bezier(.2,0,0,1), opacity 150ms var(--ease-std), margin-bottom 250ms cubic-bezier(.2,0,0,1); }
.c-wrap.open { margin-bottom: 24px; }
.c-wrap > .comment { margin-bottom: 0; transform: translateY(-8px); transition: transform 250ms cubic-bezier(.2,0,0,1); }
.c-wrap.open > .comment { transform: none; }
.row-collapse { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 200ms var(--ease-accel), opacity 120ms linear; }
.row-collapse.closing { grid-template-rows: 0fr; opacity: 0; }
.row-collapse > * { min-height: 0; overflow: hidden; }
.c-wrap.closing { transition: grid-template-rows 200ms var(--ease-accel), opacity 120ms linear, margin-bottom 200ms var(--ease-accel); }
.c-wrap.closing > .comment { transform: none; }
/* inserts at the top of the list must push content down visibly, not be hidden by scroll anchoring */
.comments-scroll, #comment-list { overflow-anchor: none; }
.comment.reply { gap: 12px; margin-bottom: 16px; }
.comment.reply .c-av img { width: 24px; height: 24px; }

/* ---------- up next column ---------- */
.side-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; }
.side-chips::-webkit-scrollbar { display: none; }
.compact { display: flex; gap: 8px; margin-bottom: 8px; border-radius: 8px; position: relative; min-width: 0; }
.compact .thumb { width: 168px; flex: none; border-radius: 8px; }
.compact .meta-text { display: flex; flex-direction: column; padding-right: 24px; }
.compact .v-title { font-size: 14px; line-height: 20px; margin-bottom: 4px; }
.compact .v-sub { font-size: 12px; line-height: 18px; display: flex; flex-direction: column; }
.compact .more-btn { position: absolute; right: -8px; top: -6px; opacity: 0; }
.compact:hover .more-btn, .compact:focus-within .more-btn { opacity: 1; }
@media (hover: none) { .compact .more-btn { opacity: 1; } }
.compact .title-link, .compact a.meta-text { border-radius: 4px; }
.side-empty { padding: 24px 0; }

/* ================================================================ results / lists */
.results { max-width: 1280px; padding: 0 24px 48px; margin: 0 auto; }
.results-chips { position: sticky; top: var(--masthead-h); z-index: 10; background: var(--bg); display: flex; align-items: center; gap: 8px; margin: 0 -24px 8px; }
.results-chips .chips-bar { position: static; flex: 1; min-width: 0; }
.filters-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px; font-weight: 500; flex: none; margin-right: 24px; position: relative; }
.filters-btn::before { content: ''; position: absolute; left: -5px; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
.results-chips .chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.filters-btn.active { background: var(--bg-hover); }
@media (hover: hover) { .filters-btn:hover { background: var(--bg-hover); } }
.result-list { display: flex; flex-direction: column; gap: 16px; }
.result { display: flex; gap: 16px; min-width: 0; }
.result .thumb { width: 500px; max-width: 50%; flex: none; }
.result .meta-text { padding-top: 2px; }
.result-top { display: flex; gap: 8px; align-items: flex-start; }
.result-top .title-link { flex: 1; min-width: 0; }
.result .v-title { font-size: 18px; line-height: 26px; font-weight: 400; margin: 0; }
.result .more-btn { margin-top: -6px; opacity: 0; }
.result:hover .more-btn, .result:focus-within .more-btn { opacity: 1; }
.result .v-sub { font-size: 12px; line-height: 18px; }
.ch-row { margin: 12px 0; font-size: 12px; color: var(--text-2); }
.ch-row img { width: 24px; height: 24px; border-radius: 50%; margin-right: 4px; }
.snippet { color: var(--text-2); font-size: 12px; line-height: 18px; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badge-new { display: inline-block; margin-top: 8px; padding: 2px 4px; border-radius: 2px; background: var(--chip); color: var(--text-2); font-size: 12px; font-weight: 500; line-height: 16px; }
.results-empty .empty { padding: 48px 24px; }
.tag-head { padding: 24px 0 12px; }
.tag-head h1 { font-size: 28px; line-height: 38px; font-weight: 700; }
.tag-head p { font-size: 14px; line-height: 20px; color: var(--text-2); margin-top: 4px; }
@media (max-width: 792px) { .tag-head { padding: 16px 12px 8px; } .tag-head h1 { font-size: 24px; line-height: 32px; } }
.results-sep { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.channel-row { display: flex; align-items: center; gap: 16px; padding: 8px 0 16px; min-width: 0; }
.channel-row-av { width: 360px; max-width: 40%; display: grid; place-items: center; flex: none; }
.channel-row-av img { width: 136px; height: 136px; border-radius: 50%; }
.channel-row-text { flex: 1; min-width: 0; }
.channel-row-text h3 { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; font-size: 18px; font-weight: 400; }
.channel-row-text p { margin: 4px 0 0; font-size: 12px; }
.channel-row-text .v-sub { font-size: 12px; line-height: 18px; }

.filter-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.filter-col h3 { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }
.filter-opt { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; color: var(--text-2); font-size: 14px; }
.filter-opt:hover, .filter-opt.active { color: var(--text); }
.filter-opt.active { font-weight: 500; }
.filter-opt svg { width: 16px; height: 16px; }

.page-h { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; }
.section-h { margin: 24px 0 16px; font-size: 20px; line-height: 28px; font-weight: 700; }
.page-head-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px 0; }

/* trending */
.trending { max-width: 1280px; margin: 0 auto; padding: 0 24px 48px; }
.trend-head { display: flex; align-items: center; gap: 16px; padding: 24px 0 8px; }
.trend-badge { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; }
.trend-badge svg { width: 28px; height: 28px; }
.trending .result-list { margin-top: 16px; }

/* subscriptions */
.sub-avatars { display: flex; gap: 16px; padding: 16px 24px 8px; overflow-x: auto; scrollbar-width: none; }
.sub-av { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; flex: none; font-size: 12px; text-align: center; }
.sub-av img { width: 56px; height: 56px; border-radius: 50%; }
.sub-av span { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* history */
.history-page { display: flex; gap: 48px; max-width: 1280px; margin: 0 auto; padding: 24px 24px 48px; }
.history-main { flex: 1; min-width: 0; max-width: 852px; }
.history-rail { width: 300px; flex: none; position: sticky; top: calc(var(--masthead-h) + 24px); align-self: flex-start; display: flex; flex-direction: column; gap: 8px; }
.history-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.history-more { display: none; }
.group-h { margin: 24px 0 16px; font-size: 20px; line-height: 28px; font-weight: 700; }
.history-list .result { margin-bottom: 16px; }
.history-list .result .thumb { width: 246px; }
.history-list .result .v-title { font-size: 16px; line-height: 22px; font-weight: 500; }
.history-list .result .v-sub { margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; }
.remove-btn { opacity: 0; margin-top: -6px; }
.result:hover .remove-btn, .result:focus-within .remove-btn { opacity: 1; }
@media (hover: none) { .remove-btn, .result .more-btn { opacity: 1; } }
.rail-search { display: flex; align-items: center; gap: 12px; height: 40px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.rail-search:focus-within { border-bottom-color: var(--text); box-shadow: inset 0 -1px 0 var(--text); }
.rail-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.rail-search svg { color: var(--text-2); }
.rail-btn { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px 0 12px; border-radius: 20px; font-weight: 500; text-align: left; }
@media (hover: hover) { .rail-btn:hover:not(:disabled) { background: var(--bg-hover); } }
.rail-btn:disabled { opacity: .5; }
.rail-note { color: var(--text-2); font-size: 12px; line-height: 18px; margin: 8px 12px; }

/* playlist pages */
.playlist-page { display: flex; gap: 24px; max-width: 1280px; margin: 0 auto; padding: 24px; align-items: flex-start; }
.pl-hero {
  position: sticky; top: calc(var(--masthead-h) + 24px); width: 360px; flex: none; border-radius: 16px; overflow: hidden;
  background: #1f2a44; color: #fff; isolation: isolate; min-height: calc(100vh - var(--masthead-h) - 48px);
}
.pl-hero-bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(60px) saturate(1.3); opacity: .9; z-index: -1; transform: scale(1.2); }
.pl-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.55)); z-index: -1; }
.pl-hero-inner { padding: 24px; }
.pl-hero-thumb { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; position: relative; }
.pl-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-hero-empty { display: grid; place-items: center; background: rgba(255,255,255,.12); }
.pl-hero-empty svg { width: 48px; height: 48px; }
.pl-title { margin: 24px 0 16px; font-size: 28px; line-height: 38px; font-weight: 700; }
.pl-owner { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.pl-owner img { width: 24px; height: 24px; border-radius: 50%; }
.pl-meta { margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.75); }
.pl-actions { display: flex; gap: 8px; margin-top: 24px; }
.pl-actions .btn { flex: 1; }
.pl-list { flex: 1; min-width: 0; }
.pl-row { display: flex; align-items: center; gap: 8px; padding: 8px 0 8px 0; border-radius: 12px; min-width: 0; }
@media (hover: hover) { .pl-row:hover { background: var(--bg-hover); } }
.pl-index { width: 24px; text-align: center; color: var(--text-2); flex: none; }
.pl-row .thumb { width: 160px; flex: none; border-radius: 8px; }
.pl-row .v-title { font-size: 16px; line-height: 22px; }
.pl-row .v-sub { font-size: 12px; line-height: 18px; display: flex; flex-wrap: wrap; }
.pl-row .v-sub > * { white-space: nowrap; }
.pl-row .v-sub .ch-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pl-row .remove-btn { opacity: 0; margin: 0; }
.pl-row:hover .remove-btn, .pl-row:focus-within .remove-btn { opacity: 1; }
.pl-row .more-btn { margin-right: 4px; }
/* touch / phone: no invisible-but-tappable remove button; "Remove from …" lives in the ⋮ menu */
@media (hover: none), (max-width: 792px) { .pl-row .remove-btn { display: none; } }

/* you hub */
.you-page { max-width: 1284px; margin: 0 auto; padding: 24px 24px 48px; }
.you-head { display: flex; align-items: center; gap: 16px; padding-bottom: 8px; }
.you-head img { width: 120px; height: 120px; border-radius: 50%; }
.you-head h1 { margin: 0 0 4px; font-size: 36px; line-height: 44px; font-weight: 700; }

/* ================================================================ channel */
.channel { max-width: 1284px; margin: 0 auto; padding: 0 24px 48px; }
.channel-banner { aspect-ratio: 6.2 / 1; border-radius: var(--radius); overflow: hidden; margin-top: 16px; background: var(--skeleton); }
.channel-banner img { width: 100%; height: 100%; object-fit: cover; }
.channel-head { display: flex; gap: 24px; align-items: flex-start; padding: 24px 0 16px; }
.channel.own .channel-head { padding-top: 32px; }
.channel-av { width: 160px; height: 160px; border-radius: 50%; flex: none; }
.channel-meta { min-width: 0; flex: 1; }
.channel-head h1 { margin: 0; font-size: 36px; line-height: 44px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.channel-head h1 .verified svg { width: 20px; height: 20px; }
.channel-stats { margin: 8px 0 0; display: flex; flex-wrap: wrap; }
.channel-stats b { color: var(--text); font-weight: 500; }
.channel-about-link { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; color: var(--text-2); text-align: left; max-width: 100%; border-radius: 4px; }
.channel-about-link .clamp-1 { max-width: 640px; }
.channel-about-link .more { display: inline-flex; align-items: center; gap: 2px; color: var(--text); font-weight: 500; }
.channel-about-link .more svg { width: 16px; height: 16px; }
.channel-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; height: 48px; display: grid; place-items: center; flex: none; font-size: 16px; font-weight: 500; color: var(--text-2);
  transition: color var(--dur-s) var(--ease-std);
}
.tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--text-2); transform: scaleX(0); transition: transform var(--dur-m) var(--ease-std); }
@media (hover: hover) { .tab:hover { color: var(--text); } }
@media (hover: hover) { .tab:hover::after { transform: scaleX(1); } }
.tab.active { color: var(--text); }
.tab.active::after { background: var(--text); transform: scaleX(1); }
.tabs { position: relative; }
.tabs.has-ink .tab.active::after { transform: scaleX(0); }
@media (hover: hover) { .tabs.has-ink .tab:hover::after { opacity: .3; } }
.tab-ink {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 3px; background: var(--text); pointer-events: none;
  transform-origin: left; transition: transform 250ms var(--ease-std);
}
.tab-search svg { width: 24px; height: 24px; }
.tab-search::after { display: none; }
.tab:focus-visible { outline-offset: -2px; }
.channel .grid, .channel-grid { padding: 0 0 24px; }
.card.no-channel .meta { gap: 0; }
.sort-chips { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.featured { display: flex; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.featured-thumb { width: 424px; max-width: 45%; flex: none; }
.featured-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; z-index: 2; }
.featured-text { min-width: 0; }
.featured-title { margin: 0 0 4px; font-size: 18px; line-height: 26px; font-weight: 500; }
.featured-desc { margin: 12px 0 0; font-size: 14px; line-height: 20px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-2); }
.about { max-width: 640px; }
.about-h { margin: 24px 0 12px; font-size: 20px; line-height: 28px; font-weight: 700; }
.about-h:first-child { margin-top: 0; }
.about-desc { margin: 0; white-space: pre-line; }
.about-row { display: flex; align-items: center; gap: 16px; min-height: 48px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.about-row svg { width: 24px; height: 24px; flex: none; color: var(--text-2); }

/* ================================================================ upload */
.upload { max-width: 960px; margin: 0 auto; padding: 24px 24px 48px; }
.upload .page-h { margin-bottom: 24px; }
.dropzone {
  border: 2px dashed var(--border); border-radius: 16px; padding: 56px 24px; text-align: center; background: var(--bg-elev);
  transition: border-color var(--dur-s) var(--ease-std), background-color var(--dur-s) var(--ease-std);
}
.dropzone.drag { border-color: var(--brand); background: var(--brand-soft); }
.dropzone h2 { margin: 24px 0 8px; font-size: 16px; font-weight: 500; }
.dropzone p { margin: 0 0 24px; color: var(--text-2); }
.file-btn { cursor: pointer; position: relative; }
.file-btn:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.upload-note { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; color: var(--text-2); font-size: 12px; line-height: 18px; }
.upload-note svg { width: 20px; height: 20px; flex: none; color: var(--brand); }

/* ================================================================ dialogs */
dialog.modal {
  border: 0; padding: 0; color: var(--text); background: var(--bg-elev); border-radius: 12px; box-shadow: var(--shadow);
  width: min(512px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto;
  animation: modal-in 200ms var(--ease-decel);
}
dialog.modal::backdrop { background: var(--scrim); animation: view-in 200ms var(--ease-std); }
dialog.modal.closing { animation: modal-out 120ms var(--ease-accel) forwards; }
dialog.modal.closing::backdrop { opacity: 0; transition: opacity 120ms; }
/* drag-to-dismiss: the scrim follows the sheet (--drag-p 0..1 set by dragToDismiss) */
dialog.modal[style*="--drag-p"]::backdrop { opacity: calc(1 - var(--drag-p, 0)); transition: opacity var(--drag-dur, 200ms) linear; }
dialog.modal.dragging::backdrop { transition: none; }
@keyframes modal-in { from { opacity: 0; transform: scale(.96); } }
@keyframes modal-out { to { opacity: 0; transform: scale(.96); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 0 24px; }
.modal-head h2 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-body { padding: 16px 24px 24px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
dialog.modal.confirm { width: min(400px, calc(100vw - 32px)); }
/* confirms keep their question visible: 20px title, secondary body text, actions bottom-right */
.confirm .modal-head { padding: 24px 24px 0; border: 0; }
.confirm .modal-head h2 { font-size: 20px; line-height: 28px; font-weight: 500; white-space: normal; overflow: visible; }
.confirm .modal-body { padding: 12px 24px 16px; }
.confirm-text { margin: 0; color: var(--text-2); font-size: 14px; line-height: 20px; }
.confirm .modal-actions { margin-top: 24px; }

.share-targets { display: flex; gap: 24px; margin-bottom: 24px; }
.share-target { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; border-radius: 8px; }
.share-circle { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: transform var(--dur-xs) var(--ease-std); }
@media (hover: hover) { .share-target:hover .share-circle { transform: scale(1.05); } }
.share-circle svg { width: 28px; height: 28px; }
/* neutral discs follow the theme (light grey in light mode); only Copy link carries the brand */
.share-circle.embed, .share-circle.mail { background: var(--chip); color: var(--text); }
.share-circle.link { background: var(--brand-fill); }
.share-url { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 6px 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.share-url input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; }
.share-url:focus-within { border-color: var(--brand); }
.share-start { display: flex; align-items: center; gap: 8px; margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.share-start input { width: 18px; height: 18px; accent-color: var(--brand); }

dialog.modal.save-dialog { width: min(300px, calc(100vw - 32px)); }
.save-dialog .modal-body { padding: 8px 0 8px; }
.check-list { display: flex; flex-direction: column; }
.check-row { display: flex; align-items: center; gap: 16px; min-height: 40px; padding: 0 24px; cursor: pointer; }
@media (hover: hover) { .check-row:hover { background: var(--bg-hover); } }
.check-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.check-row svg { width: 20px; height: 20px; color: var(--text-2); flex: none; }
.check-row input, .radio-card input {
  appearance: none; -webkit-appearance: none; margin: 0; width: 20px; height: 20px; flex: none; border: 2px solid var(--text-2); border-radius: 3px;
  display: grid; place-items: center; cursor: pointer; transition: background-color var(--dur-xs), border-color var(--dur-xs);
}
.check-row input:checked { background: var(--brand-fill); border-color: var(--brand-fill); }
.check-row input:checked::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.new-pl { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.new-pl .menu-item { padding: 0 24px; height: 48px; }
/* the + sits in the same 20px column as the checkboxes above (centre x = 24 + 10) */
.new-pl .menu-item svg { width: 20px; height: 20px; margin: 0; }
.check-row .pl-lock { flex: none; margin-left: auto; display: inline-grid; place-items: center; color: var(--text-2); }
.new-pl-form { padding: 0 24px 8px; }
.field { display: flex; flex-direction: column; gap: 4px; position: relative; margin-bottom: 16px; }
.field > span { font-size: 12px; color: var(--text-2); }
.field input, .field textarea {
  width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text);
  font: 400 15px/22px var(--font); outline: none; resize: none;
}
.field input:focus, .field textarea:focus { border-bottom-color: var(--brand); box-shadow: inset 0 -1px 0 var(--brand); }
.field.big { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 20px; }
.field.big:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.field.big textarea, .field.big input { border: 0; padding: 0; box-shadow: none !important; overflow: hidden; }
.field.big > span { font-size: 12px; color: var(--text-2); }
.field.invalid { border-color: #d93025 !important; }
.field.invalid > span { color: #d93025; }
.counter { position: absolute; right: 12px; bottom: 4px; font-size: 12px; color: var(--text-2); }

dialog.modal.shortcuts-dialog { width: min(560px, calc(100vw - 32px)); }
.kbd-h { margin: 8px 0; font-size: 14px; font-weight: 500; color: var(--text-2); }
.kbd-list { margin: 0 0 16px; }
.kbd-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.kbd-list dt { min-width: 0; }
.kbd-list dd { margin: 0; white-space: nowrap; color: var(--text-2); }
kbd { display: inline-block; min-width: 24px; padding: 0 6px; border-radius: 4px; background: var(--chip); color: var(--text); font: 500 12px/22px var(--mono); text-align: center; }

dialog.modal.about-dialog { width: min(640px, calc(100vw - 32px)); }
.about-dialog .about-h { font-size: 18px; margin-top: 16px; }
dialog.modal.filters-dialog { width: min(900px, calc(100vw - 32px)); }

/* upload dialog */
dialog.modal.upload-dialog { width: min(960px, calc(100vw - 32px)); }
.upload-dialog .modal-head h2 { font-size: 24px; line-height: 32px; font-weight: 700; }
.upload-dialog .modal-body { padding: 0; }
.stepper { display: flex; align-items: center; list-style: none; margin: 0; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.step { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: var(--text-2); flex: none; width: 96px; }
.step-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--text-2); display: grid; place-items: center; }
.step-dot svg { width: 14px; height: 14px; opacity: 0; color: #fff; }
.step.current { color: var(--text); font-weight: 500; }
.step.current .step-dot { border-color: var(--brand); box-shadow: inset 0 0 0 4px var(--bg-elev); background: var(--brand); }
.step.done .step-dot { background: var(--brand-fill); border-color: var(--brand-fill); }
.step.done .step-dot svg { opacity: 1; }
.step.done.current .step-dot { box-shadow: none; background: var(--brand-fill); border-color: var(--brand-fill); }
.step-line { flex: 1; height: 2px; background: var(--border); margin: 0 -24px 18px; position: relative; overflow: hidden; }
.step-line::after { content: ''; position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-l) var(--ease-std); }
.step-line.done::after { transform: none; }
.upload-steps { padding: 24px; }
.up-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
.up-h { margin: 0 0 16px; font-size: 20px; line-height: 28px; font-weight: 700; }
.up-sub { margin: 16px 0 4px; font-size: 15px; font-weight: 500; }
.up-help { margin: 0 0 12px; color: var(--text-2); font-size: 13px; }
.thumb-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 660px; }
.thumb-opt {
  aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; position: relative; background: var(--chip); outline-offset: 2px;
  box-shadow: 0 0 0 2px transparent; transition: box-shadow var(--dur-s) var(--ease-std);
}
.thumb-opt img { width: 100%; height: 100%; object-fit: cover; }
.thumb-opt .sk { position: absolute; inset: 0; }
.thumb-opt[aria-checked="true"], .upload-tile.selected { box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--brand); }
.upload-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px dashed var(--text-2); font-size: 12px; color: var(--text-2); cursor: pointer; text-align: center; background-size: cover; background-position: center; }
.upload-tile svg { width: 20px; height: 20px; }
.upload-tile:focus-within { outline: 2px solid var(--brand); }
.thumb-fail { display: grid; place-items: center; height: 100%; color: var(--text-2); }
.ai-check { padding: 8px 12px; border-radius: 8px; background: var(--brand-soft); margin: 8px 0; }
@media (hover: hover) { .ai-check:hover { background: var(--brand-soft); } }
.up-error { display: flex; gap: 8px; align-items: center; color: #d93025; font-size: 13px; margin: 0 0 8px; }
.up-error svg { width: 18px; height: 18px; }
.ai-fields { margin-top: 12px; }
.up-side { display: flex; flex-direction: column; gap: 0; background: var(--chip); border-radius: 8px; overflow: hidden; align-self: start; }
.up-preview { position: relative; aspect-ratio: 16 / 9; background: #000; cursor: pointer; overflow: hidden; color: #fff; }
.up-preview video { width: 100%; height: 100%; display: block; object-fit: contain; }
.up-play {
  position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.6); color: #fff; transition: opacity var(--dur-s) var(--ease-std);
}
.up-play svg { width: 28px; height: 28px; }
.up-preview.playing .up-play { opacity: 0; }
.up-preview.playing:hover .up-play, .up-preview.playing .up-play:focus-visible { opacity: 1; }
.up-time { position: absolute; left: 8px; bottom: 9px; padding: 1px 4px; border-radius: 4px; background: rgba(0,0,0,.6); font: 500 12px/16px var(--font); }
.up-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.3); }
.up-bar i { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.up-file { margin: 0; padding: 12px 16px; }
.up-file > div { padding: 6px 0; }
.up-file dt { font-size: 12px; color: var(--text-2); }
.up-file dd { margin: 0; overflow-wrap: anywhere; }
.up-foot { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--border); position: sticky; bottom: 0; z-index: 2; background: var(--bg-elev); }
.up-status { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; min-width: 0; }
.up-status svg { width: 20px; height: 20px; color: var(--brand); flex: none; }
.up-status-short { display: none; }
.radio-cards { display: grid; gap: 12px; max-width: 560px; }
.radio-card { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color var(--dur-xs), background-color var(--dur-xs); }
@media (hover: hover) { .radio-card:hover { background: var(--bg-hover); } }
.radio-card input { border-radius: 50%; margin-top: 2px; }
.radio-card input:checked { border-color: var(--brand); }
.radio-card input:checked::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.radio-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.radio-text { display: flex; flex-direction: column; }
.radio-text b { font-weight: 500; }
.radio-text small { color: var(--text-2); font-size: 13px; }
.processing { max-width: 520px; margin: 32px auto; }
.proc-label { display: flex; justify-content: space-between; margin: 0 0 8px; font-weight: 500; }
.proc-bar { height: 4px; border-radius: 2px; background: var(--chip); overflow: hidden; margin-bottom: 12px; }
.proc-bar i { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.published { text-align: center; max-width: 480px; margin: 8px auto; }
.check-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-fill); color: #fff; display: inline-grid; place-items: center; animation: pop-in 400ms var(--ease-decel); }
.check-circle svg { width: 36px; height: 36px; }
@keyframes pop-in { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: none; } }
.published h3 { margin: 16px 0 8px; font-size: 20px; line-height: 28px; }
.published, .published p, .published h3, .upload-dialog .modal-body p { overflow-wrap: anywhere; min-width: 0; }
.pub-title { word-break: break-word; }
.published .share-url input { min-width: 0; flex: 1; }
.pub-thumb { width: 240px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin: 8px auto 16px; }
.published .modal-actions { justify-content: center; }

/* ================================================================ toast */
.toast {
  --toast-b: 24px; --toast-lift: 0px;
  position: fixed; inset: auto auto var(--toast-b) 24px; margin: 0; border: 0; overflow: visible;
  width: fit-content; height: auto; z-index: 70; min-height: 48px; max-width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 24px; padding: 0 8px 0 16px; border-radius: 8px;
  background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow); font: 400 14px/20px var(--font);
  transform: translateY(calc(16px - var(--toast-lift))); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 200ms var(--ease-accel), opacity var(--dur-s) var(--ease-accel), visibility 0s 200ms;
}
/* manual popover: the UA hides it while closed; we keep it rendered while it fades out */
.toast[popover]:not(:popover-open) { display: none; }
.toast.show { transform: translateY(calc(-1 * var(--toast-lift))); opacity: 1; visibility: visible; pointer-events: auto; transition: transform var(--dur-m) var(--ease-std), opacity var(--dur-s) var(--ease-std); }
.toast::backdrop { display: none; }
/* above an open sheet: the toast keeps its bottom and lifts with a transform (no layout per frame) */
html.has-sheet .toast { --toast-lift: max(0px, calc(var(--sheet-h) + 12px - var(--toast-b))); }
.toast-msg { padding: 14px 8px 14px 0; overflow-wrap: anywhere; }
.toast-action { height: 36px; padding: 0 12px; border-radius: 18px; color: var(--toast-action); font-weight: 500; flex: none; }
@media (hover: hover) { .toast-action:hover { background: rgba(127,127,127,.15); } }

/* ================================================================ responsive */
@media (max-width: 1100px) {
  .watch { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "player" "info" "side"; }
  body.theater .watch { grid-template-areas: "player" "info" "side"; }
  .watch-secondary { margin-top: 24px; }
  .history-page { gap: 24px; }
  .history-rail { width: 260px; }
}

@media (max-width: 1000px) {
  .playlist-page { flex-direction: column; padding: 0 0 48px; }
  .pl-hero { position: relative; top: 0; width: 100%; min-height: 0; border-radius: 0; }
  .pl-hero-inner { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 24px; }
  .pl-hero-thumb { grid-row: 1 / 5; }
  .pl-title { margin: 0 0 8px; }
  .pl-list { width: 100%; padding: 0 16px; }
  .up-cols { grid-template-columns: minmax(0, 1fr); }
  .up-side { order: -1; }
  /* title first, then the search field, then the list */
  .history-page { flex-direction: column; gap: 0; }
  .history-main { display: contents; }
  .history-title-row { order: 1; }
  .history-rail { order: 2; position: static; width: 100%; }
  .history-list { order: 3; }
  .filter-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 792px) {
  :root { --radius: 12px; }
  /* phone skeleton card = real card: 2 title lines + one meta line */
  .sk-card .meta { min-height: 64px; }
  .sk-card .meta-text .sk-line.short.s2 { display: none; }
  .bb-item > [data-icon] { display: grid; place-items: center; }
  /* upload details: the form first, the preview card after the thumbnail picker */
  .up-cols { display: flex; flex-direction: column; }
  .up-side { order: 2; }
  .up-file { padding: 8px 12px; }
  .up-file > div { padding: 2px 0; }
  .up-file dt, .up-file dd { font-size: 12px; line-height: 18px; }
  .up-file dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* phone search: one rounded field, Enter submits */
  body.search-mode .search-submit, body.results-page .search-submit { display: none; }
  body.search-mode .search, body.results-page .search { margin-right: 8px; }
  body.search-mode .search input, body.results-page .search input { border: 0; border-radius: 20px; background: var(--chip); height: 40px; box-shadow: none; }
  /* full-screen notifications / account: push in from the side like a page, opaque from frame 1 */
  .notif-menu, .account-menu { background: var(--bg); }
  .mini-guide, body.guide-collapsed .mini-guide { display: none !important; }
  .page, body.guide-collapsed .page { margin-left: 0; padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom)); }
  body.watch-page .page { padding-bottom: 0; }
  .bottom-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; height: calc(var(--bottom-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--border);
    display: grid; grid-template-columns: repeat(5, 1fr);
  }
  body.watch-page .bottom-bar { display: none; }
  .bb-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; line-height: 12px; color: var(--text); }
  .bb-item svg { width: 24px; height: 24px; }
  .bb-item:focus-visible { outline-offset: -2px; }
  .bb-plus { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; background: var(--chip); }
  .toast { left: 12px; right: 12px; width: auto; --toast-b: calc(var(--bottom-h) + 12px + env(safe-area-inset-bottom)); max-width: none; }
  body.watch-page .toast { --toast-b: calc(12px + env(safe-area-inset-bottom)); }

  /* the search button reserves its own 44px slot; the logo cluster shrinks instead, so masthead buttons never overlap */
  .search { margin-left: auto; flex: none; }
  .masthead-start { flex: 0 1 auto; min-width: 0; }
  .masthead-start .logo { min-width: 0; }
  .masthead-start .logo-word { overflow: hidden; text-overflow: clip; }
  .search form, .search .mic { display: none; }
  .search .search-open { display: inline-grid; }
  body.search-mode .masthead-start, body.search-mode .masthead-end { display: none; }
  body.search-mode .search { flex: 1; }
  body.search-mode .search form { display: flex; }
  body.search-mode .search-back { display: inline-grid; }
  body.search-mode .search .search-open { display: none; }
  /* full-screen takeover while searching: no feed or bottom bar behind the list */
  .suggest { position: fixed; inset: var(--masthead-h) 0 0 0; max-height: none; border-radius: 0; border: 0; border-top: 1px solid var(--border); background: var(--bg); box-shadow: none; overflow-y: auto; padding: 8px 0; }
  body.search-mode .bottom-bar { display: none; }
  .sugg { height: 48px; }
  .sugg-fill { display: inline-grid; }
  .sugg-remove { display: none; }
  .create-btn .create-label { display: none; }
  .create-btn { width: 40px; padding: 0; justify-content: center; border-radius: 50%; background: transparent; }
  .notif-menu, .account-menu {
    position: fixed; inset: 0; width: auto; max-height: none; border-radius: 0; box-shadow: none; z-index: 50;
    transform: translateX(24px); transform-origin: top center; overscroll-behavior: contain; background: var(--bg);
    transition: transform 150ms var(--ease-accel), opacity 120ms var(--ease-accel), visibility 0s 150ms;
  }
  .notif-menu.open, .account-menu.open { transform: none; opacity: 1; transition: transform 300ms var(--ease-std), opacity 100ms linear; }
  .notif-scroll { max-height: none; flex: 1; min-height: 0; }
  .menu-titlebar { height: var(--masthead-h); padding: 0 8px; gap: 8px; }
  .menu-titlebar .menu-close { display: inline-grid; margin: 0; }
  .account-menu { overflow-y: auto; max-height: 100dvh; padding-top: 0; }
  .account-menu .menu-sheet-head { display: flex; border-bottom: 0; }

  .grid { padding: 8px 0 48px; gap: 24px; }
  .grid .card .thumb { border-radius: 0; }
  .grid .card .meta { padding: 0 12px; }
  .grid .sk-thumb { border-radius: 0; }
  .grid .sk-card .meta { padding: 0 12px; }
  /* one-line card meta: "Channel ✓ • 2.4M views • 3 days ago", even 4px around every bullet */
  .grid .card .v-sub { display: flex; flex-wrap: wrap; align-items: center; font-size: 12px; line-height: 18px; }
  .grid .card .v-sub .ch-line { max-width: 100%; }
  /* the bullet belongs to the segment after it and sits in a 14px slot; the box is shifted 14px left and
     that strip is clipped, so a bullet that would start a wrapped line is cut away: never an orphan at
     the end of line 1, never a stray one at the start of line 2 */
  .grid .card .v-sub > .ch-sep { display: none; }
  .grid .card .v-sub { margin-left: -14px; clip-path: inset(-12px -12px -12px 14px); }
  .grid .card .v-sub > .ch-line { margin-left: 14px; }
  .grid .card .v-sub > .meta-line::before { content: '•'; display: inline-block; width: 14px; text-align: center; }
  .owner-text { overflow: hidden; }
  .owner-name { flex: 0 1 auto; min-width: 0; }
  .owner-subs { flex: none; }
  .desc { scroll-margin-top: calc(var(--masthead-h) + 56.25vw + 8px); }
  body.results-page .masthead-start, body.results-page .masthead-end { display: none; }
  body.results-page .search { flex: 1; }
  body.results-page .search form { display: flex; }
  body.results-page .search-back { display: inline-grid; }
  body.results-page .search .search-open { display: none; }
  .chips { padding: 12px; gap: 8px; }
  .chips-arrow { display: none; }

  .watch { padding: 0; }
  body.theater .watch-player { margin: 0; }
  body.theater .player { height: auto; aspect-ratio: 16/9; }
  .watch-player { position: sticky; top: var(--masthead-h); z-index: 15; background: #000; }
  .watch-info { margin: 0 12px; }
  .watch-secondary { padding: 0 12px; margin-top: 16px; }
  .player { border-radius: 0; }
  .player-top { padding: 8px; }
  .ctrl-row { height: 40px; }
  .ctrl-row .icon-btn { width: 40px; height: 40px; }
  .ctrl-row [data-act="next"], .ctrl-row [data-act="captions"], .ctrl-row .theater-btn, .ctrl-row .vol-wrap { display: none; }
  .time { font-size: 12px; line-height: 40px; }
  .player-menu { bottom: 48px; right: 8px; max-height: calc(100% - 56px); }
  .watch-title { font-size: 18px; line-height: 26px; font-weight: 600; }
  .watch-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
  .owner { width: 100%; }
  .owner-av img { width: 36px; height: 36px; }
  /* name gets the full flex width; the subscriber count sits under it */
  .owner-text { flex: 1; min-width: 0; overflow: hidden; }
  .owner-name { font-size: 14px; line-height: 20px; min-width: 0; }
  .owner-subs { font-size: 12px; line-height: 18px; }
  .owner .subscribe, .owner .btn { margin-left: auto; height: 36px; }
  .actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .actions::-webkit-scrollbar { display: none; }
  .actions .pill { height: 36px; }
  .desc-stats { font-size: 13px; }

  /* comments: one compact teaser card (header + top comment snippet); the whole card opens the sheet,
     where sort, actions and the composer live. "Add a comment…" only stands in when there are no comments. */
  .comments { margin: 16px 0 0; background: var(--chip); border-radius: 12px; padding: 12px; scroll-margin-top: calc(var(--masthead-h) + 56.25vw + 12px); cursor: pointer; }
  .comments-teaser { display: block; width: 100%; text-align: left; }
  .teaser-head { display: flex; align-items: center; gap: 8px; min-height: 24px; }
  .teaser-open { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; height: 24px; text-align: left; border-radius: 8px; }
  .teaser-head b { font-size: 16px; line-height: 22px; font-weight: 700; }
  .teaser-count { font-size: 14px; line-height: 20px; color: var(--text-2); }
  .teaser-chev { margin-left: auto; display: inline-flex; color: var(--text); }
  .teaser-chev svg { width: 20px; height: 20px; }
  .teaser-top { display: flex; gap: 8px; margin-top: 8px; align-items: flex-start; font-size: 14px; line-height: 20px; }
  .teaser-top img { width: 24px; height: 24px; border-radius: 50%; flex: none; }
  .teaser-body { flex: 1; min-width: 0; }
  .teaser-body .c-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 20px; margin: 2px 0 0; }
  .teaser-top .c-handle-sm, .teaser-top .comment-actions, .teaser-top .replies-toggle { display: none; }
  .teaser-compose { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .comments-teaser:has(.teaser-top) + .teaser-compose { display: none; }
  .teaser-compose img { width: 24px; height: 24px; border-radius: 50%; }
  .teaser-input { flex: 1; min-width: 0; height: 32px; border: 0; border-radius: 16px; padding: 5px 12px; resize: none; background: var(--bg); color: var(--text-2); font: 14px/22px var(--font); outline: none; cursor: text; }
  .teaser-input:focus-visible { outline: 2px solid var(--brand); }
  .comments-full { display: none; }
  .comments.sheet-open .comments-full, .comments.sheet-closing .comments-full {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    height: calc(100dvh - var(--masthead-h) - 56.25vw); min-height: 50vh; background: var(--bg-elev); border-radius: 12px 12px 0 0;
    box-shadow: 0 32px 0 0 var(--bg-elev), 0 -4px 24px rgba(0,0,0,.2); animation: sheet-up 400ms var(--ease-emph);
  }
  .comments.sheet-closing .comments-full { animation: sheet-down 200ms var(--ease-accel) forwards; pointer-events: none; }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  @keyframes sheet-down { to { transform: translateY(100%); } }
  .comments.sheet-open .comments-full > .sheet-handle, .comments.sheet-closing .comments-full > .sheet-handle { display: block; margin: 8px auto 0; flex: none; }
  .comments-head { position: sticky; top: 0; margin: 0; padding: 4px 4px 8px 12px; gap: 8px; border-bottom: 1px solid var(--border); flex: none; }
  .comments-head h2 { font-size: 16px; line-height: 20px; flex: 1; display: flex; gap: 8px; }
  /* same wording as the teaser: "Comments 14", icon-only sort */
  .comments-head h2 .c-word { order: -1; }
  .comments-head h2 .c-count { font-weight: 400; color: var(--text-2); }
  .comments-head .sort-btn { width: 40px; height: 40px; padding: 0; margin: 0; justify-content: center; border-radius: 50%; }
  .comments-head .sort-btn span { display: none; }
  .comments-head .sort-btn svg { width: 24px; height: 24px; }
  .sheet-close { display: inline-grid; }
  .comments-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; overscroll-behavior: contain; }
  #comment-list { order: 1; padding: 16px 12px 8px; }
  #comment-list .comment { scroll-margin-top: 12px; }
  #comment-form { order: 2; position: sticky; bottom: 0; margin: auto 0 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--bg-elev); border-top: 1px solid var(--border); }
  #comment-form .composer-av { width: 32px; height: 32px; }
  .comment { gap: 12px; }
  .c-av img { width: 32px; height: 32px; }

  .compact { gap: 12px; }
  .side-list .compact { flex-direction: column; margin: 0 -12px 16px; }
  .side-list .compact .thumb { width: 100%; border-radius: 0; }
  .side-list .compact .meta-text { padding: 0 36px 0 12px; }
  .side-list .compact .v-title { font-size: 16px; line-height: 22px; }
  .side-list .compact .v-sub { flex-direction: row; flex-wrap: wrap; gap: 0 4px; }
  .side-list .compact .v-sub > .ch-sep { display: inline; margin: 0; }
  .side-list .compact .more-btn { top: auto; bottom: 18px; right: 4px; }

  .results { padding: 0 0 48px; }
  .results-chips { margin: 0 0 8px; }
  .filters-btn { margin-right: 12px; }
  .filters-btn span { display: none; }
  .channel-row { padding: 16px 12px; }
  .channel-row-av { width: auto; max-width: none; }
  .channel-row-av img { width: 72px; height: 72px; }
  .channel-row .subscribe { display: none; }
  .results-grid { padding-top: 0; }
  .trending { padding: 0 0 48px; }
  .trend-head { padding-left: 12px; padding-right: 12px; }
  .trending .tabs { padding: 0; }
  .trend-head { padding-top: 16px; }
  .trend-badge { width: 40px; height: 40px; }
  .trend-badge svg { width: 22px; height: 22px; }
  .page-h { font-size: 20px; line-height: 28px; }
  .page-head-row { padding: 16px 12px 0; }
  .sub-avatars { padding: 12px 12px 4px; }

  .channel { padding: 0 12px 48px; }
  .channel-banner { margin-top: 8px; border-radius: 12px; }
  /* avatar top-left beside name + handle; description and a full-width action row below */
  .channel-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "av name" "av meta" "desc desc" "acts acts"; column-gap: 16px; row-gap: 4px; align-items: start; padding: 16px 0; }
  .channel-meta { display: contents; }
  .channel-av { grid-area: av; width: 72px; height: 72px; }
  .channel-head h1 { grid-area: name; font-size: 24px; line-height: 32px; align-self: end; }
  .channel-stats { grid-area: meta; font-size: 12px; line-height: 18px; margin-top: 0; align-self: start; }
  .channel-about-link { grid-area: desc; font-size: 12px; margin-top: 8px; }
  .channel-about-link .clamp-1 { max-width: 100%; }
  .channel-actions { grid-area: acts; display: flex; gap: 8px; margin-top: 12px; flex-wrap: nowrap; width: 100%; }
  .channel-actions .subscribe { flex: 1; height: 36px; justify-content: center; }
  .channel-actions .btn { flex: none; }
  .channel.own .channel-actions .btn { flex: 1; }
  /* phone tab strip: full-bleed, 12px touch padding per tab and no gap, so labels sit on the 12px gutter
     and Home/Videos/Playlists/About/search (~325px) fit a 360px screen */
  .tabs { gap: 0; margin-bottom: 16px; }
  .channel .tabs { margin-left: -12px; margin-right: -12px; }
  .tabs .tab { font-size: 14px; line-height: 20px; font-weight: 500; min-width: 48px; padding: 0 12px; }
  .tabs .tab-search { flex: none; width: 48px; padding: 0; }
  .tabs.overflowing { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .channel .grid, .channel-grid { margin: 0 -12px; }
  .featured { flex-direction: column; gap: 12px; margin: 0 -12px; padding: 0 0 16px; }
  .featured-thumb { width: 100%; max-width: none; border-radius: 0; }
  .featured-text { padding: 0 12px; }
  .shelf-row { grid-auto-columns: 160px; gap: 8px; }
  /* horizontal rails bleed to the screen edge; the first item still sits on the 12px gutter */
  .shelf-row, .side-chips, .chapters { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; }
  .chapters { scroll-snap-type: x mandatory; }
  /* the expanded description's clip box reaches the card edge, so the chapter rail clips there, not at the inner padding */
  .desc-more > .desc-extra { margin-inline: -12px; padding-inline: 12px; }
  .chapters > * { scroll-snap-align: start; }
  .shelf-row .card .meta { padding: 0; }
  .shelf-row .card .v-sub { display: block; }
  .shelf-row .card .v-sub > .ch-sep { display: none; }
  /* 160px shelf cards: "Channel" / "1 month ago", like the mobile You shelves (no orphan bullet) */
  .shelf-row .card .meta-line .views, .shelf-row .card .meta-line .views + .dot-sep { display: none; }
  .shelf-row .card .meta-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .you-page { padding: 16px 12px 48px; }
  .you-head img { width: 72px; height: 72px; }
  .you-head h1 { font-size: 24px; line-height: 32px; }
  .history-page { padding: 16px 0 48px; }
  .history-rail .rail-btn, .history-rail .rail-note { display: none; }
  .history-more { display: inline-grid; }
  .history-title-row { padding: 0 4px 0 12px; }
  .history-main .group-h { padding: 0 12px; }
  .history-rail { padding: 0 12px; }
  .pl-hero-inner { grid-template-columns: 1fr; }
  .pl-hero-thumb { grid-row: auto; max-width: 360px; }
  .pl-title { margin-top: 16px; font-size: 24px; line-height: 32px; }
  .pl-list { padding: 0 4px 0 0; }
  /* mobile-web row: 160px thumb, 2 title lines + one "Channel • 8.8M views" line, kebab top-right */
  .pl-row { gap: 12px; padding: 6px 0 6px 12px; align-items: flex-start; }
  .pl-row:hover { background: transparent; }
  .pl-row .thumb { width: 160px; }
  .pl-row .meta-text { padding-top: 2px; }
  .pl-row .v-title { font-size: 14px; line-height: 20px; -webkit-line-clamp: 2; }
  /* mobile-web meta: channel on its own line, then "8.8M views • 2 weeks ago" (no bullet after the name) */
  .pl-row .v-sub { display: block; font-size: 12px; line-height: 18px; color: var(--text-2); min-width: 0; }
  .pl-row .v-sub .ch-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pl-row .v-sub > .dot-sep { display: none; }
  .pl-row .v-sub .pl-ago { display: inline; }
  .pl-row .more-btn { margin: -4px 0 0; align-self: flex-start; }
  .pl-index { display: none; }
  .upload { padding: 16px 12px 48px; }
  .dropzone { padding: 32px 16px; }
  .upload-steps { padding: 16px; }
  .stepper { padding: 12px 8px; }
  .step { width: 72px; }
  .thumb-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-foot { height: 64px; padding: 0 16px env(safe-area-inset-bottom); flex-wrap: nowrap; }
  .up-status-long { display: none; }
  .up-status-short { display: inline; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shelf-title { padding: 16px 12px 8px; }
  .logo-word { font-size: 16px; }
  .share-targets { gap: 16px; }
}
@media (min-width: 793px) {
  .search .search-open { display: none; }
}
@media (max-width: 600px) {
  .result { flex-direction: column; }
  .result .thumb { width: 100%; max-width: none; }
  .filter-cols { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  dialog.modal.share-dialog, dialog.modal.save-dialog, dialog.modal.upload-dialog, dialog.modal.filters-dialog {
    width: 100vw; max-width: 100vw; max-height: 90dvh; margin: auto 0 0; border-radius: 12px 12px 0 0;
    animation: sheet-up var(--dur-m) var(--ease-decel);
  }
  dialog.modal.upload-dialog { max-height: 100dvh; height: 100dvh; border-radius: 0; }
  dialog.modal .dialog-handle { display: block; margin: 8px auto 0; }
  .upload-dialog .modal-head h2 { font-size: 18px; line-height: 26px; }
  /* every bottom sheet shares one 16px gutter and 48px rows */
  dialog.modal.share-dialog .modal-head, dialog.modal.save-dialog .modal-head, dialog.modal.filters-dialog .modal-head { padding: 0 8px 0 16px; min-height: 48px; }
  /* body shares the header's 16px gutter: title, first share disc and URL field line up at x=16 */
  dialog.modal.share-dialog .modal-body, dialog.modal.filters-dialog .modal-body { padding: 8px 16px 16px; }
  /* upload: dialog title and body share one 16px gutter; step heading sits below the 18px title */
  .upload-dialog .modal-head { padding: 12px 8px 0 16px; min-height: 56px; }
  .upload-dialog .up-h { font-size: 16px; line-height: 22px; font-weight: 700; }
  .save-dialog .check-row { padding: 0 16px; min-height: 48px; }
  .save-dialog .new-pl .menu-item { padding: 0 16px; }
  .save-dialog .new-pl-form { padding: 0 16px 8px; }
}
@media (max-width: 480px) {
  :root { --masthead-pad-x: 8px; }
  .masthead { padding: 0 4px 0 var(--masthead-pad-x); gap: 0; }
  .logo { padding: 8px 4px; }
  .create-btn { display: none; }
  .masthead-end { gap: 0; }
  .badge-wrap { margin-right: 8px; }
  .avatar-btn { margin: 0 4px 0 0; }
  .compact .thumb { width: 140px; }
  /* subscribed collapses to a compact bell + chevron pill so the channel name keeps its width */
  .owner .subscribe.on .sub-label { display: none; }
  .owner .subscribe.on { padding: 0 10px 0 12px; gap: 4px; }
}
@media (max-width: 370px) {
  .logo-word { font-size: 15px; letter-spacing: -.8px; }
}
@media (max-width: 340px) {
  .masthead-start .logo-word { display: none; }
}

/* coarse pointers: grow hit areas to >=44px without changing the visuals */
@media (pointer: coarse) {
  .avatar-btn, .comment-actions .icon-btn, .reply-btn, .chip, .sort-btn, .tag, .desc-toggle, .view-full, .you-head .link,
  .tab-search, .teaser-input, .owner-name, .teaser-sort, .replies-toggle, .subscribe, .pill, .btn.sm { position: relative; }
  .avatar-btn { overflow: visible; }
  .avatar-btn img, .avatar-btn .avatar-sk { border-radius: 50%; }
  .avatar-btn::after { content: ''; position: absolute; inset: -6px; }
  .comment-actions .icon-btn::after, .teaser-sort::after { content: ''; position: absolute; inset: -6px; }
  .reply-btn::after, .chip::after, .sort-btn::after { content: ''; position: absolute; inset: -6px -2px; }
  .subscribe::after, .pill::after, .btn.sm::after { content: ''; position: absolute; inset: -4px 0; }
  .tag, .desc-toggle, .view-full, .you-head .link { display: inline-flex; align-items: center; min-height: 24px; }
  .tag::after, .desc-toggle::after, .view-full::after, .you-head .link::after, .owner-name::after { content: ''; position: absolute; inset: -12px -4px; }
  /* hashtags never grow downward over the description body: tapping the text expands it */
  .desc-stats .tag::after { inset: -10px -4px 0; }
  .desc-stats { margin-bottom: 4px; }
  .desc:not(.open) .desc-body { cursor: pointer; }
  .tab-search { width: 44px; }
  #history-q { min-height: 44px; }
  .rail-search { height: 48px; }
  .replies-toggle::after { content: ''; position: absolute; inset: -4px 0; }
  .scrub { height: 32px; margin-top: -6px; }
  .masthead .icon-btn, .card .more-btn { width: 44px; height: 44px; }
  .card a.av { position: relative; }
  .card a.av::after { content: ''; position: absolute; inset: -4px; }
  .v-sub .ch-line { display: inline-flex; align-items: center; min-height: 24px; position: relative; }
  /* hit-area expander lives on ::before; nothing else in .v-sub uses a pseudo-element */
  .v-sub a.ch-line::before { content: ''; position: absolute; inset: -10px -4px; }
  .btn.sm::after { inset: -6px 0; }
  .channel-actions .btn { position: relative; }
  .channel-actions .btn::after { content: ''; position: absolute; inset: -4px 0; }
  .tabs .tab { min-width: 48px; padding-left: 12px; padding-right: 12px; justify-content: center; }
}

/* touch devices of any width (phones and tablets): tactile pressed state on cards and rows */
@media (hover: none) {
  a, button { -webkit-tap-highlight-color: transparent; }
  .card:active .thumb img { transform: scale(.98); transition: transform 120ms var(--ease-std); }
  .compact:active, .result:active, .pl-row:active { background: var(--bg-hover); }
  [role="button"], [data-link] { -webkit-tap-highlight-color: transparent; }
  /* pressed feedback under the finger (hover fills are gated to real pointers, so nothing sticks after a tap) */
  .menu-item:active, .pm-item:active, .pm-back:active, .notif:active, .guide-item:active, .chapter:active, .check-row:active,
  .tab:active, .sugg:active, .sort-btn:active, .replies-toggle:active { background: var(--bg-active); }
  .radio-card:active { background: var(--bg-hover); }
  .comments:not(.sheet-open):has(.comments-teaser):active { background: var(--chip-hover); }
  .bb-item > [data-icon]:not(.bb-plus) { width: 48px; height: 32px; margin: -4px 0; border-radius: 16px; transition: background-color 100ms var(--ease-std); }
  .bb-item:active > [data-icon]:not(.bb-plus) { background: var(--bg-active); }
  .share-circle { transition: transform 100ms var(--ease-std); }
  .share-target:active .share-circle { transform: scale(.92); }
}
/* touch-only devices have no keyboard: hide the shortcuts entries */
@media (hover: none) and (pointer: coarse) {
  [data-shortcuts] { display: none !important; }
}
/* more >=44px touch targets */
@media (pointer: coarse) {
  .controls .icon-btn { width: 48px; height: 48px; }
  .guide .guide-item { height: 48px; }
  .owner-av { position: relative; }
  .owner-av::after { content: ''; position: absolute; inset: -4px; }
  .c-more { position: relative; }
  .c-more::after { content: ''; position: absolute; inset: -4px 0 -4px -8px; } /* grows inward only: no 4px overflow past the row */
  /* 48px hit boxes; the cluster tightens by 8px so the boxes never reach into the outer double-tap seek zones */
  .touch-layer { gap: 40px; }
  .touch-btn.sm { position: relative; }
  .touch-btn.sm::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
  .replies-toggle::after { inset: -6px 0; }
  /* drawer header mirrors the masthead: 44px hamburger box, so glyph and logo don't jump when it opens */
  .guide-head .icon-btn { width: 44px; height: 44px; }
  /* remaining sub-44px touch targets on the watch page and history */
  .pill.round { min-width: 44px; }
  .teaser-open { position: relative; }
  .teaser-open::after { content: ''; position: absolute; inset: -10px -12px; }
  /* hashtags: 24px visual, 44px hit box that grows mostly upward (only 6px over the description body) */
  .desc-stats .tag::after { inset: -14px -4px -6px; }
  .compact .more-btn, .history-more { width: 44px; height: 44px; }
  .teaser-compose { min-height: 44px; }
  /* full-screen account panel: 48px rows like the drawer and sheets */
  .account-menu .menu-item { height: 48px; }
  .account-menu .menu-head { margin-bottom: 8px; }
}
@media (max-width: 792px) {
  /* "Manage" sits on the same 12px gutter as the card kebabs below it */
  .page-head-row .btn.text-brand { height: 36px; padding: 0 8px; margin-right: -8px; }
}
.playlist-missing { padding: 48px 16px; }

/* reduced motion: no movement, but keep short opacity fades that tell the user state changed */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  .sk::after, .skeleton::after { animation: none !important; display: none; }
  .spinner svg { animation: none !important; }
  .spinner circle { stroke-dasharray: none; opacity: .8; }
  .menu, .menu.open, .toast, .toast.show, .popup.sheet, .popup.sheet.open, .guide, dialog.modal, .c-wrap > .comment { transform: none !important; }
  html.has-sheet .toast { bottom: calc(var(--toast-b) + var(--toast-lift)); }
  .menu, .toast, .sheet-backdrop, .scrim, .controls, .player-shade, .player-top, .touch-layer, .scrub-tooltip, .popup.sheet, .guide, .replies, .c-wrap, .desc-extra {
    transition-property: opacity, visibility !important; transition-duration: 120ms !important; transition-delay: 0s !important;
  }
  .comments.sheet-closing .comments-full { animation: view-out 120ms linear forwards !important; transform: none !important; }
  @keyframes view-out { to { opacity: 0; } }
  /* slide-only surfaces fade instead */
  .popup.sheet:not(.open), .guide { opacity: 0; }
  .popup.sheet.open, body.guide-open .guide { opacity: 1; }
  @media (min-width: 1313px) { body:not(.watch-page) .guide { opacity: 1; } }
}

/* iOS Safari zooms the page when a focused field is under 16px */
@media (max-width: 792px) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), textarea, select { font-size: 16px !important; }
  .composer textarea, .teaser-input { line-height: 22px; }
  .c-text { font-size: 15px; line-height: 21px; }
}