*{box-sizing:border-box}
html,body{overflow-x:hidden}

body{font-family:system-ui,Arial;margin:0;background:#0b0f1a;color:#e7ecff}
a{color:inherit;text-decoration:none}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#121a2d}
.logo{font-weight:700}
.adm{opacity:.8}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.card{background:#121a2d;border:1px solid #1c2a4a;border-radius:12px;overflow:hidden}
.thumb{height:120px;background:#0f1630;display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.ph{opacity:.6}
.title{padding:10px;font-weight:600}
.player iframe{width:100%;height:70vh;border:0;border-radius:12px;background:#000}
.desc{opacity:.85}
.foot{padding:16px;text-align:center;opacity:.6}
/* --- Home layout --- */
.home{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start}
.sidebar{position:sticky;top:12px;align-self:start;display:grid;gap:12px}
.side-card{background:#121a2d;border:1px solid #1c2a4a;border-radius:14px;padding:12px}
.side-title{font-weight:700;margin-bottom:10px}
.side-nav{display:grid;gap:8px}
.side-nav a{padding:10px 10px;border-radius:12px;background:#0f1630;border:1px solid #1c2a4a;opacity:.95}
.side-nav a:hover{opacity:1}

.ad-slot{background:#0f1630;border:1px dashed #2b3f6a;border-radius:14px;min-height:250px;display:flex;align-items:center;justify-content:center;opacity:.75}
.ad-wide{min-height:120px}

.main{min-width:0}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;background:#121a2d;border:1px solid #1c2a4a;border-radius:16px;overflow:hidden}
.hero-media{min-height:240px;background:#0f1630}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-ph{height:100%;display:flex;align-items:center;justify-content:center;opacity:.6}
.hero-content{padding:14px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#0f1630;border:1px solid #1c2a4a;opacity:.9;font-size:12px}
.btn-play{display:inline-block;margin-top:12px;padding:12px 14px;border-radius:12px;background:#3b82f6;color:#fff;font-weight:700}

/* bento */
.bento{margin-top:14px;display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.bento-box{grid-column:span 4;background:#121a2d;border:1px solid #1c2a4a;border-radius:16px;padding:14px;min-height:90px}
.bento-box.big{grid-column:span 8}
.bento-box.tall{grid-column:span 4;grid-row:span 2;min-height:192px}
.bento-title{font-weight:800;font-size:16px}
.bento-sub{opacity:.75;margin-top:6px}

.section-title{margin:16px 0 10px 0}

.sentinel{height:1px}

/* responsive */
@media (max-width: 920px){
  .home{grid-template-columns:1fr}
  .sidebar{position:relative;top:auto}
  .hero{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(6,1fr)}
  .bento-box{grid-column:span 6}
  .bento-box.big{grid-column:span 6}
  .bento-box.tall{grid-column:span 6;grid-row:auto;min-height:110px}
}
.lb-name{margin-left:8px;opacity:.9}

.lb{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.lb-col{background:#121a2d;border:1px solid #1c2a4a;border-radius:14px;padding:12px}
.lb h3{margin:0 0 8px 0}
.lb ol{margin:0;padding-left:18px;opacity:.95}
.lb small{opacity:.7;margin-left:6px}
@media(max-width:920px){.lb{grid-template-columns:1fr}}
.btn-fav{margin:10px 0;padding:10px 12px;border-radius:12px;border:1px solid #1c2a4a;background:#0f1630;color:#e7ecff;cursor:pointer}
.btn-fav{display:inline-block;margin:10px 0;padding:10px 12px;border-radius:12px;border:1px solid #1c2a4a;background:#0f1630;color:#e7ecff;cursor:pointer}
.err{background:#3a1b1b;border:1px solid #6b2a2a;padding:10px;border-radius:10px;margin:10px 0}
/* ===== AUTH PAGES (premium) ===== */
.auth-wrap{
  min-height: calc(100vh - 110px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 12px;
}
.auth-card{
  width:min(980px, 100%);
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius:22px;
  overflow:hidden;
  border:1px solid #1c2a4a;
  background: linear-gradient(180deg, rgba(18,26,45,.92), rgba(15,22,48,.92));
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  position:relative;
}
.auth-card:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 260px at 20% 10%, rgba(59,130,246,.25), transparent 60%),
              radial-gradient(600px 260px at 80% 30%, rgba(139,92,246,.18), transparent 60%);
  pointer-events:none;
}
.auth-side, .auth-form{ position:relative; z-index:1; }

.auth-side{
  padding:26px 22px;
  border-right:1px solid rgba(28,42,74,.8);
}
.auth-badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(15,22,48,.75);
  border:1px solid rgba(28,42,74,.9);
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:14px;
}
.auth-side h1{ margin:0 0 8px 0; font-size:28px; }
.auth-sub{ margin:0 0 16px 0; opacity:.8; line-height:1.5; }

.auth-perks{ display:grid; gap:12px; margin-top:14px; }
.perk{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px;
  border-radius:16px;
  background: rgba(15,22,48,.60);
  border:1px solid rgba(28,42,74,.85);
}
.perk-ic{
  width:40px;height:40px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(59,130,246,.16);
  border:1px solid rgba(59,130,246,.25);
}
.perk-tt{ font-weight:900; margin-bottom:2px; }
.perk-tx{ opacity:.75; font-size:13px; line-height:1.35; }

.auth-mini{ margin-top:16px; opacity:.85; }
.auth-mini a{ font-weight:900; text-decoration:underline; }

.auth-form{
  padding:26px 22px;
}
.auth-form-head{ margin-bottom:14px; }
.auth-form-title{ font-size:18px; font-weight:900; }
.auth-form-desc{ opacity:.75; margin-top:2px; font-size:13px; }

.form-grid{ display:grid; gap:12px; }
.field label{ display:block; font-weight:800; margin-bottom:6px; opacity:.9; }
.in{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(28,42,74,.9);
  background: rgba(10,14,28,.55);
  color:#e7ecff;
  outline:none;
}
.in:focus{
  border-color: rgba(59,130,246,.75);
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}
.hint{ margin-top:6px; font-size:12px; opacity:.65; }

.check{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(15,22,48,.55);
  border:1px solid rgba(28,42,74,.7);
}
.check input{ transform: scale(1.05); }

.btn-primary{
  width:100%;
  border:none;
  padding:12px 14px;
  border-radius:14px;
  background: linear-gradient(90deg, rgba(59,130,246,1), rgba(139,92,246,1));
  color:#fff;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-ic{ opacity:.95; font-weight:900; }

.auth-foot{ opacity:.7; font-size:12px; text-align:center; }

.auth-alt{ display:flex; gap:10px; margin-top:12px; }
.btn-ghost{
  flex:1;
  text-align:center;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(15,22,48,.55);
  border:1px solid rgba(28,42,74,.85);
  opacity:.92;
}
.btn-ghost:hover{ opacity:1; }

.auth-alert{
  background: rgba(176,0,32,.16);
  border:1px solid rgba(176,0,32,.35);
  padding:10px 12px;
  border-radius:14px;
  margin-bottom:10px;
}

/* responsive */
@media (max-width: 920px){
  .auth-card{ grid-template-columns: 1fr; }
  .auth-side{ border-right:none; border-bottom:1px solid rgba(28,42,74,.8); }
}
/* profile */
.profile-head{display:flex;gap:14px;align-items:center}
.p-av{width:78px;height:78px;border-radius:22px;overflow:hidden;background:rgba(10,14,28,.55);border:1px solid rgba(28,42,74,.9)}
.p-av img{width:100%;height:100%;object-fit:cover;display:block}
.p-av-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;opacity:.8}
.p-name{font-weight:900;font-size:18px}
.p-user{opacity:.7;margin-top:2px}
.p-links{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
/* favorites */
.fav-wrap{max-width:1100px;margin:0 auto;padding:10px 0}
.fav-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fav-head h1{margin:0}
.fav-head p{margin:6px 0 0 0;opacity:.75}
.fav-actions{display:flex;gap:10px}

.fav-empty{
  margin-top:14px;
  padding:18px;
  border-radius:18px;
  background:rgba(15,22,48,.55);
  border:1px solid rgba(28,42,74,.85);
  display:grid;
  gap:10px;
  justify-items:start;
}
.fav-emo{font-size:34px}
.fav-tt{font-weight:900;font-size:18px}
.fav-tx{opacity:.75}
.miniav{width:26px;height:26px;border-radius:10px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:rgba(10,14,28,.55);border:1px solid rgba(28,42,74,.9)}
.miniav img{width:100%;height:100%;object-fit:cover;display:block}
.miniav-ph{font-size:14px;opacity:.85}
.badge{
  position:absolute;
  top:-6px; right:-8px;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  background: linear-gradient(90deg, rgba(59,130,246,1), rgba(139,92,246,1));
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
.btn-fav.is-on{
  border-color: rgba(59,130,246,.75);
  box-shadow: 0 0 0 4px rgba(59,130,246,.10);
}

.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%) translateY(20px);
  opacity:0;
  pointer-events:none;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(15,22,48,.92);
  border:1px solid rgba(28,42,74,.9);
  color:#e7ecff;
  font-weight:800;
  transition: all .18s ease;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
/* ===== HOME PREMIUM ===== */
.home2{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
.side2{position:sticky;top:12px;align-self:start;display:grid;gap:12px}
.sidebox{background:rgba(18,26,45,.92);border:1px solid rgba(28,42,74,.95);border-radius:18px;padding:14px}
.sidebox.soft{background:rgba(15,22,48,.55)}
.sidehdr{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.side-tt{font-weight:900}
.side-sub{opacity:.7;font-size:12px}

.sidenav{display:grid;gap:8px;margin-top:12px}
.sidenav a{padding:10px 10px;border-radius:14px;background:rgba(15,22,48,.55);border:1px solid rgba(28,42,74,.85);opacity:.92}
.sidenav a:hover{opacity:1}
.sidenav a.on{border-color:rgba(59,130,246,.8);box-shadow:0 0 0 4px rgba(59,130,246,.10);opacity:1}
.side-sep{height:1px;background:rgba(28,42,74,.8);margin:8px 0}

.adslot{background:rgba(15,22,48,.55);border:1px dashed rgba(43,63,106,.9);border-radius:18px;min-height:250px;display:flex;align-items:center;justify-content:center;opacity:.8}
.adslot.wide{min-height:120px}

.side-mini-tt{font-weight:900}
.side-mini-tx{opacity:.75;margin-top:6px;line-height:1.45}

.main2{min-width:0}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.searchbox{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(10,14,28,.55);border:1px solid rgba(28,42,74,.9)}
.sicon{opacity:.75}
.searchbox input{width:100%;border:0;outline:0;background:transparent;color:#e7ecff}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{padding:10px 12px;border-radius:999px;background:rgba(15,22,48,.55);border:1px solid rgba(28,42,74,.85);opacity:.92}
.pill.on{border-color:rgba(59,130,246,.8);box-shadow:0 0 0 4px rgba(59,130,246,.10);opacity:1}

/* hero */
.hero2{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;border-radius:22px;overflow:hidden;border:1px solid rgba(28,42,74,.95);background:linear-gradient(180deg, rgba(18,26,45,.92), rgba(15,22,48,.92));position:relative}
.hero2-media{min-height:260px;position:relative;background:rgba(10,14,28,.55)}
.hero2-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05)}
.hero2-ph{height:100%;display:flex;align-items:center;justify-content:center;opacity:.7}
.hero2-glow{position:absolute;inset:0;background:radial-gradient(600px 260px at 20% 10%, rgba(59,130,246,.25), transparent 60%), radial-gradient(600px 260px at 80% 50%, rgba(139,92,246,.20), transparent 60%);pointer-events:none}
.hero2-content{padding:16px;position:relative}
.hero2-badge{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(15,22,48,.65);border:1px solid rgba(28,42,74,.9);font-weight:900;font-size:12px;opacity:.95}
.hero2-content h1{margin:10px 0 8px 0;font-size:26px}
.hero2-content p{margin:0;opacity:.8;line-height:1.5}
.hero2-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btnp{padding:12px 14px;border-radius:14px;background:linear-gradient(90deg, rgba(59,130,246,1), rgba(139,92,246,1));color:#fff;font-weight:900}
.btnp span{opacity:.95;margin-left:6px}
.btng{padding:12px 14px;border-radius:14px;background:rgba(15,22,48,.55);border:1px solid rgba(28,42,74,.85);font-weight:900;opacity:.95}
.hero2-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.mitem{padding:8px 10px;border-radius:14px;background:rgba(15,22,48,.55);border:1px solid rgba(28,42,74,.85);opacity:.9;font-size:12px}

/* bento */
.bento2{margin-top:14px;display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.bx{grid-column:span 4;background:rgba(18,26,45,.92);border:1px solid rgba(28,42,74,.95);border-radius:20px;padding:14px;min-height:98px;position:relative;overflow:hidden}
.bx:before{content:"";position:absolute;inset:-2px;background:radial-gradient(520px 220px at 20% 10%, rgba(59,130,246,.18), transparent 60%), radial-gradient(520px 220px at 80% 80%, rgba(139,92,246,.14), transparent 60%);pointer-events:none}
.bx.big{grid-column:span 8}
.bx.tall{grid-column:span 4;grid-row:span 2;min-height:208px}
.bx-tt{font-weight:900;position:relative}
.bx-tx{opacity:.75;margin-top:6px;position:relative}

/* section header */
.sec-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:16px 0 10px}
.sec-hdr h2{margin:0}
.sec-sub{opacity:.7}

/* grid premium */
.grid2{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.card2{display:block;border-radius:18px;overflow:hidden;background:rgba(18,26,45,.92);border:1px solid rgba(28,42,74,.95);transition:transform .12s ease, opacity .12s ease}
.card2:hover{transform:translateY(-2px)}
.c2thumb{aspect-ratio: 16/10; background:rgba(10,14,28,.55)}
.c2thumb img{width:100%;height:100%;object-fit:cover;display:block}
.c2ph{height:100%;display:flex;align-items:center;justify-content:center;opacity:.65}
.c2title{padding:10px 10px;font-weight:900;opacity:.95}
.sentinel{height:1px}

/* responsive */
@media (max-width: 1100px){
  .grid2{grid-template-columns:repeat(4,1fr)}
}
@media (max-width: 920px){
  .home2{grid-template-columns:1fr}
  .side2{position:relative;top:auto}
  .hero2{grid-template-columns:1fr}
  .bento2{grid-template-columns:repeat(6,1fr)}
  .bx,.bx.big{grid-column:span 6}
  .bx.tall{grid-column:span 6;grid-row:auto;min-height:110px}
  .grid2{grid-template-columns:repeat(2,1fr)}
}
/* search bento + chips */
.bento3{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:12px}
.bx3{grid-column:span 4;background:rgba(18,26,45,.92);border:1px solid rgba(28,42,74,.95);border-radius:20px;padding:14px;position:relative;overflow:hidden}
.bx3.big{grid-column:span 8}
.bx3:before{content:"";position:absolute;inset:-2px;background:radial-gradient(520px 220px at 20% 10%, rgba(59,130,246,.18), transparent 60%), radial-gradient(520px 220px at 80% 80%, rgba(139,92,246,.14), transparent 60%);pointer-events:none}
.bx3-tt{font-weight:900;position:relative}
.bx3-tx{opacity:.75;margin-top:6px;position:relative;line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;position:relative}
.chip{padding:9px 12px;border-radius:999px;background:rgba(15,22,48,.55);border:1px solid rgba(28,42,74,.85);opacity:.92;font-weight:800;font-size:13px}
.chip:hover{opacity:1}
@media (max-width:920px){
  .bento3{grid-template-columns:repeat(6,1fr)}
  .bx3,.bx3.big{grid-column:span 6}
}
.ratebox{
  margin:12px 0;
  padding:12px;
  border-radius:16px;
  background:rgba(15,22,48,.55);
  border:1px solid rgba(28,42,74,.85);
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.rate-title{font-weight:900}
.stars{display:flex;gap:6px}
.star{
  border:1px solid rgba(28,42,74,.85);
  background:rgba(10,14,28,.55);
  color:rgba(231,236,255,.55);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.star:hover{color:#e7ecff;opacity:1}
.star.on{
  color:#fff;
  border-color:rgba(59,130,246,.75);
  box-shadow:0 0 0 4px rgba(59,130,246,.10);
}
.rate-meta{opacity:.85;font-weight:800}