/* PC/WAP 五档答题卡：与参考图一致的蓝色标题、浅底选项和手动导航。 */
body, body.wap-body { background: linear-gradient(115deg, #f0f7ff, #dfecff); color: #344155; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
#testContainer button, #testContainer h1, #testContainer .question-text { font-family: inherit; }
#testContainer { width: calc(100% - 32px); max-width: 800px; margin: 24px auto 36px; padding: 0; background: #fff; border-radius: 22px; box-shadow: 0 20px 65px #2167bd16; overflow: hidden; }
#testContainer .header, #testContainer .test-header { margin: 0; padding: 22px 20px 20px; text-align: center; background: linear-gradient(32deg, transparent 26%, #ffffff0a 26%, #ffffff0a 72%, transparent 72%), linear-gradient(110deg, #278bff, #186ad7); }
#testContainer h1 { color: #fff; font-size: 30px; font-weight: 750; letter-spacing: 0; line-height: 1.4; margin: 0 0 8px; }
#testContainer .header p, #testContainer .test-header p { margin: 0; color: #e1efff; font-size: 16px; line-height: 1.6; }
#testContainer .progress-container, #testContainer .progress-wrap { max-width: none; margin: 0; padding: 16px 24px; background: #f7faff; border: 0; border-bottom: 1px solid #edf3fb; border-radius: 0; box-shadow: none; }
.progress-label, .progress-text { margin-bottom: 10px; gap: 12px; }
.progress-text-main, .progress-text { color: #657487; font-size: 14px; font-weight: 500; }
.progress-bar-bg, #testContainer .progress-bar { height: 9px; background: #e3edfa; border-radius: 8px; }
#mainProgress { height: 100%; background: linear-gradient(90deg, #298cff, #176bd9); border-radius: 8px; transition: width .2s; }
.progress-meta { font-size: 12px; font-weight: 400; margin-top: 10px; }
.progress-dimension { display: none; }
#testContainer .question-card, #testContainer .question-box { max-width: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 24px; background: #fff; }
#testContainer .question-text { font-size: 21px; font-weight: 500; line-height: 1.65; color: #303c4c; margin: 0 0 22px; min-height: 0; overflow-wrap: anywhere; }
#optionsContainer { display: grid; gap: 6px; }
/* 选中仅改变边框与背景，不放大按钮，避免触屏点击遮挡相邻答案。 */
#testContainer .answer-btn { box-sizing: border-box; position: relative; display: block; width: 100%; min-height: 50px; padding: 11px 42px 11px 18px; margin: 0; border: 2px solid #e6effc; border-radius: 12px; background: #f8fbff; text-align: left; color: #465164; font-size: 16px; font-weight: 400; line-height: 1.5; transform: none; box-shadow: none; animation: none; transition: border-color .15s, background .15s; -webkit-user-select: none; user-select: none; cursor: pointer; }
#testContainer .answer-btn:hover { border-color: #99c5ff; background: #f0f7ff; }
#testContainer .answer-btn.selected { border-color: #2588ff; background: #e8f2ff; color: #1757a3; transform: none; animation: none; box-shadow: 0 3px 12px #2588ff0a; }
#testContainer .answer-btn::before { display: none; }
#testContainer .answer-btn::after { display: none; }
#testContainer .answer-btn.selected::after { display: block; content: '✓'; position: absolute; left: auto; right: 18px; top: 50%; width: auto; height: auto; opacity: 1; background: none; transform: translateY(-50%); color: #247ce4; font-size: 19px; }
#testContainer button:focus-visible { outline: 3px solid #8cbaff; outline-offset: 3px; }
#testContainer .nav-actions, #testContainer .bottom-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid #eef3fa; background: #f8fbff; }
#testContainer .nav-actions { margin: 24px -24px -24px; }
#testContainer .bottom-actions { margin: 0; flex-wrap: nowrap; }
#prevBtn, #nextBtn, #restartBtn { min-height: 44px; border-radius: 10px; font-size: 15px; line-height: 1.4; cursor: pointer; }
#testContainer #prevBtn { flex: 0 0 auto; display: block; visibility: visible; padding: 10px 18px; border: 1px solid #dce7f5; color: #59718f; background: #fff; }
#testContainer #nextBtn { flex: 0 0 auto; min-width: 100px; padding: 10px 20px; color: #fff; border: 0; font-weight: 600; background: linear-gradient(110deg, #268bff, #176cd9); box-shadow: 0 5px 14px #247de22b; }
#testContainer #restartBtn { flex: 0 1 auto; padding: 8px 4px; border: 0; color: #8593a5; background: transparent; box-shadow: none; font-size: 13px; }
#testContainer #prevBtn:disabled, #testContainer #nextBtn:disabled { background: #e4e9f0; color: #929dab; border-color: transparent; box-shadow: none; cursor: not-allowed; }
.answer-top-nav { max-width: 960px; background: transparent; box-shadow: none; border: 0; position: static; }
.answer-top-nav .nav-logo { margin-left: auto; }
.content { max-width: none; padding: 0; }
/* 小屏保留五个完整点击区域及同一行导航，280px 宽也不溢出。 */
@media (max-width: 600px) {
    #testContainer { width: calc(100% - 24px); margin: 18px auto 28px; border-radius: 17px; }
    #testContainer .header, #testContainer .test-header { padding: 24px 14px 22px; }
    #testContainer h1 { font-size: 25px; }
    #testContainer .header p, #testContainer .test-header p { font-size: 13px; }
    #testContainer .progress-container, #testContainer .progress-wrap { padding: 16px; }
    #testContainer .question-card, #testContainer .question-box { padding: 22px 16px; }
    #testContainer .question-text { font-size: 18px; margin-bottom: 18px; }
    #testContainer .answer-btn { min-height: 50px; font-size: 15px; padding: 12px 36px 12px 14px; }
    #testContainer .nav-actions, #testContainer .bottom-actions { padding: 16px; gap: 8px; }
    #testContainer .nav-actions { margin: 22px -16px -22px; }
    #testContainer #prevBtn { padding: 10px 12px; }
    #testContainer #nextBtn { min-width: 86px; padding: 10px 12px; }
    #testContainer #restartBtn { font-size: 12px; }
    .progress-meta { gap: 6px; }
    #introContainer { padding: 12px; }
}
@media (max-width: 340px) {
    #testContainer #prevBtn { padding: 10px 8px; font-size: 14px; }
    #testContainer #nextBtn { min-width: 78px; padding: 10px 8px; font-size: 14px; }
    #testContainer #restartBtn { font-size: 11px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { #testContainer *, #testContainer *::after { transition: none !important; animation: none !important; } }