/* ==========================================================================
   Seohand v2. Основа редизайна (29.09.2026). Концепт: design/redizain/gpt1/concept_4.png,
   экраны gpt2/sNN_*.png. Цвета сняты пипеткой с концепта (_pr/rd/pipetka*.py).

   КАК ПОДКЛЮЧИТЬ В ШАБЛОНЕ templates_v2/*.html
     {% extends "base.html" %} (или "app.html" для кабинета)
     {% set v2 = true %}                       страница сверстана в v2: грузится только core.css,
                                                у body класс v2, базовые стили тегов включены
     {% block stili %}<link rel="stylesheet" href="/static/v2/site.css?v={{ asset_v2 }}">{% endblock %}
     Макросы значков, меток и пометок: {% import "_v2.html" as v %} (см. templates_v2/_v2.html)
     Без v2 = true старый шаблон рисуется в новой шапке/оболочке со старым style.css.

   СЛОВАРЬ КЛАССОВ (коротко)
   Токены      --fon --fon-bel --fon-tepl --fon-sir --temn --tekst --tekst-2 --tiho --liniya
               --fiolet --koral --laym --zel --ssylka --rukopis, отступы --o1..--o9, радиусы --r1..--r4
   Сетка       .ramka (контейнер 1200) .ramka--uzk (720) .polosa (секция, отступы сверху/снизу)
               .polosa--bel/--tepl/--sir/--temn (фон полосы) .polosa--tesno (меньше воздуха)
               .setka.setka--2/3/4/5 (колонки, на телефоне в одну) .ryad (строка flex, перенос)
               .stopka (колонка с зазором) .sek-shapka (шапка секции: h2 + .lid + пометка справа)
   Текст       .zag-1 .zag-2 .zag-3 .zag-4 .lid (подзаголовок) .t-tiho .t-mal .t-xs .t-zhir .t-centr
               .akcent (фиолетовое слово в заголовке) .chislo (большая цифра) .chislo--mal
   Кнопки      .knopka + --glav (коралловая) --fiolet --temn --kontur (обводка) --koral-kontur
               --laym --tiho (текстовая) --mal --bol --shir (во всю ширину); значок: <svg class="kn-str">
   Поля        .pole (input/select/textarea) .pole-podpis (label) .pole-podskazka .pole--oshibka
               .pole-adres (белая плашка: .pole-adres__ikon + input + .knopka внутри), .poisk-pole
   Карточки    .kartochka (+ --ten, --kontur, --akcent зеленая рамка, --sir, --tesno, --ssylka)
               .ikonka-krug (+ --zel --fiolet --sin --koral --laym --oranzh --temn) круглый значок 48
   Метки       .chinit + --prog --kopi --serv --kont  (кто чинит: программист, копирайтер,
               сервис, контент-менеджер) ; .vazhn + --1 --2 --3 (первое, важное, потом)
               .status + --ok --rabota --idet --oshibka --chernovik --nejtr (точка + текст)
               .plashka (светлая метка-пилюля) + --zel --fiolet --laym --koral; .schetchik (число в кружке)
   Таблицы     .tablica-obertka (прокрутка вбок) > table.tablica (+ --tesno, --polosy)
               td.tablica__akcent (зеленая колонка), .tablica__galka, .tablica__net
   Вкладки     .vkladki-v2 > a | button, текущая: .on или aria-current / aria-selected="true"
   Раскрывашки details.raskr > summary + .raskr__telo ; .raskr-spisok (стопка) .voprosy (2 колонки FAQ)
   Списки      ul.spisok-galok (+ --zel квадраты, --laym круги, --fiolet), ol.shagi > li.shag (.shag__nomer)
   Пометки     .pometka (рукописный текст Caveat + svg-стрелка .pometka__str) + --vlevo/--vpravo/--vniz
               .stiker (лаймовый листок с рукописным текстом, наклон) .luchi (три фиолетовых штриха)
   Плашки      .strip-v2 (+ --ok --beda --info) полоса-сообщение; .pusto-v2 (пустое состояние)
   Товарное    .tarif (+ --pop) карточка цены; .tarif__cena; .prizyv (темная полоса с полем, финал)
               .ustr (темное окно-планшет с экраном продукта) ; .stat-plitka (плитка числа кабинета)
               .istochnik (карточка с круглым значком по центру) ; .ill (картинка-иллюстрация)
   Шапка       .shapka .shapka__in .logo .shapka__nav .shapka__dop .menu-mob (details) .mm (меню)
               .top-instr-v2 (строка популярных инструментов)
   Подвал      .podval .podval__in .podval__kol .podval__rekv .foot-map-v2
   Наблюдение  .dn-panel .dn-region (панель наблюдения домена, templates_v2/_domen.html)
   Кабинет     .kab (сетка) .kab-bok (левое меню, s13 светлое; .kab--temn темное как s14)
               .kab-punkt (+ .on) .kab-gruppa .kab-podpis .kab-dd (инструменты панелью) .kab-niz-bok
               .kab-rabota .kab-verh (крошки + справа тема и почта) .kab-kroshki .kab-telo .kab-niz
               .kab-zagolovok (h1 + lid + действия справа) .kab-pomosch (карточка помощи внизу меню)
   Служебное   .sr (только для чтения с экрана) .skryt-mob .tolko-mob .no-print .tolko-pechat
   Тема        [data-theme="dark"] на <html> переключает токены (localStorage shtat-theme)
   ========================================================================== */

@font-face {
  font-family: "Onest";
  src: url("/static/v2/fonts/onest-v2.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/static/v2/fonts/caveat-v2.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- токены */
:root {
  --fon: #fdfaf4;          /* кремовый фон первого экрана, concept_4 */
  --fon-bel: #ffffff;
  --fon-tepl: #fdf8f1;     /* теплая полоса секции */
  --fon-sir: #f7f5fe;      /* сиреневая полоса, s01 */
  --fon-rab: #fcfbf9;      /* рабочая область кабинета, s13 */
  --temn: #2a2d60;         /* темная полоса призыва и планшет */
  --temn-2: #232752;
  --tekst: #141852;        /* заголовки и основной текст */
  --tekst-2: #3a3f66;
  --tiho: #6b6f89;         /* второстепенный текст, AA на белом и кремовом */
  --tiho-2: #a3a6bd;       /* только для линий и значков, не для текста */
  --liniya: #ecebf3;
  --liniya-2: #dedcea;
  --karta: #ffffff;
  --tablica-shapka: #f5f7fc;

  --fiolet: #664cf3;
  --fiolet-2: #8869f9;
  --fiolet-fon: #efeafe;
  --fiolet-fon-2: #e2dafd;
  --koral: #f95f5e;        /* кнопка действия; белый текст крупный (от 18.7px жирным) */
  --koral-hover: #ec4d4c;
  --koral-tekst: #d63939;  /* коралловый текст и обводка, AA */
  --koral-fon: #ffe9e8;
  --laym: #a1f024;
  --laym-2: #b8f73c;
  --laym-fon: #effdd3;
  --laym-akt: #eafdd4;     /* активный пункт меню кабинета, s13 */
  --laym-stiker: #ddfc8e;
  --zel: #07ac71;
  --zel-tekst: #0b7a52;
  --zel-fon: #e2fded;
  --sin: #4d68f8;
  --oranzh-fon: #fef3e4;
  --oranzh: #f19035;
  --ssylka: #1a6fbf;
  --rukopis: #5a55d6;

  /* кто чинит */
  --prog-fon: #caf8f1;  --prog-t: #1a6f62;
  --kopi-fon: #eee5fe;  --kopi-t: #6243d6;
  --serv-fon: #dfe1fe;  --serv-t: #4346d6;
  --kont-fon: #e0ecfe;  --kont-t: #2f5fc4;
  /* важность */
  --v1-fon: #feebee;  --v1-t: #c7303b;
  --v2-fon: #fef0de;  --v2-t: #9c510c;
  --v3-fon: #e8f9e2;  --v3-t: #2e7d32;

  --shrift: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --shrift-ruka: "Caveat", "Segoe Print", "Comic Sans MS", cursive;

  --o1: 4px; --o2: 8px; --o3: 12px; --o4: 16px; --o5: 24px; --o6: 32px; --o7: 48px; --o8: 64px; --o9: 96px;
  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 24px; --r-krug: 999px;
  --shir: 1200px;
  --shir-chtenie: 720px;
  --pole-bok: 24px;
  --ten-1: 0 1px 2px rgba(20, 24, 82, .04), 0 6px 18px rgba(20, 24, 82, .05);
  --ten-2: 0 2px 4px rgba(20, 24, 82, .04), 0 16px 40px rgba(20, 24, 82, .09);
  --ten-koral: 0 8px 20px rgba(249, 95, 94, .28);
  --ten-fiolet: 0 8px 20px rgba(102, 76, 243, .25);
}

[data-theme="dark"] {
  --fon: #0e1030;
  --fon-bel: #13163a;
  --fon-tepl: #121538;
  --fon-sir: #161943;
  --fon-rab: #0e1030;
  --temn: #1b1e4d;
  --temn-2: #15183f;
  --tekst: #eef0ff;
  --tekst-2: #c9cbea;
  --tiho: #a3a7cc;
  --tiho-2: #5b6096;
  --liniya: #272b5a;
  --liniya-2: #343870;
  --karta: #171a42;
  --tablica-shapka: #1c2050;
  --fiolet: #9a88ff;
  --fiolet-2: #ad9dff;
  --fiolet-fon: #28235f;
  --fiolet-fon-2: #332c78;
  --koral: #f95f5e;
  --koral-hover: #ff7270;
  --koral-tekst: #ff8a88;
  --koral-fon: #3d1a2a;
  --laym: #b6f24a;
  --laym-2: #c4f760;
  --laym-fon: #223318;
  --laym-akt: #2a3d1a;
  --laym-stiker: #d6f77f;
  --zel: #2fcf8f;
  --zel-tekst: #6be3b0;
  --zel-fon: #12372b;
  --oranzh-fon: #3a2a14;
  --ssylka: #8cb8ff;
  --rukopis: #b3aefc;
  --prog-fon: #103a36;  --prog-t: #7fe3d2;
  --kopi-fon: #2e2566;  --kopi-t: #c9b8ff;
  --serv-fon: #242a6b;  --serv-t: #b3b8ff;
  --kont-fon: #1a2e5a;  --kont-t: #9cc0ff;
  --v1-fon: #4a1c26;  --v1-t: #ff9ba5;
  --v2-fon: #43300f;  --v2-t: #ffc27a;
  --v3-fon: #1d3a1f;  --v3-t: #8fe39a;
  --ten-1: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  --ten-2: 0 2px 4px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------- база тегов
   Только под body.v2: старые экраны в новой шапке (без v2 = true) эти правила
   не получают и остаются со своим style.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.v2 {
  margin: 0;
  background: var(--fon-bel);
  color: var(--tekst);
  font: 400 16px/1.55 var(--shrift);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
:where(.v2) h1, :where(.v2) h2, :where(.v2) h3, :where(.v2) h4 { margin: 0; color: var(--tekst); font-weight: 800; letter-spacing: -.02em; }
:where(.v2) h1 { font-size: 56px; line-height: 1.05; letter-spacing: -.03em; }
:where(.v2) h2 { font-size: 36px; line-height: 1.12; }
:where(.v2) h3 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
:where(.v2) h4 { font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: 0; }
:where(.v2) p, :where(.v2) ul, :where(.v2) ol, :where(.v2) figure, :where(.v2) dl, :where(.v2) dd { margin: 0; }
:where(.v2) ul, :where(.v2) ol { padding: 0; list-style: none; }
:where(.v2) a { color: var(--ssylka); text-decoration: none; }
:where(.v2) a:hover { text-decoration: underline; text-underline-offset: 3px; }
:where(.v2) img, :where(.v2) svg { max-width: 100%; }
:where(.v2) img { height: auto; display: block; }
:where(.v2) button, :where(.v2) input, :where(.v2) select, :where(.v2) textarea { font: inherit; color: inherit; }
:where(.v2) b, :where(.v2) strong { font-weight: 700; }
:where(.v2) main { display: block; }
:where(.v2) :focus-visible { outline: 3px solid color-mix(in srgb, var(--fiolet) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
:where(.v2) ::selection { background: var(--laym-stiker); color: #141852; }

/* --------------------------------------------------------------- сетка и полосы */
.ramka { width: 100%; max-width: calc(var(--shir) + 2 * var(--pole-bok)); margin: 0 auto; padding: 0 var(--pole-bok); }
.ramka--uzk { max-width: calc(var(--shir-chtenie) + 2 * var(--pole-bok)); }
.polosa { padding: 60px 0; position: relative; }
.polosa--tesno { padding: 48px 0; }
.polosa--bel { background: var(--fon-bel); }
.polosa--krem { background: var(--fon); }
.polosa--tepl { background: var(--fon-tepl); }
.polosa--sir { background: var(--fon-sir); }
.polosa--temn { background: var(--temn); color: #fff; }
.polosa--bel + .polosa--bel, .polosa--tepl + .polosa--tepl, .polosa--sir + .polosa--sir { padding-top: 8px; }
.setka { display: grid; gap: var(--o5); grid-template-columns: repeat(var(--kol, 1), minmax(0, 1fr)); }
.setka--2 { --kol: 2; }
.setka--3 { --kol: 3; }
.setka--4 { --kol: 4; }
.setka--5 { --kol: 5; }
.setka--tesno { gap: var(--o4); }
.ryad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o3); }
.ryad--mezhdu { justify-content: space-between; }
.stopka { display: flex; flex-direction: column; gap: var(--o4); }
.stopka--mal { gap: var(--o2); }
.stopka--bol { gap: var(--o6); }
.sek-shapka { position: relative; margin-bottom: 32px; max-width: 860px; }
.sek-shapka .lid { margin-top: 8px; }
.sek-shapka--centr { text-align: center; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------- текст */
.zag-1 { font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; color: var(--tekst); margin: 0; }
.zag-2 { font-size: 36px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--tekst); margin: 0; }
.zag-3 { font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--tekst); margin: 0; }
.zag-4 { font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--tekst); margin: 0; }
.lid { font-size: 17px; line-height: 1.55; color: var(--tiho); }
.lid--mal { font-size: 15px; }
.t-tiho { color: var(--tiho); }
.t-mal { font-size: 14px; line-height: 1.5; }
.t-xs { font-size: 13px; line-height: 1.45; }
.t-zhir { font-weight: 700; }
.t-centr { text-align: center; }
.akcent { color: var(--fiolet); }
.chislo { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--tekst); font-variant-numeric: tabular-nums; }
.chislo--mal { font-size: 28px; }
.chislo small { font-size: .45em; font-weight: 600; color: var(--tiho); letter-spacing: 0; }

/* --------------------------------------------------------------- кнопки */
.knopka {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r2);
  border: 1.5px solid transparent; background: var(--karta); color: var(--tekst);
  font: 700 15px/1.2 var(--shrift); letter-spacing: 0; text-align: center; text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.knopka:hover { text-decoration: none; }
.knopka:active { transform: translateY(1px); }
.knopka[disabled], .knopka[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.knopka .kn-str, .knopka svg { width: 18px; height: 18px; flex: none; }
/* Коралловая: белый текст на коралле проходит AA только крупным (18.7px жирным). */
.knopka--glav { background: var(--koral); color: #fff; font-size: 19px; box-shadow: var(--ten-koral); }
.knopka--glav:hover { background: var(--koral-hover); color: #fff; }
.knopka--fiolet { background: var(--fiolet); color: #fff; box-shadow: var(--ten-fiolet); }
[data-theme="dark"] .knopka--fiolet { background: #664cf3; }
.knopka--fiolet:hover { background: #5a3fe6; color: #fff; }
.knopka--temn { background: var(--tekst); color: var(--fon-bel); }
.knopka--kontur { background: var(--karta); border-color: var(--tekst); color: var(--tekst); }
.knopka--kontur:hover { background: var(--fon-sir); }
.knopka--svetl { background: var(--karta); border-color: var(--liniya-2); color: var(--tekst); }
.knopka--svetl:hover { border-color: var(--fiolet); color: var(--fiolet); }
.knopka--koral-kontur { background: var(--karta); border-color: var(--koral-tekst); color: var(--koral-tekst); }
.knopka--koral-kontur:hover { background: var(--koral-fon); }
.knopka--laym { background: var(--laym-2); color: #141852; }
.knopka--laym:hover { background: var(--laym); color: #141852; }
.knopka--tiho { background: transparent; color: var(--fiolet); padding: 0 6px; min-height: 40px; }
.knopka--tiho:hover { text-decoration: underline; }
.knopka--mal { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.knopka--mal.knopka--glav { font-size: 14px; background: var(--koral-tekst); box-shadow: none; }
/* Малая коралловая в темной теме: белый текст проходит AA только на #d63939 (4.66). */
[data-theme="dark"] .knopka--mal.knopka--glav { background: #d63939; color: #fff; }
[data-theme="dark"] .knopka--mal.knopka--glav:hover { background: #c22f2f; }
.knopka--bol { min-height: 56px; padding: 0 28px; }
.knopka--shir { width: 100%; }
.knopka--ikon { width: 40px; min-height: 40px; padding: 0; border-radius: 10px; }

/* --------------------------------------------------------------- поля */
.pole {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r2);
  border: 1.5px solid var(--liniya-2); background: var(--karta); color: var(--tekst);
  font: 400 16px/1.4 var(--shrift);
}
textarea.pole { min-height: 120px; resize: vertical; }
select.pole { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6f89' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.pole::placeholder { color: var(--tiho); opacity: .85; }
.pole:focus { outline: none; border-color: var(--fiolet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fiolet) 16%, transparent); }
.pole--oshibka, .field-bad .pole { border-color: var(--koral-tekst); }
.pole-podpis { display: block; font-size: 14px; font-weight: 600; color: var(--tekst); margin-bottom: 6px; }
.pole-podskazka { display: block; font-size: 13px; color: var(--tiho); margin-top: 6px; min-height: 1em; }
.field-bad .pole-podskazka, .pole-podskazka--beda { color: var(--koral-tekst); }
.flazhok { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.flazhok input[type=checkbox], .flazhok input[type=radio] { width: 20px; height: 20px; accent-color: var(--sin); flex: none; }

/* Поле адреса с кнопкой внутри, concept_4 первый экран */
.pole-adres {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px;
  background: var(--karta); border-radius: 14px; box-shadow: var(--ten-2);
  border: 1.5px solid var(--liniya);
}
.pole-adres:focus-within { border-color: var(--fiolet); }
.field-bad .pole-adres { border-color: var(--koral-tekst); }
.pole-adres__ikon { color: var(--tiho); flex: none; display: flex; }
.pole-adres__ikon svg { width: 22px; height: 22px; }
.pole-adres input {
  flex: 1; min-width: 0; min-height: 48px; border: 0; background: transparent; padding: 0 6px;
  font: 400 17px/1.3 var(--shrift); color: var(--tekst);
}
.pole-adres input::placeholder { color: var(--tiho); }
.pole-adres input:focus { outline: none; }
.pole-adres .knopka { flex: none; min-height: 52px; border-radius: 11px; }
.poisk-pole { position: relative; }
.poisk-pole svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--tiho); }
.poisk-pole .pole { padding-left: 42px; }

/* --------------------------------------------------------------- карточки */
.kartochka {
  background: var(--karta); border: 1px solid var(--liniya); border-radius: var(--r3);
  padding: 24px; box-shadow: var(--ten-1); color: var(--tekst); position: relative;
}
.kartochka--ten { box-shadow: var(--ten-2); }
.kartochka--kontur { box-shadow: none; }
.kartochka--akcent { border: 2px solid #a8e36b; box-shadow: 0 10px 30px rgba(161, 240, 36, .18); }
.kartochka--sir { background: var(--fon-sir); border-color: transparent; box-shadow: none; }
.kartochka--tesno { padding: 16px; }
.kartochka--bol { padding: 32px; border-radius: var(--r4); }
a.kartochka--ssylka, .kartochka--ssylka { display: block; color: inherit; transition: box-shadow .15s, transform .15s, border-color .15s; }
.kartochka--ssylka:hover { text-decoration: none; box-shadow: var(--ten-2); border-color: var(--fiolet-fon-2); transform: translateY(-2px); }
.kartochka h3 + p, .kartochka .zag-3 + p, .kartochka h4 + p { margin-top: 6px; color: var(--tiho); font-size: 14px; line-height: 1.5; }

.ikonka-krug {
  width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  flex: none; background: var(--fiolet-fon); color: var(--fiolet);
}
.ikonka-krug svg { width: 24px; height: 24px; }
.ikonka-krug--bol { width: 60px; height: 60px; }
.ikonka-krug--bol svg { width: 28px; height: 28px; }
.ikonka-krug--kv { border-radius: 14px; }
.ikonka-krug--zel { background: var(--zel-fon); color: var(--zel-tekst); }
.ikonka-krug--fiolet { background: var(--fiolet-fon); color: var(--fiolet); }
.ikonka-krug--sin { background: #6053f0; color: #fff; }
.ikonka-krug--koral { background: var(--koral-fon); color: var(--koral-tekst); }
.ikonka-krug--laym { background: var(--laym); color: #141852; }
.ikonka-krug--oranzh { background: var(--oranzh-fon); color: #c26a17; }
.ikonka-krug--temn { background: var(--temn); color: #fff; }

/* Карточка источника: круглый значок по центру, заголовок, две строки (concept_4 «Откуда берутся числа») */
.istochnik { text-align: center; padding: 28px 22px; }
.istochnik .ikonka-krug { margin: 0 auto 16px; }
.istochnik h3 { font-size: 17px; }
.istochnik p { margin-top: 8px; font-size: 14px; color: var(--tiho); line-height: 1.5; }

/* Иллюстрация gpt-image-2 из /static/v2/img */
.ill { display: block; max-width: 100%; height: auto; user-select: none; pointer-events: none; }

/* --------------------------------------------------------------- метки */
.chinit, .vazhn, .plashka, .status {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 12px;
  border-radius: var(--r-krug); font: 600 13px/1.2 var(--shrift); white-space: nowrap; letter-spacing: 0;
}
.chinit--prog { background: var(--prog-fon); color: var(--prog-t); }
.chinit--kopi { background: var(--kopi-fon); color: var(--kopi-t); }
.chinit--serv { background: var(--serv-fon); color: var(--serv-t); }
.chinit--kont { background: var(--kont-fon); color: var(--kont-t); }
.vazhn::before { content: ""; width: 8px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: currentColor; flex: none; }
.vazhn--1 { background: var(--v1-fon); color: var(--v1-t); }
.vazhn--2 { background: var(--v2-fon); color: var(--v2-t); }
.vazhn--3 { background: var(--v3-fon); color: var(--v3-t); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status--ok { background: var(--v3-fon); color: var(--v3-t); }
.status--rabota { background: var(--v2-fon); color: var(--v2-t); }
.status--idet { background: var(--fiolet-fon); color: var(--fiolet); }
.status--oshibka { background: var(--v1-fon); color: var(--v1-t); }
.status--chernovik { background: var(--serv-fon); color: var(--serv-t); }
.status--nejtr { background: var(--tablica-shapka); color: var(--tiho); }
.plashka { background: var(--fon-sir); color: var(--tekst-2); font-weight: 500; }
.plashka svg { width: 16px; height: 16px; }
.plashka--zel { background: #e2f8e1; color: #2c4a3a; }
.plashka--fiolet { background: var(--fiolet-fon); color: var(--fiolet); }
.plashka--laym { background: var(--laym-2); color: #141852; font-weight: 700; }
.plashka--koral { background: var(--koral-fon); color: var(--koral-tekst); }
[data-theme="dark"] .plashka--zel { background: #1c3a2c; color: #bfe9cf; }
.schetchik { display: inline-flex; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  align-items: center; justify-content: center; background: #d63939; color: #fff; font: 700 12px/1 var(--shrift); }

/* --------------------------------------------------------------- таблицы */
.tablica-obertka { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--liniya); border-radius: var(--r2); background: var(--karta); }
.tablica { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.4; color: var(--tekst); }
.tablica th {
  text-align: left; font-weight: 500; font-size: 13px; color: var(--tiho); background: var(--tablica-shapka);
  padding: 11px 14px; border-bottom: 1px solid var(--liniya); white-space: nowrap;
}
.tablica td { padding: 12px 14px; border-bottom: 1px solid var(--liniya); vertical-align: middle; }
.tablica tr:last-child td { border-bottom: 0; }
.tablica td + td, .tablica th + th { border-left: 1px solid var(--liniya); }
.tablica--bez-linij td + td, .tablica--bez-linij th + th { border-left: 0; }
.tablica--tesno td, .tablica--tesno th { padding: 8px 12px; }
.tablica--polosy tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--tablica-shapka) 55%, transparent); }
.tablica tbody tr:hover td { background: color-mix(in srgb, var(--fiolet-fon) 35%, transparent); }
.tablica td.tablica__chislo, .tablica th.tablica__chislo { text-align: right; font-variant-numeric: tabular-nums; }
.tablica .tablica__akcent { background: var(--laym-fon); text-align: center; }
.tablica th.tablica__akcent { color: var(--tekst); font-weight: 700; }
.tablica__galka { color: #43a02a; display: inline-flex; }
.tablica__galka svg { width: 20px; height: 20px; }
.tablica__net { color: var(--tiho); }
.tablica .th-sort { cursor: pointer; user-select: none; }
.tablica .th-sort::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; opacity: .5;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.tablica .th-sort.is-up::after { transform: rotate(-135deg); opacity: 1; }
.tablica .th-sort.is-down::after { opacity: 1; }

/* --------------------------------------------------------------- вкладки */
.vkladki-v2 { display: flex; gap: 4px; border-bottom: 1px solid var(--liniya); overflow-x: auto; scrollbar-width: none; }
.vkladki-v2::-webkit-scrollbar { display: none; }
.vkladki-v2 > a, .vkladki-v2 > button {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  color: var(--tiho); font: 600 15px/1 var(--shrift); background: none; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.vkladki-v2 > a:hover, .vkladki-v2 > button:hover { color: var(--tekst); text-decoration: none; }
.vkladki-v2 > .on, .vkladki-v2 > [aria-current="page"], .vkladki-v2 > [aria-selected="true"] { color: var(--fiolet); }
.vkladki-v2 > .on::after, .vkladki-v2 > [aria-current="page"]::after, .vkladki-v2 > [aria-selected="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--fiolet); }
.vkl--pilyuli { border: 0; gap: 8px; }
.vkl--pilyuli > a, .vkl--pilyuli > button { min-height: 40px; border-radius: var(--r-krug); background: var(--karta); border: 1px solid var(--liniya-2); color: var(--tekst); }
.vkl--pilyuli > .on, .vkl--pilyuli > [aria-current="page"], .vkl--pilyuli > [aria-selected="true"] { background: var(--tekst); border-color: var(--tekst); color: var(--fon-bel); }
.vkl--pilyuli > .on::after, .vkl--pilyuli > [aria-current="page"]::after, .vkl--pilyuli > [aria-selected="true"]::after { display: none; }

/* --------------------------------------------------------------- раскрывашки */
details.raskr { background: var(--karta); border: 1px solid var(--liniya); border-radius: var(--r2); }
details.raskr > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px; padding: 12px 18px; font-weight: 600; font-size: 15px; color: var(--tekst);
}
details.raskr > summary::-webkit-details-marker { display: none; }
details.raskr > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--tiho);
  border-bottom: 2px solid var(--tiho); transform: rotate(45deg) translateY(-3px); transition: transform .15s;
}
details.raskr[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
details.raskr > summary:hover { color: var(--fiolet); }
.raskr__telo { padding: 0 18px 18px; color: var(--tekst-2); font-size: 15px; line-height: 1.6; }
.raskr__telo p + p { margin-top: 10px; }
.raskr-spisok { display: flex; flex-direction: column; gap: 10px; }
.voprosy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: start; }

/* --------------------------------------------------------------- списки */
.spisok-galok { display: flex; flex-direction: column; gap: 12px; }
.spisok-galok > li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.45; color: var(--tekst-2); min-height: 22px; }
.spisok-galok > li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 6px;
  background: var(--zel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/15px no-repeat;
}
.spisok-galok--laym > li::before { border-radius: 50%; background-color: #8fd63a; }
.spisok-galok--fiolet > li::before { border-radius: 7px; background-color: var(--fiolet-2); }
.spisok-galok--mal > li { font-size: 14px; padding-left: 28px; }
.spisok-galok--mal > li::before { width: 18px; height: 18px; background-size: 12px; top: 1px; }

ol.shagi { display: grid; grid-template-columns: repeat(var(--kol, 4), minmax(0, 1fr)); gap: 0; counter-reset: shag; }
.shag { position: relative; padding: 0 24px; }
.shag:first-child { padding-left: 0; }
.shag + .shag { border-left: 1px solid var(--liniya); }
.shag__verh { display: flex; gap: 14px; align-items: flex-start; }
.shag__nomer {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 800 18px/1 var(--shrift); background: var(--fiolet-2); color: #fff;
}
.shag__nomer--laym { background: var(--laym); color: #141852; }
.shag h3 { font-size: 16px; line-height: 1.3; }
.shag p { margin-top: 6px; font-size: 14px; color: var(--tiho); line-height: 1.5; }

/* --------------------------------------------------------------- рукописные пометки */
.pometka {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: 600 22px/1.05 var(--shrift-ruka); color: var(--rukopis); letter-spacing: 0;
  transform: rotate(-4deg); pointer-events: none; max-width: 240px;
}
.pometka__str { display: block; width: 56px; height: 44px; color: var(--rukopis); flex: none; }
.pometka--vpravo { align-items: flex-end; text-align: right; }
.pometka--vpravo .pometka__str { transform: scaleX(-1); }
.pometka--sboku { flex-direction: row; align-items: center; gap: 8px; }
.pometka--abs { position: absolute; z-index: 2; }
.polosa--temn .pometka, .prizyv .pometka { color: #d9d6ff; }
.stiker {
  display: inline-block; background: var(--laym-stiker); color: #141852; padding: 14px 18px 16px;
  font: 600 23px/1.02 var(--shrift-ruka); border-radius: 6px; transform: rotate(-6deg);
  box-shadow: 0 12px 26px rgba(20, 24, 82, .12); max-width: 180px; position: relative;
}
.luchi { display: block; width: 44px; height: 44px; color: var(--fiolet); }
.luchi--laym { color: #9be21e; }

/* --------------------------------------------------------------- плашки и пустые состояния */
.strip-v2 {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r2);
  background: var(--fon-sir); color: var(--tekst); font-size: 15px; line-height: 1.5; border: 1px solid var(--liniya);
}
.strip-v2 b { font-weight: 700; }
.strip-v2--ok { background: var(--v3-fon); border-color: transparent; }
.strip-v2--beda { background: var(--v1-fon); border-color: transparent; }
.strip-v2--info { background: var(--kont-fon); border-color: transparent; }
.strip-v2--vnim { background: var(--v2-fon); border-color: transparent; }
.pusto-v2 { text-align: center; padding: 48px 24px; border: 1.5px dashed var(--liniya-2); border-radius: var(--r3); background: var(--karta); }
.pusto-v2 .ill { margin: 0 auto 16px; max-width: 220px; }
.pusto-v2 p { color: var(--tiho); margin: 8px auto 20px; max-width: 460px; }

/* --------------------------------------------------------------- тарифная карточка */
.tarif { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 24px; }
.tarif__nazv { font-size: 16px; font-weight: 700; color: var(--tekst); }
.tarif__cena { font-size: 32px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: var(--tekst); white-space: nowrap; }
.tarif__cena small { font-size: 15px; font-weight: 500; color: var(--tiho); letter-spacing: 0; }
.tarif .spisok-galok { flex: 1; }
.tarif .knopka { margin-top: 6px; }
.tarif--pop { border: 2px solid #a8e36b; box-shadow: 0 12px 34px rgba(161, 240, 36, .16); }
.tarif__metka { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); }

/* --------------------------------------------------------------- темный призыв (финал страницы) */
.prizyv-obertka { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
.prizyv {
  position: relative; overflow: hidden; background: var(--temn); color: #fff; border-radius: 28px;
  padding: 52px 56px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; align-items: center;
}
.prizyv::before { content: ""; position: absolute; right: 12%; top: -30%; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(136, 105, 249, .45), transparent 65%); pointer-events: none; }
.prizyv h2, .prizyv .zag-2 { color: #fff; }
.prizyv .lid { color: #d9dbf2; }
.prizyv .pole-adres { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); border-color: transparent; }
.prizyv .pole-podskazka { color: #c9cbe6; }
.prizyv > * { position: relative; }

/* --------------------------------------------------------------- окно продукта (планшет) */
.ustr {
  position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); background: var(--temn-2);
  border-radius: 28px; padding: 12px; box-shadow: 0 30px 60px rgba(20, 24, 82, .22), 0 6px 14px rgba(20, 24, 82, .12);
  color: var(--tekst); font-family: var(--shrift);
}
[data-theme="dark"] .ustr { background: #0a0c26; }
.ustr__bok { padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; color: #c9cbef; font-size: 12px; }
.ustr__bok .logo { color: #fff; font-size: 15px; margin-bottom: 14px; padding: 0 6px; }
.ustr__bok span { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.ustr__bok span svg { width: 14px; height: 14px; opacity: .8; }
.ustr__bok .on { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; }
.ustr__ekran { background: var(--karta); border-radius: 18px; padding: 20px; min-width: 0; }
.ustr__ekran .vkladki-v2 > a, .ustr__ekran .vkladki-v2 > span { min-height: 34px; font-size: 12px; padding: 0 10px; }

/* --------------------------------------------------------------- плитка числа (кабинет, s13) */
.stat-plitka { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px; }
.stat-plitka .ikonka-krug { width: 64px; height: 64px; border-radius: 18px; }
.stat-plitka .ikonka-krug svg { width: 30px; height: 30px; }
.stat-plitka__nazv { font-size: 15px; font-weight: 700; color: var(--tekst); }
.stat-plitka__chislo { font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: var(--tekst); }
.stat-plitka__podp { font-size: 13px; color: var(--tiho); }
.stat-plitka__stolbiki { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.stat-plitka__stolbiki i { display: block; width: 12px; border-radius: 3px; background: currentColor; opacity: .35; }
.stat-plitka__stolbiki i:nth-child(1) { height: 30%; } .stat-plitka__stolbiki i:nth-child(2) { height: 55%; }
.stat-plitka__stolbiki i:nth-child(3) { height: 75%; opacity: .5; } .stat-plitka__stolbiki i:nth-child(4) { height: 100%; opacity: .6; }
.stat-plitka--zel .stat-plitka__stolbiki { color: #7fdaac; }
.stat-plitka--fiolet .stat-plitka__stolbiki { color: #b0a1fd; }
.stat-plitka--oranzh .stat-plitka__stolbiki { color: #fdcf9e; }
.stat-plitka--koral .stat-plitka__stolbiki { color: #fda4a4; }

/* --------------------------------------------------------------- логотип */
.logo { display: inline-flex; align-items: center; gap: 8px; font: 800 22px/1 var(--shrift); letter-spacing: -.02em;
  color: var(--tekst); text-decoration: none; white-space: nowrap; }
.logo:hover { text-decoration: none; color: var(--tekst); }
.logo svg { flex: none; }
.logo-ruka { width: 34px; height: 34px; }

/* --------------------------------------------------------------- переключатель темы (хук .tgl в shtat.js) */
.shapka .tgl, .kab .tgl {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--liniya-2); background: var(--karta);
  color: var(--tekst); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none;
}
.shapka .tgl svg, .kab .tgl svg { width: 18px; height: 18px; }
.shapka .tgl .i-sun, .kab .tgl .i-sun { display: none; }
[data-theme="dark"] .shapka .tgl .i-sun, [data-theme="dark"] .kab .tgl .i-sun { display: block; }
[data-theme="dark"] .shapka .tgl .i-moon, [data-theme="dark"] .kab .tgl .i-moon { display: none; }

/* --------------------------------------------------------------- шапка сайта */
.shapka {
  position: sticky; top: 0; z-index: 60; font-family: var(--shrift); color: var(--tekst);
  background: color-mix(in srgb, var(--fon) 90%, transparent); backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--liniya) 70%, transparent);
}
.shapka__in { position: relative; display: flex; align-items: center; gap: 20px; min-height: 72px; }
.shapka__nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.shapka__nav > a, .shapka .mm-knopka {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 11px; border-radius: 10px; color: var(--tekst);
  font: 500 15px/1.2 var(--shrift); text-decoration: none; white-space: nowrap; background: none; border: 0;
}
.shapka__nav > a:hover, .shapka .mm-knopka:hover { background: color-mix(in srgb, var(--fiolet-fon) 70%, transparent); text-decoration: none; }
.shapka__nav > a.on, .shapka .mm-knopka.on { color: var(--fiolet); }
.shapka .mm-ptica { width: 12px; height: 12px; transition: transform .15s; }
.shapka .mm-knopka[aria-expanded="true"] .mm-ptica { transform: rotate(180deg); }
.shapka__dop { display: flex; align-items: center; gap: 10px; flex: none; }
.shapka__dop > a:not(.knopka) { color: var(--tekst); font-weight: 500; font-size: 15px; padding: 8px 6px; }
.shapka__dop .knopka { min-height: 42px; padding: 0 20px; font-size: 15px; }
.shapka__dop .knopka--kontur { border-radius: 12px; padding: 0 26px; }

/* Выпадающее меню инструментов (коробка .mm вставляет shtat.js, разметка из /menu.html) */
.shapka .mm {
  position: absolute; top: calc(100% - 4px); left: 50%; transform: translateX(-50%); width: min(1120px, 96vw);
  background: var(--karta); border: 1px solid var(--liniya); border-radius: 20px; box-shadow: var(--ten-2); padding: 24px 26px 18px;
  max-height: calc(100vh - 90px); overflow-y: auto;
}
.mm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.mm-cap { display: flex; align-items: center; gap: 8px; color: var(--tekst); font-size: 15px; }
.mm-cap .mz { color: var(--fiolet); }
.mm-opis { font-size: 13px; color: var(--tiho); margin: 6px 0 10px; line-height: 1.4; }
.mm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-list a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; color: var(--tekst-2); font-size: 14px; text-decoration: none; }
.mm-list a b { font-weight: 500; }
.mm-list a:hover { background: var(--fon-sir); color: var(--fiolet); text-decoration: none; }
.mm-list .mz { color: var(--tiho); flex: none; }
.mm-niz { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--liniya); }
.mm-niz a { color: var(--fiolet); font-weight: 600; font-size: 14px; }

/* Строка популярных инструментов (под шапкой и в верхней строке кабинета) */
.top-instr-v2 { background: var(--fon); border-bottom: 1px solid var(--liniya); font-family: var(--shrift); }
.top-instr-in, .top-instr-bar { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; min-height: 40px; font-size: 13px; }
.top-instr-in::-webkit-scrollbar, .top-instr-bar::-webkit-scrollbar { display: none; }
.top-instr-cap { color: var(--tiho); margin-right: 6px; }
.top-instr-in a, .top-instr-bar a { color: var(--tekst-2); padding: 4px 10px; border-radius: var(--r-krug); background: var(--karta); border: 1px solid var(--liniya); text-decoration: none; }
.top-instr-in a:hover, .top-instr-bar a:hover, .top-instr-in a.on, .top-instr-bar a.on { border-color: var(--fiolet); color: var(--fiolet); }
.top-instr-in a.top-instr-vse { background: none; border: 0; color: var(--fiolet); font-weight: 600; }

/* Меню телефона: обычный details, без скрипта (разделы подставляет shtat.js) */
.menu-mob { display: none; position: static; }
.menu-mob > summary { list-style: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--liniya-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--karta); color: var(--tekst); }
.menu-mob > summary::-webkit-details-marker { display: none; }
.menu-mob > summary svg { width: 22px; height: 22px; }
.menu-mob__telo {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--karta); border-bottom: 1px solid var(--liniya);
  box-shadow: var(--ten-2); padding: 12px 16px 20px; max-height: calc(100vh - 72px); overflow-y: auto; display: flex; flex-direction: column;
}
.menu-mob__telo > a { display: flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--tekst); font-size: 16px; font-weight: 500; border-radius: 10px; }
.menu-mob__telo > a:hover { background: var(--fon-sir); text-decoration: none; }
.menu-mob__telo .menu-sep { display: block; height: 1px; background: var(--liniya); margin: 8px 0; }
.menu-mob__telo .mm-grid { display: flex; flex-direction: column; gap: 4px; }
.menu-mob__telo .mm-det > summary { list-style: none; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 8px; cursor: pointer; font-weight: 600; }
.menu-mob__telo .mm-det > summary::-webkit-details-marker { display: none; }
.menu-mob__telo .mm-list { padding: 0 8px 8px 34px; }
.menu-mob__telo .mm-list a { min-height: 40px; }

/* --------------------------------------------------------------- подвал */
.podval { background: var(--fon-bel); border-top: 1px solid var(--liniya); padding: 44px 0 28px; font-family: var(--shrift); color: var(--tekst); }
.podval__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.podval__slogan { font-size: 13px; color: var(--tiho); margin-top: 10px; line-height: 1.45; max-width: 260px; }
.podval__kol { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.podval__cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.podval__kol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.podval__kol a { color: var(--tekst); font-size: 14px; font-weight: 500; }
.podval__kol > div + div a { color: var(--tiho); font-size: 13px; font-weight: 400; }
.podval__kol a:hover { color: var(--fiolet); }
.podval__rekv { font-size: 13px; color: var(--tiho); line-height: 1.55; display: flex; flex-direction: column; gap: 4px; }
.podval__rekv a { color: var(--ssylka); }
.foot-map-v2 { background: var(--fon-tepl); border-top: 1px solid var(--liniya); font-family: var(--shrift); }
.foot-map-v2 .foot-map-in { padding-top: 28px; padding-bottom: 28px; }
.foot-map-v2 .foot-map-in:empty { padding: 0; }
.foot-map-v2 .mm-opis { display: none; }
.foot-map-v2 .mm-cap { font-size: 14px; margin-bottom: 8px; }
.foot-map-v2 .mm-list a { font-size: 13px; padding: 3px 8px; }
.foot-map-v2 .mm-list .mz { display: none; }
.foot-map-v2 .mm-niz { display: none; }

/* Полоса про cookie и счетчик (старые id и хуки) */
.v2-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 720px; margin: 0 auto;
  display: flex; gap: 16px; align-items: center; background: var(--karta); border: 1px solid var(--liniya); border-radius: var(--r3);
  box-shadow: var(--ten-2); padding: 14px 16px; font: 400 14px/1.45 var(--shrift); color: var(--tekst-2); }
.v2-cookie[hidden] { display: none; }

/* --------------------------------------------------------------- оболочка кабинета (s13, s14) */
.kab { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; background: var(--fon-rab);
  font-family: var(--shrift); color: var(--tekst); }
.kab-bok {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--fon-bel); border-right: 1px solid var(--liniya); padding: 18px 14px 18px;
  display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; z-index: 30;
}
.kab-bok > .logo { padding: 4px 10px 22px; }
.kab-gruppa { display: flex; flex-direction: column; gap: 4px; }
.kab-gruppa + .kab-gruppa { margin-top: 14px; }
.kab-podpis { font-size: 12px; font-weight: 600; color: var(--tiho); padding: 6px 14px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kab-punkt, .kab-bok .nav-dd > summary {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 12px;
  color: var(--tekst); font: 500 15px/1.2 var(--shrift); text-decoration: none; cursor: pointer; list-style: none;
}
.kab-bok .nav-dd > summary::-webkit-details-marker { display: none; }
.kab-punkt:hover, .kab-bok .nav-dd > summary:hover { background: var(--fon-sir); text-decoration: none; color: var(--tekst); }
.kab-punkt.on, .kab-bok .nav-dd > summary.on { background: var(--laym-akt); font-weight: 700; }
.kab-punkt .mz, .kab-bok .nav-dd > summary .mz { width: 21px; height: 21px; flex: none; color: var(--tekst-2); }
.kab-punkt.tiho { color: var(--tiho); }
.kab-punkt span, .kab-bok .nav-dd > summary span { flex: 1; min-width: 0; }
.kab-bok .nav-dd-ptica { color: var(--tiho); }
.kab-niz-bok { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.kab-pomosch { position: relative; overflow: hidden; background: var(--fon-sir); border-radius: 16px; padding: 16px 16px 14px; }
.kab-pomosch b { display: block; font-size: 17px; line-height: 1.2; font-weight: 800; max-width: 120px; }
.kab-pomosch p { font-size: 13px; color: var(--tiho); margin: 6px 0 12px; max-width: 118px; line-height: 1.4; }
.kab-pomosch .ill { position: absolute; right: -10px; bottom: 6px; width: 96px; }
.kab-pomosch .knopka { position: relative; }

/* Карточка остатка кредитов (s13, На счете) и подписки студии (s14, темное меню) */
.kab-balans { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center;
  padding: 14px; border: 1px solid var(--liniya); border-radius: 16px; background: var(--karta); }
.kab-balans__i { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--oranzh-fon); color: #b86a12; }
.kab-balans__t { display: flex; flex-direction: column; font-size: 12px; color: var(--tiho); }
.kab-balans__t b { font-size: 18px; font-weight: 800; color: var(--tekst); }
.kab-balans .knopka { grid-column: 1 / -1; }
.kab-podpiska { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #e8eaff; }
.kab-podpiska__t { font-size: 12px; color: #c9cdf5; }
.kab-podpiska b { font-size: 15px; font-weight: 700; color: #fff; }
.kab-podpiska__n { margin-top: 6px; font-size: 15px; font-weight: 700; color: #fff; }
.kab-podpiska__do { font-size: 12px; color: #c9cdf5; }
.kab-podpiska .knopka { margin-top: 8px; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.kab-podpiska .knopka:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.kab-polosa { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; margin: 4px 0 2px; }
.kab-polosa i { display: block; height: 100%; border-radius: 4px; background: var(--laym); }
.kab-pomosch-ssylka { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px;
  color: var(--tekst); font-size: 14px; font-weight: 600; }
.kab-pomosch-ssylka:hover { color: var(--fiolet); text-decoration: none; }
/* Нижние вкладки кабинета на телефоне (s25) */
.kab-tabbar { display: none; }

/* Инструменты: панель сбоку от меню (details.nav-dd, хуки старые) */
.kab-bok .nav-dd { position: static; }
.kab-bok .nav-dd-body {
  position: fixed; left: 262px; top: 12px; bottom: 12px; width: min(620px, calc(100vw - 290px)); overflow-y: auto;
  background: var(--karta); border: 1px solid var(--liniya); border-radius: 20px; box-shadow: var(--ten-2);
  padding: 20px 22px; z-index: 70; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; align-content: start;
}
.kab-bok .nav-dd:not([open]) .nav-dd-body { display: none; }
.kab-bok .nav-dd[open] .nav-dd-ptica { transform: rotate(180deg); }
.nav-dd-h { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nav-dd-h b { font-size: 18px; font-weight: 800; }
.nav-dd-vse { font-size: 14px; font-weight: 600; color: var(--fiolet); }
.nav-dd-cap { font-size: 13px; font-weight: 700; color: var(--tekst); margin-bottom: 6px; }
.nav-dd-gr { display: flex; flex-direction: column; gap: 1px; }
.nav-dd-a { display: block; padding: 6px 10px; margin: 0 -10px; border-radius: 8px; color: var(--tekst-2); font-size: 14px; text-decoration: none; }
.nav-dd-a:hover { background: var(--fon-sir); color: var(--fiolet); text-decoration: none; }
.nav-dd-a.on { background: var(--laym-akt); color: var(--tekst); font-weight: 600; }
.kab-bok .nav-dd-mob { display: none; }

/* Темное меню, как на s14 (кабинет студии): <div class="kab kab--temn"> */
.kab--temn .kab-bok { background: #232b5d; border: 0; margin: 12px 0 12px 12px; border-radius: 22px; height: calc(100vh - 24px); top: 12px; color: #e8eaff; }
.kab--temn .kab-bok > .logo { color: #fff; }
.kab--temn .kab-punkt, .kab--temn .kab-bok .nav-dd > summary { color: #e8eaff; }
.kab--temn .kab-punkt .mz, .kab--temn .kab-bok .nav-dd > summary .mz { color: #c9cdf5; }
.kab--temn .kab-punkt:hover, .kab--temn .kab-bok .nav-dd > summary:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.kab--temn .kab-punkt.on, .kab--temn .kab-bok .nav-dd > summary.on { background: #cbfcb0; color: #141852; }
.kab--temn .kab-punkt.on .mz { color: #141852; }
.kab--temn .kab-podpis, .kab--temn .kab-punkt.tiho { color: #b7bbe6; }
.kab--temn .kab-pomosch { background: rgba(255, 255, 255, .07); }
.kab--temn .kab-pomosch p { color: #c9cdf5; }
.kab--temn .kab-bok .nav-dd-body { left: 276px; }

.kab-rabota { min-width: 0; display: flex; flex-direction: column; }
.kab-verh {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 32px;
  border-bottom: 1px solid var(--liniya); background: color-mix(in srgb, var(--fon-bel) 92%, transparent);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.kab-verh__l { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1; }
.kab-verh__r { display: flex; align-items: center; gap: 12px; flex: none; }
.kab-kroshki { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tiho); white-space: nowrap; flex: none; }
.kab-verh .top-instr-bar { flex: 1; min-width: 0; }

.kab-kroshki a { color: var(--tiho); }
.kab-kroshki a:hover { color: var(--fiolet); }
.kab-kroshki svg { width: 16px; height: 16px; flex: none; }
.kab-kroshki b { color: var(--tekst); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.kab-kto { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--tekst); max-width: 260px; }
.kab-kto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kab-kto i { width: 34px; height: 34px; border-radius: 50%; background: var(--fiolet-fon); color: var(--fiolet); flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; text-transform: uppercase; }
.kab-verh .top-instr-bar { min-height: 34px; }
.kab-telo { padding: 28px 32px 48px; flex: 1; min-width: 0; }
.kab-niz { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding: 16px 32px 20px;
  border-top: 1px solid var(--liniya); font-size: 13px; color: var(--tiho); }
.kab-niz nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.kab-niz a { color: var(--tiho); }
.kab-niz a:hover { color: var(--fiolet); }
.kab-zagolovok { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
.kab-zagolovok h1, .kab-zagolovok .zag-1 { font-size: 48px; }
.kab-zagolovok .lid { margin-top: 8px; max-width: 620px; font-size: 16px; }

/* --------------------------------------------------------------- панель наблюдения домена (_domen.html v2, s18) */
.dn-panel { display: flex; flex-direction: column; gap: 14px; }
.dn-panel__verh { display: flex; gap: 14px; align-items: flex-start; }
.dn-panel__zag { flex: 1; min-width: 0; }
.dn-panel__zag p { margin-top: 4px; }
.dn-panel__kn { flex: none; }
.dn-regiony { display: flex; flex-direction: column; }
.dn-region { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--liniya); }
.dn-region__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dn-region__imya { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dn-region__kn { display: flex; flex-wrap: wrap; gap: 8px; }
.dn-region__kn form { margin: 0; }
.dn-panel__niz { border-top: 1px solid var(--liniya); padding-top: 12px; }
.dn-okno__kn { justify-content: flex-end; margin-top: 8px; }
@media (max-width: 600px) {
  .dn-panel__verh { flex-wrap: wrap; }
  .dn-panel__kn { width: 100%; }
  .dn-region__kn, .dn-region__kn form, .dn-region__kn .knopka { width: 100%; }
}

/* --------------------------------------------------------------- служебное */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tolko-mob { display: none !important; }
/* Только для печати: на экране скрыто, на бумаге видно. */
.tolko-pechat { display: none !important; }
dialog.okno-v2 { border: 0; border-radius: var(--r3); padding: 24px; max-width: 520px; width: calc(100% - 32px); box-shadow: var(--ten-2); color: var(--tekst); background: var(--karta); }
dialog.okno-v2::backdrop { background: rgba(20, 24, 82, .45); }

/* --------------------------------------------------------------- адаптив */
@media (max-width: 1180px) {
  .setka--5 { --kol: 3; }
  .setka--4 { --kol: 2; }
  .shapka__nav > a, .shapka .mm-knopka { padding: 8px 8px; font-size: 14px; }
  .prizyv { padding: 44px 36px; }
}
@media (max-width: 1024px) {
  .shapka__nav, .shapka__dop .skryt-mob { display: none; }
  .menu-mob { display: block; }
  .shapka__in { justify-content: space-between; }
  .shapka__dop { margin-left: auto; }
  .kab { grid-template-columns: minmax(0, 1fr); }
  .kab-bok, .kab--temn .kab-bok {
    position: sticky; top: 0; height: auto; margin: 0; border-radius: 0; border-right: 0; border-bottom: 1px solid var(--liniya);
    flex-direction: row; align-items: center; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 8px 12px; scrollbar-width: none;
  }
  .kab-bok::-webkit-scrollbar { display: none; }
  .kab-bok > .logo { padding: 0 10px 0 4px; font-size: 18px; }
  .kab-bok > .logo .logo-ruka { width: 28px; height: 28px; }
  .kab-gruppa { flex-direction: row; gap: 4px; }
  .kab-gruppa + .kab-gruppa { margin: 0 0 0 8px; padding-left: 8px; border-left: 1px solid var(--liniya); }
  .kab-podpis { display: none; }
  .kab-punkt { min-height: 42px; white-space: nowrap; padding: 0 12px; }
  .kab-bok .nav-dd { display: none; }
  .kab-bok .nav-dd-mob { display: contents; }
  .kab-niz-bok { margin: 0; padding: 0; flex-direction: row; }
  .kab-pomosch, .kab-balans, .kab-podpiska { display: none; }
  .kab-verh { position: static; padding: 10px 16px; }
  .kab-telo { padding: 20px 16px 40px; }
  .kab-niz { padding: 14px 16px 18px; }
  .skryt-plansh { display: none !important; }
}
@media (max-width: 860px) {
  :root { --pole-bok: 20px; }
  .setka--3, .setka--4, .setka--5 { --kol: 2; }
  .polosa { padding: 56px 0; }
  :where(.v2) h1, .zag-1 { font-size: 42px; }
  :where(.v2) h2, .zag-2 { font-size: 30px; }
  ol.shagi { --kol: 2; gap: 28px 0; }
  .shag:nth-child(odd) { padding-left: 0; border-left: 0; }
  .podval__in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .prizyv { grid-template-columns: minmax(0, 1fr); }
  .voprosy { grid-template-columns: minmax(0, 1fr); }
  .kab-zagolovok { flex-direction: column; }
  .kab-zagolovok h1, .kab-zagolovok .zag-1 { font-size: 36px; }
}
@media (max-width: 600px) {
  :root { --pole-bok: 16px; }
  body.v2 { font-size: 15px; }
  .setka--2, .setka--3, .setka--4, .setka--5 { --kol: 1; }
  .setka { gap: var(--o4); }
  .polosa { padding: 44px 0; }
  .polosa--tesno { padding: 32px 0; }
  :where(.v2) h1, .zag-1 { font-size: 34px; line-height: 1.08; }
  :where(.v2) h2, .zag-2 { font-size: 26px; }
  :where(.v2) h3, .zag-3 { font-size: 18px; }
  .lid { font-size: 16px; }
  .sek-shapka { margin-bottom: 24px; }
  .kartochka { padding: 20px; }
  .kartochka--bol { padding: 22px; }
  .knopka--glav { font-size: 19px; }
  .pole-adres { flex-wrap: wrap; padding: 8px; gap: 8px; }
  .pole-adres__ikon { padding-left: 8px; }
  .pole-adres input { min-height: 44px; }
  .pole-adres .knopka { width: 100%; }
  ol.shagi { --kol: 1; }
  .shag, .shag + .shag { padding: 0; border-left: 0; }
  .shag + .shag { padding-top: 22px; border-top: 1px solid var(--liniya); }
  .ustr { grid-template-columns: minmax(0, 1fr); border-radius: 20px; padding: 8px; }
  .ustr__bok { display: none; }
  .ustr__ekran { padding: 14px; border-radius: 14px; }
  .prizyv { padding: 32px 20px; border-radius: 22px; }
  .prizyv-obertka { padding: 0 8px; }
  .pometka { font-size: 20px; }
  .stiker { font-size: 20px; }
  .skryt-mob { display: none !important; }
  .tolko-mob { display: revert !important; }
  .podval__kol ul { gap: 4px 18px; }
  .podval__kol a { display: inline-flex; min-height: 36px; align-items: center; }

  .shapka__in { min-height: 64px; gap: 10px; }
  .logo { font-size: 20px; }
  .logo-ruka { width: 30px; height: 30px; }
  .menu-mob__telo { max-height: calc(100vh - 64px); }
  .stat-plitka { grid-template-columns: auto minmax(0, 1fr); }
  .stat-plitka__stolbiki { display: none; }
  .tablica { font-size: 13px; }
  .kab-tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--fon-bel); border-top: 1px solid var(--liniya); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .kab-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center;
    color: var(--tiho); font-size: 12px; font-weight: 600; text-decoration: none; }
  .kab-tabbar a.on { color: var(--fiolet); }
  .kab-rabota { padding-bottom: 68px; }

  .v2-cookie { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------- печать */
@media print {
  .tolko-pechat { display: revert !important; }
  .no-print, .shapka, .podval, .foot-map-v2, .top-instr-v2, .kab-bok, .kab-verh, .kab-niz, .v2-cookie { display: none !important; }
  .kab { display: block; background: #fff; }
  .kab-telo { padding: 0; }
  body.v2 { background: #fff; color: #000; }
  .kartochka { box-shadow: none; break-inside: avoid; }
  .polosa { padding: 24px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}