frontend/src/index.css

@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --radius: 0.75rem;
  --background: oklch(0.95 0.005 90);
  --foreground: oklch(0.129 0.042 264.695);
  --card: oklch(0.97 0.003 90);
  --card-foreground: var(--foreground);
  --popover: oklch(0.99 0.003 90);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.208 0.042 265.755);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.92 0.007 90);
  --secondary-foreground: var(--primary);
  --muted: oklch(0.9 0.008 90);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent: oklch(0.88 0.009 90);
  --accent-foreground: var(--primary);
  --destructive: oklch(0.62 0.22 25.5);
  --border: oklch(0.85 0.01 90);
  --input: oklch(0.85 0.01 90);
  --ring: oklch(0.704 0.04 256.788);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);

  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: oklch(0.92 0.007 90);
  --sidebar-accent-foreground: var(--primary);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);

  /* Default Elevation */
  --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.04);
  --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
  --shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0 20px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 8px 10px -1px rgba(0, 0, 0, 0.06);
  --shadow-2xl: 0 1px 3px 0px rgba(0, 0, 0, 0.12);

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: oklch(0.985 0.003 90);
  --table-header: var(--muted);
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.14 0.04 259.21);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.3 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.68 0.2 22.5);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: oklch(1 0 0 / 8%);
  --table-header: var(--muted);
}

/* ===== COLOR SCHEMES ===== */

.claude {
  --background: #f0f0ef;
  --foreground: #292524;
  --card: #f5f5f4;
  --card-foreground: #292524;
  --popover: #fafaf9;
  --popover-foreground: #292524;
  --primary: #b05d2e; /* 核心主色 (类似图1的深棕色) */
  --primary-foreground: #ffffff;
  --secondary: #ebe9e8; /* 非常淡的暖灰线 */
  --secondary-foreground: #292524;
  --muted: #e0ddd9; /* 暖灰色背景 */
  --muted-foreground: #78716c; /* 稍深的灰色文本，提高对比度 */
  --accent: #ebe3db; /* 浅棕色背景 */
  --accent-foreground: #292524;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #d8d4cf; /* 更柔和的边框 */
  --input: #d8d4cf;
  --ring: #b05d2e;
  --chart-1: #b05d2e; /* 核心主色 */
  --chart-2: #7a381d; /* 深棕色 */
  --chart-3: #e0b6a1; /* 中棕色 */
  --chart-4: #f5ebe6; /* 浅棕色 */
  --chart-5: #f5f5f4; /* 暖背景 */
  --sidebar: var(--card);
  --sidebar-foreground: #292524;
  --sidebar-primary: #b05d2e;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #ebe9e8;
  --sidebar-accent-foreground: #292524;
  --sidebar-border: #d8d4cf;
  --sidebar-ring: #b05d2e;
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.75rem; /* 更大的圆角 */
  --shadow-2xs: 0 1px 3px 0px rgba(176, 93, 46, 0.04);
  --shadow-xs: 0 1px 3px 0px rgba(176, 93, 46, 0.04);
  --shadow-sm: 0 20px 40px -15px rgba(176, 93, 46, 0.1); /* 阴影带暖色调 */
  --shadow: 0 20px 40px -12px rgba(176, 93, 46, 0.15); /* 悬浮时暖色阴影 */
  --shadow-md: 0 20px 40px -12px rgba(176, 93, 46, 0.15);
  --shadow-lg: 0 0 20px rgba(176, 93, 46, 0.2); /* 发光阴影 */
  --shadow-xl: 0 8px 10px -1px rgba(176, 93, 46, 0.08);
  --shadow-2xl: 0 1px 3px 0px rgba(176, 93, 46, 0.2);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: #f8f7f6;
  --table-header: var(--muted);
}

.dark.claude {
  --background: oklch(0.22 0.002 106); /* Darker background */
  --foreground: oklch(0.8074 0.0142 93.0137);
  --card: oklch(0.28 0.004 106); /* Lighter card for contrast */
  --card-foreground: var(--foreground);
  --popover: oklch(0.3085 0.0035 106.6039);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.6724 0.1308 38.7559);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9818 0.0054 95.0986);
  --secondary-foreground: oklch(0.3085 0.0035 106.6039);
  --muted: oklch(0.2213 0.0038 106.707);
  --muted-foreground: oklch(0.7713 0.0169 99.0657);
  --accent: oklch(0.3 0.0078 95.4245);
  --accent-foreground: oklch(0.9663 0.008 98.8792);
  --destructive: oklch(0.64 0.21 26);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.3618 0.0101 106.8928);
  --input: oklch(0.4336 0.0113 100.2195);
  --ring: oklch(0.6724 0.1308 38.7559);
  --chart-1: oklch(0.5583 0.1276 42.9956);
  --chart-2: oklch(0.6898 0.1581 290.4107);
  --chart-3: oklch(0.65 0.1 60);
  --chart-4: oklch(0.3074 0.0516 289.323);
  --chart-5: oklch(0.5608 0.1348 42.0584);
  --sidebar: oklch(0.2357 0.0024 67.7077);
  --sidebar-foreground: oklch(0.8074 0.0142 93.0137);
  --sidebar-primary: oklch(0.325 0 0);
  --sidebar-primary-foreground: oklch(0.9881 0 0);
  --sidebar-accent: oklch(0.168 0.002 106.6177);
  --sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);
  --sidebar-border: oklch(0.9401 0 0);
  --sidebar-ring: oklch(0.7731 0 0);
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 20px rgba(255, 255, 255, 0.1);
  --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: oklch(1 0 0 / 8%);
  --table-header: var(--muted);
}

/* Blue Color Scheme (Default) */
.blue {
  --background: oklch(0.95 0.008 260);
  --foreground: oklch(0.3211 0 0);
  --card: oklch(0.97 0.005 260);
  --card-foreground: var(--foreground);
  --popover: oklch(0.985 0.005 260);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.6231 0.188 259.8145);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.92 0.008 260);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.9 0.01 260);
  --muted-foreground: oklch(0.45 0.02 260);
  --accent: oklch(0.88 0.015 260);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.64 0.21 26);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.85 0.01 260);
  --input: oklch(0.85 0.01 260);
  --ring: oklch(0.6231 0.188 259.8145);
  --chart-1: oklch(0.6231 0.188 259.8145);
  --chart-2: oklch(0.5461 0.2152 262.8809);
  --chart-3: oklch(0.4882 0.2172 264.3763);
  --chart-4: oklch(0.4244 0.1809 265.6377);
  --chart-5: oklch(0.3791 0.1378 265.5222);
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: oklch(0.6231 0.188 259.8145);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.92 0.008 260);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: oklch(0.85 0.01 260);
  --sidebar-ring: oklch(0.6231 0.188 259.8145);
  --font-sans: Inter, sans-serif;
  --font-serif: Source Serif 4, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(59, 130, 246, 0.04);
  --shadow-xs: 0 1px 3px 0px rgba(59, 130, 246, 0.04);
  --shadow-sm: 0 20px 40px -15px rgba(59, 130, 246, 0.1);
  --shadow: 0 20px 40px -12px rgba(59, 130, 246, 0.15);
  --shadow-md: 0 20px 40px -12px rgba(59, 130, 246, 0.15);
  --shadow-lg: 0 0 20px rgba(59, 130, 246, 0.2);
  --shadow-xl: 0 8px 10px -1px rgba(59, 130, 246, 0.08);
  --shadow-2xl: 0 1px 3px 0px rgba(59, 130, 246, 0.2);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: oklch(0.985 0.005 260);
  --table-header: var(--muted);
}

.dark.blue {
  --background: oklch(0.18 0.01 260); /* Very dark blue background */
  --foreground: oklch(0.9219 0 0);
  --card: oklch(0.24 0.02 260); /* Lighter blue card */
  --card-foreground: var(--foreground);
  --popover: oklch(0.26 0.02 260);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.6231 0.188 259.8145);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.22 0.01 260);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.2 0.01 260);
  --muted-foreground: oklch(0.7 0.02 260);
  --accent: oklch(0.3 0.03 260);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.64 0.21 26);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.28 0.02 260);
  --input: oklch(0.28 0.02 260);
  --ring: oklch(0.6231 0.188 259.8145);
  --chart-1: oklch(0.7137 0.1434 254.624);
  --chart-2: oklch(0.6231 0.188 259.8145);
  --chart-3: oklch(0.5461 0.2152 262.8809);
  --chart-4: oklch(0.4882 0.2172 264.3763);
  --chart-5: oklch(0.4244 0.1809 265.6377);
  --sidebar: oklch(0.16 0.01 260);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: oklch(0.6231 0.188 259.8145);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.24 0.02 260);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: oklch(0.28 0.02 260);
  --sidebar-ring: oklch(0.6231 0.188 259.8145);
  --font-sans: Inter, sans-serif;
  --font-serif: Source Serif 4, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.75rem;
  --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 20px rgba(59, 130, 246, 0.2);
  --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: oklch(1 0 0 / 8%);
  --table-header: var(--muted);
}

/* Green Color Scheme */
.green {
  --background: oklch(0.95 0.008 160);
  --foreground: oklch(0.2046 0 0);
  --card: oklch(0.97 0.005 160);
  --card-foreground: var(--foreground);
  --popover: oklch(0.985 0.005 160);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.8348 0.1302 160.908);
  --primary-foreground: oklch(0.2626 0.0147 166.4589);
  --secondary: oklch(0.92 0.008 160); /* Softer green line */
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.9 0.01 160); /* Light green-gray background */
  --muted-foreground: oklch(0.45 0.02 160); /* Darker green-gray text */
  --accent: oklch(0.88 0.015 160); /* Distinct green-ish accent */
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.5523 0.1927 32.7272);
  --border: oklch(0.85 0.01 160); /* Subtle green border */
  --input: oklch(0.85 0.01 160);
  --ring: oklch(0.8348 0.1302 160.908);
  --chart-1: oklch(0.8348 0.1302 160.908);
  --chart-2: oklch(0.6231 0.188 259.8145);
  --chart-3: oklch(0.6056 0.2189 292.7172);
  --chart-4: oklch(0.7686 0.1647 70.0804);
  --chart-5: oklch(0.6959 0.1491 162.4796);
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: oklch(0.92 0.008 160);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: oklch(0.85 0.01 160);
  --sidebar-ring: var(--primary);
  --font-sans: 'Open Sans', system-ui, -apple-system, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(34, 197, 94, 0.04);
  --shadow-xs: 0 1px 3px 0px rgba(34, 197, 94, 0.04);
  --shadow-sm: 0 20px 40px -15px rgba(34, 197, 94, 0.1);
  --shadow: 0 20px 40px -12px rgba(34, 197, 94, 0.15);
  --shadow-md: 0 20px 40px -12px rgba(34, 197, 94, 0.15);
  --shadow-lg: 0 0 20px rgba(34, 197, 94, 0.2);
  --shadow-xl: 0 8px 10px -1px rgba(34, 197, 94, 0.08);
  --shadow-2xl: 0 1px 3px 0px rgba(34, 197, 94, 0.2);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: oklch(0.985 0.005 160);
  --table-header: var(--muted);
}

.dark.green {
  --background: oklch(0.18 0.01 160); /* Very dark green background */
  --foreground: oklch(0.9288 0.0126 255.5078);
  --card: oklch(0.24 0.02 160); /* Slightly lighter green card */
  --card-foreground: var(--foreground);
  --popover: oklch(0.2603 0 0);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.4365 0.1044 156.7556);
  --primary-foreground: oklch(0.9213 0.0135 167.1556);
  --secondary: oklch(0.2603 0 0);
  --secondary-foreground: oklch(0.9851 0 0);
  --muted: oklch(0.2393 0 0);
  --muted-foreground: oklch(0.7122 0 0);
  --accent: oklch(0.3132 0 0);
  --accent-foreground: oklch(0.9851 0 0);
  --destructive: oklch(0.3123 0.0852 29.7877);
  --border: oklch(0.2809 0 0);
  --input: oklch(0.2603 0 0);
  --ring: oklch(0.8003 0.1821 151.711);
  --chart-1: oklch(0.8003 0.1821 151.711);
  --chart-2: oklch(0.7137 0.1434 254.624);
  --chart-3: oklch(0.709 0.1592 293.5412);
  --chart-4: oklch(0.8369 0.1644 84.4286);
  --chart-5: oklch(0.7845 0.1325 181.912);
  --sidebar: oklch(0.1822 0 0);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: oklch(0.4365 0.1044 156.7556);
  --sidebar-primary-foreground: oklch(0.9213 0.0135 167.1556);
  --sidebar-accent: oklch(0.3132 0 0);
  --sidebar-accent-foreground: oklch(0.9851 0 0);
  --sidebar-border: oklch(0.2809 0 0);
  --sidebar-ring: oklch(0.8003 0.1821 151.711);
  --font-sans: 'Open Sans', system-ui, -apple-system, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 20px rgba(34, 197, 94, 0.2);
  --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: oklch(1 0 0 / 8%);
  --table-header: var(--muted);
}

/* Purple Color Scheme */
.purple {
  --background: oklch(0.95 0.008 280);
  --foreground: oklch(0.4355 0.043 279.325);
  --card: oklch(0.97 0.005 280);
  --card-foreground: oklch(0.4355 0.043 279.325);
  --popover: oklch(0.985 0.005 280);
  --popover-foreground: oklch(0.4355 0.043 279.325);
  --primary: oklch(0.5547 0.2503 297.0156);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.92 0.008 280);
  --secondary-foreground: oklch(0.4355 0.043 279.325);
  --muted: oklch(0.9 0.01 280);
  --muted-foreground: oklch(0.45 0.035 279);
  --accent: oklch(0.88 0.015 280);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.59 0.22 22);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.85 0.01 280);
  --input: oklch(0.85 0.01 280);
  --ring: oklch(0.5547 0.2503 297.0156);
  --chart-1: oklch(0.5547 0.2503 297.0156);
  --chart-2: oklch(0.682 0.1448 235.3822);
  --chart-3: oklch(0.625 0.1772 140.4448);
  --chart-4: oklch(0.692 0.2041 42.4293);
  --chart-5: oklch(0.7141 0.1045 33.0967);
  --sidebar: var(--card);
  --sidebar-foreground: oklch(0.4355 0.043 279.325);
  --sidebar-primary: oklch(0.5547 0.2503 297.0156);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.92 0.008 280);
  --sidebar-accent-foreground: oklch(1 0 0);
  --sidebar-border: oklch(0.85 0.01 280);
  --sidebar-ring: oklch(0.5547 0.2503 297.0156);
  --font-sans: Montserrat, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Fira Code, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(139, 92, 246, 0.04);
  --shadow-xs: 0 1px 3px 0px rgba(139, 92, 246, 0.04);
  --shadow-sm: 0 20px 40px -15px rgba(139, 92, 246, 0.1);
  --shadow: 0 20px 40px -12px rgba(139, 92, 246, 0.15);
  --shadow-md: 0 20px 40px -12px rgba(139, 92, 246, 0.15);
  --shadow-lg: 0 0 20px rgba(139, 92, 246, 0.2);
  --shadow-xl: 0 8px 10px -1px rgba(139, 92, 246, 0.08);
  --shadow-2xl: 0 1px 3px 0px rgba(139, 92, 246, 0.2);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: oklch(0.985 0.005 280);
  --table-header: var(--muted);
}

.dark.purple {
  --background: oklch(0.18 0.01 280); /* Very dark purple background */
  --foreground: oklch(0.8787 0.0426 272.2767);
  --card: oklch(0.24 0.02 280); /* Lighter purple card */
  --card-foreground: var(--foreground);
  --popover: oklch(0.26 0.02 280);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.7871 0.1187 304.7693);
  --primary-foreground: oklch(0.2429 0.0304 283.911);
  --secondary: oklch(0.22 0.01 280);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.2 0.01 280);
  --muted-foreground: oklch(0.751 0.0396 273.932);
  --accent: oklch(0.3 0.03 280);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.64 0.21 26);
  --destructive-foreground: oklch(0.2429 0.0304 283.911);
  --border: oklch(0.28 0.02 280);
  --input: oklch(0.28 0.02 280);
  --ring: oklch(0.7871 0.1187 304.7693);
  --chart-1: oklch(0.7871 0.1187 304.7693);
  --chart-2: oklch(0.8467 0.0833 210.2545);
  --chart-3: oklch(0.8577 0.1092 142.7153);
  --chart-4: oklch(0.8237 0.1015 52.6294);
  --chart-5: oklch(0.9226 0.0238 30.4919);
  --sidebar: oklch(0.16 0.01 280);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: oklch(0.7871 0.1187 304.7693);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: oklch(0.24 0.02 280);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: oklch(0.28 0.02 280);
  --sidebar-ring: oklch(0.7871 0.1187 304.7693);
  --font-sans: Montserrat, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Fira Code, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 20px rgba(139, 92, 246, 0.2);
  --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: oklch(1 0 0 / 8%);
  --table-header: var(--muted);
}

/* Hover Card Effect */
.hover-card {
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.hover-card:hover {
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
  border-color: var(--primary);
}

/* 表格行悬浮效果 */
.table-row-hover {
  transition: all 0.2s ease;
}
.table-row-hover:hover {
  background-color: var(--accent) !important;
  transform: scale(1.005);
  box-shadow: var(--shadow-sm);
  border-color: var(--primary);
  z-index: 10;
  position: relative;
  border-radius: 12px;
}
.table-row-hover:hover > * {
  background-color: var(--accent) !important;
}

/* 隐藏默认复选框，使用自定义样式 */
.custom-checkbox input:checked + div {
  background-color: var(--primary);
  border-color: var(--primary);
}
.custom-checkbox input:checked + div svg {
  display: block;
}

/* 胶囊滚动条隐藏 */
.hide-scroll {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.hide-scroll::-webkit-scrollbar {
  display: none;
}

/* Orange Color Scheme */
.orange {
  --background: oklch(0.95 0.008 70); /* Softer orange-gray background */
  --foreground: oklch(0.2686 0 0);
  --card: oklch(0.97 0.005 70); /* Slightly tinted cards */
  --card-foreground: var(--foreground);
  --popover: oklch(0.985 0.005 70);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.7686 0.1647 70.0804);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.92 0.008 70);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.9 0.01 70);
  --muted-foreground: oklch(0.45 0.02 70);
  --accent: oklch(0.88 0.015 70);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.64 0.21 26);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.85 0.01 70);
  --input: oklch(0.85 0.01 70);
  --ring: oklch(0.7686 0.1647 70.0804);
  --chart-1: oklch(0.7686 0.1647 70.0804);
  --chart-2: oklch(0.6658 0.1574 58.3183);
  --chart-3: oklch(0.5553 0.1455 48.9975);
  --chart-4: oklch(0.4732 0.1247 46.2007);
  --chart-5: oklch(0.4137 0.1054 45.9038);
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: oklch(0.7686 0.1647 70.0804);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.92 0.008 70);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: oklch(0.85 0.01 70);
  --sidebar-ring: oklch(0.7686 0.1647 70.0804);
  --font-sans: Inter, sans-serif;
  --font-serif: Source Serif 4, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(234, 88, 12, 0.04);
  --shadow-xs: 0 1px 3px 0px rgba(234, 88, 12, 0.04);
  --shadow-sm: 0 20px 40px -15px rgba(234, 88, 12, 0.1);
  --shadow: 0 20px 40px -12px rgba(234, 88, 12, 0.15);
  --shadow-md: 0 20px 40px -12px rgba(234, 88, 12, 0.15);
  --shadow-lg: 0 0 20px rgba(234, 88, 12, 0.2);
  --shadow-xl: 0 8px 10px -1px rgba(234, 88, 12, 0.08);
  --shadow-2xl: 0 1px 3px 0px rgba(234, 88, 12, 0.2);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: oklch(0.985 0.005 70);
  --table-header: var(--muted);
}

.dark.orange {
  --background: oklch(0.18 0.01 70); /* Very dark orange-gray background */
  --foreground: oklch(0.9219 0 0);
  --card: oklch(0.24 0.02 70); /* Slightly lighter card */
  --card-foreground: var(--foreground);
  --popover: oklch(0.26 0.02 70);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.7686 0.1647 70.0804);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.22 0.01 70);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.2 0.01 70);
  --muted-foreground: oklch(0.7155 0 0);
  --accent: oklch(0.3 0.03 70);
  --accent-foreground: oklch(0.9243 0.1151 95.7459);
  --destructive: oklch(0.64 0.21 26);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.28 0.02 70);
  --input: oklch(0.28 0.02 70);
  --ring: oklch(0.7686 0.1647 70.0804);
  --chart-1: oklch(0.8369 0.1644 84.4286);
  --chart-2: oklch(0.6658 0.1574 58.3183);
  --chart-3: oklch(0.4732 0.1247 46.2007);
  --chart-4: oklch(0.5553 0.1455 48.9975);
  --chart-5: oklch(0.4732 0.1247 46.2007);
  --sidebar: oklch(0.16 0.01 70);
  --sidebar-foreground: oklch(0.9219 0 0);
  --sidebar-primary: oklch(0.7686 0.1647 70.0804);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.24 0.02 70);
  --sidebar-accent-foreground: oklch(0.9243 0.1151 95.7459);
  --sidebar-border: oklch(0.28 0.02 70);
  --sidebar-ring: oklch(0.7686 0.1647 70.0804);
  --font-sans: Inter, sans-serif;
  --font-serif: Source Serif 4, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 20px rgba(234, 88, 12, 0.2);
  --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
}

/* Red Color Scheme */
.red {
  --background: oklch(0.95 0.008 15); /* Softer red-gray background */
  --foreground: oklch(0.3257 0.1161 325.0372);
  --card: oklch(0.97 0.005 15); /* Slightly tinted cards */
  --card-foreground: var(--foreground);
  --popover: oklch(0.985 0.005 15);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.5316 0.1409 355.1999);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.92 0.008 15);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.9 0.01 15);
  --muted-foreground: oklch(0.45 0.02 15);
  --accent: oklch(0.88 0.015 15);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.5248 0.1368 20.8317);
  --border: oklch(0.85 0.01 15);
  --input: oklch(0.85 0.01 15);
  --ring: oklch(0.5916 0.218 0.5844);
  --chart-1: oklch(0.6038 0.2363 344.4657);
  --chart-2: oklch(0.4445 0.2251 300.6246);
  --chart-3: oklch(0.379 0.0438 226.1538);
  --chart-4: oklch(0.833 0.1185 88.3461);
  --chart-5: oklch(0.7843 0.1256 58.9964);
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: oklch(0.5316 0.1409 355.1999);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.92 0.008 15);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: oklch(0.85 0.01 15);
  --sidebar-ring: oklch(0.5916 0.218 0.5844);
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(220, 38, 38, 0.04);
  --shadow-xs: 0 1px 3px 0px rgba(220, 38, 38, 0.04);
  --shadow-sm: 0 20px 40px -15px rgba(220, 38, 38, 0.1);
  --shadow: 0 20px 40px -12px rgba(220, 38, 38, 0.15);
  --shadow-md: 0 20px 40px -12px rgba(220, 38, 38, 0.15);
  --shadow-lg: 0 0 20px rgba(220, 38, 38, 0.2);
  --shadow-xl: 0 8px 10px -1px rgba(220, 38, 38, 0.08);
  --shadow-2xl: 0 1px 3px 0px rgba(220, 38, 38, 0.2);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: oklch(0.985 0.005 15);
  --table-header: var(--muted);
}

.dark.red {
  --background: oklch(0.18 0.01 15); /* Very dark red background */
  --foreground: oklch(0.8398 0.0387 309.5391);
  --card: oklch(0.24 0.02 15); /* Slightly lighter red card */
  --card-foreground: var(--foreground);
  --popover: oklch(0.26 0.02 15);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.4607 0.1853 4.0994);
  --primary-foreground: oklch(0.856 0.0618 346.3684);
  --secondary: oklch(0.22 0.01 15);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.2 0.01 15);
  --muted-foreground: oklch(0.794 0.0372 307.1032);
  --accent: oklch(0.3 0.03 15);
  --accent-foreground: oklch(0.9647 0.0091 341.8035);
  --destructive: oklch(0.2258 0.0524 12.6119);
  --border: oklch(0.28 0.02 15);
  --input: oklch(0.28 0.02 15);
  --ring: oklch(0.5916 0.218 0.5844);
  --chart-1: oklch(0.5316 0.1409 355.1999);
  --chart-2: oklch(0.5633 0.1912 306.8561);
  --chart-3: oklch(0.7227 0.1502 60.5799);
  --chart-4: oklch(0.6193 0.2029 312.7422);
  --chart-5: oklch(0.6118 0.2093 6.1387);
  --sidebar: oklch(0.16 0.01 15);
  --sidebar-foreground: oklch(0.8607 0.0293 343.6612);
  --sidebar-primary: oklch(0.4882 0.2172 264.3763);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.24 0.02 15);
  --sidebar-accent-foreground: oklch(0.9674 0.0013 286.3752);
  --sidebar-border: oklch(0 0 0);
  --sidebar-ring: oklch(0.5916 0.218 0.5844);
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 20px rgba(220, 38, 38, 0.2);
  --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
}

.black {
  --background: oklch(0.97 0 0); /* Softer gray background */
  --foreground: oklch(0 0 0);
  --card: oklch(0.985 0 0); /* Slightly off-white cards */
  --card-foreground: var(--foreground);
  --popover: oklch(0.985 0 0);
  --popover-foreground: var(--foreground);
  --primary: oklch(0 0 0);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.92 0 0);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.9 0 0);
  --muted-foreground: oklch(0.4 0 0);
  --accent: oklch(0.88 0 0);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.63 0.19 23.03);
  --border: oklch(0.85 0 0);
  --input: oklch(0.85 0 0);
  --ring: oklch(0 0 0);
  --chart-1: oklch(0.81 0.17 75.35);
  --chart-2: oklch(0.55 0.22 264.53);
  --chart-3: oklch(0.72 0 0);
  --chart-4: oklch(0.92 0 0);
  --chart-5: oklch(0.56 0 0);
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: oklch(0 0 0);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.92 0 0);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: oklch(0.85 0 0);
  --sidebar-ring: oklch(0 0 0);
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.04);
  --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
  --shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0 20px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 8px 10px -1px rgba(0, 0, 0, 0.06);
  --shadow-2xl: 0 1px 3px 0px rgba(0, 0, 0, 0.12);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Table specific colors */
  --table-background: var(--card);
  --table-border: oklch(0.985 0 0);
  --table-header: var(--muted);
}

.dark.black {
  --background: oklch(0.12 0 0); /* Very dark gray background */
  --foreground: oklch(1 0 0);
  --card: oklch(0.18 0 0); /* Slightly lighter card */
  --card-foreground: var(--foreground);
  --popover: oklch(0.2 0 0);
  --popover-foreground: var(--foreground);
  --primary: oklch(1 0 0);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.16 0 0);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.14 0 0);
  --muted-foreground: oklch(0.72 0 0);
  --accent: oklch(0.26 0 0);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.69 0.2 23.91);
  --border: oklch(0.22 0 0);
  --input: oklch(0.22 0 0);
  --ring: oklch(0.72 0 0);
  --chart-1: oklch(0.81 0.17 75.35);
  --chart-2: oklch(0.58 0.21 260.84);
  --chart-3: oklch(0.56 0 0);
  --chart-4: oklch(0.44 0 0);
  --chart-5: oklch(0.92 0 0);
  --sidebar: oklch(0.1 0 0);
  --sidebar-foreground: oklch(1 0 0);
  --sidebar-primary: oklch(1 0 0);
  --sidebar-primary-foreground: oklch(0 0 0);
  --sidebar-accent: oklch(0.18 0 0);
  --sidebar-accent-foreground: oklch(1 0 0);
  --sidebar-border: oklch(0.18 0 0);
  --sidebar-ring: oklch(0.72 0 0);
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 20px rgba(255, 255, 255, 0.1);
  --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
}

/* Cream Color Scheme - Using provided colors */
.cream {
  --background: #f5f5f0; /* Light cream background (similar to claude) */
  --foreground: #333333;
  --card: #fafaf9; /* Slightly lighter cream cards */
  --card-foreground: #333333;
  --popover: #fafaf9;
  --popover-foreground: #333333;
  --primary: #a2af9b; /* Sage green primary */
  --primary-foreground: #ffffff; /* White text on sage green */
  --ring: #a2af9b;
  --secondary: #f0f0ef;
  --secondary-foreground: #333333;
  --muted: #e8e7dc;
  --muted-foreground: #666666;
  --accent: #e0dfd0;
  --accent-foreground: #333333;
  --destructive: oklch(0.64 0.21 26); /* Red for destructive actions */
  --destructive-foreground: #ffffff;
  --border: #d4d3c5;
  --input: #d4d3c5;
  --sidebar: #fafaf9;
  --sidebar-foreground: #333333;
  --sidebar-primary: #a2af9b;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-ring: #a2af9b;
  --sidebar-accent: #f0f0ef;
  --sidebar-accent-foreground: #333333;
  --sidebar-border: #d4d3c5;
  --chart-1: #a2af9b; /* Sage green */
  --chart-2: #dccfc0; /* Warm beige */
  --chart-3: #8b9a8a; /* Darker sage */
  --chart-4: #c9b8a8; /* Darker beige */
  --chart-5: #7a8a79; /* Deep sage */
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(162, 175, 155, 0.05);
  --shadow-xs: 0 1px 3px 0px rgba(162, 175, 155, 0.05);
  --shadow-sm: 0 10px 20px -5px rgba(162, 175, 155, 0.08);
  --shadow: 0 15px 30px -10px rgba(162, 175, 155, 0.12);
  --shadow-md: 0 15px 30px -10px rgba(162, 175, 155, 0.12);
  --shadow-lg: 0 0 15px rgba(162, 175, 155, 0.15);
  --shadow-xl: 0 8px 10px -1px rgba(162, 175, 155, 0.08);
  --shadow-2xl: 0 1px 3px 0px rgba(162, 175, 155, 0.15);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

.dark.cream {
  --background: oklch(0.22 0.005 80); /* Dark cream background */
  --foreground: oklch(0.9219 0 0);
  --card: oklch(0.28 0.01 80); /* Lighter cream card */
  --card-foreground: var(--foreground);
  --popover: oklch(0.2686 0 0);
  --popover-foreground: var(--foreground);
  --primary: #a2af9b; /* Keep sage green for dark mode */
  --primary-foreground: #1a1a1a; /* Dark text on sage green */
  --ring: #a2af9b;
  --secondary: oklch(0.2686 0 0);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.2686 0 0);
  --muted-foreground: oklch(0.7155 0 0);
  --accent: oklch(0.32 0.02 80);
  --accent-foreground: oklch(0.9243 0.1151 95.7459);
  --destructive: oklch(0.64 0.21 26); /* Red for destructive actions */
  --destructive-foreground: #ffffff;
  --sidebar: var(--background);
  --sidebar-foreground: var(--foreground);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-primary: #a2af9b;
  --sidebar-primary-foreground: #1a1a1a;
  --sidebar-ring: #a2af9b;
  --sidebar-accent: #3a3a3a;
  --sidebar-accent-foreground: #dccfc0;
  --chart-1: #a2af9b; /* Sage green */
  --chart-2: #dccfc0; /* Warm beige */
  --chart-3: #b5c2b0; /* Lighter sage for dark mode */
  --chart-4: #e0d3c4; /* Lighter beige for dark mode */
  --chart-5: #8fa08e; /* Medium sage */
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 20px rgba(162, 175, 155, 0.2);
  --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
}

@theme inline {
  /* Color System */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* Data Visualization */
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  /* Brand Colors */
  --color-brand-50: #fbf7f5;
  --color-brand-100: #f5ebe6;
  --color-brand-200: #edd5c8;
  --color-brand-300: #e0b6a1;
  --color-brand-400: #d08d6e;
  --color-brand-500: #b05d2e;
  --color-brand-600: #964823;
  --color-brand-700: #7a381d;
  --color-brand-800: #632e1a;
  --color-brand-900: #512718;

  /* Navigation */
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* Typography */
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  /* Border Radius */
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) * 1.5);
  --radius-xl: calc(var(--radius) * 2);

  /* Elevation */
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  html {
    @apply overflow-x-hidden;
  }
  body {
    @apply bg-background text-foreground min-h-svh w-full;
  }

  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }

  /* Prevent focus zoom on mobile devices */
  @media screen and (max-width: 767px) {
    input,
    select,
    textarea {
      font-size: 16px !important;
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}

@utility no-scrollbar {
  /* Hide scrollbar for Chrome, Safari and Opera */
  &::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

@utility faded-bottom {
  @apply after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:hidden after:h-32 after:w-full after:bg-[linear-gradient(180deg,_transparent_10%,_var(--background)_70%)] md:after:block;
}

/* styles.css */
.CollapsibleContent {
  overflow: hidden;
}
.CollapsibleContent[data-state='open'] {
  animation: slideDown 300ms ease-out;
}
.CollapsibleContent[data-state='closed'] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

/* Particle float animation */
@keyframes particle-float {
  0%,
  100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-15px) translateX(5px);
    opacity: 1;
  }
  50% {
    transform: translateY(-5px) translateX(-8px);
    opacity: 0.8;
  }
  75% {
    transform: translateY(-20px) translateX(3px);
    opacity: 0.9;
  }
}

/* Matrix digital rain */
@keyframes matrix-rain {
  0% {
    transform: translateY(-100vh);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* Data flow animation */
@keyframes data-flow {
  0% {
    transform: translateX(-100%) scaleX(0);
    opacity: 0;
  }
  20% {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
  }
  80% {
    transform: translateX(50%) scaleX(1);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) scaleX(0);
    opacity: 0;
  }
}

/* Binary code stream */
@keyframes binary-stream {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(100vw);
    opacity: 0;
  }
}

/* Low-poly grid animation */
@keyframes grid-pulse {
  0%,
  100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.05);
  }
}

/* Animation classes */
.animate-particle-float {
  animation: particle-float 8s ease-in-out infinite;
}

.animate-matrix-rain {
  animation: matrix-rain 6s linear infinite;
}

.animate-data-flow {
  animation: data-flow 4s ease-in-out infinite;
}

.animate-binary-stream {
  animation: binary-stream 15s linear infinite;
}

.animate-grid-pulse {
  animation: grid-pulse 4s ease-in-out infinite;
}

/* Tech grid background */
.tech-grid {
  background-image:
    linear-gradient(rgba(0, 255, 157, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 157, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: grid-pulse 6s ease-in-out infinite;
}

/* Low-poly network pattern */
.low-poly-network {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(0, 255, 157, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 46, 77, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(240, 240, 240, 0.05) 0%, transparent 50%);
}

/* ===== STARRY COLOR SCHEME - Deep Blue Space Theme ===== */
.starry {
  --background: oklch(0.94 0.01 240); /* Light blue background (similar to blue theme) */
  --foreground: oklch(0.12 0.08 240);
  --card: oklch(0.97 0.005 240); /* Light blue cards */
  --card-foreground: var(--foreground);
  --popover: oklch(0.985 0.005 240);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.65 0.22 210); /* Bright cyan-blue */
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.92 0.01 240);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.9 0.01 240);
  --muted-foreground: oklch(0.4 0.04 240);
  --accent: oklch(0.88 0.02 240);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.6 0.25 15);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.85 0.02 240);
  --input: oklch(0.85 0.02 240);
  --ring: oklch(0.65 0.22 210);
  --chart-1: oklch(0.65 0.22 210);
  --chart-2: oklch(0.72 0.18 200);
  --chart-3: oklch(0.58 0.2 195);
  --chart-4: oklch(0.8 0.15 185);
  --chart-5: oklch(0.45 0.18 225);
  --sidebar: oklch(0.97 0.005 240);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.92 0.01 240);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: oklch(0.85 0.02 240);
  --sidebar-ring: var(--primary);
  --font-sans: 'Inter', 'SF Pro Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'SF Pro Display', ui-serif, Georgia, Cambria, serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(0, 100, 255, 0.05);
  --shadow-xs: 0 1px 3px 0px rgba(0, 100, 255, 0.05);
  --shadow-sm: 0 20px 40px -15px rgba(0, 100, 255, 0.12);
  --shadow: 0 20px 40px -12px rgba(0, 100, 255, 0.2);
  --shadow-md: 0 20px 40px -12px rgba(0, 100, 255, 0.2);
  --shadow-lg: 0 0 20px rgba(0, 100, 255, 0.25);
  --shadow-xl: 0 8px 10px -1px rgba(0, 100, 255, 0.1);
  --shadow-2xl: 0 1px 3px 0px rgba(0, 100, 255, 0.25);
  --tracking-normal: -0.01em;
  --spacing: 0.25rem;
}

.dark.starry {
  --background: oklch(0.12 0.04 240); /* Deeper space background */
  --foreground: oklch(0.97 0.03 210); /* Brighter foreground */
  --card: oklch(0.18 0.06 240); /* Slightly lighter card for contrast */
  --card-foreground: var(--foreground);
  --popover: oklch(0.2 0.07 240);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.7 0.25 205); /* Brighter primary for dark mode */
  --primary-foreground: oklch(0.06 0.05 245);
  --secondary: oklch(0.16 0.05 240);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.14 0.04 240);
  --muted-foreground: oklch(0.75 0.07 215);
  --accent: oklch(0.22 0.08 240);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.65 0.28 20);
  --destructive-foreground: oklch(0.97 0.03 210);
  --border: oklch(0.24 0.09 240);
  --input: oklch(0.24 0.09 240);
  --ring: oklch(0.7 0.25 205);
  --chart-1: oklch(0.7 0.25 205);
  --chart-2: oklch(0.78 0.2 195);
  --chart-3: oklch(0.62 0.22 190);
  --chart-4: oklch(0.85 0.18 180);
  --chart-5: oklch(0.5 0.2 230);
  --sidebar: oklch(0.1 0.05 240);
  --sidebar-foreground: oklch(0.92 0.05 218);
  --sidebar-primary: oklch(0.7 0.25 205);
  --sidebar-primary-foreground: oklch(0.06 0.05 245);
  --sidebar-accent: oklch(0.18 0.08 240);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: oklch(0.2 0.09 240);
  --sidebar-ring: oklch(0.7 0.25 205);
  --font-sans: 'Inter', 'SF Pro Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'SF Pro Display', ui-serif, Georgia, Cambria, serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-xs: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 12px 0px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px 0px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 20px rgba(0, 150, 255, 0.2);
  --shadow-xl: 0 12px 32px 0px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 16px 48px 0px rgba(0, 0, 0, 0.7);
  --tracking-normal: -0.01em;
  --spacing: 0.25rem;
}

/* ===== SIDEBAR STYLES ===== */
[data-slot='sidebar-container'] {
  background: var(--sidebar);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 2rem;
  box-shadow: var(--shadow-sm);
}

[data-slot='sidebar-inner'] {
  background: var(--sidebar);
  border-radius: 2rem;
}

[data-sidebar='sidebar'] {
  background: var(--sidebar);
}

/* Remove any default border */
[data-slot='sidebar-inner'],
[data-sidebar='sidebar'],
[data-slot='sidebar-container'] {
  border: none !important;
  outline: none !important;
}

/* Remove shadow that might look like border */
[data-slot='sidebar-inner'] {
  box-shadow: none !important;
}

[data-slot='sidebar-menu-sub'] {
  border: none !important;
}

/* Ensure no border on mobile */
[data-mobile='true'] [data-slot='sidebar-inner'] {
  border: none !important;
}

/* Sidebar menu button styles */
[data-slot='sidebar-menu-button'],
[data-slot='sidebar-menu-sub-button'] {
  height: 2.25rem;
  border-radius: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-slot='sidebar-menu-button'][data-active='true'],
[data-slot='sidebar-menu-sub-button'][data-active='true'] {
  background: var(--primary);
  color: var(--primary-foreground);
}

[data-slot='sidebar-menu-button']:hover:not([data-active='true']),
[data-slot='sidebar-menu-sub-button']:hover:not([data-active='true']) {
  background: var(--accent);
  color: var(--primary);
}

/* Sidebar group label */
[data-slot='sidebar-group-label'] {
  font-weight: 600;
  color: var(--muted-foreground);
  padding-left: 0.5rem;
}

/* Sidebar rail */
[data-slot='sidebar-rail'] {
  display: none;
}

/* Dark mode sidebar styles */
.dark [data-slot='sidebar-container'] {
  background: var(--sidebar);
  opacity: 0.8;
  border: none !important;
  box-shadow: var(--shadow-md);
}

.dark [data-slot='sidebar-menu-button'][data-active='true'],
.dark [data-slot='sidebar-menu-sub-button'][data-active='true'] {
  background: var(--primary);
  color: var(--primary-foreground);
}

.dark [data-slot='sidebar-menu-button']:hover:not([data-active='true']),
.dark [data-slot='sidebar-menu-sub-button']:hover:not([data-active='true']) {
  background: var(--accent);
  color: var(--primary);
}

.dark [data-slot='sidebar-group-label'] {
  color: var(--muted-foreground);
}

@layer utilities {
  .glass-highlight {
    background: rgba(99, 102, 241, 0.15);
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .active-glow {
    box-shadow: 0 0 15px -3px rgba(99, 102, 241, 0.3);
    border-color: var(--primary) !important;
  }
}

/* ===== DATE RANGE PICKER STYLES ===== */

/* Range middle date - cell background */
.rdp-custom-day.rdp-custom-range-middle {
  @apply bg-primary/10 dark:bg-primary/20;
}

/* Range start date - cell background and rounded corners */
.rdp-custom-day.rdp-custom-range-start {
  @apply bg-primary/10 rounded-l-full dark:bg-primary/20;
}

/* Range end date - cell background and rounded corners */
.rdp-custom-day.rdp-custom-range-end {
  @apply bg-primary/10 rounded-r-full dark:bg-primary/20;
}

/* Range start and end on the same day */
.rdp-custom-day.rdp-custom-range-start.rdp-custom-range-end {
  @apply rounded-full;
}

/* Range start/end date - button styles */
.rdp-custom-day.rdp-custom-range-start > .rdp-custom-day-button,
.rdp-custom-day.rdp-custom-range-end > .rdp-custom-day-button {
  @apply bg-primary text-white hover:bg-primary;
}

/* Today's date style */
.rdp-custom-day.rdp-custom-today > .rdp-custom-day-button {
  @apply ring-1 ring-inset ring-primary/40;
}

/* Outside dates (prev/next month) */
.rdp-custom-day.rdp-custom-outside > .rdp-custom-day-button {
  @apply text-gray-300 dark:text-gray-700;
}

/* Outside dates within range */
.rdp-custom-day.rdp-custom-outside.rdp-custom-range-middle,
.rdp-custom-day.rdp-custom-outside.rdp-custom-range-start,
.rdp-custom-day.rdp-custom-outside.rdp-custom-range-end {
  @apply bg-primary/5;
}

/* Disabled dates */
.rdp-custom-day.rdp-custom-disabled > .rdp-custom-day-button {
  @apply cursor-not-allowed opacity-30;
}