/* =========================================================
   FLYBUY — customer sign in / sign up (standalone pages)
   ========================================================= */
:root{
  --brand:#0a5fe0;
  --brand-2:#1a7bff;
  --brand-3:#6a3cff;
  --green:#25d366;
  --red:#e63946;

  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --ink:#0d1220;
  --ink-2:#3c4459;
  --muted:#78829a;
  --line:#e6eaf2;
  --line-2:#d6dcea;
  --ghost:rgba(10,95,224,.09);
  --ease:cubic-bezier(.22,.75,.28,1);
}
:root[data-theme="dark"]{
  --bg:#080b13;
  --surface:#111825;
  --surface-2:#161e2d;
  --ink:#eef2f9;
  --ink-2:#b3bccd;
  --muted:#828da4;
  --line:#212b3d;
  --line-2:#2c3850;
  --ghost:rgba(26,123,255,.14);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font:inherit;color:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:where(a,button,input):focus-visible{outline:2.5px solid var(--brand-2);outline-offset:2px;border-radius:8px}

/* logo */
.logo{--logo-mark:var(--brand);--logo-ink:var(--ink);display:block;width:150px;height:auto;overflow:visible}
.logo.on-dark{--logo-mark:#4d9bff;--logo-ink:#ffffff}
:root[data-theme="dark"] .logo{--logo-mark:#4d9bff;--logo-ink:#f2f6ff}
.logo .logo-mark{fill:var(--logo-mark);stroke:none}
.logo text{font-family:inherit;font-style:italic;stroke:none;fill:var(--logo-ink)}
.logo-word{font-size:30px;font-weight:800;letter-spacing:.4px}
.logo-tag{font-size:8.6px;font-weight:700;letter-spacing:3.5px;opacity:.92}
.logo-since{font-size:7.2px;font-weight:700;letter-spacing:1.3px;opacity:.8}

/* ---------------- layout ---------------- */
.auth-shell{display:grid;grid-template-columns:1.05fr 1fr;min-height:100dvh}

/* left: brand panel */
.auth-aside{
  position:relative;overflow:hidden;padding:48px 56px;display:flex;flex-direction:column;
  justify-content:space-between;color:#fff;background:#04070f;isolation:isolate;
}
.auth-aside::before{
  content:'';position:absolute;inset:-25%;z-index:-2;
  background:
    radial-gradient(46% 46% at 20% 24%, rgba(10,95,224,.85), transparent 60%),
    radial-gradient(40% 40% at 84% 16%, rgba(0,209,255,.40), transparent 62%),
    radial-gradient(52% 52% at 70% 84%, rgba(112,54,255,.55), transparent 62%);
  filter:blur(28px);animation:mesh 24s ease-in-out infinite alternate;
}
@keyframes mesh{
  0%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.12) translate3d(2%,-2%,0) rotate(4deg)}
  100%{transform:scale(1.05) translate3d(-2%,2%,0) rotate(-4deg)}
}
.auth-aside::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(74% 66% at 40% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(74% 66% at 40% 40%, #000 0%, transparent 78%);
}
.aside-copy{max-width:440px}
.aside-copy h2{
  font-size:clamp(30px,3.2vw,42px);font-weight:800;letter-spacing:-1.4px;line-height:1.1;margin:36px 0 16px;
}
.aside-copy h2 span{
  background:linear-gradient(100deg,#5aa8ff,#a9cfff 50%,#5aa8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;display:block;
}
.aside-copy p{color:#b9c4da;font-size:15px;line-height:1.65;margin:0 0 30px}
.perks{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.perks li{display:flex;gap:13px;align-items:flex-start;font-size:14px;color:#dfe6f3}
.perks .tick{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(90,168,255,.16);border:1px solid rgba(90,168,255,.35);color:#8cc2ff;
}
.perks .tick svg{width:13px;height:13px;stroke-width:3}
.perks small{display:block;color:#93a0bb;font-size:12.5px;margin-top:2px}
.aside-foot{display:flex;align-items:center;gap:10px;color:#8494b0;font-size:12.5px}
.aside-foot svg{width:16px;height:16px;color:var(--green)}

/* right: form panel */
.auth-main{
  display:grid;place-items:center;padding:44px 32px;background:var(--bg);position:relative;
}
.auth-top{
  position:absolute;top:22px;right:26px;left:26px;display:flex;justify-content:space-between;align-items:center;
}
.back-link{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted);
  padding:9px 12px;border-radius:10px;transition:color .18s, background .18s;
}
.back-link:hover{color:var(--ink);background:var(--surface-2)}
.back-link svg{width:16px;height:16px}
.theme-btn{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--ink);
  transition:background .18s, transform .18s;
}
.theme-btn:hover{background:var(--surface-2)}
.theme-btn:active{transform:scale(.94)}
.theme-btn .i-moon{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-moon{display:block}

.auth-card{width:100%;max-width:404px;animation:rise .55s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.auth-card .logo{display:none;margin:0 auto 26px}
.auth-card h1{font-size:27px;font-weight:800;letter-spacing:-.7px;margin:0 0 8px}
.auth-card .sub{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 30px}

.field{margin-bottom:18px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.field .opt{color:var(--muted);font-weight:500}
.field .wrap{position:relative;display:block}
.field input{
  width:100%;height:52px;border:1.5px solid var(--line-2);border-radius:13px;padding:0 15px;
  background:var(--surface-2);outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder{color:var(--muted)}
.field input:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px var(--ghost)}
.field .with-toggle input{padding-right:64px}
.pw-toggle{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:12px;font-weight:800;color:var(--brand);padding:9px 11px;border-radius:9px;
}
.pw-toggle:hover{background:var(--ghost)}
.hint{font-size:11.5px;color:var(--muted);margin-top:7px}

.error{
  color:var(--red);font-size:13px;font-weight:600;min-height:20px;margin-bottom:12px;
  display:flex;align-items:center;gap:7px;
}
.error:not(:empty){animation:shake .38s}
.error svg{width:15px;height:15px;flex:0 0 auto}
@keyframes shake{
  0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}
  40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}
}

.btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  height:54px;border-radius:13px;font-weight:800;font-size:14.5px;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-2),var(--brand) 60%,var(--brand-3));
  box-shadow:0 14px 30px -12px rgba(10,95,224,.7);
  transition:transform .2s var(--ease), box-shadow .2s, filter .2s;
}
.btn::before{
  content:'';position:absolute;top:0;bottom:0;width:36%;left:-50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-16deg);transition:left .6s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 36px -14px rgba(10,95,224,.8)}
.btn:hover::before{left:120%}
.btn:active{transform:translateY(0) scale(.99)}
.btn[disabled]{opacity:.6;pointer-events:none}

.swap{margin:26px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.swap a{color:var(--brand);font-weight:800}
.swap a:hover{text-decoration:underline}
.legal{margin:22px 0 0;text-align:center;font-size:11.5px;color:var(--muted);line-height:1.6}

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  .auth-shell{grid-template-columns:1fr}
  .auth-aside{display:none}
  .auth-card .logo{display:block}
  .auth-main{padding:86px 20px 44px;min-height:100dvh}
  .auth-top{top:14px;right:14px;left:14px}
}
@media (max-width:420px){
  .auth-card h1{font-size:23px}
  .auth-card .sub{font-size:13.5px;margin-bottom:24px}
  .field input{height:50px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}