/*
 * ========================================================================
 * AI Intervention Agent - 主样式表 (main.css)
 * ========================================================================
 *
 * 功能说明：
 *   Web反馈界面的完整CSS样式定义，包含自适应布局、主题配色、
 *   动画效果、Markdown渲染、代码高亮等。
 *
 * 设计理念：
 *   - 现代化暗色主题：基于深色调配色方案（#1a1a1f主背景）
 *   - 性能优化：移除复杂动画和毛玻璃效果，提升渲染性能
 *   - 移动端优先：完整的响应式设计，支持动态视口高度（dvh）
 *   - 无障碍：触摸友好的44px最小目标尺寸，清晰的视觉层级
 *
 * 样式组织：
 *   1. 字体声明和全局重置
 *   2. 布局容器和页面结构
 *   3. 头部、设置面板、通知系统
 *   4. 表单元素、按钮、状态类
 *   5. Markdown渲染和代码块
 *   6. 图片预览和拖拽交互
 *   7. 任务标签页和倒计时圆环
 *   8. 媒体查询（移动端适配）
 *
 * 浏览器支持：
 *   - Chrome/Edge 90+
 *   - Firefox 88+
 *   - Safari 14+
 *   - iOS Safari 14+
 *   - Android Chrome 90+
 *
 * 技术特性：
 *   - CSS Grid和Flexbox布局
 *   - CSS自定义属性（CSS变量）
 *   - backdrop-filter毛玻璃效果（部分区域）
 *   - CSS动画和过渡效果（已优化）
 *   - ::-webkit-scrollbar自定义滚动条
 *
 * 性能优化：
 *   - 使用contain: layout style隔离渲染
 *   - 使用transform: translateZ(0)启用硬件加速
 *   - 简化动画，移除复杂背景渐变
 *   - 减少DOM重绘和重排
 *
 * 注意事项：
 *   - 部分样式使用!important覆盖内联样式（Markdown渲染）
 *   - 字体加载使用font-display: swap避免FOIT
 *   - 移动端使用env(safe-area-inset-*)适配刘海屏
 * ========================================================================
 */

/* ========================================================================
   CSS 变量 - 主题系统 (Theme Variables)
   ======================================================================== */

/**
 * 主题变量说明：
 *   使用 CSS 自定义属性（CSS Variables）实现主题切换。
 *   默认为暗色主题，可通过 data-theme="light" 属性切换到亮色主题。
 *
 * 变量分类：
 *   - 背景色系列：--bg-*
 *   - 文本色系列：--text-*
 *   - 边框色系列：--border-*
 *   - 主题色系列：--primary-*, --accent-*
 *   - 状态色系列：--success-*, --warning-*, --error-*, --info-*
 *   - 阴影系列：--shadow-*
 *
 * 使用方法：
 *   background: var(--bg-primary);
 *   color: var(--text-primary);
 */

/* 暗色主题（默认）*/
:root {
  /* 背景色 */
  --bg-primary: #1a1a1f; /* 主背景 */
  --bg-secondary: #25252d; /* 次级背景 */
  --bg-tertiary: #2d2d3c; /* 三级背景 */
  --bg-elevated: rgba(45, 45, 60, 0.9); /* 悬浮/弹窗背景 */
  --bg-overlay: rgba(0, 0, 0, 0.6); /* 遮罩层 */
  --bg-hover: rgba(255, 255, 255, 0.08); /* 悬停背景 */
  --bg-active: rgba(255, 255, 255, 0.12); /* 激活背景 */

  /* 文本色 */
  --text-primary: #f5f5f7; /* 主文本 */
  --text-secondary: #a1a1aa; /* 次级文本 */
  --text-tertiary: #71717a; /* 三级文本 */
  --text-muted: #52525b; /* 弱化文本 */
  --text-inverse: #1a1a1f; /* 反色文本（用于亮色按钮） */

  /* 字体（合规：仅使用系统默认字体栈，避免打包第三方字体引发版权风险） */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji",
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  /* 边框色 */
  --border-primary: rgba(255, 255, 255, 0.15); /* 主边框 */
  --border-secondary: rgba(255, 255, 255, 0.08); /* 次级边框 */
  --border-hover: rgba(255, 255, 255, 0.25); /* 悬停边框 */
  --border-focus: rgba(139, 92, 246, 0.5); /* 焦点边框 */

  /* 主题色（紫色系） */
  --primary-50: #faf5ff;
  --primary-100: #f3e8ff;
  --primary-200: #e9d5ff;
  --primary-300: #d8b4fe;
  --primary-400: #c084fc;
  --primary-500: #a855f7; /* 主色 */
  --primary-600: #9333ea;
  --primary-700: #7c3aed;
  --primary-800: #6b21a8;
  --primary-900: #581c87;

  /* 强调色（蓝紫色系） */
  --accent-50: #eef2ff;
  --accent-100: #e0e7ff;
  --accent-200: #c7d2fe;
  --accent-300: #a5b4fc;
  --accent-400: #818cf8;
  --accent-500: #6366f1; /* 强调色 */
  --accent-600: #4f46e5;
  --accent-700: #4338ca;
  --accent-800: #3730a3;
  --accent-900: #312e81;

  /* 状态色 */
  --success-500: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.15);
  --warning-500: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.15);
  --error-500: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.15);
  --info-500: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.15);

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7);

  /* 过渡时间 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* 主题切换过渡 */
  --theme-transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 亮色主题 - Anthropic 官方品牌配色方案（优化版） */
[data-theme='light'] {
  /*
   * 基于 Anthropic Brand Guidelines - 优化层次感
   * - Dark: #141413 - 主要文本
   * - Light: #faf9f5 - 内容卡片（温暖的米白）
   * - Mid Gray: #b0aea5 - 次要元素
   * - Light Gray: #e8e6dc - 页面底层（稍深，让内容浮出）
   * - Orange: #d97757 - 主要强调色
   * - Blue: #6a9bcc - 次要强调色
   * - Green: #788c5d - 第三强调色
   */

  /* 背景色 - 优化层次：内容从底色中浮出 */
  --bg-primary: #e8e6dc; /* 主背景：Light Gray - 页面底层（稍深） */
  --bg-secondary: #faf9f5; /* 次级背景：Light - 内容卡片（温暖浮出） */
  --bg-tertiary: #f2f1ec; /* 三级背景：Light 与 Light Gray 之间 - Header */
  --bg-elevated: #ffffff; /* 悬浮/弹窗背景：纯白 */
  --bg-input: #e8e6dc; /* 输入区域：Light Gray - 有区分度 */
  --bg-card: #faf9f5; /* 卡片内部：Light */
  --bg-overlay: rgba(20, 20, 19, 0.35); /* 遮罩层：Dark 淡化 */
  --bg-hover: rgba(217, 119, 87, 0.12); /* 悬停背景：Orange 淡化 */
  --bg-active: rgba(217, 119, 87, 0.18); /* 激活背景：Orange 淡化 */

  /* 文本色 - Anthropic 品牌色系 */
  --text-primary: #141413; /* 主文本：Dark */
  --text-secondary: #5a5955; /* 次级文本：Dark 淡化 */
  --text-tertiary: #b0aea5; /* 三级文本：Mid Gray */
  --text-muted: #c5c3ba; /* 弱化文本：Mid Gray 淡化 */
  --text-inverse: #faf9f5; /* 反色文本：Light */

  /* 边框色 - 基于 Mid Gray */
  --border-primary: rgba(176, 174, 165, 0.35); /* 主边框：Mid Gray 淡化 */
  --border-secondary: rgba(176, 174, 165, 0.2); /* 次级边框 */
  --border-hover: rgba(217, 119, 87, 0.5); /* 悬停边框：Orange 淡化 */
  --border-focus: #6a9bcc; /* 焦点边框：Blue */
  --border-accent: rgba(217, 119, 87, 0.35); /* 强调边框：Orange 淡化 */

  /* 强调色 - Anthropic 品牌强调色 */
  --accent-primary: #d97757; /* 主强调色：Orange */
  --accent-secondary: #6a9bcc; /* 次强调色：Blue */
  --accent-tertiary: #788c5d; /* 第三强调色：Green */
  --accent-hover: #c56a4c; /* 强调色悬停：深 Orange */
  --primary-500: #d97757; /* 主色调：Orange */
  --primary-600: #c56a4c; /* 主色调深色 */

  /* 状态色 */
  --error-500: #c54d47; /* 错误色：暖红 */
  --error-bg: rgba(197, 77, 71, 0.1);
  --success-500: #788c5d; /* 成功色：Green */
  --success-bg: rgba(120, 140, 93, 0.1);
  --info-500: #6a9bcc; /* 信息色：Blue */
  --info-bg: rgba(106, 155, 204, 0.1);

  /* 精致阴影 - 基于 Dark 色调 */
  --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.05), 0 1px 3px rgba(20, 20, 19, 0.08);
  --shadow-md: 0 2px 4px rgba(20, 20, 19, 0.06), 0 4px 8px rgba(20, 20, 19, 0.1);
  --shadow-lg: 0 4px 8px rgba(20, 20, 19, 0.08), 0 8px 16px rgba(20, 20, 19, 0.12);
  --shadow-xl: 0 8px 16px rgba(20, 20, 19, 0.1), 0 16px 32px rgba(20, 20, 19, 0.14);
}

/* 自动跟随系统主题 - Anthropic 官方品牌色（优化版） */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* 背景色 - 优化层次：内容从底色中浮出 */
    --bg-primary: #e8e6dc; /* Light Gray - 页面底层 */
    --bg-secondary: #faf9f5; /* Light - 内容卡片 */
    --bg-tertiary: #f2f1ec; /* Header */
    --bg-elevated: #ffffff; /* 纯白 - 悬浮元素 */
    --bg-input: #e8e6dc; /* Light Gray - 输入区域 */
    --bg-card: #faf9f5; /* Light - 卡片内部 */
    --bg-overlay: rgba(20, 20, 19, 0.35);
    --bg-hover: rgba(217, 119, 87, 0.12);
    --bg-active: rgba(217, 119, 87, 0.18);

    /* 文本色 */
    --text-primary: #141413; /* Dark */
    --text-secondary: #5a5955; /* Dark 淡化 */
    --text-tertiary: #b0aea5; /* Mid Gray */
    --text-muted: #c5c3ba; /* Mid Gray 淡化 */
    --text-inverse: #faf9f5; /* Light */

    /* 边框色 */
    --border-primary: rgba(176, 174, 165, 0.35);
    --border-secondary: rgba(176, 174, 165, 0.2);
    --border-hover: rgba(217, 119, 87, 0.5);
    --border-focus: #6a9bcc; /* Blue */
    --border-accent: rgba(217, 119, 87, 0.35);

    /* 强调色 */
    --accent-primary: #d97757; /* Orange */
    --accent-secondary: #6a9bcc; /* Blue */
    --accent-tertiary: #788c5d; /* Green */
    --primary-500: #d97757;
    --primary-600: #c56a4c;

    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.05), 0 1px 3px rgba(20, 20, 19, 0.08);
    --shadow-md: 0 2px 4px rgba(20, 20, 19, 0.06), 0 4px 8px rgba(20, 20, 19, 0.1);
    --shadow-lg: 0 4px 8px rgba(20, 20, 19, 0.08), 0 8px 16px rgba(20, 20, 19, 0.12);
    --shadow-xl: 0 8px 16px rgba(20, 20, 19, 0.1), 0 16px 32px rgba(20, 20, 19, 0.14);
  }
}

/* ========================================================================
   字体声明 (Font Declarations)
   ======================================================================== */

/**
 * 合规说明：
 *   项目不再打包/分发第三方字体文件，仅使用系统字体栈：
 *   - 文本：var(--font-sans)
 *   - 等宽：var(--font-mono)
 */

/* ========================================================================
   全局重置和基础样式 (Global Reset & Base Styles)
   ======================================================================== */

/**
 * 全局重置：
 *   - 清除浏览器默认的margin和padding
 *   - 统一box-sizing为border-box（边框和内边距包含在宽高内）
 *
 * 盒模型说明：
 *   border-box：width/height = content + padding + border
 *   更符合直觉的尺寸计算方式，简化布局计算。
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 统一盒模型 */
}

/**
 * body元素：页面根容器
 *
 * 功能说明：
 *   - 定义全局字体栈、背景色、文本颜色
 *   - 设置行高、字重、字间距等排版参数
 *   - 控制页面最小高度和溢出行为
 *
 * 字体栈说明：
 *   使用系统字体栈 var(--font-sans)，避免自定义字体带来的版权与体积风险。
 *
 * 颜色方案：
 *   - 背景：#1a1a1f（深灰黑色）
 *   - 文本：#f5f5f7（浅灰白色，高对比度）
 *
 * 性能优化：
 *   - 移除复杂背景渐变（单色背景）
 *   - 移除背景动画（静态背景）
 *   - 隐藏横向溢出（overflow-x: hidden）
 */
body {
  font-family: var(--font-sans);
  background: var(--bg-primary); /* 使用主题变量 */
  color: var(--text-primary); /* 使用主题变量 */
  min-height: 100vh; /* 最小高度为视口高度 */
  padding: 1rem 0; /* 上下内边距 */
  line-height: 1.47059; /* Apple风格行高 */
  font-weight: 400; /* 正常字重 */
  letter-spacing: -0.022em; /* 紧凑字间距 */
  overflow-x: hidden; /* 隐藏横向溢出 */
  box-sizing: border-box; /* 统一盒模型 */
  transition: var(--theme-transition); /* 主题切换过渡 */
}

/**
 * 无内容模式（no-content-mode）：
 *
 * 功能说明：
 *   当页面无有效内容时（等待加载、无任务等），应用此类。
 *   将body转换为flexbox居中布局，优化视觉呈现。
 *
 * 布局说明：
 *   - 使用flex布局垂直居中
 *   - 高度固定为100vh，禁止滚动
 *   - 上下内边距3rem，避免内容贴边
 *
 * 使用场景：
 *   - 页面加载中（显示加载动画）
 *   - 所有任务已完成（显示无有效内容提示）
 *   - 任务队列为空（显示等待新任务）
 */
body.no-content-mode {
  height: 100vh; /* 固定高度为视口高度 */
  overflow: hidden; /* 禁止滚动 */
  display: flex; /* 使用flex布局 */
  align-items: flex-start; /* 垂直对齐到顶部（避免完全居中） */
  justify-content: center; /* 水平居中 */
  padding: 3rem 0; /* 上下内边距 */
  box-sizing: border-box; /* 统一盒模型 */
}

/* ========================================================================
   主容器样式 (Main Container)
   ======================================================================== */

/**
 * 主容器（.container）：
 *
 * 功能说明：
 *   页面的主要内容容器，承载反馈表单、Markdown内容、任务列表等。
 *
 * 布局说明：
 *   - 最大宽度720px，居中对齐
 *   - 半透明深色背景，1px边框
 *   - 32px圆角，营造现代感
 *   - 阴影效果，提升层次感
 *
 * 性能优化：
 *   - 移除毛玻璃效果（backdrop-filter）
 *   - 移除过渡动画（transition）
 *   - 移除悬停效果（:hover）
 *
 * 视觉设计：
 *   - 背景：rgba(45, 45, 60, 0.9)（半透明深色）
 *   - 边框：rgba(255, 255, 255, 0.12)（浅色半透明）
 *   - 阴影：0 8px 16px rgba(0, 0, 0, 0.2)（柔和阴影）
 */
.container {
  max-width: 720px; /* 最大宽度 */
  margin: 0 auto; /* 水平居中 */
  background: rgba(45, 45, 60, 0.9); /* 半透明深色背景 */
  border: 1px solid rgba(255, 255, 255, 0.12); /* 浅色边框 */
  border-radius: 32px; /* 大圆角 */
  padding: 0; /* 无内边距（由子元素控制） */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 柔和阴影 */
  overflow: hidden; /* 隐藏溢出（圆角裁剪） */
  position: relative; /* 相对定位（用于伪元素） */
}

/**
 * 无内容模式下的容器：
 *
 * 功能说明：
 *   在无内容模式下，容器样式调整为100%宽度，限制最大高度。
 *
 * 布局说明：
 *   - 宽度100%（不超过max-width: 720px）
 *   - 最大高度 = 视口高度 - 6rem（上下padding）
 *   - 禁止溢出，flex-shrink: 0防止收缩
 *
 * 视觉调整：
 *   - 移除margin: 0，避免偏移
 */
body.no-content-mode .container {
  margin: 0; /* 移除外边距 */
  width: 100%; /* 全宽 */
  max-width: 720px; /* 最大宽度限制 */
  max-height: calc(100vh - 6rem); /* 最大高度（减去上下padding） */
  overflow: hidden; /* 禁止溢出 */
  flex-shrink: 0; /* 禁止flex收缩 */
}

/**
 * 容器顶部装饰线（.container::before）：
 *
 * 功能说明：
 *   在容器顶部添加一条渐变装饰线，提升视觉精致度。
 *
 * 实现方式：
 *   - 使用::before伪元素
 *   - 绝对定位到容器顶部
 *   - 线性渐变：透明 → 半透明白色 → 透明
 *
 * 视觉效果：
 *   - 高度1px，横跨整个容器宽度
 *   - 渐变色：transparent → rgba(255, 255, 255, 0.1) → transparent
 */
.container::before {
  content: ''; /* 必需，否则伪元素不显示 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  right: 0; /* 右边对齐 */
  height: 1px; /* 线高1px */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  ); /* 渐变装饰线 */
}

/* ========================================================================
   页面头部样式 (Header)
   ======================================================================== */

/**
 * 页面头部（.header）：
 *
 * 功能说明：
 *   - 包含标题、图标、设置按钮等
 *   - 使用flexbox布局，左右分布
 *   - 底部边框和装饰线
 *
 * 布局说明：
 *   - display: flex，justify-content: space-between（两端对齐）
 *   - 左侧：标题和图标
 *   - 右侧：设置按钮
 *
 * 视觉设计：
 *   - 背景：rgba(30, 30, 40, 0.8)（半透明深色）
 *   - 边框：0.5px solid rgba(255, 255, 255, 0.1)（细线边框）
 *   - 内边距：1rem 1.75rem（上下1rem，左右1.75rem）
 *
 * 性能优化：
 *   - 移除毛玻璃效果（backdrop-filter）
 *   - 简化背景，使用单色半透明
 */
.header {
  background: rgba(30, 30, 40, 0.8); /* 半透明深色背景 */
  padding: 1rem 1.75rem; /* 内边距 */
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); /* 底部边框 */
  position: relative; /* 相对定位（用于伪元素） */
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中对齐 */
}

/**
 * 头部装饰线（.header::after）：
 *
 * 功能说明：
 *   在头部底部添加渐变装饰线，提升视觉层次。
 *
 * 实现方式：
 *   - 使用::after伪元素
 *   - 绝对定位到底部
 *   - 左右留出1.75rem边距（与padding对齐）
 *
 * 视觉效果：
 *   - 高度0.5px，线性渐变
 *   - 渐变色：transparent → rgba(255, 255, 255, 0.2) → transparent
 */
.header::after {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 底部对齐 */
  left: 1.75rem; /* 左边留白 */
  right: 1.75rem; /* 右边留白 */
  height: 0.5px; /* 线高 */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  ); /* 渐变装饰线 */
}

/**
 * 一级标题（h1）：
 *
 * 功能说明：
 *   页面主标题，显示"AI Intervention Agent"等文本。
 *
 * 布局说明：
 *   - 使用flex布局，横向排列标题文本和图标
 *   - gap: 0.625rem，元素间距
 *
 * 排版设计：
 *   - 字号：1.375rem（22px）
 *   - 字重：600（半粗体）
 *   - 字间距：-0.01em（紧凑）
 *   - 颜色：#f5f5f7（浅灰白色）
 */
h1 {
  color: #f5f5f7; /* 文本颜色 */
  margin: 0; /* 清除默认外边距 */
  font-size: 1.375rem; /* 字号（22px） */
  font-weight: 600; /* 半粗体 */
  letter-spacing: -0.01em; /* 紧凑字间距 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 0.625rem; /* 元素间距（10px） */
}

/**
 * 头部图标容器（.header-icon）：
 *
 * 功能说明：
 *   包裹SVG图标，提供固定尺寸和居中对齐。
 *
 * 布局说明：
 *   - 固定尺寸：32x32px
 *   - 使用flex布局居中图标
 *
 * 使用场景：
 *   - 头部标题旁的应用图标
 *   - 确保图标尺寸一致，视觉整齐
 */
.header-icon {
  width: 32px; /* 固定宽度 */
  height: 32px; /* 固定高度 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/* ========================================================================
   SVG渐变色定义 (SVG Gradient Stops)
   ======================================================================== */

/**
 * SVG渐变色停止点样式：
 *
 * 功能说明：
 *   定义SVG图标中的线性渐变或径向渐变的颜色停止点。
 *
 * 渐变组说明：
 *   - .svg-stop-1 ~ .svg-stop-2：浅灰色系（背景或高光）
 *   - .svg-stop-3 ~ .svg-stop-6：紫色系渐变（主题色）
 *   - .svg-stop-7 ~ .svg-stop-10：黄色系渐变（强调色）
 *
 * 使用场景：
 *   - 应用图标（.header-icon内的SVG）
 *   - 装饰性图标（按钮、通知等）
 *
 * 颜色说明：
 *   - 紫色系：从亮紫（#a855f7）到深紫（#312e81），渐变opacity
 *   - 黄色系：从亮黄（#fde047）到深黄（#ca8a04），全opacity
 */

/* 浅灰色系（背景/高光） */
.svg-stop-1 {
  stop-color: #e8ecf5; /* 浅灰蓝色 */
}
.svg-stop-2 {
  stop-color: #dee4f1; /* 中浅灰蓝色 */
}

/* 紫色系渐变（主题色） */
.svg-stop-3 {
  stop-color: #a855f7; /* 亮紫色 */
  stop-opacity: 1; /* 全不透明 */
}
.svg-stop-4 {
  stop-color: #8b5cf6; /* 中紫色 */
  stop-opacity: 0.95; /* 95%不透明 */
}
.svg-stop-5 {
  stop-color: #6366f1; /* 蓝紫色 */
  stop-opacity: 0.9; /* 90%不透明 */
}
.svg-stop-6 {
  stop-color: #312e81; /* 深紫色 */
  stop-opacity: 0.85; /* 85%不透明 */
}

/* 黄色系渐变（强调色） */
.svg-stop-7 {
  stop-color: #fde047; /* 亮黄色 */
}
.svg-stop-8 {
  stop-color: #facc15; /* 中黄色 */
}
.svg-stop-9 {
  stop-color: #eab308; /* 深黄色 */
}
.svg-stop-10 {
  stop-color: #ca8a04; /* 暗黄色 */
}

/* ========================================================================
   头部按钮容器 (Header Actions)
   ======================================================================== */

/**
 * 头部按钮容器（.header-actions）：
 *
 * 功能说明：
 *   包含主题切换按钮和设置按钮的容器。
 *
 * 布局说明：
 *   - 水平排列（flex-direction: row）
 *   - 禁止换行（flex-wrap: nowrap）
 *   - 间距8px
 */
.header-actions {
  display: flex;
  flex-direction: row; /* 强制水平排列 */
  flex-wrap: nowrap; /* 禁止换行 */
  gap: 8px;
  align-items: center;
  position: relative; /* 确保在正确的层级 */
  z-index: 10; /* 确保在其他元素之上 */
}

/* ========================================================================
   设置按钮和面板控制 (Settings Button & Panel)
   ======================================================================== */

/**
 * 设置按钮（.settings-btn）：
 *
 * 功能说明：
 *   位于页面头部右侧的齿轮图标按钮，点击打开设置面板。
 *
 * 布局说明：
 *   - 固定尺寸：40x40px（触摸友好）
 *   - 使用flex布局居中图标
 *
 * 交互效果：
 *   - :hover：背景变亮，向上位移1px，增强阴影
 *   - :active：按下效果，背景变暗
 *   - :focus：蓝色聚焦边框（无障碍）
 *
 * 视觉设计：
 *   - 背景：rgba(255, 255, 255, 0.1)（半透明白色）
 *   - 边框：1px solid rgba(255, 255, 255, 0.2)
 *   - 圆角：10px
 *   - 毛玻璃效果：backdrop-filter: blur(8px)
 *   - 阴影：0 2px 8px rgba(0, 0, 0, 0.1)
 */
.settings-btn {
  background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
  border-radius: 10px; /* 圆角 */
  color: #f5f5f7; /* 图标颜色 */
  padding: 0.5rem; /* 内边距 */
  font-size: 1.2rem; /* 图标字号 */
  cursor: pointer; /* 鼠标指针 */
  transition: all 0.2s ease; /* 过渡动画 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 40px; /* 固定宽度 */
  height: 40px; /* 固定高度 */
  backdrop-filter: blur(8px); /* 毛玻璃效果 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
  position: relative; /* 确保可点击 */
  z-index: 11; /* 确保在其他元素之上 */
}

/**
 * 设置按钮悬停效果（.settings-btn:hover）：
 *
 * 交互效果：
 *   - 背景变亮（0.15透明度）
 *   - 边框变亮（0.3透明度）
 *   - 向上位移1px（transform: translateY(-1px)）
 *   - 增强阴影（0 4px 12px）
 */
.settings-btn:hover {
  background: rgba(255, 255, 255, 0.15); /* 背景变亮 */
  border-color: rgba(255, 255, 255, 0.3); /* 边框变亮 */
  transform: translateY(-1px); /* 向上位移 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 增强阴影 */
}

/**
 * 设置按钮按下效果（.settings-btn:active）：
 *
 * 交互效果：
 *   - 取消位移（transform: translateY(0)）
 *   - 背景变暗（0.08透明度）
 */
.settings-btn:active {
  transform: translateY(0); /* 取消位移 */
  background: rgba(255, 255, 255, 0.08); /* 背景变暗 */
}

/**
 * 设置按钮聚焦效果（.settings-btn:focus）：
 *
 * 无障碍支持：
 *   - 移除浏览器默认outline
 *   - 添加自定义蓝色阴影边框
 *   - 阴影：0 0 0 2px rgba(0, 122, 255, 0.3)
 */
.settings-btn:focus {
  outline: none; /* 移除默认outline */
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3); /* 蓝色聚焦边框 */
}

/* ========================================================================
   主题切换按钮 (Theme Toggle Button)
   ======================================================================== */

/**
 * 主题切换按钮（.theme-toggle-btn）：
 *
 * 功能说明：
 *   用于在暗色和亮色主题之间切换的按钮。
 *
 * 视觉设计：
 *   - 与设置按钮风格一致
 *   - 使用太阳/月亮图标表示当前主题
 *   - 平滑的图标切换动画
 */
.theme-toggle-btn {
  background: var(--bg-hover);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  color: var(--text-primary);
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.theme-toggle-btn:hover {
  background: var(--bg-active);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.theme-toggle-btn:active {
  transform: translateY(0);
}

.theme-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--border-focus);
}

/* 主题图标 */
.theme-icon {
  width: 22px;
  height: 22px;
  position: absolute;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none; /* 修复 iOS Chrome 点击问题：让点击事件穿透 SVG 到达父按钮 */
}

/* 太阳图标（暗色主题时隐藏） */
.theme-icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

/* 月亮图标（暗色主题时显示） */
.theme-icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* 亮色主题时图标状态 */
.theme-toggle-btn.is-light .theme-icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle-btn.is-light .theme-icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

/**
 * 设置面板容器（.settings-panel）：
 *
 * 功能说明：
 *   全屏模态遮罩层，显示设置表单和通知配置。
 *
 * 布局说明：
 *   - 固定定位，覆盖整个视口（top/left/right/bottom: 0）
 *   - 使用flex布局居中内容
 *   - z-index: 1000，确保在其他内容之上
 *
 * 显示逻辑：
 *   - 默认display: none隐藏
 *   - 添加.show类时display: flex显示
 *
 * 视觉设计：
 *   - 背景：rgba(0, 0, 0, 0.6)（半透明黑色遮罩）
 *   - 毛玻璃效果：backdrop-filter: blur(8px)
 *   - 淡入动画：fadeIn 0.2s
 *
 * 无障碍支持：
 *   - 遮罩层点击可关闭面板
 *   - ESC键关闭面板
 */
.settings-panel {
  position: fixed; /* 固定定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  right: 0; /* 右边对齐 */
  bottom: 0; /* 底部对齐 */
  background: rgba(0, 0, 0, 0.6); /* 半透明黑色遮罩 */
  z-index: 1000; /* 高层级 */
  display: none; /* 默认隐藏 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  padding: 1rem; /* 内边距 */
  backdrop-filter: blur(8px); /* 毛玻璃效果 */
  animation: fadeIn 0.2s ease-out; /* 淡入动画 */
}

/**
 * 设置面板显示状态（.settings-panel.show）：
 *
 * 功能说明：
 *   通过JavaScript添加.show类来显示设置面板。
 */
.settings-panel.show {
  display: flex; /* 使用flex布局显示 */
}

/* ========================================================================
   通用显示控制类 (Utility Display Classes)
   ======================================================================== */

/**
 * 通用隐藏类（.hidden）：
 *
 * 功能说明：
 *   通过JavaScript动态添加此类来隐藏任何元素。
 *
 * 使用!important的原因：
 *   确保覆盖所有内联样式和其他CSS规则。
 */
.hidden {
  display: none !important; /* 强制隐藏 */
}

/**
 * 通用显示类（.visible）：
 *
 * 功能说明：
 *   通过JavaScript动态添加此类来显示任何块级元素。
 */
.visible {
  display: block !important; /* 强制显示为块级元素 */
}

/**
 * Flex显示类（.flex-visible）：
 *
 * 功能说明：
 *   通过JavaScript动态添加此类来显示任何flex容器。
 *
 * 使用场景：
 *   - 无内容容器（.no-content-container）
 *   - 任务标签页容器
 */
.flex-visible {
  display: flex !important; /* 强制显示为flex容器 */
}

/* ========================================================================
   按钮和输入框状态类 (Button & Input State Classes)
   ======================================================================== */

/**
 * 禁用按钮状态（.btn-disabled）：
 *
 * 功能说明：
 *   通过JavaScript动态添加此类来禁用按钮。
 *
 * 视觉效果：
 *   - 背景：#3a3a3c（灰色）
 *   - 文字：#8e8e93（浅灰色）
 *   - 鼠标：not-allowed（禁止点击）
 *
 * 使用!important的原因：
 *   确保覆盖按钮的默认样式和悬停状态。
 */
.btn-disabled {
  background-color: #3a3a3c !important; /* 灰色背景 */
  color: #8e8e93 !important; /* 浅灰色文字 */
  cursor: not-allowed !important; /* 禁止点击光标 */
}

/**
 * 启用按钮状态（.btn-enabled）：
 *
 * 功能说明：
 *   通过JavaScript动态添加此类来启用按钮。
 */
.btn-enabled {
  cursor: pointer !important; /* 可点击光标 */
}

/**
 * 主按钮启用状态（.btn-primary-enabled）：
 *
 * 功能说明：
 *   主要操作按钮的启用样式（如"提交"按钮）。
 *
 * 视觉效果：
 *   - 背景：#0a84ff（iOS蓝色）
 *   - 文字：#ffffff（白色）
 */
.btn-primary-enabled {
  background-color: #0a84ff !important; /* iOS蓝色背景 */
  color: #ffffff !important; /* 白色文字 */
}

/**
 * 次要按钮启用状态（.btn-secondary-enabled）：
 *
 * 功能说明：
 *   次要操作按钮的启用样式（如"取消"按钮）。
 *
 * 视觉效果：
 *   - 背景：#48484a（深灰色）
 *   - 文字：#ffffff（白色）
 */
/**
 * 按钮内 SVG 图标（.btn-icon）：
 *
 * 功能说明：
 *   统一按钮内 SVG 图标的尺寸和间距。
 *
 * 尺寸：
 *   - 宽高：1em（跟随字号）
 *   - 右边距：0.5em（与文字间距）
 *
 * 视觉效果：
 *   - 垂直居中
 *   - 继承父元素颜色
 */
.btn-icon {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.4em;
  vertical-align: middle;
  flex-shrink: 0;
}

/* 设置按钮中的图标（无文字） */
.settings-btn .btn-icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0;
}

/* 标题/章节中的图标 */
.section-icon {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.3em;
  vertical-align: middle;
}

.btn-secondary-enabled {
  background-color: #48484a !important; /* 深灰色背景 */
  color: #ffffff !important; /* 白色文字 */
}

/**
 * 禁用文本区域状态（.textarea-disabled）：
 *
 * 功能说明：
 *   通过JavaScript动态添加此类来禁用文本区域。
 *
 * 视觉效果：
 *   - 背景：#2c2c2e（深灰色）
 *   - 文字：#8e8e93（浅灰色）
 *   - 鼠标：not-allowed（禁止点击）
 */
.textarea-disabled {
  background-color: #2c2c2e !important; /* 深灰色背景 */
  color: #8e8e93 !important; /* 浅灰色文字 */
  cursor: not-allowed !important; /* 禁止点击光标 */
}

/**
 * 启用文本区域状态（.textarea-enabled）：
 *
 * 功能说明：
 *   通过JavaScript动态添加此类来启用文本区域。
 *
 * 视觉效果：
 *   - 背景：rgba(255, 255, 255, 0.03)（半透明白色）
 *   - 文字：#f5f5f7（浅灰白色）
 *   - 鼠标：text（文本输入光标）
 */
.textarea-enabled {
  background-color: rgba(255, 255, 255, 0.03) !important; /* 半透明白色背景 */
  color: #f5f5f7 !important; /* 浅灰白色文字 */
  cursor: text !important; /* 文本输入光标 */
}

/* ========================================================================
   页面内通知系统 (In-Page Notification)
   ======================================================================== */

/**
 * 通知容器（.in-page-notification）：
 *
 * 功能说明：
 *   页面右上角的浮动通知卡片，用于Bark通知测试反馈等。
 *
 * 布局说明：
 *   - 固定定位在右上角（top: 20px, right: 20px）
 *   - 最大宽度300px，防止过宽
 *   - z-index: 10000，确保在所有元素之上
 *
 * 动画逻辑：
 *   - 默认：translateX(100%)（完全在右侧屏幕外）
 *   - .show：translateX(0)（滑入屏幕）
 *   - .hide：translateX(100%) + opacity: 0（滑出屏幕并淡出）
 *
 * 视觉设计：
 *   - 背景：rgba(30, 30, 40, 0.95)（半透明深色）
 *   - 边框：1px solid rgba(255, 255, 255, 0.2)
 *   - 圆角：12px
 *   - 毛玻璃效果：backdrop-filter: blur(10px)
 *   - 阴影：0 8px 16px rgba(0, 0, 0, 0.3)
 *
 * 使用场景：
 *   - Bark通知测试成功/失败
 *   - 配置保存成功/失败
 *   - 任务提交成功/失败
 */
.in-page-notification {
  position: fixed; /* 固定定位 */
  top: 20px; /* 距顶部20px */
  right: 20px; /* 距右侧20px */
  background: rgba(30, 30, 40, 0.95); /* 半透明深色背景 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
  border-radius: 12px; /* 圆角 */
  padding: 1rem; /* 内边距 */
  max-width: 300px; /* 最大宽度 */
  z-index: 10000; /* 最高层级 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 阴影 */
  transform: translateX(100%); /* 默认在屏幕右侧外 */
  transition: all 0.3s ease-out; /* 过渡动画 */
}

/**
 * 通知显示状态（.in-page-notification.show）：
 *
 * 功能说明：
 *   通过JavaScript添加.show类来显示通知。
 *
 * 动画效果：
 *   从屏幕右侧滑入（translateX: 100% → 0）。
 */
.in-page-notification.show {
  transform: translateX(0); /* 滑入屏幕 */
}

/**
 * 通知隐藏状态（.in-page-notification.hide）：
 *
 * 功能说明：
 *   通过JavaScript添加.hide类来隐藏通知。
 *
 * 动画效果：
 *   滑出屏幕右侧（translateX: 0 → 100%）并淡出（opacity: 1 → 0）。
 */
.in-page-notification.hide {
  transform: translateX(100%); /* 滑出屏幕 */
  opacity: 0; /* 淡出 */
}

/**
 * 通知标题（.in-page-notification-title）：
 *
 * 功能说明：
 *   通知的主标题文字（如"测试成功"、"保存成功"）。
 *
 * 排版设计：
 *   - 字重：600（半粗体）
 *   - 字号：1rem（16px）
 *   - 下边距：0.5rem
 */
.in-page-notification-title {
  font-weight: 600; /* 半粗体 */
  margin-bottom: 0.5rem; /* 下边距 */
  font-size: 1rem; /* 字号（16px） */
}

/**
 * 通知消息内容（.in-page-notification-message）：
 *
 * 功能说明：
 *   通知的详细描述文字。
 *
 * 排版设计：
 *   - 字号：0.9rem（14.4px）
 *   - 行高：1.4
 *   - 颜色：rgba(245, 245, 247, 0.8)（半透明浅灰白色）
 */
.in-page-notification-message {
  font-size: 0.9rem; /* 字号（14.4px） */
  line-height: 1.4; /* 行高 */
  color: rgba(245, 245, 247, 0.8); /* 半透明浅灰白色 */
}

/**
 * 通知关闭按钮（.in-page-notification-close）：
 *
 * 功能说明：
 *   位于通知右上角的关闭按钮（"×"图标）。
 *
 * 布局说明：
 *   - 绝对定位在右上角（top: 0.5rem, right: 0.5rem）
 *   - 固定尺寸：24x24px
 *   - 使用flex布局居中图标
 *
 * 交互效果：
 *   - :hover：背景变亮，图标颜色变亮
 *
 * 视觉设计：
 *   - 无背景（background: none）
 *   - 无边框（border: none）
 *   - 图标颜色：rgba(245, 245, 247, 0.6)（半透明浅灰白色）
 *   - 字号：1.2rem（19.2px）
 */
.in-page-notification-close {
  position: absolute; /* 绝对定位 */
  top: 0.5rem; /* 距顶部0.5rem */
  right: 0.5rem; /* 距右侧0.5rem */
  background: none; /* 无背景 */
  border: none; /* 无边框 */
  color: rgba(245, 245, 247, 0.6); /* 半透明浅灰白色 */
  cursor: pointer; /* 鼠标指针 */
  font-size: 1.2rem; /* 图标字号（19.2px） */
  width: 24px; /* 固定宽度 */
  height: 24px; /* 固定高度 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  border-radius: 4px; /* 小圆角 */
  transition: all 0.2s ease; /* 过渡动画 */
}

/**
 * 通知关闭按钮悬停效果（.in-page-notification-close:hover）：
 *
 * 交互效果：
 *   - 背景变亮（rgba(255, 255, 255, 0.1)）
 *   - 图标颜色变亮（#f5f5f7）
 */
.in-page-notification-close:hover {
  background: rgba(255, 255, 255, 0.1); /* 背景变亮 */
  color: #f5f5f7; /* 图标颜色变亮 */
}

/* ========================================================================
   无内容页面样式 (No Content Page)
   ======================================================================== */

/**
 * 无内容容器（.no-content-container）：
 *
 * 功能说明：
 *   在没有待处理任务时显示的占位内容（加载动画、空状态提示等）。
 *
 * 布局说明：
 *   - 默认display: none隐藏
 *   - 添加.flex-visible类时display: flex显示
 *   - 使用flex布局垂直居中内容
 *   - 最小高度400px
 *
 * 使用场景：
 *   - 页面加载中（显示加载动画）
 *   - 所有任务已完成（显示"无有效内容"）
 *   - 任务队列为空（显示"等待新任务"）
 */
.no-content-container {
  display: none; /* 默认隐藏 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  padding: 3rem 1.75rem; /* 内边距 */
  text-align: center; /* 文字居中 */
  min-height: 400px; /* 最小高度 */
}

/**
 * 无内容容器显示状态（.no-content-container.flex-visible）：
 *
 * 功能说明：
 *   通过JavaScript添加.flex-visible类来显示无内容容器。
 */
.no-content-container.flex-visible {
  display: flex; /* 使用flex布局显示 */
}

/**
 * 无内容图标（.no-content-icon）：
 *
 * 功能说明：
 *   无内容页面的大图标，支持 Lottie 动画（嫩芽生长）或 Emoji 备用。
 *
 * 视觉设计：
 *   - 宽高：120px（Lottie 动画容器，嫩芽动画较大）
 *   - 字号：4rem（64px，Emoji 备用）
 *   - 下边距：0.5rem
 *   - 透明度：1（保持清晰）
 */
.no-content-icon {
  width: 120px; /* Lottie 动画容器宽度 */
  height: 120px; /* Lottie 动画容器高度 */
  font-size: 4rem; /* 超大字号（64px，Emoji 备用） */
  margin-bottom: 0.5rem; /* 下边距 */
  opacity: 1; /* 保持清晰 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lottie SVG 容器样式 */
.no-content-icon svg {
  width: 100%;
  height: 100%;
}

/**
 * 无内容标题（.no-content-title）：
 *
 * 功能说明：
 *   无内容页面的主标题文字（如"无有效内容"、"加载中..."）。
 *
 * 排版设计：
 *   - 颜色：#f5f5f7（浅灰白色）
 *   - 字号：2rem（32px，大标题）
 *   - 字重：600（半粗体）
 *   - 下边距：0.5rem
 */
.no-content-title {
  color: #f5f5f7; /* 浅灰白色 */
  font-size: 2rem; /* 大字号（32px） */
  margin-bottom: 0.5rem; /* 下边距 */
  font-weight: 600; /* 半粗体 */
}

/**
 * 无内容描述（.no-content-description）：
 *
 * 功能说明：
 *   无内容页面的描述文字（如"所有任务已完成"）。
 *
 * 排版设计：
 *   - 颜色：#8e8e93（灰色）
 *   - 字号：1rem（16px）
 *   - 下边距：2rem
 */
.no-content-description {
  color: #8e8e93; /* 灰色 */
  font-size: 1rem; /* 字号（16px） */
  margin-bottom: 2rem; /* 下边距 */
}

/**
 * 无内容进度条容器（.no-content-progress）：
 *
 * 功能说明：
 *   加载中的进度条容器（背景轨道）。
 *
 * 布局说明：
 *   - 固定宽度：240px
 *   - 高度：6px
 *   - 隐藏溢出（overflow: hidden），实现进度条动画
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.1) → rgba(255, 255, 255, 0.05)）
 *   - 圆角：8px
 *   - 内阴影：0 2px 4px rgba(0, 0, 0, 0.1)
 */
.no-content-progress {
  width: 240px; /* 固定宽度 */
  height: 6px; /* 高度 */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  ); /* 渐变背景 */
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 隐藏溢出 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset; /* 内阴影 */
}

/**
 * 无内容进度条（.no-content-progress-bar）：
 *
 * 功能说明：
 *   加载中的进度条（滑动条）。
 *
 * 布局说明：
 *   - 宽度100%（填满容器）
 *   - 高度100%（填满容器）
 *
 * 动画效果：
 *   - 使用loading动画（1.5s无限循环）
 *   - 水平滑动效果（由@keyframes loading定义）
 *
 * 视觉设计：
 *   - 背景：#007aff（iOS蓝色）
 *   - 圆角：8px
 */
.no-content-progress-bar {
  width: 100%; /* 全宽 */
  height: 100%; /* 全高 */
  background: #5a8dbf; /* 深色模式：深蓝色（与复选框和滑块一致） */
  animation: loading 1.5s linear infinite; /* 加载动画 */
  border-radius: 8px; /* 圆角 */
}

/**
 * 无内容按钮容器（.no-content-buttons）：
 *
 * 功能说明：
 *   无内容页面的操作按钮容器（如"关闭界面"按钮）。
 *
 * 布局说明：
 *   - 默认display: none隐藏
 *   - 添加.visible类时display: block显示
 *   - 上边距：2rem
 */
.no-content-buttons {
  display: none; /* 默认隐藏 */
  margin-top: 2rem; /* 上边距 */
}

/**
 * 无内容按钮容器显示状态（.no-content-buttons.visible）：
 *
 * 功能说明：
 *   通过JavaScript添加.visible类来显示按钮容器。
 */
.no-content-buttons.visible {
  display: block; /* 显示为块级元素 */
}

/**
 * 无内容状态容器（.no-content-status）：
 *
 * 功能说明：
 *   无内容页面的状态文字容器（如"即将刷新..."）。
 *
 * 布局说明：
 *   - 默认display: none隐藏
 *   - 添加.visible类时display: block显示
 *   - 上边距：1rem
 */
.no-content-status {
  display: none; /* 默认隐藏 */
  margin-top: 1rem; /* 上边距 */
}

/**
 * 无内容状态容器显示状态（.no-content-status.visible）：
 *
 * 功能说明：
 *   通过JavaScript添加.visible类来显示状态容器。
 */
.no-content-status.visible {
  display: block; /* 显示为块级元素 */
}

/* ========================================================================
   CSS动画定义 (Keyframe Animations)
   ======================================================================== */

/**
 * 淡入动画（fadeIn）：
 *
 * 功能说明：
 *   通用淡入动画，从透明到不透明。
 *
 * 使用场景：
 *   - 设置面板显示（.settings-panel）
 *   - 其他模态弹窗显示
 *
 * 动画效果：
 *   opacity: 0（完全透明） → 1（完全不透明）
 */
@keyframes fadeIn {
  from {
    opacity: 0; /* 起始状态：完全透明 */
  }
  to {
    opacity: 1; /* 结束状态：完全不透明 */
  }
}

/* ========================================================================
   设置面板内容容器 (Settings Content Container)
   ======================================================================== */

/**
 * 设置面板内容容器（.settings-content）：
 *
 * 功能说明：
 *   包含设置表单、通知配置等的主容器。
 *
 * 布局说明：
 *   - 最大宽度：800px
 *   - 最大高度：85vh（视口高度的85%）
 *   - 隐藏溢出（overflow: hidden），内部元素独立滚动
 *   - 相对定位（position: relative），用于伪元素定位
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(30, 30, 40, 0.98) → rgba(25, 25, 35, 0.95)）
 *   - 边框：1px solid rgba(255, 255, 255, 0.15)
 *   - 圆角：20px（大圆角）
 *   - 毛玻璃效果：backdrop-filter: blur(20px)
 *   - 双重阴影：外阴影（0 25px 50px）+ 内阴影（inset）
 */
.settings-content {
  background: linear-gradient(
    145deg,
    rgba(30, 30, 40, 0.98),
    rgba(25, 25, 35, 0.95)
  ); /* 渐变背景 */
  border: 1px solid rgba(255, 255, 255, 0.15); /* 边框 */
  border-radius: 20px; /* 大圆角 */
  max-width: 800px; /* 最大宽度 */
  width: 100%; /* 全宽 */
  max-height: 85vh; /* 最大高度（视口高度的85%） */
  overflow: hidden; /* 隐藏溢出 */
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; /* 双重阴影 */
  backdrop-filter: blur(20px); /* 毛玻璃效果 */
  position: relative; /* 相对定位（用于伪元素） */
}

/**
 * 设置面板顶部装饰线（.settings-content::before）：
 *
 * 功能说明：
 *   在设置面板顶部添加一条渐变装饰线。
 *
 * 视觉效果：
 *   - 高度1px，横跨整个容器宽度
 *   - 渐变色：transparent → rgba(255, 255, 255, 0.2) → transparent
 */
.settings-content::before {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  right: 0; /* 右边对齐 */
  height: 1px; /* 线高1px */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  ); /* 渐变装饰线 */
}

/**
 * 设置面板自定义滚动条（.settings-content::-webkit-scrollbar）：
 *
 * 功能说明：
 *   自定义WebKit浏览器的滚动条样式，提升视觉一致性。
 *
 * 浏览器支持：
 *   - Chrome/Edge: 完全支持
 *   - Firefox: 不支持::-webkit-scrollbar，使用scrollbar-width替代
 *   - Safari: 完全支持
 *
 * 滚动条宽度：
 *   6px（窄滚动条，现代化设计）
 */
.settings-content::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度（窄） */
}

/**
 * 设置面板滚动条轨道（.settings-content::-webkit-scrollbar-track）：
 *
 * 功能说明：
 *   滚动条背景轨道样式。
 *
 * 视觉设计：
 *   - 背景：rgba(255, 255, 255, 0.05)（半透明白色）
 *   - 圆角：3px
 */
.settings-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05); /* 半透明白色背景 */
  border-radius: 3px; /* 圆角 */
}

/**
 * 设置面板滚动条滑块（.settings-content::-webkit-scrollbar-thumb）：
 *
 * 功能说明：
 *   滚动条可拖动的滑块样式。
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.2) → rgba(255, 255, 255, 0.1)）
 *   - 圆角：3px
 */
.settings-content::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.1)
  ); /* 渐变背景 */
  border-radius: 3px; /* 圆角 */
}

/**
 * 设置面板滚动条滑块悬停效果（.settings-content::-webkit-scrollbar-thumb:hover）：
 *
 * 交互效果：
 *   悬停时滑块颜色变亮，提供视觉反馈。
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.3) → rgba(255, 255, 255, 0.2)）
 */
.settings-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.2)
  ); /* 背景变亮 */
}

/* ========================================================================
   设置面板头部 (Settings Header)
   ======================================================================== */

/**
 * 设置面板头部容器（.settings-header）：
 *
 * 功能说明：
 *   包含设置标题和关闭按钮的头部区域。
 *
 * 布局说明：
 *   - 使用flex布局，两端对齐（space-between）
 *   - 左侧：设置标题（h3）
 *   - 右侧：关闭按钮（.settings-close-btn）
 *   - 内边距：2.5rem 2.5rem 2rem（上左右2.5rem，下2rem）
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.03) → rgba(255, 255, 255, 0.01)）
 *   - 底部边框：1px solid rgba(255, 255, 255, 0.12)
 *   - 相对定位（position: relative），用于伪元素
 */
.settings-header {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 2.5rem 2.5rem 2rem; /* 内边距（上左右2.5rem，下2rem） */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* 底部边框 */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.01)
  ); /* 渐变背景 */
  position: relative; /* 相对定位（用于伪元素） */
}

/**
 * 设置面板头部顶部装饰线（.settings-header::before）：
 *
 * 功能说明：
 *   在头部顶部添加一条渐变装饰线。
 *
 * 视觉效果：
 *   - 高度1px，横跨整个头部宽度
 *   - 渐变色：transparent → rgba(255, 255, 255, 0.15) → transparent
 */
.settings-header::before {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  right: 0; /* 右边对齐 */
  height: 1px; /* 线高1px */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  ); /* 渐变装饰线 */
}

/**
 * 设置面板头部底部装饰线（.settings-header::after）：
 *
 * 功能说明：
 *   在头部底部添加一条蓝色渐变装饰线，强调分隔。
 *
 * 视觉效果：
 *   - 高度1px，左右留出2.5rem边距
 *   - 渐变色：transparent → rgba(0, 122, 255, 0.3) → transparent
 */
.settings-header::after {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 底部对齐 */
  left: 2.5rem; /* 左边留白2.5rem */
  right: 2.5rem; /* 右边留白2.5rem */
  height: 1px; /* 线高1px */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 122, 255, 0.3),
    transparent
  ); /* 蓝色渐变装饰线 */
}

/**
 * 设置面板标题（.settings-header h3）：
 *
 * 功能说明：
 *   设置面板的主标题文字（如"⚙️ 设置"）。
 *
 * 布局说明：
 *   - 使用flex布局，横向排列标题文本和图标
 *   - gap: 0.5rem，元素间距
 *
 * 排版设计：
 *   - 字号：1.5rem（24px，大标题）
 *   - 字重：700（粗体）
 *   - 字间距：-0.02em（紧凑）
 *   - 颜色：#ffffff（白色）
 */
.settings-header h3 {
  margin: 0; /* 清除默认外边距 */
  color: #ffffff; /* 白色 */
  font-size: 1.5rem; /* 字号（24px） */
  font-weight: 700; /* 粗体 */
  letter-spacing: -0.02em; /* 紧凑字间距 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 0.5rem; /* 元素间距（8px） */
}

/**
 * 设置关闭按钮（.settings-close-btn）：
 *
 * 功能说明：
 *   设置面板右上角的圆形关闭按钮，包含"×"图标。
 *
 * 布局说明：
 *   - 固定尺寸：32x32px（圆形）
 *   - 使用flex布局居中内容
 *   - 相对定位（position: relative），用于伪元素
 *   - 隐藏溢出（overflow: hidden），防止伪元素超出边界
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 69, 58, 0.12) → rgba(255, 69, 58, 0.08)）
 *   - 边框：1.5px solid rgba(255, 69, 58, 0.25)（红色半透明）
 *   - 圆角：50%（圆形）
 *   - 颜色：#ff453a（iOS红色）
 *   - 毛玻璃效果：backdrop-filter: blur(12px)
 *   - 双重阴影：0 2px 12px + 0 1px 3px
 *
 * 交互效果：
 *   - 过渡动画：all 0.25s cubic-bezier(0.4, 0, 0.2, 1)（流畅缓动）
 *   - :hover：放大1.08倍，背景变亮，阴影增强，颜色变深
 *   - :active：缩小0.92倍，添加内阴影，模拟按下效果
 *
 * "×"图标实现：
 *   使用::before和::after伪元素绘制两条交叉的线条。
 */
.settings-close-btn {
  background: linear-gradient(
    135deg,
    rgba(255, 69, 58, 0.12),
    rgba(255, 69, 58, 0.08)
  ); /* 渐变背景 */
  border: 1.5px solid rgba(255, 69, 58, 0.25); /* 红色半透明边框 */
  border-radius: 50%; /* 圆形 */
  color: #ff453a; /* iOS红色 */
  padding: 0; /* 无内边距 */
  width: 32px; /* 固定宽度 */
  height: 32px; /* 固定高度 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  cursor: pointer; /* 鼠标指针 */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* 流畅过渡动画 */
  backdrop-filter: blur(12px); /* 毛玻璃效果（标准语法） */
  -webkit-backdrop-filter: blur(12px); /* 毛玻璃效果（WebKit前缀） */
  box-shadow: 0 2px 12px rgba(255, 69, 58, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1); /* 双重阴影 */
  position: relative; /* 相对定位（用于伪元素） */
  overflow: hidden; /* 隐藏溢出 */
}

/**
 * 设置关闭按钮"×"图标第一条线（.settings-close-btn::before）：
 *
 * 功能说明：
 *   使用伪元素绘制"×"图标的第一条斜线（45度旋转）。
 *
 * 布局说明：
 *   - 绝对定位，居中对齐（top: 50%, left: 50%）
 *   - 使用transform: translate(-50%, -50%) rotate(45deg)实现居中和旋转
 *
 * 视觉设计：
 *   - 尺寸：14px × 2px（窄条形）
 *   - 背景：currentColor（继承父元素的color）
 *   - 圆角：1px
 */
.settings-close-btn::before {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中（起点） */
  left: 50%; /* 水平居中（起点） */
  width: 14px; /* 宽度 */
  height: 2px; /* 高度 */
  background: currentColor; /* 继承父元素颜色 */
  transform: translate(-50%, -50%) rotate(45deg); /* 居中并旋转45度 */
  border-radius: 1px; /* 圆角 */
  transition: all 0.2s ease; /* 过渡动画 */
}

/**
 * 设置关闭按钮"×"图标第二条线（.settings-close-btn::after）：
 *
 * 功能说明：
 *   使用伪元素绘制"×"图标的第二条斜线（-45度旋转）。
 *
 * 布局说明：
 *   - 绝对定位，居中对齐（top: 50%, left: 50%）
 *   - 使用transform: translate(-50%, -50%) rotate(-45deg)实现居中和反向旋转
 *
 * 视觉设计：
 *   - 尺寸：14px × 2px（窄条形）
 *   - 背景：currentColor（继承父元素的color）
 *   - 圆角：1px
 */
.settings-close-btn::after {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中（起点） */
  left: 50%; /* 水平居中（起点） */
  width: 14px; /* 宽度 */
  height: 2px; /* 高度 */
  background: currentColor; /* 继承父元素颜色 */
  transform: translate(-50%, -50%) rotate(-45deg); /* 居中并旋转-45度 */
  border-radius: 1px; /* 圆角 */
  transition: all 0.2s ease; /* 过渡动画 */
}

/**
 * 设置关闭按钮悬停效果（.settings-close-btn:hover）：
 *
 * 交互效果：
 *   - 背景变亮（rgba(255, 69, 58, 0.2) → rgba(255, 69, 58, 0.15)）
 *   - 边框变深（rgba(255, 69, 58, 0.4)）
 *   - 放大1.08倍（transform: scale(1.08)）
 *   - 阴影增强（0 4px 20px + 0 2px 8px）
 *   - 颜色变深（#ff2d20）
 */
.settings-close-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 69, 58, 0.2),
    rgba(255, 69, 58, 0.15)
  ); /* 背景变亮 */
  border-color: rgba(255, 69, 58, 0.4); /* 边框变深 */
  transform: scale(1.08); /* 放大1.08倍 */
  box-shadow: 0 4px 20px rgba(255, 69, 58, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15); /* 阴影增强 */
  color: #ff2d20; /* 颜色变深 */
}

/**
 * 设置关闭按钮悬停时"×"图标效果（.settings-close-btn:hover::before/after）：
 *
 * 交互效果：
 *   - 线条变长（14px → 16px）
 *   - 线条变粗（2px → 2.5px）
 */
.settings-close-btn:hover::before,
.settings-close-btn:hover::after {
  width: 16px; /* 宽度增加 */
  height: 2.5px; /* 高度增加 */
}

/**
 * 设置关闭按钮按下效果（.settings-close-btn:active）：
 *
 * 交互效果：
 *   - 缩小0.92倍（transform: scale(0.92)）
 *   - 阴影减弱（0 1px 6px）
 *   - 添加内阴影（inset 0 1px 2px），模拟按下效果
 *   - 背景变深（rgba(255, 69, 58, 0.25) → rgba(255, 69, 58, 0.2)）
 */
.settings-close-btn:active {
  transform: scale(0.92); /* 缩小0.92倍 */
  box-shadow: 0 1px 6px rgba(255, 69, 58, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1); /* 阴影减弱 + 内阴影 */
  background: linear-gradient(
    135deg,
    rgba(255, 69, 58, 0.25),
    rgba(255, 69, 58, 0.2)
  ); /* 背景变深 */
}

/* ========================================================================
   设置面板主体 (Settings Body)
   ======================================================================== */

/**
 * 设置面板主体容器（.settings-body）：
 *
 * 功能说明：
 *   包含所有设置选项和表单元素的主内容区域。
 *
 * 布局说明：
 *   - 内边距：2rem（统一内边距）
 *   - 最大高度：calc(85vh - 140px)（视口高度的85% - 头部高度）
 *   - 垂直滚动：overflow-y: auto（内容溢出时显示滚动条）
 *
 * 视觉设计：
 *   - 背景：线性渐变（transparent → rgba(255, 255, 255, 0.005)）
 *   - 渐变方向：从上到下（180deg）
 *
 * 滚动行为：
 *   当设置选项过多时，此容器独立滚动，头部保持固定。
 */
.settings-body {
  padding: 2rem; /* 内边距 */
  max-height: calc(85vh - 140px); /* 最大高度（视口高度85% - 头部高度） */
  overflow-y: auto; /* 垂直滚动 */
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.005)); /* 渐变背景 */
}

/**
 * 设置主标题（.settings-main-title）：
 *
 * 功能说明：
 *   设置面板内的主要章节标题（如"倒计时配置"、"通知配置"）。
 *
 * 布局说明：
 *   - 使用flex布局，横向排列标题文本和图标
 *   - gap: 0.5rem，元素间距
 *   - 外边距：0 0 1.5rem 0（下边距1.5rem）
 *   - 内边距底部：0.75rem
 *   - 底部边框：1px solid rgba(255, 255, 255, 0.15)
 *
 * 排版设计：
 *   - 颜色：#ffffff（白色）
 *   - 字号：1.3rem（20.8px，较大标题）
 *   - 字重：700（粗体）
 *   - 字间距：-0.01em（紧凑）
 */
.settings-main-title {
  color: #ffffff; /* 白色 */
  font-size: 1.3rem; /* 字号（20.8px） */
  font-weight: 700; /* 粗体 */
  margin: 0 0 1.5rem 0; /* 外边距（下边距1.5rem） */
  padding-bottom: 0.75rem; /* 内边距底部 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* 底部边框 */
  letter-spacing: -0.01em; /* 紧凑字间距 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 0.5rem; /* 元素间距（8px） */
}

/* ========================================================================
   设置组样式 (Setting Groups)
   ======================================================================== */

/**
 * 设置组容器（.setting-group）：
 *
 * 功能说明：
 *   包含一组相关设置选项的容器（如"倒计时配置"组、"通知配置"组）。
 *
 * 布局说明：
 *   - 外边距底部：2rem（组与组之间的间距）
 *   - 内边距：1.5rem（统一内边距）
 *   - 圆角：24px（大圆角，现代感）
 *   - 相对定位（position: relative），用于伪元素
 *   - 隐藏溢出（overflow: hidden），圆角裁剪
 *
 * 视觉设计：
 *   - 背景：rgba(45, 45, 60, 0.9)（半透明深色）
 *   - 边框：1px solid rgba(255, 255, 255, 0.12)
 *   - 阴影：0 8px 16px rgba(0, 0, 0, 0.2)（柔和阴影）
 */
.setting-group {
  margin-bottom: 2rem; /* 外边距底部 */
  background: rgba(45, 45, 60, 0.9); /* 半透明深色背景 */
  border: 1px solid rgba(255, 255, 255, 0.12); /* 边框 */
  border-radius: 24px; /* 大圆角 */
  padding: 1.5rem; /* 内边距 */
  position: relative; /* 相对定位（用于伪元素） */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 阴影 */
  overflow: hidden; /* 隐藏溢出 */
}

/**
 * 设置组顶部装饰线（.setting-group::before）：
 *
 * 功能说明：
 *   在设置组顶部添加一条渐变装饰线。
 *
 * 视觉效果：
 *   - 高度1px，横跨整个组宽度
 *   - 渐变色：transparent → rgba(255, 255, 255, 0.15) → transparent
 *   - 圆角：16px 16px 0 0（顶部圆角，与容器圆角匹配）
 */
.setting-group::before {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  right: 0; /* 右边对齐 */
  height: 1px; /* 线高1px */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  ); /* 渐变装饰线 */
  border-radius: 16px 16px 0 0; /* 顶部圆角 */
}

/**
 * 设置组最后一项（.setting-group:last-child）：
 *
 * 功能说明：
 *   移除最后一个设置组的底部外边距，避免多余空白。
 */
.setting-group:last-child {
  margin-bottom: 0; /* 移除底部外边距 */
}

/**
 * 设置组标题（.setting-group-title）：
 *
 * 功能说明：
 *   设置组的标题文字（如"🔔 通知配置"）。
 *
 * 布局说明：
 *   - 使用flex布局，横向排列标题文本和图标
 *   - gap: 0.5rem，元素间距
 *   - 外边距：0 0 1.5rem 0（下边距1.5rem）
 *   - 内边距底部：0.75rem
 *   - 底部边框：1px solid rgba(255, 255, 255, 0.15)
 *   - 相对定位（position: relative），用于::after伪元素
 *
 * 排版设计：
 *   - 字号：1.2rem（19.2px）
 *   - 字重：700（粗体）
 *   - 字间距：-0.01em（紧凑）
 *
 * 渐变文字效果：
 *   - 背景：线性渐变（#f5f5f7 → rgba(0, 122, 255, 0.8)）
 *   - 使用background-clip: text和-webkit-text-fill-color: transparent实现渐变文字
 *   - 降级方案：color: #f5f5f7（不支持渐变时显示纯白色）
 */
.setting-group-title {
  color: #f5f5f7; /* 纯白色（降级方案） */
  font-size: 1.2rem; /* 字号（19.2px） */
  font-weight: 700; /* 粗体 */
  margin: 0 0 1.5rem 0; /* 外边距（下边距1.5rem） */
  padding-bottom: 0.75rem; /* 内边距底部 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* 底部边框 */
  background: linear-gradient(135deg, #f5f5f7, rgba(0, 122, 255, 0.8)); /* 渐变背景 */
  -webkit-background-clip: text; /* WebKit前缀：背景裁剪到文字 */
  -webkit-text-fill-color: transparent; /* WebKit前缀：文字颜色透明 */
  background-clip: text; /* 标准语法：背景裁剪到文字 */
  position: relative; /* 相对定位（用于::after伪元素） */
  letter-spacing: -0.01em; /* 紧凑字间距 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 0.5rem; /* 元素间距（8px） */
}

/**
 * 设置组标题底部装饰线（.setting-group-title::after）：
 *
 * 功能说明：
 *   在设置组标题底部添加一条蓝色渐变装饰线。
 *
 * 视觉效果：
 *   - 宽度：40%（左对齐，不占满整个宽度）
 *   - 高度：2px（较粗）
 *   - 渐变色：#007aff → rgba(0, 122, 255, 0.4) → transparent
 *   - 圆角：1px
 */
.setting-group-title::after {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 底部对齐 */
  left: 0; /* 左对齐 */
  width: 40%; /* 宽度40% */
  height: 2px; /* 线高2px */
  background: linear-gradient(
    90deg,
    #007aff,
    rgba(0, 122, 255, 0.4),
    transparent
  ); /* 蓝色渐变装饰线 */
  border-radius: 1px; /* 圆角 */
}

/**
 * 设置子组容器（.setting-subgroup）：
 *
 * 功能说明：
 *   设置组内的子分组容器（如"Bark通知"子组）。
 *
 * 布局说明：
 *   - 外边距：1.5rem 0（上下边距）
 *   - 内边距：1rem（统一内边距）
 *   - 圆角：12px（中等圆角）
 *   - 相对定位（position: relative），用于伪元素或其他定位
 *
 * 视觉设计：
 *   - 背景：rgba(255, 255, 255, 0.02)（浅色半透明背景，区分主容器）
 */
.setting-subgroup {
  margin: 1.5rem 0; /* 外边距（上下1.5rem） */
  padding: 1rem; /* 内边距 */
  background: rgba(255, 255, 255, 0.02); /* 浅色半透明背景 */
  border-radius: 12px; /* 中等圆角 */
  position: relative; /* 相对定位 */
}

/**
 * 设置子组标题（.setting-subgroup-title）：
 *
 * 功能说明：
 *   设置子组的标题文字（如"Bark服务器地址"）。
 *
 * 布局说明：
 *   - 使用flex布局，横向排列标题文本和图标
 *   - gap: 0.5rem，元素间距
 *   - 外边距：0 0 1rem 0（下边距1rem）
 *   - 内边距底部：0.5rem
 *   - 底部边框：1px solid rgba(255, 255, 255, 0.1)
 *
 * 排版设计：
 *   - 颜色：rgba(245, 245, 247, 0.95)（略透明的浅灰白色）
 *   - 字号：1rem（16px）
 *   - 字重：600（半粗体）
 *   - 字间距：-0.01em（紧凑）
 */
.setting-subgroup-title {
  color: rgba(245, 245, 247, 0.95); /* 略透明的浅灰白色 */
  font-size: 1rem; /* 字号（16px） */
  font-weight: 600; /* 半粗体 */
  margin: 0 0 1rem 0; /* 外边距（下边距1rem） */
  padding-bottom: 0.5rem; /* 内边距底部 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 底部边框 */
  letter-spacing: -0.01em; /* 紧凑字间距 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 0.5rem; /* 元素间距（8px） */
}

/**
 * 设置项容器（.setting-item）：
 *
 * 功能说明：
 *   单个设置选项的容器（包含标签和输入框）。
 *
 * 布局说明：
 *   - 外边距底部：1rem（项与项之间的间距）
 *   - 内边距：0.5rem 0（上下内边距）
 *   - 相对定位（position: relative），用于复杂布局
 *
 * 视觉设计：
 *   - 背景：transparent（透明）
 *   - 边框：none（无边框）
 *   - 圆角：0（无圆角）
 *   - 过渡：none（无过渡动画，保持简洁）
 */
.setting-item {
  margin-bottom: 1rem; /* 外边距底部 */
  padding: 0.5rem 0; /* 内边距（上下0.5rem） */
  background: transparent; /* 透明背景 */
  border: none; /* 无边框 */
  border-radius: 0; /* 无圆角 */
  transition: none; /* 无过渡动画 */
  position: relative; /* 相对定位 */
}

/**
 * 设置项最后一项（.setting-item:last-child）：
 *
 * 功能说明：
 *   移除最后一个设置项的底部外边距，避免多余空白。
 */
.setting-item:last-child {
  margin-bottom: 0; /* 移除底部外边距 */
}

/* ========================================================================
   设置标签和复选框 (Setting Labels & Checkboxes)
   ======================================================================== */

/**
 * 设置标签容器（.setting-label）：
 *
 * 功能说明：
 *   包含复选框和标题的标签容器，点击整个区域可切换复选框状态。
 *
 * 布局说明：
 *   - 使用flex布局，横向排列复选框和标题
 *   - gap: 1rem，元素间距
 *   - 内边距：0.25rem（小内边距，扩大点击区域）
 *   - 圆角：8px
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 *   - 过渡动画：all 0.2s ease
 *   - 悬停时标题颜色变化（由子规则控制）
 */
.setting-label {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 1rem; /* 元素间距（16px） */
  cursor: pointer; /* 可点击 */
  margin-bottom: 0; /* 移除底部外边距 */
  padding: 0.25rem; /* 小内边距 */
  border-radius: 8px; /* 圆角 */
  transition: all 0.2s ease; /* 过渡动画 */
}

/**
 * 设置标签内的复选框（.setting-label input[type='checkbox']）：
 *
 * 功能说明：
 *   设置选项的复选框（如"启用通知"）。
 *
 * 布局说明：
 *   - 固定尺寸：20x20px
 *   - 相对定位（position: relative），用于自定义样式
 *
 * 视觉设计：
 *   - accent-color: #007aff（现代浏览器复选框主题色）
 *   - 圆角：4px
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 *   - 过渡动画：all 0.2s ease
 *   - 选中时放大1.1倍并添加蓝色阴影（由:checked规则控制）
 *
 * 浏览器支持：
 *   - accent-color：Chrome 93+、Firefox 92+、Safari 15.4+
 *   - 不支持的浏览器将使用默认复选框样式
 */
.setting-label input[type='checkbox'] {
  width: 20px; /* 固定宽度 */
  height: 20px; /* 固定高度 */
  accent-color: #5a8dbf; /* 复选框主题色（深色模式：深蓝色，确保勾勾为白色） */
  cursor: pointer; /* 可点击 */
  border-radius: 4px; /* 圆角 */
  transition: all 0.2s ease; /* 过渡动画 */
  position: relative; /* 相对定位 */
}

/**
 * 设置标签内的复选框选中状态（.setting-label input[type='checkbox']:checked）：
 *
 * 交互效果：
 *   - 放大1.1倍（transform: scale(1.1)）
 *   - 添加蓝色发光阴影（0 0 10px rgba(0, 122, 255, 0.3)）
 */
.setting-label input[type='checkbox']:checked {
  transform: scale(1.1); /* 放大1.1倍 */
  box-shadow: 0 0 10px rgba(90, 141, 191, 0.4); /* 深蓝色发光阴影 */
}

/**
 * 设置标题（.setting-title）：
 *
 * 功能说明：
 *   设置选项的标题文字（如“启用通知”“自动重调”）。
 *
 * 布局说明：
 *   - flex: 1（占据剩余空间）
 *
 * 排版设计：
 *   - 颜色：#f5f5f7（浅灰白色）
 *   - 字号：1rem（16px）
 *   - 字重：600（半粗体）
 *   - 字间距：-0.01em（紧凑）
 *
 * 交互效果：
 *   - 过渡动画：color 0.2s ease
 *   - 悬停时颜色变化（由父级:hover规则控制）
 */
.setting-title {
  color: #f5f5f7; /* 浅灰白色 */
  font-size: 1rem; /* 字号（16px） */
  font-weight: 600; /* 半粗体 */
  flex: 1; /* 占据剩余空间 */
  transition: color 0.2s ease; /* 过渡动画 */
  letter-spacing: -0.01em; /* 紧凑字间距 */
}

/**
 * 设置标签悬停时标题效果（.setting-label:hover .setting-title）：
 *
 * 交互效果：
 *   悬停时标题颜色略微变暗（rgba(245, 245, 247, 0.9)）。
 */
.setting-label:hover .setting-title {
  color: rgba(245, 245, 247, 0.9); /* 颜色略微变暗 */
}

/**
 * 设置描述（.setting-description）：
 *
 * 功能说明：
 *   设置选项的描述文字（如"开启后会在倒计时结束时自动提交"）。
 *
 * 布局说明：
 *   - 左边距：3rem（与复选框对齐）
 *
 * 排版设计：
 *   - 颜色：rgba(245, 245, 247, 0.65)（半透明浅灰白色）
 *   - 字号：0.9rem（14.4px，较小）
 *   - 行高：1.5
 *   - 字体样式：italic（斜体）
 *
 * 交互效果：
 *   - 过渡动画：color 0.2s ease
 *   - 父级悬停时颜色变化（由父级:hover规则控制）
 */
.setting-description {
  color: rgba(245, 245, 247, 0.65); /* 半透明浅灰白色 */
  font-size: 0.9rem; /* 字号（14.4px） */
  line-height: 1.5; /* 行高 */
  margin-left: 3rem; /* 左边距（与复选框对齐） */
  font-style: italic; /* 斜体 */
  transition: color 0.2s ease; /* 过渡动画 */
}

/**
 * 设置项悬停时描述效果（.setting-item:hover .setting-description）：
 *
 * 交互效果：
 *   悬停时描述颜色变亮（rgba(245, 245, 247, 0.75)）。
 */
.setting-item:hover .setting-description {
  color: rgba(245, 245, 247, 0.75); /* 颜色变亮 */
}

/* ========================================================================
   音量滑块样式 (Volume Slider)
   ======================================================================== */

/**
 * 音量滑块容器（.volume-slider）：
 *
 * 功能说明：
 *   通知音量调节的滑块控件（HTML <input type="range">）。
 *
 * 布局说明：
 *   - flex: 1（占据剩余空间）
 *   - 左右外边距：1rem
 *   - 高度：6px（窄滑块轨道）
 *   - 相对定位（position: relative），用于伪元素
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.1) → rgba(255, 255, 255, 0.05)）
 *   - 圆角：3px
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 *   - outline: none（移除焦点outline）
 *   - 过渡动画：all 0.3s ease
 */
.volume-slider {
  flex: 1; /* 占据剩余空间 */
  margin: 0 1rem; /* 左右外边距 */
  height: 6px; /* 高度（窄轨道） */
  /* 使用浏览器原生样式实现左右颜色区分 */
  accent-color: #5a8dbf; /* 深色模式：深蓝色（与复选框一致） */
  border-radius: 3px; /* 圆角 */
  outline: none; /* 移除焦点outline */
  cursor: pointer;
}

/* 音量滑块轨道（WebKit 浏览器）- 使用 accent-color 自动处理 */
.volume-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
}

/* 音量滑块轨道（Firefox 浏览器）- 使用 accent-color 自动处理 */
.volume-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  border: none;
  cursor: pointer; /* 可点击 */
  transition: all 0.3s ease; /* 过渡动画 */
  position: relative; /* 相对定位 */
}

/**
 * 音量滑块滑块（WebKit浏览器）（.volume-slider::-webkit-slider-thumb）：
 *
 * 功能说明：
 *   滑块的可拖动圆形按钮（WebKit浏览器如Chrome、Safari、Edge）。
 *
 * 布局说明：
 *   - 固定尺寸：20x20px（圆形）
 *   - appearance: none（移除浏览器默认样式）
 *
 * 视觉设计：
 *   - 背景：线性渐变（#007aff → #0056cc）
 *   - 圆角：50%（圆形）
 *   - 双重阴影：0 2px 8px（蓝色阴影）+ 0 0 0 2px（白色边框阴影）
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 *   - 过渡动画：all 0.3s cubic-bezier(0.4, 0, 0.2, 1)（流畅缓动）
 *   - 悬停时放大1.2倍并增强阴影（由:hover规则控制）
 */
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* 移除默认样式 */
  appearance: none; /* 移除默认样式 */
  width: 16px; /* 固定宽度 */
  height: 16px; /* 固定高度 */
  margin-top: -5px; /* 垂直居中：(轨道高度6px - 球高度16px) / 2 = -5px */
  background: linear-gradient(135deg, #5a8dbf, #4a7daf); /* 渐变背景（深蓝色） */
  border-radius: 50%; /* 圆形 */
  cursor: pointer; /* 可点击 */
  border: none; /* 移除边框 */
  box-shadow: 0 2px 8px rgba(90, 141, 191, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.1); /* 双重阴影（深蓝色） */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 流畅过渡动画 */
}

/**
 * 音量滑块滑块悬停效果（WebKit）（.volume-slider::-webkit-slider-thumb:hover）：
 *
 * 交互效果：
 *   - 放大1.2倍（transform: scale(1.2)）
 *   - 增强阴影：0 4px 15px（主阴影）+ 0 0 0 3px（边框阴影）+ 0 0 20px（发光阴影）
 */
.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2); /* 放大1.2倍 */
  box-shadow: 0 4px 15px rgba(90, 141, 191, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.2),
    0 0 20px rgba(90, 141, 191, 0.3); /* 三重增强阴影（深蓝色） */
}

/**
 * 音量滑块滑块（Firefox浏览器）（.volume-slider::-moz-range-thumb）：
 *
 * 功能说明：
 *   滑块的可拖动圆形按钮（Firefox浏览器）。
 *
 * 布局说明：
 *   - 固定尺寸：20x20px（圆形）
 *
 * 视觉设计：
 *   - 背景：线性渐变（#007aff → #0056cc）
 *   - 圆角：50%（圆形）
 *   - 边框：2px solid rgba(255, 255, 255, 0.1)
 *   - 阴影：0 2px 8px rgba(0, 122, 255, 0.3)
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 *   - 过渡动画：all 0.3s cubic-bezier(0.4, 0, 0.2, 1)（流畅缓动）
 *
 * 注意事项：
 *   Firefox不支持::-webkit-slider-thumb，需要单独定义::-moz-range-thumb。
 */
.volume-slider::-moz-range-thumb {
  width: 16px; /* 固定宽度 */
  height: 16px; /* 固定高度 */
  background: linear-gradient(135deg, #5a8dbf, #4a7daf); /* 渐变背景（深蓝色） */
  border-radius: 50%; /* 圆形 */
  cursor: pointer; /* 可点击 */
  border: none; /* 移除边框 */
  box-shadow: 0 2px 8px rgba(90, 141, 191, 0.4); /* 深蓝色阴影 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 流畅过渡动画 */
}

/**
 * 音量值显示（.volume-value）：
 *
 * 功能说明：
 *   显示当前音量百分比值（如"50%"）。
 *
 * 布局说明：
 *   - 最小宽度：50px
 *   - 文字右对齐（text-align: right）
 *
 * 排版设计：
 *   - 字号：1rem（16px）
 *   - 字重：700（粗体）
 *
 * 渐变文字效果：
 *   - 背景：线性渐变（#007aff → rgba(0, 122, 255, 0.8)）
 *   - 使用background-clip: text和-webkit-text-fill-color: transparent实现渐变文字
 *   - 降级方案：color: #007aff（不支持渐变时显示纯蓝色）
 *   - 文字阴影：0 0 10px rgba(0, 122, 255, 0.3)（发光效果）
 */
.volume-value {
  color: #5a8dbf; /* 深蓝色（深色模式，与复选框和滑块一致） */
  font-size: 1rem; /* 字号（16px） */
  font-weight: 700; /* 粗体 */
  min-width: 50px; /* 最小宽度 */
  text-align: right; /* 文字右对齐 */
  background: linear-gradient(135deg, #5a8dbf, rgba(90, 141, 191, 0.8)); /* 渐变背景（深蓝色） */
  -webkit-background-clip: text; /* WebKit前缀：背景裁剪到文字 */
  -webkit-text-fill-color: transparent; /* WebKit前缀：文字颜色透明 */
  background-clip: text; /* 标准语法：背景裁剪到文字 */
  text-shadow: 0 0 10px rgba(90, 141, 191, 0.3); /* 深蓝色发光效果 */
}

/* ========================================================================
   设置输入框样式 (Setting Input Fields)
   ======================================================================== */

/**
 * 设置输入框（.setting-input）：
 *
 * 功能说明：
 *   设置选项的文本输入框（如"Bark服务器地址"输入框）。
 *
 * 布局说明：
 *   - 全宽（width: 100%）
 *   - 内边距：0.75rem 1rem（上下0.75rem，左右1rem）
 *   - 上外边距：0.5rem（与标签分离）
 *   - 圆角：8px
 *
 * 视觉设计：
 *   - 背景：rgba(255, 255, 255, 0.05)（浅色半透明）
 *   - 边框：1px solid rgba(255, 255, 255, 0.1)
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *   - 字号：0.95rem（15.2px）
 *   - 字体：inherit（继承父元素字体）
 *   - 毛玻璃效果：backdrop-filter: blur(10px)
 *
 * 交互效果：
 *   - 过渡动画：all 0.3s ease
 *   - 聚焦时边框变蓝、背景变亮、添加蓝色外轮廓（由:focus规则控制）
 */
.setting-input {
  width: 100%; /* 全宽 */
  padding: 0.75rem 1rem; /* 内边距（上下0.75rem，左右1rem） */
  margin-top: 0.5rem; /* 上外边距 */
  background: rgba(255, 255, 255, 0.05); /* 浅色半透明背景 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 边框 */
  border-radius: 8px; /* 圆角 */
  color: #f5f5f7; /* 浅灰白色文字 */
  font-size: 0.95rem; /* 字号（15.2px） */
  font-family: inherit; /* 继承字体 */
  transition: all 0.3s ease; /* 过渡动画 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
}

/**
 * 设置输入框聚焦状态（.setting-input:focus）：
 *
 * 交互效果：
 *   - 移除默认outline（outline: none）
 *   - 边框变蓝（border-color: #007aff）
 *   - 背景变亮（rgba(255, 255, 255, 0.08)）
 *   - 添加蓝色外轮廓（box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1)）
 */
.setting-input:focus {
  outline: none; /* 移除默认outline */
  border-color: #007aff; /* 边框变蓝 */
  background: rgba(255, 255, 255, 0.08); /* 背景变亮 */
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1); /* 蓝色外轮廓 */
}

/**
 * 设置输入框占位符（.setting-input::placeholder）：
 *
 * 功能说明：
 *   输入框的占位符文字样式（如"请输入服务器地址"）。
 *
 * 视觉设计：
 *   - 颜色：rgba(245, 245, 247, 0.5)（半透明浅灰白色）
 */
.setting-input::placeholder {
  color: rgba(245, 245, 247, 0.5); /* 半透明浅灰白色 */
}

/* ========================================================================
   设置选择框样式 (Setting Select Fields)
   ======================================================================== */

/**
 * 设置选择框（.setting-select）：
 *
 * 功能说明：
 *   设置选项的下拉选择框（HTML <select>）。
 *
 * 布局说明：
 *   - 全宽（width: 100%）
 *   - 内边距：0.75rem 1rem（上下0.75rem，左1rem，右3rem为下拉箭头留空）
 *   - 上外边距：0.5rem（与标签分离）
 *   - 圆角：8px
 *
 * 视觉设计：
 *   - 背景：rgba(255, 255, 255, 0.05)（浅色半透明）
 *   - 边框：1px solid rgba(255, 255, 255, 0.1)
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *   - 字号：0.95rem（15.2px）
 *   - 字体：inherit（继承父元素字体）
 *   - 毛玻璃效果：backdrop-filter: blur(10px)
 *
 * 自定义下拉箭头：
 *   - appearance: none（移除浏览器默认样式）
 *   - background-image：内联SVG下拉箭头图标（浅灰白色）
 *   - background-position：right 1rem center（右侧1rem居中）
 *   - background-size：16px（图标尺寸）
 *   - padding-right：3rem（为箭头图标留空）
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 *   - 过渡动画：all 0.3s ease
 *   - 聚焦时边框变蓝、背景变亮、添加蓝色外轮廓（由:focus规则控制）
 */
.setting-select {
  width: 100%; /* 全宽 */
  padding: 0.75rem 1rem; /* 内边距（上下0.75rem，左右1rem） */
  margin-top: 0.5rem; /* 上外边距 */
  background: rgba(255, 255, 255, 0.05); /* 浅色半透明背景 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 边框 */
  border-radius: 8px; /* 圆角 */
  color: #f5f5f7; /* 浅灰白色文字 */
  font-size: 0.95rem; /* 字号（15.2px） */
  font-family: inherit; /* 继承字体 */
  cursor: pointer; /* 可点击 */
  transition: all 0.3s ease; /* 过渡动画 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  appearance: none; /* 移除默认样式 */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); /* 内联SVG下拉箭头 */
  background-repeat: no-repeat; /* 不重复 */
  background-position: right 1rem center; /* 右侧1rem居中 */
  background-size: 16px; /* 图标尺寸16px */
  padding-right: 3rem; /* 右内边距（为箭头留空） */
}

/**
 * 设置选择框聚焦状态（.setting-select:focus）：
 *
 * 交互效果：
 *   - 移除默认outline（outline: none）
 *   - 边框变蓝（border-color: #007aff）
 *   - 背景变亮（background-color: rgba(255, 255, 255, 0.08)）
 *   - 添加蓝色外轮廓（box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1)）
 */
.setting-select:focus {
  outline: none; /* 移除默认outline */
  border-color: #007aff; /* 边框变蓝 */
  background-color: rgba(255, 255, 255, 0.08); /* 背景变亮 */
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1); /* 蓝色外轮廓 */
}

/**
 * 设置选择框选项（.setting-select option）：
 *
 * 功能说明：
 *   下拉列表中的选项样式。
 *
 * 视觉设计：
 *   - 背景：#1a1a1f（深色背景，与页面背景一致）
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *   - 内边距：0.5rem
 */
.setting-select option {
  background: #1a1a1f; /* 深色背景 */
  color: #f5f5f7; /* 浅灰白色文字 */
  padding: 0.5rem; /* 内边距 */
}

/**
 * 设置标签布局调整（带输入框）（.setting-label.has-input）：
 *
 * 功能说明：
 *   当设置标签包含输入框时，调整布局为垂直排列。
 *
 * 布局说明：
 *   - flex-direction: column（垂直排列）
 *   - align-items: flex-start（左对齐）
 *   - gap: 0.5rem（元素间距）
 */
.setting-label.has-input {
  flex-direction: column; /* 垂直排列 */
  align-items: flex-start; /* 左对齐 */
  gap: 0.5rem; /* 元素间距（8px） */
}

/**
 * 设置标签布局调整（带输入框）标题（.setting-label.has-input .setting-title）：
 *
 * 功能说明：
 *   调整标题的底部外边距。
 *
 * 布局说明：
 *   - margin-bottom: 0.25rem（底部外边距）
 */
.setting-label.has-input .setting-title {
  margin-bottom: 0.25rem; /* 底部外边距 */
}

/* ========================================================================
   通用按钮样式 (Generic Button Styles)
   ======================================================================== */

/**
 * 通用按钮（.btn）：
 *
 * 功能说明：
 *   通用的主要操作按钮样式（如"保存"、"测试"按钮）。
 *
 * 布局说明：
 *   - 内边距：0.75rem 1.5rem（上下0.75rem，左右1.5rem）
 *   - 圆角：10px
 *
 * 视觉设计：
 *   - 背景：rgba(0, 122, 255, 0.8)（半透明iOS蓝色）
 *   - 边框：1px solid rgba(0, 122, 255, 0.3)
 *   - 文字颜色：#ffffff（白色）
 *   - 字号：0.95rem（15.2px）
 *   - 字重：600（半粗体）
 *   - 阴影：0 2px 8px rgba(0, 122, 255, 0.2)
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 *   - 过渡动画：all 0.2s ease
 *   - 悬停时背景变亮、向上位移1px、阴影增强（由:hover规则控制）
 *   - 按下时取消位移、背景变暗（由:active规则控制）
 */
.btn {
  background: rgba(0, 122, 255, 0.8); /* 半透明iOS蓝色背景 */
  border: 1px solid rgba(0, 122, 255, 0.3); /* 边框 */
  border-radius: 10px; /* 圆角 */
  color: #ffffff; /* 白色文字 */
  padding: 0.75rem 1.5rem; /* 内边距（上下0.75rem，左右1.5rem） */
  font-size: 0.95rem; /* 字号（15.2px） */
  font-weight: 600; /* 半粗体 */
  cursor: pointer; /* 可点击 */
  transition: all 0.2s ease; /* 过渡动画 */
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2); /* 阴影 */
}

/**
 * 通用按钮悬停效果（.btn:hover）：
 *
 * 交互效果：
 *   - 背景变亮（rgba(0, 122, 255, 0.9)）
 *   - 边框变深（rgba(0, 122, 255, 0.5)）
 *   - 向上位移1px（transform: translateY(-1px)）
 *   - 阴影增强（0 4px 12px）
 */
.btn:hover {
  background: rgba(0, 122, 255, 0.9); /* 背景变亮 */
  border-color: rgba(0, 122, 255, 0.5); /* 边框变深 */
  transform: translateY(-1px); /* 向上位移1px */
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); /* 阴影增强 */
}

/**
 * 通用按钮按下效果（.btn:active）：
 *
 * 交互效果：
 *   - 取消位移（transform: translateY(0)）
 *   - 背景变暗（rgba(0, 122, 255, 0.7)）
 */
.btn:active {
  transform: translateY(0); /* 取消位移 */
  background: rgba(0, 122, 255, 0.7); /* 背景变暗 */
}

/**
 * 次要按钮（.btn-secondary）：
 *
 * 功能说明：
 *   次要操作按钮样式（如"取消"、"关闭"按钮）。
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.12) → rgba(255, 255, 255, 0.08)）
 *   - 边框：1px solid rgba(255, 255, 255, 0.2)
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *   - 阴影：0 4px 12px rgba(0, 0, 0, 0.1)
 *   - 毛玻璃效果：backdrop-filter: blur(10px)
 *
 * 交互效果：
 *   - 悬停时背景变亮、边框变深、文字变白（由:hover规则控制）
 */
.btn-secondary {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.08)
  ); /* 渐变背景 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框 */
  color: #f5f5f7; /* 浅灰白色文字 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
}

/**
 * 次要按钮悬停效果（.btn-secondary:hover）：
 *
 * 交互效果：
 *   - 背景变亮（rgba(255, 255, 255, 0.15) → rgba(255, 255, 255, 0.1)）
 *   - 边框变深（rgba(255, 255, 255, 0.25)）
 *   - 文字变白（#ffffff）
 */
.btn-secondary:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.1)
  ); /* 背景变亮 */
  border-color: rgba(255, 255, 255, 0.25); /* 边框变深 */
  color: #ffffff; /* 文字变白 */
}

/* ========================================================================
   状态信息样式 (Status Information)
   ======================================================================== */

/**
 * 状态信息容器（.status-info）：
 *
 * 功能说明：
 *   显示系统状态信息的容器（如配置信息、任务状态等）。
 *
 * 布局说明：
 *   - 内边距：1.75rem（统一内边距）
 *   - 圆角：16px（大圆角）
 *   - 相对定位（position: relative），用于伪元素
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.06) → rgba(255, 255, 255, 0.02)）
 *   - 边框：1px solid rgba(255, 255, 255, 0.12)
 *   - 毛玻璃效果：backdrop-filter: blur(15px)
 *   - 双重阴影：外阴影（0 6px 20px）+ 内阴影（inset 0 1px 0）
 */
.status-info {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02)
  ); /* 渐变背景 */
  border: 1px solid rgba(255, 255, 255, 0.12); /* 边框 */
  border-radius: 16px; /* 大圆角 */
  padding: 1.75rem; /* 内边距 */
  position: relative; /* 相对定位（用于伪元素） */
  backdrop-filter: blur(15px); /* 毛玻璃效果 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08); /* 双重阴影 */
}

/**
 * 状态信息顶部装饰线（.status-info::before）：
 *
 * 功能说明：
 *   在状态信息容器顶部添加一条渐变装饰线。
 *
 * 视觉效果：
 *   - 高度1px，横跨整个容器宽度
 *   - 渐变色：transparent → rgba(255, 255, 255, 0.2) → transparent
 *   - 圆角：16px 16px 0 0（顶部圆角，与容器圆角匹配）
 */
.status-info::before {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  right: 0; /* 右边对齐 */
  height: 1px; /* 线高1px */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  ); /* 渐变装饰线 */
  border-radius: 16px 16px 0 0; /* 顶部圆角 */
}

/**
 * 状态行容器（.status-row）：
 *
 * 功能说明：
 *   状态信息中的单行显示容器（如"当前任务：xxx"）。
 *
 * 布局说明：
 *   - 使用flex布局，两端对齐（space-between）
 *   - 外边距底部：1rem（行与行之间的间距）
 *   - 内边距：0.75rem 1rem（上下0.75rem，左右1rem）
 *   - 圆角：10px
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.02) → rgba(255, 255, 255, 0.005)）
 *   - 边框：1px solid rgba(255, 255, 255, 0.05)
 *
 * 交互效果：
 *   - 过渡动画：all 0.2s ease
 */
.status-row {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 1rem; /* 外边距底部 */
  padding: 0.75rem 1rem; /* 内边距（上下0.75rem，左右1rem） */
  border-radius: 10px; /* 圆角 */
  transition: all 0.2s ease; /* 过渡动画 */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.005)
  ); /* 渐变背景 */
  border: 1px solid rgba(255, 255, 255, 0.05); /* 边框 */
}

/* ========================================================================
   版本信息样式（设置页面底部）
   ========================================================================

   功能说明：
     显示软件版本号和 GitHub 链接，位于设置面板底部。

   布局：
     - Flexbox 垂直布局，元素居中对齐
     - 与上方内容通过分隔线分开

   颜色方案：
     - 深色模式：半透明白色文字
     - 浅色模式：半透明深色文字
   ======================================================================== */

.version-info {
  margin-top: 2rem; /* 上边距（与快捷键区域分隔） */
  padding-top: 1.5rem; /* 上内边距 */
  border-top: 1px solid rgba(255, 255, 255, 0.08); /* 分隔线 */
  display: flex; /* Flexbox 布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 子元素水平居中 */
  justify-content: center; /* 子元素垂直居中 */
  gap: 0.75rem; /* 子元素间距 */
  text-align: center; /* 文本居中 */
  width: 100%; /* 占满容器宽度 */
}

/* 版本文本容器 */
.version-text {
  display: flex; /* Flexbox 布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  gap: 0.25rem; /* 名称和版本号间距 */
  text-align: center;
}

/* 项目名称 */
.version-name {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5); /* 半透明白色 */
  font-weight: 500;
}

/* 版本号 */
.version-number {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4); /* 更浅的半透明白色 */
  font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace; /* 等宽字体 */
}

/* GitHub 链接按钮 */
.github-link {
  display: inline-flex; /* 内联 Flexbox */
  align-items: center; /* 垂直居中 */
  gap: 0.5rem; /* 图标和文字间距 */
  padding: 0.5rem 1rem; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  background: rgba(255, 255, 255, 0.05); /* 半透明背景 */
  color: rgba(255, 255, 255, 0.6); /* 半透明文字 */
  text-decoration: none; /* 移除下划线 */
  font-size: 0.85rem;
  transition: all 0.2s ease; /* 过渡动画 */
  border: 1px solid rgba(255, 255, 255, 0.08); /* 边框 */
}

.github-link:hover {
  background: rgba(255, 255, 255, 0.1); /* 悬停：加深背景 */
  color: rgba(255, 255, 255, 0.9); /* 悬停：提亮文字 */
  border-color: rgba(255, 255, 255, 0.15);
  text-decoration: none;
}

.github-link:focus,
.github-link:active {
  text-decoration: none;
  outline: none;
}

/* GitHub 图标 */
.github-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0; /* 防止图标缩小 */
}

/**
 * 状态行最后一项（.status-row:last-child）：
 *
 * 功能说明：
 *   移除最后一个状态行的底部外边距，避免多余空白。
 */
.status-row:last-child {
  margin-bottom: 0; /* 移除底部外边距 */
}

/**
 * 状态行标签（.status-row span:first-child）：
 *
 * 功能说明：
 *   状态行左侧的标签文字（如"当前任务："）。
 *
 * 排版设计：
 *   - 颜色：rgba(245, 245, 247, 0.85)（半透明浅灰白色）
 *   - 字号：0.95rem（15.2px）
 *   - 字重：600（半粗体）
 *   - 字间距：-0.01em（紧凑）
 */
.status-row span:first-child {
  color: rgba(245, 245, 247, 0.85); /* 半透明浅灰白色 */
  font-size: 0.95rem; /* 字号（15.2px） */
  font-weight: 600; /* 半粗体 */
  letter-spacing: -0.01em; /* 紧凑字间距 */
}

/**
 * 状态行值（.status-row span:last-child）：
 *
 * 功能说明：
 *   状态行右侧的值文字（如"123456"）。
 *
 * 布局说明：
 *   - 内边距：0.4rem 0.75rem（上下0.4rem，左右0.75rem）
 *   - 圆角：8px
 *
 * 排版设计：
 *   - 颜色：#f5f5f7（浅灰白色）
 *   - 字号：0.9rem（14.4px）
 *   - 字重：600（半粗体）
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.08) → rgba(255, 255, 255, 0.04)）
 *   - 边框：1px solid rgba(255, 255, 255, 0.1)
 *   - 毛玻璃效果：backdrop-filter: blur(5px)
 */
.status-row span:last-child {
  color: #f5f5f7; /* 浅灰白色 */
  font-size: 0.9rem; /* 字号（14.4px） */
  font-weight: 600; /* 半粗体 */
  padding: 0.4rem 0.75rem; /* 内边距（上下0.4rem，左右0.75rem） */
  border-radius: 8px; /* 圆角 */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04)
  ); /* 渐变背景 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 边框 */
  backdrop-filter: blur(5px); /* 毛玻璃效果 */
}

/* ========================================================================
   反馈表单和内容容器 (Feedback Form & Content Container)
   ======================================================================== */

/**
 * 内容容器（.content）：
 *
 * 功能说明：
 *   主要内容区域的容器（包含反馈表单、Markdown内容等）。
 *
 * 布局说明：
 *   - 内边距：1.75rem（统一内边距）
 */
.content {
  padding: 1.75rem; /* 内边距 */
}

/**
 * 反馈组容器（.feedback-group）：
 *
 * 功能说明：
 *   包含反馈选项和文本区域的组容器。
 *
 * 视觉设计：
 *   - 背景：transparent（透明）
 *   - 边框：none（无边框）
 *   - 内边距：0（无内边距）
 *   - 外边距：0（无外边距）
 *
 * 注意事项：
 *   此容器设计为透明且无边距，不干扰子元素样式。
 */
.feedback-group {
  background: transparent; /* 透明背景 */
  border: none; /* 无边框 */
  padding: 0; /* 无内边距 */
  margin: 0; /* 无外边距 */
}

/**
 * 头部信息容器（.header-info-container）：
 *
 * 功能说明：
 *   原本用于显示任务ID和倒计时的头部容器，现已禁用。
 *
 * 显示逻辑：
 *   display: none（隐藏）
 *
 * 原因：
 *   任务ID和倒计时现在在标签页中显示，此容器不再使用。
 */
.header-info-container {
  display: none; /* 隐藏（task_id和倒计时只在标签显示） */
}

/* ========================================================================
   任务ID显示样式 (Task ID Display)
   ======================================================================== */

/**
 * 任务ID容器（.task-id-container）：
 *
 * 功能说明：
 *   显示任务ID的容器（如"任务ID: 123456"）。
 *
 * 布局说明：
 *   - 使用flex布局，横向排列标签和ID
 *   - gap: 0.5rem，元素间距
 *   - 内边距：0.75rem 1.25rem（上下0.75rem，左右1.25rem）
 *   - 圆角：8px
 *   - flex: 1（占据剩余空间）
 *
 * 视觉设计：
 *   - 背景：rgba(100, 181, 246, 0.15)（浅蓝色半透明）
 *   - 左边框：3px solid rgba(100, 181, 246, 0.8)（蓝色强调边框）
 *   - 字号：0.9rem（14.4px）
 */
.task-id-container {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 0.5rem; /* 元素间距（8px） */
  padding: 0.75rem 1.25rem; /* 内边距（上下0.75rem，左右1.25rem） */
  background: rgba(100, 181, 246, 0.15); /* 浅蓝色半透明背景 */
  border-left: 3px solid rgba(100, 181, 246, 0.8); /* 蓝色左边框（强调） */
  border-radius: 8px; /* 圆角 */
  font-size: 0.9rem; /* 字号（14.4px） */
  flex: 1; /* 占据剩余空间 */
}

/**
 * 任务ID标签（.task-id-label）：
 *
 * 功能说明：
 *   任务ID容器中的标签文字（如"任务ID:"）。
 *
 * 排版设计：
 *   - 字重：600（半粗体）
 *   - 颜色：rgba(100, 181, 246, 1)（蓝色）
 */
.task-id-label {
  font-weight: 600; /* 半粗体 */
  color: rgba(100, 181, 246, 1); /* 蓝色 */
}

/**
 * 任务ID文字（.task-id-text）：
 *
 * 功能说明：
 *   显示实际的任务ID数字（如"123456"）。
 *
 * 排版设计：
 *   - 颜色：rgba(180, 220, 255, 0.95)（浅蓝色）
 *   - 字体：var(--font-mono)（等宽字体）
 *   - 字号：0.85rem（13.6px）
 */
.task-id-text {
  color: rgba(180, 220, 255, 0.95); /* 浅蓝色 */
  font-family: var(--font-mono); /* 等宽字体 */
  font-size: 0.85rem; /* 字号（13.6px） */
}

/**
 * 任务ID容器隐藏状态（.task-id-container.hidden）：
 *
 * 功能说明：
 *   通过JavaScript添加.hidden类来隐藏任务ID容器。
 */
.task-id-container.hidden {
  display: none; /* 隐藏 */
}

/* ========================================================================
   倒计时显示样式 (Countdown Display)
   ======================================================================== */

/**
 * 倒计时容器（.countdown-container）：
 *
 * 功能说明：
 *   显示倒计时信息的容器（如"⏰ 05:00"）。
 *
 * 布局说明：
 *   - 使用flex布局，横向排列图标和倒计时数字
 *   - gap: 0.5rem，元素间距
 *   - 内边距：0.75rem 1.25rem（上下0.75rem，左右1.25rem）
 *   - 圆角：8px
 *   - white-space: nowrap（不换行）
 *
 * 视觉设计：
 *   - 背景：rgba(255, 107, 107, 0.15)（浅红色半透明）
 *   - 左边框：3px solid rgba(255, 107, 107, 0.8)（红色强调边框）
 *   - 字号：0.9rem（14.4px）
 */
.countdown-container {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 0.5rem; /* 元素间距（8px） */
  padding: 0.75rem 1.25rem; /* 内边距（上下0.75rem，左右1.25rem） */
  background: rgba(255, 107, 107, 0.15); /* 浅红色半透明背景 */
  border-left: 3px solid rgba(255, 107, 107, 0.8); /* 红色左边框（强调） */
  border-radius: 8px; /* 圆角 */
  font-size: 0.9rem; /* 字号（14.4px） */
  white-space: nowrap; /* 不换行 */
}

/**
 * 倒计时标签（.countdown-label）：
 *
 * 功能说明：
 *   倒计时容器中的图标或标签（如"⏰"）。
 *
 * 排版设计：
 *   - 字号：1.1rem（17.6px，较大）
 */
.countdown-label {
  font-size: 1.1rem; /* 字号（17.6px） */
}

/**
 * 倒计时文字（.countdown-text）：
 *
 * 功能说明：
 *   显示实际的倒计时时间（如"05:00"）。
 *
 * 排版设计：
 *   - 颜色：rgba(255, 150, 150, 0.95)（浅红色）
 *   - 字体：var(--font-mono)（等宽字体）
 *   - 字号：0.85rem（13.6px）
 *   - 字重：600（半粗体）
 */
.countdown-text {
  color: rgba(255, 150, 150, 0.95); /* 浅红色 */
  font-family: var(--font-mono); /* 等宽字体 */
  font-size: 0.85rem; /* 字号（13.6px） */
  font-weight: 600; /* 半粗体 */
}

/**
 * 倒计时容器隐藏状态（.countdown-container.hidden）：
 *
 * 功能说明：
 *   通过JavaScript添加.hidden类来隐藏倒计时容器。
 */
.countdown-container.hidden {
  display: none; /* 隐藏 */
}

/* ========================================================================
   问题描述和选项容器 (Description & Options Container)
   ======================================================================== */

/**
 * 问题描述容器（.description）：
 *
 * 功能说明：
 *   显示用户反馈问题描述的容器（Markdown渲染后的内容）。
 *
 * 布局说明：
 *   - 内边距：1.5rem 1.75rem（上下1.5rem，左右1.75rem）
 *   - 外边距底部：1.5rem
 *   - 圆角：24px（大圆角）
 *   - 相对定位（position: relative），用于伪元素
 *
 * 视觉设计：
 *   - 背景：线性渐变（蓝色到紫色系）
 *     - 0%: rgba(0, 122, 255, 0.08)
 *     - 50%: rgba(88, 86, 214, 0.06)
 *     - 100%: rgba(175, 82, 222, 0.05)
 *   - 边框：1px solid rgba(0, 122, 255, 0.25)
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *   - 阴影：0 4px 8px rgba(0, 122, 255, 0.1)
 *
 * 排版设计：
 *   - 字号：1rem（16px）
 *   - 行高：1.6
 *   - 字间距：-0.022em（紧凑）
 */
.description {
  font-size: 1rem; /* 字号（16px） */
  margin-bottom: 1.5rem; /* 外边距底部 */
  padding: 1.5rem 1.75rem; /* 内边距（上下1.5rem，左右1.75rem） */
  background: linear-gradient(
    135deg,
    rgba(0, 122, 255, 0.08) 0%,
    rgba(88, 86, 214, 0.06) 50%,
    rgba(175, 82, 222, 0.05) 100%
  ); /* 蓝色到紫色渐变背景 */
  border: 1px solid rgba(0, 122, 255, 0.25); /* 边框 */
  border-radius: 24px; /* 大圆角 */
  color: #f5f5f7; /* 浅灰白色文字 */
  line-height: 1.6; /* 行高 */
  letter-spacing: -0.022em; /* 紧凑字间距 */
  position: relative; /* 相对定位（用于伪元素） */
  box-shadow: 0 4px 8px rgba(0, 122, 255, 0.1); /* 阴影 */
}

/**
 * 问题描述顶部装饰线（.description::before）：
 *
 * 功能说明：
 *   在描述容器顶部添加一条渐变装饰线。
 *
 * 视觉效果：
 *   - 高度1px，横跨整个容器宽度
 *   - 渐变色：transparent → rgba(255, 255, 255, 0.2) → transparent
 *   - 圆角：24px 24px 0 0（顶部圆角，与容器圆角匹配）
 */
.description::before {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  right: 0; /* 右边对齐 */
  height: 1px; /* 线高1px */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  ); /* 渐变装饰线 */
  border-radius: 24px 24px 0 0; /* 顶部圆角 */
}

/**
 * 选项容器（.options-container）：
 *
 * 功能说明：
 *   包含多个选项复选框的容器。
 *
 * 布局说明：
 *   - 使用flex布局，垂直排列选项
 *   - gap: 1rem，选项间距
 *   - 外边距底部：1.25rem
 */
.options-container {
  margin-bottom: 1.25rem; /* 外边距底部 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 1rem; /* 选项间距（16px） */
}

/**
 * 选项项（.option-item）：
 *
 * 功能说明：
 *   单个选项复选框的容器。
 *
 * 布局说明：
 *   - 使用flex布局，横向排列复选框和标签
 *   - 内边距：1.25rem 1.5rem（上下1.25rem，左右1.5rem）
 *   - 外边距底部：0.75rem
 *   - 圆角：20px（大圆角）
 *   - 相对定位（position: relative），用于伪元素
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.06) → rgba(255, 255, 255, 0.03) → rgba(255, 255, 255, 0.05)）
 *   - 边框：1px solid rgba(255, 255, 255, 0.12)
 *   - 阴影：0 2px 4px rgba(0, 0, 0, 0.08)
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 *   - 悬停时背景变亮、边框变蓝、阴影增强（由:hover规则控制）
 */
.option-item {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  padding: 1.25rem 1.5rem; /* 内边距（上下1.25rem，左右1.5rem） */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.05) 100%
  ); /* 渐变背景 */
  border: 1px solid rgba(255, 255, 255, 0.12); /* 边框 */
  border-radius: 20px; /* 大圆角 */
  cursor: pointer; /* 可点击 */
  position: relative; /* 相对定位（用于伪元素） */
  margin-bottom: 0.75rem; /* 外边距底部 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* 阴影 */
}

/**
 * 选项项顶部装饰线（.option-item::before）：
 *
 * 功能说明：
 *   在选项项顶部添加一条渐变装饰线。
 *
 * 视觉效果：
 *   - 高度1px，横跨整个容器宽度
 *   - 渐变色：transparent → rgba(255, 255, 255, 0.15) → transparent
 *   - 圆角：20px 20px 0 0（顶部圆角，与容器圆角匹配）
 */
.option-item::before {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  right: 0; /* 右边对齐 */
  height: 1px; /* 线高1px */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  ); /* 渐变装饰线 */
  border-radius: 20px 20px 0 0; /* 顶部圆角 */
}

/**
 * 选项项悬停效果（.option-item:hover）：
 *
 * 交互效果：
 *   - 背景变亮（rgba(255, 255, 255, 0.1) → rgba(255, 255, 255, 0.06) → rgba(255, 255, 255, 0.08)）
 *   - 边框变蓝（rgba(0, 122, 255, 0.4)）
 *   - 阴影增强（0 4px 8px）
 */
.option-item:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.08) 100%
  ); /* 背景变亮 */
  border-color: rgba(0, 122, 255, 0.4); /* 边框变蓝 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); /* 阴影增强 */
}

/**
 * 选项项浅色主题（[data-theme='light'] .option-item）：
 *
 * 功能说明：
 *   在浅色主题下使用更适合浅色背景的样式。
 *
 * 视觉设计：
 *   - 背景使用半透明深色渐变
 *   - 边框使用更深的颜色以提高可见度
 *   - 阴影使用更明显的效果
 */
[data-theme='light'] .option-item {
  background: linear-gradient(
    135deg,
    rgba(20, 20, 19, 0.03) 0%,
    rgba(20, 20, 19, 0.015) 50%,
    rgba(20, 20, 19, 0.025) 100%
  ); /* 使用深色半透明（#141413） */
  border: 1px solid rgba(176, 174, 165, 0.25); /* Mid Gray 边框 */
  box-shadow: 0 2px 4px rgba(20, 20, 19, 0.06); /* 更轻的阴影 */
}

[data-theme='light'] .option-item::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(176, 174, 165, 0.15),
    transparent
  ); /* Mid Gray 装饰线 */
}

[data-theme='light'] .option-item:hover {
  background: linear-gradient(
    135deg,
    rgba(20, 20, 19, 0.05) 0%,
    rgba(20, 20, 19, 0.03) 50%,
    rgba(20, 20, 19, 0.04) 100%
  ); /* 背景变深 */
  border-color: rgba(217, 119, 87, 0.4); /* Orange 边框 */
  box-shadow: 0 4px 8px rgba(20, 20, 19, 0.1); /* 增强阴影 */
}

[data-theme='light'] .option-item input[type='checkbox'] {
  accent-color: #d97757; /* Orange - 与品牌色一致 */
}

/**
 * 选项项复选框（.option-item input[type='checkbox']）：
 *
 * 功能说明：
 *   选项项中的复选框。
 *
 * 布局说明：
 *   - 固定尺寸：18x18px
 *   - 右外边距：1rem（与标签分离）
 *
 * 视觉设计：
 *   - accent-color: #007aff（现代浏览器复选框主题色）
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 */
.option-item input[type='checkbox'] {
  margin-right: 1rem; /* 右外边距（与标签分离） */
  width: 18px; /* 固定宽度 */
  height: 18px; /* 固定高度 */
  accent-color: #5a8dbf; /* 复选框主题色（深色模式：深蓝色，确保勾勾为白色） */
  cursor: pointer; /* 可点击 */
}

/**
 * 选项项标签（.option-item label）：
 *
 * 功能说明：
 *   选项项中的标签文字。
 *
 * 布局说明：
 *   - flex: 1（占据剩余空间）
 *
 * 排版设计：
 *   - 字号：1rem（16px）
 *   - 字重：400（正常）
 *   - 字间距：-0.022em（紧凑）
 *   - 行高：1.5
 *   - 颜色：#f5f5f7（浅灰白色）
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 */
.option-item label {
  font-size: 1rem; /* 字号（16px） */
  cursor: pointer; /* 可点击 */
  color: #f5f5f7; /* 浅灰白色 */
  flex: 1; /* 占据剩余空间 */
  font-weight: 400; /* 正常字重 */
  letter-spacing: -0.022em; /* 紧凑字间距 */
  line-height: 1.5; /* 行高 */
}

/**
 * 分隔符（.separator）：
 *
 * 功能说明：
 *   用于分隔不同区域的水平线。
 *
 * 布局说明：
 *   - 高度：0.5px（细线）
 *   - 上下外边距：1.25rem
 *
 * 视觉设计：
 *   - 背景：线性渐变（transparent → rgba(255, 255, 255, 0.1) → transparent）
 */
.separator {
  height: 0.5px; /* 高度（细线） */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  ); /* 渐变背景 */
  margin: 1.25rem 0; /* 上下外边距 */
}

/* ========================================================================
   反馈文本区域 (Feedback Textarea)
   ======================================================================== */

/**
 * 文本区域容器（.textarea-container）：
 *
 * 功能说明：
 *   包含反馈文本区域的容器。
 *
 * 布局说明：
 *   - 相对定位（position: relative），用于伪元素或其他定位
 *   - 外边距底部：1rem
 */
.textarea-container {
  position: relative; /* 相对定位 */
  margin-bottom: 1rem; /* 外边距底部 */
}

/**
 * 反馈文本区域（.feedback-textarea）：
 *
 * 功能说明：
 *   用户输入反馈文字的文本区域（HTML <textarea>）。
 *
 * 布局说明：
 *   - 全宽（width: 100%）
 *   - 最小高度：180px
 *   - 内边距：1.5rem 1.75rem（上下1.5rem，左右1.75rem）
 *   - 外边距底部：1rem
 *   - 圆角：24px（大圆角）
 *   - resize: vertical（允许垂直调整大小）
 *   - 相对定位（position: relative），用于伪元素
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.06) → rgba(255, 255, 255, 0.03) → rgba(255, 255, 255, 0.05)）
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *   - 边框：1px solid rgba(255, 255, 255, 0.12)
 *   - 阴影：0 4px 8px rgba(0, 0, 0, 0.1)
 *
 * 排版设计：
 *   - 字号：1rem（16px）
 *   - 字体：var(--font-mono) 等宽字体栈
 *   - 行高：1.6
 *   - 字间距：-0.022em（紧凑）
 *
 * 交互效果：
 *   - 聚焦时边框变蓝、背景变亮、添加蓝色外轮廓（由:focus规则控制）
 */
.feedback-textarea {
  width: 100%; /* 全宽 */
  min-height: 180px; /* 最小高度 */
  padding: 1.5rem 1.75rem; /* 内边距（上下1.5rem，左右1.75rem） */
  font-size: 1rem; /* 字号（16px） */
  font-family: var(--font-mono); /* 等宽字体栈 */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.05) 100%
  ); /* 渐变背景 */
  color: #f5f5f7; /* 浅灰白色文字 */
  border: 1px solid rgba(255, 255, 255, 0.12); /* 边框 */
  border-radius: 24px; /* 大圆角 */
  resize: vertical; /* 允许垂直调整大小 */
  margin-bottom: 1rem; /* 外边距底部 */
  line-height: 1.6; /* 行高 */
  letter-spacing: -0.022em; /* 紧凑字间距 */
  position: relative; /* 相对定位 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
}

/**
 * 反馈文本区域聚焦状态（.feedback-textarea:focus）：
 *
 * 交互效果：
 *   - 移除默认outline（outline: none）
 *   - 边框变蓝（border-color: rgba(0, 122, 255, 0.5)）
 *   - 添加蓝色外轮廓（box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3)）
 *   - 背景变亮（background: rgba(255, 255, 255, 0.08)）
 */
.feedback-textarea:focus {
  outline: none; /* 移除默认outline */
  border-color: rgba(0, 122, 255, 0.5); /* 边框变蓝 */
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3); /* 蓝色外轮廓 */
  background: rgba(255, 255, 255, 0.08); /* 背景变亮 */
}

/**
 * 反馈文本区域占位符（.feedback-textarea::placeholder）：
 *
 * 功能说明：
 *   文本区域的占位符文字样式（如“请输入反馈…”）。
 *
 * 视觉设计：
 *   - 颜色：rgba(245, 245, 247, 0.6)（半透明浅灰白色）
 *   - 字重：400（正常）
 */
.feedback-textarea::placeholder {
  color: rgba(245, 245, 247, 0.6); /* 半透明浅灰白色 */
  font-weight: 400; /* 正常字重 */
}

/* ========================================================================
   反馈按钮容器 (Feedback Button Container)
   ======================================================================== */

/**
 * 按钮容器（.button-container）：
 *
 * 功能说明：
 *   包含反馈提交按钮和关闭按钮的容器。
 *
 * 布局说明：
 *   - 使用flex布局，横向排列按钮
 *   - gap: 0.625rem，按钮间距
 *   - justify-content: flex-end（右对齐）
 *   - 上外边距：1.25rem
 */
.button-container {
  display: flex; /* 使用flex布局 */
  gap: 0.625rem; /* 按钮间距（10px） */
  justify-content: flex-end; /* 右对齐 */
  margin-top: 1.25rem; /* 上外边距 */
}

/* ========================================================================
   反馈表单按钮样式 (Feedback Form Buttons)
   ======================================================================== */

/**
 * 反馈表单按钮基础样式（.btn，在.button-container内）：
 *
 * 功能说明：
 *   反馈表单中的按钮基础样式（提交按钮和关闭按钮）。
 *
 * 布局说明：
 *   - 使用flex布局，横向排列图标和文字
 *   - gap: 0.5rem，元素间距
 *   - 内边距：1rem 1.75rem（上下1rem，左右1.75rem）
 *   - 最小宽度：130px
 *   - 圆角：20px（大圆角）
 *   - 相对定位（position: relative），用于伪元素
 *   - 隐藏溢出（overflow: hidden），防止伪元素超出边界
 *
 * 视觉设计：
 *   - 无边框（border: none，由子类定义）
 *
 * 排版设计：
 *   - 字号：0.9375rem（15px）
 *   - 字重：600（半粗体）
 *   - 字体：inherit（继承父元素字体）
 *   - 字间距：-0.022em（紧凑）
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 *   - 悬停时::after伪元素变为不透明，产生发光效果（由子规则控制）
 */
.btn {
  padding: 1rem 1.75rem; /* 内边距（上下1rem，左右1.75rem） */
  font-size: 0.9375rem; /* 字号（15px） */
  font-weight: 600; /* 半粗体 */
  font-family: inherit; /* 继承字体 */
  border: none; /* 无边框（由子类定义） */
  border-radius: 20px; /* 大圆角 */
  cursor: pointer; /* 可点击 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 0.5rem; /* 元素间距（8px） */
  min-width: 130px; /* 最小宽度 */
  justify-content: center; /* 水平居中 */
  letter-spacing: -0.022em; /* 紧凑字间距 */
  position: relative; /* 相对定位（用于伪元素） */
  overflow: hidden; /* 隐藏溢出 */
}

/**
 * 反馈表单按钮顶部装饰线（.btn::before）：
 *
 * 功能说明：
 *   在按钮顶部添加一条渐变装饰线。
 *
 * 视觉效果：
 *   - 高度1px，横跨整个按钮宽度
 *   - 渐变色：transparent → rgba(255, 255, 255, 0.3) → transparent
 *   - 圆角：20px 20px 0 0（顶部圆角，与按钮圆角匹配）
 */
.btn::before {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  right: 0; /* 右边对齐 */
  height: 1px; /* 线高1px */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  ); /* 渐变装饰线 */
  border-radius: 20px 20px 0 0; /* 顶部圆角 */
}

/**
 * 反馈表单按钮发光效果层（.btn::after）：
 *
 * 功能说明：
 *   在按钮上方添加一个发光效果层，悬停时显示。
 *
 * 布局说明：
 *   - 绝对定位，填满整个按钮（top/left/right/bottom: 0）
 *   - 圆角：20px（与按钮圆角匹配）
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.1) → transparent）
 *   - 默认透明度：0（不可见）
 *   - 过渡动画：opacity 0.3s ease
 *
 * 交互效果：
 *   - 悬停时透明度变为1（由:hover规则控制）
 */
.btn::after {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  right: 0; /* 右边对齐 */
  bottom: 0; /* 底部对齐 */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  ); /* 渐变发光效果 */
  border-radius: 20px; /* 圆角 */
  opacity: 0; /* 默认透明（不可见） */
  transition: opacity 0.3s ease; /* 过渡动画 */
}

/**
 * 反馈表单按钮悬停时发光效果（.btn:hover::after）：
 *
 * 交互效果：
 *   悬停时发光效果层变为完全不透明（opacity: 1）。
 */
.btn:hover::after {
  opacity: 1; /* 完全不透明 */
}

/**
 * 次要按钮样式（.btn-secondary，在反馈表单中）：
 *
 * 功能说明：
 *   反馈表单中的次要按钮（如"关闭"按钮）。
 *
 * 视觉设计：
 *   - 背景：rgba(255, 255, 255, 0.1)（半透明白色）
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *   - 边框：1px solid rgba(255, 255, 255, 0.15)
 *   - 阴影：0 4px 8px rgba(0, 0, 0, 0.1)
 *
 * 交互效果：
 *   - 悬停时背景变亮、边框变深、阴影增强（由:hover规则控制）
 */
.btn-secondary {
  background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
  color: #f5f5f7; /* 浅灰白色文字 */
  border: 1px solid rgba(255, 255, 255, 0.15); /* 边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
}

/**
 * 次要按钮悬停效果（.btn-secondary:hover）：
 *
 * 交互效果：
 *   - 背景变亮（rgba(255, 255, 255, 0.15)）
 *   - 边框变深（rgba(255, 255, 255, 0.25)）
 *   - 阴影增强（0 6px 12px）
 */
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15); /* 背景变亮 */
  border-color: rgba(255, 255, 255, 0.25); /* 边框变深 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 阴影增强 */
}

/**
 * 主要按钮样式（.btn-primary，在反馈表单中）：
 *
 * 功能说明：
 *   反馈表单中的主要按钮（如"提交"按钮）。
 *
 * 视觉设计：
 *   - 背景：#007aff（iOS蓝色）
 *   - 文字颜色：white（白色）
 *   - 边框：1px solid rgba(0, 122, 255, 0.3)
 *   - 阴影：0 4px 8px rgba(0, 122, 255, 0.2)
 *
 * 交互效果：
 *   - 悬停时背景变深、阴影增强（由:hover规则控制）
 */
.btn-primary {
  background: #007aff; /* iOS蓝色背景 */
  color: white; /* 白色文字 */
  border: 1px solid rgba(0, 122, 255, 0.3); /* 边框 */
  box-shadow: 0 4px 8px rgba(0, 122, 255, 0.2); /* 阴影 */
}

/**
 * 主要按钮悬停效果（.btn-primary:hover）：
 *
 * 交互效果：
 *   - 背景变深（#0056cc）
 *   - 阴影增强（0 6px 12px）
 */
.btn-primary:hover {
  background: #0056cc; /* 背景变深 */
  box-shadow: 0 6px 12px rgba(0, 122, 255, 0.3); /* 阴影增强 */
}

/**
 * 按钮禁用状态（.btn:disabled）：
 *
 * 功能说明：
 *   按钮被禁用时的样式。
 *
 * 视觉设计：
 *   - 背景：rgba(255, 255, 255, 0.03)（极浅色）
 *   - 文字颜色：rgba(245, 245, 247, 0.3)（半透明浅灰白色）
 *   - 边框颜色：rgba(255, 255, 255, 0.05)（极浅色）
 *   - 移除阴影（box-shadow: none）
 *   - 移除变形（transform: none）
 *
 * 交互效果：
 *   - cursor: not-allowed（禁止点击光标）
 */
.btn:disabled {
  background: rgba(255, 255, 255, 0.03); /* 极浅色背景 */
  color: rgba(245, 245, 247, 0.3); /* 半透明浅灰白色文字 */
  cursor: not-allowed; /* 禁止点击光标 */
  transform: none; /* 移除变形 */
  box-shadow: none; /* 移除阴影 */
  border-color: rgba(255, 255, 255, 0.05); /* 极浅色边框 */
}

/* ========================================================================
   状态消息样式 (Status Message)
   ======================================================================== */

/**
 * 状态消息容器（.status-message）：
 *
 * 功能说明：
 *   显示反馈提交状态的消息容器（如"提交成功"、"提交失败"）。
 *
 * 布局说明：
 *   - 上外边距：1rem
 *   - 内边距：0.875rem 1.125rem（上下0.875rem，左右1.125rem）
 *   - 圆角：12px
 *   - 文字居中（text-align: center）
 *   - 默认隐藏（display: none，通过JavaScript显示）
 *   - 相对定位（position: relative），用于伪元素
 *
 * 排版设计：
 *   - 字号：0.9375rem（15px）
 *   - 字重：500（中等）
 *   - 字间距：-0.022em（紧凑）
 */
.status-message {
  margin-top: 1rem; /* 上外边距 */
  padding: 0.875rem 1.125rem; /* 内边距（上下0.875rem，左右1.125rem） */
  border-radius: 12px; /* 圆角 */
  text-align: center; /* 文字居中 */
  display: none; /* 默认隐藏 */
  font-size: 0.9375rem; /* 字号（15px） */
  font-weight: 500; /* 中等字重 */
  letter-spacing: -0.022em; /* 紧凑字间距 */
  position: relative; /* 相对定位（用于伪元素） */
}

/**
 * 状态消息顶部装饰线（.status-message::before）：
 *
 * 功能说明：
 *   在状态消息顶部添加一条极细的渐变装饰线。
 *
 * 视觉效果：
 *   - 高度0.5px，横跨整个容器宽度
 *   - 渐变色：transparent → rgba(255, 255, 255, 0.1) → transparent
 *   - 圆角：12px 12px 0 0（顶部圆角，与容器圆角匹配）
 */
.status-message::before {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  right: 0; /* 右边对齐 */
  height: 0.5px; /* 极细线高 */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  ); /* 渐变装饰线 */
  border-radius: 12px 12px 0 0; /* 顶部圆角 */
}

/**
 * 成功状态消息（.status-success）：
 *
 * 功能说明：
 *   显示成功状态的消息（如"提交成功"）。
 *
 * 视觉设计：
 *   - 背景：rgba(52, 199, 89, 0.08)（半透明绿色，比.status-message.success更淡）
 *   - 边框：0.5px solid rgba(52, 199, 89, 0.2)（极细半透明绿色边框）
 *   - 文字颜色：#34c759（iOS绿色）
 */
.status-success {
  background: rgba(52, 199, 89, 0.08); /* 半透明绿色背景 */
  color: #34c759; /* iOS绿色文字 */
  border: 0.5px solid rgba(52, 199, 89, 0.2); /* 极细半透明绿色边框 */
}

/**
 * 错误状态消息（.status-error）：
 *
 * 功能说明：
 *   显示错误状态的消息（如"提交失败"）。
 *
 * 视觉设计：
 *   - 背景：rgba(255, 69, 58, 0.08)（半透明红色）
 *   - 边框：0.5px solid rgba(255, 69, 58, 0.2)（极细半透明红色边框）
 *   - 文字颜色：#ff453a（iOS红色）
 */
.status-error {
  background: rgba(255, 69, 58, 0.08); /* 半透明红色背景 */
  color: #ff453a; /* iOS红色文字 */
  border: 0.5px solid rgba(255, 69, 58, 0.2); /* 极细半透明红色边框 */
}

/* ========================================================================
   快捷键提示样式 (Keyboard Shortcut Hint)
   ======================================================================== */

/**
 * 快捷键提示容器（.shortcut-hint）：
 *
 * 功能说明：
 *   显示键盘快捷键提示的小徽章，通常位于反馈表单底部。
 *
 * 布局说明：
 *   - 使用flex布局，横向排列图标和文字
 *   - gap: 0.25rem，元素间距
 *   - 内边距：0.3rem 0.5rem
 *   - 圆角：6px（小圆角）
 *   - 相对定位（position: relative），用于tooltip绝对定位
 *   - width: fit-content，宽度自适应内容
 *   - 层级：z-index: 10
 *
 * 视觉设计：
 *   - 背景：rgba(255, 255, 255, 0.04)（极浅色）
 *   - 边框：1px solid rgba(255, 255, 255, 0.08)
 *   - 毛玻璃效果：backdrop-filter: blur(8px)
 *   - 阴影：0 2px 4px rgba(0, 0, 0, 0.1)
 *   - 透明度：0.8（默认半透明）
 *
 * 排版设计：
 *   - 字号：0.625rem（10px）
 *   - 字重：400（正常）
 *   - 颜色：rgba(245, 245, 247, 0.7)（半透明浅灰白色）
 *   - 字间距：-0.022em（紧凑）
 *   - 用户不可选中（user-select: none）
 *
 * 交互效果：
 *   - cursor: help（帮助光标）
 *   - 过渡动画：all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
 *   - 悬停时背景变亮、边框变深、向上平移（由:hover规则控制）
 */
.shortcut-hint {
  position: relative; /* 相对定位（用于tooltip） */
  bottom: auto; /* 底部自动 */
  left: auto; /* 左边自动 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 0.25rem; /* 元素间距（4px） */
  font-size: 0.625rem; /* 字号（10px） */
  color: rgba(245, 245, 247, 0.7); /* 半透明浅灰白色文字 */
  font-weight: 400; /* 正常字重 */
  letter-spacing: -0.022em; /* 紧凑字间距 */
  cursor: help; /* 帮助光标 */
  padding: 0.3rem 0.5rem; /* 内边距 */
  border-radius: 6px; /* 小圆角 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡动画 */
  user-select: none; /* 不可选中 */
  background: rgba(255, 255, 255, 0.04); /* 极浅色背景 */
  border: 1px solid rgba(255, 255, 255, 0.08); /* 边框 */
  backdrop-filter: blur(8px); /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(8px); /* Safari支持 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
  z-index: 10; /* 层级 */
  opacity: 0.8; /* 默认半透明 */
  width: fit-content; /* 宽度自适应 */
}

/**
 * 快捷键提示悬停效果（.shortcut-hint:hover）：
 *
 * 交互效果：
 *   - 文字颜色变为完全不透明（rgba(245, 245, 247, 1)）
 *   - 背景变亮（rgba(255, 255, 255, 0.08)）
 *   - 边框变深（rgba(255, 255, 255, 0.2)）
 *   - 透明度变为1（完全不透明）
 *   - 阴影增强（0 3px 6px）
 *   - 向上平移1px（transform: translateY(-1px)）
 */
.shortcut-hint:hover {
  color: rgba(245, 245, 247, 1); /* 文字颜色变为完全不透明 */
  background: rgba(255, 255, 255, 0.08); /* 背景变亮 */
  border-color: rgba(255, 255, 255, 0.2); /* 边框变深 */
  opacity: 1; /* 完全不透明 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* 阴影增强 */
  transform: translateY(-1px); /* 向上平移1px */
}

/**
 * 快捷键提示键盘图标（.shortcut-hint .keyboard-icon）：
 *
 * 功能说明：
 *   快捷键提示中的键盘图标（通常是一个小键盘emoji或图标）。
 *
 * 视觉设计：
 *   - 字号：0.75rem（12px）
 *   - 透明度：0.6（半透明）
 */
.shortcut-hint .keyboard-icon {
  font-size: 0.75rem; /* 字号（12px） */
  opacity: 0.6; /* 半透明 */
}

/**
 * 快捷键详细tooltip（.shortcut-tooltip）：
 *
 * 功能说明：
 *   悬停在快捷键提示上时显示的详细tooltip，包含完整的快捷键说明。
 *
 * 布局说明：
 *   - 绝对定位（position: absolute）
 *   - top: 100%，位于父元素下方
 *   - left: 0，左对齐
 *   - margin-top: 8px，与父元素间距8px
 *   - padding: 12px 16px
 *   - 圆角：10px
 *   - width: fit-content，宽度自适应内容
 *   - 层级：z-index: 1000（最高层级）
 *   - 默认隐藏（opacity: 0, visibility: hidden）
 *   - 不响应鼠标事件（pointer-events: none）
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(30, 41, 59, 0.95) → rgba(15, 23, 42, 0.98) → rgba(8, 15, 35, 0.96)）
 *   - 文字颜色：rgba(248, 250, 252, 0.95)（浅色）
 *   - 边框：1px solid rgba(148, 163, 184, 0.3)
 *   - 阴影：多层阴影（外阴影 + 内高光）
 *   - 毛玻璃效果：backdrop-filter: blur(16px) saturate(1.2)
 *
 * 排版设计：
 *   - 字号：11px
 *   - 行高：1.4
 *   - 字重：500（中等）
 *   - 字体：等宽字体（SF Mono, Monaco, Cascadia Code等）
 *   - 文字对齐：左对齐
 *   - 空白符：保留（white-space: pre）
 *   - 字体平滑：antialiased（抗锯齿）
 *   - 文字渲染：optimizeLegibility（优化可读性）
 *
 * 交互效果：
 *   - 过渡动画：all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
 *   - 悬停时显示（由:hover规则控制）
 */
.shortcut-tooltip {
  position: absolute; /* 绝对定位 */
  top: 100%; /* 位于父元素下方 */
  left: 0; /* 左对齐 */
  margin-top: 8px; /* 与父元素间距 */
  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.95) 0%,
    rgba(15, 23, 42, 0.98) 50%,
    rgba(8, 15, 35, 0.96) 100%
  ); /* 渐变背景 */
  color: rgba(248, 250, 252, 0.95); /* 浅色文字 */
  padding: 12px 16px; /* 内边距 */
  border-radius: 10px; /* 圆角 */
  font-size: 11px; /* 字号 */
  line-height: 1.4; /* 行高 */
  white-space: pre; /* 保留空白符 */
  opacity: 0; /* 默认透明（不可见） */
  visibility: hidden; /* 默认隐藏 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡动画 */
  pointer-events: none; /* 不响应鼠标事件 */
  z-index: 1000; /* 最高层级 */
  width: fit-content; /* 宽度自适应 */
  text-align: left; /* 左对齐 */
  border: 1px solid rgba(148, 163, 184, 0.3); /* 边框 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 4px 15px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1); /* 多层阴影 */
  font-weight: 500; /* 中等字重 */
  -webkit-font-smoothing: antialiased; /* 抗锯齿（WebKit） */
  -moz-osx-font-smoothing: grayscale; /* 抗锯齿（macOS Firefox） */
  text-rendering: optimizeLegibility; /* 优化可读性 */
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; /* 等宽字体 */
  backdrop-filter: blur(16px) saturate(1.2); /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(16px) saturate(1.2); /* Safari支持 */
}

/**
 * 快捷键提示悬停时显示tooltip（.shortcut-hint:hover .shortcut-tooltip）：
 *
 * 交互效果：
 *   悬停在快捷键提示上时，tooltip变为完全不透明且可见。
 */
.shortcut-hint:hover .shortcut-tooltip {
  opacity: 1; /* 完全不透明 */
  visibility: visible; /* 可见 */
}

/**
 * 快捷键tooltip箭头（.shortcut-hint::before）：
 *
 * 功能说明：
 *   tooltip顶部的向上箭头，指向快捷键提示按钮。
 *
 * 布局说明：
 *   - 绝对定位（position: absolute）
 *   - top: 100%，位于父元素下方
 *   - left: 16px，左偏移16px
 *   - margin-top: 2px，与父元素间距2px
 *   - 层级：z-index: 1001（高于tooltip）
 *   - 默认隐藏（opacity: 0, visibility: hidden）
 *   - 不响应鼠标事件（pointer-events: none）
 *
 * 视觉设计：
 *   - 边框：6px solid transparent（透明边框）
 *   - 底边框颜色：rgb(17, 24, 39)（深色）
 *   - 滤镜：drop-shadow（投影）
 *
 * 交互效果：
 *   - 过渡动画：all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
 *   - 悬停时显示（由:hover规则控制）
 */
.shortcut-hint::before {
  content: ''; /* 必需 */
  position: absolute; /* 绝对定位 */
  top: 100%; /* 位于父元素下方 */
  left: 16px; /* 左偏移16px */
  margin-top: 2px; /* 与父元素间距 */
  border: 6px solid transparent; /* 透明边框 */
  border-bottom-color: rgb(17, 24, 39); /* 底边框颜色（深色） */
  opacity: 0; /* 默认透明（不可见） */
  visibility: hidden; /* 默认隐藏 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡动画 */
  pointer-events: none; /* 不响应鼠标事件 */
  z-index: 1001; /* 层级（高于tooltip） */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); /* 投影 */
}

/**
 * 快捷键提示悬停时显示箭头（.shortcut-hint:hover::before）：
 *
 * 交互效果：
 *   悬停在快捷键提示上时，箭头变为完全不透明且可见。
 */
.shortcut-hint:hover::before {
  opacity: 1; /* 完全不透明 */
  visibility: visible; /* 可见 */
}

/* ========================================================================
   图片预览区域样式 (Image Preview Area)
   ======================================================================== */

/**
 * 图片预览容器（.image-preview-container）：
 *
 * 功能说明：
 *   包含所有图片预览的容器，显示已上传图片的列表。
 *
 * 布局说明：
 *   - 下外边距：1.5rem
 *   - 内边距：1.5rem
 *   - 圆角：20px（大圆角）
 *   - 相对定位（position: relative），用于子元素绝对定位
 *
 * 视觉设计：
 *   - 背景：线性渐变（rgba(255, 255, 255, 0.06) → rgba(255, 255, 255, 0.03) → rgba(255, 255, 255, 0.05)）
 *   - 边框：1px solid rgba(255, 255, 255, 0.12)
 *   - 阴影：0 4px 8px rgba(0, 0, 0, 0.1)
 */
.image-preview-container {
  margin-bottom: 1.5rem; /* 下外边距 */
  padding: 1.5rem; /* 内边距 */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.05) 100%
  ); /* 渐变背景 */
  border: 1px solid rgba(255, 255, 255, 0.12); /* 边框 */
  border-radius: 20px; /* 大圆角 */
  position: relative; /* 相对定位 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
}

/**
 * 图片预览头部（.image-preview-header）：
 *
 * 功能说明：
 *   图片预览区域的头部，包含图片计数文本和清除按钮。
 *
 * 布局说明：
 *   - 使用flex布局
 *   - justify-content: space-between，两端对齐
 *   - align-items: center，垂直居中
 *   - 下外边距：1rem
 *   - 下内边距：0.75rem
 *   - 底部边框：1px solid rgba(255, 255, 255, 0.1)（分隔线）
 */
.image-preview-header {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 1rem; /* 下外边距 */
  padding-bottom: 0.75rem; /* 下内边距 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 底部边框（分隔线） */
}

/**
 * 图片计数文本（.image-count-text）：
 *
 * 功能说明：
 *   显示当前已上传图片的数量（如"已上传 2 张图片"）。
 *
 * 排版设计：
 *   - 字号：0.875rem（14px）
 *   - 颜色：rgba(245, 245, 247, 0.8)（半透明浅灰白色）
 *   - 字重：500（中等）
 */
.image-count-text {
  font-size: 0.875rem; /* 字号（14px） */
  color: rgba(245, 245, 247, 0.8); /* 半透明浅灰白色文字 */
  font-weight: 500; /* 中等字重 */
}

/**
 * 清除所有图片按钮（.clear-all-images-btn）：
 *
 * 功能说明：
 *   清除所有已上传图片的按钮。
 *
 * 布局说明：
 *   - 内边距：0.5rem 1rem
 *   - 圆角：12px
 *
 * 视觉设计：
 *   - 背景：rgba(255, 69, 58, 0.1)（半透明红色）
 *   - 文字颜色：#ff453a（iOS红色）
 *   - 边框：1px solid rgba(255, 69, 58, 0.2)
 *
 * 排版设计：
 *   - 字号：0.8125rem（13px）
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 *   - 悬停时背景变深、边框变深（由:hover规则控制）
 */
.clear-all-images-btn {
  background: rgba(255, 69, 58, 0.1); /* 半透明红色背景 */
  color: #ff453a; /* iOS红色文字 */
  border: 1px solid rgba(255, 69, 58, 0.2); /* 边框 */
  border-radius: 12px; /* 圆角 */
  padding: 0.5rem 1rem; /* 内边距 */
  font-size: 0.8125rem; /* 字号（13px） */
  cursor: pointer; /* 可点击 */
  transition: all 0.2s ease; /* 过渡动画 */
}

/**
 * 清除所有图片按钮悬停效果（.clear-all-images-btn:hover）：
 *
 * 交互效果：
 *   - 背景变深（rgba(255, 69, 58, 0.15)）
 *   - 边框变深（rgba(255, 69, 58, 0.3)）
 */
.clear-all-images-btn:hover {
  background: rgba(255, 69, 58, 0.15); /* 背景变深 */
  border-color: rgba(255, 69, 58, 0.3); /* 边框变深 */
}

/**
 * 图片预览列表（.image-previews）：
 *
 * 功能说明：
 *   图片预览项的网格容器。
 *
 * 布局说明：
 *   - 使用grid布局
 *   - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))，自动填充列，最小宽度120px
 *   - gap: 1rem，网格间距
 *   - 最大高度：300px
 *   - 垂直滚动：overflow-y: auto（超出时显示滚动条）
 */
.image-previews {
  display: grid; /* 使用grid布局 */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* 自动填充列 */
  gap: 1rem; /* 网格间距 */
  max-height: 300px; /* 最大高度 */
  overflow-y: auto; /* 垂直滚动 */
}

/**
 * 图片预览项（.image-preview-item）：
 *
 * 功能说明：
 *   单个图片预览卡片。
 *
 * 布局说明：
 *   - 相对定位（position: relative），用于删除按钮绝对定位
 *   - 圆角：12px
 *   - 隐藏溢出（overflow: hidden）
 *
 * 视觉设计：
 *   - 背景：rgba(255, 255, 255, 0.05)（极浅色）
 *   - 边框：1px solid rgba(255, 255, 255, 0.1)
 *
 * 注意：
 *   已移除cursor: pointer和hover动效，点击放大功能由.image-preview-thumbnail处理。
 */
.image-preview-item {
  position: relative; /* 相对定位 */
  border-radius: 12px; /* 圆角 */
  overflow: hidden; /* 隐藏溢出 */
  background: rgba(255, 255, 255, 0.05); /* 极浅色背景 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 边框 */
}

/**
 * 图片预览缩略图（.image-preview-thumbnail）：
 *
 * 功能说明：
 *   图片预览的缩略图，点击可放大查看。
 *
 * 布局说明：
 *   - 宽度：100%
 *   - 高度：80px
 *   - object-fit: cover，保持纵横比裁剪
 *   - display: block，避免底部空隙
 *
 * 交互效果：
 *   - cursor: pointer（可点击放大）
 */
.image-preview-thumbnail {
  width: 100%; /* 全宽 */
  height: 80px; /* 固定高度 */
  object-fit: cover; /* 保持纵横比裁剪 */
  display: block; /* 块级元素 */
  cursor: pointer; /* 可点击放大 */
}

/**
 * 图片预览信息（.image-preview-info）：
 *
 * 功能说明：
 *   图片预览卡片底部的信息栏，显示文件名和大小。
 *
 * 布局说明：
 *   - 内边距：0.5rem
 *   - 文字居中（text-align: center）
 *   - 文字不换行（white-space: nowrap）
 *   - 隐藏溢出（overflow: hidden）
 *   - 文字溢出显示省略号（text-overflow: ellipsis）
 *
 * 视觉设计：
 *   - 背景：rgba(0, 0, 0, 0.3)（半透明黑色）
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *
 * 排版设计：
 *   - 字号：0.75rem（12px）
 */
.image-preview-info {
  padding: 0.5rem; /* 内边距 */
  background: rgba(0, 0, 0, 0.3); /* 半透明黑色背景 */
  color: #f5f5f7; /* 浅灰白色文字 */
  font-size: 0.75rem; /* 字号（12px） */
  text-align: center; /* 文字居中 */
  white-space: nowrap; /* 文字不换行 */
  overflow: hidden; /* 隐藏溢出 */
  text-overflow: ellipsis; /* 文字溢出显示省略号 */
}

/**
 * 图片预览删除按钮（.image-preview-remove）：
 *
 * 功能说明：
 *   删除单个图片的按钮，位于图片预览卡片右上角。
 *
 * 布局说明：
 *   - 绝对定位（position: absolute）
 *   - top: 4px，距离顶部4px
 *   - right: 4px，距离右边4px
 *   - 圆形按钮（border-radius: 50%）
 *   - 宽度/高度：20px
 *   - 使用flex布局居中内容
 *
 * 视觉设计：
 *   - 背景：rgba(255, 69, 58, 0.9)（半透明红色）
 *   - 文字颜色：white（白色）
 *   - 无边框（border: none）
 *   - 透明度：0.8（默认半透明）
 *
 * 排版设计：
 *   - 字号：12px
 *   - 行高：1
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 *   - 过渡动画：all 0.2s cubic-bezier(0.4, 0, 0.2, 1)
 *   - 悬停时透明度变为1、背景变深、放大1.1倍、显示阴影（由:hover规则控制）
 */
.image-preview-remove {
  position: absolute; /* 绝对定位 */
  top: 4px; /* 距离顶部4px */
  right: 4px; /* 距离右边4px */
  background: rgba(255, 69, 58, 0.9); /* 半透明红色背景 */
  color: white; /* 白色文字 */
  border: none; /* 无边框 */
  border-radius: 50%; /* 圆形 */
  width: 20px; /* 宽度 */
  height: 20px; /* 高度 */
  cursor: pointer; /* 可点击 */
  font-size: 12px; /* 字号 */
  line-height: 1; /* 行高 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  opacity: 0.8; /* 默认半透明 */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡动画 */
  transform: scale(1); /* 默认大小 */
}

/**
 * 图片预览删除按钮悬停效果（.image-preview-remove:hover）：
 *
 * 交互效果：
 *   - 透明度变为1（完全不透明）
 *   - 背景变深（rgba(255, 69, 58, 1)）
 *   - 放大1.1倍（transform: scale(1.1)）
 *   - 显示阴影（0 2px 8px rgba(255, 69, 58, 0.4)）
 */
.image-preview-remove:hover {
  opacity: 1; /* 完全不透明 */
  background: rgba(255, 69, 58, 1); /* 背景变深 */
  transform: scale(1.1); /* 放大1.1倍 */
  box-shadow: 0 2px 8px rgba(255, 69, 58, 0.4); /* 显示阴影 */
}

/* ========================================================================
   图片放大预览模态框样式 (Image Modal)
   ======================================================================== */

/**
 * 图片模态框容器（.image-modal）：
 *
 * 功能说明：
 *   全屏模态框，用于放大预览图片。
 *
 * 布局说明：
 *   - 固定定位（position: fixed），覆盖整个屏幕
 *   - 左/上：0
 *   - 宽度/高度：100%
 *   - 层级：z-index: 10000（最高层级）
 *   - 默认隐藏（display: none，通过.show类显示）
 *
 * 视觉设计：
 *   - 背景：rgba(0, 0, 0, 0.9)（半透明黑色）
 *   - 毛玻璃效果：backdrop-filter: blur(5px)
 *   - 用户不可选中（user-select: none）
 *   - 禁用触控调出菜单（-webkit-touch-callout: none）
 */
.image-modal {
  display: none; /* 默认隐藏 */
  position: fixed; /* 固定定位 */
  z-index: 10000; /* 最高层级 */
  left: 0; /* 左边0 */
  top: 0; /* 顶部0 */
  width: 100%; /* 全宽 */
  height: 100%; /* 全高 */
  background: rgba(0, 0, 0, 0.9); /* 半透明黑色背景 */
  backdrop-filter: blur(5px); /* 毛玻璃效果 */
  -webkit-touch-callout: none; /* 禁用触控调出菜单 */
  -webkit-user-select: none; /* 用户不可选中（WebKit） */
  -moz-user-select: none; /* 用户不可选中（Firefox） */
  -ms-user-select: none; /* 用户不可选中（IE/Edge） */
  user-select: none; /* 用户不可选中 */
}

/**
 * 图片模态框显示状态（.image-modal.show）：
 *
 * 功能说明：
 *   模态框显示时的状态。
 *
 * 布局说明：
 *   - display: flex，使用flex布局
 *   - align-items: center，垂直居中
 *   - justify-content: center，水平居中
 *
 * 动画效果：
 *   - animation: fadeIn 0.3s ease-out（淡入动画）
 */
.image-modal.show {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  animation: fadeIn 0.3s ease-out; /* 淡入动画 */
}

/**
 * 图片模态框内容容器（.image-modal-content）：
 *
 * 功能说明：
 *   包含图片、关闭按钮和信息栏的容器。
 *
 * 布局说明：
 *   - 相对定位（position: relative），用于关闭按钮和信息栏绝对定位
 *   - 最大宽度/高度：90%
 *   - 使用flex布局，居中内容
 */
.image-modal-content {
  position: relative; /* 相对定位 */
  max-width: 90%; /* 最大宽度 */
  max-height: 90%; /* 最大高度 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/**
 * 图片模态框图片（.image-modal img）：
 *
 * 功能说明：
 *   模态框中的放大图片。
 *
 * 布局说明：
 *   - 最大宽度/高度：100%
 *   - object-fit: contain，保持纵横比
 *   - 圆角：8px
 *
 * 视觉设计：
 *   - 阴影：0 4px 20px rgba(0, 0, 0, 0.5)
 */
.image-modal img {
  max-width: 100%; /* 最大宽度 */
  max-height: 100%; /* 最大高度 */
  object-fit: contain; /* 保持纵横比 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* 阴影 */
}

/**
 * 图片模态框关闭按钮（.image-modal-close）：
 *
 * 功能说明：
 *   关闭模态框的按钮，位于图片右上角外侧。
 *
 * 布局说明：
 *   - 绝对定位（position: absolute）
 *   - top: -40px，位于图片上方40px
 *   - right: -40px，位于图片右侧40px
 *   - 圆形按钮（border-radius: 50%）
 *   - 宽度/高度：32px
 *   - 使用flex布局居中内容
 *
 * 视觉设计：
 *   - 背景：rgba(255, 255, 255, 0.2)（半透明白色）
 *   - 文字颜色：white（白色）
 *   - 无边框（border: none）
 *
 * 排版设计：
 *   - 字号：24px
 *
 * 交互效果：
 *   - cursor: pointer（可点击）
 *   - 过渡动画：all 0.2s ease
 *   - 悬停时背景变深、放大1.1倍（由:hover规则控制）
 */
.image-modal-close {
  position: absolute; /* 绝对定位 */
  top: -40px; /* 位于图片上方40px */
  right: -40px; /* 位于图片右侧40px */
  background: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
  border: none; /* 无边框 */
  color: white; /* 白色文字 */
  font-size: 24px; /* 字号 */
  width: 32px; /* 宽度 */
  height: 32px; /* 高度 */
  border-radius: 50%; /* 圆形 */
  cursor: pointer; /* 可点击 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  transition: all 0.2s ease; /* 过渡动画 */
}

/**
 * 图片模态框关闭按钮悬停效果（.image-modal-close:hover）：
 *
 * 交互效果：
 *   - 背景变深（rgba(255, 255, 255, 0.3)）
 *   - 放大1.1倍（transform: scale(1.1)）
 */
.image-modal-close:hover {
  background: rgba(255, 255, 255, 0.3); /* 背景变深 */
  transform: scale(1.1); /* 放大1.1倍 */
}

/**
 * 图片模态框信息栏（.image-modal-info）：
 *
 * 功能说明：
 *   显示图片信息的栏，位于图片下方。
 *
 * 布局说明：
 *   - 绝对定位（position: absolute）
 *   - bottom: -50px，位于图片下方50px
 *   - left/right: 0，横跨整个容器宽度
 *   - 内边距：8px
 *   - 圆角：4px
 *   - 文字居中（text-align: center）
 *
 * 视觉设计：
 *   - 背景：rgba(0, 0, 0, 0.5)（半透明黑色）
 *   - 文字颜色：white（白色）
 *
 * 排版设计：
 *   - 字号：14px
 */
.image-modal-info {
  position: absolute; /* 绝对定位 */
  bottom: -50px; /* 位于图片下方50px */
  left: 0; /* 左边0 */
  right: 0; /* 右边0 */
  text-align: center; /* 文字居中 */
  color: white; /* 白色文字 */
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  padding: 8px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  font-size: 14px; /* 字号 */
}

/**
 * 淡入动画（@keyframes fadeIn）：
 *
 * 功能说明：
 *   淡入动画，从透明渐变到不透明。
 *
 * 动画关键帧：
 *   - from: opacity: 0（完全透明）
 *   - to: opacity: 1（完全不透明）
 *
 * 使用场景：
 *   - 图片模态框显示时（.image-modal.show）
 */
@keyframes fadeIn {
  from {
    opacity: 0; /* 完全透明 */
  }
  to {
    opacity: 1; /* 完全不透明 */
  }
}

/* 移动设备优化 */
@media (max-width: 768px) {
  .image-preview-container {
    margin: 1rem 0;
  }

  .image-previews {
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }

  .image-preview-item {
    min-height: 80px;
  }

  .image-preview-thumbnail {
    max-height: 60px;
  }

  .image-preview-remove {
    width: 22px;
    height: 22px;
    font-size: 12px;
    top: 2px;
    right: 2px;
  }

  .image-modal-close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .image-modal-info {
    bottom: 10px;
    left: 10px;
    right: 10px;
    font-size: 12px;
  }

  /* 触摸友好的按钮大小 */
  .btn {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }

  /* 拖拽提示优化 */
  .drag-overlay-content {
    padding: 1.5rem;
    max-width: 300px;
  }

  .drag-icon {
    font-size: 3rem;
  }

  .drag-text {
    font-size: 1.25rem;
  }
}

/* ========================================================================
   代码粘贴模态框样式 (Code Paste Modal)
   ======================================================================== */

/**
 * 代码粘贴输入框（.code-paste-textarea）：
 * - 用于在无法读取剪贴板的环境（iOS/HTTP/权限限制）下手动粘贴代码
 * - 采用等宽字体，提升代码可读性
 */
.code-paste-textarea {
  width: 100%;
  min-height: 220px;
  max-height: 55vh;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: #f5f5f7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
}

.code-paste-textarea:focus {
  border-color: rgba(10, 132, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.45);
}

/**
 * 代码粘贴操作按钮容器（.code-paste-actions）：
 * - 右对齐，移动端自动换行
 */
.code-paste-actions {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* 触摸设备优化 - 已移除所有hover动效，无需特殊处理 */

/* ========================================================================
   拖拽覆盖层样式 (Drag and Drop Overlay)
   ======================================================================== */

/**
 * 拖拽覆盖层容器（.drag-overlay）：
 *
 * 功能说明：
 *   拖拽图片到页面时显示的全屏覆盖层。
 *
 * 布局说明：
 *   - 固定定位（position: fixed），覆盖整个屏幕
 *   - top/left/right: 0
 */
.drag-overlay {
  position: fixed; /* 固定定位 */
  top: 0; /* 顶部0 */
  left: 0; /* 左边0 */
  right: 0; /* 右边0 */
  bottom: 0; /* 底部0 */
  background: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
  z-index: 9999; /* 高层级 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
}

/**
 * 拖拽覆盖层内容区（.drag-overlay-content）：
 *
 * 功能说明：
 *   拖拽覆盖层中的内容区，显示拖拽提示信息。
 *
 * 布局说明：
 *   - 文字居中（text-align: center）
 *   - 内边距：2rem
 *   - 最大宽度：400px
 *   - 圆角：20px
 *
 * 视觉设计：
 *   - 背景：rgba(0, 122, 255, 0.1)（半透明蓝色）
 *   - 边框：2px dashed rgba(0, 122, 255, 0.5)（虚线边框）
 *   - 文字颜色：#f5f5f7（浅灰白色）
 */
.drag-overlay-content {
  text-align: center; /* 文字居中 */
  color: #f5f5f7; /* 浅灰白色文字 */
  padding: 2rem; /* 内边距 */
  border: 2px dashed rgba(0, 122, 255, 0.5); /* 虚线边框 */
  border-radius: 20px; /* 圆角 */
  background: rgba(0, 122, 255, 0.1); /* 半透明蓝色背景 */
  max-width: 400px; /* 最大宽度 */
}

/**
 * 拖拽图标（.drag-icon）：
 *
 * 功能说明：
 *   拖拽覆盖层中的图标（通常是一个上传图标emoji）。
 *
 * 视觉设计：
 *   - 字号：4rem（64px）
 *   - 下外边距：1rem
 *   - 透明度：0.8
 */
.drag-icon {
  font-size: 4rem; /* 字号（64px） */
  margin-bottom: 1rem; /* 下外边距 */
  opacity: 0.8; /* 半透明 */
}

/**
 * 拖拽主文本（.drag-text）：
 *
 * 功能说明：
 *   拖拽覆盖层中的主要提示文本（如"拖放图片到此处"）。
 *
 * 排版设计：
 *   - 字号：1.5rem（24px）
 *   - 字重：600（半粗体）
 *   - 下外边距：0.5rem
 */
.drag-text {
  font-size: 1.5rem; /* 字号（24px） */
  font-weight: 600; /* 半粗体 */
  margin-bottom: 0.5rem; /* 下外边距 */
}

/**
 * 拖拽副文本（.drag-subtext）：
 *
 * 功能说明：
 *   拖拽覆盖层中的副文本（如"支持 PNG、JPG、GIF 格式"）。
 *
 * 排版设计：
 *   - 字号：1rem（16px）
 *   - 透明度：0.7
 */
.drag-subtext {
  font-size: 1rem; /* 字号（16px） */
  opacity: 0.7; /* 半透明 */
}

/**
 * 文本框拖拽悬停高亮效果（.textarea-drag-over）：
 *
 * 功能说明：
 *   当拖拽图片到文本框上方时的高亮效果。
 *
 * 视觉设计：
 *   - 边框颜色：rgba(0, 122, 255, 0.6)（蓝色）
 *   - 背景：rgba(0, 122, 255, 0.05)（浅蓝色）
 *   - 外轮廓：0 0 0 2px rgba(0, 122, 255, 0.3)（蓝色发光）
 *
 * 注意：
 *   使用 !important 以确保样式优先级。
 */
.textarea-drag-over {
  border-color: rgba(0, 122, 255, 0.6) !important; /* 边框颜色（蓝色） */
  background: rgba(0, 122, 255, 0.05) !important; /* 背景（浅蓝色） */
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3) !important; /* 外轮廓（蓝色发光） */
}

/**
 * 图片加载状态（.image-loading）：
 *
 * 功能说明：
 *   图片加载时显示的占位符。
 *
 * 布局说明：
 *   - 使用flex布局
 *   - align-items: center，垂直居中
 *   - justify-content: center，水平居中
 *   - 高度：80px
 *   - 圆角：12px
 *
 * 视觉设计：
 *   - 背景：rgba(255, 255, 255, 0.05)（极浅色）
 *   - 文字颜色：rgba(245, 245, 247, 0.6)（半透明浅灰白色）
 *
 * 排版设计：
 *   - 字号：0.875rem（14px）
 */
.image-loading {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 80px; /* 高度 */
  background: rgba(255, 255, 255, 0.05); /* 极浅色背景 */
  border-radius: 12px; /* 圆角 */
  color: rgba(245, 245, 247, 0.6); /* 半透明浅灰白色文字 */
  font-size: 0.875rem; /* 字号（14px） */
}

/**
 * 加载旋转图标（.loading-spinner）：
 *
 * 功能说明：
 *   图片加载时的旋转动画图标。
 *
 * 布局说明：
 *   - 宽度/高度：20px
 *   - 圆形（border-radius: 50%）
 *   - 右外边距：0.5rem
 *
 * 视觉设计：
 *   - 边框：2px solid rgba(255, 255, 255, 0.3)（浅色边框）
 *   - 顶部边框：2px solid #007aff（蓝色边框）
 *
 * 动画效果：
 *   - animation: spin 1s linear infinite（无限旋转）
 */
.loading-spinner {
  width: 20px; /* 宽度 */
  height: 20px; /* 高度 */
  border: 2px solid rgba(255, 255, 255, 0.3); /* 浅色边框 */
  border-top: 2px solid #007aff; /* 顶部蓝色边框 */
  border-radius: 50%; /* 圆形 */
  animation: spin 1s linear infinite; /* 旋转动画 */
  margin-right: 0.5rem; /* 右外边距 */
}

/**
 * 旋转动画（@keyframes spin）：
 *
 * 功能说明：
 *   旋转动画，从0度旋转到360度。
 *
 * 动画关键帧：
 *   - 0%: transform: rotate(0deg)
 *   - 100%: transform: rotate(360deg)
 *
 * 使用场景：
 *   - 加载旋转图标（.loading-spinner）
 */
@keyframes spin {
  0% {
    transform: rotate(0deg); /* 0度 */
  }
  100% {
    transform: rotate(360deg); /* 360度 */
  }
}

/**
 * 图片错误状态（.image-error）：
 *
 * 功能说明：
 *   图片加载失败时的状态样式。
 *
 * 视觉设计：
 *   - 背景：rgba(255, 69, 58, 0.1)（半透明红色）
 *   - 边框颜色：rgba(255, 69, 58, 0.3)（半透明红色）
 *   - 文字颜色：#ff453a（iOS红色）
 */
.image-error {
  background: rgba(255, 69, 58, 0.1); /* 半透明红色背景 */
  border-color: rgba(255, 69, 58, 0.3); /* 半透明红色边框 */
  color: #ff453a; /* iOS红色文字 */
}

/**
 * 错误图标（.error-icon）：
 *
 * 功能说明：
 *   图片加载失败时显示的错误图标。
 *
 * 视觉设计：
 *   - 字号：1.5rem（24px）
 *   - 下外边距：0.5rem
 */
.error-icon {
  font-size: 1.5rem; /* 字号（24px） */
  margin-bottom: 0.5rem; /* 下外边距 */
}

/* ========================================================================
   Markdown渲染样式 (Markdown Rendering)
   ======================================================================== */

/**
 * Markdown内容容器（.markdown-content）：
 *
 * 功能说明：
 *   Markdown渲染后的内容容器，包含标题、段落、列表、代码块等。
 *
 * 排版设计：
 *   - 行高：1.5
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *
 * 性能优化：
 *   - contain: layout style（包含布局和样式，避免影响外部元素）
 *   - will-change: auto（浏览器自动决定优化）
 *   - transform: translateZ(0)（启用硬件加速）
 */
.markdown-content {
  line-height: 1.5; /* 行高 */
  color: #f5f5f7; /* 浅灰白色文字 */
  contain: layout style; /* 包含布局和样式 */
  will-change: auto; /* 自动优化 */
  transform: translateZ(0); /* 启用硬件加速 */
}

/**
 * Markdown标题样式（.markdown-content h1-h6）：
 *
 * 功能说明：
 *   Markdown渲染的所有级别标题的通用样式。
 *
 * 排版设计：
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *   - 字重：600（半粗体）
 *   - 外边距：1rem 0 0.5rem 0（上1rem，左右0，下0.5rem）
 */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  color: #f5f5f7; /* 浅灰白色文字 */
  font-weight: 600; /* 半粗体 */
  margin: 1rem 0 0.5rem 0; /* 外边距 */
}

/** Markdown一级标题（.markdown-content h1）：字号1.5rem（24px） */
.markdown-content h1 {
  font-size: 1.5rem; /* 字号（24px） */
}
/** Markdown二级标题（.markdown-content h2）：字号1.25rem（20px） */
.markdown-content h2 {
  font-size: 1.25rem; /* 字号（20px） */
}
/** Markdown三级标题（.markdown-content h3）：字号1.125rem（18px） */
.markdown-content h3 {
  font-size: 1.125rem; /* 字号（18px） */
}
/** Markdown四级标题（.markdown-content h4）：字号1rem（16px） */
.markdown-content h4 {
  font-size: 1rem; /* 字号（16px） */
}

/**
 * Markdown段落样式（.markdown-content p）：
 *
 * 功能说明：
 *   Markdown渲染的段落样式。
 *
 * 排版设计：
 *   - 外边距：0.75rem 0（上下0.75rem，左右0）
 *   - 文字颜色：#f5f5f7（浅灰白色）
 */
.markdown-content p {
  margin: 0.75rem 0; /* 外边距 */
  color: #f5f5f7; /* 浅灰白色文字 */
}

/**
 * Markdown列表样式（.markdown-content ul/ol）：
 *
 * 功能说明：
 *   Markdown渲染的无序列表和有序列表的通用样式。
 *
 * 布局说明：
 *   - 外边距：0.75rem 0（上下0.75rem，左右0）
 *   - 左内边距：1.5rem（为列表标记留出空间）
 *
 * 排版设计：
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *   - 行高：1.6
 */
.markdown-content ul,
.markdown-content ol {
  margin: 0.75rem 0; /* 外边距 */
  padding-left: 1.5rem; /* 左内边距 */
  color: #f5f5f7; /* 浅灰白色文字 */
  line-height: 1.6; /* 行高 */
}

/** Markdown无序列表（.markdown-content ul）：圆点标记，标记位置在外 */
.markdown-content ul {
  list-style-type: disc; /* 圆点标记 */
  list-style-position: outside; /* 标记位置在外 */
}

/** Markdown有序列表（.markdown-content ol）：数字标记，标记位置在外 */
.markdown-content ol {
  list-style-type: decimal; /* 数字标记 */
  list-style-position: outside; /* 标记位置在外 */
}

/**
 * Markdown列表项样式（.markdown-content li）：
 *
 * 功能说明：
 *   Markdown渲染的列表项样式。
 *
 * 排版设计：
 *   - 外边距：0.375rem 0（上下0.375rem，左右0）
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *   - 行高：1.6
 */
.markdown-content li {
  margin: 0.375rem 0; /* 外边距 */
  color: #f5f5f7; /* 浅灰白色文字 */
  line-height: 1.6; /* 行高 */
}

/**
 * Markdown无序列表标记样式（.markdown-content ul li::marker）：
 *
 * 功能说明：
 *   自定义无序列表的标记（圆点）颜色和大小。
 *
 * 视觉设计：
 *   - 颜色：#f5f5f7（浅灰白色）
 *   - 字号：1.1em（略大于正文）
 */
.markdown-content ul li::marker {
  color: #f5f5f7; /* 浅灰白色 */
  font-size: 1.1em; /* 略大于正文 */
}

/**
 * Markdown有序列表标记样式（.markdown-content ol li::marker）：
 *
 * 功能说明：
 *   自定义有序列表的标记（数字）颜色和字重。
 *
 * 视觉设计：
 *   - 颜色：#f5f5f7（浅灰白色）
 *   - 字重：600（半粗体）
 */
.markdown-content ol li::marker {
  color: #f5f5f7; /* 浅灰白色 */
  font-weight: 600; /* 半粗体 */
}

/**
 * Markdown嵌套无序列表样式（.markdown-content ul ul）：
 *
 * 功能说明：
 *   二级无序列表样式，标记为空心圆。
 *
 * 布局说明：
 *   - 外边距：0.25rem 0（上下0.25rem，左右0）
 *   - 左内边距：1.25rem
 *
 * 视觉设计：
 *   - 列表标记：circle（空心圆）
 */
.markdown-content ul ul {
  list-style-type: circle; /* 空心圆标记 */
  margin: 0.25rem 0; /* 外边距 */
  padding-left: 1.25rem; /* 左内边距 */
}

/**
 * Markdown三级嵌套无序列表样式（.markdown-content ul ul ul）：
 *
 * 功能说明：
 *   三级无序列表样式，标记为实心方块。
 *
 * 视觉设计：
 *   - 列表标记：square（实心方块）
 */
.markdown-content ul ul ul {
  list-style-type: square; /* 实心方块标记 */
}

/**
 * Markdown嵌套有序列表样式（.markdown-content ol ol）：
 *
 * 功能说明：
 *   二级有序列表样式，标记为小写字母。
 *
 * 布局说明：
 *   - 外边距：0.25rem 0（上下0.25rem，左右0）
 *   - 左内边距：1.25rem
 *
 * 视觉设计：
 *   - 列表标记：lower-alpha（小写字母）
 */
.markdown-content ol ol {
  list-style-type: lower-alpha; /* 小写字母标记 */
  margin: 0.25rem 0; /* 外边距 */
  padding-left: 1.25rem; /* 左内边距 */
}

/**
 * Markdown三级嵌套有序列表样式（.markdown-content ol ol ol）：
 *
 * 功能说明：
 *   三级有序列表样式，标记为小写罗马数字。
 *
 * 视觉设计：
 *   - 列表标记：lower-roman（小写罗马数字）
 */
.markdown-content ol ol ol {
  list-style-type: lower-roman; /* 小写罗马数字标记 */
}

/** 列表项内容段落（.markdown-content li p）：外边距0.25rem 0 */
.markdown-content li p {
  margin: 0.25rem 0; /* 外边距 */
}

/** 列表项第一个子元素（.markdown-content li > *:first-child）：移除上外边距 */
.markdown-content li > *:first-child {
  margin-top: 0; /* 移除上外边距 */
}

/** 列表项最后一个子元素（.markdown-content li > *:last-child）：移除下外边距 */
.markdown-content li > *:last-child {
  margin-bottom: 0; /* 移除下外边距 */
}

/**
 * Markdown引用块（.markdown-content blockquote）：
 *
 * 功能说明：
 *   Markdown渲染的引用块样式（使用 > 符号标记）。
 *
 * 布局说明：
 *   - 外边距：1rem 0
 *   - 内边距：0.75rem 1rem
 *
 * 视觉设计：
 *   - 背景：rgba(0, 122, 255, 0.08)（半透明蓝色）
 *   - 左边框：3px solid #007aff（蓝色强调边框）
 *   - 文字颜色：#f5f5f7（浅灰白色）
 */
.markdown-content blockquote {
  margin: 1rem 0; /* 外边距 */
  padding: 0.75rem 1rem; /* 内边距 */
  background: rgba(0, 122, 255, 0.08); /* 半透明蓝色背景 */
  border-left: 3px solid #007aff; /* 蓝色强调边框 */
  color: #f5f5f7; /* 浅灰白色文字 */
}

/* ========================================================================
   代码块样式 (Code Blocks)
   ======================================================================== */

/**
 * Markdown内联代码（.markdown-content code）：
 *
 * 功能说明：
 *   Markdown渲染的内联代码样式（使用 ` 符号包裹）。
 *
 * 布局说明：
 *   - 内边距：0.125rem 0.375rem
 *   - 圆角：6px
 *
 * 视觉设计：
 *   - 背景：rgba(255, 255, 255, 0.12)（半透明白色）
 *   - 文字颜色：#ff453a（iOS红色）
 *   - 边框：1px solid rgba(255, 255, 255, 0.08)
 *
 * 排版设计：
 *   - 字体：var(--font-mono)（等宽字体）
 *   - 字号：0.875rem（14px）
 */
.markdown-content code {
  background: rgba(255, 255, 255, 0.12); /* 半透明白色背景 */
  color: #ff453a; /* iOS红色文字 */
  padding: 0.125rem 0.375rem; /* 内边距 */
  font-family: var(--font-mono); /* 等宽字体 */
  font-size: 0.875rem; /* 字号（14px） */
  border-radius: 6px; /* 圆角 */
  border: 1px solid rgba(255, 255, 255, 0.08); /* 边框 */
  white-space: break-spaces; /* 保留空格并允许必要换行 */
  overflow-wrap: anywhere; /* 长 token 允许断行，避免横向溢出 */
  word-break: break-word; /* 兼容旧浏览器 */
}

/**
 * 代码块容器（.code-block-container）：
 *
 * 功能说明：
 *   包含代码块的现代化容器，具有渐变背景和阴影效果。
 *
 * 布局说明：
 *   - 相对定位，外边距1.5rem 0，圆角20px
 *   - 隐藏溢出（overflow: hidden）
 *
 * 视觉设计：
 *   - 渐变背景（深色调）
 *   - 边框1px solid rgba(255, 255, 255, 0.12)
 *   - 多层阴影和内部高光
 *   - 毛玻璃效果
 *
 * 交互效果：
 *   - 过渡动画：all 0.3s ease
 *   - 悬停时向上平移2px、阴影增强、边框变蓝（由:hover规则控制）
 */
.code-block-container {
  position: relative; /* 相对定位 */
  margin: 1.5rem 0; /* 外边距 */
  border-radius: 20px; /* 圆角 */
  background: linear-gradient(
    135deg,
    rgba(15, 15, 25, 0.95) 0%,
    rgba(25, 25, 40, 0.9) 50%,
    rgba(20, 20, 35, 0.95) 100%
  ); /* 渐变背景 */
  border: 1px solid rgba(255, 255, 255, 0.12); /* 边框 */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1); /* 多层阴影 */
  overflow: hidden; /* 隐藏溢出 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  transition: none; /* 按需求：移除鼠标悬停动效（禁用过渡动画） */
}

/** 代码块容器悬停效果：已禁用（按需求移除鼠标移上去的动态效果） */
.code-block-container:hover {
  transform: none;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
}

/**
 * 代码块pre标签（.markdown-content pre）：
 *
 * 功能说明：
 *   代码块的pre标签样式，包含多行代码。
 *
 * 布局说明：
 *   - 内边距：1.5rem 1.75rem
 *   - 外边距：0
 *   - 水平滚动：overflow-x: auto
 *   - 圆角：20px
 *   - 相对定位
 *
 * 视觉设计：
 *   - 背景：transparent（透明，使用容器背景）
 *   - 无边框（border: none）
 *
 * 排版设计：
 *   - 字号：0.9rem（14.4px）
 *   - 行高：1.6
 */
.markdown-content pre {
  background: transparent; /* 透明背景 */
  border: none; /* 无边框 */
  padding: 1.5rem 1.75rem; /* 内边距 */
  margin: 0; /* 外边距 */
  overflow-x: auto; /* 水平滚动 */
  border-radius: 20px; /* 圆角 */
  font-size: 0.9rem; /* 字号（14.4px） */
  line-height: 1.6; /* 行高 */
  position: relative; /* 相对定位 */
  max-width: 100%; /* 避免代码块撑破父容器 */
}

/**
 * 代码块code标签（.markdown-content pre code）：
 *
 * 功能说明：
 *   代码块内的code标签样式，显示实际代码内容。
 *
 * 视觉设计：
 *   - 背景：none（无背景）
 *   - 文字颜色：#f5f5f7（浅灰白色）
 *   - 内边距：0
 *   - 文字阴影：0 1px 2px rgba(0, 0, 0, 0.3)
 *   - 无文字装饰
 *
 * 排版设计：
 *   - 字体：等宽字体栈 var(--font-mono)
 *   - 字号：继承
 *   - 字重：400（正常）
 *   - 字间距：0.025em
 */
.markdown-content pre code {
  background: none; /* 无背景 */
  color: #f5f5f7; /* 浅灰白色文字 */
  padding: 0; /* 内边距 */
  font-family: var(--font-mono); /* 等宽字体 */
  font-size: inherit; /* 字号继承 */
  font-weight: 400; /* 正常字重 */
  letter-spacing: 0.025em; /* 字间距 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 文字阴影 */
  text-decoration: none !important; /* 无文字装饰 */
  display: block; /* 确保 white-space / wrapping 对整块代码生效 */
  white-space: pre-wrap; /* 保留缩进与换行，同时允许长行折行 */
  overflow-wrap: anywhere; /* 超长 token 可断行 */
  word-break: break-word; /* 兼容旧浏览器 */
}

/** 强制覆盖代码高亮背景：确保语法高亮插件不覆盖背景 */
.markdown-content .highlight,
.markdown-content div[style*='background'] {
  background: transparent !important; /* 透明背景 */
}

/** 移除代码块内所有文本装饰：确保代码不显示下划线等装饰 */
.markdown-content pre *,
.markdown-content code *,
.markdown-content pre,
.markdown-content code {
  text-decoration: none !important; /* 无文字装饰 */
  text-decoration-line: none !important; /* 无装饰线 */
  text-decoration-style: none !important; /* 无装饰样式 */
  text-decoration-color: transparent !important; /* 装饰颜色透明 */
  text-decoration-thickness: 0 !important; /* 装饰厚度0 */
  text-underline-offset: 0 !important; /* 下划线偏移0 */
  border-bottom: none !important; /* 无底边框 */
  border-top: none !important; /* 无顶边框 */
  outline: none !important; /* 无outline */
  box-shadow: none !important; /* 无阴影 */
}

/** 强制移除所有代码相关元素的下划线：全局强制样式 */
.code-block-container *,
.code-block-container,
pre *,
pre,
code *,
code,
.highlight *,
.highlight {
  text-decoration: none !important; /* 无文字装饰 */
  text-decoration-line: none !important; /* 无装饰线 */
  text-decoration-style: none !important; /* 无装饰样式 */
  text-decoration-color: transparent !important; /* 装饰颜色透明 */
  text-decoration-thickness: 0 !important; /* 装饰厚度0 */
  text-underline-offset: 0 !important; /* 下划线偏移0 */
  border-bottom: none !important; /* 无底边框 */
  border-top: none !important; /* 无顶边框 */
}

/** 隐藏代码块滚动条（WebKit）：保持滚动功能但隐藏滚动条 */
.markdown-content pre::-webkit-scrollbar {
  display: none !important; /* 隐藏 */
  width: 0 !important; /* 宽度0 */
  height: 0 !important; /* 高度0 */
}

.code-block-container pre::-webkit-scrollbar {
  display: none !important; /* 隐藏 */
  width: 0 !important; /* 宽度0 */
  height: 0 !important; /* 高度0 */
}

/** 隐藏代码块滚动条（Firefox/IE）：保持滚动功能但隐藏滚动条 */
.markdown-content pre {
  scrollbar-width: none !important; /* Firefox：无滚动条 */
  -ms-overflow-style: none !important; /* IE：无滚动条 */
}

.code-block-container pre {
  scrollbar-width: none !important; /* Firefox：无滚动条 */
  -ms-overflow-style: none !important; /* IE：无滚动条 */
}

/**
 * 代码工具栏（.code-toolbar）：
 * 功能：包含语言标签和复制按钮的工具栏，位于代码块右上角
 * 布局：绝对定位，顶部16px右侧16px，flex横向排列，gap 10px，层级10
 * 视觉：默认opacity 0.8，悬停时1
 * 交互：过渡动画opacity 0.3s ease
 */
.code-toolbar {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  opacity: 1;
  transition: none; /* 按需求：移除 hover 透明度动效 */
}
/** 代码容器悬停时工具栏完全不透明 */
.code-block-container:hover .code-toolbar {
  opacity: 1; /* 保持一致，无动态变化 */
}

/**
 * 语言标签（.language-label）：
 * 功能：显示代码语言（如JavaScript、Python）
 * 布局：内边距5px 10px，圆角8px
 * 视觉：渐变背景（蓝紫色），边框蓝色，文字淡蓝色，大写，毛玻璃
 * 排版：字号0.7rem，字重700，字间距0.5px
 * 交互：悬停时向上平移1px、阴影增强、边框变深
 */
.language-label {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.25), rgba(88, 86, 214, 0.2));
  border: 1px solid rgba(0, 122, 255, 0.4);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.7rem;
  color: #4fc3f7;
  font-weight: 700;
  font-family: inherit;
  backdrop-filter: blur(15px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
  transition: none; /* 按需求：移除 hover 动效 */
}
.language-label:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
  border-color: rgba(0, 122, 255, 0.4);
}

/**
 * 复制按钮（.copy-button）：
 * 功能：复制代码块内容到剪贴板
 * 布局：内边距7px 12px，圆角10px，flex横向排列，gap 5px，相对定位，隐藏溢出
 * 视觉：渐变背景（半透明白色），边框半透明白色，文字浅白色，毛玻璃，阴影
 * 排版：字号0.75rem，字重500
 * 交互：悬停时背景变亮、边框变深、向上平移2px、阴影增强
 * 动画：::before伪元素实现光线扫过效果
 * 状态：.copied类时变绿色
 */
.copy-button {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: none; /* 按需求：移除 hover/active 动效 */
  font-family: inherit;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(15px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}
/** 复制按钮光线扫过效果 */
.copy-button::before {
  display: none; /* 按需求：移除 hover 动效（光线扫过） */
}
.copy-button:hover::before {
  /* no-op */
}
/** 复制按钮悬停效果 */
.copy-button:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/** 复制按钮按下效果 */
.copy-button:active {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/** 复制按钮已复制状态 */
.copy-button.copied {
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.25), rgba(52, 199, 89, 0.15));
  border-color: rgba(52, 199, 89, 0.5);
  color: #4caf50;
  box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

/** Markdown表格：全宽，边框合并，外边距1rem 0，极浅色背景 */
.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background: rgba(255, 255, 255, 0.03);
}

/** Markdown表格单元格（th/td）：内边距0.75rem，左对齐，底边框，浅灰白色文字 */
.markdown-content th,
.markdown-content td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
}

/** Markdown表头（th）：半透明蓝色背景，半粗体 */
.markdown-content th {
  background: rgba(0, 122, 255, 0.1);
  font-weight: 600;
}

/** Markdown链接：蓝色文字，无装饰 */
.markdown-content a {
  color: #007aff;
  text-decoration: none;
}

/** Markdown链接悬停：显示下划线 */
.markdown-content a:hover {
  text-decoration: underline;
}

/** Markdown删除线（del/s/.strikethrough）：删除线样式，半透明浅灰白色文字，删除线厚度2px */
.markdown-content del,
.markdown-content s,
.markdown-content .strikethrough {
  text-decoration: line-through;
  color: rgba(245, 245, 247, 0.6);
  text-decoration-color: rgba(245, 245, 247, 0.6);
  text-decoration-thickness: 2px;
}

/** Markdown分隔线（hr）：无边框，高度1px，半透明白色背景，外边距1.5rem 0 */
.markdown-content hr {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 1.5rem 0;
}

/** 加载动画（@keyframes loading）：从左到中到右平移 */
@keyframes loading {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ========================================================================
   移动端适配 (Mobile Adaptation) - max-width: 768px
   ======================================================================== */

@media (max-width: 768px) {
  /* ===== 隐藏元素 ===== */
  /** 移动端隐藏快捷键提示：不占用屏幕空间 */
  .shortcut-hint {
    display: none !important;
  }
  /** 移动端隐藏快捷键部分：不占用屏幕空间 */
  .shortcuts-section {
    display: none !important;
  }

  /* ===== 基础布局：body和container ===== */
  /** body：无内边距，字号16px（防止iOS缩放），使用dvh动态视口高度，允许滚动 */
  body {
    padding: 0;
    font-size: 16px;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
  }
  /** body无内容模式：固定高度，禁止滚动 */
  body.no-content-mode {
    padding: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  /** container：全宽，无圆角/阴影/边框，透明背景，flex纵向布局，最小高度100dvh */
  .container {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  /** container无内容模式：固定高度，禁止滚动 */
  body.no-content-mode .container {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    background: transparent;
    overflow: hidden;
  }

  /* ===== 头部和内容区域 ===== */
  /** header：内边距0.75rem 1.25rem，顶部内边距支持iOS安全区域，透明背景，无边框，不缩小 */
  .header {
    padding: 0.75rem 1.25rem;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    background: transparent;
    border-bottom: none;
    flex-shrink: 0;
  }
  /** h1：字号1.25rem */
  h1 {
    font-size: 1.25rem;
  }
  /** content：内边距1rem 1.25rem，透明背景，flex 1填充剩余空间，允许滚动，纵向flex布局 */
  .content {
    padding: 1rem 1.25rem;
    background: transparent;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  /** feedback-group：flex纵向布局，填满高度 */
  .feedback-group {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  /** description：内边距1rem 1.25rem，圆角20px，字号0.95rem，下外边距1rem，不缩小 */
  .description {
    padding: 1rem 1.25rem;
    border-radius: 20px;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
  }

  /* ===== 选项和表单元素 ===== */
  /** option-item：内边距1rem 1.25rem，圆角16px，下外边距0.5rem */
  .option-item {
    padding: 1rem 1.25rem;
    border-radius: 16px;
    margin-bottom: 0.5rem;
  }
  /** option-item checkbox：宽高20px，右外边距0.75rem */
  .option-item input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
  }
  /** option-item label：字号0.95rem，行高1.4 */
  .option-item label {
    font-size: 0.95rem;
    line-height: 1.4;
  }
  /** feedback-textarea：最小高度100px，最大高度30vh，内边距1rem 1.25rem，圆角20px，字号16px（防止iOS缩放），行高1.5，不缩小 */
  .feedback-textarea {
    min-height: 100px;
    max-height: 30vh;
    padding: 1rem 1.25rem;
    border-radius: 20px;
    font-size: 16px;
    line-height: 1.5;
    flex-shrink: 0;
  }
  /** button-container：纵向flex，gap 0.75rem，上外边距1rem，不缩小 */
  .button-container {
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-shrink: 0;
  }
  /** btn：内边距0.875rem 1.5rem，字号0.9rem，圆角16px，无最小宽度，全宽 */
  .btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
    border-radius: 16px;
    min-width: auto;
    width: 100%;
  }

  /* ===== 快捷键提示和状态消息 ===== */
  /** shortcut-hint悬停/激活：文字变深，背景变亮，边框变深，opacity 1，阴影增强，向上平移1px */
  .shortcut-hint:hover,
  .shortcut-hint:active {
    color: rgba(245, 245, 247, 1);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    opacity: 1;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
  }
  /** shortcut-tooltip：顶部100%，左边0，上外边距6px，自适应宽度，字号0.6rem，内边距6px 10px，圆角5px，行高1.3 */
  .shortcut-tooltip {
    top: 100%;
    left: 0;
    margin-top: 6px;
    width: fit-content;
    font-size: 0.6rem;
    padding: 6px 10px;
    border-radius: 5px;
    line-height: 1.3;
  }
  /** keyboard-icon：字号0.45rem，opacity 0.3 */
  .keyboard-icon {
    font-size: 0.45rem;
    opacity: 0.3;
  }
  /** status-message：上外边距0.75rem，内边距0.75rem 1rem，圆角10px，字号0.9rem */
  .status-message {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
  }

  /* ===== 无内容页面 ===== */
  /** no-content-container：内边距2rem 1.25rem，最小高度300px */
  #no-content-container {
    padding: 2rem 1.25rem !important;
    min-height: 300px !important;
  }
  #no-content-container h2 {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  #no-content-container p {
    font-size: 0.95rem !important;
    margin-bottom: 1.5rem !important;
  }
  #no-content-container .button-container {
    margin-top: 1.5rem !important;
  }
  /** 进度条：宽度200px */
  #no-content-container > div:nth-child(4) {
    width: 200px !important;
  }

  /* ===== Markdown内容 ===== */
  /** markdown-content：字号0.95rem */
  .markdown-content {
    font-size: 0.95rem;
  }
  .markdown-content h1 {
    font-size: 1.3rem;
  }
  .markdown-content h2 {
    font-size: 1.15rem;
  }
  .markdown-content h3 {
    font-size: 1.05rem;
  }

  /* ===== 代码块 ===== */
  /** code-block-container：圆角16px，外边距1rem 0，禁用transform悬停效果 */
  .code-block-container {
    border-radius: 16px;
    margin: 1rem 0;
    transform: none !important;
  }
  .code-block-container:hover {
    transform: none !important;
  }
  /** markdown pre：内边距1rem 1.25rem，字号0.85rem，水平滚动，圆角16px */
  .markdown-content pre {
    padding: 1rem 1.25rem;
    font-size: 0.85rem;
    overflow-x: auto;
    border-radius: 16px;
  }
  /** markdown code：字号0.8rem，内边距0.1rem 0.3rem，圆角4px */
  .markdown-content code {
    font-size: 0.8rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
  }
  /** code-toolbar：顶部10px，右边10px，gap 8px，始终显示（opacity 1） */
  .code-toolbar {
    top: 10px;
    right: 10px;
    gap: 8px;
    opacity: 1;
  }
  /** language-label：内边距4px 8px，字号0.65rem，圆角6px */
  .language-label {
    padding: 4px 8px;
    font-size: 0.65rem;
    border-radius: 6px;
  }
  /** copy-button：内边距5px 10px，字号0.7rem，圆角8px */
  .copy-button {
    padding: 5px 10px;
    font-size: 0.7rem;
    border-radius: 8px;
  }
  /** 移动端隐藏代码块滚动条 */
  .markdown-content pre::-webkit-scrollbar,
  .code-block-container pre::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .markdown-content pre,
  .code-block-container pre {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  /* ===== 表格和列表 ===== */
  /** markdown table：字号0.85rem */
  .markdown-content table {
    font-size: 0.85rem;
  }
  /** markdown th/td：内边距0.5rem */
  .markdown-content th,
  .markdown-content td {
    padding: 0.5rem;
  }
  /** markdown ul/ol：左内边距1.5rem，外边距0.5rem 0 */
  .markdown-content ul,
  .markdown-content ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
  }
  /** markdown li：外边距0.375rem 0，左内边距1rem，字号0.95rem */
  .markdown-content ul li,
  .markdown-content ol li {
    margin: 0.375rem 0;
    padding-left: 1rem;
    font-size: 0.95rem;
  }
  /** markdown ul li::before：字号1.1em */
  .markdown-content ul li::before {
    font-size: 1.1em;
  }

  /** 嵌套列表：左内边距1rem */
  .markdown-content ul ul,
  .markdown-content ol ol,
  .markdown-content ul ol,
  .markdown-content ol ul {
    padding-left: 1rem;
  }

  /* ===== 任务标签栏（移动端优化） ===== */
  /** task-tabs-container：减少左右内边距，增加最小高度 */
  .task-tabs-container {
    padding: 0 1rem !important;
    min-height: 48px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /** task-tabs：调整内边距和间距 */
  .task-tabs {
    padding: 10px 0 !important;
    gap: 6px !important;
  }

  /** task-tab：增加字体大小，调整内边距和宽度 */
  .task-tab {
    font-size: 14px !important;
    padding: 8px 12px !important;
    min-width: 100px !important;
    max-width: 150px !important;
    gap: 8px !important;
  }

  /** task-tab-text：增加字体大小 */
  .task-tab-text {
    font-size: 14px !important;
  }

  /** task-tab-close：增大关闭按钮尺寸 */
  .task-tab-close {
    width: 16px !important;
    height: 16px !important;
    font-size: 13px !important;
  }

  /* ===== 设置面板 ===== */
  /** settings-content：最大宽度90%，宽度90% */
  .settings-content {
    max-width: 90%;
    width: 90%;
  }
  /** settings-header：内边距1.25rem 1.25rem 1rem */
  .settings-header {
    padding: 1.25rem 1.25rem 1rem;
  }
  /** settings-body：内边距1.25rem */
  .settings-body {
    padding: 1.25rem;
  }
  /** setting-label：最小高度40px */
  .setting-label {
    min-height: 40px;
  }
  /** setting-label checkbox：宽高18px */
  .setting-label input[type='checkbox'] {
    width: 18px;
    height: 18px;
  }
  /** btn：最小高度40px，内边距0.625rem 1rem */
  .btn {
    min-height: 40px;
    padding: 0.625rem 1rem;
  }
  /** settings-close-btn：最小宽高40px */
  .settings-close-btn {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ========================================================================
   小屏幕手机适配 (Small Screen Mobile) - max-width: 480px
   ======================================================================== */

@media (max-width: 480px) {
  /* ===== 基础布局（更紧凑） ===== */
  /** body：无内边距，使用dvh，允许滚动 */
  body {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
  }
  /** body无内容模式：固定高度，禁止滚动 */
  body.no-content-mode {
    padding: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  /** container：无margin/圆角/阴影/边框，透明背景，flex纵向，最小高度100dvh */
  .container {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  /** container无内容模式：固定高度，禁止滚动 */
  body.no-content-mode .container {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    background: transparent;
    overflow: hidden;
  }
  /** header：内边距0.75rem 1rem，顶部支持iOS安全区域，透明背景，不缩小 */
  .header {
    padding: 0.75rem 1rem;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    background: transparent;
    border-bottom: none;
    flex-shrink: 0;
  }
  /** h1：字号1.125rem */
  h1 {
    font-size: 1.125rem;
  }
  /** content：内边距0.75rem 1rem，透明背景，flex 1，允许滚动，纵向flex */
  .content {
    padding: 0.75rem 1rem;
    background: transparent;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  /** feedback-group：flex纵向，填满高度 */
  .feedback-group {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  /** description：内边距1rem 1.25rem，字号0.9rem */
  .description {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
  }
  /** feedback-textarea：最小高度80px，最大高度25vh，内边距0.875rem 1rem，字号16px，不缩小 */
  .feedback-textarea {
    min-height: 80px;
    max-height: 25vh;
    padding: 0.875rem 1rem;
    font-size: 16px;
    flex-shrink: 0;
  }
  /** btn：内边距0.75rem 1.25rem，字号0.85rem */
  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
  }

  /* ===== 无内容页面 ===== */
  /** no-content-container：内边距1.5rem 1rem，最小高度250px */
  #no-content-container {
    padding: 1.5rem 1rem !important;
    min-height: 250px !important;
  }
  #no-content-container h2 {
    font-size: 1.25rem !important;
  }
  #no-content-container p {
    font-size: 0.9rem !important;
  }
  /** 进度条：宽度160px，高度4px */
  #no-content-container > div:nth-child(4) {
    width: 160px !important;
    height: 4px !important;
  }

  /* ===== 列表（更紧凑） ===== */
  /** markdown ul/ol：左内边距1.25rem，外边距0.375rem 0 */
  .markdown-content ul,
  .markdown-content ol {
    padding-left: 1.25rem;
    margin: 0.375rem 0;
  }
  /** markdown li：外边距0.3rem 0，无左内边距，字号0.9rem */
  .markdown-content ul li,
  .markdown-content ol li {
    margin: 0.3rem 0;
    padding-left: 0;
    font-size: 0.9rem;
  }
  /** markdown ul li::before：字号1em */
  .markdown-content ul li::before {
    font-size: 1em;
  }
  /** 嵌套列表：左内边距1.25rem */
  .markdown-content ul ul,
  .markdown-content ol ol,
  .markdown-content ul ol,
  .markdown-content ol ul {
    padding-left: 1.25rem;
  }

  /* ===== 任务标签栏（小屏幕优化） ===== */
  /** task-tabs-container：更少的内边距 */
  .task-tabs-container {
    padding: 0 0.75rem !important;
    min-height: 44px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /** task-tabs：调整内边距 */
  .task-tabs {
    padding: 8px 0 !important;
    gap: 5px !important;
  }

  /** task-tab：略小的字体和尺寸 */
  .task-tab {
    font-size: 13px !important;
    padding: 6px 10px !important;
    min-width: 90px !important;
    max-width: 140px !important;
    gap: 6px !important;
  }

  /** task-tab-text：略小的字体 */
  .task-tab-text {
    font-size: 13px !important;
  }

  /** task-tab-close：保持触摸友好的尺寸 */
  .task-tab-close {
    width: 15px !important;
    height: 15px !important;
    font-size: 12px !important;
  }

  /* ===== 设置面板（小屏幕全屏优化） ===== */
  /** settings-panel：无内边距，拉伸对齐 */
  .settings-panel {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  /** settings-content：全宽，100dvh高度，无margin/圆角/边框，深色背景，flex纵向 */
  .settings-content {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: none;
    background: rgba(30, 30, 40, 0.98);
    display: flex;
    flex-direction: column;
  }
  /** settings-header：内边距1rem 1rem 0.75rem，sticky定位，顶部0，深色背景，层级10 */
  .settings-header {
    padding: 1rem 1rem 0.75rem;
    position: sticky;
    top: 0;
    background: rgba(30, 30, 40, 0.98);
    z-index: 10;
  }
  .settings-header h3 {
    font-size: 1.1rem;
  }
  /** settings-close-btn：宽高40px，圆形 */
  .settings-close-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
  }
  .settings-close-btn::before,
  .settings-close-btn::after {
    width: 16px;
    height: 2.5px;
  }
  /** settings-body：内边距1rem，底部支持iOS安全区域，flex 1，允许滚动，无最大高度 */
  .settings-body {
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    flex: 1;
    overflow-y: auto;
    max-height: none !important;
    height: auto;
  }
  .settings-main-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
  }
  .setting-group {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 12px;
  }
  .setting-group-title {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
  }
  .setting-subgroup {
    margin: 1rem 0;
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.01);
  }
  .setting-subgroup-title {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
  }
  .setting-item {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
    border-radius: 0;
    background: transparent;
    border: none;
  }
  /** setting-label：gap 0.75rem，无下外边距，最小高度44px（触摸友好），居中对齐，无内边距 */
  .setting-label {
    gap: 0.75rem;
    margin-bottom: 0;
    min-height: 44px;
    align-items: center;
    padding: 0;
  }
  /** setting-label checkbox：宽高20px（触摸友好） */
  .setting-label input[type='checkbox'] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }
  .setting-title {
    font-size: 1rem;
    line-height: 1.4;
  }
  .setting-description {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-left: 3rem;
  }
  .volume-slider {
    margin: 0 1rem;
    min-height: 44px;
  }
  .btn {
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    border-radius: 12px;
  }
  .status-info {
    padding: 0.75rem;
  }
  .status-row {
    margin-bottom: 0.75rem;
    min-height: 44px;
    align-items: center;
  }
  .status-row span {
    font-size: 0.95rem;
  }
}

/* ========================================================================
   任务标签页样式 (Task Tabs)
   ======================================================================== */

/**
 * 任务标签页容器（.task-tabs-container）：
 * 功能：包含所有任务标签的顶部横向容器，支持横向滚动，隐藏滚动条
 * 布局：flex横向，gap 0，内边距0 1.75rem，最小高度44px，横向滚动，禁止纵向滚动
 * 视觉：深色背景，底边框
 * 滚动条：隐藏但保留滚动功能（Firefox/IE/Edge/WebKit）
 */
.task-tabs-container {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 1.75rem;
  min-height: 44px;
  background: rgba(45, 45, 60, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/** task-tabs-container滚动条（WebKit）：隐藏 */
.task-tabs-container::-webkit-scrollbar {
  display: none;
}

/**
 * 任务标签列表（.task-tabs）：
 * 功能：任务标签的flex容器，支持横向滚动
 * 布局：flex横向，gap 8px，flex 1填充，内边距8px 0，横向滚动
 * 滚动条：细滚动条（Firefox），紫色轨道和滑块（WebKit）
 */
.task-tabs {
  display: flex;
  gap: 8px;
  flex: 1;
  padding: 8px 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.2) transparent;
}
/** task-tabs滚动条样式（WebKit）：高度5px */
.task-tabs::-webkit-scrollbar {
  height: 5px;
}
/** 滚动条轨道：半透明黑色，圆角3px */
.task-tabs::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
/** 滚动条滑块：半透明紫色，圆角3px，过渡动画 */
.task-tabs::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.25);
  border-radius: 3px;
  transition: background 0.2s;
}
/** 滚动条滑块悬停：颜色变深 */
.task-tabs::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.4);
}

/**
 * 任务标签（.task-tab）：
 * 功能：单个任务标签，显示任务简要信息和关闭按钮
 * 布局：flex横向，gap 10px，内边距7px 14px，圆角8px，最小宽度110px，最大宽度200px，相对定位
 * 视觉：深色背景，浅边框，浅色文字，不换行
 * 交互：cursor pointer，过渡动画all 0.2s
 * 状态：hover时背景变亮、边框变紫、文字变深；active时背景变紫、文字变白、字重500
 */
.task-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: rgba(40, 40, 55, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: rgba(245, 245, 247, 0.7);
  white-space: nowrap;
  min-width: 110px;
  max-width: 200px;
  position: relative;
  box-shadow: none;
  transition: all 0.2s;
}
/** task-tab悬停：背景变亮，边框变紫，文字变深 */
.task-tab:hover {
  background: rgba(50, 50, 65, 0.5);
  border-color: rgba(139, 92, 246, 0.15);
  color: rgba(245, 245, 247, 0.9);
}
/** task-tab激活：背景变紫，文字变白，边框变紫，字重500 */
.task-tab.active {
  background: rgba(139, 92, 246, 0.15);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(139, 92, 246, 0.3);
  font-weight: 500;
}

/**
 * 任务标签文字（.task-tab-text）：
 * 功能：任务标签的文字部分，显示任务简要信息
 * 布局：flex 1填充，隐藏溢出，文字溢出显示省略号
 * 排版：字号13px，字重500，字间距0.01em
 * 激活状态：字重600，文字颜色白色
 */
.task-tab-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
/** 激活标签文字：字重600，白色 */
.task-tab.active .task-tab-text {
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
}

/**
 * 任务标签关闭按钮（.task-tab-close）：
 * 功能：关闭单个任务的按钮
 * 布局：flex居中，宽高14px，圆形，不缩小
 * 视觉：透明背景，字号12px，opacity 0.4，浅色
 * 交互：悬停时opacity 1，颜色变红；激活状态下opacity 0.6，颜色变紫
 */
.task-tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.4;
  color: rgba(245, 245, 247, 0.6);
}
/** task-tab-close悬停：opacity 1，颜色变红 */
.task-tab-close:hover {
  opacity: 1;
  color: rgba(239, 68, 68, 1);
}
/** 激活标签关闭按钮：opacity 0.6，颜色变紫 */
.task-tab.active .task-tab-close {
  opacity: 0.6;
  color: rgba(139, 92, 246, 1);
}
/** 激活标签关闭按钮悬停：opacity 1，颜色变红 */
.task-tab.active .task-tab-close:hover {
  opacity: 1;
  color: rgba(239, 68, 68, 1);
}

/**
 * 新任务按钮（.task-tab-new）：
 * 功能：创建新任务的按钮
 * 布局：flex居中，宽32px高28px，圆角6px，不缩小，相对定位
 * 视觉：深色背景，浅边框，浅色文字，字号16px
 * 交互：cursor pointer
 */
.task-tab-new {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  background: rgba(45, 45, 60, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  color: rgba(245, 245, 247, 0.6);
  font-size: 16px;
  flex-shrink: 0;
}

/** task-tab-new悬停：背景变深，文字变亮 */
.task-tab-new:hover {
  background: rgba(45, 45, 60, 0.7);
  color: rgba(245, 245, 247, 0.8);
}

/**
 * 任务计数徽章（.task-count-badge）：
 * 功能：显示任务数量的红色徽章，带脉冲动画
 * 布局：绝对定位，顶部-4px右侧-4px，最小宽18px高18px，内边距0 4px，圆角9px，flex居中
 * 视觉：红色背景，白色文字，字号11px，粗体
 * 动画：pulse-badge 2s无限循环（0%/100%缩放1，50%缩放1.1）
 */
.task-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #dc3545;
  color: white;
  border-radius: 9px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-badge 2s infinite;
}
/** 脉冲徽章动画：0%/100%缩放1，50%缩放1.1 */
@keyframes pulse-badge {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/**
 * 倒计时圆环（.countdown-ring）：
 * 功能：显示任务倒计时的圆环进度条
 * 布局：宽高22px，inline-flex居中，相对定位，左margin auto，不缩小
 * 视觉：透明背景，无边框，无阴影
 * SVG：绝对定位，旋转-90度（从12点开始），circle有过渡动画
 * 激活状态：circle有投影滤镜
 */
.countdown-ring {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  background: transparent !important;
  border: none;
  box-shadow: none;
}
/** countdown-ring SVG：绝对定位，填满容器，旋转-90度（从12点开始） */
.countdown-ring svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg) !important;
}
/** countdown-ring SVG circle：过渡动画（stroke-dashoffset 0.3s，stroke 0.2s） */
.countdown-ring svg circle {
  transition: stroke-dashoffset 0.3s ease, stroke 0.2s;
}
/** 激活标签倒计时圆环circle：投影滤镜 */
.task-tab.active .countdown-ring svg circle {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
}

/**
 * 倒计时数字（.countdown-ring .countdown-number）：
 * 功能：倒计时圆环中央的数字
 * 布局：绝对定位，顶部52%左侧50%居中，flex居中，层级2
 * 排版：字号7px，字重600，等宽字体，行高1，紫色
 * 激活状态：白色
 */
.countdown-ring .countdown-number {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 7px;
  font-weight: 600;
  color: rgba(139, 92, 246, 0.95);
  font-family: var(--font-mono);
  z-index: 2;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
/** 激活标签倒计时数字：白色 */
.task-tab.active .countdown-ring .countdown-number {
  color: rgba(255, 255, 255, 0.9);
}

/* ===== 任务标签移动端适配（@media max-width: 768px） ===== */
@media (max-width: 768px) {
  /** task-tabs-container：内边距8px 12px 0 12px，外边距-16px -16px 12px -16px */
  .task-tabs-container {
    padding: 8px 12px 0 12px;
    margin: -16px -16px 12px -16px;
  }
  /** task-tab：最小宽100px，最大宽150px，内边距6px 12px，字号12px */
  .task-tab {
    min-width: 100px;
    max-width: 150px;
    padding: 6px 12px;
    font-size: 12px;
  }
  /** task-tab-new：宽36px高32px，字号16px */
  .task-tab-new {
    width: 36px;
    height: 32px;
    font-size: 16px;
  }
}

/* ========================================================================
   新任务提示动画 (New Task Hint Animations)
   ======================================================================== */

/** 从右侧滑入动画：从右侧100%透明0，到居中位置不透明1 */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/** 向上淡出动画：从居中位置不透明1，到向上20px透明0 */
@keyframes fadeOutUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-20px);
    opacity: 0;
  }
}

/** 新任务提示样式（#new-task-hint）：由JavaScript动态添加，这里提供默认字体 */
#new-task-hint {
  font-family: var(--font-sans);
}

/* ===== 新任务提示移动端适配（@media max-width: 768px） ===== */
@media (max-width: 768px) {
  /** new-task-hint：顶部10px，右侧10px，左侧10px，字号12px，内边距10px 16px */
  #new-task-hint {
    top: 10px !important;
    right: 10px !important;
    left: 10px !important;
    font-size: 12px !important;
    padding: 10px 16px !important;
  }
}

/* ========================================================================
   浅色主题 - 全局颜色覆盖 (Light Theme Color Overrides)
   ======================================================================== */

/**
 * 浅色主题颜色覆盖说明：
 *   由于部分元素使用了硬编码的深色主题颜色（如 #f5f5f7），
 *   这里添加覆盖规则以确保浅色主题下显示正确的颜色。
 *
 * 覆盖策略：
 *   - 主文本颜色：#f5f5f7 → var(--text-primary)
 *   - 次级文本颜色：rgba(245, 245, 247, 0.x) → var(--text-secondary)
 *   - 背景颜色：深色 → var(--bg-primary/secondary/tertiary)
 *   - 边框颜色：rgba(255, 255, 255, 0.x) → var(--border-primary)
 */

[data-theme='light'] body,
[data-theme='light'] .container,
[data-theme='light'] h1,
[data-theme='light'] h2,
[data-theme='light'] h3,
[data-theme='light'] h4,
[data-theme='light'] h5,
[data-theme='light'] h6,
[data-theme='light'] p,
[data-theme='light'] span,
[data-theme='light'] label,
[data-theme='light'] input,
[data-theme='light'] textarea,
[data-theme='light'] select,
[data-theme='light'] button,
[data-theme='light'] .header-title,
[data-theme='light'] .settings-title,
[data-theme='light'] .settings-subtitle,
[data-theme='light'] .settings-item-label,
[data-theme='light'] .settings-item-value,
[data-theme='light'] .markdown-content,
[data-theme='light'] .code-block,
[data-theme='light'] .status-text,
[data-theme='light'] .task-tab,
[data-theme='light'] .task-tab-label,
[data-theme='light'] .countdown-text,
[data-theme='light'] .option-btn,
[data-theme='light'] .message-content,
[data-theme='light'] .feedback-textarea,
[data-theme='light'] .submit-btn,
[data-theme='light'] .action-btn,
[data-theme='light'] .notification-toast {
  color: var(--text-primary);
}

/* 浅色主题 - 次级文本颜色 */
[data-theme='light'] .text-secondary,
[data-theme='light'] .hint,
[data-theme='light'] .placeholder,
[data-theme='light'] .muted,
[data-theme='light'] ::placeholder {
  color: var(--text-secondary);
}

/* 浅色主题 - 背景颜色 */
[data-theme='light'] body {
  background: var(--bg-primary); /* Light Gray #e8e6dc - 页面底层 */
}

[data-theme='light'] .container {
  background: var(--bg-secondary); /* Light #faf9f5 - 温暖内容卡片 */
  border-color: var(--border-primary);
  box-shadow: var(--shadow-lg); /* 精致阴影让内容浮出 */
}

[data-theme='light'] .header {
  background: var(--bg-tertiary); /* #f2f1ec - Header */
  border-color: var(--border-primary);
}

[data-theme='light'] .settings-panel-content {
  background: var(--bg-elevated);
  border-color: var(--border-primary);
}

[data-theme='light'] .settings-item {
  border-color: var(--border-secondary);
}

[data-theme='light'] .settings-item:hover {
  background: var(--bg-hover);
}

[data-theme='light'] .feedback-textarea,
[data-theme='light'] textarea.feedback-textarea {
  background: var(--bg-input, #e8e6dc) !important; /* Light Gray - 有区分度 */
  border-color: var(--border-primary) !important; /* Mid Gray 边框 */
  color: var(--text-primary) !important; /* Dark 文字 */
}

[data-theme='light'] .feedback-textarea::placeholder,
[data-theme='light'] textarea::placeholder {
  color: #91918d !important; /* Cloud Medium 占位符 */
}

[data-theme='light'] .option-btn {
  background: var(--accent-secondary); /* Kraft 米黄棕 */
  border-color: var(--accent-primary); /* Book Cloth 边框 */
  color: var(--text-primary);
}

[data-theme='light'] .option-btn:hover {
  background: var(--accent-hover); /* 稍深的 Book Cloth */
  border-color: var(--accent-primary);
  color: #fff;
}

[data-theme='light'] .option-btn.selected {
  background: var(--accent-primary); /* Book Cloth 选中 */
  border-color: var(--accent-primary);
  color: #fff;
}

[data-theme='light'] .action-btn {
  background: var(--accent-secondary); /* Kraft 米黄棕 */
  border-color: var(--accent-primary); /* Book Cloth 边框 */
  color: var(--text-primary);
}

[data-theme='light'] .action-btn:hover {
  background: var(--accent-hover); /* 稍深的 Book Cloth */
  border-color: var(--accent-primary);
  color: #fff;
}

/* 浅色主题 - 标签栏容器 */
[data-theme='light'] .task-tabs-container {
  background: var(--bg-secondary); /* 浅色背景 */
  border-bottom-color: var(--border-primary);
}

/* 浅色主题 - 标签栏滚动条 */
[data-theme='light'] .task-tabs::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme='light'] .task-tabs::-webkit-scrollbar-thumb {
  background: var(--text-muted);
}

[data-theme='light'] .task-tabs::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* 浅色主题 - 任务标签页 */
[data-theme='light'] .task-tab {
  background: var(--bg-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

[data-theme='light'] .task-tab:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

[data-theme='light'] .task-tab.active {
  background: var(--accent-primary); /* Book Cloth 棕色 */
  border-color: var(--accent-primary);
  color: white;
}

/* 浅色主题 - 标签关闭按钮 */
[data-theme='light'] .task-tab-close {
  color: var(--text-secondary);
}

[data-theme='light'] .task-tab-close:hover {
  color: #ef4444; /* 红色 */
}

[data-theme='light'] .task-tab.active .task-tab-close {
  color: rgba(255, 255, 255, 0.8);
}

[data-theme='light'] .task-tab.active .task-tab-close:hover {
  color: #ffffff;
}

/* 浅色主题 - 倒计时圆环（非激活标签） */
[data-theme='light'] .countdown-ring svg circle {
  stroke: #d4a27f; /* Kraft 米黄棕色 */
  stroke-opacity: 1;
}

/* 浅色主题 - 倒计时圆环（激活标签） */
[data-theme='light'] .task-tab.active .countdown-ring svg circle {
  stroke: #fafaf7; /* Ivory Light 象牙白 */
  stroke-opacity: 1;
}

/* 浅色主题 - 倒计时数字（非激活标签） */
[data-theme='light'] .countdown-ring .countdown-number {
  color: #d4a27f; /* Kraft 米黄棕色，与圆环颜色一致 */
  font-weight: 600;
}

/* 浅色主题 - 倒计时数字（激活标签） */
[data-theme='light'] .task-tab.active .countdown-ring .countdown-number {
  color: #fafaf7; /* Ivory Light 象牙白 */
  font-weight: 600;
}

/* 浅色主题 - 新任务按钮 */
[data-theme='light'] .task-tab-new {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
  color: var(--text-secondary);
}

[data-theme='light'] .task-tab-new:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* 浅色主题 - Markdown 内容 */
[data-theme='light'] .markdown-content {
  color: var(--text-primary);
}

/* 浅色主题 - Markdown 标题（覆盖基础样式中的硬编码颜色） */
[data-theme='light'] .markdown-content h1,
[data-theme='light'] .markdown-content h2,
[data-theme='light'] .markdown-content h3,
[data-theme='light'] .markdown-content h4,
[data-theme='light'] .markdown-content h5,
[data-theme='light'] .markdown-content h6 {
  color: var(--text-primary);
}

/* 浅色主题 - Markdown 段落 */
[data-theme='light'] .markdown-content p {
  color: var(--text-primary);
}

/* 浅色主题 - Markdown 列表 */
[data-theme='light'] .markdown-content ul,
[data-theme='light'] .markdown-content ol {
  color: var(--text-primary);
}

[data-theme='light'] .markdown-content li {
  color: var(--text-primary);
}

/* 浅色主题 - Markdown 列表标记 */
[data-theme='light'] .markdown-content ul li::marker,
[data-theme='light'] .markdown-content ol li::marker {
  color: var(--text-secondary);
}

[data-theme='light'] .markdown-content a {
  color: var(--primary-600);
}

/* 浅色主题 - 内联代码：使用 Anthropic 品牌色 */
[data-theme='light'] .markdown-content code {
  background: var(--bg-tertiary);
  color: #c7442a; /* Anthropic 品牌 Orange/红色，适合内联代码 */
  border: 1px solid var(--border-primary);
}

/* 浅色主题 - 代码块 pre (浅色背景) */
[data-theme='light'] .markdown-content pre {
  background: #f5f2e9 !important; /* Anthropic Light - 温暖的米白色 */
  border: 1px solid var(--border-primary);
}

/**
 * 浅色主题 - 代码块内的 code 标签
 *
 * 功能说明：
 *   浅色模式下代码块内部代码样式覆盖。
 *
 * 视觉设计：
 *   - 背景：透明（继承代码块容器背景）
 *   - 文字颜色：#141413（深灰色，确保在浅色背景上的可读性）
 *   - 边框：无
 *   - 文字阴影：无（深色模式下有阴影增强可读性，浅色模式不需要）
 *
 * 注意事项：
 *   使用 !important 确保覆盖基础样式和内联样式
 */
[data-theme='light'] .markdown-content pre code {
  background: transparent !important;
  color: #141413 !important; /* 默认深色文字 */
  border: none !important;
  text-shadow: none !important; /* 浅色模式不需要文字阴影 */
}

/* 浅色主题 - 代码块容器内的 code 标签 */
[data-theme='light'] .code-block-container code {
  background: transparent !important;
  color: #141413 !important;
  border: none !important;
}

[data-theme='light'] .markdown-content blockquote {
  border-left-color: var(--primary-500);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

[data-theme='light'] .markdown-content table {
  border-color: var(--border-primary);
}

[data-theme='light'] .markdown-content th,
[data-theme='light'] .markdown-content td {
  border-color: var(--border-primary);
  color: var(--text-primary);
}

/* 浅色主题表格表头 - 使用品牌强调色作为背景 */
[data-theme='light'] .markdown-content th {
  background: rgba(217, 119, 87, 0.12); /* Orange 淡化作为背景 */
  color: var(--text-primary);
  font-weight: 600;
}

/* 浅色主题删除线 - 使用深色确保可见 */
[data-theme='light'] .markdown-content del,
[data-theme='light'] .markdown-content s,
[data-theme='light'] .markdown-content .strikethrough {
  color: var(--text-tertiary); /* Mid Gray - 淡化文字 */
  text-decoration-color: var(--text-secondary); /* 深色删除线 */
}

/* 浅色主题 - 代码块容器 (浅色背景) */
[data-theme='light'] .code-block-container {
  background: #f5f2e9 !important; /* Anthropic Light - 温暖的米白色 */
  border: 1px solid var(--border-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
}

[data-theme='light'] .code-block-container:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.05);
}

[data-theme='light'] .code-block {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}

[data-theme='light'] .code-toolbar {
  /* 移除工具栏背景，避免语言标签与复制按钮之间出现“透明黑块”视觉瑕疵 */
  background: transparent;
  border-color: var(--border-primary);
  color: var(--text-secondary);
}

[data-theme='light'] .code-toolbar .lang-label {
  color: var(--text-secondary);
}

[data-theme='light'] .code-toolbar .copy-btn {
  color: var(--text-secondary);
}

[data-theme='light'] .code-toolbar .copy-btn:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.05);
}

/* 浅色主题 - 通知 Toast */
[data-theme='light'] .notification-toast {
  background: var(--bg-elevated);
  border-color: var(--border-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}

/* 浅色主题 - 设置按钮和主题按钮 */
[data-theme='light'] .settings-btn,
[data-theme='light'] .theme-toggle-btn {
  background: var(--bg-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

[data-theme='light'] .settings-btn:hover,
[data-theme='light'] .theme-toggle-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

/* 浅色主题 - 滚动条 */
[data-theme='light'] ::-webkit-scrollbar-thumb {
  background: var(--text-muted);
}

[data-theme='light'] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* 浅色主题 - 输入框焦点状态 */
[data-theme='light'] input:focus,
[data-theme='light'] textarea:focus,
[data-theme='light'] select:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

/* 浅色主题 - 状态栏 */
[data-theme='light'] .status-bar {
  background: var(--bg-secondary);
  border-color: var(--border-primary);
  color: var(--text-secondary);
}

/* 浅色主题 - 进度条 */
[data-theme='light'] .progress-bar {
  background: var(--bg-tertiary);
}

/**
 * 浅色主题 - 无内容进度条容器
 *
 * 功能说明：
 *   浅色模式下"无有效内容"页面的加载进度条容器样式。
 *
 * 视觉设计：
 *   - 阴影：无（深色模式有内阴影增加层次感，浅色模式不需要）
 *   - 背景：rgba(0, 0, 0, 0.05)（极浅的灰色，与浅色背景融合）
 *
 * 与深色模式的对比：
 *   深色模式使用渐变背景和内阴影创造凹陷效果，
 *   浅色模式使用扁平化设计，与整体浅色风格一致。
 */
[data-theme='light'] .no-content-progress {
  box-shadow: none; /* 去除内阴影，保持扁平化设计 */
  background: rgba(0, 0, 0, 0.05); /* 极浅灰色背景 */
}

/* ========================================================================
   浅色主题 - 无内容加载进度条
   ========================================================================
   颜色：#E3DACC（奶油米色）- 与整体浅色主题协调
   ======================================================================== */
[data-theme='light'] .no-content-progress-bar {
  background: #e3dacc; /* 奶油米色 - Claude 调色板的温暖色调 */
}

/* ========================================================================
   浅色主题 - 设置面板复选框
   ========================================================================

   设计理念：
     浅色模式下复选框使用奶油米色（#E3DACC），与整体浅色主题协调。
     选中状态添加柔和的发光阴影，提供视觉反馈。

   注意：accent-color 决定复选框的填充色，
         浏览器会自动计算勾勾颜色以确保对比度。
   ======================================================================== */
[data-theme='light'] .setting-label input[type='checkbox'] {
  accent-color: #e3dacc; /* 奶油米色 - 与浅色主题协调 */
}

[data-theme='light'] .setting-label input[type='checkbox']:checked {
  box-shadow: 0 0 10px rgba(227, 218, 204, 0.4); /* 选中时奶油色发光阴影 */
}

/* 浅色主题 - 选项列表复选框（与设置面板复选框保持一致） */
[data-theme='light'] .option-item input[type='checkbox'] {
  accent-color: #e3dacc; /* 奶油米色 */
}

/* ========================================================================
   浅色主题 - 音量滑块样式
   ========================================================================

   设计理念：
     浅色模式下使用 Claude 调色板中的温暖色系（Kraft 色），
     与整体米色主题协调，并通过浏览器原生 accent-color 实现轨道颜色区分。

   颜色方案：
     - 主色：#D4A27F（Kraft - 温暖棕色）
     - 渐变深色：#C89B70
     - 轨道区分：由 accent-color 自动处理

   浏览器兼容：
     - WebKit (Chrome/Safari/Edge): ::-webkit-slider-thumb
     - Firefox: ::-moz-range-thumb
   ======================================================================== */

/* 浅色主题 - 音量滑块轨道（使用原生 accent-color 实现颜色区分） */
[data-theme='light'] .volume-slider {
  accent-color: #d4a27f; /* Kraft 色 - 浏览器自动处理已填充/未填充轨道颜色 */
}

/* 浅色主题 - 音量滑块滑块（WebKit 浏览器） */
[data-theme='light'] .volume-slider::-webkit-slider-thumb {
  background: linear-gradient(135deg, #d4a27f, #c89b70); /* Kraft 渐变 */
  box-shadow: 0 2px 8px rgba(212, 162, 127, 0.4), /* 主阴影 */ 0 0 0 2px rgba(0, 0, 0, 0.05); /* 微弱边框阴影 */
}

/* 浅色主题 - 音量滑块滑块悬停效果（WebKit） */
[data-theme='light'] .volume-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 4px 15px rgba(212, 162, 127, 0.5), /* 增强主阴影 */ 0 0 0 3px rgba(0, 0, 0, 0.05),
    /* 加宽边框阴影 */ 0 0 20px rgba(212, 162, 127, 0.3); /* 外发光效果 */
}

/* 浅色主题 - 音量滑块滑块（Firefox 浏览器） */
[data-theme='light'] .volume-slider::-moz-range-thumb {
  background: linear-gradient(135deg, #d4a27f, #c89b70); /* Kraft 渐变 */
  border: none;
  box-shadow: 0 2px 8px rgba(212, 162, 127, 0.4); /* 主阴影 */
}

/* 浅色主题 - 音量值百分比显示 */
[data-theme='light'] .volume-value {
  color: #b0aea5; /* Mid Gray - 柔和的灰色 */
  background: linear-gradient(135deg, #b0aea5, rgba(176, 174, 165, 0.8)); /* 灰色渐变 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none; /* 浅色模式无文字阴影 */
}

/* ========================================================================
   浅色主题 - 版本信息样式
   ========================================================================

   设计理念：
     浅色模式下使用深色半透明文字，与浅色背景形成柔和对比。

   颜色方案：
     - 分隔线：rgba(0, 0, 0, 0.08)
     - 项目名称：rgba(20, 20, 19, 0.6)
     - 版本号：rgba(20, 20, 19, 0.5)
     - GitHub 链接：rgba(20, 20, 19, 0.6)
   ======================================================================== */

[data-theme='light'] .version-info {
  border-top-color: rgba(0, 0, 0, 0.08); /* 浅色分隔线 */
}

[data-theme='light'] .version-name {
  color: rgba(20, 20, 19, 0.6); /* 半透明深色 */
}

[data-theme='light'] .version-number {
  color: rgba(20, 20, 19, 0.5); /* 更浅的半透明深色 */
}

[data-theme='light'] .github-link {
  background: rgba(0, 0, 0, 0.03); /* 浅色背景 */
  color: rgba(20, 20, 19, 0.6); /* 半透明深色文字 */
  border-color: rgba(0, 0, 0, 0.08); /* 浅色边框 */
  text-decoration: none;
}

[data-theme='light'] .github-link:hover {
  background: rgba(0, 0, 0, 0.06); /* 悬停：加深背景 */
  color: rgba(20, 20, 19, 0.9); /* 悬停：加深文字 */
  border-color: rgba(0, 0, 0, 0.12);
  text-decoration: none;
}

[data-theme='light'] .github-link:focus,
[data-theme='light'] .github-link:active {
  text-decoration: none;
  outline: none;
}

/* 浅色主题 - 倒计时 */
[data-theme='light'] .countdown-ring {
  stroke: var(--border-primary);
}

[data-theme='light'] .countdown-text {
  color: var(--text-primary);
}

/* 浅色主题 - 按钮组件 (btn 系列) */
[data-theme='light'] .btn {
  color: #fff; /* 统一白色文字 */
}

/* ========================================================================
   深色主题按钮颜色配置
   ========================================================================

   设计理念：
     在深色模式下，三个功能按钮采用不同色调以区分功能优先级。
     颜色递进：灰白 → 灰蓝 → 亮蓝（次要 → 辅助 → 主要）

   颜色方案（来自 Claude 设计系统）：
     - 插入代码：#CACADB（灰白色）- 辅助功能，最低视觉优先级
     - 上传图片：#99B6D3（灰蓝色）- 辅助功能，中等视觉优先级
     - 发送请求：#61AAF2（亮蓝色）- 主要操作，最高视觉优先级

   渐变效果：使用 linear-gradient(135deg) 增加层次感
   悬停效果：渐变颜色整体提亮，提供视觉反馈
   ======================================================================== */

/* 深色模式 - 插入代码按钮 - 灰白色（最低优先级辅助功能） */
#insert-code-btn {
  background: linear-gradient(135deg, #cacadb, #babacb) !important; /* 灰白色渐变 */
  border-color: #cacadb !important;
  color: #1a1a1c !important; /* 深色文字确保对比度，符合 WCAG 标准 */
}

#insert-code-btn:hover {
  background: linear-gradient(135deg, #dadaeb, #cacadb) !important; /* 悬停：整体提亮 */
  border-color: #dadaeb !important;
}

/* 深色模式 - 上传图片按钮 - 灰蓝色（中等优先级辅助功能） */
#upload-image-btn {
  background: linear-gradient(135deg, #99b6d3, #89a6c3) !important; /* 灰蓝色渐变 */
  border-color: #99b6d3 !important;
  color: #1a1a1c !important; /* 深色文字确保对比度 */
}

#upload-image-btn:hover {
  background: linear-gradient(135deg, #a9c6e3, #99b6d3) !important; /* 悬停：整体提亮 */
  border-color: #a9c6e3 !important;
}

/* 深色模式 - 发送请求按钮 - 亮蓝色（最高优先级主要操作） */
#submit-btn {
  background: linear-gradient(135deg, #61aaf2, #519ae2) !important; /* 亮蓝色渐变，强调主要操作 */
  border-color: #61aaf2 !important;
  color: #fff !important; /* 白色文字确保可读性 */
}

#submit-btn:hover {
  background: linear-gradient(135deg, #71baf2, #61aaf2) !important; /* 悬停：整体提亮 */
  border-color: #71baf2 !important;
}

/* ========================================================================
   浅色主题按钮颜色配置
   ========================================================================

   设计理念：
     在浅色模式下，按钮采用 Claude 调色板中的自然色系，
     与整体米色/奶油色背景形成协调的视觉层次。

   颜色方案：
     - 插入代码：#B0AEA5（Mid Gray）- 柔和的灰色
     - 上传图片：#6A9BCC（Blue）- 清爽的蓝色
     - 发送请求：#D97757（Orange）- 温暖的橙红色，作为主要 CTA

   悬停效果：颜色加深约 10%，提供点击反馈
   ======================================================================== */

/* 浅色模式 - 插入代码按钮 - Mid Gray（柔和辅助功能） */
[data-theme='light'] #insert-code-btn {
  background: #b0aea5 !important; /* Mid Gray - 与浅色主题协调 */
  border-color: #b0aea5 !important;
  color: #fff !important; /* 白色文字 */
}

[data-theme='light'] #insert-code-btn:hover {
  background: #9a9890 !important; /* 悬停：加深约 10% */
  border-color: #9a9890 !important;
}

/* 浅色模式 - 上传图片按钮 - Blue（清爽辅助功能） */
[data-theme='light'] #upload-image-btn {
  background: #6a9bcc !important; /* Blue - 与浅色主题形成对比 */
  border-color: #6a9bcc !important;
  color: #fff !important; /* 白色文字 */
}

[data-theme='light'] #upload-image-btn:hover {
  background: #5a8bbc !important; /* 悬停：加深约 10% */
  border-color: #5a8bbc !important;
}

/* 浅色模式 - 发送请求按钮 - Orange（温暖的主要 CTA） */
[data-theme='light'] #submit-btn {
  background: #d97757 !important; /* Orange - 作为主要 CTA 引人注目 */
  border-color: #d97757 !important;
  color: #fff !important; /* 白色文字 */
}

[data-theme='light'] #submit-btn:hover {
  background: #c56a4c !important; /* 悬停：加深为更深的橙色 */
  border-color: #c56a4c !important;
}

/* 浅色主题 - 次级按钮通用样式（Book Cloth 棕红色） */
[data-theme='light'] .btn-secondary {
  background: #cc785c; /* Book Cloth - Claude 调色板的温暖棕红色 */
  border-color: #cc785c;
  color: #fff; /* 白色文字 */
}

[data-theme='light'] .btn-secondary:hover {
  background: #b86a50; /* 悬停：加深约 10% */
  border-color: #b86a50;
}

/* 浅色主题 - 主按钮使用 Orange */
[data-theme='light'] .btn-primary {
  background: #d97757; /* Orange */
  border-color: #d97757;
  color: #fff;
}

[data-theme='light'] .btn-primary:hover {
  background: #c56a4c; /* 深 Orange */
  border-color: #c56a4c;
}

/* 浅色主题 - 代码标签 */
[data-theme='light'] code {
  background: var(--bg-tertiary, #e8e6dc) !important; /* Light Gray */
  color: var(--accent-primary, #d97757) !important; /* Orange 文字 */
  border-color: var(--border-primary) !important;
}

/* 浅色主题 - 内容卡片区域 */
[data-theme='light'] .container {
  background: var(--bg-secondary) !important; /* 纯白 - 干净明亮 */
  border-color: var(--border-primary) !important;
  box-shadow: var(--shadow-lg) !important; /* 精致阴影 */
}

[data-theme='light'] .message-content,
[data-theme='light'] .markdown-content {
  background: #f2f1ec !important; /* 介于 Light 和 Light Gray 之间 */
  border-color: var(--border-primary) !important;
}

/* 浅色主题 - 设置按钮和主题按钮 */
[data-theme='light'] .settings-btn,
[data-theme='light'] .theme-toggle-btn {
  background: var(--bg-tertiary, #e8e6dc) !important; /* Light Gray */
  border-color: var(--border-primary) !important;
  color: var(--text-primary, #141413) !important; /* Dark */
}

[data-theme='light'] .settings-btn:hover,
[data-theme='light'] .theme-toggle-btn:hover {
  background: var(--bg-hover) !important; /* Orange 淡化 */
  border-color: var(--border-hover) !important;
}

/* 浅色主题 - 标题栏/标签栏 */
[data-theme='light'] .header,
[data-theme='light'] header {
  background: var(--bg-tertiary) !important; /* Light Gray #e8e6dc - 微妙分隔 */
  border-color: var(--border-primary) !important;
}

/* ========================================================================
   浅色主题 - 代码块语法高亮 (浅色背景版)
   ======================================================================== */

/*
 * 浅色背景下的语法高亮配色方案
 * 基于 Anthropic 品牌色 + VS Code Light 主题风格
 */

/**
 * 覆盖 Prism.js 内联样式 - 通用规则
 *
 * 功能说明：
 *   覆盖 Prism.js 语法高亮生成的内联样式中的文字阴影。
 *   深色模式下，代码有轻微的文字阴影（0 1px 2px）增强可读性；
 *   浅色模式下，文字阴影会降低可读性，因此需要移除。
 *
 * 技术说明：
 *   Prism.js 使用内联 style 属性应用语法高亮颜色，
 *   因此需要使用 !important 来覆盖继承的 text-shadow。
 *
 * 选择器说明：
 *   - span[style]：选择所有带有内联样式的 span（语法高亮 token）
 */
[data-theme='light'] .markdown-content pre code span[style],
[data-theme='light'] .code-block-container pre code span[style] {
  text-shadow: none !important; /* 浅色模式移除文字阴影，提升可读性 */
}

/* 关键字 (def, return, if, else 等) - Book Cloth 棕红色 */
[data-theme='light'] .markdown-content pre code span[style*='66D9EF'],
[data-theme='light'] .code-block-container pre code span[style*='66D9EF'] {
  color: #cc785c !important; /* Book Cloth */
}

/* 函数名 - Blue */
[data-theme='light'] .markdown-content pre code span[style*='A6E22E'],
[data-theme='light'] .code-block-container pre code span[style*='A6E22E'] {
  color: #0066cc !important; /* Blue - 函数名 */
}

/* 字符串 - Green */
[data-theme='light'] .markdown-content pre code span[style*='E6DB74'],
[data-theme='light'] .code-block-container pre code span[style*='E6DB74'] {
  color: #2e7d32 !important; /* Green - 字符串 */
}

/* 数字 - Purple */
[data-theme='light'] .markdown-content pre code span[style*='AE81FF'],
[data-theme='light'] .code-block-container pre code span[style*='AE81FF'] {
  color: #8b5cf6 !important; /* Purple - 数字 */
}

/* 注释 - Cloud Medium 灰色 */
[data-theme='light'] .markdown-content pre code span[style*='75715E'],
[data-theme='light'] .code-block-container pre code span[style*='75715E'] {
  color: #6a737d !important; /* 注释灰色 */
}

/* 普通文字/标点 - Dark */
[data-theme='light'] .markdown-content pre code span[style*='F8F8F2'],
[data-theme='light'] .code-block-container pre code span[style*='F8F8F2'] {
  color: #24292e !important; /* Dark - 普通文字 */
}

/* 运算符 - Orange */
[data-theme='light'] .markdown-content pre code span[style*='F92672'],
[data-theme='light'] .code-block-container pre code span[style*='F92672'] {
  color: #d97757 !important; /* Orange - 运算符 */
}

/**
 * ========================================================================
 *   浅色主题 Prism.js Token 类颜色覆盖
 * ========================================================================
 *
 * 功能说明：
 *   覆盖 Prism.js 默认的 Monokai 主题颜色，使其在浅色背景下可读。
 *
 * 颜色方案：
 *   - 关键字：#CC785C (Book Cloth 棕红色)
 *   - 函数名/类名：#0066cc (Blue)
 *   - 字符串：#2e7d32 (Green)
 *   - 数字：#8B5CF6 (Purple)
 *   - 注释：#6a737d (灰色)
 *   - 标点符号/运算符：#141413 (Dark)
 *   - 普通文字：#24292e (Dark)
 */

/* 关键字 (class, function, return, if, else, const, let, var, async, await 等) */
[data-theme='light'] .token.keyword {
  color: #cc785c !important; /* Book Cloth 棕红色 */
}

/* 函数名 */
[data-theme='light'] .token.function {
  color: #0066cc !important; /* Blue */
}

/* 类名 */
[data-theme='light'] .token.class-name {
  color: #8b5cf6 !important; /* Purple */
}

/* 字符串 */
[data-theme='light'] .token.string {
  color: #2e7d32 !important; /* Green */
}

/* 模板字符串 */
[data-theme='light'] .token.template-string {
  color: #2e7d32 !important; /* Green */
}

/* 数字 */
[data-theme='light'] .token.number {
  color: #8b5cf6 !important; /* Purple */
}

/* 布尔值 */
[data-theme='light'] .token.boolean {
  color: #8b5cf6 !important; /* Purple */
}

/* 注释 */
[data-theme='light'] .token.comment {
  color: #6a737d !important; /* 注释灰色 */
}

/* 标点符号 (括号、花括号、分号、冒号等) */
[data-theme='light'] .token.punctuation {
  color: #141413 !important; /* Dark - 深色，确保可见 */
}

/* 运算符 (=, +, -, *, /, >, <, 等) */
[data-theme='light'] .token.operator {
  color: #d97757 !important; /* Orange */
}

/* 参数 */
[data-theme='light'] .token.parameter {
  color: #141413 !important; /* Dark */
}

/* 属性 */
[data-theme='light'] .token.property {
  color: #0066cc !important; /* Blue */
}

/* 正则表达式 */
[data-theme='light'] .token.regex {
  color: #d97757 !important; /* Orange */
}

/* 变量 */
[data-theme='light'] .token.variable {
  color: #141413 !important; /* Dark */
}

/* 常量 */
[data-theme='light'] .token.constant {
  color: #8b5cf6 !important; /* Purple */
}

/* 符号 */
[data-theme='light'] .token.symbol {
  color: #d97757 !important; /* Orange */
}

/* 标签 */
[data-theme='light'] .token.tag {
  color: #cc785c !important; /* Book Cloth */
}

/* 属性名 */
[data-theme='light'] .token.attr-name {
  color: #0066cc !important; /* Blue */
}

/* 属性值 */
[data-theme='light'] .token.attr-value {
  color: #2e7d32 !important; /* Green */
}

/* 内置对象 */
[data-theme='light'] .token.builtin {
  color: #8b5cf6 !important; /* Purple */
}

/* 选择器 (CSS) */
[data-theme='light'] .token.selector {
  color: #cc785c !important; /* Book Cloth */
}

/* 重要标记 */
[data-theme='light'] .token.important {
  color: #d97757 !important; /* Orange */
}

/* 删除代码块容器悬停效果 - 用户不需要此效果 */
.code-block-container:hover {
  /* 按需求：完全移除 hover 动效（保持与默认状态一致） */
  transform: none;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme='light'] .code-block-container:hover {
  transform: none;
  /* 保持与浅色主题默认状态一致（不增强/不减弱） */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  border-color: var(--border-primary);
}
