*{box-sizing:border-box}
:root{
  --blue:#dfefff;
  --beige:#f7f3ea;
  --ink:#1f3a4a;
  --mint:#9fd3c7;
  --red:#c0392b;
  --green:#2e8b57;
}
body{ margin:0; font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg,var(--blue),var(--beige)); color:var(--ink); text-align:center }
header{ padding:10px 12px; background:#ffffff88; backdrop-filter: blur(4px); display:flex; gap:12px; align-items:center; justify-content:center }
.logo{ height:60px; object-fit:contain }
.headings h1{ margin:0; font-size:1.4rem }
.subtitle{ margin:.2rem 0 0; opacity:.85 }
main{ max-width:1100px; margin:0 auto; padding:10px }
.card{ background:#fff; border-radius:18px; padding:16px; margin:10px; box-shadow:0 8px 24px rgba(0,0,0,.08) }
.row{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap }
select,button,textarea,input{ padding:10px 14px; border-radius:12px; border:2px solid var(--ink); background:#fff; color:var(--ink) }
button{ cursor:pointer; transition: transform .12s }
button:hover{ transform: scale(1.03) }
.ghost{ background:transparent }
.words-box{ text-align:left; margin-top:8px }
.words-box textarea{ width:100%; margin-top:8px }
.wordbox{ font-size:2.2rem; font-weight:800; letter-spacing:.03em; margin:8px auto; padding:12px 16px; display:inline-block; background:#ffffffcc; border:2px solid var(--ink); border-radius:16px; min-width:280px }
.inputs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:800px; margin:8px auto }
.input-group{ text-align:left }
.input-group label{ font-weight:800; display:block; margin-bottom:6px }
input[type="text"]{ width:100% }
.feedback{ min-height:28px; margin:.4rem 0; font-size:1.1rem }
.solution{ font-weight:800; font-size:1.2rem; margin:.2rem 0 .4rem; opacity:.95 }
#progress{ height:12px; background:#eaeff2; border-radius:10px; overflow:hidden; margin:10px; max-width:520px; border:1px solid #d0d7de; flex:1 }
#bar{ height:100%; width:0; background:linear-gradient(90deg,var(--mint),var(--blue)) }
.bottom{ width:100%; justify-content:space-between }
.btns button{ border-color:var(--ink) }
.hide-opt{}
.hintErr .bad{ color:var(--red); text-decoration: underline wavy var(--red) 2px }
.hintErr .good{ color:inherit }
.ok{ color:var(--green); font-weight:800 }
@media (max-width: 760px){
  .inputs{ grid-template-columns:1fr }
}

/* Print styles for PDF/Print */
@media print{
  body{ background:#fff }
  header, .settings, .btns, #progress { display:none !important }
  .card{ box-shadow:none; border:1px solid #ddd }
  .solution{ font-size:1rem }
}