:root { color-scheme: light; font-family: system-ui, sans-serif; color: var(--navy-800); background: var(--navy-50); }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
a { color: #174d91; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.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; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--navy-200); }
.site-header-inner, .page-shell { width: min(100%, 72rem); margin-inline: auto; padding-inline: 1rem; }
.site-header-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding-block: .75rem; }
.brand { color: var(--navy-800); font-weight: 750; text-decoration: none; font-size: 1.15rem; }
.header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.header-actions form { margin: 0; }
.header-actions select { min-height: 44px; border: 1px solid var(--navy-200); border-radius: .5rem; background: var(--surface); padding-inline: .5rem; }
.signed-in { display: none; color: #526173; font-size: .875rem; }
.text-button { min-height: 44px; padding: .5rem; border: 0; background: transparent; color: #174d91; cursor: pointer; }
.page-shell { padding-block: 1.25rem 3rem; }
.page-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
h1, h2 { line-height: 1.2; }
h1 { margin: .35rem 0; font-size: clamp(1.6rem, 5vw, 2.15rem); }
h2 { margin: 0 0 1rem; font-size: 1.2rem; }
p { line-height: 1.55; }
.muted { color: #526173; }
.back-link { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.content-card { padding: 1.25rem; background: var(--surface); border: 1px solid var(--navy-200); border-radius: var(--radius-md); }
.content-card + .content-card { margin-top: 1rem; }
.form-card { max-width: 44rem; }
.auth-card { max-width: 28rem; margin: 2rem auto; }
.detail-grid { display: grid; gap: 1rem; }
.form-stack { display: grid; gap: 1.15rem; margin-top: 1.25rem; }
.field { display: grid; gap: .4rem; min-width: 0; }
.field label, legend { font-weight: 650; }
.field input, .field select { width: 100%; min-height: 44px; padding: .6rem .75rem; border: 1px solid #aab8c7; border-radius: .5rem; background: white; }
.field small, .form-stack small { color: #526173; line-height: 1.4; }
.field input[readonly] { background: var(--navy-50); }
.choice-fieldset { border: 0; padding: 0; }
.choice-fieldset label { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 400; }
.choice-fieldset input { width: 1.15rem; height: 1.15rem; }
.mode-panel[hidden] { display: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: .65rem 1rem; border: 1px solid transparent; border-radius: .5rem; font-weight: 650; text-decoration: none; cursor: pointer; }
.button-primary { color: #fff; background: #1d4ed8; }
.button-primary:hover { background: #1e40af; }
.button-secondary { color: var(--navy-800); background: #fff; border-color: #9caec0; }
.notice { margin: 1rem 0; padding: .85rem 1rem; border-radius: .5rem; line-height: 1.45; overflow-wrap: anywhere; }
.notice-success { color: #14532d; background: #f0fdf4; border: 1px solid #bbf7d0; }
.notice-error, .validation-summary:not(:empty) { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
.notice-info { color: #1e3a8a; background: #eff6ff; border: 1px solid #bfdbfe; }
.validation-summary:empty, .validation-summary[hidden] { display: none; }
.validation-summary:not(:empty) { padding: .75rem 1rem; border-radius: .5rem; }
.validation-summary ul { margin: 0; padding-left: 1.25rem; }
.status-badge { display: inline-flex; padding: .3rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 650; white-space: nowrap; }
.status-badge.active { color: #166534; background: #dcfce7; }
.status-badge.inactive { color: #854d0e; background: #fef9c3; }
.table-card { padding: 0; overflow: hidden; }
.desktop-table { display: none; width: 100%; border-collapse: collapse; }
.desktop-table th, .desktop-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--navy-200); text-align: left; }
.desktop-table th { color: #526173; font-size: .82rem; }
.desktop-table tr:last-child td { border-bottom: 0; }
.desktop-table a { color: var(--navy-800); font-weight: 650; text-decoration: none; }
.mobile-list { display: grid; }
.mobile-record { display: flex; min-height: 72px; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--navy-200); color: var(--navy-800); text-decoration: none; }
.mobile-record:last-child { border-bottom: 0; }
.mobile-record:hover, .mobile-record:focus-visible { background: var(--navy-50); }
.record-main { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.record-main strong, .record-main span { overflow-wrap: anywhere; }
.empty-state { color: #526173; }
.details-list { display: grid; gap: .9rem; margin: 0 0 1.25rem; }
.details-list div { display: grid; gap: .2rem; }
.details-list dt { color: #526173; font-size: .85rem; }
.details-list dd { margin: 0; overflow-wrap: anywhere; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.summary-card { display: grid; gap: .2rem; padding: 1rem; }
.summary-card strong { font-size: 1.5rem; }
.summary-card span { color: #526173; font-size: .85rem; }
.filter-bar { display: grid; gap: .75rem; margin-bottom: 1rem; }
.filter-bar .button { align-self: end; }
.database-grid { display: grid; gap: 1rem; }
.database-subscribers { list-style: none; padding: 0; margin: 1rem 0; }
.database-subscribers li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--navy-200); }
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-list li { display: grid; gap: .2rem; padding: .8rem 0; border-top: 1px solid var(--navy-200); }
.activity-list time { color: #526173; font-size: .85rem; }
.members-card { margin-top: 1rem; }
.member-list { list-style: none; padding: 0; margin: 0; }
.member-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: .85rem 0; border-top: 1px solid var(--navy-200); }
.member-identity { display: grid; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
.member-identity span, .member-profile { color: #526173; font-size: .875rem; }
.member-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (min-width: 48rem) {
    .site-header-inner, .page-shell { padding-inline: 2rem; }
    .page-shell { padding-block: 2.5rem; }
    .content-card { padding: 2rem; }
    .signed-in { display: inline; }
    .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-bar { grid-template-columns: minmax(10rem, 2fr) repeat(2, minmax(8rem, 1fr)) auto auto; align-items: end; }
    .database-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-grid-single { grid-template-columns: minmax(0, 1fr); }
    .desktop-table { display: table; }
    .mobile-list { display: none; }
}
