/* TvPremiumPro — Dark UI (responsive + animations, mixed layout) */
/* RED ACCENT THEME (keep original hero colors) */
:root{
  /* base stays dark */
  --bg:#0B1020;
  --surface:#0F152A;
  --surface-2:#121a33;
  --border:#262A36;          /* neutral slate */

  /* text */
  --text:#EDEFF7;
  --muted:#A9B1C7;

  /* states */
  --ok:#10B981;
  --err:#F43F5E;

  /* PRIMARY ACCENT — red like the screenshot */
  --grad-from:#FF3B30;       /* start */
  --grad-to:#FF1F1F;         /* end */

  /* tokens used elsewhere */
  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --shadow-1:0 10px 30px rgba(0,0,0,.35);
  --shadow-2:0 6px 20px rgba(0,0,0,.28);
  --fz-h1:clamp(28px, 4vw, 44px);
  --fz-h2:clamp(22px, 3vw, 32px);
  --fz-lead:clamp(14px, 1.6vw, 18px);
  --gap:clamp(14px, 2vw, 24px);
  --dur:420ms;
  --eas:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto}
.container{width:min(1120px,92vw);margin-inline:auto}

/* NAV */
.nav{
  position:sticky;top:0;z-index:10;
  background:rgba(11,16,32,.7);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--border)
}
.nav__row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo__mark{
  display:block;
  width:40px; height:40px;
  border-radius:var(--r-sm);
  background:none;
}
.logo__name{font-weight:700;letter-spacing:.2px}
.nav__links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav__links a{color:var(--text);text-decoration:none;opacity:.9;transition:opacity var(--dur) var(--eas), transform var(--dur) var(--eas)}
.nav__links a:hover{opacity:1;transform:translateY(-1px)}

/* Mobile menu */
.nav__toggle{
  display:none;width:42px;height:38px;border-radius:12px;
  border:1px solid var(--border);background:transparent;color:var(--text);
  align-items:center;justify-content:center;gap:4px;cursor:pointer;
  transition:background .25s ease,border-color .25s ease
}
.nav__toggle span{
  display:block;width:20px;height:2px;background:#FFD7D7;border-radius:2px;
  transition:transform .25s ease,opacity .25s ease
}
.nav__toggle:hover{background:#121a33;border-color:#3A2A2A}
@media (max-width: 860px){ .nav__toggle{display:inline-flex} .nav__links{display:none} }
.nav__sheet{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s ease}
.nav__drawer{
  position:absolute;top:0;right:0;height:100%;width:min(84vw,380px);
  background:var(--surface-2);border-left:1px solid var(--border);
  transform:translateX(100%);transition:transform .28s var(--eas),box-shadow .28s;
  box-shadow:-10px 0 30px rgba(0,0,0,.35);display:flex;flex-direction:column;padding:14px;border-bottom-left-radius:18px
}
.nav__drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 4px 10px}
.nav__close{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:transparent;color:#e6eaf6;cursor:pointer}
.nav__close:hover{background:#121a33}
.nav__drawer-links{display:grid;gap:10px;margin-top:8px}
.nav__drawer-links a{
  display:block;padding:12px;border-radius:12px;text-decoration:none;color:#e6eaf6;
  border:1px solid var(--border);background:linear-gradient(180deg,#10162b,rgba(16,22,43,.55))
}
.nav__drawer-links a:hover{filter:brightness(1.05)}
.nav__drawer-links .btn--solid{display:inline-flex;justify-content:center;border:none;margin-top:6px}
body.menu-open .nav__sheet{opacity:1;pointer-events:auto}
body.menu-open .nav__drawer{transform:none}
body.menu-open .nav__toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .nav__toggle span:nth-child(2){opacity:0}
body.menu-open .nav__toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:var(--r-md);text-decoration:none;font-weight:600;line-height:1;
  transition:transform var(--dur) var(--eas),box-shadow var(--dur) var(--eas),filter var(--dur) var(--eas)
}
.btn--solid{
  background:linear-gradient(135deg,var(--grad-from),var(--grad-to));color:#fff;
  box-shadow:0 6px 14px rgba(255,31,31,.14), 0 4px 10px rgba(255,59,48,.16)
}
.btn--solid:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--border);color:var(--text);background:transparent}
.btn--ghost:hover{background:#121a33}

/* Hero (original colors kept) */
.hero{
  padding:72px 0;
  background:
    radial-gradient(1000px 600px at 10% -10%,rgba(108,56,255,.25),transparent),
    radial-gradient(800px 500px at 90% -20%,rgba(0,209,255,.18),transparent)
}
.hero__grid{display:grid;gap:28px;align-items:center;grid-template-columns:1.1fr .9fr}
.hero h1{font-size:var(--fz-h1);margin:.1em 0 .4em}
.lead{color:var(--muted);max-width:60ch;font-size:var(--fz-lead)}
.grad{background:linear-gradient(135deg,var(--grad-from),var(--grad-to));-webkit-background-clip:text;background-clip:text;color:transparent}
.chips{display:flex;gap:8px;margin-top:14px;padding:0;list-style:none;flex-wrap:wrap}
.chips li{
  font-size:12px;border:1px solid var(--border);color:#FFE4E4;
  padding:6px 10px;border-radius:999px;background:rgba(255,59,48,.08)
}
@media (max-width:980px){ .hero{padding:54px 0} .hero__grid{grid-template-columns:1fr} }

/* Trial Status animation */
.card{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-1);transform:translateY(0);transition:transform var(--dur) var(--eas),box-shadow var(--dur) var(--eas)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.mockup__title{font-weight:700;margin-bottom:8px;font-size:16px}
.mockup__body{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.status-dot{width:10px;height:10px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 6px rgba(16,185,129,.12);position:relative}
.status-dot::after{content:"";position:absolute;inset:-8px;border:2px solid rgba(16,185,129,.35);border-radius:999px;animation:pulse-ring 2.2s ease-out infinite}
@keyframes pulse-ring{0%{transform:scale(.35);opacity:1}80%{transform:scale(1.2);opacity:0}100%{opacity:0}}
.mockup--status{position:relative;overflow:hidden}
.mockup--status::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.08) 22%,transparent 45%);transform:translateX(-120%);animation:shimmer 2.8s infinite}
@keyframes shimmer{to{transform:translateX(120%)}}

/* Sections */
.section{padding:64px 0}
.section.alt{background:#0d1430}
.muted{color:var(--muted)} .tiny{font-size:12px}

/* Activate form */
.form{display:grid;gap:10px;max-width:560px}
.form label{font-size:13px;color:#f3c7c7;opacity:.9}
.form input[type=text]{
  background:#0b1330;border:1px solid #31384e;color:#e8eeff;border-radius:12px;padding:12px;outline:none;
  transition:border-color var(--dur) var(--eas),box-shadow var(--dur) var(--eas)
}
.form input[type=text]::placeholder{color:#9aa3c9}
.form input[type=text]:focus{border-color:#FF3B30;box-shadow:0 0 0 4px rgba(255,59,48,.18)}
.form button{margin-top:6px}
.hp{display:none!important}

/* Alerts */
.alert{padding:12px 14px;border-radius:14px;margin:12px 0;border:1px solid transparent}
.alert--ok{background:#072217;color:#9ff3c9;border-color:#0e3b2b}
.alert--error{background:#320c13;color:#fecdd3;border-color:#5b101d}

/* Download tiles */
.stores{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:18px}
.store{
  display:grid;place-items:center;height:72px;border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#10162b,rgba(16,22,43,.55));
  color:#e6eaf6;text-decoration:none;transition:transform var(--dur) var(--eas),filter var(--dur) var(--eas)
}
.store:hover{transform:translateY(-2px);filter:brightness(1.05)}
@media (max-width:980px){ .stores{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .stores{grid-template-columns:repeat(2,1fr)} }

/* Video tiles */
.videos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.video{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:#e6eaf6}
.video__thumb{height:120px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg,#10162b,#0d1430)}
.video span{font-size:14px;color:#f0d9d9}
@media (max-width:980px){ .videos{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .videos{grid-template-columns:1fr} }

/* Features (small cards row) */
.features{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.feat{
  padding:18px;border:1px solid var(--border);border-radius:16px;
  background:linear-gradient(180deg,#10162b,rgba(16,22,43,.6));
  position:relative;overflow:hidden
}
.feat__icon{font-size:22px;margin-bottom:8px}
.feat::after{content:"";position:absolute;inset:-30% -10% auto -10%;height:60%;background:radial-gradient(600px 180px at 50% 0,rgba(255,255,255,.08),transparent);pointer-events:none}
@media (max-width:980px){ .features{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .features{grid-template-columns:1fr} }

/* How (dotted circles) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.step-dot{text-align:center;padding:10px}
.dot{
  width:84px;height:84px;margin-inline:auto;margin-bottom:10px;border-radius:999px;
  display:grid;place-items:center;font-size:28px;
  border:2px dashed #FF3B30; color:#FFC5C1; background:#10162b;
}
.step-dot h4{margin:.3em 0 .2em}
.step-dot p{margin:0;color:#f0d9d9;font-size:13px}
@media (max-width:980px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* Platforms */
.platforms{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.platform-pill{border:1px solid var(--border);background:#10162b;color:#ffe4e4;border-radius:999px;padding:8px 12px;font-size:12px}

/* ===== Alternating splits (big feature rows) ===== */
.split{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:center;
  margin:26px 0;
}
.split--rev{ grid-template-columns:.9fr 1.1fr }
.split--rev .split__img{ order:2 }
.split--rev .split__text{ order:1 }

.split__img{
  display:flex;                 /* center content */
  align-items:center;
  justify-content:center;
  height:220px;
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#10162b,#0d1430);
  overflow:hidden;              /* trim neon glow if it bleeds */
}
.split__text h3{ margin-top:0 }
.split__text p{ color:#f0d9d9 }

@media (max-width:980px){
  .split, .split--rev{ grid-template-columns:1fr }
  .split--rev .split__img, .split--rev .split__text{ order:unset }
}

/* Icon inside the card — override global img sizing */
.split__img img{
  width:auto;                   /* reset global img rule */
  height:auto;
  max-width:clamp(120px,38%,200px);
  max-height:78%;
  object-fit:contain;
  display:block;
  margin:0;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

@media (max-width:560px){
  .split__img{ height:180px }
  .split__img img{ max-width:clamp(110px,46%,180px) }
}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.price{padding:22px;border:1px solid var(--border);border-radius:18px;background:#10162b}
.price--hit{background:linear-gradient(180deg,#1a1418,#10162b)}
.price__tag{
  font-size:28px;font-weight:700;margin:6px 0;
  background:linear-gradient(135deg,var(--grad-from),var(--grad-to));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.price ul{padding-left:18px;color:#f0d9d9}
@media (max-width:980px){ .pricing{grid-template-columns:1fr} }

/* Footer */
.footer{border-top:1px solid var(--border)}
.footer__row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;color:#cfc7d1;gap:10px;flex-wrap:wrap}
.footer a{color:#ffe4e4;text-decoration:none}
.footer a:hover{text-decoration:underline}

/* Reveal on scroll */
@keyframes reveal-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{animation:reveal-up var(--dur) var(--eas) both}
.reveal.delay-1{animation-delay:.08s}
.reveal.delay-2{animation-delay:.16s}
.reveal.delay-3{animation-delay:.24s}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ===== Playlist Manager (page-specific) ===== */
.pm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.pm-title{margin:0}
.pm-meta{display:grid;gap:12px;margin:6px 0 16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pm-strong{font-weight:700}
@media (max-width:820px){ .pm-meta{grid-template-columns:1fr} }

.pm-grid{display:grid;gap:12px;margin-top:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.pm-grid-3{grid-template-columns:1fr 220px 1fr}
.pm-grid-span{grid-column:span 3}
@media (max-width:980px){ .pm-grid-3{grid-template-columns:1fr} .pm-grid-span{grid-column:auto} }
.pm-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

.table-wrap{margin-top:14px;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.pm-table{width:100%;border-collapse:collapse}
.pm-table thead th{text-align:left;padding:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--grad-from),var(--grad-to))}
.pm-table td{padding:14px;border-top:1px solid var(--border);vertical-align:top}
.pm-url{word-break:break-all}
.pm-actions-inline{white-space:nowrap}
.pm-actions-inline .btn{margin-right:6px}

.badge{padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;display:inline-block}
.badge.ok{background:#072217;color:#9ff3c9;border:1px solid #0e3b2b}
.badge.exp{background:#320c13;color:#fecdd3;border:1px solid #5b101d}

.btn--warn{background:#EAB308;color:#111827}
.btn--warn:hover{background:#CA8A04}
code{background:#10162b;padding:2px 6px;border-radius:6px;color:#ffe4e4;border:1px solid var(--border)}

/* ---------- Playlist Manager overrides (no red; sleek inputs) ---------- */
.playlist-ui .card{
  background:var(--surface);
  border:1px solid #1e2540;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Inputs & selects (scope to this page) */
.playlist-ui .form input,
.playlist-ui .form select,
.playlist-ui .form textarea{
  width:100%;
  background:#0b1328;
  border:1px solid #26324d;
  color:#e8eeff;
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.playlist-ui .form input::placeholder,
.playlist-ui .form textarea::placeholder{ color:#8da2d6 }
.playlist-ui .form input:focus,
.playlist-ui .form select:focus,
.playlist-ui .form textarea:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 4px rgba(59,130,246,.18);
  background:#0c1530;
}

/* Blue action buttons only here (keep red elsewhere) */
.playlist-ui .btn.btn--solid{
  background:linear-gradient(135deg,#4f46e5,#2563eb);
  box-shadow:0 6px 14px rgba(37,99,235,.28);
}
.playlist-ui .btn.btn--solid:hover{ filter:brightness(1.05); transform:translateY(-1px) }

/* Table — neutral header, no red */
.playlist-ui .table-wrap{ border-color:#1e2540 }
.playlist-ui .pm-table thead th{
  background:#121a33;
  color:#e6eaf6;
  border-bottom:1px solid #1e2540;
}
.playlist-ui .pm-table td{ border-top:1px solid #1e2540 }
.playlist-ui .pm-table tbody tr:hover td{ background:rgba(255,255,255,.02) }

/* Action buttons */
.playlist-ui .btn--ghost{ border:1px solid #2a365f; color:#e6eaf6; background:transparent }
.playlist-ui .btn--ghost:hover{ background:#121a33 }
.playlist-ui .btn--warn{ background:#EAB308; color:#111827 }
.playlist-ui .btn--warn:hover{ background:#CA8A04 }

/* Fine-tune headings & spacing */
.playlist-ui .pm-title{ margin:0 }
.playlist-ui .pm-meta{ margin-top:6px }

/* ---------- Dashboard UI (status) ---------- */
.dash-ui .card{
  background:var(--surface);
  border:1px solid #1e2540;
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.dash-title{ margin:.1em 0 .6em; font-size:28px }
.dash-sub{ margin:.2em 0 .6em }

.dash-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px }
@media (max-width:980px){ .dash-grid{ grid-template-columns:1fr } }

.kv{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; padding:12px 0; border-top:1px solid #1e2540;
}
.kv:first-of-type{ border-top:0 }
.kv > span:first-child{ color:var(--muted) }
.kv code{
  background:#0b1328; border:1px solid #26324d; color:#d9e6ff;
  padding:6px 8px; border-radius:8px; font-family:ui-monospace,Menlo,Consolas,monospace;
}

.badge{ padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; display:inline-block }
.badge.ok{  background:#072217; color:#9ff3c9; border:1px solid #0e3b2b }
.badge.exp{ background:#320c13; color:#fecdd3; border:1px solid #5b101d }

.actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap }

.links{ margin:0; padding-left:18px }
.links li{ margin:8px 0 }
.link{ color:#cfe1ff; text-decoration:none }
.link:hover{ text-decoration:underline }

/* ---------- Dashboard modal ---------- */
.dash-modal{
  border:1px solid #1e2540; border-radius:16px; padding:20px;
  background:var(--surface); color:var(--text);
}
.dash-modal::backdrop{ background:rgba(0,0,0,.45) }
.dash-modal .modal__plans{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 16px }