/* Dark YouTube look: same sizes, colors and spacing as youtube.com (desktop, dark theme). */
:root {
  --bg: #0f0f0f; --raised: #212121; --menu: #282828; --text: #f1f1f1; --text2: #aaaaaa; --line: rgba(255,255,255,.2);
  --chip: rgba(255,255,255,.1); --chip-hover: rgba(255,255,255,.2); --hover: rgba(255,255,255,.1); --press: rgba(255,255,255,.2);
  --red: #ff0000; --blue: #3ea6ff; --mast: 56px; --guide: 240px; --mini: 72px; --cols: 3; --scols: 5;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: "Roboto", "Arial", sans-serif; font-size: 14px; }
body { overflow-y: scroll; }
body.lock { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
img { display: block; }
svg { display: block; fill: currentColor; }
[hidden] { display: none !important; }
.ic { width: 24px; height: 24px; flex: none; }
.clamp1, .clamp2, .clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp1 { -webkit-line-clamp: 1; } .clamp2 { -webkit-line-clamp: 2; } .clamp3 { -webkit-line-clamp: 3; }

/* ---------- top loading bar ---------- */
#bar { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--red); z-index: 3000; opacity: 0; transition: width .3s ease, opacity .3s; }
#bar.on { opacity: 1; width: 70%; transition: width 8s cubic-bezier(.1,.6,.3,1); }
#bar.done { opacity: 0; width: 100%; transition: width .2s, opacity .3s .2s; }

/* ---------- masthead ---------- */
#mast { position: fixed; top: 0; left: 0; right: 0; height: var(--mast); z-index: 2000; background: var(--bg); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.m-start, .m-end { display: flex; align-items: center; flex: none; }
.m-start { gap: 0; }
.m-end { gap: 8px; min-width: 40px; justify-content: flex-end; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.icon-btn:hover { background: var(--hover); }
.icon-btn:active { background: var(--press); }
.logo { display: flex; align-items: center; height: 40px; padding: 0 14px 0 16px; position: relative; }
.logo svg { height: 20px; width: auto; }
.logo sup { position: absolute; top: 4px; right: 0; font-size: 10px; color: var(--text2); }
.m-center { flex: 0 1 732px; display: flex; align-items: center; margin: 0 40px; min-width: 0; }
.sbox { flex: 1; display: flex; position: relative; min-width: 0; }
.sinput { flex: 1; display: flex; align-items: center; height: 40px; border: 1px solid #303030; border-right: 0; border-radius: 40px 0 0 40px; background: #121212; padding: 0 4px 0 16px; min-width: 0; margin-left: 32px; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.sbox.focus .sinput { border-color: #1c62b9; margin-left: 0; padding-left: 4px; }
.sinput .lead { display: none; width: 40px; justify-content: center; color: var(--text); }
.sbox.focus .sinput .lead { display: flex; }
.sinput .lead .ic { width: 20px; height: 20px; }
#q { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; line-height: 24px; color: var(--text); }
#q::placeholder { color: #888; }
#q::-webkit-search-cancel-button { display: none; }
.sclear { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.sclear:hover { background: var(--hover); }
.sbtn { width: 64px; height: 40px; border: 1px solid #303030; background: #222; border-radius: 0 40px 40px 0; display: grid; place-items: center; }
.sbtn:hover { background: #2a2a2a; }
.mic { margin-left: 12px; background: #181818; background: rgba(255,255,255,.08); }
.mic:hover { background: rgba(255,255,255,.16); }
.sugg { position: absolute; top: 44px; left: 0; right: 64px; background: var(--raised); border-radius: 12px; padding: 16px 0; box-shadow: 0 4px 32px rgba(0,0,0,.5); z-index: 10; }
.sugg button { display: flex; align-items: center; width: 100%; height: 32px; padding: 0 24px 0 16px; text-align: left; font-size: 16px; font-weight: 500; gap: 16px; }
.sugg button .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugg button .t b { font-weight: 700; }
.sugg button .t span { font-weight: 400; }
.sugg button.sel, .sugg button:hover { background: var(--hover); }
.sugg .rm { color: var(--blue); font-size: 13px; font-weight: 400; padding: 4px; }
.sugg .rm:hover { text-decoration: underline; }
.avatar-btn { width: 32px; height: 32px; border-radius: 50%; background: #5a3ea6; color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 500; margin: 0 4px 0 8px; }
.adfree { font-size: 12px; color: var(--text2); padding: 0 8px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.adfree i { width: 8px; height: 8px; border-radius: 50%; background: #2ba640; display: block; }
.m-search-open { display: none; }
@media (max-width: 656px) {
  .m-center { display: none; margin: 0; }
  .m-search-open { display: grid; }
  .adfree { display: none; }
  body.msearch .m-start, body.msearch .m-end { display: none; }
  body.msearch .m-center { display: flex; flex: 1; margin: 0; }
  body.msearch .back-search { display: grid; }
  body.msearch .sinput { margin-left: 8px; }
  .sugg { right: 0; left: -48px; top: 48px; border-radius: 0 0 12px 12px; }
  .mic { display: none; }
}
.back-search { display: none; }

/* ---------- guide ---------- */
#guide { position: fixed; top: var(--mast); bottom: 0; left: 0; width: var(--guide); overflow-y: auto; overflow-x: hidden; padding: 12px; z-index: 1500; background: var(--bg); scrollbar-width: thin; scrollbar-color: transparent transparent; }
#guide:hover { scrollbar-color: #717171 transparent; }
.g-item { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; gap: 24px; font-size: 14px; white-space: nowrap; width: 100%; text-align: left; }
.g-item:hover { background: var(--hover); }
.g-item:active { background: var(--press); }
.g-item.on { background: var(--hover); font-weight: 500; }
.g-item.on:hover { background: var(--press); }
.g-item .t { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.g-item img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; background: #333; }
.g-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; font-size: 16px; font-weight: 500; border-radius: 10px; width: 100%; }
a.g-head:hover { background: var(--hover); }
.g-head .ic { width: 16px; height: 16px; }
.g-sep { border-top: 1px solid var(--line); margin: 12px 0; }
.g-note { color: var(--text2); font-size: 13px; line-height: 18px; padding: 4px 12px 8px; white-space: normal; }
.g-foot { color: #717171; font-size: 12px; line-height: 18px; padding: 16px 12px; }
.g-credit { display: flex; align-items: center; gap: 8px; width: max-content; margin-top: 12px; color: var(--text2); font-size: 13px; font-weight: 500; }
.g-credit:hover { color: var(--text); }
.g-credit svg { width: 16px; height: 16px; fill: #1877f2; flex: none; }
#mini-guide { position: fixed; top: var(--mast); left: 0; bottom: 0; width: var(--mini); padding: 4px; z-index: 1400; display: none; }
.mg-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 74px; width: 64px; border-radius: 10px; font-size: 10px; line-height: 14px; padding: 16px 0 14px; }
.mg-item:hover { background: var(--hover); }
.mg-item.on .t { font-weight: 500; }
#scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2100; display: none; }
#page { padding-top: var(--mast); min-height: 100vh; }

/* full guide on wide screens, mini guide on medium, drawer otherwise (and always on watch/shorts) */
body.g-full #page { padding-left: var(--guide); }
body.g-mini #page { padding-left: var(--mini); }
body.g-mini #guide, body.g-none #guide, body.drawer-mode #guide { transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility 0s .2s; }
body.g-mini #mini-guide { display: block; }
body.drawer #guide { transform: none; visibility: visible; z-index: 2200; top: 0; padding-top: 0; transition: transform .2s; }
body.drawer #scrim { display: block; }
.drawer-head { display: none; height: var(--mast); align-items: center; padding-left: 4px; margin: 0 -12px 0 -12px; padding: 0 16px; }
body.drawer .drawer-head { display: flex; }

/* ---------- chips ---------- */
.chipbar { position: sticky; top: var(--mast); z-index: 900; background: var(--bg); height: 56px; display: flex; align-items: center; }
.chips { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 0 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 32px; padding: 0 12px; border-radius: 8px; background: var(--chip); font-size: 14px; font-weight: 500; line-height: 32px; white-space: nowrap; }
.chip:hover { background: var(--chip-hover); }
.chip.on { background: var(--text); color: #0f0f0f; }
.chip-arrow { position: absolute; top: 8px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; z-index: 2; }
.chip-arrow:hover { background: var(--hover); }
.chip-arrow.l { left: 0; } .chip-arrow.r { right: 0; }
.chipbar .fade-l, .chipbar .fade-r { position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; z-index: 1; }
.chipbar .fade-l { left: 0; background: linear-gradient(to right, var(--bg) 40%, transparent); }
.chipbar .fade-r { right: 0; background: linear-gradient(to left, var(--bg) 40%, transparent); }
.chipwrap { position: relative; flex: 1; min-width: 0; }

/* ---------- home grid ---------- */
.browse { padding: 0 24px; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 40px 16px; padding-top: 24px; }
.card { min-width: 0; position: relative; }
.thumb { position: relative; display: block; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #272727; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.badge-dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 500; line-height: 12px; padding: 4px; border-radius: 4px; letter-spacing: .3px; }
.badge-dur.live { background: #cc0000; display: flex; align-items: center; gap: 4px; }
.badge-dur.live svg { width: 14px; height: 14px; }
.watched { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.4); }
.watched i { display: block; height: 100%; background: var(--red); }
.c-body { display: flex; gap: 12px; margin-top: 12px; padding-right: 24px; position: relative; }
.c-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #333; flex: none; }
.c-text { min-width: 0; flex: 1; }
.c-title { font-size: 16px; line-height: 22px; font-weight: 500; margin: 0 0 4px; max-height: 44px; }
.c-meta { color: var(--text2); font-size: 14px; line-height: 20px; }
.c-meta a:hover { color: var(--text); }
.dot::before { content: "•"; margin: 0 4px; }
.vchk { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; fill: var(--text2); }
.c-menu { position: absolute; right: -8px; top: -4px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; opacity: 0; }
.card:hover .c-menu, .c-menu:focus, .c-menu.open { opacity: 1; }
@media (hover: none) { .c-menu { opacity: 1; } }
.c-menu:hover { background: var(--hover); }
.c-badges { margin-top: 4px; display: flex; gap: 4px; }
.c-badges span { background: var(--chip); color: var(--text2); font-size: 12px; font-weight: 500; padding: 3px 4px; border-radius: 2px; line-height: 12px; }
.c-badges span.red { background: #cc0000; color: #fff; }

/* shorts shelf */
.shelf { grid-column: 1 / -1; padding-top: 8px; border-top: 4px solid transparent; }
.shelf-head { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; margin-bottom: 16px; height: 40px; }
.shelf-head svg { width: 24px; height: 24px; fill: var(--red); }
.sgrid { display: grid; grid-template-columns: repeat(var(--scols), minmax(0,1fr)); gap: 16px; }
.sc2 .sgrid.collapsed > :nth-child(n+3), .sc3 .sgrid.collapsed > :nth-child(n+4), .sc4 .sgrid.collapsed > :nth-child(n+5), .sc5 .sgrid.collapsed > :nth-child(n+6), .sc6 .sgrid.collapsed > :nth-child(n+7) { display: none; }
.reel-slot { position: absolute; inset: 0; z-index: 2; }
.scard .sthumb { display: block; position: relative; aspect-ratio: 9/16; border-radius: 12px; overflow: hidden; background: #272727; }
.scard .sthumb img { width: 100%; height: 100%; object-fit: cover; }
.scard .s-title { font-size: 16px; line-height: 22px; font-weight: 500; margin-top: 8px; padding-right: 24px; }
.scard .s-views { color: var(--text2); font-size: 14px; line-height: 20px; }
.scard { position: relative; min-width: 0; }
.scard .c-menu { top: auto; bottom: 18px; }
.shelf-more { display: flex; align-items: center; justify-content: center; margin: 24px auto 0; gap: 8px; height: 40px; width: min(100%, 360px); border-radius: 20px; border: 1px solid var(--line); font-weight: 500; }
.shelf-more:hover { background: var(--hover); }
.shelf-sep { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 16px; }

/* skeletons */
.sk { background: #272727; border-radius: 12px; }
.sk-line { height: 20px; border-radius: 4px; background: #272727; margin-bottom: 8px; }
.sk-anim .sk, .sk-anim .sk-line { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.empty { text-align: center; color: var(--text2); padding: 80px 24px; font-size: 16px; line-height: 24px; }
.empty .big { color: var(--text); font-size: 24px; line-height: 32px; margin-bottom: 8px; }
.empty .ic-big { width: 120px; height: 120px; margin: 0 auto 24px; fill: var(--text2); opacity: .6; }
.btn-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 18px; background: var(--chip); font-weight: 500; font-size: 14px; white-space: nowrap; }
.btn-pill:hover { background: var(--chip-hover); }
.btn-pill.white { background: var(--text); color: #0f0f0f; }
.btn-pill.white:hover { background: #d9d9d9; }
.btn-pill.blue { background: transparent; color: var(--blue); border: 1px solid var(--line); }
.btn-pill.blue:hover { background: #263850; border-color: transparent; }
.btn-pill .ic { width: 24px; height: 24px; margin-left: -6px; }
.loader { display: grid; place-items: center; padding: 24px; grid-column: 1/-1; }
.spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--text2); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- search results ---------- */
.results { max-width: 1096px; margin: 0 auto; padding: 0 24px; }
.r-list { display: flex; flex-direction: column; gap: 16px; padding: 12px 0 24px; }
.r-video { display: flex; gap: 16px; position: relative; }
.r-video .thumb { flex: none; width: min(500px, 45%); min-width: 240px; }
.r-video .r-body { flex: 1; min-width: 0; padding-right: 32px; position: relative; }
.r-title { font-size: 18px; line-height: 26px; font-weight: 400; max-height: 52px; margin: 0; }
.r-meta { color: var(--text2); font-size: 12px; line-height: 18px; }
.r-chan { display: flex; align-items: center; gap: 8px; color: var(--text2); font-size: 12px; padding: 12px 0; }
.r-chan img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #333; }
.r-chan a:hover { color: var(--text); }
.r-desc { color: var(--text2); font-size: 12px; line-height: 18px; margin-bottom: 8px; }
.r-video .c-menu { right: 0; top: 0; }
.r-video:hover .c-menu { opacity: 1; }
.r-channel { display: flex; align-items: center; gap: 16px; padding: 8px 0; }
.r-channel .r-av { flex: none; width: min(500px, 45%); min-width: 240px; display: grid; place-items: center; }
.r-channel .r-av img { width: 136px; height: 136px; border-radius: 50%; object-fit: cover; background: #333; }
.r-channel .r-cbody { flex: 1; min-width: 0; }
.r-channel .r-cname { font-size: 18px; line-height: 26px; }
.r-sep { border-top: 1px solid var(--line); margin: 8px 0; }
.r-shelf .sgrid { --scols: 4; }
@media (max-width: 720px) {
  .results { padding: 0; }
  .r-list { gap: 24px; }
  .r-video { flex-direction: column; gap: 0; }
  .r-video .thumb { width: 100%; min-width: 0; border-radius: 0; }
  .r-video .r-body { padding: 12px 40px 0 12px; display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; }
  .r-video .r-av-s { display: block !important; grid-row: 1 / span 3; }
  .r-video .r-chan img, .r-video .r-desc { display: none; }
  .r-video .r-chan { padding: 0; order: 2; }
  .r-title { font-size: 16px; line-height: 22px; }
  .r-channel .r-av { width: 120px; min-width: 0; }
  .r-channel .r-av img { width: 96px; height: 96px; }
  .r-channel { padding: 8px 12px; }
  .r-shelf { padding: 0 12px; }
  .r-video .c-menu { top: 8px; right: 4px; opacity: 1; }
}
.r-av-s { display: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #333; }

/* ---------- watch ---------- */
.watch { display: flex; gap: 24px; padding: 24px 24px 0; margin: 0 auto; max-width: calc((100vh - 56px - 160px) * 16 / 9 + 426px + 72px); min-width: 0; }
.w-primary { flex: 1; min-width: 0; }
.w-secondary { width: 402px; flex: none; min-width: 0; }
.player-slot { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; }
/* never taller than the screen, so the control bar stays visible on short car screens */
.player-slot { width: min(100%, calc((100vh - var(--mast) - 32px) * 16 / 9)); margin: 0 auto; }
.w-title { font-size: 20px; line-height: 28px; font-weight: 700; margin: 12px 0 0; word-break: break-word; }
.w-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.w-owner { display: flex; align-items: center; min-width: 0; }
.w-owner img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #333; margin-right: 12px; flex: none; }
.w-owner .o-text { min-width: 0; margin-right: 24px; }
.w-owner .o-name { font-size: 16px; line-height: 22px; font-weight: 500; display: flex; align-items: center; }
.w-owner .o-name .vchk { width: 14px; height: 14px; }
.w-owner .o-subs { color: var(--text2); font-size: 12px; line-height: 18px; }
.sub-btn { height: 36px; padding: 0 16px; border-radius: 18px; background: var(--text); color: #0f0f0f; font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sub-btn:hover { background: #d9d9d9; }
.sub-btn.subbed { background: var(--chip); color: var(--text); }
.sub-btn.subbed:hover { background: var(--chip-hover); }
.sub-btn.subbed .ic { width: 24px; height: 24px; margin-left: -6px; }
.w-actions { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.w-actions::-webkit-scrollbar { display: none; }
.seg { display: flex; border-radius: 18px; background: var(--chip); flex: none; }
.seg button { height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 16px; font-weight: 500; }
.seg button:hover { background: var(--chip-hover); }
.seg button:first-child { border-radius: 18px 0 0 18px; position: relative; padding-left: 12px; }
.seg button:first-child::after { content: ""; position: absolute; right: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.seg button:last-child { border-radius: 0 18px 18px 0; padding: 0 16px 0 12px; }
.btn-pill.on { background: var(--text); color: #0f0f0f; }
.w-desc { background: var(--chip); border-radius: 12px; padding: 12px; margin-top: 12px; font-size: 14px; line-height: 20px; cursor: pointer; }
.w-desc:hover { background: var(--chip-hover); }
.w-desc.open { cursor: default; }
.w-desc.open:hover { background: var(--chip); }
.w-desc .d-top { font-weight: 500; }
.w-desc .d-text { white-space: pre-wrap; word-break: break-word; max-height: 60px; overflow: hidden; }
.w-desc.open .d-text { max-height: none; }
.w-desc .d-text a { color: var(--blue); }
.w-desc .d-more { font-weight: 500; margin-top: 4px; display: inline-block; }
.w-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.w-chips::-webkit-scrollbar { display: none; }
.compact { display: flex; gap: 8px; margin-bottom: 8px; position: relative; padding-right: 24px; border-radius: 8px; }
.compact .thumb { width: 168px; flex: none; border-radius: 8px; }
.compact .thumb .badge-dur { right: 4px; bottom: 4px; font-size: 12px; padding: 3px 4px; }
.compact .cc-title { font-size: 14px; line-height: 20px; font-weight: 500; margin: 0 0 4px; max-height: 40px; }
.compact .cc-meta { color: var(--text2); font-size: 12px; line-height: 18px; }
.compact .c-menu { right: -12px; top: -8px; }
.compact:hover .c-menu { opacity: 1; }
.compact.now { background: rgba(255,255,255,.08); }
.queue-box { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 24px; overflow: hidden; }
.queue-box .qb-head { padding: 12px 16px; background: #212121; }
.queue-box .qb-title { font-size: 20px; font-weight: 700; line-height: 28px; }
.queue-box .qb-sub { color: var(--text2); font-size: 12px; margin-top: 4px; }
.queue-box .qb-list { max-height: 360px; overflow-y: auto; padding: 8px 0; }
.queue-box .compact { padding: 4px 24px 4px 8px; margin: 0; border-radius: 0; align-items: flex-start; }
.queue-box .compact .thumb { width: 100px; }
.queue-box .qb-n { width: 20px; color: var(--text2); font-size: 12px; align-self: center; text-align: center; flex: none; }
.comments { margin-top: 24px; padding-bottom: 40px; }
.cm-head { font-size: 20px; line-height: 28px; font-weight: 700; margin-bottom: 24px; }
.cm { display: flex; gap: 16px; margin-bottom: 16px; }
.cm img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #333; flex: none; }
.cm .cm-author { font-size: 13px; line-height: 18px; font-weight: 500; }
.cm .cm-author.creator { background: #888; color: #0f0f0f; padding: 1px 6px; border-radius: 12px; }
.cm .cm-time { color: var(--text2); font-size: 12px; font-weight: 400; margin-left: 4px; }
.cm .cm-text { font-size: 14px; line-height: 20px; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.cm .cm-text.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cm .cm-readmore { color: var(--text2); font-weight: 500; margin-top: 4px; font-size: 14px; }
.cm .cm-tools { display: flex; align-items: center; gap: 4px; color: var(--text2); font-size: 12px; margin-top: 4px; }
.cm .cm-tools svg { width: 16px; height: 16px; fill: var(--text2); }
.cm .cm-replies { color: var(--blue); font-size: 14px; font-weight: 500; margin-top: 8px; }
@media (max-width: 1016px) {
  .watch { flex-direction: column; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .w-secondary { width: auto; margin-top: 24px; }
  .w-primary { display: contents; }
  .w-primary > * { grid-column: 1; }
  .comments { order: 10; }
}
@media (max-width: 656px) {
  .watch { padding: 0; }
  .player-slot { border-radius: 0; }
  .w-title, .w-row, .w-desc, .w-secondary, .comments { margin-left: 12px; margin-right: 12px; }
  .w-title { font-size: 18px; line-height: 26px; }
  .w-row { flex-direction: column; align-items: stretch; }
  .w-owner .o-text { margin-right: auto; }
  .compact .thumb { width: 160px; }
}

/* ---------- player ---------- */
.player { position: absolute; inset: 0; background: #000; overflow: hidden; user-select: none; -webkit-user-select: none; outline: none; }
.player video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
.player:fullscreen, .player:-webkit-full-screen { width: 100%; height: 100%; }
.p-cover { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 10px; text-align: center; background: #000 center/cover no-repeat; padding: 12px; }
.p-cover::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.p-cover > * { position: relative; }
.p-cover svg { width: 48px; height: 48px; }
.p-cover .t1 { font-size: 18px; font-weight: 500; }
.p-cover .t2 { color: #ddd; font-size: 13px; }
.player.audio .p-cover { display: flex; }
.p-spin { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: none; pointer-events: none; }
.p-spin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; border-top-color: #fff; border-right-color: #fff; animation: spin 1s linear infinite; }
.player.busy .p-spin { display: block; }
.p-bezel { 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; }
.p-bezel svg { width: 36px; height: 36px; fill: #fff; }
.p-bezel.go { animation: bezel .5s linear 1 normal forwards; }
@keyframes bezel { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } }
.p-seekhint { position: absolute; top: 0; bottom: 0; width: 40%; display: none; align-items: center; justify-content: center; flex-direction: column; color: #fff; font-size: 12px; font-weight: 500; background: rgba(255,255,255,.12); pointer-events: none; }
.p-seekhint.l { left: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; } .p-seekhint.r { right: 0; border-radius: 50% 0 0 50% / 50% 0 0 50%; }
.p-seekhint.show { display: flex; }
.p-err, .p-end { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; padding: 16px; background: rgba(0,0,0,.85); flex-direction: column; gap: 10px; z-index: 6; }
.player.failed .p-err { display: flex; }
.p-err .e1 { font-size: 18px; font-weight: 500; }
.p-err .e2 { color: #ccc; font-size: 13px; max-width: 440px; line-height: 19px; }
.player.ending .p-end { display: flex; }
.p-end .n-label { color: #ccc; font-size: 13px; }
.p-end .n-card { display: flex; gap: 12px; align-items: center; max-width: 520px; text-align: left; }
.p-end .n-card img { width: 160px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }
.p-end .n-title { font-size: 16px; font-weight: 500; line-height: 22px; }
.p-end .n-ch { color: #ccc; font-size: 13px; margin-top: 4px; }
.p-end .n-btns { display: flex; gap: 12px; margin-top: 8px; }
.p-ring { width: 64px; height: 64px; position: relative; display: grid; place-items: center; }
.p-ring svg.ring { position: absolute; inset: 0; transform: rotate(-90deg); fill: none; }
.p-ring svg.ring circle { stroke: #fff; stroke-width: 3; stroke-dasharray: 188.5; stroke-dashoffset: 188.5; }
.player.ending .p-ring svg.ring circle { animation: ring 5s linear forwards; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.p-ring .play { width: 36px; height: 36px; }

.p-ctrl { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 12px; z-index: 5; transition: opacity .25s; }
.p-ctrl::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.25) 60%, transparent); pointer-events: none; z-index: -1; }
.player.idle .p-ctrl, .player.idle .p-center { opacity: 0; pointer-events: none; }
.player.idle { cursor: none; }
.p-prog { position: relative; height: 16px; cursor: pointer; touch-action: none; display: flex; align-items: center; }
.p-prog .track { position: relative; height: 3px; width: 100%; background: rgba(255,255,255,.2); transition: height .1s; }
.p-prog:hover .track, .p-prog.drag .track { height: 5px; }
.p-prog .buf { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.4); }
.p-prog .hov { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.5); display: none; }
.p-prog:hover .hov { display: block; }
.p-prog .played { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); }
.p-prog .knob { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .1s; }
.p-prog:hover .knob, .p-prog.drag .knob { transform: scale(1); }
@media (hover: none) { .p-prog .knob { transform: scale(1); } .p-prog .track { height: 4px; } }
.p-prog .tip { position: absolute; bottom: 22px; transform: translateX(-50%); background: rgba(28,28,28,.9); color: #fff; font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 4px; display: none; white-space: nowrap; }
.p-prog:hover .tip, .p-prog.drag .tip { display: block; }
.p-bar { display: flex; align-items: center; height: 48px; gap: 4px; }
.p-bar .sp { flex: 1; }
.p-btn { width: 48px; height: 48px; display: grid; place-items: center; flex: none; color: #fff; opacity: .9; border-radius: 24px; }
.p-btn:hover { opacity: 1; }
.p-btn svg { width: 28px; height: 28px; }
.p-btn.on { color: var(--red); }
.p-time { color: #ddd; font-size: 13px; padding: 0 8px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.p-time .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; }
.p-vol { display: flex; align-items: center; }
.p-vol input { width: 0; opacity: 0; transition: width .2s, opacity .2s; accent-color: #fff; height: 4px; }
.p-vol:hover input, .p-vol input:focus { width: 64px; opacity: 1; margin-right: 8px; }
.toggle { width: 36px; height: 14px; border-radius: 7px; background: rgba(255,255,255,.3); position: relative; }
.toggle::after { content: ""; position: absolute; left: -2px; top: -3px; width: 20px; height: 20px; border-radius: 50%; background: #bdbdbd; transition: left .15s, background .15s; display: grid; }
.toggle.on { background: rgba(255,255,255,.6); }
.toggle.on::after { left: 18px; background: #fff; }
.p-settings { position: absolute; right: 12px; bottom: 64px; background: rgba(28,28,28,.95); border-radius: 12px; padding: 8px 0; min-width: 250px; max-height: calc(100% - 80px); overflow-y: auto; z-index: 8; text-shadow: none; }
.p-settings button { display: flex; width: 100%; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; font-size: 13px; font-weight: 500; gap: 24px; text-align: left; }
.p-settings button:hover { background: rgba(255,255,255,.1); }
.p-settings .v { color: #ddd; font-weight: 400; }
.p-settings .sel::before { content: "✓"; margin-right: 8px; }
.p-settings .hd { border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 8px; justify-content: flex-start; }
/* touch: big centre buttons (also what the car screen gets) */
.p-center { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: none; align-items: center; justify-content: center; gap: 48px; z-index: 4; pointer-events: none; transition: opacity .25s; }
.p-center button { pointer-events: auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.4); }
.p-center button svg { width: 36px; height: 36px; fill: #fff; }
.p-center button.big { width: 72px; height: 72px; }
.p-center button.big svg { width: 48px; height: 48px; }
.player.touch .p-center { display: flex; }
.player.touch.busy .p-center .big { visibility: hidden; }
.player.touch .p-ctrl::before { height: 100%; top: 0; background: rgba(0,0,0,.45); position: fixed; }
.player.touch .p-ctrl::before { position: absolute; top: auto; height: 1000px; }
.player.touch .p-shade { position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 3; pointer-events: none; transition: opacity .25s; }
.player.touch.idle .p-shade { opacity: 0; }
.player:not(.touch) .p-shade { display: none; }
.player.shorts .p-ctrl .p-bar, .player.shorts .p-center, .player.shorts .p-shade { display: none; }
.player.shorts .p-ctrl::before { display: none; }
.player.shorts.idle .p-ctrl { opacity: 1; pointer-events: auto; }
.player.shorts video { object-fit: cover; }
.player.mini .p-center { gap: 24px; }
.player.mini .p-center button { width: 44px; height: 44px; }
.player.mini .p-center button svg { width: 30px; height: 30px; }
.player.mini .p-center { display: flex; }
.player.mini .p-bar, .player.mini .p-shade { display: none; }
.player.mini.idle .p-center { opacity: 0; }
.player.mini:hover .p-center { opacity: 1; pointer-events: auto; }
.player.mini .p-ctrl::before { height: 100%; }
.player.mini .p-prog .tip { display: none; }
.player.mini .p-cover .t2 { display: none; }
.player.mini .p-err .e2 { display: none; }
.player.mini .p-end { display: none; }

/* ---------- miniplayer ---------- */
#mini { position: fixed; right: 12px; bottom: 12px; width: 400px; background: #212121; border-radius: 12px; overflow: hidden; z-index: 1800; box-shadow: 0 4px 32px rgba(0,0,0,.6); display: none; }
body.has-mini #mini { display: block; }
#mini .mini-video { position: relative; aspect-ratio: 16/9; background: #000; }
#mini .mini-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 4px; z-index: 7; opacity: 0; transition: opacity .2s; }
#mini:hover .mini-top { opacity: 1; }
@media (hover: none) { #mini .mini-top { opacity: 1; } }
#mini .mini-top button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.4); }
#mini .mini-info { display: flex; align-items: center; padding: 10px 8px 12px 16px; gap: 8px; cursor: pointer; }
#mini .mini-info .t { flex: 1; min-width: 0; }
#mini .mini-info .t1 { font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mini .mini-info .t2 { color: var(--text2); font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 656px) {
  #mini { left: 0; right: 0; bottom: 0; width: auto; border-radius: 0; display: none; }
  body.has-mini #mini { display: flex; }
  #mini .mini-video { width: 128px; flex: none; }
  #mini .mini-top { display: none; }
  #mini .mini-info { flex: 1; padding: 0 4px 0 12px; }
  #mini .mini-x { display: grid !important; }
  .player.mini .p-center, .player.mini .p-prog { display: none; }
}
#mini .mini-x, #mini .mini-play { display: none; }
@media (max-width: 656px) { #mini .mini-play { display: grid; } }
body.has-mini #page { padding-bottom: 80px; }
@media (max-height: 600px) and (min-width: 657px) { #mini { width: 300px; } }

/* ---------- shorts ---------- */
.shorts-page { display: flex; flex-direction: column; align-items: center; height: calc(100vh - var(--mast)); height: calc(100dvh - var(--mast)); overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.shorts-page::-webkit-scrollbar { display: none; }
.reel { scroll-snap-align: start; scroll-snap-stop: always; height: calc(100vh - var(--mast)); height: calc(100dvh - var(--mast)); flex: none; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 0; width: 100%; }
.reel-video { position: relative; height: 100%; aspect-ratio: 9/16; max-width: calc(100vw - 100px); border-radius: 12px; overflow: hidden; background: #000 center/cover no-repeat; }
.reel-video .reel-cover { position: absolute; inset: 0; background: center/cover no-repeat; }
.reel-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 24px; z-index: 6; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); pointer-events: none; }
.reel-info .ri-title { font-size: 16px; line-height: 22px; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.reel-info .ri-views { font-size: 13px; color: #ddd; margin-top: 4px; }
.reel-acts { display: flex; flex-direction: column; gap: 16px; align-self: flex-end; padding-bottom: 8px; }
.reel-acts button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; }
.reel-acts button span.c { width: 48px; height: 48px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; }
.reel-acts button:hover span.c { background: var(--chip-hover); }
.reel-acts button.on span.c { background: var(--text); color: #0f0f0f; }
.reel-nav { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; z-index: 50; }
.reel-nav button { width: 56px; height: 56px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; }
.reel-nav button:hover { background: var(--chip-hover); }
.reel-mute { position: absolute; top: 12px; left: 12px; z-index: 7; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.4); display: grid; place-items: center; }
@media (max-width: 656px) {
  .reel { padding: 0; gap: 0; position: relative; }
  .reel-video { max-width: 100vw; width: 100%; border-radius: 0; aspect-ratio: auto; }
  .reel-acts { position: absolute; right: 8px; bottom: 80px; z-index: 7; }
  .reel-nav { display: none; }
}

/* ---------- channel ---------- */
.ch { max-width: 1284px; margin: 0 auto; padding: 0 24px; }
.ch-banner { aspect-ratio: 6.2; border-radius: 16px; overflow: hidden; margin-top: 16px; background: #272727 center/cover no-repeat; }
.ch-head { display: flex; gap: 24px; align-items: center; padding: 24px 0 8px; }
.ch-head img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; background: #333; flex: none; }
.ch-name { font-size: 36px; line-height: 50px; font-weight: 700; display: flex; align-items: center; gap: 8px; word-break: break-word; }
.ch-name .vchk { width: 20px; height: 20px; }
.ch-meta { color: var(--text2); font-size: 14px; line-height: 20px; margin-top: 4px; }
.ch-meta b { color: var(--text); font-weight: 500; }
.ch-desc { color: var(--text2); font-size: 14px; line-height: 20px; margin: 8px 0 12px; max-width: 600px; cursor: pointer; }
.ch-desc.open { white-space: pre-wrap; }
.ch-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); position: sticky; top: var(--mast); background: var(--bg); z-index: 800; overflow-x: auto; scrollbar-width: none; }
.ch-tabs a { height: 48px; display: flex; align-items: center; font-size: 16px; font-weight: 500; color: var(--text2); border-bottom: 2px solid transparent; white-space: nowrap; }
.ch-tabs a:hover { color: var(--text); border-bottom-color: var(--text2); }
.ch-tabs a.on { color: var(--text); border-bottom-color: var(--text); }
.ch .grid { padding-top: 24px; }
.ch .c-body { padding-right: 24px; }
@media (max-width: 656px) {
  .ch { padding: 0 12px; }
  .ch-banner { border-radius: 12px; }
  .ch-head { gap: 16px; align-items: flex-start; }
  .ch-head img { width: 72px; height: 72px; }
  .ch-name { font-size: 24px; line-height: 32px; }
}

/* ---------- lists: history / playlist / subscriptions ---------- */
.list-page { max-width: 1284px; margin: 0 auto; padding: 24px; display: flex; gap: 48px; }
.list-main { flex: 1; min-width: 0; }
.list-side { width: 320px; flex: none; }
.page-title { font-size: 36px; line-height: 50px; font-weight: 700; margin: 0 0 24px; }
.day { font-size: 20px; line-height: 28px; font-weight: 700; margin: 24px 0 16px; }
.h-search { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #717171; padding: 8px 0; margin-bottom: 24px; }
.h-search input { flex: 1; background: transparent; border: 0; outline: 0; font-size: 14px; }
.side-btn { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-radius: 20px; font-weight: 500; }
.side-btn:hover { background: var(--hover); }
.pl-page { display: flex; gap: 24px; padding: 24px; max-width: 1284px; margin: 0 auto; }
.pl-card { width: 360px; flex: none; border-radius: 16px; padding: 24px; background: linear-gradient(to bottom, #4a4a4a, #1f1f1f); position: sticky; top: calc(var(--mast) + 24px); align-self: flex-start; overflow: hidden; }
.pl-card .thumb { margin-bottom: 16px; }
.pl-card h1 { font-size: 28px; line-height: 38px; font-weight: 700; margin: 0 0 12px; }
.pl-card .pl-sub { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 16px; }
.pl-list { flex: 1; min-width: 0; }
.pl-row { display: flex; align-items: center; gap: 8px; padding: 8px 32px 8px 0; border-radius: 12px; position: relative; }
.pl-row:hover { background: var(--hover); }
.pl-row .n { width: 24px; text-align: center; color: var(--text2); flex: none; }
.pl-row .thumb { width: 160px; flex: none; border-radius: 8px; }
.pl-row .c-menu { opacity: 1; top: 50%; transform: translateY(-50%); right: 0; }
@media (max-width: 1016px) { .list-side { display: none; } .pl-page { flex-direction: column; } .pl-card { width: auto; position: static; } }
@media (max-width: 656px) { .list-page, .pl-page { padding: 12px; } .page-title { font-size: 24px; line-height: 32px; } .pl-row .thumb { width: 120px; } }
.subs-list .sl-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.subs-list img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: #333; }
.subs-list .t { flex: 1; min-width: 0; font-size: 18px; }
.you-sec { margin-bottom: 32px; }
.you-sec .ys-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.you-sec .ys-head h2 { font-size: 20px; margin: 0; }
.hrow { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scrollbar-width: none; }
@media (max-width: 880px) { .hrow { grid-auto-columns: 44%; } }

/* ---------- menus, dialogs, toast ---------- */
.menu { position: fixed; z-index: 2500; background: var(--menu); border-radius: 12px; padding: 8px 0; min-width: 220px; max-width: 320px; box-shadow: 0 4px 32px rgba(0,0,0,.4); }
.menu button { display: flex; align-items: center; gap: 16px; width: 100%; height: 36px; padding: 0 36px 0 16px; text-align: left; font-size: 14px; white-space: nowrap; }
.menu button:hover { background: rgba(255,255,255,.1); }
.menu .sep { border-top: 1px solid var(--line); margin: 8px 0; }
.menu .m-head { display: flex; gap: 16px; padding: 8px 16px 16px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.menu .m-head .avatar-btn { width: 40px; height: 40px; margin: 0; font-size: 18px; }
.menu .toggle { margin-left: auto; }
.menu button .t { flex: 1; }
.dialog-wrap { position: fixed; inset: 0; z-index: 2600; background: rgba(0,0,0,.5); display: grid; place-items: center; padding: 16px; }
.dialog { background: var(--raised); border-radius: 12px; padding: 24px; width: min(100%, 400px); }
.dialog .d-body { font-size: 14px; line-height: 20px; margin-bottom: 24px; }
.dialog .d-btns { display: flex; justify-content: flex-end; gap: 8px; }
.dialog .d-btns button { height: 36px; padding: 0 16px; border-radius: 18px; font-weight: 500; color: var(--blue); }
.dialog .d-btns button:hover { background: #263850; }
#toast { position: fixed; left: 12px; bottom: 12px; z-index: 2700; background: var(--text); color: #0f0f0f; border-radius: 8px; padding: 14px 16px; font-size: 14px; display: flex; align-items: center; gap: 24px; transform: translateY(150%); transition: transform .2s; max-width: calc(100vw - 24px); }
#toast.show { transform: none; }
#toast button { color: #065fd4; font-weight: 500; }
.voice { position: fixed; inset: 0; z-index: 2600; background: rgba(0,0,0,.5); display: grid; place-items: start center; padding-top: 80px; }
.voice .v-box { background: var(--raised); border-radius: 12px; width: min(560px, calc(100vw - 32px)); padding: 24px; position: relative; min-height: 300px; display: flex; flex-direction: column; }
.voice .v-text { font-size: 24px; line-height: 32px; flex: 1; }
.voice .v-mic { width: 64px; height: 64px; border-radius: 50%; background: #cc0000; display: grid; place-items: center; margin: 24px auto 0; }
.voice .v-mic.listen { animation: vpulse 1.2s ease-in-out infinite; }
@keyframes vpulse { 50% { box-shadow: 0 0 0 16px rgba(204,0,0,.25); } }
.voice .v-x { position: absolute; right: 8px; top: 8px; }

/* ---------- announcement when the site opens ---------- */
.notice-wrap { z-index: 2800; animation: nfade .2s ease-out; }
.notice { background: var(--raised); border-radius: 16px; padding: 24px 24px 20px; width: min(100%, 440px); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 8px 48px rgba(0,0,0,.6); animation: npop .22s cubic-bezier(.2,.9,.3,1.2); }
.notice .n-top svg { height: 22px; width: auto; }
.notice h2 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 16px 0 12px; }
.notice ul { margin: 0 0 20px; padding: 0; list-style: none; }
.notice li { position: relative; padding-left: 20px; font-size: 15px; line-height: 22px; color: #ddd; margin-bottom: 8px; }
.notice li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.notice .n-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.notice .n-fb { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px; background: #1877f2; color: #fff; font-weight: 500; font-size: 14px; }
.notice .n-fb:hover { background: #166fe0; }
.notice .n-fb svg { width: 20px; height: 20px; fill: #fff; }
.notice .n-ok { height: 40px; padding: 0 20px; border-radius: 20px; font-size: 14px; }
@keyframes nfade { from { opacity: 0; } }
@keyframes npop { from { opacity: 0; transform: scale(.94); } }
@media (max-width: 480px) { .notice .n-btns { flex-direction: column-reverse; } .notice .n-fb, .notice .n-ok { justify-content: center; width: 100%; } }

/* ---------- player bar, new YouTube style: controls sit in see-through capsules ---------- */
.p-bar { height: 60px; gap: 8px; padding-bottom: 8px; }
.p-grp, .p-round { display: flex; align-items: center; height: 48px; border-radius: 24px; background: rgba(20,20,20,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); flex: none; }
.p-round { width: 48px; justify-content: center; border-radius: 50%; opacity: 1; }
.p-grp { padding: 0 2px; }
.p-grp .p-btn { width: 44px; height: 48px; opacity: 1; }
.p-btn svg { width: 26px; height: 26px; }
.p-round svg { width: 30px; height: 30px; }
.p-btn:hover { background: rgba(255,255,255,.12); }
.p-btn.on { color: #fff; }
.p-btn[data-p="settings"] { position: relative; }
.p-btn[data-p="settings"] svg { transition: transform .2s; }
.p-btn[data-p="settings"].on svg { transform: rotate(30deg); }
.hd-badge { position: absolute; top: 9px; right: 5px; background: #f00; color: #fff; font-size: 8px; font-weight: 700; line-height: 9px; padding: 0 2px; border-radius: 2px; pointer-events: none; }
.p-btn[data-p="cc"] { position: relative; }
.p-btn.cc-on::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 9px; height: 3px; border-radius: 2px; background: #f00; }
.p-btn.off { opacity: .45; }
.p-time.p-grp { padding: 0 16px; color: #fff; font-size: 14px; font-weight: 500; }
.p-vol.p-grp:hover input, .p-vol.p-grp input:focus { margin-right: 12px; }
.p-settings { bottom: 76px; }
.p-settings .toggle { flex: none; }
.player.narrow .p-skip, .player.narrow .p-vol { display: none; }
.player.narrow .p-bar { gap: 6px; }
.player.narrow .p-time.p-grp { padding: 0 12px; font-size: 13px; }
.player.narrow .p-grp .p-btn { width: 40px; }
.player.touch .p-bar .p-round { display: none; } /* the big centre button does play/pause on touch screens */
.player.shorts .p-bar { display: none; }

/* captions */
.player video::cue { background: rgba(8,8,8,.75); color: #fff; font-family: "Roboto", "Arial", sans-serif; line-height: 1.35; }

/* casting to a TV */
.p-castcover { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 8px; text-align: center; background: #000; z-index: 2; }
.p-castcover svg { width: 56px; height: 56px; }
.p-castcover .t1 { font-size: 18px; font-weight: 500; }
.p-castcover .t2 { color: #aaa; font-size: 14px; }
.player.casting .p-castcover { display: flex; }
.player.casting .p-spin { display: none; }

/* theater mode: the player spans the page under the top bar */
.theater-box { display: none; background: #000; }
body.theater .theater-box { display: block; }
body.theater #slot { display: none; }
.theater-box .player-slot { width: 100%; max-width: none; aspect-ratio: auto; height: min(56.25vw, calc(100vh - 169px)); min-height: 400px; border-radius: 0; margin: 0; }