/* ============================================================================
   gen.css — стили генерации, живущие ОТДЕЛЬНО от styles.css (его правит
   параллельная сессия). Пока здесь: поповер «Save question» + бейдж Saved.
   Палитра — через CSS-переменные приложения (fallback = дизайн-система).
   ============================================================================ */

/* поповер «сохранить один вопрос» — внизу карточки, не оверлей */
.gen-savepop {
  display: flex; flex-direction: column; gap: var(--space-4);
  border-top: var(--bw-1) dashed var(--card-border, #d5dbe3);
  margin-top: var(--space-6); padding-top: var(--space-6);
}
.gen-savepop__label { font-size: var(--fs-3); font-weight: 700; color: var(--ink-3, #5b6b7d); }
.gen-savepop__flabel { font-size: var(--fs-2); font-weight: 600; color: var(--ink-3, #5b6b7d); margin-top: var(--space-1); }
.gen-savepop__folder { width: 100%; max-width: 380px; box-sizing: border-box; font: inherit; font-size: var(--fs-4); color: var(--ink, #0A2342); border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-3); background: #fff; padding: var(--space-4) var(--space-5); }
.gen-savepop__folder:focus { outline: var(--bw-2) solid var(--indigo, #1769C4); outline-offset: 1px; }
.gen-savepop__sel, .gen-savepop__name {
  width: 100%; max-width: 380px; box-sizing: border-box; font: inherit; font-size: var(--fs-4);
  color: var(--ink, #0A2342); border: var(--bw-1) solid var(--card-border, #d5dbe3);
  border-radius: var(--radius-3); background: #fff; padding: var(--space-4) var(--space-5);
}
.gen-savepop__sel:focus, .gen-savepop__name:focus { outline: var(--bw-2) solid var(--indigo, #1769C4); outline-offset: 1px; }
.gen-savepop__row { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.gen-savepop__msg { font-size: var(--fs-3); color: var(--ink-3, #5b6b7d); max-width: 46ch; }

/* ============================================================================
   Admin — лента ошибок («мини-Sentry»)
   ============================================================================ */
.admin-err__bar { display: flex; align-items: center; gap: var(--space-6); margin: var(--space-2) 0 var(--space-5); }
.admin-err__count { font-size: var(--fs-3); font-weight: 700; color: var(--ink-3, #5b6b7d); }
.admin-err__empty { color: #116932; font-weight: 600; }
.admin-err {
  border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-3);
  background: var(--card-bg, #fff); margin-bottom: var(--space-3); overflow: hidden;
}
.admin-err__row {
  display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-6); cursor: pointer;
  list-style: none; font-size: var(--fs-4);
}
.admin-err__row::-webkit-details-marker { display: none; }
.admin-err__src { flex: none; font-size: var(--fs-1); font-weight: 800; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: .03em; }
.admin-err__src--client { color: #7a5900; background: #fff7e0; }
.admin-err__src--server { color: #B3261E; background: #fdeceb; }
.admin-err__msg { flex: 1; min-width: 0; color: var(--ink, #0A2342); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-err__x { flex: none; font-weight: 800; color: #B3261E; font-size: var(--fs-2); }
.admin-err__meta { flex: none; font-size: var(--fs-2); color: var(--ink-3, #5b6b7d); }
.admin-err__body { padding: var(--space-2) var(--space-6) var(--space-6); border-top: var(--bw-1) solid var(--card-border, #d5dbe3); }
.admin-err__line { font-size: var(--fs-3); color: var(--ink-3, #5b6b7d); margin: var(--space-3) 0; word-break: break-word; }
.admin-err__line b { color: var(--ink, #0A2342); }
.admin-err__stack {
  margin: var(--space-4) 0 0; padding: var(--space-5); border-radius: var(--radius-2); background: #f6f8fb;
  font: 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: #33415c;
  overflow-x: auto; white-space: pre; max-height: 220px;
}
@media (max-width: 640px) { .admin-err__meta { display: none; } }

/* ============================================================================
   Сайдбар: две помеченные группы (Questions / Check) — понятнее, чем плоский список
   ============================================================================ */
.nav__grouplabel {
  margin: var(--space-7) 0 var(--space-2); padding: 0 var(--space-6);
  font-size: var(--fs-1); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3, #5b6b7d);
}
.nav__grouplabel:first-child { margin-top: var(--space-1); }
.nav__group { display: flex; flex-direction: column; gap: var(--space-1); }

/* ============================================================================
   Вариант B — обычная колонка: два блока через тонкую линию, Settings прижат к низу
   ============================================================================ */
/* тонкая линия-разделитель между «вопросами» и «проверкой» (без подписей) */
.nav__sep { height: 1px; background: var(--border); margin: var(--space-5) var(--space-4); }
/* Settings прижат к самому низу сайдбара (margin-top:auto забирает свободное место) */
.nav__item--foot { margin-top: auto; }

/* ============================================================================
   Тарифы (view-pricing): 3 карточки в стиле Revision Village, но бренд Gradely.
   Структура RV (тумблер, тэглайн, крупная цена, чек-лист, выделенный «popular»);
   цвета/шрифты — свои (синий #1769C4, Alumni/Albert, плоские карты, шкала токенов).
   ============================================================================ */
.pricing-head { text-align: center; }
.pricing-head .view__sub { max-width: 62ch; margin-left: auto; margin-right: auto; }

.pricing-toggle {
  display: flex; width: fit-content; margin: var(--space-7) auto var(--space-8);
  gap: var(--space-1); padding: var(--space-1);
  border: var(--bw-1) solid var(--border); border-radius: var(--radius-pill); background: var(--bg-soft);
}
.pricing-toggle__btn {
  font: inherit; font-size: var(--fs-3); font-weight: 600; color: var(--ink-2);
  padding: var(--space-3) var(--space-8); border: 0; background: transparent;
  border-radius: var(--radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-3);
}
.pricing-toggle__btn.is-active { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-1); }
.pricing-toggle__save {
  font-size: var(--fs-1); font-weight: 700; color: var(--band-ok-ink);
  background: var(--band-ok-bg); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3);
}

.pricing-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6);
  max-width: 1000px; margin: 0 auto; align-items: start;
}
.pricing-card {
  position: relative; border: var(--bw-1) solid var(--card-border); border-radius: var(--radius-6);
  background: var(--bg); overflow: hidden;
}
.pricing-card--popular { border: var(--bw-hair) solid var(--indigo); box-shadow: none; }
.pricing-card__ribbon {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-size: var(--fs-1); font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #fff; background: var(--indigo); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4);
}
.pricing-card__eyebrow {
  text-align: center; font-size: var(--fs-2); font-weight: 600; color: var(--ink-3);
  padding: var(--space-8) var(--space-5) 0;
}
/* Lovable-restraint: uniform clean card bodies + more air — no per-tier tint.
   Pro stands out via its indigo hairline + ribbon, not colour noise. */
.pricing-card__body { padding: var(--space-8) var(--space-8) var(--space-9); }
.pricing-card__name { font-family: var(--font-display); font-size: var(--fs-10); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.pricing-card__price { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-4); }
.pricing-card__amount { font-family: var(--font-display); font-size: 2.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); line-height: 1; }
.pricing-card__per { font-size: var(--fs-3); color: var(--ink-2); }
.pricing-card__note { font-size: var(--fs-2); color: var(--ink-3); margin-top: var(--space-3); }
.pricing-card__cta { width: 100%; margin-top: var(--space-6); justify-content: center; }
.pricing-card__rule { border: 0; border-top: var(--bw-1) solid var(--card-border); margin: var(--space-6) 0; }
.pricing-card__lead { font-size: var(--fs-4); color: var(--ink); margin-bottom: var(--space-5); }
.pricing-card__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.pricing-card__feats li { position: relative; padding-left: var(--space-8); font-size: var(--fs-4); color: var(--ink-2); line-height: 1.4; }
.pricing-card__feats li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--indigo); }
.pricing-foot { text-align: center; color: var(--ink-3); font-size: var(--fs-3); margin-top: var(--space-8); }

@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
  /* Pro остаётся на своём месте (2-м, посередине) и на мобиле — по запросу founder. */
  .pricing-card--popular { order: 0; }
}

/* =====================================================================
   PRICING → real LOVABLE look: dark premium panel (2026-07-16). Bold
   re-skin — dark navy canvas + dark hairline cards, restrained Alumni type,
   brand blue as the accent, WCAG-safe. Appended = wins cascade. Borrows
   Lovable's dark palette (founder OK); keeps our blue + Alumni/Albert.
   Checkout untouched (CSS only).
   ===================================================================== */
#view-pricing {
  /* Тёмная палитра — из НАШЕЙ навигационной navy (#0A2342 = --ink) + брендовый синий,
     чтобы читалось «премиальный Gradely», а не абстрактный тёмный SaaS. */
  --pz-bg: #0A2342; --pz-card: #102C56; --pz-card-pop: #16386E;
  --pz-line: rgba(255, 255, 255, .12); --pz-line-2: rgba(255, 255, 255, .20);
  --pz-ink: #F4F7FC; --pz-ink-2: #BFCEE6; --pz-ink-3: #8D9DB8; --pz-accent: #56A8F2;
  background: var(--pz-bg);
  /* Full-bleed: navy занимает ВЕСЬ экран — без скруглений/внешних отступов (не «карточка,
     висящая по центру»). Ширину и паддинги колонки раскрывает .content:has(#view-pricing…). */
  border-radius: 0; margin: 0; min-height: 100vh;
  padding: var(--space-16) var(--space-9);
}
/* Контент поверх navy держим по центру читаемой ширины — карточки НЕ растягиваются во весь экран. */
#view-pricing > * { max-width: 1120px; margin-inline: auto; }
/* Пока открыты тарифы → колонка .content раскрывается во всю ширину и убирает свои паддинги,
   чтобы navy дошёл до краёв области контента. :has() уже применяется в проекте (см. #view-create). */
.content:has(#view-pricing:not([hidden])) { max-width: none; padding: 0; }
#view-pricing .view__title { color: var(--pz-ink); }
#view-pricing .view__sub { color: var(--pz-ink-2); }
#view-pricing .pricing-toggle { background: rgba(255, 255, 255, .05); border-color: var(--pz-line); }
#view-pricing .pricing-toggle__btn { color: var(--pz-ink-2); }
#view-pricing .pricing-toggle__btn.is-active { background: var(--pz-card-pop); color: var(--pz-ink); box-shadow: none; }
#view-pricing .pricing-toggle__save { color: var(--pz-accent); background: rgba(79, 163, 240, .14); }
#view-pricing .pricing-card { background: var(--pz-card); border-color: var(--pz-line); }
#view-pricing .pricing-card--popular { background: var(--pz-card-pop); border: var(--bw-1) solid var(--pz-accent); }
#view-pricing .pricing-card__eyebrow { color: var(--pz-ink-3); }
#view-pricing .pricing-card__ribbon { background: var(--pz-accent); color: #06101E; }
#view-pricing .pricing-card__name,
#view-pricing .pricing-card__amount,
#view-pricing .pricing-card__lead { color: var(--pz-ink); }
#view-pricing .pricing-card__per,
#view-pricing .pricing-card__note { color: var(--pz-ink-3); }
#view-pricing .pricing-card__feats li { color: var(--pz-ink-2); }
#view-pricing .pricing-card__feats li::before { color: var(--pz-accent); }
#view-pricing .pricing-card__rule { border-top-color: var(--pz-line); }
#view-pricing .pricing-card__cta.btn--primary { background: var(--indigo-deep, #1769C4); border-color: var(--indigo-deep, #1769C4); color: #fff; }
#view-pricing .pricing-card__cta.btn--ghost { background: transparent; color: var(--pz-ink); border: var(--bw-1) solid var(--pz-line-2); }
#view-pricing .pricing-foot { color: var(--pz-ink-3); }

/* Баланс кредитов в сайдбаре: «N вопросов или N/2 диагнозов» (кредитная модель) */
.credit-balance {
  margin: var(--space-2) var(--space-3);
  padding: var(--space-5) var(--space-6);
  color: var(--indigo-deep, #1769C4);
  background: var(--blue-tint-bg, #eef4fc);
  border: var(--bw-1) solid rgba(30, 131, 224, .22);
  border-radius: var(--radius-4);
  display: flex; flex-direction: column; gap: var(--space-2); text-align: left;
  transition: border-color .14s ease, background .14s ease;
}
.credit-balance:hover { border-color: var(--indigo); background: rgba(30, 131, 224, .10); }
.credit-balance__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.credit-balance__plan { font-size: var(--fs-3); font-weight: 700; }
.credit-balance__chev { flex: none; opacity: .75; }
.credit-balance__rem { font-size: var(--fs-1); font-weight: 500; opacity: .78; line-height: 1.35; }
.credit-balance[hidden] { display: none; }

/* «auto-detected» — маленькая плашка у предмета в отчёте (ИИ определил предмет сам) */
.report-card__detected {
  display: inline-block; margin-left: var(--space-3);
  font-size: var(--fs-1); font-weight: 700; letter-spacing: .02em;
  color: #7a5900; background: #fff7e0; border: var(--bw-1) solid #eedb9a;
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); vertical-align: middle;
}

/* вспышка после регенерации: видно, ЧТО вопрос заменился (новый похож на старый) */
.gen-q--fresh {
  position: relative;
  outline: var(--bw-2) solid #1a9e55; outline-offset: 2px;
  transition: outline-color .4s ease;
}
.gen-q__freshtag {
  position: absolute; top: -12px; left: 14px;
  font-size: var(--fs-2); font-weight: 800; color: #fff; background: #1a9e55;
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-6);
  box-shadow: 0 3px 8px rgba(17, 105, 50, .3);
}

/* бейдж «вопрос сохранён» на месте кнопки */
.gen-q__savedbadge {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-3); font-weight: 700; color: #116932; background: #e5f6ec;
  border-radius: var(--radius-pill); padding: var(--space-3) var(--space-6);
}

/* ============================================================================
   Saved questions: папки как в Google Drive (панель, сворачивание, move-поповер)
   ============================================================================ */
.saved-actions { display: flex; justify-content: flex-end; margin: 0 0 var(--space-6); }
.saved-group__head { cursor: pointer; user-select: none; }
.saved-group__chev { font-size: var(--fs-2); color: var(--ink-3, #5b6b7d); margin-right: var(--space-1); }
.saved-group.is-collapsed .saved-group__head { opacity: .8; }

/* поповер «Move to…» на карточке набора */
.keycard { position: relative; }
.saved-mvpop {
  position: absolute; right: 10px; top: 44px; z-index: 40;
  display: flex; flex-direction: column; gap: var(--space-4);
  width: min(260px, calc(100% - 20px));
  border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-4); background: #fff;
  box-shadow: 0 6px 14px rgba(10, 35, 66, .12); padding: var(--space-6);
}

/* ============================================================================
   My checks: корзина в строке — призрачная иконка, красная на hover/focus.
   Видна только у live-строк (примеры её не рендерят). Клик по ней не открывает
   отчёт (stopPropagation в app.js). Столбец жмётся под ширину иконки.
   ============================================================================ */
#checks-table .check-del-col { width: 1%; }
#checks-table .check-del-cell { width: 1%; white-space: nowrap; text-align: right; }
#checks-table .check-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-13); height: var(--space-13); padding: 0;
  border: 0; background: transparent; color: var(--ink-3, #58687F);
  border-radius: var(--radius-2); cursor: pointer; opacity: .7;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
#checks-table tr:hover .check-del { opacity: 1; }
#checks-table .check-del:hover,
#checks-table .check-del:focus-visible {
  opacity: 1; color: var(--sem-bad-ink, #B42318);
  background: var(--sem-bad-bg, #FEF1F0); outline: none;
}
#checks-table .check-del:disabled { opacity: .35; cursor: default; }

/* Длинный ID ученика (без пробелов, напр. «#012…789») распирал колонку STUDENT и уводил
   Status/Delete под overflow:hidden карточки → корзину было НЕ ВИДНО. Ограничиваем ширину
   имени и разрешаем перенос, чтобы таблица не вылезала за 100% и Delete всегда был в кадре. */
#checks-table td.name { max-width: 340px; overflow-wrap: anywhere; word-break: break-word; }

/* ============================================================================
   Превью сохранённого вопроса (клик по карточке в «Saved questions») — модалка:
   стем + варианты (правильный подсвечен зелёным) + ответ. Esc/фон/крестик закрывают.
   ============================================================================ */
.savedq-modal-scrim {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 35, 66, .45); padding: var(--space-9);
}
.savedq-modal {
  position: relative; width: min(640px, 100%); max-height: 85vh; overflow-y: auto;
  background: #fff; border: var(--bw-1) solid var(--card-border, #d5dbe3);
  border-radius: var(--radius-5); padding: var(--space-13) var(--space-12) var(--space-12);
  box-shadow: 0 12px 34px rgba(10, 35, 66, .22);
}
.savedq-modal__close {
  position: absolute; top: var(--space-6); right: var(--space-6);
  width: var(--space-13); height: var(--space-13); padding: 0;
  border: 0; background: transparent; color: var(--ink-3, #58687F);
  font-size: var(--fs-6); line-height: 1; cursor: pointer; border-radius: var(--radius-2);
}
.savedq-modal__close:hover { background: var(--blue-tint-bg, #eef4fc); color: var(--ink, #0A2342); }
.savedq-modal__type {
  font-size: var(--fs-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--indigo-deep, #1769C4); margin-bottom: var(--space-5);
}
.savedq-modal__stem { font-size: var(--fs-8); line-height: 1.5; color: var(--ink, #0A2342); }
.savedq-modal__opts { list-style: none; margin: var(--space-9) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.savedq-modal__opt {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); color: var(--ink-2, #44556B);
  border: var(--bw-1) solid var(--card-border, #d5dbe3); border-radius: var(--radius-3);
}
.savedq-modal__opt.is-correct { border-color: #1a9e55; background: #e8f7ee; color: var(--ink, #0A2342); font-weight: 600; }
.savedq-modal__letter { font-weight: 700; color: var(--ink-3, #58687F); }
.savedq-modal__opt.is-correct .savedq-modal__letter { color: #116932; }
.savedq-modal__tick { color: #1a9e55; font-weight: 700; }
.savedq-modal__ans {
  margin-top: var(--space-9); padding-top: var(--space-7);
  border-top: var(--bw-1) solid var(--border, #e6ebf1);
  font-size: var(--fs-5); color: var(--ink-2, #44556B);
}