:root {
    /* === 核心色板 (Duolingo Palette) === */
    --primary: #58cc02; 
    --primary-dark: #46a302;
    --primary-light: #d7ffb8; 
    --blue: #1cb0f6; 
    --blue-dark: #1899d6;
    --blue-light: #ddf4ff; 
    --orange: #ff9600; 
    --orange-dark: #cc7800;
    --yellow: #ffc800; 
    --yellow-dark: #e5b400;
    --red: #ff4b4b; 
    --red-dark: #d50000;
    --red-light: #ffdfe0; 
    --purple: #ce82ff; 
    --purple-dark: #a568cc;

    --gray: #e5e5e5; 
    --gray-dark: #cfcfcf; 
    --text: #4b4b4b; 
    --text-light: #afafaf;
    --bg: #fff;

    /* 基于 8pt Grid 规范化侧边栏宽度 */
    --sidebar-width: 256px;
    --right-sidebar-width: 416px; 
    
    --level-0: #ebedf0;
    --level-1: #9be9a8;
    --level-2: #40c463;
    --level-3: #30a14e;
    --level-4: #216e39;
}
/* =========================================================
   🌟 考蛙蛙 Web App 原生化与防线配置
   ========================================================= */

/* 1. 彻底解决苹果 iOS 左右摇摆（横向溢出）Bug */
html, body {
    width: 100%; /* 💡 修复细节：用 100% 替代 100vw，防止由于系统滚动条宽度差异导致的微小溢出 */
    max-width: 100%;
    overflow-x: clip; 
    position: relative;
    overscroll-behavior-x: none; /* ✅ 彻底禁用苹果 Safari 的横向“橡皮筋”拉扯回弹 */
}

/* 2. 彻底禁用全局文本选中、长按菜单、点击闪框 */
body {
    /* 禁用长按弹出的系统菜单 (尤其针对 iOS Safari) */
    -webkit-touch-callout: none; 
    
    /* 禁用文本选中 (防复制) */
    -webkit-user-select: none; 
    -moz-user-select: none;    
    -ms-user-select: none;     
    user-select: none;         
    
    /* 彻底消除移动端点击按钮时出现的一瞬间的半透明灰/蓝框 */
    -webkit-tap-highlight-color: transparent; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 3. ⚠️ 重要补丁：让输入框恢复正常！ */
/* 如果把全局选中禁用了，用户将无法在输入框里打字，所以必须把表单元素排除在外 */
input, textarea {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

/* 4. 消除所有图片的默认拖拽行为 (防止长按图片被拖走) */
img {
    -webkit-user-drag: none;
    user-drag: none;
}
body { margin: 0; background: #fff; font-family: "Segoe UI", system-ui, sans-serif; color: var(--text); }

/* === 布局框架 === */
.app-layout { display: flex; flex-direction: column; min-height: 100vh; }

/* === 移动端顶部栏 === */
.mobile-top-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 48px; /* 50 -> 48px */
    background: #fff; border-bottom: 2px solid var(--gray); z-index: 1000;
    display: flex; justify-content: space-around; align-items: center;
}
.top-item { font-weight: bold; color: var(--text-light); font-size: 14px; display: flex; align-items: center; gap: 4px; }

/* === 导航栏 === */
.main-nav {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 72px; /* 70 -> 72px */
    background: #fff; border-top: 2px solid var(--gray);
    display: flex; justify-content: space-around; align-items: center; z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
}
.nav-logo { display: none; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-light); cursor: pointer; }
.nav-item.active { color: var(--blue); }
.nav-icon { font-size: 24px; }
.nav-text { font-size: 12px;margin-top: 7px; font-weight: bold; text-transform: uppercase; }

/* === 内容区域 === */
.content-area {
    flex: 1; padding: 0px 24px 104px; /* 统一为 8 的倍数 */
    width: 100%; box-sizing: border-box; display: flex; justify-content: center;
}
.view-section { width: 100%; max-width: 600px; display: none; animation: fadeIn 0.3s; position: relative; padding-top: 32px}
.view-section.active { display: block; }

/* === 右侧侧边栏 === */
.right-sidebar { display: none; }

/* === 响应式：大屏布局 === */
@media (min-width: 1024px) {
    .mobile-top-bar { display: none; }
    .app-layout { flex-direction: row; align-items: flex-start; }
    
    .main-nav {
        width: var(--sidebar-width); height: 100vh; position: sticky; top: 0;
        border-top: none; border-right: 2px solid var(--gray);
        flex-direction: column; justify-content: flex-start; padding: 24px;
        z-index: 1000; 
        flex-shrink: 0; 
    }
    .nav-logo { display: flex; align-items: center; margin-bottom: 32px; width: 100%; padding-left: 12px; }
    .nav-logo img { height: 80px;margin:0 auto; width: auto; object-fit: contain; cursor: pointer; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)); }
    .nav-logo img:hover { transform: scale(1.05) rotate(-2deg); }
    .nav-item { flex-direction: row; width: 90%; height: 48px; flex: none; justify-content: flex-start; padding-left: 24px; border-radius: 12px; margin-bottom: 8px; }
    .nav-item:hover { background: #f7f7f7; }
    .nav-item.active { background: var(--blue-light); border: 2px solid var(--blue); color: var(--blue); }
    .nav-icon { margin-right: 24px; font-size: 24px; } .nav-text {
        margin-left: 31px;
        font-size: 20px;
        letter-spacing: 6px;
    }

    .content-area {
        padding-top: 40px; 
        width: 640px;      
        flex: none;        
        margin-left: auto; 
    }

    .right-sidebar {
        display: block; width: var(--right-sidebar-width); 
        position: sticky; top: 24px; 
        padding: 24px 40px 24px 24px; box-sizing: border-box;
        height: auto;
        flex-shrink: 0; 
        margin-right: auto; 
    }
}

/* =========================================
   组件：顶部数据行 (Stats Row)
   ========================================= */
.stats-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 32px; padding: 0 8px;
}
.stat-pill { display: flex; align-items: center; font-weight: 800; color: var(--text-light); font-size: 20px; transition: color 0.3s; }
.stat-pill:hover { filter: brightness(0.9); cursor: pointer; }
.stat-pill img, .stat-pill span.icon { width: 24px; height: 24px; margin-right: 8px; font-size: 24px; }
.stat-pill span{margin-left: 8px}
.stat-pill.fire { color: var(--orange); }
.stat-pill.gem { color: var(--blue); }
.stat-pill.xp { color: var(--yellow); }
.stat-pill.power { color: var(--primary); } 
.stat-pill.pen { color: var(--blue); }      
.stat-pill #pc-hearts{font-size: 30px}
@keyframes pop-scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.stat-change-anim { animation: pop-scale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* =========================================
   组件：个人勤勉度 & 广告
   ========================================= */
.module-box { border: 2px solid var(--gray); border-radius: 16px; padding: 24px; margin-bottom: 24px; background: #fff; }
.module-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.module-link { font-size: 14px; color: var(--blue); cursor: pointer; text-transform: uppercase; font-weight: bold; }
.diligence-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.d-day { aspect-ratio: 1; border-radius: 4px; background: var(--level-0); position: relative; cursor: pointer; }
.d-day:hover { transform: scale(1.2); z-index: 2; border: 1px solid rgba(0,0,0,0.1); }
.d-day[data-level="1"] { background: var(--level-1); }
.d-day[data-level="2"] { background: var(--level-2); }
.d-day[data-level="3"] { background: var(--level-3); }
.d-day[data-level="4"] { background: var(--level-4); }

.super-card { border: 2px solid var(--gray); border-radius: 16px; overflow: hidden; background: #fff; text-align: center; padding-bottom: 24px; }
.super-header { background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%); padding: 16px; color: white; display: flex; align-items: center; justify-content: center; }
.super-content { padding: 24px; }
.super-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; color: var(--text); }
.super-text { font-size: 14px; color: #777; margin-bottom: 24px; line-height: 1.5; font-style: italic; }
.super-btn { background: var(--purple); color: white; border: none; padding: 16px 32px; border-radius: 12px; font-weight: 800; font-size: 14px; cursor: pointer; width: 80%; box-shadow: 0 4px 0 var(--purple-dark); transition: 0.1s; }
.super-btn:active { transform: translateY(4px); box-shadow: none; }

.btn-main { width: 100%; padding: 16px; border-radius: 16px; border: none; background: var(--primary); color: white; font-size: 16px; font-weight: 800; box-shadow: 0 4px 0 var(--primary-dark); cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: 0.1s; }
.btn-main:active { transform: translateY(4px); box-shadow: none; margin-top: 4px; }

/* =========================================
   组件：地图节点与全局吸顶标题 (Global Sticky Header)
   ========================================= */
.global-unit-header {
    position: sticky;
    top: 56px; /* 🌟 核心修复：移动端新顶栏高度正好是56px，吸顶严丝合缝！ */
    z-index: 100; 
    color: white; 
    padding: 16px 24px; 
    border-radius: 16px; 
    text-align: left; 
    box-shadow: 0 4px 0 rgba(0,0,0,0.15); 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 24px;
    transition: background-color 0.2s ease-out;
    width: 100%;
    max-width: 640px; 
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .global-unit-header { top: 24px; } 
}

.unit-block { 
    text-align: center; margin-bottom: 0;  position: relative; width: 100%; 
}

.unit-divider {
    display: flex; align-items: center; text-align: center;
    color: var(--text-light); font-weight: 800; font-size: 18px;
    margin: 24px 0 40px 0; 
    width: 100%; max-width: 640px;
}
.unit-divider::before, .unit-divider::after {
    content: ''; flex: 1; border-bottom: 2px solid var(--gray);
}
.unit-divider span { padding: 0 24px; }

.uh-info { flex: 1; min-width: 0;                /* 极其关键！防止 Flex 子元素被过长的文本强制撑开 */
    overflow: hidden;}
.uh-phase { font-size: 14px; font-weight: 800; opacity: 0.9; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.uh-title { font-size: 20px; font-weight: 800; margin: 0; white-space: nowrap;         /* 强制所有文字在一行内显示，绝不换行 */
    overflow: hidden;            /* 隐藏掉超出容器宽度的部分文字 */
    text-overflow: ellipsis;}
.uh-guide-btn {
    background: rgba(0,0,0,0.15); color: white; border: none; padding: 8px 16px; border-radius: 12px;
    font-weight: 800; font-size: 14px; cursor: pointer; display: flex; align-items: center;
    transition: 0.1s; box-shadow: 0 4px 0 rgba(0,0,0,0.1);
}
.uh-guide-btn:active { transform: translateY(4px); box-shadow: none; margin-top: 4px; }

.nodes-wrapper { display: flex; flex-direction: column; align-items: center; }

.node-container { height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.node { width: 72px; height: 72px; border-radius: 50%; border: none; font-size: 32px; cursor: pointer; position: relative; background: #fff; box-shadow: 0 6px 0 var(--gray); transition: 0.1s; z-index: 2; }
.node:active { transform: translateY(4px); box-shadow: none; }
.node.current { background: var(--primary); color: white; box-shadow: 0 6px 0 var(--primary-dark); }
.node.locked { background: var(--gray); color: #ccc; cursor: not-allowed; box-shadow: none; }
.node.completed { background: var(--yellow); color: white; box-shadow: 0 6px 0 var(--yellow-dark); }
.node-container:nth-child(even) .node { transform: translateX(56px); }
.node-container:nth-child(odd):not(:first-child) .node { transform: translateX(-56px); }

/* === 战力统计 === */
.cute-card { background: #fff; border: 2px solid var(--gray); border-radius: 24px; padding: 24px; margin-bottom: 24px; box-shadow: 0 4px 0 #f0f0f0; }
.chart-wrapper { width: 100%; height: 304px; position: relative; margin: 0 auto; }
.stats-grid { display: flex; gap: 16px; }
.stat-box { flex: 1; border-radius: 16px; padding: 16px; color: white; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 0 rgba(0,0,0,0.1); }
.stat-box.blue { background: var(--blue); box-shadow: 0 4px 0 var(--blue-dark); }
.stat-box.orange { background: var(--orange); box-shadow: 0 4px 0 var(--orange-dark); }
.stat-val { font-size: 32px; font-weight: 800; } .stat-label { font-size: 12px; opacity: 0.9; margin-top: 4px; }

/* === 全局弹窗与反馈 === */
.overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; 
    background: #fff; z-index: 9999999 !important; 
    display: none; flex-direction: column; overscroll-behavior: none; 
}
.overlay.active { display: flex; }
.quiz-header { padding: 16px 24px; display: flex; align-items: center; border-bottom: 2px solid var(--gray); flex-shrink: 0; }
.progress-track { flex: 1; height: 16px; background: var(--gray); border-radius: 8px; margin-left: 24px; overflow: hidden; }
#quiz-progress { height: 100%; background: var(--primary); width: 0%; transition: 0.3s; }
.quiz-content { flex: 1; padding: 24px; overflow-y: auto; max-width: 600px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.footer-check { flex-shrink: 0; padding: 24px; border-top: 2px solid var(--gray); background: #fff; max-width: 600px; margin: 0 auto; width: 100%; box-sizing: border-box; z-index: 10; padding-bottom: max(24px, env(safe-area-inset-bottom)); }

.feedback-sheet { 
    position: fixed; bottom: -100%; left: 0; width: 100%; background: #fff; 
    z-index: 10000000 !important; border-top: 2px solid var(--gray); padding: 24px; box-sizing: border-box; 
    transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.feedback-sheet.visible { bottom: 0; }
.feedback-sheet.correct { background: var(--primary-light); border-color: transparent; }
.feedback-sheet.wrong { background: var(--red-light); border-color: transparent; }
.feedback-header { display: flex; align-items: center; margin-bottom: 24px; }
.feedback-icon { font-size: 40px; margin-right: 16px; }
.feedback-text h3 { margin: 0; font-size: 20px; }
.feedback-sheet.correct h3 { color: var(--primary-dark); } .feedback-sheet.wrong h3 { color: var(--red); }
.opt-btn { border: 2px solid var(--gray); border-radius: 12px; padding: 16px; margin-bottom: 12px; font-weight: bold; cursor: pointer; transition: 0.1s; box-shadow: 0 4px 0 var(--gray); color: var(--text); background: #fff; }
.opt-btn.selected { border-color: var(--blue); background: var(--blue-light); color: var(--blue); box-shadow: 0 4px 0 var(--blue); }

.modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index: 5000; display: none; align-items: center; justify-content: center; }
.modal-overlay.visible { display: flex; }
.modal-box { background: white; width: 80%; max-width: 320px; padding: 32px; border-radius: 24px; text-align: center; }
.modal-icon { font-size: 56px; margin-bottom: 16px; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.node.pro-locked {
    background: linear-gradient(135deg, #ffd900 0%, #ff9600 100%); color: white;
    box-shadow: 0 6px 0 #cc7800; cursor: pointer;
}
.stat-pill.heart.super { color: var(--purple); }

/* =========================================
   气泡提示框 (Tooltip)
   ========================================= */
.tooltip-container { position: relative; cursor: pointer; display: flex; align-items: center; }
.tooltip-box {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 8px; padding: 8px 16px; background: #4b4b4b; color: white;
    border-radius: 12px; font-size: 13px; font-weight: 800; white-space: nowrap;
    text-align: center; opacity: 0; visibility: hidden; transition: 0.2s; z-index: 9999;
    line-height: 1.6; pointer-events: none; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.tooltip-box::after {
    content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    border-width: 8px; border-style: solid; border-color: transparent transparent #4b4b4b transparent;
}
.tooltip-container:hover .tooltip-box { opacity: 1; visibility: visible; }
.mobile-top-bar .tooltip-box { left: auto; right: -8px; transform: none; }
.mobile-top-bar .tooltip-box::after { left: auto; right: 24px; transform: none; }

/* =========================================
   答题界面与知识卡片
   ========================================= */
.q-title { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 24px; line-height: 1.6; }
.opts { display: flex; flex-direction: column; gap: 16px; }
.super-badge {
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
    color: white; padding: 4px 8px; border-radius: 8px; font-size: 13px; font-weight: 800;
    vertical-align: bottom; margin-right: 8px; display: inline-flex; align-items: center;
    box-shadow: 0 2px 0 rgba(0,0,0,0.1);
}

.node.tooltip-container .tooltip-box { bottom: 110%; top: auto; margin-bottom: 8px; background: var(--purple-dark); }
.node.tooltip-container .tooltip-box::after { top: 100%; bottom: auto; border-color: var(--purple-dark) transparent transparent transparent; }

.study-content { font-size: 16px; line-height: 1.6; color: var(--text); margin-bottom: 24px; }
.study-content b { color: var(--blue-dark); background: var(--blue-light); padding: 2px 6px; border-radius: 4px; font-weight: 900; }
.study-tips { background: #f0f8ff; border-left: 4px solid var(--blue); padding: 16px; border-radius: 8px; color: #555; font-style: italic; font-size: 14px; font-weight: bold; }

/* =========================================
   战力动态与曲线图
   ========================================= */
.stats-trend-row { display: flex; gap: 16px; margin-bottom: 24px; }
.trend-box { flex: 1; background: #fff; border: 2px solid var(--gray); border-radius: 16px; padding: 16px 8px; text-align: center; box-shadow: 0 4px 0 var(--gray); }
.trend-label { font-size: 13px; color: var(--text-light); font-weight: 800; margin-bottom: 8px; }
.trend-val { font-size: 24px; font-weight: 900; }
.trend-val.up { color: var(--primary); } .trend-val.down { color: var(--red); } .trend-val.flat { color: var(--text-light); }
.line-chart-wrapper { width: 100%; height: 256px; position: relative; margin: 0 auto; }

.tooltip-top .tooltip-box { bottom: 140%; top: auto; margin-top: 0; margin-bottom: 8px; background: #333; }
.tooltip-top .tooltip-box::after { top: 100%; bottom: auto; border-color: #333 transparent transparent transparent; }

/* =========================================
   通用列表卡片 (Duo Card & Data Card)
   ========================================= */
.duo-card { border: 2px solid var(--gray); border-radius: 16px; padding: 24px; margin-bottom: 24px; background: #fff; text-align: left; }
.duo-super-badge { display: inline-block; background: linear-gradient(90deg, #1cb0f6, #ce82ff); color: white; font-weight: 900; font-style: italic; padding: 4px 12px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.duo-btn-blue { width: 100%; padding: 16px; border-radius: 16px; border: none; background: #3b3bff; color: white; font-size: 16px; font-weight: 800; box-shadow: 0 4px 0 #2a2aeb; cursor: pointer; transition: 0.1s; text-transform: uppercase;}
.duo-btn-blue:active { transform: translateY(4px); box-shadow: none; margin-top: 4px; }
.quest-row { display: flex; align-items: center; margin-top: 24px; }
.quest-icon { font-size: 40px; margin-right: 16px; }
.quest-bar-bg { background: var(--gray); height: 16px; border-radius: 8px; position: relative; width: 100%; display: flex; align-items: center; overflow: visible; }
.quest-bar-fill { background: var(--yellow); height: 100%; border-radius: 8px; }
.quest-bar-text { position: absolute; width: 100%; text-align: center; font-size: 12px; font-weight: 900; color: #777; }

.data-cards-row { display: flex; gap: 16px; margin-bottom: 32px; }
.data-card { flex: 1; border: 2px solid var(--gray); border-radius: 16px; padding: 16px 24px; display: flex; align-items: center; gap: 8px; }
.data-icon { font-size: 24px; } .data-text h4 { margin: 0; font-size: 20px; color: #333; } .data-text span { font-size: 12px; color: var(--text-light); font-weight: bold; }

.profile-header-card { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 2px solid var(--gray); }
.profile-info h2 { font-size: 28px; margin: 0 0 8px 0; color: #333; }
.profile-meta { color: var(--text-light); font-size: 14px; margin-bottom: 16px; font-weight: bold; }
.profile-avatar-large { width: 80px; height: 80px; background: var(--primary); color: white; border-radius: 50%; font-size: 32px; font-weight: 800; display: flex; justify-content: center; align-items: center; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--gray); position: relative; }

/* =========================================
   独立卡片入口 & 错题本抽屉
   ========================================= */
.practice-card {
    border-radius: 24px; padding: 32px 24px; color: white; display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; cursor: pointer; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;
}
.practice-card.blue-glow { background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%); box-shadow: 0 10px 24px rgba(2, 132, 199, 0.3); }
.practice-card.red-glow { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); box-shadow: 0 10px 24px rgba(185, 28, 28, 0.3); }
.practice-card:active { transform: translateY(6px) scale(0.98); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }

.mistake-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 6000;
    display: flex; justify-content: flex-end; opacity: 0; visibility: hidden; 
    transition: opacity 0.3s; /* 🚀 优化：严格指定只动画 opacity，避免重绘重排 */
    will-change: opacity; /* 🚀 开启 GPU 加速 */
}
.mistake-overlay.active { opacity: 1; visibility: visible; }

.mistake-sheet {
    width: 100%; max-width: 448px; height: 100%; background: #f8fafc;
    /* 🚀 优化：加入 translateZ(0) 强制开启 3D 硬件加速复合层 */
    transform: translateX(100%) translateZ(0); 
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; flex-direction: column; box-shadow: -10px 0 32px rgba(0,0,0,0.15);
    will-change: transform; /* 🚀 提前告知 GPU 这个元素会位移 */
}
.mistake-overlay.active .mistake-sheet { transform: translateX(0) translateZ(0); }
.mc-header { padding: 32px 24px 24px; background: #fff; border-bottom: 2px solid var(--gray); display: flex; justify-content: space-between; align-items: flex-start; flex-shrink: 0; }
.mc-close { width: 40px; height: 40px; background: #f1f5f9; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #64748b; font-weight: bold; cursor: pointer; font-size: 16px; transition: 0.2s; }
.mc-close:active { transform: scale(0.9); background: #e2e8f0; }
.mc-body { padding: 24px; flex: 1; overflow-y: auto; }

.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mc-card {
    background: #fff; border: 2px solid #e2e8f0; border-radius: 16px; padding: 24px 16px;
    text-align: center; cursor: pointer; transition: 0.2s; position: relative; overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.03);
}
.mc-card:active { transform: scale(0.96); box-shadow: none; border-color: var(--blue); }
.mc-card.empty { filter: grayscale(1); opacity: 0.5; cursor: not-allowed; border-color: #e2e8f0 !important; }
.mc-card.empty:active { transform: none; box-shadow: 0 4px 8px rgba(0,0,0,0.03); }

.mc-icon { font-size: 40px; margin-bottom: 16px; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1)); }
.mc-title { font-weight: 900; color: #334155; font-size: 16px; margin-bottom: 8px; }
.mc-count { font-size: 12px; font-weight: 900; color: var(--red); background: var(--red-light); padding: 4px 12px; border-radius: 12px; display: inline-block; }
.mc-card.empty .mc-count { color: #64748b; background: #f1f5f9; }

/* =========================================
   模块深度体检卡片 & 结算弹窗
   ========================================= */
.dd-card { background: #fff; border: 2px solid var(--gray); border-radius: 16px; padding: 24px; margin-bottom: 16px; position: relative; box-shadow: 0 4px 0 rgba(0,0,0,0.02); transition: 0.2s; }
.dd-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.05); }
.dd-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dd-title { font-weight: 900; font-size: 18px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.dd-score { font-size: 24px; font-weight: 900; }
.dd-score.good { color: var(--primary-dark); } .dd-score.mid { color: var(--blue); } .dd-score.bad { color: var(--red); }
.dd-bar-bg { width: 100%; height: 12px; background: var(--gray); border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
.dd-bar-fill { height: 100%; border-radius: 6px; transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.dd-bar-fill.good { background: var(--primary); } .dd-bar-fill.mid { background: var(--blue); } .dd-bar-fill.bad { background: var(--red); }
.dd-footer { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-light); font-weight: bold; }
.dd-tag { padding: 4px 12px; border-radius: 8px; font-weight: 900; font-size: 12px; letter-spacing: 0.5px; }
.dd-tag.good { background: var(--primary-light); color: var(--primary-dark); } .dd-tag.mid { background: var(--blue-light); color: var(--blue-dark); } .dd-tag.bad { background: var(--red-light); color: var(--red); }

.victory-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(0,0,0,0.75); 
    z-index: 10000000; display: flex; justify-content: center; align-items: center; 
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease; 
    will-change: opacity;
}
.victory-overlay.active { opacity: 1; visibility: visible; }

.victory-content { 
    width: 92%; max-width: 424px; background: transparent; 
    /* 🚀 加入 translateZ(0) 开启硬件加速 */
    transform: scale(0.8) translateY(32px) translateZ(0); 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    display: flex; flex-direction: column; gap: 16px; 
    will-change: transform;
}
.victory-overlay.active .victory-content { transform: scale(1) translateY(0) translateZ(0); }
.btn-victory-back { background: var(--primary); color: white; border: none; padding: 24px; border-radius: 24px; font-weight: 900; font-size: 18px; width: 100%; box-shadow: 0 6px 0 var(--primary-dark); cursor: pointer; text-align: center; text-transform: uppercase; }
.btn-victory-back:active { transform: translateY(6px); box-shadow: none; margin-bottom: 6px; }

/* =========================================
   无缝战力进度条
   ========================================= */
.score-change-card { background: #fff; border: 2px solid var(--gray); border-radius: 24px; padding: 24px; margin: 0; width: 100%; box-sizing: border-box; text-align: left; }
.scc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.scc-title { font-weight: 900; color: #334155; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.scc-delta { font-weight: 900; font-size: 20px; padding: 6px 16px; border-radius: 12px; box-shadow: 0 4px 0 rgba(0,0,0,0.1); }
.scc-delta.up { color: #fff; background: var(--primary); box-shadow: 0 4px 0 var(--primary-dark); }
.scc-delta.down { color: #fff; background: var(--red); box-shadow: 0 4px 0 var(--red-dark); }
.scc-bar-bg { width: 100%; height: 24px; background: #e2e8f0; border-radius: 12px; position: relative; overflow: hidden; box-shadow: inset 0 4px 8px rgba(0,0,0,0.05); transform: translateZ(0); }
.scc-bar-base { position: absolute; left: 0; top: 0; height: 100%; background: var(--blue); border-radius: 0; }
.scc-bar-gain { position: absolute; top: 0; height: 100%; background: var(--primary); border-radius: 0; transform-origin: left; transform: scaleX(0); animation: popScaleX 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards; }
.scc-bar-gain::after { content: ''; position: absolute; right: 0; top: 0; width: 12px; height: 100%; background: rgba(255,255,255,0.8); filter: blur(4px); border-radius: 0; }
.scc-bar-loss { position: absolute; top: 0; height: 100%; background: var(--red); border-radius: 0; transform-origin: right; animation: shrinkScaleX 0.8s ease-in 0.4s forwards; }
.scc-tier-labels { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 14px; font-weight: 900; color: #94a3b8; }
@keyframes popScaleX { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes shrinkScaleX { 0% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(0); opacity: 0; } }

body.quiz-active { overflow: hidden !important; touch-action: none !important; }
body.quiz-active .tooltip-box { display: none !important; }

/* =========================================
   模块切换器 (Mobile & PC)
   ========================================= */
.mobile-module-switcher {
    position: relative; 
    margin-top: 16px; z-index: 100; background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--gray); border-radius: 24px; padding: 16px; margin-bottom: 24px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06); cursor: pointer; transition: 0.2s;
}
.mobile-module-switcher:active { transform: scale(0.98); }
@media (min-width: 1024px) { .mobile-module-switcher { display: none; } }

.mc-item {
    display: flex; align-items: center; padding: 16px; border: 2px solid var(--gray); border-radius: 16px; 
    margin-bottom: 16px; background: #fff; cursor: pointer; transition: 0.2s; position: relative; overflow: hidden;
}
.mc-item:hover { border-color: var(--blue-light); background: #f8fafc; transform: translateY(-2px); }
.mc-item:active { transform: scale(0.98); }
.mc-item.active { border-color: var(--blue); background: var(--blue-light); box-shadow: 0 4px 0 var(--blue); }
.mc-item.active::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 8px; background: var(--blue); }
.mc-item-icon { font-size: 32px; margin-right: 16px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.mc-item-info { flex: 1; }
.mc-item-title { font-size: 16px; font-weight: 900; color: var(--text); margin-bottom: 8px; }
.mc-progress-bg { width: 100%; height: 8px; background: var(--gray); border-radius: 4px; overflow: hidden; }
.mc-progress-fill { height: 100%; background: var(--yellow); border-radius: 4px; transition: width 0.5s ease-out; }
.mc-item.active .mc-progress-bg { background: #fff; }
.mc-item-status { font-size: 12px; font-weight: 900; color: var(--text-light); text-align: right; margin-top: 8px; }
.mc-item.active .mc-item-status { color: var(--blue-dark); }

.module-sheet {
    width: 100%; max-height: 85vh; background: #f8fafc; border-radius: 24px 24px 0 0; 
    transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column;
}
#module-sheet-overlay.active { display: flex !important; }
#module-sheet-overlay.active .module-sheet { transform: translateY(0); }
.ms-header { padding: 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--gray); background: #fff; border-radius: 24px 24px 0 0; }
.ms-body { padding: 24px; overflow-y: auto; flex: 1; }

.t-blue { color: #1cb0f6 !important; font-weight: bold; }
.t-red { color: #ff4b4b !important; font-weight: bold; }
.t-orange { color: #ff9600 !important; font-weight: bold; }

/* ========================================== */
/* 📱 移动端终极空间优化补丁 */
/* ========================================== */
@media (max-width: 768px) {
    .mobile-old-topbar, .mobile-module-list-card { display: none !important; }
    
    .mobile-compact-header {
        display: flex; justify-content: space-between; align-items: center;
        height: 56px; padding: 0 16px; background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(0,0,0,0.05);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body.scrolling-down .mobile-compact-header { transform: translateY(-100%); }
    .mch-left {
        display: flex; align-items: center; gap: 8px; background: #f1f5f9; 
        padding: 8px 16px; border-radius: 24px; font-weight: 900; 
        color: #1e293b; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .mch-right { display: flex; align-items: center; gap: 16px; font-weight: 900; font-size: 14px; }
    .mch-stat { display: flex; align-items: center; gap: 4px; color: #4b4b4b; }

    .global-unit-header {
        display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important;
        padding: 16px !important; margin: 0 !important; border-radius: 16px !important; 
        position: sticky !important; top: 16px !important; z-index: 990 !important;
        transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease-out !important;
    }
    .global-unit-header.is-stuck { border-radius: 0 0 16px 16px !important; }
    body.scrolling-down .global-unit-header { top: 0 !important; }
    .global-unit-header .uh-info { display: flex !important; flex-direction: row !important; align-items: center !important; margin: 0 !important; }
    .global-unit-header .uh-phase { margin: 0 8px 0 0 !important; font-size: 13px !important; opacity: 0.9 !important; white-space: nowrap !important; }
    .global-unit-header .uh-title { margin: 0 !important; font-size: 16px !important; font-weight: 900 !important; white-space: nowrap !important; overflow: hidden !important; }
    .global-unit-header .uh-guide-btn { margin: 0 !important; padding: 8px 16px !important; font-size: 14px !important; background: rgba(255,255,255,0.2) !important; border: 1px solid rgba(255,255,255,0.3) !important; }

    .node-row { margin-bottom: 24px !important; } 
}

@media (min-width: 769px) {
    .mobile-compact-header { display: none !important; } 
    .content-area { padding: 0px 24px 104px!important; }
}

/* =========================================
   🎮 游戏化题型组件 (Match, Highlight, Sort, Swipe, Radar, Annotator)
   ========================================= */
.match-game-container { display: flex; gap: 16px; justify-content: space-between; margin-top: 16px; }
.match-col { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.match-card {
    background: #fff; border: 2px solid var(--gray); border-radius: 16px; padding: 16px; 
    font-size: 15px; font-weight: 800; color: var(--text); text-align: center; cursor: pointer; 
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 0 var(--gray); 
    display: flex; align-items: center; justify-content: center; min-height: 48px; user-select: none;
}
.match-card.selected { border-color: var(--blue); background: var(--blue-light); color: var(--blue-dark); transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 0 var(--blue), 0 8px 24px rgba(28,176,246,0.2); }
.match-card.matched { background: var(--primary); border-color: var(--primary-dark); color: #fff; transform: scale(0.9); opacity: 0; pointer-events: none; box-shadow: 0 0 24px rgba(88, 204, 2, 0.6); transition: 0.4s; }
.match-card.error { border-color: var(--red); background: var(--red-light); color: var(--red-dark); box-shadow: 0 4px 0 var(--red); animation: shakeError 0.4s ease-in-out; }
@keyframes shakeError { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

.hl-container { background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 16px; padding: 24px; font-size: 16px; line-height: 2.2; color: #334155; text-align: justify; box-shadow: inset 0 4px 8px rgba(0,0,0,0.02); display: block; }
.hl-chunk { display: inline; cursor: pointer; padding: 4px 4px; margin: 0 2px; border-radius: 8px; background: transparent; border-bottom: 2px dashed #cbd5e1; color: inherit; transition: background 0.2s, color 0.2s; -webkit-box-decoration-break: clone; box-decoration-break: clone; user-select: none; }
.hl-chunk:hover { background: var(--blue-light); color: var(--blue-dark); border-bottom-color: transparent; }
.hl-chunk:active { background: #bae6fd; }
.hl-chunk.found { background: var(--primary); color: #fff; border-bottom-color: transparent; box-shadow: 0 4px 12px rgba(88,204,2,0.3); pointer-events: none; font-weight: 900; }
.hl-chunk.error { background: var(--red-light); color: var(--red-dark); border-bottom-color: transparent; animation: shakeTextError 0.4s ease-in-out; display: inline-block; }
@keyframes shakeTextError { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.hl-progress { display: block; margin-top: 24px; font-size: 14px; color: var(--text-light); font-weight: 900; text-align: right; border-top: 2px dashed #e2e8f0; padding-top: 16px; }

.sort-board { min-height: 80px; border: 2px dashed #cbd5e1; border-radius: 16px; padding: 16px; margin-bottom: 24px; background: #f8fafc; display: flex; flex-direction: column; gap: 8px; transition: 0.3s; }
.sort-board:empty::before { content: '请点击下方句块组合到此处...'; color: #94a3b8; font-weight: bold; font-size: 14px; margin: auto; }
.sort-bank { display: flex; flex-direction: column; gap: 8px; min-height: 104px; }
.sort-block { background: #fff; border: 2px solid var(--gray); border-radius: 12px; padding: 16px; font-size: 15px; color: var(--text); font-weight: bold; box-shadow: 0 4px 0 var(--gray); cursor: pointer; user-select: none; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.1s, box-shadow 0.1s; }
.sort-block:active { transform: translateY(4px); box-shadow: none; }
.sort-board .sort-block { border-color: var(--blue); background: var(--blue-light); color: var(--blue-dark); box-shadow: 0 4px 0 var(--blue); }
.sort-board .sort-block:active { box-shadow: none; }

.swipe-hint-bar { display: flex; justify-content: space-between; align-items: center; color: var(--text-light); font-size: 14px; font-weight: 900; margin: 8px 0 24px; padding: 0 16px; }
.swipe-container { position: relative; width: 100%; height: 400px; perspective: 1200px; display: flex; justify-content: center; align-items: center; }
.swipe-card { position: absolute; width: 280px; height: 384px; background: transparent; cursor: grab; z-index: 10; }
.swipe-card.dragging { cursor: grabbing; }
.swipe-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.swipe-card-inner.flipped { transform: rotateY(180deg); }
.swipe-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 24px; padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 2px solid var(--gray); box-shadow: 0 16px 32px rgba(0,0,0,0.1); }
.swipe-front { background: #fff; color: var(--text); }
.swipe-back { background: #f0f9ff; color: var(--blue-dark); border-color: var(--blue-light); transform: rotateY(180deg); }
.swipe-stamp { position: absolute; top: 32px; font-size: 32px; font-weight: 900; padding: 8px 16px; border-radius: 12px; opacity: 0; z-index: 20; letter-spacing: 2px; pointer-events: none; }
.stamp-nope { left: 24px; color: var(--red); border: 4px solid var(--red); transform: rotate(-15deg); }
.stamp-like { right: 24px; color: var(--primary); border: 4px solid var(--primary); transform: rotate(15deg); }

.radar-container { width: 100%; overflow-x: auto; background: #fff; border-radius: 16px; border: 2px solid var(--gray); box-shadow: 0 4px 16px rgba(0,0,0,0.02); margin-top: 16px; }
.radar-table { width: 100%; border-collapse: collapse; text-align: center; }
.radar-table th { background: #f8fafc; font-weight: 900; color: #475569; padding: 16px 8px; font-size: 14px; border-bottom: 2px solid var(--gray); border-right: 1px solid var(--gray); white-space: nowrap; }
.radar-table th:first-child { text-align: left; padding-left: 16px; }
.radar-table td { padding: 16px 8px; border-bottom: 1px solid var(--gray); border-right: 1px solid var(--gray); color: #334155; font-family: "Courier New", Courier, monospace; font-size: 15px; font-weight: bold; cursor: crosshair; transition: 0.1s; user-select: none; }
.radar-table td:hover { background: var(--blue-light); border-color: var(--blue); }
.radar-table td:active { transform: scale(0.95); }
.radar-cell.found { background: var(--primary); color: #fff; pointer-events: none; box-shadow: inset 0 0 16px rgba(0,0,0,0.2); border-color: var(--primary-dark); }
.radar-cell.error { background: var(--red-light); color: var(--red-dark); border-color: var(--red); animation: shakeError 0.4s ease-in-out; }

.anno-container { background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 16px; padding: 24px; font-size: 16px; line-height: 2.2; color: #334155; text-align: justify; box-shadow: inset 0 4px 8px rgba(0,0,0,0.02); margin-bottom: 24px; user-select: none; }
.anno-chunk { display: inline; cursor: pointer; padding: 4px 4px; margin: 0 2px; border-radius: 8px; background: transparent; transition: background 0.15s, color 0.15s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.anno-toolbar { display: flex; gap: 16px; justify-content: center; margin-bottom: 24px; }
.anno-pen { display: flex; align-items: center; gap: 8px; padding: 8px 24px; background: #fff; border: 2px solid var(--gray); border-radius: 16px; font-weight: 900; font-size: 14px; color: var(--text-light); cursor: pointer; transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 0 var(--gray); user-select: none; }
.anno-pen:active { transform: translateY(4px); box-shadow: none; }
.anno-pen.active { border-color: var(--pen-color); color: var(--pen-color); background: var(--pen-light); box-shadow: 0 4px 0 var(--pen-color); transform: translateY(-4px); }
.anno-pen-tip { width: 16px; height: 16px; border-radius: 50%; background: var(--pen-color); display: flex; align-items: center; justify-content: center; font-size: 12px; }

@media (max-width: 768px) {
    .anno-toolbar { position: fixed; bottom: 112px; right: 16px; flex-direction: column-reverse; gap: 8px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 8px; border-radius: 32px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 1000; border: 1px solid rgba(255,255,255,0.6); margin-bottom: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    .anno-toolbar.collapsed { gap: 0; padding: 8px; background: rgba(255, 255, 255, 0.6); }
    .anno-toolbar.collapsed .anno-pen:not(.active) { opacity: 0; height: 0; width: 0; padding: 0; margin: 0; border: none; pointer-events: none; box-shadow: none; transform: scale(0); }
    .anno-pen { padding: 0; width: 48px; height: 48px; border-radius: 50%; justify-content: center; box-shadow: 0 4px 0 var(--gray); flex-shrink: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; }
    .anno-pen.active { transform: scale(1.05); box-shadow: 0 4px 16px var(--pen-color); }
    .anno-pen:active { transform: scale(0.9); box-shadow: none; }
    .anno-pen-name { display: none; }
    .anno-pen-tip { width: 24px; height: 24px; margin: 0; font-size: 12px; display: flex; justify-content: center; align-items: center; }
    .anno-pen[data-id="eraser"] .anno-pen-tip { background: transparent; }
}

.action-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.action-card { background: #fff; border: 2px solid var(--gray); border-radius: 24px; padding: 24px 16px; text-align: left; cursor: pointer; transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 8px 16px rgba(0,0,0,0.03); position: relative; overflow: hidden; }
.action-card:active { transform: scale(0.96); box-shadow: none; }
.action-card.mistake-theme { border-color: var(--red-light); } .action-card.mistake-theme:hover { border-color: var(--red); background: var(--red-light); } .action-card.mistake-theme .ac-icon { color: var(--red); background: #fee2e2; }
.action-card.memory-theme { border-color: var(--blue-light); } .action-card.memory-theme:hover { border-color: var(--blue); background: var(--blue-light); } .action-card.memory-theme .ac-icon { color: var(--blue); background: #e0f2fe; }
.ac-icon { width: 48px; height: 48px; border-radius: 16px; font-size: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.ac-title { font-size: 16px; font-weight: 900; color: var(--text); margin-bottom: 8px; }
.ac-subtitle { font-size: 12px; font-weight: bold; color: var(--text-light); line-height: 1.5; }
.ac-highlight { font-weight: 900; } .mistake-theme .ac-highlight { color: var(--red); } .memory-theme .ac-highlight { color: var(--primary); }

.bubble-arena { width: 100%; height: 50vh; min-height: 400px; position: relative; background: #f8fafc; background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px); background-size: 24px 24px; border-radius: 24px; overflow: hidden; border: 2px solid #e2e8f0; touch-action: none; }
.bubble-node { display: inline-flex; justify-content: center; align-items: center; padding: 8px 24px; border-radius: 32px; font-weight: 900; font-size: 15px; cursor: grab; user-select: none; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.15); white-space: nowrap; position: relative; transition: background 0.3s; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.bubble-node.is-root { position: absolute; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.bubble-node.is-child { color: #fff; margin: 8px; z-index: 11; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.bubble-node.is-container { flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; padding: 48px 16px 16px 16px; min-width: 160px; min-height: 120px; border-radius: 24px; background: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 3px dashed; color: #334155; text-shadow: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); }
.bubble-node.is-container > .bubble-label { position: absolute; top: 16px; left: 16px; font-size: 16px; font-weight: 900; opacity: 0.9; text-shadow: none; }
.bubble-ghost { position: fixed; z-index: 999999; pointer-events: none; transform: scale(1.15); box-shadow: 0 24px 48px rgba(0,0,0,0.3); opacity: 0.9; margin: 0 !important; cursor: grabbing; font-weight: 900; font-size: 15px; border-radius: 32px; display: flex; justify-content: center; align-items: center; }

/* 🌟 考蛙蛙专属 3D 荷叶按钮 CSS (手感优化 + 防裁切) */
.lily-pad-btn {
    width: 115px;    /* 🚀 修复点：微调外框比例，匹配新 viewBox 安全边距 */
    height: 110px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高光蓝框 */
}

/* 🌟 SVG 基础状态：加入 all 属性让滤镜和变换都拥有丝滑过渡 */
.lily-pad-btn svg {
    width: 100%; height: 100%; 
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* 带有轻微 Q 弹回弹感的贝塞尔曲线 */
    filter: drop-shadow(0 6px 6px rgba(20, 43, 8, 0.15)) brightness(1);
    overflow: visible; /* 🚀 修复点：额外保险，允许内容溢出安全画板时不裁切 */
}

/* 🌟 新增：鼠标悬浮 (Hover) 效果 —— 物理上浮、微缩放、提亮、阴影扩散 */
.lily-pad-btn:hover svg {
    transform: translateY(-3px) scale(1.03);
    filter: drop-shadow(0 12px 12px rgba(20, 43, 8, 0.2)) brightness(1.08);
}

/* 极致的按压物理反馈 (Active 状态覆盖 Hover) */
.lily-pad-btn:active svg { 
    transform: translateY(6px) scale(0.98); 
    filter: drop-shadow(0 2px 3px rgba(20, 43, 8, 0.2)) brightness(0.95); /* 按下时变暗一点 */
    transition: all 0.1s ease-out; /* 按下时的动画要非常干脆迅速 */
}

/* =========================================
   ⚖️ 快速判断题引擎 (Judge)
   ========================================= */
.judge-actions { display: flex; gap: 16px; justify-content: center; margin-top: 30px; }
.judge-btn { 
    flex: 1; max-width: 160px; background: #fff; border: 2px solid var(--gray); 
    border-radius: 24px; padding: 24px 10px; cursor: pointer; 
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 8px 0 var(--gray); display: flex; flex-direction: column; 
    align-items: center; gap: 12px; -webkit-tap-highlight-color: transparent; 
    user-select: none;
}
.judge-btn:active { transform: translateY(8px); box-shadow: none; margin-top: 8px; margin-bottom: -8px;}
.judge-btn .icon { font-size: 48px; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1)); transition: 0.2s; }
.judge-btn .text { font-size: 18px; font-weight: 900; color: var(--text-light); transition: 0.2s; }

/* 选中状态：正确按钮 */
.judge-btn.true-btn.selected { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 8px 0 var(--primary-dark); }
.judge-btn.true-btn.selected .text { color: var(--primary-dark); }
.judge-btn.true-btn.selected .icon { transform: scale(1.1); }

/* 选中状态：错误按钮 */
.judge-btn.false-btn.selected { border-color: var(--red); background: var(--red-light); box-shadow: 0 8px 0 var(--red-dark); }
.judge-btn.false-btn.selected .text { color: var(--red-dark); }
.judge-btn.false-btn.selected .icon { transform: scale(1.1); }

/* =========================================
   🎯 每日任务专属 UI 样式 (多邻国风格)
   ========================================= */
.quest-widget {
    background: #ffffff; border: 2px solid #e5e5e5; border-radius: 20px;
    padding: 20px; margin-bottom: 20px; max-width: 400px;
}
.quest-widget-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
}
.quest-widget-title { font-size: 18px; font-weight: 900; color: #4b4b4b; }
.quest-widget-time { font-size: 14px; font-weight: bold; color: #1cb0f6; }

.quest-item { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.quest-item:last-child { margin-bottom: 0; }
.quest-icon { font-size: 32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }

.quest-info { flex: 1; }
.quest-name { font-size: 15px; font-weight: 900; color: #4b4b4b; margin-bottom: 8px; }
.quest-bar-bg {
    background: #e5e5e5; height: 16px; border-radius: 8px; position: relative;
    display: flex; align-items: center;
}
.quest-bar-fill {
    background: #ffc800; height: 100%; border-radius: 8px;
    transition: width 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.quest-progress-text {
    position: absolute; width: 100%; text-align: center;
    font-size: 11px; font-weight: 900; color: rgba(0,0,0,0.3); z-index: 2;
}

/* 宝箱按钮 */
.quest-chest {
    width: 36px; height: 32px; border-radius: 8px; background: #e5e5e5;
    display: flex; justify-content: center; align-items: center;
    font-size: 18px; cursor: pointer; transition: 0.2s; flex-shrink: 0; margin-left: 10px;
}
/* 状态：完成但未领取 */
.quest-chest.ready {
    background: #ffc800; color: #fff; box-shadow: 0 4px 0 #cc7800;
    animation: bounceChest 1s infinite alternate;
}
/* 状态：已领取 */
.quest-chest.claimed {
    background: #f0f9ff; border: 2px solid #bae6fd; font-size: 20px; cursor: default; box-shadow: none;
}
@keyframes bounceChest {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}
.start-bubble{
    z-index: 102;
}
.start-bubble.is-bottom {z-index: 102;}

/* ==========================================
   🐸 考蛙蛙专属学习卡模组 (Study Card UI V2 动态版)
   ========================================== */
.sc-wrap { padding: 5px; }
.sc-header { text-align: center; margin-bottom: 30px; }
.sc-frog-icon { font-size: 65px; margin-bottom: 10px; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.15)); }
.sc-title { color: #1e293b; margin: 0; font-size: 22px; font-weight: 900; }
.sc-title-hl { color: #1cb0f6; font-size: 28px; line-height: 1.5; }

/* 🟢 步骤列表积木 */
.sc-step-box { margin-bottom: 30px; }
.sc-step-item { margin-bottom: 20px; }
.sc-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sc-step-num { background: #1cb0f6; color: white; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; box-shadow: 0 3px 0 #189eda; flex-shrink: 0;}
.sc-step-title { color: #0284c7; font-size: 18px; font-weight: bold; }
.sc-step-desc { color: #475569; font-size: 15px; line-height: 1.7; font-weight: bold; padding-left: 36px; }

/* 内联文本高亮 */
.sc-hl-bad { color: #ef4444; background: #fee2e2; padding: 2px 8px; border-radius: 6px; margin: 0 4px; }
.sc-hl-good { color: #58cc02; background: #dcfce7; padding: 2px 8px; border-radius: 6px; margin: 0 4px; }
.sc-hl-neutral { color: #1cb0f6; background: #e0f2fe; padding: 2px 8px; border-radius: 6px; margin: 0 4px; }
.sc-strike { text-decoration: line-through; color: #94a3b8; margin-left: 4px; }

/* 🔴 警报框积木 */
.sc-alert-box { background: #fef2f2; border: 2px dashed #ef4444; border-radius: 16px; padding: 20px; margin-bottom: 20px;}
.sc-alert-title { color: #dc2626; font-weight: 900; font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.sc-alert-desc { color: #991b1b; font-size: 14px; line-height: 1.6; font-weight: 800; }

/* 🔵 提示框积木 (温和拓展) */
.sc-tip-box { background: #f0f9ff; border: 2px solid #bae6fd; border-radius: 16px; padding: 20px; margin-bottom: 20px;}
.sc-tip-title { color: #0284c7; font-weight: 900; font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.sc-tip-desc { color: #0f172a; font-size: 14px; line-height: 1.6; font-weight: 800; }

/* ⚔️ VS 对比列表 */
.sc-vs-group { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; }
.sc-vs-row { background: #fff; padding: 12px 15px; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.02);}
.sc-vs-text { font-size: 15px; font-weight: bold; flex: 1; display: flex; align-items: center; gap: 4px;}
.sc-vs-tag { font-size: 12px; font-weight: normal; margin-left: 2px; }
.sc-vs-badge { color: #94a3b8; font-weight: 900; font-size: 12px; margin: 0 10px; background: #f1f5f9; padding: 2px 6px; border-radius: 6px; }

/* 📝 无序打点列表 */
.sc-bullet-group { margin-top: 15px; display: flex; flex-direction: column; gap: 8px; }
.sc-bullet-row { display: flex; align-items: flex-start; gap: 8px; background: #fff; padding: 10px 15px; border-radius: 12px; border: 1px solid #e2e8f0; }
.sc-bullet-icon { font-size: 14px; margin-top: 2px; }
.sc-bullet-text { font-size: 14px; font-weight: bold; color: #334155; line-height: 1.5; }

/* ==========================================
   👑 特权陈列室专属特效
   ========================================== */
@keyframes equipFloat {
    0%, 100% { transform: translateY(0px) scale(1); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); }
    50% { transform: translateY(-4px) scale(1.05); filter: drop-shadow(0 8px 15px rgba(28, 176, 246, 0.3)); }
}

.equip-item {
    flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; 
    padding: 12px 2px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.equip-item.active {
    background: #f0fdf4; border-color: #86efac;
}

.equip-icon {
    font-size: 28px; margin-bottom: 6px; transition: 0.3s;
}

/* 激活状态：解除封印，彩色悬浮发光 */
.equip-item.active .equip-icon {
    animation: equipFloat 3s ease-in-out infinite;
}

/* 未解锁状态：纯灰黑影 */
.equip-item.locked .equip-icon {
    opacity: 0.3; filter: grayscale(100%);
}

/* 已休眠状态 (断签冻结)：彩色但蒙尘变暗 */
.equip-item.frozen .equip-icon {
    opacity: 0.7; filter: grayscale(50%) brightness(0.8);
}

/* ==========================================
   🖼️ 全站雪碧图引擎 (Sprite Engine - 终极防抖版)
   ========================================== */

/* 1. 画框（容器层）：锁定外壳尺寸，确保外部排版绝不跳动 */
.sprite-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    position: relative; /* 为内部的“画芯”提供居中基准 */
}

/* 2. 定义各种场景的“画框尺寸”与“画芯缩放率” */
.icon-size-24 { width: 24px; height: 24px; --icon-scale: 0.20; }
.icon-size-48 { width: 48px; height: 48px; --icon-scale: 0.30; }
.icon-size-64 {width: 137px;height: 78px;--icon-scale: 0.5;}
.equip-icon .icon-size-64 {width: 48px; height: 48px;--icon-scale: 0.3;}

/* 3. 画芯（伪元素层）：装载雪碧大图，绝对居中并丝滑缩放 */
.sprite-icon::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    /* 核心魔法：先用 translate(-50%, -50%) 绝对居中，再进行独立缩放 */
    transform: translate(-50%, -50%) scale(var(--icon-scale, 0.15));
    background-image: url('https://kaowawa-1410724551.cos.ap-beijing.myqcloud.com/frog_images/css_sprites.webp');
    background-repeat: no-repeat;
    image-rendering: -webkit-optimize-contrast;
    pointer-events: none; /* 防止虚拟层遮挡点击事件 */
}

/* 4. 具体图标坐标分配（全部挂载在 ::before 伪元素上） */

/* --- 💎 核心资产 --- */
.icon-asset-heart::before { background-position: -813px -438px; width: 169px; height: 127px; }
.icon-asset-gem::before { background-position: -1022px -439px; width: 157px; height: 127px; }
.icon-asset-xp::before { background-position: -632px -439px; width: 141px; height: 126px; }
.icon-asset-streak::before { background-position: -624px -839px; width: 152px; height: 129px; }
/* --- 📱 底部导航 --- */
.icon-nav-study::before { background-position: -434px -13px; width: 131px; height: 175px; }
.icon-nav-practice::before { background-position: -14px -223px; width: 172px; height: 154px; }
.icon-nav-common::before { background-position: -203px -1218px; width: 185px; height: 168px; }
.icon-nav-stats::before { background-position: -609px -12px; width: 182px; height: 181px; }
.icon-nav-shop::before { background-position: -211px -226px; width: 177px; height: 150px; }
.icon-nav-profile::before { background-position: -408px -226px; width: 184px; height: 143px; }

/* --- 📚 学习模块 --- */
.icon-mod-verbal::before { background-position: -22px -836px; width: 155px; height: 129px; }
.icon-mod-logic::before { background-position: -12px -428px; width: 176px; height: 144px; }
.icon-mod-data::before { background-position: -1025px -15px; width: 149px; height: 159px; }
.icon-mod-math::before { background-position: -1022px -232px; width: 155px; height: 136px; }
.icon-mod-shenlun::before { background-position: -21px -631px; width: 158px; height: 146px; }
.icon-mod-politics::before { background-position: -1383px -1015px; width: 173px; height: 165px; }

/* --- 🛡️ 商店与特权 --- */
.icon-equip-watch::before { background-position: -216px -10px; width: 168px; height: 181px; }
.icon-equip-amulet::before { background-position: -1221px -432px; width: 147px; height: 127px; }
.icon-equip-heart::before { background-position: -813px -438px; width: 169px; height: 127px; }
.icon-equip-crown::before { background-position: -617px -229px; width: 171px; height: 136px; }
.icon-perk-freeze::before { background-position: -370px -503px; width: 148px; height: 153px; }
.icon-perk-infinity::before { background-position: -1330px -109px; width: 172px; height: 165px; }

.icon-perk-lock::before { background-position: -1227px -635px; width: 142px; height: 132px; }
.icon-perk-cup::before { background-position: -1214px -17px; width: 171px; height: 165px; }
.icon-perk-amd::before { background-position: -229px -832px; width: 141px; height: 124px; }
.icon-perk-clock::before { background-position: -14px -10px; width: 172px; height: 183px; }
.icon-perk-card::before { background-position: -29px -1035px; width: 141px; height: 131px; }
.icon-perk-ok::before { background-position: -226px -436px; width: 148px; height: 140px; }
.icon-perk-box::before { background-position: -1417px -444px; width: 126px; height: 112px; }

.icon-quest-perfect::before { background-position: -829px -237px; width: 150px; height: 128px; }
.icon-quest-mistake::before { background-position: -433px -441px; width: 145px; height: 128px; }
.icon-quest-lesson::before { background-position: -1032px -625px; width: 133px; height: 139px; }
.icon-quest-renwu::before { background-position: -1414px -250px; width: 131px; height: 99px; }
.icon-quest-frog::before { background-position: -1404px -44px; width: 148px; height: 112px; }
.icon-quest-no1::before { background-position: -233px -630px; width: 134px; height: 136px; }
.icon-quest-no2::before { background-position: -432px -625px; width: 141px; height: 139px; }
.icon-quest-no3::before { background-position: -636px -628px; width: 128px; height: 136px; }
.icon-quest-no4::before { background-position: -839px -629px; width: 128px; height: 135px; }
.icon-quest-tree::before { background-position: -1417px -646px; width: 129px; height: 107px; }
.icon-quest-au::before { background-position: -831px -849px; width: 129px; height: 108px; }
.icon-quest-ag::before { background-position: -1030px -850px; width: 129px; height: 107px; }
.icon-quest-cu::before { background-position: -1239px -845px; width: 129px; height: 107px; }
.icon-quest-star::before { background-position: -1434px -846px; width: 105px; height: 104px; }
.icon-quest-dun::before { background-position: -228px -1046px; width: 148px; height: 131px; }
.icon-quest-saozhou::before { background-position: -428px -1047px; width: 143px; height: 108px; }
.icon-quest-book::before { background-position: -627px -1046px; width: 145px; height: 110px; }
.icon-quest-saozhou::before { background-position: -428px -1047px; width: 143px; height: 108px; }
.icon-quest-shuzhi::before { background-position: -834px -1047px; width: 148px; height: 104px; }
.icon-quest-house::before { background-position: -1033px -1047px; width: 134px; height: 98px; }
.icon-quest-shuijingqiu::before { background-position: -1243px -1044px; width: 113px; height: 105px; }
.icon-quest-house::before { background-position: -1033px -1047px; width: 134px; height: 98px; }
.icon-quest-ship::before { background-position: -39px -1238px; width: 122px; height: 119px; }
.icon-quest-bigtree::before { background-position: -435px -1236px; width: 130px; height: 109px; }
.icon-quest-lock2::before { background-position: -633px -1237px; width: 134px; height: 132px; }
.icon-quest-hua::before { background-position: -832px -1256px; width: 130px; height: 92px; }
.icon-quest-book2::before { background-position: -1033px -1250px; width: 134px; height: 108px; }
.icon-quest-house::before { background-position: -1237px -1251px; width: 126px; height: 106px; }
.icon-quest-light::before { background-position: -1217px -229px; width: 165px; height: 142px; }
.icon-quest-moon::before { background-position: -1400px -1243px; width: 131px; height: 125px; }
.icon-quest-5::before { background-position: -29px -1442px; width: 142px; height: 115px; }
.icon-quest-rocket::before { background-position: -236px -1438px; width: 128px; height: 129px; }
.icon-quest-eye::before { background-position: -416px -1454px; width: 168px; height: 90px; }
.icon-quest-tam::before { background-position: -611px -1443px; width: 177px; height: 123px; }
.icon-quest-good::before { background-position: -836px -1446px; width: 124px; height: 122px; }
.icon-quest-hb::before { background-position: -1044px -1434px; width: 99px; height: 131px; }
.icon-quest-breakheart::before { background-position: -1234px -1450px; width: 132px; height: 106px; }
.icon-quest-word::before { background-position: -1407px -1436px; width: 134px; height: 128px; }
/* =========================================================
   响应式三段式 / 两段式 / 右下角工具面板重构补丁
   ========================================================= */
:root {
    --tablet-nav-width: 96px;
    --desktop-nav-width: 248px;
    --desktop-main-width: minmax(680px, 860px);
    --desktop-right-width: minmax(320px, 392px);
    --layout-gap: 24px;
    --fab-size: 58px;
    --fab-gap: 12px;
}

.content-area {
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.view-section {
    max-width: 720px;
    margin: 0 auto;
}

.global-unit-header,
.unit-divider {
    max-width: 720px;
}

.sidebar-slot {
    width: 100%;
}

.site-footer {
    padding: 16px 16px 112px;
    text-align: center;
    color: var(--text-light);
    font-size: 12px;
    font-weight: 800;
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.tool-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.22);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 1400;
}

.tool-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.tool-fab-stack {
    position: fixed;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column-reverse;
    gap: var(--fab-gap);
    z-index: 1450;
}

.tool-fab {
    width: var(--fab-size);
    height: var(--fab-size);
    border: 2px solid #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
    cursor: pointer;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tool-fab:hover,
.tool-fab.is-active {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.2);
}

.tool-fab-stats { background: linear-gradient(135deg, #fff6d9, #ffe08a); }
.tool-fab-module { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
.tool-fab-quest { background: linear-gradient(135deg, #f5f3ff, #ddd6fe); }
.tool-fab-diligence { background: linear-gradient(135deg, #ecfccb, #bbf7d0); }

.tool-panel {
    position: fixed;
    right: 16px;
    bottom: calc(160px + env(safe-area-inset-bottom));
    width: min(380px, calc(100vw - 24px));
    max-height: min(72vh, 640px);
    background: rgba(255,255,255,0.98);
    border: 2px solid var(--gray);
    border-radius: 24px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    transform: translateY(12px) scale(0.96);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s ease;
    z-index: 1500;
}

.tool-panel.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

.tool-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 2px solid var(--gray);
    background: #fff;
}

.tool-panel-title {
    font-size: 17px;
    font-weight: 900;
    color: var(--text);
}

.tool-panel-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
}

.tool-panel-body {
    padding: 16px;
    overflow: auto;
    max-height: calc(min(72vh, 640px) - 72px);
}

.tool-panel-body .stats-row,
.tool-panel-body #pc-module-selector,
.tool-panel-body #diligence-component,
.tool-panel-body #quest-widget {
    margin-bottom: 0;
}

.tool-panel-body .quest-widget {
    max-width: none;
    padding: 16px;
}

.tool-panel-body #diligence-component,
.tool-panel-body #pc-module-selector {
    border: none;
    padding: 0;
    background: transparent;
}

.tool-panel-body .stats-row {
    margin-bottom: 0;
    justify-content: space-between;
}

.tool-panel-body .stats-row .stat-pill {
    font-size: 18px;
}

body.tool-panel-open {
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .tool-fab.hide-on-small {
        display: none;
    }

    .tool-fab-stack {
        right: 12px;
        bottom: calc(84px + env(safe-area-inset-bottom));
    }

    .tool-fab {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 22px;
    }

    .tool-panel {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: calc(150px + env(safe-area-inset-bottom));
        max-height: 62vh;
    }

    .tool-panel-body {
        max-height: calc(62vh - 72px);
    }

    .global-unit-header {
        top: 12px !important;
        padding: 14px 16px !important;
    }

    .global-unit-header .uh-title {
        font-size: 15px !important;
    }

    .global-unit-header .uh-guide-btn {
        padding: 8px 12px !important;
        flex-shrink: 0;
    }
}

@media (min-width: 768px) {
    .mobile-compact-header {
        display: none !important;
    }

    .app-layout {
        display: grid;
        grid-template-columns: var(--tablet-nav-width) minmax(0, 1fr);
        align-items: start;
        min-height: 100vh;
    }

    .main-nav {
        position: sticky;
        top: 0;
        left: 0;
        width: auto;
        height: 100vh;
        border-top: none;
        border-right: 2px solid var(--gray);
        flex-direction: column;
        justify-content: flex-start;
        padding: 20px 12px;
        background: #fff;
    }

    .nav-logo {
        display: flex;
        width: 100%;
        margin-bottom: 20px;
        padding: 0;
        justify-content: center;
    }

    .nav-logo img {
        width: 64px;
        height: auto;
        margin: 0 auto;
    }

    .nav-item {
        flex: none;
        width: 64px;
        height: 64px;
        margin: 0 auto 12px;
        border-radius: 18px;
    }

    .nav-item.active {
        background: var(--blue-light);
        border: 2px solid var(--blue);
    }

    .nav-text {
        display: none;
    }

    .content-area {
        padding: 24px 28px 48px !important;
        justify-content: flex-start;
    }

    .view-section {
        max-width: 780px;
    }

    .global-unit-header,
    .unit-divider {
        max-width: 780px;
    }

    .right-sidebar {
        display: none !important;
    }

    .tool-fab-stack {
        right: 20px;
        bottom: 20px;
    }

    .tool-panel {
        right: 20px;
        bottom: 94px;
    }

    .site-footer {
        padding: 20px 24px 28px calc(var(--tablet-nav-width) + 24px);
        text-align: left;
    }
}

@media (min-width: 1280px) {
    .app-layout {
        grid-template-columns: var(--desktop-nav-width) minmax(680px, 860px) minmax(320px, 392px);
        gap: var(--layout-gap);
        padding-right: 24px;
    }

    .main-nav {
        padding: 24px 18px;
    }

    .nav-logo {
        margin-bottom: 28px;
    }

    .nav-logo img {
        width: 150px;
    }

    .nav-item {
        width: 100%;
        height: 52px;
        flex-direction: row;
        justify-content: flex-start;
        padding: 0 18px;
        margin-bottom: 10px;
        border-radius: 16px;
        box-sizing: border-box;
    }

    .nav-item i {
        margin-right: 14px;
    }

    .nav-text {
        display: block;
        margin-top: 0;
        font-size: 18px;
        letter-spacing: 4px;
    }

    .content-area {
        width: auto;
        padding: 28px 0 56px !important;
    }

    .view-section,
    .global-unit-header,
    .unit-divider {
        max-width: none;
    }

    .right-sidebar {
        display: block !important;
        width: auto;
        padding: 28px 0 56px;
        position: sticky;
        top: 0;
        align-self: start;
        overflow: visible;
        max-height: none;
    }

    .tool-fab-stack,
    .tool-panel,
    .tool-backdrop {
        display: none !important;
    }

    .site-footer {
        padding-left: calc(var(--desktop-nav-width) + 24px);
        padding-right: 24px;
    }
}


/* =========================================================
   V2 布局修正：让 main 始终是视觉重心
   ========================================================= */
:root {
    --tablet-nav-width: 104px;
    --desktop-nav-width: 220px;
    --desktop-right-width: 300px;
    --main-max-tablet: 920px;
    --main-max-desktop: 920px;
}

.main-nav,
.nav-item,
.content-area,
.right-sidebar {
    box-sizing: border-box;
}

.nav-item {
    max-width: 100%;
}

@media (min-width: 768px) {
    .app-layout {
        display: grid;
        grid-template-columns: var(--tablet-nav-width) minmax(0, 1fr);
        gap: 0;
        padding-right: 0 !important;
        align-items: start;
    }

    .main-nav {
        width: 100%;
        min-width: 0;
        padding: 20px 10px;
        overflow: hidden;
    }

    .nav-item {
        width: 72px;
        height: 72px;
        margin: 0 auto 12px;
        padding: 0;
    }

    .content-area {
        width: min(100%, var(--main-max-tablet)) !important;
        max-width: var(--main-max-tablet);
        min-width: 0;
        margin: 0 auto !important;
        padding: 24px 24px 56px !important;
        justify-self: center;
        justify-content: flex-start;
        align-items: stretch;
    }

    .view-section,
    .global-unit-header,
    .unit-divider {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .nodes-wrapper {
        width: 100%;
    }

    .right-sidebar {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .app-layout {
        grid-template-columns: var(--desktop-nav-width) minmax(0, 1fr) var(--desktop-right-width);
        gap: 24px;
        padding-right: 0 !important;
        justify-content: stretch;
    }

    .main-nav {
        width: 100%;
        padding: 24px 16px;
    }

    .nav-logo img {
        width: 150px;
    }

    .nav-item {
        width: 100%;
        height: 52px;
        margin: 0 0 10px;
        padding: 0 18px;
        flex-direction: row;
        justify-content: flex-start;
        border-radius: 16px;
    }

    .nav-item i {
        margin-right: 14px;
    }

    .nav-text {
        display: block;
        margin-top: 0;
        font-size: 18px;
        letter-spacing: 4px;
    }

    .content-area {
        width: min(100%, var(--main-max-desktop)) !important;
        max-width: var(--main-max-desktop);
        margin: 0 auto !important;
        padding: 28px 0 56px !important;
        justify-self: center;
    }

    .right-sidebar {
        display: block !important;
        width: 100%;
        max-width: var(--desktop-right-width);
        min-width: 0;
        padding: 28px 0 56px;
        position: sticky;
        top: 0;
        align-self: start;
        overflow: visible;
        max-height: none;
    }

    .tool-fab-stack,
    .tool-panel,
    .tool-backdrop {
        display: none !important;
    }

    .site-footer {
        padding-left: calc(var(--desktop-nav-width) + 24px);
        padding-right: 24px;
    }
}

@media (min-width: 1440px) {
    :root {
        --desktop-right-width: 320px;
        --main-max-desktop: 960px;
    }
}


/* =========================================================
   V3 布局微调：中屏左栏居中 + 中屏资产下沉 + 大屏右栏贴近 main
   ========================================================= */
:root {
    --tablet-nav-width: 108px;
    --desktop-nav-width: 236px;
    --desktop-right-width: 300px;
    --desktop-main-width: clamp(700px, calc(100vw - var(--desktop-nav-width) - var(--desktop-right-width) - 32px), 920px);
}

.nav-stats-slot {
    display: none;
}

.tool-fab-stats {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 1279.98px) {
    .app-layout {
        grid-template-columns: var(--tablet-nav-width) minmax(0, 1fr) !important;
        gap: 0 !important;
    }

    .main-nav {
        width: 100% !important;
        padding: 18px 8px 20px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .nav-logo {
        width: 100%;
        justify-content: center;
        display: flex;
        margin-bottom: 18px;
        padding: 0;
    }

    .nav-logo img {
        width: 95px !important;
        margin: 0 auto !important;
    }

    .nav-item {
        width: 72px !important;
        min-width: 72px;
        height: 72px !important;
        padding: 0 !important;
        margin: 0 auto 12px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .nav-item i {
        margin-right: 0 !important;
    }

    .nav-item .nav-text {
        display: none !important;
    }

    .nav-stats-slot {
        display: block;
        width: 100%;
        margin-top: auto;
        padding: 10px 6px 0;
        box-sizing: border-box;
    }

    .nav-stats-slot .stats-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        margin: 0;
        padding: 0;
    }

    .nav-stats-slot .stat-pill {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 6px 4px;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 14px;
        box-sizing: border-box;
        min-height: 36px;
    }

    .nav-stats-slot .stat-pill .sprite-icon,
    .nav-stats-slot .stat-pill img,
    .nav-stats-slot .stat-pill span.icon {
        margin-right: 6px;
    }

    .content-area {
        width: min(100%, 930px) !important;
        max-width: 930px !important;
        min-width: 0;
        margin: 0 auto !important;
        padding: 24px 28px 56px !important;
        justify-self: center;
    }

    .tool-fab-stack {
        right: 20px;
        bottom: 20px;
    }
}

@media (min-width: 1280px) {
    .app-layout {
        grid-template-columns: var(--desktop-nav-width) var(--desktop-main-width) var(--desktop-right-width) !important;
        gap: 0 !important;
        justify-content: center;
        align-items: start;
        padding-right: 0 !important;
    }

    .main-nav {
        width: 100% !important;
        padding: 24px 16px !important;
        align-items: stretch;
        margin-right: 24px;
        box-sizing: border-box;
    }

    .nav-stats-slot {
        display: none !important;
    }

    .content-area {
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        margin: 0 !important;
        padding: 28px 0 56px !important;
        justify-self: stretch;
    }

    .right-sidebar {
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        margin: 0 !important;
        padding: 28px 0 56px !important;
        justify-self: stretch;
        position: sticky;
        top: 0;
    }

    .sidebar-slot {
        width: 100%;
    }

    .sidebar-slot + .sidebar-slot {
        margin-top: 16px;
    }
}

/* =========================================================
   V5 精确修正：
   1) >=1280 左侧栏贴浏览器左侧，但与 main 保留原有间距
   2) 768-1279 左侧图标严格居中
   3) 768-1279 左侧底部资产纯展示，无边框无白底
   ========================================================= */

@media (min-width: 768px) and (max-width: 1279.98px) {
    .main-nav {
        padding: 18px 0 16px !important;
        display: grid !important;
        grid-auto-rows: max-content;
        justify-items: center !important;
        align-content: start !important;
        box-sizing: border-box;
    }

    .nav-logo,
    .nav-item,
    .nav-stats-slot {
        justify-self: center;
    }

    .nav-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .nav-stats-slot {
        width: calc(100% - 12px);
        padding: 10px 0 0 !important;
        margin-top: auto;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .nav-stats-slot .stats-row,
    .nav-stats-slot .stat-pill,
    .nav-stats-slot .tooltip-container {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .nav-stats-slot .stats-row {
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }

    .nav-stats-slot .stat-pill {
        padding: 4px 0 !important;
        min-height: 0 !important;
    }
}

@media (min-width: 1280px) {
    .app-layout {
        width: 100% !important;
        max-width: none !important;
        justify-content: start !important;
        grid-template-columns: var(--desktop-nav-width) minmax(0, var(--desktop-main-width)) var(--desktop-right-width) !important;
        column-gap: 16px !important;
        row-gap: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .main-nav {
        margin-right: 0 !important;
        justify-self: stretch;
        align-self: start;
    }

    .content-area {
        margin-left: 8px !important;
        margin-right: 0 !important;
    }

    .right-sidebar {
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-self: start !important;
        align-self: start;
    }
}


/* =========================================================
   V6 仅按用户要求微调：
   1) >=1280 左侧栏贴浏览器左侧，main 保持原位，右侧栏贴近 main
   2) 768-1279 红心/宝石/连胜固定到左下角纯展示，且隐藏右下角火焰按钮
   ========================================================= */

@media (min-width: 768px) and (max-width: 1279.98px) {
    .main-nav {
        min-height: 100vh !important;
        height: 100vh !important;
        padding: 18px 0 24px !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .nav-logo,
    .nav-item,
    .nav-stats-slot {
        align-self: center !important;
        justify-self: center !important;
    }

    .nav-item {
        margin: 0 auto 12px !important;
    }

    .nav-stats-slot {
        display: block !important;
        width: 100% !important;
        margin-top: auto !important;
        padding: 0 0 24px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .nav-stats-slot .stats-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-stats-slot .stat-pill,
    .nav-stats-slot .tooltip-container {
        width: auto !important;
        min-height: 0 !important;
        padding: 2px 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        justify-content: center !important;
    }

    .tool-fab-stats {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .app-layout {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .main-nav {
        margin-left: 0 !important;
        margin-right: 24px !important;
        justify-self: start !important;
    }

    .right-sidebar {
        margin-left: calc((var(--desktop-main-width) - 640px) / -2) !important;
        padding-left: 0 !important;
        justify-self: start !important;
    }
}


/* =========================================================
   V7 最终定版（只改用户指定的内容）
   1) >=1280: 左侧栏贴浏览器左侧；main 保持中间；右侧栏紧贴 main
   2) 768-1279: 左下角资产固定在左侧栏底部，纯展示，无边框/白底/阴影
   ========================================================= */
@media (min-width: 768px) and (max-width: 1279.98px) {
    .main-nav {
        position: sticky !important;
        top: 0 !important;
        min-height: 100vh !important;
        height: 100vh !important;
        padding: 18px 0 24px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }

    .nav-logo,
    .nav-item {
        align-self: center !important;
        justify-self: center !important;
    }

    .nav-item {
        margin: 0 auto 12px !important;
    }

    .nav-stats-slot {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 24px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .nav-stats-slot .stats-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .nav-stats-slot .stat-pill,
    .nav-stats-slot .tooltip-container,
    .nav-stats-slot .tooltip-box {
        width: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        justify-content: center !important;
    }

    .tool-fab-stats {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .app-layout {
        display: grid !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh !important;
        grid-template-columns: var(--desktop-nav-width) minmax(0, 1fr) minmax(680px, var(--desktop-main-width)) var(--desktop-right-width) minmax(0, 1fr) !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        padding: 0 !important;
        align-items: start !important;
        justify-content: stretch !important;
    }

    .main-nav {
        grid-column: 1 !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: var(--desktop-nav-width) !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 24px 16px !important;
        justify-self: start !important;
        align-self: start !important;
        box-sizing: border-box !important;
    }

    .content-area {
        grid-column: 3 !important;
        width: 100% !important;
        max-width: var(--desktop-main-width) !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 28px 0 56px !important;
        justify-self: stretch !important;
        align-self: start !important;
    }

    .right-sidebar {
        grid-column: 4 !important;
        width: var(--desktop-right-width) !important;
        max-width: var(--desktop-right-width) !important;
        min-width: 0 !important;
        margin: 0 0 0 16px !important;
        padding: 28px 0 56px !important;
        justify-self: start !important;
        align-self: start !important;
        position: sticky !important;
        top: 0 !important;
    }
}


/* =========================================================
   V8 仅新增：>=1280 时右侧栏可随大屏适度变宽，最大不超过 560px
   ========================================================= */
@media (min-width: 1280px) {
    :root {
        --desktop-right-width: clamp(320px, 22vw, 560px);
    }

    .app-layout {
        grid-template-columns: var(--desktop-nav-width) minmax(0, 1fr) minmax(680px, var(--desktop-main-width)) minmax(320px, var(--desktop-right-width)) minmax(0, 1fr) !important;
    }

    .right-sidebar {
        width: min(100%, var(--desktop-right-width)) !important;
        max-width: 560px !important;
    }
}

/* =========================================================
   V9 右侧栏与内部卡片统一宽度：>=1280 时最大 560px
   ========================================================= */
@media (min-width: 1280px) {
    :root {
        --desktop-right-width: clamp(320px, 22vw, 560px);
    }

    .app-layout {
        grid-template-columns: var(--desktop-nav-width) minmax(0, 1fr) minmax(680px, var(--desktop-main-width)) minmax(320px, var(--desktop-right-width)) minmax(0, 1fr) !important;
    }

    .right-sidebar {
        width: min(100%, var(--desktop-right-width)) !important;
        min-width: 320px !important;
        max-width: 440px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .right-sidebar > *,
    .right-sidebar .sidebar-slot,
    .right-sidebar #desktop-slot-stats,
    .right-sidebar #desktop-slot-module,
    .right-sidebar #desktop-slot-quest,
    .right-sidebar #desktop-slot-diligence,
    .right-sidebar #desktop-slot-ad,
    .right-sidebar #pc-stats-row,
    .right-sidebar #pc-module-selector,
    .right-sidebar #quest-widget,
    .right-sidebar #diligence-component,
    .right-sidebar .module-box,
    .right-sidebar .quest-widget,
    .right-sidebar .stats-row,
    .right-sidebar .mc-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .right-sidebar .stats-row {
        display: flex !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding-inline: 0 !important;
    }

    .right-sidebar .stat-pill {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        justify-content: center !important;
    }

    .right-sidebar .mc-item-info,
    .right-sidebar .mc-progress-bg,
    .right-sidebar .quest-row,
    .right-sidebar .quest-bar-bg {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}