:root {
  color-scheme: light;
  --navy: #072753;
  --blue: #1264df;
  --blue-dark: #0d4fbd;
  --cyan: #37c5ef;
  --ink: #14243a;
  --muted: #728097;
  --line: #dce5f0;
  --surface: #ffffff;
  --background: #f3f7fc;
  --danger: #d83d4c;
  --success: #16a06f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.page-shell {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: 176px;
  padding: max(24px, env(safe-area-inset-top)) 20px 32px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(8,46,101,.18), rgba(10,76,170,.05)),
    url("/assets/platform-background.jpg") center 72% / cover no-repeat;
}

.brand {
  position: relative;
  z-index: 1;
  width: min(30vw, 150px);
}

.brand__logo { display: block; width: 80%; height: auto; }

.hero__copy { position: relative; z-index: 1; margin-top: 16px; }
.hero__copy h1 { margin: 0; max-width: 340px; font-size: clamp(22px, 5.3vw, 27px); line-height: 1.25; letter-spacing: .03em; text-shadow: 0 2px 14px rgba(5,28,75,.2); }

.content {
  position: relative;
  z-index: 2;
  width: min(100%, 660px);
  margin: -22px auto 0;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
}

.steps {
  display: flex;
  align-items: flex-start;
  padding: 21px 18px 18px;
  border: 1px solid rgba(20,70,130,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 40px rgba(9,45,89,.11);
}

.step { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 7px; color: #a0abba; }
.step__dot {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #dce3ec;
  border-radius: 50%;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
.step__label { font-size: 11px; white-space: nowrap; }
.step__line { flex: 1 1 auto; height: 1px; margin: 15px 8px 0; background: #e2e8f0; }
.step.is-active, .step.is-complete { color: var(--blue); }
.step.is-active .step__dot { border-color: var(--blue); color: #fff; background: var(--blue); box-shadow: 0 4px 12px rgba(18,100,223,.3); }
.step.is-complete .step__dot { border-color: #b7d0f4; color: var(--blue); background: #eaf3ff; }
.step__line.is-complete { background: #7eafea; }

.card {
  margin-top: 16px;
  padding: 25px 20px 22px;
  border: 1px solid rgba(20,70,130,.08);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 10px 34px rgba(9,45,89,.08);
}

.card__heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 26px; }
.section-icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: var(--blue);
  background: #edf5ff;
}
.section-icon svg { width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.card__kicker { margin: 0 0 4px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.card__heading h2, .success-card h2 { margin: 0; font-size: 21px; letter-spacing: .01em; }
.card__heading p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.field { margin-bottom: 17px; }
.field label { display: block; margin: 0 0 8px 2px; font-size: 13px; font-weight: 650; }
.input-wrap { position: relative; }
.input-wrap input {
  width: 100%;
  height: 50px;
  padding: 0 45px 0 43px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: 0;
  color: var(--ink);
  background: #fbfdff;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.input-wrap input::placeholder { color: #adb7c5; font-size: 13px; }
.input-wrap input:focus { border-color: #5e9beb; background: #fff; box-shadow: 0 0 0 3px rgba(18,100,223,.1); }
.input-wrap.has-error input { border-color: var(--danger); background: #fffafb; }
.input-icon { position: absolute; top: 50%; left: 14px; color: #8d9bad; transform: translateY(-50%); pointer-events: none; }
.input-icon svg, .password-toggle svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.input-wrap--action input { padding-right: 118px; }
.input-wrap--action .inline-action { position: absolute; top: 7px; right: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; color: var(--blue); background: #edf5ff; font-size: 12px; font-weight: 650; cursor: pointer; }
.inline-action:disabled { color: #8a98a9; background: #edf1f6; cursor: not-allowed; }
.password-toggle { position: absolute; top: 0; right: 0; display: grid; width: 46px; height: 50px; place-items: center; border: 0; color: #8d9bad; background: transparent; cursor: pointer; }
.field-hint { margin: 6px 2px 0; color: #8b98aa; font-size: 11px; }
.field-error { min-height: 0; margin: 5px 2px 0; color: var(--danger); font-size: 11px; }
.field-error:empty { display: none; }

.password-rules { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 2px 0; }
.password-rules span { padding: 3px 7px; border-radius: 10px; color: #8794a5; background: #f0f3f7; font-size: 10px; }
.password-rules span.is-valid { color: #087957; background: #e8f7f1; }

.primary-button, .secondary-button, .text-button { width: 100%; border: 0; cursor: pointer; }
.primary-button {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(100deg, #0e55c5, #177ae9);
  box-shadow: 0 9px 22px rgba(18,100,223,.23);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
}
.primary-button svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.primary-button:active { transform: translateY(1px); box-shadow: 0 5px 14px rgba(18,100,223,.2); }
.primary-button:disabled { cursor: wait; opacity: .64; }
.text-button { height: 42px; margin-top: 8px; color: #718097; background: transparent; font-size: 13px; }

.form-message { margin: 3px 0 4px; padding: 11px 13px; border-radius: 10px; color: #b72f3d; background: #fff0f2; font-size: 12px; line-height: 1.55; }

.recovery-panel { margin: -4px 0 22px; padding: 16px; border: 1px solid #f0cc82; border-radius: 13px; background: #fffaf0; }
.recovery-panel__icon { display: grid; float: left; width: 25px; height: 25px; margin-right: 10px; place-items: center; border-radius: 50%; color: #fff; background: #de9414; font-weight: 800; }
.recovery-panel h3 { margin: 1px 0 5px; font-size: 14px; }
.recovery-panel p { margin: 0 0 12px 35px; color: #80653a; font-size: 12px; line-height: 1.55; }
.secondary-button { height: 40px; border: 1px solid #d99725; border-radius: 10px; color: #a56800; background: #fff; font-size: 13px; font-weight: 700; }

.success-card { padding: 34px 20px 25px; text-align: center; }
.success-mark { display: grid; width: 74px; height: 74px; margin: 0 auto 18px; place-items: center; border: 7px solid #e4f8f1; border-radius: 50%; color: #fff; background: var(--success); box-shadow: 0 8px 25px rgba(22,160,111,.22); }
.success-mark svg { width: 38px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }
.success-card .card__kicker { margin-bottom: 7px; color: var(--success); }
.success-card__lead { margin: 9px 0 22px; color: var(--muted); font-size: 13px; }
.credentials-card { margin-top: 12px; overflow: hidden; border: 1px solid #d8e4f2; border-radius: 12px; background: #f8fbff; text-align: left; }
.credential-row { display: grid; min-height: 55px; grid-template-columns: 76px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 9px 15px; }
.credential-row + .credential-row { border-top: 1px solid #e2eaf4; }
.credential-row span { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.credential-row strong { overflow-wrap: anywhere; color: var(--navy); font-size: 19px; font-weight: 800; letter-spacing: .025em; text-align: left; }
.desktop-notice { display: flex; align-items: center; gap: 13px; padding: 14px 15px; border: 1px solid #d7e6f8; border-radius: 12px; color: var(--ink); background: #f2f7fd; text-align: left; }
.desktop-notice__icon { display: grid; flex: 0 0 auto; width: 39px; height: 39px; place-items: center; border-radius: 10px; color: #1570d8; background: #e1edfb; }
.desktop-notice svg { width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.desktop-notice h3 { margin: 0 0 4px; font-size: 13px; }
.desktop-notice a { color: #1264df; font-size: 13px; font-weight: 650; text-decoration: none; }
.screenshot-advice { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 14px 0 0; color: #9b6506; font-size: 11px; line-height: 1.5; }
.screenshot-advice svg { flex: 0 0 auto; width: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.success-card__tip { margin: 15px 0 0; color: #8794a5; font-size: 11px; }

.modal { position: fixed; z-index: 50; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 18px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(3,18,40,.72); backdrop-filter: blur(4px); }
.modal__panel { position: relative; width: min(100%, 520px); max-height: 92vh; padding: 23px 18px 18px; overflow: auto; border-radius: 20px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.28); text-align: center; }
.modal__panel h2 { margin: 0; font-size: 19px; }
.modal__panel p { margin: 7px 28px 15px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.modal__panel img { display: block; width: 100%; border-radius: 13px; box-shadow: 0 5px 20px rgba(7,39,83,.18); }
.modal__close { position: absolute; top: 8px; right: 9px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; color: #6f7d91; background: transparent; font-size: 25px; cursor: pointer; }

.privacy-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 17px 0 0; color: #8d9aab; font-size: 10px; }
.privacy-note svg { width: 14px; fill: none; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.8; }

@media (min-width: 700px) {
  .hero { min-height: 330px; padding-left: calc((100% - 650px) / 2); padding-right: calc((100% - 650px) / 2); background-position: center 58%; }
  .brand { width: 330px; }
  .hero__copy { margin-top: 52px; }
  .card { padding: 30px 34px 28px; }
  .steps { padding-left: 38px; padding-right: 38px; }
}

@media (prefers-reduced-motion: no-preference) {
  .step-panel:not([hidden]) { animation: rise .32s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}