From e5470f9f62ffec0e61e09a1961865fb7826ac2a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A4=A9=E9=AA=84?= <5307576@qq.com>
Date: Mon, 1 Jun 2026 15:35:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=95=99=E5=AD=A6?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/cases.ts                |  23 +-
 pages.json                  |   7 +
 pages/cases/cases.vue       |  82 +++-
 pages/teaching/teaching.vue | 845 ++++++++++++++++++++++++++++++++++++
 4 files changed, 947 insertions(+), 10 deletions(-)
 create mode 100644 pages/teaching/teaching.vue

diff --git a/api/cases.ts b/api/cases.ts
index 5a94d56..f24a4ec 100644
--- a/api/cases.ts
+++ b/api/cases.ts
@@ -1,3 +1,5 @@
+export type CaseMode = 'training' | 'teaching'
+
 export type ClinicalCase = {
 	id: string
 	title: string
@@ -8,6 +10,7 @@ export type ClinicalCase = {
 	scene: string
 	caseNo: string
 	tone: 'blue' | 'teal' | 'pink' | 'orange' | 'purple' | 'green'
+	mode: CaseMode
 }
 
 export function fetchCaseList(): Promise<ClinicalCase[]> {
@@ -21,7 +24,8 @@ export function fetchCaseList(): Promise<ClinicalCase[]> {
 			department: '风湿免疫科',
 			scene: '门诊部',
 			caseNo: '31190016',
-			tone: 'blue'
+			tone: 'blue',
+			mode: 'training'
 		},
 		{
 			id: 'case-31180002',
@@ -32,7 +36,8 @@ export function fetchCaseList(): Promise<ClinicalCase[]> {
 			department: '风湿免疫科',
 			scene: '住院部',
 			caseNo: '31180002',
-			tone: 'teal'
+			tone: 'teal',
+			mode: 'training'
 		},
 		{
 			id: 'case-2238015',
@@ -43,18 +48,20 @@ export function fetchCaseList(): Promise<ClinicalCase[]> {
 			department: '妇科',
 			scene: '住院部',
 			caseNo: '2238015',
-			tone: 'pink'
+			tone: 'pink',
+			mode: 'training'
 		},
 		{
 			id: 'case-1006004',
 			title: '持续胸痛3小时',
-			patientName: '毕波涛',
+			patientName: '陈先生',
 			gender: '男',
 			age: 60,
 			department: '心血管内科',
 			scene: '住院部',
 			caseNo: '1006004',
-			tone: 'orange'
+			tone: 'orange',
+			mode: 'teaching'
 		},
 		{
 			id: 'case-31190042',
@@ -65,7 +72,8 @@ export function fetchCaseList(): Promise<ClinicalCase[]> {
 			department: '呼吸内科',
 			scene: '普通门诊',
 			caseNo: '31190042',
-			tone: 'purple'
+			tone: 'purple',
+			mode: 'training'
 		},
 		{
 			id: 'case-2238019',
@@ -76,7 +84,8 @@ export function fetchCaseList(): Promise<ClinicalCase[]> {
 			department: '泌尿外科',
 			scene: '急诊留观',
 			caseNo: '2238019',
-			tone: 'green'
+			tone: 'green',
+			mode: 'training'
 		}
 	])
 }
diff --git a/pages.json b/pages.json
index 9e9c099..7089a88 100644
--- a/pages.json
+++ b/pages.json
@@ -49,6 +49,13 @@
 				"navigationBarTitleText": "临床对话"
 			}
 		},
+		{
+			"path": "pages/teaching/teaching",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "教学模式"
+			}
+		},
 		{
 			"path": "pages/diagnosis/diagnosis",
 			"style": {
diff --git a/pages/cases/cases.vue b/pages/cases/cases.vue
index b167f34..c843ff1 100644
--- a/pages/cases/cases.vue
+++ b/pages/cases/cases.vue
@@ -6,6 +6,13 @@
 		@open-profile="emit('open-profile')"
 		@go-home="emit('go-home')"
 	/>
+	<TeachingPage
+		v-else-if="showTeachingPage"
+		:case-item="selectedCase"
+		@open-settings="emit('open-settings')"
+		@open-profile="emit('open-profile')"
+		@go-home="emit('go-home')"
+	/>
 	<view v-else class="cases-page">
 		<view class="case-shell">
 			<view class="case-header">
@@ -40,6 +47,7 @@
 						v-for="item in filteredCases"
 						:key="item.id"
 						class="case-card"
+						:class="`mode-${item.mode}`"
 						@click="selectCase(item)"
 					>
 						<view class="case-main">
@@ -55,6 +63,10 @@
 						</view>
 						<view class="case-footer">
 							<text class="case-no">病例编号: {{ item.caseNo }}</text>
+							<view class="mode-badge" :class="`mode-badge-${item.mode}`">
+								<view class="mode-icon" :class="`mode-icon-${item.mode}`"></view>
+								<text>{{ getModeLabel(item.mode) }}</text>
+							</view>
 						</view>
 					</view>
 
@@ -71,8 +83,10 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { fetchCaseList, type ClinicalCase } from '../../api/cases'
+import { onLoad } from '@dcloudio/uni-app'
+import { fetchCaseList, type CaseMode, type ClinicalCase } from '../../api/cases'
 import ScenarioPage from '../scenario/scenario.vue'
+import TeachingPage from '../teaching/teaching.vue'
 
 const emit = defineEmits<{
 	(event: 'open-settings'): void
@@ -86,14 +100,17 @@ const toastMessage = ref('')
 const toastVisible = ref(false)
 const selectedCase = ref<ClinicalCase | null>(null)
 const showScenarioPage = ref(false)
+const showTeachingPage = ref(false)
+const modeFilter = ref<CaseMode | ''>('')
 
 let toastTimer: ReturnType<typeof setTimeout> | null = null
 
 const filteredCases = computed(() => {
 	const value = keyword.value.trim().toLowerCase()
-	if (!value) return cases.value
+	const source = modeFilter.value ? cases.value.filter(item => item.mode === modeFilter.value) : cases.value
+	if (!value) return source
 
-	return cases.value.filter(item => {
+	return source.filter(item => {
 		return [
 			item.title,
 			item.patientName,
@@ -106,6 +123,10 @@ const filteredCases = computed(() => {
 	})
 })
 
+function getModeLabel(mode: CaseMode) {
+	return mode === 'teaching' ? '教学模式' : '训练模式'
+}
+
 function loadCases() {
 	fetchCaseList().then(result => {
 		cases.value = result
@@ -114,7 +135,12 @@ function loadCases() {
 
 function selectCase(item: ClinicalCase) {
 	uni.setStorageSync('clinical-thinking-selected-case', item)
+	uni.setStorageSync('clinical-thinking-case-mode', item.mode)
 	selectedCase.value = item
+	if (item.mode === 'teaching') {
+		showTeachingPage.value = true
+		return
+	}
 	showScenarioPage.value = true
 }
 
@@ -131,6 +157,13 @@ function showToast(message: string) {
 	}, 2200)
 }
 
+onLoad(query => {
+	const mode = query?.mode
+	if (mode === 'teaching' || mode === 'training') {
+		modeFilter.value = mode
+	}
+})
+
 onMounted(loadCases)
 
 onUnmounted(() => {
@@ -296,6 +329,10 @@ page {
 	gap: 8px;
 }
 
+.case-card.mode-teaching {
+	border-color: rgba(0, 71, 141, 0.22);
+}
+
 .case-card:active {
 	transform: scale(0.99);
 }
@@ -411,6 +448,45 @@ page {
 	font-weight: 600;
 }
 
+.mode-badge {
+	flex: 0 0 auto;
+	height: 24px;
+	padding: 0 8px;
+	border-radius: 999px;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	font-size: 11px;
+	line-height: 16px;
+	font-weight: 700;
+}
+
+.mode-badge-training {
+	background: #ecedf6;
+	color: #424752;
+}
+
+.mode-badge-teaching {
+	background: #d6e3ff;
+	color: #00478d;
+}
+
+.mode-icon {
+	width: 14px;
+	height: 14px;
+	background: currentColor;
+}
+
+.mode-icon-training {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2016.2l-3.5-3.5L4%2014.2%209%2019%2020%208l-1.5-1.5L9%2016.2z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2016.2l-3.5-3.5L4%2014.2%209%2019%2020%208l-1.5-1.5L9%2016.2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.mode-icon-teaching {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%203L1%209l11%206%209-4.91V17h2V9L12%203zm0%202.28L18.85%209%2012%2012.72%205.15%209%2012%205.28zM5%2013.18v3.2C6.63%2018.24%209.26%2019%2012%2019s5.37-.76%207-2.62v-3.2l-7%203.82-7-3.82z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%203L1%209l11%206%209-4.91V17h2V9L12%203zm0%202.28L18.85%209%2012%2012.72%205.15%209%2012%205.28zM5%2013.18v3.2C6.63%2018.24%209.26%2019%2012%2019s5.37-.76%207-2.62v-3.2l-7%203.82-7-3.82z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
 .empty-state {
 	padding: 40px 0;
 	text-align: center;
diff --git a/pages/teaching/teaching.vue b/pages/teaching/teaching.vue
new file mode 100644
index 0000000..664980a
--- /dev/null
+++ b/pages/teaching/teaching.vue
@@ -0,0 +1,845 @@
+<template>
+	<view class="teaching-page">
+		<view class="teaching-shell">
+			<view class="top-nav">
+				<button class="icon-button" aria-label="设置" @click="emit('open-settings')">
+					<view class="settings-icon"></view>
+				</button>
+				<button class="icon-button home-button" aria-label="首页" @click="emit('go-home')">
+					<view class="home-icon"></view>
+				</button>
+				<view class="nav-spacer"></view>
+				<button class="icon-button" aria-label="个人中心" @click="emit('open-profile')">
+					<view class="account-icon"></view>
+				</button>
+			</view>
+
+			<view class="patient-header">
+				<text class="case-heading">患者：{{ patient.name }} ({{ complaintShort }})</text>
+				<view class="patient-meta">
+					<text>姓名：{{ patient.name }}</text>
+					<text>性别：{{ patient.gender }}</text>
+					<text>年龄：{{ patient.age }}岁</text>
+					<text>科室：{{ patient.department }}</text>
+				</view>
+			</view>
+
+			<scroll-view class="teaching-body" scroll-y>
+				<view class="mentor-section">
+					<view class="mentor-profile">
+						<view class="mentor-avatar">
+							<image src="/static/config-doctor.png" mode="aspectFill"></image>
+						</view>
+						<view class="online-dot"></view>
+						<text class="mentor-name">王主任</text>
+					</view>
+					<view class="question-bubble">
+						<text>{{ currentQuestion.question }}</text>
+					</view>
+				</view>
+
+				<view v-if="showVideoView" class="video-section">
+					<view class="video-player" @click="toggleVideoPlay">
+						<view class="video-poster" :class="{ playing: videoPlaying }">
+							<view class="heart-visual">
+								<view class="heart-core"></view>
+								<view class="heart-pulse pulse-one"></view>
+								<view class="heart-pulse pulse-two"></view>
+							</view>
+						</view>
+						<view class="video-overlay">
+							<view class="play-button" :class="{ playing: videoPlaying }">
+								<view class="play-icon"></view>
+							</view>
+						</view>
+						<view class="video-progress">
+							<view class="video-progress-fill" :style="{ width: videoPlaying ? '62%' : '33%' }"></view>
+						</view>
+					</view>
+					<view class="video-copy">
+						<text class="video-title">{{ currentQuestion.videoTitle }}</text>
+						<text class="video-desc">{{ currentQuestion.videoDesc }}</text>
+					</view>
+				</view>
+
+				<view v-else class="option-list">
+					<button
+						v-for="option in currentQuestion.options"
+						:key="option.key"
+						class="option-card"
+						:class="getOptionClass(option.key)"
+						@click="selectOption(option.key)"
+					>
+						<text class="option-key">{{ option.key }}</text>
+						<text class="option-text">{{ option.text }}</text>
+						<view v-if="selectedOption === option.key && option.key !== currentQuestion.correctOption" class="wrong-icon"></view>
+						<view v-if="selectedOption === option.key && option.key === currentQuestion.correctOption" class="right-icon"></view>
+					</button>
+				</view>
+
+				<view v-if="!showVideoView && selectedOption" class="analysis-card">
+					<view class="analysis-title">
+						<view class="bulb-icon"></view>
+						<text>答案解析</text>
+					</view>
+					<view class="analysis-content">
+						<text class="analysis-main">{{ currentQuestion.analysis }}</text>
+						<view class="analysis-divider"></view>
+						<text class="analysis-note">{{ currentQuestion.note }}</text>
+					</view>
+				</view>
+
+				<view class="bottom-actions">
+					<button v-if="!showVideoView" class="video-button" @click="handleWatchVideo">
+						<view class="video-icon"></view>
+						<text>查看知识点视频</text>
+					</button>
+					<button class="next-button" @click="handleNextQuestion">
+						<text>下一题</text>
+						<view class="next-icon"></view>
+					</button>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { ClinicalCase } from '../../api/cases'
+
+const props = defineProps<{
+	caseItem: ClinicalCase | null
+}>()
+
+const emit = defineEmits<{
+	(event: 'open-settings'): void
+	(event: 'open-profile'): void
+	(event: 'go-home'): void
+}>()
+
+type OptionKey = 'A' | 'B' | 'C' | 'D'
+
+type TeachingQuestion = {
+	id: string
+	question: string
+	options: Array<{ key: OptionKey; text: string }>
+	correctOption: OptionKey
+	defaultSelected?: OptionKey
+	analysis: string
+	note: string
+	videoTitle: string
+	videoDesc: string
+}
+
+const questions: TeachingQuestion[] = [
+	{
+		id: 'acs-ecg',
+		question: '根据陈先生目前的临床表现（急性剧烈胸痛伴大汗），首选的初步辅助检查应该是哪一项？',
+		options: [
+			{ key: 'A', text: '胸部增强CT (CTA)' },
+			{ key: 'B', text: '血清心肌酶学检查' },
+			{ key: 'C', text: '心脏彩色多普勒超声' },
+			{ key: 'D', text: '床边12导联心电图' }
+		],
+		correctOption: 'D',
+		defaultSelected: 'B',
+		analysis: '解析：对于疑似急性冠脉综合征（ACS）的患者，18导联或12导联心电图是首选且最快捷的辅助检查工具。',
+		note: '心肌酶学检查虽然重要，但通常在症状发作2-4小时后才会升高，不能作为首诊即刻排除依据。你的选择偏慢了。正确选项应为 D。',
+		videoTitle: '临床知识点：急性冠脉综合征的早期识别',
+		videoDesc: '本视频将由王主任为您深入解析 ACS 的典型心电图表现与急诊处理流程。'
+	},
+	{
+		id: 'aortic-dissection',
+		question: '若患者胸痛呈撕裂样并伴双上肢血压明显不对称，下一步最需要警惕的疾病是什么？',
+		options: [
+			{ key: 'A', text: '急性主动脉夹层' },
+			{ key: 'B', text: '稳定型心绞痛' },
+			{ key: 'C', text: '肋软骨炎' },
+			{ key: 'D', text: '胃食管反流病' }
+		],
+		correctOption: 'A',
+		analysis: '解析：突发撕裂样胸背痛、血压或脉搏不对称、神经系统症状等均提示主动脉夹层风险，需要快速识别并优先排查。',
+		note: '主动脉夹层是胸痛鉴别诊断中的高危疾病，漏诊风险极高。正确选项应为 A。',
+		videoTitle: '临床知识点：主动脉夹层的危险信号',
+		videoDesc: '本视频讲解主动脉夹层的典型表现、床旁识别线索与 CTA 检查时机。'
+	},
+	{
+		id: 'nitroglycerin',
+		question: '疑似急性冠脉综合征患者使用硝酸甘油前，最应该先评估哪一项？',
+		options: [
+			{ key: 'A', text: '患者是否空腹' },
+			{ key: 'B', text: '血压水平及禁忌证' },
+			{ key: 'C', text: '白细胞计数' },
+			{ key: 'D', text: '既往疫苗接种史' }
+		],
+		correctOption: 'B',
+		analysis: '解析：硝酸甘油可降低血压，使用前应评估收缩压、右室梗死风险、近期 PDE-5 抑制剂使用等禁忌证。',
+		note: '急诊处理强调先评估风险再给药，避免因低血压或禁忌证导致病情恶化。正确选项应为 B。',
+		videoTitle: '临床知识点：胸痛患者硝酸甘油使用要点',
+		videoDesc: '本视频梳理硝酸甘油的适应证、禁忌证及急诊场景下的用药安全。'
+	}
+]
+
+const questionIndex = ref(0)
+const selectedOption = ref<OptionKey | ''>(questions[0].defaultSelected || '')
+const showVideoView = ref(false)
+const videoPlaying = ref(false)
+
+const patient = computed(() => ({
+	name: props.caseItem?.patientName || '陈先生',
+	gender: props.caseItem?.gender || '男',
+	age: props.caseItem?.age || 60,
+	department: props.caseItem?.department || '心血管内科',
+	chiefComplaint: props.caseItem?.title || '持续胸痛3小时'
+}))
+
+const complaintShort = computed(() => {
+	if (patient.value.chiefComplaint.includes('胸痛')) return '胸痛'
+	return patient.value.chiefComplaint.slice(0, 6)
+})
+
+const currentQuestion = computed(() => questions[questionIndex.value])
+
+function selectOption(key: OptionKey) {
+	selectedOption.value = key
+}
+
+function getOptionClass(key: OptionKey) {
+	if (selectedOption.value !== key) return ''
+	return key === currentQuestion.value.correctOption ? 'selected-correct' : 'selected-wrong'
+}
+
+function handleWatchVideo() {
+	showVideoView.value = true
+	videoPlaying.value = false
+}
+
+function handleNextQuestion() {
+	const nextIndex = (questionIndex.value + 1) % questions.length
+	questionIndex.value = nextIndex
+	selectedOption.value = questions[nextIndex].defaultSelected || ''
+	showVideoView.value = false
+	videoPlaying.value = false
+	uni.setStorageSync('clinical-thinking-teaching-question', {
+		caseId: props.caseItem?.id || '',
+		questionId: questions[nextIndex].id,
+		index: nextIndex
+	})
+}
+
+function toggleVideoPlay() {
+	videoPlaying.value = !videoPlaying.value
+}
+</script>
+
+<style>
+page {
+	min-height: 100%;
+	background: #e7e8f0;
+}
+
+.teaching-page {
+	min-height: 100vh;
+	background: #e7e8f0;
+	color: #191c21;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.teaching-shell {
+	position: relative;
+	height: 100vh;
+	overflow: hidden;
+	background: #f2f3fb;
+	display: flex;
+	flex-direction: column;
+}
+
+.top-nav {
+	position: relative;
+	z-index: 20;
+	box-sizing: border-box;
+	height: 56px;
+	padding: 0 20px;
+	border-bottom: 1px solid rgba(194, 198, 212, 0.3);
+	background: rgba(255, 255, 255, 0.82);
+	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(12px);
+	display: flex;
+	align-items: center;
+}
+
+.nav-spacer {
+	flex: 1;
+}
+
+.icon-button {
+	width: 40px;
+	height: 40px;
+	padding: 0;
+	border-radius: 50%;
+	background: transparent;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.icon-button::after {
+	border: 0;
+}
+
+.icon-button:active {
+	background: rgba(25, 28, 33, 0.05);
+}
+
+.home-button {
+	margin-left: 4px;
+}
+
+.settings-icon,
+.home-icon,
+.account-icon {
+	background: #424752;
+}
+
+.settings-icon {
+	width: 22px;
+	height: 22px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.home-icon {
+	width: 23px;
+	height: 23px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.account-icon {
+	width: 24px;
+	height: 24px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.patient-header {
+	position: relative;
+	z-index: 10;
+	padding: 16px 20px;
+	border-bottom: 1px solid rgba(194, 198, 212, 0.2);
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+}
+
+.case-heading {
+	display: block;
+	color: #191c21;
+	font-size: 20px;
+	line-height: 28px;
+	font-weight: 600;
+}
+
+.patient-meta {
+	margin-top: 8px;
+	padding-top: 8px;
+	border-top: 1px solid rgba(194, 198, 212, 0.3);
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px 24px;
+	color: #424752;
+	font-size: 13px;
+	line-height: 20px;
+}
+
+.teaching-body {
+	flex: 1;
+	min-height: 0;
+	padding-bottom: 40px;
+}
+
+.mentor-section {
+	padding: 24px 20px 0;
+	display: flex;
+	align-items: flex-start;
+	gap: 16px;
+}
+
+.mentor-profile {
+	position: relative;
+	flex: 0 0 auto;
+	width: 64px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 6px;
+}
+
+.mentor-avatar {
+	width: 64px;
+	height: 64px;
+	border: 2px solid #ffffff;
+	border-radius: 16px;
+	background: #ffffff;
+	box-shadow: 0 4px 12px rgba(0, 71, 141, 0.16);
+	overflow: hidden;
+	animation: pulse-border 2s infinite;
+}
+
+.mentor-avatar image {
+	width: 100%;
+	height: 100%;
+}
+
+.online-dot {
+	position: absolute;
+	right: 2px;
+	top: 50px;
+	width: 16px;
+	height: 16px;
+	border: 2px solid #ffffff;
+	border-radius: 50%;
+	background: #22c55e;
+	box-shadow: 0 2px 4px rgba(25, 28, 33, 0.16);
+}
+
+.mentor-name {
+	padding: 2px 8px;
+	border-radius: 999px;
+	background: rgba(255, 255, 255, 0.6);
+	color: #191c21;
+	font-size: 12px;
+	line-height: 18px;
+	font-weight: 700;
+}
+
+.question-bubble {
+	position: relative;
+	flex: 1;
+	padding: 16px;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+	border-radius: 16px;
+	background: rgba(255, 255, 255, 0.72);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.06);
+	color: #191c21;
+	font-size: 16px;
+	line-height: 24px;
+}
+
+.question-bubble::after {
+	content: '';
+	position: absolute;
+	left: -8px;
+	top: 24px;
+	width: 0;
+	height: 0;
+	border-top: 8px solid transparent;
+	border-right: 8px solid rgba(255, 255, 255, 0.72);
+	border-bottom: 8px solid transparent;
+}
+
+.video-section {
+	padding: 24px 20px 0;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.video-player {
+	position: relative;
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	border-radius: 16px;
+	background: #050816;
+	box-shadow: 0 8px 20px rgba(25, 28, 33, 0.18);
+	overflow: hidden;
+}
+
+.video-poster {
+	position: absolute;
+	inset: 0;
+	background:
+		radial-gradient(circle at 58% 42%, rgba(169, 199, 255, 0.35), transparent 28%),
+		radial-gradient(circle at 38% 58%, rgba(125, 244, 255, 0.22), transparent 34%),
+		linear-gradient(135deg, #081426 0%, #12345f 52%, #07111f 100%);
+}
+
+.video-poster.playing .heart-pulse {
+	animation-play-state: running;
+}
+
+.heart-visual {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	width: 116px;
+	height: 116px;
+	transform: translate(-50%, -50%);
+}
+
+.heart-core {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	width: 72px;
+	height: 72px;
+	border-radius: 48% 52% 48% 52%;
+	background: linear-gradient(135deg, #ff6b6b, #9f4300);
+	box-shadow: 0 0 32px rgba(255, 182, 145, 0.55);
+	transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.heart-pulse {
+	position: absolute;
+	inset: 0;
+	border: 2px solid rgba(169, 199, 255, 0.62);
+	border-radius: 50%;
+	animation: video-pulse 1.8s ease-out infinite paused;
+}
+
+.pulse-two {
+	animation-delay: 0.75s;
+}
+
+.video-overlay {
+	position: absolute;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.2);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.play-button {
+	width: 64px;
+	height: 64px;
+	border-radius: 50%;
+	background: rgba(0, 71, 141, 0.92);
+	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.play-button.playing {
+	opacity: 0.78;
+}
+
+.play-icon {
+	width: 34px;
+	height: 34px;
+	margin-left: 4px;
+	background: #ffffff;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M8%205v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M8%205v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.play-button.playing .play-icon {
+	margin-left: 0;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M6%205h4v14H6V5zm8%200h4v14h-4V5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M6%205h4v14H6V5zm8%200h4v14h-4V5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.video-progress {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 4px;
+	background: rgba(194, 198, 212, 0.3);
+}
+
+.video-progress-fill {
+	height: 100%;
+	background: #00478d;
+	transition: width 0.24s ease;
+}
+
+.video-copy {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.video-title {
+	color: #191c21;
+	font-size: 20px;
+	line-height: 28px;
+	font-weight: 600;
+}
+
+.video-desc {
+	color: #424752;
+	font-size: 14px;
+	line-height: 22px;
+}
+
+.option-list {
+	padding: 24px 20px 0;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.option-card {
+	box-sizing: border-box;
+	width: 100%;
+	min-height: 72px;
+	padding: 16px;
+	border: 1px solid rgba(194, 198, 212, 0.3);
+	border-radius: 16px;
+	background: rgba(255, 255, 255, 0.72);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.06);
+	display: flex;
+	align-items: center;
+	text-align: left;
+}
+
+.option-card::after {
+	border: 0;
+}
+
+.option-key {
+	flex: 0 0 auto;
+	width: 40px;
+	height: 40px;
+	margin-right: 16px;
+	border-radius: 12px;
+	background: #e1e2ea;
+	color: #424752;
+	font-size: 16px;
+	line-height: 40px;
+	font-weight: 700;
+	text-align: center;
+}
+
+.option-text {
+	flex: 1;
+	min-width: 0;
+	color: #191c21;
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 500;
+}
+
+.option-card.selected-wrong {
+	border: 2px solid #ba1a1a;
+	background: rgba(186, 26, 26, 0.05);
+}
+
+.option-card.selected-wrong .option-key {
+	background: #ba1a1a;
+	color: #ffffff;
+}
+
+.option-card.selected-wrong .option-text {
+	color: #ba1a1a;
+}
+
+.option-card.selected-correct {
+	border: 2px solid #00478d;
+	background: rgba(0, 71, 141, 0.07);
+}
+
+.option-card.selected-correct .option-key {
+	background: #00478d;
+	color: #ffffff;
+}
+
+.wrong-icon,
+.right-icon {
+	position: relative;
+	flex: 0 0 auto;
+	width: 28px;
+	height: 28px;
+	margin-left: 12px;
+	border-radius: 50%;
+}
+
+.wrong-icon {
+	background: #ba1a1a;
+}
+
+.wrong-icon::before,
+.wrong-icon::after {
+	content: '';
+	position: absolute;
+	left: 7px;
+	top: 13px;
+	width: 14px;
+	height: 2px;
+	border-radius: 999px;
+	background: #ffffff;
+}
+
+.wrong-icon::before {
+	transform: rotate(45deg);
+}
+
+.wrong-icon::after {
+	transform: rotate(-45deg);
+}
+
+.right-icon {
+	background: #00478d;
+}
+
+.right-icon::after {
+	content: '';
+	position: absolute;
+	left: 9px;
+	top: 6px;
+	width: 7px;
+	height: 13px;
+	border-right: 3px solid #ffffff;
+	border-bottom: 3px solid #ffffff;
+	transform: rotate(45deg);
+}
+
+.analysis-card {
+	margin: 24px 20px 16px;
+	padding: 24px;
+	border-left: 6px solid #00478d;
+	border-radius: 16px;
+	background: rgba(255, 255, 255, 0.82);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	box-shadow: 0 4px 12px rgba(25, 28, 33, 0.1);
+}
+
+.analysis-title {
+	margin-bottom: 16px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	color: #00478d;
+	font-size: 20px;
+	line-height: 28px;
+	font-weight: 600;
+}
+
+.bulb-icon {
+	width: 22px;
+	height: 22px;
+	background: currentColor;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2021h6v-1.5H9V21zm3-19a7%207%200%200%200-4%2012.74V17c0%20.55.45%201%201%201h6c.55%200%201-.45%201-1v-2.26A7%207%200%200%200%2012%202zm2.85%2011.1-.85.6V16h-4v-2.3l-.85-.6A5%205%200%201%201%2014.85%2013.1z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2021h6v-1.5H9V21zm3-19a7%207%200%200%200-4%2012.74V17c0%20.55.45%201%201%201h6c.55%200%201-.45%201-1v-2.26A7%207%200%200%200%2012%202zm2.85%2011.1-.85.6V16h-4v-2.3l-.85-.6A5%205%200%201%201%2014.85%2013.1z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.analysis-content {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.analysis-main {
+	color: #191c21;
+	font-size: 16px;
+	line-height: 25px;
+}
+
+.analysis-divider {
+	height: 1px;
+	background: rgba(194, 198, 212, 0.2);
+}
+
+.analysis-note {
+	color: #424752;
+	font-size: 14px;
+	line-height: 22px;
+	font-style: italic;
+}
+
+.bottom-actions {
+	padding: 0 20px 40px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.video-button,
+.next-button {
+	box-sizing: border-box;
+	width: 100%;
+	height: 56px;
+	border-radius: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 700;
+	transition: transform 0.18s ease, opacity 0.18s ease;
+}
+
+.video-button::after,
+.next-button::after {
+	border: 0;
+}
+
+.video-button:active,
+.next-button:active {
+	transform: scale(0.98);
+}
+
+.video-button {
+	border: 2px solid rgba(0, 71, 141, 0.2);
+	background: rgba(255, 255, 255, 0.86);
+	color: #00478d;
+}
+
+.next-button {
+	border: 0;
+	background: #00478d;
+	box-shadow: 0 4px 12px rgba(0, 71, 141, 0.22);
+	color: #ffffff;
+}
+
+.video-icon,
+.next-icon {
+	flex: 0 0 auto;
+	width: 22px;
+	height: 22px;
+	background: currentColor;
+}
+
+.video-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M17%2010.5V6c0-.55-.45-1-1-1H4c-.55%200-1%20.45-1%201v12c0%20.55.45%201%201%201h12c.55%200%201-.45%201-1v-4.5l4%204v-11l-4%204zM15%2017H5V7h10v10z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M17%2010.5V6c0-.55-.45-1-1-1H4c-.55%200-1%20.45-1%201v12c0%20.55.45%201%201%201h12c.55%200%201-.45%201-1v-4.5l4%204v-11l-4%204zM15%2017H5V7h10v10z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.next-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%204l1.41%201.41L8.83%2010H20v2H8.83l4.58%204.59L12%2018l-7-7%207-7z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%204l1.41%201.41L8.83%2010H20v2H8.83l4.58%204.59L12%2018l-7-7%207-7z'/%3E%3C/svg%3E") center / contain no-repeat;
+	transform: rotate(180deg);
+}
+
+@keyframes pulse-border {
+	0% {
+		box-shadow: 0 0 0 0 rgba(0, 71, 141, 0.4);
+	}
+	70% {
+		box-shadow: 0 0 0 10px rgba(0, 71, 141, 0);
+	}
+	100% {
+		box-shadow: 0 0 0 0 rgba(0, 71, 141, 0);
+	}
+}
+
+@keyframes video-pulse {
+	0% {
+		opacity: 0.78;
+		transform: scale(0.64);
+	}
+	100% {
+		opacity: 0;
+		transform: scale(1.16);
+	}
+}
+</style>