:root{
  --green:#1f8f5f;
  --green-2:#e8f5ef;
  --accent:#ffe066;
  --danger:#e03131;
  --ok:#2f9e44;
  --ink:#123;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:linear-gradient(180deg, #ffffff, var(--green-2));
}
header{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;
  background:#fff; border-bottom:2px solid var(--green);
  position:sticky; top:0; z-index:10;
}
header img{height:60px}
header h1{font-size:clamp(1.2rem,2vw,1.6rem); margin:0; color:var(--green)}
.container{max-width:1150px; margin:20px auto; padding:0 16px}
.controls{
  background:#fff; border:1px solid #cfe9dc; border-radius:16px; padding:16px; box-shadow:0 6px 24px rgba(0,0,0,0.05);
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:12px;
}
label{font-weight:600; font-size:0.95rem}
select, input[type="number"], input[type="text"], input[type="range"], textarea{
  width:100%; padding:10px 12px; border:1px solid #cfe9dc; border-radius:10px; background:#fff;
}
.range-wrap{display:flex; align-items:center; gap:12px}
.range-wrap output{min-width:3.2ch; text-align:right; font-variant-numeric: tabular-nums;}
button{
  border:none; padding:12px 16px; border-radius:12px; cursor:pointer; font-weight:700;
}
.btn{background:var(--green); color:#fff}
.btn.secondary{background:#fff; color:var(--green); border:2px solid var(--green)}
.btn.warn{background:var(--danger); color:#fff}
.btn.ghost{background:transparent; border:2px dashed #9dd6bf; color:#0b5137}
.panel{
  margin-top:16px; background:#fff; border:1px solid #cfe9dc; border-radius:16px; padding:18px;
}
#sentenceCard{
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:160px; font-size: clamp(1.6rem, 2.8vw, 2rem); font-weight:700; line-height:1.4;
  border:3px dashed var(--green); border-radius:20px; background:#f9fffb;
}
#answerArea{display:none}
#result{font-weight:700; margin-top:8px}
.scorebar{
  display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:12px; flex-wrap:wrap;
}
.progress{
  height:12px; background:#e6fff3; border-radius:999px; overflow:hidden; flex:1; min-width:160px;
}
.progress > span{display:block; height:100%; background:var(--green); width:0%; transition:width .25s ease;}
.stats{display:flex; gap:16px; flex-wrap:wrap}
.stat{background:#fff; border:1px solid #cfe9dc; border-radius:12px; padding:8px 12px}
footer{padding:24px; text-align:center; color:#345; opacity:.9}
small.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
.tools{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.teacher-only{display:none}

/* Print */
@media print{
  header, .controls, .scorebar, .tools, details, #answerArea, #confetti { display:none !important; }
  #printReport{display:block !important;}
  body{background:#fff}
}
#printReport{display:none}
#printReport h2{margin-top:0}
#printReport table{width:100%; border-collapse:collapse; margin-top:10px}
#printReport th, #printReport td{border:1px solid #cfe9dc; padding:6px 8px; text-align:left}