* {
  box-sizing: border-box;
}

:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #fdf7fa;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at top left, rgba(255, 95, 162, 0.12), transparent 35%),
    linear-gradient(180deg, #fff9fc 0%, #fdf2f7 100%);
}

button,
input {
  font: inherit;
}

.app-shell {
  width: min(100%, 620px);
}

.card {
  background: white;
  border: 1px solid #f0dbe6;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 18px 45px rgba(31, 41, 55, 0.08);
}

.hidden { display: none !important; }

.flag { font-size: 52px; margin-bottom: 8px; }

h1,h2,p { margin-top: 0; }
h1 { margin-bottom: 8px; }
h2 { margin-bottom: 6px; }

.muted,.progress-text { color:#6b7280; }

label { display:block; margin:22px 0 8px; font-weight:700; }

input[type="password"],
input[type="text"]{
  width:100%;
  border:2px solid #ead7e0;
  border-radius:14px;
  padding:14px 16px;
  outline:none;
  transition:.2s ease;
}

input:focus{
  border-color:#ff5fa2;
  box-shadow:0 0 0 4px rgba(255,95,162,.12);
}

button{
  width:100%;
  border:none;
  border-radius:14px;
  padding:14px 18px;
  margin-top:16px;
  background:#ff5fa2;
  color:white;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 0 #e3478d;
  transition:transform .08s ease,filter .2s ease;
}

button:hover{filter:brightness(.97);}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #e3478d;}

button.secondary{
  background:#fff2f8;
  color:#374151;
  box-shadow:0 4px 0 #f0dbe6;
}

button.small{width:auto;margin-top:0;padding:10px 14px;}

.error{color:#c62828;margin-top:12px;min-height:22px;}

.top-row{display:flex;align-items:start;justify-content:space-between;gap:20px;}

.eyebrow{color:#ff5fa2;font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;}

.lesson-list{display:grid;gap:14px;margin-top:24px;}

.lesson-card{
display:flex;align-items:center;gap:16px;width:100%;margin-top:0;padding:16px;text-align:left;
color:#374151;background:white;border:2px solid #ead7e0;box-shadow:0 4px 0 #ead7e0;
}

.lesson-card:hover{border-color:#ff5fa2;background:#fff4f9;}

.lesson-badge{
display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:50%;
color:white;background:#ff5fa2;font-size:1.1rem;font-weight:900;
}

.lesson-card-text{display:grid;gap:4px;}
.lesson-card-text strong{font-size:1rem;}
.lesson-card-text span{color:#6b7280;font-size:.92rem;font-weight:600;}

.progress-track{height:14px;background:#f3dfe8;border-radius:999px;overflow:hidden;margin-top:24px;}
.progress-bar{height:100%;width:0;background:#ff5fa2;border-radius:inherit;transition:width .25s ease;}

.exercise-card{margin-top:26px;}
.prompt{font-size:1.15rem;font-weight:800;margin-bottom:18px;}

.options{display:grid;gap:10px;}
.option,.word{
  width:100%;margin-top:0;background:white;color:#374151;
  border:2px solid #ead7e0;box-shadow:0 3px 0 #ead7e0;text-align:left;
}
.word{width:auto;margin:0;padding:10px 13px;}
.option.selected{border-color:#ff5fa2;background:#fff0f7;box-shadow:0 3px 0 #ff5fa2;}

.word-bank,.answer-zone{
display:flex;flex-wrap:wrap;gap:10px;min-height:58px;padding:12px;border-radius:14px;
}
.word-bank{background:#fff7fb;}
.answer-zone{border:2px dashed #ead7e0;margin-bottom:14px;}
.word.selected{opacity:.45;pointer-events:none;}

.feedback{margin-top:22px;border-radius:14px;padding:14px 16px;font-weight:750;}
.feedback.correct {
    background: #dff7e3;
    color: #1b8a3d;
}
.feedback.wrong{background:#ffebee;color:#a61b29;}

.button-row{display:flex;gap:12px;}
.button-row button{flex:1;}
.finish-card{text-align:center;}

@media (max-width:560px){
body{padding:12px;}
.card{padding:22px;border-radius:20px;}
.top-row{flex-direction:column;}
button.small{width:100%;}
.button-row{flex-direction:column;gap:0;}
}