/* ============================================
   物理动画互动课程系统 - 课程样式 v3.0 (暗色科技风)
   升级：物理主题配色、实验模拟、参数控制、拖拽交互
   ============================================ */

/* 重置与基础 */
.lesson-body {
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    background: #0a0e1a;
    min-height: 100vh;
    color: #e2e8f0;
    margin: 0;
    padding: 0;
}

/* 课程顶部导航栏 */
.lesson-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15,21,36,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #1e293b;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.lesson-navbar .nav-left { display: flex; align-items: center; gap: 12px; }
.lesson-navbar .nav-right { display: flex; align-items: center; gap: 12px; }
.lesson-navbar .back-btn {
    color: #60a5fa; text-decoration: none; font-size: 0.95em;
    padding: 6px 14px; border-radius: 8px; background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.3);
    transition: all 0.3s;
}
.lesson-navbar .back-btn:hover { background: rgba(59,130,246,0.2); }
.lesson-navbar .lesson-breadcrumb { color: #64748b; font-size: 0.85em; }
.lesson-navbar .lesson-breadcrumb a { color: #60a5fa; }

/* 阶段进度指示器 */
.stage-progress {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(59,130,246,0.08);
    padding: 6px 12px;
    border-radius: 8px;
}
.stage-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8em; font-weight: bold;
    background: rgba(59,130,246,0.1);
    color: #60a5fa;
    border: 2px solid rgba(59,130,246,0.2);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}
.stage-dot.active {
    background: #3b82f6;
    color: white;
    border-color: transparent;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(59,130,246,0.4);
}
.stage-dot.completed {
    background: #3b82f6;
    color: white;
    border-color: transparent;
}
.stage-dot:hover { transform: scale(1.1); }
.stage-connector {
    width: 20px; height: 3px;
    background: rgba(59,130,246,0.2);
    border-radius: 2px;
}
.stage-connector.completed { background: #3b82f6; }

.stage-label {
    position: absolute;
    bottom: -22px; left: 50%;
    transform: translateX(-50%);
    font-size: 0.65em; white-space: nowrap;
    color: #64748b; font-weight: normal;
}
.stage-dot.active .stage-label { color: #e2e8f0; font-weight: bold; }

/* 课程主容器 */
.lesson-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

/* 课程封面 */
.lesson-cover {
    background: #141b2d;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 50px 40px;
    text-align: center;
    color: #e2e8f0;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.lesson-cover::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 400px; height: 400px;
    background: rgba(59,130,246,0.08);
    border-radius: 50%;
}
.lesson-cover::after {
    content: '';
    position: absolute;
    bottom: -30%; left: -10%;
    width: 300px; height: 300px;
    background: rgba(59,130,246,0.05);
    border-radius: 50%;
}
.lesson-cover .cover-tag {
    display: inline-block;
    background: rgba(59,130,246,0.15);
    padding: 6px 18px;
    border-radius: 8px;
    font-size: 0.9em;
    margin-bottom: 16px;
    border: 1px solid rgba(59,130,246,0.3);
    color: #60a5fa;
}
.lesson-cover .cover-title {
    font-size: 2.4em;
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
    color: #e2e8f0;
}
.lesson-cover .cover-subtitle {
    font-size: 1.15em;
    opacity: 0.9;
    position: relative;
    z-index: 1;
    color: #64748b;
}
.lesson-cover .cover-start-btn {
    margin-top: 30px;
    padding: 14px 40px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 16px rgba(59,130,246,0.2);
    position: relative;
    z-index: 1;
}
.lesson-cover .cover-start-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(59,130,246,0.3);
}

/* 阶段内容容器 */
.stage-content {
    display: none;
    animation: stageFadeIn 0.5s ease-out;
}
.stage-content.active { display: block; }

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

/* 知识点区域 */
.kp-section {
    background: #141b2d;
    border-radius: 12px;
    padding: 35px;
    margin-bottom: 25px;
    border: 1px solid #1e293b;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.kp-section h2 {
    color: #e2e8f0;
    font-size: 1.5em;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 12px;
}

/* 学习目标卡片 */
.objective-card {
    background: rgba(34,197,94,0.08);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid rgba(34,197,94,0.15);
}
.objective-card h3 {
    color: #4ade80;
    margin: 0 0 12px;
    font-size: 1.15em;
}
.objective-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.objective-list li {
    padding: 8px 0 8px 30px;
    position: relative;
    color: #94a3b8;
    line-height: 1.7;
}
.objective-list li::before {
    content: '✓';
    position: absolute;
    left: 0; top: 8px;
    width: 22px; height: 22px;
    background: #22c55e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: bold;
}

/* 定义框 */
.def-box {
    background: rgba(59,130,246,0.08);
    border-left: 5px solid #3b82f6;
    border-radius: 0 10px 10px 0;
    padding: 22px 26px;
    margin: 20px 0;
}
.def-box .def-label {
    color: #60a5fa;
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.def-box .def-text {
    color: #94a3b8;
    line-height: 1.9;
    font-size: 1.02em;
}

/* 重点提示框 */
.tip-box {
    background: rgba(245,158,11,0.08);
    border-left: 5px solid #f59e0b;
    border-radius: 0 10px 10px 0;
    padding: 22px 26px;
    margin: 20px 0;
}
.tip-box .tip-label {
    color: #f59e0b;
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tip-box .tip-text { color: #94a3b8; line-height: 1.9; }
.tip-box ul { margin: 8px 0 0 20px; }
.tip-box li { margin: 4px 0; }

/* 公式框 */
.formula-box {
    background: rgba(59,130,246,0.06);
    border: 2px solid rgba(59,130,246,0.15);
    border-radius: 10px;
    padding: 20px 26px;
    margin: 20px 0;
    text-align: center;
}
.formula-box .formula {
    font-family: "Times New Roman", "Georgia", serif;
    font-size: 1.4em;
    color: #e2e8f0;
    font-weight: bold;
}
.formula-box .formula-desc {
    color: #64748b;
    font-size: 0.9em;
    margin-top: 8px;
}

/* 物理量卡片 */
.physics-quantity {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 16px 0;
}
.pq-card {
    flex: 1;
    min-width: 180px;
    background: rgba(168,85,247,0.08);
    border-radius: 10px;
    padding: 18px;
    border: 1px solid rgba(168,85,247,0.15);
}
.pq-card .pq-symbol {
    font-family: "Times New Roman", serif;
    font-size: 1.8em;
    color: #d8b4fe;
    font-weight: bold;
    font-style: italic;
}
.pq-card .pq-name {
    color: #c084fc;
    font-size: 0.95em;
    margin: 4px 0;
}
.pq-card .pq-unit {
    color: #a78bfa;
    font-size: 0.85em;
}

/* ============================================
   动画讲解区域
   ============================================ */
.animation-stage {
    background: #141b2d;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    border: 1px solid #1e293b;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.animation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.animation-header h2 {
    color: #e2e8f0;
    font-size: 1.5em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 动画播放控制 */
.anim-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.anim-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.anim-btn-play {
    background: #22c55e;
    color: white;
}
.anim-btn-play:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34,197,94,0.4); }
.anim-btn-reset {
    background: #475569;
    color: white;
    border: 1px solid #64748b;
}
.anim-btn-reset:hover { background: #64748b; }
.anim-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* 动画画布容器 - Canvas区域保持白色背景 */
.anim-canvas-wrap {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #1e293b;
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.anim-canvas-wrap canvas { max-width: 100%; border-radius: 8px; }

/* 动画步骤说明 */
.anim-narration {
    background: rgba(59,130,246,0.08);
    border-radius: 10px;
    padding: 18px 24px;
    margin: 16px 0;
    border: 1px solid rgba(59,130,246,0.15);
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.anim-narration .narr-icon {
    width: 36px; height: 36px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: white;
    flex-shrink: 0;
    animation: narrPulse 2s ease-in-out infinite;
}
@keyframes narrPulse {
    0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59,130,246,0.3); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(59,130,246,0); }
}
.anim-narration .narr-text {
    color: #94a3b8;
    font-size: 1.05em;
    line-height: 1.7;
}
.anim-narration .narr-text strong { color: #e2e8f0; }

/* 动画步骤进度 */
.anim-step-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 0 10px;
}
.anim-step-pill {
    flex: 1;
    height: 6px;
    background: #1e293b;
    border-radius: 3px;
    transition: all 0.3s;
}
.anim-step-pill.active { background: #3b82f6; }
.anim-step-pill.completed { background: #22c55e; }

/* ============================================
   实验模拟区域 (v3.0新增)
   ============================================ */
.experiment-stage {
    background: #141b2d;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    border: 1px solid #1e293b;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.experiment-stage h2 {
    color: #e2e8f0;
    font-size: 1.5em;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 12px;
}
.exp-layout {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.exp-canvas-area {
    flex: 1;
    min-width: 400px;
}
/* Canvas区域保持白色背景 */
.exp-canvas-wrap {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #1e293b;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}
.exp-canvas-wrap canvas { max-width: 100%; border-radius: 8px; }
.exp-controls-area {
    width: 280px;
}
.exp-control-group {
    background: #0f1524;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 14px;
    border: 1px solid #1e293b;
}
.exp-control-group .ecg-title {
    color: #e2e8f0;
    font-weight: bold;
    font-size: 0.95em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.exp-slider-row {
    margin-bottom: 14px;
}
.exp-slider-row label {
    display: flex;
    justify-content: space-between;
    color: #64748b;
    font-size: 0.88em;
    margin-bottom: 6px;
}
.exp-slider-row label .slider-value {
    font-weight: bold;
    color: #3b82f6;
    font-family: "Times New Roman", serif;
}
.exp-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #1e293b;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.exp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: 2px solid #0a0e1a;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.exp-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: 2px solid #0a0e1a;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.exp-data-display {
    background: rgba(34,197,94,0.08);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid rgba(34,197,94,0.15);
}
.exp-data-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(34,197,94,0.1);
    font-size: 0.92em;
}
.exp-data-row:last-child { border-bottom: none; }
.exp-data-row .edr-label { color: #4ade80; }
.exp-data-row .edr-value {
    font-weight: bold;
    color: #22c55e;
    font-family: "Times New Roman", serif;
}
.exp-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.92em;
    transition: all 0.3s;
    font-family: inherit;
    width: 100%;
    margin-bottom: 8px;
}
.exp-btn-run {
    background: #22c55e;
    color: white;
}
.exp-btn-run:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34,197,94,0.4); }
.exp-btn-reset {
    background: #475569;
    color: white;
    border: 1px solid #64748b;
}
.exp-btn-reset:hover { background: #64748b; }

/* 实验结论框 */
.exp-conclusion {
    background: rgba(59,130,246,0.08);
    border-left: 5px solid #3b82f6;
    border-radius: 0 10px 10px 0;
    padding: 18px 24px;
    margin-top: 16px;
}
.exp-conclusion .ec-label {
    color: #60a5fa;
    font-weight: bold;
    margin-bottom: 8px;
}
.exp-conclusion .ec-text {
    color: #94a3b8;
    line-height: 1.8;
}

/* ============================================
   例题区域
   ============================================ */
.example-section {
    background: #141b2d;
    border-radius: 12px;
    padding: 35px;
    margin-bottom: 25px;
    border: 1px solid #1e293b;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.example-section h2 {
    color: #e2e8f0;
    font-size: 1.5em;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 12px;
}

/* 单个例题 */
.ex-item {
    background: rgba(245,158,11,0.06);
    border-left: 5px solid #f59e0b;
    border-radius: 0 10px 10px 0;
    padding: 26px 30px;
    margin-bottom: 24px;
    transition: all 0.3s;
}
.ex-item:hover { box-shadow: 0 4px 16px rgba(245,158,11,0.15); }
.ex-item .ex-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.ex-item .ex-badge {
    background: #f59e0b;
    color: white;
    padding: 4px 14px;
    border-radius: 8px;
    font-size: 0.85em;
    font-weight: bold;
}
.ex-item .ex-title {
    color: #f59e0b;
    font-weight: bold;
    font-size: 1.1em;
}
.ex-item .ex-question {
    color: #94a3b8;
    line-height: 1.8;
    margin-bottom: 16px;
    font-size: 1.05em;
}
.ex-item .ex-question .ex-data {
    background: #0f1524;
    padding: 12px 18px;
    border-radius: 8px;
    display: inline-block;
    margin-top: 8px;
    font-family: "Times New Roman", serif;
    font-size: 1.15em;
    color: #60a5fa;
}

/* 解题步骤 */
.ex-solution {
    margin-top: 18px;
    background: #0f1524;
    border-radius: 10px;
    padding: 20px 24px;
}
.ex-solution .sol-title {
    color: #60a5fa;
    font-weight: bold;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sol-step {
    display: none;
    padding: 14px 18px;
    margin: 10px 0;
    background: #0a0e1a;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    color: #94a3b8;
    line-height: 1.8;
    animation: stepSlideIn 0.4s ease-out;
}
.sol-step.show { display: block; }
@keyframes stepSlideIn {
    from { opacity: 0; transform: translateX(-15px); }
    to { opacity: 1; transform: translateX(0); }
}
.sol-step .step-num {
    display: inline-flex;
    width: 24px; height: 24px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    margin-right: 8px;
    font-weight: bold;
}
.sol-step .step-label {
    font-weight: bold;
    color: #60a5fa;
}
.sol-step .highlight {
    background: rgba(245,158,11,0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}
.sol-answer {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.15);
    border-radius: 8px;
    padding: 14px 20px;
    margin-top: 12px;
    color: #4ade80;
    font-weight: bold;
    font-size: 1.1em;
    display: none;
}
.sol-answer.show { display: block; animation: stepSlideIn 0.4s; }

.ex-controls {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.ex-next-btn {
    padding: 10px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.3s;
    font-family: inherit;
}
.ex-next-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59,130,246,0.4); }
.ex-next-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================
   拓展区域
   ============================================ */
.extend-section {
    background: rgba(168,85,247,0.06);
    border-radius: 12px;
    padding: 35px;
    margin-bottom: 25px;
    border: 1px solid rgba(168,85,247,0.15);
}
.extend-section h2 {
    color: #c084fc;
    font-size: 1.5em;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(168,85,247,0.15);
    padding-bottom: 12px;
}
.extend-card {
    background: #141b2d;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 18px;
    border: 1px solid #1e293b;
    transition: all 0.3s;
}
.extend-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(168,85,247,0.1);
}
.extend-card h3 {
    color: #c084fc;
    margin: 0 0 10px;
    font-size: 1.15em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.extend-card p { color: #94a3b8; line-height: 1.8; }
.extend-card .extend-formula {
    background: rgba(168,85,247,0.08);
    padding: 14px 20px;
    border-radius: 8px;
    margin: 12px 0;
    font-family: "Times New Roman", serif;
    font-size: 1.2em;
    color: #c084fc;
    text-align: center;
}

/* ============================================
   练习区域
   ============================================ */
.practice-section {
    background: #141b2d;
    border-radius: 12px;
    padding: 35px;
    margin-bottom: 25px;
    border: 1px solid #1e293b;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.practice-section h2 {
    color: #e2e8f0;
    font-size: 1.5em;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 12px;
}

/* 交互题目 */
.practice-item {
    background: #0f1524;
    border-radius: 10px;
    padding: 26px 30px;
    margin-bottom: 20px;
    border: 1px solid #1e293b;
    transition: all 0.3s;
}
.practice-item.correct { border-color: #22c55e; background: rgba(34,197,94,0.1); }
.practice-item.wrong { border-color: #ef4444; background: rgba(239,68,68,0.05); }

.practice-item .pr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.practice-item .pr-num {
    background: #3b82f6;
    color: white;
    padding: 4px 14px;
    border-radius: 8px;
    font-size: 0.85em;
    font-weight: bold;
}
.practice-item .pr-difficulty {
    font-size: 0.8em;
    color: #f59e0b;
}
.practice-item .pr-question {
    color: #94a3b8;
    line-height: 1.8;
    font-size: 1.05em;
    margin-bottom: 16px;
}

/* 选择题选项 */
.pr-options { display: flex; flex-direction: column; gap: 10px; }
.pr-option {
    padding: 14px 20px;
    background: #0a0e1a;
    border: 2px solid #1e293b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #94a3b8;
    font-size: 1.02em;
}
.pr-option:hover {
    background: rgba(59,130,246,0.06);
    border-color: rgba(59,130,246,0.4);
    transform: translateX(5px);
}
.pr-option .opt-letter {
    width: 32px; height: 32px;
    background: #1e293b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #64748b;
    flex-shrink: 0;
    transition: all 0.3s;
}
.pr-option.selected { background: rgba(59,130,246,0.15); border-color: #3b82f6; }
.pr-option.selected .opt-letter { background: #3b82f6; color: white; }
.pr-option.correct-answer { background: rgba(34,197,94,0.1); border-color: #22c55e; }
.pr-option.correct-answer .opt-letter { background: #22c55e; color: white; }
.pr-option.wrong-answer { background: rgba(239,68,68,0.1); border-color: #ef4444; }
.pr-option.wrong-answer .opt-letter { background: #ef4444; color: white; }
.pr-option.disabled { pointer-events: none; }

/* 填空题 */
.pr-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #1e293b;
    border-radius: 8px;
    font-size: 1.05em;
    color: #e2e8f0;
    background: #0a0e1a;
    font-family: inherit;
    transition: all 0.3s;
}
.pr-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }

/* 反馈 */
.pr-feedback {
    display: none;
    padding: 14px 20px;
    border-radius: 8px;
    margin-top: 14px;
    animation: stepSlideIn 0.3s;
}
.pr-feedback.show { display: block; }
.pr-feedback.correct {
    background: rgba(34,197,94,0.1);
    border-left: 4px solid #22c55e;
    color: #4ade80;
}
.pr-feedback.wrong {
    background: rgba(239,68,68,0.1);
    border-left: 4px solid #ef4444;
    color: #f87171;
}
.pr-feedback .fb-title { font-weight: bold; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.pr-feedback .fb-explain { color: #94a3b8; line-height: 1.7; font-size: 0.95em; }

.pr-submit-btn {
    margin-top: 14px;
    padding: 10px 28px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.3s;
    font-family: inherit;
}
.pr-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59,130,246,0.4); }
.pr-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 练习结果汇总 */
.pr-summary {
    background: #0f1524;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 30px;
    margin-top: 20px;
    text-align: center;
    display: none;
}
.pr-summary.show { display: block; animation: stageFadeIn 0.5s; }
.pr-summary .summary-score {
    font-size: 3em;
    font-weight: bold;
    color: #60a5fa;
    margin: 10px 0;
}
.pr-summary .summary-label { color: #64748b; font-size: 1.1em; }
.pr-summary .summary-detail {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}
.pr-summary .summary-stat { text-align: center; }
.pr-summary .stat-num { font-size: 1.8em; font-weight: bold; color: #60a5fa; }
.pr-summary .stat-text { color: #64748b; font-size: 0.9em; }

/* 阶段导航按钮 */
.stage-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding: 20px 0;
}
.stage-nav-btn {
    padding: 14px 32px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.05em;
    transition: all 0.3s;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
}
.stage-nav-btn.prev {
    background: #475569;
    color: white;
    border: 2px solid #64748b;
}
.stage-nav-btn.prev:hover { background: #64748b; transform: translateX(-3px); }
.stage-nav-btn.next {
    background: #3b82f6;
    color: white;
}
.stage-nav-btn.next:hover { transform: translateX(3px); box-shadow: 0 4px 16px rgba(59,130,246,0.4); }
.stage-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* 课程完成页 */
.lesson-complete {
    text-align: center;
    padding: 50px 30px;
}
.lesson-complete .complete-icon {
    font-size: 5em;
    animation: bounceIn 0.6s ease-out;
}
@keyframes bounceIn {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.lesson-complete h2 {
    color: #e2e8f0;
    font-size: 2em;
    margin: 20px 0;
}
.lesson-complete p { color: #64748b; font-size: 1.1em; }

/* 进入下一阶段按钮 */
.enter-next-btn {
    display: block;
    margin: 30px auto 0;
    padding: 14px 40px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(59,130,246,0.3);
}
.enter-next-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(59,130,246,0.4);
}

/* 知识点小标题 */
.kp-sub-title {
    color: #60a5fa;
    font-size: 1.15em;
    font-weight: bold;
    margin: 22px 0 10px;
    padding-left: 14px;
    border-left: 4px solid #3b82f6;
}

/* 提示条 */
.hint-bar {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.15);
    border-radius: 8px;
    padding: 10px 18px;
    color: #f59e0b;
    font-size: 0.92em;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 属性列表 */
.prop-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}
.prop-list li {
    padding: 8px 0 8px 28px;
    position: relative;
    color: #94a3b8;
    line-height: 1.7;
}
.prop-list li::before {
    content: '▸';
    position: absolute;
    left: 6px;
    color: #3b82f6;
    font-weight: bold;
}

/* 重做按钮 */
.pr-retry-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 18px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88em;
    font-family: inherit;
    transition: all 0.3s;
}
.pr-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245,158,11,0.4);
}

/* 进度恢复提示 */
.progress-restored-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    background: #3b82f6;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.9em;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 9999;
    animation: toastSlideIn 0.5s ease-out;
    cursor: pointer;
}
@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* 响应式 */
@media (max-width: 768px) {
    .lesson-container { padding: 20px 12px 40px; }
    .kp-section, .animation-stage, .experiment-stage, .example-section, .extend-section, .practice-section { padding: 20px; }
    .lesson-cover { padding: 35px 20px; }
    .lesson-cover .cover-title { font-size: 1.8em; }
    .stage-label { display: none; }
    .stage-dot { width: 28px; height: 28px; font-size: 0.7em; }
    .stage-connector { width: 12px; }
    .anim-controls { flex-wrap: wrap; }
    .exp-layout { flex-direction: column; }
    .exp-controls-area { width: 100%; }
    .exp-canvas-area { min-width: auto; }
}

/* ============ 知识点问答样式 ============ */
.quiz-section { max-width: 700px; margin: 0 auto; padding: 20px 0; }
.quiz-section h2 { text-align:center; color:#e2e8f0; margin-bottom:15px; }
.quiz-intro { text-align:center; color:#64748b; font-size:0.9em; margin-bottom:20px; padding:12px 20px; background:rgba(59,130,246,0.06); border-radius:8px; }
.quiz-progress-bar { width:100%; height:8px; background:#1e293b; border-radius:4px; overflow:hidden; margin-bottom:8px; }
.quiz-progress-fill { height:100%; background:#3b82f6; border-radius:4px; transition:width 0.4s ease; }
.quiz-counter { text-align:center; color:#64748b; font-size:0.85em; margin-bottom:15px; }
.quiz-card { background:#0f1524; border:1px solid #1e293b; border-radius:10px; padding:30px; box-shadow:0 4px 16px rgba(0,0,0,0.3); }
.quiz-question { display:flex; align-items:flex-start; gap:10px; margin-bottom:15px; }
.quiz-q-icon { font-size:1.5em; }
.quiz-q-text { font-size:1.15em; color:#e2e8f0; line-height:1.6; font-weight:500; }
.quiz-hint { color:#64748b; font-size:0.85em; text-align:center; margin-bottom:15px; padding:8px; background:#0a0e1a; border-radius:8px; }
.quiz-answer { background:rgba(34,197,94,0.08); border-left:4px solid #22c55e; border-radius:8px; padding:16px; margin-bottom:20px; animation:quizFadeIn 0.4s ease; }
.quiz-answer-label { color:#4ade80; font-weight:bold; font-size:0.9em; margin-bottom:6px; }
.quiz-answer-text { color:#94a3b8; font-size:1.05em; line-height:1.7; }
.quiz-actions { display:flex; gap:12px; justify-content:center; }
.quiz-btn { padding:10px 28px; border:none; border-radius:8px; font-size:1em; cursor:pointer; transition:all 0.3s; font-weight:bold; }
.quiz-btn:hover { transform:scale(1.05); }
.quiz-btn-reveal { background:#8b5cf6; color:#fff; }
.quiz-btn-correct { background:#22c55e; color:#fff; }
.quiz-btn-wrong { background:#ef4444; color:#fff; }
.quiz-btn-retry { background:#3b82f6; color:#fff; margin-top:15px; }
.quiz-summary { text-align:center; padding:30px; }
.quiz-summary-icon { font-size:3em; margin-bottom:10px; }
.quiz-summary-title { font-size:1.4em; color:#e2e8f0; margin-bottom:10px; }
.quiz-summary-score { font-size:3em; font-weight:bold; color:#60a5fa; margin:10px 0; }
.quiz-summary-detail { display:flex; justify-content:center; gap:30px; margin:20px 0; }
.quiz-stat { text-align:center; }
.quiz-stat-num { font-size:1.8em; font-weight:bold; color:#60a5fa; }
.quiz-stat-text { font-size:0.85em; color:#64748b; }
.quiz-summary-comment { color:#64748b; font-size:0.95em; margin-bottom:20px; }
@keyframes quizFadeIn { from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:translateY(0);} }