/* Define CSS Variables for Colors */
        :root {
            --notes-orange: #F7B562;
            --notes-orange-dark: #E0A050;
            --notes-green-light: #D4EDDA;
            --notes-bg-light: #F8F8F8;
            --gray-100: #f3f4f6;
            --gray-300: #d1d5db;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-900: #111827;
            --white: #ffffff;
            --red-error: #f44336;
            --green-success: #4CAF50;
        }

        /* General Body Styles */
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--notes-bg-light);
            min-height: 100vh;
            display: flex;
            flex-direction: column; /* Changed to column to allow button at top */
            align-items: center;
            justify-content: center;
            padding: 1rem; /* Equivalent to p-4 */
            margin: 0;
        }

        /* Message Box Styles */
        .message-box {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--green-success);
            color: var(--white);
            padding: 10px 40px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }
        .message-box.show {
            opacity: 1;
        }

        /* Home Button Container */
        .home-button-container {
            width: 100%;
            max-width: 28rem; /* Match card-container max-width */
            text-align: left;
            margin-bottom: 1.5rem; /* Space between button and card */
            padding-left: 1rem; /* Align with card padding */
            padding-right: 1rem; /* Align with card padding */
        }

        .home-button {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            background-color: var(--notes-orange);
            color: var(--white);
            border-radius: 0.375rem;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.875rem;
            transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }

        .home-button:hover {
            background-color: var(--notes-orange-dark);
        }

        .home-button:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 4px rgba(212, 237, 218, 0.5);
        }

        /* Container Card Styles */
        .card-container {
            background-color: var(--white);
            padding: 2rem; /* Equivalent to p-8 */
            border-radius: 0.75rem; /* Equivalent to rounded-xl */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-lg */
            width: 100%;
            max-width: 30rem; 
            border: 2px orange solid;
            
        }

        /* Heading Styles */
        .card-container h2 {
            font-size: 1.875rem; /* Equivalent to text-3xl */
            font-weight: 800; /* Equivalent to font-extrabold */
            color: var(--gray-900);
            text-align: center;
            margin-bottom: 1.5rem; /* Equivalent to mb-6 */
        }

        /* Paragraph Styles */
        .card-container p {
            text-align: center;
            color: var(--gray-600);
            margin-bottom: 2rem; /* Equivalent to mb-8 */
        }

        /* Form Layout */
        .form-space-y-6 > div{
            margin: 1.5rem; /* Equivalent to space-y-6 */
        }
        .form-space-y-6 > div:last-child {
            margin-bottom: 0;
        }

        /* Label Styles */
        label {
            display: block;
            font-size: 0.875rem; /* Equivalent to text-sm */
            font-weight: 500; /* Equivalent to font-medium */
            color: var(--gray-700);
            margin-bottom: 0.25rem; /* Equivalent to mb-1 */
        }

        /* Input Styles */
        input[type="email"],
        input[type="password"],
        input[type="text"] {
            display: block;
            width: 100%;
            padding: 0.5rem 1rem; /* Equivalent to px-4 py-2 */
            margin-top: 0.25rem; /* Equivalent to mt-1 */
            border: 1px solid var(--gray-300);
            border-radius: 0.375rem; /* Equivalent to rounded-md */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Equivalent to shadow-sm */
            font-size: 0.875rem; /* Equivalent to sm:text-sm */
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        input[type="email"]:focus,
        input[type="password"]:focus,
        input[type="text"]:focus {
            outline: none;
            /* border-color: var(--notes-green-light); */
            border-color: orange;
            box-shadow: 0 0 0 3px rgba(212, 237, 218, 0.5); /* Equivalent to focus:ring-notes-green-light */
        }

        /* Button Styles */
        .btn-primary {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 0.5rem 1rem; /* Equivalent to py-2 px-4 */
            border: 1px solid transparent;
            border-radius: 0.375rem; /* Equivalent to rounded-md */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Equivalent to shadow-sm */
            font-size: 0.875rem; /* Equivalent to text-sm */
            font-weight: 500; /* Equivalent to font-medium */
            color: var(--white);
            background-color: var(--notes-orange);
            cursor: pointer;
            transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .btn-primary:hover {
            background-color: var(--notes-orange-dark);
        }

        .btn-primary:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 4px rgba(212, 237, 218, 0.5); /* Equivalent to focus:ring-2 focus:ring-offset-2 focus:ring-notes-green-light */
        }

        /* Sign In Link Section */
        .signin-link-section {
            margin-top: 2rem; /* Equivalent to mt-8 */
            text-align: center;
        }
        .signin-link-section p {
            font-size: 0.875rem; /* Equivalent to text-sm */
            color: var(--gray-600);
            margin-bottom: 0; /* Override default paragraph margin */
        }
        .signin-link-section a {
            font-weight: 500; /* Equivalent to font-medium */
            color: var(--notes-orange);
            text-decoration: none;
            transition: color 0.15s ease-in-out;
        }
        .signin-link-section a:hover {
            color: var(--notes-orange-dark);
        }

        /* Responsive Adjustments */
        @media (max-width: 640px) {
            .card-container {
                padding: 1.5rem; /* Smaller padding on small screens */
            }
            .card-container h2 {
                font-size: 1.5rem; /* Smaller heading on small screens */
            }
            .home-button-container {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }
        }
    
          /* Spinner styles */
    .spinner {
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top: 3px solid white;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      animation: spin 0.8s linear infinite;
      display: none;
      vertical-align: middle;
      margin-left: 8px;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .btn-disabled {
      opacity: 0.6;
      pointer-events: none;
    }