:root { font-family: system-ui, sans-serif; color: #222; background: #f6f6f6; line-height: 1.5; }
body { max-width: 1100px; margin: auto; padding: 18px; }
h1, h2, h3 { line-height: 1.2; }
h1 { margin-bottom: 0; }
header p, footer, .muted { color: #555; }
section, article, .panel { background: white; border: 1px solid #bbb; border-radius: 5px; padding: 16px; margin: 12px 0; }
article { padding: 12px; margin: 0; min-width: 0; }
article h3 { margin-top: 0; }
button, select, input { font: inherit; padding: 9px 12px; border: 1px solid #777; border-radius: 4px; background: #fff; color: #222; }
button { cursor: pointer; text-align: left; }
button:hover:not(:disabled) { background: #e9edf2; }
button:disabled { cursor: wait; opacity: .5; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #1f61ae; outline-offset: 2px; }
.primary { background: #24466b; color: white; border-color: #24466b; }
.primary:hover:not(:disabled) { background: #17314e; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.status { font-weight: 650; }
.form-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
label { display: flex; flex-direction: column; gap: 7px; }
summary { cursor: pointer; padding: 6px 0; }
#error { padding: 12px; border: 1px solid #a12121; background: #fff2f2; color: #771919; }
.handoff { text-align: center; padding: 48px 20px; }
.handoff button { margin-top: 16px; }
footer { font-size: .85rem; margin-top: 24px; }
li { margin-bottom: 5px; }