/* ECOMAX PREMIUM CARDS • v1.0
   Shared visual-only layer. Scope per page to avoid modifying business/auth logic.
   All pages retain their existing form ids, handlers, map and state classes.
*/
html[data-ecomax-premium]{
  --px-cyan:#55e8ff;--px-ice:#b8efff;--px-blue:#548eff;--px-violet:#a580ff;
  --px-ink:#061020;--px-white:#f4f9ff;--px-muted:#a9bfd5;
  --px-stroke:rgba(112,190,252,.28);
  --px-glow:0 24px 66px rgba(0,0,0,.5),0 0 62px rgba(52,188,249,.10),inset 0 1px rgba(240,249,255,.12);
  --px-surface:linear-gradient(145deg,rgba(16,34,59,.96),rgba(5,13,29,.97) 58%,rgba(24,17,50,.94));
}
html[data-ecomax-premium] :where(button,a,input,select,textarea):focus-visible{
  outline:2px solid #7deaff;outline-offset:3px
}
html[data-ecomax-premium] :where(button,a){-webkit-tap-highlight-color:transparent}
html[data-ecomax-premium] :where(button){touch-action:manipulation}

/* 01 — Customer login + registration */
html[data-ecomax-premium="account"] body{
  background:
    radial-gradient(ellipse 55% 45% at 11% 8%,rgba(15,128,187,.25),transparent 75%),
    radial-gradient(ellipse 48% 42% at 90% 86%,rgba(125,66,215,.24),transparent 75%),
    radial-gradient(ellipse 53% 55% at 50% 110%,rgba(11,88,165,.13),transparent 72%),#040815;
  color:var(--px-white);min-height:100svh
}
html[data-ecomax-premium="account"] body:before{
  background:linear-gradient(rgba(115,178,249,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(115,178,249,.035) 1px,transparent 1px);
  background-size:58px 58px;mask-image:linear-gradient(135deg,#000,transparent 85%)
}
html[data-ecomax-premium="account"] .wrap{width:min(100%,530px)}
html[data-ecomax-premium="account"] .wrap>.card{
  position:relative;isolation:isolate;overflow:hidden;padding:clamp(23px,4.5vw,42px);
  border-radius:28px;border:1px solid rgba(117,194,252,.4);
  background:var(--px-surface);
  box-shadow:var(--px-glow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)
}
html[data-ecomax-premium="account"] .wrap>.card:before{
  content:"";position:absolute;inset:0 0 auto;height:3px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--px-cyan),var(--px-violet),transparent);
  box-shadow:0 0 22px rgba(79,222,255,.5)
}
html[data-ecomax-premium="account"] .wrap>.card:after{
  content:"";position:absolute;z-index:-1;pointer-events:none;width:290px;height:290px;
  right:-145px;top:-135px;border-radius:50%;background:radial-gradient(circle,rgba(94,146,246,.16),transparent 70%)
}
html[data-ecomax-premium="account"] .brand{font-size:26px;letter-spacing:.18em;color:#9af7ff;text-shadow:0 0 28px rgba(46,215,255,.28)}
html[data-ecomax-premium="account"] .label{
  display:inline-flex;align-items:center;gap:8px;margin-top:21px;
  padding:7px 11px;border-radius:999px;
  border:1px solid rgba(111,210,255,.27);background:rgba(37,117,164,.12);
  color:#a0e9ff;letter-spacing:.12em;font-size:9px
}
html[data-ecomax-premium="account"] h1{margin:17px 0 7px;font-size:clamp(28px,5vw,37px);line-height:1.12;letter-spacing:-.03em}
html[data-ecomax-premium="account"] .sub{color:#afc3d9;line-height:1.8;font-size:13px}
html[data-ecomax-premium="account"] .field{margin:17px 0}
html[data-ecomax-premium="account"] .field label{font-size:12px;font-weight:700;color:#d7e8fa}
html[data-ecomax-premium="account"] .field input{
  height:56px;border-radius:13px;border:1px solid rgba(113,174,228,.27);
  background:rgba(2,10,24,.84);color:#f4f9ff;font-size:14px;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.3);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease
}
html[data-ecomax-premium="account"] .field input:hover{border-color:rgba(110,210,252,.48)}
html[data-ecomax-premium="account"] .field input:focus{
  outline:none;border-color:var(--px-cyan);background:#091c30;
  box-shadow:0 0 0 3px rgba(61,207,255,.12),0 0 27px rgba(56,190,250,.13)
}
html[data-ecomax-premium="account"] .btn{
  min-height:54px;border:0;border-radius:13px;color:#061326;font-weight:900;
  background:linear-gradient(106deg,#68f4ff,#72b5ff 53%,#bb93ff);
  box-shadow:0 14px 32px rgba(37,152,232,.24),inset 0 1px rgba(255,255,255,.45);
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease
}
html[data-ecomax-premium="account"] .btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 18px 42px rgba(37,152,232,.3)}
html[data-ecomax-premium="account"] .foot{border-top:1px solid rgba(142,193,249,.14);padding-top:18px;margin-top:22px;color:#b1c2d7}
html[data-ecomax-premium="account"] .foot a:not(.back){color:#7ee7ff;font-weight:800}
html[data-ecomax-premium="account"] .row a{color:#87dffb}
html[data-ecomax-premium="account"] .terms{color:#c0d0df}

/* 02 — Courier login + registration cards */
html[data-ecomax-premium="courier-gate"] body{
  background:
    radial-gradient(ellipse 60% 60% at 8% 5%,rgba(9,103,164,.26),transparent 73%),
    radial-gradient(ellipse 45% 52% at 98% 81%,rgba(123,63,215,.23),transparent 73%),#030816
}
html[data-ecomax-premium="courier-gate"] .card{
  border:1px solid rgba(110,190,253,.4)!important;
  background:var(--px-surface)!important;
  box-shadow:var(--px-glow)!important;
  backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
  border-radius:28px!important
}
html[data-ecomax-premium="courier-gate"] .card:before{
  background:linear-gradient(90deg,transparent,#65eeff,#a580ff,transparent)!important;
  box-shadow:0 0 21px rgba(76,218,255,.4)!important
}
html[data-ecomax-premium="courier-gate"] .logo{
  color:#a5f6ff!important;text-shadow:0 0 28px rgba(63,203,250,.34)!important
}
html[data-ecomax-premium="courier-gate"] .line{color:#9ebdd5!important}
html[data-ecomax-premium="courier-gate"] .card h1{color:#f2f8ff;letter-spacing:-.025em}
html[data-ecomax-premium="courier-gate"] .desc{color:#adc5da!important}
html[data-ecomax-premium="courier-gate"] .icon{
  border-color:rgba(86,219,255,.48)!important;background:radial-gradient(circle at 30% 15%,rgba(44,179,243,.29),#081428 80%)!important;
  color:#9af1ff;box-shadow:0 0 34px rgba(65,205,246,.18),inset 0 1px rgba(255,255,255,.18)!important
}
html[data-ecomax-premium="courier-gate"] form input:not([type=checkbox]){
  border-color:rgba(114,189,250,.29)!important;
  background:rgba(2,10,23,.84)!important;border-radius:13px!important;color:#f5fbff!important
}
html[data-ecomax-premium="courier-gate"] form input:not([type=checkbox]):focus{
  border-color:#76e9ff!important;
  box-shadow:0 0 0 3px rgba(79,204,248,.12),0 0 24px rgba(55,189,248,.15)!important;
  outline:none
}
html[data-ecomax-premium="courier-gate"] form>button[type=submit]{
  border:0!important;border-radius:13px!important;
  background:linear-gradient(105deg,#67f2ff,#6baeff 55%,#b790ff)!important;color:#061527!important;
  box-shadow:0 12px 34px rgba(46,162,244,.24)!important
}
html[data-ecomax-premium="courier-gate"] form>button[type=submit]:hover:not(:disabled){
  filter:brightness(1.08);box-shadow:0 15px 38px rgba(46,162,244,.29)!important
}
html[data-ecomax-premium="courier-gate"] .check{color:#c1d3e8}
html[data-ecomax-premium="courier-gate"] :where(.links,.reset-row,.join){color:#a9c3dd}
html[data-ecomax-premium="courier-gate"] :where(.links a,.join a,.back):hover{color:#94ecff}
html[data-ecomax-premium="courier-gate"] .premium-screen-badge{
  width:max-content;max-width:100%;margin:0 auto 17px;padding:7px 11px;
  border:1px solid rgba(112,192,255,.32);border-radius:999px;
  background:rgba(38,115,169,.12);color:#98eaff;font:800 9px/1.3 system-ui,Arial,sans-serif;
  letter-spacing:.15em;text-align:center
}
html[data-ecomax-premium="courier-gate"] .ecomax-traffic{opacity:.4}

/* 03 — Admin login, stats, content cards and navigation */
html[data-ecomax-premium="admin"] body{
  background:radial-gradient(ellipse 48% 50% at 18% 0%,rgba(12,100,150,.22),transparent 70%),
  radial-gradient(ellipse 38% 46% at 98% 82%,rgba(99,54,169,.19),transparent 74%),#030a16
}
html[data-ecomax-premium="admin"] .login-box{
  position:relative;isolation:isolate;overflow:hidden;
  width:min(465px,100%);padding:clamp(23px,4vw,37px);
  border-radius:28px;background:var(--px-surface);
  border:1px solid rgba(113,198,255,.41);
  box-shadow:var(--px-glow);backdrop-filter:blur(24px)
}
html[data-ecomax-premium="admin"] .login-box::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,transparent,#66f0ff,#ae83ff,transparent);
  box-shadow:0 0 24px rgba(73,214,255,.35)
}
html[data-ecomax-premium="admin"] .premium-screen-badge{
  width:max-content;max-width:100%;margin:0 auto 18px;padding:7px 12px;border-radius:999px;
  border:1px solid rgba(115,191,251,.34);background:rgba(40,111,158,.13);
  color:#98e6ff;text-align:center;font-size:9px;letter-spacing:.14em;font-weight:850
}
html[data-ecomax-premium="admin"] .login-robot{
  border-radius:22px;background:radial-gradient(circle at 30% 20%,rgba(46,173,238,.28),rgba(4,16,31,.85));
  box-shadow:0 0 35px rgba(51,190,251,.20),inset 0 1px rgba(255,255,255,.17)
}
html[data-ecomax-premium="admin"] .login-title{color:#a4f5ff;text-shadow:0 0 27px rgba(55,214,249,.37)}
html[data-ecomax-premium="admin"] .login-box .field{
  border:1px solid rgba(110,176,232,.3);border-radius:13px;background:rgba(3,12,26,.88);
  min-height:52px;transition:border-color .2s,box-shadow .2s
}
html[data-ecomax-premium="admin"] .login-box .field:focus{
  outline:none;border-color:#66e5ff;box-shadow:0 0 0 3px rgba(83,205,247,.12)
}
html[data-ecomax-premium="admin"] .login-box button.primary{
  border-radius:13px;background:linear-gradient(110deg,#69f1ff,#71b6ff,#ae8bff);
  color:#061325;font-weight:850;box-shadow:0 12px 35px rgba(40,159,244,.22)
}
html[data-ecomax-premium="admin"] #adminApp .sidebar{
  background:linear-gradient(180deg,rgba(6,20,38,.98),rgba(3,10,25,.98));
  border-right:1px solid rgba(111,181,242,.23);
  box-shadow:6px 0 37px rgba(0,0,0,.14)
}
html[data-ecomax-premium="admin"] #adminApp .brand-title{
  color:#9aefff;text-shadow:0 0 25px rgba(47,193,246,.25)
}
html[data-ecomax-premium="admin"] #adminApp .nav button{
  border-radius:12px;transition:background .2s,border-color .2s,box-shadow .2s
}
html[data-ecomax-premium="admin"] #adminApp .nav button:hover,
html[data-ecomax-premium="admin"] #adminApp .nav button.active{
  background:linear-gradient(100deg,rgba(40,149,207,.21),rgba(94,64,182,.14));
  border-color:rgba(79,221,255,.4);box-shadow:inset 3px 0 #56e6ff,0 0 22px rgba(59,177,243,.07)
}
html[data-ecomax-premium="admin"] #adminApp .card,
html[data-ecomax-premium="admin"] #adminApp .table-card,
html[data-ecomax-premium="admin"] #adminApp .modal,
html[data-ecomax-premium="admin"] #adminApp .detail{
  border:1px solid rgba(110,184,248,.27);
  background:linear-gradient(145deg,rgba(14,30,51,.96),rgba(5,13,29,.95) 60%,rgba(17,16,42,.93));
  box-shadow:0 16px 45px rgba(0,0,0,.23),inset 0 1px rgba(241,250,255,.09);
  backdrop-filter:blur(14px)
}
html[data-ecomax-premium="admin"] #adminApp .card{border-radius:20px}
html[data-ecomax-premium="admin"] #adminApp .stat-card{
  min-height:152px;transition:transform .2s,border-color .2s,box-shadow .2s
}
html[data-ecomax-premium="admin"] #adminApp .stat-card:hover{
  transform:translateY(-3px);border-color:rgba(104,222,255,.49);
  box-shadow:0 21px 48px rgba(0,0,0,.33),0 0 29px rgba(44,178,252,.10)
}
html[data-ecomax-premium="admin"] #adminApp .stat-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#58ecff,#5e99ff,transparent)
}
html[data-ecomax-premium="admin"] #adminApp .stat-card:nth-child(2)::before{
  background:linear-gradient(90deg,#c88bff,#8e6fff,transparent)
}
html[data-ecomax-premium="admin"] #adminApp .stat-card:nth-child(3)::before{
  background:linear-gradient(90deg,#64f1c5,#45b6ff,transparent)
}
html[data-ecomax-premium="admin"] #adminApp .stat-card:nth-child(4)::before{
  background:linear-gradient(90deg,#ffd583,#ff9b7a,transparent)
}
html[data-ecomax-premium="admin"] #adminApp .stat-label{color:#aec8de;font-weight:650}
html[data-ecomax-premium="admin"] #adminApp .stat-value{color:#e9faff;letter-spacing:-.035em;text-shadow:0 0 24px rgba(67,221,255,.12)}
html[data-ecomax-premium="admin"] #adminApp .stat-extra{color:#88dff3}
html[data-ecomax-premium="admin"] #adminApp .table-card{border-radius:18px;overflow:hidden}
html[data-ecomax-premium="admin"] #adminApp thead th{color:#b8d0e3;background:rgba(24,70,105,.23)}
html[data-ecomax-premium="admin"] #adminApp tbody tr:hover td{background:rgba(45,148,200,.11)}
html[data-ecomax-premium="admin"] #adminApp :where(input.field,select.field,textarea.field){
  background:rgba(4,14,29,.89);border:1px solid rgba(112,181,231,.3);
  border-radius:11px;color:#ecf8ff
}
html[data-ecomax-premium="admin"] #adminApp :where(.top-btn,.primary):hover{filter:brightness(1.08)}

/* 04 — Courier command dashboard */
html[data-ecomax-premium="line-console"] body{
  background:radial-gradient(ellipse 48% 39% at 20% 0%,rgba(11,105,161,.22),transparent 73%),
  radial-gradient(ellipse 44% 45% at 98% 70%,rgba(108,59,176,.18),transparent 75%),#030916
}
html[data-ecomax-premium="line-console"] header{
  border-bottom:1px solid rgba(117,197,244,.24);background:rgba(4,12,27,.9);
  box-shadow:0 8px 35px rgba(0,0,0,.15)
}
html[data-ecomax-premium="line-console"] :where(.stat,.step,.order,.cpanel,.tool,.line-navigation,.nav-stat,.modal){
  border:1px solid rgba(106,186,249,.28);
  background:linear-gradient(145deg,rgba(14,32,54,.97),rgba(4,14,29,.96) 62%,rgba(21,19,48,.93));
  box-shadow:0 16px 40px rgba(0,0,0,.22),inset 0 1px rgba(244,251,255,.10);
  backdrop-filter:blur(14px)
}
html[data-ecomax-premium="line-console"] :where(.stat,.step,.order,.cpanel,.line-navigation,.modal){border-radius:19px}
html[data-ecomax-premium="line-console"] :where(.stat,.order,.cpanel){position:relative;overflow:hidden}
html[data-ecomax-premium="line-console"] :where(.stat,.order,.cpanel)::before{
  content:"";position:absolute;left:0;top:0;width:55%;height:2px;
  background:linear-gradient(90deg,#57eaff,rgba(164,130,255,.75),transparent)
}
html[data-ecomax-premium="line-console"] .stat{
  min-height:118px;transition:transform .2s,border-color .2s,box-shadow .2s
}
html[data-ecomax-premium="line-console"] .stat:hover{
  transform:translateY(-3px);border-color:rgba(97,229,255,.58);
  box-shadow:0 19px 39px rgba(0,0,0,.33),0 0 29px rgba(57,169,255,.09)
}
html[data-ecomax-premium="line-console"] .stat:nth-child(2)::before{
  background:linear-gradient(90deg,#b991ff,#8878ff,transparent)
}
html[data-ecomax-premium="line-console"] .stat:nth-child(3)::before{
  background:linear-gradient(90deg,#66bdff,#72f1ff,transparent)
}
html[data-ecomax-premium="line-console"] .stat:nth-child(4)::before{
  background:linear-gradient(90deg,#57f0c8,#5abaff,transparent)
}
html[data-ecomax-premium="line-console"] .stat small{color:#b2c7db;font-size:11px}
html[data-ecomax-premium="line-console"] .stat b{font-size:clamp(27px,3vw,36px);text-shadow:0 0 22px rgba(57,199,250,.14)}
html[data-ecomax-premium="line-console"] .step.active{
  border-color:rgba(75,226,255,.65);box-shadow:0 0 20px rgba(41,189,249,.11),inset 0 0 21px rgba(41,189,249,.08)
}
html[data-ecomax-premium="line-console"] .step b{color:#d9f1ff}
html[data-ecomax-premium="line-console"] .order:hover{border-color:rgba(99,221,255,.54);box-shadow:0 17px 38px rgba(0,0,0,.32)}
html[data-ecomax-premium="line-console"] .tool{
  border-radius:14px;transition:transform .2s,border-color .2s,box-shadow .2s
}
html[data-ecomax-premium="line-console"] .tool:hover{
  transform:translateY(-2px);border-color:#64dfff;box-shadow:0 12px 25px rgba(0,0,0,.22),0 0 18px rgba(52,187,247,.10)
}
html[data-ecomax-premium="line-console"] .toolbar :where(input,select){
  border-color:rgba(122,189,244,.33);border-radius:12px;
  background:#071527;color:#f2faff
}
html[data-ecomax-premium="line-console"] .toolbar :where(input,select):focus{
  outline:none;border-color:#68e4ff;box-shadow:0 0 0 3px rgba(67,192,247,.14)
}
html[data-ecomax-premium="line-console"] .line-navigation.active{box-shadow:0 18px 52px rgba(0,0,0,.35),0 0 38px rgba(53,179,244,.10)}
html[data-ecomax-premium="line-console"] :where(.navbtn,.nav-actions button,.tool,button):focus-visible{
  outline:2px solid #72efff;outline-offset:3px
}
@media(max-width:600px){
  html[data-ecomax-premium="account"] body{padding:12px;overflow-x:hidden}
  html[data-ecomax-premium="account"] .wrap>.card{border-radius:22px;padding:24px 20px}
  html[data-ecomax-premium="courier-gate"] body{overflow-x:hidden;overflow-y:auto}
  html[data-ecomax-premium="courier-gate"] .card{border-radius:22px!important}
  html[data-ecomax-premium="courier-gate"] .premium-screen-badge{margin-bottom:10px;font-size:8px}
  html[data-ecomax-premium="admin"] .login-box{border-radius:22px;padding:24px 20px}
  html[data-ecomax-premium="line-console"] .stat{min-height:102px}
}
@media(prefers-reduced-motion:reduce){
  html[data-ecomax-premium] *,html[data-ecomax-premium] *::before,html[data-ecomax-premium] *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
  html[data-ecomax-premium="admin"] #adminApp .stat-card:hover,
  html[data-ecomax-premium="line-console"] :where(.stat,.tool):hover{transform:none}
}

/* Courier registration: override legacy 5D small-screen compression for readability. */
@media(max-width:600px){
  html[data-ecomax-variant="courier-register"] body{
    padding:20px 12px 45px!important;overflow-x:hidden!important;overflow-y:auto!important
  }
  html[data-ecomax-variant="courier-register"] .card{
    width:100%!important;max-width:540px!important;
    padding:26px 20px!important;margin:0 auto 22px!important;border-radius:23px!important
  }
  html[data-ecomax-variant="courier-register"] .logo{font-size:24px!important;letter-spacing:4px!important}
  html[data-ecomax-variant="courier-register"] .line{font-size:9px!important;letter-spacing:2px!important}
  html[data-ecomax-variant="courier-register"] .icon{
    width:62px!important;height:62px!important;border-radius:19px!important;
    font-size:27px!important;margin:17px auto 12px!important
  }
  html[data-ecomax-variant="courier-register"] h1{font-size:25px!important;margin:0 0 8px!important}
  html[data-ecomax-variant="courier-register"] .desc{
    font-size:12px!important;line-height:1.7!important;margin-bottom:18px!important
  }
  html[data-ecomax-variant="courier-register"] form .grid{
    grid-template-columns:minmax(0,1fr)!important;gap:3px!important
  }
  html[data-ecomax-variant="courier-register"] form .grid .full{grid-column:auto!important}
  html[data-ecomax-variant="courier-register"] form label{
    font-size:11px!important;margin:11px 0 5px!important;color:#d7eaff!important
  }
  html[data-ecomax-variant="courier-register"] form input:not([type=checkbox]){
    min-height:49px!important;font-size:14px!important;border-radius:12px!important
  }
  html[data-ecomax-variant="courier-register"] .check{
    align-items:flex-start!important;gap:10px!important;margin-top:17px!important
  }
  html[data-ecomax-variant="courier-register"] .check span{font-size:11px!important;line-height:1.6!important}
  html[data-ecomax-variant="courier-register"] form>button[type=submit]{
    min-height:52px!important;margin-top:19px!important;font-size:13px!important
  }
  html[data-ecomax-variant="courier-register"] .links{
    font-size:11px!important;line-height:1.8!important;margin-top:17px!important
  }
  html[data-ecomax-variant="courier-register"] .hint{font-size:8px!important;margin-top:14px!important}
  html[data-ecomax-variant="courier-register"] :where(.error,.ok){
    font-size:11px!important;line-height:1.55!important;padding:12px!important
  }
}