/*
THESIS: Authentication behaves like opening a premium event credential, not a stack of generic login cards.
OWN-WORLD: Maritime navy, GFK signal orange, Langkawi teal, porcelain task surfaces, Cabinet/Satoshi typography with Geist numerals.
STORY: Enter the event, identify the participant, then confirm or create a PIN with immediate tactile feedback.
FIRST VIEWPORT: Authentic event artwork leads; date and venue sit on a quiet navy field; one yellow action anchors the bottom.
FORM: Artistic Asymmetry, first-ranked auth composition, deterministic seed 406; a pinned scene gives way to stacked task sheets.
*/

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap');

#screen-employee-id,
#screen-pin-login,
#screen-set-pin,
#screen-admin-portal-login{
  --auth2-navy:#071b33;
  --auth2-navy-soft:#102c4e;
  --auth2-yellow:#EA5B0C; /* GFK brand orange (logo is orange+white) — was DHL's yellow accent */
  --auth2-teal:#0e9488;
  --auth2-coral:#2355BF;
  --auth2-ground:#f1f5f7;
  --auth2-white:#ffffff;
  --auth2-ink:#071b33;
  --auth2-muted:#5f6f82;
  --auth2-line:#dce5eb;
  --auth2-ease:cubic-bezier(.22,1,.36,1);
  --auth2-font:'Satoshi','DM Sans',sans-serif;
  --auth2-display:'Cabinet Grotesk','Satoshi','DM Sans',sans-serif;
  --auth2-numeric:'Geist','Satoshi','DM Sans',sans-serif;
  overflow-x:hidden!important;
  font-family:var(--auth2-font)!important;
  color:var(--auth2-ink)!important;
}

#screen-employee-id *,
#screen-pin-login *,
#screen-set-pin *,
#screen-admin-portal-login *{
  box-sizing:border-box;
  font-family:inherit;
}

.auth-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Arrival cover (#screen-login) is deliberately NOT restyled here anymore
   — repo owner: "Landing page change back to the previous layout that has
   'Click anywhere to enter...'". It now falls back entirely to the base
   poster-theme styling in index.html (see #screen-login .login-enter-hint
   there, which also carries the slow-blink animation requested in the same
   message). The other 4 auth screens below are unaffected. */

/* Shared credential shell ---------------------------------------------- */
#screen-employee-id.auth-screen,
#screen-pin-login.auth-screen,
#screen-set-pin.auth-screen,
#screen-admin-portal-login{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  max-width:100%!important;
  min-height:var(--app-vh,100vh)!important;
  background:var(--auth2-ground)!important;
  color:var(--auth2-ink)!important;
}

#screen-employee-id.auth-screen::before,
#screen-pin-login.auth-screen::before,
#screen-set-pin.auth-screen::before,
#screen-admin-portal-login::before{
  content:"MEMOIRES HUB"!important;
  display:block!important;
  position:absolute!important;
  z-index:5!important;
  top:calc(21px + var(--safe-top))!important;
  left:24px!important;
  width:auto!important;
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  color:var(--auth2-yellow)!important;
  font-family:var(--auth2-font)!important;
  font-size:10px!important;
  font-weight:760!important;
  line-height:1!important;
  letter-spacing:.11em!important;
  pointer-events:none!important;
}

#screen-employee-id.auth-screen .top-curve,
#screen-pin-login.auth-screen .top-curve,
#screen-set-pin.auth-screen .top-curve,
#screen-admin-portal-login .top-curve{
  position:relative!important;
  z-index:1!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-height:224px!important;
  margin:0!important;
  padding:calc(83px + var(--safe-top)) 24px 46px!important;
  overflow:hidden!important;
  border:0!important;
  border-bottom:7px solid var(--auth2-yellow)!important;
  border-radius:0!important;
  background:var(--auth2-navy)!important;
  box-shadow:none!important;
  text-align:left!important;
}

#screen-employee-id.auth-screen .top-curve{
  min-height:252px!important;
  padding-top:calc(120px + var(--safe-top))!important;
}

#screen-employee-id.auth-screen .top-curve::before,
#screen-pin-login.auth-screen .top-curve::before,
#screen-set-pin.auth-screen .top-curve::before,
#screen-admin-portal-login .top-curve::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  top:0!important;
  right:0!important;
  width:18px!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  background:var(--auth2-teal)!important;
  opacity:1!important;
  pointer-events:none!important;
}

#screen-employee-id.auth-screen .top-curve::after,
#screen-pin-login.auth-screen .top-curve::after,
#screen-set-pin.auth-screen .top-curve::after,
#screen-admin-portal-login .top-curve::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  right:18px!important;
  bottom:0!important;
  width:44px!important;
  height:7px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--auth2-coral)!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  pointer-events:none!important;
}

#screen-employee-id.auth-screen .top-curve > *,
#screen-pin-login.auth-screen .top-curve > *,
#screen-set-pin.auth-screen .top-curve > *,
#screen-admin-portal-login .top-curve > *{
  position:relative!important;
  z-index:2!important;
}

#screen-employee-id.auth-screen .top-curve h2,
#screen-pin-login.auth-screen .top-curve h2,
#screen-set-pin.auth-screen .top-curve h1,
#screen-admin-portal-login .top-curve h2{
  width:100%!important;
  max-width:22rem!important;
  margin:0!important;
  color:var(--auth2-white)!important;
  font-family:var(--auth2-display)!important;
  font-size:clamp(29px,8.2vw,38px)!important;
  font-weight:760!important;
  line-height:1.02!important;
  letter-spacing:-.038em!important;
  text-align:left!important;
  text-wrap:balance!important;
}

#screen-employee-id.auth-screen .top-curve p,
#screen-pin-login.auth-screen .top-curve p,
#screen-admin-portal-login .top-curve p{
  max-width:36ch!important;
  margin:12px 0 0!important;
  color:rgba(255,255,255,.72)!important;
  font-family:var(--auth2-font)!important;
  font-size:14px!important;
  font-weight:450!important;
  line-height:1.48!important;
  letter-spacing:0!important;
  text-align:left!important;
  text-wrap:pretty!important;
}

#screen-employee-id.auth-screen .auth-back,
#screen-set-pin.auth-screen .auth-back{
  position:absolute!important;
  z-index:7!important;
  top:calc(48px + var(--safe-top))!important;
  left:20px!important;
  right:auto!important;
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--auth2-yellow)!important;
  color:var(--auth2-white)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

#screen-employee-id.auth-screen .auth-back:hover,
#screen-set-pin.auth-screen .auth-back:hover{
  background:#2355BF!important;
}

#screen-employee-id.auth-screen .auth-back:active,
#screen-set-pin.auth-screen .auth-back:active{
  transform:scale(.92)!important;
}

#screen-employee-id.auth-screen .content-pad,
#screen-pin-login.auth-screen .content-pad,
#screen-set-pin.auth-screen .content-pad,
#screen-admin-portal-login .content-pad{
  position:relative!important;
  z-index:3!important;
  flex:1 0 auto!important;
  width:100%!important;
  min-height:0!important;
  margin:-22px 0 0!important;
  padding:42px 24px calc(28px + var(--safe-bottom))!important;
  border:0!important;
  border-radius:22px 22px 0 0!important;
  background:var(--auth2-white)!important;
  box-shadow:0 -12px 30px -28px rgba(7,27,51,.72)!important;
  color:var(--auth2-ink)!important;
}

/* PIN screens only (not IC entry) — flat, no drop-shadow separating the
   sheet from the navy header above it, per repo owner: "remove the
   shadows... look more clean and premium". */
#screen-pin-login.auth-screen .content-pad,
#screen-set-pin.auth-screen .content-pad,
#screen-admin-portal-login .content-pad{
  box-shadow:none!important;
}

#screen-employee-id.auth-screen .content-pad{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  gap:0!important;
  text-align:left!important;
}

#screen-pin-login.auth-screen .content-pad,
#screen-set-pin.auth-screen .content-pad,
#screen-admin-portal-login .content-pad{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:center!important;
  text-align:center!important;
}

/* Credential entry ----------------------------------------------------- */
#screen-employee-id .field{
  width:100%!important;
  margin:0 0 14px!important;
}

#screen-employee-id #employeeIdInput{
  width:100%!important;
  height:64px!important;
  padding:0 18px!important;
  border:1px solid var(--auth2-line)!important;
  border-radius:14px!important;
  background:var(--auth2-white)!important;
  color:var(--auth2-ink)!important;
  box-shadow:none!important;
  font-family:var(--auth2-numeric)!important;
  font-size:21px!important;
  font-weight:620!important;
  line-height:1!important;
  letter-spacing:.045em!important;
  text-align:left!important;
  font-variant-numeric:tabular-nums!important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .24s var(--auth2-ease)!important;
}

#screen-employee-id #employeeIdInput::placeholder{
  color:#7d8a99!important;
  opacity:1!important;
  font-size:16px!important;
  font-weight:450!important;
  letter-spacing:0!important;
}

#screen-employee-id #employeeIdInput:focus{
  border-color:var(--auth2-navy)!important;
  box-shadow:none!important;
  transform:translateY(-1px)!important;
  outline:0!important;
}

#screen-employee-id .error-msg,
#screen-pin-login .error-msg,
#screen-set-pin .error-msg,
#screen-admin-portal-login .error-msg{
  width:100%!important;
  min-height:20px!important;
  margin:0 0 12px!important;
  color:#a4281f!important;
  font-family:var(--auth2-font)!important;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.35!important;
  text-align:left!important;
}

#screen-pin-login .error-msg,
#screen-set-pin .error-msg,
#screen-admin-portal-login .error-msg{
  margin-bottom:0!important;
  text-align:center!important;
}

#screen-employee-id .btn-primary{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:56px!important;
  margin:0!important;
  padding:0 20px!important;
  border:0!important;
  border-radius:14px!important;
  background:var(--auth2-yellow)!important;
  color:var(--auth2-white)!important;
  box-shadow:0 12px 22px -18px rgba(7,27,51,.74)!important;
  font-family:var(--auth2-font)!important;
  font-size:15px!important;
  font-weight:760!important;
  letter-spacing:-.01em!important;
  transition:transform .18s ease, background-color .18s ease!important;
}

#screen-employee-id .btn-primary:hover{
  background:#2355BF!important;
}

#screen-employee-id .btn-primary:active{
  transform:translateY(2px) scale(.99)!important;
}

#screen-employee-id .btn-primary:disabled{
  background:#e6e9eb!important;
  color:#788594!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}

/* PIN console ---------------------------------------------------------- */
#screen-pin-login.auth-screen .top-curve,
#screen-set-pin.auth-screen .top-curve,
#screen-admin-portal-login .top-curve{
  min-height:206px!important;
  padding-bottom:38px!important;
}

#screen-set-pin .step-pill{
  display:none!important;
}

#screen-set-pin #setPinSubtitle{
  width:100%!important;
  max-width:34ch!important;
  margin:0 0 2px!important;
  color:var(--auth2-muted)!important;
  font-family:var(--auth2-font)!important;
  font-size:14px!important;
  font-weight:470!important;
  line-height:1.48!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-wrap:pretty!important;
}

/* Spacing redesign — repo owner: "move buttons slightly lower... redesign
   the spacings & animations between the PIN to look more clean and
   premium". More air above the dots (they no longer sit flush under the
   heading) and a wider gap before the keypad, which is what actually
   reads as "moved down" since the keypad's own position is entirely
   margin-driven, not absolutely placed. */
#screen-pin-login .pin-dots,
#screen-set-pin .pin-dots,
#screen-admin-portal-login .pin-dots{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:16px!important;
  width:100%!important;
  margin:28px 0 40px!important;
}

#screen-pin-login .pin-dot,
#screen-set-pin .pin-dot,
#screen-admin-portal-login .pin-dot{
  display:block!important;
  width:13px!important;
  height:13px!important;
  flex:0 0 13px!important;
  border:2px solid #a7b1bb!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  transition:transform .26s var(--auth2-ease), background-color .2s ease, border-color .2s ease!important;
}

/* Glow removed (was box-shadow:0 0 0 4px rgba(255,203,5,.2)) — repo owner:
   "the 4 yellows PIN dots, remove the glowing effect." The fill colour
   change + scale is still the feedback signal, just without the halo. */
#screen-pin-login .pin-dot.filled,
#screen-set-pin .pin-dot.filled,
#screen-admin-portal-login .pin-dot.filled{
  border-color:var(--auth2-yellow)!important;
  background:var(--auth2-yellow)!important;
  box-shadow:none!important;
  transform:scale(1.1)!important;
}

/* Reverted back down to the original, smaller compact size — repo owner:
   "Also the PIN Code buttons make them smaller like previous original
   version sizing" (undoing the earlier full-width/bigger bump). Circles
   still stay circular via aspect-ratio instead of a hardcoded
   width/height, just capped to a narrower, centred block again. */
#screen-pin-login .keypad,
#screen-set-pin .keypad,
#screen-admin-portal-login .keypad{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  grid-auto-flow:dense!important;
  justify-content:center!important;
  gap:14px 20px!important;
  width:100%!important;
  max-width:300px!important;
  margin:8px auto 0!important;
}

/* Shadows removed (was box-shadow:0 8px 16px -14px), flat fill instead —
   repo owner: "remove the shadows... look more clean and premium". Press
   feedback now comes purely from colour + a gentler scale (was .9, now
   .95 — the old snap read as abrupt, not premium) on the shared
   --auth2-ease curve, eased over a slightly longer, smoother duration. */
#screen-pin-login .key,
#screen-set-pin .key,
#screen-admin-portal-login .key{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--auth2-line)!important;
  border-radius:50%!important;
  background:#eef3f6!important;
  color:var(--auth2-navy)!important;
  box-shadow:none!important;
  font-family:var(--auth2-numeric)!important;
  font-size:22px!important;
  font-weight:600!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums!important;
  transition:transform .22s var(--auth2-ease), background-color .2s ease, border-color .2s ease, color .2s ease!important;
}

#screen-pin-login .key:hover,
#screen-set-pin .key:hover,
#screen-admin-portal-login .key:hover{
  border-color:#c6d2da!important;
  background:#e5edf2!important;
}

#screen-pin-login .key:active,
#screen-set-pin .key:active,
#screen-admin-portal-login .key:active{
  border-color:var(--auth2-yellow)!important;
  background:var(--auth2-yellow)!important;
  color:var(--auth2-white)!important;
  box-shadow:none!important;
  transform:scale(.95)!important;
}

#screen-pin-login .key.action,
#screen-set-pin .key.action,
#screen-admin-portal-login .key.action{
  border-color:transparent!important;
  background:transparent!important;
  color:var(--auth2-muted)!important;
  box-shadow:none!important;
  font-size:24px!important;
}

#screen-pin-login .key.action:hover,
#screen-set-pin .key.action:hover,
#screen-admin-portal-login .key.action:hover{
  background:#eef3f6!important;
  color:var(--auth2-navy)!important;
}

#screen-pin-login .key.empty,
#screen-set-pin .key.empty,
#screen-admin-portal-login .key.empty{
  visibility:hidden!important;
  pointer-events:none!important;
}

#btnSwitchAccount{
  min-height:44px!important;
  margin:14px 0 0!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--auth2-muted)!important;
  box-shadow:none!important;
  font-family:var(--auth2-font)!important;
  font-size:13px!important;
  font-weight:620!important;
  letter-spacing:0!important;
}

#btnSwitchAccount:hover{
  color:var(--auth2-navy)!important;
  text-decoration:underline!important;
  text-underline-offset:4px!important;
}

#screen-employee-id :is(button,input):focus-visible,
#screen-pin-login :is(button,input):focus-visible,
#screen-set-pin :is(button,input):focus-visible,
#screen-admin-portal-login :is(button,input):focus-visible{
  outline:3px solid var(--auth2-yellow)!important;
  outline-offset:3px!important;
}

/* Responsive fitting --------------------------------------------------- */
@media (min-width:600px){
  #screen-employee-id.auth-screen .top-curve,
  #screen-pin-login.auth-screen .top-curve,
  #screen-set-pin.auth-screen .top-curve,
  #screen-admin-portal-login .top-curve,
  #screen-employee-id.auth-screen .content-pad,
  #screen-pin-login.auth-screen .content-pad,
  #screen-set-pin.auth-screen .content-pad,
  #screen-admin-portal-login .content-pad{
    width:min(100%,560px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media (max-width:359px){
  #screen-employee-id.auth-screen::before,
  #screen-pin-login.auth-screen::before,
  #screen-set-pin.auth-screen::before,
  #screen-admin-portal-login::before{
    left:18px!important;
  }
  #screen-employee-id.auth-screen .top-curve,
  #screen-pin-login.auth-screen .top-curve,
  #screen-set-pin.auth-screen .top-curve,
  #screen-admin-portal-login .top-curve{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  #screen-employee-id.auth-screen .content-pad,
  #screen-pin-login.auth-screen .content-pad,
  #screen-set-pin.auth-screen .content-pad,
  #screen-admin-portal-login .content-pad{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  #screen-pin-login .keypad,
  #screen-set-pin .keypad,
  #screen-admin-portal-login .keypad{
    max-width:260px!important;
    gap:10px 16px!important;
  }
}

@media (max-height:700px){
  #screen-employee-id.auth-screen .top-curve,
  #screen-pin-login.auth-screen .top-curve,
  #screen-set-pin.auth-screen .top-curve,
  #screen-admin-portal-login .top-curve{
    min-height:176px!important;
    padding-top:calc(66px + var(--safe-top))!important;
    padding-bottom:30px!important;
  }
  #screen-employee-id.auth-screen .auth-back{
    top:calc(42px + var(--safe-top))!important;
  }
  #screen-employee-id.auth-screen .top-curve{
    min-height:220px!important;
    padding-top:calc(104px + var(--safe-top))!important;
  }
  #screen-pin-login.auth-screen .top-curve,
  #screen-set-pin.auth-screen .top-curve,
  #screen-admin-portal-login .top-curve{
    min-height:160px!important;
    padding-top:calc(56px + var(--safe-top))!important;
    padding-bottom:24px!important;
  }
  #screen-pin-login.auth-screen .top-curve h2,
  #screen-set-pin.auth-screen .top-curve h1,
  #screen-admin-portal-login .top-curve h2{
    font-size:27px!important;
  }
  #screen-employee-id.auth-screen .content-pad,
  #screen-pin-login.auth-screen .content-pad,
  #screen-set-pin.auth-screen .content-pad,
  #screen-admin-portal-login .content-pad{
    padding-top:30px!important;
    padding-bottom:calc(18px + var(--safe-bottom))!important;
  }
  #screen-pin-login .pin-dots,
  #screen-set-pin .pin-dots,
  #screen-admin-portal-login .pin-dots{
    margin:8px 0 14px!important;
  }
  #screen-pin-login .keypad,
  #screen-set-pin .keypad,
  #screen-admin-portal-login .keypad{
    max-width:260px!important;
    gap:8px 20px!important;
  }
  #screen-pin-login .key,
  #screen-set-pin .key,
  #screen-admin-portal-login .key{
    font-size:23px!important;
  }
  #btnSwitchAccount{
    min-height:38px!important;
    margin-top:8px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #screen-employee-id #employeeIdInput,
  #screen-employee-id .btn-primary,
  #screen-employee-id .auth-back,
  #screen-pin-login .pin-dot,
  #screen-set-pin .pin-dot,
  #screen-admin-portal-login .pin-dot,
  #screen-pin-login .key,
  #screen-set-pin .key,
  #screen-admin-portal-login .key{
    transition:none!important;
  }
}

/* ============================================================
   Instant login popup (repo owner: "user now instantly falls on the
   landing with login flow ... in pop up window, and background (the
   vertical poster) blurred") — appended last in this file so it wins the
   cascade over every rule above. The old #screen-login "click anywhere to
   continue" gate is no longer part of the boot flow (see
   resetToLoginPopup() in app.js); every unauthenticated visit now lands
   directly on one of the three screens below. Each carries its own
   full-bleed, blurred banner-portrait.webp backdrop (.auth-blur-bg) with a
   centered "popup" card (.auth-popup) holding the actual form, so the
   login flow reads as a floating window over the blurred event poster
   instead of a full-bleed themed screen. #screen-admin-portal-login is
   untouched — that entry point is dead/unreachable (see AGENTS.md).
   ============================================================ */
#screen-employee-id, #screen-pin-login, #screen-set-pin{
  position:relative!important;
  display:none;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  background:#071b33!important;
}
#screen-employee-id.active, #screen-pin-login.active, #screen-set-pin.active{
  display:flex!important;
}
/* The "GFK TEAM BUILDING 2026" corner label (.auth-screen::before) was
   sized/positioned for the old full-bleed screen — floats stray outside
   the popup card now, so it's hidden rather than re-positioned. */
#screen-employee-id.auth-screen::before,
#screen-pin-login.auth-screen::before,
#screen-set-pin.auth-screen::before{
  display:none!important;
}
.auth-blur-bg{
  position:absolute!important;
  inset:-30px!important;
  background:url('./banner-portrait.webp') center/cover no-repeat!important;
  filter:blur(30px) saturate(1.15)!important;
  transform:scale(1.12)!important;
  z-index:0!important;
}
.auth-blur-bg::after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  background:rgba(4,12,26,.55)!important;
}
.auth-popup{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  max-width:400px!important;
  max-height:100%!important;
  overflow-y:auto!important;
  background:#fff!important;
  border-radius:28px!important;
  box-shadow:0 30px 70px rgba(0,0,0,.45)!important;
  display:flex!important;
  flex-direction:column!important;
}
/* Keeps the existing navy top-curve header (with its own themed heading
   styles) as the popup's title bar — just strips the decorative corner
   shapes (::before/::after) that were shaped for a full-bleed screen and
   would otherwise poke outside the card's rounded corners. */
#screen-employee-id .auth-popup .top-curve,
#screen-pin-login .auth-popup .top-curve,
#screen-set-pin .auth-popup .top-curve{
  position:static!important;
  border-radius:0!important;
  min-height:0!important;
}
#screen-employee-id .auth-popup .top-curve::before,
#screen-employee-id .auth-popup .top-curve::after,
#screen-pin-login .auth-popup .top-curve::before,
#screen-pin-login .auth-popup .top-curve::after,
#screen-set-pin .auth-popup .top-curve::before,
#screen-set-pin .auth-popup .top-curve::after{
  content:none!important;
  display:none!important;
}
.auth-popup .content-pad{ padding-bottom:32px!important; }
.auth-popup .auth-back{ position:static!important; margin-bottom:8px!important; }
@media (max-width:380px){
  .auth-popup{ max-width:none!important; }
}

/* ============================================================
   Repo owner (Employee ID popup specifically): keep the vertical poster
   crisp behind the popup — no blur, no dark tint — and drop the navy
   title strip so the whole popup reads as one continuous white card with
   "Enter your Employee ID" inside it, in dark ink instead of white.
   Appended last so it wins over every rule above for the same selectors.
   ============================================================ */
#screen-employee-id .auth-blur-bg{
  filter:none!important;
  transform:none!important;
}
#screen-employee-id .auth-blur-bg::after{
  background:transparent!important;
}
#screen-employee-id .auth-popup .top-curve{
  background:#fff!important;
  border-bottom:0!important;
  min-height:0!important;
  padding:28px 24px 4px!important;
}
#screen-employee-id .auth-popup .top-curve h2{
  color:var(--auth2-ink)!important;
}
#screen-employee-id .auth-popup .content-pad{
  margin-top:0!important;
  padding-top:20px!important;
  box-shadow:none!important;
}