/* ==================== ACCOUNT GATE SCREEN ==================== */
    .account-screen { padding-top: 0; overscroll-behavior: none; }

    .account-card {
      background: var(--white);
      border: 1px solid var(--slate-200);
      border-radius: 20px;
      padding: 40px 32px;
      max-width: 420px;
      margin: 0 auto;
      text-align: center;
      box-shadow: var(--shadow-md);
    }

    .account-card h2 {
      font-family: var(--font-serif);
      font-size: 1.75rem;
      color: var(--slate-900);
      margin-bottom: 12px;
    }

    .account-card .subtitle {
      color: var(--slate-600);
      margin-bottom: 32px;
      line-height: 1.5;
    }

    .auth-buttons { display: flex; flex-direction: column; gap: 12px; }

    .auth-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 14px 24px;
      border: 2px solid var(--slate-200);
      border-radius: 12px;
      background: var(--white);
      font-family: inherit;
      font-size: 1rem;
      font-weight: 500;
      color: var(--slate-700);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .auth-btn:hover { border-color: var(--slate-300); background: var(--slate-50); }

    .auth-btn svg { width: 20px; height: 20px; }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 24px 0;
      color: var(--slate-400);
      font-size: 0.875rem;
    }

    .auth-divider::before,
    .auth-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--slate-200);
    }

    .account-card .skip-link {
      display: inline-block;
      margin-top: 20px;
      color: var(--slate-500);
      font-size: 0.9375rem;
      text-decoration: none;
    }

    .account-card .skip-link:hover { color: var(--cr-teal); text-decoration: underline; }

/* ==================== AUTH UI STYLES ==================== */

    /* Header avatar */
    .header-avatar {
      display: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--cr-teal);
      color: var(--white);
      font-family: var(--font-sans);
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      min-width: 36px;
    }

    .header-avatar:hover {
      transform: scale(1.05);
      box-shadow: 0 2px 8px rgba(70, 158, 146, 0.3);
    }

    .header-avatar.visible {
      display: flex;
    }

    /* Avatar dropdown */
    .avatar-dropdown {
      position: absolute;
      top: 100%;
      left: 24px;
      background: var(--white);
      border: 1px solid var(--slate-200);
      border-radius: 12px;
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      z-index: 200;
      min-width: 200px;
      display: none;
    }

    .avatar-dropdown.visible { display: block; }

    .avatar-dropdown-name {
      padding: 14px 20px 8px;
      font-weight: 600;
      color: var(--slate-800);
      font-size: 0.9375rem;
    }

    .avatar-dropdown-email {
      padding: 0 20px 12px;
      color: var(--slate-500);
      font-size: 0.8125rem;
      border-bottom: 1px solid var(--slate-100);
    }

    .avatar-dropdown a {
      display: block;
      padding: 14px 20px;
      color: var(--slate-700);
      text-decoration: none;
      font-size: 0.9375rem;
      transition: background 0.15s ease;
    }

    .avatar-dropdown a:hover { background: var(--slate-50); }

    /* Disabled Apple button */
    .auth-btn.disabled {
      opacity: 0.45;
      cursor: not-allowed;
      pointer-events: none;
    }

    .auth-btn-coming-soon {
      font-size: 0.75rem;
      color: var(--slate-400);
      font-weight: 400;
      margin-left: 4px;
    }

/* Email auth fields (sign-up and sign-in) */
    .email-auth-fields {
      display: none;
      flex-direction: column;
      gap: 10px;
      margin-top: 16px;
    }
    .email-auth-fields.visible { display: flex; }

    .email-auth-fields input {
      padding: 14px 16px;
      border: 1.5px solid var(--slate-200);
      border-radius: 12px;
      font-size: 0.95rem;
      font-family: var(--font-sans);
      color: var(--slate-700);
      background: var(--white);
      transition: border-color 0.2s;
    }
    .email-auth-fields input:focus {
      outline: none;
      border-color: var(--cr-teal);
    }
    .email-auth-fields input::placeholder { color: var(--slate-400); }

    .email-auth-fields .email-send-btn {
      padding: 14px 24px;
      background: var(--cr-teal);
      color: var(--white);
      border: none;
      border-radius: 12px;
      font-family: var(--font-sans);
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .email-auth-fields .email-send-btn:hover { background: var(--cr-teal-dark); }
    .email-auth-fields .email-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    .email-mode-toggle {
      text-align: center;
      font-size: 0.85rem;
      color: var(--slate-500);
      margin-top: 4px;
    }
    .email-mode-toggle a {
      color: var(--cr-teal);
      text-decoration: none;
      font-weight: 500;
    }
    .email-mode-toggle a:hover { text-decoration: underline; }

    .auth-error-message {
      display: none;
      text-align: center;
      font-size: 0.85rem;
      color: var(--cr-orange);
      padding: 8px 12px;
      margin-top: 8px;
      background: rgba(221, 105, 58, 0.08);
      border-radius: 8px;
    }
    .auth-error-message.visible { display: block; }
    .auth-signin-prompt {
      text-align: center;
      font-size: 0.9375rem;
      color: var(--slate-500);
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--slate-200);
    }
    .auth-signin-prompt a {
      color: var(--cr-teal);
      text-decoration: none;
      font-weight: 600;
    }
    .auth-signin-prompt a:hover { text-decoration: underline; }

    .forgot-password-link {
      text-align: center;
      font-size: 0.8125rem;
      margin-top: 8px;
    }
    .forgot-password-link a {
      color: var(--slate-500);
      text-decoration: none;
    }
    .forgot-password-link a:hover { color: var(--cr-teal); text-decoration: underline; }

    .auth-error-message.success {
      color: var(--cr-teal);
      background: rgba(70, 158, 146, 0.08);
    }

    /* Welcome back state */
    .welcome-back-content {
      display: none;
      text-align: center;
      padding: 20px 0;
    }

    .welcome-back-content.visible { display: block; }

    .welcome-back-content .welcome-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--cr-teal);
      color: var(--white);
      font-family: var(--font-sans);
      font-size: 1.5rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
    }

    .welcome-back-content h2 {
      font-family: var(--font-serif);
      font-size: 1.75rem;
      color: var(--slate-900);
      margin-bottom: 8px;
    }

    .welcome-back-content p {
      color: var(--slate-600);
      margin-bottom: 24px;
      line-height: 1.5;
    }

    .welcome-back-content .continue-btn { width: 100%; }

    /* Floating cart - saved state */
    .save-list-link.saved {
      color: var(--cr-teal);
      pointer-events: none;
    }

    .save-list-link.saved svg { display: none; }