@import url('vibetube-2.css');

:root{--sidebar:238px;--topbar:64px;--surface:#0f0f10;--surface-2:#202124;--hover:#292a2d;--played:#ff1744;--buffered:#c9c9cf}
html[data-theme="light"]{color-scheme:light;--bg:#f7f7f8;--panel:#fff;--panel-2:#ededf0;--soft:#e4e4e8;--line:#d6d6da;--text:#151518;--muted:#616168;--shadow:0 22px 70px rgba(35,35,45,.15);--surface:#fff;--surface-2:#eeeef1;--hover:#dedee3}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.9);border-color:rgba(0,0,0,.08)}
html[data-theme="light"] .search input{background:#fff;border-color:#c9c9ce;color:#111}
html[data-theme="light"] .search>button{background:#eee;border-color:#c9c9ce}
html[data-theme="light"] .chips{background:linear-gradient(var(--bg) 78%,transparent)}
html[data-theme="light"] .chips button.is-active{background:#151518;color:#fff}
html[data-theme="light"] .player-menu{background:rgba(255,255,255,.97);border-color:#d7d7dc}
html[data-theme="light"] .mobile-nav{background:rgba(255,255,255,.95)}

.topbar{grid-template-columns:minmax(205px,1fr) minmax(320px,720px) minmax(220px,1fr);gap:14px;padding-inline:18px}
.legacy-profile{display:none}
.search-shell{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:center;gap:9px}.search-shell .search{width:100%}.topbar-actions{justify-self:end;display:flex;align-items:center;gap:8px}
.topbar-actions .icon-button,.search-shell>.icon-button{background:var(--soft);font-size:17px}
.voice-button.is-listening{background:var(--red);color:#fff;animation:voicePulse 1s infinite}
@keyframes voicePulse{50%{box-shadow:0 0 0 9px rgba(255,23,68,.16)}}
.signin-button{height:40px;padding:0 17px;border:1px solid #3f6fba;border-radius:999px;background:transparent;color:#4aa3ff;font-weight:750;cursor:pointer}
.signin-button:hover{background:rgba(55,135,255,.12)}

.sidebar{overflow-y:auto;padding:10px 12px 46px;scrollbar-width:thin}
.yt-nav{display:block!important}.nav-group{padding:9px 0;border-bottom:1px solid var(--line)}.nav-group:last-child{border:0}.nav-group>b{display:block;padding:7px 14px 6px;font-size:16px}.nav-item{height:42px;gap:23px;border-radius:10px}.sidebar-footer{padding:18px 14px;color:var(--muted);font-size:11px;line-height:1.6}.sidebar__note{display:none}
.sidebar.is-collapsed .nav-group>b,.sidebar.is-collapsed .sidebar-footer{display:none}
body.watch-mode .sidebar,body.shorts-mode .sidebar{transform:translateX(-100%)}
body.watch-mode .main,body.shorts-mode .main{margin-left:0}
body.watch-mode .watch-ambient{left:0}

.card-open{display:block}.card-body{align-items:start}.card-avatar{padding:0;border:0;color:inherit;cursor:pointer;flex:none}.card-title,.channel-link{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}.channel-link{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-link:hover{text-decoration:underline}.card-title strong{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.verified{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#83838b;color:#fff;font-size:9px;line-height:1;vertical-align:1px}.short-card .card-avatar{display:grid}.short-card .card-body{grid-template-columns:32px 1fr}.short-card .card-avatar{width:32px;height:32px}.video-card.is-filtered,.community-post.is-filtered,.playlist-card.is-filtered{display:none!important}

.search-block{display:flex;flex-direction:column;gap:14px;padding-bottom:26px;border-bottom:1px solid var(--line)}.search-block+.search-block{padding-top:18px}.search-block h2{margin:0 0 4px;font-size:18px}.result-list{max-width:1180px}.result-video{display:grid;grid-template-columns:minmax(250px,390px) minmax(0,1fr);gap:18px;padding:2px 0}.result-video .card-open{display:block}.result-video .card-body{display:grid;padding-top:5px}.result-video .card-title strong{font-size:18px}.result-video .thumb{border-radius:11px}.channel-results{gap:0}

.channel-hub{margin:-8px 0 28px}.channel-hub .channel-banner{height:min(18vw,240px);border-radius:17px;background-color:var(--panel);background-size:cover;background-position:center}.channel-main{background:transparent;padding:22px 12px;gap:24px}.channel-main>img{width:132px;height:132px}.channel-summary{min-width:0}.channel-summary h1{font-size:34px;letter-spacing:-1.2px}.channel-summary small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:820px;line-height:1.5}.channel-subscribe{margin-top:13px}.channel-tabs{position:sticky;top:var(--topbar);z-index:20;display:flex;align-items:center;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);background:var(--bg)}.channel-tabs>button{flex:none;height:49px;padding:0 15px;border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);font-weight:700;cursor:pointer}.channel-tabs>button:hover{color:var(--text)}.channel-tabs>button.is-active{color:var(--text);border-color:var(--text)}.channel-filter{margin-left:auto;flex:0 0 min(260px,28vw);display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--line)}.channel-filter input{width:100%;height:38px;border:0;background:transparent;color:var(--text);outline:0}.playlist-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.playlist-card button{display:flex;flex-direction:column;gap:8px;width:100%;border:0;background:none;text-align:left;cursor:pointer}.playlist-card .thumb b{position:absolute;right:0;bottom:0;top:0;width:38%;display:grid;place-items:center;background:rgba(0,0,0,.72);color:#fff}.playlist-card small{color:var(--muted)}.community-post{max-width:760px;margin:0 0 18px;padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.community-post header{display:grid;grid-template-columns:42px auto 1fr;align-items:center;gap:10px}.community-post header img{width:42px;height:42px;border-radius:50%;object-fit:cover}.community-post header small{color:var(--muted)}.community-post p{white-space:pre-wrap;line-height:1.55}.post-image{display:block;max-width:100%;max-height:620px;border-radius:14px;object-fit:contain;background:#000}.community-post footer{margin-top:14px;color:var(--muted)}.channel-back{margin-bottom:16px;border:0;border-radius:999px;padding:9px 14px;background:var(--soft);cursor:pointer}

body.watch-mode .topbar{background:rgba(11,11,12,.18);border-bottom-color:transparent;backdrop-filter:blur(10px) saturate(1.15)}html[data-theme="light"] body.watch-mode .topbar{background:rgba(255,255,255,.2);border-bottom-color:transparent}body.watch-mode .search input{background:rgba(12,12,14,.38)}body.watch-mode .search>button,body.watch-mode .search-shell>.icon-button,body.watch-mode .topbar-actions .icon-button{background:rgba(34,34,37,.48)}html[data-theme="light"] body.watch-mode .search input{background:rgba(255,255,255,.55)}body.watch-mode .watch-ambient{top:0}body.watch-mode .main{padding:calc(var(--topbar) + 12px) 12px 80px}.watch-layout{width:100%;max-width:none;margin:0;grid-template-columns:minmax(0,1fr) clamp(350px,30vw,700px);gap:16px}.player{border-radius:13px}.watch-ambient{height:75vh;opacity:.23;filter:blur(76px) saturate(1.55);transform:scale(1.18);transition:background-image .4s ease,opacity .3s}.watch-ambient--secondary{left:15%;right:35%;top:36vh;height:42vh;opacity:.19;filter:blur(92px) saturate(2);background-position:70% 60%;mask-image:radial-gradient(ellipse,#000,transparent 70%)}.video-info{position:relative}.video-info>h1{font-weight:750}.owner:hover strong{text-decoration:underline}.description:not(.is-open) #description-text{-webkit-line-clamp:1}.quality-pill{font-weight:750}.player.is-buffering .player__big-play{opacity:0}

.seek{-webkit-appearance:none;appearance:none;height:17px;background:transparent;--played:0%;--buffered:0%}.seek::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--red) 0 var(--played),rgba(255,255,255,.78) var(--played) var(--buffered),rgba(255,255,255,.25) var(--buffered) 100%)}.seek::-moz-range-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--red) 0 var(--played),rgba(255,255,255,.78) var(--played) var(--buffered),rgba(255,255,255,.25) var(--buffered) 100%)}.seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-4.5px;border:0;border-radius:50%;background:var(--red);transform:scale(.45);transition:transform .12s}.seek:hover::-webkit-slider-thumb,.seek:active::-webkit-slider-thumb{transform:scale(1)}.seek::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--red)}.seek-preview{position:absolute;z-index:12;bottom:66px;transform:translateX(-50%);display:grid;justify-items:center;gap:5px;padding:5px;border-radius:8px;background:#0b0b0d;box-shadow:0 8px 32px rgba(0,0,0,.55);pointer-events:none}.seek-preview>div{border-radius:5px;background-color:#19191b;background-repeat:no-repeat}.seek-preview span{font-size:11px;color:#fff}.player-menu{width:min(390px,calc(100% - 28px))}.player-menu__head{grid-template-columns:42px minmax(0,1fr) 42px;min-height:54px;padding:6px 8px}.player-menu__head strong{padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-menu__head #menu-close{grid-column:3}.menu-row{min-height:56px}

.shorts-view{min-height:calc(100dvh - var(--topbar));margin:-22px max(-20px,-3vw) -80px}.shorts-stage{height:calc(100dvh - var(--topbar));min-height:640px;padding:8px 12px}.shorts-player{height:calc(100dvh - var(--topbar) - 16px);max-height:none;border-radius:14px}.shorts-player video{object-fit:contain}.shorts-player.is-loading::after{content:"";position:absolute;z-index:8;left:50%;top:50%;width:42px;height:42px;margin:-21px;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.shorts-actions button.is-on>span{background:#e71943;color:#fff}.shorts-info .verified{background:#fff;color:#333}.shorts-info .avatar img{width:100%;height:100%;object-fit:cover}.shorts-glow{opacity:.45;filter:blur(40px) saturate(1.5)}

.settings-card{max-width:820px}.settings-card>label{min-height:72px}.sidebar-footer,.channel-summary,.community-post,.player-menu,.settings-card{scrollbar-color:#666 transparent}

@media(min-width:931px){body.watch-mode .player{width:100%}}
@media(max-width:1100px){.topbar{grid-template-columns:190px minmax(250px,1fr) auto}.signin-button{padding-inline:12px}.watch-layout{grid-template-columns:minmax(0,1fr) 330px}.playlist-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:930px){.watch-layout{grid-template-columns:1fr}.watch-layout .related{padding-top:8px}.channel-main>img{width:104px;height:104px}.playlist-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.topbar{grid-template-columns:auto minmax(0,1fr) auto}.topbar-actions{gap:4px}.topbar-actions .icon-button,.search-shell>.icon-button{width:36px;height:36px}.signin-button{width:37px;padding:0;font-size:0}.signin-button::before{content:"";font-size:16px}.search{grid-template-columns:1fr 44px}.watch-ambient--secondary{right:0}.result-video{grid-template-columns:42% minmax(0,1fr);gap:10px}.result-video .card-body{grid-template-columns:1fr;padding-top:0}.result-video .card-avatar{display:none}.result-video .card-title strong{font-size:13px}.channel-hub .channel-banner{height:24vw;min-height:90px}.channel-main>img{width:78px;height:78px}.channel-summary h1{font-size:23px}.channel-filter{position:sticky;right:0;flex-basis:170px;background:var(--bg)}.playlist-grid{grid-template-columns:1fr 1fr}.shorts-stage{min-height:0;height:calc(100dvh - var(--topbar));padding:0}.shorts-player{height:100%;width:100%;border-radius:0}.comments-drawer__panel{height:min(68vh,620px)}.seek-preview{bottom:61px}.short-card .card-avatar{display:grid}.short-card .card-body{grid-template-columns:30px 1fr}}
@media(max-width:470px){.topbar{gap:4px;padding-inline:6px}.topbar-actions #theme-toggle{display:none}.voice-button{font-size:14px!important}.search input{font-size:13px}.video-grid{grid-template-columns:1fr}.playlist-grid{grid-template-columns:1fr}.channel-main{gap:13px}.channel-main>img{width:66px;height:66px}.channel-summary small{display:none}.channel-tabs>button{padding-inline:11px}.channel-filter{flex-basis:145px}.result-video{grid-template-columns:44% 1fr}.shorts-info{bottom:28px}.shorts-actions{bottom:30px}}

/* Watch and Shorts keep the wide canvas, while the hamburger opens navigation as an overlay. */
.sidebar-backdrop{display:none;position:fixed;z-index:57;inset:var(--topbar) 0 0;border:0;background:transparent;backdrop-filter:none}
body.sidebar-open.watch-mode .sidebar,body.sidebar-open.shorts-mode .sidebar{z-index:59;width:var(--sidebar);transform:translateX(0);box-shadow:22px 0 70px rgba(0,0,0,.48)}
body.sidebar-open.watch-mode .sidebar-backdrop,body.sidebar-open.shorts-mode .sidebar-backdrop{display:block}
@media(max-width:700px){#menu-button{display:grid}.topbar__start{gap:2px}.topbar__start .brand{padding-left:0}body.sidebar-open.watch-mode .sidebar,body.sidebar-open.shorts-mode .sidebar{display:block;width:min(86vw,310px)}body.sidebar-open .sidebar .nav-item{gap:22px}body.sidebar-open .sidebar .nav-group>b,body.sidebar-open .sidebar .sidebar-footer{display:block}}
/* Custom adaptive playback layer */
#official-main-player,#official-short-player{position:absolute!important;z-index:1;inset:0;width:100%!important;height:100%!important;border:0;background:#000}
.player.is-official>video{display:none!important}
.player.is-official>.player__loading,.player.is-official>.player__error{z-index:8}
.shorts-player.is-official>video{display:none!important}
.shorts-player.is-official .shorts-glow{z-index:0}
.shorts-player.is-official .shorts-gradient{z-index:2}
.shorts-player.is-official .shorts-info,.shorts-player.is-official .shorts-actions{z-index:4}
.shorts-player.is-official .shorts-center-play{z-index:5}
.shorts-player.is-official .shorts-progress{z-index:6}
/* Refined verified badges and responsive channel Shorts */
.verified{display:inline-grid!important;place-items:center;flex:none;width:13px;height:13px;margin-inline-start:5px;border-radius:50%;background:#73737b;color:#fff;font-size:8px;font-weight:950;line-height:1;vertical-align:1px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.channel-link .verified,.card-title .verified{position:relative;top:-1px}
.channel-summary h1 .verified{width:19px;height:19px;margin-inline-start:7px;font-size:12px;vertical-align:4px;background:#8a8a91}
html[data-theme="light"] .verified{background:#606067;color:#fff;box-shadow:none}
.view[data-view="search"]:has(#channel-profile:not(:empty))>.section-head{display:none}
.channel-hub{max-width:1450px;margin:0 auto 24px}
#channel-profile:not(:empty)~#search-results{max-width:1450px;margin-inline:auto}
.channel-shorts-toolbar{display:flex;gap:8px;margin:14px 0 22px}
.channel-shorts-toolbar button{height:34px;padding:0 15px;border:0;border-radius:9px;background:var(--soft);color:var(--text);font-weight:750;cursor:pointer}
.channel-shorts-toolbar button:hover{background:var(--hover)}
.channel-shorts-toolbar button.is-active{background:#f1f1f3;color:#111}
.channel-shorts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,210px));justify-content:start;gap:28px 10px;width:100%}
.channel-shorts-grid .video-card{min-width:0}
.channel-shorts-grid .thumb{aspect-ratio:9/16;border-radius:10px;background:#111}
.channel-shorts-grid .thumb img{width:100%;height:100%;object-fit:cover}
.channel-shorts-grid .card-body{grid-template-columns:1fr;padding-top:9px}
.channel-shorts-grid .card-avatar,.channel-shorts-grid .channel-link{display:none!important}
.channel-shorts-grid .card-title strong{font-size:14px;-webkit-line-clamp:2}
.channel-shorts-grid .card-copy small{margin-top:5px}
@media(max-width:930px){.channel-shorts-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:24px 10px}}
@media(max-width:700px){.channel-hub{margin-top:0}.channel-hub .channel-banner{border-radius:11px}.channel-shorts-toolbar{margin:10px 0 16px}.channel-shorts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 8px}.channel-shorts-grid .card-body{display:block}.channel-shorts-grid .card-title strong{font-size:13px}}
/* Muted card hover previews */
.video-grid .video-card{position:relative}
.card-hover-preview{position:absolute;z-index:12;left:0;right:0;top:0;aspect-ratio:16/9;display:none;overflow:hidden;border-radius:11px;background:#000;box-shadow:0 14px 34px rgba(0,0,0,.34);cursor:pointer}
.video-card.is-previewing .card-hover-preview{display:block}
#card-hover-player{position:absolute!important;inset:0;width:100%!important;height:100%!important;border:0;background:#000}
.card-hover-controls{position:absolute;z-index:3;left:0;right:0;bottom:0;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:4px;padding:18px 8px 6px;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.card-hover-controls button{width:34px;height:34px;border:0;border-radius:50%;background:rgba(20,20,22,.75);color:#fff;display:grid;place-items:center;cursor:pointer}
.card-hover-controls input{-webkit-appearance:none;appearance:none;width:100%;height:14px;background:transparent;--played:0%;--buffered:0%;cursor:pointer}
.card-hover-controls input::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:linear-gradient(to right,var(--red) 0 var(--played),rgba(255,255,255,.82) var(--played) var(--buffered),rgba(255,255,255,.25) var(--buffered) 100%)}
.card-hover-controls input::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border:0;border-radius:50%;background:var(--red)}
.card-hover-controls input::-moz-range-track{height:3px;border-radius:99px;background:linear-gradient(to right,var(--red) 0 var(--played),rgba(255,255,255,.82) var(--played) var(--buffered),rgba(255,255,255,.25) var(--buffered) 100%)}
.card-hover-controls input::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--red)}
@media(hover:none),(pointer:coarse){.card-hover-preview{display:none!important}}
/* Mixed home feed and infinite-scroll sections */
.home-feed-heading{margin-top:14px;margin-bottom:14px}
.home-feed-heading h1{font-size:clamp(19px,1.7vw,24px);letter-spacing:-.35px}
.home-feed-block{margin-top:48px}
.shorts-shelf--secondary{margin-top:48px}
.explore-topics{margin:52px 0 26px;padding-top:4px;border-top:1px solid var(--line)}
.explore-topics .section-head{margin-bottom:12px}
.explore-topics .section-head h2{font-size:20px;letter-spacing:-.35px}
.explore-topic-row{display:flex;gap:9px;overflow-x:auto;padding:1px 0 9px;scrollbar-width:thin}
.explore-topic-row button{flex:none;height:36px;padding:0 15px;border:0;border-radius:9px;background:var(--soft);color:var(--text);font-size:13px;font-weight:720;cursor:pointer}
.explore-topic-row button:hover{background:var(--hover)}
.feed-grid-tail{margin-top:8px}
.feed-sentinel{height:76px;display:grid;place-items:center}
.feed-sentinel span{display:none;width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--text);border-radius:50%;animation:spin .7s linear infinite}
.feed-sentinel.is-loading span{display:block}
.feed-sentinel.is-finished{height:18px}
@media(max-width:700px){.home-feed-block,.shorts-shelf--secondary{margin-top:34px}.explore-topics{margin-top:38px}.home-feed-heading h1{font-size:19px}.explore-topics .section-head h2{font-size:18px}.explore-topic-row button{height:34px;padding-inline:13px;font-size:12px}}
/* Premium Tube controls over the adaptive main player */
.player.is-official::before,.player.is-official::after{content:"";position:absolute;z-index:2;left:0;right:0;pointer-events:none}
.player.is-official::before{top:0;height:64px;background:linear-gradient(rgba(0,0,0,.96),rgba(0,0,0,.52) 42%,transparent)}
.player.is-official::after{bottom:0;height:86px;background:linear-gradient(transparent,rgba(0,0,0,.92) 50%,#000)}
.player.is-official>.player__shade{z-index:3;background:linear-gradient(rgba(0,0,0,.38),transparent 18%,transparent 62%,rgba(0,0,0,.88))}
.player.is-official>.player__big-play{z-index:5}
.player.is-official>.player__controls{z-index:6}
.player.is-official>.player-menu{z-index:9}
.player.is-official>.player__loading,.player.is-official>.player__error{z-index:11}
.player.is-official .player__controls{background:linear-gradient(transparent,rgba(0,0,0,.82));padding-top:20px}
/* Clean Premium Tube playback surfaces */
.player>.official-player-host,.shorts-player>.official-player-host{position:absolute!important;z-index:1;inset:0;width:100%!important;height:100%!important;background:#000;overflow:hidden}
.player>.official-player-host iframe,.shorts-player>.official-player-host iframe{position:absolute!important;inset:0;width:100%!important;height:100%!important;border:0}
.shorts-player.is-official::before,.shorts-player.is-official::after{content:"";position:absolute;z-index:3;left:0;right:0;pointer-events:none}
.shorts-player.is-official::before{top:0;height:62px;background:linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.38) 48%,transparent)}
.shorts-player.is-official::after{bottom:0;height:94px;background:linear-gradient(transparent,rgba(0,0,0,.88) 55%,#000)}
.card-hover-preview>.card-hover-mask{position:absolute;z-index:2;left:0;right:0;pointer-events:none}
.card-hover-mask--top{top:0;height:54px;background:linear-gradient(rgba(0,0,0,.88),rgba(0,0,0,.3) 48%,transparent)}
.card-hover-mask--bottom{bottom:0;height:70px;background:linear-gradient(transparent,rgba(0,0,0,.92) 58%,#000)}
.card-hover-controls{grid-template-columns:38px 38px minmax(0,1fr)}
.card-hover-controls [data-preview-cc]{font-size:11px;font-weight:900}
.card-hover-controls [data-preview-cc].is-on{background:#fff;color:#111}
.shorts-row .short-card{position:relative}.shorts-row .card-hover-preview{aspect-ratio:9/16;border-radius:10px;box-shadow:none}
.card-hover-preview.is-short-preview .card-hover-controls{grid-template-columns:38px minmax(0,1fr)}
.card-hover-preview.is-short-preview [data-preview-mute]{display:none!important}
.card-hover-preview.is-short-preview #card-hover-player{inset:0}
@media(max-width:700px){.shorts-player.is-official::before{height:54px}.shorts-player.is-official::after{height:82px}}
/* Interaction shields and seamless page edges */
html,body{border:0!important;outline:0!important;background:var(--bg)!important}
html{scrollbar-color:#37373c var(--bg);overflow-x:hidden}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:10px;height:10px}
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:var(--bg)}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:#45454b;background-clip:padding-box}
.sidebar{border:0!important;outline:0!important;scrollbar-width:none}
.sidebar::-webkit-scrollbar{display:none}
.main{border:0!important;outline:0!important;background:var(--bg)}
.player-surface,.shorts-surface,.card-hover-open{position:absolute;inset:0;border:0;padding:0;background:transparent;cursor:pointer}
.player-surface{z-index:4}.player__big-play{z-index:5}.player__controls{z-index:6}.player-menu{z-index:9}.player__loading,.player__error{z-index:11}
.shorts-surface{z-index:3}
.card-hover-open{z-index:3;bottom:58px}
.card-hover-controls{z-index:4}
.player.is-official>.official-player-host iframe,.shorts-player.is-official>.official-player-host iframe,.player.is-official>#official-main-player,.shorts-player.is-official>#official-short-player,#card-hover-player{pointer-events:none!important}.player:not(.is-official)>#official-main-player,.shorts-player:not(.is-official)>#official-short-player{display:none!important}
.card-hover-mask--top{height:66px;background:linear-gradient(rgba(0,0,0,.96),rgba(0,0,0,.5) 50%,transparent)}
.card-hover-mask--bottom{height:92px;background:linear-gradient(transparent,rgba(0,0,0,.96) 54%,#000)}
.shorts-player.is-official::before{height:72px;background:linear-gradient(rgba(0,0,0,.94),rgba(0,0,0,.44) 50%,transparent)}
.shorts-player.is-official::after{height:110px;background:linear-gradient(transparent,rgba(0,0,0,.96) 54%,#000)}
@media(max-width:700px){html::-webkit-scrollbar,body::-webkit-scrollbar{width:0}.shorts-player.is-official::before{height:62px}.shorts-player.is-official::after{height:102px}}
/* Hide provider overlays while preserving the custom Premium Tube interface */
.player.is-official::before{height:72px;background:linear-gradient(#000 0 54%,rgba(0,0,0,.98) 68%,transparent 100%)}
.player.is-official::after{height:104px;background:linear-gradient(transparent 0 34%,rgba(0,0,0,.97) 58%,#000 100%)}
.card-hover-mask--top{height:78px;background:linear-gradient(#000 0 56%,rgba(0,0,0,.98) 70%,transparent 100%)}
.card-hover-mask--bottom{height:108px;background:linear-gradient(transparent 0 28%,rgba(0,0,0,.98) 54%,#000 100%)}
.shorts-player.is-official::before{height:84px;background:linear-gradient(#000 0 58%,rgba(0,0,0,.98) 72%,transparent 100%)}
.shorts-player.is-official::after{height:124px;background:linear-gradient(transparent 0 30%,rgba(0,0,0,.98) 56%,#000 100%)}
.shorts-info h1{display:none!important}
@media(max-width:700px){.player.is-official::before{height:58px}.card-hover-mask--top{height:64px}.shorts-player.is-official::before{height:72px}.shorts-player.is-official::after{height:112px}}
/* Playback stays clean: play/pause remains on surface click and the bottom controls */
#big-play,#shorts-play,.player__big-play,.shorts-center-play{display:none!important}
/* Original-aspect player frames: no mask, crop or zoom */
.player.is-official::before,.player.is-official::after,.shorts-player.is-official::before,.shorts-player.is-official::after,.card-hover-mask{display:none!important}
.player.is-official>#official-main-player{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.shorts-player.is-official>#official-short-player{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.card-hover-preview>#card-hover-player{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.shorts-player.is-official.is-loading::after{display:block!important;content:"";position:absolute;z-index:8;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;background:transparent!important;animation:spin .7s linear infinite;pointer-events:none}

/* V3.2 single-layer custom playback: iframe hosts are never rendered. */
.official-player-host,#official-main-player,#official-short-player{display:none!important}
.player>video,.shorts-player>video{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;background:#000}
.shorts-gradient{z-index:2}.shorts-surface{z-index:3}.shorts-info,.shorts-actions{z-index:4}.shorts-progress{z-index:6}
.card-open,.card-title,.related-card>a{color:inherit;text-decoration:none}
.related-card>a{width:100%;display:grid;grid-template-columns:minmax(180px,58%) minmax(0,1fr);gap:10px;border:0;background:none;text-align:left;padding:0;cursor:pointer}#related-list{display:flex;flex-direction:column;min-width:0}.related{min-width:0}.video-info,.comments-section{width:100%;max-width:100%;box-sizing:border-box}.video-info__row,.description{max-width:100%;box-sizing:border-box}
#owner-name{display:inline-flex;align-items:center;gap:5px}
#owner-name .verified{margin-inline-start:1px;position:relative;top:0}
.short-card .channel-link,.channel-link{display:flex;align-items:center;gap:1px}
.short-card .channel-link .verified,.channel-link .verified{margin-inline-start:4px}
@media(max-width:1250px){.related-card>a{grid-template-columns:minmax(145px,48%) minmax(0,1fr)}}
@media(max-width:930px){.related-card>a{grid-template-columns:minmax(190px,36%) 1fr}}
@media(max-width:700px){.related-card>a{grid-template-columns:168px 1fr}}
@media(max-width:420px){.related-card>a{grid-template-columns:44% 1fr}}
/* Full settings heading when the Back control is hidden. */
#menu-back.is-hidden + #menu-title{grid-column:1/3;min-width:0;text-align:left}
#menu-back:not(.is-hidden) + #menu-title{grid-column:2;min-width:0;text-align:center}
/* Hover-preview ambient colour glow. */
.video-card{isolation:isolate}
.video-card::before{content:"";position:absolute;z-index:-1;inset:-10px;border-radius:18px;background-image:var(--preview-glow);background-size:cover;background-position:center;filter:blur(25px) saturate(1.55);opacity:0;transform:scale(.94);transition:opacity .28s ease,transform .34s ease;pointer-events:none}
.video-card.is-previewing{z-index:14}
.video-card.is-previewing::before{opacity:.48;transform:scale(1.025)}
.short-card.is-previewing::before{opacity:.42;filter:blur(22px) saturate(1.6)}
@media(prefers-reduced-motion:reduce){.video-card::before{transition:none}}
/* Stable player menu header geometry. */
.player-menu__head #menu-title{display:block!important;width:auto!important;max-width:none!important;min-width:0!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap}
#menu-back.is-hidden + #menu-title{grid-column:1/3!important}
#menu-back:not(.is-hidden) + #menu-title{grid-column:2!important}
/* Desktop playback navigation uses real layout space; it never blurs or covers the player. */
@media(min-width:701px){
  body.sidebar-open.watch-mode .main,body.sidebar-open.shorts-mode .main{margin-left:var(--sidebar)}
  body.sidebar-open.watch-mode .watch-ambient{left:var(--sidebar)}
  body.sidebar-open.watch-mode .sidebar,body.sidebar-open.shorts-mode .sidebar{box-shadow:none}
  body.sidebar-open.watch-mode .sidebar-backdrop,body.sidebar-open.shorts-mode .sidebar-backdrop{display:none}
}
/* Compact watch metadata matching the reference composition. */
body.watch-mode .watch-stats{display:none}
.quality-pill--player{margin:0 4px 0 0;padding:4px 8px;border-color:rgba(255,255,255,.26);background:rgba(0,0,0,.48);color:#fff;font-size:11px;white-space:nowrap}
@media(max-width:700px){.quality-pill--player{display:inline-flex;max-width:72px;overflow:hidden;text-overflow:ellipsis;font-size:11px}}

/* YouTube-style top navigation progress. */
.page-progress{position:fixed;z-index:500;left:0;top:0;width:100%;height:3px;overflow:hidden;opacity:0;pointer-events:none}
.page-progress::after{content:"";display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#f50034,#ff3158);box-shadow:0 0 10px rgba(255,23,68,.8)}
.page-progress.is-active{opacity:1}
.page-progress.is-active::after{animation:pageProgress 9s cubic-bezier(.1,.65,.2,1) forwards}
.page-progress.is-complete::after{animation:none;transform:scaleX(1);transition:transform .16s ease}
.page-progress.is-complete{opacity:0;transition:opacity .22s ease .08s}
@keyframes pageProgress{0%{transform:scaleX(.04)}35%{transform:scaleX(.48)}70%{transform:scaleX(.76)}100%{transform:scaleX(.91)}}
/* PremiumTube 3.3.0 — SVG icons + mobile controls */
.icon-button svg,.voice-button svg,#theme-toggle svg,.meta-ico svg,.verified svg,.menu-check svg,
.card-hover-controls button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.verified svg{width:14px;height:14px;display:inline-block;vertical-align:-2px}
.menu-check{width:18px;min-width:18px;display:inline-grid;place-items:center}
.menu-check svg{width:14px;height:14px;stroke:var(--accent,#3ea6ff)}
.meta-ico{display:inline-flex;vertical-align:middle;margin-right:2px;opacity:.9}
.meta-ico svg{width:14px;height:14px;display:inline-block}
.card-hover-controls button{display:inline-grid;place-items:center}
.card-hover-controls button svg{width:16px;height:16px}
/* Tap-to-show controls (YouTube-like) */
.player.is-idle .player__controls{opacity:0;pointer-events:none;transition:opacity .25s ease}
.player:not(.is-idle) .player__controls,.player .player__controls:focus-within{opacity:1;pointer-events:auto}
.player.is-idle .player__big-play{opacity:0;pointer-events:none}
.player-surface{cursor:pointer}
@media(max-width:700px){
  .player-menu{left:8px;right:8px;width:auto;max-width:none;bottom:58px;max-height:min(70vh,480px);overflow:auto;-webkit-overflow-scrolling:touch}
  .player__controls{padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .controls-row{gap:4px;flex-wrap:nowrap}
  .control.text-control,#captions-button{display:inline-grid}
  /* Keep settings + quality reachable on phones */
  #settings-button,.quality-pill--player{display:inline-flex !important}
  .player-menu .menu-row{min-height:44px;padding:12px 14px}
  .player-menu .menu-row__copy small{display:block}
}

/* Full quality list */
.player-menu #player-menu-content{max-height:min(62vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.player-menu .menu-row{min-height:44px}
@media(max-width:700px){
  .player-menu #player-menu-content{max-height:min(58vh,460px)}
  .quality-pill--player{display:inline-flex!important;max-width:88px}
}