:root{--primary-color: #dc3545;--primary-hover: #c82333;--text-color: #333;--text-muted: #6c757d;--bg-color: #f8f9fa;--input-bg: #f8f9fa;--box-shadow: 0 8px 24px rgba(0, 0, 0, .12);--x0: 50%;--y0: 50%;--c0: #8d4ccc;--x1: 30%;--y1: 30%;--c1: #6a1b9a;--x2: 70%;--y2: 40%;--c2: #4527a0;--x3: 20%;--y3: 80%;--c3: #283593;--x4: 80%;--y4: 70%;--c4: #3f51b5;--speed0: .0003;--speed1: .00035;--speed2: .00032;--speed3: .0004;--speed4: .00038}body{background-color:transparent;font-family:inherit;margin:0;min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;color:#fff}.container{width:100%;padding:20px;box-sizing:border-box}.login-box{background:#ffffff1a;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);max-width:400px;width:90%;margin:0 auto;padding:30px;border-radius:16px;box-shadow:var(--box-shadow)}.logo-section{text-align:center;margin-bottom:32px}.logo-circle{width:80px;height:80px;margin:0 auto 16px;border-radius:50%;padding:4px;background:linear-gradient(45deg,var(--primary-color),#ff6b6b)}.logo{width:100%;height:100%;object-fit:cover;border-radius:50%}h1{color:#fff;font-size:24px;margin:0 0 8px;text-shadow:0 2px 4px rgba(0,0,0,.6)}.subtitle{color:#e0e0e0;font-size:14px;margin:0}.input-group{position:relative;margin-bottom:20px;width:100%;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:linear-gradient(90deg,#ffffff05,#ffffff03)}.input-icon{position:absolute;left:12px;top:12px;transform:none;color:#ffffffb3;font-size:16px;pointer-events:none}.input-group input{width:100%;box-sizing:border-box;padding:12px 12px 12px 44px;border:none;border-radius:0;background:transparent;backdrop-filter:none;font-size:14px;transition:all .18s ease;color:#fff}.input-group input:focus{outline:none;color:#fff}.input-group:focus-within{border-color:#ffffff80;background:linear-gradient(90deg,#ffffff08,#ffffff05)}.input-group input::placeholder{color:#fff9}.show-password-container{display:flex;align-items:center;margin-bottom:24px;user-select:none}.show-password-container input[type=checkbox]{display:none}.show-password-container label{display:flex;align-items:center;gap:8px;color:#fff;font-size:14px;cursor:pointer}.show-password-container i{font-size:16px;color:var(--text-muted)}.login-btn{width:100%;padding:12px;border:none;border-radius:8px;background:var(--primary-color);color:#fff;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s ease}.login-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.login-btn i{font-size:14px;transition:transform .3s ease}.login-btn:hover i{transform:translate(4px)}.divider{text-align:center;margin:24px 0;position:relative}.divider:before,.divider:after{content:"";position:absolute;top:50%;width:calc(50% - 30px);height:1px;background:#dee2e6}.divider:before{left:0}.divider:after{right:0}.divider span{background:#fff;padding:0 10px;color:var(--text-muted);font-size:14px}.signup-text{text-align:center;font-size:14px;color:var (--text-muted);margin:0}.signup-text a{color:var(--primary-color);text-decoration:none;font-weight:500}.signup-text a:hover{text-decoration:underline}.popup{position:fixed;top:20px;right:20px;background:#fff;border-radius:12px;box-shadow:var(--box-shadow);padding:16px;display:flex;align-items:center;gap:12px;transform:translate(120%);transition:transform .3s ease;z-index:1000}.popup.show{transform:translate(0)}.popup-icon{font-size:20px}.popup-content{display:flex;align-items:center;gap:12px}.popup.error{border-left:4px solid var(--primary-color)}.popup.error .popup-icon:before{content:"";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--primary-color)}.dark-mode{background:#1a1a1a!important;color:#e0e0e0!important}.dark-mode{--bg-color: #1a1a1a;--input-bg: #3d3d3d;--text-color: #e0e0e0;--text-muted: #b0b0b0;--box-shadow: 0 8px 24px rgba(0, 0, 0, .3)}.dark-mode body{background:#1a1a1a;color:#e0e0e0}.dark-mode .container{background:#1a1a1a}.dark-mode .login-box{background:#2d2d2d;box-shadow:0 8px 24px #0000004d;border:1px solid #404040}.dark-mode .logo-circle{background:linear-gradient(45deg,#ff6b6b,#ff8a8a)}.dark-mode h1{color:#e0e0e0}.dark-mode .subtitle{color:#b0b0b0}.dark-mode .input-group input{background:#3d3d3d;color:#e0e0e0;border:2px solid #555}.dark-mode .input-group input:focus{border-color:#ff6b6b;background:#404040;color:#e0e0e0}.dark-mode .input-group input::placeholder{color:#b0b0b0}.dark-mode .input-icon,.dark-mode .show-password-container label,.dark-mode .show-password-container i{color:#b0b0b0}.dark-mode .login-btn{background:#ff6b6b;color:#fff}.dark-mode .login-btn:hover{background:#e55555}.dark-mode .divider:before,.dark-mode .divider:after{background:#555}.dark-mode .divider span{background:#2d2d2d;color:#b0b0b0}.dark-mode .signup-text{color:#b0b0b0}.dark-mode .signup-text a{color:#ff6b6b}.dark-mode .signup-text a:hover{color:#e55555}.dark-mode .popup{background:#2d2d2d;color:#e0e0e0;box-shadow:0 8px 24px #0000004d;border:1px solid #404040}.dark-mode .popup.success{border-left:4px solid #28a745}.dark-mode .popup.error{border-left:4px solid #dc3545}.dark-mode .popup.warning{border-left:4px solid #ffc107}.dark-mode .popup.info{border-left:4px solid #17a2b8}.dark-mode .form-control.is-invalid{border-color:#dc3545}.dark-mode .form-control.is-valid{border-color:#28a745}.dark-mode .invalid-feedback{color:#dc3545}.dark-mode .valid-feedback{color:#28a745}