* {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #ffffff;
                font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
                padding: 1rem;
                position: relative;
                overflow: hidden;
            }

            /* ----- BACKGROUND ANIMASI (bintik-bintik warna pastel) ----- */
            .bg-decor {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 0;
                overflow: hidden;
            }
            .bg-decor span {
                position: absolute;
                border-radius: 50%;
                opacity: 0.15;
                animation: floatBubble 18s infinite ease-in-out alternate;
            }
            .bg-decor span:nth-child(1) {
                width: 180px;
                height: 180px;
                background: #f9a8d4;
                top: -40px;
                left: -60px;
                animation-duration: 20s;
                animation-delay: -2s;
            }
            .bg-decor span:nth-child(2) {
                width: 250px;
                height: 250px;
                background: #93c5fd;
                bottom: -80px;
                right: -80px;
                animation-duration: 25s;
                animation-delay: -5s;
            }
            .bg-decor span:nth-child(3) {
                width: 140px;
                height: 140px;
                background: #c4b5fd;
                top: 50%;
                left: 60%;
                animation-duration: 22s;
                animation-delay: -8s;
            }
            .bg-decor span:nth-child(4) {
                width: 100px;
                height: 100px;
                background: #fdba74;
                bottom: 20%;
                left: 5%;
                animation-duration: 16s;
                animation-delay: -3s;
            }
            .bg-decor span:nth-child(5) {
                width: 200px;
                height: 200px;
                background: #fde68a;
                top: 10%;
                right: 10%;
                animation-duration: 28s;
                animation-delay: -10s;
            }

            @keyframes floatBubble {
                0% { transform: translate(0, 0) scale(1) rotate(0deg); }
                33% { transform: translate(30px, -40px) scale(1.1) rotate(120deg); }
                66% { transform: translate(-20px, 30px) scale(0.9) rotate(240deg); }
                100% { transform: translate(15px, -20px) scale(1.05) rotate(360deg); }
            }

            /* ----- KARTU UTAMA ----- */
            .card-sweet {
                position: relative;
                z-index: 1;
                background: rgba(255, 255, 255, 0.85);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border-radius: 40px;
                box-shadow: 0 30px 80px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.5);
                max-width: 420px;
                width: 100%;
                padding: 2.5rem 2rem;
                animation: cardEntry 0.9s cubic-bezier(0.23, 1, 0.32, 1) forwards;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-sweet:hover {
                transform: translateY(-4px);
                box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08);
            }

            @keyframes cardEntry {
                0% { opacity: 0; transform: scale(0.94) translateY(30px); }
                100% { opacity: 1; transform: scale(1) translateY(0); }
            }

            /* ----- HEADER KARTU (logo + nama) ----- */
            .card-sweet .card-header {
                background: transparent;
                border-bottom: none;
                padding: 0 0 1.8rem 0;
                text-align: center;
            }

            .logo-sekolah {
                max-height: 70px;
                width: auto;
                margin-bottom: 0.75rem;
                display: block;
                margin-left: auto;
                margin-right: auto;
                border-radius: 12px;
                object-fit: contain;
                transition: transform 0.3s;
            }
            .logo-sekolah:hover {
                transform: scale(1.05);
            }

            .nama-sekolah {
                font-size: 1.2rem;
                font-weight: 600;
                color: #1e293b;
                margin-bottom: 0.25rem;
                letter-spacing: -0.2px;
            }

            .icon-lock-wrapper {
                display: inline-block;
                background: linear-gradient(135deg, #eef2ff, #e0e7ff);
                padding: 18px;
                border-radius: 50%;
                margin: 0.5rem 0 0.5rem;
                border: 1px solid #c7d2fe;
                animation: pulseGlow 2.4s ease-in-out infinite;
                transition: transform 0.3s;
            }
            .icon-lock-wrapper:hover {
                transform: scale(1.05);
            }
            .icon-lock-wrapper i {
                font-size: 2.8rem;
                color: #4f46e5;
                line-height: 1;
                display: block;
                animation: floatIcon 3s ease-in-out infinite;
            }

            @keyframes pulseGlow {
                0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.15); }
                50% { box-shadow: 0 0 0 18px rgba(79, 70, 229, 0); }
            }
            @keyframes floatIcon {
                0%, 100% { transform: translateY(0) rotate(0deg); }
                50% { transform: translateY(-6px) rotate(3deg); }
            }

            .card-sweet h4 {
                color: #1e293b;
                font-weight: 700;
                font-size: 1.6rem;
                letter-spacing: -0.5px;
                margin-bottom: 0.25rem;
            }
            .card-sweet .subtitle {
                color: #64748b;
                font-size: 0.95rem;
                font-weight: 400;
            }

            /* ----- INPUT GROUP ----- */
            .input-group-icon {
                position: relative;
                margin-bottom: 1.8rem;
            }
            .input-group-icon .bi {
                position: absolute;
                left: 16px;
                top: 50%;
                transform: translateY(-50%);
                color: #94a3b8;
                font-size: 1.2rem;
                transition: color 0.3s, transform 0.3s;
                pointer-events: none;
            }
            .form-control-sweet {
                background: #f8fafc !important;
                border: 2px solid #e2e8f0 !important;
                color: #1e293b !important;
                border-radius: 18px !important;
                padding: 0.9rem 1.2rem 0.9rem 48px !important;
                font-size: 1rem !important;
                transition: all 0.3s ease;
                text-align: center;
                letter-spacing: 2px;
                font-weight: 500;
            }
            .form-control-sweet:focus {
                background: #ffffff !important;
                border-color: #4f46e5 !important;
                box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.15) !important;
                outline: none;
            }
            .form-control-sweet::placeholder {
                color: #b0baca;
                letter-spacing: 0.3px;
                font-weight: 400;
            }
            .input-group-icon:focus-within .bi {
                color: #4f46e5;
                transform: translateY(-50%) scale(1.1);
            }

            /* ----- TOMBOL ----- */
            .btn-gradient-sweet {
                background: linear-gradient(135deg, #4f46e5, #7c3aed);
                border: none;
                border-radius: 18px;
                padding: 0.95rem;
                font-weight: 600;
                font-size: 1.05rem;
                color: #fff;
                transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
                box-shadow: 0 6px 20px rgba(79, 70, 229, 0.25);
                width: 100%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.6rem;
                position: relative;
                overflow: hidden;
            }
            .btn-gradient-sweet::after {
                content: '';
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
                opacity: 0;
                transition: opacity 0.4s;
                transform: scale(0.5);
            }
            .btn-gradient-sweet:hover {
                transform: translateY(-3px);
                box-shadow: 0 12px 35px rgba(79, 70, 229, 0.35);
                background: linear-gradient(135deg, #6366f1, #8b5cf6);
            }
            .btn-gradient-sweet:hover::after {
                opacity: 1;
                transform: scale(1);
            }
            .btn-gradient-sweet:active {
                transform: scale(0.96);
            }

            /* ----- ALERT (akan di-hide otomatis) ----- */
            .alert-sweet {
                background: #fef2f2;
                border: 1px solid #fecaca;
                color: #991b1b;
                border-radius: 18px;
                padding: 0.8rem 1rem;
                font-size: 0.95rem;
                margin-bottom: 1.5rem;
                animation: shakeAlert 0.5s ease;
            }
            .alert-sweet .btn-close {
                filter: none;
                opacity: 0.6;
            }
            .alert-sweet .bi-exclamation-triangle-fill {
                color: #dc2626;
            }
            @keyframes shakeAlert {
                0%, 100% { transform: translateX(0); }
                20% { transform: translateX(-8px); }
                40% { transform: translateX(8px); }
                60% { transform: translateX(-4px); }
                80% { transform: translateX(4px); }
            }

            /* ----- FOOTER ----- */
            hr {
                border-color: #eef2f6;
                margin: 1.8rem 0 1rem;
            }
            .footer-text {
                color: #94a3b8;
                font-size: 0.85rem;
            }
            .footer-text a {
                color: #4f46e5;
                text-decoration: none;
                font-weight: 500;
                transition: color 0.2s;
                border-bottom: 1px dotted transparent;
            }
            .footer-text a:hover {
                color: #4338ca;
                border-bottom-color: #4338ca;
            }

            /* ----- RESPONSIF ----- */
            @media (max-width: 480px) {
                .card-sweet { padding: 1.8rem 1.2rem; }
                .logo-sekolah { max-height: 50px; }
                .nama-sekolah { font-size: 1rem; }
                .icon-lock-wrapper { padding: 14px; }
                .icon-lock-wrapper i { font-size: 2.2rem; }
                .card-sweet h4 { font-size: 1.4rem; }
                .form-control-sweet { padding: 0.75rem 1rem 0.75rem 44px; font-size: 0.95rem; }
                .btn-gradient-sweet { padding: 0.8rem; font-size: 0.95rem; }
                .bg-decor span { display: none; }
            }