:root{--green:#176b45;--gold:#aa883c;--ink:#243a2c;--muted:#5b6b61;--border:#dce5dd;--soft:#f3f7f3}*{box-sizing:border-box}body{margin:0;background:#f9fbf9;color:var(--ink);font:17px/1.55 system-ui,-apple-system,'Segoe UI',sans-serif}.shell{max-width:650px;margin:0 auto;padding:20px 16px 35px}header{display:flex;align-items:center;gap:12px;padding:12px 0 20px;border-bottom:2px solid #c9b16d}header strong{display:block;color:var(--green);font-size:21px}header small{display:block;color:var(--gold);font-size:13px}.mark{background:var(--green);color:white;border-radius:12px;font-size:23px;padding:9px 14px}.panel{margin-top:25px;padding:26px 22px;background:white;border:1px solid var(--border);border-radius:18px;box-shadow:0 5px 18px #143d2310}.hidden{display:none!important}.eyebrow{font-size:12px;letter-spacing:1.3px;font-weight:750;color:var(--gold)}h1{color:var(--green);font-size:30px;line-height:1.2;margin:8px 0 15px}p{margin:10px 0}.arabic{font-size:15px;color:var(--muted);margin-bottom:26px}.choice{display:flex;justify-content:space-between;align-items:center;text-align:left;width:100%;border:1px solid var(--border);background:var(--soft);border-radius:12px;padding:17px;margin:13px 0;cursor:pointer;color:var(--green);font:inherit}.choice.secondary{background:white;border-color:#c9b16d}.choice small{display:block;color:var(--muted);font-size:13px;margin-top:5px}.choice:hover,.option:hover{border-color:var(--green)}button:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid #d2b65d;outline-offset:2px}.back{border:0;background:none;color:var(--green);font:inherit;cursor:pointer;padding:0 0 12px}.progress{height:7px;background:var(--soft);border-radius:9px;overflow:hidden}.progress div{height:100%;background:var(--gold);transition:width .2s}.step{color:var(--muted);font-size:13px}.example{background:var(--soft);border-left:4px solid var(--gold);padding:13px 16px;border-radius:7px;margin:15px 0}.question{font-weight:700;margin:20px 0 10px}.option{display:block;width:100%;padding:13px;margin:9px 0;background:white;border:1px solid var(--border);border-radius:9px;text-align:left;font:inherit;cursor:pointer}.option:disabled{cursor:default}.option.selected{border-color:var(--green);background:#e9f4eb}.primary{border:0;background:var(--green);color:white;padding:12px 20px;border-radius:9px;font:inherit;font-weight:650;cursor:pointer;margin-top:15px}.primary:disabled{opacity:.5;cursor:not-allowed}input[type=text],textarea{width:100%;border:1px solid #b9c9bc;border-radius:9px;padding:13px;font:inherit}textarea{min-height:155px;resize:vertical}#feedback{margin:14px 0}#feedback.good{color:#176b45}#feedback.help{color:#795c1b}.tabs{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}.tabs button{border:1px solid var(--border);background:white;border-radius:8px;padding:9px;font:inherit;font-size:14px;cursor:pointer}.tabs button.active{background:var(--green);color:white}footer{text-align:center;font-size:12px;color:var(--muted);margin-top:23px}@media(max-width:420px){h1{font-size:26px}.panel{padding:21px 16px}header strong{font-size:18px}}

.conversation{display:flex;flex-direction:column;gap:12px;margin:18px 0;min-height:140px}.bubble{max-width:92%;padding:12px 15px;border-radius:12px;background:var(--soft);white-space:pre-wrap;overflow-wrap:anywhere}.bubble.user{align-self:flex-end;background:#fff7e7;border:1px solid #e5d5a4}.bubble.assistant{align-self:flex-start;border:1px solid var(--border)}.bubble strong{color:var(--green);font-size:13px}.bubble p{margin:5px 0 0}.chat-form label{display:block;font-weight:650;margin-bottom:6px}.chat-form textarea{min-height:90px}.chat-form .primary{margin-top:9px}#chatStatus{min-height:22px}

h2{font-size:19px;color:var(--green);margin:25px 0 8px}.choices{display:grid;gap:8px}.choices .choice{margin:0}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.secondary-action{border:1px solid var(--border);border-radius:9px;padding:12px 15px;background:white;color:var(--green);font:inherit;cursor:pointer;margin-top:15px}.secondary-action:disabled,.back:disabled{opacity:.5}.conversation{max-height:540px;overflow-y:auto}.bubble p{white-space:pre-wrap}

/* Vocabulary emphasis: same size, bold black */
.bubble.assistant p strong{color:#000;font-size:inherit;font-weight:700;line-height:inherit}
