/* Extracted from recovery.php inline style block #2. */
body {
            font-family: 'Comfortaa', cursive;
            min-height: 100vh;
            margin: 0;
            padding: 0;
            background:
                linear-gradient(135deg, rgba(37,99,235,0.35), rgba(34,197,94,0.35)),
                url('assets/img/background-login.jpg') no-repeat center center fixed;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #111827;
        }

        .login-form {
            width: 350px;
            max-width: 100%;
        }

        .login-form .card {
            border-radius: 1rem;
            border: 1px solid rgba(148, 163, 184, 0.5);
            background: rgba(248,250,252,0.96);
            box-shadow:
                0 14px 30px rgba(15,23,42,0.25),
                0 0 0 1px rgba(148,163,184,0.35);
            backdrop-filter: blur(6px);
        }

        .login-form .card-body {
            padding: 1.75rem 1.6rem;
        }

        .login-form h4 {
            font-weight: 700;
            color: #0f172a;
        }

        .btn-primary {
            background: linear-gradient(135deg, #2563eb, #22c55e);
            border: none;
            font-weight: 600;
            border-radius: 999px;
            box-shadow: 0 8px 18px rgba(37,99,235,0.45);
            transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.18s ease;
        }


        .btn-primary:active {
            transform: scale(0.97);
            box-shadow: inset 0 0 0 1px rgba(15,23,42,0.16);
        }

        .input-group-text {
            border-radius: 999px 0 0 999px;
            border: 1px solid rgba(148,163,184,0.7);
            background: #e5e7eb;
            color: #374151;
        }

        .form-control {
            border-radius: 0 999px 999px 0;
            border: 1px solid rgba(148,163,184,0.7);
            background: #f9fafb;
            color: #111827;
            box-shadow: none;
        }

        .form-control:focus {
            border-color: #2563eb;
            background: #ffffff;
            box-shadow: 0 0 0 1px rgba(37,99,235,0.35);
        }

        .alert {
            text-align: center;
            border-radius: 0.75rem;
            border: 0;
            font-size: 0.8rem;
            width: 100%;
        }

        .alert-danger {
            background: linear-gradient(135deg, rgba(248,113,113,0.2), rgba(252,165,165,0.18));
            color: #7f1d1d;
        }

        .alert-success {
            background: linear-gradient(135deg, rgba(34,197,94,0.16), rgba(187,247,208,0.8));
            color: #065f46;
        }

        .login-footer-text {
            color: #e5e7eb;
        }

        .login-footer-text a {
            color: #fefce8;
            text-decoration: none;
        }


        a[href="login"] {
            color: #111827;
            text-decoration: none;
        }


        .mobile-bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 56px;
            background: #ffffff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -6px 18px rgba(15,23,42,0.1);
            border-top: 1px solid rgba(148,163,184,0.3);
            z-index: 1030;
        }

        .mobile-bottom-nav a {
            color: #6b7280;
            font-size: 0.7rem;
            text-align: center;
            text-decoration: none;
        }

        .mobile-bottom-nav a i {
            display: block;
            font-size: 1.2rem;
            margin-bottom: 2px;
        }

        @media (max-width: 576px) {
            body {
                padding-bottom: 60px;
            }
        }