/* ============================================================
   AUGMENTOR — раздел «Карта», редизайн по схеме заказчика.
   Всё здесь с префиксом mp… и hdr2 — старый styles.css не трогаем,
   он ещё держит остальные шесть вкладок.
   ВНИМАНИЕ: никогда не писать звёздочку со слэшем внутри комментария —
   такая пара закрывает комментарий раньше времени и роняет первое
   правило body.mapskin (уже ловили этот шов на фоне).

   Визуальный язык взят с референса ProHealth: светло-серый лист,
   белые карточки с крупным радиусом, синий акцент, много воздуха.
   Кнопки НЕ высокие — 38–40px, как просил заказчик.
   ============================================================ */

body.mapskin{
  background-color:var(--mp-bg);
}
/* ⚠️ Палитра, радиусы и тени — по «Дизайн-системе Augmentor v1.0»
   (Hyper\Augmentor). Один рабочий синий + три акцента (лайм/розовый/лиловый),
   очень тихая нейтральная шкала. Акценты — только на смысловых блоках,
   не более двух на экран. Радиус растёт вместе с блоком:
   чип 999 · контрол 20 · карточка 28 · блок 36 · панель 44. */
:root{
  --mp-bg:#f2f2f2;         /* лист — из макета */
  --mp-card:#ffffff;       /* surface */
  --mp-card2:#f7f7f7;      /* fill — на полтона от карточки */
  --mp-ink:#0d1014;
  --mp-mut:#5b6472;
  --mp-hint:#b4bbc7;
  --mp-line:#e6e6e6;
  --mp-acc:#1b1e23;        /* Действие — почти чёрный (был синий #2c5cff) */
  --mp-acc2:#2f343b;       /* наведение — на полтона светлее, а не темнее */
  --mp-accsoft:#ebeced;    /* мягкая заливка акцента — нейтральная, без синевы */
  /* ⚠️ Акцент работает в двух ролях: ЗАЛИВКА (под белым текстом — значит
     тёмная) и ТЕКСТ/иконка поверх карточки. Пока акцент был синим, одно
     значение тянуло обе роли. Почти-чёрный годится в заливку всегда, а
     текстом читается только в светлой теме — поэтому вторая роль вынесена
     в отдельный токен, который в тёмной становится светлым. */
  --mp-accfg:var(--mp-acc);
  --mp-dark:#14171d;
  --mp-lime:#d6f84a;       /* Lime · Энергия */
  --mp-pink:#ffa3d0;       /* Pink · Связи */
  --mp-peri:#b7b4ff;       /* Lilac · Глубина */
  --mp-p:#0d1014;          /* Личность */
  --mp-d:#e0454f;          /* Дизайн   */
  --mp-r:28px;             /* карточка */
  --mp-rs:20px;            /* контрол: кнопка, поле, тег */
  --mp-rb:36px;            /* смысловой блок */
  --mp-rp:44px;            /* панель раздела */
  /* ⚠️ Широкое размытие тут ЗАПРЕЩЕНО. Шапка sticky, страница скроллится,
     и тень с blur 30px оставляла на прокрутке грязь прямоугольниками —
     видно по краям карточек и под шапкой. Осталась только плотная 2px:
     её область перерисовки меньше пикселя восприятия, артефактов нет.
     Карточки отделяются разницей фона (белое на сером), как на рефе. */
  /* ⚠️ Тени у блоков НЕТ (заказчик: «убери полностью»). Токен оставлен —
     он стоит в полусотне правил; поверхности разделяет только заливка
     (белая карточка на сером листе) и волосяная граница у крупных блоков. */
  --mp-sh:none;                                /* shadow-0 · плоско */
  --mp-sh2:none;                               /* модалку отделяет затемнение */
  /* ⚠️ Свечения под кнопкой-действием БОЛЬШЕ НЕТ (заказчик: «убери глоу»).
     Токен оставлен, чтобы не править 5 мест использования, но держит
     ту же плотную 1px-тень, что и карточки. */
  --mp-shacc:none;
  --mp-body:#2b313b;      /* основной текст абзацев */
  --mp-chip:var(--mp-ink);/* тёмные пилюли-чипы */
  --mp-track:#edeff5;     /* дорожки прогресса */
  /* Типографика системы: Nata Sans — ТОЛЬКО заголовки и цифры-результаты,
     Onest — всё остальное, JetBrains Mono — коды ворот и техподписи. */
  --mp-display:'Nata Sans','Noto Sans',system-ui,sans-serif;
}

/* заголовки и крупные цифры — Nata Sans 600 */
body.mapskin h1, body.mapskin h2, body.mapskin .doshead h1,
body.mapskin .actbig, body.mapskin .amDilW, body.mapskin .nuname,
body.mapskin .comboT, body.mapskin .mpc .big, body.mapskin .mpc .mid,
body.mapskin .pfname, body.mapskin .profhero h1, body.mapskin .mphead h2,
body.mapskin .lgt{
  font-family:var(--mp-display); font-weight:600; letter-spacing:-.02em;
}


/* Типографика системы: Body 17/400 — поднимаем абзацы контента,
   «воздух вместо плотности» это базовый принцип системы */
body.mapskin .dos p, body.mapskin .actcard p, body.mapskin .actdet p,
body.mapskin .nurole, body.mapskin .actwhy, body.mapskin .amDilBody p{font-size:16px; line-height:1.6}
body.mapskin .doshead .dossub{font-size:17px; line-height:1.55}

/* ---------------- шапка ---------------- */
/* Фон во всю ширину, содержимое — по сетке карточек. Если ограничить
   ширину самой шапке, на широком окне контент видно, как он уезжает
   мимо её края, и это читается как грязный прямоугольник под ней. */
/* ⚠️ У шапки НЕТ плашки: сама полоса прозрачна, на листе лежат только
   капсулы — логотип, карта, разделы, служебное. Заливка была бы лишним
   слоем поверх фона (заказчик: «без этой плашки сзади»). */
.hdr2{
  position:sticky; top:0; z-index:30;
  padding:12px 26px; background-color:transparent; border-radius:0;
}
/* Содержимое шапки должно лежать на ТОЙ ЖЕ сетке, что и .applayout,
   иначе логотип не встаёт над боковым меню: шапка была 1508px без отступа,
   раскладка — 1880px с отступом 26px, и левые края расходились. */
.hdr2in{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  /* 1880 общей сетки минус боковые отступы .hdr2 — содержимое шапки стоит
     ровно над боковым меню */
  max-width:1828px; margin:0 auto; padding:0;
  background:transparent;
}
/* 8 вкладок не влезают в одну строку с логотипом и правыми кнопками —
   выносим их отдельной прокручиваемой строкой (тот же приём, что в v1).
   Логотип и кнопки на первой строке, вкладки на второй. */
/* Логотип центрируется по колонке бокового меню: колонка той же ширины,
   что сайдбар (226px), пилюля внутри по центру. */
.hdr2in .lgcol{order:1; flex:0 0 226px; display:flex; justify-content:center}
.hdr2in .lg{order:1}
.hdr2in .sp{order:2}
.hdr2in .act{order:2}
.hdr2 nav{order:3; flex:1 0 100%; margin-top:2px}
/* лист раздела «Карта» держит свои отступы сам — иначе к 26px шапки
   прибавляются 20px от общего .main и колонки уезжают из-под шапки */
body.mapchart .main{padding:0; max-width:1560px}

/* ===== БОКОВОЕ МЕНЮ ===== */
body.mapskin .applayout{display:flex; align-items:flex-start; gap:22px;
  max-width:1880px; margin:0 auto; padding:0 26px}
body.mapskin .sidebar{flex:0 0 226px; position:sticky; top:70px; align-self:flex-start;
  max-height:calc(100vh - 84px); overflow-y:auto}
body.mapskin .sbin{display:flex; flex-direction:column; gap:2px;
  background:var(--mp-card); border-radius:var(--mp-rp); box-shadow:var(--mp-sh); padding:14px 12px 18px}
body.mapskin .sbgrp{font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mp-mut); padding:14px 12px 6px}
body.mapskin .sbtab{display:flex; align-items:center; gap:11px; width:100%; border:0;
  background:transparent; color:var(--mp-body); font:inherit; font-weight:500; font-size:14.5px;
  padding:8px 12px; border-radius:var(--mp-rs); cursor:pointer; text-align:left; transition:background .12s}
body.mapskin .sbtab:hover{background:var(--mp-card2)}
body.mapskin .sbtab.on{background:var(--mp-acc); color:#fff; font-weight:600}
body.mapskin .sbico{flex:0 0 auto; width:22px; height:22px; color:var(--mp-mut); display:inline-flex}
body.mapskin .sbico svg{width:21px; height:21px; display:block}
body.mapskin .sbtab.on .sbico{color:#fff}
/* объёмная иконка дизайн-системы — живёт в ПЛИТКАХ контента, не в меню;
   размер задаёт контейнер, картинка тянется на всю его площадь */
body.mapskin .dsico{width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 4px 10px rgba(13,16,20,.18))}
body.mapskin .appcol{flex:1 1 auto; min-width:0}
body.mapskin .appcol .main{max-width:none; margin:0; padding:6px 0 44px}
body.mapskin.mapchart .appcol .main{padding:0}
/* длинные текстовые блоки не растягиваем на всю ширину — читаемость строки */
body.mapskin .dos > .note, body.mapskin .doshead .dossub, body.mapskin .actwhy{max-width:940px}

/* Средние экраны: меню сворачивается в иконки */
@media (max-width:1160px){
  body.mapskin .applayout{gap:16px; padding:0 18px}
  .hdr2in{padding:0 18px}
  .hdr2in .lgcol{flex:0 0 auto; justify-content:flex-start}
  body.mapskin .sidebar{flex:0 0 66px}
  body.mapskin .sbin{padding:9px 9px 14px; align-items:center}
  body.mapskin .sbgrp{display:none}
  body.mapskin .sbtab{width:46px; height:46px; padding:0; justify-content:center; gap:0}
  body.mapskin .sbtx{display:none}
}
/* Мобильные: боковое меню прячем, снизу — таб-бар (mobnav) */
@media (max-width:720px){
  body.mapskin .applayout{padding:0 12px}
  .hdr2in{padding:0 12px}
  .hdr2in .lgcol{flex:0 0 auto; justify-content:flex-start}
  body.mapskin .sidebar{display:none}
  body.mapskin .appcol .main{padding-bottom:86px}
}

/* ===== МОБИЛЬНОЕ НИЖНЕЕ МЕНЮ ===== */
body.mapskin .mobwrap{display:none}
@media (max-width:720px){ body.mapskin .mobwrap{display:block} }
body.mapskin .mobnav{position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; background:var(--mp-card); border-top:1px solid var(--mp-line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
body.mapskin .mobtab{flex:1 1 0; min-width:0; border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 2px;
  color:var(--mp-mut); font:inherit}
body.mapskin .mobtab.on{color:var(--mp-accfg)}
body.mapskin .mobico{width:23px; height:23px; display:inline-flex}
body.mapskin .mobico svg{width:23px; height:23px}
body.mapskin .mobtx{font-size:10px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
body.mapskin .mobsheet{position:fixed; inset:0; z-index:41; background:rgba(0,0,0,.4);
  display:none; align-items:flex-end}
body.mapskin .mobsheet.open{display:flex}
body.mapskin .mobsheetin{width:100%; max-height:80vh; overflow-y:auto; background:var(--mp-bg);
  border-radius:24px 24px 0 0; padding:18px 16px calc(84px + env(safe-area-inset-bottom))}
body.mapskin .mobsh-h{font-size:17px; font-weight:800; color:var(--mp-ink); margin-bottom:8px; text-align:center}
body.mapskin .mobsh-g{font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mp-mut); margin:14px 4px 8px}
body.mapskin .mobsh-row{display:grid; grid-template-columns:1fr 1fr; gap:8px}
body.mapskin .mobsh-t{display:flex; align-items:center; gap:10px; border:0; background:var(--mp-card);
  color:var(--mp-ink); font:inherit; font-weight:600; font-size:14px; padding:13px 15px; border-radius:14px;
  cursor:pointer; text-align:left; box-shadow:var(--mp-sh)}
body.mapskin .mobsh-t.on{background:var(--mp-acc); color:#fff}
body.mapskin .mobsh-t.on .mobico{color:#fff}
body.mapskin .mobsh-t .mobico{color:var(--mp-mut); width:20px; height:20px}
body.mapskin .mobsh-t .mobico svg{width:20px; height:20px}
/* Логотип — СВОЯ капсула, как разделы: шапка белая, поэтому заливка
   на полтона, иначе белое на белом. */
.hdr2 .lg{
  display:flex; align-items:center; gap:10px;
  background:var(--mp-card2); border-radius:999px; padding:9px 18px 9px 12px;
  flex:0 0 auto;
}
.hdr2 .lgm{
  width:22px; height:22px; border-radius:7px; flex:0 0 auto;
  background:conic-gradient(from 210deg, var(--mp-acc), #5b616b, var(--mp-d), var(--mp-acc));
}
.hdr2 .lgt{font-weight:800; letter-spacing:.08em; font-size:14px}

.hdr2 nav{
  display:flex; gap:4px; align-items:center;
  background:var(--mp-card); border-radius:999px; padding:5px;
  box-shadow:var(--mp-sh); min-width:0; overflow-x:auto; scrollbar-width:none;
}
.hdr2 nav::-webkit-scrollbar{display:none}
/* Вкладок стало 8 («Семья») — фиксированные паддинги обрезали последнюю
   («Комп…», заказчик поймал). clamp сжимает подушки до того, как капсула
   начнёт резать кнопки прокруткой. */
.hdr2 nav button{
  flex:0 0 auto; border:0; background:transparent; color:var(--mp-mut);
  padding:8px 15px; border-radius:999px; font-weight:600;
  font-size:14px; white-space:nowrap; transition:background .15s, color .15s;
}
.hdr2 nav button:hover{background:var(--mp-card2); color:var(--mp-ink)}
.hdr2 nav button.on{background:var(--mp-chip); color:#fff}

.hdr2 .sp{flex:1 1 auto}
.hdr2 .act{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.mpsel{
  appearance:none; border:0; background:var(--mp-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%236d7684' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center;
  border-radius:999px; padding:0 34px 0 16px; height:40px;
  font-weight:600; font-size:14px; color:var(--mp-ink); box-shadow:var(--mp-sh);
  max-width:190px; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;
}
.mpb{
  height:40px; border:0; border-radius:999px; padding:0 clamp(14px, 1vw, 20px);
  font-weight:600; font-size:14px; background:var(--mp-acc); color:#fff;
  box-shadow:var(--mp-shacc);            /* плоско, без свечения */
  transition:background .15s, transform .12s, box-shadow .15s;
}
.mpb:hover{background:var(--mp-acc2)}
.mpb:active{transform:translateY(1px)}
.mpb.ghost{background:var(--mp-card); color:var(--mp-ink); box-shadow:var(--mp-sh)}
.mpb.ghost:hover{background:var(--mp-card2)}
.mpav{
  width:40px; height:40px; border-radius:999px; border:0; flex:0 0 auto;
  background:var(--mp-dark); color:#fff; font-weight:700; font-size:13px;
  box-shadow:var(--mp-sh); display:grid; place-items:center; letter-spacing:.02em;
}
.mpav.anon{background:var(--mp-card); color:var(--mp-mut)}

/* ---------------- раскладка раздела ---------------- */
.mapv{padding:0 26px 40px}
.mapg{
  display:grid; gap:16px;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  /* stretch, а не start: низ карточки со схемой обязан совпасть с низом
     правой колонки. Лишнюю высоту забирает .mpstage (рейки тянутся во всю
     высоту, как на схеме), а подвал с легендой и переключателем прижат
     к самому низу через margin-top:auto. */
  align-items:stretch;
}
@media (max-width:1180px){ .mapg{grid-template-columns:minmax(0,1fr)} }

/* ---- левая карточка: бодиграф между двумя рейками ---- */
.mpchart{
  background:var(--mp-card); border-radius:var(--mp-r); box-shadow:var(--mp-sh);
  padding:18px 18px 14px;
  display:flex; flex-direction:column; min-height:0;
}
.mpchart .ctop{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:0 4px 12px; gap:12px;
}
.mpside{
  border:0; background:transparent; padding:2px 8px; border-radius:8px;
  font-weight:700; font-size:13px; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:7px;
}
.mpside:hover{background:var(--mp-card2)}
.mpside i{width:9px; height:9px; border-radius:3px; display:inline-block}
.mpside.p i{background:var(--mp-p)} .mpside.d i{background:var(--mp-d)}
.mpside.p{color:var(--mp-p)} .mpside.d{color:var(--mp-d)}
.mpwho{
  font-size:12px; color:var(--mp-mut); font-weight:600; text-align:center;
  flex:1 1 auto; min-width:0;
}

.mpstage{display:flex; gap:14px; align-items:stretch; flex:1 1 auto; min-height:0}
/* Рейка тянется на всю высоту карточки, как на схеме, а 13 планет
   раскладываются по ней равномерно — привязывать их к вертикали нечем. */
.mprail{
  flex:0 0 92px; background:var(--mp-dark); border-radius:20px;
  padding:14px 8px; display:flex; flex-direction:column; justify-content:space-evenly;
}
.mprow{
  display:grid; grid-template-columns:20px 1fr; align-items:center; gap:7px;
  border:0; background:transparent; color:#e7e9ee; text-align:left;
  padding:5px 7px; border-radius:11px; transition:background .12s;
}
.mprow:hover{background:rgba(255,255,255,.09)}
.mprow .gl{font-size:14px; opacity:.75; text-align:center; line-height:1}
.mprow .gv{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13px; font-weight:500;
  letter-spacing:-.02em; white-space:nowrap;
}
/* ⚠️ Розовый #ff8a90 подбирался под ЧЁРНУЮ рейку; на светлой он выцветает
   (контраст 2.1). Берём канонический красный «Дизайна». */
.mprail.d .mprow .gv{color:var(--mp-d)}
.mprail.d .mprow .gl{color:var(--mp-d)}
/* Ширину задаём, высоту считает сам SVG по viewBox — иначе при заданной
   высоте preserveAspectRatio оставляет пустые поля по бокам и рейки
   перестают стоять вплотную к схеме. */
.mpsvg{flex:1 1 auto; min-width:0; align-self:center}
/* max-height из styles.css (calc(100vh - 210px)) здесь ВРЕДЕН: он режет
   высоту, preserveAspectRatio добавляет пустые поля по бокам, и рейки
   отходят от схемы на 25px. Размер задаёт только ширина. */
.mpsvg .bodygraph{display:block; width:100%; height:auto; max-height:none}
/* 11px из styles.css при масштабе 0.89 давали 9.8px на экране — цифры
   ворот на грани читаемости. 12 и не-моно кегль сидит плотнее. */
.mpsvg .gnum{font:600 12px Onest,sans-serif}

/* подвал карточки со схемой: прижат к низу, чтобы низ совпал с правой колонкой */
.mpfoot{margin-top:auto; padding-top:14px}
.mplegend{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  padding:0 4px 12px; font-size:12px; color:var(--mp-mut); font-weight:600;
}
.mplegend i{width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:6px}
.mplegend i.p{background:var(--mp-p)} .mplegend i.d{background:var(--mp-d)}
.mplegend i.b{background:linear-gradient(135deg,var(--mp-p) 0 50%,var(--mp-d) 50% 100%)}
.mplegend i.o{background:#fff; box-shadow:inset 0 0 0 1.5px #c3c9d3}

/* ---- переключатель «кликать не своё» ---- */
.mpsw{
  display:flex; align-items:center; gap:12px;
  background:var(--mp-card2); border-radius:18px; padding:12px 14px;
}
.mpsw .swt{flex:1 1 auto; min-width:0}
.mpsw .swt b{display:block; font-size:13px; font-weight:700; line-height:1.25}
.mpsw .swt i{
  display:block; font-style:normal; font-size:11.5px; color:var(--mp-mut);
  font-weight:600; margin-top:2px; line-height:1.35;
}
.mpsw button{
  flex:0 0 auto; width:46px; height:27px; border:0; border-radius:999px;
  background:#c9ced8; position:relative; transition:background .18s;
}
.mpsw button:after{
  content:''; position:absolute; top:3px; left:3px; width:21px; height:21px;
  border-radius:999px; background:var(--mp-card); transition:transform .18s;
}
.mpsw button[aria-pressed="true"]{background:var(--mp-acc)}
.mpsw button[aria-pressed="true"]:after{transform:translateX(19px)}
.mpsw2{margin-top:10px}

/* ---- правая колонка ---- */
.mpright{display:grid; gap:16px; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  align-content:start}
@media (max-width:640px){ .mpright{grid-template-columns:minmax(0,1fr)} }

.mpc{
  background:var(--mp-card); border-radius:var(--mp-r); box-shadow:var(--mp-sh);
  padding:20px 22px; text-align:left; border:0; color:inherit; font:inherit;
  display:block; width:100%; position:relative;
  transition:transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .14s;
}
button.mpc{cursor:pointer}
/* Подъём при наведении делает сдвиг и фон, а не тень: тень с большим
   размытием на прокрутке пачкает лист. */
button.mpc:hover{transform:translateY(-2px); background:var(--mp-card2)}
button.mpc:after{
  content:'↗'; position:absolute; top:16px; right:18px;
  color:var(--mp-mut); font-size:14px; opacity:0; transition:opacity .14s;
}
button.mpc:hover:after{opacity:1}
.mpc .lab{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mp-mut); font-weight:700; margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.mpc .big{font-size:34px; line-height:1.05; font-weight:800; letter-spacing:-.02em}
.mpc .mid{font-size:20px; font-weight:700; line-height:1.2}
/* Длинные слова («Манифестирующий») не влезали в карточку и обрезались.
   У html стоит lang="ru", поэтому браузер расставляет переносы по-русски.
   overflow-wrap — страховка на случай, если словарь переносов не сработает. */
.mpc .big, .mpc .mid, body.mapskin .actbig, body.mapskin .nuname,
body.mapskin .doshead h1, .profhero h1{
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; word-break:normal;
}
.mpc .txt{margin-top:10px; font-size:14px; color:var(--mp-body); line-height:1.5}
.mpc .txt b{font-weight:700; color:var(--mp-ink)}

.mptype{grid-column:1; grid-row:1 / span 4; display:flex; flex-direction:column}
.mptype .big{font-size:40px}
.mptype .strat{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--mp-line);
}
.mptype .strat .lab{margin-bottom:6px}
@media (max-width:640px){ .mptype{grid-column:auto; grid-row:auto} }

.mpprof .row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.mpprof .big{font-size:42px}
.mpprof .pn{font-size:15px; font-weight:700; color:var(--mp-mut)}

.mpcross{grid-column:1 / -1}
.mpcross .xg{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.mpxg{
  border:0; background:var(--mp-card2); border-radius:14px; padding:9px 13px;
  font-size:13px; font-weight:700; display:flex; gap:8px; align-items:baseline;
  transition:background .14s;
}
.mpxg:hover{background:var(--mp-accsoft); color:var(--mp-acc2)}
.mpxg span{font-weight:600; color:var(--mp-mut); font-size:12px}
.mpxg:hover span{color:var(--mp-acc2)}

.mpcen{grid-column:1 / -1}
.mpcen h3{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mp-mut); font-weight:700; margin:2px 0 12px;
}
.mpcg{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px}
@media (max-width:640px){ .mpcg{grid-template-columns:repeat(3,minmax(0,1fr))} }
.mpct{
  border:0; border-radius:18px; padding:13px 12px 12px; text-align:left;
  background:var(--mp-card2); transition:transform .14s, background .14s;
  display:flex; flex-direction:column; gap:8px; min-height:84px;
}
.mpct:hover{transform:translateY(-2px)}
.mpct .cn{font-size:13px; font-weight:700; line-height:1.2; overflow-wrap:anywhere}
.mpct .cs{font-size:11px; font-weight:600; color:var(--mp-mut)}
.mpct .cdot{width:10px; height:10px; border-radius:999px; background:#cdd3dc; margin-top:auto}
.mpct.on{background:var(--mp-chip); color:#fff}
.mpct.on .cs{color:rgba(255,255,255,.6)}
.mpct.on .cdot{background:#5ee38b}
.mpct.on:hover{background:#0c0e13}

/* ---------------- попап ---------------- */
.mpov{
  position:fixed; inset:0; z-index:80; background:rgba(12,15,22,.45);
  backdrop-filter:blur(3px); display:grid; place-items:center; padding:32px 20px;
  animation:mpfade .16s ease;
}
@keyframes mpfade{from{opacity:0}to{opacity:1}}
.mpmodal{
  width:min(1020px,100%); max-height:100%; background:var(--mp-bg);
  border-radius:var(--mp-rp); overflow:hidden; display:flex; flex-direction:column;
  /* модалка — position:fixed поверх затемнения, перерисовывается целиком,
     поэтому shadow-2 из системы тут безопасна (на sticky-шапку её НЕ ставим:
     широкое размытие при прокрутке оставляло грязь — уже ловили) */
  box-shadow:var(--mp-sh2);
  animation:mprise .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes mprise{from{transform:translateY(14px) scale(.985); opacity:0}to{transform:none; opacity:1}}
/* Шапка попапа — тот же фон, что и тело: раньше белая шапка над серым
   телом давала шов «верх/низ отличается». Теперь попап — единый холст
   с плавающими карточками. */
.mphead{
  padding:24px 28px 10px; background:transparent;
  display:flex; align-items:flex-start; gap:16px;
}
.mphead .ht{flex:1 1 auto; min-width:0}
.mptag{
  display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--mp-accfg); background:var(--mp-accsoft);
  padding:4px 10px; border-radius:999px; margin-bottom:9px;
}
.mphead h2{margin:0; font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.15}
.mphead .hs{margin:7px 0 0; font-size:13px; color:var(--mp-mut); font-weight:600}
.mpx, .mpback{
  width:38px; height:38px; border-radius:999px; border:0; flex:0 0 auto;
  background:var(--mp-card); color:var(--mp-ink); font-size:16px;
  box-shadow:var(--mp-sh); display:grid; place-items:center; transition:background .14s;
}
.mpx:hover, .mpback:hover{background:var(--mp-card2)}
.mpbody{padding:16px 28px 30px; overflow:auto}

/* бенто внутри попапа */
.mpbento{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px}
.mpb2{grid-column:span 3} .mpb3{grid-column:span 2}
.mpbw{grid-column:1 / -1}
/* !important — потому что итоговый span ставится инлайном из balance() */
@media (max-width:760px){ .mpbento{grid-template-columns:minmax(0,1fr)}
  .mpbento > *{grid-column:auto !important} }
.mpblk{
  background:var(--mp-card); border-radius:24px; padding:20px 22px;
}
/* Заголовок блока как на рефе: чёрный, обычным регистром, рядом тонкая
   иконка в кружке. Никаких цветных капслоков. */
.mpblk > .l{
  display:flex; align-items:center; gap:12px;
  font-size:15px; color:var(--mp-ink); font-weight:700; margin-bottom:12px;
}
.mpblk > .l .lt{min-width:0}
/* заголовок блока на лаймовой/барвинковой сцене — тоже тёмный (перебивает
   .mpblk > .l{color:var(--mp-ink)}, который в тёмной теме светлый) */
.mpblk.lime > .l,.mpblk.peri > .l,.mpblk.good > .l,.mpblk.acc > .l{color:#161a24}
.icw{
  width:38px; height:38px; border-radius:999px; flex:0 0 auto;
  background:var(--mp-card2); color:var(--mp-ink);
  display:grid; place-items:center;
}


/* насыщенные плашки-сцены с референса */
.mpblk.lime{background:var(--mp-lime)}
.mpblk.peri{background:var(--mp-peri)}
/* лаймовые/барвинковые «сцены» — константный цвет фона, поэтому текст на них
   ВСЕГДА тёмный (в т.ч. в тёмной теме, где --mp-ink светлый). Базовый цвет
   блока = тёмный; светлые исключения (чипы) переопределяются ниже. */
.mpblk.lime,.mpblk.peri,.mpblk.good,.mpblk.acc{color:#161a24}
.mpblk.lime p,.mpblk.peri p,.mpblk.good p,.mpblk.acc p,
.mpblk.lime .k,.mpblk.peri .k,.mpblk.good .k,.mpblk.acc .k{color:#161a24}
/* кружок иконки на цветной сцене — белый, глиф ТЁМНЫЙ в обеих темах
   (иначе в тёмной теме глиф наследует светлый --mp-ink и пропадает на белом) */
.mpblk.lime .icw,.mpblk.peri .icw,.mpblk.good .icw,.mpblk.acc .icw{background:#fff; color:#161a24}
.mpblk.lime .mpchip,.mpblk.peri .mpchip,.mpblk.good .mpchip,.mpblk.acc .mpchip{
  background:rgba(255,255,255,.6); color:#161a24}
.mpblk.lime .mpseg .sg,.mpblk.peri .mpseg .sg,
.mpblk.good .mpseg .sg,.mpblk.acc .mpseg .sg{background:rgba(255,255,255,.55); color:#4a5266}
.mpblk.lime .mpseg .sg.on,.mpblk.peri .mpseg .sg.on,
.mpblk.good .mpseg .sg.on,.mpblk.acc .mpseg .sg.on{background:#12151c; color:#fff}
.mpblk.lime .scl,.mpblk.peri .scl,.mpblk.good .scl,.mpblk.acc .scl{color:#3c4356}

/* ---- графики и шкалы ---- */
.mpviz{display:flex; justify-content:center; padding:6px 0 2px}
.mpwheel .wn,.mpdonut .dn{font:800 24px Onest,sans-serif; fill:var(--mp-ink)}
.mpwheel .ws,.mpdonut .ds{font:600 10px Onest,sans-serif; fill:var(--mp-mut)}
.mpgauge{max-width:280px}
.mpgauge .gn{font:800 32px Onest,sans-serif; fill:var(--mp-ink)}
.mpgauge .gs{font:600 11px Onest,sans-serif; fill:var(--mp-mut)}
.mpgauge .ge{font:600 10px 'JetBrains Mono',monospace; fill:var(--mp-mut)}

.mpscale{margin:10px 0 0}
.mpscale + .mpscale{margin-top:9px}
.mpscale .scl{font-size:11px; color:var(--mp-mut); font-weight:600; margin-bottom:5px}
.mpseg{display:flex; gap:5px}
.mpseg .sg{
  flex:1; text-align:center; font-size:12px; font-weight:700; padding:7px 0;
  border-radius:9px; background:var(--mp-track); color:#9aa3b2;
}
.mpseg .sg.on{background:var(--mp-chip); color:#fff}

.mpbars{display:flex; flex-direction:column; gap:11px; margin-top:2px}
.mpbar{display:grid; grid-template-columns:78px 1fr auto; align-items:center; gap:11px}
.mpbar .bl{font-size:12.5px; font-weight:600; color:var(--mp-mut)}
.mpbar .bt{height:10px; background:var(--mp-track); border-radius:99px; overflow:hidden}
.mpbar .bf{display:block; height:100%; background:var(--mp-acc); border-radius:99px}
.mpbar .bv{font-size:12.5px; font-weight:700; font-family:'JetBrains Mono',monospace}

.mpstat{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  border:0; background:var(--mp-card); border-radius:16px; padding:11px 14px;
  transition:background .14s;
}
.mpstat:not(.flat){cursor:pointer}
.mpstat:not(.flat):hover{background:var(--mp-card2)}
.mpstat .st{flex:1 1 auto; min-width:0}
.mpstat .st b{display:block; font-size:14px; font-weight:700}
.mpstat .st i{display:block; font-style:normal; font-size:12px; color:var(--mp-mut); font-weight:600}
.mpstat .sv{font-size:13px; font-weight:700; font-family:'JetBrains Mono',monospace; color:var(--mp-mut)}
.mpblk p{margin:0 0 9px; font-size:14px; line-height:1.55; color:var(--mp-body)}
.mpblk p:last-child{margin-bottom:0}
.mpblk .k{font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.1}
.mpblk.dark{background:var(--mp-dark); color:#eceef2}
.mpblk.dark > .l{color:#fff}
.mpblk.dark p{color:#c9cdd6}
.mpblk.dark .icw{background:var(--mp-lime); color:#12151c}
/* сцены референса: барвинок и лайм; цвет даётся карточкой, не иконкой */
.mpblk.acc{background:var(--mp-peri)}
.mpblk.good{background:var(--mp-lime)}
/* quiet, а не warn: в styles.css уже есть .warn{color:#a15c00} — он красил
   весь блок ловушки в коричневый (заказчик поймал). Классы делят одно
   пространство имён, перед вводом нового — grep по styles.css. */
.mpblk.quiet{background:var(--mp-card2)}
.mpblk.quiet .icw{background:var(--mp-card)}
.mpblk.quiet .mpchip{background:#fff}
.mpblk.quiet .mpseg .sg{background:#fff}

.mpchips{display:flex; flex-wrap:wrap; gap:7px; margin-top:2px}
.mpchip{
  border:0; background:var(--mp-card2); border-radius:11px; padding:7px 12px;
  font-size:13px; font-weight:600; transition:background .14s, color .14s;
}
.mpchip:hover{background:var(--mp-accsoft); color:var(--mp-acc2)}
.mpchip.on{background:var(--mp-chip); color:#fff}
/* капсула-действие — чёрная пилюля, как «See All» на референсе:
   светлая капсула на сером фоне блока просто исчезала */
.mpchip.act{background:var(--mp-chip); color:#fff; padding:9px 15px}
.mpchip.act:hover{background:var(--mp-acc); color:#fff}
/* внутри тихих и цветных блоков правила вида .mpblk.quiet .mpchip
   специфичнее .mpchip.act и делали пилюлю белой с белым текстом —
   переопределяем явно для каждого фона */
.mpblk.quiet .mpchip.act, .mpblk.lime .mpchip.act, .mpblk.peri .mpchip.act,
.mpblk.good .mpchip.act, .mpblk.acc .mpchip.act{background:var(--mp-chip); color:#fff}
.mpblk.quiet .mpchip.act:hover, .mpblk.lime .mpchip.act:hover,
.mpblk.peri .mpchip.act:hover, .mpblk.good .mpchip.act:hover,
.mpblk.acc .mpchip.act:hover{background:var(--mp-acc)}
.mpchip.on:hover{background:var(--mp-acc)}
.mpblk.dark .mpchip{background:rgba(255,255,255,.1); color:#eceef2}
.mpblk.dark .mpchip:hover{background:rgba(255,255,255,.2)}

.mplist{display:flex; flex-direction:column; gap:6px}
.mpli{
  border:0; background:var(--mp-card2); border-radius:15px; padding:12px 15px;
  display:flex; gap:10px; align-items:baseline; text-align:left;
  font-size:13px; transition:background .14s;
}
/* шеврон в конце строки — как в списке приборов на референсе */
.mpli:after{content:'›'; margin-left:auto; color:var(--mp-mut); font-size:15px;
  font-weight:700; align-self:center; padding-left:8px}
.mpli:hover{background:var(--mp-accsoft)}
.mpli b{font-weight:800; flex:0 0 auto; font-family:'JetBrains Mono',monospace}
.mpli span{color:var(--mp-mut); font-weight:600; min-width:0}
.mpli.on{background:var(--mp-chip); color:#fff}
.mpli.on:after{color:rgba(255,255,255,.55)}
.mpli.on span{color:rgba(255,255,255,.65)}
.mpli.on:hover{background:var(--mp-acc)}

/* три частоты */
.mpfr{display:flex; flex-direction:column; gap:8px}
.mpfrb{
  border:0; background:var(--mp-card2); border-radius:14px; padding:11px 14px;
  display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  border-left:4px solid var(--mp-mut); transition:background .14s;
}
.mpfrb:hover{background:var(--mp-card2)}
.mpfrb .lv{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.mpfrb b{flex:1 1 auto; font-size:14px; font-weight:700}
.mpfrb .ar{color:var(--mp-mut); transition:transform .16s}
.mpfrw.open .ar{transform:rotate(180deg)}
.mpfrbody{display:none; padding:10px 14px 4px}
.mpfrw.open .mpfrbody{display:block}
.mpfrbody p{margin:0 0 8px; font-size:14px; line-height:1.55; color:var(--mp-body)}

/* линии ворот */
.mpln{display:flex; flex-direction:column; gap:5px}
.mplnr{
  display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start;
  padding:8px 10px; border-radius:12px; background:var(--mp-card2);
}
.mplnr.on{background:var(--mp-accsoft)}
.mplnr b{font-family:'JetBrains Mono',monospace; font-weight:700; text-align:center}
.mplnr .nm{font-weight:700; margin-right:6px}
.mplnr div{font-size:13px; line-height:1.5; color:var(--mp-body)}

.mpnote{font-size:12px; color:var(--mp-mut); line-height:1.5; margin-top:12px}
.mpkv{display:flex; flex-direction:column; gap:7px}
.mpkv div{display:flex; justify-content:space-between; gap:12px; font-size:13px}
.mpkv div span{color:var(--mp-mut); font-weight:600}
.mpkv div b{font-weight:700; font-family:'JetBrains Mono',monospace}

.mpfam{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px}
.mpfam .fam{
  display:flex; flex-direction:column; gap:1px; background:var(--mp-card2);
  border-radius:13px; padding:9px 14px;
}
.mpfam .fam b{font-size:14px; font-weight:700}
.mpfam .fam i{font-style:normal; font-size:11.5px; color:var(--mp-mut); font-weight:600}

/* ============================================================
   АДАПТЕР НОВОГО СТИЛЯ ДЛЯ СТАРЫХ РАЗДЕЛОВ
   Остальные шесть вкладок рисует прежний код из app.js — здесь их
   компоненты переводятся на язык нового стиля: белые карточки без
   рамок, крупные радиусы, чёрные пилюли, серые ряды.
   ============================================================ */
/* ⚠️ styles.css держит СВОЙ старый синий `--acc:#1b4de4` и десяток голубых
   подложек под него. Перекрашивать шесть старых разделов построчно не нужно —
   достаточно переопределить токен на теле и погасить голубые тинты: они
   становятся нейтрально-серыми, как в новой палитре. */
body.mapskin{--acc:var(--mp-accfg)}
body.mapskin .li.on{background:var(--mp-accsoft); border-color:var(--mp-line)}
body.mapskin .ln.on{background:var(--mp-accsoft); outline-color:var(--mp-line)}
body.mapskin .note.tr,
body.mapskin .btn.acct{background:var(--mp-accsoft); color:var(--mp-ink)}
body.mapskin .role.hot{background:var(--mp-accsoft)}
body.mapskin .role.hot i{background:var(--mp-line); color:var(--mp-ink)}
body.mapskin .slRow.on .slBtn,
body.mapskin .acitem:hover, body.mapskin .acitem.on,
body.mapskin .crhow{background:var(--mp-accsoft)}
body.mapskin .hit.sel{fill:rgba(13,16,20,.10)}
body.mapskin .hit-sphere.sel{fill:rgba(13,16,20,.12)}

body.mapskin .panel{border:0; border-radius:26px; box-shadow:var(--mp-sh); padding:22px}
body.mapskin .btn{
  border:0; background:var(--mp-chip); color:#fff; border-radius:999px;
  padding:10px 18px; font-weight:700;
}
body.mapskin .btn:hover{background:#000}
body.mapskin .btn.big{background:var(--mp-acc); padding:12px 22px}
body.mapskin .btn.big:hover{background:var(--mp-acc2)}
/* ⚠️ Светлая кнопка-призрак жила за счёт тени: без неё белое на белой
   карточке исчезает совсем. Отделяем волосяной границей. */
body.mapskin .btn.ghost{background:var(--mp-card); color:var(--mp-ink); font-weight:600;
  border:0}
body.mapskin .mpb.ghost{border:0}
body.mapskin .btn.ghost:hover{background:var(--mp-card2)}
body.mapskin .li{border:0; background:var(--mp-card2); border-radius:15px; padding:12px 15px}
body.mapskin .li.on{background:var(--mp-accsoft)}
body.mapskin .li:hover{background:var(--mp-card2)}
body.mapskin .pcard,body.mapskin .kcard,body.mapskin .dosmini,
body.mapskin .onebox,body.mapskin .mempty,body.mapskin .mcell{
  border:0; border-radius:20px; background:var(--mp-card2);
}
body.mapskin .pcard.warncard{background:var(--mp-card2)}
body.mapskin .tag{background:var(--mp-card); border:0}
body.mapskin .role{border:0; background:var(--mp-card2); border-radius:14px}
body.mapskin .role.hot{background:var(--mp-peri); color:#161a24}
body.mapskin .role.hot i{background:rgba(255,255,255,.55); color:#28306e}
body.mapskin .dosbar,body.mapskin .mbar,body.mapskin .tbar,body.mapskin .cmpbar{
  border:0; border-radius:18px; background:var(--mp-card2);
}
body.mapskin .mfield input,body.mapskin .mfield select,
body.mapskin .dosbar select,body.mapskin .cmpbar select{
  border:0; border-radius:12px;
}
/* Ловушка/плюс/пример в старых разделах: заказчик отверг цветные плашки
   (красная/зелёная) — теперь редакторский приём: белая карточка, чёрная
   пилюля-ярлык, тонкая вертикальная линейка; плюс — отступом со значком,
   пример — как цитата. Цвета нет вовсе, различие делает форма. */
body.mapskin .trap{
  background:var(--mp-card); border:0; border-radius:20px; box-shadow:var(--mp-sh);
  padding:18px 20px; position:relative; color:var(--mp-ink);
}
body.mapskin .trap:before{
  content:''; position:absolute; left:0; top:16px; bottom:16px; width:3px;
  border-radius:99px; background:var(--mp-chip);
}
body.mapskin .trap .trapH{
  display:inline-block; background:var(--mp-chip); color:#fff; border-radius:999px;
  padding:4px 13px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; margin-bottom:10px;
}
body.mapskin .trap p{color:var(--mp-body)}
body.mapskin .trap .trapEx{
  border-left:2px solid var(--mp-line); padding-left:14px; color:var(--mp-mut);
  font-size:13.5px; margin-top:10px;
}
body.mapskin .plus{
  background:transparent; border:0; border-radius:0; margin:14px 0 0;
  border-left:2px dashed #b9c1cf; padding:2px 0 2px 16px;
}
body.mapskin .plus .plusH, body.mapskin .plus b{
  display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mp-ink); font-weight:800; margin-bottom:6px;
}
body.mapskin .plus .plusH:before, body.mapskin .plus b:before{content:'✦ '}
body.mapskin .plus p{color:var(--mp-body)}
body.mapskin .ex{
  background:transparent; border:0; border-left:2px solid var(--mp-ink);
  border-radius:0; padding:2px 0 2px 16px; margin:12px 0;
}
body.mapskin .ex .exH{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mp-mut); font-weight:800; margin-bottom:4px;
}
body.mapskin .ex p{color:var(--mp-body); font-style:italic}
body.mapskin .detail:not(:empty){border-radius:18px}
/* ⚠️ Выпадающее меню лежит поверх содержимого без затемнения: без тени его
   надо отделять границей, иначе текст под ним просвечивает по смыслу. */
body.mapskin .colmenu{border:0; border-radius:16px; box-shadow:none}
body.mapskin .mrow{border:0; border-radius:16px; box-shadow:var(--mp-sh)}
body.mapskin .sheet{border-radius:26px}
body.mapskin .welcome .btn.big{background:var(--mp-acc)}

/* ---- PNG-иконки (3D наборы заказчика) ---- */
.pngico{
  width:34px; height:34px; object-fit:contain; vertical-align:middle;
  margin-right:10px; flex:0 0 auto;
  filter:drop-shadow(0 2px 3px rgba(16,24,40,.18));
}
body.mapskin .pblock h3{display:flex; align-items:center; font-size:17px;
  text-transform:none; letter-spacing:0; color:var(--mp-ink)}
/* тёмная плашка combo: заголовок светлый (перебивает .pblock h3 выше — иначе
   тёмный текст на тёмном фоне в ОБЕИХ темах) */
body.mapskin .pblock.combo h3{color:rgba(255,255,255,.6)}

/* ---- Профессия: хиро с маяком ---- */
/* Хиро по системе: белая панель r36, padding 44, крупный 3D-объект лежит
   ПОВЕРХ и кадрируется краем блока (overflow:hidden) — не аккуратная
   картинка в колонке, а «выезжающий» объект. */
.profhero{
  background:var(--mp-card); border-radius:var(--mp-rb); box-shadow:var(--mp-sh);
  padding:44px; margin:0 0 20px;
  position:relative; overflow:hidden; display:block;
}
.profhero .phl{position:relative; z-index:1; max-width:640px}
.profhero .phk{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#79818F; margin-bottom:10px;
}
.profhero h1{
  font-size:52px; line-height:1; letter-spacing:-.03em; font-weight:600;
  margin:0 0 16px;
}
.profhero .phlead{font-size:17px; line-height:1.55; max-width:560px; margin:0 0 8px; color:var(--mp-body)}
.profhero .phsub{font-size:14px; color:var(--mp-mut); max-width:560px; margin:0 0 16px}
.profhero .phchips{display:flex; gap:8px; flex-wrap:wrap}
.profhero .phchips span{
  background:var(--mp-card2); border-radius:999px; padding:9px 16px;
  font-size:13px; font-weight:500;
}
.profhero .phchips span:last-child{background:var(--mp-accsoft); color:var(--mp-accfg)}
.profhero .phart{
  position:absolute; right:-30px; top:50%; transform:translateY(-50%) rotate(-6deg);
  width:250px; height:auto; object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(13,16,20,.2));
}
@media (max-width:900px){
  .profhero{padding:32px 28px}
  .profhero h1{font-size:38px}
  .profhero .phart{width:170px; right:-46px; opacity:.55}
}
@media (max-width:760px){
  .profhero{flex-direction:column; align-items:flex-start; padding:26px}
  .profhero h1{font-size:40px}
  .profhero .phart{width:110px; height:110px; align-self:flex-end; margin-top:-30px}
}

/* ---- Профессия: особые карточки, фильтр, роли ---- */
.spx{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:2px 0 6px}
@media (max-width:900px){ .spx{grid-template-columns:minmax(0,1fr)} }
.spxc{border-radius:var(--mp-r); padding:26px; text-align:left; border:0; font:inherit; color:inherit;
  display:flex; flex-direction:column; gap:8px; cursor:pointer;
  position:relative; overflow:hidden; box-shadow:var(--mp-sh);
  transition:transform .14s cubic-bezier(.2,.8,.3,1)}
.spxc > span{position:relative; z-index:1}
.spxc:hover{transform:translateY(-2px)}
/* Правый нижний угол отдан объёмному объекту: блоку задаём высоту, а текст
   ограничиваем по ширине, чтобы строки НЕ уходили под картинку. */
.spxc{min-height:260px}
.spxc .sn{max-width:88%}
.spxc .sd{max-width:60%}
/* декоративный круг светлее фона — приём цветных блоков системы */
.spxc.c1::after,.spxc.c2::after{content:''; position:absolute; right:-40px; top:-60px;
  width:190px; height:190px; border-radius:50%; background:rgba(255,255,255,.3); pointer-events:none}
.spxc.c3::after{content:''; position:absolute; right:-40px; top:-60px;
  width:190px; height:190px; border-radius:50%; background:rgba(255,255,255,.06); pointer-events:none}
.spxc.c1{background:var(--mp-peri)} .spxc.c2{background:var(--mp-lime)}
.spxc.c3{background:var(--mp-dark); color:#eceef2}
/* яркие сцены c1/c2 — тёмный текст в ОБЕИХ темах (фон всегда яркий) */
.spxc.c1, .spxc.c2, .spxc.c1 .st, .spxc.c2 .st, .spxc.c1 .sn, .spxc.c2 .sn{color:#1a1e2a}
.spxc .st{font-size:12px; font-weight:700; letter-spacing:.05em; opacity:.7}
.spxc .sn{font-size:20px; font-weight:800; letter-spacing:-.01em; line-height:1.15}
.spxc .sd{font-size:13.5px; line-height:1.5}
.spxc.c1 .sd,.spxc.c2 .sd{color:#2b3140}
.spxc.c3 .sd{color:#c9cdd6}
.profFil{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 12px}
.profFil button{border:0; background:var(--mp-card2); border-radius:999px; padding:8px 15px;
  font-weight:600; font-size:13px}
.profFil button.on{background:var(--mp-chip); color:#fff}
body.mapskin .role{cursor:pointer}
body.mapskin .role:hover{background:var(--mp-card2)}
body.mapskin .role.hot:hover{background:#a3b2f2}

/* ---- Семья: карточки-разборы на странице ---- */
.famg{align-items:stretch}
.fcard{padding:24px 26px}
.fcard .mid{font-size:24px; margin-bottom:4px}
.fhead{display:flex; gap:18px; align-items:center; margin:14px 0 6px; flex-wrap:wrap}
.fhead .fmini{width:132px; flex:0 0 auto}
.fhead .fmini svg{width:100%; height:auto; display:block}
.fhead .fhx{flex:1 1 260px; min-width:0}
.fhead .fhx .txt{margin:0 0 6px}
.fbody{margin-top:8px}
.fsec{
  border-top:1px solid var(--mp-line); padding:16px 0 2px; margin-top:4px;
}
.fsec:first-child{border-top:0}
.fsh{display:flex; align-items:center; gap:11px; margin-bottom:10px}
.fsh b{font-size:16px; font-weight:800; letter-spacing:-.01em}
.fsec p{margin:0 0 10px; font-size:14.5px; line-height:1.6; color:var(--mp-body)}
.fsec p:last-child{margin-bottom:0}
.fsec p b{color:var(--mp-ink)}
.flist{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.flist li{
  position:relative; padding:11px 14px 11px 40px; border-radius:14px;
  background:var(--mp-card2); font-size:14px; line-height:1.5;
}
.flist li:before{position:absolute; left:14px; top:10px; font-size:15px}
.flist.good li:before{content:'✦'; color:#0f9d63}
.flist.warn li:before{content:'!'; color:#c26; font-weight:800; left:17px}

/* старая ---- Семья ---- ниже (селекты/мини) остаётся */
.archhero{background:var(--mp-card); border-radius:28px; box-shadow:var(--mp-sh);
  padding:32px 36px 26px; margin:0 0 16px}
.archhero .ahk{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mp-mut); margin-bottom:10px}
.archhero h1{font-size:46px; line-height:1; letter-spacing:-.03em; font-weight:800; margin:0 0 14px}
.archhero .phlead{font-size:16px; line-height:1.55; max-width:720px; margin:0}
.archhero .phlead b{font-weight:800}

.archtop{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 16px}
@media (max-width:820px){ .archtop{grid-template-columns:minmax(0,1fr)} }
.archc{border-radius:24px; padding:20px 22px; color:#fff; position:relative;
  background:var(--ac); box-shadow:var(--mp-sh); overflow:hidden}
.archc:before{content:''; position:absolute; right:-30px; top:-30px; width:120px; height:120px;
  border-radius:999px; background:rgba(255,255,255,.16)}
.archrk{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.85}
.archn{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:8px 0 2px}
.archpct{font-size:40px; font-weight:800; line-height:1}
.archpct span{font-size:20px; opacity:.8}
.archc p{margin:10px 0 0; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.92); position:relative}

.archlist{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.archrow{border-radius:16px; background:var(--mp-card2); overflow:hidden}
.archrow.hot{background:var(--mp-card); box-shadow:var(--mp-sh)}
.archbtn{display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent;
  padding:13px 16px; text-align:left; cursor:pointer}
.archi{width:24px; height:24px; border-radius:999px; background:var(--ac); color:#fff;
  font-size:12px; font-weight:800; display:grid; place-items:center; flex:0 0 auto}
.archnm{font-weight:700; font-size:15px; flex:0 0 128px}
.archtrk{flex:1 1 auto; height:10px; background:var(--mp-track); border-radius:99px; overflow:hidden; min-width:60px}
.archfl{display:block; height:100%; background:var(--ac); border-radius:99px}
.archv{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; flex:0 0 auto; width:42px; text-align:right}
.archrow .frArrow{color:var(--mp-mut); transition:transform .16s; flex:0 0 auto}
.archrow.open .frArrow{transform:rotate(180deg)}
.archbody{display:none; padding:0 16px 16px 52px}
.archrow.open .archbody{display:block}
.archdr{font-size:13px; color:var(--mp-mut); font-weight:600; margin:0 0 10px}
.archgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 12px}
@media (max-width:760px){ .archgrid{grid-template-columns:minmax(0,1fr)} }
.archcell{background:var(--mp-card2); border-radius:14px; padding:12px 14px}
.archcell b{display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--mp-mut); margin-bottom:5px}
.archcell p{margin:0; font-size:13.5px; line-height:1.5; color:var(--mp-body)}
.archsrc{margin-top:12px}
.archsrc .srcH{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mp-mut);
  font-weight:700; margin-bottom:8px}
.srcchips{display:flex; flex-wrap:wrap; gap:7px}
.srcchip{border:0; background:var(--mp-card2); border-radius:11px; padding:7px 12px;
  font-size:12.5px; font-weight:600; color:var(--mp-ink)}
.srcchip.gate{cursor:pointer; transition:background .14s}
.srcchip.gate:hover{background:var(--mp-accsoft); color:var(--mp-acc2)}
.srcchip.muted{color:var(--mp-mut); font-weight:500}
.archlow{margin-top:12px; font-size:13.5px; color:var(--mp-mut); font-style:italic}
.archsyn p{font-size:15px; line-height:1.6}

.numhero{background:var(--mp-card); border-radius:28px; box-shadow:var(--mp-sh);
  padding:32px 36px 26px; margin:0 0 16px}
.numhero .ahk{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mp-mut); margin-bottom:10px}
.numhero h1{font-size:44px; line-height:1; letter-spacing:-.03em; font-weight:800; margin:0 0 14px}
.numhero .phlead{font-size:16px; line-height:1.55; max-width:720px; margin:0 0 14px}
.numhero .phchips{display:flex; gap:8px; flex-wrap:wrap}
.numhero .phchips span{background:var(--mp-card2); border-radius:999px; padding:7px 14px;
  font-size:13px; font-weight:600}

.numgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:4px}
@media (max-width:820px){ .numgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.numc{background:var(--mp-card2); border:0; border-radius:20px; padding:16px 18px; text-align:left}
.numc .lab{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mp-mut);
  font-weight:700; margin-bottom:6px}
.numbig{font-size:44px; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--mp-accfg)}
.numn{font-size:15px; font-weight:800; margin:4px 0 6px}
.numc p{margin:0; font-size:13px; line-height:1.5; color:var(--mp-body)}

.psq{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:4px}
@media (max-width:640px){ .psq{grid-template-columns:minmax(0,1fr)} }
.pcell{background:var(--mp-card2); border-radius:18px; padding:15px 16px; opacity:.7}
.pcell.on{opacity:1; background:var(--mp-card); box-shadow:var(--mp-sh)}
.pcn{font-size:26px; font-weight:800; letter-spacing:.06em; color:var(--mp-accfg); min-height:30px;
  font-family:'JetBrains Mono',monospace}
.pcell:not(.on) .pcn{color:#c3c9d3}
.pct{font-size:14px; font-weight:800; margin:2px 0 5px}
.pcell p{margin:0; font-size:12.5px; line-height:1.45; color:var(--mp-body)}

.chklist{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.chkrow{border-radius:16px; background:var(--mp-card2); overflow:hidden}
.chkbtn{display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent;
  padding:13px 16px; text-align:left; cursor:pointer}
.chkdot{width:16px; height:16px; border-radius:999px; background:var(--cc); flex:0 0 auto}
.chknm{font-weight:700; font-size:15px; flex:0 0 190px}
.chknm i{font-style:normal; font-weight:600; font-size:12px; color:var(--mp-mut); margin-left:6px}
.chktrk{flex:1 1 auto; height:10px; background:var(--mp-track); border-radius:99px; overflow:hidden; min-width:50px}
.chkfl{display:block; height:100%; background:var(--cc); border-radius:99px}
.chkv{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; width:24px; text-align:right}
.chkrow .frArrow{color:var(--mp-mut); transition:transform .16s}
.chkrow.open .frArrow{transform:rotate(180deg)}
.chkbody{display:none; padding:0 16px 16px 44px}
.chkrow.open .chkbody{display:block}
@media (max-width:640px){ .chknm{flex-basis:120px; font-size:14px} .chknm i{display:none} }

.shughero{background:var(--mp-card); border-radius:28px; box-shadow:var(--mp-sh);
  padding:32px 36px 26px; margin:0 0 16px}
.shughero .ahk{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mp-mut); margin-bottom:10px}
.shughero h1{font-size:44px; line-height:1; letter-spacing:-.03em; font-weight:800; margin:0 0 14px}
.shughero .phlead{font-size:16px; line-height:1.55; max-width:730px; margin:0}
.shughero .phlead b{font-weight:800}

.shugstep{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--mp-line)}
.shugstep:first-of-type{border-top:0}
.shugstep .ssn{width:24px; height:24px; border-radius:999px; background:var(--ac); color:#fff;
  font-size:12px; font-weight:800; display:grid; place-items:center; flex:0 0 auto; margin-top:2px}
.shugstep div{font-size:14.5px; line-height:1.55}

.castegrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:4px}
@media (max-width:900px){ .castegrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .castegrid{grid-template-columns:minmax(0,1fr)} }
.castec{background:var(--mp-card2); border-radius:20px; padding:16px 16px 14px}
.casteh{font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--ac); margin-bottom:10px;
  padding-bottom:8px; border-bottom:2px solid var(--ac)}
.castea{font-size:14px; font-weight:600; padding:8px 12px; border-radius:11px; background:var(--mp-card);
  margin-bottom:6px; color:var(--mp-mut)}
.castea.on{background:var(--ac); color:#fff; font-weight:800; box-shadow:var(--mp-sh)}
.casterule{margin:10px 0 0; font-size:11.5px; line-height:1.45; color:var(--mp-mut)}

.leghero{border-radius:28px; box-shadow:var(--mp-sh); margin:0 0 16px;
  padding:34px 36px 28px; color:#fff;
  background:linear-gradient(135deg,#191c23 0%,#2b2450 55%,#0b47cf 100%)}
.leghero .ahk{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-bottom:10px}
.leghero h1{font-size:46px; line-height:1; letter-spacing:-.03em; font-weight:800; margin:0 0 14px}
.leghero .phlead{font-size:16px; line-height:1.55; max-width:730px; margin:0; color:rgba(255,255,255,.92)}
.leghero .phlead b{color:#fff; font-weight:800}

.legagree p{font-size:15px; line-height:1.55}
body.mapskin .legend .pblock p b{color:var(--mp-ink)}
.legchips{display:flex; flex-wrap:wrap; gap:8px}
.legchip{border:0; background:var(--mp-chip); color:#fff; border-radius:999px; padding:9px 16px;
  font-weight:700; font-size:13.5px; cursor:pointer; transition:background .14s}
.legchip:hover{background:var(--mp-acc)}

/* ---- Семья ---- */
.famg{display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
@media (max-width:1100px){ .famg{grid-template-columns:minmax(0,1fr)} }
.famw{grid-column:1 / -1}
.famset{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.famset select{
  appearance:none; border:0; background:var(--mp-card2); border-radius:999px;
  padding:9px 32px 9px 15px; font-weight:600; font-size:14px; color:var(--mp-ink);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%236d7684' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; cursor:pointer;
}
.fmini{width:120px; flex:0 0 auto}
.fmini svg{width:100%; height:auto; display:block}
.fpair{display:flex; gap:16px; align-items:flex-start}
.fpair .ft{flex:1 1 auto; min-width:0}
.fkv{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 2px}
.fkv span{background:var(--mp-card); border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:700}
.fkv span i{font-style:normal; color:var(--mp-mut); font-weight:600}

/* ============================================================
   УЗКИЕ ЭКРАНЫ — держать В КОНЦЕ ФАЙЛА.
   Специфичность у этих правил такая же, как у базовых
   (.mpright, .mptype), поэтому при равном весе выигрывает
   последний в файле. Стоя выше, весь блок молча не работал.
   ============================================================ */
@media (max-width:1380px){
  /* Схема мельчает, а по ней надо попадать в короткие каналы
     (23-43, 25-51 — зона клика 13–18px). Отдаём ей место,
     поджимая рейки планет и зазоры. */
  .mprail{flex-basis:74px; padding:12px 5px}
  .mprow{grid-template-columns:16px 1fr; gap:5px; padding:4px}
  .mprow .gv{font-size:12px}
  .mpstage{gap:10px}
  .mpchart{padding:16px 14px 12px}
  /* Две колонки справа дают карточки по 240px — текст в них рвётся
     по слогам. Одна колонка длиннее, зато читается. */
  .mpright{grid-template-columns:minmax(0,1fr)}
  .mptype{grid-column:auto; grid-row:auto}
  .mptype .strat{margin-top:18px}
  .mpc .big{font-size:30px}
  .mptype .big,.mpprof .big{font-size:34px}
  /* Одноколоночная правая часть намного выше карточки со схемой — тянуть
     схему до её низа бессмысленно, рейки растянулись бы на 1300px.
     Идеальное совпадение низа держим только на широких экранах. */
  .mapg{align-items:start}
}

button.castea{border:0; width:100%; text-align:left; cursor:pointer; font:inherit; transition:transform .12s, background .12s}
button.castea:hover{transform:translateX(2px)}
.shudetail{margin-top:14px; border-left:4px solid var(--ac); padding:4px 0 4px 16px}
.shudetail .sdh{font-size:20px; font-weight:800; color:var(--ac); margin-bottom:10px}

/* ---- калькулятор чакр (отдельный раздел) ---- */
.chakhero{background:var(--mp-card); border-radius:28px; box-shadow:var(--mp-sh);
  padding:32px 36px 26px; margin:0 0 16px}
.chakhero .ahk{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mp-mut); margin-bottom:10px}
.chakhero h1{font-size:44px; line-height:1; letter-spacing:-.03em; font-weight:800; margin:0 0 14px}
.chakhero .phlead{font-size:16px; line-height:1.55; max-width:720px; margin:0 0 12px}
.chakhero .phchips{display:flex; gap:8px; flex-wrap:wrap}
.chakhero .phchips span{background:var(--mp-card2); border-radius:999px; padding:7px 14px;
  font-size:13px; font-weight:600}
.chaklist{display:flex; flex-direction:column; gap:12px}
.chakc{background:var(--mp-card); border-radius:22px; box-shadow:var(--mp-sh); padding:18px 22px;
  display:grid; grid-template-columns:56px 1fr; gap:16px; align-items:center; border-left:6px solid var(--cc)}
.chakorb{width:56px; height:56px; border-radius:999px; background:var(--cc);
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:17px;
}
.chakmain{min-width:0}
.chaktop{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.chaktop b{font-size:19px; font-weight:800}
.chaktop i{font-style:normal; font-size:12.5px; color:var(--mp-mut); font-weight:600}
.chaktop .chakpc{margin-left:auto; font-family:'JetBrains Mono',monospace; font-weight:800;
  font-size:20px; color:var(--cc)}
.chakbar{height:10px; background:var(--mp-track); border-radius:99px; overflow:hidden; margin-bottom:8px}
.chakbar span{display:block; height:100%; background:var(--cc); border-radius:99px}
.chakmain p{margin:0; font-size:14px; line-height:1.55; color:var(--mp-body)}
.chakstate{margin-top:6px; font-size:13px; font-weight:600}
.chakstate.hi{color:#0f9d63} .chakstate.lo{color:#c26}
@media (max-width:560px){ .chakc{grid-template-columns:1fr} .chakorb{display:none} }

.shuarch{border-left:5px solid var(--ac)}
body.mapskin .plus .exq{border-left:2px dashed #b9c1cf; padding-left:14px; color:#3a6b4f;
  font-size:13.5px; font-style:italic; margin-top:10px}
.shuprofbox{margin-top:14px}
.shuprofbox .spH{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mp-mut);
  font-weight:700; margin-bottom:9px}
.shuprofs{display:flex; flex-wrap:wrap; gap:7px}
.shuprof{background:var(--mp-chip); color:#fff; border-radius:999px; padding:7px 13px;
  font-size:13px; font-weight:600}
.shudetail .shuprof{background:var(--ac)}

/* ---- Shugay: воздух в разборах архетипов ---- */
.shuarch{padding:22px 26px}
.shuarch h3{margin-bottom:16px}
.shuarch .plus, .shuarch .trap, .shudetail .plus, .shudetail .trap{margin:16px 0}
.shuarch .plus:first-of-type, .shudetail .plus:first-of-type{margin-top:6px}
.shuarch .archgrid, .shudetail .archgrid{margin-top:18px}
.shuarch .shuprofbox, .shudetail .shuprofbox{margin-top:20px; padding-top:18px; border-top:1px solid var(--mp-line)}
.plus p, .trap p{margin-bottom:8px}
.shudetail{padding:8px 0 8px 20px}
.shudetail .sdh{margin-bottom:14px}

/* комбинированная профессия */
/* прозрачные контролы без рамки: короб не виден, но на ховере/фокусе
   проявляется — держим их скруглёнными, чтобы нигде не вылезал острый угол */
body.mapskin .pfname,body.mapskin .pfchipin,body.mapskin .chakhd,body.mapskin .mid{border-radius:14px}

/* тёмная плашка-вывод: тот же радиус и ритм отступов, что у остальных блоков —
   она исключена из .pblock:not(.combo), поэтому размеры задаём тут явно */
.combo{background:var(--mp-dark); color:#eceef2; padding:26px 28px;
  border-radius:var(--mp-rb); margin-bottom:16px}
.combo h3{color:rgba(255,255,255,.55)}
.comboT{font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:2px 0 14px}
.combo p{color:#cfd3db; font-size:15px; line-height:1.6; margin:0 0 4px}
.combo .shuprofbox{margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14)}
.combo .spH{color:rgba(255,255,255,.55)}
.combo .shuprof{background:var(--mp-lime); color:#12151c}

/* ---- калькулятор чакр: раскрывающиеся карточки ---- */
.chakhd{display:grid; grid-template-columns:56px 1fr; gap:16px; align-items:center;
  width:100%; border:0; background:transparent; text-align:left; cursor:pointer; padding:0}
.chakc{display:block; padding:16px 20px}
.chaktop .frArrow{color:var(--mp-mut); transition:transform .16s; margin-left:8px}
.chakc.open .frArrow{transform:rotate(180deg)}
.chakbody{display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--mp-line)}
.chakc.open .chakbody{display:block}
.chakbody .plus, .chakbody .trap{margin:14px 0}
.chakbody .plus:first-child{margin-top:0}
.chakbody .shuprofbox{margin-top:18px; padding-top:16px; border-top:1px solid var(--mp-line)}
@media (max-width:560px){ .chakhd{grid-template-columns:1fr} .chakorb{display:none} }

/* ---------------- раздел «Расклад» ---------------- */
.rdhero{border-radius:28px; box-shadow:var(--mp-sh); margin:0 0 16px; padding:34px 36px 26px; color:#fff;
  background:linear-gradient(135deg,#17181d 0%,#3a2b58 55%,#0b47cf 100%)}
.rdhero .ahk{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:10px}
.rdhero h1{font-size:44px; line-height:1; letter-spacing:-.03em; font-weight:800; margin:0 0 14px}
.rdhero .phlead{font-size:16px; line-height:1.55; max-width:720px; margin:0 0 16px; color:rgba(255,255,255,.92)}
.rdkey{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.rdkey .rdok{font-weight:700; color:#c8f7d8}
.rdkey .rdno{font-size:13.5px; color:rgba(255,255,255,.82)}
.rdkeybtn{background:rgba(255,255,255,.14)!important; color:#fff!important; box-shadow:none!important}
.rdkeybtn:hover{background:rgba(255,255,255,.24)!important}

.rdtabs{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 16px}
.rdtab{text-align:left; border:0; cursor:pointer; background:var(--mp-card); border-radius:20px;
  box-shadow:var(--mp-sh); padding:16px 18px; display:flex; flex-direction:column; gap:5px; transition:transform .12s}
.rdtab:hover{transform:translateY(-2px)}
.rdtab b{font-size:18px; font-weight:800; color:var(--mp-ink)}
.rdtab i{font-style:normal; font-size:12.5px; color:var(--mp-mut); line-height:1.4}
.rdtab.on{background:var(--mp-chip)}
.rdtab.on b{color:#fff} .rdtab.on i{color:rgba(255,255,255,.72)}
@media (max-width:720px){ .rdtabs{grid-template-columns:1fr} }

.rdout{background:var(--mp-card); border-radius:24px; box-shadow:var(--mp-sh); padding:30px 34px; min-height:120px}
.rdpara{margin:0 0 15px; font-size:16px; line-height:1.72; color:var(--mp-body)}
.rdpara:last-child{margin-bottom:0}
.rdpara.dim{color:var(--mp-body); font-size:14.5px; line-height:1.6}
.rdpara.dim{color:var(--mp-body)}
.rdload{display:flex; align-items:center; gap:12px; font-size:15px; color:var(--mp-mut); padding:10px 0}
.rdspin{width:18px; height:18px; border-radius:999px; border:0;
  border-top-color:var(--mp-accfg); display:inline-block; animation:rdspin .8s linear infinite}
@keyframes rdspin{to{transform:rotate(360deg)}}
.rdnote{font-size:15px; line-height:1.6; color:var(--mp-body)}
.rdnote.warnbox{background:var(--mp-card)4f4; border-radius:14px; padding:14px 16px; color:#a12a2a}
.rdfacts{margin-top:12px}

.rdmodal{position:fixed; inset:0; z-index:80; background:rgba(12,15,22,.5); display:grid; place-items:center; padding:20px}
.rdbox{background:var(--mp-card); border-radius:22px; padding:26px 28px; width:min(460px,100%)}
.rdbox .rdh{font-size:22px; font-weight:800; margin-bottom:10px}
.rdinput{width:100%; box-sizing:border-box; border:0; background:var(--mp-card2); border-radius:12px;
  padding:12px 14px; font-size:15px; font-family:'JetBrains Mono',monospace; margin-bottom:14px}
.rdrow{display:flex; gap:10px; justify-content:flex-end}

/* кнопка-шутка внизу «Расклада» */
.rdjoke{margin-top:26px; text-align:center}
.rdbye{border:0; cursor:pointer; background:var(--mp-chip); color:#fff; border-radius:999px;
  padding:13px 30px; font-weight:800; font-size:15px; letter-spacing:.01em; transition:background .14s, transform .12s}
.rdbye:hover{background:#000; transform:translateY(-1px)}
.rdbye:active{transform:translateY(1px)}
.rdbye.gone{background:var(--mp-mut)}
.rdfine{margin-top:7px; font-size:9px; color:var(--mp-mut); opacity:.7; letter-spacing:.02em}

.rdcalc{height:auto; width:auto; display:inline-flex; align-items:center; font-size:15px; padding:14px 26px; border-radius:12px}
.rdredo{}

/* электромагнитные пары в попапе ворот */
.empair{background:var(--mp-card2); border-radius:16px; padding:14px 16px; margin-top:12px}
.empair:first-of-type{margin-top:6px}
.emh{font-weight:800; font-size:15px; margin-bottom:8px; color:var(--mp-ink)}
.empair p{margin:0 0 8px; font-size:14px; line-height:1.55; color:var(--mp-body)}
.empair p:last-child{margin-bottom:0}
.emst{font-weight:600; color:#8a5a00}
.emst.on{color:#0f9d63}

body.mapskin .btn.hot100{background:#ff7a00 !important; color:#fff !important}
body.mapskin .btn.hot100:hover{background:#ff8c1a !important}


/* ---------------- гид «100 причин» ---------------- */
.g100hero{border-radius:28px; box-shadow:var(--mp-sh); margin:0 0 16px; padding:34px 36px 28px; color:#fff;
  background:linear-gradient(135deg,#2a1500 0%,#c85a00 55%,#ff7a00 100%)}
.g100hero .ahk{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:10px}
.g100hero h1{font-size:44px; line-height:1; letter-spacing:-.03em; font-weight:800; margin:0 0 14px}
.g100hero .phlead{font-size:16px; line-height:1.55; max-width:730px; margin:0; color:rgba(255,255,255,.94)}

.g100fil{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.g100chip{border:0; cursor:pointer; background:var(--mp-card); color:var(--mp-ink); border-radius:999px;
  padding:9px 16px; font-weight:700; font-size:13.5px; box-shadow:var(--mp-sh); transition:transform .12s}
.g100chip:hover{transform:translateY(-1px)}
.g100chip.on{background:var(--gc,var(--mp-ink)); color:#fff}

.g100list{display:flex; flex-direction:column; gap:10px}
.g100card{background:var(--mp-card); border-radius:18px; box-shadow:var(--mp-sh); overflow:hidden; border-left:5px solid var(--gc)}
.g100head{width:100%; border:0; background:transparent; cursor:pointer; text-align:left; padding:16px 20px;
  display:grid; grid-template-columns:38px 1fr auto 18px; align-items:center; gap:12px}
.g100num{width:32px; height:32px; border-radius:999px; background:var(--gc); color:#fff; font-weight:800;
  font-size:14px; display:grid; place-items:center; font-family:'JetBrains Mono',monospace}
.g100h{font-size:17px; font-weight:800; color:var(--mp-ink); line-height:1.25}
.g100cat{font-size:11.5px; font-weight:700; color:var(--gc); white-space:nowrap; text-transform:uppercase; letter-spacing:.04em}
.g100arw{color:var(--mp-mut); font-size:20px; transition:transform .16s; text-align:center}
.g100card.on .g100arw{transform:rotate(90deg)}
.g100body{display:none; padding:0 20px 18px 70px}
.g100card.on .g100body{display:block}
.g100d{margin:0 0 12px; font-size:15px; line-height:1.6; color:var(--mp-body)}
.g100me{background:var(--mp-card2); border-radius:14px; padding:12px 15px; margin:0 0 10px}
.g100me b{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gc); margin-bottom:5px}
.g100me p{margin:0; font-size:14px; line-height:1.55; color:var(--mp-body)}
.g100me.off p{color:var(--mp-mut)}
.g100src{font-size:12px; color:var(--mp-mut); font-weight:600}
@media (max-width:640px){
  .g100head{grid-template-columns:32px 1fr 18px}
  .g100cat{display:none}
  .g100body{padding-left:20px}
  .g100hero h1{font-size:34px}
}

.mpb.hot100{background:#ff7a00 !important; color:#fff !important; box-shadow:none !important}
.mpb.hot100:hover{background:#ff8c1a !important}

/* ---- Расклад: журнальная вёрстка без фон-контейнеров ---- */
.rdtop{margin:0 0 6px}
.rdtop .ahk{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mp-mut); margin-bottom:10px}
.rdtop h1{font-size:52px; line-height:1; letter-spacing:-.035em; font-weight:800; margin:0 0 14px; color:var(--mp-ink)}
.rdtop .rdintro{font-size:16px; line-height:1.55; max-width:640px; margin:0; color:var(--mp-mut)}
.reading .rdout{background:transparent!important; box-shadow:none!important; padding:14px 0 0!important; min-height:0}
.rdlead{font-size:23px; line-height:1.5; font-weight:500; color:var(--mp-ink); margin:6px 0 20px; max-width:760px}
.rdlead::first-letter{font-size:74px; line-height:.8; font-weight:800; float:left; margin:6px 14px 0 0; color:var(--mp-accfg)}
.rdquote{margin:30px 0; padding:0 0 0 20px; border-left:4px solid var(--mp-acc); position:relative}
.rdquote{font-size:32px; line-height:1.18; font-weight:800; letter-spacing:-.02em; color:var(--mp-ink); max-width:820px}
.rdqmark{color:var(--mp-accfg); font-size:20px; display:block; margin-bottom:6px}
.reading .rdpara{font-size:17px; line-height:1.72; color:var(--mp-body); margin:0 0 16px; max-width:720px}
.rdcalc{margin-top:8px}
@media (max-width:640px){ .rdtop h1{font-size:36px} .rdquote{font-size:24px} .rdlead{font-size:19px} .rdlead::first-letter{font-size:56px} }

/* ---- стильное начало секций (Match, Расклад канала) ---- */
body.mapskin .doshead{text-align:left; border:0; border-radius:28px; box-shadow:var(--mp-sh);
  background:var(--mp-card); padding:32px 36px 28px; margin:0 0 18px}
body.mapskin .doshead .dosk, body.mapskin .doshead .dosl{font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mp-mut); margin-bottom:10px}
body.mapskin .doshead h1{font-size:46px; line-height:1; letter-spacing:-.035em; font-weight:800;
  margin:0 0 12px; color:var(--mp-ink)}
body.mapskin .doshead .dossub{font-size:16px; line-height:1.55; max-width:680px; margin:0; color:var(--mp-mut)}
body.mapskin .dosbar{background:var(--mp-card); border-radius:18px; box-shadow:var(--mp-sh);
  padding:14px 18px; border:0; margin-bottom:16px}
@media (max-width:640px){ body.mapskin .doshead h1{font-size:34px} }

/* Подписи сфер хологенетики — в капсулах: плашка перекрывает линии/кружки за
   текстом, читается на любом фоне; цвета на токенах → флипаются в тёмной теме */
body.mapskin .holograph .sphpill{ fill:var(--mp-card); stroke:var(--mp-line); stroke-width:1; }
body.mapskin .holograph .sphn{ fill:var(--mp-ink); }
body.mapskin .holograph .sphs{ fill:var(--mp-mut); }

/* Раздел «Активность» */
body.mapskin .actcard{background:var(--mp-card); border-radius:var(--mp-r); box-shadow:var(--mp-sh);
  padding:24px 26px; margin-bottom:14px}
body.mapskin .actcard.tint{background:var(--mp-peri)}
body.mapskin .actcard.lime{background:var(--mp-lime)}
body.mapskin .actcard.tint p,body.mapskin .actcard.lime p{color:#20263a}
body.mapskin .actlbl{font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mp-mut); margin-bottom:8px}
body.mapskin .actcard.tint .actlbl,body.mapskin .actcard.lime .actlbl{color:#4a5372}
body.mapskin .actlbl2{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mp-mut); margin-bottom:5px}
body.mapskin .actbig{font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--mp-ink); line-height:1.05; margin-bottom:10px}
body.mapskin .actcard.tint .actbig,body.mapskin .actcard.lime .actbig{color:#161a24}
body.mapskin .actbig.sm{font-size:21px}
body.mapskin .actcard p{font-size:14px; line-height:1.55; color:var(--mp-body); margin:0 0 9px}
body.mapskin .actfalse{margin-top:14px; padding-top:14px; border-top:1px solid var(--mp-line)}
body.mapskin .acthint{font-size:12.5px; color:var(--mp-mut); line-height:1.5}
body.mapskin .actcard.tint .acthint,body.mapskin .actcard.lime .acthint{color:#4a5372}
body.mapskin .actsrc{font-size:11px; color:var(--mp-mut); margin-top:10px; font-family:'JetBrains Mono',monospace}
body.mapskin .actchips{display:flex; flex-wrap:wrap; gap:7px; margin-top:4px}
body.mapskin .actchip{font-size:13px; font-weight:700; padding:7px 14px; border-radius:100px;
  background:rgba(255,255,255,.6); color:#161a24}

/* --- Активность: бенто, иконки, блоки занятий --- */
body.mapskin .actbento{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
body.mapskin .actbento .actcard{margin-bottom:0}
body.mapskin .actcard.wide{grid-column:1 / -1}
body.mapskin .acthd{display:flex; align-items:center; gap:11px; margin-bottom:12px}
body.mapskin .acthd.big{margin-bottom:6px}
body.mapskin .acticon{flex:0 0 auto; width:68px; height:68px; display:grid; place-items:center}
body.mapskin .acticon.sm{width:52px; height:52px}
body.mapskin .actbadge{display:inline-block; vertical-align:middle; font-size:12px; font-weight:800;
  padding:4px 12px; border-radius:100px; margin-left:6px; letter-spacing:.01em}
body.mapskin .actbadge.hot{background:#ffe1cf; color:#9a4a17}
body.mapskin .actbadge.cool{background:#d6e5f5; color:#2b527e}
body.mapskin .actfalse{margin-top:14px; padding:12px 14px; border-radius:13px; background:var(--mp-card2);
  font-size:13.5px; line-height:1.55; color:var(--mp-body)}
body.mapskin .actfl{display:block; font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--mp-mut); margin-bottom:4px}
body.mapskin .actmore{margin-top:13px; border:0; background:var(--mp-card2); color:var(--mp-ink);
  font:inherit; font-weight:700; font-size:13px; padding:9px 15px; border-radius:100px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px}
body.mapskin .actmore .amChev{transition:transform .15s; font-size:16px; color:var(--mp-mut)}
body.mapskin .actmore.on .amChev{transform:rotate(90deg)}
body.mapskin .actdet{margin-top:12px}
body.mapskin .actdet p{font-size:14px; line-height:1.6; color:var(--mp-body); margin:0 0 10px}
body.mapskin .actsec{background:var(--mp-card); border-radius:var(--mp-rb); box-shadow:var(--mp-sh); padding:26px 28px; margin-top:2px}
body.mapskin .actwhy{font-size:15px; line-height:1.6; color:var(--mp-body); margin:4px 0 4px}
body.mapskin .actgrp{margin-top:20px}
body.mapskin .actgh{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:800;
  color:var(--mp-ink); margin-bottom:11px}
body.mapskin .actblocks{display:grid; grid-template-columns:1fr 1fr; gap:10px}
body.mapskin .actblk{background:var(--mp-card2); border-radius:15px; padding:13px 15px}
body.mapskin .actblkn{font-size:15px; font-weight:800; color:var(--mp-ink); margin-bottom:4px}
body.mapskin .actblkw{font-size:13px; line-height:1.5; color:var(--mp-mut)}
:root[data-theme="dark"] body.mapskin .actbadge.hot{background:#4a2f1c; color:#f0b487}
:root[data-theme="dark"] body.mapskin .actbadge.cool{background:#1f3350; color:#9cc0ea}
@media (max-width:820px){
  body.mapskin .actbento{grid-template-columns:1fr}
  body.mapskin .actblocks{grid-template-columns:1fr}
}

/* --- Список транзитов --- */
body.mapskin .tlist{background:var(--mp-card); border-radius:var(--mp-r); box-shadow:var(--mp-sh);
  padding:24px 26px; margin:14px 0}
body.mapskin .tlhead{font-size:15px; font-weight:800; color:var(--mp-ink); margin-bottom:12px}
body.mapskin .tlhead span{display:block; font-size:12px; font-weight:500; color:var(--mp-mut); margin-top:3px}
body.mapskin .tlplanets{display:grid; grid-template-columns:1fr 1fr; gap:4px 18px}
body.mapskin .tlrow{display:grid; grid-template-columns:22px auto 44px 1fr; align-items:center; gap:8px;
  padding:6px 8px; border-radius:9px; font-size:13px}
body.mapskin .tlrow.own{opacity:.55}
body.mapskin .tlgl{font-size:15px; color:var(--mp-accfg); text-align:center}
body.mapskin .tlbody{font-weight:700; color:var(--mp-ink)}
body.mapskin .tlgate{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--mp-accfg); font-size:13px}
body.mapskin .tlgn{color:var(--mp-mut); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.mapskin .tlsub{font-size:12.5px; font-weight:800; letter-spacing:.02em; color:var(--mp-ink);
  margin:14px 0 8px; padding-top:12px; border-top:1px solid var(--mp-line)}
body.mapskin .tlsub.off{color:var(--mp-mut); font-weight:600}
body.mapskin .tlchans{display:flex; flex-wrap:wrap; gap:8px}
body.mapskin .tlchan{border:0; background:var(--mp-accsoft); color:var(--mp-ink); font:inherit;
  border-radius:12px; padding:9px 13px; cursor:pointer; text-align:left; font-size:13.5px}
body.mapskin .tlchan b{color:var(--mp-accfg); font-family:'JetBrains Mono',monospace; margin-right:5px}
body.mapskin .tlchan .tlchd{display:block; font-size:11px; color:var(--mp-mut); margin-top:3px}
body.mapskin .tlchan .tlchd i{color:var(--mp-accfg); font-style:normal; font-weight:700}
@media (max-width:640px){ body.mapskin .tlplanets{grid-template-columns:1fr} }

/* --- Раздел «О себе» (профиль) --- */
body.mapskin .pfgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px}
body.mapskin .pfcard{background:var(--mp-card); border-radius:var(--mp-r); box-shadow:var(--mp-sh);
  padding:20px 22px; display:flex; flex-direction:column; gap:9px; min-width:0}
body.mapskin .pflbl{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mp-mut)}
body.mapskin .pfin{border:0; background:var(--mp-card2); border-radius:11px;
  padding:9px 12px; font:inherit; font-size:14px; color:var(--mp-ink); width:100%; resize:vertical}
body.mapskin .pfin:focus{outline:none; border-color:var(--mp-accfg)}
body.mapskin .pfhero{grid-column:span 2; flex-direction:row; align-items:center; gap:16px}
body.mapskin .pfava{flex:0 0 auto; width:96px; height:96px; border-radius:24px; border:0; cursor:pointer;
  background-size:cover; background-position:center; background-color:var(--mp-card2)}
body.mapskin .pfava.empty{display:grid; place-items:center; border:0; color:var(--mp-mut);
  font-size:12px; font-weight:700}
body.mapskin .pfheadin{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:9px}
body.mapskin .pfname{border:0; background:transparent; font:inherit; font-size:26px; font-weight:800;
  color:var(--mp-ink); letter-spacing:-.02em; padding:0}
body.mapskin .pfname:focus{outline:none}
body.mapskin .pffield{grid-column:span 1}
body.mapskin .pfchips{grid-column:span 2}
body.mapskin .pfchipbox{display:flex; flex-wrap:wrap; gap:7px; align-items:center}
body.mapskin .pfchip{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  padding:6px 8px 6px 12px; border-radius:100px; background:var(--mp-peri); color:#28306e}
body.mapskin .pfx{border:0; background:transparent; color:#28306e; width:18px; height:18px; border-radius:50%;
  cursor:pointer; font-size:15px; line-height:1; display:grid; place-items:center; opacity:.65}
body.mapskin .pfx:hover{opacity:1; background:rgba(255,255,255,.5)}
body.mapskin .pfchipin{border:0; background:transparent; font:inherit; font-size:13px; color:var(--mp-ink);
  padding:6px 4px; min-width:120px; flex:1}
body.mapskin .pfchipin:focus{outline:none}
/* .pfchip на константном барвинке — текст ВСЕГДА тёмный (не флипать в дарке) */
/* auto-fill сам меняет число колонок; span у hero/chips схлопывается на узком */
@media (max-width:480px){ body.mapskin .pfhero{flex-direction:column; align-items:flex-start} }

/* --- Раздел «Питание» --- */
body.mapskin .nualg{background:var(--mp-accsoft); border-radius:14px; padding:12px 16px; font-size:13.5px;
  color:var(--mp-ink); margin-bottom:14px}
body.mapskin .nualg.off{background:var(--mp-card2); color:var(--mp-mut)}
/* Карточки одинаковой высоты в ряду (align-items:stretch), внутри — колонка,
   а список блюд прижат к низу, поэтому шапки карточек выстраиваются в линию. */
body.mapskin .nugrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:14px; align-items:stretch; grid-auto-rows:1fr}
body.mapskin .nucard{background:var(--mp-card); border-radius:var(--mp-r); box-shadow:var(--mp-sh);
  padding:24px 26px; display:flex; flex-direction:column}
/* Крупный ЛИНЕЙНЫЙ значок по роли аминокислоты — сразу видно, за что она
   отвечает. В светлом круге, как значки-чипы в остальном интерфейсе. */
body.mapskin .nuico{width:52px; height:52px; margin-bottom:14px; border-radius:50%;
  display:grid; place-items:center; background:var(--mp-card2); color:var(--mp-accfg)}
body.mapskin .nuico svg{width:28px; height:28px; display:block}
body.mapskin .nudishes{margin-top:auto; padding-top:14px}
body.mapskin .nutop{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
body.mapskin .nuname{font-size:22px; font-weight:800; color:var(--mp-ink); letter-spacing:-.01em}
body.mapskin .nuname i{font-size:13px; font-weight:600; font-style:normal; color:var(--mp-mut)}
body.mapskin .nucnt{font-size:12px; font-weight:700; color:var(--mp-accfg); white-space:nowrap}
body.mapskin .nusph{font-size:12.5px; color:var(--mp-mut); margin-top:3px}
body.mapskin .nurole{font-size:13.5px; color:var(--mp-body); margin:9px 0}
body.mapskin .nudishes{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
body.mapskin .nudish{display:inline-flex; flex-direction:column; font-size:13.5px; font-weight:600;
  padding:9px 14px; border-radius:13px; background:var(--mp-card2); color:var(--mp-ink)}
body.mapskin .nudish .nual{font-size:10.5px; font-weight:600; font-style:normal; color:var(--mp-mut); margin-top:2px}
body.mapskin .nuhid{font-size:11.5px; color:var(--mp-mut); margin-top:9px}

/* Аминокислота + дилемма в карточке сферы (хологенетика) */
body.mapskin .amino{margin-top:16px; display:flex; flex-direction:column; gap:12px}
body.mapskin .amDil,body.mapskin .amAcid{background:var(--mp-card2); border-radius:16px; padding:15px 17px}
body.mapskin .amLbl,body.mapskin .amLbl2{font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mp-mut); margin-bottom:7px}
body.mapskin .amLbl2{margin-top:12px}
body.mapskin .amDilW{font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--mp-ink); line-height:1.1}
body.mapskin .amPath{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px}
body.mapskin .amFrom,body.mapskin .amTo{font-weight:700; font-size:13.5px; padding:4px 11px; border-radius:100px}
body.mapskin .amFrom{background:var(--mp-card); color:var(--mp-mut)}
body.mapskin .amTo{background:var(--mp-lime); color:#161a24}
body.mapskin .amArr{color:var(--mp-mut); font-weight:700}
body.mapskin .amWay{font-size:11.5px; font-weight:700; color:var(--mp-mut); margin-left:2px}
body.mapskin .amName{font-size:19px; font-weight:800; color:var(--mp-ink)}
body.mapskin .amName i{font-size:13px; font-weight:600; font-style:normal; color:var(--mp-mut)}
body.mapskin .amRole{margin:6px 0 0; font-size:13.5px; color:var(--mp-body)}
body.mapskin .amFoods{display:flex; flex-wrap:wrap; gap:6px}
body.mapskin .amChip{font-size:12px; font-weight:600; padding:5px 11px; border-radius:100px;
  background:var(--mp-peri); color:#28306e}
body.mapskin .amHint{margin:9px 0 0; font-size:12px; color:var(--mp-mut); line-height:1.5}
/* раскрывающееся пояснение дилеммы */
body.mapskin .amDilBtn{margin-top:12px; border:0; background:var(--mp-card); color:var(--mp-ink);
  font:inherit; font-weight:700; font-size:13px; padding:9px 15px; border-radius:100px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; box-shadow:var(--mp-sh)}
body.mapskin .amDilBtn .amChev{transition:transform .15s; font-size:16px; color:var(--mp-mut)}
body.mapskin .amDilBtn.on .amChev{transform:rotate(90deg)}
body.mapskin .amDilBody{margin-top:12px}
body.mapskin .amDilBody p{margin:0; font-size:14px; line-height:1.6; color:var(--mp-body)}
body.mapskin .amEx{margin-top:11px; padding:11px 14px; border-radius:12px; background:var(--mp-card);
  font-size:13.5px; line-height:1.55; color:var(--mp-body); font-style:italic}
body.mapskin .amEx .amExL{display:block; font-style:normal; font-size:10.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--mp-mut); margin-bottom:5px}
/* .amChip и .amTo — константный светлый фон (peri/lime) → текст ВСЕГДА тёмный,
   в т.ч. в тёмной теме (не переопределять на светлый) */

/* строки линий сферы (styles.css: белый #fff / #f6f8ff) — на токены для тёмной */
body.mapskin .slBtn{background:var(--mp-card2); border-color:var(--mp-line)}
body.mapskin .slRow.on .slBtn{background:var(--mp-accsoft)}
/* строки частот Тень/Дар/Сиддхи (frBtn: белый #fff) — на токены */
body.mapskin .frBtn{background:var(--mp-card2); border-color:var(--mp-line)}

/* фильтры Match и переключатели режима — на токенах, чтобы флипались в тёмной
   (в styles.css у них захардкожены #fff/#eef0f4 → в тёмной было бело-по-белому) */
body.mapskin .modesw{background:var(--mp-card2)}
body.mapskin .modesw button{color:var(--mp-mut)}
body.mapskin .modesw button.on{background:var(--mp-card); color:var(--mp-ink); box-shadow:var(--mp-sh)}
body.mapskin .fchip{background:var(--mp-card2); border:0; color:var(--mp-ink)}
body.mapskin .fchip:hover{border:0}
body.mapskin .fchip.on{background:var(--mp-chip); color:#fff; border:0}
body.mapskin .fchip i{background:var(--mp-track); color:var(--mp-mut)}
body.mapskin .fchip.on i{background:rgba(255,255,255,.22); color:#fff}
body.mapskin .fchip.reset{background:transparent; color:var(--mp-mut)}
/* техданные досье и сетки — прозрачные ячейки на токен-фоне карточки */
body.mapskin .dos,body.mapskin section.dos{background:transparent}
body.mapskin .dostech,body.mapskin .tdi{background:transparent}
body.mapskin .dosgate{background:var(--mp-card2); border:0}
body.mapskin .dosgate:hover{background:var(--mp-chip); color:#fff}
body.mapskin .dosgate:hover i{color:rgba(255,255,255,.7)}

/* Секции досье (Расклад канала) — каждая в карточке с иконкой в заголовке,
   иначе текст «разбросан» на фоне страницы */
body.mapskin .dsec{background:var(--mp-card); border-radius:var(--mp-r); padding:24px 26px;
  margin-bottom:14px; box-shadow:var(--mp-sh)}
body.mapskin .dosns,body.mapskin .dostech{background:var(--mp-card); border-radius:var(--mp-rb);
  padding:26px 28px; box-shadow:var(--mp-sh); border-top:0; margin-top:14px}
/* Заголовок секции по системе: голая объёмная иконка 34px + название
   Nata Sans 20px. Никакого капслока, подчёркивания и плашки под иконкой —
   в системе значок лежит прямо на карточке. */
body.mapskin .dsec h3,body.mapskin .dosns h3,body.mapskin .dostech h3{
  display:flex; align-items:center; gap:12px; margin:0 0 12px; padding:0 0 0 2px;
  font-family:var(--mp-display); font-size:20px; font-weight:600; letter-spacing:-.01em;
  text-transform:none; border-bottom:0; color:var(--mp-ink)}
body.mapskin .dsecico{flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center}
body.mapskin .dsecico svg{width:17px; height:17px}
body.mapskin .dostech h3{justify-content:flex-start; text-align:left}
/* строки-подпункты внутри секций — на подложке card2, чтобы читались как пункты */
body.mapskin .dsec .str{background:var(--mp-card2); border-radius:11px; padding:10px 12px; margin-top:8px}
body.mapskin .dsec .str b{display:block; margin-bottom:3px}

/* Секции .pblock (Shugay / Архетипы / Чакры и т.п.) — в карточке с фоном,
   иначе разбросаны по странице. Тёмную плашку .combo не трогаем. */
body.mapskin .pblock:not(.combo){background:var(--mp-card); border-radius:var(--mp-rb);
  padding:26px 28px; box-shadow:var(--mp-sh); margin-bottom:16px}
/* объёмная иконка в заголовке секции: голая, 34px, рядом с Nata Sans 20px */
body.mapskin .pblock:not(.combo) > h3{margin-top:0; gap:12px; font-family:var(--mp-display);
  font-size:20px; font-weight:600; letter-spacing:-.01em; text-transform:none; color:var(--mp-ink)}
body.mapskin .pblock:not(.combo) > h3::before{content:''; flex:0 0 auto; width:34px; height:34px;
  background:url("img/ds/star.png") center/contain no-repeat;
  filter:drop-shadow(0 3px 8px rgba(13,16,20,.18))}
/* если у заголовка уже есть своя иконка — декоративную звезду не рисуем */
body.mapskin .pblock:not(.combo) > h3:has(img)::before{display:none}
body.mapskin .pblock > h3 > .dsico{flex:0 0 auto; width:34px; height:34px}


/* ============================================================
   БЛОКИ КОНТЕНТА по дизайн-системе (4 типа + слои shadow-2)
   ============================================================ */
/* ⚠️ Пробовали поднять ВСЕ блоки на shadow-2 — заказчик вернул обратно.
   Широкое размытие под каждой карточкой пачкает лист на прокрутке (та же
   природа, что и старый баг с грязными прямоугольниками под sticky-шапкой).
   shadow-2 остаётся ТОЛЬКО на модалках: они fixed и перерисовываются целиком. */

/* Цветные смысловые блоки: декоративный круг светлее фона + место под
   объёмный объект, который кадрируется углом блока (как в системе) */
body.mapskin .mpblk.lime, body.mapskin .mpblk.peri,
body.mapskin .mpblk.good, body.mapskin .mpblk.acc,
body.mapskin .actcard.tint, body.mapskin .actcard.lime,
body.mapskin .combo{ position:relative; overflow:hidden }
body.mapskin .mpblk.lime::after, body.mapskin .mpblk.peri::after,
body.mapskin .mpblk.good::after, body.mapskin .mpblk.acc::after,
body.mapskin .actcard.tint::after, body.mapskin .actcard.lime::after{
  content:''; position:absolute; right:-40px; top:-60px; width:190px; height:190px;
  border-radius:50%; background:rgba(255,255,255,.28); pointer-events:none;
}
body.mapskin .combo::after{
  content:''; position:absolute; right:-50px; top:-70px; width:210px; height:210px;
  border-radius:50%; background:rgba(255,255,255,.06); pointer-events:none;
}
/* объёмный объект в углу цветного блока — крупный и обрезанный краем */
body.mapskin .blkart{
  /* ширина ОТНОСИТЕЛЬНАЯ: на узкой карточке фиксированные 150px съедали
     колонку текста и строки уходили под картинку */
  position:absolute; right:-22px; bottom:-22px; width:min(150px, 38%); height:auto;
  object-fit:contain; pointer-events:none; z-index:0;
  filter:drop-shadow(0 14px 26px rgba(13,16,20,.22));
}
body.mapskin .mpblk > *, body.mapskin .actcard > *{position:relative; z-index:1}

/* Метрика ворот: крупное число + дробная часть меньше и синим */
body.mapskin .metnum{font-family:var(--mp-display); font-weight:600; line-height:1;
  letter-spacing:-.03em; display:inline-flex; align-items:baseline}
body.mapskin .metnum .mi{font-size:40px}
body.mapskin .metnum .md{font-size:19px; color:var(--mp-accfg); margin-left:1px}

/* Кнопки: чёрная и лаймовая из набора системы */
body.mapskin .mpb.dark, body.mapskin .btn.dark{background:var(--mp-chip); color:#fff; box-shadow:var(--mp-sh)}
body.mapskin .mpb.limebtn, body.mapskin .btn.limebtn{background:var(--mp-lime); color:#0d1014; box-shadow:var(--mp-sh)}
body.mapskin .combo .mpb.limebtn{box-shadow:none}

/* Активный пункт меню — тёмная пилюля БЕЗ свечения (заказчик: «убери глоу») */
body.mapskin .sbtab.on{box-shadow:none}


/* Схема ауры в попапе типа */
body.mapskin .auraWrap{background:var(--mp-card2); border-radius:var(--mp-rs);
  padding:14px 14px 12px; margin:2px 0 12px; display:flex; flex-direction:column; align-items:center; gap:8px}
body.mapskin .auraSvg{width:100%; max-width:210px; height:auto; display:block}
body.mapskin .auraCap{font-family:var(--mp-display); font-size:15px; font-weight:600;
  color:var(--mp-ink); text-align:center; letter-spacing:-.01em}
/* на цветных сценах подложка светлее фона, а не card2 */
body.mapskin .mpblk.acc .auraWrap, body.mapskin .mpblk.good .auraWrap,
body.mapskin .mpblk.lime .auraWrap, body.mapskin .mpblk.peri .auraWrap{background:rgba(255,255,255,.55)}
body.mapskin .mpblk.acc .auraCap, body.mapskin .mpblk.good .auraCap,
body.mapskin .mpblk.lime .auraCap, body.mapskin .mpblk.peri .auraCap{color:#161a24}


/* --- Профессия: метрика ворот и блоки-тизеры по эталону системы --- */
body.mapskin .pcard.metric{display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  text-align:left; border:0; font:inherit; cursor:pointer; background:var(--mp-card);
  border-radius:var(--mp-r); padding:26px; box-shadow:var(--mp-sh);
  transition:transform .14s cubic-bezier(.2,.8,.3,1)}
body.mapskin .pcard.metric:hover{transform:translateY(-2px)}
body.mapskin .pcard.metric .ptag{font-size:10px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:#79818F}
body.mapskin .pcard.metric .pname{font-size:16px; font-weight:600; color:var(--mp-ink)}
body.mapskin .pcard.metric .hint2{font-size:13px; line-height:1.5; color:#79818F; margin:0}

/* пара блоков-тизеров: тёмный вывод + лаймовый счётчик */
body.mapskin .teaserow{display:grid; grid-template-columns:1.25fr 1fr; gap:16px; margin:18px 0}
body.mapskin .teas{position:relative; overflow:hidden; border-radius:var(--mp-rb);
  padding:36px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--mp-sh);
  min-height:250px}
/* тёмный тизер обязан быть тёмным в ОБЕИХ темах: --mp-ink в тёмной светлый,
   и получалось белым по белому. --mp-dark тёмный всегда. */
body.mapskin .teas.dark{background:var(--mp-dark); color:#fff}
body.mapskin .teas.lime{background:var(--mp-lime); color:#0d1014}
body.mapskin .teas .tk{position:relative; z-index:1; font-size:11px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; max-width:58%}
/* кикер держится вверху, всё остальное (текст, цифра, кнопка) прижато к низу:
   auto-отступ у первого элемента после кикера съедает свободную высоту */
body.mapskin .teas .tk + *{margin-top:auto}
body.mapskin .teas.dark .tk{color:#6E7684}
body.mapskin .teas.lime .tk{color:rgba(13,16,20,.55)}
body.mapskin .teas .tt{position:relative; z-index:1; font-family:var(--mp-display);
  font-size:26px; font-weight:600; line-height:1.12; letter-spacing:-.02em; max-width:58%}
body.mapskin .teas .tnum{position:relative; z-index:1; font-family:var(--mp-display);
  font-size:44px; font-weight:600; line-height:1; letter-spacing:-.03em}
body.mapskin .teas .tsub{position:relative; z-index:1; font-size:14px; line-height:1.5;
  color:rgba(13,16,20,.7); max-width:58%}
body.mapskin .teas .tbtn{position:relative; z-index:1; align-self:flex-start; margin-top:2px}
body.mapskin .teas .blkart{width:min(200px, 42%); right:-18px; bottom:-18px}
@media (max-width:900px){
  body.mapskin .teaserow{grid-template-columns:1fr}
  body.mapskin .teas{padding:28px; min-height:0}
  /* на узкой карточке объект съедал колонку текста — прячем его,
     текст занимает всю ширину */
  body.mapskin .teas .blkart{display:none}
  body.mapskin .teas .tk,body.mapskin .teas .tt,body.mapskin .teas .tsub{max-width:100%}
}


/* --- Shugay: хиро и карточки архетипов по эталону системы --- */
body.mapskin .shughero{background:var(--mp-card); border-radius:var(--mp-rb); box-shadow:var(--mp-sh);
  padding:44px; margin:0 0 20px; position:relative; overflow:hidden}
body.mapskin .shughero .shl{position:relative; z-index:1; max-width:640px}
body.mapskin .shughero .ahk{font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:#79818F; margin-bottom:10px}
body.mapskin .shughero h1{font-family:var(--mp-display); font-size:52px; font-weight:600;
  line-height:1; letter-spacing:-.03em; margin:0 0 16px; color:var(--mp-ink)}
body.mapskin .shughero .phlead{font-size:17px; line-height:1.55; max-width:560px;
  margin:0 0 16px; color:var(--mp-body)}
/* парящие объёмные объекты, кадрируются краем панели */
body.mapskin .shart{position:absolute; pointer-events:none; object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(13,16,20,.18))}
body.mapskin .shart.a1{right:8%; top:-24px; width:min(150px,15%)}
body.mapskin .shart.a2{right:-24px; top:34%; width:min(190px,19%)}
body.mapskin .shart.a3{right:14%; bottom:-30px; width:min(120px,12%)}
@media (max-width:900px){
  body.mapskin .shughero{padding:32px 28px}
  body.mapskin .shughero h1{font-size:38px}
  body.mapskin .shart{opacity:.5}
}

/* карточка архетипа: кикер / имя / крупный % / описание / объект в углу */
/* Карточка архетипа: текст сверху, объёмный объект прижат к НИЗУ и к ЛЕВОМУ
   краю. Объект держим в потоке (margin-top:auto), а не абсолютом — тогда он
   физически не может наехать на текст, а высота карточки равна содержимому.
   ⚠️ Раньше правило .archc > * ставило картинке position:relative (та же
   специфичность, но ниже в файле) — она выпадала в поток по центру и
   растягивала карточку до 406px. */
body.mapskin .archc{border-radius:var(--mp-rp); padding:26px; position:relative;
  overflow:hidden; box-shadow:var(--mp-sh); min-height:0;
  display:flex; flex-direction:column;
  background:var(--ac); color:#fff}
/* Объект уходит в ПРАВЫЙ ВЕРХНИЙ угол и выносится из потока — карточка
   становится ровно по тексту. Ограничиваем по ВЫСОТЕ: у картинок разные
   пропорции, и при задании только ширины высокие экземпляры раздували блок. */
body.mapskin .archc > .blkart{position:absolute; top:-6px; right:-6px;
  bottom:auto; left:auto; margin:0; padding:0;
  height:104px; width:auto; max-width:38%;
  object-fit:contain; object-position:right top}
/* верхние строки не должны заходить под объект */
body.mapskin .archc .archrk,body.mapskin .archc .archn,
body.mapskin .archc .archpct{max-width:60%}
/* цвета из дизайн-системы: лиловый · розовый · лайм. Фон всегда светлый,
   поэтому текст на них тёмный в ОБЕИХ темах. */
body.mapskin .archc.c1{background:var(--mp-peri)}
body.mapskin .archc.c2{background:var(--mp-pink)}
body.mapskin .archc.c3{background:var(--mp-lime)}
body.mapskin .archc.c1,body.mapskin .archc.c2,body.mapskin .archc.c3{color:#0d1014}
body.mapskin .archc.c1 p,body.mapskin .archc.c2 p,body.mapskin .archc.c3 p{color:rgba(13,16,20,.72)}
body.mapskin .archc.c1 .archrk,body.mapskin .archc.c2 .archrk,body.mapskin .archc.c3 .archrk{
  color:rgba(13,16,20,.55); opacity:1}
body.mapskin .archc.c1::before,body.mapskin .archc.c2::before,body.mapskin .archc.c3::before{
  background:rgba(255,255,255,.3)}
body.mapskin .archc > *{position:relative; z-index:1}
body.mapskin .archc .archrk{font-size:10px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; opacity:.8}
body.mapskin .archc .archn{font-family:var(--mp-display); font-size:32px; font-weight:600;
  letter-spacing:-.02em; margin:10px 0 2px}
body.mapskin .archc .archpct{font-family:var(--mp-display); font-size:44px; font-weight:600;
  line-height:1; letter-spacing:-.03em}
body.mapskin .archc .archpct span{font-size:20px; opacity:.8}
body.mapskin .archc p{margin:10px 0 0; font-size:14px; line-height:1.5;
  color:rgba(255,255,255,.92)}

/* «Как это вышло» — цветные кружки-номера на светлой карточке */
body.mapskin .howcame .shugstep{display:flex; align-items:center; gap:12px; padding:9px 0}
body.mapskin .howcame .ssn{flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:var(--ac); color:#fff; display:grid; place-items:center;
  font-size:13px; font-weight:600; font-family:var(--mp-display)}


/* Кружки шагов «Как это вышло» — палитра дизайн-системы, тёмная цифра
   (лайм и розовый светлые, белая цифра на них не читается) */
body.mapskin .howcame .shugstep.s1 .ssn{background:var(--mp-peri)}
body.mapskin .howcame .shugstep.s2 .ssn{background:var(--mp-pink)}
body.mapskin .howcame .shugstep.s3 .ssn{background:var(--mp-lime)}
body.mapskin .howcame .ssn{color:#0d1014}
body.mapskin .howcame .stepArch{color:var(--mp-ink)}

/* ================= СТАРТОВЫЙ ЭКРАН «Рассчитать карту» ================= */
/* Верстаем как остальные страницы: текст слева, без центрирования,
   плюс крупный 3D-объект из дизайн-системы. */
body.mapskin .welcome{background:var(--mp-card); border:0; border-radius:var(--mp-rp);
  padding:56px 60px; box-shadow:var(--mp-sh); text-align:left; position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:32px}
body.mapskin .welcome .wcopy{max-width:620px}
body.mapskin .welcome .wk{font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--mp-mut); margin-bottom:14px}
body.mapskin .welcome h1{font-family:var(--mp-display); font-size:52px; line-height:1.02; margin:0 0 16px}
body.mapskin .welcome .lead{max-width:560px; margin:0 0 26px; color:var(--mp-mut);
  font-size:17px; line-height:1.55; text-align:left}
body.mapskin .welcome .btn.big{background:var(--mp-acc); color:#fff; border:0; font-size:15px;
  padding:14px 30px; border-radius:var(--mp-rs); box-shadow:var(--mp-shacc)}
body.mapskin .welcome .wobj{width:230px; height:auto; flex:0 0 auto;
  filter:drop-shadow(0 24px 40px rgba(13,16,20,.18))}
@media (max-width:760px){
  body.mapskin .welcome{grid-template-columns:minmax(0,1fr); padding:36px 26px}
  body.mapskin .welcome h1{font-size:38px}
  body.mapskin .welcome .wobj{display:none}
}

/* ================= РАЗВИТИЕ ================= */
body.mapskin .devp .devlead{font-size:15.5px; line-height:1.55; color:var(--mp-ink); margin:2px 0 14px}
body.mapskin .devp .devwhy{font-size:13px; color:var(--mp-mut); margin:8px 0 0}
/* строка книг */
body.mapskin .bookrow{display:flex; flex-wrap:wrap; gap:14px}
body.mapskin .bookc{display:flex; gap:0; flex:1 1 260px; min-width:240px;
  background:var(--mp-card2); border-radius:var(--mp-rs); overflow:hidden}
body.mapskin .bookc .bkspine{flex:0 0 8px; background:linear-gradient(180deg,var(--mp-acc),var(--mp-peri))}
body.mapskin .bookc .bkbody{padding:16px 18px}
body.mapskin .bookc .bkt{font-family:var(--mp-display); font-size:17px; line-height:1.2}
body.mapskin .bookc .bka{font-size:13px; color:var(--mp-mut); margin-top:3px}
body.mapskin .bookc .bkw{font-size:13px; line-height:1.5; color:var(--mp-ink); margin:9px 0 0}
/* практика */
body.mapskin .devprac{margin-top:16px; padding:16px 18px; border-radius:var(--mp-rs);
  background:var(--mp-peri); color:#161a24; font-size:14.5px; line-height:1.5}
body.mapskin .devprac .devprk{display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; background:rgba(255,255,255,.72); color:#161a24; padding:3px 10px; border-radius:999px; margin-right:10px}
/* линии профиля */
body.mapskin .devln{margin:4px 0 12px}
body.mapskin .devln .devlnh{font-size:15px; margin-bottom:4px}
body.mapskin .devln + .bookrow{margin-bottom:20px}
/* открытые центры */
body.mapskin .devcen{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
body.mapskin .devcc{background:var(--mp-card2); border-radius:var(--mp-r); padding:20px}
body.mapskin .devcc .devccn{font-family:var(--mp-display); font-size:19px; margin-bottom:6px}
body.mapskin .devcc .bookc{margin-top:12px; background:var(--mp-card)}
/* дары */
body.mapskin .devgift{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px}
body.mapskin .devgc{background:var(--mp-card2); border-radius:var(--mp-r); padding:20px}
body.mapskin .devgc .devgk{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  color:var(--mp-mut); margin-bottom:6px}
body.mapskin .devgc .devgn{font-family:var(--mp-display); font-size:20px; margin-bottom:8px}
body.mapskin .devgc .devgn b{color:var(--mp-accfg)}
body.mapskin .devgc .bkw{font-size:13px; color:var(--mp-mut); margin:8px 0 0}
body.mapskin .devgc .devwhy{font-size:12.5px; color:var(--mp-mut); margin-top:10px;
  padding-top:10px; border-top:1px solid var(--mp-line)}

/* ================= ПИТАНИЕ: тумблер, добавки, анализы ================= */
/* панель управления над сеткой */
body.mapskin .nuctrl{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:2px 0 18px}
body.mapskin .nutsw{display:inline-flex; background:var(--mp-card2); border-radius:999px; padding:4px}
body.mapskin .nutsb{border:0; background:transparent; color:var(--mp-mut); cursor:pointer;
  font:inherit; font-size:14px; padding:9px 20px; border-radius:999px; transition:.15s}
body.mapskin .nutsb.on{background:var(--mp-chip); color:#fff}
body.mapskin .btn.labadd{background:var(--mp-ink); color:var(--mp-card); border:0;
  padding:11px 20px; border-radius:999px; font-size:14px}
/* карточки добавок внутри nucard */
body.mapskin .nusupp{display:flex; flex-direction:column; gap:8px; margin-top:4px}
body.mapskin .suppc{background:var(--mp-card2); border-radius:16px; padding:11px 14px}
body.mapskin .suppn{font-family:var(--mp-display); font-size:15px; display:flex; flex-wrap:wrap;
  align-items:baseline; gap:8px}
body.mapskin .suppd{font:600 12px/1 'JetBrains Mono',monospace; color:var(--mp-accfg);
  background:var(--mp-card); padding:3px 8px; border-radius:999px}
body.mapskin .suppw{font-size:13px; color:var(--mp-mut); margin-top:3px; line-height:1.45}
body.mapskin .nusyn{font-size:13px; line-height:1.5; margin-top:10px; color:var(--mp-ink)}
body.mapskin .nusyn .synk{display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; color:var(--mp-mut); margin-right:6px}
body.mapskin .nucau{font-size:12.5px; line-height:1.45; color:var(--mp-mut); margin:10px 0 0;
  padding-top:9px; border-top:1px solid var(--mp-line)}
/* панель анализов */
body.mapskin .labhost{margin:0 0 20px}
body.mapskin .labcard{background:var(--mp-card2); border-radius:var(--mp-r); padding:22px 24px}
body.mapskin .labcard.empty{border:0}
body.mapskin .labcard .labk,body.mapskin .labcard .labk2{font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.02em; color:var(--mp-mut)}
body.mapskin .labcard .labk2{margin:18px 0 10px}
body.mapskin .labcard .labt{font-family:var(--mp-display); font-size:22px; margin-top:4px}
body.mapskin .labcard .labp{font-size:14.5px; line-height:1.55; color:var(--mp-mut); margin:10px 0 0; max-width:640px}
body.mapskin .labhd{display:flex; justify-content:space-between; align-items:flex-start; gap:14px}
body.mapskin .labsum{font-size:15px; line-height:1.55; color:var(--mp-ink); margin:12px 0 0}
body.mapskin .labsum.off{color:var(--mp-mut)}
body.mapskin .labcard.busy{display:flex; align-items:center; gap:14px; color:var(--mp-mut); font-size:14.5px}
body.mapskin .labspin{width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  border:0; border-top-color:var(--mp-accfg); animation:labspin .8s linear infinite}
@keyframes labspin{to{transform:rotate(360deg)}}
body.mapskin .laberr{margin-top:12px; color:#c0392b; font-size:14px}
/* таблица показателей */
body.mapskin .labtbl{margin-top:14px; display:flex; flex-direction:column; gap:2px}
body.mapskin .labrow{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center;
  padding:9px 14px; border-radius:12px; background:var(--mp-card); font-size:14px}
body.mapskin .labrow .labval{font:600 13px/1 'JetBrains Mono',monospace; color:var(--mp-ink)}
body.mapskin .labrow .labst{font-size:12px; color:var(--mp-mut)}
body.mapskin .labrow.st-low{box-shadow:inset 3px 0 0 var(--mp-acc)}
body.mapskin .labrow.st-low .labst{color:var(--mp-accfg); font-weight:600}
body.mapskin .labrow.st-high{box-shadow:inset 3px 0 0 #e08a1e}
body.mapskin .labrow.st-high .labst{color:#c67810; font-weight:600}
/* комбинаторные советы */
body.mapskin .labrecs{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
body.mapskin .labrec{background:var(--mp-card); border-radius:18px; padding:16px 18px}
body.mapskin .labrec .labrn{font-family:var(--mp-display); font-size:16px; margin-bottom:8px}
body.mapskin .labrec .labln{font-size:13.5px; line-height:1.5; margin:5px 0}
body.mapskin .labrec .lblk{display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; color:var(--mp-mut); margin-right:8px; min-width:52px}
body.mapskin .labrec .labtie{color:var(--mp-accfg)}
body.mapskin .labrec .labwhy{font-size:12.5px; color:var(--mp-mut); margin-top:7px; line-height:1.45}

/* ================= ПЕРСОНАЖИ: лайк, ИИ-поиск, профиль ================= */
/* карточка персонажа держит сердечко в правом верхнем углу */
body.mapskin .charc{position:relative}
/* текст карточки — свои токены, чтобы не наследовать тёмный цвет от цветного
   блока-родителя (внутри лаймовой «В даре» карточка на своём тёмном фоне) */
body.mapskin .charc .charn{color:var(--mp-ink)}
body.mapskin .charc .chars{color:var(--mp-mut)}
body.mapskin .charc .charw{color:var(--mp-ink)}
body.mapskin .charlike{position:absolute; top:12px; right:12px; width:32px; height:32px; flex:0 0 auto;
  border:0; border-radius:50%; background:var(--mp-card); cursor:pointer; display:grid; place-items:center;
  box-shadow:var(--mp-sh); transition:.15s}
body.mapskin .charlike svg{width:17px; height:17px; fill:none; stroke:var(--mp-mut); stroke-width:1.8}
body.mapskin .charlike.on{background:var(--mp-pink)}
body.mapskin .charlike.on svg{fill:#c8306e; stroke:#c8306e}
body.mapskin .charc .charb{padding-right:30px}
/* ИИ-поиск «Найди себя где угодно» */
body.mapskin .findcats{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 12px}
body.mapskin .findcat{border:0; background:var(--mp-card2); color:var(--mp-mut); cursor:pointer;
  font:inherit; font-size:13.5px; padding:8px 16px; border-radius:999px; transition:.15s}
body.mapskin .findcat.on{background:var(--mp-chip); color:#fff}
body.mapskin .findrow{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
body.mapskin .findin{flex:1 1 260px; min-width:200px; border:0; background:var(--mp-card2);
  border-radius:999px; padding:12px 18px; font:inherit; font-size:15px; color:var(--mp-ink)}
body.mapskin .findin:focus{outline:2px solid var(--mp-acc); outline-offset:1px}
body.mapskin .btn.findgo{background:var(--mp-acc); color:#fff; border:0; padding:12px 24px;
  border-radius:999px; font-size:14px}
body.mapskin .findout{margin-top:16px}
body.mapskin .findbusy{display:flex; align-items:center; gap:12px; color:var(--mp-mut); font-size:14.5px}
/* профиль: мои персонажи */
body.mapskin .pfchars{grid-column:1/-1; margin-top:24px}
body.mapskin .pfchars .pfch{font-family:var(--mp-display); font-size:19px; margin-bottom:12px}
/* карта: карточка «тень и дар» — барвинковым акцентом */
body.mapskin .mpc.charmapc{background:rgba(183,180,255,.16)}
body.mapskin .mpc.charmapc .lab{color:#6a61d8}
:root[data-theme="dark"] body.mapskin .mpc.charmapc{background:rgba(169,166,255,.12)}
:root[data-theme="dark"] body.mapskin .mpc.charmapc .lab{color:var(--mp-peri)}
/* разбор ИИ в попапе: тень/дар акценты */
body.mapskin .charc.shadow{box-shadow:inset 3px 0 0 var(--mp-mut)}
body.mapskin .charc.gift{box-shadow:inset 3px 0 0 var(--mp-acc)}
body.mapskin .charai{margin-top:12px}

/* ================= ЕДИНЫЙ ШРИФТ НАДЗАГОЛОВКОВ ================= */
/* Все мелкие капслок-надзаголовки (над h1 в шапках разделов и над
   заголовками блоков/карточек) — моноширинным, одинаково везде. Раньше
   .dosk был mono, а .phk/.ahk — Onest, отсюда разнобой на скриншотах. */
body.mapskin .doshead .dosk, body.mapskin .doshead .dosl,
body.mapskin .profhero .phk, body.mapskin .ahk,
body.mapskin .actlbl, body.mapskin .devgk,
body.mapskin .labk, body.mapskin .labcard .labk2, body.mapskin .ptag,
body.mapskin .phk{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-weight:600; letter-spacing:.03em;
}

/* ================= РАЗВИТИЕ: суб-меню медиа ================= */
body.mapskin .devsub{display:flex; flex-wrap:wrap; gap:8px; background:var(--mp-card2);
  border-radius:999px; padding:5px; margin:0 0 20px; width:fit-content; max-width:100%}
body.mapskin .devsb{border:0; background:transparent; color:var(--mp-mut); cursor:pointer;
  font:inherit; font-size:14px; padding:9px 20px; border-radius:999px; transition:.15s; white-space:nowrap}
body.mapskin .devsb.on{background:var(--mp-chip); color:#fff}
body.mapskin .devprac.course{background:var(--mp-card2); color:var(--mp-ink)}
body.mapskin .devprac.course .devprk{background:var(--mp-acc); color:#fff}
body.mapskin .medc .bka{font:600 12px/1 'JetBrains Mono',monospace; color:var(--mp-mut)}

/* ================= SHUGAY: персонажи культуры ================= */
body.mapskin .chargrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
body.mapskin .charc{display:flex; gap:14px; background:var(--mp-card2); border-radius:var(--mp-r); padding:18px}
body.mapskin .charic{flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:var(--mp-card); color:var(--mp-accfg)}
body.mapskin .charic svg{width:24px; height:24px}
body.mapskin .charn{font-family:var(--mp-display); font-size:18px; line-height:1.15}
/* бейдж совпадения архетипов в ИИ-поиске + честная строка «его архетипы» */
body.mapskin .charmatch{display:inline-block; margin-left:8px; vertical-align:middle;
  font-family:var(--mp-mono); font-size:10.5px; font-weight:600; letter-spacing:.02em;
  padding:2px 8px; border-radius:999px; background:var(--mp-card2); color:var(--mp-mut)}
body.mapskin .charmatch.full{background:var(--mp-lime); color:#161a24}
body.mapskin .charmatch.part{background:var(--mp-peri); color:#161a24}
body.mapskin .charnote{font-family:var(--mp-mono); font-size:11.5px; color:var(--mp-mut); margin:6px 0 0}
body.mapskin .findnote{font-size:13px; color:var(--mp-mut); margin:0 0 10px}
body.mapskin .chars{font-size:12.5px; color:var(--mp-mut); margin-top:2px}
body.mapskin .charw{font-size:13.5px; line-height:1.5; color:var(--mp-ink); margin:8px 0 0}
/* строка «в тени» под героем дара — на лаймовом блоке текст всегда тёмный */
body.mapskin .mpblk.good .charshadow{font-size:13px; line-height:1.5; color:#161a24; margin:12px 2px 0; opacity:.82}
body.mapskin .mpblk.good .charshadow b{opacity:1}

/* ===== Генные ключи: англ. название + смысл слова ===== */
body.mapskin .gkhead .gken{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px;
  letter-spacing:.02em; color:var(--mp-mut); margin:2px 0 0}
body.mapskin .gkenN{font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:500;
  font-size:12px; color:var(--mp-mut)}
body.mapskin .gkmean{background:var(--mp-card2); border-radius:var(--mp-rs); padding:12px 14px; margin:0 0 10px}
body.mapskin .gkmean .gkmeanL{display:block; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--mp-mut); margin-bottom:5px}
body.mapskin .gkmean p{margin:0; font-size:13.5px; line-height:1.55; color:var(--mp-ink)}

/* ===== Натальная карта ===== */
body.mapskin .natinfo{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
body.mapskin .natchip{font-size:12.5px; background:var(--mp-card); color:var(--mp-mut);
  border-radius:999px; padding:7px 13px}
body.mapskin .natchip b{color:var(--mp-ink); font-weight:600}
body.mapskin .natbl{width:100%; border-collapse:collapse; background:var(--mp-card);
  border-radius:var(--mp-r); overflow:hidden; box-shadow:var(--mp-sh)}
body.mapskin .natbl th{font:600 11.5px 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.03em;
  text-transform:uppercase; color:var(--mp-mut); text-align:left; padding:12px 14px;
  border-bottom:1px solid var(--mp-line)}
body.mapskin .natbl td{padding:11px 14px; font-size:14px; border-bottom:1px solid var(--mp-line)}
body.mapskin .natbl tr:last-child td{border-bottom:0}
body.mapskin .natbl .mono{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13px}
body.mapskin .natp{font-weight:600; white-space:nowrap}
body.mapskin .natg{display:inline-block; width:22px; color:var(--mp-accfg); font-size:16px}
body.mapskin .natr{color:var(--mp-accfg); font-weight:700; text-align:center}
body.mapskin .natgate{color:var(--mp-accfg); cursor:pointer; text-decoration:underline dotted}
body.mapskin .natgate:hover{color:var(--mp-ink)}
body.mapskin .natrow{cursor:pointer}
body.mapskin .natrow:hover td{background:var(--mp-card2)}
body.mapskin .natchev{float:right; color:var(--mp-mut); transition:transform .15s; margin-left:8px}
body.mapskin .natrow.open .natchev{transform:rotate(90deg)}
body.mapskin .natdeg,body.mapskin .natlon{color:var(--mp-mut); font-size:12px}
body.mapskin .nathouse{text-align:center; font-weight:600}
body.mapskin .natdetrow>td{padding:0 14px 14px; border-bottom:1px solid var(--mp-line)}
body.mapskin .natdesc{background:var(--mp-card2); border-radius:var(--mp-rs); padding:14px 16px}
body.mapskin .natdesc p{margin:0 0 8px; font-size:13.5px; line-height:1.55; color:var(--mp-ink)}
body.mapskin .natdesc p:last-child{margin-bottom:0}
body.mapskin .natdL{display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px;
  font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--mp-mut); margin-bottom:3px}
body.mapskin .natd4{color:var(--mp-mut)}
/* асцендент */
body.mapskin .natasc{background:var(--mp-peri); color:#161a24; border-radius:var(--mp-r);
  padding:16px 18px; margin:0 0 16px}
body.mapskin .natascH{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; opacity:.7}
body.mapskin .natascV{font-family:var(--mp-display); font-size:26px; margin:2px 0 6px}
body.mapskin .natascP{font-size:13.5px; line-height:1.55; margin:0 0 6px}
body.mapskin .natascN{font-size:12px; opacity:.72; margin:0}
@media (max-width:560px){ body.mapskin .natbl{display:block; overflow-x:auto} }

/* шкала-полоска: используется балансом стихий в натальной карте */
body.mapskin .bzbar{display:grid; grid-template-columns:74px 1fr 40px; gap:10px; align-items:center;
  margin:8px 0; font-size:13px}
body.mapskin .bzbn{font-weight:600}
body.mapskin .bzbt{height:10px; background:var(--mp-card2); border-radius:999px; overflow:hidden}
body.mapskin .mpblk.good .bzbt,body.mapskin .mpblk.acc .bzbt{background:rgba(0,0,0,.12)}
body.mapskin .bzbt i{display:block; height:100%; border-radius:999px}
body.mapskin .bzbv{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; text-align:right}

/* ===== Натальная карта ===== */
body.mapskin .ntwrap{display:grid; place-items:center; margin-bottom:18px}
body.mapskin .ntwheel{width:min(340px,92vw); height:auto}
body.mapskin .ntwheel .ntc{fill:none; stroke:var(--mp-line); stroke-width:1}
body.mapskin .ntwheel .ntl{stroke:var(--mp-line); stroke-width:1}
body.mapskin .ntwheel .ntsg{font-size:15px; text-anchor:middle}
body.mapskin .ntwheel .ntpl{font-size:15px; text-anchor:middle; fill:var(--mp-ink)}
body.mapskin .ntwheel .ntasc{stroke:var(--mp-acc); stroke-width:2}
body.mapskin .nttbl{margin-top:4px}
body.mapskin .ntrow{display:grid; grid-template-columns:26px 116px 1fr; gap:8px 10px;
  align-items:baseline; padding:9px 0; border-bottom:1px solid var(--mp-line)}
body.mapskin .ntrow:last-child{border-bottom:0}
body.mapskin .ntg{font-size:17px}
body.mapskin .ntn{font-weight:600; font-size:13.5px}
body.mapskin .ntr{font-style:normal; font-size:10px; color:#d0553f; vertical-align:super}
body.mapskin .ntsi{font-size:13.5px; font-weight:600}
body.mapskin .nth{grid-column:2/-1; font-size:12px; color:var(--mp-mut)}
body.mapskin .ntd{grid-column:2/-1; font-size:12.5px; color:var(--mp-mut)}
body.mapskin .ntasp{display:grid; grid-template-columns:10px 1fr; gap:4px 10px; margin:10px 0;
  font-size:13.5px; align-items:baseline}
body.mapskin .ntab{width:10px; height:10px; border-radius:50%; margin-top:5px}
body.mapskin .ntat{color:var(--mp-mut); font-size:12.5px}
body.mapskin .ntad{grid-column:2; font-size:12.5px; color:var(--mp-mut)}
body.mapskin .ntbal{margin-top:4px}

/* ===== «Развитие»: реакции на карточке + рефлексия ===== */
body.mapskin .devreactw{margin-top:10px; border-top:1px solid var(--mp-line); padding-top:10px}
body.mapskin .devreact{display:flex; flex-wrap:wrap; gap:7px}
body.mapskin .drx{display:inline-flex; align-items:center; gap:6px; font:600 12.5px Onest,sans-serif;
  background:var(--mp-card2); color:var(--mp-mut); border:0; border-radius:999px;
  padding:7px 11px; cursor:pointer; line-height:1}
body.mapskin .drx svg{display:block}
body.mapskin .drx:hover{color:var(--mp-ink)}
body.mapskin .drx.on{background:var(--mp-chip); color:#fff}
body.mapskin .drx.wide{padding:7px 13px}
body.mapskin .drxnote{margin-top:8px}
body.mapskin .drxnote[hidden]{display:none}
body.mapskin .drxnote textarea{width:100%; resize:vertical}
/* рефлексия */
body.mapskin .pblock.reflect{background:var(--mp-peri); color:#161a24}
body.mapskin .pblock.reflect h3,body.mapskin .pblock.reflect .hint2{color:#161a24}
body.mapskin .pblock.reflect .icw{background:#fff; color:#161a24}
body.mapskin .rflq{margin:14px 0}
body.mapskin .rflqt{font-weight:600; font-size:14.5px; line-height:1.45; margin-bottom:6px; color:#161a24}
body.mapskin .rflta{width:100%; resize:vertical; background:#fff}
body.mapskin .rflcta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(0,0,0,.14)}
body.mapskin .rflctat{font-family:var(--mp-display); font-size:17px; flex:1 1 220px; color:#161a24}
body.mapskin .rflbtn{background:#161a24; color:#fff}

/* ================= РАЗДЕЛ «ДРУЗЬЯ» ================= */
body.mapskin .fradd{background:var(--mp-card); border-radius:var(--mp-r); box-shadow:var(--mp-sh);
  padding:20px 22px; margin-bottom:18px}
body.mapskin .frpick{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
body.mapskin .frpickb{font:600 13.5px Onest,sans-serif; background:var(--mp-chip); color:#fff;
  border:0; border-radius:999px; padding:9px 15px; cursor:pointer}
body.mapskin .frpickb:hover{background:var(--mp-acc)}
body.mapskin .frcard{background:var(--mp-card2); border-radius:var(--mp-rb);
  padding:22px; margin-bottom:20px; box-shadow:var(--mp-sh)}
body.mapskin .frhero{display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-bottom:16px}
body.mapskin .frname{font-family:var(--mp-display); font-size:26px; line-height:1}
body.mapskin .frchips{display:flex; flex-wrap:wrap; gap:6px}
body.mapskin .frchip{font:600 12px 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.02em; background:var(--mp-card);
  color:var(--mp-mut); border-radius:999px; padding:5px 11px}
body.mapskin .fracts{margin-left:auto; display:flex; flex-wrap:wrap; gap:8px}
body.mapskin .fredit{font:600 12.5px Onest,sans-serif; background:var(--mp-card2); color:var(--mp-ink);
  border:0; border-radius:999px; padding:7px 13px; cursor:pointer}
body.mapskin .fredit:hover{background:var(--mp-chip); color:#fff}
body.mapskin .frrm{font:600 12.5px Onest,sans-serif; background:transparent;
  color:var(--mp-mut); border:0; border-radius:999px; padding:7px 12px; cursor:pointer}
body.mapskin .frrm:hover{background:var(--mp-card); color:var(--mp-ink)}
body.mapskin .frbento{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
body.mapskin .frbento .mpbw{grid-column:1/-1}
@media (max-width:640px){ body.mapskin .frbento{grid-template-columns:1fr} }
/* поле профессии + шкала совместимости */
body.mapskin .frjob{margin:4px 0 10px}
body.mapskin .frmeter{display:flex; align-items:center; gap:12px; margin:4px 0 8px}
body.mapskin .frbar{flex:1; height:12px; background:var(--mp-card2); border-radius:999px; overflow:hidden}
body.mapskin .mpblk.acc .frbar{background:rgba(0,0,0,.12)}
body.mapskin .frbar i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--mp-acc),var(--mp-lime))}
body.mapskin .frpct{font-family:var(--mp-display); font-size:22px; min-width:52px; text-align:right}
body.mapskin .frverdict{font-weight:600; margin:2px 0 8px}
body.mapskin .frreason{font-size:13.5px; line-height:1.5; margin:6px 0}
body.mapskin .frreason b{font-weight:700}
body.mapskin .frline{font-size:13px; line-height:1.5; margin:8px 0 0}
body.mapskin .frline.quiet{color:var(--mp-mut)}
body.mapskin .frbtn, body.mapskin .frfitgo{margin-top:4px}
/* сильные стороны / советы / роли */
body.mapskin .frstr{font-size:13.5px; line-height:1.5; margin:8px 0}
body.mapskin .frstr b{font-weight:700}
body.mapskin .frstre{display:block; color:var(--mp-mut); font-size:12.5px; margin-top:2px}
body.mapskin .frroles{display:flex; flex-wrap:wrap; gap:7px; margin-top:4px}
body.mapskin .frrole{font:600 12.5px Onest,sans-serif; background:var(--mp-card); color:var(--mp-ink);
  border-radius:999px; padding:6px 12px}
body.mapskin .frrole.hot{background:var(--mp-chip); color:#fff}
body.mapskin .frfield{margin:8px 0}
body.mapskin .frfield .pflbl{display:block; margin-bottom:4px}
/* матч-шкала по уровню */
body.mapskin .frbar.good i{background:linear-gradient(90deg,var(--mp-acc),var(--mp-lime))}
body.mapskin .frbar.mid i{background:linear-gradient(90deg,var(--mp-acc),var(--mp-peri))}
body.mapskin .frbar.low i{background:linear-gradient(90deg,#c98a8a,#e0a0a0)}
/* ===== КОМАНДА ===== */
body.mapskin .tmcov{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
body.mapskin .tmcen{font:600 12.5px Onest,sans-serif; border-radius:999px; padding:7px 12px}
body.mapskin .tmcen.on{background:#161a24; color:#fff}
body.mapskin .tmcen.off{background:rgba(0,0,0,.10); color:#161a24; opacity:.7}
body.mapskin .tmcen b{opacity:.7; font-weight:700}
body.mapskin .tmbetter{margin-top:10px; padding:11px 13px; border-radius:var(--mp-rs);
  background:var(--mp-peri); color:#161a24; font-size:13.5px; line-height:1.5}

/* ================= ТЁМНАЯ ТЕМА (через токены) ================= */
/* По системе тёмная — НЕ инверсия, а своя шкала: фон глубокий сине-серый,
   поверхности поднимаются светлее на 4–6%, границ почти нет — слои разделяет
   заливка. Акцент — тот же почти-чёрный, но поднят до графитового, иначе
   кнопка сливалась бы с фоном; белый текст на нём читается. Лайм и розовый
   остаются прежними. */
:root[data-theme="dark"]{
  --mp-bg:#101010; --mp-card:#0b0b0b; --mp-card2:#161616; --mp-ink:#f2f4f9;
  --mp-mut:#8b8b8b; --mp-hint:#6e6e6e; --mp-line:#1e1e1e; --mp-body:#c9c9c9;
  --mp-track:#1d222a; --mp-chip:#2b313b; --mp-dark:#0a0c10; --mp-accsoft:#23262c;
  --mp-acc:#343941; --mp-acc2:#454b55; --mp-peri:#a9a6ff; --mp-accfg:#e7e9ee;
  --mp-sh:none; --mp-shacc:none; --mp-sh2:none;
  /* старые токены styles.css */
  --bg:#0a0c10; --card:#14171d; --ink:#f2f4f9; --mut:#8b93a1; --line:#242a33;
  /* ⚠️ --p — чернильный цвет «Личности» из styles.css. Раньше он лежал на
     жёстко белых плашках и потому работал; теперь плашки следуют теме, и в
     тёмной тёмный текст пропадал. Легенда и квадратики-образцы используют
     --p как ЗАЛИВКУ, поэтому светлый здесь верен для обеих ролей. */
  --p:#e7e9ee;
}
:root[data-theme="dark"] body.mapskin{background-color:var(--mp-bg); color:var(--mp-ink)}
:root[data-theme="dark"] .hdr2{background-color:transparent}
:root[data-theme="dark"] .rdnote.warnbox{background:#3a1f1f; color:#ffb3b3}
:root[data-theme="dark"] .plus .exq{color:#7fc99f}
:root[data-theme="dark"] .plus{border-left-color:#3a4150}

/* Бодиграф в тёмной теме перекрашивается прямо в chart.js (Личность светлеет,
   пустые центры/ворота тёмные) — карточка со схемой обычная тёмная.
   Ярлыки «Личность» над схемой (--mp-p = почти чёрный) на тёмной карте
   светлеют в тон перекрашенной Личности; «Дизайн» красный читается как есть. */
:root[data-theme="dark"] .mpside.p{color:#c9cfdd}
:root[data-theme="dark"] .mpside.p i{background:#c9cfdd}
/* классические компоненты старых разделов (Транзиты/Композит и т.п.) —
   в styles.css у них захардкожены светлые фоны; флипаем через токены */
:root[data-theme="dark"] .allsw,
:root[data-theme="dark"] .chip{background:var(--mp-card2); border-color:var(--mp-line); color:var(--mp-ink)}
:root[data-theme="dark"] .chip span{color:var(--mp-mut)}
:root[data-theme="dark"] .crhow{background:var(--mp-card2); color:var(--mp-ink)}
:root[data-theme="dark"] .nsi{background:#2a2323; border-color:#4a3535; color:#f0d8d8}
:root[data-theme="dark"] .crg,
:root[data-theme="dark"] .cbtn{background:var(--mp-card2); border-color:var(--mp-line); color:var(--mp-ink)}
:root[data-theme="dark"] .cbtn.on{background:var(--mp-chip); color:#fff; border-color:var(--mp-chip)}


/* ================= ПЛАТФОРМА: анкета, консультация, вебинары, продукт ================= */
body.mapskin .plh2{font-family:var(--mp-display); font-size:22px; margin:26px 0 8px}
body.mapskin .plhint{font-size:13.5px; color:var(--mp-mut); line-height:1.55; margin:0 0 14px; max-width:900px}
body.mapskin .plcard{background:var(--mp-card); border-radius:var(--mp-r); box-shadow:var(--mp-sh);
  padding:22px; margin-bottom:16px}
body.mapskin .plcard.dark{background:var(--mp-dark,#14171d); color:#e9ecf2}
body.mapskin .plcard.dark .plh2{color:#fff}
body.mapskin .plcard.acc{background:var(--mp-peri); color:#161a24}
body.mapskin .plcard.acc .plh2,body.mapskin .plcard.acc .plhint{color:#161a24}
body.mapskin .plrow2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:640px){ body.mapskin .plrow2{grid-template-columns:1fr} }
body.mapskin .plf{display:block; margin-bottom:12px}
body.mapskin .plf .pflbl{display:block; margin-bottom:5px; font-size:12.5px; color:var(--mp-mut)}
body.mapskin .plchips{display:flex; flex-wrap:wrap; gap:8px}
body.mapskin .plchip{font:600 13px Onest,sans-serif; background:var(--mp-card2); color:var(--mp-ink);
  border:0; border-radius:999px; padding:9px 15px; cursor:pointer}
body.mapskin .plchip.on{background:var(--mp-chip); color:#fff}
body.mapskin .plgoals{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
body.mapskin .plgoal{display:block; text-align:left; background:var(--mp-card); color:var(--mp-ink);
  border:0; border-radius:var(--mp-r); box-shadow:var(--mp-sh);
  padding:16px 18px; cursor:pointer; font:inherit}
body.mapskin .plgoals.static .plgoal{cursor:default}
body.mapskin .plgoal.on{border-color:var(--mp-accfg)}
body.mapskin .plgoal b{display:block; font-family:var(--mp-display); font-size:17px; margin-bottom:4px}
body.mapskin .plgoal span{display:block; font-size:13px; color:var(--mp-mut); line-height:1.5}
body.mapskin .plgoal .plt{display:block; font-style:normal; font:600 11.5px 'JetBrains Mono',ui-monospace,monospace;
  color:var(--mp-accfg); margin-bottom:4px}
body.mapskin .plli{position:relative; padding-left:20px; margin:8px 0; font-size:13.5px; line-height:1.55}
body.mapskin .plli:before{content:'—'; position:absolute; left:0; opacity:.5}
body.mapskin .packs{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
body.mapskin .packc{background:var(--mp-card); border-radius:var(--mp-rb); box-shadow:var(--mp-sh); padding:22px}
body.mapskin .packn{font-family:var(--mp-display); font-size:24px}
body.mapskin .packt{font:600 11.5px 'JetBrains Mono',ui-monospace,monospace; color:var(--mp-mut);
  letter-spacing:.03em; margin-bottom:10px}
body.mapskin .packf{font-size:13.5px; line-height:1.55; margin:0 0 10px}
body.mapskin .packc .btn{margin-top:14px}
/* ===== ВЕБИНАРЫ =====
   Раскладка по референсу каталога курсов: слева лента карточек-СТРОК
   (обложка · текст · действие), справа рейка «неделя + расписание».
   Карточка-столбик тут не годится — у эфира короткий заголовок и длинное
   описание, в колонке 320px оно рвётся на восемь строк, а в строке живёт
   в две. Ниже 1080px рейка уезжает наверх, ниже 720 расписание прячется
   в кнопку-окно (см. медиазапросы в конце файла). */
body.mapskin .webbar{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:0 0 20px}
body.mapskin .websearch{display:flex; align-items:center; gap:9px; flex:1 1 240px;
  max-width:340px; min-width:0; height:44px; padding:0 18px; border-radius:999px;
  background:var(--mp-card); box-shadow:var(--mp-sh); color:var(--mp-mut)}
body.mapskin .websearch svg{flex:0 0 auto}
body.mapskin .websearch input{flex:1 1 auto; min-width:0; border:0; outline:none;
  background:transparent; font:inherit; font-size:14px; color:var(--mp-ink)}
/* Вкладки — текстом с точкой у активной, как в референсе: капсула рядом с
   капсулой-поиском давала две одинаковые пилюли в ряд и спорила сама с собой */
body.mapskin .webtabs{display:flex; gap:22px; min-width:0; overflow-x:auto; scrollbar-width:none}
body.mapskin .webtabs::-webkit-scrollbar{display:none}
body.mapskin .webtab{flex:0 0 auto; border:0; background:none; padding:6px 0; cursor:pointer;
  font-weight:600; font-size:14.5px; color:var(--mp-mut); white-space:nowrap}
body.mapskin .webtab:hover{color:var(--mp-body)}
body.mapskin .webtab.on{color:var(--mp-ink)}
body.mapskin .webtab.on::before{content:''; display:inline-block; vertical-align:middle;
  width:6px; height:6px; border-radius:50%; background:var(--mp-lime); margin:-2px 7px 0 0}

body.mapskin .weblay{display:grid; grid-template-columns:minmax(0,1fr) 330px;
  gap:20px; align-items:start}
body.mapskin .weblist{display:flex; flex-direction:column; gap:14px; min-width:0}

/* ---- карточка-строка ---- */
body.mapskin .webrow{display:grid; grid-template-columns:132px minmax(0,1fr) auto;
  gap:20px; align-items:center; padding:16px;
  background:var(--mp-card); border-radius:var(--mp-r); box-shadow:var(--mp-sh);
  transition:transform .14s, background .14s}
body.mapskin .webrow:hover{transform:translateY(-2px)}
body.mapskin .webth{width:132px; height:132px; border-radius:22px; overflow:hidden;
  display:grid; place-items:center; flex:0 0 auto}
/* Фон плитки взят пипеткой из самой картинки: если он не совпадёт, по краю
   скруглённого угла видно светлый шов. */
body.mapskin .webth.t1{background:#e0e77f}
body.mapskin .webth.t2{background:#a7b1ee}
body.mapskin .webth.t3{background:#f7b5b7}
body.mapskin .webth img{width:100%; height:100%; object-fit:cover; display:block}
body.mapskin .webinfo{min-width:0}
body.mapskin .webtop{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
/* цвет задаём явно: h3 внутри .dos наследует приглушённый --mut из styles.css,
   и заголовок карточки выходил серым вместо чернильного */
body.mapskin .webt{font-family:var(--mp-display); font-size:19px; line-height:1.25;
  font-weight:600; margin:0; color:var(--mp-ink)}
body.mapskin .webseats{flex:0 0 auto; font:600 11.5px/1 'JetBrains Mono',ui-monospace,monospace;
  color:var(--mp-mut); background:var(--mp-card2); border-radius:999px; padding:7px 11px;
  white-space:nowrap}
body.mapskin .webseats.none{color:var(--mp-d)}
body.mapskin .webx{margin:7px 0 0; font-size:14px; line-height:1.5; color:var(--mp-mut);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
body.mapskin .webtags{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0}
body.mapskin .webtag{font:600 11px 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.02em;
  color:var(--mp-mut); background:var(--mp-card2); border-radius:999px; padding:5px 10px}
body.mapskin .webfoot{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:11px 0 0}
body.mapskin .webwhen{font-size:13px; color:var(--mp-mut)}
body.mapskin .webwhen b{color:var(--mp-ink); font-weight:600}
body.mapskin .webcd{display:inline-block; margin:0;
  font:600 11.5px/1 'JetBrains Mono',ui-monospace,monospace;
  background:var(--mp-lime); color:#161a24; border-radius:999px; padding:6px 11px}
body.mapskin .webact{flex:0 0 auto; display:flex; flex-direction:column; gap:8px;
  min-width:158px; max-width:200px}
body.mapskin .webbtn{border:0; cursor:pointer; border-radius:999px; padding:13px 22px;
  font-weight:600; font-size:14px; background:var(--mp-acc); color:#fff;
  box-shadow:var(--mp-sh); transition:background .14s}
body.mapskin .webbtn:hover{background:var(--mp-acc2)}
body.mapskin .webbtn[disabled]{background:var(--mp-card2); color:var(--mp-mut); cursor:default}
body.mapskin .webbtn.wide{width:100%; margin-top:6px}
body.mapskin .webok{background:var(--mp-lime); color:#161a24; border-radius:var(--mp-rs);
  padding:11px 14px; font-size:13px; line-height:1.5}
body.mapskin .webwait{background:var(--mp-card2); color:var(--mp-ink); border-radius:var(--mp-rs);
  padding:11px 14px; font-size:13px; line-height:1.5; text-align:center}

body.mapskin .webfilt{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--mp-mut)}
body.mapskin .webfilt span{background:var(--mp-accsoft); color:var(--mp-ink); font-weight:600;
  border-radius:999px; padding:6px 12px}
body.mapskin .webfilt button{border:0; background:none; cursor:pointer; font:inherit;
  color:var(--mp-mut); text-decoration:underline}
body.mapskin .webempty{display:flex; flex-direction:column; align-items:center; gap:7px;
  text-align:center; padding:38px 30px; background:var(--mp-card);
  border-radius:var(--mp-r); box-shadow:var(--mp-sh)}
body.mapskin .webempty b{font-family:var(--mp-display); font-size:19px}
body.mapskin .webempty span{font-size:14px; color:var(--mp-mut); max-width:400px}

/* ---- правая рейка ---- */
body.mapskin .webside{min-width:0; position:sticky; top:78px}
body.mapskin .webrail{display:flex; flex-direction:column; gap:14px}
body.mapskin .webcal, body.mapskin .websch{background:var(--mp-card);
  border-radius:var(--mp-r); box-shadow:var(--mp-sh); padding:18px}
body.mapskin .webcalh, body.mapskin .webschh{display:flex; align-items:center;
  justify-content:space-between; gap:10px; margin:0 0 14px}
body.mapskin .webcalh b, body.mapskin .webschh b{font-family:var(--mp-display); font-size:16px}
body.mapskin .webcalnav{display:flex; gap:6px}
body.mapskin .webcalnav button{width:28px; height:28px; border:0; border-radius:50%; cursor:pointer;
  background:var(--mp-card2); color:var(--mp-mut); font-size:17px; line-height:1}
body.mapskin .webcalnav button:hover{background:var(--mp-accsoft); color:var(--mp-ink)}
body.mapskin .webdays{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px}
body.mapskin .webday{position:relative; border:0; background:none; cursor:default;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:8px 0 13px; border-radius:15px}
body.mapskin .webday i{font-style:normal; font-size:11px; font-weight:600; color:var(--mp-mut)}
body.mapskin .webday b{font:600 15px/1 'JetBrains Mono',ui-monospace,monospace; color:var(--mp-mut)}
body.mapskin .webday.now b{text-decoration:underline; text-underline-offset:3px}
/* точка под числом = в этот день есть эфир; только такие дни и кликаются */
body.mapskin .webday.has{cursor:pointer}
body.mapskin .webday.has b{color:var(--mp-ink)}
body.mapskin .webday.has::after{content:''; position:absolute; bottom:5px;
  width:5px; height:5px; border-radius:50%; background:var(--mp-lime)}
body.mapskin .webday.has:hover{background:var(--mp-card2)}
body.mapskin .webday.on{background:var(--mp-acc)}
body.mapskin .webday.on i, body.mapskin .webday.on b{color:#fff}
body.mapskin .weball{border:0; background:none; cursor:pointer; font-weight:600;
  font-size:13px; color:var(--mp-mut)}
body.mapskin .weball:hover{color:var(--mp-ink)}
body.mapskin .webschl{display:flex; flex-direction:column; gap:2px}
body.mapskin .webschr{display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:11px;
  align-items:center; width:100%; text-align:left; cursor:pointer;
  border:0; background:none; padding:10px 9px; border-radius:16px}
body.mapskin .webschr:hover{background:var(--mp-card2)}
body.mapskin .wsn{font:700 17px/1 'JetBrains Mono',ui-monospace,monospace; color:var(--mp-ink)}
body.mapskin .wsb{min-width:0}
body.mapskin .wsb b{display:block; font-size:13.5px; font-weight:600; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.mapskin .wsb i{font-style:normal; font-size:11.5px; color:var(--mp-mut)}
body.mapskin .wst{text-align:right; font:600 12px/1.45 'JetBrains Mono',ui-monospace,monospace;
  color:var(--mp-mut)}
body.mapskin .wst i{display:block; font-style:normal; color:var(--mp-mut)}
body.mapskin .webschbtn{display:none; width:100%; border:0; cursor:pointer;
  border-radius:var(--mp-rs); padding:14px; font-weight:600; font-size:14px;
  background:var(--mp-card); color:var(--mp-ink); box-shadow:var(--mp-sh)}

body.mapskin .websign{display:flex; flex-direction:column}

/* ---- окно раздела: запись и расписание ---- */
body.mapskin .plpop{position:fixed; inset:0; z-index:140; padding:20px; overflow:auto;
  background:rgba(13,16,20,.45); display:grid; place-items:center}
body.mapskin .plpopbox{display:flex; flex-direction:column; width:min(560px,100%);
  max-height:calc(100dvh - 40px); background:var(--mp-card2);
  border-radius:var(--mp-rp); box-shadow:var(--mp-sh2)}
body.mapskin .plpoph{display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; padding:24px 26px 12px}
body.mapskin .plpoph b{font-family:var(--mp-display); font-size:20px; line-height:1.22}
body.mapskin .plpopx{flex:0 0 auto; width:36px; height:36px; border:0; border-radius:50%;
  cursor:pointer; background:var(--mp-card); color:var(--mp-ink); font-size:13px;
  box-shadow:var(--mp-sh)}
body.mapskin .plpopb{padding:4px 26px 26px; overflow:auto}

/* колокольчик и уведомления */
body.mapskin .plbell{position:relative}
body.mapskin .pldot{position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%;
  background:#e0563b}
body.mapskin .plsheet{max-height:80vh; overflow:auto}
body.mapskin .plnote{border-top:1px solid var(--mp-line); padding:12px 0}
body.mapskin .plnote b{display:block; font-size:14px}
body.mapskin .plnote span{display:block; font-size:13px; color:var(--mp-mut); margin-top:2px; line-height:1.5}
body.mapskin .plnote i{display:block; font-style:normal; font-size:11px; color:var(--mp-hint); margin-top:4px}
body.mapskin .plnote.new b:after{content:'•'; color:#e0563b; margin-left:6px}
body.mapskin .pltoast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--mp-chip); color:#fff; border-radius:999px; padding:12px 20px; font-size:13.5px;
  z-index:9999; box-shadow:var(--mp-sh2); transition:opacity .5s}
body.mapskin .pltoast.go{opacity:0}
body.mapskin .pltoast.bad{background:#c0392b}
/* ================= АДМИНКА ================= */
body.mapskin .adstats{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;
  margin-bottom:20px}
body.mapskin .adstat{background:var(--mp-card); border-radius:var(--mp-r); box-shadow:var(--mp-sh); padding:16px}
body.mapskin .adsn{font-family:var(--mp-display); font-size:30px; line-height:1}
body.mapskin .adsl{font-size:12px; color:var(--mp-mut); margin-top:4px}
body.mapskin .adh{font-family:var(--mp-display); font-size:17px; margin:0 0 10px}
body.mapskin .adgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px;
  margin-top:18px}
body.mapskin .adcard{background:var(--mp-card); border-radius:var(--mp-r); box-shadow:var(--mp-sh); padding:18px}
body.mapskin .adbars{margin-top:4px}
body.mapskin .adbar{display:grid; grid-template-columns:130px 1fr 36px; gap:8px; align-items:center;
  margin:7px 0; font-size:12.5px}
body.mapskin .adbn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
body.mapskin .adbt{height:9px; background:var(--mp-card2); border-radius:999px; overflow:hidden}
body.mapskin .adbt i{display:block; height:100%; background:var(--mp-acc); border-radius:999px}
body.mapskin .adbv{font-family:'JetBrains Mono',ui-monospace,monospace; text-align:right}
body.mapskin .adspark{width:100%; height:120px; background:var(--mp-card); border-radius:var(--mp-r);
  box-shadow:var(--mp-sh); padding:10px}
body.mapskin .adlist{margin-top:14px}
body.mapskin .adrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--mp-card); border-radius:var(--mp-r); box-shadow:var(--mp-sh);
  padding:14px 18px; margin-bottom:10px; font-size:13.5px}
body.mapskin .adrow > div:first-child{flex:1 1 260px}
body.mapskin .admut{color:var(--mp-mut); font-size:12.5px}
body.mapskin .adst{font:600 11px 'JetBrains Mono',ui-monospace,monospace; border-radius:999px;
  padding:5px 10px; background:var(--mp-card2); color:var(--mp-mut)}
body.mapskin .adst.approved{background:var(--mp-lime); color:#161a24}
body.mapskin .adst.declined{background:#e6d0d0; color:#7a2f2f}
body.mapskin .adcov{height:110px; border-radius:var(--mp-rs); background:center/cover no-repeat; margin-top:8px}
body.mapskin .adbody{margin-top:16px}

/* Плашки с КОНСТАНТНЫМ светлым фоном (барвинок/лайм): текст на них всегда
   тёмный — в тёмной теме --mp-mut светлеет и подписи полей пропадали
   (контраст 1.41 на «Что вам ближе» в фокус-группе). */
body.mapskin .plcard.acc .pflbl,
body.mapskin .plcard.acc .plhint,
body.mapskin .plcard.acc .webok{color:#161a24}
body.mapskin .plcard.acc .pflbl{opacity:.72}
body.mapskin .plcard.acc .pfin{background:#fff; color:#161a24}
body.mapskin .plcard.acc .plchip{background:rgba(255,255,255,.72); color:#161a24}
body.mapskin .plcard.acc .plchip.on{background:#161a24; color:#fff}

/* метки целей на карточке вебинара */
body.mapskin .webtags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
body.mapskin .webtag{font:600 11px 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.02em;
  background:var(--mp-card2); color:var(--mp-mut); border-radius:999px; padding:4px 10px}
body.mapskin .natbento{margin-top:18px}

/* ===== иллюстрации раздела «Консультация» (ретро-рисограф) ===== */
body.mapskin .plhero{border-radius:var(--mp-rb); overflow:hidden; margin:0 0 22px;
  box-shadow:var(--mp-sh); background:var(--mp-card2)}
body.mapskin .plhero img{display:block; width:100%; height:auto}
@media (max-width:640px){ body.mapskin .plhero{border-radius:var(--mp-r)} }
/* карточка с иллюстрацией: картинка слева, текст справа */
body.mapskin .plgoal.ill{display:grid; grid-template-columns:64px 1fr; gap:6px 14px;
  align-items:start; padding:16px}
body.mapskin .plgoal.ill .plill{grid-row:1/4; width:64px; height:64px; border-radius:16px;
  object-fit:cover; background:var(--mp-card2)}
body.mapskin .plgoal.ill b,body.mapskin .plgoal.ill .plt,body.mapskin .plgoal.ill span{grid-column:2}
body.mapskin .plgoal.ill.on .plill{outline:2px solid var(--mp-acc); outline-offset:1px}

/* На узком экране текстовые кнопки шапки (Вебинары/Продукт/Консультация)
   не помещаются и растягивают страницу — эти же разделы есть в нижнем меню
   и в бургере «Ещё», поэтому на мобильном их из шапки убираем. */
@media (max-width:720px){
  body.mapskin .mpseg{display:none}
  body.mapskin .hdr2in .act{flex-wrap:wrap; justify-content:flex-end}
}
/* На узких экранах flex/grid-элементы не сжимались ниже содержимого
   (min-width:auto), и страница уезжала вбок: сетки в одну колонку,
   контейнерам разрешаем сжиматься. */
@media (max-width:720px){
  body.mapskin .dos,body.mapskin .hdr2in .act,body.mapskin .appcol,body.mapskin main{min-width:0}
  body.mapskin .plgoals,body.mapskin .packs,
  body.mapskin .adgrid,body.mapskin .adstats{grid-template-columns:1fr}
  body.mapskin .plgoal.ill{grid-template-columns:52px 1fr}
  body.mapskin .plgoal.ill .plill{width:52px; height:52px}
}
/* Шапка на телефоне: оставляем только карту, «＋», колокольчик и аккаунт.
   «Изменить» доступно из самой карты, «База» — редкое действие. */
@media (max-width:720px){
  body.mapskin #mpEdit,body.mapskin #mpSrc{display:none}
  body.mapskin .mpsel#mpCur{max-width:104px}
  body.mapskin .hdr2in .act{gap:6px}
  body.mapskin .act .mpb{padding-left:11px; padding-right:11px}
}

/* шапка раздела: текст + иллюстрация справа, на телефоне — друг под другом */
/* Шапка раздела — ОДИН контейнер: слева заголовок и текст, справа картинка.
   Раньше .doshead была отдельной карточкой, а иллюстрация висела рядом
   самостоятельным блоком и торчала выше. */
body.mapskin .plsplit{display:grid; grid-template-columns:1fr 320px; gap:28px;
  align-items:center; background:var(--mp-card); border-radius:28px;
  box-shadow:var(--mp-sh); padding:28px 30px; margin:0 0 22px}
body.mapskin .plsplit .doshead{margin:0; padding:0; background:none; box-shadow:none;
  border-radius:0}
body.mapskin .plsplitart{position:relative; align-self:stretch; min-height:190px}
body.mapskin .plsplitart img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; border-radius:var(--mp-r)}
@media (max-width:860px){
  body.mapskin .plsplit{grid-template-columns:1fr; padding:22px; gap:18px}
  body.mapskin .plsplitart{min-height:0; position:static; order:-1}
  body.mapskin .plsplitart img{position:static; height:auto; aspect-ratio:16/9}
}
/* иллюстрация пакета в «Продукте» */
body.mapskin .packill{width:72px; height:72px; border-radius:18px; object-fit:cover;
  display:block; margin-bottom:10px; background:var(--mp-card2)}
/* активная кнопка раздела в шапке */
body.mapskin .act .mpb.on{background:var(--mp-chip); color:#fff}
/* часы и дата в шапке */
body.mapskin .mpclock{display:inline-flex; flex-direction:column; align-items:flex-end;
  line-height:1.15; padding:0 4px}
body.mapskin .mpclock b{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:14px}
body.mapskin .mpclock i{font-style:normal; font-size:10.5px; color:var(--mp-mut)}
@media (max-width:900px){ body.mapskin .mpclock{display:none} }
/* сворачиваемые группы бокового меню */
body.mapskin .sbgrp{display:flex; align-items:center; justify-content:space-between;
  width:100%; background:transparent; border:0; cursor:pointer; text-align:left;
  font:600 11px 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.05em;
  text-transform:uppercase; color:var(--mp-mut); padding:12px 12px 6px}
body.mapskin .sbgrp:hover{color:var(--mp-ink)}
body.mapskin .sbarrow{font-style:normal; transition:transform .15s; opacity:.7}
body.mapskin .sbgrp.open .sbarrow{transform:rotate(90deg)}
body.mapskin .sbbox[hidden]{display:none}
@media (max-width:1160px){ body.mapskin .sbgrp span{display:none} }

/* ===== СТЕКЛЯННЫЕ КАПСУЛЫ В ШАПКЕ ===== */
/* Полупрозрачная подложка с размытием — сквозь неё видно точечный фон. */
body.mapskin .glass{
  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border:0;
}
body.mapskin .glass:hover{background:rgba(255,255,255,.62) !important}
/* сегментная капсула: три раздела в одной оболочке, кнопки мельче */
body.mapskin .mpseg{display:inline-flex; align-items:center; gap:2px;
  padding:3px; border-radius:999px}
body.mapskin .mpsb{font:600 12.5px Onest,sans-serif; line-height:1;
  background:transparent; color:var(--mp-mut); border:0; border-radius:999px;
  padding:7px 12px; cursor:pointer; white-space:nowrap}
body.mapskin .mpsb:hover{color:var(--mp-ink)}
body.mapskin .mpsb.on{background:var(--mp-chip); color:#fff}
/* тёмная тема: стекло тёмное, иначе белая плашка выжигает шапку */
:root[data-theme="dark"] body.mapskin .glass{
  background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.10);
}
:root[data-theme="dark"] body.mapskin .glass:hover{background:rgba(255,255,255,.13) !important}

/* ⚠️ --mp-acc2 работает в двух ролях сразу: фон наведения у кнопки (под белым
   текстом — значит тёмный) и цвет текста поверх --mp-accsoft. Пока акцент был
   синим, одно значение тянуло обе роли. С почти-чёрным акцентом в тёмной теме
   текст цвета acc2 лёг бы графитом на графит — поэтому в этой роли берём ink. */
/* Колёса, датчики и кольца в попапах: активная часть теперь рисуется
   currentColor (то есть цветом текста), поэтому в светлой она почти чёрная,
   а в тёмной — светлая и не пропадает. Дорожка `.dtrk` красится токеном:
   CSS перебивает presentation-атрибут, значение в разметке — запасное. */
:root[data-theme="dark"] body.mapskin .dtrk{stroke:#2b2f36}

:root[data-theme="dark"] .mpxg:hover,
:root[data-theme="dark"] .mpxg:hover span,
:root[data-theme="dark"] .mpchip:hover,
:root[data-theme="dark"] .srcchip.gate:hover{color:var(--mp-ink)}

/* Точечная сетка на фоне убрана по просьбе заказчика — ровная заливка.
   ⚠️ Здесь и в .hdr2 фон задаём background-color, а не шорткатом: стеклянные
   блоки поверх рассчитывают на чистый фон, а шорткат позже в каскаде сносит
   любые фоновые слои разом. */
body.mapskin{ background-color:var(--mp-bg); background-image:none }
body.mapskin .hdr2{ background-color:transparent; background-image:none }

/* ===== КОНСУЛЬТАЦИЯ: две колонки, квадратная обложка, вопросы ===== */
/* Слева обложка, справа первый шаг — раньше картинка шла во всю ширину
   и отжимала содержимое вниз. */
body.mapskin .plcols{display:grid; grid-template-columns:320px 1fr; gap:20px;
  align-items:start; margin-bottom:8px}
body.mapskin .plsq{position:relative; aspect-ratio:1/1; border-radius:var(--mp-rb);
  overflow:hidden; box-shadow:var(--mp-sh); background:var(--mp-card2)}
body.mapskin .plsq img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block}
body.mapskin .plh2.first{margin-top:0}
/* карточки шага «с чем приходите» — в две колонки, а не во всю длину */
body.mapskin .plgoals.two{grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:column; grid-template-rows:repeat(3,auto)}
/* ⚠️ column-flow надо гасить вместе с колонками: иначе браузер создаёт
   неявные колонки и на телефоне карточки всё равно идут в два ряда. */
@media (max-width:1200px){ body.mapskin .plgoals.two{grid-template-columns:1fr;
  grid-auto-flow:row; grid-template-rows:none} }
@media (max-width:860px){
  body.mapskin .plcols{grid-template-columns:1fr}
  body.mapskin .plsq{max-width:340px; aspect-ratio:4/3}
}
/* Второй шаг — сетка 3 ряда × 2 колонки, заполняется ПО КОЛОНКАМ:
   слева запрос и два вопроса, справа обложка и ещё два. Ряды одной высоты,
   поэтому картинка совпадает с карточками по ширине и высоте. */
body.mapskin .plq2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,1fr); grid-auto-flow:column; gap:14px}
body.mapskin .qart{position:relative; border-radius:var(--mp-r); overflow:hidden;
  box-shadow:var(--mp-sh); background:var(--mp-card2); min-height:100%}
body.mapskin .qart img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block}
@media (max-width:860px){
  body.mapskin .plq2{grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row}
  body.mapskin .qart{min-height:0; aspect-ratio:4/3}
}
body.mapskin .qcard{margin-bottom:0}
body.mapskin .qh{font-family:var(--mp-display); font-size:16px; line-height:1.25; margin-bottom:4px}
body.mapskin .qhint{font-size:12.5px; color:var(--mp-mut); line-height:1.5; margin:0 0 8px}
body.mapskin .qcard .plf{margin-bottom:0}
body.mapskin .qcard .pflbl{display:none}
/* остальные блоки шагов тоже не на всю длину */
body.mapskin .consultv .plcard{max-width:940px}
body.mapskin .consultv .plq2 .plcard,body.mapskin .consultv .plrow2{max-width:none}
/* ⚠️ Белая рамка вокруг иконки была браузерным outline при фокусе кнопки —
   заменяем на аккуратную подсветку самой карточки. */
body.mapskin .plgoal:focus{outline:none}
body.mapskin .plgoal:focus-visible{outline:2px solid var(--mp-acc); outline-offset:2px}
body.mapskin .plgoal.ill.on .plill{outline:none; box-shadow:0 0 0 2px var(--mp-acc)}
/* ответы на вопросы в админке */
body.mapskin .adans{flex:1 1 100%; margin-top:10px; border-top:1px solid var(--mp-line);
  padding-top:10px}
body.mapskin .adans[hidden]{display:none}
body.mapskin .adansq{margin:8px 0; font-size:13px; line-height:1.5}
body.mapskin .adansq b{display:block; font-weight:600}
body.mapskin .adansq span{color:var(--mp-mut)}

/* ===== СТЕКЛЯННЫЕ БЛОКИ: точки фона просвечивают сквозь карточки ===== */
/* Блоки — плотные, цвета из макета: карточка на листе.
   Прозрачность была нужна ради точечного фона; точки убрали — вернули
   чистую заливку, чтобы текст всегда лежал на ровной поверхности. */
body.mapskin .plcard,body.mapskin .packc,
body.mapskin .webrow,body.mapskin .webcal,body.mapskin .websch,body.mapskin .webempty,
body.mapskin .adcard,body.mapskin .adstat,body.mapskin .adrow,
body.mapskin .fradd,body.mapskin .frcard,body.mapskin .qart{
  background:var(--mp-card);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:0;
}
/* В тёмной теме по макету карточка ТЕМНЕЕ листа (#0b0b0b на #101010) —
   поверхность утоплена, а не поднята. */
:root[data-theme="dark"] body.mapskin .plcard,
:root[data-theme="dark"] body.mapskin .packc,
:root[data-theme="dark"] body.mapskin .webrow,
:root[data-theme="dark"] body.mapskin .webcal,
:root[data-theme="dark"] body.mapskin .websch,
:root[data-theme="dark"] body.mapskin .webempty,
:root[data-theme="dark"] body.mapskin .adcard,
:root[data-theme="dark"] body.mapskin .adstat,
:root[data-theme="dark"] body.mapskin .adrow,
:root[data-theme="dark"] body.mapskin .fradd,
:root[data-theme="dark"] body.mapskin .frcard,
:root[data-theme="dark"] body.mapskin .qart{
  background:var(--mp-card); border-color:var(--mp-line);
}
/* карточки-кнопки шагов тоже стеклянные, но выбранная — плотная */
body.mapskin .plgoal{background:var(--mp-card);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:0}
:root[data-theme="dark"] body.mapskin .plgoal{background:var(--mp-card);
  border-color:var(--mp-line)}
body.mapskin .plgoal.on{border-color:var(--mp-accfg)}
/* тёмная плашка остаётся плотной — на ней светлый текст */
body.mapskin .plcard.dark{background:var(--mp-dark,#14171d); backdrop-filter:none; border:0}
body.mapskin .plcard.acc{background:var(--mp-peri); backdrop-filter:none;
  border-color:rgba(0,0,0,.06)}

/* ===== МЕНЮ: заголовок группы — капсула с обводкой ===== */
/* Скругление контейнера меню согласовано с капсулами внутри:
   внешний радиус = радиус капсулы (высота/2 ≈ 20) + отступ (10) = 30.
   С 44px контейнер выглядел заметно круглее своих капсул. */
/* Меню развёрнуто: заголовок группы — просто подпись, без капсулы и обводки. */
body.mapskin .sbin{padding:12px; border-radius:30px}
body.mapskin .sbgrp{display:block; margin:14px 0 4px; padding:0 12px;
  background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none;
  font:600 10px 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mp-mut)}
body.mapskin .sbgrp:first-child{margin-top:2px}
body.mapskin .sbbox{padding:0}
body.mapskin .sbtab{margin:2px 0}

/* синий кружок со знаком вопроса у карточек вопросов */
body.mapskin .qh{display:flex; align-items:flex-start; gap:9px}
body.mapskin .qbadge{flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--mp-acc); color:#fff; display:grid; place-items:center; margin-top:1px}
body.mapskin .qbadge svg{display:block}
/* ⚠️ Стеклянное правило для .plcard в тёмной теме перебивало цветные плашки
   (у него выше специфичность), и тёмный текст ложился на тёмное стекло.
   Возвращаем им плотный фон явно — с той же специфичностью. */
:root[data-theme="dark"] body.mapskin .plcard.acc{background:var(--mp-peri);
  backdrop-filter:none; -webkit-backdrop-filter:none; border-color:rgba(0,0,0,.06)}
:root[data-theme="dark"] body.mapskin .plcard.dark{background:var(--mp-dark,#14171d);
  backdrop-filter:none; -webkit-backdrop-filter:none; border:0}
/* ⚠️ Цвета последовательностей хологенетики (#1b4de4 / #c2185b / #177245)
   ставятся ИНЛАЙНОМ при генерации разметки, поэтому обычное CSS-правило их
   не перебивает. На тёмном листе они падают до контраста 2.8 — осветляем
   фильтром: он работает поверх инлайнового цвета и сохраняет различие
   последовательностей. */
:root[data-theme="dark"] body.mapskin .sum h3[style],
:root[data-theme="dark"] body.mapskin .ctag[style],
:root[data-theme="dark"] body.mapskin .seqh[style]{filter:brightness(1.95) saturate(.9)}
/* сноски мелким кеглем на глубоком фоне — поднимаем тон */
:root[data-theme="dark"] body.mapskin .note.off,
:root[data-theme="dark"] body.mapskin .tiny{color:#9a9a9a}
/* ⚠️ .note.off в styles.css имеет ЖЁСТКИЙ светлый фон #f5f6f8 — в тёмной теме
   получалась белая плашка со светло-серым текстом (контраст 2.6). */
:root[data-theme="dark"] body.mapskin .note.off{background:var(--mp-card2); color:#9a9a9a}
/* цвет касты (--ac из данных Shugay) на светлом листе чуть не дотягивал
   до порога — притемняем, не теряя саму окраску касты */
body.mapskin .casteh{filter:brightness(.82) saturate(1.05)}
:root[data-theme="dark"] body.mapskin .casteh{filter:brightness(1.25)}

/* ===== ЛОГОТИП: присланные варианты + переключатель ===== */
body.mapskin .lgcol{display:flex; align-items:center}
body.mapskin .lg{cursor:pointer; display:flex; align-items:center; color:var(--mp-ink)}
body.mapskin .lg svg{height:24px; width:auto; display:block}
@media (max-width:720px){ body.mapskin .lg svg{height:20px} }

/* ===== ВЕБИНАРЫ: адаптив =====
   ⚠️ Медиазапросы держим В КОНЦЕ файла: специфичность у них та же, что у
   базовых правил выше, и выигрывает последний в файле. */
/* ⚠️ Три колонки в строке живут только на широком экране. У нас слева ещё
   и меню приложения на 226px, поэтому на 1280 текстовой колонке оставалось
   всего 207px — заголовок ломался на три строки, а чипы и дата шли лесенкой.
   Ниже 1320px кнопка уходит ПОД текст, и колонка получает всю ширину. */
@media (max-width:1320px){
  body.mapskin .webrow{grid-template-columns:124px minmax(0,1fr); gap:18px}
  body.mapskin .webth{width:124px; height:124px}
  body.mapskin .webact{grid-column:2; flex-direction:row; align-items:center;
    max-width:none; min-width:0; margin-top:12px}
  body.mapskin .webact .webbtn{padding-left:28px; padding-right:28px}
}
@media (max-width:1080px){
  /* Рейка уезжает НАД списком: календарь — это навигация, он должен быть
     первым, а не сбоку от свёрнутой в одну колонку ленты. */
  body.mapskin .weblay{grid-template-columns:minmax(0,1fr)}
  body.mapskin .webside{position:static; order:-1}
  body.mapskin .webrail{flex-direction:row; align-items:stretch; gap:14px}
  body.mapskin .webcal{flex:1 1 auto; min-width:0}
  body.mapskin .websch{flex:0 0 300px}
}
@media (max-width:860px){
  /* Расписание списком съедало пол-экрана перед лентой, ради которой человек
     и пришёл, — прячем его в кнопку, окно открывается по нажатию. */
  body.mapskin .websch{display:none}
  body.mapskin .webschbtn{display:block}
  body.mapskin .webrail{flex-direction:column}
  body.mapskin .webrow{grid-template-columns:104px minmax(0,1fr); gap:15px}
  body.mapskin .webth{width:104px; height:104px; border-radius:19px}
  /* кнопка уходит под текст во всю ширину строки */
  body.mapskin .webact{grid-column:1 / -1; max-width:none; min-width:0}
  body.mapskin .webbtn{width:100%}
}
@media (max-width:640px){
  body.mapskin .webbar{gap:14px}
  body.mapskin .websearch{max-width:none; flex:1 1 100%}
  body.mapskin .webtabs{gap:18px; margin-left:-2px}
  body.mapskin .webrow{grid-template-columns:84px minmax(0,1fr); gap:13px; padding:14px}
  body.mapskin .webth{width:84px; height:84px; border-radius:16px}
  body.mapskin .webt{font-size:17px}
  /* число мест не должно тесниться в одну строку с заголовком на 360px */
  body.mapskin .webtop{flex-direction:column; gap:7px}
  body.mapskin .webx{-webkit-line-clamp:3}
  body.mapskin .webdays{gap:1px}
  body.mapskin .webday b{font-size:14px}
  body.mapskin .webday i{font-size:10px}
  body.mapskin .plpop{padding:0; place-items:end center}
  body.mapskin .plpopbox{width:100%; max-height:88dvh;
    border-radius:var(--mp-rp) var(--mp-rp) 0 0}
  body.mapskin .plpoph{padding:20px 20px 10px}
  body.mapskin .plpopb{padding:4px 20px 22px}
}

/* ===== БЕЗ ОБВОДОК =====
   Заказчик: убрать все аутлайны. Рамки-каркасы сняты во всём приложении
   (см. правки выше по файлам). Здесь — компенсация тех мест, где обводка
   не украшала, а НЕСЛА СМЫСЛ: выбранное состояние, плавающий слой, зона
   для перетаскивания. Везде вместо линии работает заливка.
   Осталось намеренно: односторонние линейки-разделители, вертикальные
   акценты у «ловушки» и «плюса», кольцо-глиф в легенде схемы (открытый
   центр против определённого — это значение, а не оформление) и КОЛЬЦО
   ФОКУСА С КЛАВИАТУРЫ: без него по приложению нельзя ходить табом. */

/* выбранная цель: раньше её отмечала синяя рамка */
body.mapskin .plgoal.on{background:var(--mp-chip); color:#fff}
body.mapskin .plgoal.on b,
body.mapskin .plgoal.on span{color:#fff}
body.mapskin .plgoal.ill.on .plill{outline:none}
:root[data-theme="dark"] body.mapskin .plgoal.on{background:var(--mp-chip); color:#fff}

/* светлые кнопки-призраки на белой карточке: заливка на полтона */
body.mapskin .btn.ghost,
body.mapskin .mpb.ghost{background:var(--mp-card2)}
body.mapskin .btn.ghost:hover,
body.mapskin .mpb.ghost:hover{background:var(--mp-line)}

/* плавающие слои над содержимым: без линии и без тени их держит фон */
body.mapskin .colmenu,
body.mapskin .acbox{background:var(--mp-card2)}

/* пустые зоны, которые раньше показывались пунктиром */
body.mapskin .pfava.empty,
body.mapskin .labcard.empty,
body.mapskin .mempty{background:var(--mp-card2)}

/* наведение у старых элементов держалось на цвете рамки — теперь на заливке */
body.mapskin .chip:hover, body.mapskin .cbtn:hover, body.mapskin .li:hover,
body.mapskin .ga:hover, body.mapskin .gb:hover, body.mapskin .frBtn:hover,
body.mapskin .slBtn:hover, body.mapskin .dosgate:hover, body.mapskin .fchip:hover,
body.mapskin .role:hover{background:var(--mp-line)}

/* выбранная строка отмечалась контуром — теперь только заливкой */
body.mapskin .ln.on{outline:none}

/* Блоки, которые держались на рамке и без неё сливались с карточкой-родителем.
   Проверено программно: «заливка совпала с фоном предка, рамок нет». */
body.mapskin .plgoal,
body.mapskin .drx,
body.mapskin .cross,
body.mapskin .crg,
body.mapskin .cbtn,
body.mapskin .trap{background:var(--mp-card2)}
body.mapskin .cbtn.on{background:var(--mp-chip); color:#fff}

/* Второй проход: вложенные контейнеры оказались на ОДНОЙ заливке с
   родителем (карточка внутри карточки). Ступень чередуем — внешний card2,
   внутренний card. Пары найдены разбором цепочки предков, не на глаз. */
body.mapskin .crg,
body.mapskin .crhow{background:var(--mp-card)}
/* ⚠️ Кнопки-реакции лежат и на белой карточке, и внутри серого блока, и в
   тёмной теме .bookc меняет ступень — привязка к родителю всё время
   промахивалась. Берём --mp-line: он отличается и от card, и от card2. */
body.mapskin .drx{background:var(--mp-line)}
body.mapskin .mpblk.card2{background:var(--mp-card2)}
:root[data-theme="dark"] body.mapskin .plgoal{background:var(--mp-card2)}
:root[data-theme="dark"] body.mapskin .plgoal.on{background:var(--mp-chip)}

/* Поле ввода обязано отличаться от блока, в котором лежит: рамки больше нет,
   а внутри «тихого» блока card2 поле тоже было card2 и сливалось с ним. */
body.mapskin .card2 .pfin,
body.mapskin .mpblk.card2 .pfin{background:var(--mp-card)}

/* В тёмной теме у .crhow/.crg есть свои давние переопределения на card2 —
   а внешний .cross теперь тоже card2, и вложенный блок в нём растворялся.
   Ступень чередуем и здесь. */
:root[data-theme="dark"] body.mapskin .crhow,
:root[data-theme="dark"] body.mapskin .crg{background:var(--mp-card)}

/* ===== КОНСУЛЬТАЦИЯ =====
   Раскладка по референсу: слева большая обложка с иллюстрацией ВНУТРИ неё,
   справа узкое окно про ведущего с тегами форматов, ниже — лента из пяти
   тем, как блок подкастов. Заливка обложки взята пипеткой из картинки,
   поэтому иллюстрация читается как часть карточки, а не как вставка. */
body.mapskin .cnstop{display:grid; grid-template-columns:minmax(0,1fr) 306px;
  gap:16px; align-items:stretch; margin:0 0 16px}

body.mapskin .cnshero{position:relative; overflow:hidden; min-height:376px;
  display:flex; align-items:flex-end; padding:34px 36px;
  border-radius:var(--mp-rp); background:#f3e093; color:#1a1a12}
/* ⚠️ Картинку держим object-fit:contain и прижимаем вправо-вниз. С
   height:100% + width:auto она раздувалась до 900px и лезла под текст;
   заливка карточки совпадает с фоном картинки, поэтому поля не видны. */
body.mapskin .cnshart{position:absolute; right:0; bottom:0; top:0; width:60%;
  pointer-events:none}
body.mapskin .cnshart img{width:100%; height:100%; display:block;
  object-fit:cover; object-position:right bottom}
body.mapskin .cnshtx{position:relative; z-index:1; max-width:min(58%,470px)}
body.mapskin .cnskick{font:600 11px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.14em; text-transform:uppercase; opacity:.62; margin-bottom:14px}
body.mapskin .cnsh1{font-family:var(--mp-display); font-size:clamp(30px,3.1vw,44px);
  line-height:1.06; letter-spacing:-.02em; font-weight:600; margin:0 0 14px; color:inherit}
body.mapskin .cnslead{font-size:15px; line-height:1.55; margin:0 0 20px; opacity:.78}
body.mapskin .cnsbtn{border:0; cursor:pointer; border-radius:999px; padding:13px 26px;
  font-weight:600; font-size:14px; background:var(--mp-chip); color:#fff}
body.mapskin .cnsbtn:hover{background:#000}

body.mapskin .cnsside{display:flex; flex-direction:column; padding:14px 14px 18px;
  border-radius:var(--mp-rp); background:var(--mp-card); min-width:0}
body.mapskin .cnspic{border-radius:28px; overflow:hidden; background:#a9b3ef;
  aspect-ratio:16/10; flex:0 0 auto}
body.mapskin .cnspic img{width:100%; height:100%; object-fit:cover;
  object-position:center 22%; display:block}
body.mapskin .cnsabout{padding:16px 8px 0}
body.mapskin .cnsabout b{display:block; font-family:var(--mp-display); font-size:17px;
  margin-bottom:8px}
body.mapskin .cnsabout p{margin:0 0 8px; font-size:13px; line-height:1.55; color:var(--mp-mut)}
body.mapskin .cnssep{height:1px; background:var(--mp-line); margin:14px 8px}
body.mapskin .cnsft{padding:0 8px; font-family:var(--mp-display); font-size:15px;
  margin-bottom:10px}
body.mapskin .cnstags{display:flex; flex-wrap:wrap; gap:6px; padding:0 8px}
/* ⚠️ span, не button: теги показывают, что бывает, и ничего не выбирают */
body.mapskin .cnstag{font-size:12px; font-weight:600; color:var(--mp-body);
  background:var(--mp-card2); border-radius:999px; padding:7px 12px; white-space:nowrap}

/* ---- лента из пяти тем ---- */
body.mapskin .cnsthemes{display:grid; grid-template-columns:300px minmax(0,1fr);
  gap:26px; align-items:start; padding:30px 32px 24px; margin:0 0 22px;
  border-radius:var(--mp-rp); background:var(--mp-card)}
body.mapskin .cnstl{min-width:0}
body.mapskin .cnsh2{font-family:var(--mp-display); font-size:34px; line-height:1.08;
  letter-spacing:-.02em; font-weight:600; margin:0 0 12px}
body.mapskin .cnsh2 i{font-style:normal; font-size:26px; vertical-align:super; opacity:.5}
body.mapskin .cnstp{font-size:13.5px; line-height:1.55; color:var(--mp-mut); margin:0 0 14px}
body.mapskin .cnspick{font-size:12.5px; line-height:1.5; color:var(--mp-mut)}
body.mapskin .cnspick.on{color:var(--mp-ink); font-weight:600}

body.mapskin .cnsrow{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 8px;
  scrollbar-width:none; scroll-snap-type:x proximity}
body.mapskin .cnsrow::-webkit-scrollbar{display:none}
body.mapskin .cnscard{position:relative; flex:0 0 232px; scroll-snap-align:start;
  display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  border:0; background:var(--mp-card2); border-radius:24px; padding:12px 12px 12px 16px;
  transition:background .14s, transform .14s}
body.mapskin .cnscard:hover{transform:translateY(-2px)}
body.mapskin .cnsct{min-width:0; flex:1 1 auto}
body.mapskin .cnsct b{display:block; font-size:14px; font-weight:600; line-height:1.25;
  margin-bottom:4px; color:var(--mp-ink)}
body.mapskin .cnsct i{font-style:normal; font-size:11.5px; line-height:1.4;
  color:var(--mp-mut); display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
body.mapskin .cnscim{flex:0 0 62px; width:62px; height:62px; border-radius:18px;
  overflow:hidden; background:var(--mp-line)}
body.mapskin .cnscim img{width:100%; height:100%; object-fit:cover; display:block}
/* галочка появляется только у выбранной темы */
body.mapskin .cnsdot{position:absolute; top:10px; right:10px; width:20px; height:20px;
  border-radius:50%; display:grid; place-items:center; font-size:11px;
  background:var(--mp-lime); color:#161a24; opacity:0; transform:scale(.6);
  transition:opacity .14s, transform .14s}
body.mapskin .cnscard.on{background:var(--mp-chip)}
body.mapskin .cnscard.on .cnsct b{color:#fff}
body.mapskin .cnscard.on .cnsct i{color:rgba(255,255,255,.7)}
body.mapskin .cnscard.on .cnsdot{opacity:1; transform:scale(1)}

body.mapskin .cnsbar{grid-column:2; display:flex; align-items:center; gap:14px;
  margin-top:4px}
body.mapskin .cnstrack{flex:1 1 auto; height:3px; border-radius:999px;
  background:var(--mp-line); overflow:hidden}
body.mapskin .cnstrack i{display:block; height:100%; border-radius:999px;
  background:var(--mp-chip); transition:width .18s}
body.mapskin .cnsbar b{font:600 12px 'JetBrains Mono',ui-monospace,monospace;
  color:var(--mp-mut)}

/* ⚠️ Базовая .plq2 раскладывает 6 ячеек ПО КОЛОНКАМ в три ряда — это было
   нужно, пока шестой ячейкой стояла обложка. Обложка переехала наверх,
   ячеек осталось пять, и колоночный порядок оставил бы дыру. */
body.mapskin .plq2.nopic{grid-auto-flow:row; grid-template-rows:none}

/* ===== КОНСУЛЬТАЦИЯ: адаптив ===== */
@media (max-width:1180px){
  /* окно про ведущего уезжает под обложку и раскладывается в строку */
  body.mapskin .cnstop{grid-template-columns:minmax(0,1fr)}
  body.mapskin .cnsside{flex-direction:row; align-items:flex-start; gap:18px;
    padding:18px}
  body.mapskin .cnspic{flex:0 0 150px; width:150px; aspect-ratio:3/4}
  body.mapskin .cnsside > .cnsabout{flex:1 1 auto; padding:0}
  body.mapskin .cnssep{display:none}
  body.mapskin .cnsft, body.mapskin .cnstags{padding:0}
  body.mapskin .cnsft{margin-top:12px}
  body.mapskin .cnsthemes{grid-template-columns:minmax(0,1fr)}
  body.mapskin .cnsbar{grid-column:1}
}
@media (max-width:860px){
  /* иллюстрация в обложке становится фоном сверху, текст под ней */
  body.mapskin .cnshero{flex-direction:column; align-items:stretch; min-height:0;
    padding:24px 24px 26px}
  body.mapskin .cnshart{position:static; width:100%; height:190px; margin-bottom:6px}
  body.mapskin .cnshart img{position:static; width:100%; height:100%;
    object-fit:contain; object-position:center bottom}
  body.mapskin .cnshtx{max-width:none}
  body.mapskin .cnsthemes{padding:24px 22px 20px; gap:18px}
  body.mapskin .cnsh2{font-size:28px}
}
@media (max-width:640px){
  body.mapskin .cnsside{flex-direction:column}
  body.mapskin .cnspic{width:100%; flex:0 0 auto; aspect-ratio:4/3}
  body.mapskin .cnspic img{object-position:center 18%}
  body.mapskin .cnshero{padding:20px 20px 22px; border-radius:var(--mp-rb)}
  body.mapskin .cnshart{height:150px}
  body.mapskin .cnsthemes{border-radius:var(--mp-rb); padding:22px 18px 18px}
  body.mapskin .cnscard{flex:0 0 210px}
  body.mapskin .cnsbtn{width:100%}
}

/* ---- компактные шаги формы ----
   «Когда» и «Как связаться» — это два коротких поля, а карточка отдавала им
   столько же места, сколько блоку с текстом. Ужимаем подушки и убираем
   лишний отступ под полем: высота падает вдвое. */
body.mapskin .plcard.tight{padding:14px 22px; margin-bottom:12px; gap:12px}
body.mapskin .plcard.tight .plf{margin-bottom:0; display:flex; align-items:center; gap:12px}
body.mapskin .plcard.tight .pflbl{flex:0 0 62px; margin-bottom:0; font-size:11px}
body.mapskin .plcard.tight .pfin{flex:1 1 auto; min-width:0; padding:8px 12px; border-radius:10px}
body.mapskin .plh2 + .plcard.tight{margin-top:2px}
@media (max-width:560px){
  body.mapskin .plcard.tight .plf{flex-direction:column; align-items:stretch; gap:5px}
  body.mapskin .plcard.tight .pflbl{flex:0 0 auto}
}

/* ---- стрелки прокрутки ленты тем ---- */
body.mapskin .cnsarr{flex:0 0 auto; width:30px; height:30px; border:0; cursor:pointer;
  border-radius:50%; background:var(--mp-card2); color:var(--mp-ink);
  font-size:17px; line-height:1; display:grid; place-items:center}
body.mapskin .cnsarr:hover{background:var(--mp-line)}
body.mapskin .cnsarr[disabled]{color:var(--mp-hint); cursor:default; background:var(--mp-card2)}
body.mapskin .cnsrow{cursor:grab}
body.mapskin .cnsrow:active{cursor:grabbing}

/* ---- шапка-капсула ---- */
:root[data-theme="dark"] body.mapskin .hdr2in{background:transparent}
/* ⚠️ Стекло в стекле не вкладываем: прозрачности перемножаются, и вложенный
   элемент выглядит грязным пятном. Внутри капсулы — плотные заливки. */
/* Шапка светлая, поэтому её контролы живут на обычных токенах темы —
   одна заливка у всех, чтобы ряд читался как один набор. Стекло внутри
   не вкладываем: прозрачности перемножались бы. */
body.mapskin .hdr2 .glass,
:root[data-theme="dark"] body.mapskin .hdr2 .glass,
body.mapskin .hdr2 .mpsel,
body.mapskin .hdr2 .mpb.ghost,
body.mapskin .hdr2 .mpav,
body.mapskin .hdr2 nav{background:var(--mp-card2) !important;
  color:var(--mp-ink); backdrop-filter:none; -webkit-backdrop-filter:none}
body.mapskin .hdr2 .glass:hover,
:root[data-theme="dark"] body.mapskin .hdr2 .glass:hover,
body.mapskin .hdr2 .mpsel:hover,
body.mapskin .hdr2 .mpb.ghost:hover,
body.mapskin .hdr2 .mpav:hover{background:var(--mp-line) !important}
body.mapskin .hdr2 .mpb:not(.ghost){background:var(--mp-acc); color:#fff}
body.mapskin .hdr2 .mpb:not(.ghost):hover{background:var(--mp-acc2)}
body.mapskin .hdr2 .lg, body.mapskin .hdr2 .lgt{color:var(--mp-ink)}
body.mapskin .hdr2 .mpsb{color:var(--mp-mut)}
body.mapskin .hdr2 .mpsb:hover{color:var(--mp-ink)}
body.mapskin .hdr2 .mpsb.on{background:var(--mp-chip); color:#fff}
body.mapskin .hdr2 .mpclock, body.mapskin .hdr2 .mpdate{color:var(--mp-mut)}
body.mapskin .hdr2 .pldot{box-shadow:0 0 0 2px var(--mp-card)}
@media (max-width:820px){
  body.mapskin .hdr2{padding:10px 20px}
}

/* ---- последние два шага консультации в две колонки ---- */
body.mapskin .cnsend{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px; align-items:start}
body.mapskin .cnscol{min-width:0}
body.mapskin .cnscol .plh2{margin-top:0}
body.mapskin .cnsend .plrow2{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
body.mapskin .cnsend .plcard.tight{margin-bottom:0}
/* кнопка не должна липнуть к последней карточке */
body.mapskin .consultv .btn.big{margin-top:22px}
@media (max-width:860px){
  body.mapskin .cnsend{grid-template-columns:minmax(0,1fr); gap:2px}
  body.mapskin .cnscol .plh2{margin-top:20px}
}

/* ---- один цвет у однотипных блоков ----
   ⚠️ styles.css держал ТРИ почти одинаковых серых (#f7f8fa, #fafbfc, #f5f6f8)
   и белый вперемешку с токенами — рядом стоящие блоки отличались на 2–4
   единицы, и это читалось как «часть прозрачная, часть нет». Все нейтральные
   заливки переведены на --mp-card / --mp-card2 прямо в styles.css.
   Здесь — то, что осталось точечно. */
/* селект карты в шапке был белым среди серых контролов капсулы */
body.mapskin .hdr2 .mpsel{background-color:var(--mp-card2)}

/* ===== БЕЗ ЧЁРНЫХ ПОДЛОЖЕК В КОНТЕНТЕ =====
   Заказчик: «убери чёрные фона, хочется минимальнее». Тёмные плашки внутри
   разделов переведены на светлую ступень; чёрным остаётся только шапка —
   она марка бренда — и мелкие управляющие элементы (кнопка-действие, чип
   выбранного состояния), где тёмное несёт смысл «нажато». */
body.mapskin .mpblk.dark,
body.mapskin .combo,
body.mapskin .plcard.dark,
body.mapskin .teas.dark,
body.mapskin .spxc.c3,
:root[data-theme="dark"] body.mapskin .plcard.dark{background:var(--mp-card2); color:var(--mp-ink)}
/* тексты внутри бывших тёмных плашек тоже были светлыми */
body.mapskin .mprow{color:var(--mp-ink)}
body.mapskin .mprow:hover{background:rgba(0,0,0,.05)}
:root[data-theme="dark"] body.mapskin .mprow:hover{background:rgba(255,255,255,.07)}
body.mapskin .combo h3,
body.mapskin .pblock.combo h3,
body.mapskin .mpblk.dark > .l,
body.mapskin .teas.dark h3{color:var(--mp-ink)}
body.mapskin .combo p,
body.mapskin .mpblk.dark p,
body.mapskin .plcard.dark p,
body.mapskin .teas.dark p{color:var(--mp-body)}
/* кружок-значок в бывшей тёмной плашке был лаймовым на чёрном */
body.mapskin .mpblk.dark .icw{background:var(--mp-lime); color:#161a24}

/* Дочерние правила бывших тёмных плашек: у них были светлые тексты,
   разделители и полупрозрачные чипы, рассчитанные на чёрный фон. */
body.mapskin .combo h3,
body.mapskin .combo .spH,
body.mapskin .pblock.combo h3,
body.mapskin .shuprofbox .spH{color:var(--mp-mut)}
body.mapskin .combo p,
body.mapskin .spxc.c3 .sd,
body.mapskin .mpblk.dark p{color:var(--mp-body)}
body.mapskin .combo .shuprofbox{border-top-color:var(--mp-line)}
body.mapskin .mpblk.dark .mpchip{background:var(--mp-card); color:var(--mp-ink)}
body.mapskin .mpblk.dark .mpchip:hover{background:var(--mp-line)}
body.mapskin .spxc.c3, body.mapskin .spxc.c3 .st, body.mapskin .spxc.c3 .sn{color:var(--mp-ink)}
/* декоративный «шар» в углу плашек рисовался светлым по тёмному */
body.mapskin .combo::after,
body.mapskin .spxc.c3::after{opacity:.5; filter:invert(1)}

/* заголовок в бывшей тёмной карточке продукта остался белым */
body.mapskin .plcard.dark .plh2,
body.mapskin .plcard.dark .plhint,
body.mapskin .teas.dark .plh2{color:var(--mp-ink)}
body.mapskin .plcard.dark .plhint{color:var(--mp-mut)}

/* Рейки планет — БЕЗ контейнера вовсе: глифы и числа лежат прямо на карточке
   со схемой. Коробка вокруг них была нужна, пока рейка была чёрной. */
body.mapskin .mprail{background:transparent; padding:14px 2px}

/* ===== КОЛЬЦО ФОКУСА =====
   ⚠️ Браузер рисует СВОЁ кольцо, и на чёрной капсуле шапки оно белое и
   толстое — кнопка выглядит другой, чем соседние (заказчик поймал уже
   второй раз). Своё кольцо: тонкое, в цвет темы, и только для клавиатуры. */
body.mapskin button:focus,
body.mapskin select:focus,
body.mapskin a:focus,
body.mapskin [tabindex]:focus{outline:none}
body.mapskin button:focus-visible,
body.mapskin select:focus-visible,
body.mapskin a:focus-visible,
body.mapskin [tabindex]:focus-visible{outline:2px solid var(--mp-accfg); outline-offset:2px}
/* внутри чёрной капсулы кольцо должно читаться на чёрном */
body.mapskin .hdr2 button:focus-visible,
body.mapskin .hdr2 select:focus-visible{outline-color:rgba(255,255,255,.75)}

/* ===== ПРОДУКТ: витрина курсов и заявки с лендинга =====
   Стили в конце файла: медиазапросы выше их не касаются, а при равной
   специфичности выигрывает последнее правило — так и задумано. */
body.mapskin .plprod{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
body.mapskin .plgo{display:inline-flex;align-items:center;text-decoration:none;margin-top:6px}
body.mapskin .adnums{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
body.mapskin .adnums b{font-size:26px;font-weight:800;color:var(--mp-ink)}
body.mapskin .adnums span{font-size:13px;color:var(--mp-mut);margin-right:14px}
body.mapskin .adlead{background:var(--mp-card2);border-radius:var(--mp-r);padding:16px 18px;margin-bottom:10px}
body.mapskin .adlead.done{opacity:.55}
body.mapskin .adlh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
body.mapskin .adlh b{font-size:16px;font-weight:800;color:var(--mp-ink)}
body.mapskin .adlh a{font-family:'JetBrains Mono',monospace;font-size:13.5px;color:var(--mp-accfg);text-decoration:none}
body.mapskin .adlh span{font-size:12px;color:var(--mp-mut);margin-left:auto}
body.mapskin .adqa{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
body.mapskin .adq{display:inline-flex;align-items:baseline;gap:6px;background:var(--mp-card);
  border-radius:999px;padding:5px 11px;font-size:12.5px;color:var(--mp-ink)}
body.mapskin .adq i{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mp-mut)}
body.mapskin .plbtn.small{padding:7px 14px;font-size:12.5px;margin-top:10px}

/* ⚠️ Ссылка «Открыть витрину курсов» была ВООБЩЕ не оформлена и рисовалась
   браузерным синим #0000ee — на тёмной карточке контраст 2.1. */
body.mapskin .plbtn{display:inline-block; text-decoration:none; cursor:pointer;
  border-radius:999px; padding:12px 24px; font-weight:600; font-size:14px;
  background:var(--mp-acc); color:#fff}
body.mapskin .plbtn:hover{background:var(--mp-acc2); color:#fff}

/* ---- столбики «открытия лендинга по дням» в админке ----
   ⚠️ .adbar уже занят под ГОРИЗОНТАЛЬНУЮ строку статистики, поэтому свои
   классы: advbars/advbar. Перед вводом класса — grep, файлы делят одно
   пространство имён. */
body.mapskin .adcap{font-size:12px; font-weight:600; color:var(--mp-mut); margin:16px 0 8px}
body.mapskin .advbars{display:flex; align-items:flex-end; gap:6px; height:96px}
body.mapskin .advbar{flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; gap:6px; height:100%}
body.mapskin .advbar i{display:block; width:100%; border-radius:8px 8px 3px 3px;
  background:var(--mp-acc); min-height:4px}
body.mapskin .advbar u{font:600 10px 'JetBrains Mono',ui-monospace,monospace;
  color:var(--mp-mut); text-decoration:none}

/* ---- шапка: разделы отдельными кнопками, логотип своей капсулой ----
   Возврат к первому варианту: сегментная капсула убрана, три кнопки стоят
   сами по себе, у активной — тёмная заливка. */
body.mapskin .act .mpb.ghost.on{background:var(--mp-chip) !important; color:#fff}
body.mapskin .hdr2 .lg{background:var(--mp-card2)}

/* ---- капсулы шапки ----
   Четыре коробки: логотип · карта (имя, изменить, добавить) · разделы ·
   служебное (база, часы, тема, оповещения, профиль). Внутри капсулы кнопки
   ПЛОСКИЕ — иначе получается коробка в коробке; заливку получают только
   главное действие и активный раздел. */
body.mapskin .hgrp{display:inline-flex; align-items:center; gap:4px; flex:0 0 auto;
  background:var(--mp-card); border-radius:999px; padding:5px}
body.mapskin .hgrp > .mpb.ghost,
body.mapskin .hgrp > .mpsel,
body.mapskin .hgrp > .mpav{background:var(--mp-card) !important; box-shadow:none}
body.mapskin .hgrp > .mpb.ghost:hover,
body.mapskin .hgrp > .mpsel:hover,
body.mapskin .hgrp > .mpav:hover{background:var(--mp-card2) !important}
body.mapskin .hgrp > .mpb,
body.mapskin .hgrp > .mpsel,
body.mapskin .hgrp > .mpav{height:36px}
body.mapskin .hgrp > .mpav{width:36px}
body.mapskin .hgrp > .mpclock{padding:0 8px}
/* активный раздел и главное действие остаются плотными */
body.mapskin .hgrp > .mpb:not(.ghost){background:var(--mp-acc) !important; color:#fff}
body.mapskin .hgrp > .mpb:not(.ghost):hover{background:var(--mp-acc2) !important}
body.mapskin .hgrp > .mpb.ghost.on{background:var(--mp-chip) !important; color:#fff}
/* логотип — такая же капсула, только со своей подушкой */
/* высота как у остальных капсул — иначе ряд идёт лесенкой */
body.mapskin .hdr2 .lg{background:var(--mp-card); padding:0 18px 0 14px; min-height:46px}

/* ============================================================
   ПРИГЛАШЕНИЕ ОБУЧИТЬСЯ — карточка снизу справа и форма-стекло
   Салатовый здесь КОНСТАНТНЫЙ (как все лаймовые сцены): фон не меняется
   по теме, поэтому текст на нём ВСЕГДА тёмный — и в светлой, и в тёмной.
   Прозрачность держим ≥.6, иначе под стеклом просвечивает разметка
   страницы и текст перестаёт читаться на пёстром фоне.
   ============================================================ */
body.mapskin .lrn{
  /* выше нижнего меню (40/41), но НИЖЕ модалок (50–80): открытое окно
     должно накрывать приглашение, а не спорить с ним */
  position:fixed; right:18px; bottom:18px; z-index:45;
  width:min(330px, calc(100vw - 28px));
  padding:16px 44px 16px 18px; border-radius:26px; cursor:pointer;
  background:rgba(214,248,74,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  backdrop-filter:blur(18px) saturate(1.35);
  color:#161a24;
  transition:background .2s;
}
body.mapskin .lrn:hover{background:rgba(214,248,74,.92)}
body.mapskin .lrntx{display:flex; flex-direction:column; gap:5px}
body.mapskin .lrntx b{font-family:var(--mp-display); font-size:17px; line-height:1.2}
body.mapskin .lrntx span{font-size:13.5px; line-height:1.42; color:#3b421f}
body.mapskin .lrn .lrnm{display:none}          /* короткий текст — только на телефоне */
body.mapskin .lrngo{margin-top:12px; border:0; cursor:pointer; font:inherit;
  font-weight:700; font-size:13.5px; padding:9px 18px; border-radius:999px;
  background:#161a24; color:#fff}
body.mapskin .lrngo:hover{background:#2f343b}
body.mapskin .lrnx{position:absolute; top:10px; right:10px; width:26px; height:26px;
  border:0; border-radius:50%; cursor:pointer; font-size:11px; line-height:1;
  background:rgba(255,255,255,.55); color:#161a24}
body.mapskin .lrnx:hover{background:#fff}

/* окно с формой — то же стекло, только крупнее */
body.mapskin .plpop.lrnback{background:rgba(13,16,20,.28)}
body.mapskin .plpopbox.lrnpop{
  width:min(420px,100%); color:#161a24;
  background:rgba(214,248,74,.62);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);
  backdrop-filter:blur(26px) saturate(1.4);
}
body.mapskin .lrnpop .plpoph b{color:#161a24}
body.mapskin .lrnpop .plpopx{background:rgba(255,255,255,.62); color:#161a24}
body.mapskin .lrnpop .plpopx:hover{background:#fff}
body.mapskin .lrnlead{margin:0 0 16px; font-size:14px; line-height:1.5; color:#39401f}
body.mapskin .lrnpop .pflbl{color:#3f4a24}
body.mapskin .lrnpop .pfin{background:rgba(255,255,255,.66); color:#161a24;
  border-radius:14px; padding:12px 14px}
body.mapskin .lrnpop .pfin::placeholder{color:#6f7757}
body.mapskin .lrnsend{width:100%; margin-top:6px; border:0; cursor:pointer; font:inherit;
  font-weight:700; font-size:14.5px; padding:14px; border-radius:999px;
  background:#161a24; color:#fff}
body.mapskin .lrnsend:hover{background:#2f343b}
body.mapskin .lrnsend:disabled{opacity:.6; cursor:default}
body.mapskin .lrnnote{min-height:18px; margin-top:8px; font-size:13px; color:#5c3a1f}
body.mapskin .lrnok{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
body.mapskin .lrnok b{font-family:var(--mp-display); font-size:19px}
body.mapskin .lrnok span{font-size:14px; line-height:1.5; color:#39401f}

@media (max-width:720px){
  /* на телефоне снизу таб-бар — карточка садится над ним, а не поверх */
  body.mapskin .lrn{left:12px; right:12px; width:auto; padding:14px 42px 14px 16px;
    bottom:calc(74px + env(safe-area-inset-bottom)); border-radius:22px}
  body.mapskin .lrn .lrnd{display:none}
  body.mapskin .lrn .lrnm{display:block}
  body.mapskin .lrngo{display:none}            /* тап по всей карточке открывает форму */
}

/* В тёмной теме под стеклом чёрный лист, и салатовый уходил в болотный:
   на нём тёмный текст (а он тут ВСЕГДА тёмный) переставал читаться.
   Поэтому в тёмной прозрачность ниже — цвет остаётся салатовым, размытие
   при этом видно. */
:root[data-theme="dark"] body.mapskin .lrn{background:rgba(214,248,74,.88)}
:root[data-theme="dark"] body.mapskin .lrn:hover{background:rgba(214,248,74,.96)}
:root[data-theme="dark"] body.mapskin .plpopbox.lrnpop{background:rgba(214,248,74,.82)}
:root[data-theme="dark"] body.mapskin .lrnpop .pfin::placeholder{color:#5b6240}

/* ===== История лендинга: посетители и их шаги ===== */
body.mapskin .advis{background:var(--mp-card2);border-radius:var(--mp-r);margin-bottom:8px;overflow:hidden}
body.mapskin .advis.lead{box-shadow:inset 3px 0 0 var(--mp-lime)}
body.mapskin .advh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;width:100%;
  border:0;background:transparent;cursor:pointer;text-align:left;padding:14px 18px;font:inherit;color:inherit}
body.mapskin .advh b{font-size:15px;font-weight:800;color:var(--mp-ink)}
body.mapskin .advp{font-family:'Roboto Mono',monospace;font-size:13px;color:var(--mp-accfg)}
body.mapskin .advm{font-size:12px;color:var(--mp-mut)}
body.mapskin .advn{font-size:12px;color:var(--mp-mut);margin-left:auto}
body.mapskin .advis.open .advh{border-bottom:1px solid var(--mp-line)}
body.mapskin .advlist{padding:10px 18px 14px}
body.mapskin .advrow{display:flex;gap:12px;align-items:baseline;padding:5px 0;font-size:13.5px;color:var(--mp-ink)}
body.mapskin .advrow i{font-style:normal;font-family:'Roboto Mono',monospace;font-size:12px;color:var(--mp-mut);min-width:44px}