:root{--color-sapphire-600: #1e40af;--color-sapphire-500: #3b82f6;--color-sapphire-400: #60a5fa;--color-emerald-600: #059669;--color-emerald-500: #10b981;--color-amethyst-600: #7c3aed;--color-amethyst-500: #a78bfa;--color-ruby-600: #dc2626;--color-ruby-500: #ef4444;--color-topaz-600: #d97706;--color-topaz-500: #f59e0b;--icon-sapphire: #1e5bff;--icon-emerald: #1fa86a;--icon-amethyst: #7a3ff2;--icon-garnet: #c2274b;--icon-amber: #e58b17;--icon-topaz: #1fb3c7;--icon-onyx: #2e3a46;--icon-peridot: #7bcf3b;--icon-ruby: #e04646;--icon-citrine: #f2c94c;--color-slate-900: #0f172a;--color-slate-800: #1e293b;--color-slate-700: #334155;--color-slate-600: #475569;--color-slate-500: #64748b;--color-slate-400: #94a3b8;--color-slate-300: #cbd5e1;--color-slate-200: #e2e8f0;--color-slate-100: #f1f5f9;--color-slate-50: #f8fafc;--color-text-primary: var(--color-slate-900);--color-text-secondary: var(--color-slate-700);--color-text-muted: var(--color-slate-500);--color-text-disabled: var(--color-slate-400);--color-bg-primary: #ffffff;--color-bg-secondary: var(--color-slate-100);--color-bg-sidebar: #f4f6fa;--color-bg-tertiary: var(--color-slate-100);--color-bg-elevated: #ffffff;--color-border-primary: var(--color-slate-300);--color-border-secondary: var(--color-slate-200);--color-border-focus: var(--color-sapphire-500);--color-link: var(--color-sapphire-600);--color-link-hover: var(--color-sapphire-500);--color-link-visited: var(--color-amethyst-600);--color-focus-ring: var(--color-sapphire-500);--color-button-primary-bg: var( --color-sapphire-600 );--color-button-primary-text: #ffffff;--color-button-primary-hover: var( --color-sapphire-500 );--color-button-secondary-bg: var( --color-emerald-600 );--color-button-secondary-text: #ffffff;--color-button-secondary-hover: var( --color-emerald-500 );--color-button-danger-bg: var(--color-ruby-600);--color-button-danger-text: #ffffff;--color-button-danger-hover: var( --color-ruby-500 );--color-card-bg: var(--color-bg-elevated);--color-card-border: var(--color-border-primary);--color-card-shadow: var(--shadow-md);--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--space-32: 8rem;--radius-none: 0;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .15);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .2);--shadow-2xl: 0 25px 50px rgba(0, 0, 0, .25);--z-base: 0;--z-dropdown: 100;--z-sticky: 200;--z-modal-backdrop: 300;--z-modal: 400;--z-toast: 500;--z-tooltip: 600;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}[data-theme=dark]{--color-sapphire-600: #3b82f6;--color-sapphire-500: #60a5fa;--color-sapphire-400: #93c5fd;--color-emerald-600: #10b981;--color-emerald-500: #34d399;--color-amethyst-600: #a78bfa;--color-amethyst-500: #c4b5fd;--color-ruby-600: #ef4444;--color-ruby-500: #f87171;--color-topaz-600: #f59e0b;--color-topaz-500: #fbbf24;--icon-sapphire: #6fa1ff;--icon-emerald: #6fd8a8;--icon-amethyst: #b89cff;--icon-garnet: #e7829b;--icon-amber: #f2c075;--icon-topaz: #7edde8;--icon-onyx: #7a8a99;--icon-peridot: #b8f28a;--icon-ruby: #f29999;--icon-citrine: #f7e6a3;--color-slate-900: #f8fafc;--color-slate-800: #f1f5f9;--color-slate-700: #e2e8f0;--color-slate-600: #cbd5e1;--color-slate-500: #94a3b8;--color-slate-400: #64748b;--color-slate-300: #475569;--color-slate-200: #334155;--color-slate-100: #1e293b;--color-slate-50: #0f172a;--color-text-primary: var(--color-slate-900);--color-text-secondary: var(--color-slate-700);--color-text-muted: var(--color-slate-500);--color-text-disabled: var(--color-slate-400);--color-bg-primary: #0f172a;--color-bg-secondary: #1e293b;--color-bg-sidebar: #181a26;--color-bg-tertiary: #334155;--color-bg-elevated: #1e293b;--color-border-primary: var(--color-slate-300);--color-border-secondary: #334155;--color-border-focus: var(--color-sapphire-400);--color-link: var(--color-sapphire-400);--color-link-hover: var(--color-sapphire-300);--color-link-visited: var(--color-amethyst-400);--color-focus-ring: var(--color-sapphire-400);--color-button-primary-bg: var( --color-sapphire-600 );--color-button-primary-text: var( --color-slate-900 );--color-button-primary-hover: var( --color-sapphire-500 );--color-button-secondary-bg: var( --color-emerald-600 );--color-button-secondary-text: var( --color-slate-900 );--color-button-secondary-hover: var( --color-emerald-500 );--color-button-danger-bg: var(--color-ruby-600);--color-button-danger-text: #ffffff;--color-button-danger-hover: var( --color-ruby-500 );--color-card-bg: var(--color-bg-elevated);--color-card-border: var(--color-border-primary);--color-card-shadow: var(--shadow-lg);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .6);--shadow-2xl: 0 25px 50px rgba(0, 0, 0, .7)}:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-serif: "Georgia", "Times New Roman", serif;--font-mono: "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", "Courier New", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: clamp(1.5rem, 3vw, 1.875rem);--font-size-3xl: clamp(1.875rem, 4vw, 2.25rem);--font-size-4xl: clamp(2.25rem, 5vw, 3rem);--font-size-5xl: clamp(3rem, 6vw, 4rem);--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--line-height-none: 1;--line-height-tight: 1.25;--line-height-snug: 1.375;--line-height-normal: 1.6;--line-height-relaxed: 1.75;--line-height-loose: 2;--letter-spacing-tighter: -.05em;--letter-spacing-tight: -.025em;--letter-spacing-normal: 0;--letter-spacing-wide: .025em;--letter-spacing-wider: .05em;--letter-spacing-widest: .1em}:root{--duration-instant: 0ms;--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--duration-slower: .75s;--ease-linear: linear;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--ease-elastic: cubic-bezier(.68, -.25, .265, 1.25)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideInBottom{0%{transform:translateY(1rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInTop{0%{transform:translateY(-1rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-1rem);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(1rem);opacity:0}to{transform:translate(0);opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}:root,[data-theme=light]{--color-surface: #ffffff;--color-background: #f5f5f5;--color-border: #e0e0e0;--color-text-primary: #000000;--color-text-secondary: #555555;--color-hover: rgba(0, 0, 0, .05);--color-active: rgba(0, 102, 204, .1);--color-primary: #0066cc;--color-focus: #0066cc;--color-badge-wip-bg: #fff3cd;--color-badge-wip-text: #856404;--color-badge-beta-bg: #d1ecf1;--color-badge-beta-text: #0c5460}[data-theme=dark]{--color-surface: #1e1e1e;--color-background: #121212;--color-border: #333333;--color-text-primary: #ffffff;--color-text-secondary: #b0b0b0;--color-hover: rgba(255, 255, 255, .1);--color-active: rgba(100, 150, 255, .2);--color-primary: #5ca4ff;--color-focus: #5ca4ff;--color-badge-wip-bg: #3d3520;--color-badge-wip-text: #ffd54f;--color-badge-beta-bg: #1e3a3f;--color-badge-beta-text: #81d4fa}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-sans);background-color:var(--color-bg-secondary);color:var(--color-text-primary);line-height:var(--line-height-normal);font-weight:var(--font-weight-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--duration-normal) var(--ease-out),color var(--duration-normal) var(--ease-out)}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:var(--line-height-tight);margin-bottom:.5em}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.1rem}h6{font-size:1rem}p{margin-bottom:1em;color:var(--color-text-secondary)}a{color:var(--color-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}a:hover{color:var(--color-link-hover)}a:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}app-root{display:flex;flex-direction:column;min-height:100vh}header{flex-shrink:0}main{flex:1;background-color:var(--color-bg-primary);min-height:calc(100vh - 80px)}.container{max-width:1200px;margin:0 auto;padding:0 var(--space-6)}@media (max-width: 1024px){.container{max-width:100%;padding:0 var(--space-6)}}@media (max-width: 768px){.container{padding:0 var(--space-4)}}@media (max-width: 480px){.container{padding:0 var(--space-3)}}.flex-center{display:flex;justify-content:center;align-items:center}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-column{display:flex;flex-direction:column}.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-6)}button,.btn{font-family:inherit;font-size:var(--font-size-base);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);padding:var(--space-2) var(--space-4)}button:focus,.btn:focus{outline:2px solid var(--color-focus-ring);outline-offset:2px}button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed}button.primary,.btn-primary{background-color:var(--color-button-primary-bg);color:var(--color-button-primary-text)}button.primary:hover:not(:disabled),.btn-primary:hover:not(:disabled){filter:brightness(1.1);box-shadow:var(--shadow-md)}input,textarea,select{font-family:inherit;font-size:var(--font-size-base);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);background-color:var(--color-bg-primary);color:var(--color-text-primary);transition:border-color var(--duration-fast) var(--ease-out)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-link);box-shadow:0 0 0 3px #3b82f61a}input::placeholder,textarea::placeholder,select::placeholder{color:var(--color-text-muted)}textarea{resize:vertical;min-height:120px}.card{background-color:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:all var(--duration-fast) var(--ease-out)}.card:hover{box-shadow:var(--shadow-md)}code,pre{font-family:var(--font-mono);font-size:var(--font-size-sm);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);padding:var(--space-2)}pre{padding:var(--space-4);overflow-x:auto;margin:var(--space-4) 0}@media (max-width: 768px){h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.1rem}p{font-size:.95rem}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-border-primary);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--color-text-muted)}.text-primary{color:var(--color-link)}.bg-light{background-color:var(--color-bg-secondary)}.bg-white{background-color:var(--color-bg-primary)}.shadow{box-shadow:var(--shadow-md)}