/* YouTube (mobile app) */
.phone[data-platform='youtube'] {
  --bg: #ffffff; --fg: #0f0f0f; --fg2: #606060; --sep: #e5e5e5; --elev: #f2f2f2; --accent: #065fd4; --link: #065fd4; --red: #ff0033;
  --font: Roboto, 'Segoe UI', Arial, sans-serif;
}
.phone[data-platform='youtube'][data-theme='dark'] {
  --bg: #0f0f0f; --fg: #f1f1f1; --fg2: #aaaaaa; --sep: #3f3f3f; --elev: #272727; --accent: #3ea6ff; --link: #3ea6ff;
}
.phone[data-platform='youtube'][data-device='android'] { --font: Roboto, 'Segoe UI', Arial, sans-serif; }
.yt-logo { display: inline-flex; align-items: center; gap: 3px; }
.yt-logo svg { width: 30px; height: 21px; }
.yt-logo b { font-family: 'Roboto', Arial, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -1.2px; }

/* Home */
.yt-topbar .yt-bar { height: 52px; display: flex; align-items: center; gap: 22px; padding: 0 16px 0 14px; }
.yt-topbar .yt-bar .ico { width: 26px; height: 26px; }
.yt-bell { position: relative; display: inline-flex; }
.yt-bell i { position: absolute; top: -5px; left: 12px; background: #cc0000; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 9px; box-shadow: 0 0 0 2px var(--bg); }
.yt-chips { display: flex; gap: 8px; padding: 4px 12px 10px; }
.yt-chips .explore { padding: 0 12px !important; display: grid; place-items: center; }
.yt-chips .explore .ico { width: 22px; height: 22px; }
.yt-chips button { flex: none; height: 32px; padding: 0 12px !important; border-radius: 8px; background: var(--elev) !important; font-size: 14px; font-weight: 500; white-space: nowrap; }
.yt-chips button.on { background: var(--fg) !important; color: var(--bg) !important; }
.yt-top-space { height: calc(var(--st) + 98px); }
.yt-card { margin-bottom: 18px; }
.yt-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--elev); }
.yt-thumb > .m { position: absolute; inset: 0; }
.yt-thumb > video.m { z-index: 1; background: #000; }
.yt-dur { position: absolute; right: 8px; bottom: 8px; z-index: 2; background: rgba(0,0,0,.8); color: #fff; font-size: 12px; font-weight: 500; padding: 1px 4px; border-radius: 4px; }
.yt-inline-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: rgba(255,255,255,.35); opacity: 0; transition: opacity .2s; }
.yt-inline-bar i { display: block; height: 100%; width: 0; background: var(--red); }
/* hover previews (phone + PC) */
.playing > .yt-inline-bar { opacity: 1; }
.playing > .yt-dur, .playing > .yt-feat-badge { opacity: 0; }
.yt-row-thumb > video.m, .yt-feat-media > video.m { z-index: 1; background: #000; }
[data-hover-preview] { cursor: pointer; }
.yt-meta { display: flex; gap: 12px; padding: 12px 8px 0 12px; }
.yt-txt { flex: 1; min-width: 0; }
.yt-txt h3 { margin: 0 0 4px; font-size: 15px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-txt p, .yt-row-txt p { margin: 0; font-size: 12.5px; color: var(--fg2); }
.yt-kebab { align-self: flex-start; padding: 2px 0 !important; }
.yt-kebab .ico { width: 20px; height: 20px; }
.yt-shelf { padding: 0 0 20px; margin-bottom: 14px; }
.yt-shelf-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px 14px; font-size: 21px; }
.yt-shelf-head .ico { width: 24px; height: 24px; }
.yt-shelf-head .yt-shorts-logo .ico { width: 30px; height: 30px; }
.yt-shelf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; }
.yt-shelf-grid .yt-scard { flex: none; width: auto; }
.yt-shelf-head b { font-weight: 700; }
.yt-shorts-logo { color: var(--red); display: inline-flex; }
.yt-shorts-logo .ico { width: 26px; height: 26px; }
.yt-shelf-row { display: flex; gap: 8px; padding: 0 12px; }
.yt-scard { position: relative; flex: 0 0 calc((var(--sw) - 34px) / 2); aspect-ratio: 9 / 13.5; border-radius: 12px; overflow: hidden; text-align: left; background: var(--elev) !important; }
.yt-scard > .m { position: absolute; inset: 0; }
.yt-scard::before { content: ''; position: absolute; inset: 50% 0 0 0; background: linear-gradient(transparent, rgba(0,0,0,.65)); z-index: 1; }
.yt-scard-more { position: absolute; top: 6px; right: 8px; color: #fff; z-index: 2; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.yt-scard-more .ico { width: 20px; height: 20px; }
.yt-scard-txt { position: absolute; left: 8px; right: 8px; bottom: 10px; color: #fff; z-index: 2; }
.yt-scard-txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15.5px; font-weight: 400; line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.yt-scard-txt small { font-size: 12px; opacity: .9; }

/* Tab bar */
.phone[data-platform='youtube'] .tabbar { border-top: 0; }
.phone[data-platform='youtube'] .tabbar .ico { width: 24px; height: 24px; }
.phone[data-platform='youtube'] .tabbar small { font-size: 11px; }
.phone[data-platform='youtube'] .tabbar .dm .red-dot { top: 7px; left: 50%; margin-left: 6px; }
.phone[data-platform='youtube'] .tabbar .tab-av { width: 24px; height: 24px; }
.yt-create .ico { width: 40px !important; height: 40px !important; padding: 7px; border-radius: 50%; background: var(--elev); stroke-width: 1.6; }
.phone[data-chrome='dark'] .yt-create .ico { background: #272727; }

/* Shorts */
.yt-shorts { background: #000; color: #fff; }
.yt-shorts .scroller { bottom: var(--tabbar); padding-bottom: 0; }
.yt-short { position: relative; height: 100%; overflow: hidden; background: #000; }
.yt-short-media { position: absolute; inset: 0; }
.yt-short-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.3) 0, transparent 14%, transparent 62%, rgba(0,0,0,.55) 100%); }
.yt-shorts-bar { position: absolute; inset: 0 0 auto 0; padding: var(--st) 14px 0; height: calc(var(--st) + 52px); display: flex; align-items: center; gap: 24px; color: #fff; z-index: 5; }
.yt-shorts-bar .ico { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.yt-short-side { position: absolute; right: 6px; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 3; }
.yt-short-side button { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 13px; font-weight: 500; width: 56px; }
.yt-short-side button .ico { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.yt-short-side button.on { color: #fff; }
.yt-short-side button.on .ico { color: #ff3040; }
.yt-short-side button[data-yt-save].on .ico { color: #fff; }
.yt-short-audio { width: 36px; height: 36px; border-radius: 8px; overflow: hidden; border: 2px solid #fff; margin-top: 4px; }
.yt-short-info { position: absolute; left: 12px; right: 70px; bottom: 18px; z-index: 3; }
.yt-short-info .who { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.yt-short-info .who b { font-weight: 500; }
.yt-short-info .title { margin-top: 10px; font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-short-info .who .badge { width: 14px; height: 14px; color: #fff; }
.yt-related { margin-top: 10px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-weight: 500; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.yt-related span { overflow: hidden; text-overflow: ellipsis; }
.yt-related .ico { width: 13px; height: 13px; flex: none; }
.yt-short-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.25); z-index: 4; }
.yt-short-progress i { display: block; height: 100%; width: 0; background: #fff; }

.yt-subscribe {
  height: 32px; padding: 0 14px !important; border-radius: 18px; background: var(--fg) !important; color: var(--bg) !important;
  font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; flex: none;
}
.yt-subscribe .ico { width: 18px; height: 18px; }
.yt-subscribe.on { background: var(--elev) !important; color: var(--fg) !important; }
.yt-short .yt-subscribe { background: #fff !important; color: #0f0f0f !important; height: 30px; font-size: 13px; }
.yt-short .yt-subscribe.on { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.yt-subscribe.big { width: 100%; justify-content: center; height: 36px; }

/* Watch */
.yt-watch { background: var(--bg); }
.yt-watch::before { content: ''; position: absolute; inset: 0 0 auto 0; height: var(--st); background: #000; z-index: 3; }
.yt-player { position: absolute; left: 0; right: 0; top: var(--st); aspect-ratio: 16 / 9; background: #000; z-index: 3; overflow: hidden; }
.yt-player > .m { position: absolute; inset: 0; }
.yt-ctrls { position: absolute; inset: 0; background: rgba(0,0,0,.45); color: #fff; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 2; }
.yt-ctrls.show { opacity: 1; pointer-events: auto; }
.yt-ctrl-top { position: absolute; top: 6px; left: 8px; right: 12px; display: flex; align-items: center; gap: 22px; }
.yt-ctrl-top .ico { width: 24px; height: 24px; }
.yt-ctrl-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(0,0,0,.45) !important; display: grid; place-items: center; }
.yt-ctrl-play .ico { width: 30px !important; height: 30px !important; }
.yt-ctrl-bottom { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; font-size: 12px; font-weight: 500; }
.yt-ctrl-bottom .ico { width: 22px; height: 22px; }
.yt-seek { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.3); z-index: 3; cursor: pointer; }
.yt-seek::before { content: ''; position: absolute; inset: -8px 0; }
.yt-seek i { display: block; height: 100%; width: 0; background: var(--red); }
.yt-seek b { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--red); left: 0; opacity: 0; transition: opacity .2s; }
.yt-ctrls.show + .yt-seek b { opacity: 1; }
.yt-watch .scroller { top: calc(var(--st) + var(--sw) * 9 / 16); padding-bottom: var(--sb); }
.yt-w-info { padding: 12px 12px 6px; }
.yt-w-info h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.yt-w-sub { margin: 6px 0 12px; font-size: 12.5px; color: var(--fg2); }
.yt-w-sub b { color: var(--fg); font-weight: 500; }
.yt-w-ch { display: flex; align-items: center; gap: 10px; }
.yt-w-ch b { font-weight: 500; font-size: 15px; }
.yt-w-ch > span:not(.sp) { color: var(--fg2); font-size: 12.5px; }
.yt-w-actions { display: flex; gap: 8px; margin: 12px -12px 0; padding: 0 12px; }
.yt-pill { flex: none; height: 34px; border-radius: 18px; background: var(--elev); display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 14px; font-weight: 500; }
.yt-pill .ico { width: 20px; height: 20px; }
.yt-likes { padding: 0; }
.yt-likes button { height: 100%; padding: 0 12px 0 14px !important; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.yt-likes button + i + button { padding: 0 14px 0 12px !important; }
.yt-likes i { width: 1px; height: 22px; background: var(--sep); }
.yt-w-comments { margin: 14px 0 6px; background: var(--elev); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.yt-w-comments b { font-weight: 700; font-size: 14px; }
.yt-w-comments b span { font-weight: 400; color: var(--fg2); margin-left: 4px; }
.yt-w-comments div { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.yt-watch .yt-card { margin-top: 12px; }

/* Channel (phone), matched to the app recording */
.yt-ch-bar { position: absolute; inset: 0 0 auto 0; z-index: 20; background: var(--bg); padding: var(--st) 6px 0 4px; height: calc(var(--st) + 52px); display: flex; align-items: center; gap: 6px; }
.yt-ch-bar b { font-size: 19px; font-weight: 500; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.yt-ch-bar.titled b { opacity: 1; transform: none; }
.yt-ch-bar button { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.yt-ch-bar .ico { width: 24px; height: 24px; }
.yt-ch-space { height: calc(var(--st) + 52px); }
.yt-banner { margin: 2px 16px 0; aspect-ratio: 3.6 / 1; border-radius: 12px; overflow: hidden; background: var(--elev); }
.yt-banner > .m { width: 100%; height: 100%; object-fit: cover; }
.yt-ch-head { display: flex; align-items: center; gap: 16px; padding: 14px 16px 10px; }
.yt-ch-head h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; line-height: 1.15; display: flex; align-items: center; gap: 6px; letter-spacing: -.2px; }
.yt-ch-head h1 .badge { width: 16px; height: 16px; color: var(--fg2); }
.yt-ch-head p { margin: 0; font-size: 13px; color: var(--fg2); line-height: 1.45; }
.yt-ch-head .yt-ch-handle { color: var(--fg); font-weight: 500; font-size: 13.5px; }
.yt-ch-desc, .yt-ch-link { margin: 0; padding: 0 16px 8px; font-size: 13.5px; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-ch-desc b { color: var(--fg); font-weight: 500; }
.yt-ch-link { color: var(--fg); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.yt-ch-link .ico { width: 14px; height: 14px; flex: none; }
.yt-ch-link b { font-weight: 500; }
.yt-ch-btn { padding: 6px 16px 4px; }
.yt-ch-btn .yt-subscribe.big { height: 38px; font-size: 14.5px; gap: 8px; }
.yt-ch-btn .yt-subscribe.big .ico { width: 20px; height: 20px; }
.yt-ch-tabs { position: sticky; top: calc(var(--st) + 52px); z-index: 10; background: var(--bg); display: flex; height: 46px; border-bottom: 1px solid var(--sep); margin-top: 8px; padding: 0 4px; }
.yt-ch-tabs button { flex: none; padding: 0 12px !important; font-size: 15.5px; font-weight: 500; color: var(--fg2); transition: color .2s; }
.yt-ch-tabs button.on { color: var(--fg); }
.yt-ch-tabs .line { position: absolute; left: 0; bottom: 0; height: 2px; width: 40px; background: var(--fg); border-radius: 2px; transition: transform .3s cubic-bezier(.2,.8,.2,1), width .3s; }
.yt-panes { height: auto; transition: height .25s; }
.yt-panes .car-track { align-items: flex-start; height: auto; }
.yt-panes .car-slide { height: auto; padding-bottom: 24px; }
.yt-sec { margin: 0; padding: 22px 16px 12px; font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 4px; cursor: default; }
.yt-sec[data-tab-link] { cursor: pointer; }
.yt-sec .ico { width: 22px; height: 22px; }
.yt-sec-desc { margin: -6px 16px 12px; font-size: 13px; color: var(--fg2); line-height: 1.4; }

/* featured upload on the channel home */
.yt-feat { cursor: pointer; }
.yt-feat-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--elev); }
.yt-feat.short .yt-feat-media { aspect-ratio: 4 / 5; }
.yt-feat-media > .m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-feat-badge { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 12.5px; font-weight: 500; padding: 4px 8px 4px 6px; border-radius: 6px; }
.yt-feat-badge .ico { width: 16px; height: 16px; }
.yt-feat-meta { display: flex; gap: 12px; padding: 12px 12px 6px 16px; }
.yt-feat-meta > div { flex: 1; min-width: 0; }
.yt-feat-meta h3 { margin: 0 0 5px; font-size: 16px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-feat-meta p { margin: 0; font-size: 12.5px; color: var(--fg2); display: flex; gap: 10px; align-items: center; }
.yt-feat-meta p span, .yt-bcard-meta span { display: inline-flex; align-items: center; gap: 2px; }
.yt-feat-meta p .ico, .yt-bcard-meta .ico { width: 12px; height: 12px; stroke-width: 1.8; }

/* "For you" shelf */
.yt-foryou { display: flex; gap: 12px; padding: 0 16px; scroll-padding: 16px; }
.yt-bcard { flex: 0 0 min(72%, 290px); cursor: pointer; }
.yt-bcard .yt-thumb { border-radius: 12px; }
.yt-bcard-txt { display: flex; gap: 6px; padding-top: 10px; }
.yt-bcard-txt h3 { flex: 1; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-bcard-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--fg2); display: flex; gap: 10px; }

/* rows (playlist, Videos, Live) */
.yt-row { display: flex; gap: 12px; padding: 6px 8px 6px 16px; cursor: pointer; }
.yt-row-thumb { position: relative; width: 152px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; flex: none; background: var(--elev); }
.yt-row-thumb > .m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-row-thumb .yt-dur { right: 4px; bottom: 4px; }
.yt-row-txt { flex: 1; min-width: 0; }
.yt-row-txt h3 { margin: 0 0 3px; font-size: 14px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.yt-row-txt p { line-height: 1.4; }
.yt-row .yt-kebab .ico { width: 18px; height: 18px; }
.yt-expand { display: grid !important; place-items: center; width: 100%; height: 44px; }
.yt-expand .ico { width: 22px; height: 22px; transition: transform .25s; }
.yt-expand.open .ico { transform: rotate(180deg); }
.yt-pl-thumb::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 3px 0 rgba(255,255,255,.18); pointer-events: none; }
.yt-pl-count { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 4px; background: rgba(0,0,0,.7); color: #fff; font-size: 12px; font-weight: 500; padding: 4px 0; }
.yt-pl-count .ico { width: 14px; height: 14px; }
.yt-pl-view { color: var(--fg) !important; font-weight: 500; margin-top: 2px !important; }
.yt-pl-head { padding: 14px 16px 8px; font-size: 15px; }
.yt-pl-head b { font-weight: 700; }

/* Shorts: two-row shelf on Home, 3-column grid in the Shorts tab */
.yt-srows { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: calc((var(--sw) - 4px) / 3); gap: 2px; }
.yt-sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.yt-stile { position: relative; display: block; aspect-ratio: 9 / 15; overflow: hidden; background: var(--elev) !important; padding: 0 !important; }
.yt-stile > .m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-stile::before { content: ''; position: absolute; inset: 60% 0 0 0; background: linear-gradient(transparent, rgba(0,0,0,.55)); z-index: 1; }
.yt-stile-v { position: absolute; left: 8px; bottom: 8px; z-index: 2; color: #fff; font-size: 13.5px; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.yt-sort { display: flex; gap: 10px; padding: 14px 16px 10px; }
.yt-sort button { height: 32px; padding: 0 12px !important; border-radius: 8px; background: var(--elev) !important; font-size: 14px; font-weight: 500; }
.yt-sort button.on { background: var(--fg) !important; color: var(--bg) !important; }
.yt-none { padding: 40px 20px; text-align: center; color: var(--fg2); margin: 0; }

/* Posts shelf on Home */
.yt-pcards { display: flex; gap: 12px; padding: 0 16px; }
.yt-pcard { flex: 0 0 min(78%, 300px); border: 1px solid var(--sep); border-radius: 12px; padding: 12px 12px 4px; display: flex; flex-direction: column; cursor: pointer; }
.yt-pcard-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg2); white-space: nowrap; overflow: hidden; }
.yt-pcard-head b { color: var(--fg); font-weight: 500; }
.yt-pcard-body { flex: 1; display: flex; gap: 12px; margin-top: 10px; }
.yt-pcard-body p { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.yt-pcard-img { position: relative; flex: none; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; background: var(--elev); }
.yt-pcard-img > .m { width: 100%; height: 100%; object-fit: cover; }
.yt-pcard-img i { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-style: normal; padding: 0 5px; border-radius: 4px; }
.yt-pcard-actions { display: flex; align-items: center; gap: 14px; height: 40px; }
.yt-pcard-actions button { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.yt-pcard-actions .ico { width: 19px; height: 19px; }

/* ---------- Desktop (PC main board) ---------- */
.ytd { background: var(--bg); color: var(--fg); font-family: Roboto, 'Segoe UI', Arial, sans-serif; }
.ytd-top { position: absolute; inset: 0 0 auto 0; height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 16px; z-index: 5; background: var(--bg); }
.ytd-top .ico { width: 24px; height: 24px; }
.ytd-top .yt-logo svg { width: 29px; height: 20px; }
.ytd-top .yt-logo b { font-size: 19px; }
.ytd-search { width: 540px; height: 40px; display: flex; align-items: center; border: 1px solid var(--sep); border-radius: 20px; overflow: hidden; }
.ytd-search span { flex: 1; padding: 0 16px; color: var(--fg2); font-size: 15px; }
.ytd-search button { width: 64px; height: 100%; display: grid !important; place-items: center; background: var(--elev) !important; border-left: 1px solid var(--sep) !important; }
.ytd-mic { width: 40px; height: 40px; border-radius: 50%; background: var(--elev) !important; display: grid; place-items: center; }
.ytd-create { display: flex !important; align-items: center; gap: 6px; background: var(--elev) !important; border-radius: 18px; height: 36px; padding: 0 14px 0 10px !important; font-size: 14px; font-weight: 500; }
.ytd-guide { position: absolute; top: 56px; left: 0; bottom: 0; width: 220px; padding: 12px; overflow: hidden; }
.ytd-gi { display: flex; align-items: center; gap: 22px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.ytd-gi.on { background: var(--elev); font-weight: 500; }
.ytd-gi .ico { width: 22px; height: 22px; }
.ytd-guide hr { border: 0; border-top: 1px solid var(--sep); margin: 12px 0; }
.ytd-guide h5 { margin: 6px 12px 6px; font-size: 16px; font-weight: 500; }
.ytd-main { top: 56px; left: 232px; right: 0; padding: 0 24px 40px 16px; }
.ytd-chips { position: sticky; top: 0; z-index: 3; background: var(--bg); display: flex; gap: 12px; padding: 10px 0 14px; }
.ytd-chips button { flex: none; height: 32px; padding: 0 12px !important; border-radius: 8px; background: var(--elev) !important; font-size: 14px; font-weight: 500; }
.ytd-chips button.on { background: var(--fg) !important; color: var(--bg) !important; }
.ytd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 16px; margin-top: 8px; }
.ytd-card { cursor: pointer; }
.ytd-card .yt-thumb { border-radius: 12px; transition: border-radius .2s; }
.ytd-card .yt-thumb.playing { border-radius: 0; }
.ytd-meta { display: flex; gap: 12px; padding-top: 12px; }
.ytd-meta > div { flex: 1; min-width: 0; }
.ytd-meta h3 { margin: 0 0 4px; font-size: 16px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ytd-meta p { margin: 0; font-size: 14px; color: var(--fg2); line-height: 1.45; }
.ytd-shorts { margin: 40px 0 36px; }
.ytd-shorts h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 20px; font-weight: 700; }
.ytd-shorts h3 .ico { width: 26px; height: 26px; }
.ytd-srow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ytd-sthumb { aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--elev); }
.ytd-short h4 { margin: 10px 0 4px; font-size: 16px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ytd-short p { margin: 0; font-size: 14px; color: var(--fg2); }

/* ---------- Community posts ---------- */
.yt-cpost { margin: 0 12px 18px; border: 1px solid var(--sep); border-radius: 12px; padding: 12px 12px 4px; }
.yt-cp-head { display: flex; align-items: center; gap: 10px; }
.yt-cp-who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.yt-cp-who b { font-weight: 500; font-size: 14px; }
.yt-cp-who span { color: var(--fg2); }
.yt-cp-text { margin: 10px 0; font-size: 14.5px; line-height: 1.4; }
.yt-cp-media { position: relative; border-radius: 8px; overflow: hidden; background: var(--elev); }
.yt-cp-media > .m, .yt-cp-media > .car { position: absolute; inset: 0; }
.yt-cp-dots { margin-top: 8px; --dot-on: var(--fg); --dot-off: var(--sep); }
.yt-cp-actions { display: flex; align-items: center; gap: 18px; height: 44px; color: var(--fg); }
.yt-cp-actions button { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.yt-cp-actions .ico { width: 21px; height: 21px; }
.yt-cp-actions .on { color: var(--fg); }
.yt-ch-posts { padding-top: 12px; }
.yt-cp-who.col { flex-direction: column; align-items: flex-start; gap: 1px; font-size: 12px; }
.yt-cp-who.col b { font-size: 13px; }
.yt-cpost .car-count { opacity: 1; top: 10px; right: 10px; }
.yt-cp-text.clamp { position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-cp-text.clamp.open { display: block; }
.yt-cp-text .yt-readmore { position: absolute; right: 0; bottom: 0; padding: 0 0 0 28px !important; font-size: 13px; color: var(--fg2); background: linear-gradient(90deg, transparent, var(--bg) 24px) !important; }
.yt-cp-text.open .yt-readmore { display: none; }
.yt-cp-comments { margin: 4px 0 10px; background: var(--elev); border-radius: 12px; padding: 10px 12px 12px; }
.yt-cp-comments b { font-size: 14px; font-weight: 500; }
.yt-cp-comments div { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.yt-cp-comments .yt-cp-input { flex: 1; height: 30px; line-height: 30px; padding: 0 12px; border-radius: 15px; background: var(--bg); color: var(--fg2); font-size: 13px; }
.yt-ch-posts .yt-cpost.full { border: 0; border-radius: 0; margin: 0; padding: 14px 16px 6px; border-bottom: 1px solid var(--sep); }
.yt-ch-posts .yt-cpost.full .yt-cp-media { margin: 0 -4px; }

/* ---------- Desktop channel ---------- */
.ytd-top button { display: inline-flex; align-items: center; }
.ytd-guide .ytd-gi[data-go] { cursor: pointer; }
.ytd-guide h5 { display: flex; align-items: center; gap: 6px; }
.ytd-guide h5 .ico { width: 16px; height: 16px; }
.ytd-ch .ytd-main { padding: 0 24px 60px; }
.ytdc { max-width: 1000px; margin: 0 auto; }
.ytdc-banner { margin-top: 4px; aspect-ratio: 6.2 / 1; border-radius: 14px; overflow: hidden; background: var(--elev); }
.ytdc-banner > .m { width: 100%; height: 100%; object-fit: cover; }
.ytdc-head { display: flex; align-items: center; gap: 22px; padding: 22px 0 6px; }
.ytdc-head > div { min-width: 0; }
.ytdc-head h1 { margin: 0 0 8px; font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.4px; }
.ytdc-head p { margin: 0 0 6px; font-size: 14px; color: var(--fg2); }
.ytdc-head p b { color: var(--fg); font-weight: 500; }
.ytdc-desc b { color: var(--fg) !important; }
.ytdc-link { display: flex; align-items: center; gap: 4px; }
.ytdc-link .ico { width: 15px; height: 15px; color: var(--link); }
.ytdc-link b { color: var(--link) !important; }
.ytdc-head .yt-subscribe { margin-top: 8px; height: 36px; }
.ytdc-tabs { position: sticky; top: 0; z-index: 3; background: var(--bg); display: flex; align-items: stretch; gap: 8px; height: 48px; border-bottom: 1px solid var(--sep); margin: 8px 0 0; }
.ytdc-tabs button { padding: 0 10px !important; font-size: 15px; font-weight: 500; color: var(--fg2); box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .2s, color .2s; }
.ytdc-tabs button:hover { color: var(--fg); box-shadow: inset 0 -2px 0 var(--sep); }
.ytdc-tabs button.on { color: var(--fg); box-shadow: inset 0 -2px 0 var(--fg); }
.ytdc-tabs .ytdc-search { margin-left: 8px; }
.ytdc-tabs .ytdc-search .ico { width: 22px; height: 22px; }
.ytdc-pane { padding-top: 18px; }
.ytdc-pane hr { border: 0; border-top: 1px solid var(--sep); margin: 22px 0; }
.ytdc-pane section h3, .ytdc-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 20px; font-weight: 700; }
.ytdc-pane section h3[data-tab-link] { cursor: pointer; }
.ytdc-pane section h3 .yt-shorts-logo .ico { width: 24px; height: 24px; }
.ytdc-sub { margin: -8px 0 14px; font-size: 13.5px; color: var(--fg2); }
.ytdc .ytdc-playall { display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 12px !important; border-radius: 16px; font-size: 14px; font-weight: 500; }
.ytdc .ytdc-playall:hover { background: var(--elev) !important; }
.ytdc .ytdc-playall .ico { width: 18px; height: 18px; }
.ytdc-feat { display: flex; gap: 18px; cursor: pointer; }
.ytdc-feat .yt-thumb { width: 300px; flex: none; border-radius: 12px; }
.ytdc-feat > div:not(.yt-thumb) { flex: 1; min-width: 0; }
.ytdc-feat h3 { margin: 0 0 8px; font-size: 18px; font-weight: 500; line-height: 1.3; }
.ytdc-feat p { margin: 0 0 8px; font-size: 13.5px; color: var(--fg2); }
.ytdc-feat-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.ytdc-row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ytdc-row6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ytdc-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ytdc-row3 .yt-pcard { flex: none; min-height: 190px; }
.ytdc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 16px; }
.ytdc-sgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px 10px; }
.ytd-card.ch .ytd-meta { padding-top: 10px; }
.ytd-card.ch .ytd-meta h3 { font-size: 15px; }
.ytd-card.ch .ytd-meta p { font-size: 13px; }
.ytdc-row6 .ytd-card .yt-thumb { border-radius: 8px; }
.ytdc-row6 .ytd-card.ch .ytd-meta h3 { font-size: 14px; }
.ytdc-row6 .ytd-card.ch .ytd-meta p { font-size: 12.5px; }
.ytdc-row6 .ytd-short h4, .ytdc-sgrid .ytd-short h4 { font-size: 15px; }
.ytd-short { cursor: pointer; }
.ytdc-pl .yt-thumb { overflow: hidden; }
.ytdc-posts { max-width: 640px; }
.ytdc-posts .yt-cpost { margin: 0 0 16px; }