:root {
  --login-cream: #fffcf7;
  --login-ink: #1c2942;
  --login-text: #556175;
  --login-muted: #7c8798;
  --login-line: #e9e7e3;
  --login-coral: #f36f62;
  --login-yellow: #f5bc45;
  --login-mint: #2dbf9b;
  --login-blue: #4c8cf0;
  --login-violet: #8b79e8;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--login-ink);
  background: var(--login-cream);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

button,
input { font: inherit; }
button { cursor: pointer; }

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  align-items: center;
  gap: clamp(44px, 7vw, 104px);
  width: min(100%, 1250px);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 42px clamp(24px, 5vw, 80px);
}

.login-story {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 24px;
  min-width: 0;
}

.login-story-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  letter-spacing: 0.01em;
}

.login-story-brand strong { font-weight: 820; }

.login-story-mark {
  display: grid;
  grid-template-columns: repeat(2, 9px);
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 8px;
  border: 1px solid #f0e9de;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(86, 61, 45, 0.06);
}

.login-story-mark i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--login-coral);
}

.login-story-mark i:nth-child(2) { background: var(--login-yellow); }
.login-story-mark i:nth-child(3) { background: var(--login-mint); }
.login-story-mark i:nth-child(4) { background: var(--login-blue); }

.login-story-copy { display: grid; gap: 12px; }

.login-story-eyebrow {
  color: #d45e52;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.055em;
}

.login-story h2 {
  margin: 0;
  color: var(--login-ink);
  font-size: clamp(38px, 4.3vw, 58px);
  font-weight: 850;
  line-height: 1.17;
  letter-spacing: -0.045em;
}

.login-story p {
  max-width: 440px;
  margin: 0;
  color: var(--login-text);
  font-size: 15px;
  line-height: 1.75;
}

.login-bead-art {
  position: relative;
  display: grid;
  width: min(100%, 465px);
  height: 275px;
  overflow: hidden;
  place-items: center;
  border: 1px solid #f6ded5;
  border-radius: 28px;
  background: #fff0e8;
}

.login-bead-art::before {
  position: absolute;
  width: 245px;
  height: 245px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  content: "";
}

.login-art-orbit {
  position: absolute;
  border: 1px solid rgba(243, 111, 98, 0.21);
  border-radius: 50%;
  pointer-events: none;
}

.login-art-orbit-one { width: 355px; height: 355px; }
.login-art-orbit-two { width: 425px; height: 425px; }

.login-bead-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 30px);
  gap: 7px;
  transform: rotate(-10deg);
  filter: drop-shadow(0 12px 12px rgba(133, 78, 68, 0.12));
}

.login-bead-grid i {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.35), inset -3px -3px 0 rgba(31, 41, 59, 0.08);
}

.login-bead-grid .is-blank { visibility: hidden; }
.login-bead-grid .is-mint { background: var(--login-mint); }
.login-bead-grid .is-coral { background: var(--login-coral); }
.login-bead-grid .is-yellow { background: var(--login-yellow); }

.login-art-spark {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.login-art-spark-one {
  top: 42px;
  right: 72px;
  background: var(--login-violet);
  box-shadow: 22px 16px 0 -4px var(--login-blue);
}

.login-art-spark-two {
  bottom: 38px;
  left: 62px;
  width: 9px;
  height: 9px;
  background: var(--login-yellow);
  box-shadow: -25px -14px 0 -2px var(--login-coral);
}

.login-story-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.login-story-steps span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 11px;
  border-radius: 999px;
  color: #496a65;
  background: #e9f8f3;
  font-size: 11px;
  font-weight: 730;
}

.login-story-steps span::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--login-mint);
  content: "";
}

.login-story-steps span:nth-child(2) { color: #aa6754; background: #fff0ea; }
.login-story-steps span:nth-child(2)::before { background: var(--login-coral); }
.login-story-steps span:nth-child(3) { color: #516da2; background: #edf3ff; }
.login-story-steps span:nth-child(3)::before { background: var(--login-blue); }

.login-panel {
  position: relative;
  width: 100%;
  padding: 34px;
  border: 1px solid #f0ebe3;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 26px 65px rgba(59, 57, 61, 0.08), 0 5px 16px rgba(59, 57, 61, 0.03);
}

.login-panel::before {
  position: absolute;
  top: 35px;
  right: 34px;
  width: 64px;
  height: 10px;
  background:
    radial-gradient(circle at 5px 5px, var(--login-coral) 0 4px, transparent 4.5px),
    radial-gradient(circle at 22px 5px, var(--login-yellow) 0 4px, transparent 4.5px),
    radial-gradient(circle at 39px 5px, var(--login-mint) 0 4px, transparent 4.5px),
    radial-gradient(circle at 56px 5px, var(--login-violet) 0 4px, transparent 4.5px);
  content: "";
}

.login-brand {
  display: grid;
  gap: 3px;
  margin-bottom: 23px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--login-line);
}

.login-brand > div { display: grid; gap: 4px; min-width: 0; }

.login-brand > div > span {
  color: #5970a4;
  font-size: 11px;
  font-weight: 780;
}

.login-brand h1 {
  margin: 0;
  color: var(--login-ink);
  font-size: 29px;
  font-weight: 830;
  line-height: 1.2;
}

.login-brand p {
  margin: 0;
  color: var(--login-muted);
  font-size: 12px;
  line-height: 1.5;
}

.login-form { display: grid; gap: 15px; }

.login-form-heading { display: grid; gap: 3px; margin-bottom: 2px; }
.login-form-heading strong { font-size: 20px; font-weight: 800; }
.login-form-heading span { color: var(--login-muted); font-size: 12px; }

.login-field {
  display: grid;
  gap: 7px;
  color: #49566c;
  font-size: 13px;
  font-weight: 730;
}

.login-input {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-height: 54px;
  padding: 0 13px;
  border: 1px solid #e3e7ed;
  border-radius: 13px;
  background: #fbfcfd;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.login-input::before {
  grid-column: 1;
  width: 18px;
  height: 18px;
  color: #91a0b6;
  background: currentColor;
  content: "";
  -webkit-mask: var(--login-input-icon) center / contain no-repeat;
  mask: var(--login-input-icon) center / contain no-repeat;
}

.login-input-user {
  --login-input-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm-8 10a8 8 0 0 1 16 0H4Z'/%3E%3C/svg%3E");
}

.login-input-password {
  --login-input-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 9V7a5 5 0 0 1 10 0v2h1.5A1.5 1.5 0 0 1 20 10.5v10A1.5 1.5 0 0 1 18.5 22h-13A1.5 1.5 0 0 1 4 20.5v-10A1.5 1.5 0 0 1 5.5 9H7Zm2 0h6V7a3 3 0 1 0-6 0v2Zm3 5a2 2 0 0 0-1 3.73V20h2v-2.27A2 2 0 0 0 12 14Z'/%3E%3C/svg%3E");
  grid-template-columns: 28px minmax(0, 1fr) 40px;
  padding-right: 5px;
}

.login-input:focus-within {
  border-color: var(--login-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(76, 140, 240, 0.12);
}

.login-input input {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 4px;
  border: 0;
  outline: 0;
  color: var(--login-ink);
  background: transparent;
  font-size: 16px;
}

.login-input input::placeholder { color: #a2acba; }

.login-password-toggle {
  grid-column: 3;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: #8997ab;
  background: transparent;
}

.login-password-toggle::before {
  width: 18px;
  height: 18px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c5.5 0 9.7 4.8 10 7-.3 2.2-4.5 7-10 7S2.3 14.2 2 12c.3-2.2 4.5-7 10-7Zm0 2c-3.7 0-6.9 2.9-7.8 5 .9 2.1 4.1 5 7.8 5s6.9-2.9 7.8-5c-.9-2.1-4.1-5-7.8-5Zm0 2.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c5.5 0 9.7 4.8 10 7-.3 2.2-4.5 7-10 7S2.3 14.2 2 12c.3-2.2 4.5-7 10-7Zm0 2c-3.7 0-6.9 2.9-7.8 5 .9 2.1 4.1 5 7.8 5s6.9-2.9 7.8-5c-.9-2.1-4.1-5-7.8-5Zm0 2.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.login-password-toggle:hover,
.login-password-toggle[aria-pressed="true"] {
  color: var(--login-blue);
  background: #edf3ff;
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 24px;
  margin-top: -2px;
  color: var(--login-text);
  font-size: 11px;
}

.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-weight: 720;
  white-space: nowrap;
}

.login-remember input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--login-blue);
}

.login-credential-hint { color: var(--login-muted); text-align: right; }

.login-submit {
  position: relative;
  min-height: 54px;
  margin-top: 3px;
  padding: 0 48px 0 20px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: var(--login-blue);
  box-shadow: 0 11px 23px rgba(76, 140, 240, 0.21);
  font-size: 15px;
  font-weight: 800;
  transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.login-submit::after {
  position: absolute;
  top: 50%;
  right: 21px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.login-submit:hover { background: #347be8; box-shadow: 0 13px 25px rgba(76, 140, 240, 0.27); }
.login-submit:active { transform: translateY(1px); }
.login-submit:disabled { cursor: wait; opacity: 0.62; box-shadow: none; }

.login-message {
  min-height: 20px;
  margin: -2px 0 0;
  color: #be4552;
  font-size: 12px;
  font-weight: 680;
}

.login-panel-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--login-line);
  color: var(--login-muted);
  font-size: 11px;
  line-height: 1.5;
}

.login-panel-foot span {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--login-mint);
  box-shadow: 0 0 0 4px #e5f8ee;
}

.login-password-toggle:focus-visible,
.login-remember input:focus-visible,
.login-submit:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 0;
  box-shadow: 0 0 0 6px #4c8cf0;
}

@media (max-width: 800px) {
  .login-shell {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 26px;
    width: min(100%, 510px);
    padding: calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  }

  .login-story { gap: 12px; }
  .login-story-copy { gap: 6px; }
  .login-story h2 { font-size: clamp(28px, 7vw, 36px); }
  .login-story h2 br { display: none; }
  .login-story p { font-size: 13px; }
  .login-bead-art { display: none; }
  .login-story-steps { gap: 6px; }
  .login-story-steps span { min-height: 28px; font-size: 10px; }
  .login-panel { padding: 29px 25px 24px; }
}

@media (max-width: 390px) {
  .login-shell { gap: 20px; padding-right: 16px; padding-left: 16px; }
  .login-story { gap: 8px; }
  .login-story p { display: none; }
  .login-story-steps { display: none; }
  .login-panel { padding: 25px 20px 20px; border-radius: 22px; }
  .login-brand { margin-bottom: 19px; padding-bottom: 18px; }
  .login-brand h1 { font-size: 26px; }
  .login-form { gap: 13px; }
}

@media (min-width: 801px) and (max-height: 760px) {
  .login-shell { padding-top: 24px; padding-bottom: 24px; }
  .login-story { gap: 15px; }
  .login-bead-art { height: 210px; }
  .login-bead-grid { transform: scale(0.82) rotate(-10deg); }
  .login-story h2 { font-size: clamp(34px, 3.6vw, 48px); }
}