/* Shared media surface; video proportions are independent of screen direction. */
.mobile-tabbar{display:none}
.video-stage{background:#050505}
.video-stage video{object-fit:contain;object-position:center;filter:none}
.video-vignette{background:linear-gradient(0deg,#000b,transparent 36%)}
.cinematic-title{display:none}

html[data-ui="desktop"] body{height:100dvh;overflow:hidden;background:#111214}

html[data-ui="desktop"] .sidebar{width:168px;padding:24px 14px 18px;background:#141416;overflow-y:auto}

html[data-ui="desktop"] .brand{padding:0 8px;gap:9px;margin-bottom:28px}

html[data-ui="desktop"] .brand-mark,html[data-ui="desktop"] .brand-mark svg{width:30px;height:34px}

html[data-ui="desktop"] .brand>span:last-child{font-size:23px;letter-spacing:1px}

html[data-ui="desktop"] .brand small{display:none}

html[data-ui="desktop"] .nav-item{height:48px;padding:12px;gap:12px;font-size:15px;border-radius:9px}

html[data-ui="desktop"] .nav-item svg{width:22px;height:22px}

html[data-ui="desktop"] .main-nav{gap:6px}

html[data-ui="desktop"] .nav-item.is-active{background:#303034;color:#fff}

html[data-ui="desktop"] .nav-item.is-active svg{color:#fff}

html[data-ui="desktop"] .nav-divider{margin:12px 8px}

html[data-ui="desktop"] .nav-caption{letter-spacing:0;font-size:10px}

html[data-ui="desktop"] .sidebar .resume-card,html[data-ui="desktop"] .sidebar-quote{display:none}

html[data-ui="desktop"] .sidebar-bottom{padding:20px 8px 0;margin-top:auto}

html[data-ui="desktop"] .workspace{margin-left:168px;height:100dvh}

html[data-ui="desktop"] .main-content{max-width:none;height:100%;padding:12px 16px}

html[data-ui="desktop"] .watch-layout{height:100%;min-height:0;gap:18px}

html[data-ui="desktop"] .watch-column{height:100%;min-height:0;grid-template-columns:minmax(0,1fr) 48px;grid-template-rows:minmax(0,1fr);column-gap:12px;row-gap:0}

html[data-ui="desktop"] .watch-column>.video-shell{display:flex;flex-direction:column;height:100%;min-height:0;border:0;border-radius:12px}

html[data-ui="desktop"] .video-stage{height:auto;min-height:0;max-height:none;flex:1}

html[data-ui="desktop"] .player-controls{height:56px;flex-shrink:0;padding:0 14px;background:#161618}

html[data-ui="desktop"] .controls-left,html[data-ui="desktop"] .controls-right{gap:8px}

html[data-ui="desktop"] .player-controls .icon-button{width:40px;height:44px;padding:10px}

html[data-ui="desktop"] .player-controls .icon-button svg{width:20px;height:20px}

html[data-ui="desktop"] .recommendations-button{min-height:44px;padding:0 7px;font-size:11px;gap:6px}

html[data-ui="desktop"] .time-display{font-size:11px}

html[data-ui="desktop"] #speed{font-size:11px;min-height:44px;width:51px}

html[data-ui="desktop"] .clean-button{font-size:12px}

html[data-ui="desktop"] .watch-column>.feed-navigation{width:48px;gap:12px}

html[data-ui="desktop"] .feed-navigation button{width:48px;height:48px;min-width:48px;flex:none}

html[data-ui="desktop"] .feed-button-label{display:none}

html[data-ui="desktop"] .watch-column>.watch-footer{display:none}

html[data-ui="desktop"] .social-rail{right:22px;bottom:24px;gap:14px}

html[data-ui="desktop"] .social-button{min-width:56px;min-height:62px;gap:7px}

html[data-ui="desktop"] .social-button svg{width:30px;height:30px}

html[data-ui="desktop"] .social-button small{font-size:12px}

html[data-ui="desktop"] .social-divider,html[data-ui="desktop"] .record-disc{display:none}

html[data-ui="desktop"] .video-info{left:24px;bottom:24px;right:104px}

html[data-ui="desktop"] .creator-row{margin-bottom:9px}

html[data-ui="desktop"] .creator-row strong{font-size:17px}

html[data-ui="desktop"] .video-title-line h2{font-size:17px}

html[data-ui="desktop"] .video-info p{font-size:13px;line-height:1.65;margin:8px 0}

html[data-ui="desktop"] .video-info p span{font-size:11px}

html[data-ui="desktop"] .music-line{font-size:10px}

html[data-ui="desktop"] .play-overlay{top:50%;left:50%}

html[data-ui="desktop"] .account-login-trigger{top:24px;right:88px;height:40px;min-width:84px;font-size:13px}

html[data-ui="desktop"] .guest-account-menu{top:74px;right:24px}

html[data-ui="desktop"] .watch-layout.panel-open{grid-template-columns:minmax(0,1fr) 288px}

html[data-ui="desktop"] .series-panel{height:100%;min-height:0;overflow-y:auto;padding:14px 8px 20px}

html[data-ui="desktop"] .watch-column:fullscreen{width:100vw;height:100dvh;padding:12px;grid-template-columns:minmax(0,1fr) 48px;grid-template-rows:minmax(0,1fr);gap:12px}

@media(max-width:1100px){
  html[data-ui="desktop"] .sidebar{width:76px;padding:22px 10px 16px}
  html[data-ui="desktop"] .brand{padding:0 10px;margin-bottom:24px}
  html[data-ui="desktop"] .brand>span:last-child,html[data-ui="desktop"] .nav-caption,html[data-ui="desktop"] .small-new,html[data-ui="desktop"] .nav-dot,html[data-ui="desktop"] .bottom-tools>span{display:none}
  html[data-ui="desktop"] .nav-item{font-size:0;gap:0;justify-content:center;padding:12px}
  html[data-ui="desktop"] .bottom-tools{flex-direction:column;gap:20px}
  html[data-ui="desktop"] .workspace{margin-left:76px}
  html[data-ui="desktop"] .main-content{padding:10px 12px}
  html[data-ui="desktop"] .watch-layout.panel-open{grid-template-columns:minmax(0,1fr)}
  html[data-ui="desktop"] .watch-layout.panel-open .series-panel{position:fixed;top:0;right:0;bottom:0;z-index:42;width:310px;max-width:88vw;padding:24px 20px;background:#1b1c21;border-left:1px solid #ffffff10;box-shadow:-20px 0 70px #0008}
}

/* Desktop controls stay usable in a short browser window. */
@media(max-height:600px){
  html[data-ui="desktop"] .sidebar{display:none}
  html[data-ui="desktop"] .workspace{margin-left:0}
  html[data-ui="desktop"] .main-content{padding:8px max(8px,env(safe-area-inset-right,0px)) 8px max(8px,env(safe-area-inset-left,0px))}
  html[data-ui="desktop"] .watch-column{grid-template-columns:minmax(0,1fr) 48px;column-gap:8px}
  html[data-ui="desktop"] .watch-column>.video-shell{border-radius:8px}
  html[data-ui="desktop"] .video-stage{height:auto;min-height:0;max-height:none}
  html[data-ui="desktop"] .player-controls{height:48px;padding:0 10px}
  html[data-ui="desktop"] .controls-left,html[data-ui="desktop"] .controls-right{gap:4px}
  html[data-ui="desktop"] .recommendations-button>span:last-child{display:none}
  html[data-ui="desktop"] .player-controls .icon-button{width:34px;padding:8px}
  html[data-ui="desktop"] #volume,html[data-ui="desktop"] .quality-label{display:none}
  html[data-ui="desktop"] .social-rail{right:12px;top:50%;bottom:auto;transform:translateY(-50%);gap:4px}
  html[data-ui="desktop"] .creator-action{width:48px;height:64px}
  html[data-ui="desktop"] .creator-profile-button{width:40px;height:40px;left:4px}
  html[data-ui="desktop"] .avatar-follow-button{top:22px;left:2px}
  html[data-ui="desktop"] .avatar-follow-button>svg,html[data-ui="desktop"] .avatar-follow-button>span>svg{width:23px;height:23px;padding:4px}
  html[data-ui="desktop"] .social-button{min-width:48px;min-height:44px;gap:2px}
  html[data-ui="desktop"] .social-button svg{width:24px;height:24px}
  html[data-ui="desktop"] .social-button small{font-size:9px}
  html[data-ui="desktop"] .video-info{left:18px;bottom:14px;right:84px}
  html[data-ui="desktop"] .creator-row{margin-bottom:5px}
  html[data-ui="desktop"] .creator-row strong{font-size:13px}
  html[data-ui="desktop"] .video-title-line h2{font-size:14px}
  html[data-ui="desktop"] .video-info p{font-size:10px;line-height:1.5;margin:5px 0 0;max-height:30px;overflow:hidden}
  html[data-ui="desktop"] .video-info p span,html[data-ui="desktop"] .music-line,html[data-ui="desktop"] .episode-label{display:none}
  html[data-ui="desktop"] .account-login-trigger{top:14px;right:144px;height:34px;min-width:72px;padding:0 12px;font-size:11px}
  html[data-ui="desktop"] .account-login-avatar{width:19px;height:19px}
  html[data-ui="desktop"] .guest-account-menu{top:58px;right:12px;max-height:calc(100dvh - 70px)}
  html[data-ui="desktop"] .play-overlay{width:50px;height:50px}
  html[data-ui="desktop"] .play-overlay svg{width:28px;height:28px}
  html[data-ui="desktop"] .watch-column:fullscreen{padding:8px;gap:8px;grid-template-columns:minmax(0,1fr) 48px}
}

/* Desktop feedback stays separate from the full-screen WebApp gestures. */
html[data-ui="desktop"] {
  --desktop-focus: #ff7894;
  --desktop-ease: cubic-bezier(.2, .75, .25, 1);
}
html[data-ui="desktop"] .sidebar {
  scrollbar-width: thin;
  scrollbar-color: #ffffff1a transparent;
  overscroll-behavior-y: contain;
}
html[data-ui="desktop"] .sidebar :is(.brand, .nav-item, .bottom-tools button),
html[data-ui="desktop"] .workspace :is(.desktop-tools > button, .channel-categories button, .feed-navigation button, .player-controls button, .social-button, .creator-profile-button, .video-more-button) {
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms var(--desktop-ease);
}
html[data-ui="desktop"] .sidebar .nav-item:hover:not(.is-active) {
  background: #ffffff09;
  color: #f5f5f7;
}
html[data-ui="desktop"] .sidebar .nav-item:active { transform: scale(.98); }
html[data-ui="desktop"] .sidebar :is(button, a):focus-visible,
html[data-ui="desktop"] .workspace :is(button, input, select):focus-visible {
  outline: 2px solid var(--desktop-focus);
  outline-offset: 3px;
}
html[data-ui="desktop"] .workspace .desktop-search:focus-within {
  border-color: #babac3;
  box-shadow: 0 0 0 3px #ffffff08;
}
html[data-ui="desktop"] .workspace .desktop-search input:focus-visible { outline: none; }
html[data-ui="desktop"] .workspace .desktop-search .search-results {
  max-height: min(420px, calc(100dvh - 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ffffff26 transparent;
}
html[data-ui="desktop"] .workspace .desktop-search .search-results button {
  padding: 10px 8px;
  border-radius: 6px;
}
html[data-ui="desktop"] .workspace .desktop-search .search-results button:is(:hover, :focus-visible) { background: #ffffff09; }
html[data-ui="desktop"] .workspace .desktop-tools > button {
  min-height: 44px;
  justify-content: center;
  border-radius: 6px;
}
html[data-ui="desktop"] .workspace .desktop-tools > button:is(:hover, [aria-expanded="true"]) { color: #fff; }
html[data-ui="desktop"] .workspace .channel-categories button:hover { color: #fff; }
html[data-ui="desktop"] .workspace .channel-categories button:focus-visible { outline-offset: -4px; }
html[data-ui="desktop"] .watch-column > .video-shell {
  isolation: isolate;
  box-shadow: 0 0 0 1px #ffffff05;
}
html[data-ui="desktop"] .player-controls .controls-left { flex: 0 0 auto; }
html[data-ui="desktop"] .player-controls .controls-right {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
html[data-ui="desktop"] .player-controls .controls-right::-webkit-scrollbar { display: none; }
html[data-ui="desktop"] .player-controls .controls-right > * { flex-shrink: 0; }
html[data-ui="desktop"] .player-controls button:focus-visible { outline-offset: -4px; }
html[data-ui="desktop"] .player-controls .seek-bar:focus-visible { outline-offset: 5px; }
html[data-ui="desktop"] .player-controls :is(.icon-button, #speed):hover { color: #fff; background-color: #ffffff08; }
html[data-ui="desktop"] .workspace .social-button:hover svg,
html[data-ui="desktop"] .workspace .video-more-button:hover svg { transform: scale(1.08); }
html[data-ui="desktop"] .workspace .social-button svg,
html[data-ui="desktop"] .workspace .video-more-button svg { transition: transform 150ms var(--desktop-ease); }
html[data-ui="desktop"] .workspace .social-button:active svg { transform: scale(.92); }
html[data-ui="desktop"] .workspace .social-button:focus-visible,
html[data-ui="desktop"] .workspace .creator-profile-button:focus-visible,
html[data-ui="desktop"] .workspace .video-more-button:focus-visible { border-radius: 8px; outline-color: #fff; }
html[data-ui="desktop"] .workspace .creator-profile-button:focus-visible { border-radius: 50%; }
html[data-ui="desktop"] .workspace .video-info { text-shadow: 0 1px 6px #0007; }
html[data-ui="desktop"] .workspace .series-panel {
  scrollbar-width: thin;
  scrollbar-color: #ffffff26 transparent;
  overscroll-behavior: contain;
}
html[data-ui="desktop"] .workspace .episode-card { transition: background-color 150ms ease, border-color 150ms ease; }
html[data-ui="desktop"] .workspace .episode-card:hover { background: #ffffff08; }
html[data-ui="desktop"] .workspace .episode-card:focus-visible { outline-offset: -3px; }
html[data-ui="desktop"] .video-stage.feed-enter-next { animation: desktop-feed-next 220ms var(--desktop-ease) both; }
html[data-ui="desktop"] .video-stage.feed-enter-previous { animation: desktop-feed-previous 220ms var(--desktop-ease) both; }
@keyframes desktop-feed-next {
  from { opacity: .55; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes desktop-feed-previous {
  from { opacity: .55; transform: translateY(-22px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="desktop"] .video-stage,
  html[data-ui="desktop"] .sidebar :is(button, a),
  html[data-ui="desktop"] .workspace :is(button, button svg, select, .desktop-search) {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}