/* =======================================================================
   TalentMap — «лицо» отчётов

   Два независимых слоя:
   1. data-face — своя айдентика у каждого теста (палитра, фон шапки, форма).
      Ставится автоматически по типу отчёта, пользователь его не выбирает.
   2. data-skin — стиль подачи, который человек переключает сам:
      soft (по умолчанию) / journal (текстовый, как статья) / bold (крупный, контрастный).

   Всё держится на токенах темы, поэтому работает и в светлой, и в тёмной.
   ======================================================================= */

/* ---------- 1. ЛИЦО ТЕСТА ---------- */
#report{ --face:var(--acc); --face-soft:var(--acc-soft); }

#report[data-face="talents"]{ --face:#6d5bf0; --face-soft:rgba(109,91,240,.14); }
#report[data-face="love"]   { --face:#f0568f; --face-soft:rgba(240,86,143,.13); }
#report[data-face="work"]   { --face:#2f8fe0; --face-soft:rgba(47,143,224,.13); }
#report[data-face="kids"]   { --face:#e879a6; --face-soft:rgba(232,121,166,.13); }
#report[data-face="pair"]   { --face:#8b5cf6; --face-soft:rgba(139,92,246,.13); }
#report[data-face="money"]  { --face:#c98a1e; --face-soft:rgba(224,163,58,.14); }
#report[data-face="burn"]   { --face:#2fb37a; --face-soft:rgba(47,179,122,.13); }

/* шапка отчёта: у каждого теста свой рисунок фона, не просто другой цвет */
#report .rep-hero{ position:relative; overflow:hidden; }
#report .rep-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
}
/* таланты — концентрические кольца, «радар» */
#report[data-face="talents"] .rep-hero::before{
  background:repeating-radial-gradient(circle at 50% -10%, transparent 0 34px, var(--ring) 34px 35px);
}
/* отношения — мягкие пересекающиеся круги, «двое» */
#report[data-face="love"] .rep-hero::before{
  /* были два крупных круга — читались как пятна за текстом.
     Оставляем тонкие контуры «двоих», а не заливку. */
  background:
    radial-gradient(circle at 36% 46%, transparent 0 96px, var(--face-soft) 96px 98px, transparent 99px),
    radial-gradient(circle at 64% 46%, transparent 0 96px, var(--face-soft) 96px 98px, transparent 99px);
}
/* работа — строгая сетка */
#report[data-face="work"] .rep-hero::before{
  background:
    linear-gradient(var(--ring) 1px, transparent 1px) 0 0/100% 26px,
    linear-gradient(90deg, var(--ring) 1px, transparent 1px) 0 0/26px 100%;
}
/* пара — диагональные линии, «переплетение» */
#report[data-face="pair"] .rep-hero::before{
  background:repeating-linear-gradient(58deg, var(--ring) 0 1px, transparent 1px 15px);
}
/* ресурс — волны, «дыхание» */
#report[data-face="burn"] .rep-hero::before{
  background:repeating-linear-gradient(180deg, transparent 0 22px, var(--ring) 22px 23px);
}
/* деньги — ряды монет-кругов */
#report[data-face="money"] .rep-hero::before{
  background:radial-gradient(circle, var(--face-soft) 0 7px, transparent 8px) 0 0/34px 34px;
}
#report[data-face="kids"] .rep-hero::before{
  background:radial-gradient(var(--face-soft) 2.5px, transparent 3px) 0 0/22px 22px;
}
#report .rep-hero > *{ position:relative; }

/* акцентная полоса секции — красится лицом теста */
#report .card[style*="border-left"]{ border-left-color:var(--face) !important; }

/* ---------- 2. СКИН ПОДАЧИ ---------- */

/* soft — текущий вид: мягкие карточки. Задан по умолчанию, правил не требует. */

/* journal — как длинная статья: без карточек, крупная типографика, линии-разделители */
#report[data-skin="journal"] .card{
  background:transparent !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; border-top:1px solid var(--border) !important;
  padding:26px 0 6px !important; margin-bottom:6px !important;
}
#report[data-skin="journal"] .card[style*="border-left"]{ border-left:none !important; }
#report[data-skin="journal"] h2{
  font-size:1.45rem !important; letter-spacing:-.02em; margin-bottom:.35rem !important;
}
#report[data-skin="journal"] p{ font-size:15.5px !important; line-height:1.72 !important; }
#report[data-skin="journal"] .rep-hero{
  border:none !important; background:transparent !important; padding-bottom:8px !important;
}
#report[data-skin="journal"] .rep-hero::before{ display:none; }
/* вложенные плашки внутри секций оставляем — иначе теряется смысловая разметка,
   но делаем их тише: только левая линия вместо заливки */
#report[data-skin="journal"] .card > div[style*="background:rgba"],
#report[data-skin="journal"] .card > div[style*="background:var(--surface2)"]{
  background:transparent !important; border:none !important;
  border-left:2px solid var(--border-strong) !important;
  border-radius:0 !important; padding-left:14px !important;
}

/* bold — крупно и контрастно: толстые рамки, большие заголовки, плотный ритм */
#report[data-skin="bold"] .card{
  border:2px solid var(--border-strong) !important;
  border-radius:18px !important;
  box-shadow:none !important;
}
#report[data-skin="bold"] .card[style*="border-left"]{
  border-left:8px solid var(--face) !important;
}
#report[data-skin="bold"] h1{ letter-spacing:-.03em; }
#report[data-skin="bold"] h2{
  font-size:1.35rem !important; text-transform:uppercase; letter-spacing:.02em;
}
#report[data-skin="bold"] .rep-hero{
  border:2px solid var(--face) !important;
}

/* ---------- 3. ШИРИНА И ЧИТАЕМОСТЬ ----------
   Контейнер отчёта широкий, но строка текста — нет: 90+ символов в строке
   читаются заметно хуже. Поэтому ограничиваем сам текст, а не карточку. */
@media (min-width:1000px){
  #report p,
  #report li,
  #report h2 + p{ max-width:78ch; }

  /* блоки-плитки на широком экране идут парами — иначе половина ширины пустует */
  #report .rep-cols{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start;
  }
  /* таблицы и графика используют всю ширину карточки */
  #report table, #report svg, #report canvas{ max-width:100%; }
}
@media (min-width:1300px){
  #report p, #report li{ max-width:82ch; }
}

/* Липкая панель отчёта на телефоне: вместо переноса на два ряда (съедал пол-экрана)
   одна строка с горизонтальной прокруткой внутри самой панели. */
@media (max-width:640px){
  #app > .fade > div > div[style*="position:sticky"]{
    flex-wrap:nowrap !important;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:6px !important;
  }
  #app > .fade > div > div[style*="position:sticky"]::-webkit-scrollbar{ display:none; }
  #app > .fade > div > div[style*="position:sticky"] > button,
  #app > .fade > div > div[style*="position:sticky"] > .skin-switch{ flex:0 0 auto; }
  /* распорка, которая на десктопе отжимает кнопки вправо, в прокрутке не нужна */
  #app > .fade > div > div[style*="position:sticky"] > div[style*="flex:1"]{ display:none; }
}

/* на телефоне карточки уже, отступы меньше — иначе текста в строке остаётся мало */
@media (max-width:640px){
  #report .card{ padding:16px 14px !important; border-radius:18px !important; }
  #report h2{ font-size:1.12rem !important; line-height:1.3; }
  #report .skin-switch button{ padding:6px 9px; font-size:11px; }
}

/* ---------- переключатель скинов ---------- */
.skin-switch{ display:inline-flex; gap:2px; padding:3px; border-radius:12px;
  background:var(--surface2); border:1px solid var(--border); }
.skin-switch button{
  padding:6px 12px; border-radius:9px; font-size:12px; font-weight:700;
  color:var(--muted); background:transparent; border:none; cursor:pointer;
  transition:background .15s, color .15s;
}
.skin-switch button:hover{ color:var(--text); }
.skin-switch button[aria-pressed="true"]{ background:var(--acc); color:var(--on-acc); }

@media print{ .skin-switch{ display:none; } }

/* ---------- меню копирования ---------- */
.copy-menu{ position:relative; display:inline-flex; align-items:stretch; flex:0 0 auto; }
.copy-menu .copy-main,
.copy-menu .copy-toggle{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  font-weight:600; font-size:14px; cursor:pointer; padding:8px 14px;
  transition:border-color .15s, background .15s;
}
.copy-menu .copy-main{ border-radius:12px 0 0 12px; border-right:none; white-space:nowrap; }
.copy-menu .copy-toggle{ border-radius:0 12px 12px 0; padding:8px 10px; }
.copy-menu .copy-main:hover,
.copy-menu .copy-toggle:hover{ border-color:var(--acc); }
.copy-drop{
  position:fixed; z-index:210; min-width:250px;
  display:flex; flex-direction:column; gap:2px; padding:6px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow-md);
}
.copy-drop[hidden]{ display:none; }
.copy-drop button{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  text-align:left; padding:9px 12px; border-radius:10px; border:none;
  background:transparent; color:var(--text); font-weight:600; font-size:13.5px; cursor:pointer;
  white-space:nowrap;
}
.copy-drop button:hover{ background:var(--surface2); }
.copy-drop .cm-hint{ font-weight:600; font-size:11px; color:var(--muted); white-space:nowrap; }
.copy-drop .cm-cap{
  padding:8px 12px 3px; font-size:10.5px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}
.copy-drop .cm-cap:not(:first-child){ margin-top:4px; border-top:1px solid var(--border); padding-top:10px; }
@media (max-width:640px){
  .copy-menu .copy-main{ padding:8px 10px; font-size:13px; }
}
/* на телефоне список выезжает шторкой снизу: крупные строки под палец */
.cm-backdrop{ position:fixed; inset:0; z-index:209; background:rgba(8,8,14,.5); }
.copy-drop.as-sheet{
  left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom,0px)); top:auto;
  border-radius:22px; padding:8px; max-height:82vh; overflow-y:auto;
  animation:cmUp .2s ease-out;
}
.copy-drop.as-sheet button{ padding:14px 14px; font-size:15.5px; border-radius:14px; }
.copy-drop.as-sheet .cm-hint{ font-size:12px; }
.copy-drop.as-sheet .cm-cap{ padding-left:14px; font-size:11px; }
@keyframes cmUp{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }

/* ---------- окно «Готовлю PDF» / «PDF готов» ---------- */
.tm-sheet{
  position:fixed; inset:0; z-index:220; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(8,8,14,.55);
}
.tm-sheet-box{
  width:100%; max-width:380px; padding:26px 22px 18px; text-align:center;
  background:var(--surface); border:1px solid var(--border); border-radius:24px;
  animation:cmUp .2s ease-out;
}
.tm-sheet-ico{ font-size:40px; line-height:1; margin-bottom:10px; }
.tm-sheet-title{ font-size:19px; font-weight:800; color:var(--text); }
.tm-sheet-sub{ font-size:13.5px; color:var(--muted); margin:6px 0 18px; line-height:1.45; }
.tm-sheet-btn{
  display:block; width:100%; margin-top:8px; padding:14px 16px; border-radius:14px;
  font-size:15px; font-weight:700; cursor:pointer;
  background:var(--surface2); border:1px solid var(--border); color:var(--text);
}
.tm-sheet-btn.primary{ background:var(--acc); border-color:transparent; color:var(--on-acc); }
.tm-sheet-btn.ghost{ background:transparent; border-color:transparent; color:var(--muted); font-weight:600; }
.tm-sheet-spin{
  width:38px; height:38px; margin:4px auto 16px; border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--acc); animation:tmSpin .8s linear infinite;
}
@keyframes tmSpin{ to{ transform:rotate(360deg); } }
@media (max-width:640px){
  .tm-sheet{ align-items:flex-end; padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)); }
  .tm-sheet-box{ max-width:none; }
}

/* ================= визуальная доводка ================= */

/* иконка-плитка в заголовке секции: эмодзи в тексте терялся,
   в плитке он держит ритм и отделяет разделы друг от друга */
#report h2.has-ico, #report h1.has-ico{
  display:flex; align-items:center; gap:10px;
}
#report h3.has-ico{ display:flex; align-items:center; gap:8px; }
.sec-ico{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px; font-size:19px; line-height:1;
  background:var(--face-soft, var(--surface2));
  border:1px solid var(--border);
}
#report h3 .sec-ico{ width:28px; height:28px; border-radius:9px; font-size:15px; }
@media (max-width:640px){
  .sec-ico{ width:32px; height:32px; border-radius:10px; font-size:16px; }
}

/* оглавление */
.rep-toc{
  border:1px solid var(--border); background:var(--surface);
  border-radius:20px; padding:14px 16px; margin-bottom:20px;
}
.rep-toc-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:1px; color:var(--muted);
}
.rep-toc-toggle{
  background:transparent; border:none; cursor:pointer; padding:4px 8px;
  border-radius:8px; font-weight:700; font-size:12px; color:var(--acc-text,var(--acc));
}
.rep-toc-toggle:hover{ background:var(--surface2); }
.rep-toc-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:4px; margin-top:10px; overflow:hidden;
  /* высота кратна ряду (36px + 4px зазор), иначе третий ряд обрезался посередине */
  max-height:80px;
  transition:max-height .25s ease;
  position:relative;
}
.rep-toc:not(.open) .rep-toc-list::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:26px;
  background:linear-gradient(transparent, var(--surface));
  pointer-events:none;
}
.rep-toc-list a{ min-height:36px; }
.rep-toc.open .rep-toc-list{ max-height:1200px; }
.rep-toc-list a{
  display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:10px;
  font-size:13px; font-weight:600; color:var(--text-soft,var(--text));
  text-decoration:none; transition:background .15s;
}
.rep-toc-list a:hover{ background:var(--surface2); }
.rep-toc-list .t-ico{ flex:0 0 auto; width:20px; text-align:center; font-size:14px; }
@media (max-width:640px){
  .rep-toc-list{ grid-template-columns:1fr; max-height:80px; }
}

/* секции получают чуть больше воздуха между собой */
#report > .card, #report > div > .card{ scroll-margin-top:74px; }

/* крупные числовые метрики выравниваются по базовой линии */
#report .metric-row{ display:flex; align-items:baseline; gap:8px; }

/* в «Статье» плитки не нужны — там ритм держат линии-разделители */
#report[data-skin="journal"] .sec-ico{
  width:auto; height:auto; background:transparent; border:none; font-size:20px;
}
#report[data-skin="journal"] .rep-toc{ border-radius:0; border-left:none; border-right:none; border-top:none; }
#report[data-skin="bold"] .sec-ico{ border-width:2px; border-color:var(--face); }


/* ================= панель действий отчёта ================= */
/* Была собрана из разнородных инлайновых кнопок: разная высота, разные
   скругления, «Копировать» со сползающей стрелкой. Приводим к одной сетке. */
.rpt-bar{
  position:sticky; top:0; z-index:50;
  flex-wrap:nowrap;
  display:flex; align-items:center; gap:8px;
  padding:10px 0; margin-bottom:18px;
  background:var(--bg); border-bottom:1px solid var(--border);
}
.rpt-bar > div[style*="flex:1"]{ flex:1 1 auto; }
.rpt-bar button,
.rpt-bar .copy-menu{ height:38px; }
/* кнопки внутри .copy-menu стилизуются отдельно: общий border-radius
   разрывал слитную пару «Копировать | ▾» на две отдельные кнопки */
.rpt-bar > button{
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  height:38px !important; padding:0 14px !important; border-radius:11px !important;
  font-weight:600 !important; font-size:13.5px !important; line-height:1 !important;
  background:var(--surface) !important; border:1px solid var(--border) !important;
  color:var(--text) !important; cursor:pointer; white-space:nowrap;
  transition:border-color .15s, background .15s, transform .12s;
}
.rpt-bar button:hover{ border-color:var(--acc); }
.rpt-bar button:active{ transform:translateY(1px); }
/* последняя кнопка панели (PDF) — акцентная */
.rpt-bar > button:last-child{
  background:var(--acc) !important; border-color:transparent !important;
  color:var(--on-acc) !important; font-weight:700 !important;
}
.rpt-bar > button:last-child:hover{ filter:brightness(1.07); }
.rpt-bar .skin-switch{ height:38px; align-items:center; padding:0 3px; }
.rpt-bar .skin-switch button{ height:30px; padding:0 11px; border:none; background:transparent; }
.rpt-bar .skin-switch button[aria-pressed="true"]{ background:var(--acc); color:var(--on-acc); }
.rpt-bar .copy-menu .copy-main,
.rpt-bar .copy-menu .copy-toggle{
  height:38px; display:inline-flex; align-items:center; padding:0 13px;
  font-size:13.5px; font-weight:600;
}
.rpt-bar .copy-menu .copy-toggle{ padding:0 9px; }

@media (max-width:860px){
  .rpt-bar{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:6px; }
  #report-bar::-webkit-scrollbar{ display:none; }
  .rpt-bar > div[style*="flex:1"]{ display:none; }
  .rpt-bar > *{ flex:0 0 auto; }
  .rpt-bar button{ padding:0 11px; font-size:13px; }
  /* на телефоне подписи скинов короче — иначе панель уезжает далеко вправо */
  .rpt-bar .skin-switch button{ padding:0 9px; font-size:11.5px; }
}

/* слитная пара кнопок копирования */
.rpt-bar .copy-menu{ display:inline-flex; align-items:stretch; }
.rpt-bar .copy-menu .copy-main{
  height:38px !important; padding:0 13px !important;
  border-radius:11px 0 0 11px !important; border-right:none !important;
  font-size:13.5px !important; font-weight:600 !important;
}
.rpt-bar .copy-menu .copy-toggle{
  height:38px !important; padding:0 10px !important;
  border-radius:0 11px 11px 0 !important;
  font-size:13.5px !important;
}

/* На телефоне панель прокручивается, и переключатель стилей вытеснял
   «Копировать» и «PDF» за экран. Главные действия — первыми. */
@media (max-width:640px){
  .rpt-bar > button:first-child{ order:1; }
  .rpt-bar .copy-menu{ order:2; }
  .rpt-bar > button:last-child{ order:3; }
  .rpt-bar .skin-switch{ order:4; }
  .rpt-bar .copy-menu .copy-main{ padding:0 10px !important; font-size:12.5px !important; }
}


/* ================= шапка отчёта ================= */
/* Элементы стояли по центру, но с разными отступами: эмодзи терялся,
   между именем, заголовком и плашками ритм скакал. Собираем в колонку
   с одним шагом и делаем иконку главным акцентом. */
#report .rep-hero{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:34px 24px 30px !important;
}
#report .rep-hero > *{ margin:0 !important; }
#report .rep-hero::before{ opacity:.4; }   /* фон-паттерн был слишком заметным */

/* крупная иконка типа в плитке */
#report .rep-hero .hero-ico{
  display:flex; align-items:center; justify-content:center;
  width:92px; height:92px; border-radius:28px; font-size:44px; line-height:1;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.5);
}
#report .rep-hero h1{ line-height:1.12; }
#report .rep-hero .hero-sub{ color:var(--muted); font-size:15px; }
#report .rep-hero .hero-chips{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
@media (max-width:640px){
  #report .rep-hero{ padding:26px 16px 24px !important; gap:10px; }
  #report .rep-hero .hero-ico{ width:74px; height:74px; border-radius:22px; font-size:36px; }
}

/* ================= продающий блок карты талантов ================= */
.offer-card{ border:1px solid var(--border); }
.offer-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px;
  background:var(--acc-soft); color:var(--acc-text,var(--acc));
  font-size:12px; font-weight:800; letter-spacing:.3px;
}
.offer-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px;
}
.offer-item{
  display:flex; align-items:flex-start; gap:11px;
  padding:12px 13px; border-radius:15px;
  background:var(--surface2); border:1px solid var(--border);
}
.offer-ico{
  flex:0 0 auto; width:36px; height:36px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:var(--surface); border:1px solid var(--border);
}
.offer-price-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 20px; border-radius:20px;
  background:var(--acc-soft); border:1px solid var(--acc);
}
.offer-price{ font-size:34px; font-weight:900; line-height:1; color:var(--acc-text,var(--acc)); }
.offer-price span{ font-size:18px; font-weight:700; }
.offer-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.offer-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 24px; border-radius:14px;
  font-weight:800; font-size:15px; text-decoration:none; cursor:pointer; border:none;
  transition:transform .12s, filter .15s;
}
.offer-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.offer-btn-wa{ background:#25d366; color:#0b2a16; }
.offer-btn-tg{ background:#2aabee; color:#04263a; }
.offer-steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin-top:16px;
}
.offer-step{
  display:flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; color:var(--text-soft,var(--text));
  padding:11px 13px; border-radius:13px; background:var(--surface2);
}
.offer-step span{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--acc); color:var(--on-acc); font-size:12px; font-weight:800;
}
.offer-demo{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  margin-top:14px; padding:14px 16px; border-radius:16px;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  font-size:14px; cursor:pointer; transition:border-color .15s;
}
.offer-demo:hover{ border-color:var(--acc); }
.offer-lock{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:20px; margin-bottom:16px;
  background:var(--warn-soft); border:1px solid var(--warn);
}
.offer-lock-ico{
  flex:0 0 auto; width:46px; height:46px; border-radius:14px; font-size:22px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
}
.offer-for{
  display:flex; align-items:flex-start; gap:11px; text-align:left;
  padding:13px 15px; border-radius:15px; margin-bottom:8px;
  background:var(--surface); border:1px solid var(--border);
}
.offer-for > span{ font-size:20px; }
@media (max-width:640px){
  .offer-price-row{ flex-direction:column; align-items:stretch; text-align:center; }
  .offer-actions{ flex-direction:column; }
  .offer-btn{ width:100%; }
  .offer-price{ font-size:30px; }
}

/* статус платного теста в карточке кабинета */
.tc-status.locked{
  background:var(--warn-soft); color:var(--warn);
  font-weight:800; padding:3px 10px; border-radius:999px;
}

/* состав платного пакета в оффере */
.offer-pack{
  display:inline-block; margin-bottom:10px; padding:6px 14px; border-radius:999px;
  background:var(--ok-soft); color:var(--ok); font-size:12.5px; font-weight:700;
}