:root{--primary: #6366f1;--primary-hover: #4f46e5;--primary-gradient: linear-gradient(135deg, #6366f1 0%, #d946ef 100%);--primary-on: #ffffff;--success: #10b981;--success-on: #ffffff;--error: #ef4444;--error-on: #ffffff;--warning: #f59e0b;--warning-on: #0b111e;--bg: #0b111e;--bg-on: #f3f4f6;--bg-on-muted: #9ca3af;--bg-surface: #151f32;--bg-surface-hover: #1f2c45;--bg-surface-active: rgba(255, 255, 255, .08);--bg-surface-disabled: rgba(255, 255, 255, .05);--bg-surface-selected: rgba(255, 255, 255, .12);--secondary: var(--bg-surface);--secondary-on: var(--bg-on);--secondary-border: var(--border-color);--secondary-hover: var(--bg-surface-hover);--neutral: transparent;--neutral-on: var(--bg-on-muted);--neutral-border: transparent;--neutral-hover: var(--bg-surface-hover);--border-color: rgba(255, 255, 255, .06);--border-color-muted: rgba(255, 255, 255, .04);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 4px 20px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .5);--shadow-inset: inset 0 2px 4px rgba(0, 0, 0, .2);--elevation--2: inset 0 2px 4px rgba(0, 0, 0, .2);--elevation--1: inset 0 1px 2px rgba(0, 0, 0, .15);--elevation-0: none;--elevation-1: var(--shadow-sm);--elevation-2: var(--shadow-md);--elevation-3: var(--shadow-lg);--elevation-4: var(--shadow-xl);--z-index-badge: 10;--z-index-dropdown: 100;--z-index-sticky: 200;--z-index-backdrop: 1000;--z-index-modal: 1010;--z-index-toast: 1050;--z-index-tooltip: 1100;--backdrop-bg: rgba(11, 17, 30, .6);--backdrop-blur: blur(8px);--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Fira Code", Consolas, "Courier New", monospace;--weight--8: 100;--weight--7: 100;--weight--6: 100;--weight--5: 100;--weight--4: 100;--weight--3: 100;--weight--2: 200;--weight--1: 300;--weight-0: 400;--weight-1: 500;--weight-2: 600;--weight-3: 700;--weight-4: 800;--weight-5: 900;--weight-6: 900;--weight-7: 900;--weight-8: 900;--font--8: .375rem;--font--7: .4375rem;--font--6: .5rem;--font--5: .5625rem;--font--4: .625rem;--font--3: .6875rem;--font--2: .75rem;--font--1: .875rem;--font-0: 1rem;--font-1: 1.125rem;--font-2: 1.25rem;--font-3: 1.5rem;--font-4: 1.75rem;--font-5: 2rem;--font-6: 2.5rem;--font-7: 3rem;--font-8: 4rem;--space--8: .03125rem;--space--7: .0625rem;--space--6: .09375rem;--space--5: .125rem;--space--4: .1875rem;--space--3: .25rem;--space--2: .3125rem;--space--1: .375rem;--space-0: .5rem;--space-1: .75rem;--space-2: 1rem;--space-3: 1.25rem;--space-4: 1.5rem;--space-5: 2rem;--space-6: 2.5rem;--space-7: 3rem;--space-8: 4rem;--radius--8: 0rem;--radius--7: 0rem;--radius--6: .03125rem;--radius--5: .0625rem;--radius--4: .125rem;--radius--3: .1875rem;--radius--2: .25rem;--radius--1: .375rem;--radius-0: .5rem;--radius-1: .75rem;--radius-2: 1rem;--radius-3: 1.25rem;--radius-4: 1.5rem;--radius-5: 2rem;--radius-6: 2.5rem;--radius-7: 3rem;--radius-8: 4rem;--transition-fast: .15s ease;--transition-normal: .25s ease;--control-radius: var(--radius--2);--control-border-width: 1px;--control-focus-ring-width: 3px;--control-focus-ring-color: rgba(99, 102, 241, .25);--control-transition: var(--transition-fast);--control-height: 36px;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--container-xs: 180px;--container-sm: 324px;--container-md: 468px;--container-lg: 648px;--design-border: 1px dashed rgba(255, 255, 255, .12);--design-border-hover: 1px dashed rgba(255, 255, 255, .35);--design-bg-hover: rgba(255, 255, 255, .02)}@media (prefers-color-scheme: light){:root{--primary: #4f46e5;--primary-hover: #4338ca;--primary-gradient: linear-gradient(135deg, #4f46e5 0%, #c084fc 100%);--primary-on: #ffffff;--success: #059669;--success-on: #ffffff;--error: #dc2626;--error-on: #ffffff;--warning: #d97706;--warning-on: #111827;--bg: #f3f4f6;--bg-on: #111827;--bg-on-muted: #4b5563;--bg-surface: #ffffff;--bg-surface-hover: #f9fafb;--bg-surface-active: rgba(0, 0, 0, .06);--bg-surface-disabled: rgba(0, 0, 0, .05);--bg-surface-selected: rgba(0, 0, 0, .08);--secondary: var(--bg-surface);--secondary-on: var(--bg-on);--secondary-border: var(--border-color);--secondary-hover: var(--bg-surface-hover);--neutral: transparent;--neutral-on: var(--bg-on-muted);--neutral-border: transparent;--neutral-hover: var(--bg-surface-hover);--border-color: rgba(0, 0, 0, .08);--border-color-muted: rgba(0, 0, 0, .05);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);--shadow-md: 0 4px 20px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .16);--shadow-inset: inset 0 2px 4px rgba(0, 0, 0, .05);--elevation--2: inset 0 2px 4px rgba(0, 0, 0, .05);--elevation--1: inset 0 1px 2px rgba(0, 0, 0, .03);--elevation-0: none;--elevation-1: var(--shadow-sm);--elevation-2: var(--shadow-md);--elevation-3: var(--shadow-lg);--elevation-4: var(--shadow-xl);--backdrop-bg: rgba(0, 0, 0, .45);--control-focus-ring-color: rgba(79, 70, 229, .25);--design-border: 1px dashed rgba(0, 0, 0, .12);--design-border-hover: 1px dashed rgba(0, 0, 0, .35);--design-bg-hover: rgba(0, 0, 0, .02)}}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--bg-on);font-family:var(--font-body);font-size:var(--font-0);line-height:1.5;overflow:hidden;height:100vh;width:100vw;transition:background-color var(--transition-normal),color var(--transition-normal)}:not(:defined){opacity:0}*{scrollbar-width:thin;scrollbar-color:var(--bg-surface-hover) transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-surface-hover);border-radius:9999px;transition:background-color .2s ease}::-webkit-scrollbar-thumb:hover{background:var(--primary)}