/* English Resources: interactive chapter activities */
.er-q { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.9rem 1rem; margin: 0.75rem 0 1rem; }
.er-q .er-stem { margin: 0 0 0.6rem; font-weight: 600; }
.er-opts, .er-board { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.er-chip { appearance: none; border: 2px solid #cbd5e0; background: #f7fafc; color: #2d3748; border-radius: 999px; padding: 0.55rem 1rem; font-size: 1rem; line-height: 1.2; min-height: 44px; cursor: pointer; font-family: inherit; transition: transform .08s ease, background .15s ease, border-color .15s ease; }
.er-chip:hover:not(:disabled) { border-color: #3182ce; background: #ebf8ff; }
.er-chip:active:not(:disabled) { transform: scale(0.97); }
.er-chip:disabled { cursor: default; opacity: 1; }
.er-chip.is-picked { border-color: #3182ce; background: #bee3f8; }
.er-chip.is-right { border-color: #38a169; background: #c6f6d5; color: #22543d; }
.er-chip.is-wrong { border-color: #e53e3e; background: #fed7d7; color: #742a2a; animation: er-shake .35s ease; }
@keyframes er-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.er-feedback { margin: 0.6rem 0 0; font-weight: 600; min-height: 1.2em; }
.er-feedback.is-right { color: #276749; }
.er-feedback.is-wrong { color: #c53030; }
.er-why { margin: 0.5rem 0 0; color: #4a5568; font-size: 0.95rem; }
.er-js .er-q:not(.is-done) .er-why { display: none; }
.er-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border: 1px solid #edf2f7; border-radius: 8px; margin: 0 0 0.5rem; }
.er-row.is-right { background: #f0fff4; border-color: #9ae6b4; }
.er-row.is-wrong { background: #fff5f5; border-color: #feb2b2; }
.er-row .er-line { flex: 1 1 14rem; font-style: italic; }
.er-select { font-size: 1rem; min-height: 44px; padding: 0.3rem 0.5rem; border: 2px solid #cbd5e0; border-radius: 8px; background: #fff; font-family: inherit; max-width: 100%; }
.er-correct { color: #276749; font-weight: 600; }
.er-btn { display: inline-block; appearance: none; border: 0; background: #2b6cb0; color: #fff; border-radius: 8px; padding: 0.65rem 1.1rem; font-size: 1rem; min-height: 44px; cursor: pointer; text-decoration: none; font-family: inherit; margin-top: 0.4rem; }
.er-btn:hover { background: #2c5282; color: #fff; }
.er-btn:disabled { background: #a0aec0; cursor: default; }
.er-btn-wa { background: #25d366; color: #073b1c; }
.er-btn-wa:hover { background: #1ebe5a; color: #073b1c; }
.er-scorebar { position: sticky; top: calc(var(--header-h, 64px) + 6px); z-index: 5; background: #ebf8ff; border: 1px solid #bee3f8; border-radius: 10px; padding: 0.6rem 0.9rem; margin: 1rem 0; font-size: 0.92rem; font-weight: 600; color: #2c5282; }
.er-scorebar-track { height: 8px; background: #fff; border-radius: 999px; margin-top: 0.4rem; overflow: hidden; }
.er-scorebar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #3182ce, #38a169); border-radius: 999px; transition: width .4s ease; }
.er-result { text-align: center; background: linear-gradient(135deg, #f0fff4, #ebf8ff); border: 2px solid #9ae6b4; border-radius: 14px; padding: 1.2rem 1rem; margin: 1rem 0 1.5rem; }
.er-result-stars { font-size: 2.2rem; color: #d69e2e; letter-spacing: 0.2rem; }
.er-result-score { font-size: 1.6rem; font-weight: 700; color: #22543d; }
.er-result-msg { margin: 0.3rem 0; }
.er-mr { color: #4a5568; }
.er-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.6rem; }
details.er-reveal, details.er-key { border: 1px dashed #90cdf4; border-radius: 10px; padding: 0.6rem 0.9rem; margin: 0.6rem 0 1rem; background: #fbfdff; }
details.er-reveal > summary, details.er-key > summary { cursor: pointer; font-weight: 600; color: #2b6cb0; min-height: 32px; }
details.er-reveal[open] > summary, details.er-key[open] > summary { margin-bottom: 0.5rem; }
.er-selfcheck { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid #e2e8f0; }
.er-selfcheck-label { font-weight: 600; font-size: 0.95rem; }
.er-selfcheck-note { color: #4a5568; font-size: 0.93rem; }
.er-try { background: #fffaf0; border-left: 4px solid #ed8936; padding: 0.6rem 0.9rem; border-radius: 4px; margin: 0.5rem 0; }
.er-order { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.4rem 0; }
.er-order-item { display: flex; align-items: flex-start; gap: 0.6rem; width: 100%; text-align: left; appearance: none; border: 2px solid #cbd5e0; background: #f7fafc; color: #2d3748; border-radius: 10px; padding: 0.6rem 0.75rem; font-size: 0.98rem; line-height: 1.4; min-height: 44px; cursor: pointer; font-family: inherit; }
.er-order-item:hover:not(:disabled) { border-color: #3182ce; }
.er-order-item:disabled { cursor: default; }
.er-order-item.is-picked { border-color: #3182ce; background: #ebf8ff; }
.er-order-item.is-right { border-color: #38a169; background: #f0fff4; }
.er-order-item.is-wrong { border-color: #e53e3e; background: #fff5f5; }
.er-order-num { flex: 0 0 1.8rem; height: 1.8rem; border-radius: 50%; border: 2px solid #cbd5e0; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #2b6cb0; }
.er-order-item.is-picked .er-order-num { border-color: #3182ce; background: #3182ce; color: #fff; }
.er-order-item.is-right .er-order-num { border-color: #38a169; background: #38a169; color: #fff; }
.er-order-item.is-wrong .er-order-num { border-color: #e53e3e; background: #e53e3e; color: #fff; }
.er-order-text { flex: 1 1 auto; }
.er-order-help { margin: 0 0 0.5rem; color: #4a5568; font-size: 0.93rem; }
.er-order-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.er-btn-light { background: #edf2f7; color: #2d3748; }
.er-btn-light:hover { background: #e2e8f0; color: #2d3748; }
@media (max-width: 480px) { .er-q { padding: 0.8rem 0.75rem; } .er-chip { font-size: 0.98rem; } .er-scorebar { font-size: 0.85rem; } }
@media (prefers-reduced-motion: reduce) { .er-chip, .er-scorebar-fill { transition: none; } .er-chip.is-wrong { animation: none; } }
.er-h2 { color: #2b6cb0; font-size: 1.45rem; margin: 2rem 0 0.75rem; }
.er-h3 { color: #2c5282; font-size: 1.12rem; margin: 1.5rem 0 0.5rem; }
.er-ans { background: #f0fff4; border-left: 4px solid #38a169; padding: 0.8rem 1.1rem; border-radius: 4px; margin: 0.5rem 0 1rem; }
.er-ans > :last-child, .er-ans ol, .er-ans ul { margin-bottom: 0; }
.er-ans > :first-child { margin-top: 0; }
.er-ans p { margin: 0 0 0.5rem; }
.er-ans p:last-child { margin-bottom: 0; }
.er-tip { color: #4a5568; font-size: 0.93rem; margin: 0.3rem 0 1rem; font-style: italic; }
.er-nav { background: #ebf8ff; border: 1px solid #bee3f8; border-radius: 8px; padding: 0.8rem 1.1rem; margin: 1rem 0 1.5rem; font-size: 0.95rem; }
.er-tw { overflow-x: auto; }
.er-tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.er-tbl th, .er-tbl td { padding: 0.6rem 0.75rem; border: 1px solid #e2e8f0; vertical-align: top; }
.er-tbl th { background: #edf2f7; text-align: left; }