*{box-sizing:border-box}
:root{
  --bg:#e8f5e9;
  --fg:#1b4332;
  --accent:#2e7d32;
  --card:#ffffffc9;
  --border:#a5d6a7;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f1a12; --fg:#e6f5e9; --card:#112417; --border:#2c5c35; }
}
html,body{height:100%;margin:0}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--fg);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  gap: 12px;
}
header, footer{width:100%; padding:12px 16px}
header{display:flex; align-items:center; gap:16px}
header img{height:56px}
header h1{margin:0 auto; text-align:center}
main{width:min(1000px,96%); display:flex; flex-direction:column; gap:16px; align-items:center}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; width:100%; box-shadow:0 2px 12px #00000014}
.controls .row{display:flex; flex-wrap:wrap; gap:12px; align-items:end}
label{display:flex; flex-direction:column; gap:6px; font-weight:600}
select,input[type=text]{font-size:1.1rem; padding:10px; border-radius:10px; border:2px solid var(--border)}
input[type=range]{width:160px}
button{font-size:1.05rem; padding:10px 16px; border:none; border-radius:12px; background:#66bb6a; color:white; cursor:pointer}
button:disabled{opacity:.6; cursor:not-allowed}
button:hover:not(:disabled){background:#43a047}
.play #prompt{font-size:1.8rem; min-height:2.2rem; text-align:center; margin:12px 0}
.play input{width:100%; text-align:center; font-size:1.5rem}
#feedback{min-height:1.6rem; font-weight:700; margin-top:8px}
#progress{margin-top:6px; opacity:.8}
#certificate{text-align:center}
#certificate input{width:240px}
/* Print styles */
@media print{
  header, .controls, #checkBtn, #startBtn, #speakBtn, #printBtn, #certificate button, footer { display:none !important }
  .card{box-shadow:none; border:none}
}