:root { color-scheme: light; --field-bg: #182e49; --field-inset: inset 0 2px 5px #050f1f8c, inset 0 -1px 0 #ffffff0d; }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; font-family: 'Segoe UI', Arial, sans-serif; background: #262262; }
.login-wrapper { position: relative; isolation: isolate; overflow: hidden; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: clamp(12px, 3dvh, 32px) clamp(16px, 4vw, 64px); }
/* Animated brand gradient (logo palette: cyan -> blue -> indigo -> navy). Lives on a
   pseudo-layer so the scale pulse never moves the login card itself. The top layer
   darkens the bottom edge so the brand footer stays legible. */
.login-wrapper::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 55%, #26226273 100%), linear-gradient(45deg, #27aae1 0%, #1c75bc 38%, #2e3192 72%, #262262 100%); background-size: 100% 100%; animation: gradient-pulse 2.7s ease alternate infinite; will-change: transform, filter; }
@keyframes gradient-pulse {
  0%, 100% { transform: scale(1); filter: brightness(100%) saturate(100%); }
  50% { transform: scale(1.05); filter: brightness(110%) saturate(120%); }
}
@media (prefers-reduced-motion: reduce) { .login-wrapper::before { animation: none; } }
.login-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px 0 24px; }
.login-shell { width: min(100%, 1000px); display: grid; grid-template-columns: 1fr 1fr; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 70px #07172d40; }
.left-panel { min-width: 0; background: #fff; box-shadow: inset 0 2px 14px #0c203a1f, inset -6px 0 14px -6px #0c203a26; display: flex; align-items: center; justify-content: center; padding: 32px; }
.company-brand { width: 100%; display: flex; justify-content: center; }
.company-brand img { width: min(100%, 360px); max-height: 34dvh; object-fit: contain; }
.right-panel { min-width: 0; background: #0c203a; display: flex; align-items: center; }
.login-card { width: 100%; color: #f7f9ff; padding: clamp(22px, 5dvh, 52px) clamp(22px, 3vw, 46px); }
.login-title { font-size: clamp(24px, 2vw, 32px); font-weight: 700; text-align: center; margin: 0 0 8px; }
.login-subtitle { text-align: center; font-size: 16px; margin: 0 0 clamp(16px, 3dvh, 30px); color: #dae7f6; }
.login-card .form-label { font-size: 15px; margin-bottom: 6px; }
.login-field { margin-bottom: clamp(12px, 2.4dvh, 24px); }
.login-card .form-control, .login-card .form-select { width: 100%; min-height: clamp(44px, 6dvh, 58px); border: 1px solid #3a5474; border-radius: 10px; background-color: var(--field-bg); color: #f7f9ff; font-size: 16px; box-shadow: var(--field-inset); }
.login-card .form-select option { background: var(--field-bg); }
.login-card .form-control:focus, .login-card .form-select:focus { border-color: #51baff; box-shadow: var(--field-inset), 0 0 0 3px #51baff25; }
.login-card .form-control:autofill { color: #f7f9ff; caret-color: #f7f9ff; box-shadow: var(--field-inset), inset 0 0 0 1000px var(--field-bg); }
.login-card .form-control:autofill:focus { box-shadow: var(--field-inset), inset 0 0 0 1000px var(--field-bg), 0 0 0 3px #51baff25; }
.login-card .form-control:-webkit-autofill, .login-card .form-control:-webkit-autofill:hover, .login-card .form-control:-webkit-autofill:active { -webkit-text-fill-color: #f7f9ff; caret-color: #f7f9ff; -webkit-box-shadow: var(--field-inset), inset 0 0 0 1000px var(--field-bg); box-shadow: var(--field-inset), inset 0 0 0 1000px var(--field-bg); }
.login-card .form-control:-webkit-autofill:focus { -webkit-text-fill-color: #f7f9ff; caret-color: #f7f9ff; -webkit-box-shadow: var(--field-inset), inset 0 0 0 1000px var(--field-bg), 0 0 0 3px #51baff25; box-shadow: var(--field-inset), inset 0 0 0 1000px var(--field-bg), 0 0 0 3px #51baff25; }
.input-with-icon { position: relative; }
.input-with-icon .form-control { padding-left: 48px; }
.input-with-icon > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: #bce9ff; pointer-events: none; }
.input-with-icon #password { padding-right: 52px; }
.password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; color: #fff; background: transparent; }
.password-toggle svg { width: 24px; height: 24px; }
.password-toggle:hover { background: #ffffff12; }
.password-toggle:focus-visible { outline: 2px solid #51baff; }
.password-links { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.password-links a { color: #72cfff; text-decoration: none; font-size: 13px; }
.password-links a:hover { text-decoration: underline; }
/* Dimensional button: lit top edge, shaded bottom lip, colored drop shadow */
.login-card .btn-primary { width: 100%; min-height: clamp(44px, 6dvh, 58px); font-size: 18px; font-weight: 700; letter-spacing: .2px; color: #fff; border-radius: 999px; border: 1px solid #1b4f8f; background: linear-gradient(180deg, #2b68ad 0%, #235a9c 55%, #1d4d8a 100%); text-shadow: 0 1px 1px #0a1a3366; box-shadow: inset 0 1px 0 #ffffff2e, inset 0 -2px 0 #0a1a3340, 0 4px 10px -4px #050f1f80; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.login-card .btn-primary:hover { color: #fff; border-color: #1b4f8f; background: linear-gradient(180deg, #2b68ad 0%, #235a9c 55%, #1d4d8a 100%); filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 #ffffff33, inset 0 -2px 0 #0a1a3340, 0 6px 12px -5px #050f1f99; }
.login-card .btn-primary:active, .login-card .btn-primary:first-child:active { color: #fff; border-color: #1b4f8f; background: linear-gradient(180deg, #235a9c 0%, #1d4d8a 100%); filter: none; transform: translateY(1px); box-shadow: inset 0 2px 3px #0a1a3359, 0 1px 3px -1px #050f1f66; }
.login-card .btn-primary:focus-visible { color: #fff; border-color: #1b4f8f; box-shadow: inset 0 1px 0 #ffffff2e, inset 0 -2px 0 #0a1a3340, 0 0 0 3px #51baff40, 0 4px 10px -4px #050f1f80; }
@media (prefers-reduced-motion: reduce) { .login-card .btn-primary { transition: none; } .login-card .btn-primary:hover, .login-card .btn-primary:active { transform: none; } }
.branch-note { color: #c3d6e8; margin: 12px 0 0; font-size: 12px; }
.brand-footer { flex: 0 0 auto; width: min(100%, 940px); margin-inline: auto; text-align: center; }
.brand-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 2vw, 28px); align-items: center; }
.brand-grid img { width: 100%; height: clamp(28px, 5dvh, 48px); object-fit: contain; }
.login-footer { color: #e0eaf7; border-top: 1px solid #bcd6f233; margin-top: 14px; padding-top: 12px; font-size: 12px; }
.modal-dialog { margin: 12px auto; width: calc(100% - 24px); max-width: 500px; }
.modal-dialog-centered { min-height: calc(100% - 24px); }
.modal-content { max-height: calc(100dvh - 24px); }
.modal-body { overflow-y: auto; }
@media (max-width: 650px) {
  .login-wrapper { padding: 12px 16px; }
  .login-stage { padding: 0 0 12px; }
  .login-shell { max-width: 440px; grid-template-columns: 1fr; border-radius: 16px; }
  .left-panel { padding: 12px; }
  .company-brand img { width: 170px; height: clamp(60px, 12dvh, 100px); }
  .login-card { padding: 18px 22px; }
  .login-title { font-size: 24px; }
  .login-subtitle { font-size: 14px; margin-bottom: 16px; }
  .login-field { margin-bottom: 14px; }
  .brand-grid { gap: 10px; }
  .brand-grid img { height: 28px; }
  .login-footer { font-size: 10px; margin-top: 10px; padding-top: 8px; }
}
@media (max-height: 600px) {
  .login-wrapper { padding-top: 8px; padding-bottom: 8px; }
  .login-stage { padding: 0 0 8px; }
  .login-card { padding-top: 12px; padding-bottom: 12px; }
  .login-title { font-size: 22px; margin-bottom: 4px; }
  .login-subtitle { font-size: 13px; margin-bottom: 10px; }
  .login-field { margin-bottom: 10px; }
  .login-card .form-label { font-size: 14px; margin-bottom: 4px; }
  .login-card .form-control, .login-card .form-select, .login-card .btn-primary { min-height: 44px; }
  .password-links { margin-bottom: 10px; }
  .brand-grid img { height: 24px; }
  .login-footer { margin-top: 6px; padding-top: 6px; font-size: 10px; }
  .login-card .alert { padding: 6px 10px; font-size: 12px; margin-bottom: 8px; }
}
@media (max-height: 600px) and (max-width: 650px) {
  .left-panel { padding: 6px; }
  .company-brand img { height: 48px; width: 100px; }
}
@media (max-height: 430px) and (min-width: 600px) {
  .login-shell { grid-template-columns: 36% 64%; }
  .login-subtitle { display: none; }
  .login-title { font-size: 20px; margin-bottom: 8px; }
  .login-card { padding: 10px 20px; }
}
@media (max-height: 430px) and (max-width: 599px) {
  .left-panel, .login-subtitle { display: none; }
  .login-title { font-size: 20px; margin-bottom: 8px; }
  .login-card { padding: 10px 20px; }
}