* { box-sizing: border-box; }
:root { color-scheme: light; font-family: system-ui, sans-serif; color: #1f2937; background: #f3f4f6; }
body { margin: 0; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 5vw; background: #172554; color: #fff; }
header h1 { margin: 0; font-size: 1.35rem; }
header form { margin: 0; }
main { width: min(1200px, 90vw); margin: 2rem auto 4rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1.25rem; align-items: start; }
.panel { background: #fff; border-radius: .75rem; box-shadow: 0 2px 12px #0f172a18; padding: 1.25rem; }
.panel h2 { margin-top: 0; color: #172554; }
label { display: block; font-weight: 650; margin: .8rem 0 .3rem; }
input, button { font: inherit; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number] { width: 100%; padding: .65rem .7rem; border: 1px solid #cbd5e1; border-radius: .4rem; }
button, .button { border: 0; border-radius: .4rem; padding: .65rem 1rem; background: #1d4ed8; color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
button.secondary, .button.secondary { background: #475569; }
button.danger { background: #b91c1c; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.notice { padding: .8rem 1rem; border-radius: .4rem; margin-bottom: 1rem; background: #dcfce7; color: #166534; }
.error { background: #fee2e2; color: #991b1b; }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: #fff; }
th, td { padding: .7rem; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
th { background: #e0e7ff; color: #172554; }
.table-wrap { overflow-x: auto; }
.author-row { display: grid; grid-template-columns: 1fr 9rem auto; gap: .5rem; align-items: end; margin: .5rem 0; }
.autocomplete { position: relative; }
.suggestions { position: absolute; z-index: 2; left: 0; right: 0; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #cbd5e1; box-shadow: 0 4px 10px #0f172a22; }
.suggestions button { display: block; width: 100%; border-radius: 0; background: #fff; color: #1f2937; text-align: left; }
.suggestions button:hover { background: #e0e7ff; }
.login-panel { max-width: 420px; margin: 8rem auto; }
.inline-form { display: inline; }
nav { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
nav a { color: #fff; }
.billing-table input[type=number] { min-width: 7rem; }
.muted { color: #64748b; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .author-row { grid-template-columns: 1fr; } header { align-items: flex-start; flex-direction: column; } }