/* ===== Дизайн человека — оформление ===== */
:root{
  --bg:#f4f5f7; --card:#fff; --ink:#16181d; --mut:#6b7280; --line:#e3e6eb;
  --p:#16181d;         /* Личность */
  --d:#d6273b;         /* Дизайн */
  --acc:#1b4de4;
  --ok:#177245; --warn:#a15c00;
  --r:18px; --rs:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:400 16px/1.6 Onest, system-ui, -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 8px; font-weight:600; line-height:1.2}
h1{font-size:30px} h2{font-size:22px} h3{font-size:15px; margin-top:22px; color:var(--mut);
  text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:600}
h4{font-size:15px}
p{margin:0 0 10px}
button{font:inherit; color:inherit; cursor:pointer}
.muted{color:var(--mut)}
.mono,.tech td:last-child,.kg{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ---- шапка ---- */
.top{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 20px; background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px;
  letter-spacing:.06em}
.brandsub{
  font-weight:500; font-size:12px; color:var(--mut); letter-spacing:0;
  padding-left:10px; border-left:1px solid var(--line);
}
.mark{width:16px; height:16px; border-radius:4px; background:linear-gradient(135deg,var(--d),var(--p))}
/* Вкладки прокручиваются ВНУТРИ своей коробки. Без overflow они вылезали
   наружу, и панель справа (селект + кнопки) ложилась поверх них. */
.tabs{
  display:flex; gap:4px; order:3; flex:1 0 100%; min-width:0;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin:0 -20px; padding:2px 20px;
}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto; white-space:nowrap}
.tab{
  border:0; background:transparent; padding:8px 14px; border-radius:99px;
  color:var(--mut); font-weight:500;
}
.tab:hover{background:#eef0f4; color:var(--ink)}
.tab.on{background:var(--ink); color:#fff}
.topact{display:flex; gap:8px; align-items:center; flex:0 0 auto}
.sel{
  border:1px solid var(--line); background:#fff; border-radius:99px;
  padding:8px 12px; max-width:150px; min-width:0;
  text-overflow:ellipsis; white-space:nowrap;
}
.btn{
  border:0; background:var(--ink); color:#fff; padding:9px 16px;
  border-radius:99px; font-weight:600;
}
.btn:hover{opacity:.88}
.btn.ghost{background:#eef0f4; color:var(--ink)}
.btn.ghost:hover{background:#e4e7ec}
.btn.sm{padding:6px 12px; font-size:13px; font-weight:500}
.btn.big{padding:13px 26px; font-size:16px}
.btn.danger{color:var(--d)}

/* ---- раскладка ---- */
.main{padding:20px; max-width:1500px; margin:0 auto}
.grid{display:grid; grid-template-columns:minmax(340px,1fr) minmax(360px,1fr); gap:20px; align-items:start}
.grid.one{grid-template-columns:1fr}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px}
.bgwrap{position:sticky; top:76px}
.info{max-height:calc(100vh - 110px); overflow:auto}
.info.wide{max-height:none}
.welcome{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:44px; text-align:center}
.welcome .lead{max-width:560px; margin:0 auto 22px; color:var(--mut)}
.lead{color:var(--mut)}

/* ---- бодиграф ---- */
.bghead{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.svgbox{width:100%}
.bodygraph{width:100%; height:auto; max-height:calc(100vh - 210px); display:block}
.bodygraph .gnum{font:500 11px 'JetBrains Mono',monospace; pointer-events:none}
.hit{cursor:pointer}
/* в закрытом режиме неактивные ворота и незамкнутые каналы не ловят клик */
.bodygraph.gated .hit.off{pointer-events:none}
.hit-center:hover{fill:rgba(27,77,228,.10)}
.hit-gate:hover{fill:rgba(27,77,228,.18)}
.hit-chan:hover{stroke:rgba(27,77,228,.18)}
.hit.sel{stroke:var(--acc); stroke-width:2.5; fill:rgba(27,77,228,.10)}
.hit-chan.sel{fill:none; stroke:rgba(27,77,228,.35); stroke-width:16}
.mini{width:100%; height:auto}

/* переключатель доступности кликов */
.allsw{margin-top:12px; background:#f7f8fa; border-radius:var(--rs); padding:10px 13px}
.swline{display:flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer; font-weight:500}
.swline input{position:absolute; opacity:0; pointer-events:none}
.swline span{
  width:38px; height:22px; border-radius:99px; background:#d6dae1; position:relative;
  flex:0 0 auto; transition:background .15s;
}
.swline span::after{
  content:''; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:#fff; transition:transform .15s;
  box-shadow:0 1px 3px rgba(16,18,22,.28);
}
.swline input:checked + span{background:var(--acc)}
.swline input:checked + span::after{transform:translateX(16px)}
.allsw .hint2{margin:6px 0 0}

.legend{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:12px; font-size:12.5px; color:var(--mut)}
.legend span{display:flex; align-items:center; gap:6px}
.sw{width:13px; height:13px; border-radius:3px; border:1px solid var(--line); display:inline-block}
.sw.p{background:var(--p)} .sw.d{background:var(--d)}
.sw.b{background:repeating-linear-gradient(45deg,var(--d) 0 4px,var(--p) 4px 8px)}
.sw.t{background:var(--acc)}

/* ---- панель справа ---- */
.back{margin-bottom:12px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.chip{
  border:1px solid var(--line); background:#fafbfc; border-radius:var(--rs);
  padding:8px 12px; text-align:left; display:flex; flex-direction:column; gap:2px; min-width:110px;
}
.chip:hover{border-color:var(--acc)}
.chip.flat{cursor:default}
.chip span{font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.06em}
.chip b{font-weight:600; font-size:14px}
.detail:not(:empty){
  background:#f7f8fa; border-radius:var(--rs); padding:14px; margin:10px 0;
  border-left:3px solid var(--acc);
}
.detail p{margin:0 0 8px} .detail p:last-child{margin:0}

.cgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px}
.cbtn{
  border:1px solid var(--line); background:#fff; border-radius:var(--rs);
  padding:9px 11px; text-align:left; display:flex; flex-direction:column; gap:2px; font-weight:600;
}
.cbtn i{font-style:normal; font-size:11px; font-weight:400; color:var(--mut)}
.cbtn.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.cbtn.on i{color:rgba(255,255,255,.65)}
.cbtn:hover{border-color:var(--acc)}

.list{display:flex; flex-direction:column; gap:6px}
.li{
  border:1px solid var(--line); background:#fff; border-radius:var(--rs);
  padding:9px 12px; display:flex; gap:10px; align-items:baseline; text-align:left;
}
.li b{font-family:'JetBrains Mono',monospace; font-weight:500; min-width:52px}
.li span{color:var(--mut); font-size:13.5px}
.li:hover{border-color:var(--acc)}
.li.on{background:#f6f8ff; border-color:#c9d6ff}

.tech{width:100%; border-collapse:collapse; font-size:13.5px}
.tech td{padding:6px 0; border-bottom:1px solid var(--line)}
.tech td:first-child{color:var(--mut)}
.tech td:last-child{text-align:right}

.acts2{width:100%; border-collapse:collapse; font-size:13.5px}
.acts2 th{text-align:center; font-weight:600; font-size:11px; color:var(--mut);
  text-transform:uppercase; letter-spacing:.06em; padding-bottom:6px}
.acts2 td{padding:3px 0; border-bottom:1px solid #f0f2f5}
.acts2 .bn{color:var(--mut); white-space:nowrap}
.ga{
  border:1px solid var(--line); background:#fff; border-radius:8px; padding:3px 10px;
  font-family:'JetBrains Mono',monospace; font-size:13px; width:100%;
}
.ga.p{color:var(--p)} .ga.d{color:var(--d)}
.ga:hover{border-color:var(--acc)}

/* ---- карточки разбора ---- */
.card .ctag{
  font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--mut); font-weight:600; margin-bottom:4px;
}
.card .sub{color:var(--mut); font-size:13.5px; margin-bottom:10px}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.tag{background:#eef0f4; border-radius:99px; padding:3px 10px; font-size:12.5px; color:var(--mut)}
.note{border-radius:var(--rs); padding:10px 13px; margin:0 0 10px; font-size:14px}
.note.on{background:#eaf5ee; color:var(--ok)}
.note.off{background:#f5f6f8; color:var(--mut)}
.note.tr{background:#eef2ff; color:var(--acc)}
.warn{color:var(--warn); font-size:14px}

.lines{display:flex; flex-direction:column; gap:4px}
.ln{display:flex; gap:10px; padding:7px 10px; border-radius:9px; font-size:13.5px}
.ln b{font-family:'JetBrains Mono',monospace; color:var(--mut); min-width:14px}
.ln.on{background:#f6f8ff; outline:1px solid #c9d6ff}
.ln.on b{color:var(--acc)}
.lname{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut)}

.ggrid{display:flex; flex-wrap:wrap; gap:6px}
.gb{
  width:38px; height:34px; border:1px solid var(--line); background:#fff;
  border-radius:9px; font-family:'JetBrains Mono',monospace; font-size:13px;
}
.gb.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.gb:hover{border-color:var(--acc)}

/* ---- транзиты / композит ---- */
.tbar,.cmpbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:#f7f8fa; border-radius:var(--rs); padding:10px 13px; margin-bottom:12px; font-size:13.5px;
}
.tacts{display:flex; gap:6px; flex-wrap:wrap}
.cmpbar label{display:flex; flex-direction:column; gap:4px; font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--mut); flex:1}
.cmpbar select{border:1px solid var(--line); border-radius:9px; padding:7px 10px; background:#fff; font:inherit}
.amp{font-size:20px; color:var(--mut); align-self:flex-end; padding-bottom:6px}
.hint2{color:var(--mut); font-size:13px; margin:-4px 0 8px}

/* ---- генные ключи ---- */
.keys{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:14px}
.kcard{border:1px solid var(--line); border-radius:var(--r); padding:16px; background:#fafbfc}
.ktag{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--mut); font-weight:600}
.kg{font-size:34px; font-weight:500; line-height:1.1; margin:4px 0}
.kg span{font-size:18px; color:var(--mut)}
.kn{font-weight:600; margin-bottom:8px}
.freq{display:flex; flex-direction:column; gap:8px; margin:12px 0}
.fr{font-size:13px} .fr b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em}
.fr span{color:var(--mut)}

/* ---- ловушка и пример из жизни: отдельные контейнеры ---- */
.trap{
  border:1px solid #f0d5d5; background:#fdf6f6; border-left:3px solid var(--d);
  border-radius:var(--rs); padding:11px 14px; margin:0 0 12px;
}
.trapH{
  font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--d); font-weight:700; margin-bottom:4px;
}
.trap p{margin:0; font-size:14px}
.trapEx{margin-top:8px !important; color:#8a5a5a; font-size:13.5px; font-style:italic}
/* плюс внутри минуса: та же тень даёт особое зрение — без этого разбор односторонний */
.plus{
  margin-top:10px; padding:9px 12px; border-radius:10px;
  background:#eef7f1; border-left:3px solid var(--ok);
}
.plusH{font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ok); font-weight:700; margin-bottom:3px}
.plus p{margin:0 !important; font-size:13.5px; color:#245e40; font-style:normal}

.ex{
  border:1px solid var(--line); background:#f7f8fa; border-left:3px solid var(--acc);
  border-radius:var(--rs); padding:11px 14px; margin:0 0 12px;
}
.exH{
  font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--acc); font-weight:700; margin-bottom:4px;
}
.ex p{margin:0; font-size:14px}

/* ---- три частоты ---- */
.freqBlock{margin-top:6px}
.frRow{margin-bottom:6px}
.frBtn{
  width:100%; text-align:left; border:1px solid var(--line); border-left-width:4px;
  background:#fff; border-radius:var(--rs); padding:10px 13px;
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:'lvl name arr' 'lvl hint arr';
  gap:0 10px; align-items:center;
}
.frBtn:hover{border-color:var(--acc); border-left-color:inherit}
.frLvl{grid-area:lvl; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; align-self:center; min-width:52px}
.frBtn b{grid-area:name; font-weight:600; font-size:15px}
.frBtn i{grid-area:hint; font-style:normal; font-size:12.5px; color:var(--mut)}
.frArrow{grid-area:arr; color:var(--mut); transition:transform .15s}
.frRow.open .frArrow{transform:rotate(180deg)}
.frBody{display:none; padding:12px 14px 2px}
.frRow.open .frBody{display:block}
.frBody p{font-size:14px}
.note.tiny{font-size:12.5px; margin-top:10px}

/* ---- хологенетика ---- */
.holograph{width:100%; height:auto; max-height:calc(100vh - 230px); display:block}
.holograph .seqh{font:600 11px Onest,sans-serif; text-transform:uppercase; letter-spacing:.06em}
.holograph .sphg{font:500 15px 'JetBrains Mono',monospace; pointer-events:none}
.holograph .sphn{font:600 12px Onest,sans-serif; pointer-events:none}
.holograph .sphs{font:400 10px Onest,sans-serif; pointer-events:none}
.hit-sphere:hover{fill:rgba(27,77,228,.12)}
.hit-path:hover{stroke:rgba(27,77,228,.20)}
.hit-sphere.sel{fill:rgba(27,77,228,.14); stroke:var(--acc); stroke-width:2}
.hit-path.sel{stroke:rgba(27,77,228,.35)}
.li u{text-decoration:none; font-weight:600; color:var(--ink)}

/* ---- переключатель режима описания ---- */
.modesw{display:inline-flex; background:#eef0f4; border-radius:99px; padding:3px; gap:2px}
.modesw button{border:0; background:transparent; border-radius:99px; padding:6px 14px;
  font-size:13px; font-weight:500; color:var(--mut)}
.modesw button.on{background:#fff; color:var(--ink); font-weight:600;
  box-shadow:0 1px 2px rgba(16,18,22,.10)}

/* ---- генный ключ ---- */
.gk{margin-top:14px}
.gkhead{border-left:3px solid var(--acc); padding:2px 0 2px 13px; margin-bottom:14px}
.gknum{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--mut); font-weight:600}
.gkn{margin:2px 0 4px; font-size:20px; text-transform:none; letter-spacing:0; color:var(--ink)}
.gktr{margin:0 0 3px; font-size:13px; font-weight:600; color:var(--acc)}
.gkth{margin:0; color:var(--mut); font-size:13.5px}
.gkRow .frBtn b{font-size:16px}

/* ---- профессия ---- */
.prof .doshead h1{font-size:42px}
.proflead{max-width:760px; margin:0 auto 26px; text-align:center}
.proflead p{font-size:17px; line-height:1.5}
.pblock{margin-bottom:26px}
.pblock>h3{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  font-weight:700; border-bottom:1px solid var(--line); padding-bottom:6px; margin-bottom:8px;
}
.pgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:12px}
.pgrid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.pcard{border:1px solid var(--line); border-radius:var(--r); padding:15px; background:#fafbfc}
.pcard.warncard{background:#fdf6f6; border-color:#f0d5d5}
.ptag{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--mut);
  font-weight:700; margin-bottom:5px}
.pnum{font-family:'JetBrains Mono',monospace; font-size:30px; font-weight:500; line-height:1.1}
.pnum span{font-size:16px; color:var(--mut)}
.pname{font-weight:600; margin-bottom:6px}
.pcard p{font-size:13.5px}
.pcard .btn{margin-top:8px}

.rolelist{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.role{
  border:1px solid var(--line); background:#fff; border-radius:99px;
  padding:7px 14px; font-size:14px; display:inline-flex; align-items:center; gap:7px;
}
.role.hot{border-color:var(--acc); background:#f6f8ff; font-weight:600}
.role i{font-style:normal; font-size:10.5px; font-family:'JetBrains Mono',monospace;
  color:var(--mut); background:#eef0f4; border-radius:99px; padding:2px 7px}
.role.hot i{background:#e3eaff; color:var(--acc)}

/* ---- линии сферы ---- */
.slines{margin-top:22px; border-top:1px solid var(--line); padding-top:14px}
.slRow{margin-bottom:6px}
.slBtn{
  width:100%; text-align:left; border:1px solid var(--line); border-left-width:4px;
  border-left-color:var(--line); background:#fff; border-radius:var(--rs); padding:9px 12px;
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:'n name arr' 'n hint arr';
  gap:0 10px; align-items:center;
}
.slBtn:hover{border-color:var(--acc)}
.slRow.on .slBtn{background:#f6f8ff}
.slN{grid-area:n; font-family:'JetBrains Mono',monospace; font-size:17px; color:var(--mut); min-width:16px}
.slRow.on .slN{color:var(--acc); font-weight:500}
.slBtn b{grid-area:name; font-weight:600; font-size:14.5px}
.slBtn i{grid-area:hint; font-style:normal; font-size:12px; color:var(--mut)}
.slBody{display:none; padding:11px 13px 2px}
.slRow.open .slBody{display:block}
.slRow.open .frArrow{transform:rotate(180deg)}
.slBody p{font-size:14px}

/* ---- расширенный расклад канала ---- */
.dos{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.dosbar{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  background:#f7f8fa; border-radius:var(--rs); padding:11px 14px; margin-bottom:18px;
}
.dosbar label{display:flex; flex-direction:column; gap:4px; font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--mut); font-weight:600}
.dosbar select{border:1px solid var(--line); border-radius:10px; padding:8px 11px;
  background:#fff; font:inherit; min-width:250px}
.dosnote{font-size:13px; color:var(--mut); padding-bottom:8px}

.doshead{text-align:center; padding:6px 0 20px; border-bottom:2px solid var(--ink); margin-bottom:20px}
.dosk{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mut)}
.doshead h1{font-size:38px; margin:4px 0 6px; letter-spacing:-.01em}
.dossub{color:var(--mut); font-size:13.5px}

.doscols{display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:26px; align-items:start}
.doscol.mid{padding-top:4px}
.dsec{margin-bottom:20px}
.dsec h3{
  margin:0 0 7px; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); font-weight:700; border-bottom:1px solid var(--line); padding-bottom:5px;
}
.dsec p{font-size:14px; margin:0}
.mech{margin:0; padding-left:20px; font-size:14px}
.mech li{margin-bottom:7px}
.known{margin:0; padding-left:18px; font-size:14px; list-style:none}
.known li{margin-bottom:6px; position:relative; padding-left:14px}
.known li::before{content:'★'; position:absolute; left:-4px; color:var(--acc); font-size:11px}
.strs{display:flex; flex-direction:column; gap:11px}
.str b{display:block; font-size:14px; font-weight:600}
.str span{font-size:13.5px; color:var(--mut)}

.dosmini{background:#fafbfc; border:1px solid var(--line); border-radius:var(--r); padding:12px}
.dosmini svg{width:100%; height:auto; max-height:420px; display:block}
.dosgates{display:flex; gap:10px; margin-top:12px}
.dosgate{
  flex:1; border:1px solid var(--line); background:#fff; border-radius:var(--rs);
  padding:10px 12px; text-align:left;
}
.dosgate:hover{border-color:var(--acc)}
.dosgate b{display:block; font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:500}
.dosgate span{display:block; font-size:13.5px; font-weight:600}
.dosgate i{display:block; font-style:normal; font-size:11.5px; color:var(--mut)}

.dosns{margin-top:12px; border-top:1px solid var(--line); padding-top:16px}
.dosns h3{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700}
.nsgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.nsi{background:#fdf6f6; border:1px solid #f0d5d5; border-radius:var(--rs);
  padding:11px 13px; font-size:13.5px}

.dostech{margin-top:22px; border-top:2px solid var(--ink); padding-top:16px}
.dostech h3{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; text-align:center}
.tdgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:2px; margin-top:12px}
.tdi{padding:10px 12px; border-left:1px solid var(--line)}
.tdi:first-child{border-left:0}
.tdi span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--mut); font-weight:600; margin-bottom:3px}
.tdi b{font-size:13.5px; font-weight:600}
.tdnote{margin:10px 0 0; font-size:13px; color:var(--mut); line-height:1.5}
.tdnote b{color:var(--ink)}

@media (max-width:1100px){
  .doscols{grid-template-columns:1fr 1fr}
  .doscol.mid{grid-column:1 / -1; order:-1; max-width:460px; margin:0 auto}
}
@media (max-width:700px){
  .doscols{grid-template-columns:1fr}
  .doshead h1{font-size:27px}
  .dos{padding:14px}
}

/* ---- match ---- */
.mbar{
  display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap;
  background:#f7f8fa; border-radius:var(--rs); padding:14px 16px; margin-bottom:12px;
}
.mfield{display:flex; flex-direction:column; gap:5px}
.mfield label{font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--mut); font-weight:700}
.mfield input,.mfield select{
  border:1px solid var(--line); border-radius:10px; padding:8px 11px; background:#fff; font:inherit;
}
.mfield input[list]{min-width:190px}
.modesw.big button{padding:8px 18px; font-size:14px}
.agebox{display:flex; align-items:center; gap:7px}
.agebox input{width:64px; text-align:center}
.agebox .unit{font-size:13px; color:var(--mut)}
.mnote{font-size:13.5px; color:var(--mut); margin-bottom:12px}
.mprog{margin:10px 0 16px}
.mbarline{height:6px; background:#e6e9ee; border-radius:99px; overflow:hidden}
.mbarline i{display:block; height:100%; width:0; background:var(--acc); transition:width .12s linear}
.mst{font-size:12.5px; color:var(--mut); margin-top:6px}
.pblockh{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  border-bottom:1px solid var(--line); padding-bottom:6px; margin:22px 0 8px}
.sumrow{display:grid; grid-template-columns:1fr 70px 34px; gap:8px; align-items:center;
  font-size:13.5px; margin-bottom:5px}
.sumrow b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sumrow .bar{height:6px; background:#e6e9ee; border-radius:99px; overflow:hidden}
.sumrow .bar i{display:block; height:100%; background:var(--acc)}
.sumrow em{font-style:normal; font-size:12px; color:var(--mut); text-align:right}

/* ---- фильтры списка match ---- */
.mtypes{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:-4px 0 12px}
.onebox{
  border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin-bottom:14px;
  background:#fafbfc;
}
.oneh{font-size:13.5px; color:var(--mut); margin-bottom:10px}
.oneh b{color:var(--ink)}
.onerow{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.onerow label{display:flex; flex-direction:column; gap:5px; font-size:11px;
  text-transform:uppercase; letter-spacing:.07em; color:var(--mut); font-weight:700; position:relative}
.onerow input{border:1px solid var(--line); border-radius:10px; padding:8px 11px;
  background:#fff; font:400 15px Onest,sans-serif; color:var(--ink);
  text-transform:none; letter-spacing:0; width:150px}
.oneerr{color:var(--d); font-size:13px; min-height:16px; margin-top:6px}
.paircard{margin-top:12px; border-top:1px solid var(--line); padding-top:14px}
.phead2{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.pname2{margin:3px 0 3px; font-size:19px; text-transform:none; letter-spacing:0; color:var(--ink)}
.pscore2{font-family:'JetBrains Mono',monospace; font-size:30px; font-weight:500;
  color:var(--acc); text-align:right; line-height:1.05}
.pscore2 i{display:block; font-style:normal; font-family:Onest,sans-serif; font-size:10px;
  text-transform:uppercase; letter-spacing:.07em; color:var(--mut); font-weight:600}
.notes{display:flex; flex-direction:column; gap:8px}
.note2{border-radius:12px; padding:10px 13px; border-left:3px solid}
.notes.ok .note2{background:#eef7f1; border-left-color:var(--ok)}
.notes.bad .note2{background:#fdf6f6; border-left-color:var(--d)}
.note2 b{display:block; font-size:13.5px; margin-bottom:3px}
.notes.ok .note2 b{color:#186a41}
.notes.bad .note2 b{color:#a3363f}
.note2 p{margin:0; font-size:13.5px}

.fgrp{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.flab{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--mut);
  font-weight:700; min-width:92px; flex:0 0 auto;
}
.fchip{
  border:1px solid var(--line); background:#fff; border-radius:99px;
  padding:5px 12px; font-size:13px; display:inline-flex; align-items:center; gap:6px;
}
.fchip:hover{border-color:var(--acc)}
.fchip.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.fchip i{font-style:normal; font-size:10.5px; font-family:'JetBrains Mono',monospace;
  background:#eef0f4; color:var(--mut); border-radius:99px; padding:1px 6px}
.fchip.on i{background:rgba(255,255,255,.22); color:#fff}
.fchip.reset{margin-left:auto; color:var(--mut)}
.fnum{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--mut)}
.fnum select{border:1px solid var(--line); border-radius:8px; padding:4px 8px;
  background:#fff; font:inherit; color:var(--ink)}
.mpager{display:flex; align-items:center; gap:5px; margin-top:14px; flex-wrap:wrap}
.mpager:empty{display:none}
.pgbtn{
  min-width:36px; height:36px; padding:0 10px; border:1px solid var(--line);
  background:#fff; border-radius:10px; font-size:14px; font-weight:500;
}
.pgbtn:hover:not(:disabled){border-color:var(--acc)}
.pgbtn.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.pgbtn:disabled{opacity:.35}
.pgdots{color:var(--mut); padding:0 2px}
.pginfo{font-size:12.5px; color:var(--mut); margin-left:8px}

.mfoot{display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap}
.fcount{font-size:13px; color:var(--mut)}
.fcount b{color:var(--ink)}
.factive{font-size:12.5px; color:var(--acc); flex:1 1 240px}
.mempty{
  padding:22px 18px; text-align:center; border:1px dashed var(--line);
  border-radius:var(--rs); background:#fafbfc;
}
.mempty b{display:block; font-size:15px; margin-bottom:5px}
.mempty p{color:var(--mut); font-size:13.5px; margin:0 0 12px}

/* цветная метка уровня слева у строки */
.mrow.lv-top{border-left:3px solid var(--ok)}
.mrow.lv-high{border-left:3px solid var(--acc)}
.mrow.lv-mid{border-left:3px solid var(--warn)}
.mrow.lv-low{border-left:3px solid var(--line)}

.mlist{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.mrow{border:1px solid var(--line); border-radius:var(--rs); background:#fff; overflow:hidden}
.mrow.open{border-color:var(--acc)}
.mhead{display:grid; grid-template-columns:34px 1.1fr 1.4fr 56px; gap:12px;
  align-items:center; padding:11px 14px; cursor:pointer}
.mhead:hover{background:#fafbfc}
.mrank{font-family:'JetBrains Mono',monospace; color:var(--mut); font-size:13px}
.mdate b{display:block; font-family:'JetBrains Mono',monospace; font-size:15px}
.mdate span,.mwho span{display:block; font-size:12px; color:var(--mut)}
.mwho b{font-size:14px}
.mlisthead{
  display:grid; grid-template-columns:34px 1.1fr 1.4fr 76px; gap:12px;
  padding:0 14px 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--mut); font-weight:700; position:relative;
}
.mlisthead .r{text-align:right}
.colf{
  border:1px solid transparent; background:transparent; border-radius:8px;
  padding:4px 7px; font:inherit; color:var(--mut); text-align:left;
  display:inline-flex; align-items:center; gap:5px; justify-self:start;
}
.colf.r{justify-self:end}
.colf i{font-style:normal; font-size:9px; opacity:.7}
.colf:hover{background:#eef0f4; color:var(--ink)}
.colf.act{background:var(--ink); color:#fff; border-color:var(--ink)}
.colmenu{
  position:absolute; top:100%; z-index:40; min-width:280px; max-width:420px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px;
  box-shadow:0 14px 34px rgba(16,18,22,.16); display:flex; flex-direction:column; gap:9px;
  text-transform:none; letter-spacing:0;
}
.colmenu .fgrp{align-items:flex-start}
.colmenu .fgrp.col{flex-direction:column; gap:7px}
.colmenu .flab{min-width:0; width:100%}
.fsearch{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:8px 11px;
  font:400 14px Onest,sans-serif; color:var(--ink);
}
.fsearch:focus{outline:none; border-color:var(--acc)}
.scalehint{margin:8px 0 0}
.scalehint b{color:var(--acc); font-family:'JetBrains Mono',monospace}
.mscore{font-family:'JetBrains Mono',monospace; font-size:17px; font-weight:500;
  text-align:right; color:var(--acc); line-height:1.15}
.mscore i{display:block; font-style:normal; font-family:Onest,sans-serif;
  font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-weight:600}
.mdet{display:none; padding:4px 14px 16px; border-top:1px solid var(--line)}
.mrow.open .mdet{display:block}
.mgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:12px 0}
.mcell{background:#fafbfc; border:1px solid var(--line); border-radius:12px; padding:9px 11px}
.mcell span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--mut); font-weight:700}
.mcell b{font-size:16px}
.mcell i{display:block; font-style:normal; font-size:11.5px; color:var(--mut); margin-top:2px}
.mh4{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--mut);
  font-weight:700; margin:12px 0 6px}

@media (max-width:700px){
  .mhead{grid-template-columns:26px 1fr 52px; row-gap:4px}
  .mwho{grid-column:2 / -1}
  /* фильтры живут в шапке — прятать её нельзя, иначе они недоступны.
     Превращаем в горизонтальный ряд кнопок с прокруткой. */
  .mlisthead{
    display:flex; gap:6px; padding:0 0 8px; overflow-x:auto; scrollbar-width:none;
  }
  .mlisthead::-webkit-scrollbar{display:none}
  .mlisthead > span{display:none}
  .colf{
    flex:0 0 auto; border-color:var(--line); background:#fff;
    padding:7px 12px; font-size:11px; white-space:nowrap;
  }
  .colf.r{justify-self:auto}
  .colmenu{left:0 !important; right:0; min-width:0; max-width:none}
  .flab{min-width:100%; margin-bottom:-2px}
  .fchip.reset{margin-left:0}
  .mbar{gap:12px}
  .mfield{flex:1 1 100%}
  .mfield input[list]{width:100%; min-width:0}
}

/* ---- мобильная шторка разбора ---- */
body.noscroll{overflow:hidden}
.sheetWrap{
  position:fixed; inset:0; z-index:60; background:rgba(16,18,22,.5);
  display:flex; align-items:flex-end; animation:fadeIn .15s ease-out;
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.mSheet{
  background:#fff; width:100%; max-height:90vh; border-radius:22px 22px 0 0;
  display:flex; flex-direction:column; overflow:hidden;
  animation:slideUp .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes slideUp{from{transform:translateY(30px)} to{transform:none}}
.mBar{
  display:flex; align-items:center; gap:6px; padding:10px 12px 8px;
  border-bottom:1px solid var(--line); flex:0 0 auto;
}
.mCount{
  flex:1; text-align:center; font-size:12px; font-weight:600; color:var(--mut);
  text-transform:uppercase; letter-spacing:.07em;
}
.mNav,.mClose{
  border:1px solid var(--line); background:#fff; border-radius:12px;
  width:40px; height:40px; font-size:20px; line-height:1; color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.mNav:disabled{opacity:.3}
.mClose{font-size:15px; background:#eef0f4; border-color:transparent; margin-left:4px}
.mGrab{height:4px; width:44px; border-radius:99px; background:var(--line); margin:0 auto 2px; flex:0 0 auto}
.mBody{overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 16px 28px; flex:1 1 auto}
.mBody.slideL{animation:inFromR .18s ease-out}
.mBody.slideR{animation:inFromL .18s ease-out}
@keyframes inFromR{from{opacity:.3; transform:translateX(22px)} to{opacity:1; transform:none}}
@keyframes inFromL{from{opacity:.3; transform:translateX(-22px)} to{opacity:1; transform:none}}
.mBody .back{display:none}

/* ---- аккаунт и консультация ---- */
.btn.acct{background:#eef2ff; color:var(--acc); font-weight:600}
.btn:disabled{opacity:.5; cursor:default}
.tabs2{display:flex; gap:4px; background:#eef0f4; border-radius:99px; padding:3px; margin-bottom:16px}
.t2{flex:1; border:0; background:transparent; border-radius:99px; padding:8px;
  font-size:14px; font-weight:500; color:var(--mut)}
.t2.on{background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(16,18,22,.1)}
.price{
  display:flex; align-items:baseline; gap:10px; background:#f7f8fa; border-radius:var(--rs);
  padding:12px 15px; margin-bottom:12px;
}
.price b{font-size:28px; font-family:'JetBrains Mono',monospace; font-weight:500; color:var(--ink)}
.price span{font-size:13.5px; color:var(--mut)}
.sheet select{
  display:block; width:100%; margin-top:5px; border:1px solid var(--line);
  background:#f7f8fa; border-radius:12px; padding:11px 13px;
  font:400 15px Onest, sans-serif; color:var(--ink); text-transform:none; letter-spacing:0;
}
.sheet a.btn{text-decoration:none; display:inline-flex; align-items:center}
.privacy{
  margin:18px auto 0; max-width:1500px; padding:0 20px 18px;
  font-size:12px; color:var(--mut); text-align:center;
}

/* ---- модалка ---- */
.modal{
  position:fixed; inset:0; background:rgba(16,18,22,.45); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.sheet{
  background:#fff; border-radius:22px; padding:24px; width:min(460px,100%);
  max-height:90vh; overflow:auto;
}
.sheet label{display:block; margin-bottom:12px; font-size:12px; color:var(--mut);
  text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.sheet input{
  display:block; width:100%; margin-top:5px; border:1px solid var(--line);
  background:#f7f8fa; border-radius:12px; padding:11px 13px;
  font:400 15px Onest, sans-serif; color:var(--ink); text-transform:none; letter-spacing:0;
}
.sheet input:focus{outline:none; border-color:var(--acc); background:#fff}
.sheet .row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
/* ---- автодополнение городов ---- */
.acbox{
  position:absolute; left:0; right:0; top:100%; z-index:70; margin-top:4px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 10px 28px rgba(16,18,22,.13); overflow:hidden; display:none;
}
.acbox.on{display:block}
.acitem{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  width:100%; text-align:left; border:0; background:transparent;
  padding:9px 13px; border-bottom:1px solid #f2f4f7;
}
.acitem:last-child{border-bottom:0}
.acitem b{font-weight:600; font-size:14.5px; text-transform:none; letter-spacing:0; color:var(--ink)}
.acitem b u{text-decoration:none; font-weight:400; color:var(--mut); font-size:12.5px}
.acitem i{font-style:normal; font-size:11.5px; color:var(--mut);
  font-family:'JetBrains Mono',monospace; text-transform:none; letter-spacing:0}
.acitem:hover,.acitem.on{background:#f4f7ff}

.hint{font-size:12.5px; color:var(--mut); margin-bottom:8px; min-height:18px}
.err{color:var(--d); font-size:13px; min-height:18px}
.acts{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px}
.acts>div{display:flex; gap:8px}

@media (max-width:1250px){ .brandsub{display:none} }

@media (max-width:960px){
  .grid{grid-template-columns:1fr}
  .bgwrap{position:static}
  .info{max-height:none}
  .main{padding:14px}
  .top{padding:12px 14px}
  .brand span.mark{display:none}
  .brandsub{display:none}
  .tabs{margin:0 -14px; padding:2px 14px; scroll-snap-type:x proximity}
  .tab{scroll-snap-align:start}
  .sel{max-width:110px}
}

/* ---------- крест воплощения ---------- */
.cross{
  border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
  display:flex; flex-direction:column; gap:10px; background:var(--card);
}
.cross p{margin:0}
.cross h4{margin:4px 0 0}
.crhead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.crhead b{font-size:17px}
.crhead span{font-size:13px; color:var(--mut)}
.cren{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px}
.crsub{font-size:13px; color:var(--mut); margin-top:-4px !important}
.crhead i{margin-left:auto; font-style:normal; font-size:12.5px; color:var(--mut)}
.crhow{padding:10px 12px; background:#f4f6fa; border-radius:var(--rs); font-size:14px}
.crgrid{display:grid; gap:9px; grid-template-columns:1fr 1fr; margin-top:4px}
.crg{
  display:flex; flex-direction:column; gap:4px; text-align:left;
  border:1px solid var(--line); border-radius:var(--rs); background:#fff; padding:12px 13px;
}
.crg:hover{border-color:var(--acc)}
.crgt{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mut)}
.crg b{font-size:15px}
.crgw{font-size:12.5px; color:var(--mut)}
.crge{font-size:13px}
.crnote{margin-top:2px}
@media(max-width:640px){ .crgrid{grid-template-columns:1fr} }

/* оранжевая кнопка «100 причин» */
.btn.hot100{background:#ff7a00 !important; color:#fff !important; border:0 !important;
  box-shadow:0 4px 14px -4px rgba(255,122,0,.6) !important; font-weight:800 !important}
.btn.hot100:hover{background:#ff8c1a !important; box-shadow:0 6px 18px -4px rgba(255,122,0,.7) !important}