@charset "UTF-8";
/* Оболочка приложения и общие компоненты. Переменные — только из tokens.css.
   Подключается вторым: после tokens.css, до страничного. */

*, *::before, *::after { box-sizing: border-box; }

/* !important здесь не украшение: страницы объявляют свой body{padding:…} ниже
   по потоку, и без него контент уезжает под сайдбар и топбар */
body { margin:0; background:var(--n900); color:var(--n100);
       font-family:var(--f-body); font-size:var(--fs-b); line-height:1.5;
       padding-top:var(--top-h) !important; padding-left:var(--side-w) !important; }

/* !important убран: страничные переопределения ширины выпилены, спорить больше
   некому, и узкая колонка юридических страниц перебивает это обычным способом. */
.wrap { max-width:var(--col); margin:0 auto;
        padding:var(--sp-5) var(--gut) var(--sp-7); }
/* Юридические страницы — узкая колонка под сплошной текст (план, раздел 4.6).
   Без !important: страничных переопределений `.wrap` у них больше нет. */
.wrap-legal { max-width:var(--wrap-legal); }
.measure { max-width:var(--measure); }

/* ── САЙДБАР ─────────────────────────────────────────────────────────── */
.appsb { position:fixed; top:0; left:0; bottom:0; width:var(--side-w); z-index:320;
         display:flex; flex-direction:column; background:var(--n850);
         border-right:1px solid var(--n700); overflow-y:auto; overscroll-behavior:contain; }
/* Шапка сайдбара: лого и кнопка сворачивания стоят в одном ряду. Линию и
   высоту держит ряд, а не лого: в топбаре публичных страниц то же лого
   используется в одиночку. */
.appsb-top { display:flex; align-items:center; gap:var(--sp-2); flex:none;
             height:var(--top-h); padding:0 var(--sp-2) 0 var(--sp-4);
             border-bottom:1px solid var(--n700); }
.appsb-logo { display:flex; align-items:center; gap:var(--sp-2); flex:none;
              height:var(--top-h); padding:0 var(--sp-4); color:var(--n100);
              text-decoration:none; font-family:var(--f-disp); font-size:17px; }
.appsb-top .appsb-logo { flex:1; min-width:0; height:auto; padding:0; }
.appsb-logo img { width:28px; height:28px; border-radius:50%; border:1px solid var(--n700); flex:none; }
.appsb-logo-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-rail-t { flex:none; width:28px; height:28px; display:grid; place-items:center; padding:0;
             background:transparent; border:0; border-radius:var(--r-sm);
             color:var(--n400); cursor:pointer; }
.sb-rail-t:hover { color:var(--n100); background:var(--n800); }
.sb-rail-t svg { width:16px; height:16px; }
.appsb-nav { flex:1; padding:var(--sp-3) var(--sp-1); }
.appsb-foot { flex:none; min-height:var(--foot-h, 62px); display:flex; flex-direction:column;
              justify-content:center; gap:var(--sp-2); padding:var(--sp-2);
              border-top:1px solid var(--n700); }

.sb-lbl { padding:var(--sp-3) var(--sp-3) var(--sp-1); font-size:var(--fs-xs);
          font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--n400); }
.sb-sep { height:1px; margin:var(--sp-2) var(--sp-3); background:var(--n700); }

.sb-i { position:relative; display:flex; align-items:center; gap:var(--sp-2);
        min-height:34px; padding:0 10px; border-radius:var(--r-md);
        color:var(--n300); text-decoration:none; font-size:var(--fs-s); font-weight:500; }
.sb-i svg { flex:none; width:15px; height:15px; color:var(--tint, var(--n500)); }
.sb-i-t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-i:hover { background:var(--n800); color:var(--n100); }
.sb-i.on { background:var(--n800); color:var(--n0); font-weight:600; }
.sb-i.on::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px;
                   border-radius:0 3px 3px 0; background:var(--tint, var(--acc)); }
.sb-i[data-sec="search"]   { --tint:var(--s-search); }
.sb-i[data-sec="catalog"]  { --tint:var(--s-lib); }
.sb-i[data-sec="quiz"],
.sb-i[data-sec="rewards"]  { --tint:var(--s-quiz); }
.sb-i[data-sec="heroes"],
.sb-i[data-sec="patterns"] { --tint:var(--s-hero); }
.sb-i[data-sec^="adm-"]    { --tint:var(--n400); }
.sb-i[data-sec="lessons"],
.sb-i[data-sec="coaching"],
.sb-i[data-sec="reviews"]  { --tint:var(--s-coach); }

/* бейдж пункта: платность и счётчик — свойство пункта, а не раздела */
.sb-b { flex:none; padding:1px 5px; border-radius:var(--r-pill); font-size:var(--fs-xs);
        font-weight:600; font-family:var(--f-num); color:var(--n300); background:var(--n750); }
.sb-b.free { color:var(--ok); background:var(--ok-soft); }
.sb-b.soon { color:var(--warn); background:var(--warn-soft); }
.sb-b.lock { color:var(--n400); background:transparent; }

.sb-tier { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);
           border-radius:var(--r-md); color:var(--acc); background:var(--acc-soft);
           font-size:var(--fs-s); font-weight:600; text-decoration:none; }
.sb-tier.freeb { color:var(--n300); background:var(--n800); }
.sb-tier svg { width:16px; height:16px; flex:none; }
.sb-quota { padding:var(--sp-3); margin-bottom:var(--sp-2); border-radius:var(--r-md);
            border:1px solid var(--acc-line); background:var(--acc-soft); }
.sb-quota b { font-family:var(--f-num); font-weight:700; font-size:var(--fs-h2); color:var(--acc); }
.sb-quota span { display:block; font-size:var(--fs-xs); color:var(--n300); }

/* ── РЕЛЬС: свёрнутый сайдбар ────────────────────────────────────────
   Ширина живёт в одной переменной: --side-w двигает и оболочку, и колонку
   контента, поэтому шапка, страница и подвал не разъезжаются. Подпись пункта
   в рельсе уезжает в title — его ставит скрипт в момент сворачивания.
   На мобилке рельса нет: там сайдбар и так ящик. */
@media (min-width:921px) {
  /* Плавность: едут четыре вещи разом — поле страницы, сам сайдбар, левый
     край топбара и потолок колонки. Без общего времени они разъезжаются и
     сворачивание выглядит рывком. */
  body, .appsb, .apptb { transition:padding-left .2s ease, width .2s ease, left .2s ease; }
  .wrap, .apptb-in, .site-footer .sf-inner { transition:max-width .2s ease; }
  body.sb-rail { --side-w:60px; --col:calc(var(--wrap) - 60px); }
  /* Лого в рельсе прячется ЦЕЛИКОМ, а не одной подписью: 60px не держат
     рядом кружок и кнопку, а без кнопки рельс не развернуть обратно. */
  /* Подпись не прячем display'ем, а сжимаем: display переключается мгновенно и
     текст исчезал раньше, чем уезжала панель. */
  .sb-i-t { transition:opacity .12s ease, flex-basis .2s ease; }
  body.sb-rail .sb-i-t { opacity:0; flex:0 0 0; }
  body.sb-rail .appsb-logo,
  body.sb-rail .sb-b,
  body.sb-rail .sb-lbl,
  body.sb-rail .sb-tier-t,
  body.sb-rail .appsb-foot .usteam { display:none; }
  body.sb-rail .appsb-top { padding:0; justify-content:center; }
  body.sb-rail .sb-rail-t svg { transform:scaleX(-1); }
  body.sb-rail .appsb-nav  { padding:var(--sp-3) 8px; }
  body.sb-rail .appsb-foot { padding:var(--sp-3) 8px var(--sp-4); }
  body.sb-rail .sb-sep     { margin:var(--sp-2) 8px; }
  body.sb-rail .sb-i,
  body.sb-rail .sb-tier    { justify-content:center; gap:0; padding:0; }
  body.sb-rail .sb-i svg   { width:17px; height:17px; }
  /* у гостя в подвале сайдбара только кнопка Steam — спрятали её, значит
     прячем и сам подвал, иначе внизу висит пустая полоса с линией */
  body.sb-rail .appsb-foot:not(:has(.sb-i)):not(:has(.sb-tier)) { display:none; }
}

/* ── ТОПБАР ──────────────────────────────────────────────────────────── */
.apptb { position:fixed; top:0; left:var(--side-w); right:0; height:var(--top-h); z-index:300;
         background:color-mix(in srgb, var(--n900) 88%, transparent);
         backdrop-filter:blur(10px); border-bottom:1px solid var(--n700); }
/* Полоса топбара идёт во всю ширину, а его содержимое — в той же колонке, что
   контент и футер: иначе шапка и подвал не совпадают по краям. */
.apptb-in { max-width:var(--col); height:100%; margin:0 auto; padding:0 var(--gut);
            display:flex; align-items:center; gap:var(--sp-3); }
.apptb-t { flex:1; min-width:0; font-family:var(--f-disp); font-size:var(--fs-h1); font-weight:600;
           color:var(--n100); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.apptb-r { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); flex:none; }
.apptb-burger { display:none; width:36px; height:36px; flex:none; align-items:center;
                justify-content:center; border:1px solid var(--n700); border-radius:var(--r-md);
                background:transparent; color:var(--n300); cursor:pointer; padding:0; }

/* ── НИЖНЯЯ ПАНЕЛЬ (мобилка) ─────────────────────────────────────────── */
.appmb { display:none; position:fixed; left:0; right:0; bottom:0; z-index:300; height:56px;
         background:var(--n850); border-top:1px solid var(--n700); }
.appmb a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
           gap:3px; padding:0; min-height:0; border-radius:0; background:none;
           color:var(--n400); text-decoration:none; font-size:10px; font-weight:600; }
.appmb a.on::before { content:none; }
.appmb a.on { color:var(--acc); }
.appmb svg { width:20px; height:20px; flex:none; }
.sb-scrim { display:none; position:fixed; inset:0; z-index:310; background:rgba(0,0,0,.6); }

/* ── КНОПКИ ──────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
       height:36px; padding:0 var(--sp-4); border-radius:var(--r-md); border:1px solid transparent;
       font:600 var(--fs-s)/1 var(--f-body); text-decoration:none; cursor:pointer;
       background:var(--acc); color:var(--on-acc); white-space:nowrap; }
.btn:hover { background:var(--acc-hi); }
.btn:active { background:var(--acc-lo); }
.btn-ghost { background:transparent; color:var(--n200); border-color:var(--n600); }
.btn-ghost:hover { background:var(--n750); color:var(--n0); border-color:var(--n500); }
.btn-txt { background:transparent; color:var(--n300); border-color:transparent; padding:0 var(--sp-2); }
.btn-txt:hover { color:var(--n0); background:var(--n800); }
.btn-sm { height:28px; padding:0 var(--sp-3); font-size:var(--fs-xs); }
.btn-bad { background:var(--bad); color:var(--n0); }

/* иконочная кнопка и аватар шапки */
.uibtn { width:36px; height:36px; border-radius:var(--r-md); border:1px solid var(--n700);
         background:transparent; color:var(--n300); display:inline-flex; align-items:center;
         justify-content:center; cursor:pointer; flex:none; padding:0; text-decoration:none; }
.uibtn:hover { border-color:var(--n600); color:var(--n100); }
.uava { width:34px; height:34px; border-radius:50%; border:1px solid var(--n600);
        cursor:pointer; flex:none; }
.kbadge { position:absolute; top:-6px; right:-6px; background:var(--bad); color:var(--n0);
          font:700 9px/1.2 var(--f-body); border-radius:var(--r-pill); padding:2px 5px; }
.usteam { display:inline-flex; align-items:center; gap:7px; background:#1b2838; color:var(--n100);
          border:1px solid #2a475e; border-radius:var(--r-md); padding:0 var(--sp-4); height:36px;
          font:700 13px/1 var(--f-body); text-decoration:none; white-space:nowrap; }
.usteam:hover { background:#233c53; border-color:#66c0f4; }
.ubadge { display:inline-flex; align-items:center; gap:6px; padding:0 var(--sp-3); height:30px;
          border-radius:var(--r-md); font:600 var(--fs-s)/1 var(--f-body); color:var(--acc);
          background:var(--acc-soft); flex:none; border:0; white-space:nowrap; text-decoration:none; }
.ubadge.freeb { color:var(--n300); background:var(--n750); }
.ubadge.subcta { background:var(--acc); color:var(--on-acc); font-weight:700; }
.ubadge.subcta:hover { background:var(--acc-hi); }

/* ── ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА ─────────────────────────────────────────────── */
.lngsw { display:inline-flex; align-items:center; gap:2px; flex:none; padding:2px; height:30px;
         border:1px solid var(--n700); border-radius:var(--r-md); background:transparent; }
.lngsw-i { display:inline-flex; align-items:center; height:24px; padding:0 7px;
           border-radius:var(--r-sm); font:600 var(--fs-xs)/1 var(--f-body); letter-spacing:.03em;
           color:var(--n300); opacity:.55; text-decoration:none; white-space:nowrap; }
.lngsw-i:hover { opacity:1; color:var(--n100); }
.lngsw-i.on { opacity:1; color:var(--n100); background:var(--n750); cursor:default; }

/* ── КАРТОЧКА ────────────────────────────────────────────────────────── */
.card { background:var(--n800); border:1px solid var(--n700); border-radius:var(--r-lg);
        padding:20px; }
.card-hd { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.card-t { font:600 var(--fs-h2)/1.3 var(--f-body); color:var(--n0); }
/* внутри карточки — линии, не фоны */
.card-row + .card-row { border-top:1px solid var(--n700); padding-top:var(--sp-3); margin-top:var(--sp-3); }
/* медиа всегда прижато к краю карточки */
.card-media { margin:0 -20px; width:calc(100% + 40px); display:block; }
.card-media:first-child { margin-top:-20px; border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden; }
.card-media:last-child  { margin-bottom:-20px; border-radius:0 0 var(--r-lg) var(--r-lg); overflow:hidden; }

/* ── БЕЙДЖ ───────────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:5px; padding:2px 8px;
         border-radius:var(--r-pill); font:600 var(--fs-xs)/1.5 var(--f-body);
         color:var(--n300); background:var(--n750); white-space:nowrap; }
.badge.ok   { color:var(--ok);   background:var(--ok-soft); }
.badge.warn { color:var(--warn); background:var(--warn-soft); }
.badge.bad  { color:var(--bad);  background:var(--bad-soft); }
.badge.info { color:var(--info); background:var(--info-soft); }
.badge.acc  { color:var(--acc);  background:var(--acc-soft); }

/* ── ПОЛЕ ВВОДА ──────────────────────────────────────────────────────── */
.field, input[type=text], input[type=search], input[type=number], input[type=email],
input[type=url], input[type=password], textarea, select {
  background:var(--n850); border:1px solid var(--n700); border-radius:var(--r-sm);
  color:var(--n100); font:400 var(--fs-b)/1.4 var(--f-body); padding:8px var(--sp-3); }
.field::placeholder, input::placeholder, textarea::placeholder { color:var(--n500); }
.lbl { display:block; margin-bottom:var(--sp-1); font:600 var(--fs-xs)/1 var(--f-body);
       letter-spacing:.06em; text-transform:uppercase; color:var(--n400); }

/* ── ТАБЛИЦА ─────────────────────────────────────────────────────────── */
.tbl { width:100%; border-collapse:collapse; font-size:var(--fs-s); }
.tbl th { text-align:left; padding:var(--sp-2) var(--sp-3); font:600 var(--fs-xs)/1 var(--f-body);
          letter-spacing:.06em; text-transform:uppercase; color:var(--n400);
          border-bottom:1px solid var(--n700); white-space:nowrap; }
.tbl td { padding:var(--sp-3); border-bottom:1px solid var(--n700); color:var(--n200); }
.tbl tr:hover td { background:var(--n850); }
.tbl .num { font-family:var(--f-num); font-weight:700; color:var(--n100); }

/* ── ВКЛАДКИ И ЧИПЫ ──────────────────────────────────────────────────── */
.tabs { display:flex; gap:var(--sp-1); border-bottom:1px solid var(--n700); }
.tab { padding:var(--sp-2) var(--sp-3); border:0; background:transparent; cursor:pointer;
       font:500 var(--fs-s)/1 var(--f-body); color:var(--n300);
       border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover { color:var(--n100); }
.tab.on { color:var(--n0); font-weight:600; border-bottom-color:var(--acc); }
.chip { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 var(--sp-3);
        border:1px solid var(--n700); border-radius:var(--r-sm); background:transparent;
        font:500 var(--fs-s)/1 var(--f-body); color:var(--n300); cursor:pointer; white-space:nowrap; }
.chip:hover { border-color:var(--n600); color:var(--n100); }
.chip.on { border-color:var(--acc-line); background:var(--acc-soft); color:var(--acc); font-weight:600; }

/* ── ЗАГОЛОВКИ И ЦИФРЫ ───────────────────────────────────────────────── */
h1 { font:600 var(--fs-d2)/1.2 var(--f-disp); text-transform:uppercase; color:var(--n0); margin:0 0 var(--sp-4); }
h2 { font:600 var(--fs-h1)/1.25 var(--f-disp); color:var(--n0); margin:var(--sp-6) 0 var(--sp-3); }
h3 { font:600 var(--fs-h2)/1.3 var(--f-body); color:var(--n100); margin:var(--sp-5) 0 var(--sp-2); }
.num { font-family:var(--f-num); font-weight:700; }
.muted { color:var(--n300); }
.tiny  { font-size:var(--fs-xs); color:var(--n400); }

/* ── ЖИВОСТЬ, ФОКУС, ОТКЛЮЧЁННОЕ ─────────────────────────────────────── */
button, .btn, a, summary, select, label,
input[type=submit], input[type=button],
input[type=checkbox], input[type=radio] { transition:all .15s ease-in-out; }
input[type=text], input[type=number], input[type=search], input[type=url],
input[type=email], input[type=password], textarea {
  transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out; }
button:not(:disabled), .btn, summary, select,
input[type=submit]:not(:disabled), input[type=button]:not(:disabled),
input[type=checkbox]:not(:disabled), input[type=radio]:not(:disabled) { cursor:pointer; }
button:hover:not(:disabled), .btn:hover,
input[type=submit]:hover:not(:disabled), input[type=button]:hover:not(:disabled) { filter:brightness(1.12); }
a:hover { filter:brightness(1.18); }
button:active:not(:disabled), .btn:active,
input[type=submit]:active:not(:disabled), input[type=button]:active:not(:disabled),
input[type=checkbox]:active:not(:disabled), input[type=radio]:active:not(:disabled) { transform:scale(.96); }
:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
input:focus, textarea:focus, select:focus {
  border-color:var(--acc) !important; box-shadow:0 0 0 2px var(--acc-soft); outline:none; }
button:disabled, input:disabled, select:disabled, textarea:disabled, .btn.off {
  opacity:.5; cursor:not-allowed; filter:none; transform:none; }
.bad { border-color:var(--bad) !important; animation:fbShake .3s ease; }
@keyframes fbShake { 25%{transform:translateX(-4px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-2px)} }
.fb-busy { pointer-events:none; opacity:.6; }
label:hover > input[type=checkbox]:not(:disabled),
label:hover input[type=checkbox]:not(:disabled),
.tsk:hover input[type=checkbox]:not(:disabled) { border-color:var(--acc); }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; appearance:textfield; }

/* ── МОБИЛКА ─────────────────────────────────────────────────────────── */
@media (max-width:920px) {
  body { padding-left:0 !important; padding-bottom:56px !important; --col:var(--wrap); --gut:var(--sp-3); }
  .wrap { padding:var(--sp-4) var(--gut) var(--sp-6); }
  .apptb { left:0; }

  .apptb-t { font-size:var(--fs-h2); }
  .apptb-burger { display:inline-flex; }
  .sb-rail-t { display:none; }
  .appmb { display:flex; }
  .appsb { transform:translateX(-100%); transition:transform .2s ease-in-out; }
  body.sb-open .appsb { transform:none; }
  body.sb-open .sb-scrim { display:block; }
}
@media (max-width:560px) { .apptb-t { display:none; } }
/* до 720px третий уровень выключается: вложенные блоки без фона и рамки */
@media (max-width:720px) {
  .card { padding:12px; }
  .card-media { margin:0 -12px; width:calc(100% + 24px); }
  .card-media:first-child { margin-top:-12px; }
  .card-media:last-child  { margin-bottom:-12px; }
  .card .card { background:transparent; border:0; padding:0; }
}

/* ── ПОЛОСЫ ПРОКРУТКИ ────────────────────────────────────────────────── */
@media (hover:hover) and (pointer:fine) {
  * { scrollbar-width:thin; scrollbar-color:#46521f var(--n850); }
  ::-webkit-scrollbar { width:14px; height:14px; }
  ::-webkit-scrollbar-track { background:var(--n850); border-radius:20px;
        border:4px solid transparent; background-clip:padding-box; }
  ::-webkit-scrollbar-thumb { background:#46521f; border-radius:20px;
        border:4px solid transparent; background-clip:padding-box;
        transition:background .15s ease-in-out; }
  ::-webkit-scrollbar-thumb:hover { background:var(--acc); }
  ::-webkit-scrollbar-thumb:active { background:var(--acc-hi); }
  ::-webkit-scrollbar-corner { background:transparent; }
  html { scrollbar-color:var(--n700) var(--n900); }
  html::-webkit-scrollbar-track { background:var(--n900); }
  html::-webkit-scrollbar-thumb { background:var(--n700); }
  html::-webkit-scrollbar-thumb:hover { background:var(--n600); }
  select { scrollbar-color:var(--n700) var(--n900); }
  select::-webkit-scrollbar { width:10px; }
  select::-webkit-scrollbar-track { background:var(--n900); border:0; border-radius:0; }
  select::-webkit-scrollbar-thumb { background:var(--n700); border:0; border-radius:5px; }
  select::-webkit-scrollbar-thumb:hover { background:var(--n600); }
}

/* ── ФУТЕР ───────────────────────────────────────────────────────────
   Целиком перенесён из footer.css (он остался только у лендинга, до фазы 3.1).
   Футер живёт внутри .wrap: отрицательные поля съедают её паддинги, поэтому
   полоса идёт во всю ширину, а колонки совпадают с колонками страницы. */
.site-footer{position:relative;overflow:hidden;margin-top:64px;
  background:linear-gradient(180deg,rgba(8,10,14,0),#080a0e 60%);border-top:1px solid #242c38;
  font-family:'Inter',system-ui,-apple-system,sans-serif;}
.site-footer *{box-sizing:border-box;}
.site-footer .sf-accent{position:absolute;top:-1px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(197,240,43,.55),transparent);}
.site-footer .sf-glow{position:absolute;bottom:-160px;left:50%;transform:translateX(-50%);
  width:720px;height:320px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(197,240,43,.045),transparent 70%);}
.site-footer .sf-inner{position:relative;max-width:1180px;margin:0 auto;padding:52px 24px 26px;}
.site-footer .sf-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;align-items:start;}

.site-footer .sf-logo{display:inline-flex;align-items:center;gap:12px;
  font-family:'Oswald',system-ui,sans-serif;font-weight:700;font-size:1.3rem;
  letter-spacing:.05em;text-transform:uppercase;color:#e8ecf2;text-decoration:none;}
.site-footer .sf-logo img{width:46px;height:46px;border-radius:50%;object-fit:cover;}
.site-footer .sf-tag{margin-top:16px;max-width:300px;color:#8b96a5;font-size:13.5px;line-height:1.6;}
.site-footer .sf-tag b{color:#c5f02b;font-weight:600;}
.site-footer .sf-social{display:flex;gap:10px;margin-top:20px;}
.site-footer .sf-social a{width:40px;height:40px;display:grid;place-items:center;
  border:1px solid #242c38;border-radius:10px;background:#0f141b;color:#98a1b3;
  text-decoration:none;transition:.15s;}
.site-footer .sf-social a:hover{color:#c5f02b;border-color:#c5f02b;}

.site-footer .sf-lbl{font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#e8ecf2;margin-bottom:16px;}
.site-footer .sf-col{display:flex;flex-direction:column;}
.site-footer .sf-col>a{display:inline-flex;align-items:center;gap:8px;min-height:34px;
  color:#aab3c2;text-decoration:none;font-size:14px;transition:.15s;}
.site-footer .sf-col>a:hover{color:#c5f02b;}
.site-footer .sf-col svg{flex:none;}
.site-footer a.sf-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;
  background:linear-gradient(135deg,#c5f02b,#dcff5a);color:#10130a;font-weight:700;font-size:14px;
  border-radius:10px;text-decoration:none;box-shadow:0 8px 22px -14px rgba(197,240,43,.45);}
.site-footer a.sf-cta:hover{color:#10130a;filter:brightness(1.05);}
.site-footer a.sf-cta svg{width:15px;height:15px;}

.site-footer .sf-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
  border-top:1px solid #1a212c;margin-top:38px;padding-top:20px;}
.site-footer .sf-bottom span{color:#5a6472;font-size:12px;}

@media (max-width:1100px){
  .site-footer{margin-top:48px;}
  .site-footer .sf-inner{padding:34px 18px 22px;}
  .site-footer .sf-grid{grid-template-columns:auto auto;justify-content:center;
    gap:24px 56px;}
  .site-footer .sf-brand{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;text-align:center;}
  .site-footer .sf-brand .sf-tag{margin-left:auto;margin-right:auto;}
  .site-footer .sf-contact{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;text-align:center;}
  .site-footer .sf-contact a.sf-cta{width:100%;max-width:300px;justify-content:center;}
  .site-footer .sf-col>a{min-height:30px;font-size:13px;white-space:nowrap;}
  .site-footer .sf-bottom{flex-direction:column;align-items:center;text-align:center;margin-top:24px;}
}

/* Футер почти везде лежит СНАРУЖИ .wrap, поэтому колонку он строит сам: те же
   потолок и боковые поля, что у .wrap и у содержимого топбара — края совпадают.
   Четыре страницы держат футер ВНУТРИ .wrap (форма подготовки, смотровые) — там
   отрицательные поля съедают её паддинги, иначе футер вышел бы уже на два поля.
   Страничных подгонок ширины футера больше нет — поэтому и !important не нужен. */
.site-footer { margin:var(--sp-7) 0 0; }
.wrap > .site-footer { margin-left:calc(-1 * var(--gut));
                       margin-right:calc(-1 * var(--gut));
                       margin-bottom:calc(-1 * var(--sp-7)); }
.site-footer .sf-inner { max-width:var(--col); margin:0 auto;
                         padding:52px var(--gut) 26px; }
@media (max-width:920px) {
  .site-footer { margin-top:var(--sp-6); }
  .wrap > .site-footer { margin-bottom:calc(-1 * var(--sp-6)); }
  .site-footer .sf-inner { padding:34px var(--gut) 22px; }
}

/* ── ФУТЕР АКАДЕМИИ ──────────────────────────────────────────────────
   Сайдбар отвечает на «куда пойти» — подвал его не дублирует. Здесь только
   то, чего в сайдбаре нет и быть не должно: юридические ссылки, контакт и
   атрибуция. Колонки-меню остались у корневых страниц, они на этом же css. */
/* Подвал прижат к низу экрана и ровно той же высоты, что нижний блок сайдбара:
   на коротких страницах их линии стоят на одном уровне. Держит это колонка, а не
   sticky: подвал лежит то снаружи `.wrap`, то внутри, и `top:100vh` вело себя в
   этих двух случаях по-разному. Колонка работает одинаково в обоих. */
body { display:flex; flex-direction:column; }
/* ⚠️ Колонка схлопывает ЛЮБОГО ребёнка с `margin:0 auto`: автополя по поперечной
   оси отменяют растягивание, и блок садится по ширине содержимого. Поэтому ширину
   детям колонки задаём явно — `max-width` по-прежнему держит колонку, а автополя
   по-прежнему центрируют. Правило общее: точечных заплаток тут не напасёшься. */
body > *, .wrap:has(> .site-footer) > * { width:100%; }
body > .appsb { width:var(--side-w); }
/* ⚠️ ТО ЖЕ ПРАВИЛО ДЛЯ ВТОРОЙ РАСКЛАДКИ. Подвал на части страниц лежит ВНУТРИ
   `.wrap` — тогда колонкой становится сама `.wrap`, и её дети получают
   `width:100%`. Сайдбар и топбар — дети именно её, и без этой строки сайдбар
   растягивался на весь экран, а страница выглядела развалившейся (так лежали
   «нарезка клипов» и «фильтр про-матчей»). Спасательная строка обязана быть
   парной к `body > …`: раскладки две, а правило было одно. */
.wrap:has(> .site-footer) > .appsb { width:var(--side-w); }
.wrap:has(> .site-footer) > .apptb { width:auto; }
.wrap:has(> .site-footer) { flex:1; display:flex; flex-direction:column; }
.site-footer.sf-slim { margin-top:var(--sp-6); background:none; border-top:1px solid var(--n700); }
/* Прижатие к низу ставим ПОСЛЕ `.sf-slim`: у него класс на классе, и обычный
   `body > .site-footer` проигрывал ему по весу — подвал не опускался никуда. */
body > .site-footer.sf-slim,
.wrap:has(> .site-footer) > .site-footer.sf-slim { margin-top:auto; }
/* ⚠️ Юридические страницы печатают подвал БЕЗ класса `sf-slim` и держат его
   внутри `.wrap wrap-legal`. Прижатие, написанное только под `sf-slim`, их не
   касалось: колонка растягивалась, подвал оставался под текстом, снизу дыра. */
body > .site-footer,
.wrap:has(> .site-footer) > .site-footer { margin-top:auto; }
.sf-slim .sf-inner { max-width:var(--col); margin:0 auto; padding:var(--sp-2) var(--gut);
                     min-height:var(--foot-h, 62px); display:flex; align-items:center; }
body { min-height:100vh; }
/* Вариант 1 (решение Тренера 08.08): две строки, обе прижаты влево. Раньше
   ссылки и атрибуция тянулись друг от друга через весь экран и «гуляли» тем
   сильнее, чем короче язык. */
.sf-slim .sf-line { flex:1; display:flex; flex-direction:column; align-items:flex-start;
                    gap:5px; }
/* Атрибуция — вторая строка, во всю ширину колонки: ширину ей не режем,
   иначе она ломается на три строки и подвал перестаёт стоять вровень
   с нижним блоком сайдбара. */
.sf-slim .sf-att { color:var(--n400); font-size:var(--fs-xs); line-height:1.6; }
.sf-slim .sf-links { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.sf-slim .sf-links a { color:var(--n300); text-decoration:none; font-size:var(--fs-s); }
.sf-slim .sf-links a:hover { color:var(--acc); }
.sf-slim .sf-tg { display:inline-flex; align-items:center; gap:6px; }
.sf-slim .sf-tg svg { width:14px; height:14px; flex:none; }
@media (max-width:720px) { .sf-slim .sf-links { gap:var(--sp-3); } }

/* ── ОНБОРДИНГ ───────────────────────────────────────────────────────
   Подсветка поверх живого интерфейса: дыра в затемнении показывает сам
   элемент, а не его картинку — человек сразу видит, куда смотреть. */
.onb { position:fixed; inset:0; z-index:900; }
.onb[hidden] { display:none; }
.onb-hole { position:absolute; border-radius:var(--r-md); pointer-events:none;
            box-shadow:0 0 0 9999px rgba(0,0,0,.72), 0 0 0 2px var(--acc);
            transition:all .18s ease-in-out; }
.onb-tip { position:absolute; width:min(320px, calc(100vw - 16px)); padding:var(--sp-4);
           background:var(--n750); border:1px solid var(--n600); border-radius:var(--r-lg);
           box-shadow:var(--el2); }
.onb-n { font:700 var(--fs-xs)/1 var(--f-num); color:var(--acc); margin-bottom:var(--sp-2); }
.onb-t { font-size:var(--fs-s); color:var(--n100); line-height:1.5; }
.onb-a { display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-4); }

/* публичные страницы (лендинг, оферта, тарифы) — топбар без сайдбара */
body:not(:has(.appsb)) { padding-left:0 !important; padding-bottom:0 !important; --col:var(--wrap); }
body:not(:has(.appsb)) .apptb { left:0; }


/* ОБЩИЕ КУСКИ ИНТЕРФЕЙСА: модалка, оплата, колокол, карта.
   Скоупа нет намеренно — их подключают разные страницы. */


/* ==================== map_inc.php ==================== */

  .csmap { position:relative; width:100%; max-width:900px; }
  /* холст квадратный и тянется по ширине колонки: считать его от высоты
     окна было ошибкой ещё в смотровой — на широком мониторе карта оставалась
     маленькой, а место рядом пропадало впустую */
  .csmap-cv { width:100%; height:auto; aspect-ratio:1; display:block;
              border-radius:14px; background:#05070a; touch-action:none; cursor:default; }
  .csmap-cv.zoomable { cursor:zoom-in; }
  /* оверлей загрузки ПО ЦЕНТРУ холста: строка под картой уезжает за край
     экрана, и клик выглядит мёртвым (грабли смотровой, 05.08) */
  .csmap-load { position:absolute; inset:0; z-index:5; display:flex;
                align-items:center; justify-content:center; pointer-events:none;
                background:rgba(10,13,18,.5); border-radius:14px;
                color:#e9eef7; font:600 15px 'Inter',sans-serif; }
  /* своё display:flex перебивает браузерное hidden — иначе оверлей
     не прячется (грабли смотровой, 05.08) */
  .csmap-load[hidden] { display:none; }
  .csmap-spin { width:15px; height:15px; border:2px solid #2a3342; border-top-color:#c5f02b;
                border-radius:50%; animation:csmapsp .8s linear infinite;
                display:inline-block; vertical-align:-3px; margin-right:9px; }
  @keyframes csmapsp { to { transform:rotate(360deg); } }
  .csmap-note { margin:8px 0 0; font:13px/1.5 'Inter',sans-serif; color:#93a0b4; }
  .csmap-note[hidden] { display:none; }
  .csmap-time { display:flex; align-items:center; gap:10px; margin:8px 0 0; }
  .csmap-time[hidden] { display:none; }
  .csmap-rng { flex:0 0 auto; font:600 13px 'Inter',sans-serif; color:#e9eef7;
               min-width:96px; text-align:center; }
  .csmap-sl { flex:1 1 auto; width:100%; }


/* ==================== coaching.php — кабинет тренера (фаза 2.5) ====================
   Строка ученика — колонки, а не свободная карточка: глаз идёт вниз по одной
   вертикали. Причина, по которой человек попал в список, написана словами над
   группой, а цветная точка слева повторяет её одним взглядом. */
:where(body.p-coaching) .cg-n { font-family:var(--f-num); font-weight:700; }
:where(body.p-coaching) .cg-lbl { font:600 var(--fs-xs)/1.2 var(--f-body); letter-spacing:.08em;
                                  text-transform:uppercase; color:var(--n400); margin-bottom:var(--sp-2); }
:where(body.p-coaching) .cg-k { font-size:var(--fs-xs); color:var(--n400); }
:where(body.p-coaching) .cg-empty { font-size:var(--fs-s); color:var(--n400); }
:where(body.p-coaching) .cg-mut { color:var(--n400); }

/* кнопка: лаймовая ровно одна на экран — «Открыть подготовку» */
:where(body.p-coaching) .cg-b { display:inline-flex; align-items:center; justify-content:center; gap:6px;
    height:32px; padding:0 13px; border-radius:var(--r-md); border:1px solid var(--n600);
    background:transparent; color:var(--n100); font:600 var(--fs-s)/1 var(--f-body);
    text-decoration:none; cursor:pointer; white-space:nowrap; }
:where(body.p-coaching) .cg-b:hover { border-color:var(--n500); background:var(--n750); }
:where(body.p-coaching) .cg-b-a { background:var(--acc); border-color:var(--acc); color:var(--on-acc); }
:where(body.p-coaching) .cg-b-a:hover { background:var(--acc-hi); border-color:var(--acc-hi); color:var(--on-acc); }
:where(body.p-coaching) .cg-b-s { height:28px; padding:0 10px; font-size:var(--fs-xs); }

/* ── ближайшее занятие ── */
/* Акцент на карточке один — кнопка. Заливка и рамка лаймом делали её криком:
   лайм у нас ещё значит «действие», и трёх лаймов подряд глаз не разбирает. */
:where(body.p-coaching) .card.cg-now { display:grid; grid-template-columns:minmax(280px,1fr) minmax(320px,1.2fr) auto;
    gap:var(--sp-5); align-items:start; background:var(--n800);
    border-color:var(--n700); border-left:3px solid var(--acc); }
:where(body.p-coaching) .cg-now .cg-nm { display:block; font-family:var(--f-disp); font-size:var(--fs-h2);
    font-weight:600; color:var(--n0); text-decoration:none; }
:where(body.p-coaching) .cg-now .cg-nm i { color:var(--n400); font-weight:400; font-style:normal; }
:where(body.p-coaching) .cg-sub { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
    margin-top:6px; font-size:var(--fs-xs); color:var(--n300); }
:where(body.p-coaching) .cg-when { margin-top:var(--sp-4); font-family:var(--f-num); font-weight:700;
    font-size:26px; color:var(--n0); line-height:1; }
:where(body.p-coaching) .cg-now-prep { border-left:1px solid var(--n700); padding-left:var(--sp-5); }
:where(body.p-coaching) .cg-now-act { display:flex; flex-direction:column; gap:var(--sp-2); min-width:200px; }
:where(body.p-coaching) .cg-now-act .cg-b { height:36px; }

/* матч и его вопросы — один блок: вопрос всегда про конкретную игру */
:where(body.p-coaching) .cg-mgrp { padding-top:var(--sp-2); margin-top:var(--sp-2); border-top:1px solid var(--n700); }
:where(body.p-coaching) .cg-mgrp:first-of-type { border-top:0; margin-top:0; padding-top:0; }
:where(body.p-coaching) .cg-mid { font-family:var(--f-num); font-weight:600; }
:where(body.p-coaching) .cg-nomid { font-size:var(--fs-xs); color:var(--n400); }
:where(body.p-coaching) .cg-qs { margin:5px 0 0; padding:0 0 0 var(--sp-2); list-style:none;
    display:flex; flex-direction:column; gap:4px; }
:where(body.p-coaching) .cg-qs li { position:relative; padding-left:14px; font-size:var(--fs-s); color:var(--n200); }
:where(body.p-coaching) .cg-qs li::before { content:'›'; position:absolute; left:0; color:var(--n500); }

/* ── две колонки, вкладки, фильтр ── */
:where(body.p-coaching) .cg-cols { display:grid; grid-template-columns:1fr 320px; gap:var(--sp-5);
    align-items:start; margin-top:var(--sp-4); }
:where(body.p-coaching) .cg-side { display:flex; flex-direction:column; gap:var(--sp-4); }
:where(body.p-coaching) .cg-tabs { display:flex; align-items:center; gap:var(--sp-1);
    border-bottom:1px solid var(--n700); margin-bottom:var(--sp-4); }
:where(body.p-coaching) .cg-tab { height:38px; padding:0 14px; background:transparent; border:0;
    border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--n300);
    font:500 var(--fs-b)/1 var(--f-body); cursor:pointer; }
:where(body.p-coaching) .cg-tab.on { color:var(--n0); font-weight:600; border-bottom-color:var(--n100); }
:where(body.p-coaching) .cg-tab .c { font-family:var(--f-num); font-weight:700; color:var(--n400); margin-left:6px; }
:where(body.p-coaching) .cg-tab.on .c { color:var(--n0); }
:where(body.p-coaching) .cg-add-t { margin-left:auto; margin-bottom:6px; }
:where(body.p-coaching) .cg-filt { display:flex; gap:var(--sp-2); align-items:center;
    flex-wrap:wrap; margin-bottom:var(--sp-4); }
:where(body.p-coaching) .cg-filt input[type=text] { height:32px; flex:1; min-width:220px; max-width:380px;
    background:var(--n850); border:1px solid var(--n700); border-radius:var(--r-md);
    color:var(--n100); padding:0 12px; font:400 var(--fs-s) var(--f-body); }

/* ── группа ── */
:where(body.p-coaching) .cg-grp { margin-bottom:var(--sp-7); }
:where(body.p-coaching) .cg-grp-h { display:flex; align-items:center; gap:var(--sp-2);
    padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--n850);
    border-left:3px solid var(--tone,var(--n600)); margin-bottom:var(--sp-2); }
:where(body.p-coaching) .cg-grp-t { font:600 var(--fs-s)/1 var(--f-body); color:var(--n100); }
:where(body.p-coaching) .cg-grp-w { font-size:var(--fs-xs); color:var(--n400); }
:where(body.p-coaching) .cg-grp-c { margin-left:auto; font-family:var(--f-num); font-weight:700;
    font-size:var(--fs-s); color:var(--tone,var(--n300)); }

/* ── таблица-список ── */
/* Колонки ФИКСИРОВАННЫЕ, кроме имени: у каждой группы своя сетка, и от `auto`
   («Напомнить» против «Напомнить об отзыве») линии между группами разъезжались. */
:where(body.p-coaching) .cg-head,
:where(body.p-coaching) .cg-row { display:grid; gap:var(--sp-4); align-items:center;
    grid-template-columns:3px minmax(200px,1fr) 190px 96px 210px 200px 24px; }
:where(body.p-coaching) .cg-head { padding:0 var(--sp-3) 6px; }
:where(body.p-coaching) .cg-head span { font:600 var(--fs-xs)/1 var(--f-body); letter-spacing:.08em;
    text-transform:uppercase; color:var(--n300); }
:where(body.p-coaching) .cg-rows { display:flex; flex-direction:column; gap:1px;
    background:var(--n700); border:1px solid var(--n700); border-radius:var(--r-lg); overflow:hidden; }
:where(body.p-coaching) .cg-item { background:var(--n800); }
:where(body.p-coaching) .cg-item[open] { background:var(--n750); }
:where(body.p-coaching) .cg-item[open] .cg-row > *::before { bottom:0; }
:where(body.p-coaching) .cg-row { padding:10px var(--sp-3); cursor:pointer; list-style:none; }
:where(body.p-coaching) .cg-row::-webkit-details-marker { display:none; }
:where(body.p-coaching) .cg-item:hover .cg-row { background:var(--n750); }
/* Разделители между ячейками (вариант А, выбран Тренером 08.08). Линия идёт
   ровно по середине зазора и на всю высоту строки вместе с её паддингами —
   поэтому в группе получается сплошная вертикаль, а не пунктир из чёрточек.
   Считаем по порядку ячеек: 1 точка · 2 ученик · 3 MMR · 4 занятия ·
   5 что дальше · 6 действие · 7 шеврон. Перед шевроном линии нет: он
   относится к действию, а не отдельная колонка. */
:where(body.p-coaching) .cg-row > *,
:where(body.p-coaching) .cg-head span { position:relative; }
:where(body.p-coaching) .cg-row > *:nth-child(3)::before,
:where(body.p-coaching) .cg-row > *:nth-child(4)::before,
:where(body.p-coaching) .cg-row > *:nth-child(5)::before,
:where(body.p-coaching) .cg-row > *:nth-child(6)::before {
    content:''; position:absolute; left:calc(-1 * var(--sp-4) / 2);
    top:-10px; bottom:-10px; width:1px; background:var(--n700); }
:where(body.p-coaching) .cg-head span:nth-child(3)::before,
:where(body.p-coaching) .cg-head span:nth-child(4)::before,
:where(body.p-coaching) .cg-head span:nth-child(5)::before,
:where(body.p-coaching) .cg-head span:nth-child(6)::before {
    content:''; position:absolute; left:calc(-1 * var(--sp-4) / 2);
    top:-2px; bottom:-6px; width:1px; background:var(--n700); }
:where(body.p-coaching) .cg-dot { width:7px; height:7px; border-radius:50%; background:var(--n500); }
:where(body.p-coaching) .cg-dot.ok { background:var(--ok); }
:where(body.p-coaching) .cg-dot.warn { background:var(--warn); }
:where(body.p-coaching) .cg-dot.bad { background:var(--bad); }
:where(body.p-coaching) .cg-who { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
:where(body.p-coaching) .cg-ava { width:32px; height:32px; flex:none; border-radius:50%;
    display:grid; place-items:center; background:var(--n700); border:1px solid var(--n600);
    color:var(--n200); font:700 12px var(--f-num); }
:where(body.p-coaching) .cg-who .cg-nm { display:block; font-weight:600; color:var(--n0);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(body.p-coaching) .cg-who .cg-nm i { color:var(--n400); font-weight:400; font-style:normal; }
:where(body.p-coaching) .cg-rl { display:flex; align-items:center; gap:5px; margin-top:3px; }
/* Иконка позиции и подпись — по одной средней линии: раньше значок плавал. */
:where(body.p-coaching) .cg-rl .pill { display:inline-flex; align-items:center; gap:5px; line-height:1; }
:where(body.p-coaching) .cg-pmore { flex:none; padding:1px 6px; border-radius:var(--r-pill);
    border:1px solid var(--n700); color:var(--n400); font-size:var(--fs-xs); cursor:help; }
:where(body.p-coaching) .cg-rl .pill img,
:where(body.p-coaching) .cg-rl .pill svg { display:block; flex:none; }
:where(body.p-coaching) .cg-mmr-v { display:flex; align-items:baseline; gap:6px; margin-bottom:5px; }
:where(body.p-coaching) .cg-mmr-v b { font-size:var(--fs-b); color:var(--n100); }
:where(body.p-coaching) .cg-mmr-v span { font-size:var(--fs-xs); color:var(--n400); }
:where(body.p-coaching) .cg-mmr-v em { font-style:normal; font-family:var(--f-num); font-weight:700;
    font-size:var(--fs-xs); color:var(--ok); }
:where(body.p-coaching) .cg-mmr-v em.dn { color:var(--bad); }
:where(body.p-coaching) .cg-bar { display:block; height:4px; border-radius:var(--r-pill);
    background:var(--n700); overflow:hidden; }
:where(body.p-coaching) .cg-bar i { display:block; height:100%; border-radius:var(--r-pill); background:var(--n500); }
:where(body.p-coaching) .cg-bar i.g { background:var(--ok); }
:where(body.p-coaching) .cg-bar i.r { background:var(--bad); }
:where(body.p-coaching) .cg-les { text-align:center; }
:where(body.p-coaching) .cg-head span:nth-child(4) { text-align:center; }
:where(body.p-coaching) .cg-les-v span { font-size:var(--fs-s); font-weight:400; color:var(--n400); }
:where(body.p-coaching) .cg-les-v { display:block; font-size:var(--fs-h2); color:var(--n0); line-height:1; }
:where(body.p-coaching) .cg-les .cg-k { display:block; margin-top:3px; }
:where(body.p-coaching) .cg-nxt .cg-v { display:block; font-size:var(--fs-s); color:var(--n100); }
:where(body.p-coaching) .cg-nxt .cg-k { display:block; margin-top:2px; }
:where(body.p-coaching) .cg-nxt.warn .cg-v { color:var(--warn); font-weight:600; }
:where(body.p-coaching) .cg-nxt.bad .cg-v { color:var(--bad); font-weight:600; }
:where(body.p-coaching) .cg-act { display:flex; justify-content:flex-end; }
:where(body.p-coaching) .cg-more { display:flex; justify-content:flex-end; color:var(--n500); }
:where(body.p-coaching) .cg-more svg { width:16px; height:16px; transition:transform .15s ease; }
:where(body.p-coaching) .cg-item:hover .cg-more { color:var(--n100); }
:where(body.p-coaching) .cg-item[open] .cg-more { color:var(--n100); }
:where(body.p-coaching) .cg-item[open] .cg-more svg { transform:rotate(90deg); }

/* ── раскрытая строка ── */
/* Внутри раскрытой строки — линии, а не рамки: у каждого блока своё место и
   свой заголовок, как в карточке героя. */
:where(body.p-coaching) .cg-det { display:grid; grid-template-columns:1.3fr 1fr 210px; gap:0;
    padding:var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-5); border-top:1px solid var(--n700); }
:where(body.p-coaching) .cg-det > div { padding:0 var(--sp-5); }
:where(body.p-coaching) .cg-det > div:first-child { padding-left:0; }
:where(body.p-coaching) .cg-det > div + div { border-left:1px solid var(--n700); }
:where(body.p-coaching) .cg-det > div:last-child { padding-right:0; }
:where(body.p-coaching) .cg-kv { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
:where(body.p-coaching) .cg-note { margin-top:var(--sp-3); }
:where(body.p-coaching) .cg-note textarea[name=note] { width:100%; min-height:64px; overflow:hidden; background:var(--n850);
    border:1px solid var(--n700); border-radius:var(--r-md); color:var(--n100);
    padding:8px 10px; font:400 var(--fs-s)/1.5 var(--f-body); resize:vertical; }
:where(body.p-coaching) .cg-note .cg-b { margin-top:var(--sp-2); }
:where(body.p-coaching) .cg-det-act { display:flex; flex-direction:column; gap:var(--sp-2); }
:where(body.p-coaching) .cg-icons { display:flex; gap:var(--sp-2); }
:where(body.p-coaching) .cg-b-i { width:34px; padding:0; }
:where(body.p-coaching) .cg-b-i svg { width:15px; height:15px; }
/* Удаление уводим вниз и делаем текстом: рядом с рабочими кнопками ему не место. */
:where(body.p-coaching) .cg-rm { margin-top:auto; padding-top:var(--sp-4); }
:where(body.p-coaching) .cg-rm-b { background:none; border:0; padding:0; cursor:pointer;
    color:var(--n400); font:400 var(--fs-xs) var(--f-body); text-decoration:underline; }
:where(body.p-coaching) .cg-rm-b:hover { color:var(--bad); }
:where(body.p-coaching) .cg-used label { display:flex; align-items:center; gap:6px;
    font-size:var(--fs-xs); color:var(--n400); }
:where(body.p-coaching) .cg-used input[type=text] { width:44px; background:var(--n850); border:1px solid var(--n700);
    border-radius:var(--r-sm); color:var(--n100); font:700 var(--fs-s) var(--f-num);
    text-align:center; padding:3px; }
:where(body.p-coaching) .cg-auto label { display:flex; align-items:center; gap:var(--sp-3); cursor:pointer; }
:where(body.p-coaching) .cg-auto b { display:block; font-size:var(--fs-s); color:var(--n100); }
:where(body.p-coaching) .cg-auto i { display:block; font-style:normal; font-size:var(--fs-xs); color:var(--n400); margin-top:2px; }

/* вкладка решает, какой список на экране */
:where(body.p-coaching) #cgWrap .cg-all { display:none; }
:where(body.p-coaching) #cgWrap.all .cg-grp { display:none; }
:where(body.p-coaching) #cgWrap.all .cg-all { display:block; }
/* во «всех» колонки «что дальше» нет — там нечего писать */
:where(body.p-coaching) #cgWrap.all .cg-head,
:where(body.p-coaching) #cgWrap.all .cg-row { grid-template-columns:3px minmax(200px,1fr) 190px 96px 200px 24px; }
:where(body.p-coaching) #cgWrap.all .cg-nxt,
:where(body.p-coaching) #cgWrap.all .cg-head span:nth-child(5),
:where(body.p-coaching) #cgWrap.all .cg-att-empty { display:none; }

@media (max-width:1300px) {
  :where(body.p-coaching) .cg-cols { grid-template-columns:1fr; }
  :where(body.p-coaching) .cg-now { grid-template-columns:1fr; }
  :where(body.p-coaching) .cg-now-prep { border-left:0; padding-left:0;
      border-top:1px solid var(--n700); padding-top:var(--sp-3); }
  :where(body.p-coaching) .cg-det { grid-template-columns:1fr; }
  :where(body.p-coaching) .cg-det > div { padding:var(--sp-3) 0 0; }
  :where(body.p-coaching) .cg-det > div:first-child { padding-top:0; }
  :where(body.p-coaching) .cg-det > div + div { border-left:0; border-top:1px solid var(--n700); }
  :where(body.p-coaching) .cg-head { display:none; }
  :where(body.p-coaching) .cg-row,
  :where(body.p-coaching) #cgWrap.all .cg-row { grid-template-columns:3px 1fr auto auto auto; }
  :where(body.p-coaching) .cg-mmr, :where(body.p-coaching) .cg-nxt,
  :where(body.p-coaching) #cgWrap.all .cg-mmr { display:none; }
  :where(body.p-coaching) .cg-row > *::before,
  :where(body.p-coaching) .cg-head span::before { content:none; }
}

/* ==================== pay_inc.php ==================== */

  .pay-ic{flex:0 0 auto}
  .pay-req{margin-top:10px; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
           background:rgba(255,255,255,.02)}
  .pay-req-h{font-size:13px; font-weight:700; color:var(--text); margin-bottom:8px; display:flex; align-items:center; gap:6px}
  .pay-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:7px 0}
  .pay-cap{font-size:12.5px; color:var(--muted); min-width:150px}
  .pay-val{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13.5px;
           color:var(--text); background:rgba(0,0,0,.25); padding:4px 9px; border-radius:7px;
           user-select:all; word-break:break-all}
  .pay-price{font-size:13px; font-weight:700; color:var(--text)}
  .pay-copy{font-size:12px; color:var(--muted); background:transparent; border:1px solid var(--line);
            border-radius:7px; padding:4px 10px; cursor:pointer; transition:.15s ease-in-out}
  .pay-copy:hover{border-color:#3d4a5e; color:var(--text)}
  .pay-copy:active{transform:scale(.96)}
  .pay-copy.ok{border-color:#37c46d; color:#37c46d}
  /* (Вова 23.07) «Оплатить» — НЕ бренд-лаймом (слишком много зелени); нейтральная обводка, чтобы читалось как «внешняя ссылка», а бренд остаётся у «Сохранить». */
  .pay-link{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
            color:var(--text); background:var(--panel2,#1b222c); border:1px solid var(--line);
            border-radius:8px; padding:6px 13px; text-decoration:none; transition:.15s ease-in-out}
  .pay-link:hover{border-color:#3d4a5e; background:rgba(255,255,255,.05)}
  .pay-link:active{transform:scale(.97)}
  .pay-link .ext-ic{opacity:.7}
  .pay-note{font-size:12px; color:var(--muted); line-height:1.5; margin:6px 0}
  /* внешняя иконка у обычных ссылок «в новом окне» */
  .ext-ic{flex:0 0 auto; vertical-align:-2px; opacity:.75}
  /* свёрнутая строка «Оплата: … ✎» — маленькая, не отвлекает */
  .pay-fold{margin-top:10px}
  .pay-fold>summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
       font-size:13px; color:var(--muted); padding:6px 12px; border:1px solid var(--line);
       border-radius:20px; user-select:none; transition:.15s ease-in-out}
  .pay-fold>summary::-webkit-details-marker{display:none}
  .pay-fold>summary:hover{border-color:#3d4a5e; color:var(--text)}
  .pay-fold[open]>summary{color:var(--text); border-color:#3d4a5e}
  .pay-fold .pay-pen{opacity:.7}
  .pay-fold-body{margin-top:10px}
  /* кнопки-радио выбора способа (общие для профиля и ЛК ученика) */
  .paysel{display:flex; gap:9px; flex-wrap:wrap; margin:2px 0 4px}
  .paysel label{flex:1 1 130px; display:flex; align-items:center; justify-content:center; gap:7px;
       border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer;
       color:var(--muted); font-weight:600; font-size:14px; letter-spacing:.2px; position:relative;
       background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
       transition:all .16s ease-in-out}
  .paysel label:hover{border-color:#3d4a5e; color:var(--text); transform:translateY(-1px)}
  .paysel label:active{transform:translateY(0) scale(.99)}
  .paysel input{position:absolute; opacity:0; width:0; height:0}
  .paysel label:has(input:checked){border-color:var(--brand,#c5f02b); color:var(--brand,#c5f02b);
       background:rgba(197,240,43,.1); box-shadow:inset 0 0 0 1px var(--brand,#c5f02b)}
  .paysel label:has(input:checked)::after{content:'✓'; position:absolute; top:5px; right:9px;
       font-size:11px; color:var(--brand,#c5f02b); font-weight:700}
  /* карточки выбора формата коучинга (coach_package_cards_html). Префикс cpk- : на «ad» начинать нельзя, адблок вырежет блок целиком. Выбранную карточку помечает СЕРВЕР классом .on (по $cur), на клиенте её перевешивает cpPick(this) из coaching.php — :has() тут не используем, он поддержан не везде, а выбор формата — шаг перед оплатой, ломаться нельзя. */
  .cpk-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:11px; margin:4px 0 2px}
  .cpk{position:relative; display:block; border:1px solid var(--line); border-radius:12px;
       padding:13px 14px; cursor:pointer; user-select:none;
       background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
       transition:all .16s ease-in-out}
  .cpk:hover{border-color:#3d4a5e; transform:translateY(-1px)}
  .cpk:active{transform:translateY(0) scale(.99)}
  .cpk input{position:absolute; opacity:0; width:0; height:0}
  .cpk-t{display:block; font-size:13.5px; font-weight:700; color:var(--text); padding-right:16px}
  .cpk-p{display:block; font-family:'Oswald',sans-serif; font-size:20px; color:var(--text); margin:5px 0 3px}
  .cpk-n{display:block; font-size:12px; color:var(--muted); line-height:1.45}
  .cpk.on{border-color:var(--brand,#c5f02b); background:rgba(197,240,43,.09);
       box-shadow:inset 0 0 0 1px var(--brand,#c5f02b)}
  .cpk.on .cpk-p{color:var(--brand,#c5f02b)}
  .cpk.on::after{content:'✓'; position:absolute; top:7px; right:10px; font-size:12px;
       color:var(--brand,#c5f02b); font-weight:700}
  /* клавиатура: обводка видна и до выбора */
  .cpk input:focus-visible+.cpk-t{outline:2px solid var(--brand,#c5f02b); outline-offset:3px; border-radius:4px}


/* ==================== notif_bell_inc.php ==================== */

  /* стили колокола: дубль на страницу исключён — файл включается один раз */
  .nbwrap { position:relative; flex:none; }
  .nbnum { position:absolute; top:-6px; right:-6px; background:var(--err, #e6482e); color:#fff;
           font-size:9px; font-weight:700; border-radius:9px; padding:2px 5px; line-height:1.2; }
  .nbdrop { display:none; position:absolute; top:46px; right:0; width:330px; max-width:calc(100vw - 28px);
            background:var(--card, #12161d); border:1px solid var(--line, #242c38); border-radius:12px;
            z-index:400; box-shadow:0 18px 50px -12px rgba(0,0,0,.6); overflow:hidden; }
  .nbwrap.open .nbdrop { display:block; }
  .nbhead { padding:10px 14px; font:600 12px 'Oswald',sans-serif; text-transform:uppercase;
            letter-spacing:.5px; color:var(--mut, #8b96a5); border-bottom:1px solid var(--line, #242c38);
            display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .nbclr { background:transparent; border:0; color:var(--mut, #8b96a5); font-size:11px; cursor:pointer;
           text-decoration:underline; padding:0; }
  .nbclr:hover { color:var(--txt, #e6ebf2); }
  .nblist { max-height:340px; overflow-y:auto; }
  .nbitem { display:block; padding:11px 14px; border-bottom:1px solid var(--line, #242c38);
            text-decoration:none; cursor:pointer; }
  .nbitem:hover { background:rgba(197,240,43,.05); }
  .nbitem.nbnew { box-shadow:inset 3px 0 0 var(--brand, #c5f02b); background:rgba(197,240,43,.04); }
  .nbtit { font-size:13px; font-weight:600; color:var(--txt, #e6ebf2); line-height:1.35; }
  .nbtxt { font-size:12.5px; color:var(--mut, #8b96a5); margin-top:3px; line-height:1.45; }
  .nbdate { font-size:11px; color:var(--mut, #8b96a5); opacity:.7; margin-top:4px; }
  .nbempty { padding:18px 14px; font-size:13px; color:var(--mut, #8b96a5); text-align:center; }
  .nbfoot { padding:8px 14px; font-size:11.5px; color:var(--mut, #8b96a5);
            border-top:1px solid var(--line, #242c38); opacity:.75; }
  /* галочка «присылать новые ролики под мои запросы» (25.07, авторассылка) */
  .nbpref { display:flex; gap:8px; align-items:center; padding:10px 14px; cursor:pointer;
            border-top:1px solid var(--line, #242c38); font-size:12px; color:var(--mut, #8b96a5);
            user-select:none; line-height:1.35; }
  .nbpref:hover { color:var(--txt, #e6ebf2); }
  .nbpref input { accent-color:var(--brand, #c5f02b); width:15px; height:15px; flex:none; cursor:pointer; }


/* СТРАНИЧНОЕ (фаза 1.4). Правила каждой страницы живут под своим классом
   на <body>: :where() не добавляет веса, поэтому внутри страницы всё
   разрешается ровно как раньше, а между страницами имена не сталкиваются.
   Свести дубли в компоненты — фаза 3.4. */


/* ==================== heroes.php ==================== */
html:has(body.p-heroes) { overflow-x:clip; }

  body:where(.p-heroes) {
    --brand:#c5f02b; --bg:#0e1116; --panel:#161b22; --panel2:#1b222c;
    --text:#e6edf3; --muted:#8b96a5; --line:#242c38; --err:#e6482e; --ok:#7ec66a;
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:#10130a; --brand2:#d9ff56; --gold:#f0c92b; --enred:#d9695f;
  }
  :where(body.p-heroes) * {box-sizing:border-box}
  :where(body.p-heroes) [hidden] {display:none !important;}
  body:where(.p-heroes) {margin:0; background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif;}body:where(.p-heroes) { overflow-x:clip; }
  :where(body.p-heroes) a {color:var(--brand); text-decoration:none}
  :where(body.p-heroes) h1, :where(body.p-heroes) h2 {font-family:'Oswald',sans-serif; margin:0}

  /* ---- вкладка «Герои»: классы hg* (не «ad»!), ширина = .wrap ---- */
  :where(body.p-heroes) .hgwrap {max-width:none;}
  :where(body.p-heroes) .hgbox {border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:16px 18px; margin-bottom:14px;}
  :where(body.p-heroes) .hgsec {font:600 13px 'Inter',sans-serif; color:var(--mut); text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px;}
  :where(body.p-heroes) .hgmeta {font-size:12.5px; color:var(--mut);}
  :where(body.p-heroes) .hghead {display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; margin:18px 0 14px;}
  :where(body.p-heroes) .hghead h1 {font-size:28px; line-height:1.1;}

  :where(body.p-heroes) .hgghost {padding:7px 14px; border:1px solid var(--line); border-radius:8px; background:none; color:var(--text);
        font:600 13px 'Inter',sans-serif; cursor:pointer; transition:all .15s ease-in-out;}
  :where(body.p-heroes) .hgghost:hover {border-color:var(--brand); color:var(--brand);}
  :where(body.p-heroes) .hgghost:active {transform:scale(.96);}
  :where(body.p-heroes) .hgghost:focus-visible {outline:2px solid var(--brand); outline-offset:2px;}
  :where(body.p-heroes) .hgwr {font:600 14px 'Oswald',sans-serif; color:var(--text); flex:0 0 auto; width:56px; text-align:right;}
  :where(body.p-heroes) .hgwr.good {color:var(--ok);}
  :where(body.p-heroes) .hgwr.low {color:var(--mut);}

  /* фильтры сетки */
  :where(body.p-heroes) .hgfilters {display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
  :where(body.p-heroes) .hgfg {display:flex; gap:4px; flex-wrap:wrap; align-items:center;}
  :where(body.p-heroes) .hgfc {border:1px solid var(--line); background:none; color:var(--mut); border-radius:8px;
        padding:4px 10px; font:600 12px 'Inter',sans-serif; cursor:pointer; transition:all .15s ease-in-out;}
  :where(body.p-heroes) .hgfc:hover {color:var(--text);}
  :where(body.p-heroes) .hgfc:active {transform:scale(.96);}
  :where(body.p-heroes) .hgfc.on {color:var(--text); border-color:#3d4757; background:var(--panel2);}
  :where(body.p-heroes) input.hgq {background:var(--panel2); border:1px solid var(--line); border-radius:8px; color:var(--text);
        padding:7px 12px; font:600 13px 'Inter',sans-serif; width:230px; max-width:100%;
        transition:border-color .15s ease-in-out;}
  :where(body.p-heroes) input.hgq::placeholder {color:#5b6674; font-weight:400;}
  :where(body.p-heroes) input.hgq:focus {outline:none; border-color:var(--brand);}
  /* (доп3) кастомный дропдаун позиций: иконки видны и в раскрытом списке */
  :where(body.p-heroes) .psel {position:relative; display:inline-block; flex:0 0 auto;}
  :where(body.p-heroes) .psel-b {display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line);
        border-radius:8px; color:var(--text); padding:7px 10px; font:600 13px 'Inter',sans-serif; cursor:pointer;
        transition:border-color .15s ease-in-out; white-space:nowrap;}
  :where(body.p-heroes) .psel-b:hover {border-color:#3d4757;}
  :where(body.p-heroes) .psel-b:active {transform:scale(.97);}
  :where(body.p-heroes) .psel-b:focus-visible {outline:2px solid var(--brand); outline-offset:2px;}
  :where(body.p-heroes) .psel-ar {color:var(--mut); font-size:10px; margin-left:2px;}
  :where(body.p-heroes) .psel-l {position:absolute; top:calc(100% + 4px); left:0; z-index:60; background:#12161d; border:1px solid #333d4c;
        border-radius:10px; padding:4px; min-width:100%; width:max-content; display:flex; flex-direction:column;
        box-shadow:0 10px 26px rgba(0,0,0,.45);}
  :where(body.p-heroes) .psel-l button {display:flex; align-items:center; gap:7px; background:none; border:0; color:var(--mut);
        border-radius:7px; padding:7px 12px; font:600 12.5px 'Inter',sans-serif; cursor:pointer; text-align:left; white-space:nowrap;}
  :where(body.p-heroes) .psel-l button:hover {color:var(--text); background:rgba(255,255,255,.06);}
  :where(body.p-heroes) .psel-l .rico {margin-right:0;}
  :where(body.p-heroes) .rico {width:14px; height:14px; vertical-align:-2px; margin-right:0; display:inline-block; opacity:.9; object-fit:contain;}
  :where(body.p-heroes) .hgfc .rico {margin-right:5px;}

  :where(body.p-heroes) .hgmu-mid {display:flex; gap:6px; align-items:center; margin-left:auto;}
  :where(body.p-heroes) .hgmu-mid input {width:150px; background:var(--panel2); border:1px solid var(--line); border-radius:8px;
        color:var(--text); padding:6px 10px; font:500 12.5px 'Inter',sans-serif; outline:none;}
  :where(body.p-heroes) .hgmu-mid input:focus {border-color:var(--brand);}

  /* сетка карточек героев */
  /* (06.08, Вова) карточка шире: 272 → 320. При 272 кольцо винрейта
     упиралось в текст карточки, и цифру внутри пришлось бы держать мелкой. */
  :where(body.p-heroes) .hggrid {display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:8px;}
  :where(body.p-heroes) a.hgc {display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:10px;
        background:var(--panel); padding:8px 10px; color:var(--text); min-width:0;
        transition:border-color .15s ease-in-out, background .15s ease-in-out;}
  :where(body.p-heroes) a.hgc:hover {border-color:#3d4757; background:var(--panel2);}
  :where(body.p-heroes) a.hgc:active {transform:scale(.98);}
  :where(body.p-heroes) a.hgc:focus-visible {outline:2px solid var(--brand); outline-offset:2px;}
  :where(body.p-heroes) .hgc img.face, :where(body.p-heroes) .hgc .face.q2 {width:67px; height:39px; border-radius:6px; object-fit:cover;
        border:1px solid var(--line); flex:0 0 auto;}
  :where(body.p-heroes) .q2 {display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--mut);
      background:var(--panel2); overflow:hidden;}
  :where(body.p-heroes) .hgc .in {min-width:0; flex:1;}
  :where(body.p-heroes) .hgc .nm {display:flex; gap:7px; align-items:center; flex-wrap:wrap; font-weight:600; font-size:13.5px; min-width:0;}
  :where(body.p-heroes) .hgc .nm span.t {white-space:normal; word-break:break-word; line-height:1.2;}
  /* (06.08, Вова) тир — заметнее и с пиктограммой-кубком: раньше бейдж
     терялся в строке имени */
  /* (06.08, Вова) бейдж тира — вариант 3: гексо-щиток, буква, Chakra Petch. Место справа под WR-кольцо сохранено. */
  :where(body.p-heroes) .hgt {display:inline-flex; align-items:center; justify-content:center; width:26px; height:28px; flex:0 0 auto;
       font:700 15px 'Chakra Petch','Oswald',sans-serif; line-height:1; letter-spacing:0;
       clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
  :where(body.p-heroes) .hgt svg {display:none;}
  :where(body.p-heroes) .hgt.tS {color:#10130a; background:var(--brand);}
  :where(body.p-heroes) .hgt.tA {color:var(--text); background:#39434f;}
  :where(body.p-heroes) .hgt.tB {color:#0e1116; background:#8ea2b6;}
  :where(body.p-heroes) .hgt.tC {color:#0e1116; background:#5a6672;}
  :where(body.p-heroes) .hgc .sub {display:flex; gap:7px; align-items:center; color:var(--mut); font-size:11.5px; margin-top:3px; flex-wrap:wrap;}
  :where(body.p-heroes) .hgc .sub .hgwr {font-size:12.5px; width:auto; text-align:left;}
  :where(body.p-heroes) .hgc .sub .ricos {display:inline-flex; gap:3px; align-items:center;}
  /* (Этап 2, 06.08) карточка героя — вариант В: WR-кольцо вместо текстового WR */
  /* (06.08, Вова: «цифры липнут к кругу и тянет их влево-вверх»)
     Две отдельные причины, обе тут.
     1. Тесно: цифра шла 13px в поле 36 единиц, а внутренний просвет кольца —
        меньше 15 единиц. «45%» занимало почти всю ширину просвета. Кольцо
        выросло с 46 до 58px, шрифт внутри — до 11 единиц: видимый размер цифры
        почти прежний, а воздуха вокруг вдвое больше.
     2. Не по центру: вертикаль держалась вручную подобранным y=21.5, и любой
        шрифт с другими метриками (а Oswald подгружается не мгновенно) уводил
        цифру вверх-влево. Теперь центр честный — y=18 плюс dominant-baseline. */
  :where(body.p-heroes) .hgring {flex:0 0 auto;}
  :where(body.p-heroes) .hgring-bg {fill:none; stroke:var(--line); stroke-width:2.4;}
  :where(body.p-heroes) .hgring-fg {fill:none; stroke:var(--text); stroke-width:2.4; stroke-linecap:round;}
  :where(body.p-heroes) .hgring text {font:700 11px 'Oswald',sans-serif; fill:var(--text); text-anchor:middle;
        dominant-baseline:central; alignment-baseline:central;}
  :where(body.p-heroes) .hgring.good .hgring-fg {stroke:var(--ok);}
  :where(body.p-heroes) .hgring.low .hgring-fg {stroke:var(--mut);}
  /* сортировка «Мета» — зонные разделители «Тир S/Тир A/Тир B/Тир C/NOT IN
     META» поперёк сетки; сортировка A–Z их не показывает (см. JS apply()) */
  /* липкая полоса-заголовок зоны: сплошной --bg под цветной заливкой,
     чтобы карточки не просвечивали сквозь sticky */
  :where(body.p-heroes) .hgzone {grid-column:1/-1; display:flex; align-items:center; gap:12px;
        padding:9px 14px; border-radius:8px; border-left:5px solid var(--line);
        margin:26px 0 12px; position:sticky; top:0; z-index:5;
        background-color:var(--bg);
        background-image:linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04));}
  :where(body.p-heroes) .hgzone:first-child {margin-top:0;}
  /* буква тира — в цвет заливки на полную силу, слово «Тир» тише её */
  :where(body.p-heroes) .hgzt {flex:0 0 auto; font:700 16px 'Oswald',sans-serif; text-transform:uppercase;
        letter-spacing:.14em; color:var(--text);}
  :where(body.p-heroes) .hgzt b {font-weight:700; color:var(--text);}
  :where(body.p-heroes) .hgzn {margin-left:auto; flex:0 0 auto; font-size:11.5px; color:var(--mut);}
  :where(body.p-heroes) .hgzone[data-zone="S"] {border-left-color:var(--brand);
        background-image:linear-gradient(rgba(197,240,43,.10), rgba(197,240,43,.10));}
  :where(body.p-heroes) .hgzone[data-zone="S"] .hgzt b {color:var(--brand);}
  :where(body.p-heroes) .hgzone[data-zone="A"] {border-left-color:var(--gold);
        background-image:linear-gradient(rgba(227,179,65,.10), rgba(227,179,65,.10));}
  :where(body.p-heroes) .hgzone[data-zone="A"] .hgzt b {color:var(--gold);}
  :where(body.p-heroes) .hgzone[data-zone="B"] .hgzt b, :where(body.p-heroes) .hgzone[data-zone="C"] .hgzt b {color:var(--text);}
  :where(body.p-heroes) .hgzone[data-zone="none"] {background-image:linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.03));}

  /* (06.08) крутилка загрузки матчей: «Считаю…» голым текстом читалось
     как зависание (фидбек Вовы) */
  :where(body.p-heroes) .hgspin {width:13px; height:13px; border:2px solid #2a3342; border-top-color:var(--brand);
        border-radius:50%; display:inline-block; vertical-align:-2px; margin-right:8px;
        animation:hgsp .8s linear infinite;}
  @keyframes hgsp {to{transform:rotate(360deg);}}
  :where(body.p-heroes) .hgsrc {margin:20px 0 20px; font-size:11.5px; color:var(--mut);}
  @media (max-width:640px) {
    :where(body.p-heroes) .hggrid {grid-template-columns:1fr 1fr;}
    :where(body.p-heroes) a.hgc {flex-direction:column; align-items:flex-start; gap:6px; position:relative;}
    :where(body.p-heroes) .hgring {position:absolute; top:8px; right:8px; width:44px; height:44px;
          background:rgba(14,17,22,.72); border-radius:50%;}
    :where(body.p-heroes) .hgc img.face, :where(body.p-heroes) .hgc .face.q2 {width:100%; height:56px;}
    :where(body.p-heroes) .psel {flex:1 1 47%;}
    :where(body.p-heroes) .psel-b {width:100%; justify-content:space-between;}
    :where(body.p-heroes) .psel-l {max-width:calc(100vw - 48px);}
    :where(body.p-heroes) input.hgq {width:100%;}
    /* матчап: поля во всю ширину, подсказка не шире экрана */
    :where(body.p-heroes) .hgmu-hq, :where(body.p-heroes) .hgmu-hq input, :where(body.p-heroes) .hgmu-hq.wide input {width:100%;}
    :where(body.p-heroes) .hgmu-cond {flex:1 1 100%;}
    :where(body.p-heroes) .hgmu-drop {width:calc(100vw - 56px); max-width:290px;}
    :where(body.p-heroes) .hgmu-mid {margin-left:0; flex:1 1 100%;}
    :where(body.p-heroes) .hgmu-mid input {flex:1 1 auto; width:auto; min-width:0;}}/* ==================== hero.php ==================== */
html:has(body.p-hero) { overflow-x:clip; }

  body:where(.p-hero) {
    --brand:#c5f02b; --bg:#0e1116; --panel:#161b22; --panel2:#1b222c;
    --text:#e6edf3; --muted:#8b96a5; --line:#242c38; --err:#e6482e; --ok:#7ec66a;
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:#10130a; --brand2:#d9ff56; --gold:#f0c92b; --enred:#d9695f;
  }
  :where(body.p-hero) * {box-sizing:border-box}
  :where(body.p-hero) [hidden] {display:none !important;} /* иначе display:grid/flex перебивает hidden */
  body:where(.p-hero) {margin:0; background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif;}body:where(.p-hero) { overflow-x:clip; } /* clip, не hidden — hidden даёт двойной вертикальный скролл */
  :where(body.p-hero) a {color:var(--brand); text-decoration:none}
  :where(body.p-hero) h1, :where(body.p-hero) h2 {font-family:'Oswald',sans-serif; margin:0}

  /* ---- страница героя: классы hx* (не «ad»!) ---- */
  /* ширина = ширина .wrap (--site-w), как шапка и футер — правило Вовы 23.07: контент страниц НЕ ужимать в узкие колонки */
  :where(body.p-hero) .hxwrap {max-width:none;}
  :where(body.p-hero) .hxbox {border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:16px 18px; margin-bottom:14px;}
  :where(body.p-hero) .hxsec {font:600 13px 'Inter',sans-serif; color:var(--mut); text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px;}
  :where(body.p-hero) .hxmeta {font-size:12.5px; color:var(--mut);}

  /* шапка героя */
  :where(body.p-hero) .hxhero {display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:18px 0 16px;}
  /* (07.08, Вова: «иконка и текст плавают») Портрет был 72px при шапке в
     ~96px: он вставал по центру блока, и имя героя с плитками съезжало относительно
     него. Теперь портрет ростом с обе строки — имя и плитки, и вся шапка выровнена
     по верху, а не по центру. */
  /* (07.08, Вова) Портрет тянется на ОБЕ строки шапки — имя и плитки, —
     а не висит у верхней. Фиксированную высоту убрали: `align-self:stretch`
     заставляет картинку занять ровно столько, сколько занял соседний столбец,
     и шапка перестаёт зависеть от того, сколько плиток в неё попало. */
  :where(body.p-hero) .hxhero {align-items:stretch;}
  :where(body.p-hero) .hxhero img.face {width:190px; height:auto; align-self:stretch; min-height:104px;
        border-radius:12px; object-fit:cover; border:1px solid var(--line);}
  @media(max-width:640px) { :where(body.p-hero) .hxhero {align-items:flex-start;}
        :where(body.p-hero) .hxhero img.face {width:128px; height:72px; min-height:0; align-self:auto;}}
  :where(body.p-hero) .hxhero h1 {font-size:30px; line-height:1.1;}
  :where(body.p-hero) .hxhero .en {color:var(--mut); font-size:13.5px; margin-top:2px;}
  :where(body.p-hero) .hxbadges {display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
  :where(body.p-hero) .hxb {border:1px solid var(--line); border-radius:8px; padding:3px 10px; font-size:12.5px; color:var(--text);}
  :where(body.p-hero) .hxb.tier-S {color:var(--brand); border-color:var(--brand); font-weight:700;}
  :where(body.p-hero) .hxb .mut {color:var(--mut);}

  /* ===== колонка управления картой (24.07) =====
     Осталась общей: на ней стоит блок «Карта» — галочки слоёв, чипы и ползунки.
     Правила самого холста старой карты (.hxwd-map/-msg/-zc/-vsbtn/-leg) печатаются
     ТОЛЬКО в режиме перекалибровки: обычному глазу их не к чему применять. */
  :where(body.p-hero) .hxwd {display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start;}
  /* (06.08, Вова: «дыра между картой и текстом») Колонка управления больше
     не прибита к 250px у правого края: она занимает всё место ПОСЛЕ карты и
     ломается на колонки по высоте карты (max-height ставит JS по факту рендера —
     fitCtl ниже). Карта при этом НЕ растягивается: рост убран у .hxmp-maps. */
  :where(body.p-hero) .hxwd-ctl {flex:1 1 250px; min-width:240px; display:flex; flex-flow:column wrap; align-content:flex-start;
        gap:12px 26px;}
  :where(body.p-hero) .hxwd-ctl > div {width:250px; max-width:100%;}
  :where(body.p-hero) .hxwd-ctl .lbl {display:flex; align-items:center; gap:7px; font:700 11.5px 'Inter',sans-serif; color:var(--text);
        text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px;}
  :where(body.p-hero) .hxwd-ctl .lbl svg {width:15px; height:15px; stroke:var(--brand); fill:none; stroke-width:2;
        stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; opacity:.9;}
  /* кнопки панели объёмнее общих чипов (просьба Вовы 06.08) */
  :where(body.p-hero) .hxwd-ctl .hxfc {padding:6px 12px; font-size:12.5px; display:inline-flex; align-items:center; gap:6px;}
  :where(body.p-hero) .hxwd-ctl .hxfc svg {width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2;
        stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto;}
  :where(body.p-hero) .hxwd-ctl .hxmp-cb {font-size:13px; padding:2px 0;}
  :where(body.p-hero) .hxwd-ctl .hxmp-cb input {width:16px; height:16px;}
  :where(body.p-hero) .hxwd-row {display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
  :where(body.p-hero) .hxwd-sl {display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--mut);}
  :where(body.p-hero) .hxwd-sl input[type=range] {flex:1; min-width:70px; accent-color:var(--brand); height:18px;}
  :where(body.p-hero) .hxwd-sl b {color:var(--text); font:600 12.5px 'Inter',sans-serif; white-space:nowrap; min-width:74px;}
  :where(body.p-hero) .hxwd-note {font-size:12.5px; color:var(--mut); line-height:1.5;}
  :where(body.p-hero) .hxwd-note b {color:var(--text);}


  /* ===== блок «Карта» (этап 2б, 05.08): карты на компоненте map_inc.
     Своих правил отрисовки здесь нет — только колонки под карты, галочки слоёв и
     плашка замка. Всё, что рисует сама карта, живёт в csmap-* компонента.
     (05.08, доводка) КАРТ МОЖЕТ БЫТЬ ДВЕ (про и ученик, только у тренера), и обе
     обязаны влезть на экран рядом. Поэтому ширина у них не своя, а какая осталась
     от колонки управления: одна карта занимает всё место (и она крупнее прежних
     420px), две делят его пополам. Колонка управления ужата до 240–260. */
  /* (06.08) рост убран (был flex:1 1 460px): контейнер рос на всю строку,
     карта упиралась в свой потолок 600px, а панель садилась у правого края —
     между ними оставалась пустая дыра. Теперь контейнер не шире своих карт,
     и панель прижимается к карте вплотную. */
  :where(body.p-hero) .hxmp-maps {display:flex; gap:12px; flex:0 1 600px; min-width:280px; flex-wrap:wrap; align-items:flex-start;}
  /* карт стало две (тренер собрал ученика) — контейнеру возвращается рост,
     как было: двум картам рядом нужна вся строка, панель уедет под них */
  :where(body.p-hero) .hxmp-maps:has(#hxmp-b:not([hidden])) {flex:1 1 460px;}
  /* (05.08, приёмка Вовы) потолок ширины: одна карта не должна раздуваться
     на весь контент — 600px за глаза; две делят ряд как делили */
  :where(body.p-hero) .hxmp-map {position:relative; flex:1 1 260px; min-width:0; max-width:600px;}
  :where(body.p-hero) .hxmp-map[hidden] {display:none !important;}
  :where(body.p-hero) .hxmp-map .csmap {max-width:100%;}
  :where(body.p-hero) .hxmp-map .csmap-cv {border:1px solid var(--line);}
  /* подпись над картой нужна только тогда, когда карт две: у одинокой
     карты объяснять нечего, а лишняя строка отъедает высоту */
  :where(body.p-hero) .hxmp-cap {font:600 12px 'Inter',sans-serif; color:var(--mut); margin:0 0 5px; text-align:center;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  /* замок кладём ПОВЕРХ холста и только на время, пока бесплатный держит
     галочку тепла: варды под ним бесплатные, и прятать их насовсем нельзя.
     Размытие — по тому, что уже нарисовано (подложка и варды), данных тепла в
     браузере нет вовсе — их не отдал сервер. */
  :where(body.p-hero) .hxmp-lock {position:absolute; left:0; top:0; width:100%; aspect-ratio:1; z-index:4;
        display:flex; align-items:center; justify-content:center; text-align:center; padding:22px;
        border-radius:14px; background:rgba(11,14,19,.55);
        -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);}
  :where(body.p-hero) .hxmp-lock[hidden] {display:none !important;}
  /* (06.08, Вова) плашка «чьё это тепло»: видно, что смотрим одного про, а не все матчи */
  :where(body.p-hero) .hxmp-plchip {display:inline-flex; align-items:center; gap:7px; margin-left:10px; padding:2px 6px 2px 11px;
    border:1px solid var(--brand); border-radius:999px; background:rgba(197,240,43,.10);
    font-size:12px; font-weight:600; color:var(--text); vertical-align:middle; text-transform:none; letter-spacing:0;}
  :where(body.p-hero) .hxmp-plchip[hidden] {display:none;}
  :where(body.p-hero) .hxmp-plchip .x {cursor:pointer; color:var(--mut); font-size:15px; line-height:1; padding:0 3px; border-radius:50%;}
  :where(body.p-hero) .hxmp-plchip .x:hover {color:var(--err); background:rgba(255,255,255,.10);}
  :where(body.p-hero) .hxmp-lk {font:700 15px 'Inter',sans-serif; color:var(--text);}
  :where(body.p-hero) .hxmp-lt {font-size:12.5px; color:var(--mut); margin-top:7px; line-height:1.5; max-width:280px;}
  :where(body.p-hero) .hxmp-cb {display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text); cursor:pointer;}
  :where(body.p-hero) .hxmp-cb input {accent-color:var(--brand); width:15px; height:15px; cursor:pointer;}
  /* узкий экран: сперва карты во всю ширину, колонка управления под ними —
     иначе на телефоне и карта, и чипы получаются по половине экрана каждая */
  @media (max-width:820px) { :where(body.p-hero) .hxwd-ctl {flex:1 1 100%; max-width:none;}}

  /* (05.08) тепловая ученика: поле Friend ID, окно в днях, кнопка и чипы
     его частых героев. Приставка своя (hxpl-), чтобы не цеплять чужие правила;
     на «ad» не начинается — адблок вырезал бы блок целиком (правило 8).
     Стили печатаются всем, а разметка — только тренеру: два условия на одну
     секцию ради экономии полутора сотен байт стилей того не стоят. */
  :where(body.p-hero) .hxpl-q input {width:132px; background:var(--panel2); border:1px solid var(--line); border-radius:8px;
        color:var(--text); padding:5px 10px; font:500 12.5px 'Inter',sans-serif; outline:none;}
  :where(body.p-hero) .hxpl-q input:focus {border-color:var(--brand);}
  :where(body.p-hero) .hxpl-d {background:var(--panel2); border:1px solid var(--line); border-radius:8px; color:var(--text);
        padding:5px 7px; font:500 12.5px 'Inter',sans-serif; outline:none;}
  /* лаймовая кнопка блока ровно одна — вот эта. Размер сбит под колонку
     фильтров: та же .hxbtn во всю ширину рядом с полем выглядела бы кнопкой
     оплаты, а не «найти» */
  :where(body.p-hero) .hxpl-go {padding:5px 14px; font-size:12.5px; border:0; cursor:pointer; font-family:'Inter',sans-serif; font-weight:600;}
  :where(body.p-hero) .hxpl-go[disabled] {opacity:.55; cursor:default;}
  /* чип героя ученика: портрет, имя и число игр. Портрет — потому что имя
     героя в списке из пяти читается вдвое дольше картинки */
  :where(body.p-hero) .hxpl-h {display:inline-flex; align-items:center; gap:6px; padding:3px 8px 3px 4px;}
  :where(body.p-hero) .hxpl-h img {width:34px; height:20px; object-fit:cover; border-radius:4px; display:block;}
  :where(body.p-hero) .hxpl-h b {font-size:10.5px; font-weight:700; opacity:.75; font-variant-numeric:tabular-nums;}

  /* строки-таблички (позиции, брекеты, контр-пики) — компакт */
  :where(body.p-hero) .hxrow {display:flex; align-items:center; gap:10px; padding:4px 8px; border-radius:8px; font-size:13px;}
  :where(body.p-hero) .hxrow:hover {background:rgba(255,255,255,.03);}
  :where(body.p-hero) .hxrow[data-go] {cursor:pointer;}
  /* (07.08, Вова) СТРОКА МАТЧАПА — СЕТКА С ФИКСИРОВАННЫМИ КОЛОНКАМИ,
     всё прижато ВЛЕВО. Было: число игр и процент прилипали к правому краю
     (`margin-left:auto` + `text-align:right`), и глазу приходилось прыгать —
     «2 445 игр» и «704 игры» начинались в разных местах, «47.3%» и «44%» тоже.
     Пустое место лучше держать справа, у края панели, чем между цифрами. */
  :where(body.p-hero) .hxrow.vsrow {display:grid; grid-template-columns:45px minmax(0,1fr) 84px 92px 58px; gap:10px;}
  :where(body.p-hero) .hxrow.vsrow .hxname {align-self:center;}
  :where(body.p-hero) .hxrow.vsrow .hxgames {margin-left:0; text-align:left; align-self:center;}
  :where(body.p-hero) .hxrow.vsrow .hxwr {width:auto; text-align:left;}
  :where(body.p-hero) .hxrow.vsrow .hxsc50 {align-self:center;}
  @media (max-width:640px) { :where(body.p-hero) .hxrow.vsrow {grid-template-columns:45px minmax(0,1fr) 74px 52px; gap:8px;}}
  :where(body.p-hero) .hxrow.vsgo {cursor:pointer;}
  :where(body.p-hero) .hxrow.vsgo:hover {background:rgba(197,240,43,.06);}
  :where(body.p-hero) .hxrow img.mini {width:45px; height:27px; border-radius:4px; object-fit:cover; flex:0 0 auto;}
  :where(body.p-hero) .hxrow img.medal {width:24px; height:24px; flex:0 0 auto;}
  :where(body.p-hero) .hxrow.you {border:1px solid #3d4757; background:rgba(197,240,43,.05);}
  :where(body.p-hero) .hxyou {font-size:10.5px; color:var(--brand); border:1px solid var(--brand); border-radius:5px; padding:0 5px; flex:0 0 auto;}
  :where(body.p-hero) .hxname {color:var(--text); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  :where(body.p-hero) .hxgames {color:var(--mut); font-size:12px; flex:0 0 auto; margin-left:auto;}
  :where(body.p-hero) .hxwr {font:600 14px 'Oswald',sans-serif; color:var(--text); flex:0 0 auto; width:56px; text-align:right;}
  :where(body.p-hero) .hxwr.good {color:var(--ok);}
  :where(body.p-hero) .hxwr.low {color:var(--mut);}
  /* (06.08) шкала контрпика: центр = 50%, риска посередине, влево красным
     и вправо зелёным. Полная половина = 20 п.п. отрыва. Цифра рядом остаётся
     голым винрейтом — шкала её только рисует, ничего не пересчитывая. */
  :where(body.p-hero) .hxsc50 {position:relative; flex:0 0 92px; width:92px; height:6px; border-radius:3px; background:rgba(255,255,255,.05);}
  :where(body.p-hero) .hxsc50::before {content:''; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:#39414f;}
  :where(body.p-hero) .hxsc50 i {position:absolute; top:0; height:6px; border-radius:3px;}
  :where(body.p-hero) .hxsc50 i.b {background:var(--enred); right:50%;}
  :where(body.p-hero) .hxsc50 i.g {background:var(--ok); left:50%;}
  /* вся полоса заголовка и есть кнопка — отдельной кнопки рядом нет */
  :where(body.p-hero) .hxmp-hd {display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer;
        border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:0; user-select:none;}
  :where(body.p-hero) .hxmp-hd:hover {border-color:#3d4757; background:rgba(255,255,255,.03);}
  :where(body.p-hero) .hxmp-hd:focus-visible {outline:1px solid var(--brand); outline-offset:2px;}
  :where(body.p-hero) .hxmp-tg {margin-left:auto; font-size:12px; text-transform:none; letter-spacing:0; color:var(--mut);
        display:inline-flex; align-items:center; gap:6px;}
  :where(body.p-hero) .hxmp-hd:hover .hxmp-tg {color:var(--text);}
  :where(body.p-hero) .hxmp-tg .ar {font-size:10px; transition:transform .15s;}
  :where(body.p-hero) .hxmp-hd.on .hxmp-tg .ar {transform:rotate(180deg);}
  :where(body.p-hero) .hxsec small {font:500 10.5px 'Inter',sans-serif; text-transform:none; letter-spacing:0; color:var(--mut); margin-left:6px;}
  /* герой внутри заголовка: имя лаймом и его портрет — чтобы было видно, о ком строка */
  :where(body.p-hero) .hxvs-hi {width:22px; height:22px; object-fit:cover; border-radius:5px; vertical-align:-6px;
      margin:0 5px 0 2px; border:1px solid var(--line);}
  :where(body.p-hero) .hxvs-hn {color:var(--brand); font-weight:700;}
  :where(body.p-hero) .hxvs-more {width:100%; margin-top:6px;}
  @media (max-width:640px) { :where(body.p-hero) .hxsc50 {display:none;}}
  /* (06.08) возврат к списку героев — ghost-таблетка */
  /* (06.08, Вова) Это единственная навигация вверх на странице, и раньше
     она была серой строчкой «← все герои» кеглем 12.5 — глаз проскакивал мимо.
     Теперь строка-панель во всю ширину: стрелка в кружке, название крупно и
     подзаголовок о том, что там лежит. Кликается вся панель, а не два слова. */
  :where(body.p-hero) .hxbackbar {margin:14px 0 2px;}
  :where(body.p-hero) .hxback {display:flex; align-items:center; gap:12px; text-decoration:none;
        border:1px solid var(--line); border-radius:12px; background:var(--panel);
        padding:10px 16px 10px 12px; transition:border-color .14s, background .14s;}
  :where(body.p-hero) .hxback:hover {border-color:#3d4757; background:var(--panel2);}
  :where(body.p-hero) .hxback .ar {flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--bg);
        border:1px solid var(--line); color:var(--mut); display:flex; align-items:center; justify-content:center;
        transition:color .14s, border-color .14s, transform .14s;}
  :where(body.p-hero) .hxback:hover .ar {color:var(--brand); border-color:rgba(197,240,43,.45); transform:translateX(-2px);}
  :where(body.p-hero) .hxback .tx {font:600 14px 'Inter',sans-serif; color:var(--text); line-height:1.2;}
  :where(body.p-hero) .hxback .tx small {display:block; font:400 11.5px 'Inter',sans-serif; color:var(--mut); margin-top:2px;}
  /* (06.08) строка ранга на всю ширину: колонки фиксированы, иначе при
     растяжении части строки разъезжаются по краям */
  /* лента рангов: восемь плиток в ряд, шкала внутри плитки — вертикальная,
     от центра 50%: вверх лаймом, вниз красным */
  :where(body.p-hero) .hxbrt {display:grid; grid-template-columns:repeat(8,1fr); gap:8px;}
  :where(body.p-hero) .hxbrc {position:relative; background:var(--bg); border:1px solid var(--line); border-radius:12px;
        padding:12px 6px 10px; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0;}
  :where(body.p-hero) .hxbrc .ic {display:flex;}
  :where(body.p-hero) .hxbrc .ic img {width:26px; height:26px; display:block;}
  :where(body.p-hero) .hxbrc .nm {font:500 12.5px 'Oswald',sans-serif; letter-spacing:.03em; color:var(--text);
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  :where(body.p-hero) .hxbrc .mm {font:400 10px 'Inter',sans-serif; color:var(--mut); white-space:nowrap;}
  /* винрейт кольцом: дуга закрашена ровно на столько, сколько показывает цифра внутри */
  :where(body.p-hero) .hxbrc .rg {position:relative; width:54px; height:54px; display:flex; align-items:center; justify-content:center;}
  :where(body.p-hero) .hxbrc .rg .hxsic {position:absolute; inset:0; width:54px; height:54px; display:block;}
  :where(body.p-hero) .hxbrc .rg .hxsic svg {width:54px; height:54px; display:block; stroke-width:3;}
  :where(body.p-hero) .hxbrc .rg .hxsic svg .bg {stroke:var(--line); fill:none;}
  :where(body.p-hero) .hxbrc .rg .hxsic svg .fg {stroke:var(--mut); fill:none; stroke-linecap:round;}
  :where(body.p-hero) .hxbrc .rg .hxsic.good svg .fg {stroke:var(--ok);}
  :where(body.p-hero) .hxbrc .rg .hxsic.low svg .fg {stroke:var(--enred);}
  :where(body.p-hero) .hxbrc .rg .hxwr {position:relative; width:auto; text-align:center; font:600 15px 'Oswald',sans-serif;}
  :where(body.p-hero) .hxbrc.me {border-color:var(--brand); background:rgba(197,240,43,.06);}
  :where(body.p-hero) .hxbrc-you {position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--brand);
        color:#0e1116; font:600 10px 'Oswald',sans-serif; letter-spacing:.06em; padding:1px 8px;
        border-radius:999px; white-space:nowrap;}
  @media(max-width:900px) { :where(body.p-hero) .hxbrt {grid-template-columns:repeat(4,1fr); gap:10px 8px;}}
  @media(max-width:520px) { :where(body.p-hero) .hxbrt {grid-template-columns:repeat(2,1fr);}}
  :where(body.p-hero) .hxcols-one > div {flex:1 1 100%;}
  :where(body.p-hero) .hxcols {display:flex; gap:18px; flex-wrap:wrap;}
  :where(body.p-hero) .hxcols > div {flex:1 1 260px; min-width:240px;}

  /* билды: чипы предметов */
  :where(body.p-hero) .hxitems {display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 10px;}
  :where(body.p-hero) .hxit {display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:8px;
        padding:3px 8px; font-size:12.5px; background:var(--panel2);}
  :where(body.p-hero) .hxit img {width:26px; height:19px; border-radius:3px; object-fit:cover;}
  :where(body.p-hero) .hxit small {color:var(--mut);}

  /* фильтры над списком матчей */
  :where(body.p-hero) .hxfg {display:flex; gap:4px; flex-wrap:wrap; align-items:center;}
  :where(body.p-hero) .hxfc {border:1px solid var(--line); background:none; color:var(--mut); border-radius:8px;
        padding:4px 10px; font:600 12px 'Inter',sans-serif; cursor:pointer;}
  :where(body.p-hero) .hxfc:hover {color:var(--text);}
  :where(body.p-hero) .hxfc.on {color:var(--text); border-color:#3d4757; background:var(--panel2);}
  :where(body.p-hero) .rico {width:14px; height:14px; vertical-align:-2px; margin-right:5px; display:inline-block; opacity:.9; object-fit:contain;}

  /* (06.08) свёртки details.hxm удалены вместе со вторым блоком про-матчей;
     .hxmbody осталась — это тело РАЗБОРА матча, оно приезжает в мастер-блок */
  :where(body.p-hero) .hxmbody {padding:14px 4px 4px; font-size:13.5px; line-height:1.55;}
  :where(body.p-hero) .hxfive {display:flex; gap:4px; align-items:center; flex-wrap:wrap;}
  :where(body.p-hero) .hxfive img {width:34px; height:20px; border-radius:3px; object-fit:cover; border:1px solid var(--line);}
  :where(body.p-hero) .hxtl {display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
  :where(body.p-hero) .hxtl .hxit b {color:var(--brand); font-family:'Oswald',sans-serif; font-weight:600;}

  /* тайлы предметов «как инвентарь в доте» (23.07): иконка + минута/×N */
  :where(body.p-hero) .hxinv {display:flex; gap:8px 9px; flex-wrap:wrap; margin-top:14px; align-items:flex-start;}
  :where(body.p-hero) .hxinv > .lbl {flex:0 0 74px; font-size:12.5px; color:var(--mut); padding-top:12px;}
  :where(body.p-hero) .hxti {width:54px; text-align:center; position:relative;}
  :where(body.p-hero) .hxti > img, :where(body.p-hero) .hxti > .q2 {width:54px; height:40px; border-radius:6px; border:1px solid var(--line);
        object-fit:cover; display:block; background:var(--panel2); margin:0 auto;}
  :where(body.p-hero) .hxti > .q2 {display:flex; align-items:center; justify-content:center; font-size:9.5px; color:var(--mut); overflow:hidden;}
  :where(body.p-hero) .hxti .t {display:block; font:600 10.5px 'Oswald',sans-serif; color:var(--mut); margin-top:1px;}
  :where(body.p-hero) .hxti .t.sm {font:400 9px 'Inter',sans-serif; line-height:1.2; margin-top:0;} /* размер выборки под медианой; трёхзначная выборка переносится сама */
  :where(body.p-hero) .hxti .n {position:absolute; top:-5px; right:-3px; background:var(--panel2); border:1px solid var(--line);
        border-radius:5px; font-size:9.5px; padding:0 4px; color:var(--text); line-height:14px;}
  :where(body.p-hero) .hxti.ag > img {border-color:var(--gold);} /* аганим/шард — золотой кант */
  :where(body.p-hero) .hxti.nt > img {border-radius:50%; width:40px; height:40px;} /* нейтралка — круг, как слот в доте */
  :where(body.p-hero) .hxti.empty > .q2 {border-style:dashed; color:#39434f;}
  :where(body.p-hero) details.hxopp {margin-top:8px; border-top:1px dashed var(--line); padding-top:6px;}
  :where(body.p-hero) details.hxopp summary {cursor:pointer; list-style:none;}
  :where(body.p-hero) details.hxopp summary::-webkit-details-marker {display:none;}
  :where(body.p-hero) details.hxopp summary:before {content:'▸ '; color:var(--mut);}
  :where(body.p-hero) details.hxopp[open] summary:before {content:'▾ ';}
  :where(body.p-hero) details.hxopp summary:hover {color:var(--text);}

  /* пары линий: мид на мида, керри+5 против оффа+4 */
  :where(body.p-hero) .hxpairs {margin-top:8px; display:flex; flex-direction:column; gap:5px;}
  :where(body.p-hero) .hxpairs .pr {display:flex; gap:5px; align-items:center; flex-wrap:wrap;}
  :where(body.p-hero) .hxpairs .pl {flex:0 0 66px; font-size:11px; color:var(--mut);}
  :where(body.p-hero) .hxpairs .vs {color:var(--mut); font-size:10.5px; padding:0 3px;}
  :where(body.p-hero) .hxpairs img {width:42px; height:24px; border-radius:4px; border:1px solid var(--line);
        border-bottom:2px solid var(--ok); object-fit:cover;}
  :where(body.p-hero) .hxpairs img.fo {border-bottom-color:var(--enred);}
  :where(body.p-hero) .hxpairs img.me {box-shadow:0 0 0 2px var(--gold) inset;}
  /* баны: серые с крестом — «кого боятся» */
  :where(body.p-hero) .hxbans .bt {position:relative; display:inline-block;}
  :where(body.p-hero) .hxbans img {width:34px; height:20px; border-radius:3px; object-fit:cover; border:1px solid var(--line);
        filter:grayscale(.85) brightness(.7); display:block;}
  :where(body.p-hero) .hxbans .bt:after {content:'✕'; position:absolute; inset:0; display:flex; align-items:center;
        justify-content:center; color:var(--enred); font-weight:700; font-size:12px; text-shadow:0 0 3px #000;}

  /* скиллбилд: ряд ячеек уровень+иконка, таланты — золотые T-ячейки инлайн */
  :where(body.p-hero) .hxsb {display:inline-flex; gap:5px; flex-wrap:wrap; align-items:flex-end; flex:1; min-width:0;}
  :where(body.p-hero) .hxsb .c {width:34px; text-align:center;}
  :where(body.p-hero) .hxsb .c img {width:32px; height:32px; border-radius:5px; border:1px solid var(--line); object-fit:cover; display:block; margin:0 auto;}
  :where(body.p-hero) .hxsb .c .q {width:32px; height:32px; border-radius:5px; border:1px solid var(--line); background:var(--panel2);
        display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--mut); margin:0 auto; overflow:hidden;}
  :where(body.p-hero) .hxsb .c .l {font-size:9.5px; color:var(--mut); margin-top:1px;}
  /* (06.08) минута прокачки под клеткой — из файла матча, когда он скачан */
  :where(body.p-hero) .hxsb .c .tm {display:block; font:600 9.5px 'Oswald',sans-serif; color:#9aa7b8;}
  :where(body.p-hero) .hxsb .c.tal {position:relative;}
  :where(body.p-hero) .hxsb .c.tal .q {border-color:#4a4022; padding:4px; display:flex;}
  :where(body.p-hero) .hxsb .c.tal .q img {width:100%; height:100%; object-fit:contain; display:block;}
  /* (06.08, Вова: «ветка талантов слишком ужата») ДЕРЕВО ТАЛАНТОВ — ПРОСТОРНЕЕ,
     как на протрекере. Что поменялось: ширина 158→420px (талант влезает в одну-две
     строки вместо четырёх), клетка стала плиткой с подложкой и рамкой, взятый
     талант — лаймовая заливка, невзятый приглушён, кружок уровня крупнее.
     Всплывашка растёт ВЛЕВО-ВПРАВО от центра значка и упирается в края через
     max-width, поэтому на узком экране не уезжает за борт. */
  :where(body.p-hero) .hxtaltip {display:none; position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%);
        z-index:40; width:420px; max-width:min(420px, 92vw); background:var(--panel2); border:1px solid var(--line);
        border-radius:10px; padding:11px 13px 12px; box-shadow:0 10px 30px rgba(0,0,0,.55); text-align:left; white-space:normal;}
  :where(body.p-hero) .hxsb .c.tal:hover .hxtaltip {display:block;}
  :where(body.p-hero) .hxtaltip .tth {display:block; font:600 10px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); margin-bottom:9px;}
  :where(body.p-hero) .hxtaltip .ttr {display:block; font:500 11.5px 'Inter',sans-serif; color:#7f8a99; line-height:1.55;}
  :where(body.p-hero) .hxtaltip .ttr b {display:inline-block; width:22px; color:var(--mut); font-weight:700;}
  :where(body.p-hero) .hxtaltip .ttr i {color:var(--gold); font-style:normal; margin-left:2px;}
  :where(body.p-hero) .hxtaltip .ttr.done {color:var(--text);}
  :where(body.p-hero) .hxtaltip .ttr.cur {color:var(--gold); font-weight:600;}
  :where(body.p-hero) .hxtaltip .tg {display:grid; grid-template-columns:1fr 44px 1fr; gap:8px 10px; align-items:center; margin-top:1px;}
  :where(body.p-hero) .hxtaltip .tg .tc {font:500 12px 'Inter',sans-serif; color:#7f8a99; line-height:1.35;
        background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:9px 11px; min-height:46px;
        display:flex; align-items:center;}
  :where(body.p-hero) .hxtaltip .tg .tc.a {text-align:right; justify-content:flex-end;}
  :where(body.p-hero) .hxtaltip .tg .tc.b {text-align:left;}
  :where(body.p-hero) .hxtaltip .tg .tc.on {color:var(--text); font-weight:600; background:rgba(197,240,43,.10); border-color:rgba(197,240,43,.5);}
  :where(body.p-hero) .hxtaltip .tg .tvc {width:40px; height:40px; margin:0 auto; border-radius:50%; border:1px solid var(--line);
        color:var(--mut); font:600 15px 'Oswald',sans-serif; display:flex; align-items:center; justify-content:center;
        background:var(--bg);}
  :where(body.p-hero) .hxtaltip .tg .tvc.got {border-color:rgba(197,240,43,.45); color:var(--brand);}
  /* уровни выше наведённого — приглушены: видно прогрессию, а не итог */
  :where(body.p-hero) .hxtaltip .tg .tc.dim, :where(body.p-hero) .hxtaltip .tg .tvc.dim {opacity:.32;}
  @media(max-width:640px) { :where(body.p-hero) .hxtaltip .tg {grid-template-columns:1fr 34px 1fr; gap:6px;}
        :where(body.p-hero) .hxtaltip .tg .tc {font-size:11px; padding:7px 8px; min-height:38px;} :where(body.p-hero) .hxtaltip .tg .tvc {width:32px; height:32px; font-size:13px;}}

  /* (06.08, Вова) ряды предметов — каждый на своей подложке: было три строки
     подряд без границ, и старт с итогом сливались в одну кучу */
  :where(body.p-hero) .hxisub {background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:7px 9px; margin-top:7px;}
  :where(body.p-hero) .hxisub:first-of-type {margin-top:2px;}
  :where(body.p-hero) .hxisub .hxinv {margin-top:0;}

  /* драфт (23.07): «стадия выбора» — шахматная сетка по порядку пиков (свои — ряд 1, враги — ряд 2, колонка = номер пика: видно, кто кем ответил); «составы» — две пятёрки как на протрекере. Зелёный кант — свои, красный — враги, белая обводка — герой страницы */
  :where(body.p-hero) .hxdrs {display:grid; grid-template-columns:max-content repeat(10, minmax(26px, 46px));
         gap:6px 6px; margin-top:12px; align-items:end; padding-top:4px;}
  :where(body.p-hero) .hxdrs .rl {font-size:11px; color:var(--mut); padding-right:4px; align-self:center;}
  :where(body.p-hero) .dp {text-align:center;}
  :where(body.p-hero) .dp img {width:100%; max-width:46px; height:24px; border-radius:4px; object-fit:cover; display:block;
        margin:0 auto; border:1px solid var(--line); border-bottom:2px solid var(--ok);}
  :where(body.p-hero) .dp.foe img {border-bottom-color:var(--enred);}
  :where(body.p-hero) .dp.me img {box-shadow:0 0 0 2px var(--gold), 0 0 6px rgba(240,201,43,.45);}
  :where(body.p-hero) .dp .o {font-size:9.5px; color:var(--mut); margin-top:2px;}
  :where(body.p-hero) .hxdr-pos .hxfive {margin-top:6px;}
  :where(body.p-hero) .hxdr-pos .hxfive img.me {box-shadow:0 0 0 2px var(--gold) inset;}
  :where(body.p-hero) .hxdr-side {font:700 11px 'Inter',sans-serif;}
  :where(body.p-hero) .hxdr-side.rad {color:var(--ok);} :where(body.p-hero) .hxdr-side.dire {color:var(--enred);}
  :where(body.p-hero) .hxdr-side.us {color:var(--brand);} :where(body.p-hero) .hxdr-side.en {color:var(--enred);}
  /* (06.08) шахматка драфта: до 24 шагов в ленте — на узком экране едет
     горизонтальной прокруткой, а не давит клетки в кашу. Бан — серый с крестом,
     как баны везде на сайте. */
  :where(body.p-hero) .hxdr-pb {overflow-x:auto; padding-bottom:4px;}
  :where(body.p-hero) .dp.bnc {position:relative;}
  :where(body.p-hero) .dp.bnc:before {content:'✕'; position:absolute; left:0; right:0; top:0; height:24px; display:flex;
        align-items:center; justify-content:center; color:var(--enred); font-weight:700; font-size:11px;
        text-shadow:0 0 3px #000; z-index:1; pointer-events:none;}
  :where(body.p-hero) .dp.bnc img {filter:grayscale(.85) brightness(.62); border-bottom-color:var(--line);}
  :where(body.p-hero) .dp.bnc .o {color:#55606f;}

  /* ===== карточка разбора: зоны (редизайн героев, этап 1) ===== */
  :where(body.p-hero) .hxscore {display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center;
        background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:12px;}
  :where(body.p-hero) .hxsc-team {display:flex; align-items:center; gap:10px; min-width:0;}
  :where(body.p-hero) .hxsc-team.r {justify-content:flex-end;}
  :where(body.p-hero) .hxsc-lg {width:40px; height:40px; flex:0 0 40px; border-radius:50%; border:2px solid var(--line);
        display:flex; align-items:center; justify-content:center; font:700 13px 'Inter',sans-serif; color:var(--mut);}
  /* с эмблемой кружок становится подложкой: рамку снимаем, картинка вписывается целиком */
  :where(body.p-hero) .hxsc-lg.img {border-color:transparent; background:rgba(255,255,255,.04); padding:4px;}
  :where(body.p-hero) .hxsc-lg.img img {width:100%; height:100%; object-fit:contain; display:block;}
  :where(body.p-hero) .hxsc-tn {font:600 13.5px 'Inter',sans-serif; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis;}
  :where(body.p-hero) .hxsc-tn.r {text-align:right;}
  :where(body.p-hero) .hxsc-tn small {display:block; font:500 11px 'Inter',sans-serif; color:var(--mut);}
  :where(body.p-hero) .hxsc-mid {text-align:center;}
  :where(body.p-hero) .hxsc-num {font:700 32px 'Oswald',sans-serif; line-height:1;}
  :where(body.p-hero) .hxsc-num .us {color:var(--brand);} :where(body.p-hero) .hxsc-num .them {color:var(--mut);} :where(body.p-hero) .hxsc-num .sep {color:#5b6674; margin:0 6px;}
  :where(body.p-hero) .hxsc-dur {font:500 11px 'Inter',sans-serif; color:var(--mut); text-transform:uppercase; margin-top:3px;}
  :where(body.p-hero) .hxsc-tag {display:inline-block; font:700 11px 'Inter',sans-serif; background:rgba(197,240,43,.14); color:var(--brand);
        border-radius:5px; padding:2px 8px; margin-top:5px;}
  :where(body.p-hero) .hxsc-tag.loss {background:rgba(217,105,95,.14); color:var(--enred);}
  /* (07.08, Вова: «шмотки налазят на 10 мин, нет марок») ЧТО БЫЛО НЕ ТАК.
     Подпись насечки печаталась на 11px НИЖЕ оси, а ряд покупок начинался на 12px
     ниже — «10м» и первая же иконка занимали одно место. И ни у события, ни у
     покупки не было ножки до оси: иконки висели рядом с линией, а к какой точке
     времени они относятся, глаз домысливал.
     Теперь этажи разведены: события — над осью, ось с подписями — посередине,
     покупки — под подписями. У каждой метки своя ножка и точка НА оси: лаймовая у
     покупки, цветом события у вышки и Рошана. */
  :where(body.p-hero) .hxtime {position:relative; height:132px; margin:6px 8px 16px;}
  :where(body.p-hero) .hxtime-ax {position:absolute; left:0; right:0; top:58px; height:2px; background:var(--line);}
  :where(body.p-hero) .hxtime-tick {position:absolute; top:54px; width:1px; height:10px; background:var(--line);}
  :where(body.p-hero) .hxtime-tick span {position:absolute; top:12px; left:-9px; font:500 9.5px 'Inter',sans-serif; color:#5b6674; white-space:nowrap;}
  :where(body.p-hero) .hxtime-ev {position:absolute; top:4px; height:48px; transform:translateX(-50%); text-align:center;}
  :where(body.p-hero) .hxtime-ev .hxtime-ico {font-size:13px; line-height:1;}
  :where(body.p-hero) .hxtime-ev .hxtime-ico img {width:16px; height:16px; object-fit:contain; vertical-align:middle;}
  :where(body.p-hero) .hxtime-ev .cap {display:block; font:600 10px 'Inter',sans-serif; white-space:nowrap; line-height:1.2; margin-top:1px;}
  /* событий в точке больше, чем этажей: остаётся иконка, подробность — в title */
  :where(body.p-hero) .hxtime-ev.nocap .cap {display:none;}
  :where(body.p-hero) .hxtime-ev.us .hxtime-ico, :where(body.p-hero) .hxtime-ev.us .cap {color:var(--brand);}
  :where(body.p-hero) .hxtime-ev.foe .hxtime-ico, :where(body.p-hero) .hxtime-ev.foe .cap {color:var(--enred);}
  /* ножка события: от подписи вниз до оси, плюс точка на самой оси */
  :where(body.p-hero) .hxtime-ev::before {content:''; position:absolute; left:50%; top:48px; width:1px; height:var(--ln,11px);
        background:currentColor; opacity:.5;}
  :where(body.p-hero) .hxtime-ev::after {content:''; position:absolute; left:50%; top:var(--dt,56px); width:6px; height:6px;
        margin-left:-3px; border-radius:50%; background:currentColor;}
  :where(body.p-hero) .hxtime-ev.us::before, :where(body.p-hero) .hxtime-ev.us::after {color:var(--brand);}
  :where(body.p-hero) .hxtime-ev.foe::before, :where(body.p-hero) .hxtime-ev.foe::after {color:var(--enred);}
  :where(body.p-hero) .hxtime-buy {position:absolute; top:86px; transform:translateX(-50%);}
  :where(body.p-hero) .hxtime-buy::before {content:''; position:absolute; left:50%; top:calc(-1 * var(--bl,26px)); width:1px; height:var(--bl,26px);
        background:#333c49;}
  :where(body.p-hero) .hxtime-buy::after {content:''; position:absolute; left:50%; top:calc(-4px - var(--bl,26px)); width:6px; height:6px;
        margin-left:-3px; border-radius:50%; background:var(--brand);}
  :where(body.p-hero) .hxtime-buy .hxti {width:38px;}
  :where(body.p-hero) .hxtime-buy .hxti > img, :where(body.p-hero) .hxtime-buy .hxti > .q2 {width:38px; height:28px;}
  :where(body.p-hero) .hxtime-buy .hxti .t {font-size:9.5px;}
  :where(body.p-hero) .hxstt-row {display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px; margin-bottom:12px;}
  :where(body.p-hero) .hxstt {background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 12px;}
  :where(body.p-hero) .hxstt .l {font:500 10px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.04em; color:var(--mut); white-space:nowrap;}
  :where(body.p-hero) .hxstt .v {font:600 19px 'Oswald',sans-serif; line-height:1.25; white-space:nowrap; color:var(--text);}
  :where(body.p-hero) .hxstt .v small {font:500 11px 'Inter',sans-serif; color:var(--mut); margin-left:4px;}
  :where(body.p-hero) .hxstt .v.good {color:var(--ok);} :where(body.p-hero) .hxstt .v.bad {color:var(--enred);} :where(body.p-hero) .hxstt .v.lime {color:var(--brand);}
  /* (07.08, Вова: «всё ещё три строки») Виновата была не подпись, а вот эти
     два правила: `/2` печаталось блоком, то есть СВОЕЙ строкой, и плитка выходила
     в три этажа — подпись, число, знаменатель. В карточке разбора, где плитки
     узкие, перенос был осмыслен; в шапке героя места хватает. Скоуп сузил: в
     шапке знаменатель идёт в строку с числом, в карточке — как было. */
  :where(body.p-hero) .hxstt.pbm .v {white-space:normal; font-size:16px; line-height:1.15;}
  :where(body.p-hero) .hxstt.pbm .v small {display:block; margin-left:0;}
  :where(body.p-hero) .hxhero-stt .hxstt.pbm .v {white-space:nowrap; font-size:19px; line-height:1.25;}
  :where(body.p-hero) .hxhero-stt .hxstt.pbm .v small {display:inline; margin-left:3px;}
  /* (06.08, Вова) шапка — вариант 2: акцент-иконка слева. Скоуп только .hxhero-stt, плитки карточки не трогаем. */
  :where(body.p-hero) .hxhero-stt .hxstt {display:flex; align-items:center; gap:10px; padding:9px 13px;}
  :where(body.p-hero) .hxhero-stt .hxstt .col {display:flex; flex-direction:column; gap:1px; min-width:0;}
  :where(body.p-hero) .hxhero-stt .hxstt .l {font-size:9.5px; white-space:nowrap;}
  :where(body.p-hero) .hxhero-stt .hxstt .v {font-size:18px;}
  :where(body.p-hero) .hxhero-stt .hxstt.pbm .v {white-space:normal; font-size:16px; line-height:1.15;}
  :where(body.p-hero) .hxhero-stt .hxsic {flex:0 0 auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center;}
  :where(body.p-hero) .hxhero-stt .hxsic svg {width:23px; height:23px; stroke:var(--mut); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  /* кольцо винрейта в плитке: фон-дорожка приглушена, дуга — цветом по
     порогам. Скруглённый конец дуги нарочно: на маленьком размере квадратный
     срез читается как зазубрина. */
  :where(body.p-hero) .hxhero-stt .hxsic.wrring svg {width:26px; height:26px; stroke-width:3;}
  :where(body.p-hero) .hxhero-stt .hxsic.wrring svg .bg {stroke:var(--line); fill:none;}
  :where(body.p-hero) .hxhero-stt .hxsic.wrring svg .fg {stroke:var(--mut); fill:none; stroke-linecap:round;}
  :where(body.p-hero) .hxhero-stt .hxsic.wrring.good svg .fg {stroke:var(--ok);}
  :where(body.p-hero) .hxhero-stt .hxsic.wrring.low svg .fg {stroke:var(--enred);}
  :where(body.p-hero) .hxhero-stt .hxsic.hexo {width:28px; height:30px; font:700 15px 'Chakra Petch','Oswald',sans-serif; line-height:1; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
  :where(body.p-hero) .hxhero-stt .hxsic.hexo.tS {color:#10130a; background:var(--brand);}
  :where(body.p-hero) .hxhero-stt .hxsic.hexo.tA {color:var(--text); background:#39434f;}
  :where(body.p-hero) .hxhero-stt .hxsic.hexo.tB {color:#0e1116; background:#8ea2b6;}
  :where(body.p-hero) .hxhero-stt .hxsic.hexo.tC {color:#0e1116; background:#5a6672;}
  :where(body.p-hero) .hxzone {background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:10px;}
  :where(body.p-hero) .hxzone .hxinv {margin-top:8px;}
  :where(body.p-hero) .hxzone .hxinv:first-of-type {margin-top:2px;}
  /* (06.08) правила .hxcmp* / .hxtri* / .hxact* удалены вместе с блоками
     «Про против тебя» и «Три акта» — см. комментарий в $hxDetail. */
  :where(body.p-hero) .hxzh {font:600 11px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.05em; color:var(--mut);}
  /* .hxtal* удалены — зона «Таланты» убрана (round 2) */
  :where(body.p-hero) .hxacts {margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  :where(body.p-hero) .hxcta-lime {display:inline-block; font:600 12.5px 'Inter',sans-serif; color:var(--onbrand); background:var(--brand);
        border-radius:10px; padding:8px 15px;}
  :where(body.p-hero) .hxcta-lime:hover {background:var(--brand2);}
  /* шапка героя — вариант Б: портрет 96×54 + плитки .hxstt в линию */
  :where(body.p-hero) .hxhero img.face {width:96px; height:54px;}
  :where(body.p-hero) .hxhero-stt {margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; max-width:none;}
  :where(body.p-hero) .hxhero-stt .hxstt {flex:0 0 auto;}
  /* списки .hxrow: зебра + мини-шкала WR полоской под процентом */
  :where(body.p-hero) .hxrow:nth-child(even):not(.you):not(:hover) {background:rgba(255,255,255,.02);}
  :where(body.p-hero) .hxrow .hxwr {position:relative;}
  :where(body.p-hero) .hxrow .hxwr[style*="--wr"]::after {content:''; position:absolute; right:0; bottom:-3px; height:2px;
        width:var(--wr); background:var(--mut); border-radius:2px; opacity:.6;}
  :where(body.p-hero) .hxrow .hxwr.good[style*="--wr"]::after {background:var(--ok);}
  :where(body.p-hero) .hxrow .hxwr.low[style*="--wr"]::after {background:var(--enred);}
  :where(body.p-hero) .hxctaq {margin-top:10px; padding-top:8px; border-top:1px dashed var(--line); font-size:12.5px;}
  :where(body.p-hero) .hxctaq a {color:var(--mut);}
  :where(body.p-hero) .hxctaq a:hover {color:var(--brand);}

  /* всплывашка тултипа предметов: одна на страницу, ПК — у элемента, мобила — лист снизу */
  :where(body.p-hero) #hxtip {display:none; position:fixed; z-index:90; max-width:340px; background:#10151c;
         border:1px solid #333d4c; border-radius:10px; padding:11px 13px; box-shadow:0 8px 24px rgba(0,0,0,.5);
         pointer-events:none; font-size:12.5px; line-height:1.5;}
  :where(body.p-hero) #hxtip .tt-t {font-weight:700; color:var(--text); font-size:13.5px;}
  :where(body.p-hero) #hxtip .tt-p {font-weight:600; font-size:10.5px; color:var(--mut); border:1px solid var(--line);
               border-radius:5px; padding:0 5px; vertical-align:1px; margin-left:4px;}
  :where(body.p-hero) #hxtip .tt-c {color:var(--gold); font:600 12.5px 'Oswald',sans-serif; margin-top:1px;}
  :where(body.p-hero) #hxtip .tt-b {color:var(--mut); font-size:11px; text-transform:uppercase; letter-spacing:.03em; margin-top:5px;}
  :where(body.p-hero) #hxtip .tt-a {margin-top:6px; color:#c3ccd7;}
  :where(body.p-hero) #hxtip .tt-a div {margin:1px 0;}
  :where(body.p-hero) #hxtip .tt-act {margin-top:7px; background:rgba(74,111,181,.18); border:1px solid #2c3a55; border-radius:7px;
                 padding:6px 8px; font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  :where(body.p-hero) #hxtip .tt-chip {font:600 11.5px 'Oswald',sans-serif; border-radius:4px; padding:1px 7px; color:#fff;}
  :where(body.p-hero) #hxtip .tt-chip.mc {background:#3b6fb5;}
  :where(body.p-hero) #hxtip .tt-chip.cd {background:#3a4254;}
  :where(body.p-hero) #hxtip .tt-chip.rng {background:#33405a;} /* (25.07) дальность применения */
  :where(body.p-hero) #hxtip .tt-d {color:#c3ccd7; margin-top:7px; white-space:normal;}
  /* ALT-заметки как в доте: скрыты, зажал ALT (или тап по кнопке) — раскрылись */
  :where(body.p-hero) #hxtip .tt-n {display:none; margin-top:7px; background:#171d27; border:1px solid #2b3546; border-radius:7px;
               padding:7px 9px; color:#aab6c5;}
  :where(body.p-hero) #hxtip .tt-n div {margin:2px 0;}
  body:where(.p-hero).hx-alt #hxtip .tt-n, :where(body.p-hero) #hxtip.ttshow .tt-n {display:block;}
  /* .tt-l (лор шмотки) выпилен 25.07 — см. комментарий у $jsIt */
  :where(body.p-hero) #hxtip .tt-hint {margin-top:6px; text-align:right; color:#5b6674; font-size:10.5px;}
  :where(body.p-hero) #hxtip .tt-altbtn {border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:6px;
                    padding:2px 10px; font:600 11px 'Inter',sans-serif; cursor:pointer;}
  @media (max-width:640px) {
    :where(body.p-hero) #hxtip {left:8px !important; right:8px; bottom:8px; top:auto !important; max-width:none; pointer-events:auto;
           max-height:70vh; overflow:auto;}}
  :where(body.p-hero) [data-tti], :where(body.p-hero) [data-tta] {cursor:help;}

  /* (07.08, Вова) кнопка «наверх» — та же, что в базе знаний и поиске:
     страница героя стала длинной, а разбор матча раскрывается на два экрана. */
  :where(body.p-hero) #toTop {position:fixed; right:22px; bottom:22px; z-index:60; display:none;
        width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
        background:var(--panel); color:var(--text); font-size:19px; cursor:pointer;}
  :where(body.p-hero) #toTop:hover {background:#2c3543; border-color:#3d4a5e; color:#fff;}

  /* (07.08, Вова: «проверь мобильную») ЧТО ЛОМАЛОСЬ НА УЗКОМ ЭКРАНЕ ПОСЛЕ
     сегодняшних правок. Таймлайн вырос до 132px и рассчитан на широкую ось —
     на телефоне иконки покупок налезали друг на друга; уменьшаем шаг и прячем
     подписи минут у покупок. Строка ранга уже свёрнута до четырёх колонок выше.
     Дерево талантов уже ужато выше. Шапка героя — портрет и плитки в столбик.
     Две строки условий (против / вместе с) на узком экране переносятся сами:
     у .hxmu-vs стоит flex-wrap. */
  @media (max-width:640px) {
    /* высота оси и этажи считаются на сервере и приезжают в style — тут только поля и размер плиток */
    :where(body.p-hero) .hxtime {margin:6px 2px 14px;}
    :where(body.p-hero) .hxtime-buy .hxti {width:30px;}
    :where(body.p-hero) .hxtime-buy .hxti > img, :where(body.p-hero) .hxtime-buy .hxti > .q2 {width:30px; height:22px;}
    :where(body.p-hero) .hxtime-buy .hxti .t {display:none;}
    :where(body.p-hero) .hxtime-ev .cap {font-size:9px;}
    :where(body.p-hero) .hxhero {flex-wrap:wrap;}
    :where(body.p-hero) .hxstt-row {grid-template-columns:repeat(auto-fit,minmax(84px,1fr));}
    :where(body.p-hero) .hxmu-foldbar {letter-spacing:.04em;}
    :where(body.p-hero) .hxback .tx small {display:none;}}

  /* слово тренера */
  :where(body.p-hero) .hxcoach {border-left:3px solid var(--brand); padding-left:14px; white-space:pre-line; font-size:14px; line-height:1.55;}
  :where(body.p-hero) .hxcoach-form textarea {width:100%; min-height:90px; background:var(--bg); border:1px solid var(--line);
      border-radius:10px; color:var(--text); padding:9px 12px; font:inherit; outline:none; resize:vertical;}
  :where(body.p-hero) .hxcoach-form textarea:focus {border-color:var(--brand);}
  :where(body.p-hero) .hxghost {display:inline-block; margin-top:8px; padding:7px 14px; border:1px solid var(--line); border-radius:10px;
      background:none; color:var(--text); font:600 13px 'Inter',sans-serif; cursor:pointer;}
  :where(body.p-hero) .hxghost:hover {border-color:var(--brand); color:var(--brand);}

  /* наши разборы (мост к подписке) */
  :where(body.p-hero) .hxvid {display:flex; gap:10px; align-items:baseline; padding:9px 8px; border-top:1px solid var(--line);
         font-size:13.5px; flex-wrap:wrap; color:var(--text);}
  :where(body.p-hero) .hxvid:first-of-type {border-top:0;}
  :where(body.p-hero) .hxvid:hover {background:rgba(255,255,255,.03);}
  :where(body.p-hero) .hxvid .t {font-weight:600; min-width:0; flex:1 1 300px;}
  :where(body.p-hero) .hxvid .m {color:var(--mut); font-size:12px; flex:0 0 auto;}
  :where(body.p-hero) .hxlock {border:1px solid var(--line); border-radius:6px; padding:1px 8px; font-size:11.5px; color:var(--mut); flex:0 0 auto;}
  :where(body.p-hero) .hxcta {margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
  :where(body.p-hero) .hxbtn {display:inline-block; padding:10px 18px; border-radius:10px; background:var(--brand); color:var(--onbrand);
         font:700 14px 'Inter',sans-serif; border:0; cursor:pointer;}
  :where(body.p-hero) .hxbtn:hover {background:var(--brand2);}
  /* ===== МАТЧИ ПРОШНИКОВ (этап 3, 05.08) =====
     Перенос блока «Matchup: who vs who» из смотровой на публичную страницу.
     Свои классы hxmu-*, а не классы смотровой: у страницы героя уже есть и
     `.hxrow`, и `.hxfive`, и `.dp` — совпади имена, два экрана начали бы
     переопределять друг друга через общий css шапки. Цвета берём из
     переменных страницы, чтобы блок не выглядел гостем с другого сайта. */
  /* (06.08, Вова) ролевой блок — вариант 3: доначка WR с процентом внутри,
     значок роли слева от названия, число игр снизу. */
  :where(body.p-hero) .hxmu-roles {display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px;}
  :where(body.p-hero) .hxmu-rc {flex:0 0 auto; width:132px; display:flex; flex-direction:column; align-items:center; gap:5px;
        border:1px solid var(--line); border-radius:11px; background:var(--bg); padding:9px 8px;
        cursor:pointer; transition:border-color .15s ease-in-out;}
  :where(body.p-hero) .hxmu-rc:hover {border-color:var(--brand);}
  :where(body.p-hero) .hxmu-rc.on {border-color:var(--brand); background:rgba(197,240,43,.07);}
  :where(body.p-hero) .hxmu-rc.zero {opacity:.42; cursor:default;}
  :where(body.p-hero) .hxmu-rc .rdial {position:relative; width:50px; height:50px;}
  :where(body.p-hero) .hxmu-rc .rring {width:50px; height:50px; display:block;}
  :where(body.p-hero) .hxmu-rc .rr-bg {fill:none; stroke:var(--line); stroke-width:3;}
  :where(body.p-hero) .hxmu-rc .rr-fg {fill:none; stroke:var(--text); stroke-width:3; stroke-linecap:round; transition:stroke-dasharray .3s ease-in-out;}
  :where(body.p-hero) .hxmu-rc .rr-fg.hi {stroke:var(--ok);} :where(body.p-hero) .hxmu-rc .rr-fg.lo {stroke:var(--enred);}
  :where(body.p-hero) .hxmu-rc .rwr {position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
        font:700 13px 'Oswald',sans-serif; color:var(--text); font-variant-numeric:tabular-nums;}
  :where(body.p-hero) .hxmu-rc .rl {display:flex; align-items:center; justify-content:center; gap:4px; font-size:12.5px;
        color:var(--mut); text-transform:uppercase; letter-spacing:.03em; text-align:center; line-height:1.15;}
  :where(body.p-hero) .hxmu-rc.on .rl {color:var(--brand);}
  :where(body.p-hero) .hxmu-rc .rl .rico {width:15px; height:15px; flex:0 0 auto;}
  :where(body.p-hero) .hxmu-rc .rg {font:600 11px 'Inter',sans-serif; color:var(--mut); font-variant-numeric:tabular-nums;}
  @media (max-width:900px) { :where(body.p-hero) .hxmu-rc {width:104px;}}

  /* строка условий «против кого»: до трёх врагов, каждый со своими
     кнопками позиций (их рисует JS — только те, на которых он реально играл) */
  :where(body.p-hero) .hxmu-vs {display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:11px;}
  :where(body.p-hero) .hxmu-vsl {font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); font-weight:700;}
  :where(body.p-hero) .hxmu-cond {display:flex; align-items:center; gap:6px;}
  :where(body.p-hero) .hxmu-cond .rmx {color:var(--mut); cursor:pointer; font-size:15px; line-height:1; padding:0 3px;}
  :where(body.p-hero) .hxmu-cond .rmx:hover {color:var(--err);}
  :where(body.p-hero) .hxmu-hq {position:relative;}
  :where(body.p-hero) .hxmu-hq input {width:180px; background:var(--panel2); border:1px solid var(--line); border-radius:8px;
        color:var(--text); padding:5px 11px; font:500 12.5px 'Inter',sans-serif; outline:none;}
  :where(body.p-hero) .hxmu-hq input:focus {border-color:var(--brand);}
  :where(body.p-hero) .hxmu-drop {position:absolute; left:0; top:calc(100% + 4px); z-index:40; width:290px; max-height:290px;
        overflow-y:auto; background:#10151c; border:1px solid var(--line); border-radius:10px; padding:5px;
        box-shadow:0 8px 24px rgba(0,0,0,.5);}
  :where(body.p-hero) .hxmu-drop[hidden] {display:none !important;}
  :where(body.p-hero) .hxmu-dpos {display:flex; gap:4px; flex-wrap:wrap; padding:2px 2px 6px; border-bottom:1px solid var(--line); margin-bottom:4px;}
  :where(body.p-hero) .hxmu-di {display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:7px; cursor:pointer;
        font-size:12.5px; color:var(--text);}
  :where(body.p-hero) .hxmu-di:hover {background:rgba(197,240,43,.10); color:var(--brand);}
  :where(body.p-hero) .hxmu-di img {width:34px; height:20px; object-fit:cover; border-radius:4px; display:block;}
  :where(body.p-hero) .hxmu-di .n {flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  :where(body.p-hero) .hxmu-di .g {font-size:11px; color:var(--mut); font-variant-numeric:tabular-nums;}
  /* выбранный герой условия — ЗОЛОТОМ: лайм в этих же строках уже значит
     «этот стоит в фильтре», а золото на весь сайт значит «вот он, выбранный» */
  :where(body.p-hero) .hxmu-pick {display:inline-flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--gold);
        box-shadow:0 0 0 1px rgba(227,179,65,.18);
        border-radius:9px; padding:3px 8px 3px 4px; font-size:12.5px; color:var(--text);}
  :where(body.p-hero) .hxmu-pick img {width:40px; height:23px; object-fit:cover; border-radius:6px; display:block;}
  :where(body.p-hero) .hxmu-pick .x {color:var(--mut); cursor:pointer; font-size:15px; line-height:1; padding:0 2px;}
  :where(body.p-hero) .hxmu-pick .x:hover {color:var(--err);}
  /* число игр на кнопке позиции — подсказка «сколько за этим стоит», а не
     сама кнопка: мельче и приглушённее подписи */
  :where(body.p-hero) .hxmu-pc {font-size:10px; font-weight:700; opacity:.7; font-variant-numeric:tabular-nums; margin-left:5px;}
  /* кнопки позиций и в подсказке, и в условии рисует JS, и рисует их
     span'ами: у <span> нет собственной высоты кнопки, значок съезжал бы вниз.
     Отступ у значка гасим — справа от него стоит число, а не слово. */
  :where(body.p-hero) .hxmu-drop .hxfc, :where(body.p-hero) .hxmu-cond .pchips .hxfc {display:inline-flex; align-items:center;}
  :where(body.p-hero) .hxmu-drop .hxfc .rico, :where(body.p-hero) .hxmu-cond .pchips .hxfc .rico {margin-right:0;}

  /* карточки прошников: сначала число игр, при равенстве — ранг команды */
  /* (07.08) полоса сворачивания под разбором — во всю ширину карточки */
  :where(body.p-hero) .hxmu-foldbar {display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
        margin:12px 0 2px; padding:9px 12px; cursor:pointer; border:1px solid var(--line);
        border-radius:10px; background:var(--bg); color:var(--mut);
        font:600 11px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.07em;}
  :where(body.p-hero) .hxmu-foldbar:hover {color:var(--text); border-color:#3d4757; background:var(--panel2);}
  :where(body.p-hero) .hxmu-pl {display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px;}
  :where(body.p-hero) .hxmu-pc-card {border:1px solid var(--line); border-radius:11px; background:var(--bg); padding:6px 10px; cursor:pointer;}
  :where(body.p-hero) .hxmu-pc-card:hover {border-color:var(--brand);}
  :where(body.p-hero) .hxmu-pc-card.on {border-color:var(--brand); background:rgba(197,240,43,.07);}
  /* (06.08, Вова) «Показать всех» — не чёрный прямоугольник в три карточки,
     а карточка ростом с соседей: пунктирная рамка и ЧИСЛО СКРЫТЫХ крупно. Цифра
     отвечает на «сколько ещё», а не «сколько всего» — прежние 14 при пяти видимых
     читались как «всего четырнадцать, показано пять?». */
  :where(body.p-hero) .hxmu-pc-card.more {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
        text-align:center; border-style:dashed; background:transparent; color:var(--mut);
        font:500 11.5px 'Inter',sans-serif; text-transform:none; letter-spacing:0; min-width:118px; padding:8px 12px;}
  :where(body.p-hero) .hxmu-pc-card.more:hover {color:var(--text); border-color:var(--brand); background:rgba(255,255,255,.02);}
  :where(body.p-hero) .hxmu-pc-card.more b {font:600 18px 'Oswald',sans-serif; color:var(--text); line-height:1;}
  :where(body.p-hero) .hxmu-pc-card .pnk {font-weight:700; font-size:12.5px; color:var(--text); max-width:130px; overflow:hidden;
        text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:bottom;}
  :where(body.p-hero) .hxmu-pc-card .pb {display:flex; align-items:baseline; gap:6px; margin-top:2px; font-size:11px; color:var(--mut);}
  :where(body.p-hero) .hxmu-pc-card .pwr {font-size:11.5px; font-weight:700;}
  :where(body.p-hero) .hxmu-pc-card .pwr.hi {color:var(--ok);} :where(body.p-hero) .hxmu-pc-card .pwr.lo {color:var(--enred);}
  /* (06.08, Вова) вместо «#77» — эмблема команды: место рейтинга в мире
     заняла картинка, которая говорит больше. Нет эмблемы — остаётся название. */
  :where(body.p-hero) .hxmu-pc-card .ptm {display:flex; align-items:center; gap:5px; margin-top:3px;
        font-size:10.5px; color:var(--mut); max-width:130px; overflow:hidden;
        text-overflow:ellipsis; white-space:nowrap;}
  :where(body.p-hero) .hxmu-pc-card .ptm img {width:16px; height:16px; object-fit:contain; flex:0 0 16px; display:block;}

  /* ===== СТРОКА МАТЧА =====
     Первый ряд — сетка с фиксированными колонками (иначе W/L и KDA пляшут от
     строки к строке и глазу не за что зацепиться), баны — вторым рядом под ней:
     в тот же ряд они не влезают, а прятать их за клик значит спрятать насовсем. */
  /* (06.08) строка стала кликабельной: клик раскрывает разбор и мини-реплей.
     Паддинги чуть шире прежних — строк теперь пять на экран, и им положено
     «дышать» (приёмка Вовы: не мелко и не каша). */
  :where(body.p-hero) .hxmu-row {border:1px solid var(--line); border-radius:9px; background:var(--bg); padding:11px 6px; margin-bottom:8px; cursor:pointer;}
  :where(body.p-hero) .hxmu-row:hover {border-color:#3d4757;}
  /* (05.08, этап 4) две последние колонки — вход на страницу матча и
     копирование ссылки на неё. Обе взяты из колонки команд (`1fr`), а не
     добавлены к ширине строки: у `1fr` минимум ноль, поэтому строка не полезет
     за край блока ни на каком окне, ужмётся только название лиги.
     Колонка драфта — 392px: две пятёрки по 32px с зазорами занимают 383px, и на
     356px левая пятёрка уезжала под край и обрезалась. Портреты не сжимаются
     (у них своя ширина), поэтому узкая колонка их не ужимает, а режет. */
  :where(body.p-hero) .hxmu-r1 {display:grid; grid-template-columns:30px 60px minmax(0,124px) minmax(0,1fr) 62px 392px 340px 28px 98px;
        align-items:center; gap:0;}
  :where(body.p-hero) .hxmu-r1 > * {padding:0 7px; min-width:0; overflow:hidden;}
  :where(body.p-hero) .hxmu-r1 > .dv {border-left:1px solid var(--line);}
  /* W и L буквой и цветом разом: цвет читается мгновенно, буква работает
     при любой настройке монитора и не врёт дальтонику */
  :where(body.p-hero) .hxmu-wl {width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center;
        font-weight:800; font-size:12px; padding:0 !important;}
  :where(body.p-hero) .hxmu-wl.w {color:var(--ok); background:rgba(126,198,106,.13); border:1px solid rgba(126,198,106,.5);}
  :where(body.p-hero) .hxmu-wl.l {color:var(--enred); background:rgba(217,105,95,.13); border:1px solid rgba(217,105,95,.5);}
  :where(body.p-hero) .hxmu-ago {font-size:11.5px; color:var(--mut); white-space:nowrap;}
  :where(body.p-hero) .hxmu-du {display:block; font:600 11px 'Oswald',sans-serif; color:var(--text); font-style:normal;
        font-variant-numeric:tabular-nums; border-top:1px solid var(--line); margin-top:2px; padding-top:2px;}
  :where(body.p-hero) .hxmu-nk {font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        display:flex; align-items:center; gap:6px;}
  :where(body.p-hero) .hxmu-tm {font-size:11.5px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  :where(body.p-hero) .hxmu-kda {font-size:12.5px; color:#c8d1dd; font-variant-numeric:tabular-nums; text-align:right;}
  :where(body.p-hero) .hxmu-dr {display:flex; align-items:center; gap:5px; justify-content:flex-end;}
  /* цвет подложки означает СТОРОНУ: зелёная — Свет, красная — Тьма. Те же
     два цвета, что и везде на сайте; считать, «а эти пять чьи», не приходится. */
  /* зазор 4px, а не 2: у героя страницы золотая обводка наружу, ей нужно место */
  :where(body.p-hero) .hxmu-s5 {display:flex; gap:4px; padding:3px 4px; border-radius:5px;}
  :where(body.p-hero) .hxmu-s5.rad {background:rgba(126,198,106,.10);}
  :where(body.p-hero) .hxmu-s5.dire {background:rgba(217,105,95,.10);}
  :where(body.p-hero) .hxmu-hp {position:relative; display:block;}
  :where(body.p-hero) .hxmu-hp img {width:32px; height:21px; object-fit:cover; border-radius:3px; display:block; opacity:.82;}
  :where(body.p-hero) .hxmu-hp img.hit {opacity:1; box-shadow:0 0 0 1.5px var(--brand) inset, 0 0 0 1px var(--brand);}
  /* герой страницы — белой рамкой, а не лаймовой: лайм тут уже занят под
     «этот стоит у тебя в фильтре против», две одинаковые метки значили бы разное */
  /* (06.08, Вова) свой герой — ЗОЛОТОМ, как золотая подсветка на карте:
     одна метка «это он» на весь сайт. Тень внутрь — её не режут края контейнера. */
  :where(body.p-hero) .hxmu-hp img.me {opacity:1; box-shadow:0 0 0 2px var(--gold), 0 0 0 2px var(--gold) inset;
        outline:1px solid rgba(227,179,65,.55); outline-offset:1px;}
  /* (06.08, Вова) старт и итог разделены ЗАМЕТНОЙ стрелкой: прежняя
     терялась между иконками. Команды в средней колонке ужались сами — она 1fr. */
  :where(body.p-hero) .hxmu-bld {display:flex; align-items:center; gap:6px; justify-content:flex-end;}
  :where(body.p-hero) .hxmu-b6 {display:flex; gap:2px;}
  :where(body.p-hero) .hxmu-bld img {width:28px; height:22px; object-fit:contain; display:block;}
  :where(body.p-hero) .hxmu-b6 {flex-wrap:wrap;}
  :where(body.p-hero) .hxmu-bld .arw {color:#93a0b4; font:700 17px/1 'Inter',sans-serif; letter-spacing:-1px; padding:0 3px; flex:0 0 auto;}
  :where(body.p-hero) .hxmu-bld .none {color:#4b5769; font-size:11px;}
  /* копирование номера матча — значком и в самом конце строки: подпись
     «скопировать» в каждой из десяти строк это десять одинаковых слов.
     Сработало — значок на секунду зеленеет: правило 13 запрещает браузерные
     окна, а «ничего не произошло» после клика хуже любого окна. */
  :where(body.p-hero) .hxmu-cp {color:#5c6675; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:0;}
  :where(body.p-hero) .hxmu-cp:hover {color:var(--brand);}
  :where(body.p-hero) .hxmu-cp.ok {color:var(--ok);}
  :where(body.p-hero) .hxmu-cp svg {display:block; stroke:currentColor; fill:none;}
  /* (05.08, этап 4) вход в матч на карте. Кнопка ghost, НЕ лаймовая: лайм
     в этом блоке уже занят выбранным героем и выбранной ролью, а десять лаймовых
     кнопок подряд в списке перебили бы и то и другое. Права здесь не считаются
     вовсе — кому можно смотреть, решает сама страница матча. */
  /* ширина колонки посчитана под самую длинную подпись вместе с рамкой и
     обоими паддингами — своим и колоночным: подпись, обрезанная на «На кар…»,
     хуже отсутствующей кнопки */
  :where(body.p-hero) .hxmu-go {display:inline-flex; align-items:center; justify-content:center; gap:3px; white-space:nowrap;
        border:1px solid var(--line); border-radius:8px; padding:4px 7px; font-size:11px; font-weight:600;
        color:var(--mut); background:transparent; text-decoration:none;}
  :where(body.p-hero) .hxmu-go:hover {border-color:var(--brand); color:var(--brand);}
  /* точка «дорожки уже лежат у нас»: зелёная — карта откроется мгновенно */
  /* готовность реплея: галочка — дорожки уже у нас, песочные часы — сходим за матчем */
  :where(body.p-hero) .hxmu-loc {width:12px; height:12px; flex:0 0 auto; display:block; stroke:var(--ok); fill:none;
        stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
  :where(body.p-hero) .hxmu-loc.no {stroke:var(--mut); stroke-width:1.8;}
  :where(body.p-hero) .hxmu-bar {display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center; margin-bottom:9px;}
  /* погашенный пресет: кликнуть нельзя, но видно, что он есть и почему
     молчит (подпись при наведении). Дырка на его месте была бы загадкой. */
  /* панель линз: два сегмент-контрола через вертикальную черту */
  :where(body.p-hero) .hxvsbar {display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 10px;}
  :where(body.p-hero) .hxvsseg {display:inline-flex; align-items:center; background:var(--panel2); border:1px solid var(--line);
        border-radius:10px; padding:3px; gap:3px; flex-wrap:wrap;}
  :where(body.p-hero) .hxvsseg .hxfc {border:none; background:none; border-radius:7px; padding:7px 14px; color:var(--mut);}
  :where(body.p-hero) .hxvsseg .hxfc:hover {color:var(--text);}
  :where(body.p-hero) .hxvsseg .hxfc.on {background:var(--brand); color:#0e1116; font-weight:600;}
  :where(body.p-hero) .hxvsseg.roles .hxfc {padding:7px 11px; display:inline-flex; align-items:center; gap:5px;}
  :where(body.p-hero) .hxvsseg.roles .hxfc.on {background:var(--bg); color:var(--text); font-weight:600; box-shadow:inset 0 0 0 1px var(--line);}
  :where(body.p-hero) .hxvssep {width:1px; height:32px; background:var(--line); flex:0 0 auto;}
  @media(max-width:640px) { :where(body.p-hero) .hxvssep {display:none;}}
  :where(body.p-hero) .hxfc.hxmu-off {opacity:.4; cursor:default;}
  :where(body.p-hero) .hxfc.hxmu-off:hover {color:var(--mut);}
  /* ===== РАСКРЫТАЯ СТРОКА МАТЧА (06.08): разбор + мини-реплей =====
     Карточка продолжает строку вниз: та же рамка, скруглений между ними нет —
     глазу видно, что это одно целое. Реплей — тот же экран матча, что по
     ссылке, только рамкой (embed): второго плеера на сайте нет и не будет. */
  :where(body.p-hero) .hxmu-item.open > .hxmu-row {border-radius:9px 9px 0 0; border-color:#3d4757; margin-bottom:0; background:var(--panel2);}
  :where(body.p-hero) .hxmu-x {border:1px solid #3d4757; border-top:0; border-radius:0 0 9px 9px; background:var(--panel);
        margin:0 0 10px; padding:14px 16px 12px;}
  :where(body.p-hero) .hxmu-x[hidden] {display:none !important;}
  :where(body.p-hero) .hxmu-xtb {display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  :where(body.p-hero) .hxmu-rep {margin-top:9px;}
  :where(body.p-hero) .hxmu-rep iframe {width:100%; height:min(880px, 86vh); border:0; border-radius:12px; background:#0b0e13; display:block;}
  :where(body.p-hero) .hxmu-rep[hidden] {display:none !important;}
  @media (max-width:1250px) {
    :where(body.p-hero) .hxmu-r1 {grid-template-columns:28px 54px minmax(0,104px) minmax(0,1fr) 58px 332px 278px 26px 92px;}
    :where(body.p-hero) .hxmu-hp img {width:26px; height:17px;}
    :where(body.p-hero) .hxmu-bld img {width:22px; height:18px;}}
  @media (max-width:820px) {
    :where(body.p-hero) .hxmu-r1 {grid-template-columns:28px 54px minmax(0,1fr) 56px; row-gap:6px;}
    :where(body.p-hero) .hxmu-r1 > .hxmu-tm {grid-column:1 / -1;}
    :where(body.p-hero) .hxmu-r1 > .hxmu-dr, :where(body.p-hero) .hxmu-r1 > .hxmu-bld {grid-column:1 / -1; justify-content:flex-start; border-left:0;}
    /* на узком экране действия строки встают одним рядом, а не столбиком */
    :where(body.p-hero) .hxmu-r1 > .hxmu-cp {grid-column:1 / 2; justify-content:flex-start; border-left:0;}
    :where(body.p-hero) .hxmu-r1 > .hxmu-go {grid-column:2 / 5; justify-self:start; border-left:0;}}
  :where(body.p-hero) .hxsrc {margin:20px 0 20px; font-size:11.5px; color:var(--mut);}
  @media (max-width:640px) { :where(body.p-hero) .hxwr {width:48px;}}/* ==================== catalog.php ==================== */
html:has(body.p-catalog) { overflow-x:hidden; }

  body:where(.p-catalog) { --bg:#0e1116; --card:#171c24; --line:#242c38; --txt:#e8ecf2; --mut:#8b96a5;
          --err:#e6482e; --err2:#ff6a4d; --ok:#39c26d;
          /* двухцветка 10.07: лайм = действия/активное, оранжевый = цены/замки */
          --brand:#c5f02b; --brand2:#d9ff56; --onbrand:#10130a; }
  :where(body.p-catalog) * { margin:0; padding:0; box-sizing:border-box; }body:where(.p-catalog) { overflow-x:hidden; }
  body:where(.p-catalog) { background:var(--bg); color:var(--txt); font:16px/1.55 'Inter',sans-serif; min-height:100vh; }
  :where(body.p-catalog) h1, :where(body.p-catalog) h2 { font-family:'Oswald',sans-serif; }
  /* ================= РЕДИЗАЙН 2.0 (мобильный аудит, 12.07) ================= Канон шапки/дровера/футера — копия блока из index.php (только нужные классы). Старая шапка .top/.logo/.navbtn удалена: админ-кнопки и «Выйти» переехали в дровер за ключом, юзерские вкладки — в строку 2 шапки. */
  /* ── ШАПКА (uhead/urow1/ulogo/uact/uibtn/uava/ukey/ubadge/admdesk) переехала в /css/header.css (Фаза В). Ниже — только страничное. ── */
  /* «вид как» — выпадающий список (Вова 12.07): в шапке кнопка «Вид ▾», варианты выезжают по клику, а не стоят три в ряд */
  :where(body.p-catalog) .admview { position:relative; display:inline-flex; flex:none; }
  :where(body.p-catalog) .admview .avbtn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px;
                    border:1px solid var(--line); border-radius:8px; background:transparent;
                    color:var(--mut); font:600 12px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; }
  :where(body.p-catalog) .admview .avbtn:hover { border-color:#3d4a5e; color:var(--txt); }
  :where(body.p-catalog) .admview .avbtn .avarr { font-size:9px; }
  :where(body.p-catalog) .admview .avlist { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:160;
                     background:var(--card); border:1px solid var(--line); border-radius:10px;
                     padding:4px; min-width:132px; flex-direction:column;
                     box-shadow:0 10px 26px rgba(0,0,0,.45); }
  :where(body.p-catalog) .admview.open .avlist { display:flex; }
  :where(body.p-catalog) .admview .avlist span { padding:7px 12px; font-size:12px; font-weight:600; color:var(--mut);
                          cursor:pointer; border-radius:7px; white-space:nowrap; }
  :where(body.p-catalog) .admview .avlist span:hover { color:var(--txt); }
  :where(body.p-catalog) .admview .avlist span.on { background:var(--brand); color:var(--onbrand); }
  /* ── kbadge/usteam/urow2/utab/utab.on переехали в /css/header.css (Фаза В) ── */
  /* дровер служебной навигации админа («бургер в шапке», решение аудита C) */
  /* .svnum → /css/header.css (Фаза В) */
  :where(body.p-catalog) .aseg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  :where(body.p-catalog) .aseg span { padding:5px 11px; font-size:11.5px; font-weight:600; color:var(--mut); cursor:pointer; }
  :where(body.p-catalog) .aseg span.on { background:var(--brand); color:var(--onbrand); font-weight:700; }
  /* сетка мобилы (README): поля экрана 14px */
  @media (max-width:920px) { :where(body.p-catalog) .wrap { padding-left:14px; padding-right:14px; }}
  :where(body.p-catalog) .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
  :where(body.p-catalog) .hint { color:var(--mut); font-size:13.5px; }
  /* фильтры одной строкой, селекты в стиле поиска */
  /* (30.07, хвост 14.6) ряд фильтров держится в ОДНУ строку: было flex-wrap:wrap
           и ряд рвался на 2-3 строки. Стало nowrap + горизонтальный скролл самого ряда
           на узких экранах — паттерн скопирован с .urow2 из /css/header.css (скрытый
           скроллбар, flex:none на элементах, выше порога overflow снова visible).
           Порог поднят с 921px до 1240px: ряд фильтров шире таб-ряда, до 1240px он
           физически не влезает в .wrap, и без скролла лез бы за края. */
  :where(body.p-catalog) .fbar { display:flex; gap:10px; flex-wrap:nowrap; align-items:flex-end; margin-bottom:6px;
          position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  :where(body.p-catalog) .fbar::-webkit-scrollbar { display:none; }
  :where(body.p-catalog) .fbar > * { flex:none; }
  /* (30.07, финал) правила «выше 1240px overflow:visible» БОЛЬШЕ НЕТ. Оно
           резало ряд по краю .wrap на окнах 1240-1320px (html,body{overflow-x:hidden}),
           и «Показать» с «× сброс» становились недоступны вообще — полосы-то нет.
           Теперь ряд всегда скроллер; если он влезает, скролла и не видно. */
  /* пока открыта выпадашка героя/позиции — клип скроллера снимаем, иначе список
           обрезался бы по высоте ряда (ниже 1240px .psel/.hsel отвязаны от кнопки и
           висят под всем рядом, см. медиа-блок у .hsel-l).
           (30.07, хвост 14.6, доводка) РАБОЧЕЕ правило — .fbar.fbar-open: класс ставит
           JS в том же обработчике, где выпадашка переключает hidden. Вариант с :has()
           оставлен дублем для современных браузеров; без него (Firefox до 121, старые
           вебвью) «Герой» и «Позиция» были бы обрезаны высотой ряда и недоступны. */
  /* (30.07, финал) дубль на :has() УБРАН. Он выглядел страховкой, а на деле мешал:
           браузер применял его РАНЬШЕ, чем JS успевал запомнить scrollLeft, и позиция
           ряда всегда сохранялась как 0. Класс .fbar-open работает во всех браузерах,
           включая те, где :has() нет. */
  :where(body.p-catalog) .fbar.fbar-open { overflow:visible; }
  :where(body.p-catalog) .fbar label { font:600 11.5px 'Inter',sans-serif; color:var(--mut); text-transform:uppercase;
                letter-spacing:.06em; display:block; margin-bottom:5px; }
  /* min-width ужат до 118px: шесть селектов + кнопка держатся в одну строку на десктопе (Вова 08.07) */
  :where(body.p-catalog) .fbar select { min-width:118px; padding:8px 10px; border-radius:8px; border:1px solid var(--line);
                 background:#0b0e13; color:var(--txt); font:13.5px 'Inter',sans-serif; }
  :where(body.p-catalog) .fbar .go { background:var(--brand); border:0; color:var(--onbrand); padding:9px 20px; border-radius:8px;
              cursor:pointer; font:600 14px 'Inter',sans-serif; }
  :where(body.p-catalog) .fbar .go:hover { background:var(--brand2); }
  :where(body.p-catalog) .fbar a.reset { color:var(--mut); font-size:13.5px; padding:9px 4px; }
  /* (окно №34) psel (позиция) + hsel (герой с поиском): иконки видны и в списке */
  :where(body.p-catalog) .rico { width:13px; height:13px; object-fit:contain; opacity:.9; display:inline-block; }
  :where(body.p-catalog) .psel, :where(body.p-catalog) .hsel { position:relative; display:inline-block; }
  :where(body.p-catalog) .psel-b, :where(body.p-catalog) .hsel-b { display:inline-flex; align-items:center; gap:6px; background:#0b0e13; border:1px solid var(--line);
        border-radius:8px; color:var(--txt); padding:8px 10px; font:13.5px 'Inter',sans-serif; cursor:pointer;
        transition:border-color .15s; min-width:118px; }
  :where(body.p-catalog) .psel-b:hover, :where(body.p-catalog) .hsel-b:hover { border-color:#3d4a5e; }
  :where(body.p-catalog) .psel-b:focus-visible, :where(body.p-catalog) .hsel-b:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
  :where(body.p-catalog) .psel-ar { color:var(--mut); font-size:10px; margin-left:auto; }
  :where(body.p-catalog) .psel-l, :where(body.p-catalog) .hsel-p { position:absolute; top:calc(100% + 4px); left:0; z-index:85; background:#12161d; border:1px solid #333d4c;
        border-radius:10px; padding:4px; min-width:100%; width:max-content; display:flex; flex-direction:column;
        box-shadow:0 10px 26px rgba(0,0,0,.45); }
  :where(body.p-catalog) .psel-l[hidden], :where(body.p-catalog) .hsel-p[hidden] { display:none !important; } /* грабля окна №32: flex перебивал hidden */
  :where(body.p-catalog) .psel-l button, :where(body.p-catalog) .hsel-l button { display:flex; align-items:center; gap:7px; background:none; border:0; color:var(--mut);
        border-radius:7px; padding:7px 12px; font:600 13px 'Inter',sans-serif; cursor:pointer; text-align:left; white-space:nowrap; }
  :where(body.p-catalog) .psel-l button:hover, :where(body.p-catalog) .hsel-l button:hover { color:var(--txt); background:rgba(255,255,255,.06); }
  :where(body.p-catalog) .psel-l .rico { margin-right:0; }
  :where(body.p-catalog) .pselc { margin-left:auto; padding-left:10px; color:#5b6674; font-weight:400; font-size:11px; }
  :where(body.p-catalog) .hsel-p { padding:6px; min-width:max(100%, 240px); }
  :where(body.p-catalog) .hsel-q { width:100%; background:#0b0e13; border:1px solid var(--line); border-radius:7px; color:var(--txt);
        padding:6px 9px; font:600 12.5px 'Inter',sans-serif; margin-bottom:5px; box-sizing:border-box; }
  :where(body.p-catalog) .hsel-q:focus { outline:none; border-color:var(--brand); }
  :where(body.p-catalog) .hsel-l { max-height:290px; overflow:auto; display:flex; flex-direction:column; }
  /* (30.07, хвост 14.6) было flex:1 «растянуть на строку» — наследие wrap-раскладки;
           при nowrap это сплющивало кнопки. Ширина — по содержимому, ряд скроллится. */
  @media (max-width:700px) { :where(body.p-catalog) .psel, :where(body.p-catalog) .hsel { flex:none; } :where(body.p-catalog) .psel-b, :where(body.p-catalog) .hsel-b { width:auto; }}
  /* (30.07, хвост 14.6) ниже 1240px ряд — скроллер, поэтому выпадашки цепляем не к
           кнопке, а к самому .fbar (position:relative у него): список открывается под всем
           рядом и всегда в пределах экрана.
           (30.07, хвост 14.6, доводка) БЫЛО написано «не уезжает вместе с горизонтальным
           скроллом» — это неправда: абсолютный попап лежит внутри скроллера и едет вместе
           с содержимым. Просто в момент, когда мы снимаем overflow, браузер обнуляет
           scrollLeft, поэтому ряд визуально возвращается в начало. Позицию скролла мы
           теперь сохраняем и возвращаем руками в JS (fbarSync).
           (30.07, хвост 14.6, доводка) ДЕФЕКТ 3: у .psel-l/.hsel-p остался min-width:100%,
           а при position:static эти 100% считаются от .fbar (~1000px), и список из шести
           позиций растягивался на всю ширину ряда. Ширина — строго по содержимому. */
  @media (max-width:1239px) {
    :where(body.p-catalog) .psel, :where(body.p-catalog) .hsel { position:static; }
    :where(body.p-catalog) .psel-l, :where(body.p-catalog) .hsel-p { left:0; right:auto; min-width:0; width:max-content; max-width:100%; box-sizing:border-box; }
    :where(body.p-catalog) .hsel-p { min-width:240px; }}
  /* (30.07, хвост 14.6, доводка) ДЕФЕКТ 2: на 700–1239px скроллбар был спрятан
           (scrollbar-width:none), и мышиный юзер на 1024px просто не видел «Просмотр»,
           «Новизну» и «Показать» — ни полосы, ни подсказки. Два шага, оба без магии:
           1) ряд поджат (gap, паддинги, шрифт, min-width контролов), чтобы физически
              влезать примерно в 950px, то есть в ноутбучные 1024 целиком;
           2) на всякий случай (длинные названия типов разбора, окно 800px) мышиному
              юзеру скроллбар ВОЗВРАЩАЕМ — тонкая полоса под рядом честно показывает,
              что ряд едет. Тач-устройства не трогаем: там скролл пальцем и полоса
              лишняя. padding-bottom держим всегда в этом диапазоне, иначе при открытии
              выпадашки (overflow:visible убирает полосу) ряд дёргался бы по высоте. */
  @media (min-width:701px) and (max-width:1239px) {
    :where(body.p-catalog) .fbar { gap:7px; }
    :where(body.p-catalog) .fbar label { font-size:10.5px; margin-bottom:4px; }
    :where(body.p-catalog) .fbar select, :where(body.p-catalog) .psel-b, :where(body.p-catalog) .hsel-b { min-width:0; padding:7px 8px; font-size:12.5px; }
    :where(body.p-catalog) .fbar .go { padding:8px 14px; font-size:13px; }
    :where(body.p-catalog) .fbar a.reset { font-size:12.5px; padding:8px 2px; }}
  /* (30.07, финал) убрано ограничение max-width:1239px: ряд теперь скроллер на
           любой ширине, и мышиному юзеру полоса нужна везде, где ряд не влез */
  @media (hover:hover) and (pointer:fine) {
    :where(body.p-catalog) .fbar { scrollbar-width:thin; scrollbar-color:#3d4a5e transparent; padding-bottom:6px; }
    :where(body.p-catalog) .fbar::-webkit-scrollbar { display:block; height:8px; }
    :where(body.p-catalog) .fbar::-webkit-scrollbar-track { background:transparent; }
    :where(body.p-catalog) .fbar::-webkit-scrollbar-thumb { background:#3d4a5e; border-radius:4px; }}
  /* СЕТКА 2 КОЛОНКИ (редизайн v2, 10.07): вместо «простыни» карточек во всю ширину — на экране 4-6 роликов вместо 1.5; на мобиле одна колонка. align-items:start — раскрытая секция не растягивает соседнюю карточку. */
  :where(body.p-catalog) .catgrid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; align-items:start; }
  @media (max-width:900px) { :where(body.p-catalog) .catgrid { grid-template-columns:1fr; }}
  /* ============ карточка ролика — макет M5 (редизайн 2.0, 12.07) ============ Было: 2-3 строки заголовка + 5-6 разноцветных бейджей + кнопки в строку. Стало: превью с бейджами НА нём → заголовок 2 строки → мета одной строкой → синие теги героев (легаси-исключение) → грид кнопок 2×2. */
  :where(body.p-catalog) .vid { background:var(--card); border:1px solid var(--line); border-radius:14px;
         padding:18px; overflow-wrap:anywhere; }
  /* (Вова 12.07) заголовок теперь НАД превью — верхний отступ не нужен */
  /* (Вова, окно №11) название ролика ЦЕЛИКОМ: клампа на 2 строки не хватало — теперь до 3 строк, на мобиле шрифт чуть меньше, чтобы влезало */
  :where(body.p-catalog) .vid h3 { font:600 14.5px/1.4 'Inter',sans-serif; margin:0 0 4px;
            display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  @media (max-width:640px) { :where(body.p-catalog) .vid h3 { font-size:13.5px; }}
  /* (Вова, окно №11) строка «Показано N из M…» на мобиле: каждое предложение с новой строки */
  @media (max-width:640px) { :where(body.p-catalog) .catstat span { display:block; margin-top:2px; }}
  /* мета одной строкой: «патч 7.41d · 10.07.2026» — ММР УБРАН из меты (Вова, окно №25: рейтинг и так пишется в названии ролика, дубль) */
  :where(body.p-catalog) .vmeta { font-size:12px; color:var(--mut); margin-bottom:8px; }
  :where(body.p-catalog) .badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
  /* (окно №25, аудит красоты) теги героев уведены из легаси-синего #7fb1ff в серые капсулы (анти-находка А3: синий был пятым цветом на карточке) */
  :where(body.p-catalog) .bdg { font-size:11.5px; padding:3px 10px; border-radius:13px; border:1px solid var(--line);
         color:var(--mut); }
  :where(body.p-catalog) .bdg.hero { border-color:var(--line); color:var(--txt); }
  /* ленивый плеер: превью с кнопкой, iframe рождается по клику */
  :where(body.p-catalog) .ply { position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
         background:#000; cursor:pointer; }
  :where(body.p-catalog) .ply img { width:100%; height:100%; object-fit:cover; opacity:.85; }
  :where(body.p-catalog) .ply .pbtn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  /* кнопка play по M5: круг 46px, лайм .92, треугольник #10130a (=onbrand) */
  :where(body.p-catalog) .ply .pbtn span { background:rgba(197,240,43,.92); color:var(--onbrand); border-radius:50%; width:46px; height:46px;
                    display:flex; align-items:center; justify-content:center; font-size:17px; padding-left:4px; }
  :where(body.p-catalog) .ply:hover .pbtn span { background:var(--brand2); }
  :where(body.p-catalog) .ply iframe { width:100%; height:100%; border:0; }
  /* ряд скорости — КАНОН поиска (окно №8): те же классы, та же память yk_rate */
  :where(body.p-catalog) .spdrow { display:flex; align-items:center; gap:6px; margin-top:10px; flex-wrap:wrap; }
  :where(body.p-catalog) .spdlbl { color:var(--mut); font-size:12.5px; margin-right:2px; }
  :where(body.p-catalog) .spdchip { padding:3px 10px; border:1px solid var(--line); border-radius:999px; font-size:12.5px;
             color:var(--mut); cursor:pointer; }
  :where(body.p-catalog) .spdchip:hover { border-color:var(--brand); color:var(--txt); }
  :where(body.p-catalog) .spdchip.on { background:var(--brand); color:var(--onbrand); border-color:var(--brand); font-weight:600; }
  /* МИНИ-ПЛЕЕР (окно №21, перенос из поиска окна №8): играющий ролик при скролле уезжает фикс-плашкой в правый нижний угол (левее кнопки ↑), z-index 150. Место в карточке держит aspect-ratio самой .ply. */
  :where(body.p-catalog) .ply.mini iframe { position:fixed; right:72px; bottom:16px; width:var(--mw, 340px) !important;
                     height:calc(var(--mw, 340px) * 0.5625) !important; z-index:150; border-radius:10px;
                     border:1px solid var(--line); box-shadow:0 10px 32px rgba(0,0,0,.55);
                     transform:translate(var(--mx, 0px), var(--my, 0px)); transition:none; }
  /* прозрачная плёнка поверх плашки: зажал в любом месте — тащишь, клик — пауза (сам ютуб-iframe мышь не отдаёт, поэтому ловим поверх него) */
  :where(body.p-catalog) .ply .minidrag { display:none; }
  /* (фикс 20.07) плёнка накрывает только ВЕРХНИЕ 55% плашки: нижние 45% отданы самому ютубу — таймлайн, громкость и кнопка «раскрыть» (fullscreen) снова кликабельны. Клик по нижней части = YT сам ставит паузу. Зеркально index.php — правь оба. */
  :where(body.p-catalog) .ply.mini .minidrag { display:block; position:fixed; right:72px;
                     bottom:calc(16px + var(--mw, 340px) * 0.5625 * 0.45);
                     width:var(--mw, 340px); height:calc(var(--mw, 340px) * 0.5625 * 0.55); z-index:151;
                     background:transparent; cursor:grab; touch-action:none;
                     transform:translate(var(--mx, 0px), var(--my, 0px)); transition:none; }
  :where(body.p-catalog) .ply .minix, :where(body.p-catalog) .ply .minip { display:none; }   /* (фикс 20.07) ⠿ minig убрана */
  :where(body.p-catalog) .ply.mini .minix, :where(body.p-catalog) .ply.mini .minip { display:flex; align-items:center; justify-content:center;
                     position:fixed; bottom:calc(var(--mw, 340px) * 0.5625 - 16px); z-index:152;
                     width:30px; height:30px; border-radius:50%; background:#1a212c; color:var(--txt);
                     border:1px solid var(--line); cursor:pointer; font-size:15px; line-height:1; padding:0;
                     transform:translate(var(--mx, 0px), var(--my, 0px)); transition:none; }
  :where(body.p-catalog) .ply.mini .minix { right:78px; }
  :where(body.p-catalog) .ply.mini .minip { right:114px; }
  :where(body.p-catalog) .ply .minix:hover { border-color:var(--err, #e6482e); color:var(--err, #e6482e); }
  :where(body.p-catalog) .ply .minip:hover { border-color:var(--brand); color:var(--brand); }
  :where(body.p-catalog) .minip .ic-play { display:none; }
  :where(body.p-catalog) .ply.paused .minip .ic-pause { display:none; }
  :where(body.p-catalog) .ply.paused .minip .ic-play { display:block; }
  /* бейджи НА превью (M5): слева-сверху тип, справа-сверху «✓ просмотрено». Длительности ролика в базе нет — этот бейдж честно не рисуем. */
  :where(body.p-catalog) .pvbdg { position:absolute; font-size:11px; line-height:1; padding:4px 8px; border-radius:7px;
           background:rgba(14,17,22,.85); border:1px solid var(--line); color:var(--txt); }
  :where(body.p-catalog) .pvtype { top:8px; left:8px; }
  :where(body.p-catalog) .pvseen { top:8px; right:8px; display:none; color:var(--ok); border-color:rgba(57,194,109,.4); }
  :where(body.p-catalog) .vid.viewed .pvseen { display:block; }
  /* (окно №25) «Продолжить с места»: бейдж снизу-слева + полоска прогресса по нижней кромке превью. Фикс «еле видно» (Вова): подложка почти глухая, текст белый покрупнее, стрелка и полоска — лаймовые (это прогресс юзера = ценность). Клики проходят сквозь (pointer-events:none). */
  :where(body.p-catalog) .pvcont { bottom:10px; left:8px; top:auto; pointer-events:none;
            background:rgba(10,12,16,.95); border-color:rgba(255,255,255,.22);
            color:#fff; font-size:12px; font-weight:600; padding:5px 10px; }
  :where(body.p-catalog) .pvcont b { color:var(--brand); font-weight:600; margin-right:2px; }
  :where(body.p-catalog) .pvbar { position:absolute; left:0; right:0; bottom:0; height:4px;
           background:rgba(0,0,0,.6); pointer-events:none; }
  :where(body.p-catalog) .pvbar i { display:block; height:4px; background:var(--brand); }
  :where(body.p-catalog) .lock { position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; align-items:center;
          justify-content:center; background:rgba(14,17,22,.82); text-align:center; padding:16px; }
  :where(body.p-catalog) .lock a { background:var(--brand); color:var(--onbrand); text-decoration:none; padding:10px 22px;
            border-radius:9px; font:600 14px 'Inter',sans-serif; }
  :where(body.p-catalog) .lock a:hover { background:var(--brand2); }
  /* (окно «ТИЗЕР-В-ЗАМКЕ», 05.08) замок с моментом. Раскладка — канон
       витрины отзывов (reviews.php, окно №21): видео на всю плитку, подпись
       момента полосой сверху, экран предложения поверх после конца. Второго
       вида плеера в проекте не заводим. */
  :where(body.p-catalog) .tzbox video { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; cursor:pointer; }
  /* (05.08) ЗАТЕМНЕНИЕ ПРЕВЬЮ до первого play (и когда домотали на 0):
       весь кадр гасим на 55%, текст «о чём момент» ложится поверх и читается
       без своей плашки. Как заиграло — плавно уходит. */
  :where(body.p-catalog) .tz-dim { position:absolute; inset:0; z-index:2; background:rgba(8,10,14,.55);
            opacity:0; transition:opacity .2s ease-in-out; pointer-events:none; }
  :where(body.p-catalog) .tzbox.atstart:not(.done) .tz-dim { opacity:1; }
  /* подпись момента — сверху над затемнением, БЕЗ своей плашки: фон даёт
       общее затемнение превью. padding-top 34: не наезжает на бейдж «Коучинг». */
  :where(body.p-catalog) .tz-intro { position:absolute; left:0; right:0; top:0; z-index:3; display:flex;
              align-items:flex-start; padding:34px 14px 24px; pointer-events:none;
              opacity:0; transition:opacity .2s ease-in-out; }
  :where(body.p-catalog) .tzbox.atstart:not(.done) .tz-intro { opacity:1; }
  :where(body.p-catalog) .tz-introt { color:#fff; font:600 14px/1.4 'Inter',sans-serif; text-shadow:0 1px 3px rgba(0,0,0,.7); }
  :where(body.p-catalog) .tz-cta { display:none; position:absolute; inset:0; z-index:6; flex-direction:column;
            align-items:center; justify-content:center; gap:11px; text-align:center;
            padding:16px; background:rgba(14,17,22,.93); }
  :where(body.p-catalog) .tzbox.done .tz-cta { display:flex; }
  :where(body.p-catalog) .tz-cta-t { font:600 15px/1.4 'Inter',sans-serif; max-width:360px; }
  :where(body.p-catalog) .tz-cta a { background:var(--brand); color:var(--onbrand); text-decoration:none;
              padding:10px 22px; border-radius:9px; font:600 14px 'Inter',sans-serif; }
  :where(body.p-catalog) .tz-cta a:hover { background:var(--brand2); }
  :where(body.p-catalog) .tzbox .pvbdg { z-index:4; }
  :where(body.p-catalog) .tz-again { font-size:12.5px; color:var(--mut); cursor:pointer; }
  :where(body.p-catalog) .tz-again:hover { color:var(--txt); }
  /* кнопка «играть» по центру — ТОЛЬКО картинка (pointer-events:none):
       клик ловит весь кадр, попадаешь с первого раза. Видна, пока стоим в начале. */
  :where(body.p-catalog) .tz-big { position:absolute; inset:0; margin:auto; z-index:5; pointer-events:none;
            width:54px; height:54px; border-radius:50%;
            background:rgba(197,240,43,.92); color:var(--onbrand); font-size:19px;
            display:none; align-items:center; justify-content:center; padding-left:3px; }
  :where(body.p-catalog) .tzbox.showbig .tz-big { display:flex; }
  :where(body.p-catalog) .tzbox:hover .tz-big { background:var(--brand2); }
  :where(body.p-catalog) .tz-ctrl { position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex;
             align-items:center; gap:9px; padding:9px 12px 10px;
             background:linear-gradient(0deg, rgba(10,13,18,.9) 0%, rgba(10,13,18,0) 100%);
             opacity:0; transition:opacity .15s ease-in-out; }
  :where(body.p-catalog) .tzbox:hover .tz-ctrl, :where(body.p-catalog) .tzbox.playing .tz-ctrl { opacity:1; }
  :where(body.p-catalog) .tzbox.done .tz-ctrl { opacity:0 !important; pointer-events:none; }
  :where(body.p-catalog) .tz-pp, :where(body.p-catalog) .tz-mute { background:transparent; border:0; color:#fff; cursor:pointer;
             padding:0; display:inline-flex; align-items:center; justify-content:center; line-height:0; }
  :where(body.p-catalog) .tz-pp { font-size:14px; width:18px; }
  /* полоса времени: тянется мышкой (не только клик). Толще при наведении,
       кружок-бегунок виден всегда — так понятнее, что её можно двигать. */
  :where(body.p-catalog) .tz-seek { flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.28);
             cursor:pointer; position:relative; touch-action:none; }
  :where(body.p-catalog) .tz-seek-b { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:3px; background:rgba(255,255,255,.3); }
  :where(body.p-catalog) .tz-seek-f { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:3px; background:var(--brand); }
  :where(body.p-catalog) .tz-seek-f::after { content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
             width:12px; height:12px; border-radius:50%; background:var(--brand); box-shadow:0 1px 3px rgba(0,0,0,.5); }
  :where(body.p-catalog) .tz-time { color:#fff; font:600 12px 'Inter',sans-serif; white-space:nowrap; font-variant-numeric:tabular-nums; }
  /* СКОРОСТЬ: кнопка «1×» + выпадающее меню над ней; активная — лаймовая */
  :where(body.p-catalog) .tz-ratewrap { position:relative; display:inline-flex; }
  :where(body.p-catalog) .tz-rate { background:transparent; border:0; color:#fff; cursor:pointer; padding:0 2px;
             font:600 12px 'Inter',sans-serif; white-space:nowrap; line-height:1; }
  :where(body.p-catalog) .tz-rates { display:none; position:absolute; bottom:calc(100% + 8px); right:0; z-index:9;
             background:#12161d; border:1px solid var(--line); border-radius:9px; padding:5px;
             box-shadow:0 8px 24px rgba(0,0,0,.5); max-height:min(46vh, 220px); overflow:auto; }
  :where(body.p-catalog) .tz-ratewrap.open .tz-rates { display:block; }
  :where(body.p-catalog) .tz-rates button { display:block; width:100%; text-align:left; background:transparent; border:0;
             color:var(--txt); cursor:pointer; padding:5px 14px; border-radius:6px; font:600 12.5px 'Inter',sans-serif; white-space:nowrap; }
  :where(body.p-catalog) .tz-rates button:hover { background:rgba(255,255,255,.08); }
  :where(body.p-catalog) .tz-rates button.on { color:var(--onbrand); background:var(--brand); }
  /* СУБТИТРЫ: кнопка CC, лаймовая рамка когда включены */
  :where(body.p-catalog) .tz-cc { background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff; cursor:pointer;
           border-radius:4px; font:700 10px 'Inter',sans-serif; line-height:1; padding:3px 4px; letter-spacing:.5px;
           white-space:nowrap; flex:none; }
  :where(body.p-catalog) .tzbox.tz-cc-on .tz-cc { border-color:var(--brand); color:var(--onbrand); background:var(--brand); }
  /* фокус кадра (для горячих клавиш) без рамки — не пугать обводкой */
  :where(body.p-catalog) .tzbox:focus, :where(body.p-catalog) .tzbox:focus-visible { outline:none; }
  /* ГРОМКОСТЬ: динамик (мьют) + ползунок. Ползунок ВСЕГДА на месте
       фиксированной ширины — раньше он выкатывался на наведении и панель
       прыгала на вторую строку. */
  :where(body.p-catalog) .tz-volwrap { display:inline-flex; align-items:center; gap:6px; flex:none; }
  :where(body.p-catalog) .tz-mute .i-off { display:none; }
  :where(body.p-catalog) .tzbox.tz-muted .tz-mute .i-on { display:none; }
  :where(body.p-catalog) .tzbox.tz-muted .tz-mute .i-off { display:inline-flex; }
  :where(body.p-catalog) .tz-vol { -webkit-appearance:none; appearance:none; width:56px; height:5px; border-radius:3px;
            background:rgba(255,255,255,.35); cursor:pointer; flex:none; }
  :where(body.p-catalog) .tz-vol::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px;
            border-radius:50%; background:var(--brand); border:2px solid #0e1116; cursor:pointer; }
  :where(body.p-catalog) .tz-vol::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--brand);
            border:2px solid #0e1116; cursor:pointer; }
  /* САЙД-ПЛЕЕР (05.08): играющий клип при скролле уезжает плашкой в угол,
       как ролики в поиске. Место в карточке держит .tzhold.
       Тащить — за БОЛЬШУЮ зону .tz-drag (весь кадр выше панели), клик по ней =
       пауза; уголок ↖ .tz-size — менять размер; крестик — свернуть. Позиция и
       размер помнятся (yk_tz_pos / yk_tz_w). */
  :where(body.p-catalog) .tzhold { display:none; }
  :where(body.p-catalog) .tzbox.tzfloat { position:fixed; right:16px; bottom:16px; width:var(--tzw, 340px);
             height:calc(var(--tzw, 340px) * 0.5625);
             z-index:150; border-radius:10px; overflow:hidden; box-shadow:0 12px 34px rgba(0,0,0,.6);
             border:1px solid var(--line); transform:translate(var(--tzx,0px), var(--tzy,0px)); }
  /* В УГЛУ панель в ДВЕ строки: полоса времени отдельной строкой во всю
       ширину (её и не было видно в куче иконок), кнопки — под ней. Панель всегда
       видна — плеер маленький. */
  /* панель ВЫШЕ зоны перетаскивания (z-index 7 > .tz-drag 6): иначе плёнка
       перетаскивания легла бы на полосу времени и та не кликалась/не тянулась */
  :where(body.p-catalog) .tzbox.tzfloat .tz-ctrl { opacity:1; z-index:7; flex-wrap:wrap; gap:6px 6px; padding:7px 9px 9px; }
  :where(body.p-catalog) .tzbox.tzfloat .tz-seek { order:-1; flex-basis:100%; height:5px; }
  :where(body.p-catalog) .tzbox.tzfloat .tz-time { font-size:11.5px; }
  /* ползунок ужат, чтобы динамик+ползунок влезли в ту же строку, что и
       остальные кнопки, а не переносились вниз */
  :where(body.p-catalog) .tzbox.tzfloat .tz-vol { width:30px; }
  /* фикс-контролы не жмём в ноль и не переносим по буквам */
  :where(body.p-catalog) .tz-pp, :where(body.p-catalog) .tz-mute, :where(body.p-catalog) .tz-cc, :where(body.p-catalog) .tz-ratewrap, :where(body.p-catalog) .tz-time, :where(body.p-catalog) .tz-volwrap { flex:none; }
  :where(body.p-catalog) .tz-drag { display:none; }
  :where(body.p-catalog) .tzbox.tzfloat .tz-drag { display:block; position:absolute; left:0; right:0; top:0; bottom:42px;
             z-index:6; cursor:grab; }
  :where(body.p-catalog) .tzbox.tzfloat.tz-dragging .tz-drag { cursor:grabbing; }
  /* крестик в верхнем-правом углу плашки */
  :where(body.p-catalog) .tz-close { display:none; }
  :where(body.p-catalog) .tzbox.tzfloat .tz-close { display:flex; position:absolute; top:6px; right:6px; z-index:9;
             width:24px; height:24px; align-items:center; justify-content:center; cursor:pointer;
             border-radius:50%; background:rgba(14,17,22,.82); color:#fff; border:1px solid var(--line);
             font-size:13px; line-height:1; }
  :where(body.p-catalog) .tzbox.tzfloat .tz-close:hover { border-color:var(--err, #e6482e); color:var(--err, #e6482e); }
  /* уголок изменения размера — левый-верхний (правый-нижний занят панелью);
       плашка приклеена к правому-нижнему углу, растёт влево-вверх */
  :where(body.p-catalog) .tz-size { display:none; }
  :where(body.p-catalog) .tzbox.tzfloat .tz-size { display:block; position:absolute; left:0; top:0; z-index:9;
             width:20px; height:20px; cursor:nwse-resize; }
  :where(body.p-catalog) .tzbox.tzfloat .tz-size::before { content:''; position:absolute; left:5px; top:5px; width:8px; height:8px;
             border-left:2px solid rgba(255,255,255,.8); border-top:2px solid rgba(255,255,255,.8); }
  @media(max-width:640px) { :where(body.p-catalog) .tz-intro { padding:30px 12px 18px; }
                           :where(body.p-catalog) .tz-introt { font-size:13px; }
                           :where(body.p-catalog) .tz-cta-t { font-size:14px; }
                           :where(body.p-catalog) .tzbox.tzfloat { width:min(var(--tzw,300px), 88vw); }}
  /* «что разбиралось»: 4 кнопки-раскрывашки, по M5 — грид 2×2 (редизайн 2.0, 12.07); панель открывается ПОД кнопками, повторный клик сворачивает */
  :where(body.p-catalog) .secbar { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
  :where(body.p-catalog) .secbtn { background:transparent; border:1px solid var(--line); color:var(--txt); height:40px;
            padding:0 8px; border-radius:9px; cursor:pointer; font:600 12.5px 'Inter',sans-serif;
            display:inline-flex; align-items:center; justify-content:center; transition:all .15s; }
  :where(body.p-catalog) .secbtn svg { color:var(--mut); }
  :where(body.p-catalog) .secbtn:hover { border-color:#3d4a5e; }
  :where(body.p-catalog) .secbtn.on { border-color:var(--brand); color:var(--brand); background:rgba(197,240,43,.08); }
  :where(body.p-catalog) .secbtn.on svg { color:var(--brand); }
  :where(body.p-catalog) .secpane { display:none; margin-top:10px; padding:12px 14px; border:1px solid var(--line);
             border-radius:10px; font-size:14px; }
  :where(body.p-catalog) .secpane ul { margin:0; padding-left:18px; color:var(--txt); }
  :where(body.p-catalog) .secpane li { margin:5px 0; }
  /* темы по таймкодам БЕЗ маркеров-точек (Вова 10.07): строки и так кликабельные с заливкой — точки только шумели */
  :where(body.p-catalog) .secpane[data-k="tm"] ul { list-style:none; padding-left:0; }
  :where(body.p-catalog) .tc { color:var(--err2); font-variant-numeric:tabular-nums; text-decoration:none; }
  :where(body.p-catalog) a.tc:hover { text-decoration:underline; }
  /* КЛИКАБЕЛЬНАЯ ВСЯ СТРОКА ТЕМЫ (Вова 10.07): раньше жать надо было точно в таймкод — теперь клик по любому месту пункта включает нужный момент. При ховере — мягкая заливка строки (просьба Вовы: «на 20%») */
  :where(body.p-catalog) .tcrow { cursor:pointer; border-radius:6px; padding:2px 6px; margin-left:-6px;
           transition:background .12s; }
  :where(body.p-catalog) .tcrow:hover { color:var(--txt); background:rgba(139,150,165,.2); }
  :where(body.p-catalog) .tcrow:hover .tc { text-decoration:underline; }
  /* тизер фри-юзера: видно, что за замком ещё есть мясо */
  :where(body.p-catalog) .teas { margin-top:10px; padding:8px 12px; border:1px dashed var(--line); border-radius:8px;
          font-size:13px; color:var(--mut); }
  :where(body.p-catalog) .teas a { color:var(--err2); }
  /* .bdg.seen удалён (редизайн 2.0, 12.07): «✓ просмотрено» переехал НА превью бейджем .pvseen, включается классом .viewed на карточке */
  /* просмотренный ролик: лёгкая зелёная рамка + чуть приглушённый заголовок, заметно, но не кричит (Вова 08.07) */
  :where(body.p-catalog) .vid.viewed { border-color:rgba(57,194,109,.35); }
  :where(body.p-catalog) .vid.viewed h3 { opacity:.75; }
  /* карточки за кнопкой «Показать ещё»: !important, чтобы фильтр «Просмотр» инлайновым display их случайно не раскрыл */
  :where(body.p-catalog) .vid.bh { display:none !important; }
  :where(body.p-catalog) #catMore { background:var(--brand); border:0; color:var(--onbrand); padding:12px 20px; border-radius:8px;
             font:600 15px 'Inter',sans-serif; }
  :where(body.p-catalog) #catMore:hover { background:var(--brand2); }
  /* кнопка «наверх»: база длинная, скроллить обратно тяжко (Вова 08.07) */
  :where(body.p-catalog) #toTop { position:fixed; right:22px; bottom:22px; z-index:60; display:none;
           width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
           background:var(--card); color:var(--txt); font-size:19px; cursor:pointer; }
  :where(body.p-catalog) #toTop:hover { background:#2c3543; border-color:#3d4a5e; color:#fff; }
  /* (30.07, хвост 14.6) было flex:1 — с nowrap селекты сплющивались в ноль;
           ширина по содержимому, узкий экран берёт фильтры горизонтальным скроллом ряда */
  @media (max-width:700px) { :where(body.p-catalog) .fbar select { min-width:130px; flex:none; }}
/* добивка карточки разбора (фаза 3.4) */
/* ==== catalog.php, редизайн 3.4 — добавка. Скоуп :where(body.p-catalog) навесит окно ==== */

/* МЕДИА ВО ВСЮ ШИРИНУ КАРТОЧКИ. Общий .card-media считает padding 20px, у .vid он 18. */
:where(body.p-catalog) .vid .card-media { margin:0 -18px 14px; width:calc(100% + 36px); }
:where(body.p-catalog) .vid .card-media:first-child { margin-top:-18px; }
:where(body.p-catalog) .ply.card-media { border-radius:0; }
:where(body.p-catalog) .ply.card-media:first-child { border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden; }
/* клип, уехавший в угол экрана, шириной карточки уже не управляется */
:where(body.p-catalog) .vid .card-media.tzfloat { margin:0; width:var(--tzw, 340px); }
@media (max-width:640px) {
  :where(body.p-catalog) .vid .card-media { margin:0 -18px 12px; width:calc(100% + 36px); }
  :where(body.p-catalog) .vid .card-media:first-child { margin-top:-18px; }}

/* ДЛИТЕЛЬНОСТЬ РАЗБОРА — цифра в углу превью */
:where(body.p-catalog) .pvdur { bottom:8px; right:8px; top:auto; font-variant-numeric:tabular-nums; color:var(--n100); }
:where(body.p-catalog) .lock.lockbar ~ .pvdur { bottom:48px; }

/* ГЕРОЙ И ПОЗИЦИЯ — чипом с картинкой (отступ справа у картинки свой, инлайновый) */
:where(body.p-catalog) .bdg.hero, :where(body.p-catalog) .bdg.vpos { display:inline-flex; align-items:center; padding:3px 10px 3px 5px;
      color:var(--n100); border-color:var(--n700); }
:where(body.p-catalog) .bdg.hero img { border-radius:var(--r-sm); }
:where(body.p-catalog) .bdg.vpos .rico { width:15px; height:15px; margin-right:5px; }

/* ПЕЙВОЛ — НЕ СЕРАЯ ЗАГЛУШКА, А ТА ЖЕ ВЫДАЧА, ОБРЕЗАННАЯ: превью и бейджи на месте,
   снизу полка с цифрой остатка и одним лаймовым действием. */
:where(body.p-catalog) .ply .lock.lockbar { inset:auto 0 0 0; flex-direction:row; align-items:center;
      justify-content:space-between; gap:var(--sp-3); padding:10px 12px; text-align:left;
      background:linear-gradient(to top,
              color-mix(in srgb, var(--n950) 94%, transparent),
              color-mix(in srgb, var(--n950) 74%, transparent) 62%,
              color-mix(in srgb, var(--n950) 0%, transparent)); }
:where(body.p-catalog) .lockbar .lockn { display:inline-flex; align-items:center; gap:6px; min-width:0;
      color:var(--n100); font:600 12.5px/1.2 'Inter',sans-serif; font-variant-numeric:tabular-nums; }
:where(body.p-catalog) .lockbar .lockn svg { color:var(--acc); flex:none; }
:where(body.p-catalog) .lockbar a { padding:8px 16px; font-size:13px; white-space:nowrap; flex:none; }
@media (max-width:520px) {
  :where(body.p-catalog) .ply .lock.lockbar { flex-wrap:wrap; gap:6px; }
  :where(body.p-catalog) .lockbar .lockn { font-size:11.5px; }
  :where(body.p-catalog) .lockbar a { padding:7px 12px; font-size:12px; }}

/* «ЧТО ВНУТРИ» — СТРОКА ВКЛАДОК ВМЕСТО ЧЕТЫРЁХ ОДИНАКОВЫХ КНОПОК.
   Активная — оттенком базы знаний (--s-lib): второго лайма в карточке быть не должно. */
:where(body.p-catalog) .secbar.sectabs { display:flex; flex-wrap:wrap; gap:0 16px; margin-top:14px;
      border-top:1px solid var(--n700); padding-top:8px; }
:where(body.p-catalog) .secbtn.sectab { height:auto; padding:6px 0; gap:6px; background:transparent; border:0;
      border-bottom:2px solid transparent; border-radius:0; color:var(--n300);
      font:600 12.5px/1.2 'Inter',sans-serif; }
:where(body.p-catalog) .secbtn.sectab:hover { color:var(--n0); border-color:transparent; border-bottom-color:var(--n600); }
:where(body.p-catalog) .secbtn.sectab.on { color:var(--s-lib); background:transparent;
      border-color:transparent; border-bottom-color:var(--s-lib); }
:where(body.p-catalog) .secbtn.sectab.on svg { color:var(--s-lib); }
:where(body.p-catalog) .sectab b { font-weight:700; color:var(--n200); font-variant-numeric:tabular-nums; }
:where(body.p-catalog) .sectab.on b { color:var(--s-lib); }/* ==================== index.php ==================== */
html:has(body.p-index) { overflow-x:hidden; }
html:has(body.p-index) { overflow-anchor:none; }

  /* ДИЗАЙН-ТОКЕНЫ, двухцветка (Вова 10.07): --brand (фирменный лайм с лендинга) = главные кнопки, выбранные фильтры, прогресс, сводка; --err (красно-оранжевый) = ТОЛЬКО цены, пейволл, предупреждения. Правило «не радуга»: новых цветов не добавлять, брать из этих. */
  body:where(.p-index) { --bg:#0e1116; --card:#171c24; --line:#242c38; --txt:#e8ecf2; --mut:#8b96a5;
          --err:#e6482e; --err2:#ff6a4d; --ok:#39c26d;
          --brand:#c5f02b; --brand2:#d9ff56; --onbrand:#10130a; }
  :where(body.p-index) * { margin:0; padding:0; box-sizing:border-box; }body:where(.p-index) { overflow-x:hidden; }
  body:where(.p-index) { background:var(--bg); color:var(--txt); font:16px/1.55 'Inter',sans-serif; min-height:100vh; }
  :where(body.p-index) h1, :where(body.p-index) h2 { font-family:'Oswald',sans-serif; }
  /* шапка (фикс 08.07): лого не сжимается и не переносится на две строки, правый блок переносится строками сам; у админа кнопок много — им можно */
  :where(body.p-index) .top { display:flex; align-items:center; gap:12px; padding:8px 0 28px; flex-wrap:wrap; }
  :where(body.p-index) .logo { display:flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; font-size:20px;
          white-space:nowrap; flex-shrink:0;
          color:var(--txt); text-decoration:none; }
  :where(body.p-index) .logo img { width:36px; height:36px; border-radius:50%; }
  /* 10.07 (Вова: «растяни как в админке»): ряд юзера — ВСЕГДА отдельная строка во всю ширину шапки, «вид:» прилипает к левому краю под лого, «Выйти» уезжает вправо (margin-left:auto на самой кнопке) */
  :where(body.p-index) .userbox { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--mut);
             flex:1 1 100%; flex-wrap:wrap; justify-content:flex-start; row-gap:6px; }
  :where(body.p-index) .userbox img { width:30px; height:30px; border-radius:50%; }
  :where(body.p-index) .userbox a { color:var(--mut); }
  :where(body.p-index) .badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:13px; font-weight:600; }
  :where(body.p-index) .badge.sub { background:rgba(57,194,109,.15); color:var(--ok); }
  :where(body.p-index) .badge.free { background:rgba(230,72,46,.15); color:var(--err2); }
  :where(body.p-index) .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; }
  :where(body.p-index) .center { text-align:center; }
  :where(body.p-index) .login-buttons { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:22px; }
  :where(body.p-index) .btn { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:10px;
         border:0; font:600 15px 'Inter',sans-serif; cursor:pointer; text-decoration:none; }
  :where(body.p-index) .btn-discord { background:#5865F2; color:#fff; }
  /* главная кнопка теперь фирменный лайм с тёмным текстом (двухцветка 10.07) */
  :where(body.p-index) .btn-acc { background:var(--brand); color:var(--onbrand); }
  :where(body.p-index) .btn-acc:hover { background:var(--brand2); }
  :where(body.p-index) .searchrow { display:flex; gap:10px; margin-top:18px; }
  :where(body.p-index) .searchrow input { flex:1; padding:14px 16px; border-radius:10px; border:1px solid var(--line);
                     background:#0b0e13; color:var(--txt); font:15px 'Inter',sans-serif; }
  :where(body.p-index) .searchrow input:focus { outline:none; border-color:var(--brand); }
  :where(body.p-index) .hint { color:var(--mut); font-size:14px; margin-top:10px; }
  :where(body.p-index) .status { margin-top:16px; color:var(--mut); font-size:15px; min-height:22px; }
  /* Липкость/сворачивание карточки поиска УБРАНЫ (Вова 18.07): обычный блок, уезжает со страницей; возврат к поиску — стрелка ↑ в углу (#searchFab). */
  :where(body.p-index) .searchcard { position:static; border-radius:14px; }
  /* (окно подборок, 21.07) пришли по ссылке «умный поиск» из ЛК коучинга (#search): карточка поиска коротко «дышит» зелёным — канон ind-focusGlow, как бейдж→#sub и аватар→#profile в профиле (окно №20). */
  @keyframes ind-focusGlow {
    0%   { box-shadow:0 0 0 0 rgba(197,240,43,0); }
    12%  { box-shadow:0 0 0 3px rgba(197,240,43,.35), 0 0 30px 6px rgba(197,240,43,.5); border-color:var(--brand); }
    100% { box-shadow:0 0 0 0 rgba(197,240,43,0); }
  }
  :where(body.p-index) .searchcard.ind-focusGlow { animation:ind-focusGlow 1.9s ease-out; }
  /* при скролле вниз прячется ПОЛНОСТЬЮ (Вова 10.07: краешек был невнятным); вернуть — просто скролл чуть вверх */
  :where(body.p-index) .searchcard.folded { transform:translateY(-105%); }
  :where(body.p-index) .searchcard.notrans { transition:none; }  /* легаси, анимации больше нет */
  :where(body.p-index) .result { background:var(--card); border:1px solid var(--line); border-radius:14px;
            padding:20px; margin-top:16px; }
  :where(body.p-index) .result h3 { font:600 16px 'Inter',sans-serif; margin-bottom:6px; }
  :where(body.p-index) .result .time { color:var(--err2); font-weight:700; }
  :where(body.p-index) .result p { color:var(--mut); font-size:14.5px; margin:8px 0 12px; }
  /* плеер во всю ширину карточки, без полей по краям (Вова 09.07); height:auto ОБЯЗАТЕЛЕН: без него у ютуб-iframe остаётся высота 360px из атрибута и видео получает чёрные полосы по бокам */
  :where(body.p-index) .result iframe { display:block; width:calc(100% + 40px); height:auto; margin:0 -20px;
                   aspect-ratio:16/9; border:0; border-radius:0; }
  /* шапка ролика: заголовок + чип патча */
  :where(body.p-index) .vhead { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
  :where(body.p-index) .vhead h3 { margin:0; font:600 16px 'Inter',sans-serif; flex:1 1 300px; min-width:0; }
  :where(body.p-index) .patchchip { flex:0 0 auto; white-space:nowrap; font-size:12px; color:var(--mut);
               border:1px solid var(--line); padding:3px 10px; border-radius:12px; margin-top:1px; }
  :where(body.p-index) .patchchip.old { color:#e6a72e; border-color:rgba(230,167,46,.55); }
  /* релевантность (фри-тариф): полоска под заголовком + пояснение простым языком. Полоска на всю ширину — на мобилке смотрится так же аккуратно */
  :where(body.p-index) .relstrip { height:3px; border-radius:2px; margin:0 0 6px; }
  :where(body.p-index) .relstrip.high { background:var(--ok); }
  :where(body.p-index) .relstrip.own { background:var(--err2); }  /* оранжевый: «твоя позиция» — разборов мало, показываем первым */
  :where(body.p-index) .relstrip.low { background:#a9b9c9; }  /* холодный светло-серый: не сливается с текстом подсказок */
  /* (окно №25, аудит красоты) «N% совпадение» на ОТКРЫТЫХ карточках — раньше процент видели только в закрытых тизерах, «ага»-момент шёл без цифры. Тихая капсула (канон .mmr витрины), лайм + блик — ТОЛЬКО у топ-1 выдачи: одна светящаяся вещь на экран, и она про ценность. */
  :where(body.p-index) .rel { display:inline-flex; align-items:center; gap:4px; background:var(--card);
         border:1px solid var(--line); border-radius:20px; padding:2px 10px;
         font-size:12px; font-weight:600; color:var(--mut); white-space:nowrap;
         flex:none; position:relative; overflow:hidden; }
  :where(body.p-index) .rel b { color:var(--mut); font-weight:800; }
  :where(body.p-index) .rel.top b { color:var(--brand); }
  :where(body.p-index) .rel::after { content:''; position:absolute; top:0; bottom:0; left:-40%; width:35%;
         transform:skewX(-20deg); opacity:0; pointer-events:none;
         background:linear-gradient(90deg, transparent, rgba(217,255,86,.28), transparent); }
  :where(body.p-index) .result:hover .rel.top::after { animation:ind-mmrshine .9s ease-out; opacity:1; }
  @keyframes ind-mmrshine { from { left:-40%; } to { left:110%; } }
  :where(body.p-index) .relnote { font-size:12.5px; color:var(--mut); margin-bottom:10px; }
  /* заголовки-разделители секций релевантности в выдаче — редизайн 2.0 (M2): 11.5px 600, letter-spacing .07em, зелёный/приглушённый, шеврон-иконка */
  :where(body.p-index) .relsect { margin:20px 0 2px; font:600 11.5px 'Inter',sans-serif; letter-spacing:.07em;
             text-transform:uppercase; display:flex; align-items:center; gap:6px; }
  :where(body.p-index) .relsect.high { color:var(--ok); }
  :where(body.p-index) .relsect.own { color:var(--err2); }
  :where(body.p-index) .relsect.low { color:var(--mut); }
  /* ЗАБЛЮРЕННЫЕ РОЛИКИ фри-выдачи (Вова 09.07): «ролик есть, но тебе пока недоступен». Блюрится ЗАГЛУШКА-полоска, реальных данных в браузере нет */
  :where(body.p-index) .relsect.lockedsec { color:#a9b9c9; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  :where(body.p-index) .lockhide { background:transparent; border:1px solid var(--line); color:var(--mut); border-radius:8px;
              padding:2px 10px; font:600 11px 'Inter',sans-serif; cursor:pointer;
              text-transform:none; letter-spacing:0; }
  :where(body.p-index) .lockhide:hover { border-color:var(--mut); }
  :where(body.p-index) .lockcard { background:var(--card); border:1px dashed var(--line); border-radius:10px;
              padding:12px 16px; margin-top:8px; }
  :where(body.p-index) .lockcard.lhigh { border-color:rgba(57,194,109,.45); }
  :where(body.p-index) .lockcard .lline { height:13px; border-radius:7px; filter:blur(4px);
                     background:linear-gradient(90deg,#39445a,#242c38 70%); margin-bottom:8px; }
  :where(body.p-index) .lockcard .lmeta { color:var(--mut); font-size:13px; }
  /* заблюренная строка в оглавлении выдачи */
  :where(body.p-index) .toclock { border-left:3px solid #4a5567; padding-left:12px; color:var(--mut); font-size:14px;
             display:flex; align-items:center; gap:8px; }
  :where(body.p-index) .toclock .bar { display:inline-block; height:11px; border-radius:6px; filter:blur(3px);
                  background:linear-gradient(90deg,#39445a,#242c38); }
  /* (окно №25, аудит красоты) пейвол погашен из красного: красный = ошибки и опасное (правило), а это ОФФЕР. Серая рамка, заголовок белым, акцент — одна лаймовая кнопка внутри. */
  :where(body.p-index) .paywall { border-color:var(--line); text-align:center; }
  :where(body.p-index) .paywall h2 { color:var(--txt); margin-bottom:10px; }
  :where(body.p-index) .spin { display:inline-block; width:16px; height:16px; border:2px solid var(--mut);
          border-top-color:var(--brand); border-radius:50%; animation:ind-sp 0.8s linear infinite;
          vertical-align:-3px; margin-right:8px; }
  @keyframes ind-sp { to { transform:rotate(360deg); } }
  :where(body.p-index) .seg { background:#0b0e13; padding:12px 36px 16px 12px; border-radius:8px; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; position:relative; overflow:hidden; }
  :where(body.p-index) .seg:hover { border-color:#3d4a5e; }   /* нейтральный ховер: не спорит с лаймом */
  :where(body.p-index) .seg.viewed { opacity:0.5; background:transparent; }
  :where(body.p-index) .seg.viewed:hover { border-color:var(--line); }
  :where(body.p-index) .seg.viewed .time { color:var(--mut); }
  :where(body.p-index) .seg.viewed::after { content:'✓'; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--ok); font-size:16px; font-weight:bold; }
  /* (24.07) csg-on — момент, ради которого юзера позвали из Телеграма («твои клипы готовы»): лаймовая рамка + мягкая тень, БЕЗ мигания. Класс csg-*, а не ad*: адблок режет всё «рекламное» по имени класса. Ставится на .seg и .cgood по data-dbid. (31.07, Вова) Гаснет ТОЛЬКО у того момента, который человек открыл, — ни по таймеру, ни по клику мимо: подсвечены НОВЫЕ, дорезанные клипы, а старые он уже смотрел, и гасить их скопом значит терять то единственное, ради чего он пришёл по ссылке. Подробности — JS csGlowApply. .seg.viewed выше гасит прозрачностью — у подсвеченного возвращаем opacity:1, иначе просмотренный ранее момент подсветился бы призраком. */
  :where(body.p-index) .seg.csg-on, :where(body.p-index) .cgood.csg-on { border-color:var(--brand); opacity:1;
     box-shadow:0 0 0 1px var(--brand), 0 6px 22px rgba(197,240,43,.18);
     transition:box-shadow .35s ease-in-out, border-color .35s ease-in-out; }
  /* (25.07) .fbbtn (кнопка «сообщить об ошибке» у фрагмента) удалена — жалобы выпилены */
  /* --- панель фильтров (прототип) --- */
  :where(body.p-index) .layout { display:flex; gap:22px; align-items:flex-start; }
  :where(body.p-index) .layout .main { flex:1; min-width:0; }
  :where(body.p-index) .fpanel { width:284px; flex-shrink:0; background:var(--card); border:1px solid var(--line);
            border-radius:14px; padding:18px; position:sticky; top:16px; }
  /* рейтинг: ВСЕГДА две строки в чипе — название сверху, счётчик снизу. Так кнопка не прыгает в высоту, когда счётчик перевалит за 1000 (Вова) */
  :where(body.p-index) #f_brs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; }
  :where(body.p-index) #f_brs .fchip { display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; min-height:46px; line-height:1.25; padding:5px 8px; white-space:nowrap; }
  :where(body.p-index) #f_brs .fcnt { font-size:11.5px; opacity:.75; }
  :where(body.p-index) .fchip .fcnt { font-size:11.5px; opacity:.75; }   /* счётчики и у чипов позиций */
  :where(body.p-index) .fpanel h3 { font:600 12.5px 'Inter',sans-serif; color:var(--mut); text-transform:uppercase;
               letter-spacing:.06em; margin:16px 0 8px; }
  :where(body.p-index) .fpanel h3:first-of-type { margin-top:0; }
  :where(body.p-index) .fchips { display:flex; flex-wrap:wrap; gap:6px; }
  /* (окно №34, доп3) позиция — КАСТОМНЫЙ дропдаун psel: иконки видны и в раскрытом списке (нативный <option> картинки не умеет — просьба Вовы) */
  :where(body.p-index) .psel { position:relative; display:block; }
  :where(body.p-index) .psel-b { display:flex; width:100%; align-items:center; gap:6px; background:#0b0e13; border:1px solid var(--line);
        border-radius:8px; color:var(--txt); padding:8px 10px; font:600 13px 'Inter',sans-serif; cursor:pointer;
        transition:border-color .15s ease-in-out; }
  :where(body.p-index) .psel-b:hover { border-color:#3d4a5e; }
  :where(body.p-index) .psel-b:active { transform:scale(.98); }
  :where(body.p-index) .psel-b:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
  :where(body.p-index) .psel-b.dim { color:var(--mut); }
  :where(body.p-index) .psel-ar { color:var(--mut); font-size:10px; margin-left:auto; }
  :where(body.p-index) .psel-l { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:80; background:#12161d;
        border:1px solid #333d4c; border-radius:10px; padding:4px; display:flex; flex-direction:column;
        box-shadow:0 10px 26px rgba(0,0,0,.45); }
  /* грабля окна №32: display:flex перебивает атрибут hidden — возвращаем силой */
  :where(body.p-index) .psel-l[hidden] { display:none !important; }
  :where(body.p-index) .psel-l button { display:flex; align-items:center; gap:7px; background:none; border:0; color:var(--mut);
        border-radius:7px; padding:7px 10px; font:600 12.5px 'Inter',sans-serif; cursor:pointer; text-align:left; }
  :where(body.p-index) .psel-l button:hover { color:var(--txt); background:rgba(255,255,255,.06); }
  :where(body.p-index) .psel-l .fcnt { margin-left:auto; color:#5b6674; font-weight:400; }
  :where(body.p-index) .psel .rico { margin-right:0; }
  /* (доп6) hsel: дропдаун героя с поисковой строкой */
  :where(body.p-index) .hsel { position:relative; display:block; }
  :where(body.p-index) .hsel-b { display:flex; width:100%; align-items:center; gap:6px; background:#0b0e13; border:1px solid var(--line);
        border-radius:8px; color:var(--txt); padding:8px 10px; font:600 13px 'Inter',sans-serif; cursor:pointer;
        transition:border-color .15s ease-in-out; }
  :where(body.p-index) .hsel-b.dim { color:var(--mut); }
  :where(body.p-index) .hsel-b:hover { border-color:#3d4a5e; }
  :where(body.p-index) .hsel-p { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:85; background:#12161d;
        border:1px solid #333d4c; border-radius:10px; padding:6px; box-shadow:0 10px 26px rgba(0,0,0,.45); }
  :where(body.p-index) .hsel-p[hidden] { display:none !important; }
  :where(body.p-index) .hsel-q { width:100%; background:#0b0e13; border:1px solid var(--line); border-radius:7px; color:var(--txt);
        padding:6px 9px; font:600 12.5px 'Inter',sans-serif; margin-bottom:5px; box-sizing:border-box; }
  :where(body.p-index) .hsel-q:focus { outline:none; border-color:var(--brand); }
  :where(body.p-index) .hsel-l { max-height:290px; overflow:auto; display:flex; flex-direction:column; }
  :where(body.p-index) .hsel-l button { display:flex; align-items:center; gap:7px; background:none; border:0; color:var(--mut);
        border-radius:7px; padding:6px 10px; font:600 12.5px 'Inter',sans-serif; cursor:pointer; text-align:left; }
  :where(body.p-index) .hsel-l button:hover { color:var(--txt); background:rgba(255,255,255,.06); }
  :where(body.p-index) .hsel-l .hgrp { padding:6px 10px 2px; font:600 10px 'Inter',sans-serif; color:#5b6674; text-transform:uppercase; letter-spacing:.06em; }
  :where(body.p-index) .hsel-l .fcnt { margin-left:auto; color:#5b6674; font-weight:400; }
  :where(body.p-index) .fchip { padding:5px 11px; border:1px solid var(--line); border-radius:16px; font-size:13px;
           cursor:pointer; color:var(--mut); user-select:none; transition:all .15s; }
  :where(body.p-index) .fchip:hover { border-color:#3d4a5e; }
  /* выбранный фильтр = лайм (активное состояние бренда) */
  :where(body.p-index) .fchip.on { border-color:var(--brand); color:var(--brand); background:rgba(197,240,43,.08); }
  /* прогресс просмотра сегмента: полоска в строке таймкода (игривость и удержание — хотелка Вовы 08.07); при 100% зеленеет, прогресс живёт в localStorage браузера */
  :where(body.p-index) .segbar { position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--line); }
  :where(body.p-index) .segbar-fill { height:100%; width:0%; background:linear-gradient(90deg, #9fc522, var(--brand));
                 transition:width .25s linear; }
  /* (24.07) ТАЙМЛАЙН ФРАГМЕНТА В РАЗБОРЕ: серая полоса = весь ролик, лаймовый отрезок = наш момент, под ней честные цифры. Показывает ценность подписки без слов: «мы нашли 3% из 47 минут». Тонко и тихо — это информация, не кнопка, поэтому лайм здесь приглушён прозрачностью. */
  /* (24.07) полоса «где мы внутри разбора»: закрытая часть заштрихована, открытый кусок — светлый, как ползунок плеера (приёмка Вовы, вариант Б). Классы cstl-* (НЕ «ad*» — адблок). */
  :where(body.p-index) .cstl { margin:10px 0 2px; }
  :where(body.p-index) .cstl-bar { position:relative; height:9px; border-radius:5px; overflow:hidden;
              background:repeating-linear-gradient(115deg,#1b2230 0 5px,#141a24 5px 10px); }
  /* ГРАБЛЯ 24.07: было var(--text) — такой переменной на странице НЕТ (токен называется --txt), фон выходил прозрачным и отрезок не рисовался вообще. */
  :where(body.p-index) .cstl-bar i { position:absolute; top:0; bottom:0; border-radius:5px; background:var(--txt); min-width:7px; }
  :where(body.p-index) .cstl-ends { display:flex; justify-content:space-between; align-items:center; gap:8px;
               margin-top:6px; font-size:11px; color:#5f6b7a; }
  :where(body.p-index) .cstl-mid { color:var(--mut); }
  :where(body.p-index) .cstl-cap { margin-top:6px; font-size:11.5px; color:var(--mut); }
  @media (max-width:600px) { :where(body.p-index) .cstl-cap, :where(body.p-index) .cstl-ends { font-size:11px; }}
  /* сброс секции фильтра: когда что-то выбрано, кликабелен ВЕСЬ заголовок (не нужно целиться в крестик — UX-хотелка Вовы 08.07) */
  :where(body.p-index) .fclear { display:none; color:var(--err2); font-size:14px; margin-left:4px; }
  :where(body.p-index) .fpanel h3.clearable { cursor:pointer; }
  :where(body.p-index) .fpanel h3.clearable:hover { color:var(--err2); }
  :where(body.p-index) .fpanel h3.clearable:hover .fclear { color:var(--err); }
  :where(body.p-index) .fpanel select { width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--line);
                   background:#0b0e13; color:var(--txt); font:13.5px 'Inter',sans-serif; }
  /* --- единые кнопки и чипсы (UI-полировка 09.07): один вид на весь сайт --- */
  :where(body.p-index) .sugg { background:var(--card); border:1px solid var(--line); color:var(--txt); padding:9px 14px;
          border-radius:10px; cursor:pointer; font:500 14px/1.35 'Inter',sans-serif; text-align:left;
          max-width:100%; transition:all .15s; }
  :where(body.p-index) .sugg:hover { border-color:#3d4a5e; color:var(--txt); }
  :where(body.p-index) .chipx { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:1px solid var(--brand);
           border-radius:16px; font-size:13px; color:var(--brand); background:rgba(197,240,43,.08);
           cursor:pointer; transition:all .15s; max-width:100%; }
  :where(body.p-index) .chipx:hover { background:rgba(197,240,43,.18); border-color:var(--brand2); }
  :where(body.p-index) .navbtn { background:var(--line); border:1px solid var(--line); color:var(--txt); padding:7px 14px;
            border-radius:8px; cursor:pointer; font:500 13px 'Inter',sans-serif; transition:all .2s; }
  :where(body.p-index) .navbtn:hover { background:#2c3543; border-color:#3d4a5e; color:#fff; }   /* нейтральный ховер */
  :where(body.p-index) .mini-row { display:flex; gap:8px; margin-top:12px; }
  :where(body.p-index) .mini-row input { flex:1; min-width:0; padding:9px 12px; border-radius:8px; border:1px solid var(--line);
                    background:#0b0e13; color:var(--txt); font-size:14px; outline:none; }
  :where(body.p-index) .mini-row input:focus { border-color:var(--brand); }
  :where(body.p-index) .mini-row button { background:var(--brand); border:0; color:var(--onbrand); padding:9px 16px; border-radius:8px;
                     cursor:pointer; font:600 14px 'Inter',sans-serif; white-space:nowrap; }
  :where(body.p-index) .mini-row button:hover { background:var(--brand2); }
  :where(body.p-index) .fbtns { display:flex; gap:8px; margin-top:16px; }
  :where(body.p-index) .fbtns button { flex:1; padding:9px 0; border-radius:8px; font:600 13.5px 'Inter',sans-serif; cursor:pointer; }
  :where(body.p-index) .fapply { background:var(--brand); border:0; color:var(--onbrand); }
  :where(body.p-index) .fapply:hover { background:var(--brand2); }
  :where(body.p-index) .freset { background:transparent; border:1px solid var(--line); color:var(--mut); }
  /* ПАРА «ошибка ↔ как правильно» (противовесы): ошибка сверху, зелёная карточка СКРЫТА за кнопкой-спойлером — меньше стены текста (Вова 08.07) */
  /* РАЗДЕЛЕНИЕ ПАР (Вова 10.07): подряд идущие пары сливались в кашу. Каждая пара теперь — отдельный блок со своей рамкой и фоном, плюс увеличенный отступ между соседними парами. */
  :where(body.p-index) .pair { display:block; padding:12px; border:1px solid var(--line);
          border-radius:14px; background:rgba(255,255,255,.02); }
  :where(body.p-index) .pair + .pair, :where(body.p-index) .seg + .pair, :where(body.p-index) .pair + .seg { margin-top:10px; }
  :where(body.p-index) .pairbtn { display:flex; align-items:center; gap:8px; width:100%; margin-top:8px; padding:9px 12px;
             background:rgba(57,194,109,.06); border:1px dashed rgba(57,194,109,.45); color:var(--ok);
             border-radius:10px; cursor:pointer; font:600 13.5px 'Inter',sans-serif; text-align:left; }
  :where(body.p-index) .pairbtn:hover { background:rgba(57,194,109,.13); border-color:var(--ok); }
  :where(body.p-index) .pairbtn .parr { transition:transform .15s; }
  :where(body.p-index) .pairbtn.open .parr { transform:rotate(90deg); }
  :where(body.p-index) .pairbtn .where { margin-left:auto; display:inline-flex; align-items:center; gap:5px;
                    color:var(--mut); font:400 12px 'Inter',sans-serif; white-space:nowrap; }
  :where(body.p-index) .srcico { flex:0 0 auto; vertical-align:-2px; }
  :where(body.p-index) .mnote { margin-top:6px; padding:7px 11px; border-radius:8px; font-size:13px;
           background:rgba(230,106,90,.08); color:var(--err2); }
  :where(body.p-index) .clabel { font:700 11px 'Inter',sans-serif; letter-spacing:.07em; text-transform:uppercase; margin:0 0 6px 2px; }
  :where(body.p-index) .clabel.bad { color:var(--err2); }
  :where(body.p-index) .clabel.ok { color:var(--ok); }
  :where(body.p-index) .seg.segbad { border:1px solid rgba(230,106,90,.45); border-left:4px solid var(--err2);
                background:rgba(230,106,90,.06); border-radius:10px; }
  :where(body.p-index) .cgood { cursor:pointer; border:1px solid rgba(57,194,109,.45); border-left:4px solid var(--ok);
           background:rgba(57,194,109,.06); border-radius:10px; padding:10px 12px; }
  :where(body.p-index) .cgood:hover { border-color:var(--ok); }
  :where(body.p-index) .cgood .time { color:var(--ok); }
  :where(body.p-index) .ctake { margin-top:8px; font-size:13.5px; }
  :where(body.p-index) .csrc { margin-top:8px; font-size:12px; color:var(--mut); }
  /* СКОРОСТЬ ПЛЕЕРА (Вова 11.07, окно №8): чипы под каждым плеером; выбор общий на все плееры сайта и запоминается в браузере (yk_rate) */
  :where(body.p-index) .spdrow { display:flex; align-items:center; gap:6px; margin-top:10px; flex-wrap:wrap; }
  :where(body.p-index) .spdlbl { color:var(--mut); font-size:12.5px; margin-right:2px; }
  :where(body.p-index) .spdchip { padding:3px 10px; border:1px solid var(--line); border-radius:999px; font-size:12.5px;
             color:var(--mut); cursor:pointer; user-select:none; }
  :where(body.p-index) .spdchip:hover { border-color:var(--brand); color:var(--txt); }
  :where(body.p-index) .spdchip.on { background:var(--brand); color:var(--onbrand); border-color:var(--brand); font-weight:600; }
  /* МИНИ-ПЛЕЕР (Вова 11.07, окно №8): играющий ролик при скролле уезжает фикс-плашкой в правый нижний угол ЛЕВЕЕ кнопки ↑ (#searchFab right:16 width:48), z-index 150 — выше жёлтого баннера (99), ниже попапов (200+). Высоту места держит JS через minHeight, чтобы выдача не дёргалась. */
  :where(body.p-index) .plwrap { position:relative; }
  /* .result впереди — чтобы перебить и .result iframe, и .result .ctrwrap iframe ниже */
  :where(body.p-index) .result .plwrap.mini iframe { position:fixed; right:72px; bottom:16px; width:var(--mw, 340px) !important;
                        height:calc(var(--mw, 340px) * 0.5625) !important; margin:0; z-index:150; border-radius:10px; border:1px solid var(--line);
                        box-shadow:0 10px 32px rgba(0,0,0,.55);
                        transform:translate(var(--mx, 0px), var(--my, 0px)); transition:none; }
  /* кнопки мини-плеера (Вова 11.07, 2-й заход): пауза/плей ЛЕВЕЕ ✕, обе по верхнему правому краю плашки, размер 30px («чуть больше») */
  /* прозрачная плёнка поверх плашки: зажал в любом месте — тащишь, клик — пауза (сам ютуб-iframe мышь не отдаёт, поэтому ловим поверх него) */
  :where(body.p-index) .plwrap .minidrag { display:none; }
  /* (фикс 20.07) плёнка накрывает только ВЕРХНИЕ 55% плашки: нижние 45% отданы самому ютубу — там его таймлайн, громкость и кнопка «раскрыть» (fullscreen; в маленьком плеере YT рисует её справа по центру). Раньше плёнка глушила их все. Клик по нижней части = YT сам ставит паузу, так что «клик — пауза» работает по всей плашке. Тащить — за верхнюю часть. */
  :where(body.p-index) .plwrap.mini .minidrag { display:block; position:fixed; right:72px;
                        bottom:calc(16px + var(--mw, 340px) * 0.5625 * 0.45);
                        width:var(--mw, 340px); height:calc(var(--mw, 340px) * 0.5625 * 0.55); z-index:151;
                        background:transparent; cursor:grab; touch-action:none;
                        transform:translate(var(--mx, 0px), var(--my, 0px)); transition:none; }
  /* (фикс 20.07) кнопка-ручка ⠿ (minig) убрана: плёнка и так тащится
           зажатием, курсор grab + подсказка объясняют сами. CSS-остатки
           .minig вычищены. */
  :where(body.p-index) .plwrap .minix, :where(body.p-index) .plwrap .minip { display:none; }
  :where(body.p-index) .plwrap.mini .minix, :where(body.p-index) .plwrap.mini .minip { display:flex; align-items:center; justify-content:center;
                        position:fixed; bottom:calc(var(--mw, 340px) * 0.5625 - 16px); z-index:152;
                        width:30px; height:30px; border-radius:50%; background:#1a212c; color:var(--txt);
                        border:1px solid var(--line); cursor:pointer; font-size:15px; line-height:1; padding:0;
                        transform:translate(var(--mx, 0px), var(--my, 0px)); transition:none; }
  :where(body.p-index) .plwrap.mini .minix { right:78px; }
  :where(body.p-index) .plwrap.mini .minip { right:114px; }
  :where(body.p-index) .plwrap .minix:hover { border-color:var(--err2); color:var(--err2); }
  :where(body.p-index) .plwrap .minip:hover { border-color:var(--brand); color:var(--brand); }
  /* внутри кнопки два значка: играем — пауза, стоим на паузе — плей */
  :where(body.p-index) .minip .ic-play { display:none; }
  :where(body.p-index) .plwrap.paused .minip .ic-pause { display:none; }
  :where(body.p-index) .plwrap.paused .minip .ic-play { display:block; }
  /* ПЛЕЕР ПРОТИВОВЕСА (Вова 11.07, окно №8): ролик «как надо» из другого видео открывается прямо в зелёной карточке, а не уводит на YouTube; перебиваем растяжку .result iframe (100%+40px) — тут плеер по ширине карточки. Запасная ссылка .ctryt — под плеером. */
  :where(body.p-index) .ctrwrap { margin-top:10px; }
  :where(body.p-index) .result .ctrwrap iframe { display:block; width:100%; height:auto; aspect-ratio:16/9;
                            margin:0; border:0; border-radius:10px; }
  :where(body.p-index) .ctryt { display:inline-block; margin-top:6px; font-size:12px; color:var(--mut); }
  :where(body.p-index) .ctryt:hover { color:var(--txt); }
  /* СВОДКА-СПОЙЛЕР (Вова 11.07, окно №8, пачка №3): кнопка свернуть/показать «Коротко от тренера» — сводка бывает длинной, на мобиле мешает */
  :where(body.p-index) .digfold { display:block; margin-top:8px; background:transparent; border:1px dashed var(--line);
             color:var(--mut); padding:7px 12px; border-radius:8px; cursor:pointer;
             font:600 12.5px 'Inter',sans-serif; }
  :where(body.p-index) .digfold:hover { color:var(--txt); border-color:var(--mut); }
  /* мобильная страховка (Вова 10.07): длинные слова переносятся, картинки и плееры не шире экрана, кнопки у поиска переносятся строками */
  :where(body.p-index) .status, :where(body.p-index) .result, :where(body.p-index) .card { overflow-wrap:anywhere; }
  :where(body.p-index) iframe, :where(body.p-index) img { max-width:100%; }
  :where(body.p-index) .searchrow { flex-wrap:wrap; }
  /* кнопка-спойлер фильтров: на десктопе скрыта, на мобилке фильтры за ней */
  :where(body.p-index) #fToggle { display:none; width:100%; align-items:center; justify-content:space-between;
             background:transparent; border:1px solid var(--line); color:var(--txt);
             padding:10px 12px; border-radius:10px; font:600 14px 'Inter',sans-serif; cursor:pointer; }
  :where(body.p-index) #fToggle .arr { transition:transform .15s; }
  :where(body.p-index) .fpanel.open #fToggle .arr { transform:rotate(180deg); }
  /* (Вова 12.07, ФИКС «фильтры ломают мобилу»): в колонке блоки обязаны растягиваться по ширине контейнера (stretch), а не расти по контенту — иначе длинная сводка выбора в кнопке «Фильтры» распирала страницу вправо */
  @media (max-width: 920px) { :where(body.p-index) .layout { flex-direction:column; align-items:stretch; }
    /* (Вова 12.07) отступ между карточкой поиска и блоком фильтров */
    :where(body.p-index) .fpanel { width:100%; position:static; margin-top:14px; }
    :where(body.p-index) #fToggle > span { min-width:0; overflow:hidden; }
    :where(body.p-index) .pairbtn .where { display:none; }
    :where(body.p-index) .top { flex-wrap:wrap; }
    /* МОБИЛЬНАЯ ШАПКА (Вова 10.07: «каша кнопок в 4 этажа»): админский ряд не переносится строками, а листается пальцем вбок одной строкой */
    :where(body.p-index) .userbox { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
               -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:100%; }
    :where(body.p-index) .userbox::-webkit-scrollbar { display:none; }
    :where(body.p-index) .userbox > * { flex-shrink:0; }
    :where(body.p-index) .navbtn { padding:6px 9px; font-size:12px; }
    :where(body.p-index) #fToggle { display:flex; }
    :where(body.p-index) .fpanel .fbody { display:none; }
    :where(body.p-index) .fpanel.open .fbody { display:block; margin-top:14px; }
    /* ФИКС 10.07 (Вова: «на мобилке всё ещё 500 пустых пикселей»): на телефоне карточка поиска НЕ липкая и НЕ сворачивается — обычный блок, уезжает вместе со страницей (нет сворачивания = нет дыры на её месте). Возврат к поиску — плавающая 🔍. Липкость остаётся только на ПК. */
    :where(body.p-index) .searchcard { position:static; border-radius:14px; transform:none !important; }}
  /* ПЛАВАЮЩАЯ КНОПКА ПОИСКА, только мобилка (решение 10.07 по «палке о двух концах»): карточка при скролле вверх НЕ возвращается сама (не перекрывает контент), зато в углу всегда висит маленькая 🔍 — клик возвращает к поиску из любого места. И удобно, и ничего не заслоняет. */
  /* стрелка вверх, нейтральный цвет (Вова 10.07: «не лупа и не лайм»); видна и на ПК, и на мобилке, когда поиск уехал за экран */
  :where(body.p-index) #searchFab { position:fixed; right:16px; bottom:16px; z-index:80; width:48px; height:48px;
               border-radius:50%; background:#242c38; color:var(--txt); font-size:20px;
               border:1px solid #3d4a5e; display:none; align-items:center; justify-content:center;
               cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.55); opacity:.92; }
  :where(body.p-index) #searchFab:hover { border-color:#4a5567; opacity:1; }
  /* КОМПАКТНЫЙ ВЫЕЗЖАЮЩИЙ ПОИСК (Вова 10.07): когда карточка прилипла и выехала при скролле вверх — она ужимается (заголовок/подсказки прячутся, кнопки чуть меньше), чтобы не закрывать пол-экрана. Наверху страницы карточка обычного размера. Отступы оставлены — «премиально, без колхоза». */
  /* примеры-чипы + компактное предупреждение (редизайн v2, 10.07) */
  :where(body.p-index) .exrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
  :where(body.p-index) .exlabel { font-size:13px; color:var(--mut); }
  :where(body.p-index) .exchip { background:transparent; border:1px solid var(--line); color:var(--mut); padding:5px 12px;
            border-radius:16px; font:500 13px 'Inter',sans-serif; cursor:pointer; transition:all .15s; }
  :where(body.p-index) .exchip:hover { border-color:#3d4a5e; color:var(--txt); }
  /* СТАТЫ/МЕТА из снапшота (окно №26, П1). Классы stx* (не «ad»!). Правило аудита красоты: светится ОДНА вещь — лайм только на цифре ценности (WR топ-героя и тир S), остальное спокойное. */
  :where(body.p-index) .stxbox { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:16px 18px; }
  :where(body.p-index) .stxtitle { font:600 17px 'Inter',sans-serif; color:var(--txt); margin-bottom:2px; }
  :where(body.p-index) .stxmeta { font-size:12px; color:var(--mut); margin-bottom:10px; }
  :where(body.p-index) .stxsec { font:600 13px 'Inter',sans-serif; color:var(--mut); text-transform:uppercase;
            letter-spacing:.04em; margin:12px 0 6px; }
  :where(body.p-index) .stxrow { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; }
  :where(body.p-index) .stxrow:hover { background:rgba(255,255,255,.03); }
  :where(body.p-index) .stxrow img { width:42px; height:24px; border-radius:4px; object-fit:cover; flex:0 0 auto; }
  :where(body.p-index) .stxrank { width:18px; text-align:right; color:var(--mut); font-size:12.5px; flex:0 0 auto; }
  :where(body.p-index) .stxname { color:var(--txt); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* (окно №34) иконки ролей Valve: PNG в img/dota/roles/, нет файла — onerror прячет */
  :where(body.p-index) .rico { width:13px; height:13px; vertical-align:-2px; margin-right:5px; display:inline-block; object-fit:contain; opacity:.9; }
  :where(body.p-index) a.stxname { text-decoration:none; }           /* (22.07) имя героя — ссылка на его страницу */
  :where(body.p-index) a.stxname:hover { color:var(--brand); }
  :where(body.p-index) .stxwr { margin-left:auto; font:600 14px 'Oswald',sans-serif; color:var(--txt); flex:0 0 auto; }
  :where(body.p-index) .stxrow.top .stxwr { color:var(--brand); }
  :where(body.p-index) .stxgames { color:var(--mut); font-size:12px; flex:0 0 auto; width:64px; text-align:right; }
  :where(body.p-index) .stxtier { font:700 11.5px 'Inter',sans-serif; border:1px solid var(--line); border-radius:6px;
             padding:1px 7px; color:var(--mut); flex:0 0 auto; }
  :where(body.p-index) .stxtier.s { color:var(--brand); border-color:var(--brand); }
  :where(body.p-index) .stxtier.a { color:var(--txt); }
  /* (Вова 30.07) ТИР-ЛИСТ КАК ТАБЛИЦА. Раньше строка была flex'ом, и при двух
     колонках винрейта числа разъезжались, а подпись секции слипалась с легендой
     («Мид (2)про · Divine»). Теперь сетка с фиксированными колонками и шапкой —
     колонки стоят друг под другом на всех строках.
     ДИАГРАММА: полоска с нулём посередине = отклонение винрейта от 50%. Вправо
     зелёным — герой выигрывает, влево красным — проигрывает. Именно расхождение
     между «про» и «твой ранг» и есть смысл блока, число в столбик его не показывает.
     Классы stx* — НЕ «ad» (правило 8). */
  :where(body.p-index) .stxr, :where(body.p-index) .stxhd { display:grid; align-items:center; gap:10px;
                  grid-template-columns:20px 42px minmax(0,1fr) 52px 56px 108px;
                  padding:6px 8px; border-radius:8px; }
  :where(body.p-index) .stxr.noy, :where(body.p-index) .stxhd.noy { grid-template-columns:20px 42px minmax(0,1fr) 52px 74px; }
  :where(body.p-index) .stxr:hover { background:rgba(255,255,255,.03); }
  :where(body.p-index) .stxr + .stxr { border-top:1px solid rgba(255,255,255,.05); }
  /* портрет живёт в СВОЁЙ клетке: у героя картинки может не быть вовсе
     (пустое поле img в снапшоте) или она может отдать 404 и спрятаться по
     onerror. В сетке пропавший элемент утащил бы все ячейки строки на колонку
     влево — поэтому размер держит обёртка, а не сам <img> */
  :where(body.p-index) .stxpic { display:block; width:42px; height:24px; border-radius:4px;
            background:rgba(255,255,255,.04); overflow:hidden; }
  :where(body.p-index) .stxpic img { width:100%; height:100%; display:block; object-fit:cover; }
  :where(body.p-index) .stxhd { font:600 11px 'Inter',sans-serif; color:var(--mut); text-transform:uppercase;
           letter-spacing:.05em; padding-bottom:2px; border-bottom:1px solid var(--line);
           border-radius:0; }
  :where(body.p-index) .stxhd span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  :where(body.p-index) .stxnm { display:flex; align-items:center; gap:7px; min-width:0; }
  :where(body.p-index) .stxg2 { color:var(--mut); font-size:12px; text-align:right; white-space:nowrap; }
  :where(body.p-index) .stxp2 { font:600 14px 'Oswald',sans-serif; color:var(--txt); text-align:right; }
  :where(body.p-index) .stxr.top .stxp2 { color:var(--brand); }
  /* колонка «твой ранг»: число и под ним полоска отклонения */
  :where(body.p-index) .stxy2 { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
  :where(body.p-index) .stxy2 b { font:600 14px 'Oswald',sans-serif; }
  :where(body.p-index) .stxbw { position:relative; width:100%; height:5px; border-radius:3px;
           background:rgba(255,255,255,.06); }
  :where(body.p-index) .stxbw::before { content:''; position:absolute; left:50%; top:-2px; bottom:-2px;
                   width:1px; background:rgba(255,255,255,.22); }
  :where(body.p-index) .stxbw i { position:absolute; top:0; bottom:0; border-radius:3px; }
  /* мобилка: имя героя главнее украшений — прячем колонку игр и тир-бейдж,
     ужимаем портрет и колонки процентов, иначе «Эмбер Спирит» схлопывается в одну
     букву с многоточием (проверено скриншотом на 400px) */
  @media (max-width:640px) {
    :where(body.p-index) .stxr, :where(body.p-index) .stxhd { grid-template-columns:18px 30px minmax(0,1fr) 46px 78px; gap:7px; }
    :where(body.p-index) .stxr.noy, :where(body.p-index) .stxhd.noy { grid-template-columns:18px 30px minmax(0,1fr) 64px; gap:7px; }
    :where(body.p-index) .stxr .stxg2, :where(body.p-index) .stxhd .stxg2 { display:none; }
    :where(body.p-index) .stxr .stxtier { display:none; }
    :where(body.p-index) .stxpic { width:30px; height:18px; }
    :where(body.p-index) .stxname { font-size:13px; }
    :where(body.p-index) .stxp2, :where(body.p-index) .stxy2 b { font-size:13px; }}
  :where(body.p-index) .stxcols { display:flex; gap:18px; flex-wrap:wrap; }
  :where(body.p-index) .stxcols > div { flex:1 1 260px; min-width:240px; }
  :where(body.p-index) .stxitems { display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 2px; }
  :where(body.p-index) .stxit { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:8px;
           padding:3px 9px 3px 4px; font-size:12.5px; color:var(--txt); }
  :where(body.p-index) .stxit img { width:26px; height:19px; border-radius:3px; object-fit:cover; }
  :where(body.p-index) .stxit small { color:var(--mut); }
  :where(body.p-index) .stxcta { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
  :where(body.p-index) .stxsrc { margin-top:10px; font-size:11.5px; color:var(--mut); }
  @media (max-width:640px) { :where(body.p-index) .stxgames { display:none; }}
  /* (окно «свежие игры про») ОДНА ПРО-ИГРА = ОДНА СТРОКА-КАРТОЧКА с колонками: слева ник + команда под ним, посередине «против <Герой>», справа цветной бейдж исхода, дальше иконки итогового инвентаря + нейтралка (имена — в тултипе, текстом не дублируем, иначе строка расползается). Раньше всё это слипалось в один текстовый поток. Цвета исхода — уже существующие --ok / --err2, новых нет. Классы stxrg* — НЕ «ad»: адблок режет по имени. */
  :where(body.p-index) .stxrg { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
           padding:7px 8px; border-radius:8px; }
  :where(body.p-index) .stxrg + .stxrg { border-top:1px solid var(--line); }   /* тонкая граница строк */
  :where(body.p-index) .stxrg:hover { background:rgba(255,255,255,.03); }
  /* ник+команда, «против», бейдж — одна нерушимая группа: на мобиле на вторую строку уезжают ПРЕДМЕТЫ, а не одинокий бейдж */
  :where(body.p-index) .stxrgh { display:flex; align-items:center; gap:8px; flex:1 1 300px; min-width:0; }
  :where(body.p-index) .stxrgp { flex:1 1 46%; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
  :where(body.p-index) .stxrgn { font:600 13.5px 'Inter',sans-serif; color:var(--txt);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* «прошник» = сервер не знает игрока. Это не ошибка — гасим до курсива */
  :where(body.p-index) .stxrgn.unk { font:italic 400 12.5px 'Inter',sans-serif; color:var(--mut); }
  :where(body.p-index) .stxrgt { font-size:11px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  :where(body.p-index) .stxrgv { flex:1 1 40%; min-width:0; font-size:12.5px; color:var(--mut);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  :where(body.p-index) .stxrgv b { color:var(--txt); font-weight:600; }
  :where(body.p-index) .stxrgw { flex:0 0 auto; white-space:nowrap; border-radius:20px; padding:2px 9px;
            font:600 11.5px 'Inter',sans-serif; }
  :where(body.p-index) .stxrgw.win { background:rgba(57,194,109,.15); color:var(--ok); }
  :where(body.p-index) .stxrgw.lose { background:rgba(230,72,46,.15); color:var(--err2); }
  :where(body.p-index) .stxrgi { display:flex; align-items:center; gap:5px; flex-wrap:wrap; flex:0 0 auto; }
  :where(body.p-index) .stxrgi img { width:26px; height:19px; border-radius:3px; object-fit:cover; border:1px solid var(--line); }
  /* нейтралка — ОТДЕЛЬНЫЙ круглый слот, как в доте. Идея и класс-модификатор взяты со страницы героя (hero.php, .hxti.nt): своей второй реализации не заводим. Квадрат по высоте строки — иначе круг вышел бы овалом. */
  :where(body.p-index) .stxrgi img.nt { width:19px; height:19px; border-radius:50%; margin-left:4px; }
  :where(body.p-index) .stxrgf { font-size:11.5px; color:var(--mut); }   /* фолбэк: старый сервер шлёт только имена */
  /* ≤560px: предметы отдельной строкой. Полный инвентарь = 6×26 + 6 зазоров×5 + нейтралка 19 + отступ 4 = 209px (box-sizing:border-box, рамка внутри) — влезает даже в 340px-экран (доступно ~300px), колонки не ломает. Ник ужимается максимум до ~93px и обрезается многоточием, а не в ноль */
  @media (max-width:560px) { :where(body.p-index) .stxrg { gap:6px; padding:7px 4px; } :where(body.p-index) .stxrgi { flex:1 0 100%; }}
  /* (окно предметов) «Что покупают прошники» + иконки предметов в карточках фрагментов. Имена классов stx- и seg- — НЕ «ad»: адблок режет по имени. */
  :where(body.p-index) .stxbit b { font-weight:600; }
  :where(body.p-index) .stxbit small { line-height:1.2; text-align:right; font-size:11px; }
  :where(body.p-index) .stxbit i { font-style:normal; opacity:.6; }  /* «по скольким играм» — тише минуты */
  :where(body.p-index) .stxbhead { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
              margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
  :where(body.p-index) .stxghost { display:inline-block; margin-left:auto; padding:6px 13px; border:1px solid var(--line);
              border-radius:10px; color:var(--txt); font:500 12.5px 'Inter',sans-serif; text-decoration:none; }
  :where(body.p-index) .stxghost:hover { border-color:#3d4a5e; }
  :where(body.p-index) .stxles { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
            background:transparent; color:var(--txt); border-radius:8px; padding:3px 10px 3px 4px;
            font:500 12.5px 'Inter',sans-serif; cursor:pointer; }
  :where(body.p-index) .stxles:hover { border-color:var(--brand); }
  :where(body.p-index) .stxles img { width:26px; height:19px; border-radius:3px; object-fit:cover; }
  :where(body.p-index) .stxles small { color:var(--mut); }
  /* предметы момента: мелкий ряд ОТДЕЛЬНОЙ строкой под текстом фрагмента, чтобы не толкать таймкод и не лезть под галочку «просмотрено» справа */
  :where(body.p-index) .segits { display:flex; gap:5px; flex-wrap:wrap; align-items:center; margin-top:6px; }
  :where(body.p-index) .segits img { width:26px; height:19px; border-radius:3px; object-fit:cover; border:1px solid var(--line); }
  /* подпись перед иконками: без неё человек видит ряд шмоток и не понимает, что это. Обычный flex-элемент — на узком экране переносится вместе с рядом, ширину у иконок не отнимает */
  :where(body.p-index) .segits .segitl { font-size:11.5px; color:var(--mut); }
  /* ТУЛТИП ПРЕДМЕТОВ — перенесён со страницы героя (hero.php) ОДИН В ОДИН: вид на поиске и на странице героя обязан совпадать. index.php не знает трёх переменных hero.php — объявляем их тут, менять правкой ПАРОЙ. */
  body:where(.p-index) { --text:var(--txt); --gold:#f0c92b; --panel2:#1b222c; }
  :where(body.p-index) #hxtip {display:none; position:fixed; z-index:90; max-width:340px; background:#10151c;
         border:1px solid #333d4c; border-radius:10px; padding:11px 13px; box-shadow:0 8px 24px rgba(0,0,0,.5);
         pointer-events:none; font-size:12.5px; line-height:1.5;}
  :where(body.p-index) #hxtip .tt-t {font-weight:700; color:var(--text); font-size:13.5px;}
  :where(body.p-index) #hxtip .tt-p {font-weight:600; font-size:10.5px; color:var(--mut); border:1px solid var(--line);
               border-radius:5px; padding:0 5px; vertical-align:1px; margin-left:4px;}
  :where(body.p-index) #hxtip .tt-c {color:var(--gold); font:600 12.5px 'Oswald',sans-serif; margin-top:1px;}
  :where(body.p-index) #hxtip .tt-b {color:var(--mut); font-size:11px; text-transform:uppercase; letter-spacing:.03em; margin-top:5px;}
  :where(body.p-index) #hxtip .tt-a {margin-top:6px; color:#c3ccd7;}
  :where(body.p-index) #hxtip .tt-a div {margin:1px 0;}
  :where(body.p-index) #hxtip .tt-act {margin-top:7px; background:rgba(74,111,181,.18); border:1px solid #2c3a55; border-radius:7px;
                 padding:6px 8px; font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  :where(body.p-index) #hxtip .tt-chip {font:600 11.5px 'Oswald',sans-serif; border-radius:4px; padding:1px 7px; color:#fff;}
  :where(body.p-index) #hxtip .tt-chip.mc {background:#3b6fb5;}
  :where(body.p-index) #hxtip .tt-chip.cd {background:#3a4254;}
  :where(body.p-index) #hxtip .tt-chip.rng {background:#33405a;} /* (25.07) дальность применения */
  :where(body.p-index) #hxtip .tt-d {color:#c3ccd7; margin-top:7px; white-space:normal;}
  /* ALT-заметки как в доте: скрыты, зажал ALT (или тап по кнопке) — раскрылись */
  :where(body.p-index) #hxtip .tt-n {display:none; margin-top:7px; background:#171d27; border:1px solid #2b3546; border-radius:7px;
               padding:7px 9px; color:#aab6c5;}
  :where(body.p-index) #hxtip .tt-n div {margin:2px 0;}
  body:where(.p-index).hx-alt #hxtip .tt-n, :where(body.p-index) #hxtip.ttshow .tt-n {display:block;}
  :where(body.p-index) #hxtip .tt-hint {margin-top:6px; text-align:right; color:#5b6674; font-size:10.5px;}
  :where(body.p-index) #hxtip .tt-altbtn {border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:6px;
                    padding:2px 10px; font:600 11px 'Inter',sans-serif; cursor:pointer;}
  @media (max-width:640px) {
    :where(body.p-index) #hxtip {left:8px !important; right:8px; bottom:8px; top:auto !important; max-width:none; pointer-events:auto;
           max-height:70vh; overflow:auto;}}
  :where(body.p-index) [data-tti], :where(body.p-index) [data-tta] {cursor:help;}
  /* (окно №25, аудит красоты) счётчик лимита погашен из мутного золота #c9a227 в серый: служебная строка не должна светиться (жёлтый был лишним очагом) */
  :where(body.p-index) .spend { margin-left:auto; font-size:12.5px; color:var(--mut); white-space:nowrap; cursor:pointer;
           display:inline-flex; align-items:center; gap:4px; }
  :where(body.p-index) .spend:hover { text-decoration:underline dotted; }
  /* пояснение к «1 запрос = 1 поиск» (Вова 10.07): раньше жило только в title-подсказке при наведении — на телефоне её не существует вовсе. Теперь клик по бейджу (или по вопросику) раскрывает строку ниже. */
  :where(body.p-index) .spendhint { display:none; margin-top:8px; font-size:13px; line-height:1.5; color:var(--txt);
               background:rgba(201,162,39,.08); border:1px solid rgba(201,162,39,.35);
               border-radius:8px; padding:8px 12px; }
  :where(body.p-index) .searchcard.compact .spendhint { display:none !important; }
  :where(body.p-index) .searchcard.compact { padding:14px 20px; }
  :where(body.p-index) .searchcard.compact h2, :where(body.p-index) .searchcard.compact .hint, :where(body.p-index) .searchcard.compact .digrow, :where(body.p-index) .searchcard.compact .exrow { display:none; }
  :where(body.p-index) .searchcard.compact .searchrow { margin-top:0; }
  :where(body.p-index) .searchcard.compact .searchrow input { padding:9px 13px; font-size:14px; }
  :where(body.p-index) .searchcard.compact .btn { padding:8px 15px; font-size:13.5px; }
  /* ================= РЕДИЗАЙН 2.0 (мобильный аудит, 12.07) ================= Единая юзер-шапка (2 строки), дровер админа, скоба-группировка выдачи, свитч сводки, витрина-строка, sticky CTA демо, футер МЕНЮ/ДОКУМЕНТЫ. Токены и размеры — из re-design 2.0/README.md (hi-fi). */
  /* ── ШАПКА → /css/header.css (Фаза В). Ниже страничное: .utab svg ($ico), .admview («Вид»), дровер «Служебное», .aseg. ── */
  /* .utab.on / .ubadge(+freeb/subcta) → /css/header.css (Фаза В) */
  /* (25.07) .uiconf-* ВЫПИЛЕНЫ: подтверждения и ошибки — единое окно сайта ui_modal.php (классы .csm-*, API csConfirm/csAlert). Одна реализация на весь сайт, иначе модалки разъезжаются по стилю. */
  /* .admdesk → /css/header.css (Фаза В) */
  /* «вид как» — выпадающий список (Вова 12.07): в шапке кнопка «Вид ▾», варианты выезжают по клику, а не стоят три в ряд */
  :where(body.p-index) .admview { position:relative; display:inline-flex; flex:none; }
  :where(body.p-index) .admview .avbtn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px;
                    border:1px solid var(--line); border-radius:8px; background:transparent;
                    color:var(--mut); font:600 12px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; }
  :where(body.p-index) .admview .avbtn:hover { border-color:#3d4a5e; color:var(--txt); }
  :where(body.p-index) .admview .avbtn .avarr { font-size:9px; }
  :where(body.p-index) .admview .avlist { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:160;
                     background:var(--card); border:1px solid var(--line); border-radius:10px;
                     padding:4px; min-width:132px; flex-direction:column;
                     box-shadow:0 10px 26px rgba(0,0,0,.45); }
  :where(body.p-index) .admview.open .avlist { display:flex; }
  :where(body.p-index) .admview .avlist span { padding:7px 12px; font-size:12px; font-weight:600; color:var(--mut);
                          cursor:pointer; border-radius:7px; white-space:nowrap; }
  :where(body.p-index) .admview .avlist span:hover { color:var(--txt); }
  :where(body.p-index) .admview .avlist span.on { background:var(--brand); color:var(--onbrand); }
  /* .ukey (десктоп-скрытие) → /css/header.css (Фаза В) */
  /* дровер служебной навигации админа («бургер в шапке», решение аудита C) */
  /* .svnum → /css/header.css (Фаза В) */
  :where(body.p-index) .aseg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  :where(body.p-index) .aseg span { padding:5px 11px; font-size:11.5px; font-weight:600; color:var(--mut); cursor:pointer; }
  :where(body.p-index) .aseg span.on { background:var(--brand); color:var(--onbrand); font-weight:700; }
  /* витрина гостя: строка вместо простыни (M1) */
  :where(body.p-index) .showstrip { display:flex; gap:9px; padding:11px 16px; margin-bottom:12px; align-items:flex-start;
               background:rgba(197,240,43,.045); border:1px solid #1a212c; border-radius:10px;
               font-size:12.5px; line-height:1.5; color:var(--mut); }
  :where(body.p-index) .showstrip svg { flex:none; margin-top:1px; }
  /* однострочный свитч сводки (M2) */
  :where(body.p-index) .digsw { display:flex; align-items:center; gap:10px; margin-top:12px; padding:11px 12px;
           background:#0b0e13; border:1px solid var(--line); border-radius:10px; cursor:pointer;
           user-select:none; }
  :where(body.p-index) .digsw input { display:none; }
  :where(body.p-index) .digsw .swtrack { width:34px; height:20px; border-radius:10px; background:var(--line); position:relative;
                    flex:none; transition:background .15s; }
  :where(body.p-index) .digsw .swtrack::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
                           border-radius:50%; background:#8b96a5; transition:left .15s, background .15s; }
  :where(body.p-index) .digsw input:checked + .swtrack { background:var(--brand); }
  :where(body.p-index) .digsw input:checked + .swtrack::after { left:16px; background:#10130a; }
  :where(body.p-index) .digsw .swtxt { font-size:13px; color:var(--txt); min-width:0; }
  :where(body.p-index) .digsw .swnote { margin-left:auto; font-size:11.5px; color:var(--mut); text-align:right; flex:none; }
  :where(body.p-index) .digsw.dead { opacity:.55; cursor:default; }
  /* скоба-группировка смысловых блоков выдачи (P1, ПК + мобила) */
  :where(body.p-index) .sgroup { border-left:3px solid #3a4656; padding:2px 0 2px 10px; }
  /* (Вова 12.07) пара БЕЗ лаймовой скобы и лаймового лейбла — слишком много цветов; скоба и «Разбор N» единого серого цвета у пары и пояснения */
  :where(body.p-index) .slabel { font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
            color:var(--mut); margin-bottom:6px; }
  /* шапка карточки ролика в выдаче: превью + название 2 строки + мета */
  :where(body.p-index) .vhead2 { display:flex; gap:10px; align-items:flex-start; margin-bottom:8px; }
  :where(body.p-index) .vhead2 .thumb { width:86px; height:50px; border-radius:8px; object-fit:cover; flex:none;
                   cursor:pointer; border:1px solid var(--line); }
  /* (Вова, окно №11) название ролика целиком: кламп 2 → 3 строки */
  :where(body.p-index) .vhead2 .vtit { margin:0; font:600 14.5px/1.4 'Inter',sans-serif; display:-webkit-box;
                  -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  :where(body.p-index) .vhead2 .vmeta { font-size:11.5px; color:var(--mut); margin-top:4px; }
  /* (Вова, окно №11) кнопка «Войти через Steam» в демо — СТИМОВСКАЯ (тёмная, цвета Steam), а не наша лаймовая CTA */
  :where(body.p-index) .btn-steam { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px;
               background:#1b2838; border:1px solid #2a475e; color:#e8ecf2; font-weight:700;
               font-size:14px; text-decoration:none; cursor:pointer; }
  :where(body.p-index) .btn-steam:hover { background:#223349; border-color:#3b5a77; }
  :where(body.p-index) .btn-steam svg { flex:none; }
  /* фильтры-аккордеон: бейдж-счётчик и сводка выбора (M1/M2). (Вова 12.07) лаймовый бейдж ТОЛЬКО у счётчика выбранных фильтров #fCnt; счётчики сегментов внутри чипов — однородные с текстом (правила выше) */
  :where(body.p-index) #fCnt.fcnt { background:var(--brand); color:var(--onbrand); border-radius:9px; font-size:11px;
          font-weight:700; padding:1px 7px; }
  :where(body.p-index) #fSum { font-size:12px; color:#5a6472; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
          min-width:0; }
  /* sticky CTA гостевого демо (M6) */
  :where(body.p-index) #stickyCta { display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
               border-top:1px solid var(--line); background:rgba(18,22,29,.97); padding:10px 14px 14px; }
  :where(body.p-index) #stickyCta.show { display:block; }
  :where(body.p-index) #stickyCta .scin { max-width:480px; margin:0 auto; }
  :where(body.p-index) #stickyCta .sctit { text-align:center; font-family:'Oswald',sans-serif; font-weight:600; font-size:15px;
                      color:var(--txt); margin-bottom:9px; }
  :where(body.p-index) #stickyCta .scbtn { display:flex; align-items:center; justify-content:center; gap:9px;
                      background:var(--brand); color:var(--onbrand); border-radius:11px; height:48px;
                      font-size:14.5px; font-weight:700; text-decoration:none; }
  :where(body.p-index) #stickyCta .scbtn:hover { background:var(--brand2); }
  :where(body.p-index) #stickyCta .scsub { text-align:center; font-size:11px; color:#5a6472; margin-top:7px; }
  /* (Вова 12.07) сдвиг футера под колонку выдачи (padding-left:326px) УБРАН: футер теперь по центру страницы, как на остальных страницах */
  /* порядок M1/M2 на мобиле: поиск первым, фильтры-аккордеон после (JS переносит панель внутрь .main следом за карточкой поиска) */
  @media (max-width:920px) {
    :where(body.p-index) .searchcard h2 { font-family:'Oswald',sans-serif; font-size:22px; }
    :where(body.p-index) .searchrow .btn-acc { flex:1; justify-content:center; min-height:44px; }
    body:where(.p-index).hascta    /* мобильный свап admdesk/ukey → /css/header.css (Фаза В) */
    /* (Вова 12.07) примеры строго в 2 строки: без слова «Примеры:», :where(body.p-index) чипы и жёлтая строка ужаты — 3 чипа встают в строку, :where(body.p-index) «1 запрос…» на вторую */
    :where(body.p-index) .exchip { padding:3px 8px; font-size:11.5px; }
    :where(body.p-index) .spend { font-size:11.5px; }}
  /* совсем узкие телефоны (~350px): ещё чуть ужимаем, чтобы не выло 3-й строки */
  @media (max-width:365px) {
    :where(body.p-index) .exchip { padding:3px 7px; font-size:11px; }
    :where(body.p-index) .spend { font-size:10.5px; }}
  /* (Вова 12.07) до 460px кнопке «Найти» рядом с полем тесно (текст ломался в две строки) — поле на всю ширину, «Найти» и «Сброс» строкой ниже */
  @media (max-width:460px) {
    :where(body.p-index) .searchrow input { flex:1 1 100%; }
    :where(body.p-index) .searchrow .btn-acc { flex:1 1 auto; justify-content:center; white-space:nowrap; }
    :where(body.p-index) .searchrow #clearAll { flex:0 0 auto; white-space:nowrap; }}/* ==================== coaching.php ==================== */
html:has(body.p-coaching) { overflow-x:clip; }

  body:where(.p-coaching) {
    --brand:#c5f02b; --bg:#0e1116; --panel:#161b22; --panel2:#1b222c;
    --text:#e6edf3; --muted:#8b96a5; --line:#242c38; --err:#e6482e; --ok:#39c26d;
    /* (ПЕРЕПРОВЕРКА 28.07) --err2 нужен ui_modal.php: им красится КРАСНАЯ кнопка опасного действия (.csm-b.pri.danger). Токена тут не было, а сегодня на страницу приехали шесть окон с tone:'danger' («Удалить занятие», «Убрать ученика»…). Невалидное var() не откатывается на лайм — свойство сбрасывается в transparent, и «Удалить» выглядело бы ровно как «Оставить». */
    --err2:#ff6a4d;
    /* канон-алиасы (окно №17, фаза А «единый портал»): шапка скопирована с поиска и говорит на языке канона — маппим на локальные токены */
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:#10130a; --brand2:#d9ff56;
  }
  :where(body.p-coaching) * {box-sizing:border-box}
  body:where(.p-coaching) {margin:0; background:var(--bg); color:var(--text);
       font-family:'Inter',system-ui,sans-serif;}body:where(.p-coaching) { overflow-x:clip; } /* режет горизонтальный скролл; clip, а не hidden — иначе двойной вертикальный скролл */
  :where(body.p-coaching) a {color:var(--brand); text-decoration:none}
  :where(body.p-coaching) h1, :where(body.p-coaching) h2, :where(body.p-coaching) h3 {font-family:'Oswald',sans-serif; margin:0}
  /* ── ШАПКА → /css/header.css (Фаза В). Ниже — только дровер «Служебное». ── */
  /* .svnum + мобильный свап admdesk/ukey → /css/header.css (Фаза В) */
  /* (мелкие фиксы, 17.07) флеш сам гаснет через 5с — чистый CSS, переживает AJAX-перерисовку (анимация стартует заново у нового элемента) */
  :where(body.p-coaching) .flash {background:rgba(197,240,43,.10); border:1px solid var(--brand);
         border-radius:10px; padding:10px 14px; margin-bottom:18px; font-weight:600;
         overflow:hidden; animation:flashOut .5s ease 5s forwards}
  @keyframes flashOut {to{opacity:0; height:0; padding:0; margin:0; border-width:0}}
  /* (22.07 v3) плашка бонуса за занятия — ПОСТОЯННАЯ, НЕ гаснет (в отличие от .flash, который живёт 5с). Пусть мозолит глаза и напоминает о подарке. Вид тот же лаймовый, но без анимации ухода. */
  :where(body.p-coaching) .bonusbar {background:rgba(197,240,43,.10); border:1px solid var(--brand);
         border-radius:10px; padding:10px 14px; font-weight:600}
  /* (24.07, Вова) .bonuspill — тот же лаймовый подарок, но КОМПАКТНО: пилюля в шапке карточки ученика, справа от «Привет, ник!» (margin-left:auto прижимает её к правому борту, на узком экране она просто переносится строкой ниже). Заменила широкую .bonusbar под треком цели. .bp-pro — слово «Про» с алмазом лаймом: тот же значок и цвет, что у бейджа тарифа в шапке сайта. */
  :where(body.p-coaching) .bonuspill {margin-left:auto; display:inline-flex; align-items:center; gap:6px;
         flex-wrap:wrap; background:rgba(197,240,43,.10); border:1px solid var(--brand);
         border-radius:20px; padding:5px 13px; font-size:12.5px; font-weight:600}
  :where(body.p-coaching) .bp-pro {display:inline-flex; align-items:center; gap:4px; color:var(--brand)}
  /* (24.07, Вова) «Как удобно платить» — кнопки В ОДНУ СТРОКУ, не в две. Двойной класс .paysel.paysel-1line специально: общий .paysel живёт в pay_inc.php, который подключается НИЖЕ этого <style> (pay_inc_assets), и при равной специфичности перебил бы нас своим flex-wrap:wrap / basis 130px. Селектор из двух классов весомее — работает независимо от порядка файлов. */
  :where(body.p-coaching) .paysel.paysel-1line {flex-wrap:nowrap}
  :where(body.p-coaching) .paysel.paysel-1line label {flex:1 1 0; min-width:0; white-space:nowrap; padding:11px 12px; font-size:13.5px}
  /* (Фаза В) подсветка блока при переходе по якорю (из колокола/ссылки): занятие #lesN или общий отзыв #pubrev коротко «дышит» зелёным */
  @keyframes coa-focusGlow {
    0%   { box-shadow:0 0 0 0 rgba(197,240,43,0); }
    12%  { box-shadow:0 0 0 3px rgba(197,240,43,.35), 0 0 30px 6px rgba(197,240,43,.5); }
    100% { box-shadow:0 0 0 0 rgba(197,240,43,0); }
  }
  :where(body.p-coaching) .coa-focusGlow { animation:coa-focusGlow 1.9s ease-out; border-radius:12px; }
  :where(body.p-coaching) .card {background:var(--panel); border:1px solid var(--line); border-radius:14px;
        padding:18px; margin-bottom:16px}
  :where(body.p-coaching) .card h2 {font-size:18px; margin-bottom:12px}
  :where(body.p-coaching) .add-row {display:flex; gap:8px; flex-wrap:wrap; align-items:center}
  /* (Вова, 18.07) верх тренера в 2 колонки: «добавить ученика» + календарь */
  :where(body.p-coaching) input[type=text], :where(body.p-coaching) input[type=date], :where(body.p-coaching) input[type=url], :where(body.p-coaching) textarea, :where(body.p-coaching) input[type=number] {
    background:var(--panel2); border:1px solid var(--line); border-radius:8px;
    color:var(--text); padding:9px 11px; font-family:inherit; font-size:14px; width:100%}
  :where(body.p-coaching) textarea {min-height:60px; resize:vertical}
  /* (22.07) заметка тренера без внутреннего скролла: сама растёт под текст (JS autoGrow), при желании тянется за угол. Скролл убран. */
  :where(body.p-coaching) textarea[name=note] {overflow:hidden; min-height:80px}
  :where(body.p-coaching) button, :where(body.p-coaching) .btn {background:var(--brand); color:#0e1116; border:0; border-radius:8px;
     padding:9px 16px; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit}
  :where(body.p-coaching) button.ghost {background:transparent; color:var(--muted); border:1px solid var(--line)}
  :where(body.p-coaching) button.ghost:hover {color:var(--text); border-color:var(--err)}
  :where(body.p-coaching) button.mini {padding:4px 10px; font-size:12.5px}
  :where(body.p-coaching) .stu {border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px;
       background:var(--panel2)}
  /* (Вова 23.07) у кого есть запись на занятие — ТОЛЬКО оранжевая полоса сверху, без свечения/фона (не должно казаться, что карточка выпадает на тебя) */
    :where(body.p-coaching) .stu-head {display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px}
  :where(body.p-coaching) .stu-head .nick {font-family:'Oswald',sans-serif; font-weight:700; font-size:18px}
  :where(body.p-coaching) .tag {font-size:12px; color:var(--muted); border:1px solid var(--line);
       border-radius:20px; padding:2px 10px}
  /* (окно №25, аудит красоты) статус-бейдж уведён из болотного #39c26d в тихую лаймовую схему: рядом с лаймовым треком два разных зелёных читались как ошибка палитры (анти-находка А4) */
  :where(body.p-coaching) .tag.on {color:var(--brand); background:rgba(197,240,43,.08); border-color:rgba(197,240,43,.45)}
  :where(body.p-coaching) .tag.warn {color:#0e1116; background:var(--err); border-color:var(--err)}
  :where(body.p-coaching) .grid2 {display:grid; grid-template-columns:1fr 1fr; gap:12px}
  :where(body.p-coaching) .grid3 {display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
  /* (22.07) выбор метода оплаты в анкете + карточке — сегментированные кнопки */
  :where(body.p-coaching) .paysel {display:flex; gap:8px; flex-wrap:nowrap; margin:2px 0 4px}
  :where(body.p-coaching) .paysel label {flex:1 1 0; min-width:0; white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:6px;
     cursor:pointer; border:1px solid var(--line); border-radius:10px; padding:11px 12px;
     background:var(--panel2); color:var(--muted); font-weight:700; font-size:14px;
     transition:border-color .15s, color .15s, background .15s}
  :where(body.p-coaching) .paysel label:hover {border-color:var(--err); color:var(--text)}
  :where(body.p-coaching) .paysel input {position:absolute; opacity:0; width:0; height:0}
  :where(body.p-coaching) .paysel label:has(input:checked) {border-color:var(--brand); color:var(--brand); background:rgba(197,240,43,.08)}
  /* (22.07) чип-контакт с копированием по клику (Discord/TG на карточке ученика) */
  :where(body.p-coaching) .copy-chip {display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12.5px;
     color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:20px;
     padding:3px 11px; cursor:pointer; transition:border-color .15s, color .15s, background .15s}
  :where(body.p-coaching) .copy-chip:hover {border-color:var(--brand); color:var(--brand); background:rgba(197,240,43,.06)}
  :where(body.p-coaching) .copy-chip:active {transform:scale(.97)}
  :where(body.p-coaching) .copy-chip .cc-cap {color:var(--muted); font-weight:400}
  :where(body.p-coaching) .copy-chip .cc-ic {opacity:.6; font-size:12px}
  :where(body.p-coaching) .copy-chip.ok {border-color:var(--brand); color:var(--brand)}
  :where(body.p-coaching) .copy-chip.ok .cc-ic {opacity:1}
  /* (22.07) прежние ники ученика — тихо-серым рядом с текущим */
    /* (22.07) бейдж метода оплаты */
  :where(body.p-coaching) .pay-badge {font-size:12px; color:var(--muted); border:1px dashed var(--line);
     border-radius:20px; padding:2px 10px; white-space:nowrap}
  /* (22.07) свёртка «Заметка» на карточке дешборда */
                @media(max-width:720px) { :where(body.p-coaching) .grid2, :where(body.p-coaching) .grid3 {grid-template-columns:1fr} body:where(.p-coaching) {padding:14px}}
  :where(body.p-coaching) label.fld {display:block; font-size:12px; color:var(--muted); margin:8px 0 4px;
            text-transform:uppercase; letter-spacing:.05em; font-weight:700}
  :where(body.p-coaching) .row-actions {display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center}
  :where(body.p-coaching) .row-actions .links {margin-left:auto; display:flex; gap:12px; font-size:13px}
  :where(body.p-coaching) .bar {height:8px; background:#0e1116; border-radius:5px; overflow:hidden; margin-top:6px;
       position:relative}
  :where(body.p-coaching) .bar>i {display:block; height:8px; background:var(--brand); border-radius:5px}
  /* (окно №25, аудит красоты) момент гордости: вся домашка закрыта — бейдж «Готов к ранкеду ✓» + один блик по полосе (канон coa-mmrshine витрины). По событию, один раз, гаснет сам — не ёлка. */
  :where(body.p-coaching) .rk-ready {display:inline-block; margin-left:8px; font-size:12px; font-weight:700;
       color:var(--brand); border:1px solid rgba(197,240,43,.45);
       background:rgba(197,240,43,.08); border-radius:20px; padding:2px 10px;
       white-space:nowrap}
  :where(body.p-coaching) .bar .shine {position:absolute; top:0; bottom:0; left:-40%; width:35%;
       transform:skewX(-20deg); opacity:0; pointer-events:none;
       background:linear-gradient(90deg, transparent, rgba(217,255,86,.55), transparent)}
  :where(body.p-coaching) .bar.full .shine {animation:coa-mmrshine .9s ease-out; opacity:1}
  @keyframes coa-mmrshine { from{left:-40%} to{left:110%} }
  :where(body.p-coaching) .muted {color:var(--muted)}
  :where(body.p-coaching) .pill {display:inline-block; font-size:12.5px; color:var(--muted);
        border:1px solid var(--line); border-radius:20px; padding:3px 10px; margin:2px 4px 2px 0}
  /* (мелкие фиксы, 17.07) правило «каждый элемент живой»: кликабельная пилюля (герои ✎ и т.п.) явно отвечает на наведение и нажатие */
  :where(body.p-coaching) .pill[onclick] {transition:all .15s ease-in-out}
  :where(body.p-coaching) .pill[onclick]:hover {border-color:var(--brand); color:var(--text); background:rgba(197,240,43,.07)}
  :where(body.p-coaching) .pill[onclick]:active {transform:scale(.96)}
  /* (мелкие фиксы, 17.07) цифры ММР подрастают под курсором — для прикола */
  :where(body.p-coaching) .gtrk .gt-num {transition:transform .15s ease-in-out}
  :where(body.p-coaching) .gtrk .gt-num:hover {transform:scale(1.18)}
  /* (22.07) ММР в списке учеников НЕ растёт на ховере — тренеру это мешало.
           Ученику в его ЛК анимация ММР остаётся (.gtrk .gt-num). */
  :where(body.p-coaching) .stu .pill b {display:inline-block}
  /* (мелкие фиксы, 17.07) карточка ученика у тренера: тень + подъём + ник зеленеет на ховере */
  :where(body.p-coaching) .stu {transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out,
       transform .15s ease-in-out}
  :where(body.p-coaching) .stu[onclick]:hover {border-color:rgba(197,240,43,.45); box-shadow:0 12px 34px rgba(0,0,0,.45);
       transform:translateY(-2px)}
  :where(body.p-coaching) .stu[onclick]:hover .nick {color:var(--brand)}
  /* (31.07) отзыв ученика отдельным блоком под карточкой занятия */
  :where(body.p-coaching) .rv-under {margin:-4px 0 14px; padding:10px 14px; border:1px solid rgba(197,240,43,.4);
    background:rgba(197,240,43,.05); border-radius:10px}
  :where(body.p-coaching) .letter {background:var(--panel2); border-left:3px solid var(--brand);
        border-radius:8px; padding:10px 12px; margin-top:10px; font-size:14px}
  :where(body.p-coaching) .empty {color:var(--muted); padding:14px 0}
  /* (22.07) чёткая граница между занятиями: лаймовый кант сверху + залитая цветом шапка с датой, чтобы конец одного занятия не сливался с началом следующего. Шапка тянется во всю ширину карточки (отрицательные поля). */
  :where(body.p-coaching) .les {border:1px solid var(--line); border-radius:12px; background:var(--panel2);
       padding:0 16px 16px; margin-bottom:24px; overflow:hidden}
  :where(body.p-coaching) .les-head {display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
       margin:0 -16px 12px; padding:11px 16px;
       background:linear-gradient(90deg, rgba(197,240,43,.13), rgba(197,240,43,.02));
       border-top:3px solid var(--brand); border-bottom:1px solid var(--line)}
  /* (22.07) клик-подсказка «?»: жмёшь — раскрывается пояснение (не плавающий hover) */
  :where(body.p-coaching) .qtip {display:inline-block; position:relative; vertical-align:middle}
  :where(body.p-coaching) .qtip>summary {list-style:none; cursor:pointer; color:var(--muted); font-size:12.5px;
       font-weight:400; user-select:none; padding:0 2px}
  :where(body.p-coaching) .qtip>summary::-webkit-details-marker {display:none}
  :where(body.p-coaching) .qtip[open]>summary {color:var(--brand)}
  :where(body.p-coaching) .qtip .qtip-b {position:absolute; z-index:60; left:0; top:150%; width:min(330px,82vw);
       background:#161b22; border:1px solid var(--line); border-radius:9px; padding:9px 12px;
       font-size:12.5px; font-weight:400; color:var(--text); line-height:1.55;
       box-shadow:0 12px 32px rgba(0,0,0,.55); white-space:normal}
  /* (мелкие фиксы, 17.07) текст задачи кликабелен как галочка */
  :where(body.p-coaching) .tsk .txt {cursor:pointer}
  /* (мелкие фиксы, 17.07) «убрать» в «Перед ранкедом» — видна только после галочки */
  :where(body.p-coaching) .rk-del {display:none; margin-left:auto; flex:none; background:transparent; color:var(--muted);
       border:1px solid var(--line); border-radius:20px; padding:1px 10px; font-size:11.5px; cursor:pointer}
  :where(body.p-coaching) .rk-del:hover {color:var(--text); border-color:var(--brand)}
  :where(body.p-coaching) .tsk.done .rk-del {display:inline-block}
  /* (мелкие фиксы, 17.07) контакты: красные «*» + своё уведомление вместо системного пузыря браузера */
  :where(body.p-coaching) .cts-f {position:relative; display:block}
  :where(body.p-coaching) .cts-f input {width:100%}
  /* (мелкие фиксы, 18.07) серая подпись над полем — видно, что где, даже когда плейсхолдер уже скрыт заполненным значением */
  :where(body.p-coaching) .cts-cap {display:block; font-size:11px; color:var(--muted); margin-bottom:3px}
  :where(body.p-coaching) .cts-cap .req {color:var(--err); font-weight:700}
  :where(body.p-coaching) input.bad, :where(body.p-coaching) textarea.bad, :where(body.p-coaching) select.bad {border-color:var(--err) !important}
  :where(body.p-coaching) .cts-err {display:none; margin-top:8px; font-size:12.5px; color:var(--err);
       border:1px solid var(--err); background:rgba(230,72,46,.08); border-radius:8px; padding:7px 11px}
  /* (мелкие фиксы, 17.07) мастер-проверка: фирменный тост вместо системного пузыря браузера — для ЛЮБОЙ формы страницы */
  :where(body.p-coaching) .frm-toast {position:fixed; left:50%; transform:translateX(-50%); bottom:26px; z-index:2000;
       color:var(--err); border:1px solid var(--err); background:#161b22; border-radius:10px;
       padding:9px 16px; font-size:13px; font-weight:600; opacity:0; pointer-events:none;
       transition:opacity .3s; box-shadow:0 10px 30px rgba(0,0,0,.5)}
  :where(body.p-coaching) .frm-toast.on {opacity:1}
  /* (мелкие фиксы, 17.07) «фокус-мод» занятия ученика: клик по занятию — тень на всё вокруг (.les-dim), само занятие поднимается над ней. Классы les-*, не «ad» (адблок-правило) */
  :where(body.p-coaching) .les-dim {position:fixed; inset:0; background:rgba(4,6,10,.72); z-index:1500;
       opacity:0; pointer-events:none; transition:opacity .25s}
  :where(body.p-coaching) .les-dim.on {opacity:1; pointer-events:auto}
  :where(body.p-coaching) #myles .les {cursor:pointer}
  :where(body.p-coaching) #myles .les.focus {position:relative; z-index:1501; cursor:auto;
       box-shadow:0 14px 44px rgba(0,0,0,.65)}
  /* (мелкие фиксы, 17.07) подсказка «свернуть/развернуть» в шапке занятия ученика */
  :where(body.p-coaching) .les-head::-webkit-details-marker {display:none}
  :where(body.p-coaching) details.les:not([open])>summary.les-head {margin-bottom:0}
  /* (05.08, этап 5 «ОБЪЕДИНЕНИЕ_КАРТ») КОМПАКТНЫЙ СПИСОК ЗАНЯТИЙ (.lsn*)
           и строка «эта катка на карте» (.mtrow*). Классы не «ad*» — адблок
           режет такие имена вместе с содержимым. Строка списка держит ОДНУ
           высоту: маркер details убран, подсказка «развернуть» — своя, справа.
           Тех же чипов .mtrow-l хватает и на ссылку «Выводы занятия»: два
           разных вида кнопок в одной строке читались бы как разные по весу. */
  :where(body.p-coaching) .lsnav-cap {font-size:12.5px; margin:-6px 0 8px}
  :where(body.p-coaching) details.lsn {border-top:1px solid var(--line)}
  :where(body.p-coaching) details.lsn:first-of-type {border-top:0}
  :where(body.p-coaching) .lsn-s {list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
       flex-wrap:wrap; padding:7px 2px; font-size:13.5px}
  :where(body.p-coaching) .lsn-s::-webkit-details-marker {display:none}
  :where(body.p-coaching) .lsn-s:hover .lsn-d {color:var(--brand)}
  :where(body.p-coaching) .lsn-d {font-family:'Oswald',sans-serif; font-weight:700; font-size:15px; flex:none;
       transition:color .15s ease-in-out}
  :where(body.p-coaching) .lsn-h {max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  :where(body.p-coaching) .lsn-x {margin-left:auto; font-size:11px}
  :where(body.p-coaching) .lsn-b {display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:0 2px 10px}
  :where(body.p-coaching) .mtrow {display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:10px}
  :where(body.p-coaching) .lsn-b .mtrow {margin-top:0}
  :where(body.p-coaching) .mtrow-c {font-size:12.5px; color:var(--muted)}
  :where(body.p-coaching) .mtrow-l {display:inline-flex; align-items:center; gap:6px; text-decoration:none;
       border:1px solid var(--line); border-radius:8px; padding:3px 9px; line-height:1.5;
       font-size:12.5px; color:var(--text); transition:.15s ease-in-out}
  :where(body.p-coaching) .mtrow-l:hover {border-color:var(--brand); color:var(--brand)}
  :where(body.p-coaching) .mtrow-n {font-size:12px}
  :where(body.p-coaching) .les-head .d {font-family:'Oswald',sans-serif; font-weight:700; font-size:17px}
  :where(body.p-coaching) .les .body {white-space:pre-wrap; font-size:14px; line-height:1.55}
  :where(body.p-coaching) .les .nextf {background:rgba(240,201,43,.06); border:1px dashed #f0c92b;
       border-radius:8px; padding:9px 12px; margin-top:10px; font-size:13.5px}
  /* (окно №18) «Главный фокус» в «Перед ранкедом» съезжал на системный шрифт — прибиваем семейство/размер и для блока, и для потрохов $mdBlock */
  :where(body.p-coaching) .nextf, :where(body.p-coaching) .nextf * {font-family:'Inter',system-ui,sans-serif}
  :where(body.p-coaching) .nextf {font-size:14px; line-height:1.55}
  /* (окно №18) «Следующее занятие», вариант Б: нумерованные шаги */
  :where(body.p-coaching) .step {display:flex; gap:12px; margin-top:14px; align-items:flex-start}
  :where(body.p-coaching) .step-n {width:24px; height:24px; border-radius:50%; background:var(--brand); color:#0e1116;
          font-weight:800; font-size:13px; display:flex; align-items:center;
          justify-content:center; flex:none; margin-top:1px}
  :where(body.p-coaching) .step-b {flex:1; min-width:0}
  :where(body.p-coaching) .step-t {font-size:14px; font-weight:600}
  /* (окно №18) трек цели «плитки на треке»: плитка «сейчас» на точке прогресса, старт/цель по краям. Дубли в ЛК и profile.php — правь оба! */
  :where(body.p-coaching) .gtrk {position:relative; height:112px; margin-top:14px}
  :where(body.p-coaching) .gtrk .gt-bar {position:absolute; left:0; right:0; bottom:24px; height:10px;
       background:var(--panel2); border-radius:6px; overflow:hidden}
  :where(body.p-coaching) .gtrk .gt-bar i {display:block; height:100%; background:var(--brand)}
  :where(body.p-coaching) .gtrk .gt-lbl {font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
  :where(body.p-coaching) .gtrk .gt-lbl.g {color:var(--brand)}
  :where(body.p-coaching) .gtrk .gt-num {font-family:'Oswald',sans-serif; font-size:24px; font-weight:700;
       color:var(--text); line-height:1.1}
  :where(body.p-coaching) .gtrk .gt-num.s {color:var(--muted); font-size:19px; font-weight:500}
  :where(body.p-coaching) .gtrk .gt-num.g {color:var(--brand); font-size:26px}
  :where(body.p-coaching) .gtrk .gt-start {position:absolute; left:0; bottom:46px}
  :where(body.p-coaching) .gtrk .gt-goal {position:absolute; right:0; bottom:46px; text-align:right}
  :where(body.p-coaching) .gtrk .gt-now {position:absolute; bottom:22px; transform:translateX(-50%);
       text-align:center; z-index:2}
  :where(body.p-coaching) .gtrk .gt-card {background:var(--panel2); border:1px solid var(--brand);
       border-radius:10px; padding:5px 13px; display:inline-block}
  :where(body.p-coaching) .gtrk .gt-stem {width:2px; height:9px; background:var(--brand); margin:0 auto}
  :where(body.p-coaching) .gtrk .gt-dot {width:14px; height:14px; background:var(--brand);
       border:3px solid var(--bg); border-radius:50%; margin:-2px auto 0}
  :where(body.p-coaching) .gtrk .gt-foot {position:absolute; left:0; right:0; bottom:0; display:flex;
       justify-content:space-between; font-size:11.5px; color:var(--muted)}
  :where(body.p-coaching) .gtrk .gt-foot .g {color:var(--brand); font-weight:600}
  :where(body.p-coaching) .les .nextf::before {content:''; display:inline-block; width:15px; height:15px;
       margin-right:7px; vertical-align:-3px;
       background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 7a5 5 0 1 0 5 5'/><path d='M13 3.055a9 9 0 1 0 7.941 7.945'/><path d='M15 6v3h3l3 -3h-3v-3z'/><path d='M15 9l-3 3'/></svg>") no-repeat center/contain}
  :where(body.p-coaching) .hw-wrap {border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:40px}
  :where(body.p-coaching) .hw-part {padding:10px 14px}
  :where(body.p-coaching) .hw-part + .hw-part {border-top:1px solid var(--line)}
  :where(body.p-coaching) .hw-hw {border-left:3px solid #fff; background:rgba(0,0,0,.18)}
  :where(body.p-coaching) .tsk-in {flex:1; background:transparent; border:0; color:inherit; font:inherit;
       padding:2px 6px; border-radius:6px; min-width:100px}
  :where(body.p-coaching) .tsk-in:hover {background:rgba(255,255,255,.04)}
  :where(body.p-coaching) .tsk-in:focus {background:#0e1116; outline:1px solid var(--brand)}
  :where(body.p-coaching) .hw-focus {border-left:3px solid #f0c92b; background:rgba(240,201,43,.05); font-size:13.5px}
  /* (27.07, миграция 49) ВЫЖИМКА «ПЕРЕД ЗАНЯТИЕМ» — классы rc-* (НЕ «ad»). Два места, один визуальный язык и никаких новых цветов: карточка тренера (.rc-coach — она внутри ветки «$uiAdmin && $one», ученику не достаётся) и блок ученика в его занятии (.rc-stu, рамка и подложка как у .cr-wrap). Лайм — только на пометках и заголовке, кнопка сбора — ghost (правило №11). */
  :where(body.p-coaching) .rc-coach {margin-top:12px; border:1px solid var(--line); border-radius:12px;
       padding:11px 15px; background:rgba(197,240,43,.04)}
  :where(body.p-coaching) .rc-top {display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
  :where(body.p-coaching) .rc-cap {font-size:14px; color:var(--brand); text-transform:uppercase; letter-spacing:.4px}
  :where(body.p-coaching) .rc-meta {font-size:12px}
  :where(body.p-coaching) .rc-top .ghost {margin-left:auto}
  :where(body.p-coaching) .rc-li {font-size:14px; line-height:1.55; padding:3px 0 3px 15px; position:relative}
  :where(body.p-coaching) .rc-li::before {content:'—\00a0'; position:absolute; left:0; color:var(--brand)}
  :where(body.p-coaching) .rc-sub {margin-top:10px; font-size:11.5px; color:var(--muted);
       text-transform:uppercase; letter-spacing:.5px}
  :where(body.p-coaching) .rc-it {font-size:13.5px; line-height:1.5; padding:3px 0 3px 15px; position:relative}
  :where(body.p-coaching) .rc-it::before {content:'•'; position:absolute; left:2px}
  :where(body.p-coaching) .rc-rep::before {color:#f0c92b}
  :where(body.p-coaching) .rc-fix::before {color:var(--brand)}
  :where(body.p-coaching) .rc-tag {font-size:11.5px; color:var(--muted); white-space:nowrap}
  :where(body.p-coaching) .rc-err {font-size:13px; color:#f0c92b; margin-top:8px}
  :where(body.p-coaching) .rc-stu {margin-top:22px; border:1px solid var(--line); border-radius:12px;
       padding:12px 16px; background:rgba(255,255,255,.025)}
  /* Клипы под ошибки — подборка по занятию (окно подборок, 21.07). Классы cr-* (НЕ «ad»). v3 (выбор Вовы 21.07): ПК = таймлайн-навигация слева + панель темы справа (комбо A), телефон ≤920 = таймлайн-аккордеон (комбо C). ОДНА разметка: CSS-грид раскладывает head'ы и панели по колонкам на ПК и чередует их в столбик на мобиле (правило «большинство юзеров — мобилка»). Плеер — на всю ширину панели (решение Вовы: без огрызка справа), панель и так уже страницы. */
  /* свой блок-контейнер (Вова 21.07: клипы сливались с домашкой/фокусом) — нейтральная рамка + лаймовая подложка + воздух сверху (зелёный бордюр слева убран по просьбе Вовы) */
  :where(body.p-coaching) .cr-wrap {margin-top:26px; border:1px solid var(--line);
       border-radius:12px; padding:12px 16px; background:rgba(197,240,43,.03)}
  :where(body.p-coaching) .cr-flow {position:relative; display:grid; grid-template-columns:250px minmax(0,1fr);
       grid-template-rows:auto auto auto 1fr; column-gap:18px; margin-top:12px}
  :where(body.p-coaching) .cr-rail {position:absolute; left:17px; top:20px; bottom:20px; width:2px; z-index:0;
       background:linear-gradient(180deg, var(--brand), rgba(197,240,43,.12))}
  :where(body.p-coaching) .cr-hd {display:flex; gap:11px; align-items:flex-start; padding:9px 10px 9px 6px;
       border-radius:10px; cursor:pointer; align-self:start; position:relative; z-index:1;
       transition:background .15s ease-in-out}
  :where(body.p-coaching) .cr-hd:hover {background:rgba(255,255,255,.045)}
  :where(body.p-coaching) .cr-hd.on {background:var(--panel2)}
  :where(body.p-coaching) .cr-h1 {grid-column:1; grid-row:1} :where(body.p-coaching) .cr-h2 {grid-column:1; grid-row:2} :where(body.p-coaching) .cr-h3 {grid-column:1; grid-row:3}
  :where(body.p-coaching) .cr-dot {flex:none; width:22px; height:22px; border-radius:50%; background:var(--bg);
       border:2px solid var(--brand); color:var(--brand); font-size:11.5px; font-weight:800;
       line-height:18px; text-align:center; transition:all .15s ease-in-out}
  :where(body.p-coaching) .cr-hd.on .cr-dot {background:var(--brand); color:#10130a; box-shadow:0 0 0 4px rgba(197,240,43,.15)}
  :where(body.p-coaching) .cr-st {font-weight:600; font-size:13.5px}
  :where(body.p-coaching) .cr-hd.on .cr-st {color:var(--brand)}
  :where(body.p-coaching) .cr-sn {font-size:11.5px; color:var(--muted)}
  :where(body.p-coaching) .cr-pane {display:none; background:var(--panel2); border:1px solid var(--line);
       border-radius:12px; padding:6px 14px; min-width:0}
  :where(body.p-coaching) .cr-p1, :where(body.p-coaching) .cr-p2, :where(body.p-coaching) .cr-p3 {grid-column:2; grid-row:1 / span 4}
  :where(body.p-coaching) .cr-pane.on {display:block}
  :where(body.p-coaching) .cr-clip {padding:8px 0; border-top:1px solid var(--line)}
  :where(body.p-coaching) .cr-clip:first-of-type {border-top:0}
  /* кликабельна ВСЯ строка (кнопка + тайтл), не только ▶ (просьба Вовы 21.07) */
  :where(body.p-coaching) .cr-row {display:flex; gap:10px; align-items:flex-start; cursor:pointer; border-radius:8px;
       margin:0 -6px; padding:2px 6px; transition:background .15s ease-in-out}
  :where(body.p-coaching) .cr-row:hover {background:rgba(255,255,255,.04)}
  :where(body.p-coaching) .cr-row:hover .cr-play {background:rgba(197,240,43,.14)}
  :where(body.p-coaching) .cr-body {flex:1; min-width:0}
  /* ЕДИНАЯ ширина кнопки (Вова 21.07): текст «зачем тебе» стоит одним столбиком и не плавает от длины таймкода; tabular-nums — цифры одной ширины */
  :where(body.p-coaching) .cr-play {flex:none; cursor:pointer; font:inherit; font-size:12px; font-weight:700;
       width:140px; text-align:center; font-variant-numeric:tabular-nums;
       color:var(--brand); background:transparent; border:1px solid var(--brand);
       border-radius:20px; padding:3px 6px; white-space:nowrap;
       transition:background .15s ease-in-out, transform .15s ease-in-out}
  :where(body.p-coaching) .cr-play:active {transform:scale(.96)}
  :where(body.p-coaching) .cr-play.on {background:rgba(197,240,43,.16); color:var(--brand); border-color:var(--brand)}
  /* ФИКС «чёрное на чёрном» (Вова 21.07): ховер строки красил АКТИВНУЮ кнопку в полупрозрачный лайм (правило ниже по специфичности перебивало .on) — тёмный текст тонул. Активная кнопка при ховере остаётся сплошной лаймовой. */
  :where(body.p-coaching) .cr-row:hover .cr-play.on {background:rgba(197,240,43,.24); color:var(--brand)}
  /* «зачем тебе» — ПЕРВОЙ строкой и главная; текст клипа — вторичный серый */
  :where(body.p-coaching) .cr-why {font-size:13.5px; font-weight:600; line-height:1.45}
  :where(body.p-coaching) .cr-why b {color:var(--brand); font-weight:800}
  :where(body.p-coaching) .cr-txt {font-size:12.5px; color:#aeb7c4; line-height:1.45; margin-top:3px}
  :where(body.p-coaching) .cr-vt {font-size:11.5px; color:var(--muted); margin-top:2px}
  /* «просмотрено» на клипах (24.07): единый механизм для «Клипов под ошибки» и «Похожих ошибок» — браузерный localStorage, как в базе знаний */
  :where(body.p-coaching) .seen-clip .cr-seen {display:none; flex:none; align-self:center; margin-left:6px; color:#39c26d; font-size:11.5px; white-space:nowrap}
  :where(body.p-coaching) .seen-clip.seen .cr-seen {display:inline-block}
  :where(body.p-coaching) .seen-clip.seen .cr-txt {opacity:.72}
  :where(body.p-coaching) .seen-clip.seen .cr-play {border-color:#39c26d; color:#39c26d; background:rgba(57,194,109,.10)}
  /* «Похожие ошибки» — свой блок, клипы переиспользуют .cr-* */
  :where(body.p-coaching) .sim-wrap {margin-top:16px}
  :where(body.p-coaching) .sim-stat {color:var(--brand); font-weight:800}
  :where(body.p-coaching) .sim-ru {color:#e6ebf2; font-weight:700}
  /* МОБИЛА (≤920). ВАЖНО: медиа-блок стоит ПОСЛЕ базовых cr-правил — при равной специфичности побеждает нижнее (из-за этого display:block для .cr-row не работал, когда блок стоял выше). Не переносить вверх! */
  @media(max-width:920px) {
    :where(body.p-coaching) .cr-flow {grid-template-columns:minmax(0,1fr); grid-template-rows:none; column-gap:0}
    :where(body.p-coaching) .cr-h1 {grid-row:1} :where(body.p-coaching) .cr-p1 {grid-row:2} :where(body.p-coaching) .cr-h2 {grid-row:3} :where(body.p-coaching) .cr-p2 {grid-row:4}
    :where(body.p-coaching) .cr-h3 {grid-row:5} :where(body.p-coaching) .cr-p3 {grid-row:6}
    /* линию таймлайна на мобиле ПРЯЧЕМ (Вова 21.07: отступ панелей вправо пугал + линия странно тянулась на узких экранах). Номера в кружках остаются — нумерация читается и без линии. Панели во всю ширину. */
    :where(body.p-coaching) .cr-rail {display:none}
    :where(body.p-coaching) .cr-p1, :where(body.p-coaching) .cr-p2, :where(body.p-coaching) .cr-p3 {grid-column:1; margin:6px 0 8px; padding:6px 10px}
    /* меньше текста: только «зачем тебе», описание и источник скрыты — заголовок ролика покажет сам плеер */
    :where(body.p-coaching) .cr-txt, :where(body.p-coaching) .cr-vt {display:none}
    /* кнопка сверху, текст под ней во всю ширину — ничего не плывёт */
    :where(body.p-coaching) .cr-row {display:block}
    :where(body.p-coaching) .cr-body {margin-top:5px}}
  /* ряд скорости — канон .spdrow/.spdchip как в поиске и базе (общая память yk_rate) */
  :where(body.p-coaching) .spdrow {display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap}
  :where(body.p-coaching) .spdlbl {font-size:12px; color:var(--muted)}
  :where(body.p-coaching) .spdchip {padding:3px 10px; border:1px solid var(--line); border-radius:999px; font-size:12.5px;
       color:var(--muted); cursor:pointer; user-select:none;
       transition:border-color .15s ease-in-out, color .15s ease-in-out, transform .15s ease-in-out}
  :where(body.p-coaching) .spdchip:hover {border-color:var(--brand); color:#e8ecf2}
  :where(body.p-coaching) .spdchip:active {transform:scale(.96)}
  :where(body.p-coaching) .spdchip.on {background:var(--brand); color:#10130a; border-color:var(--brand); font-weight:600}
  /* тот же класс бага: ховер по АКТИВНОМУ чипу скорости не должен светлить текст (белое на лайме не читается) — оставляем тёмный */
  :where(body.p-coaching) .spdchip.on:hover {color:#10130a}
  :where(body.p-coaching) .hw-h {font-size:15.5px; display:inline-flex; align-items:center; gap:7px}
  :where(body.p-coaching) .hw-ic {display:inline-block; width:15px; height:15px; flex:none;
       background:no-repeat center/contain}
  :where(body.p-coaching) .hw-ic-check {background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.615 20h-2.615a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8'/><path d='M14 19l2 2l4 -4'/><path d='M9 8h4'/><path d='M9 12h2'/></svg>")}
  :where(body.p-coaching) .hw-ic-target {background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 7a5 5 0 1 0 5 5'/><path d='M13 3.055a9 9 0 1 0 7.941 7.945'/><path d='M15 6v3h3l3 -3h-3v-3z'/><path d='M15 9l-3 3'/></svg>")}
  :where(body.p-coaching) .tsk {display:flex; gap:9px; align-items:flex-start; padding:6px 0; border-top:1px solid var(--line)}
  :where(body.p-coaching) .tsk:first-of-type {border-top:0}
  /* (мелкие фиксы, 17.07) мастер-проверка: ВСЕ галочки страницы фирменные — тёмные под стиль сайта, чек — бренд-зелёный. Системных синих больше нет */
  :where(body.p-coaching) input[type=checkbox] {appearance:none; -webkit-appearance:none; width:17px; height:17px;
       margin-top:2px; cursor:pointer; flex:none; border:1px solid var(--line); border-radius:5px;
       background:#0e1116; display:inline-grid; place-content:center; vertical-align:-3px}
  :where(body.p-coaching) input[type=checkbox]:hover {border-color:var(--brand)}
  :where(body.p-coaching) input[type=checkbox]:checked {background:var(--brand); border-color:var(--brand)}
  :where(body.p-coaching) input[type=checkbox]:checked::before {content:''; width:11px; height:11px;
       background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1116' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5l10 -10'/></svg>") no-repeat center/contain}
  :where(body.p-coaching) .tsk .txt {font-size:14px}
  :where(body.p-coaching) .tsk.done .txt {color:var(--muted); text-decoration:line-through}
  :where(body.p-coaching) .prep-it {display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--line); font-size:14px}
  :where(body.p-coaching) .prep-it:first-child {border-top:0}
  :where(body.p-coaching) .prep-it.off {opacity:.55}
  :where(body.p-coaching) details.ed {margin-top:10px; border-top:1px solid var(--line); padding-top:8px}
  :where(body.p-coaching) details.ed>summary {cursor:pointer; font-weight:700; color:var(--brand); font-size:13.5px}
  /* (24.07, Вова) .stu-edit — редактор профиля ученика у тренера целиком под карандашом. Заголовок сделан «кнопкой-строкой»: видно, что это действие, а не просто текст; раскрытый — подсвечен рамкой, чтобы тренер видел, что правки сейчас ВОЗМОЖНЫ (и случайные тоже). */
  /* (24.07 v2) ЗАМОК ПРОФИЛЯ УЧЕНИКА: данные видны всегда, правки — по карандашу справа. Залоченная форма гасится тихо (не «сломано», а «смотри, не трогай»): поля притушены, курсор запрещающий, «Сохранить» скрыта. */
  :where(body.p-coaching) .stu-lockrow {display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 10px;
     padding-top:10px; border-top:1px solid var(--line)}
  :where(body.p-coaching) .stu-lockcap {font-weight:700; font-size:13.5px; color:var(--brand)}
  :where(body.p-coaching) .stu-pen {margin-left:auto; cursor:pointer; font:600 12.5px inherit; font-family:inherit;
     color:var(--muted); background:var(--panel2); border:1px solid var(--line);
     border-radius:20px; padding:7px 14px; white-space:nowrap;
     transition:border-color .15s, color .15s}
  :where(body.p-coaching) .stu-pen:hover {border-color:var(--brand); color:var(--text)}
  :where(body.p-coaching) .stu-pen.on {border-color:var(--brand); color:var(--brand); background:rgba(197,240,43,.08)}
  :where(body.p-coaching) form.locked input:not([type=hidden]), :where(body.p-coaching) form.locked textarea, :where(body.p-coaching) form.locked select {
     opacity:.55; cursor:not-allowed}
  :where(body.p-coaching) form.locked .row-actions {display:none}
  /* чипы пакета 1/4/10 и ссылка «изменить» у ника — тоже мёртвые, пока замок; бейджи-статусы (.tag on/.tag warn в блоке отзывов) НЕ трогаем, они просто информация, поэтому селектор по button/a, а не по классу .tag */
  :where(body.p-coaching) form.locked button, :where(body.p-coaching) form.locked a {pointer-events:none; opacity:.55}
  /* (Вова 21.07) CTA «Оставить отзыв»: иконка + мягкий пульс раз в ~10 сек, пока отзыва нет (rv-cta). Классы rv-* (не «ad»). Пульс короткий (последние ~15% цикла), остальное время строка спокойная — премиум не кричит. */
  :where(body.p-coaching) .rv-ic {vertical-align:-3px; margin-right:5px}
  /* (Вова 21.07, v3) без «ёлки»: белый текст, белый пузырь, КРАСНОЕ сердце; стрелки убраны (и маркер details, и «▾» из текста) — осталась иконка */
  :where(body.p-coaching) .rv-sum {font-size:14.5px; color:#e8ecf2; list-style:none}
  :where(body.p-coaching) .rv-sum::-webkit-details-marker {display:none}
  /* (Вова 21.07, v5) блок отзыва — мягкая карточка: воздух от домашки/фокуса побольше, свой паддинг (чтобы подсветке было где дышать). Подсветка прихода по #revN — БЕЗ рамки-кольца, только лёгкий зелёный фон (revGlow). */
  :where(body.p-coaching) details.ed[id^="rev"] {margin-top:26px; border:1px solid var(--line); border-radius:12px;
       padding:12px 14px 14px}
  @keyframes revGlow {
    0%   {background:rgba(197,240,43,.16)}
    100% {background:transparent}
  }
  :where(body.p-coaching) details.ed[id^="rev"].revGlow {animation:revGlow 2.2s ease-out}
  /* (Вова 21.07, v4) вместо фоновой подсветки — flash по ТЕКСТУ: раз в ~10 сек по надписи пробегает лаймовый блик (градиент через background-clip:text). Иконку не трогает (у svg свой stroke), фон не красится — ёлки нет. */
  @keyframes rvFlash {
    0%, 64%  {background-position:120% 0}
    100%     {background-position:-20% 0}
  }
  :where(body.p-coaching) details.ed>summary.rv-cta {
       color:transparent;
       background:linear-gradient(105deg, #e8ecf2 40%, var(--brand) 50%, #e8ecf2 60%);
       background-size:280% 100%; background-position:120% 0;
       -webkit-background-clip:text; background-clip:text;
       animation:rvFlash 10s ease-in-out infinite}
  /* (22.07) ховер по «Оставить отзыв о занятии» — раньше отклика на наведение не было. Текст зеленеет, карточка чуть подсвечивает рамку. У CTA-варианта (лаймовый блик) на ховере блик замирает и текст становится сплошным лаймом. */
  :where(body.p-coaching) .rv-sum {cursor:pointer; transition:color .15s ease-in-out}
  :where(body.p-coaching) .rv-sum:hover {color:var(--brand)}
  :where(body.p-coaching) details.ed>summary.rv-cta:hover {-webkit-text-fill-color:var(--brand); color:var(--brand); animation:none}
  :where(body.p-coaching) details.ed[id^="rev"] {transition:border-color .15s ease-in-out}
  :where(body.p-coaching) details.ed[id^="rev"]:hover {border-color:rgba(197,240,43,.45)}
  /* «ЗАПИСЬ РАЗБОРА 2.0» (Вова 21.07) — классы rvd-* (не «ad»). ПК: моменты слева + плеер справа; мобила: плеер сверху, моменты чипами вбок. Медиа-блок стоит ПОСЛЕ базовых правил — не переносить вверх (каскад). */
  /* воздух после выводов: 48 → 38 (Вова 21.07: «чуть ужми») */
  :where(body.p-coaching) details.rvd {margin-top:38px; border:1px solid var(--line); border-radius:12px;
       background:rgba(255,255,255,.02)}
  :where(body.p-coaching) .rvd-sum {cursor:pointer; list-style:none; display:flex; gap:10px; align-items:center;
       padding:10px 14px; font-weight:700; font-size:13.5px; border-radius:12px;
       transition:background .15s ease-in-out}
  :where(body.p-coaching) .rvd-sum::-webkit-details-marker {display:none}
  :where(body.p-coaching) .rvd-sum:hover {background:rgba(255,255,255,.04)}
  :where(body.p-coaching) .rvd-ic {flex:none; width:26px; height:26px; border-radius:8px; background:var(--panel2);
       border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
       color:var(--brand); font-size:11px}
  :where(body.p-coaching) .rvd-meta {color:var(--muted); font-weight:400; font-size:12.5px}
  :where(body.p-coaching) .rvd-arr {margin-left:auto; color:var(--muted); font-size:11px; transition:transform .2s}
  :where(body.p-coaching) details.rvd[open] .rvd-arr {transform:rotate(180deg); color:var(--brand)}
  :where(body.p-coaching) .rvd-lay {display:flex; gap:14px; padding:4px 14px 14px}
  /* (Вова 21.07, v2) колонка моментов ростом РОВНО с плеер: rvd-ms тянется по соседней колонке (align-self:stretch), контент — в абсолютной rvd-msin, скролл появляется только когда моментов реально больше высоты плеера. Скроллбар тонкий тёмный (системная «полоска отвратительная»). */
  :where(body.p-coaching) .rvd-ms {flex:0 0 300px; align-self:stretch; position:relative; background:var(--panel2);
       border:1px solid var(--line); border-radius:10px}
  :where(body.p-coaching) .rvd-msin {position:absolute; inset:0; overflow-y:auto; padding:6px;
       scrollbar-width:thin; scrollbar-color:var(--line) transparent}
  :where(body.p-coaching) .rvd-msin::-webkit-scrollbar {width:6px}
  :where(body.p-coaching) .rvd-msin::-webkit-scrollbar-thumb {background:var(--line); border-radius:3px}
  :where(body.p-coaching) .rvd-msin::-webkit-scrollbar-track {background:transparent}
  /* записи ещё нет — честная пометка вместо блока */
  :where(body.p-coaching) .rvd-none {margin-top:38px; border:1px dashed var(--line); border-radius:12px;
       padding:10px 14px; color:var(--muted); font-size:13px}
  /* «Отзыв перед записью» (Вова 21.07) — модалка, классы ra-* (не «ad») */
  :where(body.p-coaching) .ra-back {display:none; position:fixed; inset:0; background:rgba(4,6,10,.72);
       z-index:2000; align-items:center; justify-content:center; padding:16px}
  :where(body.p-coaching) .ra-box {background:var(--panel2); border:1px solid var(--line); border-radius:14px;
       padding:18px 20px; max-width:440px; width:100%; box-shadow:0 18px 50px rgba(0,0,0,.5)}
  :where(body.p-coaching) .ra-btns {display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
  :where(body.p-coaching) .rvd-hdr {font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em;
       padding:5px 8px}
  :where(body.p-coaching) .rvd-m {display:flex; gap:9px; align-items:flex-start; padding:7px 8px; border-radius:8px;
       cursor:pointer; transition:background .15s ease-in-out}
  :where(body.p-coaching) .rvd-m:hover {background:rgba(255,255,255,.05)}
  :where(body.p-coaching) .rvd-m.on {background:rgba(197,240,43,.08)}
  :where(body.p-coaching) .rvd-m.on .rvd-tc {background:var(--brand); color:#10130a}
  :where(body.p-coaching) .rvd-tc {flex:none; font-size:12px; font-weight:700; color:var(--brand);
       border:1px solid var(--brand); border-radius:20px; padding:2px 9px; white-space:nowrap;
       font-variant-numeric:tabular-nums; transition:background .15s ease-in-out}
  :where(body.p-coaching) .rvd-mt {font-size:12.5px; line-height:1.45}
  :where(body.p-coaching) .rvd-pl {flex:1; min-width:0}
  :where(body.p-coaching) .rvd-hint {display:none}
  @media(max-width:920px) {
    /* column-reverse: в DOM моменты первыми (для ПК-сетки), визуально — плеер сверху, подсказка, чипы снизу */
    :where(body.p-coaching) .rvd-lay {flex-direction:column-reverse; gap:8px; padding:4px 10px 12px}
    :where(body.p-coaching) .rvd-pl {flex:none}
    :where(body.p-coaching) .rvd-meta {display:none}   /* «· 4 момента» на телефоне лишние (Вова 21.07) */
    :where(body.p-coaching) .rvd-ms {flex:none; position:static; background:transparent; border:0}
    :where(body.p-coaching) .rvd-msin {position:static; display:flex; gap:7px; overflow-y:visible; overflow-x:auto;
         padding:2px 0; scrollbar-width:none}
    :where(body.p-coaching) .rvd-msin::-webkit-scrollbar {display:none}
    :where(body.p-coaching) .rvd-hdr {display:none}
    :where(body.p-coaching) .rvd-m {flex:none; display:block; max-width:200px; border:1px solid var(--line);
         border-radius:10px; padding:6px 11px}
    :where(body.p-coaching) .rvd-m:hover {background:transparent}
    :where(body.p-coaching) .rvd-m.on {border-color:var(--brand); background:rgba(197,240,43,.07)}
    :where(body.p-coaching) .rvd-tc {border:0; padding:0}
    :where(body.p-coaching) .rvd-mt {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
         margin-top:1px; font-size:11.5px; max-width:180px}
    /* разовая подсказка «листай вбок» (прячет JS после первого скролла/клика) */
    :where(body.p-coaching) .rvd-hint {display:block; color:var(--muted); font-size:11.5px; padding:0 2px}}
  :where(body.p-coaching) .ytbox {position:relative; padding-top:56.25%; border-radius:10px; overflow:hidden; margin-top:10px}
  :where(body.p-coaching) .ytbox iframe {position:absolute; inset:0; width:100%; height:100%; border:0}
  :where(body.p-coaching) .chartbox {background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px}
  /* карточки разметки ИИ в выводах занятия (классы mk-* — не «ad», адблок) */
  :where(body.p-coaching) .mk-card {border:1px solid var(--line); border-radius:8px; padding:9px 12px; margin:8px 0;
           font-size:13.5px; line-height:1.5}
  :where(body.p-coaching) .mk-err {background:rgba(230,72,46,.08); border-color:var(--err)}
  :where(body.p-coaching) .mk-rule {background:rgba(197,240,43,.07); border-color:var(--brand)}
  :where(body.p-coaching) .mk-prog {background:rgba(240,201,43,.08); border-color:#f0c92b}
  :where(body.p-coaching) .mk-badge {display:inline-block; font-size:11px; font-weight:700; text-transform:capitalize;
            letter-spacing:.05em; border-radius:20px; padding:1px 9px; margin-right:4px; vertical-align:1px}
  :where(body.p-coaching) .mk-err  .mk-badge {background:var(--err); color:#fff}
  :where(body.p-coaching) .mk-rule .mk-badge {background:var(--brand); color:#0e1116}
  :where(body.p-coaching) .mk-prog .mk-badge {background:#f0c92b; color:#0e1116}
  :where(body.p-coaching) .mk-sub {padding-left:18px}
  :where(body.p-coaching) .mk-gap {height:8px}
  :where(body.p-coaching) .mk-h {border-left:3px solid #fff; padding-left:10px;
        font-weight:800; font-size:17px; margin:14px 0 0}
  :where(body.p-coaching) .mk-pair {border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:8px 0}
  :where(body.p-coaching) .mk-pair .mk-card {margin:0; border:0; border-radius:0}
  :where(body.p-coaching) .mk-pair .mk-err {border-left:3px solid var(--err)}
  :where(body.p-coaching) .mk-pair .mk-rule {border-left:3px solid var(--brand); border-top:1px solid var(--line)}
  :where(body.p-coaching) .mk-note {border-left:3px solid #fff; color:#8b93a1; font-size:12.5px;
        padding-left:10px; margin:0 0 10px 0}
  :where(body.p-coaching) .mk-li {position:relative; padding-left:16px; margin:3px 0}
  :where(body.p-coaching) .mk-li::before {content:'•'; position:absolute; left:2px; color:#fff}
  :where(body.p-coaching) .cv-switch {display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:0 0 12px}
  :where(body.p-coaching) .cv-opt {font-size:12.5px; color:var(--muted); border:1px solid var(--line);
          border-radius:20px; padding:3px 12px; cursor:pointer}
  :where(body.p-coaching) .cv-opt.on {color:#0e1116; background:var(--brand); border-color:var(--brand)}
  /* Крутилка ожидания на кнопках, что ходят в ИИ (как на поиске) */
  :where(body.p-coaching) .spin { display:inline-block; width:14px; height:14px; border:2px solid var(--mut); border-top-color:var(--brand); border-radius:50%; animation:coa-sp .8s linear infinite; vertical-align:-2px; margin-right:7px; }
  @keyframes coa-sp { to { transform:rotate(360deg); } }
  /* (Вова, 18.07) «Вид» — закрытый дропдаун, раскрывается по клику (как на поиске) */
  :where(body.p-coaching) .admview {position:relative; display:inline-flex; flex:none}
  :where(body.p-coaching) .admview .avbtn {display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px;
                  border:1px solid var(--line); border-radius:8px; background:transparent;
                  color:var(--muted); font:600 12px 'Inter',sans-serif; cursor:pointer; white-space:nowrap}
  :where(body.p-coaching) .admview .avbtn:hover {border-color:#3d4a5e; color:var(--text)}
  :where(body.p-coaching) .admview .avbtn .avarr {font-size:9px}
  :where(body.p-coaching) .admview .avlist {display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:160;
                   background:var(--panel); border:1px solid var(--line); border-radius:10px;
                   padding:4px; min-width:120px; flex-direction:column; box-shadow:0 10px 26px rgba(0,0,0,.45)}
  :where(body.p-coaching) .admview.open .avlist {display:flex}
  :where(body.p-coaching) .admview .avlist span {padding:7px 12px; font-size:12px; font-weight:600; color:var(--muted);
                        cursor:pointer; border-radius:7px; white-space:nowrap}
  :where(body.p-coaching) .admview .avlist span:hover {color:var(--text)}
  :where(body.p-coaching) .admview .avlist span.on {background:var(--brand); color:#0e1116}
  @media(max-width:720px) {  /* (окно №34) иконки позиций + селект с иконкой выбранного */
  :where(body.p-coaching) .rico { width:13px; height:13px; vertical-align:-2px; margin-right:5px; display:inline-block; object-fit:contain; opacity:.9; }
  :where(body.p-coaching) .fselw { position:relative; display:inline-block; }
  :where(body.p-coaching) .fseli { position:absolute; left:9px; top:50%; transform:translateY(-50%); display:flex; pointer-events:none; z-index:1; }
  :where(body.p-coaching) .fseli .rico { margin-right:0; }
  :where(body.p-coaching) select.hasico { padding-left:28px !important; }
  /* (доп3) кастомный дропдаун позиций: иконки видны и в раскрытом списке */
  :where(body.p-coaching) .psel { position:relative; display:inline-block; }
  :where(body.p-coaching) .psel-b { display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line);
        border-radius:8px; color:var(--text); padding:8px 11px; font-size:14px; cursor:pointer;
        transition:border-color .15s ease-in-out; white-space:nowrap; font-family:inherit; }
  :where(body.p-coaching) .psel-b:hover { border-color:#3d4757; }
  :where(body.p-coaching) .psel-b:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
  :where(body.p-coaching) .psel-ar { color:var(--muted, #8b96a5); font-size:10px; margin-left:2px; }
  :where(body.p-coaching) .psel-l { position:absolute; top:calc(100% + 4px); left:0; z-index:80; background:#12161d; border:1px solid #333d4c;
        border-radius:10px; padding:4px; min-width:100%; width:max-content; display:flex; flex-direction:column;
        box-shadow:0 10px 26px rgba(0,0,0,.45); }
  :where(body.p-coaching) .psel-l[hidden] { display:none !important; } /* грабля окна №32: flex перебивал hidden */
  :where(body.p-coaching) .psel-l button { display:flex; align-items:center; gap:7px; background:none; border:0; color:var(--muted, #8b96a5);
        border-radius:7px; padding:7px 12px; font:600 13px inherit; font-family:inherit; cursor:pointer; text-align:left; white-space:nowrap; }
  :where(body.p-coaching) .psel-l button:hover { color:var(--text); background:rgba(255,255,255,.06); }
  :where(body.p-coaching) .psel-l .rico { margin-right:0; }

  /* (25.07) РИТМ ПАКЕТА И ИТОГИ. Префикс pk- (не «ad» — адблок). Смысл блока: показать срок пакета как ТЕМП, а не как счётчик до сгорания — две шкалы рядом, занятия и время, разрыв между ними виден глазом. */
  :where(body.p-coaching) .pk-two { display:flex; gap:22px; flex-wrap:wrap; margin-top:10px; }
  :where(body.p-coaching) .pk-col { flex:1 1 240px; min-width:220px; }
  :where(body.p-coaching) .pk-lbl { font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; gap:10px; margin-bottom:5px; }
  :where(body.p-coaching) .pk-lbl b { color:var(--text); font-family:'Oswald',sans-serif; font-size:15px; }
  :where(body.p-coaching) .pk-t i { background:#f0c92b; }                    /* время — золотом, чтобы не путать с занятиями */
  :where(body.p-coaching) .pk-t.over i { background:#e0574f; }               /* срок вышел */
  :where(body.p-coaching) .pk-say { margin-top:12px; font-size:14px; line-height:1.5; }
  :where(body.p-coaching) .pk-say b { color:var(--brand); }
  :where(body.p-coaching) .pk-joke { margin-top:10px; padding:9px 13px; border-left:3px solid #f0c92b; background:rgba(240,201,43,.07);
        border-radius:0 8px 8px 0; font-size:13.5px; line-height:1.5; }
  :where(body.p-coaching) .pk-late { border-left-color:#e0574f; background:rgba(224,87,79,.09); }
  :where(body.p-coaching) .pk-half { margin-top:10px; padding:9px 13px; border-left:3px solid var(--brand); background:rgba(197,240,43,.07);
        border-radius:0 8px 8px 0; font-size:13.5px; }

  /* --- экран итогов пакета --- */
  :where(body.p-coaching) .pk-sum { position:relative; overflow:hidden; border-color:rgba(197,240,43,.35); }
  :where(body.p-coaching) .pk-sum::after { content:''; position:absolute; inset:0; pointer-events:none;
        background:radial-gradient(680px 190px at 50% -60px, rgba(197,240,43,.13), transparent 70%); }
  :where(body.p-coaching) .pk-hl { font-size:23px; font-weight:800; line-height:1.25; margin:2px 0 14px; }
  :where(body.p-coaching) .pk-road { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  :where(body.p-coaching) .pk-n { font-family:'Oswald',sans-serif; line-height:1; }
  :where(body.p-coaching) .pk-n.from { font-size:30px; color:var(--muted); }
  :where(body.p-coaching) .pk-n.to { font-size:46px; color:var(--text); }
  :where(body.p-coaching) .pk-ar { font-size:24px; color:var(--brand); }
  :where(body.p-coaching) .pk-d { font-family:'Oswald',sans-serif; font-size:24px; color:var(--brand); font-weight:700; }
  :where(body.p-coaching) .pk-facts { margin-top:10px; font-size:13.5px; color:var(--muted); display:flex; gap:8px 16px; flex-wrap:wrap; }
  :where(body.p-coaching) .pk-facts b { color:var(--text); }
  :where(body.p-coaching) .pk-pairs { margin-top:16px; display:flex; flex-direction:column; gap:9px; }
  :where(body.p-coaching) .pk-p { display:grid; grid-template-columns:1fr 24px 1fr; align-items:center; gap:10px;
        background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:11px 14px;
        opacity:0; transform:translateY(8px); transition:opacity .45s ease-out, transform .45s ease-out; }
  :where(body.p-coaching) .pk-p.vis { opacity:1; transform:none; }
  :where(body.p-coaching) .pk-was { color:var(--muted); font-size:14px; }
  :where(body.p-coaching) .pk-now { color:var(--text); font-size:14.5px; font-weight:700; }
  :where(body.p-coaching) .pk-p .pk-ar { text-align:center; }
  :where(body.p-coaching) .pk-note { margin-top:14px; padding:11px 15px; border-left:3px solid var(--brand);
        background:rgba(197,240,43,.06); border-radius:0 8px 8px 0; font-size:14px; line-height:1.55; }
  :where(body.p-coaching) .pk-share { margin-top:16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  :where(body.p-coaching) .pk-link { flex:1 1 260px; min-width:0; background:var(--panel2); border:1px solid var(--line); border-radius:9px;
        color:var(--muted); font:13px inherit; padding:9px 12px; }
  :where(body.p-coaching) .pk-cf { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:9999; }
  @media (max-width:600px) {
    :where(body.p-coaching) .pk-p { grid-template-columns:1fr; gap:4px; }
    :where(body.p-coaching) .pk-p .pk-ar { text-align:left; transform:rotate(90deg); width:24px; }
    :where(body.p-coaching) .pk-n.to { font-size:36px; }}
  /* уважаем системную настройку: анимация — украшение, а не смысл */
  @media (prefers-reduced-motion:reduce) {
    :where(body.p-coaching) .pk-p { opacity:1; transform:none; transition:none; }}

  /* --- срок пакета в панели тренера --- */
  :where(body.p-coaching) .pk-badge { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:20px;
        padding:3px 11px; font-size:13px; color:var(--muted); }
  :where(body.p-coaching) .pk-badge.soon { border-color:rgba(240,201,43,.5); color:#f0c92b; }
  :where(body.p-coaching) .pk-badge.over { border-color:rgba(224,87,79,.55); color:#e0574f; font-weight:700; }

  /* (25.07) Замок редактора итогов. Свой класс, а не form.locked: блок итогов — не <form>, а обычный div. Кнопки прячем целиком (.row-actions), а не гасим: самая дорогая кнопка тут «Опубликовать ученику», её случайный клик уходит ученику оповещением и назад не отзывается. */
  :where(body.p-coaching) .pk-lock input, :where(body.p-coaching) .pk-lock textarea { opacity:.55; cursor:not-allowed; }
  :where(body.p-coaching) .pk-lock button { pointer-events:none; opacity:.45; }
  :where(body.p-coaching) .pk-lock .row-actions { display:none; }

  /* (25.07) кнопка-иконка «скопировать команду» у демки. Класс dmcopy, не «ad». Своя, а не общий .btn: тот заливает фон лаймом и рядом со ссылкой на скачивание выглядел бы как главное действие блока, хотя это подсобное. */
  :where(body.p-coaching) .dmcopy { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
        padding:0; background:transparent; border:1px solid var(--line); border-radius:7px;
        color:var(--muted); cursor:pointer; transition:color .15s ease-in-out, border-color .15s ease-in-out; }
  :where(body.p-coaching) .dmcopy:hover { color:var(--text); border-color:#3d4757; }
  :where(body.p-coaching) .dmcopy.ok { color:var(--brand); border-color:var(--brand); }

  /* (26.07, Вова) МУЛЬТИВЫБОР ПОЗИЦИЙ — анкета заявки и профиль ученика. Кнопки, а не select: пять штук влезают в строку, видно сразу все, иконки Valve на месте, и выбрать несколько можно одним тапом. Главная — лаймовая (на блок она одна, правило №11), прочие выбранные — светлая рамка, невыбранные — обычный ghost. Класс не с «ad» (правило №8). [hidden]{display:none} обязателен: display:flex перебивает атрибут (грабля окна №32 на .psel-l). */
  :where(body.p-coaching) .cspos { display:flex; flex-direction:column; gap:7px; margin:2px 0 4px; }
  :where(body.p-coaching) .cspos-row { display:flex; gap:7px; flex-wrap:wrap; }
  :where(body.p-coaching) .cspos-b, :where(body.p-coaching) .cspos-m { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
        background:var(--panel2); border:1px solid var(--line); border-radius:10px;
        padding:9px 13px; color:var(--muted); font:inherit; font-size:13.5px; font-weight:700;
        transition:border-color .15s, color .15s, background .15s; }
  :where(body.p-coaching) .cspos-b:hover, :where(body.p-coaching) .cspos-m:hover { border-color:var(--err); color:var(--text); }
  :where(body.p-coaching) .cspos-b.on { border-color:#4b5769; color:var(--text); background:rgba(255,255,255,.045); }
  :where(body.p-coaching) .cspos-b.main, :where(body.p-coaching) .cspos-m.main { border-color:var(--brand); color:var(--brand); background:rgba(197,240,43,.08); }
  :where(body.p-coaching) .cspos-main { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
  :where(body.p-coaching) .cspos-main[hidden] { display:none !important; }
  :where(body.p-coaching) .cspos-m { padding:5px 11px; font-size:12.5px; border-radius:20px; }
  :where(body.p-coaching) .cspos-m[hidden] { display:none !important; }
  :where(body.p-coaching) .cspos-cap { font-size:12px; color:var(--muted); text-transform:uppercase;
        letter-spacing:.05em; font-weight:700; }
  :where(body.p-coaching) .cspos-err { font-size:12.5px; color:var(--err); }
  :where(body.p-coaching) .cspos-err[hidden] { display:none !important; }
    /* крестик блока-инвайта: в углу, серый, на ховере светлеет (не «ad*» — адблок) */
    :where(body.p-coaching) .dcinv-x {position:absolute; top:10px; right:12px; background:transparent; border:1px solid var(--line);
             color:var(--muted); border-radius:8px; width:28px; height:28px; line-height:1; cursor:pointer;
             font-size:13px; transition:.15s ease-in-out}
    :where(body.p-coaching) .dcinv-x:hover {border-color:#3d4a5e; color:var(--text)}
/* блок «Главное» в кабинете ученика (фаза 2.1) */
/* «Главное» — сводка ученика в первом экране кабинета (фаза 2.1) */
:where(body.p-coaching) .gl-now { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
          margin-top:var(--sp-2); padding:var(--sp-3) var(--sp-4);
          background:var(--acc-soft); border:1px solid var(--acc-line); border-radius:var(--r-md); }
:where(body.p-coaching) .gl-now-t { flex:1 1 320px; font:400 var(--fs-b)/1.55 var(--f-body); color:var(--n100); }
:where(body.p-coaching) .gl-now-t b { color:var(--n0); }
:where(body.p-coaching) .gl-when { font-family:var(--f-num); font-weight:700; color:var(--n0); }
:where(body.p-coaching) .gl-now-b { flex:none; }

:where(body.p-coaching) .gl-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
            gap:var(--sp-3); margin-top:var(--sp-4); }
:where(body.p-coaching) .gl-tile { padding:var(--sp-3) var(--sp-4); background:var(--n850);
           border:1px solid var(--n700); border-radius:var(--r-md); }
:where(body.p-coaching) .gl-num { font:700 var(--fs-d2)/1.1 var(--f-num); color:var(--n0); }
:where(body.p-coaching) .gl-num-s { font-size:var(--fs-h2); font-weight:700; color:var(--n400); }
:where(body.p-coaching) .gl-num.gl-up { color:var(--ok); }
:where(body.p-coaching) .gl-num.gl-down { color:var(--bad); }
:where(body.p-coaching) .gl-lbl { margin-top:var(--sp-1); font:500 var(--fs-s)/1.4 var(--f-body); color:var(--n300); }

:where(body.p-coaching) .gl-cont { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
           margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--n700); }
:where(body.p-coaching) .gl-cont-t { font:400 var(--fs-s)/1.5 var(--f-body); color:var(--n200); }

:where(body.p-coaching) .gl-recs { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); }
:where(body.p-coaching) .gl-recs-h { margin-right:var(--sp-1); font:600 var(--fs-s)/1.4 var(--f-body); color:var(--s-coach); }
:where(body.p-coaching) .gl-rec { display:inline-flex; align-items:center; height:28px; padding:0 var(--sp-3);
          border:1px solid var(--n600); border-radius:var(--r-pill);
          font:500 var(--fs-s)/1 var(--f-body); color:var(--n200); text-decoration:none; }
:where(body.p-coaching) .gl-rec:hover { background:var(--n750); border-color:var(--n500); color:var(--n0); }

@media (max-width: 640px) {
  :where(body.p-coaching) .gl-tiles { grid-template-columns:repeat(2, 1fr); }
  :where(body.p-coaching) .gl-now-b { width:100%; }}}/* ==================== rewards.php + quiz.php (фаза 3.4) ====================
   Обе страницы делят один раздел «Квизы», поэтому и класс на <body> один. */
/* rewards: прогресс к цели вместо серого «недоступно» */
:where(body.p-quizsec) .rwgoal { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
          font-size:var(--fs-s); color:var(--n300); }
:where(body.p-quizsec) .rwgoal b { font-family:var(--f-num); font-weight:700; color:var(--n100); }
:where(body.p-quizsec) .rwprog { height:6px; border-radius:var(--r-pill); background:var(--n750); overflow:hidden; }
:where(body.p-quizsec) .rwprog i { display:block; height:100%; background:var(--acc); border-radius:var(--r-pill); }
:where(body.p-quizsec) .rwprog.full i { background:var(--ok); }
:where(body.p-quizsec) .rwsoon { margin-top:var(--sp-4); font-size:var(--fs-s); color:var(--n400); }

/* quiz: экран, когда вопрос дня уже закрыт */
:where(body.p-quizsec) .qznext { display:flex; flex-direction:column; gap:var(--sp-3);
          padding:var(--sp-4); margin:0 0 var(--sp-5);
          border:1px solid var(--n700); border-radius:var(--r-lg); background:var(--n800); }
:where(body.p-quizsec) .qznext-h { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--sp-3); }
:where(body.p-quizsec) .qznext-t { font:600 var(--fs-h2)/1.3 var(--f-body); color:var(--n0); }
:where(body.p-quizsec) .qznext-x { font-size:var(--fs-s); color:var(--n300); }
:where(body.p-quizsec) .qznext-a { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
:where(body.p-quizsec) .qzgoal { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
          font-size:var(--fs-s); color:var(--n300); }
:where(body.p-quizsec) .qzgoal b { font-family:var(--f-num); font-weight:700; color:var(--n100); }
:where(body.p-quizsec) .qzprog { height:6px; border-radius:var(--r-pill); background:var(--n750); overflow:hidden; }
:where(body.p-quizsec) .qzprog i { display:block; height:100%; background:var(--s-quiz); border-radius:var(--r-pill); }/* ==================== admin.php ==================== */

  body:where(.p-admin) { background:#0e1116; color:#e8ecf2; font:15px/1.5 'Inter',system-ui,sans-serif; margin:0; padding:24px; }
  :where(body.p-admin) h1 { font-size:22px; margin:0 0 18px; }
  /* ЕДИНЫЙ СТИЛЬ (Вова 08.07): кнопки, поля И СЕЛЕКТЫ — одна высота, один тёмный фон; раньше селекты были системные (белые) и всё выглядело кашей */
  :where(body.p-admin) input, :where(body.p-admin) button, :where(body.p-admin) select { padding:8px 12px; border-radius:8px; border:1px solid #242c38;
                  background:#171c24; color:#e8ecf2; font:14px/1.3 system-ui,sans-serif;
                  vertical-align:middle; }
  :where(body.p-admin) button, :where(body.p-admin) select { cursor:pointer; }
  :where(body.p-admin) button:hover, :where(body.p-admin) select:hover { border-color:#e6482e; }
  /* ячейка «Действия»: элементы ровной сеткой, не липнут друг к другу */
  :where(body.p-admin) td .inline { display:inline-block; margin:2px 6px 2px 0; }
  /* «опасный» селект: тёмный фон остаётся, только рамка и текст красноватые */
  :where(body.p-admin) select.danger { border-color:rgba(230,72,46,.55); color:#e6a5a5; }
  :where(body.p-admin) .stats { display:flex; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
  :where(body.p-admin) .stat { background:#171c24; border:1px solid #242c38; border-radius:10px; padding:12px 18px; }
  :where(body.p-admin) .stat b { font-size:20px; display:block; }
  :where(body.p-admin) table { width:100%; border-collapse:collapse; margin-top:14px; }
  :where(body.p-admin) th, :where(body.p-admin) td { text-align:left; padding:9px 10px; border-bottom:1px solid #242c38; font-size:14px; }
  :where(body.p-admin) th { color:#8b96a5; font-weight:600; }
  :where(body.p-admin) .sub-on { color:#39c26d; font-weight:600; }
  :where(body.p-admin) .banned { color:#e6482e; font-weight:600; }
  :where(body.p-admin) form.inline { display:inline; }
  :where(body.p-admin) .muted { color:#8b96a5; }
  :where(body.p-admin) .agggrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
             gap:14px; margin-top:14px; }
  /* МОБИЛКА (Вова 08.07): таблицы скроллятся ВНУТРИ себя (страница не едет вбок), навигация переносится строками, отступы ужаты */
  @media (max-width:760px) {
    body:where(.p-admin) { padding:12px; }
    :where(body.p-admin) table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    :where(body.p-admin) th, :where(body.p-admin) td { font-size:13px; padding:7px 6px; }
    :where(body.p-admin) td { min-width:0; }
    :where(body.p-admin) td:last-child { min-width:280px; }  /* «Действия» не схлопываются в лапшу */
    :where(body.p-admin) .stats { gap:8px; }
    :where(body.p-admin) .stat { padding:9px 12px; }
    :where(body.p-admin) input, :where(body.p-admin) button, :where(body.p-admin) select { padding:7px 10px; font-size:13px; }}
  :where(body.p-admin) a { color:#e8ecf2; }
  /* СЕКЦИИ (Вова 10.07: «раздели и выдели цветом»): каждый блок админки — своя цветная полоса слева, чтобы глаз сразу цеплялся за нужное */
  :where(body.p-admin) h1.sec { font-size:19px; margin:36px 0 6px; padding:12px 16px; background:#141a22;
           border:1px solid #242c38; border-left:6px solid #8b96a5; border-radius:12px; }
  :where(body.p-admin) h1#users { border-left-color:#7fb1ff; }
  :where(body.p-admin) h1#aud { border-left-color:#39c26d; }
  /* (25.07) цвета секций #feedback/#fbarch убраны вместе с жалобами */
  :where(body.p-admin) h1#whatsearch { border-left-color:#4dd0c4; }
  :where(body.p-admin) h1#analytics { border-left-color:#ff8a5c; }
  :where(body.p-admin) h1#unkitem { border-left-color:#f0c92b; }
  :where(body.p-admin) h1#heropos { border-left-color:#c5f02b; }
  /* Позиции героев: золотой кант слева = ручной набор расходится с авто. Классы hp* — не «ad», иначе адблок вырежет блок. */
  :where(body.p-admin) #hpTable td { vertical-align:middle; }
  :where(body.p-admin) #hpTable tr.hpdiff td:first-child { box-shadow:inset 4px 0 0 #f0c92b; }
  :where(body.p-admin) #hpTable img.hpface { width:44px; height:26px; border-radius:5px; object-fit:cover;
                        vertical-align:middle; margin-right:8px; }
  :where(body.p-admin) .hpname { font-weight:600; }
  :where(body.p-admin) .hpmix { color:#8b96a5; font-size:12px; margin-top:2px; }
  :where(body.p-admin) .hpbox { display:inline-flex; align-items:center; gap:5px; margin:2px 12px 2px 0;
           font-size:13px; color:#8b96a5; cursor:pointer; white-space:nowrap; }
  :where(body.p-admin) .hpbox input { width:15px; height:15px; margin:0; padding:0; accent-color:#c5f02b; cursor:pointer; }
  :where(body.p-admin) .hpbox.on { color:#e8ecf2; }
  :where(body.p-admin) .hpghost { background:transparent; border:1px solid #3d4a5e; color:#8b96a5;
             border-radius:7px; padding:5px 11px; font-size:12.5px; cursor:pointer; white-space:nowrap; }
  :where(body.p-admin) .hpghost:hover { border-color:#c5f02b; color:#e8ecf2; }
  :where(body.p-admin) table tr:nth-child(even) td { background:rgba(255,255,255,.018); }
  :where(body.p-admin) tr:hover td { background:rgba(255,255,255,.04); }
  /* .navlink удалён (редизайн 2.0, 12.07): верхняя полоса навигации переехала в дровер за ключом мини-шапки — классу нечего стилить */
  /* Ряд вкладок входа. Сам компонент .tabs/.tab — в /css/app.css;
           здесь только «где я» лаймом, как в макете. */
  :where(body.p-admin) #admTabs { margin-bottom:20px; }
  :where(body.p-admin) .atab.on { color:var(--acc); border-bottom-color:var(--acc); font-weight:600; }
  /* красная точка «есть новое» на свёрнутой секции */
  :where(body.p-admin) .notifdot { display:inline-block; width:10px; height:10px; background:#e6482e;
              border-radius:50%; margin-left:10px; vertical-align:2px;
              box-shadow:0 0 8px rgba(230,72,46,.9); }
  /* ================= РЕДИЗАЙН 2.0 (мобильный аудит, 12.07) ================= Мини-шапка канона + дровер «Служебное» + футер МЕНЮ/ДОКУМЕНТЫ — копия блока из index.php. Токены объявлены здесь: у админки не было :root. */
  body:where(.p-admin) { --bg:#0e1116; --card:#171c24; --line:#242c38; --txt:#e8ecf2; --mut:#8b96a5;
          --err:#e6482e; --ok:#39c26d; --brand:#c5f02b; --brand2:#d9ff56; --onbrand:#10130a;
          /* (28.07) --err2 нужен ui_modal.php: красная кнопка опасного действия (.csm-b.pri.danger). Без токена var(--err2) не вычисляется, и кнопка «Удалить навсегда» осталась бы прозрачной. Значение — как в index.php. */
          --err2:#ff6a4d;
          /* (мелкие фиксы, 17.07) алиасы под общие инклюды (cal_inc и т.п.), которые ждут сайтовые имена переменных */
          --muted:#8b96a5; --text:#e8ecf2; --panel:#171c24; --panel2:#1b222c; }
  /* ── ШАПКА → /css/header.css (Фаза В). Ниже страничное: .admview, админ- колокол .nb*, дровер «Служебное», .aseg. margin-bottom шапки теперь 14px. ── */
  /* «вид как» — выпадающий список (Вова 12.07): в шапке кнопка «Вид ▾», варианты выезжают по клику, а не стоят три в ряд */
  :where(body.p-admin) .admview { position:relative; display:inline-flex; flex:none; }
  :where(body.p-admin) .admview .avbtn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px;
                    border:1px solid var(--line); border-radius:8px; background:transparent;
                    color:var(--mut); font:600 12px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; }
  :where(body.p-admin) .admview .avbtn:hover { border-color:#3d4a5e; color:var(--txt); }
  :where(body.p-admin) .admview .avbtn .avarr { font-size:9px; }
  :where(body.p-admin) .admview .avlist { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:160;
                     background:var(--card); border:1px solid var(--line); border-radius:10px;
                     padding:4px; min-width:132px; flex-direction:column;
                     box-shadow:0 10px 26px rgba(0,0,0,.45); }
  :where(body.p-admin) .admview.open .avlist { display:flex; }
  :where(body.p-admin) .admview .avlist span { padding:7px 12px; font-size:12px; font-weight:600; color:var(--mut);
                          cursor:pointer; border-radius:7px; white-space:nowrap; }
  :where(body.p-admin) .admview .avlist span:hover { color:var(--txt); }
  :where(body.p-admin) .admview .avlist span.on { background:var(--brand); color:var(--onbrand); }
  /* .kbadge → /css/header.css (Фаза В) */
  /* КОЛОКОЛ АДМИНА (окно №17): важное ревью и отзывы (жалобы выпилены 25.07). Классы nb* (не «ad»). */
  :where(body.p-admin) .nbwrap { position:relative; flex:none; }
  :where(body.p-admin) .nbdrop { display:none; position:absolute; top:46px; right:0; width:340px; max-width:calc(100vw - 28px);
            background:var(--card, #12161d); border:1px solid var(--line, #242c38); border-radius:12px;
            z-index:400; box-shadow:0 18px 50px -12px rgba(0,0,0,.6); overflow:hidden; }
  :where(body.p-admin) .nbwrap.open .nbdrop { display:block; }
  :where(body.p-admin) .nbhead { padding:10px 14px; font:600 12px 'Oswald',sans-serif; text-transform:uppercase;
            letter-spacing:.5px; color:var(--mut, #8b96a5); border-bottom:1px solid var(--line, #242c38); }
  :where(body.p-admin) .nblist { max-height:360px; overflow-y:auto; }
  :where(body.p-admin) .nbitem { display:block; padding:11px 14px; border-bottom:1px solid var(--line, #242c38);
            text-decoration:none; cursor:pointer; }
  :where(body.p-admin) .nbitem:hover { background:rgba(197,240,43,.05); }
  :where(body.p-admin) .nbtit { font-size:13px; font-weight:600; color:var(--txt, #e6ebf2); line-height:1.35; }
  :where(body.p-admin) .nbtxt { font-size:12.5px; color:var(--mut, #8b96a5); margin-top:3px; line-height:1.45; }
  :where(body.p-admin) .nbempty { padding:18px 14px; font-size:13px; color:var(--mut, #8b96a5); text-align:center; }
  /* rvwrap/rvlist/urow2/utab → /css/header.css (Фаза В) */
  /* дровер служебной навигации админа («бургер в шапке», решение аудита C) */
  /* .svnum → /css/header.css (Фаза В) */
  :where(body.p-admin) .aseg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  :where(body.p-admin) .aseg span { padding:5px 11px; font-size:11.5px; font-weight:600; color:var(--mut); cursor:pointer; }
  :where(body.p-admin) .aseg span.on { background:var(--brand); color:var(--onbrand); font-weight:700; }
  /* (ревизия, окно №11) мёртвые стили .newfoot УДАЛЕНЫ: футер теперь
           .site-footer из footer_inc.php + /css/footer.css */
  /* «ПОЛОСКИ» ВОКРУГ ФУТЕРА (нашёл Вова): у админки body { padding:24px } — футер сидел ВНУТРИ отступа, вокруг оставалась рамка фона. Отрицательные маргины растягивают футер на всю ширину и съедают нижний паддинг. */
  /* (Вова 12.07) ФУТЕР ПО ШИРИНЕ КОНТЕНТА: дефолтный sf-inner (1180) уже, чем .wrap админки (1360) — футер смещался и не совпадал с колонками профиля юзера. Ровняем внутренник футера под ширину страницы. */
  /* на мобиле у админки body padding:12px — компенсация меньше, иначе горизонтальный скролл */
  @media (max-width:760px) {  /* мобильный свап admdesk/ukey → /css/header.css (Фаза В) */}/* ==================== demo_check.php ==================== */

  /* 🔴 (ПЕРЕПРОВЕРКА 28.07) ПАЛИТРА НУЖНА ui_modal.php. У страницы не было НИ ОДНОГО css-токена (цвета вбиты числами), а сегодня сюда приехали шесть окон подтверждения. Модалка красится через var(--card)/var(--line)/var(--brand)/ var(--err2): без токенов фон окна прозрачный, рамка исчезает целиком, а обе кнопки становятся одинаковыми надписями — какая «Перерезать», непонятно. Значения — те же, что в остальных members-страницах. */
  body:where(.p-demo-check) {
    --card:#161b22; --line:#242c38; --txt:#e6edf3; --mut:#8b96a5;
    --brand:#c5f02b; --brand2:#d9ff56; --onbrand:#10130a; --err2:#ff6a4d;
  }
  body:where(.p-demo-check) { background:#0d1117; color:#c9d1d9; font:15px/1.55 'Inter',system-ui,sans-serif; margin:0; padding:0; }
  /* ширину/паддинги .wrap даёт /css/layout.css (!important) — шапка и футер во всю ширину сайта, а КОНТЕНТ страницы живёт в колонке .pool, чтобы плееры не расползались на весь экран (Вова 21.07) */
  :where(body.p-demo-check) .pool { max-width:920px; margin:0 auto; }
  /* ряд вкладок админки (косметическая копия admTabs из admin.php): страница — та же админка, вкладка «Нарезка клипов» активна */
  :where(body.p-demo-check) .admrow { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 18px; }
  :where(body.p-demo-check) .admrow a { text-decoration:none; }
  :where(body.p-demo-check) .admrow .achip { display:inline-block; padding:7px 14px; border:1px solid #2a313c; border-radius:10px;
                   color:#c9d1d9; font-size:13.5px; cursor:pointer; }
  :where(body.p-demo-check) .admrow .achip:hover { border-color:#c8f556; color:#c8f556; }
  :where(body.p-demo-check) .admrow .achip.on { background:#c8f556; border-color:#c8f556; color:#0e1116; font-weight:700; }
  :where(body.p-demo-check) h1 { font-size:20px; color:#c8f556; }
  :where(body.p-demo-check) .sum { color:#8b96a5; font-size:13px; margin-bottom:20px; }
  :where(body.p-demo-check) .card { border:1px solid #2a313c; border-radius:12px; padding:16px; margin-bottom:18px; }
  :where(body.p-demo-check) .card.bad { border-left:4px solid #e2574f; }
  :where(body.p-demo-check) video { width:100%; aspect-ratio:16/9; border-radius:10px; background:#000; }
  :where(body.p-demo-check) .meta { font-size:12.5px; color:#8b96a5; margin:8px 0 6px; }
  :where(body.p-demo-check) .meta b { color:#c9d1d9; }
  :where(body.p-demo-check) .sumtxt { font-size:14px; }
  :where(body.p-demo-check) .take { color:#7ec66a; font-size:13.5px; margin-top:6px; }
  :where(body.p-demo-check) .errtxt { color:#e2574f; font-size:13px; white-space:pre-wrap; }
  :where(body.p-demo-check) a { color:#c8f556; }
  :where(body.p-demo-check) .btn { background:none; border:1px solid #2a313c; color:#c9d1d9; border-radius:8px;
         padding:6px 12px; font:13px 'Inter',system-ui,sans-serif; cursor:pointer; }
  :where(body.p-demo-check) .btn:hover { border-color:#c8f556; color:#c8f556; }
  :where(body.p-demo-check) .btn.go { background:#c8f556; border-color:#c8f556; color:#0d1117; font-weight:600; }
  :where(body.p-demo-check) .btn.go:hover { filter:brightness(1.08); }
  :where(body.p-demo-check) input[type=datetime-local] { background:#161b22; border:1px solid #2a313c; color:#c9d1d9;
         border-radius:8px; padding:5px 8px; font:13px 'Inter',system-ui,sans-serif; }
  :where(body.p-demo-check) details.vid { border:1px solid #2a313c; border-radius:12px; margin-bottom:14px; }
  :where(body.p-demo-check) details.vid > summary { cursor:pointer; padding:13px 16px; font-size:14.5px; list-style:none; }
  :where(body.p-demo-check) details.vid > summary::-webkit-details-marker { display:none; }
  :where(body.p-demo-check) details.vid > summary:before { content:'▸ '; color:#c8f556; }
  :where(body.p-demo-check) details.vid[open] > summary:before { content:'▾ '; }
  :where(body.p-demo-check) details.vid > summary b { color:#c9d1d9; }
  :where(body.p-demo-check) details.vid .inner { padding:0 16px 4px; }
  :where(body.p-demo-check) .chip { color:#8b96a5; font-size:12.5px; white-space:nowrap; }
  :where(body.p-demo-check) .chip b { color:#c8f556; }
  :where(body.p-demo-check) .msg { border:1px solid #7ec66a; color:#7ec66a; border-radius:10px; padding:10px 14px;
         font-size:13.5px; margin-bottom:16px; }
  :where(body.p-demo-check) .tile { flex:1; min-width:150px; border:1px solid #2a313c; border-radius:10px; padding:10px 14px; }
  :where(body.p-demo-check) .tile .n { font-size:28px; font-weight:700; color:#c9d1d9; line-height:1.2; }
  :where(body.p-demo-check) .tile .l { font-size:11.5px; letter-spacing:.08em; color:#8b96a5; margin-top:2px; }
  :where(body.p-demo-check) .tile .s { font-size:12px; color:#8b96a5; margin-top:4px; }
  :where(body.p-demo-check) .tile.hot { border-color:#c8f556; } :where(body.p-demo-check) .tile.hot .n { color:#c8f556; }
  :where(body.p-demo-check) .tile.bad { border-color:#e2574f; } :where(body.p-demo-check) .tile.bad .n { color:#e2574f; }/* ==================== login.php ==================== */

  body:where(.p-login) { --bg:#0e1116; --card:#171c24; --line:#242c38; --txt:#e8ecf2; --mut:#8b96a5;
          --err:#e6482e; --err2:#ff6a4d; --ok:#39c26d;
          --brand:#c5f02b; --brand2:#d9ff56; --onbrand:#10130a; }
  :where(body.p-login) * { margin:0; padding:0; box-sizing:border-box; }
  /* (Фаза В) страница на портальной шапке (header_inc.php + /css/header.css), как остальные разделы; своя узкая .hin убрана, контент в общем .wrap. */
  body:where(.p-login) { background:var(--bg); color:var(--txt); font:16px/1.55 'Inter',sans-serif; min-height:100vh; }
  :where(body.p-login) .main { display:flex; justify-content:center; padding:22px 0 60px; }
  /* ПЕРЕВЁРСТКА 10.07 (Вова: «много ссылок на квадратный метр»): карточка шире, бюрократия — тихой строкой снизу. Редизайн 2.0 (12.07): кнопка «на главную» (.tophome) и строка документов (.docs) удалены — их роль взяли единые шапка (лого = members) и футер МЕНЮ/ДОКУМЕНТЫ. */
  :where(body.p-login) .card { background:var(--card); border:1px solid var(--line); border-radius:14px;
          padding:30px 34px; width:100%; max-width:620px; }
  /* шапка → /css/header.css (Фаза В); своих .hin/.uhead/.utab/.usteam больше нет */
  /* (ревизия, окно №11) мёртвые стили .newfoot УДАЛЕНЫ: футер теперь
           .site-footer из footer_inc.php + /css/footer.css */
  :where(body.p-login) h1 { font-family:'Oswald',sans-serif; font-size:24px; margin-bottom:6px; }
  :where(body.p-login) h2 { font:600 14px 'Inter',sans-serif; color:var(--mut); text-transform:uppercase;
       letter-spacing:.05em; margin:22px 0 10px; }
  :where(body.p-login) .hint { color:var(--mut); font-size:14px; margin-bottom:14px; }
  :where(body.p-login) .err { color:var(--err2); font-size:14px; margin-bottom:12px; }
  :where(body.p-login) input { width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
          background:#0b0e13; color:var(--txt); font:15px 'Inter',sans-serif; margin-bottom:10px; }
  :where(body.p-login) input:focus { outline:none; border-color:var(--brand); }
  :where(body.p-login) button { width:100%; padding:12px; border:0; border-radius:10px; background:var(--brand);
           color:var(--onbrand); font:600 15px 'Inter',sans-serif; cursor:pointer; }
  :where(body.p-login) button:hover { background:var(--brand2); }
  :where(body.p-login) .btn-discord { display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
                 padding:12px; border-radius:10px; background:#5865F2; color:#fff;
                 font:600 15px 'Inter',sans-serif; text-decoration:none; }
  /* (окно №25, аудит красоты) главный CTA страницы — Steam: больше веса (крупнее, жирнее) + живой hover. Лаймом НЕ красим (Якоб: юзер узнаёт фирменную тёмно-синюю кнопку Steam) — вес даём размером и откликом. */
  :where(body.p-login) .btnsteam { background:#1b2838; border:1px solid #2a475e; padding:14px;
              font:700 16px 'Inter',sans-serif; transition:filter .15s ease-in-out; }
  :where(body.p-login) .btnsteam:hover { filter:brightness(1.25); }
  :where(body.p-login) .steam-sub { text-align:center; color:var(--mut); font-size:12.5px; margin-top:8px; }
  /* (окно №25) капсула «Путь» — КАНОН с витрины (reviews.php .mmr): тихая капсула, старт серым, итог белым, рост лаймом; блик один раз по hover. */
  :where(body.p-login) .mmr {display:inline-flex; align-items:center; gap:7px; background:#1b222c;
       border:1px solid var(--line); border-radius:20px; padding:3px 11px;
       font-size:13px; font-weight:600; color:var(--mut); white-space:nowrap;
       position:relative; overflow:hidden; vertical-align:middle}
  :where(body.p-login) .mmr .to {color:var(--txt); font-weight:800}
  :where(body.p-login) .mmr .arr {font-weight:400}
  :where(body.p-login) .mmr-d {color:var(--brand); font-weight:800; font-style:normal}
  :where(body.p-login) .mmr::after {content:''; position:absolute; top:0; bottom:0; left:-40%;
       width:35%; transform:skewX(-20deg);
       background:linear-gradient(90deg, transparent, rgba(217,255,86,.28), transparent);
       opacity:0; pointer-events:none}
  :where(body.p-login) .mmr:hover::after {animation:mmrshine .9s ease-out; opacity:1}
  @keyframes mmrshine { from{left:-40%} to{left:110%} }
  :where(body.p-login) a { color:var(--mut); font-size:14px; }
  :where(body.p-login) .back { display:block; text-align:center; margin-top:16px; }/* ==================== match.php ==================== */

  body:where(.p-match) {
    --brand:#c5f02b; --bg:#0e1116; --panel:#161b22; --panel2:#1b222c;
    --text:#e6edf3; --muted:#8b96a5; --line:#242c38; --err:#e6482e; --ok:#7ec66a;
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:#10130a; --brand2:#d9ff56; --gold:#f0c92b;
  }
  :where(body.p-match) * {box-sizing:border-box}
  body:where(.p-match) { background:var(--bg); color:var(--text); font:14px/1.5 'Inter',system-ui,sans-serif; margin:0; padding:0; }
  :where(body.p-match) a { color:var(--brand); }
  :where(body.p-match) .mtwrap { padding:0 0 10px; }
  :where(body.p-match) h1 { font-family:'Oswald',system-ui,sans-serif; font-size:26px; letter-spacing:.01em;
       color:var(--text); margin:0; text-transform:uppercase; }
  :where(body.p-match) .mthead { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0 4px; }
  :where(body.p-match) .mtsub { color:var(--mut); font-size:12.5px; margin:0 0 16px; }
  /* ЛАЙМОВАЯ КНОПКА В ЭТОМ БЛОКЕ РОВНО ОДНА — «скопировать ссылку».
     Всё остальное на экране это переключатели слоёв и скоростей: они гаснут и
     загораются, но продающей кнопкой не являются и лаймовыми в покое не бывают. */
  :where(body.p-match) .mtcp { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--brand);
          background:var(--brand); color:var(--onbrand); font-weight:700; font-size:12.5px;
          border-radius:10px; padding:6px 13px; cursor:pointer; user-select:none;
          transition:.15s ease-in-out; }
  :where(body.p-match) .mtcp:hover { background:var(--brand2); border-color:var(--brand2); }
  :where(body.p-match) .mtcp:active { transform:scale(.97); }
  :where(body.p-match) .mtcp.ok { background:#2a3a12; border-color:var(--brand); color:var(--brand); }
  :where(body.p-match) .box { border:1px solid var(--line); border-radius:14px; background:#171c24; padding:10px 12px; margin-bottom:10px; }
  :where(body.p-match) .sec { font-weight:600; font-size:11.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.06em; margin:0 0 6px; }
  :where(body.p-match) .sec + .sec, :where(body.p-match) .box > .sec:not(:first-child) { margin-top:16px; }

  /* ===== ЗАМОК (образец — гейт тепла на странице героя) =====
     Подложка карты, поверх неё размытие и короткая фраза. Ни цен, ни ссылок на
     тарифы: это не витрина тарифов, а объяснение, почему тут пусто. Данных под
     размытием НЕТ — сервер их не отдал вовсе, размывается одна лишь картинка
     карты, которая и так лежит в открытом доступе. */
  :where(body.p-match) .mtlock { position:relative; width:100%; max-width:900px; aspect-ratio:1; border-radius:14px;
            overflow:hidden; background:#05070a; }
  :where(body.p-match) .mtlock img { width:100%; height:100%; object-fit:cover; display:block; opacity:.85;
                filter:blur(9px); transform:scale(1.06); }
  :where(body.p-match) .mtlock-p { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
              text-align:center; padding:24px; background:rgba(11,14,19,.55);
              -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
  :where(body.p-match) .mtlock-t { font:700 16px 'Inter',sans-serif; color:var(--text); }
  :where(body.p-match) .mtlock-d { font-size:13px; color:var(--mut); margin-top:8px; line-height:1.5; max-width:340px; }

  /* ===== ПАНЕЛЬ И КАРТОЧКИ — ПЕРЕНОС ИЗ СМОТРОВОЙ =====
     Классы те же, что там, нарочно: перенесённый ниже код рисует карточки и
     чипы этими именами, и переименовывать их значило бы править перенос. */
  :where(body.p-match) .chips { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:9px; }
  :where(body.p-match) .chips[hidden] { display:none; }
  :where(body.p-match) .chip { border:1px solid var(--line); border-radius:10px; padding:5px 12px; font-size:12.5px; color:var(--text);
          cursor:pointer; user-select:none; transition:.15s ease-in-out; background:var(--bg); }
  :where(body.p-match) .chip:hover { border-color:var(--brand); color:var(--brand); }
  :where(body.p-match) .chip:active { transform:scale(.96); }
  :where(body.p-match) .chip.on { background:var(--brand); border-color:var(--brand); color:var(--onbrand); font-weight:700; }
  :where(body.p-match) .chip.ic { padding:5px 9px; display:inline-flex; align-items:center; justify-content:center;
             line-height:0; min-width:34px; }
  :where(body.p-match) .chip.ic img { width:19px; height:19px; object-fit:contain; display:block; }
  :where(body.p-match) .chip.ic svg { display:block; stroke:currentColor; fill:none; }
  :where(body.p-match) .chip.ic svg .fl { fill:currentColor; stroke:none; }
  :where(body.p-match) .chip.ic.sk { gap:5px; padding:5px 10px; }
  :where(body.p-match) .chip.ic.sk b { font-size:12px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
  :where(body.p-match) .rico { width:16px; height:16px; display:block; object-fit:contain; }
  :where(body.p-match) .chip.ic .rico { width:17px; height:17px; }
  :where(body.p-match) .teams { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
  :where(body.p-match) .tside { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; font-weight:700; }
  :where(body.p-match) .tside.r { color:#5cc856; }
  :where(body.p-match) .tside.d { color:#d6543e; }
  :where(body.p-match) .heads { gap:5px; margin-bottom:0; }
  :where(body.p-match) .chip.hd { padding:0; border-radius:8px; overflow:hidden; position:relative; line-height:0;
             background:var(--bg); text-decoration:none; }
  :where(body.p-match) .chip.hd img { width:100%; height:26px; object-fit:cover; display:block; opacity:.4;
                 transition:opacity .15s ease-in-out; }
  :where(body.p-match) .chip.hd:hover img { opacity:.85; }
  :where(body.p-match) .chip.hd.on { border-color:var(--brand); background:var(--bg); }
  :where(body.p-match) .chip.hd.on img { opacity:1; }
  :where(body.p-match) .chip.gl { border-color:#f0c24c; box-shadow:0 0 7px rgba(240,194,76,.55); }
  :where(body.p-match) .chip.hd.gl img { opacity:1; }
  :where(body.p-match) .chip.hd i { position:absolute; left:0; right:0; bottom:0; height:3px; display:block; }
  :where(body.p-match) .heads .chip.hd { flex:1 1 0; min-width:38px; max-width:56px; }

  /* (06.08, round 2) КАРТА СЛЕВА, СПРАВА ОДИН СТОЛБЕЦ НАСТРОЕК.
     Полоса состояния героев переехала ВНУТРЬ `.ctl` (между «Герои» и
     «Журналом»), поэтому отдельной grid-области `.barcol` больше нет:
     справа один поток сверху вниз — Время · Слои · Герои · полоса · Журнал. */
  :where(body.p-match) .mapwrap { display:grid; grid-template-columns:minmax(0, 1fr) 560px;
             grid-template-rows:auto; gap:10px 16px; align-items:start; }
  :where(body.p-match) .mapwrap > .mapcol { grid-column:1; grid-row:1; }
  :where(body.p-match) .mapwrap > .ctl { grid-column:2; grid-row:1; }
  @media(max-width:1180px) {
    :where(body.p-match) .mapwrap { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; }
    :where(body.p-match) .mapwrap > .mapcol { grid-column:1; grid-row:1; }
    :where(body.p-match) .mapwrap > .ctl { grid-column:1; grid-row:2; }}
  /* ===== СРАВНЕНИЕ ДВУХ МАТЧЕЙ (этап 5, 05.08) =====
     Две колонки во всю ширину, на узком экране — одна, и карты становятся друг
     под другом сами: это та же сетка, а не вторая раскладка.
     ⚠️ ВНУТРИ КОЛОНКИ ПАНЕЛЬ ВСЕГДА В ОДИН СТОЛБЕЦ. Обычная раскладка отдаёт
     настройкам 560 точек справа от карты; в сравнении таких мест два, и на
     любом мониторе карта ужалась бы до почтовой марки. Поэтому карта сверху,
     настройки под ней — ровно так же, как это уже делает узкий экран выше. */
  :where(body.p-match) .mtcmp { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
           gap:10px 18px; align-items:start; }
  @media(max-width:1180px) { :where(body.p-match) .mtcmp { grid-template-columns:minmax(0,1fr); }}
  :where(body.p-match) .mtcmpc { min-width:0; }
  :where(body.p-match) .mtcmp .mapwrap { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; }
  :where(body.p-match) .mtcmp .mapwrap > .mapcol { grid-column:1; grid-row:1; }
  :where(body.p-match) .mtcmp .mapwrap > .ctl { grid-column:1; grid-row:2; }
  /* подпись над картой: какая это карта и какой на ней матч. Номер лаймом
     — его читают вслух на занятии, и глаз должен цеплять его без поиска */
  :where(body.p-match) .mtcap { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin:0 0 5px;
           font:700 13px 'Inter',sans-serif; color:var(--text); }
  :where(body.p-match) .mtcap .mtnum { color:var(--brand); font-variant-numeric:tabular-nums; }
  :where(body.p-match) .mtcap a { font-weight:400; font-size:12px; color:var(--mut); }
  :where(body.p-match) .mtcap a:hover { color:var(--brand); }
  :where(body.p-match) .mtcnote { color:var(--mut); font-size:12px; margin:0 0 7px; min-height:1px; }
  /* строка сравнения над картами: общий или раздельный ползунок и поле
     «сравнить с матчем…». Поле обычное, не лаймовое: продающая кнопка на экране
     остаётся ровно одна (см. .mtcp выше). */
  :where(body.p-match) .mtbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 12px; }
  :where(body.p-match) .mtbar .sec { margin:0; }
  :where(body.p-match) .mtbar a { font-size:12px; color:var(--mut); }
  :where(body.p-match) .mtbar a:hover { color:var(--brand); }
  :where(body.p-match) .mtbar .chips { margin-bottom:0; }
  :where(body.p-match) .mtvs { display:inline-flex; align-items:center; gap:6px; }
  :where(body.p-match) .mtvs input { width:130px; background:var(--bg); border:1px solid var(--line); border-radius:10px;
                color:var(--text); font:12.5px 'Inter',sans-serif; padding:5px 10px;
                font-variant-numeric:tabular-nums; }
  :where(body.p-match) .mtvs input:focus { outline:none; border-color:var(--brand); }
  :where(body.p-match) .mapcol { min-width:0; position:relative; }
  :where(body.p-match) .ctl { max-width:100%; }
  /* карточки листаются ВНУТРИ своей колонки: иначе на десяти героях
     страница уезжает и карта пропадает из виду (грабли смотровой, 02.08) */
  /* (06.08, Вова) прокрутки у карточек больше нет: колонка растёт на всю
     высоту, все десять героев видны разом — страница просто длиннее */
  :where(body.p-match) .barcol { max-width:100%; overflow:visible; margin-bottom:10px; }
  :where(body.p-match) .pane[hidden] { display:none; }
  :where(body.p-match) .note { color:var(--mut); font-size:12px; margin-top:8px; }
  :where(body.p-match) .tline { display:flex; align-items:center; gap:10px; margin:10px 0 4px; }
  :where(body.p-match) .tline input[type=range] { flex:1; accent-color:var(--brand); }
  :where(body.p-match) .tval { font-variant-numeric:tabular-nums; color:var(--brand); font-weight:700; min-width:56px; font-size:15px; }
  :where(body.p-match) .hint { color:#5b6674; font-size:10.5px; line-height:1.3; margin-top:6px; display:flex; gap:3px 12px; flex-wrap:wrap; }
  :where(body.p-match) .hint b { color:var(--text); font-weight:600; }
  :where(body.p-match) .hint span { white-space:nowrap; }

  /* (06.08) ЗОНЫ ПАНЕЛИ. Каждая группа настроек на своей подложке —
     вкладок «Время/Слои» больше нет, всё видно сразу. */
  :where(body.p-match) .zone { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px; }
  :where(body.p-match) .zone > .sec:first-child { margin-top:0; }
  :where(body.p-match) .zhint { font-weight:400; text-transform:none; letter-spacing:0; color:#5b6674; font-size:10.5px; margin-left:6px; }
  /* (06.08, round 2) СВОРАЧИВАЕМЫЕ ЗОНЫ. Заголовок зоны с классом `coll`
     кликабелен: шеврон и клик прячут её тело (`.zbody`). Служит компактности —
     «Слои» и «Журнал» можно убрать, чтобы всё влезло в один экран. */
  :where(body.p-match) .zone.coll > .sec.sechd { display:flex; align-items:center; cursor:pointer; user-select:none; }
  :where(body.p-match) .zone.coll > .sec.sechd .chev { margin-left:auto; flex:0 0 auto; width:6px; height:6px;
     border:solid var(--mut); border-width:0 2px 2px 0; transform:rotate(45deg);
     transition:transform .15s ease-in-out; }
  :where(body.p-match) .zone.coll > .sec.sechd:hover { color:var(--text); }
  :where(body.p-match) .zone.coll > .sec.sechd:hover .chev { border-color:var(--text); }
  :where(body.p-match) .zone.coll.collapsed > .sec.sechd { margin-bottom:0; }
  :where(body.p-match) .zone.coll.collapsed > .sec.sechd .chev { transform:rotate(-45deg); }
  :where(body.p-match) .zone.coll.collapsed > .zbody { display:none; }
  /* метки событий поверх ползунка времени: цвет — сторона, клик = прыжок */
  :where(body.p-match) .slwrap { position:relative; flex:1; display:flex; align-items:center; }
  :where(body.p-match) .slwrap input[type=range] { flex:1; width:100%; accent-color:var(--brand); position:relative; z-index:1; margin:0; }
  :where(body.p-match) .slmarks { position:absolute; left:0; right:0; top:50%; height:0; pointer-events:none; z-index:2; }
  :where(body.p-match) .slmark { position:absolute; top:-6px; width:2px; height:12px; border-radius:1px; transform:translateX(-50%);
            cursor:pointer; pointer-events:auto; opacity:.85; transition:.12s ease-in-out; }
  :where(body.p-match) .slmark:hover { opacity:1; height:16px; top:-8px; }
  :where(body.p-match) .slmark.r { background:#5cc856; } :where(body.p-match) .slmark.d { background:#d6543e; } :where(body.p-match) .slmark.n { background:var(--gold); }
  :where(body.p-match) .slmark.rosh { background:var(--gold); }
  :where(body.p-match) .slmark.rosh img { position:absolute; bottom:13px; left:50%; transform:translateX(-50%); width:15px; height:15px; pointer-events:none; }
  /* журнал: строка = событие, клик = за 30 с до момента (наведение показывает точку прыжка) */
  :where(body.p-match) .jrn { display:flex; flex-direction:column; gap:2px; max-height:240px; overflow-y:auto; }
  :where(body.p-match) .jrn-empty { color:#5b6674; font-size:12px; padding:4px 2px; }
  :where(body.p-match) .jrow { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:7px; font-size:12px;
          cursor:pointer; transition:.15s ease-in-out; }
  :where(body.p-match) .jrow:hover { background:rgba(255,255,255,.05); }
  :where(body.p-match) .jrow.act { background:rgba(197,240,43,.08); }
  :where(body.p-match) .jrow .jtm { font-family:'Oswald',system-ui,sans-serif; font-weight:600; font-size:12px; color:var(--mut);
               flex:0 0 32px; font-variant-numeric:tabular-nums; }
  :where(body.p-match) .jrow .jico { flex:0 0 auto; display:flex; align-items:center; }
  :where(body.p-match) .jrow .jlab { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  :where(body.p-match) .jrow .jlab.r { color:#8fd8a0; } :where(body.p-match) .jrow .jlab.d { color:#e0a59d; }
  :where(body.p-match) .jrow .jpre { margin-left:auto; font-family:'Oswald',system-ui,sans-serif; font-weight:600; font-size:10px;
                color:#5b6674; border:1px solid var(--line); border-radius:5px; padding:0 5px; opacity:0;
                transition:.15s ease-in-out; flex:0 0 auto; }
  :where(body.p-match) .jrow:hover .jpre { opacity:1; color:var(--brand); border-color:var(--brand); }

  /* день и ночь плашкой над картой: время суток в Доте меняет всё, а по
     самой подложке оно читается только вуалью, которую рисует компонент */
  :where(body.p-match) .dnrow { position:absolute; top:10px; left:0; right:0; display:flex; justify-content:center;
           z-index:3; pointer-events:none; max-width:900px; }
  :where(body.p-match) .dnrow[hidden] { display:none; }
  :where(body.p-match) .dn { display:inline-flex; align-items:center; gap:10px; background:#12161d;
        border:1px solid #2b3341; border-radius:12px; padding:8px 17px;
        opacity:1; transition:opacity .25s ease-in-out, background .3s ease-in-out,
                              border-color .3s ease-in-out; }
  :where(body.p-match) .dn.near { opacity:.3; }
  :where(body.p-match) .dn b { font-family:'Oswald',system-ui,sans-serif; font-weight:600; font-size:20px; line-height:1;
          letter-spacing:.02em; color:#fff; font-variant-numeric:tabular-nums; }
  :where(body.p-match) .dn svg { display:block; flex:0 0 auto; }
  :where(body.p-match) .dn .moon { display:none; }
  :where(body.p-match) .dn { background:#2a3038; border-color:#414b59; }
  :where(body.p-match) .dn.night { background:#0b0f18; border-color:#26304a; }
  :where(body.p-match) .dn.night .sun { display:none; }
  :where(body.p-match) .dn.night .moon { display:block; }

  /* полоса состояния: Свет слева, Тьма справа, по пятеро в столбик —
     тот же порядок, что в клиенте Доты и в голове тренера */
  :where(body.p-match) .bar[hidden] { display:none; }
  :where(body.p-match) .bar { display:flex; gap:0; align-items:flex-start; }
  :where(body.p-match) .side { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; padding:0 6px; }
  :where(body.p-match) .side + .side { border-left:1px solid var(--line); }
  :where(body.p-match) .pl { display:flex; flex-direction:column; gap:3px; background:var(--bg); border:1px solid var(--line);
        border-radius:9px; padding:4px 7px; transition:.15s ease-in-out; }
  :where(body.p-match) .pl.dead { opacity:.42; }
  @keyframes plflash {
    0%   { border-color:var(--brand); box-shadow:0 0 0 2px rgba(197,240,43,.55), 0 0 18px rgba(197,240,43,.35); }
    70%  { border-color:var(--brand); box-shadow:0 0 0 2px rgba(197,240,43,.45), 0 0 14px rgba(197,240,43,.25); }
    100% { border-color:var(--line); box-shadow:none; }
  }
  :where(body.p-match) .pl.flash { animation:plflash .55s ease-out 1; }
  @media (prefers-reduced-motion:reduce) { :where(body.p-match) .pl.flash { animation-duration:.01s; }}
  :where(body.p-match) .pl.gl { border-color:#f0c24c; box-shadow:0 0 0 1px rgba(240,194,76,.5), 0 0 12px rgba(240,194,76,.28); }
  :where(body.p-match) .pl.off { opacity:.26; }
  :where(body.p-match) .ptop { display:flex; align-items:center; gap:8px; min-width:0; }
  :where(body.p-match) .pw { position:relative; flex:0 0 auto; }
  :where(body.p-match) .pa { width:34px; height:20px; object-fit:cover; border-radius:4px; display:block; }
  :where(body.p-match) .lv { position:absolute; right:-5px; bottom:-6px; min-width:15px; text-align:center;
        background:#171c24; border:1px solid var(--line); border-radius:4px; font-size:10px;
        font-weight:700; color:var(--text); padding:0 2px; }
  :where(body.p-match) .pc { flex:1 1 auto; min-width:0; }
  :where(body.p-match) .pn { font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  :where(body.p-match) .pn .pps { display:inline-flex; vertical-align:-2px; margin-left:5px; opacity:.85; }
  :where(body.p-match) .pn .pps .rico { width:12px; height:12px; }
  :where(body.p-match) .pn .pnd { color:#4b5769; font-style:normal; font-weight:400; margin:0 5px; }
  :where(body.p-match) .pn .pnn { color:#f2f5f9; font-weight:600; }
  :where(body.p-match) .hb, :where(body.p-match) .mb { width:100%; border-radius:3px; background:var(--line); overflow:hidden; }
  :where(body.p-match) .hb { height:7px; }
  :where(body.p-match) .mb { height:5px; }
  :where(body.p-match) .hb i { display:block; height:100%; background:#39c26d; transition:width .1s linear; }
  :where(body.p-match) .mb i { display:block; height:100%; background:#3b7dff; transition:width .1s linear; }
  :where(body.p-match) .pg { min-width:0; }
  :where(body.p-match) .met { display:inline-flex; gap:4px; margin:0 0 0 10px; vertical-align:middle; }
  :where(body.p-match) .met .chip { padding:2px 7px; font-size:10.5px; font-weight:700; letter-spacing:.04em; border-radius:7px; }
  :where(body.p-match) .bar[data-met="cs"] .gd { color:#dfe6ef; }
  :where(body.p-match) .bar[data-met="nw"] .gd { color:#f0c33c; }
  :where(body.p-match) .gd { font-size:12px; font-weight:700; color:#f0c33c; font-variant-numeric:tabular-nums;
        margin-left:auto; flex:0 0 auto; }
  :where(body.p-match) .inv { display:flex; gap:2px; margin-top:2px; }
  :where(body.p-match) .inv img { width:20px; height:15px; object-fit:cover; border-radius:3px; display:block; background:#171c24; }
  :where(body.p-match) .inv .es { width:20px; height:15px; border-radius:3px; background:#171c24; border:1px solid var(--line); display:block; }
  :where(body.p-match) .inv .cel { position:relative; width:20px; height:15px; flex:0 0 auto; }
  :where(body.p-match) .inv .cel img { width:20px; height:15px; }
  /* (06.08) стеш (последние слоты) — приглушён и отделён чертой */
  :where(body.p-match) .inv .cel.bpk { opacity:.5; }
  :where(body.p-match) .inv .ssep { width:0; align-self:stretch; border-left:1px solid var(--line); margin:0 5px 0 3px; flex:0 0 auto; }
  :where(body.p-match) .inv .qt { position:absolute; right:1px; bottom:0; font-size:9px; line-height:1; font-weight:700;
             color:var(--text); text-shadow:0 0 3px #000, 0 0 2px #000; }
  :where(body.p-match) .inv .gap { width:5px; display:block; }
  :where(body.p-match) .inv .tpc { border:1px solid #2f3a49; border-radius:3px; }
  :where(body.p-match) .inv .tpc.off { opacity:.45; border-style:dashed; }
  :where(body.p-match) .inv.sm img, :where(body.p-match) .inv.sm .es { width:15px; height:11px; }
  :where(body.p-match) .abl { display:flex; gap:2px; margin-top:3px; flex-wrap:wrap; }
  :where(body.p-match) .abl img { width:16px; height:16px; border-radius:3px; display:block; background:#171c24; }
  :where(body.p-match) .abl .unk { border-color:var(--line); color:var(--mut); background:#171c24; cursor:help; }
  :where(body.p-match) #mv-tt { position:fixed; z-index:60; max-width:420px; background:#171c24; border:1px solid var(--line);
           border-radius:10px; padding:9px 11px; font-size:12px; color:var(--mut); pointer-events:none;
           box-shadow:0 8px 24px rgba(0,0,0,.5); display:none; }
  :where(body.p-match) #mv-tt b { display:block; color:var(--text); font-size:12.5px; margin-bottom:3px; }
  :where(body.p-match) .tt-t { color:var(--text); font-weight:700; font-size:13px; margin-bottom:2px; }
  :where(body.p-match) .tt-c { color:#f0c33c; font-weight:700; font-size:12px; margin-bottom:6px; }
  :where(body.p-match) .tt-a { color:#c9d1d9; font-size:12px; margin-bottom:6px; }
  :where(body.p-match) .tt-act { background:var(--bg); border:1px solid #2f3a49; border-radius:7px; padding:5px 8px;
            color:var(--text); font-size:12px; font-weight:600; margin:6px 0 4px; }
  :where(body.p-match) .tt-chip { color:var(--mut); font-weight:400; font-size:11px; margin-left:6px; }
  :where(body.p-match) .tt-d { font-size:12px; color:var(--mut); margin-bottom:4px; }
  :where(body.p-match) .tgrid { display:grid; grid-template-columns:1fr 30px 1fr; gap:5px 6px; align-items:center; margin-top:5px; }
  :where(body.p-match) .tl { padding:5px 7px; font-size:11.5px; line-height:1.25; color:var(--mut); background:var(--bg);
        border:1px solid var(--line); border-radius:7px; }
  :where(body.p-match) .tl.on { color:var(--brand); background:#1d2410; border-color:var(--brand); font-weight:600; }
  :where(body.p-match) .tlv { width:30px; height:30px; border-radius:50%; background:#171c24; border:1px solid #2f3a49;
         color:var(--text); font-weight:700; font-size:12px; display:flex; align-items:center;
         justify-content:center; }
  :where(body.p-match) .ttree { border-spacing:5px 4px; border-collapse:separate; width:100%; }
  :where(body.p-match) .ttree td { padding:5px 7px; font-size:11.5px; line-height:1.25; color:var(--mut); background:var(--bg);
              border:1px solid var(--line); border-radius:7px; width:45%; }
  :where(body.p-match) .ttree td.on { color:var(--brand); background:#1d2410; border-color:var(--brand); font-weight:600; }
  /* ===== ВСТРАИВАНИЕ В ЧУЖУЮ СТРАНИЦУ (?embed=1, 06.08) =====
     Внутри рамки ширину и отступы задаёт ХОЗЯИН страницы, а не мы: обычная
     колонка сайта здесь даёт двойные поля — свои снаружи рамки и свои внутри.
     Фон тот же тёмный, что у страницы: рамка не должна светиться белым, пока
     грузится карта. Больше стилей у этого режима нет — плеер, карта и панель
     обязаны выглядеть ровно так же, иначе это второй экран, а не тот же. */
  body:where(.p-match).mt-embed { background:var(--bg); }
  body:where(.p-match).mt-embed .wrap { max-width:none !important; width:auto; margin:0 !important; padding:8px 10px !important; }
  body:where(.p-match).mt-embed .mtwrap { padding:0; }
  body:where(.p-match).mt-embed .mtsub { margin:0 0 8px; }/* ==================== moves_check.php ==================== */

  /* (01.08) ДИЗАЙН ПО КАНОНУ САЙТА (ФАЗА_Б §2 + ПРАВИЛА/ИНТЕРФЕЙС).
     Что было не так: своя узкая колонка в 1000px посреди страницы шириной 1400,
     свои оттенки вместо токенов и стена текста под картой вместо значков.
     Теперь: контент на всю ширину .wrap, цвета и радиусы из канона, легенда —
     сеткой из нарисованных значков, а не абзацем. Лайм остаётся только у
     действий и активных состояний, иначе он перестаёт что-либо значить. */
  body:where(.p-moves-check) { background:#0e1116; color:#e8ecf2; font:14px/1.5 'Inter',system-ui,sans-serif; margin:0; padding:0; }
  :where(body.p-moves-check) .pool { width:100%; }
  :where(body.p-moves-check) h1 { font-family:'Oswald',system-ui,sans-serif; font-size:26px; letter-spacing:.01em;
       color:#e8ecf2; margin:0 0 2px; text-transform:uppercase; }
  :where(body.p-moves-check) .sub { color:#8b96a5; font-size:12.5px; margin-bottom:18px; }
  /* (02.08, Вова) КОРОБКА УЖАТА. Экран не влезал в первый экран буквально
     на полсотни пикселей, и из-за них приходилось скроллить, теряя карту из
     виду. Отобрали их там, где они ничего не держат: поля коробки и зазор между
     картой и панелью. Сама карта не уменьшена — она главное на экране. */
  :where(body.p-moves-check) .box { border:1px solid #242c38; border-radius:14px; background:#171c24; padding:10px 12px; margin-bottom:10px; }
  :where(body.p-moves-check) .sec { font-weight:600; font-size:11.5px; color:#8b96a5; text-transform:uppercase; letter-spacing:.06em; margin:0 0 6px; }
  :where(body.p-moves-check) .sec + .sec, :where(body.p-moves-check) .box > .sec:not(:first-child) { margin-top:16px; }
  :where(body.p-moves-check) .chips { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:9px; }
  /* (02.08) СВОЙ display ПЕРЕБИВАЕТ hidden. Атрибут hidden — это всего лишь
     display:none из стилей браузера, и любое наше правило его отменяет. Из-за
     этого блок «Что показываем» годами висел на экране, хотя в разметке стоял
     hidden. Гасим явно — иначе следующий скрытый ряд чипов снова «не спрячется». */
  :where(body.p-moves-check) .chips[hidden] { display:none; }
  :where(body.p-moves-check) .chip { border:1px solid #242c38; border-radius:10px; padding:5px 12px; font-size:12.5px; color:#e8ecf2;
          cursor:pointer; user-select:none; transition:.15s ease-in-out; background:#0e1116; }
  :where(body.p-moves-check) .chip:hover { border-color:#c5f02b; color:#c5f02b; }
  :where(body.p-moves-check) .chip:active { transform:scale(.96); }
  :where(body.p-moves-check) .chip.on { background:#c5f02b; border-color:#c5f02b; color:#10130a; font-weight:700; }
  /* ===== ПРАВИЛО ОФОРМЛЕНИЯ КНОПОК (02.08, Вова) =====
     Что можно показать значком — показываем значком, без подписи. Панель из
     пятнадцати текстовых кнопок читается построчно, как список; панель из
     значков узнаётся одним взглядом, как приборная доска. Подпись остаётся
     только там, где значка не существует (скорость, длина хвоста) или где текст
     сам по себе данные (номер матча).
     Что нельзя терять вместе с подписью — это ЧТО кнопка делает. Поэтому у
     каждой иконки обязателен `title`: наведение всегда отвечает словами. */
  :where(body.p-moves-check) .chip.ic { padding:5px 9px; display:inline-flex; align-items:center; justify-content:center;
             line-height:0; min-width:34px; }
  :where(body.p-moves-check) .chip.ic img { width:19px; height:19px; object-fit:contain; display:block; }
  :where(body.p-moves-check) .chip.ic svg { display:block; }
  /* иконка наследует цвет кнопки: погашённый слой серый, включённый —
     тёмный на лайме, и отдельных «выключенных» картинок заводить не надо */
  :where(body.p-moves-check) .chip.ic svg { stroke:currentColor; fill:none; }
  :where(body.p-moves-check) .chip.ic svg .fl { fill:currentColor; stroke:none; }
  /* кнопка перемотки: стрелка и число порознь, с воздухом между ними —
     именно слипшиеся варианты и не читались */
  :where(body.p-moves-check) .chip.ic.sk { gap:5px; padding:5px 10px; }
  :where(body.p-moves-check) .chip.ic.sk b { font-size:12px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
  :where(body.p-moves-check) .subtle { color:#8b96a5; font-weight:400; text-transform:none; letter-spacing:0; font-size:10.5px; }
  :where(body.p-moves-check) .rico { width:16px; height:16px; display:block; object-fit:contain; }
  :where(body.p-moves-check) .chip.ic .rico { width:17px; height:17px; }
  :where(body.p-moves-check) .chip.ic:not(.on) img { opacity:.62; }
  /* ⚠️ ЗНАЧОК НА ВКЛЮЧЁННОЙ КНОПКЕ (03.08, Вова: «иконка белая, не видно»).
     Рисованные значки наследуют цвет кнопки через `currentColor` и на лайме сами
     становятся тёмными. А значки ролей — это КАРТИНКИ (`img/dota/roles/pos*.png`),
     белые силуэты: цвет кнопки им не передать никак, и на лаймовом фоне выходило
     белое по белому.
     `brightness(0)` красит любой силуэт в чёрный, каким бы он ни был изначально, —
     поэтому правило годится и для будущих значков, и не требует второго набора
     «тёмных» картинок. Действует на всех кнопках сразу: те же значки ролей стоят
     и в фильтре тепловой, где беда была ровно такая же. */
  :where(body.p-moves-check) .chip.ic.on img { opacity:1; filter:brightness(0); }
  /* ===== КОМАНДЫ: СВЕТ СЛЕВА, ТЬМА СПРАВА =====
     Тот же порядок, что в клиенте Доты, в полосе состояния под картой и в голове
     тренера. Разные порядки в двух местах одного экрана — это гарантированная
     ошибка на занятии. */
  :where(body.p-moves-check) .teams { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
  :where(body.p-moves-check) .tside { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; font-weight:700; }
  :where(body.p-moves-check) .tside.r { color:#5cc856; }
  :where(body.p-moves-check) .tside.d { color:#d6543e; }
  :where(body.p-moves-check) .heads { gap:5px; margin-bottom:0; }
  /* ГЕРОЙ УЗНАЁТСЯ ПОРТРЕТОМ, А НЕ ИМЕНЕМ. Десять названий в две строки
     тренер вычитывает; десять портретов — те же самые, что у него на карте и в
     полосе состояния, — он видит. Выключенный герой не пропадает, а гаснет:
     список из десяти должен оставаться на месте, иначе кнопки прыгают. */
  :where(body.p-moves-check) .chip.hd { padding:0; border-radius:8px; overflow:hidden; position:relative; line-height:0;
             background:#0e1116; text-decoration:none; }
  :where(body.p-moves-check) .chip.hd img { width:100%; height:26px; object-fit:cover; display:block; opacity:.4;
                 transition:opacity .15s ease-in-out; }
  :where(body.p-moves-check) .chip.hd:hover img { opacity:.85; }
  :where(body.p-moves-check) .chip.hd.on { border-color:#c5f02b; background:#0e1116; }
  :where(body.p-moves-check) .chip.hd.on img { opacity:1; }
  /* хайлайт героя (Ctrl+Alt+клик): золото на чипе — та же метка, что
     золотое кольцо на карте, чтобы связка читалась без слов */
  :where(body.p-moves-check) .chip.gl { border-color:#f0c24c; box-shadow:0 0 7px rgba(240,194,76,.55); }
  :where(body.p-moves-check) .chip.hd.gl img { opacity:1; }
  /* полоска снизу — цвет слота Доты: тот же, которым нарисована дорожка
     этого героя на карте. Связка «эта линия — вот этот» без единого слова. */
  :where(body.p-moves-check) .chip.hd i { position:absolute; left:0; right:0; bottom:0; height:3px; display:block; }
  /* число игр прямо на портрете: «на ком он играл» и «сколько» — это один
     вопрос, разносить их по двум местам незачем */
  :where(body.p-moves-check) .chip.hd .hdn { position:absolute; right:2px; top:1px; font-size:10px; line-height:1; font-weight:700;
                  color:#fff; text-shadow:0 0 3px #000, 0 0 2px #000; }
  :where(body.p-moves-check) #pl-top .chip.hd { flex:0 0 auto; width:56px; }
  :where(body.p-moves-check) .heads .chip.hd { flex:1 1 0; min-width:38px; max-width:56px; }
  /* строка «подпись — ползунок — время»: концы диапазона перестают быть
     двумя одинаковыми палками и начинают что-то значить */
  :where(body.p-moves-check) .rngrow { display:flex; align-items:center; gap:9px; margin:4px 0; }
  :where(body.p-moves-check) .rngrow input[type=range] { flex:1; accent-color:#c5f02b; min-width:0; }
  :where(body.p-moves-check) .rnglab { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#8b96a5;
            font-weight:700; width:34px; flex:0 0 auto; }
  :where(body.p-moves-check) .rngrow .tval { min-width:44px; font-size:13px; text-align:right; }
  /* карта — главный герой экрана, поэтому ей отдана вся левая половина и
     минимум 640px; панель управления не уже 340, иначе чипы рвутся по одному */
  /* (01.08, Вова) ШИРИНЫ ФИКСИРОВАННЫЕ, БЕЗ РЕЗИНЫ. Полоска здоровья,
     растянутая на пол-экрана, каждый раз выглядит по-новому и мешает сравнивать
     героев между собой. Полосы и настройки теперь жёсткие, тянется только карта —
     она одна от этого выигрывает. На узком окне колонки переносятся. */
  /* (01.08, Вова) СЕТКА, А НЕ РЯД. Три колонки в ряд не влезали в ширину
     страницы, и настройки уезжали за край. Теперь слева карта во всю высоту, а
     справа одна колонка: сверху настройки, под ними герои. На узком окне всё
     складывается в один столбец. */
  /* (01.08, Вова) ТЯНЕТСЯ ТОЛЬКО КАРТА. Колонка карты была auto и брала
     ширину по содержимому: карта считалась от высоты окна, оставалась узкой, а
     справа от неё зияла пустая полоса до самой полосы состояния. Теперь левая
     колонка забирает всё свободное место, правая держит свои 560 — и карта
     занимает эту колонку целиком, без дырки. */
  :where(body.p-moves-check) .mapwrap { display:grid; grid-template-columns:minmax(0, 1fr) 560px;
             grid-template-rows:auto 1fr; gap:10px 16px; align-items:start; }
  :where(body.p-moves-check) .mapwrap > .mapcol { grid-column:1; grid-row:1 / span 2; }
  :where(body.p-moves-check) .mapwrap > .ctl { grid-column:2; grid-row:1; }
  :where(body.p-moves-check) .mapwrap > .barcol { grid-column:2; grid-row:2; }
  @media(max-width:1180px) {
    :where(body.p-moves-check) .mapwrap { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; }
    :where(body.p-moves-check) .mapwrap > .mapcol { grid-column:1; grid-row:1; }
    :where(body.p-moves-check) .mapwrap > .ctl { grid-column:1; grid-row:2; }
    :where(body.p-moves-check) .mapwrap > .barcol { grid-column:1; grid-row:3; }}
  :where(body.p-moves-check) .mapcol { min-width:0; }
  :where(body.p-moves-check) .ctl { max-width:100%; }
  /* ===== ПРАВАЯ КОЛОНКА НЕ ДЛИННЕЕ КАРТЫ (02.08, Вова) =====
     Карточки десяти героев уезжали ниже карты, и чтобы посмотреть на билд
     Undying, приходилось скроллить — а карта при этом уходила из виду. Смысл
     экрана ровно в том, чтобы видеть положение и статы ОДНОВРЕМЕННО.
     Высоту карты в чистом CSS не узнать: она равна ширине своей колонки, а
     колонка резиновая. Поэтому потолок правой колонке ставит JS (fitRight),
     а CSS отвечает за то, чтобы внутри этого потолка ничего не обрезалось.
     Карточки заодно ужаты: меньше отступов, мельче портрет и предметы — десять
     штук должны влезать без прокрутки, а не «почти влезать». */
  :where(body.p-moves-check) .barcol { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  :where(body.p-moves-check) .barcol::-webkit-scrollbar { width:7px; }
  :where(body.p-moves-check) .barcol::-webkit-scrollbar-thumb { background:#242c38; border-radius:4px; }
  :where(body.p-moves-check) .pane[hidden] { display:none; }
  /* (01.08, Вова) КАРТА ВО ВСЮ ШИРИНУ СВОЕЙ КОЛОНКИ. Считать её от высоты
     окна было ошибкой: на широком мониторе карта оставалась маленькой, а место
     рядом пропадало впустую. Квадрат держит aspect-ratio, высота идёт следом за
     шириной. Потолок 900 — дальше расти незачем, портреты и так крупные. */
  :where(body.p-moves-check) #mv-cv { width:100%; max-width:900px; height:auto;
           aspect-ratio:1; border-radius:14px; background:#05070a;
           display:block; cursor:default; touch-action:none; }
  /* ===== ДЕНЬ И НОЧЬ НАД КАРТОЙ (01.08, Вова) =====
     Как в клиенте: значок солнца или луны и время матча. Тренеру не надо считать
     в уме «шла шестая минута, значит было темно» — видно сразу. Ползунок времени
     справа не трогаем, это отдельный, второй показ времени. */
  /* (02.08, Вова) ТАЙМЕР ПЕРЕЕХАЛ ВНУТРЬ КАРТЫ. Над картой он заставлял
     глаз ездить по всей странице: положение героя на карте, время над картой,
     билд справа — три разных места под три куска одной мысли. В Доте всё играет
     вокруг таймера, значит и здесь он должен быть там же, где смотришь.
     Держим его полупрозрачным (60%) и НЕ ловим им мышь — под ним живая карта.
     Подошёл герой вплотную — гаснет до 30%: см. dnFade(). */
  :where(body.p-moves-check) .mapcol { position:relative; }
  :where(body.p-moves-check) .spin { display:inline-block; width:20px; height:20px; border:2px solid var(--mut);
          border-top-color:var(--brand); border-radius:50%; animation:mov-sp .8s linear infinite;
          vertical-align:-4px; margin-right:9px; }
  @keyframes mov-sp { to { transform:rotate(360deg); } }
  :where(body.p-moves-check) .mvload { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
            pointer-events:none; background:rgba(10,13,18,.5); border-radius:8px;
            color:var(--txt); font:600 15px 'Inter',sans-serif; }
  :where(body.p-moves-check) .mvload[hidden] { display:none; }   /* [hidden] слабее .mvload{display:flex} — иначе оверлей не прячется (05.08) */
  :where(body.p-moves-check) .dnrow { position:absolute; top:10px; left:0; right:0; display:flex; justify-content:center;
           z-index:3; pointer-events:none; max-width:900px; }
  /* своё display:flex перебивает браузерное hidden — иначе плашка висела
     бы с «0:00» ещё до загрузки матча */
  :where(body.p-moves-check) .dnrow[hidden] { display:none; }
  /* (02.08, Вова) КРУПНЕЕ И ЗАМЕТНЕЕ. Первый заход сделал плашку слишком
     скромной: на неё приходилось наводиться взглядом, а она должна ловиться
     боковым зрением, не отрывая внимания от замеса. */
  /* (02.08, Вова) ПЛАШКА НЕПРОЗРАЧНАЯ. Полупрозрачное время читалось
     хуже, чем должно: это главный ориентир экрана, вокруг него крутится весь
     разговор. Прозрачность оставлена только на один случай — когда к плашке
     подходит герой (.near). */
  :where(body.p-moves-check) .dn { display:inline-flex; align-items:center; gap:10px; background:#12161d;
        border:1px solid #2b3341; border-radius:12px; padding:8px 17px;
        opacity:1; transition:opacity .25s ease-in-out, background .3s ease-in-out,
                              border-color .3s ease-in-out; }
  /* герой рядом — уходим с дороги, но не исчезаем: время на разборе замеса
     нужно не меньше, чем сам замес */
  :where(body.p-moves-check) .dn.near { opacity:.3; }
  /* цифры чисто белые: бледно-серый на тёмной подложке терялся */
  :where(body.p-moves-check) .dn b { font-family:'Oswald',system-ui,sans-serif; font-weight:600; font-size:20px; line-height:1;
          letter-spacing:.02em; color:#fff; font-variant-numeric:tabular-nums; }
  :where(body.p-moves-check) .dn svg { display:block; flex:0 0 auto; }
  :where(body.p-moves-check) .dn .moon { display:none; }
  /* (02.08, Вова) ДЕНЬ И НОЧЬ МЕНЯЮТ ВСЮ ПЛАШКУ, А НЕ ТОЛЬКО ЗНАЧОК.
     Солнце на луну — это деталь, её надо разглядеть; светлее или темнее сам
     прямоугольник видно боковым зрением, не отрываясь от замеса. Днём подложка
     уходит в тёплый серый, ночью — в холодный тёмно-синий. */
  :where(body.p-moves-check) .dn { background:#2a3038; border-color:#414b59; }          /* день — светлее */
  :where(body.p-moves-check) .dn.night { background:#0b0f18; border-color:#26304a; }    /* ночь — темнее */
  :where(body.p-moves-check) .dn.night .sun { display:none; }
  :where(body.p-moves-check) .dn.night .moon { display:block; }
  :where(body.p-moves-check) .lgd { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; }
  :where(body.p-moves-check) .lgd span { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#8b96a5; }
  :where(body.p-moves-check) .lgd i { width:10px; height:10px; border-radius:50%; display:inline-block; }
  :where(body.p-moves-check) .note { color:#8b96a5; font-size:12px; margin-top:8px; }
  :where(body.p-moves-check) .tline { display:flex; align-items:center; gap:10px; margin:10px 0 4px; }
  :where(body.p-moves-check) .tline input[type=range] { flex:1; accent-color:#c5f02b; }
  :where(body.p-moves-check) .tval { font-variant-numeric:tabular-nums; color:#c5f02b; font-weight:700; min-width:56px; font-size:15px; }
  /* (06.08) ЗОНЫ ПАНЕЛИ + ЖУРНАЛ СОБЫТИЙ. Классы 1-в-1 со страницей матча:
     каждая группа настроек на своей подложке, метки событий поверх ползунка,
     строки журнала справа. */
  :where(body.p-moves-check) .zone { background:#0e1116; border:1px solid #242c38; border-radius:12px; padding:10px 12px; margin-bottom:10px; }
  :where(body.p-moves-check) .zone > .sec:first-child { margin-top:0; }
  :where(body.p-moves-check) .zhint { font-weight:400; text-transform:none; letter-spacing:0; color:#5b6674; font-size:10.5px; margin-left:6px; }
  /* (06.08 r2) СВОРАЧИВАЕМАЯ ЗОНА: клик по .sec.zc прячет тело зоны, шеврон крутится */
  :where(body.p-moves-check) .sec.zc { display:flex; align-items:center; cursor:pointer; user-select:none; }
  :where(body.p-moves-check) .sec.zc .zchv { margin-left:auto; flex:0 0 auto; transition:transform .15s ease-in-out; }
  :where(body.p-moves-check) .zone.collapsed > .sec.zc .zchv { transform:rotate(-90deg); }
  :where(body.p-moves-check) .zone.collapsed > :not(:first-child) { display:none; }
  :where(body.p-moves-check) .slwrap { position:relative; flex:1; display:flex; align-items:center; }
  :where(body.p-moves-check) .slwrap input[type=range] { flex:1; width:100%; accent-color:#c5f02b; position:relative; z-index:1; margin:0; }
  :where(body.p-moves-check) .slmarks { position:absolute; left:0; right:0; top:50%; height:0; pointer-events:none; z-index:2; }
  :where(body.p-moves-check) .slmark { position:absolute; top:-6px; width:2px; height:12px; border-radius:1px; transform:translateX(-50%);
            cursor:pointer; pointer-events:auto; opacity:.85; transition:.12s ease-in-out; }
  :where(body.p-moves-check) .slmark:hover { opacity:1; height:16px; top:-8px; }
  :where(body.p-moves-check) .slmark.r { background:#5cc856; } :where(body.p-moves-check) .slmark.d { background:#d6543e; } :where(body.p-moves-check) .slmark.n { background:#f0c92b; }
  :where(body.p-moves-check) .slmark.rosh { background:var(--gold); }
  :where(body.p-moves-check) .slmark.rosh img { position:absolute; bottom:13px; left:50%; transform:translateX(-50%); width:15px; height:15px; pointer-events:none; }
  :where(body.p-moves-check) .jrn { display:flex; flex-direction:column; gap:2px; max-height:240px; overflow-y:auto; }
  :where(body.p-moves-check) .jrn-empty { color:#5b6674; font-size:12px; padding:4px 2px; }
  :where(body.p-moves-check) .jrow { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:7px; font-size:12px;
          cursor:pointer; transition:.15s ease-in-out; }
  :where(body.p-moves-check) .jrow:hover { background:rgba(255,255,255,.05); }
  :where(body.p-moves-check) .jrow.act { background:rgba(197,240,43,.08); }
  :where(body.p-moves-check) .jrow .jtm { font-family:'Oswald',system-ui,sans-serif; font-weight:600; font-size:12px; color:#8b96a5;
               flex:0 0 32px; font-variant-numeric:tabular-nums; }
  :where(body.p-moves-check) .jrow .jico { flex:0 0 auto; display:flex; align-items:center; }
  :where(body.p-moves-check) .jrow .jlab { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  :where(body.p-moves-check) .jrow .jlab.r { color:#8fd8a0; } :where(body.p-moves-check) .jrow .jlab.d { color:#e0a59d; }
  :where(body.p-moves-check) .jrow .jpre { margin-left:auto; font-family:'Oswald',system-ui,sans-serif; font-weight:600; font-size:10px;
                color:#5b6674; border:1px solid #242c38; border-radius:5px; padding:0 5px; opacity:0;
                transition:.15s ease-in-out; flex:0 0 auto; }
  :where(body.p-moves-check) .jrow:hover .jpre { opacity:1; color:#c5f02b; border-color:#c5f02b; }
  :where(body.p-moves-check) select { background:#0e1116; border:1px solid #242c38; border-radius:10px; color:#e8ecf2;
           padding:9px 11px; font:inherit; outline:none; max-width:100%; width:100%; transition:.15s ease-in-out; }
  :where(body.p-moves-check) select:focus, :where(body.p-moves-check) select:hover { border-color:#c5f02b; }
  :where(body.p-moves-check) input[type=text] { background:#0e1116; border:1px solid #242c38; border-radius:10px; color:#e8ecf2;
                     padding:9px 11px; font:inherit; outline:none; width:150px; transition:.15s ease-in-out; }
  :where(body.p-moves-check) input[type=text]:focus { border-color:#c5f02b; }
  :where(body.p-moves-check) .empty { color:#8b96a5; padding:10px 0; }
  :where(body.p-moves-check) code { background:#0e1116; border:1px solid #242c38; border-radius:8px; padding:1px 6px; font-size:12.5px; }
  /* ЛЕГЕНДА ЗНАЧКАМИ, А НЕ АБЗАЦЕМ. Читать три строки мелкого текста под
     картой никто не будет; рисунок рядом со словом опознаётся сразу. */
  :where(body.p-moves-check) .keys { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:9px 14px; margin-top:12px; }
  :where(body.p-moves-check) .key { display:flex; align-items:center; gap:9px; font-size:12px; color:#8b96a5; }
  :where(body.p-moves-check) .key svg { flex:0 0 auto; }
  :where(body.p-moves-check) .hint { color:#8b96a5; font-size:10.5px; line-height:1.3; margin-top:6px; display:flex; gap:3px 12px; flex-wrap:wrap; }
  :where(body.p-moves-check) .hint b { color:#e8ecf2; font-weight:600; }
  :where(body.p-moves-check) .hint span { white-space:nowrap; }
  /* ===== ПОЛОСА СОСТОЯНИЯ (01.08, Вова) =====
     Раскладка как в клиенте Доты: Свет слева, Тьма справа, по пятеро в столбик.
     Строка героя читается слева направо теми же кусками, что и в игре: портрет с
     уровнем, здоровье и мана полосками, золото, инвентарь. Бэкпак, ТП и
     нейтралка — вторым рядом и мельче: они нужны, но спорить с основными шестью
     не должны. */
  :where(body.p-moves-check) .barcol { max-width:100%; }
  /* два столбца: Свет слева, Тьма справа, между ними линия — тот же
     порядок, что в клиенте Доты и в голове тренера */
  /* те же грабли, что и в блоке матчапа: свой display перебивает hidden */
  :where(body.p-moves-check) .bar[hidden] { display:none; }
  :where(body.p-moves-check) .bar { display:flex; gap:0; align-items:flex-start; }
  :where(body.p-moves-check) .side { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; padding:0 6px; }
  :where(body.p-moves-check) .side + .side { border-left:1px solid #242c38; }
  /* (01.08, Вова) СТРОКА ГЕРОЯ ЛЕЖИТ ЭТАЖАМИ, А НЕ В РЯД. Полоски здоровья
     и маны стояли в узкой средней колонке и на десятерых сжимались до пяти
     пикселей: по такой полоске нельзя сказать ни сколько у героя жизни, ни
     сравнить его с соседом. Теперь сверху портрет, имя и золото, под ними
     здоровье и мана во всю ширину карточки, ниже предметы и раскачка. Карточка
     стала выше, но не шире — карта от этого не ужимается. */
  :where(body.p-moves-check) .pl { display:flex; flex-direction:column; gap:3px; background:#0e1116; border:1px solid #242c38;
        border-radius:9px; padding:4px 7px; transition:.15s ease-in-out; }
  :where(body.p-moves-check) .pl.dead { opacity:.42; }
  /* (02.08, Вова) ВСПЫШКА КАРТОЧКИ ПО КЛИКУ НА ГЕРОЯ НА КАРТЕ. Полсекунды
     лаймовой рамки — ровно столько, чтобы глаз успел доехать с карты до статов и
     зацепиться. Дольше держать нельзя: подсветка перестанет читаться как «вот
     этот» и станет просто ещё одним цветом на экране.
     Анимация, а не класс с задержкой: браузер сам её погасит, и ни один таймер
     не переживёт смену матча. */
  @keyframes mov-plflash {
    0%   { border-color:#c5f02b; box-shadow:0 0 0 2px rgba(197,240,43,.55), 0 0 18px rgba(197,240,43,.35); }
    70%  { border-color:#c5f02b; box-shadow:0 0 0 2px rgba(197,240,43,.45), 0 0 14px rgba(197,240,43,.25); }
    100% { border-color:#242c38; box-shadow:none; }
  }
  :where(body.p-moves-check) .pl.flash { animation:mov-plflash .55s ease-out 1; }
  @media (prefers-reduced-motion:reduce) { :where(body.p-moves-check) .pl.flash { animation-duration:.01s; }}
  /* (04.08, Вова) ХАЙЛАЙТ ГЕРОЯ (Ctrl+Alt+клик) на его карточке статов —
     то же золото, что кольцо на карте и рамка на чипе: одна метка на три места */
  :where(body.p-moves-check) .pl.gl { border-color:#f0c24c; box-shadow:0 0 0 1px rgba(240,194,76,.5), 0 0 12px rgba(240,194,76,.28); }
  :where(body.p-moves-check) .ptop { display:flex; align-items:center; gap:8px; min-width:0; }
  :where(body.p-moves-check) .pw { position:relative; flex:0 0 auto; }
  :where(body.p-moves-check) .pa { width:34px; height:20px; object-fit:cover; border-radius:4px; display:block; }
  :where(body.p-moves-check) .lv { position:absolute; right:-5px; bottom:-6px; min-width:15px; text-align:center;
        background:#171c24; border:1px solid #242c38; border-radius:4px; font-size:10px;
        font-weight:700; color:#e8ecf2; padding:0 2px; }
  :where(body.p-moves-check) .pc { flex:1 1 auto; min-width:0; }
  :where(body.p-moves-check) .pn { font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* ник игрока рядом с героем: белый, потому что к линиям на карте он
     отношения не имеет и цвет слота у него отбирать нечего. Чёрточка серая и
     тонкая — это разделитель, а не слово. Обрезается вместе с именем героя одним
     `text-overflow` у `.pn`, поэтому своих ограничений ширины у ника нет. */
  /* значок позиции наследует цвет слота от .pn — он про этого же героя,
     и своего цвета ему не нужно */
  :where(body.p-moves-check) .pn .pps { display:inline-flex; vertical-align:-2px; margin-left:5px; opacity:.85; }
  :where(body.p-moves-check) .pn .pps .rico { width:12px; height:12px; }
  :where(body.p-moves-check) .pn .pnd { color:#4b5769; font-style:normal; font-weight:400; margin:0 5px; }
  :where(body.p-moves-check) .pn .pnn { color:#f2f5f9; font-weight:600; }
  /* полоски одинаковой ширины у всех десятерых — только так их можно
     сравнивать глазами; здоровье толще маны, как в клиенте */
  :where(body.p-moves-check) .hb, :where(body.p-moves-check) .mb { width:100%; border-radius:3px; background:#242c38; overflow:hidden; }
  :where(body.p-moves-check) .hb { height:7px; }
  :where(body.p-moves-check) .mb { height:5px; }
  :where(body.p-moves-check) .hb i { display:block; height:100%; background:#39c26d; transition:width .1s linear; }
  :where(body.p-moves-check) .mb i { display:block; height:100%; background:#3b7dff; transition:width .1s linear; }
  :where(body.p-moves-check) .pg { min-width:0; }
  /* ===== ПОКАЗАТЕЛЬ В КАРТОЧКАХ (03.08, Вова) =====
     Переключатель стоит В ЗАГОЛОВКЕ «Heroes», прижатый к правому краю: он
     относится к цифре в карточках и живёт рядом с ней, а не отдельной строкой,
     которой на этом экране взяться негде.
     Цвет цифры меняется вместе с показателем, и это не украшение: ластхиты и
     деньги — разные величины, а место в карточке у них одно. Серо-белые
     ластхиты и жёлтые деньги не спутать даже мельком, не сверяясь с кнопкой. */
  :where(body.p-moves-check) .met { display:inline-flex; gap:4px; margin:0 0 0 10px; vertical-align:middle; }
  :where(body.p-moves-check) .met .chip { padding:2px 7px; font-size:10.5px; font-weight:700; letter-spacing:.04em; border-radius:7px; }
  :where(body.p-moves-check) .bar[data-met="cs"] .gd { color:#dfe6ef; }
  :where(body.p-moves-check) .bar[data-met="nw"] .gd { color:#f0c33c; }
  /* ===== НЕВЫБРАННЫЕ КАРТОЧКИ ГАСНУТ (03.08, Вова) =====
     Тренер сравнивает паттерн фарма двух керри и показывает разницу в нетворсе.
     Пока восемь остальных карточек светятся так же ярко, ученик смотрит на все
     десять и не видит ни одной. Гаснут они не «в ноль», а до четверти: карточка
     должна остаться на месте, иначе список из десяти прыгает и сравнивать
     становится нечего. Выбрал всех (состояние по умолчанию) — не гаснет никто. */
  :where(body.p-moves-check) .pl.off { opacity:.26; }
  :where(body.p-moves-check) .gd { font-size:12px; font-weight:700; color:#f0c33c; font-variant-numeric:tabular-nums;
        margin-left:auto; flex:0 0 auto; }
  :where(body.p-moves-check) .inv { display:flex; gap:2px; margin-top:2px; }
  :where(body.p-moves-check) .inv img { width:20px; height:15px; object-fit:cover; border-radius:3px; display:block; background:#171c24; }
  :where(body.p-moves-check) .inv .es { width:20px; height:15px; border-radius:3px; background:#171c24; border:1px solid #242c38; display:block; }
  /* слот ТП стоит наособицу — узкий зазор и своя рамка, чтобы не читался
     как седьмая обычная клетка */
  /* стак показываем цифрой в углу, как в игре: две ветки это одна клетка
     с двойкой, а не две клетки */
  :where(body.p-moves-check) .inv .cel { position:relative; width:20px; height:15px; flex:0 0 auto; }
  :where(body.p-moves-check) .inv .cel img { width:20px; height:15px; }
  :where(body.p-moves-check) .inv .qt { position:absolute; right:1px; bottom:0; font-size:9px; line-height:1; font-weight:700;
             color:#e8ecf2; text-shadow:0 0 3px #000, 0 0 2px #000; }
  :where(body.p-moves-check) .inv .gap { width:5px; display:block; }
  :where(body.p-moves-check) .inv .tpc { border:1px solid #2f3a49; border-radius:3px; }
  :where(body.p-moves-check) .inv .tpc.off { opacity:.45; border-style:dashed; }
  :where(body.p-moves-check) .inv.sm img, :where(body.p-moves-check) .inv.sm .es { width:15px; height:11px; }
  /* раскачка: иконки способностей и таланты. Талант картинки не имеет —
     рисуем его лаймовым квадратиком с плюсом, это узнаётся быстрее подписи. */
  :where(body.p-moves-check) .abl { display:flex; gap:2px; margin-top:3px; flex-wrap:wrap; }
  :where(body.p-moves-check) .abl img { width:16px; height:16px; border-radius:3px; display:block; background:#171c24; }
  :where(body.p-moves-check) .abl .unk { border-color:#242c38; color:#8b96a5; background:#171c24; cursor:help; }
  /* подсказка в стиле сайта, а не браузерная: своя карточка, тёмная,
     с именем и описанием — читать про способность в системном пузырьке нельзя */
  :where(body.p-moves-check) #mv-tt { position:fixed; z-index:60; max-width:280px; background:#171c24; border:1px solid #242c38;
           border-radius:10px; padding:9px 11px; font-size:12px; color:#8b96a5; pointer-events:none;
           box-shadow:0 8px 24px rgba(0,0,0,.5); display:none; }
  :where(body.p-moves-check) #mv-tt b { display:block; color:#e8ecf2; font-size:12.5px; margin-bottom:3px; }
  :where(body.p-moves-check) .tt-t { color:#e8ecf2; font-weight:700; font-size:13px; margin-bottom:2px; }
  :where(body.p-moves-check) .tt-c { color:#f0c33c; font-weight:700; font-size:12px; margin-bottom:6px; }
  :where(body.p-moves-check) .tt-a { color:#c9d1d9; font-size:12px; margin-bottom:6px; }
  :where(body.p-moves-check) .tt-act { background:#0e1116; border:1px solid #2f3a49; border-radius:7px; padding:5px 8px;
            color:#e8ecf2; font-size:12px; font-weight:600; margin:6px 0 4px; }
  :where(body.p-moves-check) .tt-chip { color:#8b96a5; font-weight:400; font-size:11px; margin-left:6px; }
  :where(body.p-moves-check) .tt-d { font-size:12px; color:#8b96a5; margin-bottom:4px; }
  :where(body.p-moves-check) #mv-tt { max-width:420px; }
  /* дерево как в клиенте: кружок уровня по центру, по бокам варианты,
     взятый подсвечен. Ширины сторон одинаковые, иначе таблица «пляшет». */
  /* дерево талантов сеткой: слева и справа варианты, между ними кружок с
     уровнем — тот же вид, что в клиенте и у протрекера */
  :where(body.p-moves-check) .tgrid { display:grid; grid-template-columns:1fr 30px 1fr; gap:5px 6px; align-items:center;
           margin-top:5px; }
  :where(body.p-moves-check) .tl { padding:5px 7px; font-size:11.5px; line-height:1.25; color:#8b96a5; background:#0e1116;
        border:1px solid #242c38; border-radius:7px; }
  :where(body.p-moves-check) .tl.on { color:#c5f02b; background:#1d2410; border-color:#c5f02b; font-weight:600; }
  :where(body.p-moves-check) .tlv { width:30px; height:30px; border-radius:50%; background:#171c24; border:1px solid #2f3a49;
         color:#e8ecf2; font-weight:700; font-size:12px; display:flex; align-items:center;
         justify-content:center; }
  :where(body.p-moves-check) .ttree { border-spacing:5px 4px; border-collapse:separate; width:100%; }
  :where(body.p-moves-check) .ttree td { padding:5px 7px; font-size:11.5px; line-height:1.25; color:#8b96a5; background:#0e1116;
              border:1px solid #242c38; border-radius:7px; width:45%; }
  :where(body.p-moves-check) .ttree td.on { color:#c5f02b; background:#1d2410; border-color:#c5f02b; font-weight:600; }
  /* ===== БЛОК МАТЧАПОВ (03.08, Вова) =====
     Он лежит НАД картой во всю ширину, а не в правой колонке. Причина
     арифметическая: правая колонка держит 560 пикселей и уже занята десятью
     карточками героев, а здесь помещаются шесть карточек ролей, десяток
     прошников и список игр. Втиснуть это справа можно было только ужав карту,
     а карта на этом экране — главное.
     Плата за решение одна: чтобы вернуться к карте, нужен скролл. Поэтому блок
     складывается — выбрал матч, свернул, работаешь с картой. */
  :where(body.p-moves-check) .mu { padding:12px 14px; }
  /* ⚠️ ГРАБЛИ, НА КОТОРЫЕ ЗДЕСЬ УЖЕ НАСТУПАЛИ ВЫШЕ (см. `.chips[hidden]`):
     атрибут `hidden` — это всего лишь `display:none` из стилей браузера, и любое
     наше правило с `display` его молча отменяет. В этом блоке скрываются и ряды
     условий, и строка чипов позиции, и кнопка «плюс» — все они с `display:flex`.
     Гасим один раз на весь блок, чтобы следующий скрытый элемент не пришлось
     ловить глазами. */
  :where(body.p-moves-check) .mu [hidden] { display:none !important; }
  :where(body.p-moves-check) .muhead { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
  :where(body.p-moves-check) .muhead .sec { margin:0; }
  :where(body.p-moves-check) .muhead .grow { flex:1 1 auto; }
  /* поиск героя вместо сетки из ста двадцати портретов: набрал три буквы —
     остался один. Портретами хорошо выбирать из десяти (полоса состояния), но не
     из ста двадцати: там глаз ищет дольше, чем рука печатает. */
  :where(body.p-moves-check) .hq { position:relative; }
  :where(body.p-moves-check) .hq > input { width:190px; }
  /* ширина под строку позиций: ALL плюс пять значков в один ряд. Поперёк
     список не прокручивается никогда — `overflow-x:hidden`: горизонтальная
     полоса в выпадающем списке означает, что часть кнопок просто не видна, а
     догадаться, что их надо утащить пальцем в сторону, невозможно. */
  :where(body.p-moves-check) .hqdrop { position:absolute; left:0; top:calc(100% + 4px); z-index:40; width:300px; max-height:300px;
            overflow-y:auto; overflow-x:hidden; background:#0e1116; border:1px solid #2f3a49;
            border-radius:10px; padding:4px; box-shadow:0 12px 30px rgba(0,0,0,.55); }
  :where(body.p-moves-check) .hqdrop[hidden] { display:none; }
  /* строка позиций прилипает к верху списка: список длинный и скроллится,
     а фильтр должен остаться на виду — иначе, прокрутив до конца, его не найти */
  :where(body.p-moves-check) .hqpos { display:flex; flex-wrap:wrap; gap:4px; padding:3px 2px 6px; margin-bottom:3px;
           position:sticky; top:-4px; background:#0e1116; border-bottom:1px solid #242c38; z-index:1; }
  /* ⚠️ `flex:0 0 auto` и `nowrap` обязательны: во flex-строке кнопки по
     умолчанию сжимаются, и «ALL» усыхал до «A». Кнопка не должна становиться
     уже своей подписи — лучше перенести ряд, чем обрезать слово. */
  :where(body.p-moves-check) .hqpos .chip { flex:0 0 auto; white-space:nowrap; padding:3px 9px; font-size:11px;
                 font-weight:700; min-width:0; }
  :where(body.p-moves-check) .hqpos .chip.ic { padding:3px 7px; min-width:28px; }
  :where(body.p-moves-check) .hqi { display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:7px; cursor:pointer;
         font-size:12.5px; color:#e8ecf2; }
  :where(body.p-moves-check) .hqi:hover, :where(body.p-moves-check) .hqi.pick { background:#1d2410; color:#c5f02b; }
  :where(body.p-moves-check) .hqi img { width:34px; height:20px; object-fit:cover; border-radius:4px; display:block; }
  :where(body.p-moves-check) .hqi .hqn { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  :where(body.p-moves-check) .hqi .hqg { font-size:11px; color:#8b96a5; font-variant-numeric:tabular-nums; }
  /* выбранный герой — портретом с именем и крестиком: и видно, кто выбран,
     и понятно, как отменить, без подписи «сбросить» */
  :where(body.p-moves-check) .hpick { display:inline-flex; align-items:center; gap:8px; background:#0e1116; border:1px solid #c5f02b;
           border-radius:10px; padding:3px 8px 3px 3px; font-size:12.5px; font-weight:600; }
  :where(body.p-moves-check) .hpick img { width:40px; height:23px; object-fit:cover; border-radius:6px; display:block; }
  :where(body.p-moves-check) .hpick .x { color:#8b96a5; cursor:pointer; font-size:15px; line-height:1; padding:0 2px; }
  :where(body.p-moves-check) .hpick .x:hover { color:#d6543e; }
  /* ===== КАРТОЧКИ РОЛЕЙ =====
     Один и тот же герой ходит на разные позиции, и «средний Инвокер» — это
     смесь мида с керри, из которой на карте получается каша. Поэтому роль здесь
     не украшение, а первый вопрос после героя: сразу видно, сколько игр реально
     есть на каждой, и куда идти незачем. Ноль игр не прячем — «ноль» это ответ. */
  :where(body.p-moves-check) .murole { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px; margin-bottom:12px; }
  :where(body.p-moves-check) .rcard { border:1px solid #242c38; border-radius:11px; background:#0e1116; padding:8px 10px;
           cursor:pointer; transition:.15s ease-in-out; text-align:center; }
  :where(body.p-moves-check) .rcard:hover { border-color:#c5f02b; }
  /* (03.08, Вова: «слишком сильная зелёная заливка, не видно иконку»)
     Выбранную карточку держит РАМКА, а не фон. Плотная заливка съедала значок
     роли: он нарисован одним цветом, и на цветном фоне контур пропадает. Восемь
     процентов лайма достаточно, чтобы карточка читалась выбранной, и мало,
     чтобы что-то на ней потерять. */
  :where(body.p-moves-check) .rcard.on { border-color:#c5f02b; background:rgba(197,240,43,.07); }
  :where(body.p-moves-check) .rcard.zero { opacity:.42; cursor:default; }
  :where(body.p-moves-check) .rcard .rl { display:flex; align-items:center; justify-content:center; gap:5px; font-size:11px;
               letter-spacing:.05em; text-transform:uppercase; color:#8b96a5; font-weight:700;
               margin-bottom:5px; }
  /* значок роли в карточке мельче, чем в кнопке: в кнопке он один и работает
     вместо подписи, здесь он стоит РЯДОМ с подписью и спорить с ней не должен */
  :where(body.p-moves-check) .rcard .rl .rico { width:13px; height:13px; }
  :where(body.p-moves-check) .rcard.on .rl { color:#c5f02b; }
  :where(body.p-moves-check) .rcard .rg { font-family:'Oswald',system-ui,sans-serif; font-size:20px; line-height:1; color:#e8ecf2; }
  :where(body.p-moves-check) .rcard .rwr { font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; }
  :where(body.p-moves-check) .wrhi { color:#39c26d; } :where(body.p-moves-check) .wrlo { color:#d6543e; } :where(body.p-moves-check) .wrmid { color:#8b96a5; }
  /* ===== ПРОШНИКИ =====
     Порядок — по мировому рангу их команды, а не по алфавиту и не по числу игр:
     тренер показывает ученику, как играет верх сцены, и первым в списке должен
     стоять верх сцены. Рейтинга отдельных игроков не существует ни у Valve, ни у
     OpenDota — есть только рейтинг команд, его и берём (при равенстве — у кого
     больше игр в текущем фильтре). Команды без ранга честно уходят в конец. */
  :where(body.p-moves-check) .mupl { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
  :where(body.p-moves-check) .pcard { border:1px solid #242c38; border-radius:11px; background:#0e1116; padding:6px 10px;
           cursor:pointer; transition:.15s ease-in-out; min-width:118px; }
  :where(body.p-moves-check) .pcard:hover { border-color:#c5f02b; }
  :where(body.p-moves-check) .pcard.on { border-color:#c5f02b; background:#1d2410; }
  :where(body.p-moves-check) .pcard .pt { display:flex; align-items:baseline; gap:6px; }
  :where(body.p-moves-check) .pcard .pnk { font-weight:700; font-size:12.5px; color:#e8ecf2; max-width:130px; overflow:hidden;
                text-overflow:ellipsis; white-space:nowrap; }
  :where(body.p-moves-check) .pcard .prk { font-size:10.5px; font-weight:700; color:#f0c33c; font-variant-numeric:tabular-nums; }
  :where(body.p-moves-check) .pcard .pb { display:flex; align-items:baseline; gap:6px; margin-top:2px; }
  :where(body.p-moves-check) .pcard .pg { font-size:11px; color:#8b96a5; }
  :where(body.p-moves-check) .pcard .ptm { font-size:10.5px; color:#8b96a5; max-width:130px; overflow:hidden;
                text-overflow:ellipsis; white-space:nowrap; }
  /* ===== СПИСОК ИГР =====
     Строка отвечает на четыре вопроса без единой подписи: выиграл ли (буква и
     цвет слева), кто играл, против кого (портреты врагов) и когда. Клик по
     строке = открыть эту игру на карте. */
  :where(body.p-moves-check) .mumt { display:flex; flex-direction:column; gap:5px; max-height:240px; overflow-y:auto; padding-right:4px; }
  :where(body.p-moves-check) .mumt::-webkit-scrollbar { width:7px; }
  :where(body.p-moves-check) .mumt::-webkit-scrollbar-thumb { background:#2f3a49; border-radius:7px; }
  /* ===== СТРОКА ИГРЫ (03.08, Вова) =====
     В одной строке восемь блоков: итог и когда, кто играл, команды, KDA, драфты
     обеих сторон, билд от старта к финалу, и в самом конце — копирование номера
     матча. Порядок слева направо — это порядок вопросов: «чем кончилось» →
     «кто» → «против кого» → «чем собрался».
     Блоки разделены ЧЕРТОЙ, а не воздухом: воздух в плотной строке не читается
     как граница, и глаз склеивает драфт врага с билдом. Черта — это
     `border-left` у ячейки, поэтому она сама тянется на всю высоту строки и не
     требует лишних элементов.
     ⚠️ ШИРИНЫ ФИКСИРОВАННЫЕ, И ЭТО ГЛАВНОЕ В ЭТОЙ СЕТКЕ (03.08, Вова: «W наезжает
     на дни, все блоки плавают»). Сначала драфты и билды стояли на `auto`, и
     ширина колонки зависела от того, сколько предметов купил ИМЕННО ЭТОТ игрок:
     в каждой строке столбцы оказывались на новом месте, а «W» наезжала на дни.
     Список из полутора сотен строк читают сверху вниз по одному столбцу, поэтому
     столбец обязан стоять на месте. Тянется только одна колонка — названия
     команд: она одна не мешает сравнивать, потому что её и так читают целиком.
     Числа под драфты и билды берутся не на глаз: 5 портретов по 24 + зазоры,
     6 предметов по 20 + зазоры, и всё это дважды. Меняешь размер картинки —
     пересчитай и здесь, иначе блоки снова начнут плавать. */
  /* ⚠️ `box-sizing` ЗАДАН ЗДЕСЬ ЯВНО, И БЕЗ НЕГО СЕТКА НЕ РАБОТАЕТ. На этой
     странице подключены только footer/layout/header.css, а глобальное
     `*{box-sizing:border-box}` живёт в `root/css/styles.css`, которого тут нет.
     Из-за этого бейдж «W» шириной 22px с рамкой и унаследованным паддингом
     занимал 38px в колонке 26px и налезал на «12 days» — та самая жалоба, ради
     которой колонки и фиксировали. Ширины ниже посчитаны ВКЛЮЧАЯ паддинг, то
     есть верны только вместе с этой строкой. */
  :where(body.p-moves-check) .mrow, :where(body.p-moves-check) .mrow > * { box-sizing:border-box; }
  /* (03.08, Вова) СТРОКИ ШИРЕ, ИХ МЕНЬШЕ НА ЭКРАН. Было семь строк за
     прокрутку, и в них приходилось всматриваться: портреты драфта и предметы
     билда стояли на 15–20 пикселях, то есть на пределе узнаваемости. Стало пять
     строк, но билд и стату видно с одного взгляда — а список и так листают, чтобы
     найти игру, а не чтобы пересчитать все сто пятьдесят. */
  /* (05.08, этап 4) девятая колонка — ссылка на страницу матча для ученика.
     Ширина взята из колонки команд (`1fr`, минимум ноль), поэтому строка не
     полезет за край блока: ужмётся только название лиги. */
  :where(body.p-moves-check) .mrow { display:grid;
          grid-template-columns:40px 66px 134px minmax(0,1fr) 68px 376px 378px 32px 30px;
          align-items:center; gap:0; padding:11px 4px; border:1px solid #242c38; border-radius:9px;
          background:#0e1116; cursor:pointer; transition:.15s ease-in-out; }
  :where(body.p-moves-check) .mrow > * { padding:0 7px; min-width:0; overflow:hidden; }
  :where(body.p-moves-check) .mrow > .mdiv { border-left:1px solid #2a323e; }
  :where(body.p-moves-check) .mrow:hover { border-color:#c5f02b; }
  :where(body.p-moves-check) .mrow.on { border-color:#c5f02b; background:rgba(197,240,43,.07); }
  /* W и L буквой и цветом разом: цвет читается мгновенно, буква работает
     при любой настройке монитора и не врёт дальтонику */
  :where(body.p-moves-check) .wl { width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center;
        font-weight:800; font-size:12px; }
  :where(body.p-moves-check) .wl.w { color:#39c26d; background:rgba(57,194,109,.13); border:1px solid rgba(57,194,109,.5); }
  :where(body.p-moves-check) .wl.l { color:#d6543e; background:rgba(214,84,62,.13); border:1px solid rgba(214,84,62,.5); }
  :where(body.p-moves-check) .mrow .mago { font-size:11.5px; color:#8b96a5; white-space:nowrap; }
  :where(body.p-moves-check) .mrow .mnk { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
               display:flex; align-items:center; gap:6px; }
  :where(body.p-moves-check) .mrow .mtm { font-size:11.5px; color:#8b96a5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  :where(body.p-moves-check) .mrow .mkda { font-size:12.5px; color:#c8d1dd; font-variant-numeric:tabular-nums; text-align:right; }
  /* ===== ДВА ДРАФТА В ОДНОЙ ЯЧЕЙКЕ =====
     Слева свои, справа враги, между ними тонкая черта. Разделяет их ещё и цвет
     подложки: у своих зелёная, у врагов красная — те же два цвета, которыми
     Свет и Тьма обозначены на всём экране. Считать, «а эти пять чьи», не
     приходится. Своего героя в союзниках нет: он подписан ником слева, и второй
     раз его портрет только заставлял бы проверять, не двое ли их. */
  :where(body.p-moves-check) .mrow .mdr { display:flex; align-items:center; gap:5px; justify-content:flex-end; }
  :where(body.p-moves-check) .mdr .side5 { display:flex; gap:2px; padding:2px 3px; border-radius:5px; }
  /* цвет подложки означает СТОРОНУ, а не «свои/чужие»: те же зелёный и
     красный, которыми Свет и Тьма подписаны над карточками героев и в полосе
     состояния. Один цвет — одно значение на всём экране. */
  :where(body.p-moves-check) .mdr .side5.rad { background:rgba(92,200,86,.10); }
  :where(body.p-moves-check) .mdr .side5.dire { background:rgba(214,84,62,.10); }
  :where(body.p-moves-check) .mdr img { width:32px; height:20px; object-fit:cover; border-radius:3px; display:block; opacity:.8; }
  :where(body.p-moves-check) .mdr img.hit { opacity:1; box-shadow:0 0 0 1.5px #c5f02b inset, 0 0 0 1px #c5f02b; }
  /* ===== ВЫБРАННЫЙ ГЕРОЙ В ДРАФТЕ =====
     Он больше не «всегда слева», поэтому обязан быть заметен сам: белая рамка и
     полная яркость. Белая, а не лаймовая: лайм на этом экране уже занят под
     «этот герой стоит у тебя в фильтре против», и две одинаковые метки рядом
     означали бы разное. Рамка нарисована тенью внутрь, чтобы не менять размер
     картинки — иначе поехала бы вся фиксированная колонка. */
  :where(body.p-moves-check) .mdr img.me { opacity:1; box-shadow:0 0 0 2px #fff inset, 0 0 0 1px rgba(255,255,255,.55); }
  /* ===== БИЛД: СТАРТ → ФИНАЛ =====
     Стрелка между половинами вместо подписей «start» и «final»: направление
     чтения тут и есть смысл, а два слова в такой плотной строке не поместятся
     и ничего не добавят. */
  :where(body.p-moves-check) .mrow .mbld { display:flex; align-items:center; gap:5px; justify-content:flex-end; }
  :where(body.p-moves-check) .mbld .b6 { display:flex; gap:2px; }
  :where(body.p-moves-check) .mbld img { width:26px; height:20px; object-fit:contain; display:block; }
  :where(body.p-moves-check) .mbld .arw { color:#4b5769; font-size:11px; line-height:1; }
  :where(body.p-moves-check) .mbld .none { color:#4b5769; font-size:11px; }
  /* КОПИРОВАНИЕ НОМЕРА МАТЧА — значком и в самом конце строки. Значком,
     потому что подпись «скопировать» в каждой из тридцати строк это тридцать
     одинаковых слов. В конце, потому что это не про матч, а действие с ним, и
     мешаться в середине оно не должно. Сработало — значок на секунду
     зеленеет: правило 13 запрещает браузерные окна, а «ничего не произошло»
     после клика хуже любого окна. */
  /* (05.08, этап 4) второй значок рядом — копирование ССЫЛКИ на страницу
     матча. Он не дублирует первый: номер идёт в клиент доты («загрузить
     реплей»), ссылка идёт ученику в сообщение, и путать их нельзя. Вид и
     поведение те же, поэтому и правила общие. */
  :where(body.p-moves-check) .mcp, :where(body.p-moves-check) .mcl { color:#5c6675; cursor:pointer; display:flex; align-items:center; justify-content:center;
         line-height:0; transition:color .15s ease-in-out; }
  :where(body.p-moves-check) .mcp:hover, :where(body.p-moves-check) .mcl:hover { color:#c5f02b; }
  :where(body.p-moves-check) .mcp.ok, :where(body.p-moves-check) .mcl.ok { color:#39c26d; }
  :where(body.p-moves-check) .mcp svg, :where(body.p-moves-check) .mcl svg { display:block; stroke:currentColor; fill:none; }
  /* стрелка кнопки сворачивания переворачивается: у кнопки два состояния,
     и отличаться они должны на экране, а не только в подсказке при наведении */
  :where(body.p-moves-check) #mu-fold svg { transition:transform .15s ease-in-out; }
  :where(body.p-moves-check) #mu-fold.on svg { transform:rotate(180deg); }
  /* точка «дорожки уже лежат у нас»: серая — карта откроется мгновенно,
     пустая — страница сходит за матчем в STRATZ и это пара секунд ожидания */
  :where(body.p-moves-check) .mrow .mloc { width:5px; height:5px; border-radius:50%; background:#39c26d; flex:0 0 auto; }
  :where(body.p-moves-check) .mrow .mloc.no { background:#3a4453; }
  :where(body.p-moves-check) .muvs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:11px; }
  :where(body.p-moves-check) .muvs .vsl { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#8b96a5;
               font-weight:700; }
  :where(body.p-moves-check) .mucond { display:flex; align-items:center; gap:6px; }
  :where(body.p-moves-check) .mucond .rmx { color:#8b96a5; cursor:pointer; font-size:15px; line-height:1; padding:0 3px; }
  :where(body.p-moves-check) .mucond .rmx:hover { color:#d6543e; }
  :where(body.p-moves-check) .pchips { display:flex; gap:4px; }
  :where(body.p-moves-check) .pchips .chip { padding:4px 7px; min-width:30px; }
  /* число игр на кнопке позиции: мелкое и приглушённое, потому что это
     подсказка «сколько за этим стоит», а не сама кнопка. У включённой кнопки
     наследует её тёмный цвет и остаётся читаемым на лайме. */
  :where(body.p-moves-check) .pchips .chip.ic { gap:4px; padding:4px 8px; }
  /* отступ перед числом обязателен: «ALL2» читается как одно слово */
  :where(body.p-moves-check) .pchips .pcn { font-size:10px; font-weight:700; opacity:.7; font-variant-numeric:tabular-nums;
                 margin-left:5px; }
  :where(body.p-moves-check) .pchips .chip.on .pcn { opacity:.85; }
  /* ⚠️ УЗКОЕ ОКНО: КОЛОНКИ УЖИМАЮТСЯ, А НЕ ВЫЕЗЖАЮТ ЗА КРАЙ. `.wrap` задан
     через `max-width`, значит на окне уже 1400 он сжимается, а строка игры с
     фиксированными колонками — нет: она молча вылезала за блок, и первым уезжал
     значок копирования номера. Прокрутку поперёк заводить нельзя (её не видно и о
     ней не догадаться), поэтому мельчают портреты драфта и предметы билда — всё
     содержимое остаётся на экране. Числа колонок пересчитаны под новые размеры,
     как и в основном правиле. */
  @media (max-width:1300px) {
    :where(body.p-moves-check) .mrow { grid-template-columns:36px 60px 112px minmax(0,1fr) 62px 292px 300px 28px 26px; }
    :where(body.p-moves-check) .mdr img { width:24px; height:15px; }
    :where(body.p-moves-check) .mbld img { width:20px; height:15px; }}
  @media (max-width:1180px) { :where(body.p-moves-check) .murole { grid-template-columns:repeat(3, minmax(0,1fr)); }}
  :where(body.p-moves-check) .ttree td.lv { width:28px; min-width:28px; text-align:center; color:#e8ecf2; font-weight:700;
                 background:#171c24; border:1px solid #2f3a49; border-radius:50%; padding:5px 0; }
  :where(body.p-moves-check) [data-tt], :where(body.p-moves-check) [data-tti], :where(body.p-moves-check) [data-tta] { cursor:help; }
  :where(body.p-moves-check) .abl .talimg { width:16px; height:16px; border-radius:3px; display:block; cursor:help; }
  :where(body.p-moves-check) .abl .tal { width:16px; height:16px; border-radius:3px; background:#1d2410; border:1px solid #c5f02b;
              color:#c5f02b; font-size:11px; line-height:14px; text-align:center; font-weight:700; }
  /* ==========================================================================
     (06.08) НАВЕДЕНИЕ ПОРЯДКА НА ЭКРАНЕ. Жалоба тренера была не про данные, а про
     то, что экран молчит: «нагромождение, непонятно без объяснений». Ни одна цифра
     и ни один обработчик ниже не тронуты — добавлены только три вещи:
       • у каждого крупного блока пара «заголовок + одна приглушённая строка»:
         что это и что тут делать. Строка ОДНА и короткая нарочно — абзац под
         картой никто не читает, а полстроки прочитываются мимоходом;
       • редкое спрятано под сворачивалку (.fold) — на экране остаётся основной
         путь «выбрал героя → кликнул матч → смотришь реплей»;
       • там, где до выбора героя пусто, вместо пустоты стоит приглашение (.mzero).
     ========================================================================== */
  :where(body.p-moves-check) .btit { display:flex; flex-direction:column; gap:2px; min-width:0; margin:0 0 9px; }
  :where(body.p-moves-check) .btit .sec { margin:0; }
  :where(body.p-moves-check) .bhint { color:#8b96a5; font-size:11.5px; line-height:1.35; margin:0 0 9px; }
  :where(body.p-moves-check) .btit .bhint { margin:0; }
  :where(body.p-moves-check) .bhint b { color:#c8d1dd; font-weight:600; }
  /* в шапке матчапа заголовок стоит в одном ряду с поиском героя, и свой
     нижний отступ ему там не нужен: ряд уже отбит снизу сам */
  :where(body.p-moves-check) .muhead .btit { margin:0; }
  /* мелкая подпись над списком внутри блока: «Роль», «Про-игроки», «Матчи».
     Раньше три списка стояли друг под другом безымянными, и понять, что из них
     что, можно было только по содержимому. Это не заголовок блока, поэтому он
     мельче и тише — иначе четыре заголовка на одном экране спорят между собой. */
  :where(body.p-moves-check) .sec.mini { font-size:10.5px; color:#7b8797; margin:2px 0 5px; }
  :where(body.p-moves-check) .sec.mini .subtle { color:#5f6a7a; }
  /* ===== СВОРАЧИВАЛКА (.fold) =====
     Образец — уже работающая кнопка #mu-fold: та же стрелка, которая
     переворачивается, чтобы состояние читалось с экрана, а не только из
     подсказки. Здесь она нужна трижды, и все три — не основной путь: «матч по
     номеру» (админская редкость), тепловая по ученику (отдельный разовый
     сценарий) и служебные числа сетки (смотрят раз в месяц). То, чем пользуются
     каждый день, не свёрнуто ничем.
     ⚠️ У summary НЕТ класса .chip, и это важно: обработчик слоёв
     ловит `closest('.chip')`, и чип-сворачивалка внутри него молча дёргала бы
     несуществующий слой. */
  :where(body.p-moves-check) .fold > summary { list-style:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
                    color:#8b96a5; font:600 11.5px/1 'Inter',system-ui,sans-serif; letter-spacing:.06em;
                    text-transform:uppercase; border:1px solid #242c38; border-radius:9px;
                    padding:7px 11px; background:#0e1116; user-select:none;
                    transition:.15s ease-in-out; }
  :where(body.p-moves-check) .fold > summary::-webkit-details-marker { display:none; }
  :where(body.p-moves-check) .fold > summary::marker { content:''; }
  :where(body.p-moves-check) .fold > summary:hover { border-color:#3d4a5e; color:#e8ecf2; }
  :where(body.p-moves-check) .fold[open] > summary { color:#e8ecf2; border-color:#2f3a49; }
  :where(body.p-moves-check) .fold > summary svg { flex:0 0 auto; stroke:currentColor; fill:none;
                        transition:transform .15s ease-in-out; }
  :where(body.p-moves-check) .fold[open] > summary .fchv { transform:rotate(180deg); }
  :where(body.p-moves-check) .fold .fbody { padding:9px 0 2px; }
  /* «матч по номеру» раскрывается ПОВЕРХ, а не раздвигает шапку: шапка
     стоит в одну строку с выбором героя, и растущая строка каждый раз сдвигала бы
     карту вниз ровно в тот момент, когда на неё смотрят */
  :where(body.p-moves-check) .mubyid { position:relative; flex:0 0 auto; }
  :where(body.p-moves-check) .mubyid > .fbody { position:absolute; right:0; top:calc(100% + 6px); z-index:35; width:286px;
                     background:#12161d; border:1px solid #2f3a49; border-radius:11px;
                     padding:11px 12px; box-shadow:0 12px 30px rgba(0,0,0,.55); }
  :where(body.p-moves-check) .mubyid > .fbody .bhint { margin:0 0 7px; }
  /* ===== ПУСТОЕ МЕСТО ГОВОРИТ, ЧТО ДЕЛАТЬ ПЕРВЫМ =====
     До выбора героя список матчей и полоса состояния — просто дыры в экране, и
     по ним не догадаться, сломано это или так и надо. Пунктир вместо сплошной
     рамки: это не карточка с данными, а место, где они появятся. */
  :where(body.p-moves-check) .mzero { display:none; align-items:center; gap:10px; color:#8b96a5; font-size:12.5px;
           line-height:1.4; border:1px dashed #2a323e; border-radius:11px; padding:15px 15px; }
  :where(body.p-moves-check) .mzero svg { flex:0 0 auto; stroke:#4b5769; fill:none; }
  /* герой не выбран — #mu-hpick пуст, и это единственная честная примета
     «ещё ничего не выбрано», доступная без вмешательства в JS. Старый браузер без
     :has() просто не покажет приглашение — ровно как было до сегодня */
  :where(body.p-moves-check) #mv-mu:has(#mu-hpick:empty) .mzero { display:flex; }
  /* полоса состояния скрыта, пока матч не открыт: соседний селектор
     работает без :has() и без единой строки JS */
  :where(body.p-moves-check) #mv-bar[hidden] + .mzero { display:flex; }
  /* ===== ВЕС КНОПОК ПО ГЛАВНОМУ СЦЕНАРИЮ =====
     Пуск-пауза и шаг окна — то, что жмут весь разбор, и они не должны выглядеть
     как соседние переключатели слоёв. Крупнее только размером: лайм на этом
     экране уже занят состоянием «включено», и вторым способом что-то выделить
     он быть не может. */
  :where(body.p-moves-check) #mv-play [data-a="play"] { min-width:46px; padding:7px 13px; }
  :where(body.p-moves-check) #mv-step .chip { flex:1 1 0; display:inline-flex; align-items:center; justify-content:center;
                   gap:7px; padding:8px 10px; font-weight:600; }
  :where(body.p-moves-check) #mv-step .chip svg { flex:0 0 auto; }
  :where(body.p-moves-check) #mv-step .chip svg .fl { fill:currentColor; stroke:none; }
        :where(body.p-moves-check) .admview { position:relative; display:inline-flex; flex:none; }
        :where(body.p-moves-check) .admview .avbtn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px;
          border:1px solid #242c38; border-radius:8px; background:transparent; color:#8b96a5;
          font:600 12px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; }
        :where(body.p-moves-check) .admview .avbtn:hover { border-color:#3d4a5e; color:#e8ecf2; }
        :where(body.p-moves-check) .admview .avbtn .avarr { font-size:9px; }
        :where(body.p-moves-check) .admview .avlist { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:160;
          flex-direction:column; min-width:130px; background:#12161d; border:1px solid #242c38;
          border-radius:10px; padding:5px; box-shadow:0 8px 24px rgba(0,0,0,.45); }
        :where(body.p-moves-check) .admview.open .avlist { display:flex; }
        :where(body.p-moves-check) .admview .avlist span { padding:7px 12px; font-size:12px; font-weight:600; color:#8b96a5;
          border-radius:7px; cursor:pointer; white-space:nowrap; }
        :where(body.p-moves-check) .admview .avlist span:hover { color:#e8ecf2; }
        :where(body.p-moves-check) .admview .avlist span.on { background:#c5f02b; color:#0e1116; }/* ==================== prep_form.php ==================== */
html:has(body.p-prep-form) {overflow-x:clip}

/* классы pf-* (правило №8: ничего на «ad» — адблок вырезал бы блок целиком) */
.pf-row {display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; align-items:center; position:relative}
:where(body.p-prep-form) .spin {display:inline-block; width:13px; height:13px; border:2px solid var(--mut); border-top-color:var(--brand); border-radius:50%; animation:pre-sp .8s linear infinite; vertical-align:-2px; margin-right:6px}
@keyframes pre-sp { to{ transform:rotate(360deg); } }
/* (26.07, Вова) СВОЙ список героев вместо нативного <datalist>. Причина: датализт Chrome рисует все 127 имён во всю высоту окна и его нельзя ни ограничить по высоте, ни оформить — CSS к нему не применяется. Поле ввода при этом и есть строка поиска: печатаешь «dawn» — остаются совпадения. Классы pf-h* (не «ad» — адблок). */
.pf-hpan {position:absolute; z-index:70; max-height:264px; overflow-y:auto; min-width:190px;
         background:#12161d; border:1px solid #333d4c; border-radius:10px; padding:4px;
         box-shadow:0 10px 26px rgba(0,0,0,.45)}
.pf-hpan[hidden] {display:none !important}   /* грабля окна №32: у блочных элементов hidden перебивается display */
.pf-hi {display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
       color:var(--muted); border-radius:7px; padding:7px 11px; font:600 13px inherit; font-family:inherit;
       white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pf-hi:hover, .pf-hi.on {color:var(--text); background:rgba(255,255,255,.06)}
.pf-hnone {color:var(--muted); font-size:12.5px; padding:8px 11px}
.pf-row input[type=text], .pf-row select {width:auto; font-size:14px}
.pf-mid {flex:0 1 130px; min-width:110px}
.pf-hero {flex:0 1 165px; min-width:130px}
.pf-pos {flex:0 0 auto; background:var(--panel2, #1b222c); border:1px solid var(--line);
        border-radius:8px; color:var(--text); padding:9px 11px; font-family:inherit}
.pf-txt {flex:1 1 220px; min-width:160px}
.pf-nr {display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
       color:var(--muted); cursor:pointer; flex:0 1 auto; white-space:nowrap}
/* (Вова 30.07, поймано глазами) ГАЛОЧКИ «СВОЕЙ КАТКИ НЕТ» БЫЛО НЕ ВИДНО,
         пока её не поставишь. Причина: страница красит ВСЕ чекбоксы фирменно
         через appearance:none (coaching.php, «мастер-проверка галочек»), а у
         такого элемента нет собственного содержимого — и наш width:auto,
         оставшийся от родной браузерной галочки, схлопывал коробку в ноль.
         Отмеченная была видна только потому, что её рисует ::before шириной
         11px. Задаём размер явно; accent-color оставляем для страниц, где
         фирменного правила нет и галочка остаётся родной. */
.pf-nr input {width:17px; height:17px; flex:none; margin:0; accent-color:var(--brand)}
.pf-st {font-size:12px; color:var(--muted); min-width:78px; text-align:right}
/* (Вова 30.07) «не хватает: ID матча или демка» вдвое длиннее «✓ сохранено»
         и выдавливало крестик строки на следующий ряд — он отрывался от своего
         вопроса и прилипал к соседнему. Красную подсказку кладём на отдельную
         строку под рядом, ряд от неё не едет. */
.pf-st.bad {flex:1 1 100%; text-align:left; color:#e0574f; margin-top:2px}
.pf-msg {flex:1 1 100%; font-size:12.5px; line-height:1.5; display:none; margin:-2px 0 2px}
/* (05.08) СВОЯ строка под катку «на разбор», отдельно от .pf-msg. В .pf-msg
         уже живут «не узнал героя» и сверка с OpenDota, и класть туда же ответ
         STRATZ значило бы, что одна пометка молча затирает другую: ученик чинил
         бы приватность, не видя, что у него ещё и герой не разобран. */
.pf-pull {flex:1 1 100%; font-size:12.5px; line-height:1.5; display:none; margin:-2px 0 2px; color:var(--muted)}
.pf-hero.bad {border-color:#e0574f}
/* (26.07, Вова) РЯД ГЕРОЕВ МАТЧА: ученика в матче не опознали — не заставляем печатать из 127 имён, показываем десять из этой катки, тык — и герой в поле. Пять колонок = ровно две строки на десктопе, на мобиле две колонки. Кнопки ghost: лаймовая в блоке одна и она внизу («Записаться») — правило №11. */
.pf-opts {flex:1 1 100%; display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
         gap:6px; margin:0 0 2px}
.pf-opts[hidden] {display:none !important}   /* грабля окна №32: hidden не перебивает display:grid */
/* без сокращения font: «font:600 12.5px inherit» браузер считает НЕВАЛИДНЫМ (inherit в шорткате запрещён) и выбрасывает строку целиком — кнопка тогда берёт базовые 14px/700 и имена перестают влезать в колонку */
.pf-opt {display:block; width:100%; background:transparent; color:var(--muted);
        border:1px solid var(--line); border-radius:8px; padding:6px 8px;
        font-family:inherit; font-size:12.5px; font-weight:600; line-height:1.3;
        cursor:pointer; text-align:center;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pf-opt:hover {color:var(--text); border-color:#3a4657; background:rgba(255,255,255,.06)}
.pf-book {display:inline-flex; align-items:center; background:var(--brand); color:#0e1116;
         border-radius:8px; padding:9px 16px; font-weight:700; font-size:14px}
.pf-book:hover {background:var(--brand2, #d9ff56)}
/* узкая колонка (карточка внутри coaching.php) — по три в ряд, имена целиком влезают: самое длинное «Keeper of the Light» ≈ 125px при 12.5px */
@media (max-width:900px) { .pf-opts {grid-template-columns:repeat(3, minmax(0,1fr))}}
@media (max-width:640px) {
  .pf-row {gap:6px}
  .pf-mid, .pf-hero, .pf-txt {flex:1 1 100%}
  .pf-st {min-width:0; margin-left:auto}
  .pf-opts {grid-template-columns:repeat(2, minmax(0,1fr)); gap:5px}
  .pf-opt {padding:6px 6px; font-size:12px}}
  /* токены и базовые классы — те же, что в coaching.php (.card/.step/.tag/кнопки) */
  body:where(.p-prep-form) {
    --brand:#c5f02b; --bg:#0e1116; --panel:#161b22; --panel2:#1b222c;
    --text:#e6edf3; --muted:#8b96a5; --line:#242c38; --err:#e6482e; --ok:#39c26d;
    --err2:#ff6a4d;   /* (28.07) красная кнопка опасного действия в ui_modal.php */
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:#10130a; --brand2:#d9ff56;
  }
  :where(body.p-prep-form) * {box-sizing:border-box}
  body:where(.p-prep-form) {margin:0; background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif}body:where(.p-prep-form) {overflow-x:clip}
  :where(body.p-prep-form) a {color:var(--brand); text-decoration:none}
  :where(body.p-prep-form) h1, :where(body.p-prep-form) h2, :where(body.p-prep-form) h3 {font-family:'Oswald',sans-serif; margin:0}
  :where(body.p-prep-form) .card {background:var(--panel); border:1px solid var(--line); border-radius:14px;
        padding:18px 20px; margin-bottom:14px; font-size:14px; line-height:1.55}
  :where(body.p-prep-form) .card h2 {font-size:18px; margin-bottom:12px}
  :where(body.p-prep-form) .muted {color:var(--muted)}
  :where(body.p-prep-form) input[type=text], :where(body.p-prep-form) input[type=number], :where(body.p-prep-form) textarea {
    background:var(--panel2); border:1px solid var(--line); border-radius:8px;
    color:var(--text); padding:9px 11px; font-family:inherit; font-size:14px; width:100%}
  :where(body.p-prep-form) button, :where(body.p-prep-form) .btn {background:var(--brand); color:#0e1116; border:0; border-radius:8px;
    padding:9px 16px; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit}
  :where(body.p-prep-form) button.ghost {background:transparent; color:var(--muted); border:1px solid var(--line)}
  :where(body.p-prep-form) button.ghost:hover {color:var(--text); border-color:var(--err)}
  :where(body.p-prep-form) button.mini {padding:4px 10px; font-size:12.5px}
  :where(body.p-prep-form) .tag {font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:20px; padding:2px 10px}
  :where(body.p-prep-form) .tag.on {color:var(--brand); background:rgba(197,240,43,.08); border-color:rgba(197,240,43,.45)}
  :where(body.p-prep-form) .step {display:flex; gap:12px; margin-top:14px; align-items:flex-start}
  :where(body.p-prep-form) .step-n {width:24px; height:24px; border-radius:50%; background:var(--brand); color:#0e1116;
          font-weight:800; font-size:13px; display:flex; align-items:center;
          justify-content:center; flex:none; margin-top:1px}
  :where(body.p-prep-form) .step-b {flex:1; min-width:0}
  :where(body.p-prep-form) .step-t {font-size:14px; font-weight:600}/* ==================== profile.php ==================== */
html:has(body.p-profile) { overflow-x:clip; }

  body:where(.p-profile) {
    --brand:#c5f02b; --bg:#0e1116; --panel:#161b22; --panel2:#1b222c;
    --text:#e6edf3; --muted:#8b96a5; --line:#242c38; --err:#e6482e; --ok:#39c26d;
    --err2:#ff6a4d;   /* (28.07) красная кнопка опасного действия в ui_modal.php */
    /* канон-алиасы (окно №17, фаза А «единый портал») */
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:#10130a; --brand2:#d9ff56;
  }
  :where(body.p-profile) * {box-sizing:border-box}
  body:where(.p-profile) {margin:0; background:var(--bg); color:var(--text);
       font-family:'Inter',system-ui,sans-serif;}body:where(.p-profile) { overflow-x:clip; } /* режет горизонтальный скролл; clip, а не hidden — иначе двойной вертикальный скролл */
  :where(body.p-profile) a {color:var(--brand); text-decoration:none}
  :where(body.p-profile) h1, :where(body.p-profile) h2 {font-family:'Oswald',sans-serif; margin:0}
  /* ── ШАПКА → /css/header.css (Фаза В). Страничного шапке тут не осталось. ── */
  :where(body.p-profile) .hero {margin:6px 0 18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
  :where(body.p-profile) .hero .bigava {width:56px; height:56px; border-radius:50%; border:2px solid var(--line)}
  :where(body.p-profile) .hero h1 {font-size:26px}
  :where(body.p-profile) .hero .sub {color:var(--muted); font-size:13px; margin-top:3px}
  :where(body.p-profile) .grid {display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
  @media(max-width:860px) { :where(body.p-profile) .grid {grid-template-columns:1fr} body:where(.p-profile) {padding:14px}}
  :where(body.p-profile) .card {background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px}
  /* (22.07) клик-подсказка «?»: жмёшь — раскрывается пояснение (не hover) */
  :where(body.p-profile) .qtip {display:inline-block; position:relative; vertical-align:middle}
  :where(body.p-profile) .qtip>summary {list-style:none; cursor:pointer; color:var(--muted); font-size:12.5px; user-select:none; padding:0 2px}
  :where(body.p-profile) .qtip>summary::-webkit-details-marker {display:none}
  :where(body.p-profile) .qtip[open]>summary {color:var(--brand)}
  :where(body.p-profile) .qtip .qtip-b {position:absolute; z-index:60; left:0; top:150%; width:min(330px,82vw);
       background:#161b22; border:1px solid var(--line); border-radius:9px; padding:9px 12px;
       font-size:12.5px; color:var(--text); line-height:1.55; box-shadow:0 12px 32px rgba(0,0,0,.55)}
  :where(body.p-profile) .card h2 {font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;
           display:flex; align-items:center; gap:7px}
  :where(body.p-profile) .card .hint {font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.5}
  :where(body.p-profile) .fld {display:block; font-size:13.5px; color:var(--muted); margin-top:12px}
  :where(body.p-profile) .fld input, :where(body.p-profile) .fld select {width:100%; margin-top:4px; padding:9px 10px; border-radius:8px;
       border:1px solid var(--line); background:var(--panel2); color:var(--text); font:inherit}
  :where(body.p-profile) .btn {display:inline-block; background:var(--brand); color:#0e1116; border:0; border-radius:10px;
       padding:10px 18px; font-weight:800; font-size:14px; cursor:pointer; text-decoration:none}
  :where(body.p-profile) .btn:hover {background:var(--brand2)}
  :where(body.p-profile) .btn.ghost {background:transparent; color:var(--text); border:1px solid var(--line)}
  :where(body.p-profile) .btn.ghost:hover {border-color:#3d4a5e}
  :where(body.p-profile) .pill {font-size:12px; color:var(--muted); border:1px solid var(--line);
        border-radius:20px; padding:2px 10px; white-space:nowrap}
  :where(body.p-profile) .pill.br {color:var(--brand); border-color:var(--brand); font-weight:700}
  :where(body.p-profile) .kv {display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px}
  :where(body.p-profile) .bar {height:8px; background:var(--panel2); border-radius:6px; overflow:hidden; margin-top:8px}
  :where(body.p-profile) .bar i {display:block; height:100%; background:var(--brand)}
  /* (окно №18) трек цели «плитки на треке» — КОПИЯ из coaching.php, правь оба! */
  :where(body.p-profile) .gtrk {position:relative; height:112px; margin-top:14px}
  :where(body.p-profile) .gtrk .gt-bar {position:absolute; left:0; right:0; bottom:24px; height:10px;
       background:var(--panel2); border-radius:6px; overflow:hidden}
  :where(body.p-profile) .gtrk .gt-bar i {display:block; height:100%; background:var(--brand)}
  :where(body.p-profile) .gtrk .gt-lbl {font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
  :where(body.p-profile) .gtrk .gt-lbl.g {color:var(--brand)}
  :where(body.p-profile) .gtrk .gt-num {font-family:'Oswald',sans-serif; font-size:24px; font-weight:700;
       color:var(--text); line-height:1.1}
  :where(body.p-profile) .gtrk .gt-num.s {color:var(--muted); font-size:19px; font-weight:500}
  :where(body.p-profile) .gtrk .gt-num.g {color:var(--brand); font-size:26px}
  :where(body.p-profile) .gtrk .gt-start {position:absolute; left:0; bottom:46px}
  :where(body.p-profile) .gtrk .gt-goal {position:absolute; right:0; bottom:46px; text-align:right}
  :where(body.p-profile) .gtrk .gt-now {position:absolute; bottom:22px; transform:translateX(-50%);
       text-align:center; z-index:2}
  :where(body.p-profile) .gtrk .gt-card {background:var(--panel2); border:1px solid var(--brand);
       border-radius:10px; padding:5px 13px; display:inline-block}
  :where(body.p-profile) .gtrk .gt-stem {width:2px; height:9px; background:var(--brand); margin:0 auto}
  :where(body.p-profile) .gtrk .gt-dot {width:14px; height:14px; background:var(--brand);
       border:3px solid var(--bg); border-radius:50%; margin:-2px auto 0}
  :where(body.p-profile) .gtrk .gt-foot {position:absolute; left:0; right:0; bottom:0; display:flex;
       justify-content:space-between; font-size:11.5px; color:var(--muted)}
  :where(body.p-profile) .gtrk .gt-foot .g {color:var(--brand); font-weight:600}
  /* незаполненное обязательное поле — красная строка (Вова, окно №18) */
  :where(body.p-profile) .fld.err input {border-color:var(--err); box-shadow:0 0 0 1px var(--err)}
  :where(body.p-profile) .fld.err {color:var(--err)}
  :where(body.p-profile) .empty {border:1px dashed var(--line); border-radius:14px; padding:28px;
         text-align:center; color:var(--muted); background:var(--panel)}
  @media(max-width:720px) {  /* (Фаза В) переход из шапки: бейдж тарифа → #sub (карточка «Подписка»), аватар → #profile (карточка «Игровой профиль»). Нужная карточка коротко «дышит» зелёным свечением — юзер сразу видит, за чем пришёл. */
  @keyframes focusGlow {
    0%   { box-shadow:0 0 0 0 rgba(197,240,43,0); }
    12%  { box-shadow:0 0 0 3px rgba(197,240,43,.35), 0 0 30px 6px rgba(197,240,43,.5); border-color:var(--brand); }
    100% { box-shadow:0 0 0 0 rgba(197,240,43,0); }
  }
  :where(body.p-profile) .card.focusGlow { animation:focusGlow 1.9s ease-out; }
  /* (30.07, хвост 6.2) ОПОВЕЩЕНИЯ: пять переключателей «что шлём в колокол».
           Классы nt* — не «ad» (адблок вырежет). Тумблер: сам чекбокс невидим, но
           фокусируется с клавиатуры, рисует его .ntsl. Лайм = включено (единственная
           краска действия), выключено = серое, всё на .15s — как остальной портал. */
  :where(body.p-profile) .ntlist {margin-top:14px; border-top:1px solid var(--line)}
  :where(body.p-profile) .ntrow {position:relative; display:flex; align-items:center; gap:14px; padding:12px 0;
         border-bottom:1px solid var(--line); cursor:pointer; user-select:none}
  :where(body.p-profile) .ntrow:last-child {border-bottom:0}
  :where(body.p-profile) .nttx {flex:1; min-width:0}
  :where(body.p-profile) .nttit {display:block; font-size:13.5px; color:var(--text); line-height:1.35}
  :where(body.p-profile) .nthint {display:block; font-size:12px; color:var(--muted); margin-top:3px; line-height:1.45}
  :where(body.p-profile) .ntsw {position:absolute; opacity:0; width:0; height:0; margin:0}
  :where(body.p-profile) .ntsl {flex:none; width:40px; height:22px; border-radius:22px; background:var(--panel2);
        border:1px solid var(--line); position:relative;
        transition:background .15s ease-in-out, border-color .15s ease-in-out}
  :where(body.p-profile) .ntsl::after {content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
        border-radius:50%; background:var(--muted);
        transition:transform .15s ease-in-out, background .15s ease-in-out}
  :where(body.p-profile) .ntrow:hover .ntsl {border-color:#3d4a5e}
  :where(body.p-profile) .ntsw:checked ~ .ntsl {background:var(--brand); border-color:var(--brand)}
  :where(body.p-profile) .ntsw:checked ~ .ntsl::after {transform:translateX(18px); background:var(--onbrand)}
  :where(body.p-profile) .ntsw:focus-visible ~ .ntsl {box-shadow:0 0 0 3px rgba(197,240,43,.35)}
  :where(body.p-profile) .ntsw:disabled ~ .ntsl {opacity:.5}
  :where(body.p-profile) .ntmsg {font-size:12.5px; color:var(--muted); margin-top:10px; min-height:17px; line-height:1.45}
  /* ТГ-карточка (tg_inc.php) встроена ВНУТРЬ #notifCard вторым блоком —
           своя рамка ей там не нужна, иначе рядом две похожие карточки. */
  :where(body.p-profile) #notifCard #tgCard {background:transparent; border:0; border-radius:0;
        padding:16px 0 0; margin:14px 0 0; border-top:1px solid var(--line)}}/* ==================== quiz.php ==================== */
html:has(body.p-quiz) { overflow-x:clip; }

  body:where(.p-quiz) { --brand:#c5f02b; --bg:#0e1116; --panel:#161b22; --panel2:#1b222c;
         --text:#e6edf3; --muted:#8b96a5; --line:#242c38; --err:#e6482e; --ok:#39c26d; --onbrand:#10130a; }
  /* алиасы канона: ui_modal.php рисует окна на --txt/--mut/--card/--brand2
           и фолбэков у него нет. Без этих четырёх строк окно подтверждения
           открывается без фона, а лаймовая кнопка на наведении гаснет. */
  body:where(.p-quiz) { --txt:#e6edf3; --mut:#8b96a5; --card:#161b22; --brand2:#d7ff4f; }
  :where(body.p-quiz) .rico { width:13px; height:13px; vertical-align:-2px; margin-right:5px; display:inline-block;
         object-fit:contain; opacity:.9; flex:none; }
  :where(body.p-quiz) .fbtn .n { opacity:.7; font-weight:700; }
  :where(body.p-quiz) * { margin:0; padding:0; box-sizing:border-box; }body:where(.p-quiz) { overflow-x:clip; }
  body:where(.p-quiz) { background:var(--bg); color:var(--text); font:16px/1.55 'Inter',sans-serif; min-height:100vh; }
  :where(body.p-quiz) h1 { font-family:'Oswald',sans-serif; font-size:26px; margin:18px 0 4px; }
  :where(body.p-quiz) .sub { color:var(--muted); margin-bottom:18px; }
  :where(body.p-quiz) .qzlock { border:1px solid #e0a83a; background:rgba(224,168,58,.10); color:#e0a83a;
           border-radius:12px; padding:11px 14px; margin:14px 0 18px; font-size:14px; }
  :where(body.p-quiz) .qzbar { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px; }
  :where(body.p-quiz) .qzstat { display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--panel);
           border-radius:12px; padding:10px 14px; }
  :where(body.p-quiz) .qzstat .n { font:700 20px 'Oswald',sans-serif; color:var(--brand); line-height:1; }
  :where(body.p-quiz) .qzstat .l { color:var(--muted); font-size:12.5px; }
  :where(body.p-quiz) .fbar { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
  :where(body.p-quiz) .fbtn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px solid var(--line);
         border-radius:9px; background:transparent; color:var(--muted); font:600 13px 'Inter',sans-serif;
         cursor:pointer; text-decoration:none; transition:.15s ease-in-out; }
  :where(body.p-quiz) .fbtn:hover { border-color:#3d4a5e; color:var(--text); }
  :where(body.p-quiz) .fbtn:active { transform:scale(.96); }
  :where(body.p-quiz) .fbtn.on { background:var(--brand); color:var(--onbrand); border-color:var(--brand); }
  :where(body.p-quiz) .qzgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
  :where(body.p-quiz) .qzcard { border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:14px 16px;
           cursor:pointer; transition:.15s ease-in-out; display:flex; flex-direction:column; gap:9px; }
  :where(body.p-quiz) .qzcard:hover { border-color:#3d4a5e; background:var(--panel2); }
  :where(body.p-quiz) .qzcard:active { transform:scale(.99); }
  :where(body.p-quiz) .qzcard .q { font-weight:600; }
  :where(body.p-quiz) .qzmeta { display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:12px; color:var(--muted); }
  :where(body.p-quiz) .qztag { border:1px solid var(--line); border-radius:7px; padding:1px 7px; }
  :where(body.p-quiz) .qztag.hero { color:var(--brand); border-color:rgba(197,240,43,.35); }
  :where(body.p-quiz) .qzdone { color:var(--ok); border-color:rgba(57,194,109,.4); }
  :where(body.p-quiz) .qzmiss { color:#e0a83a; border-color:rgba(224,168,58,.4); }
  :where(body.p-quiz) .empty { color:var(--muted); padding:40px 0; text-align:center; }
  :where(body.p-quiz) .qzsec { margin-top:34px; }
  :where(body.p-quiz) .qzsec h2 { font-family:'Oswald',sans-serif; font-size:19px; margin-bottom:10px; }
  :where(body.p-quiz) .qzmist { border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
  :where(body.p-quiz) .qzmist .q { font-weight:600; margin-bottom:5px; }
  :where(body.p-quiz) .qzmist .ex { color:var(--muted); font-size:14px; }
  /* модалка вопроса: своя, но подтверждения и ошибки — общие csConfirm/csAlert */
  :where(body.p-quiz) .qzov { position:fixed; inset:0; background:rgba(6,8,12,.78); display:none; align-items:center;
         justify-content:center; padding:18px; z-index:80; }
  :where(body.p-quiz) .qzov.on { display:flex; }
  :where(body.p-quiz) .qzbox { width:min(680px,100%); max-height:88vh; overflow:auto; background:var(--panel);
          border:1px solid var(--line); border-radius:16px; padding:20px; }
  :where(body.p-quiz) .qzbox h3 { font-family:'Oswald',sans-serif; font-size:20px; margin-bottom:8px; }
  :where(body.p-quiz) .qzctx { color:var(--muted); font-size:14px; margin-bottom:14px; }
  :where(body.p-quiz) .qzopt { display:block; width:100%; text-align:left; border:1px solid var(--line); background:var(--bg);
          color:var(--text); border-radius:10px; padding:11px 13px; margin-bottom:9px; cursor:pointer;
          font:15px 'Inter',sans-serif; transition:.15s ease-in-out; }
  :where(body.p-quiz) .qzopt:hover { border-color:#3d4a5e; }
  :where(body.p-quiz) .qzopt:active { transform:scale(.98); }
  :where(body.p-quiz) .qzopt.pick { border-color:var(--brand); }
  :where(body.p-quiz) .qzopt.good { border-color:var(--ok); background:rgba(57,194,109,.10); }
  :where(body.p-quiz) .qzopt.bad { border-color:var(--err); background:rgba(230,72,46,.10); }
  :where(body.p-quiz) .qzopt[disabled] { cursor:default; opacity:.85; }
  :where(body.p-quiz) .qzres { margin-top:12px; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--bg); }
  :where(body.p-quiz) .qzres b { color:var(--brand); }
  :where(body.p-quiz) .qzclose { margin-top:14px; display:flex; gap:9px; justify-content:flex-end; }
  :where(body.p-quiz) .qzbtn { height:34px; padding:0 14px; border-radius:9px; border:1px solid var(--line); background:transparent;
          color:var(--muted); font:600 13px 'Inter',sans-serif; cursor:pointer; transition:.15s ease-in-out; }
  :where(body.p-quiz) .qzbtn:hover { color:var(--text); border-color:#3d4a5e; }
  :where(body.p-quiz) .qzbtn:active { transform:scale(.96); }
  :where(body.p-quiz) .qzbtn.go { background:var(--brand); color:var(--onbrand); border-color:var(--brand); }/* ==================== quizzes.php ==================== */
html:has(body.p-quizzes) { overflow-x:hidden; }

  body:where(.p-quizzes) { --brand:#c5f02b; --bg:#0e1116; --panel:#161b22; --panel2:#1b222c;
         --text:#e6edf3; --muted:#8b96a5; --line:#242c38; --err:#e6482e; --ok:#39c26d; --onbrand:#10130a; }
  :where(body.p-quizzes) * { margin:0; padding:0; box-sizing:border-box; }body:where(.p-quizzes) { overflow-x:hidden; }
  body:where(.p-quizzes) { background:var(--bg); color:var(--text); font:16px/1.55 'Inter',sans-serif; min-height:100vh; }
  :where(body.p-quizzes) h1 { font-family:'Oswald',sans-serif; font-size:26px; margin:18px 0 4px; }
  :where(body.p-quizzes) .sub { color:var(--muted); margin-bottom:16px; }
  :where(body.p-quizzes) .fbar { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 22px; }
  :where(body.p-quizzes) .fbtn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px solid var(--line);
         border-radius:9px; background:transparent; color:var(--muted); font:600 13px 'Inter',sans-serif;
         cursor:pointer; text-decoration:none; transition:.15s; }
  :where(body.p-quizzes) .fbtn:hover { border-color:#3d4a5e; color:var(--text); }
  :where(body.p-quizzes) .fbtn.on { background:var(--brand); color:var(--onbrand); border-color:var(--brand); }
  :where(body.p-quizzes) .fbtn .n { opacity:.7; font-weight:700; }
  :where(body.p-quizzes) .vgroup { border:1px solid var(--line); border-radius:14px; background:var(--panel); margin-bottom:18px; overflow:hidden; }
  :where(body.p-quizzes) .vhead { padding:13px 16px; background:var(--panel2); cursor:pointer; display:flex; align-items:flex-start; gap:10px; }
  :where(body.p-quizzes) .vhead:hover { background:#20293a; }
  :where(body.p-quizzes) .vchev { color:var(--brand); font-size:13px; margin-top:3px; transition:.15s; flex:none; }
  :where(body.p-quizzes) .vgroup.col .vchev { transform:rotate(-90deg); }
  :where(body.p-quizzes) .vgroup.col .vbody { display:none; }
  :where(body.p-quizzes) .vhead h2 { font:600 16px 'Inter',sans-serif; }
  :where(body.p-quizzes) .vhead .m { color:var(--brand); font-size:13px; margin-top:4px; opacity:.9; }
  :where(body.p-quizzes) .mid { cursor:pointer; text-decoration:underline; text-underline-offset:2px; padding:1px 3px; border-radius:4px; }
  :where(body.p-quizzes) .mid:hover { background:rgba(197,240,43,.14); }
  :where(body.p-quizzes) .vcnt { color:var(--muted); font-size:12px; margin-top:4px; }
  :where(body.p-quizzes) .vplay { display:none; padding:12px 16px 0; }
  :where(body.p-quizzes) .vplay iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:10px; }
  :where(body.p-quizzes) .vplay .yl { display:block; font-size:12px; color:var(--muted); margin-top:6px; }
  :where(body.p-quizzes) .qz { padding:12px 16px; border-top:1px solid var(--line); cursor:pointer; }
  :where(body.p-quizzes) .qz:hover { background:#12171f; }
  :where(body.p-quizzes) .qz.dim { opacity:.5; }
  :where(body.p-quizzes) .qrow { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  :where(body.p-quizzes) .qtc { color:var(--err); font-weight:700; font-size:14px; white-space:nowrap; }
  :where(body.p-quizzes) .qq { font-weight:600; flex:1; min-width:200px; }
  :where(body.p-quizzes) .qcol { color:var(--muted); font-size:12px; cursor:pointer; white-space:nowrap; }
  :where(body.p-quizzes) .qcol:hover { color:var(--text); }
  :where(body.p-quizzes) .qbody { margin-top:6px; }
  :where(body.p-quizzes) .qz.mcol .qbody { display:none; }
  :where(body.p-quizzes) .qsit { color:var(--muted); font-size:14px; }
  :where(body.p-quizzes) .qact { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:9px; }
  :where(body.p-quizzes) .sbtn { height:28px; padding:0 11px; border:1px solid var(--line); border-radius:8px; background:transparent;
         color:var(--muted); font:600 12px 'Inter',sans-serif; cursor:pointer; transition:.15s; }
  :where(body.p-quizzes) .sbtn:hover { border-color:#3d4a5e; color:var(--text); }
  :where(body.p-quizzes) .sbtn.on-like { background:var(--ok); color:#08130b; border-color:var(--ok); }
  :where(body.p-quizzes) .sbtn.on-wip { background:#e0a83a; color:#1a1405; border-color:#e0a83a; }
  :where(body.p-quizzes) .sbtn.on-rej { background:var(--err); color:#fff; border-color:var(--err); }
  :where(body.p-quizzes) .qnote { width:100%; margin-top:9px; background:var(--bg); border:1px solid var(--line); border-radius:8px;
          color:var(--text); font:14px 'Inter',sans-serif; padding:8px 10px; resize:vertical; min-height:38px; }
  :where(body.p-quizzes) .qnote:focus { outline:none; border-color:var(--brand); }
  :where(body.p-quizzes) .saved { color:var(--ok); font-size:12px; margin-left:6px; opacity:0; transition:.2s; }
  :where(body.p-quizzes) .saved.show { opacity:1; }
  :where(body.p-quizzes) .empty { color:var(--muted); padding:40px 0; text-align:center; }
  :where(body.p-quizzes) .gtools { display:flex; gap:12px; margin:0 0 16px; }
  :where(body.p-quizzes) .gtools span { color:var(--muted); font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
  :where(body.p-quizzes) .gtools span:hover { color:var(--text); }
  /* ---- (47) пары ролика и привязка момента --------------------------------- */
  :where(body.p-quizzes) .qz-pline { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:5px; font-size:12.5px; color:var(--muted); }
  :where(body.p-quizzes) .qz-pair { background:#131a24; border:1px solid var(--line); border-radius:7px; padding:1px 7px; color:var(--text); }
  :where(body.p-quizzes) .qz-pair b { color:var(--brand); font-weight:600; }
  :where(body.p-quizzes) .qz-nh { color:#e0a83a; font-style:normal; }
  :where(body.p-quizzes) .qz-pnone { color:#e0a83a; }
  :where(body.p-quizzes) .qz-warn { background:rgba(224,168,58,.14); border:1px solid #e0a83a; color:#e0a83a; border-radius:7px; padding:1px 7px; }
  :where(body.p-quizzes) .qz-pen { cursor:pointer; color:var(--muted); border:1px solid var(--line); border-radius:7px; padding:0 7px; line-height:19px; flex:none; }
  :where(body.p-quizzes) .qz-pen:hover { color:var(--brand); border-color:var(--brand); }
  :where(body.p-quizzes) .qz-pedit { padding:12px 16px; border-top:1px solid var(--line); background:#121822; }
  :where(body.p-quizzes) .qz-eh { color:var(--muted); font-size:12px; margin-bottom:8px; }
  :where(body.p-quizzes) .qz-prow { display:flex; gap:7px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
  :where(body.p-quizzes) .qz-ih, :where(body.p-quizzes) .qz-im, :where(body.p-quizzes) .qz-is { background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--text);
         font:14px 'Inter',sans-serif; padding:0 9px; height:32px; }
  :where(body.p-quizzes) .qz-ih { width:190px; }
  :where(body.p-quizzes) .qz-im { width:160px; }
  :where(body.p-quizzes) .qz-is { min-width:240px; }
  :where(body.p-quizzes) .qz-ih:focus, :where(body.p-quizzes) .qz-im:focus, :where(body.p-quizzes) .qz-is:focus { outline:none; border-color:var(--brand); }
  :where(body.p-quizzes) .qz-bad { border-color:var(--err); background:rgba(230,72,46,.08); }
  :where(body.p-quizzes) .qz-del { cursor:pointer; color:var(--muted); font-size:13px; padding:0 4px; }
  :where(body.p-quizzes) .qz-del:hover { color:var(--err); }
  :where(body.p-quizzes) .qz-eact { display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:4px; }
  :where(body.p-quizzes) .qz-go { background:var(--brand); color:var(--onbrand); border-color:var(--brand); }
  :where(body.p-quizzes) .qz-go:hover { color:var(--onbrand); border-color:var(--brand); opacity:.88; }
  :where(body.p-quizzes) .qz-msg { font-size:12px; color:var(--muted); }
  :where(body.p-quizzes) .qz-msg.err { color:var(--err); }
  :where(body.p-quizzes) .qz-msg.ok { color:var(--ok); }
  :where(body.p-quizzes) .qz-mlink { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:7px; font-size:12.5px; }
  :where(body.p-quizzes) .qz-lok { color:var(--text); }
  :where(body.p-quizzes) .qz-lno { color:var(--muted); }
  :where(body.p-quizzes) .qz-hint { color:#e0a83a; }
  :where(body.p-quizzes) .qz-src { font-size:11px; border-radius:6px; padding:0 6px; border:1px solid var(--line); color:var(--muted); }
  :where(body.p-quizzes) .qz-src-h { border-color:var(--ok); color:var(--ok); }
  :where(body.p-quizzes) .qz-medit { display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:7px; }
  /* [hidden] у браузера слабее класса — иначе display:flex откроет закрытый редактор */
  :where(body.p-quizzes) .qz-medit[hidden], :where(body.p-quizzes) .qz-pedit[hidden] { display:none; }
  /* ---- (57) сборка квиза из момента ---------------------------------- */
  :where(body.p-quizzes) .qz-bwrap { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:9px; }
  :where(body.p-quizzes) .qz-bbtn { height:28px; padding:0 11px; }
  :where(body.p-quizzes) .qz-bst { font-size:12px; color:var(--muted); }
  :where(body.p-quizzes) .qz-bst.st-published { color:var(--ok); }
  :where(body.p-quizzes) .qz-bst.st-draft { color:#e0a83a; }
  :where(body.p-quizzes) .qz-bst.st-hidden { color:var(--err); }
  :where(body.p-quizzes) .qz-bedit { width:100%; margin-top:8px; padding:12px 14px; background:#121822;
             border:1px solid var(--line); border-radius:10px; }
  :where(body.p-quizzes) .qz-bedit[hidden] { display:none; }
  :where(body.p-quizzes) .qz-brow { display:flex; gap:8px; align-items:center; margin-bottom:7px; flex-wrap:wrap; }
  :where(body.p-quizzes) .qz-bl { color:var(--muted); font-size:12px; margin:9px 0 5px; }
  :where(body.p-quizzes) .qz-bi, :where(body.p-quizzes) .qz-bta, :where(body.p-quizzes) .qz-bsel { background:var(--bg); border:1px solid var(--line); border-radius:8px;
             color:var(--text); font:14px 'Inter',sans-serif; padding:7px 10px; }
  :where(body.p-quizzes) .qz-bi { flex:1; min-width:200px; }
  :where(body.p-quizzes) .qz-bta { width:100%; resize:vertical; min-height:56px; }
  :where(body.p-quizzes) .qz-bsel { height:34px; padding:0 9px; }
  :where(body.p-quizzes) .qz-bi:focus, :where(body.p-quizzes) .qz-bta:focus, :where(body.p-quizzes) .qz-bsel:focus { outline:none; border-color:var(--brand); }
  :where(body.p-quizzes) .qz-brad { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:12px;
            white-space:nowrap; cursor:pointer; }
  :where(body.p-quizzes) .qz-brad input { accent-color:var(--brand); width:15px; height:15px; }
  :where(body.p-quizzes) .qz-bact { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:11px; }/* ==================== review.php ==================== */

  /* дизайн-токены двухцветки (10.07): лайм = активное, оранжевый = опасное/ предупреждения; ховеры нейтральные — как на остальных страницах */
  body:where(.p-review) { --bg:#0e1116; --card:#171c24; --line:#242c38; --txt:#e8ecf2; --mut:#8b96a5;
          --err:#e6482e; --err2:#ff6a4d; --ok:#39c26d;
          --brand:#c5f02b; --brand2:#d9ff56; --onbrand:#10130a; }
  /* редизайн 2.0: текст — Inter (канон типографики), фолбэк system-ui */
  body:where(.p-review) { background:var(--bg); color:var(--txt); font:15px/1.5 'Inter',system-ui,sans-serif; margin:0; padding:24px; }
  /* редизайн 2.0 (M4, 12.07): заголовок Oswald 21; синие ссылки-легаси убраны — актив лаймом, как на остальных страницах */
  :where(body.p-review) h1 { font-family:'Oswald',sans-serif; font-size:21px; margin:0 0 14px; }
  :where(body.p-review) a { color:var(--brand); text-decoration:none; }
  :where(body.p-review) input, :where(body.p-review) button, :where(body.p-review) select, :where(body.p-review) textarea { padding:8px 12px; border-radius:8px; border:1px solid #242c38;
      background:#171c24; color:#e8ecf2; font:inherit; }
  :where(body.p-review) button { cursor:pointer; } :where(body.p-review) button:hover { border-color:#3d4a5e; background:#1d242f; }
  /* редизайн 2.0 (M4, 12.07): статы = вкладки, одна сущность. Лента чипов с горизонтальным скроллом заменила 5 больших стат-карточек + 6 текстовых вкладок-дублей. Активная — лайм; тревожное число (.alrm) — #ff6a4d. */
  :where(body.p-review) .statbar { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
             scrollbar-width:none; padding-bottom:2px; }
  :where(body.p-review) .statbar::-webkit-scrollbar { display:none; }
  :where(body.p-review) .schip { display:flex; flex-direction:column; gap:1px; flex:none; padding:8px 12px;
           border:1px solid var(--line); border-radius:11px; background:var(--card);
           text-decoration:none; }
  :where(body.p-review) .schip:hover { border-color:#3d4a5e; }
  :where(body.p-review) .schip b { font-family:'Oswald',sans-serif; font-weight:600; font-size:17px; color:var(--txt); }
  :where(body.p-review) .schip b.alrm { color:var(--err2); }   /* требует внимания: ломает поиск пар/ждёт человека */
  :where(body.p-review) .schip span { font-size:10.5px; color:var(--mut); white-space:nowrap; }
  :where(body.p-review) .schip.on { border-color:rgba(197,240,43,.5); background:rgba(197,240,43,.07); }
  :where(body.p-review) .schip.on span { color:var(--brand); }
  /* «в выдаче N» — справка, не очередь: подпись под лентой + намёк на скролл */
  :where(body.p-review) .statnote { display:flex; justify-content:space-between; gap:10px; margin:6px 1px 12px;
              font-size:11px; color:#5a6472; }
  :where(body.p-review) .statnote b { font-weight:600; color:#5a6472; }
  /* поиск по сегментам: инпут + лаймовая «Найти» высотой 42 в одну строку (M4) */
  :where(body.p-review) .srchrow { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
  :where(body.p-review) .srchrow input { flex:1; min-width:0; height:42px; box-sizing:border-box; background:#0b0e13; }
  :where(body.p-review) .srchrow input::placeholder { color:#5a6472; }
  :where(body.p-review) .srchrow button { height:42px; flex:none; background:var(--brand); border-color:var(--brand);
                    color:var(--onbrand); font-weight:700; }
  :where(body.p-review) .srchrow button:hover { background:var(--brand2); border-color:var(--brand2); }
  :where(body.p-review) .qnote { font-size:11.5px; color:var(--mut); margin-bottom:16px; }
  :where(body.p-review) .card { background:#171c24; border:1px solid #242c38; border-radius:12px; padding:16px; margin-bottom:18px;
          transition:opacity .25s, border-color .25s; }
  :where(body.p-review) .card.low { border-color:#c9a227; }
  :where(body.p-review) .card.done-ok { border-color:#39c26d; }
  :where(body.p-review) .card.done-hide { opacity:.45; }
  /* порции по 10 (Вова 10.07): скрытые карточки раскрывает «Показать ещё» */
  :where(body.p-review) .card.bh { display:none; }
  :where(body.p-review) #moreCards { width:100%; padding:12px; border-radius:9px; border:1px solid #242c38;
               background:#171c24; color:#e8ecf2; font:600 14px system-ui,sans-serif; cursor:pointer; }
  :where(body.p-review) #moreCards:hover { border-color:#3d4a5e; background:#1d242f; }
  :where(body.p-review) .head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
  :where(body.p-review) .badges span { display:inline-block; background:#0e1116; border:1px solid #242c38; border-radius:6px;
      padding:2px 8px; margin-right:6px; font-size:12.5px; color:#8b96a5; }
  :where(body.p-review) .badges .warn { color:#c9a227; border-color:#c9a227; }
  :where(body.p-review) .badges .child { color:var(--mut); }   /* редизайн 2.0: синий легаси убран, нейтраль */
  :where(body.p-review) .badges .done { color:#39c26d; border-color:#39c26d; }
  :where(body.p-review) .heroline { font-size:19px; font-weight:700; margin:8px 0 2px; }
  :where(body.p-review) .heroline .hp { color:#6ad07f; }
  :where(body.p-review) .heroline .vs { color:#8b96a5; font-weight:400; font-size:15px; padding:0 4px; }
  :where(body.p-review) .heroline .ha { color:#e66a5a; }
  :where(body.p-review) .heroline .noha { color:#8b96a5; font-weight:400; font-size:14px; padding-left:6px; }
  :where(body.p-review) .heroline .q { display:inline-block; background:#c9a227; color:#0e1116; border-radius:6px;
      font-size:13px; padding:1px 7px; margin-left:8px; vertical-align:2px; }
  :where(body.p-review) iframe { width:100%; max-width:640px; aspect-ratio:16/9; border:0; border-radius:8px; margin:8px 0; }
  :where(body.p-review) .summary { margin:8px 0; }
  :where(body.p-review) .muted { color:#8b96a5; font-size:13.5px; }
  :where(body.p-review) .actions { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
  :where(body.p-review) .inline-form { display:none; margin-top:10px; background:#0e1116; border:1px solid #242c38;
      border-radius:8px; padding:12px; }
  :where(body.p-review) .inline-form.open { display:block; }
  :where(body.p-review) .inline-form .row { margin-bottom:8px; }
  :where(body.p-review) textarea { width:100%; min-height:60px; box-sizing:border-box; }
  :where(body.p-review) input.wide { width:100%; box-sizing:border-box; }
  /* ================= РЕДИЗАЙН 2.0 (мобильный аудит, 12.07) ================= Канон index.php: юзер-шапка (2 строки), дровер «Служебное» админа, футер МЕНЮ/ДОКУМЕНТЫ. Старые кнопки .navlink удалены — навигация переехала в шапку и дровер (аудит C, «бургер в шапке»). */
  /* ── ШАПКА → /css/header.css (Фаза В). Ниже — только «Вид ▾» и дровер. ── */
  /* «вид как» — выпадающий список (Вова 12.07): в шапке кнопка «Вид ▾», варианты выезжают по клику, а не стоят три в ряд */
  :where(body.p-review) .admview { position:relative; display:inline-flex; flex:none; }
  :where(body.p-review) .admview .avbtn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px;
                    border:1px solid var(--line); border-radius:8px; background:transparent;
                    color:var(--mut); font:600 12px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; }
  :where(body.p-review) .admview .avbtn:hover { border-color:#3d4a5e; color:var(--txt); }
  :where(body.p-review) .admview .avbtn .avarr { font-size:9px; }
  :where(body.p-review) .admview .avlist { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:160;
                     background:var(--card); border:1px solid var(--line); border-radius:10px;
                     padding:4px; min-width:132px; flex-direction:column;
                     box-shadow:0 10px 26px rgba(0,0,0,.45); }
  :where(body.p-review) .admview.open .avlist { display:flex; }
  :where(body.p-review) .admview .avlist span { padding:7px 12px; font-size:12px; font-weight:600; color:var(--mut);
                          cursor:pointer; border-radius:7px; white-space:nowrap; }
  :where(body.p-review) .admview .avlist span:hover { color:var(--txt); }
  :where(body.p-review) .admview .avlist span.on { background:var(--brand); color:var(--onbrand); }
  /* ── kbadge/usteam/urow2/utab → /css/header.css (Фаза В) ── */
  /* дровер служебной навигации админа («бургер в шапке», решение аудита C) */
  /* .svnum → /css/header.css (Фаза В) */
  :where(body.p-review) .aseg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  :where(body.p-review) .aseg span { padding:5px 11px; font-size:11.5px; font-weight:600; color:var(--mut); cursor:pointer; }
  :where(body.p-review) .aseg span.on { background:var(--brand); color:var(--onbrand); font-weight:700; }
  /* (ревизия, окно №11) мёртвые стили .newfoot УДАЛЕНЫ: футер теперь
           .site-footer из footer_inc.php + /css/footer.css */
  /* «ПОЛОСКИ» ВОКРУГ ФУТЕРА (как в админке): у ревью body { padding:24px } — футер сидел внутри отступа. Отрицательные маргины растягивают его на всю ширину; на мобиле паддинг 14px — компенсация меньше. */
  /* (Вова 12.07) футер по ширине контента: .wrap ревью теперь 1360, дефолтный sf-inner (1180) был уже — ровняем, чтобы футер совпадал с контентом */
  @media (max-width:920px) {  /* сетка мобилы: поля экрана 14px (README) */
  @media (max-width:920px) { body:where(.p-review) { padding:14px; }}}/* ==================== reviews.php ==================== */
html:has(body.p-reviews) { overflow-x:clip; }

  body:where(.p-reviews) {
    --brand:#c5f02b; --bg:#0e1116; --panel:#161b22; --panel2:#1b222c;
    --text:#e6edf3; --muted:#8b96a5; --line:#242c38; --err:#e6482e; --ok:#39c26d;
    /* канон-алиасы (окно №17, фаза А «единый портал») */
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:#10130a; --brand2:#d9ff56;
  }
  :where(body.p-reviews) * {box-sizing:border-box}
  body:where(.p-reviews) {margin:0; background:var(--bg); color:var(--text);
       font-family:'Inter',system-ui,sans-serif;}body:where(.p-reviews) { overflow-x:clip; } /* режет горизонтальный скролл; clip, а не hidden — иначе двойной вертикальный скролл */
  :where(body.p-reviews) a {color:var(--brand); text-decoration:none}
  :where(body.p-reviews) h1, :where(body.p-reviews) h2 {font-family:'Oswald',sans-serif; margin:0}
  /* ── ШАПКА → /css/header.css (Фаза В). Страничного шапке тут не осталось. ── */
  :where(body.p-reviews) .hero {margin:6px 0 22px}
  :where(body.p-reviews) .hero h1 {font-size:30px}
  :where(body.p-reviews) .hero p {color:var(--muted); max-width:640px; margin:8px 0 14px}
  :where(body.p-reviews) .btn {display:inline-block; background:var(--brand); color:#0e1116; border-radius:10px;
       padding:11px 20px; font-weight:800; font-size:15px}
  :where(body.p-reviews) .btn.ghost {background:transparent; color:var(--text); border:1px solid var(--line); margin-left:8px}
  :where(body.p-reviews) .grid {display:grid; grid-template-columns:1fr 1fr; gap:16px}
  @media(max-width:860px) { :where(body.p-reviews) .grid {grid-template-columns:1fr} body:where(.p-reviews) {padding:14px}}
  :where(body.p-reviews) .rev {background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px}
  :where(body.p-reviews) .rev-head {display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
  :where(body.p-reviews) .rev-head .nick {font-family:'Oswald',sans-serif; font-weight:700; font-size:17px}
  :where(body.p-reviews) .tag {font-size:12px; color:var(--muted); border:1px solid var(--line);
       border-radius:20px; padding:2px 10px}
  /* (фикс 20.07, вариант «Путь» — выбор Вовы) бейдж прогресса: тихая капсула на тёмной подложке, старт серым, итог белым, рост лаймом. Один светящийся элемент — сама цифра роста, без ёлки. Мини-версия — в строках занятий. */
  :where(body.p-reviews) .mmr {display:inline-flex; align-items:center; gap:7px; background:var(--panel2);
       border:1px solid var(--line); border-radius:20px; padding:3px 11px;
       font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap;
       position:relative; overflow:hidden}
  :where(body.p-reviews) .mmr .to {color:var(--text); font-weight:800}
  :where(body.p-reviews) .mmr .arr {font-weight:400}
  :where(body.p-reviews) .mmr-d {color:var(--brand); font-weight:800; font-style:normal}
  :where(body.p-reviews) .mmr-mini {font-size:12px; padding:2px 9px; vertical-align:middle}
  /* (фикс 20.07) «Блик» (выбор Вовы): навёл мышь на КАРТОЧКУ отзыва — по капсуле прогресса один раз слева направо пробегает косая полоска света. Только у главного бейджа в шапке (мини-капсулы занятий молчат — не ёлка). Чистый CSS, играет 0.9с и гаснет сам. */
  :where(body.p-reviews) .mmr::after {content:''; position:absolute; top:0; bottom:0; left:-40%;
       width:35%; transform:skewX(-20deg);
       background:linear-gradient(90deg, transparent, rgba(217,255,86,.28), transparent);
       opacity:0; pointer-events:none}
  :where(body.p-reviews) .rev:hover .rev-head .mmr::after {animation:rev-mmrshine .9s ease-out; opacity:1}
  @keyframes rev-mmrshine { from{left:-40%} to{left:110%} }
  :where(body.p-reviews) .quote {background:var(--panel2); border-left:3px solid var(--brand); border-radius:8px;
         padding:10px 12px; font-size:14px; line-height:1.55; margin-top:10px}
  /* (окно «ИТОГИ ПАКЕТА», 25.07) компактная «дорога от и до»: старт → финиш, дельта и 2-3 первые пары «было → стало». Вся дорога — на win.php. Классы wroad* /wrow — НЕ на «ad» (адблок вырезал бы блок целиком). */
  :where(body.p-reviews) .wroad {margin-top:12px; background:var(--panel2); border:1px solid var(--line);
         border-radius:10px; padding:12px 13px}
  :where(body.p-reviews) .wroad-h {display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:9px}
  :where(body.p-reviews) .wroad-t {font-family:'Oswald',sans-serif; font-weight:600; font-size:13.5px;
           text-transform:uppercase; letter-spacing:.6px; color:var(--muted)}
  :where(body.p-reviews) .wrow {display:grid; grid-template-columns:1fr 18px 1fr; gap:7px; align-items:baseline;
        padding:6px 0; border-top:1px solid var(--line); font-size:13.5px; line-height:1.45}
  :where(body.p-reviews) .wroad-h + .wrow {border-top:0}   /* :first-of-type тут не сработает — выше тоже div */
  :where(body.p-reviews) .wrow .ww {color:var(--muted); overflow-wrap:anywhere}
  :where(body.p-reviews) .wrow .wa {color:var(--brand); text-align:center}
  :where(body.p-reviews) .wrow .wn {color:var(--text); font-weight:600; overflow-wrap:anywhere}
  :where(body.p-reviews) .wroad-more {display:inline-block; margin-top:8px; font-size:13px; font-weight:600}
  @media(max-width:720px) {
    :where(body.p-reviews) .wrow {grid-template-columns:1fr; gap:2px; padding:8px 0}
    :where(body.p-reviews) .wrow .wa {text-align:left}}
  /* (окно №17) позанятийные отзывы — дропдаун под главным (общим) отзывом */
  :where(body.p-reviews) .lsdrop {margin-top:10px; border-top:1px solid var(--line); padding-top:8px}
  :where(body.p-reviews) .lsdrop>summary {cursor:pointer; font-size:12.5px; font-weight:600; color:var(--muted);
                  list-style:none}
  :where(body.p-reviews) .lsdrop>summary:hover {color:var(--text)}
  :where(body.p-reviews) .lsdrop[open]>summary {color:var(--brand)}
  :where(body.p-reviews) .ytbox {position:relative; padding-top:56.25%; border-radius:10px; overflow:hidden; margin-top:10px}
  :where(body.p-reviews) .ytbox iframe {position:absolute; inset:0; width:100%; height:100%; border:0}
  /* (окно №21) свой плеер клипов + CTA-оверлей в конце ролика */
  :where(body.p-reviews) .clipbox video {position:absolute; inset:0; width:100%; height:100%; border:0; background:#000}
  /* ряд скорости — КАНОН поиска (окно №8): те же классы, та же память yk_rate */
  :where(body.p-reviews) .spdrow {display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap}
  :where(body.p-reviews) .spdlbl {color:var(--muted); font-size:12.5px; margin-right:2px}
  :where(body.p-reviews) .spdchip {padding:3px 10px; border:1px solid var(--line); border-radius:999px; font-size:12.5px;
           color:var(--muted); cursor:pointer}
  :where(body.p-reviews) .spdchip:hover {border-color:var(--brand); color:var(--text)}
  :where(body.p-reviews) .spdchip.on {background:var(--brand); color:var(--onbrand); border-color:var(--brand); font-weight:600}
  :where(body.p-reviews) .clip-cta {display:none; position:absolute; inset:0; z-index:3; flex-direction:column;
            align-items:center; justify-content:center; gap:12px; text-align:center;
            padding:16px; background:rgba(14,17,22,.93)}
  :where(body.p-reviews) .clipbox.done .clip-cta {display:flex}
  :where(body.p-reviews) .clip-cta-t {font-family:'Oswald',sans-serif; font-weight:600; font-size:17px; max-width:340px}
  :where(body.p-reviews) .clip-again {font-size:12.5px; color:var(--muted); cursor:pointer}
  :where(body.p-reviews) .clip-again:hover {color:var(--text)}
  :where(body.p-reviews) .hl-cap {font-size:12.5px; color:var(--muted); margin-top:6px}
  /* (31.07) надпись «о чём момент» на превью клипа. Тень под текстом —
       затемнение сверху вниз: поверх светлого кадра белые буквы иначе не
       читаются. Гаснет по классу .started, который JS вешает на первом play. */
  :where(body.p-reviews) .clip-intro {position:absolute; left:0; right:0; top:0; z-index:2; display:flex;
              align-items:flex-start; gap:8px; padding:13px 16px 30px;
              font:600 15px/1.35 'Inter',sans-serif; color:#fff; pointer-events:none;
              background:linear-gradient(180deg, rgba(10,13,18,.92) 0%,
                         rgba(10,13,18,.66) 52%, rgba(10,13,18,0) 100%);
              transition:opacity .18s ease-in-out}
  :where(body.p-reviews) .clip-intro .ic-moment {margin-top:2px; color:var(--brand)}
  :where(body.p-reviews) .clipbox.started .clip-intro {opacity:0; visibility:hidden}
  @media(max-width:640px) { :where(body.p-reviews) .clip-intro {font-size:13.5px; padding:10px 12px 24px}}
  :where(body.p-reviews) .empty {background:var(--panel); border:1px dashed var(--line); border-radius:14px;
         padding:28px; text-align:center; color:var(--muted)}
  :where(body.p-reviews) .cta-bottom {margin:26px 0 6px; text-align:center}
  @media(max-width:720px) {  /* (Фаза Б, 18.07) «Смотреть как» — дропдаун (как на поиске/ревью) */
  :where(body.p-reviews) .admview { position:relative; display:inline-flex; flex:none; }
  :where(body.p-reviews) .admview .avbtn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px;
                    border:1px solid var(--line); border-radius:8px; background:transparent;
                    color:var(--mut, #8b96a5); font:600 12px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; }
  :where(body.p-reviews) .admview .avbtn:hover { border-color:#3d4a5e; color:var(--txt, #e8ecf2); }
  :where(body.p-reviews) .admview .avbtn .avarr { font-size:9px; }
  :where(body.p-reviews) .admview .avlist { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:160;
                     background:var(--card, #171c24); border:1px solid var(--line); border-radius:10px;
                     padding:4px; min-width:132px; flex-direction:column; box-shadow:0 10px 26px rgba(0,0,0,.45); }
  :where(body.p-reviews) .admview.open .avlist { display:flex; }
  :where(body.p-reviews) .admview .avlist span { padding:7px 12px; font-size:12px; font-weight:600; color:var(--mut, #8b96a5);
                          cursor:pointer; border-radius:7px; white-space:nowrap; }
  :where(body.p-reviews) .admview .avlist span:hover { color:var(--txt, #e8ecf2); }
  :where(body.p-reviews) .admview .avlist span.on { background:var(--brand); color:var(--onbrand, #10130a); }}/* ==================== rewards.php ==================== */
html:has(body.p-rewards) { overflow-x:clip; }

  body:where(.p-rewards) { --brand:#c5f02b; --bg:#0e1116; --panel:#161b22; --panel2:#1b222c;
         --text:#e6edf3; --muted:#8b96a5; --line:#242c38; --err:#e6482e; --ok:#39c26d; --onbrand:#10130a; }
  /* алиасы канона: ui_modal.php рисует окна на --txt/--mut/--card/--brand2/--err2
           и фолбэков у него нет. Без этих строк окно подтверждения открывается
           без фона, а лаймовая кнопка на наведении гаснет. */
  body:where(.p-rewards) { --txt:#e6edf3; --mut:#8b96a5; --card:#161b22; --brand2:#d7ff4f; --err2:#e6482e; }
  :where(body.p-rewards) * { margin:0; padding:0; box-sizing:border-box; }body:where(.p-rewards) { overflow-x:clip; }
  body:where(.p-rewards) { background:var(--bg); color:var(--text); font:16px/1.55 'Inter',sans-serif; min-height:100vh; }
  :where(body.p-rewards) h1 { font-family:'Oswald',sans-serif; font-size:26px; margin:18px 0 4px; }
  :where(body.p-rewards) .sub { color:var(--muted); margin-bottom:18px; }
  :where(body.p-rewards) .rwlock { border:1px solid #e0a83a; background:rgba(224,168,58,.10); color:#e0a83a;
           border-radius:12px; padding:11px 14px; margin:14px 0 18px; font-size:14px; }
  :where(body.p-rewards) .rwbar { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px; }
  :where(body.p-rewards) .rwstat { display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--panel);
           border-radius:12px; padding:10px 14px; }
  :where(body.p-rewards) .rwstat .n { font:700 20px 'Oswald',sans-serif; color:var(--brand); line-height:1; }
  :where(body.p-rewards) .rwstat .l { color:var(--muted); font-size:12.5px; }
  :where(body.p-rewards) .rwpay { display:flex; flex-wrap:wrap; align-items:center; gap:14px; justify-content:space-between;
          border:1px solid var(--line); background:var(--panel); border-radius:14px;
          padding:14px 16px; margin:0 0 22px; }
  :where(body.p-rewards) .rwpay .t { font-weight:600; }
  :where(body.p-rewards) .rwpay .x { color:var(--muted); font-size:14px; margin-top:3px; }
  :where(body.p-rewards) .rwsec { margin-top:30px; }
  :where(body.p-rewards) .rwsec h2 { font-family:'Oswald',sans-serif; font-size:19px; margin-bottom:6px; }
  :where(body.p-rewards) .rwnote { color:var(--muted); font-size:13.5px; margin-bottom:14px; }
  :where(body.p-rewards) .rwgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
  :where(body.p-rewards) .rwcard { border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:16px;
           display:flex; flex-direction:column; gap:10px; transition:.15s ease-in-out; }
  :where(body.p-rewards) .rwcard:hover { border-color:#3d4a5e; background:var(--panel2); }
  :where(body.p-rewards) .rwcard.soon { opacity:.82; }
  :where(body.p-rewards) .rwhead { display:flex; align-items:baseline; gap:10px; justify-content:space-between; }
  :where(body.p-rewards) .rwt { font-family:'Oswald',sans-serif; font-size:18px; }
  :where(body.p-rewards) .rwcost { font:700 18px 'Oswald',sans-serif; color:var(--brand); white-space:nowrap; }
  :where(body.p-rewards) .rwcost span { font:600 12px 'Inter',sans-serif; color:var(--muted); margin-left:3px; }
  :where(body.p-rewards) .rwd { color:var(--muted); font-size:14px; flex:1; }
  :where(body.p-rewards) .rwtag { display:inline-block; border:1px solid var(--line); border-radius:7px; padding:1px 8px;
          font-size:12px; color:var(--muted); }
  :where(body.p-rewards) .rwtag.left { color:var(--brand); border-color:rgba(197,240,43,.35); }
  :where(body.p-rewards) .rwtag.soonl { color:#e0a83a; border-color:rgba(224,168,58,.4); }
  :where(body.p-rewards) .rwbtn { height:38px; padding:0 16px; border-radius:10px; border:1px solid var(--line); background:transparent;
          color:var(--text); font:700 14px 'Inter',sans-serif; cursor:pointer; transition:.15s ease-in-out; }
  :where(body.p-rewards) .rwbtn:hover { border-color:#3d4a5e; }
  :where(body.p-rewards) .rwbtn:active { transform:scale(.96); }
  :where(body.p-rewards) .rwbtn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
  :where(body.p-rewards) .rwbtn.go { background:var(--brand); color:var(--onbrand); border-color:var(--brand); }
  :where(body.p-rewards) .rwbtn.go:hover { background:var(--brand2); border-color:var(--brand2); }
  :where(body.p-rewards) .rwbtn[disabled] { opacity:.5; cursor:not-allowed; transform:none; }
  :where(body.p-rewards) a.rwbtn { display:inline-flex; align-items:center; text-decoration:none; }
  :where(body.p-rewards) .rwrow { display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:space-between;
          border:1px solid var(--line); background:var(--panel); border-radius:12px;
          padding:11px 14px; margin-bottom:9px; }
  :where(body.p-rewards) .rwrow .d { color:var(--muted); font-size:13px; }
  :where(body.p-rewards) .rwrow .c { color:var(--brand); font-weight:700; white-space:nowrap; }
  :where(body.p-rewards) .empty { color:var(--muted); padding:34px 0; text-align:center; }/* ==================== stats_check.php ==================== */

  body:where(.p-stats-check) { background:#0d1117; color:#c9d1d9; font:14px/1.5 'Inter',system-ui,sans-serif; margin:0; padding:0; }
  /* ширину .wrap даёт /css/layout.css; контент — в колонке .pool (как demo_check) */
  :where(body.p-stats-check) .pool { max-width:1000px; margin:0 auto; }
  /* ряд вкладок админки (копия .admrow из demo_check): наша вкладка активна */
  :where(body.p-stats-check) .admrow { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 18px; }
  :where(body.p-stats-check) .admrow a { text-decoration:none; }
  :where(body.p-stats-check) .admrow .achip { display:inline-block; padding:7px 14px; border:1px solid #2a313c; border-radius:10px;
                   color:#c9d1d9; font-size:13.5px; cursor:pointer; }
  :where(body.p-stats-check) .admrow .achip:hover { border-color:#c8f556; color:#c8f556; }
  :where(body.p-stats-check) .admrow .achip.on { background:#c8f556; border-color:#c8f556; color:#0e1116; font-weight:700; }
  :where(body.p-stats-check) h1 { font-size:20px; color:#c8f556; margin:0 0 4px; }
  :where(body.p-stats-check) .sub { color:#8b96a5; font-size:12.5px; margin-bottom:16px; }
  :where(body.p-stats-check) .box { border:1px solid #2a313c; border-radius:12px; background:#161b22; padding:14px 16px; margin-bottom:14px; }
  :where(body.p-stats-check) .sec { font-weight:600; font-size:13px; color:#8b96a5; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
  :where(body.p-stats-check) .chips { display:flex; gap:8px; flex-wrap:wrap; }
  :where(body.p-stats-check) .chip { border:1px solid #2a313c; border-radius:8px; padding:4px 10px; font-size:12.5px; color:#c9d1d9; }
  :where(body.p-stats-check) .chip b { color:#7ec66a; }
  :where(body.p-stats-check) input#flt { width:100%; background:#0d1117; border:1px solid #2a313c; border-radius:10px;
              color:#c9d1d9; padding:9px 12px; font:inherit; outline:none; }
  :where(body.p-stats-check) input#flt:focus { border-color:#c8f556; }
  :where(body.p-stats-check) details { border:1px solid #2a313c; border-radius:10px; margin-bottom:8px; background:#161b22; }
  :where(body.p-stats-check) summary { cursor:pointer; padding:10px 14px; font-weight:600; display:flex; gap:10px; align-items:center; list-style:none; }
  :where(body.p-stats-check) summary::-webkit-details-marker { display:none; }
  :where(body.p-stats-check) summary:before { content:'▸ '; color:#c8f556; }
  :where(body.p-stats-check) details[open] summary:before { content:'▾ '; }
  :where(body.p-stats-check) summary:hover { color:#c8f556; }
  :where(body.p-stats-check) summary .cnt { margin-left:auto; color:#e2574f; font-weight:700; }
  :where(body.p-stats-check) .row { display:flex; gap:10px; align-items:baseline; padding:6px 14px; border-top:1px solid #2a313c; font-size:13px; flex-wrap:wrap; }
  :where(body.p-stats-check) .row .dt { color:#8b96a5; width:86px; flex:0 0 auto; }
  :where(body.p-stats-check) .row .tm { font-weight:600; min-width:220px; }
  :where(body.p-stats-check) .row .why { color:#8b96a5; }
  :where(body.p-stats-check) .row a { color:#8b96a5; text-decoration:none; margin-left:auto; }
  :where(body.p-stats-check) .row a:hover { color:#c8f556; }
  :where(body.p-stats-check) .empty { color:#8b96a5; padding:8px 0; }
  :where(body.p-stats-check) .hid { display:none; }/* ==================== win.php ==================== */
html:has(body.p-win) {overflow-x:clip}

  body:where(.p-win) { --brand:#c5f02b; --bg:#0e1116; --panel:#161b22; --panel2:#1b222c;
         --text:#e6edf3; --muted:#8b96a5; --line:#242c38; --err:#e6482e; --ok:#39c26d;
         --txt:var(--text); --mut:var(--muted); --card:var(--panel);
         --onbrand:#10130a; --brand2:#d9ff56; }
  :where(body.p-win) * {box-sizing:border-box}
  body:where(.p-win) {margin:0; background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif}body:where(.p-win) {overflow-x:clip}
  :where(body.p-win) a {color:var(--brand); text-decoration:none}
  :where(body.p-win) h1 {font-family:'Oswald',sans-serif; margin:0; font-size:30px}
  :where(body.p-win) .btn {display:inline-block; background:var(--brand); color:#0e1116; border-radius:10px;
       padding:11px 20px; font-weight:800; font-size:15px}
  :where(body.p-win) .btn.ghost {background:transparent; color:var(--text); border:1px solid var(--line); margin-left:8px}
  :where(body.p-win) .nopage {background:var(--panel); border:1px solid var(--line); border-radius:14px;
          padding:34px 22px; text-align:center; margin-top:24px}
  :where(body.p-win) .nopage p {color:var(--muted); max-width:520px; margin:12px auto 20px; line-height:1.6}
  body:where(.p-win) {
    --brand:#c5f02b; --bg:#0e1116; --panel:#161b22; --panel2:#1b222c;
    --text:#e6edf3; --muted:#8b96a5; --line:#242c38; --err:#e6482e; --ok:#39c26d;
    /* канон-алиасы (окно №17, фаза А «единый портал») */
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:#10130a; --brand2:#d9ff56;
  }
  :where(body.p-win) * {box-sizing:border-box}
  body:where(.p-win) {margin:0; background:var(--bg); color:var(--text);
       font-family:'Inter',system-ui,sans-serif;}body:where(.p-win) {overflow-x:clip}   /* clip, а не hidden — иначе двойной вертикальный скролл */
  :where(body.p-win) a {color:var(--brand); text-decoration:none}
  :where(body.p-win) h1, :where(body.p-win) h2, :where(body.p-win) h3 {font-family:'Oswald',sans-serif; margin:0}
  :where(body.p-win) .btn {display:inline-block; background:var(--brand); color:#0e1116; border-radius:10px;
       padding:12px 22px; font-weight:800; font-size:15px}
  :where(body.p-win) .btn.ghost {background:transparent; color:var(--text); border:1px solid var(--line); margin-left:8px}
  :where(body.p-win) .tag {font-size:12.5px; color:var(--muted); border:1px solid var(--line);
       border-radius:20px; padding:3px 11px; white-space:nowrap}

  /* ── шапка страницы: кто ученик, за какой срок, сколько занятий ───────── */
  :where(body.p-win) .winhero {margin:6px 0 20px}
  :where(body.p-win) .wintop {display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
  :where(body.p-win) .winnick {font-family:'Oswald',sans-serif; font-weight:700; font-size:22px; letter-spacing:.2px}
  :where(body.p-win) .winhero h1 {font-size:32px; line-height:1.15; max-width:900px}
  :where(body.p-win) .winhero h1 .ar {color:var(--brand)}

  /* ── ГЛАВНЫЙ БЛОК «ДОРОГА»: старт → финиш и дельта лаймом ─────────────── */
  :where(body.p-win) .road {background:var(--panel); border:1px solid var(--line); border-radius:16px;
        padding:26px 22px; display:flex; align-items:center; justify-content:center;
        gap:26px; flex-wrap:wrap; text-align:center;
        background-image:radial-gradient(120% 130% at 100% 0%, rgba(197,240,43,.07), transparent 60%)}
  :where(body.p-win) .rcell {min-width:120px}
  :where(body.p-win) .rlbl {font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); margin-bottom:6px}
  :where(body.p-win) .rnum {font-family:'Oswald',sans-serif; font-weight:700; font-size:48px; line-height:1;
        color:var(--muted); font-variant-numeric:tabular-nums}
  :where(body.p-win) .rnum.now {color:var(--text); font-size:58px}
  :where(body.p-win) .rarr {font-size:34px; color:var(--muted); line-height:1}
  :where(body.p-win) .rdelta {display:inline-block; margin-top:10px; color:var(--brand); font-weight:800; font-size:19px;
          font-variant-numeric:tabular-nums}
  /* flex:0 0 100% — иначе чипы встанут В ОДНУ строку с цифрами, а не под ними */
  :where(body.p-win) .rfacts {flex:0 0 100%; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:18px}
  @media(max-width:720px) {
    :where(body.p-win) .road {gap:12px; padding:22px 14px}
    :where(body.p-win) .rnum {font-size:38px} :where(body.p-win) .rnum.now {font-size:44px}
    :where(body.p-win) .rarr {transform:rotate(90deg); margin:2px 0}
    :where(body.p-win) .rcell {min-width:0; flex:1 1 100%}}

  /* ── фраза-удар над парами ─────────────────────────────────────────────── */
  :where(body.p-win) .winhead {margin:34px 0 18px; font-size:27px; line-height:1.25; max-width:960px}

  /* ── ЯДРО: пары «было → стало». Воздух и читаемость на телефоне. ───────── */
  :where(body.p-win) .pairs {display:flex; flex-direction:column; gap:12px}
  :where(body.p-win) .pair {background:var(--panel); border:1px solid var(--line); border-radius:14px;
        padding:16px 18px; display:grid; grid-template-columns:1fr 44px 1fr;
        align-items:center; gap:10px}
  :where(body.p-win) .pcell {min-width:0}
  :where(body.p-win) .plbl {font-size:11.5px; text-transform:uppercase; letter-spacing:1.1px; margin-bottom:5px}
  :where(body.p-win) .pwas .plbl {color:var(--muted)}
  :where(body.p-win) .pnow .plbl {color:var(--brand)}
  :where(body.p-win) .ptxt {font-size:16px; line-height:1.5; word-wrap:break-word; overflow-wrap:anywhere}
  :where(body.p-win) .pwas .ptxt {color:var(--muted)}
  :where(body.p-win) .pnow .ptxt {color:var(--text); font-weight:600}
  :where(body.p-win) .parr {text-align:center; color:var(--brand); font-size:22px; line-height:1}
  @media(max-width:720px) {
    :where(body.p-win) .pair {grid-template-columns:1fr; gap:6px; padding:14px}
    :where(body.p-win) .parr {text-align:left; transform:rotate(90deg); transform-origin:left center;
          width:22px; margin:6px 0 6px 10px}
    :where(body.p-win) .ptxt {font-size:15px}}

  /* ── слово тренера ──────────────────────────────────────────────────────── */
  :where(body.p-win) .cnote {margin-top:20px; background:var(--panel2); border-left:3px solid var(--brand);
         border-radius:10px; padding:16px 18px}
  :where(body.p-win) .cnote .who {font-size:12px; text-transform:uppercase; letter-spacing:1.1px;
              color:var(--brand); margin-bottom:6px}
  :where(body.p-win) .cnote p {margin:0; font-size:15.5px; line-height:1.6}

  /* ── хайлайт-клип: разметка и плеер как в reviews.php (свой mp4, не ютуб) ─ */
  :where(body.p-win) .winsec {margin-top:34px}
  :where(body.p-win) .winsec h2 {font-size:23px; margin-bottom:12px}
  :where(body.p-win) .ytbox {position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; margin-top:10px}
  :where(body.p-win) .clipbox video {position:absolute; inset:0; width:100%; height:100%; border:0; background:#000}
  :where(body.p-win) .spdrow {display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap}
  :where(body.p-win) .spdlbl {color:var(--muted); font-size:12.5px; margin-right:2px}
  :where(body.p-win) .spdchip {padding:3px 10px; border:1px solid var(--line); border-radius:999px; font-size:12.5px;
           color:var(--muted); cursor:pointer}
  :where(body.p-win) .spdchip:hover {border-color:var(--brand); color:var(--text)}
  :where(body.p-win) .spdchip.on {background:var(--brand); color:var(--onbrand); border-color:var(--brand); font-weight:600}
  :where(body.p-win) .clip-cta {display:none; position:absolute; inset:0; z-index:3; flex-direction:column;
            align-items:center; justify-content:center; gap:12px; text-align:center;
            padding:16px; background:rgba(14,17,22,.93)}
  :where(body.p-win) .clipbox.done .clip-cta {display:flex}
  :where(body.p-win) .clip-cta-t {font-family:'Oswald',sans-serif; font-weight:600; font-size:17px; max-width:340px}
  :where(body.p-win) .clip-again {font-size:12.5px; color:var(--muted); cursor:pointer}
  :where(body.p-win) .clip-again:hover {color:var(--text)}
  /* (31.07) надпись «о чём момент» на превью клипа — канон витрины отзывов:
       гаснет на первом play и больше не возвращается */
  :where(body.p-win) .clip-intro {position:absolute; left:0; right:0; top:0; z-index:2; display:flex;
              align-items:flex-start; gap:8px; padding:13px 16px 30px;
              font:600 15px/1.35 'Inter',sans-serif; color:#fff; pointer-events:none;
              background:linear-gradient(180deg, rgba(10,13,18,.92) 0%,
                         rgba(10,13,18,.66) 52%, rgba(10,13,18,0) 100%);
              transition:opacity .18s ease-in-out}
  :where(body.p-win) .clip-intro .ic-moment {margin-top:2px; color:var(--brand)}
  :where(body.p-win) .clipbox.started .clip-intro {opacity:0; visibility:hidden}
  @media(max-width:640px) { :where(body.p-win) .clip-intro {font-size:13.5px; padding:10px 12px 24px}}

  /* ── CTA внизу: одна лаймовая кнопка на блок, вторая тихая ──────────────── */
  :where(body.p-win) .wincta {margin-top:38px; background:var(--panel); border:1px solid var(--line);
          border-radius:16px; padding:30px 22px; text-align:center;
          background-image:radial-gradient(120% 140% at 0% 0%, rgba(197,240,43,.08), transparent 62%)}
  :where(body.p-win) .wincta h2 {font-size:26px}
  :where(body.p-win) .wincta p {color:var(--muted); max-width:620px; margin:12px auto 20px; line-height:1.6; font-size:15.5px}
  :where(body.p-win) .winfoot {margin-top:18px; text-align:center; font-size:12.5px; color:var(--muted); opacity:.8}
  @media(max-width:720px) {
    :where(body.p-win) .winhero h1 {font-size:26px} :where(body.p-win) .winhead {font-size:22px} :where(body.p-win) .wincta h2 {font-size:22px}
    :where(body.p-win) .btn.ghost {margin:10px 0 0}}

  /* ── АНИМАЦИЯ. Без библиотек: IntersectionObserver добавляет .vis, дальше работает CSS-transition. Задержку по очереди ставит JS инлайном. Уважает prefers-reduced-motion (как styles.css лендинга). ─────────── */
  :where(body.p-win) .fx {opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease}
  :where(body.p-win) .fx.vis {opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce) {
    :where(body.p-win) .fx {opacity:1; transform:none; transition:none}}

/* ==================== patterns.php — «Паттерны: Я vs ПРО» ====================
   Экран из двух окон: слева карта человека, справа карта про. Всё, что здесь
   есть, служит одному — чтобы две картинки стояли рядом и читались как пара.
   Общие детали (.chip, .btn, .card) взяты из оболочки и не переопределяются:
   свой чип на одном экране это второй язык кнопок на сайте. */
:where(body.p-patterns) [hidden] {display:none !important;}
:where(body.p-patterns) .ptbox {background:var(--n800); border:1px solid var(--n700);
      border-radius:var(--r-lg); padding:var(--sp-4); margin-bottom:var(--sp-4);}
:where(body.p-patterns) .ptbar {display:flex; align-items:center; gap:var(--sp-4);
      flex-wrap:wrap; margin:var(--sp-4) 0;}
:where(body.p-patterns) .ptleft {font:500 var(--fs-s)/1 var(--f-body); color:var(--n300);}
:where(body.p-patterns) .chips {display:flex; gap:6px; flex-wrap:wrap;}
:where(body.p-patterns) .ptmut {font:400 var(--fs-s)/1.5 var(--f-body); color:var(--n300);}
:where(body.p-patterns) .ptmut-c {text-align:center; padding:var(--sp-6) var(--sp-4);}

/* строка управления: подпись над каждой группой, а не подсказка сбоку */
:where(body.p-patterns) .ptctl {display:flex; gap:var(--sp-5); flex-wrap:wrap;
      align-items:flex-end; margin-bottom:var(--sp-4);}
:where(body.p-patterns) .ptctl-g {display:flex; flex-direction:column; gap:6px;}
:where(body.p-patterns) .ptctl-l {font:500 var(--fs-xs)/1 var(--f-body); color:var(--n400);
      text-transform:uppercase; letter-spacing:.04em;}
:where(body.p-patterns) .ptctl input {height:28px; padding:0 var(--sp-3); border-radius:var(--r-sm);
      border:1px solid var(--n700); background:var(--n850, var(--n900)); color:var(--n0);
      font:500 var(--fs-s)/1 var(--f-body); width:150px;}

/* мои герои: портрет, имя, число игр, позиция. Число игр стоит НА чипе — по нему
   человек и решает, верить ли картинке, объяснять это словами не нужно. */
:where(body.p-patterns) .pthero {display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--sp-4);}
:where(body.p-patterns) .ptheroc {display:inline-flex; align-items:center; gap:6px; height:32px;
      padding:0 10px 0 4px; border:1px solid var(--n700); border-radius:var(--r-sm);
      background:transparent; color:var(--n200); cursor:pointer; white-space:nowrap;
      font:500 var(--fs-s)/1 var(--f-body);}
:where(body.p-patterns) .ptheroc:hover {border-color:var(--n600); color:var(--n0);}
:where(body.p-patterns) .ptheroc.on {border-color:var(--acc-line); background:var(--acc-soft); color:var(--acc);}
:where(body.p-patterns) .ptheroc.off {opacity:.45; cursor:default;}
:where(body.p-patterns) .ptheroc.off:hover {border-color:var(--n700); color:var(--n200);}
:where(body.p-patterns) .ptheroc img {width:30px; height:20px; object-fit:cover; border-radius:3px; display:block;}
:where(body.p-patterns) .ptheroc i {font-style:normal; color:var(--n400); font-variant-numeric:tabular-nums;}
:where(body.p-patterns) .ptheroc u {text-decoration:none; font-size:var(--fs-xs); color:var(--n400);
      border:1px solid var(--n700); border-radius:4px; padding:1px 4px;}

/* две карты рядом. Ниже 1100 они встают друг под друга: две карты в полэкрана
   читаются хуже одной большой. */
:where(body.p-patterns) .ptmaps {display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); align-items:start;}
:where(body.p-patterns) .ptmap {min-width:0;}
:where(body.p-patterns) .ptcap {display:flex; align-items:baseline; gap:8px; margin-bottom:6px;
      font:500 var(--fs-s)/1 var(--f-body); color:var(--n300);}
:where(body.p-patterns) .ptcap b {font:600 var(--fs-s)/1 var(--f-body); color:var(--n0);
      text-transform:uppercase; letter-spacing:.04em;}
:where(body.p-patterns) .ptpros {margin-top:var(--sp-3); display:flex; flex-direction:column; gap:6px;}
:where(body.p-patterns) .ptpros input {height:28px; padding:0 var(--sp-3); border-radius:var(--r-sm);
      border:1px solid var(--n700); background:var(--n850, var(--n900)); color:var(--n0);
      font:500 var(--fs-s)/1 var(--f-body);}
:where(body.p-patterns) .ptpros .chips {max-height:150px; overflow:auto;}
:where(body.p-patterns) .ptpros .chip i {font-style:normal; color:var(--n400); font-variant-numeric:tabular-nums;}

/* прогресс сбора: он и есть ответ на «сколько ждать» */
:where(body.p-patterns) .ptprog {display:flex; align-items:center; gap:8px; margin-top:8px;
      font:500 var(--fs-xs)/1 var(--f-body); color:var(--n300);}
:where(body.p-patterns) .ptprog-b {flex:1 1 auto; height:4px; border-radius:2px; background:var(--n700); overflow:hidden;}
:where(body.p-patterns) .ptprog-b i {display:block; height:100%; width:0; background:var(--acc); transition:width .2s;}

:where(body.p-patterns) .ptframe {border:1px solid var(--n700); border-radius:var(--r-md); overflow:hidden;}
:where(body.p-patterns) .ptframe iframe {display:block; width:100%; height:1400px; border:0;}

/* вход и привязка Steam: экран показывает, ЧТО человек получит, а не форму входа */
:where(body.p-patterns) .ptgate {text-align:center; padding:var(--sp-7) var(--sp-4);}
:where(body.p-patterns) .ptgate-t {font:600 var(--fs-h1)/1.25 var(--f-disp); color:var(--n0); margin-bottom:8px;}
:where(body.p-patterns) .ptgate-s {font:400 var(--fs-s)/1.6 var(--f-body); color:var(--n300);
      max-width:520px; margin:0 auto var(--sp-4);}

@media (max-width:1100px) {
  :where(body.p-patterns) .ptmaps {grid-template-columns:1fr;}
}

/* ==================== coaching.php — выпадашка позиций ====================
   На этой странице живёт довоенное правило «любая button — лаймовая». Список
   позиций состоит из button'ов, и он приезжал сплошной лаймовой заливкой поверх
   строки фильтра. Правила те же, что у такой же выпадашки на «Героях»: правило
   11 — одна лаймовая кнопка на блок, остальное ghost. */
:where(body.p-coaching) .psel { position:relative; display:inline-block; flex:0 0 auto; }
:where(body.p-coaching) .psel-b { display:inline-flex; align-items:center; gap:6px; height:32px;
      padding:0 12px; border-radius:var(--r-md); border:1px solid var(--n600);
      background:transparent; color:var(--n100); font:600 var(--fs-s)/1 var(--f-body);
      cursor:pointer; white-space:nowrap; }
:where(body.p-coaching) .psel-b:hover { border-color:var(--n500); background:var(--n750); }
:where(body.p-coaching) .psel-b:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
:where(body.p-coaching) .psel-ar { color:var(--n400); font-size:10px; margin-left:2px; }
:where(body.p-coaching) .psel-l { position:absolute; top:calc(100% + 4px); left:0; z-index:60;
      min-width:180px; padding:5px; border:1px solid var(--n700); border-radius:var(--r-md);
      background:var(--n850); box-shadow:0 10px 28px rgba(0,0,0,.45); }
:where(body.p-coaching) .psel-l[hidden] { display:none !important; }
:where(body.p-coaching) .psel-l button { display:flex; align-items:center; gap:7px; width:100%;
      height:auto; padding:7px 9px; border:0; border-radius:var(--r-sm); background:none;
      color:var(--n300); font:500 var(--fs-s)/1.2 var(--f-body); text-align:left; cursor:pointer; }
:where(body.p-coaching) .psel-l button:hover { color:var(--n0); background:var(--n750); }
:where(body.p-coaching) .psel-l .rico { margin-right:0; }

/* ── ближайшее занятие: первая группа списка, а не карточка над ним ──
   Лайм здесь метка «вот оно», а не действие: полоса группы, точка строки и
   счётчик. Действие лаймом в строке ровно одно — «Открыть подготовку». */
:where(body.p-coaching) .cg-dot.now { background:var(--acc); }
:where(body.p-coaching) .cg-grp-now .cg-grp-c { color:var(--acc); }
:where(body.p-coaching) .cg-grp-now .cg-rows { border-color:var(--acc-line); }
:where(body.p-coaching) .cg-grp-now .cg-item { background:linear-gradient(90deg,var(--acc-soft),transparent 55%),var(--n800); }
:where(body.p-coaching) .cg-grp-now .cg-nxt .cg-v { color:var(--acc); }
:where(body.p-coaching) .cg-act .cg-b-i { width:30px; padding:0; flex:none; }
:where(body.p-coaching) .cg-act .cg-b-i svg { width:14px; height:14px; }
:where(body.p-coaching) .cg-act { display:flex; gap:6px; align-items:center; }
:where(body.p-coaching) .cg-nxt .cg-mid { margin-top:2px; }

/* ==================== «Смотреть как» — контрол оболочки ====================
   Живёт в топбаре на КАЖДОЙ странице, потому и лежит здесь, а не в страничной
   секции. Имя класса не начинается с «ad»: адблок вырезал бы его вместе с
   блоком, и кнопка молча пропадала бы у тренера с фильтром (правило 8). */
.csview { position:relative; display:inline-flex; flex:none; }
.csview-b { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px;
      border:1px solid var(--n700); border-radius:var(--r-sm); background:transparent;
      color:var(--n300); font:500 var(--fs-s)/1 var(--f-body); cursor:pointer; white-space:nowrap; }
.csview-b:hover { border-color:var(--n600); color:var(--n100); }
.csview-ar { font-size:9px; color:var(--n400); }
.csview-l { position:absolute; right:0; top:calc(100% + 4px); z-index:80; display:none;
      min-width:132px; padding:5px; border:1px solid var(--n700); border-radius:var(--r-md);
      background:var(--n850); box-shadow:var(--el2); }
.csview.open .csview-l { display:block; }
.csview-l > span { display:block; padding:7px 9px; border-radius:var(--r-sm);
      color:var(--n300); font:500 var(--fs-s)/1.2 var(--f-body); cursor:pointer; }
.csview-l > span:hover { color:var(--n0); background:var(--n750); }
.csview-l > span.on { color:var(--acc); }
/* Выход из режима — не кнопка в профиле, а метка прямо в шапке: человек должен
   видеть, ЧЬИМИ глазами он смотрит, на любом экране. */
.csview-off { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px;
      border:1px solid var(--acc-line); border-radius:var(--r-sm); background:var(--acc-soft);
      color:var(--acc); font:500 var(--fs-s)/1 var(--f-body); text-decoration:none; white-space:nowrap; }
.csview-off:hover { background:var(--acc-soft); border-color:var(--acc); }
@media (max-width:720px) { .csview-b span, .csview-off b { display:none; } }

/* ══════════════════════════════════════════════════════════════════════
   ЮР. СТРАНИЦЫ (body.p-legal) — оболочка условий, политики и возвратов.
   Разметку строит root/legal_inc.php, тексты — root/legal_data.php.
   Сайдбара тут нет: только топбар, поэтому левый отступ body снимается.
   ══════════════════════════════════════════════════════════════════════ */
body.p-legal { padding-left:0 !important; }
:where(body.p-legal) .apptb { left:0; }
:where(body.p-legal) .wrap { padding-top:0; padding-bottom:0; }

/* ── Шапка документа ─────────────────────────────────────────────────── */
:where(body.p-legal) .lg-hero { border-bottom:1px solid var(--n700);
      background:radial-gradient(1100px 320px at 18% -50%, var(--acc-soft), transparent 70%), var(--n850); }
:where(body.p-legal) .lg-hero .wrap { padding:var(--sp-6) var(--gut) var(--sp-5); }
:where(body.p-legal) .lg-kick { display:inline-flex; align-items:center; gap:7px;
      font:600 var(--fs-xs)/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase;
      color:var(--acc); background:var(--acc-soft); border:1px solid var(--acc-line);
      padding:5px 10px; border-radius:var(--r-pill); }
:where(body.p-legal) .lg-hero h1 { margin:var(--sp-3) 0 var(--sp-2);
      font:600 var(--fs-d2)/1.15 var(--f-disp); text-transform:uppercase; letter-spacing:.02em; color:var(--n0); }
:where(body.p-legal) .lg-lead { max-width:var(--measure); color:var(--n300); font-size:14.5px; }
:where(body.p-legal) .lg-meta { display:flex; gap:var(--sp-5); flex-wrap:wrap;
      margin-top:var(--sp-4); color:var(--n400); font-size:var(--fs-s); }
:where(body.p-legal) .lg-meta b { color:var(--n200); font-weight:600; }

/* ── Вкладки документов ──────────────────────────────────────────────── */
:where(body.p-legal) .lg-tabs { border-bottom:1px solid var(--n700); }
:where(body.p-legal) .lg-tabs .wrap { display:flex; gap:var(--sp-1); padding:0 var(--gut); }
:where(body.p-legal) .lg-tabs a { display:flex; align-items:center; gap:var(--sp-2);
      padding:14px var(--sp-4); margin-bottom:-1px; border-bottom:2px solid transparent;
      color:var(--n300); text-decoration:none; font:600 13px/1 var(--f-body); white-space:nowrap; }
:where(body.p-legal) .lg-tabs a svg { stroke:var(--n500); }
:where(body.p-legal) .lg-tabs a:hover { color:var(--n100); }
:where(body.p-legal) .lg-tabs a.on { color:var(--n0); border-bottom-color:var(--acc); }
:where(body.p-legal) .lg-tabs a.on svg { stroke:var(--acc); }

/* ── «Коротко» — плитки во всю ширину ────────────────────────────────── */
:where(body.p-legal) .lg-short .wrap { padding:var(--sp-5) var(--gut) 0; }
:where(body.p-legal) .lg-short h2 { font:600 15px/1.3 var(--f-body); color:var(--n0); margin:0; }
:where(body.p-legal) .lg-short-s { color:var(--n400); font-size:var(--fs-s); margin:2px 0 var(--sp-3); }
:where(body.p-legal) .lg-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
:where(body.p-legal) .lg-tile { background:var(--n800); border:1px solid var(--n700);
      border-radius:var(--r-lg); padding:15px var(--sp-4); }
:where(body.p-legal) .lg-tile h3 { font:600 13.5px/1.3 var(--f-body); color:var(--n0); margin:0 0 3px; }
:where(body.p-legal) .lg-tile p { color:var(--n300); font-size:var(--fs-s); line-height:1.5; margin:0; }

/* Кружок иконки. Тон задаёт смысл: зелёный факт, жёлтый внимание, красный запрет. */
:where(body.p-legal) .lg-ic { display:grid; place-items:center; flex:none;
      width:32px; height:32px; border-radius:9px; background:var(--n750); }
:where(body.p-legal) .lg-tile .lg-ic { margin-bottom:10px; }
:where(body.p-legal) .lg-ic svg { stroke:var(--n300); }
:where(body.p-legal) .lg-ok   { background:var(--ok-soft); }   :where(body.p-legal) .lg-ok svg   { stroke:var(--ok); }
:where(body.p-legal) .lg-info { background:var(--info-soft); } :where(body.p-legal) .lg-info svg { stroke:var(--info); }
:where(body.p-legal) .lg-warn { background:var(--warn-soft); } :where(body.p-legal) .lg-warn svg { stroke:var(--warn); }
:where(body.p-legal) .lg-bad  { background:var(--bad-soft); }  :where(body.p-legal) .lg-bad svg  { stroke:var(--bad); }
:where(body.p-legal) .lg-acc  { background:var(--acc-soft); }  :where(body.p-legal) .lg-acc svg  { stroke:var(--acc); }

/* ── Тело: рельс · документ · карточки сбоку ─────────────────────────── */
:where(body.p-legal) .lg-body .wrap { padding:var(--sp-5) var(--gut) var(--sp-7); }
:where(body.p-legal) .lg-grid { display:grid; align-items:start; column-gap:44px;
      grid-template-columns:236px minmax(0,1fr) 288px; }

:where(body.p-legal) .lg-rail { position:sticky; top:calc(var(--top-h) + var(--sp-5)); }
:where(body.p-legal) .lg-rail-t { padding:0 var(--sp-3) var(--sp-2);
      font:600 var(--fs-xs)/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--n400); }
:where(body.p-legal) .lg-rail a { display:flex; align-items:flex-start; gap:10px;
      padding:8px var(--sp-3); border-left:2px solid transparent; border-radius:var(--r-md);
      color:var(--n300); text-decoration:none; font-size:13px; line-height:1.35; }
:where(body.p-legal) .lg-rail a svg { stroke:var(--n500); flex:none; margin-top:2px; }
:where(body.p-legal) .lg-rail a:hover { background:var(--n850); color:var(--n100); }
:where(body.p-legal) .lg-rail a.on { background:var(--acc-soft); border-left-color:var(--acc);
      color:var(--n0); font-weight:600; }
:where(body.p-legal) .lg-rail a.on svg { stroke:var(--acc); }
:where(body.p-legal) .lg-tool { margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--n700); }
:where(body.p-legal) .lg-tool button { display:flex; align-items:center; gap:9px; width:100%;
      padding:7px var(--sp-3); border:0; border-radius:var(--r-md); background:transparent;
      color:var(--n400); font:500 var(--fs-s)/1.3 var(--f-body); text-align:left; cursor:pointer; }
:where(body.p-legal) .lg-tool button:hover { background:var(--n850); color:var(--n100); }
:where(body.p-legal) .lg-tool svg { stroke:var(--n500); flex:none; }

/* ── Раздел документа ────────────────────────────────────────────────── */
:where(body.p-legal) .lg-sec { border-bottom:1px solid var(--n700); scroll-margin-top:88px; }
:where(body.p-legal) .lg-sec:first-child { border-top:1px solid var(--n700); }
:where(body.p-legal) .lg-sec-h { display:flex; align-items:center; gap:var(--sp-3);
      padding:15px 2px; cursor:pointer; user-select:none; }
:where(body.p-legal) .lg-sec-h .lg-ic { width:30px; height:30px; }
:where(body.p-legal) .lg-sec.open .lg-sec-h .lg-ic { background:var(--acc-soft); }
:where(body.p-legal) .lg-sec.open .lg-sec-h .lg-ic svg { stroke:var(--acc); }
:where(body.p-legal) .lg-tt { flex:1; min-width:0; }
:where(body.p-legal) .lg-tt h2 { margin:0; font:600 19px/1.25 var(--f-disp); color:var(--n100); }
:where(body.p-legal) .lg-sec-h:hover .lg-tt h2 { color:var(--acc-hi); }
:where(body.p-legal) .lg-one { display:block; margin-top:2px; color:var(--n400); font-size:var(--fs-s); }
:where(body.p-legal) .lg-chev { stroke:var(--n500); flex:none; transition:transform .18s; }
:where(body.p-legal) .lg-sec.open .lg-chev { transform:rotate(180deg); }
:where(body.p-legal) .lg-sec-b { display:none; padding:0 2px var(--sp-5) 42px; }
:where(body.p-legal) .lg-sec.open .lg-sec-b { display:block; }
:where(body.p-legal) .lg-sec-b p { margin:10px 0; color:var(--n200); max-width:var(--measure); }
:where(body.p-legal) .lg-sec-b b { color:var(--n0); font-weight:600; }
:where(body.p-legal) .lg-sec-b a { color:var(--acc); }
:where(body.p-legal) .lg-sec-b ul { margin:10px 0; padding:0; list-style:none; max-width:var(--measure); }
:where(body.p-legal) .lg-sec-b li { position:relative; margin:7px 0; padding-left:18px; color:var(--n200); }
:where(body.p-legal) .lg-sec-b li::before { content:""; position:absolute; left:3px; top:9px;
      width:5px; height:5px; border-radius:50%; background:var(--n500); }
:where(body.p-legal) .lg-sec-b table { width:100%; border-collapse:collapse; margin:var(--sp-3) 0; font-size:13px; }
:where(body.p-legal) .lg-sec-b th, :where(body.p-legal) .lg-sec-b td {
      padding:9px var(--sp-3); text-align:left; vertical-align:top; border-bottom:1px solid var(--n700); }
:where(body.p-legal) .lg-sec-b th { color:var(--n400); font:600 var(--fs-xs)/1.2 var(--f-body);
      letter-spacing:.06em; text-transform:uppercase; }
:where(body.p-legal) .lg-sec-b td:first-child { width:38%; color:var(--n0); font-weight:500; }

/* Плашка: выделяет то, из-за чего люди и спорят. Тон — тот же язык, что у плиток. */
:where(body.p-legal) .lg-key { display:flex; gap:11px; align-items:flex-start;
      margin:var(--sp-3) 0; padding:12px var(--sp-4); border-radius:var(--r-md);
      background:var(--acc-soft); border:1px solid var(--acc-line); max-width:var(--measure); }
:where(body.p-legal) .lg-key svg { stroke:var(--acc); flex:none; margin-top:2px; }
:where(body.p-legal) .lg-key p { margin:0; color:var(--n200); font-size:13.5px; }
:where(body.p-legal) .lg-key.lg-bad { background:var(--bad-soft); border-color:rgba(230,72,46,.34); }
:where(body.p-legal) .lg-key.lg-bad svg { stroke:var(--bad); }
:where(body.p-legal) .lg-key.lg-warn { background:var(--warn-soft); border-color:rgba(240,180,41,.34); }
:where(body.p-legal) .lg-key.lg-warn svg { stroke:var(--warn); }
:where(body.p-legal) .lg-key.lg-mut { background:var(--n850); border-color:var(--n700); }
:where(body.p-legal) .lg-key.lg-mut svg { stroke:var(--n400); }

/* ── Карточки сбоку ──────────────────────────────────────────────────── */
:where(body.p-legal) .lg-aside { position:sticky; top:calc(var(--top-h) + var(--sp-5));
      display:flex; flex-direction:column; gap:var(--sp-3); }
:where(body.p-legal) .lg-card { background:var(--n800); border:1px solid var(--n700);
      border-radius:var(--r-lg); padding:15px var(--sp-4); }
:where(body.p-legal) .lg-card h3 { margin:0 0 9px; font:600 var(--fs-s)/1.3 var(--f-body); color:var(--n0); }
:where(body.p-legal) .lg-card p { margin:0; color:var(--n300); font-size:var(--fs-s); }
:where(body.p-legal) .lg-btn { display:flex; align-items:center; justify-content:center; gap:7px;
      margin-top:10px; padding:10px; border-radius:var(--r-md); background:var(--acc);
      color:var(--on-acc); text-decoration:none; font:700 var(--fs-s)/1 var(--f-body); }
:where(body.p-legal) .lg-btn svg { fill:currentColor; stroke:none; }
:where(body.p-legal) .lg-btn:hover { background:var(--acc-hi); }
:where(body.p-legal) .lg-list a { display:flex; align-items:center; gap:9px; padding:7px 0;
      color:var(--n300); text-decoration:none; font-size:var(--fs-s); }
:where(body.p-legal) .lg-list a svg { stroke:var(--n500); flex:none; }
:where(body.p-legal) .lg-list a:hover { color:var(--n100); }
:where(body.p-legal) .lg-list a.on { color:var(--n0); font-weight:600; }
:where(body.p-legal) .lg-list a.on svg { stroke:var(--acc); }

/* ── Узкие экраны: первой уходит боковая колонка, последним — текст ──── */
@media (max-width:1180px) {
  :where(body.p-legal) .lg-grid { grid-template-columns:236px minmax(0,1fr); column-gap:36px; }
  :where(body.p-legal) .lg-aside { display:none; }
  :where(body.p-legal) .lg-tiles { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  :where(body.p-legal) .lg-grid { grid-template-columns:minmax(0,1fr); }
  :where(body.p-legal) .lg-rail { display:none; }
  :where(body.p-legal) .lg-tabs .wrap { overflow-x:auto; }
}
@media (max-width:720px) {
  :where(body.p-legal) .lg-tiles { grid-template-columns:1fr; }
  :where(body.p-legal) .lg-sec-b { padding-left:0; }
  :where(body.p-legal) .lg-hero h1 { font-size:var(--fs-h1); }
}

/* Печать: свёрнутые разделы на бумаге не нужны, служебное — тоже. */
@media print {
  :where(body.p-legal) .lg-sec-b { display:block !important; }
  :where(body.p-legal) .apptb, :where(body.p-legal) .lg-rail,
  :where(body.p-legal) .lg-aside, :where(body.p-legal) .lg-chev,
  :where(body.p-legal) .site-footer { display:none !important; }
}

/* Меню публичных страниц (лендинг, тарифы, юр. документы): сайдбара там нет,
   и без него страница была тупиком. Живёт в топбаре, рядом с лого. */
.apptb-pub { display:flex; gap:2px; margin-left:var(--sp-4); min-width:0; }
.apptb-pub a { padding:7px var(--sp-3); border-radius:var(--r-md); color:var(--n300);
      text-decoration:none; font-size:13px; white-space:nowrap; }
.apptb-pub a:hover { background:var(--n800); color:var(--n100); }
.apptb-pub a.on { color:var(--n0); background:var(--n800); font-weight:600; }
@media (max-width:900px) { .apptb-pub { display:none; } }