:root { font-family: 'IBM Plex Sans', sans-serif; color-scheme: light; }
html, body { min-height: 100%; }
body { margin: 0; font-family: 'IBM Plex Sans', sans-serif; }
.login-page {
  position: relative; isolation: isolate; display: grid; place-items: center;
  min-height: 100svh; padding: 36px 20px; overflow: hidden;
  background: radial-gradient(circle at 46% 0%, #8adbd9 0, #30b6bc 31%, transparent 62%),
              linear-gradient(135deg, #0e9ba8 0%, #087888 63%, #0093a0 100%);
}
.login-page::before {
  content: ''; position: absolute; z-index: -1; width: 120vw; height: 65vh;
  left: -9vw; bottom: -49vh; border-radius: 48% 65% 0 0;
  background: rgba(0, 103, 119, .22); transform: rotate(8deg);
}
.login-page::after {
  content: ''; position: absolute; z-index: -1; width: 56vw; height: 43vh;
  right: -16vw; bottom: 8vh; border-radius: 70% 0 0 35%;
  background: rgba(91, 217, 219, .25); transform: rotate(-19deg);
}
.login-page:has(.login-card .alert:not([hidden])) { place-items: start center; overflow-x: hidden; overflow-y: auto; }
.login-decoration { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.login-decoration-top { width: 560px; height: 560px; left: -155px; top: -290px; background: rgba(178, 240, 235, .25); }
.login-decoration-left { width: 320px; height: 320px; left: -87px; top: 10%; background: rgba(0, 93, 112, .19); }
.login-decoration-bottom { width: 42vw; height: 26vw; left: -8vw; bottom: -16vw; background: rgba(0, 101, 119, .15); }
.login-book { position: absolute; z-index: -1; width: min(39vw, 575px); right: -1%; bottom: -6%; opacity: .24; pointer-events: none; }
.login-card {
  width: min(100%, 440px); padding: 32px 28px 28px; background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255,255,255,.7); border-radius: 17px;
  box-shadow: 0 26px 60px rgba(0, 52, 64, .23);
}
.login-header { display: flex; justify-content: center; align-items: center; gap: 11px; margin: 0 0 28px; }
.login-logo { width: 82px; height: auto; object-fit: contain; }
.login-brand-text { min-width: 0; }
.login-brand-text h1 { margin: 0; color: #0b224d; font-size: clamp(21px, 2.2vw, 25px); font-weight: 700; line-height: 1.2; white-space: nowrap; letter-spacing: -.04em; }
.login-brand-text h1 span { color: #008e94; }
.login-brand-text p { margin: 5px 0 0; color: #6680aa; font-size: 15px; }
.login-field { position: relative; margin-bottom: 14px; }
.login-field input, .login-field select {
  display: block; width: 100%; height: 52px; padding: 0 50px 0 52px;
  border: 1px solid #d0e0ee; border-radius: 10px; outline: 0;
  background: #f5f9fe; color: #102b53; font: inherit; font-size: 16px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.login-field select { appearance: none; background: #fff; cursor: pointer; }
.login-field select:invalid { color: #61799f; }
.login-field input::placeholder { color: #6781a9; opacity: 1; }
.login-field input:focus, .login-field select:focus { border-color: #1399aa; background: #fff; box-shadow: 0 0 0 4px rgba(19, 153, 170, .13); }
.login-field-icon { position: absolute; top: 50%; left: 17px; transform: translateY(-50%); color: #506c96; font-size: 20px; pointer-events: none; }
.login-select-arrow { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); color: #46658f; font-size: 18px; pointer-events: none; }
.login-password-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: #506c96; font-size: 20px; }
.login-password-toggle:hover, .login-password-toggle:focus-visible { color: #007f93; background: #e6f4f7; outline: none; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 52px; margin-top: 18px; border: 0; border-radius: 10px; background: linear-gradient(100deg, #008e9b, #0094a0); color: #fff; font: inherit; font-size: 18px; font-weight: 700; box-shadow: 0 9px 16px rgba(0, 112, 126, .12); transition: filter .18s, transform .18s; }
.login-submit i { font-size: 20px; }
.login-submit:hover { filter: brightness(.94); }
.login-submit:active { transform: translateY(1px); }
.login-submit:focus-visible { outline: 3px solid #093b69; outline-offset: 3px; }
.login-submit:disabled { opacity: .7; cursor: wait; }
.login-links { display: flex; justify-content: flex-end; margin-top: 18px; }
.login-links a { color: #0090a5; font-size: 15px; text-decoration: none; }
.login-links a:hover { text-decoration: underline; }
#messageBox[hidden] { display: none !important; }
#messageBox { margin-bottom: 19px; }
@media (max-width: 575px) {
  .login-page { padding: 22px 16px; }
  .login-card { padding: 26px 20px 24px; border-radius: 16px; }
  .login-header { gap: 8px; margin-bottom: 24px; }
  .login-logo { width: 68px; }
  .login-brand-text h1 { font-size: clamp(19px, 5vw, 23px); }
  .login-brand-text p { font-size: 13px; }
  .login-field input, .login-field select { height: 50px; padding-left: 48px; font-size: 16px; }
  .login-field-icon { left: 18px; font-size: 20px; }
  .login-submit { min-height: 50px; font-size: 18px; }
  .login-links a { font-size: 15px; }
  .login-book { width: 72vw; opacity: .15; }
}
@media (max-width: 365px) {
  .login-logo { width: 56px; }
  .login-brand-text h1 { font-size: 19px; }
}
@media (max-height: 700px) {
  .login-page { place-items: start center; overflow-x: hidden; overflow-y: auto; }
}