:root{--navy:#0b1b63;--gold:#f2c200;--leaf:#7bc043;--bg:#fff;--error:#dc3545;--success:#28a745}*{box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:0;background:linear-gradient(135deg,var(--navy) 0%,#1a237e 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;overflow-x:hidden}.login-container{width:100%;max-width:400px;padding:20px}.login-card{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.3);padding:40px 30px;border:1px solid rgba(255,255,255,.2);animation:slideUp .6s ease-out}@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}.login-header{text-align:center;margin-bottom:30px}.login-logo{max-height:80px;width:auto;border-radius:8px;margin-bottom:15px;box-shadow:0 4px 8px rgba(0,0,0,.1)}.login-header h1{color:var(--navy);margin:0 0 10px 0;font-size:1.8rem;font-weight:600}.login-header p{color:#666;margin:0;font-size:.95rem}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column}.form-group label{color:var(--navy);font-weight:600;margin-bottom:8px;font-size:.95rem}.form-group input{padding:15px;border:2px solid #e1e5e9;border-radius:10px;font-size:16px;transition:all .3s ease;background:#fff;color:var(--navy)}.form-group input:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(123,192,67,.1);transform:translateY(-1px)}.form-group input::placeholder{color:#999}.login-button{background:linear-gradient(135deg,var(--leaf) 0%,#6aa33a 100%);color:#fff;border:none;padding:15px;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;margin-top:10px}.login-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(123,192,67,.3)}.login-button:active{transform:translateY(0)}.login-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.button-loading{display:flex;align-items:center;justify-content:center;gap:8px}.button-loading::after{content:'';width:16px;height:16px;border:2px solid transparent;border-top:2px solid #fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}.error-message{background:linear-gradient(135deg,var(--error) 0%,#c82333 100%);color:#fff;padding:12px 15px;border-radius:8px;font-size:.9rem;text-align:center;margin-top:15px;animation:shake .5s ease-in-out}@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}#notification-container{position:fixed;top:20px;right:20px;z-index:10000;max-width:400px}.notification{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:16px 20px;margin-bottom:10px;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.3);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;transform:translateX(100%);opacity:0;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);cursor:pointer}.notification.show{transform:translateX(0);opacity:1}.notification.hide{transform:translateX(100%);opacity:0}.notification.success{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}.notification.error{background:linear-gradient(135deg,#ff6b6b 0%,#ee5a52 100%)}.notification.warning{background:linear-gradient(135deg,#feca57 0%,#ff9ff3 100%);color:#2c3e50}.notification.info{background:linear-gradient(135deg,#74b9ff 0%,#0984e3 100%)}.notification-content{display:flex;align-items:center;gap:12px}.notification-icon{font-size:24px;flex-shrink:0;opacity:.9}.notification-text{flex:1;font-weight:500;line-height:1.4}.notification-close{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.2);border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .2s}.notification-close:hover{background:rgba(255,255,255,.3)}@media (max-width:480px){.login-container{padding:15px}.login-card{padding:30px 20px;border-radius:15px}.login-header h1{font-size:1.5rem}.login-logo{max-height:60px}.form-group input{padding:12px;font-size:16px}.login-button{padding:12px;font-size:16px}#notification-container{top:10px;right:10px;left:10px;max-width:none}}.login-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 2s infinite}@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}