.basics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.basics-question{min-width:0;margin:0;padding:25px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(140deg,#0c4436,#06352b)}
.basics-question legend{display:flex;align-items:center;gap:10px;padding:0 8px;font-size:16px;font-weight:650;color:var(--text)}
.basics-number{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:#ffcf8c;color:#402b0d;font-size:14px}
.basics-prompt{min-height:62px;margin:10px 0 20px;font-size:15px;line-height:1.7;color:var(--text)}
.basics-options{display:grid;gap:10px}
.basics-option{display:flex;align-items:center;gap:12px;padding:12px 15px;min-height:48px;border:1px solid var(--border);border-radius:13px;background:#0b3d30;cursor:pointer;font-size:14px;color:var(--text)}
.basics-option:hover{background:#164c39;border-color:#a3bf88}
.basics-option:has(input:checked){background:#194d35;border-color:#ffcf8c}
.basics-form .basics-option input{appearance:none;-webkit-appearance:none;flex:0 0 22px;width:22px;min-width:22px;max-width:22px;height:22px;min-height:22px;max-height:22px;padding:0;margin:0;border:1.5px solid #a0b390;border-radius:50%;background:#073427;cursor:pointer}
.basics-option input:checked{background:#ffcf8c;border-color:#ffcf8c;box-shadow:inset 0 0 0 5px #0b3d30}
.basics-option input:focus-visible{outline:3px solid #ffd18e;outline-offset:4px}
.basics-question[aria-invalid=true]{border-color:#f2b781}
.basics-feedback{margin-top:17px;padding:15px;border-radius:14px;border:1px solid #d5af79;background:#184934;color:var(--text)}
.basics-feedback p{margin:6px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.basics-feedback[data-correct=false]{background:#393d26}
.basics-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.basics-error{border:1px solid #ffc78d;background:#3d3522;border-radius:14px;padding:15px 18px;color:#ffe2bd;margin-top:20px}
.basics-result{margin-top:24px;padding:28px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(130deg,#164c39,#0b3b30)}
.basics-result-top{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:650;color:#ffd18e}
.basics-result-top .art{width:44px;height:44px}
.basics-result h3{font-size:25px;margin:15px 0 10px;color:var(--text)}
.basics-result p{font-size:14px;line-height:1.8;color:var(--muted)}
.basics-result .basics-topics{color:var(--text);font-weight:650}
.basics-offline{margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:12px}
.basics-offline summary{cursor:pointer;color:var(--text)}
.basics-offline p{font-size:13px;line-height:1.7;color:var(--muted)}
.basics-form [hidden],.basics-result[hidden]{display:none}
:root[data-theme=light] .basics-question{background:linear-gradient(140deg,#f8faf0,#e7efdd)}
:root[data-theme=light] .basics-option{background:#f3f6e9}
:root[data-theme=light] .basics-option:hover{background:#e1ecd2;border-color:#617d54}
:root[data-theme=light] .basics-option:has(input:checked){background:#dce8c9;border-color:#728a55}
:root[data-theme=light] .basics-option input{background:#fffdf4;border-color:#72876d}
:root[data-theme=light] .basics-option input:checked{background:#517a4c;box-shadow:inset 0 0 0 5px #f3f6e9;border-color:#517a4c}
:root[data-theme=light] .basics-option input:focus-visible{outline-color:#466b42}
:root[data-theme=light] .basics-feedback{background:#e2edcf;border-color:#769561}
:root[data-theme=light] .basics-feedback[data-correct=false]{background:#f6eacc;border-color:#ac8446}
:root[data-theme=light] .basics-error{background:#f8e4cc;border-color:#a17b48;color:#59401b}
:root[data-theme=light] .basics-result{background:linear-gradient(130deg,#e1eccf,#f8f9ef)}
:root[data-theme=light] .basics-result-top{color:#3d613c}
@media(max-width:650px){.basics-grid{grid-template-columns:1fr;gap:18px}.basics-question{padding:20px}.basics-prompt{min-height:0;font-size:14px}.basics-actions .button{width:100%}.basics-result{padding:21px}.basics-result h3{font-size:22px}}