:root{
    --bg-base:#0f0f0f;
    --bg-surface:#0f0f0f;
    --bg-elevated:#272727;
    --border:#303030;
    --border-strong:#3f3f3f;
    --text:#f1f1f1;
    --text-2:#d8d8d8;
    --muted:#aaa;
    --primary:#3ea6ff;
    --primary-hover:#65b8ff;
    --yt-header-height:104px;
    --yt-sidebar-width:0px;
}

html{background:#0f0f0f}
body{background:#0f0f0f;color:#f1f1f1;font-family:Roboto,Arial,sans-serif;font-size:14px}
button,input{font-family:inherit}

.yt-header{position:sticky;z-index:400;top:0;height:var(--yt-header-height);background:#0f0f0f}
.yt-topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#0f0f0f}
.yt-topbar__brand,.yt-topbar__actions{display:flex;align-items:center;gap:10px}
.yt-icon-button{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#f1f1f1}
.yt-icon-button:hover,.yt-icon-button:focus-visible{background:#272727}
.yt-menu-toggle{display:none}
.yt-logo{width:auto;min-width:0;max-width:138px;height:44px}
.yt-logo .site-logo-image{width:auto;max-width:138px;max-height:36px}
.yt-topbar__actions{justify-content:flex-end}
.yt-login{display:none;align-items:center;gap:7px;height:36px;padding:0 13px;border:1px solid #3f3f3f;border-radius:18px;color:#3ea6ff;font-weight:500}
.yt-login:hover{border-color:#263850;background:#263850;color:#3ea6ff}
.yt-mobile-search{display:grid}
.yt-search{display:none;align-items:center}
.yt-search__field{height:40px;min-width:0;flex:1;border:1px solid #303030;border-radius:20px 0 0 20px;background:#121212}
.yt-search__field:focus-within{border-color:#1c62b9}
.yt-search input{width:100%;height:38px;padding:0 16px;border:0;outline:0;background:transparent;color:#f1f1f1;font-size:16px}
.yt-search input::placeholder{color:#888}
.yt-search__submit{width:58px;height:40px;display:grid;place-items:center;border:1px solid #303030;border-left:0;border-radius:0 20px 20px 0;background:#222;color:#f1f1f1}
.yt-search__close{display:none;width:40px;height:40px;place-items:center;margin-left:4px;border:0;border-radius:50%;background:transparent;color:#f1f1f1}
.search-open .yt-search{position:absolute;z-index:8;top:0;right:6px;left:6px;height:56px;display:flex;background:#0f0f0f}
.search-open .yt-search__close{display:grid}

.yt-category-bar{height:48px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.04);background:#0f0f0f}
.yt-category-track{height:100%;display:flex;align-items:center;gap:10px;overflow-x:auto;padding:0 12px;scrollbar-width:none}
.yt-category-track::-webkit-scrollbar{display:none}
.yt-chip{height:32px;display:inline-flex;flex:0 0 auto;align-items:center;padding:0 13px;border-radius:8px;background:#272727;color:#f1f1f1;font-size:14px;font-weight:500;white-space:nowrap;transition:background 120ms ease}
.yt-chip:hover{background:#3f3f3f;color:#fff}
.yt-chip.active{background:#f1f1f1;color:#0f0f0f}

.yt-sidebar{display:none}
.yt-main{min-height:calc(100vh - var(--yt-header-height))}

.yt-feed-page{padding:0 0 28px}
.yt-feed-heading{display:flex;align-items:center;justify-content:space-between;padding:0 12px 14px}
.yt-feed-heading h1{margin:0;color:#f1f1f1;font-size:17px;font-weight:600;letter-spacing:0}
.yt-feed-heading a{color:#3ea6ff;font-size:12px}
.yt-feed-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px 0}
.yt-card{min-width:0;background:#0f0f0f}
.yt-card__media{position:relative;aspect-ratio:16/9;display:block;overflow:hidden;background:#181818}
.yt-card__media>img{width:100%;height:100%;display:block;object-fit:cover}
.yt-card__play{position:absolute;top:50%;left:50%;width:48px;height:48px;display:grid;place-items:center;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.56);border-radius:50%;background:linear-gradient(145deg,rgba(24,24,24,.74),rgba(0,0,0,.62));box-shadow:0 5px 18px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1);color:#fff;transition:transform 140ms ease,background 140ms ease,border-color 140ms ease}
.yt-card__play svg{width:24px;height:24px;display:block;margin-left:2px;fill:currentColor;stroke:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.yt-card__media:hover .yt-card__play{transform:translate(-50%,-50%) scale(1.06);border-color:rgba(255,255,255,.68);background:linear-gradient(145deg,rgba(18,18,18,.86),rgba(0,0,0,.76))}
.yt-card__placeholder{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#181818,#252525)}
.yt-card__placeholder .post-logo-image{width:76px;height:76px;border-radius:50%}
.yt-card__placeholder .post-logo-placeholder{width:76px;height:76px;border-radius:50%}
.yt-card__details{display:grid;grid-template-columns:38px minmax(0,1fr) 32px;align-items:start;gap:10px;padding:12px 12px 4px}
.yt-card__avatar{width:36px;height:36px;display:grid;overflow:hidden;place-items:center;border-radius:50%;background:#272727}
.yt-card__avatar .post-logo-image{width:100%;height:100%;object-fit:cover}
.yt-card__avatar .post-logo-placeholder{width:100%;height:100%}
.yt-card__copy{min-width:0}
.yt-card__copy h2{display:-webkit-box;overflow:hidden;margin:0;color:#f1f1f1;font-size:16px;font-weight:600;line-height:1.35;letter-spacing:0;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.yt-card__copy h2 a:hover{color:#f1f1f1}
.yt-card__copy p{display:-webkit-box;overflow:hidden;margin:6px 0 0;color:#aaa;font-size:14px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.yt-card__copy>span{display:block;overflow:hidden;margin-top:5px;color:#aaa;font-size:12px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.yt-card__more{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:#f1f1f1}
.yt-card__more:hover,.yt-card__more:focus-visible{background:#272727;color:#f1f1f1}
.yt-empty-feed{min-height:360px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:40px 20px;text-align:center}
.yt-empty-feed svg{color:#aaa}
.yt-empty-feed h2,.yt-empty-feed h1{margin:16px 0 0;font-size:20px}
.yt-empty-feed p{margin:8px 0 18px;color:#aaa}
.yt-empty-feed a{color:#3ea6ff}

.yt-watch{width:min(100% - 24px,1040px);margin:0 auto;padding:20px 0 72px}
.yt-watch__media{overflow:hidden;margin:0 0 16px;border:0;border-radius:12px;background:#000}
.yt-watch__media>img{width:100%;max-height:680px;display:block;object-fit:contain}
.yt-watch__media .video-detail-thumb{aspect-ratio:16/9}
.yt-watch__media .video-play{width:56px;height:56px;border:2px solid rgba(255,255,255,.6);border-radius:50%;background:linear-gradient(145deg,rgba(24,24,24,.76),rgba(0,0,0,.64));box-shadow:0 6px 22px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.1);color:#fff;transition:transform 140ms ease,background 140ms ease,border-color 140ms ease}
.yt-watch__media .video-play svg{width:28px;height:28px;margin-left:2px;fill:currentColor;stroke:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.yt-watch__media:hover .video-play{transform:translate(-50%,-50%) scale(1.06);border-color:rgba(255,255,255,.72);background:linear-gradient(145deg,rgba(18,18,18,.88),rgba(0,0,0,.78))}
.yt-watch__media iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.yt-watch>h1{margin:0;color:#f1f1f1;font-size:20px;font-weight:600;line-height:1.4;letter-spacing:0}
.yt-watch__meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.yt-watch__channel{display:flex;align-items:center;gap:10px}
.yt-watch__channel>div{display:flex;flex-direction:column}
.yt-watch__channel strong{font-size:14px}
.yt-watch__channel span{margin-top:2px;color:#aaa;font-size:12px}
.yt-watch__share{height:36px;padding:0 14px;border-radius:18px;background:#272727;color:#f1f1f1;font-size:14px;font-weight:600}
.yt-watch__share:hover{background:#3f3f3f;color:#fff}
.yt-watch__description{margin-top:16px;padding:14px;border-radius:12px;background:#272727;color:#f1f1f1;font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.yt-watch__description>strong{display:block;margin-bottom:8px;font-size:13px}
.yt-watch__back{display:inline-flex;align-items:center;gap:7px;margin-top:20px;color:#3ea6ff;font-size:13px}
.yt-watch__back svg{transform:rotate(180deg)}
.yt-watch-empty{min-height:55vh}

.yt-bottom-nav.mobile-actions{width:100%;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(64px + env(safe-area-inset-bottom,0px));padding:4px 4px env(safe-area-inset-bottom,0px);border-top:0;background:rgba(15,15,15,.98);box-shadow:0 -2px 12px rgba(0,0,0,.36);backdrop-filter:blur(12px)}
.yt-bottom-nav .mobile-actions__link{gap:3px;border-radius:0;color:#f1f1f1;font-size:10px;font-weight:400}
.yt-bottom-nav .mobile-actions__link>svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8}
.yt-bottom-nav .mobile-actions__link.active>svg{fill:#f1f1f1;stroke:#f1f1f1}
.yt-bottom-nav .mobile-actions__link[href*="gameplay"].active>svg{fill:none;stroke-width:2.2}
.yt-bottom-nav .mobile-actions__link:hover,.yt-bottom-nav .mobile-actions__link:focus-visible{background:transparent;color:#fff}
.yt-bottom-nav .mobile-actions__cta-icon{width:44px;height:44px;margin-top:-25px;border:0;border-radius:50%;background:#3f3f3f;box-shadow:0 0 0 1px #606060}
.yt-bottom-nav .mobile-actions__cta-icon svg{width:27px;height:27px;fill:none;stroke:currentColor}
.yt-bottom-nav .mobile-actions__link--cta>span:last-child{margin-top:0}

.site-footer{border-top:1px solid #272727;background:#0f0f0f}
.seo-footer{width:min(100% - 32px,1280px);padding-top:34px;padding-bottom:28px}
.seo-footer h2{color:#f1f1f1}
.seo-footer p,.seo-footer__posts a{color:#aaa}
.seo-footer__help>a{color:#3ea6ff}
.back-to-brand{border-color:#3f3f3f!important;border-radius:18px!important;background:#272727!important;color:#f1f1f1!important;box-shadow:0 4px 14px rgba(0,0,0,.35)!important}

@media(min-width:600px){
    .yt-feed-page{padding:24px 18px 40px}
    .yt-feed-heading{padding:0 0 18px}
    .yt-feed-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
    .yt-card__media{border-radius:12px}
    .yt-card__details{padding:12px 0 0}
}

@media(min-width:768px){
    :root{--yt-header-height:112px;--yt-sidebar-width:72px}
    body{padding-bottom:0}
    .yt-topbar{display:grid;grid-template-columns:190px minmax(240px,640px) 1fr;gap:18px;padding:0 16px}
    .yt-menu-toggle{display:grid}
    .yt-search{width:100%;display:flex}
    .yt-search__close,.yt-mobile-search{display:none}
    .yt-login{display:inline-flex}
    .yt-category-bar{height:56px}
    .yt-category-track{padding-left:calc(var(--yt-sidebar-width) + 22px);padding-right:22px}
    .yt-sidebar{position:fixed;z-index:450;top:56px;bottom:0;left:0;width:var(--yt-sidebar-width);display:flex;flex-direction:column;background:#0f0f0f;transition:width 140ms ease}
    .yt-sidebar nav{display:flex;flex-direction:column;padding:12px 4px}
    .yt-sidebar nav a{height:64px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:10px;color:#f1f1f1;font-size:10px}
    .yt-sidebar nav a:hover,.yt-sidebar nav a.active{background:#272727}
    .yt-sidebar__about{display:none}
    .yt-main,.site-footer{margin-left:var(--yt-sidebar-width);transition:margin-left 140ms ease}
    .mobile-actions{display:none!important}
    .back-to-brand{display:none!important}
    .yt-feed-page{padding:24px 24px 54px}
    .yt-watch{padding-top:24px}
}

@media(min-width:1100px){
    .yt-feed-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 18px}
}

@media(min-width:1200px){
    :root{--yt-sidebar-width:240px}
    .yt-topbar{grid-template-columns:240px minmax(320px,680px) 1fr}
    .yt-sidebar nav{padding:12px}
    .yt-sidebar nav a{height:44px;justify-content:flex-start;flex-direction:row;gap:24px;padding:0 12px;font-size:14px}
    .yt-sidebar nav a svg{flex:0 0 auto}
    .yt-sidebar__about{display:block;margin-top:auto;padding:20px 24px 28px;border-top:1px solid #272727;color:#aaa;font-size:12px;line-height:1.45}
    .yt-sidebar__about p{margin:0 0 10px}
    .yt-sidebar__about small{color:#717171}
    body.sidebar-collapsed{--yt-sidebar-width:72px}
    body.sidebar-collapsed .yt-sidebar nav{padding:12px 4px}
    body.sidebar-collapsed .yt-sidebar nav a{height:64px;justify-content:center;flex-direction:column;gap:5px;padding:0;font-size:10px}
    body.sidebar-collapsed .yt-sidebar__about{display:none}
}

@media(min-width:1680px){
    .yt-feed-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:38px 18px}
}

@media(max-width:767.98px){
    body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
    .site-footer{margin-left:0}
    .seo-footer{padding-bottom:88px}
}

@media(max-width:359px){
    .yt-logo,.yt-logo .site-logo-image{max-width:112px}
    .yt-card__details{grid-template-columns:34px minmax(0,1fr) 28px;gap:8px;padding-inline:9px}
    .yt-card__avatar{width:34px;height:34px}
    .yt-card__copy h2{font-size:15px}
}

@media(prefers-reduced-motion:reduce){
    .yt-sidebar,.yt-main,.site-footer,.yt-chip{transition:none}
}
