:root{
  color-scheme:dark;
  --bg:#0f0f0f;--surface:#181818;--surface2:#272727;--line:#303030;--text:#f1f1f1;--muted:#aaa;
  --sidebar:240px;--topbar:56px;--radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Roboto,Arial,system-ui,sans-serif}
button,input,select{font:inherit}
button{color:inherit}
[hidden]{display:none!important}
.topbar{position:fixed;z-index:50;top:0;left:0;right:0;height:var(--topbar);display:flex;align-items:center;gap:14px;padding:0 16px;background:rgba(15,15,15,.98)}
.icon-btn{width:40px;height:40px;border:0;background:transparent;border-radius:50%;cursor:pointer;font-size:21px;display:grid;place-items:center}
.icon-btn:hover{background:#272727}
.brand{display:flex;align-items:center;gap:5px;border:0;background:transparent;font-size:20px;font-weight:750;cursor:pointer;padding:6px 4px;letter-spacing:-.5px}
.brand-mark{display:grid;place-items:center;width:29px;height:20px;border-radius:6px;background:#ff0033;color:#fff;font-size:11px;padding-left:2px}
.searchbar{display:flex;align-items:center;max-width:610px;min-width:260px;flex:1;margin:0 auto;height:40px}
.searchbar input{height:40px;flex:1;background:#121212;color:#fff;border:1px solid #303030;border-radius:20px 0 0 20px;padding:0 16px;font-size:16px;outline:none;min-width:0}
.searchbar input:focus{border-color:#1c62b9}
.search-btn{width:64px;height:40px;border:1px solid #303030;border-left:0;border-radius:0 20px 20px 0;background:#222;cursor:pointer;font-size:27px;line-height:1}
.top-actions{display:flex;align-items:center;gap:5px}
.account-btn{width:34px;height:34px;border-radius:50%;overflow:hidden;border:0;background:#7e57c2;color:#fff;cursor:pointer;display:grid;place-items:center;font-weight:700}
.account-btn img{width:100%;height:100%;object-fit:cover}
.sidebar{position:fixed;z-index:40;top:var(--topbar);bottom:0;left:0;width:var(--sidebar);background:var(--bg);overflow-y:auto;padding:10px 12px 24px}
.sidebar.compact{width:76px}
.sidebar.compact .side-item b,.sidebar.compact .side-divider,.sidebar.compact .side-section{display:none}
.side-nav,.subscription-list,.playlist-list{display:flex;flex-direction:column;gap:2px}
.side-item,.subscription-row,.playlist-row{border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:18px;width:100%;min-height:42px;border-radius:10px;padding:0 12px;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden}
.side-item span{font-size:22px;width:24px;text-align:center}.side-item b{font-size:14px}.side-item:hover,.subscription-row:hover,.playlist-row:hover,.side-item.active{background:#272727}
.side-divider{height:1px;background:#303030;margin:12px 0}
.subscription-row img,.channel-dot{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#333;flex:0 0 auto}
.subscription-row span,.playlist-row span{font-size:14px;overflow:hidden;text-overflow:ellipsis}
.content{margin-left:var(--sidebar);padding-top:var(--topbar);min-height:100vh}
body.sidebar-compact .content{margin-left:76px}
.home-view{padding:12px 24px 48px}
.chips{position:sticky;top:var(--topbar);z-index:20;background:var(--bg);display:flex;gap:10px;padding:4px 0 14px;overflow-x:auto}
.chip{border:0;background:#272727;border-radius:8px;padding:8px 13px;font-weight:600;cursor:pointer;white-space:nowrap}
.chip.active{background:#f1f1f1;color:#111}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:30px 16px}
.video-card{cursor:pointer;min-width:0}.thumb-wrap{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#202020}.thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block}.duration-badge{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.8);padding:2px 4px;border-radius:4px;font-size:12px;font-weight:600}
.card-body{display:flex;gap:10px;padding-top:10px}.card-avatar{width:36px;height:36px;border-radius:50%;background:#333;object-fit:cover;flex:0 0 auto}.card-text{min-width:0}.card-title{font-size:15px;font-weight:650;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-meta{color:var(--muted);font-size:13px;margin-top:5px;line-height:1.45}.empty-state{display:grid;place-items:center;min-height:45vh;color:var(--muted);font-size:14px}.section-head h1{font-size:20px;margin:2px 0 18px}
.watch-view{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;max-width:1660px;margin:0 auto;padding:24px 24px 60px}.watch-main{min-width:0}.watch-side{min-width:0}
.video-shell{position:relative;width:100%;background:#000;aspect-ratio:16/9;overflow:hidden;border-radius:12px}.video-shell video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain}.active-video{visibility:visible;z-index:2}.staging-video{visibility:hidden;z-index:1;pointer-events:none}
.player-gear{position:absolute;right:14px;bottom:52px;z-index:5;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.65);opacity:0;transition:.15s;cursor:pointer}.video-shell:hover .player-gear{opacity:1}.player-menu{position:absolute;right:14px;bottom:94px;z-index:10;width:250px;border-radius:12px;background:rgba(30,30,30,.97);box-shadow:0 8px 30px #0008;padding:8px}.player-menu label{display:flex;justify-content:space-between;align-items:center;padding:10px 8px;font-size:14px}.player-menu select{background:#111;border:1px solid #444;color:#fff;border-radius:7px;padding:6px}.player-menu-actions{display:flex;gap:8px;padding:6px 8px}.player-menu-actions button{flex:1;border:0;border-radius:8px;background:#3a3a3a;padding:8px;cursor:pointer}
.watch-title{font-size:20px;line-height:1.35;margin:12px 0 10px}.watch-meta-row{display:flex;justify-content:space-between;align-items:center;gap:16px}.channel-box{display:flex;align-items:center;gap:10px;min-width:0}.channel-avatar{width:40px;height:40px;border-radius:50%;background:#333;object-fit:cover}.channel-text{display:flex;flex-direction:column;min-width:0}.channel-text strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-text small{color:var(--muted);font-size:12px;margin-top:2px}.watch-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.pill-btn{border:0;background:#272727;border-radius:20px;padding:9px 14px;cursor:pointer;font-weight:600}.pill-btn:hover{background:#3a3a3a}
.description-box{background:#272727;border-radius:12px;padding:12px;margin-top:14px;font-size:14px;line-height:1.45}.description-stats{font-weight:650;margin-bottom:5px}.description-text{white-space:pre-wrap;overflow-wrap:anywhere}.description-text.collapsed{max-height:64px;overflow:hidden}.text-btn{border:0;background:transparent;color:#fff;font-weight:700;padding:5px 0;cursor:pointer}
.chapter-strip{display:flex;gap:8px;overflow-x:auto;margin-top:14px;padding-bottom:2px}.chapter-chip{border:0;background:#272727;border-radius:9px;padding:8px 10px;white-space:nowrap;cursor:pointer;font-size:13px}.chapter-chip:hover{background:#3b3b3b}.chapter-chip b{color:#9ecbff;margin-right:6px}
.comments{margin-top:24px}.comments-head{margin-bottom:14px}.comment{display:flex;gap:10px;margin:18px 0}.comment-avatar{width:38px;height:38px;border-radius:50%;background:#333;object-fit:cover}.comment-body{min-width:0;font-size:14px}.comment-author{font-weight:650;font-size:12px}.comment-text{margin-top:5px;white-space:pre-wrap}.comment-meta{color:var(--muted);font-size:12px;margin-top:5px}
.related-list{display:flex;flex-direction:column;gap:10px}.related-card{display:grid;grid-template-columns:168px minmax(0,1fr);gap:8px;cursor:pointer}.related-card .thumb-wrap{border-radius:8px}.related-card .card-title{font-size:14px}.related-card .card-meta{font-size:12px;margin-top:4px}.playlist-now{border:1px solid #333;border-radius:12px;margin-bottom:14px;overflow:hidden}.playlist-now-head{display:flex;justify-content:space-between;padding:10px 12px;background:#1d1d1d}.playlist-now-items{max-height:300px;overflow:auto}.playlist-now-item{display:grid;grid-template-columns:24px 84px minmax(0,1fr);gap:7px;align-items:center;padding:6px 8px;cursor:pointer;font-size:12px}.playlist-now-item.active{background:#272727}.playlist-now-item img{width:84px;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.modal-backdrop{position:fixed;z-index:100;inset:0;background:#0009;display:grid;place-items:center;padding:20px}.settings-modal{width:min(880px,96vw);height:min(680px,90vh);background:#181818;border-radius:14px;overflow:hidden;box-shadow:0 20px 70px #000}.settings-head{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #303030}.settings-layout{display:grid;grid-template-columns:190px 1fr;height:calc(100% - 58px)}.settings-nav{border-right:1px solid #303030;padding:12px}.settings-tab{display:block;width:100%;border:0;background:transparent;text-align:left;border-radius:9px;padding:11px 12px;cursor:pointer}.settings-tab.active,.settings-tab:hover{background:#272727}.settings-body{overflow:auto;padding:22px}.settings-pane{display:none}.settings-pane.active{display:block}.setting-row,.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #292929}.setting-row>div{display:flex;flex-direction:column;gap:4px}.setting-row small,.setting-note,.device-codec{color:var(--muted);font-size:13px}.setting-field{display:flex;flex-direction:column;gap:7px;margin:18px 0}.setting-field span{font-size:13px}.setting-field input,.setting-field select,.manual-offline select,.offline-library-row select{width:100%;background:#111;color:#fff;border:1px solid #444;border-radius:8px;padding:10px}.settings-pane button{border:0;background:#303030;border-radius:8px;padding:9px 13px;cursor:pointer}.settings-pane button:hover{background:#444}.manual-offline{display:flex;gap:8px}.offline-library-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;margin:18px 0}.device-codec{background:#222;border-radius:9px;padding:10px 12px}.dev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.dev-grid>div{background:#222;border-radius:9px;padding:10px}.dev-grid small{color:var(--muted)}.dev-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}#analysisState,#detailsState,#benchmarkState,#status{font-size:12px;color:var(--muted);margin:5px 0}pre#log{height:270px;overflow:auto;background:#090909;border:1px solid #333;border-radius:8px;padding:10px;white-space:pre-wrap;font-size:12px}.ok{color:#80d99d}
.mini-modal{width:min(460px,92vw);max-height:70vh;background:#181818;border-radius:14px;overflow:hidden}.modal-list{max-height:calc(70vh - 58px);overflow:auto;padding:10px}.modal-list button{display:flex;width:100%;border:0;background:transparent;border-radius:9px;padding:10px;cursor:pointer;text-align:left}.modal-list button:hover{background:#272727}
@media(max-width:1100px){:root{--sidebar:76px}.side-item b,.side-divider,.side-section{display:none}.watch-view{grid-template-columns:1fr}.watch-side{display:none}}
@media(max-width:700px){.topbar{padding:0 8px;gap:6px}.brand span:last-child{display:none}.searchbar{min-width:0}.search-btn{width:48px}.sidebar{display:none}.content,body.sidebar-compact .content{margin-left:0}.home-view{padding:8px 12px 36px}.video-grid{grid-template-columns:1fr;gap:24px}.watch-view{padding:0 0 40px}.video-shell{border-radius:0}.watch-title,.watch-meta-row,.description-box,.comments,.chapter-strip{margin-left:12px;margin-right:12px}.watch-meta-row{align-items:flex-start}.watch-actions .pill-btn span{display:none}.settings-layout{grid-template-columns:1fr}.settings-nav{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid #303030}.settings-tab{width:auto;white-space:nowrap}.settings-modal{height:92vh}.settings-body{padding:16px}.offline-library-row{grid-template-columns:1fr 1fr}.offline-library-row select{grid-column:1/-1}}

.bridge-install-btn{border:0;border-radius:18px;background:#fff;color:#0f0f0f;padding:8px 14px;font-weight:700;cursor:pointer;white-space:nowrap}
.bridge-install-btn:hover{background:#ddd}
.bridge-install-modal{width:min(520px,92vw);max-height:82vh}
.bridge-install-body{padding:20px;overflow:auto}
.bridge-install-body>p{margin:0 0 16px;color:#ddd}
.bridge-download{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;border-radius:22px;background:#fff;color:#111;font-weight:800;text-decoration:none;margin:8px 0 18px}
.bridge-download:hover{background:#ddd}
.bridge-steps{margin:0;padding-left:22px;color:#ddd;line-height:1.7}
.bridge-steps code{background:#0d0d0d;border:1px solid #3a3a3a;border-radius:6px;padding:2px 6px}
.bridge-install-actions{display:flex;gap:8px;margin-top:18px}
.bridge-install-actions button{flex:1;border:0;border-radius:9px;background:#303030;padding:10px;color:#fff;cursor:pointer}
.bridge-install-actions button:hover{background:#444}
@media(max-width:700px){.bridge-install-btn{display:none!important}.bridge-install-actions{flex-direction:column}}

.global-progress{position:fixed;z-index:250;top:0;left:0;right:0;height:3px;overflow:hidden;pointer-events:none;background:transparent}
.global-progress i{display:block;width:38%;height:100%;background:#ff0033;animation:litube-loading 1s ease-in-out infinite}
@keyframes litube-loading{0%{transform:translateX(-110%)}55%{transform:translateX(145%)}100%{transform:translateX(310%)}}
.card-body{position:relative;padding-right:34px}.card-avatar{border:0;padding:0;overflow:hidden}.card-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.card-more{position:absolute;right:0;top:5px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:#eee;cursor:pointer;font-size:22px;line-height:1}.card-more:hover{background:#2b2b2b}
.card-popover{position:fixed;z-index:180;width:270px;padding:8px;background:#282828;border-radius:12px;box-shadow:0 8px 30px #000b}
.card-popover button{display:flex;width:100%;align-items:center;gap:12px;border:0;background:transparent;border-radius:8px;color:#fff;padding:11px 12px;text-align:left;cursor:pointer}.card-popover button:hover{background:#3c3c3c}.card-popover .danger{border-top:1px solid #444;margin-top:5px;padding-top:12px}
.shorts-section{margin:8px 0 34px}.shorts-heading{display:flex;align-items:center;gap:9px;font-size:20px;margin:4px 0 14px}.shorts-mark{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#ff0033;font-size:10px}
.shorts-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,220px);gap:14px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.short-card{cursor:pointer;min-width:0;position:relative}.short-thumb{position:relative;aspect-ratio:9/16;background:#202020;border-radius:12px;overflow:hidden}.short-thumb img{width:100%;height:100%;object-fit:cover}.short-title{font-size:14px;font-weight:650;line-height:1.35;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.short-meta{color:var(--muted);font-size:12px;margin-top:4px}
@media(max-width:700px){.shorts-grid{grid-auto-columns:minmax(145px,44vw)}}

/* Litube 0.29 UI */
:root{--sidebar:216px;--topbar:56px}
.topbar{padding:0 20px 0 16px;gap:12px;border-bottom:1px solid transparent}
.brand{min-width:122px;font-size:20px;font-weight:800;letter-spacing:-.7px}
.brand-mark{width:30px;height:20px;border-radius:6px}
.searchbar{max-width:680px;height:40px}
.searchbar input{font-size:16px;border-color:#303030;background:#121212}
.searchbar input:focus{border-color:#1c62b9;box-shadow:inset 1px 0 0 #1c62b9}
.search-btn{width:64px;background:#222}
.sidebar{width:var(--sidebar);padding:12px 12px 28px}
.side-nav{gap:1px}.side-item{height:42px;padding:0 12px;border-radius:10px;gap:20px}.side-item b{font-weight:500}
.side-heading{padding:8px 12px 5px;font-size:16px;font-weight:700}.nav-divider{margin:12px 0 6px}
.content{margin-left:var(--sidebar)}
.home-view{padding:14px 24px 56px}
.chips{padding:2px 0 18px;gap:10px}.chip{font-size:14px;border-radius:8px;padding:8px 12px}
.video-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;row-gap:38px}
.video-card .thumb-wrap{border-radius:12px}.card-body{gap:11px;padding-top:10px}.card-avatar{width:36px;height:36px}
.card-title{font-size:15px;line-height:1.38;font-weight:650}.card-meta{font-size:13px;line-height:1.55}
.card-more{opacity:0}.video-card:hover .card-more,.search-video-card .card-more{opacity:1}
.shorts-section{margin:6px 0 38px;border-top:1px solid #272727;border-bottom:1px solid #272727;padding:18px 0 24px}
.shorts-heading{font-size:20px;margin-bottom:15px}.shorts-grid{grid-auto-columns:minmax(180px,1fr)}
.search-results{display:flex!important;flex-direction:column;gap:16px;max-width:1180px;margin:0 auto}
.search-video-card{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:16px;cursor:pointer}
.search-video-card .thumb-wrap{width:100%;border-radius:12px}
.search-video-card .card-body{padding:3px 38px 0 0;display:grid;grid-template-columns:36px minmax(0,1fr);align-content:start;column-gap:12px}
.search-video-card .card-title{font-size:18px;font-weight:500;line-height:1.35;-webkit-line-clamp:2}
.search-video-card .card-meta{font-size:13px;margin-top:6px}
.search-video-card .card-more{top:0}
.channel-result{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr) auto;gap:16px;align-items:center;min-height:150px;padding:10px 0;border-bottom:1px solid #272727;cursor:pointer}
.channel-result-avatar{width:136px;height:136px;border-radius:50%;object-fit:cover;background:#272727;justify-self:center}
.channel-result-body{min-width:0}.channel-result-body strong{display:block;font-size:18px;font-weight:500;margin-bottom:8px}
.channel-result-meta,.channel-result-desc{color:#aaa;font-size:13px;line-height:1.5}.channel-result-desc{margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.channel-result-open{border:0;background:#f1f1f1;color:#111;border-radius:18px;padding:9px 17px;font-weight:700;cursor:pointer}
.search-skeleton{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:16px}
.search-skeleton-thumb{aspect-ratio:16/9;border-radius:12px;background:linear-gradient(90deg,#202020,#2b2b2b,#202020);background-size:200% 100%;animation:skeleton 1.1s linear infinite}
.search-skeleton-lines{padding-top:10px}.search-skeleton-lines i{display:block;height:14px;border-radius:7px;margin-bottom:12px;background:linear-gradient(90deg,#202020,#2b2b2b,#202020);background-size:200% 100%;animation:skeleton 1.1s linear infinite}.search-skeleton-lines i:nth-child(1){width:78%;height:19px}.search-skeleton-lines i:nth-child(2){width:42%}.search-skeleton-lines i:nth-child(3){width:58%}
.watch-view{max-width:1760px;grid-template-columns:minmax(0,1fr) 402px;gap:24px;padding:24px 24px 64px}
.related-card{grid-template-columns:168px minmax(0,1fr);gap:8px}
@media(max-width:1500px){.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1120px){:root{--sidebar:76px}.side-item b,.side-heading,.side-divider,.side-section{display:none}.content{margin-left:76px}.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.watch-view{grid-template-columns:1fr}.watch-side{display:none}}
@media(max-width:900px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.search-video-card,.search-skeleton{grid-template-columns:minmax(240px,320px) minmax(0,1fr)}.channel-result{grid-template-columns:220px 1fr auto}.channel-result-avatar{width:110px;height:110px}}
@media(max-width:700px){.video-grid{grid-template-columns:1fr}.search-results{gap:20px}.search-video-card,.search-skeleton{grid-template-columns:1fr}.search-video-card .card-body{grid-template-columns:36px 1fr}.channel-result{grid-template-columns:90px 1fr}.channel-result-avatar{width:76px;height:76px}.channel-result-open{display:none}.home-view{padding:10px 12px 40px}.shorts-grid{grid-auto-columns:44vw}}

.search-shorts-block{margin:8px 0 18px;padding:18px 0 22px;border-top:1px solid #272727;border-bottom:1px solid #272727}
.search-shorts-block .shorts-heading{margin:0 0 14px}
.search-shorts-block .shorts-grid{grid-auto-columns:minmax(170px,210px)}

.embed-fallback{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:4}
.video-shell.embed-mode video,.video-shell.embed-mode .player-gear,.video-shell.embed-mode .player-menu{display:none!important}
