/* ═══════════════════════════════════════════════════════════════
   base.css - 变量系统、Reset、主题配置
   来源：提取自 admin.html 的 :root CSS 变量和主题定义
═══════════════════════════════════════════════════════════════ */

/* ── 主题颜色系统 ── */
:root {
  /* ═══════════════════════════════════════════════════════════════
     语义化颜色变量（新体系）
  ═══════════════════════════════════════════════════════════════ */
  /* 背景层级 */
  --bg-base: #070e0a;
  --bg-surface: #0d1f14;
  --bg-elevated: #112819;
  --bg-overlay: #162f1e;

  /* 主色调 */
  --primary: #3ecf6a;
  --primary-hover: #27a84e;
  --primary-rgb: 62, 207, 106;

  /* 文字层级 */
  --text-primary: #e8f0e2;
  --text-secondary: rgba(232, 240, 226, 0.7);
  --text-tertiary: rgba(232, 240, 226, 0.55);
  --text-disabled: rgba(232, 240, 226, 0.35);
  --text-inverse: #070e0a;

  /* 边框与阴影 */
  --border-color: rgba(62, 207, 106, 0.15);
  --shadow-color: rgba(0, 0, 0, 0.2);

  /* 状态色 */
  --danger: #e05050;
  --warning: #e0a040;
  --info: #5090e0;
  --success: #3ecf6a;
  --purple: #9060d0;
  --gold: #c9a84c;

  /* 强调色（与主色调同步） */
  --accent: #3ecf6a;

  /* 主色透明度变体 */
  --primary-5: rgba(62, 207, 106, 0.05);
  --primary-10: rgba(62, 207, 106, 0.1);
  --primary-15: rgba(62, 207, 106, 0.15);
  --primary-20: rgba(62, 207, 106, 0.2);
  --primary-25: rgba(62, 207, 106, 0.25);
  --primary-30: rgba(62, 207, 106, 0.3);
  --primary-40: rgba(62, 207, 106, 0.4);
  --primary-50: rgba(62, 207, 106, 0.5);

  /* ═══════════════════════════════════════════════════════════════
     向后兼容别名（旧变量名）
  ═══════════════════════════════════════════════════════════════ */
  --bg: var(--bg-base);
  --surface: var(--bg-surface);
  --surface2: var(--bg-elevated);
  --surface3: var(--bg-overlay);
  --green: var(--primary);
  --green2: var(--primary-hover);
  --cream: var(--text-primary);
  --muted: var(--text-tertiary);
  --border: var(--border-color);
  --text: var(--text-primary);

  /* 布局变量 */
  --sidebar-width: 240px;
  --page-padding-x: 2rem;
  --page-padding-y: 1.5rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --btn-radius: 6px;
  --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  --font-family: 'Inter', system-ui, sans-serif;

  /* 内容区 */
  --content-padding-x: 2rem;
  --content-padding-y: 1.5rem;
  --card-radius: var(--radius-md);
  --card-padding: 1.25rem;
  /* 按钮高度规范 */
  --btn-height-sm: 28px;
  --btn-height-md: 34px;
  --btn-height-lg: 42px;
  /* 表单 */
  --input-height: 36px;
  /* 图标按钮 */
  --icon-btn-size: 36px;
  /* 侧边栏 */
  --sb-link-height: 40px;
  --sb-collapsed-width: 60px;
}

/* ═══════════════════════════════════════════════════════════════
   统一主题变体 — 每个主题包含完整色彩 + 圆角 + 阴影 + 字体
═══════════════════════════════════════════════════════════════ */

/* ☀️ 日光白 — 明亮清爽的浅色主题 */
.theme-daylight {
  --bg-base: #f8faf8;
  --bg: var(--bg-base);
  --bg-surface: #ffffff;
  --surface: var(--bg-surface);
  --bg-elevated: #f0f4f0;
  --surface2: var(--bg-elevated);
  --bg-overlay: #e8ece8;
  --surface3: var(--bg-overlay);
  --primary: #2d8a4e;
  --green: var(--primary);
  --primary-hover: #1f7a3e;
  --green2: var(--primary-hover);
  --primary-rgb: 45, 138, 78;
  --primary-5: rgba(45, 138, 78, 0.05);
  --primary-10: rgba(45, 138, 78, 0.1);
  --primary-15: rgba(45, 138, 78, 0.15);
  --primary-20: rgba(45, 138, 78, 0.2);
  --primary-25: rgba(45, 138, 78, 0.25);
  --primary-30: rgba(45, 138, 78, 0.3);
  --primary-40: rgba(45, 138, 78, 0.4);
  --primary-50: rgba(45, 138, 78, 0.5);
  --text-primary: #1a1a1a;
  --cream: var(--text-primary);
  --text-tertiary: rgba(26,26,26,0.6);
  --muted: var(--text-tertiary);
  --border-color: rgba(45,138,78,0.2);
  --border: var(--border-color);
  --danger: #dc2626;
  --danger: var(--danger);
  --warning: #d97706;
  --warning: var(--warning);
  --info: #0284c7;
  --info: var(--info);
  --purple: #7c3aed;
  --purple: var(--purple);
  --gold: #b8942e;
  --gold: var(--gold);
  --accent: #2d8a4e;
  --accent: var(--accent);
  --text-primary: #1a1a1a;
  --text: var(--text-primary);
  --btn-radius: 6px;
  --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --font-family: 'Inter', system-ui, sans-serif;
  --content-padding-x: 2rem;
  --content-padding-y: 1.5rem;
  --card-radius: var(--radius-md);
  --card-padding: 1.25rem;
  --btn-height-sm: 28px;
  --btn-height-md: 34px;
  --btn-height-lg: 42px;
  --input-height: 36px;
  --icon-btn-size: 36px;
  --sb-link-height: 40px;
  --sb-collapsed-width: 60px;
} — 专业沉稳的深蓝主题 */
.theme-ocean {
  --bg-base: #0a1628;
  --bg: var(--bg-base);
  --bg-surface: #0f1f35;
  --surface: var(--bg-surface);
  --bg-elevated: #152840;
  --surface2: var(--bg-elevated);
  --bg-overlay: #1a3250;
  --surface3: var(--bg-overlay);
  --primary: #00b4d8;
  --green: var(--primary);
  --primary-hover: #0096c7;
  --green2: var(--primary-hover);
  --primary-rgb: 0, 180, 216;
  --primary-5: rgba(0, 180, 216, 0.05);
  --primary-10: rgba(0, 180, 216, 0.1);
  --primary-15: rgba(0, 180, 216, 0.15);
  --primary-20: rgba(0, 180, 216, 0.2);
  --primary-25: rgba(0, 180, 216, 0.25);
  --primary-30: rgba(0, 180, 216, 0.3);
  --primary-40: rgba(0, 180, 216, 0.4);
  --primary-50: rgba(0, 180, 216, 0.5);
  --text-primary: #e0f7fa;
  --cream: var(--text-primary);
  --text-tertiary: rgba(224,247,250,0.55);
  --muted: var(--text-tertiary);
  --border-color: rgba(0,180,216,0.15);
  --border: var(--border-color);
  --danger: #e74c3c;
  --danger: var(--danger);
  --warning: #f5a623;
  --warning: var(--warning);
  --info: #5bc8f5;
  --info: var(--info);
  --purple: #a855f7;
  --purple: var(--purple);
  --gold: #c9a84c;
  --gold: var(--gold);
  --accent: #00b4d8;
  --accent: var(--accent);
  --text-primary: #e0f7fa;
  --text: var(--text-primary);
  --btn-radius: 4px;
  --card-shadow: 0 2px 8px rgba(0, 180, 216, 0.15);
  --font-family: 'Roboto', system-ui, sans-serif;
  --content-padding-x: 2rem;
  --content-padding-y: 1.5rem;
  --card-radius: var(--radius-md);
  --card-padding: 1.25rem;
  --btn-height-sm: 28px;
  --btn-height-md: 34px;
  --btn-height-lg: 42px;
  --input-height: 36px;
  --icon-btn-size: 36px;
  --sb-link-height: 40px;
  --sb-collapsed-width: 60px;
} — 温暖活力的暗色主题 */
.theme-sunset {
  --bg-base: #1a0f0a;
  --bg: var(--bg-base);
  --bg-surface: #2a1810;
  --surface: var(--bg-surface);
  --bg-elevated: #381f15;
  --surface2: var(--bg-elevated);
  --bg-overlay: #452818;
  --surface3: var(--bg-overlay);
  --primary: #ff7b54;
  --green: var(--primary);
  --primary-hover: #ff5722;
  --green2: var(--primary-hover);
  --primary-rgb: 255, 123, 84;
  --primary-5: rgba(255, 123, 84, 0.05);
  --primary-10: rgba(255, 123, 84, 0.1);
  --primary-15: rgba(255, 123, 84, 0.15);
  --primary-20: rgba(255, 123, 84, 0.2);
  --primary-25: rgba(255, 123, 84, 0.25);
  --primary-30: rgba(255, 123, 84, 0.3);
  --primary-40: rgba(255, 123, 84, 0.4);
  --primary-50: rgba(255, 123, 84, 0.5);
  --text-primary: #ffecd2;
  --cream: var(--text-primary);
  --text-tertiary: rgba(255,236,210,0.55);
  --muted: var(--text-tertiary);
  --border-color: rgba(255,123,84,0.15);
  --border: var(--border-color);
  --danger: #e74c3c;
  --danger: var(--danger);
  --warning: #f5a623;
  --warning: var(--warning);
  --info: #5bc8f5;
  --info: var(--info);
  --purple: #a855f7;
  --purple: var(--purple);
  --gold: #c9a84c;
  --gold: var(--gold);
  --accent: #ff7b54;
  --accent: var(--accent);
  --text-primary: #ffecd2;
  --text: var(--text-primary);
  --btn-radius: 6px;
  --card-shadow: 0 2px 10px rgba(255, 123, 84, 0.12);
  --font-family: 'Inter', system-ui, sans-serif;
  --content-padding-x: 2rem;
  --content-padding-y: 1.5rem;
  --card-radius: var(--radius-md);
  --card-padding: 1.25rem;
  --btn-height-sm: 28px;
  --btn-height-md: 34px;
  --btn-height-lg: 42px;
  --input-height: 36px;
  --icon-btn-size: 36px;
  --sb-link-height: 40px;
  --sb-collapsed-width: 60px;
} — 神秘优雅的紫色主题 */
.theme-purple {
  --bg-base: #0f0a1a;
  --bg: var(--bg-base);
  --bg-surface: #18102a;
  --surface: var(--bg-surface);
  --bg-elevated: #201538;
  --surface2: var(--bg-elevated);
  --bg-overlay: #281a48;
  --surface3: var(--bg-overlay);
  --primary: #a855f7;
  --green: var(--primary);
  --primary-hover: #9333ea;
  --green2: var(--primary-hover);
  --primary-rgb: 168, 85, 247;
  --primary-5: rgba(168, 85, 247, 0.05);
  --primary-10: rgba(168, 85, 247, 0.1);
  --primary-15: rgba(168, 85, 247, 0.15);
  --primary-20: rgba(168, 85, 247, 0.2);
  --primary-25: rgba(168, 85, 247, 0.25);
  --primary-30: rgba(168, 85, 247, 0.3);
  --primary-40: rgba(168, 85, 247, 0.4);
  --primary-50: rgba(168, 85, 247, 0.5);
  --text-primary: #f3e8ff;
  --cream: var(--text-primary);
  --text-tertiary: rgba(243,232,255,0.55);
  --muted: var(--text-tertiary);
  --border-color: rgba(168,85,247,0.15);
  --border: var(--border-color);
  --danger: #e74c3c;
  --danger: var(--danger);
  --warning: #f5a623;
  --warning: var(--warning);
  --info: #5bc8f5;
  --info: var(--info);
  --purple: #a855f7;
  --purple: var(--purple);
  --gold: #c9a84c;
  --gold: var(--gold);
  --accent: #a855f7;
  --accent: var(--accent);
  --text-primary: #f3e8ff;
  --text: var(--text-primary);
  --btn-radius: 6px;
  --card-shadow: 0 2px 10px rgba(168, 85, 247, 0.15);
  --font-family: 'Inter', system-ui, sans-serif;
  --content-padding-x: 2rem;
  --content-padding-y: 1.5rem;
  --card-radius: var(--radius-md);
  --card-padding: 1.25rem;
  --btn-height-sm: 28px;
  --btn-height-md: 34px;
  --btn-height-lg: 42px;
  --input-height: 36px;
  --icon-btn-size: 36px;
  --sb-link-height: 40px;
  --sb-collapsed-width: 60px;
} — 极暗底 + 荧光绿 */
.theme-cyber {
  --bg-base: #0a0a0f;
  --bg: var(--bg-base);
  --bg-surface: #12121a;
  --surface: var(--bg-surface);
  --bg-elevated: #1a1a25;
  --surface2: var(--bg-elevated);
  --bg-overlay: #222230;
  --surface3: var(--bg-overlay);
  --primary: #00ff88;
  --green: var(--primary);
  --primary-hover: #00cc6a;
  --green2: var(--primary-hover);
  --primary-rgb: 0, 255, 136;
  --primary-5: rgba(0, 255, 136, 0.05);
  --primary-10: rgba(0, 255, 136, 0.1);
  --primary-15: rgba(0, 255, 136, 0.15);
  --primary-20: rgba(0, 255, 136, 0.2);
  --primary-25: rgba(0, 255, 136, 0.25);
  --primary-30: rgba(0, 255, 136, 0.3);
  --primary-40: rgba(0, 255, 136, 0.4);
  --primary-50: rgba(0, 255, 136, 0.5);
  --text-primary: #c0ffc8;
  --cream: var(--text-primary);
  --text-tertiary: rgba(0,255,136,0.5);
  --muted: var(--text-tertiary);
  --border-color: rgba(0,255,136,0.2);
  --border: var(--border-color);
  --danger: #ff4444;
  --danger: var(--danger);
  --warning: #ffcc00;
  --warning: var(--warning);
  --info: #00ff88;
  --info: var(--info);
  --purple: #a855f7;
  --purple: var(--purple);
  --gold: #c9a84c;
  --gold: var(--gold);
  --accent: #00ff88;
  --accent: var(--accent);
  --text-primary: #c0ffc8;
  --text: var(--text-primary);
  --btn-radius: 4px;
  --card-shadow: 0 0 12px rgba(0, 255, 136, 0.12);
  --font-family: 'Courier New', monospace;
  --content-padding-x: 2rem;
  --content-padding-y: 1.5rem;
  --card-radius: var(--radius-md);
  --card-padding: 1.25rem;
  --btn-height-sm: 28px;
  --btn-height-md: 34px;
  --btn-height-lg: 42px;
  --input-height: 36px;
  --icon-btn-size: 36px;
  --sb-link-height: 40px;
  --sb-collapsed-width: 60px;
} — 可爱温馨的浅粉色主题 */
.theme-sakura {
  --bg-base: #fef5f9;
  --bg: var(--bg-base);
  --bg-surface: #ffffff;
  --surface: var(--bg-surface);
  --bg-elevated: #fce4ec;
  --surface2: var(--bg-elevated);
  --bg-overlay: #f8bbd0;
  --surface3: var(--bg-overlay);
  --primary: #e91e90;
  --green: var(--primary);
  --primary-hover: #c2185b;
  --green2: var(--primary-hover);
  --primary-rgb: 233, 30, 144;
  --primary-5: rgba(233, 30, 144, 0.05);
  --primary-10: rgba(233, 30, 144, 0.1);
  --primary-15: rgba(233, 30, 144, 0.15);
  --primary-20: rgba(233, 30, 144, 0.2);
  --primary-25: rgba(233, 30, 144, 0.25);
  --primary-30: rgba(233, 30, 144, 0.3);
  --primary-40: rgba(233, 30, 144, 0.4);
  --primary-50: rgba(233, 30, 144, 0.5);
  --text-primary: #2d1a24;
  --cream: var(--text-primary);
  --text-tertiary: rgba(45,26,36,0.55);
  --muted: var(--text-tertiary);
  --border-color: rgba(233,30,144,0.15);
  --border: var(--border-color);
  --danger: #c62828;
  --danger: var(--danger);
  --warning: #e65100;
  --warning: var(--warning);
  --info: #5c6bc0;
  --info: var(--info);
  --purple: #8e24aa;
  --purple: var(--purple);
  --gold: #bf8d30;
  --gold: var(--gold);
  --accent: #e91e90;
  --accent: var(--accent);
  --text-primary: #2d1a24;
  --text: var(--text-primary);
  --btn-radius: 16px;
  --card-shadow: 0 4px 12px rgba(233, 30, 144, 0.12);
  --font-family: 'Noto Sans SC', 'PingFang SC', sans-serif;
  --content-padding-x: 2rem;
  --content-padding-y: 1.5rem;
  --card-radius: var(--radius-md);
  --card-padding: 1.25rem;
  --btn-height-sm: 28px;
  --btn-height-md: 34px;
  --btn-height-lg: 42px;
  --input-height: 36px;
  --icon-btn-size: 36px;
  --sb-link-height: 40px;
  --sb-collapsed-width: 60px;
} — 干净冷淡的浅灰蓝主题 */
.theme-nordic {
  --bg-base: #f0f3f6;
  --bg: var(--bg-base);
  --bg-surface: #ffffff;
  --surface: var(--bg-surface);
  --bg-elevated: #e8ecf0;
  --surface2: var(--bg-elevated);
  --bg-overlay: #dce2e8;
  --surface3: var(--bg-overlay);
  --primary: #5d7599;
  --green: var(--primary);
  --primary-hover: #4a6282;
  --green2: var(--primary-hover);
  --primary-rgb: 93, 117, 153;
  --primary-5: rgba(93, 117, 153, 0.05);
  --primary-10: rgba(93, 117, 153, 0.1);
  --primary-15: rgba(93, 117, 153, 0.15);
  --primary-20: rgba(93, 117, 153, 0.2);
  --primary-25: rgba(93, 117, 153, 0.25);
  --primary-30: rgba(93, 117, 153, 0.3);
  --primary-40: rgba(93, 117, 153, 0.4);
  --primary-50: rgba(93, 117, 153, 0.5);
  --text-primary: #1a2030;
  --cream: var(--text-primary);
  --text-tertiary: rgba(26,32,48,0.6);
  --muted: var(--text-tertiary);
  --border-color: rgba(93,117,153,0.18);
  --border: var(--border-color);
  --danger: #c62828;
  --danger: var(--danger);
  --warning: #e65100;
  --warning: var(--warning);
  --info: #3f51b5;
  --info: var(--info);
  --purple: #7b1fa2;
  --purple: var(--purple);
  --gold: #9e8140;
  --gold: var(--gold);
  --accent: #5d7599;
  --accent: var(--accent);
  --text-primary: #1a2030;
  --text: var(--text-primary);
  --btn-radius: 8px;
  --card-shadow: 0 2px 10px rgba(93, 117, 153, 0.1);
  --font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --content-padding-x: 2rem;
  --content-padding-y: 1.5rem;
  --card-radius: var(--radius-md);
  --card-padding: 1.25rem;
  --btn-height-sm: 28px;
  --btn-height-md: 34px;
  --btn-height-lg: 42px;
  --input-height: 36px;
  --icon-btn-size: 36px;
  --sb-link-height: 40px;
  --sb-collapsed-width: 60px;
} — 黑白灰无彩色主题 */
.theme-minimal {
  --bg-base: #fafafa;
  --bg: var(--bg-base);
  --bg-surface: #ffffff;
  --surface: var(--bg-surface);
  --bg-elevated: #f5f5f5;
  --surface2: var(--bg-elevated);
  --bg-overlay: #eeeeee;
  --surface3: var(--bg-overlay);
  --primary: #333333;
  --green: var(--primary);
  --primary-hover: #222222;
  --green2: var(--primary-hover);
  --primary-rgb: 51, 51, 51;
  --primary-5: rgba(51, 51, 51, 0.05);
  --primary-10: rgba(51, 51, 51, 0.1);
  --primary-15: rgba(51, 51, 51, 0.15);
  --primary-20: rgba(51, 51, 51, 0.2);
  --primary-25: rgba(51, 51, 51, 0.25);
  --primary-30: rgba(51, 51, 51, 0.3);
  --primary-40: rgba(51, 51, 51, 0.4);
  --primary-50: rgba(51, 51, 51, 0.5);
  --text-primary: #1a1a1a;
  --cream: var(--text-primary);
  --text-tertiary: rgba(26,26,26,0.65);
  --muted: var(--text-tertiary);
  --border-color: rgba(0,0,0,0.1);
  --border: var(--border-color);
  --danger: #dc2626;
  --danger: var(--danger);
  --warning: #d97706;
  --warning: var(--warning);
  --info: #2563eb;
  --info: var(--info);
  --purple: #7c3aed;
  --purple: var(--purple);
  --gold: #b8942e;
  --gold: var(--gold);
  --accent: #333333;
  --accent: var(--accent);
  --text-primary: #1a1a1a;
  --text: var(--text-primary);
  --btn-radius: 6px;
  --card-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --content-padding-x: 2rem;
  --content-padding-y: 1.5rem;
  --card-radius: var(--radius-md);
  --card-padding: 1.25rem;
  --btn-height-sm: 28px;
  --btn-height-md: 34px;
  --btn-height-lg: 42px;
  --input-height: 36px;
  --icon-btn-size: 36px;
  --sb-link-height: 40px;
  --sb-collapsed-width: 60px;
} — 极暗底 + 品红发光 */
.theme-neon {
  --bg-base: #0f0f1a;
  --bg: var(--bg-base);
  --bg-surface: #151525;
  --surface: var(--bg-surface);
  --bg-elevated: #1c1c2c;
  --surface2: var(--bg-elevated);
  --bg-overlay: #252538;
  --surface3: var(--bg-overlay);
  --primary: #ff00ff;
  --green: var(--primary);
  --primary-hover: #cc00cc;
  --green2: var(--primary-hover);
  --primary-rgb: 255, 0, 255;
  --primary-5: rgba(255, 0, 255, 0.05);
  --primary-10: rgba(255, 0, 255, 0.1);
  --primary-15: rgba(255, 0, 255, 0.15);
  --primary-20: rgba(255, 0, 255, 0.2);
  --primary-25: rgba(255, 0, 255, 0.25);
  --primary-30: rgba(255, 0, 255, 0.3);
  --primary-40: rgba(255, 0, 255, 0.4);
  --primary-50: rgba(255, 0, 255, 0.5);
  --text-primary: #f5e6ff;
  --cream: var(--text-primary);
  --text-tertiary: rgba(245,230,255,0.5);
  --muted: var(--text-tertiary);
  --border-color: rgba(255,0,255,0.2);
  --border: var(--border-color);
  --danger: #ff4444;
  --danger: var(--danger);
  --warning: #ffcc00;
  --warning: var(--warning);
  --info: #00ffff;
  --info: var(--info);
  --purple: #ff00ff;
  --purple: var(--purple);
  --gold: #c9a84c;
  --gold: var(--gold);
  --accent: #ff00ff;
  --accent: var(--accent);
  --text-primary: #f5e6ff;
  --text: var(--text-primary);
  --btn-radius: 8px;
  --card-shadow: 0 0 12px rgba(255, 0, 255, 0.12);
  --font-family: 'Inter', system-ui, sans-serif;
  --content-padding-x: 2rem;
  --content-padding-y: 1.5rem;
  --card-radius: var(--radius-md);
  --card-padding: 1.25rem;
  --btn-height-sm: 28px;
  --btn-height-md: 34px;
  --btn-height-lg: 42px;
  --input-height: 36px;
  --icon-btn-size: 36px;
  --sb-link-height: 40px;
  --sb-collapsed-width: 60px;
}（别名） */
.theme-light {
  --primary-rgb: 62, 207, 106;
  --primary-5: rgba(62, 207, 106, 0.05);
  --primary-10: rgba(62, 207, 106, 0.1);
  --primary-15: rgba(62, 207, 106, 0.15);
  --primary-20: rgba(62, 207, 106, 0.2);
  --primary-25: rgba(62, 207, 106, 0.25);
  --primary-30: rgba(62, 207, 106, 0.3);
  --primary-40: rgba(62, 207, 106, 0.4);
  --primary-50: rgba(62, 207, 106, 0.5);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-family);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 滚动条样式 ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(62, 207, 106, 0.3);
}

/* ── 选中文字颜色 ── */
::selection {
  background: rgba(62, 207, 106, 0.3);
  color: var(--cream);
}

/* ── 全局链接 ── */
a {
  color: var(--green);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── 图片 ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── 禁止选中（非交互元素） ── */
.no-select {
  user-select: none;
  -webkit-user-select: none;
}

/* ── 焦点样式（无障碍） ── */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ── 隐藏元素（screen reader 除外） ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   ═══ 高对比度模式 ═══
   ═══════════════════════════════════════════════════════════════ */
.high-contrast {
  --text-primary: #ffffff !important;
  --text-secondary: #ffffff !important;
  --text-tertiary: rgba(255,255,255,0.85) !important;
  --bg-base: #000000 !important;
  --bg-surface: #0a0a0a !important;
  --border-color: rgba(255,255,255,0.4) !important;
}
.high-contrast.theme-daylight,
.high-contrast.theme-sakura,
.high-contrast.theme-nordic,
.high-contrast.theme-minimal {
  --text-primary: #000000 !important;
  --text-secondary: #000000 !important;
  --text-tertiary: rgba(0,0,0,0.75) !important;
  --bg-base: #ffffff !important;
  --bg-surface: #f0f0f0 !important;
  --border-color: rgba(0,0,0,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ═══ 主题切换按钮样式 ═══
   ═══════════════════════════════════════════════════════════════ */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: default;
}

.theme-switch-wrapper:hover {
  background: var(--bg-elevated) !important;
}

.theme-switch-options {
  display: flex;
  gap: 0.25rem;
}

.theme-option {
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.theme-option:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--primary);
}

.theme-option:active {
  transform: scale(0.95);
}

/* 浅色主题变量覆盖 */
[data-theme="light"] {
  --bg-base: #f8fafc;
  --bg: var(--bg-base);
  --bg-surface: #ffffff;
  --surface: var(--bg-surface);
  --bg-elevated: #f1f5f9;
  --surface2: var(--bg-elevated);
  --bg-overlay: #e2e8f0;
  --surface3: var(--bg-overlay);
  --text-primary: #1e293b;
  --cream: var(--text-primary);
  --text-secondary: rgba(30, 41, 59, 0.7);
  --text-tertiary: rgba(30, 41, 59, 0.55);
  --text-disabled: rgba(30, 41, 59, 0.35);
  --border-color: rgba(0, 0, 0, 0.1);
  --border: var(--border-color);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --text: var(--text-primary);
  --muted: var(--text-tertiary);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  --primary-rgb: 62, 207, 106;
  --primary-5: rgba(62, 207, 106, 0.05);
  --primary-10: rgba(62, 207, 106, 0.1);
  --primary-15: rgba(62, 207, 106, 0.15);
  --primary-20: rgba(62, 207, 106, 0.2);
  --primary-25: rgba(62, 207, 106, 0.25);
  --primary-30: rgba(62, 207, 106, 0.3);
  --primary-40: rgba(62, 207, 106, 0.4);
  --primary-50: rgba(62, 207, 106, 0.5);
}

/* 主题模式切换按钮 */
.mode-btn {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.mode-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--primary);
}

.mode-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* 深色主题变量覆盖 */
[data-theme="dark"] {
  --bg-base: #070e0a;
  --bg: var(--bg-base);
  --bg-surface: #0d1f14;
  --surface: var(--bg-surface);
  --bg-elevated: #112819;
  --surface2: var(--bg-elevated);
  --bg-overlay: #162f1e;
  --surface3: var(--bg-overlay);
  --text-primary: #e8f0e2;
  --cream: var(--text-primary);
  --text-secondary: rgba(232, 240, 226, 0.7);
  --text-tertiary: rgba(232, 240, 226, 0.55);
  --text-disabled: rgba(232, 240, 226, 0.35);
  --border-color: rgba(62, 207, 106, 0.15);
  --border: var(--border-color);
  --shadow-color: rgba(0, 0, 0, 0.2);
  --text: var(--text-primary);
  --muted: var(--text-tertiary);
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --primary-rgb: 62, 207, 106;
  --primary-5: rgba(62, 207, 106, 0.05);
  --primary-10: rgba(62, 207, 106, 0.1);
  --primary-15: rgba(62, 207, 106, 0.15);
  --primary-20: rgba(62, 207, 106, 0.2);
  --primary-25: rgba(62, 207, 106, 0.25);
  --primary-30: rgba(62, 207, 106, 0.3);
  --primary-40: rgba(62, 207, 106, 0.4);
  --primary-50: rgba(62, 207, 106, 0.5);
}