*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#020617;
  --line:rgba(255,255,255,.12);
  --muted:#a8b0c6;
  --text:#fff;
  --cyan:#00e5ff;
  --purple:#7c3aed;
  --pink:#ff2bd6;
}
html,body{width:100%;min-height:100%;scroll-behavior:smooth}
body{
  font-family:"Segoe UI",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
.site-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 10% 0%,rgba(0,229,255,.16),transparent 26%),
    radial-gradient(circle at 90% 0%,rgba(255,43,214,.13),transparent 28%),
    radial-gradient(circle at 50% 90%,rgba(124,58,237,.16),transparent 32%),
    linear-gradient(135deg,#01030a,#050816 58%,#02040c);
}
.site-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 0%,black,transparent 80%);
}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
.header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px clamp(20px,4vw,70px);
  background:rgba(2,6,23,.74);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(22px);
}
.brand{
  display:flex;
  align-items:center;
  gap:13px;
  cursor:pointer;
}
.brand-mark{
  width:52px;
  height:52px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:1000;
  background:linear-gradient(135deg,var(--cyan),var(--purple),var(--pink));
  box-shadow:0 0 34px rgba(34,211,238,.23);
}
.brand strong{display:block;font-size:24px;line-height:1}
.brand strong span{
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:3.5px;
  font-weight:800;
}
.nav{display:flex;align-items:center;gap:8px}
.nav-link{
  border:1px solid transparent;
  background:transparent;
  color:#dbeafe;
  font-weight:850;
  padding:12px 15px;
  border-radius:14px;
}
.nav-link:hover,.nav-link.active{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  color:#fff;
}
.menu-btn{
  display:none;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  color:white;
  width:46px;
  height:46px;
  border-radius:14px;
  font-size:22px;
}
.mobile-menu{
  display:none;
  position:fixed;
  top:82px;
  left:14px;
  right:14px;
  z-index:101;
  padding:12px;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(2,6,23,.94);
  backdrop-filter:blur(20px);
}
.mobile-menu.active{display:grid;gap:8px}
.mobile-menu button{
  height:48px;
  border:0;
  border-radius:14px;
  color:white;
  background:rgba(255,255,255,.06);
  font-weight:900;
}
main{
  width:min(1460px,92vw);
  margin:0 auto;
  padding:54px 0 70px;
}
.page{display:none}
.page.active{display:block;animation:fadeIn .22s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:34px;
  align-items:center;
  min-height:calc(100vh - 210px);
}
.eyebrow{
  display:inline-flex;
  width:max-content;
  margin-bottom:18px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.24);
  color:#67e8f9;
  font-size:12px;
  font-weight:950;
  letter-spacing:2px;
}
h1{
  font-size:clamp(42px,5.3vw,84px);
  line-height:.98;
  letter-spacing:-2.5px;
  font-weight:1000;
}
.hero-copy p,.portal-copy p,.reseller-hero p,.section-title p{
  margin-top:22px;
  color:#cbd5e1;
  font-size:18px;
  line-height:1.65;
  max-width:720px;
}
.hero-actions{margin-top:30px;display:flex;gap:13px;flex-wrap:wrap}
.primary,.secondary{
  min-height:54px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  color:white;
  font-weight:950;
  padding:0 22px;
  font-size:15px;
}
.primary{
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));
  box-shadow:0 16px 50px rgba(124,58,237,.28);
}
.secondary{background:rgba(255,255,255,.07)}
.full{width:100%}
.disclaimer-pill{
  margin-top:24px;
  width:max-content;
  max-width:100%;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#dbeafe;
  font-size:13px;
}
.hero-panel{display:flex;justify-content:center}
.device-card{
  width:min(520px,100%);
  min-height:560px;
  border-radius:42px;
  border:1px solid rgba(255,255,255,.15);
  background:
    linear-gradient(145deg,rgba(15,23,42,.85),rgba(2,6,23,.88)),
    radial-gradient(circle at 50% 10%,rgba(34,211,238,.18),transparent 35%);
  box-shadow:0 45px 140px rgba(0,0,0,.52),0 0 80px rgba(34,211,238,.12);
  padding:26px;
  position:relative;
  overflow:hidden;
}
.device-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(-120%);
  animation:sweep 7s infinite;
}
@keyframes sweep{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.screen-top{display:flex;gap:8px;position:relative;z-index:1}
.screen-top span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.screen-logo{
  position:relative;
  z-index:1;
  margin:80px auto 40px;
  width:230px;
  height:120px;
  border-radius:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:1000;
  letter-spacing:4px;
  background:linear-gradient(135deg,rgba(0,229,255,.18),rgba(124,58,237,.18));
  border:1px solid rgba(255,255,255,.12);
}
.device-id-box,.screen-status{
  position:relative;
  z-index:1;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  margin-top:14px;
}
.device-id-box small,.screen-status small{display:block;color:var(--muted);margin-bottom:8px}
.device-id-box strong{font-size:24px;letter-spacing:1.3px}
.platforms{
  margin:20px 0 70px;
  padding:18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,255,255,.045);
}
.platforms span{color:var(--muted);font-weight:800;margin-right:4px}
.platforms b{
  padding:10px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
}
.section-title{margin:70px 0 24px}
.section-title.center{text-align:center}
.section-title small{color:#67e8f9;font-size:12px;font-weight:950;letter-spacing:2px}
.section-title h2{margin-top:8px;font-size:clamp(32px,3vw,54px)}
.section-title.center p{margin-left:auto;margin-right:auto}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card,.legal-box,.plan-card,.reseller-grid div,.contact-cards div,.info-note{
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  border-radius:26px;
  padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.feature-card div{
  width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--cyan),var(--purple));font-size:24px;margin-bottom:18px;
}
.feature-card h3,.legal-box h3{font-size:21px;margin-bottom:10px}
.feature-card p,.legal-box p,.reseller-grid p,.plan-card p{color:#cbd5e1;line-height:1.55}
.legal-box{margin-top:20px}
.portal-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:start}
.portal-copy{position:sticky;top:120px;padding-top:20px}
.steps{display:grid;gap:12px;margin-top:30px}
.steps div{
  display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);
}
.steps b{
  width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--cyan),var(--purple));
  display:flex;align-items:center;justify-content:center;
}
.info-note{margin-top:18px;color:#cbd5e1;line-height:1.55}
.nas-helper-layout{
  align-items:center;
}
.nas-download-card{
  background:
    linear-gradient(145deg,rgba(124,58,237,.14),rgba(34,211,238,.055)),
    rgba(15,23,42,.70);
  backdrop-filter:blur(24px) saturate(120%);
}
.nas-download-card > p{
  margin:0 0 18px;
  color:#cbd5e1;
  line-height:1.6;
}
.helper-options{
  display:grid;
  gap:12px;
  margin:18px 0;
}
.helper-option{
  width:100%;
  min-height:78px;
  text-align:left;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.045);
  color:#fff;
  padding:16px;
}
.helper-option.active,
.helper-option:hover{
  border-color:rgba(34,211,238,.45);
  background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(124,58,237,.12));
  box-shadow:0 0 32px rgba(34,211,238,.10);
}
.helper-option b,
.helper-option small{
  display:block;
}
.helper-option small{
  margin-top:6px;
  color:#a8b0c6;
}
.download-link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.portal-form,.activation-form,.reseller-login{
  border:1px solid var(--line);
  border-radius:32px;
  padding:28px;
  background:rgba(15,23,42,.70);
  box-shadow:0 35px 110px rgba(0,0,0,.35);
}
.portal-form h2,.activation-form h2,.reseller-login h2{font-size:28px;margin-bottom:22px}
label{display:block;margin:14px 0 8px;color:#dbeafe;font-weight:850}
input,select,textarea{
  width:100%;
  min-height:52px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:#061020;
  color:white;
  padding:0 15px;
  font-size:15px;
  outline:none;
}
textarea{min-height:130px;padding-top:14px;resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:rgba(34,211,238,.7);
  box-shadow:0 0 0 2px rgba(34,211,238,.12);
}
.form-status{margin-top:14px;color:#86efac;font-weight:800}
.test-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(280px,1fr));
  gap:22px;
  align-items:start;
}
.test-result{
  margin-top:14px;
  max-height:260px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(0,0,0,.28);
  color:#dbeafe;
  padding:14px;
  font:12px/1.5 Consolas,monospace;
}
.activation-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(260px,420px));
  justify-content:center;
  gap:20px;
  margin:30px 0;
}
.plan-card{position:relative;transition:.2s}
.plan-card.featured{border-color:rgba(34,211,238,.35)}
.plan-card.active-plan{
  border-color:#00e5ff;
  box-shadow:0 0 44px rgba(0,229,255,.22),inset 0 0 30px rgba(0,229,255,.055);
  transform:translateY(-4px);
}
.plan-badge{
  width:max-content;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(34,211,238,.12);
  color:#67e8f9;
  font-weight:950;
  font-size:12px;
  margin-bottom:16px;
}
.plan-card h3{font-size:30px;margin-bottom:8px}
.price{font-size:46px;font-weight:1000;margin:20px 0}
.activation-form{width:min(620px,100%);margin:0 auto}
.contact-cards{display:grid;gap:12px;margin-top:28px}
.contact-cards b{display:block;margin-bottom:6px}
.contact-cards span{color:var(--muted)}
.reseller-hero{display:grid;grid-template-columns:1fr 460px;gap:34px;align-items:start;min-height:560px}
.reseller-grid{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.reseller-grid.mini{grid-template-columns:repeat(2,1fr)}
.reseller-grid h3{margin-bottom:10px}
.footer{
  width:min(1460px,92vw);
  margin:0 auto;
  padding:24px 0 38px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(226,232,240,.72);
  font-size:13px;
}
.footer div{
  font-weight:1000;
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.footer span{text-align:right}
@media(max-width:980px){
  .nav{display:none}
  .menu-btn{display:block}
  main{padding-top:34px}
  .hero,.portal-layout,.reseller-hero{grid-template-columns:1fr;min-height:auto}
  .portal-copy{position:static}
  .feature-grid,.reseller-grid,.reseller-grid.mini{grid-template-columns:1fr}
  .test-grid{grid-template-columns:1fr}
  .activation-grid{grid-template-columns:1fr}
  h1{font-size:44px}
  .footer{flex-direction:column;align-items:flex-start}
  .footer span{text-align:left}
}


/* =======================================================
   LANGUAGE SELECT + HOME DEMO REMOVED
======================================================= */

.language-select{
  height:42px;
  min-width:132px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.13);
  background:#061020;
  color:#fff;
  padding:0 12px;
  font-weight:850;
  outline:none;
}

.language-select option{
  background:#061020;
  color:#fff;
}

.hero{
  grid-template-columns:1fr!important;
  min-height:auto!important;
  padding:58px 0 20px;
}

.hero-copy{
  max-width:900px;
}

.hero-copy h1{
  max-width:880px;
}

.hero-panel,
.device-card{
  display:none!important;
}

html[dir="rtl"] body{
  direction:rtl;
}

html[dir="rtl"] .brand,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .platforms{
  direction:ltr;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select{
  direction:rtl;
}

@media(max-width:980px){
  .language-select{
    margin-left:auto;
  }
}


/* V3XA logo image replacement */
.brand-logo-image{
  display:block;
  width:168px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}
.header .brand{min-width:168px;}
.sidebar .brand{justify-content:flex-start;}
@media(max-width:760px){.brand-logo-image{width:138px}.header .brand{min-width:138px}}

/* V3XA matte glass portal refresh */
:root{
  --glass:rgba(7,14,30,.64);
  --glass-strong:rgba(10,18,38,.78);
  --theme-a:#8d48ff;
  --theme-b:#23a9ff;
  --theme-c:#17e3d4;
  --theme-pink:#ff4ba4;
}
body{
  background:
    radial-gradient(circle at 78% 10%,rgba(35,169,255,.16),transparent 34%),
    radial-gradient(circle at 8% 20%,rgba(141,72,255,.18),transparent 31%),
    #020711;
}
.site-bg{
  background:
    linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.72)),
    radial-gradient(circle at 75% 10%,rgba(35,169,255,.22),transparent 34%),
    radial-gradient(circle at 12% 25%,rgba(141,72,255,.18),transparent 30%),
    #020711;
}
.site-bg:after{
  opacity:.62;
  background:
    linear-gradient(90deg,rgba(82,142,255,.08) 1px,transparent 1px),
    linear-gradient(rgba(82,142,255,.06) 1px,transparent 1px),
    radial-gradient(circle at 88% 16%,rgba(35,169,255,.18),transparent 28%);
  background-size:58px 58px,58px 58px,100% 100%;
}
.header,
.portal-form,
.activation-form,
.reseller-login,
.feature-card,
.legal-box,
.plan-card,
.reseller-grid div,
.contact-cards div,
.info-note,
.platforms{
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.026)),
    var(--glass);
  border-color:rgba(159,190,255,.16);
  backdrop-filter:blur(22px) saturate(130%);
  box-shadow:0 26px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07);
}
.header{
  background:
    linear-gradient(90deg,rgba(5,10,24,.84),rgba(10,16,34,.68)),
    var(--glass-strong);
}
.brand-logo-image{
  width:230px;
  filter:drop-shadow(0 0 16px rgba(35,169,255,.20));
}
.header .brand{min-width:230px}
.nav-link,
.mobile-menu button,
.primary,
.secondary,
.helper-option,
input,
select,
textarea{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),
    rgba(5,12,26,.72);
  border-color:rgba(159,190,255,.16);
  backdrop-filter:blur(18px);
}
.nav-link:before,
.primary:before,
.secondary:before,
.helper-option:before{
  content:"";
  position:absolute;
  inset:-140% auto -140% -70%;
  width:42%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  opacity:0;
  transition:transform .55s ease,opacity .25s ease;
}
.nav-link:hover:before,
.nav-link.active:before,
.primary:hover:before,
.secondary:hover:before,
.helper-option:hover:before{
  opacity:1;
  transform:translateX(420%) rotate(18deg);
}
.nav-link:hover,
.nav-link.active{
  background:
    linear-gradient(135deg,rgba(141,72,255,.24),rgba(35,169,255,.16)),
    rgba(7,14,30,.74);
  border-color:rgba(141,72,255,.48);
  box-shadow:0 0 28px rgba(141,72,255,.20);
}
.primary{
  background:
    linear-gradient(135deg,rgba(141,72,255,.92),rgba(35,169,255,.76)),
    rgba(7,14,30,.85);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 18px 46px rgba(35,169,255,.18),inset 0 1px 0 rgba(255,255,255,.16);
}
.secondary{
  background:
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025)),
    rgba(7,14,30,.72);
}
.feature-card{
  min-height:210px;
}
.feature-card div{
  width:58px;
  height:58px;
  font-size:15px;
  font-weight:1000;
  letter-spacing:.7px;
  color:#fff;
  background:
    linear-gradient(135deg,rgba(141,72,255,.78),rgba(35,169,255,.62)),
    rgba(7,14,30,.84);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 28px rgba(141,72,255,.22);
}
.eyebrow,
.section-title small{
  color:#9fc8ff;
}
.eyebrow{
  background:rgba(141,72,255,.12);
  border-color:rgba(141,72,255,.28);
}
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(141,72,255,.72);
  box-shadow:0 0 0 2px rgba(141,72,255,.18),0 0 26px rgba(35,169,255,.12);
}
.plan-card.active-plan{
  border-color:rgba(141,72,255,.72);
  box-shadow:0 0 44px rgba(141,72,255,.22),inset 0 0 30px rgba(35,169,255,.05);
}
.footer div{
  background:linear-gradient(90deg,#fff,#cfe2ff,#fff);
  -webkit-background-clip:text;
  background-clip:text;
}
@media(max-width:760px){
  .brand-logo-image{width:172px}
  .header .brand{min-width:172px}
  .menu-btn{width:auto;padding:0 14px;font-size:13px;font-weight:900}
}

/* =======================================================
   V3XA PORTAL PREMIUM UPDATE
   Logo changed from Entertainment OS to Portal + cleaner copy
======================================================= */
.portal-hero-premium{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:22px!important;
  padding:26px 0 46px!important;
  text-align:center;
}
.hero-logo-wrap{
  position:relative;
  margin:0 auto 6px;
  width:min(1080px,100%);
  border-radius:36px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 50%,rgba(35,169,255,.12),transparent 58%);
  box-shadow:0 40px 140px rgba(0,0,0,.35),0 0 90px rgba(35,169,255,.10);
}
.hero-logo-wrap:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 70%,rgba(2,7,17,.55));
}
.hero-portal-logo{
  display:block;
  width:100%;
  height:auto;
}
.portal-hero-premium .hero-copy{
  max-width:920px;
  margin:0 auto;
}
.portal-hero-premium h1{
  font-size:clamp(38px,4.7vw,74px);
  letter-spacing:-2px;
}
.portal-hero-premium .hero-copy p{
  margin-left:auto;
  margin-right:auto;
  max-width:850px;
  color:#dbe7ff;
}
.portal-hero-premium .hero-actions{
  justify-content:center;
}
.trust-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:22px;
}
.trust-row span{
  padding:10px 14px;
  border-radius:999px;
  color:#dbeafe;
  font-size:13px;
  font-weight:900;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),rgba(7,14,30,.72);
  border:1px solid rgba(159,190,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.portal-hero-premium .disclaimer-pill{
  margin-left:auto;
  margin-right:auto;
}
.legal-box{
  border-color:rgba(35,169,255,.24);
}
.portal-form,.activation-form,.reseller-login{
  border-radius:34px;
}
.portal-layout{
  gap:46px;
}
.portal-copy h1,
.reseller-hero h1{
  max-width:760px;
}
.footer{
  margin-top:36px;
}
@media(max-width:760px){
  .portal-hero-premium{padding-top:10px!important}
  .hero-logo-wrap{border-radius:22px}
  .trust-row span{font-size:12px;padding:9px 11px}
}

/* =======================================================
   V3XA PORTAL - EXACT PREMIUM LAYOUT FIX
   No new hero image. Header uses existing portal logo only.
======================================================= */
.header{
  min-height:120px;
  padding:20px clamp(28px,4vw,56px);
  gap:28px;
  background:linear-gradient(180deg,rgba(5,12,28,.96),rgba(3,8,18,.92));
  border-bottom:1px solid rgba(29,123,255,.28);
}
.header .brand{min-width:260px;flex:0 0 260px;overflow:hidden}
.brand-logo-image{
  width:255px!important;
  height:86px!important;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  filter:drop-shadow(0 0 16px rgba(35,169,255,.26));
}
.nav{gap:14px;justify-content:center;flex:1}
.nav-link{
  width:150px;
  height:68px;
  padding:0 18px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:12px!important;
  font-size:17px;
  line-height:1.15;
  font-weight:900;
  color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),rgba(7,14,30,.88);
  border:1px solid rgba(104,145,214,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 34px rgba(0,0,0,.22);
}
.nav-link:hover,.nav-link.active{
  background:linear-gradient(145deg,rgba(0,133,255,.18),rgba(255,255,255,.03)),rgba(8,17,34,.92);
  border-color:rgba(0,133,255,.62);
  box-shadow:0 0 0 1px rgba(0,133,255,.12),0 0 28px rgba(0,133,255,.18),inset 0 1px 0 rgba(255,255,255,.12);
}
.language-select{
  width:240px!important;
  min-width:240px!important;
  height:68px!important;
  border-radius:12px!important;
  font-size:18px;
  font-weight:900;
  padding:0 22px;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),rgba(7,14,30,.88);
  border:1px solid rgba(104,145,214,.24);
}
main{width:min(1780px,96vw);padding:28px 0 64px}
.premium-home-shell{width:100%}
.premium-hero-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:40px;
  align-items:center;
  min-height:720px;
  padding:76px 74px 165px;
  border-radius:28px;
  border:1px solid rgba(0,132,255,.62);
  background:
    radial-gradient(circle at 80% 22%,rgba(0,120,255,.18),transparent 34%),
    radial-gradient(circle at 22% 84%,rgba(0,110,255,.16),transparent 26%),
    linear-gradient(145deg,rgba(5,16,34,.94),rgba(1,5,14,.96));
  box-shadow:0 34px 120px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.06),0 0 65px rgba(0,107,255,.09);
}
.premium-hero-card:before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(110deg,transparent 0 46%,rgba(0,136,255,.12) 74%,transparent 100%),
    repeating-linear-gradient(90deg,rgba(64,145,255,.035) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(0deg,rgba(64,145,255,.026) 0 1px,transparent 1px 58px);
  opacity:.8;
  pointer-events:none;
}
.premium-hero-card:after{
  content:"";
  position:absolute;
  right:-8%;bottom:-10%;width:70%;height:45%;
  background:
    repeating-radial-gradient(ellipse at center,rgba(0,117,255,.26) 0 1px,transparent 1px 22px);
  opacity:.40;
  transform:rotate(-8deg);
  filter:blur(.2px);
  pointer-events:none;
}
.hero-left,.hero-right,.bottom-feature-bar{position:relative;z-index:1}
.hero-left h1{
  font-size:clamp(56px,5vw,82px);
  line-height:1.05;
  letter-spacing:-2px;
  margin:0 0 26px;
  color:#fff;
  text-shadow:0 8px 30px rgba(0,0,0,.48);
}
.hero-left h1 span{
  background:linear-gradient(180deg,#22b4ff 0%,#0069ff 62%,#004dce 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-left p{
  margin:0 0 42px;
  max-width:560px;
  color:#e5edf9;
  font-size:25px;
  line-height:1.42;
}
.hero-mini-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  max-width:650px;
  margin:0 0 44px;
}
.mini-feature{
  min-height:162px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:flex-start;
  padding:0 28px;
  border-right:1px solid rgba(149,184,232,.22);
}
.mini-feature:last-child{border-right:0}
.feature-icon{
  height:48px;
  margin-bottom:16px;
  color:#078bff;
  font-size:42px;
  line-height:1;
  text-shadow:0 0 20px rgba(0,132,255,.42);
}
.mini-feature strong{
  display:block;
  margin-bottom:8px;
  font-size:17px;
  letter-spacing:4px;
  text-transform:uppercase;
}
.mini-feature small{
  color:#d2dcec;
  font-size:16px;
  line-height:1.35;
}
.hero-start{
  width:285px;
  height:72px;
  border-radius:12px;
  font-size:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  background:linear-gradient(135deg,#0db7ff,#005bff 70%,#0039d8);
  box-shadow:0 20px 55px rgba(0,93,255,.34),inset 0 1px 0 rgba(255,255,255,.28);
}
.hero-start span{font-size:34px;line-height:1}
.hero-right{
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.portal-wordmark{
  width:min(880px,100%);
  text-align:center;
  padding:30px 10px;
  filter:drop-shadow(0 0 42px rgba(0,132,255,.20));
}
.portal-name{
  font-size:clamp(96px,9vw,180px);
  line-height:.82;
  font-weight:1000;
  letter-spacing:-8px;
  color:#f7f7f7;
  text-shadow:0 7px 0 rgba(0,0,0,.15),0 18px 34px rgba(0,0,0,.60),0 -2px 0 rgba(255,255,255,.7);
}
.portal-name::first-letter{letter-spacing:-12px}
.portal-title{
  margin-top:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  color:#e8f0ff;
  font-size:46px;
  letter-spacing:28px;
  font-weight:400;
  text-shadow:0 0 22px rgba(0,152,255,.28);
}
.portal-title span{
  width:142px;height:5px;display:block;
  background:linear-gradient(90deg,transparent,#007bff,#00dcff,transparent);
}
.portal-subtitle{
  margin-top:30px;
  color:#d8e7ff;
  font-size:20px;
  letter-spacing:10px;
  opacity:.93;
}
.bottom-feature-bar{
  position:absolute;
  left:74px;right:74px;bottom:36px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  min-height:126px;
  border:1px solid rgba(79,146,230,.28);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(7,20,40,.90),rgba(4,13,28,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 50px rgba(0,0,0,.28);
}
.bottom-feature{
  display:flex;
  align-items:center;
  gap:22px;
  padding:24px 34px;
  border-right:1px solid rgba(149,184,232,.22);
}
.bottom-feature:last-child{border-right:0}
.bottom-icon{
  width:58px;height:58px;display:flex;align-items:center;justify-content:center;
  color:#008bff;font-size:42px;line-height:1;text-shadow:0 0 20px rgba(0,132,255,.42);
}
.bottom-feature strong{
  display:block;
  margin-bottom:8px;
  color:#d8e2f2;
  font-size:18px;
  letter-spacing:3px;
  text-transform:uppercase;
}
.bottom-feature small{display:block;color:#e1e7f0;font-size:16px;line-height:1.35}
.premium-legal{margin-top:28px}
@media(max-width:1200px){
  .header{flex-wrap:wrap}.header .brand{flex-basis:220px;min-width:220px}.brand-logo-image{width:220px!important}
  .nav{order:3;flex-basis:100%}.nav-link{flex:1;width:auto}.language-select{margin-left:auto}
  .premium-hero-card{grid-template-columns:1fr;padding:54px 34px 190px}.hero-right{min-height:280px}.bottom-feature-bar{left:34px;right:34px;grid-template-columns:repeat(2,1fr)}.bottom-feature:nth-child(2){border-right:0}.bottom-feature:nth-child(1),.bottom-feature:nth-child(2){border-bottom:1px solid rgba(149,184,232,.22)}
}

@media(max-width:980px){
  .header{min-height:92px}.header .brand{min-width:190px;flex-basis:190px}.brand-logo-image{width:190px!important;height:64px!important}.language-select{width:180px!important;min-width:180px!important;height:52px!important}.menu-btn{height:52px}.premium-hero-card{padding:42px 22px 30px;min-height:auto}.bottom-feature-bar{position:relative;left:auto;right:auto;bottom:auto;margin-top:34px;grid-template-columns:1fr}.bottom-feature,.bottom-feature:nth-child(2){border-right:0;border-bottom:1px solid rgba(149,184,232,.22)}.bottom-feature:last-child{border-bottom:0}.hero-mini-features{grid-template-columns:1fr;gap:18px}.mini-feature{border-right:0;border-bottom:1px solid rgba(149,184,232,.18);padding-bottom:18px}.mini-feature:last-child{border-bottom:0}.portal-title{font-size:30px;letter-spacing:12px;gap:18px}.portal-title span{width:70px}.portal-subtitle{font-size:14px;letter-spacing:5px}
}

/* Premium playlist type selector */
.playlist-type-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:8px 0 18px;
}
.playlist-type-card{
  min-height:92px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(15,23,42,.88),rgba(2,8,23,.78));
  color:#fff;
  text-align:left;
  padding:16px;
  cursor:pointer;
  transition:.18s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.playlist-type-card b{display:block;font-size:15px;margin-bottom:7px;letter-spacing:.02em}
.playlist-type-card small{display:block;color:#94a3b8;line-height:1.35;font-weight:700}
.playlist-type-card:hover,
.playlist-type-card.active{
  border-color:rgba(0,229,255,.78);
  background:linear-gradient(135deg,rgba(14,165,233,.20),rgba(37,99,235,.16),rgba(15,23,42,.88));
  box-shadow:0 0 32px rgba(0,132,255,.18), inset 0 0 24px rgba(0,229,255,.06);
  transform:translateY(-2px);
}
.playlist-fields{margin-top:4px}
.hidden{display:none!important}
.optional{color:#64748b;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.field-help{margin:10px 0 0;color:#94a3b8;font-size:13px;line-height:1.5}

@media(max-width:720px){
  .playlist-type-grid{grid-template-columns:1fr}
}


.check-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 0 6px;
  color:#cbd5e1;
  font-weight:800;
}
.check-row input{
  width:18px;
  height:18px;
  accent-color:#0284ff;
}
.form-intro{
  color:#94a3b8;
  margin-top:-10px;
  margin-bottom:18px;
  line-height:1.55;
}
.danger-form{
  border-color:rgba(248,113,113,.28)!important;
}
.danger{
  border:0;
  border-radius:14px;
  padding:15px 20px;
  font-weight:900;
  color:white;
  background:linear-gradient(135deg,#ef4444,#991b1b);
  box-shadow:0 18px 40px rgba(239,68,68,.22);
  cursor:pointer;
}
.danger:hover{filter:brightness(1.1)}

/* Delete playlist premium fix */
.warning-note{
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(248,113,113,.36);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(127,29,29,.22), rgba(15,23,42,.72));
  color: #fecaca;
  font-size: 14px;
  line-height: 1.5;
}
.playlists-overview{ grid-column: 1 / -1; }
.playlist-table{
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  background: rgba(2,6,23,.28);
}
.playlist-table-row{
  display: grid;
  grid-template-columns: 1.4fr 1fr .8fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid rgba(148,163,184,.12);
  color: #dbeafe;
}
.playlist-table-row:first-child{ border-top: 0; }
.playlist-table-head{
  color: #93c5fd;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}
.status-active{
  display: inline-flex;
  width: max-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.12);
  color: #86efac;
  border: 1px solid rgba(34,197,94,.28);
}
@media (max-width: 720px){
  .playlist-table-row{ grid-template-columns: 1fr; gap: 4px; }
}


.saved-playlist-mini{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid rgba(34,197,94,.35);
  border-radius:14px;
  background:rgba(22,163,74,.10);
  box-shadow:0 12px 30px rgba(22,163,74,.10);
}
.saved-playlist-mini.hidden{display:none;}
.saved-playlist-mini .saved-dot{
  width:11px;
  height:11px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 16px rgba(34,197,94,.75);
}
.saved-playlist-mini strong{display:block;color:#eafff3;font-size:14px;}
.saved-playlist-mini small{display:block;color:#a7f3d0;font-size:12px;margin-top:2px;}

/* V3XA final label cleanup */
.saved-section-v2{display:none!important;}
.upload-mini-status{margin:10px 0 0;color:#86efac;font-weight:800;font-size:13px;}
.upload-mini-status::before{content:'✓ ';}
.upload-dashboard-v2{max-width:1720px;margin:0 auto;display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;align-items:start;}
.upload-side-card,.upload-panel-v2,.delete-panel-v2{background:linear-gradient(145deg,rgba(15,28,50,.84),rgba(5,10,22,.88));border:1px solid rgba(148,163,184,.18);box-shadow:0 22px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.035);border-radius:20px!important;padding:24px!important;}
.upload-side-card{min-height:620px;padding:32px 28px!important;position:sticky;top:140px;}
.side-icon,.panel-icon{width:56px;height:56px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;background:linear-gradient(135deg,#0ea5ff,#2457e8);box-shadow:0 18px 44px rgba(14,126,255,.28);color:#fff;}
.upload-side-card h1{margin:20px 0 12px;font-size:34px;line-height:1.05;background:linear-gradient(180deg,#fff,#cfe2ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.upload-side-card p{color:#d8e5f8;line-height:1.55;margin:0 0 28px;font-size:17px;}
.side-feature{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start;margin:22px 0;}
.side-feature>span{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0b83ff;color:#fff;font-weight:900;box-shadow:0 0 24px rgba(11,131,255,.38);}
.side-feature strong{display:block;color:#fff;font-size:16px;margin-bottom:5px;}
.side-feature small{display:block;color:#b8c7dc;font-size:14px;line-height:1.35;}
.side-note{margin-top:28px;padding:16px 18px;border:1px solid rgba(37,99,235,.45);border-radius:14px;background:rgba(16,55,128,.22);color:#bcd6ff;font-size:14px;line-height:1.45;}
.upload-main-v2{display:flex;flex-direction:column;gap:16px;}
.panel-heading{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;}
.panel-heading h2{margin:0!important;color:#fff;font-size:28px;line-height:1.15;}
.panel-icon{width:38px;height:38px;border-radius:10px;font-size:18px;flex:0 0 auto;}
.panel-icon.blue{background:linear-gradient(135deg,#0ea5ff,#1d4ed8);}
.panel-icon.red{background:linear-gradient(135deg,#ef4444,#991b1b);}
.input-copy-wrap{position:relative;display:flex;align-items:center;}
.input-copy-wrap input{width:100%;padding-right:44px!important;}
.input-copy-wrap span{position:absolute;right:16px;color:#cfe2ff;font-size:18px;opacity:.85;}
.playlist-type-grid.v2{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px!important;margin:8px 0 18px!important;}
.playlist-type-grid.v2 .playlist-type-card{min-height:96px!important;text-align:left!important;display:grid!important;grid-template-columns:56px 1fr!important;column-gap:16px!important;align-items:center!important;padding:18px!important;position:relative;}
.playlist-type-grid.v2 .playlist-type-card b{font-size:17px;color:#fff;}
.playlist-type-grid.v2 .playlist-type-card small{font-size:13px;line-height:1.35;color:#b6c2d3;margin-top:4px;}
.type-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;}
.type-icon.link{background:rgba(14,126,255,.18);color:#26a7ff;}
.type-icon.server{background:rgba(124,58,237,.20);color:#a78bfa;}
.type-icon.file{background:rgba(34,197,94,.16);color:#22c55e;}
.field-grid-v2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;margin-top:8px;}
.field-grid-v2 label{margin-top:0!important;}
.xtream-grid-v2{grid-template-columns:repeat(4,minmax(0,1fr));}
.compact-check{margin:10px 0!important;}
.upload-panel-v2 .primary.full{height:54px;margin-top:8px;background:linear-gradient(135deg,#23a9ff,#1959e8);border-radius:12px;font-size:17px;}
.delete-panel-v2{border-color:rgba(239,68,68,.38)!important;background:linear-gradient(145deg,rgba(40,18,28,.74),rgba(5,10,22,.90))!important;}
.delete-panel-v2 .form-intro{margin:4px 0 0!important;color:#c7d2e4!important;}
.delete-grid-v2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0;}
.delete-bottom-v2{display:grid;grid-template-columns:1.2fr .6fr;gap:24px;align-items:center;}
.delete-bottom-v2 .warning-note{margin:0!important;height:100%;display:flex;align-items:center;}
.delete-bottom-v2 .danger.full{height:68px;font-size:18px;border-radius:14px;}
@media(max-width:1100px){.upload-dashboard-v2{grid-template-columns:1fr}.upload-side-card{position:relative;top:auto;min-height:auto}.field-grid-v2,.xtream-grid-v2,.playlist-type-grid.v2,.delete-grid-v2,.delete-bottom-v2{grid-template-columns:1fr!important}}


/* Portal merged test: backend-compatible disabled states */
.playlist-type-card.coming-soon,
.playlist-type-card:disabled{
  cursor:not-allowed;
  opacity:.52;
  filter:saturate(.6);
}
.playlist-type-card.coming-soon:hover,
.playlist-type-card:disabled:hover{
  border-color:rgba(148,163,184,.18);
  box-shadow:none;
  transform:none;
}

/* Portal mobile usability pass: scoped responsive overrides */
@media (max-width: 480px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .header{
    min-height:76px;
    padding:10px 12px;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
  }

  .header .brand{
    min-width:132px!important;
    flex:0 1 132px!important;
  }

  .brand-logo-image{
    width:132px!important;
    height:46px!important;
    object-fit:contain;
  }

  .language-select{
    width:132px!important;
    min-width:132px!important;
    height:46px!important;
    padding:0 10px!important;
    font-size:12px!important;
    border-radius:11px!important;
  }

  .menu-btn{
    display:block!important;
    min-width:72px;
    height:46px!important;
    padding:0 12px!important;
    border-radius:11px;
    font-size:13px;
    flex:0 0 auto;
  }

  .mobile-menu{
    top:76px;
    left:10px;
    right:10px;
    padding:10px;
    border-radius:18px;
    max-height:calc(100vh - 92px);
    overflow-y:auto;
  }

  .mobile-menu button{
    min-height:46px;
    height:auto;
    padding:10px 12px;
  }

  main{
    width:calc(100% - 24px);
    padding:20px 0 46px;
  }

  .portal-form,
  .activation-form,
  .reseller-login,
  .upload-side-card,
  .upload-panel-v2,
  .delete-panel-v2,
  .plan-card,
  .legal-box,
  .nas-download-card{
    padding:18px!important;
    border-radius:18px!important;
  }

  .portal-layout,
  .reseller-hero,
  .upload-dashboard-v2,
  .upload-main-v2{
    gap:14px;
  }

  .portal-copy h1,
  .reseller-hero h1,
  .upload-side-card h1{
    font-size:clamp(28px,9vw,38px);
    line-height:1.08;
  }

  .section-title h2,
  .portal-form h2,
  .activation-form h2,
  .reseller-login h2,
  .panel-heading h2{
    font-size:24px;
    line-height:1.15;
  }

  input,
  select,
  textarea,
  button,
  .primary.full,
  .danger.full,
  .secondary.full{
    max-width:100%;
    min-height:46px;
  }

  textarea{
    min-height:118px;
  }

  label{
    margin:12px 0 7px;
  }

  .field-grid-v2,
  .xtream-grid-v2,
  .delete-grid-v2,
  .delete-bottom-v2,
  .playlist-type-grid.v2,
  .activation-grid,
  .helper-options,
  .contact-cards{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .playlist-type-grid.v2 .playlist-type-card{
    min-height:82px!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    column-gap:12px!important;
    padding:14px!important;
    border-radius:16px!important;
  }

  .playlist-type-grid.v2 .playlist-type-card b{
    font-size:15px;
  }

  .playlist-type-grid.v2 .playlist-type-card small{
    font-size:12px;
  }

  .type-icon{
    width:42px;
    height:42px;
    font-size:17px;
  }

  .upload-side-card{
    min-height:auto;
    position:relative;
    top:auto;
  }

  .side-feature{
    grid-template-columns:30px minmax(0,1fr);
    gap:10px;
    margin:16px 0;
  }

  .side-feature>span{
    width:25px;
    height:25px;
  }

  .side-note,
  .warning-note{
    padding:13px 14px;
    font-size:13px;
  }

  .delete-bottom-v2 .danger.full,
  .upload-panel-v2 .primary.full{
    height:auto;
    min-height:48px;
    font-size:15px;
  }

  .premium-hero-card{
    padding:28px 16px 24px!important;
    min-height:auto;
    border-radius:20px;
  }

  .hero-left h1{
    font-size:clamp(34px,11vw,46px);
    letter-spacing:-1px;
    margin-bottom:18px;
  }

  .hero-left p{
    font-size:17px;
    margin-bottom:24px;
  }

  .hero-mini-features{
    gap:12px!important;
    margin-bottom:24px;
  }

  .mini-feature{
    min-height:auto;
    padding:0 0 13px;
  }

  .bottom-feature-bar{
    margin-top:20px!important;
    gap:0;
  }

  .bottom-feature{
    padding:14px 0;
  }

  .portal-title{
    font-size:24px!important;
    letter-spacing:7px!important;
    gap:10px!important;
  }

  .portal-title span{
    width:42px!important;
  }

  .portal-subtitle{
    font-size:11px!important;
    letter-spacing:2.5px!important;
  }
}

@media (max-width: 360px){
  .header{
    padding:9px 10px;
    gap:7px;
  }

  .header .brand{
    min-width:116px!important;
    flex-basis:116px!important;
  }

  .brand-logo-image{
    width:116px!important;
    height:42px!important;
  }

  .language-select{
    width:118px!important;
    min-width:118px!important;
    height:44px!important;
    padding:0 8px!important;
    font-size:11px!important;
  }

  .menu-btn{
    min-width:64px;
    height:44px!important;
    padding:0 10px!important;
    font-size:12px;
  }

  main{
    width:calc(100% - 20px);
  }

  .portal-form,
  .activation-form,
  .reseller-login,
  .upload-side-card,
  .upload-panel-v2,
  .delete-panel-v2,
  .plan-card,
  .legal-box,
  .nas-download-card{
    padding:16px!important;
  }

  input,
  select,
  textarea,
  button,
  .primary.full,
  .danger.full,
  .secondary.full{
    min-height:44px;
  }
}

/* Desktop header fit for 1280-1366px release viewports. */
@media (min-width: 981px) and (max-width: 1400px){
  .header{
    min-height:96px;
    padding:16px 24px;
    gap:12px;
  }

  .header .brand{
    min-width:190px;
    flex:0 0 190px;
  }

  .brand-logo-image{
    width:188px!important;
    height:64px!important;
    object-fit:contain;
  }

  .nav{
    gap:8px;
  }

  .nav-link{
    width:112px;
    height:54px;
    padding:0 10px!important;
    font-size:14px;
    line-height:1.1;
  }

  .language-select{
    width:172px!important;
    min-width:172px!important;
    height:54px!important;
    padding:0 14px!important;
    font-size:14px!important;
  }
}

@media(min-width:981px) and (max-width:1400px){
  .header{gap:10px;padding:12px clamp(14px,2.5vw,34px)}
  .header .brand{min-width:180px;flex:0 1 180px}
  .brand-logo-image{width:180px!important;height:60px!important}
  .nav{gap:5px}
  .nav-link{padding:10px 9px;font-size:13px}
  .language-select{width:150px!important;min-width:150px!important}
  main{width:min(1180px,94vw);padding-top:34px}
  .premium-hero-card{padding:46px 34px 170px}
  .hero-left h1{font-size:clamp(44px,4.6vw,68px)}
  .hero-left p{
    font-size:21px;
    line-height:1.36;
    margin-bottom:28px;
  }
  .hero-mini-features{
    margin-bottom:28px;
  }
  .mini-feature{
    min-height:132px;
    padding:0 18px;
  }
  .hero-start{
    position:relative;
    top:-10px;
  }
  .bottom-feature-bar{left:34px;right:34px}
  .upload-dashboard-v2{max-width:1180px;grid-template-columns:300px minmax(0,1fr);gap:18px}
  .field-grid-v2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xtream-grid-v2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:981px) and (max-height:1080px){
  .header{
    min-height:78px;
    padding:12px clamp(24px,4vw,64px);
    gap:14px;
  }

  .header .brand{
    min-width:150px;
    flex-basis:150px;
  }

  .brand-logo-image{
    width:138px!important;
    height:auto!important;
    max-width:138px;
    max-height:42px;
  }

  .nav{
    gap:8px;
  }

  .nav-link{
    width:116px;
    min-width:116px;
    height:46px;
    padding:0 12px;
    font-size:14px;
    line-height:1.1;
  }

  .language-select{
    width:164px!important;
    min-width:164px!important;
    height:46px!important;
    padding:0 14px;
    font-size:14px;
  }

  main{
    width:min(1480px,94vw);
    padding:20px 0 32px;
  }

  .section-title{
    margin-bottom:18px;
  }

  .section-title h2{
    font-size:clamp(30px,3vw,40px);
    line-height:1.05;
    margin-bottom:8px;
  }

  .section-title.center p{
    max-width:760px;
    font-size:15px;
    line-height:1.4;
  }

  .portal-form,
  .activation-form,
  .reseller-login{
    padding:18px;
    gap:14px;
  }

  .feature-card,
  .legal-box,
  .plan-card,
  .info-note{
    padding:18px;
  }
}

@media (min-width:981px) and (max-height:1080px){
  .activation-grid{
    max-width:760px;
    grid-template-columns:repeat(2,minmax(0,360px));
    gap:16px;
    margin-top:18px;
    margin-bottom:18px;
  }

  .plan-card{
    min-height:0;
    padding:18px;
  }

  .plan-card h3{
    font-size:24px;
    margin-bottom:6px;
  }

  .price{
    font-size:34px;
    margin:12px 0;
  }

  .activation-form{
    max-width:620px;
    margin-top:16px;
  }

  .upload-dashboard-v2{
    grid-template-columns:260px minmax(0,1fr);
    gap:16px;
  }

  .upload-side-card,
  .upload-panel-v2{
    padding:16px!important;
  }

  .upload-side-card{
    min-height:0;
  }

  .upload-panel-v2{
    min-height:0;
  }

  .danger-form{
    padding:16px;
  }

  .portal-form{
    padding:16px;
    gap:10px;
  }

  .reseller-hero{
    min-height:0;
    grid-template-columns:minmax(0,1fr) 380px;
    gap:20px;
  }

  .reseller-hero h1{
    font-size:clamp(34px,3vw,44px);
  }

  .reseller-login{
    padding:14px;
    gap:8px;
  }

  .nas-download-card{
    min-height:0;
    padding:14px!important;
    gap:10px;
  }
}

@media (min-width:981px) and (max-height:1080px){
  #upload .upload-panel-v2 label,
  #contact .portal-form label,
  #reseller .reseller-login label,
  #nasGuide .nas-download-card label{
    font-size:13px;
    margin:8px 0 4px;
  }

  #upload .upload-panel-v2 input,
  #upload .upload-panel-v2 select,
  #contact .portal-form input,
  #contact .portal-form select,
  #reseller .reseller-login input,
  #reseller .reseller-login select,
  #nasGuide .nas-download-card input,
  #nasGuide .nas-download-card select{
    min-height:44px;
    padding:0 12px;
    font-size:14px;
  }

  #upload .upload-panel-v2 textarea,
  #contact .portal-form textarea,
  #reseller .reseller-login textarea{
    min-height:96px;
    padding:10px 12px;
    font-size:14px;
  }

  #upload .field-grid-v2,
  #upload .xtream-grid-v2{
    gap:10px;
    margin-top:6px;
  }

  #upload .playlist-type-grid.v2{
    gap:10px!important;
    margin:6px 0 12px!important;
  }

  #upload .playlist-type-grid.v2 .playlist-type-card{
    min-height:78px!important;
    grid-template-columns:44px 1fr!important;
    column-gap:12px!important;
    padding:12px!important;
  }

  #upload .playlist-type-grid.v2 .playlist-type-card b{
    font-size:15px;
  }

  #upload .playlist-type-grid.v2 .playlist-type-card small,
  #upload .field-help,
  #upload .form-intro,
  #contact .form-intro,
  #reseller .form-intro,
  #nasGuide .nas-download-card > p{
    font-size:12px;
    line-height:1.35;
  }

  #upload .type-icon{
    width:42px;
    height:42px;
    font-size:18px;
  }

  #upload .upload-panel-v2 .primary.full,
  #upload .upload-panel-v2 .primary,
  #contact .portal-form .primary,
  #reseller .reseller-login .primary,
  #nasGuide .nas-download-card .primary,
  #nasGuide .nas-download-card .secondary{
    min-height:44px;
    height:44px;
    padding:0 14px;
    font-size:14px;
  }
}

@media (min-width:981px) and (max-height:1080px){
  #activation .section-title{
    margin-bottom:14px;
  }

  #activation .section-title h2,
  #upload .section-title h2,
  #nasGuide .section-title h2,
  #contact .section-title h2,
  #reseller .section-title h2{
    font-size:clamp(26px,2.55vw,34px);
    line-height:1.04;
    margin-bottom:6px;
  }

  #activation .section-title.center p,
  #upload .section-title.center p,
  #nasGuide .section-title.center p,
  #contact .section-title.center p,
  #reseller .section-title.center p{
    font-size:14px;
    line-height:1.32;
    max-width:680px;
  }

  #activation .activation-grid{
    width:min(760px,100%);
    max-width:760px;
    margin:14px auto;
    justify-content:center;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }

  #activation .plan-card{
    width:100%;
    min-height:0;
    padding:16px;
  }

  #activation .plan-card h3{
    font-size:22px;
    margin-bottom:5px;
  }

  #activation .price{
    font-size:32px;
    margin:10px 0;
  }

  #activation .activation-form{
    max-width:560px;
    margin:12px auto 0;
    padding:16px;
    gap:10px;
  }

  #upload .upload-dashboard-v2{
    grid-template-columns:230px minmax(0,1fr);
    gap:14px;
    max-width:1120px;
  }

  #upload .upload-side-card,
  #upload .upload-panel-v2{
    padding:14px!important;
  }

  #upload .upload-panel-v2{
    min-height:0;
  }

  #upload .playlist-type-grid.v2{
    gap:8px!important;
    margin:4px 0 10px!important;
  }

  #upload .playlist-type-grid.v2 .playlist-type-card{
    min-height:68px!important;
    grid-template-columns:38px 1fr!important;
    column-gap:10px!important;
    padding:10px!important;
  }

  #upload .type-icon{
    width:38px;
    height:38px;
    font-size:17px;
  }

  #nasGuide .portal-layout,
  #contact .portal-layout{
    gap:18px;
  }

  #nasGuide .feature-card,
  #contact .feature-card,
  #reseller .feature-card{
    padding:14px;
  }

  #nasGuide .nas-download-card{
    min-height:0;
    padding:12px!important;
    gap:8px;
  }

  #nasGuide .nas-download-card > p,
  #contact .form-intro,
  #reseller .form-intro{
    font-size:11.5px;
    line-height:1.3;
  }

  #contact .portal-form{
    padding:14px;
    gap:8px;
  }

  #contact .portal-form textarea,
  #reseller .reseller-login textarea{
    min-height:88px;
  }

  #reseller .reseller-hero{
    min-height:0;
    grid-template-columns:minmax(0,1fr) 350px;
    gap:18px;
    padding:20px;
  }

  #reseller .reseller-hero h1{
    font-size:clamp(30px,2.7vw,38px);
    line-height:1.04;
  }

  #reseller .reseller-login{
    padding:12px;
    gap:8px;
  }

  #activation .activation-form label,
  #upload .upload-panel-v2 label,
  #contact .portal-form label,
  #reseller .reseller-login label,
  #nasGuide .nas-download-card label{
    font-size:12px;
    margin:6px 0 3px;
  }

  #activation .activation-form input,
  #activation .activation-form select,
  #upload .upload-panel-v2 input,
  #upload .upload-panel-v2 select,
  #contact .portal-form input,
  #contact .portal-form select,
  #reseller .reseller-login input,
  #reseller .reseller-login select,
  #nasGuide .nas-download-card input,
  #nasGuide .nas-download-card select{
    min-height:40px;
    padding:0 11px;
    font-size:13px;
  }

  #upload .upload-panel-v2 textarea,
  #contact .portal-form textarea,
  #reseller .reseller-login textarea{
    min-height:82px;
    padding:8px 11px;
    font-size:13px;
  }

  #activation .activation-form .primary,
  #upload .upload-panel-v2 .primary,
  #contact .portal-form .primary,
  #reseller .reseller-login .primary,
  #nasGuide .nas-download-card .primary,
  #nasGuide .nas-download-card .secondary{
    min-height:40px;
    height:40px;
    padding:0 12px;
    font-size:13px;
  }

  #upload .field-grid-v2,
  #upload .xtream-grid-v2{
    gap:7px;
    margin-top:4px;
  }

  #upload .playlist-type-grid.v2 .playlist-type-card{
    min-height:60px!important;
    grid-template-columns:34px 1fr!important;
    column-gap:8px!important;
    padding:8px!important;
  }

  #upload .playlist-type-grid.v2 .playlist-type-card b{
    font-size:13px;
  }

  #upload .playlist-type-grid.v2 .playlist-type-card small,
  #upload .field-help,
  #upload .form-intro,
  #contact .form-intro,
  #reseller .form-intro,
  #nasGuide .nas-download-card > p{
    font-size:11px;
    line-height:1.25;
  }

  #upload .type-icon{
    width:34px;
    height:34px;
    font-size:16px;
  }
}

@media (min-width:981px) and (max-height:1080px){
  body:has(#home.page.active) main{
    padding-bottom:0;
  }

  body:has(#home.page.active) footer{
    display:none;
  }

  #home .premium-hero-card{
    min-height:clamp(350px,52vh,420px);
    padding:clamp(14px,1.9vh,22px) clamp(20px,2.3vw,34px) clamp(58px,7.2vh,70px);
    gap:clamp(10px,1.5vw,18px);
  }

  #home .hero-left h1{
    font-size:clamp(28px,3.1vw,39px);
    line-height:.98;
    margin-bottom:6px;
  }

  #home .hero-left p{
    font-size:clamp(12px,.92vw,13px);
    line-height:1.18;
    margin-bottom:8px;
  }

  #home .hero-mini-features{
    margin-bottom:14px;
    max-width:480px;
  }

  #home .mini-feature{
    min-height:64px;
    padding:0 7px;
  }

  #home .feature-icon{
    width:24px;
    height:24px;
    margin-bottom:5px;
    font-size:21px;
  }

  #home .mini-feature strong{
    font-size:clamp(11px,.82vw,12px);
    letter-spacing:2.5px;
    margin-bottom:3px;
  }

  #home .mini-feature small{
    max-width:132px;
    margin:0 auto;
    font-size:10px;
    line-height:1.08;
  }

  #home .hero-start{
    width:150px;
    min-width:150px;
    height:40px !important;
    min-height:40px !important;
    padding:0 14px;
    font-size:12px;
    line-height:1;
    gap:10px;
    position:relative;
    top:auto;
    margin:0;
  }

  #home .hero-right{
    min-height:clamp(165px,21vh,205px);
  }

  #home .portal-name{
    font-size:clamp(60px,5.6vw,82px);
  }

  #home .portal-title{
    margin-top:10px;
    font-size:clamp(18px,1.65vw,23px);
    letter-spacing:8px;
  }

  #home .portal-subtitle{
    margin-top:6px;
    font-size:9px;
    letter-spacing:3.5px;
  }

  #home .bottom-feature-bar{
    bottom:7px;
    min-height:56px;
  }

  #home .bottom-feature{
    padding:7px 9px;
    gap:7px;
  }

  #home .bottom-feature strong{
    font-size:11px;
    letter-spacing:2px;
  }

  #home .bottom-feature small{
    font-size:9.5px;
    line-height:1.08;
  }

  #home .bottom-icon{
    width:25px;
    height:25px;
    font-size:21px;
  }

  #home .premium-legal{
    margin-top:7px;
    padding:7px 12px;
    font-size:10.5px;
    line-height:1.16;
  }
}