: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: rgba(147, 51, 234, .7);--x1: 30%;--y1: 30%;--c1: rgba(65, 0, 129, .7);--x2: 70%;--y2: 40%;--c2: rgba(236, 72, 153, .7);--x3: 20%;--y3: 80%;--c3: rgba(106, 0, 255, .7);--x4: 80%;--y4: 70%;--c4: rgba(0, 132, 255, .7)}body{background:transparent;font-family:inherit;margin:0;min-height:100vh;display:grid;place-items:center;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%}.logo-section h1{color:#fff;font-size:24px;margin:0 0 8px;text-shadow:0 2px 4px rgba(0,0,0,.6)}.logo-section .subtitle{color:#e0e0e0;font-size:14px;margin:0}.input-group{position:relative;margin-bottom:20px;width:100%}.input-icon{position:absolute;left:12px;top:12px;transform:none;color:#ffffffb3;font-size:16px;pointer-events:none}.input-group input,.input-group select{width:100%;box-sizing:border-box;padding:12px 12px 12px 44px;border:2px solid transparent;border-radius:8px;background:#ffffff1a;backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.3)}.input-group select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:44px;background:#ffffff1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 10 6'%3E%3Cpolyline points='1 1 5 5 9 1' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;background-size:14px 14px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer}.input-group select::-ms-expand{display:none}.input-group select option{background:#fff;color:#111}.input-group select option:checked{background-color:#e9ecef;color:#111}.input-group select option[disabled]{color:#9aa0a6}.input-group input:focus,.input-group select:focus{outline:none;border-color:#ffffff80;background:#ffffff26;color:#fff}.input-group input::placeholder,.input-group select::placeholder{color:#fff9}.login-text{color:#e0e0e0}.role-selection{margin:24px 0;width:100%}.role-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#fff;margin-bottom:16px;text-align:center;justify-content:center}.role-title i{color:var(--primary-color)}.role-options{display:grid;grid-template-columns:1fr;gap:12px}.role-option{position:relative;cursor:pointer;transition:all .3s ease}.role-option input[type=radio]{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.role-card{display:flex;align-items:center;gap:16px;padding:20px;background:#ffffff14;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:16px;transition:all .3s ease;position:relative;overflow:hidden}.role-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff0d,#ffffff05);opacity:0;transition:opacity .3s ease}.role-option:hover .role-card{transform:translateY(-2px);border-color:#ffffff40;box-shadow:0 8px 25px #00000026}.role-option input[type=radio]:checked+.role-card{background:#dc35451a;border-color:var(--primary-color);box-shadow:0 0 0 2px #dc354533,0 8px 25px #dc354526}.role-option input[type=radio]:checked+.role-card:before{opacity:1}.role-icon{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,var(--primary-color),#ff6b6b);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex-shrink:0;box-shadow:0 4px 15px #dc35454d}.role-info{flex:1;min-width:0}.role-info h4{font-size:16px;font-weight:600;color:#fff;margin:0 0 4px}.role-info p{font-size:13px;color:#ffffffb3;margin:0;line-height:1.4}.role-check{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;color:var(--primary-color);font-size:12px;opacity:0;transition:all .3s ease;flex-shrink:0}.role-option input[type=radio]:checked+.role-card .role-check{opacity:1;border-color:var(--primary-color);background:#ffffff1a}.password-strength-container{margin-top:8px;width:100%}.password-strength-bar{width:100%;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;position:relative;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1)}.password-strength-fill{height:100%;width:0%;transition:all .3s ease;border-radius:3px;position:relative}.password-strength-fill.weak{background:linear-gradient(90deg,#ff4757,#ff3838);box-shadow:0 0 10px #ff475780}.password-strength-fill.fair{background:linear-gradient(90deg,#fcff44,#fbff00);box-shadow:0 0 10px #ffa72680}.password-strength-fill.good{background:linear-gradient(90deg,#ee9e5d,#ff7300);box-shadow:0 0 10px #4caf5080}.password-strength-fill.strong{background:linear-gradient(90deg,#6ec572,#0f1);box-shadow:0 0 10px #2e7d3280}.password-strength-text{font-size:11px;color:#ffffffb3;margin-top:4px;text-align:left;font-weight:500;transition:color .3s ease}.password-strength-text.weak{color:#ff4757}.password-strength-text.fair{color:#ffa726}.password-strength-text.good{color:#4caf50}.password-strength-text.strong{color:#2e7d32}.register-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}.register-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.register-btn i{font-size:14px;transition:transform .3s ease}.register-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}.error-message{color:var(--primary-color);font-size:12px;margin-top:4px;display:none}.info-message{color:var(--text-muted);font-size:12px;margin-top:4px}.login-text{text-align:center;font-size:14px;color:var(--text-muted);margin:0}.login-text a{color:var(--primary-color);text-decoration:none;font-weight:500}.login-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}.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}@media (max-width: 768px){.role-card{padding:16px;gap:12px}.role-icon{width:40px;height:40px;font-size:16px}.role-info h4{font-size:14px}.role-info p{font-size:12px}.role-check{width:20px;height:20px;font-size:10px}}@media (max-width: 480px){.role-selection{margin:20px 0}.role-title{font-size:14px;margin-bottom:12px}.role-card{padding:14px;gap:10px;border-radius:12px}.role-icon{width:36px;height:36px;font-size:14px}.role-info h4{font-size:13px}.role-info p{font-size:11px}}.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,.dark-mode .input-group select{background:#3d3d3d;color:#e0e0e0;border:2px solid #555}.dark-mode .input-group input:focus,.dark-mode .input-group select:focus{border-color:#ff6b6b;background:#404040;color:#e0e0e0}.dark-mode .input-group input::placeholder{color:#b0b0b0}.dark-mode .input-icon{color:#b0b0b0}.dark-mode select option{background-color:#3d3d3d;color:#e0e0e0}.dark-mode .register-btn{background:#ff6b6b;color:#fff}.dark-mode .register-btn:hover{background:#e55555}.dark-mode .divider:before,.dark-mode .divider:after{background:#555}.dark-mode .divider span{background:#2d2d2d;color:#b0b0b0}.dark-mode .error-message{color:#ff6b6b}.dark-mode .info-message,.dark-mode .login-text{color:#b0b0b0}.dark-mode .login-text a{color:#ff6b6b}.dark-mode .login-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}.dark-mode .loading{background:#3d3d3d;color:#b0b0b0}@media (max-width: 480px){.dark-mode .login-box{background:#2d2d2d;border:1px solid #404040}}@media (max-width: 992px){.container{padding:15px}.login-box{max-width:450px;padding:25px}}@media (max-width: 768px){body,.container{padding:10px}.login-box{max-width:100%;padding:20px;margin:0;border-radius:12px}.logo-circle{width:70px;height:70px}.logo{width:100%;height:100%}.logo-section h1{font-size:22px}.logo-section .subtitle{font-size:13px}.input-group{margin-bottom:16px}.input-group input,.input-group select{padding:10px 10px 10px 36px;font-size:14px}.input-icon{left:10px;font-size:14px}.register-btn{padding:10px;font-size:14px}.divider{margin:16px 0}.login-text{font-size:13px}}@media (max-width: 600px){html,body{overflow-x:hidden}.login-box{max-width:100%;margin:0;padding:16px;border-radius:8px;max-height:calc(100vh - 20px);overflow-y:auto}.logo-section{margin-bottom:24px}.logo-circle{width:60px;height:60px}.logo-section h1{font-size:20px}.logo-section .subtitle{font-size:12px}.input-group{margin-bottom:14px}.input-group input,.input-group select{padding:8px 8px 8px 32px;font-size:13px;border-radius:6px}.input-icon{left:8px;font-size:13px}.register-btn{padding:8px;font-size:13px;border-radius:6px}.divider{margin:14px 0}.login-text{font-size:12px}}@media (max-width: 480px){body,.container{padding:5px}.login-box{padding:12px;border-radius:6px}.logo-section{margin-bottom:20px}.logo-circle{width:50px;height:50px}.logo-section h1{font-size:18px}.logo-section .subtitle{font-size:11px}.input-group{margin-bottom:12px}.input-group input,.input-group select{padding:6px 6px 6px 28px;font-size:12px;border-radius:4px}.input-icon{left:6px;font-size:12px}.register-btn{padding:6px;font-size:12px;border-radius:4px}.divider{margin:12px 0}.login-text{font-size:11px}}@media (max-width: 360px){.login-box{padding:8px}.logo-section{margin-bottom:16px}.logo-circle{width:40px;height:40px}.logo-section h1{font-size:16px}.logo-section .subtitle{font-size:10px}.input-group{margin-bottom:10px}.input-group input,.input-group select{padding:4px 4px 4px 24px;font-size:11px}.input-icon{left:4px;font-size:11px}.register-btn{padding:4px;font-size:11px}.divider{margin:10px 0}.login-text{font-size:10px}}@media (max-width: 768px){.password-strength-container{margin-top:6px}.password-strength-bar{height:5px}.password-strength-text{font-size:10px;margin-top:3px}}@media (max-width: 480px){.password-strength-container{margin-top:4px}.password-strength-bar{height:4px}.password-strength-text{font-size:9px;margin-top:2px}}