*{box-sizing:border-box}
body{font-family:Arial, sans-serif;background:#0f172a;color:#e2e8f0;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:20px}
.container{background:#1e293b;padding:20px;border-radius:14px;width:min(95%, 420px);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.6)}
h1{margin:0 0 12px;color:#fff}
#level{font-size:1rem;margin-bottom:12px}
.card{font-size:1rem;margin-bottom:14px;background:#334155;padding:12px;border-radius:10px;border:1px solid #475569}
input#answer{padding:10px 12px;margin:6px auto;width:90%;max-width:340px;border:1px solid #64748b;border-radius:8px;background:#f8fafc;color:#0f172a;outline:none;transition:.15s border-color}
input#answer:focus{border-color:#38bdf8}
.buttons{margin-top:8px}
button{margin:3px 4px;padding:8px 12px;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:.2s transform, .2s box-shadow}
button:hover{transform:translateY(-1px);box-shadow:0 5px 15px rgba(0,0,0,.25)}
#checkBtn{background:#38bdf8;color:#0f172a}
#nextBtn{background:#64748b;color:#f8fafc}
#audioBtn{background:#0ea5e9;color:#fff}
#feedback{min-height:20px;margin:10px 0;font-size:1rem}
#feedback.correct{color:#4ade80}
#feedback.wrong{color:#fb7185}
#ai{font-size:1rem;color:#cbd5e1;margin-top:10px}
#examples{background:#0f172a;border:1px solid #475569;border-radius:8px;padding:8px;margin-top:8px;min-height:48px;color:#f8fafc}
#examples p{margin:4px 0}
#history{background:#0f172a;border:1px solid #475569;border-radius:10px;padding:10px;max-height:180px;overflow:auto;text-align:left;color:#e2e8f0}
#history p{margin:4px 0;font-size:.92rem}
.history-controls{text-align:right;margin-top:6px}
.mode-row{margin:10px 0;display:flex;align-items:center;justify-content:center;gap:8px}
.mode-row select{padding:6px 8px;border-radius:6px;border:1px solid #64748b;background:#e2e8f0;color:#0f172a}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}