:root{--spacing-0: 0;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-10: 2.5rem;--spacing-12: 3rem;--spacing-16: 4rem;--spacing-20: 5rem;--spacing-24: 6rem;--spacing-xs: var(--spacing-1);--spacing-sm: var(--spacing-2);--spacing-md: var(--spacing-4);--spacing-lg: var(--spacing-6);--spacing-xl: var(--spacing-8)}:root{--radius-none: 0;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px}:root{--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1)}[data-theme=dark]{--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .2);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .3), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .4), 0 4px 6px -4px rgb(0 0 0 / .4);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .5), 0 8px 10px -6px rgb(0 0 0 / .5)}:root{--transition-fast: .15s ease-in-out;--transition-normal: .25s ease-in-out;--transition-slow: .4s ease-in-out;--transition-colors: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);--transition-transform: transform var(--transition-fast);--transition-opacity: opacity var(--transition-normal)}:root{--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-tooltip: 700}:root{--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}@tailwind base;@tailwind components;@tailwind utilities;:root{--font-family: "Inter", sans-serif;--font-family-mono: "Fira Code", "Consolas", monospace;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--slate-950: #020617;--primary: #17a1cf;--primary-hover: #1493c0;--primary-active: #1082ab;--color-bg-primary: #f6f7f8;--color-bg-surface: #ffffff;--color-bg-elevated: #ffffff;--color-bg-input: var(--slate-50);--color-accent: var(--primary);--color-accent-hover: var(--primary-hover);--color-accent-active: var(--primary-active);--color-text-primary: var(--slate-800);--color-text-secondary: var(--slate-500);--color-text-muted: var(--slate-400);--color-border: var(--slate-200);--color-border-strong: var(--slate-300);--color-table-header-bg: var(--slate-50);--color-table-row-hover: var(--slate-50);--color-table-border: var(--slate-100);--color-success: #22c55e;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6;--level-beginner-bg: #dcfce7;--level-beginner-text: #15803d;--level-intermediate-bg: #fef3c7;--level-intermediate-text: #b45309;--level-advanced-bg: #fee2e2;--level-advanced-text: #b91c1c;--level-expert-bg: #f3e8ff;--level-expert-text: #7e22ce;--scrollbar-track: transparent;--scrollbar-thumb: var(--slate-300);--scrollbar-thumb-hover: var(--primary)}[data-theme=dark]{--color-bg-primary: #111d21;--color-bg-surface: var(--slate-900);--color-bg-elevated: var(--slate-800);--color-bg-input: var(--slate-900);--color-accent: var(--primary);--color-accent-hover: #3bb8db;--color-accent-active: #5ec5e1;--color-text-primary: var(--slate-100);--color-text-secondary: var(--slate-400);--color-text-muted: var(--slate-500);--color-border: var(--slate-800);--color-border-strong: var(--slate-700);--color-table-header-bg: rgba(30, 41, 59, .5);--color-table-row-hover: rgba(30, 41, 59, .4);--color-table-border: var(--slate-800);--color-success: #4ade80;--color-warning: #fbbf24;--color-error: #f87171;--color-info: #60a5fa;--level-beginner-bg: rgba(20, 83, 45, .3);--level-beginner-text: #4ade80;--level-intermediate-bg: rgba(120, 53, 15, .3);--level-intermediate-text: #fbbf24;--level-advanced-bg: rgba(127, 29, 29, .3);--level-advanced-text: #f87171;--level-expert-bg: rgba(88, 28, 135, .3);--level-expert-text: #c084fc;--scrollbar-thumb: #345965;--scrollbar-thumb-hover: var(--primary)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;height:100%}body{height:100%;font-family:var(--font-family);font-size:1rem;line-height:1.5;background-color:var(--color-bg-primary);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:var(--transition-colors)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25;color:var(--color-text-primary)}h1{font-size:2.25rem}h2{font-size:1.875rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}p{margin-bottom:var(--spacing-4)}a{color:var(--color-accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent-hover)}a:active{color:var(--color-accent-active)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.text-accent{color:var(--color-accent)}.bg-primary{background-color:var(--color-bg-primary)}.bg-surface{background-color:var(--color-bg-surface)}.bg-elevated{background-color:var(--color-bg-elevated)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.skip-link{position:absolute;top:-100%;left:0;padding:var(--spacing-2) var(--spacing-4);background-color:var(--color-accent);color:#fff;z-index:var(--z-tooltip);transition:top var(--transition-fast)}.skip-link:focus{top:0}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.cdk-overlay-backdrop{background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .2s ease-in-out}.cdk-overlay-backdrop.dialog-backdrop{background-color:#0009}.cdk-global-overlay-wrapper{display:flex;align-items:center;justify-content:center;pointer-events:none}.cdk-overlay-pane{pointer-events:auto;max-width:90vw;max-height:90vh}.dialog-panel{display:block;animation:dialog-enter .2s ease-out}@keyframes dialog-enter{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}@layer components{.btn-base{@apply inline-flex items-center justify-center gap-2;@apply px-4 py-2 rounded-lg font-medium text-sm;@apply transition-all duration-150 ease-in-out;@apply cursor-pointer border-none;@apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;}.btn-base:disabled{@apply opacity-50 cursor-not-allowed;}.btn-primary{@apply btn-base;@apply bg-primary text-white;@apply hover:bg-primary-hover active:bg-primary-active;}.btn-secondary{@apply btn-base;@apply border border-slate-200 dark:border-slate-700;@apply bg-transparent text-slate-700 dark:text-slate-200;@apply hover:bg-slate-50 dark:hover:bg-slate-800;}.btn-icon{@apply inline-flex items-center justify-center;@apply w-10 h-10 p-0 rounded-lg;@apply bg-transparent border-none;@apply text-slate-500 dark:text-slate-400;@apply hover:bg-slate-100 hover:text-slate-900;@apply dark:hover:bg-slate-800 dark:hover:text-slate-100;@apply transition-all duration-150 ease-in-out;@apply cursor-pointer;@apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;}.btn-icon .material-symbols-outlined{@apply text-xl;}.btn-clear{@apply absolute right-2 top-1/2 -translate-y-1/2;@apply flex items-center justify-center;@apply w-8 h-8 p-1 rounded;@apply bg-transparent border-none;@apply text-slate-500 dark:text-slate-500;@apply hover:bg-slate-100 hover:text-slate-900;@apply dark:hover:bg-slate-700 dark:hover:text-slate-100;@apply transition-all duration-150 ease-in-out;@apply cursor-pointer;}.btn-clear .material-symbols-outlined{@apply text-lg;}.input-base{@apply w-full px-3 rounded-lg;@apply text-sm text-slate-100 dark:text-slate-100;@apply bg-slate-900 dark:bg-slate-900;@apply border border-slate-800 dark:border-slate-800;@apply transition-all duration-150 ease-in-out;@apply placeholder:text-slate-500;height:41px;border-radius:.5rem}.input-base:hover:not(:disabled){@apply border-slate-700 dark:border-slate-700;}.input-base:focus{@apply outline-none border-primary;@apply ring-2 ring-primary/10;}.input-base:disabled{@apply opacity-50 cursor-not-allowed;@apply bg-slate-900 dark:bg-slate-900;}[data-theme=light] .input-base{@apply text-slate-900 bg-white;@apply border-slate-200;@apply placeholder:text-slate-400;}[data-theme=light] .input-base:hover:not(:disabled){@apply border-slate-300;}[data-theme=light] .input-base:disabled{@apply bg-slate-50;}.textarea-base{@apply input-base resize-vertical;height:auto;min-height:80px;max-height:120px;padding-top:.625rem;padding-bottom:.625rem}.select-base{@apply input-base appearance-none cursor-pointer;@apply pr-10 bg-no-repeat;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .75rem center;background-size:1.25rem}.label-base{@apply block text-xs font-medium text-slate-400;@apply mb-2;}.label-filter{@apply label-base uppercase tracking-wider font-semibold;}[data-theme=light] .label-base,[data-theme=light] .label-filter{@apply text-slate-600;}.card-base{@apply bg-white dark:bg-slate-800;@apply rounded-lg border border-slate-200 dark:border-slate-700;@apply shadow-sm;}.card-elevated{@apply card-base shadow-lg;}.card-hover{@apply card-base;@apply hover:shadow-md hover:border-slate-300 dark:hover:border-slate-600;@apply transition-all duration-150 ease-in-out;}.divider-horizontal{@apply h-px w-full;@apply bg-slate-200 dark:bg-slate-700;}.divider-vertical{@apply w-px h-full;@apply bg-slate-200 dark:bg-slate-700;}.icon-sm{font-size:1rem}.icon-base{font-size:1.25rem}.icon-md{font-size:1.5rem}.icon-lg{font-size:2rem}.spinner{@apply inline-block w-6 h-6;@apply animate-spin;border:3px solid rgba(23,161,207,.2);border-top-color:var(--primary);border-radius:50%}}