:root { --primary:#0050ff; --bg:#f4f7ff; --border:#e0e7ff; --input-bg:#fcfdff; }

body { background:var(--bg); font-family:'Segoe UI',sans-serif; display:flex; justify-content:center; align-items:center; min-height:100vh; margin:0; padding:20px 0; }



.card { background:#fff; width:90%; max-width:320px; padding:30px; border-radius:20px; box-shadow:0 15px 35px rgba(0,80,255,0.08); }



.form-group { margin-bottom:15px; }

label { font-size:11px; font-weight:800; color:var(--primary); margin-bottom:6px; display:block; }

.input-box { position:relative; }

.input-box i.left-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--primary); font-size:15px; }



.toggle-pass { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#999; cursor:pointer; font-size:14px; z-index: 10; }



input { 

    width:100%; height:50px; padding:0 42px; border:1.5px solid var(--border); border-radius:10px; font-size:14px; 

    box-sizing:border-box; outline:none; background:var(--input-bg); transition: 0.3s;

}

input:focus { border-color: var(--primary); }



.btn { width:100%; height:52px; background:var(--primary); color:#fff; border:none; border-radius:10px; font-weight:700; cursor:pointer; margin-top:10px; font-size:15px; }



.footer-links { text-align:center; margin-top:20px; font-size:13px; color:#666; line-height: 1.6; }

.footer-links a { color:var(--primary); text-decoration:none; font-weight:700; }



.forgot-link { text-align: right; margin-top: -10px; margin-bottom: 15px; }

.forgot-link a { font-size: 11px; color: var(--primary); text-decoration: none; font-weight: 700; }