/**
 * ============================================
 * 设计令牌系统 (Design Tokens System)
 * ============================================
 * 
 * 统一的设计变量定义系统
 * 支持主题切换和响应式设计
 * 
 * @author 廖斌
 * @version 1.0.0
 * @date 2025-01-XX
 */

:root {
  /* ==================== 颜色系统 ==================== */
  
  /* 品牌主色 */
  --color-primary: #00d4ff;           /* 主要品牌色 - 科技蓝 */
  --color-primary-dark: #00a8cc;      /* 主色深色变体 */
  --color-primary-light: #33ddff;     /* 主色浅色变体 */
  
  /* 辅助色彩 */
  --color-secondary: #8b5cf6;         /* 紫色辅助色 */
  --color-accent: #00ffaa;            /* 强调色 - 青绿色 */
  --color-success: #10b981;           /* 成功状态色 */
  --color-warning: #f59e0b;           /* 警告状态色 */
  --color-error: #ef4444;             /* 错误状态色 */
  --color-info: #3b82f6;              /* 信息状态色 */
  
  /* 特殊颜色 */
  --color-gold: #ffd700;              /* 金色 - 国家级荣誉 */
  --color-silver: #c0c0c0;            /* 银色 - 省级荣誉 */
  --color-bronze: #cd7f32;            /* 铜色 - 市级荣誉 */
  
  /* 文本颜色 */
  --text-primary: #ffffff;            /* 主要文本色 */
  --text-secondary: rgba(255, 255, 255, 0.7);  /* 次要文本色 */
  --text-tertiary: rgba(255, 255, 255, 0.5);   /* 第三文本色 */
  --text-inverse: #000000;            /* 反色文本 */
  
  /* 背景颜色 */
  --bg-primary: #0f172a;              /* 主背景色 */
  --bg-secondary: rgba(255, 255, 255, 0.05);   /* 次要背景 */
  --bg-tertiary: rgba(255, 255, 255, 0.1);     /* 第三背景 */
  --bg-glass: rgba(255, 255, 255, 0.08);       /* 玻璃背景 */
  --bg-glass-light: rgba(255, 255, 255, 0.08); /* 浅玻璃背景 */
  
  /* 边框颜色 */
  --border-color: rgba(255, 255, 255, 0.1);    /* 默认边框 */
  --border-strong: rgba(255, 255, 255, 0.2);   /* 强边框 */

  /* 渐变与发光 */
  --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);
  --gradient-night: linear-gradient(180deg, #0a0e27 0%, #1a1f3a 100%);
  --shadow-glow-error: 0 0 20px rgba(255, 61, 113, 0.3);

  /* 字体族 */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  
  /* ==================== 教育行业专用颜色 ==================== */
  
  /* 学科颜色 */
  --subject-chinese: #ff6b6b;         /* 语文 - 红色 */
  --subject-math: #4ecdc4;            /* 数学 - 青色 */
  --subject-english: #45b7d1;         /* 英语 - 蓝色 */
  --subject-physics: #96ceb4;         /* 物理 - 绿色 */
  --subject-chemistry: #feca57;       /* 化学 - 黄色 */
  --subject-biology: #ff9ff3;         /* 生物 - 粉色 */
  --subject-history: #54a0ff;         /* 历史 - 天蓝色 */
  --subject-geography: #5f27cd;       /* 地理 - 紫色 */
  --subject-politics: #00d2d3;        /* 政治 - 青绿色 */
  --subject-pe: #ff9f43;              /* 体育 - 橙色 */
  --subject-art: #c8d6e5;             /* 美术 - 灰蓝色 */
  --subject-music: #ee5a24;           /* 音乐 - 橙红色 */
  
  /* 年级颜色 */
  --grade-elementary: #00d4ff;        /* 小学 */
  --grade-middle: #00ffaa;            /* 初中 */
  --grade-high: #ffaa00;              /* 高中 */
  
  /* 荣誉等级颜色 */
  --honor-national: #ffd700;          /* 国家级 */
  --honor-provincial: #c0c0c0;        /* 省级 */
  --honor-municipal: #cd7f32;         /* 市级 */
  --honor-district: #a55eea;          /* 区县级 */
  --honor-school: #26de81;            /* 校级 */
  
  /* ==================== 排版系统 ==================== */
  
  /* 字体大小 */
  --font-size-xs: 12px;               /* 超小字体 */
  --font-size-sm: 14px;               /* 小字体 */
  --font-size-base: 16px;             /* 基础字体 */
  --font-size-lg: 18px;               /* 大字体 */
  --font-size-xl: 20px;               /* 超大字体 */
  --font-size-2xl: 24px;              /* 2倍大字体 */
  --font-size-3xl: 30px;              /* 3倍大字体 */
  --font-size-4xl: 36px;              /* 4倍大字体 */
  
  /* 字体粗细 */
  --font-weight-light: 300;           /* 细体 */
  --font-weight-normal: 400;          /* 正常 */
  --font-weight-medium: 500;          /* 中等 */
  --font-weight-semibold: 600;        /* 半粗体 */
  --font-weight-bold: 700;            /* 粗体 */
  --font-weight-extrabold: 800;       /* 超粗体 */
  
  /* 行高 */
  --line-height-none: 1;              /* 无行高 */
  --line-height-tight: 1.25;          /* 紧凑行高 */
  --line-height-snug: 1.375;          /* 舒适行高 */
  --line-height-normal: 1.5;          /* 正常行高 */
  --line-height-relaxed: 1.625;       /* 宽松行高 */
  --line-height-loose: 2;             /* 松散行高 */
  
  /* ==================== 间距系统 ==================== */
  
  /* 基础间距单位 */
  --spacing-xs: 4px;                  /* 超小间距 */
  --spacing-sm: 8px;                  /* 小间距 */
  --spacing-md: 12px;                 /* 中等间距 */
  --spacing-lg: 16px;                 /* 大间距 */
  --spacing-xl: 24px;                 /* 超大间距 */
  --spacing-2xl: 32px;                /* 2倍大间距 */
  --spacing-3xl: 48px;                /* 3倍大间距 */
  
  /* ==================== 圆角系统 ==================== */
  
  /* 圆角大小 */
  --radius-none: 0px;                 /* 无圆角 */
  --radius-sm: 4px;                   /* 小圆角 */
  --radius-md: 8px;                   /* 中等圆角 */
  --radius-lg: 12px;                  /* 大圆角 */
  --radius-xl: 16px;                  /* 超大圆角 */
  --radius-2xl: 24px;                 /* 2倍大圆角 */
  --radius-full: 9999px;              /* 全圆角 */
  
  /* ==================== 阴影系统 ==================== */
  
  /* 阴影层级 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-glow-error: 0 0 20px rgba(255, 61, 113, 0.3);  /* 错误发光阴影 */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* ==================== 毛玻璃效果 ==================== */
  
  /* 模糊程度 */
  --blur-sm: 4px;                     /* 小模糊 */
  --blur-md: 10px;                    /* 中等模糊 */
  --blur-lg: 20px;                    /* 大模糊 */
  --blur-xl: 40px;                    /* 超大模糊 */
  
  /* ==================== 动效系统 ==================== */
  
  /* 过渡时间 */
  --duration-75: 75ms;                /* 快速过渡 */
  --duration-100: 100ms;              /* 标准快速 */
  --duration-150: 150ms;              /* 标准过渡 */
  --duration-200: 200ms;              /* 中等过渡 */
  --duration-300: 300ms;              /* 慢速过渡 */
  --duration-500: 500ms;              /* 缓慢过渡 */
  --duration-700: 700ms;              /* 很慢过渡 */
  --duration-1000: 1000ms;            /* 极慢过渡 */
  
  /* 缓动函数 */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* 组合过渡 */
  --transition-base: all var(--duration-150) var(--ease-in-out);
  --transition-fast: all var(--duration-100) var(--ease-in-out);
  --transition-slow: all var(--duration-300) var(--ease-in-out);
  --transition-lg: all var(--duration-500) cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ==================== 断点系统 ==================== */
  
  /* 响应式断点 */
  --breakpoint-sm: 640px;             /* 小屏幕 */
  --breakpoint-md: 768px;             /* 中等屏幕 */
  --breakpoint-lg: 1024px;            /* 大屏幕 */
  --breakpoint-xl: 1280px;            /* 超大屏幕 */
  --breakpoint-2xl: 1536px;           /* 2倍超大屏幕 */
  
  /* ==================== z-index 层级 ==================== */
  
  /* 层级管理 */
  --z-auto: auto;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* ==================== 教育行业专用变量 ==================== */
  
  /* 卡片样式 */
  --card-bg: var(--bg-glass);
  --card-border: var(--border-color);
  --card-radius: var(--radius-xl);
  --card-shadow: var(--shadow-lg);
  --card-hover-shadow: var(--shadow-xl);
  
  /* 表单元素 */
  --form-bg: var(--bg-secondary);
  --form-border: var(--border-color);
  --form-focus-border: var(--color-primary);
  --form-radius: var(--radius-md);
  --form-padding: var(--spacing-md);
  
  /* 按钮样式 */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-hover: var(--color-primary-dark);
  --btn-secondary-bg: var(--bg-secondary);
  --btn-secondary-hover: var(--bg-tertiary);
  --btn-radius: var(--radius-md);
  --btn-padding: var(--spacing-sm) var(--spacing-lg);
  
  /* 列表样式 */
  --list-header-bg: var(--bg-secondary);
  --list-row-hover: var(--bg-secondary);
  --list-border: var(--border-color);
  
  /* 仪表板组件 */
  --dashboard-stat-bg: var(--bg-glass);
  --dashboard-chart-bg: var(--bg-glass);
  --dashboard-card-bg: var(--bg-glass);
  
  /* 荣誉展示 */
  --honor-card-bg: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --honor-badge-size: 48px;
  --honor-tag-bg: var(--color-accent);
  --gradient-primary: linear-gradient(135deg,#00d4ff 0%,#7b2ff7 100%);

  /* space/surface 别名（兼容 inline 样式） */
  --primary: #00d4ff;
  --surface-subtle: rgba(255,255,255,0.03);
  --surface-card: rgba(30,41,59,0.8);
  --bg-surface: rgba(255,255,255,0.05);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --text-xs: 0.75rem;
  --border-primary: rgba(255,255,255,0.2);
  --border-glass: rgba(255,255,255,0.1);
  --bg-elevated: rgba(30,41,59,0.9);
  --success: #10b981;
  --danger: #ff3d71;


/* ==================== 暗色主题适配 ==================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0f172a;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
  --error: #ef4444;
  --text-sm: 0.875rem;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;


/* ==================== 高对比度模式适配 ==================== */
@media (prefers-contrast: high) {
  :root {
    --border-color: rgba(255, 255, 255, 0.3);
    --text-secondary: rgba(255, 255, 255, 0.9);
  --gray-800: #1e293b;
  --purple-200: #e9d5ff;
  --primary-light: rgba(0,212,255,0.2);
  --gray-200: #e2e8f0;
  --border-subtle: rgba(255,255,255,0.08);
  --green-800: #166534;
  --background-secondary: rgba(30,41,59,0.9);
  --secondary-600: #475569;
  --surface-hover: rgba(255,255,255,0.06);
  --text-base: 1rem;
  --text-xl: 1.25rem;
  --space-8: 2rem;
  --purple-800: #581c87;
  --blue-200: #bfdbfe;
  --blue-800: #1e40af;
  --orange-800: #9a3412;
  --primary-600: #0891b2;
  --orange-200: #fed7aa;
  --space-10: 2.5rem;
  --text-lg: 1.125rem;
  --border-radius-sm: 6px;
  --green-200: #bbf7d0;
  --yellow-200: #fef08a;
  --red-200: #fecaca;
  --red-800: #991b1b;
  --yellow-800: #854d0e;
  --accent-color: #00d4ff;
  --primary-color: #00d4ff;
  --secondary-color: #94a3b8;


/* ==================== 减少动画模式适配 ==================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: none;
    --transition-fast: none;
    --transition-slow: none;
    --transition-lg: none;
  }
}

/* ==================== 教育行业语义化类名 ==================== */

/* 学科颜色类 */
.subject-chinese { color: var(--subject-chinese); }
.subject-math { color: var(--subject-math); }
.subject-english { color: var(--subject-english); }
.subject-physics { color: var(--subject-physics); }
.subject-chemistry { color: var(--subject-chemistry); }
.subject-biology { color: var(--subject-biology); }
.subject-history { color: var(--subject-history); }
.subject-geography { color: var(--subject-geography); }
.subject-politics { color: var(--subject-politics); }
.subject-pe { color: var(--subject-pe); }
.subject-art { color: var(--subject-art); }
.subject-music { color: var(--subject-music); }

/* 年级颜色类 */
.grade-elementary { color: var(--grade-elementary); }
.grade-middle { color: var(--grade-middle); }
.grade-high { color: var(--grade-high); }

/* 荣誉等级背景类 */
.honor-national-bg { background: var(--honor-national); }
.honor-provincial-bg { background: var(--honor-provincial); }
.honor-municipal-bg { background: var(--honor-municipal); }
.honor-district-bg { background: var(--honor-district); }
.honor-school-bg { background: var(--honor-school); }

/* 状态指示器 */
.status-active { color: var(--color-success); }
.status-pending { color: var(--color-warning); }
.status-inactive { color: var(--color-error); }
.status-processing { color: var(--color-info); }

/* ==================== 工具类 ==================== */

/* 文本工具类 */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* 间距工具类 */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-md); }
.m-4 { margin: var(--spacing-lg); }
.m-5 { margin: var(--spacing-xl); }
.m-6 { margin: var(--spacing-2xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }
.p-6 { padding: var(--spacing-2xl); }

/* 圆角工具类 */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* 阴影工具类 */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/* Flexbox 工具类 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }

/* Grid 工具类 */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 响应式工具类 */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Auto-fixed by fix-smart-management-css */
.active {
    background: var(--color-primary); color: white;
}

.filter-section {
    margin-bottom: var(--spacing-md, 1rem);
}

.main-content {
    flex: 1; padding: var(--spacing-lg, 1.5rem);
}

.modal {
    position: relative;
}

.modal-body {
    padding: var(--spacing-md, 1rem) 0;
}

.modal-close {
    position: absolute; top: var(--spacing-md, 1rem); right: var(--spacing-md, 1rem); background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary, #94a3b8); line-height: 1;
}

.modal-content {
    background: var(--bg-card, #1e293b); border-radius: var(--radius-lg, 12px); padding: var(--spacing-xl, 1.5rem); max-width: 90vw; max-height: 85vh; overflow-y: auto;
}

.modal-footer {
    padding-top: var(--spacing-md, 1rem); margin-top: var(--spacing-md, 1rem); border-top: 1px solid var(--border-color, rgba(255,255,255,0.1));
}

.modal-header {
    padding-bottom: var(--spacing-md, 1rem); margin-bottom: var(--spacing-md, 1rem); border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1));
}

.progress-bar {
    height: 8px; background: var(--bg-input, rgba(255,255,255,0.1)); border-radius: var(--radius-full, 9999px); overflow: hidden;
}

.progress-fill {
    height: 100%; background: var(--gradient-primary); transition: width 0.3s;
}

.quick-actions {
    display: flex; gap: var(--spacing-sm, 0.5rem); flex-wrap: wrap;
}

.sidebar {
    width: 240px; background: rgba(255,255,255,0.05); padding: var(--spacing-lg, 1.5rem);
}

.stat-card {
    background: var(--bg-glass, rgba(255,255,255,0.05)); backdrop-filter: blur(12px); border: 1px solid var(--border-color, rgba(255,255,255,0.1)); border-radius: var(--radius-lg, 12px); padding: var(--spacing-lg, 1.5rem);
}

.stat-icon {
    font-size: var(--font-size-2xl, 1.5rem); opacity: 0.8;
}

.stat-label {
    font-size: var(--font-size-sm, 0.875rem); color: var(--text-secondary, #94a3b8);
}

.stat-value {
    font-size: var(--font-size-xl, 1.25rem); font-weight: 700; color: var(--color-primary, #00d4ff);
}

.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--spacing-md, 1rem);
}

.status-badge {
    display: inline-block; padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem); border-radius: var(--radius-full, 9999px); font-size: var(--font-size-xs, 0.75rem); font-weight: 500;
}

.tab-content {
    padding: var(--spacing-lg, 1.5rem) 0;
}

.tabs-container {
    margin-bottom: var(--spacing-lg, 1.5rem);
}

/* Auto-fixed by fix-smart-management-css */
.chart-container {
    padding: 1rem; background: rgba(255,255,255,0.05); border-radius: 12px;
}

.chart-title {
    font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem;
}

.tab-button {
    padding: 0.5rem 1rem; border: none; background: none; cursor: pointer;
}

.trend-up {
    color: #00ff88;
}

/* Auto-fixed by fix-smart-management-css */
.form-control {
    width: 100%; padding: 0.5rem 1rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: rgba(255,255,255,0.05); color: inherit;
}

.module-container {
    padding: 1rem; background: rgba(255,255,255,0.03); border-radius: 12px;
}

.module-header {
    padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 1rem;
}

/* Auto-fixed by fix-smart-management-css */
.list-container {
    padding: 1rem; background: rgba(255,255,255,0.03); border-radius: 12px;
}

/* Auto-fixed by fix-smart-management-css */
.btn-block {
    display: block; width: 100%;
}

.btn-small {
    padding: 0.25rem 0.75rem; font-size: 0.875rem;
}

.controls {
    display: flex; gap: 0.5rem;
}

.recommendation-panel {
    padding: 1rem; background: rgba(255,255,255,0.05); border-radius: 12px; margin-bottom: 1rem;
}

.register-hint {
    font-size: 0.875rem; color: #94a3b8;
}

.register-link {
    color: #00d4ff; text-decoration: none;
}