:root{--primary-color:#0a0a0a;--secondary-color:#1a1a2e;--accent-color:#16213e;--neon-blue:#00d4ff;--neon-purple:#8b5cf6;--neon-green:#0f8;--text-light:#fff;--text-muted:#a0a0a0;--glass-bg:rgba(255,255,255,.1);--glass-border:rgba(255,255,255,.2);--shadow-glow:0 0 20px rgba(0,212,255,.3);--shadow-glow-purple:0 0 20px rgba(139,92,246,.3);--shadow-glow-green:0 0 20px rgba(0,255,136,.3);--transition:all .3s cubic-bezier(.4,0,.2,1);--border-radius:20px;--border-radius-sm:12px}*{margin:0;padding:0;box-sizing:border-box}html{height:100%;scroll-behavior:smooth}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 50%,var(--accent-color) 100%);min-height:100vh;color:var(--text-light);overflow-x:hidden;position:relative}.animated-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden}.animated-bg::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgba(0,212,255,.1) 0%,transparent 50%) , radial-gradient(circle at 80% 20%,rgba(139,92,246,.1) 0%,transparent 50%) , radial-gradient(circle at 40% 40%,rgba(0,255,136,.05) 0%,transparent 50%);animation:backgroundShift 20s ease-in-out infinite}@keyframes backgroundShift {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(-20px) translateY(-10px); }
  50% { transform: translateX(20px) translateY(10px); }
  75% { transform: translateX(-10px) translateY(20px); }
}.bg-particle{position:absolute;width:4px;height:4px;background:var(--neon-blue);border-radius:50%;opacity:.6;animation:float 6s ease-in-out infinite}.bg-particle:nth-child(1) {top:20%;left:20%;animation-delay:0s;background:var(--neon-blue)}.bg-particle:nth-child(2) {top:60%;left:80%;animation-delay:2s;background:var(--neon-purple)}.bg-particle:nth-child(3) {top:80%;left:30%;animation-delay:4s;background:var(--neon-green)}.bg-particle:nth-child(4) {top:30%;left:70%;animation-delay:1s;background:var(--neon-blue)}.bg-particle:nth-child(5) {top:70%;left:10%;animation-delay:3s;background:var(--neon-purple)}@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(120deg); }
  66% { transform: translateY(10px) rotate(240deg); }
}.login-container{min-height:100vh;display:flex;flex-direction:column;padding:20px;max-width:1400px;margin:0 auto}.login-header{background:var(--glass-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--border-radius);padding:20px 30px;margin-bottom:30px;box-shadow:var(--shadow-glow);position:relative;overflow:hidden}.login-header::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:shimmer 3s infinite}@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}.header-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;position:relative;z-index:1}.institution-info{display:flex;align-items:center;gap:20px;flex:1}.institution-logo{position:relative}.logo-glow{position:relative;width:60px;height:60px;border-radius:50%;background:var(--glass-bg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow);border:1px solid var(--glass-border)}.logo-img{width:40px;height:40px;object-fit:contain;filter:brightness(1.2)}.institution-text{flex:1}.institution-name{font-size:1.8rem;font-weight:700;color:var(--text-light);margin:0;text-shadow:0 2px 10px rgba(0,212,255,.3);letter-spacing:-.02em;line-height:1.2}.institution-subtitle{font-size:1rem;color:var(--text-muted);margin:5px 0 0 0;font-weight:400;letter-spacing:.01em;line-height:1.4}.system-status{display:flex;align-items:center;gap:10px}.status-indicator{display:flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.3);border-radius:var(--border-radius-sm);font-size:.85rem}.status-dot{width:8px;height:8px;background:var(--neon-green);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}.login-main{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 0}.login-card{width:100%;max-width:450px;background:var(--glass-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--border-radius);box-shadow:var(--shadow-glow);position:relative;overflow:hidden}.card-glow{position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,var(--neon-blue),var(--neon-purple),var(--neon-green),var(--neon-blue));border-radius:var(--border-radius);z-index:-1;opacity:.3;animation:rotate 4s linear infinite}@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}.card-header{text-align:center;padding:40px 30px 20px;position:relative}.login-icon{width:80px;height:80px;margin:0 auto 20px;background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--text-light);box-shadow:var(--shadow-glow);position:relative}.login-icon::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,var(--neon-blue),var(--neon-purple));border-radius:50%;z-index:-1;animation:rotate 3s linear infinite}.login-title{font-size:1.8rem;font-weight:700;color:var(--text-light);margin:0 0 10px 0;text-shadow:0 0 10px rgba(0,212,255,.5)}.login-subtitle{font-size:.95rem;color:var(--text-muted);margin:0}.card-body{padding:20px 30px 30px}.login-form{display:flex;flex-direction:column;gap:25px}.form-group{position:relative}.form-label{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--text-light);margin-bottom:8px}.form-label i{color:var(--neon-blue)}.input-container{position:relative}.form-input{width:100%;padding:15px 20px;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:var(--border-radius-sm);color:var(--text-light);font-size:1rem;transition:var(--transition);backdrop-filter:blur(10px)}.form-input:focus{outline:none;border-color:var(--neon-blue);box-shadow:0 0 20px rgba(0,212,255,.3);background:rgba(255,255,255,.08)}.form-input::placeholder{color:var(--text-muted)}.form-input option{background:var(--secondary-color);color:var(--text-light)}.input-glow{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-sm);background:linear-gradient(45deg,var(--neon-blue),var(--neon-purple));opacity:0;z-index:-1;transition:var(--transition)}.input-container.focused .input-glow{opacity:.2}.password-container{position:relative}.password-toggle{position:absolute;right:15px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;transition:var(--transition);z-index:2}.password-toggle:hover{color:var(--neon-blue)}.btn-login{position:relative;width:100%;padding:18px;background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));border:none;border-radius:var(--border-radius-sm);color:var(--text-light);font-size:1.1rem;font-weight:600;cursor:pointer;transition:var(--transition);overflow:hidden;margin-top:10px}.btn-content{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;z-index:2}.btn-glow{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));opacity:0;transition:var(--transition)}.btn-login:hover .btn-glow{opacity:.8}.btn-login:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,212,255,.4)}.btn-login:active{transform:translateY(0)}.btn-login.loading{pointer-events:none;opacity:.8}.btn-particles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;border-radius:var(--border-radius-sm)}.btn-particles span{position:absolute;width:4px;height:4px;background:var(--text-light);border-radius:50%;opacity:0;animation:particleFloat 3s infinite}.btn-particles span:nth-child(1) {top:20%;left:20%;animation-delay:0s}.btn-particles span:nth-child(2) {top:80%;left:80%;animation-delay:1s}.btn-particles span:nth-child(3) {top:60%;left:30%;animation-delay:2s}.btn-particles span:nth-child(4) {top:30%;left:70%;animation-delay:.5s}@keyframes particleFloat {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-10px); }
}.btn-login:hover .btn-particles span{animation-play-state:running}.card-footer{padding:20px 30px;border-top:1px solid var(--glass-border);text-align:center}.security-info{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.85rem;color:var(--text-muted)}.security-info i{color:var(--neon-green)}.login-footer{margin-top:30px;padding:20px 0;text-align:center}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;max-width:600px;margin:0 auto}.footer-info{flex:1}.footer-text{font-size:.9rem;color:var(--text-light);margin:0 0 5px 0}.footer-subtext{font-size:.8rem;color:var(--text-muted);margin:0}.footer-links{display:flex;gap:20px}.footer-link{display:flex;align-items:center;gap:5px;color:var(--text-muted);text-decoration:none;font-size:.85rem;transition:var(--transition)}.footer-link:hover{color:var(--neon-blue);text-decoration:none}.error-notification{position:fixed;top:20px;right:20px;background:rgba(231,76,60,.9);backdrop-filter:blur(10px);border:1px solid rgba(231,76,60,.3);border-radius:var(--border-radius-sm);padding:15px 20px;color:var(--text-light);box-shadow:0 10px 30px rgba(231,76,60,.3);transform:translateX(400px);transition:var(--transition);z-index:1000}.error-notification.show{transform:translateX(0)}.notification-content{display:flex;align-items:center;gap:10px}.logo-img{transition:var(--transition);filter:drop-shadow(0 4px 20px rgba(0,212,255,.3))}.logo-img:hover{filter:drop-shadow(0 6px 25px rgba(0,212,255,.5));transform:scale(1.02)}.login-icon i{background:linear-gradient(135deg,var(--neon-blue),var(--neon-green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 10px rgba(0,212,255,.3))}.form-input:focus{outline:2px solid var(--neon-blue);outline-offset:2px}.btn-login:focus{outline:2px solid var(--neon-purple);outline-offset:2px}.system-status{animation:pulse 3s infinite ease-in-out}@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}@media (max-width:768px){.login-container{padding:15px}.login-header{padding:15px 20px;margin-bottom:20px}.header-content{flex-direction:column;text-align:center;gap:15px}.institution-info{flex-direction:column;gap:15px}.institution-name{font-size:1.3rem}.login-card{max-width:100%}.card-header{padding:30px 20px 15px}.card-body{padding:15px 20px 25px}.login-title{font-size:1.5rem}.footer-content{flex-direction:column;gap:15px}.footer-links{justify-content:center}}@media (max-width:480px){.login-icon{width:60px;height:60px;font-size:1.5rem}.login-title{font-size:1.3rem}.form-input{padding:12px 15px}.btn-login{padding:15px;font-size:1rem}}@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.login-card{animation:fadeInUp .6s ease-out}.login-header{animation:fadeInUp .4s ease-out}.btn-login.loading .btn-content{opacity:.7}.btn-login.loading .btn-glow{opacity:1;animation:loadingPulse 1.5s infinite}@keyframes loadingPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}