:root {
    --orange: #596cf6;
    --orange2: #7c5cff;
    --soft: #f3f5ff;
    --ink: #25283a;
    --muted: #74798b;
    --line: #e5e8f1;
    --green: #25a779;
    --red: #df5962;
}

.app-body { background: #f8f9fc; color: var(--ink); }
.app-body main { background: transparent; }
.app-body .brand { color: #5869ef; }
.app-body .welcome { color: #5061dd; background: #f1f3ff; border-color: #e1e5fb; }
.app-body .welcome-avatar { color: #5869ef; background: #edf0ff; }
.app-body .exam-card { border-top-color: #6979f8; }
.app-body .tag,
.app-body .analysis,
.app-body .rank-no { color: #5263df; background: #f1f3ff; }
.app-body .button,
.app-body button { background: linear-gradient(135deg, #596cf6, #7c5cff); }
.app-body .progress { background: #e9ecf4; }
.app-body .progress div { background: linear-gradient(90deg, #596cf6, #8a65fa); }
.app-body .bottom-tabs .tab-slider { border-color: #dfe3fb; }
.app-body .bottom-tabs a.active { color: #5869ef; }
.app-body .light-button { color: #5263df; background: #f3f5ff; border-color: #dfe3fb; }
.app-body .profile-stats b,
.app-body .rank-item b { color: #596cf6; }

/* 清晰的答题选项：隐藏原生控件，以独立字母块表达选中状态。 */
.app-body .quiz-option {
    position: relative;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    min-height: 58px;
    padding: 11px 14px;
    border-color: #e2e5ee;
}
.app-body .quiz-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.app-body .quiz-option b {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #dce0eb;
    border-radius: 50%;
    background: #fff;
    color: #596173;
    font-size: 14px;
    line-height: 1;
}
.app-body .quiz-card[data-type="multiple"] .quiz-option b { border-radius: 10px; }
.app-body .quiz-option span {
    min-width: 0;
    color: #343746;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.app-body .quiz-option:has(input:checked) { border-color: #8c98f6; background: #f1f3ff; }
.app-body .quiz-option:has(input:checked) b { border-color: #6576f7; background: #6576f7; color: #fff; }
.app-body .quiz-card.is-locked .quiz-option { pointer-events: none; }
.app-body .quiz-card.needs-answer { animation: answerNotice .42s ease; }
.app-body .quiz-card.needs-answer .quiz-options { outline: 2px solid rgba(223,89,98,.35); outline-offset: 6px; border-radius: 14px; }
.app-body .submit-card { text-align: center; padding: 38px 24px; }
.app-body .submit-check { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; background: #eaf8f2; color: #20956c; font-size: 28px; font-weight: 800; }
.app-body .submit-card h2 { margin: 0 0 7px; }
.app-body .submit-card p { margin: 0 0 22px; color: #74798b; }
.app-body .submit-card button { min-width: 180px; }
.quiz-heading-side { display:flex; align-items:center; gap:12px; }
.quiz-save-status { margin:2px 0 0; color:#8a8fa0; font-size:12px; }
.quiz-save-status.saved { color:#24906a; }
.quiz-save-status.error { color:#c54f59; }
.quiz-timer { min-width:66px; padding:6px 10px; border-radius:10px; color:#5364df; background:#eef0ff; font-variant-numeric:tabular-nums; text-align:center; }
.quiz-timer.urgent { color:#c44c57; background:#fff0f1; animation:timerPulse 1s ease-in-out infinite; }
.app-body .quiz-card.save-failed { border-color:#efb9bd; }

/* 把作答进度表达为轻松的“今日能量”。 */
.energy-progress { margin-bottom: 16px; }
.energy-progress__label { display:flex; justify-content:space-between; align-items:center; margin:0 2px 7px; color:#7d8294; font-size:12px; }
.energy-progress__label strong { color:#596cf6; font-size:13px; font-variant-numeric:tabular-nums; }
.energy-progress .progress { position:relative; height:10px; margin-bottom:0; overflow:visible; background:#eaedf7; box-shadow:inset 0 1px 2px rgba(55,63,100,.06); }
.energy-progress .progress div { position:relative; border-radius:99px; background:linear-gradient(90deg,#596cf6,#8a65fa 58%,#31c4b6); box-shadow:0 4px 12px rgba(89,108,246,.22); transition:width .45s cubic-bezier(.22,1,.36,1); }
.energy-progress .progress div::after { content:""; position:absolute; right:-3px; top:50%; width:14px; height:14px; border-radius:50%; background:#fff; border:4px solid #31c4b6; box-shadow:0 3px 10px rgba(49,196,182,.3); transform:translateY(-50%) scale(.75); opacity:0; transition:.25s; }
.energy-progress .progress div[style]:not([style*="width: 0"])::after { opacity:1; transform:translateY(-50%) scale(1); }
.app-body .quiz-option.selection-pop { animation:choiceGlow .42s cubic-bezier(.2,.8,.2,1); }
.app-body .quiz-card.is-leaving { animation:cardBreatheOut .3s ease both; }
.app-body .next-btn:disabled { opacity:.78; cursor:default; }

/* 拆礼物与成绩页改用年轻的蓝紫 + 珊瑚点缀。 */
.gift-intro { background: radial-gradient(circle at 18% 18%, rgba(117,130,255,.16), transparent 34%), radial-gradient(circle at 82% 78%, rgba(255,126,110,.12), transparent 32%), linear-gradient(145deg,#fbfbff,#f4f5ff); }
.gift-box__body,
.gift-box__lid { background: linear-gradient(145deg,#7f8cff,#675ff2); }
.gift-box__bow::before,
.gift-box__bow::after { border-color: #ff786e; }
.gift-card__eyebrow { color: #6576f7; }
.gift-open-button,
.accuracy-pill { background: linear-gradient(135deg,#596cf6,#7c5cff); box-shadow: 0 14px 30px rgba(89,108,246,.24); }
.achievement-quote { color: #596cf6; }
.achievement-action { background: #f3f5ff; }
.achievement-action strong { color: #5263df; }
.result-share { margin-top:20px; padding:18px 20px; text-align:left; border:1px solid #e2e6f3; border-radius:20px; background:#fbfcff; }
.result-share__head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.result-share__head strong { display:flex; align-items:center; gap:7px; color:#596173; font-size:15px; }
.result-share__head strong::before { content:""; width:8px; height:8px; border-radius:50%; background:#ff786e; box-shadow:0 0 0 5px rgba(255,120,110,.12); }
.app-body .result-share__button { flex:0 0 auto; min-width:116px; padding:10px 16px; border:0; border-radius:13px; color:#fff; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 8px 18px rgba(89,108,246,.18); }
.app-body .result-share__button:disabled { opacity:.7; cursor:default; }
.result-share p { margin:14px 0 0; color:#4f5568; font-size:15px; font-weight:650; line-height:1.75; }
.result-share__footer { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:16px; }
.result-share__status { display:block; min-height:0; color:#74798b; font-size:12px; }
.result-share__status:empty { display:none; }
.achievement-card { animation:resultReveal .7s cubic-bezier(.2,.8,.2,1) .62s both; }
.answer-review { animation:resultReveal .65s ease .82s both; }
.achievement-rocket { color:#6c6ff5; font-size:58px; text-shadow:0 12px 28px rgba(89,108,246,.22); }

@keyframes answerNotice {
    0%,100% { transform: translateX(0); }
    30% { transform: translateX(-5px); }
    70% { transform: translateX(5px); }
}
@keyframes timerPulse { 50% { transform:scale(1.04); } }
@keyframes choiceGlow {
    0% { transform:scale(1); box-shadow:0 0 0 0 rgba(89,108,246,.2); }
    48% { transform:scale(1.012); box-shadow:0 8px 24px rgba(89,108,246,.14); }
    100% { transform:scale(1); box-shadow:0 0 0 8px rgba(89,108,246,0); }
}
@keyframes cardBreatheOut {
    from { opacity:1; transform:translateY(0) scale(1); }
    to { opacity:.42; transform:translateY(-4px) scale(.992); }
}
@keyframes resultReveal {
    from { opacity:0; transform:translateY(18px) scale(.985); filter:blur(5px); }
    to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .app-body .quiz-option.selection-pop,
    .app-body .quiz-card.is-leaving,
    .achievement-card,
    .answer-review { animation:none; }
}

@media (max-width: 640px) {
    .app-body .quiz-option { grid-template-columns: 34px minmax(0,1fr); gap: 10px; padding: 10px 11px; }
    .app-body .quiz-option b { width: 31px; height: 31px; }
    .quiz-heading { align-items:flex-start; }
    .quiz-heading-side { gap:7px; }
    .quiz-timer { min-width:60px; padding:5px 8px; font-size:14px; }
    .quiz-save-status { max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .accuracy-pill { display:grid; grid-template-columns:auto auto; width:auto; min-width:0; max-width:100%; }
    .accuracy-pill__label { font-size:15px; }
    .accuracy-pill strong { font-size:34px; }
    .result-share { padding:16px; }
    .result-share__footer { flex-direction:column; align-items:center; }
    .app-body .result-share__button { min-width:140px; padding:10px 18px; }
    .result-share p { font-size:14px; }
}
.app-body .exam-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:12px;margin-top:16px}
.app-body .exam-actions>.button{width:100%;flex:0 0 auto;margin:0;text-align:center}
.app-body .exam-actions .home-share{flex:1;display:flex!important;align-items:center;gap:8px;padding:0;background:transparent;border:0;box-shadow:none}
.app-body .exam-actions .home-share .button{width:100%;margin:0}
.app-body .exam-actions [data-share-status]{display:block;position:absolute;left:0;top:calc(100% + 6px);font-size:12px;color:#68718a;white-space:nowrap}
.app-body .exam-actions .home-share{position:relative}
@media(max-width:640px){.app-body .exam-actions{gap:8px}.app-body .exam-actions .button{font-size:14px;padding:11px 8px}}
.app-body .exam-actions>.button,.app-body .exam-actions .home-share .button{height:54px;min-height:54px;display:flex;align-items:center;justify-content:center}
.app-body .exam-actions .home-share{align-self:stretch}
.app-body .exam-actions>.button,.app-body .exam-actions>.home-share{height:54px!important;min-height:54px!important;padding:0!important;box-sizing:border-box}
.app-body .exam-actions>.home-share{margin:0!important;width:100%!important;align-self:stretch!important;display:flex!important;align-items:stretch!important}
.app-body .exam-actions>.home-share .button{height:100%!important;min-height:0!important;margin:0!important;width:100%!important}