/* 基础样式 */
body { background-color: #f3f4f6; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* 动效 */
.loader { width: 20px; height: 20px; border: 3px solid #e5e7eb; border-top-color: #059669; border-radius: 50%; animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.fade-in { animation: fadeIn 0.5s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 文章样式 */
.prose { color: #374151; max-width: 100%; }
.prose h1 { font-size: 2.2em; font-weight: 800; color: #111827; margin-bottom: 0.6em; }
.prose h2 { font-size: 1.6em; font-weight: 700; color: #1f2937; margin-top: 1.5em; border-left: 5px solid #059669; padding-left: 15px; }
.prose p { margin-bottom: 1.2em; line-height: 1.8; font-size: 1.05rem; }
.prose img { max-width: 100%; border-radius: 8px; margin: 1.5em auto; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: block; }

/* 视频卡片 */
.video-card { display: block; position: relative; width: 100%; max-width: 600px; margin: 2em auto; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.video-card img.cover { width: 100%; opacity: 0.8; margin: 0; }
.video-card .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(0,0,0,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.video-card .play-btn::after { content: ''; border-left: 15px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; }

/* 选题卡片 */
.theme-option { cursor: pointer; border: 2px solid #e5e7eb; transition: all 0.2s; }
.theme-option:hover { border-color: #059669; background-color: #ecfdf5; }
.theme-option.selected { border-color: #059669; background-color: #d1fae5; ring: 2px solid #059669; }