/* ========== 全局重置 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
    font-size: 14px;
    overflow-x: hidden;
}
#app {
    max-width: 420px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f5f7fa;
    position: relative;
    padding-bottom: 180px; /* 给猫咪留空间 */
}

/* ========== 顶部状态栏 ========== */
#top-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.top-left { display: flex; align-items: center; gap: 6px; }
.logo-cat { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; }
.cat-icon-small { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; }
.cat-icon-medium { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; }
.cat-icon-large { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; }
.logo-text { font-weight: 700; font-size: 16px; }

.top-center { flex: 1; margin: 0 12px; }
.growth-bar {
    height: 18px;
    background: rgba(255,255,255,0.25);
    border-radius: 9px;
    position: relative;
    overflow: hidden;
}
.growth-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd93d, #ff9f43);
    border-radius: 9px;
    transition: width 0.5s ease;
    width: 0%;
}
.growth-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.top-right { display: flex; gap: 8px; }
.stat-item {
    background: rgba(255,255,255,0.2);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.stat-icon { font-size: 12px; }

/* ========== 页面切换 ========== */
.page { display: none; animation: fadeIn 0.3s ease; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ========== 大陆地图页 ========== */
.subject-tabs {
    display: flex;
    overflow-x: auto;
    padding: 10px 12px 6px;
    gap: 8px;
    background: white;
    border-bottom: 1px solid #eee;
    -webkit-overflow-scrolling: touch;
}
.subject-tabs::-webkit-scrollbar { display: none; }
.subject-tab {
    flex-shrink: 0;
    padding: 6px 14px;
    background: #f0f2f5;
    border-radius: 16px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}
.subject-tab.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    transform: scale(1.05);
}

/* 复习提醒卡片 */
.review-reminder {
    margin: 0 16px 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(252, 182, 159, 0.3);
    transition: transform 0.2s;
}
.review-reminder:active { transform: scale(0.97); }
.review-icon { font-size: 24px; }
.review-content { flex: 1; }
.review-title { font-size: 13px; font-weight: 700; color: #744210; }
.review-desc { font-size: 11px; color: #975a16; margin-top: 2px; }
.review-arrow { font-size: 20px; color: #975a16; font-weight: 300; }

.map-container {
    padding: 16px;
}
.map-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #333;
}
.map-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #888;
    margin-bottom: 14px;
}
.map-stats b { color: #667eea; font-weight: 700; }

.nests-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nest-card {
    background: white;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.nest-card:active { transform: scale(0.95); }
.nest-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

.nest-card .nest-icon {
    font-size: 28px;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.nest-card .nest-name {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 29px;
}
.nest-card .nest-diff {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    display: inline-block;
    color: white;
    font-weight: 500;
}
.diff-入门 { background: #52c41a; }
.diff-基础 { background: #1890ff; }
.diff-进阶 { background: #fa8c16; }
.diff-挑战 { background: #f5222d; }
.diff-思维 { background: #722ed1; }

/* 已解锁 */
.nest-card.unlocked {
    border-color: currentColor;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}
/* 已通关 */
.nest-card.cleared {
    opacity: 0.85;
}
.nest-card.cleared::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: #52c41a;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
/* 未解锁 */
.nest-card.locked {
    opacity: 0.45;
    filter: grayscale(0.7);
    cursor: not-allowed;
}
.nest-card.locked::before {
    content: '🔒';
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 14px;
}
/* 开发中标记 */
.nest-card.coming-soon .nest-name::after {
    content: ' 开发中';
    display: block;
    font-size: 9px;
    color: #999;
    font-weight: normal;
}

/* ========== 窝点卡片三态视觉强化（机-23 窝点三状态）========== */
/* 视觉梯度：冰封（冷灰）→ 半亮（暖微光）→ 全亮（亮金发光） */
/* 设计原则：三状态差异明显，孩子一眼就能看出自己学到哪一步了 */

/* ---------- 暗态：完全没碰过 ---------- */
/* 配合 locked 类的灰度+锁，整体呈现冰封质感 */
.nest-card.light-dark {
    opacity: 0.65;
    filter: grayscale(0.4) brightness(0.9);
}
/* 冰封叠加效果：冷蓝色调 + 霜感 */
.nest-card.light-dark.locked::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: 
        radial-gradient(circle at 20% 30%, rgba(180, 220, 255, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(200, 230, 255, 0.1) 0%, transparent 35%),
        linear-gradient(135deg, rgba(150, 200, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* 冰壳裂纹纹理（第二层叠加：细线裂纹） */
.nest-card.light-dark.locked::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background:
        /* 主裂纹：从左上角延伸的斜向裂纹 */
        linear-gradient(115deg, transparent 48%, rgba(200, 225, 255, 0.25) 49%, 
            rgba(200, 225, 255, 0.1) 50%, transparent 52%) center / 100% 2px no-repeat,
        /* 次级裂纹：从右中延伸 */
        linear-gradient(160deg, transparent 60%, rgba(180, 215, 255, 0.18) 61%, 
            rgba(180, 215, 255, 0.08) 62%, transparent 64%) center / 100% 1.5px no-repeat,
        /* 冰壳内部微光脉动源点 */
        radial-gradient(ellipse at 50% 50%, rgba(150, 200, 255, 0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
    animation: iceShellPulse 4s ease-in-out infinite;
}

@keyframes iceShellPulse {
    0%, 100% {
        opacity: 0.7;
        filter: brightness(0.95);
    }
    50% {
        opacity: 1;
        filter: brightness(1.1);
    }
}

/* 冰壳下隐约可见的微光（窝点图标处，暗示"里面有东西在沉睡"） */
.nest-card.light-dark.locked .nest-icon {
    position: relative;
    filter: drop-shadow(0 0 6px rgba(150, 200, 255, 0.3)) brightness(0.8);
    animation: frozenGlow 5s ease-in-out infinite;
}

@keyframes frozenGlow {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(150, 200, 255, 0.2)) brightness(0.75);
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(180, 220, 255, 0.4)) brightness(0.9);
    }
}

/* ---------- 半亮态：学习中，暖光微亮 ---------- */
/* 特点：暖色微光 + 半透明 + 弱呼吸 + 进度感 */
.nest-card.light-partial {
    border-color: rgba(255, 170, 80, 0.7);
    background: linear-gradient(145deg, #fffdf8 0%, #fff5e6 100%);
    box-shadow: 
        0 0 10px rgba(255, 170, 80, 0.25),
        0 0 20px rgba(255, 140, 50, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 0.8),
        0 4px 12px rgba(102, 126, 234, 0.1);
    animation: nestPartialGlow 3s ease-in-out infinite;
}
/* 半亮态图标：暖光色 + 微光效果 */
.nest-card.light-partial .nest-icon {
    filter: drop-shadow(0 0 4px rgba(255, 170, 80, 0.5));
    opacity: 0.9;
}
/* 半亮态名称：暖色 */
.nest-card.light-partial .nest-name {
    color: #8b5a00;
}

@keyframes nestPartialGlow {
    0%, 100% {
        box-shadow: 
            0 0 8px rgba(255, 170, 80, 0.2),
            0 0 16px rgba(255, 140, 50, 0.08),
            inset 0 1px 2px rgba(255, 255, 255, 0.8),
            0 4px 10px rgba(102, 126, 234, 0.08);
    }
    50% {
        box-shadow: 
            0 0 14px rgba(255, 170, 80, 0.35),
            0 0 24px rgba(255, 140, 50, 0.18),
            inset 0 1px 2px rgba(255, 255, 255, 0.8),
            0 6px 16px rgba(102, 126, 234, 0.15);
    }
}

/* 半亮态"学习中"角标：月亮/进度图标 */
.nest-card .nest-partial-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 14px;
    color: #ff9500;
    animation: partialBadgePulse 2s ease-in-out infinite;
    z-index: 2;
    line-height: 1;
    filter: drop-shadow(0 0 3px rgba(255, 149, 0, 0.5));
}

@keyframes partialBadgePulse {
    0%, 100% { opacity: 0.6; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* ---------- 全亮态：通关，明亮金色发光 ---------- */
/* 特点：明亮发光 + 饱和金色 + 强呼吸 + 星星/火花效果 + 成就感 */
.nest-card.light-full {
    opacity: 1;
    border-color: #ffd700;
    background: linear-gradient(145deg, #fffef5 0%, #fff8dc 50%, #fff5cc 100%);
    box-shadow: 
        0 0 12px rgba(255, 215, 0, 0.5),
        0 0 25px rgba(255, 200, 0, 0.3),
        0 0 40px rgba(255, 180, 0, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.9),
        0 6px 16px rgba(255, 180, 0, 0.2);
    animation: nestFullGlow 2s ease-in-out infinite;
    position: relative;
    overflow: visible;
}
/* 全亮态图标：金色发光 + 饱和度提升 */
.nest-card.light-full .nest-icon {
    filter: 
        drop-shadow(0 0 6px rgba(255, 215, 0, 0.7))
        drop-shadow(0 0 12px rgba(255, 180, 0, 0.4))
        saturate(1.2);
    transform: scale(1.05);
}
/* 全亮态名称：金色深色 */
.nest-card.light-full .nest-name {
    color: #8b6914;
    font-weight: 700;
}
/* 全亮态星芒装饰：左上角小星星 */
.nest-card.light-full::before {
    content: '✨';
    position: absolute;
    top: -6px;
    left: -4px;
    font-size: 16px;
    z-index: 3;
    animation: starTwinkle 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
}
/* 全亮态额外装饰：右下角小火花 */
.nest-card.light-full::after {
    content: '⭐';
    position: absolute;
    bottom: -4px;
    right: -2px;
    font-size: 14px;
    z-index: 3;
    animation: starTwinkle 1.8s ease-in-out infinite reverse;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
}

@keyframes nestFullGlow {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(255, 215, 0, 0.4),
            0 0 20px rgba(255, 200, 0, 0.25),
            0 0 35px rgba(255, 180, 0, 0.12),
            inset 0 2px 4px rgba(255, 255, 255, 0.9),
            0 6px 16px rgba(255, 180, 0, 0.15);
        border-color: #ffd700;
    }
    50% {
        box-shadow: 
            0 0 18px rgba(255, 215, 0, 0.65),
            0 0 35px rgba(255, 200, 0, 0.4),
            0 0 55px rgba(255, 180, 0, 0.2),
            inset 0 2px 4px rgba(255, 255, 255, 0.9),
            0 8px 20px rgba(255, 180, 0, 0.25);
        border-color: #ffe44d;
    }
}

@keyframes starTwinkle {
    0%, 100% { 
        opacity: 0.4; 
        transform: scale(0.8) rotate(-5deg);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.15) rotate(5deg);
    }
}

/* 全亮态通关标记升级：✓ 改为更有成就感的样式 */
.nest-card.cleared::after {
    content: '🏆';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 
        0 0 8px rgba(255, 215, 0, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 4;
    animation: trophyBounce 2.5s ease-in-out infinite;
}

@keyframes trophyBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ---------- 三态对比优化：确保 locked + dark 组合正确 ---------- */
.nest-card.locked.light-dark {
    filter: grayscale(0.7) brightness(0.85);
    opacity: 0.5;
}

/* ---------- 移动端性能优化：低端设备降低动画复杂度 ---------- */
@media (prefers-reduced-motion: reduce) {
    .nest-card.light-partial,
    .nest-card.light-full,
    .nest-card .nest-partial-badge,
    .nest-card.light-full::before,
    .nest-card.light-full::after,
    .nest-card.cleared::after,
    .continent-nest-dot.full,
    .continent-nest-dot.partial,
    .cd-stat-item:first-child .cd-stat-num {
        animation: none;
    }
}

/* ========== 窝点断点恢复提示条（P0 半亮体验）========== */
.nest-breakpoint-bar {
    background: linear-gradient(135deg, #fff5e6, #ffe8cc);
    border-bottom: 1px solid rgba(250, 140, 122, 0.2);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    animation: bpBarSlide 0.3s ease-out;
}

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

.bp-bar-text {
    font-size: 13px;
    color: #8c5a00;
    font-weight: 600;
    flex: 1;
}

.bp-bar-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.bp-bar-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bp-bar-btn:active {
    transform: scale(0.95);
}

.bp-bar-resume {
    background: linear-gradient(135deg, #fa8c16, #f5222d);
    color: white;
}

.bp-bar-restart {
    background: rgba(255, 255, 255, 0.7);
    color: #8c5a00;
    border: 1px solid rgba(250, 140, 122, 0.3);
}

/* ========== 底部背包栏 ========== */
.backpack-bar {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    background: white;
    border-top: 1px solid #eee;
    position: fixed;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 420px;
    z-index: 50;
}
.backpack-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
    padding: 4px 10px;
}
.backpack-item:active { transform: scale(0.9); }
.bp-icon { font-size: 22px; display: block; }
.bp-label { font-size: 10px; color: #666; margin-top: 2px; }

/* ========== 窝点详情页 ========== */
.nest-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 14px 16px 20px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}
.nest-header .back-btn {
    order: 1;
    margin-bottom: 10px;
}
.nest-title-wrap {
    order: 3;
    width: 100%;
}
.nest-pace-btn {
    order: 2;
    margin-left: auto;
    margin-top: 0;
}
.back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 10px;
}
.back-btn:active { background: rgba(255,255,255,0.3); }
.nest-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.nest-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.nest-tag {
    font-size: 11px;
    padding: 3px 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}

.mode-tabs {
    display: flex;
    background: white;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 48px;
    z-index: 50;
}
.mode-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}
.mode-tab.active { color: #667eea; }
.mode-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: #667eea;
    border-radius: 2px;
}

/* 五步法导航条 */
.five-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 48px;
    z-index: 50;
}
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.step-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e8e8e8;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
    transition: all 0.2s;
}
.step-label {
    font-size: 11px;
    color: #999;
    font-weight: 500;
    transition: color 0.2s;
}
.step-item.active .step-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    transform: scale(1.1);
}
.step-item.active .step-label {
    color: #667eea;
    font-weight: 600;
}
.step-item.completed .step-icon {
    background: #52c41a;
    color: white;
    font-size: 14px;
}
.step-item.completed .step-label {
    color: #52c41a;
}
.step-item.locked {
    cursor: not-allowed;
}
.step-item.locked .step-icon {
    background: #f0f0f0;
    color: #ccc;
}
.step-item.locked .step-label {
    color: #ccc;
}
.step-item.skipped .step-icon {
    background: #f5f5f5;
    color: #d9d9d9;
    text-decoration: line-through;
}
.step-item.skipped .step-label {
    color: #d9d9d9;
    text-decoration: line-through;
}
.step-line {
    flex: 1;
    height: 2px;
    background: #e8e8e8;
    margin: 0 4px;
    margin-bottom: 18px;
    border-radius: 1px;
    transition: background 0.3s;
}
.step-line.completed {
    background: #52c41a;
}

/* 步骤标题栏 */
.step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.step-badge {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.step-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

/* 开场卡片 */
.opening-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 24px 20px;
    color: white;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}
.opening-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -20px;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.opening-card::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.opening-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.opening-emoji {
    font-size: 24px;
}
.opening-badge {
    background: rgba(255,255,255,0.25);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}
.opening-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.opening-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}
.opening-content {
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}
.opening-scene {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 12px;
    font-style: italic;
    position: relative;
    z-index: 1;
}
.opening-greeting {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.opening-hook {
    background: rgba(255,255,255,0.2);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}
.opening-goal {
    background: rgba(255,255,255,0.15);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-line;
    position: relative;
    z-index: 1;
}

/* 为什么学 */
.why-section .why-reasons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.why-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f9ff;
    border-radius: 8px;
    font-size: 13px;
    color: #555;
}
.why-icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* 例题卡片 */
.example-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
}
.example-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.example-num {
    background: #e6f7ff;
    color: #1890ff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.example-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    flex: 1;
}
.example-diff {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f6ffed;
    color: #52c41a;
}
.example-question {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 12px;
    padding: 10px;
    background: #fafafa;
    border-radius: 8px;
}
.example-options {
    margin-bottom: 12px;
}
.example-option {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #f9f9f9;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
}
.example-toggle {
    text-align: center;
    padding: 10px;
    background: #f5f7ff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #667eea;
    font-weight: 500;
    transition: background 0.2s;
}
.example-toggle:hover {
    background: #edf0ff;
}
.example-answer {
    margin-top: 12px;
    padding: 12px;
    background: #f6ffed;
    border-radius: 8px;
    border-left: 3px solid #52c41a;
}
.answer-row, .explanation-row {
    font-size: 13px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 6px;
}
.explanation-row {
    margin-bottom: 0;
}

/* 步骤操作按钮 */
.step-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 24px;
}
.step-actions .action-btn {
    flex: 1;
}
.next-step-btn {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border: none !important;
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}
.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.nest-content {
    padding: 16px;
}

/* 学模式 */
.lecture-section {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.lecture-section h3 {
    font-size: 15px;
    color: #333;
    margin-bottom: 10px;
    padding-left: 8px;
    border-left: 3px solid #667eea;
}
.lecture-section p {
    font-size: 13px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 8px;
}
.concept-card {
    background: #f8f9ff;
    border: 1px solid #e0e5ff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}
.concept-card .concept-name {
    font-weight: 700;
    color: #667eea;
    margin-bottom: 4px;
    font-size: 14px;
}
.concept-card .concept-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}

/* 练模式 */
.practice-progress {
    background: white;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.progress-bar-wrap {
    flex: 1;
    margin: 0 12px;
}
.progress-bar {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #52c41a, #1890ff);
    border-radius: 4px;
    transition: width 0.3s;
    width: 0%;
}
.progress-text { font-size: 12px; color: #888; }

.question-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.question-num {
    display: inline-block;
    background: #667eea;
    color: white;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.question-text {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 14px;
    font-weight: 500;
}
.options-list { display: flex; flex-direction: column; gap: 8px; }
.option-item {
    padding: 12px 14px;
    background: #f8f9fa;
    border: 2px solid #f0f0f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}
.option-item:hover { border-color: #667eea; }
.option-item.selected { border-color: #667eea; background: #f0f3ff; }
.option-item.correct { border-color: #52c41a; background: #f6ffed; }
.option-item.wrong { border-color: #f5222d; background: #fff1f0; }

.blank-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}
.blank-input:focus { outline: none; border-color: #667eea; }

.hint-section {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fffbe6;
    border-radius: 8px;
    border-left: 3px solid #faad14;
}
.hint-section .hint-label {
    font-size: 12px;
    color: #faad14;
    font-weight: 600;
    margin-bottom: 4px;
}
.hint-section p { font-size: 12px; color: #666; line-height: 1.6; }

.feedback-section {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
}
.feedback-section.correct {
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    color: #389e0d;
}
.feedback-section.wrong {
    background: #fff1f0;
    border: 1px solid #ffa39e;
    color: #cf1322;
}
.feedback-section strong { display: block; margin-bottom: 4px; }

.action-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}
.action-btn:active { transform: scale(0.98); }
.action-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.action-btn.secondary {
    background: #f0f0f0;
    color: #666;
}

.hint-btns { display: flex; gap: 8px; margin-top: 10px; }
.hint-btn {
    flex: 1;
    padding: 8px;
    background: #fffbe6;
    border: 1px solid #ffe58f;
    color: #d48806;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}
.hint-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hint-btn:active { background: #fff1b8; }

/* 测模式 */
.feynman-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.feynman-question {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    padding: 12px;
    background: #f8f9ff;
    border-radius: 8px;
    border-left: 4px solid #722ed1;
}
.feynman-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
}
.feynman-textarea:focus { outline: none; border-color: #722ed1; }

.score-display {
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
}
.score-num {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.score-label { font-size: 13px; color: #888; margin-top: 4px; }

.reference-points {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}
.reference-points h4 {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}
.reference-points ul { padding-left: 18px; }
.reference-points li {
    font-size: 12px;
    color: #666;
    line-height: 1.8;
}

/* ========================================================
   费曼检验 v3 - 三阶递进 + 四维评分
   ======================================================== */

/* 三阶步骤指示器 */
.f-stage-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
    position: relative;
    padding: 0 8px;
}
.f-stage-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    position: relative;
    z-index: 1;
}
.f-stage-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 60%;
    right: -40%;
    height: 2px;
    background: #e0e0e0;
    z-index: -1;
}
.f-stage-step.done:not(:last-child)::after {
    background: linear-gradient(90deg, #52c41a, #52c41a);
}
.f-stage-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
}
.f-stage-step.done .f-stage-icon {
    background: linear-gradient(135deg, #52c41a, #237804);
    color: white;
    box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
}
.f-stage-step.current .f-stage-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    animation: stagePulse 1.5s ease-in-out infinite;
}
@keyframes stagePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.1); }
}
.f-stage-step.locked .f-stage-icon {
    opacity: 0.4;
}
.f-stage-name {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    white-space: nowrap;
}
.f-stage-step.done .f-stage-name { color: #52c41a; }
.f-stage-step.current .f-stage-name { color: #667eea; }

/* 阶段卡片头部 */
.f-stage-card { border-top: 3px solid #722ed1; }
.f-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 6px;
}
.f-stage-badge {
    font-size: 14px;
    font-weight: 700;
    color: #722ed1;
}
.f-stage-threshold {
    font-size: 11px;
    color: #999;
    background: #f8f9ff;
    padding: 3px 8px;
    border-radius: 10px;
}
.f-stage-desc {
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
    line-height: 1.6;
}
.f-stage-hint {
    font-size: 12px;
    color: #8c6e2e;
    background: #fffbe6;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 12px;
    line-height: 1.5;
    border-left: 3px solid #faad14;
}

/* 得分显示状态 */
.score-display.passed {
    background: linear-gradient(135deg, #f6ffed, #fff);
    border: 1px solid #b7eb8f;
}
.score-display.failed {
    background: linear-gradient(135deg, #fff1f0, #fff);
    border: 1px solid #ffa39e;
}
.score-display.passed .score-num {
    background: linear-gradient(135deg, #52c41a, #237804);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.score-display.failed .score-num {
    background: linear-gradient(135deg, #f5222d, #a8071a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 四维评分区域 */
.f-fourdim-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    text-align: center;
}
.f-fourdim-radar {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.f-fourdim-total {
    text-align: center;
    font-size: 13px;
    color: #666;
}
.f-fourdim-total b {
    font-size: 20px;
    color: #667eea;
    margin: 0 4px;
}
.f-radar-svg {
    width: 200px;
    height: 200px;
}

/* 最终结果页 */
.f-final-score {
    background: linear-gradient(135deg, #f8f9ff, #fff);
    border: 2px solid #667eea;
    margin-bottom: 16px;
}
.f-final-radar-wrap {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    text-align: center;
}
.f-final-radar-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}
#f-final-radar {
    display: flex;
    justify-content: center;
}
#f-final-radar .f-radar-svg {
    width: 220px;
    height: 220px;
}

/* 四维分解行 */
.f-final-breakdown {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.f-dim-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.f-dim-row:last-child { margin-bottom: 0; }
.f-dim-icon { font-size: 16px; }
.f-dim-name {
    font-size: 12px;
    color: #333;
    font-weight: 500;
    width: 60px;
    flex-shrink: 0;
}
.f-dim-bar {
    flex: 1;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}
.f-dim-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.f-dim-score {
    font-size: 11px;
    color: #999;
    font-weight: 600;
    width: 40px;
    text-align: right;
    flex-shrink: 0;
}

/* ========== 镇守使对话气泡（费曼emoji版） ========== */
.guardian-bubble {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    animation: guardianBubbleIn 0.3s ease-out;
}
@keyframes guardianBubbleIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.guardian-bubble.large .g-bubble-avatar { font-size: 44px; }
.guardian-bubble.small .g-bubble-avatar { font-size: 28px; }
.g-bubble-avatar {
    font-size: 36px;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 2px;
    animation: guardianNod 2.5s ease-in-out infinite;
}
@keyframes guardianNod {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}
.g-bubble-body {
    flex: 1;
    background: #f8f9ff;
    border: 1.5px solid #e0e4ff;
    border-radius: 14px;
    padding: 10px 14px;
    position: relative;
    border-top-left-radius: 4px;
}
.g-bubble-body::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid #e0e4ff;
}
.g-bubble-name {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.g-bubble-name::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.15;
}
.g-bubble-line {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 4px;
}
.g-bubble-line:last-child { margin-bottom: 0; }

/* 带分数的气泡 */
.guardian-bubble.with-score .g-bubble-body {
    padding-bottom: 12px;
}
.g-score-dims {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0,0,0,0.08);
}
.g-score-dims .g-dim-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.g-score-dims .g-dim-row:last-child { margin-bottom: 0; }
.g-score-dims .g-dim-icon { font-size: 13px; flex-shrink: 0; }
.g-score-dims .g-dim-name {
    font-size: 11px;
    color: #666;
    width: 58px;
    flex-shrink: 0;
    font-weight: 500;
}
.g-score-dims .g-dim-bar {
    flex: 1;
    height: 6px;
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.g-score-dims .g-dim-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}
.g-score-dims .g-dim-score {
    font-size: 10px;
    color: #999;
    font-weight: 600;
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}
.g-total-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0,0,0,0.08);
}
.g-total-label {
    font-size: 11px;
    color: #999;
}
.g-total-num {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

/* 思考中气泡 */
.g-thinking-bubble {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.g-thinking-avatar {
    font-size: 32px;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 2px;
    animation: guardianNod 1s ease-in-out infinite;
}
.g-thinking-body {
    background: #f8f9ff;
    border: 1.5px solid #e0e4ff;
    border-radius: 14px;
    padding: 10px 14px;
    position: relative;
    border-top-left-radius: 4px;
}
.g-thinking-body::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid #e0e4ff;
}
.g-thinking-name {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}
.g-thinking-text {
    font-size: 13px;
    color: #666;
    font-style: italic;
}
.g-dots {
    display: inline-block;
    margin-left: 4px;
}
.g-dots span {
    display: inline-block;
    animation: dotBounce 1.4s infinite;
    opacity: 0.4;
}
.g-dots span:nth-child(2) { animation-delay: 0.2s; }
.g-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* 开场区域 */
.f-guardian-opening {
    margin-bottom: 12px;
}

/* 四维评分镇守使包裹 */
.f-fourdim-guardian-wrap {
    margin-top: 12px;
}

/* 最终结果页 */
.f-final-result-wrap {
    text-align: center;
}
.f-final-pass-badge {
    display: inline-block;
    padding: 6px 18px;
    border: 2px solid;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
    animation: passBadgePop 0.5s ease-out;
}
@keyframes passBadgePop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
.f-final-fail-badge {
    display: inline-block;
    padding: 6px 18px;
    border: 2px solid #ff9800;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #ff9800;
    margin-bottom: 16px;
}
.f-final-guardian-score {
    text-align: left;
    margin-bottom: 16px;
}

/* ========== 镇守使弹窗 ========== */
.guardian-modal {
    text-align: center;
    padding: 10px 0;
}
.guardian-avatar {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}
.guardian-emoji {
    font-size: 64px;
    display: block;
    animation: guardianNod 2s ease-in-out infinite;
}
@keyframes guardianNod {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}
.guardian-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: guardianGlow 3s ease-in-out infinite;
    z-index: -1;
}
@keyframes guardianGlow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}
.guardian-title {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}
.guardian-score {
    font-size: 36px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    margin-bottom: 16px;
}
.guardian-message {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 12px;
    font-style: italic;
}
.guardian-signature {
    font-size: 12px;
    color: #999;
    text-align: right;
    padding-right: 20px;
}

/* ========== 底部猫咪伙伴 ========== */
#cat-companion {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 420px;
    z-index: 80;
    pointer-events: none;
}
.cat-bubble {
    position: absolute;
    bottom: 85px;
    left: 16px;
    right: 16px;
    background: white;
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    font-size: 13px;
    color: #333;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    pointer-events: auto;
    animation: bubbleIn 0.3s ease;
    line-height: 1.5;
    max-width: 80%;
}
.cat-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 20px;
    border: 8px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    border-left: 0;
}
@keyframes bubbleIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.cat-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(102,126,234,0.95), rgba(118,75,162,0.95));
    backdrop-filter: blur(10px);
    pointer-events: auto;
    cursor: pointer;
}
.cat-body:active { transform: scale(0.98); }

.cat-emoji {
    font-size: 40px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
    animation: catBreathe 3s ease-in-out infinite;
}
@keyframes catBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.cat-emoji.bounce {
    animation: catBounce 0.5s ease;
}
@keyframes catBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.3) rotate(-5deg); }
    60% { transform: scale(0.95) rotate(3deg); }
    100% { transform: scale(1); }
}

/* 走神友好设计：歇会儿状态（猫咪打哈欠） */
.cat-emoji.resting {
    animation: catSleep 4s ease-in-out infinite;
}
.cat-emoji.resting img {
    display: none;
}
.cat-emoji.resting::before {
    content: '😴';
    font-size: 48px;
    display: block;
    line-height: 60px;
    text-align: center;
}
@keyframes catSleep {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    50% { transform: scale(1.03) rotate(2deg); }
}

/* 歇会儿按钮样式 */
.rest-break-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: #f0f4ff;
    color: #667eea;
    border: 1px solid #d4dcff;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.2s;
}
.rest-break-btn:hover {
    background: #e0e8ff;
    transform: translateY(-1px);
}

.cat-status { flex: 1; min-width: 0; }
.cat-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.cat-name {
    color: white;
    font-weight: 700;
    font-size: 13px;
}
.cat-level-badge {
    background: rgba(255,255,255,0.25);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
}
.cat-intimacy {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 4px;
}
.cat-bars { display: flex; flex-direction: column; gap: 3px; }
.mini-bar {
    position: relative;
    height: 12px;
    background: rgba(255,255,255,0.2);
    border-radius: 6px;
    overflow: hidden;
}
.mini-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
    width: 100%;
}
.exp-bar .mini-fill { background: linear-gradient(90deg, #a29bfe, #6c5ce7); }
.mini-label {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    font-size: 9px;
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.cat-stats-row {
    display: flex;
    gap: 8px;
    margin-top: 5px;
    justify-content: center;
}
.cat-stat {
    font-size: 10px;
    color: white;
    background: rgba(255,255,255,0.2);
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.cat-actions {
    display: flex;
    gap: 6px;
    margin-top: 5px;
}
.cat-btn {
    flex: 1;
    padding: 3px 0;
    font-size: 10px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: rgba(255,255,255,0.25);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}
.cat-btn:hover { background: rgba(255,255,255,0.4); }
.cat-btn:active { transform: scale(0.95); }

/* ========== 天赋值光韵系统（机-06 · 灵光系统）========== */
/* 6级光韵：隐约微光 → 淡金光晕 → 稳定暖金 → 光韵流动 → 思考脉动 → 觉醒发光 */
/* 设计原则：柔和不刺眼，治愈风格，移动端性能友好 */

/* 猫咪头像容器：确保圆形，为光晕提供基础 */
.cat-emoji {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

/* 光韵核心层：使用 ::before 伪元素创建主光晕 */
.cat-emoji::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.8s ease, box-shadow 0.8s ease;
}

/* 光韵外层：使用 ::after 伪元素创建外层扩散光晕（高等级启用） */
.cat-emoji::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* ---------- Lv.1 隐约微光 (0-10) ---------- */
/* 极淡金色，若有若无，缓慢呼吸 */
.cat-emoji.glow-lv-1::before {
    opacity: 1;
    box-shadow: 0 0 10px rgba(255, 220, 120, 0.2), 0 0 18px rgba(255, 200, 80, 0.1);
    animation: talent-glow-breathing-1 4.5s ease-in-out infinite;
}
@keyframes talent-glow-breathing-1 {
    0%, 100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.8; }
}

/* ---------- Lv.2 淡金光晕 (11-25) ---------- */
/* 淡金色光晕，柔和呼吸，开始有灵气 */
.cat-emoji.glow-lv-2::before {
    opacity: 1;
    box-shadow: 0 0 14px rgba(255, 210, 100, 0.35), 0 0 26px rgba(255, 190, 60, 0.18), 0 0 36px rgba(255, 170, 40, 0.08);
    animation: talent-glow-breathing-2 3.8s ease-in-out infinite;
}
@keyframes talent-glow-breathing-2 {
    0%, 100% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* ---------- Lv.3 稳定暖金 (26-45) ---------- */
/* 稳定暖金色光晕，温暖感，稳定中带微呼吸 */
.cat-emoji.glow-lv-3::before {
    opacity: 1;
    box-shadow: 0 0 18px rgba(255, 190, 60, 0.5), 0 0 32px rgba(255, 170, 40, 0.3), 0 0 48px rgba(255, 150, 20, 0.15);
    animation: talent-glow-breathing-3 3.2s ease-in-out infinite;
}
@keyframes talent-glow-breathing-3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.24); opacity: 1; }
}

/* ---------- Lv.4 光韵流动 (46-70) ---------- */
/* 双层光晕交错流动，思维通透感 */
.cat-emoji.glow-lv-4::before {
    opacity: 1;
    box-shadow: 0 0 22px rgba(255, 210, 80, 0.55), 0 0 38px rgba(255, 180, 50, 0.38), 0 0 54px rgba(255, 150, 30, 0.22);
    animation: talent-glow-flow-inner 2.8s ease-in-out infinite;
}
.cat-emoji.glow-lv-4::after {
    opacity: 1;
    box-shadow: 0 0 35px rgba(255, 200, 100, 0.25), 0 0 55px rgba(255, 170, 60, 0.15);
    animation: talent-glow-flow-outer 4s ease-in-out infinite reverse;
}
@keyframes talent-glow-flow-inner {
    0%, 100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.85; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}
@keyframes talent-glow-flow-outer {
    0%, 100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.9; }
}

/* ---------- Lv.5 思考脉动 (71-90) ---------- */
/* 节奏性脉动，像思考时的灵光闪动，慧光内蕴 */
.cat-emoji.glow-lv-5::before {
    opacity: 1;
    box-shadow: 0 0 26px rgba(255, 215, 0, 0.65), 0 0 44px rgba(255, 190, 30, 0.45), 0 0 60px rgba(255, 160, 20, 0.28), 0 0 76px rgba(255, 130, 10, 0.14);
    animation: talent-glow-pulse 2s ease-in-out infinite;
}
.cat-emoji.glow-lv-5::after {
    opacity: 1;
    box-shadow: 0 0 40px rgba(255, 220, 100, 0.32), 0 0 65px rgba(255, 180, 50, 0.18);
    animation: talent-glow-pulse-outer 2.5s ease-in-out infinite;
}
@keyframes talent-glow-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1.18); opacity: 0.85; }
    20% { transform: translate(-50%, -50%) scale(1.32); opacity: 1; }
    40% { transform: translate(-50%, -50%) scale(1.22); opacity: 0.9; }
    60% { transform: translate(-50%, -50%) scale(1.34); opacity: 1; }
    80% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.88; }
}
@keyframes talent-glow-pulse-outer {
    0%, 100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.65; }
    50% { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
}

/* ---------- Lv.6 觉醒发光 (91-100) ---------- */
/* 大圆满之境，全身发光，神圣温暖感 */
.cat-emoji.glow-lv-6::before {
    opacity: 1;
    box-shadow: 0 0 32px rgba(255, 215, 0, 0.85), 0 0 55px rgba(255, 200, 30, 0.65), 0 0 78px rgba(255, 170, 20, 0.45), 0 0 100px rgba(255, 140, 10, 0.28), 0 0 120px rgba(255, 110, 0, 0.14);
    animation: talent-glow-awaken 2.2s ease-in-out infinite;
}
.cat-emoji.glow-lv-6::after {
    opacity: 1;
    background: radial-gradient(circle, rgba(255,220,100,0.18) 0%, rgba(255,190,50,0.08) 40%, transparent 70%);
    animation: talent-glow-awaken-outer 3.5s ease-in-out infinite;
}
@keyframes talent-glow-awaken {
    0%, 100% { transform: translate(-50%, -50%) scale(1.22); opacity: 0.9; }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
}
@keyframes talent-glow-awaken-outer {
    0%, 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0.75; }
    50% { transform: translate(-50%, -50%) scale(2.1); opacity: 1; }
}

/* ---------- 性能优化 ---------- */
/* 低动画偏好设备：关闭动画，保留静态光晕 */
@media (prefers-reduced-motion: reduce) {
    .cat-emoji[class*="glow-lv-"]::before,
    .cat-emoji[class*="glow-lv-"]::after {
        animation: none !important;
        transform: translate(-50%, -50%) scale(1.15) !important;
    }
}

/* 光韵等级切换平滑过渡 */
.cat-emoji[class*="glow-lv-"]::before {
    transition: box-shadow 0.8s ease, opacity 0.8s ease;
}

/* ========== 弹窗 ========== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
}
.modal-overlay.show { display: flex; }
.modal-box {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    max-height: 70vh;
    overflow-y: auto;
    animation: modalIn 0.3s ease;
}
@keyframes modalIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.modal-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #333;
    text-align: center;
}
.modal-content {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
}
.modal-close {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.modal-close:active { background: #5568d3; }

/* ========== 庆祝浮层 ========== */
.celebrate-layer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
}
.celebrate-layer.show { display: flex; animation: fadeIn 0.3s; }
.celebrate-box {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: 20px;
    animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes bounceIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}
.celebrate-emoji { font-size: 60px; margin-bottom: 10px; animation: bounce 1s infinite; }
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.celebrate-title {
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
}
.celebrate-desc { font-size: 14px; color: #888; margin-bottom: 16px; }
.celebrate-btn {
    padding: 12px 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ========== 背包弹窗内容 ========== */
.backpack-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.bp-item-cell {
    text-align: center;
    padding: 10px 4px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 11px;
    color: #666;
}
.bp-item-cell .bp-item-icon { font-size: 24px; display: block; margin-bottom: 4px; }
.bp-item-cell.empty { opacity: 0.3; }

/* ========================================================
   功能背包 P1 - 独立页面 + 8入口网格
   ======================================================== */

.backpack-header {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.backpack-header .back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}
.backpack-title {
    margin: 0;
    font-size: 18px;
    flex: 1;
}

.backpack-content {
    padding: 20px 16px;
}

/* 2×4 网格布局 */
.backpack-page-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

/* 入口卡片 */
.bp-card {
    background: white;
    border-radius: 14px;
    padding: 16px 8px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 2px solid transparent;
    position: relative;
}
.bp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.18);
    border-color: rgba(102, 126, 234, 0.3);
}
.bp-card:active {
    transform: scale(0.95);
}

.bp-card-icon {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
    transition: transform 0.3s ease;
}
.bp-card:hover .bp-card-icon {
    transform: scale(1.15);
}

.bp-card-name {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.3;
}

.bp-card-status {
    font-size: 10px;
    color: #999;
    line-height: 1.3;
    min-height: 13px;
}

/* 数字角标（右上角红点+数字） */
.bp-card-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ff4d4f;
    color: white;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(255, 77, 79, 0.35);
    line-height: 1;
    z-index: 2;
}
.bp-card-badge.dot {
    min-width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    top: 6px;
    right: 6px;
}

/* 底部提示语 */
.backpack-footer-tip {
    text-align: center;
    font-size: 11px;
    color: #bbb;
    margin-top: 8px;
}

/* 响应式适配 */
@media (max-width: 375px) {
    .backpack-page-grid {
        gap: 10px;
    }
    .bp-card {
        padding: 14px 6px 10px;
        border-radius: 12px;
    }
    .bp-card-icon {
        font-size: 28px;
    }
    .bp-card-name {
        font-size: 11px;
    }
    .bp-card-status {
        font-size: 9px;
    }
}

.flashcard-box {
    perspective: 1000px;
    margin-bottom: 14px;
}
.flashcard-inner {
    position: relative;
    width: 100%;
    min-height: 160px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
}
.flashcard-inner.flipped { transform: rotateY(180deg); }
.flashcard-front, .flashcard-back {
    position: absolute;
    width: 100%;
    min-height: 160px;
    backface-visibility: hidden;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}
.flashcard-front {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}
.flashcard-back {
    background: white;
    color: #333;
    border: 2px solid #667eea;
    transform: rotateY(180deg);
    font-size: 14px;
    font-weight: normal;
    line-height: 1.7;
}
.flashcard-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.flashcard-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}
.flashcard-btn.forget { background: #fff1f0; color: #cf1322; }
.flashcard-btn.remember { background: #f6ffed; color: #389e0d; }
.flashcard-count { text-align: center; font-size: 12px; color: #888; margin-top: 8px; }

/* ========== [127v1.1] 闪卡到期提醒浮层 ========== */
.fc-reminder-popup {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 150;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    width: 90%;
    max-width: 340px;
}
.fc-reminder-popup.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.fc-reminder-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
    border: 1px solid #e8eaf6;
    position: relative;
}
.fc-reminder-cat {
    font-size: 28px;
    flex-shrink: 0;
    animation: catBounce 2s infinite;
}
@keyframes catBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.fc-reminder-text {
    flex: 1;
    min-width: 0;
}
.fc-reminder-title {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}
.fc-reminder-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.fc-reminder-btn:active {
    transform: scale(0.95);
}
.fc-reminder-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
}
.fc-reminder-close:hover { color: #999; }

.mistake-list, .review-list { list-style: none; }
.mistake-item, .review-item {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    cursor: pointer;
}
.mistake-item:active, .review-item:active { background: #eef0f3; }
.mistake-item .mistake-nest { color: #667eea; font-weight: 600; font-size: 11px; }
.mistake-item .mistake-question { color: #555; margin-top: 4px; }

.empty-state {
    text-align: center;
    padding: 30px 20px;
    color: #aaa;
    font-size: 13px;
}
.empty-state .empty-icon { font-size: 40px; margin-bottom: 8px; opacity: 0.5; }

/* ========== 个人信息 ========== */
.profile-section {
    text-align: center;
    margin-bottom: 16px;
}
.profile-avatar { font-size: 50px; margin-bottom: 8px; }
.profile-name { font-size: 16px; font-weight: 700; }
.profile-level { color: #667eea; font-size: 13px; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.stat-cell {
    text-align: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
}
.stat-cell .stat-num {
    font-size: 18px;
    font-weight: 700;
    color: #667eea;
}
.stat-cell .stat-name { font-size: 11px; color: #888; margin-top: 2px; }

/* ========== 响应式 ========== */
@media (max-width: 375px) {
    .nests-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .nest-card { padding: 10px 6px; }
    .nest-card .nest-icon { font-size: 24px; }
    .nest-card .nest-name { font-size: 10px; }
}

/* ========== 错题闭环 v1.1 ========== */

/* 错题卡片 */
.wq-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.wq-card:hover {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102,126,234,0.1);
}
.wq-card-mastered {
    opacity: 0.6;
    background: #f9f9f9;
}
.wq-card-mastered:hover {
    opacity: 0.8;
}
.wq-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
/* 可点击的标签（错误模式等） */
.wq-badge-clickable {
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wq-badge-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.wq-badge-clickable:active {
    transform: translateY(0);
}
/* 人工标注小标记 */
.wq-manual-tag {
    display: inline-block;
    padding: 0 5px;
    font-size: 9px;
    font-weight: bold;
    background: #fff;
    color: #667eea;
    border-radius: 8px;
    line-height: 14px;
    margin-left: 2px;
    border: 1px solid #667eea40;
    vertical-align: middle;
}
.wq-manual-tag-sm {
    font-size: 8px;
    padding: 0 4px;
    line-height: 12px;
}
.wq-question {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* tab切换 */
.wq-tab {
    flex: 1;
    padding: 6px 0;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}
.wq-tab-active {
    background: #667eea15;
    color: #667eea;
    font-weight: bold;
}

/* 错因筛选按钮 */
.wq-pat-btn {
    padding: 4px 10px;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.wq-pat-btn:hover { background: #f5f5f5; }
.wq-pat-active {
    background: #667eea !important;
    color: #fff !important;
    border-color: #667eea !important;
}

/* 错因选择按钮（弹窗） */
.ep-pick-btn {
    background: #fff;
    border: 1.5px solid #eee;
    border-radius: 10px;
    padding: 12px 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.ep-pick-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ep-pick-active {
    background: #f0f5ff;
    border-width: 2px;
}

/* ===== 周计划与周复盘模块 v1.1 ===== */

/* 首页周计划卡片 */
.weekplan-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #f0f4ff 0%, #f5f0ff 100%);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 16px 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.weekplan-card:active {
    transform: scale(0.98);
}
.wp-card-icon {
    font-size: 24px;
}
.wp-card-title {
    font-size: 14px;
    color: #333;
}

/* 周补给入口卡片 */
.weekly-draw-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #fff7ed 0%, #fff1f0 100%);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 16px 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.weekly-draw-card:active {
    transform: scale(0.98);
}
.wd-card-icon {
    font-size: 24px;
}
.wd-card-title {
    font-size: 14px;
    color: #333;
}
.wd-card-desc {
    font-size: 12px;
    color: #f59e0b;
    font-weight: 500;
}

/* Modal确认按钮 */
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}
.modal-confirm-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
}
.modal-confirm-btn:active {
    transform: scale(0.95);
}
.modal-close {
    background: #f5f5f5;
    color: #666;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
}

/* 周计划页面 */
.wp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    padding-top: 20px;
}
.wp-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #333;
}

.wp-status {
    padding: 0 16px 12px;
}
.wp-status-text {
    font-size: 13px;
    color: #667eea;
    background: #f0f4ff;
    padding: 10px 14px;
    border-radius: 10px;
    line-height: 1.5;
}

.wp-progress-wrap {
    padding: 0 16px 16px;
}
.wp-progress-bar {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}
.wp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 4px;
    transition: width 0.3s;
}
.wp-progress-text {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
    text-align: right;
}

.wp-items {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px 16px;
    transition: all 0.2s;
}
.wp-item:active {
    transform: scale(0.98);
}
.wp-item.completed {
    background: #f6ffed;
    border-color: #b7eb8f;
}
.wp-item.completed .wp-item-title {
    text-decoration: line-through;
    color: #999;
}
.wp-item-check {
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
}
.wp-item-content {
    flex: 1;
    cursor: pointer;
}
.wp-item-title {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}
.wp-item-done {
    font-size: 12px;
    color: #52c41a;
    margin-top: 4px;
}
.wp-item-del {
    color: #ccc;
    font-size: 16px;
    padding: 4px 8px;
    cursor: pointer;
    flex-shrink: 0;
}
.wp-item-del:active {
    color: #ff4d4f;
}

.wp-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}
.wp-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.wp-empty-text {
    font-size: 15px;
    margin-bottom: 6px;
}
.wp-empty-hint {
    font-size: 12px;
    color: #bbb;
}

/* 系统推荐薄弱项 */
.wp-recommend {
    padding: 0 4px;
}
.wp-recommend-title {
    font-size: 15px;
    font-weight: 600;
    color: #4338ca;
    margin-bottom: 12px;
    padding: 0 4px;
}
.wp-recommend-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.wp-recommend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e8e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    transition: all 0.15s;
}
.wp-recommend-item:active {
    transform: scale(0.98);
}
.wp-recommend-info {
    flex: 1;
    min-width: 0;
}
.wp-recommend-name {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wp-recommend-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wp-recommend-subject {
    font-size: 11px;
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    padding: 1px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}
.wp-recommend-reason {
    font-size: 11px;
    color: #f59e0b;
    font-weight: 500;
}
.wp-recommend-add-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.wp-recommend-add-btn:active {
    transform: scale(0.95);
    opacity: 0.85;
}
.wp-recommend-dismiss {
    display: block;
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    color: #9ca3af;
    font-size: 13px;
    cursor: pointer;
    margin-top: 4px;
}
.wp-recommend-dismiss:active {
    background: #f9fafb;
}

/* 计划项验证方式标签 */
.wp-item-verify-tag {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 3px;
}

.wp-add-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    padding: 14px;
    background: #fff;
    border: 1.5px dashed #d9d9d9;
    border-radius: 12px;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.wp-add-btn:active {
    background: #f9f9f9;
}
.wp-add-btn:disabled {
    cursor: not-allowed;
}

.wp-review-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 32px);
    margin: 0 16px 20px;
    padding: 14px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.wp-review-btn:active {
    transform: scale(0.98);
}

/* 周复盘弹窗文字域 */
textarea {
    outline: none;
}
textarea:focus {
    border-color: #667eea !important;
}

/* ========== 观景台模块（寒暑假预复习 / 内-13） ========== */

/* 观景台页面头部 */
.vp-header {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    color: white;
}
.vp-header .back-btn {
    color: white;
    background: rgba(255,255,255,0.2);
    border: none;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}
.vp-title {
    margin: 0;
    font-size: 18px;
    flex: 1;
}

/* 观景台hero区 */
.vp-hero {
    padding: 24px 20px;
    text-align: center;
    background: linear-gradient(180deg, #eff6ff 0%, white 100%);
}
.vp-hero-title {
    font-size: 18px;
    font-weight: bold;
    color: #1a1a2e;
    margin-bottom: 8px;
}
.vp-hero-desc {
    font-size: 13px;
    color: #666;
}

/* Tab切换 */
.vp-tabs {
    display: flex;
    padding: 0 16px;
    margin-top: -1px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.vp-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    gap: 4px;
}
.vp-tab.active {
    border-bottom-color: #0ea5e9;
    color: #0ea5e9;
}
.vp-tab-icon {
    font-size: 20px;
}
.vp-tab-name {
    font-size: 13px;
    font-weight: 600;
}

/* Tab内容 */
.vp-tab-content {
    padding: 16px;
    min-height: 300px;
}

/* 模式介绍 */
.vp-mode-intro {
    margin-bottom: 20px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}
.vp-mode-title {
    font-size: 16px;
    font-weight: bold;
    color: #1a1a2e;
    margin-bottom: 6px;
}
.vp-mode-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

/* 层级样式（预习模式） */
.vp-layers {
    /* padding由vp-tab-content提供 */
}
.vp-layer {
    margin-bottom: 24px;
}
.vp-layer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.vp-layer-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.vp-layer-title {
    font-size: 16px;
    font-weight: bold;
    color: #1a1a2e;
}
.vp-layer-desc {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

/* 窝点卡片网格 */
.vp-nest-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.vp-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.vp-nest-card {
    background: white;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.15s;
    border: 2px solid transparent;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.vp-nest-card:active {
    transform: scale(0.97);
}
.vp-nest-card.cleared {
    border-color: #52c41a;
    background: #f6ffed;
}
.vp-nest-card.locked {
    opacity: 0.6;
    cursor: not-allowed;
}
.vp-nest-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.vp-nest-title {
    font-size: 14px;
    font-weight: bold;
    color: #1a1a2e;
    line-height: 1.4;
}
.vp-nest-desc {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
}
.vp-nest-subject {
    font-size: 11px;
    color: #0ea5e9;
    background: #f0f9ff;
    padding: 2px 6px;
    border-radius: 4px;
    align-self: flex-start;
}
.vp-nest-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    align-self: flex-start;
}
.vp-nest-badge.cleared {
    background: #52c41a;
    color: white;
}
.vp-nest-badge.locked {
    background: #f0f0f0;
    color: #999;
}
.vp-nest-badge.weak {
    background: #fff7e6;
    color: #d48806;
}

/* 九大陆地图页-观景台入口 */
.continent-vp-entry {
    margin: 20px 20px 0;
    background: linear-gradient(135deg, rgba(14,165,233,0.15) 0%, rgba(99,102,241,0.15) 100%);
    border: 1px solid rgba(14,165,233,0.3);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
}
.continent-vp-entry:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, rgba(14,165,233,0.2) 0%, rgba(99,102,241,0.2) 100%);
}
.cvp-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cvp-icon {
    font-size: 28px;
}
.cvp-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cvp-title {
    font-size: 15px;
    color: #e0f2fe;
}
.cvp-desc {
    font-size: 12px;
    color: #94a3b8;
}
.cvp-tag {
    font-size: 11px;
    padding: 3px 10px;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: white;
    border-radius: 10px;
    font-weight: 600;
}

/* ========== 个人中心 ========== */
.profile-header {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
    background: white;
    border-bottom: 1px solid #f5f5f5;
}
.profile-header .back-btn {
    background: #f5f5f5;
    border: none;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    color: #333;
}
.profile-title {
    margin: 0;
    font-size: 18px;
    flex: 1;
}

.profile-user {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    cursor: pointer;
}
.profile-info {
    flex: 1;
}
.profile-name {
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}
.profile-days {
    font-size: 13px;
    opacity: 0.85;
    margin-top: 4px;
}

.profile-stats-title {
    padding: 16px 20px 8px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 16px;
}
.stat-card {
    background: white;
    border-radius: 12px;
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s;
}
.stat-card:active {
    transform: scale(0.95);
}
.stat-num {
    font-size: 22px;
    font-weight: bold;
    color: #667eea;
}
.stat-label {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.profile-menu {
    margin: 16px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
}
.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer;
    transition: background 0.15s;
}
.menu-item:last-child {
    border-bottom: none;
}
.menu-item:active {
    background: #f9f9f9;
}
.menu-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #333;
}
.menu-icon {
    font-size: 18px;
}
.menu-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #999;
}
.menu-val {
    color: #667eea;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}
.setting-item:last-child {
    border-bottom: none;
}
.setting-left {
    font-size: 14px;
    color: #333;
}
.setting-right {
    font-size: 13px;
    color: #667eea;
}

/* ========================================================
   [机-34] 三档节奏选择器
   ======================================================== */

/* 设置页内联节奏选择器 */
.pace-selector-inline {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.pace-chip {
    flex: 1;
    padding: 10px 8px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    color: #666;
}
.pace-chip:active {
    transform: scale(0.95);
}
.pace-chip-active {
    border-width: 2px;
    font-weight: 700;
}

/* 节奏选择器弹窗 */
.pace-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pace-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}
.pace-option:active {
    transform: scale(0.98);
}
.pace-option-active {
    border-width: 2px;
}
.pace-option-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
}
.pace-option-info {
    flex: 1;
    min-width: 0;
}
.pace-option-name {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}
.pace-option-tag {
    font-size: 12px;
    color: #999;
}
.pace-option-check {
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700;
}

/* 猫咪面板节奏按钮 */
.cat-pace-btn {
    background: rgba(255,255,255,0.35) !important;
    font-weight: 700 !important;
}

/* 窝点头部节奏按钮 */
.nest-pace-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid rgba(245, 158, 11, 0.3);
    border-radius: 20px;
    background: #fffbeb;
    color: #f59e0b;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.nest-pace-btn:active {
    transform: scale(0.92);
}

/* 练习区探索档按钮 */
.hint-btn-explore {
    font-weight: 600;
}

/* 练习动作按钮组 */
.practice-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.action-btn-secondary {
    background: #f8f9ff !important;
    color: #667eea !important;
    border: 1.5px solid #d4dcff !important;
    font-size: 13px !important;
    padding: 10px !important;
}

/* ========================================================
   错题闭环 v1.1 P1 新增样式
   ======================================================== */

/* ----- A/B分类标签（列表卡片左上角）----- */
.wq-type-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}
.wq-type-badge.wq-type-a {
    background: #fff1f0;
    color: #f5222d;
    border: 1px solid #ffa39e;
}
.wq-type-badge.wq-type-b {
    background: #fffbe6;
    color: #faad14;
    border: 1px solid #ffe58f;
}
.wq-type-badge.wq-type-unc {
    background: #f5f5f5;
    color: #999;
    border: 1px solid #e8e8e8;
}

/* ----- 状态标签（列表卡片右上角）----- */
.wq-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    flex-shrink: 0;
}
.wq-status-badge.wq-status-unfixed {
    background: #fff1f0;
    color: #f5222d;
}
.wq-status-badge.wq-status-fixing {
    background: #fffbe6;
    color: #faad14;
}
.wq-status-badge.wq-status-fixed {
    background: #f6ffed;
    color: #52c41a;
}

/* ----- 第二行：A/B分类筛选按钮 ----- */
.wq-type-btn {
    padding: 5px 8px;
    border: 1px solid #e8e8e8;
    background: #fff;
    border-radius: 8px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.wq-type-btn:hover {
    background: #fafafa;
}
.wq-type-btn.wq-type-active {
    background: #f0f5ff;
    color: #1677ff;
    border-color: #1677ff;
    font-weight: 600;
}
.wq-type-btn.wq-type-active.wq-type-a {
    background: #fff1f0;
    color: #f5222d;
    border-color: #f5222d;
}
.wq-type-btn.wq-type-active.wq-type-b {
    background: #fffbe6;
    color: #faad14;
    border-color: #faad14;
}

/* ----- 详情页：A/B分类选择按钮 ----- */
.wq-type-pick-btn {
    padding: 8px 6px;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    border-radius: 10px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.wq-type-pick-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.wq-type-pick-btn.wq-type-pick-active {
    background: #f0f5ff;
    border-color: #1677ff;
    color: #1677ff;
}
.wq-type-pick-btn.wq-type-pick-active.wq-type-a {
    background: #fff1f0;
    border-color: #f5222d;
    color: #f5222d;
}
.wq-type-pick-btn.wq-type-pick-active.wq-type-b {
    background: #fffbe6;
    border-color: #faad14;
    color: #faad14;
}

/* ===== [P1-4] 四大数学思想训练 ===== */
.math-thought-training {
    padding: 4px 0;
}
.math-thought-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.math-thought-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 2px solid #e8e8e8;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}
.math-thought-option:hover {
    border-color: #d3adf7;
    background: #f9f0ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(114, 46, 209, 0.15);
}
.math-thought-option:active {
    transform: translateY(0);
}
.math-thought-icon {
    font-size: 28px;
}
.math-thought-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}
/* 答对状态 */
.math-thought-option.math-thought-correct {
    border-color: #52c41a;
    background: #f6ffed;
    animation: mathThoughtCorrect 0.5s ease;
}
.math-thought-option.math-thought-correct .math-thought-name {
    color: #52c41a;
}
@keyframes mathThoughtCorrect {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
/* 答错状态 */
.math-thought-option.math-thought-wrong {
    border-color: #f5222d;
    background: #fff1f0;
    animation: mathThoughtWrong 0.4s ease;
}
.math-thought-option.math-thought-wrong .math-thought-name {
    color: #f5222d;
}
@keyframes mathThoughtWrong {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
/* 正确答案提示（答错后亮起） */
.math-thought-option.math-thought-correct-hint {
    border-color: #52c41a;
    background: #f6ffed;
}
.math-thought-option.math-thought-correct-hint .math-thought-name {
    color: #52c41a;
}
/* 已尝试过的错误选项 */
.math-thought-option.math-thought-tried {
    opacity: 0.5;
    border-color: #d9d9d9;
}
/* 提示框 */
.math-thought-hint {
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

/* ----- 订正练习弹窗 ----- */
.fix-practice-content {
    font-size: 13px;
    line-height: 1.6;
}
.fix-practice-content .action-btn {
    margin-top: 0;
}

/* 订正结果三选一按钮 */
.fix-result-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-size: 13px;
    color: #333;
}
.fix-result-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.fix-result-btn:active {
    transform: translateY(0);
}
.fix-result-btn.fix-result-wrong {
    border-color: #ffa39e;
    background: linear-gradient(135deg, #fff1f0 0%, #fff 100%);
}
.fix-result-btn.fix-result-wrong:hover {
    border-color: #f5222d;
    box-shadow: 0 4px 12px rgba(245, 34, 45, 0.15);
}
.fix-result-btn.fix-result-partial {
    border-color: #ffe58f;
    background: linear-gradient(135deg, #fffbe6 0%, #fff 100%);
}
.fix-result-btn.fix-result-partial:hover {
    border-color: #faad14;
    box-shadow: 0 4px 12px rgba(250, 173, 20, 0.15);
}
.fix-result-btn.fix-result-right {
    border-color: #b7eb8f;
    background: linear-gradient(135deg, #f6ffed 0%, #fff 100%);
}
.fix-result-btn.fix-result-right:hover {
    border-color: #52c41a;
    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.15);
}

/* ----- 得分地图页 ----- */
.score-map-page {
    padding-bottom: 20px;
}

/* 得分地图头部 */
.score-map-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 16px;
    position: relative;
}
.score-map-title {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 12px;
}
.score-map-total-rate {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}
.score-map-total-rate .rate-num {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}
.score-map-total-rate .rate-label {
    font-size: 13px;
    opacity: 0.8;
}
.score-map-progress {
    height: 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}
.score-map-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd93d, #ff9f43);
    border-radius: 4px;
    transition: width 0.5s ease;
}
.score-map-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    opacity: 0.9;
}
.score-map-stats b {
    font-weight: 600;
    color: white;
}

/* 返回按钮 */
.score-map-back {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    margin-bottom: 10px;
}
.score-map-back:active {
    background: rgba(255,255,255,0.3);
}

.score-map-subject-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}
.score-map-subject-summary {
    display: flex;
    gap: 12px;
    font-size: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.score-map-subject-summary b {
    font-weight: 700;
}

/* 学科卡片列表 */
.score-map-subjects {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.score-map-subject-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.score-map-subject-card:active {
    transform: scale(0.98);
}
.subject-card-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.subject-card-info {
    flex: 1;
    min-width: 0;
}
.subject-card-name {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}
.subject-card-stats {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #999;
    margin-bottom: 6px;
}
.subject-card-progress {
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}
.subject-card-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}
.subject-card-rate {
    font-size: 10px;
    color: #999;
    text-align: right;
}
.subject-card-arrow {
    font-size: 20px;
    color: #ccc;
    flex-shrink: 0;
    font-weight: 300;
}

/* 猫咪提示 */
.score-map-cat-tip {
    margin: 0 16px 16px;
    padding: 12px 14px;
    background: #f9f0ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #722ed1;
}
.cat-tip-icon {
    font-size: 20px;
}
.cat-tip-text {
    flex: 1;
    line-height: 1.5;
}

/* 章节列表 */
.score-map-chapters {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.score-map-chapter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.score-map-chapter-row:active {
    transform: scale(0.98);
    background: #fafafa;
}
.chapter-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #999;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.score-map-chapter-row:nth-child(1) .chapter-rank {
    background: #fff1f0;
    color: #f5222d;
}
.score-map-chapter-row:nth-child(2) .chapter-rank {
    background: #fffbe6;
    color: #faad14;
}
.score-map-chapter-row:nth-child(3) .chapter-rank {
    background: #e6f7ff;
    color: #1890ff;
}
.chapter-info {
    flex: 1;
    min-width: 0;
}
.chapter-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chapter-stats {
    display: flex;
    gap: 10px;
    font-size: 10px;
    margin-bottom: 4px;
}
.chapter-progress {
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
}
.chapter-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}
.chapter-arrow {
    font-size: 18px;
    color: #ccc;
    flex-shrink: 0;
    font-weight: 300;
}

/* ========================================================
   [错题v1.1] 升级新增样式
   ======================================================== */

/* ----- 视图切换tab（列表/得分地图）----- */
.wq-view-tabs {
    display: flex;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 4px;
}
.wq-view-tab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}
.wq-view-tab-active {
    background: white;
    color: #1677ff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* ----- 难点卡筛选按钮 ----- */
.wq-hard-filter {
    padding: 4px 10px;
    border: 1px solid #ffe7ba;
    background: #fff7e6;
    border-radius: 8px;
    font-size: 11px;
    color: #fa8c16;
    cursor: pointer;
    transition: all 0.2s;
}
.wq-hard-filter:hover {
    background: #ffe7ba;
}
.wq-hard-filter-active {
    background: #fa8c16;
    color: white;
    border-color: #fa8c16;
    font-weight: 600;
}

/* ----- 难点卡标签（列表卡片中）----- */
.wq-hard-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    background: #fff7e6;
    color: #fa8c16;
    border: 1px solid #ffd591;
}

/* ----- 难点卡卡片特殊样式 ----- */
.wq-card-hard {
    border-left: 3px solid #fa8c16 !important;
    background: linear-gradient(to right, #fff7e6 0%, #ffffff 30%) !important;
}
.wq-card-hard:hover {
    box-shadow: 0 4px 12px rgba(250, 140, 22, 0.15) !important;
}

/* ----- [P1-2 批量操作] 多选模式相关样式 ----- */
.wq-select-mode-btn {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}
.wq-select-mode-btn:hover {
    border-color: #667eea;
    color: #667eea;
}
.wq-select-mode-btn:active {
    transform: scale(0.95);
}

/* 批量操作顶部栏 */
.wq-batch-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    margin-bottom: 8px;
    background: #f0f5ff;
    border-radius: 8px;
}
.wq-batch-back {
    background: none;
    border: none;
    color: #667eea;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.wq-batch-back:hover {
    background: #e6edff;
}
.wq-batch-count {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: #333;
}
.wq-batch-count b {
    color: #667eea;
    font-size: 15px;
}
.wq-batch-selectall {
    background: none;
    border: 1px solid #667eea;
    color: #667eea;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.wq-batch-selectall:hover {
    background: #667eea;
    color: #fff;
}
.wq-batch-selectall:active {
    transform: scale(0.95);
}

/* 复选框 */
.wq-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #d9d9d9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s;
    user-select: none;
}
.wq-checkbox:hover {
    border-color: #667eea;
}
.wq-checkbox-checked {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
}
.wq-checkbox-disabled {
    background: #f5f5f5;
    border-color: #e8e8e8;
    color: #ccc;
    cursor: not-allowed;
}

/* 选中的卡片 */
.wq-card-selected {
    border-color: #667eea !important;
    background: #f8faff !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15) !important;
}

/* 禁用的卡片（已闭环不可选） */
.wq-card-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    background: #fafafa !important;
}
.wq-card-disabled:hover {
    border-color: #eee !important;
    box-shadow: none !important;
}

/* 已闭环标记 */
.wq-done-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9px;
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
    flex-shrink: 0;
}

/* 批量操作底部栏 */
.wq-batch-footer {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}
.wq-batch-footer .cat-btn {
    padding: 10px 16px;
    font-size: 13px;
}
.wq-batch-footer .cat-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ----- 错题弹窗内联得分地图 ----- */
.wq-scoremap-header {
    background: linear-gradient(135deg, #f0f5ff 0%, #f9f0ff 100%);
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.wq-scoremap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.wq-scoremap-card {
    background: white;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.wq-scoremap-card:active {
    transform: scale(0.97);
}
.wq-scoremap-tip {
    background: #fffbe6;
    padding: 10px 12px;
    border-radius: 10px;
    text-align: center;
    color: #ad6800;
}

/* ----- 得分地图章节项 ----- */
.wq-map-chapter-item {
    background: white;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.wq-map-chapter-item:active {
    transform: scale(0.98);
    background: #fafafa;
}

/* ----- 得分地图返回按钮 ----- */
.wq-map-back {
    padding: 4px 10px;
    border: 1px solid #e8e8e8;
    background: white;
    border-radius: 8px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
}
.wq-map-back:active {
    background: #f5f5f5;
}

/* ----- 变式验证内容区 ----- */
.variant-verification-content {
    max-height: 70vh;
    overflow-y: auto;
}

/* ========== 新手引导 ========== */
.onboarding-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.onboarding-skip {
    position: absolute;
    top: 16px;
    right: 16px;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.15);
    transition: all 0.2s;
}
.onboarding-skip:active {
    background: rgba(255,255,255,0.25);
}

.onboarding-content {
    width: 100%;
    max-width: 340px;
    text-align: center;
    animation: fadeIn 0.4s ease;
}

.onboarding-dots {
    position: absolute;
    bottom: 80px;
    display: flex;
    gap: 8px;
}
.ob-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transition: all 0.3s;
}
.ob-dot.active {
    width: 20px;
    border-radius: 4px;
    background: white;
}

/* 猫咪头像 */
.onboarding-cat {
    margin-bottom: 20px;
}
.onboarding-cat.big .ob-cat-emoji {
    font-size: 80px;
    animation: bounce 2s ease-in-out infinite;
}
.onboarding-cat.small .ob-cat-emoji.small {
    font-size: 48px;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 话泡 */
.onboarding-bubble {
    background: white;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.onboarding-bubble.big {
    padding: 28px 24px;
}
.onboarding-bubble::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
}
.ob-line1 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}
.ob-line2 {
    font-size: 15px;
    color: #666;
}
.ob-question {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 4px;
}

/* 输入框 */
.onboarding-input-wrap {
    margin-bottom: 12px;
}
.onboarding-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 12px;
    font-size: 16px;
    background: rgba(255,255,255,0.95);
    color: #333;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}
.onboarding-input:focus {
    border-color: #ffd93d;
}
.onboarding-input::placeholder {
    color: #bbb;
    font-size: 14px;
}

.ob-feedback {
    color: #ff6b6b;
    font-size: 13px;
    margin-bottom: 12px;
    min-height: 20px;
}

/* 下一步按钮 */
.onboarding-next-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #ffd93d, #ff9f43);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 159, 67, 0.3);
    transition: all 0.2s;
}
.onboarding-next-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(255, 159, 67, 0.3);
}
.onboarding-next-btn:disabled {
    background: #ddd;
    color: #999;
    box-shadow: none;
    cursor: not-allowed;
}

/* 年级选择 */
.onboarding-grade-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.onboarding-grade-btn {
    padding: 12px 8px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.onboarding-grade-btn:active {
    transform: scale(0.95);
}
.onboarding-grade-btn.selected {
    background: white;
    color: #667eea;
    border-color: #ffd93d;
    font-weight: 600;
}

/* 产品介绍场景 */
.onboarding-scene {
    margin-bottom: 20px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ob-scene-desk {
    position: relative;
    width: 200px;
    height: 80px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.ob-scene-cat {
    font-size: 40px;
}
.ob-scene-book {
    font-size: 36px;
}
.ob-intro-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}
.ob-intro-text {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 6px;
}

/* 地图预览 */
.onboarding-map-preview {
    background: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.ob-map-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    text-align: left;
}
.ob-map-mini {
    height: 100px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.ob-nest-highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}
.ob-nest-icon {
    font-size: 32px;
}
.ob-nest-name {
    font-size: 11px;
    color: #4F7CFF;
    font-weight: 500;
    white-space: nowrap;
}

/* ========== 首次通关庆祝 ========== */
.first-celebration {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}
.first-celebrate-box {
    background: white;
    border-radius: 20px;
    padding: 30px 24px;
    width: 100%;
    max-width: 340px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    animation: scaleIn 0.4s ease;
}
@keyframes scaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.first-celebrate-emoji {
    font-size: 56px;
    margin-bottom: 12px;
    animation: bounce 1s ease-in-out infinite;
}
.first-celebrate-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}
.first-celebrate-cat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    text-align: left;
}
.first-celebrate-cat-icon {
    font-size: 36px;
    flex-shrink: 0;
}
.first-celebrate-bubble {
    flex: 1;
    background: #f5f7fa;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    position: relative;
}
.first-celebrate-bubble::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 12px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid #f5f7fa;
}
.first-celebrate-actions {
    display: flex;
    gap: 10px;
}
.first-celebrate-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.first-celebrate-btn:active {
    transform: scale(0.98);
}
.first-celebrate-btn.primary {
    background: linear-gradient(135deg, #ffd93d, #ff9f43);
    color: #333;
}
.first-celebrate-btn.secondary {
    background: #f0f2f5;
    color: #666;
}

/* ========================================================
   大脑地图模块（心法层P0）
   ======================================================== */

.brain-map-page {
    padding-bottom: 20px;
}

/* 头部 */
.brain-map-header {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.brain-map-header .back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}
.brain-map-title {
    margin: 0;
    font-size: 18px;
    flex: 1;
}

/* 猫咪提示 */
.brain-cat-tip {
    margin: 16px 16px 0;
    padding: 12px 14px;
    background: #fff9f0;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.brain-cat-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.brain-cat-text {
    flex: 1;
    font-size: 13px;
    color: #92400e;
    line-height: 1.6;
}
.brain-cat-name {
    font-weight: 600;
    color: #d48806;
}

/* 雷达图区域 */
.brain-radar-section {
    margin: 16px;
    padding: 16px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.brain-radar-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    text-align: center;
}
.brain-radar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}
.brain-radar-svg {
    width: 100%;
    max-width: 280px;
    height: auto;
}

/* 雷达图数据多边形 */
.radar-data-polygon {
    fill: rgba(108, 92, 231, 0.25);
    stroke: #6c5ce7;
    stroke-width: 2;
    transition: all 0.5s ease;
}

/* 雷达图图例 */
.brain-radar-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #999;
}
.radar-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(108, 92, 231, 0.5);
    border: 2px solid #6c5ce7;
}
.radar-legend-text {
    font-size: 12px;
}

/* 维度卡片区域 */
.brain-dim-section {
    margin: 16px;
}
.brain-dim-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}
.brain-dim-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.brain-dim-card {
    background: white;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 2px solid transparent;
}
.brain-dim-card:active {
    transform: scale(0.95);
    border-color: #667eea;
}
.dim-card-icon {
    font-size: 24px;
    margin-bottom: 4px;
}
.dim-card-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}
.dim-card-level {
    font-size: 10px;
    color: #667eea;
    font-weight: 600;
    margin-bottom: 6px;
}
.dim-card-bar {
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}
.dim-card-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 2px;
    transition: width 0.5s ease;
}
.dim-card-score {
    font-size: 9px;
    color: #999;
}

/* 底部提示 */
.brain-footer-tip {
    margin: 20px 16px;
    padding: 12px 14px;
    background: #f9f0ff;
    border-radius: 12px;
    font-size: 12px;
    color: #722ed1;
    text-align: center;
    line-height: 1.6;
}

/* 响应式适配 */
@media (max-width: 375px) {
    .brain-dim-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .brain-dim-card {
        padding: 10px 6px;
    }
    .dim-card-icon {
        font-size: 20px;
    }
    .dim-card-name {
        font-size: 11px;
    }
}

/* ========================================================
   21天开窍旅程模块（心法层P0）
   ======================================================== */

/* 首页入口卡片 */
.journey21-entry-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #fff9f0 0%, #fff5e6 100%);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 16px 12px;
    cursor: pointer;
    transition: transform 0.2s;
}
.journey21-entry-card:active {
    transform: scale(0.97);
}
.j21-entry-icon {
    font-size: 28px;
}
.j21-entry-title {
    font-size: 14px;
    color: #333;
}
.j21-entry-desc {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

/* 21天旅程页面 */
.journey21-page {
    padding-bottom: 20px;
}

/* 页面头部 */
.journey21-header {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.journey21-header .back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}
.journey21-title {
    margin: 0;
    font-size: 18px;
    flex: 1;
}

/* 猫咪寄语区 */
.journey21-cat-section {
    margin: 16px;
    background: white;
    border-radius: 16px;
    padding: 16px;
    position: relative;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.journey21-cat-icon {
    font-size: 40px;
    position: absolute;
    top: -15px;
    left: 20px;
    animation: catBreathe 3s ease-in-out infinite;
}
@keyframes catBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.journey21-cat-bubble {
    margin-left: 50px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}
.journey21-cat-name {
    font-weight: 600;
    color: #722ed1;
}
.journey21-day-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 50px;
}
.journey21-day-badge span:first-child {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.journey21-phase {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    background: #E8F4FD;
    color: #4A90D9;
}

/* 通用section标题 */
.section-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    padding: 0 4px;
}

/* 今日主题卡片 */
.journey21-today-card {
    margin: 0 16px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 20px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
    display: flex;
    align-items: center;
    gap: 16px;
}
.journey21-today-card:active {
    transform: scale(0.97);
}
.today-card-icon {
    font-size: 48px;
    flex-shrink: 0;
}
.today-card-content {
    flex: 1;
    min-width: 0;
}
.today-card-label {
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 4px;
}
.today-card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}
.today-card-catline {
    font-size: 12px;
    opacity: 0.9;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.today-card-arrow {
    font-size: 12px;
    opacity: 0.85;
    flex-shrink: 0;
    font-weight: 500;
}

/* 三面镜子面板 */
.journey21-mirrors-section {
    margin: 0 16px 20px;
}
.mirrors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.mirror-card {
    background: white;
    border-radius: 12px;
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 2px solid transparent;
}
.mirror-card:active {
    transform: scale(0.95);
}
.mirror-card.unlocked {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.mirror-card.unlocked .mirror-icon {
    animation: mirrorGlow 2s ease-in-out infinite;
}
@keyframes mirrorGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(102, 126, 234, 0.5)); }
    50% { filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.8)); }
}
.mirror-card.locked {
    opacity: 0.5;
    filter: grayscale(0.6);
}
.mirror-icon {
    font-size: 28px;
    margin-bottom: 6px;
}
.mirror-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}
.mirror-status {
    font-size: 10px;
    color: #999;
}
.mirror-card.unlocked .mirror-status {
    color: #667eea;
    font-weight: 600;
}

/* 旅程地图 */
.journey21-map-section {
    margin: 0 16px 20px;
    background: white;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.journey-map-phases {
    display: flex;
    justify-content: space-around;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}
.phase-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #666;
    font-weight: 500;
}
.phase-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.phase-cognition .phase-dot { background: #4A90D9; }
.phase-enlighten .phase-dot { background: #9B59B6; }
.phase-launch .phase-dot { background: #F39C12; }

.journey-map-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.journey-map-row {
    position: relative;
}
.journey-phase-name {
    font-size: 11px;
    color: #999;
    margin-bottom: 6px;
    font-weight: 500;
}
.journey-phase-cognition .journey-phase-name { color: #4A90D9; }
.journey-phase-enlighten .journey-phase-name { color: #9B59B6; }
.journey-phase-launch .journey-phase-name { color: #F39C12; }

.journey-nodes-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 8px 0;
}

/* 连接线 */
.journey-nodes-row::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 8%;
    right: 8%;
    height: 2px;
    background: #eee;
    transform: translateY(-50%);
    z-index: 0;
}
.journey-phase-cognition .journey-nodes-row::before {
    background: linear-gradient(90deg, #4A90D9, #4A90D9);
}
.journey-phase-enlighten .journey-nodes-row::before {
    background: linear-gradient(90deg, #9B59B6, #9B59B6);
}
.journey-phase-launch .journey-nodes-row::before {
    background: linear-gradient(90deg, #F39C12, #F39C12);
}

.journey-node {
    width: 32px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: transform 0.2s;
}
.journey-node:active {
    transform: scale(0.9);
}
.journey-node .node-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 2px solid #ddd;
    transition: all 0.3s ease;
}
.journey-node .node-label {
    font-size: 9px;
    color: #bbb;
    margin-top: 3px;
    font-weight: 500;
}

/* 已完成节点 */
.journey-node.completed .node-icon {
    background: linear-gradient(135deg, #52c41a, #237804);
    border-color: #52c41a;
    color: white;
    font-size: 12px;
    font-weight: 700;
}
.journey-node.completed .node-label {
    color: #52c41a;
}

/* 当前节点 */
.journey-node.current .node-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: #667eea;
    color: white;
    font-size: 14px;
    animation: currentPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}
@keyframes currentPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.1);
    }
}
.journey-node.current .node-label {
    color: #667eea;
    font-weight: 700;
}

/* 未到达节点 */
.journey-node.locked .node-icon {
    background: #f5f5f5;
    border-color: #e0e0e0;
    opacity: 0.6;
}
.journey-node.locked .node-label {
    color: #ccc;
}

/* 终点节点 */
.journey-node.final .node-icon {
    width: 32px;
    height: 32px;
    font-size: 18px;
}
.journey-node.final.completed .node-icon {
    background: linear-gradient(135deg, #ffd93d, #ff9f43);
    border-color: #ffd93d;
    animation: finalStar 2s ease-in-out infinite;
}
@keyframes finalStar {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

/* 累计数据区 */
.journey21-stats-section {
    margin: 0 16px;
    background: white;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.journey-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.journey-stat-item {
    text-align: center;
    padding: 10px 4px;
    background: #f8f9ff;
    border-radius: 10px;
}
.journey-stat-num {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}
.journey-stat-label {
    font-size: 10px;
    color: #999;
    margin-top: 4px;
}

/* 响应式适配 */
@media (max-width: 375px) {
    .journey21-today-card {
        padding: 16px;
        gap: 12px;
    }
    .today-card-icon {
        font-size: 40px;
    }
    .today-card-title {
        font-size: 17px;
    }
    .mirrors-grid {
        gap: 8px;
    }
    .mirror-card {
        padding: 12px 6px;
    }
    .mirror-icon {
        font-size: 24px;
    }
    .journey-stat-num {
        font-size: 18px;
    }
    .journey-node {
        width: 28px;
    }
    .journey-node .node-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}
/* ============================================================
   觉醒仪式·三帧终版 MVP 样式
   ============================================================ */
.awakening-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a1a;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.awakening-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.awakening-frame.aw-frame1 {
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a1a 70%);
}

.awakening-frame.aw-frame2 {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.awakening-frame.aw-frame3 {
    background: linear-gradient(180deg, #0a1628 0%, #1a2744 50%, #0d1b2a 100%);
}

/* ---- 通用淡入动画 ---- */
.aw-fade-in {
    animation: awFadeIn 0.8s ease-out forwards;
}

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

.aw-fade-in-scale {
    animation: awFadeInScale 1s ease-out forwards;
}

@keyframes awFadeInScale {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

/* ======================================================
   第一帧：绑定系统
   ====================================================== */

/* 猫字图标 */
.aw-cat-icon {
    font-size: 48px;
    font-weight: 900;
    color: #FFD93D;
    font-family: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
    margin-bottom: 40px;
    opacity: 0;
    text-shadow: 0 0 20px rgba(255, 217, 61, 0.5),
                 0 0 40px rgba(255, 217, 61, 0.3),
                 0 0 60px rgba(255, 217, 61, 0.1);
}

.aw-cat-icon.aw-breath {
    animation: awCatBreath 3s ease-in-out infinite;
}

@keyframes awCatBreath {
    0%, 100% {
        text-shadow: 0 0 20px rgba(255, 217, 61, 0.5),
                     0 0 40px rgba(255, 217, 61, 0.3),
                     0 0 60px rgba(255, 217, 61, 0.1);
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 30px rgba(255, 217, 61, 0.8),
                     0 0 60px rgba(255, 217, 61, 0.5),
                     0 0 90px rgba(255, 217, 61, 0.2);
        transform: scale(1.05);
    }
}

/* 文字堆栈（逐行浮现） */
.aw-text-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    min-height: 120px;
}

.aw-text-line {
    color: #a0aec0;
    font-size: 14px;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.6s ease;
}

.aw-text-line.aw-show {
    opacity: 1;
    transform: translateY(0);
}

.aw-text-line.aw-highlight {
    color: #FFD93D;
    text-shadow: 0 0 10px rgba(255, 217, 61, 0.5);
    font-size: 16px;
}

/* 绑定进度条 */
.aw-bind-progress {
    width: 200px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 20px;
}

.aw-bind-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #FFD93D, #ffb347);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 217, 61, 0.5);
    transition: width 2s ease-in-out;
}

/* 闪光效果 */
.aw-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,217,61,0.5) 40%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.aw-flash.aw-play {
    animation: awFlash 0.6s ease-out forwards;
}

@keyframes awFlash {
    0% { width: 0; height: 0; opacity: 1; }
    50% { width: 300px; height: 300px; opacity: 0.8; }
    100% { width: 500px; height: 500px; opacity: 0; }
}

/* 礼包盒 */
.aw-gift-box {
    font-size: 48px;
    margin-bottom: 10px;
    opacity: 0;
}

.aw-gift-box.aw-pop {
    animation: awGiftPop 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes awGiftPop {
    0% { transform: scale(0) rotate(-30deg); opacity: 0; }
    60% { transform: scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* 猫咪吉祥物 */
.aw-cat-mascot {
    font-size: 56px;
    opacity: 0;
}

.aw-cat-mascot.aw-jump {
    animation: awCatJump 0.8s ease-out forwards;
}

@keyframes awCatJump {
    0% { transform: translateY(30px) scale(0.5); opacity: 0; }
    50% { transform: translateY(-15px) scale(1.1); opacity: 1; }
    70% { transform: translateY(5px) scale(0.95); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 猫咪气泡 */
.aw-cat-bubble {
    background: white;
    color: #333;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 16px;
    margin-top: 8px;
    position: relative;
    opacity: 0;
}

.aw-cat-bubble::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
}

.aw-cat-bubble.aw-pop-in {
    animation: awBubblePop 0.5s ease-out 0.3s forwards;
}

@keyframes awBubblePop {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* 命名输入区 */
.aw-name-section {
    margin-top: 30px;
    opacity: 0;
}

.aw-name-section.aw-fade-in {
    animation: awFadeIn 0.6s ease-out forwards;
}

.aw-name-desc {
    color: #e2e8f0;
    font-size: 15px;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.aw-name-desc-sub {
    color: #94a3b8;
    font-size: 12px;
    margin-bottom: 16px;
}

.aw-name-input-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.aw-name-input {
    padding: 10px 16px;
    border: 1px solid rgba(255, 217, 61, 0.3);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 15px;
    text-align: center;
    width: 140px;
    outline: none;
    transition: all 0.3s ease;
}

.aw-name-input:focus {
    border-color: #FFD93D;
    box-shadow: 0 0 15px rgba(255, 217, 61, 0.3);
}

.aw-name-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, #FFD93D, #ffb347);
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.aw-name-btn:active {
    transform: scale(0.95);
}

.aw-name-hint {
    font-size: 11px;
    color: #64748b;
}

/* ======================================================
   第二帧：开窍启程
   ====================================================== */

.aw-f2-cat-area {
    position: absolute;
    left: 20px;
    top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aw-f2-cat {
    font-size: 48px;
    animation: awF2CatIdle 3s ease-in-out infinite;
}

@keyframes awF2CatIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.aw-f2-cat-name {
    font-size: 12px;
    color: #FFD93D;
    margin-top: 2px;
    background: rgba(0,0,0,0.3);
    padding: 2px 8px;
    border-radius: 10px;
}

.aw-f2-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 320px;
    margin-top: 80px;
}

.aw-f2-system-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
    font-weight: 900;
    color: #FFD93D;
    font-family: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
    opacity: 0.6;
    text-shadow: 0 0 10px rgba(255, 217, 61, 0.4);
}

.aw-f2-step {
    width: 100%;
    opacity: 0;
}

.aw-f2-step.aw-fade-in {
    animation: awFadeIn 0.6s ease-out forwards;
}

.aw-f2-question {
    color: #e2e8f0;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.aw-f2-input-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.aw-f2-input {
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 16px;
    text-align: center;
    width: 160px;
    outline: none;
    transition: all 0.3s ease;
}

.aw-f2-input:focus {
    border-color: #FFD93D;
    box-shadow: 0 0 15px rgba(255, 217, 61, 0.2);
}

.aw-f2-btn {
    padding: 12px 22px;
    border: none;
    border-radius: 24px;
    background: linear-gradient(135deg, #FFD93D, #ffb347);
    color: #333;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.aw-f2-btn:active {
    transform: scale(0.95);
}

.aw-f2-skip {
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.aw-f2-grade-row {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.aw-f2-grade-btn {
    padding: 14px 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.aw-f2-grade-btn:active,
.aw-f2-grade-btn:hover {
    border-color: #FFD93D;
    background: rgba(255, 217, 61, 0.1);
    color: #FFD93D;
    transform: scale(1.05);
}

/* 21天简介文字 */
.aw-f2-intro-text {
    color: #cbd5e1;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 1px;
    text-align: left;
    padding: 0 10px;
}

.aw-f2-intro-line {
    opacity: 0;
    transform: translateY(6px);
    margin-bottom: 4px;
}

.aw-f2-intro-line.aw-show {
    animation: awFadeIn 0.5s ease-out forwards;
}

.aw-f2-intro-line.aw-emphasis {
    color: #FFD93D;
    font-weight: 600;
}

.aw-f2-ready {
    color: #e2e8f0;
    font-size: 16px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.aw-f2-start-btn {
    padding: 14px 32px;
    border: none;
    border-radius: 28px;
    background: linear-gradient(135deg, #FFD93D 0%, #ff9500 100%);
    color: #333;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255, 217, 61, 0.4);
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.aw-f2-start-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(255, 217, 61, 0.3);
}

/* ======================================================
   第三帧：知识世界
   ====================================================== */

.aw-f3-chaos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 30% 40%, rgba(100, 150, 200, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(150, 100, 200, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(50, 80, 120, 0.2) 0%, transparent 70%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 2s ease;
}

.aw-f3-chaos.aw-clearing {
    opacity: 0.3;
}

/* 九大陆冰封网格 */
.aw-f3-continents {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 280px;
    margin-bottom: 30px;
    z-index: 2;
}

.aw-f3-continent {
    aspect-ratio: 1;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s ease;
}

.aw-f3-continent.aw-show {
    opacity: 1;
    transform: scale(1);
}

/* 冰封效果 */
.aw-f3-continent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(200,220,255,0.15) 50%, rgba(255,255,255,0.25) 100%);
    z-index: 2;
    pointer-events: none;
}

/* 冰裂纹理 */
.aw-f3-continent::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.3) 49%, rgba(255,255,255,0.3) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0.2) 51%, transparent 52%),
        linear-gradient(30deg, transparent 48%, rgba(255,255,255,0.15) 49%, rgba(255,255,255,0.15) 51%, transparent 52%);
    z-index: 3;
    pointer-events: none;
    animation: awIceCrack 4s ease-in-out infinite;
}

@keyframes awIceCrack {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

.aw-f3-continent-emoji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    filter: grayscale(0.5) brightness(0.7);
    z-index: 1;
}

.aw-f3-continent-name {
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 9px;
    color: rgba(255,255,255,0.7);
    z-index: 4;
    letter-spacing: 1px;
}

/* 冰壳呼吸效果 */
.aw-f3-continent.aw-show {
    animation: awIceBreath 3s ease-in-out infinite;
}

@keyframes awIceBreath {
    0%, 100% {
        box-shadow: inset 0 0 10px rgba(255,255,255,0.2),
                    0 0 8px rgba(150, 200, 255, 0.15);
    }
    50% {
        box-shadow: inset 0 0 20px rgba(255,255,255,0.3),
                    0 0 15px rgba(150, 200, 255, 0.3);
    }
}

.aw-f3-cat {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0;
    z-index: 2;
}

.aw-f3-cat.aw-walk-in {
    animation: awF3CatWalk 1s ease-out forwards;
}

@keyframes awF3CatWalk {
    0% { transform: translateX(-50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.aw-f3-text {
    color: #a0aec0;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 20px;
    opacity: 0;
    z-index: 2;
}

.aw-f3-text.aw-fade-in {
    animation: awFadeIn 0.8s ease-out forwards;
}

.aw-f3-explore-btn {
    padding: 14px 40px;
    border: none;
    border-radius: 28px;
    background: linear-gradient(135deg, #FFD93D 0%, #ff9500 100%);
    color: #333;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255, 217, 61, 0.4);
    z-index: 2;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.aw-f3-explore-btn:active {
    transform: scale(0.95);
}

.aw-f3-explore-btn.aw-fade-in {
    animation: awFadeIn 0.8s ease-out 0.3s forwards;
}

/* ======================================================
   九大陆冰封视觉增强（主地图页）
   ====================================================== */

/* 冰封状态的大陆卡片 */
.continent-card {
    position: relative;
    overflow: hidden;
}

/* 冰壳覆盖层 - 未点亮大陆 */
.continent-card.ice-locked .continent-card-color::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, rgba(200,220,255,0.35) 0%, rgba(150,180,220,0.2) 50%, rgba(200,220,255,0.3) 100%);
    z-index: 1;
    pointer-events: none;
    animation: iceBreath 4s ease-in-out infinite;
}

@keyframes iceBreath {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* 冰裂纹理 */
.continent-card.ice-locked .continent-card-color::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(55deg, transparent 48%, rgba(255,255,255,0.4) 49%, rgba(255,255,255,0.4) 51%, transparent 52%),
        linear-gradient(-35deg, transparent 48%, rgba(255,255,255,0.3) 49%, rgba(255,255,255,0.3) 51%, transparent 52%);
    background-size: 30px 30px, 20px 20px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.6;
}

/* 冰封标识 - 雪花图标 */
.continent-card.ice-locked::after {
    content: '❄️';
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 12px;
    z-index: 10;
    animation: snowflakeSpin 6s linear infinite;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.5));
}

@keyframes snowflakeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 部分解锁 - 冰壳变薄 */
.continent-card.ice-partial .continent-card-color::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, rgba(200,220,255,0.15) 0%, rgba(150,180,220,0.08) 50%, rgba(200,220,255,0.12) 100%);
    z-index: 1;
    pointer-events: none;
    animation: iceBreath 4s ease-in-out infinite;
}

.continent-card.ice-partial .continent-card-color::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(55deg, transparent 48%, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0.2) 51%, transparent 52%);
    background-size: 40px 40px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.4;
}

/* 破冰Toast动画 */
.ice-break-toast {
    animation: iceBreakPop 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes iceBreakPop {
    0% { transform: scale(0.3) translateY(-20px); opacity: 0; }
    60% { transform: scale(1.1) translateY(5px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* 选项禁用状态（数据异常时） */
.option-item.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ========================================================
   九大陆世界观地图（九州点亮）MVP样式
   ======================================================== */

/* --- 九大陆主页面 --- */
.continent-map-page {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    min-height: 100vh;
    color: #fff;
    padding-bottom: 30px;
}

.continent-map-header {
    display: flex;
    align-items: center;
    padding: 16px 20px 12px;
    position: relative;
}

.continent-map-header .back-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

.continent-map-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    margin: 0;
}

.continent-map-header .back-btn + .continent-map-title {
    margin-right: 50px;
}

/* 总进度条 */
.continent-overall {
    margin: 8px 20px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.continent-overall-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    color: #94a3b8;
}

.continent-overall-label span:last-child {
    font-size: 20px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.continent-overall-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.continent-overall-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f59e0b, #ffd700, #fbbf24);
    border-radius: 5px;
    transition: width 0.8s ease;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.continent-overall-sub {
    margin-top: 8px;
    text-align: right;
    font-size: 11px;
    color: #64748b;
}

/* 九大陆 3x3 格子 */
.continent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 16px;
}

/* 大陆卡片 */
.continent-card {
    background: rgba(30, 41, 59, 0.8);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.continent-card:active {
    transform: scale(0.95);
}

/* 核心大陆（第一行）略大 */
.continent-card.core {
    transform: scale(1.05);
    z-index: 1;
}

.continent-card.core:active {
    transform: scale(1.0);
}

/* 大陆色块（上半部分） */
.continent-card-color {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* 点亮状态 - 冷灰（未点亮） */
.continent-card-color.dimmed {
    filter: grayscale(0.8) brightness(0.5);
    background: #334155 !important;
}

/* 点亮状态 - 微光 */
.continent-card-color.faint {
    filter: brightness(0.7);
}

/* 点亮状态 - 明亮 */
.continent-card-color.bright {
    filter: brightness(1.1) saturate(1.1);
    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.1);
}

/* 点亮状态 - 辉煌 */
.continent-card-color.glowing {
    filter: brightness(1.2) saturate(1.2);
    animation: continentPulse 3s ease-in-out infinite;
}

@keyframes continentPulse {
    0%, 100% { box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: inset 0 0 40px rgba(255, 215, 0, 0.4); }
}

/* 大陆信息（下部） */
.continent-card-info {
    padding: 8px 10px 10px;
    text-align: center;
}

.continent-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.continent-card-subject {
    font-size: 10px;
    color: #64748b;
    margin-bottom: 6px;
}

.continent-card-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.continent-card-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.continent-card-percent {
    font-size: 9px;
    color: #94a3b8;
    text-align: right;
}

/* 核心大陆标记 */
.continent-card-core-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 8px;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}

/* 底部能力档案入口 */
.continent-footer-entry {
    margin: 24px 20px 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s;
}

.continent-footer-entry:active {
    background: rgba(255, 255, 255, 0.1);
}

.continent-footer-icon {
    font-size: 20px;
    margin-right: 10px;
}

.continent-footer-text {
    flex: 1;
    font-size: 14px;
    color: #e2e8f0;
}

.continent-footer-arrow {
    color: #64748b;
    font-size: 18px;
}

/* --- 大陆详情页 --- */
.continent-detail-page {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    min-height: 100vh;
    color: #fff;
    padding-bottom: 30px;
}

.continent-detail-header {
    display: flex;
    align-items: center;
    padding: 16px 20px 12px;
    gap: 10px;
}

.continent-detail-header .back-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}

.continent-detail-title-wrap {
    flex: 1;
    min-width: 0;
}

.continent-detail-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.continent-detail-subject {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.continent-detail-rate {
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* 详情页统计 */
.continent-detail-stats {
    display: flex;
    justify-content: space-around;
    margin: 8px 20px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 16px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cd-stat-item {
    text-align: center;
}

.cd-stat-num {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

/* 全亮窝点：金色强发光 */
.cd-stat-item:first-child .cd-stat-num {
    color: #ffd700;
    text-shadow: 
        0 0 6px rgba(255, 215, 0, 0.6),
        0 0 12px rgba(255, 180, 0, 0.3);
    animation: statNumGlow 2.5s ease-in-out infinite;
}

@keyframes statNumGlow {
    0%, 100% { text-shadow: 0 0 6px rgba(255, 215, 0, 0.6), 0 0 12px rgba(255, 180, 0, 0.3); }
    50% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 18px rgba(255, 180, 0, 0.5); }
}

/* 半亮窝点：暖橙色微光 */
.cd-stat-item:nth-child(2) .cd-stat-num {
    color: #ff9500;
    text-shadow: 0 0 4px rgba(255, 149, 0, 0.3);
    opacity: 0.9;
}

/* 未探索：冷灰色 */
.cd-stat-item:last-child .cd-stat-num {
    color: #94a3b8;
    opacity: 0.8;
}

.cd-stat-label {
    font-size: 11px;
    color: #94a3b8;
}

/* 窝点分组区域 */
.continent-nests-container {
    padding: 0 16px;
}

.continent-chapter-group {
    margin-bottom: 20px;
}

.continent-chapter-title {
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 10px;
    padding-left: 8px;
    border-left: 3px solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.continent-chapter-count {
    font-size: 11px;
    color: #64748b;
    font-weight: normal;
}

.continent-nest-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 窝点小圆点 */
.continent-nest-dot {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.continent-nest-dot:active {
    transform: scale(0.9);
}

/* 全亮 - 金色发光（强化版：多层发光 + 呼吸动画） */
.continent-nest-dot.full {
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #78350f;
    box-shadow: 
        0 0 10px rgba(255, 215, 0, 0.7),
        0 0 20px rgba(255, 180, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 215, 0, 0.5);
    animation: dotFullGlow 2s ease-in-out infinite;
}

@keyframes dotFullGlow {
    0%, 100% {
        box-shadow: 
            0 0 8px rgba(255, 215, 0, 0.5),
            0 0 16px rgba(255, 180, 0, 0.3),
            inset 0 1px 2px rgba(255, 255, 255, 0.6);
    }
    50% {
        box-shadow: 
            0 0 14px rgba(255, 215, 0, 0.8),
            0 0 28px rgba(255, 180, 0, 0.5),
            inset 0 1px 2px rgba(255, 255, 255, 0.6);
    }
}

/* 半亮 - 暖橙微光（强化版：暖色渐变 + 弱呼吸，与全亮形成明显差距） */
.continent-nest-dot.partial {
    background: linear-gradient(135deg, #fff7e6, #ffd699);
    color: #92400e;
    box-shadow: 
        0 0 6px rgba(255, 170, 80, 0.4),
        0 0 12px rgba(255, 140, 50, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 170, 80, 0.3);
    opacity: 0.85;
    animation: dotPartialGlow 3.5s ease-in-out infinite;
}

@keyframes dotPartialGlow {
    0%, 100% {
        box-shadow: 
            0 0 4px rgba(255, 170, 80, 0.3),
            0 0 8px rgba(255, 140, 50, 0.15),
            inset 0 1px 2px rgba(255, 255, 255, 0.5);
        opacity: 0.8;
    }
    50% {
        box-shadow: 
            0 0 8px rgba(255, 170, 80, 0.5),
            0 0 14px rgba(255, 140, 50, 0.3),
            inset 0 1px 2px rgba(255, 255, 255, 0.5);
        opacity: 0.92;
    }
}

/* 暗 - 冷灰冰封（强化版：冷色调，与半亮/全亮的暖色形成对比） */
.continent-nest-dot.dark {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #64748b;
    border-color: rgba(100, 150, 200, 0.15);
    opacity: 0.7;
    filter: grayscale(0.3);
}

.continent-nest-dot-label {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: #64748b;
    white-space: nowrap;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.2s;
}

.continent-nest-dot:hover .continent-nest-dot-label {
    opacity: 1;
}

/* 空大陆提示 */
.continent-empty {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
}

.continent-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.continent-empty-text {
    font-size: 13px;
    line-height: 1.8;
}

/* 能力档案页面标题调整（旧雷达图页复用） */
.brain-map-page .ability-profile-badge {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 10px;
    background: rgba(102, 126, 234, 0.15);
    color: #667eea;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
}
/* ========================================================
   成长收藏册（功能背包重构版 · 四层结构）
   ======================================================== */

/* 背包页面整体样式（覆盖原有） */
#backpack-page {
    background: linear-gradient(180deg, #f0f4ff 0%, #f8f9ff 30%, #f5f7fa 100%);
    min-height: 100vh;
    padding-bottom: 100px;
    position: relative;
}

/* --- 第一层：顶部猫咪状态条 --- */
.gb-cat-bar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 16px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.3);
}

.gb-cat-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.gb-cat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 2px solid rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

.gb-cat-info {
    min-width: 0;
}

.gb-cat-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.gb-cat-level {
    font-size: 10px;
    opacity: 0.85;
    margin-top: 2px;
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 6px;
    border-radius: 8px;
    display: inline-block;
}

.gb-cat-center {
    flex: 1;
    min-width: 0;
}

.gb-talent-bar {
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.gb-talent-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd93d, #ff9f43);
    border-radius: 8px;
    transition: width 0.5s ease;
    width: 0%;
    box-shadow: 0 0 8px rgba(255, 217, 61, 0.6);
}

.gb-talent-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.gb-talent-label {
    font-size: 10px;
    opacity: 0.8;
    margin-top: 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gb-cat-right {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    align-items: flex-end;
}

.gb-stat-icon {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 600;
}

/* --- 第二层：中部收藏品四格（2×2） --- */
.gb-collection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px 14px;
}

.gb-collection-cell {
    background: white;
    border-radius: 16px;
    padding: 14px 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.gb-collection-cell:active {
    transform: scale(0.97);
    border-color: rgba(102, 126, 234, 0.3);
}

.gb-collection-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    opacity: 0.6;
}

.gb-cell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.gb-cell-icon {
    font-size: 22px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.gb-cell-count {
    font-size: 11px;
    font-weight: 700;
    color: #667eea;
    background: #f0f3ff;
    padding: 2px 8px;
    border-radius: 10px;
}

.gb-cell-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.gb-cell-preview {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.gb-recent-badge {
    font-size: 36px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
    animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.gb-empty-hint {
    font-size: 12px;
    color: #ccc;
}

.gb-cell-name {
    font-size: 10px;
    color: #999;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 闪卡分类迷你进度条 */
.gb-cell-cat-bars {
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-bottom: 8px;
    padding: 0 4px;
}

.gb-mini-bar {
    height: 5px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.gb-mini-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* 迷你九大陆地图 */
.gb-continent-minimap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    height: 50px;
    margin-bottom: 8px;
    padding: 0 8px;
}

.gb-mini-continent {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.3s ease;
    opacity: 0.4;
    filter: grayscale(0.7);
}

.gb-mini-continent.lit {
    opacity: 1;
    filter: none;
    box-shadow: 0 0 4px rgba(102, 126, 234, 0.4);
}

/* 纪念物预览 */
.gb-keepsake-preview {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.gb-keepsake-icon {
    font-size: 36px;
    filter: drop-shadow(0 2px 6px rgba(250, 173, 20, 0.4));
    animation: keepsakeGlow 2.5s ease-in-out infinite;
}

@keyframes keepsakeGlow {
    0%, 100% { filter: drop-shadow(0 2px 6px rgba(250, 173, 20, 0.4)); }
    50% { filter: drop-shadow(0 2px 12px rgba(250, 173, 20, 0.7)); }
}

/* --- 第三层：底部消耗品栏 --- */
.gb-consumables-bar {
    margin: 4px 14px 12px;
    background: white;
    border-radius: 16px;
    padding: 14px 8px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.gb-consumable-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 10px;
    transition: all 0.2s;
}

.gb-consumable-item:active {
    background: #f8f9ff;
    transform: scale(0.96);
}

.gb-consumable-icon {
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.gb-consumable-info {
    text-align: left;
}

.gb-consumable-value {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.gb-consumable-label {
    font-size: 10px;
    color: #999;
    margin-top: 2px;
}

.gb-consumable-divider {
    width: 1px;
    height: 32px;
    background: #eee;
}

/* 底部装饰语 */
.gb-footer-tip {
    text-align: center;
    font-size: 11px;
    color: #bbb;
    margin: 12px 0 20px;
}

/* --- 第四层：右下角工具箱悬浮按钮 --- */
.gb-toolbox-fab {
    position: fixed;
    right: 20px;
    bottom: 160px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
    z-index: 90;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gb-toolbox-fab:active {
    transform: scale(0.94);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.gb-toolbox-fab span {
    font-size: 12px;
}

/* 工具箱面板 */
.gb-toolbox-panel {
    position: fixed;
    right: 20px;
    bottom: 210px;
    background: white;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 91;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.25s ease;
    min-width: 280px;
    border: 1px solid #f0f0f0;
}

.gb-toolbox-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.toolbox-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.toolbox-item:active {
    background: #f0f3ff;
    transform: scale(0.94);
}

.toolbox-item-icon {
    font-size: 22px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}

.toolbox-item-name {
    font-size: 10px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

/* 375px 适配 */
@media (max-width: 375px) {
    .gb-cat-bar {
        padding: 14px 12px;
        gap: 8px;
    }

    .gb-cat-avatar {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .gb-cat-name {
        font-size: 13px;
    }

    .gb-cat-level {
        font-size: 9px;
    }

    .gb-talent-bar {
        height: 14px;
    }

    .gb-talent-text {
        font-size: 9px;
    }

    .gb-talent-label {
        font-size: 9px;
    }

    .gb-stat-icon {
        font-size: 9px;
        padding: 2px 5px;
    }

    .gb-collection-grid {
        gap: 10px;
        padding: 14px 12px;
    }

    .gb-collection-cell {
        padding: 12px 10px;
        border-radius: 14px;
    }

    .gb-cell-icon {
        font-size: 20px;
    }

    .gb-cell-count {
        font-size: 10px;
        padding: 2px 6px;
    }

    .gb-cell-title {
        font-size: 12px;
    }

    .gb-cell-preview,
    .gb-cell-cat-bars,
    .gb-continent-minimap,
    .gb-keepsake-preview {
        height: 44px;
    }

    .gb-recent-badge,
    .gb-keepsake-icon {
        font-size: 30px;
    }

    .gb-consumables-bar {
        margin: 2px 12px 10px;
        padding: 12px 6px;
    }

    .gb-consumable-icon {
        font-size: 20px;
    }

    .gb-consumable-value {
        font-size: 13px;
    }

    .gb-consumable-label {
        font-size: 9px;
    }

    .gb-toolbox-fab {
        right: 16px;
        bottom: 150px;
        padding: 9px 14px;
        font-size: 12px;
    }

    .gb-toolbox-panel {
        right: 16px;
        bottom: 200px;
        padding: 10px;
        gap: 8px;
        min-width: 260px;
    }

    .toolbox-item {
        padding: 6px 2px;
    }

    .toolbox-item-icon {
        font-size: 20px;
    }

    .toolbox-item-name {
        font-size: 9px;
    }
}


/* ========================================================
   知识图谱/得分地图 v2.0 样式
   ======================================================== */

/* ---------- 通用头部 ---------- */
.kg-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}
.kg-back-btn {
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.kg-back-btn:active {
    background: rgba(255,255,255,0.3);
}
.kg-subject-title,
.kg-plate-title,
.kg-chapter-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}
.kg-subject-icon {
    font-size: 20px;
}
.kg-overall-score {
    text-align: right;
    flex-shrink: 0;
}
.kg-score-num {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}
.kg-score-label {
    display: block;
    font-size: 10px;
    opacity: 0.8;
}

/* ---------- 板块列表 ---------- */
.kg-plate-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.kg-plate-card {
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}
.kg-plate-card:active {
    transform: scale(0.98);
}
.kg-plate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.kg-plate-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}
.kg-plate-score {
    font-size: 18px;
    font-weight: 700;
}
.kg-plate-stats {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
}

/* A/B比例条 */
.kg-ab-bar {
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    margin-bottom: 4px;
}
.kg-ab-bar-sm {
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    margin: 4px 0;
}
.kg-ab-bar-a {
    background: #f5222d;
    height: 100%;
}
.kg-ab-bar-b {
    background: #faad14;
    height: 100%;
}
.kg-ab-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    margin-bottom: 8px;
}

/* 猫咪解读 */
.kg-cat-interpretation {
    background: #fff7e6;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11px;
    color: #8c6e2e;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    line-height: 1.5;
}
.kg-cat-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.kg-cat-text {
    flex: 1;
}
.kg-plate-arrow {
    text-align: right;
    font-size: 11px;
    color: #1890ff;
    margin-top: 8px;
    font-weight: 500;
}

/* ---------- 板块级猫咪提示 ---------- */
.kg-plate-cat-tip {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: #fffbe6;
    border-bottom: 1px solid #ffeeba;
}
.kg-cat-avatar {
    font-size: 28px;
    flex-shrink: 0;
}
.kg-cat-bubble {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    position: relative;
}
.kg-cat-bubble::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 12px;
    border: 6px solid transparent;
    border-right-color: white;
}
.kg-cat-name {
    font-weight: 600;
    color: #fa8c16;
}

/* ---------- 章节列表 ---------- */
.kg-chapter-list {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kg-chapter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.kg-chapter-item:active {
    transform: scale(0.98);
    background: #fafafa;
}
.kg-chapter-rank {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #999;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kg-chapter-level-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.kg-chapter-info {
    flex: 1;
    min-width: 0;
}
.kg-chapter-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kg-chapter-meta {
    display: flex;
    gap: 6px;
    font-size: 10px;
    color: #999;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.kg-chapter-progress-bar {
    height: 3px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
}
.kg-chapter-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}
.kg-chapter-score {
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 40px;
    text-align: right;
}
.kg-chapter-arrow {
    font-size: 16px;
    color: #ccc;
    flex-shrink: 0;
    font-weight: 300;
}
.kg-footer-tip {
    text-align: center;
    font-size: 11px;
    color: #999;
    padding: 12px;
}

/* ---------- 窝点列表 ---------- */
.kg-nest-stats-bar {
    display: flex;
    justify-content: space-around;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
}
.kg-nest-stat-item {
    text-align: center;
}
.kg-stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px;
    font-size: 14px;
}
.kg-stat-label {
    display: block;
    font-size: 10px;
    color: #999;
    margin-bottom: 2px;
}
.kg-stat-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.kg-nest-list {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kg-nest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.kg-nest-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.kg-nest-info {
    flex: 1;
    min-width: 0;
}
.kg-nest-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kg-nest-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.kg-nest-status {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
}
.kg-nest-wrong-count {
    font-size: 10px;
    color: #f5222d;
}
.kg-nest-difficulty {
    font-size: 10px;
    color: #faad14;
}
.kg-nest-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}
.kg-nest-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

/* ---------- 空状态 ---------- */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 13px;
}
.empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 375px) {
    .kg-plate-name {
        font-size: 14px;
    }
    .kg-nest-title {
        font-size: 12px;
    }
}
/* === 今日推荐 & 学习引导 v1.0 === */

/* --- 功能1：今日推荐卡片 --- */
.wgk-today-recommend {
    margin: 12px 16px;
    background: linear-gradient(135deg, #fff5f0 0%, #e6f7ff 100%);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
}
.mirror-rec-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.mirror-rec-cat {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
    border: 2px solid #ffd666;
}
.mirror-rec-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mirror-rec-title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
}
.mirror-rec-nest-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.mirror-rec-nest-card:active {
    transform: scale(0.98);
}
.mirror-rec-nest-icon {
    font-size: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 10px;
    flex-shrink: 0;
}
.mirror-rec-nest-info {
    flex: 1;
    min-width: 0;
}
.mirror-rec-nest-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mirror-rec-nest-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.mirror-rec-nest-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    background: #f0f0f0;
    color: #666;
}
.mirror-tag-chapter {
    background: #e6f7ff;
    color: #1890ff;
}
.mirror-rec-nest-diff {
    font-size: 10px;
    color: #999;
}
.mirror-rec-nest-arrow {
    font-size: 20px;
    color: #ccc;
    flex-shrink: 0;
}
.mirror-rec-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.mirror-rec-swap-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    background: #fff;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}
.mirror-rec-swap-btn:active {
    transform: scale(0.95);
}
.mirror-rec-go-btn {
    flex: 1;
    padding: 8px 12px;
    background: linear-gradient(135deg, #ff7a45 0%, #ff4d4f 100%);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.mirror-rec-go-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

/* --- 功能2：知识图谱页快捷入口 --- */
.mirror-kg-next-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.2s;
}
.mirror-kg-next-btn:active {
    transform: scale(0.98);
}
.mirror-kg-next-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    flex-shrink: 0;
}
.mirror-kg-next-text {
    flex: 1;
    min-width: 0;
}
.mirror-kg-next-label {
    font-size: 11px;
    color: #1890ff;
    font-weight: 600;
    margin-bottom: 2px;
}
.mirror-kg-next-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mirror-kg-next-arrow {
    font-size: 18px;
    color: #1890ff;
    flex-shrink: 0;
}

/* --- 功能3：错题诊断视图 --- */
.mirror-diag-overview {
    display: flex;
    gap: 10px;
    margin: 12px 0;
}
.mirror-diag-stat-card {
    flex: 1;
    padding: 14px 10px;
    border-radius: 12px;
    text-align: center;
}
.mirror-diag-stat-a {
    background: #fff1f0;
}
.mirror-diag-stat-b {
    background: #fffbe6;
}
.mirror-diag-stat-num {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}
.mirror-diag-stat-label {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
}
.mirror-diag-chart-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 16px 0 10px;
}
.mirror-diag-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 140px;
    padding: 10px 8px;
    background: #fafafa;
    border-radius: 10px;
    overflow-x: auto;
}
.mirror-diag-bar-col {
    flex: 1;
    min-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}
.mirror-diag-bar-col:active {
    opacity: 0.7;
}
.mirror-diag-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 80px;
}
.mirror-diag-bar {
    width: 24px;
    background: #e6f7ff;
    border-radius: 4px 4px 0 0;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    transition: all 0.3s;
}
.mirror-diag-bar-unfixed {
    width: 100%;
    background: linear-gradient(180deg, #ff7a45 0%, #ff4d4f 100%);
    border-radius: 4px 4px 0 0;
}
.mirror-diag-bar-count {
    font-size: 10px;
    color: #666;
    margin-top: 4px;
    font-weight: 600;
}
.mirror-diag-bar-label {
    font-size: 10px;
    color: #333;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50px;
}
.mirror-diag-bar-subject {
    font-size: 9px;
    color: #999;
}
.mirror-diag-plate-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 16px 0 10px;
}
.mirror-diag-plate-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mirror-diag-plate-card {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
}
.mirror-diag-plate-info {
    flex: 1;
    min-width: 0;
}
.mirror-diag-plate-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}
.mirror-diag-plate-meta {
    font-size: 11px;
    color: #999;
}
.mirror-diag-go-btn {
    padding: 6px 12px;
    background: #1890ff;
    color: #fff;
    border: none;
    border-radius: 16px;
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
}
.mirror-diag-go-btn:active {
    opacity: 0.8;
}

/* --- 功能4：错题详情相关窝点 --- */
.mirror-related-nests {
    margin: 12px 0;
    padding: 10px 12px;
    background: #f6ffed;
    border-radius: 10px;
}
.mirror-related-title {
    font-size: 12px;
    font-weight: 600;
    color: #52c41a;
    margin-bottom: 8px;
}
.mirror-related-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mirror-related-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.mirror-related-item:active {
    background: #f6ffed;
}
.mirror-related-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.mirror-related-name {
    flex: 1;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mirror-related-arrow {
    font-size: 12px;
    color: #52c41a;
    flex-shrink: 0;
}

/* --- 功能7：工具箱方法卡 --- */
.mirror-toolbox-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 16px;
    background: linear-gradient(135deg, #fff7e6 0%, #e6f7ff 100%);
    margin-bottom: 12px;
}
.mirror-toolbox-cat {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 3px solid #ffd666;
    flex-shrink: 0;
}
.mirror-toolbox-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mirror-toolbox-hero-text {
    flex: 1;
    min-width: 0;
}
.mirror-toolbox-hero-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
}
.mirror-toolbox-hero-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}
.mirror-toolbox-stat {
    padding: 0 16px;
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}
.mirror-toolbox-stat b {
    color: #ff7a45;
    font-size: 16px;
}
.mirror-toolbox-card-list {
    padding: 0 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mirror-toolbox-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.mirror-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.mirror-card-icon {
    font-size: 22px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 10px;
    flex-shrink: 0;
}
.mirror-card-name {
    font-size: 15px;
    font-weight: bold;
    color: #333;
}
.mirror-card-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;
}
.mirror-card-nests {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-top: 10px;
    border-top: 1px dashed #f0f0f0;
}
.mirror-card-nests-label {
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
}
.mirror-card-nest-tag {
    font-size: 11px;
    padding: 3px 8px;
    background: #f0f5ff;
    color: #1890ff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.mirror-card-nest-tag:active {
    background: #e6f7ff;
}
.mirror-card-nest-more {
    font-size: 11px;
    color: #999;
}
.mirror-toolbox-empty {
    text-align: center;
    padding: 40px 20px;
}
.mirror-toolbox-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.mirror-toolbox-empty-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
}
.mirror-toolbox-empty-hint {
    font-size: 11px;
    color: #999;
    line-height: 1.6;
}

/* --- 诊断视图入口按钮（错题本列表视图中追加） --- */
.mirror-diag-entry-btn {
    margin-left: auto;
}

/* === 难点卡体系 v1.0 样式 === */

/* ----- 功能1：难点卡主筛选tab ----- */
.hard-card-main-tabs {
    display: flex;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 12px;
    gap: 2px;
}
.hard-tab {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.hard-tab:hover {
    background: rgba(255,255,255,0.6);
}
.hard-tab-active {
    background: white;
    color: #1677ff;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.hard-tab-hard.hard-tab-active {
    background: linear-gradient(135deg, #fa8c16 0%, #ff6b35 100%);
    color: white;
}
.hard-tab-count {
    font-size: 10px;
    opacity: 0.7;
    font-weight: 500;
}
.hard-tab-active .hard-tab-count {
    opacity: 0.9;
}

/* ----- 难点卡复习入口按钮 ----- */
.hard-review-entry {
    margin-bottom: 12px;
    text-align: center;
}
.hard-review-btn {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #fa8c16 0%, #ff6b35 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);
}
.hard-review-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(250, 140, 22, 0.4);
}
.hard-review-btn:active {
    transform: translateY(0);
}

/* ----- 功能2：错题详情难点按钮 ----- */
.hard-detail-btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    margin-top: 4px;
}
.hard-detail-btn-on {
    background: #fff7e6;
    color: #fa8c16;
    border: 1px solid #ffd591;
}
.hard-detail-btn-on:hover {
    background: #ffe7ba;
}
.hard-detail-btn-off {
    background: linear-gradient(135deg, #fa8c16 0%, #ff6b35 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(250, 140, 22, 0.3);
}
.hard-detail-btn-off:hover {
    box-shadow: 0 4px 10px rgba(250, 140, 22, 0.4);
}

/* ----- 功能3：难点卡专项复习 ----- */
.hard-review-container {
    padding: 4px 0;
}
.hard-review-progress {
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    margin-bottom: 8px;
    overflow: hidden;
}
.hard-review-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #fa8c16, #ff6b35);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.hard-review-progress-text {
    text-align: center;
    font-size: 11px;
    color: #999;
    margin-bottom: 14px;
}
.hard-review-question {
    font-size: 15px;
    line-height: 1.7;
    color: #222;
    background: #fff9f0;
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    border: 1px solid #ffe7ba;
}
.hard-review-answer {
    background: #f6ffed;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 14px;
    border: 1px solid #b7eb8f;
}
.hard-review-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hard-review-action-btn {
    flex: 1;
    min-width: 120px;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.hard-review-show-btn {
    background: #e6f4ff;
    color: #1677ff;
}
.hard-review-show-btn:hover {
    background: #bae0ff;
}
.hard-review-master-btn {
    background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
    color: white;
    box-shadow: 0 3px 8px rgba(82, 196, 26, 0.3);
}
.hard-review-master-btn:hover {
    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);
}
.hard-review-next-btn {
    background: #fff1f0;
    color: #f5222d;
}
.hard-review-next-btn:hover {
    background: #ffccc7;
}

/* ----- 功能4：诊断视图难点卡跳转按钮 ----- */
.hard-diag-goto-btn {
    margin-top: 6px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.25);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    color: inherit;
}
.hard-diag-goto-btn:hover {
    background: rgba(255,255,255,0.4);
}
.wgk-diag-stat-a .hard-diag-goto-btn {
    color: #fff1f0;
    background: rgba(255,255,255,0.2);
}
.wgk-diag-stat-a .hard-diag-goto-btn:hover {
    background: rgba(255,255,255,0.35);
}

/* ----- 功能5：闪卡难点标签 ----- */
.hard-fc-stats {
    text-align: center;
    font-size: 11px;
    color: #fa8c16;
    margin-bottom: 8px;
    padding: 6px;
    background: #fff7e6;
    border-radius: 8px;
}
.hard-fc-stats b {
    font-weight: 700;
}
.hard-fc-card {
    position: relative;
    border: 1px solid #ffd591 !important;
    background: #fff9f0 !important;
}
.hard-fc-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: linear-gradient(135deg, #fa8c16, #ff6b35);
    color: white;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1.4;
}


/* --- 工具箱页面（wgk-toolbox） --- */

/* 页面容器 */
.wgk-toolbox-page {
    min-height: 100vh;
    background: #f9f9f9;
    padding-bottom: 20px;
}

/* 顶部导航栏 */
.wgk-toolbox-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #ff9a3c 0%, #ff6b35 100%);
    color: white;
}
.wgk-toolbox-header .back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 0;
}
.wgk-toolbox-header .back-btn:active {
    background: rgba(255,255,255,0.3);
}
.wgk-toolbox-page-title {
    margin: 0;
    font-size: 18px;
    flex: 1;
    font-weight: 700;
}

/* 内容区 */
.wgk-toolbox-content {
    padding: 0;
}

/* 头部寄语区 */
.wgk-toolbox-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 16px;
    background: linear-gradient(135deg, #fff7e6 0%, #ffe8cc 100%);
    margin: 12px 16px;
    border-radius: 12px;
}
.wgk-toolbox-cat {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 3px solid #ffd666;
    flex-shrink: 0;
}
.wgk-toolbox-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wgk-toolbox-hero-text {
    flex: 1;
    min-width: 0;
}
.wgk-toolbox-hero-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
}
.wgk-toolbox-hero-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}

/* 分区 */
.wgk-toolbox-section {
    margin: 12px 16px;
}
.wgk-toolbox-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    padding: 0 4px;
}
.wgk-toolbox-section-icon {
    font-size: 16px;
}
.wgk-toolbox-section-count {
    margin-left: auto;
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

/* 方法卡网格 */
.wgk-toolbox-method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.wgk-toolbox-method-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.wgk-toolbox-method-card:active {
    transform: scale(0.97);
    background: #fafafa;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.wgk-toolbox-method-icon {
    font-size: 32px;
    margin-bottom: 8px;
    line-height: 1;
}
.wgk-toolbox-method-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.3;
}
.wgk-toolbox-method-desc {
    font-size: 11px;
    color: #999;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 空状态 */
.wgk-toolbox-empty {
    text-align: center;
    padding: 30px 20px;
    background: #fff;
    border-radius: 12px;
}
.wgk-toolbox-empty-icon {
    font-size: 40px;
    margin-bottom: 10px;
}
.wgk-toolbox-empty > div:nth-child(2) {
    font-size: 14px;
    color: #666;
}

/* 开窍时刻列表 */
.wgk-toolbox-moment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wgk-toolbox-moment-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: all 0.2s;
}
.wgk-toolbox-moment-item:active {
    background: #fafafa;
}
.wgk-toolbox-moment-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7e6;
    border-radius: 10px;
}
.wgk-toolbox-moment-info {
    flex: 1;
    min-width: 0;
}
.wgk-toolbox-moment-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wgk-toolbox-moment-time {
    font-size: 11px;
    color: #999;
}
.wgk-toolbox-moment-go {
    flex-shrink: 0;
    font-size: 12px;
    color: #ff7a45;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.wgk-toolbox-moment-go:active {
    color: #ff4d4f;
}
/* ========================================================
   结算页 v1.0
   ======================================================== */

.settlement-page {
    padding: 16px;
    padding-bottom: 40px;
    animation: settlementFadeIn 0.6s ease-out;
}

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

/* --- 标题区 --- */
.settlement-header {
    text-align: center;
    padding: 20px 0 12px;
}

.settlement-title {
    font-size: 24px;
    font-weight: 700;
    color: #2D2D2D;
    margin-bottom: 4px;
}

.settlement-subtitle {
    font-size: 15px;
    color: #8C8C8C;
    margin-bottom: 10px;
}

.settlement-tier {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.settlement-tier.perfect {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #fff;
}

.settlement-tier.good {
    background: linear-gradient(135deg, #52C41A, #389E0D);
    color: #fff;
}

.settlement-tier.try_hard {
    background: linear-gradient(135deg, #1890FF, #096DD9);
    color: #fff;
}

/* --- 猫咪庆祝区 --- */
.settlement-cat-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.settlement-cat {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-avatar-large {
    font-size: 64px;
    z-index: 2;
    animation: catBounce 1.5s ease-in-out infinite;
}

@keyframes catBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.confetti-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #FF8C42;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    animation: confettiBurst 2s ease-out infinite;
    animation-delay: calc(var(--i) * 0.1s);
}

.confetti:nth-child(3n) { background: #52C41A; }
.confetti:nth-child(3n+1) { background: #FFD700; }
.confetti:nth-child(3n+2) { background: #FF6B6B; }

@keyframes confettiBurst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(
            calc(-50% + cos(var(--i) * 30deg) * 60px),
            calc(-50% + sin(var(--i) * 30deg) * 60px - 30px)
        ) scale(1);
        opacity: 0;
    }
}

.cat-bubble.large {
    margin-top: 16px;
    max-width: 280px;
    padding: 14px 18px;
    background: #FFF;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.6;
    color: #2D2D2D;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-align: center;
    position: relative;
}

.cat-bubble.large::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #FFF;
}

/* --- 通用区块 --- */
.settlement-section {
    background: #FFF;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #2D2D2D;
    margin-bottom: 12px;
}

/* --- M-05 心法提示区块 --- */
.m05-trigger-section {
    background: linear-gradient(135deg, #FFF8F0 0%, #FFF5E6 100%);
    border-left: 3px solid #FF8C42;
}

.m05-trigger-content {
    padding: 4px 0;
}

.m05-trigger-text {
    font-size: 15px;
    line-height: 1.6;
    color: #2D2D2D;
    margin-bottom: 8px;
}

.m05-trigger-source {
    font-size: 12px;
    color: #8C8C8C;
    text-align: right;
    font-style: italic;
}

/* --- 表现数据 --- */
.performance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.perf-card {
    background: #FFF8F0;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.perf-label {
    font-size: 13px;
    color: #8C8C8C;
    margin-bottom: 4px;
}

.perf-score {
    font-size: 28px;
    font-weight: 700;
    color: #FF8C42;
    margin-bottom: 4px;
}

.perf-detail {
    font-size: 12px;
    color: #595959;
    margin-bottom: 6px;
}

.perf-subdetail {
    font-size: 11px;
    color: #BFBFBF;
}

.perf-mini-radar {
    margin-top: 8px;
    text-align: left;
}

.mini-dim-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.mini-dim-name {
    font-size: 10px;
    color: #8C8C8C;
    width: 28px;
    flex-shrink: 0;
}

.mini-dim-bar {
    flex: 1;
    height: 6px;
    background: #F0E6D9;
    border-radius: 3px;
    overflow: hidden;
}

.mini-dim-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease-out;
}

/* --- 奖励区 --- */
.rewards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.reward-item {
    text-align: center;
    padding: 8px 4px;
}

.reward-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.reward-name {
    font-size: 11px;
    color: #8C8C8C;
    margin-bottom: 2px;
}

.reward-value {
    font-size: 16px;
    font-weight: 700;
}

/* --- 闪卡预览 --- */
.flashcard-preview-hint {
    font-size: 12px;
    color: #8C8C8C;
    margin-bottom: 10px;
}

.flashcard-preview-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.flashcard-preview-scroll::-webkit-scrollbar {
    display: none;
}

.mini-flashcard {
    flex-shrink: 0;
    width: 100px;
    height: 70px;
    perspective: 800px;
    cursor: pointer;
}

.mini-flashcard.flipped .mini-card-front {
    transform: rotateY(180deg);
}

.mini-flashcard.flipped .mini-card-back {
    transform: rotateY(0);
}

.mini-card-front,
.mini-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    backface-visibility: hidden;
    transition: transform 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

.mini-card-front {
    background: linear-gradient(135deg, #FFE4C4, #FF8C42);
    color: #5D3A00;
    font-weight: 500;
}

.mini-card-back {
    background: #FFF8F0;
    color: #2D2D2D;
    transform: rotateY(-180deg);
    border: 1px solid #FFE4C4;
}

.mini-card-q,
.mini-card-a {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.more-cards-hint {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F5F5;
    border-radius: 8px;
    font-size: 11px;
    color: #8C8C8C;
}

/* --- 错题提示 --- */
.mistake-hint {
    text-align: center;
    font-size: 13px;
    color: #8C8C8C;
    padding: 12px 0;
    cursor: pointer;
    transition: color 0.2s;
}

.mistake-hint:active {
    color: #FF8C42;
}

/* --- 操作区 --- */
.settlement-actions {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-btn.large {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.btn-subtitle {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.8;
}

.secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.secondary-actions .action-btn {
    padding: 12px 8px;
    font-size: 14px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.secondary-actions .btn-subtitle {
    font-size: 10px;
}

/* ========== 小鱼干商店（MVP版）========== */

/* 顶部余额栏 */
.store-balance-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fff8e6 0%, #ffe4b5 100%);
    border-radius: 14px;
    margin-bottom: 16px;
    border: 2px solid #ffd89b;
}

.store-balance-label {
    font-size: 13px;
    font-weight: 600;
    color: #8b6914;
}

.store-balance-value {
    font-size: 18px;
    font-weight: 800;
    color: #f5a623;
    text-shadow: 0 1px 2px rgba(245, 166, 35, 0.2);
}

/* 商品分类 */
.store-category {
    margin-bottom: 18px;
}

.store-category-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    padding-left: 4px;
    position: relative;
}

.store-category-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #667eea, #764ba2);
    border-radius: 2px;
    margin-left: -4px;
}

/* 商品网格 */
.store-items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* 商品卡片 */
.store-item-card {
    background: white;
    border-radius: 14px;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    position: relative;
}

.store-item-card:active {
    transform: scale(0.96);
    border-color: rgba(245, 166, 35, 0.4);
}

.store-item-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.store-item-card.disabled:active {
    transform: none;
    border-color: transparent;
}

/* 商品图标 */
.store-item-icon {
    font-size: 36px;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}

/* 商品名称 */
.store-item-name {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.3;
}

.owned-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    color: #52c41a;
    background: #f6ffed;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 2px;
    vertical-align: middle;
}

/* 商品描述 */
.store-item-desc {
    font-size: 10px;
    color: #999;
    line-height: 1.4;
    margin-bottom: 8px;
    height: 28px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 价格 */
.store-item-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 8px;
}

.price-icon {
    font-size: 12px;
}

.price-num {
    font-size: 15px;
    font-weight: 800;
    color: #f5a623;
}

/* 购买按钮 */
.store-buy-btn {
    width: 100%;
    padding: 7px 0;
    font-size: 12px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #f5a623 0%, #f7971e 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.store-buy-btn:active {
    transform: scale(0.96);
    opacity: 0.9;
}

.store-buy-btn.btn-disabled {
    background: #ccc;
    cursor: not-allowed;
}

.store-buy-btn.btn-disabled:active {
    transform: none;
}

/* 底部提示 */
.store-footer-tip {
    text-align: center;
    font-size: 11px;
    color: #bbb;
    margin-top: 8px;
    padding: 8px 0;
}

/* 模态框内商店内容滚动 */
.modal-content {
    max-height: 65vh;
    overflow-y: auto;
}

/* ===== 响应式：大屏适配 ===== */
@media (min-width: 600px) {
    .store-items-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .store-item-icon {
        font-size: 42px;
    }
}

/* ===== 闪卡难点卡体系 v2.0 样式 ===== */

/* --- 闪卡复习页：难点卡视觉 --- */
.flashcard-box.hard-card {
    border: 2px solid #ff6b6b !important;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%) !important;
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.15) !important;
    position: relative;
}

.hard-card-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
}

.hard-card-streak-hint {
    text-align: center;
    font-size: 11px;
    color: #ff6b6b;
    background: #fff5f5;
    padding: 4px 10px;
    border-radius: 10px;
    margin-top: 6px;
    display: inline-block;
    font-weight: 600;
}

#flashcard-hard-streak {
    text-align: center;
    min-height: 20px;
}

/* --- 攻克庆祝动画 --- */
.hard-conquer-celebration {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-align: center;
    pointer-events: none;
    animation: hardConquerPop 0.5s ease-out;
}

@keyframes hardConquerPop {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* --- 闪卡收藏页：三tab筛选 --- */
.fc-collection-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    background: #f5f5fa;
    padding: 4px;
    border-radius: 10px;
}

.fc-collection-tab {
    flex: 1;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.fc-collection-tab.active {
    background: white;
    color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.fc-collection-tab.hard-tab.active {
    color: #ff6b6b;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.15);
}

.fc-collection-tab.due-tab.active {
    color: #fa8c16;
    box-shadow: 0 2px 8px rgba(250, 140, 22, 0.15);
}

.fc-tab-count {
    font-size: 9px;
    opacity: 0.7;
    margin-left: 2px;
}

/* --- 闪卡收藏页：难点卡卡片 --- */
.fc-hard-card {
    position: relative;
    background: #fff5f5;
    border: 1.5px solid #ff6b6b;
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 10px;
    color: #555;
    line-height: 1.5;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fc-hard-badge {
    position: absolute;
    top: -4px;
    right: -2px;
    font-size: 12px;
}

.fc-hard-level {
    font-size: 9px;
    color: #ff6b6b;
    margin-top: 2px;
    font-weight: 600;
}

/* --- 闪卡收藏页：待复习卡片 --- */
.fc-due-card {
    position: relative;
    background: #fff7e6;
    border: 1.5px solid #fa8c16;
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 10px;
    color: #555;
    line-height: 1.5;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fc-due-card-hard {
    border-color: #ff6b6b;
    background: #fff5f5;
}

.fc-due-hard-badge {
    position: absolute;
    top: -4px;
    right: -2px;
    font-size: 12px;
}

.fc-due-level {
    font-size: 9px;
    color: #fa8c16;
    margin-top: 2px;
    font-weight: 600;
}

.fc-due-card-hard .fc-due-level {
    color: #ff6b6b;
}

/* --- 闪卡收藏页：全部分组中的难点角标 --- */
.fc-all-hard-badge {
    position: absolute;
    top: -4px;
    right: -2px;
    font-size: 12px;
}

/* --- 专项复习入口按钮 --- */
.fc-hard-review-entry {
    text-align: center;
    margin-bottom: 8px;
}

.fc-hard-review-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
    transition: all 0.2s;
}

.fc-hard-review-btn:active {
    transform: scale(0.96);
}

.fc-due-review-entry {
    text-align: center;
    margin-bottom: 8px;
}

.fc-due-review-btn {
    background: linear-gradient(135deg, #fa8c16 0%, #f77f00 100%);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(250, 140, 22, 0.3);
    transition: all 0.2s;
}

.fc-due-review-btn:active {
    transform: scale(0.96);
}


/* ===== 五级记忆等级视觉体系 v1.0 ===== */

/* --- 记忆等级徽章（通用） --- */
.mem-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.mem-level-badge .mem-level-icon {
    font-size: 12px;
}

.mem-level-badge.lv-0 { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
.mem-level-badge.lv-1 { background: #eff6ff; color: #3b82f6; border: 1px solid #93c5fd; }
.mem-level-badge.lv-2 { background: #ecfdf5; color: #059669; border: 1px solid #6ee7b7; }
.mem-level-badge.lv-3 { background: #f5f3ff; color: #7c3aed; border: 1px solid #c4b5fd; }
.mem-level-badge.lv-4 { background: #fdf2f8; color: #db2777; border: 1px solid #f9a8d4; }

/* --- 闪卡复习页：等级视觉差异（边框/背景/光晕） --- */
.flashcard-box.level-0 {
    border: 2px solid #cbd5e1;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: 0 4px 15px rgba(148, 163, 184, 0.1);
}
.flashcard-box.level-1 {
    border: 2px solid #93c5fd;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.12);
}
.flashcard-box.level-2 {
    border: 2px solid #6ee7b7;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.12);
}
.flashcard-box.level-3 {
    border: 2px solid #c4b5fd;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.15);
}
.flashcard-box.level-4 {
    border: 2px solid #f9a8d4;
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.18);
    position: relative;
}
.flashcard-box.level-4::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f472b6, #a78bfa, #60a5fa, #f472b6);
    background-size: 300% 300%;
    animation: memLevel4Glow 3s ease infinite;
    z-index: -1;
    opacity: 0.4;
}

@keyframes memLevel4Glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- 复习页等级信息条 --- */
.mem-level-info-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.mem-level-progress-dots {
    display: flex;
    gap: 4px;
}

.mem-level-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.3s;
}

.mem-level-dot.active {
    transform: scale(1.2);
}

.mem-level-dot.lv-0.active { background: #94a3b8; }
.mem-level-dot.lv-1.active { background: #3b82f6; }
.mem-level-dot.lv-2.active { background: #10b981; }
.mem-level-dot.lv-3.active { background: #8b5cf6; }
.mem-level-dot.lv-4.active { background: #ec4899; }

/* --- 收藏页：等级分组标题颜色 --- */
.fc-level-group-title.lv-0 { color: #64748b !important; }
.fc-level-group-title.lv-1 { color: #3b82f6 !important; }
.fc-level-group-title.lv-2 { color: #059669 !important; }
.fc-level-group-title.lv-3 { color: #7c3aed !important; }
.fc-level-group-title.lv-4 { color: #db2777 !important; }

/* --- 收藏页：等级卡片视觉差异 --- */
.fc-level-card.lv-0 { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; }
.fc-level-card.lv-1 { background: #eff6ff !important; border: 1px solid #bfdbfe !important; }
.fc-level-card.lv-2 { background: #ecfdf5 !important; border: 1px solid #a7f3d0 !important; }
.fc-level-card.lv-3 { background: #f5f3ff !important; border: 1px solid #ddd6fe !important; }
.fc-level-card.lv-4 {
    background: #fdf2f8 !important;
    border: 1px solid #fbcfe8 !important;
    position: relative;
}

/* --- 收藏页统计栏 --- */
.fc-stats-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: #f8f9ff;
    border-radius: 10px;
}

.fc-stat-item {
    flex: 1;
    text-align: center;
}

.fc-stat-item .fc-stat-num {
    font-size: 16px;
    font-weight: 800;
    color: #333;
}

.fc-stat-item .fc-stat-label {
    font-size: 9px;
    color: #999;
    margin-top: 2px;
}

.fc-stat-item.mastered .fc-stat-num { color: #10b981; }
.fc-stat-item.learning .fc-stat-num { color: #3b82f6; }
.fc-stat-item.hard .fc-stat-num { color: #ff6b6b; }
.fc-stat-item.total .fc-stat-num { color: #667eea; }

/* --- 掌握率进度条 --- */
.fc-mastery-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    margin: 6px 0;
}

.fc-mastery-fill {
    height: 100%;
    background: linear-gradient(90deg, #60a5fa, #34d399, #a78bfa);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* ========================================================
   三节点核心规则样式 v1.0（机-19 / P0-NEW-1）
   每日三节点：深耕 → 回炉 → 开窍
   ======================================================== */

/* --- 首页今日三节点卡片 --- */
.today-nodes-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin: 12px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
}

.tn-header {
    margin-bottom: 12px;
}

.tn-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
}

.tn-title-icon {
    font-size: 18px;
}

.tn-badge {
    margin-left: auto;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.tn-subtitle {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.tn-progress-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.tn-progress-bar {
    flex: 1;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.tn-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4A90D9, #9B59B6, #F39C12);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.tn-progress-text {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    min-width: 50px;
    text-align: right;
}

.tn-nodes-container {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 12px;
}

.tn-node {
    flex: 1;
    background: var(--node-bg, #f5f5f5);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
}

.tn-node:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tn-node.completed {
    border-color: var(--node-color, #4A90D9);
    background: linear-gradient(135deg, var(--node-bg, #E8F4FD), #fff);
}

.tn-node-icon {
    font-size: 24px;
    margin-bottom: 6px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tn-node.completed .tn-node-icon {
    background: var(--node-color, #4A90D9);
    color: #fff;
}

.tn-node-info {
    margin-bottom: 8px;
}

.tn-node-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--node-color, #333);
    margin-bottom: 2px;
}

.tn-node-desc {
    font-size: 10px;
    color: #999;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tn-node-progress-wrap {
    padding: 0 4px;
}

.tn-node-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    overflow: hidden;
}

.tn-node-progress-fill {
    height: 100%;
    background: var(--node-color, #4A90D9);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.tn-node-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ccc;
    padding: 0 2px;
    transition: color 0.3s ease;
}

.tn-node-connector.active {
    color: #52c41a;
    font-weight: bold;
}

.tn-all-done {
    text-align: center;
    padding: 10px;
    background: linear-gradient(135deg, #f6ffed, #fff7e6);
    border-radius: 10px;
    font-size: 13px;
    color: #389e0d;
    font-weight: 500;
}

.tn-hint {
    text-align: center;
    font-size: 12px;
    color: #999;
    padding-top: 4px;
}

/* --- 旅程页今日三节点 --- */
.journey21-today-nodes-section {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin: 12px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.journey-today-nodes {
    margin-top: 12px;
}

.journey-nodes-row {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.journey-day-node {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    border-radius: 12px;
    background: #fafafa;
    border: 2px solid #eee;
    transition: all 0.3s ease;
}

.journey-day-node.completed {
    border-color: var(--node-color, #4A90D9);
    background: linear-gradient(135deg, rgba(74, 144, 217, 0.1), #fff);
}

.jdn-icon {
    font-size: 28px;
    margin-bottom: 6px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.journey-day-node.completed .jdn-icon {
    background: var(--node-color, #4A90D9);
    color: #fff;
}

.jdn-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.journey-day-node.completed .jdn-name {
    color: var(--node-color, #4A90D9);
}

.jdn-progress {
    padding: 0 8px;
}

.jdn-progress-bar {
    height: 4px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;
}

.jdn-progress-fill {
    height: 100%;
    background: var(--node-color, #4A90D9);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.journey-nodes-footer {
    text-align: center;
    font-size: 12px;
    color: #999;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    margin-top: 4px;
}

/* --- 响应式适配 --- */
@media (max-width: 360px) {
    .tn-node-desc {
        display: none;
    }
    
    .tn-node-name {
        font-size: 13px;
    }
    
    .tn-node-icon {
        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 20px;
    }
}


/* ========================================================
   入学诊断简化版（M2 P0-5）
   ======================================================== */

/* --- 诊断页整体 --- */
.diagnosis-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 30%, #f5f7fa 30%);
}
.diag-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: white;
    position: relative;
}
.diag-title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    margin-right: 40px;
}
.diag-container {
    padding: 16px;
    min-height: calc(100vh - 60px);
}

/* --- 诊断欢迎页 --- */
.diag-welcome-card {
    background: white;
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
    margin-top: 20px;
}
.diag-welcome-icon {
    font-size: 64px;
    margin-bottom: 16px;
    animation: diagFloat 3s ease-in-out infinite;
}
@keyframes diagFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.diag-welcome-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}
.diag-welcome-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
    line-height: 1.6;
}
.diag-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.diag-info-item {
    background: #f8f9ff;
    border-radius: 12px;
    padding: 14px 8px;
}
.diag-info-num {
    font-size: 20px;
    font-weight: 700;
    color: #667eea;
}
.diag-info-label {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}
.diag-start-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.diag-start-btn:active {
    transform: scale(0.97);
}
.diag-tip {
    margin-top: 16px;
    font-size: 12px;
    color: #999;
}

/* --- 答题页 --- */
.diag-question-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12);
    margin-top: 16px;
}
.diag-progress {
    margin-bottom: 20px;
}
.diag-progress-bar {
    height: 6px;
    background: #f0f2f5;
    border-radius: 3px;
    overflow: hidden;
}
.diag-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.diag-progress-text {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
    text-align: right;
}
.diag-question-num {
    font-size: 13px;
    color: #667eea;
    font-weight: 600;
    margin-bottom: 8px;
}
.diag-question-text {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
}
.diag-option {
    display: block;
    width: 100%;
    padding: 16px;
    margin-bottom: 12px;
    background: #f8f9ff;
    border: 2px solid transparent;
    border-radius: 14px;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    line-height: 1.5;
}
.diag-option:hover {
    background: #f0f3ff;
}
.diag-option.selected {
    background: #eef1ff;
    border-color: #667eea;
    color: #4c51bf;
    font-weight: 500;
}
.diag-option:active {
    transform: scale(0.98);
}
.diag-next-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: opacity 0.2s;
}
.diag-next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.diag-next-btn:active:not(:disabled) {
    transform: scale(0.97);
}

/* --- 结果页 --- */
.diag-result-card {
    background: white;
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
    margin-top: 16px;
    position: relative;
    overflow: hidden;
}
.diag-result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
}
.diag-result-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #f0f3ff;
    color: #667eea;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}
.diag-result-level {
    font-size: 36px;
    margin-bottom: 8px;
}
.diag-result-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}
.diag-result-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 24px;
}
.diag-dim-section {
    text-align: left;
    margin-bottom: 24px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}
.diag-dim-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 14px;
}
.diag-dim-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.diag-dim-name {
    width: 80px;
    font-size: 13px;
    color: #666;
    flex-shrink: 0;
}
.diag-dim-bar {
    flex: 1;
    height: 8px;
    background: #f0f2f5;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 12px;
}
.diag-dim-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
}
.diag-dim-fill.thinking { background: linear-gradient(90deg, #667eea, #8b5cf6); }
.diag-dim-fill.awareness { background: linear-gradient(90deg, #f59e0b, #f97316); }
.diag-dim-fill.rhythm { background: linear-gradient(90deg, #10b981, #059669); }
.diag-dim-value {
    font-size: 12px;
    color: #888;
    width: 30px;
    text-align: right;
    flex-shrink: 0;
}

/* 建议列表 */
.diag-advice-section {
    text-align: left;
    margin-bottom: 24px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}
.diag-advice-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 14px;
}
.diag-advice-list {
    list-style: none;
    padding: 0;
}
.diag-advice-item {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    background: #f8f9ff;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #444;
}
.diag-advice-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    font-weight: 600;
}

/* 推荐起点 */
.diag-recommend-section {
    text-align: left;
    margin-bottom: 28px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 14px;
}
.diag-recommend-label {
    font-size: 12px;
    color: #92400e;
    font-weight: 600;
    margin-bottom: 6px;
}
.diag-recommend-content {
    font-size: 14px;
    color: #78350f;
    line-height: 1.6;
}
.diag-recommend-content b {
    font-size: 15px;
}

/* 猫咪寄语 */
.diag-cat-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    background: #fff7ed;
    border-radius: 14px;
    margin-bottom: 24px;
    text-align: left;
}
.diag-cat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.diag-cat-bubble {
    flex: 1;
    font-size: 13px;
    line-height: 1.7;
    color: #7c2d12;
}
.diag-cat-bubble .cat-name {
    font-weight: 600;
    color: #92400e;
}

/* 结果页操作按钮 */
.diag-result-actions {
    display: flex;
    gap: 12px;
}
.diag-result-btn {
    flex: 1;
    padding: 14px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.2s;
}
.diag-result-btn:active {
    transform: scale(0.97);
}
.diag-result-btn.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.diag-result-btn.secondary {
    background: #f3f4f6;
    color: #4b5563;
}

/* --- 首次弹窗 --- */
.diag-popup-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.3s ease;
}
.diag-popup-box {
    background: white;
    border-radius: 24px;
    padding: 32px 24px 24px;
    text-align: center;
    max-width: 340px;
    width: 100%;
    animation: diagPopupIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes diagPopupIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.diag-popup-cat {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}
.diag-popup-cat img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.diag-popup-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}
.diag-popup-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 24px;
}
.diag-popup-actions {
    display: flex;
    gap: 12px;
}
.diag-popup-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.2s;
}
.diag-popup-btn:active {
    transform: scale(0.95);
}
.diag-popup-btn.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.diag-popup-btn.secondary {
    background: #f3f4f6;
    color: #6b7280;
}

/* --- L1/L2/L3 差异化配色 --- */
.diag-level-L1 .diag-result-badge {
    background: #fef3c7;
    color: #d97706;
}
.diag-level-L1 .diag-result-title {
    color: #d97706;
}
.diag-level-L2 .diag-result-badge {
    background: #dbeafe;
    color: #2563eb;
}
.diag-level-L2 .diag-result-title {
    color: #2563eb;
}
.diag-level-L3 .diag-result-badge {
    background: #dcfce7;
    color: #16a34a;
}
.diag-level-L3 .diag-result-title {
    color: #16a34a;
}

/* ========================================================
   M2题型体系 - 多选题样式
   ======================================================== */

/* 多选选项：复选框样式 */
.option-item.choice-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.option-item.choice-checkbox .choice-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 16px;
    border: 2px solid #d9d9d9;
    border-radius: 4px;
    background: white;
    transition: all 0.2s;
    margin-top: 1px;
}

.option-item.choice-checkbox.selected .choice-icon {
    background: #667eea;
    border-color: #667eea;
    color: white;
    font-size: 12px;
    line-height: 18px;
}

.option-item.choice-checkbox.selected {
    border-color: #667eea;
    background: #f0f3ff;
}

/* 单选选项：单选圆点样式 */
.option-item.choice-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.option-item.choice-radio .choice-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 10px;
    border: 2px solid #d9d9d9;
    border-radius: 50%;
    background: white;
    transition: all 0.2s;
    margin-top: 2px;
    color: transparent;
}

.option-item.choice-radio.selected .choice-icon {
    background: #667eea;
    border-color: #667eea;
    color: white;
}

.option-item .choice-text {
    flex: 1;
    line-height: 1.6;
}

/* 漏选标记：虚线绿框 */
.option-item.missed {
    border-style: dashed !important;
    border-color: #52c41a !important;
    background: #f6ffed !important;
    opacity: 0.8;
}

.option-item.missed .choice-icon {
    border-color: #52c41a !important;
    background: #f6ffed !important;
}

/* 多选信息栏 */
.multi-select-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-top: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 12px;
    color: #666;
}

.multi-select-info b {
    color: #667eea;
    font-size: 14px;
}

.multi-select-tip {
    color: #999;
    font-size: 11px;
}

/* 多选提交按钮区 */
.multi-submit-wrap {
    margin-top: 12px;
    text-align: center;
}

.multi-submit-wrap .action-btn {
    min-width: 140px;
}

/* 部分正确反馈样式 */
.feedback-section.partial {
    background: #fffbe6;
    border: 1px solid #ffe58f;
    color: #d48806;
}

.feedback-section.partial strong {
    color: #d48806;
}

/* 题型标签 */
.question-type-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 6px;
    vertical-align: middle;
}

.question-type-tag.single {
    background: #e6f7ff;
    color: #1890ff;
}

.question-type-tag.multiple {
    background: #f9f0ff;
    color: #722ed1;
}

.question-type-tag.solution {
    background: #fff7e6;
    color: #fa8c16;
}

/* 解答题占位（M3实现） */
.solution-placeholder {
    padding: 40px 20px;
    text-align: center;
    background: #fafafa;
    border-radius: 12px;
    border: 2px dashed #e0e0e0;
}

.solution-placeholder .solution-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.solution-placeholder .solution-text {
    color: #999;
    font-size: 14px;
}


/* ========== 首页推荐起点卡片（M2推荐引擎） ========== */
.recommend-start-card {
    display: none;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #e8f4fd 0%, #d0e8ff 100%);
    border-radius: 16px;
    padding: 14px 16px;
    margin: 12px 16px 0;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 12px rgba(79, 124, 255, 0.15);
    border: 1px solid rgba(79, 124, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.recommend-start-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(79, 124, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.recommend-start-card:active {
    transform: scale(0.98);
}

.rec-icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 50px;
    position: relative;
    z-index: 1;
}

.rec-icon {
    font-size: 28px;
    animation: recPulse 2s ease-in-out infinite;
}

@keyframes recPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.rec-badge {
    font-size: 10px;
    font-weight: 700;
    color: #4F7CFF;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.rec-content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.rec-nest-name {
    font-size: 15px;
    font-weight: 700;
    color: #1d39c4;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rec-reason {
    font-size: 12px;
    color: #4b67a6;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rec-mastery {
    font-weight: 600;
    color: #d4380d;
}

.rec-dot {
    color: #888;
    font-size: 10px;
}

.rec-reason-text {
    color: #4b67a6;
}

.rec-arrow {
    font-size: 24px;
    color: #4F7CFF;
    font-weight: 300;
    opacity: 0.7;
    position: relative;
    z-index: 1;
}
/* ============================================================
   M2千人千面推荐第二步 - 背包页窝点推荐列表
   ============================================================ */

/* 窝点推荐区域外层 */
.gb-nest-recommend-section {
    margin: 16px 12px;
    border-radius: 16px;
    overflow: hidden;
}

/* ===== 容器 ===== */
.bnr-container {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ===== 头部 ===== */
.bnr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.bnr-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bnr-header-icon {
    font-size: 20px;
}

.bnr-header-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.bnr-header-right {
    display: flex;
    align-items: center;
}

.bnr-header-sub {
    font-size: 11px;
    color: #667eea;
    background: linear-gradient(135deg, #eef2ff, #f0f0ff);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

/* ===== 筛选器 ===== */
.bnr-filter-bar {
    margin-bottom: 12px;
}

.bnr-filter-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.bnr-filter-icon {
    font-size: 14px;
}

.bnr-filter-text {
    font-size: 13px;
}

.bnr-auto-badge {
    font-size: 10px;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    margin-left: 6px;
}

.bnr-filter-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bnr-filter-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    color: #666;
    background: #f5f5f5;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.bnr-filter-tab:hover {
    background: #e8e8e8;
}

.bnr-filter-tab.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-weight: 600;
}

.bnr-tab-icon {
    font-size: 12px;
}

.bnr-tab-label {
    font-size: 12px;
}

/* ===== 空数据提示 ===== */
.bnr-empty-hint {
    font-size: 11px;
    color: #faad14;
    background: #fffbe6;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
}

/* ===== 统计栏 ===== */
.bnr-stats-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.bnr-stats-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #666;
}

.bnr-stats-label {
    color: #999;
}

.bnr-stats-value {
    font-weight: 700;
    color: #333;
    font-size: 13px;
}

.bnr-stats-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.bnr-overall-mastery {
    margin-left: auto;
}

/* ===== 窝点列表 ===== */
.bnr-nest-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
}

.bnr-nest-list::-webkit-scrollbar {
    width: 4px;
}

.bnr-nest-list::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

/* 窝点项 */
.bnr-nest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fafafa;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid transparent;
}

.bnr-nest-item:hover {
    background: #f0f5ff;
    border-color: #d6e4ff;
    transform: translateX(2px);
}

/* 已掌握状态 - 置底灰显 */
.bnr-nest-item.bnr-mastered {
    opacity: 0.55;
    background: #f6ffed;
    border-color: #b7eb8f;
}

.bnr-nest-item.bnr-mastered:hover {
    opacity: 0.7;
    background: #f6ffed;
}

/* 无数据状态 */
.bnr-nest-item.bnr-no-data {
    background: #fafafa;
}

/* 排名徽章 */
.bnr-rank-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 窝点图标 */
.bnr-nest-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* 窝点信息 */
.bnr-nest-info {
    flex: 1;
    min-width: 0;
}

.bnr-nest-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bnr-mastered .bnr-nest-title {
    text-decoration: line-through;
    text-decoration-color: #52c41a;
}

.bnr-nest-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 10px;
}

.bnr-nest-level {
    font-weight: 600;
}

.bnr-nest-status {
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
}

.bnr-status-weak {
    color: #cf1322;
    background: #fff1f0;
}

.bnr-status-learning {
    color: #d48806;
    background: #fffbe6;
}

.bnr-status-mastered {
    color: #389e0d;
    background: #f6ffed;
}

.bnr-status-unexplored {
    color: #8c8c8c;
    background: #f5f5f5;
}

.bnr-nest-mastery-text {
    color: #888;
}

/* 掌握度进度条 */
.bnr-mastery-bar {
    height: 3px;
    background: #f0f0f0;
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.bnr-mastery-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* 箭头 */
.bnr-nest-arrow {
    font-size: 16px;
    color: #ccc;
    font-weight: 300;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.bnr-nest-item:hover .bnr-nest-arrow {
    color: #667eea;
    transform: translateX(3px);
}

/* 空状态 */
.bnr-empty-state {
    text-align: center;
    padding: 30px 20px;
    color: #999;
}

.bnr-empty-icon {
    font-size: 36px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.bnr-empty-text {
    font-size: 13px;
}

/* ===== 响应式适配 ===== */
@media (max-width: 375px) {
    .bnr-container {
        padding: 12px;
    }

    .bnr-nest-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .bnr-nest-title {
        font-size: 12px;
    }

    .bnr-stats-bar {
        gap: 10px;
    }
}

/* ========================================================
   星级展示 & 难度调整动画（自适应出题引擎UI层）
   ======================================================== */

/* 题目星级：在行内题号旁显示 */
.question-star-level {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    font-size: 12px;
    letter-spacing: 1px;
}

.question-star-level .star {
    color: #ffc107;
    text-shadow: 0 0 3px rgba(255, 193, 7, 0.5);
}

.question-star-level .star.empty {
    color: #e0e0e0;
    text-shadow: none;
}

/* 题目卡片顶部星级（突出显示） */
.question-card-star-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.question-card-star-header .star-display {
    font-size: 16px;
    letter-spacing: 2px;
}

.question-card-star-header .star-display .star {
    color: #ffc107;
    text-shadow: 0 0 4px rgba(255, 193, 7, 0.4);
}

.question-card-star-header .star-display .star.empty {
    color: #e8e8e8;
    text-shadow: none;
}

/* 难度调整浮动提示 */
.difficulty-adjust-toast {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
    opacity: 0;
    animation: diffFadeInOut 1.5s ease-out forwards;
}

.difficulty-adjust-toast.up {
    background: linear-gradient(135deg, #f6ffed, #d9f7be);
    color: #389e0d;
    border: 1px solid #b7eb8f;
}

.difficulty-adjust-toast.down {
    background: linear-gradient(135deg, #fff1f0, #ffccc7);
    color: #cf1322;
    border: 1px solid #ffa39e;
}

.difficulty-adjust-toast .diff-arrow {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    animation: diffFloat 1.5s ease-out forwards;
}

.difficulty-adjust-toast.up .diff-arrow {
    animation-name: diffFloatUp;
}

.difficulty-adjust-toast.down .diff-arrow {
    animation-name: diffFloatDown;
}

/* 反馈区内的难度调整提示 */
.feedback-section .difficulty-adjust-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0,0,0,0.1);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.feedback-section .difficulty-adjust-row .adjust-label {
    opacity: 0.7;
}

.feedback-section .difficulty-adjust-row .adjust-value {
    font-weight: 600;
    opacity: 0;
    animation: diffFadeInOut 1.5s ease-out forwards;
}

.feedback-section.correct .difficulty-adjust-row .adjust-value {
    color: #237804;
}

.feedback-section.wrong .difficulty-adjust-row .adjust-value {
    color: #a8071a;
}

/* 动画：淡入淡出 */
@keyframes diffFadeInOut {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }
    20% {
        opacity: 1;
        transform: translateY(0);
    }
    70% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* 动画：上箭头向上飘 */
@keyframes diffFloatUp {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    50% {
        transform: translateY(-3px);
    }
    100% {
        transform: translateY(-6px);
        opacity: 0;
    }
}

/* 动画：下箭头向下飘 */
@keyframes diffFloatDown {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    50% {
        transform: translateY(3px);
    }
    100% {
        transform: translateY(6px);
        opacity: 0;
    }
}

/* 题号栏内联星级样式调整 */
.question-num .question-star-level-inline {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.question-num .question-star-level-inline .star {
    color: #ffd666;
    text-shadow: 0 0 2px rgba(255, 214, 102, 0.6);
}

.question-num .question-star-level-inline .star.empty {
    color: rgba(255, 255, 255, 0.4);
    text-shadow: none;
}

/* ========== 今日小目标卡片（来自周计划） ========== */
.today-goals-card {
    background: linear-gradient(135deg, #f0f4ff, #faf5ff);
    border-radius: 16px;
    padding: 16px;
    margin: 12px 16px;
    border: 1px solid #e0e7ff;
}

.tg-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.tg-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #4338ca;
}

.tg-title-icon {
    font-size: 18px;
}

.tg-badge {
    margin-left: auto;
    background: rgba(102, 126, 234, 0.12);
    color: #667eea;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

.tg-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.tg-item:active {
    transform: scale(0.98);
}

.tg-item-check {
    width: 20px;
    height: 20px;
    border: 2px solid #c7d2fe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    color: transparent;
}

.tg-item.completed .tg-item-check {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

.tg-item-text {
    flex: 1;
    font-size: 14px;
    color: #374151;
    line-height: 1.4;
}

.tg-item.completed .tg-item-text {
    text-decoration: line-through;
    color: #9ca3af;
}

.tg-footer {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: #667eea;
    padding-top: 8px;
    border-top: 1px dashed #c7d2fe;
    cursor: pointer;
}

.tg-celebrate {
    text-align: center;
    padding: 8px 0;
}

.tg-celebrate-icon {
    font-size: 28px;
    margin-bottom: 6px;
}

.tg-celebrate-text {
    font-size: 14px;
    color: #10b981;
    font-weight: 600;
}

.tg-celebrate-sub {
    font-size: 12px;
    color: #667eea;
    margin-top: 4px;
}

/* ========================================================
   V-3 拍照上传组件样式
   .photo-upload-container / .photo-preview / .photo-upload-btn
   ======================================================== */

/* 拍照上传容器 */
.photo-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border-radius: 16px;
    margin: 12px 16px;
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.1);
    border: 1px solid #f0f0f0;
}

/* 拍照上传按钮 */
.photo-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.photo-upload-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.photo-upload-btn .btn-icon {
    font-size: 20px;
    line-height: 1;
}

.photo-upload-btn .btn-text {
    font-size: 15px;
}

/* 拍照结果区域 */
.photo-result-area {
    width: 100%;
    margin-top: 8px;
}

/* 图片预览 */
.photo-preview {
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    position: relative;
    margin: 0 auto;
    animation: photoPreviewIn 0.3s ease-out;
}

.photo-preview img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@keyframes photoPreviewIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 预览图信息标签 */
.photo-preview-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11px;
}

.photo-preview-info .info-size {
    opacity: 0.8;
}

.photo-preview-info .info-status {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #52c41a;
    font-weight: 600;
}

/* 拍照状态提示 */
.photo-status-text {
    text-align: center;
    font-size: 13px;
    color: #888;
    padding: 8px 0;
}

.photo-status-text.success {
    color: #52c41a;
    font-weight: 600;
}

.photo-status-text.error {
    color: #f5222d;
}

/* 拍照测试按钮（周计划页面内嵌） */
.photo-test-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 32px);
    margin: 10px 16px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #e8f4fd 0%, #d0e8ff 100%);
    color: #1d39c4;
    border: 1px solid #91caff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.photo-test-btn:active {
    transform: scale(0.97);
    background: linear-gradient(135deg, #d0e8ff 0%, #b7d8ff 100%);
}

/* 拍照结果展示区（周计划测试用） */
.photo-test-result {
    margin: 8px 16px;
    padding: 12px;
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    border-radius: 10px;
    font-size: 12px;
    color: #333;
    display: none;
}

.photo-test-result.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

.photo-test-result .result-title {
    font-weight: 700;
    color: #389e0d;
    margin-bottom: 6px;
}

.photo-test-result .result-detail {
    color: #555;
    line-height: 1.6;
    word-break: break-all;
}

.photo-test-result .result-preview-img {
    width: 100%;
    max-width: 240px;
    border-radius: 8px;
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ========================================================
   V-4 AI批改功能样式
   .ai-grade-* 系列
   拍照→识别→确认→判分 完整流程
   ======================================================== */

/* --- 提交作业入口按钮（周计划页面） --- */
.ai-grade-entry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    margin: 10px 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
}
.ai-grade-entry-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.ai-grade-entry-btn .btn-emoji {
    font-size: 20px;
}

/* --- AI批改浮层（全屏覆盖） --- */
.ai-grade-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #f5f7fa;
    z-index: 3000;
    overflow-y: auto;
    animation: aiGradeSlideUp 0.35s ease-out;
    max-width: 420px;
    margin: 0 auto;
}
@keyframes aiGradeSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 顶部导航 */
.ai-grade-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.ai-grade-header .ag-back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
}
.ai-grade-header .ag-title {
    font-size: 16px;
    font-weight: 700;
    flex: 1;
}
.ai-grade-header .ag-step-label {
    font-size: 12px;
    background: rgba(255,255,255,0.2);
    padding: 3px 10px;
    border-radius: 10px;
}

/* --- 步骤1: 拍照上传 --- */
.ag-photo-step {
    padding: 24px 16px;
    text-align: center;
}
.ag-photo-step .ag-instruction {
    font-size: 15px;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.7;
}
.ag-photo-step .ag-instruction b {
    color: #667eea;
}
.ag-camera-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 200px;
    height: 200px;
    border-radius: 24px;
    background: linear-gradient(145deg, #f0f3ff, #e8ecff);
    border: 3px dashed #c7d2fe;
    cursor: pointer;
    transition: all 0.3s;
    flex-direction: column;
    color: #667eea;
}
.ag-camera-btn:active {
    transform: scale(0.96);
    border-color: #667eea;
    background: linear-gradient(145deg, #e8ecff, #dde3ff);
}
.ag-camera-btn .cam-icon {
    font-size: 48px;
    margin-bottom: 8px;
}
.ag-camera-btn .cam-text {
    font-size: 14px;
    font-weight: 600;
}
.ag-camera-btn .cam-hint {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* 拍照预览 */
.ag-preview-section {
    margin-top: 20px;
    text-align: center;
}
.ag-preview-img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.ag-preview-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
}
.ag-preview-actions .ag-btn {
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.2s;
}
.ag-preview-actions .ag-btn:active { transform: scale(0.95); }
.ag-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.ag-btn-secondary {
    background: #f3f4f6;
    color: #555;
}

/* --- 加载态 --- */
.ag-loading {
    padding: 60px 16px;
    text-align: center;
}
.ag-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e8ecff;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: agSpin 0.8s linear infinite;
    margin: 0 auto 16px;
}
@keyframes agSpin {
    to { transform: rotate(360deg); }
}
.ag-loading-text {
    font-size: 15px;
    color: #667eea;
    font-weight: 600;
}
.ag-loading-sub {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
}

/* --- 步骤2: AI识别结果确认页 --- */
.ag-recognize-page {
    padding: 16px;
}
.ag-recognize-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.ag-recognize-icon {
    font-size: 24px;
}
.ag-recognize-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}
.ag-recognize-desc {
    font-size: 12px;
    color: #999;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: #fffbe6;
    border-radius: 8px;
    border-left: 3px solid #faad14;
}

/* 识别结果卡片 */
.ag-result-card {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: border-color 0.2s;
}
.ag-result-card:focus-within {
    border-color: #667eea;
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.15);
}
.ag-result-card .ag-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ag-card-num {
    font-size: 12px;
    font-weight: 700;
    color: #667eea;
    background: #f0f3ff;
    padding: 2px 10px;
    border-radius: 10px;
}
.ag-card-confidence {
    font-size: 11px;
    color: #999;
}
.ag-card-confidence.high { color: #52c41a; }
.ag-card-confidence.medium { color: #faad14; }
.ag-card-confidence.low { color: #f5222d; }

.ag-question-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
    font-weight: 500;
}
.ag-question-text {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 10px;
    font-weight: 600;
}

.ag-answer-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
    font-weight: 500;
}
.ag-answer-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    background: #fafafa;
    transition: all 0.2s;
    outline: none;
    resize: none;
    font-family: inherit;
}
.ag-answer-input:focus {
    border-color: #667eea;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.ag-answer-input.edited {
    border-color: #faad14;
    background: #fffbe6;
}

/* 底部确认按钮 */
.ag-confirm-bar {
    padding: 16px;
    display: flex;
    gap: 12px;
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, #f5f7fa 80%, transparent);
    padding-top: 24px;
}
.ag-confirm-bar .ag-btn {
    flex: 1;
    padding: 14px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: transform 0.2s;
}
.ag-confirm-bar .ag-btn:active { transform: scale(0.97); }

/* --- 步骤3: 判分结果页 --- */
.ag-score-page {
    padding: 20px 16px;
    text-align: center;
}

/* 分数圆环 */
.ag-score-ring-wrap {
    margin: 0 auto 20px;
    width: 160px;
    height: 160px;
    position: relative;
}
.ag-score-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.ag-score-ring-bg {
    fill: none;
    stroke: #f0f0f0;
    stroke-width: 10;
}
.ag-score-ring-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out;
}
.ag-score-ring-fill.excellent { stroke: #52c41a; }
.ag-score-ring-fill.good { stroke: #faad14; }
.ag-score-ring-fill.poor { stroke: #f5222d; }
.ag-score-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.ag-score-num {
    font-size: 40px;
    font-weight: 800;
    color: #333;
    line-height: 1;
}
.ag-score-unit {
    font-size: 14px;
    color: #999;
    margin-top: 4px;
}

/* 判分结果列表 */
.ag-grade-list {
    text-align: left;
    margin-bottom: 20px;
}
.ag-grade-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border-left: 4px solid transparent;
}
.ag-grade-item.correct {
    border-left-color: #52c41a;
    background: #f6ffed;
}
.ag-grade-item.wrong {
    border-left-color: #f5222d;
    background: #fff1f0;
}
.ag-grade-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}
.ag-grade-item.correct .ag-grade-icon {
    background: #52c41a;
    color: #fff;
}
.ag-grade-item.wrong .ag-grade-icon {
    background: #f5222d;
    color: #fff;
}
.ag-grade-info {
    flex: 1;
    min-width: 0;
}
.ag-grade-question {
    font-size: 13px;
    color: #555;
    margin-bottom: 4px;
    line-height: 1.5;
}
.ag-grade-answer {
    font-size: 12px;
    color: #888;
}
.ag-grade-answer b {
    color: #333;
}
.ag-grade-correct-answer {
    font-size: 12px;
    color: #f5222d;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(245, 34, 45, 0.06);
    border-radius: 6px;
}

/* 鼓励语 */
.ag-encourage {
    padding: 16px;
    background: linear-gradient(135deg, #f0f4ff, #faf5ff);
    border-radius: 14px;
    margin-top: 16px;
    text-align: center;
}
.ag-encourage-emoji {
    font-size: 36px;
    margin-bottom: 8px;
}
.ag-encourage-text {
    font-size: 15px;
    font-weight: 600;
    color: #4338ca;
    line-height: 1.6;
}
.ag-encourage-sub {
    font-size: 12px;
    color: #888;
    margin-top: 6px;
}

/* 底部操作按钮 */
.ag-bottom-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-bottom: 30px;
}
.ag-bottom-actions .ag-btn {
    flex: 1;
    padding: 14px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.2s;
}
.ag-bottom-actions .ag-btn:active { transform: scale(0.97); }

/* --- 置信度标签颜色 --- */
.ag-conf-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}
.ag-conf-tag.high {
    background: #f6ffed;
    color: #52c41a;
}
.ag-conf-tag.medium {
    background: #fffbe6;
    color: #faad14;
}
.ag-conf-tag.low {
    background: #fff1f0;
    color: #f5222d;
}


/* ========================================================================
 * V-5 语音验证样式
 * ======================================================================== */

/* 遮罩层 */
.vv-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: vvFadeIn 0.3s ease;
}
@keyframes vvFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 主面板 */
.vv-panel {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 24px 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: vvSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
@keyframes vvSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* 头部 */
.vv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.vv-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
}
.vv-close-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f0f0;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.vv-close-btn:hover { background: #e0e0e0; }

/* 参考文本区域 */
.vv-reference {
    background: linear-gradient(135deg, #f5f7fa 0%, #eef1f5 100%);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.vv-ref-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}
.vv-ref-text {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    word-break: break-all;
}

/* 波形容器 */
.vv-waveform-container {
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    text-align: center;
}
#vv-waveform {
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

/* 计时器 */
.vv-timer {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #667eea;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}

/* 状态文字 */
.vv-status {
    text-align: center;
    font-size: 14px;
    color: #888;
    margin-bottom: 16px;
    min-height: 20px;
}
.vv-status.recording {
    color: #f5222d;
    animation: vvPulse 1.2s ease-in-out infinite;
}
.vv-status.processing { color: #667eea; }
.vv-status.done { color: #52c41a; }

@keyframes vvPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ASR 加载动画点 */
.vv-loading-dots span {
    animation: vvDotBlink 1.4s infinite;
}
.vv-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.vv-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes vvDotBlink {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

/* 控制按钮 */
.vv-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}
.vv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    border-radius: 25px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.vv-btn-icon {
    font-size: 18px;
}
.vv-btn-start {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.vv-btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}
.vv-btn-start:active {
    transform: translateY(0);
}
.vv-btn-stop {
    background: linear-gradient(135deg, #f5222d 0%, #d4380d 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(245, 34, 45, 0.35);
    animation: vvStopPulse 1.5s ease-in-out infinite;
}
@keyframes vvStopPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(245, 34, 45, 0.35); }
    50% { box-shadow: 0 4px 25px rgba(245, 34, 45, 0.55); }
}
.vv-btn-stop:hover {
    transform: translateY(-2px);
}
.vv-btn-retry {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    width: 100%;
    justify-content: center;
}
.vv-btn-retry:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

/* 提示文字 */
.vv-tip {
    font-size: 12px;
    color: #999;
    text-align: center;
    line-height: 1.5;
}

/* ===== 结果面板 ===== */
.vv-result-panel {
    text-align: center;
}
.vv-result-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}
.vv-result-emoji {
    font-size: 36px;
}
.vv-result-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
}
.vv-result-score {
    font-size: 56px;
    font-weight: 800;
    margin: 8px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.vv-result-status {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    padding: 8px 20px;
    border-radius: 20px;
    display: inline-block;
}
.vv-result-status.passed {
    background: #f6ffed;
    color: #52c41a;
}
.vv-result-status.failed {
    background: #fff1f0;
    color: #f5222d;
}

/* 结果详情 */
.vv-result-detail {
    background: #fafafa;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: left;
}
.vv-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
}
.vv-detail-row:last-child { border-bottom: none; }
.vv-hit-list span { color: #52c41a; font-weight: 600; }
.vv-miss-list span { color: #f5222d; font-size: 13px; }
.vv-threshold {
    font-size: 11px;
    color: #bbb;
    text-align: right;
    margin-top: 8px;
}

/* 识别文本 */
.vv-recognized-text {
    margin-bottom: 20px;
    text-align: left;
}
.vv-recognized-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}
.vv-recognized-content {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    word-break: break-all;
    max-height: 100px;
    overflow-y: auto;
}

/* 操作按钮区 */
.vv-result-actions {
    margin-top: 8px;
}


/* V-5 入口按钮样式 */
.vv-entry-group {
    margin-top: 8px;
}
.vv-entry-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.vv-entry-read {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.35);
}
.vv-entry-read:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(102, 126, 234, 0.45);
}
.vv-entry-recite {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
    box-shadow: 0 3px 12px rgba(245, 87, 108, 0.35);
}
.vv-entry-recite:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(245, 87, 108, 0.45);
}

/* ============================================================
   外挂猫开窍系统 - 打印模块样式 v1.0
   打印预览覆盖层 + A4打印排版
   ============================================================ */

/* --- 打印预览覆盖层 --- */
.print-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: #f0f2f5;
    display: flex;
    flex-direction: column;
}

.print-overlay-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

.print-overlay-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.print-overlay-actions {
    display: flex;
    gap: 8px;
}

.print-overlay-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.print-overlay-btn:hover {
    background: #f9fafb;
}

.print-overlay-btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.print-overlay-btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    transform: translateY(-1px);
}

.print-preview-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    justify-content: center;
}

/* --- A4打印页 --- */
.print-page {
    width: 210mm;
    min-height: 297mm;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    padding: 15mm 18mm;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    font-size: 12pt;
    line-height: 1.6;
    color: #1f2937;
}

/* --- 页眉 --- */
.print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #6366f1;
    padding-bottom: 8mm;
    margin-bottom: 6mm;
}

.print-header-left {}

.print-header-logo {
    font-size: 10pt;
    color: #9ca3af;
    letter-spacing: 0.5px;
}

.print-header-title {
    font-size: 18pt;
    font-weight: 700;
    color: #1f2937;
    margin-top: 2mm;
}

.print-header-right {
    text-align: right;
}

.print-header-week {
    font-size: 14pt;
    font-weight: 600;
    color: #6366f1;
}

.print-header-date {
    font-size: 9pt;
    color: #6b7280;
    margin-top: 1mm;
}

/* --- 学生信息 --- */
.print-student-info {
    margin-bottom: 6mm;
}

.print-info-row {
    display: flex;
    gap: 30mm;
    font-size: 10pt;
    color: #4b5563;
}

.print-info-label {
    display: inline-block;
}

/* --- 区块 --- */
.print-section {
    margin-bottom: 6mm;
    page-break-inside: avoid;
}

.print-section-title {
    font-size: 13pt;
    font-weight: 700;
    color: #1f2937;
    border-left: 3px solid #6366f1;
    padding-left: 3mm;
    margin-bottom: 3mm;
}

.print-subsection {
    margin-bottom: 4mm;
}

.print-subsection-label {
    font-size: 10.5pt;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 2mm;
}

/* --- 诊断网格 --- */
.print-diagnosis-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2mm;
}

.print-diag-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 2mm 3mm;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 40mm;
    flex: 1;
}

.print-diag-name {
    font-size: 9.5pt;
    color: #374151;
    font-weight: 500;
}

.print-diag-mastery {
    font-size: 10pt;
    font-weight: 700;
    margin-left: 2mm;
}

/* --- 窝点头 --- */
.print-nest-section {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 4mm;
    margin-bottom: 5mm;
    background: #fafbfc;
}

.print-nest-header {
    display: flex;
    align-items: center;
    gap: 3mm;
    margin-bottom: 3mm;
}

.print-nest-name {
    font-size: 12pt;
    font-weight: 700;
    color: #1f2937;
}

.print-nest-subject {
    font-size: 9pt;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.5mm 2mm;
    border-radius: 3px;
}

.print-nest-mastery {
    font-size: 9pt;
    color: #6366f1;
    font-weight: 600;
    margin-left: auto;
}

/* --- 薄弱点列表 --- */
.print-weak-list {
    margin: 0;
    padding-left: 4mm;
}

.print-weak-list li {
    font-size: 9.5pt;
    color: #4b5563;
    margin-bottom: 1mm;
    list-style: '▸ ';
}

/* --- 推导公式框 --- */
.print-derivation-box {
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
    border-radius: 4px;
    padding: 3mm;
}

.print-derivation-item {
    font-size: 10pt;
    color: #3730a3;
    font-family: 'Courier New', monospace;
    margin-bottom: 1.5mm;
    word-break: break-all;
}

.print-derivation-item:last-child {
    margin-bottom: 0;
}

/* --- 练习题 --- */
.print-question {
    margin-bottom: 5mm;
    page-break-inside: avoid;
}

.print-question-header {
    display: flex;
    align-items: center;
    gap: 2mm;
    margin-bottom: 2mm;
}

.print-question-code {
    font-size: 8pt;
    color: #6366f1;
    font-weight: 600;
    background: #eef2ff;
    padding: 0.5mm 2mm;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

.print-retry-tag {
    font-size: 8pt;
    color: #dc2626;
    background: #fef2f2;
    padding: 0.5mm 2mm;
    border-radius: 3px;
    font-weight: 600;
}

.print-question-body {
    font-size: 10.5pt;
    color: #1f2937;
    line-height: 1.7;
    margin-bottom: 3mm;
    white-space: pre-wrap;
}

.print-answer-area {
    border-bottom: 1px dashed #d1d5db;
    height: 12mm;
    margin-bottom: 1mm;
}

.print-answer-area-large {
    height: 24mm;
}

.print-hint {
    font-size: 9pt;
    color: #9ca3af;
    font-style: italic;
    margin-bottom: 3mm;
}

/* --- 资源信息 --- */
.print-resource-item {
    font-size: 9.5pt;
    color: #4b5563;
    margin-bottom: 1mm;
    padding-left: 2mm;
}

/* --- 错题相关 --- */
.print-mistake-question {
    border-left: 3px solid #f5222d;
    padding-left: 3mm;
}

.print-mistake-source {
    font-size: 8.5pt;
    color: #6b7280;
}

.print-error-tag {
    font-size: 9pt;
    color: #dc2626;
    background: #fef2f2;
    display: inline-block;
    padding: 0.5mm 2mm;
    border-radius: 3px;
    margin-bottom: 2mm;
}

.print-explanation-hint {
    font-size: 8.5pt;
    color: #9ca3af;
    text-align: right;
    margin-top: 1mm;
}

.print-mistake-summary {
    display: flex;
    gap: 4mm;
}

.print-stat-item {
    font-size: 10pt;
    color: #4b5563;
    background: #f9fafb;
    padding: 2mm 4mm;
    border-radius: 4px;
}

.print-stat-item b {
    color: #6366f1;
    font-size: 12pt;
}

/* --- 考前冲刺 --- */
.print-error-stats {
    margin-bottom: 3mm;
}

.print-error-stat-row {
    display: flex;
    align-items: center;
    gap: 2mm;
    margin-bottom: 1.5mm;
}

.print-error-stat-name {
    font-size: 9.5pt;
    color: #374151;
    min-width: 22mm;
    font-weight: 500;
}

.print-error-stat-bar {
    flex: 1;
    height: 3mm;
    background: #f3f4f6;
    border-radius: 2mm;
    overflow: hidden;
}

.print-error-stat-fill {
    height: 100%;
    background: linear-gradient(90deg, #f5222d, #fa541c);
    border-radius: 2mm;
    transition: width 0.3s;
}

.print-error-stat-count {
    font-size: 9pt;
    color: #6b7280;
    min-width: 10mm;
    text-align: right;
}

.print-weak-points-all {
    display: flex;
    flex-direction: column;
    gap: 1.5mm;
}

.print-weak-point-row {
    display: flex;
    align-items: center;
    gap: 2mm;
    font-size: 10pt;
    padding: 1mm 0;
    border-bottom: 1px solid #f3f4f6;
}

.print-wp-name {
    flex: 1;
    color: #374151;
}

.print-wp-mastery {
    color: #6366f1;
    font-weight: 600;
    font-size: 9.5pt;
}

.print-tp-source {
    font-size: 8.5pt;
    color: #6b7280;
}

/* --- 页脚 --- */
.print-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8mm;
    padding-top: 3mm;
    border-top: 1px solid #e5e7eb;
    font-size: 8pt;
    color: #9ca3af;
}

/* ============================================================
   CSS @media print - 打印时隐藏非打印内容
   ============================================================ */
@media print {
    /* 隐藏非打印区域 */
    body * {
        visibility: hidden;
    }

    .print-overlay,
    .print-overlay *,
    .print-page,
    .print-page * {
        visibility: visible;
    }

    .print-overlay {
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
    }

    .print-overlay-toolbar {
        display: none !important;
    }

    .print-preview-container {
        padding: 0;
        overflow: visible;
    }

    .print-page {
        box-shadow: none;
        width: 100%;
        min-height: auto;
        padding: 10mm 15mm;
        margin: 0;
    }

    /* 分页控制 */
    .print-section {
        page-break-inside: avoid;
    }

    .print-question {
        page-break-inside: avoid;
    }

    .print-nest-section {
        page-break-inside: avoid;
    }

    /* 页脚页码 */
    @page {
        size: A4;
        margin: 10mm;
    }
}

/* ============================================================
   周计划页面打印按钮入口样式
   ============================================================ */
.wp-print-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 16px;
    margin-top: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    transition: all 0.25s ease;
}

.wp-print-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.wp-print-btn:active {
    transform: translateY(0);
}

.wp-print-group {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
}

.wp-print-group .wp-print-btn {
    flex: 1;
    margin-top: 0;
}

.wp-print-btn-secondary {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.wp-print-btn-secondary:hover {
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.wp-print-btn-exam {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.wp-print-btn-exam:hover {
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

/* 错题本打印按钮 */
.wq-print-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
    transition: all 0.2s ease;
    margin-top: 8px;
}

.wq-print-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35);
}

/* ========== 打印预览 - 底部上传批改区域 ========== */
.print-upload-area {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    border-top: 1px solid #e8e8e8;
    z-index: 10;
}

.print-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    transition: all 0.25s ease;
    letter-spacing: 1px;
}

.print-upload-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}

.print-upload-btn:disabled {
    cursor: not-allowed;
    opacity: 0.85;
}

.print-upload-btn-loading {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.print-upload-btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.print-upload-btn-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.print-upload-status {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #888;
    min-height: 18px;
    transition: all 0.3s ease;
}

.print-upload-status-loading {
    color: #d97706;
}

.print-upload-status-success {
    color: #16a34a;
    font-weight: 600;
}

.print-upload-status-error {
    color: #dc2626;
}

/* 打印时隐藏上传区域 */
@media print {
    .print-upload-area {
        display: none !important;
    }
}

/* ========== [v1.2-S2] 萌芽成就弹窗与徽章 ========== */

/* 萌芽弹窗遮罩 */
.sprout-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: sproutFadeIn 0.4s ease-out;
}

@keyframes sproutFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 弹窗主体 */
.sprout-popup-box {
    background: linear-gradient(135deg, #fef9e7 0%, #fff 50%, #e8f5e9 100%);
    border-radius: 20px;
    padding: 32px 28px;
    max-width: 320px;
    width: 85%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(129, 199, 132, 0.3);
    animation: sproutSlideIn 0.5s ease-out;
    position: relative;
}

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

/* 弹窗图标 */
.sprout-popup-icon {
    font-size: 64px;
    margin-bottom: 16px;
    animation: sproutBounce 1s ease-in-out infinite;
}

@keyframes sproutBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* 弹窗标题 */
.sprout-popup-title {
    font-size: 22px;
    font-weight: 700;
    color: #2e7d32;
    margin-bottom: 16px;
    letter-spacing: 1px;
}

/* 弹窗正文 */
.sprout-popup-body {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 24px;
}

.sprout-popup-body p {
    margin: 8px 0;
}

/* 弹窗关闭按钮 */
.sprout-popup-close {
    background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 187, 106, 0.3);
}

.sprout-popup-close:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 187, 106, 0.4);
}

.sprout-popup-close:active {
    transform: translateY(0);
}

/* 萌芽徽章（顶部栏右侧） */
.sprout-badge {
    position: fixed;
    top: 8px;
    right: 80px;
    font-size: 28px;
    cursor: pointer;
    animation: sproutBadgeGlow 2s ease-in-out infinite;
    z-index: 999;
    filter: drop-shadow(0 2px 4px rgba(129, 199, 132, 0.5));
}

@keyframes sproutBadgeGlow {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 2px 4px rgba(129, 199, 132, 0.5));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 2px 8px rgba(129, 199, 132, 0.8));
    }
}

/* ============================================================
   M-18: 猫咪隐喻故事卡片
   ============================================================ */
.m05-story-card {
    background: linear-gradient(135deg, #FFF8F0 0%, #FFF5E6 100%);
    border: 1.5px solid #FFD59E;
    border-radius: 14px;
    padding: 16px 18px;
    margin: 12px 0;
    box-shadow: 0 4px 16px rgba(255, 140, 66, 0.1);
    animation: m05-story-fade-in 0.4s ease-out;
}

.m05-story-header {
    font-size: 14px;
    font-weight: 600;
    color: #FF8C42;
    margin-bottom: 10px;
}

.m05-story-title {
    font-size: 15px;
    font-weight: 700;
    color: #2D2D2D;
    margin-bottom: 8px;
}

.m05-story-text {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 10px;
    white-space: pre-line;
}

.m05-story-moral {
    font-size: 13px;
    color: #6C5CE7;
    font-style: italic;
    padding: 8px 12px;
    background: rgba(108, 92, 231, 0.06);
    border-radius: 8px;
    margin-bottom: 10px;
}

.m05-story-close {
    text-align: right;
    font-size: 13px;
    color: #8C8C8C;
    cursor: pointer;
    padding: 4px 0;
}

.m05-story-close:hover {
    color: #FF8C42;
}

@keyframes m05-story-fade-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}