.md-login { --md-accent: #e310ee; min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: grid; place-items: center; padding: 28px 24px; color: #fff; font-family: Arial, sans-serif; color-scheme: dark; background: radial-gradient(ellipse at 8% 65%, #e310ee13, transparent 48%), radial-gradient(ellipse at 90% 10%, #ee10b915, transparent 45%), #000910; position: relative; isolation: isolate; }
.md-login::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(#00091012, #00091030), url('./login-background.png') center / cover no-repeat; }
.md-login *, .md-login *::before, .md-login *::after { box-sizing: border-box; }
.md-login .md-login-layout { width: 100%; max-width: 440px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; }
.md-login .md-login-identity { min-width: 0; width: 100%; max-width: 100%; margin: 0 auto; }
.md-login .md-login-art { display: block; width: 100%; height: auto; }
.md-login .md-login-card { position: relative; padding: 40px; background: linear-gradient(135deg, #ffffff16, #ffffff06 50%, #25002730); border: 1px solid #ffffff35; border-top-color: #ffffff55; border-radius: 24px; box-shadow: inset 0 1px 0 #ffffff12, 0 24px 80px #00000040; backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%); }
.md-login .md-login-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; margin: 0 0 32px; letter-spacing: .2px; }
.md-login-brand > span { height: 8px; width: 8px; background: #7eff03; box-shadow: 0 0 12px #7eff03; }
.md-login h1 { font-family: Arial, sans-serif; font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -.8px; margin: 0 0 16px; color: #fff; }
.md-login .md-login-description { margin: 0 0 32px; font-size: 18px; line-height: 1.6; color: #c0b5c4; }
.md-login .md-login-form { display: grid; gap: 22px; margin: 0; }
.md-login .md-login-field { display: grid; gap: 9px; }
.md-login label { color: #eee8ef; font-size: 16px; font-weight: 600; }
.md-login input { display: block; width: 100%; height: 52px; margin: 0; padding: 0 15px; border: 1px solid #ffffff26; border-radius: 6px; outline: none; color: #fff; background: #00091099; font: 18px Arial, sans-serif; transition: border-color .15s, box-shadow .15s; }
.md-login input::placeholder { color: #a499aa; opacity: 1; }
.md-login input:focus { border-color: #e310ee; box-shadow: 0 0 0 3px #e310ee22; }
.md-login .md-login-password { position: relative; }
.md-login .md-login-password input { padding-right: 54px; }
.md-login .md-login-reveal { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: transparent; color: #c0b5c4; border: 0; border-radius: 4px; cursor: pointer; }
.md-login .md-login-reveal:hover { color: #fff; background: #ffffff0a; }
.md-login .md-login-submit { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 52px; padding: 12px 20px; margin-top: 4px; background: #fff; color: #000910; font: 700 18px Arial, sans-serif; border: 1px solid #fff; border-radius: 6px; box-shadow: 0 2px 16px #ffffff12; cursor: pointer; transition: background .15s, box-shadow .15s; }
.md-login .md-login-submit:hover:not(:disabled) { background: #f3edf5; box-shadow: 0 0 22px #ffffff28; }
.md-login .md-login-submit:disabled { opacity: .65; cursor: wait; }
.md-login .md-login-submit span { font-size: 22px; line-height: 1; }
.md-login .md-login-support { display: block; margin-top: 27px; text-align: center; color: #d6c6d9; font-size: 16px; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }
.md-login .md-login-support:hover { color: #fff; }
.md-login button:focus-visible, .md-login a:focus-visible { outline: 2px solid #f399fa; outline-offset: 4px; }
.md-login .md-login-error { margin: 0; padding: 12px; background: #ff728218; border: 1px solid #ff728255; border-radius: 6px; color: #ffbdc6; font-size: 16px; line-height: 1.5; }
@media (max-width: 950px) { .md-login { padding: 36px 24px; } .md-login .md-login-layout { max-width: 460px; grid-template-columns: minmax(0, 1fr); gap: 24px; } .md-login .md-login-identity { margin: 0 auto; width: 100%; max-width: 100%; } }
@media (max-width: 480px) { .md-login { padding: 18px 16px 28px; } .md-login .md-login-layout { gap: 16px; } .md-login .md-login-identity { max-width: 100%; } .md-login .md-login-card { padding: 28px 24px; } .md-login h1 { font-size: 33px; } .md-login .md-login-brand { margin-bottom: 24px; } .md-login .md-login-description { font-size: 17px; margin-bottom: 26px; } }

@keyframes academy-login-enter {
  from { opacity:0; transform:translateY(14px) scale(.99); filter:blur(4px); }
  to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.md-login .md-login-card,
.md-login .md-login-brand,
.md-login h1,
.md-login .md-login-description,
.md-login .md-login-field,
.md-login .md-login-submit,
.md-login .md-login-support { animation:academy-login-enter 420ms ease backwards; }
.md-login .md-login-brand { animation-delay:40ms; }
.md-login h1 { animation-delay:80ms; }
.md-login .md-login-description { animation-delay:120ms; }
.md-login .md-login-field:nth-child(1) { animation-delay:160ms; }
.md-login .md-login-field:nth-child(2) { animation-delay:200ms; }
.md-login .md-login-submit { animation-delay:240ms; }
.md-login .md-login-support { animation-delay:280ms; }
@media(prefers-reduced-motion:reduce) {
  .md-login .md-login-card,.md-login .md-login-brand,.md-login h1,.md-login .md-login-description,.md-login .md-login-field,.md-login .md-login-submit,.md-login .md-login-support { animation:none; }
}
.md-return-site { display:block; width:fit-content; margin:20px auto 0; padding:12px 22px; border:1px solid #80ff0060; border-radius:999px; background:#0b1516; color:#80ff00; font:600 16px/1.4 Arial,sans-serif; text-decoration:none; }
.md-return-site:hover { background:#14231c; color:#a4ff4e; }
.md-return-site:focus-visible { outline:2px solid #80ff00; outline-offset:4px; }