/* Shared visual system for every authenticated screen. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
button:disabled { opacity: .5; cursor: not-allowed; }
body[data-page] {
  --bg: #f4f7fb; --surface: #fff; --surface-strong: #edf3fc; --primary: #2563eb; --primary-dark: #1d4ed8;
  --accent: #2563eb; --accent-strong: #375a7f; --text: #172b4d; --muted: #5c6f84; --border: #dce5ef;
  --danger: #b42318; --success: #087f5b; --radius: 12px; --shadow: 0 2px 6px rgba(16,42,67,.035);
  margin: 0; padding: 0; min-width: 0; color: var(--text); background: var(--bg);
  font: 400 14px/1.55 "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; -webkit-font-smoothing: antialiased;
}
body[data-page] button, body[data-page] input, body[data-page] select, body[data-page] textarea { font: inherit; }
body[data-page] h1, body[data-page] h2, body[data-page] h3, body[data-page] h4 { color: inherit; line-height: 1.25; font-weight: 650; letter-spacing: -.025em; }
body[data-page] h2 { margin: 5px 0 0; font-size: clamp(1.45rem, 2.3vw, 1.95rem); }
body[data-page] h3 { margin: 4px 0 0; font-size: 1.12rem; }
body[data-page] h4 { font-size: 1rem; }
body[data-page] p { overflow-wrap: anywhere; }
body[data-page] .content { min-width: 0; gap: 24px; }
body[data-page] .eyebrow { color: #5c6f84; font-size: .69rem; letter-spacing: .1em; font-weight: 650; }
body[data-page] .card, body[data-page] .stat-card, body[data-page] .empty-state { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); backdrop-filter: none; }
body[data-page] .card { padding: 24px; min-width: 0; }
body[data-page] .section-heading { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
body[data-page] .section-heading h3 { margin-bottom: 0; }
body[data-page] .section-heading p, body[data-page] .manage-copy, body[data-page] .support-action-description { color: var(--muted); }
body[data-page] .btn-primary, body[data-page] .btn-secondary, body[data-page] .pagination-page {
  min-height: 44px; width: auto; padding: 10px 16px; border-radius: 8px; font-size: .88rem; line-height: 1.4; font-weight: 600;
  box-shadow: none; transform: none; transition: background .15s, border-color .15s, box-shadow .15s;
}
body[data-page] .btn-primary { background: #2563eb; border: 1px solid #2563eb; color: #fff; }
body[data-page] .btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; transform: none; }
body[data-page] .btn-secondary, body[data-page] .pagination-page { background: #fff; color: #334e68; border: 1px solid #d4dfeb; }
body[data-page] .btn-secondary:hover, body[data-page] .pagination-page:hover { background: #f0f5fb; border-color: #aabed4; transform: none; }
body[data-page] .btn-secondary.is-active, body[data-page] .module-switcher__button.is-active, body[data-page] .pagination-page.active { background: #edf3ff; color: #1d4ed8; border-color: #a6c4ff; box-shadow: none; }
body[data-page] label { display: block; color: #334e68; font-size: .82rem; font-weight: 600; margin: 0 0 7px; }
body[data-page] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), body[data-page] select, body[data-page] textarea {
  display: block; min-height: 44px; width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #ccd8e5; border-radius: 8px;
  background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(16,42,67,.025); outline-offset: 1px;
}
body[data-page] input::placeholder, body[data-page] textarea::placeholder { color: #8493a5; opacity: 1; }
body[data-page] input:focus, body[data-page] select:focus, body[data-page] textarea:focus { outline: 3px solid #dbeafe; border-color: #2563eb; }
body[data-page] input[readonly], body[data-page] input:disabled, body[data-page] select:disabled { background: #f3f6fa; color: #52677f; }
body[data-page] textarea { resize: vertical; min-height: 116px; line-height: 1.6; }
body[data-page] .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 4px; }
body[data-page] .form-grid > div { min-width: 0; }
body[data-page] .form-grid .full-span { grid-column: 1 / -1; }
body[data-page] .form-divider { margin: 8px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid #e5edf5; border-radius: 0; background: transparent; }
body[data-page] .form-divider h4 { margin: 5px 0 4px; font-size: .95rem; }
body[data-page] .form-divider .eyebrow { color: #375a7f; }
body[data-page] .filters-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); gap: 16px; align-items: end; margin-bottom: 20px; }
body[data-page] .filters-grid .inline-actions { grid-column: 1 / -1; }
body[data-page] .search-bar { margin: 0 0 20px; max-width: 520px; }
body[data-page] .inline-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; }
body[data-page] .form-grid > .inline-actions { margin-top: 4px; padding-top: 20px; border-top: 1px solid #e5edf5; }
body[data-page] .inline-actions .message { flex: 1 1 240px; }
body[data-page] .message { margin: 8px 0 0; min-height: 0; font-size: .84rem; line-height: 1.5; overflow-wrap: anywhere; }
body[data-page] .message:empty { display: none; }
body[data-page] .message.error { color: #b42318; }
body[data-page] .message.success { color: #087f5b; }
.app-error { background: #fff1f1; border: 1px solid #f1b4b4; color: #8c1919; padding: 16px; margin: 12px; border-radius: 8px; }
body[data-page] .table-wrap { width: 100%; min-width: 0; overflow-x: auto; border: 1px solid #e0e8f1; border-radius: 10px; background: #fff; box-shadow: none; backdrop-filter: none; -webkit-overflow-scrolling: touch; }
body[data-page] table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .84rem; }
body[data-page] th, body[data-page] td { padding: 14px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid #e8eef5; line-height: 1.55; }
body[data-page] th { color: #52677f; background: #f5f8fc; font-size: .74rem; font-weight: 650; white-space: nowrap; }
body[data-page] td { color: #52677f; }
body[data-page] td:first-child { color: #172b4d; font-weight: 600; }
body[data-page] tbody tr:last-child td { border-bottom: 0; }
body[data-page] tbody tr:hover { background: #f7faff; }
body[data-page] .clickable-row:focus-visible { outline: 3px solid #2563eb; outline-offset: -3px; }
body[data-page] .clickable-row:hover { background: #f0f6ff; }
body[data-page] .empty-state { padding: 36px 20px; text-align: center; background: #f8fafc; box-shadow: none; color: var(--muted); }
body[data-page] .member-pagination, body[data-page] .pagination-controls { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 16px; color: #5c6f84; font-size: .82rem; }
body[data-page] .pagination-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-page] .member-pagination .inline-actions { margin: 0; }
body[data-page] .module-switcher, body[data-page] .support-tabs, body[data-page] .support-action-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 20px; background: transparent; border: none; box-shadow: none; }
body[data-page] .credentials-grid, body[data-page] .mode-grid, body[data-page] .guide-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); }
body[data-page] .guide-card, body[data-page] .mode-card, body[data-page] .credential-card, body[data-page] .summary-card, body[data-page] .chart-card { padding: 18px; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; box-shadow: none; color: var(--text); min-width: 0; }
body[data-page] .mode-card { text-align: left; transition: border-color .15s, background .15s; }
body[data-page] .mode-card.is-active { background: #eff5ff; border-color: #85adf6; box-shadow: inset 0 0 0 1px #85adf6; }
body[data-page] .mode-card .eyebrow { display: none; }
body[data-page] .mode-card h4, body[data-page] .credential-card h4 { margin: 0 0 8px; font-size: .92rem; }
body[data-page] .mode-card p, body[data-page] .guide-card p { font-size: .8rem; color: #5c6f84; line-height: 1.6; margin: 0; }
body[data-page] .stats-grid, body[data-page] .summary-grid, body[data-page] .chart-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,170px),1fr)); gap: 16px; }
body[data-page] .stat-card { padding: 20px; }
body[data-page] .stat-card::after { display: none; }
body[data-page] .stat-card h3 { margin: 8px 0 4px; font-size: 1.8rem; }
body[data-page] .stat-card p { color: #5c6f84; margin: 0; font-size: .82rem; }
body[data-page] .summary-card span, body[data-page] .chart-card span { font-size: .8rem; color: #5c6f84; }
body[data-page] .summary-card strong { font-size: .92rem; }
body[data-page] .chart-bar { height: 7px; background: #2563eb; box-shadow: none; }
body[data-page] .helper-banner, body[data-page] .support-helper { padding: 14px 16px; background: #edf4ff; color: #375a7f; border: 1px solid #d3e2fc; border-radius: 9px; box-shadow: none; font-size: .84rem; line-height: 1.6; }
body[data-page] .status-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; border-radius: 6px; font-size: .74rem; font-weight: 600; }
body[data-page] .status-open { background: #edf4ff; color: #1d4ed8; }
body[data-page] .status-progress { background: #fff5dd; color: #8c5b0b; }
body[data-page] .status-closed { background: #e6f6ee; color: #087f5b; }
body[data-page] .detail-panel { padding: 24px; width: min(640px,100%); max-width: 100%; height: 100vh; height: 100dvh; background: #fff; box-shadow: -12px 0 40px rgba(16,42,67,.12); overscroll-behavior: contain; z-index: 110; }
.detail-panel[aria-hidden="true"] { visibility: hidden; }
.detail-panel[aria-hidden="false"] { visibility: visible; }
body[data-page] .detail-panel__header { position: sticky; top: -24px; z-index: 2; background: #fff; padding: 16px 0; margin-top: -8px; margin-bottom: 24px; border-bottom: 1px solid #e5edf5; align-items: center; }
body[data-page] .detail-backdrop { z-index: 100; background: rgba(16,42,67,.35); backdrop-filter: blur(2px); }
body[data-page] .cv-card { grid-template-columns: 1fr; gap: 20px; }
body[data-page] .cv-identity, body[data-page] .leader-hero, body[data-page] .detail-card__header { padding: 20px; background: #102a43; border: none; border-radius: 10px; color: #fff; box-shadow: none; }
body[data-page] .cv-identity .eyebrow, body[data-page] .cv-identity p, body[data-page] .cv-identity strong, body[data-page] .leader-hero p, body[data-page] .detail-card__header .eyebrow, body[data-page] .detail-card__header p { color: #d4e3f3; }
body[data-page] .cv-grid, body[data-page] .detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
body[data-page] .cv-field, body[data-page] .detail-field, body[data-page] .stat-tile, body[data-page] .member-card { padding: 14px; border: 1px solid #e0e8f1; border-radius: 8px; background: #f8fafc; box-shadow: none; overflow-wrap: anywhere; }
body[data-page] .cv-field span, body[data-page] .detail-field span { text-transform: none; letter-spacing: 0; font-size: .76rem; color: #5c6f84; }
body[data-page] .response-box, body[data-page] .response-text { padding: 14px; border: 1px solid #dce5ef; border-radius: 8px; background: #f8fafc; }
body[data-page] .detail-action-row { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-page] .leader-chip { font-size: .78rem; }
.redirect-page { display: grid; place-items: center; min-height: 100vh; margin: 0; background: #f4f7fb; color: #172b4d; font-family: "Segoe UI",Arial,sans-serif; }
.redirect-page main { width: min(90%,560px); padding: 32px; background: white; border: 1px solid #dce5ef; border-radius: 12px; box-shadow: 0 2px 6px #102a4308; }
.redirect-page .btn-primary { display: inline-block; padding: 12px 18px; border-radius: 8px; color: white; background: #2563eb; text-decoration: none; }
@media (max-width: 900px) {
  body[data-page] .section-heading { align-items: flex-start; }
  body[data-page] .card { padding: 20px; }
}
@media (max-width: 600px) {
  body[data-page] { font-size: 14px; }
  body[data-page] .card { padding: 18px; border-radius: 10px; }
  body[data-page] .content { gap: 18px; }
  body[data-page] h2 { font-size: 1.4rem; }
  body[data-page] .section-heading { flex-direction: column; gap: 12px; margin-bottom: 18px; }
  body[data-page] .form-grid, body[data-page] .filters-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  body[data-page] input:not([type="hidden"]), body[data-page] select, body[data-page] textarea { font-size: 16px; }
  body[data-page] .inline-actions { align-items: stretch; }
  body[data-page] .inline-actions .btn-primary, body[data-page] .inline-actions .btn-secondary { flex: 1 1 auto; }
  body[data-page] .inline-actions .message { flex-basis: 100%; }
  body[data-page] .cv-grid, body[data-page] .detail-grid { grid-template-columns: minmax(0,1fr); }
  body[data-page] .detail-panel { padding: 20px 16px max(24px,env(safe-area-inset-bottom)); }
  body[data-page] .detail-panel__header { top: -20px; }
  body[data-page] .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  body[data-page] .stat-card { padding: 16px; }
  body[data-page] .stat-card h3 { font-size: 1.6rem; }
  body[data-page] .credentials-grid, body[data-page] .mode-grid, body[data-page] .guide-grid { grid-template-columns: minmax(0,1fr); }
  body[data-page] .table-wrap:has(.mobile-record-table) { overflow: visible; border: 0; background: transparent; }
  body[data-page] table.mobile-record-table { display: block; min-width: 0; width: 100%; }
  body[data-page] .mobile-record-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  body[data-page] .mobile-record-table tbody { display: grid; gap: 12px; }
  body[data-page] .mobile-record-table tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid #dce5ef; border-radius: 10px; background: #fff; overflow: hidden; padding: 12px 14px; }
  body[data-page] .mobile-record-table td { display: block; min-width: 0; padding: 8px 0; border: 0; overflow-wrap: anywhere; font-size: .82rem; }
  body[data-page] .mobile-record-table td:nth-child(even) { padding-right: 8px; }
  body[data-page] .mobile-record-table td::before { display: block; content: attr(data-label); color: #5c6f84; font-size: .69rem; font-weight: 500; margin-bottom: 3px; }
  body[data-page] .mobile-record-table td:first-child { grid-column: 1 / -1; padding: 2px 0 12px; margin-bottom: 4px; border-bottom: 1px solid #e8eef5; font-size: .97rem; font-weight: 650; }
  body[data-page] .mobile-record-table td:last-child { grid-column: 1 / -1; }
  body[data-page] .mobile-record-table td:first-child::before { display: none; }
  body[data-page] .member-pagination { align-items: stretch; gap: 12px; }
  body[data-page] .member-pagination .inline-actions { width: 100%; }
}
/* Navigation remains available if enhancement scripts cannot run. */
@media (max-width: 900px) {
  body[data-page]:not(.ui-enhanced) .app-shell { display: block; }
  body[data-page]:not(.ui-enhanced) .sidebar { display: flex !important; position: static; height: auto; margin: 12px; padding: 16px; }
  body[data-page]:not(.ui-enhanced) .sidebar-nav { display: flex; flex-wrap: wrap; flex-direction: row; gap: 6px; }
  body[data-page]:not(.ui-enhanced) .content { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}