/* ============================================================
 * exam_practice.css · 「智能答题系统」风格（对齐 s.sd-lingjing.cn/challenge_exam）
 * 仅用于练模块的一题一屏答题界面，类名统一 xp- 前缀，避免影响其它页面
 * 设计令牌取自目标页 tailwind.config：primary #1677FF 等
 * ============================================================ */

.xp-scope {
    --xp-primary: #1677FF;
    --xp-primary-light: #4096FF;
    --xp-primary-dark: #0E66D9;
    --xp-primary-bg: #E8F3FF;
    --xp-danger: #F53F3F;
    --xp-warning: #FF7D00;
    --xp-neutral: #86909C;
    --xp-light: #F2F3F5;
    --xp-dark: #1D2129;
    --xp-border: #E5E7EB;
    color: var(--xp-dark);
    font-family: Inter, system-ui, -apple-system, 'Microsoft YaHei', sans-serif;
}

/* 卡片 */
.xp-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    padding: 20px;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .xp-card { padding: 24px; }
}

.xp-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--xp-dark);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--xp-light);
}

/* 题型标签 / 题号 / 知识点徽标 */
.xp-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: var(--xp-primary-bg);
    color: var(--xp-primary);
}

.xp-counter {
    font-size: 14px;
    font-weight: 600;
    color: var(--xp-neutral);
}

/* 题干 */
.xp-stem {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--xp-dark);
}

.xp-stem img,
.xp-stem .q-image { max-width: 100%; height: auto; margin: 8px 0; }

/* 题干多张图片横排：每行 2 张，窄屏自动单列（对齐目标页 grid-cols-2） */
.xp-stem .xp-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; align-items: flex-start; }
.xp-stem .xp-imgs img { max-width: calc(50% - 5px); margin: 0; }

@media (max-width: 640px) {
    .xp-stem .xp-imgs img { max-width: 100%; }
}

/* 选项 */
.xp-options { display: block; }

.xp-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--xp-border);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}

.xp-option:last-child { margin-bottom: 0; }
.xp-option:hover { background: rgba(22, 119, 255, .05); }
.xp-option.is-selected { border-color: var(--xp-primary); background: rgba(22, 119, 255, .06); }
.xp-option.is-correct { background: rgba(22, 119, 255, .1); border-color: var(--xp-primary); }
.xp-option.is-wrong { background: rgba(245, 63, 63, .1); border-color: var(--xp-danger); }

.xp-option-inner { display: flex; align-items: flex-start; cursor: pointer; width: 100%; }
.xp-radio {
    width: 16px; height: 16px; margin: 3px 12px 0 0; flex: 0 0 auto;
    accent-color: var(--xp-primary);
}
.xp-option-letter { font-weight: 500; margin-right: 8px; flex: 0 0 auto; }
.xp-option-text { flex: 1; line-height: 22px; }

/* 输入类题 */
.xp-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--xp-border);
    border-radius: 8px;
    font-size: 14px;
    line-height: 22px;
    color: var(--xp-dark);
    outline: none;
    transition: border-color .2s;
}
.xp-input:focus { border-color: var(--xp-primary); box-shadow: 0 0 0 3px rgba(22, 119, 255, .12); }
textarea.xp-input { min-height: 96px; resize: vertical; }

/* 按钮 */
.xp-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 24px; }

.xp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .2s, color .2s;
}

.xp-btn-primary { background: var(--xp-primary); color: #fff; }
.xp-btn-primary:hover { background: var(--xp-primary-dark); }
.xp-btn-outline { border-color: var(--xp-primary); color: var(--xp-primary); background: #fff; }
.xp-btn-outline:hover { background: rgba(22, 119, 255, .05); }
.xp-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 反馈条 */
.xp-feedback {
    background: var(--xp-primary-bg);
    border: 1px solid rgba(22, 119, 255, .2);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    font-size: 14px;
}
.xp-feedback .xp-fb-head { display: flex; align-items: center; font-weight: 500; margin-bottom: 8px; }
.xp-feedback .xp-fb-head i { font-style: normal; font-size: 18px; margin-right: 8px; }
.xp-feedback.is-ok .xp-fb-head { color: var(--xp-primary); }
.xp-feedback.is-err .xp-fb-head { color: var(--xp-danger); }
.xp-feedback .xp-fb-meta { color: var(--xp-neutral); font-size: 13px; }
.xp-feedback .xp-fb-answer { margin-top: 8px; font-size: 14px; color: var(--xp-danger); }

/* 解析 */
.xp-analysis {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    padding: 20px;
    margin-bottom: 24px;
}
.xp-analysis h3 { font-size: 16px; font-weight: 600; color: var(--xp-dark); margin-bottom: 12px; }
.xp-analysis .xp-analysis-body { font-size: 14px; line-height: 24px; color: #4E5969; }
.xp-mastery {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--xp-primary-bg);
    font-size: 13px;
    color: var(--xp-dark);
}
.xp-mastery strong { color: var(--xp-primary); }

/* 侧栏统计 */
.xp-side-title { font-size: 15px; font-weight: 600; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--xp-light); }
.xp-info-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 6px 0; }
.xp-info-row .xp-k { color: var(--xp-neutral); flex: 0 0 auto; }
.xp-info-row .xp-v { color: var(--xp-dark); font-weight: 500; text-align: right; }

.xp-stat { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 8px 0; }
.xp-stat .xp-stat-v { font-weight: 600; color: var(--xp-primary); font-variant-numeric: tabular-nums; }

.xp-progress { height: 8px; border-radius: 9999px; background: var(--xp-border); overflow: hidden; margin-top: 6px; }
.xp-progress-fill { height: 100%; background: var(--xp-primary); transition: all .5s cubic-bezier(0, 0, .2, 1); }

/* 空状态 */
.xp-empty { text-align: center; padding: 40px 16px; color: var(--xp-neutral); }

.hidden { display: none !important; }