.living-wall .lw-dialog[data-layout=quiz]:not([data-full]) { height: fit-content; }
.lw-dialog[data-layout=quiz]:not([data-full]) > .lw-modal { height: auto; }
.lw-dialog[data-full] .wq { display: flex; flex: 1; flex-direction: column; min-height: 0; }

[data-wq-mode=sprint] { --wq: #8f6a12; --wq-tint: #f1e9c9; --wq-soft: #f8f3e1; }
[data-wq-mode=blanks] { --wq: #62539a; --wq-tint: #e4def0; --wq-soft: #f2eff8; }
[data-wq-mode=listen] { --wq: #a8562c; --wq-tint: #f0dccb; --wq-soft: #f9eee4; }

.lw-dialog[data-layout=quiz]:not([data-full]) > .lw-error:empty { display: none; }
.lw-dialog[data-layout=quiz] .wq > h2:first-child { margin-top: 0; }
.wq-modes { display: grid; gap: 12px; margin: 4px 0 0; }
.living-wall .wq-mode { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 16px 14px 14px; border: 1px solid color-mix(in srgb, var(--wq) 26%, #fff); border-radius: 14px; background: var(--wq-soft); color: var(--ink); text-align: left; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.living-wall .wq-mode:hover { border-color: var(--wq); background: var(--wq-tint); transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--wq) 18%, transparent); }
.living-wall .wq-mode:active { transform: translateY(0); box-shadow: none; }
.living-wall [data-wq-mode] :focus-visible, .living-wall .wq-mode:focus-visible { outline-color: var(--wq); }
.wq-icon { display: grid; flex-shrink: 0; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--wq-tint); color: var(--wq); transition: background .15s, color .15s, transform .15s; }
.wq-mode:hover .wq-icon { background: var(--wq); color: #fff; transform: rotate(-6deg) scale(1.05); }
.wq-icon-sm { width: 32px; height: 32px; border-radius: 9px; }
.wq-icon-sm svg { width: 18px; height: 18px; }
.wq-mode > span { display: grid; flex: 1; gap: 2px; min-width: 0; }
.wq-mode strong { font: 500 19px/1.3 Gabarito, system-ui, sans-serif; }
.wq-mode small { font-size: 14px; line-height: 1.45; color: #56604f; }
.wq-mode > b { flex-shrink: 0; padding: 4px 10px; border-radius: 30px; background: #fff; font-size: 13px; font-weight: 600; color: var(--wq); white-space: nowrap; }
.wq > .lw-text-action { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .living-wall .wq-mode, .wq-icon { transition: none; } .living-wall .wq-mode:hover, .wq-mode:hover .wq-icon { transform: none; } }

.wq-loading { display: grid; justify-items: center; gap: 6px; padding: 72px 0; text-align: center; }
.wq-loading strong { font: 400 24px/1.3 Lora, Georgia, serif; letter-spacing: -.02em; }
.lw-dialog .wq-loading p { margin: 0; font-size: 15px; color: #5f6a58; }
.wq-spinner { width: 26px; height: 26px; margin-bottom: 14px; border: 3px solid #d7dccf; border-top-color: var(--wq, var(--accent)); border-radius: 50%; animation: lw-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .wq-spinner { animation-duration: 2.4s; } }

.wq .lw-full-top { gap: 12px; }
.wq .lw-full-top .lw-progress { background: var(--wq-tint); }
.wq .lw-full-top .lw-progress span { background: var(--wq); transition: width .35s ease; }
.wq .wq-count { display: inline-block; padding: 4px 10px; border-radius: 30px; background: var(--wq-tint); color: var(--wq); letter-spacing: .1em; }
.wq-clock { flex-shrink: 0; min-width: 44px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.wq-clock.is-ending { color: #a5463a; }

.lw-dialog[data-layout=quiz] .wq .wq-sentence { font-size: 30px; line-height: 1.4; }
.wq-gap { display: inline-block; min-width: 3.4em; margin: 0 .1em; border-bottom: 3px solid var(--wq, #8a9180); border-radius: 2px; line-height: 1.1; text-align: center; vertical-align: baseline; }
.wq-gap:empty::before { content: "\00a0"; }
.wq-gap.is-correct { border-color: #2f6b45; color: #2f6b45; }
.wq-gap.is-shown { border-color: #a5463a; color: #a5463a; }
.lw-dialog .wq-translation { margin: 6px 0 0; font-size: 16px; color: #5f6a58; }
.lw-dialog .wq-heard { margin: 18px 0 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--wq); font: 400 28px/1.45 Lora, Georgia, serif; letter-spacing: -.02em; color: var(--ink); }
.living-wall .wq-play { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 11px 22px 11px 16px; border: 0; border-radius: 30px; background: var(--wq); color: #fff; font-weight: 600; transition: transform .15s, box-shadow .15s; }
.living-wall .wq-play:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--wq) 30%, transparent); }
.wq-play[aria-busy=true] svg { animation: wp-pulse 1s ease-in-out infinite; }
.lw-dialog[data-layout=quiz] .wq .wq-question { margin-top: 26px; font-size: 22px; }

.wq-options { margin: 20px 0 0; }
.living-wall .wq-options .lw-option { font-size: 16px; line-height: 1.45; transition: border-color .15s, background .15s; }
.living-wall .wq-options .lw-option:hover:not(:disabled) { border-color: var(--wq); background: var(--wq-soft); }
.living-wall .wq-options .lw-option:disabled { opacity: 1; }
.living-wall .wq-options .lw-option:disabled:not(.is-correct, .is-wrong) { color: #66705f; }
.lw-dialog .wq-form label { margin-top: 24px; font-size: 14px; color: #4f5d48; }
.lw-dialog .wq-form input { font-size: 20px; }
.living-wall .wq-form input:focus-visible { border-color: var(--wq); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wq) 18%, transparent); }
.living-wall .wq-form input:disabled { opacity: 1; background: #f4f5ef; color: #4f5d48; }
.lw-dialog[data-full] .lw-full-inner .wq-actions, .wq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }

.wq-result { margin-top: 22px; padding: 16px 18px; border-radius: 12px; }
.wq-result.is-pass { background: #e3efe2; }
.wq-result.is-miss { background: #f7e6e1; }
.wq-result strong { font-size: 17px; font-weight: 600; }
.lw-dialog .wq-result p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: #36463a; }
.lw-dialog .wq-error { margin: 14px 0 0; font-size: 14px; color: #9b4232; }
.wq-error:empty { display: none; }

.wq-missed { margin-top: 26px; padding-top: 20px; border-top: 1px solid #dedfd5; }
.lw-dialog .wq-missed h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #4f5d48; }
.wq-missed ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wq-missed li { padding: 14px 16px; border: 1px solid #e0e3d7; border-radius: 12px; background: #fff; }
.lw-dialog .wq-missed p { margin: 0; font-size: 16px; line-height: 1.5; }
.lw-dialog .wq-missed .wq-fix { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.wq-fix s { color: #a5463a; }
.wq-fix b { font-weight: 600; color: #2f6b45; }
.wq-missed small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: #5f6a58; }

@media (max-width: 600px) {
  .lw-dialog[data-layout=quiz] .wq .wq-sentence { font-size: 25px; }
  .lw-dialog .wq-heard { font-size: 23px; }
  .living-wall .wq-mode { padding: 14px; }
}