:root { color-scheme: dark; --bg:#0f0f0f; --panel:#181818; --panel-2:#272727; --text:#f1f1f1; --muted:#aaa; --red:#ff0033; --sidebar:240px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Arial,Helvetica,sans-serif; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.topbar { position:fixed; z-index:20; inset:0 0 auto; height:64px; display:flex; align-items:center; gap:18px; padding:0 22px; background:rgba(15,15,15,.97); border-bottom:1px solid #282828; }
.icon-button { border:0; background:transparent; color:#fff; font-size:25px; cursor:pointer; }
.brand { display:flex; align-items:center; gap:7px; min-width:205px; color:#fff; text-decoration:none; letter-spacing:-.4px; }
.brand-play { display:grid; place-items:center; width:32px; height:23px; padding-left:2px; border-radius:7px; background:var(--red); font-size:12px; }
.brand strong { font-size:20px; }.brand>span:last-child { color:#aaa; font-size:12px; align-self:flex-end; margin-bottom:10px; }
.search { flex:1; max-width:680px; margin:auto; display:flex; }
.search input { width:100%; min-width:0; height:42px; padding:0 18px; border:1px solid #333; border-radius:22px 0 0 22px; background:#121212; color:#fff; outline:none; }
.search input:focus { border-color:#1c62b9; }
.search button { width:64px; border:1px solid #333; border-left:0; border-radius:0 22px 22px 0; background:#242424; color:#fff; font-size:26px; cursor:pointer; }
.house-link { padding:10px 14px; border-radius:20px; background:#272727; color:#fff; text-decoration:none; font-size:14px; white-space:nowrap; }
.sidebar { position:fixed; z-index:15; top:64px; bottom:0; left:0; width:var(--sidebar); overflow:auto; padding:14px 12px 30px; background:var(--bg); transition:transform .2s ease; }
.sidebar nav,.channel-links { display:grid; gap:4px; }.sidebar h2 { padding:0 12px; font-size:16px; }
.nav-item,.channel-link { width:100%; display:flex; align-items:center; gap:22px; min-height:42px; padding:0 14px; border:0; border-radius:10px; background:transparent; color:#eee; text-align:left; text-decoration:none; cursor:pointer; }
.nav-item span { width:20px; font-size:20px; text-align:center; }.nav-item:hover,.nav-item.active,.channel-link:hover { background:#272727; }.nav-item.active { font-weight:700; }
.channel-link { gap:12px; font-size:14px; }.channel-avatar { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#ff1744,#7c4dff); font-weight:700; }
.channel-link span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.channel-category-group { margin:7px 0 10px; }
.channel-category-group summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:0 12px 0 14px; border:2px solid #eee; border-radius:11px; background:#202020; color:#f5f5f5; cursor:pointer; font-size:15px; font-weight:700; list-style:none; transition:background .15s ease,border-color .15s ease; }
.channel-category-group summary::-webkit-details-marker { display:none; }
.channel-category-group summary:hover,.channel-category-group summary:focus-visible { background:#282828; border-color:#fff; outline:none; }
.channel-category-group[open] summary { background:#242424; }
.channel-category-group summary small { display:grid; place-items:center; min-width:38px; height:28px; padding:0 9px; border-radius:14px; background:#303030; color:#bbb; font-size:12px; font-weight:700; }
.category-channels { display:grid; gap:3px; padding:4px 0 2px 6px; }
.category-channels .channel-link { min-height:38px; padding-left:10px; }
.sidebar-divider { height:1px; margin:14px 0; background:#303030; }
.content { margin-left:var(--sidebar); padding:82px 26px 50px; transition:margin .2s ease; }
.chips { position:sticky; z-index:10; top:64px; display:flex; gap:10px; overflow:auto; padding:10px 0 14px; background:var(--bg); scrollbar-width:none; }.chips::-webkit-scrollbar{display:none}
.chip { flex:none; padding:8px 13px; border:0; border-radius:9px; background:#292929; color:#fff; cursor:pointer; }.chip.active { background:#f1f1f1; color:#111; }
.hero { min-height:280px; margin:8px 0 32px; border-radius:18px; overflow:hidden; background:#191919 center/cover no-repeat; }
.hero-inner { min-height:280px; display:flex; align-items:flex-end; padding:38px; background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.62) 43%,rgba(0,0,0,.05) 75%),linear-gradient(0deg,rgba(0,0,0,.7),transparent 55%); }
.hero-copy { max-width:570px; }.hero-copy .eyebrow { color:#ff6b7f; }.hero-copy h2 { margin:5px 0 12px; font-size:clamp(26px,4vw,44px); line-height:1.05; }.hero-copy p { color:#ddd; line-height:1.5; }.play-button { display:inline-flex; gap:8px; align-items:center; margin-top:8px; padding:11px 18px; border:0; border-radius:22px; background:#fff; color:#111; font-weight:700; cursor:pointer; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }.section-heading h1 { margin:3px 0 0; font-size:25px; }.eyebrow { margin:0; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.3px; }.result-count { color:var(--muted); font-size:13px; }
.video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:30px 18px; }
.load-more { display:block; margin:34px auto 0; padding:11px 20px; border:1px solid #555; border-radius:22px; background:#272727; color:#fff; cursor:pointer; font-weight:700; }.load-more:hover,.load-more:focus-visible { background:#353535; border-color:#888; }.load-more[hidden] { display:none; }
.video-card { min-width:0; cursor:pointer; }.thumbnail { position:relative; overflow:hidden; aspect-ratio:16/9; border-radius:12px; background:#242424; }.thumbnail img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }.video-card:hover img { transform:scale(1.035); }.source-badge { position:absolute; top:8px; left:8px; padding:5px 8px; border-radius:6px; background:rgba(0,0,0,.78); font-size:11px; font-weight:700; }.source-badge.owned { background:rgba(255,0,51,.88); }.play-overlay { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,0); font-size:42px; opacity:0; transition:.2s; }.video-card:hover .play-overlay { opacity:1; background:rgba(0,0,0,.25); }
.video-info { display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; padding-top:12px; }.video-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#ff1744,#512da8); font-weight:700; }.video-title { margin:0 0 7px; display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:15px; line-height:1.35; }.video-meta { margin:3px 0; color:var(--muted); font-size:13px; }.empty-state { padding:70px 20px; text-align:center; color:#aaa; }
.player-dialog { width:min(1100px,96vw); max-height:94vh; padding:0; border:1px solid #333; border-radius:14px; background:#171717; color:#fff; }.player-dialog::backdrop { background:rgba(0,0,0,.88); }.dialog-close { position:absolute; z-index:2; top:8px; right:10px; width:38px; height:38px; border:0; border-radius:50%; background:rgba(0,0,0,.7); color:#fff; font-size:28px; cursor:pointer; }.player-frame { aspect-ratio:16/9; background:#000; }.player-frame iframe { width:100%; height:100%; border:0; }.player-details { padding:20px 24px 25px; }.player-details h2 { margin:0 50px 8px 0; }.player-details p { color:#aaa; line-height:1.5; }.player-details a { color:#fff; font-weight:700; }
body.sidebar-closed .sidebar { transform:translateX(-100%); } body.sidebar-closed .content { margin-left:0; }
@media (max-width:800px) { .topbar{gap:10px;padding:0 12px}.brand{min-width:auto}.brand strong,.brand>span:last-child,.house-link{display:none}.sidebar{transform:translateX(-100%);box-shadow:8px 0 30px #000}.content{margin-left:0;padding:76px 14px 40px}body.sidebar-open .sidebar{transform:none}.hero,.hero-inner{min-height:235px}.hero-inner{padding:24px}.video-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} }
@media (max-width:520px) { .video-grid{grid-template-columns:1fr}.hero-copy p{display:none}.hero,.hero-inner{min-height:210px}.search button{width:45px}.player-details{padding:16px}.thumbnail{border-radius:9px} }