@charset "UTF-8";

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

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; }

.wrap { max-width:var(--col); margin:0 auto;
        padding:var(--sp-5) var(--gut) var(--sp-7); }

.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;
         scrollbar-width:none; }
.appsb::-webkit-scrollbar { display:none; }

.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-2) var(--sp-3) var(--sp-1); font-size:var(--fs-xs);
          font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--n0); }
.sb-sep { height:1px; margin:6px var(--sp-3); background:var(--n700); }

.sb-i { position:relative; display:flex; align-items:center; gap:var(--sp-2);
        min-height:30px; 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(--n400); }
.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:hover svg { color:var(--n200); }
.sb-i.on { background:var(--n800); color:var(--n0); font-weight:600; }
.sb-i.on svg { color:var(--n100); }
.sb-i.on::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px;
                   border-radius:0 3px 3px 0; background:var(--acc); }

.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-cta { display:inline-flex; align-items:center; gap:var(--sp-2); height:36px; padding:0 12px; flex:none;
          border-radius:var(--r-md); border:1px solid var(--n700); background:transparent;
          color:var(--n100); font-size:var(--fs-s); font-weight:600; white-space:nowrap;
          text-decoration:none; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.sb-cta:hover { background:var(--n800); border-color:var(--n600); color:var(--n0); }
.sb-cta svg { width:15px; height:15px; flex:none; color:var(--acc); }
@media (max-width:560px) { .sb-cta { width:36px; padding:0; justify-content:center; } .sb-cta-t { display: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); }

@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); }

  .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-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; }

  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:11px; font-weight:600; }
.appmb a.on::before { content:none; }
.appmb a.on { color:var(--acc); }
.appmb svg { width:20px; height:20px; flex:none; }
.appmb a span { max-width:100%; padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.1; }
.sb-scrim { display:none; position:fixed; inset:0; z-index:310; background:var(--k-a60); }

.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(--on-solid); }

.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(--on-solid);
          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:var(--steam); color:var(--on-steam);
          border:1px solid var(--steam-line); 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:var(--steam-bg-hi2); border-color:var(--steam-hi); }
.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); }

.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; } }

@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:var(--acc-track) 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:var(--acc-track); 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); }
}

.site-footer{position:relative;overflow:hidden;margin-top:64px;
  background:linear-gradient(180deg,var(--n950-a00),var(--n950) 60%);border-top:1px solid var(--n700);
  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,var(--acc-a55),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%,var(--acc-a045),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:var(--n100);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:var(--n300);font-size:13.5px;line-height:1.6;}
.site-footer .sf-tag b{color:var(--acc);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 var(--n700);border-radius:10px;background:var(--n850);color:var(--text-steel-b);
  text-decoration:none;transition:.15s;}
.site-footer .sf-social a:hover{color:var(--acc);border-color:var(--acc);}

.site-footer .sf-lbl{font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--n100);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:var(--text-lite-a);text-decoration:none;font-size:14px;transition:.15s;}
.site-footer .sf-col>a:hover{color:var(--acc);}
.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,var(--acc),var(--acc-glint));color:var(--on-acc-deep);font-weight:700;font-size:14px;
  border-radius:10px;text-decoration:none;box-shadow:0 8px 22px -14px var(--acc-a45);}
.site-footer a.sf-cta:hover{color:var(--on-acc-deep);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 var(--n750);margin-top:38px;padding-top:20px;}
.site-footer .sf-bottom span{color:var(--text-faint);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;}
}

.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; }
}

body { display:flex; flex-direction:column; }

body > *, .wrap:has(> .site-footer) > * { width:100%; }
body > .appsb { width:var(--side-w); }

.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); }

body > .site-footer.sf-slim,
.wrap:has(> .site-footer) > .site-footer.sf-slim { margin-top:auto; }

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; }

.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); } }
/* место под плавающую кнопку «наверх» справа — текст атрибуции под неё не залезает */
@media (max-width:920px) { .sf-slim .sf-att { padding-right:64px; } }

.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 var(--k-a72), 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; }

  .csmap { position:relative; width:100%; max-width:900px; }

  .csmap-cv { width:100%; height:auto; aspect-ratio:1; display:block;
              border-radius:14px; background:var(--bg-canvas); touch-action:none; cursor:default; }
  .csmap-cv.zoomable { cursor:zoom-in; }

  .csmap-load { position:absolute; inset:0; z-index:5; display:flex;
                align-items:center; justify-content:center; pointer-events:none;
                background:var(--deep-a50); border-radius:14px;
                color:var(--text-bright-b); font:600 15px 'Inter',sans-serif; }

  .csmap-load[hidden] { display:none; }
  .csmap-spin { width:15px; height:15px; border:2px solid var(--line-track); border-top-color:var(--acc);
                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:var(--text-steel); }
  .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:var(--text-bright-b);
               min-width:96px; text-align:center; }
  .csmap-sl { flex:1 1 auto; width:100%; }

: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) .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-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)); }

: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 40px; }
: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); }

: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-open { display:flex; align-items:center; justify-content:center;
    align-self:stretch; margin:-10px calc(-1 * var(--sp-3)) -10px 0; padding:0 var(--sp-3) 0 12px;
    color:var(--n500); border-left:1px solid var(--n700); }
:where(body.p-coaching) .cg-open svg { width:16px; height:16px; transition:transform .15s ease; }
:where(body.p-coaching) .cg-open:hover { background:var(--acc-soft); color:var(--acc); }
:where(body.p-coaching) .cg-open:hover svg { transform:translateX(2px); }
:where(body.p-coaching) .cg-item:hover .cg-open { color:var(--n100); }
:where(body.p-coaching) .cg-item:hover .cg-open:hover { color:var(--acc); }

: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 40px; }
: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-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-ic{flex:0 0 auto}
  .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:var(--line-hover); color:var(--text)}
  .pay-fold[open]>summary{color:var(--text); border-color:var(--line-hover)}
  .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, var(--w-a025), var(--w-a00));
       transition:all .16s ease-in-out}
  .paysel label:hover{border-color:var(--line-hover); 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,var(--acc)); color:var(--brand,var(--acc));
       background:var(--acc-soft); box-shadow:inset 0 0 0 1px var(--brand,var(--acc))}
  .paysel label:has(input:checked)::after{content:'✓'; position:absolute; top:5px; right:9px;
       font-size:11px; color:var(--brand,var(--acc)); font-weight:700}

  .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, var(--w-a025), var(--w-a00));
       transition:all .16s ease-in-out}
  .cpk:hover{border-color:var(--line-hover); 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,var(--acc)); background:var(--acc-a09);
       box-shadow:inset 0 0 0 1px var(--brand,var(--acc))}
  .cpk.on .cpk-p{color:var(--brand,var(--acc))}
  .cpk.on::after{content:'✓'; position:absolute; top:7px; right:10px; font-size:12px;
       color:var(--brand,var(--acc)); font-weight:700}

  .cpk input:focus-visible+.cpk-t{outline:2px solid var(--brand,var(--acc)); outline-offset:3px; border-radius:4px}

  .nbwrap { position:relative; flex:none; }
  .nbnum { position:absolute; top:-6px; right:-6px; background:var(--err, var(--bad)); color:var(--on-solid);
           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, var(--n850)); border:1px solid var(--line, var(--n700)); border-radius:12px;
            z-index:400; box-shadow:0 18px 50px -12px var(--k-a60); 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, var(--n300)); border-bottom:1px solid var(--line, var(--n700));
            display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .nbclr { background:transparent; border:0; color:var(--mut, var(--n300)); font-size:11px; cursor:pointer;
           text-decoration:underline; padding:0; }
  .nbclr:hover { color:var(--txt, var(--n100)); }
  .nblist { max-height:340px; overflow-y:auto; }
  .nbitem { display:block; padding:11px 14px; border-bottom:1px solid var(--line, var(--n700));
            text-decoration:none; cursor:pointer; }
  .nbitem:hover { background:var(--acc-a05); }
  .nbitem.nbnew { box-shadow:inset 3px 0 0 var(--brand, var(--acc)); background:var(--acc-a04); }
  .nbtit { font-size:13px; font-weight:600; color:var(--txt, var(--n100)); line-height:1.35; }
  .nbtxt { font-size:12.5px; color:var(--mut, var(--n300)); margin-top:3px; line-height:1.45; }
  .nbdate { font-size:11px; color:var(--mut, var(--n300)); opacity:.7; margin-top:4px; }
  .nbempty { padding:18px 14px; font-size:13px; color:var(--mut, var(--n300)); text-align:center; }
  .nbfoot { padding:8px 14px; font-size:11.5px; color:var(--mut, var(--n300));
            border-top:1px solid var(--line, var(--n700)); opacity:.75; }

  .nbpref { display:flex; gap:8px; align-items:center; padding:10px 14px; cursor:pointer;
            border-top:1px solid var(--line, var(--n700)); font-size:12px; color:var(--mut, var(--n300));
            user-select:none; line-height:1.35; }
  .nbpref:hover { color:var(--txt, var(--n100)); }
  .nbpref input { accent-color:var(--brand, var(--acc)); width:15px; height:15px; flex:none; cursor:pointer; }

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

  body:where(.p-heroes) {
    --brand:var(--acc); --bg:var(--n900); --panel:var(--n800); --panel2:var(--n750);
    --text:var(--n100); --muted:var(--n300); --line:var(--n700); --err:var(--bad); --ok:var(--ok-leaf);
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:var(--on-acc-deep); --brand2:var(--acc-hi); --gold:var(--gold-warm); --enred:var(--red-soft);
  }
  :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}

  :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;
        min-height:32px; padding:4px 12px; 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:var(--line-hover-2); 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:var(--text-faint); font-weight:400;}
  :where(body.p-heroes) input.hgq:focus {outline:none; border-color:var(--brand);}

  :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:var(--line-hover-2);}
  :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:var(--n850); border:1px solid var(--n600);
        border-radius:10px; padding:4px; min-width:100%; width:max-content; display:flex; flex-direction:column;
        box-shadow:0 10px 26px var(--k-a45);}
  :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:var(--w-a06);}
  :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);}

  :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:var(--line-hover-2); 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;}

  :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:var(--on-acc-deep); background:var(--brand);}
  :where(body.p-heroes) .hgt.tA {color:var(--text); background:var(--tier-a);}
  :where(body.p-heroes) .hgt.tB {color:var(--n900); background:var(--tier-b);}
  :where(body.p-heroes) .hgt.tC {color:var(--n900); background:var(--tier-c);}
  :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;}

  :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);}

  :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:var(--top-h); z-index:5;
        background-color:var(--bg);
        background-image:linear-gradient(var(--w-a04), var(--w-a04));}
  :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(var(--acc-soft), var(--acc-soft));}
  :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(var(--amb-a10), var(--amb-a10));}
  :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(var(--w-a03), var(--w-a03));}

  :where(body.p-heroes) .hgspin {width:13px; height:13px; border:2px solid var(--line-track); 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:var(--ink-a72); 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;}}
/* ===== АНАЛИЗ ДРАФТА (draft.php) ===== */
html:has(body.p-draft) { overflow-x:clip; }

  body:where(.p-draft) {
    --brand:var(--acc); --bg:var(--n900); --panel:var(--n800); --panel2:var(--n750);
    --text:var(--n100); --muted:var(--n300); --line:var(--n700); --err:var(--bad); --ok:var(--ok-leaf);
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:var(--on-acc-deep); --brand2:var(--acc-hi); --gold:var(--gold-warm); --enred:var(--red-soft);
  }
  :where(body.p-draft) * {box-sizing:border-box}
  :where(body.p-draft) [hidden] {display:none !important;}
  body:where(.p-draft) {margin:0; background:var(--bg); color:var(--text);
        font-family:'Inter',system-ui,sans-serif; overflow-x:clip;}
  :where(body.p-draft) a {color:var(--brand); text-decoration:none}
  :where(body.p-draft) h1, :where(body.p-draft) h2 {font-family:'Oswald',sans-serif; margin:0}

  :where(body.p-draft) .dfxwrap {max-width:none;}
  :where(body.p-draft) .dfxhead {display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; margin:18px 0 14px;}
  :where(body.p-draft) .dfxhead h1 {font-size:28px; line-height:1.1;}
  :where(body.p-draft) .dfx-sec {font:600 13px 'Inter',sans-serif; color:var(--mut);
        text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px;}
  :where(body.p-draft) .dfx-meta {font-size:12.5px; color:var(--mut);}
  :where(body.p-draft) .dfx-note {font-size:13px; color:var(--mut); margin:10px 0;}
  :where(body.p-draft) .dfx-note:empty {display:none;}
  :where(body.p-draft) .dfx-hint {font-size:12.5px; color:var(--mut); margin:0 0 10px;
        padding-left:10px; border-left:2px solid var(--line);}
  :where(body.p-draft) .dfx-src {font-size:12px; color:var(--mut); line-height:1.6; margin:28px 0 20px;}

  :where(body.p-draft) .dfx-panel {border:1px solid var(--line); border-radius:12px; background:var(--panel);
        padding:14px 16px; margin-bottom:14px;}
  :where(body.p-draft) .dfx-slots {display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start;}
  :where(body.p-draft) .dfx-slot {min-width:0;}
  :where(body.p-draft) .dfx-chip {display:flex; align-items:center; gap:8px; border:1px solid var(--line);
        border-radius:10px; background:var(--panel2); padding:6px 8px;}
  :where(body.p-draft) .dfx-chip b {font:600 13px 'Inter',sans-serif; color:var(--text); white-space:nowrap;}
  :where(body.p-draft) .dfx-cface {width:44px; height:26px; border-radius:5px; object-fit:cover;
        flex:0 0 auto; border:1px solid var(--line);}
  :where(body.p-draft) .dfx-x {border:0; background:none; color:var(--mut); font-size:17px; line-height:1;
        cursor:pointer; padding:3px 5px; border-radius:6px;
        transition:color .15s ease-in-out, transform .15s ease-in-out;}
  :where(body.p-draft) .dfx-x:hover {color:var(--text); background:var(--w-a06);}
  :where(body.p-draft) .dfx-x:active {transform:scale(.96);}
  :where(body.p-draft) .dfx-x:focus-visible {outline:2px solid var(--brand); outline-offset:2px;}

  :where(body.p-draft) .dfx-find {position:relative;}
  :where(body.p-draft) input.dfx-q {background:var(--panel2); border:1px solid var(--brand); border-radius:8px;
        color:var(--text); padding:8px 12px; font:600 13px 'Inter',sans-serif; width:230px; max-width:100%; outline:none;}
  :where(body.p-draft) input.dfx-q::placeholder {color:var(--text-faint); font-weight:400;}
  :where(body.p-draft) .dfx-list {position:absolute; top:calc(100% + 4px); left:0; z-index:60; width:262px;
        max-width:80vw; max-height:320px; overflow-y:auto; background:var(--n850); border:1px solid var(--n600);
        border-radius:10px; padding:4px; display:flex; flex-direction:column; box-shadow:0 10px 26px var(--k-a45);}
  :where(body.p-draft) .dfx-list:empty {display:none;}
  :where(body.p-draft) .dfx-opt {display:flex; align-items:center; gap:9px; background:none; border:0;
        color:var(--text); border-radius:7px; padding:5px 8px; font:600 13px 'Inter',sans-serif;
        cursor:pointer; text-align:left; white-space:nowrap;}
  :where(body.p-draft) .dfx-opt:hover {background:var(--w-a06);}
  :where(body.p-draft) .dfx-opt:active {transform:scale(.96);}
  :where(body.p-draft) .dfx-opt:focus-visible {outline:2px solid var(--brand); outline-offset:-2px;}
  :where(body.p-draft) .dfx-oface {width:40px; height:23px; border-radius:4px; object-fit:cover; flex:0 0 auto;}

  :where(body.p-draft) .dfx-ghost {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-draft) .dfx-ghost:hover {border-color:var(--brand); color:var(--brand);}
  :where(body.p-draft) .dfx-ghost:active {transform:scale(.96);}
  :where(body.p-draft) .dfx-ghost:focus-visible {outline:2px solid var(--brand); outline-offset:2px;}
  :where(body.p-draft) .dfx-more {margin-top:10px; width:100%;}
  :where(body.p-draft) .dfx-bar {display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
  :where(body.p-draft) .dfx-bar .dfx-sec {margin:0;}
  :where(body.p-draft) .dfx-seg {display:inline-flex; gap:4px; flex-wrap:wrap; align-items:center;}
  :where(body.p-draft) .dfx-c {display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line);
        background:none; color:var(--mut); border-radius:8px; padding:5px 11px;
        font:600 12px 'Inter',sans-serif; cursor:pointer; transition:all .15s ease-in-out;}
  :where(body.p-draft) .dfx-c:hover {color:var(--text);}
  :where(body.p-draft) .dfx-c:active {transform:scale(.96);}
  :where(body.p-draft) .dfx-c.on {color:var(--text); border-color:var(--line-hover-2); background:var(--panel2);}
  :where(body.p-draft) .dfx-c:focus-visible {outline:2px solid var(--brand); outline-offset:2px;}
  :where(body.p-draft) .rico {width:14px; height:14px; vertical-align:-2px; display:inline-block;
        opacity:.9; object-fit:contain;}

  :where(body.p-draft) .psel {position:relative; display:inline-block; flex:0 0 auto;}
  :where(body.p-draft) .psel-b {display:inline-flex; align-items:center; gap:6px; background:var(--bg);
        border:1px solid var(--line); border-radius:8px; color:var(--text); padding:5px 9px;
        font:600 12px 'Inter',sans-serif; cursor:pointer; transition:border-color .15s ease-in-out; white-space:nowrap;}
  :where(body.p-draft) .psel-b:hover {border-color:var(--line-hover-2);}
  :where(body.p-draft) .psel-b:active {transform:scale(.97);}
  :where(body.p-draft) .psel-b:focus-visible {outline:2px solid var(--brand); outline-offset:2px;}
  :where(body.p-draft) .psel-ar {color:var(--mut); font-size:10px; margin-left:2px;}
  :where(body.p-draft) .psel-l {position:absolute; top:calc(100% + 4px); left:0; z-index:60; background:var(--n850);
        border:1px solid var(--n600); border-radius:10px; padding:4px; min-width:100%; width:max-content;
        display:flex; flex-direction:column; box-shadow:0 10px 26px var(--k-a45);}
  :where(body.p-draft) .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-draft) .psel-l button:hover {color:var(--text); background:var(--w-a06);}

  :where(body.p-draft) .dfx-cols {display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;}
  @media (max-width:860px) { :where(body.p-draft) .dfx-cols {grid-template-columns:1fr;} }
  :where(body.p-draft) .dfx-box {border:1px solid var(--line); border-radius:12px; background:var(--panel);
        padding:16px 18px; min-width:0;}

  :where(body.p-draft) .dfx-row {display:grid; grid-template-columns:56px minmax(0,1fr) 92px 60px; gap:10px;
        align-items:center; padding:6px 8px; border-radius:8px; color:var(--text); transition:background .15s ease-in-out;}
  :where(body.p-draft) .dfx-row:nth-child(even):not(:hover) {background:var(--w-a02);}
  :where(body.p-draft) .dfx-row:hover {background:var(--acc-a06);}
  :where(body.p-draft) .dfx-row:active {transform:scale(.99);}
  :where(body.p-draft) .dfx-row:focus-visible {outline:2px solid var(--brand); outline-offset:2px;}
  :where(body.p-draft) .dfx-row > .dfx-rface {grid-column:1;}
  :where(body.p-draft) .dfx-row > .dfx-in    {grid-column:2;}
  :where(body.p-draft) .dfx-row > .dfx-sc50  {grid-column:3;}
  :where(body.p-draft) .dfx-row > .dfx-wr    {grid-column:4;}
  :where(body.p-draft) .dfx-rface {width:56px; height:32px; border-radius:5px; object-fit:cover; flex:0 0 auto;}
  :where(body.p-draft) .dfx-in {display:flex; flex-direction:column; gap:3px; min-width:0;}
  :where(body.p-draft) .dfx-nm {font:600 13.5px 'Inter',sans-serif; color:var(--text);
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  :where(body.p-draft) .dfx-subs {display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center;
        font-size:11.5px; color:var(--mut);}
  :where(body.p-draft) .dfx-tag {border:1px solid var(--line); border-radius:5px; padding:1px 6px;
        font:600 10.5px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.03em; color:var(--mut);}
  :where(body.p-draft) .dfx-bg {color:var(--mut);}
  :where(body.p-draft) .dfx-en {display:inline-flex; align-items:center; gap:5px; background:var(--panel2);
        border-radius:6px; padding:1px 6px 1px 2px;}
  :where(body.p-draft) .dfx-en i {font-style:normal; color:var(--mut);}
  :where(body.p-draft) .dfx-eface {width:26px; height:15px; border-radius:3px; object-fit:cover; flex:0 0 auto;}
  :where(body.p-draft) .dfx-dash {opacity:.55;}
  :where(body.p-draft) .dfx-subs b {font-weight:600; color:var(--text);}
  :where(body.p-draft) .dfx-subs b.good {color:var(--ok);}
  :where(body.p-draft) .dfx-subs b.low  {color:var(--mut);}
  :where(body.p-draft) .dfx-wr {font:600 14px 'Oswald',sans-serif; color:var(--text); text-align:right;}
  :where(body.p-draft) .dfx-wr.good {color:var(--ok);}
  :where(body.p-draft) .dfx-wr.low  {color:var(--mut);}

  :where(body.p-draft) .dfx-sc50 {position:relative; width:92px; height:6px; border-radius:3px;
        background:var(--w-a05);}
  :where(body.p-draft) .dfx-sc50::before {content:''; position:absolute; left:50%; top:-3px; bottom:-3px;
        width:1px; background:var(--slab-half);}
  :where(body.p-draft) .dfx-sc50 i {position:absolute; top:0; height:6px; border-radius:3px;}
  :where(body.p-draft) .dfx-sc50 i.b {background:var(--enred); right:50%;}
  :where(body.p-draft) .dfx-sc50 i.g {background:var(--ok); left:50%;}

  @media (max-width:640px) {
    :where(body.p-draft) .dfx-sc50 {display:none;}
    :where(body.p-draft) .dfx-row {grid-template-columns:46px minmax(0,1fr) 52px; gap:8px;}
    :where(body.p-draft) .dfx-row > .dfx-wr {grid-column:3;}
    :where(body.p-draft) .dfx-rface {width:46px; height:27px;}
    :where(body.p-draft) .dfx-wr {font-size:13px;}
    :where(body.p-draft) .dfx-list {width:min(88vw, 300px);}
  }
html:has(body.p-hero) { overflow-x:clip; }

  body:where(.p-hero) {
    --brand:var(--acc); --bg:var(--n900); --panel:var(--n800); --panel2:var(--n750);
    --text:var(--n100); --muted:var(--n300); --line:var(--n700); --err:var(--bad); --ok:var(--ok-leaf);
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:var(--on-acc-deep); --brand2:var(--acc-hi); --gold:var(--gold-warm); --enred:var(--red-soft);
  }
  :where(body.p-hero) * {box-sizing:border-box}
  :where(body.p-hero) [hidden] {display:none !important;}
  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; }
  :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}

  :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;}

  :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);}

  :where(body.p-hero) .hxwd {display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start;}

  :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;}

  :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);}

  :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;}

  :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:var(--pit-a55);
        -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);}
  :where(body.p-hero) .hxmp-lock[hidden] {display:none !important;}

  :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:var(--acc-soft);
    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:var(--w-a10);}
  :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;}}

  :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;}

  :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:var(--w-a03);}
  :where(body.p-hero) .hxrow[data-go] {cursor:pointer;}

  :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:var(--acc-a06);}
  :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 var(--line-hover-2); background:var(--acc-a05);}
  :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);}

  :where(body.p-hero) .hxsc50 {position:relative; flex:0 0 92px; width:92px; height:6px; border-radius:3px; background:var(--w-a05);}
  :where(body.p-hero) .hxsc50::before {content:''; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--slab-half);}
  :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:var(--line-hover-2); background:var(--w-a03);}
  :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;}}

  :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:var(--line-hover-2); 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:var(--acc-a45); 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;}

  :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:var(--acc-a06);}
  :where(body.p-hero) .hxbrc-you {position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--brand);
        color:var(--n900); 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) .hxvs-dr {margin-left:auto; text-decoration:none; padding:4px 12px; border:1px solid var(--line);
        border-radius:8px; font:600 12px 'Inter',sans-serif; color:var(--text); transition:all .15s ease-in-out;}
  :where(body.p-hero) .hxvs-dr:hover {border-color:var(--brand); color:var(--brand);}
  :where(body.p-hero) .hxvs-dr:active {transform:scale(.96);}
  :where(body.p-hero) .hxdc-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  @media(max-width:980px) { :where(body.p-hero) .hxdc-grid {grid-template-columns:1fr;} }
  :where(body.p-hero) .hxlift {flex:0 0 auto; border:1px solid var(--line); border-radius:6px; padding:1px 7px;
        font:600 11.5px 'Oswald',sans-serif; color:var(--mut);}
  :where(body.p-hero) .hxhidhd {margin:12px 0 4px; padding-top:10px; border-top:1px dashed var(--line);}
  :where(body.p-hero) .hxhid .hxgames {color:var(--gold);}
  :where(body.p-hero) .hxiv-row {display:flex; align-items:center; gap:10px; width:100%; text-align:left;
        border:1px solid var(--line); background:var(--panel2); border-radius:10px; padding:7px 10px;
        margin-bottom:6px; color:var(--text); cursor:pointer; font:inherit; transition:border-color .15s ease-in-out;}
  :where(body.p-hero) .hxiv-row:hover {border-color:var(--line-hover-2);}
  :where(body.p-hero) .hxiv-row:active {transform:scale(.98);}
  :where(body.p-hero) .hxiv-row.on {border-color:var(--brand);}
  :where(body.p-hero) .hxiv-row.st {cursor:default; background:none;}
  :where(body.p-hero) .hxiv-row.st:active {transform:none;}
  :where(body.p-hero) .hxiv-ic {width:38px; height:28px; border-radius:5px; object-fit:cover; border:1px solid var(--line); flex:0 0 auto;}
  :where(body.p-hero) .hxiv-in {flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px;}
  :where(body.p-hero) .hxiv-in b {font:600 13px 'Inter',sans-serif;}
  :where(body.p-hero) .hxiv-in small {color:var(--mut); font-size:11.5px;}
  :where(body.p-hero) .hxiv-cur {display:flex; align-items:center; gap:10px; margin:2px 0 10px; font-family:'Oswald',sans-serif;}
  :where(body.p-hero) .hxiv-wr {width:auto; flex:0 0 auto; white-space:nowrap;}
  :where(body.p-hero) .hxiv-wr.r {color:var(--enred);}
  :where(body.p-hero) .hxiv-wr.n {color:var(--mut);}
  :where(body.p-hero) .hxiv-wr.g {color:var(--ok);}
  :where(body.p-hero) .hxiv-q {flex:0 0 auto; width:18px; height:18px; border-radius:50%;
        display:inline-flex; align-items:center; justify-content:center;
        font:600 11px 'Inter',sans-serif; color:var(--mut); cursor:help;}
  :where(body.p-hero) .hxiv-q.cs-tip {border:1px solid var(--line);}
  :where(body.p-hero) .hxiv-q:hover {color:var(--text); border-color:var(--line-hover-2);}
  :where(body.p-hero) .hxiv-ml {flex:0 0 auto; font:600 11px 'Inter',sans-serif; color:var(--mut);
        text-decoration:none; white-space:nowrap; padding:2px 4px; border-radius:4px;}
  :where(body.p-hero) .hxiv-ml:hover {color:var(--brand); background:var(--w-a04);}
  :where(body.p-hero) a.hxiv-row.st {cursor:pointer; text-decoration:none; color:inherit;}
  :where(body.p-hero) a.hxiv-row.st:hover {border-color:var(--line-hover-2);}
  :where(body.p-hero) .hxiv-ok {font-style:normal; color:var(--ok); margin-left:5px; font-size:11px; cursor:help;}
  /* винрейт в пунктах шире фиксированных 56px общего .hxwr — иначе он наезжает на ссылку */
  :where(body.p-hero) .hxiv-row .hxwr.hxiv-wr {width:auto; min-width:0; margin-left:2px; padding-left:6px;}
  :where(body.p-hero) .hxiv-row .hxiv-ml {margin-left:8px;}
  /* кружок растягивается под содержимое: с «×2.51» внутри круглые 18px не сходятся */
  :where(body.p-hero) .hxiv-q {width:auto; min-width:18px; padding:0 5px; border-radius:9px;}
  :where(body.p-hero) .hxlift {white-space:nowrap; min-width:0;}
  :where(body.p-hero) .hxdcl .hxrow .hxgames {white-space:nowrap; width:auto; flex:0 0 auto;}
  :where(body.p-hero) .hxdcl .hxrow .hxname {flex:1 1 auto; min-width:0; overflow:hidden;
        text-overflow:ellipsis; white-space:nowrap;}
  :where(body.p-hero) .hxlift.cs-tip {border-bottom:0;}

  :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:var(--line-hover-2); 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;}

  :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;}

  :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:var(--tier-a);}

  :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 var(--ink-black);}

  :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;}

  :where(body.p-hero) .hxsb .c .tm {display:block; font:600 9.5px 'Oswald',sans-serif; color:var(--text-steel-c);}
  :where(body.p-hero) .hxsb .c.tal {position:relative;}
  :where(body.p-hero) .hxsb .c.tal .q {border-color:var(--gold-line-dark); padding:4px; display:flex;}
  :where(body.p-hero) .hxsb .c.tal .q img {width:100%; height:100%; object-fit:contain; display:block;}

  :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 var(--k-a55); text-align:left; white-space:normal;}
  :where(body.p-hero) .hxsb .c.tal:hover .hxtaltip {display:block;}
  :where(body.p-hero) .hxtaltip .tth, :where(body.p-hero) #hxtip .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) #hxtip.tt-wide {max-width:440px; width:min(440px, 92vw);}
  :where(body.p-hero) .hxtaltip .ttr {display:block; font:500 11.5px 'Inter',sans-serif; color:var(--text-mute-a); 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, :where(body.p-hero) #hxtip .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, :where(body.p-hero) #hxtip .tg .tc {font:500 12px 'Inter',sans-serif; color:var(--text-mute-a); 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, :where(body.p-hero) #hxtip .tg .tc.a {text-align:right; justify-content:flex-end;}
  :where(body.p-hero) .hxtaltip .tg .tc.b, :where(body.p-hero) #hxtip .tg .tc.b {text-align:left;}
  :where(body.p-hero) .hxtaltip .tg .tc.on, :where(body.p-hero) #hxtip .tg .tc.on {color:var(--text); font-weight:600; background:var(--acc-soft); border-color:var(--acc-a50);}
  :where(body.p-hero) .hxtaltip .tg .tvc, :where(body.p-hero) #hxtip .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, :where(body.p-hero) #hxtip .tg .tvc.got {border-color:var(--acc-a45); 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, :where(body.p-hero) #hxtip .tg {grid-template-columns:1fr 34px 1fr; gap:6px;}
        :where(body.p-hero) .hxtaltip .tg .tc, :where(body.p-hero) #hxtip .tg .tc {font-size:11px; padding:7px 8px; min-height:38px;} :where(body.p-hero) .hxtaltip .tg .tvc, :where(body.p-hero) #hxtip .tg .tvc {width:32px; height:32px; font-size:13px;}}

  :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;}

  :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 var(--gold-a45);}
  :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);}

  :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 var(--ink-black); 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:var(--text-dimmer);}

  :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:var(--w-a04); 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:var(--text-faint); 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:var(--acc-a14); color:var(--brand);
        border-radius:5px; padding:2px 8px; margin-top:5px;}
  :where(body.p-hero) .hxsc-tag.loss {background:var(--rsoft-a14); color:var(--enred);}

  :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:var(--text-faint); 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;}

  :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:var(--slab-buy);}
  :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:600 11px 'Oswald',sans-serif; color:var(--text); letter-spacing:.02em;}
  :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;}
  /* исход линии словом под нетворсом: в строку он не влезает — плитка шириной в 92px.
 Слово красится вместе с числом: серое «проиграл линию» под красной цифрой читается как сноска, а это приговор. */
  :where(body.p-hero) .hxstt .v small.lnw {display:block; margin-left:0; font-size:10.5px; line-height:1.3;
    white-space:normal;}   /* .v запрещает перенос — «проиграл линию» вылезло бы из плитки в 84px на телефоне */
  :where(body.p-hero) .hxstt .v.good small.lnw {color:var(--ok);}
  :where(body.p-hero) .hxstt .v.bad small.lnw {color:var(--enred);}
  :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);}

  :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;}

  :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:var(--on-acc-deep); background:var(--brand);}
  :where(body.p-hero) .hxhero-stt .hxsic.hexo.tA {color:var(--text); background:var(--tier-a);}
  :where(body.p-hero) .hxhero-stt .hxsic.hexo.tB {color:var(--n900); background:var(--tier-b);}
  :where(body.p-hero) .hxhero-stt .hxsic.hexo.tC {color:var(--n900); background:var(--tier-c);}
  :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;}

  :where(body.p-hero) .hxzh {font:600 11px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.05em; color:var(--mut);}

  :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);}

  :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;}

  :where(body.p-hero) .hxrow:nth-child(even):not(.you):not(:hover) {background:var(--w-a02);}
  :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:var(--n850);
         border:1px solid var(--n600); border-radius:10px; padding:11px 13px; box-shadow:0 8px 24px var(--k-a50);
         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:var(--text-tip);}
  :where(body.p-hero) #hxtip .tt-a div {margin:1px 0;}
  :where(body.p-hero) #hxtip .tt-act {margin-top:7px; background:var(--tipact-a18); border:1px solid var(--line-tip-act); 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:var(--on-solid);}
  /* цвет плашки = её смысл: мана синяя, урон красный, дальность зелёная, КД серое */
  :where(body.p-hero) #hxtip .tt-chip.mc {background:var(--blue-chip);}
  :where(body.p-hero) #hxtip .tt-chip.cd {background:var(--slab-half); color:var(--text-tip);}
  :where(body.p-hero) #hxtip .tt-chip.rng {background:var(--ok-chip);}
  :where(body.p-hero) #hxtip .tt-chip.dmg {background:var(--red-chip);}
  :where(body.p-hero) #hxtip .tt-d {color:var(--text-tip); margin-top:7px; white-space:normal;}

  :where(body.p-hero) #hxtip .tt-n {display:none; margin-top:7px; background:var(--tip-chip-bg); border:1px solid var(--line-tip-n); border-radius:7px;
               padding:7px 9px; color:var(--text-lite-b);}
  :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;}

  :where(body.p-hero) #hxtip .tt-hint {margin-top:6px; text-align:right; color:var(--text-faint); 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;}

  :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:var(--btn-hover-bg); border-color:var(--line-hover); color:var(--n0);}

  @media (max-width:640px) {

    :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:var(--w-a03);}
  :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);}

  :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:var(--acc-a07);}
  :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;}}

  :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:var(--n850); border:1px solid var(--line); border-radius:10px; padding:5px;
        box-shadow:0 8px 24px var(--k-a50);}
  :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:var(--acc-soft); 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-pc-card {position:relative;}
  :where(body.p-hero) .hxmu-pc-card .pgo {position:absolute; top:5px; right:6px; color:var(--mut); line-height:0;
        padding:2px; border-radius:5px;}
  :where(body.p-hero) .hxmu-pc-card .pgo:hover {color:var(--brand); background:var(--acc-soft);}
  :where(body.p-hero) .hxmu-pc-card .pnk {max-width:104px;}

  /* КАРТОЧКА ГЕРОЯ НА СТРАНИЦЕ ИГРОКА — та же карточка, что у про-игрока на
     странице героя, плюс портрет слева: без него список ников и список героев
     выглядели бы одинаково. */
  :where(body.p-hero) .hxmu-pc-card.hc {display:flex; align-items:center; gap:9px;}
  :where(body.p-hero) .hxmu-pc-card.hc .hcp {width:44px; height:26px; object-fit:cover; border-radius:5px; display:block; flex:0 0 auto;}

  /* Страница игрока: на месте портрета героя — эмблема команды, она квадратная
     и на всю ширину плитки смотрелась бы растянутой. */
  :where(body.p-hero) .hxhero img.face.plt {width:104px; min-height:0; height:104px; object-fit:contain;
        background:var(--panel2); border-radius:12px; padding:10px; align-self:center;}
  @media(max-width:640px) { :where(body.p-hero) .hxhero img.face.plt {width:72px; height:72px; padding:7px;} }

  /* Хаб «Игроки»: зона роли — тот же разделитель, что тир у героев, только с
     иконкой позиции вместо буквы. */
  :where(body.p-heroes) .hgzone.plz .hgzt {display:inline-flex; align-items:center; gap:7px;}
  :where(body.p-heroes) .hgzone.plz .rico {width:16px; height:16px;}
  /* плашки тиров: мельче заголовка роли и без прилипания к верху — иерархия на
     экране читается как «роль → тир → карточки», а не двумя равными заголовками */
  /* ⚠️ Подпись тут — предложение, а не слово «CARRY»: базовый `.hgzt` не сжимается
     (`flex:0 0 auto`), и на 360px хвост вместе со счётчиком уезжал под `overflow-x:clip`.
     Поэтому подпись сжимается и переносится, а счётчик при нехватке места падает
     на свою строку. */
  :where(body.p-heroes) .hgzone.pltag {position:static; margin:14px 0 10px; padding:7px 13px;
        flex-wrap:wrap; row-gap:3px;}
  :where(body.p-heroes) .hgzone.pltag .hgzt {font-size:13px; letter-spacing:.03em; gap:6px;
        flex:1 1 auto; min-width:0;}
  :where(body.p-heroes) .hgzone.pltag .ic-moment {flex:none;}
  /* топ мирового рейтинга — зелёная со звездой */
  :where(body.p-heroes) .hgzone.pltop {border-left-color:var(--ok); color:var(--ok);
        background-image:linear-gradient(var(--ok-soft), var(--ok-soft));}
  :where(body.p-heroes) .hgzone.pltop .hgzt b {color:var(--ok);}
  :where(body.p-heroes) .hgzone.pltop .hgzn {color:var(--ok); opacity:.75;}
  /* все остальные — серая, без звезды. Верхняя линия — граница между группами,
     и текст к ней липнуть не должен: сверху отступа вдвое больше, чем снизу */
  /* ⚠️ Верхняя линия — ПСЕВДОЭЛЕМЕНТ, а не `border-top`: настоящая рамка упирается
     в жирную левую стенку и даёт грязный угол. Здесь линия начинается там же,
     где текст, и стенка стоит отдельно. */
  /* ⚠️ `z-index:auto` ОБЯЗАТЕЛЕН: `position:relative` (он нужен линии) оживляет
     `z-index:5` из базового `.hgzone`, и плашка начинает закрашивать своим фоном
     липкий заголовок роли, к которому подъезжает при скролле.
     С ним в паре обязателен `top:auto`: `top` из того же базового правила сдвигает
     относительную плашку вниз на высоту топбара — она ложится на первый ряд карточек. */
  :where(body.p-heroes) .hgzone.plrest {border-left-color:var(--line); background-image:none;
        border-radius:0 8px 8px 0; position:relative; z-index:auto; top:auto;
        margin-top:24px; padding-top:16px;}
  :where(body.p-heroes) .hgzone.plrest::before {content:''; position:absolute;
        left:13px; right:8px; top:0; border-top:1px solid var(--line);}
  :where(body.p-heroes) .hgzone.plrest .hgzt b {color:var(--mut); font-weight:600;}

  /* Хаб «Игроки»: карточки той же сетки, что у героев. */
  :where(body.p-heroes) a.hgc .face.plt {width:46px; height:46px; object-fit:contain; background:var(--panel2);
        border-radius:9px; padding:6px;}
  :where(body.p-heroes) a.hgc .plwr {font-weight:700;}
  :where(body.p-heroes) a.hgc .plwr.good {color:var(--ok);}
  :where(body.p-heroes) a.hgc .plwr.low {color:var(--enred);}
  :where(body.p-heroes) a.hgc .sub.tm {color:var(--mut); font-size:11.5px; margin-top:1px;}

  /* ЦВЕТ ФИЛЬТРА = СТОРОНА. Красный — про врага (против героя, враг купил),
     зелёный — про себя (вместе с, купил): подпись, обводка чипа и подсветка
     в строке матча говорят одно и то же одним цветом. */
  :where(body.p-hero) .hxmu-vs.foe .hxmu-vsl {color:var(--enred);}
  :where(body.p-hero) .hxmu-vs.ally .hxmu-vsl {color:var(--ok);}
  :where(body.p-hero) .hxmu-vs.foe .hxmu-pick {border-color:var(--enred); box-shadow:0 0 0 1px var(--rsoft-a18);}
  :where(body.p-hero) .hxmu-vs.ally .hxmu-pick {border-color:var(--ok); box-shadow:0 0 0 1px var(--leaf-a18);}

  /* КТО КУПИЛ: искомый предмет отдельной строкой ПОД портретом его владельца —
     поверх портрета он был мелким и спорил с самим героем. Свой — зелёный,
     вражеский — красный. */
  :where(body.p-hero) .hxmu-hi {display:block; width:30px; height:22px; border-radius:4px; overflow:hidden;
        border:1.5px solid var(--enred); background:var(--bg);}
  :where(body.p-hero) .hxmu-hi.us {border-color:var(--ok);}
  :where(body.p-hero) .hxmu-hi img {width:100%; height:100%; object-fit:cover; display:block;}
  /* найденный предмет в инвентаре строки — зелёной рамкой, чтобы не искать глазами */
  :where(body.p-hero) .hxmu-b6 img.hit {outline:1.5px solid var(--ok); outline-offset:-1px; border-radius:3px;}
  /* та же метка в разборе: на оси покупок, в старте и в итоговом инвентаре */
  /* искомый фильтром предмет — заметным свечением, а не тонкой линией */
  :where(body.p-hero) .hxti.hit {outline:2px solid var(--ok); outline-offset:1px; border-radius:5px;
        box-shadow:0 0 10px var(--grn-a55);}
  :where(body.p-hero) .hxti.hitfoe {outline:2px solid var(--enred); outline-offset:1px; border-radius:5px;
        box-shadow:0 0 10px var(--nw-a55);}
  /* метка «враг купил искомое» на таймлайне разбора: крупные портрет купившего
     и иконка предмета на красной плашке — бросается в глаза */
  :where(body.p-hero) .hxtime-ev.itbuy .hxtime-ico {display:inline-flex; align-items:center; gap:3px;
        background:var(--nw-a16); border:1px solid var(--enred); border-radius:7px;
        padding:2px 5px; box-shadow:0 0 10px var(--nw-a40);}
  :where(body.p-hero) .hxtime-ev.itbuy .hxtime-ico img {width:24px; height:24px; object-fit:contain;}
  :where(body.p-hero) .hxtime-ev.itbuy .hxtime-ico img.hf {width:36px; height:21px; object-fit:cover;
        border-radius:4px;}
  :where(body.p-hero) .hxtime-ev.itbuy .cap {font-weight:700;}

  /* иконка предмета шире и ниже героической (88x64 у Valve) — свой размер, иначе cover срежет ей верх и низ */
  :where(body.p-hero) .hxmu-di.it img {width:29px; height:21px;}
  :where(body.p-hero) .hxmu-pick.it img {width:33px; height:24px;}

  :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 var(--amb-a18);
        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;}

  :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;}

  :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:var(--line-hover-2); 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:var(--acc-a07);}

  :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:var(--w-a02);}
  :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);}

  :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;}

  :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:var(--line-hover-2);}

  :where(body.p-hero) .hxmu-r1 {display:grid; grid-template-columns:30px 56px minmax(0,1fr) 58px 350px 310px 204px 28px 92px;
        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);}

  :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:var(--leaf-a13); border:1px solid var(--leaf-a50);}
  :where(body.p-hero) .hxmu-wl.l {color:var(--enred); background:var(--rsoft-a13); border:1px solid var(--rsoft-a50);}
  :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 {display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0;}
  :where(body.p-hero) .hxmu-nk .nk1 {font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  :where(body.p-hero) .hxmu-nk .nk2 {font-size:11px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  :where(body.p-hero) .hxmu-kda {font-size:12.5px; color:var(--text-kda); 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;}

  :where(body.p-hero) .hxmu-s5 {display:flex; gap:4px; padding:3px 4px; border-radius:5px;}
  :where(body.p-hero) .hxmu-s5.rad {background:var(--leaf-a10);}
  :where(body.p-hero) .hxmu-s5.dire {background:var(--rsoft-a10);}
  :where(body.p-hero) .hxmu-s5 {align-items:flex-start;}
  :where(body.p-hero) .hxmu-hp {display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;}
  :where(body.p-hero) .hxmu-hp img {width:28px; height:19px; object-fit:cover; border-radius:3px; display:block; opacity:.82;}
  :where(body.p-hero) .hxmu-hp:hover img {opacity:1; outline:1px solid var(--brand); outline-offset:1px;}
  :where(body.p-hero) .hxmu-item.swapping {opacity:.55;}
  :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);}

  :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 var(--amb-a55); outline-offset:1px;}

  :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[data-tti] {cursor:help;}
  :where(body.p-hero) .hxmu-bld img {width:25px; height:20px; object-fit:contain; display:block;}
  :where(body.p-hero) .hxmu-b6 {flex-wrap:wrap;}
  :where(body.p-hero) .hxmu-bld .arw {color:var(--text-steel); 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:var(--n500); font-size:11px;}

  :where(body.p-hero) .hxmu-ab {display:flex; align-items:center; justify-content:flex-start;}
  :where(body.p-hero) .hxmu-abl {display:flex; gap:2px; flex-wrap:nowrap;}
  :where(body.p-hero) .hxmu-a1 {width:16px; height:16px; border-radius:3px; overflow:hidden; display:block;
        background:var(--n800); flex:0 0 auto;}
  :where(body.p-hero) .hxmu-a1 img {width:100%; height:100%; object-fit:cover; display:block;}
  :where(body.p-hero) .hxmu-a1[data-tta] {cursor:help;}
  /* талант — десятой ячейкой, отбит зазором: уровень взятия живёт в разборе */
  :where(body.p-hero) .hxmu-a1.tal {margin-left:3px; background:var(--n800);}
  :where(body.p-hero) .hxmu-a1.tal img {object-fit:contain; padding:1px;}
  :where(body.p-hero) .hxmu-a1.no {background:transparent; border:1px dashed var(--line-dash);}
  :where(body.p-hero) .hxmu-ab .none {color:var(--n500); font-size:11px;}

  :where(body.p-hero) .hxmu-cp {color:var(--text-faint); 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;}

  :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:var(--n900); 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);}
  /* фильтр исхода линии: стрелка тренда + счётчик в одну строку с текстом */
  :where(body.p-hero) #hxmu-lane .hxfc {display:inline-flex; align-items:center; gap:5px;}
  :where(body.p-hero) #hxmu-lane .hxfc .rico {margin-right:0;}
  :where(body.p-hero) #hxmu-lane .hxfc[data-v="won"].on {color:var(--ok); border-color:var(--ok);}
  :where(body.p-hero) #hxmu-lane .hxfc[data-v="lost"].on {color:var(--err2); border-color:var(--err2);}
  :where(body.p-hero) #hxmu-lane .hxfc[data-v="lostwon"].on {color:var(--ok); border-color:var(--ok);}

  :where(body.p-hero) .hxmu-item.open > .hxmu-row {border-radius:9px 9px 0 0; border-color:var(--line-hover-2); margin-bottom:0; background:var(--panel2);}
  /* Победа/поражение видно с края списка, а не только по бейджу W/L: полоса 3px
     теми же цветами, что у сегментов разбора на главной. Стоит ПОСЛЕ правил
     наведения и раскрытия — они задают border-color целиком и иначе стирают её. */
  :where(body.p-hero) .hxmu-item .hxmu-row.w {border-left:3px solid var(--ok);}
  :where(body.p-hero) .hxmu-item .hxmu-row.l {border-left:3px solid var(--enred);}
  :where(body.p-hero) .hxmu-x {border:1px solid var(--line-hover-2); 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:var(--n900); 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 52px minmax(0,1fr) 54px 318px 268px 182px 26px 86px;}
    :where(body.p-hero) .hxmu-hp img {width:25px; height:17px;}
    :where(body.p-hero) .hxmu-bld img {width:22px; height:18px;}
    :where(body.p-hero) .hxmu-a1 {width:14px; height:14px;}}
  @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-dr, :where(body.p-hero) .hxmu-r1 > .hxmu-bld,
    :where(body.p-hero) .hxmu-r1 > .hxmu-ab {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;}}

  /* ===== каркас страницы героя: оглавление, заголовки-главы, полосы, чипы ===== */
  /* липкое оглавление; чипы без своей секции убирает скрипт страницы */
  :where(body.p-hero) .hxnav {position:sticky; top:var(--top-h); z-index:30; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
        margin:14px 0 4px; padding:9px 0; background-color:var(--bg);
        background-image:linear-gradient(var(--w-a03), var(--w-a03)); border-bottom:1px solid var(--line);}
  :where(body.p-hero) .hxnav a {font:500 12.5px 'Inter',sans-serif; color:var(--mut); text-decoration:none;
        border:1px solid var(--line); border-radius:999px; padding:4px 12px; white-space:nowrap;
        transition:color .15s, border-color .15s, background-color .15s;}
  :where(body.p-hero) .hxnav a:hover {color:var(--brand); border-color:var(--brand);}
  :where(body.p-hero) .hxnav a.on {color:var(--on-acc); background:var(--brand); border-color:var(--brand); font-weight:600;}
  /* телефон: три ряда чипов съедали экран — одна строка с прокруткой пальцем */
  @media (max-width:640px) {
    :where(body.p-hero) .hxnav {flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
    :where(body.p-hero) .hxnav::-webkit-scrollbar {display:none;}
  }
  :where(body.p-hero) #hxmu, :where(body.p-hero) #hx-counters, :where(body.p-hero) #hx-draft,
  :where(body.p-hero) #hx-items, :where(body.p-hero) #hx-ranks, :where(body.p-hero) #hxmp,
  :where(body.p-hero) #hx-reviews {scroll-margin-top:calc(var(--top-h) + 48px);}

  /* заголовки-главы: страница читается разделами, между главами воздух больше, чем внутри */
  :where(body.p-hero) .hxsec.hxbig {display:flex; align-items:center; gap:10px; font:700 16px 'Oswald',sans-serif;
        text-transform:uppercase; letter-spacing:.06em; color:var(--text); margin:40px 0 12px;}
  :where(body.p-hero) .hxsec.hxbig::after {content:''; flex:1 1 60px; height:1px; background:var(--line);}
  :where(body.p-hero) .hxsec.hxbig small {font:500 11px 'Inter',sans-serif; text-transform:none; letter-spacing:0;
        color:var(--mut); flex:0 0 auto; order:3;}
  :where(body.p-hero) .hxsec.hxbig.inbox {margin:0 0 12px;}
  :where(body.p-hero) .hxbox:has(> .hxsec.hxbig.inbox) {margin-top:40px;}
  :where(body.p-hero) #hxmu > .hxsec:first-child {font:700 16px 'Oswald',sans-serif; letter-spacing:.06em; color:var(--text);}
  :where(body.p-hero) .hxsec.hxmp-hd {font:700 16px 'Oswald',sans-serif; letter-spacing:.06em; color:var(--text);}
  :where(body.p-hero) #hxmp {margin-top:40px;}

  /* заголовки-близнецы контрпиков: кант цветом стороны — красный опасные, зелёный цели */
  :where(body.p-hero) .hxsec.hxside {position:relative; padding-left:11px;}
  :where(body.p-hero) .hxsec.hxside::before {content:''; position:absolute; left:0; top:1px; bottom:1px; width:3px; border-radius:2px;}
  :where(body.p-hero) .hxsec.hxside.foe {color:var(--enred);}
  :where(body.p-hero) .hxsec.hxside.foe::before {background:var(--enred);}
  :where(body.p-hero) .hxsec.hxside.us {color:var(--ok);}
  :where(body.p-hero) .hxsec.hxside.us::before {background:var(--ok);}

  /* полоса доли (драфт и предметы): длину полос глаз сравнивает сам, «×N» — в пузыре */
  :where(body.p-hero) .hxdc-bar {flex:0 0 64px; width:64px; height:8px; background:var(--bg); border-radius:4px;
        overflow:hidden; position:relative; border:1px solid var(--line);}
  :where(body.p-hero) .hxdc-bar i {position:absolute; left:0; top:0; bottom:0; background:var(--blue-mid); border-radius:4px;}
  :where(body.p-hero) .hxiv-bar {flex:1 1 56px; width:auto; min-width:44px;}
  :where(body.p-hero) .hxiv-sh {flex:0 0 auto; font:600 11.5px 'Oswald',sans-serif; color:var(--mut); white-space:nowrap;}

  /* предметы против героя: чипы-пояснения и топ-3 плитками */
  :where(body.p-hero) .hxiv-chips {display:flex; flex-wrap:wrap; gap:4px; margin-top:3px;}
  :where(body.p-hero) .hxiv-chip {display:inline-flex; align-items:center; gap:4px; font:500 10.5px 'Inter',sans-serif;
        color:var(--mut); border:1px solid var(--line); border-radius:6px; padding:0 6px; line-height:16px; white-space:nowrap;}
  :where(body.p-hero) .hxiv-chip .rico {width:13px; height:13px; margin:0;}
  :where(body.p-hero) .hxiv-chip.mech {color:var(--gold); border-color:var(--gold-a40); background:var(--gold-a06);}
  :where(body.p-hero) .hxiv-top3 {display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:10px;}
  /* плитка — сеткой областей: чипы под именем, футер-строка «−N% побед | матчи»
     прижата к низу — плитки одного ряда заканчиваются на одной линии */
  :where(body.p-hero) .hxiv-big {display:grid; grid-template:"ic in q" 1fr "ic wr ml" auto / 52px minmax(0,1fr) 20px;
        column-gap:10px; row-gap:8px; align-items:start; text-align:left; background:var(--bg);
        border:1px solid var(--line-hover-2); border-radius:10px; padding:10px 12px; cursor:pointer;
        color:var(--text); font:inherit; min-width:0; transition:border-color .15s, transform .14s;}
  :where(body.p-hero) .hxiv-big:hover {border-color:var(--mut);}
  :where(body.p-hero) .hxiv-big:active {transform:scale(.98);}
  :where(body.p-hero) .hxiv-big.on {border-color:var(--brand);}
  :where(body.p-hero) .hxiv-bigic {grid-area:ic; width:52px; height:38px; border-radius:8px; object-fit:cover; border:1px solid var(--line);}
  :where(body.p-hero) .hxiv-big .hxiv-in {grid-area:in; min-width:0;}
  :where(body.p-hero) .hxiv-big .hxiv-in b {display:block; font:600 13px 'Inter',sans-serif;}
  :where(body.p-hero) .hxiv-big .hxiv-in small {color:var(--mut); font-size:11.5px;}
  :where(body.p-hero) .hxiv-big .hxiv-q {grid-area:q; justify-self:end;}
  :where(body.p-hero) .hxiv-big .hxiv-wr {grid-area:wr; justify-self:start; align-self:end;}
  :where(body.p-hero) .hxiv-big .hxiv-ml {grid-area:ml; justify-self:end; align-self:end; margin:0;}
  @media (max-width:900px) { :where(body.p-hero) .hxiv-top3 {grid-template-columns:1fr;} }

  /* строки предметов — жёсткая сетка: полосы долей стоят ровной колонкой */
  :where(body.p-hero) #hxiv-tr .hxiv-row {display:grid;
        grid-template-columns:34px minmax(0,1fr) 112px 76px 96px 18px max-content;
        column-gap:10px; align-items:center;}
  :where(body.p-hero) #hxiv-tr .hxiv-row .hxiv-bar {width:auto; min-width:0;}
  :where(body.p-hero) #hxiv-tr .hxiv-row .hxiv-sh {text-align:right;}
  :where(body.p-hero) #hxiv-tr .hxiv-row .hxiv-wr {justify-self:end;}
  :where(body.p-hero) #hxiv-tr .hxiv-row .hxiv-ml {justify-self:end; margin-left:0;}
  :where(body.p-hero) .hxiv-wr.empty {border:0; padding:0;}
  @media (max-width:760px) {
    :where(body.p-hero) #hxiv-tr .hxiv-row {grid-template-columns:34px minmax(0,1fr) 76px 96px 18px;}
    :where(body.p-hero) #hxiv-tr .hxiv-row .hxdc-bar {display:none;}
    :where(body.p-hero) #hxiv-tr .hxiv-row .hxiv-ml {grid-column:2 / -1;}
  }

  /* колонки драфта — та же сетка: полоса и «?» колонкой, не плавают за текстом;
     первая колонка = 45px, как портрет img.mini — уже колонка наезжала именем */
  :where(body.p-hero) .hxdc-grid .hxrow {display:grid;
        grid-template-columns:45px minmax(0,1fr) max-content 72px 18px; column-gap:10px; align-items:center;}
  :where(body.p-hero) .hxdc-grid .hxrow .hxdc-bar {width:auto; min-width:0;}

  /* развёрнутый разбор: лаймовая кромка отделяет карточку от списка,
     полоса «свернуть» едет следом — не искать её в самом низу */
  :where(body.p-hero) .hxmu-x {border-left:3px solid var(--brand);}
  :where(body.p-hero) .hxmu-foldbar {position:sticky; bottom:10px; z-index:6; background:var(--panel2);
        box-shadow:0 4px 16px var(--k-a45);}

  /* панель карты: подзаголовки второго яруса и кнопка «точно» */
  :where(body.p-hero) .hxwd-ctl .lbl.sub {font:600 10.5px 'Inter',sans-serif; color:var(--mut); text-transform:uppercase;
        letter-spacing:.05em; margin-top:8px;}
  :where(body.p-hero) .hxmp-finebtn {display:inline-flex; align-items:center; gap:4px; font:500 12px 'Inter',sans-serif;
        color:var(--mut); background:transparent; border:1px dashed var(--line); border-radius:8px; padding:3px 10px; cursor:pointer;
        transition:color .15s, border-color .15s;}
  :where(body.p-hero) .hxmp-finebtn:hover {color:var(--text); border-color:var(--line-hover-2);}
  :where(body.p-hero) .hxmp-finebtn.on {color:var(--brand); border-color:var(--brand);}
  :where(body.p-hero) .hxmp-finebtn.on .ar {display:inline-block; transform:rotate(180deg);}
  :where(body.p-hero) .hxmp-fine {display:contents;}
  :where(body.p-hero) .hxmp-fine[hidden] {display:none;}

html:has(body.p-catalog) { overflow-x:hidden; }

  body:where(.p-catalog) { --bg:var(--n900); --card:var(--n800); --line:var(--n700); --txt:var(--n100); --mut:var(--n300);
          --err:var(--bad); --err2:var(--err-bright);

          --brand:var(--acc); --brand2:var(--acc-hi); --onbrand:var(--on-acc-deep); }
  :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; }

  :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; }

  @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; }

  :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; }

  :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; }

  :where(body.p-catalog) .fbar select { min-width:118px; padding:8px 10px; border-radius:8px; border:1px solid var(--line);
                 background:var(--n900); 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; }

  :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:var(--n900); 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:var(--line-hover); }
  :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:var(--n850); border:1px solid var(--n600);
        border-radius:10px; padding:4px; min-width:100%; width:max-content; display:flex; flex-direction:column;
        box-shadow:0 10px 26px var(--k-a45); }
  :where(body.p-catalog) .psel-l[hidden], :where(body.p-catalog) .hsel-p[hidden] { display:none !important; }
  :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:var(--w-a06); }
  :where(body.p-catalog) .psel-l .rico { margin-right:0; }
  :where(body.p-catalog) .pselc { margin-left:auto; padding-left:10px; color:var(--text-faint); 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:var(--n900); 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; }

  @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; }}

  @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; }}

  @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; }}

  @media (hover:hover) and (pointer:fine) {
    :where(body.p-catalog) .fbar { scrollbar-width:thin; scrollbar-color:var(--line-hover) 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:var(--line-hover); border-radius:4px; }}

  :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; }}

  :where(body.p-catalog) .vid { background:var(--card); border:1px solid var(--line); border-radius:14px;
         padding:18px; overflow-wrap:anywhere; }

  :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; }}

  @media (max-width:640px) { :where(body.p-catalog) .catstat span { display:block; margin-top:2px; }}

  :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; }

  :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); }

  :where(body.p-catalog) .ply { position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
         background:var(--ink-black); 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; }

  :where(body.p-catalog) .ply .pbtn span { background:var(--acc-a92); 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; }

  :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; }

  :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 var(--k-a55);
                     transform:translate(var(--mx, 0px), var(--my, 0px)); transition:none; }

  :where(body.p-catalog) .ply .minidrag { display:none; }

  :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; }
  :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:var(--n750); 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, var(--bad)); color:var(--err, var(--bad)); }
  :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; }

  :where(body.p-catalog) .pvbdg { position:absolute; font-size:11px; line-height:1; padding:4px 8px; border-radius:7px;
           background:var(--ink-a85); 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:var(--grn-a40); }
  :where(body.p-catalog) .vid.viewed .pvseen { display:block; }

  :where(body.p-catalog) .pvcont { bottom:10px; left:8px; top:auto; pointer-events:none;
            background:var(--pit-a95); border-color:var(--w-a22);
            color:var(--n0); 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:var(--k-a60); 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:var(--ink-a82); 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); }

  :where(body.p-catalog) .tzbox video { position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--ink-black); cursor:pointer; }

  :where(body.p-catalog) .tz-dim { position:absolute; inset:0; z-index:2; background:var(--n950-a55);
            opacity:0; transition:opacity .2s ease-in-out; pointer-events:none; }
  :where(body.p-catalog) .tzbox.atstart:not(.done) .tz-dim { opacity:1; }

  :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:var(--n0); font:600 14px/1.4 'Inter',sans-serif; text-shadow:0 1px 3px var(--k-a70); }
  :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:var(--ink-a93); }
  :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); }

  :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:var(--acc-a92); 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, var(--deep-a90) 0%, var(--deep-a00) 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:var(--n0); 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:var(--w-a28);
             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:var(--w-a30); }
  :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 var(--k-a50); }
  :where(body.p-catalog) .tz-time { color:var(--n0); font:600 12px 'Inter',sans-serif; white-space:nowrap; font-variant-numeric:tabular-nums; }

  :where(body.p-catalog) .tz-ratewrap { position:relative; display:inline-flex; }
  :where(body.p-catalog) .tz-rate { background:transparent; border:0; color:var(--n0); 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:var(--n850); border:1px solid var(--line); border-radius:9px; padding:5px;
             box-shadow:0 8px 24px var(--k-a50); 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:var(--w-a08); }
  :where(body.p-catalog) .tz-rates button.on { color:var(--onbrand); background:var(--brand); }

  :where(body.p-catalog) .tz-cc { background:transparent; border:1px solid var(--w-a50); color:var(--n0); 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:var(--w-a35); 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 var(--n900); cursor:pointer; }
  :where(body.p-catalog) .tz-vol::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--brand);
            border:2px solid var(--n900); cursor:pointer; }

  :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 var(--k-a60);
             border:1px solid var(--line); transform:translate(var(--tzx,0px), var(--tzy,0px)); }

  :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:var(--ink-a82); color:var(--n0); border:1px solid var(--line);
             font-size:13px; line-height:1; }
  :where(body.p-catalog) .tzbox.tzfloat .tz-close:hover { border-color:var(--err, var(--bad)); color:var(--err, var(--bad)); }

  :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 var(--w-a80); border-top:2px solid var(--w-a80); }
  @media(max-width:640px) { :where(body.p-catalog) .tz-intro { padding:30px 12px 18px; }
                           :where(body.p-catalog) .tz-introt { font-size:13px; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; }
                           :where(body.p-catalog) .tz-cta-t { font-size:14px; }
                           :where(body.p-catalog) .tzbox.tzfloat { width:min(var(--tzw,300px), 88vw); }}

  :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:var(--line-hover); }
  :where(body.p-catalog) .secbtn.on { border-color:var(--brand); color:var(--brand); background:var(--acc-a08); }
  :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; }

  :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; }

  :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:var(--n300-a20); }
  :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); }

  :where(body.p-catalog) .vid.viewed { border-color:var(--grn-a35); }
  :where(body.p-catalog) .vid.viewed h3 { opacity:.75; }

  :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); }

  :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:var(--btn-hover-bg); border-color:var(--line-hover); color:var(--n0); }

  @media (max-width:700px) { :where(body.p-catalog) .fbar select { min-width:130px; flex:none; }}

: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; }}

: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); }
html:has(body.p-index) { overflow-x:hidden; }
html:has(body.p-index) { overflow-anchor:none; }

  body:where(.p-index) { --bg:var(--n900); --card:var(--n800); --line:var(--n700); --txt:var(--n100); --mut:var(--n300);
          --err:var(--bad); --err2:var(--err-bright);
          --brand:var(--acc); --brand2:var(--acc-hi); --onbrand:var(--on-acc-deep); }
  :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; }

  :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%; }

  :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:var(--grn-a15); color:var(--ok); }
  :where(body.p-index) .badge.free { background:var(--bad-a15); 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:var(--discord); color:var(--on-solid); }

  :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:var(--n900); 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; }

  :where(body.p-index) .searchcard { position:static; border-radius:14px; }

  @keyframes ind-focusGlow {
    0%   { box-shadow:0 0 0 0 var(--acc-a00); }
    12%  { box-shadow:0 0 0 3px var(--acc-a35), 0 0 30px 6px var(--acc-a50); border-color:var(--brand); }
    100% { box-shadow:0 0 0 0 var(--acc-a00); }
  }
  :where(body.p-index) .searchcard.ind-focusGlow { animation:ind-focusGlow 1.9s ease-out; }

  :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; }

  :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:var(--amber); border-color:var(--amber-a55); }

  :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:var(--text-lite-c); }

  :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, var(--acc-hi-a28), 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; }

  :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); }

  :where(body.p-index) .relsect.lockedsec { color:var(--text-lite-c); 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:var(--grn-a45); }
  :where(body.p-index) .lockcard .lline { height:13px; border-radius:7px; filter:blur(4px);
                     background:linear-gradient(90deg,var(--line-lock),var(--n700) 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 var(--n500); 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,var(--line-lock),var(--n700)); }

  :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:var(--n900); 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:var(--line-hover); }
  :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; }

  :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 var(--acc-a18);
     transition:box-shadow .35s ease-in-out, border-color .35s ease-in-out; }

  :where(body.p-index) .layout { display:flex; gap:22px; align-items:flex-start; }
  :where(body.p-index) .layout .main { flex:1; min-width:0; }
  /* z-index панели: sticky сам по себе создаёт слой, и выпадающий список
     героев (z-index внутри) оставался ПОД подвалом — подвал рисовался поверх.
     Положительный слой у самой панели поднимает её вместе со списком. */
  :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; z-index:20; }

  :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; }

  :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:var(--n900); 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:var(--line-hover); }
  :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:var(--n850);
        border:1px solid var(--n600); border-radius:10px; padding:4px; display:flex; flex-direction:column;
        box-shadow:0 10px 26px var(--k-a45); }

  :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:var(--w-a06); }
  :where(body.p-index) .psel-l .fcnt { margin-left:auto; color:var(--text-faint); font-weight:400; }
  :where(body.p-index) .psel .rico { margin-right:0; }

  :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:var(--n900); 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:var(--line-hover); }
  :where(body.p-index) .hsel-p { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:85; background:var(--n850);
        border:1px solid var(--n600); border-radius:10px; padding:6px; box-shadow:0 10px 26px var(--k-a45); }
  :where(body.p-index) .hsel-p[hidden] { display:none !important; }
  :where(body.p-index) .hsel-q { width:100%; background:var(--n900); 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:min(290px, 46vh); overflow:auto; display:flex; flex-direction:column;
        overscroll-behavior:contain; }
  /* портрет героя в строке фильтра: у Valve портреты широкие, поэтому размер
     задаём жёстко и обрезаем по центру — строки списка не должны прыгать */
  :where(body.p-index) .hsel-l .hpic { width:26px; height:15px; flex:none; object-fit:cover;
        border-radius:3px; opacity:.95; }
  :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:var(--w-a06); }
  :where(body.p-index) .hsel-l .hgrp { padding:6px 10px 2px; font:600 10px 'Inter',sans-serif; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
  :where(body.p-index) .hsel-l .fcnt { margin-left:auto; color:var(--text-faint); 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:var(--line-hover); }

  :where(body.p-index) .fchip.on { border-color:var(--brand); color:var(--brand); background:var(--acc-a08); }

  :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, var(--acc-deep), var(--brand));
                 transition:width .25s linear; }

  :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,var(--stripe-dark) 0 5px,var(--n800) 5px 10px); }

  :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:var(--text-dim-b); }
  :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; }}

  :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:var(--n900); color:var(--txt); font:13.5px 'Inter',sans-serif; }

  :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:var(--line-hover); 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:var(--acc-a08);
           cursor:pointer; transition:all .15s; max-width:100%; }
  :where(body.p-index) .chipx:hover { background:var(--acc-a18); 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:var(--btn-hover-bg); border-color:var(--line-hover); color:var(--n0); }
  :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:var(--n900); 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); }

  :where(body.p-index) .pair { display:block; padding:12px; border:1px solid var(--line);
          border-radius:14px; background:var(--w-a02); }
  :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:var(--grn-a06); border:1px dashed var(--grn-a45); 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:var(--grn-a13); 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:var(--red-a08); 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 var(--red-a45); border-left:4px solid var(--err2);
                background:var(--red-a06); border-radius:10px; }
  :where(body.p-index) .cgood { cursor:pointer; border:1px solid var(--grn-a45); border-left:4px solid var(--ok);
           background:var(--grn-a06); 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); }

  :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; }

  :where(body.p-index) .plwrap { position:relative; }

  :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 var(--k-a55);
                        transform:translate(var(--mx, 0px), var(--my, 0px)); transition:none; }

  :where(body.p-index) .plwrap .minidrag { display:none; }

  :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; }

  :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:var(--n750); 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; }

  :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); }

  :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); }

  :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); }

  @media (max-width: 920px) { :where(body.p-index) .layout { flex-direction:column; align-items:stretch; }

    :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; }

    :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; }

    :where(body.p-index) .searchcard { position:static; border-radius:14px; transform:none !important; }}

  :where(body.p-index) #searchFab { position:fixed; right:16px; bottom:16px; z-index:80; width:48px; height:48px;
               border-radius:50%; background:var(--n700); color:var(--txt); font-size:20px;
               border:1px solid var(--line-hover); display:none; align-items:center; justify-content:center;
               cursor:pointer; box-shadow:0 8px 24px var(--k-a55); opacity:.92; }
  :where(body.p-index) #searchFab:hover { border-color:var(--n500); opacity:1; }

  :where(body.p-index) .exrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
  :where(body.p-index) .smoderow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
  :where(body.p-index) .smode-lbl { color:var(--mut); font-size:12.5px; }
  :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:var(--line-hover); color:var(--txt); }

  :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:18px 0 8px; }
  :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:var(--w-a03); }
  :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; }

  :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; }
  :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); }

  :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:var(--w-a03); }
  :where(body.p-index) .stxr + .stxr { border-top:1px solid var(--w-a05); }

  :where(body.p-index) .stxpic { display:block; width:42px; height:24px; border-radius:4px;
            background:var(--w-a04); 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:var(--w-a06); }
  :where(body.p-index) .stxbw::before { content:''; position:absolute; left:50%; top:-2px; bottom:-2px;
                   width:1px; background:var(--w-a22); }
  :where(body.p-index) .stxbw i { position:absolute; top:0; bottom:0; border-radius:3px; }

  @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; }}

  /* строка свежей про-игры: карточка, исход — цветной кромкой и буквой */
  :where(body.p-index) .stxrg { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px;
           padding:9px 12px; border:1px solid var(--line); border-left:3px solid var(--err2); border-radius:10px; }
  :where(body.p-index) .stxrg.w { border-left-color:var(--ok); }
  :where(body.p-index) .stxrg.go { cursor:pointer; }
  :where(body.p-index) .stxrg.go:hover { background:var(--w-a04); }
  :where(body.p-index) .stxrgwl { flex:0 0 auto; width:16px; text-align:center; font:700 14px 'Oswald',sans-serif; color:var(--err2); }
  :where(body.p-index) .stxrg.w .stxrgwl { color:var(--ok); }
  :where(body.p-index) .stxrga { font-size:11px; color:var(--mut); white-space:nowrap; }
  :where(body.p-index) .stxrgk { font-size:11.5px; color:var(--mut); white-space:nowrap; }
  :where(body.p-index) .stxrgv img { width:26px; height:16px; border-radius:3px; object-fit:cover; vertical-align:-3px; margin:0 4px; }
  :where(body.p-index) .stxflt { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:20px;
           padding:2px 10px; font:500 11.5px 'Inter',sans-serif; color:var(--mut); cursor:pointer;
           text-transform:none; letter-spacing:0; background:transparent; }
  :where(body.p-index) .stxflt.on { border-color:var(--acc-line); color:var(--txt); background:var(--acc-soft); }
  :where(body.p-index) .stxflt:hover { border-color:var(--line-hover); }

  :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:var(--grn-a15); color:var(--ok); }
  :where(body.p-index) .stxrgw.lose { background:var(--bad-a15); 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); }

  :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); }

  @media (max-width:560px) { :where(body.p-index) .stxrg { gap:6px; padding:7px 4px; } :where(body.p-index) .stxrgi { flex:1 0 100%; }}

  /* ЧТО ПОКУПАЮТ ПРОШНИКИ: три стадии — три блока в ряд, доля матчей — полосой.
 Цвет верхней кромки блока = стадия: старт серый, ранняя синяя, кор лаймовый. */
  :where(body.p-index) .stxbgs { display:grid; gap:10px; margin-top:10px;
            grid-template-columns:repeat(auto-fit, minmax(304px,1fr)); }
  :where(body.p-index) .stxbg { border:1px solid var(--line); border-top:2px solid var(--n500);
            border-radius:12px; padding:9px 12px 7px; background:var(--w-a022); }
  :where(body.p-index) .stxbg.er { border-top-color:var(--info); }
  :where(body.p-index) .stxbg.co { border-top-color:var(--brand); }
  :where(body.p-index) .stxbgt { font:600 12px 'Inter',sans-serif; color:var(--txt);
            text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
  :where(body.p-index) .stxbr { display:grid; align-items:center; gap:8px; padding:3px 6px; margin:0 -6px;
            border-radius:6px; grid-template-columns:28px minmax(0,1fr) minmax(34px,64px) 36px 48px; }
  :where(body.p-index) .stxbr.not { grid-template-columns:28px minmax(0,1fr) minmax(34px,64px) 36px; }
  :where(body.p-index) .stxbr:hover { background:var(--w-a04); }
  :where(body.p-index) .stxbr.hd, :where(body.p-index) .stxbr.hd:hover { background:none;
            font:600 10px 'Inter',sans-serif; color:var(--mut); text-transform:uppercase;
            letter-spacing:.05em; padding-bottom:5px; margin-bottom:2px; border-bottom:1px solid var(--line);
            border-radius:0; }
  :where(body.p-index) .stxbr.hd span { text-align:right; }
  :where(body.p-index) .stxbr.hd .l2 { grid-column:3 / span 2; }
  :where(body.p-index) .stxbri img { display:block; width:28px; height:20px; border-radius:3px; object-fit:cover; }
  :where(body.p-index) .stxbrn { font:500 13px 'Inter',sans-serif; color:var(--txt);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  :where(body.p-index) .stxbrb { height:6px; border-radius:4px; background:var(--w-a07); overflow:hidden; }
  :where(body.p-index) .stxbrb i { display:block; height:100%; border-radius:4px; background:var(--n400); }
  :where(body.p-index) .stxbg.er .stxbrb i { background:var(--info); opacity:.7; }
  :where(body.p-index) .stxbg.co .stxbrb i { background:var(--brand); opacity:.7; }
  :where(body.p-index) .stxbr.top .stxbrb i { opacity:1; }
  :where(body.p-index) .stxbrp { font:600 13.5px 'Oswald',sans-serif; color:var(--n200); text-align:right; }
  :where(body.p-index) .stxbr.top .stxbrp { color:var(--txt); }
  :where(body.p-index) .stxbrp small { font-size:10px; color:var(--mut); margin-left:1px; }
  :where(body.p-index) .stxbrt { font:600 13.5px 'Oswald',sans-serif; color:var(--n200);
            text-align:right; white-space:nowrap; }
  :where(body.p-index) .stxbrt small { font:400 10px 'Inter',sans-serif; color:var(--mut); margin-left:2px; }
  /* ГОТОВАЯ СБОРКА: иконки через «+» и доля матчей. Первая — самая популярная. */
  :where(body.p-index) .stxset { display:flex; align-items:center; gap:10px; padding:5px 6px; margin:0 -6px;
            border-radius:8px; }
  :where(body.p-index) .stxset + .stxset { margin-top:2px; }
  :where(body.p-index) .stxset:hover { background:var(--w-a04); }
  :where(body.p-index) .stxseti { display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex:1 1 auto; min-width:0; }
  :where(body.p-index) .stxsi { display:inline-flex; align-items:center; gap:6px; }
  :where(body.p-index) .stxsi img { display:block; width:34px; height:24px; border-radius:4px; object-fit:cover;
            border:1px solid var(--line); }
  :where(body.p-index) .stxsi + .stxsi::before { content:'+'; color:var(--mut); font:600 12px 'Inter',sans-serif; }
  :where(body.p-index) .stxsetp { flex:0 0 auto; font:600 15px 'Oswald',sans-serif; color:var(--n200); text-align:right;
            min-width:40px; }
  :where(body.p-index) .stxsetp small { font-size:10px; color:var(--mut); margin-left:1px; }
  :where(body.p-index) .stxset.top .stxsetp { color:var(--txt); }
  :where(body.p-index) .stxbg.co .stxset.top .stxsetp { color:var(--brand); }
  /* ВРАГ ИЗ ЗАПРОСА и уточнение его позиции */
  :where(body.p-index) .stxfoe { margin-top:12px; padding:10px 12px; border:1px solid var(--line);
            border-radius:12px; background:var(--w-a022); }
  :where(body.p-index) .stxfoeh { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13.5px; }
  :where(body.p-index) .stxfoe.miss { border-color:var(--warn-a34); background:var(--warn-soft); }
  :where(body.p-index) .stxfoeh img { width:34px; height:19px; border-radius:3px; object-fit:cover; }
  :where(body.p-index) .stxfoeh b { font-weight:600; color:var(--txt); }
  :where(body.p-index) .stxfoen { color:var(--mut); font-size:12px; }
  :where(body.p-index) .stxfoeq { margin:9px 0 6px; font-size:12.5px; color:var(--mut); }
  :where(body.p-index) .stxfoec { display:flex; gap:7px; flex-wrap:wrap; }
  :where(body.p-index) .stxfoec .stxflt i { font-style:normal; opacity:.55; margin-left:5px; }
  :where(body.p-index) .stxfoef { margin-top:8px; font-size:11.5px; color:var(--mut); }
  @media (max-width:560px) {
    :where(body.p-index) .stxsi img { width:30px; height:21px; }
    :where(body.p-index) .stxsetp { font-size:14px; min-width:36px; }}
  :where(body.p-index) .stxbnote { margin-top:10px; padding:7px 11px; border-radius:9px; font-size:12.5px;
            color:var(--n100); background:var(--warn-soft); border:1px solid var(--warn-a28); }
  @media (max-width:560px) {
    :where(body.p-index) .stxbr { grid-template-columns:24px minmax(0,1fr) minmax(26px,52px) 34px 44px; gap:6px; }
    :where(body.p-index) .stxbr.not { grid-template-columns:24px minmax(0,1fr) minmax(26px,52px) 34px; }
    :where(body.p-index) .stxbri img { width:24px; height:17px; }
    :where(body.p-index) .stxbrn { font-size:12.5px; }}
  :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;
              background:transparent; cursor:pointer; }
  :where(body.p-index) .stxghost:hover { border-color:var(--line-hover); }
  :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) .stxles .stxlesn { font:600 11.5px 'Oswald',sans-serif; color:var(--mut);
            background:var(--w-a07); border-radius:6px; padding:1px 6px; }
  :where(body.p-index) .stxles:hover .stxlesn { color:var(--txt); }

  /* предметный ответ: плитки цифр и ряд кнопок */
  :where(body.p-index) .stxnums { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
  :where(body.p-index) .stxnum { flex:1 1 160px; min-width:150px; border:1px solid var(--line); border-radius:10px;
            padding:10px 12px; background:var(--w-a03); display:flex; flex-direction:column; gap:3px; }
  :where(body.p-index) .stxnum b { font:600 21px 'Oswald',sans-serif; color:var(--txt); line-height:1.1; }
  :where(body.p-index) .stxnum span { font-size:11.5px; color:var(--mut); line-height:1.3; }
  :where(body.p-index) .stxact { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px; }
  :where(body.p-index) .stxact .stxghost { margin-left:0; }
  :where(body.p-index) .stxact .btn { padding:9px 18px; }
  :where(body.p-index) .exchip img { width:26px; height:16px; border-radius:3px; object-fit:cover;
            vertical-align:-3px; margin-right:6px; }
  :where(body.p-index) .stxface { flex:0 0 auto; }
  :where(body.p-index) .stxface img { display:block; width:72px; height:40px; object-fit:cover; border-radius:8px; }

  :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); }

  :where(body.p-index) .segits .segitl { font-size:11.5px; color:var(--mut); }

  body:where(.p-index) { --text:var(--txt); --gold:var(--gold-warm); --panel2:var(--n750); }
  :where(body.p-index) #hxtip {display:none; position:fixed; z-index:90; max-width:340px; background:var(--n850);
         border:1px solid var(--n600); border-radius:10px; padding:11px 13px; box-shadow:0 8px 24px var(--k-a50);
         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:var(--text-tip);}
  :where(body.p-index) #hxtip .tt-a div {margin:1px 0;}
  :where(body.p-index) #hxtip .tt-act {margin-top:7px; background:var(--tipact-a18); border:1px solid var(--line-tip-act); 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:var(--on-solid);}
  /* цвет плашки = её смысл: мана синяя, урон красный, дальность зелёная, КД серое */
  :where(body.p-index) #hxtip .tt-chip.mc {background:var(--blue-chip);}
  :where(body.p-index) #hxtip .tt-chip.cd {background:var(--slab-half); color:var(--text-tip);}
  :where(body.p-index) #hxtip .tt-chip.rng {background:var(--ok-chip);}
  :where(body.p-index) #hxtip .tt-chip.dmg {background:var(--red-chip);}
  :where(body.p-index) #hxtip .tt-d {color:var(--text-tip); margin-top:7px; white-space:normal;}

  :where(body.p-index) #hxtip .tt-n {display:none; margin-top:7px; background:var(--tip-chip-bg); border:1px solid var(--line-tip-n); border-radius:7px;
               padding:7px 9px; color:var(--text-lite-b);}
  :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:var(--text-faint); 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;}

  :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; }

  :where(body.p-index) .spendhint { display:none; margin-top:8px; font-size:13px; line-height:1.5; color:var(--txt);
               background:var(--gdeep-a08); border:1px solid var(--gdeep-a35);
               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, :where(body.p-index) .searchcard.compact .smoderow { 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; }

  :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; }

  :where(body.p-index) .showstrip { display:flex; gap:9px; padding:11px 16px; margin-bottom:12px; align-items:flex-start;
               background:var(--acc-a045); border:1px solid var(--n750); 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; }

  :where(body.p-index) .digsw { display:flex; align-items:center; gap:10px; margin-top:12px; padding:11px 12px;
           background:var(--n900); 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:var(--n300); 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:var(--on-acc-deep); }
  :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; }

  :where(body.p-index) .sgroup { border-left:3px solid var(--line-soft); padding:2px 0 2px 10px; }

  :where(body.p-index) .slabel { font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
            color:var(--mut); margin-bottom:6px; }

  :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); }

  :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; }

  :where(body.p-index) .btn-steam { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px;
               background:var(--steam); border:1px solid var(--steam-line); color:var(--on-steam); font-weight:700;
               font-size:14px; text-decoration:none; cursor:pointer; }
  :where(body.p-index) .btn-steam:hover { background:var(--steam-bg-hi); border-color:var(--steam-line-hi); }
  :where(body.p-index) .btn-steam svg { flex:none; }

  :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:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
          min-width:0; }

  :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:var(--slate-a97); 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:var(--text-faint); margin-top:7px; }

  @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

    :where(body.p-index) .exchip { padding:3px 8px; font-size:11.5px; }
    :where(body.p-index) .spend { font-size:11.5px; }}

  @media (max-width:365px) {
    :where(body.p-index) .exchip { padding:3px 7px; font-size:11px; }
    :where(body.p-index) .spend { font-size:10.5px; }}

  @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; }}

  /* витрина разборов ошибок (чипы) — первый экран поиска */
  :where(body.p-index) .chp-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  :where(body.p-index) .chp-title { font:600 18px/1.25 'Oswald',sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--txt); }
  :where(body.p-index) .chp-sub { margin-top:5px; color:var(--mut); font-size:13.5px; }
  :where(body.p-index) .chp-free { display:inline-flex; align-items:center; padding:6px 13px; border-radius:999px; background:var(--acc-soft); border:1px solid var(--acc-line); color:var(--brand); font:600 12.5px 'Inter',sans-serif; white-space:nowrap; }
  :where(body.p-index) .chp-tabs { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
  :where(body.p-index) .chp-tab { display:inline-flex; align-items:center; gap:7px; padding:7px 15px; border-radius:999px; background:transparent; border:1px solid var(--line); color:var(--mut); font:600 13px 'Inter',sans-serif; cursor:pointer; transition:border-color .15s, color .15s; }
  :where(body.p-index) .chp-tab .rico { width:15px; height:15px; border-radius:3px; margin:0; }
  :where(body.p-index) .chp-tab:hover { border-color:var(--n600); color:var(--txt); }
  :where(body.p-index) .chp-tab.on { background:var(--brand); border-color:var(--brand); color:var(--onbrand); }
  :where(body.p-index) .chp-tab.on .rico { filter:brightness(0); }
  :where(body.p-index) .chp-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:12px; }
  :where(body.p-index) .chp-p { position:relative; display:flex; align-items:center; gap:8px; width:100%; padding:9px 14px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--txt); font:600 13px/1.35 'Inter',sans-serif; cursor:pointer; text-align:left; transition:border-color .15s; }
  :where(body.p-index) .chp-p .chp-t { min-width:0; }
  :where(body.p-index) .chp-stg { display:flex; align-items:center; gap:8px; margin-top:22px; }
  :where(body.p-index) .chp-stg .chp-sn { font:600 11px 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); }
  :where(body.p-index) .chp-dot { width:8px; height:8px; border-radius:50%; flex:none; }
  :where(body.p-index) .chp-line { flex:1; height:1px; }
  :where(body.p-index) .chp-p:hover { border-color:var(--brand); }
  :where(body.p-index) .chp-p.mine { border-color:var(--acc-line); }
  :where(body.p-index) .chp-p.lk { background:var(--n850); color:var(--n400); border-color:var(--n750); }
  :where(body.p-index) .chp-p.lk:hover { border-color:var(--n500); }
  :where(body.p-index) .chp-side { margin-left:auto; flex:none; display:inline-flex; align-items:center; }
  :where(body.p-index) .chp-my { margin-left:auto; flex:none; font:700 10.5px 'Inter',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); }
  :where(body.p-index) .chp-tip { position:fixed; z-index:210; max-width:300px; width:max-content; background:var(--n750); color:var(--txt); border:1px solid var(--n600); border-radius:8px; padding:8px 11px; font:600 12.5px/1.5 'Inter',sans-serif; box-shadow:0 6px 20px var(--k-a45); pointer-events:none; }
  /* ответ чипа */
  :where(body.p-index) .chp-back { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px; background:transparent; border:1px solid var(--n600); color:var(--txt); font:600 14px 'Inter',sans-serif; cursor:pointer; }
  :where(body.p-index) .chp-back:hover { border-color:var(--mut); }
  :where(body.p-index) .chp-h1 { margin:22px 0 0; font:600 23px/1.3 'Oswald',sans-serif; color:var(--n0); }
  :where(body.p-index) .chp-coach { margin-top:16px; padding:16px 18px; background:var(--acc-a05); border:1px solid var(--acc-a45); border-radius:14px; line-height:1.6; font-size:15px; }
  :where(body.p-index) .chp-lbl { display:flex; align-items:center; gap:6px; font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:.8px; text-transform:uppercase; color:var(--brand); margin-bottom:7px; }
  :where(body.p-index) .chp-note { margin-top:14px; padding:14px 16px; border:1px solid var(--line); border-left:4px solid var(--s-coach); border-radius:10px; line-height:1.55; }
  :where(body.p-index) .chp-note .chp-lbl { color:var(--s-coach); }
  :where(body.p-index) .chp-note p { margin:8px 0 0; }
  :where(body.p-index) .chp-pair { margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--w-a02); }
  :where(body.p-index) .chp-ok { border:1px solid var(--grn-a45); border-left:4px solid var(--ok); background:var(--grn-a06); border-radius:10px; padding:12px 14px; }
  :where(body.p-index) .chp-bad { margin-top:8px; border:1px solid var(--red-a45); border-left:4px solid var(--err2); background:var(--red-a06); border-radius:10px; padding:12px 14px; }
  :where(body.p-index) .chp-tx { font-size:13.5px; line-height:1.55; }
  :where(body.p-index) .chp-x { display:flex; align-items:center; gap:8px; width:100%; margin-top:10px; padding:8px 12px; background:transparent; border:1px dashed var(--line); color:var(--mut); border-radius:8px; cursor:pointer; font:600 12.5px 'Inter',sans-serif; text-align:left; }
  :where(body.p-index) .chp-x:hover { color:var(--txt); border-color:var(--mut); }
  :where(body.p-index) .chp-x.open { border-style:solid; border-color:var(--n600); color:var(--txt); }
  :where(body.p-index) .chp-x svg { transition:transform .15s; }
  :where(body.p-index) .chp-x.open svg { transform:rotate(90deg); }
  :where(body.p-index) .chp-wait { margin-top:10px; font-size:12.5px; color:var(--n400); }
  :where(body.p-index) .chp-prog { margin-top:8px; height:4px; border-radius:2px; background:var(--n700); overflow:hidden; }
  :where(body.p-index) .chp-prog i { display:block; height:100%; width:0; background:var(--ok); border-radius:2px; transition:width .25s linear; }
  /* плеер момента внутри чипов: правило .result сюда не доставало, и ролик рисовался ютубовским 640x360 — полоса момента шла шире него */
  :where(body.p-index) .ctrwrap iframe { display:block; width:100%; height:auto; aspect-ratio:16/9; margin:0; border:0; border-radius:10px; }
  :where(body.p-index) .chp-fullv { display:inline-flex; align-items:center; gap:5px; margin-top:10px; padding:2px 0; background:transparent; border:0; color:var(--mut); font:600 12.5px 'Inter',sans-serif; cursor:pointer; }
  :where(body.p-index) .chp-fullv:hover { color:var(--txt); }
  :where(body.p-index) .chp-bhead { margin-top:28px; font:600 18px/1.25 'Oswald',sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--txt); }
  :where(body.p-index) .chp-bgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; margin-top:14px; }
  :where(body.p-index) .chp-bcard { display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; color:var(--txt); text-decoration:none; transition:border-color .15s; }
  :where(body.p-index) .chp-bcard:hover { border-color:var(--n600); }
  :where(body.p-index) .chp-bimg { position:relative; display:block; aspect-ratio:16/9; background:var(--n850) center/cover no-repeat; }
  :where(body.p-index) .chp-blk { position:absolute; right:8px; top:8px; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px; background:var(--n950-a72); color:var(--n200); }
  :where(body.p-index) .chp-btit { display:block; padding:10px 12px 0; font:600 13.5px/1.4 'Inter',sans-serif; }
  :where(body.p-index) .chp-bopen { display:inline-flex; align-items:center; gap:6px; padding:8px 12px 12px; color:var(--mut); font:600 12.5px 'Inter',sans-serif; }
  :where(body.p-index) .chp-bcard:hover .chp-bopen { color:var(--txt); }
  /* карточка «Разобрано полностью» — кнопка: ролик открывается прямо тут, а не в Базе знаний */
  :where(body.p-index) button.chp-bcard { width:100%; padding:0; font:inherit; text-align:left; cursor:pointer; }
  :where(body.p-index) .chp-bcard.on { border-color:var(--brand); }
  :where(body.p-index) .chp-bcard.on .chp-bopen { color:var(--brand); }
  :where(body.p-index) .chp-v { margin-top:10px; }
  :where(body.p-index) .chp-v video { display:block; width:100%; aspect-ratio:16/9; border-radius:10px; border:1px solid var(--line); background:var(--ink-black); }
  @media (max-width:720px) {
    :where(body.p-index) .chp-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
    :where(body.p-index) .chp-tab { flex:none; }
    :where(body.p-index) .chp-grid { grid-template-columns:none; grid-template-rows:repeat(2, auto); grid-auto-flow:column; justify-content:flex-start; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
    :where(body.p-index) .chp-p { width:max-content; max-width:290px; }
    :where(body.p-index) .chp-p .chp-t { white-space:normal; }
    :where(body.p-index) .chp-h1 { font-size:19px; }
    :where(body.p-index) .chp-v { margin-left:-14px; margin-right:-14px; }
    :where(body.p-index) .chp-v video { border-radius:0; border-left:0; border-right:0; }
    :where(body.p-index) .chp-bgrid { grid-template-columns:1fr; }}
html:has(body.p-coaching) { overflow-x:clip; }

  body:where(.p-coaching) {
    --brand:var(--acc); --bg:var(--n900); --panel:var(--n800); --panel2:var(--n750);
    --text:var(--n100); --muted:var(--n300); --line:var(--n700); --err:var(--bad);

    --err2:var(--err-bright);

    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:var(--on-acc-deep); --brand2:var(--acc-hi);
  }
  :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; }
  :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}

  :where(body.p-coaching) .flash {background:var(--acc-soft); 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}}

  :where(body.p-coaching) .bonusbar {background:var(--acc-soft); border:1px solid var(--brand);
         border-radius:10px; padding:10px 14px; font-weight:600}

  :where(body.p-coaching) .bonuspill {margin-left:auto; display:inline-flex; align-items:center; gap:6px;
         flex-wrap:wrap; background:var(--acc-soft); 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)}

  :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}

  @keyframes coa-focusGlow {
    0%   { box-shadow:0 0 0 0 var(--acc-a00); }
    12%  { box-shadow:0 0 0 3px var(--acc-a35), 0 0 30px 6px var(--acc-a50); }
    100% { box-shadow:0 0 0 0 var(--acc-a00); }
  }
  :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}

  :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}

  :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:var(--n900); 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)}

    :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}

  :where(body.p-coaching) .tag.on {color:var(--brand); background:var(--acc-a08); border-color:var(--acc-a45)}
  :where(body.p-coaching) .tag.warn {color:var(--n900); background:var(--err); border-color:var(--err)}
  /* Переключатель «диагностика / занятие». Свой фон обязателен: .tag фона не
     задаёт, и общее правило button красило НЕвыбранную кнопку сплошным лаймом —
     кричал ровно тот пункт, который не выбран. Лайм тут один, на выбранном. */
  :where(body.p-coaching) .dg-m {background:var(--panel2); color:var(--muted); border:1px solid var(--line)}
  :where(body.p-coaching) .dg-m:hover {color:var(--text); border-color:var(--brand)}
  :where(body.p-coaching) .dg-m.on {background:var(--brand); color:var(--onbrand); border-color:var(--brand)}
  :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}

  :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:var(--acc-a08)}

  :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:var(--acc-a06)}
  :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}

  :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}

                @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:var(--n900); 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}

  :where(body.p-coaching) .rk-ready {display:inline-block; margin-left:8px; font-size:12px; font-weight:700;
       color:var(--brand); border:1px solid var(--acc-a45);
       background:var(--acc-a08); 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, var(--acc-hi-a55), 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}

  :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:var(--acc-a07)}
  :where(body.p-coaching) .pill[onclick]:active {transform:scale(.96)}

  :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)}

  :where(body.p-coaching) .stu .pill b {display:inline-block}

  :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:var(--acc-a45); box-shadow:0 12px 34px var(--k-a45);
       transform:translateY(-2px)}
  :where(body.p-coaching) .stu[onclick]:hover .nick {color:var(--brand)}

  :where(body.p-coaching) .rv-under {margin:-4px 0 14px; padding:10px 14px; border:1px solid var(--acc-a40);
    background:var(--acc-a05); 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}

  :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, var(--acc-a13), var(--acc-a02));
       border-top:3px solid var(--brand); border-bottom:1px solid var(--line)}

  :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:var(--n800); 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 var(--k-a55); white-space:normal}

  :where(body.p-coaching) .tsk .txt {cursor:pointer}

  :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}

  :where(body.p-coaching) .cts-f {position:relative; display:block}
  :where(body.p-coaching) .cts-f input {width:100%}

  :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:var(--bad-a08); border-radius:8px; padding:7px 11px}

  /* width:max-content — тост лежит прямым ребёнком body, и правило
     body > * { width:100% } растягивало его красной полосой во весь экран. */
  :where(body.p-coaching) .frm-toast {position:fixed; left:50%; transform:translateX(-50%); bottom:26px; z-index:2000;
       width:max-content; max-width:min(520px, calc(100vw - 32px));
       display:flex; align-items:center; gap:8px; text-align:left;
       color:var(--err); border:1px solid var(--bwarm-a45); background:var(--toast-bad-bg); border-radius:10px;
       padding:10px 14px; font-size:13px; font-weight:600; opacity:0; pointer-events:none;
       transition:opacity .3s, transform .3s; box-shadow:0 10px 30px var(--k-a50)}
  :where(body.p-coaching) .frm-toast::before {content:'!'; flex:none; width:18px; height:18px;
       border-radius:50%; background:var(--err); color:var(--n900); font:700 12px/18px 'Inter',sans-serif;
       text-align:center}
  :where(body.p-coaching) .frm-toast.on {opacity:1}
  /* удача — не ошибка: зелёная рамка и галочка вместо красного «!» */
  :where(body.p-coaching) .frm-toast.ok {color:var(--brand); border-color:var(--acc-a45); background:var(--toast-ok-bg)}
  :where(body.p-coaching) .frm-toast.ok::before {content:'✓'; background:var(--brand); font-size:11px}

  :where(body.p-coaching) .les-dim {position:fixed; inset:0; background:var(--void-a72); 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 var(--k-a65)}

  :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}

  :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:var(--gold-a06); border:1px dashed var(--gold-warm);
       border-radius:8px; padding:9px 12px; margin-top:10px; font-size:13.5px}

  :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}

  :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:var(--n900);
          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}

  :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-none { margin:10px 0 14px; padding:10px 14px; border:1px solid var(--n700);
    border-radius:var(--r-md); color:var(--n300); font-size:var(--fs-s); }
:where(body.p-coaching) .gtrk-none b { font:700 20px/1 var(--f-num); color:var(--n0); vertical-align:-2px; }
: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 var(--n0); background:var(--k-a18)}
  :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:var(--w-a04)}
  :where(body.p-coaching) .tsk-in:focus {background:var(--n900); outline:1px solid var(--brand)}
  :where(body.p-coaching) .hw-focus {border-left:3px solid var(--gold-warm); background:var(--gold-a05); font-size:13.5px}

  :where(body.p-coaching) .rc-coach {margin-top:12px; border:1px solid var(--line); border-radius:12px;
       padding:11px 15px; background:var(--acc-a04)}
  :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:var(--gold-warm)}
  :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:var(--gold-warm); margin-top:8px}
  :where(body.p-coaching) .rc-stu {margin-top:22px; border:1px solid var(--line); border-radius:12px;
       padding:12px 16px; background:var(--w-a025)}

  :where(body.p-coaching) .cr-wrap {margin-top:26px; border:1px solid var(--line);
       border-radius:12px; padding:12px 16px; background:var(--acc-a03)}
  :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), var(--acc-a12))}
  :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:var(--w-a045)}
  :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:var(--on-acc-deep); box-shadow:0 0 0 4px var(--acc-a15)}
  :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}

  :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:var(--w-a04)}
  :where(body.p-coaching) .cr-row:hover .cr-play {background:var(--acc-a14)}
  :where(body.p-coaching) .cr-body {flex:1; min-width:0}

  :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:var(--acc-a16); color:var(--brand); border-color:var(--brand)}

  :where(body.p-coaching) .cr-row:hover .cr-play.on {background:var(--acc-a24); 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:var(--n200); line-height:1.45; margin-top:3px}
  :where(body.p-coaching) .cr-vt {font-size:11.5px; color:var(--muted); margin-top:2px}

  :where(body.p-coaching) .seen-clip .cr-seen {display:none; flex:none; align-self:center; margin-left:6px; color:var(--ok); 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:var(--ok); color:var(--ok); background:var(--grn-a10)}

  :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:var(--n100); font-weight:700}

  @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}

    :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}}

  :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:var(--n100)}
  :where(body.p-coaching) .spdchip:active {transform:scale(.96)}
  :where(body.p-coaching) .spdchip.on {background:var(--brand); color:var(--on-acc-deep); border-color:var(--brand); font-weight:600}

  :where(body.p-coaching) .spdchip.on:hover {color:var(--on-acc-deep)}
  :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}

  :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:var(--n900); 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}

  :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:var(--acc-a08)}
  :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 > .grid3 {display:none}
:where(body.p-coaching) .stu-sum {display:grid; grid-template-columns:1fr 1fr 1fr; gap:0;
    margin:10px 0 14px; padding:var(--sp-4) 0; border-top:1px solid var(--n700); border-bottom:1px solid var(--n700)}
:where(body.p-coaching) .stu-sum > div {padding:0 var(--sp-5)}
:where(body.p-coaching) .stu-sum > div:first-child {padding-left:0}
:where(body.p-coaching) .stu-sum > div:last-child {padding-right:0}
:where(body.p-coaching) .stu-sum > div + div {border-left:1px solid var(--n700)}

:where(body.p-coaching) .stu-sum[hidden] {display:none}

:where(body.p-coaching) .les-sum {display:flex; gap:6px; align-items:center; margin-left:auto}
:where(body.p-coaching) .ls-c {display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
    border:1px solid var(--n700); border-radius:var(--r-pill); color:var(--n300);
    font:600 var(--fs-xs)/1.5 var(--f-body); white-space:nowrap}
:where(body.p-coaching) .ls-c b {font:700 var(--fs-s)/1 var(--f-num); color:var(--n100)}
:where(body.p-coaching) .ls-c.ok {color:var(--ok); border-color:var(--ok-a34); background:var(--ok-soft)}
:where(body.p-coaching) .ls-c.ok b {color:var(--ok)}

.csload { display:inline-flex; align-items:center; gap:8px; color:var(--n300); }
.csload::before { content:''; width:14px; height:14px; flex:none; border-radius:50%;
    border:2px solid var(--n600); border-top-color:var(--acc); animation:csspin .7s linear infinite; }
@keyframes csspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .csload::before { animation-duration:2.4s; } }

:where(body.p-coaching) .ss-k {font:600 var(--fs-xs)/1 var(--f-body); letter-spacing:.08em;
    text-transform:uppercase; color:var(--n400); margin-bottom:10px}
:where(body.p-coaching) .ss-v {font-size:var(--fs-b); color:var(--n100); margin-bottom:6px}
:where(body.p-coaching) .ss-v b {font:700 22px/1 var(--f-num); color:var(--n0); vertical-align:-2px}
:where(body.p-coaching) .ss-m {color:var(--n400); font-size:var(--fs-s)}
:where(body.p-coaching) .ss-r {display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
    padding:6px 0; border-bottom:1px solid var(--n700); font-size:var(--fs-s)}
:where(body.p-coaching) .ss-r:last-child {border-bottom:0}
:where(body.p-coaching) .ss-r > span {color:var(--n400)}
:where(body.p-coaching) .ss-r > b {font-weight:600; color:var(--n100); text-align:right}
:where(body.p-coaching) .ss-r a {color:var(--acc); text-decoration:none}

:where(body.p-coaching) .ss-cp {cursor:pointer; border-bottom:1px dashed var(--n600)}
:where(body.p-coaching) .ss-cp:hover {color:var(--acc); border-color:var(--acc-line)}
:where(body.p-coaching) .ss-cp.ok {color:var(--ok); border-color:transparent}
:where(body.p-coaching) .ss-cp.ok::after {content:' ✓'}

:where(body.p-coaching) .pk-fold > summary {list-style:none; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    color:var(--n300); font:600 var(--fs-s)/1 var(--f-body)}
:where(body.p-coaching) .pk-fold > summary::-webkit-details-marker {display:none}
:where(body.p-coaching) .pk-fold > summary:hover {color:var(--n0)}
:where(body.p-coaching) .pk-fold-x::after {content:'развернуть ▾'}
:where(body.p-coaching) .pk-fold[open] .pk-fold-x::after {content:'свернуть ▴'}
@media (max-width:1300px) {
  :where(body.p-coaching) .stu-sum {grid-template-columns:1fr}
  :where(body.p-coaching) .stu-sum > div {padding:var(--sp-3) 0 0}
  :where(body.p-coaching) .stu-sum > div + div {border-left:0; border-top:1px solid var(--n700)}
}
:where(body.p-coaching) form.locked .row-actions {display:none}

  :where(body.p-coaching) form.locked button, :where(body.p-coaching) form.locked a {pointer-events:none; opacity:.55}

  :where(body.p-coaching) .rv-ic {vertical-align:-3px; margin-right:5px}

  :where(body.p-coaching) .rv-sum {font-size:14.5px; color:var(--n100); list-style:none}
  :where(body.p-coaching) .rv-sum::-webkit-details-marker {display:none}

  :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:var(--acc-a16)}
    100% {background:transparent}
  }
  :where(body.p-coaching) details.ed[id^="rev"].revGlow {animation:revGlow 2.2s ease-out}

  @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, var(--n100) 40%, var(--brand) 50%, var(--n100) 60%);
       background-size:280% 100%; background-position:120% 0;
       -webkit-background-clip:text; background-clip:text;
       animation:rvFlash 10s ease-in-out infinite}

  :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:var(--acc-a45)}

  :where(body.p-coaching) details.rvd {margin-top:38px; border:1px solid var(--line); border-radius:12px;
       background:var(--w-a02)}
  :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:var(--w-a04)}
  :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}

  :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}

  :where(body.p-coaching) .ra-back {display:none; position:fixed; inset:0; background:var(--void-a72);
       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 var(--k-a50)}
  :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:var(--w-a05)}
  :where(body.p-coaching) .rvd-m.on {background:var(--acc-a08)}
  :where(body.p-coaching) .rvd-m.on .rvd-tc {background:var(--brand); color:var(--on-acc-deep)}
  :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) {

    :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}
    :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:var(--acc-a07)}
    :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}

    :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}

  :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:var(--bad-a08); border-color:var(--err)}
  :where(body.p-coaching) .mk-rule {background:var(--acc-a07); border-color:var(--brand)}
  :where(body.p-coaching) .mk-prog {background:var(--gold-a08); border-color:var(--gold-warm)}
  :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:var(--on-solid)}
  :where(body.p-coaching) .mk-rule .mk-badge {background:var(--brand); color:var(--n900)}
  :where(body.p-coaching) .mk-prog .mk-badge {background:var(--gold-warm); color:var(--n900)}
  :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 var(--n0); 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 var(--n0); color:var(--text-mute-c); 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:var(--n0)}
  :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:var(--n900); 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); } }

  :where(body.p-coaching) .viewas {position:relative; display:inline-flex; flex:none}
  :where(body.p-coaching) .viewas .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) .viewas .avbtn:hover {border-color:var(--line-hover); color:var(--text)}
  :where(body.p-coaching) .viewas .avbtn .avarr {font-size:9px}
  @media (max-width:720px) { :where(body.p-coaching) .viewas .avbtn .av-cap {display:none} }
  :where(body.p-coaching) .viewas .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 var(--k-a45)}
  :where(body.p-coaching) .viewas.open .avlist {display:flex}
  :where(body.p-coaching) .viewas .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) .viewas .avlist span:hover {color:var(--text)}
  :where(body.p-coaching) .viewas .avlist span.on {background:var(--brand); color:var(--n900)}
  :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:0; bottom:0; align-items:center; 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; }

  :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:var(--line-hover-2); }
  :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, var(--n300)); font-size:10px; margin-left:2px; }
  :where(body.p-coaching) .psel-l { position:absolute; top:calc(100% + 4px); left:0; z-index:80; background:var(--n850); border:1px solid var(--n600);
        border-radius:10px; padding:4px; min-width:100%; width:max-content; display:flex; flex-direction:column;
        box-shadow:0 10px 26px var(--k-a45); }
  :where(body.p-coaching) .psel-l[hidden] { display:none !important; }
  :where(body.p-coaching) .psel-l button { display:flex; align-items:center; gap:7px; background:none; border:0; color:var(--muted, var(--n300));
        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:var(--w-a06); }
  :where(body.p-coaching) .psel-l .rico { margin-right:0; }

  :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:var(--gold-warm); }
  :where(body.p-coaching) .pk-t.over i { background:var(--bad-warm); }
  :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 var(--gold-warm); background:var(--gold-a07);
        border-radius:0 8px 8px 0; font-size:13.5px; line-height:1.5; }
  :where(body.p-coaching) .pk-late { border-left-color:var(--bad-warm); background:var(--bwarm-a09); }
  :where(body.p-coaching) .pk-half { margin-top:10px; padding:9px 13px; border-left:3px solid var(--brand); background:var(--acc-a07);
        border-radius:0 8px 8px 0; font-size:13.5px; }

  :where(body.p-coaching) .pk-sum { position:relative; overflow:hidden; border-color:var(--acc-a35); }
  :where(body.p-coaching) .pk-sum::after { content:''; position:absolute; inset:0; pointer-events:none;
        background:radial-gradient(680px 190px at 50% -60px, var(--acc-a13), 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:var(--acc-a06); 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:var(--gold-a50); color:var(--gold-warm); }
  :where(body.p-coaching) .pk-badge.over { border-color:var(--bwarm-a55); color:var(--bad-warm); font-weight:700; }

  :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; }

  :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:var(--n500); color:var(--text); background:var(--w-a045); }
  :where(body.p-coaching) .cspos-b.main, :where(body.p-coaching) .cspos-m.main { border-color:var(--brand); color:var(--brand); background:var(--acc-a08); }
  :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; }

    :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:var(--line-hover); color:var(--text)}

: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); }

:where(body.p-coaching) .gl-head { display:flex; align-items:center; flex-wrap:wrap;
          gap:var(--sp-2) var(--sp-3); }
:where(body.p-coaching) .gl-head .gl-h { flex:none; margin:0; }
:where(body.p-coaching) .gl-head .nick { font-family:'Oswald',sans-serif; font-weight:700; font-size:18px; }
:where(body.p-coaching) .gl-foot { margin-top:var(--sp-4); padding-top:var(--sp-3);
          border-top:1px solid var(--n700); }
:where(body.p-coaching) .dcinv { position:relative; margin-bottom:var(--sp-3);
          padding:var(--sp-3) var(--sp-4); border:1px solid var(--brand);
          border-radius:var(--r-md); background:var(--acc-a05); }

:where(body.p-coaching) .gl-head .pill { display:inline-flex; align-items:center; gap:5px; line-height:1; }
:where(body.p-coaching) .gl-head .pill img,
:where(body.p-coaching) .gl-head .pill svg { display:block; flex:none; }

:where(body.p-coaching) .gl-hp-l { display:inline-flex; align-items:center; flex-wrap:wrap; row-gap:3px; }
:where(body.p-coaching) .gl-hp-l img { border-radius:3px; }
:where(body.p-coaching) .gl-hp-n { margin-right:4px; color:var(--n300); }

@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%; }}

  body:where(.p-admin) { background:var(--n900); color:var(--n100); 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; }

  :where(body.p-admin) input, :where(body.p-admin) button, :where(body.p-admin) select { padding:8px 12px; border-radius:8px; border:1px solid var(--n700);
                  background:var(--n800); color:var(--n100); 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:var(--bad); }

  :where(body.p-admin) td .inline { display:inline-block; margin:2px 6px 2px 0; }

  :where(body.p-admin) select.danger { border-color:var(--bad-a55); color:var(--red-pale); }
  :where(body.p-admin) .stats { display:flex; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
  :where(body.p-admin) .stat { background:var(--n800); border:1px solid var(--n700); 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 var(--n700); font-size:14px; }
  :where(body.p-admin) th { color:var(--n300); font-weight:600; }
  :where(body.p-admin) .sub-on { color:var(--ok); font-weight:600; }
  :where(body.p-admin) .banned { color:var(--bad); font-weight:600; }
  :where(body.p-admin) form.inline { display:inline; }
  :where(body.p-admin) .muted { color:var(--n300); }
  :where(body.p-admin) .agggrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
             gap:14px; margin-top:14px; }

  @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:var(--n100); }

  :where(body.p-admin) h1.sec { font-size:19px; margin:36px 0 6px; padding:12px 16px; background:var(--n800);
           border:1px solid var(--n700); border-left:6px solid var(--n300); border-radius:12px; }
  :where(body.p-admin) h1#users { border-left-color:var(--blue-lite); }
  :where(body.p-admin) h1#aud { border-left-color:var(--ok); }

  :where(body.p-admin) h1#whatsearch { border-left-color:var(--teal); }
  :where(body.p-admin) h1#analytics { border-left-color:var(--orange); }
  :where(body.p-admin) h1#unkitem { border-left-color:var(--gold-warm); }
  :where(body.p-admin) h1#heropos { border-left-color:var(--acc); }

  :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 var(--gold-warm); }
  :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:var(--n300); 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:var(--n300); cursor:pointer; white-space:nowrap; }
  :where(body.p-admin) .hpbox input { width:15px; height:15px; margin:0; padding:0; accent-color:var(--acc); cursor:pointer; }
  :where(body.p-admin) .hpbox.on { color:var(--n100); }
  :where(body.p-admin) .hpghost { background:transparent; border:1px solid var(--line-hover); color:var(--n300);
             border-radius:7px; padding:5px 11px; font-size:12.5px; cursor:pointer; white-space:nowrap; }
  :where(body.p-admin) .hpghost:hover { border-color:var(--acc); color:var(--n100); }
  :where(body.p-admin) table tr:nth-child(even) td { background:var(--w-a018); }
  :where(body.p-admin) tr:hover td { background:var(--w-a04); }

  :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:var(--bad);
              border-radius:50%; margin-left:10px; vertical-align:2px;
              box-shadow:0 0 8px var(--bad-a90); }

  body:where(.p-admin) { --bg:var(--n900); --card:var(--n800); --line:var(--n700); --txt:var(--n100); --mut:var(--n300);
          --err:var(--bad); --brand:var(--acc); --brand2:var(--acc-hi); --onbrand:var(--on-acc-deep);

          --err2:var(--err-bright);

          --muted:var(--n300); --text:var(--n100); --panel:var(--n800); --panel2:var(--n750); }

  :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, var(--n850)); border:1px solid var(--line, var(--n700)); border-radius:12px;
            z-index:400; box-shadow:0 18px 50px -12px var(--k-a60); 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, var(--n300)); border-bottom:1px solid var(--line, var(--n700)); }
  :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, var(--n700));
            text-decoration:none; cursor:pointer; }
  :where(body.p-admin) .nbitem:hover { background:var(--acc-a05); }
  :where(body.p-admin) .nbtit { font-size:13px; font-weight:600; color:var(--txt, var(--n100)); line-height:1.35; }
  :where(body.p-admin) .nbtxt { font-size:12.5px; color:var(--mut, var(--n300)); margin-top:3px; line-height:1.45; }
  :where(body.p-admin) .nbempty { padding:18px 14px; font-size:13px; color:var(--mut, var(--n300)); text-align:center; }

  :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; }

  @media (max-width:760px) {  }

  body:where(.p-demo-check) {
    --card:var(--n800); --line:var(--n700); --txt:var(--n100); --mut:var(--n300);
    --brand:var(--acc); --brand2:var(--acc-hi); --onbrand:var(--on-acc-deep); --err2:var(--err-bright);
  }
  body:where(.p-demo-check) { background:var(--n900); color:var(--text-check); font:15px/1.55 'Inter',system-ui,sans-serif; margin:0; padding:0; }

  :where(body.p-demo-check) .pool { max-width:920px; margin:0 auto; }

  :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 var(--line-panel); border-radius:10px;
                   color:var(--text-check); font-size:13.5px; cursor:pointer; }
  :where(body.p-demo-check) .admrow .achip:hover { border-color:var(--acc-check); color:var(--acc-check); }
  :where(body.p-demo-check) .admrow .achip.on { background:var(--acc-check); border-color:var(--acc-check); color:var(--n900); font-weight:700; }
  :where(body.p-demo-check) h1 { font-size:20px; color:var(--acc-check); }
  :where(body.p-demo-check) .sum { color:var(--n300); font-size:13px; margin-bottom:20px; }
  :where(body.p-demo-check) .card { border:1px solid var(--line-panel); border-radius:12px; padding:16px; margin-bottom:18px; }
  :where(body.p-demo-check) .card.bad { border-left:4px solid var(--bad-warm); }
  :where(body.p-demo-check) video { width:100%; aspect-ratio:16/9; border-radius:10px; background:var(--ink-black); }
  :where(body.p-demo-check) .meta { font-size:12.5px; color:var(--n300); margin:8px 0 6px; }
  :where(body.p-demo-check) .meta b { color:var(--text-check); }
  :where(body.p-demo-check) .sumtxt { font-size:14px; }
  :where(body.p-demo-check) .take { color:var(--ok-leaf); font-size:13.5px; margin-top:6px; }
  :where(body.p-demo-check) .errtxt { color:var(--bad-warm); font-size:13px; white-space:pre-wrap; }
  :where(body.p-demo-check) a { color:var(--acc-check); }
  :where(body.p-demo-check) .btn { background:none; border:1px solid var(--line-panel); color:var(--text-check); border-radius:8px;
         padding:6px 12px; font:13px 'Inter',system-ui,sans-serif; cursor:pointer; }
  :where(body.p-demo-check) .btn:hover { border-color:var(--acc-check); color:var(--acc-check); }
  :where(body.p-demo-check) .btn.go { background:var(--acc-check); border-color:var(--acc-check); color:var(--n900); 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:var(--n800); border:1px solid var(--line-panel); color:var(--text-check);
         border-radius:8px; padding:5px 8px; font:13px 'Inter',system-ui,sans-serif; }
  :where(body.p-demo-check) details.vid { border:1px solid var(--line-panel); 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:var(--acc-check); }
  :where(body.p-demo-check) details.vid[open] > summary:before { content:'▾ '; }
  :where(body.p-demo-check) details.vid > summary b { color:var(--text-check); }
  :where(body.p-demo-check) details.vid .inner { padding:0 16px 4px; }
  :where(body.p-demo-check) .chip { color:var(--n300); font-size:12.5px; white-space:nowrap; }
  :where(body.p-demo-check) .chip b { color:var(--acc-check); }
  :where(body.p-demo-check) .msg { border:1px solid var(--ok-leaf); color:var(--ok-leaf); 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 var(--line-panel); border-radius:10px; padding:10px 14px; }
  :where(body.p-demo-check) .tile .n { font-size:28px; font-weight:700; color:var(--text-check); line-height:1.2; }
  :where(body.p-demo-check) .tile .l { font-size:11.5px; letter-spacing:.08em; color:var(--n300); margin-top:2px; }
  :where(body.p-demo-check) .tile .s { font-size:12px; color:var(--n300); margin-top:4px; }
  :where(body.p-demo-check) .tile.hot { border-color:var(--acc-check); } :where(body.p-demo-check) .tile.hot .n { color:var(--acc-check); }
  :where(body.p-demo-check) .tile.bad { border-color:var(--bad-warm); } :where(body.p-demo-check) .tile.bad .n { color:var(--bad-warm); }

  body:where(.p-login) { --bg:var(--n900); --card:var(--n800); --line:var(--n700); --txt:var(--n100); --mut:var(--n300);
          --err:var(--bad); --err2:var(--err-bright);
          --brand:var(--acc); --brand2:var(--acc-hi); --onbrand:var(--on-acc-deep); }
  :where(body.p-login) * { margin:0; padding:0; box-sizing:border-box; }

  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; }

  :where(body.p-login) .card { background:var(--card); border:1px solid var(--line); border-radius:14px;
          padding:30px 34px; width:100%; max-width:620px; }

  :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:var(--n900); 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) .card 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) .card 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:var(--discord); color:var(--on-solid);
                 font:600 15px 'Inter',sans-serif; text-decoration:none; }

  :where(body.p-login) .btnsteam { background:var(--steam); border:1px solid var(--steam-line); 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; }

  :where(body.p-login) .mmr {display:inline-flex; align-items:center; gap:7px; background:var(--n750);
       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, var(--acc-hi-a28), 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; }

  body:where(.p-match) {
    --brand:var(--acc); --bg:var(--n900); --panel:var(--n800); --panel2:var(--n750);
    --text:var(--n100); --muted:var(--n300); --line:var(--n700); --err:var(--bad); --ok:var(--ok-leaf);
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:var(--on-acc-deep); --brand2:var(--acc-hi); --gold:var(--gold-warm);
  }
  :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:var(--acc-slab-hi); border-color:var(--brand); color:var(--brand); }
  :where(body.p-match) .box { border:1px solid var(--line); border-radius:14px; background:var(--n800); 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) .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:var(--radiant); }
  :where(body.p-match) .tside.d { color:var(--dire); }
  :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:var(--gold-glow); box-shadow:0 0 7px var(--goldl-a55); }
  :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; }

  :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; }}

  :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; }

  :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%; }

  :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:var(--text-faint); 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; }

  :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:var(--text-faint); font-size:10.5px; margin-left:6px; }

  :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:var(--radiant); } :where(body.p-match) .slmark.d { background:var(--dire); } :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; }

  :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:var(--text-faint); 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:var(--w-a05); }
  :where(body.p-match) .jrow.act { background:var(--acc-a08); }
  :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:var(--ok-pale); } :where(body.p-match) .jrow .jlab.d { color:var(--red-pale-b); }
  :where(body.p-match) .jrow .jpre { margin-left:auto; font-family:'Oswald',system-ui,sans-serif; font-weight:600; font-size:10px;
                color:var(--text-faint); 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:var(--n850);
        border:1px solid var(--line-dn); 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:var(--n0); 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:var(--dn-bg); border-color:var(--line-dn-hi); }
  :where(body.p-match) .dn.night { background:var(--dn-night-bg); border-color:var(--line-night); }
  :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; }
  /* .bar стал колонкой: сверху полоса командного нетворса, под ней две стороны */
  :where(body.p-match) .bar { display:flex; flex-direction:column; gap:0; }
  :where(body.p-match) .sides { 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) .nwt { display:flex; align-items:center; gap:8px; padding:13px 8px 7px; }
  :where(body.p-match) .nwt b { flex:0 0 auto; font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; }
  :where(body.p-match) .nwt .nr { color:var(--ok); }
  :where(body.p-match) .nwt .nd { color:var(--red-nw); }
  :where(body.p-match) .nwb { position:relative; flex:1 1 auto; height:7px; border-radius:4px; background:var(--red-bar-bg); }
  :where(body.p-match) .nwb > i { display:block; height:100%; width:50%; background:var(--ok-bar); border-radius:4px 0 0 4px; transition:width .1s linear; }
  :where(body.p-match) .nwb::after { content:''; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--w-a40); }
  :where(body.p-match) .nwb .nl { position:absolute; left:50%; top:-14px; transform:translateX(-50%); font-size:10.5px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
  /* K/D тихим серым, главная цифра (CS/NW) остаётся якорем справа */
  :where(body.p-match) .kd { margin-left:auto; flex:0 0 auto; font-size:11px; font-weight:600; color:var(--n300); font-variant-numeric:tabular-nums; }
  :where(body.p-match) .kd + .gd { margin-left:8px; }
  :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 var(--acc-a55), 0 0 18px var(--acc-a35); }
    70%  { border-color:var(--brand); box-shadow:0 0 0 2px var(--acc-a45), 0 0 14px var(--acc-a25); }
    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:var(--gold-glow); box-shadow:0 0 0 1px var(--goldl-a50), 0 0 12px var(--goldl-a28); }
  :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:var(--n800); 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:var(--n500); font-style:normal; font-weight:400; margin:0 5px; }
  :where(body.p-match) .pn .pnn { color:var(--text-bright-c); 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:var(--ok); transition:width .1s linear; }
  :where(body.p-match) .mb i { display:block; height:100%; background:var(--blue-bar); 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:var(--text-bright-a); }
  :where(body.p-match) .bar[data-met="nw"] .gd { color:var(--gold-lite); }
  :where(body.p-match) .gd { font-size:12px; font-weight:700; color:var(--gold-lite); 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:var(--n800); }
  :where(body.p-match) .inv .es { width:20px; height:15px; border-radius:3px; background:var(--n800); 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; }

  :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 var(--ink-black), 0 0 2px var(--ink-black); }
  :where(body.p-match) .inv .gap { width:5px; display:block; }
  :where(body.p-match) .inv .tpc { border:1px solid var(--line-tool); 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:var(--n800); }
  :where(body.p-match) .abl .unk { border-color:var(--line); color:var(--mut); background:var(--n800); cursor:help; }
  :where(body.p-match) #mv-tt { position:fixed; z-index:60; max-width:420px; background:var(--n800); 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 var(--k-a50); 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:var(--gold-lite); font-weight:700; font-size:12px; margin-bottom:6px; }
  :where(body.p-match) .tt-a { color:var(--text-check); font-size:12px; margin-bottom:6px; }
  :where(body.p-match) .tt-act { background:var(--bg); border:1px solid var(--line-tool); 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:var(--acc-slab); border-color:var(--brand); font-weight:600; }
  :where(body.p-match) .tlv { width:30px; height:30px; border-radius:50%; background:var(--n800); border:1px solid var(--line-tool);
         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:var(--acc-slab); border-color:var(--brand); font-weight:600; }

  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; }

  /* ===== СРАВНЕНИЕ: ДВА РЕПЛЕЯ СТРОКАМИ ===================================
     Строка = карта слева (квадрат 380px), справа подпись, таймлайн, кнопки и две
     колонки карточек. Пульт над строками; слои и журнал — в выдвижной панели справа. */
  :where(body.p-match) .mtcmpbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 12px; }
  :where(body.p-match) .mtcmpbar .chips { margin:0; gap:4px; }
  :where(body.p-match) .mtcmpbar .chip { padding:4px 10px; font-size:12px; border-radius:8px; }
  :where(body.p-match) .mtcmpbar a { font-size:12px; color:var(--mut); }
  :where(body.p-match) .mtcmpbar a:hover { color:var(--brand); }
  :where(body.p-match) .mtlbl { font:600 10.5px 'Inter',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--n400); margin-right:-8px; }
  :where(body.p-match) .mtlbl[hidden] { display:none; }
  :where(body.p-match) .mthk { position:relative; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px;
          border:1px solid var(--n600); border-radius:8px; font-size:12.5px; color:var(--text); cursor:help; user-select:none; }
  :where(body.p-match) .mthk:hover, :where(body.p-match) .mthk:focus { border-color:var(--brand); color:var(--brand); outline:none; }
  :where(body.p-match) .mthk-p { display:none; position:absolute; top:34px; right:0; width:440px; max-width:calc(100vw - 32px); z-index:70;
            background:var(--n750); border:1px solid var(--n600); border-radius:10px; padding:12px 14px;
            box-shadow:0 24px 64px var(--k-a56); cursor:default; }
  :where(body.p-match) .mthk:hover .mthk-p, :where(body.p-match) .mthk:focus .mthk-p { display:block; }
  :where(body.p-match) .mthk-p .hint { margin:0; display:grid; grid-template-columns:1fr; gap:5px; font-size:12px; color:var(--mut); }
  :where(body.p-match) .mthk-p .hint span { white-space:normal; }
  body:where(.p-match).mt-embed .mtcmpbar { display:none; }

  :where(body.p-match) .mtcmp.rows { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  :where(body.p-match) .mtcmp.rows .mtcmpc { background:var(--n850); border:1px solid var(--n750); border-radius:14px; padding:10px; }
  :where(body.p-match) .mtcmp.rows .mtcmpc[hidden] { display:none; }
  :where(body.p-match) .mtcmp.rows .mapwrap { display:flex; gap:16px; align-items:flex-start; }
  :where(body.p-match) .mtcmp.rows .mapwrap > .mapcol { flex:0 0 380px; width:380px; max-width:100%; }
  :where(body.p-match) .mtcmp.rows .mapwrap > .ctl { flex:1 1 auto; min-width:0; }
  :where(body.p-match) .mtcmp.rows .csmap { max-width:none; }
  :where(body.p-match) .mtcmp.rows .csmap-cv { border-radius:8px; }
  :where(body.p-match) .mtcmp.rows .dnrow { max-width:none; }
  :where(body.p-match) .mtcmp.rows .dn { padding:5px 12px; gap:7px; }
  :where(body.p-match) .mtcmp.rows .dn b { font-size:15px; }
  :where(body.p-match) .mtcmp.rows .dn svg { width:16px; height:16px; }
  :where(body.p-match) .mtcmp.rows .mtrcap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:22px;
            font:600 11px 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--n400); }
  :where(body.p-match) .mtcmp.rows .mtrcap .mtnum { font:700 13px 'Oswald',system-ui,sans-serif; letter-spacing:.02em; color:var(--brand); font-variant-numeric:tabular-nums; }
  :where(body.p-match) .mtcmp.rows .mtrcap a { font:400 11.5px 'Inter',sans-serif; text-transform:none; letter-spacing:0; color:var(--mut); }
  :where(body.p-match) .mtcmp.rows .mtrcap a:hover { color:var(--brand); }
  :where(body.p-match) .mtcmp.rows .mtrcap .mtcnote { font:400 11.5px 'Inter',sans-serif; text-transform:none; letter-spacing:0; margin:0; min-height:0; }
  :where(body.p-match) .mtcmp.rows .mtrcap .mtcnote:empty { display:none; }
  :where(body.p-match) .mtcmp.rows .mtrcap .met { margin-left:auto; }
  :where(body.p-match) .mtcmp.rows .tline { margin:6px 0 0; gap:10px; }
  :where(body.p-match) .mtcmp.rows .tval { font:700 17px 'Oswald',system-ui,sans-serif; min-width:58px; }
  :where(body.p-match) .mtcmp.rows .tdur { font:600 11px 'Inter',sans-serif; color:var(--n400); font-variant-numeric:tabular-nums; flex:0 0 auto; }
  :where(body.p-match) .mtcmp.rows .chips.spd { margin:0; gap:3px; flex-wrap:nowrap; flex:0 0 auto; }
  :where(body.p-match) .mtcmp.rows .chips.spd .chip { padding:3px 7px; font-size:11px; border-radius:7px; }
  :where(body.p-match) .mtcmp.rows .chips.play { justify-content:center; margin:4px 0 6px; gap:4px; }
  :where(body.p-match) .mtcmp.rows .chips.play .chip.ic { padding:4px 8px; min-width:30px; border-radius:8px; }
  :where(body.p-match) .mtcmp.rows .chips.play .chip.ic svg { width:13px; height:13px; }
  :where(body.p-match) .mtcmp.rows .chips.play .chip.ic.sk b { font-size:11px; }
  :where(body.p-match) .mtcmp.rows .teams { display:none; }
  :where(body.p-match) .mtcmp.rows .barcol { margin:0; }
  :where(body.p-match) .mtcmp.rows .bar { gap:4px; }
  :where(body.p-match) .mtcmp.rows .sides { gap:10px; }
  :where(body.p-match) .mtcmp.rows .side { padding:0; gap:4px; }
  :where(body.p-match) .mtcmp.rows .side + .side { border-left:0; }
  :where(body.p-match) .mtcmp.rows .side::before { font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; line-height:1; margin:0 0 2px; }
  :where(body.p-match) .mtcmp.rows .side:first-child::before { content:'Radiant'; color:var(--radiant); }
  :where(body.p-match) .mtcmp.rows .side + .side::before { content:'Dire'; color:var(--dire); }
  :where(body.p-match) .mtcmp.rows .pl { padding:2px 6px 3px; gap:3px; }
  :where(body.p-match) .mtcmp.rows .pg { display:flex; align-items:center; gap:10px; min-width:0; }
  :where(body.p-match) .mtcmp.rows .inv { margin:0; flex:0 0 auto; }
  :where(body.p-match) .mtcmp.rows .abl { margin:0; flex-wrap:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; }
  :where(body.p-match) .mtcmp.rows .abl img { width:15px; height:15px; }
  :where(body.p-match) .mtcmp.rows .side { gap:3px; }
  :where(body.p-match) .mtcmp.rows .ptop { gap:6px; }
  :where(body.p-match) .mtcmp.rows .chips.play { margin:2px 0 4px; }
  :where(body.p-match) .mtcmp.rows .tline { margin:4px 0 0; }
  :where(body.p-match) .mtcmp.rows .mtcmpc { padding:8px; }
  body:where(.p-match).mt-embed .wrap { padding:4px 8px 4px !important; }
  /* в рамке нет ни шапки, ни сайдбара — отступы оболочки под них тут лишние */
  body.p-match.mt-embed { padding:0 !important; }
  /* полосы HP и маны — под именем, в той же строке, что портрет: высоты карточке не прибавляют */
  :where(body.p-match) .mtcmp.rows .pl { position:relative; }
  :where(body.p-match) .mtcmp.rows .ptop { align-items:flex-start; }
  :where(body.p-match) .mtcmp.rows .pn { line-height:14px; }
  :where(body.p-match) .mtcmp.rows .gd { line-height:14px; }
  :where(body.p-match) .mtcmp.rows .hb, :where(body.p-match) .mtcmp.rows .mb { position:absolute; left:48px; right:8px; width:auto; }
  :where(body.p-match) .mtcmp.rows .hb { top:16px; height:5px; }
  :where(body.p-match) .mtcmp.rows .mb { top:22px; height:4px; }
  :where(body.p-match) .mtcmp.rows .pl { padding-top:2px; }
  :where(body.p-match) .mtcmp.rows .pg { margin-top:4px; }
  :where(body.p-match) .mtcmp.rows .pl .lv { right:-4px; bottom:-4px; }
  :where(body.p-match) #mv2-tt { position:fixed; z-index:60; max-width:420px; background:var(--n800); 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 var(--k-a50); display:none; }
  :where(body.p-match) #mv2-tt b { display:block; color:var(--text); font-size:12.5px; margin-bottom:3px; }
  :where(body.p-match) .mtcmp.rows .pl .pw { cursor:pointer; }
  :where(body.p-match) .mtcmp.rows .pl .pw:hover .pa { outline:1px solid var(--brand); }
  :where(body.p-match) .mtcmp.rows .pa { width:36px; height:22px; }
  :where(body.p-match) .mtcmp.rows .gd { font:700 13px 'Oswald',system-ui,sans-serif; }
  @media (max-width:1100px) {
    :where(body.p-match) .mtcmp.rows .mapwrap { flex-direction:column; }
    :where(body.p-match) .mtcmp.rows .mapwrap > .mapcol { flex:none; width:100%; max-width:420px; }
    :where(body.p-match) .mtcmp.rows .mapwrap > .ctl { width:100%; }
  }
  @media (max-width:640px) {
    :where(body.p-match) .mtcmp.rows .bar { flex-direction:column; align-items:stretch; }
    :where(body.p-match) .mtcmp.rows .tline { flex-wrap:wrap; }
    :where(body.p-match) .mtcmp.rows .chips.spd { flex-wrap:wrap; }
  }

  :where(body.p-match) .mtdrawer { position:fixed; top:0; right:0; bottom:0; width:360px; max-width:100%; z-index:50;
              background:var(--n850); border-left:1px solid var(--n600); box-shadow:-24px 0 64px var(--k-a56);
              display:flex; flex-direction:column; }
  :where(body.p-match) .mtdrawer[hidden] { display:none; }
  :where(body.p-match) .mtdr-h { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--n750); flex:0 0 auto; }
  :where(body.p-match) .mtdr-h .chips { margin:0; gap:4px; }
  :where(body.p-match) .mtdr-x { margin-left:auto; color:var(--mut); cursor:pointer; font-size:17px; line-height:1; padding:2px 4px; user-select:none; }
  :where(body.p-match) .mtdr-x:hover { color:var(--text); }
  :where(body.p-match) .mtdr-b { padding:14px 16px; overflow-y:auto; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  :where(body.p-match) .mtdr-b[hidden] { display:none; }
  :where(body.p-match) .mtdr-b .chips { margin:0; }
  :where(body.p-match) .mtdr-b .sec { margin:0 0 8px; }
  :where(body.p-match) .mtdr-jt { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
  :where(body.p-match) .mtdr-jt .zhint { margin-left:auto; }
  :where(body.p-match) .mtdr-b .jrn { max-height:none; flex:1 1 auto; min-height:0; }
  :where(body.p-match) .jrn[hidden] { display:none; }

  body:where(.p-moves-check) { background:var(--n900); color:var(--n100); 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:var(--n100); margin:0 0 2px; text-transform:uppercase; }
  :where(body.p-moves-check) .sub { color:var(--n300); font-size:12.5px; margin-bottom:18px; }

  :where(body.p-moves-check) .box { border:1px solid var(--n700); border-radius:14px; background:var(--n800); padding:10px 12px; margin-bottom:10px; }
  :where(body.p-moves-check) .sec { font-weight:600; font-size:11.5px; color:var(--n300); 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; }

  :where(body.p-moves-check) .chips[hidden] { display:none; }
  :where(body.p-moves-check) .chip { border:1px solid var(--n700); border-radius:10px; padding:5px 12px; font-size:12.5px; color:var(--n100);
          cursor:pointer; user-select:none; transition:.15s ease-in-out; background:var(--n900); }
  :where(body.p-moves-check) .chip:hover { border-color:var(--acc); color:var(--acc); }
  :where(body.p-moves-check) .chip:active { transform:scale(.96); }
  :where(body.p-moves-check) .chip.on { background:var(--acc); border-color:var(--acc); color:var(--on-acc-deep); font-weight:700; }

  :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:var(--n300); 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; }

  :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:var(--radiant); }
  :where(body.p-moves-check) .tside.d { color:var(--dire); }
  :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:var(--n900); 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:var(--acc); background:var(--n900); }
  :where(body.p-moves-check) .chip.hd.on img { opacity:1; }

  :where(body.p-moves-check) .chip.gl { border-color:var(--gold-glow); box-shadow:0 0 7px var(--goldl-a55); }
  :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:var(--n0); text-shadow:0 0 3px var(--ink-black), 0 0 2px var(--ink-black); }
  :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:var(--acc); min-width:0; }
  :where(body.p-moves-check) .rnglab { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--n300);
            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; }

  :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%; }

  :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:var(--n700); border-radius:4px; }
  :where(body.p-moves-check) .pane[hidden] { display:none; }

  :where(body.p-moves-check) #mv-cv { width:100%; max-width:900px; height:auto;
           aspect-ratio:1; border-radius:14px; background:var(--bg-canvas);
           display:block; cursor:default; touch-action:none; }

  :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:var(--deep-a50); border-radius:8px;
            color:var(--txt); font:600 15px 'Inter',sans-serif; }
  :where(body.p-moves-check) .mvload[hidden] { display:none; }
  :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; }

  :where(body.p-moves-check) .dnrow[hidden] { display:none; }

  :where(body.p-moves-check) .dn { display:inline-flex; align-items:center; gap:10px; background:var(--n850);
        border:1px solid var(--line-dn); 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:var(--n0); 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; }

  :where(body.p-moves-check) .dn { background:var(--dn-bg); border-color:var(--line-dn-hi); }
  :where(body.p-moves-check) .dn.night { background:var(--dn-night-bg); border-color:var(--line-night); }
  :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:var(--n300); }
  :where(body.p-moves-check) .lgd i { width:10px; height:10px; border-radius:50%; display:inline-block; }
  :where(body.p-moves-check) .note { color:var(--n300); 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:var(--acc); }
  :where(body.p-moves-check) .tval { font-variant-numeric:tabular-nums; color:var(--acc); font-weight:700; min-width:56px; font-size:15px; }

  :where(body.p-moves-check) .zone { background:var(--n900); border:1px solid var(--n700); 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:var(--text-faint); font-size:10.5px; margin-left:6px; }

  :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:var(--acc); 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:var(--radiant); } :where(body.p-moves-check) .slmark.d { background:var(--dire); } :where(body.p-moves-check) .slmark.n { background:var(--gold-warm); }
  :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:var(--text-faint); 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:var(--w-a05); }
  :where(body.p-moves-check) .jrow.act { background:var(--acc-a08); }
  :where(body.p-moves-check) .jrow .jtm { font-family:'Oswald',system-ui,sans-serif; font-weight:600; font-size:12px; color:var(--n300);
               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:var(--ok-pale); } :where(body.p-moves-check) .jrow .jlab.d { color:var(--red-pale-b); }
  :where(body.p-moves-check) .jrow .jpre { margin-left:auto; font-family:'Oswald',system-ui,sans-serif; font-weight:600; font-size:10px;
                color:var(--text-faint); border:1px solid var(--n700); 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:var(--acc); border-color:var(--acc); }
  :where(body.p-moves-check) select { background:var(--n900); border:1px solid var(--n700); border-radius:10px; color:var(--n100);
           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:var(--acc); }
  :where(body.p-moves-check) input[type=text] { background:var(--n900); border:1px solid var(--n700); border-radius:10px; color:var(--n100);
                     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:var(--acc); }
  :where(body.p-moves-check) .empty { color:var(--n300); padding:10px 0; }
  :where(body.p-moves-check) code { background:var(--n900); border:1px solid var(--n700); 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:var(--n300); }
  :where(body.p-moves-check) .key svg { flex:0 0 auto; }
  :where(body.p-moves-check) .hint { color:var(--n300); 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:var(--n100); font-weight:600; }
  :where(body.p-moves-check) .hint span { white-space:nowrap; }

  :where(body.p-moves-check) .barcol { max-width:100%; }

  :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 var(--n700); }

  :where(body.p-moves-check) .pl { display:flex; flex-direction:column; gap:3px; background:var(--n900); border:1px solid var(--n700);
        border-radius:9px; padding:4px 7px; transition:.15s ease-in-out; }
  :where(body.p-moves-check) .pl.dead { opacity:.42; }

  @keyframes mov-plflash {
    0%   { border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-a55), 0 0 18px var(--acc-a35); }
    70%  { border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-a45), 0 0 14px var(--acc-a25); }
    100% { border-color:var(--n700); 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; }}

  :where(body.p-moves-check) .pl.gl { border-color:var(--gold-glow); box-shadow:0 0 0 1px var(--goldl-a50), 0 0 12px var(--goldl-a28); }
  :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:var(--n800); border:1px solid var(--n700); border-radius:4px; font-size:10px;
        font-weight:700; color:var(--n100); 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; }

  :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:var(--n500); font-style:normal; font-weight:400; margin:0 5px; }
  :where(body.p-moves-check) .pn .pnn { color:var(--text-bright-c); font-weight:600; }

  :where(body.p-moves-check) .hb, :where(body.p-moves-check) .mb { width:100%; border-radius:3px; background:var(--n700); 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:var(--ok); transition:width .1s linear; }
  :where(body.p-moves-check) .mb i { display:block; height:100%; background:var(--blue-bar); transition:width .1s linear; }
  :where(body.p-moves-check) .pg { min-width:0; }

  :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:var(--text-bright-a); }
  :where(body.p-moves-check) .bar[data-met="nw"] .gd { color:var(--gold-lite); }

  :where(body.p-moves-check) .pl.off { opacity:.26; }
  :where(body.p-moves-check) .gd { font-size:12px; font-weight:700; color:var(--gold-lite); 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:var(--n800); }
  :where(body.p-moves-check) .inv .es { width:20px; height:15px; border-radius:3px; background:var(--n800); border:1px solid var(--n700); 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:var(--n100); text-shadow:0 0 3px var(--ink-black), 0 0 2px var(--ink-black); }
  :where(body.p-moves-check) .inv .gap { width:5px; display:block; }
  :where(body.p-moves-check) .inv .tpc { border:1px solid var(--line-tool); 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:var(--n800); }
  :where(body.p-moves-check) .abl .unk { border-color:var(--n700); color:var(--n300); background:var(--n800); cursor:help; }

  :where(body.p-moves-check) #mv-tt { position:fixed; z-index:60; max-width:280px; background:var(--n800); border:1px solid var(--n700);
           border-radius:10px; padding:9px 11px; font-size:12px; color:var(--n300); pointer-events:none;
           box-shadow:0 8px 24px var(--k-a50); display:none; }
  :where(body.p-moves-check) #mv-tt b { display:block; color:var(--n100); font-size:12.5px; margin-bottom:3px; }
  :where(body.p-moves-check) .tt-t { color:var(--n100); font-weight:700; font-size:13px; margin-bottom:2px; }
  :where(body.p-moves-check) .tt-c { color:var(--gold-lite); font-weight:700; font-size:12px; margin-bottom:6px; }
  :where(body.p-moves-check) .tt-a { color:var(--text-check); font-size:12px; margin-bottom:6px; }
  :where(body.p-moves-check) .tt-act { background:var(--n900); border:1px solid var(--line-tool); border-radius:7px; padding:5px 8px;
            color:var(--n100); font-size:12px; font-weight:600; margin:6px 0 4px; }
  :where(body.p-moves-check) .tt-chip { color:var(--n300); font-weight:400; font-size:11px; margin-left:6px; }
  :where(body.p-moves-check) .tt-d { font-size:12px; color:var(--n300); 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:var(--n300); background:var(--n900);
        border:1px solid var(--n700); border-radius:7px; }
  :where(body.p-moves-check) .tl.on { color:var(--acc); background:var(--acc-slab); border-color:var(--acc); font-weight:600; }
  :where(body.p-moves-check) .tlv { width:30px; height:30px; border-radius:50%; background:var(--n800); border:1px solid var(--line-tool);
         color:var(--n100); 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:var(--n300); background:var(--n900);
              border:1px solid var(--n700); border-radius:7px; width:45%; }
  :where(body.p-moves-check) .ttree td.on { color:var(--acc); background:var(--acc-slab); border-color:var(--acc); font-weight:600; }

  :where(body.p-moves-check) .mu { padding:12px 14px; }

  :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; }

  :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:var(--n900); border:1px solid var(--line-tool);
            border-radius:10px; padding:4px; box-shadow:0 12px 30px var(--k-a55); }
  :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:var(--n900); border-bottom:1px solid var(--n700); z-index:1; }

  :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:var(--n100); }
  :where(body.p-moves-check) .hqi:hover, :where(body.p-moves-check) .hqi.pick { background:var(--acc-slab); color:var(--acc); }
  :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:var(--n300); font-variant-numeric:tabular-nums; }

  :where(body.p-moves-check) .hpick { display:inline-flex; align-items:center; gap:8px; background:var(--n900); border:1px solid var(--acc);
           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:var(--n300); cursor:pointer; font-size:15px; line-height:1; padding:0 2px; }
  :where(body.p-moves-check) .hpick .x:hover { color:var(--dire); }

  :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 var(--n700); border-radius:11px; background:var(--n900); padding:8px 10px;
           cursor:pointer; transition:.15s ease-in-out; text-align:center; }
  :where(body.p-moves-check) .rcard:hover { border-color:var(--acc); }

  :where(body.p-moves-check) .rcard.on { border-color:var(--acc); background:var(--acc-a07); }
  :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:var(--n300); 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:var(--acc); }
  :where(body.p-moves-check) .rcard .rg { font-family:'Oswald',system-ui,sans-serif; font-size:20px; line-height:1; color:var(--n100); }
  :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:var(--ok); } :where(body.p-moves-check) .wrlo { color:var(--dire); } :where(body.p-moves-check) .wrmid { color:var(--n300); }

  :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 var(--n700); border-radius:11px; background:var(--n900); padding:6px 10px;
           cursor:pointer; transition:.15s ease-in-out; min-width:118px; }
  :where(body.p-moves-check) .pcard:hover { border-color:var(--acc); }
  :where(body.p-moves-check) .pcard.on { border-color:var(--acc); background:var(--acc-slab); }
  :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:var(--n100); 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:var(--gold-lite); 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:var(--n300); }
  :where(body.p-moves-check) .pcard .ptm { font-size:10.5px; color:var(--n300); 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:var(--line-tool); border-radius:7px; }

  :where(body.p-moves-check) .mrow, :where(body.p-moves-check) .mrow > * { box-sizing:border-box; }

  :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 var(--n700); border-radius:9px;
          background:var(--n900); 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 var(--line-cell); }
  :where(body.p-moves-check) .mrow:hover { border-color:var(--acc); }
  :where(body.p-moves-check) .mrow.on { border-color:var(--acc); background:var(--acc-a07); }

  :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:var(--ok); background:var(--grn-a13); border:1px solid var(--grn-a50); }
  :where(body.p-moves-check) .wl.l { color:var(--dire); background:var(--dire-a13); border:1px solid var(--dire-a50); }
  :where(body.p-moves-check) .mrow .mago { font-size:11.5px; color:var(--n300); 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:var(--n300); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  :where(body.p-moves-check) .mrow .mkda { font-size:12.5px; color:var(--text-kda); 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:var(--radiant-a10); }
  :where(body.p-moves-check) .mdr .side5.dire { background:var(--dire-a10); }
  :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 var(--acc) inset, 0 0 0 1px var(--acc); }

  :where(body.p-moves-check) .mdr img.me { opacity:1; box-shadow:0 0 0 2px var(--n0) inset, 0 0 0 1px var(--w-a55); }

  :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:var(--n500); font-size:11px; line-height:1; }
  :where(body.p-moves-check) .mbld .none { color:var(--n500); font-size:11px; }

  :where(body.p-moves-check) .mcp, :where(body.p-moves-check) .mcl { color:var(--text-faint); 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:var(--acc); }
  :where(body.p-moves-check) .mcp.ok, :where(body.p-moves-check) .mcl.ok { color:var(--ok); }
  :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); }

  :where(body.p-moves-check) .mrow .mloc { width:5px; height:5px; border-radius:50%; background:var(--ok); flex:0 0 auto; }
  :where(body.p-moves-check) .mrow .mloc.no { background:var(--slab-grey); }
  :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:var(--n300);
               font-weight:700; }
  :where(body.p-moves-check) .mucond { display:flex; align-items:center; gap:6px; }
  :where(body.p-moves-check) .mucond .rmx { color:var(--n300); cursor:pointer; font-size:15px; line-height:1; padding:0 3px; }
  :where(body.p-moves-check) .mucond .rmx:hover { color:var(--dire); }
  :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; }

  :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; }

  @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:var(--n100); font-weight:700;
                 background:var(--n800); border:1px solid var(--line-tool); 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:var(--acc-slab); border:1px solid var(--acc);
              color:var(--acc); font-size:11px; line-height:14px; text-align:center; font-weight:700; }

  :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:var(--n300); 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:var(--text-kda); font-weight:600; }

  :where(body.p-moves-check) .muhead .btit { margin:0; }

  :where(body.p-moves-check) .sec.mini { font-size:10.5px; color:var(--text-mute-b); margin:2px 0 5px; }
  :where(body.p-moves-check) .sec.mini .subtle { color:var(--text-dim-b); }

  :where(body.p-moves-check) .fold > summary { list-style:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
                    color:var(--n300); font:600 11.5px/1 'Inter',system-ui,sans-serif; letter-spacing:.06em;
                    text-transform:uppercase; border:1px solid var(--n700); border-radius:9px;
                    padding:7px 11px; background:var(--n900); 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:var(--line-hover); color:var(--n100); }
  :where(body.p-moves-check) .fold[open] > summary { color:var(--n100); border-color:var(--line-tool); }
  :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:var(--n850); border:1px solid var(--line-tool); border-radius:11px;
                     padding:11px 12px; box-shadow:0 12px 30px var(--k-a55); }
  :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:var(--n300); font-size:12.5px;
           line-height:1.4; border:1px dashed var(--line-cell); border-radius:11px; padding:15px 15px; }
  :where(body.p-moves-check) .mzero svg { flex:0 0 auto; stroke:var(--n500); fill:none; }

  :where(body.p-moves-check) #mv-mu:has(#mu-hpick:empty) .mzero { display:flex; }

  :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) .viewas { position:relative; display:inline-flex; flex:none; }
        :where(body.p-moves-check) .viewas .avbtn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px;
          border:1px solid var(--n700); border-radius:8px; background:transparent; color:var(--n300);
          font:600 12px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; }
        :where(body.p-moves-check) .viewas .avbtn:hover { border-color:var(--line-hover); color:var(--n100); }
        :where(body.p-moves-check) .viewas .avbtn .avarr { font-size:9px; }
        :where(body.p-moves-check) .viewas .avlist { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:160;
          flex-direction:column; min-width:130px; background:var(--n850); border:1px solid var(--n700);
          border-radius:10px; padding:5px; box-shadow:0 8px 24px var(--k-a45); }
        :where(body.p-moves-check) .viewas.open .avlist { display:flex; }
        :where(body.p-moves-check) .viewas .avlist span { padding:7px 12px; font-size:12px; font-weight:600; color:var(--n300);
          border-radius:7px; cursor:pointer; white-space:nowrap; }
        :where(body.p-moves-check) .viewas .avlist span:hover { color:var(--n100); }
        :where(body.p-moves-check) .viewas .avlist span.on { background:var(--acc); color:var(--n900); }
html:has(body.p-prep-form) {overflow-x:clip}

.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); } }

.pf-hpan {position:absolute; z-index:70; max-height:264px; overflow-y:auto; min-width:190px;
         background:var(--n850); border:1px solid var(--n600); border-radius:10px; padding:4px;
         box-shadow:0 10px 26px var(--k-a45)}
.pf-hpan[hidden] {display:none !important}
.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:var(--w-a06)}
.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, var(--n750)); 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}

.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}

.pf-st.bad {flex:1 1 100%; text-align:left; color:var(--bad-warm); margin-top:2px}
.pf-msg {flex:1 1 100%; font-size:12.5px; line-height:1.5; display:none; margin:-2px 0 2px}

.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:var(--bad-warm)}

.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}

.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:var(--line-soft); background:var(--w-a06)}
.pf-book {display:inline-flex; align-items:center; background:var(--brand); color:var(--n900);
         border-radius:8px; padding:9px 16px; font-weight:700; font-size:14px}
.pf-book:hover {background:var(--brand2, var(--acc-hi))}

@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}}

  body:where(.p-prep-form) {
    --brand:var(--acc); --bg:var(--n900); --panel:var(--n800); --panel2:var(--n750);
    --text:var(--n100); --muted:var(--n300); --line:var(--n700); --err:var(--bad);
    --err2:var(--err-bright);
    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:var(--on-acc-deep); --brand2:var(--acc-hi);
  }
  :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:var(--n900); 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:var(--acc-a08); border-color:var(--acc-a45)}
  :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:var(--n900);
          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}
html:has(body.p-profile) { overflow-x:clip; }

  body:where(.p-profile) {
    --brand:var(--acc); --bg:var(--n900); --panel:var(--n800); --panel2:var(--n750);
    --text:var(--n100); --muted:var(--n300); --line:var(--n700); --err:var(--bad);
    --err2:var(--err-bright);

    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:var(--on-acc-deep); --brand2:var(--acc-hi);
  }
  :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; }
  :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}

  @media(max-width:860px) { 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}

  :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:var(--n800); 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 var(--k-a55)}
  :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:var(--n900); 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:var(--line-hover)}
  :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) .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)}
  @keyframes focusGlow {
    0%   { box-shadow:0 0 0 0 var(--acc-a00); }
    12%  { box-shadow:0 0 0 3px var(--acc-a35), 0 0 30px 6px var(--acc-a50); border-color:var(--brand); }
    100% { box-shadow:0 0 0 0 var(--acc-a00); }
  }
  :where(body.p-profile) .card.focusGlow { animation:focusGlow 1.9s ease-out; }

  :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:var(--line-hover)}
  :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 var(--acc-a35)}
  :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}
  /* пустая строка статуса не должна раздувать дыру перед Telegram-блоком */
  :where(body.p-profile) .ntmsg:empty {min-height:0; margin:0}

  body:where(.p-review) { --bg:var(--n900); --card:var(--n800); --line:var(--n700); --txt:var(--n100); --mut:var(--n300);
          --err:var(--bad); --err2:var(--err-bright);
          --brand:var(--acc); --brand2:var(--acc-hi); --onbrand:var(--on-acc-deep); }

  body:where(.p-review) { background:var(--bg); color:var(--txt); font:15px/1.5 'Inter',system-ui,sans-serif; margin:0; padding:24px; }

  :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 var(--n700);
      background:var(--n800); color:var(--n100); font:inherit; }
  :where(body.p-review) button { cursor:pointer; } :where(body.p-review) button:hover { border-color:var(--line-hover); background:var(--n750); }

  :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:var(--line-hover); }
  :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:var(--acc-a50); background:var(--acc-a07); }
  :where(body.p-review) .schip.on span { color:var(--brand); }

  :where(body.p-review) .statnote { display:flex; justify-content:space-between; gap:10px; margin:6px 1px 12px;
              font-size:11px; color:var(--text-faint); }
  :where(body.p-review) .statnote b { font-weight:600; color:var(--text-faint); }

  :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:var(--n900); }
  :where(body.p-review) .srchrow input::placeholder { color:var(--text-faint); }
  :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:var(--n800); border:1px solid var(--n700); border-radius:12px; padding:16px; margin-bottom:18px;
          transition:opacity .25s, border-color .25s; }
  :where(body.p-review) .card.low { border-color:var(--gold-deep); }
  :where(body.p-review) .card.done-ok { border-color:var(--ok); }
  :where(body.p-review) .card.done-hide { opacity:.45; }

  :where(body.p-review) .card.bh { display:none; }
  :where(body.p-review) #moreCards { width:100%; padding:12px; border-radius:9px; border:1px solid var(--n700);
               background:var(--n800); color:var(--n100); font:600 14px system-ui,sans-serif; cursor:pointer; }
  :where(body.p-review) #moreCards:hover { border-color:var(--line-hover); background:var(--n750); }
  :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:var(--n900); border:1px solid var(--n700); border-radius:6px;
      padding:2px 8px; margin-right:6px; font-size:12.5px; color:var(--n300); }
  :where(body.p-review) .badges .warn { color:var(--gold-deep); border-color:var(--gold-deep); }
  :where(body.p-review) .badges .child { color:var(--mut); }
  :where(body.p-review) .badges .done { color:var(--ok); border-color:var(--ok); }
  :where(body.p-review) .heroline { font-size:19px; font-weight:700; margin:8px 0 2px; }
  :where(body.p-review) .heroline .hp { color:var(--ok-hp); }
  :where(body.p-review) .heroline .vs { color:var(--n300); font-weight:400; font-size:15px; padding:0 4px; }
  :where(body.p-review) .heroline .ha { color:var(--red-soft-b); }
  :where(body.p-review) .heroline .noha { color:var(--n300); font-weight:400; font-size:14px; padding-left:6px; }
  :where(body.p-review) .heroline .q { display:inline-block; background:var(--gold-deep); color:var(--on-gold); 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:var(--n300); 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:var(--n900); border:1px solid var(--n700);
      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; }

  :where(body.p-review) .viewas { position:relative; display:inline-flex; flex:none; }
  :where(body.p-review) .viewas .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) .viewas .avbtn:hover { border-color:var(--line-hover); color:var(--txt); }
  :where(body.p-review) .viewas .avbtn .avarr { font-size:9px; }
  :where(body.p-review) .viewas .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 var(--k-a45); }
  :where(body.p-review) .viewas.open .avlist { display:flex; }
  :where(body.p-review) .viewas .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) .viewas .avlist span:hover { color:var(--txt); }
  :where(body.p-review) .viewas .avlist span.on { background:var(--brand); color:var(--onbrand); }

  :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; }

  @media (max-width:920px) {
  @media (max-width:920px) { body:where(.p-review) { padding:14px; }}}
html:has(body.p-reviews) { overflow-x:clip; }

  body:where(.p-reviews) {
    --brand:var(--acc); --bg:var(--n900); --panel:var(--n800); --panel2:var(--n750);
    --text:var(--n100); --muted:var(--n300); --line:var(--n700); --err:var(--bad);

    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:var(--on-acc-deep); --brand2:var(--acc-hi);
  }
  :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; }
  :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}

  :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:var(--n900); 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}

  :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}

  :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, var(--acc-hi-a28), 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}

  :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}
  :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}}

  :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}

  :where(body.p-reviews) .clipbox video {position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--ink-black)}

  :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:var(--ink-a93)}
  :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}

  :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:var(--n0); pointer-events:none;
              background:linear-gradient(180deg, var(--deep-a92) 0%,
                         var(--deep-a66) 52%, var(--deep-a00) 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) {
  :where(body.p-reviews) .viewas { position:relative; display:inline-flex; flex:none; }
  :where(body.p-reviews) .viewas .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, var(--n300)); font:600 12px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; }
  :where(body.p-reviews) .viewas .avbtn:hover { border-color:var(--line-hover); color:var(--txt, var(--n100)); }
  :where(body.p-reviews) .viewas .avbtn .avarr { font-size:9px; }
  :where(body.p-reviews) .viewas .avlist { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:160;
                     background:var(--card, var(--n800)); border:1px solid var(--line); border-radius:10px;
                     padding:4px; min-width:132px; flex-direction:column; box-shadow:0 10px 26px var(--k-a45); }
  :where(body.p-reviews) .viewas.open .avlist { display:flex; }
  :where(body.p-reviews) .viewas .avlist span { padding:7px 12px; font-size:12px; font-weight:600; color:var(--mut, var(--n300));
                          cursor:pointer; border-radius:7px; white-space:nowrap; }
  :where(body.p-reviews) .viewas .avlist span:hover { color:var(--txt, var(--n100)); }
  :where(body.p-reviews) .viewas .avlist span.on { background:var(--brand); color:var(--onbrand, var(--on-acc-deep)); }}
  body:where(.p-stats-check) { background:var(--n900); color:var(--text-check); font:14px/1.5 'Inter',system-ui,sans-serif; margin:0; padding:0; }

  :where(body.p-stats-check) .pool { max-width:1000px; margin:0 auto; }

  :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 var(--line-panel); border-radius:10px;
                   color:var(--text-check); font-size:13.5px; cursor:pointer; }
  :where(body.p-stats-check) .admrow .achip:hover { border-color:var(--acc-check); color:var(--acc-check); }
  :where(body.p-stats-check) .admrow .achip.on { background:var(--acc-check); border-color:var(--acc-check); color:var(--n900); font-weight:700; }
  :where(body.p-stats-check) h1 { font-size:20px; color:var(--acc-check); margin:0 0 4px; }
  :where(body.p-stats-check) .sub { color:var(--n300); font-size:12.5px; margin-bottom:16px; }
  :where(body.p-stats-check) .box { border:1px solid var(--line-panel); border-radius:12px; background:var(--n800); padding:14px 16px; margin-bottom:14px; }
  :where(body.p-stats-check) .sec { font-weight:600; font-size:13px; color:var(--n300); 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 var(--line-panel); border-radius:8px; padding:4px 10px; font-size:12.5px; color:var(--text-check); }
  :where(body.p-stats-check) .chip b { color:var(--ok-leaf); }
  :where(body.p-stats-check) input#flt { width:100%; background:var(--n900); border:1px solid var(--line-panel); border-radius:10px;
              color:var(--text-check); padding:9px 12px; font:inherit; outline:none; }
  :where(body.p-stats-check) input#flt:focus { border-color:var(--acc-check); }
  :where(body.p-stats-check) details { border:1px solid var(--line-panel); border-radius:10px; margin-bottom:8px; background:var(--n800); }
  :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:var(--acc-check); }
  :where(body.p-stats-check) details[open] summary:before { content:'▾ '; }
  :where(body.p-stats-check) summary:hover { color:var(--acc-check); }
  :where(body.p-stats-check) summary .cnt { margin-left:auto; color:var(--bad-warm); font-weight:700; }
  :where(body.p-stats-check) .row { display:flex; gap:10px; align-items:baseline; padding:6px 14px; border-top:1px solid var(--line-panel); font-size:13px; flex-wrap:wrap; }
  :where(body.p-stats-check) .row .dt { color:var(--n300); 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:var(--n300); }
  :where(body.p-stats-check) .row a { color:var(--n300); text-decoration:none; margin-left:auto; }
  :where(body.p-stats-check) .row a:hover { color:var(--acc-check); }
  :where(body.p-stats-check) .empty { color:var(--n300); padding:8px 0; }
  :where(body.p-stats-check) .hid { display:none; }
html:has(body.p-win) {overflow-x:clip}

  body:where(.p-win) { --brand:var(--acc); --bg:var(--n900); --panel:var(--n800); --panel2:var(--n750);
         --text:var(--n100); --muted:var(--n300); --line:var(--n700); --err:var(--bad);
         --txt:var(--text); --mut:var(--muted); --card:var(--panel);
         --onbrand:var(--on-acc-deep); --brand2:var(--acc-hi); }
  :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:var(--n900); 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:var(--acc); --bg:var(--n900); --panel:var(--n800); --panel2:var(--n750);
    --text:var(--n100); --muted:var(--n300); --line:var(--n700); --err:var(--bad);

    --txt:var(--text); --mut:var(--muted); --card:var(--panel);
    --onbrand:var(--on-acc-deep); --brand2:var(--acc-hi);
  }
  :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, :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:var(--n900); 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%, var(--acc-a07), 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}

  :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}

  :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:var(--ink-black)}
  :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:var(--ink-a93)}
  :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)}

  :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:var(--n0); pointer-events:none;
              background:linear-gradient(180deg, var(--deep-a92) 0%,
                         var(--deep-a66) 52%, var(--deep-a00) 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}}

  :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%, var(--acc-a08), 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}}

  :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}}

: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;}

: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:900px; border:0; transition:height .15s ease-in-out;}

/* ----- пульт сравнения реплеев: режим · герой и пара · реплеи · таймлайн · панели ----- */
:where(body.p-patterns) .ptbar {position:relative; gap:var(--sp-4) var(--sp-5);}
:where(body.p-patterns) .ptsum {display:flex; align-items:center; gap:8px; min-width:0; font:400 var(--fs-s)/1 var(--f-body); color:var(--n200);}
:where(body.p-patterns) .ptsum img {width:27px; height:18px; object-fit:cover; border-radius:3px; display:block;}
:where(body.p-patterns) .ptsum img[hidden] {display:none;}
:where(body.p-patterns) .ptsum b {font-weight:600; color:var(--n0); white-space:nowrap;}
:where(body.p-patterns) .ptsum b:empty {display:none;}
:where(body.p-patterns) .ptnum {font-variant-numeric:tabular-nums; color:var(--acc);}
:where(body.p-patterns) .ptvs {color:var(--n400); font-size:var(--fs-xs);}
:where(body.p-patterns) .ptlink {color:var(--n300); font-size:var(--fs-xs); cursor:pointer; border-bottom:1px dashed var(--n500); line-height:1.2; user-select:none;}
:where(body.p-patterns) .ptlink:hover, :where(body.p-patterns) .ptlink.on {color:var(--acc); border-bottom-color:var(--acc);}
:where(body.p-patterns) .ptcmp {display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; margin-left:auto;}
:where(body.p-patterns) .ptcmp .chips {gap:4px;}
:where(body.p-patterns) .ptlbl {font:600 10.5px/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:var(--n400); margin-right:-8px;}
:where(body.p-patterns) .pthk {position:relative; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px;
      border:1px solid var(--n600); border-radius:var(--r-sm); font:400 var(--fs-xs)/1 var(--f-body); color:var(--n100); cursor:help; user-select:none;}
:where(body.p-patterns) .pthk:hover, :where(body.p-patterns) .pthk:focus {border-color:var(--acc); color:var(--acc); outline:none;}
:where(body.p-patterns) .pthk-p {display:none; position:absolute; top:34px; right:0; width:440px; max-width:calc(100vw - 32px); z-index:70;
      background:var(--n800); border:1px solid var(--n600); border-radius:var(--r-md); padding:12px 14px;
      box-shadow:0 24px 64px var(--k-a56); cursor:default; color:var(--n300); font-size:var(--fs-xs); line-height:1.4;
      flex-direction:column; gap:5px;}
:where(body.p-patterns) .pthk:hover .pthk-p, :where(body.p-patterns) .pthk:focus .pthk-p {display:flex;}
:where(body.p-patterns) .pthk-p b {color:var(--n0); font-weight:600;}

/* ----- выбор героя и пары: коробка без пары, всплывашка при паре ----- */
:where(body.p-patterns) .ptpick-h {display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-3); padding-right:28px;}
:where(body.p-patterns) .ptpick-x {position:absolute; top:12px; right:14px; color:var(--n300); cursor:pointer; font-size:16px; line-height:1; padding:2px 4px; user-select:none;}
:where(body.p-patterns) .ptpick-x:hover {color:var(--n0);}
:where(body.p-patterns) .ptpick-g {display:grid; grid-template-columns:max-content 1fr; gap:var(--sp-3) var(--sp-4); align-items:start; margin-top:var(--sp-3);}
:where(body.p-patterns) .ptpick-g .ptctl-l {padding-top:6px;}
:where(body.p-patterns) .ptpick-m {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-patterns) .ptpick-m 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:140px; font-variant-numeric:tabular-nums;}
:where(body.p-patterns) .ptpick-m input:focus {outline:none; border-color:var(--acc);}
:where(body.p-patterns) #pt-replay, :where(body.p-patterns) #pt-one {position:relative;}
:where(body.p-patterns) .ptpick {position:relative;}
:where(body.p-patterns) .ptpick-m input.wide {width:min(360px, 100%);}
:where(body.p-patterns) .ptpick-m .btn {min-height:28px; height:28px; padding:0 12px; font-size:var(--fs-s);}
/* подсказка гостю под коробкой мини реплея: куда ведёт аккаунт и Steam-вход тут же */
:where(body.p-patterns) .pthint {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); font:400 var(--fs-xs)/1.5 var(--f-body); color:var(--n400);}
:where(body.p-patterns) .pthint span {flex:1 1 280px;}
:where(body.p-patterns) .ptsteam {display:inline-flex; align-items:center; gap:6px; min-height:28px; height:28px; padding:0 10px;
      font-size:var(--fs-xs); background:var(--steam); border-color:var(--steam-line); color:var(--on-solid); white-space:nowrap;}
:where(body.p-patterns) .ptsteam:hover, :where(body.p-patterns) .ptsteam:active {background:var(--steam); border-color:var(--steam-hi); color:var(--on-solid);}
:where(body.p-patterns) .ptpick-pop {position:absolute; top:0; left:0; width:min(820px, 100%); z-index:60;
      margin:0; box-shadow:0 24px 64px var(--k-a56); max-height:70vh; overflow:auto;}
:where(body.p-patterns) #pt-replay[hidden] {display:none;}

@media (max-width:900px) {
  :where(body.p-patterns) .ptcmp {margin-left:0; width:100%;}
  :where(body.p-patterns) .pthk-p {right:auto; left:0;}
  :where(body.p-patterns) .ptpick-g {grid-template-columns:1fr;}
  :where(body.p-patterns) .ptpick-g .ptctl-l {padding-top:0;}
}

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

: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 var(--k-a45); }
: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; }

.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; } }

.csfloat { position:fixed; inset:auto var(--sp-4) var(--sp-4) auto; z-index:340;
      display:inline-flex; align-items:center; gap:7px; box-sizing:border-box;
      max-width:calc(100vw - var(--sp-6)); padding:8px 13px; border-radius:var(--r-pill);
      background:var(--n850); border:1px solid var(--acc-line); color:var(--acc);
      text-decoration:none; font:600 12.5px/1 var(--f-body); box-shadow:var(--el2); }
body > .csfloat, .wrap:has(> .site-footer) > .csfloat { width:max-content; }
.csfloat:hover { border-color:var(--acc); }
.csfloat svg { flex:none; }
.csfloat b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }

@media (max-width:720px) { .csfloat { bottom:calc(56px + var(--sp-3)); } }

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-tiles.five { grid-template-columns:repeat(5,1fr); gap:var(--sp-2); }
:where(body.p-legal) .lg-tiles.five .lg-tile { padding:13px 14px; }
:where(body.p-legal) .lg-tiles.five .lg-ic { width:28px; height:28px; border-radius:8px; }
:where(body.p-legal) .lg-tiles.five .lg-tile .lg-ic { margin-bottom:8px; }
:where(body.p-legal) .lg-tiles.five .lg-tile h3 { font-size:13px; }
:where(body.p-legal) .lg-tiles.five .lg-tile p { font-size:12px; line-height:1.45; }
: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:var(--bad-a34); }
: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:var(--warn-a34); }
: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-ask { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
:where(body.p-legal) .lg-btn { display:flex; align-items:center; justify-content:center; gap:9px;
      min-height:46px; padding:12px 18px; border-radius:var(--r-md); background:transparent;
      border:1px solid var(--n600); color:var(--n100); text-decoration:none;
      font:600 var(--fs-s)/1.3 var(--f-body); }
:where(body.p-legal) .lg-ask .lg-btn { margin-top:0; }
:where(body.p-legal) .lg-btn svg { fill:currentColor; stroke:none; flex:none; }
:where(body.p-legal) .lg-btn:hover { border-color:var(--acc); color:var(--acc); }
: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, :where(body.p-legal) .lg-tiles.five { grid-template-columns:repeat(2,1fr); }
  :where(body.p-legal) .lg-tiles.five .lg-tile, :where(body.p-legal) .lg-tiles.five .lg-tile:nth-child(4) { grid-column:auto; }
}
@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, :where(body.p-legal) .lg-tiles.five { 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; } }


/* ===== КНОПКА «НАВЕРХ» — ОБЩАЯ (13.08) =====================================
   Одна на все страницы. Старые копии в базе и на герое перекрываются этим
   блоком: специфичность равная, этот ниже по файлу. На мобилке кнопка
   поднята над нижней навигацией. */
#toTop { position:fixed; right:22px; bottom:22px; z-index:60; display:none;
         width:46px; height:46px; border-radius:50%; border:1px solid var(--line, var(--n700));
         background:var(--card, var(--panel, var(--n800))); color:var(--txt, var(--text, var(--n100)));
         font-size:19px; cursor:pointer; }
#toTop:hover { background:var(--btn-hover-bg); border-color:var(--line-hover); color:var(--n0); }
@media (max-width:920px) { #toTop { bottom:78px; } }

/* ============ ОПЛАТА: касса, табы способов и панели ============
   Живут в модалке «Взять Про» (pay_inc.php), кассе заявки (coaching.php)
   и кассе /pricing. Активный таб — тёмная панель с лаймовой рамкой,
   логотипы способов всегда в фирменном цвете. */
.pw-head { display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; }
.pw-rub { font:700 26px/1 'Oswald',sans-serif; color:var(--n0); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pw-eq { font:700 19px/1 'Oswald',sans-serif; color:var(--acc); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pw-for { font-size:13px; color:var(--n300); }
.pw-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:12px; }
.pw-tabs.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pw-tabs.one { grid-template-columns:minmax(0,1fr); }
.pw-tab { display:flex; align-items:center; justify-content:center; gap:7px; min-height:46px;
  border:1px solid var(--line,var(--n700)); border-radius:10px; background:var(--n800); color:var(--text-kda);
  font:600 13px/1 'Inter',sans-serif; cursor:pointer; transition:all .15s ease-in-out; padding:0 8px;
  white-space:nowrap; }
.pw-tab:hover { border-color:var(--line-soft); background:var(--n750); }
.pw-tab.on { border-color:var(--acc); background:var(--n750); color:var(--n0); cursor:default; }
.pw-pane { border-top:1px solid var(--line,var(--n700)); padding-top:12px; margin-top:12px; }
.pw-cap { font:600 11px/1 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--n400); }
.pw-sum { font:700 22px/1 'Oswald',sans-serif; color:var(--n0); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pw-note { font-size:12.5px; color:var(--n300); line-height:1.55; margin-top:6px; }
.pw-chip { font:700 10.5px/1 'Inter',sans-serif; color:var(--acc); background:var(--acc-soft);
  border:1px solid var(--acc-a30); border-radius:5px; padding:3px 5px; white-space:nowrap; }
/* Кнопка действия: тёмная с лаймовой рамкой — на лайме фирменный логотип не виден.
   Лаймовая заливка (.lime) остаётся кнопкам без логотипа. */
.pw-go { display:flex; align-items:center; justify-content:center; gap:9px; min-height:50px; width:100%;
  box-sizing:border-box; border-radius:10px; background:var(--n750); border:1.5px solid var(--acc); color:var(--n0);
  text-decoration:none; font:700 14.5px/1.35 'Inter',sans-serif; padding:9px 14px; margin-top:11px;
  cursor:pointer; transition:background .15s ease-in-out; }
.pw-go:hover { background:var(--n700); }
.pw-go.lime { background:var(--acc); border-color:var(--acc); color:var(--on-acc); }
.pw-go.lime:hover { background:var(--acc-hi); border-color:var(--acc-hi); }
.pw-go.off { opacity:.55; pointer-events:none; }
.pw-go.ok { border-color:var(--acc-hi); background:var(--n700); }
.pw-gorow { display:flex; gap:9px; align-items:stretch; margin-top:11px; }
.pw-gorow .pw-go { margin-top:0; flex:1 1 auto; min-width:0; }
.pw-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px;
  padding:0 15px; border:1px solid var(--line,var(--n700)); border-radius:10px; background:transparent;
  color:var(--n100); font:600 13.5px/1.35 'Inter',sans-serif; text-decoration:none; cursor:pointer;
  flex:none; transition:all .15s ease-in-out; }
.pw-ghost:hover { border-color:var(--line-soft); background:var(--w-a025); }
.pw-addr { display:flex; gap:8px; margin-top:11px; }
.pw-addr code { flex:1; min-width:0; overflow-wrap:anywhere; display:flex; align-items:center;
  font:600 12.5px/1.4 ui-monospace,Consolas,monospace; border:1px solid var(--line,var(--n700));
  border-radius:10px; padding:9px 11px; color:var(--n100); background:var(--k-a20); }
/* Запасной путь к боту, когда t.me не открывается: одна серая строка под кнопкой,
   имя бота и команда — копируемые чипы, никаких вторых кнопок. */
.pw-tghelp { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin-top:9px;
  font-size:12.5px; line-height:1.6; color:var(--n300); }
.pw-tghelp-q { color:var(--n200); font-weight:600; }
.pw-tghelp-s { color:var(--n500); }
.pw-tghelp a { color:var(--n300); text-decoration:underline; text-underline-offset:2px; }
.pw-tghelp a:hover { color:var(--n100); }
.pw-cp { display:inline-flex; align-items:center; font:600 12px/1 ui-monospace,Consolas,monospace;
  color:var(--n100); background:var(--w-a04); border:1px solid var(--line,var(--n700));
  border-radius:6px; padding:4px 7px; cursor:pointer; white-space:nowrap; transition:all .15s ease-in-out; }
.pw-cp:hover { border-color:var(--line-soft); background:var(--w-a07); }
.pw-cp.ok { border-color:var(--acc); color:var(--acc); }
.pw-per { position:relative; display:flex; align-items:center; gap:10px; border:1px solid var(--line,var(--n700));
  border-radius:10px; padding:11px 13px; cursor:pointer; transition:all .15s ease-in-out; }
.pw-per:hover { border-color:var(--n600); }
.pw-per input { position:absolute; opacity:0; width:0; height:0; }
.pw-per.on { border-color:var(--acc); background:var(--acc-a09); box-shadow:inset 0 0 0 1px var(--acc); }
.pw-dot { position:relative; width:16px; height:16px; flex:none; border-radius:50%;
  border:1.5px solid var(--n500); box-sizing:border-box; }
.pw-per.on .pw-dot { border-color:var(--acc); }
.pw-per.on .pw-dot::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--acc); }
.pw-price { font:700 15px/1 'Oswald',sans-serif; color:var(--n0); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pw-pills { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:10px 0; }
.pw-pill { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 12px;
  border:1px solid var(--line,var(--n700)); border-radius:9px; color:var(--n300); font:600 12.5px/1 'Inter',sans-serif; }
.pw-pill.on { border-color:var(--acc); background:var(--acc); color:var(--on-acc); font-weight:700; }
.pw-tg { display:inline-flex; align-items:center; gap:7px; font:600 12.5px/1.3 'Inter',sans-serif;
  color:var(--n100); border:1px solid var(--n600); border-radius:9px; padding:8px 12px; text-decoration:none;
  margin-left:auto; transition:all .15s ease-in-out; }
.pw-tg:hover { border-color:var(--n500); background:var(--n750); }
/* карточки форматов коучинга: на RU рубль главный, «= $N» рядом и крупно */
.cpk-p .cpk-rmain { font-variant-numeric:tabular-nums; white-space:nowrap; }
.cpk-p .cpk-ueq { font:600 16px/1 'Oswald',sans-serif; color:var(--acc); margin-left:5px; white-space:nowrap; }
.cpk.on .cpk-p .cpk-rmain { color:var(--acc); }
@media (max-width:560px) {
  .pw-tab { min-height:48px; font-size:12.5px; gap:5px; padding:0 5px; }
  .pw-per { flex-wrap:wrap; row-gap:4px; }
  .pw-price { font-size:13.5px; }
  .pw-tg { margin-left:0; }
  .pw-rub { font-size:23px; }
  .pw-eq { font-size:17px; }
  .pw-gorow { flex-direction:column; }
  .pw-gorow .pw-ghost { width:100%; }
}
@media (max-width:360px) { .pw-tab { font-size:11.5px; gap:4px; padding:0 3px; } }
@media (max-width:560px) { :where(body.p-coaching) details.ed>summary { text-align:center; } }
/* Пояснялка «(?)» на узком экране: пузырь уезжал вправо за край экрана.
   Ниже 720px сам .qtip перестаёт быть якорем — пузырь растягивается от края
   до края ближайшей карточки (или страницы) и остаётся ПОД вопросиком:
   вертикаль даёт его собственное место в потоке, а не координата якоря. */
@media (max-width:720px){
  :where(body.p-profile) .qtip,
  :where(body.p-coaching) .qtip {position:static}
  :where(body.p-profile) .qtip .qtip-b,
  :where(body.p-coaching) .qtip .qtip-b {left:12px; right:12px; top:auto; width:auto; margin-top:8px}
}

/* Плашка «подписка кончается»: компактная строка, крестик прячет её до
   следующего дня. */
.subnote { display:flex; align-items:center; gap:10px; padding:10px 12px;
           border-radius:var(--r-md); background:var(--amber-a07); }
.subnote b { font-size:14px; }
.subnote-x { margin-left:auto; flex:none; width:24px; height:24px; display:flex;
             align-items:center; justify-content:center; cursor:pointer; padding:0;
             border-radius:50%; background:var(--amber-a14); color:var(--amber);
             border:1px solid var(--amber-a55);
             font:700 17px/1 var(--f-body); }
.subnote-x:hover { background:var(--amber); border-color:var(--amber); color:var(--on-gold); }

/* ============ ГРУППОВЫЕ ЗАНЯТИЯ: два таба коучинга и карточки занятий =======
   Разметку строит site/group_inc.php. Кроме табов тут почти нет своего:
   карточка, кнопка и метка берутся общие (.card / .btn / .tag), чтобы экран
   занятий не жил по своим законам. */
.gl-pane[hidden] { display:none !important; }
.gl-tab { font:600 14px/1 var(--f-body); padding:9px 16px; cursor:pointer;
          border-radius:var(--r-pill); border:1px solid var(--n700);
          background:transparent; color:var(--n300); }
.gl-tab:hover { color:var(--n100); border-color:var(--n500); }
/* активный фильтр белый, не лаймовый: лайм на экране только у следующего шага */
.gl-tab.on { background:var(--n700); border-color:var(--n400); color:var(--n0); }

.gl-les { margin:0 0 12px; }
/* ближайшее занятие выделено кромкой: на экране всегда одно «что дальше» */
.gl-next { border-color:var(--acc-line); }
.gl-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.gl-title { font-size:var(--fs-h2); }
.gl-when { color:var(--n300); font-size:var(--fs-s); }
.gl-pos { display:inline-flex; align-items:center; gap:5px; color:var(--s-coach);
          font-size:var(--fs-s); font-weight:600; }
.gl-plan, .gl-ask, .gl-qs, .gl-planf, .gl-wrapf, .gl-new { margin-top:10px; }
.gl-plan > summary, .gl-ask > summary, .gl-qs > summary,
.gl-planf > summary, .gl-wrapf > summary, .gl-new > summary { cursor:pointer; font-weight:600; }
.gl-voice { font-size:var(--fs-s); margin-top:8px; }
.gl-h { margin:22px 0 10px; }

.gl-q { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
        padding:8px 0; border-top:1px solid var(--n800); }
.gl-q > div { flex:1 0 100%; }
.gl-x { width:22px; height:22px; flex:none; cursor:pointer; padding:0;
        border-radius:50%; border:1px solid var(--n600); background:transparent;
        color:var(--n300); font:700 15px/1 var(--f-body); }
.gl-x:hover { border-color:var(--bad); color:var(--bad); }

.gl-askf, .gl-form { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.gl-askf textarea, .gl-askf > button, .gl-wide, .gl-form .gl-chk { grid-column:1 / -1; }
.gl-form label, .gl-askf label:not(.gl-posl) { display:flex; flex-direction:column; gap:4px;
                 font-size:var(--fs-s); color:var(--n300); }
.gl-askf label:not(.gl-posl) input, .gl-askf label:not(.gl-posl) select { width:100%; }
.gl-form .gl-chk { flex-direction:row; align-items:center; gap:8px; }
/* Позиции и дни недели — ряд плашек-переключателей: пять чекбоксов в столбик
   занимали бы пол-экрана формы. */
.gl-cap { display:block; font-size:var(--fs-s); color:var(--n300); margin-bottom:4px; }
/* Подпись «в Москве …»: тренер ставит час по своему поясу, а аудитория русская. */
.gl-msk:not(:empty) { font-size:var(--fs-s); color:var(--acc); }
.gl-msk-tag { font-size:var(--fs-s); color:var(--n300); }
/* Таймкод в конспекте — ссылка в это место записи. */
.gl-tc { color:var(--acc); text-decoration:none; font-variant-numeric:tabular-nums; }
.gl-tc:hover { text-decoration:underline; }
/* «где мы сейчас в записи»: последний пройденный таймкод помечается плашкой,
   пока играет встроенный плеер. Цвет тот же — меняется только фон. */
.gl-tc.on { background:var(--acc-soft); border-radius:5px; padding:0 4px; margin:0 -4px; font-weight:700; }
/* ПЛЕЕР ЗАПИСИ В КАРТОЧКЕ ЗАНЯТИЯ. Кадр 16:9 держит padding-top: высота у iframe
   своя, и без обёртки он схлопывается в ноль. */
.gl-plw { margin:10px 0 12px; }
/* Кадр 16:9 держит padding-top: у iframe высота своя, и без обёртки он
   схлопывается в ноль. Плеер стоит открытым сразу — кнопки запуска нет. */
.gl-pl { position:relative; width:100%; padding-top:56.25%; border:1px solid var(--n700);
         border-radius:10px; overflow:hidden; background:var(--n850); }
.gl-pl > * { position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Записи ещё нет — плашка на месте плеера, полосой, а не пустым кадром. */
.gl-pl-none { padding:14px 12px; display:flex; align-items:center; justify-content:center;
              color:var(--n400); font-size:var(--fs-s); border-style:dashed; }
.gl-pl-none > * { position:static; }
.gl-spd { margin-top:6px; }
.gl-poss { display:flex; flex-wrap:wrap; gap:6px; }
.gl-posl { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
           padding:7px 12px; border:1px solid var(--n700); border-radius:var(--r-pill);
           font-size:var(--fs-s); color:var(--n200); }
.gl-posl:has(input:checked) { border-color:var(--acc-line); background:var(--acc-soft);
                              color:var(--acc); }
.gl-qact { display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
.gl-stage { margin-top:10px; }

/* СЫРАЯ ТРАНСКРИПЦИЯ ЗАНЯТИЯ в пульте тренера: реплики бота столбиком, время
   слева монолитной колонкой. Высота ограничена — иначе полуторачасовое занятие
   растягивает карточку на десятки экранов. */
.gl-tr { max-height:340px; overflow:auto; margin-top:8px; padding:10px 12px;
         border:1px solid var(--n800); border-radius:var(--r-md);
         background:var(--n900); font-size:var(--fs-s); line-height:1.5; }
.gl-tr-l { display:flex; gap:8px; padding:3px 0; }
.gl-tr-t { flex:none; color:var(--n400); font-variant-numeric:tabular-nums; }
.gl-tr-s { flex:none; color:var(--acc); }

/* ПЕРЕКЛЮЧАТЕЛЬ «ВПЕРЕДИ / МОИ / БИБЛИОТЕКА». Плашки те же, что у верхних табов,
   но мельче: это фильтр внутри таба, а не второй ряд навигации. */
.gl-when { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.gl-when .gl-tab { font-size:13px; padding:7px 14px; }
.gl-list[hidden] { display:none !important; }

/* ОТВЕТ, КОТОРЫЙ УЕХАЛ УЧЕНИКУ — только показ: пишет его бот из записи занятия,
   руками тренер текст не набирает. */
.gl-qa { flex:1 0 100%; margin-top:6px; padding:9px 11px; border-radius:var(--r-md);
         border-left:2px solid var(--acc-line); background:var(--acc-soft); }
.gl-qa b { display:block; margin-bottom:3px; font-size:var(--fs-s); color:var(--n200); }

/* «Ответ на твой вопрос» — блок именной, поэтому отбит кромкой акцента */
.gl-ans { margin-top:10px; padding:10px 12px; border-radius:var(--r-md);
          border-left:2px solid var(--acc-line); background:var(--acc-soft); }
.gl-ans b { display:block; margin-bottom:4px; }
/* вопрос, до которого в тот раз не дошли: тот же блок, но без акцента —
   зелёная рамка на «не досталось» читается как удача */
.gl-ans-no { border-left-color:var(--n600); background:var(--n850); }
.gl-note { border-color:var(--acc-line); }

/* медаль под полем ММР в профиле: пусто, пока число не введено */
.pf-rank:empty { display:none; }
.pf-rank { display:flex; align-items:center; gap:7px; margin:-4px 0 2px;
           font:700 var(--fs-b)/1 var(--f-body); color:var(--n0); }
.pf-rank img { display:block; flex:none; }

/* ---- ГРУППЫ ПО ММР И ОЧЕРЕДЬ РАЗБОРА ----
   Группа занятия и медаль человека — плашки одного роста, чтобы шапка карточки
   не прыгала. Цветом разделены только группы: медаль и так узнаётся картинкой. */
.gl-tier { display:inline-flex; align-items:center; height:22px; padding:0 9px;
           border-radius:var(--r-pill); border:1px solid var(--n700);
           font:600 var(--fs-s)/1 var(--f-body); color:var(--n200); white-space:nowrap; }
.gl-tier-low  { border-color:var(--n600); color:var(--n100); }
.gl-tier-high { border-color:var(--warn); color:var(--warn); background:var(--warn-soft); }

.gl-rank { display:inline-flex; align-items:center; gap:5px;
           font:600 var(--fs-s)/1 var(--f-body); color:var(--n100); }
.gl-rank img { display:block; flex:none; }
.gl-rank-n { font-family:var(--f-num); font-weight:700; color:var(--n300); }

/* очередь: «ещё ни разу не разбирал» — единственное, что тренер ищет глазами,
   поэтому только оно и красится */
.gl-prio { font:500 var(--fs-s)/1.3 var(--f-body); color:var(--n400); }
.gl-prio.hi { color:var(--acc); font-weight:600; }

/* карточка «твоя группа и очередь» — одна строка сверху таба */
.gl-me { display:flex; align-items:center; justify-content:space-between;
         flex-wrap:wrap; gap:10px; margin:0 0 12px; }
.gl-me-l, .gl-me-q { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.gl-qn { font:500 var(--fs-s)/1 var(--f-body); color:var(--n300); }
.gl-qn b { font:700 var(--fs-h2)/1 var(--f-num); color:var(--n0); margin-right:4px; }

/* строка круга разбора: ник, медаль, два числа и подпись очереди в одну линию */
.gl-qr { display:flex; align-items:center; flex-wrap:wrap; gap:10px;
         padding:7px 0; border-top:1px solid var(--n800); }
.gl-qr-n { min-width:140px; font:600 var(--fs-b)/1 var(--f-body); color:var(--n0); }

/* дни серии: день и его группа стоят парой — иначе не видно, что вторник
   низкий, а четверг высокий */
.gl-days { display:flex; flex-wrap:wrap; gap:8px; }
.gl-day { display:flex; align-items:center; gap:6px; }
.gl-day select { max-width:180px; }

/* ПОДСКАЗКА ВОПРОСИКОМ — фирменный пузырь вместо браузерного title (тот на таче
   мёртв). Держится на :hover И :focus, поэтому на телефоне открывается тапом. */
.cs-tip { position:relative; display:inline-flex; align-items:center; justify-content:center;
          box-sizing:border-box; min-width:17px; min-height:17px; flex:none;
          padding:1px 5px; border-radius:999px; cursor:help;
          border:1px solid var(--n600); background:transparent; color:var(--n300);
          font:700 11px/1 var(--f-body); vertical-align:middle; }
.cs-tip:hover, .cs-tip:focus { color:var(--acc); border-color:var(--acc-line); outline:none; }
/* картинке-подсказке капсула не нужна: отступ съел бы саму картинку */
img.cs-tip { padding:0; }
/* подсказка на СЛОВЕ, а не иконкой: рамки нет, знак «наведись» — пунктир под текстом */
.cs-tip.cs-word { display:inline; min-width:0; min-height:0; padding:0; border:0; border-radius:0; font:inherit; color:inherit; }
.cs-tipb { display:none; position:absolute; left:50%; bottom:calc(100% + 8px);
           transform:translateX(-50%); z-index:60; width:max-content;
           max-width:min(320px, 78vw); padding:10px 12px; border-radius:var(--r-md);
           border:1px solid var(--n700); background:var(--n850); color:var(--n100);
           font:500 var(--fs-s)/1.55 var(--f-body); text-align:left; white-space:normal;
           box-shadow:0 10px 28px var(--k-a45); cursor:auto; }
.cs-tip:hover .cs-tipb, .cs-tip:focus .cs-tipb { display:block; }
/* на узком экране пузырь ставится во всю ширину снизу: 320px рядом со значком
   вылезли бы за край, и половина текста осталась бы за кадром */
@media (max-width:720px) {
  .cs-tipb { position:fixed; left:8px; right:8px; bottom:12px; top:auto;
             transform:none; width:auto; max-width:none; }
}

/* ПРАВИМЫЙ ВОПРОС: строка-заголовок раскрывается в форму. Тот же вид, что у
   строки вопроса, поэтому список читается одинаково — раскрытый и закрытый. */
.gl-qe { border-top:1px solid var(--n800); }
.gl-qe > summary { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
                   padding:9px 0; cursor:pointer; list-style:none; }
.gl-qe > summary::-webkit-details-marker { display:none; }
.gl-qe > summary::after { content:'✎'; margin-left:auto; color:var(--n400); font-size:13px; }
.gl-qe[open] > summary::after { content:'×'; font-size:16px; }
.gl-qe > summary:hover::after { color:var(--acc); }
.gl-qb { flex:1 0 100%; color:var(--n100); }
.gl-qe .row-actions { margin-top:8px; }

/* ЧЕРНОВИК ВОПРОСОВ — склад, а не занятие: кромка нейтральная, чтобы он не
   спорил взглядом с карточкой ближайшего занятия. */
.gl-dr { border-color:var(--n700); }
.gl-dr > summary { color:var(--n100); }
.gl-dr .gl-q:first-of-type, .gl-dr .gl-qe:first-of-type { border-top:none; }
/* выход из правки занятия стоит НАД формой: он и есть ответ на «а как назад» */
.gl-back { margin:0 0 12px; }

/* взятый в разбор и пропущенный вопрос видны из общего списка, без чтения кнопок */
.gl-q.pick { border-left:2px solid var(--acc); padding-left:8px; }
.gl-q.skip { opacity:.55; }
.tag.gl-wait { border-color:var(--warn); color:var(--warn); }

@media (max-width:720px) {
  .gl-askf, .gl-form { grid-template-columns:1fr; }
  .gl-head { gap:6px; }
  .gl-when { flex:1 0 100%; }
  .gl-me { flex-direction:column; align-items:flex-start; }
  .gl-day { flex:1 0 100%; }
  .gl-day select { flex:1 1 auto; max-width:none; }
}


/* ==========================================================================
   ЧЕК-ЛИСТ (/checklist, body.p-checklist) — карта роли по стадиям игры.
   Тексты — site/checklist_data.php; визуальный язык — пилюли и стадии чипов.
   ========================================================================== */
/* алиасы страницы: --card/--line/--txt/--mut/--err2 живут на body каждой
   страницы (образец — p-index), tokens.css их не даёт */
body:where(.p-checklist) { --bg:var(--n900); --card:var(--n800); --line:var(--n700); --txt:var(--n100);
  --mut:var(--n300); --err:var(--bad); --err2:var(--err-bright); }
:where(body.p-checklist) .clwrap { max-width:960px; margin:0; padding:26px 0 60px; }
:where(body.p-checklist) .clwrap h1 { font:600 30px/1.15 var(--f-disp); letter-spacing:.3px; margin:0 0 4px; }
:where(body.p-checklist) .cl-sub { color:var(--mut); font-size:13.5px; margin-bottom:16px; max-width:66ch; }
:where(body.p-checklist) .cl-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:20px; }
:where(body.p-checklist) .cl-badge { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
  background:var(--card); border-radius:999px; padding:6px 13px; font:600 12px var(--f-body); color:var(--txt); }
:where(body.p-checklist) .cl-patch { font-family:var(--f-disp); letter-spacing:.4px; color:var(--acc); }
:where(body.p-checklist) .cl-dot { width:7px; height:7px; border-radius:50%; background:var(--ok); }
:where(body.p-checklist) .cl-print { margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:var(--r-md); padding:8px 15px; font:600 13px var(--f-body);
  color:var(--txt); text-decoration:none; }
:where(body.p-checklist) .cl-print:hover { border-color:var(--n600); }
:where(body.p-checklist) .cl-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
:where(body.p-checklist) .cl-tab { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line);
  background:var(--card); color:var(--txt); border-radius:999px; padding:8px 16px; font:600 13px var(--f-body);
  text-decoration:none; }
:where(body.p-checklist) .cl-tab .cl-pos { display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; background:var(--n700); font:700 11px var(--f-disp); color:var(--txt); }
:where(body.p-checklist) .cl-tab .cl-pos .rico { width:12px; height:12px; margin:0; vertical-align:0; opacity:1; display:block; }
:where(body.p-checklist) .cl-tab.on { background:var(--acc); border-color:var(--acc); color:var(--on-acc); }
/* на лаймовом табе тёмная иконка терялась: кружок — тёмный, иконка — лаймовая */
:where(body.p-checklist) .cl-tab.on .cl-pos { background:var(--on-acc-pit); color:var(--acc); }
:where(body.p-checklist) .cl-tab .cl-lk { opacity:.7; }
:where(body.p-checklist) .cl-free { color:var(--mut); font-size:12.5px; margin-bottom:22px; }
:where(body.p-checklist) .cl-free a { color:var(--acc); font-weight:600; text-decoration:none; }
:where(body.p-checklist) .cl-prog { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 16px; margin-bottom:22px; }
:where(body.p-checklist) .cl-num { font:600 14px var(--f-disp); letter-spacing:.4px; white-space:nowrap; }
:where(body.p-checklist) .cl-bar { flex:1; min-width:120px; height:6px; border-radius:3px; background:var(--n700); overflow:hidden; }
:where(body.p-checklist) .cl-bar i { display:block; height:100%; width:0; background:var(--acc); border-radius:3px; transition:width .25s; }
:where(body.p-checklist) .cl-cap { color:var(--mut); font-size:12.5px; }
:where(body.p-checklist) .cl-stg { display:flex; align-items:center; gap:10px; margin:32px 0 12px; }
:where(body.p-checklist) .cl-d { width:8px; height:8px; border-radius:50%; flex:none; background:var(--n400); }
:where(body.p-checklist) .cl-d-lane { background:var(--info); }
:where(body.p-checklist) .cl-d-mid { background:var(--warn); }
:where(body.p-checklist) .cl-d-late { background:var(--s-hero); }
:where(body.p-checklist) .cl-d-build { background:var(--acc); }
:where(body.p-checklist) .cl-d-iff { background:var(--warn); }
:where(body.p-checklist) .cl-stg h2 { font:600 14px var(--f-disp); letter-spacing:1.2px; text-transform:uppercase; margin:0; }
:where(body.p-checklist) .cl-ln { flex:1; height:1px; background:var(--line); }
:where(body.p-checklist) .cl-t { color:var(--mut); font:500 12px var(--f-body); }
:where(body.p-checklist) .cl-it { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line);
  background:var(--w-a02); border-radius:var(--r-lg); padding:13px 15px; margin-bottom:10px; cursor:pointer; }
:where(body.p-checklist) .cl-it.cl-locked { cursor:default; }
:where(body.p-checklist) .cl-cb { flex:none; width:21px; height:21px; margin-top:1px; border:2px solid var(--n600);
  border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; background:transparent; padding:0; }
:where(body.p-checklist) .cl-cb svg { display:none; }
:where(body.p-checklist) .cl-it.on { border-color:var(--acc-line); background:var(--acc-soft); }
:where(body.p-checklist) .cl-it.on .cl-cb { background:var(--acc); border-color:var(--acc); }
:where(body.p-checklist) .cl-it.on .cl-cb svg { display:block; }
:where(body.p-checklist) .cl-tx { flex:1; min-width:0; }
:where(body.p-checklist) .cl-act { font-weight:600; font-size:14px; }
:where(body.p-checklist) .cl-cost { color:var(--mut); font-size:12.5px; margin-top:3px; }
:where(body.p-checklist) .cl-row { margin-top:9px; }
:where(body.p-checklist) .cl-go { display:inline-flex; align-items:center; gap:6px; border:1px dashed var(--n600);
  border-radius:var(--r-md); padding:4px 11px; font:600 12px var(--f-body); color:var(--mut); text-decoration:none; }
:where(body.p-checklist) .cl-go:hover { color:var(--acc); border-color:var(--acc-line); }
:where(body.p-checklist) .cl-locked .cl-cb { border-style:dashed; cursor:default; }
:where(body.p-checklist) .cl-skel { display:block; height:11px; border-radius:5px; background:var(--n700); margin:4px 0; }
:where(body.p-checklist) .cl-skel2 { height:9px; background:var(--n750); }
:where(body.p-checklist) .cl-iff { display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
  border:1px solid var(--line); border-left:4px solid var(--warn); background:var(--w-a02);
  border-radius:var(--r-lg); padding:12px 15px; margin-bottom:8px; }
:where(body.p-checklist) .cl-if { font:600 11px var(--f-disp); letter-spacing:1px; color:var(--warn);
  text-transform:uppercase; white-space:nowrap; }
:where(body.p-checklist) .cl-cond { font-weight:600; font-size:13.5px; }
:where(body.p-checklist) .cl-arr { color:var(--n400); }
:where(body.p-checklist) .cl-then { font-size:13.5px; flex:1; min-width:200px; }
:where(body.p-checklist) .cl-note { border:1px solid var(--line); border-left:4px solid var(--warn);
  border-radius:var(--r-lg); background:var(--card); padding:15px 17px; margin-bottom:10px; }
:where(body.p-checklist) .cl-nl { font:600 12px var(--f-disp); letter-spacing:.8px; text-transform:uppercase;
  color:var(--warn); margin-bottom:8px; }
:where(body.p-checklist) .cl-note p { font-size:13.5px; margin:0 0 8px; }
:where(body.p-checklist) .cl-hid { display:none; }
:where(body.p-checklist) .cl-note.open .cl-hid { display:block; }
:where(body.p-checklist) .cl-more { background:none; border:0; padding:0; color:var(--acc); font:600 12.5px var(--f-body); cursor:pointer; }
:where(body.p-checklist) .cl-cta { margin-top:34px; border:1px solid var(--acc-line); background:var(--acc-soft);
  border-radius:var(--r-lg); padding:20px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
:where(body.p-checklist) .cl-ctat { flex:1; min-width:240px; }
:where(body.p-checklist) .cl-ctat b { display:block; font:600 17px var(--f-disp); margin-bottom:4px; }
:where(body.p-checklist) .cl-ctat span { color:var(--mut); font-size:13px; }
:where(body.p-checklist) .cl-btn { display:inline-flex; align-items:center; gap:8px; background:var(--acc);
  color:var(--on-acc); border:none; border-radius:var(--r-md); padding:11px 20px; font:700 13.5px var(--f-body);
  cursor:pointer; text-decoration:none; }
:where(body.p-checklist) .cl-btn:hover { background:var(--acc-hi); }
:where(body.p-checklist) .cl-cta-top { margin:0 0 26px; }
/* «Момент, где я это объясняю» — пары и пруфы по образцу ответа чипа (p-index) */
:where(body.p-checklist) .cl-mombtn { background:none; border:0; padding:0; color:var(--acc); font:600 12.5px var(--f-body); cursor:pointer; }
:where(body.p-checklist) .cl-mom { margin-top:4px; }
:where(body.p-checklist) .clabel { font:700 11px var(--f-body); letter-spacing:.07em; text-transform:uppercase; margin:0 0 6px 2px; }
:where(body.p-checklist) .clabel.bad { color:var(--err2); }
:where(body.p-checklist) .clabel.ok { color:var(--ok); }
:where(body.p-checklist) .chp-pair { margin-top:10px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--w-a02); }
:where(body.p-checklist) .chp-ok { border:1px solid var(--grn-a45); border-left:4px solid var(--ok); background:var(--grn-a06); border-radius:10px; padding:12px 14px; }
:where(body.p-checklist) .chp-bad { margin-top:8px; border:1px solid var(--red-a45); border-left:4px solid var(--err2); background:var(--red-a06); border-radius:10px; padding:12px 14px; }
:where(body.p-checklist) .chp-tx { font-size:13.5px; line-height:1.55; }
:where(body.p-checklist) .chp-x { display:flex; align-items:center; gap:8px; width:100%; margin-top:10px; padding:8px 12px; background:transparent; border:1px dashed var(--line); color:var(--mut); border-radius:8px; cursor:pointer; font:600 12.5px var(--f-body); text-align:left; }
:where(body.p-checklist) .chp-x:hover { color:var(--txt); border-color:var(--mut); }
:where(body.p-checklist) .chp-x.open { border-style:solid; border-color:var(--n600); color:var(--txt); }
:where(body.p-checklist) .chp-wait { margin-top:10px; font-size:12.5px; color:var(--n400); }
:where(body.p-checklist) .chp-v { margin-top:10px; }
:where(body.p-checklist) .chp-v video { display:block; width:100%; aspect-ratio:16/9; border-radius:10px; border:1px solid var(--line); background:var(--ink-black); }
:where(body.p-checklist) .chp-v iframe { display:block; width:100%; height:auto; aspect-ratio:16/9; margin:0; border:0; border-radius:10px; }
@media (max-width:720px) {
  :where(body.p-checklist) .cl-print { margin-left:0; flex:1 0 100%; justify-content:center; }
  :where(body.p-checklist) .cl-btn { flex:1 0 100%; justify-content:center; }
  :where(body.p-checklist) .cl-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:6px; scrollbar-width:none; }
  :where(body.p-checklist) .cl-tabs::-webkit-scrollbar { display:none; }
  :where(body.p-checklist) .cl-tab { flex:none; white-space:nowrap; }
}

/* ==== КАРТОЧКА-ВИТРИНА УЧЕНИКА: скрины (этап В) ====
 Два вида одного и того же: блок ЗАГРУЗКИ в кабинете (.shots*) и ПОКАЗ
 в публичной витрине (.shwrap/.sh). Классы не начинаются с ad — адблок режет. */

.shots { margin-top:12px; border:1px solid var(--line); border-radius:12px; padding:12px 13px; background:var(--w-a02); }
.shots-h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:13.5px; }
.shots-h b { font-weight:700; }
.shots-opt { font-size:11px; text-transform:lowercase; letter-spacing:.3px; color:var(--muted);
  border:1px solid var(--line); border-radius:20px; padding:1px 8px; white-space:nowrap; }
.shots-cnt { margin-left:auto; font-size:12px; color:var(--muted); }
.shots-hint { margin-top:6px; font-size:12.5px; line-height:1.5; color:var(--muted); }
.shots-warn { color:var(--gold-warm); }
.shots-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.shot { position:relative; width:140px; margin:0; }
.shot img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:9px;
  border:1px solid var(--line); background:var(--ink-black); }
.shot.wait img { opacity:.62; }
.shot figcaption { margin-top:5px; font-size:11.5px; line-height:1.4; color:var(--muted); overflow-wrap:anywhere; }
.shot figcaption b { color:var(--text); font-weight:700; }
.shot-st { display:block; margin-top:2px; font-size:11px; }
.shot.ok .shot-st { color:var(--ok, var(--ok-mid)); }
.shot.wait .shot-st { color:var(--gold-warm); }
.shot-x { position:absolute; top:5px; right:5px; width:24px; height:24px; line-height:1; border-radius:7px;
  border:1px solid var(--line); background:var(--pit-a82); color:var(--text); font-size:16px; cursor:pointer; }
.shot-x:hover { border-color:var(--err); color:var(--err); }
.shots-add { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:11px; }
.shots-add .shots-cap { flex:1 1 220px; min-width:0; }
.shots-add .shots-mmr { width:104px; flex:none; }
.shots-go { padding:8px 14px; border-radius:9px; border:1px solid var(--line); background:transparent;
  color:var(--text); font-weight:700; font-size:13px; cursor:pointer; }
.shots-go:hover { border-color:var(--brand); color:var(--brand); }
.shots-msg { display:block; margin-top:7px; font-size:12.5px; color:var(--muted); }
@media (max-width:720px) {
  .shot { width:calc(50% - 5px); }
  .shots-add .shots-cap { flex:1 1 100%; }
}

/* ---- показ в публичной витрине ---- */
/* Плашка дышит: звезда отдельным знаком крупнее букв, между ней и текстом —
   воздух, буквы разрежены. Прежние 3px сверху и слипшийся «★Л» читались как
   один сжатый ком. */
:where(body.p-reviews) .wwk { display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:800; letter-spacing:.75px; text-transform:uppercase; line-height:1;
  color:var(--n900, var(--on-acc-deep)); background:var(--brand); border-radius:999px; padding:7px 14px 6px;
  white-space:nowrap; }
:where(body.p-reviews) .wwk .wwk-s { font-size:13px; line-height:1; letter-spacing:0; }
/* бейдж заодно и подсказка: капсулу .cs-tip тут не рисуем — она добавила бы
   рамку и пунктир поверх лаймовой плашки */
:where(body.p-reviews) .wwk.cs-tip { border:0; min-width:0; min-height:0; cursor:help;
  transition:filter .15s, transform .15s; }
/* наведение НЕ красит буквы акцентом: на лаймовой плашке лайм по лайму = пустая
   капсула. Тёмный текст остаётся, отклик даём подсветкой самой плашки */
:where(body.p-reviews) .wwk.cs-tip:hover,
:where(body.p-reviews) .wwk.cs-tip:focus { color:var(--n900, var(--on-acc-deep)); filter:brightness(1.1); transform:translateY(-1px); }
/* на узком экране плашка перестаёт быть однострочной колбасой: переносится
   вместе с ником, а не выдавливает MMR за край */
@media (max-width:520px) {
  :where(body.p-reviews) .wwk { font-size:10.5px; letter-spacing:.5px; padding:6px 11px 5px; }
}
:where(body.p-reviews) .shwrap { display:flex; gap:9px; flex-wrap:wrap; margin-top:11px; }
:where(body.p-reviews) .sh { margin:0; width:calc(33.333% - 6px); min-width:112px; }
:where(body.p-reviews) .sh img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; cursor:zoom-in;
  border-radius:9px; border:1px solid var(--line); background:var(--ink-black); transition:border-color .15s, transform .15s; }
:where(body.p-reviews) .sh img:hover { border-color:var(--brand); transform:translateY(-1px); }
:where(body.p-reviews) .sh figcaption { margin-top:5px; font-size:11.5px; line-height:1.4; color:var(--muted);
  overflow-wrap:anywhere; }
:where(body.p-reviews) .sh figcaption b { color:var(--text); font-weight:700; }
:where(body.p-reviews) .sh-k { display:inline-block; margin-right:5px; padding:1px 7px; border-radius:20px;
  border:1px solid var(--line); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; }
@media (max-width:720px) { :where(body.p-reviews) .sh { width:calc(50% - 5px); } }

/* окно «крупно»: скрин на весь экран, клик по фону и Esc закрывают */
.shbig { position:fixed; inset:0; z-index:400; display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; padding:24px; cursor:zoom-out;
  background:var(--n950-a88); backdrop-filter:blur(3px); }
.shbig img { max-width:min(1100px, 96vw); max-height:82vh; border-radius:12px; border:1px solid var(--line); }
.shbig-c { max-width:min(1100px, 96vw); font-size:13.5px; color:var(--n100); text-align:center; }
.shots-ask { margin-top:10px; }
.shots-ask label { display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:1.5; cursor:pointer; }
.shots-ask input { margin-top:2px; flex:none; }


/* ============ ГРУППОВЫЕ ЗАНЯТИЯ: экран ученика (gg-*) ============
   Разметку строит gl_render_user() в site/group_inc.php. Префикс свой: gl-*
   занят пультом тренера и сольной карточкой ученика в coaching.php.
   Лайм — только следующий шаг: «Приду» у ближайшего, потом «Задать вопрос». */
.gg-plate { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:16px;
            align-items:center; margin:0 0 12px; border-color:var(--acc-line); }
.gg-plate b { display:block; color:var(--n0); margin-bottom:3px; }
.gg-plate .muted { max-width:60ch; }
.gg-plate[data-hide] { padding-right:48px; }
.gg-x { width:26px; height:26px; padding:0; border-radius:8px; border:1px solid transparent; background:transparent;
        color:var(--n300); cursor:pointer; font:400 16px/1 var(--f-body); }
.gg-x:hover { color:var(--n0); border-color:var(--n500); }
.gg-plate .gg-x { position:absolute; top:10px; right:10px; }
.gg-ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; }
.gg-ico svg { width:24px; height:24px; fill:currentColor; }
.gg-ico-dc   { background:var(--discord-a16); color:var(--discord); }
.gg-ico-warn { background:var(--warn-soft); color:var(--warn); }
.gg-ico-off  { background:var(--n750); color:var(--n300); }
.gg-dcf { display:flex; gap:8px; }
.gg-dcf input { height:36px; min-width:200px; }
.gg-hid { display:none !important; }

/* карточка сверху: медаль, очередь, Discord */
.gg-me { display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; margin:0 0 12px; }
.gg-rank { display:flex; align-items:center; gap:12px; }
.gg-medal { display:block; flex:none; width:52px; height:52px; }
.gg-rk { font:500 var(--fs-xs)/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--n300); }
.gg-mmr { font:600 30px/1 var(--f-num); color:var(--n0); font-variant-numeric:tabular-nums; margin-top:4px; }
.gg-q { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.gg-tile { background:var(--n750); border:1px solid var(--n700); border-radius:var(--r-md); padding:8px 14px; min-width:110px; }
.gg-v { font:600 22px/1 var(--f-num); color:var(--n0); }
.gg-l { font-size:var(--fs-xs); color:var(--n300); margin-top:3px; }
.gg-say { color:var(--n0); font-size:var(--fs-s); max-width:34ch; }
.gg-dcc { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.gg-dc { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px 0 10px;
         border:1px solid var(--n600); border-radius:var(--r-pill); background:transparent;
         color:var(--n100); font:500 var(--fs-s)/1 var(--f-body); cursor:pointer; }
.gg-dc:hover { border-color:var(--n400); background:var(--n750); }
.gg-dc svg { flex:none; }
.gg-dc > svg:first-child { fill:var(--discord); }
.gg-pen { width:12px; height:12px; fill:var(--n400); }
.gg-dc:hover .gg-pen { fill:var(--n0); }
.gg-dcrow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 20px; margin:0 0 12px; }
.gg-sp { flex:1; }

/* чипы */
.tag.gg-pos  { color:var(--s-coach); border-color:var(--warn-a35); }
.tag.gg-pos .rico { width:12px; height:12px; }
.tag.gg-ok   { background:var(--ok-soft); border-color:var(--ok-a40); color:var(--ok); }
.tag.gg-wait { background:var(--warn-soft); border-color:var(--warn-a40); color:var(--warn); }
.tag.gg-dim  { color:var(--n400); border-color:var(--n700); }
.tag.gg-now  { background:var(--n700); border-color:var(--n500); color:var(--n0); }
.tag.gg-soon { background:var(--acc-soft); border-color:var(--acc-line); color:var(--acc); }
button.tag.gg-now { cursor:pointer; font:inherit; font-size:var(--fs-xs); }
button.tag.gg-now:hover { border-color:var(--n300); }

/* мои вопросы */
.gg-qs { margin:0 0 12px; }
.gg-hd { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.gg-hd h2 { margin:0; font:600 var(--fs-h2)/1.2 var(--f-body); color:var(--n0); }
.gg-n { font:500 var(--fs-h2)/1 var(--f-num); color:var(--n400); margin-left:6px; }
.gg-empty { margin:12px 0 0; }
.gg-row { display:grid; grid-template-columns:1fr auto; gap:12px 16px; align-items:center;
          padding:12px 0; border-top:1px solid var(--n700); }
.gg-row:first-of-type { border-top:0; }
.gg-edit { cursor:pointer; }
.gg-edit:hover .gg-txt { color:var(--n0); }
.gg-meta { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.gg-txt { color:var(--n200); transition:color .15s; }
.gg-st { display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; }
.gg-sub { font-size:var(--fs-xs); color:var(--n400); }

/* карточка занятия */
.gg-les { display:grid; grid-template-columns:96px 1fr auto; gap:20px; align-items:start; margin:0 0 12px; }
.gg-next { border-color:var(--acc-line); background:linear-gradient(90deg, var(--acc-soft), transparent 40%); }
.gg-date { text-align:center; border-right:1px solid var(--n700); padding-right:20px; align-self:stretch;
           display:flex; flex-direction:column; justify-content:center; gap:2px; }
.gg-d { font:600 36px/1 var(--f-num); color:var(--n0); }
.gg-next .gg-d { color:var(--acc); }
.gg-past .gg-d { color:var(--n200); }
.gg-m { font-size:var(--fs-s); color:var(--n300); }
.gg-rule { width:28px; height:1px; background:var(--n600); margin:10px auto; }
.gg-tm { font:500 17px/1 var(--f-num); color:var(--n0); letter-spacing:.02em; }
.gg-tz { font-size:var(--fs-xs); color:var(--n400); }
.gg-body { min-width:0; }
.gg-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.gg-les h3 { margin:0 0 6px; font:600 17px/1.25 var(--f-body); color:var(--n0); text-wrap:balance; }
.gg-body p { margin:0; color:var(--n300); font-size:var(--fs-s); max-width:70ch; }
.gg-body p + p { margin-top:6px; }
.gg-myq { margin-top:12px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.gg-lbl { font-size:var(--fs-xs); color:var(--n400); margin-right:2px; }
.gg-act { display:flex; flex-direction:column; gap:8px; align-items:stretch; min-width:236px; }
.gg-act form { display:contents; }
.gg-act .btn { width:100%; }
.gg-act .gg-c { align-self:center; }
.gg-ans { margin-top:12px; padding:12px 14px; border-radius:var(--r-md); background:var(--n750); border:1px solid var(--n700); }
.gg-cap { font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--n400); font-weight:600; margin-bottom:6px; }
.gg-ans .gg-cap { color:var(--ok); }
.gg-ans-no .gg-cap { color:var(--warn); }
.gg-qq { color:var(--n300); font-size:var(--fs-s); margin-bottom:6px; }
.gg-aa, .gg-aa p { color:var(--n100); font-size:var(--fs-s); }
/* Описание и конспект приходят из общей разметки (md_inc.php) блоками div, а не
   абзацами, — тот же приглушённый мелкий текст задаём и им. Лимита 70ch тут нет
   намеренно: разбор с карточками «ошибка/правило» в него не влезает. */
.gg-body > div:not([class]), .gg-sum > div:not([class]) {
  color:var(--n300); font-size:var(--fs-s); }
.gg-aa > div:not([class]) { color:var(--n100); font-size:var(--fs-s); }
.gg-sum { margin-top:12px; padding-top:12px; border-top:1px solid var(--n700); }
.gg-sum[hidden] { display:none !important; }

/* Тренер на Battle Cup (cup_inc.php) — поверх карточек групповых */
.cup-hd { margin:0 0 14px; }
.cup-hd h2, .cup-h2 { margin:0 0 6px; font:600 var(--fs-h2)/1.2 var(--f-body); color:var(--n0); }
.cup-h2 { margin:22px 0 10px; }
.cup-hd .muted { max-width:82ch; }
.tag.cup-tag { color:var(--acc); border-color:var(--acc-line); background:var(--acc-soft); }
/* суббота занята или закрыта — дата зачёркнута */
.cup-off .gg-d, .cup-off .gg-m, .cup-off .gg-tm, .cup-off .gg-tz { text-decoration:line-through; opacity:.55; }
/* якорь блока статуса — под фиксированным топбаром, а не за ним */
#formats-status, #formats { scroll-margin-top:calc(var(--top-h, 56px) + 24px); }
.cup-off.gg-next { border-color:var(--n700); background:none; }
.cup-off.gg-next .gg-d { color:var(--n200); }
.cup-req { margin:10px 0 0; padding-left:18px; color:var(--n300); font-size:var(--fs-s); }
.cup-req li + li { margin-top:4px; }
.cup-price { font:700 22px/1 var(--f-num); color:var(--n0); text-align:center; padding:4px 0 2px; }
.cup-price .muted { font:400 var(--fs-xs)/1 var(--f-body); }
.cup-tg { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent; color:var(--n100); border-color:var(--n600); }
.cup-tg:hover { border-color:var(--n500); background:var(--n750); color:var(--n0); }
.gg-act .cup-tg, .gg-act button[data-nick] { width:100%; }
.cup-dc, .cup-find, .cup-found-row, .cup-person { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cup-person { display:inline-flex; margin:0; gap:2px; }
.cup-person .btn-txt { padding:0 6px; min-height:0; height:22px; color:var(--n400); }
.cup-find input, .cup-note input { flex:1 1 220px; min-width:0; font-size:var(--fs-s); }
.cup-found { margin-top:6px; display:grid; gap:6px; }
.cup-found-row { margin:0; justify-content:space-between; padding:6px 10px; border:1px solid var(--n700); border-radius:var(--r-md); background:var(--n750); }
.cup-note { margin-top:10px; display:flex; gap:8px; }
@media (max-width:720px) { .cup-find input, .cup-note input { flex-basis:100%; } }

/* окно вопроса */
.gg-ov { position:fixed; inset:0; z-index:100; background:var(--n950-a72); display:grid; place-items:center; padding:16px; }
.gg-ov[hidden] { display:none !important; }
.gg-md { width:100%; max-width:720px; max-height:calc(100vh - 32px); overflow:auto; background:var(--n800);
         border:1px solid var(--n700); border-radius:var(--r-lg); box-shadow:var(--el3); }
.gg-mdh { display:flex; align-items:center; gap:12px; padding:18px 20px 0; }
.gg-mdh h2 { margin:0; flex:1; font:600 var(--fs-h2)/1.2 var(--f-body); color:var(--n0); }
.gg-xs { width:32px; height:32px; border-color:var(--n700); font-size:18px; }
.gg-mdb { padding:16px 20px 20px; display:flex; flex-direction:column; gap:16px; }
.gg-mdb .gg-cap { margin-bottom:8px; }
.gg-opt { text-transform:none; letter-spacing:0; color:var(--n500); font-weight:500; }
.gg-plates { display:flex; gap:6px; flex-wrap:wrap; }
.gg-pl { position:relative; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:var(--r-pill);
         border:1px solid var(--n600); color:var(--n200); cursor:pointer; font:500 var(--fs-s)/1 var(--f-body); transition:.15s; }
.gg-pl input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.gg-pl .rico { width:14px; height:14px; }
.gg-pl:hover { border-color:var(--n400); color:var(--n0); }
.gg-pl:has(input:checked) { background:var(--acc-soft); border-color:var(--acc); color:var(--acc); }
/* позиция, на которую вопрос в запасе уже лежит: видно, что она есть, но взять нельзя */
.gg-pl-off { opacity:.42; cursor:not-allowed; }
.gg-pl-off:hover { border-color:var(--n600); color:var(--n200); }
.gg-two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gg-mdb input[type=text], .gg-mdb textarea { width:100%; }
.gg-mdb textarea { min-height:110px; resize:vertical; }
.gg-mdf { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gg-where { flex:1; min-width:240px; font-size:var(--fs-s); color:var(--n200); }
.gg-where b { color:var(--n0); }
.gg-where.gg-w { color:var(--warn); }

@media (max-width:720px) {
  .gg-plate, .gg-me { grid-template-columns:1fr; gap:14px; }
  .gg-dcf { flex-direction:column; }
  .gg-dcf input { min-width:0; }
  .gg-dcc { flex-direction:row; flex-wrap:wrap; align-items:stretch; }
  .gg-dcc .btn { flex:1; }
  .gg-dcrow { padding:12px 14px; }
  .gg-dcrow .btn { width:100%; }
  .gg-hd { flex-wrap:wrap; }
  .gg-hd > div { flex:1 1 100%; }
  .gg-hd .gg-sp { display:none; }
  .gg-hd .btn { width:100%; }
  .gg-row { grid-template-columns:1fr; }
  .gg-st { align-items:flex-start; text-align:left; }
  .gg-les { grid-template-columns:1fr; gap:12px; }
  .gg-date { border-right:0; border-bottom:1px solid var(--n700); padding:0 0 10px;
             flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; }
  .gg-d { font-size:26px; }
  .gg-rule { width:1px; height:22px; margin:0 4px; }
  .gg-tz { margin-left:auto; }
  .gg-act { flex-direction:row; flex-wrap:wrap; min-width:0; }
  .gg-act .btn { width:auto; flex:1; }
  .gg-two { grid-template-columns:1fr; }
}

/* ⚠️ Страница коучинга красит ЛЮБУЮ .btn в лайм (:where(body.p-coaching) .btn выше по
   файлу, тот же вес, что у .btn-ghost из шапки файла) — серые кнопки на ней
   проигрывали. Возвращаем серый тем же весом, но ниже. */
:where(body.p-coaching) .btn-ghost { background:transparent; color:var(--n200); border:1px solid var(--n600); font-weight:600; }
:where(body.p-coaching) .btn-ghost:hover { background:var(--n750); color:var(--n0); border-color:var(--n500); }
:where(body.p-coaching) .btn-txt { background:transparent; color:var(--n300); border:1px solid transparent; font-weight:600; }
:where(body.p-coaching) .btn-txt:hover { color:var(--n0); background:var(--n800); }

/* герой с портретом: чип в списке вопросов и подсказка в окне */
.gg-k { color:var(--n400); font-weight:500; margin-right:2px; }
/* портрет Valve — 256×144: держим 16:9, квадратный кроп резал лицо */
.tag .gg-face { width:40px; height:22px; border-radius:4px; object-fit:cover; flex:none; margin:0 3px 0 2px; }
/* чипы строки вопроса — одного роста с портретом, иначе он торчит из ряда */
.gg-meta .tag { min-height:30px; padding:3px 11px; font-size:var(--fs-s); }
.gg-meta .tag.gg-pos .rico { width:14px; height:14px; }
.gg-ho img { width:40px; height:22px; border-radius:4px; object-fit:cover; flex:none; }
.tag.gg-hero { color:var(--n100); }
.gg-hf { position:relative; }
.gg-hf input { padding-left:52px !important; }
.gg-hf:has(.gg-hpic:empty) input { padding-left:12px !important; }
.gg-hpic { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:34px; height:19px; display:grid; place-items:center; pointer-events:none; }
.gg-hpic:empty { display:none; }
.gg-hpic img { width:34px; height:19px; border-radius:4px; object-fit:cover; }
.gg-hl { position:absolute; top:calc(100% + 4px); left:0; z-index:70; width:100%; max-height:280px; overflow-y:auto;
         background:var(--n850); border:1px solid var(--n600); border-radius:10px; padding:4px;
         display:flex; flex-direction:column; box-shadow:0 10px 26px var(--k-a45); }
.gg-hl:empty { display:none; }
.gg-ho { display:flex; align-items:center; gap:9px; background:none; border:0; color:var(--n100);
         border-radius:7px; padding:6px 8px; font:600 13px/1 var(--f-body); cursor:pointer; text-align:left; }
.gg-ho span { color:var(--n400); font-weight:500; }
.gg-ho:hover { background:var(--w-a06); }

/* ── Навигация: разделы сайдбара и полоса табов раздела ── */
/* Полоса страниц раздела (header_inc.php): первый блок .wrap под топбаром */
/* сегменты на общей плашке: рамка контейнера отделяет навигацию от контента */
.navtabs { display:inline-flex; max-width:100%; gap:var(--sp-1); margin:0 0 var(--sp-5);
           padding:var(--sp-1); background:var(--n850); border:1px solid var(--n750); border-radius:var(--r-md);
           overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
           -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.navtabs::-webkit-scrollbar { display:none; }
.navtab { flex:none; display:inline-flex; align-items:center; gap:var(--sp-2); min-height:38px; padding:0 var(--sp-4);
          border-radius:var(--r-sm); color:var(--n300); text-decoration:none;
          font:600 var(--fs-s)/1 var(--f-body); white-space:nowrap;
          transition:background .15s, color .15s; }
.navtab svg { width:15px; height:15px; flex:none; }
.navtab:hover { color:var(--n100); background:var(--n800); }
/* тень активного сегмента — только inset: overflow контейнера срезал бы внешнюю */
.navtab.on { color:var(--n0); background:var(--n700); box-shadow:inset 0 0 0 1px var(--n600); }
.navtab.on svg { color:var(--acc); }
.navtab:focus-visible { outline-offset:-2px; }
@media (max-width:920px) {
  /* на телефоне полоса от края до края, скролл вбок */
  .navtabs { display:flex; max-width:none; margin:calc(-1 * var(--sp-2)) calc(-1 * var(--gut)) var(--sp-4);
             padding:var(--sp-1) var(--gut); scroll-padding:0 var(--gut);
             border-radius:0; border-left:0; border-right:0; }
  .navtab { min-height:42px; }
}

/* ── Главная-хаб: карточки «Сейчас» и дверь в ученики ── */
/* «Сейчас» и дверь фри — hub_inc.php: главная, тонкая главная EN, профиль */
.hub, .hub-door { margin:14px 0; }
.hub-page { margin-top:16px; }
.hub-card { display:flex; gap:14px; align-items:flex-start; border:1px solid var(--n700);
  background:var(--n850); border-radius:var(--r-md); padding:14px; }
.hub-card + .hub-card { margin-top:12px; }
.hub-bd { min-width:0; }
.hub-when { font:600 19px/1.2 var(--f-disp); color:var(--n0); letter-spacing:.02em; }
.hub-what { color:var(--n200); font-size:13px; margin-top:5px; line-height:1.5; }
.hub-sub, .hub-note { color:var(--n400); font-size:12px; line-height:1.55; }
.hub-side { margin-left:auto; display:flex; flex-direction:column; gap:8px; align-items:flex-end; flex:none; }
.hub-btns { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:11px; }
.hub-f { margin:0; display:inline-flex; }

/* свои кнопки: .btn на страницах переопределён по-разному */
.hub-b { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px;
  background:var(--acc); color:var(--on-acc); border:1px solid var(--acc); border-radius:9px;
  padding:8px 14px; font:600 13px/1.2 var(--f-body); text-decoration:none; cursor:pointer;
  transition:background .15s ease-in-out, border-color .15s ease-in-out, transform .15s ease-in-out; }
.hub-b:hover { background:var(--acc-hi); border-color:var(--acc-hi); color:var(--on-acc); }
.hub-b:active { transform:scale(.96); }
.hub-b:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.hub-b:disabled { opacity:.5; cursor:not-allowed; }
.hub-b.ghost { background:transparent; color:var(--n100); border-color:var(--n600); }
.hub-b.ghost:hover { background:var(--n800); border-color:var(--n500); color:var(--n0); }
.hub-b svg, .hub-chip svg, .hub-x svg { width:14px; height:14px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.hub-chip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; border:1px solid var(--n700);
  background:var(--n800); color:var(--n200); padding:4px 10px; font-size:12px; font-weight:500; }
.hub-chip.acc { background:var(--acc-soft); border-color:var(--acc-line); color:var(--acc); }

/* дверь: лаймовый фон на экране один; крестик закрывает навсегда */
.hub-door { position:relative; border:1px solid var(--acc-line); background:var(--acc-soft);
  border-radius:var(--r-md); padding:14px 46px 14px 14px; }
.hub-door-t { font:600 17px var(--f-disp); color:var(--n0); letter-spacing:.02em; }
.hub-door-s { color:var(--n200); font-size:12.5px; line-height:1.55; margin-top:5px; }
.hub-door .hub-note { margin-top:8px; color:var(--bad); }
.hub-x { position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:8px;
  background:transparent; border:1px solid transparent; color:var(--n300); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s ease-in-out; }
.hub-x:hover { color:var(--n0); background:var(--n800); border-color:var(--n600); }
.hub-x:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.hub-x svg { width:15px; height:15px; }

@media (max-width:640px) {
  .hub-card { flex-direction:column; gap:10px; }
  .hub-side { margin-left:0; order:-1; align-items:flex-start; }
  .hub-when { font-size:17px; }
  .hub-btns .hub-b, .hub-btns .hub-f { flex:1 1 auto; }
  .hub-f .hub-b { width:100%; }
}

/* ── Профиль: табы, «Кто я», путь к цели ── */
/* Профиль: три таба сверху — подчёркнутые, на телефоне скроллятся вбок */
:where(body.p-profile) .pft-bar {display:flex; gap:4px; margin:2px 0 16px; box-shadow:inset 0 -1px 0 var(--line);
      overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch}
:where(body.p-profile) .pft-bar::-webkit-scrollbar {display:none}
:where(body.p-profile) .pft-t {flex:none; display:inline-flex; align-items:center; gap:7px; padding:10px 14px;
      border-bottom:2px solid transparent; color:var(--muted); font-size:14px; font-weight:600; white-space:nowrap;
      text-decoration:none; transition:color .15s ease-in-out, border-color .15s ease-in-out}
:where(body.p-profile) .pft-t:hover {color:var(--text)}
:where(body.p-profile) .pft-t:focus-visible {outline:2px solid var(--brand); outline-offset:-2px; border-radius:6px}
:where(body.p-profile) .pft-t.on {color:var(--text); border-bottom-color:var(--brand)}
:where(body.p-profile) .pft-bdg {font-size:11px; font-weight:700; line-height:1; background:var(--warn-soft); color:var(--warn);
      border-radius:999px; padding:3px 7px}
:where(body.p-profile) .pft-p {display:none}
:where(body.p-profile) .pft-p.on {display:block}

/* Раскладки табов: «Профиль» — форма + узкая правая колонка; «Связь» — пополам; «Занятия» — карточки по две */
:where(body.p-profile) .pft-lay {display:grid; grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr); gap:16px; align-items:start}
:where(body.p-profile) .pft-half {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start}
:where(body.p-profile) .pft-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start}
:where(body.p-profile) .pft-wide {grid-column:1/-1; min-width:0}
:where(body.p-profile) .pft-col {display:flex; flex-direction:column; gap:16px; min-width:0}
:where(body.p-profile) .pft-col > #tgCard {margin-top:0 !important}
@media (max-width:860px) {
  :where(body.p-profile) .pft-lay, :where(body.p-profile) .pft-half, :where(body.p-profile) .pft-grid {grid-template-columns:minmax(0,1fr)}
  :where(body.p-profile) .pft-t {padding:10px 12px}
}

/* «Кто я»: аватар и ник в шапке карточки (место под карандаш справа) */
:where(body.p-profile) .pft-who {display:flex; align-items:center; gap:12px; margin:12px 0 2px; padding-right:44px}
:where(body.p-profile) .pft-ava {width:48px; height:48px; border-radius:50%; border:2px solid var(--line); flex:none}
:where(body.p-profile) .pft-nick {font-size:22px; line-height:1.2; overflow-wrap:anywhere}

/* Путь к цели: трек блоком на всю ширину, подписи — сеткой из трёх колонок, чтобы не слипались */
:where(body.p-profile) .pft-path {margin-top:18px; padding-top:14px; border-top:1px solid var(--line)}
:where(body.p-profile) .pft-k {font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px}
:where(body.p-profile) .pft-trk {display:block; width:100%}
:where(body.p-profile) .pft-rail {position:relative; width:100%; height:8px; border-radius:6px; background:var(--panel2)}
:where(body.p-profile) .pft-rail i {position:absolute; left:0; top:0; bottom:0; max-width:100%; border-radius:6px; background:var(--brand)}
:where(body.p-profile) .pft-rail b {position:absolute; top:50%; width:14px; height:14px; border-radius:50%; background:var(--brand);
      border:2px solid var(--panel); transform:translate(-50%,-50%)}
:where(body.p-profile) .pft-ends {display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; margin-top:10px;
      font-size:12.5px; color:var(--muted)}
:where(body.p-profile) .pft-ends > span:last-child {text-align:right}
:where(body.p-profile) .pft-ends b {color:var(--text); font-weight:600}
:where(body.p-profile) .pft-now {color:var(--brand); font-weight:600; text-align:center; white-space:nowrap}

/* Низ правой колонки «Профиля»: «Выйти · Удалить аккаунт» тихими ссылками */
:where(body.p-profile) .pft-foot {display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:0 4px; font-size:13px; color:var(--muted)}
:where(body.p-profile) .pft-out {margin:0; display:inline}
:where(body.p-profile) .pft-lk {background:none; border:0; border-bottom:1px dashed var(--line); border-radius:0; padding:0; font:inherit;
      font-size:13px; color:var(--muted); cursor:pointer; transition:color .15s ease-in-out}
:where(body.p-profile) .pft-lk:hover {color:var(--text)}
:where(body.p-profile) .pft-lk-bad, :where(body.p-profile) .pft-lk-bad:hover {color:var(--danger)}
:where(body.p-profile) .pft-del > summary {list-style:none; display:inline}
:where(body.p-profile) .pft-del > summary::-webkit-details-marker {display:none}
:where(body.p-profile) .pft-del[open] {flex-basis:100%}
.hub-msg { margin-bottom:var(--sp-3); padding:10px 12px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--n800); color:var(--n100); font-size:var(--fs-s); }
/* «Кто я» в две колонки: поля парами (имя·позиция, MMR·цель, герои·Dotabuff, ник·Discord), форма — в один экран */
@media (min-width:1100px) {
  :where(body.p-profile) #pfCard {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:14px; align-content:start}
  :where(body.p-profile) #pfCard > * {grid-column:1/-1; order:9}
  :where(body.p-profile) #pfCard > h2, :where(body.p-profile) #pfCard > .pft-who {order:0}
  :where(body.p-profile) #pfCard > .fld {grid-column:auto}
  :where(body.p-profile) #pfCard > .fld:has(#pf_name), :where(body.p-profile) #pfCard > .fld:has(#pf_role) {order:1}
  :where(body.p-profile) #pfCard > .fld:has(#pf_mmr), :where(body.p-profile) #pfCard > .fld:has(#pf_goal) {order:2}
  :where(body.p-profile) #pfCard > .fld:has(#pf_heroes), :where(body.p-profile) #pfCard > .fld:has(#pf_dotabuff) {order:4}
  :where(body.p-profile) #pfCard > #pfHeroesPics {order:5; grid-column:1/-1}
  :where(body.p-profile) #pfCard > .fld:has(#pf_nick), :where(body.p-profile) #pfCard > .fld:has(#pf_tg) {order:5}
  :where(body.p-profile) #pfCard > .fld:has(#pf_discord) {order:6; grid-column:1/-1}
  :where(body.p-profile) #pfCard > .pay-wrap {order:7; grid-column:1/-1}
  :where(body.p-profile) #pfCard > #pfBtns {order:8}
}
/* подсказка статуса — в пределах карточки, а не от значка вправо за край окна */
:where(body.p-profile) #subCard {position:relative}
:where(body.p-profile) #subCard .qtip {position:static}
:where(body.p-profile) #subCard .qtip .qtip-b {left:14px; right:14px; width:auto; top:auto; margin-top:8px}
/* медаль ранга — справа внутри поля MMR; «что даёт статус» — списком с галочками */
:where(body.p-profile) .fld:has(#pf_mmr) {position:relative}
:where(body.p-profile) .fld #pfRank {position:absolute; right:10px; bottom:6px; margin:0; pointer-events:none; font-size:12.5px}
:where(body.p-profile) .fld #pfRank img {width:22px; height:22px}
:where(body.p-profile) .fld:has(#pfRank:not(:empty)) #pf_mmr {padding-right:120px}
:where(body.p-profile) .pft-gives {list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
:where(body.p-profile) .pft-gives li {position:relative; padding-left:22px; font-size:13px; color:var(--text); line-height:1.45}
:where(body.p-profile) .pft-gives li::before {content:''; position:absolute; left:3px; top:4px; width:9px; height:5px;
  border-left:2px solid var(--acc); border-bottom:2px solid var(--acc); transform:rotate(-45deg)}