:root {
      --bg: #0b1020; --panel:#111833; --muted:#8ea0c0; --text:#e8eeff; --accent:#5b8cff; --danger:#ff5d6c;
      --radius: 14px;
    }
    *{box-sizing:border-box}
    body{margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--text); font:14px/1.4 system-ui,Segoe UI,Roboto,Inter,Arial}
    .card{width:100%; max-width:420px; background:var(--panel); border:1px solid #1b2442; border-radius:var(--radius); padding:28px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
    .logo{display:block; margin:0 auto 10px; width:250px; height:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
    h1{margin:6px 0 20px; font-size:20px; text-align:center; font-weight:650}
    form{display:grid; gap:12px}
    label{font-size:12px; color:var(--muted)}
    input{width:100%; padding:12px 12px; border-radius:10px; border:1px solid #253056; background:#0e1430; color:var(--text); outline:none}
    input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,140,255,.18)}
    .row{display:grid; gap:6px}
    .btn{margin-top:6px; width:100%; padding:12px 14px; border:0; border-radius:10px; background:var(--accent); color:white; font-weight:650; cursor:pointer}
    .btn:disabled{opacity:.6; cursor:default}
    .error{display:none; margin:6px 0 0; padding:10px 12px; border-radius:10px; background:rgba(255,93,108,.1); color:#ffd7db; border:1px solid rgba(255,93,108,.35)}
    .hint{margin-top:10px; text-align:center; color:var(--muted); font-size:12px}
    .foot{margin-top:14px; display:flex; justify-content:center; gap:12px; font-size:12px; color:var(--muted)}
    a{color:#b8c8ff; text-decoration:none}
    a:hover{text-decoration:underline}