:root { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Arial, sans-serif; color: #111827; background: #f5f7fb; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(180deg,#eef2ff 0%,#f8fafc 45%,#f5f7fb 100%); }
button { font:inherit; }
.app { width:100%; min-height:100vh; padding: max(18px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); display:flex; justify-content:center; }
.screen { width:100%; max-width:560px; min-height:calc(100vh - 42px); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.card { width:100%; background:rgba(255,255,255,.94); border-radius:24px; padding:24px 18px; box-shadow:0 12px 40px rgba(15,23,42,.10); }
h1 { margin:0 0 8px; font-size:30px; line-height:1.1; }
h2 { margin:0 0 18px; font-size:22px; }
.subtitle { margin:0 auto 22px; color:#64748b; line-height:1.5; }
.stat { display:inline-block; background:#eef2ff; border-radius:999px; padding:8px 14px; margin-bottom:20px; font-weight:700; color:#3730a3; }
.primary,.secondary { width:100%; border:0; border-radius:16px; padding:15px 18px; font-weight:700; cursor:pointer; }
.primary { background:#111827; color:white; }
.secondary { background:#e5e7eb; color:#111827; }
.topbar { width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; color:#64748b; font-size:14px; font-weight:700; }
.quiz-card { justify-content:flex-start; }
.question-wrap { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; }
.question-number { color:#6366f1; font-weight:800; margin-bottom:10px; }
.question { font-size:23px; line-height:1.35; font-weight:750; margin:0 auto 24px; max-width:520px; }
.answers { width:100%; display:flex; flex-direction:column; gap:12px; }
.answer { width:100%; display:flex; align-items:center; gap:12px; text-align:left; padding:15px 14px; border:2px solid #e5e7eb; background:white; border-radius:16px; cursor:pointer; color:#111827; }
.answer.selected { border-color:#6366f1; background:#eef2ff; }
.letter { min-width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#f1f5f9; font-weight:800; }
.answer.selected .letter { background:#6366f1; color:white; }
.nav { width:100%; display:flex; gap:10px; margin-top:18px; }
.nav button { flex:1; }
.nav button:disabled { opacity:.45; }
.score { font-size:54px; font-weight:850; line-height:1; margin:4px 0 4px; }
.percent { color:#64748b; margin-bottom:22px; }
.wrong-list { width:100%; text-align:left; margin-top:22px; }
.wrong-card { background:#fff; border-radius:18px; padding:16px; margin-bottom:12px; box-shadow:0 5px 20px rgba(15,23,42,.07); }
.wrong-title { color:#b91c1c; font-weight:800; margin-bottom:8px; }
.review-question { font-weight:700; line-height:1.4; margin-bottom:12px; }
.your-answer { color:#991b1b; background:#fef2f2; border-radius:10px; padding:10px; margin-bottom:8px; line-height:1.4; }
.correct-answer { color:#166534; background:#f0fdf4; border-radius:10px; padding:10px; line-height:1.4; }
.actions { width:100%; display:flex; flex-direction:column; gap:10px; margin-top:16px; }
[hidden] { display:none !important; }
@media (min-width: 700px) { .app{padding:32px}.card{padding:32px}.question{font-size:26px}.screen{max-width:620px} }

.question-images{width:100%;display:flex;justify-content:center;align-items:flex-start;gap:10px;flex-wrap:wrap;margin:-4px auto 20px;}
.question-image{display:flex;flex-direction:column;align-items:center;gap:5px;}
.question-image img{display:block;max-width:min(100%,260px);max-height:210px;width:auto;height:auto;object-fit:contain;border-radius:12px;background:#fff;}
.question-images .question-image:only-child img{max-width:min(100%,320px);max-height:240px;}
.image-label{font-weight:800;color:#64748b;font-size:14px;}
.review-images{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:8px 0 12px;}
.review-image img{max-width:120px;max-height:120px;object-fit:contain;border-radius:8px;background:#fff;}
@media (max-width:430px){.question{font-size:21px}.question-images{gap:7px}.question-image img{max-width:105px;max-height:125px}.question-images .question-image:only-child img{max-width:280px;max-height:190px}.card{padding:20px 14px}.screen{min-height:calc(100vh - 32px)}}


.review-list { width:100%; text-align:left; margin-top:22px; }
.review-card { background:#fff; border-radius:18px; padding:16px; margin-bottom:14px; box-shadow:0 5px 20px rgba(15,23,42,.07); border:2px solid transparent; }
.review-card.is-correct { border-color:#bbf7d0; }
.review-card.is-wrong { border-color:#fecaca; }
.review-header { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.review-number { color:#64748b; font-size:13px; font-weight:800; }
.review-status { font-weight:850; font-size:14px; }
.is-correct .review-status { color:#166534; }
.is-wrong .review-status { color:#b91c1c; }
.review-question { font-weight:700; line-height:1.45; margin-bottom:12px; }
.review-images { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:8px 0 12px; }
.review-image { display:flex; flex-direction:column; align-items:center; gap:4px; }
.review-image img { max-width:150px; max-height:150px; object-fit:contain; border-radius:8px; background:#fff; }
.your-answer { color:#991b1b; background:#fef2f2; border-radius:10px; padding:10px; margin-bottom:8px; line-height:1.45; }
.is-correct .your-answer { color:#166534; background:#f0fdf4; }
.correct-answer { color:#166534; background:#f0fdf4; border-radius:10px; padding:10px; line-height:1.45; }
@media (max-width:430px){ .review-card{padding:14px}.review-header{align-items:flex-start}.review-number{font-size:12px}.review-image img{max-width:115px;max-height:120px} }