/* Root variables from AI-mode-page.html for consistency */
    :root {
      --primary-color: #FA4B2E;
      --secondary-color: #FF7C36;
      --ai-bg-color: #f4f6f9; /* Used as general background */
      --chat-window-bg: #ffffff; /* Used for card backgrounds */
      --user-msg-bg: linear-gradient(135deg, #6B73FF, #4F46E5);
      --user-msg-text: #ffffff;
      --ai-msg-bg: #f3f4f6;
      --ai-msg-text: #111827;
      --border-color: #e5e7eb;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--ai-bg-color);
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      margin: 0;
      padding: 0;
    }

    /* Main content area for login/signup forms */
    .auth-container {
      flex-grow: 1;
      display: flex;
      flex-direction: column; /* Changed to column to stack heading and card */
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
      width: 100%;
      box-sizing: border-box;
    }

    .auth-page-title {
      font-weight: 700;
      color: var(--ai-msg-text);
      margin-bottom: 2rem; /* Spacing between title and card */
      font-size: 2.5rem; /* Larger font for the main title */
      text-align: center;
      animation: fadeInDown 0.6s ease-out; /* Added animation */
    }
    
 .auth-page-title .highlight {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text; /* Standard property */
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback for older browsers */
}


    .auth-card {
      background: var(--chat-window-bg);
      border-radius: 1.5rem;
      box-shadow: 0 10px 30px -5px rgba(0,0,0,0.08);
      border: 1px solid var(--border-color);
      padding: 2.5rem;
      max-width: 450px;
      width: 100%;
      text-align: center;
      animation: fadeInUp 0.6s ease-out;
      box-sizing: border-box;
    }

    .auth-card .logo {
      max-width: 150px; /* Adjust as needed */
      height: auto;
      margin-bottom: 1.5rem;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .form-control {
      border-radius: 0.75rem;
      padding: 0.75rem 1rem;
      border: 1px solid var(--border-color);
      background: #f9fafb;
      margin-bottom: 1rem;
      font-size: 1rem;
    }

    .form-control:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 4px rgba(250, 75, 46, 0.1);
      background: #fff;
    }

    .btn-primary-karshika {
      background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
      color: white;
      border: none;
      border-radius: 0.75rem;
      padding: 0.85rem 1.5rem;
      font-size: 1.1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      width: 100%;
      margin-top: 1rem;
    }

    .btn-primary-karshika:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px -3px rgba(255, 124, 54, 0.4);
      opacity: 0.9;
    }

    .text-muted-karshika {
      color: #6b7280 !important;
      font-size: 0.95rem;
      margin-top: 1rem;
      display: block;
    }

    .text-muted-karshika a {
      color: var(--primary-color);
      font-weight: 600;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .text-muted-karshika a:hover {
      color: var(--secondary-color);
      text-decoration: underline;
    }

    .form-check-input:checked {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
    }
    .form-check-input:focus {
      box-shadow: 0 0 0 0.25rem rgba(250, 75, 46, 0.25);
    }

    .forgot-password-link {
        display: block;
        text-align: right;
        font-size: 0.9rem;
        margin-top: -0.5rem; /* Adjust to pull it closer to the input */
        margin-bottom: 1rem; /* Space before the button */
    }

    .forgot-password-link a {
        color: #6b7280; /* Muted color */
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .forgot-password-link a:hover {
        color: var(--primary-color);
        text-decoration: underline;
    }

    /* Animations */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInDown {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Hidden by default for forgotten password section */
    .hidden {
        display: none !important;
    }

    /* Mobile responsiveness */
    @media (max-width: 576px) {
      .auth-page-title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
      }
      .auth-card {
        padding: 1.5rem;
        margin: 1rem; /* Add margin for smaller screens */
        border-radius: 1rem;
      }

      .auth-card h2 { /* This h2 is now removed from auth-card */
        font-size: 1.75rem;
        margin-bottom: 1rem;
      }

      .form-control {
        padding: 0.65rem 0.9rem;
        font-size: 0.95rem;
      }

      .btn-primary-karshika {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
      }
    }