.scd-login-page {
  margin: 0;
  min-width: 320px;
  color: #fff;
  background: #000011;
  font-family: "Kumbh Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.scd-login-page *,
.scd-login-page *::before,
.scd-login-page *::after { box-sizing: border-box; }

.scd-login {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 100vh;
  padding: 32px 20px;
  background:
    radial-gradient(circle at 50% -15%, rgba(0,165,230,.18), transparent 34rem),
    linear-gradient(155deg, #000011 0%, #060819 55%, #020310 100%);
}

.scd-login__glow { position: absolute; z-index: -1; width: 30rem; height: 30rem; border-radius: 50%; filter: blur(100px); opacity: .14; animation: scd-login-float 9s ease-in-out infinite alternate; }
.scd-login__glow--one { top: 12%; left: -18rem; background: #00a5e6; }
.scd-login__glow--two { right: -18rem; bottom: 4%; background: #009e94; animation-delay: -4s; }

.scd-login__shell {
  width: min(470px, 100%);
  padding: 34px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 34px 100px rgba(0,0,0,.42);
  backdrop-filter: blur(22px);
  animation: scd-login-enter .55s cubic-bezier(.2,.75,.25,1) both;
}

.scd-login__brand { display: inline-flex; align-items: center; }
.scd-login__brand img { display: block; width: 210px; height: auto; }
.scd-login__intro { margin: 40px 0 27px; }
.scd-login__intro > span { color: #72d7e8; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.scd-login__intro h1 { margin: 9px 0 0; font-size: clamp(34px, 7vw, 46px); line-height: 1.08; letter-spacing: -.045em; }
.scd-login__intro p { margin: 13px 0 0; color: #aeb4c3; font-size: 14px; line-height: 1.6; }
.scd-login__error { margin-bottom: 18px; padding: 12px 14px; border: 1px solid rgba(205,82,100,.32); border-radius: 14px; color: #efb4bd; background: rgba(184,69,85,.1); font-size: 12px; line-height: 1.5; }
.scd-login__form > label { display: block; margin-bottom: 16px; }
.scd-login__form > label > span { display: block; margin: 0 0 7px 3px; color: #b8bdc8; font-size: 11px; font-weight: 600; }
.scd-login__form input[type="text"],
.scd-login__form input[type="password"] { width: 100%; height: 52px; padding: 0 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; outline: 0; color: #f7f8fa; background: rgba(255,255,255,.045); font: inherit; font-size: 14px; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.scd-login__form input:focus { border-color: rgba(0,165,230,.58); background: rgba(0,165,230,.055); box-shadow: 0 0 0 3px rgba(0,165,230,.08); }
.scd-login__password { position: relative; }
.scd-login__password input { padding-right: 52px !important; }
.scd-login__password button { position: absolute; top: 50%; right: 8px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px; color: #9299a8; background: transparent; cursor: pointer; transform: translateY(-50%); }
.scd-login__password button:hover { color: #72d7e8; background: rgba(0,165,230,.08); }
.scd-login__password svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.scd-login__options { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 5px 0 24px; color: #9299a8; font-size: 11px; }
.scd-login__options a { color: #75d5e6; text-decoration: none; }
.scd-login__forgot { padding: 0; border: 0; color: #75d5e6; background: none; font: inherit; cursor: pointer; }
.scd-login__remember { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.scd-login__remember input { accent-color: #009e94; }
.scd-login__submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 52px; border: 0; border-radius: 26px; color: #fff; background: linear-gradient(100deg, #00a5e6, #009e94); box-shadow: 0 14px 30px rgba(0,165,230,.16); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.scd-login__submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.scd-login__support { margin: 23px 0 0; color: #697284; font-size: 10px; text-align: center; }
.scd-login-page :focus-visible { outline: 2px solid #58d8df; outline-offset: 3px; }
.scd-login-help { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: .2s ease; }
.scd-login-help.is-open { opacity: 1; visibility: visible; }
.scd-login-help__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,14,.76); backdrop-filter: blur(8px); cursor: default; }
.scd-login-help__card { position: relative; width: min(390px, 100%); padding: 31px; border: 1px solid rgba(255,255,255,.16); border-radius: 27px; background: #090b1d; box-shadow: 0 30px 90px rgba(0,0,0,.6); transform: translateY(12px) scale(.985); transition: .22s ease; }
.scd-login-help.is-open .scd-login-help__card { transform: none; }
.scd-login-help__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: #fff; background: rgba(255,255,255,.04); font-size: 23px; cursor: pointer; }
.scd-login-help__card > span { color: #72d7e8; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.scd-login-help h2 { margin: 10px 38px 0 0; font-size: 23px; line-height: 1.3; }
.scd-login-help p { margin: 19px 0 3px; color: #9299a8; font-size: 12px; }
.scd-login-help a { color: #72d7e8; font-size: 17px; font-weight: 600; text-decoration: none; }

@keyframes scd-login-enter { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes scd-login-float { to { transform: translate3d(25px,-18px,0) scale(1.06); } }

@media (max-width: 520px) {
  .scd-login { padding: 12px; }
  .scd-login__shell { padding: 25px 20px; border-radius: 25px; }
  .scd-login__brand img { width: 180px; }
  .scd-login__intro { margin-top: 32px; }
  .scd-login__options { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .scd-login__shell,
  .scd-login__glow { animation: none; }
}