/* ========== 全局样式 ========== */
:root {
    --primary: #4A90D9;
    --primary-dark: #357ABD;
    --success: #52C41A;
    --warning: #FAAD14;
    --danger: #FF4D4F;
    --bg: #F5F7FA;
    --card-bg: #FFFFFF;
    --text: #333333;
    --text-light: #666666;
    --border: #E8E8E8;
    --radius: 12px;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* ========== 导航栏 ========== */
.navbar {
    background: linear-gradient(135deg, var(--primary), #6C5CE7);
    color: white;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    box-shadow: 0 2px 8px rgba(74,144,217,0.3);
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-brand { font-size: 18px; font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-link {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
    transition: background 0.2s;
}
.nav-link:hover { background: rgba(255,255,255,0.15); }
.nav-link.active { background: rgba(255,255,255,0.25); color: #fff; font-weight: 600; }
.nav-link.nav-summer { background: linear-gradient(135deg, #f97316, #ec4899); color: white; font-weight: 600; }
.nav-link.nav-summer:hover { background: linear-gradient(135deg, #ea580c, #db2777); color: white; }
.nav-link.nav-summer.active { background: linear-gradient(135deg, #ea580c, #db2777); color: white; }
.nav-logout { background: rgba(255,255,255,0.1); }
.nav-user { font-size: 13px; margin-left: 8px; opacity: 0.9; display: inline-flex; align-items: center; gap: 6px; }
.nav-role-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    line-height: 1.4;
}
.nav-role-admin { background: rgba(234, 179, 8, 0.25); color: #fbbf24; }
.nav-role-teacher { background: rgba(96, 165, 250, 0.25); color: #93c5fd; }
.nav-role-student { background: rgba(167, 139, 250, 0.25); color: #c4b5fd; }
.nav-role-parent { background: rgba(52, 211, 153, 0.25); color: #6ee7b7; }

/* ========== 全局搜索框 ========== */
.nav-search {
    display: flex;
    align-items: center;
    margin: 0 auto 0 16px;
    flex: 0 1 300px;
    min-width: 180px;
}
.nav-search input {
    flex: 1;
    padding: 7px 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-right: none;
    border-radius: 20px 0 0 20px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    transition: background 0.2s, border-color 0.2s;
}
.nav-search input::placeholder { color: rgba(255,255,255,0.55); }
.nav-search input:focus {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
}
.search-shortcut {
    padding: 7px 12px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.3);
    border-left: none;
    border-radius: 0 20px 20px 0;
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
    font-family: inherit;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

/* ========== 模块切换器 ========== */
.module-switcher {
    display: flex;
    gap: 0;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 3px;
    margin: 0 12px;
    flex-shrink: 0;
}
.module-btn {
    flex: 1;
    min-width: 110px;
    text-align: center;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.module-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.12);
}
.module-btn.active {
    background: rgba(255,255,255,0.95);
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.module-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========== 导航下拉菜单 ========== */
.nav-dropdown {
    position: relative;
    display: inline-block;
}
.nav-dropdown-toggle {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    background: rgba(255,255,255,0.08);
    border: none;
    font-family: inherit;
    transition: background 0.2s;
}
.nav-dropdown-toggle:hover { background: rgba(255,255,255,0.15); }
.nav-dropdown-toggle::after {
    content: ' ▾';
    font-size: 10px;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 160px;
    z-index: 200;
    padding: 4px 0;
    margin-top: 4px;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 8px 16px;
    font-size: 14px;
    white-space: nowrap;
    transition: background 0.15s;
}
.nav-dropdown-menu a:hover { background: #f0edff; color: var(--primary); }

/* ========== 容器 ========== */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
    min-height: calc(100vh - 56px - 60px);
}

/* ========== 首页 ========== */
.hero {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius);
    color: white;
    margin-bottom: 32px;
}
.hero h1 { font-size: 32px; margin-bottom: 12px; }
.hero-subtitle { font-size: 16px; opacity: 0.9; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 16px; justify-content: center; }

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.feature-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.2s;
}
.feature-card:hover { transform: translateY(-4px); }
.feature-icon { font-size: 40px; margin-bottom: 12px; }
.feature-card h3 { margin-bottom: 8px; color: var(--primary); }
.feature-card p { font-size: 13px; color: var(--text-light); }

/* ========== 按钮 ========== */
.btn {
    display: inline-block;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    font-weight: 500;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); color: white; }
.btn-outline { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: white; }
.btn-lg { padding: 14px 32px; font-size: 16px; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ========== 认证页面 ========== */
.auth-container { display: flex; justify-content: center; padding-top: 40px; }
.auth-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 36px 32px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow);
}
.auth-card h2 { text-align: center; margin-bottom: 24px; }
.auth-link { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-light); }
.auth-link a { color: var(--primary); }

/* 验证码 */
.captcha-group { margin-bottom: 18px; }
.captcha-hint { font-weight: 400; font-size: 12px; color: #999; }
.captcha-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.captcha-question {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 42px;
    padding: 0 16px;
    background: linear-gradient(135deg, #F0F4FF, #E8EDF5);
    border: 1.5px solid #C7D2FE;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    font-family: "Courier New", monospace;
    color: #4A90D9;
    letter-spacing: 2px;
    user-select: none;
}
.captcha-input {
    flex: 1;
    max-width: 120px;
}
.captcha-refresh {
    flex-shrink: 0;
    padding: 8px 10px;
    font-size: 16px;
    line-height: 1;
}

/* ========== 表单 ========== */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}
.form-input:focus { outline: none; border-color: var(--primary); }
select.form-input { background: white; }

/* ========== 提示 ========== */
.alert {
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}
.alert-error { background: #FFF2F0; color: var(--danger); border: 1px solid #FFCCC7; }
.alert-success { background: #F6FFED; color: var(--success); border: 1px solid #B7EB8F; }

/* ========== 仪表板 ========== */
.welcome-section { margin-bottom: 24px; }
.welcome-section h2 { font-size: 22px; }
.welcome-section p { color: var(--text-light); }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
}
.stat-icon { font-size: 28px; margin-bottom: 8px; }
.stat-value { font-size: 28px; font-weight: 700; display: block; }
.stat-label { font-size: 13px; color: var(--text-light); }
.stat-mastered .stat-value { color: var(--success); }
.stat-wrong .stat-value { color: var(--danger); }
.stat-test .stat-value { color: var(--primary); }

.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.action-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text);
    transition: transform 0.2s;
}
.action-card:hover { transform: translateY(-3px); }
.action-icon { font-size: 32px; display: block; margin-bottom: 8px; }
.action-text { font-size: 14px; font-weight: 500; }

/* 进度条 */
.unit-progress-list { display: flex; flex-direction: column; gap: 12px; }
.unit-progress-item {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 14px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.unit-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 14px;
}
.unit-name { font-weight: 500; }
.unit-stats { color: var(--text-light); font-size: 13px; }
.progress-bar {
    height: 8px;
    background: #E8E8E8;
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--success));
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* 最近错题 */
.wrong-item-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--card-bg);
    border-radius: 8px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    font-size: 13px;
}
.wrong-kp { color: var(--primary); font-weight: 500; white-space: nowrap; }
.wrong-content { flex: 1; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.section { margin-bottom: 28px; }
.section h3 { margin-bottom: 16px; font-size: 17px; }

/* ========== 知识体系 ========== */
.unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.unit-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text);
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid var(--primary);
}
.unit-card:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.unit-card-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.unit-code { font-size: 12px; color: var(--primary); font-weight: 600; }
.unit-topic-count { font-size: 12px; color: var(--text-light); }
.unit-card h3 { font-size: 15px; margin-bottom: 8px; }
.unit-card-footer { font-size: 12px; color: var(--text-light); }

.breadcrumb { margin-bottom: 16px; font-size: 14px; color: var(--text-light); }
.breadcrumb a { color: var(--primary); text-decoration: none; }

.topic-section { margin-bottom: 28px; }
.topic-title {
    font-size: 17px;
    color: var(--primary);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary);
    margin-bottom: 12px;
}
.kp-list { display: flex; flex-direction: column; gap: 8px; }
.kp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: background 0.2s;
}
.kp-item.kp-mastered { border-left: 3px solid var(--success); }
.kp-item.kp-learning { border-left: 3px solid var(--warning); }
.kp-item.kp-weak { border-left: 3px solid var(--danger); }
.kp-info { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kp-code { font-size: 12px; color: var(--text-light); font-family: monospace; }
.kp-name { font-size: 14px; font-weight: 500; }
.kp-category {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #F0F5FF;
    color: var(--primary);
}
.kp-difficulty { font-size: 10px; }

/* 掌握度标签 */
.mastery-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}
.mastery-5 { background: #F6FFED; color: #389E0D; }
.mastery-4 { background: #E6FFFB; color: #08979C; }
.mastery-3 { background: #E6F7FF; color: #096DD9; }
.mastery-2 { background: #FFFBE6; color: #D48806; }
.mastery-1 { background: #FFF2F0; color: #CF1322; }
.mastery-0 { background: #F5F5F5; color: #999; }

/* ========== 测试页面 ========== */
.test-setup {
    max-width: 500px;
    margin: 40px auto;
    background: var(--card-bg);
    padding: 32px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.test-setup h2 { text-align: center; margin-bottom: 8px; }
.test-setup .page-desc { text-align: center; color: var(--text-light); margin-bottom: 24px; }

.test-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--card-bg);
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    font-weight: 500;
}

.question-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
}
.question-header { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 13px; }
.question-kp { color: var(--primary); font-weight: 500; }
.question-difficulty { color: #FAAD14; }
.question-content { font-size: 16px; margin-bottom: 20px; line-height: 1.8; white-space: pre-line; }

.option-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.option-item:hover { border-color: var(--primary); background: #F0F5FF; }
.option-item.selected { border-color: var(--primary); background: #E6F7FF; }
.option-label {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}
.selected .option-label { background: var(--primary); color: white; }
.option-text { font-size: 14px; }

/* 填空 / 能力提升答案区域 */
.fill-answer-area {
    margin-top: 16px;
    padding: 16px;
    background: #F9FAFB;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.fill-answer-area label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #444;
    margin-bottom: 8px;
}
.fill-answer-area .form-input {
    font-size: 15px;
    padding: 10px 14px;
}

.test-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

/* 测试结果 */
.result-summary {
    text-align: center;
    padding: 28px;
    background: var(--card-bg);
    border-radius: var(--radius);
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.result-score { font-size: 56px; font-weight: 700; color: var(--primary); }
.result-score-unit { font-size: 20px; color: var(--text-light); }
.result-detail { color: var(--text-light); margin-top: 8px; }

.result-points-info {
    margin: 12px 0;
    padding: 10px 16px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fbbf24;
    border-radius: 8px;
    color: #92400e;
    font-size: 14px;
    text-align: center;
}
.result-points-info strong { color: #b45309; }

.result-item {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.result-item.correct { border-left: 3px solid var(--success); }
.result-item.wrong { border-left: 3px solid var(--danger); }
.result-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.result-icon { font-size: 18px; }
.result-kp { font-size: 13px; color: var(--primary); }
.result-content { font-size: 14px; margin-bottom: 8px; white-space: pre-line; }
.result-answers { display: flex; gap: 20px; font-size: 13px; margin-bottom: 6px; }
.result-explanation {
    background: #FFFBE6;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 6px;
}
.text-correct { color: var(--success); }
.text-wrong { color: var(--danger); }
.text-learning { color: var(--warning); }

.result-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

/* ========== 错题本 ========== */
.error-stats {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.error-stats h3 { margin-bottom: 12px; font-size: 15px; }
.error-stats-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.error-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #FFF2F0;
    border-radius: 20px;
    font-size: 13px;
}
.error-type { font-weight: 500; color: var(--danger); }
.error-count { color: var(--text-light); }

.wrong-actions { margin-bottom: 20px; }

.wrong-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
    border-left: 3px solid var(--danger);
}
.wrong-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    font-size: 13px;
}
.wrong-unit { color: var(--text-light); }
.wrong-kp { color: var(--primary); font-weight: 500; }
.tag-error { background: #FFF2F0; color: var(--danger); padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.wrong-content { font-size: 15px; margin-bottom: 10px; line-height: 1.8; white-space: pre-line; }
.wrong-options { margin-bottom: 10px; }
.option-row { padding: 4px 0; font-size: 13px; color: var(--text-light); }
.wrong-answers { display: flex; gap: 20px; font-size: 13px; margin-bottom: 8px; }
.wrong-analysis { background: #F0F5FF; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 8px; }
.wrong-card-actions { text-align: right; }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.empty-icon { font-size: 48px; margin-bottom: 12px; }

/* ========== 掌握度页面 ========== */
.unit-progress-cards { display: flex; flex-direction: column; gap: 14px; }
.progress-unit-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.progress-unit-name { font-weight: 500; margin-bottom: 8px; font-size: 15px; }
.progress-bar-large {
    height: 12px;
    background: #E8E8E8;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.fill-excellent { background: linear-gradient(90deg, #52C41A, #73D13D); }
.fill-good { background: linear-gradient(90deg, #1890FF, #40A9FF); }
.fill-learning { background: linear-gradient(90deg, #FAAD14, #FFC53D); }
.fill-weak { background: linear-gradient(90deg, #FF4D4F, #FF7875); }
.progress-unit-stats { display: flex; gap: 16px; font-size: 13px; }

.mastery-legend { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

.mastery-table-wrapper { overflow-x: auto; }
.mastery-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
}
.mastery-table th {
    background: #FAFAFA;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.mastery-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #F0F0F0;
}
.row-mastered { background: rgba(82,196,26,0.03); }
.row-learning { background: rgba(250,173,20,0.03); }
.row-weak { background: rgba(255,77,79,0.03); }

/* ========== 页脚 ========== */
.footer {
    text-align: center;
    padding: 16px;
    color: var(--text-light);
    font-size: 12px;
    border-top: 1px solid var(--border);
    margin-top: 32px;
}
.footer-icp {
    margin-top: 6px;
    font-size: 11px;
    color: #9ca3af;
}
.footer-icp a {
    color: #818cf8;
    text-decoration: none;
}
.footer-icp a:hover {
    text-decoration: underline;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .stats-grid, .quick-actions { grid-template-columns: repeat(2, 1fr); }
    .hero h1 { font-size: 24px; }
    .navbar { padding: 0 12px; }
    .nav-links { gap: 4px; }
    .nav-link { padding: 4px 8px; font-size: 12px; }
    .unit-grid { grid-template-columns: 1fr; }
}

/* ========== 错题重做横幅 ========== */
.retry-banner {
    background: linear-gradient(135deg, #FF4D4F, #FF7875);
    color: white;
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
    animation: pulse-banner 2s ease-in-out infinite;
}

@keyframes pulse-banner {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* ========== 管理员导航按钮 ========== */
.nav-admin {
    background: linear-gradient(135deg, #FF6B35, #F7C59F);
    color: white !important;
    border-radius: 6px;
    padding: 4px 10px !important;
    font-weight: 600;
}
.nav-admin:hover { opacity: 0.85; }

/* ========== 管理员页面通用 ========== */
.admin-page { padding: 20px 0; }
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.admin-header h2 { margin: 0; font-size: 22px; }

/* ========== 过滤表单 ========== */
.filter-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: center;
}
.filter-input {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
}
.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    background: white;
    min-width: 140px;
}
.total-count { margin-bottom: 12px; color: #666; font-size: 14px; }

/* ========== 管理员表格 ========== */
.table-wrapper { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.admin-table th {
    background: #F5F7FA;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #444;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #F0F0F0;
    vertical-align: middle;
}
.admin-table tr:hover td { background: #F9FBFF; }
.question-content-cell { max-width: 280px; color: #333; }
.action-cell { white-space: nowrap; }
.empty-row { text-align: center; color: #999; padding: 30px; }

/* ========== 标签样式 ========== */
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}
.tag-blue { background: #E8F4FD; color: #1890FF; }
.tag-green { background: #E8F8EE; color: #52C41A; }
.tag-orange { background: #FFF3E0; color: #FF6B35; }
.tag-purple { background: #F3E8FF; color: #7C3AED; }

/* ========== 难度星星 ========== */
.difficulty-dot { font-size: 12px; }
.diff-1 { color: #52C41A; }
.diff-2 { color: #FAAD14; }
.diff-3 { color: #FF4D4F; }

/* ========== 小按钮 ========== */
.btn-sm {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    margin: 0 2px;
}
.btn-edit { background: #E8F4FD; color: #1890FF; border-color: #B3D9F7; text-decoration: none; }
.btn-edit:hover { background: #1890FF; color: white; }
.btn-delete { background: #FFF1F0; color: #FF4D4F; border-color: #FFC0BF; }
.btn-delete:hover { background: #FF4D4F; color: white; }

/* ========== 分页 ========== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}
.page-btn {
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--primary);
    font-size: 14px;
}
.page-btn:hover { background: var(--primary); color: white; }
.page-info { color: #666; font-size: 14px; }

/* ========== 题目表单 ========== */
.question-form { max-width: 800px; }
.form-section {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}
.form-section h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 1px solid #F0F0F0;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 14px; font-weight: 500; color: #444; }
.form-control {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.form-control:focus { outline: none; border-color: var(--primary); }
textarea.form-control { resize: vertical; font-family: inherit; }
.required { color: #FF4D4F; }
.help-text { color: #888; font-size: 13px; margin: 0 0 12px 0; }
.form-actions { display: flex; gap: 12px; margin-top: 8px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; }

/* ========== 综合题额外知识点 ========== */
.extra-kp-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.extra-kp-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F0F5FF;
    border: 1px solid #ADC6FF;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
}

/* ========== 错误页面 ========== */
.error-page {
    text-align: center;
    padding: 80px 20px;
}
.error-icon { font-size: 60px; margin-bottom: 16px; }
.error-page h2 { color: #FF4D4F; margin-bottom: 24px; }

/* ========== admin-header 操作按钮组 ========== */
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.admin-header h2 { margin: 0; }
.admin-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ========== 导入弹窗 ========== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.modal-box {
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 16px; }
.modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.modal-close:hover { color: #333; }
.modal-body { padding: 16px 20px; flex: 1; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
}

/* 上传区域 */
.upload-area {
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin-top: 12px;
    user-select: none;
}
.upload-area:hover, .upload-area.dragover {
    border-color: var(--primary);
    background: #F0F7FF;
}
.upload-icon { font-size: 32px; margin-bottom: 8px; }
.upload-area p { color: #888; font-size: 14px; margin: 0; }
.file-name { margin-top: 8px; font-size: 13px; color: var(--primary); font-weight: 500; }

/* 格式提示 */
.format-hint {
    margin: 10px 0 4px;
    font-size: 13px;
    color: #666;
}
.format-hint summary { cursor: pointer; color: var(--primary); user-select: none; }
.code-pre {
    background: #F6F8FA;
    border: 1px solid #E1E4E8;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
    font-family: Consolas, Monaco, monospace;
    color: #24292F;
    overflow-x: auto;
    margin-top: 8px;
    white-space: pre;
}

/* 导入结果 */
.import-result {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.8;
}
.import-success { background: #F6FFED; border: 1px solid #B7EB8F; color: #389E0D; }
.import-error   { background: #FFF2F0; border: 1px solid #FFA39E; color: #CF1322; }

/* 导入选项卡 */
.import-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    border-bottom: 2px solid #E8E8E8;
}
.import-tab {
    padding: 8px 20px;
    border: none;
    background: none;
    color: #8C8C8C;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.import-tab.active {
    color: #4A90D9;
    border-bottom-color: #4A90D9;
    font-weight: 600;
}
.import-tab:hover { color: #4A90D9; }
.import-panel { animation: fadeIn 0.2s ease; }

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

/* ========== 响应式补充（移动端） ========== */
@media (max-width: 768px) {
    /* 导航 */
    .nav-brand { font-size: 15px; }
    .nav-links { gap: 4px; }
    .nav-link { padding: 5px 8px; font-size: 13px; }

    /* 页面整体 */
    .admin-page { padding: 12px; }

    /* 管理页头部 */
    .admin-header { flex-direction: column; align-items: flex-start; }
    .admin-header-actions { width: 100%; }
    .admin-header-actions .btn { flex: 1 1 calc(50% - 4px); text-align: center; font-size: 13px; padding: 7px 8px; }

    /* 过滤表单 */
    .filter-form { flex-direction: column; gap: 8px; }
    .filter-input, .filter-select { width: 100%; }
    .filter-form .btn { width: 100%; }

    /* 题目表格：隐藏部分列，缩小字体 */
    .admin-table { font-size: 12px; }
    .admin-table th:nth-child(4),
    .admin-table td:nth-child(4) { display: none; } /* 隐藏知识点列 */
    .admin-table th:nth-child(5),
    .admin-table td:nth-child(5) { display: none; } /* 隐藏单元列 */
    .question-content-cell { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .action-cell { white-space: nowrap; }
    .btn-sm { padding: 3px 8px; font-size: 12px; }

    /* 弹窗全屏化 */
    .modal-box { max-height: 100vh; border-radius: 12px 12px 0 0; margin-top: auto; }
    .modal-overlay { align-items: flex-end; padding: 0; }

    /* 表单 */
    .form-row { grid-template-columns: 1fr; }
    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; text-align: center; }

    /* 卡片/面板 */
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .card { padding: 14px; }

    /* 分页 */
    .pagination { gap: 8px; flex-wrap: wrap; justify-content: center; }
    .page-btn { padding: 6px 14px; font-size: 13px; }
}

@media (max-width: 480px) {
    .admin-header-actions .btn { flex: 1 1 100%; }
    .stats-grid { grid-template-columns: 1fr; }
    .admin-table th:nth-child(6),
    .admin-table td:nth-child(6) { display: none; } /* 超小屏再隐藏难度列 */
}

/* ========== 移动端完整适配（手机优先） ========== */

/* 汉堡菜单按钮 - 仅移动端显示 */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

@media (max-width: 768px) {
    /* 导航栏改为竖排折叠式 */
    .navbar { flex-wrap: wrap; height: auto; padding: 0 16px; position: relative; }
    .nav-brand { padding: 14px 0; flex: 1; }
    .nav-search { order: 3; width: 100%; margin: 0 0 8px 0; flex: 0 0 100%; min-width: unset; }
    .nav-search input { font-size: 0.9rem; padding: 9px 14px; }
    .search-shortcut { display: none; }
    .nav-toggle { display: block; padding: 14px 0; }
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: rgba(0,0,0,0.15);
        border-radius: 0 0 8px 8px;
        padding: 8px 0 12px;
        gap: 2px;
    }
    .nav-links.open { display: flex; }
    .nav-link { padding: 10px 16px; font-size: 15px; border-radius: 6px; }
    .nav-user { padding: 8px 16px; font-size: 14px; }

    /* 移动端下拉菜单：展开显示 */
    .nav-dropdown { width: 100%; }
    .nav-dropdown-toggle { display: none; }
    .nav-dropdown-menu {
        display: flex;
        flex-direction: column;
        position: static;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        min-width: auto;
    }
    .nav-dropdown-menu a {
        color: rgba(255,255,255,0.85);
        padding: 10px 16px 10px 32px;
        font-size: 14px;
        border-radius: 6px;
    }
    .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.12); color: white; }

    /* 容器内边距 */
    .container { padding: 16px 12px; }

    /* 首页 hero 区域 */
    .hero { padding: 36px 16px; }
    .hero h1 { font-size: 22px; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-actions .btn { width: 200px; }

    /* 仪表板统计卡片 */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 14px 10px; }
    .stat-value { font-size: 22px; }

    /* 快捷操作 */
    .quick-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
    .action-card { padding: 16px 10px; }
    .action-icon { font-size: 24px; }
    .action-text { font-size: 13px; }

    /* 单元卡片 */
    .unit-grid { grid-template-columns: 1fr; }

    /* 测试页面 */
    .test-setup { padding: 20px 16px; }
    .quiz-option { padding: 12px 14px; font-size: 15px; min-height: 48px; }
    .opt-label { width: 32px; height: 32px; font-size: 14px; }
    .quiz-actions { flex-direction: column; gap: 10px; }
    .quiz-actions .btn { width: 100%; }

    /* 数据表格手机适配 */
    .data-table { font-size: 13px; }
    .data-table th, .data-table td { padding: 8px 10px; }

    /* 表单 */
    .auth-card { padding: 24px 16px; }
    .btn-lg { padding: 12px 24px; font-size: 15px; }

    /* 错题本 */
    .wrong-item { flex-direction: column; }
    .wrong-item-header { flex-wrap: wrap; }

    /* 进度页面 */
    .progress-grid { grid-template-columns: 1fr; }

    /* 教师看板双列改单列 */
    .teacher-grid { grid-template-columns: 1fr !important; }

    /* 通用卡片 */
    .card { padding: 14px 12px; }
    h2 { font-size: 18px; }
    h3 { font-size: 15px; }
}

@media (max-width: 400px) {
    .stats-grid { grid-template-columns: 1fr; }
    .quick-actions { grid-template-columns: 1fr; }
    .hero h1 { font-size: 20px; }
    .nav-brand { font-size: 15px; }
}

/* 表格通用样式（教师看板用） */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.data-table th {
    background: var(--bg);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.data-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg); }

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg);
    color: var(--text-light);
}
.rank-top { background: #FFFBE6; color: #D48806; }

/* 通用卡片样式 */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 0;
}

/* ==================== 语音输入样式 ==================== */
.btn-voice {
    padding: 6px 14px;
    border: 1px solid var(--primary);
    border-radius: 20px;
    background: white;
    color: var(--primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-voice:hover {
    background: var(--primary);
    color: white;
}
.btn-voice.listening {
    background: #FF4D4F;
    color: white;
    border-color: #FF4D4F;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(255, 77, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); }
}
.voice-feedback {
    margin-top: 12px;
    padding: 8px 14px;
    background: #E8F4FD;
    border-radius: 6px;
    font-size: 13px;
    color: var(--primary);
    text-align: center;
}
.voice-hint {
    margin-top: 12px;
    padding: 8px 12px;
    background: #FFFBE6;
    border-radius: 6px;
    font-size: 12px;
    color: #D48806;
}

/* ==================== 手写输入样式 ==================== */
.answer-input-section {
    margin-top: 16px;
}
.handwrite-section {
    margin-top: 12px;
}
.handwrite-area {
    margin-top: 12px;
    padding: 16px;
    background: #F9FAFB;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.handwrite-canvas {
    width: 100%;
    height: 200px;
    background: white;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: crosshair;
    touch-action: none; /* 防止触摸滚动 */
    display: block;
}
.handwrite-controls {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
}
.handwrite-hint {
    margin-top: 8px;
    padding: 6px 10px;
    background: #E8F8EE;
    border-radius: 6px;
    font-size: 12px;
    color: var(--success);
    text-align: center;
}
.handwrite-preview {
    margin-top: 12px;
    padding: 12px;
    background: #F0F5FF;
    border-radius: 8px;
    border: 1px solid #91D5FF;
}
.preview-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 8px;
}
.preview-image {
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 8px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .btn-voice {
        padding: 8px 12px;
        font-size: 14px;
    }
    .handwrite-canvas {
        height: 150px;
    }
    .handwrite-controls {
        flex-direction: column;
    }
    .handwrite-controls .btn {
        width: 100%;
    }
}

/* ============================================================
   化学学习辅助系统 - 优化方案样式补充
   移动端Tab栏、游戏界面增强、打卡弹窗、成就页面
   ============================================================ */

/* ---------- 移动端底部 Tab 导航栏 ---------- */
.mobile-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.mobile-tab-bar .tab-inner {
    display: flex;
    height: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.mobile-tab-bar .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    text-decoration: none;
    font-size: 11px;
    transition: color 0.2s;
    position: relative;
}

.mobile-tab-bar .tab-item .tab-icon {
    font-size: 22px;
    margin-bottom: 2px;
}

.mobile-tab-bar .tab-item.active {
    color: #6366f1;
}

.mobile-tab-bar .tab-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: #6366f1;
    border-radius: 0 0 3px 3px;
}

.mobile-tab-bar .tab-badge {
    position: absolute;
    top: 4px;
    right: 50%;
    margin-right: -18px;
    min-width: 18px;
    height: 18px;
    background: #ef4444;
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

@media (max-width: 768px) {
    .mobile-tab-bar {
        display: block;
    }
    body {
        padding-bottom: 70px;
    }
}

/* ---------- 打卡弹窗 ---------- */
.checkin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s;
}

.checkin-popup {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 380px;
    overflow: hidden;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.checkin-popup .checkin-header {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    padding: 30px 20px;
    text-align: center;
    color: #fff;
}

.checkin-popup .checkin-icon {
    font-size: 52px;
    margin-bottom: 8px;
    animation: bounceIn 0.6s;
}

.checkin-popup .checkin-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.checkin-popup .checkin-subtitle {
    font-size: 14px;
    opacity: 0.85;
}

.checkin-popup .checkin-body {
    padding: 24px 20px;
    text-align: center;
}

.checkin-popup .streak-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

.checkin-popup .streak-flame {
    font-size: 28px;
    animation: flameFlicker 1s infinite alternate;
}

.checkin-popup .streak-count {
    font-size: 36px;
    font-weight: 800;
    color: #f97316;
}

.checkin-popup .streak-label {
    font-size: 14px;
    color: #6b7280;
}

.checkin-popup .week-calendar {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 16px 0;
}

.checkin-popup .day-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: #f3f4f6;
    color: #9ca3af;
    transition: all 0.3s;
}

.checkin-popup .day-dot.checked {
    background: #22c55e;
    color: #fff;
}

.checkin-popup .day-dot.today {
    border: 2px solid #6366f1;
}

.checkin-popup .checkin-btn {
    display: inline-block;
    padding: 12px 36px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 12px;
}

.checkin-popup .checkin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99,102,241,0.4);
}

.checkin-popup .checkin-btn:disabled {
    background: #d1d5db;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---------- 游戏结算弹窗 ---------- */
.game-result-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s;
}

.game-result-popup {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 360px;
    overflow: hidden;
    text-align: center;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.game-result-popup .result-header {
    padding: 28px 20px 16px;
}

.game-result-popup .result-icon {
    font-size: 56px;
    margin-bottom: 8px;
    animation: bounceIn 0.6s;
}

.game-result-popup .result-title {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

.game-result-popup .result-score {
    font-size: 48px;
    font-weight: 900;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 8px 0;
}

.game-result-popup .result-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 12px 20px;
    background: #f9fafb;
    margin: 0 20px;
    border-radius: 12px;
}

.game-result-popup .result-stat {
    text-align: center;
}

.game-result-popup .result-stat-val {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.game-result-popup .result-stat-label {
    font-size: 11px;
    color: #9ca3af;
}

.game-result-popup .result-achievement {
    margin: 16px 20px;
    padding: 12px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 12px;
    animation: slideUp 0.5s 0.3s both;
}

.game-result-popup .result-achievement .ach-icon {
    font-size: 28px;
}

.game-result-popup .result-achievement .ach-text {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    margin-top: 4px;
}

.game-result-popup .result-actions {
    display: flex;
    gap: 10px;
    padding: 16px 20px 24px;
}

.game-result-popup .btn-retry,
.game-result-popup .btn-next {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.game-result-popup .btn-retry {
    background: #f3f4f6;
    color: #374151;
}

.game-result-popup .btn-retry:hover {
    background: #e5e7eb;
}

.game-result-popup .btn-next {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

.game-result-popup .btn-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}

/* ---------- 限时竞速计时器 ---------- */
.speed-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 28px;
    font-weight: 800;
    color: #111827;
}

.speed-timer.urgent {
    color: #ef4444;
    animation: pulse 0.5s infinite;
}

.speed-timer .timer-icon {
    font-size: 24px;
}

.speed-progress {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}

.speed-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 3px;
    transition: width 0.3s;
}

.speed-progress .progress-fill.urgent {
    background: linear-gradient(90deg, #ef4444, #f97316);
    animation: pulse 0.5s infinite;
}

/* ---------- 排行榜样式 ---------- */
.leaderboard-list {
    list-style: none;
    padding: 0;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s;
}

.leaderboard-item:hover {
    background: #f9fafb;
}

.leaderboard-item.me {
    background: #eef2ff;
    border-radius: 8px;
}

.leaderboard-rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    background: #f3f4f6;
    color: #6b7280;
    flex-shrink: 0;
}

.leaderboard-rank.top-1 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    font-size: 18px;
}

.leaderboard-rank.top-2 {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    color: #fff;
    font-size: 18px;
}

.leaderboard-rank.top-3 {
    background: linear-gradient(135deg, #fcd34d, #d97706);
    color: #fff;
    font-size: 18px;
}

.leaderboard-info {
    flex: 1;
    min-width: 0;
}

.leaderboard-name {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-detail {
    font-size: 12px;
    color: #9ca3af;
}

.leaderboard-score {
    font-size: 18px;
    font-weight: 800;
    color: #6366f1;
    flex-shrink: 0;
}

/* ---------- 成就页面 ---------- */
.achievements-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.achievement-header {
    text-align: center;
    padding: 24px 0;
}

.achievement-header .ach-title {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.achievement-header .ach-progress {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.achievement-header .progress-ring {
    width: 80px;
    height: 80px;
}

.achievement-header .progress-text {
    text-align: left;
}

.achievement-header .progress-pct {
    font-size: 32px;
    font-weight: 800;
    color: #6366f1;
}

.achievement-header .progress-count {
    font-size: 14px;
    color: #6b7280;
}

.achievement-category {
    margin: 24px 0 12px;
}

.achievement-category .cat-title {
    font-size: 16px;
    font-weight: 700;
    color: #374151;
    padding-bottom: 8px;
    border-bottom: 2px solid #6366f1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.achievement-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.achievement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.achievement-card.earned {
    border-color: #22c55e;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.achievement-card.earned::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 16px;
    color: #22c55e;
    font-weight: 700;
}

.achievement-card .ach-card-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.achievement-card .ach-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.achievement-card .ach-card-desc {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}

.achievement-card .ach-card-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.achievement-card .ach-card-bar .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 2px;
    transition: width 0.5s;
}

.achievement-card.earned .ach-card-bar .bar-fill {
    background: #22c55e;
}

.achievement-card .ach-card-reward {
    font-size: 11px;
    color: #f59e0b;
    margin-top: 4px;
    font-weight: 600;
}

/* ---------- 成就获得动画 ---------- */
.achievement-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #f59e0b;
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(245,158,11,0.3);
    animation: achieveSlideIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.achievement-toast .toast-icon {
    font-size: 36px;
    animation: bounceIn 0.8s;
}

.achievement-toast .toast-info {
    text-align: left;
}

.achievement-toast .toast-label {
    font-size: 11px;
    color: #92400e;
    font-weight: 600;
    text-transform: uppercase;
}

.achievement-toast .toast-name {
    font-size: 16px;
    font-weight: 700;
    color: #78350f;
}

.achievement-toast.fade-out {
    animation: achieveSlideOut 0.4s forwards;
}

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

@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bounceIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

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

@keyframes flameFlicker {
    from { transform: scale(1); }
    to { transform: scale(1.15) rotate(2deg); }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

@keyframes achieveSlideIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-60px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes achieveSlideOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(-60px); }
}

/* ---------- 排行榜筛选器 ---------- */
.leaderboard-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.leaderboard-filters .filter-btn {
    padding: 6px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.leaderboard-filters .filter-btn:hover {
    border-color: #6366f1;
    color: #6366f1;
}

.leaderboard-filters .filter-btn.active {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}

/* ---------- Dashboard 新增统计卡片 ---------- */
.stat-card.stat-checkin {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
}

.stat-card.stat-checkin .stat-icon {
    background: rgba(99,102,241,0.15);
}

.stat-card.stat-checkin .stat-value {
    color: #6366f1;
}

.stat-card.stat-points {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.stat-card.stat-points .stat-icon {
    background: rgba(245,158,11,0.15);
}

.stat-card.stat-points .stat-value {
    color: #f59e0b;
}
/* ==================== 宽屏适配 — 编辑页面 ==================== */
.edit-page .container {
    max-width: 100%;
    padding-left: 32px;
    padding-right: 32px;
}
.edit-page .form-card,
.edit-page .edit-form {
    max-width: 100%;
}
/* 选项四列并排（宽屏） */
.edit-page .option-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
/* 大屏更大间距 */
@media (min-width: 1400px) {
    .edit-page .container {
        padding-left: 48px;
        padding-right: 48px;
    }
    .edit-page .edit-form .form-group {
        max-width: none;
    }
}
@media (max-width: 900px) {
    .edit-page .option-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 500px) {
    .edit-page .option-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== 化学式显示样式 ==================== */

/* 题库列表中的化学式 */
.chem-formula,
.question-content,
.question-content-cell {
    font-feature-settings: "subs" on;
}

/* 化学式中的下标 */
.chem-sub {
    font-size: 0.7em;
    vertical-align: sub;
}

/* 化学式中的上标 */
.chem-sup {
    font-size: 0.7em;
    vertical-align: super;
}

/* 化学式工具栏 */
.chem-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
    background: #f0f4ff;
    border-bottom: 1px solid #d1d5db;
    margin-bottom: 0;
}
.chem-toolbar button {
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    color: #374151;
}
.chem-toolbar button:hover {
    background: #eef0ff;
    border-color: #4D4DFA;
    color: #4D4DFA;
}

/* 化学式工具栏中的分隔线 */
.chem-toolbar .toolbar-divider {
    width: 1px;
    background: #d1d5db;
    margin: 2px 6px;
    flex-shrink: 0;
    align-self: stretch;
}

/* 化学方程式的箭头和符号 */
.chem-arrow {
    color: #4D4DFA;
    font-weight: bold;
}
.chem-cond {
    font-size: 0.75em;
    color: #6b7280;
}

/* 编辑页面中减小 chem-toolbar 按钮在移动端的 padding */
@media (max-width: 600px) {
    .chem-toolbar {
        padding: 6px 8px;
        gap: 2px;
    }
    .chem-toolbar button {
        padding: 3px 7px;
        font-size: 11px;
    }
    .chem-toolbar .toolbar-divider {
        margin: 1px 3px;
    }
}

/* ==================== 富文本编辑器样式 ==================== */
.richtext-wrapper {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.richtext-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    user-select: none;
}
.richtext-toolbar button {
    width: 32px; height: 32px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #374151;
    transition: all 0.15s;
    flex-shrink: 0;
}
.richtext-toolbar button:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}
.richtext-toolbar button.active {
    background: var(--primary, #4f46e5);
    color: #fff;
    border-color: var(--primary, #4f46e5);
}
.toolbar-divider {
    width: 1px;
    background: #d1d5db;
    margin: 4px 6px;
    flex-shrink: 0;
}
.toolbar-label {
    font-size: 11px;
    color: #9ca3af;
    display: flex; align-items: center;
    padding: 0 4px;
    flex-shrink: 0;
}
.richtext-editor {
    min-height: 160px;
    max-height: 500px;
    padding: 14px 16px;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.8;
    color: #1f2937;
    outline: none;
    word-break: break-word;
}
.richtext-editor:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}
.richtext-editor img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 6px;
    margin: 4px 0;
    cursor: pointer;
    border: 1px solid #e5e7eb;
}
.richtext-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
    font-size: 14px;
}
.richtext-editor table td, .richtext-editor table th {
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    min-width: 40px;
    text-align: center;
}
.richtext-editor table th {
    background: #f3f4f6;
    font-weight: 600;
}
.richtext-editor sub, .richtext-editor sup {
    font-size: 0.8em;
    line-height: 0;
}
.richtext-editor sub { vertical-align: sub; }
.richtext-editor sup { vertical-align: super; }

/* 答案行内编辑器（单行模式，带化学式工具栏） */
#answerRichtextWrapper .richtext-editor.answer-editor {
    min-height: 40px;
    max-height: 120px;
    padding: 8px 12px;
    font-size: 14px;
}
#answerRichtextWrapper .chem-toolbar {
    padding: 4px 8px;
}
#answerRichtextWrapper .chem-toolbar button {
    padding: 2px 8px;
    font-size: 12px;
}

/* 解析说明编辑器（与题目编辑器相同样式，覆盖 min-height 为较小值） */
#explanationRichtextWrapper .richtext-editor {
    min-height: 100px;
    max-height: 350px;
}

/* ==================== 选项行内编辑器 ==================== */
.option-editor-wrapper {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.option-editor-mini {
    padding: 6px 10px;
    min-height: 36px;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    outline: none;
    word-break: break-word;
}
.option-editor-mini:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    font-size: 13px;
}
.option-editor-mini:focus {
    box-shadow: inset 0 0 0 2px var(--primary, #4f46e5);
}
.option-mini-toolbar {
    display: flex;
    gap: 1px;
    padding: 4px 6px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}
.option-mini-toolbar button {
    width: 26px; height: 26px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #6b7280;
    transition: all 0.15s;
}
.option-mini-toolbar button:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}

/* ==================== 化学组件面板 ==================== */
.chem-panel {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 14px;
    background: #fafafa;
    margin-top: 10px;
}
.chem-item {
    cursor: pointer;
    text-align: center;
    padding: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    transition: all 0.15s;
}
.chem-item:hover {
    border-color: var(--primary, #4f46e5);
    box-shadow: 0 1px 4px rgba(79,70,229,0.15);
}
.chem-tab {
    padding: 5px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    transition: all 0.15s;
}
.chem-tab.active {
    background: var(--primary, #4f46e5);
    color: #fff;
    border-color: var(--primary, #4f46e5);
}

/* ==================== 图片上传 ==================== */
.image-upload-area { position: relative; }
.image-upload-box {
    border: 2px dashed #d1d5db; border-radius: 10px;
    padding: 24px; text-align: center; cursor: pointer;
    transition: all 0.2s; background: #fafafa;
}
.image-upload-box:hover { border-color: var(--primary); background: #eef4ff; }
.upload-icon { font-size: 32px; margin-bottom: 6px; }
.upload-text { font-size: 14px; font-weight: 600; color: #374151; }
.upload-hint { font-size: 12px; color: #9ca3af; margin-top: 4px; }
.image-preview { position: relative; display: inline-block; max-width: 100%; }
.image-preview img { max-width: 100%; max-height: 200px; border-radius: 8px; border: 1px solid #e5e7eb; }
.btn-remove-img {
    position: absolute; top: -8px; right: -8px;
    width: 24px; height: 24px; border-radius: 50%;
    border: none; background: #ef4444; color: #fff; cursor: pointer;
    font-size: 14px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.btn-remove-img:hover { background: #dc2626; }
.existing-image { margin-bottom: 8px; }
.existing-image label { display: block; font-size: 13px; font-weight: 600; color: #6b7280; margin-bottom: 4px; }

/* ==================== 模式切换提示 ==================== */
.mode-switch-bar {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
    font-size: 12px; color: #6b7280;
}
.mode-switch-bar label { cursor: pointer; display: flex; align-items: center; gap: 4px; }

/* ==================== 编辑页面宽屏适配 ==================== */
@media (min-width: 1200px) {
    .edit-page .admin-page {
        max-width: 1100px;
    }
}

/* ==================== 学习路径页面 ==================== */
.learn-path-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}
.path-header {
    text-align: center;
    margin-bottom: 24px;
}
.path-header h1 {
    font-size: 28px;
    margin-bottom: 4px;
    color: var(--text, #1f2937);
}
.path-header p {
    color: var(--text-light, #6b7280);
    margin-bottom: 16px;
}
.overall-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.progress-ring-big {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: conic-gradient(var(--primary, #4f46e5) calc(var(--pct, 0) * 1%), #e5e7eb 0);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.progress-ring-big::before {
    content: '';
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--bg, #fff);
    position: absolute;
}
.progress-ring-big span {
    position: relative;
    z-index: 1;
    font-size: 18px; font-weight: 700;
    color: var(--primary, #4f46e5);
}
.overall-label {
    font-size: 15px;
    color: var(--text-light, #6b7280);
}

/* 推荐卡片 */
.next-card {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border: 2px solid #c7d2fe;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    animation: slideIn 0.4s ease;
}
.next-content {
    display: flex; align-items: center; gap: 12px;
}
.next-icon { font-size: 32px; }
.next-text { flex: 1; }
.next-label { font-size: 15px; font-weight: 500; color: #3730a3; margin-bottom: 4px; }
.next-content .btn { flex-shrink: 0; white-space: nowrap; }

/* 阶段列表 */
.stages-list {
    display: flex; flex-direction: column; gap: 12px;
}
.stage-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--bg-card, #fff);
    border: 2px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.stage-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.stage-card.stage-locked {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
}
.stage-card.stage-locked:hover { transform: none; box-shadow: none; }
.stage-card.stage-completed { border-color: #86efac; background: #f0fdf4; }
.stage-card.stage-in_progress { border-color: #93c5fd; background: #eff6ff; }
.stage-card.stage-review { border-color: #fde68a; background: #fffbeb; }

.stage-step {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.stage-body { flex: 1; min-width: 0; }
.stage-name {
    font-size: 16px; font-weight: 600;
    color: var(--text, #1f2937);
    margin-bottom: 4px;
}
.stage-desc {
    font-size: 13px;
    color: var(--text-light, #6b7280);
    line-height: 1.5;
}
.stage-meta {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px;
}
.progress-bar-mini {
    flex: 1; height: 6px;
    background: #e5e7eb; border-radius: 3px;
    overflow: hidden;
}
.progress-fill-mini {
    height: 100%; border-radius: 3px;
    transition: width 0.5s ease;
}
.progress-text-mini {
    font-size: 12px; font-weight: 600;
    color: var(--primary, #4f46e5);
    min-width: 36px; text-align: right;
}
.stage-arrow {
    font-size: 20px; color: #d1d5db;
}
.lock-reason {
    font-size: 12px; color: #9ca3af;
}
.status-badge {
    font-size: 12px; padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}
.status-badge.completed { background: #dcfce7; color: #166534; }
.status-badge.in_progress { background: #dbeafe; color: #1e40af; }
.status-badge.locked { background: #fee2e2; color: #991b1b; }
.status-badge.review { background: #fef3c7; color: #92400e; }

.stage-loading {
    text-align: center; padding: 40px;
    color: var(--text-light, #6b7280);
}

/* 学习路径 5 标签页筛选 */
.path-tabs {
    display: flex; gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.path-tab {
    padding: 8px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    background: var(--bg-card, #fff);
    color: var(--text-light, #6b7280);
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.path-tab:hover {
    border-color: var(--primary, #4f46e5);
    color: var(--primary, #4f46e5);
}
.path-tab.active {
    background: var(--primary, #4f46e5);
    color: #fff;
    border-color: var(--primary, #4f46e5);
}
.path-tab-count {
    text-align: center;
    font-size: 13px;
    color: var(--text-light, #6b7280);
    margin-bottom: 16px;
}

/* ==================== 阶段详情页 ==================== */
.stage-detail-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

.stage-header {
    text-align: center;
    padding: 32px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--stage-color, #4f46e5) 8%, #fff), color-mix(in srgb, var(--stage-color, #4f46e5) 3%, #fff));
    border: 2px solid color-mix(in srgb, var(--stage-color, #4f46e5) 20%, transparent);
    margin-bottom: 28px;
}

.back-link {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--text-light, #6b7280);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}
.back-link:hover { color: var(--stage-color, #4f46e5); }

.stage-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    margin: 0 auto 12px;
}

.stage-header h1 {
    font-size: 26px;
    color: var(--text, #1f2937);
    margin-bottom: 8px;
}

.stage-desc {
    color: var(--text-light, #6b7280);
    font-size: 15px;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 20px;
}

.stage-progress {
    display: flex; align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.progress-ring {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: conic-gradient(var(--stage-color, #4f46e5) calc(var(--pct, 0) * 1%), #e5e7eb 0);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.progress-ring::before {
    content: '';
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--bg, #fff);
    position: absolute;
}
.progress-ring span {
    position: relative;
    z-index: 1;
    font-size: 18px; font-weight: 700;
    color: var(--stage-color, #4f46e5);
}

.progress-info {
    text-align: left;
}
.mastered-count {
    display: block;
    font-size: 16px; font-weight: 600;
    color: var(--text, #1f2937);
}
.mastery-note {
    font-size: 13px;
    color: var(--text-light, #6b7280);
}

.stage-actions {
    display: flex; gap: 12px; justify-content: center;
    flex-wrap: wrap;
}
.stage-detail-page .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 24px; border-radius: 8px;
    font-size: 15px; font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}
.stage-detail-page .btn-primary {
    background: var(--stage-color, #4f46e5);
    color: #fff;
    border: none;
}
.stage-detail-page .btn-primary:hover { filter: brightness(1.1); }
.stage-detail-page .btn-outline {
    background: transparent;
    color: var(--stage-color, #4f46e5);
    border: 2px solid var(--stage-color, #4f46e5);
}
.stage-detail-page .btn-outline:hover { background: color-mix(in srgb, var(--stage-color, #4f46e5) 10%, transparent); }
.stage-detail-page .btn-sm {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}
.stage-detail-page .btn-sm.btn-outline {
    color: var(--text-light, #6b7280);
    border: 1px solid #e5e7eb;
    background: var(--bg-card, #fff);
}
.stage-detail-page .btn-sm.btn-outline:hover {
    border-color: var(--primary, #4f46e5);
    color: var(--primary, #4f46e5);
}
.stage-detail-page .btn-sm.btn-primary {
    background: var(--primary, #4f46e5);
    color: #fff;
    border: none;
}
.stage-detail-page .btn-sm.btn-primary:hover { filter: brightness(1.1); }

/* 知识点列表 */
.kp-list h2 {
    font-size: 18px;
    color: var(--text, #1f2937);
    margin-bottom: 16px;
}

.kp-item {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bg-card, #fff);
    border: 1px solid #e5e7eb;
    margin-bottom: 8px;
    transition: all 0.2s;
}
.kp-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

.kp-item.mastery-0 { border-left: 3px solid #e5e7eb; }
.kp-item.mastery-1 { border-left: 3px solid #fbbf24; }
.kp-item.mastery-2 { border-left: 3px solid #60a5fa; }
.kp-item.mastery-3 { border-left: 3px solid #34d399; }
.kp-item.mastery-4 { border-left: 3px solid #22c55e; }
.kp-item.mastery-5 { border-left: 3px solid #8b5cf6; }

.kp-left { flex: 1; display: flex; gap: 10px; align-items: flex-start; min-width: 0; }

.kp-code {
    flex-shrink: 0;
    font-size: 11px; font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f3f4f6;
    color: #6b7280;
    margin-top: 2px;
}

.kp-body { min-width: 0; }
.kp-name {
    font-size: 15px; font-weight: 500;
    color: var(--text, #1f2937);
    margin-bottom: 4px;
}
.kp-meta {
    display: flex; gap: 10px; align-items: center;
    font-size: 12px; color: var(--text-light, #6b7280);
}
.kp-diff { letter-spacing: 2px; }

.kp-right {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 2px;
    min-width: 100px;
}
.mastery-stars {
    display: flex; gap: 1px;
}
.star {
    font-size: 14px; color: #d1d5db;
    transition: color 0.3s;
}
.star.filled { color: #f59e0b; }

.mastery-bar {
    width: 80px; height: 5px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.mastery-fill {
    height: 100%; border-radius: 3px;
    transition: width 0.3s;
}
.mastery-label {
    font-size: 11px; color: var(--text-light, #6b7280);
}

.kp-action {
    display: flex; flex-direction: column; gap: 4px;
    flex-shrink: 0;
}

/* 阶段导航 */
.stage-nav {
    display: flex; justify-content: space-between;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}
.nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--bg-card, #fff);
    border: 1px solid #e5e7eb;
    color: var(--text, #1f2937);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}
.nav-btn:hover {
    border-color: var(--stage-color, #4f46e5);
    color: var(--stage-color, #4f46e5);
}

/* ==================== 学习路径响应式 ==================== */
@media (max-width: 640px) {
    .stage-detail-page { padding: 12px 12px 40px; }
    .stage-header { padding: 24px 16px; }
    .stage-header h1 { font-size: 22px; }
    .kp-item { flex-wrap: wrap; gap: 8px; }
    .kp-right { flex-direction: row; align-items: center; gap: 8px; min-width: auto; }
    .kp-action { flex-direction: row; }
}
@media (max-width: 600px) {
    .path-header h1 { font-size: 22px; }
    .stage-card { padding: 12px 14px; gap: 10px; }
    .stage-name { font-size: 15px; }
    .stage-desc { font-size: 12px; }
    .next-content { flex-wrap: wrap; }
    .next-content .btn { margin-top: 4px; }
}

/* ========== 浮动聊天窗口 ========== */
.chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 998;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5); }
.chat-fab .chat-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-weight: 600;
    border: 2px solid #fff;
}
@media (max-width: 768px) {
    .chat-fab { bottom: 80px; right: 16px; width: 48px; height: 48px; font-size: 20px; }
}

.chat-window {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 520px;
    max-height: calc(100vh - 130px);
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 999;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
}
@media (max-width: 768px) {
    .chat-window {
        bottom: 140px;
        right: 8px;
        left: 8px;
        width: auto;
        height: calc(100vh - 220px);
        max-height: 500px;
    }
}
.chat-window.show { display: flex; }

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    flex-shrink: 0;
}
.chat-header-info { display: flex; align-items: center; gap: 8px; }
.chat-header-title { font-size: 15px; font-weight: 600; }
.chat-scope-tag { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: rgba(255,255,255,0.25); }
.chat-header-actions { display: flex; gap: 8px; }
.chat-header-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    padding: 2px 6px;
    border-radius: 6px;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.chat-header-btn:hover { opacity: 1; }

.chat-online-bar {
    padding: 6px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}
.chat-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg);
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.chat-msg {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    position: relative;
}
.chat-msg-self {
    align-self: flex-end;
    background: #6366f1;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg-other {
    align-self: flex-start;
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.chat-msg-name {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 2px;
    opacity: 0.85;
}
.chat-msg-self .chat-msg-name { color: rgba(255,255,255,0.8); }
.chat-msg-other .chat-msg-name { color: var(--primary); }
.chat-msg-role {
    font-size: 10px;
    padding: 0 4px;
    border-radius: 4px;
    margin-left: 4px;
    font-weight: 500;
}
.role-teacher { background: #dbeafe; color: #2563eb; }
.role-admin { background: #fee2e2; color: #dc2626; }
.role-student { background: #dcfce7; color: #16a34a; }
.chat-msg-self .chat-msg-role { background: rgba(255,255,255,0.2); color: #fff; }
.chat-msg-time { font-size: 10px; opacity: 0.6; margin-top: 2px; }
.chat-msg-system {
    align-self: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 12px;
    background: var(--bg);
    border-radius: 8px;
}
.chat-msg-deleted {
    opacity: 0.4;
    font-style: italic;
    text-decoration: line-through;
}

.chat-input-area {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--card-bg);
    flex-shrink: 0;
}
.chat-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.chat-input:focus { border-color: var(--primary); }
.chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
.chat-send-btn:hover { opacity: 0.85; }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-loading {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.chat-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.chat-error {
    text-align: center;
    padding: 20px;
    color: #e74c3c;
    font-size: 13px;
    cursor: pointer;
}
.chat-error:hover {
    text-decoration: underline;
}