/*
            ==================================================================
            1. GLOBAL STYLES & TYPOGRAPHY
            ==================================================================
            */
            :root {
              --primary-color: #ffde17; /* Swarmify Yellow */
              --primary-hover: #f9d439; /* Darker Yellow for hover */
              --background-color: #f8f9fa;
              --panel-background: #ffffff;
              --text-color: #212529;
              --text-muted: #6c757d;
              --border-color: #dee2e6;
              --shadow:
                0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
              --bootstrap-blue: #337ab7;

              --footer-height: 70px; /* for recaptcha and help popup */
            }

            body {
              font-family:
                "Inter",
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                "Helvetica Neue",
                Arial,
                sans-serif;
              font-size: 16px;
              line-height: 1.6;
              background-color: var(--background-color);
              color: var(--text-color);
              margin-bottom: var(--footer-height);
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
              font-family: "Space Grotesk", sans-serif;
              font-weight: 700;
              color: var(--text-color);
            }

            a {
              color: var(--primary-color);
              transition: color 0.2s ease-in-out;
            }
            a:hover {
              color: var(--primary-hover);
              text-decoration: none;
            }

            /*
            ==================================================================
            6. PAGE-SPECIFIC STYLES
            ==================================================================
            */

            /* Login Page */
            .login-wrapper {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              min-height: calc(100vh - var(--footer-height));
              padding: 20px;
            }
            .login-header {
              margin-bottom: 24px;
            }
            .login-header svg {
              height: 32px;
              width: auto;
            }
            .login-card {
              background-color: var(--panel-background);
              border-radius: 12px;
              padding: 40px;
              box-shadow: var(--shadow);
              border: 1px solid var(--border-color);
              width: 100%;
              max-width: 450px;
            }
            .login-card .form-group {
                margin-bottom: 1rem;
            }
            .login-card .form-group:last-child {
              margin-bottom: 0;
            }
            .login-card .form-group label {
              font-weight: 600;
              margin-bottom: 5px;
            }
            .forgot-password-link {
              display: block;
              text-align: right;
              margin-top: 15px;
              font-size: 14px;
              color: var(--bootstrap-blue);
            }
            .forgot-password-link:hover {
              color: #23527c;
            }
            .login-card .btn-primary {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 40px;
                margin: 24px auto 10px;
                padding: 10px 24px;
                gap: 10px;
                border-radius: 100px;
                font-weight: 500;
                font-size: 14px;
                line-height: 20px;
                font-family: 'Space Grotesk', sans-serif;
                letter-spacing: .1px;
                text-decoration: none;
                box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
                transition: all .2s ease-in-out;
                color: #333333;
                background: #ffde17;
                border: 0;
                text-shadow: none;
            }
            .login-card .btn-primary:hover,
            .login-card .btn-primary:focus {
                transform: translateY(-3px);
                box-shadow: 0 7px 15px rgba(0, 0, 0, .08);
                background: var(--primary-hover);
            }
            .form-control {
                margin-bottom: 1rem;
            }