:root{--color-white: #ffffff;--color-gray-50: #f8fafc;--color-gray-100: #f1f5f9;--color-gray-200: #e2e8f0;--color-gray-300: #cbd5e1;--color-gray-400: #94a3b8;--color-gray-500: #64748b;--color-gray-600: #475569;--color-gray-700: #334155;--color-gray-800: #1e293b;--color-gray-900: #0f172a;--color-primary-50: #eff6ff;--color-primary-100: #dbeafe;--color-primary-200: #bfdbfe;--color-primary-300: #93c5fd;--color-primary-400: #60a5fa;--color-primary-500: #3b82f6;--color-primary-600: #2563eb;--color-primary-700: #1d4ed8;--color-primary-800: #1e40af;--color-primary-900: #1e3a8a;--color-secondary-50: #f0fdfa;--color-secondary-100: #ccfbf1;--color-secondary-200: #99f6e4;--color-secondary-300: #5eead4;--color-secondary-400: #2dd4bf;--color-secondary-500: #14b8a6;--color-secondary-600: #0d9488;--color-secondary-700: #0f766e;--color-secondary-800: #115e59;--color-secondary-900: #134e4a;--color-success-500: #10b981;--color-success-600: #059669;--color-warning-500: #f59e0b;--color-warning-600: #d97706;--color-error-500: #ef4444;--color-error-600: #dc2626;--bg-base: var(--color-gray-50);--bg-surface: var(--color-white);--bg-elevated: var(--color-white);--bg-overlay: rgba(15, 23, 42, .6);--text-primary: var(--color-gray-900);--text-secondary: var(--color-gray-600);--text-tertiary: var(--color-gray-500);--text-inverse: var(--color-white);--border-default: var(--color-gray-200);--border-strong: var(--color-gray-300);--border-accent: var(--color-primary-500);--accent-primary: var(--color-primary-500);--accent-primary-hover: var(--color-primary-600);--accent-secondary: var(--color-secondary-500);--accent-secondary-hover: var(--color-secondary-600);--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--line-tight: 1.25;--line-normal: 1.5;--line-relaxed: 1.75;--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;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .06);--transition-fast: .15s ease-in-out;--transition-base: .2s ease-in-out;--transition-slow: .3s ease-in-out;--z-base: 0;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-tooltip: 700;--z-toast: 800}*,*:before,*:after{box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--line-normal);color:var(--text-primary);background-color:var(--bg-base)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-bold{font-weight:var(--font-bold)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-accent{color:var(--accent-primary)}:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}::selection{background-color:var(--color-primary-200);color:var(--text-primary)}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--color-gray-100)}::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:var(--radius-full);border:2px solid var(--color-gray-100)}::-webkit-scrollbar-thumb:hover{background:var(--color-gray-400)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--font-medium);line-height:1.5;border-radius:var(--radius-lg);border:1px solid transparent;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--accent-primary);color:var(--text-inverse);border-color:var(--accent-primary)}.btn-primary:hover:not(:disabled){background-color:var(--accent-primary-hover);border-color:var(--accent-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--accent-secondary);color:var(--text-inverse);border-color:var(--accent-secondary)}.btn-secondary:hover:not(:disabled){background-color:var(--accent-secondary-hover);border-color:var(--accent-secondary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-ghost{background-color:transparent;color:var(--text-secondary);border-color:var(--border-default)}.btn-ghost:hover:not(:disabled){background-color:var(--bg-surface);border-color:var(--border-strong);color:var(--text-primary)}.btn-icon{padding:var(--space-2);width:2.5rem;height:2.5rem}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--text-base)}.card{background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-4);box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.card-elevated{box-shadow:var(--shadow-lg)}.card-interactive{cursor:pointer}.card-interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl);border-color:var(--border-accent)}.card-header{margin-bottom:var(--space-4)}.card-title{margin:0;font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.card-description{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--text-secondary)}.input{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);line-height:1.5;color:var(--text-primary);background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.input:hover{border-color:var(--border-strong)}.input:focus{outline:none;border-color:var(--border-accent);box-shadow:0 0 0 3px var(--color-primary-100)}.input:disabled{opacity:.6;cursor:not-allowed;background-color:var(--color-gray-100)}.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748b' d='M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-2) center;padding-right:var(--space-8)}.label{display:block;margin-bottom:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary)}.checkbox,.radio{width:1.125rem;height:1.125rem;border:2px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.radio{border-radius:var(--radius-full)}.checkbox:checked,.radio:checked{background-color:var(--accent-primary);border-color:var(--accent-primary)}.range-slider{width:100%;height:6px;border-radius:var(--radius-full);background:var(--color-gray-200);outline:none;appearance:none}.range-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:var(--radius-full);background:var(--accent-primary);cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.range-slider::-webkit-slider-thumb:hover{background:var(--accent-primary-hover);transform:scale(1.1);box-shadow:var(--shadow-md)}.range-slider::-moz-range-thumb{width:18px;height:18px;border-radius:var(--radius-full);background:var(--accent-primary);cursor:pointer;border:none;box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.range-slider::-moz-range-thumb:hover{background:var(--accent-primary-hover);transform:scale(1.1);box-shadow:var(--shadow-md)}.modal-backdrop{position:fixed;inset:0;background-color:var(--bg-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-modal-backdrop);display:none;align-items:center;justify-content:center;padding:var(--space-4);animation:fadeIn var(--transition-fast)}.modal-backdrop.active{display:flex}.modal{background-color:var(--bg-surface);border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);max-width:90vw;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp var(--transition-base);z-index:var(--z-modal)}.modal-header{padding:var(--space-6);border-bottom:1px solid var(--border-default)}.modal-title{margin:0;font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--text-primary)}.modal-body{padding:var(--space-6);overflow-y:auto}.modal-footer{padding:var(--space-6);border-top:1px solid var(--border-default);display:flex;gap:var(--space-3);justify-content:flex-end}.toast-container{position:fixed;top:var(--space-4);right:var(--space-4);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-2);max-width:420px}.toast{background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-xl);display:flex;align-items:flex-start;gap:var(--space-3);animation:slideInRight var(--transition-base)}.toast-success{border-left:4px solid var(--color-success-500)}.toast-error{border-left:4px solid var(--color-error-500)}.toast-warning{border-left:4px solid var(--color-warning-500)}.toast-info{border-left:4px solid var(--color-primary-500)}.spinner{display:inline-block;width:1.5rem;height:1.5rem;border:3px solid var(--color-gray-200);border-top-color:var(--accent-primary);border-radius:var(--radius-full);animation:spin .8s linear infinite}.spinner-sm{width:1rem;height:1rem;border-width:2px}.spinner-lg{width:2.5rem;height:2.5rem;border-width:4px}.skeleton{background:linear-gradient(90deg,var(--color-gray-200) 25%,var(--color-gray-100) 50%,var(--color-gray-200) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}.skeleton-text{height:1em;margin-bottom:var(--space-2)}.skeleton-text:last-child{width:70%}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:var(--font-medium);border-radius:var(--radius-md);background-color:var(--color-gray-100);color:var(--text-secondary)}.badge-primary{background-color:var(--color-primary-100);color:var(--color-primary-700)}.badge-success{background-color:var(--color-success-500);color:var(--text-inverse)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{to{background-position:-200% 0}}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.w-full{width:100%}.h-full{height:100%}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}