.vision-test-notice { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; padding: 13px 16px; border: 1px solid #d9e5f2; border-radius: 11px; background: #f4f8fc; color: #66758a; font-size: 12px; line-height: 1.65; }
.vision-test-intro[hidden],.vision-test-quiz[hidden],.vision-test-result[hidden] { display: none !important; }
.vision-notice-icon { display: grid; width: 23px; height: 23px; flex: none; place-items: center; border-radius: 50%; background: #e3edf8; color: #55769c; font-family: Georgia,serif; font-weight: 700; }
.vision-test-notice strong { color: #425d7a; margin-right: 4px; }
.vision-test-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(230px, .7fr); gap: 28px; align-items: center; min-height: 330px; padding: 32px; overflow: hidden; border: 1px solid #e7e8f0; border-radius: 18px; background: radial-gradient(ellipse at 10% 5%, #f0efff 0, transparent 43%), linear-gradient(135deg, #fcfcff, #f8fafc 70%, #f2f8f7); }
.vision-test-welcome h2,.vision-test-quiz-header h2 { margin: 8px 0 10px; color: #262b42; font-size: 27px; letter-spacing: -.04em; line-height: 1.2; }
.vision-test-eyebrow { color: #7774bd; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.vision-test-welcome>p { max-width: 470px; margin: 0; color: #73798b; font-size: 14px; line-height: 1.8; }
.vision-test-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 21px 0 24px; }
.vision-test-tags span { padding: 5px 10px; border: 1px solid #e6e7f0; border-radius: 999px; background: rgba(255,255,255,.78); color: #75798a; font-size: 11px; }
.vision-test-intro .button.primary { display: inline-flex; align-items: center; gap: 14px; padding: 12px 19px; box-shadow: 0 7px 16px rgba(85,82,185,.19); }
.vision-test-prep { display: grid; gap: 15px; padding: 20px; border: 1px solid rgba(225,227,239,.9); border-radius: 14px; background: rgba(255,255,255,.72); }
.vision-test-prep>strong { margin-bottom: 1px; color: #454a60; font-size: 13px; }
.vision-test-prep>div { display: flex; gap: 10px; align-items: flex-start; color: #74798a; font-size: 12px; line-height: 1.65; }
.vision-test-prep i { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border-radius: 7px; background: #efeffb; color: #7774bd; font-size: 9px; font-style: normal; font-weight: 800; }
.vision-test-quiz { max-width: 760px; margin: 0 auto; padding: 27px; border: 1px solid var(--border); border-radius: 17px; background: linear-gradient(160deg, #fff, #fbfbff); box-shadow: 0 10px 30px rgba(45,49,84,.06); }
.vision-test-quiz-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.vision-test-quiz-header h2 { margin-bottom: 0; font-size: 21px; }
.vision-test-counter { flex: none; padding: 7px 11px; border-radius: 8px; background: #f0efff; color: #6764b3; font-size: 12px; font-weight: 700; }
.vision-test-progress-track { height: 5px; margin: 19px 0 22px; overflow: hidden; border-radius: 9px; background: #ececf3; }
.vision-test-progress-track span { display: block; width: 12.5%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7774d4, #50b7a1); transition: width .25s ease; }
.vision-test-quiz-body { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 24px; align-items: center; }
.vision-test-plate-wrap { display: grid; min-height: 330px; place-items: center; border: 1px solid #ececf2; border-radius: 14px; background: radial-gradient(circle at 50% 45%, #fff 0, #f7f8fc 73%); }
#vision-test-canvas { display: block; width: min(100%, 310px); height: auto; }
.vision-test-prompt { margin: 0 0 5px; color: #30344a; font-size: 16px; font-weight: 800; }
.vision-test-answer-hint,.vision-test-live-score { display: block; color: #9296a5; font-size: 11px; line-height: 1.6; }
.vision-test-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 17px 0 20px; }
.vision-test-choices button { min-height: 47px; border: 1px solid #e4e5ee; border-radius: 10px; background: #fff; color: #41465a; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: .16s ease; }
.vision-test-choices button:hover,.vision-test-choices button:focus-visible { transform: translateY(-1px); border-color: #9a98dc; background: #f5f4ff; color: #625fb1; outline: none; box-shadow: 0 3px 10px rgba(93,90,170,.1); }
.vision-test-choices button.is-unknown { border-style: dashed; background: #f8f8fb; color: #777d90; font-size: 13px; font-weight: 600; }
.vision-test-choices button.is-unknown:hover,.vision-test-choices button.is-unknown:focus-visible { border-style: solid; }
.vision-test-live-score { padding-top: 11px; border-top: 1px solid #eeeef3; }
.vision-test-result { display: grid; justify-items: center; margin-top: 8px; padding: 34px 20px; border: 1px solid #e7e8f0; border-radius: 17px; background: radial-gradient(ellipse at 50% 0, #f1f0ff, #fff 60%); text-align: center; }
.vision-test-result .vision-result-kicker { color: #7774bd; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.vision-test-result strong { display: block; margin-top: 8px; color: #333651; font-size: 36px; letter-spacing: -.04em; }
.vision-test-result p { max-width: 500px; margin: 8px 0 20px; color: #72778a; font-size: 13px; line-height: 1.8; }
.vision-test-result .vision-result-detail { display: flex; gap: 10px; margin-bottom: 20px; }
.vision-test-result .vision-result-detail span { padding: 7px 11px; border-radius: 8px; background: #f4f4fa; color: #686d80; font-size: 11px; }
.vision-test-result .button { margin-top: 3px; }
.dark .vision-test-notice { border-color: #364254; background: #202b39; color: #aab8c9; }
.dark .vision-test-notice strong { color: #d0dfef; }
.dark .vision-test-intro { border-color: var(--border); background: radial-gradient(ellipse at 10% 5%, #2c2a4c 0, transparent 43%), linear-gradient(135deg, #202131, #1d2430 70%, #1b2b2a); }
.dark .vision-test-welcome h2,.dark .vision-test-quiz-header h2,.dark .vision-test-prompt { color: #f1f1fa; }
.dark .vision-test-welcome>p,.dark .vision-test-prep>div { color: #afb2c4; }
.dark .vision-test-prep,.dark .vision-test-quiz,.dark .vision-test-plate-wrap { border-color: #36384c; background: #202131; }
.dark .vision-test-prep>strong { color: #e0e1ec; }
.dark .vision-test-tags span,.dark .vision-test-choices button { border-color: #3b3d52; background: #252739; color: #e1e2eb; }
.dark .vision-test-choices button.is-unknown { background: #222435; color: #aeb1c0; }
.dark .vision-test-result { border-color: #383a50; background: radial-gradient(ellipse at 50% 0, #2b2a4c, #202131 60%); }
.dark .vision-test-result strong { color: #f1f1fa; }
.dark .vision-test-result .vision-result-detail span { background: #2c2e42; color: #c0c2d1; }
@media (max-width: 700px) { .vision-test-intro { grid-template-columns: 1fr; gap: 23px; padding: 23px; } .vision-test-prep { gap: 11px; } .vision-test-quiz { padding: 19px; } .vision-test-quiz-body { grid-template-columns: 1fr; gap: 18px; } .vision-test-plate-wrap { min-height: 270px; } #vision-test-canvas { width: min(100%, 310px); } .vision-test-answer-panel { max-width: 360px; width: 100%; margin: 0 auto; } }