body { margin: 0; background: #f5f6f8; color: #202938; font: 16px/1.6 system-ui, sans-serif; }
nav { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1rem max(1rem, calc((100% - 800px) / 2)); background: #fff; border-bottom: 1px solid #dde1e8; }
nav .brand { font-size: 1.3rem; font-weight: 750; margin-right: auto; text-decoration: none; }
main { max-width: 740px; margin: 2rem auto; padding: 1.8rem; background: #fff; border: 1px solid #dde1e8; border-radius: 12px; }
a { color: #2549a5; }
h1 { margin-top: 0; line-height: 1.25; }
h2 { font-size: 1rem; }
.field { margin: 1rem 0; }
label, small { display: block; }
label { font-weight: 600; }
small { color: #526075; }
input:not([type=submit]) { box-sizing: border-box; width: 100%; max-width: 440px; padding: .65rem; border: 1px solid #8692a4; border-radius: 5px; font: inherit; }
button, input[type=submit] { padding: .65rem 1rem; border: 0; border-radius: 5px; background: #2549a5; color: #fff; font: inherit; cursor: pointer; }
.danger { background: #a22232; }
.flash { padding: .8rem 1rem; margin-bottom: 1rem; border-radius: 5px; }
.notice { background: #e6f4ed; }
.alert { background: #ffe9e9; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .75rem; border-bottom: 1px solid #dde1e8; }
@media (max-width: 800px) { main { margin: 1rem; padding: 1rem; } }