/* NLauncher — общий слой сайта в стиле главной «Острова» (2026-10-12).
 * Подключается последним на каждой странице (кроме главной — у неё home2.vN.css): цвета и фон страницы, шапка любого
 * семейства страниц (.nc-top кабинета, .h-top лендингов, header.top, .hh, .tx-header, шапка /download) в виде шапки
 * главной, общий подвал .o-foot, плитки-герои разделов. Тема — html[data-theme] (ключ nl-site-theme).
 * Файл версионирован: правки — новым site2.v5.css (+ apply-site2.py). v2, v3, v4 — блоки в конце файла. */
:root{
  --s2-bg:#E9EEF7;--s2-card:#FFFFFF;--s2-soft:#EEF2F9;--s2-line:#DCE3EF;--s2-text:#14203D;--s2-text2:#3F4A63;--s2-mute:#5D6880;
  --s2-acc:#2E6CF6;--s2-acc-d:#1E4FC4;--s2-acc-text:#1E56D4;
  --s2-shadow:0 1px 2px rgba(20,32,61,.06),0 10px 28px rgba(20,32,61,.08);
  --s2-tile-sh:inset 0 -7px 0 rgba(0,0,0,.14),0 16px 36px rgba(18,38,92,.16);
  --s2-sky:linear-gradient(180deg,#2B63EC 0%,#4F86FA 46%,#A9CBFF 100%);--s2-glow:rgba(255,255,255,.34);
  --s2-deep:linear-gradient(160deg,#13224D 0%,#24418A 100%);
  --s2-pix:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAu0lEQVR42o1TuxLDIAxTOAaO0f//jR45NrpgTlWdNCzBLyzLyrXWwj4dwMC7c3LLNoyCJl8t/LpfhCBDondsO/xWKGCSgKQ48iJnVgrMHfQEctvxIQhQqQsTOKjQybb9UAtfcBDw/Ylx8TUAMx7gmbnLlOKfx7ItQAibN/roAFr5IxYnVHoOB/YAVXXQaGOvRui0CUZxyK4ZsyImp/vUBiXpNESVmUbO/5ONwJwYwc+20WtS7In+cbPK8QFXdVR/kLzrjwAAAABJRU5ErkJggg==")
}
html[data-theme="dark"]{
  --s2-bg:#0A0F1E;--s2-card:#121A30;--s2-soft:#18213B;--s2-line:#232E4C;--s2-text:#EEF2FF;--s2-text2:#C3CBE5;--s2-mute:#98A3C6;
  --s2-acc:#4C82FF;--s2-acc-d:#2C5BD0;--s2-acc-text:#9DBBFF;
  --s2-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.3);
  --s2-sky:linear-gradient(180deg,#0C1840 0%,#183273 52%,#3159B4 100%);--s2-glow:rgba(160,190,255,.18);
  --s2-deep:linear-gradient(160deg,#0A1330 0%,#16285A 100%)
}
html body{background-color:var(--s2-bg)!important}

/* ---------- шапка: любое семейство страниц выглядит как шапка главной ---------- */
html body header.nc-top,html body header.h-top,html body header.top,html body header.hh,html body header.tx-header,html body>header:not([class]){
  background:color-mix(in srgb,var(--s2-bg) 86%,transparent)!important;border-bottom:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important}
html body .nc-brand,html body .h-brand,html body header.top .brand,html body .hh .brand,html body .tx-brand,html body>header:not([class]) .brand{
  display:inline-flex!important;align-items:center!important;gap:10px!important;color:var(--s2-text)!important;text-decoration:none!important;
  font:800 21px/1 Onest,system-ui,sans-serif!important;letter-spacing:-.01em!important;text-transform:none!important}
html body .nc-brand span,html body .h-brand span,html body header.top .brand span,html body .tx-brand span,html body>header:not([class]) .brand span{
  font:inherit!important;letter-spacing:inherit!important;text-transform:none!important;color:inherit!important}
html body .nc-brand img,html body .h-brand img,html body header.top .brand img,html body .hh .brand img,html body .tx-brand img,html body>header:not([class]) .brand img{
  width:34px!important;height:34px!important;border-radius:9px!important}
/* круглые кнопки: тема, вход-иконка */
html body #nc-theme,html body #h-theme,html body #theme-btn,html body #dl-theme,html body header #nav-login.h-ibtn,html body header #nav-login.icon-btn,html body header #nav-login.ibtn,html body .nc-top .nc-ib{
  width:42px!important;height:42px!important;border-radius:50%!important;border:1px solid var(--s2-line)!important;background:var(--s2-card)!important;
  color:var(--s2-text)!important;box-shadow:var(--s2-shadow)!important;display:inline-grid!important;place-items:center!important}
/* «Скачать» — синяя таблетка */
html body .nc-btn-dl,html body header .h-dl-top,html body header.top .btn.pri,html body .hh .btn.pri{
  background:var(--s2-acc)!important;color:#fff!important;border:0!important;border-radius:99px!important;box-shadow:none!important;
  font:700 15px/1 Onest,system-ui,sans-serif!important;padding:12px 20px!important;height:auto!important;text-decoration:none!important}
html body .nc-btn-dl:hover,html body header .h-dl-top:hover,html body header.top .btn.pri:hover,html body .hh .btn.pri:hover{background:var(--s2-acc-d)!important}
/* «Войти» текстом (кабинет, /download) */
html body .nc-top .nc-chip.guest,html body .nc-top a.nc-chip[href^="/login"],html body .tx-login,html body>header:not([class]) .login{
  background:transparent!important;border:0!important;box-shadow:none!important;color:var(--s2-text)!important;font:700 15px/1 Onest,system-ui,sans-serif!important}

/* ---------- общий подвал ---------- */
.o-foot{max-width:1280px;margin:64px auto 0;padding:0 40px;box-sizing:border-box;font-family:Onest,system-ui,sans-serif;color:var(--s2-text)}
.o-foot *{box-sizing:border-box}
.o-foot .o-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--s2-text)!important;font-weight:800;font-size:21px;letter-spacing:-.01em}
.o-foot .o-brand img{width:32px;height:32px;border-radius:9px;display:block}
.o-foot-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:22px;padding:54px 0 40px}
.o-foot-brand p{margin:14px 0 16px;font-size:14px;line-height:1.55;color:var(--s2-mute);max-width:240px}
.o-foot h3{margin:0 0 12px;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--s2-acc-text)}
.o-foot-grid>div:not(.o-foot-brand){display:flex;flex-direction:column;gap:12px}
.o-foot-grid>div>a{color:var(--s2-text2)!important;text-decoration:none;font-weight:600;font-size:15px}
.o-foot-grid>div>a:hover{color:var(--s2-acc-text)!important}
.o-soc{display:flex;gap:8px;flex-wrap:wrap}
.o-soc a{display:inline-flex;align-items:center;padding:8px 13px;border-radius:12px;background:var(--s2-card);border:1px solid var(--s2-line);color:var(--s2-text)!important;text-decoration:none;font-weight:700;font-size:13px;box-shadow:var(--s2-shadow)}
.o-soc a:hover{color:var(--s2-acc-text)!important}
.o-foot-bot{display:flex;gap:12px 24px;flex-wrap:wrap;justify-content:space-between;padding:20px 0 34px;border-top:1px solid var(--s2-line);font-size:13px;color:var(--s2-mute)}
.o-foot-bot span:last-child{display:flex;gap:18px;flex-wrap:wrap}
.o-foot-bot a{color:var(--s2-mute)!important;text-decoration:none}
.o-foot-bot a:hover{color:var(--s2-acc-text)!important}
@media (max-width:1240px){.o-foot{padding-left:24px;padding-right:24px}}
@media (max-width:640px){.o-foot{padding-left:12px;padding-right:12px}.o-foot-grid{grid-template-columns:1fr 1fr;padding-top:36px}.o-foot-brand{grid-column:1/-1}}

/* ---------- плитки-герои: начало страницы — синяя плитка «небо», как «Это ты» на главной ---------- */
.cx-hero>.wrap,.x-hero>.x-hero-in,.card.wd-hero,.card.em-hero,.card.lk-hero,.px-hero>.px-hero-in,main>.hero,.tx-hero,.cl-hero,.hp-hero,
main.wrap>section.head,.bh,.nx-head,.card.hero-h,.au-hero,.au-intro{
  position:relative!important;isolation:isolate;overflow:hidden!important;border:0!important;border-radius:30px!important;color:#fff;
  background:radial-gradient(70% 60% at 78% 8%,var(--s2-glow) 0%,rgba(255,255,255,0) 62%),var(--s2-sky)!important;
  box-shadow:var(--s2-tile-sh)!important}
.cx-hero>.wrap::before,.x-hero>.x-hero-in::before,.card.wd-hero::before,.card.em-hero::before,.card.lk-hero::before,.px-hero>.px-hero-in::before,main>.hero::before,.tx-hero::before,.cl-hero::before,.hp-hero::before,
main.wrap>section.head::before,.bh::before,.nx-head::before,.card.hero-h::before,.au-hero::before,.au-intro::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none;display:block!important;
  background:var(--s2-pix)!important;background-size:64px 64px!important;image-rendering:pixelated;opacity:.6!important;border:0!important;transform:none!important}
/* текстовая колонка героя — белым */
:is(.cx-hero>.wrap>div:first-child,.x-hero-txt,.wd-hero>.info,.em-hero>.info,.lk-hero>.info,.px-copy,main>.hero,.tx-hero>div:first-child,.cl-head,.hp-hero,
  main.wrap>section.head>div:first-child,.bh>div:first-child,.nx-head,.hero-h,.au-hero>div:first-child,.au-intro) :is(h1,h2){
  color:#fff!important;text-shadow:0 4px 0 rgba(8,22,64,.22)}
:is(.cx-hero>.wrap>div:first-child,.x-hero-txt,.wd-hero>.info,.em-hero>.info,.lk-hero>.info,.px-copy,main>.hero,.tx-hero>div:first-child,.cl-head,.hp-hero,
  main.wrap>section.head>div:first-child,.bh>div:first-child,.nx-head,.hero-h,.au-hero>div:first-child,.au-intro) h1 :is(em,span:not(.count)){
  color:#CFE0FF!important;-webkit-text-fill-color:#CFE0FF!important;background:none!important;font-style:normal}
:is(.cx-hero>.wrap>div:first-child,.x-hero-txt,.wd-hero>.info,.em-hero>.info,.lk-hero>.info,.px-copy,main>.hero,.tx-hero>div:first-child,.cl-head,.hp-hero,
  main.wrap>section.head>div:first-child,.bh>div:first-child,.nx-head,.hero-h,.au-hero>div:first-child,.au-intro) :is(p,li,.lead,.flow){
  color:rgba(255,255,255,.92)!important}
:is(.cx-hero>.wrap>div:first-child,.x-hero-txt,.wd-hero>.info,.em-hero>.info,.lk-hero>.info,.px-copy,main>.hero,.tx-hero>div:first-child,.cl-head,.hp-hero,
  main.wrap>section.head>div:first-child,.bh>div:first-child,.nx-head,.hero-h,.au-hero>div:first-child,.au-intro) :is(.kick,.kicker,.x-kick,.nc-kicker,.k,.na-eyebrow,.px-eyebrow,.tx-pill){
  color:rgba(255,255,255,.88)!important;background:transparent!important}
:is(.cx-hero>.wrap>div:first-child,.x-hero-txt,.wd-hero>.info,.em-hero>.info,.lk-hero>.info,.px-copy,main>.hero,.tx-hero>div:first-child,.cl-head,.hp-hero,
  main.wrap>section.head>div:first-child,.bh>div:first-child,.nx-head,.hero-h,.au-hero>div:first-child,.au-intro) a:not([class]){color:#fff!important;text-decoration:underline;text-underline-offset:3px}
/* кнопки в герое: главная — белая, остальные — «стекло» */
:is(.cx-hero,.x-hero,.wd-hero,.em-hero,.lk-hero,.px-hero,main>.hero,.tx-hero,.cl-head,.hp-hero,main.wrap>section.head,.bh,.nx-head,.hero-h,.au-hero) :is(.btn.pri,.l-btn.pri,.nc-btn,.btn.w){
  background:#fff!important;color:#1A3EA6!important;border:0!important;border-radius:15px!important;box-shadow:0 4px 0 rgba(8,22,64,.3)!important;font-weight:800!important}
:is(.cx-hero,.x-hero,.wd-hero,.em-hero,.lk-hero,.px-hero,main>.hero,.tx-hero,.cl-head,.hp-hero,main.wrap>section.head,.bh,.nx-head,.hero-h,.au-hero) :is(.btn:not(.pri):not(.w),.l-btn.sec,.btn.sec,.btn.gh){
  background:rgba(10,30,90,.22)!important;color:#fff!important;border:1px solid rgba(255,255,255,.4)!important;border-radius:15px!important;box-shadow:none!important;font-weight:800!important}
/* цифры героя — на «стекле» */
:is(.wd-hero,.lk-hero) .kpis{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.26)!important;border-radius:18px!important}
:is(.wd-hero,.lk-hero) .kpis>div{border-color:rgba(255,255,255,.22)!important}
:is(.wd-hero,.lk-hero) .kpis :is(b,span){color:#fff!important}
:is(.wd-hero,.lk-hero) .kpis span{opacity:.82}
/* картинка/3D справа — светлая панель внутри плитки */
:is(.wd-hero,.lk-hero)>.stage,.em-hero>.stage,.px-hero .px-stage{margin:14px!important;border-radius:22px!important;overflow:hidden!important}
/* геометрия: герои-обёртки (.wrap) сжимаются до колонки содержимого страницы, внутри — поля плитки */
.cx-hero,.x-hero,.px-hero{padding-top:6px!important;padding-bottom:26px!important;background:transparent!important}
.cx-hero>.wrap,.x-hero>.x-hero-in,.px-hero>.px-hero-in,.nx-head,.cl-hero{
  width:calc(100% - 88px)!important;max-width:1192px!important;margin:6px auto 26px!important;padding:44px 40px!important;box-sizing:border-box!important}
.x-hero>.x-hero-in,.px-hero>.px-hero-in{margin:0 auto!important}
main>.hero,.hp-hero,main.wrap>section.head,.tx-hero,.au-hero,.au-intro{padding:44px 40px!important;box-sizing:border-box!important}
.card.hero-h{padding:34px 32px!important}
.cx-hero>.wrap{min-height:0!important}
/* PLUS — тёмно-синяя плитка, как на главной */
.px-hero>.px-hero-in{background:radial-gradient(60% 60% at 80% 0%,rgba(130,160,255,.22) 0%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#0E1A3D 0%,#22386E 100%)!important}
.px-hero>.px-hero-in::before{opacity:.3!important}
/* острова — настоящие рендеры из мира игры (те же, что на главной) */
main>.hero::after,.hp-hero::after,.nx-head::after,.card.hero-h::after,.au-intro::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat!important}
main>.hero{min-height:330px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;gap:14px!important}
main>.hero>*{max-width:calc(100% - 330px)!important;margin:0!important;flex:none!important}
main>.hero::after{background-image:url(/assets/home2/wave.v1.webp),url(/assets/home2/blk-petals.v1.webp),url(/assets/home2/isl-grass.v1.webp)!important;
  background-size:auto 186px,120px auto,90px auto!important;background-position:right 126px bottom 124px,right 130px bottom 24px,right 28px top 24px!important}
.hp-hero::after{background-image:url(/assets/home2/isl-petals.v1.webp),url(/assets/home2/isl-grass.v1.webp)!important;
  background-size:118px auto,104px auto!important;background-position:left 44px bottom 30px,right 54px top 30px!important}
.nx-head{min-height:300px}
.nx-head>*{max-width:calc(100% - 300px)!important}
.nx-head::after{background-image:url(/assets/home2/isl-cherry.v1.webp)!important;background-size:230px auto!important;background-position:right 60px center!important}
.card.hero-h::after{background-image:url(/assets/home2/isl-farm.v1.webp)!important;background-size:120px auto!important;background-position:right 28px center!important}
.card.hero-h>*{max-width:calc(100% - 150px)}
.au-intro::after{background-image:url(/assets/home2/wave.v1.webp),url(/assets/home2/blk-petals.v1.webp)!important;
  background-size:auto 180px,116px auto!important;background-position:right 52px bottom 120px,right 56px bottom 22px!important}
@media (max-width:1240px){.cx-hero>.wrap,.x-hero>.x-hero-in,.px-hero>.px-hero-in,.nx-head,.cl-hero{width:calc(100% - 48px)!important}}
@media (max-width:860px){
  main>.hero::after,.hp-hero::after,.nx-head::after,.card.hero-h::after,.au-intro::after{display:none}
  main>.hero>*,.nx-head>*,.card.hero-h>*{max-width:none!important}
  .cx-hero>.wrap,.x-hero>.x-hero-in,.px-hero>.px-hero-in,.nx-head,.cl-hero,main>.hero,.hp-hero,main.wrap>section.head,.tx-hero,.au-hero,.au-intro{padding:30px 22px!important}
}
@media (max-width:640px){
  .cx-hero>.wrap,.x-hero>.x-hero-in,.px-hero>.px-hero-in,.nx-head,.cl-hero{width:calc(100% - 24px)!important}
  .cx-hero>.wrap,.x-hero>.x-hero-in,.px-hero>.px-hero-in,.nx-head,.cl-hero,.card.wd-hero,.card.em-hero,.card.lk-hero,main>.hero,.tx-hero,.hp-hero,main.wrap>section.head,.bh,.card.hero-h,.au-hero,.au-intro{border-radius:26px!important}
}
/* /emotes-howto: шаги-таблетки на синем */
.card.hero-h .flow span{background:rgba(255,255,255,.16)!important;color:#fff!important;border:1px solid rgba(255,255,255,.26)}
.card.hero-h .flow i{color:rgba(255,255,255,.7)!important}
/* /download, «Спасибо»: меню в шапке по центру */
html body>header:not([class]) nav .nlx-bar,html body .tx-nav .nlx-bar{margin:0 auto!important}
html body .s2-sp,html body .tx-nav>.sp{display:none!important}
/* ссылки-подписи в героях: белым */
.cx-hero .cx-host,.cx-hero .cx-host span,main>.hero .ver-new,main>.hero .ver{color:#fff!important}
main>.hero .ver{opacity:.8}
/* вход/регистрация: обёртка страницы красится своим --bg — тот же фон, что у сайта */
#auth-root{background:var(--s2-bg)!important}

/* ================= v2 (2026-10-12): недочёты, найденные проверкой всех страниц ================= */

/* светлые карточки внутри плитки-героя — свой тёмный текст (в v1 наследовали белый цвет плитки: белым по белому) */
html body :is(.tx-hero .tx-file,.em-hero .now,section.head .wallet,.cl-hero .cl-latest,main>.hero>.card,.au-intro .au-tips){color:var(--s2-text)!important}
html body .au-intro .au-tips.au-tips.au-tips :is(li,p){color:var(--s2-text2)!important}  /* тройной класс: сильнее белого правила v1 (0,4,1) */
html body :is(section.head .wallet,.cl-hero .cl-latest,main>.hero>.card) :is(.btn.pri,.l-btn.pri){
  background:var(--s2-acc)!important;color:#fff!important;border:0!important;box-shadow:0 3px 0 var(--s2-acc-d)!important}

/* цвета редкости: shop.v2.css задаёт их только внутри магазина (.shx), а классы .r-* есть и в модалке вещи, и в каталоге —
   там --rc был пустым (плашка «Легендарная» белым по белому) */
:root{--rc-common:#8A909C;--rc-uncommon:#3FA34D;--rc-rare:#2E6CF6;--rc-epic:#8B5CF6;--rc-legendary:#E59A0C;--rc-mythic:#E6397A}
html[data-theme="dark"]{--rc-common:#9AA1AD;--rc-uncommon:#6FD17E;--rc-rare:#6F9BFF;--rc-epic:#B794FF;--rc-legendary:#F5C445;--rc-mythic:#FF6FA5}

/* /download: кнопки других систем — вторичные синие вместо чёрных; блок про macOS — тёмно-синяя плитка, как на главной */
html body .rows .row:not(.mine) .dl:not(.done):not([disabled]){
  background:var(--s2-soft)!important;color:var(--s2-acc-text)!important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--s2-acc) 30%,transparent)!important}
html body .rows .row:not(.mine) .dl:not(.done):not([disabled]):hover{background:color-mix(in srgb,var(--s2-acc) 13%,var(--s2-card))!important}
html body .cards>.dark{
  background:radial-gradient(60% 60% at 85% 0%,rgba(130,160,255,.2) 0%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#0E1A3D 0%,#22386E 100%)!important;
  border:0!important;box-shadow:var(--s2-tile-sh)!important}

/* /hosting: «Опиши сервер словами» — тёмно-синяя плитка по ширине страницы вместо чёрной полосы от края до края */
html body .x-ai-sec>.x-night{
  width:calc(100% - 48px);max-width:1192px;margin:0 auto;border-radius:30px;padding:64px 0 40px;
  background:linear-gradient(160deg,#0E1A3D 0%,#22386E 100%);box-shadow:var(--s2-tile-sh);
  --surface:#13224F;--surface-2:#192C5F;--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.2)}
html body .x-ai-sec>.x-night::after{background:linear-gradient(180deg,rgba(14,26,61,.94) 0%,rgba(14,26,61,.5) 42%,rgba(30,52,108,.94) 100%)}
html body .x-ai-sec>.x-night>.l-wrap{max-width:none;padding:0 40px}
html body .x-ai-sec>.x-night .x-ai{background:rgba(11,21,52,.84);box-shadow:0 40px 80px -40px rgba(3,8,26,.85)}
@media (max-width:860px){html body .x-ai-sec>.x-night>.l-wrap{padding:0 22px}}
@media (max-width:640px){
  html body .x-ai-sec>.x-night{width:calc(100% - 24px);border-radius:24px;padding:44px 0 26px}
  html body .x-ai-sec>.x-night>.l-wrap{padding:0 14px}}

/* PLUS: «сейчас танцует» на тёмно-синей плитке — тёмное стекло (в светлой теме было светлым, а текст белым) */
html body .px-hero .px-np{--px-glass:rgba(10,18,44,.62);--line:rgba(255,255,255,.14);--mute:#AEB8D8;color:#fff}

/* /download/thanks: длинные команды не растягивают страницу на телефоне */
html body .tx-step>div{min-width:0}
html body .tx-code{max-width:100%}
html body .tx-code pre{overflow-x:auto}

/* гардероб, тёмная тема: «−20 %» на мятной плашке — тёмным */
html[data-theme="dark"] body .set .off{color:#04301A}
/* документация: «Да» читается на светлом фоне */
html:not([data-theme="dark"]) body .dx-feedback .yes{color:#15803D!important}
/* /mods: SEO-блок в цветах страницы (в разметке оставался класс тёмной версии) */
html body .l-seo .seo.seo-dark{--s-ink:var(--ink);--s-ink2:var(--ink-2);--s-mute:var(--mute);--s-card:var(--surface);--s-line:var(--line);--s-acc:var(--acc);--s-acc-soft:var(--acc-soft)}

/* шапки всех семейств — в одной колонке с главной (1200): логотип и меню не прыгают при переходах между страницами */
html body header.nc-top .nc-row{box-sizing:border-box}
html body header.nc-top .nc-row{column-gap:16px}
html body:not(:has(.nc-wrap)) header.nc-top .nc-row{width:fit-content;min-width:min(1248px,100%);max-width:100%;margin-left:auto;margin-right:auto}
/* колокольчик уведомлений — только вошедшим (v1 случайно показывал его гостям: перебивал display у .ns-authonly) */
html:not(.nc-in) body .nc-top .ns-authonly{display:none!important}
html body .page>header>nav,html body .page>main{max-width:1248px}
html body header.tx-header .tx-nav{max-width:1248px}
/* меню не помещается в шапку уже ~1100px (страница уезжала вбок): 1101–1180 — плотнее, до 1100 — кнопка-меню, как на телефоне */
@media (min-width:1101px) and (max-width:1180px){html body .nlx-bar .nlx-a.nlx-a{padding:0 8px!important;font-size:13.5px!important}}
@media (max-width:1100px){html body header:has(.nlx-burger) .nlx-bar{display:none!important}html body .nlx-burger{display:grid!important}}

/* ================= v3 (2026-10-12): плитки-заголовки для оставшихся страниц, кабинет без чёрного и фиолетового ================= */

/* .s2-hero — синяя плитка «небо» для заголовка страницы (класс ставится в разметку: рейтинг, добавление сервера, сообщество,
   партнёры, вебхуки, документы); isl-* — настоящий остров из мира игры справа */
html body .s2-hero{position:relative!important;isolation:isolate;overflow:hidden!important;border:0!important;border-radius:30px!important;color:#fff!important;
  background:radial-gradient(70% 60% at 78% 8%,var(--s2-glow) 0%,rgba(255,255,255,0) 62%),var(--s2-sky)!important;box-shadow:var(--s2-tile-sh)!important;
  padding:40px!important;box-sizing:border-box!important}
html body .s2-hero::before{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none;display:block!important;
  background:var(--s2-pix)!important;background-size:64px 64px!important;image-rendering:pixelated;opacity:.6!important}
html body .s2-hero[class*="isl-"]::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:48px;top:50%;width:var(--iw,140px);aspect-ratio:var(--ia,1);
  transform:translateY(-50%);background:var(--isl) center/contain no-repeat;filter:drop-shadow(0 18px 18px rgba(8,22,64,.28))}
html body .s2-hero[class*="isl-"]>*{max-width:calc(100% - 220px)}
html body .s2-hero.isl-snowy{--isl:url(/assets/home2/isl-snowy.v1.webp);--ia:290/340;--iw:132px}
html body .s2-hero.isl-home{--isl:url(/assets/home2/isl-home.v1.webp);--ia:500/560;--iw:168px}
html body .s2-hero.isl-friends{--isl:url(/assets/home2/isl-friends.v1.webp);--ia:592/691;--iw:150px}
html body .s2-hero.isl-farm{--isl:url(/assets/home2/isl-farm.v1.webp);--ia:320/319;--iw:150px}
html body .s2-hero.isl-grass{--isl:url(/assets/home2/isl-grass.v1.webp);--ia:320/490;--iw:104px}
html body .s2-hero :is(h1,h2){color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 4px 0 rgba(8,22,64,.22)}
html body .s2-hero h1 :is(em,span){color:#CFE0FF!important;-webkit-text-fill-color:#CFE0FF!important;background:none!important;font-style:normal}
html body .s2-hero :is(p,li,.lead,.rt-lead){color:rgba(255,255,255,.92)!important}
html body .s2-hero :is(.kick,.kicker,.k,.eyebrow){color:rgba(255,255,255,.9)!important;background:transparent!important;border-color:rgba(255,255,255,.35)!important}
html body .s2-hero a:not([class]){color:#fff!important;text-decoration:underline;text-underline-offset:3px}
html body .s2-hero .stats :is(.v,.k){color:#fff!important}
html body .s2-hero .stats .k{opacity:.82}
html body .s2-hide{display:none!important}
html body .s2-hero .s2-dot{background:#fff!important}
@media (max-width:860px){
  html body .s2-hero{padding:28px 22px!important;border-radius:24px!important}
  html body .s2-hero[class*="isl-"]::after{display:none}
  html body .s2-hero[class*="isl-"]>*{max-width:none}}
/* /partners: 3D-фигурки стоят внутри плитки, по её краям */
html body .mascots.s2-in{top:var(--s2-mt,64px);height:290px;z-index:3!important}
html body .mascots.s2-in .mascot{width:228px;height:290px}
html body .mascots.s2-in .mascot.left{left:calc(50% - 470px)}
html body .mascots.s2-in .mascot.right{left:calc(50% + 242px)}
/* оглавление вебхуков на плитке — «стекло»; заголовок добавления сервера — во всю ширину; сообщество — с отступами */
html body .s2-hero .wh-toc a{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.4)!important;color:#fff!important;text-decoration:none!important}
html body .s2-hero .wh-toc a:hover{background:rgba(255,255,255,.28)!important}
html body .sa-head.s2-hero{max-width:none!important}
html body .head.s2-hero{margin:20px 0 18px!important}
html body .head.s2-hero.isl-friends{--iw:112px}

/* кабинет: главная кнопка страницы — синяя, акцентная цифра — тёмно-синяя плитка, PLUS — как плитка PLUS на главной */
html body #pageAction{background:var(--s2-acc)!important;color:#fff!important;box-shadow:0 3px 0 var(--s2-acc-d)!important}
html body #pageAction:hover{background:var(--s2-acc-d)!important}
html body .cb-stat.hi{background:linear-gradient(160deg,#13224D 0%,#24418A 100%)!important;box-shadow:var(--s2-tile-sh)}
html body .plx-mini{background:radial-gradient(60% 120% at 92% 0%,rgba(130,160,255,.28) 0%,rgba(255,255,255,0) 60%),linear-gradient(160deg,#0E1A3D 0%,#22386E 100%)!important;
  box-shadow:var(--s2-tile-sh)!important}
html body .plx-mini .w{background:linear-gradient(135deg,#FCD34D,#F59E0B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
html body .plx-mini .go{color:#1A3EA6!important}

/* ================= v4 (2026-10-12): публичный профиль игрока ================= */
/* герой профиля — плитка «небо» со своей сеткой: слева 3D-модель на светлой панели, справа данные игрока
   (v1 по ошибке применял к нему правила героя /download: колонка, ограничение ширины, чужой персонаж и острова) */
html body main>.hero.card{display:grid!important;grid-template-columns:minmax(0,420px) minmax(0,1fr)!important;gap:0!important;padding:0!important;
  min-height:0!important;align-items:stretch!important;justify-content:normal!important}
html body main>.hero.card>*{max-width:none!important;margin:0!important}
html body main>.hero.card::after{content:none!important;display:none!important}
html body main>.hero.card>.stage{margin:14px!important;border:0!important;border-radius:22px!important;min-height:480px}
html body main>.hero.card>.info{padding:30px 34px 30px 20px!important}
html body main>.hero.card .badge{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.3)!important;color:#fff!important}
html body main>.hero.card :is(.status,.status b,.status span:not(.dot),.bio){color:rgba(255,255,255,.92)!important}
html body main>.hero.card .status .sep{color:rgba(255,255,255,.55)!important}
html body main>.hero.card :is(.tags .tag,.links a,.links span){background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.3)!important;color:#fff!important}
html body main>.hero.card .hl{color:var(--s2-text)!important}
html body main>.hero.card .hl :is(small,em,i:not(.hi)){color:var(--s2-mute)!important}
html body main>.hero.card .facts{border-color:rgba(255,255,255,.3)!important;background:rgba(255,255,255,.1)!important}
html body main>.hero.card .facts>*{border-color:rgba(255,255,255,.25)!important}
html body main>.hero.card .facts span{color:rgba(255,255,255,.75)!important}
html body main>.hero.card .cape-rep,html body main>.hero.card .cape-rep .lnk{color:rgba(255,255,255,.8)!important}
@media (max-width:860px){
  html body main>.hero.card{grid-template-columns:minmax(0,1fr)!important}
  html body main>.hero.card>.stage{margin:12px 12px 0!important;min-height:380px}
  html body main>.hero.card>.info{padding:22px 20px 24px!important}}

/* ======================== v5: wardrobe (аудит 13.10, /root/agent-work/site5/fix/wardrobe.css) ======================== */
/* ===== /wardrobe, /en/wardrobe, /wardrobe/<item> — display fixes (site5 audit, family «wardrobe», 2026-10-13).
   Every rule is scoped to the wardrobe pages by `body:has(.wd-hero)` (the hero tile exists only there;
   /emotes, /skins, /capes reuse #modal, #grid, #daily-shop, .nl-fr, .seo, so plain ids/classes are not enough).
   Numbers in brackets = index in findings-wardrobe.json. ===== */

/* ---------- [9] palette: dark theme used the old graphite e2 tokens (#14151C cards, white-alpha borders) on the navy page,
   light theme used near-black/grey text tokens. Map the page tokens to the site («Острова») tokens.
   The daily shop, collections, modal and try-on panel read the same tokens; the 3D glossy backdrop of the item modal
   takes its base from --panel, so it becomes navy as well. ---------- */
html:not([data-theme="dark"]) body:has(.wd-hero){
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--panel2:var(--s2-soft);
  --bd:rgba(20,32,61,.09);--bd2:rgba(20,32,61,.15)}
html[data-theme="dark"] body:has(.wd-hero){
  --bg:var(--s2-bg);--panel:var(--s2-card);--panel2:var(--s2-soft);--bd:var(--s2-line);--bd2:#2E3B60;
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--mut2:#7A86AB}
html:not([data-theme="dark"]) body:has(.wd-hero) .seo{--s-ink:var(--s2-text);--s-ink2:var(--s2-text2);--s-mute:var(--s2-mute);--s-line:var(--s2-line)}
html[data-theme="dark"] body:has(.wd-hero) .seo{--s-card:var(--s2-card);--s-line:var(--s2-line);--s-ink:var(--s2-text);--s-ink2:var(--s2-text2);--s-mute:var(--s2-mute)}
/* «Фон сцены» picker of the 3D stages (styles injected by skinview3d-nl: graphite #1e2229 in dark) */
html[data-theme="dark"] body:has(.wd-hero) .nls-pop{background:var(--s2-card);box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 0 0 1px var(--s2-line)}
html[data-theme="dark"] body:has(.wd-hero) .nls-pick > button{background:rgba(18,26,48,.82)}

/* ---------- [0] item modal on desktop: the grid row grew to the side column's content (~1034px) and the box clipped it —
   CTA «Надеть / Примерить / Подарить» unreachable, 3D stage taller than the window (model zoomed, controls off-screen).
   Pin the row to the box height so #m-side scrolls inside the box and the stage fits the window. ---------- */
@media (min-width:861px){
  html body:has(.wd-hero) #modal .box{grid-template-rows:minmax(0,1fr)}
  html body:has(.wd-hero) #modal .stage{min-height:min(560px,calc(100vh - 50px))}
  html body:has(.wd-hero) #modal .side{min-height:0;overscroll-behavior:contain}
}

/* ---------- [18] deep link to an item focuses ✕ on open → thick black UA ring. Keep a visible, on-brand focus state. ---------- */
html body:has(.wd-hero) #modal .x:focus-visible{outline:0;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 30%,transparent)}

/* ---------- [1] mobile «Фильтры»: .fgroups kept flex-wrap:wrap from the base rule while the mobile rule made it a column, so the
   single flex line was as wide as the widest row (798px in a 358px card) — rows never scrolled, chips past ~320px were cut,
   the page got 827px wide. Keep one column, let each row scroll inside the card; fade the right edge like the slot scroller. ---------- */
@media (max-width:560px){
  html body:has(.wd-hero) #filters.open .fgroups{flex-wrap:nowrap}
  html body:has(.wd-hero) #filters .fg{min-width:0;max-width:100%;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
}

/* ---------- [7] slot chips (Все, Костюмы … Обувь): one-line scroller with a hidden scrollbar — a mouse wheel cannot scroll it,
   so on desktop 6 categories (Руки, Аксессуары, Юбки, Штаны, Хвосты, Обувь) were unreachable and the last chip was sliced.
   Wrap them on desktop / with a mouse; touch layouts keep the swipe row. ---------- */
@media (min-width:861px),(hover:hover) and (pointer:fine){
  html body:has(.wd-hero) #f-slots{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
}

/* ---------- [2] «Витрина дня»: «Войти и купить» (flex:1, nowrap) squeezed the two 38px icon buttons to 18px and pushed «Примерить»
   out of the card (clipped by overflow:hidden). Put the main button on its own row and split the icons below it. ---------- */
html body:has(.wd-hero) #daily-shop .shx-act:has(> .shx-btn.pri){flex-wrap:wrap}
html body:has(.wd-hero) #daily-shop .shx-act > .shx-btn.pri{flex:1 1 100%;min-width:0;overflow:hidden;text-overflow:ellipsis}
html body:has(.wd-hero) #daily-shop .shx-act:has(> .shx-btn.pri) > .shx-btn.ico{flex:1 1 0;width:auto;min-width:36px}

/* ---------- [15] widowed last rows. Container queries (scrollbar width does not matter), only for the current counts.
   Daily shop, 6 offers: where the auto-fill grid gives 4–5 columns (4+2 / 5+1) use 3 columns (3+3). ---------- */
html body:has(.wd-hero) #daily-shop > .shx{container-type:inline-size}
@container (min-width:730px) and (max-width:1101.98px){
  html body:has(.wd-hero) #daily-shop .shx-grid:has(> .shx-card:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  /* the cards are ~230–350px wide here: a 4:3 picture keeps the section compact */
  html body:has(.wd-hero) #daily-shop .shx-grid:has(> .shx-card:nth-child(6):last-child) .shx-pic{aspect-ratio:4/3;min-height:0;grid-template-rows:minmax(0,1fr)}
  html body:has(.wd-hero) #daily-shop .shx-grid:has(> .shx-card:nth-child(6):last-child) .shx-pic .shx-collage{width:64%}
}
/* Cases, 7 cards (auto-fill minmax(270px,1fr), gap 16): the first («Гардеробный», the main one) is a wide featured card;
   4 columns → 2+1+1 / 4, 3 columns → 2+1 / 3 / 1+2, 2 columns → 2 / 2 / 2 / 2. */
html body:has(.wd-hero) #cases-sec{container-type:inline-size}
@container (min-width:1128px){
  html body:has(.wd-hero) #cases:has(> .case:nth-child(7):last-child) > .case:first-child{grid-column:span 2}
}
@container (min-width:842px) and (max-width:1127.98px){
  html body:has(.wd-hero) #cases:has(> .case:nth-child(7):last-child) > .case:is(:first-child,:last-child){grid-column:span 2}
}
@container (min-width:556px) and (max-width:841.98px){
  html body:has(.wd-hero) #cases:has(> .case:nth-child(7):last-child) > .case:first-child{grid-column:span 2}
}

/* ---------- [3] catalog cards on narrow phones: the «Примерить» pill (bottom-left) covered the slot tag (bottom-right) —
   «Питомец» read «итомец». Below 420px the pill becomes an icon-only square (the label stays as its accessible name). ---------- */
@media (max-width:420px){
  html body:has(.wd-hero) #grid .item .pic > .nl-try-b{width:28px;height:28px;padding:0;gap:0;justify-content:center;font-size:0;line-height:0}
  html body:has(.wd-hero) #grid .item .pic > .nl-try-b svg{width:15px;height:15px}
}

/* ---------- [4] hero 3D stage on phones: the round «Фон сцены» button (bottom-right) covered the «Вращение» chip.
   Up to 420px it moves to the top-right corner (empty there: the hint is hidden on phones); its menu opens downward. ---------- */
@media (max-width:420px){
  html body:has(.wd-hero) #hero-stage > .nls-pick{top:10px;bottom:auto}
  html body:has(.wd-hero) #hero-stage > .nls-pick > .nls-pop{top:42px;bottom:auto}
}

/* ---------- [5] hero KPIs: «перекрашиваются» (110px) did not fit a quarter of the box at any desktop width (clipped to
   «перекрашиваютс»). Columns are never narrower than their longest word; where four do not fit (861–1000px, two-column hero)
   the box becomes 2×2 like on phones. ---------- */
@media (min-width:561px){
  html body:has(.wd-hero) .wd-hero .kpis{grid-template-columns:repeat(4,minmax(min-content,1fr))}
}
@media (min-width:861px) and (max-width:1000px){
  html body:has(.wd-hero) .wd-hero .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body:has(.wd-hero) .wd-hero .kpis > div:nth-child(3){border-left:0}
  html body:has(.wd-hero) .wd-hero .kpis > div:nth-child(n+3){border-top:1px solid var(--bd)}
}

/* ---------- [6] hero on the sky tile: «Смотреть каталог» (white on rgba(10,30,90,.22) over the pale end of the sky, ~2.9:1)
   looked disabled — darker navy glass (~5:1). The outfit line was grey on blue and the active dot was the hero's own blue —
   white text and white dots instead (both themes). ---------- */
html:not([data-theme="dark"]) body:has(.wd-hero) .wd-hero .hero-actions .btn:not(.pri){background:rgba(14,26,61,.5)!important;border-color:rgba(255,255,255,.5)!important}
html:not([data-theme="dark"]) body:has(.wd-hero) .wd-hero .hero-actions .btn:not(.pri):hover{background:rgba(14,26,61,.62)!important}
html body:has(.wd-hero) .wd-hero .outfit-nav{color:rgba(255,255,255,.88)}
html body:has(.wd-hero) .wd-hero #outfit-dots button{background:rgba(255,255,255,.42)}
html body:has(.wd-hero) .wd-hero #outfit-dots button:hover{background:rgba(255,255,255,.7)}
html body:has(.wd-hero) .wd-hero #outfit-dots button.on{background:#fff}

/* ---------- [12] section eyebrows: old e2 style (grey JetBrains Mono, wide tracking) next to the «Острова» eyebrows of the
   same page (SEO «ГАРДЕРОБ», footer) — Onest 800, blue. Inside the hero site2 keeps them white. ---------- */
html body:has(.wd-hero) .kicker{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--s2-acc-text)}

/* ---------- [13] violet leftovers: CTA band (blue→violet) becomes the navy tile of the site (PLUS / macOS tiles),
   case icons (blue→violet, pink→orange, orange→violet) — one brand-blue tile for every case. ---------- */
html body:has(.wd-hero) main.wrap > .band{
  background:radial-gradient(60% 140% at 92% 0%,rgba(130,160,255,.24) 0%,rgba(255,255,255,0) 60%),linear-gradient(160deg,#0E1A3D 0%,#22386E 100%);
  border-radius:30px;box-shadow:var(--s2-tile-sh)}
html body:has(.wd-hero) main.wrap > .band p{opacity:.88}
html body:has(.wd-hero) main.wrap > .band .btn{color:#1A3EA6;border-radius:15px;box-shadow:0 4px 0 rgba(8,22,64,.3);font-weight:800}
html body:has(.wd-hero) main.wrap > .band .btn:hover{color:#1A3EA6}
@media (max-width:640px){html body:has(.wd-hero) main.wrap > .band{border-radius:26px}}
html body:has(.wd-hero) #cases .case .ic{background:linear-gradient(160deg,var(--s2-acc) 0%,var(--s2-acc-d) 100%)}

/* ---------- [14] SEO block below the page: own max-width 1180 + padding 24 started 30px right of every section above (x=117 vs 87)
   and sat ~120px below the CTA band (sections are 44px apart). Same column and rhythm as main.wrap. ---------- */
html body:has(.wd-hero) main.wrap:has(+ section.seo){padding-bottom:0}
html body:has(.wd-hero) > section.seo{max-width:1240px;padding:44px 24px 8px}
@media (max-width:560px){html body:has(.wd-hero) > section.seo{padding:34px 16px 4px}}

/* ---------- [10] dye palette, dark theme: «Чёрный» (and the dark navy swatch) disappeared into the panel —
   the swatch border was rgba(0,0,0,.15). ---------- */
html[data-theme="dark"] body:has(.wd-hero) .dye-row .swatches button{border-color:rgba(255,255,255,.24)}

/* ---------- [11] «Примерочная» (try-on panel): active pose / rotate chips were pure-black pills (white in dark) while every other
   chip on the page is blue; the «Стив — стандартный скин» row had an empty white thumbnail — show Steve's head there
   (guests and «На стандартном»; the JS fix is in wardrobe.md). ---------- */
html body:has(.wd-hero) .nl-fr .nl-fr-chip.on{background:var(--ac);border-color:var(--ac);color:#fff}
html body:has(.wd-hero) .nl-fr:is(:has(.nl-fr-login),:has(.nl-tg [data-m="std"][aria-pressed="true"])) #nl-fr-list > li:first-child > .th:empty{
  background:var(--panel) url(/assets/plusx/head-steve.v1.png) center/28px 28px no-repeat;image-rendering:pixelated}

/* ---------- [20] «Кибер» collection: the master item is not out yet and the card showed a tiny crown in an empty gold box
   (read as a broken image). Make it an intentional «coming soon» tile: dashed frame, larger dimmed crown, a «скоро» tag. ---------- */
html body:has(.wd-hero) #collections .shx-rw[disabled]:not(:has(img)){
  background:color-mix(in srgb,var(--shx-gold) 8%,var(--panel2));
  box-shadow:none;outline:1.5px dashed color-mix(in srgb,var(--shx-gold) 60%,transparent);outline-offset:-1.5px}
html body:has(.wd-hero) #collections .shx-rw[disabled]:not(:has(img)) svg{width:34px;height:34px;opacity:.55;margin-top:-12px}
html body:has(.wd-hero) #collections .shx-rw[disabled]:not(:has(img))::after{
  content:"скоро";position:absolute;left:50%;bottom:11px;transform:translateX(-50%);padding:2px 7px;border-radius:6px;
  font:800 10.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#3A2600;background:var(--shx-gold);white-space:nowrap}
html:lang(en) body:has(.wd-hero) #collections .shx-rw[disabled]:not(:has(img))::after{content:"soon"}

/* ---------- modal rarity pill «Легендарная»: white on gold (1.6:1) — dark ink like the PLUS gold buttons ---------- */
html body:has(.wd-hero) #modal .pill.rar.r-legendary{color:#2A1A02}


/* ======================== v5: looks-cases (аудит 13.10, /root/agent-work/site5/fix/looks-cases.css) ======================== */
/* ===== looks-cases (2026-10-13): /skins, /capes, /cases — fixes from the site audit =====
   Scope: /skins and /capes  -> html body:is([data-mode="skins"],[data-mode="capes"])  (only these two pages carry body[data-mode])
          /cases + /cabinet/cases (shared case components) -> html body:has(#shelf)  (#shelf exists only on those two pages)
          public /cases only -> html body:not(.nc):has(#shelf) */

/* --- 1. skin/cape detail modal on laptop heights (<800px): the grid row grew to its content (stage min-height 560 + side),
      the box clipped the bottom and the side panel never scrolled, so the buttons and 3D controls were unreachable.
      The row is clamped to the box's max-height, the side panel scrolls, the stage keeps 560px only while it fits. */
@media (min-width:861px){
  html body:is([data-mode="skins"],[data-mode="capes"]) #modal .box{grid-template-rows:minmax(0,1fr)}
  html body:is([data-mode="skins"],[data-mode="capes"]) #modal .stage{min-height:min(560px,calc(100vh - 50px))}
  html body:is([data-mode="skins"],[data-mode="capes"]) #modal .side{min-height:0;overscroll-behavior:contain}
}

/* --- 2. «Сейчас в игре» strip: a soft fade at the right edge says «scrolls» (cards were cut flat at the edge) */
html body:is([data-mode="skins"],[data-mode="capes"]) .nlr-online .nlr-strip{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
  padding-right:44px}

/* --- 3. hero KPI on phones: «анимированных» did not fit its third of the box (cut at 360/390) — columns are sized by their
      labels (a column is never narrower than its longest word; two-word labels still wrap) */
@media (max-width:420px){
  html body:is([data-mode="skins"],[data-mode="capes"]) .lk-hero .kpis{grid-template-columns:repeat(3,auto)}
  html body:is([data-mode="skins"],[data-mode="capes"]) .lk-hero .kpis div{padding:12px 10px}
  html body:is([data-mode="skins"],[data-mode="capes"]) .lk-hero .kpis span{font-size:11px}
}
@media (max-width:359px){
  html body:is([data-mode="skins"],[data-mode="capes"]) .lk-hero .kpis div{padding:10px 8px}
  html body:is([data-mode="skins"],[data-mode="capes"]) .lk-hero .kpis span{font-size:10.5px}
}

/* --- 4. hero 3D stage on phones: the round «Фон сцены» button covered the «Вращение» chip — the picker goes to the top-right
      corner (empty on phones: hint and ruler are hidden), its menu opens downward */
@media (max-width:440px){
  html body:is([data-mode="skins"],[data-mode="capes"]) .lk-hero .stage .nls-pick{top:10px;bottom:auto}
  html body:is([data-mode="skins"],[data-mode="capes"]) .lk-hero .stage .nls-pick .nls-pop{top:42px;bottom:auto}
}

/* --- 5. hero title: 66px wrapped «Скины Minecraft, в которых играют» to 4 lines, pushing the buttons below the fold on
      laptop heights; 60px keeps it to 2 lines (same as /capes) */
@media (min-width:861px){
  html body:is([data-mode="skins"],[data-mode="capes"]) .lk-hero h1{font-size:clamp(38px,4.4vw,60px);text-wrap:balance}
}

/* --- 6. hero secondary button «Добавить свой» (light theme): white on rgba(10,30,90,.22) over the light end of the sky was
      ~2.7:1 and looked disabled — darker navy glass (5.0–5.4:1 measured) */
html:not([data-theme="dark"]) body:is([data-mode="skins"],[data-mode="capes"]) .lk-hero .hero-actions .btn:not(.pri){
  background:rgba(14,26,61,.5)!important;border-color:rgba(255,255,255,.5)!important}
html:not([data-theme="dark"]) body:is([data-mode="skins"],[data-mode="capes"]) .lk-hero .hero-actions .btn:not(.pri):hover{background:rgba(14,26,61,.62)!important;color:#fff!important}

/* --- 7. «HD» tag: pure-black pill (old black style) -> navy */
html:not([data-theme="dark"]) body:is([data-mode="skins"],[data-mode="capes"]) .tg.hd{background:#14203D}
html[data-theme="dark"] body:is([data-mode="skins"],[data-mode="capes"]) .tg.hd{background:#EEF2FF;color:#14203D}

/* --- 7b. tile price words («free» — see looks-cases.md for the Russian text — and «ваш») in the page font; the mono face
      is kept for NLcoin amounts */
html body:is([data-mode="skins"],[data-mode="capes"]) .tile .price:is(.free,.own){font-family:inherit;font-weight:700}

/* --- 8. filter rows on phones: labels in one fixed column (chips start at the same x), a fade shows the row scrolls,
      the theme row no longer pokes 3px past the card */
@media (max-width:560px){
  html body:is([data-mode="skins"],[data-mode="capes"]) #fgroups .fg{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
    margin-right:-12px;padding-right:30px}
  html body:is([data-mode="skins"],[data-mode="capes"]) #fgroups .fg>span{flex:0 0 74px;margin-right:0;font-size:10.5px;line-height:1.25;white-space:normal}
}

/* --- 9. catalog grid 1000–1190px: 5 columns with 24 items per page left a 4-of-5 last row — 4 columns there
      (container query, so the scrollbar width does not matter) */
html body:is([data-mode="skins"],[data-mode="capes"]) #catalog{container-type:inline-size}
@container (min-width:946px) and (max-width:1137.98px){
  html body:is([data-mode="skins"],[data-mode="capes"]) #catalog .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* --- 10. SEO block under /skins started 30px right of the content column (max-width 1180 + own padding) — same column as main */
html body:is([data-mode="skins"],[data-mode="capes"]) > section.seo{max-width:1240px}

/* --- 11. dark theme: cards and panels used the old graphite tokens (#14151C / #1A1C24 / #0B0B0F) on the navy page —
      the site's navy card colors instead (public pages only; the cabinet has its own palette) */
html[data-theme="dark"] body:is([data-mode="skins"],[data-mode="capes"]),
html[data-theme="dark"] body:not(.nc):has(#shelf){
  --bg:var(--s2-bg);--panel:var(--s2-card);--panel2:var(--s2-soft);--bd:var(--s2-line);--ink2:var(--s2-text2);--mut:var(--s2-mute)}
html[data-theme="dark"] body:is([data-mode="skins"],[data-mode="capes"]) .seo{--s-card:var(--s2-card);--s-line:var(--s2-line);--s-ink2:var(--s2-text2);--s-mute:var(--s2-mute)}

/* --- 12. dark theme hero 3D stage: near-black, dark skins vanished. The WebGL backdrop takes its base color from the first
      ancestor with a background-color (here the page, #0A0F1E) — the stage gets the navy of the dark tiles as its own, so the
      backdrop and its floor light come out lighter. The CSS gradient (shown without WebGL) follows. */
html[data-theme="dark"] body:is([data-mode="skins"],[data-mode="capes"]) .lk-hero .stage{background-color:#22386E}
html[data-theme="dark"] body:is([data-mode="skins"],[data-mode="capes"]){--stage1:#13214A;--stage2:#2A4384;--grid:rgba(150,180,255,.10)}

/* --- 13. animated capes: the whole 24-frame strip (256×3072) was squeezed into an 11×110 sliver — show the first frame (2:1) */
html body:is([data-mode="skins"],[data-mode="capes"]) #m-side:has(.pill.live) #m-tex{width:96px;height:48px;max-height:none;object-fit:cover;object-position:0 0}


/* ================= /cases ================= */

/* --- 14. page top like /skins and /capes (content started 8px lower) */
html body:not(.nc):has(#shelf) main.wrap{padding-top:28px}
@media (max-width:560px){ html body:not(.nc):has(#shelf) main.wrap{padding-top:16px} }

/* --- 15. primary actions in the brand blue: every case had its own CTA color (violet, pink, orange, gold, pure black);
      white text on gold/orange was 2–2.5:1. The case color stays in the art, the hover border and the opening room. */
html body:has(#shelf) .case .foot .btn.pri,
html body:has(#shelf) .sheet .side .ft .btn.pri,
html body:has(#shelf) .room .btn.pri{background:var(--s2-acc);border-color:var(--s2-acc);color:#fff}
html body:has(#shelf) .case .foot .btn.pri:hover,
html body:has(#shelf) .sheet .side .ft .btn.pri:hover,
html body:has(#shelf) .room .btn.pri:hover{background:var(--s2-acc-d);border-color:var(--s2-acc-d);color:#fff;filter:none}

/* --- 16. case art at tablet widths (one card per row, ~720px wide): fixed 272px height cropped heads and chests —
      the cover keeps its own 1200×630 proportions in the one-column layout; a soft top shade keeps the eyebrow readable */
html body:has(#shelf) #shelf{container-type:inline-size}
@container (max-width:939.98px){  /* the shelf is one column below 2×460px + gap */
  html body:has(#shelf) .case.has-cover .art{height:auto;aspect-ratio:1200/630}
}
html body:has(#shelf) .case.has-cover .art::after{content:"";position:absolute;inset:0 0 auto;height:64px;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(5,8,20,.42),rgba(5,8,20,0))}

/* --- 17. «Стартовый кейс» cover: the «7 вещей» pill covered the star tile of the art — moved to the bottom-right corner */
html body:has(#shelf) .case.art-cosmetic.has-cover .art .n{top:auto;bottom:14px}

/* --- 18. «Состав» sheet on phones: stage + header + sticky footer left 163–243px for the list (1.5 items) —
      the whole sheet scrolls, the close button and the CTA footer stay pinned */
@media (max-width:560px){
  html body:has(#shelf) .sheet:not(.gate) .box{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
  html body:has(#shelf) .sheet:not(.gate) .box>.x{position:sticky;top:12px;flex:none;align-self:flex-end;margin:12px 12px -52px 0}
  html body:has(#shelf) .sheet:not(.gate) .stage.art{flex:none;height:min(36vh,280px)}
  html body:has(#shelf) .sheet:not(.gate) .side{flex:none;display:block}
  html body:has(#shelf) .sheet:not(.gate) .side .list{overflow:visible}
  html body:has(#shelf) .sheet:not(.gate) .side .ft{position:sticky;bottom:0;z-index:3}
  html body:has(#shelf) .sheet:not(.gate) .tier .th{padding-right:46px}
}

/* --- 19. «Состав» stage caption: a fade to the stage color under the rarity/name so big items (Щупальца Кракена) don't run
      through the text */
html body:has(#shelf) .sheet #d-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(color-mix(in srgb,var(--art-bg,#0B0F18) 0%,transparent),color-mix(in srgb,var(--art-bg,#0B0F18) 82%,transparent))}

/* --- 20. profile cosmetics (Стартовый кейс): the preview was an inline span (width/height ignored) — a bare ★ or an empty
      outline; reel tiles and the reveal showed frames as blank white squares; floor shadow / ring floated far below.
      Previews become a navy profile tile, frames get a head inside, the podium sits under the tile. */
html body:has(#shelf) #d-stage .flat .cs{display:grid!important;place-items:center;width:min(184px,46%)!important;height:auto!important;aspect-ratio:1;
  border-radius:40px!important;font-size:64px!important;line-height:1;background-color:#14203D;border-width:4px!important;position:relative}
html body:has(#shelf) .sheet .box.art-cosmetic #d-stage .shadow{display:none}
html body:has(#shelf) .room .tile .cs{background-color:#18213B}
html body:has(#shelf) .room .reveal .st .flat>span{background-color:#14203D!important;position:relative}
html body:has(#shelf) :is(#d-stage .flat .cs,.room .tile .cs,.room .reveal .st .flat>span)[style*="border:"]::before{
  content:"";position:absolute;inset:25%;border-radius:12%;image-rendering:pixelated;
  background:url(/assets/default-steve.png) 14.2857% 14.2857%/800% 800% no-repeat}
html body:has(#shelf) .room.art-cosmetic .reveal .st .ring{bottom:calc(50% - 124px)}

/* --- 21. «Неон-ник» preview: cyan on a white tile was 1.8:1 — name styles with a glow sit on a dark navy tile everywhere */
html body:has(#shelf) :is(.drop .th .cs,.itm .th2 .cs,#d-stage .flat .cs,.room .tile .cs,.room .reveal .st .flat>span)[style*="text-shadow"]{background:#0E1A3D!important}

/* --- 22. opening room: «Пропустить» (already focused, blue ring) showed through the chest intro — hidden until the reel comes */
html body:has(#shelf) .room .under{transition:opacity .3s ease}
html body:has(#shelf) .room .main:has(>.intro:not(.leave):not(.gone))>.under{opacity:0}

/* --- 23. reveal actions: no lone button on a second row — the main action full width, the other two side by side;
      secondary buttons opaque enough that the room pattern (Пираты waves) doesn't run through them; the balance in the sans
      font (the mono no-break thousands space read as «1   234») */
@media (min-width:561px){  /* phones keep the page's own full-width stack */
  html body:has(#shelf) .room .reveal .acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html body:has(#shelf) .room .reveal .acts .btn{min-width:0}
  html body:has(#shelf) .room .reveal .acts .btn.pri{grid-column:1/-1}
  html body:has(#shelf) .room .reveal .acts .btn.pri+.btn:last-child{grid-column:1/-1}
}
html body:has(#shelf) .room :is(.reveal .acts,.under) .btn:not(.pri){background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)),rgba(8,10,18,.86)}
html body:has(#shelf) .room .reveal .meta b{font-family:inherit;font-variant-numeric:proportional-nums}

/* --- 24. /cases hero: an empty blue band between the text and the wallet card — the case chests stand there (wide screens);
      on phones the guest card stacks instead of wrapping into four short lines */
@media (min-width:1100px){
  html body:not(.nc):has(#shelf) main.wrap>section.head{grid-template-columns:minmax(0,1fr) auto auto}
  html body:not(.nc):has(#shelf) main.wrap>section.head>.wallet{grid-column:3;grid-row:1}
  html body:not(.nc):has(#shelf) main.wrap>section.head::after{content:"";grid-column:2;grid-row:1;align-self:stretch;width:330px;margin:-30px 0 -44px;pointer-events:none;
    background:url(/assets/cases/wardrobe-closed.v1.webp) 50% calc(100% - 2px)/196px auto no-repeat,
               url(/assets/cases/pirates-2026-closed.v1.webp) 0 calc(100% - 10px)/150px auto no-repeat,
               url(/assets/cases/space-2026-closed.v1.webp) 100% calc(100% - 10px)/150px auto no-repeat;
    filter:drop-shadow(0 14px 16px rgba(8,22,64,.3))}
}
@media (max-width:420px){
  html body:not(.nc):has(#shelf) #wallet.wallet.guest{flex-wrap:wrap}
  html body:not(.nc):has(#shelf) #wallet.wallet.guest .btn{flex:1 1 100%;margin-left:0}
}


/* ======================== v5: servers (аудит 13.10, /root/agent-work/site5/fix/servers.css) ======================== */
/* ===== /servers, /en/servers, /servers/rating, /servers/add, /servers/edit, /servers/<id>, /en/servers/<id>, /my-servers —
   display fixes (site5 audit, family «servers», 2026-10-13). Numbers in brackets = index in findings-servers.json.
   Scope: only these pages load sv.v1.css; they are recognised by their <main> (#sv-cat catalog, #rt rating, #sa add,
   #sd server page, #ms-app my servers) or the edit page's top-level section#ed-main. The news and changelog pages share
   header.hh, so .hh alone is never used as a scope. Two scope forms:
     html-level  html:has(> body > :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main))
     body-level  html body:has(> :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main))
   The html-level form re-declares the sv.v1.css tokens. They are declared on :root, and html{background:var(--bg)} reads them there. ===== */

/* ---------- [17][19] palette: the family still used the e2 tokens. Dark: graphite cards #14151C and inputs #0B0B0F on the navy page.
   Light: near-black ink and a too-light --faint (#9AA0AB, 2.6:1 on white for the 11–13px numbers «/ 2 026», «98 ms», «баллов»).
   Map them to the site («Острова») tokens. --faint stays one step lighter than --mute but is readable (4.8:1 on white, 4.8:1 on the dark card). ---------- */
html:not([data-theme="dark"]):has(> body > :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main)){
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mute:var(--s2-mute);--faint:#68728C;--card2:var(--s2-soft)}
html[data-theme="dark"]:has(> body > :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main)){
  --bg:var(--s2-bg);--bg2:#0E1428;--card:var(--s2-card);--card2:var(--s2-soft);
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mute:var(--s2-mute);--faint:#7A86AB;
  --line:rgba(150,172,240,.11);--line2:rgba(150,172,240,.2)}
html[data-theme="dark"] body:has(> main#sv-cat) .seo{--s-card:var(--s2-card);--s-line:var(--s2-line);--s-ink:var(--s2-text);--s-ink2:var(--s2-text2);--s-mute:var(--s2-mute)}
html:not([data-theme="dark"]) body:has(> main#sv-cat) .seo{--s-ink:var(--s2-text);--s-ink2:var(--s2-text2);--s-mute:var(--s2-mute)}

/* ---------- [5] html kept the old --bg (#F6F7F9 / #0B0B0F) while site2 paints only body: a different band under the footer on short pages
   and on overscroll. ---------- */
html:has(> body > :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main)){background-color:var(--s2-bg)!important}

/* ---------- [10] anchors (#top, #vote, #rating, #reviews …) scrolled the section under the sticky 62–66px header ---------- */
html:has(> body > :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main)){scroll-padding-top:84px}

/* ---------- [18] accents outside the palette. Ads were orange (#B45309) and places №2–5 were violet. The owner rejected violet and orange
   for the site, so the ads use PLUS gold and the places use the site blue/navy. In dark, the light pills get dark text,
   because white on #9D8CFF/#94A3B8 was 2.6–2.8:1. ---------- */
html:has(> body > :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main)){
  --t1a:#FCD34D;--t1b:#F59E0B;--t1ink:#3A2405;--t5:#2E6CF6;--t10:#22386E;--t20:#64748B}
html[data-theme="dark"]:has(> body > :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main)){--t5:#6F9BFF;--t10:#3E5A99;--t20:#94A3B8}
html[data-theme="dark"] body:has(> :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main)) :is(.pill.tier.t5,.pill.tier.t20,.pill.tier.t0,.ban .tag-tier.t5){color:#0A0F1E}
html:not([data-theme="dark"]) body:has(> :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main))
  :is(.grp-h.top .kick,.chip.top,.cmp .ad b,.sup-list li b,.tgt button.t1 b,.sc.slot.s1 .sl-n){color:#9A6700}
html:not([data-theme="dark"]) body:has(> :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main)) .sc.slot.s1 .sl-st{color:#7A5200}

/* ---------- [16] two leftover near-black blocks in the light theme: the «Сейчас играют» board (#0B1220) and the active category chip (#0B0B0F).
   The board becomes the navy tile of the home page; the active chip uses the site blue. ---------- */
html body main#sv-cat .cx-hero aside.board{
  background:radial-gradient(60% 60% at 80% 0%,rgba(130,160,255,.22) 0%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#0E1A3D 0%,#22386E 100%);
  border-color:rgba(255,255,255,.1);box-shadow:var(--s2-tile-sh)}
html body main#sv-cat #chips .chip[aria-pressed="true"]{background:#2E6CF6;border-color:#2E6CF6;color:#fff}  /* #2E6CF6 in both themes: white on the dark --s2-acc #4C82FF is 3.5:1 */
html body main#sv-cat #chips .chip[aria-pressed="true"]:hover{background:#1E4FC4;border-color:#1E4FC4;color:#fff}
html body main#sv-cat #chips .chip[aria-pressed="true"] .n{opacity:.85}
/* the same leftovers on the «Добавь свой сервер» CTA tile: near-black button hover; in dark white text on #4C82FF (2.7–2.9:1) → the dark sky tile */
html body main#sv-cat .cta.add p{color:rgba(255,255,255,.92)}
html body main#sv-cat .cta.add .btn:hover{background:#DCE8FF;color:#14203D}
html[data-theme="dark"] body main#sv-cat .cta.add{background:radial-gradient(70% 60% at 78% 8%,var(--s2-glow) 0%,rgba(255,255,255,0) 62%),var(--s2-sky)}

/* ---------- [4] category chips: a one-line scroller with a hidden scrollbar. On desktop a mouse can't scroll it, so «С модами» (and on 1024
   «Креатив», «SkyBlock») couldn't be reached. Wrap them from 761px; phones keep the swipe row with a fade at the edge. ---------- */
@media (min-width:761px){
  html body main#sv-cat #chips.chips{flex-wrap:wrap;overflow:visible}
}
@media (max-width:760px){
  html body main#sv-cat #chips.chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
}

/* ---------- [12] rating cards: the score row wrapped and «Голосовать» fell alone onto a second line in narrow cards (360, 761–800, ~1060–1140).
   Keep one line. When the row is narrower than its content, drop the uptime figure; below 250px, the button keeps only its icon
   (the button keeps title «Голос раз в сутки…»). ---------- */
html body main#sv-cat #grid article.sc .sc-rate{flex-wrap:nowrap;container-type:inline-size}
@container (max-width:330px){
  html body main#sv-cat #grid article.sc .sc-rate:has(.sr-n) .sr-u{display:none}  /* «#12 79 баллов ↑23 99,7%» + button ≈ 322px */
}
@container (max-width:290px){
  html body main#sv-cat #grid article.sc .sc-rate .sr-u{display:none}  /* promo cards have no «#N»: ≈ 282px */
}
@container (max-width:250px){
  html body main#sv-cat #grid article.sc .sc-rate .vote-btn span{display:none}
}

/* ---------- [23] free-place placeholders «Место №N свободно»: the grey skeleton (icon square + bars) read as a card that never finished
   loading. Show a real island render from the game (the home page's assets) as «your server here» instead. Phones hide the ghost already. ---------- */
html body main#sv-cat #grid .sc.slot .sl-ghost{
  border:0;padding:0;border-radius:0;opacity:1;min-height:132px;margin:auto 0;
  background:url(/assets/home2/isl-petals.v1.webp) center/auto 132px no-repeat;filter:drop-shadow(0 16px 16px rgba(8,22,64,.18))}
html body main#sv-cat #grid .sc.slot .sl-ghost>*{display:none}
html body main#sv-cat #grid .sc.slot[data-slot="3"] .sl-ghost{background-image:url(/assets/home2/isl-farm.v1.webp)}
html body main#sv-cat #grid .sc.slot[data-slot="4"] .sl-ghost{background-image:url(/assets/home2/isl-snowy.v1.webp)}
html body main#sv-cat #grid .sc.slot[data-slot="5"] .sl-ghost{background-image:url(/assets/home2/isl-farm.v1.webp)}
html body main#sv-cat #grid .sc.slot.s1 .sl-ghost{background-image:url(/assets/home2/isl-savanna.v1.webp);background-size:auto 150px;min-height:150px}
html[data-theme="dark"] body main#sv-cat #grid .sc.slot .sl-ghost{filter:drop-shadow(0 16px 18px rgba(0,0,0,.45))}

/* ---------- [15] the SEO block (max-width 1180 + 24px padding) started 30px right of the card grid (1192px column) ---------- */
html body main#sv-cat>section.seo{max-width:1240px;padding-left:24px;padding-right:24px}
@media (max-width:760px){html body main#sv-cat>section.seo{padding-left:16px;padding-right:16px}}

/* ---------- [24] footer column 1200px (from 1280 − 2×40): 4px left of the header/content column at desktop, 12px vs 16px gutter on phones ---------- */
html body:has(> :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main)) footer.o-foot{max-width:1240px;padding-left:24px;padding-right:24px}
@media (max-width:760px){
  html body:has(> :is(main#sv-cat,main#rt,main#sa,main#sd,main#ms-app,section#ed-main)) footer.o-foot{padding-left:16px;padding-right:16px}
}

/* ---------- [0] /servers/rating had no side padding: `.rt-page{padding:34px 0 10px}` overrides `.wrap{padding:0 24px}`. Content touched the screen
   edges below 1240px and was 24px wider than the header above it ---------- */
html body main#rt.rt-page{padding-left:24px;padding-right:24px}
@media (max-width:760px){html body main#rt.rt-page{padding-left:16px;padding-right:16px}}

/* «Сейчас в топе» on phones: the «до 16 октября в 14:17 МСК» column left the server names 19–51px («A…», «Zavo…»). The gutters above
   take 32px more, so the date goes onto its own line under the name. */
@media (max-width:560px){
  html body main#rt #board .vote-list li{flex-wrap:wrap;row-gap:0}
  html body main#rt #board .vote-list li .n{flex-basis:100%;padding-left:30px;font-size:11.5px}
}

/* ---------- [14] «Рейтинг — бесплатно / Места в топе — реклама» stuck to the hero (1px) as faint grey boxes (old --card2 on the new page) ---------- */
html body main#rt>.cmp{margin-top:16px}
html body main#rt>.cmp>div{background:var(--s2-card);box-shadow:var(--s2-shadow)}

/* ---------- [9] places №1–20: occupied places were drawn at opacity .55 (holder name 2.0:1 light / 2.5:1 dark, «VEXA» on gold barely visible).
   The name used an invalid `font:600 10px var(--sans, inherit)` and so rendered at 15px and truncated. Only the №/price of an occupied place is muted (--faint);
   the holder's name stays readable at 10.5px. ---------- */
html body main#rt #pl-grid .pl.taken{opacity:1}
html body main#rt #pl-grid .pl.taken>:is(b,span){color:var(--faint)}
html body main#rt #pl-grid .pl.t1.taken>:is(b,span){color:var(--t1ink);opacity:.7}
html body main#rt #pl-grid .pl em{font:600 10.5px/1.3 Onest,system-ui,sans-serif;font-style:normal;color:var(--ink2);margin-top:1px}
html body main#rt #pl-grid .pl.t1 em{color:var(--t1ink)}
html body main#rt #pl-grid+.pl-cap{margin-top:10px}

/* ---------- [1] server page ≤980px: the column flex kept `align-items:start` from the desktop grid, so the former sidebar cards shrank to their content
   (453 / 283 / 390 / 324px in a 720px column) ---------- */
@media (max-width:980px){html body main#sd .cols{align-items:stretch}}

/* ---------- [2] the «Онлайн» tile clipped the max players («13 879 / 200» instead of «/ 200 000», «/ 50 0»): 6 equal tiles leave 151px for ~195px.
   [11] at 981–1150px the tiles wrapped as 5 + a lone «Аптайм» tile.
   6 tiles: one row only at the full 1192px column, with a wider first tile. Below that, 3 + 3. The value wraps under the number if it still doesn't fit. ---------- */
html body main#sd #tiles .tile .tv{flex-wrap:wrap;row-gap:0}
@media (min-width:981px){html body main#sd #tiles.tiles.n6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1241px){
  html body main#sd #tiles.tiles.n6{grid-template-columns:minmax(0,1.45fr) repeat(5,minmax(0,1fr))}
  html body main#sd #tiles.tiles.n5{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr))}
}

/* ---------- [7] «Адрес сервера»: the «Копировать» label (≈109px) cut the address itself («mc.anarchyo…», «dwlvsrv.dalam.wor…»).
   Icon-only copy affordance. The whole field is the copy button, with title «Скопировать адрес»; the label stays in the accessibility tree. ---------- */
html body main#sd .connect .addr em{font-size:0;gap:0;padding:7px}
html body main#sd .connect .addr em svg{width:16px;height:16px}

/* ---------- [3] Minecraft-list preview on phones: the online counter (≈136px) was laid over the server name (only 90px reserved).
   Phones: the counter goes on its own line under the MOTD, the icon spans both rows. ---------- */
@media (max-width:760px){
  html body:has(> :is(main#sd,main#sa,main#ms-app)) .mc{grid-template-rows:auto auto;row-gap:6px}
  html body:has(> :is(main#sd,main#sa,main#ms-app)) .mc .mi{grid-row:1 / span 2;align-self:center}
  html body:has(> :is(main#sd,main#sa,main#ms-app)) .mc .mn{padding-right:0}
  html body:has(> :is(main#sd,main#sa,main#ms-app)) .mc .mr{grid-column:2;grid-row:2;justify-self:start;font-size:13.5px}
}

/* ---------- [20] /servers/add steps: four equal columns cut «Баннер и иконка» at 768, and the connectors were 96 / 70 / 20px.
   Each step is as wide as its label, and the free space goes equally to the three connectors. ---------- */
@media (min-width:641px){
  html body main#sa .sa-steps li{flex:1 1 auto}
  html body main#sa .sa-steps li:last-child{flex:0 0 auto}
  html body main#sa .sa-steps .t{overflow:visible;text-overflow:clip}
}

/* ======================== v6: download (аудит 13.10, /root/agent-work/site5/fix/download.css) ======================== */
/* ===== /download, /en/download, /download/thanks, /download/install, /en/download/thanks, /en/download/install —
   display fixes (site5 audit, family «download», 2026-10-13). Numbers in brackets = index in findings-download.json.
   Scope (nothing else on the site has these):
     /download, /en/download        the page wrapper div.page as a direct child of body:  html body>.page …
                                    body-level form for the footer:                     html body:has(>.page>main>#rows)
     /download/thanks, …/install    body.tx:                                             html body.tx …
   This block is appended to site2.vN.css. On /download that file loads BEFORE nav.v7.css, so rules that fight nav.v7
   (burger display/margins, .nlx-bar margin) use selectors more specific than nav.v7's `html body .nlx-…` (0,1,2). ===== */

/* ---------- [0] /download at 861–1100px: no menu at all. site2 hides .nlx-bar at ≤1100 and shows the burger, but nav.v7 (loaded later on
   /download) hides the burger again above 860px with the same specificity. ---------- */
@media (max-width:1100px){
  html body>.page>header>nav>.nlx-burger{display:grid!important}
  html body>.page>header>nav>.nlx-bar{display:none!important}
}

/* ---------- [3] /download header: site2 styles `body>header:not([class])`, but here the header is .page>header, so it kept the old
   #F6F7F9 bar with a bottom border, an 18px/900 wordmark, a left-aligned menu and a white «Войти» pill (dark: near-black band).
   Same treatment as every other header: page-coloured glass, 21px/800 wordmark, centred menu, «Войти» as text. ---------- */
html body>.page>header{background:color-mix(in srgb,var(--s2-bg) 86%,transparent)!important;border-bottom:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important}
html body>.page>header .brand{display:inline-flex!important;align-items:center!important;gap:10px!important;color:var(--s2-text)!important;text-decoration:none!important;
  font:800 21px/1 Onest,system-ui,sans-serif!important;letter-spacing:-.01em!important}
html body>.page>header .brand span{font:inherit!important;letter-spacing:inherit!important;color:inherit!important}
html body>.page>header>nav{gap:12px!important}
html body>.page>header>nav>.nlx-bar{margin:0 auto!important}
html body>.page>header .login{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--s2-text)!important;
  font:700 15px/1 Onest,system-ui,sans-serif!important;padding:9px 16px!important;white-space:nowrap}
html body>.page>header .login:hover{color:var(--s2-acc-text)!important}
/* the centred menu takes the free space on both sides; «Войти» must not take a third share of it */
html body>.page>header>nav>.login{margin-left:0!important}

/* ---------- [4] burger shown (≤1100px, or the bar collapsed by nav-look): «Войти» + theme + burger sit together on the right, as on every other
   page. Before: on /download the free space was split between .login and the burger (both margin-left:auto, «Войти» floated mid-header);
   on /download/thanks site2 hides .tx-nav>.sp, so «Войти» stuck to the logo and the burger stood alone at the edge. ---------- */
@media (max-width:1100px){
  html body>.page>header>nav>.login,html body.tx header.tx-header .tx-nav>.tx-login:not([data-nlx-lang]){margin-left:auto!important}
  html body>.page>header>nav>.nlx-burger,html body.tx header.tx-header .tx-nav>.nlx-burger{margin-left:0!important}
}
html body>.page>header>nav.nlx-collapse>.login,html body.tx header.tx-header .tx-nav.nlx-collapse>.tx-login:not([data-nlx-lang]){margin-left:auto!important}
html body>.page>header>nav.nlx-collapse>.nlx-burger,html body.tx header.tx-header .tx-nav.nlx-collapse>.nlx-burger{margin-left:0!important}

/* ---------- [3] dark theme: the family still used the old graphite tokens (header band rgba(11,11,15,.88), cards #15171D, chips #1B1E26,
   html #0B0B0F) on the navy page. Map them to the site («Острова») palette; light keeps its own values. ---------- */
html[data-theme="dark"]:has(>body.tx),html[data-theme="dark"]:has(>body>.page>main>#rows){
  --dl-bg:var(--s2-bg);--dl-card:var(--s2-card);--dl-card2:var(--s2-soft);--dl-ink:var(--s2-text);--dl-ink2:var(--s2-text2);--dl-mute:var(--s2-mute);
  --dl-line:rgba(150,172,240,.12);--dl-line2:rgba(150,172,240,.22);--dl-code:#060A16}
html:has(>body.tx),html:has(>body>.page>main>#rows){background-color:var(--s2-bg)!important}
html[data-theme="dark"] body>.page>main .icon{background:#1A2546}
html[data-theme="dark"] body>.page>main .row.mine .icon{background:var(--dl-acc)}
html[data-theme="dark"] body>.page>main .tab.on{background:var(--s2-soft)}
html[data-theme="dark"] body>.page>.seo{--s-card:var(--s2-card);--s-line:var(--s2-line);--s-ink:var(--s2-text);--s-ink2:var(--s2-text2);--s-mute:var(--s2-mute)}

/* ---------- [5] hero text sits on the lightest part of the sky (#90B8FE…#A9CBFF): the white lead and the 12px «ВЕРСИЯ …» line read at ~2:1.
   Light theme: a deeper blue pooled under the text column (bottom-left; the island side keeps its light sky) → ~4:1 behind the lead,
   plus full-opacity white with a soft navy shadow. Dark theme already has white on #183273…#3159B4 (≥6:1) and only gets the opacity fix. ---------- */
html:not([data-theme="dark"]) body>.page>main>.hero,html:not([data-theme="dark"]) body.tx .tx-hero{
  background:radial-gradient(78% 70% at 24% 100%,rgba(24,60,186,.7) 0%,rgba(24,60,186,.4) 45%,rgba(24,60,186,0) 100%),
    radial-gradient(70% 60% at 78% 8%,var(--s2-glow) 0%,rgba(255,255,255,0) 62%),var(--s2-sky)!important}
html body>.page>main>.hero :is(p,.ver,.ver-new),html body.tx .tx-hero>div:first-child :is(.lead,.tx-pill){
  color:#fff!important;text-shadow:0 1px 2px rgba(8,26,82,.45)}
html body>.page>main>.hero .ver{opacity:1!important}

/* ---------- [1] /download/thanks Linux commands on phones: the absolute «Копировать» button covered the first line of the command
   (pre is scrollable, its padding-right only counts at the end of the scroll). Give the button its own strip above the code. ---------- */
@media (max-width:700px){
  html body.tx .tx-code pre{padding-top:46px!important;padding-right:16px!important}
}

/* ---------- [2] /download/thanks on phones ≤370px: the send card ran 20px past the hero's padding. Root cause: the e-mail input's intrinsic
   width (size=20 → 262px with padding) set the min-content of the card's grid and of the hero's 1fr column. The input keeps its flex size
   (flex-basis 200px, grows) but no longer forces a minimum; the hero column may shrink; the «Скопировать / QR-код» pair wraps to two rows
   when it does not fit instead of overflowing (same card on /download for phones at ≤340px). ---------- */
html body:is(.tx,:has(>.page>main>#rows)) .dls .dls-mail input[type="email"]{width:0}
@media (max-width:900px){html body.tx .tx-hero{grid-template-columns:minmax(0,1fr)!important}}
html body:is(.tx,:has(>.page>main>#rows)) .dls .dls-row{display:flex!important;flex-wrap:wrap;gap:8px}
html body:is(.tx,:has(>.page>main>#rows)) .dls .dls-row>.dls-btn{flex:1 1 auto;width:auto;min-width:0;white-space:nowrap}

/* ---------- [6] support circle (fixed, right/bottom 25px, 52px, below 1680px) sat on the footer's last link at the end of the page,
   where it can never be scrolled away. Room under the footer's bottom row. ---------- */
@media (max-width:1679px){
  html body:is(.tx,:has(>.page>main>#rows))>.o-foot .o-foot-bot{padding-bottom:96px}
}

/* ---------- [7] /download SEO block was a shrink-to-fit flex child (277–1089 at 1366 against the 83–1283 page column) with a 146px gap above. ---------- */
html body>.page>.seo{width:100%;max-width:1248px;padding-top:12px}
html body>.page>.seo .seo-feats{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
html body>.page>main{padding-bottom:56px}
@media (max-width:600px){html body>.page>.seo{padding-top:8px}}

/* ---------- [8] /download/thanks content column (1100) was narrower than its header (1248): logo and theme button stuck out ~74px. ---------- */
html body.tx .tx-main{max-width:1248px}

/* ---------- [9] (markup patch in download.md wraps each shortcut, brackets included, in <span class="tx-keys">) keep «(Ctrl + J)» on one line. ---------- */
html body.tx .tx-step .tx-keys{white-space:nowrap}

/* ---------- [10] file card: «NLauncher-latest.AppIm/age» (break-all). Break at the hyphen/dot instead; meta lines avoid a one-word last line. ---------- */
html body.tx #tx-file .tx-file-name{word-break:normal!important;overflow-wrap:anywhere}
html body.tx #tx-file .tx-file-meta{text-wrap:pretty}
html body.tx #tx-file .tx-file-meta .tx-seg{white-space:nowrap}  /* used once dl-thanks.v4.js wraps each «·» segment (download.md) */

/* ---------- [11] /download: the white «Установка» card stretched to the tall navy macOS card (≈220px of empty white for Windows visitors);
   the «Путь» chips let the last arrow start a line alone («→ Всё равно открыть»). Each arrow is now drawn after the chip before it
   (the separate arrow items are hidden), so a line can end with «… →» but never start with «→». ---------- */
html body>.page>main>.cards{align-items:flex-start}
html body>.page>main>.cards>.dark .path>span:not(.chip){display:none}
html body>.page>main>.cards>.dark .path>.chip:has(+span:not(.chip)){position:relative;margin-right:22px}
html body>.page>main>.cards>.dark .path>.chip:has(+span:not(.chip))::after{content:"→";position:absolute;left:100%;top:50%;margin-left:8px;
  transform:translateY(-50%);color:#C9CDD6;font-weight:400;pointer-events:none}

/* ---------- [12] /download on tablets (≈561–889px, where the row wraps: icon 56 + info 180 + chips 280 + button 220 + gaps no longer fit): «Скачать» fell under the OS name with the bottom-right of the row
   empty. It now spans the whole second line of the row. (≤560 already had width:100%.) ---------- */
@media (max-width:889px){html body>.page>main .rows .row>.dl{flex:1 1 100%!important}}

/* ---------- [13] step mockups: amber rings and badges (#FFB020) are off-palette. Site blue with a white halo, so the ring still reads on the
   blue SmartScreen window. ---------- */
html body.tx .mock-hl{outline-color:#2E6CF6!important;box-shadow:0 0 0 3px rgba(255,255,255,.92)}
html body.tx .mock-hl[data-n]::after{background:#2E6CF6!important;color:#fff!important;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25)!important}

/* ---------- [14] (needs the inline script to emit <code>; ready for it) Linux commands in the «Установка» card. ---------- */
html body>.page>main #steps .step .t code{font:600 13px/1.5 'JetBrains Mono',ui-monospace,monospace;background:var(--dl-card2);border:1px solid var(--dl-line2);
  border-radius:6px;padding:1px 6px;white-space:nowrap;color:var(--dl-ink)}

/* ---------- [15] OS rows: the Apple glyph rendered 16×19 against the 24×24 Windows glyph; on /en/download «Download .AppImage» (212px)
   pushed the Linux chips/button off the column of the rows above; the selected row's 2px border shifted its content 1px. ---------- */
html body>.page>main .row .icon svg:has(>path[d^="M16.1 12.8"]){width:32px;height:32px}
@media (min-width:561px){html body>.page>main .rows .row>.dl{min-width:220px}}
html body>.page>main .rows .row.mine{border-width:1px!important;box-shadow:0 0 0 1px var(--dl-acc),0 30px 60px -44px rgba(46,108,246,.9)!important}
html[data-theme="dark"] body>.page>main .rows .row.mine{box-shadow:0 0 0 1px var(--dl-acc),0 30px 60px -44px rgba(46,108,246,.6)!important}

/* ---------- [16] «СКОРО» inside disabled chips: 9.5px grey at the chip's opacity .55 (<2:1). The chip stays dimmed through its colours. ---------- */
html body>.page>main .build[disabled]{opacity:1!important;background:transparent!important;border-style:dashed!important}
html body>.page>main .build[disabled] :is(b,i){color:var(--dl-mute)!important}
html body>.page>main .build[disabled] .soon{font-size:10.5px!important;color:var(--dl-ink2)!important;background:color-mix(in srgb,var(--dl-ink) 7%,transparent)!important}

/* ---------- [17] /download/thanks hero had no island (every other «Острова» hero has one). A small real-world island perched on the top-right
   corner of the file card: anchored to the card, so it never collides with it whatever the hero height (59–107px above the card at
   901–1920px, all OS variants); only while the file card is shown and the hero has two columns. ---------- */
@media (min-width:901px){
  html body.tx .tx-hero>#tx-side:has(>.tx-file:not([hidden])){position:relative}
  html body.tx .tx-hero>#tx-side:has(>.tx-file:not([hidden]))::before{content:"";position:absolute;right:26px;bottom:100%;margin-bottom:-9px;width:60px;
    aspect-ratio:260/266;background:url(/assets/home2/isl-petals.v1.webp) center/contain no-repeat;filter:drop-shadow(0 10px 10px rgba(8,22,64,.28));
    pointer-events:none}
}

/* ---------- [19a] hero h1: the line could break before the em dash («Скачать лаунчер Minecraft / — выбери систему.» at 768 and 360;
   «Осталось установить / — пара минут» on /download/thanks at 1100–1920). The accent phrase (<span>) always starts its own line,
   as it already did on /download at desktop widths, so the dash stays at the end of the line before it. Covers the h1 variants that
   dl-thanks.js writes («Установка — на компьютере», «Как установить NLauncher») and EN. ---------- */
html body>.page>main>.hero h1>span,html body.tx .tx-hero h1>span{display:block}

/* ---------- [19] phones: footer gutter 12px against the page's 16px; bottom links wrapped one word per line («Поддержка» alone).
   1024: the four social pills left «YouTube» alone on a second row. ---------- */
@media (max-width:640px){
  html body:is(.tx,:has(>.page>main>#rows))>.o-foot{padding-left:16px!important;padding-right:16px!important}
  html body:is(.tx,:has(>.page>main>#rows))>.o-foot .o-foot-bot span:last-child{gap:8px 16px}
}
@media (max-width:440px){
  html body:is(.tx,:has(>.page>main>#rows))>.o-foot .o-foot-bot span:last-child{display:grid;grid-template-columns:auto auto;justify-content:start;gap:10px 28px}
}
@media (min-width:641px) and (max-width:1100px){
  html body:is(.tx,:has(>.page>main>#rows))>.o-foot .o-soc{gap:6px}
  html body:is(.tx,:has(>.page>main>#rows))>.o-foot .o-soc a{padding:8px 10px}
}

/* ---------- extra (found by the re-check, same family): links below 4.5:1 in light theme — the SEO accent #2E6CF6 on the page (3.9:1:
   «УСТАНОВКА», the link chips) and the «Не получается?» links on the soft card (4.3:1). Site link blue #1E56D4 instead. ---------- */
html:not([data-theme="dark"]) body>.page>.seo{--s-acc:var(--s2-acc-text)}
html:not([data-theme="dark"]) body.tx .tx-help a{color:var(--s2-acc-text)!important}


/* ======================== v6: content (аудит 13.10, /root/agent-work/site5/fix/content.css) ======================== */
/* ===== content pages — /news/, /news/<slug> (+ /en/news/<slug>), /changelog, /help, /docs/, /docs, /about — display fixes
   (site5 audit, family «content», 2026-10-13). Appended to site2.vN.css (loaded last on every page except home).
   Page scopes (each marker exists only on its page family):
     /news/ index     body:has(#nx-list)          articles   body:has(header.na-head)
     /changelog       body:has(.cl-hero)          /help      body:has(.hp-hero)
     /docs/ (archive) body:has(.dx-grid)          /docs      body:has(#docs-article)
     /about           body:has(button.abtab)
   Numbers in brackets = index in findings-content.json. ===== */

/* ---------- [15] palette. Dark: the pages kept the old graphite tokens (#14151C cards, #0B0B0F, white-alpha lines) on the
   navy site background — map them to the site tokens. Light: near-black/grey text tokens → site text tokens
   (also [20]: #8A909C secondary text was 2.8:1 on the light page; --s2-mute is ~5:1). ---------- */
html body:has(#nx-list,header.na-head,.cl-hero){--ink:var(--s2-text);--ink2:var(--s2-text2);--mute:var(--s2-mute)}
html[data-theme="dark"] body:has(#nx-list,header.na-head,.cl-hero){
  --bg:var(--s2-bg);--card:var(--s2-card);--card2:var(--s2-soft);--line:var(--s2-line);--line2:#2E3B60;
  --panel:#0E1A3D;--panel-line:rgba(160,180,255,.14);--shadow:0 18px 44px -26px rgba(0,0,0,.75)}
/* cab/legacy token pages (help, docs, about) */
html body:has(.hp-hero,.dx-grid,#docs-article,button.abtab){--ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--lg-mut2:var(--s2-mute)}
html[data-theme="dark"] body:has(.hp-hero,.dx-grid,#docs-article,button.abtab){
  --bg:var(--s2-bg);--panel:var(--s2-card);--panel2:var(--s2-soft);--panel3:var(--s2-soft);--bd:var(--s2-line);--bd2:#2E3B60;
  --lg-bg2:var(--s2-bg);--lg-panel-hi:var(--s2-soft)}
/* /docs/ derives its --c-* tokens on :root, so they must be re-derived where the page tokens were changed */
html body:has(.dx-grid){--c-bg:var(--bg);--c-bg-2:var(--lg-bg2);--c-panel:var(--panel);--c-panel-solid:var(--panel);--c-panel-hi:var(--panel2);
  --c-ink:var(--ink);--c-ink-dim:var(--ink2);--c-mute:var(--mut);--c-mute-2:var(--lg-mut2);--c-border:var(--bd);--c-border-hi:var(--bd2)}
/* graphite leftovers in the changelog dark rules */
html[data-theme="dark"] body:has(.cl-hero) .cl-filter button[aria-pressed="true"]{background:#2E3B60}
html[data-theme="dark"] body:has(.cl-hero) .cl-filter button[aria-pressed="true"] b{color:var(--s2-text2)}
html[data-theme="dark"] body:has(.cl-hero) :is(.cl-strip a,.cl-emo,.cl-e.major .cl-strip a,.cl-e.major .cl-emo){
  background:radial-gradient(80% 62% at 50% 40%,rgba(160,180,255,.13),rgba(160,180,255,0) 72%),var(--s2-soft)}

/* ---------- [19] news/changelog: <html> kept the old page colour (#F6F7F9 / #0B0B0F) while site2 recolours only <body> —
   overscroll and the area below short pages showed a different strip ---------- */
html:has(#nx-list,header.na-head,.cl-hero){background-color:var(--s2-bg)!important}

/* ==================== /news/ index ==================== */

/* ---------- [0][14] featured card + last row.
   861–1279px: in the row layout the cover stretched to the text column and object-fit cut its baked-in title and logo.
   ≥861px: after the full-width featured card an odd number of cards left the last one alone in its row.
   Even card count: below 1280 the featured card becomes a regular card (2 per row, no stretch, no widow);
   from 1280 the last card takes the full row like the featured one. Odd count: below 1280 the featured card keeps the row,
   stacked (cover on top at its own 16:10). The covers never stretch: they are centred instead. ---------- */
@media (min-width:861px) and (max-width:1279.98px){
  html body .nx-list > .nx-card.big{flex-direction:column}
  html body .nx-list > .nx-card.big > img{width:100%;border-right:0;border-bottom:1px solid var(--line)}
  html body .nx-list > .nx-card.big .nx-tx{padding:20px 22px 24px;justify-content:flex-start}
  html body .nx-list:has(> .nx-card:last-child:nth-child(even)) > .nx-card.big{grid-column:auto}
  html body .nx-list:has(> .nx-card:last-child:nth-child(even)) > .nx-card.big h2{font-size:22px}
}
@media (min-width:1280px){
  html body .nx-list > .nx-card.big > img{align-self:center}
  html body .nx-list > .nx-card:not(.big):last-child:nth-child(even){grid-column:1/-1;flex-direction:row;align-items:center}
  html body .nx-list > .nx-card:not(.big):last-child:nth-child(even) > img{width:56%;flex:none;border-bottom:0;border-right:1px solid var(--line)}
  html body .nx-list > .nx-card:not(.big):last-child:nth-child(even) .nx-tx{padding:28px 32px}
}

/* ---------- [23] /news/ hero: the first action is the primary (white) button like every other hero; sans kicker without the
   underlined link (as on /about); the RSS glass button reads on the light bottom of the sky on phones ---------- */
html body .nx-head .na-cta > .btn.sec:first-child{background:#fff!important;color:#1A3EA6!important;border:0!important;box-shadow:0 4px 0 rgba(8,22,64,.3)!important}
html body .nx-head .na-eyebrow{font:800 12px/1 Onest,system-ui,sans-serif;letter-spacing:.14em}
html body .nx-head .na-eyebrow a{text-decoration:none!important}
html body .nx-head .na-eyebrow a:hover{text-decoration:underline!important}
html body .nx-head .na-cta > .btn.sec:not(:first-child){background:rgba(10,30,90,.34)!important}

/* ==================== /news/<slug> articles (RU + EN) ==================== */

/* ---------- [23] article head: the same sky tile as every other page head (was a plain H1 on grey with a 12px mono grey eyebrow) ---------- */
html body header.na-head{position:relative;isolation:isolate;overflow:hidden;width:calc(100% - 88px);max-width:1192px;margin:6px auto 0;
  padding:44px 40px 40px;box-sizing:border-box;border-radius:30px;color:#fff;
  background:radial-gradient(70% 60% at 78% 8%,var(--s2-glow) 0%,rgba(255,255,255,0) 62%),var(--s2-sky);box-shadow:var(--s2-tile-sh);
  background-size:100% 100%,100% 145%;background-position:0 0;background-repeat:no-repeat}  /* taller than other heroes: stop the sky before its palest end, so the lede and chips keep the hero contrast */
html body header.na-head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--s2-pix);background-size:64px 64px;image-rendering:pixelated;opacity:.6}
html body header.na-head h1{color:#fff;text-shadow:0 4px 0 rgba(8,22,64,.22)}
html body header.na-head .na-lede{color:rgba(255,255,255,.92)}
html body header.na-head .na-lede a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.6);text-underline-offset:3px}
html body header.na-head .na-eyebrow{font:800 12px/1 Onest,system-ui,sans-serif;letter-spacing:.14em;color:rgba(255,255,255,.88)}
html body header.na-head .na-eyebrow a{color:#fff}
html body header.na-head .na-eyebrow a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
html body header.na-head .na-meta li{background:rgba(10,30,90,.3);border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.94)}
html body header.na-head .na-meta :is(b,svg){color:#fff}
html body header.na-head .na-cta .btn.pri{background:#fff;color:#1A3EA6;border:0;box-shadow:0 4px 0 rgba(8,22,64,.3)}
html body header.na-head .na-cta .btn.pri:hover{background:#fff;color:#1A3EA6}
html body header.na-head .na-cta .btn.sec{background:rgba(10,30,90,.3);color:#fff;border:1px solid rgba(255,255,255,.4)}
html body header.na-head .na-cta .btn.sec:hover{border-color:#fff;color:#fff}
html body header.na-head .na-cta .btn{border-radius:15px}
html body header.na-head :focus-visible{outline-color:#fff}
@media (max-width:1240px){html body header.na-head{width:calc(100% - 48px)}}
@media (max-width:860px){html body header.na-head{padding:30px 22px}}
@media (max-width:640px){html body header.na-head{width:calc(100% - 24px);border-radius:26px}}

/* ---------- [9] «Как обновиться» / «Как включить»: near-black #0B1220 panel → the navy tile of the site (home, PLUS) ---------- */
html body .na-final{background:radial-gradient(60% 60% at 80% 0%,rgba(130,160,255,.22) 0%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#0E1A3D 0%,#22386E 100%);
  border:0;box-shadow:var(--s2-tile-sh);isolation:isolate}
html body .na-final::before{inset:0;height:auto;z-index:-1;background:var(--s2-pix);background-size:64px 64px;image-rendering:pixelated;opacity:.3}
html body .na-final > *{position:relative}
html body .na-final p{color:rgba(255,255,255,.82)}
html body .na-final .na-sys{color:rgba(255,255,255,.66)}

/* ---------- [11] the tile grid under the intro note: `.na-text ul{margin:0 0 18px;max-width:70ch}` beat `.na-tiles{margin:0 0 48px}` —
   the first H2 was glued to the tiles (18px) and the grid stopped 130px short of the figures' edge ---------- */
html body .na-text ul.na-tiles{margin:0 0 48px;max-width:none}
@media (max-width:760px){html body .na-text ul.na-tiles{margin-bottom:36px}}

/* ---------- [18] four tiles in the 3-column grid left one alone on the second row («Скоро» / «Coming soon») — 2×2 ---------- */
@media (min-width:1061px){html body .na-text ul.na-tiles:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- [13] interim until driver.v2.webp is re-captured: the screenshot's lower card row is cut and overprinted by the
   wizard hint — show it down to the first card row (the full image still opens on click) ---------- */
html body .na-fig img[src*="/2026-10-09-autumn/driver.v1.webp"]{aspect-ratio:1240/654;object-fit:cover;object-position:50% 0}

/* ==================== /changelog ==================== */

/* ---------- [3] «Последние версии» sat straight on the blue hero in the old page colours: near-black heading and versions,
   grey #767C88 dates on the sky (~1.3:1; even white text only reaches ~2:1 on the light bottom of the sky).
   Give the list the same card surface as «Последняя версия» next to it — light card, dark text (navy card in dark). ---------- */
html body .cl-hero .cl-recent-box{background:var(--card);border-radius:24px;padding:18px 22px 10px;box-shadow:var(--shadow);color:var(--ink)}
html body .cl-hero .cl-recent ol{border-top:0}
html body .cl-hero .cl-recent li:last-child{border-bottom:0}
html body .cl-hero .cl-rss{margin-top:6px}
@media (max-width:900px){html body .cl-hero .cl-recent-box{max-width:680px}}
@media (max-width:760px){html body .cl-hero .cl-recent-box{border-radius:20px;padding:16px 16px 8px}}

/* ---------- [1] news cards in the timeline: the cover is pulled up by -4% (meant for the side-by-side layout) and covered
   «Подробнее» once the card stacks (≤1100px) ---------- */
@media (max-width:1100px){
  html body .cl-e.major.has-shot .cl-shot{margin-top:18px}
  html body .cl-e.major.has-shot .cl-shot img{margin:0;border-radius:14px;border:1px solid var(--line)}
}

/* ---------- [17] 96px title broke as «Что нового / в / NLauncher» (1024–1280) or «Что / нового в / NLauncher» (≥1366) ---------- */
html body .cl-hero h1{font-size:clamp(44px,5.4vw,74px)}

/* ==================== /help ==================== */

/* ---------- [7] body.nc is a flex column, so the footer with margin:auto shrank to its content (1137px, «YouTube» on a 2nd row).
   Same on the other body.nc pages with this footer (404, reset, verify-email, email-confirm). ---------- */
html body.nc > footer.o-foot{width:100%}

/* ---------- [22] /help and /about: the same 1192px column and 6px gap under the header as /news/ and /changelog
   (were 1132px at x=117, and 26–40px lower) ---------- */
html body main.ns-wrap:has(> .hp-hero){max-width:1240px;padding-top:6px}
html body > section:has(button.abtab){max-width:1240px!important;padding-top:6px!important}
/* /docs (help articles, no hero tile): the same column */
html body > section:has(#docs-article){max-width:1240px!important}

/* ==================== /about ==================== */

/* ---------- [2][12] document tabs: the mobile override `1fr` could not shrink below the nowrap titles (page 376px wide at 360);
   from 901px the 268px column cut «Политика конфиденциаль…» / «Пользовательское соглаш…». Wider column, titles may wrap. ---------- */
html body div:has(> nav > button.abtab){grid-template-columns:minmax(0,300px) minmax(0,1fr)!important}
@media (max-width:900px){html body div:has(> nav > button.abtab){grid-template-columns:minmax(0,1fr)!important}}
html body button.abtab > span:last-child > span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}

/* ==================== /docs/ (archive) ==================== */

/* ---------- [5] the layout was full-bleed (left rail at x=0, right rail at the screen edge, 700px dead band at 1920) —
   put it in the site column ---------- */
@media (min-width:1101px){
  html body .dx-grid{max-width:1240px;margin:0 auto;padding:0 24px;box-sizing:border-box;grid-template-columns:230px minmax(0,1fr) 220px}
  html body .dx-grid > .dx-left{padding-left:0}
  html body .dx-grid > .dx-main{padding-left:44px;padding-right:44px}
  html body .dx-grid > .dx-right{padding-right:0}
}
@media (min-width:901px){html body .dx-top{padding:14px max(24px,calc((100% - 1192px)/2))!important}}

/* ---------- [4] ≤1100px both rails were hidden and nothing replaced them — show the section list after the article ---------- */
@media (max-width:1100px){
  html body .dx-grid > .dx-left{display:block;order:2;border-right:0;border-top:1px solid var(--c-border);padding:26px 20px 8px;overflow:visible;
    column-width:160px;column-gap:28px}
  html body .dx-grid > .dx-left > .eyebrow{column-span:all}
  html body .dx-grid > .dx-left > .dx-section{break-inside:avoid}
}

/* ---------- [6] «Важно» callout: a dark-theme gradient (→ rgba(15,25,42,.4)) left a grey smear on the light page; black icon on blue ---------- */
html:not([data-theme="dark"]) body .dx-callout{background:linear-gradient(135deg,rgba(46,108,246,.10),rgba(46,108,246,.03)),var(--s2-card)!important;border-color:rgba(46,108,246,.25)!important}
html body .dx-callout .ico{color:#fff}

/* ---------- [16] archive leftovers: mono breadcrumb and meta line → the site sans ---------- */
html body .dx-main :is(.dx-crumb,.dx-meta){font-family:Onest,system-ui,sans-serif}

/* ---------- [21] at ≤400px the search placeholder wrapped and the pill grew to 52px ---------- */
html body .dx-search .ph{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------- [20] (same pages) brand blue #2E6CF6 used as small text on the light page is ~3.9:1 — the site's text blue ---------- */
html:not([data-theme="dark"]) body:has(.dx-grid) :is(.dx-left .eyebrow,.dx-section a.active,.dx-main p a,.dx-main li a,.dx-nav .next .arrow,.dx-right a.toc.active){color:var(--s2-acc-text)}

/* ---------- [10] prepared for news.v3.js (see content.md): the cover video gets a centred play button instead of the native
   control bar over the poster. Matches nothing until the script adds button.na-play. The button sits at the centre of the
   16:9 video (100cqw × 9/16 / 2), not of the figure with its caption. ---------- */
html body .na-video:has(> .na-play){position:relative;container-type:inline-size}
html body .na-video > .na-play{position:absolute;left:50%;top:calc(100cqw * 9 / 32);transform:translate(-50%,-50%);z-index:2;width:84px;height:84px;border-radius:50%;
  border:0;padding:0 0 0 5px;display:grid;place-items:center;cursor:pointer;background:#fff;color:#2E6CF6;box-shadow:0 6px 0 rgba(8,22,64,.25),0 18px 40px rgba(8,22,64,.35)}
html body .na-video > .na-play:hover{transform:translate(-50%,-50%) scale(1.06);color:#1E4FC4}
html body .na-video > .na-play:focus-visible{outline:3px solid #fff;outline-offset:4px}
html body .na-video video:not([controls]){cursor:pointer}
@media (max-width:760px){html body .na-video > .na-play{width:64px;height:64px}html body .na-video > .na-play svg{width:24px;height:24px}}

/* ======================== v7: hosting-mods (аудит 13.10, /root/agent-work/site5/fix/hosting-mods.css) ======================== */
/* ===== /hosting, /en/hosting, /mods, /en/mods — display fixes (site5 audit, family «hosting-mods», 2026-10-13).
   Numbers in brackets = index in findings-hosting-mods.json. Meant to be appended to the site-wide site2.vN.css (loaded last).
   Scope: only these four pages load hostx.v1.css / modsx.v1.css. They are recognised by the hero section, a direct child of <main>:
     /hosting  html body:has(> main > section.x-hero)
     /mods     html body:has(> main > section.m-hero)
   No other page has main > .x-hero or main > .m-hero, so nothing here can match elsewhere. ===== */

/* ---------- [1] /mods «Лаунчер сделает сам»: the sticky stage cut three of the four screenshots (FPS window, CurseForge import, «Поделиться
   сборкой»). The figure is a grid with an auto row, so img{max-height:100%} had nothing to resolve against. Give the grid one row and one
   column that shrink to the figure box, then cap the image to it. ---------- */
html body:has(> main > section.m-hero) .m-stage-in figure{grid-template:minmax(0,1fr) / minmax(0,1fr)}
html body:has(> main > section.m-hero) .m-stage-in figure img{width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0}

/* ---------- [2] /hosting hero: the fact sub-labels and the screenshot caption kept the grey --mute of the old landing (#6B7280) on the blue
   sky (1.6–2.8:1), and the facts row sits on the lightest part of the gradient, where even the white values were ~1.8:1. The facts go on
   a navy glass panel (the hero's own «стекло»), all white text: values ≥5.4:1, sub-labels ≥4.6:1 at every width. The caption becomes a
   small glass pill with white text. ---------- */
html body:has(> main > section.x-hero) .x-hero .x-facts{
  margin-top:30px;padding:16px 20px;border:1px solid rgba(255,255,255,.2);border-radius:18px;
  background:rgba(10,24,72,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html body:has(> main > section.x-hero) .x-hero .x-facts b{color:#fff;line-height:1.25}
html body:has(> main > section.x-hero) .x-hero .x-facts span{color:rgba(255,255,255,.9)}
html body:has(> main > section.x-hero) .x-hero .x-stage>figcaption{
  display:table;margin-left:auto;padding:5px 12px;border-radius:12px;background:rgba(10,24,72,.55);color:rgba(255,255,255,.92);
  font-size:12.5px;line-height:1.35;text-align:left}
@media (max-width:560px){html body:has(> main > section.x-hero) .x-hero .x-facts{padding:14px;gap:14px 12px}html body:has(> main > section.x-hero) .x-hero .x-facts b{font-size:19px}}

/* ---------- [3] /hosting hero on phones: the render behind the screenshot ended 34px above the bottom of the figure, i.e. *inside* the
   two-line caption, so «Скриншот лаунчера…» started on the picture. The background now ends at a fixed 32px under the screenshot (grid
   line 2) and the caption follows 14px lower, however many lines it wraps to. Same look on desktop (render 32px below the shot, caption
   right-aligned under it). ---------- */
html body:has(> main > section.x-hero) .x-hero .x-stage{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
html body:has(> main > section.x-hero) .x-hero .x-stage>.x-stage-bg{inset:0;grid-row:auto / 2;grid-column:auto / auto}
html body:has(> main > section.x-hero) .x-hero .x-stage>.x-shot{margin-bottom:32px}
html body:has(> main > section.x-hero) .x-hero .x-stage>figcaption{margin-top:14px}
@media (max-width:560px){html body:has(> main > section.x-hero) .x-hero .x-stage>figcaption{margin-left:0}}

/* ---------- [4] /mods hero search on phones: both selects cut their value mid-word («Любой загрузч…», «Любая верси») and the placeholder
   ended in «…Create, J». Up to 440px the selects get a compact font/padding (RU «Любой загрузчик» fits from 380px); below 380px they take
   a full row each. The placeholder alone gets a smaller font (the input keeps 16px, so iOS does not zoom on focus) and ends with «…»
   if it still does not fit (and no longer loses 20px to the invisible clear button). ---------- */
html body:has(> main > section.m-hero) .m-hero #mods-q{text-overflow:ellipsis}
/* the hidden «×» of an empty type=search input still reserved ~20px of the line */
html body:has(> main > section.m-hero) .m-hero #mods-q:placeholder-shown::-webkit-search-cancel-button{display:none}
@media (max-width:440px){
  html body:has(> main > section.m-hero) .m-hero .m-sel select{font-size:13px;padding:0 24px 0 10px;background-position:right 8px center;background-size:12px}
  html body:has(> main > section.m-hero) .m-hero #mods-q::placeholder{font-size:14px}
}
@media (max-width:379px){
  html body:has(> main > section.m-hero) .m-hero .m-sel{flex:1 1 100%}
  html body:has(> main > section.m-hero) .m-hero .m-sel select{font-size:14px;padding:0 32px 0 12px;background-position:right 10px center;background-size:14px}
  html body:has(> main > section.m-hero) .m-hero #mods-q::placeholder{font-size:13px}
}

/* ---------- [5] segmented controls on phones wrapped with one option alone on the second row (/mods «Ресурспаки», /hosting «Большая сборка»,
   «12 мес −20%», catalog sources 4+1). They now break into even rows that fill the width: the 4-option controls into 2×2, the 5 sources
   into 3+2 (flex-basis 28%: never 4 in a row, the last two share the second row). Applied only below the widths where they used to wrap. ---------- */
@media (max-width:440px){
  html body:has(> main > section.m-hero) .m-bar #m-type.l-seg{display:flex;width:100%}
  html body:has(> main > section.m-hero) .m-bar #m-type.l-seg>button{flex:1 1 40%;justify-content:center}
  html body:has(> main > section.x-hero) #t-months.l-seg{display:flex;width:100%}
  html body:has(> main > section.x-hero) #t-months.l-seg>button{flex:1 1 40%;justify-content:center}
}
@media (max-width:480px){
  html body:has(> main > section.x-hero) #fit-k.l-seg{display:flex;width:100%}
  html body:has(> main > section.x-hero) #fit-k.l-seg>button{flex:1 1 40%;justify-content:center}
}
@media (max-width:600px){
  html body:has(> main > section.x-hero) #find-src.l-seg{display:flex;width:100%}
  html body:has(> main > section.x-hero) #find-src.l-seg>button{flex:1 1 28%;justify-content:center;padding-left:6px;padding-right:6px}
}

/* ---------- [6] /hosting «Друзья заходят с теми же модами»: card 1 (heading + 3 mods + «и ещё 39 модов», 199px) did not fit the fixed 196px box
   (160px inside the padding): the heading sat on the top border, the dashed pill was cut by the bottom one. The three boxes now share a
   240px minimum and may grow instead of clipping. ---------- */
@media (min-width:861px){
  html body:has(> main > section.x-hero) #play .x-flow-art{height:auto;min-height:240px}
}

/* ---------- [7] /mods «Готовые сборки»: a pack without a Modrinth gallery (today Zombie Invade 100 Days) got a flat near-black cover
   (--pc:#211e17) that read as a broken image. modsx.v1.js writes background-image inline only when there is a picture, so a cover without
   one becomes a sky tile with the pixel layer and an in-game island render, like the other «Острова» tiles. ---------- */
html body:has(> main > section.m-hero) #m-packs .m-pack-img:not([style*="background-image"]){
  background:url(/assets/home2/isl-grass.v1.webp) right 24% center / auto 76% no-repeat,
    radial-gradient(70% 60% at 78% 8%,var(--s2-glow) 0%,rgba(255,255,255,0) 62%),var(--s2-sky)}
html body:has(> main > section.m-hero) #m-packs .m-pack-img:not([style*="background-image"])::before{
  content:"";position:absolute;inset:0;pointer-events:none;background:var(--s2-pix);background-size:64px 64px;image-rendering:pixelated;opacity:.55}

/* ---------- [8] old near-black blocks. The final CTA tiles («Твой мир ждёт свой сервер», «Найдено — теперь поставь в один клик») laid
   rgba(8,12,22,.86→.25) over the render: in the light theme a black band next to the sky heroes. They get the navy of the site tiles
   (#0E1A3D→#22386E), still dark enough on the left for the white text. On /hosting the light theme also used the terminal black #10141B for
   the file-check panel and the console: the terminal tokens become navy there (dark theme keeps its own). ---------- */
html body:has(> main > :is(section.x-hero,section.m-hero)) section.l-end::before{
  background:linear-gradient(90deg,rgba(14,26,61,.93) 0%,rgba(22,40,88,.76) 55%,rgba(34,56,110,.5) 100%)}
html[data-theme="dark"] body:has(> main > :is(section.x-hero,section.m-hero)) section.l-end::before{
  background:linear-gradient(90deg,rgba(10,17,44,.94) 0%,rgba(14,26,61,.76) 55%,rgba(22,40,88,.32) 100%)}
html body:has(> main > :is(section.x-hero,section.m-hero)) section.l-end{box-shadow:var(--s2-tile-sh)}
@media (max-width:760px){  /* stacked layout: the text runs the full width, so the overlay goes top→bottom instead of left→right */
  html body:has(> main > :is(section.x-hero,section.m-hero)) section.l-end::before{background:linear-gradient(180deg,rgba(14,26,61,.92) 0%,rgba(22,40,88,.8) 100%)}
  html[data-theme="dark"] body:has(> main > :is(section.x-hero,section.m-hero)) section.l-end::before{background:linear-gradient(180deg,rgba(10,17,44,.94) 0%,rgba(14,26,61,.8) 100%)}
}
html:not([data-theme="dark"]) body:has(> main > section.x-hero){--term:#0E1A3D;--term-2:#16264F;--term-mute:#9AA6C8}
html:not([data-theme="dark"]) body:has(> main > section.x-hero) #check .x-scan-d{background:linear-gradient(160deg,#0E1A3D 0%,#22386E 100%)}
/* the console lines inherited «.x-b p{color:var(--ink-2)}» — dark grey #454B57 on the terminal in the light theme (2.1:1); light text instead */
html:not([data-theme="dark"]) body:has(> main > section.x-hero) #panel .x-term .x-term-log p{color:#C3CBE5}

/* ---------- [9] /mods hero was still the old white card with a warm orange/pink voxel poster (scene-1280.v1.webp), while /hosting and the
   other pages open with the blue sky tile and in-game island renders. The band becomes the same sky tile (glow + pixel layer, white
   heading and lead, glass chips); the poster is hidden and the tile gets real island renders from the home page. The search box and the
   «Популярное на Modrinth» card stay light panels inside the tile (in the dark theme: navy cards instead of graphite).
   (The <img class="m-scene"> is still downloaded: drop it from the markup when this ships, see hosting-mods.md.) ---------- */
html body:has(> main > section.m-hero) .m-hero .m-band{
  border:0;border-radius:30px;box-shadow:var(--s2-tile-sh);
  background:radial-gradient(70% 60% at 78% 8%,var(--s2-glow) 0%,rgba(255,255,255,0) 62%),var(--s2-sky)}
html body:has(> main > section.m-hero) .m-hero .m-band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--s2-pix);background-size:64px 64px;image-rendering:pixelated;opacity:.6}
html body:has(> main > section.m-hero) .m-hero .m-band::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat;
  background-image:url(/assets/home2/isl-petals.v1.webp),url(/assets/home2/blk-grass.v1.webp);
  background-size:80px auto,56px auto;background-position:right 40px top 16px,right 44px bottom 26px}
html body:has(> main > section.m-hero) .m-hero .m-scene{display:none}
html body:has(> main > section.m-hero) .m-hero .m-kick{color:rgba(255,255,255,.88)}
html body:has(> main > section.m-hero) .m-hero .m-kick b{color:#fff}
html body:has(> main > section.m-hero) .m-hero h1{color:#fff;text-shadow:0 4px 0 rgba(8,22,64,.22)}
html body:has(> main > section.m-hero) .m-hero .m-lead{color:rgba(255,255,255,.92)}
html body:has(> main > section.m-hero) .m-hero .m-search{border-color:rgba(255,255,255,.5);box-shadow:0 18px 40px -24px rgba(8,22,64,.55)}
html body:has(> main > section.m-hero) .m-hero .m-pop>span{color:rgba(255,255,255,.88)}
html body:has(> main > section.m-hero) .m-hero .m-pop button{background:rgba(10,30,90,.22);border-color:rgba(255,255,255,.4);color:#fff}
html body:has(> main > section.m-hero) .m-hero .m-pop button:hover{background:rgba(10,30,90,.36);border-color:#fff;color:#fff}
html[data-theme="dark"] body:has(> main > section.m-hero) .m-hero .m-band{--bg:var(--s2-soft);--bg-2:var(--s2-soft);--surface:var(--s2-card);--surface-2:var(--s2-soft);--line:var(--s2-line);--line-2:#33406A}
html[data-theme="dark"] body:has(> main > section.m-hero) .m-hero .m-peek{background:rgba(18,26,48,.9)}
@media (max-width:1239px){
  html body:has(> main > section.m-hero) .m-hero .m-band::after{background-size:76px auto,52px auto;background-position:right 28px top 20px,right 32px bottom 18px}
}
@media (max-width:980px){
  html body:has(> main > section.m-hero) .m-hero .m-band::after{display:none}
}
@media (max-width:640px){html body:has(> main > section.m-hero) .m-hero .m-band{border-radius:26px}}

/* ---------- [15] /mods hero «Часто ищут:»: at 1280–1920 the last chip («Мини-карты») wrapped alone under the search (585px of chips in a
   600px column). Desktop chips get a slightly tighter padding/font so the RU row fits (EN already did); phones, where it broke into
   3+2+1, get a one-line swipe row that fades out at the edge. ---------- */
@media (min-width:981px){
  html body:has(> main > section.m-hero) .m-hero .m-pop{gap:6px}
  html body:has(> main > section.m-hero) .m-hero .m-pop button{padding:6px 10px;font-size:13px}
}
@media (max-width:640px){
  html body:has(> main > section.m-hero) .m-hero .m-pop{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-right:-16px;padding-right:16px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  html body:has(> main > section.m-hero) .m-hero .m-pop::-webkit-scrollbar{display:none}
  html body:has(> main > section.m-hero) .m-hero .m-pop>*{flex:none;white-space:nowrap}
}
/* [9]+[15] light theme: the chip row sits on the lightest part of the sky (#A9CBFF), where white text was ~1.8:1 — navy label, navy glass chips */
html:not([data-theme="dark"]) body:has(> main > section.m-hero) .m-hero .m-pop>span{color:#0E1A3D}
html:not([data-theme="dark"]) body:has(> main > section.m-hero) .m-hero .m-pop button{background:rgba(14,26,61,.58);border-color:transparent;color:#fff}
html:not([data-theme="dark"]) body:has(> main > section.m-hero) .m-hero .m-pop button:hover{background:rgba(14,26,61,.74);border-color:transparent}
/* [15] 981–1239px the text column was only 454–599px: the peek card column is capped at 330px, and up to 1100px the label takes its own line */
@media (min-width:981px) and (max-width:1239px){
  html body:has(> main > section.m-hero) .m-hero .m-band{grid-template-columns:minmax(0,1fr) minmax(0,330px)}
  html body:has(> main > section.m-hero) .m-hero .m-pop button{padding:6px 8px}
}
@media (min-width:981px) and (max-width:1100px){
  html body:has(> main > section.m-hero) .m-hero .m-pop>span{flex:1 1 100%}
}

/* ---------- [10] /hosting tariffs at tablet widths: the auto-fill grid (minmax 232px) has 2 columns at 561–767px and 3 at 768–1011px, so the
   7 «Стандарт» plans ended 2+2+2+1 / 3+3+1 and the 4 «Производительность» plans 3+1 — one plan alone under empty slots. A plan that
   ends up alone in the last row now spans the row and lays out sideways (name+RAM | specs | price | button; on 2 columns as a 2×2),
   whatever the line, term or location filter leaves. ≤560px keeps its swipe carousel, ≥1012px has 4 columns (4+3 / 4). ---------- */
@media (min-width:561px) and (max-width:767px){
  html body:has(> main > section.x-hero) #plans.x-plans>.x-plan:last-child:nth-child(2n+1){
    grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:12px 24px;align-items:center}
  html body:has(> main > section.x-hero) #plans.x-plans>.x-plan:last-child:nth-child(2n+1)>.x-plan-top{grid-column:1;grid-row:1}
  html body:has(> main > section.x-hero) #plans.x-plans>.x-plan:last-child:nth-child(2n+1)>ul{grid-column:1;grid-row:2}
  html body:has(> main > section.x-hero) #plans.x-plans>.x-plan:last-child:nth-child(2n+1)>.pr{grid-column:2;grid-row:1;margin:0;padding:0;border:0}
  html body:has(> main > section.x-hero) #plans.x-plans>.x-plan:last-child:nth-child(2n+1)>.l-btn{grid-column:2;grid-row:2;align-self:end}
}
@media (min-width:768px) and (max-width:1011px){
  html body:has(> main > section.x-hero) #plans.x-plans>.x-plan:last-child:nth-child(3n+1){
    grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(150px,auto);grid-template-areas:"top pr btn" "ul ul ul";
    gap:14px 28px;align-items:center}
  html body:has(> main > section.x-hero) #plans.x-plans>.x-plan:last-child:nth-child(3n+1)>.x-plan-top{grid-area:top}
  html body:has(> main > section.x-hero) #plans.x-plans>.x-plan:last-child:nth-child(3n+1)>.pr{grid-area:pr;margin:0;padding:0 0 0 28px;border:0;border-left:1px solid var(--line)}
  html body:has(> main > section.x-hero) #plans.x-plans>.x-plan:last-child:nth-child(3n+1)>.l-btn{grid-area:btn}
  html body:has(> main > section.x-hero) #plans.x-plans>.x-plan:last-child:nth-child(3n+1)>ul{grid-area:ul;display:flex;flex-wrap:wrap;gap:6px 32px;padding-top:12px;border-top:1px solid var(--line)}
  html body:has(> main > section.x-hero) #plans.x-plans>.x-plan:last-child:nth-child(3n+1)>ul>li>span:first-child{width:auto}
}

/* [5]/[10] the location filter of the «Производительность» line (Все + 4 cities) wrapped 4+1 at 561–767px: same 3+2 rows as the sources */
@media (max-width:767px){
  html body:has(> main > section.x-hero) #t-region.l-seg{display:flex;width:100%}
  html body:has(> main > section.x-hero) #t-region.l-seg>button{flex:1 1 28%;justify-content:center;padding-left:6px;padding-right:6px}
}
@media (max-width:440px){  /* phones: the long «Санкт-Петербург» needs its natural width (3+2 rows), the rows still fill the width */
  html body:has(> main > section.x-hero) #t-region.l-seg>button{flex:1 1 auto}
}

/* ---------- [11] /mods SEO «Что умеет»: 4 cards in an auto-fill minmax(250px) grid fell 3+1 at ~800–1040px of content (1024 viewport),
   «Шейдеры и ресурспаки» alone under an empty two-thirds row. A 4-card list is 4 columns from 861px and 2×2 from 601px (≤600 stays 1 column). ---------- */
@media (min-width:861px){
  html body:has(> main > section.m-hero) .seo ul.seo-feats:has(> li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:601px) and (max-width:860px){
  html body:has(> main > section.m-hero) .seo ul.seo-feats:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- [12] /hosting «Моды, плагины и сборки — из четырёх каталогов»: the demo types «essentials», which leaves 2 results in a list
   with min-height:340px — ~200px of empty white card on desktop, ~120px on phones. The list now fits its rows (the card shrinks with it;
   on desktop the notes column next to it is taller anyway). More matching demo items: see hosting-mods.md. ---------- */
html body:has(> main > section.x-hero) #sources #find-res.x-res{min-height:0}

/* ---------- [13] /hosting AI demo: before the plan is typed out the right column is short, and grid-template-rows:auto auto split the chat
   column's 540px between the plan and the footer, so «Перед применением сделаем бэкап… / Применить» floated mid-panel in a ~255px row.
   The plan row takes the spare height, the footer stays compact at the bottom. ---------- */
@media (min-width:981px){
  html body:has(> main > section.x-hero) #ai #x-ai.x-ai{grid-template-rows:minmax(0,1fr) auto}
}

/* ---------- [14] /hosting: orange outside the palette. The «partly» mark in the comparison was a filled orange-brown disc (amber in dark)
   next to the thin ✓/✗ marks — now a neutral half-filled ring. The «Тарифы этой линейки — в Москве» notice used the amber warn tint
   (muddy beige on the blue-grey page, brown in dark) — now the blue info tint. ---------- */
html body:has(> main > section.x-hero) #compare .x-cmp-r>span.m::before{
  background:linear-gradient(90deg,var(--s2-mute) 0 50%,transparent 50%);box-shadow:inset 0 0 0 2px var(--s2-mute)}
html body:has(> main > section.x-hero) #tariffs #t-ru.x-ru{background:rgba(46,108,246,.08);box-shadow:inset 0 0 0 1px rgba(46,108,246,.2)}
html[data-theme="dark"] body:has(> main > section.x-hero) #tariffs #t-ru.x-ru{background:rgba(76,130,255,.12);box-shadow:inset 0 0 0 1px rgba(76,130,255,.26)}

/* ---------- [16] /mods catalog categories on phones: a swipe row (scrollWidth ~1070 at 390) whose last visible chip was cut hard at the
   screen edge («Приключе…»), reading as clipped. The row now fades out at the right edge. Also the active chip was the old near-black
   (var(--ink)); it takes the site blue, as on /servers. ---------- */
@media (max-width:560px){
  html body:has(> main > section.m-hero) #catalog #mods-cats.m-cats{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
}
html body:has(> main > section.m-hero) #catalog #mods-cats.m-cats button[aria-pressed="true"]{background:#2E6CF6;border-color:#2E6CF6;color:#fff}

/* ---------- [17] phones, page end: the support circle (52px, fixed at right/bottom 25px — supportchat.v3.js) sat on the last footer row
   («Партнёрам»). The footer ends with room for it. (Passing over the cards' ↗ while scrolling is normal for a floating button.) ---------- */
@media (max-width:640px){
  html body:has(> main > :is(section.x-hero,section.m-hero)) .o-foot .o-foot-bot{padding-bottom:96px}
}

/* ---------- [19] /hosting «Весь сервер — в лаунчере» tour: all three screenshots (Обзор, ИИ-помощник, Моды) end mid-content — the «Нагрузка»
   cards are cut flush at the frame edge. The content area (right of the launcher sidebar, which ends cleanly) now fades into the frame,
   so it reads as a panel that scrolls on rather than a clipped image. Re-cropping the webp files would be the content-side fix. ---------- */
html body:has(> main > section.x-hero) #panel .x-tour-frame>[role="tabpanel"]{position:relative}
html body:has(> main > section.x-hero) #panel .x-tour-frame>[role="tabpanel"]::after{
  content:"";position:absolute;left:21.5%;right:0;bottom:0;height:min(72px,13%);pointer-events:none;border-bottom-right-radius:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 0%,transparent) 0%,var(--bg-2) 92%)}
@media (max-width:560px){html body:has(> main > section.x-hero) #panel .x-tour-frame>[role="tabpanel"]::after{border-bottom-right-radius:10px;height:15%}}

/* ---------- [20] /mods «Сборки игроков и авторов»: a build without cover/icon got a letter tile in a hash-picked hue (magenta «C» etc.,
   off-palette). Letter tiles there use the site blue / navy instead (inline style → !important). A tile whose image fails to load
   (onerror removes the <img>) gets the same. The near-duplicate entries are a feed/data matter: see hosting-mods.md. ---------- */
html body:has(> main > section.m-hero) #players .m-pl .m-ic:not(:has(img)){background:linear-gradient(160deg,#2E6CF6 0%,#1E4FC4 100%)!important;color:#fff}
html body:has(> main > section.m-hero) #players .m-pl:nth-child(even) .m-ic:not(:has(img)){background:linear-gradient(160deg,#22386E 0%,#0E1A3D 100%)!important}


/* ======================== v7: plus (аудит 13.10, /root/agent-work/site5/fix/plus.css) ======================== */
/* ===== /plus, /en/plus, /cabinet/plus — display fixes (site5 audit, family «plus», 2026-10-13).
   Every selector uses PLUS-only classes (.px-*, .m-*, .cr-* inside .px-more-grid) or body.px-page / .px-cab / .px-dlg,
   so nothing here matches other pages. Numbers in brackets = index in findings-plus.json. ===== */

/* ---------- [0] hero buy block: site2 paints the hero tile navy in both themes, but .px-buy kept the light-page ink tokens —
   «Смотреть танцы» (#14203D on navy, 1.1:1), the notes (1.9:1), «/ месяц» (3:1) and the eyebrow outline were dark-on-dark
   in the light theme. Give the buy block the on-navy tokens (same look in both themes). ---------- */
html body .px-hero .px-buy{--ink:#fff;--ink-2:rgba(255,255,255,.84);--mute:#AEB8D8;--line:rgba(255,255,255,.16);--line-2:rgba(255,255,255,.4);--px-vt:#F5C04A;--px-ok:#5FDC95}
html body .px-hero .px-buy .px-btn.ghost{background:rgba(10,30,90,.22)}
html body .px-hero .px-buy .px-btn.ghost:hover{background:rgba(255,255,255,.1)}
html body .px-hero .px-copy .px-eyebrow{border-color:rgba(255,255,255,.18)}

/* ---------- [1] «сейчас танцует» glass: prev/next arrows used --ink (#14203D) → invisible in the light theme;
   the sound button was a navy square on navy glass. Use the dark-theme look in both themes (the tile is always navy). ---------- */
html body .px-hero .px-np .px-ib{color:#fff}
html body .px-hero .px-np .px-ib:hover{background:rgba(255,255,255,.12)}
html body .px-hero .px-np .px-snd:not([aria-pressed="true"]){background:#EEF2FF;color:#0A0F1E}

/* ---------- [5] violet leftovers after the gold recolour + light-stage halo on the always-navy hero ---------- */
html body .px-mcard .pix{color:#F5C04A;filter:drop-shadow(0 0 10px rgba(245,192,74,.7))}
/* preview dialog stage: light = white core + soft blue, dark = gold core + blue */
html body .px-dlg .px-stage-bg{background:radial-gradient(26% 30% at 50% 46%,rgba(255,255,255,.95),transparent 72%),radial-gradient(44% 48% at 50% 46%,rgba(46,108,246,.16),transparent 72%)}
html[data-theme="dark"] body .px-dlg .px-stage-bg{background:radial-gradient(24% 28% at 50% 44%,rgba(255,196,80,.2),transparent 72%),radial-gradient(46% 50% at 50% 46%,rgba(46,108,246,.24),transparent 74%)}
/* hero: navy in both themes → the dark stage (halo, floor, contact shadow) in both themes */
html body .px-hero .px-stage .px-stage-bg{background:radial-gradient(24% 28% at 50% 44%,rgba(255,196,80,.22),transparent 72%),radial-gradient(46% 50% at 50% 46%,rgba(46,108,246,.26),transparent 74%)}
html body .px-hero .px-stage .px-floor{background:repeating-radial-gradient(closest-side,transparent 0 13%,rgba(255,205,110,.09) 13.4% 13.8%),radial-gradient(closest-side,rgba(52,72,140,.85) 0%,rgba(26,38,82,.8) 55%,rgba(20,30,66,.35) 85%,rgba(20,30,66,0) 100%);
  box-shadow:0 0 80px -10px rgba(255,196,80,.25)}
html body .px-hero .px-stage .px-contact{background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}

/* ---------- [2] «Ещё в PLUS», 761–1100px: gift/nl/crowd are full width, capes/disc half width, but DOM order is
   gift, capes, nl, disc, crowd — each half tile sat alone next to an empty half. Dense flow pulls «−10%» up next to the capes. ---------- */
@media (min-width:761px) and (max-width:1100px){
  html body .px-more-grid{grid-auto-flow:row dense}
}
/* the grid is a size container (width, not viewport) — needed for the cabinet, where the sidebar eats ~370px */
html body .px-more-grid{container:pxmore/inline-size}
/* cabinet: the column is 656–926px wide, so 7/5 and 6/6 splits gave 280–380px tiles (capes 830px tall). One tile per row below 860px. */
@container pxmore (max-width:859.98px){
  html body .px-cab .px-more-grid>:is(.m-gift,.m-capes,.m-nl,.m-disc){grid-column:span 12}
}

/* ---------- [3] «Группы до 64, звонки до 24»: the text | demos split only switched by viewport (≤900px). In the cabinet (grid 656–926px)
   the demo panels got 180–250px wide → «Группа «Стройка»» cut to «Гру…» (1024) / «Группа «Стройк…»» (1280–1366); same at 901–960px
   on the public page. Stack the tile when the grid is narrow; where it stays split, let the «64 / 64» counter drop under the name
   instead of eating it. ---------- */
@container pxmore (max-width:859.98px){
  html body .px-more-grid>.m-crowd{grid-template-columns:minmax(0,1fr)}
}
html body .px-more-grid .cr-p .h{flex-wrap:wrap;row-gap:2px}

/* ---------- [4] preview dialog on short screens (≤ ~710px): .px-dlg-info is a flex column and its children shrank instead of the column
   scrolling — «Выключить музыку» 50→23px, «Оформить PLUS» 44→32px with the label spilling out. Keep natural heights; tighten spacing. ---------- */
html body .px-dlg .px-dlg-info>*{flex-shrink:0}
@media (min-width:801px) and (max-height:711.98px){
  html body .px-dlg .px-dlg-info{padding:26px 30px 22px}
  html body .px-dlg .px-dlg-facts{margin:16px 0}
  html body .px-dlg .px-dlg-info .px-dlg-th{margin-top:14px}
  html body .px-dlg .px-dlg-info .px-btn.pri{margin-top:16px}
}

/* ---------- [6] rarity colours: plus.v6.js writes its own hex map inline (--rc:#E8B530 …), the rest of the site uses the --rc-* tokens
   (/wardrobe: mythic pink, legendary amber; dark-theme variants). Author !important beats the inline value, so map hex → token.
   Both serialisations are covered: "--rc:#hex" (string markup) and "--rc: #hex" (style.setProperty). ---------- */
html :is(body.px-page,body .px-cab,body .px-dlg) :is([style*="--rc:#9AA3AE" i],[style*="--rc: #9AA3AE" i]){--rc:var(--rc-common)!important}
html :is(body.px-page,body .px-cab,body .px-dlg) :is([style*="--rc:#58B947" i],[style*="--rc: #58B947" i]){--rc:var(--rc-uncommon)!important}
html :is(body.px-page,body .px-cab,body .px-dlg) :is([style*="--rc:#4A8FE7" i],[style*="--rc: #4A8FE7" i]){--rc:var(--rc-rare)!important}
html :is(body.px-page,body .px-cab,body .px-dlg) :is([style*="--rc:#A461E0" i],[style*="--rc: #A461E0" i]){--rc:var(--rc-epic)!important}
html :is(body.px-page,body .px-cab,body .px-dlg) :is([style*="--rc:#E8B530" i],[style*="--rc: #E8B530" i]){--rc:var(--rc-legendary)!important}
html :is(body.px-page,body .px-cab,body .px-dlg) :is([style*="--rc:#E5484D" i],[style*="--rc: #E5484D" i]){--rc:var(--rc-mythic)!important}
/* dialog «Редкость» value is written as an inline color: give it the token as --rc, then paint with it */
html body .px-dlg .px-dlg-facts dd[style*="#9AA3AE" i]{--rc:var(--rc-common)}
html body .px-dlg .px-dlg-facts dd[style*="#58B947" i]{--rc:var(--rc-uncommon)}
html body .px-dlg .px-dlg-facts dd[style*="#4A8FE7" i]{--rc:var(--rc-rare)}
html body .px-dlg .px-dlg-facts dd[style*="#A461E0" i]{--rc:var(--rc-epic)}
html body .px-dlg .px-dlg-facts dd[style*="#E8B530" i]{--rc:var(--rc-legendary)}
html body .px-dlg .px-dlg-facts dd[style*="#E5484D" i]{--rc:var(--rc-mythic)}
html body .px-dlg .px-dlg-facts dd:is([style*="#9AA3AE" i],[style*="#58B947" i],[style*="#4A8FE7" i],[style*="#A461E0" i],[style*="#E8B530" i],[style*="#E5484D" i]){color:var(--rc)!important}
/* light theme: rarity words on white cards — darker text (the dot keeps the bright colour); legendary 1.9:1 → 3.9:1 */
html:not([data-theme="dark"]) :is(body.px-page,body .px-cab,body .px-dlg) .rar{color:color-mix(in srgb,var(--rc) 72%,#14203D)}
html:not([data-theme="dark"]) body .px-dlg .px-dlg-facts dd:is([style*="#9AA3AE" i],[style*="#58B947" i],[style*="#4A8FE7" i],[style*="#A461E0" i],[style*="#E8B530" i],[style*="#E5484D" i]){color:color-mix(in srgb,var(--rc) 72%,#14203D)!important}
/* hero (navy in both themes): dark-theme rarity tokens, bright text */
html body .px-hero{--rc-common:#9AA1AD;--rc-uncommon:#6FD17E;--rc-rare:#6F9BFF;--rc-epic:#B794FF;--rc-legendary:#F5C445;--rc-mythic:#FF6FA5}
html:not([data-theme="dark"]) body.px-page .px-hero .rar{color:var(--rc)}

/* ---------- [7] section kickers: .px-head p (0,1,1) overrode .px-kick (0,1,0) → five kickers were 18px grey, two were 12.5px gold.
   Use the .px-kick style everywhere. ---------- */
html body .px-head p.px-kick{margin:0 0 14px;max-width:none;font-size:12.5px;line-height:1.4;color:var(--px-vt)}

/* ---------- [10] «+10% к ежедневной награде», С PLUS: 9% gold mixed into blue-grey --bg-2 gave a muddy neutral grey (225,226,225).
   Use the same «PLUS on» treatment as the «Ты · PLUS» row in the friends tile next to it: gold wash + thin gold ring. ---------- */
html body .px-bento[data-on="1"] .px-day{background:var(--px-vs);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--px-v) 30%,transparent)}

/* ---------- [11] «Ранний доступ к новинкам»: each line was an inline-flex row with flex-wrap — when the text needed two lines the whole
   text block wrapped under the icon and the ✓ / clock sat alone on the first line (RU at most widths, EN at ~1024px).
   Hang the icon in its own column next to the first line; the timer keeps its own line under them (as before). ---------- */
html body .px-early .act>span{display:grid;grid-template-columns:15px minmax(0,1fr);column-gap:7px;align-items:start;text-wrap:balance}
html body .px-early .act>span>svg{margin-top:.13em}
html body .px-early .act>span>b{grid-column:1/-1;white-space:nowrap}

/* ---------- [8] hero: «Оформить PLUS» below the fold. site2 wrapped the hero in a tile (+44px padding, stage +14px margin), but the stage
   kept its full-screen height (100svh − 96px), so on 1280–1536 × 657–780 the stage and the «сейчас танцует» panel ran 30–80px past
   the bottom of the screen and the copy column pushed the CTA to y≈658–771. ---------- */
@media (min-width:901px){
  html body .px-hero .px-stage{height:clamp(480px,calc(100svh - 150px),800px)}
}
/* short desktop screens: tighter tile padding and spacing, PLUS wordmark capped by the screen height */
@media (min-width:901px) and (max-height:820px){
  html body .px-hero>.px-hero-in{min-height:0;padding-top:28px!important;padding-bottom:28px!important}
  html body .px-hero .px-eyebrow{margin-bottom:14px}
  html body .px-hero .px-h1 .b{font-size:clamp(88px,min(12.6vw,20svh),188px)}
  html body .px-hero .px-lead{margin-top:18px}
  html body .px-hero .px-price{margin:20px 0 14px}
}
/* phones/tablets (one column): price + buttons right after the copy, the dancing stage below them
   (was copy → 420–560px stage → price, CTA at y≈1085 on 390×844 and y≈1127 on 768×1024) */
@media (max-width:900px){
  html body .px-hero .px-hero-in{grid-template-areas:"copy" "buy" "stage"}
  html body .px-hero .px-price{margin-top:22px}
  html body .px-hero .px-buy{margin-bottom:6px}
}
/* very short desktop screens (1280×585 = 1280×720 laptop with browser chrome, 1024×600): one more step */
@media (min-width:901px) and (max-height:640px){
  html body .px-hero .px-stage{height:clamp(400px,calc(100svh - 150px),800px)}
  html body .px-hero .px-eyebrow{margin-bottom:10px}
  html body .px-hero .px-h1 .b{font-size:clamp(80px,16svh,188px)}
  html body .px-hero .px-sub{font-size:15px;line-height:1.5;max-width:56ch}
  html body .px-hero .px-price{margin:16px 0 12px}
}


/* ======================== v7: emotes (аудит 13.10, /root/agent-work/site5/fix/emotes.css) ======================== */
/* ===== /emotes, /en/emotes, /emotes/<id> (+ /en/emotes/<id>), /emotes-howto, /en/emotes-howto — display fixes
   (site5 audit, family «emotes», 2026-10-13). Numbers in brackets = index in findings-emotes.json.
   Scope: the catalog and every item page carry the hero tile `section.card.em-hero` (no other page has it) → `body:has(.em-hero)`;
   the how-to pages carry `section.card.hero-h` (only there) → `body:has(.card.hero-h)`. /wardrobe, /skins, /capes reuse #modal,
   #grid, #daily-shop, .nl-fr, .seo, .chip, so plain ids/classes are never used on their own. ===== */

/* ---------- [13] palette: the page still ran on the old e2 tokens — near-black ink (#0B0B0F) for text and every selected state,
   graphite cards (#14151C) and white-alpha borders in dark on the navy site background. Map the tokens to the site («Острова»)
   palette, as on /wardrobe; rarity colours, stage gradients and gold stay as they are. ---------- */
html:not([data-theme="dark"]) body:is(:has(.em-hero),:has(.card.hero-h)){
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--panel2:var(--s2-soft);
  --bd:rgba(20,32,61,.09);--bd2:rgba(20,32,61,.15)}
html[data-theme="dark"] body:is(:has(.em-hero),:has(.card.hero-h)){
  --bg:var(--s2-bg);--panel:var(--s2-card);--panel2:var(--s2-soft);--bd:var(--s2-line);--bd2:#2E3B60;
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--mut2:#7A86AB}
html:not([data-theme="dark"]) body:has(.em-hero) > .seo{--s-ink:var(--s2-text);--s-ink2:var(--s2-text2);--s-mute:var(--s2-mute);--s-line:var(--s2-line)}
html[data-theme="dark"] body:has(.em-hero) > .seo{--s-card:var(--s2-card);--s-line:var(--s2-line);--s-ink:var(--s2-text);--s-ink2:var(--s2-text2);--s-mute:var(--s2-mute)}
html[data-theme="dark"] body:has(.em-hero) .nls-pop{background:var(--s2-card);box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 0 0 1px var(--s2-line)}
html[data-theme="dark"] body:has(.em-hero) .nls-pick > button{background:rgba(18,26,48,.82)}

/* ---------- [2] hero category list on the sky tile: site2's `a:not([class])` rule underlined every name and count, the counts kept the
   grey --mut (#6B7280 on blue, ~1.4:1; now white .92 like the lead text, ~3.1:1) and the bars were ink-black on the sky. White names, light counts, white bars on a glass track. ---------- */
html body:has(.em-hero) .em-hero .hero-cats a{color:#fff!important;text-decoration:none!important}
html body:has(.em-hero) .em-hero .hero-cats a span{color:rgba(255,255,255,.92)}
html body:has(.em-hero) .em-hero .hero-cats a i{background:rgba(255,255,255,.24)}
html body:has(.em-hero) .em-hero .hero-cats a i::after{background:#fff}
html body:has(.em-hero) .em-hero .hero-cats a:hover span{color:#fff}
html body:has(.em-hero) .em-hero .hero-cats a:hover i{background:rgba(255,255,255,.4)}
html body:has(.em-hero) .em-hero .hero-cats a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}

/* ---------- [3] «292» pill in the H1: near-black ink pill (a white one with the H1's text-shadow in dark), 2.8px from the last glyph, and
   it overflowed the H1 when the longest word plus the pill did not fit (EN «Minecraft», 768px, 360px — 6px from the tile edge). The H1
   was a flex row, so the pill could only overflow. Now the pill is an inline badge after the last word: it keeps a real gap, and where it
   does not fit on the last line it moves to a line of its own instead of running into the tile edge. The H1 may use part of the column's
   right padding (the pill sat there before too), so on desktop it still stays beside the title. White badge like the hero's main button
   (glass in dark), no inherited text-shadow. ---------- */
html body:has(.em-hero) .em-hero h1{display:block;margin-right:-36px}
@media (max-width:1080px){html body:has(.em-hero) .em-hero h1{margin-right:-20px}}
@media (max-width:560px){html body:has(.em-hero) .em-hero h1{margin-right:-6px}}
html body:has(.em-hero) .em-hero h1 .count{display:inline-block;vertical-align:top;margin:.55em 0 0 .45em;font-size:max(15px,.18em);
  background:#fff;color:#1A3EA6;text-shadow:none;box-shadow:0 3px 0 rgba(8,22,64,.22)}
html[data-theme="dark"] body:has(.em-hero) .em-hero h1 .count{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}

/* ---------- [4] «Четыре эмоции есть у всех бесплатно…» — 13px white on the palest end of the sky (#A9CBFF, 1.7:1). Light theme: navy
   text (≥6.2:1). Same spot: «Как это работает» (white on rgba(10,30,90,.22) over the pale sky, 2.9:1) looked disabled — the darker navy
   glass /wardrobe uses for «Смотреть каталог» (~5:1). Dark theme already passes (white on #3159B4, 6:1). ---------- */
html:not([data-theme="dark"]) body:has(.em-hero) .em-hero .info .free-note{color:#123477!important;font-weight:600}
html:not([data-theme="dark"]) body:has(.em-hero) .em-hero .hero-actions .btn:not(.pri){background:rgba(14,26,61,.5)!important;border-color:rgba(255,255,255,.5)!important}
html:not([data-theme="dark"]) body:has(.em-hero) .em-hero .hero-actions .btn:not(.pri):hover{background:rgba(14,26,61,.62)!important}

/* ---------- [0] «Витрина дня»: «Войти и купить» (flex:1, nowrap, ~132px) squeezed the gift and «Примерить» icon buttons from 38px to 18px
   and pushed «Примерить» past the card edge (clipped by overflow:hidden) at every width. The main button gets its own row, the two
   icon buttons share the row below it — the same fix /wardrobe got. ---------- */
html body:has(.em-hero) #daily-shop .shx-act:has(> .shx-btn.pri){flex-wrap:wrap}
html body:has(.em-hero) #daily-shop .shx-act > .shx-btn.pri{flex:1 1 100%;min-width:0;overflow:hidden;text-overflow:ellipsis}
html body:has(.em-hero) #daily-shop .shx-act:has(> .shx-btn.pri) > .shx-btn.ico{flex:1 1 0;width:auto;min-width:36px}

/* ---------- [14] widowed last row of the daily shop: 6 offers in an auto-fill grid → 5+1 at ~1024px, 4+2 around 900px. Where the grid
   would give 4–5 columns, use 3 (3+3); the cards are ~230–330px wide there, so the picture becomes 4:3 to keep the section compact.
   Container query on the section's own width (scrollbar width does not matter); only when there are exactly 6 cards. ---------- */
html body:has(.em-hero) #daily-shop > .shx{container-type:inline-size}
@container (min-width:730px) and (max-width:1101.98px){
  html body:has(.em-hero) #daily-shop .shx-grid:has(> .shx-card:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  html body:has(.em-hero) #daily-shop .shx-grid:has(> .shx-card:nth-child(6):last-child) .shx-pic{aspect-ratio:4/3;min-height:0;grid-template-rows:minmax(0,1fr)}
  html body:has(.em-hero) #daily-shop .shx-grid:has(> .shx-card:nth-child(6):last-child) .shx-pic .shx-collage{width:64%}
}

/* ---------- [5] item modal. Phones/tablets (≤860px, the whole box scrolls): ✕ was absolute inside the scroller and left the screen as soon
   as you scrolled to the price / CTA / «Ещё из раздела» — no way to close on screen. Pin it to the viewport. Desktop: ✕ floats over the
   side column and scrolled text ran under it — give it a ring in the panel colour so text never touches it. ---------- */
@media (max-width:860px){
  html body:has(.em-hero) #modal .x{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));box-shadow:0 4px 14px rgba(8,22,64,.18)}
}
@media (min-width:861px){
  html body:has(.em-hero) #modal .x{box-shadow:0 0 0 6px var(--panel)}
}

/* ---------- [7] catalog sections (Все, Жесты … Кибер): a one-line scroller with a hidden scrollbar and no wheel handler — with a mouse the
   last chips («Пираты», «Кибер») were cut at the edge and unreachable. Wrap them on desktop / tablets with a mouse; touch and phones keep the swipe row. ---------- */
@media (min-width:861px),(min-width:561px) and (hover:hover) and (pointer:fine){
  html body:has(.em-hero) #f-cat.scroller{flex-wrap:wrap;overflow:visible}
}

/* ---------- [13] selected states were near-black ink pills (white in dark): catalog «Все 292» and rarity/property chips, the modal stage
   chips («∞ Повторять», «Стив»), the nick «Показать» button and the fitting room's «■ Покружить» / rotate chips. Every other page uses the
   site blue for a selected chip (/skins, /wardrobe, /servers) — #2E6CF6 in both themes (white on the dark-theme #4C82FF is only 3.5:1).
   While the «Свой ник» field is open, that chip is the active one (the JS left «Стив» lit). ---------- */
html body:has(.em-hero) .chip.on{background:#2E6CF6;border-color:#2E6CF6;color:#fff}
html body:has(.em-hero) .chip.on:hover{background:#1E4FC4;border-color:#1E4FC4;color:#fff}
html body:has(.em-hero) .chip.on .n{opacity:.8}
html body:has(.em-hero) .chip.on .sw{box-shadow:0 0 0 2px #fff}
html body:has(.em-hero) #m-ctrls .chip.on{background:#2E6CF6;color:#fff}
html body:has(.em-hero) #m-ctrls .chip.on:hover{background:#1E4FC4;color:#fff}
html body:has(.em-hero) #m-ctrls:has(> #m-nick:not([hidden])) .cg.skins > .chip.on:not([data-skin="nick"]){background:transparent;color:var(--ink2)}
html body:has(.em-hero) #m-ctrls:has(> #m-nick:not([hidden])) .cg.skins > .chip[data-skin="nick"]{background:#2E6CF6;color:#fff}
html body:has(.em-hero) .nl-fr .nl-fr-chip.on{background:#2E6CF6;border-color:#2E6CF6;color:#fff}

/* ---------- [15] filter card: the «Свойства» group (∞ Зацикленные, ★ Хиты) was separated by its own border-left + 18px padding — when it
   wrapped to its own line (≈561–1030px) that left a stray bar at the start of the line and an 18px indent. The space between the two groups
   is now the flex column-gap (it does not exist at a line start) and the bar is drawn in the middle of it; a bar that would start a line
   falls outside the box and is clipped (clip-path keeps 5px around the chips for focus rings). Phones (≤560px) keep their own layout. ---------- */
@media (min-width:561px){
  html body:has(.em-hero) #f-more.fgroups{column-gap:37px;clip-path:inset(-8px -8px -8px -5px)}
  html body:has(.em-hero) #f-more > .fg + .fg{border-left:0;padding-left:0;position:relative}
  html body:has(.em-hero) #f-more > .fg + .fg::before{content:"";position:absolute;left:-19px;top:0;bottom:0;width:1px;background:var(--bd)}
}
/* at 768px the six rarity chips needed 702px of 690 and «Мифические» wrapped alone — 2px less padding per chip on tablets */
@media (min-width:561px) and (max-width:860px){
  html body:has(.em-hero) #f-more > .fg > .chip{padding:0 9px}
}

/* ---------- [16] «Как это работает»: each step is a 2-row grid stretched to the tallest step, and the spare height went into the title row —
   step 1's text sat ~11px lower than steps 2 and 3. Pack the rows to the top. ---------- */
html body:has(.em-hero) #how .steps li{align-content:start}

/* ---------- [17] «Примерочная»: the «Стив — стандартный скин» row had an empty white thumbnail (looked like a broken image) — show Steve's
   head there for guests and in «На стандартном» (same asset and rule as /wardrobe; the JS fix is in emotes.md). ---------- */
html body:has(.em-hero) .nl-fr:is(:has(.nl-fr-login),:has(.nl-tg [data-m="std"][aria-pressed="true"])) #nl-fr-list > li:first-child > .th:empty{
  background:var(--panel) url(/assets/plusx/head-steve.v1.png) center/28px 28px no-repeat;image-rendering:pixelated}

/* ---------- [18] catalog cards on phones: the always-visible «♙ Примерить» pill (~98×26 on a 159–174px card) sat on the model's hands and
   feet. Up to 560px it is an icon-only round button (the label stays its accessible name). At 360px «Легендарная» was cut to «Легендарн…»
   (72px for 76): the rarity/price row gets a smaller gap there. ---------- */
@media (max-width:560px){
  html body:has(.em-hero) #grid .em .pic > .nl-try-b{width:30px;height:30px;padding:0;gap:0;justify-content:center;border-radius:50%;font-size:0;line-height:0}
  html body:has(.em-hero) #grid .em .pic > .nl-try-b svg{width:15px;height:15px}
}
@media (max-width:400px){
  html body:has(.em-hero) #grid .em .sub{gap:4px}
}

/* ---------- [19] pair emotes, «В игре: позови друга рядом»: the B and Y keycaps took an 86px column, leaving 220px for the text (7 short
   lines, a very tall box). Keycaps now sit beside the heading and the explanation uses the full width. The teal «Вдвоём ⇄» accent (pill,
   box tint, card badge) was outside the site palette — the site blue instead. ---------- */
html body:has(.em-hero) #m-side .ingame.duo{row-gap:8px;border-color:color-mix(in srgb,#2E6CF6 35%,transparent);background:color-mix(in srgb,#2E6CF6 7%,var(--panel2))}
html body:has(.em-hero) #m-side .ingame.duo > .keys{grid-row:auto;gap:4px}
html body:has(.em-hero) #m-side .ingame.duo > .keys kbd{font-size:15px}
html body:has(.em-hero) #m-side .ingame.duo > .keys kbd + kbd{margin-left:0}
html body:has(.em-hero) #m-side .ingame.duo > span:not(.keys){grid-column:1 / -1}
html body:has(.em-hero) .pill.pair{background:color-mix(in srgb,#2E6CF6 12%,var(--panel));color:#1E56D4;border-color:color-mix(in srgb,#2E6CF6 38%,transparent)}
html[data-theme="dark"] body:has(.em-hero) .pill.pair{color:#9DBBFF}
html body:has(.em-hero) .b-pair{background:#2E6CF6}

/* ---------- [20] SEO block under the catalog: its own max-width 1180 + 24px padding started 30px right of every section above (x=117 vs 87)
   and sat ~150px below the catalog. Same column and rhythm as main.wrap (as on /wardrobe). ---------- */
html body:has(.em-hero) main.wrap:has(+ section.seo){padding-bottom:0}
html body:has(.em-hero) > section.seo{max-width:1240px;padding:44px 24px 8px}
@media (max-width:560px){html body:has(.em-hero) > section.seo{padding:34px 16px 4px}}

/* ==================== /emotes-howto, /en/emotes-howto ==================== */

/* ---------- [11] hero step chips: white on rgba(255,255,255,.16) over the palest part of the sky (1.9–2.1:1), and the separate «→» items
   wrapped on their own — a lone arrow at a line end, «колесо и каталог» alone below. Chips get the navy glass of the hero buttons (~5:1);
   the separate arrows are hidden and each arrow is drawn after the chip before it, so a line can end with «… →» but never with a bare arrow
   or start with one. ---------- */
html body:has(.card.hero-h) .card.hero-h .flow > span{background:rgba(14,26,61,.5)!important;border-color:rgba(255,255,255,.32)!important;color:#fff!important}
html body:has(.card.hero-h) .card.hero-h .flow > i{display:none}
html body:has(.card.hero-h) .card.hero-h .flow > span:not(:last-of-type){position:relative;margin-right:24px}
html body:has(.card.hero-h) .card.hero-h .flow > span:not(:last-of-type)::after{content:"→";position:absolute;left:100%;top:50%;margin-left:8px;
  transform:translateY(-50%);color:rgba(255,255,255,.85);font-weight:700;pointer-events:none}
html:not([data-theme="dark"]) body:has(.card.hero-h) .card.hero-h .flow > span:not(:last-of-type)::after{color:#123477}

/* ---------- [10] dark theme: the launcher screenshots (near-white) and the render sheet (light grey) were glaring white blocks in the dark
   cards. Interim until dark captures exist (emotes.md): dim them and give them a dark-theme hairline. ---------- */
html[data-theme="dark"] body:has(.card.hero-h) .howto figure img{filter:brightness(.82) contrast(1.04);border-color:var(--s2-line);background:var(--s2-soft)}

/* ---------- [12] step 4 image: the top of the QA render sheet is a monospace debug header («kazotsky_kick (ec_kazotsky_kick) · 3.05 с ·
   loop») and per-frame timestamps. Interim crop of those 60px (of 494) until a clean render replaces the file (emotes.md). ---------- */
html body:has(.card.hero-h) .howto figure img[src*="/assets/emotes-howto/poses.v1."]{aspect-ratio:1360 / 434;object-fit:cover;object-position:50% 100%}


/* ======================== v7: фон <html> = фон сайта на всех страницах (старый #F6F7F9 / #0B0B0F был виден под подвалом и при прокрутке за край) ======================== */
html{background-color:var(--s2-bg)!important}


/* ======================== v8: auth-misc — вход, регистрация, сброс пароля, приглашение, 404, публичный профиль ======================== */
/* ===== auth-misc family — /login, /register, /reset, /reset/sent, /reset/new, /reset/done, /verify-email, /email-confirm, 404 (/404x),
   /onboarding, /invite, /profile/<nick> — display fixes (site5 audit, family «auth-misc», 2026-10-13). Numbers in brackets = index in
   findings-auth-misc.json. Appended to site2.vN.css (loaded last on every page except home).
   Page scopes (each marker exists only on its pages — body.nc is shared with the whole cabinet and /help, .au-* with /authors):
     /reset, /reset/*, /verify-email     body.nc>main.au                (/authors is main.wrap.au without body.nc)
     /email-confirm                      body.nc:has(>main.ec)
     404 page (any unknown URL)          body.nc:has(>main.nf)
     /onboarding                         body.nc:has(#ob-list)
     /login, /register                   body:has(#authForm)
     /invite                             body:has(#inv-title)
     /profile/<nick>                     body:has(>main#app)             (#app exists only in profile/profile.html)
   ===== */

/* ---------- [0] reset / verify-email hero: the island render (.au-intro::after — waving Steve 125×180 at right 52/bottom 120 over a
   petal block 116px at right 56/bottom 22) had no room reserved in the text column: the lead ran into Steve and the white tips card
   covered the block (/reset/new, /verify-email at every desktop width; /reset too when the tile is narrow). ≥1180px (tile 616px): the
   text column stops 170px short of the right edge. 961–1179px (two columns, tile 397–600px): no room for the render — hidden.
   861–960px (one column, tile ~230px tall, Steve's head was cut off by the top edge): the petal block alone, centred on the right. ---------- */
@media (min-width:1180px){
  html body.nc>main.au>.au-intro>:is(.lead,.au-tips,.au-steps){max-width:min(470px,calc(100% - 170px))!important}
}
@media (min-width:961px) and (max-width:1179px){
  html body.nc>main.au>.au-intro::after{display:none}
}
@media (min-width:861px) and (max-width:960px){
  html body.nc>main.au>.au-intro::after{background-image:url(/assets/home2/blk-petals.v1.webp)!important;
    background-size:100px auto!important;background-position:right 48px center!important}
}

/* ---------- [1] palette: these pages still ran on the old e2 tokens (cab.v3.css, profile.v3.css, invite.v1.css) — graphite cards #14151C,
   inputs/chips #1B1D26 and white-alpha borders in dark on the navy page; near-black #0B0B0F ink and grey #8A909C meta (2.8:1) in light.
   Mapped to the site («Острова») tokens, as site2 does for /wardrobe, /emotes, /help. Not the cabinet: it shares body.nc, but keeps
   its own palette — every selector below names a marker that exists only on the pages of this family. ---------- */
html:not([data-theme="dark"]) body:is(.nc:has(>main.au),.nc:has(>main.ec),.nc:has(>main.nf),.nc:has(#ob-list),:has(#authForm),:has(#inv-title),:has(>main#app)){
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--panel2:var(--s2-soft);
  --bd:rgba(20,32,61,.09);--bd2:rgba(20,32,61,.15)}
html[data-theme="dark"] body:is(.nc:has(>main.au),.nc:has(>main.ec),.nc:has(>main.nf),.nc:has(#ob-list),:has(#authForm),:has(#inv-title),:has(>main#app)){
  --bg:var(--s2-bg);--panel:var(--s2-card);--panel2:var(--s2-soft);--panel3:var(--s2-soft);
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--mut2:#7A86AB;
  --bd:var(--s2-line);--bd2:#2E3B60;--bd3:#3A4874;--top-bg:rgba(10,15,30,.96)}
/* invite.v1 pink (kicker chip, friend card glow) → the site accent */
html:not([data-theme="dark"]) body:has(#inv-title){--pink:var(--s2-acc-text);--pink-soft:rgba(46,108,246,.10)}
html[data-theme="dark"] body:has(#inv-title){--pink:var(--s2-acc-text);--pink-soft:rgba(76,130,255,.14)}
/* dark: the inactive step circles on the hero tile were graphite discs («holes» in the navy tile) — glass, like other hero chips */
html[data-theme="dark"] body.nc>main.au>.au-intro .au-steps li:not(.on):not(.done) .n{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff}
/* /login, /register dark: the active mode tab was darker than the pill around it — a lighter navy chip; «Есть код друга или промокод?»
   kept an inline #2E6CF6 (4.2:1 on the navy page) — the page's dark link colour, like «Забыл пароль?» next to it */
html[data-theme="dark"] body:has(#authForm) [role="tablist"] .tab.on{background:#2A3658;box-shadow:0 6px 16px -12px rgba(0,0,0,.8)}
html[data-theme="dark"] body:has(#authForm) #ref-open{color:var(--ac-tx)!important}

/* ======================================================================================================================
   /invite   (scope body:has(#inv-title))
   ====================================================================================================================== */

/* ---------- [2] hero: invite.v1 lays the hero out as text | «Твой друг» card, but site2's generic `main>.hero` (flex column, children
   capped at 100% − 330px) stacked the card under the text: an ~870px tile with an empty right half. Two columns again from 961px
   (invite.v1's own breakpoint); the island render is dropped there, as on the other hero tiles that carry a panel on the right
   (/wardrobe, /emotes). Below 961px site2's single column stays. ---------- */
@media (min-width:961px){
  html body:has(#inv-title) main.wrap>section.hero{display:grid!important;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:36px!important;align-items:center!important}
  html body:has(#inv-title) main.wrap>section.hero>*{max-width:none!important}
  html body:has(#inv-title) main.wrap>section.hero::after{display:none}
}
@media (min-width:961px) and (max-width:1180px){
  html body:has(#inv-title) main.wrap>section.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px!important}
}
/* the main action «Скачать NLauncher» (.btn.primary) is not on site2's white-primary list and fell into the glass rule — it looked
   exactly like «Создать аккаунт». White primary button, as in the other hero tiles. */
html body:has(#inv-title) main.wrap>section.hero .btn.primary{
  background:#fff!important;color:#1A3EA6!important;border:0!important;border-radius:15px!important;box-shadow:0 4px 0 rgba(8,22,64,.3)!important}
html body:has(#inv-title) main.wrap>section.hero .btn.primary:hover{background:#EAF1FE!important;color:#1A3EA6!important}

/* ---------- [3] texts on the sky tile: «Лаунчер уже установлен? Открыть в нём» (#open-l, has a class, so site2's white a:not([class])
   rule missed it) was #1E56D6 on #588DFB — 1.97:1; the «code not found» notice was grey #4A4F5A on an amber tint over blue — 2.4:1;
   the emphasised «бонус NLcoin» was near-black. All white; the link and the notice sit low on the tile, where the sky is light
   (#9ABFFE), so both get a dark glass backing (white on it ≥4.7:1) — the link becomes a small glass button. ---------- */
html body:has(#inv-title) main.wrap>section.hero #open-l{color:#fff!important;padding:8px 13px;border-radius:12px;
  background:rgba(14,26,61,.42);border:1px solid rgba(255,255,255,.3);text-decoration:none}
html body:has(#inv-title) main.wrap>section.hero #open-l:hover{background:rgba(14,26,61,.56)}
html body:has(#inv-title) main.wrap>section.hero #inv-bad{background:rgba(14,26,61,.42)!important;border:1px solid rgba(255,255,255,.3);
  color:#fff!important;max-width:560px}
html body:has(#inv-title) main.wrap>section.hero .lead b{color:#fff!important}

/* ---------- [9] old-style leftovers: «1 2 3» opened with a 2px --ink rule (near-black band in light, white band in dark); the friend card
   had a pink glow (maroon on navy in dark); «+100 NLcoin» was gold #E0A526 on white — 2.2:1 (darker gold in light, 4.1:1). ---------- */
html body:has(#inv-title) main.wrap>section.steps{border-top:1px solid var(--s2-line)}
html body:has(#inv-title) main.wrap>section.hero>.card{
  background:radial-gradient(120% 90% at 20% 0%,rgba(46,108,246,.12),transparent 55%),radial-gradient(120% 90% at 100% 100%,rgba(46,108,246,.22),transparent 55%),var(--panel)!important}
html:not([data-theme="dark"]) body:has(#inv-title) .card .gift b{color:#A86B00}

/* ======================================================================================================================
   /profile/<nick>   (scope body:has(>main#app))
   ====================================================================================================================== */

/* ---------- [1] dark: the «Фон сцены» picker kept skinview3d-nl's graphite popover/button (#1E2229) — navy, as site2 does on /wardrobe ---------- */
html[data-theme="dark"] body:has(>main#app) #stage .nls-pop{background:var(--s2-card);box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 0 0 1px var(--s2-line)}
html[data-theme="dark"] body:has(>main#app) #stage .nls-pick>button{background:rgba(18,26,48,.82)}

/* ---------- [4] 521–860px (one column, stage 500–700px wide): profile.v12.js caps the 3D canvas at 460px, and its own backdrop drew a grey
   box with hard left/right edges in the middle of the stage. Until the cap is lifted (see auth-misc.md [4]) the canvas edges fade into
   the stage. Below 521px and in the two-column layout the canvas already fills the stage, so nothing changes there. ---------- */
@media (min-width:521px) and (max-width:860px){
  html body:has(>main#app) #stage>canvas{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
}

/* ---------- [5] phones: the round «Фон сцены» button (bottom-right) covered the end of the pose chips («Вращать» cut to «Вращат» at 360px,
   touching at 390). It moves to the top-right corner of the stage, as on /wardrobe and /skins; the emote name pill, which used that
   corner while an emote plays, moves to the top-left (the «Покрути мышкой» hint there is hidden below 561px). ---------- */
@media (max-width:560px){
  html body:has(>main#app) #stage .nls-pick{top:10px;bottom:auto}
  html body:has(>main#app) #stage .nls-pick>.nls-pop{top:42px;bottom:auto}
  html body:has(>main#app) #stage .emote-name{right:auto;left:14px}
}

/* ---------- [13] mono leftovers inside light cards: the count chips («6 из 75»), the letter-spaced «нажми — покажет на модели» pill, the server
   address, the rarity percent and the not-found «404» — the page sans (tabular numbers kept). ---------- */
html body:has(>main#app) :is(.sec-h .cnt,.srv small,.ach .m .rare,.state .big){
  font-family:var(--sans,Onest,system-ui,sans-serif);letter-spacing:normal;word-spacing:normal;text-transform:none;font-variant-numeric:tabular-nums}
html body:has(>main#app) .sec-h .cnt{font-weight:800}

/* ---------- [18] achievement titles were cut to one line with an ellipsis («Не один в этом м…») and descriptions to two — two and three lines.
   (The column balance needs JS — auth-misc.md [18].) ---------- */
html body:has(>main#app) .ach .t{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
html body:has(>main#app) .ach .d{-webkit-line-clamp:3;line-clamp:3}

/* ---------- [17] touch: «Открытые / Все» tabs were 28px tall — 36px; «Пожаловаться на плащ» (19px) gets a ~40px hit area through padding
   cancelled by a negative margin (no layout change) ---------- */
@media (pointer:coarse){
  html body:has(>main#app) .seg button{padding:9px 13px}
  html body:has(>main#app) .cape-rep button.lnk{padding:10px 4px;margin:-10px -4px}
}

/* ======================================================================================================================
   auth pages: /login, /register, /reset*, /verify-email, /email-confirm, 404, /onboarding
   ====================================================================================================================== */

/* ---------- [12] phones: the four reset steps switched to a wrapping row — 1 | 2 | 3 4 at 360px, 2 + 2 at 390. A 2×2 grid instead; the list
   gets 5px on the left so the active step's ring (box-shadow 5px) stays inside the text edge. ---------- */
@media (max-width:640px){
  html body.nc>main.au>.au-intro .au-steps{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding-left:5px}
  html body.nc>main.au>.au-intro .au-steps li{min-width:0}
}

/* ---------- [13] mono leftovers inside light cards (strength label «пусто / введи пароль / очень надёжный», the «ИЛИ» divider, the e-mail in
   the mailbox chip, the resend timer) — the page sans. The «ШАГ 1 ИЗ 4» kickers stay (site eyebrow style). ---------- */
html body:has(#authForm) #strength-label{font-family:Onest,system-ui,sans-serif!important;letter-spacing:normal!important}
html body:has(#authForm) #authForm>div>span[style*="JetBrains"]{font-family:Onest,system-ui,sans-serif!important;font-weight:800;letter-spacing:.12em!important}
html body.nc>main.au :is(.au-meter .lb,.au-mailbox b,.au-timer){font-family:var(--f,Onest,system-ui,sans-serif);letter-spacing:normal;font-variant-numeric:tabular-nums}
/* register: «· необязательно» was an inline #8A909C (2.8:1 on the light page) */
html body:has(#authForm) #ref-field>span>span[style*="8A909C" i]{color:var(--mut)!important}

/* ---------- [21] /reset/sent opened without ?email=: the resend button is hidden, but its empty timer line (18px + margins) stayed — a ~70px
   gap above «Что-то не так?». The timer goes with the hidden button (when the button shows, the timer keeps its space). ---------- */
html body.nc>main.au #rs-resend[hidden]+.au-timer:empty{display:none}

/* ---------- [20] 404: the middle «0» was amber/orange (#FFB833 / #C77F0C), outside the site palette — a lighter blue block between the two
   blue «4»s, same pixel shading. (The grey «нажми Space» hint gets its contrast from the token mapping in [1]: 2.8 → 4.8:1.) ---------- */
html body.nc:has(>main.nf) .nf-px svg:nth-child(2) path:nth-child(1){fill:#6B9BFF}
html body.nc:has(>main.nf) .nf-px svg:nth-child(2) path:nth-child(2){fill:#A9C4FF}
html body.nc:has(>main.nf) .nf-px svg:nth-child(2) path:nth-child(3){fill:#2E6CF6}

/* ---------- [17] touch: tap targets of 17–21px («Забыл пароль?», «Зарегистрироваться», «Есть код друга или промокод?», the reset/verify card
   footer links). The hit area grows to ~40px through padding cancelled by a negative margin — the layout does not move. ---------- */
@media (pointer:coarse){
  html body:has(#authForm) a.only-login[href="/reset"]{padding-top:11px;padding-bottom:11px;margin-top:-11px;margin-bottom:-11px}
  html body:has(#authForm) :is(#switch-btn,#ref-open){padding:11px 6px!important;margin:-11px -6px}
  html body.nc>main.au .au-foot a{padding:10px 4px;margin:-10px -4px}
}

/* ---------- [7] logged in, /404x /verify-email /onboarding: the bell + avatar chip made the header row wider than the 1200px column
   (fit-content grew to 1286px: logo at x=64 instead of 83, «Скачать» to 1302). The menu links get a little less padding instead
   (12 → 8px), as site2 already does at 1101–1180px, so the row keeps the page column. ---------- */
@media (min-width:1181px){
  html.nc-in body.nc:is(:has(>main.au),:has(>main.ec),:has(>main.nf),:has(#ob-list)) header.nc-top .nlx-bar .nlx-a.nlx-a{padding-left:8px!important;padding-right:8px!important}
}

/* ---------- [8] /onboarding was still in the old cabinet style: a plain H1 on grey under a 12px grey mono eyebrow (2.8:1). Its head becomes
   the sky tile every other page opens with: white text, the action under the text (white primary «Создать аккаунт» / «В кабинет»,
   glass «Пропустить»), a grass island on the right. The minimal .nc-foot had a 1340px inner box (x 37–1329 at 1366) that lined up
   with nothing — it takes the 1200px page column of the header and the other footers.
   (The «stray second </main>» of the audit is not in the served file — one <main>, one </main>.) ---------- */
html body.nc:has(#ob-list) main.ns-wrap>.nc-head{
  position:relative;isolation:isolate;overflow:hidden;flex-direction:column;align-items:flex-start;gap:18px;padding:44px 40px;
  border-radius:30px;color:#fff;margin-bottom:6px;
  background:radial-gradient(70% 60% at 78% 8%,var(--s2-glow) 0%,rgba(255,255,255,0) 62%),var(--s2-sky);box-shadow:var(--s2-tile-sh)}
html body.nc:has(#ob-list) main.ns-wrap>.nc-head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--s2-pix);background-size:64px 64px;image-rendering:pixelated;opacity:.6}
html body.nc:has(#ob-list) main.ns-wrap>.nc-head::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(/assets/home2/isl-grass.v1.webp) no-repeat right 40px center/100px auto}
html body.nc:has(#ob-list) main.ns-wrap>.nc-head>.l{flex:none;max-width:calc(100% - 150px)}
html body.nc:has(#ob-list) main.ns-wrap>.nc-head h1{color:#fff;text-shadow:0 4px 0 rgba(8,22,64,.22)}
html body.nc:has(#ob-list) main.ns-wrap>.nc-head p{color:rgba(255,255,255,.92)}
html body.nc:has(#ob-list) main.ns-wrap>.nc-head .nc-kicker{color:rgba(255,255,255,.88)!important;background:transparent}
html body.nc:has(#ob-list) main.ns-wrap>.nc-head .acts .nc-btn:not(.ghost){
  background:#fff!important;color:#1A3EA6!important;border:0!important;border-radius:15px!important;box-shadow:0 4px 0 rgba(8,22,64,.3)!important;font-weight:800}
html body.nc:has(#ob-list) main.ns-wrap>.nc-head .acts .nc-btn:not(.ghost):hover{background:#EAF1FE!important}
html body.nc:has(#ob-list) main.ns-wrap>.nc-head .acts .nc-btn.ghost{background:rgba(10,30,90,.22)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.4)!important;border-radius:15px!important;box-shadow:none!important;font-weight:800}
html body.nc:has(#ob-list) main.ns-wrap>.nc-head .acts .nc-btn.ghost:hover{background:rgba(10,30,90,.34)!important}
@media (max-width:860px){
  html body.nc:has(#ob-list) main.ns-wrap>.nc-head{padding:30px 22px;border-radius:26px}
  html body.nc:has(#ob-list) main.ns-wrap>.nc-head::after{display:none}
  html body.nc:has(#ob-list) main.ns-wrap>.nc-head>.l{max-width:none}
}
@media (max-width:600px){
  html body.nc:has(#ob-list) main.ns-wrap>.nc-head>.acts{width:100%}
}
html body.nc:has(#ob-list)>footer.nc-foot>div{max-width:1248px;box-sizing:border-box}

/* ---------- [14] the round support button (52px, fixed at right/bottom 25px below 1680px — supportchat.v3.js) sat on the last footer link
   («Поддержка» in .o-foot, «Скачать лаунчер» in /onboarding's .nc-foot) once the page is scrolled to the end, where it can never move
   away. Same treatment as the home page footer: room on the right while the circle reaches into the column (≤1369px: the column ends
   at (100vw + 1200)/2), room below on phones. /invite and /profile are included for when they load the widget (auth-misc.md [15]). ---------- */
@media (min-width:641px) and (max-width:1369px){
  html body:is(.nc:has(>main.au),.nc:has(>main.ec),.nc:has(>main.nf),:has(#authForm),:has(#inv-title),:has(>main#app))>footer.o-foot .o-foot-bot,
  html body.nc:has(#ob-list)>footer.nc-foot>div{padding-right:84px}
}
@media (max-width:640px){
  html body:is(.nc:has(>main.au),.nc:has(>main.ec),.nc:has(>main.nf),:has(#authForm),:has(#inv-title),:has(>main#app))>footer.o-foot .o-foot-bot,
  html body.nc:has(#ob-list)>footer.nc-foot>div{padding-bottom:96px}
}

/* ---------- [22] footer. Phones: «Свой сервер» was left alone on its own row under «Играть | Персонаж», and «Поддержка» alone on the last line —
   the last column spans both columns with its links in two, the bottom links sit in a 2-column grid (as on the home page); the footer
   gutter follows the page's 16px (was 12). Desktop: on /invite and /profile the footer started at x=83 while their header and content
   start at 87 (header.top nav and main.wrap are 1240px with 24px padding) — the footer takes the same box. ---------- */
@media (max-width:640px){
  html body:is(.nc:has(>main.au),.nc:has(>main.ec),.nc:has(>main.nf),:has(#authForm),:has(#inv-title),:has(>main#app))>footer.o-foot{padding-left:16px;padding-right:16px}
  html body:is(.nc:has(>main.au),.nc:has(>main.ec),.nc:has(>main.nf),:has(#authForm),:has(#inv-title),:has(>main#app))>footer.o-foot .o-foot-grid>div:last-child{
    grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
  html body:is(.nc:has(>main.au),.nc:has(>main.ec),.nc:has(>main.nf),:has(#authForm),:has(#inv-title),:has(>main#app))>footer.o-foot .o-foot-grid>div:last-child h3{
    grid-column:1/-1;margin-bottom:0}
  html body:is(.nc:has(>main.au),.nc:has(>main.ec),.nc:has(>main.nf),:has(#authForm),:has(#inv-title),:has(>main#app))>footer.o-foot .o-foot-bot span:last-child{
    display:grid;grid-template-columns:auto auto;justify-content:start;gap:10px 24px}
}
@media (min-width:641px){
  html body:is(:has(#inv-title),:has(>main#app))>footer.o-foot{max-width:1240px;padding-left:24px;padding-right:24px}
}


/* ======================== v8: cabinet — кабинет: рамка, меню, карточки, вкладки ======================== */
/* ===== /cabinet and the 13 /cabinet/* pages — display fixes (site5 audit, family «cabinet», 2026-10-13).
   Scope: only pages with the cabinet sidebar — body.nc:has(>.nc-wrap>aside.nc-side) (the 14 cabinet pages; /404, /help, /reset*,
   /onboarding, /email-confirm, /verify-email are also body.nc but have no .nc-wrap/.nc-side). /cabinet/cases shares #shelf with /cases and
   /cabinet/plus shares .px-* with /plus: rules for those use the same cabinet scope, so the public pages are untouched.
   Numbers in brackets = index in findings-cabinet.json. ===== */

/* ---------- [0] dark theme: the cabinet still used the old graphite tokens (cards #14151C, inner panels #1B1D26, page #0B0B0F,
   strip/header rgba(11,11,15,.96)) on the navy page. settings.v3.css, partner.v1.css and cases.v9.css re-declare the same tokens
   on :root, so they are mapped on body (closer than :root, wins for every page). ---------- */
html[data-theme="dark"] body.nc:has(>.nc-wrap>aside.nc-side){
  --bg:var(--s2-bg);--panel:var(--s2-card);--panel2:var(--s2-soft);--panel3:#151E36;
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--mut2:#7A86AB;
  --bd:var(--s2-line);--bd2:#2E3B60;--bd3:#3B4A74;
  --inv:var(--s2-text);--inv-tx:#0A0F1E;
  --top-bg:color-mix(in srgb,var(--s2-bg) 96%,transparent);
  --sk1:#18213B;--sk2:#202B4A}
html:has(>body.nc>.nc-wrap>aside.nc-side){background-color:var(--s2-bg)!important}
/* the same graphite leftovers outside the tokens: the active segment of .nc-tabs (cab.v3: #2B2E3B) and the notifications feed, whose
   e2-shell tokens live on .nld[data-t=dark] itself (the bell drawer and the inline feed of /cabinet/notifications). */
html[data-theme="dark"] body.nc:has(>.nc-wrap>aside.nc-side) .nc-tabs :is(.on,[aria-selected="true"]){background:#27345C}
html body.nc:has(>.nc-wrap>aside.nc-side) .nld[data-t=dark]{
  --n-bg:var(--s2-bg);--n-panel:var(--s2-card);--n-panel2:var(--s2-soft);--n-hover:var(--s2-soft);
  --n-ink:var(--s2-text);--n-ink2:var(--s2-text2);--n-mut:var(--s2-mute);--n-bd:var(--s2-line);--n-bd2:#2E3B60}
html body.nc:has(>.nc-wrap>aside.nc-side) .nld[data-t=dark] .nld-tab:is(.on,[aria-selected="true"]){background:#27345C}
html body.nc:has(>.nc-wrap>aside.nc-side) .nld:not([data-t=dark]){--n-ink:var(--s2-text);--n-ink2:var(--s2-text2);--n-mut:var(--s2-mute);--n-panel2:var(--s2-soft);--n-hover:var(--s2-soft)}

/* ---------- [14] light theme: the cabinet's ink and muted greys were the old e2 ones — --mut #8A909C is 2.75:1 on the #E9EEF7 page and
   3.2:1 on white for 10.5–12.5px text (kickers «КАБИНЕТ · …», «Так увидят другие», «0 / 280», «всегда», the app-version line), --ink was
   near-black #0B0B0F. Map them to the site tokens (navy ink, #5D6880 muted = 4.9:1 on the page, 5.9:1 on white). The strip/sticky
   backgrounds take the page colour (#F6F7F9 → #E9EEF7), the dark button/toast ink becomes navy instead of black. ---------- */
html:not([data-theme="dark"]) body.nc:has(>.nc-wrap>aside.nc-side){
  --bg:var(--s2-bg);--panel2:var(--s2-soft);
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--mut2:#68728C;
  --bd:rgba(20,32,61,.09);--bd2:rgba(20,32,61,.15);--bd3:rgba(20,32,61,.24);
  --inv:var(--s2-text);
  --top-bg:color-mix(in srgb,var(--s2-bg) 96%,transparent)}

/* ---------- [1] desktop sidebar on short screens: .nc-side is sticky with max-height:calc(100vh - 100px) and a hidden scrollbar, but its
   content is 867–911px (955px for authors) — at 1366×657 the list ended at «Достижения», at 1366×900 «Выйти» was cut in half, at 1920×937 the
   launcher card; the active item of rewards/gifts/cases/notifications/partner/plus was off-screen with nothing showing that the list scrolls.
   ≤1059px tall: a denser list (rows 42 → 36px, slimmer cards) that fits a ≥900px window as a sticky column;
   ≤899px tall (≤959px with the 901–1100px layout, whose player card is taller): the sidebar is a normal column that scrolls with the page —
   every row reachable, nothing clipped. ---------- */
@media (min-width:901px) and (max-height:1059.98px){
  html body.nc:has(>.nc-wrap>aside.nc-side) .nc-wrap>aside.nc-side{gap:10px;top:80px;max-height:calc(100vh - 92px)}
  html body.nc:has(>.nc-wrap>aside.nc-side) .nc-side>.nc-me{padding:10px 12px}
  html body.nc:has(>.nc-wrap>aside.nc-side) .nc-side>.nc-nav{padding:6px;gap:1px}
  html body.nc:has(>.nc-wrap>aside.nc-side) .nc-side>.nc-nav a{padding-top:3px;padding-bottom:3px}
  html body.nc:has(>.nc-wrap>aside.nc-side) .nc-side>.nc-nav .hr{margin:4px 10px}
  html body.nc:has(>.nc-wrap>aside.nc-side) .nc-side>.nc-side-app{padding:10px 14px}
}
@media (min-width:901px) and (max-height:899.98px),(min-width:901px) and (max-width:1100px) and (max-height:959.98px){
  html body.nc:has(>.nc-wrap>aside.nc-side) .nc-wrap>aside.nc-side{position:relative;top:auto;max-height:none;overflow:visible}
}

/* ---------- [3] light theme: near-black #0B1220 blocks left on the overview tabs — Хостинг: the first stat tile and the «Как это работает»
   band; Скины: «Слои модели» (inline style) and the 3D stage (Spawn scene gradient #1B2C6B→#0B1220, set inline by cabinet.html's JS — the
   Nether/End scenes keep their own colours because the selector only matches the Spawn value). Same navy «deep» tile as .cb-stat.hi.
   In dark #0B1220 was the page colour itself (the band vanished) — the deep tile reads there too. ---------- */
html body.nc:has(>.nc-wrap>aside.nc-side) #panel-hosting :is(.hs-stat:first-child,.hs-card.dark),
html body.nc:has(>.nc-wrap>aside.nc-side) #panel-skins div[style*="background:#0B1220" i]{background:var(--s2-deep)!important;box-shadow:var(--s2-tile-sh)}
html body.nc:has(>.nc-wrap>aside.nc-side) #panel-hosting .hs-stat:first-child .l,
html body.nc:has(>.nc-wrap>aside.nc-side) #panel-hosting .hs-card.dark .hs-mono{color:#C9D6F5}
html body.nc:has(>.nc-wrap>aside.nc-side) #panel-hosting .hs-btn.dark{background:var(--s2-acc);border-color:var(--s2-acc);color:#fff}
html body.nc:has(>.nc-wrap>aside.nc-side) #panel-hosting .hs-btn.dark:hover{background:var(--s2-acc-d);border-color:var(--s2-acc-d)}
html body.nc:has(>.nc-wrap>aside.nc-side) #panel-skins #stage:is([style*="#1B2C6B" i],[style*="rgb(27, 44, 107)"]){background:linear-gradient(170deg,#2A4A9A 0%,#13224D 72%)!important}
html body.nc:has(>.nc-wrap>aside.nc-side) #panel-skins #activeName{background:rgba(14,26,61,.78)!important}

/* ---------- [22] overview → Скины, «Мой скин» tile of a player without an uploaded skin: an orange→red square (#FF7A18→#E02200, old accent,
   reads as a broken image). Neutral tile with the default Steve face; the JS sets an inline background-image once a skin exists. ---------- */
html body.nc:has(>.nc-wrap>aside.nc-side) #panel-skins .lib-face{background:var(--panel2) url(/assets/plusx/head-steve.v1.png) center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--bd)}

/* ---------- [4] tablets/phones (≤900px): .nc-wrap is a grid stretched by flex:1 in the body column, and align-content:normal stretched both
   rows — the sticky menu strip's row grew to 228px on short pages (/cabinet/screenshots at 768: breadcrumb at y=306 instead of ~150).
   Rows take their content height; the wrapper itself still grows, so the footer stays at the bottom. ---------- */
@media (max-width:900px){
  html body.nc:has(>.nc-wrap>aside.nc-side)>.nc-wrap{align-content:start}
}

/* ---------- [7][17] «Мой профиль →» under the nick: no own colour, so each page's a{} won — black on settings (a{color:inherit}), #2E6CF6 on
   rewards/gifts/partner, #1E56D4 elsewhere; in the 240px sidebar (901–1100px) the arrow wrapped onto its own line next to the coin chip. ---------- */
html body.nc:has(>.nc-wrap>aside.nc-side) .nc-me .who a{color:var(--s2-acc-text)!important;white-space:nowrap}
html body.nc:has(>.nc-wrap>aside.nc-side) .nc-me .who a:hover{color:var(--s2-acc)!important}
/* 901–1100px (240px sidebar): nick + link and the NLcoin chip do not fit one row — the chip goes under the link */
@media (min-width:901px) and (max-width:1100px){
  html body.nc:has(>.nc-wrap>aside.nc-side) .nc-side>.nc-me{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:center}
  html body.nc:has(>.nc-wrap>aside.nc-side) .nc-side>.nc-me>.av{grid-row:1/3;align-self:center}
  html body.nc:has(>.nc-wrap>aside.nc-side) .nc-side>.nc-me>.coin{grid-column:2;justify-self:start}
}

/* ---------- [8] the round support button (52px, fixed at right/bottom 25px below 1680px — supportchat.v3.js) sat on «Скачать лаунчер», the last
   footer link, at the end of every cabinet page up to ~1450px (the 1340px footer row ends 24px from the edge there). Room on the right on
   desktop; on phones/tablets the links wrap under the copyright, so room below. ---------- */
@media (min-width:901px) and (max-width:1459.98px){
  html body.nc:has(>.nc-wrap>aside.nc-side)>footer.nc-foot>div{padding-right:88px}
}
@media (max-width:900px){
  html body.nc:has(>.nc-wrap>aside.nc-side)>footer.nc-foot>div{padding-bottom:88px}
}

/* ---------- [9] settings on phones/tablets: three sticky bars — header (62px), the cabinet chip strip (58→117) and the settings section strip
   (top:124px, 61px): 185px of an 844px screen, with a 7px slit between the strips where cards showed through. On this page the cabinet strip
   scrolls away and the section strip sticks right under the header. ---------- */
@media (max-width:900px){
  html body.nc:has(>.nc-wrap>aside.nc-side):has(aside.snav)>.nc-wrap>aside.nc-side{position:relative;top:auto}
  html body.nc:has(>.nc-wrap>aside.nc-side) aside.snav{top:58px}
}

/* ---------- [13] overview: the 2×2 stat tiles were stretched to the profile/skin card next to them (grid-auto-rows:1fr) — ~255px tall each
   with a 30px number on top, a small label at the bottom and ~200px of nothing. Beside the card (>900px) they become one column of four
   ~121px tiles, the same height in total, like the Хостинг tiles. ---------- */
@media (min-width:901px){
  html body.nc:has(>.nc-wrap>aside.nc-side) .cb-ov:not(.nohero)>.cb-stats{grid-template-columns:minmax(0,1fr)}
}

/* ---------- [5] /cabinet/gifts, «Подарить открытие кейса»: 7 cases in an auto-fill grid (min 210px) left «Кейс «Космос»» alone in the last row
   of the 3-column layout (768, 1024) with two empty cells. The lone last card spans the row as a wide card (art | text | price + button).
   Column counts come from the grid width (container query): 2 cols 432–653px, 3 cols 654–875px, 4 cols 876–1097px. ---------- */
html body.nc:has(>.nc-wrap>aside.nc-side) .gf-cases{container:gfcases/inline-size}
@container gfcases (min-width:432px) and (max-width:653.98px){
  html body.nc:has(>.nc-wrap>aside.nc-side) .gf-cases>.gf-case:last-child:nth-child(2n+1){grid-column:1/-1;display:grid;grid-template-columns:150px minmax(0,1fr) auto;
    grid-template-rows:auto 1fr;column-gap:16px;row-gap:4px;align-items:start}
}
@container gfcases (min-width:654px) and (max-width:875.98px){
  html body.nc:has(>.nc-wrap>aside.nc-side) .gf-cases>.gf-case:last-child:nth-child(3n+1){grid-column:1/-1;display:grid;grid-template-columns:200px minmax(0,1fr) auto;
    grid-template-rows:auto 1fr;column-gap:20px;row-gap:4px;align-items:start}
}
@container gfcases (min-width:876px) and (max-width:1097.98px){
  html body.nc:has(>.nc-wrap>aside.nc-side) .gf-cases>.gf-case:last-child:nth-child(4n+1){grid-column:1/-1;display:grid;grid-template-columns:210px minmax(0,1fr) auto;
    grid-template-rows:auto 1fr;column-gap:20px;row-gap:4px;align-items:start}
}
@container gfcases (min-width:432px) and (max-width:1097.98px){
  html body.nc:has(>.nc-wrap>aside.nc-side) .gf-cases>.gf-case:last-child:is(:nth-child(2n+1),:nth-child(3n+1),:nth-child(4n+1))>.art{grid-row:1/3}
  html body.nc:has(>.nc-wrap>aside.nc-side) .gf-cases>.gf-case:last-child:is(:nth-child(2n+1),:nth-child(3n+1),:nth-child(4n+1))>b{grid-column:2;align-self:end}
  html body.nc:has(>.nc-wrap>aside.nc-side) .gf-cases>.gf-case:last-child:is(:nth-child(2n+1),:nth-child(3n+1),:nth-child(4n+1))>.d{grid-column:2;min-height:0}
  html body.nc:has(>.nc-wrap>aside.nc-side) .gf-cases>.gf-case:last-child:is(:nth-child(2n+1),:nth-child(3n+1),:nth-child(4n+1))>.f{grid-column:3;grid-row:1/3;
    align-self:center;flex-direction:column;align-items:flex-end;gap:10px;margin:0}
}

/* ---------- [6] /cabinet/gifts accents outside the palette: every «Подарить» / «Открыть» button was hot pink #E0479A, the section icons were a
   violet (#8B5CF6→#6D28D9) and a pink gradient, the case art had a pink glow. Primary actions in the brand blue like the rest of the cabinet,
   section icons as the blue tiles, the glow in blue. ---------- */
html body.nc:has(>.nc-wrap>aside.nc-side) .gf-btn.pink{background:var(--s2-acc)}
html body.nc:has(>.nc-wrap>aside.nc-side) .gf-btn.pink:hover{background:var(--s2-acc-d)}
html body.nc:has(>.nc-wrap>aside.nc-side) .gf-card-head .ico:is([style*="#8B5CF6" i],[style*="#FF72B6" i],[style*="rgb(139, 92, 246)"],[style*="rgb(255, 114, 182)"]){
  background:linear-gradient(150deg,#5B8EFF,#2E6CF6)!important}
html body.nc:has(>.nc-wrap>aside.nc-side) .gf-case .art{background:radial-gradient(circle at 50% 60%,rgba(46,108,246,.16),transparent 70%),var(--panel)}

/* ---------- [15] /cabinet/settings: the default cover of the preview card was blue→violet (#2E6CF6→#8B5CF6). The site's sky gradient instead;
   a cover picture or the player's own colours are set inline by settings.v7.js and still win. ---------- */
html body.nc:has(>.nc-wrap>aside.nc-side) #pvCover{background:var(--s2-sky)}

/* ---------- [16] page titles: 40px on most cabinet pages, but 36px on settings, 42px on rewards and gifts, 56px on cases. One size
   (the .nc-head h1 of the shared frame) for all of them. ---------- */
html body.nc:has(>.nc-wrap>aside.nc-side) .nc-main>:is(.phead,.rw-head,.gf-head,section.head) h1{font-size:clamp(28px,3.2vw,40px);line-height:1.05;letter-spacing:-.045em}
/* the «КАБИНЕТ · …» kicker of rewards and gifts was --ink2 (darker than on the other pages) */
html body.nc:has(>.nc-wrap>aside.nc-side) .nc-main :is(.rw-kicker,.gf-kicker),
html body.nc:has(>.nc-wrap>aside.nc-side) .nc-main :is(.rw-kicker,.gf-kicker) a{color:var(--mut)}
html body.nc:has(>.nc-wrap>aside.nc-side) .nc-main :is(.rw-kicker,.gf-kicker) a:hover{color:var(--ac)}

/* ---------- [23] /cabinet/partner, dark: partner.v1.css re-declares the accent as #5B8CFF, so the shared sidebar (active row, «Скачать») and the
   page buttons were a lighter blue than on the other 13 cabinet pages (#4C82FF). Same accent as the rest. ---------- */
html[data-theme="dark"] body.nc:has(>.nc-wrap>aside.nc-side):has(>.nc-wrap>main.pt-content){
  --ac:#4C82FF;--ac2:#6A98FF;--ac-soft:rgba(76,130,255,.15);--ac-ink:#9DBBFF;--bar:#4C82FF}

/* ---------- [11] /cabinet/partner for non-authors: the 7 section tabs stayed above the «Кабинет открыт только авторам» gate and led nowhere;
   the two gate buttons are inline-flex on the baseline, so the one with an icon sat 4px higher, with a 3px gap. ---------- */
html body.nc:has(>.nc-wrap>aside.nc-side) main.pt-content:has(>#root>.pt-gate)>.pt-jumps{display:none}
html body.nc:has(>.nc-wrap>aside.nc-side) .pt-gate>.pt-btn{vertical-align:middle;margin:5px 4px}
/* the gate's megaphone tile was pink (--pink-soft / --pink) — the blue soft tile of the cabinet */
html body.nc:has(>.nc-wrap>aside.nc-side) .pt-gate>.ico{background:var(--ac-soft);color:var(--ac)}

/* ---------- [10] /cabinet/partner, 901–1440px: the 7 section tabs (926px of items) wrapped and «Вебхуки» sat alone on a second row (98px strip).
   Tighter tabs fit one row down to ~1240px; with the narrower sidebar (≤1100px) the icons go and the labels still fit one row. ---------- */
@media (min-width:901px) and (max-width:1440px){
  html body.nc:has(>.nc-wrap>aside.nc-side) .pt-jumps{gap:2px}
  html body.nc:has(>.nc-wrap>aside.nc-side) .pt-jumps a{padding:7px 9px 7px 6px;gap:6px;font-size:13px}
}
@media (min-width:901px) and (max-width:1239.98px){
  html body.nc:has(>.nc-wrap>aside.nc-side) .pt-jumps a{padding:8px 11px}
  html body.nc:has(>.nc-wrap>aside.nc-side) .pt-jumps a .ic{display:none}
}

/* ---------- [20] phones/tablets: one-line scrollers with a hidden scrollbar were cut flat at the edge, mid-word («Не нача…»): the settings
   sections, the author-cabinet sections and the cabinet menu strip get a fade at the right edge and an end spacer, so the last item can scroll
   clear of it; the 4 achievement filters share the width instead of scrolling. ---------- */
@media (max-width:900px){
  html body.nc:has(>.nc-wrap>aside.nc-side) :is(.nc-side>.nc-nav,aside.snav>#snav.list,main.pt-content>.pt-jumps){
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  html body.nc:has(>.nc-wrap>aside.nc-side) :is(.nc-side>.nc-nav,aside.snav>#snav.list,main.pt-content>.pt-jumps)::after{content:"";flex:0 0 22px}
}
@media (max-width:600px){
  html body.nc:has(>.nc-wrap>aside.nc-side):has(#ah-public) .nc-main>.nc-tabs{display:flex;width:100%;gap:2px}
  html body.nc:has(>.nc-wrap>aside.nc-side):has(#ah-public) .nc-main>.nc-tabs>:is(button,a){flex:1 1 auto;justify-content:center;padding:8px 6px;font-size:13px}
}

/* ---------- [12] /cabinet/plus for non-subscribers: «Эмоция месяца» is stretched to the «Значок NL» card beside it (547px) while its content
   ends at ~240px — ~300px of blank card. The empty-state promo (gift + text) fills the rest as a soft panel, centred. ---------- */
html body.nc:has(>.nc-wrap>aside.nc-side) .px-cab #gift>.px-gm.empty{flex:1 1 auto;align-content:center;margin-top:8px;padding:22px;border-radius:20px;background:var(--panel2)}

/* ---------- [24] /cabinet/plus, not subscribed: the membership card got filter:saturate(.25) brightness(.92) — the navy gradient rendered as
   charcoal #1F222C, an old graphite block on the light page. Dimmed but still navy: no desaturation, slightly transparent, gold mark muted. ---------- */
html body.nc:has(>.nc-wrap>aside.nc-side) .px-cab .px-acct:is([data-state="guest"],[data-state="off"]) .px-mcard{filter:none;opacity:.9}
html body.nc:has(>.nc-wrap>aside.nc-side) .px-cab .px-acct:is([data-state="guest"],[data-state="off"]) .px-mcard .pix{filter:saturate(.35);opacity:.75}

/* ---------- [18] /cabinet/plus on phones: «✓ Надеть · PLUS» wrapped to two lines (146×60) in the 146px info column beside the cape — below
   420px the cape and its info stack (as at 761–1100px); the rarity · BPM meta under the item names was cut («Мифическая · 160…»): it may take
   two lines, breaking before the BPM. ---------- */
@media (max-width:420px){
  html body.nc:has(>.nc-wrap>aside.nc-side) .px-cab .px-capes{grid-template-columns:minmax(0,1fr);justify-items:center}
  html body.nc:has(>.nc-wrap>aside.nc-side) .px-cab .cp-info{align-items:center;text-align:center}
  html body.nc:has(>.nc-wrap>aside.nc-side) .px-cab .cp-btn{align-self:center;white-space:nowrap}
}
@media (max-width:520px){
  html body.nc:has(>.nc-wrap>aside.nc-side) .px-cab .px-card .inf span.m{white-space:normal;line-height:1.35}
  html body.nc:has(>.nc-wrap>aside.nc-side) .px-cab .px-card .inf span.m .mono{white-space:nowrap}
}

/* ---------- [19] small tap targets on touch screens: the badge colour swatches (26×26, 6px apart) and the settings «Скопировать ник» (28×28).
   Swatches share one row of up to 40px squares; the copy button gets a 40px hit area without moving its neighbours. ---------- */
@media (pointer:coarse){
  html body.nc:has(>.nc-wrap>aside.nc-side) .px-cab .nl-colors{display:grid;grid-template-columns:repeat(8,minmax(0,40px));gap:7px}
  html body.nc:has(>.nc-wrap>aside.nc-side) .px-cab .nl-colors button{width:auto;height:auto;aspect-ratio:1;border-radius:9px}
  html body.nc:has(>.nc-wrap>aside.nc-side):has(aside.snav) button.cp{width:40px;height:40px;margin:-6px}
}


/* ======================== v8: community — сборки игроков, /b/, авторы, партнёры, сообщество ======================== */
/* ===== community family — /builds, /en/builds, /b/<code> (found + not-found), /authors, /en/authors, /authors/webhooks,
   /partners, /community — display fixes (site5 audit, family «community», 2026-10-13). Numbers in brackets = index in
   findings-community.json. Appended to site2.vN.css (loaded last on every page except home).
   Page scopes (each marker exists only on its page):
     /builds, /en/builds          body:has(>main.bw)
     /b/<code>                    body:has(>main>section.bhero)         (shared_builds_page.rs, found page)
     /b/<code> not found / error  body:has(>div.state)                  (same renderer, 404/410/429/503 shells)
     /authors, /en/authors        body:has(>main.wrap.au:not(.wh))      (.au-* classes also exist on /login → never unscoped)
     /authors/webhooks (+ /en/)   body:has(>main.wrap.au.wh)
     /partners                    body:has(#pgrid)
     /community                   body:has(#composer)
   NOTE: /b pages still load site2.v4.css (see community.md [0]); the /b rules below reach them only after the renderer
   links the current site2 file. They were tested both on the live /b markup and with the current assets swapped in. ===== */

/* ---------- [1][13][4] header of the nc-top pages. /b: the mobile «Скачать» circle is 40px wide but site2 gives it padding 12px 20px, so with
   border-box the arrow icon is squeezed to 0px (an empty blue circle). /builds has no border-box reset: the header row is 72px instead of 66,
   the «Войти» chip 48px tall, the mobile «Скачать» an 80px pill, and the burger panel 384+padding px wide (cut off at the right on phones). ---------- */
html body:has(>main.bw) header.nc-top,html body:has(>main.bw) header.nc-top *,
html body:has(>main.bw) .nlx-mp,html body:has(>main.bw) .nlx-mp *,html body:has(>main.bw) .nlx-mp *::before,html body:has(>main.bw) .nlx-mp *::after{box-sizing:border-box}
@media (max-width:900px){
  html body:is(:has(>main.bw),:has(>main>section.bhero),:has(>div.state),:has(#pgrid),:has(#composer)) header.nc-top .nc-btn-dl{
    width:40px!important;height:40px!important;padding:0!important;justify-content:center!important;box-sizing:border-box}
  html body:is(:has(>main.bw),:has(>main>section.bhero),:has(>div.state),:has(#pgrid),:has(#composer)) header.nc-top .nc-btn-dl svg{flex:none;width:16px;height:16px}
}

/* ======================================================================================================================
   /builds, /en/builds   (scope body:has(>main.bw))
   ====================================================================================================================== */

/* ---------- [6] palette: cab.v3 tokens — graphite cards #14151C / chips #1B1D26 in dark on the navy page, near-black ink in light.
   Mapped to the site («Острова») tokens, as on /servers and /wardrobe. Inputs get the darker well #0E1630. ---------- */
html:not([data-theme="dark"]) body:has(>main.bw){
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--bd:rgba(20,32,61,.09);--bd2:rgba(20,32,61,.15)}
html[data-theme="dark"] body:has(>main.bw){
  --bg:var(--s2-bg);--panel:var(--s2-card);--panel2:var(--s2-soft);--panel3:var(--s2-soft);
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);
  --bd:var(--s2-line);--bd2:#2E3B60;--bd3:#3A4874;--top-bg:rgba(10,15,30,.96)}
html[data-theme="dark"] body:has(>main.bw) main.bw :is(input.q,select.sel){background:#0E1630}

/* ---------- [2] hero steps: the step cards sit on the light bottom of the sky tile — white text 1.8–2.1:1, mint numbers 1.6:1, and the
   «Моих серверах» link (inline color #93B8FF) ~1.0:1, invisible. Light theme: white cards with navy text, like the light panels inside
   other hero tiles. Dark theme keeps the glass cards (readable there); the link becomes white and underlined in both. ---------- */
html:not([data-theme="dark"]) body:has(>main.bw) .bh>ul>li{background:rgba(255,255,255,.94);color:var(--s2-text2);box-shadow:0 6px 18px -10px rgba(14,26,61,.35)}
html:not([data-theme="dark"]) body:has(>main.bw) .bh>ul>li b{color:var(--s2-text)}
html:not([data-theme="dark"]) body:has(>main.bw) .bh>ul>li span.n{background:#EAF1FE;color:#1E56D4}
html:not([data-theme="dark"]) body:has(>main.bw) .bh>ul>li a{color:#1E56D4!important;font-weight:700;text-decoration:underline;text-underline-offset:2px}
html[data-theme="dark"] body:has(>main.bw) .bh>ul>li a{color:#fff!important;font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ---------- [9] active tab «Все» was a near-black pill (--ink) next to the white active sort chip: the site blue in both themes
   (#2E6CF6 with white is 4.6:1; the dark --s2-acc #4C82FF would be 3.5:1) ---------- */
html body:has(>main.bw) #tabs.tabs>button[aria-selected="true"]{background:#2E6CF6;color:#fff}

/* ---------- [20] phones: the tab labels wrapped to two lines inside the pill bar — one row that scrolls sideways instead.
   The three «how to publish» steps (they describe the desktop launcher) filled the whole first screen, so no build was visible:
   hidden below 640px; the hero keeps its text and both buttons. ---------- */
@media (max-width:560px){
  html body:has(>main.bw) #tabs.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html body:has(>main.bw) #tabs.tabs::-webkit-scrollbar{display:none}
  html body:has(>main.bw) #tabs.tabs>button{flex:none;white-space:nowrap;padding:9px 12px}
}
@media (max-width:400px){
  html body:has(>main.bw) #tabs.tabs{gap:2px}
  html body:has(>main.bw) #tabs.tabs>button{padding:8px 8px;font-size:12.5px}
}
@media (max-width:640px){html body:has(>main.bw) .bh>ul{display:none}}

/* ---------- [27] covers without a picture got a random hue from the build name (magenta, olive, brick red — outside the palette). Until
   builds.v*.js picks from the palette (community.md [27]), the inline gradient is replaced by the site's three blue tiles in turn. ---------- */
html body:has(>main.bw) #list.grid>a.bc>.cv[style*="gradient"]{background:linear-gradient(160deg,#2B63EC 0%,#79A6FF 100%)!important}
html body:has(>main.bw) #list.grid>a.bc:nth-child(3n+2)>.cv[style*="gradient"]{background:linear-gradient(160deg,#13224D 0%,#24418A 100%)!important}
html body:has(>main.bw) #list.grid>a.bc:nth-child(3n)>.cv[style*="gradient"]{background:linear-gradient(160deg,#1E4FC4 0%,#4F86FA 100%)!important}

/* ======================================================================================================================
   /b/<code> — found page and the not-found / error shells (scope body:is(:has(>main>section.bhero),:has(>div.state)))
   ====================================================================================================================== */

/* ---------- [6][28] palette: same cab.v3 tokens as /builds (graphite #14151C / #1B1D26 in dark). Light: navy ink; --mut #8A909C → #5D6880
   («Пожаловаться на сборку» was 2.7:1, now 4.7:1). ---------- */
html:not([data-theme="dark"]) body:is(:has(>main>section.bhero),:has(>div.state)){
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--bd:rgba(20,32,61,.09);--bd2:rgba(20,32,61,.15)}
html[data-theme="dark"] body:is(:has(>main>section.bhero),:has(>div.state)){
  --bg:var(--s2-bg);--panel:var(--s2-card);--panel2:var(--s2-soft);--panel3:var(--s2-soft);
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);
  --bd:var(--s2-line);--bd2:#2E3B60;--bd3:#3A4874;--top-bg:rgba(10,15,30,.96);--inv:var(--s2-text);--inv-tx:#0A0F1E}

/* ---------- [5] html kept cab.v3's --bg (#F6F7F9 / #0B0B0F): a grey / near-black band under the footer on the short not-found page and on
   overscroll. Same background as the page; the not-found footer is pushed to the bottom of the window. ---------- */
html:has(>body>main>section.bhero,>body>div.state){background-color:var(--s2-bg,#E9EEF7)!important}
html[data-theme="dark"]:has(>body>main>section.bhero,>body>div.state){background-color:var(--s2-bg,#0A0F1E)!important}
html body:has(>div.state){display:flex;flex-direction:column;min-height:100vh}
html body:has(>div.state)>footer.o-foot{margin-top:auto;width:100%}
html body:has(>div.state)>div.state{width:100%}

/* ---------- [9] active filter chip «Все» in «Что внутри» was near-black (--inv): site blue, as on /builds ---------- */
html body:has(>main>section.bhero) .card.mods .filters>button.on{background:#2E6CF6;color:#fff}

/* ---------- [14] info card at ~430–500px (1024 wide screens): the four stat tiles broke 3+1 and «Скачать NLauncher» wrapped to two
   left-aligned lines. Four in a row when the card is wide enough for «NeoForge» (≥530px), otherwise 2×2; button labels stay on one line — the pair stacks when both don't fit. ---------- */
html body:has(>main>section.bhero) .bhero>.card.info{container-type:inline-size}
html body:has(>main>section.bhero) .card.info .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:530px){html body:has(>main>section.bhero) .card.info .stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
html body:has(>main>section.bhero) .card.info .acts>.btn{white-space:nowrap;text-align:center}
html body:has(>main>section.bhero) .card.info .acts>.btn.pri{border:1px solid transparent}  /* same height as the bordered .sec next to it */

/* ---------- [15] long mod lists: on desktop «Требования / Как поставить» ended at the top of a 2000px+ list (empty strip beside it) —
   they now follow the scroll when the window is tall enough to show the whole column. On phones the column came after ~5000px of
   mod rows — when the columns stack, the requirements and the how-to come right after the build card, the report link stays last. ---------- */
@media (min-width:928px) and (min-height:760px){
  html body:has(>main>section.bhero) .cols>aside.side{position:sticky;top:84px}
}
@media (max-width:927.98px){
  html body:has(>main>section.bhero) .cols>aside.side{display:contents}
  html body:has(>main>section.bhero) .cols>aside.side>*{order:-1;flex:1 1 100%;min-width:0}
  html body:has(>main>section.bhero) .cols>aside.side>#reportBtn{order:1;flex:0 0 auto}
}

/* ---------- [19] phones: «Что внутри» broke into «Что / внутри» beside the wrapped mono summary, the divider collapsed. Title on one line,
   summary on its own line under it. ---------- */
@media (max-width:560px){
  html body:has(>main>section.bhero) .card.mods>.sh{flex-wrap:wrap;row-gap:4px}
  html body:has(>main>section.bhero) .card.mods>.sh>h2{white-space:nowrap}
  html body:has(>main>section.bhero) .card.mods>.sh>.ln{display:none}
  html body:has(>main>section.bhero) .card.mods>.sh>.n{flex-basis:100%}
}

/* ---------- [28] «Пожаловаться на сборку»: a 25px tap target → 40px ---------- */
html body:has(>main>section.bhero) #reportBtn.rep{min-height:40px;padding:10px 4px}
html body:has(>main>section.bhero) #reportBtn.rep:hover{text-decoration:underline;text-underline-offset:2px}

/* ======================================================================================================================
   /authors, /en/authors, /authors/webhooks (+ /en/)   (scope body:has(>main.wrap.au); authors only :not(.wh); webhooks .wh)
   ====================================================================================================================== */

/* ---------- [7] palette: invite.v1.css tokens — graphite #14151C / #1A1C24 panels, inputs and tabs in dark on the navy page; near-black
   ink in light. Mapped to the site tokens. --pink (the «★ Автор NLauncher» badge, #DB2777) → the site accent ([24]). ---------- */
html:not([data-theme="dark"]) body:has(>main.wrap.au){
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--panel2:var(--s2-soft);
  --bd:rgba(20,32,61,.09);--bd2:rgba(20,32,61,.15);--pink:var(--s2-acc-text);--pink-soft:rgba(46,108,246,.10)}
html[data-theme="dark"] body:has(>main.wrap.au){
  --bg:var(--s2-bg);--panel:var(--s2-card);--panel2:var(--s2-soft);
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);
  --bd:var(--s2-line);--bd2:#2E3B60;--pink:var(--s2-acc-text);--pink-soft:rgba(76,130,255,.14)}
html[data-theme="dark"] body:has(>main.wrap.au) .au-form :is(input,select,textarea){background:#0E1630}

/* ---------- [11] hero: «Оставить заявку» (.btn.primary) fell into site2's glass rule for secondary buttons (it only knows .btn.pri) and
   looked disabled next to «Наши авторы». White primary button, as in the other hero tiles. ---------- */
html body:has(>main.wrap.au) .au-hero .btn.primary{
  background:#fff!important;color:#1A3EA6!important;border:0!important;border-radius:15px!important;box-shadow:0 4px 0 rgba(8,22,64,.3)!important}
html body:has(>main.wrap.au) .au-hero .btn.primary:hover{background:#EAF1FE!important;color:#1A3EA6!important}

/* ---------- [3] phones: the submit button was squashed to 24px — invite.v1's mobile `.btn{flex:1 1 100%;height:52px}` inside the column
   form, where the 100% basis overrides the height. Full-width 52px button. ---------- */
@media (max-width:560px){
  html body:has(>main.wrap.au) #au-form .btn.primary[type="submit"]{flex:none;height:52px;align-self:stretch}
}

/* ---------- [24] colours outside the palette: pink radial glow on «Стать автором» (maroon in dark), the pink crown tile; «Как это
   работает» opened with a 2px near-black rule (white in dark). Blue glow, the navy tile with a white crown, a thin site-line rule. ---------- */
html body:has(>main.wrap.au) section#apply.au-apply{
  background:radial-gradient(110% 90% at 0% 0%,rgba(46,108,246,.10),transparent 55%),radial-gradient(110% 90% at 100% 100%,rgba(46,108,246,.16),transparent 55%),var(--panel)}
html body:has(>main.wrap.au) .au-perk .i[style*="DB2777" i]{background:linear-gradient(160deg,#13224D 0%,#24418A 100%);color:#fff}
html body:has(>main.wrap.au) .au-steps{border-top:1px solid var(--s2-line)}

/* ---------- [25] «Наши авторы»: the second card stretched to the height of the first (blank lower half). «Стать автором»: the short intro
   column follows the tall form while it scrolls past (two-column layout only). ---------- */
html body:has(>main.wrap.au) #au-grid.au-grid{align-items:start}
@media (min-width:1001px){
  html body:has(>main.wrap.au) section#apply.au-apply{align-items:start}
  html body:has(>main.wrap.au) section#apply>.au-apply-l{position:sticky;top:96px}
}

/* ---------- [10] /authors/webhooks: the HTTP and code samples were black slabs (#0F1117) and the active language tab a black pill:
   the navy tile of the site and the blue active tab ---------- */
html body:has(>main.wrap.au.wh) pre.wh-pre{background:linear-gradient(160deg,#0E1A3D 0%,#22386E 100%);border:1px solid rgba(255,255,255,.08);color:#E6ECFF}
html body:has(>main.wrap.au.wh) .wh-tabs>button.on{background:#2E6CF6;color:#fff;border-color:#2E6CF6}

/* ---------- [17] webhooks hero: the anchor chips (white text on white glass) sit on the light bottom of the sky, 1.7–1.9:1. Light theme:
   white chips with navy text (the dark sky keeps the glass chips). ---------- */
html:not([data-theme="dark"]) body:has(>main.wrap.au.wh) .s2-hero .wh-toc a{
  background:rgba(255,255,255,.94)!important;border-color:rgba(255,255,255,.94)!important;color:#14203D!important;box-shadow:0 4px 12px -6px rgba(14,26,61,.35)}
html:not([data-theme="dark"]) body:has(>main.wrap.au.wh) .s2-hero .wh-toc a:hover{background:#fff!important;color:#1E56D4!important}

/* ---------- [23] the expected signature broke inside the token («даёт s / ha256=…», word-break:break-all): it moves to its own line
   whole and only breaks when even a full line is too narrow ---------- */
html body:has(>main.wrap.au.wh) .wh code.brk{word-break:normal;overflow-wrap:anywhere}

/* ======================================================================================================================
   /partners (body:has(#pgrid)) and /community (body:has(#composer)) — site-legacy pages
   ====================================================================================================================== */

/* ---------- [8] palette: in dark the «Стать партнёром» block and its perk cells were near-black (#0E0D13, --lg-bg2), the cards graphite
   (#14151C). Mapped to the site tokens (navy card, soft panel, navy lines); light gets the navy ink. ---------- */
html:not([data-theme="dark"]) body:is(:has(#pgrid),:has(#composer)){
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--bd:rgba(20,32,61,.09);--bd2:rgba(20,32,61,.15)}
html[data-theme="dark"] body:is(:has(#pgrid),:has(#composer)){
  --bg:var(--s2-bg);--panel:var(--s2-card);--panel2:var(--s2-soft);--panel3:var(--s2-soft);--lg-bg2:var(--s2-card);--lg-panel-hi:var(--s2-soft);
  --ink:var(--s2-text);--ink2:var(--s2-text2);--mut:var(--s2-mute);--bd:var(--s2-line);--bd2:#2E3B60;--bd3:#3A4874;--top-bg:rgba(10,15,30,.96)}
/* the inline :root aliases (--bg2, --border, --ink-dim …) were resolved on :root — re-point them here so they pick up the body values */
html body:is(:has(#pgrid),:has(#composer)){
  --bg2:var(--lg-bg2);--panel-hi:var(--panel2);--border:var(--bd);--border-hi:var(--bd2);--ink-dim:var(--ink2);--mute:var(--mut)}

/* ---------- [18] /partners: the hero tile touched the sticky header (0px gap; other pages 20–44px). The 3D figures move down with it. ---------- */
html body:has(#pgrid)>div.wrap{padding-top:28px}
html body:has(#pgrid)>.mascots.s2-in{--s2-mt:92px}
@media (max-width:700px){html body:has(#pgrid)>div.wrap{padding-top:16px}}

/* ---------- [17] /partners hero: the stat labels «партнёр», «игрока онлайн» (11–12px white at 82%) sat on the lightest bottom of the sky,
   1.9:1. Light theme: the numbers stand on a white panel with navy text; the dark sky keeps the white text. ---------- */
html:not([data-theme="dark"]) body:has(#pgrid) .hero.s2-hero .stats:not(:empty){
  display:inline-flex;gap:34px;padding:12px 26px;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 6px 18px -10px rgba(14,26,61,.35)}
html:not([data-theme="dark"]) body:has(#pgrid) .hero.s2-hero .stats .v{color:#14203D!important}
html:not([data-theme="dark"]) body:has(#pgrid) .hero.s2-hero .stats .k{color:#3F4A63!important;opacity:1;font-size:12.5px}

/* ---------- [22] /partners: feature copy at 12.5px with the inherited -0.011em tracking ran words together («изакреп»): normal tracking,
   13.5px. (The duplicated raw category string is markup — community.md [22].) ---------- */
html body:has(#pgrid) .join :is(.perk .pd,.join-top p,.req){letter-spacing:0}
html body:has(#pgrid) .join :is(.perk .pd,.req){font-size:13.5px}
html body:has(#pgrid) #pgrid .pmini .d{letter-spacing:0}

/* ---------- [17] /community hero: the subtitle (14px) sat on the light bottom of the short banner, 2.3:1. This banner is wide and low,
   so its sky runs left→right: the text stays on the deep blue end, the island on the light end. ---------- */
html:not([data-theme="dark"]) body:has(#composer) .head.s2-hero{
  background:radial-gradient(70% 90% at 82% 0%,var(--s2-glow) 0%,rgba(255,255,255,0) 62%),linear-gradient(100deg,#2B63EC 0%,#3770F1 55%,#86B0FE 100%)!important}
@media (max-width:860px){  /* the island is hidden here and the text runs across most of the banner */
  html:not([data-theme="dark"]) body:has(#composer) .head.s2-hero{background:linear-gradient(100deg,#2B63EC 0%,#3770F1 80%,#6A9BFA 100%)!important}}
html body:has(#composer) .head.s2-hero p{color:#fff!important;font-size:15px}

/* ---------- [21] /community: for guests the composer showed an empty blue-to-indigo square before «Войди, чтобы постить» — a user icon on the
   site blue. The indigo (#5865F2) leaves the avatar gradients. The hero's shadow fell on the composer — a little more room under the hero. ---------- */
html body:has(#composer) #composer>span.av:empty{
  background:#2E6CF6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/20px no-repeat}
html body:has(#composer) :is(#composer .av,.cwrite .cava){background-color:#2E6CF6;background-image:linear-gradient(135deg,#2E6CF6,#1E4FC4)}
html body:has(#composer) .head.s2-hero{margin-bottom:26px!important}

/* ---------- [16] /community rail: the date tiles stretched to the height of 3–4-line titles (tall empty boxes) ---------- */
html body:has(#composer) #eventsList .ev .date{align-self:flex-start}

/* ======================================================================================================================
   [26] all pages of the family: 124–144px between the last block and the footer (main padding-bottom 56–80px + the footer's 64px
   margin), against 72px on /servers and /wardrobe → 72px
   ====================================================================================================================== */
html body:has(>main.bw)>main.bw,
html body:has(>main>section.bhero)>main,
html body:has(>main.wrap.au)>main.wrap.au{padding-bottom:8px}
html body:has(#composer) .layout{padding-bottom:8px}

/* ---------- extra (re-check, same family): /community «Лучшие участники» — the gold «#1» (#E89A0F) on the white card was 2.3:1 in light:
   the darker PLUS gold text used on /servers (#9A6700, 5.0:1) ---------- */
html:not([data-theme="dark"]) body:has(#composer) #topList .mem .rank.g{color:#9A6700}

/* ---------- [13] /b: «Моды» is the section of these pages (the renderer marks it aria-current), but nav-look's mark() strips the
   attribute because its /mods rule only knows /mods and /builds (community.md [13]). Until then the same white/navy active pill;
   the :not([aria-current]) guard makes this step aside once the script marks it. ---------- */
html body:has(>main>section.bhero) header.nc-top .nlx-bar>a.nlx-a[href="/mods"]:not([aria-current]){
  color:var(--nx-on-tx)!important;background:var(--nx-on-bg)!important;box-shadow:var(--nx-on-sh)!important}
html body:has(>main>section.bhero) .nlx-mp a.nlx-row[href="/mods"]:not([aria-current]){background:var(--nx-as)!important;color:var(--nx-a)!important}


/* ======================== v8: critic — проход «что пропустили»: шапка на телефонах и др. ======================== */
/* ===== Cross-page display fixes from the site5 «critic» audit (2026-10-13). Numbers in brackets = index in findings-critic.json.
   Appended to the site-wide stylesheet (site2 v8), which is not loaded on the home page. Each block is scoped to the page family it fixes. ===== */

/* ---------- [0][1] phone header of the e2 pages (header.top: /wardrobe, /emotes, /skins, /capes, /cases, /emotes-howto, item pages,
   /profile/<nick>, /en/…) and of the nc-top pages (/docs, /help, /about, /404, cabinet, /b/…).
   Signed in, the right group (theme 42 + nick chip ~110 + «Скачать» pill 127/«Download» 138 + burger 40) was wider than a phone: the burger
   landed at x=369..409 (EN 380..420), off-screen at 360, and the page panned sideways. Signed out it still overflowed at 320 (EN up to 351px).
   nav.v8 forces the nick visible (display:inline-block!important, flex:none) — the pages' own ≤560px «avatar only» rule no longer applies.
   Now on phones: «Скачать» is a 40px round icon button like on the nc-top pages (the label stays for screen readers), and the nick gets
   only the room that is left (cut with an ellipsis); where even a short nick no longer fits, the chip shows the avatar alone. ---------- */
/* All sizes below are fixed by site2/nav.v8 with !important (theme 42, burger 40, avatar 32, chip padding 5/4 + 1px border, gaps 10, row
   padding 16, logo 34), so the room left for the nick is 100vw minus a constant: header.top 16+34+10+42+10+(5+32+8+5+2)+10+40+10+40+16 = 280
   (+20 spare for a desktop scrollbar); nc-top with «Скачать» 16+34+16+42+10+42+10+(4+32+8+4+2)+10+40+10+40+16 = 336, without it 286.
   The right group keeps min-width:auto, so nav-look's fit() still sees any overflow (it hides the wordmark with .nlx-tight).
   :not(#nlx) lifts the specificity over nav.v8's `header :is(a.me,…,a#nc-chip:not(.guest),…)` (an ID inside :is). */
@media (max-width:560px){
  html body header.top nav>.right>a.btn.pri.sm{width:40px!important;height:40px!important;padding:0!important;gap:0!important;flex:none!important;
    justify-content:center!important;align-items:center!important;box-sizing:border-box!important}
  html body header.top nav>.right>a.btn.pri.sm>i{display:grid;place-items:center;flex:none}
  html body header.top nav>.right>a.btn.pri.sm>span{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;
    padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
  html body header.top nav>.right>a.me:not(#nlx)>span:not(.av){max-width:clamp(0px,calc(100vw - 300px),120px)!important}
}
@media (max-width:900px){
  html body header.nc-top .nc-row>.right:has(>.nc-btn-dl)>a.nc-chip:not(.guest):not(#nlx)>.nm{max-width:clamp(0px,calc(100vw - 340px),120px)!important}
  html body header.nc-top .nc-row>.right:not(:has(>.nc-btn-dl))>a.nc-chip:not(.guest):not(#nlx)>.nm{max-width:clamp(0px,calc(100vw - 290px),120px)!important}
}
/* the narrowest phones: avatar only (the nick stays in the accessibility tree as the link's name) */
@media (max-width:350px){
  html body header.top nav>.right>a.me:not(#nlx)>span:not(.av){position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;
    overflow:hidden!important;clip-path:inset(50%)!important}
  html body header.top nav>.right>a.me:not(#nlx){padding-right:5px!important;gap:0!important}
}
@media (max-width:400px){
  html body header.nc-top .nc-row>.right:has(>.nc-btn-dl)>a.nc-chip:not(.guest):not(#nlx)>.nm{position:absolute!important;width:1px!important;height:1px!important;
    margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important}
  html body header.nc-top .nc-row>.right:has(>.nc-btn-dl)>a.nc-chip:not(.guest):not(#nlx){padding-right:4px!important;gap:0!important}
}
@media (max-width:340px){
  html body header.nc-top .nc-row>.right:has(>.nc-btn-dl){gap:6px!important}
  html body header.nc-top .nc-row>.right>a.nc-chip:not(.guest):not(#nlx)>.nm{position:absolute!important;width:1px!important;height:1px!important;
    margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important}
  html body header.nc-top .nc-row>.right>a.nc-chip:not(.guest):not(#nlx){padding-right:4px!important;gap:0!important}
}

/* ---------- [1] (found while re-checking 320px) /wardrobe «Бонус за коллекцию»: each milestone row is a flex line of anonymous text items
   («50%» · «+150» · coin · «и значок «Коллекционер»»), which cannot wrap, so at 320 every card ran 37px past its box and the page was
   326px wide (the item modal with it). Below 360px the row may now wrap (wider screens keep the one-line row they fit in). ---------- */
@media (max-width:359px){html body #collections .shx-colls .shx-ms li{flex-wrap:wrap;row-gap:2px}}

/* ---------- [3] dark /hosting, /mods (+ /en/): land.v1.css graphite tokens on the navy page — catalog cards #171A21, segment tracks and
   the tour frame #13161C, rows #1C2029, inputs #0D0F13, the mod-check result panel #0A0D12, neutral grey ink/meta. Remapped to the site
   tokens on these two landings only (body:has(> main > section.x-hero / .m-hero); /plus also loads land.v1.css but has neither).
   The navy tiles set their own tokens deeper (.x-night, .m-band) and keep them. /404 is done in auth-misc.css [1]. ---------- */
html[data-theme="dark"] body:has(> main > :is(section.x-hero,section.m-hero)){
  --bg:var(--s2-bg);--bg-2:#0E1528;--surface:var(--s2-card);--surface-2:var(--s2-soft);
  --line:var(--s2-line);--line-2:#33406A;--ink:var(--s2-text);--ink-2:var(--s2-text2);--mute:var(--s2-mute);
  --term:#0B1430;--term-2:#111B36}
html[data-theme="dark"] body:has(> main > :is(section.x-hero,section.m-hero)) .l-seg button:is([aria-pressed="true"],[aria-selected="true"]){background:#26345F}
html[data-theme="dark"] body:has(> main > section.m-hero) .m-peek{background:rgba(18,26,48,.9)}
html[data-theme="dark"] body:has(> main > section.x-hero) .x-toast{background:var(--s2-soft)}
html[data-theme="dark"] body:has(> main > :is(section.x-hero,section.m-hero)) .seo{
  --s-card:var(--s2-card);--s-line:var(--s2-line);--s-ink:var(--s2-text);--s-ink2:var(--s2-text2);--s-mute:var(--s2-mute)}

/* ---------- [5] /servers/user-<id> (+ /en/): the uploaded banner was forced into a 1190×220 strip (5.4:1) with object-fit:cover, so a 4:1
   banner lost a quarter of its height and taller ones up to two thirds (FrostAnarchy's logo, McRate's second line), and the address card
   covered another 84px of it. The strip now has the 4:1 shape the add-server form recommends («Хорошо смотрится 1600×400»): 4:1 banners
   show whole, taller ones lose far less; the card overlaps the banner by 40px instead of 84. Gradient banners (no upload) keep 220px. ---------- */
html body main#sd .hero>.ban.img{height:auto!important;aspect-ratio:4/1;max-height:320px}
@media (min-width:981px){html body main#sd .hero:has(>.ban.img) .connect{margin-top:-40px}}
@media (max-width:760px){html body main#sd .hero>.ban.img{aspect-ratio:auto;height:max(96px,calc((100vw - 34px) / 4))!important}}

/* ---------- [7] /emotes (+ item pages, /en/): the hero's primary «Скачать и попробовать» sat at y=741–793 on 1366×657 (732 on 1280×720) —
   below the first screen — because the 2-column category list (272px) stands between the lead and the buttons. The buttons and their
   «four emotes are free» note now come right after the lead; the category list follows them (same content, same hero height). ---------- */
html body .card.em-hero>.info:has(>nav.hero-cats)>nav.hero-cats{order:1}
/* the note now sits on the mid-blue part of the sky (it was at the light bottom): #123477 fell to 3.9:1 at 1366×657 → a deeper navy, 5:1 */
html:not([data-theme="dark"]) body:has(.em-hero) .card.em-hero>.info:has(>nav.hero-cats)>.free-note{color:#0B2257!important}

/* ---------- [10] «Switch to English? / На русском?» hint (nav-look .nlx-hint): fixed at the bottom-left, it covered the hero buttons on the
   first screen of a laptop (1366×657: «Скачать и примерить» / «Смотреть каталог» on /wardrobe, «Скачать NLauncher» on news posts, the
   category list on /emotes). On computers it now drops in just under the sticky header, centred over the page (the bottom-right corner
   belongs to the support button). Phones keep it at the bottom, above the home indicator. Dark: navy instead of graphite #14151C. ---------- */
@media (min-width:561px){
  html body .nlx-hint{top:80px;bottom:auto;left:0;right:0;margin:0 auto;width:max-content;max-width:min(560px,calc(100vw - 32px));
    box-shadow:0 14px 34px -14px rgba(20,32,61,.35)}
}
@media (max-width:560px){html body .nlx-hint{bottom:calc(84px + env(safe-area-inset-bottom))}}
html[data-theme="dark"] body .nlx-hint{background:var(--s2-card);border-color:var(--s2-line);color:var(--s2-text);box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}

/* ---------- [12] /plus (+ /en/plus) on very wide screens: the gold glow behind the hero (.px-hero::before, plus.v5) is sized from the
   full-width section (right:-10%, width:80%), while the navy tile is 1192px — at 2560 it floated ~300px outside the tile as a brown smudge
   on the navy page. It stays a rim of light at the tile's right edge at any width; up to ~1800px nothing changes. ---------- */
html body .px-hero::before{right:max(-10%,calc(50% - 900px));width:min(80%,1100px)}

/* ---------- [13] sv-kit toasts (/servers, /servers/<id>, /my-servers, /servers/add|edit|rating): centred with left:50% + translate(-50%),
   so the box could only use half the screen — «IP vortex.vanila.ru:25578 скопирован» broke into 3–4 lines in a 256px box on a 390 phone.
   Centred with left/right + auto margins instead (up to the full width minus 16px gutters). Light theme: the navy tile colour instead of
   near-black #0B1220 (dark keeps its light toast). ---------- */
html body .sv-toast{left:16px;right:16px;margin:0 auto;width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;transform:translateY(16px)}
html body .sv-toast.on{transform:none}
html body .sv-toast b{overflow-wrap:anywhere}
html:not([data-theme="dark"]) body .sv-toast{background:linear-gradient(160deg,#0E1A3D 0%,#22386E 100%);box-shadow:0 20px 50px -20px rgba(14,26,61,.55)}

/* ---------- [14] phone-menu sheet on tablets / small laptops (the burger shows up to 1100px): nav-look sizes it to the window (inline
   width = viewport − 24px), so at 1024 a 1000px white panel held the same short single column as on a phone, ~80% of it empty. From 641px
   it is a 380px dropdown under the burger, at the right edge like the burger itself (inline styles → !important). ---------- */
@media (min-width:641px){
  html body .nlx-mp{left:auto!important;right:24px!important;width:min(380px,calc(100vw - 48px))!important}
}


/* ======================== v8: серверы [13] — раскладка страницы сервера (ждёт sv-detail.v9) ======================== */
/* [13] «Похожие серверы» under both columns: a 2–3-up list instead of a 360px-wide stack */
html body main#sd #sd-root>#similar{margin-top:16px}
@media (min-width:761px){html body main#sd #sd-root>#similar .sim{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));column-gap:28px}}
/* one column (≤980px, .cols>div are display:contents): keep today's order — vote, support, about, motd, reviews, rating, info, top players */
@media (max-width:980px){html body main#sd .cols :is(#info,#top){order:1}}

/* v8: публичный профиль — метка уровня «Золото» на светлой карточке достижения (#D99A06 на #EEF2F9 — 2.2:1) */
html:not([data-theme="dark"]) body .ach.t-gold .tier{color:#8A5600!important}