.login-screen {
      width: 100%;
      min-height: 100dvh;
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: 0;
    }

    .auth-screen-shell {
      width: 100%;
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding:
        calc(env(safe-area-inset-top, 0px) + 20px)
        20px
        calc(env(safe-area-inset-bottom, 0px) + 20px);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .login-card {
      width: 100%;
      max-width: 420px;
      padding: 36px 32px 28px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(215, 225, 236, 0.9);
      border-radius: 30px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
    }

    .auth-card-body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      min-height: 100%;
    }

    .auth-card-body > * {
      width: 100%;
    }

    .login-logo {
      margin-bottom: 22px;
      text-align: center;
    }

    .onboarding-card {
      width: 100%;
      max-width: 440px;
      padding: 36px 32px 28px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(215, 225, 236, 0.9);
      border-radius: 30px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      text-align: center;
    }

    .onboarding-avatar-wrap {
      display: grid;
      justify-items: center;
      gap: 14px;
      margin-bottom: 24px;
    }

    .onboarding-avatar {
      width: 108px;
      height: 108px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid rgba(215, 225, 236, 0.95);
      background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
      color: var(--accent-dark);
      font-size: 34px;
      font-weight: 800;
      letter-spacing: 0.02em;
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.08);
    }

    .onboarding-avatar.has-image {
      background: #fff;
    }

    .onboarding-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .onboarding-form {
      display: grid;
      gap: 16px;
      text-align: left;
    }

    .onboarding-upload {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border: 0;
      border-radius: 14px;
      background: #edf3fb;
      color: var(--text);
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
    }

    .onboarding-upload:hover {
      transform: translateY(-1px);
    }

    .onboarding-upload:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }