/* Beauty Club Pro — Affiliate Auth V2
   Shared visual layer for the real affiliate register/login flows.
   Authentication and registration behavior remain in portal.js. */

body.auth-v2{
  --auth-bg:#0e0d22;
  --auth-surface:#171533;
  --auth-surface-2:#1d193f;
  --auth-text:#f8fafc;
  --auth-muted:#a7b0c3;
  --auth-dim:#7d879b;
  --auth-pink:#f43f8f;
  --auth-pink-2:#ec4899;
  --auth-purple:#9b5cf6;
  --auth-cyan:#22d3ee;
  --auth-green:#34d399;
  width:100%;
  max-width:100vw;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--auth-text);
  background:
    radial-gradient(54rem 30rem at 3% 5%,rgba(244,63,143,.22),transparent 66%),
    radial-gradient(46rem 30rem at 98% 16%,rgba(34,211,238,.17),transparent 67%),
    radial-gradient(48rem 34rem at 52% 100%,rgba(155,92,246,.18),transparent 70%),
    linear-gradient(180deg,#111028 0%,#0d0c20 52%,#090818 100%);
  background-attachment:fixed;
}

@supports (overflow:clip){body.auth-v2{overflow-x:clip}}

body.auth-v2::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.013) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.38),transparent 82%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.38),transparent 82%);
}

body.auth-v2 .auth-wrap{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  max-width:100vw;
  min-height:100vh;
  padding:38px 16px 54px;
  overflow:hidden;
}

body.auth-v2 .auth-box{
  width:min(720px,100%);
  min-width:0;
  margin:0 auto;
}

body.auth-v2.login-v2 .auth-box{width:min(650px,100%)}

body.auth-v2 .auth-brand{
  justify-content:center;
  gap:14px;
  width:max-content;
  max-width:100%;
  margin:0 auto 22px;
}

body.auth-v2 .brand-logo{
  width:66px;
  height:66px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    0 0 0 2px rgba(244,63,143,.30),
    0 0 0 4px rgba(34,211,238,.16),
    0 16px 42px rgba(0,0,0,.42),
    0 0 34px rgba(155,92,246,.14);
}

body.auth-v2 .brand-title{
  color:#fff;
  font-size:22px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:.035em;
  white-space:nowrap;
}

body.auth-v2 .auth-brand-pro{
  background:linear-gradient(90deg,#f472b6,#c084fc,#67e8f9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

body.auth-v2 .brand-sub{
  margin-top:7px;
  color:#f472b6;
  font-size:12px;
  font-weight:850;
  letter-spacing:.15em;
}

body.auth-v2 .auth-note{
  position:relative;
  margin:0 auto 20px;
  padding:15px 17px;
  border:1px solid rgba(155,92,246,.25);
  border-radius:18px;
  color:#c4cbd9;
  font-size:13px;
  line-height:1.55;
  background:linear-gradient(135deg,rgba(244,63,143,.07),rgba(155,92,246,.08),rgba(34,211,238,.055));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 45px rgba(0,0,0,.16);
  backdrop-filter:blur(18px);
}

body.auth-v2 .auth-note strong{color:#fff}
body.auth-v2 .auth-note.auth-note-active::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:9px;
  border-radius:50%;
  vertical-align:middle;
  background:var(--auth-green);
  box-shadow:0 0 16px rgba(52,211,153,.72);
}

body.auth-v2 .auth-card{
  position:relative;
  overflow:hidden;
  padding:34px;
  border:1px solid transparent;
  border-radius:30px;
  background:
    linear-gradient(rgba(16,14,37,.96),rgba(16,14,37,.96)) padding-box,
    linear-gradient(135deg,rgba(244,63,143,.88),rgba(155,92,246,.72) 50%,rgba(34,211,238,.80)) border-box;
  box-shadow:
    0 30px 80px rgba(0,0,0,.40),
    0 0 40px rgba(155,92,246,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(28px);
}

body.auth-v2 .auth-card::before,
body.auth-v2 .auth-card::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

body.auth-v2 .auth-card::before{
  width:350px;
  height:350px;
  left:-210px;
  top:-180px;
  background:rgba(244,63,143,.19);
  filter:blur(90px);
}

body.auth-v2 .auth-card::after{
  width:390px;
  height:390px;
  right:-245px;
  bottom:-220px;
  background:rgba(34,211,238,.15);
  filter:blur(100px);
}

body.auth-v2 .auth-card-content{position:relative;z-index:1;min-width:0}

body.auth-v2 .auth-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  margin:0 auto 12px;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid rgba(244,63,143,.28);
  background:rgba(244,63,143,.08);
  color:#f9a8d4;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
  text-align:center;
}

body.auth-v2 .auth-card h1{
  margin:0;
  text-align:center;
  font-size:clamp(32px,7vw,48px);
  line-height:1.02;
  letter-spacing:-.045em;
  color:#fff;
}

body.auth-v2 .auth-gradient-word{
  background:linear-gradient(90deg,#f472b6,#c084fc 55%,#67e8f9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

body.auth-v2 .auth-intro{
  max-width:560px;
  margin:14px auto 0;
  color:#b5bdcf;
  font-size:14px;
  line-height:1.7;
  text-align:center;
}

body.auth-v2 .auth-divider{
  width:min(360px,80%);
  height:1px;
  margin:22px auto 28px;
  background:linear-gradient(90deg,transparent,rgba(244,63,143,.48),rgba(155,92,246,.78),rgba(34,211,238,.5),transparent);
  box-shadow:0 0 14px rgba(155,92,246,.50);
}

body.auth-v2 .field{margin-bottom:18px}
body.auth-v2 .field label{
  display:block;
  margin:0 0 8px 4px;
  color:#f0a6d0;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}

body.auth-v2 .auth-input-shell{
  position:relative;
  display:flex;
  align-items:center;
  min-width:0;
}

body.auth-v2 .auth-field-icon{
  position:absolute;
  z-index:2;
  left:15px;
  width:20px;
  height:20px;
  color:#ec4899;
  pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(236,72,153,.20));
}

body.auth-v2 .input{
  width:100%;
  min-width:0;
  min-height:58px;
  padding:15px 16px 15px 48px;
  border-radius:15px;
  border:1px solid rgba(148,163,184,.20);
  background:linear-gradient(180deg,rgba(30,27,61,.82),rgba(24,21,49,.90));
  color:#fff;
  font-size:15px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.10);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

body.auth-v2 .input:hover{border-color:rgba(244,63,143,.32)}
body.auth-v2 .input:focus{
  border-color:rgba(236,72,153,.72);
  background:linear-gradient(180deg,rgba(34,30,70,.94),rgba(26,23,55,.95));
  box-shadow:0 0 0 3px rgba(236,72,153,.10),0 0 24px rgba(155,92,246,.12),inset 0 1px 0 rgba(255,255,255,.05);
}
body.auth-v2 .input::placeholder{color:#777f94}

body.auth-v2 .statusline{
  margin:8px 3px 0;
  color:#99a3b7;
  font-size:11px;
  line-height:1.5;
}

body.auth-v2 .checkline{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:8px 0 22px;
  color:#c3cad8;
  font-size:12px;
  line-height:1.6;
}

body.auth-v2 .checkline input{
  appearance:none;
  width:22px;
  height:22px;
  flex:0 0 22px;
  margin:1px 0 0;
  border-radius:6px;
  border:2px solid rgba(236,72,153,.68);
  background:rgba(20,18,46,.90);
  box-shadow:0 0 16px rgba(236,72,153,.08);
  display:grid;
  place-items:center;
  cursor:pointer;
}
body.auth-v2 .checkline input:checked{
  background:linear-gradient(135deg,#ec4899,#9b5cf6);
  border-color:#f472b6;
}
body.auth-v2 .checkline input:checked::after{
  content:"✓";
  color:#fff;
  font-size:14px;
  font-weight:900;
  line-height:1;
}

body.auth-v2 .form-message{border-radius:14px;margin:0 0 14px}

body.auth-v2 .auth-submit{
  width:100%;
  min-height:58px;
  border-radius:15px;
  color:#fff;
  font-size:14px;
  font-weight:950;
  letter-spacing:.045em;
  background:linear-gradient(125deg,#f43f8f 0%,#d946ef 45%,#8b5cf6 76%,#6d28d9 100%);
  background-size:180% 180%;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 34px rgba(236,72,153,.27),0 7px 22px rgba(155,92,246,.20);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
body.auth-v2 .auth-submit::after{content:"→";margin-left:10px;font-size:20px;line-height:1}
body.auth-v2 .auth-submit:hover{
  transform:translateY(-2px);
  filter:saturate(1.08) brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 18px 42px rgba(236,72,153,.34),0 8px 26px rgba(34,211,238,.12);
}
body.auth-v2 .auth-submit:disabled{transform:none;filter:none;opacity:.56;box-shadow:none}

body.auth-v2 .auth-foot{
  margin-top:18px;
  text-align:center;
  color:#9fa8ba;
  font-size:12px;
}
body.auth-v2 .auth-foot a{color:#f472b6;font-weight:900}
body.auth-v2 .auth-foot a:hover{color:#c084fc}

body.auth-v2 .login-session-note{margin-top:20px}

@media(max-width:700px){
  body.auth-v2 .auth-wrap{padding:28px 12px 38px}
  body.auth-v2 .auth-brand{margin-bottom:18px}
  body.auth-v2 .brand-logo{width:58px;height:58px;border-radius:17px}
  body.auth-v2 .brand-title{font-size:18px}
  body.auth-v2 .brand-sub{font-size:10px}
  body.auth-v2 .auth-card{padding:25px 18px;border-radius:25px}
  body.auth-v2 .auth-card h1{font-size:38px}
  body.auth-v2 .auth-intro{font-size:13px}
  body.auth-v2 .auth-divider{margin:19px auto 24px}
  body.auth-v2 .input{min-height:56px;font-size:14px}
  body.auth-v2 .auth-submit{min-height:56px}
}

@media(max-width:420px){
  body.auth-v2 .auth-wrap{padding-left:10px;padding-right:10px}
  body.auth-v2 .auth-card{padding:22px 15px}
  body.auth-v2 .brand-title{font-size:16px}
  body.auth-v2 .brand-logo{width:52px;height:52px}
  body.auth-v2 .auth-card h1{font-size:34px}
  body.auth-v2 .auth-kicker{font-size:9px;letter-spacing:.10em}
}

@media(prefers-reduced-motion:reduce){
  body.auth-v2 *,body.auth-v2 *::before,body.auth-v2 *::after{
    transition:none!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}