:root {
  --md-sys-color-primary: #3d6655;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #bfecd4;
  --md-sys-color-on-primary-container: #092017;
  --md-sys-color-secondary: #50645a;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d3e8dc;
  --md-sys-color-on-secondary-container: #102019;
  --md-sys-color-tertiary: #466472;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #c9e8f7;
  --md-sys-color-on-tertiary-container: #071f29;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-warning: #775a00;
  --md-sys-color-warning-container: #ffdf91;
  --md-sys-color-on-warning-container: #251a00;
  --md-sys-color-surface: #f8faf7;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f1f5f1;
  --md-sys-color-surface-container: #ebefeb;
  --md-sys-color-surface-container-high: #e5e9e5;
  --md-sys-color-surface-container-highest: #dfe3df;
  --md-sys-color-on-surface: #191c1a;
  --md-sys-color-on-surface-variant: #414944;
  --md-sys-color-outline: #717973;
  --md-sys-color-outline-variant: #c0c9c2;
  --md-sys-color-inverse-surface: #2e312f;
  --md-sys-color-inverse-on-surface: #eff1ee;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-full: 9999px;
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --motion-standard: 180ms cubic-bezier(.2, 0, 0, 1);
  --drawer-width: 248px;
  --topbar-height: 64px;
}

* { box-sizing: border-box; }
html { background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font-family: var(--font-sans); }
body { margin: 0; min-width: 320px; }
body, input, select, textarea, button { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:active, .button:active { transform: translateY(1px); }
:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: var(--space-4); top: -80px; z-index: 20; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); padding: var(--space-3) var(--space-4); border-radius: var(--shape-sm); transition: top var(--motion-standard); }
.skip-link:focus { top: var(--space-4); }
.material-symbols-rounded { font-size: 22px; line-height: 1; }
.numeric { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.technical-code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface-variant); }

.top-app-bar { position: fixed; inset: 0 0 auto 0; height: var(--topbar-height); z-index: 10; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent); border-bottom: 1px solid var(--md-sys-color-outline-variant); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; font-weight: 650; letter-spacing: -.02em; }
.brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--md-sys-color-on-primary); background: var(--md-sys-color-primary); border-radius: var(--shape-sm); font-weight: 700; }
.brand-mark-large { width: 48px; height: 48px; font-size: 24px; }
.navigation-drawer { position: fixed; inset: var(--topbar-height) auto 0 0; width: var(--drawer-width); display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); background: var(--md-sys-color-surface-container-low); overflow: hidden; }
.nav-groups { flex: 1; overflow-y: auto; padding-right: var(--space-1); }
.nav-group { margin-bottom: var(--space-4); }
.nav-group h2 { margin: 0 var(--space-4) var(--space-1); color: var(--md-sys-color-on-surface-variant); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.navigation-drawer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.navigation-drawer a { min-height: 48px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); text-decoration: none; border-radius: var(--shape-full); color: var(--md-sys-color-on-surface-variant); font-size: 14px; font-weight: 500; transition: background var(--motion-standard), color var(--motion-standard); }
.navigation-drawer a:hover { background: var(--md-sys-color-surface-container-high); }
.navigation-drawer a[aria-current="page"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.profile-menu { position: relative; flex: 0 0 auto; padding-top: var(--space-3); border-top: 1px solid var(--md-sys-color-outline-variant); }
.profile-menu summary { min-height: 52px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: var(--shape-md); cursor: pointer; list-style: none; }
.profile-menu summary::-webkit-details-marker, .row-menu summary::-webkit-details-marker { display: none; }
.profile-menu summary:hover, .profile-menu[open] summary { background: var(--md-sys-color-surface-container-high); }
.profile-identity, .profile-popover-heading { min-width: 0; display: grid; }
.profile-identity strong { overflow: hidden; text-overflow: ellipsis; }
.profile-identity small, .profile-popover-heading small { color: var(--md-sys-color-on-surface-variant); }
.profile-popover { position: absolute; inset: auto 0 calc(100% + var(--space-2)); z-index: 3; padding: var(--space-2); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--shape-md); background: var(--md-sys-color-surface-container-lowest); box-shadow: 0 8px 24px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent); }
.profile-popover-heading { padding: var(--space-2) var(--space-3) var(--space-3); margin-bottom: var(--space-1); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.profile-popover a, .profile-popover button { width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); border: 0; border-radius: var(--shape-sm); background: transparent; color: var(--md-sys-color-on-surface); text-decoration: none; cursor: pointer; font-size: 14px; }
.profile-popover a:hover, .profile-popover button:hover { background: var(--md-sys-color-surface-container-low); }
.avatar { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: var(--shape-full); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); font-weight: 700; }
.menu-toggle, .nav-scrim { display: none; }
.main-content { min-height: 100dvh; margin-left: var(--drawer-width); padding: calc(var(--topbar-height) + var(--space-8)) var(--space-8) var(--space-12); }
.main-content > * { max-width: 1440px; margin-left: auto; margin-right: auto; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.page-header h1 { margin: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.15; letter-spacing: -.035em; }
.page-header p { margin: var(--space-2) 0 0; color: var(--md-sys-color-on-surface-variant); max-width: 64ch; }
.header-actions { display: flex; gap: var(--space-2); }
.row-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.actions-column { width: 1%; text-align: right !important; white-space: nowrap; }
.row-menu { position: relative; }
.row-menu summary { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--shape-full); cursor: pointer; list-style: none; color: var(--md-sys-color-on-surface-variant); }
.row-menu summary:hover, .row-menu[open] summary { background: var(--md-sys-color-surface-container-high); }
.row-menu-popover { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 4; min-width: 176px; padding: var(--space-1); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--shape-sm); background: var(--md-sys-color-surface-container-lowest); box-shadow: 0 8px 24px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent); }
.row-menu-popover a { min-height: 40px; display: flex; align-items: center; padding: 0 var(--space-3); border-radius: var(--shape-xs); text-decoration: none; white-space: nowrap; }
.row-menu-popover a:hover { background: var(--md-sys-color-surface-container-low); }
.row-menu-popover .menu-destructive { color: var(--md-sys-color-error); }
.eyebrow { margin: 0 0 var(--space-2) !important; color: var(--md-sys-color-primary) !important; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.section-block { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--md-sys-color-outline-variant); }
.section-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); margin-bottom: var(--space-4); }
.section-header h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.section-header p { margin: var(--space-1) 0 0; color: var(--md-sys-color-on-surface-variant); font-size: 14px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-8); }
.metric-band { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--md-sys-color-surface-container-low); border-radius: var(--shape-lg); overflow: hidden; }
.metric-band > div { min-width: 0; padding: var(--space-6); border-right: 1px solid var(--md-sys-color-outline-variant); }
.metric-band > div:last-child { border-right: 0; }
.metric-band span { display: block; color: var(--md-sys-color-on-surface-variant); font-size: 13px; }
.metric-band strong { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: clamp(24px, 3vw, 32px); font-weight: 600; }

.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-6); border: 0; border-radius: var(--shape-full); cursor: pointer; text-decoration: none; font-size: 14px; font-weight: 600; transition: background var(--motion-standard), color var(--motion-standard), transform var(--motion-standard); }
.button-filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.button-filled:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary)); }
.button-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.button-outlined { background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
.button-text { min-height: 36px; padding: 0 var(--space-3); background: transparent; color: var(--md-sys-color-primary); }
.button-text:hover { background: var(--md-sys-color-primary-container); }
.button-danger { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.button:disabled { cursor: not-allowed; opacity: .55; }
.icon-button { width: 48px; height: 48px; border: 0; border-radius: var(--shape-full); background: transparent; color: var(--md-sys-color-on-surface); cursor: pointer; }

.data-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--shape-md); background: var(--md-sys-color-surface-container-lowest); }
.data-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14px; }
.data-table th { padding: var(--space-3) var(--space-4); text-align: left; background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface-variant); font-size: 12px; font-weight: 600; }
.data-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--md-sys-color-outline-variant); vertical-align: middle; }
.data-table td small { display: block; margin-top: var(--space-1); color: var(--md-sys-color-on-surface-variant); }
.data-table tbody tr:hover { background: var(--md-sys-color-surface-container-low); }
.primary-link { color: var(--md-sys-color-on-surface); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.status-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-2); border-radius: var(--shape-full); font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-success { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.status-info { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.status-warning { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.status-error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.status-neutral { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.status-dot { width: 8px; height: 8px; border-radius: var(--shape-full); flex: 0 0 auto; }

.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin-bottom: var(--space-4); }
.date-range-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.date-range-fields[hidden] { display: none; }
.compact-field { display: grid; gap: var(--space-1); }
.compact-field label { color: var(--md-sys-color-on-surface-variant); font-size: 12px; font-weight: 600; }
.search-field { min-height: 44px; flex: 1 1 280px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--md-sys-color-outline); border-radius: var(--shape-sm); background: var(--md-sys-color-surface-container-lowest); }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--md-sys-color-on-surface); }
.compact-select, .compact-input { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--md-sys-color-outline); border-radius: var(--shape-sm); background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface); }
.compact-select:disabled, .compact-input:disabled, .field-input:disabled { cursor: not-allowed; background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); opacity: .7; }
.form-surface { max-width: 760px !important; margin-left: 0 !important; display: grid; gap: var(--space-6); padding: var(--space-8); background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--shape-lg); }
.settings-layout { max-width: 760px; display: grid; gap: var(--space-8); }
.security-overview { max-width: 880px; }
.security-setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.stack-form { display: grid; gap: var(--space-6); }
.form-section { display: grid; gap: var(--space-4); }
.form-section + .form-section { padding-top: var(--space-6); border-top: 1px solid var(--md-sys-color-outline-variant); }
.form-section-header h2 { margin: 0; font-size: 18px; letter-spacing: -.015em; }
.form-section-header p { margin: var(--space-1) 0 0; color: var(--md-sys-color-on-surface-variant); font-size: 14px; }
.form-section-break { margin-top: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--md-sys-color-outline-variant); }
.field { display: grid; gap: var(--space-2); }
.field > label { font-size: 14px; font-weight: 600; }
.required-marker { color: var(--md-sys-color-error); }
input.field-input:not([type="checkbox"]):not([type="radio"]), select.field-input, textarea.field-input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--md-sys-color-outline); border-radius: var(--shape-sm); background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface); }
.field textarea { resize: vertical; }
.choice-field { margin: 0; padding: 0; border: 0; }
.choice-field > legend { margin-bottom: var(--space-2); padding: 0; font-size: 14px; font-weight: 600; }
div.choice-list { display: grid; gap: var(--space-2); }
div.choice-list label { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; cursor: pointer; font-weight: 400; }
.field input[type="checkbox"], .field input[type="radio"] { flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--md-sys-color-primary); }
.field-check { grid-template-columns: auto 1fr; align-items: center; }
.field-check input { grid-column: 1; grid-row: 1; width: 20px; height: 20px; }
.field-check label { grid-column: 2; }
.field-check .field-help, .field-check .field-error { grid-column: 2; }
.field-help, .field-error { color: var(--md-sys-color-on-surface-variant); }
.field-error { color: var(--md-sys-color-error); }
.form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.totp-enrollment { max-width: 640px !important; }
.totp-qr { width: 224px; height: 224px; padding: var(--space-2); background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--shape-sm); }
.code-value { font-family: var(--font-mono); letter-spacing: .04em; }
.recovery-code-list { min-height: 264px; resize: none; line-height: 1.7; }
.security-rule-list { margin: 0; padding: 0; list-style: none; }
.security-rule-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.security-rule-list li > div:first-child { display: grid; gap: var(--space-1); }
.security-rule-list small { color: var(--md-sys-color-on-surface-variant); font-family: var(--font-mono); }
.destructive-text { color: var(--md-sys-color-error); }
.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--shape-md); }
.alert-error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.alert-warning { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.alert-info { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.definition-list { margin: 0; }
.definition-list > div { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.definition-list dt { color: var(--md-sys-color-on-surface-variant); }
.definition-list dd { margin: 0; font-weight: 500; }
.activity-list, .history-list, .bar-list { margin: 0; padding: 0; list-style: none; }
.activity-list li, .history-list li, .bar-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.activity-list li > span:nth-child(2), .history-list li > span:first-child { flex: 1; display: grid; }
.activity-list small, .history-list small { color: var(--md-sys-color-on-surface-variant); }
.activity-list a { color: var(--md-sys-color-primary); font-weight: 600; }
.bar-list li { justify-content: space-between; }
.bar-list strong { font-size: 18px; }
.health-strip { display: flex; gap: var(--space-8); }
.health-strip > div { display: grid; gap: var(--space-1); }
.health-strip strong { font: 600 24px var(--font-mono); }
.health-strip span { color: var(--md-sys-color-on-surface-variant); font-size: 13px; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-10); padding: var(--space-6); border: 1px solid var(--md-sys-color-error); border-radius: var(--shape-md); }
.danger-zone h2 { margin: 0; font-size: 18px; }
.danger-zone p { margin: var(--space-1) 0 0; color: var(--md-sys-color-on-surface-variant); }
.role-selector, .permission-matrix { max-width: 880px; }
.role-selector { margin-bottom: var(--space-6); }
.role-selector-controls { display: flex; align-items: center; gap: var(--space-2); }
.role-selector .compact-select { width: min(320px, 100%); }
.permission-search { max-width: 560px; margin-bottom: var(--space-4); }
.permission-group { padding: var(--space-6) 0; border-top: 1px solid var(--md-sys-color-outline-variant); }
.permission-group-header, .permission-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.permission-group-header h2 { margin: 0; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.permission-group-header p, .permission-toolbar p { margin: var(--space-1) 0 0; color: var(--md-sys-color-on-surface-variant); font-size: 13px; }
.permission-group-toggle { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border: 0; background: transparent; color: var(--md-sys-color-on-surface); text-align: left; cursor: pointer; }
.permission-group-toggle > span:first-child { min-width: 0; display: grid; gap: var(--space-1); }
.permission-group-toggle strong { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.permission-group-toggle small { color: var(--md-sys-color-on-surface-variant); font-size: 13px; }
.permission-group-actions { display: flex; flex-wrap: wrap; align-items: center; flex: 0 0 auto; color: var(--md-sys-color-on-surface-variant); }
.permission-group-actions .button { padding-inline: var(--space-2); }
.permission-list > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-3) 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.permission-list label, .permission-list span { min-width: 0; display: grid; }
.permission-list small { color: var(--md-sys-color-on-surface-variant); }
.permission-list input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--md-sys-color-primary); }
.role-permission-list .permission-row { display: block; padding: 0; }
.role-permission-list .permission-row > label { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); min-height: 56px; padding: var(--space-3) 0; cursor: pointer; }
.role-permission-list .technical-code { overflow-wrap: anywhere; }
.permission-search-empty { min-height: 96px; }
.permission-overrides > div { align-items: flex-start; }
.permission-result { min-width: 196px; display: grid; justify-items: end; gap: var(--space-2); }
.access-summary { margin-bottom: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--md-sys-color-outline-variant); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.access-summary div { display: grid; gap: var(--space-1); }
.access-summary span { color: var(--md-sys-color-on-surface-variant); }
.empty-state { min-height: 128px; display: grid; place-items: center; align-content: center; gap: var(--space-2); padding: var(--space-6); text-align: center; color: var(--md-sys-color-on-surface-variant); }
.empty-state .material-symbols-rounded { font-size: 32px; }
.empty-state h3 { margin: 0; color: var(--md-sys-color-on-surface); font-size: 18px; }
.empty-state p { margin: 0; max-width: 48ch; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-4); color: var(--md-sys-color-on-surface-variant); font-size: 14px; }
.snackbar-stack { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 15; }
.snackbar { padding: var(--space-4) var(--space-6); border-radius: var(--shape-sm); background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); }

.auth-main { margin-left: 0; padding: 0; }
.auth-layout { max-width: none !important; min-height: 100dvh; display: grid; grid-template-columns: 1.2fr minmax(360px, .8fr); }
.auth-intro { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(40px, 8vw, 96px); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.auth-intro .brand-mark { color: var(--md-sys-color-primary); background: var(--md-sys-color-on-primary); }
.auth-intro .eyebrow, .auth-intro p { color: color-mix(in srgb, var(--md-sys-color-on-primary) 80%, transparent) !important; }
.auth-intro h1 { max-width: 12ch; margin: var(--space-4) 0; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -.05em; }
.auth-intro > p:last-child { max-width: 50ch; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; gap: var(--space-8); padding: clamp(32px, 7vw, 80px); background: var(--md-sys-color-surface); }
.auth-panel h2 { margin: 0; font-size: 28px; }
.auth-panel p { color: var(--md-sys-color-on-surface-variant); }

@media (max-width: 1024px) {
  .menu-toggle { display: inline-grid; place-items: center; }
  .navigation-drawer { z-index: 12; transform: translateX(-100%); transition: transform var(--motion-standard); }
  .navigation-drawer.is-open { transform: translateX(0); }
  .nav-scrim { position: fixed; inset: var(--topbar-height) 0 0; z-index: 11; border: 0; background: color-mix(in srgb, var(--md-sys-color-on-surface) 36%, transparent); }
  .nav-scrim.is-visible { display: block; }
  .main-content { margin-left: 0; }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .top-app-bar { padding: 0 var(--space-2); }
  .brand span:last-child { display: none; }
  .main-content { padding: calc(var(--topbar-height) + var(--space-6)) var(--space-4) calc(var(--space-12) + 56px); }
  .page-header, .section-header, .danger-zone, .security-setting-row { flex-direction: column; align-items: stretch; }
  .page-header .button, .header-actions, .header-actions .button { width: 100%; }
  .header-actions { display: grid; }
  .metric-band { grid-template-columns: 1fr 1fr; }
  .metric-band > div:nth-child(2) { border-right: 0; }
  .metric-band > div:nth-child(-n+2) { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  .detail-grid { grid-template-columns: 1fr; }
  .form-surface { padding: var(--space-6); }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-intro { display: none; }
  .auth-panel { min-height: 100dvh; padding: var(--space-8) var(--space-6); }
  .health-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .copy-row { grid-template-columns: 1fr; }
  .copy-row .button { width: 100%; }
  .responsive-table { min-width: 0; }
  .responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .responsive-table tr { display: grid; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--md-sys-color-outline-variant); }
  .responsive-table tr:first-child { border-top: 0; }
  .responsive-table td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border: 0; }
  .responsive-table td[data-label]::before { content: attr(data-label); color: var(--md-sys-color-on-surface-variant); font-size: 12px; }
  .form-actions { flex-direction: column; }
  .form-actions .button { width: 100%; }
  .filter-bar > *, .date-range-fields, .date-range-fields > *, .compact-field { width: 100%; }
  .role-selector-controls { align-items: stretch; flex-direction: column; }
  .role-selector .compact-select, .role-selector .button { width: 100%; }
  .permission-group-header, .permission-toolbar, .permission-list > div { align-items: stretch; flex-direction: column; }
  .permission-group-actions { width: 100%; }
  .permission-result { width: 100%; justify-items: stretch; }
  .security-rule-list li { grid-template-columns: 1fr; align-items: start; }
  .permission-result .status-badge { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}