:root{--prim-color-brand-50: #e6f4ff;--prim-color-brand-100: #bae0ff;--prim-color-brand-200: #91caff;--prim-color-brand-300: #69b1ff;--prim-color-brand-400: #4096ff;--prim-color-brand-500: #1677ff;--prim-color-brand-600: #0958d9;--prim-color-brand-700: #003eb3;--prim-color-brand-800: #002c8c;--prim-color-brand-900: #001d66;--prim-color-neutral-0: #ffffff;--prim-color-neutral-50: #fafafa;--prim-color-neutral-100: #f5f5f5;--prim-color-neutral-150: #f0f0f0;--prim-color-neutral-200: #e8e8e8;--prim-color-neutral-300: #d9d9d9;--prim-color-neutral-400: #bfbfbf;--prim-color-neutral-500: #8c8c8c;--prim-color-neutral-600: #595959;--prim-color-neutral-700: #434343;--prim-color-neutral-800: #262626;--prim-color-neutral-900: #1a1a1a;--prim-color-warning-50: #fff7e6;--prim-color-warning-500: #fa8c16;--prim-color-warning-700: #d46b08;--prim-color-success-50: #f6ffed;--prim-color-success-500: #52c41a;--prim-color-success-700: #389e0d;--prim-color-error-50: #fff1f0;--prim-color-error-500: #ff4d4f;--prim-color-error-700: #cf1322;--prim-color-chart-blue: #1677ff;--prim-color-chart-orange: #fa8c16;--prim-color-chart-green: #52c41a;--prim-color-chart-purple: #722ed1;--prim-color-chart-cyan: #13c2c2;--prim-color-chart-red: #ff4d4f;--prim-size-0: 0;--prim-size-1: 4px;--prim-size-2: 8px;--prim-size-3: 12px;--prim-size-4: 16px;--prim-size-5: 24px;--prim-size-6: 32px;--prim-size-7: 48px;--prim-size-8: 64px;--prim-size-9: 96px;--prim-font-family-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--prim-font-family-mono: "SF Mono", "Fira Code", "Courier New", monospace;--prim-font-weight-regular: 400;--prim-font-weight-medium: 500;--prim-font-weight-semibold: 600;--prim-font-weight-bold: 700;--prim-radius-none: 0;--prim-radius-sm: 4px;--prim-radius-md: 8px;--prim-radius-lg: 12px;--prim-radius-xl: 16px;--prim-radius-full: 9999px;--prim-motion-duration-instant: 80ms;--prim-motion-duration-fast: .16s;--prim-motion-duration-normal: .24s;--prim-motion-duration-slow: .36s;--prim-motion-easing-standard: cubic-bezier(.4, 0, .2, 1);--prim-motion-easing-entrance: cubic-bezier(0, 0, .2, 1);--prim-motion-easing-exit: cubic-bezier(.4, 0, 1, 1)}:root,[data-theme=light]{--color-text-primary: var(--prim-color-neutral-900);--color-text-secondary: var(--prim-color-neutral-600);--color-text-tertiary: var(--prim-color-neutral-500);--color-text-inverse: var(--prim-color-neutral-0);--color-text-disabled: var(--prim-color-neutral-400);--color-text-brand: var(--prim-color-brand-500);--color-text-success: var(--prim-color-success-700);--color-text-warning: var(--prim-color-warning-700);--color-text-error: var(--prim-color-error-700);--color-bg-canvas: var(--prim-color-neutral-100);--color-bg-surface: var(--prim-color-neutral-0);--color-bg-elevated: var(--prim-color-neutral-0);--color-bg-brand-subtle: var(--prim-color-brand-50);--color-bg-warning-subtle: var(--prim-color-warning-50);--color-bg-success-subtle: var(--prim-color-success-50);--color-bg-error-subtle: var(--prim-color-error-50);--color-border-default: var(--prim-color-neutral-200);--color-border-strong: var(--prim-color-neutral-300);--color-border-focus: var(--prim-color-brand-500);--color-feedback-success: var(--prim-color-success-500);--color-feedback-warning: var(--prim-color-warning-500);--color-feedback-error: var(--prim-color-error-500);--color-feedback-info: var(--prim-color-brand-500);--color-brand-primary: var(--prim-color-brand-500);--color-brand-hover: var(--prim-color-brand-600);--color-brand-active: var(--prim-color-brand-700);--color-chart-series-1: var(--prim-color-chart-blue);--color-chart-series-2: var(--prim-color-chart-orange);--color-chart-series-3: var(--prim-color-chart-green);--color-chart-series-4: var(--prim-color-chart-purple);--color-chart-series-5: var(--prim-color-chart-cyan);--color-chart-series-6: var(--prim-color-chart-red);--color-chart-axis: var(--prim-color-neutral-300);--color-chart-grid: var(--prim-color-neutral-150);--color-chart-label: var(--prim-color-neutral-600);--space-inline-xs: var(--prim-size-1);--space-inline-sm: var(--prim-size-2);--space-inline-md: var(--prim-size-3);--space-inline-lg: var(--prim-size-4);--space-inline-xl: var(--prim-size-5);--space-stack-xs: var(--prim-size-1);--space-stack-sm: var(--prim-size-2);--space-stack-md: var(--prim-size-3);--space-stack-lg: var(--prim-size-4);--space-stack-xl: var(--prim-size-5);--space-page-x: var(--prim-size-3);--space-page-y: var(--prim-size-4);--radius-card: var(--prim-radius-lg);--radius-icon-bg: var(--prim-radius-md);--radius-chip: var(--prim-radius-sm);--radius-button: var(--prim-radius-md);--radius-avatar: var(--prim-radius-full);--radius-sheet: var(--prim-radius-xl);--shadow-elevation-0: none;--shadow-elevation-1: 0 1px 4px 0 rgba(0,0,0,.08);--shadow-elevation-2: 0 4px 12px 0 rgba(0,0,0,.12);--shadow-elevation-3: 0 8px 24px 0 rgba(0,0,0,.16);--motion-duration-instant: var(--prim-motion-duration-instant);--motion-duration-fast: var(--prim-motion-duration-fast);--motion-duration-normal: var(--prim-motion-duration-normal);--motion-duration-slow: var(--prim-motion-duration-slow);--motion-easing-standard: var(--prim-motion-easing-standard);--motion-easing-entrance: var(--prim-motion-easing-entrance);--motion-easing-exit: var(--prim-motion-easing-exit);--z-base: 0;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-toast: 500;--z-tooltip: 600}[data-theme=dark]{--color-text-primary: #e8e8e8;--color-text-secondary: #a0a0a0;--color-text-tertiary: #6b6b6b;--color-text-inverse: var(--prim-color-neutral-900);--color-text-disabled: #4a4a4a;--color-text-brand: var(--prim-color-brand-400);--color-text-success: var(--prim-color-success-500);--color-text-warning: var(--prim-color-warning-500);--color-text-error: var(--prim-color-error-500);--color-bg-canvas: #141414;--color-bg-surface: #1f1f1f;--color-bg-elevated: #2a2a2a;--color-bg-brand-subtle: #111b2b;--color-bg-warning-subtle: #2a1d00;--color-bg-success-subtle: #0d2608;--color-bg-error-subtle: #2c0a0a;--color-border-default: #2d2d2d;--color-border-strong: #3d3d3d;--color-border-focus: var(--prim-color-brand-400);--color-feedback-info: var(--prim-color-brand-400);--color-brand-hover: var(--prim-color-brand-400);--color-brand-active: var(--prim-color-brand-300);--color-chart-axis: #3d3d3d;--color-chart-grid: #2d2d2d;--color-chart-label: #8c8c8c;--shadow-elevation-1: 0 1px 4px 0 rgba(0,0,0,.32);--shadow-elevation-2: 0 4px 12px 0 rgba(0,0,0,.4);--shadow-elevation-3: 0 8px 24px 0 rgba(0,0,0,.48)}:root,[data-theme=light],[data-theme=dark]{--comp-navbar-bg: var(--color-brand-primary);--comp-navbar-text: var(--color-text-inverse);--comp-navbar-height: 48px;--comp-stat-card-bg: var(--color-bg-surface);--comp-stat-card-radius: var(--radius-card);--comp-stat-card-padding-x: var(--space-inline-lg);--comp-stat-card-padding-y: var(--space-stack-md);--comp-stat-card-shadow: var(--shadow-elevation-1);--comp-stat-card-title-color: var(--color-text-secondary);--comp-chart-card-bg: var(--color-bg-surface);--comp-chart-card-radius: var(--radius-card);--comp-chart-card-padding: var(--space-inline-lg);--comp-chart-card-shadow: var(--shadow-elevation-1);--comp-chart-card-title-color: var(--color-text-primary);--comp-chart-card-subtitle-color: var(--color-text-tertiary);--comp-time-sel-bg: var(--color-bg-surface);--comp-time-sel-active-bg: var(--color-brand-primary);--comp-time-sel-active-text: var(--color-text-inverse);--comp-time-sel-inactive-text:var(--color-text-secondary);--comp-time-sel-radius: var(--radius-chip);--comp-skeleton-base: var(--prim-color-neutral-200);--comp-skeleton-shimmer: var(--prim-color-neutral-100);--comp-skeleton-radius: var(--radius-icon-bg);--comp-empty-icon: var(--color-text-disabled);--comp-empty-text: var(--color-text-tertiary);--comp-error-icon: var(--color-feedback-error);--comp-error-text: var(--color-text-secondary);--comp-error-retry: var(--color-brand-primary);--comp-quick-entry-bg: var(--color-bg-surface);--comp-quick-entry-radius: var(--radius-card);--comp-quick-entry-icon-color: var(--color-brand-primary);--comp-quick-entry-label: var(--color-text-secondary);--comp-quick-entry-icon-bg: var(--color-bg-brand-subtle);--comp-rank-1-color: var(--prim-color-warning-500);--comp-rank-2-color: var(--prim-color-neutral-500);--comp-rank-3-color: var(--prim-color-warning-700);--comp-rank-bar-bg: var(--color-bg-brand-subtle);--comp-rank-bar-fill:var(--color-brand-primary)}[data-theme=dark]{--comp-skeleton-base: #2a2a2a;--comp-skeleton-shimmer: #1f1f1f}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--prim-font-family-sans);font-size:14px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}body{background-color:var(--color-bg-canvas);color:var(--color-text-primary);min-height:100vh;transition:background-color var(--motion-duration-normal) var(--motion-easing-standard),color var(--motion-duration-normal) var(--motion-easing-standard)}.studio-layout{display:flex;min-height:100vh}.studio-sidebar{width:220px;flex-shrink:0;background:var(--color-bg-surface);border-right:1px solid var(--color-border-default);padding:var(--space-stack-lg) 0;position:sticky;top:0;height:100vh;overflow-y:auto}.studio-sidebar-logo{padding:0 var(--space-inline-lg) var(--space-stack-lg);border-bottom:1px solid var(--color-border-default);margin-bottom:var(--space-stack-md)}.studio-sidebar-logo h1{font-size:14px;font-weight:var(--prim-font-weight-semibold);color:var(--color-text-primary);line-height:20px}.studio-sidebar-logo p{font-size:11px;color:var(--color-text-tertiary);margin-top:2px}.studio-nav-section{margin-bottom:var(--space-stack-md)}.studio-nav-section-title{font-size:11px;font-weight:var(--prim-font-weight-semibold);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em;padding:0 var(--space-inline-lg);margin-bottom:var(--space-stack-xs)}.studio-nav-item{display:block;padding:var(--space-stack-xs) var(--space-inline-lg);font-size:13px;color:var(--color-text-secondary);cursor:pointer;text-decoration:none;border-radius:0;transition:background-color var(--motion-duration-fast) var(--motion-easing-standard),color var(--motion-duration-fast) var(--motion-easing-standard)}.studio-nav-item:hover{background:var(--color-bg-canvas);color:var(--color-text-primary)}.studio-nav-item.active{background:var(--color-bg-brand-subtle);color:var(--color-brand-primary);font-weight:var(--prim-font-weight-medium)}.studio-content{flex:1;overflow-y:auto;padding:var(--space-stack-xl) var(--space-inline-xl);max-width:900px}.studio-theme-toggle{position:fixed;top:var(--space-stack-md);right:var(--space-inline-lg);z-index:var(--z-sticky);background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-button);padding:var(--space-stack-xs) var(--space-inline-md);font-size:13px;color:var(--color-text-secondary);cursor:pointer;box-shadow:var(--shadow-elevation-1);transition:background-color var(--motion-duration-fast) var(--motion-easing-standard)}.studio-theme-toggle:hover{background:var(--color-bg-canvas);color:var(--color-text-primary)}.page-title{font-size:24px;font-weight:var(--prim-font-weight-bold);color:var(--color-text-primary);line-height:32px;margin-bottom:var(--space-stack-xs)}.page-subtitle{font-size:14px;color:var(--color-text-tertiary);line-height:20px;margin-bottom:var(--space-stack-xl)}.section-title{font-size:16px;font-weight:var(--prim-font-weight-semibold);color:var(--color-text-primary);line-height:24px;margin-top:var(--space-stack-xl);margin-bottom:var(--space-stack-md)}.divider{height:1px;background:var(--color-border-default);margin:var(--space-stack-xl) 0}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-stack-md);margin-bottom:var(--space-stack-lg)}.swatch-item{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border-default)}.swatch-color{height:48px;width:100%}.swatch-meta{padding:var(--space-stack-xs) var(--space-inline-sm);background:var(--color-bg-surface)}.swatch-name{font-size:11px;font-weight:var(--prim-font-weight-medium);color:var(--color-text-primary);font-family:var(--prim-font-family-mono)}.swatch-value{font-size:10px;color:var(--color-text-tertiary);font-family:var(--prim-font-family-mono);margin-top:2px}@keyframes skeleton-shimmer{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.skeleton-pulse{animation:skeleton-shimmer 1.5s var(--motion-easing-standard) infinite;background:var(--comp-skeleton-base);border-radius:var(--comp-skeleton-radius)}