@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");:root{--primary-color:#3b82f6;--primary-hover:#2563eb;--secondary-color:#64748b;--whatsapp-color:#22c55e;--school-theme-green:#007a33;--school-theme-hover:#00923f;--bg-color-1:#0f172a;--bg-color-2:#1e293b;--transition-speed:0.25s}body{margin:0;padding:0;height:100vh;overflow:hidden;background:linear-gradient(135deg,var(--bg-color-1),var(--bg-color-2));display:flex;justify-content:center;align-items:center;font-family:Poppins,sans-serif}#particles-js{position:absolute;width:100%;height:100%;z-index:0}#preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-color-1);display:flex;justify-content:center;align-items:center;z-index:9999;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s ease;opacity:1}#preloader.preloader-hidden{transform:scale(1.5);opacity:0;pointer-events:none}.preloader-content{position:relative;display:flex;justify-content:center;align-items:center}#preloader .logo{width:120px;z-index:2}.spinner{position:absolute;width:160px;height:160px;border:4px solid hsla(0,0%,100%,.05);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.login-container{position:relative;z-index:1;width:100%;max-width:420px;padding:20px;box-sizing:border-box;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}body.loaded .login-container{opacity:1;transform:translateY(0)}.login-box{background:#1e293b!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:40px 35px;border-radius:16px;border:1px solid #334155!important;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)!important;text-align:center}.header-content{margin-bottom:30px}.header-content img.logo{width:125px;margin-bottom:15px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}.header-content h1{margin:0;color:#fff;font-size:24px;font-weight:600;letter-spacing:.5px}.form-wrapper{width:100%;overflow:hidden;transition:max-height var(--transition-speed) ease-in-out,opacity var(--transition-speed) ease-in-out;opacity:1;transform:none!important}#form-login{display:block}#form-otp{display:none}.form-group{margin-bottom:20px;position:relative}.form-control{width:100%;padding:14px 15px 14px 45px;border-radius:10px;border:1px solid #475569;font-size:15px;background:#0f172a!important;color:#fff!important;transition:border-color .15s ease,background-color .15s ease;box-sizing:border-box;box-shadow:none!important}.form-control::placeholder{color:#94a3b8}.form-control:focus{outline:none;border-color:var(--primary-color)!important;background:#0f172a!important;box-shadow:0 0 0 3px rgba(59,130,246,.25)!important}.form-control:-webkit-autofill,.form-control:-webkit-autofill:active,.form-control:-webkit-autofill:focus,.form-control:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 30px #0f172a inset!important;-webkit-text-fill-color:#fff!important;transition:background-color 5000s ease-in-out 0s}.form-group i.input-icon{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:#94a3b8;transition:color .15s ease;z-index:2}.form-control:focus~i.input-icon{color:var(--primary-color)}.password-toggle{position:absolute;right:15px;top:50%;transform:translateY(-50%);background:none;border:none;color:#94a3b8;cursor:pointer;padding:0;z-index:2;transition:color .15s ease}.password-toggle:hover{color:#fff}.btn-primary{width:100%;padding:14px;background:var(--primary-color)!important;border:none;color:#fff;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease!important;box-shadow:none!important}.btn-primary:hover{background:var(--school-theme-green)!important;transform:none!important;box-shadow:0 4px 12px rgba(0,122,51,.3)!important}.otp-group{display:flex;gap:10px}#btn-kirim-otp{padding:0 16px;background:#334155!important;color:#fff;border:1px solid #475569!important;border-radius:10px;cursor:pointer;font-weight:500;transition:background-color .15s ease;white-space:nowrap}#btn-kirim-otp:hover{background:#475569!important}#btn-kirim-otp:disabled{background:#1e293b!important;color:#64748b!important;border-color:#334155!important;cursor:not-allowed}.switch-method{margin-top:25px;text-align:center;border-top:1px solid #334155;padding-top:20px}.btn-switch{background:transparent;color:#cbd5e1;border:1px solid #475569;padding:12px 24px;border-radius:50px;font-weight:500;cursor:pointer;transition:background-color .15s ease,color .15s ease!important;display:inline-flex;align-items:center;gap:8px}.btn-switch:hover{background:#334155;color:#fff;transform:none!important}.btn-switch i.fa-whatsapp{color:var(--whatsapp-color);font-size:18px}#btn-install-pwa{background:#fff;color:#0f172a;border:none;padding:12px 20px;border-radius:50px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s ease!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;box-shadow:none!important}#btn-install-pwa:hover{background:#f1f5f9;transform:none!important}.small-text{margin-top:20px;font-size:12px;color:#64748b}@media (max-width:480px){.login-box{padding:30px 20px;border-radius:16px;border:1px solid #334155!important}}div:where(.swal2-container) div:where(.swal2-popup){background:#1e293b!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid #334155!important;border-radius:16px!important;color:#fff!important;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)!important;font-family:Poppins,sans-serif!important}div:where(.swal2-container) h2:where(.swal2-title){color:#fff!important;font-weight:600!important;font-size:22px!important}div:where(.swal2-container) div:where(.swal2-html-container){color:#cbd5e1!important;font-size:14px!important}.role-selection-button{display:block;width:100%;padding:14px 15px;margin:12px 0;background:#0f172a;border:1px solid #334155;color:#fff;border-radius:10px;font-size:15px;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease!important;box-sizing:border-box;box-shadow:none!important;font-family:Poppins,sans-serif}.role-selection-button:hover{background:var(--primary-color);border-color:var(--primary-color);transform:none!important;box-shadow:0 4px 12px rgba(59,130,246,.3)}.announcement-box{background:#2e200f;border:1px solid #b45309;border-left:4px solid #f59e0b;border-radius:8px;padding:12px 15px;margin-bottom:25px;text-align:left;display:flex;align-items:center;gap:15px;box-shadow:none!important}.warning-icon{font-size:24px;color:#fcd34d;filter:none!important}.announcement-text{color:#e2e8f0;font-size:12.5px;line-height:1.5}.announcement-text strong{color:#fcd34d}.security-trigger{background:rgba(16,185,129,.1);border:1px solid #059669;color:#34d399;padding:10px 15px;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:15px;transition:background-color .15s ease,border-color .15s ease!important;font-family:Poppins,sans-serif}.security-trigger:hover{background:rgba(16,185,129,.2);border-color:#10b981;transform:none!important;box-shadow:none!important}.security-trigger i{font-size:16px}