/* ============================================================
   AGMX Enterprise Design System
   - Glassmorphism + Enterprise SaaS Standards
   - Compliance-by-Design, Zero Training Required
   - One Screen, One Action, Senior Friendly
   ============================================================ */

:root {
  /* ===== Color System ===== */
  /* Primary - Trust Blue */
  --color-primary: #2563EB;
  --color-primary-50: #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-700: #1D4ED8;
  --color-primary-800: #1E40AF;
  --color-primary-900: #1E3A8A;

  /* Secondary - Blue */
  --color-secondary: #3B82F6;
  --color-secondary-100: #DBEAFE;

  /* Accent/CTA - Orange (Enterprise Grade) */
  --color-accent: #EA580C;
  --color-accent-100: #FFF7ED;
  --color-accent-600: #EA580C;
  --color-on-accent: #000000;

  /* Success */
  --color-success: #10B981;
  --color-success-100: #D1FAE5;
  --color-success-600: #059669;

  /* Warning */
  --color-warning: #F59E0B;
  --color-warning-100: #FEF3C7;
  --color-warning-600: #D97706;

  /* Danger/Error */
  --color-danger: #DC2626;
  --color-danger-100: #FEE2E2;
  --color-danger-600: #DC2626;

  /* Info */
  --color-info: #3B82F6;
  --color-info-100: #DBEAFE;

  /* Surfaces */
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-2: #F8FAFC;
  --color-card: #FFFFFF;
  --color-card-foreground: #1E293B;

  /* Borders */
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-divider: #E2E8F0;

  /* Text (verified: on-primary #fff 5.17:1, on-accent #000 5.9:1) */
  --color-foreground: #1E293B;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #000000;
  --color-on-accent: #000000;
  --color-on-destructive: #FFFFFF;
  --color-text: #1E293B;
  --color-text-2: #475569;
  --color-text-3: #94A3B8;
  --color-muted: #E9EFF8;
  --color-muted-foreground: #475569;

  /* Legacy compatibility */
  --c-primary: #2563EB;
  --c-primary-600: #2563EB;
  --c-primary-700: #1D4ED8;
  --c-primary-100: #DBEAFE;
  --c-accent: #EA580C;
  --c-accent-ink: #EA580C;
  --c-accent-100: #FFF7ED;
  --c-success: #10B981;
  --c-success-100: #D1FAE5;
  --c-warning: #F59E0B;
  --c-warning-100: #FEF3C7;
  --c-warning-600: #D97706;
  --c-danger: #DC2626;
  --c-danger-100: #FEE2E2;
  --c-info: #3B82F6;
  --c-bg: #F8FAFC;
  --c-surface: #FFFFFF;
  --c-surface-2: #F8FAFC;
  --c-border: #E2E8F0;
  --c-border-strong: #CBD5E1;
  --c-divider: #E2E8F0;
  --c-text: #1E293B;
  --c-text-2: #475569;
  --c-text-3: #94A3B8;
  --c-text-inv: #FFFFFF;

  /* Status Colors */
  --c-success: #10B981;
  --c-success-100: #D1FAE5;
  --c-warning: #F59E0B;
  --c-warning-100: #FEF3C7;
  --c-danger: #DC2626;
  --c-danger-100: #FEE2E2;
  --c-info: #3B82F6;
  --c-info-100: #DBEAFE;

  /* Sizes */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Shadows with color */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Glassmorphism
     Translucency alone is not glass: a blurred surface needs something behind
     it to refract, so --glass-ambient paints the page and the chrome floats on
     top. Alphas stay high enough that --color-text still clears WCAG AA on
     every glass surface; overlays use the stronger step because they sit over
     arbitrary content. html.dark re-declares these names, not new ones. */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-quiet: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.62);
  --glass-border-soft: rgba(148, 163, 184, 0.28);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --glass-blur-sm: blur(10px) saturate(160%);
  --glass-blur: blur(18px) saturate(180%);
  --glass-blur-lg: blur(28px) saturate(180%);
  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
  --glass-shadow-float: 0 20px 48px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08);
  --glass-scrim: rgba(15, 23, 42, 0.45);
  --glass-ambient:
    radial-gradient(760px 420px at 8% -6%, rgba(37, 99, 235, 0.15), transparent 62%),
    radial-gradient(680px 460px at 96% 2%, rgba(234, 88, 12, 0.09), transparent 60%),
    radial-gradient(920px 620px at 62% 106%, rgba(16, 185, 129, 0.09), transparent 58%);

  /* Shadows (legacy) */
  --sh-sm: 0 1px 2px rgba(15,23,42,0.05);
  --sh-md: 0 4px 12px rgba(15,23,42,0.08);
  --sh-lg: 0 12px 36px rgba(15,23,42,0.12);
  --sh-pop: 0 20px 60px rgba(15,23,42,0.18);

  /* Layout */
  --nav-w: 260px;
  --header-h: 64px;
  --sidebar-w: 260px;
  --header-h: 64px;

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky: 100;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font sizes */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.4);

  /* Layout */
  --nav-w: 260px;
  --header-h: 64px;
  --sidebar-w: 260px;
  --header-h: 64px;

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky: 100;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
}

/* ============================================================
   Fonts & Global Reset
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,600;0,700;0,800;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1E293B;
  background: var(--glass-ambient), var(--color-background, #F8FAFC);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: rgba(37, 99, 235, 0.18); }
.sidebar :focus-visible, .hall-main :focus-visible, .senior-top :focus-visible {
  outline-color: #EA580C;
}
::selection { background: rgba(37, 99, 235, 0.18); }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
input, select, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #94A3B8; opacity: 0.7; }
a { color: #2563EB; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   Utility Classes
   ============================================================ */
.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; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.flex-auto { flex: 1 1 auto; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 32px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-1 { flex: 1 1 0%; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.z-500 { z-index: 500; }

.text-xs { font-size: 0.75rem; line-height: 1.5; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.text-primary { color: #2563EB; }
.text-secondary { color: #475569; }
.text-muted { color: #94A3B8; }
.text-white { color: #FFFFFF; }
.text-success { color: #10B981; }
.text-danger { color: #DC2626; }
.text-warning { color: #F59E0B; }
.text-muted { color: #94A3B8; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }

.rounded-sm { border-radius: 4px; }
.rounded-md { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }
.rounded-2xl { border-radius: 24px; }
.rounded-full { border-radius: 9999px; }

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

.transition-fast { transition: all 150ms ease; }
.transition-base { transition: all 200ms ease; }
.transition-slow { transition: all 300ms ease; }

.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-500 { z-index: 500; }

/* ============================================================
   Button Components
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 200ms ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-primary {
  background: #EA580C;
  color: #000000;
  box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
}
.btn-primary:hover:not(:disabled) {
  background: #DC4A0C;
  color: #000000;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
  transform: translateY(-1px);
}
.btn-accent {
  background: #EA580C;
  color: #000000;
  box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
}
.btn-accent:hover:not(:disabled) {
  background: #DC4A0C;
  color: #000000;
}
.btn-primary:focus-visible {
  outline: 2px solid #EA580C;
  outline-offset: 2px;
}
.btn-secondary {
  background: transparent;
  color: #2563EB;
  border: 2px solid #2563EB;
}
.btn-secondary:hover:not(:disabled) {
  background: #DBEAFE;
}
.btn-ghost {
  background: transparent;
  color: #475569;
  border: 1px solid #E2E8F0;
}
.btn-ghost:hover:not(:disabled) {
  background: #F1F5F9;
}
.btn-danger {
  background: #DC2626;
  color: white;
}
.btn-danger:hover:not(:disabled) {
  background: #B91C1C;
}
.btn-success {
  background: #10B981;
  color: white;
}
.btn-ghost {
  background: transparent;
  color: #475569;
  border: 1px solid #E2E8F0;
}
.btn-ghost:hover {
  background: #F1F5F9;
}
.btn-sm {
  padding: 8px 16px;
  font-size: 0.8125rem;
}
.btn-lg {
  padding: 16px 32px;
  font-size: 1rem;
}
.btn-block {
  width: 100%;
}
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-sm { padding: 8px 16px; font-size: 0.8125rem; }
.btn-icon { padding: 8px; width: 40px; height: 40px; }

/* Button with icon */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; }
.btn-icon-sm { width: 32px; height: 32px; }

/* ============================================================
   Form Components
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 6px; }
.input {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  color: #1E293B;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input:focus {
  outline: none;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.input::placeholder { color: #94A3B8; }
.input-error { border-color: #DC2626; }
.input-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); border-color: #DC2626; }
.input-sm { padding: 8px 12px; font-size: 0.875rem; }
.input-lg { padding: 16px 20px; font-size: 1.125rem; }
.textarea { min-height: 100px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; padding-right: 40px; }

/* Checkbox & Radio */
.checkbox-wrapper { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox-input { width: 18px; height: 18px; accent-color: #2563EB; cursor: pointer; }
.checkbox-label { font-size: 0.875rem; color: #374151; cursor: pointer; }

/* ============================================================
   Card Components
   ============================================================ */
.card {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-shadow), var(--glass-edge);
  border-radius: 12px;
  transition: all 200ms ease;
}
.card:hover { box-shadow: var(--glass-shadow-float), var(--glass-edge); }
.card-body { padding: 24px; }
.card-footer { padding: 16px 24px; border-top: 1px solid var(--glass-border-soft); background: var(--glass-bg-quiet); border-radius: 0 0 12px 12px; }

/* ============================================================
   Badge / Tag Components
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  line-height: 1;
}
.badge-primary { background: #DBEAFE; color: #1E40AF; }
.badge-success { background: #D1FAE5; color: #065F46; }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-danger { background: #FEE2E2; color: #991B1B; }
.badge-info { background: #DBEAFE; color: #1E40AF; }
.badge-neutral { background: #F1F5F9; color: #475569; }
.badge-accent { background: #FFF7ED; color: #EA580C; }

/* ============================================================
   Table Components
   ============================================================ */
.table-container { overflow-x: auto; border-radius: 12px; border: 1px solid #E2E8F0; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th { padding: 12px 16px; text-align: left; font-weight: 600; color: #64748B; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
.table td { padding: 12px 16px; border-bottom: 1px solid #E2E8F0; color: #1E293B; }
.table tbody tr { transition: background 150ms ease; }
.table tbody tr:hover { background: #F8FAFC; }
.table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   Modal / Dialog
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; background: var(--glass-scrim);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; padding: 24px;
  animation: fadeIn 200ms ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-float), var(--glass-edge);
  border-radius: 16px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; animation: slideUp 200ms ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.modal-header { padding: 24px 24px 16px; border-bottom: 1px solid var(--glass-border-soft); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 1.125rem; font-weight: 700; color: #1E293B; }
.modal-close { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #64748B; background: transparent; border: none; cursor: pointer; }
.modal-close:hover { background: #F1F5F9; color: #1E293B; }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--glass-border-soft); display: flex; justify-content: flex-end; gap: 8px; }

/* ============================================================
   Toast / Toast Notifications
   ============================================================ */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: var(--glass-shadow-float), var(--glass-edge); border-left: 4px solid; animation: slideIn 300ms ease; min-width: 300px; max-width: 400px; }
.toast-success { border-left-color: #10B981; }
.toast-error { border-left-color: #DC2626; }
.toast-warning { border-left-color: #F59E0B; }
.toast-info { border-left-color: #3B82F6; }
@keyframes slideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }

/* ============================================================
   Tooltip
   ============================================================ */
.tooltip { position: absolute; z-index: 700; padding: 8px 12px; background: #1E293B; color: white; font-size: 0.75rem; border-radius: 6px; font-weight: 500; max-width: 240px; pointer-events: none; animation: fadeIn 150ms ease; }
.tooltip::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #1E293B; }

/* ============================================================
   Dropdown / Popover
   ============================================================ */
.dropdown { position: relative; }
.dropdown-menu { position: absolute; top: 100%; right: 0; margin-top: 8px; min-width: 200px; background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: var(--glass-shadow-float), var(--glass-edge); padding: 8px; z-index: 100; animation: fadeIn 150ms ease; }
.dropdown-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; font-size: 0.875rem; color: #374151; transition: background 100ms ease; cursor: pointer; }
.dropdown-item:hover { background: #F1F5F9; }
.dropdown-divider { height: 1px; background: #E2E8F0; margin: 8px 0; }

/* ============================================================
   Tabs
   ============================================================ */
.tabs { border-bottom: 1px solid #E2E8F0; }
.tabs-list { display: flex; gap: 4px; border-bottom: 1px solid #E2E8F0; }
.tab-trigger { padding: 12px 20px; font-size: 0.875rem; font-weight: 500; color: #64748B; border-bottom: 2px solid transparent; cursor: pointer; transition: all 150ms ease; }
.tab-trigger:hover { color: #374151; }
.tab-trigger[data-state="active"] { color: #2563EB; border-bottom-color: #2563EB; }
.tab-content { padding: 24px 0; }

/* ============================================================
   Sidebar / Navigation
   ============================================================ */
.sidebar { width: 260px; background: var(--glass-bg); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); border-right: 1px solid var(--glass-border-soft); height: 100vh; display: flex; flex-direction: column; position: sticky; top: 0; }
.sidebar-header { padding: 20px; border-bottom: 1px solid #E2E8F0; }
.nav-section { padding: 16px 12px 8px; }
.nav-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94A3B8; margin-bottom: 8px; padding: 0 12px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #64748B; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 150ms ease; }
.nav-item:hover { background: #F1F5F9; color: #1E293B; }
.nav-item.active { background: #DBEAFE; color: #2563EB; font-weight: 600; }
.nav-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ============================================================
   Header / Top Bar
   ============================================================ */
.header { height: 64px; background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); border-bottom: 1px solid var(--glass-border-soft); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 100; }
.header-left { display: flex; align-items: center; gap: 24px; }
.header-title { font-size: 1.125rem; font-weight: 700; color: #1E293B; }
.header-subtitle { font-size: 0.75rem; color: #64748B; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-divider { width: 1px; height: 24px; background: #E2E8F0; }
.header-action-btn { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #64748B; background: transparent; border: none; cursor: pointer; transition: all 150ms; }
.header-action-btn:hover { background: #F1F5F9; color: #2563EB; }
.user-menu { position: relative; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #2563EB, #EA580C); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }

/* ============================================================
   Layout Utilities
   ============================================================ */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container-lg { max-width: 1280px; }
.container-xl { max-width: 1280px; }
.container-2xl { max-width: 1536px; }
.grid { display: grid; gap: 24px; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; } }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.p-4 { padding: 16px; } .p-6 { padding: 24px; } .p-8 { padding: 32px; }
.mt-4 { margin-top: 16px; } .mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; } .mb-8 { margin-bottom: 32px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.relative { position: relative; } .absolute { position: absolute; }
.fixed { position: fixed; } .sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-50 { z-index: 50; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) { .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; transform: translateX(-100%); transition: transform 300ms ease; } .sidebar.open { transform: translateX(0); } }
@media (max-width: 768px) { .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; } .text-4xl { font-size: 2.25rem; } .text-5xl { font-size: 2.5rem; } .text-3xl { font-size: 1.875rem; } }

/* ============================================================
   Animations
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-fade-in { animation: fadeIn 200ms ease; }
.animate-slide-up { animation: slideUp 200ms ease; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s infinite; }

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================
   Skip Link (Accessibility)
   ============================================================ */
.skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); padding: 12px 24px; background: #2563EB; color: white; border-radius: 8px; font-weight: 600; z-index: 1000; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

/* ============================================================
   Loading States
   ============================================================ */
.skeleton { background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton-text { height: 1rem; width: 100%; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-card { height: 200px; border-radius: 12px; }

/* ============================================================
   Print Styles
   ============================================================ */
@media print { .no-print { display: none !important; } .print-only { display: block !important; } body { background: white !important; } .no-print { display: none !important; } }

/* ============================================================
   Dark Mode
   ------------------------------------------------------------
   Keyed on html.dark, which theme.js sets from the stored choice or,
   when nothing is stored, from prefers-color-scheme. One rule set
   serves both, and the toggle button switches it at runtime.
   ============================================================ */
html.dark {
  --color-background: #0F172A;
  --color-surface: #1E293B;
  --color-surface-2: #0F172A;
  --color-card: #1E293B;
  --color-border: #334155;
  --color-border-strong: #475569;
  --color-text: #F1F5F9;
  --color-text-2: #CBD5E1;
  --color-text-3: #94A3B8;
  --color-muted: #1E293B;
  --color-muted-foreground: #94A3B8;
  --color-bg: #0F172A;
  --c-bg: #0F172A;
  --c-surface: #1E293B;
  --c-surface-2: #0F172A;
  --c-border: #334155;
  --c-border-strong: #475569;
  --c-text: #F1F5F9;
  --c-text-2: #CBD5E1;
  --c-text-3: #94A3B8;

  /* Glass re-declared on the same names, so every glass surface in the file
     (including the ones in app-shell.css) follows the theme with no per-rule
     dark overrides. Slate alpha instead of white; the mesh dims with it. */
  --glass-bg: rgba(30, 41, 59, 0.72);
  --glass-bg-quiet: rgba(30, 41, 59, 0.55);
  --glass-bg-strong: rgba(15, 23, 42, 0.88);
  --glass-border: rgba(148, 163, 184, 0.26);
  --glass-border-soft: rgba(148, 163, 184, 0.2);
  --glass-edge: inset 0 1px 0 rgba(148, 163, 184, 0.16);
  --glass-shadow: 0 8px 32px rgba(2, 6, 23, 0.4), 0 1px 2px rgba(2, 6, 23, 0.3);
  --glass-shadow-float: 0 20px 48px rgba(2, 6, 23, 0.55), 0 2px 6px rgba(2, 6, 23, 0.35);
  --glass-scrim: rgba(2, 6, 23, 0.62);
  --glass-ambient:
    radial-gradient(760px 420px at 8% -6%, rgba(59, 130, 246, 0.22), transparent 62%),
    radial-gradient(680px 460px at 96% 2%, rgba(234, 88, 12, 0.12), transparent 60%),
    radial-gradient(920px 620px at 62% 106%, rgba(16, 185, 129, 0.12), transparent 58%);
}
html.dark .input { background: #0F172A; border-color: #334155; color: #F1F5F9; }
html.dark .input:focus { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); }
html.dark .btn-secondary { background: #334155; color: #93C5FD; border-color: #334155; }
html.dark .btn-secondary:hover { background: #334155; }
html.dark .btn-ghost { color: #CBD5E1; border-color: #334155; }
html.dark .btn-ghost:hover { background: #334155; }

/* ============================================================
   Senior Mode / High Contrast
   ============================================================ */
.senior-mode { font-size: 18px; }
.senior-mode .btn { padding: 16px 32px; font-size: 1.125rem; }
.senior-mode .input { font-size: 1.125rem; padding: 16px 20px; }
.senior-mode .card { padding: 32px; }
.senior-mode .kpi-value { font-size: 3rem; }
.senior-mode .kpi-label { font-size: 1rem; }
.senior-mode .nav-item { padding: 14px 16px; font-size: 1rem; }
.senior-mode .nav-item .nav-icon { width: 24px; height: 24px; }
.senior-mode .btn { padding: 16px 32px; font-size: 1.125rem; }
.senior-mode .input { font-size: 1.125rem; padding: 16px 20px; }
.senior-mode .kpi-value { font-size: 3rem; }
.senior-mode .kpi-label { font-size: 1rem; }
.senior-mode .text-sm { font-size: 1rem; }
.senior-mode .text-base { font-size: 1.125rem; }
.senior-mode .text-lg { font-size: 1.25rem; }
.senior-mode .text-xl { font-size: 1.375rem; }
.senior-mode .text-2xl { font-size: 1.75rem; }
.senior-mode .text-3xl { font-size: 2.25rem; }

/* High Contrast Mode */
.high-contrast { --color-primary: #1D4ED8; --color-text: #000000; --color-bg: #FFFFFF; --c-bg: #FFFFFF; --c-text: #000000; --c-primary: #1D4ED8; --c-accent: #EA580C; --c-success: #059669; --c-danger: #DC2626; --c-warning: #D97706; --c-border: #000000; --c-border-strong: #000000; --c-divider: #000000; }
.high-contrast .btn-primary { background: #000000; color: #FFFFFF; border: 2px solid #000000; }
.high-contrast .btn-secondary { background: #FFFFFF; color: #000000; border: 2px solid #000000; }
.high-contrast .card { border: 2px solid #000000; }
.high-contrast .input { border: 2px solid #000000; }
.high-contrast .card { border: 2px solid #000000; }
.high-contrast .sidebar { border-right: 2px solid #000000; }
.high-contrast .header { border-bottom: 2px solid #000000; }
.high-contrast .nav-item.active { background: #000000; color: #FFFFFF; }
.high-contrast .btn-primary { background: #000000; color: #FFFFFF; border: 2px solid #000000; }
.high-contrast .btn-secondary { background: #FFFFFF; color: #000000; border: 2px solid #000000; }
.high-contrast a { color: #000000; text-decoration: underline; }

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

/* ============================================================
   Focus Visible
   ============================================================ */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Skip Link
   ============================================================ */
.skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); padding: 12px 24px; background: #2563EB; color: white; border-radius: 8px; font-weight: 600; z-index: 1000; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

/* ============================================================
   Skip Link
   ============================================================ */
.skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); padding: 12px 24px; background: #2563EB; color: white; border-radius: 8px; font-weight: 600; z-index: 1000; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

/* ============================================================
   Focus Visible
   ============================================================ */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {
  .no-print { display: none !important; }
  .sidebar, .header, .sidebar, .header, .no-print { display: none !important; }
  .main { grid-column: 1 / -1; }
  body { background: white !important; }
  .card { box-shadow: none; border: 1px solid #E2E8F0; }
}

/* ============================================================
   Senior Mode / High Contrast
   ============================================================ */
.senior-mode { font-size: 18px; }
.senior-mode .btn { padding: 16px 32px; font-size: 1.125rem; }
.senior-mode .input { font-size: 1.125rem; padding: 16px 20px; }
.senior-mode .card { padding: 32px; }
.senior-mode .kpi-value { font-size: 3rem; }
.senior-mode .kpi-label { font-size: 1rem; }
.senior-mode .nav-item { padding: 14px 16px; font-size: 1rem; }
.senior-mode .nav-item .nav-icon { width: 24px; height: 24px; }
.senior-mode .btn { padding: 16px 32px; font-size: 1.125rem; }
.senior-mode .input { font-size: 1.125rem; padding: 16px 20px; }
.senior-mode .kpi-value { font-size: 3rem; }
.senior-mode .kpi-label { font-size: 1rem; }
.senior-mode .text-sm { font-size: 1rem; }
.senior-mode .text-base { font-size: 1.125rem; }
.senior-mode .text-lg { font-size: 1.25rem; }
.senior-mode .text-xl { font-size: 1.375rem; }
.senior-mode .text-2xl { font-size: 1.75rem; }
.senior-mode .text-3xl { font-size: 2.25rem; }

/* High Contrast Mode */
.high-contrast { --color-primary: #1D4ED8; --color-text: #000000; --color-bg: #FFFFFF; --c-bg: #FFFFFF; --c-text: #000000; --c-primary: #1D4ED8; --c-accent: #EA580C; --c-success: #059669; --c-danger: #DC2626; --c-warning: #D97706; --c-border: #000000; --c-border-strong: #000000; --c-divider: #000000; }
.high-contrast .btn-primary { background: #000000; color: #FFFFFF; border: 2px solid #000000; }
.high-contrast .btn-secondary { background: #FFFFFF; color: #000000; border: 2px solid #000000; }
.high-contrast .card { border: 2px solid #000000; }
.high-contrast .input { border: 2px solid #000000; }
.high-contrast .card { border: 2px solid #000000; }
.high-contrast .sidebar { border-right: 2px solid #000000; }
.high-contrast .header { border-bottom: 2px solid #000000; }
.high-contrast .nav-item.active { background: #000000; color: #FFFFFF; }
.high-contrast .btn-primary { background: #000000; color: #FFFFFF; border: 2px solid #000000; }
.high-contrast .btn-secondary { background: #FFFFFF; color: #000000; border: 2px solid #000000; }
.high-contrast a { color: #000000; text-decoration: underline; }

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

/* ============================================================
   Focus Visible
   ============================================================ */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Skip Link
   ============================================================ */
.skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); padding: 12px 24px; background: #2563EB; color: white; border-radius: 8px; font-weight: 600; z-index: 1000; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

/* ============================================================
   Print Styles
   ============================================================ */
@media print { .no-print { display: none !important; } .print-only { display: block !important; } body { background: white !important; } .no-print { display: none !important; } }

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================
   Selection
   ============================================================ */
::selection { background: rgba(37, 99, 235, 0.18); }

/* ============================================================
   Focus Visible
   ============================================================ */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Skip Link
   ============================================================ */
.skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); padding: 12px 24px; background: #2563EB; color: white; border-radius: 8px; font-weight: 600; z-index: 1000; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

/* ============================================================
   LOGIN VIEW — Google Auth + Email/Password + Role Picker
   ============================================================ */
.agmx-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px;
  background: linear-gradient(160deg, #0B5394 0%, #123E6E 45%, #0A2E52 100%);
  color: #fff;
}

.login-head { text-align: center; max-width: 420px; }
.login-logo {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #D4A017, #F5C542);
  color: #0A2E52;
  font-weight: 800; font-size: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.login-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.login-sub { margin: 0; font-size: 15px; opacity: 0.82; }

.login-body { width: 100%; max-width: 400px; }
.login-methods, .login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form .field { display: flex; flex-direction: column; gap: 6px; }
.login-form .field-label { font-size: 13px; font-weight: 600; opacity: 0.9; }
.login-form .input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: #0A2E52;
  font-size: 16px;
}
.login-form .input:focus { outline: 3px solid rgba(212, 160, 23, 0.55); border-color: #D4A017; }

.login-hint { margin: -6px 0 0; font-size: 12.5px; opacity: 0.72; text-align: center; }
.login-sent { margin: 0; font-size: 14px; opacity: 0.88; text-align: center; }
.login-sent strong { color: #F5C542; }
.login-timer { margin: 0; font-size: 13px; opacity: 0.8; text-align: center; }
.login-timer strong { font-variant-numeric: tabular-nums; }

.login-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0;
  font-size: 12px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.08em;
}
.login-divider::before, .login-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.24);
}

.login-demo { flex-direction: column; gap: 3px; margin-top: 6px; }
.login-demo small { font-size: 11.5px; opacity: 0.7; }

.login-status {
  margin: 4px 0 0; min-height: 18px;
  font-size: 13px; text-align: center; opacity: 0.85;
}
.login-status.is-error { color: #FFB4A2; opacity: 1; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #0A2E52;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.btn-google:hover { background: #F5F7FB; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); }
.google-g { flex-shrink: 0; }

.role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 6px; }
.role-card {
  padding: 20px 12px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s, border-color 0.18s;
}
.role-card:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); border-color: #D4A017; }
.role-card:focus-visible { outline: 3px solid #F5C542; outline-offset: 2px; }

/* Light theme variant (when body is not dark) */
:root:not(.dark) .agmx-login { background: linear-gradient(160deg, #0B5394 0%, #123E6E 50%, #0A2E52 100%); }

/* High contrast */
.high-contrast .agmx-login { background: #000; }
.high-contrast .login-form .input { border-width: 2px; border-color: #fff; }
.high-contrast .role-card { border-width: 2px; }

/* Senior mode — larger targets */
.senior-mode .login-form .input { font-size: 19px; padding: 18px 16px; }
.senior-mode .btn-google, .senior-mode .login-form .btn { min-height: 60px; font-size: 18px; }
.senior-mode .role-card { min-height: 64px; font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  .role-card, .btn-google { transition: none; }
  .role-card:hover, .btn-google:hover { transform: none; }
}

/* ============================================================
   Enterprise Landing (index.html) — Hero + Features + CTA
   Tokens: --color-*, 8pt rhythm, 375/768/1024/1440
   ============================================================ */
.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.skip-link { position: absolute; left: -999px; top: 0; background: #1D4ED8; color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100; }
.skip-link:focus { left: 0; }
.hero { background: linear-gradient(180deg, #EFF6FF 0%, #F8FAFC 100%); border-bottom: 1px solid #E2E8F0; }
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; }
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: #1E293B; }
.nav-links { display: flex; gap: 20px; }
.nav-link { color: #475569; font-weight: 600; font-size: 14px; text-decoration: none; }
.nav-link:hover { color: #1D4ED8; }
.nav-actions { display: flex; gap: 10px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 32px; align-items: center; padding: 40px 0 56px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; padding: 6px 12px; border-radius: 999px; background: #DBEAFE; color: #1D4ED8; }
.badge-accent { background: #FFF7ED; color: #9A3412; border: 1px solid #FED7AA; }
.hero h1 { font-size: clamp(32px, 4.5vw, 52px); line-height: 1.05; letter-spacing: -1px; margin: 16px 0 12px; color: #0F172A; }
.hero h1 .highlight { color: #2563EB; }
.hero-subtitle { font-size: 17px; line-height: 1.65; color: #475569; max-width: 560px; }
.hero-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.hero-proof { display: flex; gap: 24px; margin-top: 26px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #CBD5E1; display: inline-block; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.section-label { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #2563EB; }
.section-header h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.5px; margin: 10px 0; color: #0F172A; }
.section-subtitle { color: #475569; font-size: 16px; line-height: 1.6; }
.pricing-section, .trust-section { padding: 64px 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pricing-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.pricing-card.featured { border: 2px solid #EA580C; box-shadow: 0 12px 30px rgba(234,88,12,0.15); }
.plan-badge { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #64748B; }
.plan-badge.popular { color: #9A3412; }
.pricing-card h3 { font-size: 18px; color: #0F172A; }
.price { font-size: 28px; font-weight: 800; color: #0F172A; }
.price span { font-size: 13px; font-weight: 600; color: #64748B; }
.plan-desc { font-size: 13px; color: #64748B; }
/* The card number is filled by price-list.js, so it needs the size the text
   node it replaced had; .price span styles the "/year" suffix. */
.price-value { font-size: 28px; font-weight: 800; color: #0F172A; }
.pricing-oneoff { margin: 18px 0 0; padding: 14px 18px; border: 1px solid #E2E8F0; border-radius: 12px; background: #F8FAFC; font-size: 14px; color: #334155; }
.pricing-note { margin: 10px 0 0; font-size: 12.5px; color: #64748B; }
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13px; color: #334155; }
.features li::before { content: "✓ "; color: #059669; font-weight: 800; }
.trust-card h3 { font-size: 15px; margin: 10px 0 4px; }
.trust-card p { font-size: 13px; color: #64748B; }
.cta-section { padding: 40px 0 64px; }
.cta-card { background: linear-gradient(135deg, #1D4ED8, #2563EB); color: #fff; border-radius: 20px; padding: 48px 32px; text-align: center; }
.cta-card h2 { font-size: clamp(26px, 3vw, 36px); margin: 12px 0; }
.cta-card p { opacity: 0.9; }
.cta-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.footer { border-top: 1px solid #E2E8F0; background: #FFFFFF; padding: 40px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 24px; }
.footer-nav { display: flex; flex-direction: column; gap: 8px; }
.footer-nav h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: #64748B; }
.footer-nav a { font-size: 14px; color: #334155; text-decoration: none; }
.footer-nav a:hover { color: #1D4ED8; }
.footer-bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid #E2E8F0; font-size: 13px; color: #64748B; }
.how-section { padding: 64px 0; background: #FFFFFF; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; }
@media (max-width: 1024px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .hero-grid { grid-template-columns: 1fr; } .nav-links { display: none; } }
@media (max-width: 375px) { .pricing-grid { grid-template-columns: 1fr; } .hero-actions .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* ============================================================
   Landing page — status-led layout (2027 positioning)
   The page's argument is that every claim carries a verifiable
   status, so the status pill is the primary visual primitive here
   and is reused by the capability, stage, trust and pricing blocks.
   ============================================================ */

.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; border-radius: 999px;
  padding: 5px 11px; white-space: nowrap; border: 1px solid transparent;
}
.status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.status-ready { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.status-build { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.status-plan  { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
.status-sample { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }

/* ---- Hero: proof line and today-status ---- */
.hero-proof { margin: 18px 0 0; font-size: 14px; color: #475569; line-height: 1.65; }
.hero-status { margin-top: 22px; padding-top: 20px; border-top: 1px dashed #CBD5E1; }
.hero-status-title {
  margin: 0 0 12px; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.7px; text-transform: uppercase; color: #64748B;
}
.hero-status-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hero-status-list li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14px; color: #334155; line-height: 1.55;
}
.hero-status-list .status { flex: none; transform: translateY(-1px); }

/* ---- Hero visual: sample record card (replaces the mock dashboard) ---- */
.record-card {
  margin: 0; background: #fff; border: 1px solid #E2E8F0; border-radius: 18px;
  padding: 22px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}
.record-card > figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.record-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: #64748B; }
.record-title { margin: 0 0 16px; font-size: 17px; font-weight: 700; color: #0F172A; line-height: 1.45; }
.record-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 18px; }
.record-stats > div { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 10px; }
.record-stats dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #64748B; }
.record-stats dd { margin: 4px 0 0; font-size: 19px; font-weight: 800; color: #1D4ED8; font-variant-numeric: tabular-nums; }
.record-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid #E2E8F0; }
.record-label { margin: 0; font-size: 13.5px; color: #334155; line-height: 1.5; }
.record-tally { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; color: #0F172A; flex: none; }
.record-tally span:nth-child(1) { color: #047857; }
.record-tally span:nth-child(2) { color: #B91C1C; }
.record-tally span:nth-child(3) { color: #64748B; }
.record-flag { margin: 0; flex: none; font-size: 12px; font-weight: 800; color: #B91C1C; }
.record-legend { margin: -6px 0 0; font-size: 11px; color: #94A3B8; text-align: right; }
.record-foot {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed #CBD5E1;
  font-size: 12px; line-height: 1.6; color: #64748B;
}

/* ---- Capability availability grid ---- */
.availability-section { padding: 64px 0; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; }
.availability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.availability-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 20px;
}
.availability-card h3 { margin: 0; font-size: 16px; color: #0F172A; }
.availability-card p { margin: 0; font-size: 13.5px; line-height: 1.65; color: #475569; }
.availability-evidence {
  font-size: 12.5px !important; color: #64748B !important;
  padding: 10px 12px; background: #F8FAFC; border-left: 3px solid #BFDBFE; border-radius: 0 8px 8px 0;
}
.availability-card .status { margin-top: auto; }

/* ---- Four stages with deliverables ---- */
.stage-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stage-card { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; }
.stage-num {
  margin: 0 0 10px; width: 30px; height: 30px; border-radius: 9px;
  background: #1D4ED8; color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.stage-card h3 { margin: 0 0 12px; font-size: 17px; color: #0F172A; }
.stage-deliverables { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.stage-deliverables li { font-size: 13.5px; line-height: 1.55; color: #475569; padding-left: 18px; position: relative; }
.stage-deliverables li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: #2563EB; }
.stage-state { margin: auto 0 0; font-size: 12px; font-weight: 700; color: #B45309; padding-top: 12px; border-top: 1px dashed #CBD5E1; }

/* ---- Trust centre ---- */
.trust-matrix { display: grid; gap: 0; border: 1px solid #E2E8F0; border-radius: 18px; background: #fff; overflow: hidden; }
.trust-row { padding: 24px; border-bottom: 1px solid #E2E8F0; }
.trust-row:last-child { border-bottom: 0; }
.trust-row h3 { display: inline; margin: 0 14px 0 0; font-size: 17px; color: #0F172A; }
.trust-row p { margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: #475569; }
.trust-check {
  padding: 12px 14px !important; border-radius: 10px; font-size: 13px !important;
  background: #F8FAFC; border-left: 3px solid #BFDBFE; color: #334155 !important;
}

/* ---- Compliance ---- */
.compliance-section { padding: 64px 0; background: #fff; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; }
.compliance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.compliance-card { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px; padding: 20px; }
.compliance-card h3 { margin: 0 0 10px; font-size: 16px; color: #0F172A; }
.compliance-card p { margin: 0; font-size: 13.5px; line-height: 1.7; color: #475569; }
.compliance-note {
  margin: 24px 0 0; padding: 16px 18px; border-radius: 12px;
  background: #FFFBEB; border: 1px solid #FDE68A;
  font-size: 13px; line-height: 1.65; color: #92400E;
}

/* ---- Resources ---- */
.resources-section { padding: 64px 0; }
.resources-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.resource-card {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 16px;
  text-decoration: none; transition: border-color 150ms ease, transform 150ms ease;
}
.resource-card:hover { border-color: #2563EB; transform: translateY(-2px); }
.resource-card h3 { margin: 0; font-size: 15px; color: #0F172A; }
.resource-card p { margin: 0; font-size: 13px; line-height: 1.6; color: #475569; }
.resource-link { margin-top: auto; font-size: 13px; font-weight: 800; color: #1D4ED8; }

.accessibility-block { margin-top: 36px; padding: 24px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 18px; }
.accessibility-block h3 { margin: 0 0 18px; font-size: 18px; color: #0F172A; }
.accessibility-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.accessibility-heading { margin: 0 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: #64748B; }
.accessibility-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.accessibility-list li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.6; color: #475569; }
.accessibility-list li::before {
  content: "\2713"; position: absolute; left: 0; top: -1px;
  font-weight: 800; color: #047857;
}
.accessibility-list.caution li::before { content: "\2192"; color: #B45309; }

/* ---- Pricing: roadmap honesty ---- */
.features li.is-roadmap { display: block; opacity: 0.78; }
.features li.is-roadmap > span:first-child { display: block; }
/* A tick would claim the line is delivered; a hollow marker plus the pill says it is not. */
.features li.is-roadmap::before { content: "\25CB "; color: #94A3B8; }
.features li.is-roadmap .status { margin-top: 5px; }
.scoping-block { margin-top: 28px; padding: 24px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 18px; }
.scoping-block h3 { margin: 0 0 10px; font-size: 18px; color: #0F172A; }
.scoping-block > p { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: #475569; }
.scope-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.scope-steps li { font-size: 13.5px; line-height: 1.65; color: #475569; }

/* ---- FAQ ---- */
.faq-section { padding: 64px 0; background: #fff; border-top: 1px solid #E2E8F0; }
.faq-list { display: grid; gap: 10px; max-width: 880px; margin: 0 auto; }
.faq-item { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px; padding: 4px 18px; }
.faq-item summary { cursor: pointer; font-size: 15px; font-weight: 700; color: #0F172A; padding: 12px 0; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; font-weight: 800; color: #2563EB; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] { background: #fff; }
.faq-item p { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: #475569; }

.cta-copy { max-width: 640px; margin: 0 auto; }
.cta-foot { margin-top: 20px; font-size: 12.5px; opacity: 0.82; }
/* The close card is a blue gradient, and .btn-secondary is blue on transparent —
   on that background it reads as an empty box. The html.dark selector is repeated
   because the dark theme's own .btn-secondary rule outranks a plain descendant one. */
.cta-card .btn-secondary, html.dark .cta-card .btn-secondary { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.65); background: transparent; }
.cta-card .btn-secondary:hover, html.dark .cta-card .btn-secondary:hover { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }

/* ---- Dark theme ---- */
/* The nav toggle predates this page and only ever recoloured the app chrome, so
   switching to dark left the marketing page white with dark cards floating on
   it. These rules cover the page shell and everything the landing page renders.
   Status pills deliberately keep their light chip styling: dimming only some of
   the four would make the badges disagree with each other. */
html.dark body { background: #0F172A; color: #E2E8F0; }
html.dark .availability-section, html.dark .how-section, html.dark .compliance-section,
html.dark .faq-section, html.dark .footer { background: #0F172A; }
html.dark .hero { background: linear-gradient(180deg, #10233F 0%, #0F172A 100%); }
html.dark .hero, html.dark .availability-section, html.dark .how-section,
html.dark .compliance-section, html.dark .faq-section, html.dark .footer,
html.dark .trust-row, html.dark .record-row { border-color: #1E293B; }
html.dark .hero-status { border-top-color: #334155; }

html.dark .hero h1, html.dark .section-header h2, html.dark .pricing-card h3,
html.dark .price, html.dark .nav-brand { color: #F1F5F9; }
html.dark .hero-subtitle, html.dark .section-subtitle, html.dark .trust-row p,
html.dark .nav-link, html.dark .plan-desc, html.dark .price span, html.dark .plan-badge,
html.dark .hero-status-title, html.dark .record-stats dt,
html.dark .accessibility-heading, html.dark .footer-nav h4, html.dark .footer-bottom,
html.dark .record-legend { color: #94A3B8; }
html.dark .nav-link:hover, html.dark .footer-nav a:hover { color: #93C5FD; }
html.dark .footer-nav a { color: #CBD5E1; }
html.dark .section-label, html.dark .resource-link, html.dark .faq-item summary::after { color: #93C5FD; }
html.dark .stage-state { color: #FCD34D; }
html.dark .accessibility-list li::before { color: #34D399; }
html.dark .accessibility-list.caution li::before { color: #FBBF24; }
html.dark .trust-check { border-left-color: #3B82F6; }
html.dark .pricing-card { background: #1E293B; border-color: #334155; }
html.dark .price-value { color: #F8FAFC; }
html.dark .pricing-oneoff { background: #1E293B; border-color: #334155; color: #CBD5E1; }
/* .features is #334155 on white; on a dark card that is unreadable. */
html.dark .features { color: #CBD5E1; }
html.dark .features li::before { color: #34D399; }
html.dark .features li.is-roadmap::before { color: #64748B; }

html.dark .hero-proof, html.dark .availability-card p, html.dark .trust-row h3,
html.dark .compliance-card p, html.dark .resource-card p, html.dark .faq-item p,
html.dark .scoping-block > p, html.dark .scope-steps li, html.dark .record-label,
html.dark .accessibility-list li, html.dark .stage-deliverables li,
html.dark .hero-status-list li { color: #CBD5E1; }
html.dark .record-card, html.dark .availability-card, html.dark .trust-matrix,
html.dark .resource-card, html.dark .compliance-card, html.dark .stage-card,
html.dark .accessibility-block, html.dark .scoping-block, html.dark .faq-item {
  background: #1E293B; border-color: #334155;
}
html.dark .faq-item[open] { background: #0F172A; }
html.dark .record-title, html.dark .availability-card h3, html.dark .compliance-card h3,
html.dark .resource-card h3, html.dark .accessibility-block h3, html.dark .scoping-block h3,
html.dark .stage-card h3, html.dark .faq-item summary { color: #F1F5F9; }
html.dark .record-stats > div { background: #0F172A; border-color: #334155; }
html.dark .record-stats dd { color: #93C5FD; }
html.dark .availability-evidence, html.dark .trust-check { background: #0F172A; color: #CBD5E1; }
html.dark .compliance-note { background: #3B2F12; border-color: #78560F; color: #FDE68A; }
html.dark .record-card { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .availability-grid, .compliance-grid { grid-template-columns: repeat(2, 1fr); }
  .stage-grid, .resources-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .record-stats { grid-template-columns: repeat(2, 1fr); }
  .accessibility-columns { grid-template-columns: 1fr; gap: 20px; }
  .record-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .record-legend { text-align: left; }
}
@media (max-width: 375px) {
  .availability-grid, .compliance-grid, .stage-grid, .resources-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .resource-card, .resource-card:hover { transition: none; transform: none; }
}
@media print {
  .availability-section, .trust-section, .faq-section { padding: 24px 0; }
  .nav-top, .hero-actions, .cta-actions { display: none !important; }
}

/* ============================================================
   Glass fallback contract
   ------------------------------------------------------------
   Glass is only safe when something solid can stand in for it. Four
   situations say "no translucency" and each must land on an opaque
   surface, not on a translucent one with nothing behind it:
     1. no backdrop-filter support (older Safari, Firefox < 103)
     2. prefers-reduced-transparency — an explicit user request
     3. senior mode, this product's own large-type high-contrast mode
     4. print, where there is no light passing through the surface
   Values are overridden on the SAME token names, so every glass
   surface in styles.css and app-shell.css follows without a per-rule
   override. Selectors are :root/html.dark, never bare html: :root is
   (0,1,0) and html is (0,0,1), so a weaker selector silently loses.
   ============================================================ */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  :root { --glass-bg: #FFFFFF; --glass-bg-quiet: #F8FAFC; --glass-bg-strong: #FFFFFF; --glass-border: #E2E8F0; --glass-border-soft: #E2E8F0; --glass-scrim: rgba(15, 23, 42, 0.55); }
  html.dark { --glass-bg: #1E293B; --glass-bg-quiet: #0F172A; --glass-bg-strong: #0F172A; --glass-border: #334155; --glass-border-soft: #334155; --glass-scrim: rgba(2, 6, 23, 0.7); }
}

@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: #FFFFFF; --glass-bg-quiet: #F8FAFC; --glass-bg-strong: #FFFFFF; --glass-border: #E2E8F0; --glass-border-soft: #CBD5E1; --glass-scrim: rgba(15, 23, 42, 0.6); }
  html.dark { --glass-bg: #1E293B; --glass-bg-quiet: #0F172A; --glass-bg-strong: #0F172A; --glass-border: #475569; --glass-border-soft: #475569; --glass-scrim: rgba(2, 6, 23, 0.75); }
}

/* theme.js puts the class on <html>, app.js on <body>; cover both. */
:root.senior-mode, body.senior-mode { --glass-bg: #FFFFFF; --glass-bg-quiet: #F8FAFC; --glass-bg-strong: #FFFFFF; --glass-border: #CBD5E1; --glass-border-soft: #94A3B8; }

/* Blurring an opaque surface costs GPU and buys nothing. The shell classes
   live in app-shell.css; they are listed here because this file owns the
   tokens they consume. */
@media (prefers-reduced-transparency: reduce) {
  .sidebar, .header, .card, .modal, .modal-overlay, .toast, .dropdown-menu,
  .agmx-shell-header, .agmx-shell-nav, .agmx-card, .agmx-runtime-panel, .agmx-runtime-trigger,
  .agmx-source-badge, .agmx-gov-notice { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Print has no light passing through the page, so translucency only costs
   ink and legibility. Shadows are written as 0 0 0 transparent rather than
   none: they are composed with a second shadow in the same declaration, and
   an invalid token there discards the whole property. */
@media print {
  :root {
    --glass-bg: #FFFFFF;
    --glass-bg-quiet: #FFFFFF;
    --glass-bg-strong: #FFFFFF;
    --glass-border: #CBD5E1;
    --glass-border-soft: #94A3B8;
    --glass-edge: 0 0 0 transparent;
    --glass-shadow: 0 0 0 transparent;
    --glass-shadow-float: 0 0 0 transparent;
    --glass-ambient: none;
  }
  .sidebar, .header, .card, .modal, .modal-overlay, .toast, .dropdown-menu,
  .agmx-shell-header, .agmx-shell-nav, .agmx-card, .agmx-runtime-panel, .agmx-runtime-trigger,
  .agmx-boot-state, .agmx-shell-button { backdrop-filter: none; -webkit-backdrop-filter: none; }
}