/* ============================================================================
   quiz.css — стили фичи «Квизы» (полка, сборщик, плеер Bluebook, результат).
   ОТДЕЛЬНЫЙ файл: styles.css правит параллельная сессия — не трогаем его.
   Палитра/шрифты — через CSS-переменные приложения (fallback = дизайн-система:
   синий #1769C4, чернила #0A2342). Карточки плоские (границы, без теней).
   ============================================================================ */

/* ---------- общие кнопки квиза ---------- */
.qz-btn {
  display: inline-flex; align-items: center; gap: var(--space-4);
  border: var(--bw-1) solid var(--indigo, #1769C4); border-radius: var(--radius-pill);
  background: var(--indigo, #1769C4); color: #fff;
  font: inherit; font-size: var(--fs-4); font-weight: 700; line-height: 1;
  padding: var(--space-5) var(--space-9); cursor: pointer;
}
.qz-btn:hover { filter: brightness(1.07); }
.qz-btn:disabled { opacity: .45; cursor: default; filter: none; }
.qz-btn--ghost { background: transparent; color: var(--indigo, #1769C4); }
.qz-btn--ghost:hover { background: rgba(23, 105, 196, .07); filter: none; }
.qz-btn--quiet {
  background: transparent; border-color: var(--card-border, #d5dbe3);
  color: var(--ink, #0A2342); font-weight: 600;
}
.qz-btn--quiet:hover { border-color: var(--indigo, #1769C4); color: var(--indigo, #1769C4); background: transparent; filter: none; }
.qz-btn--danger { background: transparent; border-color: transparent; color: #B3261E; font-weight: 600; }
.qz-btn--danger:hover { background: rgba(179, 38, 30, .08); filter: none; }

#gen-results-head .qz-btn { margin-left: auto; } /* кнопка «＋ Quiz» уходит вправо в шапке результатов */

/* ---------- полка квизов (в Saved questions) ---------- */
.qz-shelf { margin: 0 0 var(--space-11); }
.qz-shelf__head { display: flex; align-items: center; gap: var(--space-5); margin: 0 0 var(--space-5); }
.qz-shelf__title { margin: 0; font-size: var(--fs-7); font-weight: 800; color: var(--ink, #0A2342); }
.qz-shelf__count { font-size: var(--fs-3); font-weight: 700; color: var(--indigo, #1769C4); }
.qz-shelf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); }
.qz-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-5);
  background: var(--card-bg, #fff); padding: var(--space-7) var(--space-8);
}
.qz-card__title { font-weight: 700; color: var(--ink, #0A2342); font-size: var(--fs-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-card__meta { font-size: var(--fs-3); color: var(--ink-3, #5b6b7d); }
.qz-card__row { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-1); }
.qz-card__row .qz-btn { padding: var(--space-4) var(--space-7); font-size: var(--fs-3); }

/* ---------- полноэкранный оверлей (сборщик и плеер) ---------- */
.qz-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--bg, #f4f6f9);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.qz-overlay[hidden] { display: none; }

/* ---------- СБОРЩИК ---------- */
.qz-build { max-width: 860px; width: 100%; margin: 0 auto; padding: 26px var(--space-10) var(--space-15); overflow-y: auto; }
.qz-build__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); margin-bottom: var(--space-9); }
.qz-build__h { margin: 0; font-size: var(--fs-11); font-weight: 800; color: var(--ink, #0A2342); }
.qz-field { display: block; margin: 0 0 var(--space-7); }
.qz-field__label { display: block; font-size: var(--fs-3); font-weight: 700; color: var(--ink-3, #5b6b7d); margin-bottom: var(--space-3); }
.qz-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-5); color: var(--ink, #0A2342);
  border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-3); background: #fff; padding: var(--space-5) var(--space-6);
}
.qz-input:focus { outline: var(--bw-2) solid var(--indigo, #1769C4); outline-offset: 1px; }
.qz-input--num { width: 90px; text-align: center; }
.qz-build__row { display: flex; align-items: flex-end; gap: var(--space-8); flex-wrap: wrap; }
.qz-build__add { display: flex; align-items: flex-end; gap: var(--space-5); flex: 1; min-width: 260px; }
.qz-build__add .qz-field { flex: 1; margin: 0; }

.qz-items { margin: var(--space-9) 0 0; display: flex; flex-direction: column; gap: var(--space-5); }
.qz-item {
  display: flex; align-items: flex-start; gap: var(--space-6);
  border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-4); background: #fff; padding: var(--space-6) var(--space-7);
}
.qz-item__n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(23, 105, 196, .1); color: var(--indigo, #1769C4); font-weight: 800; font-size: var(--fs-3); }
.qz-item__body { flex: 1; min-width: 0; }
.qz-item__stem { font-size: var(--fs-5); color: var(--ink, #0A2342); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qz-item__meta { font-size: var(--fs-2); color: var(--ink-3, #5b6b7d); margin-top: var(--space-2); }
.qz-item__marks { flex: none; display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-3); color: var(--ink-3, #5b6b7d); }
.qz-item__marks input { width: 58px; text-align: center; font: inherit; border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-2); padding: var(--space-3) var(--space-2); }
.qz-item__del { flex: none; border: 0; background: transparent; color: var(--ink-3, #5b6b7d); cursor: pointer; font-size: var(--fs-8); line-height: 1; padding: var(--space-2); border-radius: var(--radius-1); }
.qz-item__del:hover { color: #B3261E; background: rgba(179, 38, 30, .08); }
.qz-build__foot { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-11); }
.qz-build__status { font-size: var(--fs-4); color: var(--ink-3, #5b6b7d); max-width: 66ch; } /* impeccable: line-length */

/* ---------- ПЛЕЕР (Bluebook: минимализм, один вопрос на экране) ---------- */
.qz-player { display: flex; flex-direction: column; height: 100%; background: #fff; }
.qz-top {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-6) var(--space-11); border-bottom: var(--bw-2) dashed var(--card-border, #d5dbe3); background: #fff;
}
.qz-top__title { font-weight: 700; color: var(--ink, #0A2342); font-size: var(--fs-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-top__mid { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.qz-timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: var(--fs-9); color: var(--ink, #0A2342); }
.qz-timer.is-low { color: #B3261E; }
.qz-timer__toggle { border: 0; background: transparent; color: var(--ink-3, #5b6b7d); font-size: var(--fs-2); cursor: pointer; padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill); }
.qz-timer__toggle:hover { background: rgba(23, 105, 196, .08); color: var(--indigo, #1769C4); }
.qz-top__right { display: flex; align-items: center; gap: var(--space-5); }
.qz-exit { border: 0; background: transparent; color: var(--ink-3, #5b6b7d); font-size: var(--fs-3); font-weight: 600; cursor: pointer; padding: var(--space-3) var(--space-5); border-radius: var(--radius-2); }
.qz-exit:hover { background: rgba(179, 38, 30, .08); color: #B3261E; }

.qz-stage { flex: 1; overflow-y: auto; padding: 34px var(--space-11) 120px; }
.qz-qwrap { max-width: 760px; margin: 0 auto; }
.qz-qhead { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-8); }
.qz-qnum { flex: none; background: var(--ink, #0A2342); color: #fff; font-weight: 800; font-size: var(--fs-4); padding: var(--space-3) var(--space-6); border-radius: var(--radius-2); }
.qz-flag {
  display: inline-flex; align-items: center; gap: var(--space-3); border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3, #5b6b7d); font-size: var(--fs-3); font-weight: 600; padding: var(--space-3) var(--space-5); border-radius: var(--radius-2);
}
.qz-flag:hover { background: rgba(23, 105, 196, .08); }
.qz-flag.is-on { color: #B3261E; }
.qz-strike-toggle { margin-left: auto; }
.qz-strike-toggle.is-on { color: var(--indigo, #1769C4); background: rgba(23, 105, 196, .1); }
.qz-ai-tag {
  display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--fs-2); font-weight: 700;
  color: #7a5900; background: #fff7e0; border: var(--bw-1) solid #eedb9a; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-5);
}
.qz-stem { font-size: var(--fs-8); line-height: 1.6; color: var(--ink, #0A2342); margin: 0 0 var(--space-11); white-space: pre-wrap; }

.qz-opts { display: flex; flex-direction: column; gap: var(--space-5); }
.qz-opt {
  position: relative; display: flex; align-items: flex-start; gap: var(--space-6); width: 100%; text-align: left;
  border: var(--bw-hair) solid var(--card-border, #d5dbe3); border-radius: var(--radius-4); background: #fff;
  font: inherit; font-size: var(--fs-6); line-height: 1.5; color: var(--ink, #0A2342);
  padding: var(--space-7) var(--space-8); cursor: pointer;
}
.qz-opt:hover { border-color: var(--indigo, #1769C4); }
.qz-opt__letter {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: var(--bw-hair) solid var(--ink-3, #5b6b7d);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-3); color: var(--ink-3, #5b6b7d);
}
.qz-opt.is-selected { border-color: var(--indigo, #1769C4); background: rgba(23, 105, 196, .06); }
.qz-opt.is-selected .qz-opt__letter { background: var(--indigo, #1769C4); border-color: var(--indigo, #1769C4); color: #fff; }
.qz-opt.is-struck .qz-opt__text { text-decoration: line-through; opacity: .45; }
.qz-opt__strike {
  position: absolute; top: 8px; right: 10px; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3, #5b6b7d); font-size: var(--fs-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-1); display: none;
}
.qz-player.strike-mode .qz-opt__strike { display: block; }
.qz-opt__strike:hover { background: rgba(179, 38, 30, .1); color: #B3261E; }

.qz-textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
.qz-numinput { max-width: 260px; }

.qz-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-6) var(--space-11); border-top: var(--bw-2) dashed var(--card-border, #d5dbe3); background: #fff;
}
.qz-navbtn {
  border: var(--bw-1) solid var(--indigo, #1769C4); background: var(--indigo, #1769C4); color: #fff;
  font: inherit; font-size: var(--fs-4); font-weight: 700; border-radius: var(--radius-pill); padding: var(--space-5) var(--space-11); cursor: pointer;
}
.qz-navbtn:disabled { opacity: .35; cursor: default; }
.qz-counter {
  border: var(--bw-1) solid var(--card-border, #d5dbe3); background: #fff; color: var(--ink, #0A2342);
  font: inherit; font-size: var(--fs-4); font-weight: 700; border-radius: var(--radius-pill); padding: var(--space-5) var(--space-10); cursor: pointer;
}
.qz-counter:hover { border-color: var(--indigo, #1769C4); }

/* навигатор-попап (сетка вопросов) */
.qz-navpop {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
  width: min(430px, calc(100vw - 30px)); max-height: 320px; overflow-y: auto;
  border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-5); background: #fff;
  box-shadow: 0 6px 14px rgba(10, 35, 66, .12); padding: var(--space-7); /* impeccable: узкая тень при hairline-границе */
}
.qz-navpop[hidden] { display: none; }
.qz-navpop__legend { display: flex; gap: var(--space-7); flex-wrap: wrap; font-size: var(--fs-2); color: var(--ink-3, #5b6b7d); margin-bottom: var(--space-5); }
.qz-navpop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: var(--space-4); }
.qz-navcell {
  position: relative; border: var(--bw-hair) dashed var(--ink-3, #5b6b7d); background: #fff; color: var(--ink, #0A2342);
  font: inherit; font-size: var(--fs-4); font-weight: 700; border-radius: var(--radius-2); padding: var(--space-5) 0; cursor: pointer;
}
.qz-navcell.is-answered { border-style: solid; background: var(--indigo, #1769C4); border-color: var(--indigo, #1769C4); color: #fff; }
.qz-navcell.is-current { outline: var(--bw-2) solid var(--ink, #0A2342); outline-offset: 1px; }
.qz-navcell.is-flagged::after { content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #B3261E; }

/* ---------- экран проверки + результат ---------- */
.qz-review { max-width: 760px; margin: 0 auto; }
.qz-review__h { font-size: var(--fs-10); font-weight: 800; color: var(--ink, #0A2342); margin: 0 0 var(--space-3); }
.qz-review__sub { color: var(--ink-3, #5b6b7d); font-size: var(--fs-4); margin: 0 0 var(--space-9); }
.qz-rrow {
  display: flex; align-items: center; gap: var(--space-6); border: var(--bw-1) solid var(--card-border, #d5dbe3);
  border-radius: var(--radius-4); background: #fff; padding: var(--space-6) var(--space-7); margin-bottom: var(--space-4); cursor: pointer;
}
.qz-rrow:hover { border-color: var(--indigo, #1769C4); }
.qz-rrow__status { flex: none; font-size: var(--fs-3); font-weight: 700; padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill); }
.qz-rrow__status.is-answered { color: var(--indigo, #1769C4); background: rgba(23, 105, 196, .1); }
.qz-rrow__status.is-skipped { color: #7a5900; background: #fff7e0; }
.qz-rrow__stem { flex: 1; min-width: 0; font-size: var(--fs-4); color: var(--ink, #0A2342); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-rrow__flag { flex: none; color: #B3261E; font-size: var(--fs-3); }

.qz-result { max-width: 760px; margin: 0 auto; }
.qz-score {
  display: flex; align-items: baseline; gap: var(--space-7); border: var(--bw-1) solid var(--card-border, #d5dbe3);
  border-radius: var(--radius-6); background: #fff; padding: var(--space-10) var(--space-12); margin-bottom: var(--space-10);
}
.qz-score__big { font-size: 42px; font-weight: 800; color: var(--ink, #0A2342); font-variant-numeric: tabular-nums; }
.qz-score__pct { font-size: var(--fs-8); font-weight: 700; color: var(--indigo, #1769C4); }
.qz-score__note { margin-left: auto; font-size: var(--fs-3); color: var(--ink-3, #5b6b7d); text-align: right; }
/* разбивка по темам после квиза (без ИИ — тема уже прикреплена к вопросу) */
.qz-topics { margin: var(--space-9) 0 var(--space-4); }
.qz-topics:empty { display: none; }
.qz-topics__h { font-size: var(--fs-5); font-weight: 800; color: var(--ink, #0A2342); margin: 0 0 var(--space-5); }
.qz-topic {
  border: var(--bw-1) solid var(--card-border, #d5dbe3);
  border-radius: var(--radius-4); background: var(--card-bg, #fff); padding: var(--space-6) var(--space-7); margin-bottom: var(--space-4);
}
.qz-topic__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); }
.qz-topic__name { font-weight: 700; color: var(--ink, #0A2342); font-size: var(--fs-5); }
.qz-topic__focus {
  margin-left: var(--space-4); font-size: var(--fs-1); font-weight: 800; letter-spacing: .02em;
  color: #B3261E; background: #fdeceb; border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); vertical-align: middle;
}
/* цвет полосы несёт результат темы; процент подкрашиваем в тот же банд (без рейла-слопа) */
.qz-topic__score { font-size: var(--fs-4); font-weight: 700; color: var(--ink-3, #5b6b7d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qz-topic--ok .qz-topic__score { color: #147a45; }
.qz-topic--warn .qz-topic__score { color: #9a5b00; }
.qz-topic--bad .qz-topic__score { color: #B3261E; }
.qz-topic__bar { height: 7px; border-radius: var(--radius-pill); background: #eef1f5; overflow: hidden; margin: var(--space-4) 0 var(--space-3); }
.qz-topic__bar span { display: block; height: 100%; border-radius: var(--radius-pill); }
.qz-topic--ok .qz-topic__bar span { background: #1a9e55; }
.qz-topic--warn .qz-topic__bar span { background: #c98a00; }
.qz-topic--bad .qz-topic__bar span { background: #B3261E; }
.qz-topic__meta { font-size: var(--fs-2); color: var(--ink-3, #5b6b7d); }

.qz-res-q { border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-5); background: #fff; padding: var(--space-8) var(--space-9); margin-bottom: var(--space-6); }
.qz-res-q.is-excluded { opacity: .5; }
.qz-res-q__head { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-4); flex-wrap: wrap; }
.qz-res-q__verdict { font-size: var(--fs-3); font-weight: 800; padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill); }
.qz-res-q__verdict.is-correct { color: #116932; background: #e5f6ec; }
.qz-res-q__verdict.is-wrong { color: #B3261E; background: #fdeceb; }
.qz-res-q__verdict.is-partial { color: #7a5900; background: #fff7e0; }
.qz-res-q__verdict.is-pending { color: var(--ink-3, #5b6b7d); background: #eef1f5; }
.qz-res-q__stem { font-size: var(--fs-5); line-height: 1.55; color: var(--ink, #0A2342); margin: 0 0 var(--space-4); }
.qz-res-q__line { font-size: var(--fs-4); color: var(--ink-3, #5b6b7d); margin: var(--space-2) 0; }
.qz-res-q__line b { color: var(--ink, #0A2342); }
.qz-res-q__fb { font-size: var(--fs-4); color: var(--ink, #0A2342); background: #f6f8fb; border-radius: var(--radius-3); padding: var(--space-5) var(--space-6); margin-top: var(--space-4); }
.qz-res-q__tools { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-5); font-size: var(--fs-3); color: var(--ink-3, #5b6b7d); flex-wrap: wrap; }
.qz-res-q__tools input { width: 58px; text-align: center; font: inherit; border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-2); padding: var(--space-3) var(--space-2); }

@media (max-width: 640px) {
  .qz-top { padding: var(--space-5) var(--space-6); }
  .qz-top__title { display: none; }               /* на телефоне — таймер и выход важнее названия */
  .qz-stage { padding: var(--space-11) var(--space-7) 120px; }
  .qz-bottom { padding: var(--space-5) var(--space-6); }
  .qz-build { padding: var(--space-9) var(--space-7) var(--space-15); }
}

/* ============================================================================
   v2 — раздел Quizzes: пустые состояния, карточки с Edit, пикер вопросов
   («как в Telegram»). Appended-блок: побеждает каскад выше.
   ============================================================================ */

/* полка в своём разделе: заголовок раздела уже есть у view — шапка полки проще */
.qz-shelf__head { justify-content: flex-end; }
.qz-shelf__count { margin-right: auto; font-size: var(--fs-4); color: var(--ink-3, #5b6b7d); font-weight: 600; }

/* пустые состояния */
.qz-empty {
  border: var(--bw-1) dashed var(--card-border, #d5dbe3); border-radius: var(--radius-5);
  background: var(--card-bg, #fff); padding: var(--space-11) var(--space-12); max-width: 62ch;
}
.qz-empty__lead { margin: 0 0 var(--space-5); font-size: var(--fs-5); line-height: 1.65; color: var(--ink, #0A2342); }
.qz-empty__steps { margin: 0; padding-left: var(--space-10); font-size: var(--fs-4); line-height: 1.9; color: var(--ink-3, #5b6b7d); }
.qz-empty--inbuilder { margin-top: var(--space-3); }
.qz-empty--inbuilder p { margin: 0; font-size: var(--fs-4); line-height: 1.65; color: var(--ink-3, #5b6b7d); }

/* карточка квиза: тихая иконка удаления в углу, дата в мете */
.qz-card__toprow { display: flex; align-items: flex-start; gap: var(--space-4); }
.qz-card__toprow .qz-card__title { flex: 1; }
.qz-card__del {
  flex: none; border: 0; background: transparent; color: var(--ink-3, #5b6b7d);
  cursor: pointer; padding: var(--space-2); border-radius: var(--radius-2); line-height: 0;
}
.qz-card__del:hover { color: #B3261E; background: rgba(179, 38, 30, .08); }

/* сборщик: ряд «добавить вопросы» */
.qz-build__addrow { display: flex; align-items: center; gap: var(--space-7); flex-wrap: wrap; margin: var(--space-2) 0 var(--space-3); }
.qz-build__hint { font-size: var(--fs-3); color: var(--ink-3, #5b6b7d); }

/* баллы в шапке вопроса плеера */
.qz-qmarks { font-size: var(--fs-3); font-weight: 700; color: var(--ink-3, #5b6b7d); }

/* ---------- пикер вопросов ---------- */
.qz-pick { max-width: 860px; width: 100%; margin: 0 auto; padding: 26px var(--space-10) 110px; overflow-y: auto; }
.qz-pick__sub { margin: 0 0 var(--space-8); font-size: var(--fs-4); color: var(--ink-3, #5b6b7d); max-width: 66ch; }
.qz-pick__list { display: flex; flex-direction: column; gap: var(--space-6); }
.qz-pickset { border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-5); background: #fff; overflow: hidden; }
.qz-pickset__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); width: 100%;
  border: 0; background: transparent; font: inherit; cursor: pointer; padding: var(--space-7) var(--space-8); text-align: left;
}
.qz-pickset__head:hover { background: rgba(23, 105, 196, .04); }
.qz-pickset__title { font-weight: 700; color: var(--ink, #0A2342); font-size: var(--fs-5); }
.qz-pickset__meta { font-size: var(--fs-3); color: var(--indigo, #1769C4); font-weight: 600; flex: none; }
.qz-pickset__body { padding: var(--space-2) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); border-top: var(--bw-1) solid var(--card-border, #d5dbe3); }
.qz-pickall { display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-3); font-weight: 600; color: var(--ink-3, #5b6b7d); padding: var(--space-4) var(--space-2) var(--space-1); cursor: pointer; }

/* карточка вопроса: тап = выделение (галерея/Telegram) */
.qz-pickq {
  display: flex; align-items: flex-start; gap: var(--space-6);
  border: var(--bw-hair) solid var(--card-border, #d5dbe3); border-radius: var(--radius-4); background: #fff;
  padding: var(--space-6) var(--space-7); cursor: pointer; user-select: none;
}
.qz-pickq:hover { border-color: var(--indigo, #1769C4); }
.qz-pickq__check {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: var(--bw-hair) solid var(--ink-3, #5b6b7d); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-3); font-weight: 800;
  margin-top: var(--space-1);
}
.qz-pickq.is-chosen { border-color: var(--indigo, #1769C4); background: rgba(23, 105, 196, .06); }
.qz-pickq.is-chosen .qz-pickq__check { background: var(--indigo, #1769C4); border-color: var(--indigo, #1769C4); }
.qz-pickq.is-already { opacity: .55; cursor: default; }
.qz-pickq.is-already .qz-pickq__check { background: var(--ink-3, #5b6b7d); border-color: var(--ink-3, #5b6b7d); }
.qz-pickq__body { flex: 1; min-width: 0; }
.qz-pickq__stem {
  font-size: var(--fs-5); color: var(--ink, #0A2342); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qz-pickq__meta { display: block; font-size: var(--fs-2); color: var(--ink-3, #5b6b7d); margin-top: var(--space-2); }

/* v3 — карточка вопроса: кружок = выбор (Google Drive), клик по телу = развернуть
   полный вопрос с вариантами (правильный ответ спрятан) */
.qz-pickq__check {
  border: var(--bw-hair) solid var(--ink-3, #5b6b7d); background: #fff; font: inherit; font-size: var(--fs-3);
  font-weight: 800; cursor: pointer; padding: 0; line-height: 0;
}
.qz-pickq__check:hover { border-color: var(--indigo, #1769C4); }
.qz-pickq__check:disabled { cursor: default; }
.qz-pickq.is-already { cursor: pointer; }              /* раскрыть можно, выбрать нельзя */
.qz-pickq__stem.is-full { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* Крупная явная стрелка «раскрыть варианты» — круглая мишень по центру карточки */
.qz-pickq__chev {
  flex: none; align-self: center; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: var(--bw-hair) solid var(--card-border, #d5dbe3);
  color: var(--indigo, #1769C4); font-size: var(--fs-7); line-height: 1;
}
.qz-pickq:hover .qz-pickq__chev { border-color: var(--indigo, #1769C4); background: rgba(23, 105, 196, .07); }
.qz-pickq.is-open .qz-pickq__chev { align-self: flex-start; background: var(--indigo, #1769C4); border-color: var(--indigo, #1769C4); color: #fff; }
.qz-pickq__opts { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.qz-pickq__opt {
  display: flex; align-items: flex-start; gap: var(--space-5);
  font-size: var(--fs-4); line-height: 1.5; color: var(--ink, #0A2342);
  border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-3); padding: var(--space-4) var(--space-6); background: #fff;
}
.qz-pickq__optletter {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: var(--bw-hair) solid var(--ink-3, #5b6b7d);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-2); font-weight: 800; color: var(--ink-3, #5b6b7d);
}
.qz-pickq__opt--note { color: var(--ink-3, #5b6b7d); font-size: var(--fs-3); border-style: dashed; }

/* плавающая панель выбора (как в Telegram при выделении сообщений) */
.qz-pickbar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-8);
  background: var(--ink, #0A2342); color: #fff;
  border-radius: var(--radius-pill); padding: var(--space-5) var(--space-6) var(--space-5) var(--space-11);
  box-shadow: 0 10px 28px rgba(10, 35, 66, .28);
}
.qz-pickbar[hidden] { display: none; }
.qz-pickbar__count { font-size: var(--fs-4); font-weight: 700; }
.qz-pickbar .qz-btn { background: #fff; color: var(--ink, #0A2342); border-color: #fff; }
