/* ТЕСТОВЫЙ лайв · новый каркас (08.10.2026, владелец: «тестовый лайв поменяй» по макету «Дашборд продукта — тестовое окружение»).
   Боковое меню с иконками, верхняя панель (окружение, тема, уведомления, профиль), заметный тестовый режим
   (фиолетовый акцент, штриховая полоса, бейдж), светлая и тёмная темы. Ставится ПОСЛЕ родных стилей live-dash и
   перекрывает их токены — сам live-dash не правится. Данные не трогает. */

@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/mi/fonts/ibm-plex-mono-600-latin.woff2) format("woff2");unicode-range:u+0000-00ff,u+2000-206f,u+2212}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/mi/fonts/ibm-plex-mono-600-cyrillic.woff2) format("woff2");unicode-range:u+0400-045f}

/* ── токены: тёмная (по умолчанию) ── */
:root{
  --фон:#0a0d12; --панель:#10151c; --панель-2:#151b24; --панель-3:#1a212c;
  --кант:rgba(255,255,255,.075); --кант-2:rgba(255,255,255,.13);
  --текст:#e8ecf2; --второй:#a9b3c1; --тихо:#8b96a6; --сетка:#212935;
  --радиус:12px; --радиус-м:10px;
  --тень:0 1px 0 rgba(255,255,255,.025) inset,0 10px 30px -18px rgba(0,0,0,.8);
  --нв-ховер:#19202b; --нв-поп:0 18px 50px -12px rgba(0,0,0,.75); --нв-подск-фон:#e8ecf2; --нв-подск-т:#0a0d12;
  --нв-шапка:rgba(10,13,18,.94);
  /* окружение: тест — фиолетовый, его нет среди цветов данных */
  --нв-окр:#a88bfa; --нв-окр-т:#c7b5ff; --нв-окр-мягко:rgba(168,139,250,.11); --нв-окр-кант:rgba(168,139,250,.38);
  --нв-бок:232px;
}
/* ── светлая ── */
:root[data-тема="светлая"]{
  color-scheme:light;
  --фон:#f2f4f7; --панель:#ffffff; --панель-2:#f6f8fa; --панель-3:#eef1f5;
  --кант:rgba(13,18,25,.10); --кант-2:rgba(13,18,25,.18);
  --текст:#0d1219; --второй:#3e4957; --тихо:#566171; --сетка:#e3e8ee;
  --акцент:#2c70c6; --акцент-мягко:rgba(44,112,198,.10); --с1:#2c70c6;
  --вверх:#16825a; --вниз:#c23b2a; --ровно:#566171; --внимание:#9a6200; --беда:#c23b2a; --серый-ряд:#8b95a4;
  --тень:0 1px 2px rgba(16,24,40,.05),0 8px 24px -16px rgba(16,24,40,.18);
  --нв-ховер:#eef1f5; --нв-поп:0 18px 50px -14px rgba(16,24,40,.28); --нв-подск-фон:#0d1219; --нв-подск-т:#ffffff;
  --нв-шапка:rgba(242,244,247,.94);
  --нв-окр:#7656e3; --нв-окр-т:#5a3cc4; --нв-окр-мягко:rgba(118,86,227,.08); --нв-окр-кант:rgba(118,86,227,.34);
}

body{background-image:none!important}
/* отступ под меню — только на страницах с навигацией (у страницы входа её нет) */
body:has(> header.шапка nav.страницы){padding-left:var(--нв-бок)}
::selection{background:var(--нв-окр-мягко)}
:focus-visible{outline-color:var(--нв-окр)}
.шапка{background:var(--нв-шапка)!important;border-bottom-color:var(--кант)}
.период-полоса{background:transparent!important}
:root[data-тема="светлая"] ::-webkit-scrollbar-thumb{background:#c9d1db;border-color:var(--фон)}
:root[data-тема="светлая"] .тревога{color:#8f2416}
:root[data-тема="светлая"] .пер-беда{color:#6b4500}
:root[data-тема="светлая"] .кто-выход:hover{background:var(--нв-ховер)}
:root[data-тема="светлая"] .шапка-беда{color:#8f2416}

/* ── иконки ── */
.нв-и{width:18px;height:18px;flex:none;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.нв-и.м{width:15px;height:15px}

/* ── подсказки у кнопок-иконок ── */
[data-нв-подск]{position:relative}
[data-нв-подск]::after{content:attr(data-нв-подск);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);display:none;pointer-events:none;
  white-space:nowrap;background:var(--нв-подск-фон);color:var(--нв-подск-т);font:600 12px/1.35 Manrope,system-ui,sans-serif;letter-spacing:0;text-transform:none;
  padding:6px 9px;border-radius:7px;box-shadow:var(--нв-поп);z-index:120;animation:нв-подск .12s ease-out}
/* скрытая подсказка не должна занимать место: иначе у правого края появляется прокрутка вбок */
[data-нв-подск]:hover::after,[data-нв-подск]:focus-visible::after{display:block}
@keyframes нв-подск{from{opacity:0}to{opacity:1}}
[data-нв-подск].к-краю::after{left:auto;right:0;transform:none}
@media(hover:none){[data-нв-подск]::after{display:none}}

/* ── кнопка-иконка ── */
.нв-кн{width:38px;height:38px;display:inline-grid;place-items:center;flex:none;padding:0;border:1px solid var(--кант);background:var(--панель);
  color:var(--второй);border-radius:9px;cursor:pointer;text-decoration:none;transition:background .12s,color .12s,border-color .12s}
.нв-кн:hover{background:var(--нв-ховер);color:var(--текст);border-color:var(--кант-2)}
.нв-кн:focus-visible{outline:2px solid var(--нв-окр);outline-offset:2px}
.нв-кн[aria-expanded="true"]{color:var(--нв-окр);border-color:var(--нв-окр-кант);background:var(--нв-окр-мягко)}
.нв-кн.мал{width:32px;height:32px;border-radius:8px}
.нв-кн.без{border-color:transparent;background:transparent}
@media(pointer:coarse){.нв-кн{width:44px;height:44px}.нв-кн.мал{width:40px;height:40px}}

/* ── боковое меню ── */
.нв-бок{position:fixed;left:0;top:0;bottom:0;width:var(--нв-бок);z-index:30;background:var(--панель);border-right:1px solid var(--кант);
  display:flex;flex-direction:column;gap:16px;padding:16px 14px;overflow-y:auto;scrollbar-width:none}
.нв-бок::-webkit-scrollbar{display:none}
.нв-бренд{display:flex;align-items:center;gap:10px;padding:2px 6px 4px;text-decoration:none;color:inherit}
.нв-лого{width:30px;height:30px;border-radius:9px;background:var(--акцент);display:grid;place-items:center;flex:none}
.нв-лого i{width:11px;height:11px;border-radius:3px;background:var(--фон)}
.нв-бренд b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.нв-бренд small{display:block;font-size:12px;color:var(--тихо);font-weight:500}
.нв-меню{display:flex;flex-direction:column;gap:2px}
.нв-гр{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--тихо);padding:12px 10px 4px}
.нв-меню a{display:flex;align-items:center;gap:11px;min-height:38px;padding:0 10px;border-radius:9px;color:var(--второй);text-decoration:none;font-weight:700;font-size:13.5px}
.нв-меню a:hover{background:var(--нв-ховер);color:var(--текст)}
.нв-меню a[aria-current]{background:var(--нв-ховер);color:var(--текст);box-shadow:inset 0 0 0 1px var(--кант-2)}
.нв-меню a[aria-current] .нв-и{color:var(--нв-окр)}
.нв-меню a:focus-visible{outline:2px solid var(--нв-окр);outline-offset:1px}
.нв-меню a .нов{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--нв-окр-т);border:1px solid var(--нв-окр-кант);border-radius:5px;padding:0 5px;line-height:17px}
.нв-окр-карта{margin-top:auto;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1px solid var(--нв-окр-кант);background:var(--нв-окр-мягко)}
.нв-окр-карта .нв-и{color:var(--нв-окр);margin-top:1px}
.нв-окр-карта b{display:block;font-size:13px}
.нв-окр-карта code{display:block;font:600 11px/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--нв-окр-т)}
.нв-окр-карта small{display:block;font-size:11.5px;color:var(--тихо);font-weight:500}

/* шапка: бренд и вкладки страниц уходят в меню, на их месте — заголовок страницы с бейджем */
.нв-полоса{height:4px;background:repeating-linear-gradient(135deg,var(--нв-окр) 0 12px,transparent 12px 24px),var(--нв-окр-мягко)}
.шапка-в .бренд{display:none}
.шапка > nav.страницы{display:none}
.нв-ттл{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-width:0;flex:1 1 auto}
.нв-ттл .кр{display:block;font-size:12px;font-weight:600;color:var(--тихо);line-height:1.3}
.нв-ттл h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.25;white-space:nowrap}
.нв-бейдж{display:inline-flex;align-items:center;gap:7px;font:600 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--нв-окр-т);
  background:var(--нв-окр-мягко);border:1px solid var(--нв-окр-кант);border-radius:6px;padding:5px 8px;white-space:nowrap}
.нв-бейдж i{width:7px;height:7px;border-radius:50%;background:var(--нв-окр);box-shadow:0 0 0 3px var(--нв-окр-мягко)}
.шапка-в .статус{margin-left:0}
.нв-инстр{display:flex;align-items:center;gap:8px;flex:none}
.нв-окр{display:flex;align-items:center;gap:10px;padding:3px 10px 3px 3px;border:1px solid var(--кант);border-radius:11px;background:var(--панель)}
.нв-сег{display:flex;gap:2px;background:var(--панель-2);border-radius:8px;padding:2px}
.нв-сег .нв-кн{width:32px;height:32px;border:0;border-radius:7px;background:transparent}
.нв-сег .нв-кн[aria-checked="true"]{background:var(--нв-окр-мягко);color:var(--нв-окр);box-shadow:inset 0 0 0 1px var(--нв-окр-кант)}
.нв-окр-т{display:flex;flex-direction:column;line-height:1.2}
.нв-окр-т b{font-size:12.5px}
.нв-окр-т span{font:600 11px/1.3 "IBM Plex Mono",ui-monospace,monospace;color:var(--тихо)}
.нв-отн{position:relative}
.нв-счёт{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--беда);color:#fff;
  font-size:10.5px;font-weight:800;display:grid;place-items:center;border:2px solid var(--фон);pointer-events:none}
.нв-ава{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;background:var(--панель-2);border:1px solid var(--кант-2);
  color:var(--текст);font:800 13px Manrope,system-ui,sans-serif}
.нв-ава:hover{border-color:var(--нв-окр-кант)}
.нв-ава:focus-visible{outline:2px solid var(--нв-окр);outline-offset:2px}

/* всплывающие панели */
.нв-поп{position:absolute;right:0;top:calc(100% + 8px);width:360px;max-width:calc(100vw - 24px);background:var(--панель);border:1px solid var(--кант-2);
  border-radius:12px;box-shadow:var(--нв-поп);z-index:110;overflow:hidden}
.нв-поп[hidden]{display:none}
.нв-поп-ш{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--кант)}
.нв-поп-ш b{font-size:13.5px}
.нв-поп-ш div{display:flex;gap:4px}
.нв-ув{list-style:none;margin:0;padding:6px;max-height:min(420px,70vh);overflow-y:auto}
.нв-ув li a{display:flex;gap:11px;padding:10px;border-radius:9px;text-decoration:none;color:inherit;align-items:flex-start}
.нв-ув li a:hover{background:var(--нв-ховер)}
.нв-ув p{margin:0;font-size:13px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.нв-ув small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:var(--тихо);margin-top:2px;font-weight:500}
.нв-ув .т{width:8px;height:8px;border-radius:50%;background:var(--нв-окр);margin-top:6px;flex:none;margin-left:auto}
.нв-ув .т.чит{background:transparent}
.нв-ик{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.нв-ик.err{background:color-mix(in srgb,var(--беда) 15%,transparent);color:var(--беда)}
.нв-ик.warn{background:color-mix(in srgb,var(--внимание) 15%,transparent);color:var(--внимание)}
.нв-ик.us{background:color-mix(in srgb,var(--акцент) 15%,transparent);color:var(--акцент)}
.нв-ик.rival{background:color-mix(in srgb,#ee8b3e 15%,transparent);color:#ee8b3e}
.нв-пусто{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 18px;text-align:center;color:var(--тихо);font-size:12.5px}
.нв-пусто b{color:var(--текст);font-size:13.5px}
.нв-проф{display:flex;gap:12px;align-items:center;padding:16px;border-bottom:1px solid var(--кант)}
.нв-проф b{display:block;font-size:14px}
.нв-проф small{display:block;font-size:12px;color:var(--тихо)}
.нв-проф-м{list-style:none;margin:0;padding:6px}
.нв-проф-м a,.нв-проф-м button{width:100%;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:8px;border:0;background:transparent;
  color:var(--второй);font:700 13px Manrope,system-ui,sans-serif;text-decoration:none;cursor:pointer;text-align:left}
.нв-проф-м a:hover,.нв-проф-м button:hover{background:var(--нв-ховер);color:var(--текст)}
.нв-проф-м form{margin:0}
.нв-скл{display:block;height:12px;border-radius:5px;background:linear-gradient(90deg,var(--панель-2) 20%,var(--нв-ховер) 50%,var(--панель-2) 80%);background-size:220% 100%;animation:нв-скл 1.15s linear infinite}
@keyframes нв-скл{from{background-position:120% 0}to{background-position:-100% 0}}

/* плашка тестового окружения */
.нв-плашка{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:10px 10px 10px 14px;border:1px solid var(--нв-окр-кант);background:var(--нв-окр-мягко);border-radius:10px}
.нв-плашка > .нв-и{color:var(--нв-окр)}
.нв-плашка p{margin:0;flex:1 1 auto;min-width:0;font-size:13px;font-weight:600}
.нв-плашка p span{color:var(--второй);font-weight:500}
.нв-плашка .нв-кн{background:transparent;border-color:var(--нв-окр-кант)}

/* мобильное меню (внутри липкой шапки) */
.нв-моб{display:none}

/* карты и плитки — мягче, как в макете */
.карта{border-radius:var(--радиус)}
.раздел-шапка h2{font-size:20px}

/* ── планшет: меню-рельс ── */
@media(max-width:1180px){
  :root{--нв-бок:72px}
  .нв-бок{padding:16px 12px;align-items:center}
  .нв-бренд{padding:0}.нв-бренд div,.нв-гр,.нв-меню a .нв-подп,.нв-меню a .нов,.нв-окр-карта div{display:none}
  .нв-меню a{width:46px;justify-content:center;padding:0}
  .нв-окр-карта{padding:10px;justify-content:center}
  .нв-бок [data-нв-подск]::after{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}
  .нв-окр-т span{display:none}
}
@media(min-width:1181px){.нв-бок [data-нв-подск]::after{display:none}}
/* ── телефон: меню — сетка 4 колонки в шапке ── */
@media(max-width:760px){
  :root{--нв-бок:0px}
  .нв-бок{display:none}
  .шапка-в{flex-wrap:wrap}
  .шапка-в .бренд{display:flex}
  .нв-ттл{display:none}
  .нв-инстр{order:3;width:100%}
  .нв-окр{margin-right:auto}
  .нв-окр-т span{display:none}
  .нв-моб{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px 10px 8px;border-top:1px solid var(--кант)}
  .нв-моб a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;padding:5px 2px;border-radius:9px;
    color:var(--второй);text-decoration:none;font-size:11.5px;font-weight:700;text-align:center;line-height:1.15}
  .нв-моб a[aria-current]{background:var(--нв-ховер);color:var(--текст);box-shadow:inset 0 0 0 1px var(--кант-2)}
  .нв-моб a[aria-current] .нв-и{color:var(--нв-окр)}
  .нв-плашка{align-items:flex-start}
  .нв-поп{position:fixed;left:12px;right:12px;top:auto;width:auto;max-width:none;margin-top:8px}
}
@media(max-width:380px){.нв-окр-т{display:none}.шапка-в .статус .сл{display:none}}
@media(prefers-reduced-motion:reduce){.нв-скл,[data-нв-подск]::after{animation:none}}
/* у 320 px быстрые недели миграции («неделю назад») не помещались в строку */
@media(max-width:360px){.вар-гр.мигр-быстро{flex-wrap:wrap}}
