/* components: cards, forms, buttons, chips, quiz options */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:18px;margin-bottom:14px;border:1px solid #ffe3ea;overflow-wrap:anywhere}
.page h2{margin-top:0;font-size:clamp(1.15rem,4vw,1.6rem)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row input,.row select{flex:1 1 200px;min-width:0;padding:13px 14px;min-height:48px;border-radius:14px;border:2px solid #ffd6de;font-size:1rem;outline:none;background:#fff}
.row input:focus,.row select:focus{border-color:var(--pinkd)}
button.primary{background:var(--pinkd);color:#fff;border:none;border-radius:14px;padding:12px 20px;min-height:48px;font-weight:800;font-size:1rem;cursor:pointer}
.speak{background:#fff;border:2px solid var(--pink);border-radius:999px;padding:8px 12px;min-height:44px;min-width:44px;cursor:pointer;margin-left:6px;font-size:1rem}
.speak.playing{background:var(--pinkd);border-color:var(--pinkd);color:#fff}
.donebtn{border:2px solid var(--pinkd);background:#fff;color:var(--pinkd);border-radius:999px;padding:8px 16px;min-height:44px;font-weight:800;font-size:.9rem;cursor:pointer;margin-top:8px}
.donebtn.done{background:var(--pinkd);color:#fff}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{background:#fff;border:1px solid var(--pink);border-radius:999px;padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;font-size:.85rem;font-family:inherit}
.chip.on{background:var(--pinkd);color:#fff;border-color:var(--pinkd);font-weight:800}
.qopt{display:block;width:100%;text-align:left;margin:8px 0;background:#fff;border:2px solid #ffd6de;border-radius:12px;padding:14px;min-height:52px;cursor:pointer;font-size:1rem;font-family:inherit}
.qopt.correct{border-color:#2ecc71;background:#eafaf1}
.qopt.wrong{border-color:#e74c3c;background:#fdedec}