:root{--color-primary-50: #f0fdfa;--color-primary-100: #ccfbf1;--color-primary-200: #99f6e4;--color-primary-300: #5eead4;--color-primary-400: #2dd4bf;--color-primary-500: #14b8a6;--color-primary-600: #0d9488;--color-primary-700: #0f766e;--color-primary-800: #115e59;--color-primary-900: #134e4a;--color-primary-950: #0f3a37;--color-primary-rgb: 20, 184, 166;--color-accent-50: #fffbeb;--color-accent-100: #fef3c7;--color-accent-200: #fde68a;--color-accent-300: #fcd34d;--color-accent-400: #fbbf24;--color-accent-500: #f59e0b;--color-accent-600: #d97706;--color-accent-700: #b45309;--color-accent-rgb: 245, 158, 11;--color-info-50: #ecfeff;--color-info-100: #cffafe;--color-info-200: #a5f3fc;--color-info-300: #67e8f9;--color-info-400: #22d3ee;--color-info-500: #0891b2;--color-info-600: #0e7490;--color-info-700: #155e75;--color-info-rgb: 8, 145, 178;--color-success-50: #ecfdf5;--color-success-100: #d1fae5;--color-success-200: #a7f3d0;--color-success-300: #6ee7b7;--color-success-400: #34d399;--color-success-500: #059669;--color-success-600: #047857;--color-success-700: #065f46;--color-success-rgb: 5, 150, 105;--color-warning-50: #fffbeb;--color-warning-100: #fef3c7;--color-warning-200: #fde68a;--color-warning-500: #d97706;--color-warning-600: #b45309;--color-warning-700: #92400e;--color-warning-rgb: 217, 119, 6;--color-danger-50: #fef2f2;--color-danger-100: #fee2e2;--color-danger-200: #fecaca;--color-danger-500: #dc2626;--color-danger-600: #b91c1c;--color-danger-700: #991b1b;--color-danger-rgb: 220, 38, 38;--color-gray-50: #fafaf9;--color-gray-100: #f5f5f4;--color-gray-200: #e7e5e4;--color-gray-300: #d6d3d1;--color-gray-400: #a8a29e;--color-gray-500: #78716c;--color-gray-600: #57534e;--color-gray-700: #44403c;--color-gray-800: #292524;--color-gray-900: #1c1917;--color-gray-950: #0c0a09;--color-white: #ffffff;--color-black: #000000;--text-primary: var(--color-gray-900);--text-secondary: var(--color-gray-700);--text-tertiary: var(--color-gray-500);--text-muted: var(--color-gray-500);--text-disabled: var(--color-gray-400);--text-inverse: var(--color-white);--text-link: var(--color-primary-600);--text-on-brand: var(--color-white);--bg-page: var(--color-gray-50);--bg-surface: var(--color-white);--bg-card: var(--color-white);--bg-card-hover: var(--color-gray-50);--bg-muted: var(--color-gray-100);--bg-glass: rgba(250, 250, 249, .85);--bg-overlay: rgba(15, 31, 29, .55);--bg-hover: var(--color-primary-50);--bg-active: var(--color-primary-100);--bg-primary: var(--color-gray-50);--bg-secondary: var(--color-white);--bg-tertiary: var(--color-gray-50);--card-bg: var(--color-white);--input-bg: var(--color-white);--border-color: var(--color-gray-200);--border-color-hover: var(--color-gray-300);--border-color-focus: var(--color-primary-500);--border-light: var(--color-gray-100);--border-hover: var(--color-gray-300);--primary: var(--color-primary-500);--primary-light: var(--color-primary-400);--primary-dark: var(--color-primary-600);--primary-bg: var(--color-primary-50);--primary-border: var(--color-primary-200);--primary-color: var(--color-primary-500);--accent: var(--color-accent-500);--accent-light: var(--color-accent-400);--accent-dark: var(--color-accent-600);--accent-color: var(--color-accent-500);--success: var(--color-success-500);--warning: var(--color-warning-500);--danger: var(--color-danger-500);--info: var(--color-info-500);--gradient-brand: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-500) 55%, var(--color-info-500) 100%);--gradient-brand-soft: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-info-50) 100%);--gradient-hero: linear-gradient(135deg, #0f3a37 0%, #115e59 30%, #0d9488 60%, #0e7490 100%);--gradient-hero-overlay: radial-gradient(at 20% 30%, rgba(45, 212, 191, .3) 0px, transparent 50%), radial-gradient(at 80% 20%, rgba( 8, 145, 178, .25) 0px, transparent 45%), radial-gradient(at 40% 80%, rgba( 94, 234, 212, .2) 0px, transparent 50%), radial-gradient(at 90% 70%, rgba(251, 191, 36, .18) 0px, transparent 50%);--gradient-text-brand: linear-gradient(135deg, #ffffff 0%, #ccfbf1 35%, #a5f3fc 70%, #fde68a 100%);--gradient-text-accent: linear-gradient(135deg, var(--color-accent-300), var(--color-accent-500));--gradient-card-hover: linear-gradient(180deg, var(--color-primary-50), var(--color-white));--gradient-primary: var(--gradient-brand);--theme-honey: #f59e0b;--theme-honey-soft: rgba(245, 158, 11, .1);--theme-honey-text: #b45309;--theme-honey-rgb: 245, 158, 11;--theme-teal: #14b8a6;--theme-teal-soft: rgba( 20, 184, 166, .1);--theme-teal-text: #0f766e;--theme-teal-rgb: 20, 184, 166;--theme-deep: #0d9488;--theme-deep-soft: rgba( 13, 148, 136, .1);--theme-deep-text: #115e59;--theme-deep-rgb: 13, 148, 136;--theme-emerald: #059669;--theme-emerald-soft: rgba( 5, 150, 105, .1);--theme-emerald-text: #065f46;--theme-emerald-rgb: 5, 150, 105;--theme-sky: #0891b2;--theme-sky-soft: rgba( 8, 145, 178, .1);--theme-sky-text: #0e7490;--theme-sky-rgb: 8, 145, 178;--theme-mist: #2dd4bf;--theme-mist-soft: rgba( 45, 212, 191, .14);--theme-mist-text: #0f766e;--theme-mist-rgb: 45, 212, 191}:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;--font-mono: "SF Mono", "JetBrains Mono", "Fira Code", "Consolas", monospace;--font-display: "Inter", "PingFang SC", sans-serif;--text-2xs: .6875rem;--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;--leading-none: 1;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed: 1.625;--leading-loose: 2;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--space-0: 0;--space-px: 1px;--space-0-5: 2px;--space-1: 4px;--space-1-5: 6px;--space-2: 8px;--space-2-5: 10px;--space-3: 12px;--space-3-5: 14px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--space-24: 96px;--space-32: 128px;--radius-none: 0;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 24px;--radius-3xl: 32px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(15, 31, 29, .05);--shadow-sm: 0 1px 3px rgba(15, 31, 29, .06), 0 1px 2px rgba(15, 31, 29, .04);--shadow-md: 0 4px 6px rgba(15, 31, 29, .05), 0 2px 4px rgba(15, 31, 29, .04);--shadow-lg: 0 10px 15px rgba(15, 31, 29, .06), 0 4px 6px rgba(15, 31, 29, .04);--shadow-xl: 0 20px 25px rgba(15, 31, 29, .06), 0 10px 10px rgba(15, 31, 29, .04);--shadow-2xl: 0 25px 50px rgba(15, 31, 29, .1);--shadow-inner: inset 0 2px 4px rgba(15, 31, 29, .04);--shadow-primary-sm: 0 2px 8px rgba(var(--color-primary-rgb), .14);--shadow-primary-md: 0 4px 16px rgba(var(--color-primary-rgb), .18);--shadow-primary-lg: 0 8px 24px rgba(var(--color-primary-rgb), .22);--shadow-accent-sm: 0 2px 8px rgba(var(--color-accent-rgb), .14);--shadow-accent-md: 0 4px 16px rgba(var(--color-accent-rgb), .18);--shadow-success-sm: 0 2px 8px rgba(var(--color-success-rgb), .14);--shadow-danger-sm: 0 2px 8px rgba(var(--color-danger-rgb), .14);--bp-sm: 640px;--bp-md: 768px;--bp-lg: 1024px;--bp-xl: 1280px;--bp-2xl: 1536px;--max-w-sm: 384px;--max-w-md: 448px;--max-w-lg: 512px;--max-w-xl: 768px;--max-w-2xl: 1024px;--max-w-3xl: 1280px;--max-w-4xl: 1400px;--max-w-full: 100%;--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(.34, 1.56, .64, 1);--duration-fast: .1s;--duration-normal: .2s;--duration-slow: .3s;--duration-slower: .5s;--transition-colors: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);--transition-opacity: opacity var(--duration-normal) var(--ease-out);--transition-transform: transform var(--duration-normal) var(--ease-out);--transition-all: all var(--duration-normal) var(--ease-out);--z-behind: -1;--z-default: 0;--z-docked: 10;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-popover: 500;--z-toast: 600;--z-tooltip: 700}@media (prefers-color-scheme: dark){:root{--text-primary: #f5f5f4;--text-secondary: #d6d3d1;--text-tertiary: #a8a29e;--text-muted: #a8a29e;--text-disabled: #57534e;--text-inverse: #0c0a09;--text-link: var(--color-primary-300);--text-on-brand: #ffffff;--bg-page: #0a1413;--bg-surface: #14201e;--bg-card: #14201e;--bg-card-hover: #1a2a27;--bg-muted: #1a2a27;--bg-glass: rgba(10, 20, 19, .85);--bg-overlay: rgba(0, 0, 0, .65);--bg-hover: rgba(20, 184, 166, .1);--bg-active: rgba(20, 184, 166, .18);--bg-primary: #0a1413;--bg-secondary: #14201e;--bg-tertiary: #1a2a27;--card-bg: #14201e;--input-bg: #14201e;--border-color: #28403c;--border-color-hover: #3a5854;--border-light: #1a2a27;--border-hover: #3a5854;--primary: var(--color-primary-400);--primary-light: var(--color-primary-300);--primary-dark: var(--color-primary-500);--primary-bg: rgba(20, 184, 166, .14);--primary-border: rgba(20, 184, 166, .28);--accent: var(--color-accent-400);--accent-light: var(--color-accent-300);--accent-dark: var(--color-accent-500);--color-gray-50: #14201e;--color-gray-100: #1a2a27;--color-gray-200: #28403c;--color-gray-300: #3a5854;--color-gray-400: #5a7672;--color-gray-500: #8a9c98;--color-gray-600: #b8c4c0;--color-gray-700: #d6d3d1;--color-gray-800: #e7e5e4;--color-gray-900: #f5f5f4;--color-gray-950: #fafaf9;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .45), 0 4px 6px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .5), 0 10px 10px rgba(0, 0, 0, .3);--shadow-2xl: 0 25px 50px rgba(0, 0, 0, .55);--gradient-hero: linear-gradient(135deg, #052320 0%, #0f3a37 30%, #115e59 65%, #155e75 100%);--gradient-card-hover: linear-gradient(180deg, rgba(20,184,166,.06), rgba(20,32,30,0))}}@media (prefers-color-scheme: dark){.tool-page--lightcard{--bg-card: #ffffff;--bg-surface: #ffffff;--card-bg: #ffffff;--input-bg: #ffffff;--bg-tertiary: #f9fafb;--bg-secondary: #ffffff;--text-primary: #1c1917;--text-secondary: #44403c;--text-tertiary: #78716c;--border-color: #e7e5e4;--border-color-hover: #d6d3d1}}@media (prefers-reduced-motion: reduce){:root{--duration-fast: 0ms;--duration-normal: 0ms;--duration-slow: 0ms;--duration-slower: 0ms}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-weight:var(--font-medium);font-size:var(--text-sm);line-height:1;padding:var(--space-2-5) var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:var(--transition-colors),var(--transition-transform),box-shadow var(--duration-fast) var(--ease-out);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--color-primary-500);color:var(--color-white);box-shadow:var(--shadow-xs)}.btn-primary:hover:not(:disabled){background:var(--color-primary-600);box-shadow:var(--shadow-primary-sm)}.btn-primary:active:not(:disabled){background:var(--color-primary-700)}.btn-primary:focus-visible{outline:2px solid var(--color-primary-300);outline-offset:2px}.btn-secondary{background:var(--color-primary-50);color:var(--color-primary-700);border-color:var(--color-primary-200)}.btn-secondary:hover:not(:disabled){background:var(--color-primary-100);border-color:var(--color-primary-300)}.btn-secondary:active:not(:disabled){background:var(--color-primary-200)}.btn-outline{background:transparent;color:var(--color-primary-600);border-color:var(--color-primary-300)}.btn-outline:hover:not(:disabled){background:var(--color-primary-50);border-color:var(--color-primary-400)}.btn-ghost{background:transparent;color:var(--color-gray-600)}.btn-ghost:hover:not(:disabled){background:var(--color-gray-100);color:var(--color-gray-800)}.btn-danger{background:var(--color-danger-500);color:var(--color-white)}.btn-danger:hover:not(:disabled){background:var(--color-danger-600)}.btn-link{background:transparent;color:var(--color-primary-600);padding:var(--space-1) var(--space-2)}.btn-link:hover:not(:disabled){color:var(--color-primary-700);text-decoration:underline}.btn-xs{height:28px;padding:var(--space-1) var(--space-2-5);font-size:var(--text-2xs);border-radius:var(--radius-sm);gap:var(--space-1)}.btn-sm{height:32px;padding:var(--space-1-5) var(--space-3);font-size:var(--text-xs);border-radius:var(--radius-sm)}.btn-md{height:40px;padding:var(--space-2-5) var(--space-4);font-size:var(--text-sm)}.btn-lg{height:48px;padding:var(--space-3) var(--space-6);font-size:var(--text-base);border-radius:var(--radius-lg)}.btn-xl{height:56px;padding:var(--space-4) var(--space-8);font-size:var(--text-lg);border-radius:var(--radius-lg);font-weight:var(--font-semibold)}.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-md);flex-shrink:0}.btn-icon.btn-sm{width:32px;height:32px}.btn-icon.btn-lg{width:48px;height:48px}.btn-loading{position:relative;color:transparent!important;pointer-events:none}.btn-loading:after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-radius:50%;border-top-color:transparent;animation:btnSpin .6s linear infinite}@keyframes btnSpin{to{transform:rotate(360deg)}}.form-group{display:flex;flex-direction:column;gap:var(--space-1-5)}.form-label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);line-height:var(--leading-tight)}.form-hint{font-size:var(--text-xs);color:var(--text-tertiary);margin-top:var(--space-0-5)}.form-error{font-size:var(--text-xs);color:var(--color-danger-500);margin-top:var(--space-0-5)}.input{width:100%;height:40px;padding:0 var(--space-3-5);font-size:var(--text-sm);font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-card);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);transition:var(--transition-colors),box-shadow var(--duration-fast) var(--ease-out);outline:none}.input::placeholder{color:var(--color-gray-400)}.input:hover:not(:disabled):not(:focus){border-color:var(--color-gray-400)}.input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.input:disabled{background:var(--color-gray-50);color:var(--text-disabled);cursor:not-allowed}.input.error{border-color:var(--color-danger-500)}.input.error:focus{box-shadow:0 0 0 3px var(--color-danger-100)}.textarea{width:100%;min-height:80px;padding:var(--space-3);font-size:var(--text-sm);font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-card);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);resize:vertical;transition:var(--transition-colors),box-shadow var(--duration-fast) var(--ease-out);outline:none;line-height:var(--leading-relaxed)}.textarea:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.97 4.72a.75.75 0 0 1 1.06 0L6 6.69l1.97-1.97a.75.75 0 1 1 1.06 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;background-size:12px;padding-right:var(--space-8)}.input-with-icon{position:relative}.input-with-icon .input{padding-left:var(--space-10)}.input-with-icon .input-icon-left{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);color:var(--color-gray-400);display:flex;pointer-events:none}.card{background:var(--bg-card);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);padding:var(--space-6);transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out)}.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-interactive{cursor:pointer}.card-interactive:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--color-primary-200)}.card-interactive:active{transform:translateY(0)}.card-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.card-title{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);line-height:var(--leading-tight)}.card-description{font-size:var(--text-sm);color:var(--text-secondary);margin-top:var(--space-1)}.card-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-gray-100)}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-0-5) var(--space-2);font-size:var(--text-2xs);font-weight:var(--font-medium);line-height:var(--leading-none);border-radius:var(--radius-full);white-space:nowrap}.badge-primary{background:var(--color-primary-50);color:var(--color-primary-700)}.badge-success{background:var(--color-success-50);color:var(--color-success-700)}.badge-warning{background:var(--color-warning-50);color:var(--color-warning-700)}.badge-danger{background:var(--color-danger-50);color:var(--color-danger-700)}.badge-gray{background:var(--color-gray-100);color:var(--color-gray-600)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4);animation:fadeIn var(--duration-fast) var(--ease-out)}.modal{background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);width:100%;max-width:var(--max-w-md);max-height:calc(100vh - var(--space-8));overflow-y:auto;animation:scaleIn var(--duration-normal) var(--ease-out);outline:none}.modal-sm{max-width:var(--max-w-sm)}.modal-md{max-width:var(--max-w-md)}.modal-lg{max-width:var(--max-w-2xl)}.modal-xl{max-width:var(--max-w-4xl)}.modal-full{max-width:var(--max-w-full);height:calc(100vh - var(--space-8))}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-gray-100)}.modal-title{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--text-primary)}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--color-gray-400);background:transparent;border:none;cursor:pointer;transition:var(--transition-colors)}.modal-close:hover{background:var(--color-gray-100);color:var(--color-gray-600)}.modal-body{padding:var(--space-6)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-gray-100)}.message{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--color-gray-200);min-width:320px;max-width:480px;animation:slideUp var(--duration-normal) var(--ease-out)}.message-icon{flex-shrink:0;width:20px;height:20px;margin-top:1px}.message-success .message-icon{color:var(--color-success-500)}.message-warning .message-icon{color:var(--color-warning-500)}.message-error .message-icon{color:var(--color-danger-500)}.message-info .message-icon{color:var(--color-info-500)}.message-content{flex:1;font-size:var(--text-sm);color:var(--text-primary);line-height:var(--leading-snug)}.message-close{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--color-gray-400);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.message-close:hover{background:var(--color-gray-100);color:var(--color-gray-600)}.toggle{position:relative;width:44px;height:24px;background:var(--color-gray-300);border-radius:var(--radius-full);border:none;cursor:pointer;transition:background-color var(--duration-normal) var(--ease-out);flex-shrink:0}.toggle:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--color-white);border-radius:50%;box-shadow:var(--shadow-sm);transition:transform var(--duration-normal) var(--ease-out)}.toggle.active{background:var(--color-primary-500)}.toggle.active:after{transform:translate(20px)}.toggle:focus-visible{outline:2px solid var(--color-primary-300);outline-offset:2px}.divider{width:100%;height:1px;background:var(--color-gray-200);border:none;margin:var(--space-4) 0}.divider-vertical{width:1px;height:auto;align-self:stretch;background:var(--color-gray-200);margin:0 var(--space-4)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-16) var(--space-8);text-align:center}.empty-state-icon{font-size:48px;color:var(--color-gray-300);margin-bottom:var(--space-4)}.empty-state-title{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-2)}.empty-state-description{font-size:var(--text-sm);color:var(--text-secondary);max-width:400px;line-height:var(--leading-relaxed)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-5{gap:var(--space-5)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.p-0{padding:0}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}.py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}.m-0{margin:0}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.ml-auto{margin-left:auto}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.hidden{display:none!important}.invisible{visibility:hidden}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.text-gradient{background:linear-gradient(135deg,var(--color-primary-500),var(--color-primary-400));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn var(--duration-normal) var(--ease-out)}.animate-slide-up{animation:slideUp var(--duration-normal) var(--ease-out)}.animate-scale-in{animation:scaleIn var(--duration-normal) var(--ease-out)}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.delay-5{animation-delay:.5s}@media (max-width: 640px){.sm-hidden{display:none!important}}@media (min-width: 641px) and (max-width: 768px){.md-hidden{display:none!important}}@media (min-width: 769px) and (max-width: 1024px){.lg-hidden{display:none!important}}@media (min-width: 1025px){.xl-hidden{display:none!important}}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-xs);transition:var(--transition-all)}.card-hover:hover{border-color:var(--border-color-hover);box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-flat{box-shadow:none}.card-elevated{box-shadow:var(--shadow-md)}.panel-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-6)}.panel-section-title{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin:0 0 var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:var(--space-2)}.panel-section-body{color:var(--text-secondary);line-height:var(--leading-relaxed)}.empty-state{text-align:center;padding:var(--space-16) var(--space-8);background:var(--bg-card);border:1px dashed var(--border-color);border-radius:var(--radius-2xl)}.empty-state-icon{font-size:var(--text-5xl);margin-bottom:var(--space-4);opacity:.5;line-height:1}.empty-state-title{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin:0 0 var(--space-2)}.empty-state-desc{color:var(--text-tertiary);font-size:var(--text-sm);line-height:var(--leading-relaxed);margin:0 auto var(--space-6);max-width:480px}.empty-state-actions{display:inline-flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.tag{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-0-5) var(--space-2);background:var(--color-gray-100);color:var(--text-secondary);border-radius:var(--radius-full);font-size:var(--text-2xs);font-weight:var(--font-medium);line-height:1.4}.tag-primary{background:var(--color-primary-50);color:var(--color-primary-700)}.tag-success{background:var(--color-success-50);color:var(--color-success-700)}.tag-warning{background:var(--color-warning-50);color:var(--color-warning-700)}.tag-danger{background:var(--color-danger-50);color:var(--color-danger-600)}.tag-info{background:var(--color-info-50);color:var(--color-info-700)}.tag-accent{background:var(--color-accent-50);color:var(--color-accent-700)}.divider{height:1px;background:var(--border-light);border:none;margin:var(--space-6) 0}.divider-vertical{width:1px;height:100%;background:var(--border-light)}@media (max-width: 480px){.empty-state{padding:var(--space-10) var(--space-4)}.empty-state-icon{font-size:var(--text-4xl)}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:var(--space-4);scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);line-height:var(--leading-normal);overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-gray-400)}a{color:var(--text-link);text-decoration:none;transition:var(--transition-colors)}a:hover{color:var(--color-primary-700)}h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-weight:var(--font-semibold);line-height:var(--leading-tight)}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}h5{font-size:var(--text-base)}h6{font-size:var(--text-sm)}p{margin-bottom:var(--space-4);line-height:var(--leading-relaxed)}img{max-width:100%;height:auto;display:block}button{cursor:pointer;border:none;outline:none;font-family:inherit;font-size:inherit;background:transparent}input,textarea,select{font-family:inherit;font-size:inherit;outline:none}ul,ol{list-style:none}:focus-visible{outline:2px solid var(--color-primary-400);outline-offset:2px}::selection{background:var(--color-primary-200);color:var(--color-primary-900)}.page-with-sidebar{margin-left:260px;padding-top:var(--space-16);min-height:100vh;transition:margin-left var(--duration-normal) var(--ease-out)}@media (max-width: 1024px){.page-with-sidebar{margin-left:0}}.page-full{padding-top:var(--space-16);min-height:100vh}.page-container{max-width:var(--max-w-4xl);margin:0 auto;padding:var(--space-8) var(--space-6)}@media (max-width: 768px){.page-container{padding:var(--space-6) var(--space-4)}}.page-header{margin-bottom:var(--space-8)}.page-title{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--text-primary);line-height:var(--leading-tight);margin-bottom:var(--space-2)}.page-subtitle{font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-relaxed)}.section{margin-bottom:var(--space-10)}.section-title{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-4)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}@media (max-width: 1024px){.grid-4{grid-template-columns:repeat(3,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3,.grid-2{grid-template-columns:1fr}}@media print{.navbar,.sidebar,.sidebar-overlay,.no-print{display:none!important}.page-with-sidebar{margin-left:0!important}body{background:#fff!important;color:#000!important}}