:root {
  color-scheme: light;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #253346;
  background: #e8ecf1;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: linear-gradient(125deg, #8196b0 0%, #b8cbe5 23%, #f5f7fb 48%, #d9e5f5 65%, #7aa6dc 100%); }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.access-main { flex: 1; width: 100%; display: grid; place-items: center; padding: 28px 20px; }
.login {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 448px;
  overflow: hidden;
  border: 1px solid #ffffffed;
  border-radius: 22px;
  background: #e8edf4;
  box-shadow: 0 26px 65px #33435b24, 0 5px 16px #33435b12, 0 0 0 1px #839bb329;
}
.login-atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit; }
.login-colors {
  position: absolute;
  inset: -80%;
  background: conic-gradient(from 0deg, #ffffff 0deg, #9fc4f0 85deg, #edf1f7 160deg, #c0cad7 245deg, #ffffff 360deg);
  animation: login-rotate 20s linear infinite;
  will-change: transform;
}
.login-sheen {
  position: absolute;
  inset: -80%;
  background: linear-gradient(120deg, transparent 20%, #ffffff00 38%, #ffffff8c 47%, #ffffffcc 49.7%, #ffffff08 50.2%, transparent 63%, #4f75ab14 78%);
  animation: login-rotate 20s linear infinite;
  will-change: transform;
}
.login::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #b5c4d8, #397ee1, #ffffff, #8ba7d0); background-size: 250% 100%; animation: edge-flow 8s ease-in-out infinite alternate; }
.login-brand { display: grid; grid-template-columns: minmax(0, 164px) max-content; justify-content: center; align-items: center; gap: 24px; padding: 24px 32px; text-align: center; border-bottom: 1px solid #637c9c29; }
.login-brand img { display: block; width: 100%; height: auto; aspect-ratio: 180 / 93; margin: 0; object-fit: contain; }
.login-brand h1 { display: grid; gap: 3px; margin: 0; font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: 0; }
.login-brand h1 .login-brand-separator { font-size: 16px; line-height: 10px; color: #6b819d; }
.login-brand h1 .login-brand-name { color: #215aa4; }
.login-body { padding: 24px 36px 28px; }
#login-form { display: grid; gap: 20px; }
.login-field { display: grid; gap: 8px; min-width: 0; }
.login-field label { font-size: 13px; font-weight: 600; color: #324865; }
.login-input { display: flex; align-items: center; min-height: 52px; border: 1px solid #aebed2; border-radius: 10px; background: #ffffffed; box-shadow: 0 2px 4px #30476005; transition: border-color .2s, box-shadow .2s, background .2s; }
.login-input:focus-within { border-color: #387ed5; box-shadow: 0 0 0 4px #397ee11a, 0 3px 10px #275e9f12; background: #fff; }
.login-input > i { width: 17px; flex: 0 0 17px; margin-left: 15px; font-size: 15px; color: #6d88ad; text-align: center; }
.login-input:focus-within > i { color: #286abe; }
.login-input input { width: 100%; min-width: 0; height: 50px; padding: 12px; border: 0; outline: none; border-radius: 10px; background: transparent; color: #253346; font-size: 16px; }
.login-input input::placeholder { color: #7a8ba3; opacity: 1; }
.password-toggle { flex: 0 0 44px; align-self: stretch; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #607a9c; }
.password-toggle:hover { background: #e9f0fa; color: #215aa4; }
.password-toggle:focus-visible, .login-submit:focus-visible { outline: 3px solid #276bc2; outline-offset: 4px; }
.login-submit { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 52px; margin-top: 4px; padding: 13px 20px; border: 1px solid #ffffff59; border-radius: 10px; background: linear-gradient(110deg, #367fde, #2866b8 60%, #455d7f); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 6px 18px #3264a330, inset 0 1px #ffffff24; transition: box-shadow .2s, transform .2s, filter .2s; }
.login-submit::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, #fff3 50%, transparent 75%); transform: translateX(-110%); transition: transform .7s ease; pointer-events: none; }
.login-submit i { font-size: 14px; transition: transform .2s; }
.login-submit:hover { box-shadow: 0 9px 24px #3264a340; transform: translateY(-1px); filter: brightness(1.06); }
.login-submit:hover::before { transform: translateX(110%); }
.login-submit:hover i { transform: translateX(3px); }
.login-submit:active { transform: translateY(0); }
.login-footer { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 14px; border-top: 1px solid #637c9c29; color: #4c6482; font-size: 12px; }
.login-footer i { font-size: 10px; color: #326bb8; }
.login-error { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid #edbebe; border-radius: 8px; background: #fff5f5; color: #a52d2d; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.login-error i { margin-top: 3px; }
.caps-lock { color: #835410; font-size: 12px; }
.page-hidden .login-colors, .page-hidden .login-sheen, .page-hidden .login::before { animation-play-state: paused; }

@keyframes login-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes edge-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

@media (max-width: 520px) {
  .access-main { padding: 20px 16px; }
  .login { border-radius: 20px; }
  .login-brand { grid-template-columns: minmax(0, 144px) max-content; gap: 16px; padding: 22px 20px; }
  .login-brand h1 { font-size: 22px; }
  .login-body { padding: 22px 24px 24px; }
}
@media (max-height: 740px) {
  .access-main { padding-top: 16px; padding-bottom: 16px; }
  .login-brand { padding-top: 18px; padding-bottom: 18px; }
  .login-body { padding-top: 20px; padding-bottom: 22px; }
  #login-form { gap: 16px; }
  .login-footer { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .login-colors, .login-sheen { will-change: auto; }
}