/* ============================================================
   卓越者联盟 · 卓越智脑 AI 智能成绩管理系统
   统一设计系统 v1.0

   包含：CSS 变量（设计 Token）、通用工具类、动画、响应式
   ============================================================ */

/* ---------- 设计 Token（CSS 变量） ---------- */
:root {
    /* 主色系 */
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --secondary-deep: #2471a3;
    --accent-color: #1abc9c;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;

    /* 灰阶 */
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;
    --dark-gray: #6c757d;

    /* 渐变（统一到品牌蓝系，消除紫色方言；起色加深以满足白字 AA 对比度） */
    --gradient-primary: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
    --gradient-students: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
    --gradient-scores: linear-gradient(135deg, #1abc9c 0%, #2c3e50 100%);

    /* 阴影 */
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.10);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);

    /* 圆角 */
    --radius: 8px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* 过渡 */
    --transition: all 0.3s ease;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* 间距 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;

    /* 字体 */
    --font-family: 'Segoe UI', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 0.95rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.8rem;
    --font-size-3xl: 2rem;

    /* 行高 */
    --line-height: 1.6;
    --line-height-relaxed: 1.8;

    /* 容器 */
    --container-max: 1200px;

    /* 导航高度 */
    --navbar-height: 70px;

    /* Z-index 层级 */
    --z-navbar: 1000;
    --z-dropdown: 1001;
    --z-modal: 2000;
    --z-tooltip: 3000;

    /* 主题背景 */
    --bg-body-light: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --bg-body-dark: #0b1a2f;
}

/* ---------- 全局重置 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: var(--bg-body-light);
    min-height: 100vh;
    color: var(--primary-color, #2c3e50);
    line-height: var(--line-height);
}

/* ---------- 通用工具类 ---------- */

/* 文字 */
.text-center { text-align: center !important; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }

/* 间距 */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* 弹性布局 */
.d-flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* 网格 */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); }

/* 圆形图标容器 */
.icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.icon-circle-lg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.icon-circle-primary { background: rgba(52, 152, 219, 0.1); color: var(--secondary-color, #3498db); }
.icon-circle-success { background: rgba(46, 204, 113, 0.1); color: var(--success-color, #2ecc71); }
.icon-circle-warning { background: rgba(243, 158, 12, 0.1); color: var(--warning-color, #f39c12); }
.icon-circle-danger { background: rgba(231, 76, 60, 0.1); color: var(--danger-color, #e74c3c); }
.icon-circle-purple { background: rgba(155, 89, 182, 0.1); color: #9b59b6; }

/* 渐变文字 */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 徽章 */
.badge {
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.badge-primary { background: rgba(52, 152, 219, 0.1); color: var(--secondary-color, #3498db); }
.badge-success { background: rgba(46, 204, 113, 0.1); color: var(--success-color, #2ecc71); }

/* ---------- 动画 ---------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes slideInRight {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideUpModal {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------- 全局键盘焦点可见性兜底（WCAG 2.4.7） ---------- */
:focus-visible {
    outline: 2px solid var(--secondary-color, #3498db);
    outline-offset: 2px;
}
/* 表单控件已有 box-shadow 焦点环，避免与 outline 双重描边 */
.form-control:focus-visible {
    outline: none;
}

/* ---------- 跳转链接（WCAG 2.4.1 跳过重复内容） ---------- */
.skip-link {
    position: absolute;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    z-index: 20000;
    padding: 0.6rem 1.2rem;
    background: var(--secondary-color, #3498db);
    color: #fff;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-modal);
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---------- 响应式断点 ---------- */
@media (max-width: 1200px) {
    .grid-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

@media (max-width: 768px) {
    .grid-auto { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    .flex-between { flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }
}