:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  color: #f5fbff;
  background: #061631;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; min-width: 320px; background: #061631; }
button, input { font: inherit; }

.login-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  overflow: hidden;
  padding: 44px 22px;
  background-color: #061631;
  background-image:
    linear-gradient(rgba(91, 175, 218, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 175, 218, .07) 1px, transparent 1px),
    linear-gradient(145deg, transparent 0 38%, rgba(30, 122, 170, .11) 55%, transparent 70%);
  background-size: 84px 84px, 84px 84px, 100% 100%;
}

.login-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -12%;
  left: -8%;
  width: 72%;
  height: 58%;
  opacity: .42;
  background: repeating-linear-gradient(136deg, transparent 0 25px, rgba(125, 210, 236, .12) 26px, transparent 27px 52px);
  clip-path: polygon(0 0, 100% 0, 67% 68%, 0 100%);
  pointer-events: none;
}

.login-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -240px;
  width: min(1160px, 150vw);
  height: 430px;
  border: 1px solid rgba(75, 219, 226, .42);
  border-radius: 50%;
  opacity: .75;
  transform: translateX(-50%) rotate(-6deg);
  box-shadow:
    0 -18px 0 -1px rgba(75, 219, 226, .24),
    0 -36px 0 -1px rgba(80, 180, 232, .18),
    0 -54px 0 -1px rgba(113, 126, 232, .12),
    0 -72px 0 -1px rgba(75, 219, 226, .09);
  pointer-events: none;
}

.login-panel {
  position: relative;
  isolation: isolate;
  width: min(430px, 100%);
  padding: 30px 34px 24px;
  border: 1px solid rgba(142, 224, 244, .4);
  border-radius: 22px;
  background: rgba(7, 27, 57, .82);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(18px);
}

.login-panel::before,
.login-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(122, 205, 232, .35);
  clip-path: polygon(50% 0, 94% 24%, 94% 76%, 50% 100%, 6% 76%, 6% 24%);
}

.login-panel::before {
  inset: -54px -72px;
  opacity: .34;
  transform: rotate(4deg);
}

.login-panel::after {
  inset: -34px -50px;
  border-color: rgba(132, 123, 241, .34);
  opacity: .3;
  transform: rotate(-11deg);
}

.login-brand {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 2px 0 18px;
  text-align: center;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(134, 244, 238, .9);
  border-radius: 50%;
  color: #08233f;
  background: #61e7df;
  box-shadow: 0 0 0 7px rgba(97, 231, 223, .08), 0 0 28px rgba(67, 225, 226, .32);
  font-size: 17px;
  font-weight: 900;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(113, 210, 239, .32);
  border-radius: 50%;
}

.login-brand > div { display: grid; gap: 3px; }
.login-brand strong { color: #f5fbff; font-size: 15px; }
.login-brand span { color: #8eaec7; font-size: 11px; }
.login-heading { padding: 10px 0 23px; text-align: center; }
.login-heading > span { color: #64e4dd; font-size: 10px; font-weight: 800; }
.login-heading h1 { margin: 8px 0 8px; color: #ffffff; font-size: 25px; letter-spacing: 0; }
.login-heading p { margin: 0; color: #8ca6bd; font-size: 12px; }

form { display: grid; gap: 15px; padding: 0; }
label { display: grid; gap: 7px; color: #c8d9e7; font-size: 12px; font-weight: 700; }
input[type="text"], input[type="password"] {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(136, 180, 207, .38);
  border-radius: 8px;
  outline: 0;
  color: #f7fdff;
  background: rgba(3, 16, 38, .72);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder { color: #6d879d; }
input[type="text"]:focus, input[type="password"]:focus {
  border-color: #64e4dd;
  background: rgba(3, 20, 44, .92);
  box-shadow: 0 0 0 3px rgba(100, 228, 221, .14), 0 0 18px rgba(74, 202, 223, .12);
}

.show-password { display: flex; align-items: center; gap: 8px; margin-top: -3px; color: #8da6bb; font-size: 11px; font-weight: 400; cursor: pointer; }
.show-password input { width: 15px; height: 15px; accent-color: #63e4dc; }

button {
  height: 46px;
  border: 1px solid rgba(130, 255, 242, .72);
  border-radius: 8px;
  color: #06223d;
  background: #58ddd7;
  box-shadow: 0 8px 22px rgba(47, 217, 211, .22);
  cursor: pointer;
  font-weight: 800;
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}

button:hover { background: #78eee4; box-shadow: 0 10px 28px rgba(47, 217, 211, .32); }
button:active { transform: translateY(1px); }
button:disabled { cursor: wait; opacity: .62; }
button:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

.form-message { min-height: 18px; margin: -3px 0 0; color: #ff9c9c; font-size: 11px; line-height: 1.5; text-align: center; }
footer { display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; margin-top: 7px; color: #7796ad; font-size: 10px; }
.secure-dot { width: 7px; height: 7px; border-radius: 50%; background: #65e5dc; box-shadow: 0 0 0 3px rgba(101, 229, 220, .13), 0 0 12px rgba(101, 229, 220, .45); }

@media (max-width: 640px) {
  .login-shell { padding: 30px 18px; }
  .login-panel { width: min(100%, 410px); padding: 27px 24px 21px; border-radius: 18px; }
  .login-panel::before { inset: -34px -42px; }
  .login-panel::after { inset: -23px -30px; }
}

@media (max-width: 380px) {
  .login-shell { padding: 20px 14px; }
  .login-panel { padding: 24px 20px 18px; }
  .login-heading h1 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}