/* ============================================================
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:#2c5cff; /* Blue · Действие */
--mp-acc2:#1e45d8;
--mp-accsoft:#e6ecff;
--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:0 1px 2px rgba(13,16,20,.06); /* shadow-1 · карточки */
--mp-sh2:0 30px 60px -40px rgba(13,16,20,.28); /* shadow-2 · ТОЛЬКО модалки */
--mp-shacc:0 10px 24px -8px rgba(44,92,255,.55); /* синяя кнопка-действие */
--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:14px 0; background-color:var(--mp-bg);
}
/* Содержимое шапки должно лежать на ТОЙ ЖЕ сетке, что и .applayout,
иначе логотип не встаёт над боковым меню: шапка была 1508px без отступа,
раскладка — 1880px с отступом 26px, и левые края расходились. */
.hdr2in{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
max-width:1880px; margin:0 auto; padding:0 26px;
}
/* 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);
box-shadow:0 -4px 20px rgba(0,0,0,.08); 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-acc)}
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-card); border-radius:999px; padding:9px 18px 9px 12px;
box-shadow:var(--mp-sh); 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), #6f9bff, 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,") 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;
}
.mprail.d .mprow .gv{color:#ff8a90}
.mprail.d .mprow .gl{color:#ff8a90}
/* Ширину задаём, высоту считает сам 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-acc); 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 — здесь их
компоненты переводятся на язык нового стиля: белые карточки без
рамок, крупные радиусы, чёрные пилюли, серые ряды.
============================================================ */
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); box-shadow:var(--mp-sh); font-weight:600}
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:1px solid var(--mp-line); 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:0 12px 34px rgba(9,12,20,.16)}
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-acc)}
.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-acc)}
.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-acc); 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,");
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;
box-shadow:0 6px 16px -4px var(--cc)}
.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:2.5px solid var(--mp-line);
border-top-color:var(--mp-acc); 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; box-shadow:0 20px 60px -20px rgba(0,0,0,.5); 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:0 4px 14px -4px rgba(255,122,0,.55) !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-acc)}
.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-acc); 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-acc); 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-acc); 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-acc); 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-acc); 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:1px solid var(--mp-line); 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-acc)}
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:2px dashed var(--mp-line); 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-acc)}
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-acc); 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-acc); 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:0 12px 22px -14px rgba(44,92,255,1)}
/* Схема ауры в попапе типа */
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-acc)}
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-acc);
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:1px dashed var(--mp-line)}
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:3px solid var(--mp-line); border-top-color:var(--mp-acc); 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-acc); 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-acc)}
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-acc)}
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-acc); font-size:16px}
body.mapskin .natr{color:var(--mp-acc); font-weight:700; text-align:center}
body.mapskin .natgate{color:var(--mp-acc); 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%, границ почти нет — слои разделяет
заливка. Синий осветляется до #4A76FF, лайм и розовый остаются прежними. */
: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:#17233d;
--mp-acc:#4a76ff; --mp-acc2:#2c5cff; --mp-peri:#a9a6ff;
--mp-sh:0 1px 2px rgba(0,0,0,.5);
--mp-sh2:0 30px 60px -34px rgba(0,0,0,.5);
--mp-shacc:0 12px 24px -14px rgba(74,118,255,.9);
/* старые токены styles.css */
--bg:#0a0c10; --card:#14171d; --ink:#f2f4f9; --mut:#8b93a1; --line:#242a33;
}
:root[data-theme="dark"] body.mapskin{background-color:var(--mp-bg); color:var(--mp-ink)}
:root[data-theme="dark"] .hdr2{background-color:var(--mp-bg)}
: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:2px solid transparent; 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-acc)}
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-acc); 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}
/* вебинары */
body.mapskin .webgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
body.mapskin .webc{background:var(--mp-card); border-radius:var(--mp-rb); box-shadow:var(--mp-sh); overflow:hidden}
body.mapskin .webcov{height:150px; background:var(--mp-card2) center/cover no-repeat}
body.mapskin .webb{padding:18px 20px 20px}
body.mapskin .webt{font-family:var(--mp-display); font-size:19px; line-height:1.2}
body.mapskin .webd{font:600 12px 'JetBrains Mono',ui-monospace,monospace; color:var(--mp-mut); margin-top:6px}
body.mapskin .webcd{display:inline-block; margin-top:8px; font:600 13px 'JetBrains Mono',ui-monospace,monospace;
background:var(--mp-lime); color:#161a24; border-radius:999px; padding:5px 12px}
body.mapskin .webx{font-size:13.5px; line-height:1.55; color:var(--mp-mut); margin:10px 0}
body.mapskin .webl{font-size:12.5px; color:var(--mp-mut); margin:8px 0 12px}
body.mapskin .webok{background:var(--mp-lime); color:#161a24; border-radius:var(--mp-rs);
padding:11px 14px; font-size:13px; line-height:1.5; margin-top:8px}
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; margin-top:8px}
body.mapskin .websign{margin-top:10px}
/* колокольчик и уведомления */
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:#f6f1e4}
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:#f6f1e4}
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 .webgrid,
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}
}
/* ===== расписание вебинаров: лента даты + кнопка внизу карточки ===== */
body.mapskin .webc{display:flex; flex-direction:column}
body.mapskin .webb{display:flex; flex-direction:column; flex:1}
/* «Записаться» и статусы прижаты к низу — карточки в ряду выглядят ровно */
body.mapskin .webb > .btn,body.mapskin .webok,body.mapskin .webwait,
body.mapskin .websign{margin-top:auto}
body.mapskin .websign > .btn{margin-top:6px}
body.mapskin .webstrip{display:grid; grid-template-columns:auto 1fr auto; gap:10px;
align-items:center; padding:10px 12px; margin-bottom:12px;
background:var(--mp-card2); border-radius:var(--mp-rs)}
body.mapskin .wsnum{font-family:var(--mp-display); font-size:30px; line-height:1}
body.mapskin .wsmid{display:flex; flex-direction:column; line-height:1.2}
body.mapskin .wsmid b{font-size:13.5px; font-weight:600}
body.mapskin .wsmid i{font-style:normal; font-size:11.5px; color:var(--mp-mut)}
body.mapskin .wstime{display:flex; flex-direction:column; align-items:flex-end;
font-family:'JetBrains Mono',ui-monospace,monospace; font-size:16px; line-height:1.2}
body.mapskin .wstime i{font-style:normal; font-size:11px; color:var(--mp-mut)}
/* шапка раздела: текст + иллюстрация справа, на телефоне — друг под другом */
/* Шапка раздела — ОДИН контейнер: слева заголовок и текст, справа картинка.
Раньше .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:#f6f1e4}
/* активная кнопка раздела в шапке */
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:1px solid rgba(255,255,255,.55);
}
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}
/* Точечная сетка на фоне убрана по просьбе заказчика — ровная заливка.
⚠️ Здесь и в .hdr2 фон задаём background-color, а не шорткатом: стеклянные
блоки поверх рассчитывают на чистый фон, а шорткат позже в каскаде сносит
любые фоновые слои разом. */
body.mapskin{ background-color:var(--mp-bg); background-image:none }
body.mapskin .hdr2{ background-color:var(--mp-bg); 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 .webc,
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:1px solid var(--mp-line);
}
/* В тёмной теме по макету карточка ТЕМНЕЕ листа (#0b0b0b на #101010) —
поверхность утоплена, а не поднята. */
:root[data-theme="dark"] body.mapskin .plcard,
:root[data-theme="dark"] body.mapskin .packc,
:root[data-theme="dark"] body.mapskin .webc,
: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:1px solid var(--mp-line)}
:root[data-theme="dark"] body.mapskin .plgoal{background:var(--mp-card);
border-color:var(--mp-line)}
body.mapskin .plgoal.on{border-color:var(--mp-acc)}
/* тёмная плашка остаётся плотной — на ней светлый текст */
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 .webgrid{gap:22px; margin-top: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} }