:root {
    --eval-ink: #18243b;
    --eval-muted: #71809a;
    --eval-line: #e2e8f2;
    --eval-purple: #6d3ee8;
    --eval-blue: #2563eb;
    --eval-green: #0d8a61;
    --eval-red: #cf3151;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--eval-ink);
    font-family: "DM Sans", sans-serif;
    background: radial-gradient(circle at 8% 0%, #e9e4ff 0, transparent 30rem), linear-gradient(145deg, #f7faff, #fff7fb);
    -webkit-font-smoothing: antialiased;
}
.evaluation-shell { width: min(940px, calc(100% - 28px)); margin: 0 auto; padding: 30px 0 70px; }
.evaluation-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 19px; color: #5c45be; font-size: .83rem; font-weight: 800; text-decoration: none; }
.evaluation-back:hover { color: var(--eval-blue); text-decoration: none; }
.evaluation-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px 24px; border-radius: 24px; color: #fff; background: linear-gradient(125deg, #4f32c4, #6d3ee8 48%, #1789c5); box-shadow: 0 20px 45px #4f32c42b; }
.evaluation-hero-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: #ffffff2b; font-size: 1.55rem; }
.evaluation-eyebrow { display: block; margin-bottom: 5px; color: #ddd5ff; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.evaluation-hero h1 { margin: 0; font: 800 clamp(1.15rem, 3vw, 1.7rem) "Manrope", sans-serif; }
.evaluation-hero p { margin: 6px 0 0; color: #eeeaff; font-size: .82rem; }
.evaluation-points { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px; color: #6e4800; background: #ffe5a5; font-weight: 900; font-size: .78rem; white-space: nowrap; }
.evaluation-instructions { display: flex; align-items: center; gap: 12px; margin: 17px 0; padding: 14px 16px; border: 1px solid #dce6f4; border-radius: 15px; background: #fff; box-shadow: 0 8px 24px #29385d0a; }
.evaluation-instructions > i { color: var(--eval-purple); font-size: 1.1rem; }
.evaluation-instructions p { flex: 1; margin: 0; color: #52617a; font-size: .82rem; line-height: 1.45; }
.evaluation-instructions span { color: #7a56d6; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.evaluation-form { display: grid; gap: 14px; }
.evaluation-question { min-width: 0; margin: 0; padding: 19px; border: 1px solid var(--eval-line); border-left: 4px solid var(--eval-purple); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px #29385d0b; }
.evaluation-question legend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; margin: 0 0 15px; padding: 0; }
.evaluation-question legend > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: #fff; background: var(--eval-purple); font-weight: 900; }
.evaluation-question legend b { padding-top: 4px; font: 800 .98rem/1.35 "Manrope", sans-serif; }
.evaluation-question legend small { padding-top: 5px; color: #956000; font-weight: 900; font-size: .7rem; white-space: nowrap; }
.evaluation-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.evaluation-option { display: flex; align-items: center; gap: 10px; min-height: 51px; margin: 0; padding: 9px 11px; border: 1px solid #e2e8f2; border-radius: 12px; color: #42516c; background: #fbfcff; cursor: pointer; font-size: .83rem; line-height: 1.35; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.evaluation-option:hover { border-color: #9b82e9; background: #f7f3ff; transform: translateY(-1px); }
.evaluation-option:has(input:checked) { border-color: var(--eval-purple); background: #f1edff; box-shadow: 0 0 0 3px #6d3ee814; }
.evaluation-option input { position: absolute; opacity: 0; pointer-events: none; }
.option-letter { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 auto; border-radius: 9px; color: var(--eval-purple); background: #e9e2ff; font-weight: 900; }
.evaluation-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 2px 0; }
.evaluation-submit-row p { margin: 0; color: var(--eval-muted); font-size: .76rem; }
.evaluation-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 17px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #cf3151, #6d3ee8); box-shadow: 0 10px 22px #cf31512e; font: 800 .83rem "DM Sans", sans-serif; text-decoration: none; cursor: pointer; }
.evaluation-button:hover { color: #fff; filter: saturate(1.1); transform: translateY(-1px); text-decoration: none; }
.evaluation-state { display: grid; place-items: center; gap: 11px; min-height: 340px; padding: 35px 22px; border: 1px solid var(--eval-line); border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 16px 38px #29385d0c; }
.evaluation-state > i { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #6d3ee8, #2563eb); font-size: 1.45rem; }
.evaluation-state h1 { margin: 0; font: 800 1.3rem "Manrope", sans-serif; }
.evaluation-state p { max-width: 540px; margin: 0 0 4px; color: var(--eval-muted); font-size: .87rem; line-height: 1.5; }
.evaluation-result-card { display: flex; align-items: center; gap: 15px; margin: 18px 0; padding: 18px 20px; border: 1px solid #cceadd; border-radius: 18px; background: linear-gradient(135deg, #effbf6, #f6f2ff); }
.evaluation-result-card.result-review { border-color: #f1dfae; background: linear-gradient(135deg, #fffaf0, #f8f3ff); }
.result-icon { display: grid; place-items: center; width: 53px; height: 53px; flex: 0 0 auto; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #0d9f70, #2563eb); font-size: 1.3rem; }
.result-review .result-icon { background: linear-gradient(135deg, #e39a18, #cf3151); }
.evaluation-result-card h2 { margin: 0; font: 800 1.32rem "Manrope", sans-serif; }
.evaluation-result-card p { margin: 5px 0 0; color: #62718a; font-size: .84rem; line-height: 1.45; }
.evaluation-result-card strong { color: var(--eval-purple); }
.evaluation-button-small { margin-top: 10px; padding: 9px 12px; font-size: .75rem; }
.evaluation-retake-note { display: block; margin-top: 7px; color: #7b6c8e; font-size: .7rem; line-height: 1.4; }
.evaluation-review { display: grid; gap: 13px; }
.evaluation-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.evaluation-section-heading h2 { margin: 0; font: 800 1.15rem "Manrope", sans-serif; }
.evaluation-section-heading span { color: #7357cd; font-size: .76rem; font-weight: 800; }
.review-question { padding: 16px; border: 1px solid #e4e8f1; border-left: 4px solid #cf3151; border-radius: 16px; background: #fff; }
.review-question.review-correct { border-left-color: #0d9f70; }
.review-question-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: start; }
.review-question-head > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #fff; background: #cf3151; font-size: .78rem; font-weight: 900; }
.review-correct .review-question-head > span { background: #0d9f70; }
.review-question-head strong { padding-top: 3px; font-size: .88rem; line-height: 1.4; }
.review-question-head b { padding-top: 4px; color: #b52c49; font-size: .7rem; white-space: nowrap; }
.review-correct .review-question-head b { color: #087257; }
.review-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.review-option { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 9px; border: 1px solid #e4e8f1; border-radius: 10px; color: #65728a; font-size: .77rem; line-height: 1.35; }
.review-option > span { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; border-radius: 7px; color: #66748a; background: #eef2f7; font-weight: 900; }
.review-option.is-correct { border-color: #a9dec9; color: #08694f; background: #effbf6; }
.review-option.is-correct > span { color: #fff; background: #0d9f70; }
.review-option.is-selected:not(.is-correct) { border-color: #efb5c1; color: #ad2c49; background: #fff2f5; }
.review-option > i { margin-left: auto; }
.review-option.is-correct > i { color: #0d9f70; }
.review-option.is-selected:not(.is-correct) > i { color: #cf3151; }
.question-explanation { margin: 11px 0 0; padding: 9px 10px; border-radius: 10px; color: #635284; background: #f4f0ff; font-size: .76rem; line-height: 1.45; }
.question-explanation i { color: #9d6d00; }
.evaluation-inline-error { margin: 13px 0; padding: 11px 13px; border-radius: 11px; color: #a42d48; background: #fff0f3; font-size: .82rem; font-weight: 700; }
.evaluation-sound-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border: 1px solid #d9cffd; border-radius: 9px; color: #6541c8; background: #f7f3ff; font: 800 .69rem "DM Sans", sans-serif; cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease; }
.evaluation-sound-button:hover, .evaluation-sound-button:focus-visible { color: #fff; background: #6d3ee8; transform: translateY(-1px); outline: none; }
.evaluation-instructions .evaluation-sound-button { flex: 0 0 auto; }
.evaluation-result-card .evaluation-sound-button { margin-top: 10px; }
.evaluation-button.is-loading { pointer-events: none; filter: saturate(.8); }
.evaluation-option.option-pulse { animation: evaluation-option-pulse .36s ease; }
@keyframes evaluation-option-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.018); } 100% { transform: scale(1); } }
.evaluation-result-card.result-fresh { animation: evaluation-result-in .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes evaluation-result-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.evaluation-celebration[hidden] { display: none; }
.evaluation-celebration { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; pointer-events: none; background: #13203d2e; opacity: 0; transition: opacity .2s ease; }
.evaluation-celebration.is-visible { opacity: 1; }
.evaluation-celebration-card { position: relative; display: grid; justify-items: center; gap: 5px; min-width: min(310px, 100%); padding: 27px 30px 24px; overflow: hidden; border: 1px solid #ffffffa8; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #cf3151, #6d3ee8 58%, #168ac4); box-shadow: 0 24px 60px #1824484d; transform: translateY(12px) scale(.92); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.evaluation-celebration.is-visible .evaluation-celebration-card { transform: translateY(0) scale(1); }
.evaluation-celebration-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 3px; border-radius: 19px; color: #8a5600; background: #ffe5a5; font-size: 1.45rem; animation: evaluation-star-pop .7s ease both; }
@keyframes evaluation-star-pop { 0% { transform: scale(.4) rotate(-18deg); } 65% { transform: scale(1.12) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.evaluation-celebration-card strong { font: 800 1.25rem "Manrope", sans-serif; }
.evaluation-celebration-card small { color: #f1ecff; font-size: .78rem; }
.evaluation-confetti { position: absolute; top: 50%; left: 50%; width: 7px; height: 15px; border-radius: 3px; background: #ffe5a5; opacity: 0; animation: evaluation-confetti-fly .85s ease-out var(--confetti-delay) both; }
.evaluation-confetti:nth-of-type(3n) { background: #8ff0ca; }
.evaluation-confetti:nth-of-type(3n + 1) { background: #fff; }
@keyframes evaluation-confetti-fly { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--confetti-x)), calc(-50% - 90px)) rotate(var(--confetti-r)); } }

@media (max-width: 680px) {
    .evaluation-shell { width: min(100% - 20px, 560px); padding-top: 20px; }
    .evaluation-hero { grid-template-columns: auto minmax(0, 1fr); padding: 17px; border-radius: 19px; }
    .evaluation-points { grid-column: 1 / -1; justify-self: start; }
    .evaluation-instructions { align-items: flex-start; flex-wrap: wrap; }
    .evaluation-instructions p { flex-basis: calc(100% - 35px); }
    .evaluation-instructions span { margin-left: 35px; }
    .evaluation-instructions .evaluation-sound-button { margin-left: 35px; }
    .evaluation-options, .review-options { grid-template-columns: 1fr; }
    .evaluation-question { padding: 14px; }
    .evaluation-question legend { grid-template-columns: auto minmax(0, 1fr); }
    .evaluation-question legend small { grid-column: 2; padding-top: 0; }
    .evaluation-submit-row { align-items: stretch; flex-direction: column; }
    .evaluation-submit-row .evaluation-button { width: 100%; }
    .review-question-head { grid-template-columns: auto minmax(0, 1fr); }
    .review-question-head b { grid-column: 2; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}