/* ============================================================
 * common.css · 初二物理满分训练系统 · 通用样式
 * 标准 §2.3 UI/UX：三阶配色 / 清单 / 教具卡 / 生活案例 / AI 报告
 * ============================================================ */

/* 全局基础字体放大（Tailwind 默认 16px → 18px，整体放大约 12.5%） */
html { font-size: 18px; }
/* 小屏设备适度回缩，避免布局过密 */
@media (max-width: 640px) {
    html { font-size: 17px; }
}

/* 品牌渐变 */
.brand-gradient {
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 50%, #3182ce 100%);
}

/* 阶段切换 Tab */
.fs-tab {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 14px;
    text-decoration: none;
    transition: all .2s;
}
.fs-tab:hover { background: #f8fafc; color: #1e40af; }
.fs-tab-active {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid;
}

/* 学/练/测 模块 Tab */
.fs-mod {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 14px;
    text-decoration: none;
    transition: all .2s;
}
.fs-mod:hover { background: #f8fafc; color: #4f46e5; }
.fs-mod-active {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: #4f46e5;
    color: #fff;
    text-decoration: none;
}

/* 章节/阶段/模块 切换栏 · 收起状态：整条框向上合拢，仅保留右侧展开按钮 */
#fs-switcher {
    transition: background-color .25s ease, border-color .25s ease;
}
#fs-switcher .fs-switcher-inner {
    transition: padding .3s ease;
}
#fs-switcher-content {
    overflow: hidden;
    max-height: 96px;
    opacity: 1;
    transition: max-height .3s ease, opacity .25s ease;
}
#fs-switcher.is-collapsed {
    background: transparent;
    border-top-color: transparent;
}
#fs-switcher.is-collapsed .fs-switcher-inner {
    padding-top: 0;
    padding-bottom: 0;
}
#fs-switcher.is-collapsed #fs-switcher-content {
    max-height: 0;
    opacity: 0;
}
#fs-switcher.is-collapsed #fs-switcher-chevron {
    transform: rotate(180deg);
}

/* 卡片 */
.card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.card p, .card h1, .card h2, .card h3 { color: #1e293b; }

/* 标准按钮 */
.btn { padding: 8px 16px; border-radius: 8px; font-size: 16px; font-weight: 500; transition: all .15s; cursor: pointer; }
.btn-primary { background: #4f46e5; color: #fff; }
.btn-primary:hover { background: #4338ca; }
.btn-lg { padding: 12px 20px; font-size: 18px; }
.btn-print { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }
.btn-print:hover { background: #e2e8f0; }

/* 表单输入 */
.input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.label { display: block; font-size: 14px; font-weight: 600; color: #475569; margin-bottom: 4px; }

/* 打钩清单项（标准 §2.5） */
.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all .15s;
    font-size: 16px;
}
.checklist-item:hover { background: #f1f5f9; }
.checklist-item input[type=checkbox] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: #4f46e5;
    cursor: pointer;
}
.checklist-item input[type=checkbox]:checked + .item-content {
    color: #16a34a;
    text-decoration: line-through;
    text-decoration-color: rgba(22, 163, 74, .4);
}
.checklist-item .item-content { flex: 1; line-height: 1.6; }

/* 记背清单表格（标准 §3.1.4） */
.checklist {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.checklist th, .checklist td {
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.checklist th { background: #f1f5f9; font-weight: 600; }
.checklist tr:nth-child(even) td { background: #fafbfc; }

/* 实验教具卡（标准 §2.8.3） */
.kit-card {
    border: 2px solid #fbbf24;
    border-radius: 14px;
    padding: 16px;
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%);
    margin: 12px 0;
}
.kit-card .kit-head {
    border-bottom: 1px solid #fde68a;
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.kit-card .kit-head h4 {
    font-size: 17px;
    font-weight: 700;
    color: #92400e;
    margin: 0;
}
.kit-card .kit-relate {
    font-size: 13px;
    color: #b45309;
    background: #fef3c7;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
}
.kit-card .kit-materials { margin: 8px 0; }
.kit-card .kit-materials h5 { font-size: 14px; font-weight: 700; color: #92400e; margin: 0 0 4px; }
.kit-card .kit-materials ul { margin: 0; padding-left: 18px; font-size: 14px; color: #57534e; }
.kit-card .kit-materials li { margin: 2px 0; }
.kit-card .kit-steps {
    margin: 8px 0;
    padding-left: 20px;
    font-size: 14px;
    color: #57534e;
}
.kit-card .kit-steps li { margin: 3px 0; }
.kit-card .kit-record {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 8px 0;
}
.kit-card .kit-record th, .kit-card .kit-record td {
    border: 1px solid #e5e7eb;
    padding: 6px;
    text-align: center;
}
.kit-card .kit-record th { background: #fef3c7; }
.kit-card .kit-safety {
    font-size: 14px;
    color: #dc2626;
    background: #fee2e2;
    padding: 6px 10px;
    border-radius: 6px;
    margin: 8px 0;
}
.kit-card .kit-done {
    margin: 10px 0;
    background: #fff;
}
.kit-card .kit-links {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* 联动跳转按钮（标准 §2.8.2） */
.link-btn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 14px;
    text-decoration: none;
    transition: all .15s;
}
.link-btn:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }

/* 教具库分组导航（三级折叠：学科 → 册次 → 章节） */
.kit-nav details > summary { cursor: pointer; user-select: none; }
.kit-nav-subject { border-top: 1px solid #f1f5f9; }
.kit-nav-subject > summary {
    font-weight: 800;
    color: #1f2937;
    padding: 8px 0;
    font-size: 14px;
}
.kit-nav-books { padding-left: 12px; }
.kit-nav-book > summary {
    font-weight: 600;
    color: #64748b;
    padding: 4px 0 4px 2px;
    font-size: 13px;
}
.kit-nav-chapters { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px 20px; }

/* 生活案例卡片（标准 §2.7.3） */
.life-case {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 70%);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 12px 0;
}
.life-case .life-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #10b981;
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}
.life-case img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 6px 0;
}
.life-case details {
    margin-top: 6px;
    background: #fff;
    border-radius: 6px;
    padding: 6px 10px;
}
.life-case details summary {
    cursor: pointer;
    font-weight: 600;
    color: #047857;
    font-size: 15px;
}

/* 动态交互模型容器 */
.interactive-model {
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff 0%, #ffffff 60%);
    padding: 16px;
    margin: 12px 0;
}
.interactive-model .model-tip {
    text-align: center;
    font-size: 14px;
    color: #4338ca;
    margin-top: 8px;
    background: #fff;
    padding: 6px 10px;
    border-radius: 6px;
}

/* 物理动态交互模型（SVG+JS） */
.physics-model {
    border: 2px solid #c7d2fe;
    border-radius: 16px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 70%);
    padding: 16px;
    margin: 12px 0;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
}
.physics-model .model-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
}
.physics-model .model-label {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}
.physics-model .model-val {
    display: inline-block;
    min-width: 32px;
    padding: 2px 8px;
    background: #4f46e5;
    color: #fff;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}
.physics-model .unit {
    font-size: 14px;
    color: #6b7280;
    margin-left: 2px;
}
.physics-model .ctrl-btn {
    padding: 6px 14px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: all .2s;
    color: #475569;
}
.physics-model .ctrl-btn:hover { background: #e2e8f0; color: #1e293b; }
.physics-model .ctrl-btn.active {
    background: #4f46e5;
    color: #fff;
    border-color: #4f46e5;
}
.physics-model input[type=range] {
    width: 100px;
    accent-color: #4f46e5;
}
.physics-model .ml-4 { margin-left: 16px; }
.physics-model .model-svg {
    width: 100%;
    max-height: 320px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
.physics-model .model-hint {
    text-align: center;
    font-size: 14px;
    color: #6366f1;
    margin-top: 10px;
    background: #eef2ff;
    padding: 6px 12px;
    border-radius: 6px;
}
.physics-model .model-formula {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
    padding: 10px;
    background: #fffbeb;
    border-radius: 8px;
    border: 1px solid #fde68a;
}
.physics-model .formula-box {
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: 14px;
    color: #78350f;
}
.physics-model .formula-box.highlight {
    background: #fef3c7;
    border-color: #f59e0b;
    font-weight: 700;
    color: #92400e;
}
.physics-model .formula-box.calc {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
    font-weight: 700;
}
.physics-model .formula-sep {
    color: #94a3b8;
    font-size: 16px;
    align-self: center;
}
.physics-model .frac {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding: 0 3px;
}
.physics-model .frac::before {
    content: 's';
    display: block;
    font-size: 11px;
    line-height: 1;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.physics-model .frac::after {
    content: 't';
    display: block;
    font-size: 11px;
    line-height: 1;
    padding-top: 1px;
}

/* 生活案例图片样式（侧栏小图） */
.life-case .life-img {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin: 8px 0;
    border: 1px solid #d1fae5;
}
.life-case .life-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    background: #f0fdf4;
    border: 2px dashed #86efac;
    border-radius: 8px;
    color: #65a30d;
    font-size: 14px;
    margin: 8px 0;
}

/* ============================================================
 * 交互模型 iframe + 双栏侧栏（知识点/公式/生活案例）
 * ============================================================ */
.physics-frame {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.phy-model-frame {
    display: block;
    background: #fafcff;
    width: 100%;
    border: 0;
    min-height: 640px;
    transition: height .2s;
}

/* 打开完整模型链接 */
.model-open-link {
    flex: none;
    display: inline-block;
    padding: 3px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #4f46e5;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    text-decoration: none;
    transition: all .2s;
}
.model-open-link:hover {
    background: #4f46e5;
    color: #fff;
}

/* 章节知识导图导航 */
.mindmap-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    background: #f8faff;
    border: 1px solid #e0e7ff;
    border-radius: 12px;
}
.mindmap-node {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #c7d2fe;
    border-radius: 20px;
    text-decoration: none;
    transition: all .2s;
}
.mindmap-node:hover {
    background: #4f46e5;
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .2);
}
.mindmap-node:hover .mindmap-title { color: #fff; }
.mindmap-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4f46e5;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex: none;
}
.mindmap-node:hover .mindmap-dot { background: #fff; color: #4f46e5; }
.mindmap-title {
    font-size: 15px;
    font-weight: 600;
    color: #3730a3;
}
.mindmap-arrow { color: #a5b4fc; font-size: 16px; }
.mindmap-tag {
    display: inline-block;
    padding: 2px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    color: #475569;
}

/* 自学任务卡 / 自学小目标 */
.self-task {
    border-left: 4px solid #6366f1;
    background: #eef2ff;
    padding: 8px 10px;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: #3730a3;
    line-height: 1.7;
}
.self-goal {
    background: #fffbeb;
    border: 2px solid #f59e0b;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    line-height: 1.7;
}

/* 侧栏容器 */
.aside-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
}
.aside-box h3 {
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

/* 侧栏知识点紧凑卡片 */
.kp-mini {
    background: #f8faff;
    border: 1px solid #e0e7ff;
    border-left: 4px solid #818cf8;
    border-radius: 8px;
    padding: 8px 12px;
}
.kp-mini-title {
    font-size: 14px;
    font-weight: 800;
    color: #3730a3;
}
.kp-mini-icon {
    font-size: 17px;
    line-height: 1;
    margin-right: 5px;
    vertical-align: -2px;
}
.kp-mini-content {
    font-size: 13px;
    color: #475569;
    line-height: 1.7;
    margin-top: 3px;
}
.kp-mini-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}
.kp-mini-list li {
    font-size: 13px;
    color: #475569;
    line-height: 1.7;
    padding: 2px 0;
}
.kp-mini-list li + li {
    border-top: 1px dashed #eef2ff;
    margin-top: 2px;
    padding-top: 4px;
}
.kp-mini-formula {
    margin-top: 6px;
    padding: 6px 8px;
    text-align: center;
    background: #eef2ff;
    border-radius: 6px;
    font-size: 15px;
    color: #4338ca;
}

/* ===== 知识点分条与层级：每条独立一行，一级条目带圆点、二级缩进带短横 ===== */
/* 类名由 l3_kp_content() 统一产出，可同时用于侧栏与弹窗内正文 */
.kp-line {
    margin: 3px 0;
}
.kp-item {
    position: relative;
    padding-left: 15px;
    margin: 4px 0;
}
.kp-item::before {
    content: "";
    position: absolute;
    left: 3px;
    top: .62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}
.kp-item-sub {
    padding-left: 28px;
    margin: 3px 0;
    color: #64748b;
    font-size: 12.5px;
}
.kp-item-sub::before {
    left: 16px;
    top: .85em;
    width: 7px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    opacity: .5;
}
.kp-line:first-child, .kp-item:first-child, .kp-sub-title:first-child {
    margin-top: 0;
}
.kp-line:last-child, .kp-item:last-child, .kp-sub-title:last-child {
    margin-bottom: 0;
}
.kp-sub-title {
    margin: 5px 0 2px;
    font-weight: 700;
    color: #1e293b;
}
.kp-mini-content strong {
    color: #1e293b;
    font-weight: 700;
}

/* ===== 知识点卡片彩色渲染：按序号循环强调色 ===== */
.kp-mini:nth-child(1) { border-left-color: #6366f1; background: #f5f5ff; }
.kp-mini:nth-child(1) .kp-mini-title { color: #3730a3; }
.kp-mini:nth-child(1) .kp-mini-icon { background: #e0e7ff; }

.kp-mini:nth-child(2) { border-left-color: #10b981; background: #f0fdf6; }
.kp-mini:nth-child(2) .kp-mini-title { color: #047857; }
.kp-mini:nth-child(2) .kp-mini-icon { background: #d1fae5; }

.kp-mini:nth-child(3) { border-left-color: #f59e0b; background: #fffaf0; }
.kp-mini:nth-child(3) .kp-mini-title { color: #b45309; }
.kp-mini:nth-child(3) .kp-mini-icon { background: #fef3c7; }

.kp-mini:nth-child(4) { border-left-color: #f43f5e; background: #fff5f6; }
.kp-mini:nth-child(4) .kp-mini-title { color: #be123c; }
.kp-mini:nth-child(4) .kp-mini-icon { background: #ffe4e6; }

.kp-mini:nth-child(5) { border-left-color: #8b5cf6; background: #f8f4ff; }
.kp-mini:nth-child(5) .kp-mini-title { color: #6d28d9; }
.kp-mini:nth-child(5) .kp-mini-icon { background: #ede9fe; }

.kp-mini:nth-child(6) { border-left-color: #0ea5e9; background: #f0faff; }
.kp-mini:nth-child(6) .kp-mini-title { color: #0369a1; }
.kp-mini:nth-child(6) .kp-mini-icon { background: #e0f2fe; }

.kp-mini:nth-child(7) { border-left-color: #f97316; background: #fff7ed; }
.kp-mini:nth-child(7) .kp-mini-title { color: #c2410c; }
.kp-mini:nth-child(7) .kp-mini-icon { background: #ffedd5; }

/* 图标加圆角底衬托 */
.kp-mini-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 6px;
    margin-right: 6px;
    vertical-align: middle;
}
/* formula 底色跟随强调色微调 */
.kp-mini:nth-child(4) .kp-mini-formula { background: #ffe4e6; color: #be123c; }

/* 记背清单知识点标签 */
.checklist-item .knowledge-tag {
    display: inline-block;
    padding: 1px 6px;
    background: #ede9fe;
    color: #6d28d9;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    margin-right: 4px;
}
.checklist-item input[type=checkbox]:checked + .item-content .knowledge-tag {
    background: #86efac;
    color: #166534;
    text-decoration: line-through;
}

/* 知识点表格 */
.kp-table, .comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin: 8px 0;
}
.kp-table th, .kp-table td,
.comparison-table th, .comparison-table td {
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
    vertical-align: top;
}
.kp-table th, .comparison-table th { background: #eef2ff; font-weight: 600; color: #3730a3; }

/* 进度环（环形进度条） */
.progress-ring {
    position: relative;
    width: 100px;
    height: 100px;
}

/* 阶段状态徽标 */
.stage-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid;
}
.stage-done { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.stage-cur  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.stage-todo { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
.stage-lock { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* 上传组件 */
.upload-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all .15s;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: #6366f1;
    background: #eef2ff;
}
.upload-preview {
    display: inline-block;
    margin: 4px;
    position: relative;
}
.upload-preview img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.upload-preview .del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

/* AI 报告 */
.ai-report {
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    background: #fff;
    padding: 16px;
}
.ai-report .score-big {
    font-size: 32px;
    font-weight: 800;
    color: #4f46e5;
}
.ai-report .accuracy-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0;
}
.ai-report .accuracy-bar > div {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
}

/* 题目作答区 */
.q-title {
    display: inline-block;
    padding: 2px 10px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}
.q-stem {
    background: #f8fafc;
    border-left: 3px solid #6366f1;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 8px 0;
    line-height: 1.7;
}
.q-image {
    display: block;
    max-width: 100%;
    max-height: 320px;
    margin: 8px auto;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}
.q-options { margin: 8px 0; }
.q-opt {
    display: inline-block;
    margin: 4px 6px;
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all .15s;
}
.q-opt:hover { background: #eef2ff; }
.q-opt.selected { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.q-opt.correct { background: #10b981; color: #fff; border-color: #10b981; }
.q-opt.wrong   { background: #ef4444; color: #fff; border-color: #ef4444; }
.q-opt-img {
    display: block;
    max-width: 180px;
    max-height: 140px;
    margin: 5px auto 0;
    border-radius: 4px;
}
.q-feedback {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 15px;
    display: none;
}
.q-feedback.ok  { background: #d1fae5; color: #065f46; display: block; }
.q-feedback.err { background: #fee2e2; color: #991b1b; display: block; }
.q-feedback .q-explain { margin-top: 4px; font-size: 13px; opacity: .92; }

/* 真题卡片（L3） */
.exam-question {
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 50%);
    padding: 16px;
    margin: 12px 0;
}
.exam-question .exam-meta {
    font-size: 13px;
    color: #92400e;
    background: #fef3c7;
    padding: 3px 8px;
    border-radius: 4px;
}

/* 挖坑点 / 解析 折叠 */
details.pitfalls, details.solution {
    margin-top: 8px;
    background: #fff;
    border-radius: 6px;
    padding: 8px 12px;
}
details.pitfalls summary { color: #b45309; font-weight: 600; cursor: pointer; }
details.solution summary { color: #4338ca; font-weight: 600; cursor: pointer; }
.solution-steps { margin: 8px 0 0; padding-left: 22px; }
.solution-steps li { margin: 6px 0; line-height: 1.7; }

/* ============================================================
 * L2 强化字段样式：考点清单 / 常见题型 / 速记表 / 敲黑板 / 对比表 / 生活化常识
 * ============================================================ */

/* 通用 L2 内容块 */
.l2-block {
    border-left: 4px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px 12px;
}
.l2-block-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}
.l2-block-purple { color: #7c3aed; }
.l2-block-cyan   { color: #0891b2; }
.l2-block-sky    { color: #0369a1; }
.l2-block-indigo { color: #4f46e5; }
.l2-block-emerald{ color: #047857; }

/* 考点清单标签 */
.exam-level, .exam-freq {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    flex: none;
}
.exam-掌握 { background: #d1fae5; color: #065f46; }
.exam-理解 { background: #dbeafe; color: #1e40af; }
.exam-应用 { background: #ede9fe; color: #5b21b6; }
.exam-了解 { background: #f1f5f9; color: #475569; }
.exam-高频 { background: #fee2e2; color: #991b1b; }
.exam-中频 { background: #fef3c7; color: #92400e; }
.exam-低频 { background: #f1f5f9; color: #64748b; }

/* 常见题型标签 */
.common-type-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #a5f3fc;
    color: #155e75;
    font-size: 13px;
}

/* 速记表 */
.speed-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.speed-table th, .speed-table td {
    border: 1px solid #e0f2fe;
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
}
.speed-table th { background: #e0f2fe; color: #075985; font-weight: 700; }
.speed-table tr:nth-child(even) td { background: #f0f9ff; }

/* 敲黑板 */
.blackboard-box {
    background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, .12);
}
.blackboard-item {
    background: rgba(255, 255, 255, .7);
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 8px 10px;
}

/* 对比表格 */
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.compare-table th, .compare-table td {
    border: 1px solid #dbeafe;
    padding: 7px 8px;
    vertical-align: top;
}
.compare-table th { background: #eff6ff; color: #1d4ed8; font-weight: 700; text-align: center; }
.compare-table td.compare-label { background: #f8fafc; color: #334155; font-weight: 600; }
.compare-table tr:nth-child(even) td { background: #f5f9ff; }
.compare-common {
    margin-top: 8px;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    color: #334155;
}

/* 生活化物理常识卡片 */
.life-anchor-card {
    background: #fff;
    border: 1px solid #d1fae5;
    border-radius: 10px;
    overflow: hidden;
    transition: all .2s;
}
.life-anchor-card:hover { border-color: #34d399; box-shadow: 0 4px 12px rgba(16, 185, 129, .15); }
.life-anchor-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-bottom: 1px solid #d1fae5;
    display: block;
}

/* ============================================================
 * L2 章节落地页五大块：章节导图 / 知识精讲 / 考点清单 / 分类刷题 / 章节测试
 * ============================================================ */

/* 章节导图 */
.l2-mindmap {
    text-align: center;
    padding: 16px;
    background: #f8faff;
    border: 1px solid #e0e7ff;
    border-radius: 14px;
}
.l2-mm-center {
    display: inline-block;
    padding: 8px 30px;
    background: linear-gradient(135deg, #1a365d 0%, #3182ce 100%);
    color: #fff;
    border-radius: 22px;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 16px;
}
.l2-mm-branches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
/* 浅色主题（浅底 + 深字，简洁大气） */
.tone-red    { --tone-bg:#fef2f2; --tone-bd:#fecaca; --tone-fg:#b91c1c; --tone-grad:linear-gradient(135deg,#fca5a5,#ef4444); }
.tone-orange { --tone-bg:#fff7ed; --tone-bd:#fed7aa; --tone-fg:#c2410c; --tone-grad:linear-gradient(135deg,#fdba74,#f97316); }
.tone-green  { --tone-bg:#f0fdf4; --tone-bd:#bbf7d0; --tone-fg:#15803d; --tone-grad:linear-gradient(135deg,#86efac,#22c55e); }
.tone-blue   { --tone-bg:#eff6ff; --tone-bd:#bfdbfe; --tone-fg:#1d4ed8; --tone-grad:linear-gradient(135deg,#93c5fd,#3b82f6); }
.tone-purple { --tone-bg:#faf5ff; --tone-bd:#e9d5ff; --tone-fg:#6b21a8; --tone-grad:linear-gradient(135deg,#d8b4fe,#a855f7); }
.tone-pink   { --tone-bg:#fdf2f8; --tone-bd:#fbcfe8; --tone-fg:#be185d; --tone-grad:linear-gradient(135deg,#f9a8d4,#ec4899); }
.tone-sky    { --tone-bg:#f0f9ff; --tone-bd:#bae6fd; --tone-fg:#0369a1; --tone-grad:linear-gradient(135deg,#7dd3fc,#0ea5e9); }
.tone-mint   { --tone-bg:#ecfdf5; --tone-bd:#a7f3d0; --tone-fg:#047857; --tone-grad:linear-gradient(135deg,#6ee7b7,#10b981); }

.l2-mm-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 18px;
    background: #fff;
    color: var(--tone-fg, #334155);
    border: 1px solid var(--tone-bd, #e2e8f0);
    border-radius: 16px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
    min-width: 150px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.l2-mm-branch:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.l2-mm-emoji { font-size: 26px; line-height: 1; }
.l2-mm-to { font-size: 14px; font-weight: 800; color: var(--tone-fg, #1e293b); }
.l2-mm-label { font-size: 12px; color: #64748b; }
.l2-mm-meta { font-size: 11px; color: #94a3b8; }

/* 知识精讲题型卡（浅色卡片） */
.l2-type-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--tone-bd, #e2e8f0);
    border-radius: 14px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.l2-type-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.l2-type-emoji {
    flex: none;
    font-size: 28px;
    line-height: 1;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tone-bg, #f1f5f9);
    border-radius: 12px;
}
.l2-type-key {
    display: inline-block;
    padding: 2px 9px;
    background: var(--tone-bd, #e0e7ff);
    color: var(--tone-fg, #4338ca);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.l2-type-stat { color: #64748b; }

/* 考点清单分组 */
.l2-exam-group {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    background: #fafbff;
}
.l2-exam-group-title {
    font-size: 14px;
    font-weight: 700;
    color: #4338ca;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef2ff;
}

/* 分类刷题 / 章节测试 入口卡片 */
.l2-entry-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: all .2s;
}
.l2-entry-practice { background: #eef2ff; border: 1px solid #c7d2fe; }
.l2-entry-practice:hover { background: #e0e7ff; border-color: #a5b4fc; }
.l2-entry-test { background: #fffbeb; border: 1px solid #fde68a; }
.l2-entry-test:hover { background: #fef3c7; border-color: #fcd34d; }

/* ============================================================
 * L2 学模块 · 单栏简洁布局（示意图 / 知识点 / 生活常识折叠）
 * ============================================================ */

/* 示意图（静态图替代动态交互模型） */
.model-preview {
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    background: #fafcff;
}
.model-preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 14px;
}

/* 知识点 · 公式列表 */
.kp-list {
    margin-bottom: 16px;
    display: grid;
    gap: 8px;
}

/* 生活化物理常识折叠区 */
.life-details {
    border: 1px solid #d1fae5;
    background: #f0fdf4;
    border-radius: 10px;
    padding: 10px 14px;
}
.life-details summary {
    cursor: pointer;
    font-weight: 700;
    color: #047857;
    font-size: 14px;
    user-select: none;
}

/* 单栏布局块间距（覆盖侧栏时的紧凑样式） */
.l2-block { margin-bottom: 16px; }
.blackboard-box { margin-bottom: 16px; }

/* ============================================================
 * 学模块 · 导航清单折叠（L1 每节 / L2 每题型内容板块折叠）
 * ============================================================ */
.learn-fold {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 10px;
}
.learn-fold > summary {
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
    background: #f8fafc;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.learn-fold > summary:hover { background: #eef2f7; }
.learn-fold > summary::-webkit-details-marker { display: none; }
.learn-fold > summary::before {
    content: "▸";
    color: #6366f1;
    font-weight: bold;
    font-size: 13px;
    transition: transform 0.15s ease;
}
.learn-fold[open] > summary::before { transform: rotate(90deg); }
.learn-fold > .fold-body { padding: 12px 14px; }
.learn-fold-aside > summary { padding: 8px 12px; font-size: 13px; }
.learn-fold-aside > .fold-body { padding: 10px 12px; }

/* ============================================================
 * 学模块 · 导航清单（每节 / 每题型顶部的目录）
 * ============================================================ */
.unit-nav {
    margin-bottom: 14px;
    padding: 10px 14px;
    background: #f5f7ff;
    border: 1px solid #e0e7ff;
    border-radius: 10px;
}
.unit-nav-title {
    font-size: 13px;
    font-weight: 700;
    color: #4338ca;
    margin-bottom: 8px;
}
.nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.nav-list-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid #c7d2fe;
    background: #fff;
    color: #4338ca;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
}
.nav-list-item:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

/* ============================================================
 * 学模块 · 单元折叠块（L1 每单元整体可展开 / 收起）
 * ============================================================ */
.learn-unit {
    padding: 0;
    scroll-margin-top: 70px;
}
.learn-unit > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    user-select: none;
}
.learn-unit > summary::-webkit-details-marker { display: none; }
.unit-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.unit-caret {
    flex: none;
    color: #6366f1;
    font-size: 14px;
    font-weight: bold;
    transition: transform 0.15s ease;
}
.learn-unit[open] > summary .unit-caret { transform: rotate(90deg); }
.learn-unit[open] > summary { border-bottom: 1px solid #e2e8f0; }
.learn-unit > summary:hover { background: #f8fafc; }
.unit-toggle-hint {
    flex: none;
    font-size: 12px;
    color: #94a3b8;
}

/* L1 单元折叠块：浅底 + 深字（简洁大气） */
.l1-unit { overflow: hidden; }
.l1-unit > .unit-summary,
.l1-unit > .unit-summary:hover {
    background: var(--tone-bg, #f8fafc);
    border-bottom: 1px solid var(--tone-bd, #e2e8f0);
}
.l1-unit .unit-caret { color: var(--tone-fg, #6366f1); }
.l1-unit .unit-toggle-hint { color: var(--tone-fg, #94a3b8); opacity: .65; }
.l1-unit .l1-unit-emoji { font-size: 24px; line-height: 1; }
.l1-unit .l1-unit-badge {
    display: inline-block;
    padding: 2px 9px;
    background: var(--tone-bd, #e0e7ff);
    color: var(--tone-fg, #4338ca);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.l1-unit .unit-title { color: var(--tone-fg, #1e293b); }
.l1-unit .unit-sub { color: var(--tone-fg, #64748b); opacity: .78; }
.l1-unit[open] > summary { border-bottom: 1px solid var(--tone-bd, #e2e8f0); }

.unit-body { padding: 16px 20px 20px; }

/* 收起按钮（合上折叠块） */
.fold-close {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
}
.fold-close:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}

/* L2 考点清单折叠块（浅色 summary，类首页风格） */
.l2-exam-fold {
    scroll-margin-top: 70px;
    border: 1px solid var(--tone-bd, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
}
.l2-exam-fold > summary {
    flex-wrap: wrap;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--tone-fg, #334155);
    background: var(--tone-bg, #f8fafc);
    border-bottom: 1px solid var(--tone-bd, #e2e8f0);
}
.l2-exam-fold > summary::before { color: var(--tone-fg, #6366f1); }
.l2-exam-fold > summary:hover { background: var(--tone-bg, #f1f5f9); }
.l2-exam-emoji { font-size: 22px; line-height: 1; }
.l2-exam-name { font-weight: 800; color: var(--tone-fg, #1e293b); }
.l2-exam-count { font-size: 12px; color: #94a3b8; font-weight: 400; }
.l2-exam-fold > .fold-body { padding: 14px; background: #fff; }
.l2-kp-fold { background: #f8faff; }

/* ============================================================
 * L3 满分冲刺 · 三大专题折叠块（橙色系）
 * ============================================================ */
.l3-fold { scroll-margin-top: 70px; border: 1px solid #fed7aa; }
.l3-fold > summary {
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
    color: #c2410c;
}
.l3-fold > summary:hover { background: #ffedd5; }
.l3-fold > summary::before { color: #f97316; }
.l3-fold-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f97316;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex: none;
}

/* L3 导航横向渐变方块 */
.l3-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.l3-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 16px;
    color: #fff;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(249, 115, 22, .25);
    transition: transform .18s ease, box-shadow .18s ease;
}
.l3-nav-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(249, 115, 22, .35);
}
.l3-nav-emoji { font-size: 30px; line-height: 1; }
.l3-nav-title { font-size: 15px; font-weight: 800; color: #fff; }
.l3-nav-meta { font-size: 12px; color: rgba(255, 255, 255, .9); }

/* L3 弹窗卡片（点击弹出，不内联展开） */
.l3-card {
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.l3-card-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #fff7ed;
    border: none;
    cursor: pointer;
    text-align: left;
    font-weight: 700;
    font-size: 14px;
    color: #c2410c;
    transition: background .15s;
}
.l3-card-btn:hover { background: #ffedd5; }
.l3-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
}
.l3-modal.open { display: block; }
.l3-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .5);
}
.l3-modal-box {
    position: relative;
    width: min(940px, calc(100vw - 40px));
    max-height: calc(100vh - 24px);
    margin: 12px auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.l3-modal-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #fdba74, #f97316);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}
.l3-modal-close {
    flex: none;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.l3-modal-close:hover { background: rgba(255, 255, 255, .4); }
/* 标题占满左侧剩余空间，让放大键紧挨关闭键停靠在右上角 */
.l3-modal-head > span:first-child { margin-right: auto; }
.l3-modal-zoom {
    flex: none;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s, transform .18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.l3-modal-zoom:hover { background: rgba(255, 255, 255, .4); transform: scale(1.08); }
/* 放大态：接近全屏，方便细看装置图与长内容 */
.l3-modal-box.zoomed {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 12px) !important;
    margin: 6px auto !important;
}
.l3-modal-box.zoomed:has(.l3-flow) {
    grid-template-columns: 168px 1fr;
}
.l3-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 12px;
    overflow-y: auto;
}

/* ============================================================
 * 实验弹窗 · 竖向导航 + 手风琴分步展开（可同时展开多个，方便对照记忆）
 * ============================================================ */
/* 弹窗主体在有竖向导航时改用网格：左侧导航栏 + 右侧内容 + 顶/底栏 */
.l3-modal-box:has(.l3-flow) {
    display: grid;
    grid-template-columns: 152px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "head head"
        "nav  body"
        "foot foot";
}
.l3-modal-box:has(.l3-flow) > .l3-modal-head { grid-area: head; }
.l3-modal-box:has(.l3-flow) > .l3-flow { grid-area: nav; }
.l3-modal-box:has(.l3-flow) > .l3-modal-body { grid-area: body; }
.l3-modal-box:has(.l3-flow) > .l3-stage-foot { grid-area: foot; }

.l3-flow {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 4px;
    padding: 8px 6px;
    background: linear-gradient(180deg, #fff7ed, #fffbeb);
    border-right: 1px solid #fed7aa;
    border-bottom: none;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}
.l3-flow-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 6px 8px;
    border-radius: 10px;
    border: 2px solid #fed7aa;
    background: #fff;
    color: #9a3412;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: transform .18s, background .18s, border-color .18s, color .18s;
}
.l3-flow-node .ico {
    font-size: 14px;
    line-height: 1;
    flex: none;
}
.l3-flow-node:hover {
    transform: translateX(2px);
    border-color: #fb923c;
}
.l3-flow-node.done {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}
.l3-flow-node.done .ico::after {
    content: "✓";
    font-size: 10px;
    margin-left: 1px;
}
.l3-flow-node.cur {
    background: linear-gradient(135deg, #fb923c, #f97316);
    border-color: #f97316;
    color: #fff;
    box-shadow: 0 4px 12px rgba(249, 115, 22, .35);
    animation: l3-pop .45s ease;
}
.l3-flow-node.next-hint {
    animation: l3-pulse 1.5s ease-in-out infinite;
}
/* 横向流程图箭头在竖向布局下隐藏 */
.l3-flow-arrow {
    display: none;
}
@keyframes l3-pop {
    0%   { transform: scale(.92); }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
@keyframes l3-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .45); transform: translateY(0); }
    50%      { box-shadow: 0 0 0 7px rgba(249, 115, 22, 0); transform: translateY(-3px); }
}
.l3-stage { display: none; }
.l3-stage.on {
    display: block;
    animation: l3-fade .32s ease;
}
@keyframes l3-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.l3-stage-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 800;
    color: #c2410c;
    margin-bottom: 6px;
}
.l3-stage-hint {
    font-weight: 400;
    font-size: 11.5px;
    color: #94a3b8;
}
.l3-stage-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 14px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.l3-stage-btn {
    padding: 8px 18px;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: #e2e8f0;
    color: #475569;
    transition: transform .16s, box-shadow .16s;
}
.l3-stage-btn.main {
    background: linear-gradient(135deg, #fb923c, #f97316);
    color: #fff;
    box-shadow: 0 3px 10px rgba(249, 115, 22, .3);
}
.l3-stage-btn.main:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(249, 115, 22, .38); }
.l3-stage-btn:disabled { opacity: .45; cursor: not-allowed; }
.l3-stage-pos {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
}
.l3-stage-pos b { color: #f97316; font-size: 14px; }

/* 现象 / 结论 标记：区分"现象是什么"与"由此得出的结论" */
.mk-phen {
    color: #1d4ed8;
    background: #eff6ff;
    border-radius: 3px;
    padding: 0 3px;
    font-weight: 600;
}
.mk-conc {
    color: #047857;
    background: #ecfdf5;
    border-radius: 3px;
    padding: 0 3px;
    font-weight: 800;
}

/* 「实验现象与结论」卡片：高对比配色 + 图标徽标，一眼抓住重点、加深记忆 */
.l3-obs-card,
.l3-conc-card {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-radius: 12px;
    padding: 10px 14px;
    margin: 8px 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.7;
}
.l3-obs-card {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-left: 6px solid #2563eb;
    color: #1e3a8a;
}
.l3-conc-card {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-left: 6px solid #059669;
    color: #064e3b;
}
.l3-obs-card .l3-badge,
.l3-conc-card .l3-badge {
    flex: none;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    white-space: nowrap;
}
.l3-obs-card .l3-badge { background: #2563eb; box-shadow: 0 2px 6px rgba(37, 99, 235, .4); }
.l3-conc-card .l3-badge { background: #059669; box-shadow: 0 2px 6px rgba(5, 150, 105, .4); }

/* 弹窗两栏：左主内容 + 右「仪器作用」辅助速查 */
.l3-stage-wrap {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.l3-stage-main {
    flex: 1 1 auto;
    min-width: 0;
}
.l3-stage-aside {
    flex: 0 0 220px;
    position: sticky;
    top: 0;
}
.l3-aside-card {
    background: #f8faff;
    border: 1px solid #e0e7ff;
    border-left: 4px solid #818cf8;
    border-radius: 10px;
    padding: 10px 12px;
    max-height: calc(100vh - 290px);
    overflow-y: auto;
}
.l3-aside-card h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 800;
    color: #3730a3;
}
.l3-inst-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.l3-inst-table th,
.l3-inst-table td {
    padding: 4px 3px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px dashed #dbeafe;
}
.l3-inst-table th {
    color: #4338ca;
    font-weight: 700;
}
.l3-inst-table td:first-child {
    color: #1e293b;
    font-weight: 700;
    width: 84px;
}
.l3-inst-table tr:last-child td { border-bottom: none; }

/* 常见元素速查：三列紧凑表 */
.l3-element-table th,
.l3-element-table td { padding: 2px 3px; }
.l3-element-table td:first-child {
    width: 34px;
    color: #4338ca;
    font-family: Consolas, Menlo, monospace;
}
.l3-element-table td:nth-child(2) { color: #1e293b; font-weight: 700; width: 36px; }
.l3-element-table td:nth-child(3) { color: #64748b; text-align: right; }

/* L3 真题题干/答案配图（内联 SVG） */
.l3-exam-figure {
    margin: 8px 0 4px;
    padding: 8px 10px 4px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
}
.l3-exam-figure svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 760px;
    margin: 0 auto;
}
.l3-exam-figure + .border-l-2,
.l3-exam-figure + .space-y-1\.5 { margin-top: 6px; }
@media (max-width: 820px) {
    .l3-stage-wrap { display: block; }
    .l3-stage-aside { position: static; flex: none; margin-top: 12px; }
    /* 窄屏：竖向导航栏变窄，内容更宽 */
    .l3-modal-box:has(.l3-flow) { grid-template-columns: 116px 1fr; }
    .l3-modal-box.zoomed:has(.l3-flow) { grid-template-columns: 128px 1fr; }
    .l3-flow-node { font-size: 11px; padding: 5px 6px; }
}

/* ============================================================
 * 学模块 · 目录首页 & 详情页（返回键 + 导航窗格）
 * ============================================================ */

/* 目录列表 */
.learn-dir-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.learn-dir-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--tone-bd, #e2e8f0);
    border-radius: 14px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.learn-dir-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .10);
}
.learn-dir-emoji { font-size: 28px; line-height: 1; }
.learn-dir-key {
    display: inline-block;
    align-self: flex-start;
    padding: 2px 9px;
    background: var(--tone-bd, #e0e7ff);
    color: var(--tone-fg, #4338ca);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.learn-dir-title { font-size: 15px; font-weight: 800; color: var(--tone-fg, #1e293b); line-height: 1.4; }
.learn-dir-summary { font-size: 13px; color: #64748b; line-height: 1.5; }
.learn-dir-meta { font-size: 11px; color: #94a3b8; margin-top: auto; }

/* 返回键 */
.learn-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 15px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
}
.learn-back-btn:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }

/* 详情页两栏（导航窗格 + 内容） */
.learn-detail-grid {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .learn-detail-grid { grid-template-columns: 1fr; }
}

/* 导航窗格 */
.learn-nav-pane {
    position: sticky;
    top: 90px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px;
}
.learn-nav-pane-title {
    font-size: 13px;
    font-weight: 700;
    color: #4338ca;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}
.learn-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    color: #475569;
    margin-bottom: 4px;
    border: 1px solid transparent;
    transition: all .15s;
}
.learn-nav-item:hover { background: #f1f5f9; }
.learn-nav-item.active {
    background: var(--tone-bg, #eef2ff);
    border-color: var(--tone-bd, #c7d2fe);
    color: var(--tone-fg, #4338ca);
    font-weight: 700;
}
.learn-nav-emoji { flex: none; font-size: 16px; line-height: 1; }
.learn-nav-text { flex: 1; line-height: 1.4; }
.learn-nav-key {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 6px;
    background: var(--tone-bd, #e0e7ff);
    color: var(--tone-fg, #4338ca);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
}

/* 详情页内容容器 */
.learn-unit-page { padding: 0; }

/* ============================================================
 * 图形放大镜（知识框架 / 示意图 SVG 点击放大）
 * ============================================================ */
[data-svg-zoom] { cursor: zoom-in; }
.fs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
}
.fs-lightbox.open { display: block; }
.fs-lightbox-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .6);
}
.fs-lightbox-box {
    position: relative;
    width: min(920px, calc(100vw - 40px));
    max-height: 90vh;
    margin: 30px auto;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.fs-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, .55);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.fs-lightbox-close:hover { background: rgba(15, 23, 42, .8); }
.fs-lightbox-body { padding: 20px; overflow: auto; }

/* ============================================================
 * 首页：可点击元素（章节卡片 / 快捷入口）与不可点击状态徽标
 * ============================================================ */
.home-clickable {
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.home-clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(79, 70, 229, .14);
    border-color: #6366f1;
}
.home-static {
    cursor: default;
    user-select: none;
}

/* ============================================================
 * 首页学习地图：学科 / 册次分组（可折叠）
 * ============================================================ */
.subject-block {
    margin-bottom: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.subject-block > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 800;
    color: #1e293b;
    padding: 12px 16px;
    user-select: none;
}
.subject-block > summary::-webkit-details-marker { display: none; }
.subject-block > summary:hover { background: #f8fafc; }

.book-block { border-top: 1px solid #eef2f7; }
.book-block > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    padding: 9px 16px 9px 20px;
    user-select: none;
}
.book-block > summary::-webkit-details-marker { display: none; }
.book-block > summary:hover { background: #f8fafc; }

.book-body { padding: 0 16px 14px; }

.fold-caret {
    display: inline-block;
    font-size: 12px;
    color: #94a3b8;
    transition: transform .15s ease;
    flex: none;
}
details[open] > summary .fold-caret { transform: rotate(90deg); }

.book-count {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 8px;
    border-radius: 999px;
    margin-left: auto;
}
.placeholder-card {
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    background: #f8fafc;
}

/* 交互模型上方操作说明 */
.model-guide {
    background: #e0e7ff;
    border: 2px solid #818cf8;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.model-guide-title {
    font-size: 14px;
    font-weight: 800;
    color: #3730a3;
    margin-bottom: 8px;
}
.model-guide-item {
    display: flex;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.7;
}
.model-guide-item + .model-guide-item { margin-top: 4px; }

/* ============================================================
 * 化学单元专属样式（concept-grid / key-notes / quiz / summary）
 * 参考 model 页面 + 用户截图风格
 * ============================================================ */

/* ===== 截图2：要点条 key_notes ===== */
.chem-key-notes {
    margin-top: 14px;
    background: #eff6ff;
    border: 2px solid #60a5fa;
    border-radius: 10px;
    padding: 12px 16px;
    line-height: 1.9;
}
.chem-key-notes-title {
    font-size: 14px;
    font-weight: 800;
    color: #1e40af;
    margin-bottom: 8px;
}
.chem-key-notes-list { display: flex; flex-direction: column; gap: 6px; }
.chem-key-notes-item {
    display: flex;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}
.chem-kn-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.chem-kn-text { flex: 1; line-height: 1.7; }
.chem-key-notes-amber {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #92400e;
}
.chem-key-notes-amber .chem-kn-num { background: #f59e0b; }

/* ===== 实验描述 experiment_note（截图5 上方文字） ===== */
.chem-exp-note {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fff7ed;
    border-left: 4px solid #f97316;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #7c2d12;
    line-height: 1.8;
}

/* ===== 截图3、截图5：concept-card 网格 ===== */
.chem-concept-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.chem-concept-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #16a34a;
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.chem-concept-title {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.chem-concept-icon { font-size: 18px; line-height: 1; }
.chem-concept-content {
    font-size: 13px;
    color: #475569;
    line-height: 1.75;
}

/* ===== 陷阱选择题 quiz ===== */
.chem-quiz-fold { border-color: #fed7aa; }
.chem-quiz-fold > summary {
    background: #fff7ed;
    border-bottom-color: #fed7aa;
    color: #c2410c;
}
.chem-quiz-card {
    background: #fffbeb;
    border: 2px dashed #f97316;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.chem-quiz-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: #9a3412;
    margin-bottom: 6px;
}
.chem-quiz-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    flex: none;
}
.chem-tag-pitfall { background: #fee2e2; color: #991b1b; }
.chem-tag-variant { background: #dbeafe; color: #1e40af; }
.chem-tag-method { background: #dcfce7; color: #166534; }
.chem-quiz-question {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 8px 0 10px;
    line-height: 1.6;
}
.chem-quiz-options { display: flex; flex-direction: column; gap: 6px; }
.chem-quiz-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: all .15s;
    line-height: 1.5;
}
.chem-quiz-opt:hover { background: #ecfdf5; border-color: #86efac; color: #166534; }
.chem-quiz-opt.chem-correct,
.chem-quiz-opt.correct {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
    font-weight: 700;
}
.chem-quiz-opt.chem-wrong,
.chem-quiz-opt.wrong {
    background: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}
.chem-quiz-fb { margin-top: 10px; padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; display: none; }
.chem-quiz-fb.chem-qfb-correct,
.chem-quiz-fb.chem-quiz-correct {
    display: block;
    background: #dcfce7;
    color: #166534;
}
.chem-quiz-fb.chem-qfb-wrong,
.chem-quiz-fb.chem-quiz-wrong {
    display: block;
    background: #fee2e2;
    color: #991b1b;
}

/* 答题后显示的解析 explanation */
.chem-quiz-explanation {
    margin-top: 10px;
    padding: 12px 14px;
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: #1e3a8a;
    line-height: 1.85;
}

/* 变形题答案 */
.chem-variant-card .chem-quiz-question { margin-bottom: 10px; }
.chem-variant-btn {
    padding: 6px 14px;
    background: linear-gradient(90deg, #16a34a, #15803d);
    border: none;
    border-radius: 16px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s;
}
.chem-variant-btn:hover { transform: scale(1.04); }
.chem-variant-answer {
    margin-top: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
    line-height: 1.8;
}

/* ===== 核心结论速记 sticky-note ===== */
.chem-summary-sticky {
    background: linear-gradient(135deg, #fff7ed, #fef2f2);
    border: 2px dashed #f97316;
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 14px;
}
.chem-summary-title {
    font-size: 14px;
    font-weight: 800;
    color: #ea580c;
    margin-bottom: 10px;
}
.chem-summary-item {
    font-size: 13px;
    color: #57534e;
    line-height: 1.9;
}

/* 侧栏版：更紧凑 */
.chem-summary-aside {
    padding: 10px 12px;
    margin-top: 0;
}
.chem-summary-aside .chem-summary-title {
    font-size: 13px;
    margin-bottom: 6px;
}
.chem-summary-aside .chem-summary-item {
    font-size: 12px;
    line-height: 1.7;
}

/* ===== 物理变化 / 化学变化 · 判断练习 ===== */
.chem-change-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.chem-change-card {
    border: 1.5px solid #e0e7ff;
    border-radius: 12px;
    padding: 12px 14px;
    background: #fafbff;
}
.chem-change-scene {
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 10px;
}
.chem-change-btns { display: flex; gap: 8px; }
.chem-change-btn {
    flex: 1;
    padding: 7px 0;
    border: 1.5px solid #c7d2fe;
    border-radius: 8px;
    background: #fff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.chem-change-btn:hover { background: #eef2ff; }
.chem-change-btn.chem-correct {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}
.chem-change-btn.chem-wrong {
    background: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}
.chem-change-fb {
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.65;
    display: none;
}
.chem-change-fb.chem-cfb-correct { display: block; color: #166534; font-weight: 600; }
.chem-change-fb.chem-cfb-wrong { display: block; color: #991b1b; font-weight: 600; }

/* 响应式：窄屏时 concepts 单列 */
@media (max-width: 640px) {
    .chem-concept-grid { grid-template-columns: 1fr; }
    .chem-change-grid { grid-template-columns: 1fr; }
}

/* ===== 化学 · 常见元素化学式拼写卡（L1 浮动面板，可拖动） ===== */
.chem-periodic-aside {
    position: fixed;                /* 浮动面板：脱离文档流，不挤占侧栏、不遮挡侧栏卡片 */
    left: auto;
    top: 120px;                     /* 初始位置，JS 载入后会按导航高度校正并接管拖动 */
    right: 16px;
    z-index: 60;
    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid #c7d2fe;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 8px 28px rgba(30, 64, 175, .18);
}
.chem-periodic-aside.chem-dragging {
    box-shadow: 0 14px 36px rgba(30, 64, 175, .30);
    cursor: grabbing;
}
.chem-periodic-head {
    flex: 0 0 auto;
    cursor: grab;                   /* 拖动手柄 */
    user-select: none;
}
.chem-periodic-head:active { cursor: grabbing; }
.chem-drag-grip {
    color: #a5b4fc;
    font-size: 14px;
    letter-spacing: -1px;
}
.chem-periodic-title {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
    color: #4338ca;
    line-height: 1.5;
}
.chem-periodic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;                  /* 允许在 flex 容器内收缩并内部滚动 */
    overflow-y: auto;
    padding-right: 2px;
}
.chem-periodic-cell {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 4px;
    background: #fbfdff;
    cursor: pointer;
    text-align: center;
    width: 100%;
    transition: all .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.chem-periodic-cell:hover { border-color: #93c5fd; background: #eff6ff; }
.chem-periodic-cell.active { border: 2px solid #2563eb; background: #dbeafe; padding: 5px 3px; }
.chem-periodic-name { display: block; font-size: 11px; color: #334155; line-height: 1.4; }
.chem-periodic-cell.active .chem-periodic-name { color: #1e3a8a; font-weight: 700; }

/* —— 化学式拼写卡内部 —— */
.chem-atom-svg {
    width: 100%;
    max-width: 84px;
    margin: 0 auto 2px;
}
.chem-atom-svg-inner { display: block; width: 100%; height: auto; }
.chem-fml-symbol {
    font-size: 20px;
    font-weight: 800;
    color: #1e3a8a;
    line-height: 1.1;
    letter-spacing: .5px;
}
.chem-fml-name {
    font-size: 11px;
    color: #475569;
    margin-top: 1px;
}
.chem-fml-val {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    margin: 2px 0 1px;              /* 位于元素符号正上方（课本写法） */
    line-height: 1.2;
}
.chem-fml-list {
    margin-top: 3px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: center;
}
.chem-fml-item {
    font-size: 11px;
    color: #334155;
    font-family: 'Times New Roman', serif;
}
.chem-fml-item sub { font-size: 8px; }
.chem-fml-legend {
    flex: 0 0 auto;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 10.5px;
}
/* 化合价色标 */
.chem-val-pos { color: #1d4ed8; font-weight: 700; font-size: 10px; }
.chem-val-neg { color: #dc2626; font-weight: 700; font-size: 10px; }
.chem-val-0   { color: #6b7280; font-weight: 600; font-size: 10px; }
.chem-fml-val .chem-val-pos,
.chem-fml-val .chem-val-neg,
.chem-fml-val .chem-val-0 { font-size: 10.5px; }

/* —— 常见原子团（根）的化合价 —— */
.chem-radical-box {
    flex: 0 0 auto;
    margin-top: 7px;
    padding: 6px 8px;
    background: #f5f3ff;
    border: 1px dashed #a78bfa;
    border-radius: 8px;
}
.chem-radical-tag {
    font-size: 11px;
    font-weight: 800;
    color: #6d28d9;
    margin-bottom: 3px;
}
.chem-radical-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
}
.chem-radical {
    font-size: 10.5px;
    color: #4c1d95;
    line-height: 1.5;
    white-space: nowrap;
}
.chem-radical b {
    font-family: 'Times New Roman', serif;
    font-size: 11.5px;
    margin-right: 3px;
}
.chem-radical i {
    font-style: normal;
    font-weight: 800;
    margin-left: 3px;
}

/* —— 化合价默写面板：滚动练习区 / 分组 / 题干 —— */
.chem-val-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}
.chem-val-group { margin-top: 10px; }
.chem-val-group-tag {
    font-size: 11.5px;
    font-weight: 800;
    color: #4338ca;
    margin-bottom: 5px;
}
.chem-val-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.chem-val-ask {
    font-size: 11.5px;
    color: #334155;
    line-height: 1.35;
    text-align: center;
    font-family: 'Times New Roman', serif;
}
.chem-val-ask b { color: #1e3a8a; font-size: 13px; }
.chem-val-ask i {
    display: block;
    font-style: normal;
    font-size: 10px;
    color: #94a3b8;
}

/* —— 化合价口诀 —— */
.chem-val-rhyme {
    flex: 0 0 auto;
    margin-top: 7px;
    padding: 6px 8px;
    background: #fffbeb;
    border: 1px dashed #fbbf24;
    border-radius: 8px;
}
.chem-val-rhyme-tag {
    font-size: 11px;
    font-weight: 800;
    color: #b45309;
    margin-bottom: 2px;
}
.chem-val-rhyme-text {
    font-size: 10.5px;
    line-height: 1.6;
    color: #78350f;
}
.chem-val-rhyme-text b { color: #b91c1c; }
.chem-val-rhyme-note {
    color: #92400e;
    margin-left: 2px;
}

/* —— 默写元素符号 —— */
.chem-write-tip {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 6px;
}
.chem-write-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding-right: 2px;
}
.chem-write-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 4px 4px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fbfdff;
}
.chem-write-cn {
    font-size: 17px;
    font-weight: 800;
    color: #1e3a8a;
    line-height: 1.15;
}
.chem-write-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 2px 4px;
    font-size: 13px;
    font-family: 'Times New Roman', serif;
    text-align: center;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    outline: none;
}
.chem-write-input:focus { border-color: #4f46e5; box-shadow: 0 0 0 2px #e0e7ff; }
.chem-write-mark {
    font-size: 10px;
    line-height: 1.3;
    min-height: 13px;
    font-weight: 700;
}
.chem-write-item.is-ok { border-color: #22c55e; background: #f0fdf4; }
.chem-write-item.is-ok .chem-write-mark { color: #15803d; }
.chem-write-item.is-ok .chem-write-input { border-color: #86efac; }
.chem-write-item.is-bad { border-color: #f87171; background: #fef2f2; }
.chem-write-item.is-bad .chem-write-mark { color: #dc2626; }
.chem-write-item.is-bad .chem-write-input { border-color: #fca5a5; }
.chem-write-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed #e2e8f0;
}
.chem-write-btn {
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    background: #4f46e5;
    border: 1px solid #4f46e5;
    border-radius: 7px;
    cursor: pointer;
    transition: all .15s;
}
.chem-write-btn:hover { background: #4338ca; }
.chem-write-btn-ghost {
    color: #4f46e5;
    background: #eef2ff;
    border-color: #c7d2fe;
}
.chem-write-btn-ghost:hover { background: #e0e7ff; }
.chem-write-score {
    font-size: 11.5px;
    font-weight: 800;
    color: #1d4ed8;
    margin-left: auto;
}
/* 化学式：输入时实时显示的规范写法（数字为右下角脚标） */
.chem-write-preview {
    min-height: 15px;
    font-size: 13px;
    font-weight: 700;
    color: #1d4ed8;
    font-family: 'Times New Roman', serif;
    line-height: 1.2;
    word-break: break-all;
}
.chem-write-preview:empty { display: none; }

/* 单栏（窄屏）下浮动面板收窄，避免占满屏幕 */
@media (max-width: 1023px) {
    .chem-periodic-aside {
        width: 300px;
        max-height: calc(100vh - 140px);
    }
    .chem-periodic-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}