:root{
  --primary:#0288d1;
  --danger:#ff6584;
  --bg:#f5f7fa;
  --card:#ffffff;
  --text:#333;
  --radius:12px;
  --transition:.3s ease;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
body{background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:0 10px 25px rgba(0,0,0,.08);width:100%;max-width:400px;padding:40px}
h2{margin-bottom:25px;text-align:center;color:var(--text)}
.form-group{margin-bottom:20px;position:relative}
label{display:block;margin-bottom:6px;font-size:14px;color:var(--text)}
input[type=email],
input[type=text],
input[type=password]{
  width:100%;padding:12px 40px 12px 15px;border:1px solid #ddd;border-radius:var(--radius);transition:var(--transition)
}
input:focus{border-color:var(--primary);outline:none}
.toggle-password{
  position:absolute;right:15px;top:38px;cursor:pointer;user-select:none;font-size:18px;color:#888
}
.btn{
  width:100%;padding:12px;border:none;border-radius:var(--radius);background:var(--primary);color:#fff;font-size:16px;cursor:pointer;transition:var(--transition)
}
.btn:hover{background:#03a5fc}
.link{text-align:center;margin-top:15px;font-size:14px}
.link a{color:var(--primary);text-decoration:none}
.alert{padding:12px;border-radius:var(--radius);margin-bottom:20px;font-size:14px}
.alert.success{background:#d4edda;color:#155724}
.alert.error{background:#f8d7da;color:#721c24}
@media(max-width:480px){.card{padding:30px 20px}}