:root{--color-cream-50: oklch(.992 .002 68);--color-cream-100: oklch(.968 .005 90);--color-cream-200: oklch(.925 .009 90);--color-cream-300: oklch(.855 .013 90);--color-cream-400: oklch(.76 .016 89);--color-cream-500: oklch(.66 .016 88);--color-cream-600: oklch(.565 .015 88);--color-cream-700: oklch(.475 .013 87);--color-cream-800: oklch(.39 .011 86);--color-cream-900: oklch(.32 .009 86);--color-cream-950: oklch(.265 .008 85);--color-cream-a50: oklch(.19 .03 88 / .04);--color-cream-a100: oklch(.19 .03 88 / .08);--color-cream-a200: oklch(.19 .03 88 / .13);--color-cream-a300: oklch(.19 .03 88 / .22);--color-cream-a400: oklch(.19 .03 88 / .35);--color-cream-a500: oklch(.19 .03 88 / .5);--color-cream-a600: oklch(.19 .03 88 / .65);--color-cream-a700: oklch(.19 .03 88 / .78);--color-cream-a800: oklch(.19 .03 88 / .87);--color-cream-a900: oklch(.19 .03 88 / .93);--color-cream-a950: oklch(.19 .03 88 / .97);--color-primary-50: oklch(.972 .012 250);--color-primary-100: oklch(.945 .03 251);--color-primary-200: oklch(.9 .05 252);--color-primary-300: oklch(.85 .075 253);--color-primary-400: oklch(.745 .115 254);--color-primary-500: oklch(.547 .146 256);--color-primary-600: oklch(.475 .18 258);--color-primary-700: oklch(.4 .16 260);--color-primary-800: oklch(.33 .125 261);--color-primary-900: oklch(.275 .09 262);--color-primary-950: oklch(.205 .06 262);--color-green-50: oklch(.975 .012 145);--color-green-100: oklch(.945 .025 145);--color-green-200: oklch(.895 .045 145);--color-green-300: oklch(.825 .065 145);--color-green-400: oklch(.745 .085 145);--color-green-500: oklch(.671 .096 145);--color-green-600: oklch(.58 .1 145);--color-green-700: oklch(.49 .085 145);--color-green-800: oklch(.395 .065 145);--color-green-900: oklch(.31 .045 145);--color-green-950: oklch(.22 .03 145);--color-orange-50: oklch(.972 .018 55);--color-orange-100: oklch(.94 .035 55);--color-orange-200: oklch(.89 .06 55);--color-orange-300: oklch(.825 .09 55);--color-orange-400: oklch(.76 .115 55);--color-orange-500: oklch(.688 .131 55);--color-orange-600: oklch(.59 .14 55);--color-orange-700: oklch(.495 .12 55);--color-orange-800: oklch(.395 .09 55);--color-orange-900: oklch(.305 .065 55);--color-orange-950: oklch(.215 .04 55);--color-red-50: oklch(.97 .015 30);--color-red-100: oklch(.935 .03 30);--color-red-200: oklch(.88 .055 30);--color-red-300: oklch(.795 .085 30);--color-red-400: oklch(.69 .125 30);--color-red-500: oklch(.546 .146 30);--color-red-600: oklch(.47 .155 30);--color-red-700: oklch(.4 .135 30);--color-red-800: oklch(.335 .105 30);--color-red-900: oklch(.275 .08 30);--color-red-950: oklch(.205 .055 30);--color-indigo-50: oklch(.972 .013 285);--color-indigo-100: oklch(.945 .025 285);--color-indigo-200: oklch(.9 .05 285);--color-indigo-300: oklch(.85 .075 285);--color-indigo-400: oklch(.745 .129 285);--color-indigo-500: oklch(.547 .164 285);--color-indigo-600: oklch(.475 .202 285);--color-indigo-700: oklch(.4 .18 285);--color-indigo-800: oklch(.33 .14 285);--color-indigo-900: oklch(.275 .101 285);--color-indigo-950: oklch(.205 .067 285);--color-raspberry-50: oklch(.972 .015 340);--color-raspberry-100: oklch(.945 .034 340);--color-raspberry-200: oklch(.9 .062 340);--color-raspberry-300: oklch(.85 .093 340);--color-raspberry-400: oklch(.745 .142 340);--color-raspberry-500: oklch(.547 .18 340);--color-raspberry-600: oklch(.475 .206 340);--color-raspberry-700: oklch(.4 .175 340);--color-raspberry-800: oklch(.33 .147 340);--color-raspberry-900: oklch(.275 .111 340);--color-raspberry-950: oklch(.205 .074 340);--color-mauve-50: oklch(.975 .005 290);--color-mauve-100: oklch(.952 .008 290);--color-mauve-200: oklch(.93 .012 290);--color-mauve-500: oklch(.63 .03 290);--color-mauve-800: oklch(.4 .025 290);--color-slate-50: oklch(.975 .005 240);--color-slate-100: oklch(.95 .01 240);--color-slate-200: oklch(.925 .015 240);--color-slate-500: oklch(.55 .04 240);--color-slate-800: oklch(.34 .03 240);--color-bg: var(--color-cream-50);--color-bg-subtle: var(--color-cream-100);--color-bg-recessed: var(--color-cream-a50);--color-surface: var(--color-cream-50);--color-border: var(--color-cream-200);--color-border-strong: var(--color-cream-300);--color-border-focus: var(--color-cream-400);--color-text: var(--color-cream-900);--color-text-strong: var(--color-cream-950);--color-text-secondary: var(--color-cream-700);--color-text-tertiary: var(--color-cream-600);--color-text-disabled: var(--color-cream-400);--color-success: var(--color-green-600);--color-success-bg: var(--color-green-100);--color-success-text: var(--color-green-700);--color-warning: var(--color-orange-600);--color-warning-bg: var(--color-orange-100);--color-warning-text: var(--color-orange-700);--color-error: var(--color-red-600);--color-error-bg: var(--color-red-100);--color-error-text: var(--color-red-700);--color-info: var(--color-primary-600);--color-info-bg: var(--color-primary-100);--color-info-text: var(--color-primary-700);--color-inactive: var(--color-cream-500);--color-inactive-bg: var(--color-cream-100);--chart-1: var(--color-primary-500);--chart-2: var(--color-raspberry-500);--chart-3: var(--color-green-600);--chart-4: var(--color-orange-600);--chart-5: var(--color-indigo-700);--chart-6: var(--color-mauve-500);--chart-7: var(--color-slate-500);--chart-other: var(--color-cream-500);--chart-grid: var(--color-cream-200);--chart-axis: var(--color-cream-300);--chart-axis-label: var(--color-cream-600);--chart-legend: var(--color-cream-700);--chart-tooltip-bg: var(--color-cream-900);--chart-tooltip-fg: var(--color-cream-50);--variance-positive: var(--color-primary-500);--variance-neutral: var(--color-cream-200);--variance-negative: var(--color-red-500);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-8: 48px;--space-10: 64px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--text-micro: 11px;--text-body: 14px;--text-emphasis: 16px;--text-title: 20px;--text-page: 28px;--text-hero: 36px;--shadow-card: 0 1px 2px rgb(0 0 0 / 5%);--shadow-card-hover: 0 2px 8px rgb(0 0 0 / 8%);--shadow-panel: 0 4px 16px rgb(0 0 0 / 10%);--duration-fast: .15s;--duration-default: .2s;--duration-slow: .25s;--easing-default: cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:var(--space-8);background:var(--color-bg-subtle);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-body);line-height:1.5;-webkit-font-smoothing:antialiased}body,.dashboard,.kpi,table,.chart,.tabular{font-variant-numeric:tabular-nums slashed-zero}.dashboard{max-width:1280px;margin:0 auto}h1,h2,h3{margin:0}table{border-collapse:collapse;width:100%}.page-header{margin-bottom:var(--space-6)}.page-header h1{font-size:var(--text-page);font-weight:600;color:var(--color-text-strong)}.page-header .meta{font-size:var(--text-body);color:var(--color-text-tertiary);margin-top:var(--space-2)}.section-heading{font-size:var(--text-title);font-weight:600;color:var(--color-text-strong);margin:var(--space-6) 0 var(--space-4)}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-5)}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-8{grid-column:span 8}.col-12{grid-column:span 12}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5)}.kpi{display:flex;flex-direction:column;gap:var(--space-2)}.kpi .label{font-size:var(--text-micro);font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-tertiary)}.kpi .value{font-size:var(--text-hero);font-weight:600;color:var(--color-text-strong);line-height:1.1}.kpi .delta{font-size:var(--text-body);display:flex;align-items:center;gap:var(--space-1)}.kpi .delta.positive{color:var(--color-success)}.kpi .delta.negative{color:var(--color-error)}.kpi .delta.neutral{color:var(--color-text-tertiary)}.kpi .meta{font-size:var(--text-body);color:var(--color-text-tertiary);margin-top:var(--space-2)}.kpi.alert{background:var(--color-error-bg);border-color:var(--color-red-200)}.kpi.alert .value{color:var(--color-error-text)}th,td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-border);font-size:var(--text-body)}th{background:var(--color-bg-subtle);color:var(--color-text-secondary);font-size:var(--text-micro);font-weight:500;text-transform:uppercase;letter-spacing:.5px}td.num,th.num{text-align:right}.badge{display:inline-flex;align-items:center;padding:2px var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-body);font-weight:500}.badge.success{background:var(--color-success-bg);color:var(--color-success-text)}.badge.warning{background:var(--color-warning-bg);color:var(--color-warning-text)}.badge.error{background:var(--color-error-bg);color:var(--color-error-text)}.badge.info{background:var(--color-info-bg);color:var(--color-info-text)}.badge.inactive{background:var(--color-inactive-bg);color:var(--color-text-tertiary)}.filter-bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-5);font-size:var(--text-body)}.filter-pill{padding:var(--space-1) var(--space-3);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}.filter-pill.active{background:var(--color-info-bg);border-color:var(--color-info);color:var(--color-info-text)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.host-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);min-height:60vh;text-align:center;padding:var(--space-6)}.host-state-title{margin:0;font-size:var(--text-emphasis);font-weight:500;color:var(--color-text-secondary)}.host-state-detail{margin:0;font-size:var(--text-body);color:var(--color-text-tertiary);max-width:480px;overflow-wrap:anywhere}.host-state-retry{padding:var(--space-2) var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit;cursor:pointer}.host-state-retry:hover{border-color:var(--color-primary-500);color:var(--color-primary-600)}.host-state-retry:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.host-state-spinner{width:24px;height:24px;border:2.5px solid var(--color-border-strong);border-top-color:var(--color-primary-500);border-radius:50%;animation:host-spin .8s linear infinite}@keyframes host-spin{to{transform:rotate(360deg)}}
