/* ============================================================
   DGTechQA — Login / Join (register) modern animated form
   Phone skin only (html[data-skin="wa"]). Same IDs / JS as before.
   Loaded by login.html + register.html.
   ============================================================ */
@keyframes amRise{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes amField{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes amFlow{to{background-position:100% 0}}
@keyframes amSweep{0%,55%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes amFloat{50%{transform:translate(10px,12px) scale(1.1)}}
@keyframes amRing{from{opacity:.7;transform:scale(.85)}to{opacity:0;transform:scale(1.8)}}
@keyframes amBob{50%{transform:translateY(-4px)}}
@keyframes amShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes amPop{from{opacity:0;transform:scale(.9) translateY(14px)}to{opacity:1;transform:none}}
@keyframes amBlob{50%{transform:translate(-18px,22px) scale(1.15)}}
@keyframes amNudge{50%{transform:translateX(4px)}}
@keyframes amFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes amRip{to{transform:scale(3);opacity:0}}

/* ───────── page backdrop ───────── */
html[data-skin="wa"] body .form-shell{position:relative;overflow:hidden;padding:22px 14px 30px!important}
html[data-skin="wa"] body .form-shell::before,html[data-skin="wa"] body .form-shell::after{
  content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(8px)}
html[data-skin="wa"] body .form-shell::before{width:230px;height:230px;right:-90px;top:-50px;
  background:radial-gradient(circle,rgba(37,211,102,.30),transparent 70%);animation:amBlob 9s ease-in-out infinite}
html[data-skin="wa"] body .form-shell::after{width:260px;height:260px;left:-110px;bottom:-60px;
  background:radial-gradient(circle,rgba(83,189,235,.26),transparent 70%);animation:amBlob 11s ease-in-out -3s infinite}

/* ───────── card ───────── */
html[data-skin="wa"] body .form-shell .form-container{position:relative;z-index:1;max-width:440px;border-radius:28px!important;
  box-shadow:0 2px 4px rgba(11,20,26,.08),0 26px 50px -22px rgba(0,128,105,.55)!important;animation:amRise .7s cubic-bezier(.22,1,.36,1) both}

/* banner (reuses the old terminal header) */
html[data-skin="wa"] body .form-shell .form-header{display:flex!important;align-items:center;justify-content:center;position:relative;overflow:hidden;
  height:112px;padding:0!important;border:0!important;
  background:linear-gradient(120deg,#064e46,#0b8f74,#25d366,#0b8f74,#064e46)!important;background-size:300% 100%!important;
  animation:amFlow 9s ease-in-out infinite alternate}
html[data-skin="wa"] body .form-shell .form-header>*{display:none!important}
html[data-skin="wa"] body .form-shell .form-header::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.25),transparent);animation:amSweep 5s ease-in-out 1s infinite;pointer-events:none}
html[data-skin="wa"] body .form-shell .form-header::before{ /* icon badge */
  content:"\f023";font-family:"Font Awesome 6 Free"!important;font-weight:900;font-size:24px;color:#fff;
  position:relative;z-index:2;width:64px;height:64px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 12px 24px -10px rgba(0,0,0,.5);animation:amBob 3.6s ease-in-out infinite}
html[data-auth="register"] body .form-shell .form-header::before{content:"\f234"}
html[data-skin="wa"] body .form-shell .form-container .am-orb1,
html[data-skin="wa"] body .form-shell .form-container .am-orb2{position:absolute;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none;z-index:1}
.form-header .am-orb1{width:90px;height:90px;right:-22px;top:-34px;animation:amFloat 6s ease-in-out infinite}
.form-header .am-orb2{width:56px;height:56px;left:-12px;bottom:-24px;animation:amFloat 7s ease-in-out -2s infinite}
/* desktop: these decorations belong to the phone banner only - hide them so the header stays a slim bar */
html:not([data-skin="wa"]) .form-header .am-orb1,html:not([data-skin="wa"]) .form-header .am-orb2,html:not([data-skin="wa"]) .form-header .am-ring{display:none!important}
html[data-skin="wa"] body .form-shell .form-header>.am-orb1,html[data-skin="wa"] body .form-shell .form-header>.am-orb2{display:block!important}
html[data-skin="wa"] body .form-shell .form-header .am-ring{display:block!important;position:absolute;z-index:1;width:64px;height:64px;border-radius:22px;
  border:2px solid rgba(255,255,255,.7);animation:amRing 2.4s ease-out infinite}

/* ───────── headings ───────── */
html[data-skin="wa"] body .form-shell .form-body{padding:20px 18px 22px!important}
html[data-skin="wa"] body .form-shell .form-body h2{font-size:21px!important;font-weight:800!important;text-align:center;letter-spacing:-.2px;margin:0 0 4px;
  background:linear-gradient(90deg,#075E54,#128C7E,#25d366,#128C7E,#075E54);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent!important;color:transparent!important;animation:amFlow 6s linear infinite}
html[data-skin="wa"] body .form-shell .form-sub{font-size:12.5px!important;text-align:center;margin-bottom:18px!important}
html[data-skin="wa"] body .form-shell .form-body>h2,html[data-skin="wa"] body .form-shell .form-body>.form-sub,html[data-skin="wa"] body .form-shell .reg-steps{animation:amField .55s cubic-bezier(.22,1,.36,1) .25s both}
html[data-skin="wa"] body .form-shell .form-sub{animation-delay:.32s}

/* ───────── fields ───────── */
html[data-skin="wa"] body .form-shell .field{animation:amField .55s cubic-bezier(.22,1,.36,1) both;position:relative}
html[data-skin="wa"] body .form-shell .field:nth-of-type(1){animation-delay:.4s}
html[data-skin="wa"] body .form-shell .field:nth-of-type(2){animation-delay:.48s}
html[data-skin="wa"] body .form-shell .field:nth-of-type(3){animation-delay:.56s}
html[data-skin="wa"] body .form-shell .field:nth-of-type(4){animation-delay:.64s}
html[data-skin="wa"] body .form-shell .field-row .field{animation-delay:.4s}
html[data-skin="wa"] body .form-shell label{font-size:11.5px!important;font-weight:800!important;letter-spacing:.2px;margin-bottom:6px;transition:color .2s,transform .2s}
html[data-skin="wa"] body .form-shell .field:focus-within label{color:#128C7E!important;transform:translateX(3px)}

html[data-skin="wa"] body .form-shell input[type=text],html[data-skin="wa"] body .form-shell input[type=email],
html[data-skin="wa"] body .form-shell input[type=password],html[data-skin="wa"] body .form-shell select{
  background-color:var(--wa-surface2,#f0f2f5)!important;border:1.5px solid transparent!important;border-radius:15px!important;
  padding:13px 14px 13px 42px!important;font-size:16px!important;
  background-repeat:no-repeat!important;background-position:14px 50%!important;background-size:18px!important;
  transition:border-color .25s,box-shadow .25s,background-color .25s,transform .25s!important}
html[data-skin="wa"] body .form-shell input:focus,html[data-skin="wa"] body .form-shell select:focus{
  background-color:var(--wa-surface,#fff)!important;border-color:#25d366!important;transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(37,211,102,.18),0 10px 18px -12px rgba(18,140,126,.6)!important}
html[data-skin="wa"] body .form-shell #email{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128C7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>")!important}
html[data-skin="wa"] body .form-shell #password{padding-right:68px!important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128C7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>")!important}
html[data-skin="wa"] body .form-shell #name{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128C7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21a8 8 0 0 1 16 0'/></svg>")!important}
html[data-skin="wa"] body .form-shell #role{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128C7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='18' height='13' rx='2'/><path d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/></svg>")!important}

/* show / hide password pill */
html[data-skin="wa"] body .form-shell .pass-toggle{right:8px!important;border-radius:999px!important;padding:5px 10px!important;font-size:10px!important;letter-spacing:.5px;
  background:rgba(37,211,102,.14)!important;color:#128C7E!important;font-weight:800!important;transition:transform .15s,background .2s}
html[data-skin="wa"] body .form-shell .pass-toggle:active{transform:scale(.9)}

/* register: verify email */
html[data-skin="wa"] body .form-shell .email-verify-wrap{gap:8px}
html[data-skin="wa"] body .form-shell #verifyEmailBtn{border-radius:14px!important;font-size:12px!important;font-weight:800!important;white-space:nowrap;
  background:linear-gradient(135deg,rgba(37,211,102,.16),rgba(18,140,126,.16))!important;color:#0b7a68!important;border:1.5px solid rgba(37,211,102,.45)!important;
  transition:transform .15s,box-shadow .2s}
html[data-skin="wa"] body .form-shell #verifyEmailBtn:active:not(:disabled){transform:scale(.94)}
html[data-skin="wa"] body .form-shell #verifyEmailBtn.verified{background:linear-gradient(135deg,#128C7E,#25d366)!important;color:#fff!important;border-color:transparent!important}
html[data-skin="wa"] body .form-shell #emailVerifiedBadge.show{animation:amPop .45s cubic-bezier(.34,1.56,.64,1)}

/* progress steps */
html[data-skin="wa"] body .form-shell .reg-steps{gap:6px;margin-bottom:14px}
html[data-skin="wa"] body .form-shell .reg-step{height:5px;border-radius:5px;background:rgba(127,138,148,.22);position:relative;overflow:hidden}
html[data-skin="wa"] body .form-shell .reg-step.active{background:rgba(37,211,102,.25)}
html[data-skin="wa"] body .form-shell .reg-step.active::after{content:"";position:absolute;inset:0;border-radius:5px;background:linear-gradient(90deg,#128C7E,#25d366);
  transform-origin:left;animation:amFill .9s cubic-bezier(.22,1,.36,1) .5s both}

/* errors */
html[data-skin="wa"] body .form-shell .field.has-error input,html[data-skin="wa"] body .form-shell .field.has-error select{
  border-color:#ea0038!important;box-shadow:0 0 0 4px rgba(234,0,56,.12)!important;animation:amShake .45s}
html[data-skin="wa"] body .form-shell .field-error{font-size:11px!important;font-weight:700;padding-left:4px}

/* ───────── submit button ───────── */
html[data-skin="wa"] body .form-shell #submitBtn{position:relative;overflow:hidden;width:100%;margin-top:6px;
  background:linear-gradient(135deg,#128C7E,#25d366)!important;background-image:linear-gradient(135deg,#128C7E,#25d366)!important;
  border-radius:16px!important;padding:14px 16px!important;font-size:14.5px!important;font-weight:800!important;letter-spacing:.2px;
  box-shadow:0 14px 24px -12px rgba(18,140,126,.9)!important;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,opacity .2s;
  animation:amField .55s cubic-bezier(.22,1,.36,1) .7s both}
html[data-skin="wa"] body .form-shell #submitBtn::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);animation:amSweep 3.4s ease-in-out 1.4s infinite;pointer-events:none}
html[data-skin="wa"] body .form-shell #submitBtn:active:not(:disabled){transform:scale(.96)}
html[data-skin="wa"] body .form-shell #submitBtn:disabled{opacity:.5;box-shadow:none!important}
html[data-skin="wa"] body .form-shell #submitBtn:disabled::before{display:none}
.am-rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);pointer-events:none;animation:amRip .6s ease-out forwards}

/* links, toast */
html[data-skin="wa"] body .form-shell .form-footer-link{font-size:12.5px;text-align:center;margin-top:16px;animation:amField .55s ease .8s both}
html[data-skin="wa"] body .form-shell .form-footer-link a,html[data-skin="wa"] body .form-shell .forgot-pass-link a{position:relative;font-weight:800!important;text-decoration:none}
html[data-skin="wa"] body .form-shell .form-footer-link a::after,html[data-skin="wa"] body .form-shell .forgot-pass-link a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#128C7E,#25d366);transform:scaleX(0);transform-origin:left;transition:transform .3s}
html[data-skin="wa"] body .form-shell .form-footer-link a:active::after,html[data-skin="wa"] body .form-shell .forgot-pass-link a:active::after{transform:scaleX(1)}
html[data-skin="wa"] body .form-shell .forgot-pass-link{font-size:11.5px;margin-top:8px;text-align:right}
html[data-skin="wa"] body .form-shell .form-toast{font-size:12.5px;font-weight:700;border-radius:14px!important}
html[data-skin="wa"] body .form-shell .form-toast.show,html[data-skin="wa"] body .form-shell .form-toast.err,html[data-skin="wa"] body .form-shell .form-toast.ok{animation:amPop .4s cubic-bezier(.34,1.56,.64,1)}

/* reCAPTCHA: keep it centred and inside the card on small phones */
html[data-skin="wa"] body .form-shell #captchaField{display:flex;flex-direction:column;align-items:center;overflow:hidden}
@media (max-width:350px){html[data-skin="wa"] body .form-shell .g-recaptcha{transform:scale(.88);transform-origin:center top}}

/* ───────── forgot-password modal ───────── */
html[data-skin="wa"] body #fpModal{border-radius:26px!important;overflow:hidden}
html[data-skin="wa"] body #fpOverlay.show #fpModal,html[data-skin="wa"] body #fpOverlay.open #fpModal{animation:amPop .45s cubic-bezier(.22,1,.36,1)}
html[data-skin="wa"] body #fpModal .fp-primary-btn{background:linear-gradient(135deg,#128C7E,#25d366)!important;color:#fff!important;border:0!important;border-radius:15px!important;
  font-weight:800!important;box-shadow:0 12px 22px -12px rgba(18,140,126,.9)!important;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
html[data-skin="wa"] body #fpModal .fp-primary-btn:active{transform:scale(.96)}
html[data-skin="wa"] body #fpModal .fp-otp-digit{border-radius:14px!important;border:1.5px solid transparent!important;background:var(--wa-surface2,#f0f2f5)!important;transition:border-color .2s,box-shadow .2s,transform .2s}
html[data-skin="wa"] body #fpModal .fp-otp-digit:focus,html[data-skin="wa"] body #fpModal .fp-otp-digit.filled{border-color:#25d366!important;box-shadow:0 0 0 4px rgba(37,211,102,.16)!important}
html[data-skin="wa"] body #fpModal .fp-otp-digit.filled{transform:scale(1.05)}

@media (prefers-reduced-motion:reduce){
  html[data-skin="wa"] body .form-shell *,html[data-skin="wa"] body .form-shell *::before,html[data-skin="wa"] body .form-shell *::after{animation:none!important}
  html[data-skin="wa"] body .form-shell .form-container,html[data-skin="wa"] body .form-shell .field,html[data-skin="wa"] body .form-shell .form-body>*{opacity:1!important}
}