* { margin:0;padding:0;box-sizing:border-box}
html { -webkit-text-size-adjust: 100%; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#fff; color:#1d1d1f; line-height:1.5; -webkit-font-smoothing: antialiased; }
a { color:#0071e3; text-decoration:none}
a:hover { text-decoration:underline}
.container { max-width:100%; margin:0 auto; padding:0 16px}

.header { padding:24px 0; text-align:center}
.header h1 { font-size:28px; font-weight:600; letter-spacing:-0.015em; margin-bottom:8px}

.card { background:#f5f5f7; border-radius:16px; padding:20px; margin:16px 0}
.card h2 { font-size:22px; font-weight:600; margin-bottom:16px}
.btn { display:inline-block; background:#0071e3; color:#fff; padding:14px 28px; border-radius:980px; font-size:17px; border:none; cursor:pointer; margin:6px; min-height:48px; touch-action: manipulation; }
.btn:hover { background:#0077ed}
.btn:active { transform: scale(0.98); }
.btn-outline { background:transparent; border:2px solid #0071e3; color:#0071e3}
.btn-outline:hover { background:#0071e3; color:#fff}

/* 选项布局 - 移动端优先，单列 */
.grid { display:flex; flex-direction:column; gap:12px}
.option { background:#fff; border:2px solid #e5e5e7; border-radius:12px; padding:16px; cursor:pointer; transition:all 0.2s; min-height:56px; display:flex; align-items:center; font-size:16px; touch-action: manipulation; }
.option:hover { border-color:#0071e3}
.option.selected { border-color:#0071e3; background:#e8f4ff}
.option.correct { border-color:#34c759; background:#e8fae9}
.option.incorrect { border-color:#ff3b30; background:#ffebeb}

/* 确保选项内文字换行 */
.option span { word-break: break-word; }

.explanation { margin-top:24px; padding:20px; background:#f5f5f7; border-radius:12px}
.explanation h3 { font-size:18px; margin-bottom:12px}

.video-page { display:flex; flex-direction:column; gap:16px; }
.video-sidebar { width:100%; background:#f5f5f7; border-radius:16px; padding:16px; overflow-y:auto; max-height:40vh; }
.video-player { width:100%; min-height:200px; background:#000; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff}
.video-item { padding:14px; border-radius:8px; cursor:pointer; min-height:48px; }
.video-item:hover { background:#e5e5e7}
.video-item.active { background:#0071e3; color:#fff}

.nav { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:20px 0}
.qrcode { text-align:center; margin:24px 0}

/* 移除旧的多列布局样式 */
.grid.grid-1x3,
.grid.grid-2x2 {
    flex-direction: column !important;
}