/* ======================================================================
   ARMAAN PRESS ERP — SPLIT-SCREEN LOGIN  (v307)
   ----------------------------------------------------------------------
   Staff login (login.php) aur Customer login (portal_login.php), dono ka
   naya look: baayein taraf ek gehra branded panel (headline + points),
   daayein taraf saaf safed form area.

   ZAROORI BAATEIN:
   · Ye file sirf LAYOUT aur LOOK badalti hai. Ek bhi form field, form
     ka naam, action URL, ya PHP logic touch nahi hua — 2FA, PIN, OTP,
     lockout countdown, attempt dots, Remember me, Forgot Password,
     sab bilkul pehle jaise kaam karte hain, bas ab sundar dikhte hain.
   · Colours poori tarah brand ke apne hain — crimson #d81142 (--brand-pink)
     aur uske gehre shades + gold accent. Koi naya/bahar ka rang nahi.
   · Mobile par split apne aap ek column ban jaata hai: hero upar
     (chhota), form neeche. 860px se neeche hero ka bada text chhota ho
     jaata hai taaki form pehli screen me hi dikhe.
   ====================================================================== */

:root {
  --auth-crimson: #d81142;
  --auth-crimson-deep: #8b0d2c;
  --auth-ink: #14141a;
  --auth-ink-2: #1e1a24;
  --auth-gold: #c9a227;
}

/* ---- Poora page: do panel wala frame ---- */
body .login-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  box-sizing: border-box;
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(216, 17, 66, 0.10), transparent 60%),
    radial-gradient(800px 500px at 100% 110%, rgba(201, 162, 39, 0.10), transparent 60%),
    linear-gradient(180deg, #fbfbfd 0%, #f4f5f8 100%);
}

/* Purane floating orbs ab is design me fit nahi baithte */
body .login-wrap .login-orb { display: none; }

.auth-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: 100%;
  max-width: 1040px;
  min-height: 600px;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 40px 90px -40px rgba(20, 20, 26, 0.42),
    0 2px 8px rgba(20, 20, 26, 0.05);
}


/* ======================================================================
   BAAYAAN PANEL — branded hero
   ====================================================================== */
.auth-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 44px 42px;
  display: flex;
  background:
    linear-gradient(160deg, var(--auth-ink) 0%, var(--auth-ink-2) 45%, var(--auth-crimson-deep) 140%);
}

.auth-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(58px);
  pointer-events: none;
}
.auth-hero-glow-1 {
  width: 340px; height: 340px;
  top: -110px; left: -90px;
  background: rgba(216, 17, 66, 0.42);
}
.auth-hero-glow-2 {
  width: 300px; height: 300px;
  bottom: -120px; right: -80px;
  background: rgba(201, 162, 39, 0.22);
}
.auth-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 28% 34%, #000 15%, transparent 72%);
          mask-image: radial-gradient(circle at 28% 34%, #000 15%, transparent 72%);
}

.auth-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
}

/* -- Brand lockup -- */
.auth-hero-brand { display: flex; align-items: center; gap: 12px; }

/* v308 — asli logo (text me naam nahi). Logo aksar gehre background par
   bana hota hai, isliye use ek halka sa panel de dete hain taaki har
   tarah ke logo par saaf dikhe. */
.auth-hero-logo { display: inline-flex; }
.auth-hero-logo img {
  max-width: 220px;
  max-height: 58px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.auth-hero-brand-fallback { display: flex; align-items: center; gap: 12px; }
.auth-hero-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 5px;
  box-sizing: border-box;
}
.auth-hero-mark-text {
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px; letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--auth-crimson), var(--auth-crimson-deep));
  color: #fff;
}
.auth-hero-name { font-size: 15px; font-weight: 800; letter-spacing: 0.2px; }
.auth-hero-kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  margin-top: 2px;
}

/* -- Headline block -- */
.auth-hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  padding: 6px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.88);
}
.auth-hero-badge .dot { color: var(--auth-gold); font-size: 8px; }

.auth-hero-title {
  margin: 18px 0 14px;
  font-size: 34px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.6px;
}
.auth-hero-title span { display: block; }
.auth-hero-title span:last-child {
  background: linear-gradient(90deg, #fff 20%, var(--auth-gold) 130%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-hero-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
  max-width: 40ch;
}

.auth-hero-points {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 14px;
}
.auth-hero-points li {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.auth-hero-points .tick {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 900;
  background: rgba(216, 17, 66, 0.30);
  border: 1px solid rgba(216, 17, 66, 0.5);
  color: #fff;
}

.auth-hero-foot {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  display: flex; align-items: center; gap: 7px;
}


/* ======================================================================
   DAAYAAN PANEL — form area
   ====================================================================== */
.auth-formside {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 42px;
  background: #fff;
  overflow-y: auto;
}

/* Purana stack ab sirf ek simple column hai — card ka apna
   background/border/shadow hata dete hain, kyunki ab poora
   safed panel hi "card" hai. */
.auth-formside .login-stack {
  width: 100%;
  max-width: 380px;
  margin: 0;
}
.auth-formside .login-box,
.auth-formside .login-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: none;
  width: 100%;
  margin: 0;
}

/* v308 — daayein taraf ka logo HATA diya gaya hai. Wahi logo baayein
   hero panel me pehle se bada aur saaf dikh raha hai; dono jagah hone
   se dohraav lagta tha aur safed background par logo ka apna gehra
   box ajeeb dikhta tha. */
.auth-formside .login-logo-standalone { display: none; }

/* Headings */
.auth-formside .login-eyebrow {
  display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--auth-crimson);
  margin-bottom: 9px;
}
.auth-formside h1,
.auth-formside h2 {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin: 0 0 6px;
  color: var(--auth-ink);
}
.auth-formside .login-sub {
  font-size: 13px;
  color: #6b6b76;
  margin: 0 0 24px;
  line-height: 1.55;
}

/* Fields */
.auth-formside .form-group { margin-bottom: 15px; }
.auth-formside .form-label,
.auth-formside label {
  font-size: 12.5px;
  font-weight: 700;
  color: #3a3a44;
}
.auth-formside .form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 10px;
  border: 1.5px solid #e3e4ea;
  background: #fcfcfd;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.auth-formside .form-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--auth-crimson);
  box-shadow: 0 0 0 3.5px rgba(216, 17, 66, 0.13);
}

/* ---- CAPTCHA widget: image + refresh button + input ---- */
.captcha-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.captcha-img {
  display: block;
  width: 160px;
  height: 56px;
  border-radius: 10px;
  border: 1.5px solid #e3e4ea;
  background: #f7f7fa;
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-select: none;
}
.captcha-refresh {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1.5px solid #e3e4ea;
  background: #fcfcfd;
  color: #6b6b76;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, transform 150ms ease, background-color 150ms ease;
}
.captcha-refresh:hover {
  border-color: var(--auth-crimson);
  color: var(--auth-crimson);
  background: rgba(216, 17, 66, 0.06);
}
.captcha-refresh:active { transform: rotate(-50deg); }
.captcha-input { letter-spacing: 2.5px; font-weight: 700; text-transform: uppercase; }

/* Primary action */
.auth-formside .btn-primary {
  width: 100%;
  justify-content: center;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--auth-crimson), var(--auth-crimson-deep));
  box-shadow: 0 8px 22px -8px rgba(216, 17, 66, 0.55);
}
.auth-formside .btn-primary:hover:not(:disabled) {
  box-shadow: 0 12px 28px -8px rgba(216, 17, 66, 0.62);
}

/* ---- v308: safed panel par dikhne wale links/buttons ----
   .staff-login-back aur .staff-login-toggle asal me gehre background
   ke liye bane thay (safed text + glass border). Ab ye safed form
   panel par baithte hain, isliye wahan invisible ho jaate thay. Yahan
   inhe panel ke hisaab se dobara rang diya gaya hai — markup aur JS
   bilkul waisa ka waisa hai. */
.auth-formside .staff-login-back {
  color: var(--auth-crimson);
  font-weight: 700;
  margin-top: 18px;
  border: 1px solid #ecd3da;
  background: #fff7f9;
}
.auth-formside .staff-login-back:hover {
  color: var(--auth-crimson-deep);
  background: #fdeaf0;
}

.auth-formside .staff-login-toggle {
  background: #fff7f9;
  border: 1px solid #ecd3da;
  color: var(--auth-crimson);
  font-weight: 700;
  backdrop-filter: none;
}
.auth-formside .staff-login-toggle:hover {
  background: #fdeaf0;
  border-color: #e0b9c4;
}
.auth-formside .staff-panel-back {
  display: inline-block;
  color: #6b6b76;
  font-weight: 600;
  text-decoration: none;
  font-size: 12.5px;
  margin-bottom: 14px;
}
.auth-formside .staff-panel-back:hover { color: var(--auth-crimson); }

/* ---- v308: neeche ka security note (screenshot wala) ---- */
.auth-secure-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #eeeef2;
  text-align: center;
}
.auth-secure-note-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: #3a3a44;
  letter-spacing: 0.2px;
}
.auth-secure-note-sub {
  margin-top: 5px;
  font-size: 11px;
  color: #9a9aa4;
  line-height: 1.55;
}

/* ---- v308: page ke sabse neeche copyright ---- */
.auth-copyright {
  width: 100%;
  text-align: center;
  font-size: 11.5px;
  color: #9a9aa4;
  padding: 18px 16px 4px;
  box-sizing: border-box;
}

/* Neeche wali chhoti note lines */
.auth-formside .login-footnote {
  margin-top: 20px;
  text-align: center;
  font-size: 11.5px;
  color: #8a8a95;
  line-height: 1.6;
}
.auth-formside .login-footnote strong { color: #55555f; }


/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 900px) {
  /* ======================================================================
     v328 — MOBILE LOGIN: PURA NAYA, SAAF SIMPLE "CARD" DESIGN
     ----------------------------------------------------------------------
     Purana dark-hero + bottom-sheet idea hata diya — us design me baar-baar
     alignment/scroll gadbad ho rahi thi. Ab bilkul seedha, professional
     pattern hai (Google/Stripe jaisi login screens ki tarah):

       · Halka off-white background, poori screen
       · Sabse upar chhota sa logo + naam — bilkul center me
       · Uske neeche ek clean white card, bhi center me — usi ke andar
         heading, subtitle, dono fields, button, sab kuch
       · Sab kuch ek hi baar me center-vertically bhi hai aur screen ke
         andar hi fit hai — na upar-neeche scroll, na left-right shift

     Har layout rule par !important hai taaki koi bhi purana/cached rule
     ise override na kar sake — agar aapko abhi bhi purana look dikhe to
     ye pakka cache ka masla hai, design ka nahi (neeche upload note dekhon).
     900px se upar (desktop) ismein se kuch touch nahi hota. */

  html, body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body .login-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background:
      radial-gradient(700px 420px at 15% -10%, rgba(216, 17, 66, 0.35), transparent 60%),
      radial-gradient(600px 380px at 100% 110%, rgba(201, 162, 39, 0.18), transparent 60%),
      linear-gradient(160deg, var(--auth-ink) 0%, var(--auth-ink-2) 45%, var(--auth-crimson-deep) 140%) !important;
  }

  .auth-split {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 400px !important;
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    gap: 14px !important;
  }
  .auth-split * { box-sizing: border-box !important; }

  /* ---- Sabse upar: sirf chhota logo + naam, center me ---- */
  .auth-hero {
    position: static !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 0 !important;
    background: none !important;
    min-height: 0 !important;
  }
  .auth-hero-glow, .auth-hero-grid { display: none !important; }
  .auth-hero-inner { gap: 0 !important; }
  .auth-hero-brand {
    justify-content: center !important;
    text-align: center !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .auth-hero-logo img { max-width: 195px !important; max-height: 52px !important; margin: 0 auto !important; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.25)) !important; }
  .auth-hero-mark { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.2) !important; }
  .auth-hero-name { color: #fff !important; }
  .auth-hero-kicker { color: rgba(255,255,255,0.6) !important; }

  /* Card ke bahar ka baaki hero content (badge/title/text/points/foot) —
     naye simple design me nahi chahiye, sirf logo dikhega */
  .auth-hero-badge, .auth-hero-title, .auth-hero-text,
  .auth-hero-points, .auth-hero-foot { display: none !important; }

  /* ---- Neeche: ek clean white CARD, poora content isi ke andar ---- */
  .auth-formside {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    padding: 15px 22px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 40px -20px rgba(20,20,26,0.28), 0 2px 8px rgba(20,20,26,0.05) !important;
    overflow-y: auto !important;
    max-height: 92dvh !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .auth-formside::before { content: none !important; }
  .auth-formside .login-stack { max-width: none !important; width: 100% !important; margin: 0 !important; }
  .auth-formside .login-logo-standalone { display: none !important; }

  /* ---- Heading: center, compact ---- */
  .auth-formside .login-eyebrow { text-align: center !important; font-size: 10px !important; margin-bottom: 3px !important; }
  .auth-formside h1, .auth-formside h2 { text-align: center !important; font-size: 19px !important; margin-bottom: 2px !important; }
  .auth-formside .login-sub {
    text-align: center !important;
    font-size: 11.5px !important;
    margin: 0 0 9px !important;
    color: #6b6b76 !important;
    line-height: 1.3 !important;
  }
  /* Ye chhoti tagline ("Apne orders aur payments track karo") login-sub
     jaisi hi baat dobara kehti hai — mobile card me jagah bachane ke
     liye hamesha hide, sirf login-sub kaafi hai. */
  .auth-formside p.sub { display: none !important; }

  /* ---- v329 — STAFF PANEL: mobile par ye "compact" class ka apna
     padding (24px 28px) .auth-formside ke padding ke UPAR double laga
     raha tha — isi wajah se sirf staff wala form customer wale se
     lamba ho kar neeche se cut ho raha tha. Ab mobile par ye extra
     padding hata diya, aur back-link/shield-icon/mode-tabs (sirf
     staff form me hote hain) bhi chhote kar diye — taaki dono form
     equally compact rahein aur screen ke andar hi fit ho jayein. ---- */
  .auth-formside .login-box-compact { padding: 0 !important; }

  .auth-formside .staff-panel-back {
    display: block !important;
    font-size: 10px !important;
    margin-bottom: 4px !important;
    text-align: center !important;
  }
  .auth-formside .staff-hero-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    margin: 0 auto 4px !important;
  }
  .auth-formside .staff-hero-icon svg { width: 14px !important; height: 14px !important; }
  .auth-formside .login-mode-tabs { margin-bottom: 6px !important; padding: 2px !important; }
  .auth-formside .login-mode-tab { padding: 4px 8px !important; font-size: 11px !important; }

  /* ---- Fields ---- */
  .auth-formside .form-group { margin-bottom: 6px !important; }
  .auth-formside .form-label { font-size: 11px !important; margin-bottom: 2px !important; display: block !important; }
  .auth-formside .form-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 15px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    background: #f7f7fa !important;
    border: 1.5px solid transparent !important;
  }
  .auth-formside .form-input:focus {
    background: #fff !important;
    border-color: var(--auth-crimson) !important;
    box-shadow: 0 0 0 4px rgba(216, 17, 66, 0.11) !important;
  }

  /* ---- CAPTCHA: chhoti screen par bhi code clearly dikhna chahiye,
     isliye ye baaki cheezon jitna chhota nahi kiya — thoda bada rakha ---- */
  .captcha-group { margin-bottom: 6px !important; }
  .captcha-widget { gap: 6px !important; margin-bottom: 5px !important; }
  .captcha-img { width: 150px !important; height: 52px !important; border-radius: 10px !important; }
  .captcha-refresh { width: 38px !important; height: 38px !important; border-radius: 10px !important; }
  .captcha-input { padding: 8px 14px !important; }

  /* ---- Remember me / Forgot password ---- */
  .auth-formside label:has(input[type="checkbox"]) {
    font-size: 12px !important;
    gap: 6px !important;
  }
  .auth-formside input[type="checkbox"] {
    width: 16px !important; height: 16px !important;
    accent-color: var(--auth-crimson) !important;
  }

  /* ---- Login button ---- */
  .auth-formside .btn-primary {
    width: 100% !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    margin-top: 2px !important;
    box-shadow: 0 10px 24px -8px rgba(216, 17, 66, 0.5) !important;
  }

  /* ---- Neeche footnote/security note/staff-switch — sab center, chhota ---- */
  .auth-formside .login-footnote,
  .auth-secure-note,
  .auth-formside .staff-login-back {
    text-align: center !important;
    font-size: 10.5px !important;
    margin-top: 6px !important;
  }
  .auth-secure-note { padding-top: 6px !important; }
  .auth-secure-note-title { justify-content: center !important; font-size: 11px !important; }
  .auth-secure-note-sub { font-size: 10px !important; }
  .auth-formside .staff-login-back {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  /* ---- Copyright: card ke bahar, sabse neeche, chhota sa ---- */
  .login-wrap > .auth-copyright {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    color: rgba(255,255,255,0.55) !important;
    background: none !important;
  }
}

/* ---- Chhote height wale phone (iPhone SE, purane Android) ke liye
   aur bhi compress — taaki card kabhi bhi screen se bada na ho ---- */
@media (max-width: 900px) and (max-height: 720px) {
  .auth-formside { padding: 12px 22px !important; max-height: 90dvh !important; }
  .auth-formside .login-sub,
  .auth-formside p.sub { display: none !important; }
  .auth-secure-note-sub { display: none !important; }
}
@media (max-width: 900px) and (max-height: 620px) {
  .auth-hero-kicker { display: none !important; }
  .auth-formside .form-group { margin-bottom: 6px !important; }
  .auth-formside .login-footnote { display: none !important; }
}

@media (max-width: 340px) {
  .auth-formside { padding-left: 18px !important; padding-right: 18px !important; }
}



/* ======================================================================
   v330 — PREMIUM COMPACT DESKTOP LOGIN
   ----------------------------------------------------------------------
   Desktop-only refinement for both Staff/Admin and Customer login pages.
   Mobile rules below 900px remain untouched. The split card is deliberately
   tighter, better balanced and more app-like while preserving every auth
   field, CAPTCHA, lockout, OTP/PIN and remember-me behaviour.
   ====================================================================== */
@media (min-width: 901px) {
  body .login-wrap {
    padding: 18px 24px;
  }

  .auth-split {
    max-width: 900px;
    min-height: 520px;
    grid-template-columns: 0.94fr 1.06fr;
    border-radius: 24px;
    border: 1px solid rgba(20, 20, 26, 0.06);
    box-shadow:
      0 30px 72px -34px rgba(20, 20, 26, 0.38),
      0 10px 28px -18px rgba(139, 13, 44, 0.24),
      0 1px 4px rgba(20, 20, 26, 0.04);
  }

  .auth-hero {
    padding: 32px 34px;
  }
  .auth-hero-inner {
    gap: 22px;
  }
  .auth-hero-logo img {
    max-width: 198px;
    max-height: 52px;
  }
  .auth-hero-title {
    margin: 14px 0 10px;
    font-size: 29px;
    line-height: 1.12;
    letter-spacing: -0.5px;
  }
  .auth-hero-text {
    font-size: 12.5px;
    line-height: 1.55;
    max-width: 37ch;
  }
  .auth-hero-points {
    margin-top: 20px;
    gap: 9px 12px;
  }
  .auth-hero-points li {
    font-size: 11.5px;
  }
  .auth-hero-points .tick {
    width: 18px;
    height: 18px;
  }
  .auth-hero-foot {
    font-size: 10.5px;
  }

  .auth-formside {
    padding: 28px 34px;
  }
  .auth-formside .login-stack {
    max-width: 340px;
  }
  .auth-formside .login-eyebrow {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .auth-formside h1,
  .auth-formside h2 {
    font-size: 23px;
    margin-bottom: 4px;
  }
  .auth-formside .login-sub {
    font-size: 12px;
    margin-bottom: 15px;
  }
  .auth-formside p.sub {
    margin: 0 0 12px;
    font-size: 11.5px;
    color: #70707a;
  }
  .auth-formside .form-group {
    margin-bottom: 11px;
  }
  .auth-formside .form-label,
  .auth-formside label {
    font-size: 11.5px;
  }
  .auth-formside .form-input {
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 9px;
  }
  .captcha-widget {
    gap: 7px;
    margin-bottom: 7px;
  }
  .captcha-img {
    width: 145px;
    height: 50px;
    border-radius: 9px;
  }
  .captcha-refresh {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }
  .auth-formside .btn-primary {
    padding: 11px 16px;
    font-size: 13px;
    border-radius: 10px;
  }
  .auth-secure-note {
    margin-top: 14px;
    padding-top: 13px;
  }
  .auth-secure-note-title {
    font-size: 10.8px;
  }
  .auth-secure-note-sub {
    margin-top: 3px;
    font-size: 10px;
  }
  .auth-formside .staff-login-back {
    margin-top: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .auth-copyright {
    padding-top: 10px;
    font-size: 10.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-formside .form-input,
  .auth-formside .btn-primary { transition: none; }
}