body { margin: 0; font-family: system-ui, sans-serif; background: #f4f6f8; color: #16202a; }
.shell { min-height: 100vh; padding: 32px; box-sizing: border-box; }
.shell--center { display: grid; place-items: center; }
.card { width: min(420px, 100%); background: #fff; padding: 28px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.form { display: grid; gap: 12px; }
input, button { padding: 12px 14px; border-radius: 10px; border: 1px solid #cfd7df; font: inherit; }
button { background: #16202a; color: #fff; cursor: pointer; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.tile { display: grid; gap: 8px; padding: 20px; background: #fff; border-radius: 14px; text-decoration: none; color: inherit; box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.message { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; }
.message--error { background: #fbe9e7; color: #8a1f11; }