/* AV Design System 4-compatible tokens (aligned with ui.qdev.run AV DS foundation). */

:root {
  --p-neutral-0: #ffffff;
  --p-neutral-25: #fafbfc;
  --p-neutral-50: #f5f7f9;
  --p-neutral-75: #eef1f4;
  --p-neutral-100: #e6eaee;
  --p-neutral-200: #d4dae1;
  --p-neutral-300: #b9c2cb;
  --p-neutral-400: #8d99a5;
  --p-neutral-500: #64707d;
  --p-neutral-600: #475361;
  --p-neutral-700: #2e3846;
  --p-neutral-800: #1a222e;
  --p-neutral-900: #0f141c;
  --p-neutral-950: #070a10;
  --p-blue-50: #eff6ff;
  --p-blue-100: #dbeafe;
  --p-blue-200: #bfdbfe;
  --p-blue-300: #93c5fd;
  --p-blue-400: #60a5fa;
  --p-blue-500: #3b82f6;
  --p-blue-600: #2563eb;
  --p-blue-700: #1d4ed8;
  --p-blue-800: #1e40af;
  --p-blue-900: #1e3a8a;
  --p-emerald-500: #10b981;
  --p-emerald-600: #059669;
  --p-emerald-700: #047857;
  --p-amber-400: #fbbf24;
  --p-amber-500: #f59e0b;
  --p-amber-600: #d97706;
  --p-rose-500: #f43f5e;
  --p-rose-600: #e11d48;
  --p-red-500: #ef4444;
  --p-red-600: #dc2626;
  --p-red-700: #b91c1c;
  --p-violet-500: #8b5cf6;
  --p-violet-400: #a78bfa;
  --p-violet-600: #7c3aed;
  --p-cyan-400: #38bdf8;
  --p-cyan-500: #06b6d4;
  --p-teal-500: #14b8a6;
  --p-pink-400: #f472b6;
  --p-pink-500: #ec4899;
  --p-slate-400: #94a3b8;
  --p-orange-500: #f97316;
  --p-orange-600: #ea580c;
  --p-paper-cream: #f5f2ea;
  --p-paper-warm: #ebe6d9;
  --p-paper-deep: #e0d9c5;
  --p-ink: #15130f;
  --p-ink-muted: #5a554b;
  --p-ink-faint: #8a8578;
  --p-rule: #cfc7b2;
  --p-editorial-navy: #0f4c81;
  --p-editorial-green: #2e6f4a;
  --p-editorial-brick: #b23b2b;
  --p-gold-paper-bg: #f8f5ee;
  --p-gold-paper-card: #ebe4d4;
  --p-gold-paper-rule: #dccfb3;
  --p-gold: #c89b37;
  --p-gold-deep: #a8832b;
  --p-terracotta: #d17a2a;
  --p-terracotta-deep: #b25f1f;
  --p-cyber-void: #0a0e17;
  --p-cyber-panel: #141c2a;
  --p-cyber-rule: #2a3a4e;
  --p-cyber-muted: #1e293b;
  --p-cyber-text: #e8edf5;
  --p-cyber-text-dim: #94a3b8;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  --radius: var(--radius-md);
  --motion-duration-instant: 80ms;
  --motion-duration-fast: .14s;
  --motion-duration-base: .2s;
  --motion-duration-slow: .32s;
  --motion-duration-slower: .5s;
  --motion-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --motion-ease-emphasised: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-decelerate: cubic-bezier(0, 0, .2, 1);
  --motion-ease-accelerate: cubic-bezier(.4, 0, 1, 1);
  --motion-transition: var(--motion-duration-base) var(--motion-ease-emphasised);
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-drawer: 1200;
  --z-modal: 1300;
  --z-popover: 1400;
  --z-toast: 1500;
  --z-tooltip: 1600;
  --space-0: 0;
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --font-sans: Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --font-serif: Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-display: var(--font-sans);
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-tight: -.02em;
  --tracking-normal: 0;
  --tracking-wide: .04em;
  --tracking-kicker: .12em;
}

[data-theme=light] {
  --color-bg: var(--p-neutral-25);
  --color-bg-subtle: var(--p-neutral-50);
  --color-surface: var(--p-neutral-0);
  --color-surface-raised: var(--p-neutral-0);
  --color-surface-sunken: var(--p-neutral-75);
  --color-surface-inverse: var(--p-neutral-900);
  --color-surface-overlay: color-mix(in oklab, var(--p-neutral-900), transparent 40%);
  --color-text: var(--p-neutral-900);
  --color-text-muted: var(--p-neutral-500);
  --color-text-faint: var(--p-neutral-400);
  --color-text-inverse: var(--p-neutral-0);
  --color-text-on-accent: var(--p-neutral-0);
  --color-border: var(--p-neutral-200);
  --color-border-strong: var(--p-neutral-300);
  --color-border-subtle: var(--p-neutral-100);
  --color-divider: var(--p-neutral-100);
  --color-accent: var(--p-blue-600);
  --color-accent-hover: var(--p-blue-700);
  --color-accent-active: var(--p-blue-800);
  --color-accent-subtle: var(--p-blue-50);
  --color-accent-muted: var(--p-blue-100);
  --color-accent-strong: var(--p-blue-800);
  --color-accent-contrast: var(--p-neutral-0);
  --color-success: var(--p-emerald-600);
  --color-success-hover: var(--p-emerald-700);
  --color-success-subtle: color-mix(in oklab, var(--p-emerald-500), white 88%);
  --color-success-muted: color-mix(in oklab, var(--p-emerald-500), white 70%);
  --color-success-contrast: var(--p-neutral-0);
  --color-warning: var(--p-amber-500);
  --color-warning-hover: var(--p-amber-600);
  --color-warning-subtle: color-mix(in oklab, var(--p-amber-500), white 88%);
  --color-warning-muted: color-mix(in oklab, var(--p-amber-500), white 70%);
  --color-warning-contrast: var(--p-neutral-900);
  --color-danger: var(--p-red-600);
  --color-danger-hover: var(--p-red-700);
  --color-danger-subtle: color-mix(in oklab, var(--p-red-500), white 88%);
  --color-danger-muted: color-mix(in oklab, var(--p-red-500), white 70%);
  --color-danger-contrast: var(--p-neutral-0);
  --color-info: var(--p-blue-500);
  --color-info-hover: var(--p-blue-600);
  --color-info-subtle: var(--p-blue-50);
  --color-info-muted: var(--p-blue-100);
  --color-info-contrast: var(--p-neutral-0);
  --color-focus-ring: var(--p-blue-500);
  --chart-1: var(--p-blue-600);
  --chart-2: var(--p-emerald-500);
  --chart-3: var(--p-amber-500);
  --chart-4: var(--p-violet-500);
  --chart-5: var(--p-rose-500);
  --chart-6: var(--p-cyan-500);
  --chart-7: var(--p-orange-500);
  --chart-8: var(--p-pink-500);
  --chart-blue: var(--p-blue-400);
  --chart-cyan: var(--p-cyan-400);
  --chart-amber: var(--p-amber-500);
  --chart-violet: var(--p-violet-400);
  --chart-pink: var(--p-pink-400);
  --chart-green: var(--p-emerald-500);
  --chart-red: var(--p-red-500);
  --chart-neutral: var(--p-slate-400);
  --layer-weather: var(--p-cyan-400);
  --layer-hydro: var(--p-blue-500);
  --layer-seismic: var(--p-red-500);
  --layer-financial: var(--p-violet-500);
  --layer-media: var(--p-pink-500);
  --layer-epi: var(--p-rose-500);
  --layer-solar: var(--p-amber-400);
  --layer-space: var(--p-violet-600);
  --layer-economy: var(--p-emerald-500);
  --score-high: var(--color-success);
  --score-mid: var(--color-warning);
  --score-low: var(--color-danger);
  --shadow-xs: 0 1px 2px rgb(15 20 28 / .04);
  --shadow-sm: 0 1px 3px rgb(15 20 28 / .06), 0 1px 2px rgb(15 20 28 / .04);
  --shadow-md: 0 4px 8px rgb(15 20 28 / .06), 0 2px 4px rgb(15 20 28 / .04);
  --shadow-lg: 0 8px 20px rgb(15 20 28 / .08), 0 4px 8px rgb(15 20 28 / .04);
  --shadow-xl: 0 16px 32px rgb(15 20 28 / .1);
  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--color-focus-ring), transparent 70%);
  --background: 216 20% 97%;
  --foreground: 220 25% 10%;
  --card: 216 18% 98%;
  --card-foreground: 220 25% 10%;
  --card-border: 216 12% 92%;
  --popover: 216 18% 96%;
  --popover-foreground: 220 25% 10%;
  --popover-border: 216 12% 88%;
  --primary: 217 91% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 216 14% 91%;
  --secondary-foreground: 220 25% 10%;
  --muted: 216 12% 92%;
  --muted-foreground: 216 10% 45%;
  --accent: 210 16% 90%;
  --accent-foreground: 220 25% 10%;
  --destructive: 0 72% 48%;
  --destructive-foreground: 0 0% 99%;
  --border: 216 12% 88%;
  --input: 216 12% 78%;
  --ring: 217 91% 53%;
  --sidebar: 218 22% 95%;
  --sidebar-foreground: 220 25% 10%;
  --sidebar-border: 216 12% 90%;
  --sidebar-primary: 217 91% 53%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 216 14% 88%;
  --sidebar-accent-foreground: 220 25% 10%;
  --sidebar-ring: 217 91% 53%;
}

[data-theme=dark] {
  --color-bg: var(--p-neutral-950);
  --color-bg-subtle: var(--p-neutral-900);
  --color-surface: var(--p-neutral-800);
  --color-surface-raised: var(--p-neutral-700);
  --color-surface-sunken: var(--p-neutral-900);
  --color-surface-inverse: var(--p-neutral-50);
  --color-surface-overlay: color-mix(in oklab, black, transparent 30%);
  --color-text: var(--p-neutral-50);
  --color-text-muted: var(--p-neutral-400);
  --color-text-faint: var(--p-neutral-500);
  --color-text-inverse: var(--p-neutral-900);
  --color-text-on-accent: var(--p-neutral-0);
  --color-border: var(--p-neutral-700);
  --color-border-strong: var(--p-neutral-600);
  --color-border-subtle: var(--p-neutral-800);
  --color-divider: var(--p-neutral-800);
  --color-accent: var(--p-blue-500);
  --color-accent-hover: var(--p-blue-400);
  --color-accent-active: var(--p-blue-300);
  --color-accent-subtle: color-mix(in oklab, var(--p-blue-500), black 70%);
  --color-accent-muted: color-mix(in oklab, var(--p-blue-500), black 55%);
  --color-accent-strong: var(--p-blue-300);
  --color-accent-contrast: var(--p-neutral-950);
  --color-success: var(--p-emerald-500);
  --color-success-hover: var(--p-emerald-600);
  --color-warning: var(--p-amber-400);
  --color-warning-hover: var(--p-amber-500);
  --color-danger: var(--p-red-500);
  --color-danger-hover: var(--p-red-600);
  --color-info: var(--p-blue-400);
  --color-info-hover: var(--p-blue-500);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .4), 0 1px 2px rgb(0 0 0 / .3);
  --shadow-md: 0 4px 8px rgb(0 0 0 / .4), 0 2px 4px rgb(0 0 0 / .25);
  --shadow-lg: 0 8px 20px rgb(0 0 0 / .5);
  --shadow-xl: 0 16px 32px rgb(0 0 0 / .6);
  --background: 220 18% 8%;
  --foreground: 216 12% 92%;
  --card: 220 16% 10%;
  --card-foreground: 216 12% 92%;
  --primary: 217 91% 65%;
  --primary-foreground: 0 0% 100%;
  --muted: 220 10% 22%;
  --muted-foreground: 216 8% 55%;
  --border: 220 12% 18%;
  --input: 220 12% 28%;
  --ring: 217 91% 65%;
}

.theme-institutional {
  --color-bg: var(--p-paper-cream);
  --color-bg-subtle: var(--p-paper-warm);
  --color-surface: var(--p-neutral-0);
  --color-surface-raised: var(--p-neutral-0);
  --color-surface-sunken: var(--p-paper-warm);
  --color-text: var(--p-ink);
  --color-text-muted: var(--p-ink-muted);
  --color-text-faint: var(--p-ink-faint);
  --color-border: var(--p-rule);
  --color-border-strong: var(--p-paper-deep);
  --color-border-subtle: var(--p-paper-warm);
  --color-divider: var(--p-paper-warm);
  --color-accent: var(--p-editorial-navy);
  --color-accent-hover: color-mix(in oklab, var(--p-editorial-navy), black 10%);
  --color-accent-active: color-mix(in oklab, var(--p-editorial-navy), black 20%);
  --color-accent-subtle: color-mix(in oklab, var(--p-editorial-navy), white 88%);
  --color-accent-muted: color-mix(in oklab, var(--p-editorial-navy), white 75%);
  --color-accent-contrast: var(--p-paper-cream);
  --color-success: var(--p-editorial-green);
  --color-danger: var(--p-editorial-brick);
  --color-warning: var(--p-amber-600);
  --score-high: var(--p-editorial-green);
  --score-mid: var(--p-amber-600);
  --score-low: var(--p-editorial-brick);
  --chart-1: var(--p-editorial-navy);
  --chart-2: var(--p-editorial-green);
  --chart-3: var(--p-amber-600);
  --chart-4: var(--p-violet-600);
  --chart-5: var(--p-editorial-brick);
  --radius: var(--radius-sm);
  --font-sans: Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --paper: var(--p-paper-cream);
  --paper-2: var(--p-paper-warm);
  --paper-3: var(--p-paper-deep);
  --ink: var(--p-ink);
  --ink-muted: var(--p-ink-muted);
  --ink-faint: var(--p-ink-faint);
  --rule: var(--p-rule);
  --background: 42 27% 94%;
  --foreground: 36 14% 7%;
  --card: 0 0% 100%;
  --card-foreground: 36 14% 7%;
  --primary: 207 79% 28%;
  --primary-foreground: 42 27% 94%;
  --muted: 40 27% 88%;
  --muted-foreground: 34 7% 32%;
  --border: 40 21% 79%;
  --ring: 207 79% 28%;
}

.theme-cyber-dark {
  --color-bg: var(--p-cyber-void);
  --color-bg-subtle: var(--p-cyber-panel);
  --color-surface: var(--p-cyber-panel);
  --color-surface-raised: color-mix(in oklab, var(--p-cyber-panel), white 5%);
  --color-surface-sunken: var(--p-cyber-void);
  --color-surface-inverse: var(--p-cyber-text);
  --color-text: var(--p-cyber-text);
  --color-text-muted: var(--p-cyber-text-dim);
  --color-text-faint: color-mix(in oklab, var(--p-cyber-text-dim), var(--p-cyber-panel) 40%);
  --color-text-inverse: var(--p-cyber-void);
  --color-border: var(--p-cyber-rule);
  --color-border-strong: color-mix(in oklab, var(--p-cyber-rule), white 15%);
  --color-border-subtle: var(--p-cyber-muted);
  --color-divider: var(--p-cyber-muted);
  --color-accent: var(--p-teal-500);
  --color-accent-hover: color-mix(in oklab, var(--p-teal-500), white 10%);
  --color-accent-active: color-mix(in oklab, var(--p-teal-500), white 20%);
  --color-accent-subtle: color-mix(in oklab, var(--p-teal-500), var(--p-cyber-void) 75%);
  --color-accent-muted: color-mix(in oklab, var(--p-teal-500), var(--p-cyber-void) 50%);
  --color-accent-contrast: var(--p-cyber-void);
  --color-success: var(--p-emerald-500);
  --color-warning: var(--p-amber-400);
  --color-danger: var(--p-rose-500);
  --color-info: var(--p-cyan-400);
  --chart-1: var(--p-teal-500);
  --chart-2: var(--p-emerald-500);
  --chart-3: var(--p-violet-500);
  --chart-4: var(--p-amber-500);
  --chart-5: var(--p-rose-500);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .5);
  --shadow-md: 0 4px 8px rgb(0 0 0 / .5);
  --shadow-lg: 0 8px 20px rgb(0 0 0 / .6);
  --shadow-xl: 0 16px 32px rgb(0 0 0 / .7);
  color-scheme:dark;
  --background: 218 39% 7%;
  --foreground: 215 36% 93%;
  --card: 217 33% 12%;
  --card-foreground: 215 36% 93%;
  --primary: 172 82% 40%;
  --primary-foreground: 218 39% 7%;
  --muted: 215 28% 17%;
  --muted-foreground: 214 20% 66%;
  --border: 214 30% 23%;
  --ring: 172 82% 40%;
}

.theme-golden-paper {
  --color-bg: var(--p-gold-paper-bg);
  --color-bg-subtle: var(--p-gold-paper-card);
  --color-surface: var(--p-neutral-0);
  --color-surface-raised: var(--p-neutral-0);
  --color-surface-sunken: var(--p-gold-paper-card);
  --color-text: var(--p-ink);
  --color-text-muted: color-mix(in oklab, var(--p-ink), var(--p-gold-paper-bg) 40%);
  --color-text-faint: color-mix(in oklab, var(--p-ink), var(--p-gold-paper-bg) 65%);
  --color-border: var(--p-gold-paper-rule);
  --color-border-strong: color-mix(in oklab, var(--p-gold-paper-rule), black 15%);
  --color-border-subtle: var(--p-gold-paper-card);
  --color-divider: var(--p-gold-paper-card);
  --color-accent: var(--p-gold);
  --color-accent-hover: var(--p-gold-deep);
  --color-accent-active: color-mix(in oklab, var(--p-gold-deep), black 15%);
  --color-accent-subtle: color-mix(in oklab, var(--p-gold), white 85%);
  --color-accent-muted: color-mix(in oklab, var(--p-gold), white 70%);
  --color-accent-contrast: var(--p-gold-paper-bg);
  --color-success: var(--p-editorial-green);
  --color-warning: var(--p-terracotta);
  --color-danger: var(--p-terracotta-deep);
  --chart-1: var(--p-gold);
  --chart-2: var(--p-terracotta);
  --chart-3: var(--p-editorial-green);
  --chart-4: color-mix(in oklab, var(--p-ink), var(--p-gold-paper-card) 30%);
  --chart-5: var(--p-terracotta-deep);
  --background: 40 30% 96%;
  --foreground: 30 16% 14%;
  --card: 0 0% 100%;
  --card-foreground: 30 16% 14%;
  --primary: 38 59% 50%;
  --primary-foreground: 40 30% 96%;
  --muted: 40 24% 90%;
  --muted-foreground: 30 10% 40%;
  --border: 36 24% 83%;
  --ring: 38 59% 50%;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-slower: 0ms;
  }
}

/* AV DS 4 additive foundation layer.
   These aliases preserve existing semantic tokens while enabling newer cards,
   status badges, fields, and evidence-first tables in legacy Echo pages. */
:root {
  --avds-surface-base: var(--color-bg);
  --avds-surface-card: var(--color-surface);
  --avds-surface-raised: var(--color-surface-raised);
  --avds-surface-sunken: var(--color-surface-sunken);
  --avds-surface-overlay: var(--color-surface-overlay);
  --avds-text-primary: var(--color-text);
  --avds-text-muted: var(--color-text-muted);
  --avds-text-faint: var(--color-text-faint);
  --avds-border: var(--color-border);
  --avds-border-strong: var(--color-border-strong);
  --avds-border-subtle: var(--color-border-subtle);
  --avds-focus-color: var(--color-accent);
  --avds-focus-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px color-mix(in oklab, var(--color-accent), transparent 8%);
  --avds-focus-shadow-inset: inset 0 0 0 1px var(--color-accent), 0 0 0 2px color-mix(in oklab, var(--color-accent), transparent 72%);
  --avds-density-compact-y: 8px;
  --avds-density-compact-x: 10px;
  --avds-density-regular-y: 12px;
  --avds-density-regular-x: 16px;
  --avds-density-rich-y: 20px;
  --avds-density-rich-x: 20px;
  --avds-card-radius: var(--radius-md);
  --avds-card-border: 1px solid var(--avds-border);
  --avds-card-shadow: var(--shadow-xs);
  --avds-card-shadow-hover: var(--shadow-md);
  --avds-status-active-bg: var(--color-success-subtle);
  --avds-status-active-text: var(--color-success);
  --avds-status-active-border: var(--color-success-muted);
  --avds-status-review-bg: var(--color-warning-subtle);
  --avds-status-review-text: color-mix(in oklab, var(--color-warning), var(--color-text) 18%);
  --avds-status-review-border: var(--color-warning-muted);
  --avds-status-info-bg: var(--color-info-subtle);
  --avds-status-info-text: var(--color-info);
  --avds-status-info-border: var(--color-info-muted);
  --avds-status-danger-bg: var(--color-danger-subtle);
  --avds-status-danger-text: var(--color-danger);
  --avds-status-danger-border: var(--color-danger-muted);
  --avds-status-neutral-bg: var(--color-bg-subtle);
  --avds-status-neutral-text: var(--color-text-muted);
  --avds-status-neutral-border: var(--color-border);
  --avds-chart-grid: color-mix(in oklab, var(--color-border), transparent 35%);
  --avds-chart-empty-bg: color-mix(in oklab, var(--color-bg-subtle), transparent 12%);
  --avds-editorial-accent-font: var(--font-serif);
}

.avds-focusable:focus-visible {
  outline: none;
  box-shadow: var(--avds-focus-shadow);
}

.avds-card {
  position: relative;
  background: var(--avds-surface-card);
  color: var(--avds-text-primary);
  border: var(--avds-card-border);
  border-radius: var(--avds-card-radius);
  box-shadow: var(--avds-card-shadow);
}

.avds-card[data-density="compact"] { padding: var(--avds-density-compact-y) var(--avds-density-compact-x); }
.avds-card[data-density="regular"] { padding: var(--avds-density-regular-y) var(--avds-density-regular-x); }
.avds-card[data-density="rich"] { padding: var(--avds-density-rich-y) var(--avds-density-rich-x); }
.avds-card[data-selected="true"] {
  border-color: color-mix(in oklab, var(--color-accent), var(--color-border) 24%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-accent), transparent 18%), var(--shadow-xs);
}
.avds-card[data-selected="true"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--color-accent);
}

.avds-service-status-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--avds-border);
  border-radius: var(--radius-lg);
  background: var(--avds-surface-card);
  box-shadow: var(--shadow-xs);
}

.avds-service-status-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.avds-service-status-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background: color-mix(in oklab, var(--color-accent), transparent 88%);
  color: var(--color-accent);
}

.avds-service-status-card[data-kind="analytics"] .avds-service-status-card__icon {
  background: color-mix(in oklab, var(--chart-violet, var(--color-accent)), transparent 88%);
  color: var(--chart-violet, var(--color-accent));
}

.avds-service-status-card[data-kind="media"] .avds-service-status-card__icon {
  background: color-mix(in oklab, var(--chart-pink, var(--color-accent)), transparent 88%);
  color: var(--chart-pink, var(--color-accent));
}

.avds-service-status-card[data-kind="ai"] .avds-service-status-card__icon {
  background: color-mix(in oklab, var(--color-info), transparent 88%);
  color: var(--color-info);
}

.avds-service-status-card__title-wrap {
  min-width: 0;
  flex: 1;
}

.avds-service-status-card__title {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  font-weight: 600;
  color: var(--avds-text-primary);
}

.avds-service-status-card__description {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--avds-text-muted);
}

.avds-service-status-card__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--avds-status-neutral-bg);
  color: var(--avds-status-neutral-text);
}

.avds-service-status-card[data-status="healthy"] .avds-service-status-card__status,
.avds-service-status-card[data-status="running"] .avds-service-status-card__status {
  background: var(--avds-status-active-bg);
  color: var(--avds-status-active-text);
}

.avds-service-status-card[data-status="warning"] .avds-service-status-card__status {
  background: var(--avds-status-review-bg);
  color: var(--avds-status-review-text);
}

.avds-service-status-card[data-status="unhealthy"] .avds-service-status-card__status,
.avds-service-status-card[data-status="stopped"] .avds-service-status-card__status {
  background: var(--avds-status-danger-bg);
  color: var(--avds-status-danger-text);
}

.avds-service-status-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.avds-service-status-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--avds-border-subtle);
  font-size: 11px;
}

.avds-service-status-card__container {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  color: var(--avds-text-muted);
}

.avds-service-status-card__port {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-accent);
}

.avds-service-status-card--compact {
  padding: var(--space-3);
}

.avds-filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.avds-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4375rem 0.8125rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--avds-border);
  background: var(--avds-surface-card);
  color: var(--avds-text-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--motion-transition), border-color var(--motion-transition), color var(--motion-transition);
}

.avds-filter-chip:hover {
  border-color: var(--avds-border-strong);
  color: var(--avds-text-primary);
}

.avds-filter-chip.is-active {
  border-color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent), transparent 90%);
  color: var(--color-accent);
}

.avds-filter-chip:focus-visible {
  outline: none;
  box-shadow: var(--avds-focus-shadow);
}

.avds-filter-chip__count {
  opacity: 0.72;
}

.avds-document-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--avds-border);
  border-inline-start: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--avds-surface-card);
  box-shadow: var(--shadow-xs);
}

.avds-document-card[data-tone="success"] {
  border-inline-start-color: var(--color-success);
}

.avds-document-card[data-tone="warning"] {
  border-inline-start-color: var(--color-warning);
}

.avds-document-card[data-tone="danger"] {
  border-inline-start-color: var(--color-danger);
}

.avds-document-card[data-tone="info"] {
  border-inline-start-color: var(--color-info);
}

.avds-document-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.avds-document-card__type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.avds-document-card__date {
  font-size: 11px;
  color: var(--avds-text-muted);
  font-variant-numeric: tabular-nums;
}

.avds-document-card__title {
  margin: 0;
  font-size: 15px;
  line-height: var(--leading-snug);
  font-weight: 600;
  color: var(--avds-text-primary);
}

.avds-document-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.avds-document-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  font-size: 12px;
  color: var(--avds-text-muted);
}

.avds-document-card__source {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avds-document-card--compact {
  padding: var(--space-3);
}

.avds-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-4);
  border: 1px solid var(--avds-action-border, var(--avds-border));
  border-radius: var(--radius-md);
  background: var(--avds-action-bg, var(--avds-surface-card));
  color: var(--avds-action-text, var(--avds-text-primary));
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.avds-action:hover {
  transform: translateY(-1px);
  color: var(--avds-action-text-hover, var(--color-accent));
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.avds-action:focus-visible {
  outline: none;
  box-shadow: var(--avds-focus-shadow);
}

.avds-action--primary {
  --avds-action-bg: var(--color-accent);
  --avds-action-border: var(--color-accent);
  --avds-action-text: var(--color-accent-contrast);
  --avds-action-text-hover: var(--color-accent-contrast);
}

.avds-action--secondary {
  --avds-action-bg: var(--avds-surface-card);
  --avds-action-border: var(--avds-border);
  --avds-action-text: var(--avds-text-primary);
  --avds-action-text-hover: var(--color-accent);
}

.avds-action--ghost {
  --avds-action-bg: transparent;
  --avds-action-border: transparent;
  --avds-action-text: var(--avds-text-muted);
}

.avds-action__icon {
  font-size: 18px;
}

.avds-metric-card {
  --avds-metric-accent: var(--color-accent);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: 92px;
  padding: var(--space-4);
  background: var(--avds-surface-card);
  color: var(--avds-text-primary);
  border: var(--avds-card-border);
  border-radius: var(--avds-card-radius);
  box-shadow: var(--avds-card-shadow);
}

.avds-metric-card[data-tone="success"] { --avds-metric-accent: var(--color-success); }
.avds-metric-card[data-tone="warning"] { --avds-metric-accent: var(--color-warning); }
.avds-metric-card[data-tone="danger"] { --avds-metric-accent: var(--color-danger); }
.avds-metric-card[data-tone="info"] { --avds-metric-accent: var(--color-info); }

.avds-metric-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--avds-metric-accent), transparent 86%);
  color: var(--avds-metric-accent);
}

.avds-metric-card__icon .material-icons {
  font-size: 21px;
}

.avds-metric-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.avds-metric-card__value {
  color: var(--avds-text-primary);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 850;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avds-metric-card__label {
  margin-top: var(--space-1);
  color: var(--avds-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--leading-snug);
}

.avds-metric-card__meta {
  margin-top: 3px;
  overflow: hidden;
  color: var(--avds-text-muted);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
}

.avds-source-tile {
  --avds-source-accent: var(--color-accent);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-3);
  border: var(--avds-card-border);
  border-radius: var(--avds-card-radius);
  background: var(--avds-surface-card);
  color: var(--avds-text-primary);
  text-decoration: none;
  box-shadow: var(--avds-card-shadow);
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.avds-source-tile:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--avds-source-accent), var(--avds-border) 45%);
  color: var(--avds-text-primary);
  box-shadow: var(--avds-card-shadow-hover);
}

.avds-source-tile[data-tone="success"] { --avds-source-accent: var(--color-success); }
.avds-source-tile[data-tone="warning"] { --avds-source-accent: var(--color-warning); }
.avds-source-tile[data-tone="danger"] { --avds-source-accent: var(--color-danger); }
.avds-source-tile[data-tone="info"] { --avds-source-accent: var(--color-info); }

.avds-source-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--avds-source-accent), transparent 88%);
  color: var(--avds-source-accent);
}

.avds-source-tile__icon .material-icons {
  font-size: 20px;
}

.avds-source-tile__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.avds-source-tile__name {
  color: var(--avds-text-primary);
  font-size: var(--text-sm);
  font-weight: 850;
  line-height: var(--leading-snug);
}

.avds-source-tile__meta {
  color: var(--avds-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avds-source-tile__arrow {
  color: var(--avds-text-faint);
  font-size: 18px;
}

.avds-state-panel {
  --avds-state-accent: var(--color-accent);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--avds-card-border);
  border-radius: var(--avds-card-radius);
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--avds-state-accent), transparent 92%), transparent 42%),
    var(--avds-surface-card);
  color: var(--avds-text-primary);
  box-shadow: var(--avds-card-shadow);
}

.avds-state-panel[data-tone="success"] { --avds-state-accent: var(--color-success); }
.avds-state-panel[data-tone="warning"] { --avds-state-accent: var(--color-warning); }
.avds-state-panel[data-tone="danger"],
.avds-state-panel[data-tone="error"] { --avds-state-accent: var(--color-danger); }
.avds-state-panel[data-tone="info"] { --avds-state-accent: var(--color-info); }

.avds-state-panel--compact {
  padding: var(--space-4);
}

.avds-state-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--avds-state-accent), transparent 86%);
  color: var(--avds-state-accent);
  font-size: 24px;
}

.avds-state-panel__body {
  min-width: 0;
}

.avds-state-panel__title {
  margin: 0;
  color: var(--avds-text-primary);
  font-size: var(--text-lg);
  font-weight: 850;
  line-height: var(--leading-tight);
}

.avds-state-panel__message {
  margin: var(--space-1) 0 0;
  color: var(--avds-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.avds-state-panel__action {
  margin-top: var(--space-3);
}

.avds-badge,
.avds-status-badge,
.avds-source-badge,
.avds-confidence-badge {
  border: 1px solid var(--avds-tone-border, var(--avds-status-neutral-border));
  background: var(--avds-tone-bg, var(--avds-status-neutral-bg));
  color: var(--avds-tone-text, var(--avds-status-neutral-text));
  letter-spacing: 0;
}
.avds-badge[data-tone="success"],
.avds-status-badge[data-tone="success"],
.avds-source-badge[data-tone="success"],
.avds-confidence-badge[data-tone="high"] {
  --avds-tone-bg: var(--avds-status-active-bg);
  --avds-tone-text: var(--avds-status-active-text);
  --avds-tone-border: var(--avds-status-active-border);
}
.avds-badge[data-tone="warning"],
.avds-status-badge[data-tone="warning"],
.avds-source-badge[data-tone="warning"],
.avds-confidence-badge[data-tone="medium"] {
  --avds-tone-bg: var(--avds-status-review-bg);
  --avds-tone-text: var(--avds-status-review-text);
  --avds-tone-border: var(--avds-status-review-border);
}
.avds-badge[data-tone="danger"],
.avds-status-badge[data-tone="danger"],
.avds-source-badge[data-tone="danger"],
.avds-confidence-badge[data-tone="low"] {
  --avds-tone-bg: var(--avds-status-danger-bg);
  --avds-tone-text: var(--avds-status-danger-text);
  --avds-tone-border: var(--avds-status-danger-border);
}
.avds-badge[data-tone="info"],
.avds-status-badge[data-tone="info"],
.avds-source-badge[data-tone="info"] {
  --avds-tone-bg: var(--avds-status-info-bg);
  --avds-tone-text: var(--avds-status-info-text);
  --avds-tone-border: var(--avds-status-info-border);
}
.avds-badge[data-tone="neutral"],
.avds-status-badge[data-tone="neutral"],
.avds-source-badge[data-tone="neutral"],
.avds-confidence-badge[data-tone="unknown"] {
  --avds-tone-bg: var(--avds-status-neutral-bg);
  --avds-tone-text: var(--avds-status-neutral-text);
  --avds-tone-border: var(--avds-status-neutral-border);
}

.avds-field {
  border: 1px solid var(--avds-border);
  background: var(--avds-surface-card);
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.avds-field:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--avds-focus-shadow-inset);
}
.avds-field[data-state="success"] {
  border-color: var(--color-success);
  background: color-mix(in oklab, var(--color-success-subtle), var(--color-surface) 74%);
}
.avds-field[data-state="error"] {
  border-color: var(--color-danger);
  background: color-mix(in oklab, var(--color-danger-subtle), var(--color-surface) 76%);
}
.avds-field[data-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

.avds-table {
  border: 1px solid var(--avds-border);
  border-radius: var(--avds-card-radius);
  background: var(--avds-surface-card);
}
.avds-table thead {
  background: color-mix(in oklab, var(--color-bg-subtle), var(--color-surface) 35%);
}
.avds-table tbody tr[data-selected="true"] {
  background: color-mix(in oklab, var(--color-accent-subtle), var(--color-surface) 58%);
}

.avds-editorial-number {
  font-family: var(--avds-editorial-accent-font);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
}

.avds-sentiment-cell {
  --avds-sentiment-bg: var(--avds-status-neutral-bg);
  --avds-sentiment-text: var(--avds-status-neutral-text);
  --avds-sentiment-border: var(--avds-status-neutral-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  min-width: 72px;
  padding: 0 var(--space-2);
  border: 1px solid var(--avds-sentiment-border);
  border-radius: var(--radius-sm);
  background: var(--avds-sentiment-bg);
  color: var(--avds-sentiment-text);
  font-size: var(--text-2xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  letter-spacing: 0;
}

.avds-sentiment-cell[data-sentiment="positive"] {
  --avds-sentiment-bg: linear-gradient(90deg, color-mix(in oklab, #ffffff, #1a9850 16%), color-mix(in oklab, #ffffff, #1a9850 34%));
  --avds-sentiment-text: color-mix(in oklab, #1a9850, var(--color-text) 18%);
  --avds-sentiment-border: color-mix(in oklab, #1a9850, transparent 64%);
}

.avds-sentiment-cell[data-sentiment="negative"] {
  --avds-sentiment-bg: linear-gradient(90deg, color-mix(in oklab, #ffffff, #d73027 18%), color-mix(in oklab, #ffffff, #d73027 36%));
  --avds-sentiment-text: color-mix(in oklab, #d73027, var(--color-text) 16%);
  --avds-sentiment-border: color-mix(in oklab, #d73027, transparent 62%);
}

.avds-sentiment-cell[data-sentiment="neutral"] {
  --avds-sentiment-bg: color-mix(in oklab, var(--avds-surface-card), var(--color-bg-subtle) 58%);
  --avds-sentiment-text: var(--color-text-muted);
  --avds-sentiment-border: var(--color-border);
}

[data-theme="dark"] .avds-sentiment-cell[data-sentiment="positive"] {
  --avds-sentiment-bg: linear-gradient(90deg, color-mix(in oklab, #1f2937, #1a9850 18%), color-mix(in oklab, #1f2937, #1a9850 38%));
}

[data-theme="dark"] .avds-sentiment-cell[data-sentiment="negative"] {
  --avds-sentiment-bg: linear-gradient(90deg, color-mix(in oklab, #1f2937, #d73027 20%), color-mix(in oklab, #1f2937, #d73027 40%));
}

.avds-open-original-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 22px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: var(--text-2xs);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.avds-open-original-link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .avds-card[data-density="rich"] { padding: var(--avds-density-regular-y) var(--avds-density-regular-x); }
  .avds-table[data-responsive="cards"] table,
  .avds-table[data-responsive="cards"] thead,
  .avds-table[data-responsive="cards"] tbody,
  .avds-table[data-responsive="cards"] tr,
  .avds-table[data-responsive="cards"] th,
  .avds-table[data-responsive="cards"] td { display: block; }
  .avds-table[data-responsive="cards"] thead { display: none; }
  .avds-table[data-responsive="cards"] tr {
    border-bottom: 1px solid var(--avds-border-subtle);
    padding: var(--space-2) 0;
  }
}