:root {
            --coral: #f05a50;
            --navy: #233246;
            --muted: #7f8a99;
            --red-light: #ff6b6b;
            --red-dark: #c0392b;
            --red-medium: #e74c3c;
            --coral-light: #ff8a7a;
            --coral-dark: #d94a40;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html, body { min-height: 100%; }

        body {
            font-family: 'Montserrat', sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            color: #ffffff;
            overflow-x: hidden;
            position: relative;

            background:
                radial-gradient(circle at 12% 15%, rgba(240,90,80,.055), transparent 28%),
                radial-gradient(circle at 88% 84%, rgba(35,50,70,.045), transparent 32%),
                linear-gradient(135deg, #ffffff 0%, #fbfbfc 52%, #f5f6f8 100%);
        }

        /* Background depth rings */
        body::before,
        body::after {
            content: "";
            position: fixed;
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }

        body::before {
            width: 430px;
            height: 430px;
            top: -225px;
            right: -120px;
            border: 1px solid rgba(35,50,70,.065);
            background: rgba(35,50,70,.012);
        }

        body::after {
            width: 350px;
            height: 350px;
            left: -180px;
            bottom: -180px;
            border: 1px solid rgba(240,90,80,.10);
            background: rgba(240,90,80,.018);
        }

        /* =========================================
           LOGIN CONTAINER
        ========================================= */
        .login-container {
            width: 100%;
            max-width: 480px;
            padding: 40px 38px 28px;
            position: relative;
            z-index: 2;
            overflow: hidden;

            background:
                linear-gradient(
                    145deg,
                    rgba(45,64,86,.92) 0%,
                    rgba(55,79,99,.89) 50%,
                    rgba(40,59,80,.91) 100%
                );

            border: 1px solid rgba(255,255,255,.52);
            border-radius: 24px;

            backdrop-filter: blur(18px) saturate(135%);
            -webkit-backdrop-filter: blur(18px) saturate(135%);

            box-shadow:
                0 32px 76px rgba(35,50,70,.22),
                0 10px 28px rgba(35,50,70,.10),
                inset 0 1px 0 rgba(255,255,255,.22),
                inset 0 0 0 1px rgba(255,255,255,.05);
        }

        .login-container::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            border-radius: inherit;
            background:
                linear-gradient(
                    135deg,
                    rgba(255,255,255,.16) 0%,
                    rgba(255,255,255,.045) 28%,
                    transparent 52%,
                    rgba(255,255,255,.025) 100%
                );
        }

        .login-container::after {
            content: "";
            position: absolute;
            inset: 1px;
            z-index: 0;
            pointer-events: none;
            border-radius: 23px;
            background:
                radial-gradient(circle at 12% 8%, rgba(255,255,255,.15), transparent 30%),
                radial-gradient(circle at 88% 92%, rgba(240,90,80,.035), transparent 34%);
        }

        .login-container > * {
            position: relative;
            z-index: 2;
        }

        /* =========================================
           LOGO SECTION
        ========================================= */
        .logo-section {
            text-align: center;
            margin-bottom: 20px;
        }

        .logo-wrapper {
            width: 88px;
            height: 88px;
            margin: 0 auto 14px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 22px;
            overflow: hidden;
            background: transparent;
            border: none;
            box-shadow: 0 14px 30px rgba(35,50,70,.18);
            transition: transform .3s ease;
        }

        .logo-wrapper:hover {
            transform: translateY(-3px) scale(1.025);
            background: transparent;
        }

        .logo-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .logo-wrapper i {
            font-size: 42px;
            color: var(--coral);
        }

        .logo-section h1 {
            font-size: 26px;
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 2px;
            letter-spacing: -.55px;
        }

        .logo-section .school-login-name {
            font-size: 18px;
            font-weight: 800;
            color: #ffffff;
            margin: 0 0 6px;
        }

        .logo-section h1 span { color: var(--coral); }

        .logo-section .tagline-top {
            font-size: 11px;
            color: rgba(255,255,255,.75);
            font-weight: 500;
            letter-spacing: 1.2px;
            margin-top: 2px;
        }

        .logo-section .tagline-sub {
            font-size: 9px;
            color: rgba(255,255,255,.50);
            letter-spacing: 2.5px;
            font-weight: 600;
            margin-top: 4px;
        }

        /* =========================================
           FORM HEADER
        ========================================= */
        .form-header {
            text-align: center;
            margin-bottom: 22px;
        }

        .form-header h2 {
            font-size: 20px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 3px;
        }

        .form-header p {
            color: rgba(255,255,255,.70);
            font-size: 13px;
        }

        /* =========================================
           ROLE SELECTOR - one horizontal row
        ========================================= */
        .role-selector {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 24px;
            width: 100%;
        }

        .role-btn {
            min-width: 0;
            min-height: 72px;
            padding: 12px 2px 10px;
            border: 1px solid rgba(255,255,255,.28);
            background: rgba(255,255,255,.035);
            border-radius: 13px;
            cursor: pointer;
            text-align: center;
            font-size: 8.5px;
            font-weight: 600;
            color: rgba(255,255,255,.72);
            letter-spacing: .1px;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);

            transition:
                transform .28s ease,
                background .28s ease,
                border-color .28s ease,
                box-shadow .28s ease,
                color .28s ease;
        }

        .role-btn i {
            display: block;
            font-size: 19px;
            margin-bottom: 7px;
            color: rgba(255,255,255,.72);
            transition: color .28s ease;
        }

        .role-btn:hover {
            transform: translateY(-3px);
            background: rgba(255,255,255,.10);
            border-color: rgba(240,90,80,.38);
            color: #ffffff;
            box-shadow: 0 10px 22px rgba(35,50,70,.065);
        }

        .role-btn:hover i { color: var(--coral); }

        .role-btn.active {
            transform: translateY(-2px);
            border-color: rgba(240,90,80,.72);
            background: rgba(240,90,80,.16);
            color: #ffffff;
            box-shadow:
                0 9px 22px rgba(240,90,80,.09),
                inset 0 0 0 1px rgba(255,255,255,.45);
        }

        .role-btn.active i { color: var(--coral); }

        /* =========================================
           FORM
        ========================================= */
        .form-group { margin-bottom: 16px; }

        .form-label {
            display: block;
            font-weight: 600;
            font-size: 12px;
            color: rgba(255,255,255,.85);
            margin-bottom: 6px;
        }

        .input-wrapper { position: relative; }

        .login-field {
            display: flex;
            align-items: stretch;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            border: 1px solid rgba(255,255,255,.72);
            border-radius: 11px;
            background: rgba(255,255,255,.025);
            overflow: hidden;
            isolation: isolate;
            -webkit-mask-image: -webkit-radial-gradient(white, black);
            transition: border-color .28s ease, background .28s ease, box-shadow .28s ease;
        }
        .login-field:hover {
            background: rgba(255,255,255,.055);
            border-color: rgba(255,255,255,.90);
        }
        .login-field:focus-within {
            border-color: rgba(255,255,255,.90);
            background: rgba(255,255,255,.075);
            box-shadow: none;
        }
        .login-field-prefix {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            min-width: 48px;
            padding: 0 12px;
            background: rgba(255,255,255,.10);
            border-right: 1px solid rgba(255,255,255,.28);
            color: rgba(255,255,255,.92);
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            user-select: none;
        }
        .login-field-prefix i {
            font-size: 15px;
            color: rgba(255,255,255,.78);
        }
        .login-field:focus-within .login-field-prefix i { color: rgba(255,255,255,.92); }
        .login-field-suffix {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            min-width: 44px;
            padding: 0 12px;
            border: 0;
            background: transparent;
            color: rgba(255,255,255,.70);
            cursor: pointer;
        }
        .login-field-suffix:hover { color: #fff; }
        .login-field .form-control {
            border: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            outline: none !important;
            background: transparent !important;
            transform: none !important;
            width: auto !important;
            flex: 1 1 auto;
            min-width: 0;
            max-width: 100%;
            padding: 13px 14px !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            -webkit-appearance: none;
            appearance: none;
        }
        .login-field .form-control:hover,
        .login-field .form-control:focus {
            border: 0 !important;
            box-shadow: none !important;
            background: transparent !important;
            transform: none !important;
        }

        .input-wrapper > i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255,255,255,.60);
            font-size: 15px;
            pointer-events: none;
            z-index: 2;
            transition: color .28s ease;
        }

        .input-wrapper:focus-within > i { color: rgba(255,255,255,.92); }

        .input-wrapper > i.password-toggle {
            left: auto;
            right: 15px;
            pointer-events: auto;
            cursor: pointer;
        }

        .input-wrapper:has(.password-toggle) .form-control {
            padding-right: 44px;
        }

        .form-control {
            width: 100%;
            padding: 13px 15px 13px 45px;
            border: 1px solid rgba(255,255,255,.72);
            border-radius: 11px;
            background: rgba(255,255,255,.025);
            color: #ffffff;
            font-size: 13px;
            font-family: 'Montserrat', sans-serif;
            outline: none;

            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);

            transition:
                border-color .28s ease,
                background .28s ease,
                box-shadow .28s ease,
                transform .28s ease;
        }

        .form-control::placeholder { color: rgba(255,255,255,.50); }

        .form-control:hover {
            background: rgba(255,255,255,.055);
            border-color: rgba(255,255,255,.90);
        }

        .form-control:focus {
            border-color: rgba(255,255,255,.90);
            background: rgba(255,255,255,.075);
            box-shadow: none;
            transform: none;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus {
            -webkit-text-fill-color: #ffffff;
            -webkit-box-shadow: 0 0 0 1000px transparent inset;
            transition: background-color 99999s ease-in-out 0s;
            caret-color: #ffffff;
        }

        .login-field input:-webkit-autofill,
        .login-field input:-webkit-autofill:hover,
        .login-field input:-webkit-autofill:focus {
            -webkit-text-fill-color: #ffffff;
            caret-color: #ffffff;
            border-radius: 0 !important;
            -webkit-box-shadow: 0 0 0 1000px rgba(35,50,70,.35) inset !important;
        }

        /* =========================================
           CONTINUE BUTTON - Dynamic Text
        ========================================= */
        .btn-login {
            width: 100%;
            padding: 14px;
            margin-top: 4px;
            background: var(--coral);
            color: #fff;
            border: none;
            border-radius: 11px;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Montserrat', sans-serif;
            cursor: pointer;
            transition: all .28s ease;
            box-shadow: 0 12px 28px rgba(240,90,80,.20);
        }

        .btn-login:hover {
            background: #ed5147;
            transform: translateY(-3px);
            box-shadow: 0 16px 35px rgba(240,90,80,.28);
        }

        .btn-login:active { transform: translateY(0); }

        .btn-login.loading { pointer-events: none; opacity: .82; }
        .btn-login.loading .btn-text { display: none; }
        .btn-login.loading .spinner-border { display: inline-block; }

        .spinner-border {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,.35);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin .8s linear infinite;
        }

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

        /* =========================================
           ALERT
        ========================================= */
        .alert-custom {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #fecaca;
            border-radius: 11px;
            padding: 12px 14px;
            margin-bottom: 16px;
            font-size: 12px;
            animation: shake .5s ease;
            display: flex;
            align-items: center;
            gap: 9px;
            backdrop-filter: blur(8px);
        }

        @keyframes shake {
            0%,100% { transform: translateX(0); }
            25% { transform: translateX(-4px); }
            50% { transform: translateX(4px); }
            75% { transform: translateX(-2px); }
        }

        /* =========================================
           FEATURES SECTION (Bottom)
        ========================================= */
        .features-section {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            padding-top: 18px;
            border-top: 1px solid rgba(255,255,255,.10);
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 10px;
            color: rgba(255,255,255,.60);
            font-weight: 500;
            letter-spacing: 0.3px;
        }

        .feature-item i {
            font-size: 12px;
            color: var(--coral);
        }

        /* =========================================
           FOOTER
        ========================================= */
        .form-footer {
            text-align: center;
            margin-top: 16px;
            font-size: 10px;
            color: rgba(255,255,255,.45);
            letter-spacing: 0.3px;
        }

        /* =========================================
           MOVING BACKGROUND BUBBLES - ALL RED THEME
        ========================================= */
        .bg-bubbles {
            position: fixed;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
        }

        .bg-bubbles span {
            position: absolute;
            bottom: -200px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            will-change: transform;
            animation: bubbleRise linear infinite;
            transition: transform 0.3s ease;
        }

        /* ALL BUBBLES - RED THEME ONLY */
        .bg-bubbles span:nth-child(1) { 
            left: 2%; 
            width: 70px; 
            height: 70px; 
            animation-duration: 20s; 
            animation-delay: -2s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.50), rgba(240,90,80,0.10) 70%);
            border: 2px solid rgba(240,90,80,0.35);
            box-shadow: 0 0 60px rgba(240,90,80,0.20), inset 0 0 30px rgba(240,90,80,0.05);
        }
        .bg-bubbles span:nth-child(2) { 
            left: 12%; 
            width: 45px; 
            height: 45px; 
            animation-duration: 16s; 
            animation-delay: -6s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.55), rgba(240,90,80,0.10) 70%);
            border: 2px solid rgba(240,90,80,0.35);
            box-shadow: 0 0 60px rgba(240,90,80,0.20);
        }
        .bg-bubbles span:nth-child(3) { 
            left: 22%; 
            width: 95px; 
            height: 95px; 
            animation-duration: 25s; 
            animation-delay: -10s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.45), rgba(240,90,80,0.08) 70%);
            border: 2px solid rgba(240,90,80,0.30);
            box-shadow: 0 0 60px rgba(240,90,80,0.18);
        }
        .bg-bubbles span:nth-child(4) { 
            left: 35%; 
            width: 55px; 
            height: 55px; 
            animation-duration: 19s; 
            animation-delay: -4s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.55), rgba(240,90,80,0.10) 70%);
            border: 2px solid rgba(240,90,80,0.35);
            box-shadow: 0 0 60px rgba(240,90,80,0.20);
        }
        .bg-bubbles span:nth-child(5) { 
            left: 48%; 
            width: 80px; 
            height: 80px; 
            animation-duration: 22s; 
            animation-delay: -14s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.50), rgba(240,90,80,0.08) 70%);
            border: 2px solid rgba(240,90,80,0.35);
            box-shadow: 0 0 60px rgba(240,90,80,0.20);
        }
        .bg-bubbles span:nth-child(6) { 
            left: 60%; 
            width: 40px; 
            height: 40px; 
            animation-duration: 14s; 
            animation-delay: -8s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.60), rgba(240,90,80,0.10) 70%);
            border: 2px solid rgba(240,90,80,0.40);
            box-shadow: 0 0 60px rgba(240,90,80,0.25);
        }
        .bg-bubbles span:nth-child(7) { 
            left: 72%; 
            width: 110px; 
            height: 110px; 
            animation-duration: 28s; 
            animation-delay: -18s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.40), rgba(240,90,80,0.08) 70%);
            border: 2px solid rgba(240,90,80,0.28);
            box-shadow: 0 0 60px rgba(240,90,80,0.15);
        }
        .bg-bubbles span:nth-child(8) { 
            left: 85%; 
            width: 55px; 
            height: 55px; 
            animation-duration: 18s; 
            animation-delay: -5s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.55), rgba(240,90,80,0.10) 70%);
            border: 2px solid rgba(240,90,80,0.35);
            box-shadow: 0 0 60px rgba(240,90,80,0.20);
        }
        .bg-bubbles span:nth-child(9) { 
            left: 30%; 
            width: 35px; 
            height: 35px; 
            animation-duration: 12s; 
            animation-delay: -3s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.60), rgba(240,90,80,0.12) 70%);
            border: 2px solid rgba(240,90,80,0.40);
            box-shadow: 0 0 60px rgba(240,90,80,0.25);
        }
        .bg-bubbles span:nth-child(10) { 
            left: 55%; 
            width: 65px; 
            height: 65px; 
            animation-duration: 21s; 
            animation-delay: -12s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.50), rgba(240,90,80,0.08) 70%);
            border: 2px solid rgba(240,90,80,0.35);
            box-shadow: 0 0 60px rgba(240,90,80,0.20);
        }
        .bg-bubbles span:nth-child(11) { 
            left: 8%; 
            width: 50px; 
            height: 50px; 
            animation-duration: 17s; 
            animation-delay: -7s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.55), rgba(240,90,80,0.10) 70%);
            border: 2px solid rgba(240,90,80,0.35);
            box-shadow: 0 0 60px rgba(240,90,80,0.20);
        }
        .bg-bubbles span:nth-child(12) { 
            left: 42%; 
            width: 75px; 
            height: 75px; 
            animation-duration: 24s; 
            animation-delay: -16s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.50), rgba(240,90,80,0.08) 70%);
            border: 2px solid rgba(240,90,80,0.35);
            box-shadow: 0 0 60px rgba(240,90,80,0.20);
        }
        .bg-bubbles span:nth-child(13) { 
            left: 68%; 
            width: 30px; 
            height: 30px; 
            animation-duration: 13s; 
            animation-delay: -9s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.60), rgba(240,90,80,0.12) 70%);
            border: 2px solid rgba(240,90,80,0.40);
            box-shadow: 0 0 60px rgba(240,90,80,0.25);
        }
        .bg-bubbles span:nth-child(14) { 
            left: 78%; 
            width: 60px; 
            height: 60px; 
            animation-duration: 20s; 
            animation-delay: -11s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.55), rgba(240,90,80,0.10) 70%);
            border: 2px solid rgba(240,90,80,0.35);
            box-shadow: 0 0 60px rgba(240,90,80,0.20);
        }
        .bg-bubbles span:nth-child(15) { 
            left: 15%; 
            width: 85px; 
            height: 85px; 
            animation-duration: 26s; 
            animation-delay: -13s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.45), rgba(240,90,80,0.08) 70%);
            border: 2px solid rgba(240,90,80,0.30);
            box-shadow: 0 0 60px rgba(240,90,80,0.18);
        }
        .bg-bubbles span:nth-child(16) { 
            left: 5%; 
            width: 38px; 
            height: 38px; 
            animation-duration: 15s; 
            animation-delay: -1s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.55), rgba(240,90,80,0.10) 70%);
            border: 2px solid rgba(240,90,80,0.35);
            box-shadow: 0 0 60px rgba(240,90,80,0.20);
        }
        .bg-bubbles span:nth-child(17) { 
            left: 50%; 
            width: 45px; 
            height: 45px; 
            animation-duration: 18s; 
            animation-delay: -15s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.50), rgba(240,90,80,0.08) 70%);
            border: 2px solid rgba(240,90,80,0.35);
            box-shadow: 0 0 60px rgba(240,90,80,0.20);
        }
        .bg-bubbles span:nth-child(18) { 
            left: 75%; 
            width: 50px; 
            height: 50px; 
            animation-duration: 22s; 
            animation-delay: -17s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.45), rgba(240,90,80,0.08) 70%);
            border: 2px solid rgba(240,90,80,0.30);
            box-shadow: 0 0 60px rgba(240,90,80,0.18);
        }
        .bg-bubbles span:nth-child(19) { 
            left: 20%; 
            width: 55px; 
            height: 55px; 
            animation-duration: 16s; 
            animation-delay: -19s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.55), rgba(240,90,80,0.10) 70%);
            border: 2px solid rgba(240,90,80,0.35);
            box-shadow: 0 0 60px rgba(240,90,80,0.20);
        }
        .bg-bubbles span:nth-child(20) { 
            left: 65%; 
            width: 35px; 
            height: 35px; 
            animation-duration: 14s; 
            animation-delay: -20s; 
            background: radial-gradient(circle at 35% 30%, rgba(240,90,80,0.60), rgba(240,90,80,0.12) 70%);
            border: 2px solid rgba(240,90,80,0.40);
            box-shadow: 0 0 60px rgba(240,90,80,0.25);
        }

        /* ALL ICONS - RED THEME ONLY */
        .bg-bubbles span i {
            font-size: clamp(18px, 2.5vw, 34px);
            opacity: 0.95;
            filter: drop-shadow(0 2px 12px rgba(240,90,80,0.3));
            transition: transform 0.3s ease;
            color: #ffffff;
        }

        .bg-bubbles span:hover i {
            transform: scale(1.15);
        }

        /* Larger icons on specific bubbles */
        .bg-bubbles span:nth-child(3) i,
        .bg-bubbles span:nth-child(7) i,
        .bg-bubbles span:nth-child(12) i,
        .bg-bubbles span:nth-child(15) i {
            font-size: clamp(28px, 3.5vw, 44px);
        }

        @keyframes bubbleRise {
            0% { 
                transform: translate3d(0, 0, 0) scale(0.85) rotate(0deg); 
                opacity: 0; 
            }
            8% { opacity: 0.7; }
            45% { 
                transform: translate3d(30px, -45vh, 0) scale(1.02) rotate(5deg); 
                opacity: 0.9; 
            }
            75% { 
                transform: translate3d(-25px, -80vh, 0) scale(1.06) rotate(-3deg); 
                opacity: 0.7; 
            }
            100% { 
                transform: translate3d(15px, -125vh, 0) scale(1.10) rotate(0deg); 
                opacity: 0; 
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .bg-bubbles span { animation: none; opacity: 0.15; }
        }

        /* Responsive bubble adjustments */
        @media (max-width: 768px) {
            .bg-bubbles span i {
                font-size: clamp(14px, 2vw, 24px);
            }
            .bg-bubbles span:nth-child(3) i,
            .bg-bubbles span:nth-child(7) i,
            .bg-bubbles span:nth-child(12) i,
            .bg-bubbles span:nth-child(15) i {
                font-size: clamp(20px, 2.8vw, 32px);
            }
            .bg-bubbles span {
                width: 40px !important;
                height: 40px !important;
            }
            .bg-bubbles span:nth-child(3),
            .bg-bubbles span:nth-child(7),
            .bg-bubbles span:nth-child(12),
            .bg-bubbles span:nth-child(15) {
                width: 65px !important;
                height: 65px !important;
            }
        }

        @media (max-width: 520px) {
            body { padding: 16px; }

            .login-container {
                padding: 28px 18px 22px;
                border-radius: 20px;
            }

            .logo-wrapper {
                width: 70px;
                height: 70px;
                padding: 0;
            }

            .logo-section h1 { font-size: 22px; }
            .form-header h2 { font-size: 18px; }
            .role-selector {
                gap: 4px;
                grid-template-columns: repeat(6, minmax(0, 1fr));
            }

            .role-btn {
                min-height: 58px;
                padding: 8px 1px 6px;
                font-size: 6.5px;
                border-radius: 10px;
            }

            .role-btn i { font-size: 14px; margin-bottom: 4px; }

            .features-section {
                flex-wrap: wrap;
                gap: 10px;
                justify-content: center;
            }

            .feature-item { font-size: 9px; }
        }

        @media (max-width: 360px) {
            .login-container { padding-inline: 14px; }
            .role-btn span { font-size: 6.5px; }
        }

        .app-loader {
            position: fixed;
            inset: 0;
            z-index: 10050;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(35, 50, 70, 0.42);
        }
        .app-loader.show { display: flex; }
        .app-loader-box {
            background: #fff;
            border-radius: 16px;
            padding: 26px 34px;
            text-align: center;
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
            min-width: 170px;
        }
        .app-loader-spinner {
            width: 40px;
            height: 40px;
            margin: 0 auto 12px;
            border: 4px solid #e9ecef;
            border-top-color: #f05a50;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        .app-loader-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: #233246;
        }


        @media (max-width: 360px) {
            .login-container { padding-inline: 14px; }
            .role-btn span { font-size: 6.5px; }
        }