:root{
  --green:#1f8f5f;
  --green-2:#e8f5ef;
  --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;
  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:1200px;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="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}
.stage{min-height:150px;border:3px dashed var(--green);border-radius:16px;background:#f9fffb;padding:14px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.big{font-size:clamp(2rem,5vw,3rem);font-weight:800}
.chip{padding:.25rem .6rem;border:2px solid var(--green);border-radius:999px;font-weight:800;font-size:clamp(1.2rem,4vw,1.6rem)}
.dim{opacity:.25}
#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}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.teacher-only{display:none}
.badge{border:1px dashed #9dd6bf;padding:4px 8px;border-radius:999px;font-size:.85rem}
/* Color DnD */
.colors{display:flex;gap:8px;flex-wrap:wrap}
.palette,.dropzone{
  min-height:64px; padding:8px; border:2px dashed #9dd6bf; border-radius:14px; background:#ffffff;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center
}
.dropzone{border-style:solid}
.colorbtn{
  width:58px;height:58px;border-radius:16px;border:3px solid #0b5137;cursor:grab; user-select:none;
}
.c-red{background:#ff6b6b}.c-blue{background:#4dabf7}.c-green{background:#69db7c}.c-yellow{background:#ffd43b}.c-purple{background:#b197fc}.c-orange{background:#ffa94d}
.colorbtn.dragging{opacity:.6; outline:3px dashed #333}
.dropzone .colorbtn{cursor:grabbing}
.hint{opacity:.35}
@media print{
  header,.controls,.scorebar,.tools,#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}
/* Target chip controls for touch fallback */
.colorbtn .ctrls{display:flex;gap:4px;position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);}
.colorbtn.wrap{position:relative}
.ctrls button{border:1px solid #0b5137;background:#fff;color:#0b5137;border-radius:6px;padding:0 6px;height:20px;line-height:18px;font-size:12px;cursor:pointer}