:root{--bg-color: linear-gradient(135deg, #4b0c0c, #2a5298);--card-color: rgba(255, 255, 255, .95);--text-color: #2c3e50;--primary: #4e8db7;--primary-hover: #3b6f91}.login-page{background:var(--bg-color)}body{min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:Segoe UI,Tahoma,sans-serif}.login-container{width:450px}.login-header{text-align:center;margin-bottom:25px}.logo{width:60px;height:60px;background:linear-gradient(135deg,#ff416c,#ff4b2b);color:#fff;font-weight:700;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;font-size:18px;box-shadow:0 4px 10px #0003}h2{font-size:22px;font-weight:700;color:#fff;margin-bottom:5px}.subtitle{color:#dcdcdc;font-size:16px}.cardss{background:var(--card-color);color:var(--text-color);border-radius:16px;padding:30px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column}.cardss form{display:flex;flex-direction:column;gap:15px}.cardss form>div{display:flex;flex-direction:column;gap:6px}label{font-size:13px;font-weight:600;color:#555}input{padding:12px;border:1px solid #ddd;border-radius:8px;transition:all .3s ease;width:100%;font-size:14px;background:#f9f9f9}input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4e8db733;background:#fff;outline:none}.input-group{display:flex}.input-group input{border-top-right-radius:0;border-bottom-right-radius:0}.input-group button{border:1px solid #ddd;border-left:none;background:#f1f1f1;border-radius:0 8px 8px 0;cursor:pointer;padding:0 12px;transition:.3s}.input-group button:hover{background:#e0e0e0}.btn-primary{background:var(--primary);width:100%;padding:12px;border-radius:10px;font-size:15px;color:#fff;font-weight:700;border:none;cursor:pointer;transition:all .3s ease;margin-top:5px}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 5px 15px #0003}.mt-2{font-size:12px;color:red}