/* ===== GLX TV — STYLE.CSS FINAL ===== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg:    #03050f;
  --bg2:   #07091a;
  --bg3:   #0b0f22;
  --card:  #0d1230;
  --pu:    #7c3aed;
  --pu2:   #9b5aff;
  --pu3:   #c084fc;
  --cy:    #06b6d4;
  --cy2:   #22d3ee;
  --gn:    #22c55e;
  --rd:    #ef4444;
  --gold:  #f59e0b;
  --tx:    #f0f2fa;
  --mu:    #94a3b8;
  --brd:   rgba(255,255,255,0.06);
  --glow:  rgba(124,58,237,0.45);
  --cglow: rgba(6,182,212,0.3);
  --r: 14px;
  --fh: 'Orbitron', sans-serif;
  --fb: 'Inter', sans-serif;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--tx); font-family:var(--fb);
  min-height:100vh; overflow-x:hidden;
}

/* scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(124,58,237,.4); border-radius:3px; }

/* ── TOPBAR ──────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:999;
  height:60px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px;
  background:rgba(3,5,15,0.93);
  backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(124,58,237,0.18);
}
.logo {
  font-family:var(--fh); font-size:20px; font-weight:900;
  letter-spacing:4px; text-decoration:none; text-transform:uppercase;
}
.logo .g { color:var(--pu2); }
.logo .l { color:white; }
.logo .x { color:var(--cy); }
.logo .tv { color:rgba(255,255,255,0.6); font-size:14px; letter-spacing:2px; margin-left:2px; }

nav { display:flex; align-items:center; gap:4px; }
nav a {
  color:var(--mu); text-decoration:none; padding:7px 14px;
  border-radius:8px; font-size:13px; font-weight:600; transition:all .2s;
}
nav a:hover { color:white; background:rgba(255,255,255,0.06); }
.nav-cta {
  background:linear-gradient(135deg,var(--pu),var(--cy)) !important;
  color:white !important; font-weight:700 !important;
  padding:8px 20px !important; border-radius:8px !important;
  letter-spacing:.3px;
}
.nav-cta:hover { opacity:.88; transform:translateY(-1px); box-shadow:0 6px 20px var(--glow); }

/* trial timer */
.trial-chip {
  display:flex; align-items:center; gap:9px;
  background:rgba(124,58,237,0.1);
  border:1px solid rgba(124,58,237,0.22);
  border-radius:99px; padding:5px 14px;
}
.trial-chip .tl { font-size:10px; color:var(--mu); font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.trial-chip .tt { font-family:var(--fh); font-size:17px; font-weight:700; color:var(--pu2); min-width:44px; text-align:center; }
.tbw { width:68px; height:3px; background:rgba(255,255,255,0.07); border-radius:2px; overflow:hidden; }
.tb  { height:100%; width:100%; background:linear-gradient(90deg,var(--pu),var(--cy)); border-radius:2px; transition:width 1s linear; }

/* ── HERO — full viewport player ──────────────────── */
.hero {
  position:relative; width:100%;
  height:calc(100vh - 60px);
  display:flex; flex-direction:column;
  overflow:hidden;
}
/* ambient glow */
.hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 70% at 10% 50%,rgba(124,58,237,0.2) 0%,transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 20%,rgba(6,182,212,0.14) 0%,transparent 60%);
  z-index:1;
}

.hero-player {
  flex:1; position:relative; background:#000;
}
.hero-player iframe {
  width:100%; height:100%; border:none; display:block;
  position:absolute; inset:0;
}

/* floating overlay */
.hero-overlay {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:60px 48px 20px;
  background:linear-gradient(transparent,rgba(3,5,15,0.97));
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
}
.hero-overlay-left {}
.now-tag {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.35);
  color:#fca5a5; padding:4px 12px; border-radius:99px;
  font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  margin-bottom:10px;
}
.now-dot { width:7px; height:7px; border-radius:50%; background:var(--rd); animation:pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(1.5)} }

.now-name {
  font-family:var(--fh); font-size:48px; font-weight:900;
  letter-spacing:3px; text-transform:uppercase; color:white;
  text-shadow:0 0 40px var(--glow), 0 0 80px rgba(6,182,212,0.2);
  line-height:1;
}
.now-cat { color:var(--mu); font-size:14px; font-weight:500; margin-top:6px; }

.hero-overlay-right { flex-shrink:0; }

/* ── HERO BOTTOM STRIP ─────────────────────────────── */
.hero-strip {
  position:relative; z-index:2;
  background:rgba(7,9,26,0.96);
  border-top:1px solid rgba(124,58,237,0.15);
  padding:18px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.perks { display:flex; gap:24px; flex-wrap:wrap; }
.perk  { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--mu); font-weight:500; }
.perk svg { color:var(--cy); flex-shrink:0; }

/* ── BUTTONS ───────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; font-family:var(--fb); font-weight:700;
  text-decoration:none; transition:all .22s; border-radius:10px;
}
.btn-main {
  background:linear-gradient(135deg,var(--pu) 0%,var(--cy) 100%);
  color:white; padding:13px 28px; font-size:14px; letter-spacing:.4px;
}
.btn-main:hover { transform:translateY(-2px); box-shadow:0 12px 30px var(--glow),0 0 20px var(--cglow); }
.btn-ghost {
  background:transparent; color:var(--mu);
  border:1px solid var(--brd); padding:12px 22px; font-size:13px;
}
.btn-ghost:hover { border-color:var(--pu); color:white; }
.btn-full { width:100%; }

/* ── FEATURES STRIP ────────────────────────────────── */
.feat-strip {
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--bg2);
  border-bottom:1px solid var(--brd);
}
.feat-item {
  display:flex; align-items:center; gap:14px;
  padding:22px 24px;
  border-right:1px solid var(--brd);
  transition:background .2s;
}
.feat-item:last-child { border-right:none; }
.feat-item:hover { background:var(--bg3); }
.feat-ic {
  width:42px; height:42px; flex-shrink:0; border-radius:11px;
  background:rgba(124,58,237,0.12);
  display:flex; align-items:center; justify-content:center; color:var(--cy);
}
.feat-tx strong { display:block; font-size:17px; font-weight:800; }
.feat-tx span   { font-size:11px; color:var(--mu); }

/* ── CHANNEL SHOWCASE (index — read only, no click) ── */
.ch-showcase {
  padding:40px 48px 48px;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
}
.sec-hdr { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.sec-hdr h2 { font-family:var(--fh); font-size:20px; font-weight:900; letter-spacing:2px; text-transform:uppercase; }
.sec-hdr h2 .hl { color:var(--pu2); }
.sec-note { color:var(--mu); font-size:12px; margin-bottom:20px; }
.sec-badge { background:rgba(124,58,237,0.12); border:1px solid rgba(124,58,237,0.25); color:var(--pu2); font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px; }

/* showcase grid — pointer-events none on index */
.showcase-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:12px;
  pointer-events:none; /* no selection on demo */
  user-select:none;
}
.showcase-card {
  background:var(--card); border:1px solid var(--brd); border-radius:var(--r);
  overflow:hidden; opacity:.88;
}
.sc-thumb {
  height:110px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.sc-thumb img { max-width:65%; max-height:65%; object-fit:contain; filter:brightness(1.05); }
.sc-fallback  { font-family:var(--fh); font-size:24px; font-weight:900; color:rgba(255,255,255,.5); }
.sc-live { position:absolute; top:6px; left:6px; background:var(--rd); color:white; font-size:9px; font-weight:800; padding:2px 5px; border-radius:3px; letter-spacing:.5px; }
.sc-cat  { position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,.6); color:var(--mu); font-size:9px; padding:2px 6px; border-radius:3px; }
.sc-info { padding:10px 12px; }
.sc-info h3 { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-locked { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--mu); margin-top:4px; }

/* ── PLAN SECTION ──────────────────────────────────── */
.plan-sec {
  padding:70px 48px;
  text-align:center; position:relative;
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
}
.plan-sec::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(124,58,237,0.09) 0%,transparent 70%);
  pointer-events:none;
}
.plan-sec h2 { font-family:var(--fh); font-size:32px; font-weight:900; letter-spacing:3px; text-transform:uppercase; margin-bottom:10px; }
.plan-sec h2 .hl { color:var(--pu2); }
.plan-sec .sub { color:var(--mu); font-size:14px; max-width:480px; margin:0 auto 44px; line-height:1.7; }

.plan-wrap { max-width:500px; margin:0 auto; position:relative; z-index:1; }

.plan-card {
  background:var(--card);
  border:1px solid rgba(124,58,237,0.3);
  border-radius:22px; padding:44px 40px;
  position:relative; overflow:hidden;
}
.plan-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(124,58,237,0.06),rgba(6,182,212,0.04));
  pointer-events:none;
}
.plan-ribbon {
  display:inline-block;
  background:linear-gradient(135deg,var(--pu),var(--cy));
  color:white; font-size:10px; font-weight:700;
  padding:4px 14px; border-radius:99px; letter-spacing:1.2px; text-transform:uppercase;
  margin-bottom:20px;
}
.plan-price-clp { font-family:var(--fh); font-size:56px; font-weight:900; line-height:1; }
.plan-price-clp sup { font-size:22px; vertical-align:top; margin-top:8px; display:inline-block; }
.plan-price-usd { font-size:13px; color:var(--mu); margin-top:8px; margin-bottom:4px; }
.plan-price-usd span { color:var(--cy); font-weight:700; }
.plan-period { font-size:12px; color:var(--mu); margin-bottom:28px; }

.plan-feats { list-style:none; text-align:left; margin-bottom:30px; }
.plan-feats li {
  display:flex; align-items:center; gap:9px;
  padding:7px 0; font-size:13px; color:var(--mu);
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.plan-feats li:last-child { border-bottom:none; }
.plan-feats li svg { color:var(--cy); flex-shrink:0; }

.pay-row { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; opacity:.5; font-size:11px; color:var(--mu); }

/* ── FOOTER ────────────────────────────────────────── */
footer {
  background:rgba(0,0,0,0.45);
  border-top:1px solid var(--brd);
  padding:26px 48px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.f-logo { font-family:var(--fh); font-size:16px; font-weight:900; letter-spacing:4px; }
.f-logo .g { color:var(--pu2); } .f-logo .l { color:white; } .f-logo .x { color:var(--cy); }
.f-links { display:flex; gap:22px; }
.f-links a { color:var(--mu); text-decoration:none; font-size:12px; transition:color .18s; }
.f-links a:hover { color:white; }
footer p { color:var(--mu); font-size:11px; }

/* ── MODAL ─────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.88); backdrop-filter:blur(14px);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
.modal-box {
  background:var(--bg2); border:1px solid rgba(124,58,237,0.28);
  border-radius:22px; padding:50px 42px; max-width:460px; width:92%;
  text-align:center; box-shadow:0 0 80px var(--glow),0 0 40px var(--cglow);
}
.modal-box h2 { font-family:var(--fh); font-size:26px; letter-spacing:2px; margin-bottom:12px; }
.modal-box p  { color:var(--mu); font-size:14px; line-height:1.7; margin-bottom:28px; }

/* ── AUTH ──────────────────────────────────────────── */
.auth-page { min-height:100vh; background:var(--bg); }
.auth-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(ellipse 70% 70% at 50% 0%,rgba(124,58,237,0.13) 0%,transparent 60%);
}
.auth-box {
  width:420px; background:var(--card); border-radius:22px; padding:44px 40px;
  border:1px solid rgba(124,58,237,0.18);
  box-shadow:0 28px 70px rgba(0,0,0,0.6),0 0 40px rgba(124,58,237,0.08);
}
.auth-logo { font-family:var(--fh); font-size:28px; font-weight:900; letter-spacing:4px; margin-bottom:6px; }
.auth-logo .g { color:var(--pu2); } .auth-logo .l { color:white; } .auth-logo .x { color:var(--cy); }
.auth-box h2 { font-size:19px; font-weight:700; margin-bottom:3px; }
.auth-sub { color:var(--mu); font-size:13px; margin-bottom:24px; }
.inp-g { position:relative; margin-bottom:12px; }
.inp-g svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--mu); pointer-events:none; }
.inp-g input {
  width:100%; padding:12px 13px 12px 40px;
  background:rgba(255,255,255,0.04); border:1px solid var(--brd);
  border-radius:10px; color:white; font-size:14px; font-family:var(--fb); transition:border-color .2s;
}
.inp-g input:focus { outline:none; border-color:var(--pu); background:rgba(124,58,237,0.06); }
.inp-g input::placeholder { color:#374151; }
.auth-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; font-size:12px; }
.auth-row label { display:flex; align-items:center; gap:6px; cursor:pointer; color:var(--mu); }
.auth-row input[type=checkbox] { accent-color:var(--pu); }
.auth-row a { color:var(--pu2); text-decoration:none; }
.btn-auth {
  width:100%; padding:13px;
  background:linear-gradient(135deg,var(--pu),var(--cy));
  color:white; border:none; border-radius:10px;
  font-size:14px; font-weight:700; cursor:pointer; font-family:var(--fb);
  transition:all .22s; margin-bottom:14px;
}
.btn-auth:hover { transform:translateY(-1px); box-shadow:0 10px 28px var(--glow); }
.auth-err { text-align:center; font-size:13px; color:var(--rd); min-height:16px; margin-bottom:10px; }
.auth-alt { text-align:center; color:var(--mu); font-size:13px; }
.auth-alt a { color:var(--pu2); text-decoration:none; font-weight:600; }

/* plan selector on register */
.plan-sel { display:grid; grid-template-columns:1fr; gap:0; margin-bottom:18px; }
.plan-opt { border:1.5px solid var(--brd); border-radius:11px; padding:16px; margin-bottom:1px; }
.plan-opt .po-name { font-size:11px; font-weight:700; color:var(--mu); text-transform:uppercase; letter-spacing:1px; }
.plan-opt .po-clp  { font-family:var(--fh); font-size:26px; font-weight:700; }
.plan-opt .po-usd  { font-size:11px; color:var(--mu); margin-top:2px; }

/* ── DASHBOARD ─────────────────────────────────────── */
.dash-layout { display:grid; grid-template-columns:245px 1fr; min-height:100vh; }

.sidebar {
  background:var(--bg2); border-right:1px solid var(--brd);
  padding:20px 0; display:flex; flex-direction:column; gap:1px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sb-logo { font-family:var(--fh); font-size:17px; font-weight:900; letter-spacing:4px; padding:0 20px 20px; border-bottom:1px solid var(--brd); margin-bottom:8px; }
.sb-logo .g { color:var(--pu2); } .sb-logo .l { color:white; } .sb-logo .x { color:var(--cy); }
.sb-sec { padding:12px 20px 5px; font-size:10px; font-weight:700; color:#374151; text-transform:uppercase; letter-spacing:1px; }
.sidebar a {
  display:flex; align-items:center; gap:10px;
  padding:10px 20px; color:var(--mu); text-decoration:none;
  font-size:13px; font-weight:600; transition:all .18s; border-left:3px solid transparent;
}
.sidebar a:hover, .sidebar a.active { color:white; background:rgba(124,58,237,0.1); border-left-color:var(--pu2); }

/* profiles in sidebar */
.prof-wrap { padding:14px 18px; border-top:1px solid var(--brd); margin-top:auto; }
.prof-label { font-size:10px; font-weight:700; color:#374151; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
#profileSwitcher { display:flex; flex-direction:column; gap:4px; }
.profile-chip { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; cursor:pointer; font-size:12px; font-weight:600; color:var(--mu); transition:all .18s; }
.profile-chip:hover { background:rgba(255,255,255,0.05); color:white; }
.profile-chip.active { background:rgba(124,58,237,0.12); color:white; }
.add-chip { border:1px dashed rgba(255,255,255,0.09); }
.add-chip:hover { border-color:var(--pu); }

.dash-main { padding:26px 30px; overflow-y:auto; background:var(--bg); }
.dash-hdr { margin-bottom:20px; }
.dash-hdr h1 { font-family:var(--fh); font-size:20px; font-weight:900; letter-spacing:2px; text-transform:uppercase; }
.dash-hdr p { color:var(--mu); font-size:12px; margin-top:3px; }

/* player + channel list */
.player-layout { display:grid; grid-template-columns:1fr 260px; gap:16px; margin-bottom:20px; }
.player-shell { background:#000; border-radius:var(--r); overflow:hidden; border:1px solid var(--brd); box-shadow:0 0 32px rgba(0,0,0,0.5); }
.player-shell iframe { width:100%; height:370px; border:none; display:block; }
.player-bar { display:flex; align-items:center; gap:9px; padding:11px 14px; background:rgba(7,9,26,0.96); }
.live-sm { background:var(--rd); color:white; font-size:9px; font-weight:800; padding:2px 6px; border-radius:3px; letter-spacing:.5px; }

/* channel list panel */
.ch-panel { background:var(--card); border:1px solid var(--brd); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; max-height:430px; }
.ch-panel-hdr { padding:12px 15px; font-size:12px; font-weight:700; border-bottom:1px solid var(--brd); flex-shrink:0; display:flex; justify-content:space-between; align-items:center; }
.ch-panel-hdr span { color:var(--pu2); font-size:11px; }
.ch-list { overflow-y:auto; flex:1; }
.ch-item { display:flex; align-items:center; gap:9px; padding:8px 12px; cursor:pointer; transition:background .15s; border-left:3px solid transparent; }
.ch-item:hover { background:rgba(255,255,255,0.03); }
.ch-item.active { background:rgba(124,58,237,0.1); border-left-color:var(--pu2); }
.ch-logo { width:36px; height:36px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.ch-logo img { max-width:85%; max-height:85%; object-fit:contain; }
.ch-logo span { font-family:var(--fh); font-size:11px; font-weight:900; color:rgba(255,255,255,0.65); }
.ch-info2 .ch-n { font-size:12px; font-weight:700; }
.ch-info2 .ch-s { font-size:10px; color:var(--mu); display:flex; align-items:center; gap:4px; margin-top:1px; }
.dot { width:5px; height:5px; border-radius:50%; background:var(--gn); display:inline-block; flex-shrink:0; animation:pulse 2s infinite; }
.ch-arr { margin-left:auto; color:var(--pu2); opacity:0; transition:opacity .15s; flex-shrink:0; }
.ch-item:hover .ch-arr, .ch-item.active .ch-arr { opacity:1; }

/* cat bar */
.cat-bar { display:flex; gap:7px; margin-bottom:18px; overflow-x:auto; padding-bottom:3px; flex-wrap:wrap; }
.cat-btn { border:1px solid var(--brd); border-radius:99px; padding:5px 14px; background:transparent; color:var(--mu); font-size:11px; font-weight:600; cursor:pointer; font-family:var(--fb); transition:all .17s; white-space:nowrap; }
.cat-btn:hover { border-color:var(--pu); color:white; }
.cat-btn.active { background:var(--pu); border-color:var(--pu); color:white; }

/* channel grid in dash */
.ch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
.channel-card { background:var(--card); border:1px solid var(--brd); border-radius:var(--r); overflow:hidden; cursor:pointer; transition:all .24s; }
.channel-card:hover { transform:translateY(-5px) scale(1.02); border-color:rgba(124,58,237,0.5); box-shadow:0 16px 32px rgba(0,0,0,0.5),0 0 16px var(--glow); }
.channel-card.active { border-color:var(--pu2); box-shadow:0 0 0 2px rgba(124,58,237,0.25); }
.ch-thumb { position:relative; height:118px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ch-thumb img { max-width:68%; max-height:68%; object-fit:contain; }
.ch-fall { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-size:26px; font-weight:900; color:rgba(255,255,255,0.45); }
.live-pip { position:absolute; top:6px; left:6px; background:var(--rd); color:white; font-size:9px; font-weight:800; padding:2px 5px; border-radius:3px; letter-spacing:.5px; }
.ch-cat-tag { position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,0.65); color:var(--mu); font-size:9px; padding:2px 6px; border-radius:3px; }
.ch-info { padding:10px 12px; }
.ch-info h3 { font-size:13px; font-weight:700; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-live { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--mu); }

/* TV grid */
.tv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:8px; }
.tv-cell { cursor:pointer; text-align:center; border-radius:10px; overflow:hidden; border:1.5px solid transparent; transition:all .18s; }
.tv-cell:hover { transform:scale(1.06); border-color:rgba(124,58,237,0.4); }
.tv-cell.active { border-color:var(--pu2); box-shadow:0 0 0 2px rgba(124,58,237,0.2); }
.tv-inner { height:54px; display:flex; align-items:center; justify-content:center; border-radius:7px; position:relative; overflow:hidden; }
.tv-inner img { max-width:70%; max-height:70%; object-fit:contain; }
.tv-fall { font-family:var(--fh); font-size:13px; font-weight:900; color:rgba(255,255,255,0.6); }
.tv-dot2 { position:absolute; bottom:3px; right:3px; width:5px; height:5px; border-radius:50%; background:var(--gn); animation:pulse 2s infinite; }
.tv-cell p { font-size:10px; color:var(--mu); padding:4px 2px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* VOD */
.vod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:16px; }
.vod-card { background:var(--card); border:1px solid var(--brd); border-radius:var(--r); overflow:hidden; cursor:pointer; transition:all .22s; }
.vod-card:hover { transform:translateY(-4px); border-color:rgba(124,58,237,0.4); box-shadow:0 14px 28px rgba(0,0,0,0.4); }
.vod-th { position:relative; aspect-ratio:16/9; background:var(--bg3); overflow:hidden; }
.vod-th img { width:100%; height:100%; object-fit:cover; transition:transform .28s; }
.vod-card:hover .vod-th img { transform:scale(1.06); }
.vod-ov { position:absolute; inset:0; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .22s; }
.vod-card:hover .vod-ov { opacity:1; }
.vod-pb { width:52px; height:52px; background:linear-gradient(135deg,var(--pu),var(--cy)); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .18s; }
.vod-pb:hover { transform:scale(1.1); }
.vod-dur { position:absolute; bottom:7px; right:7px; background:rgba(0,0,0,0.8); color:white; font-size:10px; font-weight:600; padding:2px 6px; border-radius:4px; }
.vod-cat-tag { position:absolute; top:7px; left:7px; background:var(--pu); color:white; font-size:9px; font-weight:700; padding:2px 7px; border-radius:3px; }
.vod-info { padding:12px 14px; }
.vod-info h3 { font-size:14px; font-weight:700; margin-bottom:4px; }
.vod-info p { color:var(--mu); font-size:12px; line-height:1.5; margin-bottom:7px; }
.vod-meta { font-size:11px; color:var(--pu2); font-weight:600; }

/* Analytics */
.an-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:11px; margin-bottom:16px; }
.an-card { background:var(--card); border:1px solid var(--brd); border-radius:12px; padding:16px; }
.an-card h3 { color:var(--mu); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:7px; }
.an-card span { font-family:var(--fh); font-size:28px; font-weight:700; display:block; }
.an-card small { color:var(--mu); font-size:10px; margin-top:2px; display:block; }
.recs-hdr { font-family:var(--fh); font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; }
.rec-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:9px; }
.rec-card { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--brd); border-radius:10px; padding:10px 12px; cursor:pointer; transition:all .18s; }
.rec-card:hover { border-color:var(--pu); transform:translateX(3px); }
.rec-logo { width:40px; height:40px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.rec-logo img { max-width:85%; max-height:85%; object-fit:contain; }
.rec-logo span { font-family:var(--fh); font-size:12px; font-weight:900; color:rgba(255,255,255,0.65); }
.rec-card h4 { font-size:12px; font-weight:700; margin-bottom:1px; }
.rec-card p  { color:var(--mu); font-size:11px; }

/* ── ADMIN ─────────────────────────────────────────── */
.admin-layout { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
.adm-sidebar { background:#050914; border-right:1px solid var(--brd); padding:20px 0; }
.adm-logo { font-family:var(--fh); font-size:16px; font-weight:900; letter-spacing:4px; padding:0 18px 18px; border-bottom:1px solid var(--brd); margin-bottom:8px; }
.adm-logo .g { color:var(--pu2); } .adm-logo .l { color:white; } .adm-logo .x { color:var(--cy); }
.adm-sidebar a { display:flex; align-items:center; gap:9px; padding:9px 18px; color:var(--mu); text-decoration:none; font-size:12px; font-weight:600; transition:all .17s; border-left:3px solid transparent; }
.adm-sidebar a:hover, .adm-sidebar a.active { color:white; background:rgba(124,58,237,0.1); border-left-color:var(--pu2); }
.adm-main { padding:28px; background:var(--bg); }
.adm-main h2 { font-family:var(--fh); font-size:18px; font-weight:900; letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
.adm-sub { color:var(--mu); font-size:12px; margin-bottom:22px; }
.adm-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:15px; }
.card { background:var(--card); border:1px solid var(--brd); border-radius:13px; padding:20px; }
.card h3 { font-size:15px; font-weight:700; margin-bottom:4px; }
.card p.cd { color:var(--mu); font-size:12px; margin-bottom:14px; }
.upload-zone { border:2px dashed rgba(255,255,255,0.09); border-radius:10px; padding:24px; text-align:center; cursor:pointer; transition:all .18s; margin-bottom:11px; }
.upload-zone:hover { border-color:var(--pu); background:rgba(124,58,237,0.04); }
.upload-zone input[type=file] { display:none; }
.upload-zone svg { color:var(--mu); margin-bottom:6px; }
.upload-zone p { color:var(--mu); font-size:12px; margin:0; }
.f-nm { color:var(--pu2); font-weight:600; margin-top:5px; font-size:12px; }
.btn-adm { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; background:linear-gradient(135deg,var(--pu),var(--cy)); color:white; border:none; border-radius:8px; padding:10px 16px; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--fb); transition:all .18s; }
.btn-adm:hover { transform:translateY(-1px); box-shadow:0 6px 18px var(--glow); }
.amsg { margin-top:8px; font-size:12px; color:var(--mu); min-height:16px; }
.amsg.ok  { color:var(--gn); }
.amsg.err { color:var(--rd); }
.lib { display:flex; flex-direction:column; gap:5px; margin-top:12px; max-height:200px; overflow-y:auto; }
.lib-item { display:flex; align-items:center; gap:8px; padding:6px 8px; background:rgba(255,255,255,0.03); border-radius:6px; font-size:11px; }
.lib-item .li-n { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-item .li-s { color:var(--mu); }
.lib-item .li-d { color:var(--rd); background:none; border:none; cursor:pointer; font-weight:700; font-size:11px; padding:2px 5px; border-radius:4px; }
.lib-item .li-d:hover { background:rgba(239,68,68,0.1); }
.yt-inp { width:100%; padding:10px 12px; background:rgba(255,255,255,0.04); border:1px solid var(--brd); border-radius:9px; color:white; font-size:13px; font-family:var(--fb); margin-bottom:8px; }
.yt-inp:focus { outline:none; border-color:var(--pu); }

/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width:1100px) {
  .topbar    { padding:0 18px; }
  .now-name  { font-size:32px; }
  .hero-overlay { padding:36px 20px 16px; }
  .hero-strip { padding:14px 18px; }
  .feat-strip { grid-template-columns:repeat(2,1fr); }
  .ch-showcase { padding:28px 18px 36px; }
  .plan-sec  { padding:48px 18px; }
  footer     { padding:18px; }
  .dash-layout { grid-template-columns:1fr; }
  .sidebar   { display:none; }
  .player-layout { grid-template-columns:1fr; }
  .admin-layout  { grid-template-columns:1fr; }
  .adm-sidebar   { display:none; }
}
@media (max-width:640px) {
  .topbar { height:52px; }
  nav a:not(.nav-cta) { display:none; }
  .now-name { font-size:22px; }
  .trial-chip .tl { display:none; }
  .feat-strip { grid-template-columns:1fr 1fr; }
  .feat-item { padding:14px; }
  .plan-sec h2 { font-size:24px; }
  .plan-price-clp { font-size:42px; }
  .auth-box { padding:28px 18px; }
  .tv-grid { grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); }
  .rec-grid { grid-template-columns:1fr 1fr; }
}