/* 暗色主题（默认） */
    :root,
    [data-theme="dark"] {
      --bg-primary: #0d0d0d;
      --bg-secondary: #161616;
      --bg-tertiary: #1e1e1e;
      --bg-elevated: #252525;
      --border-color: #333;
      --border-hover: #444;
      --text-primary: #f5f5f5;
      --text-secondary: #a0a0a0;
      --text-muted: #666;
      --accent-primary: #00d4aa;
      --accent-secondary: #00b894;
      --accent-glow: rgba(0, 212, 170, 0.3);
      --warning: #f39c12;
      --danger: #e74c3c;
      --success: #27ae60;
      --shadow-color: rgba(0, 0, 0, 0.3);
      --canvas-bg: #1a1a1a;
      /* 暗色主题额外变量 */
      --input-bg: #1e1e1e;
      --input-border: #333;
      --input-focus-border: #00d4aa;
      --hover-bg: rgba(255, 255, 255, 0.05);
      --active-bg: rgba(0, 212, 170, 0.15);
      --scrollbar-track: #1e1e1e;
      --scrollbar-thumb: #444;
      --scrollbar-thumb-hover: #555;
    }

    /* 亮色主题 */
    [data-theme="light"] {
      --bg-primary: #f8f9fa;
      --bg-secondary: #ffffff;
      --bg-tertiary: #f1f3f4;
      --bg-elevated: #ffffff;
      --border-color: #e0e0e0;
      --border-hover: #bdbdbd;
      --text-primary: #202124;
      --text-secondary: #5f6368;
      --text-muted: #9aa0a6;
      --accent-primary: #009d7a;
      --accent-secondary: #00836a;
      --accent-glow: rgba(0, 157, 122, 0.15);
      --warning: #f9a825;
      --danger: #d93025;
      --success: #1e8e3e;
      --shadow-color: rgba(60, 64, 67, 0.15);
      --canvas-bg: #fafafa;
      /* 亮色主题额外变量 */
      --input-bg: #ffffff;
      --input-border: #dadce0;
      --input-focus-border: #009d7a;
      --hover-bg: rgba(0, 0, 0, 0.04);
      --active-bg: rgba(0, 157, 122, 0.08);
      --scrollbar-track: #f1f1f1;
      --scrollbar-thumb: #c1c1c1;
      --scrollbar-thumb-hover: #a8a8a8;
      /* 按钮文字颜色 - 在绿色背景上使用白色文字 */
      --btn-primary-text: #ffffff;
    }

    /* 亮色主题特定样式 */
    [data-theme="light"] .btn-primary {
      color: #ffffff;
    }

    [data-theme="light"] .tool-btn {
      box-shadow: 0 1px 3px var(--shadow-color);
    }

    [data-theme="light"] header {
      box-shadow: 0 1px 3px var(--shadow-color);
    }

    [data-theme="light"] .footer-bar {
      box-shadow: 0 -1px 3px var(--shadow-color);
    }

    [data-theme="light"] .panel-section {
      border-color: var(--border-color);
    }

    [data-theme="light"] .step-number {
      border-color: var(--border-color);
    }