* { box-sizing: border-box; }
body {
 margin: 0;
 font-family: Arial, sans-serif;
 background: #f4f7fb;
 color: #1f2937;
}
nav {
 background: #111827;
 padding: 14px 24px;
 display: flex;
 gap: 16px;
}
nav a {
 color: #fff;
 text-decoration: none;
 font-weight: 600;
}
.container {
 max-width: 900px;
 margin: 40px auto;
 padding: 24px;
}
.card {
 background: #fff;
 border-radius: 14px;
 padding: 24px;
 box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.center {
 min-height: calc(100vh - 60px);
 display: grid;
 place-items: center;
 padding: 24px;
}
.form-box {
 width: 100%;
 max-width: 420px;
}
input, button {
 width: 100%;
 padding: 12px 14px;
 margin-top: 10px;
 border: 1px solid #d1d5db;
 border-radius: 10px;
}
button {
 background: #2563eb;
 color: white;
 border: 0;
 cursor: pointer;
}
button:hover { background: #1d4ed8; }
.msg { margin-top: 12px; color: #dc2626; }
.ok { color: #059669; }
.grid {
 display: grid;
 gap: 16px;
}
.badge {
 display: inline-block;
 padding: 6px 10px;
 border-radius: 999px;
 background: #e5e7eb;
}