/* ---------- Theme tokens ---------- */
:root {
  --bg: #ffffff;
  --text: #0f0f0f;
  --text-2: #606060;
  --text-3: #909090;
  --hover: rgba(0, 0, 0, .05);
  --pill: rgba(0, 0, 0, .05);
  --pill-hover: rgba(0, 0, 0, .1);
  --divider: rgba(0, 0, 0, .1);
  --border: #d3d3d3;
  --input-bg: #ffffff;
  --input-shadow: inset 0 1px 2px #eeeeee;
  --search-btn: #f8f8f8;
  --chip-active-bg: #0f0f0f;
  --chip-active-text: #ffffff;
  --sub-bg: #0f0f0f;
  --sub-text: #ffffff;
  --blue: #065fd4;
  --blue-btn: #065fd4;
  --blue-btn-text: #ffffff;
  --menu-bg: #ffffff;
  --menu-shadow: 0 4px 32px 0 rgba(0, 0, 0, .1);
  --dialog-bg: #ffffff;
  --field-border: #dddddd;
  --skeleton: #e5e5e5;
  --toast-bg: #0f0f0f;
  --toast-text: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f0f; --text: #f1f1f1; --text-2: #aaaaaa; --text-3: #717171;
    --hover: rgba(255, 255, 255, .1); --pill: rgba(255, 255, 255, .1); --pill-hover: rgba(255, 255, 255, .2);
    --divider: rgba(255, 255, 255, .2); --border: #303030; --input-bg: #121212; --input-shadow: none; --search-btn: #222222;
    --chip-active-bg: #f1f1f1; --chip-active-text: #0f0f0f; --sub-bg: #f1f1f1; --sub-text: #0f0f0f;
    --blue: #3ea6ff; --blue-btn: #3ea6ff; --blue-btn-text: #0f0f0f; --menu-bg: #282828; --menu-shadow: none;
    --dialog-bg: #282828; --field-border: #606060; --skeleton: #272727; --toast-bg: #f1f1f1; --toast-text: #0f0f0f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f0f0f; --text: #f1f1f1; --text-2: #aaaaaa; --text-3: #717171;
  --hover: rgba(255, 255, 255, .1); --pill: rgba(255, 255, 255, .1); --pill-hover: rgba(255, 255, 255, .2);
  --divider: rgba(255, 255, 255, .2); --border: #303030; --input-bg: #121212; --input-shadow: none; --search-btn: #222222;
  --chip-active-bg: #f1f1f1; --chip-active-text: #0f0f0f; --sub-bg: #f1f1f1; --sub-text: #0f0f0f;
  --blue: #3ea6ff; --blue-btn: #3ea6ff; --blue-btn-text: #0f0f0f; --menu-bg: #282828; --menu-shadow: none;
  --dialog-bg: #282828; --field-border: #606060; --skeleton: #272727; --toast-bg: #f1f1f1; --toast-text: #0f0f0f;
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: "Roboto", "Arial", sans-serif; font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.ms {
  font-family: "Material Symbols Outlined"; font-weight: 300; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; display: inline-block;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; -webkit-font-smoothing: antialiased; user-select: none;
  width: 1em; overflow: hidden; flex-shrink: 0;
}
.ms.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.svg-ic { width: 24px; height: 24px; flex-shrink: 0; }

.avatar {
  display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 500;
  flex-shrink: 0; user-select: none; text-transform: uppercase;
}

.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; position: relative; flex-shrink: 0;
}
.icon-btn:hover { background: var(--hover); }
.icon-btn:active { background: var(--pill-hover); }

/* ---------- Masthead ---------- */
#masthead {
  position: fixed; inset: 0 0 auto 0; height: 56px; z-index: 2020; background: var(--bg);
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
}
.mh-start { display: flex; align-items: center; flex-shrink: 0; }
.guide-btn { margin-right: 0; }
.logo { display: flex; align-items: center; padding: 18px 14px 18px 16px; }
.logo-svg { width: 93px; height: 20px; display: block; overflow: visible; }
.logo-text { font-family: "Roboto", sans-serif; font-weight: 700; font-size: 20.5px; letter-spacing: -1.1px; fill: var(--text); }

.mh-center { flex: 0 1 732px; min-width: 0; display: flex; align-items: center; margin: 0 40px; }
.searchbox { flex: 1; min-width: 0; display: flex; height: 40px; margin-left: 32px; }
.searchbox.focused { margin-left: 0; }
.search-input {
  flex: 1; min-width: 0; display: flex; align-items: center; position: relative;
  border: 1px solid var(--border); border-right: 0; border-radius: 40px 0 0 40px;
  background: var(--input-bg); box-shadow: var(--input-shadow); padding: 0 4px 0 16px;
}
.searchbox.focused .search-input { border-color: #1c62b9; padding-left: 48px; }
.search-icon-inner { position: absolute; left: 16px; font-size: 20px; display: none; }
.searchbox.focused .search-icon-inner { display: block; }
.search-input input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 16px; line-height: 22px; padding: 1px 0; }
.search-input input::placeholder { color: var(--text-3); }
.search-btn {
  width: 64px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--search-btn); border-radius: 0 40px 40px 0;
}
.search-btn:hover { background: var(--pill); }
.mic-btn { margin-left: 12px; background: var(--pill); }
.mic-btn:hover { background: var(--pill-hover); }
.mic-btn .ms { font-size: 24px; }

.mh-end { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mobile-search { display: none; }
.create-btn {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 12px; border-radius: 18px;
  background: var(--pill); font-weight: 500; font-size: 14px; margin-right: 0;
}
.create-btn:hover { background: var(--pill-hover); }
.create-btn .ms { font-size: 24px; }
.bell-btn .badge {
  position: absolute; top: 3px; left: 20px; padding: 0 4px; border-radius: 8px; border: 2px solid var(--bg);
  background: #cc0000; color: #fff; font-size: 11px; line-height: 13px; font-weight: 500;
}
.avatar-btn { width: 32px; height: 32px; margin: 0 8px 0 12px; border-radius: 50%; overflow: hidden; }

/* ---------- Guide (sidebar) ---------- */
#guide {
  position: fixed; top: 56px; left: 0; bottom: 0; width: 240px; z-index: 2000; background: var(--bg);
  overflow-y: hidden; padding: 0 12px 0 12px; display: none; scrollbar-width: thin;
}
#guide:hover { overflow-y: auto; }
body[data-guide="full"] #guide { display: block; }
.guide-head { display: none; height: 56px; align-items: center; padding-left: 4px; }
.gsec { padding: 12px 0; border-bottom: 1px solid var(--divider); }
.gsec:last-of-type { border-bottom: 0; }
.gsec-title { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 16px; line-height: 22px; font-weight: 500; height: 40px; border-radius: 10px; }
a.gsec-title:hover { background: var(--hover); }
.gsec-title .ms { font-size: 20px; }
.gi {
  display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; gap: 24px;
  font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden;
}
.gi:hover { background: var(--hover); }
.gi.active { background: var(--pill); font-weight: 500; }
.gi.active:hover { background: var(--pill-hover); }
.gi .gl { overflow: hidden; text-overflow: ellipsis; }
.gi .avatar { width: 24px; height: 24px; font-size: 11px; }
.guide-footer { padding: 16px 12px 24px; color: var(--text-2); font-size: 13px; line-height: 18px; font-weight: 500; }
.guide-footer p { margin: 0 0 12px; }
.guide-footer a { margin-right: 8px; display: inline-block; }
.guide-footer .copy { color: var(--text-3); font-weight: 400; font-size: 12px; }

#mini-guide {
  position: fixed; top: 56px; left: 0; bottom: 0; width: 72px; padding: 4px 4px 0; z-index: 2000; background: var(--bg); display: none;
}
body[data-guide="mini"] #mini-guide { display: block; }
.mgi { display: flex; flex-direction: column; align-items: center; padding: 16px 0 14px; border-radius: 10px; font-size: 10px; line-height: 14px; }
.mgi:hover { background: var(--hover); }
.mgi .ms, .mgi .svg-ic { margin-bottom: 6px; }

/* Drawer mode: the guide slides over the page with a scrim. */
body.drawer-open #guide {
  display: block; top: 0; z-index: 2100; animation: slide-in .2s ease;
}
body.drawer-open .guide-head { display: flex; }
#scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 2050; display: none; }
body.drawer-open #scrim { display: block; }
@keyframes slide-in { from { transform: translateX(-100%); } to { transform: none; } }

/* ---------- Main ---------- */
main { padding-top: 56px; min-height: 100vh; }
body[data-guide="full"] main { margin-left: 240px; }
body[data-guide="mini"] main { margin-left: 72px; }

/* ---------- Chips ---------- */
.chip-bar {
  position: sticky; top: 56px; z-index: 100; background: var(--bg);
  display: flex; gap: 12px; padding: 12px 24px; overflow-x: auto; scrollbar-width: none;
}
.chip-bar::-webkit-scrollbar { display: none; }
.chip {
  height: 32px; padding: 0 12px; border-radius: 8px; background: var(--pill); white-space: nowrap;
  font-size: 14px; line-height: 20px; font-weight: 500; flex-shrink: 0; transition: background .1s;
}
.chip:hover { background: var(--pill-hover); }
.chip.active { background: var(--chip-active-bg); color: var(--chip-active-text); }

/* ---------- Rich grid (home) ---------- */
.rich-grid {
  display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  column-gap: 16px; row-gap: 40px; padding: 12px 24px 40px;
}
@media (max-width: 1200px) { .rich-grid { --cols: 2; } }
@media (max-width: 600px) { .rich-grid { --cols: 1; padding: 0 0 24px; column-gap: 0; } .rich-grid .rich-meta { padding: 0 12px; } .rich-grid .thumb { border-radius: 0; } }
@media (min-width: 1820px) { .rich-grid { --cols: 4; } }
@media (min-width: 2400px) { .rich-grid { --cols: 5; } }

.rich { position: relative; display: block; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--skeleton); }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb video { position: absolute; inset: 0; background: #000; object-fit: contain; }
.thumb .preview-bar { position: absolute; left: 0; bottom: 0; height: 4px; background: #f00; width: 0; z-index: 2; }
.rich:hover .thumb, .rich .thumb.previewing { border-radius: 0; transition: border-radius .2s .5s; }
.duration {
  position: absolute; right: 0; bottom: 0; margin: 8px; padding: 3px 4px; border-radius: 4px; z-index: 1;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; line-height: 12px; font-weight: 500; letter-spacing: .3px;
}
.thumb.previewing .duration { display: none; }
.rich-meta { display: flex; margin-top: 12px; position: relative; padding-right: 24px; }
.rich-meta .avatar { width: 36px; height: 36px; font-size: 15px; margin-right: 12px; }
.v-title {
  margin: 0 0 4px; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.v-sub { color: var(--text-2); font-size: 14px; line-height: 20px; }
.v-sub a:hover { color: var(--text); }
.v-sub .dot::before { content: "•"; margin: 0 4px; }
.more-btn {
  position: absolute; right: -12px; top: -6px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; opacity: 0;
}
.rich:hover .more-btn, .compact:hover .more-btn, .sr:hover .more-btn, .more-btn:focus { opacity: 1; }
.more-btn:hover { background: var(--hover); }
.more-btn .ms { font-size: 24px; }

/* ---------- Search results / list pages ---------- */
.list-page { max-width: 1096px; margin: 0 auto; padding: 16px 24px 40px; }
.list-page .chip-bar { padding: 12px 0; margin-bottom: 4px; position: static; }
.page-title { font-size: 36px; line-height: 50px; font-weight: 700; margin: 24px 0 24px; }
.sr { display: flex; margin-top: 16px; position: relative; }
.sr .thumb { flex: 0 0 auto; width: min(500px, 42%); min-width: 240px; margin-right: 16px; }
.sr-body { flex: 1; min-width: 0; padding-right: 32px; position: relative; }
.sr-title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr .v-sub { font-size: 12px; line-height: 18px; }
.sr-channel { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--text-2); font-size: 12px; line-height: 18px; }
.sr-channel .avatar { width: 24px; height: 24px; font-size: 11px; }
.sr-channel:hover { color: var(--text); }
.sr-snippet { color: var(--text-2); font-size: 12px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr .more-btn { right: -8px; top: -8px; }
.badge-new { display: inline-block; margin-top: 8px; padding: 1px 4px; border-radius: 2px; background: var(--pill); color: var(--text-2); font-size: 12px; line-height: 18px; font-weight: 500; }

/* ---------- Channel page ---------- */
.channel { max-width: 1284px; margin: 0 auto; padding: 0 24px; }
.banner { margin-top: 16px; aspect-ratio: 6.2 / 1; border-radius: 16px; }
.channel-head { display: flex; align-items: center; margin: 16px 0 4px; }
.channel-head .avatar { width: 160px; height: 160px; font-size: 64px; margin-right: 16px; }
.channel-name { font-size: 36px; line-height: 50px; font-weight: 700; margin: 0; }
.channel-meta { color: var(--text-2); font-size: 14px; line-height: 20px; margin-top: 4px; }
.channel-meta b { color: var(--text); font-weight: 500; }
.channel-desc { color: var(--text-2); margin: 6px 0 12px; display: flex; align-items: center; gap: 2px; }
.channel-desc b { color: var(--text); font-weight: 500; }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--divider); margin-top: 8px; }
.tab { height: 48px; display: flex; align-items: center; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; }
.tab:hover { color: var(--text); border-bottom-color: var(--text-3); }
.tab.active { color: var(--text); border-bottom-color: var(--text); }
.channel .chip-bar { position: static; padding: 16px 0 8px; }
.channel .rich-grid { padding: 16px 0 40px; --cols: 4; }
@media (max-width: 1100px) { .channel .rich-grid { --cols: 3; } }
@media (max-width: 800px) { .channel .rich-grid { --cols: 2; } .channel-head .avatar { width: 72px; height: 72px; font-size: 30px; } .channel-name { font-size: 24px; line-height: 32px; } }

/* ---------- Buttons ---------- */
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 18px;
  background: var(--pill); font-size: 14px; line-height: 36px; font-weight: 500; white-space: nowrap; flex-shrink: 0;
}
.pill-btn:hover { background: var(--pill-hover); }
.pill-btn.icon-left { padding-left: 12px; }
.pill-btn.round { width: 36px; padding: 0; justify-content: center; }
.sub-btn { background: var(--sub-bg); color: var(--sub-text); }
.sub-btn:hover { background: var(--sub-bg); opacity: .85; }
.sub-btn.subscribed { background: var(--pill); color: var(--text); padding: 0 12px 0 10px; gap: 4px; }
.sub-btn.subscribed:hover { background: var(--pill-hover); opacity: 1; }
.blue-btn { background: var(--blue-btn); color: var(--blue-btn-text); }
.blue-btn:hover { background: var(--blue-btn); opacity: .9; }
.blue-btn:disabled { background: var(--pill); color: var(--text-3); cursor: default; opacity: 1; }
.text-btn { height: 36px; padding: 0 16px; border-radius: 18px; font-weight: 500; }
.text-btn:hover { background: var(--hover); }
.text-btn.blue { color: var(--blue); }
.text-btn.blue:hover { background: rgba(6, 95, 212, .1); }

/* ---------- Watch page ---------- */
.watch {
  display: grid; grid-template-columns: minmax(0, 1fr) 402px; grid-template-areas: "player side" "below side";
  column-gap: 24px; padding: 24px 24px 0; max-width: 1754px; margin: 0 auto; align-items: start;
}
#player-area { grid-area: player; }
.below { grid-area: below; min-width: 0; }
.secondary { grid-area: side; min-width: 0; }
body.theater .watch { grid-template-areas: "player player" "below side"; max-width: none; padding-top: 0; }
body.theater #player-area { margin: 0 -24px 24px; background: #000; }
body.theater .ytp { border-radius: 0; aspect-ratio: auto; height: min(56.25vw, calc(100vh - 169px)); max-height: calc(100vh - 56px); }
@media (max-width: 1016px) {
  .watch, body.theater .watch { grid-template-columns: minmax(0, 1fr); grid-template-areas: "player" "below" "side"; }
  .secondary { margin-top: 24px; }
}

.w-title { font-size: 20px; line-height: 28px; font-weight: 700; margin: 12px 0 0; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.top-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 12px; flex-wrap: wrap; }
.owner { display: flex; align-items: center; min-width: 0; }
.owner .avatar { width: 40px; height: 40px; font-size: 17px; margin-right: 12px; }
.owner-text { min-width: 0; margin-right: 24px; }
.owner-name { font-size: 16px; line-height: 22px; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.owner-subs { color: var(--text-2); font-size: 12px; line-height: 18px; }
.owner .pill-btn + .pill-btn { margin-left: 8px; }
.actions { display: flex; gap: 8px; align-items: center; }
.seg { display: flex; height: 36px; border-radius: 18px; background: var(--pill); overflow: hidden; }
.seg button { display: flex; align-items: center; gap: 6px; padding: 0 16px 0 12px; font-weight: 500; position: relative; }
.seg button:hover { background: var(--pill); }
.seg button + button { padding: 0 14px 0 14px; }
.seg button + button::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--divider); }

.desc {
  margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--pill); font-size: 14px; line-height: 20px;
  word-break: break-word;
}
.desc.collapsed { cursor: pointer; }
.desc.collapsed:hover { background: var(--pill-hover); }
.desc-info { font-weight: 500; }
.desc-info span + span { margin-left: 8px; }
.desc-text { white-space: pre-wrap; }
.desc.collapsed .desc-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.desc-more { font-weight: 500; display: inline-block; margin-top: 4px; }
.desc-channel { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--divider); }
.desc-channel .avatar { width: 56px; height: 56px; font-size: 24px; }

.comments { margin: 24px 0 32px; }
.comments-head { display: flex; align-items: center; gap: 32px; margin-bottom: 24px; }
.comments-head h2 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 0; }
.sort-btn { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.c-box { display: flex; margin-bottom: 32px; }
.c-box .avatar { width: 40px; height: 40px; font-size: 17px; margin-right: 16px; }
.c-field { flex: 1; min-width: 0; }
.c-field textarea {
  width: 100%; resize: none; border: 0; outline: none; background: none; padding: 0 0 2px; min-height: 22px;
  border-bottom: 1px solid var(--divider); font-size: 14px; line-height: 20px; display: block; overflow: hidden;
}
.c-field textarea:focus { border-bottom: 2px solid var(--text); padding-bottom: 1px; }
.c-buttons { display: none; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.c-box.focused .c-buttons { display: flex; }
.comment { display: flex; margin-bottom: 16px; }
.comment > a .avatar { width: 40px; height: 40px; font-size: 17px; margin-right: 16px; }
.c-head { font-size: 13px; line-height: 18px; margin-bottom: 2px; }
.c-head a { font-weight: 500; }
.c-head span { color: var(--text-2); font-size: 12px; margin-left: 4px; }
.c-text { white-space: pre-wrap; word-break: break-word; }
.c-actions { display: flex; align-items: center; margin-top: 2px; margin-left: -8px; }
.c-actions .icon-btn { width: 32px; height: 32px; }
.c-actions .icon-btn .ms { font-size: 20px; }
.c-actions .icon-btn.on .ms { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.c-count { color: var(--text-2); font-size: 12px; margin: 0 8px 0 0; min-width: 0; }
.reply-btn { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12px; font-weight: 500; margin-left: 4px; }
.reply-btn:hover { background: var(--hover); }

.secondary .chip-bar { position: static; padding: 0 0 12px; gap: 8px; }
.compact { display: flex; margin-bottom: 8px; position: relative; }
.compact .thumb { width: 168px; height: 94px; flex-shrink: 0; border-radius: 8px; margin-right: 8px; aspect-ratio: auto; }
.compact .duration { margin: 4px; }
.compact-body { min-width: 0; padding-right: 24px; flex: 1; }
.compact .v-title { font-size: 14px; line-height: 20px; margin-bottom: 4px; }
.compact .v-sub { font-size: 12px; line-height: 18px; }
.compact .more-btn { right: -8px; top: -8px; }

/* ---------- Player ---------- */
.ytp {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden;
  color: #fff; user-select: none; font-family: "Roboto", Arial, sans-serif;
}
.ytp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.ytp.idle, .ytp.idle video { cursor: none; }
.ytp-gradient {
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, 0) 100%);
}
.ytp-gradient, .ytp-chrome { opacity: 0; transition: opacity .25s cubic-bezier(0, 0, .2, 1); }
.ytp:hover .ytp-gradient, .ytp:hover .ytp-chrome, .ytp.paused .ytp-gradient, .ytp.paused .ytp-chrome, .ytp.scrubbing .ytp-chrome { opacity: 1; }
.ytp.idle:not(.paused) .ytp-gradient, .ytp.idle:not(.paused) .ytp-chrome { opacity: 0; }

.ytp-progress { position: absolute; left: 12px; right: 12px; bottom: 47px; height: 5px; cursor: pointer; }
.ytp-progress::before { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 16px; }
.ytp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .2); transition: height .1s; }
.ytp-progress:hover .ytp-bar, .ytp.scrubbing .ytp-bar { height: 5px; }
.ytp-loaded, .ytp-played, .ytp-hoverfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.ytp-loaded { background: rgba(255, 255, 255, .4); }
.ytp-hoverfill { background: rgba(255, 255, 255, .5); display: none; }
.ytp-progress:hover .ytp-hoverfill { display: block; }
.ytp-played { background: #f00; z-index: 1; }
.ytp-scrubber {
  position: absolute; bottom: -4px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #f00;
  z-index: 2; transform: scale(0); transition: transform .1s;
}
.ytp:hover .ytp-scrubber, .ytp.scrubbing .ytp-scrubber { transform: scale(1); }
.ytp-tooltip {
  position: absolute; bottom: 62px; transform: translateX(-50%); padding: 5px 9px; border-radius: 4px;
  background: rgba(28, 28, 28, .9); font-size: 12px; font-weight: 500; line-height: 15px; display: none; white-space: nowrap;
}
.ytp-progress:hover ~ .ytp-tooltip, .ytp.scrubbing .ytp-tooltip { display: block; }

.ytp-controls { position: absolute; left: 12px; right: 12px; bottom: 0; height: 48px; display: flex; justify-content: space-between; }
.ytp-left, .ytp-right { display: flex; align-items: center; height: 48px; }
.ytp-btn { width: 48px; height: 48px; display: grid; place-items: center; opacity: .9; color: #fff; }
.ytp-btn:hover { opacity: 1; }
.ytp-btn .ms { font-size: 30px; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; text-shadow: 0 0 2px rgba(0, 0, 0, .5); }
.ytp-btn.big .ms { font-size: 38px; }
.ytp-btn.thin .ms { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; font-size: 28px; }
.ytp-volume { display: flex; align-items: center; }
.ytp-volume input {
  -webkit-appearance: none; appearance: none; width: 0; height: 3px; background: linear-gradient(to right, #fff var(--v, 100%), rgba(255, 255, 255, .2) var(--v, 100%));
  outline: none; transition: width .2s, margin .2s, opacity .2s; margin: 0; cursor: pointer; opacity: 0;
}
.ytp-volume:hover input, .ytp-volume input:focus { width: 52px; margin-right: 8px; opacity: 1; }
.ytp-volume input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.ytp-volume input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
.ytp-time { font-size: 13px; line-height: 48px; padding: 0 5px; color: #ddd; text-shadow: 0 0 2px rgba(0, 0, 0, .5); white-space: nowrap; }
.ytp-time .cur { color: #fff; }
.ytp-chapter { font-size: 13px; color: #ddd; margin-left: 4px; display: flex; align-items: center; }

.ytp-autoplay { width: 48px; height: 48px; display: grid; place-items: center; }
.ytp-autoplay .track { position: relative; width: 36px; height: 14px; border-radius: 14px; background: rgba(255, 255, 255, .3); transition: background .2s; }
.ytp-autoplay .knob {
  position: absolute; top: -3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #bdbdbd;
  display: grid; place-items: center; transition: transform .2s, background .2s; box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.ytp-autoplay .knob .ms { font-size: 14px; color: #0f0f0f; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.ytp-autoplay.on .track { background: rgba(255, 255, 255, .5); }
.ytp-autoplay.on .knob { transform: translateX(16px); background: #fff; }
.ytp-hd { position: absolute; top: 9px; right: 7px; background: #f00; color: #fff; font-size: 7.5px; font-weight: 700; line-height: 9px; padding: 0 1px; border-radius: 1px; font-family: Arial, sans-serif; }

.ytp-flash {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(0, 0, 0, .5); display: grid; place-items: center; opacity: 0; pointer-events: none;
}
.ytp-flash .ms { font-size: 36px; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.ytp-flash.go { animation: ytp-flash .5s cubic-bezier(0, 0, .2, 1); }
@keyframes ytp-flash { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2); } }

.ytp-endscreen {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .75); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
}
.ytp.ended .ytp-endscreen { display: flex; }
.ytp-endscreen .label { color: #aaa; font-size: 14px; }
.ytp-endscreen .next-title { font-size: 20px; line-height: 28px; font-weight: 500; max-width: 70%; text-align: center; }
.ytp-endscreen .countdown { position: relative; width: 64px; height: 64px; }
.ytp-endscreen .countdown svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.ytp-endscreen .countdown .ms { position: absolute; inset: 0; display: grid; place-items: center; width: 64px; font-size: 40px; font-variation-settings: "FILL" 1; }
.ytp-endscreen .cancel { color: #fff; font-weight: 500; padding: 8px 16px; border-radius: 18px; }
.ytp-endscreen .cancel:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Popup menu ---------- */
.popup {
  position: fixed; z-index: 2200; background: var(--menu-bg); border-radius: 12px; box-shadow: var(--menu-shadow);
  padding: 8px 0; min-width: 220px; max-width: 320px; font-size: 14px; line-height: 20px;
}
:root[data-theme="dark"] .popup, :root:not([data-theme="light"]) .popup { border: 0; }
.menu-item { display: flex; align-items: center; gap: 16px; height: 36px; padding: 0 16px 0 16px; width: 100%; text-align: left; white-space: nowrap; }
.menu-item:hover { background: var(--hover); }
.menu-item .chev { margin-left: auto; color: var(--text); }
.menu-sep { height: 1px; background: var(--divider); margin: 8px 0; }
.acct-head { display: flex; gap: 16px; padding: 8px 16px 8px; }
.acct-head .avatar { width: 40px; height: 40px; font-size: 17px; }
.acct-name { font-size: 16px; line-height: 22px; }
.acct-handle { font-size: 14px; line-height: 20px; }
.acct-link { color: var(--blue); display: inline-block; margin-top: 8px; }
.notif-empty { padding: 48px 32px; text-align: center; color: var(--text-2); }
.notif-empty .ms { font-size: 96px; color: var(--text-3); width: auto; margin-bottom: 16px; font-variation-settings: "FILL" 0, "wght" 200; }
.notif-head { padding: 8px 16px 12px; font-size: 16px; line-height: 22px; border-bottom: 1px solid var(--divider); margin-bottom: 8px; display: flex; justify-content: space-between; }

/* ---------- Upload dialog (Studio-style) ---------- */
.dlg-backdrop { position: fixed; inset: 0; z-index: 2300; background: rgba(0, 0, 0, .7); display: grid; place-items: center; padding: 16px; }
.dlg {
  width: min(960px, 100%); height: min(800px, 100%); background: var(--dialog-bg); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 24px rgba(0, 0, 0, .3);
}
.dlg-head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 16px 0 24px; border-bottom: 1px solid var(--divider); flex-shrink: 0; }
.dlg-head h1 { font-size: 24px; line-height: 32px; font-weight: 500; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlg-head .head-actions { display: flex; gap: 4px; }
.dlg-body { flex: 1; overflow-y: auto; }
.drop-area { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.drop-area .circle { width: 136px; height: 136px; border-radius: 50%; background: var(--pill); display: grid; place-items: center; margin-bottom: 24px; transition: transform .2s; }
.drop-area.over .circle { transform: scale(1.1); }
.drop-area .circle .ms { font-size: 64px; width: auto; color: var(--text-3); font-variation-settings: "FILL" 0, "wght" 300; }
.drop-area h2 { font-size: 15px; line-height: 24px; font-weight: 400; margin: 0; }
.drop-area p { font-size: 13px; line-height: 20px; color: var(--text-2); margin: 4px 0 28px; }
.dlg-fine { padding: 24px; text-align: center; font-size: 12px; line-height: 18px; color: var(--text-2); flex-shrink: 0; }
.dlg-fine a { color: var(--blue); }

.stepper { display: flex; align-items: flex-start; justify-content: center; gap: 0; padding: 16px 24px 8px; flex-shrink: 0; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-2); width: 110px; }
.step .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text-3); background: var(--dialog-bg); position: relative; z-index: 1; margin-top: 6px; }
.step.active { color: var(--text); }
.step.active .dot { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 4px rgba(62, 166, 255, .25); }
.step-line { flex: 0 0 60px; height: 2px; background: var(--text-3); margin: 35px -40px 0; }

.details { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; padding: 8px 24px 24px 24px; max-width: 920px; margin: 0 auto; }
@media (max-width: 860px) { .details { grid-template-columns: 1fr; } }
.details h2 { font-size: 24px; line-height: 32px; font-weight: 500; margin: 16px 0 16px; display: flex; justify-content: space-between; align-items: center; }
.details h2 .reuse { font-size: 14px; font-weight: 500; height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--divider); }
.field {
  position: relative; border: 1px solid var(--field-border); border-radius: 8px; padding: 8px 12px 26px;
  margin-bottom: 24px; transition: border-color .1s;
}
.field:hover { border-color: var(--text-2); }
.field:focus-within { border-color: var(--blue); border-width: 2px; padding: 7px 11px 25px; }
.field label { display: block; font-size: 12px; line-height: 16px; color: var(--text-2); margin-bottom: 4px; }
.field input, .field textarea { width: 100%; border: 0; outline: none; background: none; font-size: 15px; line-height: 24px; resize: none; padding: 0; }
.field textarea { min-height: 24px; field-sizing: content; }
.field #u-desc { min-height: 120px; }
.field .count { position: absolute; right: 12px; bottom: 6px; font-size: 12px; color: var(--text-2); }
.sec-title { font-size: 15px; line-height: 24px; font-weight: 500; margin: 0; }
.sec-help { font-size: 13px; line-height: 20px; color: var(--text-2); margin: 0 0 12px; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.thumbs .t-upload { width: 138px; aspect-ratio: 16 / 9; border: 1px dashed var(--field-border); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-2); font-size: 12px; gap: 4px; }
.thumbs img { width: 138px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; cursor: pointer; outline: 2px solid transparent; outline-offset: 0; opacity: .75; }
.thumbs img:hover { opacity: 1; }
.thumbs img.on { outline-color: var(--text); opacity: 1; }
.radio-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: 15px; }
.radio-row input { width: 20px; height: 20px; accent-color: var(--blue); margin: 0; }
.preview { background: var(--pill); border-radius: 8px; overflow: hidden; margin-top: 64px; }
.preview video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; }
.preview .pv-row { padding: 12px 16px 0; }
.preview .pv-row:last-child { padding-bottom: 16px; }
.preview .pv-label { font-size: 12px; line-height: 16px; color: var(--text-2); }
.preview .pv-value { font-size: 15px; line-height: 24px; word-break: break-all; }
.preview .pv-value a { color: var(--blue); }
.dlg-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 24px; border-top: 1px solid var(--divider); flex-shrink: 0; }
.up-status { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 13px; min-width: 0; }
.up-status .ms { color: var(--text-2); }
.up-status .ok { color: #2ba640; font-variation-settings: "FILL" 1; }
.up-bar { width: 120px; height: 4px; background: var(--pill); border-radius: 2px; overflow: hidden; }
.up-bar div { height: 100%; width: 0; background: var(--blue); transition: width .15s; }

/* ---------- Misc ---------- */
.empty { text-align: center; padding: 96px 24px; color: var(--text-2); }
.empty .ms { font-size: 120px; width: auto; color: var(--text-3); font-variation-settings: "FILL" 0, "wght" 200; }
.empty h2 { color: var(--text); font-size: 24px; line-height: 32px; font-weight: 400; margin: 16px 0 8px; }
.empty p { margin: 0 0 24px; }
.empty .pill-btn { display: inline-flex; }

.toast {
  position: fixed; left: 12px; bottom: 12px; z-index: 2400; padding: 14px 16px; border-radius: 8px; min-width: 288px;
  background: var(--toast-bg); color: var(--toast-text); font-size: 14px; line-height: 20px;
  opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }

/* ---------- Responsive masthead ---------- */
@media (max-width: 1000px) {
  .mh-center { margin: 0 16px; }
  .create-label { display: none; }
  .create-btn { width: 40px; padding: 0; justify-content: center; background: none; }
  .create-btn:hover { background: var(--hover); }
}
@media (max-width: 656px) {
  #masthead { padding: 0 8px; }
  .mh-center { display: none; }
  .mobile-search { display: grid; }
  body.searching .mh-start, body.searching .mh-end { display: none; }
  body.searching .mh-center { display: flex; flex: 1; margin: 0 8px; }
  body.searching .mic-btn { display: none; }
  .watch { padding: 0; }
  .ytp { border-radius: 0; }
  .below, .secondary { padding: 0 12px; }
  .top-row { flex-direction: column; align-items: flex-start; }
  .actions { overflow-x: auto; max-width: 100%; }
  .sr { flex-direction: column; }
  .sr .thumb { width: 100%; margin: 0 0 12px; min-width: 0; }
  .list-page { padding: 8px 12px; }
  .page-title { font-size: 24px; line-height: 32px; }
  .dlg-backdrop { padding: 0; }
  .dlg { border-radius: 0; }
}

/* =================================================================
   v2: accounts, playlists, replies, Shorts, Studio
   ================================================================= */
img.avatar { object-fit: cover; background: var(--skeleton); }
.avatar.xl { width: 72px !important; height: 72px !important; font-size: 30px !important; }
.avatar.xxl { width: 160px !important; height: 160px !important; font-size: 64px !important; }
.blue-link { color: var(--blue); }
.dot::before { content: "•"; margin: 0 4px; }
a.menu-item { text-decoration: none; }
.menu-item.sel { background: var(--pill); }

.spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--pill); border-top-color: var(--text-2); animation: spin 1s linear infinite; margin: 24px auto; }
.page-spinner { padding: 120px 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.signin-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px 0 11px; border-radius: 18px;
  border: 1px solid var(--divider); color: var(--blue); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.signin-btn:hover { background: rgba(62, 166, 255, .1); border-color: transparent; }
.guide-signin { padding: 16px 12px 16px 32px !important; font-size: 14px; }
.guide-signin p { margin: 0 0 12px; }
.gi-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); margin-left: auto; flex-shrink: 0; }

.pill-btn.outline { background: none; border: 1px solid var(--divider); }
.pill-btn.outline:hover { background: var(--hover); border-color: transparent; }
.pill-btn.white { background: #fff; color: #0f0f0f; }
.pill-btn.white:hover { background: #e5e5e5; }
.pill-btn.glass { background: rgba(255, 255, 255, .2); color: #fff; }
.pill-btn.glass:hover { background: rgba(255, 255, 255, .3); }
.text-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.text-btn.danger { color: #cc0000; }
.text-btn.danger:hover { background: rgba(204, 0, 0, .08); }

/* Auth prompt popup */
.auth-prompt { padding: 16px 16px 8px 24px; }
.ap-title { font-size: 16px; line-height: 22px; margin-bottom: 8px; }
.ap-text { color: var(--text-2); margin-bottom: 16px; }
.auth-prompt .text-btn { margin-left: -16px; }

/* Small dialogs */
.dlg.dlg-small { width: min(420px, 100%); height: auto; max-height: 90vh; }
.dlg.dlg-auth { width: min(448px, 100%); height: auto; max-height: 94vh; overflow-y: auto; }
.small-body { padding: 16px 24px 24px; overflow-y: auto; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.field select { width: 100%; border: 0; outline: none; background: none; font: inherit; font-size: 15px; color: var(--text); padding: 0; }
.field select option { background: var(--dialog-bg); }
.field.small { padding-bottom: 8px; margin-bottom: 16px; }
.field.small:focus-within { padding-bottom: 7px; }
.handle-input { display: flex; align-items: center; gap: 2px; font-size: 15px; color: var(--text-2); }
.handle-input input { color: var(--text); }
.field input { min-width: 0; }
.field .tall, .field textarea.tall { min-height: 120px; }

.auth { padding: 40px 40px 32px; }
.auth-logo { margin-bottom: 16px; }
.auth-logo svg { width: 93px; height: 20px; overflow: visible; display: block; }
.auth h1 { font-size: 24px; line-height: 32px; font-weight: 400; margin: 0 0 8px; }
.auth-sub { color: var(--text-2); margin: 0 0 28px; font-size: 15px; }
.auth .field { margin-bottom: 20px; padding-bottom: 8px; }
.auth .field:focus-within { padding-bottom: 7px; }
.auth-error { color: #e53935; margin: -4px 0 12px; }
.auth-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.auth-actions .text-btn { margin-left: -16px; }

/* Save to playlist */
.save-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 24px; font-size: 16px; }
.save-list { max-height: 300px; overflow-y: auto; padding: 4px 0 8px; }
.save-row { display: flex; align-items: center; gap: 16px; padding: 8px 24px; cursor: pointer; }
.save-row:hover { background: var(--hover); }
.save-row input { width: 18px; height: 18px; accent-color: var(--text); margin: 0; }
.save-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-row .ms { font-size: 18px; color: var(--text-2); }
.save-new { border-top: 1px solid var(--divider); padding: 8px 0; }
.save-create { display: flex; align-items: center; gap: 16px; padding: 8px 24px; width: 100%; height: 44px; }
.save-create:hover { background: var(--hover); }
.save-form { padding: 8px 24px 8px; }

/* Notifications */
.notif-list { max-height: min(600px, 70vh); overflow-y: auto; }
.notif { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 16px 8px; }
.notif:hover { background: var(--hover); }
.notif .avatar { width: 48px; height: 48px; font-size: 20px; }
.notif-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); margin-top: 22px; flex-shrink: 0; }
.notif-dot.read { background: transparent; }
.notif-text { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.notif-text .v-sub { font-size: 12px; margin-top: 4px; }
.notif img { width: 86px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.ne-title { font-size: 16px; color: var(--text); margin-bottom: 4px; }

/* Shorts shelf & cards */
.grid-shelf { grid-column: 1 / -1; border-top: 4px solid var(--divider); border-bottom: 4px solid var(--divider); padding: 24px 0 16px; margin: 0 -8px; }
@media (max-width: 600px) { .grid-shelf { padding-left: 12px; padding-right: 12px; } }
.shelf-title { display: flex; align-items: center; gap: 8px; font-size: 20px; line-height: 28px; font-weight: 700; margin: 0 0 16px; padding: 0 8px; }
.shorts-logo { width: 24px; height: 24px; border-radius: 6px; background: #ff0033; color: #fff; display: grid; place-items: center; }
.shorts-logo .ms { font-size: 18px; }
.shorts-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px 8px; padding: 0 8px; }
.shorts-row.collapsed { grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; }
.shorts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px 8px; padding: 16px 0 40px; }
.short-card { position: relative; min-width: 0; }
.short-thumb { display: block; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--skeleton); }
.short-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.short-meta { position: relative; padding: 12px 28px 0 0; }
.short-meta .v-title { font-size: 16px; line-height: 22px; }
.short-meta .more-btn { right: -12px; top: 4px; }
.short-card:hover .more-btn { opacity: 1; }
.shelf-more { text-align: center; padding: 8px 0 0; position: relative; }
.shelf-more .pill-btn { width: min(340px, 90%); justify-content: center; }
.sr-shelf { margin: 24px 0; padding: 16px 0 8px; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.sr-shelf .shelf-title, .sr-shelf .shorts-row { padding: 0; }
.duration .ms { font-size: 12px; vertical-align: -2px; margin-right: 2px; }

/* Playlist cards */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 32px 16px; padding: 16px 0 40px; }
.you-row .pl-card { width: 220px; }
.pl-thumb { position: relative; display: block; aspect-ratio: 16 / 9; margin-top: 8px; }
.pl-thumb img, .pl-empty { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; background: var(--skeleton); z-index: 1; }
.pl-stack { position: absolute; left: 12px; right: 12px; top: -8px; height: 20px; border-radius: 12px 12px 0 0; background: var(--pill-hover); }
.pl-stack::before { content: ""; position: absolute; left: 8px; right: 8px; top: -4px; height: 8px; border-radius: 8px 8px 0 0; background: var(--pill); }
.pl-count {
  position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 2px;
  padding: 3px 4px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; line-height: 14px; font-weight: 500;
}
.pl-count .ms { font-size: 16px; }
.pl-card .v-title { margin-top: 12px; font-size: 14px; line-height: 20px; }
.pl-card .v-sub { font-size: 12px; line-height: 18px; }
.view-full { display: block; margin-top: 4px; }

/* Playlist page */
.playlist-page { display: flex; gap: 24px; padding: 24px; max-width: 1400px; margin: 0 auto; align-items: flex-start; }
.pl-hero { position: sticky; top: 80px; width: 360px; flex-shrink: 0; border-radius: 16px; overflow: hidden; color: #fff; min-height: calc(100vh - 104px); }
.pl-hero-bg { position: absolute; inset: 0; background: var(--cover, linear-gradient(#555, #222)) center / cover; filter: blur(48px) saturate(1.4); transform: scale(1.4); }
.pl-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .6) 60%, rgba(0, 0, 0, .8)); }
.pl-hero-inner { position: relative; padding: 24px; }
.pl-hero-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.pl-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-play-all { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 4px; background: rgba(0, 0, 0, .6); font-weight: 500; font-size: 12px; letter-spacing: .5px; }
.pl-hero-thumb:hover .pl-play-all { display: flex; }
.pl-hero h1 { font-size: 28px; line-height: 38px; font-weight: 700; margin: 24px 0 12px; word-break: break-word; }
.pl-owner { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pl-owner .avatar { width: 24px; height: 24px; font-size: 11px; }
.pl-stats { display: flex; align-items: center; flex-wrap: wrap; font-size: 12px; color: rgba(255, 255, 255, .7); margin: 8px 0 16px; }
.pl-stats .ms { font-size: 14px; margin-right: 2px; }
.pl-hero-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.hero-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; color: #fff; }
.hero-icon:hover { background: rgba(255, 255, 255, .2); }
.pl-hero-buttons { display: flex; gap: 8px; }
.pl-hero-buttons .pill-btn { flex: 1; justify-content: center; }
.pl-items { flex: 1; min-width: 0; }
.pl-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 40px 8px 0; border-radius: 12px; }
.pl-item:hover { background: var(--hover); }
.pl-num { width: 24px; text-align: center; color: var(--text-2); flex-shrink: 0; }
.pl-item .thumb { width: 160px; flex-shrink: 0; border-radius: 8px; }
.pl-item-body { min-width: 0; flex: 1; }
.pl-item .v-title { font-size: 16px; line-height: 22px; }
.pl-item .v-sub { font-size: 12px; line-height: 18px; }
.pl-item .more-btn { top: 50%; right: 0; margin-top: -20px; }
.pl-item:hover .more-btn { opacity: 1; }
@media (max-width: 1000px) {
  .playlist-page { flex-direction: column; padding: 0; }
  .pl-hero { position: relative; top: 0; width: 100%; min-height: 0; border-radius: 0; }
  .pl-items { width: 100%; padding: 0 12px; }
}

/* Watch page extras */
.draft-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--pill); color: var(--text-2); }
.desc-links { display: flex; gap: 8px; margin-top: 16px; }
.desc-more { display: inline-block; margin-top: 4px; font-weight: 500; }
.pl-panel { border: 1px solid var(--divider); border-radius: 12px; margin-bottom: 24px; overflow: hidden; }
.pl-panel-head { padding: 12px 16px; background: var(--pill); }
.pl-panel-title { font-size: 20px; line-height: 28px; font-weight: 700; }
.pl-panel-list { max-height: 400px; overflow-y: auto; padding: 8px 0; }
.pl-panel .compact { margin: 0; padding: 4px 8px 4px 0; align-items: center; }
.pl-panel .compact.active { background: rgba(255, 0, 51, .08); }
.pl-panel .compact .thumb { width: 100px; height: 56px; }
.pl-index { width: 24px; text-align: center; font-size: 12px; color: var(--text-2); flex-shrink: 0; }
.pl-index .ms { font-size: 14px; }
@media (max-width: 1200px) { .hide-narrow { display: none !important; } }

/* Comments extras */
.c-main { flex: 1; min-width: 0; }
.comment { position: relative; }
.c-head a.creator { background: var(--pill-hover); padding: 0 6px; border-radius: 12px; }
.c-replies { margin-top: 8px; }
.c-replies .comment > a .avatar { width: 24px; height: 24px; font-size: 11px; }
.replies-toggle { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 10px; border-radius: 18px; color: var(--blue); font-weight: 500; margin-left: -10px; }
.replies-toggle:hover { background: rgba(62, 166, 255, .1); }
.c-reply-box:not(:empty) { margin-top: 8px; }
.c-box.small { margin-bottom: 8px; }
.c-box.small .avatar { width: 24px; height: 24px; font-size: 11px; margin-right: 12px; }
.c-more { top: -4px; right: -8px; }
.comment:hover > .c-more { opacity: 1; }
.c-none { text-align: center; padding: 48px 0; font-size: 18px; color: var(--text); }
.c-none span { font-size: 14px; color: var(--text-2); }
.comment .avatar { display: grid; }

/* Channel page extras */
.channel-desc { all: unset; cursor: pointer; display: block; color: var(--text-2); margin: 6px 0 12px; max-width: 600px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-desc b { color: var(--text); font-weight: 500; margin-left: 4px; }
.channel-btns { display: flex; gap: 8px; }
.ch-sec { padding: 24px 0 0; border-bottom: 1px solid var(--divider); }
.ch-sec:last-child { border-bottom: 0; }
.ch-sec-title { font-size: 20px; line-height: 28px; font-weight: 700; margin: 0; display: flex; align-items: center; }
.ch-sec-title a { display: inline-flex; align-items: center; }
.ch-sec .shelf-title, .ch-sec .shorts-row { padding: 0; }
.chan-row { display: flex; align-items: center; gap: 24px; padding: 16px 0; }
.chan-row .avatar.xl { width: 136px !important; height: 136px !important; font-size: 56px !important; }
.chan-info { flex: 1; min-width: 0; }
.chan-info h3 { margin: 0 0 4px; font-size: 18px; font-weight: 400; }
.about h3 { font-size: 20px; margin: 24px 0 12px; }
.about-desc { white-space: pre-wrap; margin: 0; }
.about-row { display: flex; align-items: center; gap: 16px; padding: 8px 0; }

/* You page */
.you { max-width: 1284px; margin: 0 auto; padding: 24px; }
.you-top { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.you-top .avatar.xxl { width: 120px !important; height: 120px !important; font-size: 48px !important; }
.you-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.you-sec { margin-bottom: 24px; }
.you-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.you-head h2 { font-size: 20px; margin: 0; }
.you-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.you-row > .rich { width: 210px; flex-shrink: 0; }
.you-row .rich .v-title { font-size: 14px; line-height: 20px; }
.you-row .rich-meta .avatar { display: none; }
.you-row .rich .v-sub { font-size: 12px; line-height: 18px; }

/* History */
.history-page { display: flex; justify-content: center; gap: 24px; padding: 0 24px; }
.history-list { flex: 1; max-width: 860px; margin: 0; }
.history-side { width: 340px; padding-top: 110px; position: sticky; top: 56px; align-self: flex-start; }
.h-search { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--divider); padding: 8px 0; margin-bottom: 24px; }
.h-search input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; }
.h-search:focus-within { border-bottom: 2px solid var(--text); padding-bottom: 7px; }
.h-act { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 16px 0 12px; border-radius: 18px; font-weight: 500; }
.h-act:hover { background: var(--hover); }
.remove-btn { opacity: 0; }
.sr:hover .remove-btn { opacity: 1; }
@media (max-width: 1100px) { .history-side { display: none; } }

.feed-head { display: flex; justify-content: space-between; align-items: center; padding: 24px 24px 0; }
.feed-head h2 { font-size: 20px; line-height: 28px; margin: 0; }
.page-title.with-icon { display: flex; align-items: center; gap: 16px; }
.title-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.title-icon.trending { background: linear-gradient(135deg, #ff4e45, #ff0033); }
.title-icon .ms { font-size: 36px; }
.list-page.wide { max-width: 1284px; }

/* Studio */
.studio { max-width: 1284px; margin: 0 auto; padding: 0 24px 48px; }
.studio-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.studio-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.studio-table th { text-align: left; font-weight: 500; color: var(--text-2); padding: 12px 12px; border-bottom: 1px solid var(--divider); border-top: 1px solid var(--divider); white-space: nowrap; }
.studio-table td { padding: 12px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.studio-table tr:hover td { background: var(--hover); }
.studio-table .num { text-align: right; }
.st-video { display: flex; gap: 16px; align-items: center; min-width: 320px; }
.st-thumb { position: relative; width: 120px; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: #000; }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; }
.st-thumb.portrait img { object-fit: contain; }
.st-thumb .duration { margin: 4px; font-size: 11px; }
.st-title { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.st-desc { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.st-vis { display: inline-flex; align-items: center; gap: 6px; }
.st-vis .ms { font-size: 18px; color: var(--text-2); }
@media (max-width: 800px) { .studio-table th:nth-child(n+3), .studio-table td:nth-child(n+3):not(:last-child) { display: none; } }

.cz-sec { padding: 24px 0 0; max-width: 820px; }
.cz-sec h3 { font-size: 15px; font-weight: 500; margin: 0 0 4px; }
.cz-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.cz-row > div:last-child { flex: 1; min-width: 240px; }
.cz-banner { width: 290px; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--pill); overflow: hidden; display: grid; place-items: center; }
.cz-banner img { width: 100%; height: 100%; object-fit: cover; }
.cz-avatar { width: 290px; height: 160px; border-radius: 8px; background: var(--pill); display: grid; place-items: center; }
.cz-avatar .avatar.xl { width: 140px !important; height: 140px !important; font-size: 56px !important; }
.customize .field { max-width: 820px; }
.customize .tabs { margin-bottom: 8px; }

/* Upload/edit dialog extras */
.dlg-upload .dlg-body { overflow-y: auto; }
.preview-col { padding-top: 64px; }
.preview { margin-top: 0; }
.preview.portrait video { aspect-ratio: 9 / 16; max-height: 420px; }
.thumbs.portrait img { width: 77px; aspect-ratio: 9 / 16; }
.thumbs .t-upload { cursor: pointer; }
.radio-row { align-items: flex-start; }
.radio-row b { font-weight: 500; }
.radio-row .v-sub { font-size: 13px; }
.key-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--divider); }
kbd { font-family: inherit; font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--pill); }

/* Player speed menu */
.ytp-settings {
  position: absolute; right: 12px; bottom: 60px; width: 220px; padding: 8px 0; border-radius: 12px;
  background: rgba(28, 28, 28, .9); color: #eee; font-size: 13px; z-index: 5;
}
.ytp-menu-title { padding: 8px 16px; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, .2); margin-bottom: 4px; }
.ytp-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 16px; color: #eee; text-align: left; }
.ytp-menu-item:hover { background: rgba(255, 255, 255, .1); }
.ytp-menu-item .ms { font-size: 20px; }

/* ---------- Shorts ---------- */
body.shorts-mode main { height: 100vh; overflow: hidden; }
.shorts-page { position: relative; height: calc(100vh - 56px); display: flex; justify-content: center; }
.shorts-feed {
  height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; flex: 0 1 auto;
  padding: 0 24px; transition: transform .2s;
}
.shorts-feed::-webkit-scrollbar { display: none; }
.short { height: calc(100vh - 56px); scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding: 16px 0; }
.s-video { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: calc(100vw - 120px); border-radius: 12px; overflow: hidden; background: #000; }
.s-video video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.s-top { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 8px; padding: 16px; background: linear-gradient(rgba(0, 0, 0, .4), transparent); opacity: 0; transition: opacity .2s; }
.s-video:hover .s-top, .short.is-paused .s-top { opacity: 1; }
.s-ctl { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .3); backdrop-filter: blur(8px); }
.s-ctl:hover { background: rgba(0, 0, 0, .5); }
.s-ctl .ms { font-size: 26px; }
.s-ctl[data-s=play] .ms:last-child, .short.is-paused .s-ctl[data-s=play] .ms:first-child { display: none; }
.short.is-paused .s-ctl[data-s=play] .ms:last-child { display: block; }
.s-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 20px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.s-bottom a, .s-bottom button { pointer-events: auto; }
.s-channel { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.s-channel .avatar { width: 32px; height: 32px; font-size: 14px; }
.s-handle { font-size: 14px; font-weight: 500; }
.s-sub .sub-btn { height: 32px; padding: 0 12px; font-size: 13px; background: #fff; color: #0f0f0f; margin-left: 4px; }
.s-sub .sub-btn.subscribed { background: rgba(255, 255, 255, .2); color: #fff; }
.s-sub .sub-btn.subscribed .ms { display: none; }
.s-title { font-size: 15px; line-height: 21px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .3); }
.s-progress div { height: 100%; width: 0; background: #ff0033; }
.s-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-bottom: 4px; width: 48px; }
.s-act { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.s-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--pill); display: grid; place-items: center; transition: background .1s; }
.s-act:hover .s-circle { background: var(--pill-hover); }
.s-label { font-size: 14px; line-height: 18px; }
.ms.flip { transform: scaleX(-1); }
.s-chan-thumb .avatar { width: 40px; height: 40px; border-radius: 8px; font-size: 16px; }
.shorts-nav { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; }
.nav-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--pill); display: grid; place-items: center; }
.nav-btn:hover { background: var(--pill-hover); }
.nav-btn .ms { font-size: 26px; }
.shorts-panel {
  position: absolute; right: 100px; top: 16px; bottom: 16px; width: min(480px, 40vw); border-radius: 12px;
  background: var(--bg); border: 1px solid var(--divider); display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 4px 32px rgba(0, 0, 0, .15);
}
.sp-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 24px; border-bottom: 1px solid var(--divider); }
.sp-head h2 { font-size: 20px; margin: 0; }
.sp-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.sp-body .comments-head { display: none; }
.shorts-page.with-panel .shorts-feed { transform: translateX(calc(-1 * min(260px, 20vw))); }
@media (max-width: 1000px) {
  .shorts-panel { right: 0; left: 0; top: auto; height: 70%; width: auto; border-radius: 16px 16px 0 0; }
  .shorts-page.with-panel .shorts-feed { transform: none; }
  .shorts-nav { display: none; }
}
@media (max-width: 656px) {
  .shorts-feed { padding: 0; }
  .short { padding: 0; gap: 0; position: relative; }
  .s-video { border-radius: 0; max-width: 100vw; width: 100vw; aspect-ratio: auto; }
  .s-actions { position: absolute; right: 8px; bottom: 80px; }
  .s-circle { background: rgba(0, 0, 0, .3); color: #fff; }
  .s-label { color: #fff; text-shadow: 0 0 2px #000; }
  .s-bottom { padding-right: 72px; }
}