:root{--accent:#4a90e2;--bg:#f7f7f7;--card:#fff}
body{font-family:Inter,Arial,sans-serif;background:var(--bg);margin:0;display:flex;align-items:center;justify-content:center;height:100vh}
.card{background:var(--card);padding:28px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.08);width:420px;max-width:96%}
h1{margin:0 0 6px;font-size:20px}
p.lead{margin:0 0 18px;color:#666}
.field{margin-bottom:12px;margin-right: 22px}
label{display:block;font-size:13px;margin-bottom:6px;color:#333}
input[type=text],input[type=password],input[type=email]{width:100%;padding:10px;border:1px solid #e6e6e6;border-radius:8px;font-size:15px;background:#fff;color:#000}
button{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:8px;font-weight:600;cursor:pointer;width:100%}
.muted{font-size:13px;color:#888;margin-top:10px;text-align:center}
.field .help{font-size:12px;color:#888;margin-top:6px}
.messages{margin-bottom:10px}
.msg{padding:8px;border-radius:6px;margin-bottom:8px}
.msg.success{background:#e6f4ff;color:#072b4f}
.msg.error{background:#ffe6e6;color:#4f0b0b}
.theme-btn{position:fixed;top:10px;right:20px;padding:6px 10px;background:var(--accent);color:#fff;border-radius:6px;text-decoration:none;cursor:pointer;z-index:1000}
@media (max-width:420px){.card{padding:18px}}

body.dark { background:#121212; color:#eee }
body.dark .card { background:#1e1e1e; color:#eee; box-shadow: 0 4px 12px rgba(0,0,0,0.6) }
body.dark input[type=text], body.dark input[type=password], body.dark input[type=email] { background:#2a2a2a; color:#eee; border:1px solid #333 }
body.dark label { color:#ddd }
body.dark .muted { color:#bbb }
body.dark .msg.success { background:#0b314b; color:#bfe6ff }
body.dark .msg.error { background:#4f0b0b; color:#ffd6d6 }
body.dark .linkish { color: #81c7ff }
body.dark button { background:#2a6cb0 }