/* SAMiVision TV app — brand-matched to samivisiontv.netlify.app */
:root{
  --pink:#ff2b87; --pink-deep:#e7006a; --pink-soft:#ff8dbc;
  --acid:#d8ff45;
  --bg:#171016; --bg2:#120c11; --surface:#231724; --surface2:#2e1e2e;
  --cream:#fff8fb; --muted:#c9b3c0;
  --radius:18px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; background:#000; color:var(--cream);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
#app{max-width:480px; margin:0 auto; background:var(--bg); min-height:100dvh;
  position:relative; padding-bottom:84px;}
h1,h2,h3,.display{font-family:"Bebas Neue",Impact,sans-serif; text-transform:uppercase;
  letter-spacing:.05em; font-weight:400;}
a{color:inherit;}

/* top bar */
.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 10px; background:linear-gradient(180deg,rgba(23,16,22,.97),rgba(23,16,22,.78));
  backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,43,135,.25);}
.brand{font-family:"Bebas Neue",Impact,sans-serif; font-size:24px; letter-spacing:.08em; color:var(--cream);}
.brand b{color:var(--pink); font-weight:400;}
.brand .tv{color:var(--acid); font-size:16px; vertical-align:2px;}
.premium-pill{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#171016; background:var(--acid);
  padding:8px 16px; border-radius:999px; border:none; cursor:pointer;
  box-shadow:0 4px 18px rgba(216,255,69,.35);}

/* views */
.view{display:none; animation:fadein .25s ease;}
.view.active{display:block;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* hero */
.hero{position:relative; height:320px; overflow:hidden;}
.hero img{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(23,16,22,.1) 0%,rgba(23,16,22,.55) 55%,var(--bg) 100%);}
.hero-copy{position:absolute; left:18px; right:18px; bottom:16px; z-index:2;}
.hero-kicker{font-size:12px; font-weight:800; letter-spacing:.3em; text-transform:uppercase; color:var(--acid); margin-bottom:8px;}
.hero-title{font-size:clamp(46px,14vw,68px); margin:0 0 6px; line-height:.95; color:var(--cream);}
.hero-title em{font-style:normal; color:var(--pink);}
.hero-sub{color:var(--muted); font-size:14px; margin:0 0 12px;}
.btn{display:inline-block; border:none; cursor:pointer; font-weight:800; font-size:14px;
  padding:12px 24px; border-radius:999px; letter-spacing:.05em; text-transform:uppercase;}
.btn-pink{background:linear-gradient(135deg,var(--pink-deep),var(--pink)); color:#fff;
  box-shadow:0 6px 22px rgba(255,43,135,.45);}
.btn-ghost{background:rgba(255,255,255,.08); color:var(--cream); border:1.5px solid rgba(255,255,255,.25);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap;}

/* rows + cards */
.section{padding:20px 18px 4px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px;}
.section-head h2{font-size:26px; margin:0; color:var(--cream);}
.section-head h2 .hl{color:var(--pink);}
.section-head .link{font-size:13px; color:var(--acid); background:none; border:none; cursor:pointer; font-weight:800; font:inherit;}
.hscroll{display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory;}
.hscroll::-webkit-scrollbar{display:none;}
.card{scroll-snap-align:start; flex:0 0 152px; background:var(--surface); border-radius:var(--radius);
  overflow:hidden; border:1px solid rgba(255,43,135,.3); cursor:pointer;}
.card img{width:152px; height:202px; object-fit:cover; display:block;}
.card .meta{padding:10px 11px 12px;}
.card .t{font-family:"Bebas Neue",Impact,sans-serif; font-size:19px; letter-spacing:.04em; margin:0 0 2px; line-height:1.1;}
.card .s{font-size:11.5px; color:var(--muted); margin:0; line-height:1.4;}
.card .counts{font-size:11px; font-weight:800; margin-top:6px; letter-spacing:.04em;}
.card .counts .f{color:var(--acid);} .card .counts .p{color:var(--pink-soft);}
.cont-card{flex:0 0 220px;}
.cont-card img{width:220px; height:124px;}
.progress{height:4px; background:rgba(255,255,255,.14); border-radius:2px; margin-top:8px; overflow:hidden;}
.progress i{display:block; height:100%; background:var(--acid); border-radius:2px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.show-card{background:var(--surface); border-radius:var(--radius); overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,43,135,.3);}
.show-card img{width:100%; height:200px; object-fit:cover; display:block;}
.show-card .meta{padding:12px 13px 14px;}
.show-card .genre{font-size:10.5px; font-weight:800; letter-spacing:.2em; color:var(--acid); text-transform:uppercase; margin:0 0 5px;}
.show-card .t{font-family:"Bebas Neue",Impact,sans-serif; font-size:24px; letter-spacing:.04em; margin:0 0 3px; line-height:1;}
.show-card .s{font-size:12.5px; color:var(--muted); margin:0 0 6px; line-height:1.4;}
.show-card .counts{font-size:11.5px; font-weight:800; letter-spacing:.04em;}
.show-card .counts .f{color:var(--acid);} .show-card .counts .p{color:var(--pink-soft);}

/* show detail */
.detail-cover{position:relative; height:250px; overflow:hidden;}
.detail-cover img{width:100%; height:100%; object-fit:cover;}
.detail-cover::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(23,16,22,.1),rgba(23,16,22,.65) 60%,var(--bg));}
.backbtn{position:absolute; top:14px; left:14px; z-index:3; width:38px; height:38px; border-radius:50%;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:18px; cursor:pointer;}
.detail-body{padding:0 18px;}
.detail-genre{font-size:11px; font-weight:800; letter-spacing:.24em; color:var(--acid); text-transform:uppercase;}
.detail-title{font-size:44px; margin:6px 0; line-height:.95;}
.detail-tag{color:var(--muted); font-size:14.5px; line-height:1.55; margin:0 0 18px;}
.ep{display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:11px 13px; margin-bottom:10px; cursor:pointer; width:100%;
  text-align:left; color:inherit; font:inherit;}
.ep.is-locked{border:1.5px dashed rgba(255,43,135,.6); background:#241623;}
.ep .thumb{position:relative; flex:0 0 92px; height:60px; border-radius:10px; overflow:hidden; background:#000;}
.ep .thumb img{width:100%; height:100%; object-fit:cover;}
.ep.is-locked .thumb img{filter:grayscale(.4) brightness(.6);}
.ep .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); font-size:18px; color:#fff;}
.ep .play svg{width:18px; height:18px; stroke:#fff;}
.ep .info{flex:1; min-width:0;}
.ep .num{font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--acid); text-transform:uppercase;}
.ep .et{font-size:15px; font-weight:700; margin:2px 0;}
.ep .ed{font-size:12.5px; color:var(--muted); margin:0;}
.prempill{flex:0 0 auto; display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,var(--pink-deep),var(--pink));
  padding:8px 12px; border-radius:999px; white-space:nowrap; box-shadow:0 4px 14px rgba(255,43,135,.4);}
.prempill svg{width:13px; height:13px; stroke:#fff;}
.freepill{flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#171016; background:var(--acid); padding:8px 12px; border-radius:999px; white-space:nowrap;}
.extnote{font-size:12.5px; color:var(--muted); padding:2px 2px 0;}

/* watch */
.watch-wrap{padding:14px 14px 0;}
.player{position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(255,43,135,.35);}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.watch-title{font-size:30px; margin:14px 4px 4px;}
.watch-sub{color:var(--muted); font-size:13.5px; margin:0 4px 16px;}

/* premium */
.prem-hero{text-align:center; padding:32px 26px 8px;}
.prem-hero .crown{width:70px; height:70px; margin:0 auto 14px; border-radius:50%;
  background:var(--acid); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 28px rgba(216,255,69,.4);}
.prem-hero .crown svg{width:32px; height:32px; stroke:#171016;}
.prem-hero h2{font-size:44px; margin:0 0 8px; color:var(--pink); line-height:.95;}
.prem-hero p{color:var(--muted); font-size:14px; line-height:1.6; margin:0;}
.plan{border:1.5px solid var(--pink); background:linear-gradient(180deg,#2a1622,#1c1019);
  border-radius:var(--radius); padding:16px; margin:16px 18px 0; cursor:pointer; position:relative;}
.plan .tag{position:absolute; top:-11px; right:14px; font-size:10.5px; font-weight:800; letter-spacing:.1em;
  background:var(--acid); color:#171016; padding:4px 10px; border-radius:999px; text-transform:uppercase;}
.plan .pt{font-family:"Bebas Neue",Impact,sans-serif; font-size:24px; letter-spacing:.05em; margin:0;}
.plan .pp{font-size:13px; color:var(--muted); margin:4px 0 0;}
.plan .pp b{color:var(--acid); font-size:17px;}
.coins-h{padding:22px 18px 0;}
.coins-h h3{font-size:22px; margin:0 0 4px;}
.coins-h p{font-size:12.5px; color:var(--muted); margin:0;}
.coin-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 18px;}
.coin{background:var(--surface); border:1px solid rgba(216,255,69,.35); border-radius:var(--radius);
  padding:15px 10px; text-align:center; cursor:pointer; color:inherit; font:inherit;}
.coin .c{font-family:"Bebas Neue",Impact,sans-serif; font-size:28px; color:var(--acid); letter-spacing:.04em;}
.coin .p{font-size:13px; color:var(--muted); margin-top:3px;}
.fineprint{font-size:11.5px; color:var(--muted); text-align:center; padding:16px 30px; line-height:1.6;}

/* profile */
.prof-head{display:flex; gap:14px; align-items:center; padding:22px 18px 6px;}
.avatar{width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--pink-deep),var(--pink));
  display:flex; align-items:center; justify-content:center;
  font-family:"Bebas Neue",Impact,sans-serif; font-size:26px; color:#fff;}
.prof-head h2{font-size:26px; margin:0 0 3px;}
.prof-head p{font-size:13px; color:var(--muted); margin:0;}
.setrow{display:flex; align-items:center; justify-content:space-between; background:var(--surface);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:14px 15px; margin:10px 18px 0;}
.setrow .lab{font-size:14.5px; font-weight:700;}
.setrow .sub{font-size:12px; color:var(--muted); margin-top:2px;}
.switch{position:relative; width:50px; height:29px; flex:0 0 auto; cursor:pointer;}
.switch input{opacity:0; width:0; height:0;}
.slider{position:absolute; inset:0; background:#3a2a38; border-radius:999px; transition:.2s;}
.slider:before{content:""; position:absolute; width:23px; height:23px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;}
.switch input:checked + .slider{background:var(--pink);}
.switch input:checked + .slider:before{transform:translateX(21px);}
.socials{display:flex; gap:10px; padding:14px 18px;}
.socials a{flex:1; text-align:center; font-size:13px; font-weight:800; text-decoration:none;
  background:var(--surface); border:1px solid rgba(255,43,135,.35); padding:12px 0; border-radius:12px;}

/* tab bar */
.tabbar{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px;
  display:flex; background:rgba(20,12,19,.97); border-top:1px solid rgba(255,43,135,.3);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom)); z-index:30; backdrop-filter:blur(10px);}
.tab{flex:1; background:none; border:none; color:var(--muted); font-size:10.5px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; letter-spacing:.06em;
  text-transform:uppercase; font:inherit;}
.tab svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8;}
.tab.active{color:var(--pink);}
.tab.active svg{stroke:var(--pink);}

/* toast */
#toast{position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px); max-width:420px; width:calc(100% - 48px);
  background:#2a1622; color:var(--cream); border:1px solid var(--pink); border-radius:12px;
  padding:13px 16px; font-size:13.5px; text-align:center; opacity:0; pointer-events:none; transition:.25s; z-index:50;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* shared account */
.acctbox{background:var(--surface);border-radius:14px;padding:14px;margin:0 18px;}
.infield{width:100%;padding:11px 12px;margin:0 0 8px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.3);color:#fff;font:inherit;box-sizing:border-box;}
.infield::placeholder{color:var(--muted);}
.svt-terms-check{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;color:var(--muted);margin:2px 0 10px;line-height:1.5;text-align:left}
.svt-terms-check input{margin-top:4px;accent-color:#e7006a;flex:none}
.svt-terms-check a{color:#ff2b87}
.btnrow{display:flex;gap:10px;}
.svtbtn{border:1px solid var(--pink);background:transparent;color:#fff;font:inherit;font-weight:800;font-size:13px;padding:10px 18px;border-radius:999px;cursor:pointer;}
.svtbtn:hover{background:var(--pink);}
.svt-err{color:#ff7aa8;font-size:12px;min-height:16px;margin:2px 0 6px;}

/* subscriptions detail */
.pdet{font-size:12px;color:var(--muted);margin:6px 0 0;}
.coin .e{font-size:11px;color:var(--muted);margin-top:2px;}
.termsbox{margin:14px 18px 6px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);font-size:12px;line-height:1.6;color:var(--muted);}
.termsbox b{color:#ff7aa8;}

/* ---------- account ---------- */
.svt-tabs{display:flex;gap:8px;margin:0 0 12px}
.svt-tab{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.svt-tab.active{background:var(--pink);border-color:var(--pink)}
.svt-prof-top{display:flex;gap:12px;align-items:center;margin-bottom:4px}
.svt-ava{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#2a1b2e;flex:none}
.svt-ava-fallback{width:64px;height:64px;border-radius:50%;background:#3a2440;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;flex:none}
.svt-linkbtn{background:none;border:0;color:#c084fc;font-size:13px;cursor:pointer;padding:4px 0;text-decoration:underline}
.fld-lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
.svt-err{color:#ff8dbc;font-size:13px;min-height:18px;margin-top:6px}
.svt-ok{color:#a3e635;font-size:13px;min-height:18px;margin:6px 0}
.svt-terms-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);margin:4px 0 8px;cursor:pointer}
.svt-terms-check a{color:#c084fc}
.btnrow{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}
.svtbtn.primary{background:var(--pink);border-color:var(--pink)}