.register-shell {
      grid-template-columns: minmax(420px, .82fr) minmax(620px, 1.18fr);
    }

    .register-shell .brand-panel {
      padding-inline: clamp(38px, 4vw, 64px);
    }

    .register-shell .brand-content {
      max-width: 570px;
      padding-block: 44px;
    }

    .register-shell .brand-content h1 {
      font-size: 56px;
    }

    .register-shell .auth-panel {
      align-items: flex-start;
      padding-block: 32px;
    }

    .register-shell .auth-card {
      width: min(100%, 680px);
      padding-block: 18px;
    }

    .register-shell .auth-card h2 {
      font-size: 40px;
    }

    .register-form {
      margin-top: 27px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 18px;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    .field-help {
      display: block;
      margin-top: 7px;
      color: #949aa5;
      font-size: 10px;
      line-height: 1.5;
    }

    .field-top-action {
      padding: 0;
      border: 0;
      color: var(--brand-dark);
      background: transparent;
      cursor: pointer;
      font-size: 10px;
      font-weight: 730;
    }

    .field-top-action:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .verify-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 124px;
      gap: 9px;
    }

    .verify-btn {
      min-height: 53px;
      padding: 0 13px;
      border: 1px solid #e6cbbb;
      border-radius: 13px;
      color: var(--brand-dark);
      background: #fff7f2;
      cursor: pointer;
      font-size: 12px;
      font-weight: 770;
      white-space: nowrap;
    }

    .verify-btn:hover {
      border-color: #e8b89e;
      background: #fff0e7;
    }

    .verify-btn[disabled] {
      cursor: wait;
      opacity: .72;
    }

    .terms-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin: 2px 0 22px;
    }

    .terms-row .check-label {
      align-items: flex-start;
      line-height: 1.55;
    }

    .terms-row a {
      color: var(--brand-dark);
      font-weight: 760;
    }

    .register-closed {
      margin-top: 28px;
      padding: 24px;
      border: 1px solid #eedbcf;
      border-radius: 8px;
      background: #fff8f3;
    }

    .register-closed strong {
      display: block;
      margin-bottom: 6px;
      font-size: 16px;
    }

    .register-closed p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .onboarding-list {
      display: grid;
      gap: 13px;
      max-width: 520px;
      margin-top: 38px;
    }

    .onboarding-step {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 13px;
      align-items: center;
      padding: 13px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .onboarding-step:last-child {
      border-bottom: 0;
    }

    .onboarding-num {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 8px;
      color: #ff9f72;
      background: rgba(255, 255, 255, .045);
      font-size: 11px;
      font-weight: 820;
    }

    .onboarding-copy strong {
      display: block;
      font-size: 13px;
    }

    .onboarding-copy small {
      display: block;
      margin-top: 3px;
      color: #929daf;
      font-size: 10px;
    }

    .reset-shell .auth-card {
      width: min(100%, 490px);
    }

    .reset-shell .brand-content h1 {
      font-size: 62px;
    }

    .flow-back {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin-top: 25px;
      color: #697180;
      font-size: 12px;
      font-weight: 720;
    }

    .flow-back:hover {
      color: var(--brand-dark);
    }

    .flow-back svg {
      width: 15px;
      height: 15px;
    }

    .mail-preview {
      max-width: 520px;
      margin-top: 42px;
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 8px;
      background: rgba(255, 255, 255, .035);
    }

    .mail-preview-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      color: #c8cfdb;
      font-size: 11px;
      font-weight: 760;
    }

    .mail-preview-top span {
      color: #68dca8;
    }

    .mail-preview-line {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 18px;
    }

    .mail-preview-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 8px;
      color: #ff9868;
      background: rgba(255, 106, 42, .12);
    }

    .mail-preview-icon svg {
      width: 22px;
      height: 22px;
    }

    .mail-preview-copy strong {
      display: block;
      font-size: 13px;
    }

    .mail-preview-copy small {
      display: block;
      margin-top: 3px;
      color: #929daf;
      font-size: 10px;
    }

    .password-rules {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 4px 0 23px;
      color: #858c99;
      font-size: 10px;
    }

    .password-rule {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .password-rule i {
      width: 6px;
      height: 6px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--success);
    }

    .wechat-block {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: none;
      place-items: center;
      padding: 24px;
      color: var(--ink);
      background: #f8f6f3;
      text-align: center;
    }

    .wechat-block.show {
      display: grid;
    }

    .wechat-block strong {
      display: block;
      margin-bottom: 8px;
      font-size: 20px;
    }

    .wechat-block p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }

    @media (max-width: 1100px) {
      .register-shell {
        grid-template-columns: minmax(360px, .7fr) minmax(560px, 1.3fr);
      }

      .register-shell .brand-panel {
        padding-inline: 36px;
      }

      .register-shell .brand-content h1 {
        font-size: 48px;
      }
    }

    @media (max-width: 960px) {
      .register-shell {
        display: block;
        padding: 0;
      }

      .register-shell .brand-panel {
        display: none;
      }

      .register-shell .auth-panel {
        min-height: 100vh;
        padding: 38px 24px;
      }

      .register-shell .mobile-brand {
        display: flex;
      }

      .register-shell .auth-card {
        width: min(100%, 680px);
        max-width: 680px;
      }
    }

    @media (max-width: 900px) {
      .register-shell,
      .reset-shell {
        display: block;
        padding: 0;
      }

      .register-shell .brand-panel,
      .reset-shell .brand-panel {
        display: none;
      }

      .register-shell .auth-panel,
      .reset-shell .auth-panel {
        min-height: 100vh;
        padding: 38px 24px;
      }

      .register-shell .mobile-brand,
      .reset-shell .mobile-brand {
        display: flex;
      }

      .register-shell .auth-card {
        width: min(100%, 680px);
        max-width: 680px;
      }
    }

    @media (max-width: 640px) {
      .register-shell .auth-panel,
      .reset-shell .auth-panel {
        align-items: flex-start;
        padding: 30px 20px 40px;
      }

      .form-grid,
      .password-rules {
        grid-template-columns: 1fr;
      }

      .field.full {
        grid-column: auto;
      }

      .verify-wrap {
        grid-template-columns: minmax(0, 1fr) 112px;
      }

      .register-shell .auth-card h2,
      .reset-shell .auth-card h2 {
        font-size: 34px;
      }

      .register-shell .mobile-brand,
      .reset-shell .mobile-brand {
        margin-bottom: 46px;
      }
    }

    @media (max-width: 390px) {
      .verify-wrap {
        grid-template-columns: 1fr;
      }

      .verify-btn {
        width: 100%;
      }
    }