:root {
    /* Always-dark header chrome (same in both themes) */
    --header-bg: #171C28;
    --header-text: #FFFFFF;
    --header-muted: #8B93A7;
    --header-chip-bg: #232939;
    --header-chip-border: #343B4E;
    /* Brand + status */
    --brand-accent: #4F7DF9;
    --escalation-red: #B01E1E;
    --success-green: #1E7A38;
    /* Surfaces + text (light theme) */
    --page-bg: #F4F5F7;
    --surface: #FFFFFF;
    --surface-alt: #F4F5F7;
    --surface-hover: #F9FAFB;
    --text: #171C28;
    --text-secondary: #444444;
    --text-muted: #8B93A7;
    --border: #E5E7EB;
    --border-input: #CCCCCC;
    /* Feedback surfaces */
    --error-bg: #FDEDED;
    --error-border: #F5C6C6;
    --notice-bg: #E5F3EA;
    --notice-border: #BFE3CC;
    /* Badges / severities */
    --badge-active-bg: #E5F3EA;   --badge-active-text: #1E7A38;
    --badge-inactive-bg: #F0F1F4; --badge-inactive-text: #8B93A7;
    --badge-accent-bg: #E9EEFD;   --badge-accent-text: #4F7DF9;
    --sev-monitor-bg: #FDF3E1;    --sev-monitor-text: #9A6B0B;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-strong: rgba(0, 0, 0, 0.15);
  }
  /* Dark palette — applied when the OS prefers dark and the user hasn't forced
     light, OR when the user explicitly chose dark. The two selectors carry the
     same overrides. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --brand-accent: #6B93FF;
      --escalation-red: #F08B8B;
      --success-green: #6FCF97;
      --page-bg: #0E121B;
      --surface: #1B2130;
      --surface-alt: #232A3A;
      --surface-hover: #232A3A;
      --text: #E6E9F0;
      --text-secondary: #B7BECC;
      --text-muted: #8B93A7;
      --border: #2C3444;
      --border-input: #3A4356;
      --error-bg: #3A1E1E;   --error-border: #5A2C2C;
      --notice-bg: #17331F;  --notice-border: #2C5A3A;
      --badge-active-bg: #17331F;   --badge-active-text: #6FCF97;
      --badge-inactive-bg: #232A3A; --badge-inactive-text: #8B93A7;
      --badge-accent-bg: #1E2A4A;   --badge-accent-text: #8FB0FF;
      --sev-monitor-bg: #3A2E14;    --sev-monitor-text: #E0B25A;
      --shadow: rgba(0, 0, 0, 0.4);
      --shadow-strong: rgba(0, 0, 0, 0.5);
    }
  }
  :root[data-theme="dark"] {
    --brand-accent: #6B93FF;
    --escalation-red: #F08B8B;
    --success-green: #6FCF97;
    --page-bg: #0E121B;
    --surface: #1B2130;
    --surface-alt: #232A3A;
    --surface-hover: #232A3A;
    --text: #E6E9F0;
    --text-secondary: #B7BECC;
    --text-muted: #8B93A7;
    --border: #2C3444;
    --border-input: #3A4356;
    --error-bg: #3A1E1E;   --error-border: #5A2C2C;
    --notice-bg: #17331F;  --notice-border: #2C5A3A;
    --badge-active-bg: #17331F;   --badge-active-text: #6FCF97;
    --badge-inactive-bg: #232A3A; --badge-inactive-text: #8B93A7;
    --badge-accent-bg: #1E2A4A;   --badge-accent-text: #8FB0FF;
    --sev-monitor-bg: #3A2E14;    --sev-monitor-text: #E0B25A;
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-strong: rgba(0, 0, 0, 0.5);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--page-bg);
    color: var(--text);
  }
  header.brand-header {
    background: var(--header-bg);
    color: var(--header-text);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  header.brand-header .shield {
    color: var(--brand-accent);
    font-size: 20px;
    line-height: 1;
  }
  header.brand-header .wordmark {
    font-weight: 700;
    font-size: 18px;
  }
  header.brand-header .wordmark .sentinel {
    color: var(--brand-accent);
  }
  .header-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .theme-toggle {
    background: transparent;
    border: 1px solid var(--header-chip-border);
    color: var(--header-text);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }
  .theme-toggle:hover { background: rgba(255, 255, 255, 0.08); opacity: 1; }
  main {
    max-width: 420px;
    margin: 64px auto;
    background: var(--surface);
    border-radius: 10px;
    padding: 32px;
    box-shadow: 0 1px 3px var(--shadow);
  }
  main.wide {
    max-width: 960px;
  }
  h1 {
    font-size: 20px;
    margin: 0 0 20px;
  }
  label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-secondary);
  }
  input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
    background: var(--surface);
    color: var(--text);
  }
  button {
    background: var(--brand-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  button:hover { opacity: 0.92; }
  /* Links render identically whether or not they've been visited — a clicked
     link must not linger in the browser-default purple "visited" colour, which
     reads as a stuck "selected" state when you return to a page. */
  a:link, a:visited { color: var(--brand-accent); }
  /* Anchors styled as buttons keep their button colour in BOTH states. The
     :visited variants are needed because a:visited (0,1,1) would otherwise
     out-specify the plain .btn-* class (0,1,0) and repaint them brand-blue. */
  a.btn-secondary:link, a.btn-secondary:visited { color: var(--text); }
  a.btn-danger:link, a.btn-danger:visited { color: var(--escalation-red); }
  .error {
    background: var(--error-bg);
    color: var(--escalation-red);
    border: 1px solid var(--error-border);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
  }
  .muted { color: var(--text-muted); font-size: 13px; }
  code.recovery-code {
    display: inline-block;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    margin: 3px;
    font-size: 14px;
  }
  /* Primary admin nav — a tab bar with an active-page indicator. */
  nav.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    font-size: 13px;
  }
  nav.admin-nav a {
    padding: 8px 14px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
  }
  nav.admin-nav a:hover { color: var(--text); background: var(--surface-hover); }
  nav.admin-nav a.active {
    color: var(--brand-accent);
    border-bottom-color: var(--brand-accent);
  }
  /* Secondary district-context tabs (Overview / Sources / Matches / Reports). */
  nav.district-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -8px 0 20px;
  }
  nav.district-subnav a {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--surface-alt);
    text-decoration: none;
    font-weight: 500;
  }
  nav.district-subnav a:hover { color: var(--text); }
  nav.district-subnav a.active {
    color: var(--badge-accent-text);
    background: var(--badge-accent-bg);
  }
  table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 24px;
  }
  table.data-table th, table.data-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
  }
  table.data-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  table.data-table tbody tr:hover { background: var(--surface-hover); }
  table.data-table tr.inactive { opacity: 0.55; }
  .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
  }
  .badge.active { background: var(--badge-active-bg); color: var(--badge-active-text); }
  .badge.inactive { background: var(--badge-inactive-bg); color: var(--badge-inactive-text); }
  .badge.subscribed { background: var(--badge-accent-bg); color: var(--badge-accent-text); }
  select, input[type="date"], textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
  }
  fieldset {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 24px;
  }
  fieldset legend {
    font-weight: 600;
    font-size: 14px;
    padding: 0 6px;
  }
  .inline-form {
    display: inline;
  }
  .btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-input);
  }
  .btn-danger {
    background: var(--surface);
    color: var(--escalation-red);
    border: 1px solid var(--error-border);
  }
  /* Monitored-people row actions: links at rest, with a collapsible
     "Deactivate…" that reveals the required end-date field only when opened. */
  .row-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
  }
  .row-actions a { font-size: 13px; }
  details.deactivate summary {
    cursor: pointer;
    color: var(--escalation-red);
    font-size: 13px;
    list-style: none;
  }
  details.deactivate summary::-webkit-details-marker { display: none; }
  details.deactivate .deactivate-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 8px;
  }
  details.deactivate .deactivate-form label { margin: 0; font-weight: 400; }
  details.deactivate .deactivate-form input[type="date"] {
    width: auto;
    margin: 4px 0 0;
    padding: 4px 6px;
  }
  details.deactivate .deactivate-form button { padding: 5px 12px; }
  .row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
  }
  .row > * { flex: 1; }
  nav.pagination {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    margin-top: 8px;
  }
  nav.pagination a {
    color: var(--brand-accent);
    text-decoration: none;
    font-weight: 600;
  }
  nav.pagination a:hover { text-decoration: underline; }
  /* §9.1 header right side: district selector, current date, username menu */
  .header-right {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: var(--header-muted);
  }
  .header-right select {
    width: auto;
    margin: 0;
    padding: 5px 8px;
    font-size: 13px;
    background: var(--header-chip-bg);
    color: var(--header-text);
    border: 1px solid var(--header-chip-border);
  }
  details.user-menu { position: relative; }
  details.user-menu summary {
    cursor: pointer;
    list-style: none;
    color: var(--header-text);
    font-weight: 600;
  }
  details.user-menu summary::-webkit-details-marker { display: none; }
  details.user-menu[open] .menu-items {
    position: absolute;
    right: 0;
    top: 26px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-strong);
    padding: 8px 0;
    min-width: 180px;
    z-index: 10;
  }
  .menu-items a, .menu-items button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    padding: 8px 14px;
    text-decoration: none;
    cursor: pointer;
  }
  .menu-items a:hover, .menu-items button:hover { background: var(--surface-alt); opacity: 1; }
  /* Portal dashboard widgets */
  .stat-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
  .stat-card {
    flex: 1;
    min-width: 130px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
  }
  .stat-card .stat-value { font-size: 22px; font-weight: 700; }
  .stat-card .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    font-weight: 600;
  }
  .stat-card .stat-value.escalated { color: var(--escalation-red); }
  .trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 64px;
    margin: 8px 0 4px;
  }
  .trend-bars .bar {
    flex: 1;
    min-height: 2px;
    background: var(--brand-accent);
    border-radius: 2px 2px 0 0;
  }
  .trend-bars .bar.empty { background: var(--border); }
  .badge.sev-informational { background: var(--badge-accent-bg); color: var(--badge-accent-text); }
  .badge.sev-monitor { background: var(--sev-monitor-bg); color: var(--sev-monitor-text); }
  .badge.sev-escalated { background: var(--error-bg); color: var(--escalation-red); }
  form.filters {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  form.filters > div { flex: 1; min-width: 120px; }
  form.filters input, form.filters select { margin-bottom: 0; }
  .notice {
    background: var(--notice-bg);
    color: var(--success-green);
    border: 1px solid var(--notice-border);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
  }
  .btn-success {
    background: var(--success-green);
    color: #fff;
    border: none;
  }
  /* Admin home launchpad */
  .dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
  }
  .dashboard-head .greeting {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .dashboard-head .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--badge-accent-bg);
    color: var(--badge-accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
  }
  .dashboard-head .greeting h1 { font-size: 18px; margin: 0; }
  .dashboard-head .greeting .role {
    font-size: 12px;
    color: var(--text-muted);
  }
  .dashboard-head .greeting .role .badge { margin-left: 4px; }
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }
  a.nav-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    text-decoration: none;
    transition: border-color 0.12s, box-shadow 0.12s;
  }
  a.nav-card:link, a.nav-card:visited { color: var(--text); }
  a.nav-card:hover {
    border-color: var(--brand-accent);
    box-shadow: 0 1px 4px var(--shadow-strong);
  }
  .nav-card .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .nav-card .card-title .ic { font-size: 18px; line-height: 1; }
  .nav-card p { margin: 0; font-size: 13px; color: var(--text-muted); }