/* 题号状态样式系统 - 统一管理，确保犹豫状态绝对优先级 */

/* === 默认题号样式（立即生效，无需JavaScript） === */
.question-hotspot,
[data-question-number],
[class*="question-hotspot"] {
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease-out;
    user-select: none;
    border: none !important;
    outline: none !important;
    /* 默认未作答样式 - 立即显示灰色可点击状态 */
    background: rgba(107, 114, 128, 0.08) !important;
    box-shadow: 0 0 0 1px rgba(107, 114, 128, 0.15) !important;
}

body .question-hotspot:hover,
body [data-question-number]:hover,
body [class*="question-hotspot"]:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4) !important;
    transform: scale(1.02);
}

/* === 基础题号样式 === */

/* === 状态样式定义（使用qs-前缀确保优先级） === */

/* 未作答状态 - 灰色 */
body .qs-unanswered,
body .question-hotspot.qs-unanswered {
    background: rgba(107, 114, 128, 0.08) !important;
    box-shadow: 0 0 0 1px rgba(107, 114, 128, 0.15) !important;
    border: none !important;
}

body .qs-unanswered:hover,
body .question-hotspot.qs-unanswered:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4) !important;
    transform: scale(1.02);
}

/* 已作答状态 - 绿色 */
body .qs-answered,
body .question-hotspot.qs-answered {
    background: rgba(34, 197, 94, 0.12) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.3) !important;
    border: none !important;
}

body .qs-answered:hover,
body .question-hotspot.qs-answered:hover {
    background: rgba(34, 197, 94, 0.18) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.45) !important;
    transform: scale(1.02);
}

/* 犹豫状态 - 黄色（最高优先级，绝对覆盖所有其他状态） */
body .qs-hesitant,
body .question-hotspot.qs-hesitant,
body .qs-hesitant.qs-answered,
body .qs-hesitant.qs-unanswered,
body .question-hotspot.qs-hesitant.qs-answered,
body .question-hotspot.qs-hesitant.qs-unanswered,
body .qs-hesitant.answered,
body .qs-hesitant.unanswered,
body .question-hotspot.qs-hesitant.answered,
body .question-hotspot.qs-hesitant.unanswered {
    background: rgba(217, 195, 104, 0.15) !important;
    box-shadow: 0 0 0 1px rgba(217, 195, 104, 0.4) !important;
    border: none !important;
}

body .qs-hesitant:hover,
body .question-hotspot.qs-hesitant:hover,
body .qs-hesitant.qs-answered:hover,
body .qs-hesitant.qs-unanswered:hover,
body .question-hotspot.qs-hesitant.qs-answered:hover,
body .question-hotspot.qs-hesitant.qs-unanswered:hover,
body .qs-hesitant.answered:hover,
body .qs-hesitant.unanswered:hover,
body .question-hotspot.qs-hesitant.answered:hover,
body .question-hotspot.qs-hesitant.unanswered:hover {
    background: rgba(217, 195, 104, 0.25) !important;
    box-shadow: 0 0 0 1px rgba(217, 195, 104, 0.6) !important;
    transform: scale(1.02);
}

/* 当前题状态 - 蓝色高亮 */
body .qs-current,
body .question-hotspot.qs-current {
    background: rgba(59, 130, 246, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4) !important;
    border: none !important;
}

body .qs-current:hover,
body .question-hotspot.qs-current:hover {
    background: rgba(59, 130, 246, 0.25) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6) !important;
    transform: scale(1.02);
}

/* === 答题卡样式 === */

/* 答题卡未作答 */
body .answer-card-questions .question-item-simple.qs-unanswered {
    background-color: #ffffff;
    border-color: #e5e7eb;
    color: #374151;
}

body .answer-card-questions .question-item-simple.qs-unanswered:hover {
    border-color: #667eea;
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15);
}

/* 答题卡已答题 - 绿色 */
body .answer-card-questions .question-item-simple.qs-answered {
    background-color: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
    color: #059669;
}

body .answer-card-questions .question-item-simple.qs-answered:hover {
    background-color: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.2);
}

/* 答题卡犹豫状态（最高优先级，绝对覆盖所有其他状态） */
body .answer-card-questions .question-item-simple.qs-hesitant,
body .answer-card-questions .question-item-simple.qs-hesitant.qs-answered,
body .answer-card-questions .question-item-simple.qs-hesitant.qs-unanswered,
body .answer-card-questions .question-item-simple.qs-hesitant.answered,
body .answer-card-questions .question-item-simple.qs-hesitant.unanswered {
    background-color: rgba(251, 245, 221, 0.9) !important;
    border-color: rgba(217, 195, 104, 0.6) !important;
    color: #8b7355 !important;
}

body .answer-card-questions .question-item-simple.qs-hesitant:hover,
body .answer-card-questions .question-item-simple.qs-hesitant.qs-answered:hover,
body .answer-card-questions .question-item-simple.qs-hesitant.qs-unanswered:hover,
body .answer-card-questions .question-item-simple.qs-hesitant.answered:hover,
body .answer-card-questions .question-item-simple.qs-hesitant.unanswered:hover {
    background-color: rgba(251, 245, 221, 1) !important;
    border-color: rgba(217, 195, 104, 0.8) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(217, 195, 104, 0.3);
}

/* 答题卡犹豫状态题号颜色 */
body .answer-card-questions .question-item-simple.qs-hesitant .question-number,
body .answer-card-questions .question-item-simple.qs-hesitant.qs-answered .question-number,
body .answer-card-questions .question-item-simple.qs-hesitant.qs-unanswered .question-number,
body .answer-card-questions .question-item-simple.qs-hesitant.answered .question-number,
body .answer-card-questions .question-item-simple.qs-hesitant.unanswered .question-number {
    color: #8b7355 !important;
    font-weight: 600 !important;
}

/* === 兼容旧类名（向后兼容，但确保犹豫状态优先级） === */

/* 犹豫状态的兼容支持 - 确保绝对优先级 */
body .question-hotspot.hesitant,
body .question-hotspot.hesitant.answered,
body .question-hotspot.hesitant.unanswered,
body .hesitant,
body .hesitant.answered,
body .hesitant.unanswered {
    background: rgba(217, 195, 104, 0.15) !important;
    box-shadow: 0 0 0 1px rgba(217, 195, 104, 0.4) !important;
    border: none !important;
}

body .question-hotspot.hesitant:hover,
body .question-hotspot.hesitant.answered:hover,
body .question-hotspot.hesitant.unanswered:hover,
body .hesitant:hover,
body .hesitant.answered:hover,
body .hesitant.unanswered:hover {
    background: rgba(217, 195, 104, 0.25) !important;
    box-shadow: 0 0 0 1px rgba(217, 195, 104, 0.6) !important;
    transform: scale(1.02);
}

/* 其他兼容状态 */
body .question-hotspot.answered {
    background: rgba(34, 197, 94, 0.12) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.3) !important;
    border: none !important;
}

body .question-hotspot.answered:hover {
    background: rgba(34, 197, 94, 0.18) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.45) !important;
    transform: scale(1.02);
}

body .question-hotspot.unanswered {
    background: rgba(107, 114, 128, 0.08) !important;
    box-shadow: 0 0 0 1px rgba(107, 114, 128, 0.15) !important;
    border: none !important;
}

body .question-hotspot.unanswered:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4) !important;
    transform: scale(1.02);
}

body .question-hotspot.current {
    background: rgba(59, 130, 246, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4) !important;
    border: none !important;
}

body .question-hotspot.current:hover {
    background: rgba(59, 130, 246, 0.25) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6) !important;
    transform: scale(1.02);
}

/* === 确保基础样式应用 === */
body [class*="qs-"] {
    border-radius: 6px;
    transition: all 0.15s ease-out;
}

/* 确保状态间的正确层级 */
body [class*="qs-"]:not(.qs-hesitant):not(:hover) {
    transform: none;
}

/* 犹豫状态强制优先级 - 最后声明确保覆盖 */
body .qs-hesitant,
body .question-hotspot.qs-hesitant,
body .hesitant,
body .question-hotspot.hesitant {
    background: rgba(217, 195, 104, 0.15) !important;
    box-shadow: 0 0 0 1px rgba(217, 195, 104, 0.4) !important;
    border: none !important;
    z-index: 1;
}