:root {
  --fsb-login-ink: #f8fafc;
  --fsb-login-muted: #cbd5e1;
  --fsb-login-line: rgba(148, 163, 184, .35);
  --fsb-login-panel: rgba(15, 23, 42, .88);
  --fsb-login-accent: #38bdf8;
}

.fsbLoginShell {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
}

.fsbLoginCard {
  width: min(440px, 100%) !important;
  max-width: 440px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 0 auto !important;
  padding: 28px !important;
  border: 1px solid var(--fsb-login-line) !important;
  border-radius: 24px !important;
  color: var(--fsb-login-ink) !important;
  background: var(--fsb-login-panel) !important;
  box-shadow: 0 24px 70px rgba(2, 6, 23, .55) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  animation: none !important;
}

.fsbLoginCard::before,
.fsbLoginCard::after { display: none !important; }
.fsbLoginCard > * { min-width: 0; }
.fsbLoginCard h1 { margin: 0 !important; color: var(--fsb-login-ink) !important; font-size: clamp(1.65rem, 5vw, 2.15rem) !important; line-height: 1.15 !important; }
.fsbLoginCard p { margin: 0 !important; color: var(--fsb-login-muted) !important; line-height: 1.5 !important; }
.fsbLoginBrandMark {
  width: 64px !important;
  height: 64px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 18px !important;
  color: #f8fafc !important;
  background: linear-gradient(145deg, #0ea5e9, #1d4ed8) !important;
  box-shadow: 0 12px 30px rgba(14, 165, 233, .34) !important;
  font-size: 1.18rem !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
}

.fsbLoginMeta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: var(--fsb-login-muted) !important;
  font-size: .84rem !important;
}
.fsbLoginEnv {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 25px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  color: #e0f2fe !important;
  background: rgba(3, 105, 161, .72) !important;
  border: 1px solid rgba(125, 211, 252, .5) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.fsbLoginEnv.isLive { color: #dcfce7 !important; background: rgba(21, 128, 61, .72) !important; border-color: rgba(134, 239, 172, .5) !important; }

.fsbLoginAccessLabel { display: block !important; margin: 0 !important; color: var(--fsb-login-ink) !important; font-size: .88rem !important; font-weight: 650 !important; }
.fsbLoginInputRow { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; margin: 0 !important; }
.fsbLoginCard input[type="password"],
.fsbLoginCard input[type="text"] {
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(148, 163, 184, .36) !important;
  border-radius: 10px !important;
  color: var(--fsb-login-ink) !important;
  background: rgba(15, 23, 42, .82) !important;
  box-shadow: none !important;
}
.fsbLoginCard input:focus-visible,
.fsbLoginCard button:focus-visible,
.fsbLoginCard a:focus-visible { outline: 3px solid #7dd3fc !important; outline-offset: 2px !important; }
.fsbLoginToggle,
.fsbLoginSubmit {
  min-height: 42px !important;
  border: 1px solid rgba(148, 163, 184, .36) !important;
  border-radius: 10px !important;
  padding: 9px 13px !important;
  color: var(--fsb-login-ink) !important;
  background: rgba(51, 65, 85, .82) !important;
  font: inherit !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.fsbLoginSubmit {
  width: 100% !important;
  background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
  border-color: var(--fsb-login-accent) !important;
}
.fsbLoginToggle:hover,
.fsbLoginSubmit:hover { border-color: var(--fsb-login-accent) !important; transform: translateY(-1px) !important; }
.fsbLoginToggle:disabled,
.fsbLoginSubmit:disabled { opacity: .5 !important; cursor: not-allowed !important; transform: none !important; }
.fsbLoginRemember { display: flex !important; grid-template-columns: none !important; align-items: center !important; gap: 8px !important; margin: 0 !important; color: var(--fsb-login-muted) !important; font-size: .86rem !important; }
.fsbLoginRemember input { width: auto !important; min-height: 0 !important; margin: 0 !important; accent-color: #0ea5e9; }
.fsbLoginStatus { min-height: 1.4rem !important; margin: 0 !important; padding: 9px 12px !important; border: 1px solid rgba(148, 163, 184, .22) !important; border-radius: 10px !important; color: var(--fsb-login-muted) !important; background: rgba(15, 23, 42, .54) !important; font-size: .86rem !important; line-height: 1.45 !important; }
.fsbLoginStatus.ok { color: #86efac !important; }
.fsbLoginStatus.bad { color: #fca5a5 !important; }
.fsbLoginStatus.warn { color: #fde68a !important; }
.fsbLoginLinks { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px 16px !important; }
.fsbLoginLinks a,
.fsbLoginCard > a { color: #7dd3fc !important; text-align: center !important; }

/* Keep authenticated scanner/admin session toolbars functional without retaining login-card presentation. */
body.photoLoggedIn #loginCard,
body.qrCheckLoggedIn #qrCheckLoginCard,
body.mobileAdminLoggedIn #loginCard { max-width: none !important; padding: 12px 16px !important; border-radius: 14px !important; }

/* Desktop Admin source stays byte-frozen; its deployed card receives the shared standard here. */
body:not(.loggedIn) #loginCard.loginBox { width: min(440px, calc(100% - 24px)) !important; max-width: 440px !important; }
#myAuthCard.fsbLoginCard,
body:not(.mobileAdminLoggedIn) #loginCard.fsbLoginCard,
body:not(.loggedIn) #loginCard.loginBox.fsbLoginCard {
  width: min(440px, calc(100% - 24px)) !important;
  max-width: 440px !important;
  padding: 28px !important;
  border-radius: 24px !important;
  transform: none !important;
  animation: none !important;
}
body:not(.loggedIn) #loginCard.loginBox.fsbLoginCard.loginCardPositioned {
  transform: none !important;
}
.fsbLoginMeta > :is(.envBadge,.environmentBadge,.attendanceEnvBadge,.liteEnvBadge,.myEnvBadge,.photoEnvBadge,.qrCheckEnvBadge,.desktopEnvBadge) {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 25px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  color: #e0f2fe !important;
  background: rgba(3, 105, 161, .72) !important;
  border: 1px solid rgba(125, 211, 252, .5) !important;
}

@media (max-width: 600px) {
  .fsbLoginShell { padding: 12px !important; }
  .fsbLoginCard,
  #myAuthCard.fsbLoginCard,
  body:not(.mobileAdminLoggedIn) #loginCard.fsbLoginCard,
  body:not(.loggedIn) #loginCard.loginBox.fsbLoginCard {
    padding: 20px !important;
    border-radius: 18px !important;
    gap: 12px !important;
  }
  .fsbLoginCard h1 { overflow-wrap: anywhere; }
  .fsbLoginMeta { align-items: flex-start !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fsbLoginCard *, .fsbLoginCard *::before, .fsbLoginCard *::after { transition: none !important; }
}

/* Canonical cascade lock. This file is injected after every app stylesheet. */
html body :is(#loginCard,#myAuthCard,#qrCheckLoginCard,#mainAccessPanel,.accountingLoginCard,.attendanceAuthCard,.liteAuthCard,.loginCard).fsbLoginCard {
  width: min(440px, calc(100% - 24px)) !important;
  max-width: 440px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 0 auto !important;
  padding: 28px !important;
  border: 1px solid var(--fsb-login-line) !important;
  border-radius: 24px !important;
  color: var(--fsb-login-ink) !important;
  background: var(--fsb-login-panel) !important;
  box-shadow: 0 24px 70px rgba(2, 6, 23, .55) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  animation: none !important;
  box-sizing: border-box !important;
  cursor: default !important;
  user-select: auto !important;
}
html body .fsbLoginCard > .fsbLoginBrandMark { order: 0 !important; }
html body .fsbLoginCard > h1 { order: 1 !important; }
html body .fsbLoginCard > p { order: 2 !important; }
html body .fsbLoginCard > .fsbLoginMeta { order: 3 !important; }
html body .fsbLoginCard > .fsbLoginAccessLabel { order: 4 !important; }
html body .fsbLoginCard > .fsbLoginInputRow { order: 5 !important; }
html body .fsbLoginCard > .fsbLoginRemember { order: 6 !important; }
html body .fsbLoginCard > .fsbLoginSubmit { order: 7 !important; }
html body .fsbLoginCard > .fsbLoginStatus { order: 8 !important; }
html body .fsbLoginCard > .fsbLoginLinks,
html body .fsbLoginCard > a { order: 9 !important; }
html body :is(#loginCard,#myAuthCard,#qrCheckLoginCard,#mainAccessPanel,.accountingLoginCard,.attendanceAuthCard,.liteAuthCard,.loginCard).fsbLoginCard > * {
  grid-column: auto !important;
  grid-row: auto !important;
  grid-area: auto !important;
  align-self: auto !important;
}

html body :is(#loginCard,#myAuthCard,#qrCheckLoginCard,#mainAccessPanel,.accountingLoginCard,.attendanceAuthCard,.liteAuthCard,.loginCard).fsbLoginCard .fsbLoginInputRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  margin: 0 !important;
}
html body .fsbLoginCard :is(#accountingAccessKey,#attendanceAuthAccessKey,#liteAuthAccessKey,#myLoginAccessKey,#accessKeyInput,#qrCheckAccessKey,#mainAccessKey,#procurementAccessKey,#payrollAccessKey,#hrAccessKey,#systemAccessKey,#hsseAccessKey,#inventoryAccessKey,#assetAccessKey,#maintenanceAccessKey,#fleetAccessKey,#attendanceManagementAccessKey,#reportsAccessKey,#documentsAccessKey,#trainingAccessKey) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(148, 163, 184, .38) !important;
  border-radius: 10px !important;
  color: var(--fsb-login-ink) !important;
  background: rgba(2, 6, 23, .55) !important;
  box-shadow: none !important;
  -webkit-box-shadow: 0 0 0 1000px #111827 inset !important;
  -webkit-text-fill-color: var(--fsb-login-ink) !important;
  caret-color: var(--fsb-login-ink) !important;
  font: inherit !important;
  box-sizing: border-box !important;
}
html body .fsbLoginCard :is(#accountingToggleKey,#attendanceAuthToggleKey,#liteAuthToggleKey,#myAuthToggleKey,#photoToggleKey,#toggleKeyBtn,#qrCheckToggleKey,#mainToggleKey,#procurementToggleKey,#payrollToggleKey,#hrToggleKey,#systemToggleKey,#hsseToggleKey,#inventoryToggleKey,#assetToggleKey,#maintenanceToggleKey,#fleetToggleKey,#attendanceManagementToggleKey,#reportsToggleKey,#documentsToggleKey,#trainingToggleKey) {
  min-width: 68px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid rgba(148, 163, 184, .38) !important;
  border-radius: 10px !important;
  color: var(--fsb-login-ink) !important;
  background: rgba(30, 41, 59, .9) !important;
  box-shadow: none !important;
}
html body .fsbLoginCard :is(#accountingLoginBtn,#attendanceAuthLoginBtn,#liteAuthLoginBtn,#myAuthLoginBtn,#loginBtn,#qrCheckLoginBtn,#mainLoginButton,#procurementLoginBtn,#payrollLoginBtn,#hrLoginBtn,#systemLoginBtn,#hsseLoginBtn,#inventoryLoginBtn,#assetLoginBtn,#maintenanceLoginBtn,#attendanceManagementLoginBtn,#reportsLoginButton,#documentsLoginButton,#trainingLoginButton,.fsbLoginSubmit) {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(125, 211, 252, .55) !important;
  border-radius: 10px !important;
  color: #f8fafc !important;
  background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
  box-shadow: 0 10px 28px rgba(14, 165, 233, .2) !important;
  font: inherit !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  transform: none !important;
}
html body .fsbLoginCard .fsbLoginRemember {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: var(--fsb-login-muted) !important;
}
html body .fsbLoginCard .fsbLoginStatus {
  display: block !important;
  width: 100% !important;
  min-height: 1.4rem !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 10px !important;
  color: var(--fsb-login-muted) !important;
  background: rgba(15, 23, 42, .54) !important;
  box-sizing: border-box !important;
}

html[data-fsb-login-app="mobileAdmin"] body:not(.mobileAdminLoggedIn) .mWrap,
html[data-fsb-login-app="desktopAdmin"] body:not(.loggedIn) .deskContent {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}
html[data-fsb-login-app="desktopAdmin"] body:not(.loggedIn) #loginCard.loginBox.fsbLoginCard {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  grid-auto-columns: minmax(0, 1fr) !important;
}
html[data-fsb-login-app="desktopAdmin"] body:not(.loggedIn) #loginCard.loginBox.fsbLoginCard .fsbLoginInputRow {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: none !important;
}
html[data-fsb-login-app="desktopAdmin"] body:not(.loggedIn) #loginCard.loginBox.fsbLoginCard .fsbLoginInputRow > * {
  grid-column: auto !important;
  grid-row: auto !important;
  grid-area: auto !important;
}
html[data-fsb-login-app="mobileAdmin"] body:not(.mobileAdminLoggedIn) .mHeader,
html[data-fsb-login-app="mobileAdmin"] body:not(.mobileAdminLoggedIn) .mWrap > #statusBox,
html[data-fsb-login-app="mobileAdmin"] body:not(.mobileAdminLoggedIn) #logoutBtn,
html[data-fsb-login-app="mobileAdmin"] body:not(.mobileAdminLoggedIn) #pillGroup,
html[data-fsb-login-app="desktopAdmin"] body:not(.loggedIn) #deskHeader,
html[data-fsb-login-app="desktopAdmin"] body:not(.loggedIn) .deskFooter,
html[data-fsb-login-app="desktopAdmin"] body:not(.loggedIn) .deskNav {
  display: none !important;
}

@media (max-width: 600px) {
  html body :is(#loginCard,#myAuthCard,#qrCheckLoginCard,#mainAccessPanel,.accountingLoginCard,.attendanceAuthCard,.liteAuthCard,.loginCard).fsbLoginCard {
    padding: 20px !important;
    border-radius: 18px !important;
    gap: 12px !important;
  }
  html[data-fsb-login-app="mobileAdmin"] body:not(.mobileAdminLoggedIn) .mWrap,
  html[data-fsb-login-app="desktopAdmin"] body:not(.loggedIn) .deskContent { padding: 12px !important; }
}