/* ============================================
   TSC 智联师生 — 统一设计令牌 (Design Tokens)
   单一真相来源 (Single Source of Truth)

   依据 Anthony Hobday "Safe Rules" 设计准则:
   https://anthonyhobday.com/sideprojects/saferules/

   所有页面必须先引入本文件，再引入页面专属 CSS。
   页面专属 CSS 仅允许引用本文件中的变量，禁止重新定义基础令牌。
   ============================================ */

:root {
  /* ============================================================
     规则 1: 使用接近黑/白而非纯黑/纯白
     纯黑对比度过高，纯白过亮；改用接近值以降低视觉疲劳
     ============================================================ */
  --color-near-black: #1A202C;      /* 替代 #000 — 主文本 */
  --color-near-white: #FAFBFC;      /* 替代 #FFF — 主背景 */

  /* ============================================================
     规则 2: 饱和中性色 — 在灰度中加入微量主色（蓝色）
     使整体调色板更协调（HSB 饱和度 < 5%）
     ============================================================ */
  --color-bg: #F5F8FB;             /* 页面背景 — 微蓝灰 */
  --color-bg-elevated: #FCFDFE;     /* 卡片/容器背景 — 接近白带蓝 */
  --color-bg-sunken: #EAF0F6;      /* 凹陷区/输入框底 — 蓝灰 */
  --color-bg-hover: rgba(45, 156, 219, 0.04); /* 悬停态 */

  /* ============================================================
     主色系 — Primary (Blue)
     规则 10: 调色板颜色应具有不同亮度值
     ============================================================ */
  --color-primary: #2D9CDB;
  --color-primary-hover: #2389C2;
  --color-primary-active: #1E7FBA;
  --color-primary-light: #E8F4FD;
  --color-primary-50: #F0F8FF;
  --color-primary-100: #E0F0FF;
  --color-primary-200: #B8D9F5;
  --color-primary-300: #8BC2EE;
  --color-primary-400: #5AB0E5;
  --color-primary-500: #2D9CDB;
  --color-primary-600: #1E7FBA;
  --color-primary-700: #16649A;
  --color-primary-800: #0F4A78;
  --color-primary-900: #0A3356;

  /* ============================================================
     辅助色系 — Accent (Green)
     ============================================================ */
  --color-accent: #27AE60;
  --color-accent-hover: #219653;
  --color-accent-light: #E8F8EF;

  /* ============================================================
     语义扩展色 — 规则 10: 不同亮度值让颜色不互相竞争
     ============================================================ */
  --color-purple: #9F7AEA;
  --color-purple-light: #F3E8FF;
  --color-orange: #E67E22;
  --color-orange-light: #FFF4E6;
  --color-cyan: #6DD5ED;
  --color-rose: #E84393;
  --color-rose-light: #FFF0F6;

  /* ============================================================
     文本色 — 规则 1: 使用接近黑
     ============================================================ */
  --color-text: #2D3748;            /* 主文本 — 接近黑 */
  --color-text-secondary: #5A6A7C;  /* 次要文本 — 蓝灰 */
  --color-text-muted: #8B9BAC;      /* 弱化文本 */
  --color-text-inverse: #FCFDFE;   /* 深色背景上的文本 — 接近白 */
  --color-text-tertiary: #A0AEC0;   /* 第三级文本 */

  /* ============================================================
     状态色 — 规则 10: 亮度区分
     ============================================================ */
  --state-success: #38A169;
  --state-success-bg: #F0FFF4;
  --state-success-light: #D1FAE5;
  --state-success-text: #065F46;

  --state-warning: #D69E2E;        /* 统一为 #D69E2E */
  --state-warning-bg: #FFFBEA;
  --state-warning-light: #FEF3C7;
  --state-warning-text: #92400E;

  --state-error: #E53E3E;
  --state-error-bg: #FFF5F5;
  --state-error-light: #FEE2E2;
  --state-error-text: #991B1B;

  --state-info: #2D9CDB;
  --state-info-bg: #EBF8FF;

  --state-eval: #9B59B6;

  /* ============================================================
     边框色 — 规则 7: 容器边框应与容器和背景都形成对比
     边框应比容器和背景都深（浅色界面）
     ============================================================ */
  --color-border: #D8E0E8;          /* 实线边框 — 比背景深 */
  --color-border-light: rgba(216, 224, 232, 0.6); /* 半透明边框 */
  --color-border-solid: #D8E0E8;
  --color-border-focus: #2D9CDB;
  --color-border-hover: #B8D9F5;
  --color-primary-ring: rgba(45, 156, 219, 0.12); /* 主色聚焦环 */
  --state-success-ring: rgba(56, 161, 105, 0.2); /* 成功色光晕环 */
  --state-warning-ring: rgba(214, 158, 46, 0.2);  /* 警告色光晕环 */
  --state-error-ring: rgba(229, 62, 62, 0.2);     /* 错误色光晕环 */

  /* ============================================================
     玻璃拟态 (Glassmorphism)
     ============================================================ */
  --glass-bg: rgba(252, 253, 254, 0.75);
  --glass-bg-light: rgba(252, 253, 254, 0.6);
  --glass-bg-strong: rgba(252, 253, 254, 0.88);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: blur(24px) saturate(180%);
  --glass-blur-light: blur(12px) saturate(150%);

  /* ============================================================
     圆角 — 规则 21: 嵌套圆角 = 外圆角 - 间距
     ============================================================ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ============================================================
     阴影 — 规则 16: 模糊值 = 偏移值 × 2
     规则 15: 越靠近用户的元素越亮（阴影越淡）
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(45, 156, 219, 0.04);
  --shadow-sm: 0 2px 4px rgba(45, 156, 219, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 16px 32px rgba(45, 156, 219, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 12px 24px rgba(45, 156, 219, 0.15);
  --shadow-glow: 0 0 40px rgba(45, 156, 219, 0.25);
  --shadow-btn: 0 8px 20px rgba(45, 156, 219, 0.25);
  --shadow-btn-hover: 0 16px 32px rgba(45, 156, 219, 0.35);

  /* ============================================================
     字体 — 规则 20: 最多两种字体
     规则 7: 大字体减少字间距和行高，小字体增加
     ============================================================ */
  --font-display: 'Segoe UI', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body: 'Segoe UI', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'Consolas', 'JetBrains Mono', 'Courier New', monospace;

  /* 字号 — 规则 18: 正文 ≥ 16px */
  --text-xs: 0.75rem;    /* 12px — 仅用于标签/徽章 */
  --text-sm: 0.875rem;   /* 14px — 辅助文本 */
  --text-base: 1rem;     /* 16px — 正文最小 */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */

  /* 行高 — 规则 7: 大字低行高，小字高行高 */
  --leading-tight: 1.2;   /* 标题 */
  --leading-snug: 1.4;    /* 副标题 */
  --leading-normal: 1.5;  /* 正文 */
  --leading-relaxed: 1.6; /* 小字/长文本 */
  --leading-loose: 1.75;  /* 超小字 */

  /* 字重 */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ============================================================
     间距 — 规则 11: 数学相关的测量值（8px 基准网格）
     规则 19: 外边距 ≥ 内边距
     ============================================================ */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */

  /* ============================================================
     过渡动画
     ============================================================ */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================================
     层级 (z-index)
     ============================================================ */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 200;
  --z-topnav: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 2000;
  --z-tooltip: 3000;

  /* ============================================================
     布局尺寸
     ============================================================ */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --top-nav-height: 56px;
  --content-max-width: 1400px;
  --content-padding: 2rem;

  /* ============================================================
     渐变
     ============================================================ */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary) 50%, var(--color-primary-400) 100%);
  --gradient-brand: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary) 50%, var(--color-purple) 100%);
  --gradient-btn: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary) 50%, var(--color-primary-400) 100%);
  --gradient-sidebar: linear-gradient(180deg, #1A365D 0%, #0A3356 100%);

  /* ============================================================
     分类色板 — 学生记录分类
     每个分类有: 主色 / 浅底 / 文字色
     ============================================================ */
  --cat-excellence: #10B981;
  --cat-excellence-bg: #ECFDF5;
  --cat-excellence-text: #065F46;

  --cat-problem: #EF4444;
  --cat-problem-bg: #FEF2F2;
  --cat-problem-text: #991B1B;

  --cat-ability: #3B82F6;
  --cat-ability-bg: #EFF6FF;
  --cat-ability-text: #1E40AF;

  --cat-evaluation: #F59E0B;
  --cat-evaluation-bg: #FFFBEB;
  --cat-evaluation-text: #92400E;

  --cat-work: #6366F1;
  --cat-work-bg: #EEF2FF;
  --cat-work-text: #3730A3;

  --cat-psychology: #EC4899;
  --cat-psychology-bg: #FDF2F8;
  --cat-psychology-text: #9D174D;

  --cat-logistics: #8B5CF6;
  --cat-logistics-bg: #F5F3FF;
  --cat-logistics-text: #5B21B6;

  --cat-communication: #14B8A6;
  --cat-communication-bg: #F0FDFA;
  --cat-communication-text: #115E59;

  --cat-solution: #F59E0B;
  --cat-solution-bg: #FFFBEB;
  --cat-solution-text: #92400E;

  /* ============================================================
     灵动背景配色 (登录页 blob)
     规则 10: 暖色或冷色，不要混用 — 主色系为冷色(蓝)
     ============================================================ */
  --color-blob-cyan: #6DD5ED;
  --color-blob-sky: #76C7F0;
  --color-blob-indigo: #5B7CFA;
  --color-blob-lilac: #C3AED6;
  --color-blob-mint: #A8E6CF;
  --color-blob-peach: #FFD3B6;
  --color-blob-coral: #FF6B9D;

  /* 登录页网格点色（login.css 消费，随主题切换） */
  --login-grid-dot: rgba(45, 156, 219, 0.08);

  /* ============================================================
     难度梯度色 — 知识图谱难度标识
     ============================================================ */
  --difficulty-1: #10B981;  /* 基础 — 绿 */
  --difficulty-2: #3B82F6;  /* 简单 — 蓝 */
  --difficulty-3: #F59E0B;  /* 中等 — 黄 */
  --difficulty-4: #F97316;  /* 较难 — 橙 */
  --difficulty-5: #EF4444;  /* 困难 — 红 */
}

/* ============================================
   学生端课堂语义色（学生界面专属令牌，随主题切换）
   ============================================ */
:root {
  --stu-idx-bg: linear-gradient(135deg, #FF6B6B, #FF8E53);        /* 任务序号徽章 */
  --stu-idx-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
  --stu-active-bg: linear-gradient(135deg, #4F46E5, #6366F1);     /* 任务/步骤选中态 */
  --stu-active-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  --stu-hover-bg: linear-gradient(135deg, #FFF5F5, #FFF0F0);      /* 任务悬停 */
  --stu-hover-border: #FFB4B4;
  --stu-tool-bg: linear-gradient(135deg, #FFF3E0, #FFE0B2);       /* 工具箱浅橙底 */
  --stu-tool-bg-strong: linear-gradient(135deg, #FFB74D, #FB8C00);/* 工具打开按钮 */
  --stu-tool-text: #E65100;
  --stu-tool-border: #FFB74D;
  --stu-tool-hover-bg: #FFF8E1;
  --stu-tool-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

/* ============================================
   主题方案（/admin/settings → 主题外观 切换，教师端与学生端同时生效）
   - default  默认（即上方 :root，无覆盖块）
   - oasis    方案A【专注绿洲】日间学习：暖米白纸感底 + 鼠尾草绿 + 宁静蓝，
              降蓝光、低饱和，减少视觉干扰（对齐方案文档设计依据）
   - vitality 方案B【活力引力】休闲探索：极浅灰白画布 + 活力青 + 珊瑚橘 + 柔和紫，
              明快但控饱和，青-紫-橘分裂互补对色弱友好
   - night    方案C【星空舒缓】夜间暗色：深灰蓝底（不用纯黑）+ 浅灰白文本（不用纯白）
              + 提亮天蓝 + 暖琥珀，控制蓝光与文字光晕
   原则：文本对比度对齐 WCAG AA（≈4.5:1），避免纯黑/纯白背景与文本
   ============================================ */

/* ---- 方案A 专注绿洲 ---- */
:root[data-theme="oasis"] {
  --color-bg: #F5F2EB;
  --color-bg-elevated: #FBF9F2;
  --color-bg-sunken: #EAE5D9;
  --color-bg-hover: rgba(74, 124, 89, 0.05);

  --color-text: #2D2D2D;
  --color-text-secondary: #5C5C52;
  --color-text-muted: #8F8C7E;
  --color-text-tertiary: #A8A494;

  --color-primary: #4A7C59;
  --color-primary-hover: #3E6A4C;
  --color-primary-active: #31573D;
  --color-primary-light: #E9F1E7;
  --color-primary-50: #F3F7F1;
  --color-primary-100: #E4EFE2;
  --color-primary-200: #C3DBC2;
  --color-primary-300: #98C29C;
  --color-primary-400: #6CA377;
  --color-primary-500: #4A7C59;
  --color-primary-600: #3E6A4C;
  --color-primary-700: #31573D;
  --color-primary-800: #24422E;
  --color-primary-900: #182D1F;

  --color-accent: #3A6EA5;
  --color-accent-hover: #325C8C;
  --color-accent-light: #E7EFF7;

  --color-border: #DCD6C6;
  --color-border-light: rgba(220, 214, 198, 0.6);
  --color-border-solid: #DCD6C6;
  --color-border-focus: #3A6EA5;
  --color-border-hover: #C3DBC2;
  --color-primary-ring: rgba(74, 124, 89, 0.12);

  --glass-bg: rgba(251, 249, 242, 0.78);
  --glass-bg-light: rgba(251, 249, 242, 0.62);
  --glass-bg-strong: rgba(251, 249, 242, 0.9);
  --glass-border: rgba(255, 255, 255, 0.55);

  --shadow-xs: 0 1px 2px rgba(74, 124, 89, 0.04);
  --shadow-sm: 0 2px 4px rgba(74, 124, 89, 0.05);
  --shadow-float: 0 16px 32px rgba(74, 124, 89, 0.12), 0 8px 16px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 12px 24px rgba(74, 124, 89, 0.15);
  --shadow-glow: 0 0 40px rgba(74, 124, 89, 0.22);
  --shadow-btn: 0 8px 20px rgba(74, 124, 89, 0.25);
  --shadow-btn-hover: 0 16px 32px rgba(74, 124, 89, 0.32);

  --gradient-sidebar: linear-gradient(180deg, #24422E 0%, #182D1F 100%);
  --gradient-brand: linear-gradient(135deg, #31573D 0%, #4A7C59 50%, #98C29C 100%);

  --stu-idx-bg: linear-gradient(135deg, #6CA377, #4A7C59);
  --stu-idx-shadow: 0 2px 6px rgba(74, 124, 89, 0.3);
  --stu-active-bg: linear-gradient(135deg, #3A6EA5, #5A8CC0);
  --stu-active-shadow: 0 4px 12px rgba(58, 110, 165, 0.3);
  --stu-hover-bg: linear-gradient(135deg, #F3F6EF, #EDF3EA);
  --stu-hover-border: #B5CDB4;
  --stu-tool-bg: linear-gradient(135deg, #EDF4EC, #DCEBDC);
  --stu-tool-bg-strong: linear-gradient(135deg, #6CA377, #4A7C59);
  --stu-tool-text: #31573D;
  --stu-tool-border: #A8C6A6;
  --stu-tool-hover-bg: #F0F6EE;
  --stu-tool-shadow: 0 4px 10px rgba(74, 124, 89, 0.28);

  --login-grid-dot: rgba(74, 124, 89, 0.10);
}

/* ---- 方案B 活力引力 ---- */
:root[data-theme="vitality"] {
  --color-bg: #F8F9FA;
  --color-bg-elevated: #FDFDFE;
  --color-bg-sunken: #EEF1F4;
  --color-bg-hover: rgba(0, 180, 216, 0.05);

  --color-text: #212529;
  --color-text-secondary: #4F5761;
  --color-text-muted: #848B94;
  --color-text-tertiary: #A6ACB4;

  --color-primary: #00B4D8;
  --color-primary-hover: #0096B8;
  --color-primary-active: #00779A;
  --color-primary-light: #E0F7FC;
  --color-primary-50: #F0FBFE;
  --color-primary-100: #DFF6FC;
  --color-primary-200: #B8ECF8;
  --color-primary-300: #7DDCF1;
  --color-primary-400: #3EC9E7;
  --color-primary-500: #00B4D8;
  --color-primary-600: #0096B8;
  --color-primary-700: #00779A;
  --color-primary-800: #045C77;
  --color-primary-900: #0A4257;

  --color-accent: #FF7E67;
  --color-accent-hover: #F26A54;
  --color-accent-light: #FFE9E4;

  --color-purple: #9D4EDD;
  --color-purple-light: #F1E7FB;

  --color-border: #DDE3E9;
  --color-border-light: rgba(221, 227, 233, 0.6);
  --color-border-solid: #DDE3E9;
  --color-border-focus: #00B4D8;
  --color-border-hover: #B8ECF8;
  --color-primary-ring: rgba(0, 180, 216, 0.12);

  --glass-bg: rgba(253, 253, 254, 0.78);
  --glass-bg-light: rgba(253, 253, 254, 0.62);
  --glass-bg-strong: rgba(253, 253, 254, 0.9);
  --glass-border: rgba(255, 255, 255, 0.6);

  --shadow-xs: 0 1px 2px rgba(0, 180, 216, 0.04);
  --shadow-sm: 0 2px 4px rgba(0, 180, 216, 0.05);
  --shadow-float: 0 16px 32px rgba(0, 180, 216, 0.12), 0 8px 16px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 12px 24px rgba(0, 180, 216, 0.15);
  --shadow-glow: 0 0 40px rgba(0, 180, 216, 0.22);
  --shadow-btn: 0 8px 20px rgba(0, 180, 216, 0.25);
  --shadow-btn-hover: 0 16px 32px rgba(0, 180, 216, 0.32);

  --gradient-sidebar: linear-gradient(180deg, #0E4C5A 0%, #082E38 100%);
  --gradient-brand: linear-gradient(135deg, #00779A 0%, #00B4D8 50%, #9D4EDD 100%);

  --stu-idx-bg: linear-gradient(135deg, #FF7E67, #FFA38F);
  --stu-idx-shadow: 0 2px 6px rgba(255, 126, 103, 0.3);
  --stu-active-bg: linear-gradient(135deg, #0096B8, #22C3E3);
  --stu-active-shadow: 0 4px 12px rgba(0, 180, 216, 0.3);
  --stu-hover-bg: linear-gradient(135deg, #F0FBFE, #E4F8FD);
  --stu-hover-border: #8FE0F1;
  --stu-tool-bg: linear-gradient(135deg, #E0F7FB, #C2EEF6);
  --stu-tool-bg-strong: linear-gradient(135deg, #22C3E3, #0096B8);
  --stu-tool-text: #0A6E88;
  --stu-tool-border: #8FE0F1;
  --stu-tool-hover-bg: #EFFBFD;
  --stu-tool-shadow: 0 4px 10px rgba(0, 180, 216, 0.28);

  --login-grid-dot: rgba(0, 180, 216, 0.08);
}

/* ---- 方案C 星空舒缓（夜间暗色） ---- */
:root[data-theme="night"] {
  --color-bg: #16181C;
  --color-bg-elevated: #22252A;
  --color-bg-sunken: #1D2126;
  --color-bg-hover: rgba(56, 189, 248, 0.06);

  --color-text: #D1D5DB;
  --color-text-secondary: #9CA3AF;
  --color-text-muted: #6F7680;
  --color-text-tertiary: #5B6270;

  --color-primary: #38BDF8;
  --color-primary-hover: #5CC9F9;
  --color-primary-active: #0E86C4;
  --color-primary-light: #0F202E;
  --color-primary-50: #0D1420;
  --color-primary-100: #0F1B2A;
  --color-primary-200: #1B3A52;
  --color-primary-300: #27577A;
  --color-primary-400: #2E7CAD;
  --color-primary-500: #38BDF8;
  --color-primary-600: #1FA4E0;
  --color-primary-700: #17A3E8;
  --color-primary-800: #0B6AA0;
  --color-primary-900: #094E77;

  --color-accent: #FBBF24;
  --color-accent-hover: #FCD34D;
  --color-accent-light: #3A2E10;

  --color-purple: #A78BFA;
  --color-purple-light: #2A2340;
  --color-orange: #FB923C;
  --color-orange-light: #33200D;

  --state-success: #34D399;
  --state-success-bg: #10231A;
  --state-success-light: #14532D;
  --state-success-text: #6EE7B7;

  --state-warning: #FBBF24;
  --state-warning-bg: #241A05;
  --state-warning-light: #3A2C0A;
  --state-warning-text: #FCD34D;

  --state-error: #F87171;
  --state-error-bg: #2A1214;
  --state-error-light: #451A1C;
  --state-error-text: #FCA5A5;

  --state-info: #38BDF8;
  --state-info-bg: #0C1B26;

  --color-border: #333A44;
  --color-border-light: rgba(51, 58, 68, 0.6);
  --color-border-solid: #333A44;
  --color-border-focus: #38BDF8;
  --color-border-hover: #27577A;
  --color-primary-ring: rgba(56, 189, 248, 0.15);

  --glass-bg: rgba(28, 31, 37, 0.82);
  --glass-bg-light: rgba(28, 31, 37, 0.66);
  --glass-bg-strong: rgba(30, 33, 39, 0.92);
  --glass-border: rgba(255, 255, 255, 0.08);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 16px 32px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(56, 189, 248, 0.15);
  --shadow-btn: 0 8px 20px rgba(2, 132, 199, 0.35);
  --shadow-btn-hover: 0 16px 32px rgba(2, 132, 199, 0.45);

  --gradient-sidebar: linear-gradient(180deg, #1C212B 0%, #12151B 100%);
  --gradient-primary: linear-gradient(135deg, #075985 0%, #0284C7 50%, #38BDF8 100%);
  --gradient-btn: linear-gradient(135deg, #075985 0%, #0284C7 50%, #38BDF8 100%);
  --gradient-brand: linear-gradient(135deg, #075985 0%, #0284C7 50%, #A78BFA 100%);

  --stu-idx-bg: linear-gradient(135deg, #F59E0B, #FBBF24);
  --stu-idx-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
  --stu-active-bg: linear-gradient(135deg, #075985, #0284C7);
  --stu-active-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
  --stu-hover-bg: #1D222A;
  --stu-hover-border: #333A44;
  --stu-tool-bg: linear-gradient(135deg, #2A2E35, #343A43);
  --stu-tool-bg-strong: linear-gradient(135deg, #F59E0B, #D97706);
  --stu-tool-text: #FBBF24;
  --stu-tool-border: #4A5160;
  --stu-tool-hover-bg: #262B33;
  --stu-tool-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);

  --cat-excellence-bg: #0E2418;  --cat-excellence-text: #6EE7B7;
  --cat-problem-bg: #2A1214;     --cat-problem-text: #FCA5A5;
  --cat-ability-bg: #0C1B26;     --cat-ability-text: #7DD3FC;
  --cat-evaluation-bg: #241A05;  --cat-evaluation-text: #FCD34D;
  --cat-work-bg: #191B33;        --cat-work-text: #A5B4FC;
  --cat-psychology-bg: #2A1220;  --cat-psychology-text: #F9A8D4;
  --cat-logistics-bg: #1E1830;   --cat-logistics-text: #C4B5FD;
  --cat-communication-bg: #0C2321; --cat-communication-text: #5EEAD4;
  --cat-solution-bg: #241A05;    --cat-solution-text: #FCD34D;

  --login-grid-dot: rgba(56, 189, 248, 0.06);
}

/* ============================================
   全局基础重置
   ============================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: 16px;  /* 规则 18: 正文 ≥ 16px */
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ============================================
   通用工具类 — 规则 11: 8px 基准网格
   ============================================ */

/* 规则 20: 按钮水平内边距 = 垂直内边距 × 2 */
.btn-base {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-4);  /* 8px 垂直 × 16px 水平 */
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--transition-base);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  cursor: pointer;
}
.btn-base:hover { background: var(--color-bg-sunken); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}

.btn-success {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}
.btn-success:hover { background: var(--color-accent-hover); }

.btn-danger {
  color: var(--state-error);
  border-color: var(--state-error-light);
  background: var(--state-error-bg);
}
.btn-danger:hover {
  background: var(--state-error-light);
}

/* 规则 21: 嵌套圆角 = 外圆角 - 间距 */
.card-base {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

/* 规则 18: 正文 ≥ 16px */
.text-body { font-size: var(--text-base); line-height: var(--leading-normal); }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.text-xs { font-size: var(--text-xs); line-height: var(--leading-relaxed); }

/* ============================================
   动画关键帧（统一定义，各页面复用）
   ============================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ============================================
   响应式断点
   ============================================ */
/* 移动端: ≤ 640px */
/* 平板: 641px - 768px */
/* 桌面: 769px - 1024px */
/* 大屏: ≥ 1025px */

/* ============================================
   无障碍 — 尊重 prefers-reduced-motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   共享列表分页控件（服务端/前端分页页面共用）
   ============================================ */
.list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 4px 4px;
}
.list-pagination .lp-info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.list-pagination .lp-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.list-pagination .lp-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.list-pagination .lp-btn:hover:not(:disabled) {
  border-color: var(--color-primary-200);
  color: var(--color-primary);
  background: var(--color-primary-50);
}
.list-pagination .lp-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  cursor: default;
}
.list-pagination .lp-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.list-pagination .lp-ellipsis {
  color: var(--color-text-muted);
  padding: 0 2px;
}
.list-pagination .lp-size {
  height: 32px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-size: var(--text-sm);
  padding: 0 8px;
  cursor: pointer;
}