/* TOEIC Buổi Tối — giao diện làm bài (quiz runner, trình phát bài nghe, văn bản Part 6–7, phiếu trả lời). [learn]
   Mọi class mang tiền tố qz-. Chỉ dùng token và component của css/app.css; không có màu cứng, không có khối theme riêng.
   Mục lục: 1 khung · 2 thanh trên · 3 câu hỏi · 4 trình phát · 5 hội thoại · 6 văn bản · 7 điều hướng · 8 phiếu trả lời · 9 kết quả */

/* ───────────────────────── 1. Khung ───────────────────────── */
.qz {
  --qz-bar-h: 64px;
  display: grid; gap: var(--s4); min-width: 0; grid-template-columns: minmax(0, 1fr);
  scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + var(--s2));
}
.qz-body { min-width: 0; }
.qz-unit { display: grid; gap: var(--s4); min-width: 0; grid-template-columns: minmax(0, 1fr); }
.qz-unit:focus-visible { outline: none; }
.qz-unit-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.qz-part { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.qz-single, .qz-listen { display: grid; gap: var(--s4); min-width: 0; grid-template-columns: minmax(0, 1fr); max-width: 720px; }

/* Part 6–7 cần chỗ cho hai cột: nới rộng hơn cột nội dung khi màn hình đủ lớn */
@media (min-width: 900px) {
  .page .qz-wide {
    --qz-avail: calc(100vw - var(--side-w) - 2 * var(--gutter) - 20px);
    width: min(1180px, var(--qz-avail));
    margin-inline: calc((100% - min(1180px, var(--qz-avail))) / 2);
  }
  .app.is-focus .page .qz-wide, .app.is-bare .page .qz-wide { --qz-avail: calc(100vw - 2 * var(--gutter) - 20px); }
}

/* ───────────────────────── 2. Thanh trên: số câu, tiến độ, đồng hồ ───────────────────────── */
.qz-bar {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); z-index: 15;
  display: grid; gap: var(--s2); padding-block: var(--s2) var(--s3);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.view > .qz > .qz-bar { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.app.is-focus .qz-bar, .app.is-bare .qz-bar { top: env(safe-area-inset-top, 0px); }
@media (min-width: 900px) { .qz-bar { top: env(safe-area-inset-top, 0px); } }
.qz-bar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--tap); }
.qz-bar-info { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.qz-title { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-count { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-bar-tools { display: flex; align-items: center; gap: var(--s2); flex: none; }
.qz-timer {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface);
  font-weight: 600; font-size: 0.95rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* màn hình hẹp: thanh trên của bài kiểm tra chỉ giữ số câu, đồng hồ và phiếu trả lời (nút Nộp bài có trong phiếu và ở câu cuối) */
@media (max-width: 479px) {
  .qz-bar-tools { gap: 6px; }
  .qz[data-mode="test"] .qz-count-pre, .qz[data-mode="test"] .qz-timer .icon, .qz[data-mode="test"] .qz-submit { display: none; }
  .qz-list-btn { width: var(--tap); min-width: var(--tap); padding: 0; }
  .qz-list-btn > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
.qz-timer.is-warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn-ink); }
.qz-timer.is-danger { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-ink); }

/* ───────────────────────── 3. Câu hỏi ───────────────────────── */
.qz-q {
  display: grid; gap: var(--s3); min-width: 0; grid-template-columns: minmax(0, 1fr);
  padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  scroll-margin-top: calc(var(--qz-bar-h) + var(--topbar-h) + env(safe-area-inset-top, 0px) + var(--s3));
}
.qz-q.is-ok { border-color: var(--ok); }
.qz-q.is-bad { border-color: var(--bad); }
.qz-qhead { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-height: 28px; }
.qz-qnum { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--muted); }
.qz-verdict { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; }
.qz-verdict.is-ok { background: var(--ok-soft); color: var(--ok-ink); }
.qz-verdict.is-bad { background: var(--bad-soft); color: var(--bad-ink); }
.qz-flag {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
  font-size: var(--fs-sm); font-weight: 600;
}
.qz-flag:hover { border-color: var(--ink); }
.qz-flag[aria-pressed="true"] { background: var(--mark); border-color: var(--mark-line); color: var(--on-mark); }
.qz-todoc { margin-left: auto; }
.qz-flag + .qz-todoc { margin-left: 0; }

.qz-stem { font-size: 1.14rem; line-height: 1.65; max-width: 64ch; }
.qz-single .qz-stem { font-size: 1.24rem; }
.qz-blank { display: inline-block; min-width: 4.2em; margin: 0 0.15em; border-bottom: 2px solid var(--ink); line-height: 1.25; text-align: center; }
.qz-blank:empty::before { content: "\00a0"; }
.qz-blank.is-filled { min-width: 0; padding: 0 0.25em; border-bottom-color: var(--ok); color: var(--ok-ink); font-weight: 600; }
.qz-prompt { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.qz-ask { font-weight: 500; max-width: 64ch; }
.qz-word { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.qz-word-text { font-size: 1.9rem; font-weight: 600; line-height: 1.2; }
.qz-vi { color: var(--muted); font-size: 0.97rem; max-width: 68ch; }
.qz-vi-tag {
  display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: var(--r-sm); background: var(--sunken); color: var(--muted);
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; line-height: 1.7; vertical-align: 1px;
}
.qz-heard { max-width: 68ch; }
.qz-pre { display: grid; gap: var(--s1); min-width: 0; padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--sunken); }
.qz-fb { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px dashed var(--line-strong); min-width: 0; }
.qz-fb-ans { font-weight: 500; }
.qz-ex { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--sunken); line-height: 1.7; max-width: 70ch; }
.qz-type { display: grid; gap: 6px; max-width: 360px; }
.qz-input.is-ok { border-color: var(--ok); background: var(--ok-soft); }
.qz-input.is-bad { border-color: var(--bad); background: var(--bad-soft); }
.qz-note {
  display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-md);
  background: var(--warn-soft); color: var(--warn-ink); font-size: var(--fs-sm); font-weight: 500;
}
.qz-note .icon { margin-top: 3px; }
.qz-read { display: grid; gap: var(--s3); min-width: 0; }
.qz-read .qz-heard { font-size: 1.2rem; }
.qz-read-opts { display: grid; gap: 6px; }
.qz-read-opts b { font-family: var(--font-display); color: var(--muted); }
.qz-photo { display: grid; justify-items: start; }
.qz-photo .svg-photo { max-width: 520px; }
/* phương án đang được máy đọc (Part 1–2): vòng dạ quang quanh ô */
.qz .omr-opt.is-reading .omr-bubble { box-shadow: 0 0 0 4px var(--mark); }
.qz-qs { display: grid; gap: var(--s3); min-width: 0; }

/* ───────────────────────── 4. Trình phát bài nghe ───────────────────────── */
.qz-player {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3) var(--s4);
  padding: var(--s3) var(--s4); border: 1.5px solid var(--line-strong); border-radius: var(--r-xl); background: var(--surface);
}
.qz-play {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
  background: var(--brand); color: var(--on-brand); transition: background-color 0.12s, transform 0.06s;
}
.qz-play .icon { width: 26px; height: 26px; }
.qz-play .icon[data-icon="play"] { fill: currentColor; margin-left: 3px; }
.qz-play:hover:not(:disabled) { filter: brightness(0.92); }
.qz-play:active:not(:disabled) { transform: scale(0.96); }
.qz-play:disabled { opacity: 0.55; }
.qz-player[data-state="playing"] .qz-play { background: var(--pencil); color: var(--on-pencil); }
.qz-player[data-state="locked"] .qz-play { background: var(--sunken); color: var(--muted); opacity: 1; }
.qz-player-main { display: grid; gap: 6px; min-width: 0; }
.qz-player-status { font-size: var(--fs-sm); color: var(--muted); }
.qz-player[data-state="playing"] .qz-player-status { color: var(--ink); font-weight: 500; }
.qz-player-track { height: 6px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.qz-player-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand); transition: width 0.25s ease; }
.qz-player-tools { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.qz-player-tools .seg { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
.qz-player-tools .seg-opt { flex: 1 1 0; min-width: 0; padding-inline: var(--s1); }
/* màn hình hẹp: nút Nghe lại chỉ còn biểu tượng để nằm chung một hàng với tốc độ đọc */
.qz-replay { flex: none; width: var(--tap); min-width: var(--tap); padding: 0; border-radius: var(--r-pill); }
.qz-replay > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (min-width: 700px) {
  .qz-player { grid-template-columns: auto minmax(120px, 1fr) auto; }
  .qz-player-tools { grid-column: auto; }
  .qz-player-tools .seg-opt { flex: 0 0 auto; padding-inline: var(--s3); }
  .qz-replay { width: auto; min-width: 0; padding-inline: var(--s3); border-radius: var(--r-sm); }
  .qz-replay > span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

/* ───────────────────────── 5. Hội thoại, bài nói: lời thoại và từ khóa ───────────────────────── */
.qz-listen-top { display: grid; gap: var(--s3); min-width: 0; }
.qz-graphic .table caption { font-family: var(--font-en); font-size: 1.02rem; }
.qz-script { display: grid; gap: 2px; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
.qz-script-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); padding: 0 var(--s2) var(--s2); }
.qz-script-head h3, .qz-vocab h3 { font-size: var(--fs-md); }
.qz-script-hint { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.qz-line {
  display: flex; align-items: flex-start; gap: var(--s3); width: 100%; min-height: var(--tap); padding: var(--s2);
  border: 0; border-radius: var(--r-md); background: none; color: var(--ink); font: inherit; text-align: left;
}
button.qz-line:hover { background: var(--surface-2); }
.qz-line.is-reading { background: var(--mark-soft); box-shadow: inset 3px 0 0 var(--mark); }
.qz-who { flex: none; min-width: 46px; margin-top: 3px; padding: 1px 8px; border-radius: var(--r-sm); background: var(--sunken); font-size: var(--fs-xs); font-weight: 600; text-align: center; }
.qz-who[data-g="f"] { background: var(--brand-soft); color: var(--brand); }
.qz-line-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.qz-line-vi { font-size: var(--fs-sm); color: var(--muted); }
.qz-line-ico { flex: none; margin-top: 6px; color: var(--muted); }
.qz-vocab { display: grid; gap: var(--s2); min-width: 0; }
.qz-vocab-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.qz-vocab-list li {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 2px 14px 2px 4px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
}
.qz-vocab-list li > b:first-child { margin-left: 10px; }
.qz-vocab-list li span { font-size: var(--fs-sm); color: var(--muted); }

/* ───────────────────────── 6. Văn bản Part 6–7 ───────────────────────── */
.qz-split { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.qz-pane { display: grid; gap: var(--s3); min-width: 0; align-content: start; grid-template-columns: minmax(0, 1fr); scroll-margin-top: calc(var(--qz-bar-h) + var(--topbar-h) + env(safe-area-inset-top, 0px) + var(--s3)); }
.qz-pane:focus-visible { outline: none; }
.qz-side { display: grid; gap: var(--s3); min-width: 0; align-content: start; }
@media (min-width: 900px) {
  .qz-split { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--s5); }
  .qz-pane {
    position: sticky; top: calc(var(--qz-bar-h) + env(safe-area-inset-top, 0px) + var(--s3));
    max-height: calc(100vh - var(--qz-bar-h) - env(safe-area-inset-top, 0px) - var(--s6));
    max-height: calc(100dvh - var(--qz-bar-h) - env(safe-area-inset-top, 0px) - var(--s6));
    overflow-y: auto; overscroll-behavior: contain; padding-right: var(--s1);
  }
  .qz-pane > .tabs { position: sticky; top: 0; z-index: 1; background: var(--bg); }
}
.qz-doc {
  display: grid; gap: var(--s3); min-width: 0; grid-template-columns: minmax(0, 1fr);
  padding: var(--s4) var(--s4) var(--s5); border: 1px solid var(--line); border-top: 4px solid var(--line-strong);
  border-radius: var(--r-md); background: var(--surface);
}
.qz-doc-tag { justify-self: start; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.qz-doc-title { font-family: var(--font-en); font-size: 1.22rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.qz-doc-meta { display: grid; gap: 2px; margin: 0; padding: var(--s3); border-radius: var(--r-sm); background: var(--sunken); font-size: 0.95rem; }
.qz-doc-meta > div { display: grid; grid-template-columns: minmax(72px, max-content) minmax(0, 1fr); gap: var(--s2); }
.qz-doc-meta dt { font-weight: 600; color: var(--muted); }
.qz-doc-meta dd { margin: 0; min-width: 0; font-size: 1em; }
.qz-doc-text { display: grid; gap: var(--s3); max-width: 66ch; line-height: 1.7; }
.qz-doc-list { display: grid; gap: 4px; padding-left: 1.25em; list-style: disc; }
.qz-doc-ad { border-style: dashed; border-top-style: solid; }
.qz-doc-sign { border-width: 3px; border-color: var(--ink); }
.qz-doc-sign .qz-doc-text { justify-items: center; text-align: center; font-size: 1.2rem; font-weight: 600; max-width: none; }
.qz-doc-invoice .qz-doc-meta, .qz-doc-form .qz-doc-meta { background: none; padding: 0; border-bottom: 1px dashed var(--line-strong); border-radius: 0; padding-bottom: var(--s3); }
.qz-chat { display: grid; gap: var(--s2); }
.qz-msg { justify-self: start; display: grid; gap: 2px; max-width: 88%; padding: var(--s2) var(--s3); border-radius: 14px 14px 14px 4px; background: var(--sunken); }
.qz-msg.is-alt { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--brand-soft); }
.qz-msg-head { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.qz-msg-head b { color: var(--ink); }
.qz-pane-vi { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--sunken); font-size: 0.97rem; line-height: 1.65; }
.qz-pane-vi h3 { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
/* chỗ trống đánh số của Part 6 */
.qz-gap { cursor: pointer; padding-block: 6px; border-radius: var(--r-sm); }
.qz-gap:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.qz-gap-n { margin-right: 3px; font-family: var(--font-ui); font-size: 0.82em; font-weight: 600; color: var(--brand); }
.qz-gap-fill { padding: 0 3px; border-bottom: 2px solid var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.qz-gap:not(.is-filled) .qz-gap-fill::after { content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"; }
.qz-gap.is-filled .qz-gap-fill { border-bottom-color: var(--pencil); background: var(--mark-soft); }
.qz-gap.is-ok .qz-gap-fill { border-bottom-color: var(--ok); background: var(--ok-soft); }
.qz-gap.is-bad .qz-gap-fill { border-bottom-color: var(--bad); background: var(--bad-soft); }
.qz-gap s { margin-right: 6px; color: var(--bad-ink); }
.qz-gap-ans { font-weight: 600; }

/* ───────────────────────── 7. Điều hướng dưới ───────────────────────── */
.qz-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s3); min-width: 0; }
.qz:not(.qz-wide) > .qz-nav { max-width: 720px; }
.qz-nav-left:empty { display: none; }
.qz-nav-right { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); grid-column: 3; }
.qz-hint { min-width: 0; font-size: var(--fs-sm); color: var(--muted); grid-column: 2; }
.qz-hint:empty { visibility: hidden; }
@media (max-width: 639px) {
  .qz-nav { grid-template-columns: auto minmax(0, 1fr); }
  .qz-hint { grid-column: 1 / -1; grid-row: 1; }
  .qz-hint:empty { display: none; }
  .qz-nav-left { grid-column: 1; }
  .qz-nav-right { grid-column: 2; flex-wrap: nowrap; }
  .qz-nav-right .btn-primary { flex: 1 1 auto; }
  .qz-q { padding: var(--s3); }
  .qz-single .qz-stem { font-size: 1.16rem; }
  .qz-doc { padding: var(--s3) var(--s3) var(--s4); }
}

/* vùng bấm từ 44px trên màn hình chạm cho mọi control của phần làm bài */
@media (max-width: 899px) {
  .qz .btn-sm, .qz .seg-opt, .qz-flag, .qz button.chip { min-height: var(--tap); }
  .qz .btn-icon.btn-sm, .qz-replay, .qz-list-btn { width: var(--tap); min-width: var(--tap); }
}

/* ───────────────────────── 8. Phiếu trả lời ───────────────────────── */
.qz-sheet { display: grid; gap: var(--s3); min-width: 0; }
.qz-sheet-sum { margin-bottom: var(--s3); color: var(--muted); }
.qz-sheet-sum b { color: var(--ink); }
.qz-sheet-part { margin-top: var(--s2); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.qz-sheet-part:first-child { margin-top: 0; }
.qz-sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 10px 6px; justify-items: center; }
.qz-cell {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; line-height: 1;
}
button.qz-cell:hover { border-color: var(--ink); }
.qz-cell.is-answered {
  border-color: var(--pencil); color: var(--on-pencil); background-color: var(--pencil);
  background-image: repeating-linear-gradient(-52deg, transparent 0 2.5px, var(--pencil-grain) 2.5px 3.5px);
}
.qz-cell.is-ok { border-color: var(--ok); background: var(--ok); color: var(--on-ok); }
.qz-cell.is-bad { border-color: var(--bad); background: var(--bad); color: var(--on-bad); }
.qz-cell.is-current { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.qz-cell.is-flag::after { content: ""; position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border: 2px solid var(--surface); border-radius: 50%; background: var(--mark); }
.qz-cell-l {
  position: absolute; right: -5px; bottom: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px;
  border: 1.5px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 0.66rem;
}
.qz-sheet-legend { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--muted); line-height: 2.4; }
.qz-sheet-legend .qz-cell { display: inline-grid; width: 26px; height: 26px; margin: 0 2px 0 10px; font-size: 0.72rem; vertical-align: middle; }
.qz-sheet-legend .qz-cell:first-child { margin-left: 0; }
.qz-sheet-legend .qz-cell.is-flag::after { width: 10px; height: 10px; }
.qz-sheet-legend .qz-cell.is-current { outline-width: 2px; }

/* ───────────────────────── 9. Màn kết quả mặc định ───────────────────────── */
.qz-sum { gap: var(--s4); max-width: 720px; }
.qz-sum-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.qz-sum-main { display: grid; gap: var(--s2); min-width: 0; justify-items: start; }
.qz-sum-title { font-size: var(--fs-xl); }
.qz-sum-score b { font-size: 1.15em; }
.qz-sum-parts { display: grid; gap: var(--s2); }
.qz-sum-part { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: var(--fs-sm); }
@media (min-width: 640px) { .qz-sum-part { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--s3); align-items: center; } }
.qz-sum-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }