@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap");
:root { color-scheme: dark; font-family: Roboto, Arial, sans-serif; color:#f1f1f1; background:#0f0f0f; --muted:#aaa; --line:#303030; --accent:#ff0033; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; background:#0f0f0f; }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.topbar { height:64px; position:sticky; z-index:10; top:0; display:grid; grid-template-columns:240px minmax(200px,640px) 1fr; align-items:center; gap:28px; padding:0 24px 0 16px; background:rgba(15,15,15,.97); }
.brand-area { display:flex; align-items:center; gap:22px; min-width:0; }
.menu-button { width:40px; height:40px; flex:0 0 40px; border:0; border-radius:50%; background:transparent; color:#f1f1f1; font-size:21px; cursor:pointer; }
.menu-button:hover { background:#272727; }
.brand { display:flex; align-items:center; gap:5px; color:#f1f1f1; font-size:20px; font-weight:800; letter-spacing:-1px; text-decoration:none; }
.brand-mark { display:grid; width:28px; height:20px; place-items:center; padding-left:2px; border-radius:6px; background:#ff0033; color:#fff; font-size:10px; }
.search { display:flex; height:40px; width:100%; overflow:hidden; border:1px solid #303030; border-radius:22px; background:#121212; }
.search:focus-within { border-color:#1c62b9; }
.search input { flex:1; min-width:0; padding:0 16px; border:0; outline:0; background:transparent; color:#f1f1f1; font-size:16px; }
.search input::placeholder { color:#888; }
.search button { width:64px; flex:0 0 64px; border:0; border-left:1px solid #303030; background:#222; color:#f1f1f1; cursor:pointer; font-size:24px; }
.search button:hover { background:#333; }
.top-actions { display:flex; justify-content:flex-end; align-items:center; gap:18px; }
.create-button { display:inline-flex; align-items:center; min-height:38px; padding:0 16px; border:0; border-radius:20px; background:#272727; color:#f1f1f1; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; }
.create-button:hover { background:#3a3a3a; }
.avatar { width:34px; height:34px; border:0; border-radius:50%; background:#1769aa; color:white; font-weight:700; }
.app-layout { display:grid; grid-template-columns:240px minmax(0,1fr); align-items:start; }
.sidebar { position:sticky; top:64px; height:calc(100vh - 64px); overflow-y:auto; padding:12px 12px 24px; scrollbar-width:thin; scrollbar-color:transparent transparent; }
.sidebar:hover { scrollbar-color:#555 transparent; }
.side-nav { display:flex; flex-direction:column; gap:3px; }
.side-link { min-height:42px; display:flex; align-items:center; gap:22px; padding:0 12px; border-radius:10px; color:#f1f1f1; font-size:14px; font-weight:500; text-decoration:none; }
.side-link:hover { background:#272727; }
.side-link.selected { background:#272727; font-weight:700; }
.side-icon { width:24px; flex:0 0 24px; text-align:center; font-size:22px; line-height:1; }
.shorts-icon { color:#ff3159; font-size:25px; }
.side-divider { height:1px; margin:12px 0; background:#303030; }
.section-link { justify-content:space-between; gap:8px; min-height:42px; padding-left:12px; font-size:15px; font-weight:700; }
.side-chevron { font-size:22px; font-weight:400; }
.channel-link { min-height:39px; gap:18px; }
.mini-avatar { width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#8855eb,#e34387); font-size:11px; font-weight:700; }
.mini-avatar.mint { background:#278d82; }.mini-avatar.orange { background:#c76c35; }
.sidebar-note { margin:20px 12px; color:#999; font-size:12px; line-height:1.5; }
.content { min-width:0; max-width:1800px; padding:0 32px 20px 24px; }
.categories { position:sticky; z-index:4; top:64px; display:flex; gap:12px; overflow-x:auto; margin:0 -24px 20px; padding:12px 24px; background:rgba(15,15,15,.96); scrollbar-width:none; }
.categories::-webkit-scrollbar,.shorts-rail::-webkit-scrollbar { display:none; }
.category { flex:0 0 auto; min-height:32px; padding:0 13px; border:0; border-radius:8px; background:#272727; color:#f1f1f1; cursor:pointer; font-size:14px; font-weight:600; white-space:nowrap; transition:background .16s ease; }
.category:hover { background:#3f3f3f; }.category.active { background:#f1f1f1; color:#0f0f0f; }
.videos-section { padding-top:16px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin:0 0 18px; }
.eyebrow { margin:0 0 5px; color:#aaa; font-size:10px; font-weight:700; letter-spacing:1.4px; }
h1,h2,p { margin-top:0; } h1,h2 { font-weight:700; }
h1 { margin-bottom:0; font-size:23px; letter-spacing:-.4px; }
.result-count { margin:0 0 2px; color:#aaa; font-size:12px; }
.video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 18px; }
.video-card { display:block; min-width:0; padding:0; border:0; border-radius:12px; background:transparent; color:inherit; cursor:pointer; font:inherit; text-align:left; transition:transform .15s ease; }
.video-card:hover { transform:translateY(-2px); }.video-card:focus-visible,.short-card:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.thumbnail { position:relative; display:block; overflow:hidden; aspect-ratio:16/9; border-radius:12px; background:#272727; }
.thumbnail img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.video-card:hover .thumbnail img { transform:scale(1.025); }
.play-overlay { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.12); opacity:0; transition:opacity .16s ease; }
.play-overlay span { display:grid; width:48px; height:48px; place-items:center; padding-left:3px; border-radius:50%; background:rgba(0,0,0,.7); color:#fff; font-size:16px; }
.video-card:hover .play-overlay,.video-card:focus-visible .play-overlay { opacity:1; }
.duration { position:absolute; right:7px; bottom:7px; padding:3px 5px; border-radius:4px; background:rgba(0,0,0,.8); color:#fff; font-size:11px; font-weight:600; }
.video-info { display:flex; gap:11px; padding:11px 2px 0; }
.channel-avatar { position:relative; overflow:hidden; width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:50%; background:var(--avatar-color,#7654d8); color:#fff; font-size:12px; font-weight:700; }
.channel-avatar img { position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.video-copy { min-width:0; }.video-title { display:-webkit-box; overflow:hidden; margin:0 0 5px; color:#f1f1f1; font-size:14px; font-weight:700; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.video-meta { display:block; margin:0; color:#aaa; font-size:12px; line-height:1.5; }
.shorts-section { margin-top:42px; padding-top:22px; border-top:1px solid #303030; }
.shorts-heading { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.shorts-title-mark { color:#ff3159; font-size:24px; font-weight:900; }.shorts-heading h2 { margin:0; font-size:21px; }.shorts-label { margin-left:auto; color:#aaa; font-size:12px; }
.shorts-rail { display:grid; grid-auto-columns:minmax(145px,1fr); grid-auto-flow:column; gap:14px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }
.short-card { min-width:0; padding:0; border:0; background:transparent; color:#f1f1f1; cursor:pointer; text-align:left; }
.short-thumb { position:relative; display:block; overflow:hidden; aspect-ratio:9/14; border-radius:10px; background:#262626; }
.short-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }.short-card:hover img { transform:scale(1.04); }
.short-play { position:absolute; right:8px; bottom:8px; display:grid; width:30px; height:30px; place-items:center; border-radius:50%; background:rgba(0,0,0,.72); font-size:12px; }
.short-copy { display:block; padding:9px 3px 0; font-size:13px; font-weight:600; line-height:1.35; }
.search-status { min-height:18px; margin:16px 0 0; color:#aaa; font-size:12px; }.search-status:empty { display:none; }.search-status.error { color:#ff9b9b; }
.load-more { display:block; margin:24px auto 0; padding:10px 18px; border:1px solid #444; border-radius:18px; background:#272727; color:#f1f1f1; cursor:pointer; font-size:13px; font-weight:600; }.load-more[hidden] { display:none; }.load-more:hover:not(:disabled) { background:#3a3a3a; }.load-more:disabled { cursor:wait; opacity:.65; }
.empty-state { padding:42px 0; color:#aaa; text-align:center; font-size:14px; }
footer { padding:42px 0 20px; color:#777; font-size:12px; }
.player-dialog { width:min(960px,calc(100% - 32px)); max-width:960px; padding:18px; border:1px solid #444; border-radius:14px; background:#181818; color:#f1f1f1; box-shadow:0 24px 90px rgba(0,0,0,.7); }.player-dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(4px); }
.player-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }.player-heading h2 { overflow:hidden; margin:0; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
.player-close { display:grid; width:36px; height:36px; flex:0 0 36px; place-items:center; border:0; border-radius:50%; background:#272727; color:#fff; cursor:pointer; font-size:24px; }.player-close:hover { background:#444; }
.player-frame { overflow:hidden; aspect-ratio:16/9; border-radius:10px; background:#000; }.player-frame iframe { display:block; width:100%; height:100%; border:0; }
.player-fallback { margin:12px 0 0; color:#aaa; font-size:12px; }.player-fallback a { color:#76baff; font-weight:600; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; clip-path:inset(50%); }
body.sidebar-collapsed .app-layout { grid-template-columns:76px minmax(0,1fr); } body.sidebar-collapsed .side-link { justify-content:center; gap:0; padding:0; } body.sidebar-collapsed .side-link > span:not(.side-icon):not(.mini-avatar), body.sidebar-collapsed .channel-link, body.sidebar-collapsed .side-divider, body.sidebar-collapsed .sidebar-note { display:none; } body.sidebar-collapsed .side-icon { font-size:21px; }
@media(max-width:1150px) { .topbar { grid-template-columns:210px minmax(180px,580px) 1fr; gap:16px; }.app-layout { grid-template-columns:210px minmax(0,1fr); }.content { padding-right:22px; padding-left:20px; }.categories { margin-left:-20px; margin-right:-22px; padding-left:20px; }.video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) { .topbar { height:58px; grid-template-columns:auto minmax(120px,1fr) auto; gap:10px; padding:0 12px; }.brand-area { gap:8px; }.brand { font-size:18px; }.brand-mark { width:26px; height:19px; }.menu-button { width:36px; flex-basis:36px; }.create-button { display:none; }.top-actions { gap:0; }.search { height:36px; }.search input { padding:0 11px; font-size:14px; }.search button { width:44px; flex-basis:44px; }.app-layout,body.sidebar-collapsed .app-layout { display:block; }.sidebar { position:fixed; z-index:8; top:58px; left:0; width:220px; height:calc(100vh - 58px); background:#0f0f0f; box-shadow:8px 0 24px rgba(0,0,0,.4); transform:translateX(-110%); transition:transform .2s ease; }.sidebar.mobile-open { transform:translateX(0); } .content { padding:0 16px 20px; }.categories { top:58px; margin:0 -16px 14px; padding:10px 16px; }.category { min-height:30px; padding:0 12px; font-size:13px; }.videos-section { padding-top:12px; }.video-grid { gap:24px 14px; }.shorts-rail { grid-auto-columns:minmax(135px,42vw); } }
@media(max-width:480px) { .topbar { grid-template-columns:auto minmax(0,1fr) auto; }.avatar { width:30px; height:30px; }.search button { width:38px; flex-basis:38px; }.video-grid { grid-template-columns:1fr; gap:22px; }.thumbnail { border-radius:10px; }.shorts-rail { grid-auto-columns:minmax(125px,40vw); }.player-dialog { padding:13px; }.player-heading h2 { font-size:15px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }


[hidden] { display:none !important; }
.brand-area { min-width:0; }.icon-button { width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;font-size:20px; }.icon-button:hover { background:#303037; }
.voice-button { width:42px;flex:0 0 42px;border:0;border-radius:50%;background:#292a31;color:inherit;cursor:pointer; }.top-actions { gap:12px; }.popover-wrap { position:relative; }.popover { position:absolute;z-index:20;right:0;top:46px;width:250px;padding:18px;border:1px solid #41414a;border-radius:16px;background:#202127;box-shadow:0 16px 42px #0008; }.popover strong { display:block;margin-bottom:12px; }.popover p { margin:0;color:var(--muted);font-size:13px; }.popover a,.popover button { display:block;width:100%;padding:10px 0;border:0;background:transparent;color:inherit;text-align:left;text-decoration:none;cursor:pointer; }
.side-caption { margin:8px 12px 2px;color:#888;font-size:10px;font-weight:700;letter-spacing:1px; }.side-settings { width:100%;background:transparent;text-align:left;cursor:pointer; }
.page-view { min-width:0; }.videos-section { padding-top:8px; }.page-view[hidden] { display:none!important; }
.video-card { position:relative;min-width:0; }.video-open { display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer; }.video-copy { flex:1; }.video-title,.channel-name { display:block;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer; }.channel-name { color:var(--muted);font-size:12px; }.channel-name:hover,.watch-channel-name:hover { color:#fff;text-decoration:underline; }.card-actions { position:absolute;right:0;bottom:0;z-index:3; }.video-more { width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:22px;cursor:pointer; }.video-more:hover { background:#35353d; }.video-menu { position:absolute;z-index:9;right:0;top:34px;width:205px;padding:6px;border:1px solid #444;border-radius:12px;background:#24242b;box-shadow:0 12px 30px #0008; }.video-menu button { display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#eee;text-align:left;cursor:pointer;font-size:12px; }.video-menu button:hover { background:#393942; }
body.search-results #shorts-shelf { display:none; } body.search-results #videos-heading { font-size:22px; } body.search-results .video-grid { grid-template-columns:1fr;gap:15px; } body.search-results .video-card { display:grid;grid-template-columns:minmax(200px,340px) minmax(0,1fr);column-gap:16px;align-items:start; } body.search-results .video-open { grid-row:1 / span 2; } body.search-results .thumbnail { aspect-ratio:16/9; } body.search-results .video-info { padding-top:2px; } body.search-results .video-title { font-size:17px; } body.search-results .video-card .card-actions { right:4px;bottom:auto;top:0; }
.watch-layout { display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;padding-top:22px; }.watch-player { width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#000; }.watch-player iframe { width:100%;height:100%;border:0; }.watch-title { margin:16px 0;font-size:21px; }.watch-action-row { display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; }.watch-channel { display:flex;align-items:center;gap:12px; }.large-avatar { width:42px;height:42px;flex-basis:42px; }.watch-channel-name { display:block;padding:0;border:0;background:none;color:inherit;font-weight:700;cursor:pointer; }.channel-subs { display:block;margin-top:3px;color:var(--muted);font-size:11px; }.subscribe-button,.primary-button { padding:10px 17px;border:0;border-radius:20px;background:#f1f1f1;color:#141414;font-weight:700;text-decoration:none;cursor:pointer; }.subscribe-button.subscribed { background:#34343b;color:#fff; }.watch-buttons { display:flex;gap:8px;flex-wrap:wrap; }.watch-action { padding:9px 13px;border:0;border-radius:20px;background:#292a31;color:inherit;cursor:pointer;font-size:12px;font-weight:600; }.watch-action:hover,.watch-action.active { background:#44444d; }.watch-description { margin-top:17px;padding:14px;border-radius:12px;background:#25262d;font-size:13px; }.watch-description p { display:-webkit-box;overflow:hidden;margin:7px 0 0;line-height:1.5;-webkit-line-clamp:2;-webkit-box-orient:vertical; }.watch-description p.expanded { display:block; }.watch-description button { margin-top:8px;padding:0;border:0;background:none;color:inherit;font-weight:700;cursor:pointer; }.up-next h2,.comments-section h2 { margin:0 0 14px;font-size:18px; }.up-next .video-grid { display:flex;flex-direction:column;gap:13px; }.compact-card { display:grid;grid-template-columns:168px minmax(0,1fr);gap:9px;align-items:start; }.compact-card .video-info { padding:0;gap:7px; }.compact-card .channel-avatar { display:none; }.compact-card .video-title { font-size:12px; }.compact-card .video-meta { font-size:11px; }.compact-card .card-actions { bottom:0; }.comments-section { margin-top:28px;padding-top:18px;border-top:1px solid var(--line); }.comment-form { display:flex;gap:8px;margin-bottom:16px; }.comment-form input,.playlist-create-row input { flex:1;min-width:0;padding:11px 12px;border:0;border-bottom:1px solid #666;background:transparent;color:inherit;outline:none; }.comment-form button,.playlist-create-row button { padding:9px 15px;border:0;border-radius:18px;background:#383840;color:inherit;cursor:pointer; }.comment-item { padding:12px 0;border-bottom:1px solid var(--line);font-size:13px; }
.channel-banner { height:150px;border-radius:16px;background:linear-gradient(115deg,#302148,#5b305f 55%,#a64d7b); }.channel-profile { display:flex;align-items:center;gap:20px;padding:22px 10px; }.channel-profile-avatar { width:92px;height:92px;flex:0 0 92px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#7553aa;font-size:32px;font-weight:700; }.channel-profile-avatar img { width:100%;height:100%;object-fit:cover; }.channel-profile-copy { flex:1;min-width:0; }.channel-profile-copy h1 { margin:0 0 7px;font-size:24px; }.channel-profile-copy p { margin:4px 0;color:var(--muted);font-size:13px; }.channel-tabs,.library-tabs { display:flex;gap:20px;overflow-x:auto;padding:12px 0;border-bottom:1px solid var(--line); }.channel-tab { padding:8px 3px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);cursor:pointer; }.channel-tab.selected { border-color:currentColor;color:inherit; }.channel-view .video-grid { margin-top:20px; }
.library-tabs a { color:var(--muted);text-decoration:none;font-size:13px;white-space:nowrap; }.library-tabs a:hover { color:inherit; }.text-button { border:0;background:none;color:var(--muted);cursor:pointer; }.playlist-group { margin:20px 0; }.playlist-group h2 { margin-bottom:14px;font-size:18px; }.playlist-group .video-grid { margin-top:12px; }.mini-player { position:fixed;z-index:30;right:22px;bottom:22px;width:min(380px,calc(100vw - 30px));padding:8px;border:1px solid #555;border-radius:12px;background:#18181e;box-shadow:0 12px 40px #000a; }.mini-player-bar { display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 4px 8px;font-size:12px; }.mini-player-bar button,.dialog-close { width:28px;height:28px;border:0;border-radius:50%;background:#333;color:#fff;cursor:pointer; }.mini-player-frame { aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#000; }.mini-player-frame iframe { width:100%;height:100%;border:0; }
.app-dialog { width:min(430px,calc(100% - 28px));padding:28px;border:1px solid #444;border-radius:18px;background:#202127;color:#f5f5f7;box-shadow:0 24px 80px #000b; }.app-dialog::backdrop { background:#000a;backdrop-filter:blur(5px); }.app-dialog h2 { margin:5px 0 12px; }.app-dialog p { color:var(--muted);line-height:1.55; }.dialog-close { float:right;font-size:20px; }.app-dialog .primary-button { display:inline-block;margin-top:8px;background:#f1f1f1;color:#111; }.app-dialog label { display:block;margin:15px 0 7px;font-size:13px; }.playlist-option { display:block;width:100%;padding:11px;border:0;border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer; }.playlist-option:hover { background:#333; }.playlist-create-row { display:flex;gap:8px; }.toast { position:fixed;z-index:40;left:50%;bottom:28px;transform:translate(-50%,20px);padding:12px 18px;border-radius:9px;background:#f2f2f2;color:#161616;font-size:13px;opacity:0;pointer-events:none;transition:.2s ease; }.toast.visible { transform:translate(-50%,0);opacity:1; }
body.light-theme { color:#1b1b1b;background:#f9f9f9;--muted:#606060;--line:#ddd; }.light-theme .topbar,.light-theme .categories { background:rgba(249,249,249,.96); }.light-theme .search,.light-theme .category,.light-theme .create-button,.light-theme .voice-button,.light-theme .watch-action { background:#eee;color:#202020; }.light-theme .side-link { color:#202020; }.light-theme .side-link:hover,.light-theme .side-link.selected { background:#e7e7e7; }.light-theme .video-title { color:#1b1b1b; }.light-theme .video-menu,.light-theme .popover,.light-theme .app-dialog { background:#fff;color:#202020;border-color:#ddd; }.light-theme .video-menu button { color:#202020; }.light-theme .watch-description { background:#eee; }.light-theme .subscribe-button.subscribed { background:#e7e7e7;color:#111; }
body.sidebar-collapsed .app-layout { grid-template-columns:76px minmax(0,1fr); } body.sidebar-collapsed .side-link { justify-content:center;gap:0;padding:0; } body.sidebar-collapsed .side-label,body.sidebar-collapsed .side-divider,body.sidebar-collapsed .side-caption,body.sidebar-collapsed .sidebar-note,body.sidebar-collapsed .section-link span:last-child { display:none; } body.sidebar-collapsed .side-link { position:relative; } body.sidebar-collapsed .side-link:hover::after { content:attr(title);position:absolute;left:64px;z-index:15;padding:8px 10px;border-radius:7px;background:#333;color:#fff;white-space:nowrap;font-size:12px; }
@media(min-width:1600px){.video-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:1150px){.topbar{grid-template-columns:210px minmax(180px,580px) 1fr;gap:16px}.app-layout{grid-template-columns:210px minmax(0,1fr)}.content{padding-right:22px;padding-left:20px}.categories{margin-left:-20px;margin-right:-22px;padding-left:20px}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.watch-layout{grid-template-columns:minmax(0,1fr) 300px}.compact-card{grid-template-columns:140px minmax(0,1fr)}}
@media(max-width:720px){.topbar{height:58px;grid-template-columns:auto minmax(100px,1fr) auto;gap:10px;padding:0 10px}.brand-area{gap:8px}.brand{font-size:17px}.brand-mark{width:26px;height:19px}.menu-button{width:34px;flex-basis:34px}.create-button{display:none}.top-actions{gap:4px}.search{height:36px}.search input{padding:0 10px;font-size:13px}.search button{width:40px;flex-basis:40px}.app-layout,body.sidebar-collapsed .app-layout{display:block}.sidebar{position:fixed;z-index:18;top:58px;left:0;width:220px;height:calc(100vh - 58px);background:#111;box-shadow:8px 0 24px #0007;transform:translateX(-110%);transition:transform .2s}.sidebar.mobile-open{transform:translateX(0)}.content{padding:0 15px 20px}.categories{top:58px;margin:0 -15px 14px;padding:10px 15px}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.watch-layout{grid-template-columns:1fr}.up-next{margin-top:8px}.up-next .video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.compact-card{display:block}.compact-card .video-info{padding-top:8px}.channel-profile{align-items:flex-start;flex-wrap:wrap}.channel-profile-avatar{width:68px;height:68px;flex-basis:68px}.channel-profile-copy{width:calc(100% - 90px)}body.search-results .video-card{grid-template-columns:180px minmax(0,1fr)}body.search-results .video-title{font-size:14px}}
@media(max-width:480px){.video-grid{grid-template-columns:1fr}.topbar{grid-template-columns:auto minmax(0,1fr) auto}.avatar{width:30px;height:30px}.watch-buttons{width:100%}.watch-action-row{align-items:flex-start}.watch-channel{flex-wrap:wrap}.channel-profile-copy h1{font-size:20px}body.search-results .video-card{grid-template-columns:132px minmax(0,1fr);gap:10px}body.search-results .video-info{gap:0}body.search-results .channel-avatar{display:none}body.search-results .video-title{font-size:12px}.shorts-rail{grid-auto-columns:minmax(125px,40vw)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}
.channel-avatar { border:0;padding:0;cursor:pointer; }
.video-title { display:-webkit-box;max-width:100%;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2; }
.video-description { display:-webkit-box;overflow:hidden;margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2; }
.skeleton-card { min-width:0; }.skeleton-card span,.skeleton-card i { display:block;background:linear-gradient(100deg,#202027 20%,#30303a 45%,#202027 70%);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:10px; }.skeleton-card span { aspect-ratio:16/9; }.skeleton-card i { width:70%;height:12px;margin:12px 0 0 46px; }.skeleton-card i:last-child { width:42%;margin-top:8px; }
@keyframes shimmer { to { background-position-x:-200%; } }
.light-theme .video-description { color:#666; }.light-theme .channel-name { color:#606060; }.light-theme .channel-name:hover,.light-theme .watch-channel-name:hover { color:#111; }
@media(max-width:720px){.video-title{-webkit-line-clamp:2}.video-description{display:none}}
.topbar { grid-template-columns:minmax(180px,1fr) minmax(240px,640px) minmax(180px,1fr); }
.search .voice-button { width:42px;flex:0 0 42px;border-left:0;border-radius:0 22px 22px 0; }
.video-open:focus-visible,.video-title:focus-visible,.channel-name:focus-visible,.side-link:focus-visible,.icon-button:focus-visible,.category:focus-visible,.watch-action:focus-visible { outline:2px solid #9d8aff;outline-offset:3px; }
@media(max-width:1150px){.topbar{grid-template-columns:minmax(150px,1fr) minmax(240px,580px) minmax(150px,1fr)}}
@media(max-width:720px){.topbar{grid-template-columns:auto minmax(120px,1fr) auto}.search .voice-button{width:34px;flex-basis:34px}}

.feed-sentinel{height:2px;scroll-margin-top:120px}.load-more:not([hidden]){display:block;margin:18px auto 8px}