/* ======================================================================
   AlertIQ Auth v12 — Split Browser Login
   Reference direction: clean blue logistics panel + white form surface.
   ====================================================================== */
:root{
  --auth-blue:#2f5ef5;
  --auth-blue-2:#3973ff;
  --auth-indigo:#253fce;
  --auth-green:#17b978;
  --auth-orange:#f5a524;
  --auth-red:#e95663;
  --auth-ink:#131b2d;
  --auth-text:#58677d;
  --auth-muted:#99a4b5;
  --auth-line:#e7ebf2;
  --auth-canvas:#cfe0f4;
  --auth-shadow:0 38px 100px rgba(47,70,111,.28);
}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0;overflow-x:hidden}
body.auth-v12{
  color:var(--auth-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 74% 18%,rgba(54,105,255,.25),transparent 24%),
    radial-gradient(circle at 22% 88%,rgba(255,255,255,.60),transparent 26%),
    linear-gradient(145deg,#bcd3ed,#d8e7f7 45%,#c5daf0);
  text-rendering:optimizeLegibility;
}
body.auth-v12::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(to bottom,#000,transparent 88%);
}
.auth-orb{position:fixed;z-index:-1;border-radius:50%;filter:blur(2px);opacity:.58;pointer-events:none;animation:authFloat 8s ease-in-out infinite}
.auth-orb.one{width:230px;height:230px;left:-80px;top:13%;background:radial-gradient(circle,rgba(47,94,245,.22),transparent 68%)}
.auth-orb.two{width:300px;height:300px;right:-100px;top:4%;background:radial-gradient(circle,rgba(68,119,255,.28),transparent 68%);animation-delay:1.3s}
.auth-orb.three{width:240px;height:240px;right:17%;bottom:-110px;background:radial-gradient(circle,rgba(255,255,255,.66),transparent 68%);animation-delay:2.3s}
@keyframes authFloat{50%{transform:translateY(-12px)}}
@keyframes authEnter{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes authScan{from{transform:translateY(-130%)}to{transform:translateY(720%)}}
@keyframes authRoute{to{stroke-dashoffset:-100}}
@keyframes authSpin{to{transform:rotate(360deg)}}

.auth-shell{min-height:100svh;display:grid;place-items:center;padding:34px}
.auth-layout{
  position:relative;
  width:min(1160px,100%);
  min-height:660px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.78fr);
  overflow:hidden;
  border:8px solid rgba(255,255,255,.78);
  border-radius:34px;
  background:#fff;
  box-shadow:var(--auth-shadow);
  animation:authEnter .62s cubic-bezier(.22,.8,.2,1) both;
}
.auth-layout::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  z-index:20;
  height:31px;
  pointer-events:none;
  background:linear-gradient(180deg,#fff,#f7f9fc);
  border-bottom:1px solid #edf0f5;
}
.auth-layout::after{
  content:"●  ●  ●";
  position:absolute;
  left:14px;top:7px;
  z-index:21;
  color:#e4666e;
  font-size:10px;
  letter-spacing:4px;
  text-shadow:8px 0 0 #e9b247,16px 0 0 #4dc37d;
}
.auth-showcase,.auth-card{position:relative;min-width:0;overflow:hidden}
.auth-showcase{
  min-height:660px;
  display:grid;
  grid-template-rows:auto auto minmax(260px,1fr) auto;
  padding:58px 38px 32px;
  color:#fff;
  background:
    radial-gradient(circle at 86% 10%,rgba(255,255,255,.15),transparent 23%),
    radial-gradient(circle at 12% 92%,rgba(102,214,255,.16),transparent 28%),
    linear-gradient(145deg,var(--auth-blue),#3159e8 50%,#2743c7);
}
.auth-showcase::before{content:"";position:absolute;right:-120px;bottom:-160px;width:440px;height:440px;border:1px solid rgba(255,255,255,.13);border-radius:50%;box-shadow:0 0 0 50px rgba(255,255,255,.035),0 0 0 100px rgba(255,255,255,.025)}
.auth-brand{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px}
.auth-brand-lockup{width:min(240px,62%);height:auto;filter:drop-shadow(0 12px 24px rgba(8,24,80,.24))}
.auth-track{min-height:29px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(9,28,98,.18);color:#fff;font-size:8px;font-weight:900;letter-spacing:.8px}
.auth-copy{position:relative;z-index:2;margin-top:30px}
.auth-copy .eyebrow{display:inline-flex;align-items:center;gap:8px;color:#d6e5ff;font-size:8px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.auth-copy .eyebrow i{width:7px;height:7px;border-radius:50%;background:#4ce1a5;box-shadow:0 0 0 5px rgba(76,225,165,.13)}
.auth-copy h1{max-width:640px;margin:13px 0 11px;color:#fff;font-size:clamp(34px,3.6vw,51px);line-height:1.04;letter-spacing:-1.45px}
.auth-copy h1 span{color:#9de4ff}
.auth-copy p{max-width:640px;margin:0;color:rgba(231,239,255,.82);font-size:12.5px;line-height:1.68}
.auth-visual{position:relative;z-index:2;min-height:275px;margin-top:20px;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:24px;background:linear-gradient(145deg,rgba(10,28,92,.55),rgba(35,81,184,.38));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 45px rgba(14,31,94,.22)}
.auth-visual::before{content:"";position:absolute;left:0;right:0;top:-24%;height:32%;background:linear-gradient(180deg,transparent,rgba(123,224,255,.11),transparent);animation:authScan 7s linear infinite}
.auth-car{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 32px rgba(4,16,62,.32));animation:authFloat 6s ease-in-out infinite}
.auth-route{position:absolute;inset:0;width:100%;height:100%}.auth-route path{fill:none;stroke:#81dcff;stroke-width:2;stroke-dasharray:8 10;opacity:.34;animation:authRoute 7s linear infinite}
.auth-chip{position:absolute;z-index:3;min-width:112px;padding:9px 11px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(10,29,91,.55);box-shadow:0 12px 28px rgba(8,22,74,.22);backdrop-filter:blur(10px)}
.auth-chip.one{left:15px;top:15px}.auth-chip.two{right:15px;top:18px}.auth-chip.three{right:15px;bottom:17px}
.auth-chip small{display:block;color:#aabbe0;font-size:6.5px;font-weight:900;letter-spacing:.7px;text-transform:uppercase}.auth-chip b{display:block;margin-top:4px;color:#fff;font-size:11px}.auth-chip b.green{color:#69e4ae}.auth-chip b.orange{color:#ffd278}
.auth-feature-row,.auth-steps{position:relative;z-index:2;display:grid;gap:8px;margin-top:14px}
.auth-feature-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.auth-feature{min-height:68px;padding:10px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(255,255,255,.065);transition:transform .18s ease,background .18s ease}.auth-feature:hover{transform:translateY(-2px);background:rgba(255,255,255,.10)}.auth-feature b{display:block;color:#fff;font-size:9px}.auth-feature span{display:block;margin-top:5px;color:rgba(229,237,255,.68);font-size:8px;line-height:1.4}
.auth-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-step{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px;padding:9px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.06)}.auth-step i{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#fff;color:var(--auth-blue);font-size:9px;font-style:normal;font-weight:900}.auth-step b{display:block;color:#fff;font-size:9px}.auth-step span{display:block;margin-top:2px;color:rgba(229,237,255,.68);font-size:7.7px}

.auth-card{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px 42px 34px;
  background:#fff;
  color:var(--auth-text);
}
.auth-card::before{content:"";position:absolute;right:-80px;top:40px;width:220px;height:220px;border-radius:50%;background:rgba(47,94,245,.045)}
.auth-card>*{position:relative;z-index:2}
.auth-card-head{text-align:left;margin-bottom:23px}.auth-mini-logo{width:56px;height:56px;display:grid;place-items:center;margin:0 0 13px;border:1px solid #e2e9f3;border-radius:17px;background:#eef8ff;box-shadow:0 10px 24px rgba(47,94,245,.10)}.auth-mini-logo img{width:51px;height:51px;object-fit:contain}.auth-card-head h2{margin:0;color:var(--auth-ink);font-size:31px;line-height:1;letter-spacing:-.6px}.auth-card-head p{margin:9px 0 0;color:#8b96a7;font-size:10.5px;line-height:1.5}
.auth-alert{display:flex;align-items:flex-start;gap:8px;margin-bottom:13px;padding:11px 12px;border:1px solid #f3ccd0;border-radius:12px;background:#fff3f4;color:#d64b58;font-size:10px;font-weight:750}.auth-alert.auth-success{border-color:#ccebdc;background:#effaf5;color:#178b5f}
.auth-form{display:grid;gap:12px}.auth-field{display:grid;gap:6px}.auth-field label{color:#495a72;font-size:8px;font-weight:900;letter-spacing:.35px;text-transform:uppercase}.auth-input{position:relative}.auth-input input{width:100%;min-height:48px;padding:0 45px 0 13px;border:1px solid #e1e6ef;border-radius:12px;background:#fbfcfe;color:#27364d;font-size:11.5px;outline:none;box-shadow:0 4px 13px rgba(62,83,126,.035);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.auth-input input::placeholder{color:#a5afbf}.auth-input input:focus{border-color:#91a9ff;background:#fff;box-shadow:0 0 0 4px rgba(47,94,245,.08)}.auth-input .auth-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#9ba6b6;font-size:13px}.auth-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:35px;height:35px;border:0;border-radius:9px;background:#f1f4f8;color:#6c7c92;cursor:pointer}.auth-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#9aa5b5;font-size:9px}.auth-submit{position:relative;overflow:hidden;width:100%;min-height:48px;margin-top:3px;border:0;border-radius:12px;background:linear-gradient(105deg,var(--auth-blue),var(--auth-blue-2));color:#fff;font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 12px 26px rgba(47,94,245,.22);transition:transform .16s ease,filter .16s ease}.auth-register .auth-submit{background:linear-gradient(105deg,#18b974,#109a62);box-shadow:0 12px 26px rgba(16,154,98,.20)}.auth-submit:hover{transform:translateY(-1px);filter:brightness(1.04)}.auth-submit.loading{pointer-events:none;opacity:.86}.auth-submit.loading span{opacity:0}.auth-submit.loading::after{content:"";position:absolute;left:50%;top:50%;width:19px;height:19px;margin:-9.5px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:authSpin .7s linear infinite}.auth-link{text-align:center;margin-top:15px;color:#9aa5b5;font-size:10px}.auth-link a{color:var(--auth-blue);font-weight:900;text-decoration:none}.auth-register .auth-link a{color:#129e65}.auth-note{margin-top:14px;padding:10px 11px;border:1px solid #edf0f5;border-radius:11px;background:#f8fafc;color:#8c98a9;font-size:8.7px;line-height:1.5}.auth-checks{display:grid;grid-template-columns:1fr 1fr;gap:6px}.auth-check{padding:7px 8px;border-radius:9px;background:#f5f7fa;color:#95a0b1;font-size:7.8px}.auth-check.ok{background:#edf9f4;color:#149563}

/* verify page */
body.auth-v12>.auth-shell>.auth-card{width:min(470px,100%)!important;min-height:410px;border:8px solid rgba(255,255,255,.75);border-radius:28px;box-shadow:var(--auth-shadow)}

@media(max-width:980px){
  .auth-shell{padding:20px}
  .auth-layout{width:min(590px,100%);grid-template-columns:1fr;min-height:0}
  .auth-showcase{min-height:auto;padding:57px 24px 24px;grid-template-rows:auto auto 260px auto}
  .auth-copy h1{font-size:38px}.auth-copy p{font-size:11.5px}.auth-feature-row{grid-template-columns:1fr 1fr}
  .auth-card{padding:35px 28px}
}
@media(max-width:620px){
  .auth-shell{padding:10px}
  .auth-layout{border-width:5px;border-radius:23px}
  .auth-layout::before{height:27px}.auth-layout::after{top:5px}
  .auth-showcase{display:none}
  .auth-card{min-height:calc(100svh - 20px);padding:54px 20px 25px}
  .auth-card-head h2{font-size:27px}
  .auth-mini-logo{width:52px;height:52px}.auth-mini-logo img{width:47px;height:47px}
  .auth-input input{min-height:46px;font-size:16px}
  .auth-checks{grid-template-columns:1fr}
}
@media(max-height:740px) and (min-width:981px){
  .auth-shell{padding:16px}.auth-layout{min-height:610px}.auth-showcase{min-height:610px;padding-top:51px}.auth-copy{margin-top:20px}.auth-copy h1{font-size:41px}.auth-visual{min-height:240px}.auth-card{padding-top:54px}.auth-form{gap:9px}.auth-input input{min-height:44px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}