.study-main{max-width:760px;padding-top:20px;padding-bottom:110px}
.study-main h1{font-size:clamp(22px,4vw,30px);line-height:1.3;margin:0 0 10px}
.study-lead{color:var(--muted);line-height:1.6}
.study-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:20px 0}
.study-select{display:grid;gap:6px;flex:1;min-width:180px;font-size:14px}
.study-select select{width:100%;min-height:44px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);padding:10px;font:inherit}
.study-card{padding:22px;background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow-wrap:anywhere}
.study-question{font-size:20px;line-height:1.5;margin:10px 0 18px;white-space:pre-line}
.study-step{font-size:14px;color:var(--muted);margin:0}
.study-options{display:grid;gap:10px;margin:18px 0}
.study-option{display:flex;align-items:center;gap:12px;min-height:50px;width:100%;text-align:left;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--surface-raised);color:var(--text);font:inherit;cursor:pointer;flex-wrap:wrap}
.study-option>span:nth-child(2){flex:1;min-width:0}
.study-letter{font-weight:800}
.study-option--correct{border:2px solid #15803d;background:rgba(22,163,74,.12)}
.study-option--wrong{border:2px solid #dc2626;background:rgba(220,38,38,.12)}
.study-image,.study-sign-image{display:block;width:min(100%,320px);height:auto;max-height:240px;object-fit:contain;margin:16px auto;background:#fff;border-radius:12px;padding:12px}
.study-sign-image{width:200px;height:200px}
.study-option-image{width:100px;height:80px;object-fit:contain;background:#fff;border-radius:8px;padding:4px}
.study-button{min-height:44px;padding:11px 16px;border:1px solid transparent;border-radius:12px;background:var(--accent);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.study-button--secondary{background:var(--surface-raised);color:var(--text);border-color:var(--border)}
.study-button:disabled{opacity:.45;cursor:default}
.study-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:18px}
.study-feedback{line-height:1.6;padding:12px;border-radius:12px;background:var(--surface-raised)}
.study-description{font-size:17px;line-height:1.65}
.study-result-score{font-size:38px;font-weight:800;color:var(--accent)}
.study-review{margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:12px}
.study-review summary{cursor:pointer;font-weight:700;line-height:1.5;white-space:pre-line}
.study-scorebar{position:fixed;bottom:0;left:0;right:0;z-index:110;display:flex;justify-content:center;gap:clamp(20px,5vw,45px);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--border);box-shadow:0 -4px 20px rgba(12,18,40,.08)}
.study-scorebar[hidden]{display:none}
.study-stat{display:grid;gap:3px;text-align:center;font-variant-numeric:tabular-nums}
.study-stat small{font-size:11px;color:var(--muted)}
.study-stat strong{font-size:16px}
.study-stat--correct strong{color:#15803d}.study-stat--wrong strong{color:#dc2626}
.study-stat--score strong{color:var(--accent)}
.study-main :is(button,a,select):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:480px){.study-card{padding:16px}.study-question{font-size:18px}.study-controls{gap:8px}.study-select{min-width:100%}.study-sign-image{width:170px;height:170px}.study-actions .study-button{flex:1}.study-scorebar{gap:24px}}

/* Keep the advert in normal flow, below the learning controls. */
.study-ad { margin: 24px 0; min-height: 100px; }