:root { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #183746; background: #f2f5f7; line-height: 1.5; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #087b73; text-underline-offset: .18em; }
a:hover { color: #075e58; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #b17612; outline-offset: 3px; }
.container { width: min(100% - 2rem, 1120px); margin-inline: auto; }
.site-header { background: #102d3c; color: #fff; }
.header-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2.5rem; padding-block: 1rem; }
.brand { color: #fff; font-size: 1.35rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.brand:hover, .site-header a:hover { color: #d2f2eb; }
.main-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.site-header a, .site-header button { color: #dce9ed; }
.main-nav a { padding: .4rem .2rem; text-decoration: none; }
.main-nav a[aria-current] { color: #fff; border-bottom: 2px solid #70d9c9; }
.account { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-left: auto; }
.account form { margin: 0; }
.link-button { border: 0; padding: .2rem 0; background: transparent; color: #087b73; text-decoration: underline; text-underline-offset: .18em; }
.link-button:hover { color: #075e58; }
.danger { color: #ad3333; margin-top: 1rem; }
.skip-link { position: absolute; top: -5rem; left: 1rem; padding: .5rem 1rem; z-index: 10; background: #fff; }
.skip-link:focus { top: .5rem; }
.main-content { padding-block: 2rem 4rem; }
h1, h2 { line-height: 1.2; margin-top: 0; }
h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin-bottom: .4rem; }
h2 { font-size: 1.3rem; margin-bottom: 1rem; }
p { margin-top: 0; }
.muted, .hint { color: #526978; }
.hint { font-size: .88rem; margin: .35rem 0 0; }
.back-link { display: inline-block; margin-bottom: 1rem; }
.page-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.card { background: #fff; border-radius: .8rem; padding: clamp(1.1rem, 3vw, 1.6rem); margin-bottom: 1.2rem; box-shadow: 0 1px 2px #102d3c0a; }
.narrow-card { max-width: 640px; }
.auth-card { max-width: 440px; margin: 3rem auto; }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; margin-bottom: 1rem; }
.field label, label { font-weight: 550; }
input:not([type="checkbox"]):not([type="hidden"]), select, textarea { width: 100%; min-height: 2.8rem; padding: .55rem .75rem; border: 1px solid #bdcfd5; border-radius: .4rem; color: #183746; background: #fff; }
textarea { resize: vertical; }
select[multiple] { min-height: 11rem; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #b33434; }
.field-error { color: #a02c2c; font-size: .9rem; }
.check { display: flex; align-items: center; gap: .55rem; margin: .7rem 0 1.2rem; }
.check input { width: 1.15rem; height: 1.15rem; accent-color: #087b73; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.span-all { grid-column: 1 / -1; }
.button { display: inline-block; border: 1px solid #0c756d; border-radius: .4rem; padding: .6rem 1rem; background: #0c756d; color: #fff; text-align: center; text-decoration: none; font-weight: 650; }
.button:hover { background: #075e58; color: #fff; }
.button-secondary { background: #e3f2ee; color: #086c65; border-color: #c3e2db; }
.button-secondary:hover { color: #064e49; background: #cde7e0; }
.full-width { display: block; margin-block: .5rem; }
.form-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; gap: 1.25rem; }
.contact-slot { border: 1px solid #dae4e8; border-radius: .5rem; padding: .8rem 1rem 0; margin: 0 0 1rem; min-width: 0; }
.contact-slot legend { font-weight: 700; padding: 0 .3rem; }
.search-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; }
.search-bar .field { flex: 1 1 18rem; margin: 0; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; text-align: left; }
th, td { padding: .8rem .6rem; border-bottom: 1px solid #e0e8eb; vertical-align: top; overflow-wrap: anywhere; }
th { font-weight: 650; }
.pagination { margin-top: 1.3rem; }
.page-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem 1rem; }
.page-summary { margin: 0; color: #526978; font-size: .9rem; }
.page-list { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.page-link { display: inline-flex; justify-content: center; align-items: center; min-width: 2.5rem; min-height: 2.5rem; padding: .2rem .55rem; border: 1px solid #c3d5d9; border-radius: .4rem; background: #fff; color: #087b73; font-size: 1rem; line-height: 1; text-decoration: none; }
a.page-link:hover { background: #e3f2ee; color: #075e58; }
.page-arrow { font-size: 1.45rem; line-height: 1; }
.page-current { background: #0c756d; border-color: #0c756d; color: #fff; font-weight: 700; }
.page-disabled { color: #81949e; background: #f2f5f7; }
.page-ellipsis { border-color: transparent; background: transparent; color: #526978; }
.notice { border-radius: .6rem; padding: 1rem 1.25rem; margin-bottom: 1.2rem; border: 1px solid transparent; }
.notice ul { margin-bottom: 0; }
.notice-success { color: #125c53; background: #e4f2ed; border-color: #c7e8dc; }
.notice-error { color: #842525; background: #fff0ef; border-color: #eac4bf; }
.preview { margin-block: 1.2rem; }
.preview h2 { margin-bottom: .5rem; }
.counts { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.counts strong { font-size: 1.4rem; }
.export-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.25rem; }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.inline-form .field { flex: 1 1 16rem; margin-bottom: 0; }
.field-bottom { justify-content: end; }
.audit-event h2 { overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .header-inner { gap: .6rem 1rem; }
    .account { margin-left: 0; width: 100%; justify-content: space-between; }
    .main-nav { order: 2; width: 100%; }
    .account { order: 3; }
    .form-layout, .export-grid { grid-template-columns: minmax(0, 1fr); }
    .main-content { padding-block: 1.5rem 3rem; }
}
@media (max-width: 520px) {
    .field-grid { grid-template-columns: minmax(0, 1fr); }
    .span-all { grid-column: auto; }
    .page-heading .button, .search-bar .button { width: 100%; }
    .card { padding: 1rem; }
}