/* =========================================================
   view2.php - 题目详情查看页
   时间: 2026-07-19
   设计: 移动端优先 + 卡片化布局 + 触摸友好
   主题: 与 m.php 保持一致 (紫蓝渐变)
   ========================================================= */

/* === 全局重置 === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
                 "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
    min-height: 100vh;
    color: #2c3e50;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* === 2026-09-11：7 主题系统（paper/eye-care/sepia/dark/midnight/ocean/sunset） ===
   - 用户切换时写入 body[data-theme]
   - 默认 paper，localStorage 记忆
   - dark 主题背景已加深（#0a0e1a），不会出现白底 */
body[data-theme="paper"]      { background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%); color: #2c3e50; }
body[data-theme="eye-care"]   { background: linear-gradient(180deg, #e8efd9 0%, #f7f9ec 100%); color: #2e3a1f; }
body[data-theme="sepia"]      { background: linear-gradient(180deg, #efe4d2 0%, #f7efd9 100%); color: #5b4636; }
body[data-theme="dark"]       { background: linear-gradient(180deg, #0a0e1a 0%, #050811 100%); color: #e4e6eb; }
body[data-theme="midnight"]   { background: linear-gradient(180deg, #1a0d2e 0%, #0d0518 100%); color: #e9d5ff; }
body[data-theme="ocean"]      { background: linear-gradient(180deg, #062c4a 0%, #021a2e 100%); color: #b3e5fc; }
body[data-theme="sunset"]     { background: linear-gradient(180deg, #fef3da 0%, #fde2d0 100%); color: #6b3d1a; }

/* === dark 主题文本/组件全覆盖 === */
body[data-theme="dark"] .v2-page { background: transparent; }
body[data-theme="dark"] .v2-card { background: #1f2233; border-color: rgba(255,255,255,0.08); box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
body[data-theme="dark"] .v2-question-card { background: linear-gradient(180deg, #252842 0%, #1f2233 100%); border-left: 4px solid #818cf8; }
body[data-theme="dark"] .v2-draw-card { background: #1a1d2e; }
body[data-theme="dark"] .v2-analysis-card { background: linear-gradient(180deg, #3a3220 0%, #1f2233 100%); }
body[data-theme="dark"] .v2-question-text { color: #e4e6eb; }
body[data-theme="dark"] .v2-question-text a { color: #93c5fd; }
body[data-theme="dark"] .v2-meta { color: #cbd5e1; }
body[data-theme="dark"] .v2-meta-item { background: #2a2d3f; border-color: #3a3d52; color: #93c5fd; }
body[data-theme="dark"] .v2-card-label { color: #93c5fd; }
body[data-theme="dark"] .v2-analysis-content { color: #d4d6db; }
body[data-theme="dark"] .v2-answer-input { background: #2a2d3f; border-color: #3a3d52; color: #f1f5f9; }
body[data-theme="dark"] .v2-answer-input::placeholder { color: #6b7280; }
body[data-theme="dark"] .v2-answer-input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,0.20); }
body[data-theme="dark"] .v2-answer-result { background: #2a2d3f; color: #cbd5e1; border-left: 3px solid #818cf8; }
body[data-theme="dark"] .v2-answer-result.v2-answer-right { background: #1e3a25; color: #86efac; border-left-color: #22c55e; }
body[data-theme="dark"] .v2-answer-result.v2-answer-wrong { background: #3a1e1e; color: #fca5a5; border-left-color: #ef4444; }
body[data-theme="dark"] .v2-canvas { background: #2a2d3f; border-color: #3a3d52; }
body[data-theme="dark"] .v2-code-draw { background: #2a2d3f; border-color: #3a3d52; color: #d4d6db; }
body[data-theme="dark"] .v2-btn-secondary { background: #2a2d3f; color: #93c5fd; border-color: #3a3d52; }
body[data-theme="dark"] .v2-btn-secondary:hover { background: #353852; }
body[data-theme="dark"] .v2-btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
body[data-theme="dark"] .v2-btn-next { background: linear-gradient(135deg, #16a34a, #15803d); }
body[data-theme="dark"] a { color: #93c5fd; }
body[data-theme="dark"] a:hover { color: #bfdbfe; }
body[data-theme="dark"] .v2-edit-link { color: #9ca3af; }
body[data-theme="dark"] .v2-edit-link:hover { color: #93c5fd; background: #2a2d3f; }
body[data-theme="dark"] .v2-footer { color: #9ca3af; }
body[data-theme="dark"] .v2-kbd-hint { background: #2a2d3f; color: #cbd5e1; border-color: #3a3d52; }
body[data-theme="dark"] .v2-kbd-active { background: #3a3220; color: #fbbf24; border-color: #f59e0b; }
body[data-theme="dark"] .v2-fav-btn { background: #2a2d3f; border-color: #f59e0b; color: #fbbf24; }
body[data-theme="dark"] .v2-fav-btn:hover { background: #353852; }
body[data-theme="dark"] .v2-fav-btn.v2-fav-on { background: linear-gradient(135deg, #f59e0b, #f97316); color: #1a1a1a; }
body[data-theme="dark"] .v2-qid { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.4); color: #fff; }

/* === 2026-09-11: midnight 主题（深紫，#0d0518 / #e9d5ff） === */
body[data-theme="midnight"] .v2-page { background: transparent; }
body[data-theme="midnight"] .v2-card { background: #1f1535; border-color: rgba(255,255,255,0.08); box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
body[data-theme="midnight"] .v2-question-card { background: linear-gradient(180deg, #2a1d4a 0%, #1f1535 100%); border-left: 4px solid #c084fc; }
body[data-theme="midnight"] .v2-draw-card { background: #16102a; }
body[data-theme="midnight"] .v2-analysis-card { background: linear-gradient(180deg, #2d1f3f 0%, #1f1535 100%); }
body[data-theme="midnight"] .v2-question-text { color: #f3e8ff; }
body[data-theme="midnight"] .v2-question-text a { color: #d8b4fe; }
body[data-theme="midnight"] .v2-meta { color: #e9d5ff; }
body[data-theme="midnight"] .v2-meta-item { background: #2d1f3f; border-color: #4c1d95; color: #d8b4fe; }
body[data-theme="midnight"] .v2-card-label { color: #d8b4fe; }
body[data-theme="midnight"] .v2-analysis-content { color: #ede9fe; }
body[data-theme="midnight"] .v2-answer-input { background: #2d1f3f; border-color: #4c1d95; color: #f3e8ff; }
body[data-theme="midnight"] .v2-answer-input::placeholder { color: #7c3aed; }
body[data-theme="midnight"] .v2-answer-input:focus { border-color: #c084fc; box-shadow: 0 0 0 3px rgba(192,132,252,0.20); }
body[data-theme="midnight"] .v2-answer-result { background: #2d1f3f; color: #ede9fe; border-left: 3px solid #c084fc; }
body[data-theme="midnight"] .v2-answer-result.v2-answer-right { background: #1e3a25; color: #86efac; border-left-color: #22c55e; }
body[data-theme="midnight"] .v2-answer-result.v2-answer-wrong { background: #3a1e1e; color: #fca5a5; border-left-color: #ef4444; }
body[data-theme="midnight"] .v2-canvas { background: #16102a; border-color: #4c1d95; }
body[data-theme="midnight"] .v2-code-draw { background: #2d1f3f; border-color: #4c1d95; color: #ede9fe; }
body[data-theme="midnight"] .v2-btn-secondary { background: #2d1f3f; color: #d8b4fe; border-color: #4c1d95; }
body[data-theme="midnight"] .v2-btn-secondary:hover { background: #3f2a5f; }
body[data-theme="midnight"] .v2-btn-primary { background: linear-gradient(135deg, #a855f7, #7c3aed); }
body[data-theme="midnight"] .v2-btn-next { background: linear-gradient(135deg, #22c55e, #15803d); }
body[data-theme="midnight"] a { color: #d8b4fe; }
body[data-theme="midnight"] a:hover { color: #f3e8ff; }
body[data-theme="midnight"] .v2-edit-link { color: #a78bfa; }
body[data-theme="midnight"] .v2-edit-link:hover { color: #c4b5fd; background: #2d1f3f; }
body[data-theme="midnight"] .v2-footer { color: #a78bfa; }
body[data-theme="midnight"] .v2-kbd-hint { background: #2d1f3f; color: #d8b4fe; border-color: #4c1d95; }
body[data-theme="midnight"] .v2-kbd-active { background: #3a2f5f; color: #fbbf24; border-color: #f59e0b; }
body[data-theme="midnight"] .v2-fav-btn { background: #2d1f3f; border-color: #f59e0b; color: #fbbf24; }
body[data-theme="midnight"] .v2-fav-btn:hover { background: #3f2a5f; }
body[data-theme="midnight"] .v2-fav-btn.v2-fav-on { background: linear-gradient(135deg, #f59e0b, #f97316); color: #1a1a1a; }
body[data-theme="midnight"] .v2-qid { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.4); color: #fff; }

/* === 2026-09-11: ocean 主题（深海蓝，#021a2e / #b3e5fc） === */
body[data-theme="ocean"] .v2-page { background: transparent; }
body[data-theme="ocean"] .v2-card { background: #0e3658; border-color: rgba(255,255,255,0.08); box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
body[data-theme="ocean"] .v2-question-card { background: linear-gradient(180deg, #15527a 0%, #0e3658 100%); border-left: 4px solid #38bdf8; }
body[data-theme="ocean"] .v2-draw-card { background: #06283f; }
body[data-theme="ocean"] .v2-analysis-card { background: linear-gradient(180deg, #1a4a72 0%, #0e3658 100%); }
body[data-theme="ocean"] .v2-question-text { color: #e0f2fe; }
body[data-theme="ocean"] .v2-question-text a { color: #7dd3fc; }
body[data-theme="ocean"] .v2-meta { color: #bae6fd; }
body[data-theme="ocean"] .v2-meta-item { background: #15527a; border-color: #0369a1; color: #7dd3fc; }
body[data-theme="ocean"] .v2-card-label { color: #7dd3fc; }
body[data-theme="ocean"] .v2-analysis-content { color: #e0f2fe; }
body[data-theme="ocean"] .v2-answer-input { background: #15527a; border-color: #0369a1; color: #e0f2fe; }
body[data-theme="ocean"] .v2-answer-input::placeholder { color: #0c4a6e; }
body[data-theme="ocean"] .v2-answer-input:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.20); }
body[data-theme="ocean"] .v2-answer-result { background: #15527a; color: #e0f2fe; border-left: 3px solid #38bdf8; }
body[data-theme="ocean"] .v2-answer-result.v2-answer-right { background: #1e3a25; color: #86efac; border-left-color: #22c55e; }
body[data-theme="ocean"] .v2-answer-result.v2-answer-wrong { background: #3a1e1e; color: #fca5a5; border-left-color: #ef4444; }
body[data-theme="ocean"] .v2-canvas { background: #06283f; border-color: #0369a1; }
body[data-theme="ocean"] .v2-code-draw { background: #15527a; border-color: #0369a1; color: #e0f2fe; }
body[data-theme="ocean"] .v2-btn-secondary { background: #15527a; color: #7dd3fc; border-color: #0369a1; }
body[data-theme="ocean"] .v2-btn-secondary:hover { background: #1d6296; }
body[data-theme="ocean"] .v2-btn-primary { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
body[data-theme="ocean"] .v2-btn-next { background: linear-gradient(135deg, #22c55e, #15803d); }
body[data-theme="ocean"] a { color: #7dd3fc; }
body[data-theme="ocean"] a:hover { color: #bae6fd; }
body[data-theme="ocean"] .v2-edit-link { color: #38bdf8; }
body[data-theme="ocean"] .v2-edit-link:hover { color: #7dd3fc; background: #15527a; }
body[data-theme="ocean"] .v2-footer { color: #38bdf8; }
body[data-theme="ocean"] .v2-kbd-hint { background: #15527a; color: #7dd3fc; border-color: #0369a1; }
body[data-theme="ocean"] .v2-kbd-active { background: #1a3f5f; color: #fbbf24; border-color: #f59e0b; }
body[data-theme="ocean"] .v2-fav-btn { background: #15527a; border-color: #f59e0b; color: #fbbf24; }
body[data-theme="ocean"] .v2-fav-btn:hover { background: #1d6296; }
body[data-theme="ocean"] .v2-fav-btn.v2-fav-on { background: linear-gradient(135deg, #f59e0b, #f97316); color: #1a1a1a; }
body[data-theme="ocean"] .v2-qid { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.4); color: #fff; }

/* === 2026-09-11: sunset 主题（暖橙，#fde2d0 / #6b3d1a） === */
body[data-theme="sunset"] .v2-page { background: transparent; }
body[data-theme="sunset"] .v2-card { background: #fff0e0; border-color: #f4c89a; box-shadow: 0 2px 10px rgba(180,80,30,0.08); }
body[data-theme="sunset"] .v2-question-card { background: linear-gradient(180deg, #ffe4cc 0%, #fff0e0 100%); border-left: 4px solid #ea580c; }
body[data-theme="sunset"] .v2-draw-card { background: #ffe2c8; }
body[data-theme="sunset"] .v2-analysis-card { background: linear-gradient(180deg, #ffd9b8 0%, #fff0e0 100%); }
body[data-theme="sunset"] .v2-question-text { color: #4a2810; }
body[data-theme="sunset"] .v2-question-text a { color: #c2410c; }
body[data-theme="sunset"] .v2-meta { color: #78350f; }
body[data-theme="sunset"] .v2-meta-item { background: #ffe2c8; border-color: #ea580c; color: #c2410c; }
body[data-theme="sunset"] .v2-card-label { color: #c2410c; }
body[data-theme="sunset"] .v2-analysis-content { color: #4a2810; }
body[data-theme="sunset"] .v2-answer-input { background: #fff5e6; border-color: #f4c89a; color: #4a2810; }
body[data-theme="sunset"] .v2-answer-input::placeholder { color: #b45309; }
body[data-theme="sunset"] .v2-answer-result { background: #ffe2c8; color: #78350f; border-left: 3px solid #ea580c; }
body[data-theme="sunset"] .v2-answer-result.v2-answer-right { background: #d1fae5; color: #065f46; border-left-color: #10b981; }
body[data-theme="sunset"] .v2-answer-result.v2-answer-wrong { background: #fee2e2; color: #991b1b; border-left-color: #ef4444; }
body[data-theme="sunset"] .v2-canvas { background: #fff5e6; border-color: #f4c89a; }
body[data-theme="sunset"] .v2-code-draw { background: #fff5e6; border-color: #f4c89a; color: #4a2810; }
body[data-theme="sunset"] .v2-btn-secondary { background: #ffe2c8; color: #c2410c; border-color: #f4c89a; }
body[data-theme="sunset"] .v2-btn-secondary:hover { background: #ffd9b8; }
body[data-theme="sunset"] .v2-meta-item { background: #ffe2c8; border-color: #ea580c; color: #c2410c; }
body[data-theme="sunset"] a { color: #c2410c; }
body[data-theme="sunset"] .v2-edit-link { color: #9a3412; }
body[data-theme="sunset"] .v2-edit-link:hover { color: #c2410c; background: #ffe2c8; }
body[data-theme="sunset"] .v2-footer { color: #9a3412; }
body[data-theme="sunset"] .v2-kbd-hint { background: #ffe2c8; color: #78350f; border-color: #ea580c; }
body[data-theme="sunset"] .v2-fav-btn { background: #ffe2c8; border-color: #f59e0b; color: #c2410c; }
body[data-theme="sunset"] .v2-fav-btn:hover { background: #ffd9b8; }
body[data-theme="sunset"] .v2-fav-btn.v2-fav-on { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; }
body[data-theme="sunset"] .v2-qid { background: #ffd9b8; border-color: #ea580c; color: #4a2810; }

/* === 2026-09-11: 右下角浮动主题按钮 + 主题面板 === */
.v2-theme-fab {
    position: fixed;
    right: 20px;
    /* 2026-09-11 v2: bottom 从 24 提到 90，避让右下角的意见箱/反馈按钮（用户拖动后可能停在右下角） */
    bottom: 90px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.40);
    cursor: pointer;
    font-size: 22px;
    /* 2026-09-11 v2: z-index 提高到 10000，盖在 feedback_fab 之上避免视觉错位 */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}
.v2-theme-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.55);
}
.v2-theme-fab:active { transform: translateY(0) scale(0.98); }

/* 主题面板里的选项 */
.v2-theme-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    border: 2px solid transparent;
}
.v2-theme-item:hover { transform: translateX(4px); }
.v2-theme-item.is-active {
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.20);
}
.v2-theme-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.v2-theme-name {
    font-weight: 600;
    font-size: 14px;
}
.v2-theme-hint {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.55;
}

@media (max-width: 640px) {
    .v2-theme-fab {
        /* 2026-09-11 v2: 移动端同样上移，避让底部反馈按钮（feedback_fab 默认 right:14px, bottom:14px） */
        right: 14px;
        bottom: 76px;
        width: 46px;
        height: 46px;
        font-size: 19px;
    }
}

/* === sepia 主题文本/组件全覆盖 === */
body[data-theme="sepia"] .v2-page { background: transparent; }
body[data-theme="sepia"] .v2-card { background: #fff8e8; border-color: #e8d8b8; box-shadow: 0 2px 10px rgba(120,90,30,0.06); }
body[data-theme="sepia"] .v2-question-card { background: linear-gradient(180deg, #fff7e2 0%, #fff8e8 100%); border-left: 4px solid #b45309; }
body[data-theme="sepia"] .v2-draw-card { background: #fdf3da; }
body[data-theme="sepia"] .v2-analysis-card { background: linear-gradient(180deg, #fef3da 0%, #fff8e8 100%); }
body[data-theme="sepia"] .v2-question-text { color: #4a2c0c; }
body[data-theme="sepia"] .v2-question-text a { color: #b45309; }
body[data-theme="sepia"] .v2-card-label { color: #b45309; }
body[data-theme="sepia"] .v2-analysis-content { color: #5b4636; }
body[data-theme="sepia"] .v2-answer-input { background: #fffcef; border-color: #d8c89a; color: #4a2c0c; }
body[data-theme="sepia"] .v2-answer-result { background: #fef3da; color: #78350f; border-left: 3px solid #b45309; }
body[data-theme="sepia"] .v2-answer-result.v2-answer-right { background: #d1fae5; color: #065f46; border-left-color: #10b981; }
body[data-theme="sepia"] .v2-answer-result.v2-answer-wrong { background: #fee2e2; color: #991b1b; border-left-color: #ef4444; }
body[data-theme="sepia"] .v2-canvas { background: #fffcef; border-color: #d8c89a; }
body[data-theme="sepia"] .v2-code-draw { background: #fffcef; border-color: #d8c89a; color: #4a2c0c; }
body[data-theme="sepia"] .v2-btn-secondary { background: #fef3da; color: #b45309; border-color: #d8c89a; }
body[data-theme="sepia"] .v2-btn-secondary:hover { background: #fef3c7; }
body[data-theme="sepia"] .v2-meta-item { background: #fef3da; border-color: #d8c89a; color: #78350f; }
body[data-theme="sepia"] a { color: #b45309; }
body[data-theme="sepia"] .v2-edit-link { color: #78716c; }
body[data-theme="sepia"] .v2-edit-link:hover { color: #b45309; background: #fef3da; }
body[data-theme="sepia"] .v2-footer { color: #78716c; }
body[data-theme="sepia"] .v2-kbd-hint { background: #fef3da; color: #78350f; border-color: #d8c89a; }
body[data-theme="sepia"] .v2-fav-btn { background: #fef3da; border-color: #f59e0b; color: #b45309; }
body[data-theme="sepia"] .v2-fav-btn:hover { background: #fde68a; }

/* === eye-care 主题文本/组件全覆盖 === */
body[data-theme="eye-care"] .v2-page { background: transparent; }
body[data-theme="eye-care"] .v2-card { background: #faffec; border-color: #c8d6a0; box-shadow: 0 2px 10px rgba(80,120,40,0.06); }
body[data-theme="eye-care"] .v2-question-card { background: linear-gradient(180deg, #f4f7df 0%, #faffec 100%); border-left: 4px solid #16a34a; }
body[data-theme="eye-care"] .v2-draw-card { background: #f0f4d4; }
body[data-theme="eye-care"] .v2-analysis-card { background: linear-gradient(180deg, #f0f4d4 0%, #faffec 100%); }
body[data-theme="eye-care"] .v2-question-text { color: #1e3a0c; }
body[data-theme="eye-care"] .v2-question-text a { color: #15803d; }
body[data-theme="eye-care"] .v2-card-label { color: #15803d; }
body[data-theme="eye-care"] .v2-analysis-content { color: #2e3a1f; }
body[data-theme="eye-care"] .v2-answer-input { background: #fdfff0; border-color: #b8c890; color: #1e3a0c; }
body[data-theme="eye-care"] .v2-answer-result { background: #e8efd9; color: #14532d; border-left: 3px solid #16a34a; }
body[data-theme="eye-care"] .v2-answer-result.v2-answer-right { background: #d1fae5; color: #065f46; border-left-color: #10b981; }
body[data-theme="eye-care"] .v2-answer-result.v2-answer-wrong { background: #fee2e2; color: #991b1b; border-left-color: #ef4444; }
body[data-theme="eye-care"] .v2-canvas { background: #fdfff0; border-color: #b8c890; }
body[data-theme="eye-care"] .v2-code-draw { background: #fdfff0; border-color: #b8c890; color: #1e3a0c; }
body[data-theme="eye-care"] .v2-btn-secondary { background: #e8efd9; color: #15803d; border-color: #b8c890; }
body[data-theme="eye-care"] .v2-btn-secondary:hover { background: #d8e0b0; }
body[data-theme="eye-care"] .v2-meta-item { background: #e8efd9; border-color: #b8c890; color: #14532d; }
body[data-theme="eye-care"] a { color: #15803d; }
body[data-theme="eye-care"] .v2-edit-link { color: #5a6f3a; }
body[data-theme="eye-care"] .v2-edit-link:hover { color: #15803d; background: #e8efd9; }
body[data-theme="eye-care"] .v2-footer { color: #5a6f3a; }
body[data-theme="eye-care"] .v2-kbd-hint { background: #e8efd9; color: #14532d; border-color: #b8c890; }
body[data-theme="eye-care"] .v2-fav-btn { background: #fdfff0; border-color: #f59e0b; color: #15803d; }
body[data-theme="eye-care"] .v2-fav-btn:hover { background: #f0f4d4; }

/* 主题选择弹窗高亮 */
.v2-theme-item.is-active{ outline: 3px solid #3b82f6; }

a {
    color: #667eea;
    text-decoration: none;
}

/* === 页面容器 === */
.v2-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 0 32px;
}

/* === 顶部头部栏 === */
.v2-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.25);
}

.v2-back {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    transition: background 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
}

.v2-back:hover,
.v2-back:active {
    background: rgba(255, 255, 255, 0.3);
}

/* 2026-09-11：顶部"题目首页"链接（紧凑胶囊样式） */
.v2-home-link {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.20);
}
.v2-home-link:hover,
.v2-home-link:active {
    background: rgba(255, 255, 255, 0.30);
}

.v2-header-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-grade-badge {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    min-width: 60px;
    text-align: center;
    flex-shrink: 0;
}

/* === 卡片通用 === */
.v2-card {
    background: #fff;
    border-radius: 16px;
    margin: 14px 14px 0;
    padding: 16px 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.v2-card-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.v2-icon {
    font-size: 18px;
    line-height: 1;
}

/* === 题目卡片 === */
.v2-question-card {
    margin-top: 18px;
    background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
    border-left: 4px solid #667eea;
}

.v2-question-text {
    font-size: 18px;
    line-height: 1.7;
    color: #2c3e50;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.v2-question-text img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 8px 0;
    border-radius: 8px;
}

/* === 绘图卡片 === */
.v2-draw-card {
    background: #fafbff;
}

.v2-code-draw {
    width: 100%;
    min-height: 80px;
    padding: 8px;
    font-family: "Courier New", monospace;
    font-size: 12px;
    border: 1px solid #e1e5f0;
    border-radius: 6px;
    background: #fff;
    resize: vertical;
    display: none;
}

.v2-canvas {
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 5 / 3;
    border: 1px solid #e1e5f0;
    border-radius: 8px;
    background: #fff;
    display: block;
    margin: 0 auto;
    touch-action: none;
}

/* === 答案输入卡片 === */
.v2-answer-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 18px;
    border: 2px solid #e1e5f0;
    border-radius: 12px;
    background: #fff;
    color: #2c3e50;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.v2-answer-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.v2-answer-input::placeholder {
    color: #b0b8c4;
    font-size: 15px;
}

.v2-answer-result {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 15px;
    background: #f0f4ff;
    color: #4a5fc1;
    border-left: 3px solid #667eea;
    min-height: 0;
    transition: all 0.3s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.v2-answer-result:empty {
    display: none;
}

.v2-answer-result.v2-answer-right {
    background: #e8f7ee;
    color: #1e7e3a;
    border-left-color: #13aa52;
}

.v2-answer-result.v2-answer-wrong {
    background: #fdecec;
    color: #c0392b;
    border-left-color: #e74c3c;
}

/* === 按钮组 === */
.v2-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 0;
}

.v2-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    font-family: inherit;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.v2-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.v2-btn-primary:hover {
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

.v2-btn-primary:active {
    transform: translateY(0);
}

.v2-btn-secondary {
    background: #fff;
    color: #667eea;
    border: 2px solid #667eea;
}

.v2-btn-secondary:hover {
    background: #f0f4ff;
}

.v2-btn-secondary:active {
    background: #e8edff;
}

.v2-btn-next {
    background: linear-gradient(135deg, #13aa52 0%, #0d8c43 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(19, 170, 82, 0.25);
}

.v2-btn-next:hover {
    box-shadow: 0 6px 18px rgba(19, 170, 82, 0.35);
    transform: translateY(-1px);
}

.v2-btn-next:active {
    transform: translateY(0);
}

/* === 分析卡片 === */
.v2-analysis-card {
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
    border-left: 4px solid #f59e0b;
    animation: slideIn 0.3s ease;
}

.v2-analysis-content {
    font-size: 15px;
    line-height: 1.7;
    color: #4a4a4a;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.v2-analysis-content:empty {
    display: none;
}

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

/* === 底部 === */
.v2-footer {
    text-align: center;
    padding: 24px 14px 0;
    font-size: 13px;
    color: #4a5fc1;
}

.v2-edit-link {
    color: #4a5fc1;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 14px;
    transition: all 0.2s ease;
    display: inline-block;
    font-weight: 500;
}

.v2-edit-link:hover {
    color: #667eea;
    background: #f0f4ff;
}

/* === 2026-09-10 P2-2: 学习进度卡（侧边浮动） === */
.v2-progress-card {
    position: fixed;
    right: 16px;
    top: 90px;
    width: 180px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    font-size: 12px;
    z-index: 100;
    display: none; /* JS 加载成功后显示 */
}
.v2-progress-title {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f3f4f6;
}
.v2-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    color: #6b7280;
}
.v2-progress-row b {
    color: #1f2937;
    font-weight: 600;
}
.v2-text-success { color: #16a34a !important; }
.v2-text-danger  { color: #dc2626 !important; }
.v2-progress-link {
    display: block;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    color: #b91c1c;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
}
.v2-progress-link:hover { color: #dc2626; }

@media (max-width: 900px) {
    .v2-progress-card { display: none !important; } /* 移动端隐藏 */
}

/* 暗色模式 */
body.dark-mode .v2-progress-card {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .v2-progress-title { color: #f1f5f9; border-bottom-color: #334155; }
body.dark-mode .v2-progress-row { color: #94a3b8; }
body.dark-mode .v2-progress-row b { color: #f1f5f9; }

/* ============================================
   响应式断点
   ============================================ */

/* 平板及以上: 双列按钮 */
@media (min-width: 600px) {
    .v2-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .v2-btn {
        flex: 1 1 calc(50% - 5px);
    }
    .v2-btn-next {
        flex: 1 1 100%;
    }
    .v2-question-text {
        font-size: 20px;
    }
}

/* 桌面: 居中显示 + 更大的字体 */
@media (min-width: 900px) {
    .v2-page {
        max-width: 820px;
        padding-bottom: 48px;
    }
    .v2-header {
        border-radius: 0 0 20px 20px;
        max-width: 820px;
        margin: 0 auto;
    }
    .v2-card {
        margin-left: 14px;
        margin-right: 14px;
    }
    .v2-actions {
        padding-left: 14px;
        padding-right: 14px;
    }
    .v2-question-text {
        font-size: 22px;
        line-height: 1.8;
    }
}

/* === 暗色模式适配 === */
/* === 暗色模式适配 ===
   2026-09-10 P1-3: 兼容两种触发方式
     - body.dark-mode（用户手动切换）
     - prefers-color-scheme: dark（系统偏好） */
body.dark-mode,
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(180deg, #1a1d2e 0%, #0f1117 100%);
        color: #e4e6eb;
    }
    .v2-card {
        background: #1f2233;
        border-color: rgba(255, 255, 255, 0.06);
    }
    .v2-question-card {
        background: linear-gradient(135deg, #252842 0%, #1f2233 100%);
    }
    .v2-draw-card {
        background: #1a1d2e;
    }
    .v2-analysis-card {
        background: linear-gradient(135deg, #3a3220 0%, #1f2233 100%);
    }
    .v2-question-text {
        color: #e4e6eb;
    }
    .v2-card-label {
        color: #8a9bff;
    }
    .v2-analysis-content {
        color: #d4d6db;
    }
    .v2-answer-input {
        background: #2a2d3f;
        border-color: #3a3d52;
        color: #e4e6eb;
    }
    .v2-answer-input:focus {
        border-color: #8a9bff;
    }
    .v2-answer-result {
        background: #2a2d3f;
        color: #8a9bff;
    }
    .v2-answer-result.v2-answer-right {
        background: #1e3a25;
        color: #6fdc8c;
    }
    .v2-answer-result.v2-answer-wrong {
        background: #3a1e1e;
        color: #ff8a80;
    }
    .v2-canvas,
    .v2-code-draw {
        background: #2a2d3f;
        border-color: #3a3d52;
    }
    .v2-btn-secondary {
        background: #2a2d3f;
        color: #8a9bff;
        border-color: #8a9bff;
    }
    .v2-btn-secondary:hover {
        background: #353852;
    }
    .v2-footer {
        color: #8a9bff;
    }
    .v2-edit-link:hover {
        background: #2a2d3f;
    }
}

/* === 减小动效 (可访问性) === */
@media (prefers-reduced-motion: reduce) {
    .v2-analysis-card {
        animation: none;
    }
    .v2-btn,
    .v2-back {
        transition: none;
    }
}

/* =========================================================
   2026-07-19: E 阶段 2 期 - 题号 / 元信息 / 收藏 / 快捷键
   ========================================================= */

/* === 顶部题号 (#300) === */
.v2-qid {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    font-family: "SF Mono", "Consolas", "Courier New", monospace;
    vertical-align: middle;
}

/* === 题目卡片 label 改为 flex 布局 (支持收藏按钮靠右) === */
.v2-question-card .v2-card-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.v2-question-card .v2-card-label > span:nth-child(2) {
    flex: 0 0 auto;
}

.v2-question-card .v2-card-label .v2-fav-btn {
    margin-left: auto;
}

/* === 收藏按钮 === */
.v2-fav-btn {
    background: #fff;
    color: #f59e0b;
    border: 1.5px solid #f59e0b;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1.4;
}

.v2-fav-btn:hover {
    background: #fff8e1;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.v2-fav-btn:active {
    transform: translateY(0);
}

.v2-fav-btn.v2-fav-on {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: #fff;
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.v2-fav-btn.v2-fav-on:hover {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

/* === 元信息条 (知识点 / 难度 / 来源) === */
.v2-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e1e5f0;
}

.v2-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    background: #f0f4ff;
    border: 1px solid #d8dffb;
    border-radius: 10px;
    font-size: 12px;
    color: #4a5fc1;
    font-weight: 500;
    line-height: 1.5;
}

.v2-meta-item[hidden] {
    display: none;
}

/* === 答案卡片: 键盘提示 === */
.v2-kbd-hint {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: #95a0b3;
    text-transform: none;
    letter-spacing: 0;
    background: #f0f4ff;
    padding: 2px 8px;
    border-radius: 8px;
    border: 1px solid #e1e5f0;
    transition: all 0.2s ease;
}

.v2-kbd-hint.v2-kbd-active {
    background: #fff8e1;
    color: #d97706;
    border-color: #f59e0b;
}

/* === 按钮组: 移动端次按钮 (查看分析) 用浅色更协调 === */
.v2-btn-secondary {
    background: #f0f4ff;
    color: #4a5fc1;
    border: 1.5px solid #d8dffb;
}

.v2-btn-secondary:hover {
    background: #e8edff;
    border-color: #c5cfee;
}

.v2-btn-secondary:active {
    background: #d8e0f7;
}

/* === 暗色模式适配: 新增的元信息/收藏/快捷键 === */
/* === 暗色模式适配 ===
   2026-09-10 P1-3: 兼容两种触发方式
     - body.dark-mode（用户手动切换）
     - prefers-color-scheme: dark（系统偏好） */
body.dark-mode,
@media (prefers-color-scheme: dark) {
    .v2-qid {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.25);
    }
    .v2-fav-btn {
        background: #2a2d3f;
        border-color: #f59e0b;
        color: #fbbf24;
    }
    .v2-fav-btn:hover {
        background: #353852;
    }
    .v2-fav-btn.v2-fav-on {
        background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
        color: #1a1d2e;
    }
    .v2-meta {
        border-top-color: #3a3d52;
    }
    .v2-meta-item {
        background: #2a2d3f;
        border-color: #3a3d52;
        color: #8a9bff;
    }
    .v2-kbd-hint {
        background: #2a2d3f;
        border-color: #3a3d52;
        color: #6a7588;
    }
    .v2-kbd-hint.v2-kbd-active {
        background: #3a3220;
        color: #fbbf24;
        border-color: #f59e0b;
    }
    .v2-btn-secondary {
        background: #2a2d3f;
        color: #8a9bff;
        border-color: #3a3d52;
    }
    .v2-btn-secondary:hover {
        background: #353852;
        border-color: #4a5fc1;
    }
}

/* === 移动端: 卡片 label 自适应 === */
@media (max-width: 480px) {
    .v2-kbd-hint {
        font-size: 10px;
        padding: 1px 6px;
    }
    .v2-fav-btn {
        font-size: 12px;
        padding: 3px 9px;
    }
    .v2-meta-item {
        font-size: 11px;
        padding: 2px 8px;
    }
}

/* === 题目脚本执行失败时的错误卡片 (E-4 2026-07-19) === */
.v2-error-card {
    background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
    border: 1px solid #ffb8b8;
    border-left: 4px solid #ff4d4f;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0;
    box-shadow: 0 2px 6px rgba(255, 77, 79, 0.08);
}
.v2-error-title {
    font-size: 15px;
    font-weight: 600;
    color: #c41d1d;
    margin-bottom: 6px;
}
.v2-error-sub {
    font-size: 12px;
    color: #666;
    line-height: 1.55;
    margin-bottom: 8px;
}
.v2-error-detail {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 77, 79, 0.18);
    border-radius: 4px;
    padding: 8px 10px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: #c41d1d;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}
.v2-error-hint {
    font-size: 13px;
    color: #2c3e50;
    line-height: 1.7;
    margin: 4px 0;
}
.v2-error-hint a {
    color: #4a5fc1;
    text-decoration: underline;
    font-weight: 500;
}
.v2-error-hint a:hover {
    color: #6b3fa0;
}