* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #222; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }
header { background: #1e293b; }
header .wrap { display: flex; justify-content: space-between; align-items: center; height: 60px; }
.logo { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.2rem; }
nav a { color: #cbd5e1; text-decoration: none; margin-left: 16px; }
nav a.active, nav a:hover { color: #fff; }
main { flex: 1; padding-top: 32px; padding-bottom: 32px; width: 100%; }
.hero { text-align: center; padding: 48px 0; }
.btn { display: inline-block; background: #2563eb; color: #fff; padding: 10px 20px; border: 0; border-radius: 6px; text-decoration: none; cursor: pointer; font-size: 1rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; }
form { display: grid; gap: 12px; max-width: 420px; }
label { display: grid; gap: 4px; }
input, textarea { padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }
.notice { background: #dcfce7; padding: 10px; border-radius: 6px; }
footer { background: #f1f5f9; padding: 16px 0; text-align: center; color: #64748b; font-size: 0.9rem; }