:root {
      /* Material 3 Light: Warm Off-White Scheme */
      --md-sys-color-primary: #2563EB;
      --md-sys-color-on-primary: #FFFFFF;
      --md-sys-color-primary-container: #DBEAFE;
      --md-sys-color-on-primary-container: #1E3A8A;
      --md-sys-color-secondary: #64748B;
      --md-sys-color-tertiary: #0D9488;
      --md-sys-color-error: #F43F5E;
      --md-sys-color-surface: #F7F7F4;
      --md-sys-color-surface-container-lowest: #FFFFFF;
      --md-sys-color-surface-container-low: #FCFCFA;
      --md-sys-color-surface-container: #F1F1EC;
      --md-sys-color-surface-container-high: #ECECE6;
      --md-sys-color-surface-container-highest: #E4E4DC;
      --md-sys-color-on-surface: #1F2937;
      --md-sys-color-on-surface-variant: #6B7280;
      --md-sys-color-outline: #D1D5DB;
      --md-sys-color-outline-variant: #E5E7EB;

      /* Semantic Chart Palette (Material 3 Soft Harmony) */
      --chart-accent-blue: #3B82F6;
      --chart-accent-rose: #F43F5E;
      --chart-accent-teal: #14B8A6;
      --chart-accent-amber: #F59E0B;
      --chart-accent-green: #22C55E;
      --chart-accent-purple: #8B5CF6;
      --chart-accent-cyan: #06B6D4;
      --chart-accent-slate: #64748B;
    }

    .dark {
      /* Material 3 Dark Scheme (Persistent & Verified) */
      --md-sys-color-primary: #93C5FD;
      --md-sys-color-on-primary: #0B2A5B;
      --md-sys-color-primary-container: #1D4ED8;
      --md-sys-color-on-primary-container: #DBEAFE;
      --md-sys-color-secondary: #94A3B8;
      --md-sys-color-tertiary: #5EEAD4;
      --md-sys-color-error: #FCA5A5;
      --md-sys-color-surface: #0B1220;
      --md-sys-color-surface-container-lowest: #070B14;
      --md-sys-color-surface-container-low: #0F172A;
      --md-sys-color-surface-container: #131C31;
      --md-sys-color-surface-container-high: #1A2440;
      --md-sys-color-surface-container-highest: #232F52;
      --md-sys-color-on-surface: #E2E8F0;
      --md-sys-color-on-surface-variant: #94A3B8;
      --md-sys-color-outline: #475569;
      --md-sys-color-outline-variant: #334155;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      -webkit-tap-highlight-color: transparent;
      padding-top: env(safe-area-inset-top, 0px);
    }

    /* Native Mobile Safe Area & Glassmorphism Utilities */
    .pb-safe {
      padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
    .mobile-glass-nav {
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    }
    .dark .mobile-glass-nav {
      background: rgba(15, 23, 42, 0.90);
      border-color: rgba(51, 65, 85, 0.6);
    }
    .touch-haptic {
      transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.12s;
    }
    .touch-haptic:active {
      transform: scale(0.92);
      opacity: 0.8;
    }

    .font-heading {
      font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    }
    .font-body {
      font-family: 'Inter', system-ui, sans-serif;
    }

    /* M3 Surface & Component Utility Classes */
    .m3-surface {
      background-color: var(--md-sys-color-surface);
      color: var(--md-sys-color-on-surface);
    }
    .m3-admin-card {
      background-color: var(--md-sys-color-surface-container-lowest);
      border-color: var(--md-sys-color-outline-variant);
      color: var(--md-sys-color-on-surface);
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
    }
    .m3-admin-card-low {
      background-color: var(--md-sys-color-surface-container-low);
      border-color: var(--md-sys-color-outline-variant);
      color: var(--md-sys-color-on-surface);
    }
    .m3-admin-input {
      background-color: var(--md-sys-color-surface-container-lowest);
      border-color: var(--md-sys-color-outline);
      color: var(--md-sys-color-on-surface);
    }
    .m3-admin-input:focus {
      border-color: var(--md-sys-color-primary);
      outline: 2px solid var(--md-sys-color-primary-container);
    }
    .m3-admin-input option {
      background-color: var(--md-sys-color-surface-container-lowest);
      color: var(--md-sys-color-on-surface);
    }
    .m3-table-header {
      background-color: var(--md-sys-color-surface-container);
      color: var(--md-sys-color-on-surface-variant);
      border-color: var(--md-sys-color-outline-variant);
    }
    .m3-table-row {
      border-color: var(--md-sys-color-outline-variant);
      color: var(--md-sys-color-on-surface);
    }
    .m3-table-row:hover {
      background-color: var(--md-sys-color-surface-container-low);
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #f1f5f9;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 9999px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }
    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: #1e293b;
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #475569;
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #64748b;
    }

    /* Siren Animation for Logo */
    @keyframes sirenPulse {
      0%, 100% { background: linear-gradient(135deg, #7f1d1d, #991b1b); box-shadow: 0 0 8px rgba(153,27,27,0.4); }
      25% { background: linear-gradient(135deg, #991b1b, #dc2626); box-shadow: 0 0 18px rgba(220,38,38,0.7); }
      50% { background: linear-gradient(135deg, #dc2626, #ef4444); box-shadow: 0 0 24px rgba(239,68,68,0.9); }
      75% { background: linear-gradient(135deg, #b91c1c, #991b1b); box-shadow: 0 0 14px rgba(185,28,28,0.6); }
    }
    .siren-logo {
      animation: sirenPulse 1.8s ease-in-out infinite;
    }

    /* Dark mode transitions */
    body, header, main, aside, section, div, input, select, textarea, button, table, th, td {
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

    /* Dark mode overrides for public view */
    .dark body { background-color: #0f172a; color: #e2e8f0; }
    .dark header.public-header { background-color: rgba(15,23,42,0.97); border-color: #1e293b; }
    .dark .card-light { background-color: #1e293b; border-color: #334155; }
    .dark .card-light h2, .dark .card-light h3, .dark .card-light h4, .dark .card-light label, .dark .card-light span.font-bold { color: #f1f5f9; }
    .dark .card-light p, .dark .card-light span { color: #94a3b8; }
    .dark .input-light { background-color: #0f172a; border-color: #334155; color: #e2e8f0; }
    .dark .input-light:focus { background-color: #1e293b; border-color: #3b82f6; }
    .dark .input-light::placeholder { color: #64748b; }
    .dark .select-light { background-color: #0f172a; border-color: #334155; color: #e2e8f0; }
    .dark .drop-zone-light { border-color: #334155; background-color: #0f172a; }
    .dark .drop-zone-light:hover { border-color: #3b82f6; background-color: rgba(59,130,246,0.05); }
    .dark .tab-inactive-light { color: #94a3b8; }
    .dark .tab-inactive-light:hover { color: #e2e8f0; }
    .dark .brand-name-dark { color: #f1f5f9; }
    .dark .badge-light { background-color: rgba(59,130,246,0.15); color: #93c5fd; border-color: rgba(59,130,246,0.3); }
    .dark .tagline-light { color: #64748b; }
    .dark .gps-bar-light { background-color: rgba(30,41,59,0.9); border-color: #334155; }
    .dark .gps-text-light { color: #94a3b8; }
    .dark .shadow-light { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.4); }
    .dark .ikm-card-light { background: linear-gradient(to bottom right, rgba(245,158,11,0.08), rgba(245,158,11,0.03), #1e293b); border-color: rgba(245,158,11,0.25); }
    .dark .chart-card-light { background-color: #1e293b; border-color: #334155; }
    .dark .track-result-light { border-color: #334155; }
    .dark .track-bg-light { background-color: #0f172a; border-color: #334155; }
    .dark .step-inactive { background-color: #334155; color: #94a3b8; }
    .dark .track-line-bg { background-color: #334155; }
    .dark .info-hint-light { background-color: rgba(59,130,246,0.1); color: #93c5fd; }
    .dark .drop-icon-bg { background-color: #1e293b; border-color: #334155; }
    .dark .flow-card-light { background-color: #1e293b; border-color: #334155; }
    .dark .flow-img-border { border-color: #334155; background-color: #0f172a; }