:root{
  --bg:#080b10;
  --bg-soft:#0e131d;
  --panel:#141a25;
  --text:#fff;
  --muted:#b9c1cc;
  --brand:#1687ff;
  --brand-2:#0967df;
  --glass:rgba(22,28,40,.76);
  --shadow:0 18px 55px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}

.topbar{position:fixed;z-index:100;top:0;left:0;right:0;height:68px;display:flex;align-items:center;padding:0 4%;gap:38px;background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.12),transparent);transition:background .28s ease,box-shadow .28s ease}
.topbar.scrolled{background:rgba(7,10,15,.97);box-shadow:0 8px 30px rgba(0,0,0,.2)}
.brand-logo-link{display:inline-flex;align-items:center;flex:0 0 auto}.brand-logo-img{display:block;width:clamp(150px,13vw,205px);height:auto;max-height:58px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(22,135,255,.16))}
.topbar nav{display:flex;gap:22px;font-size:14px;align-items:center}
.topbar nav a{color:#e8edf5;transition:color .18s ease}
.topbar nav a:hover{color:#fff}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:17px}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:0;background:transparent;color:#fff;font-size:25px;cursor:pointer;border-radius:50%}
.icon-btn:hover{background:rgba(255,255,255,.08)}
.avatar{width:34px;height:34px;border-radius:5px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),#52b7ff);font-weight:900;font-size:13px;box-shadow:0 6px 18px rgba(0,105,223,.25)}

.search-panel{position:fixed;z-index:99;top:59px;right:4%;transform:translateY(-10px);opacity:0;pointer-events:none;transition:.2s ease}
.search-panel.open{opacity:1;transform:none;pointer-events:auto}
.search-panel form,.inline-search{display:flex;background:#0d1119;border:1px solid rgba(255,255,255,.3);overflow:hidden;box-shadow:var(--shadow)}
.search-panel input,.inline-search input{width:min(420px,70vw);padding:12px 14px;border:0;outline:0;background:transparent;color:white}
.search-panel button,.inline-search button{border:0;background:var(--brand);color:#fff;padding:0 18px;font-weight:800;cursor:pointer}

.hero,.detail-hero{min-height:82vh;position:relative;display:flex;align-items:center;background-image:linear-gradient(90deg,rgba(5,8,13,.96) 0%,rgba(5,8,13,.83) 28%,rgba(5,8,13,.35) 58%,rgba(5,8,13,.04) 78%),linear-gradient(0deg,var(--bg) 0%,rgba(8,11,16,.08) 28%,transparent 48%),var(--hero);background-size:cover;background-position:center 18%}
.hero::after,.detail-hero::after{content:"";position:absolute;inset:auto 0 0;height:140px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero.empty{min-height:70vh;background:radial-gradient(circle at 75% 25%,rgba(22,135,255,.24),transparent 30%),linear-gradient(135deg,#121a29,#070a0e 64%)}
.hero-content,.detail-content{position:relative;z-index:2;padding:112px 4% 7vh;max-width:700px}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:900;color:#dfe8f6}
.hero h1,.detail-hero h1{font-size:clamp(46px,6vw,82px);line-height:.94;letter-spacing:-.055em;margin:10px 0 18px;text-shadow:0 8px 30px rgba(0,0,0,.55)}
.hero p,.detail-hero p{font-size:clamp(15px,1.22vw,18px);line-height:1.48;color:#f1f4f8;text-shadow:0 2px 13px rgba(0,0,0,.9);max-width:650px;margin:14px 0}
.meta,.card-meta{display:flex;gap:10px;align-items:center;color:#e5e9ef;font-size:14px;flex-wrap:wrap}
.rating{border:1px solid rgba(255,255,255,.55);padding:2px 6px;border-radius:2px}
.hero-actions{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:5px;padding:12px 22px;font-weight:850;font-size:16px;cursor:pointer;transition:transform .18s ease,background .18s ease,opacity .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 9px 24px rgba(22,135,255,.26)}
.btn.primary:hover{background:#3096ff}
.btn.secondary{background:rgba(92,100,114,.72);color:#fff;backdrop-filter:blur(8px)}
.btn.secondary:hover{background:rgba(112,121,137,.83)}

.content{padding:0 4% 90px;position:relative;margin-top:-5.5vh;z-index:5}
.rail{margin:0 0 30px;position:relative}
.rail-head{display:flex;align-items:center;justify-content:space-between;min-height:36px}
.rail h2{font-size:clamp(18px,1.5vw,23px);margin:0 0 10px;letter-spacing:-.015em}
.rail-controls{display:flex;gap:6px;opacity:0;transition:.2s}
.rail:hover .rail-controls{opacity:1}
.rail-controls button{width:34px;height:34px;border:0;border-radius:50%;background:rgba(27,34,46,.94);color:#fff;font-size:22px;cursor:pointer}
.rail-controls button:hover{background:var(--brand)}
.cards{display:flex;gap:8px;overflow-x:auto;overflow-y:visible;scrollbar-width:none;scroll-snap-type:x proximity;padding:4px 0 34px;margin-bottom:-24px}
.cards::-webkit-scrollbar{display:none}
.card{position:relative;flex:0 0 clamp(220px,19vw,305px);scroll-snap-align:start;transition:transform .22s cubic-bezier(.2,.7,.2,1),filter .22s;z-index:1;transform-origin:center center}
.card:hover{transform:scale(1.075);z-index:25}
.poster{position:relative;aspect-ratio:16/9;border-radius:5px;background-image:linear-gradient(135deg,#1b2433,#0c1118),var(--poster);background-size:cover;background-position:center;box-shadow:0 10px 28px rgba(0,0,0,.5);overflow:hidden;border:1px solid rgba(255,255,255,.03)}
.poster::after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(transparent,rgba(7,10,15,.94));opacity:0;transition:.2s}
.poster-fallback{width:100%;height:100%;display:grid;place-items:center;font-size:72px;font-weight:950;color:rgba(255,255,255,.07)}
.card-info{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 11px;opacity:0;transform:translateY(5px);transition:.2s;z-index:3;pointer-events:none}
.card:hover .poster::after,.card:hover .card-info{opacity:1}
.card:hover .card-info{transform:none}
.card h3{font-size:14px;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px #000}
.card-meta{font-size:10.5px;white-space:nowrap;overflow:hidden;color:#c9d0da;gap:7px}
.list-btn{position:absolute;right:9px;top:9px;width:33px;height:33px;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:rgba(11,15,21,.78);color:#fff;font-size:19px;cursor:pointer;opacity:0;transition:.18s;z-index:8;backdrop-filter:blur(6px)}
.card:hover .list-btn{opacity:1}
.list-btn:hover{background:var(--brand);border-color:var(--brand)}
.empty-note{color:#9ba7b7;border:1px dashed #303a49;border-radius:8px;padding:24px;min-width:280px;background:rgba(255,255,255,.015)}
footer{padding:45px 4% 60px;color:#6e7989;font-size:12px}

.detail-hero{min-height:100vh;align-items:center;background-position:center 18%}
.detail-content{padding-top:110px;max-width:720px}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.tags span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 10px;font-size:12px}

.watch-page{overflow:hidden;background:#000}
.watch-shell{height:100vh;display:grid;place-items:center;position:relative;background:#000}
.watch-shell video{width:100%;height:100%;object-fit:contain;background:#000}
.back-btn{position:absolute;z-index:5;top:24px;left:24px;width:48px;height:48px;display:grid;place-items:center;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.14);border-radius:50%;font-size:26px;backdrop-filter:blur(8px)}
.back-btn:hover{background:var(--brand)}
.watch-title{position:absolute;left:28px;bottom:25px;z-index:4;pointer-events:none;display:flex;flex-direction:column;text-shadow:0 2px 10px #000}
.watch-title strong{font-size:16px}.watch-title span{font-size:11px;color:#bdbdc6;margin-top:4px}
.no-video{text-align:center;padding:30px}

.search-results{padding:112px 4% 70px;min-height:100vh}
.search-results h1{font-size:28px;margin:0 0 28px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:18px 10px}
.grid .card{width:auto;max-width:none;flex:none}
.inline-search{margin-left:auto;box-shadow:none}
.inline-search input{width:min(360px,50vw)}

@media(max-width:900px){
  .topbar{padding:0 22px;gap:22px}.topbar nav{gap:15px}.brand-logo-img{width:170px}
  .hero,.detail-hero{background-position:62% 20%}.content{padding-left:22px;padding-right:22px}.hero-content,.detail-content{padding-left:22px;padding-right:22px}
  .card{flex-basis:260px}
}
@media(max-width:700px){
  .topbar{height:60px;padding:0 12px;gap:10px}.brand-logo-img{width:132px;max-height:49px}.topbar nav a:nth-child(n+2){display:none}.topbar nav{font-size:13px}.avatar{width:30px;height:30px}
  .hero{min-height:74vh;background-image:linear-gradient(90deg,rgba(5,8,13,.78),rgba(5,8,13,.2)),linear-gradient(0deg,var(--bg) 0%,rgba(8,11,16,.18) 42%,transparent 62%),var(--hero);background-position:58% center}
  .hero-content{padding:105px 16px 65px;max-width:92%}.hero h1,.detail-hero h1{font-size:44px}.hero p{font-size:14px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.meta{font-size:12px}
  .btn{padding:11px 17px;font-size:14px}.content{padding:0 16px 60px;margin-top:-3vh}.rail{margin-bottom:22px}.rail h2{font-size:18px}.rail-controls{display:none}.cards{gap:7px;padding-bottom:23px}.card{flex-basis:61vw;max-width:285px}.card:hover{transform:none}.card-info{position:static;opacity:1;transform:none;padding:8px 2px 2px}.poster::after{display:none}.card h3{font-size:13px}.list-btn{opacity:1;width:31px;height:31px}
  .detail-content{padding:90px 16px 60px;max-width:95%}.detail-hero{background-position:62% center}.inline-search button{display:none}.inline-search input{width:46vw}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 8px}.grid .card{max-width:none}.search-results{padding-left:16px;padding-right:16px}.search-panel{right:16px}
}

.empty-brand img{width:min(520px,88vw);height:auto;margin:0 0 16px;filter:drop-shadow(0 0 28px rgba(22,135,255,.2))}.empty-brand h1{font-size:clamp(34px,4vw,58px)}.no-video-logo{width:min(440px,80vw);height:auto;margin-bottom:22px}.progress{position:absolute;left:6%;right:6%;bottom:7px;height:3px;background:rgba(255,255,255,.28);border-radius:999px;overflow:hidden;z-index:5}.progress i{display:block;height:100%;background:var(--brand);box-shadow:0 0 8px rgba(22,135,255,.8)}