/* ============================================================
   VRTH v3 · base.css · @layer base  (DESIGN.md §3.1 шрифти, §5 оболонка:
   шапка/док/drawer/фон, §4.8 контейнери тостів, §6.2 перехід сторінки,
   §6.9 reduced-motion, §8 фокус/sr; A2: легасі-база site_base.html
   винесена сюди 1:1 — ARC-02 для бази)
   Нешаровий легасі (інлайн <style> сторінок) перемагає будь-який шар →
   немігровані сторінки лишаються як були (§9.1); шапка/док/фон — v3 для всіх.
   ============================================================ */

/* ---- §3.1 self-host (v4 напрям A): IBM Plex Sans 400/500/600 (текст і UI), IBM Plex Mono 500 (числа),
        Cormorant Garamond 600 (лише заголовки ≥ 28 px). Латиниця + кирилиця окремими файлами через unicode-range
        (підмножини @fontsource, OFL — fonts/README.md). Важчі ваги кіту (700/800) беруть файл 600 — без штучного жирного. ---- */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/IBMPlexSans-400.latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/IBMPlexSans-400.cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/IBMPlexSans-500.latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/IBMPlexSans-500.cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600 900;font-display:swap;src:url("fonts/IBMPlexSans-600.latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600 900;font-display:swap;src:url("fonts/IBMPlexSans-600.cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400 900;font-display:swap;src:url("fonts/IBMPlexMono-500.latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400 900;font-display:swap;src:url("fonts/IBMPlexMono-500.cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 900;font-display:swap;src:url("fonts/CormorantGaramond-600.latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 900;font-display:swap;src:url("fonts/CormorantGaramond-600.cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* фолбеки з метриками (CLS): Plex Sans — UPM 1000, asc 1025, desc 275; Cormorant — вужчий і нижчий за Georgia */
@font-face{font-family:"Plex-fallback";font-style:normal;font-weight:400 900;src:local("Arial"),local("Segoe UI"),local("Roboto");size-adjust:101%;ascent-override:101%;descent-override:27%;line-gap-override:0%}
@font-face{font-family:"Cormorant-fallback";font-style:normal;font-weight:400 900;src:local("Georgia"),local("Times New Roman");size-adjust:86%;ascent-override:108%;descent-override:33%;line-gap-override:0%}

/* ---- §6.2 крос-документний view-transition (Chrome 126+/Safari 18.2+): крос-фейд 160/160 мс, шапка й док не блимають.
        Поза шаром: at-rule і псевдоелементи не конфліктують з легасі. RM → без переходу (§6.9).
        A3 PM-02: old/new однакової тривалості (plus-lighter без «провалу» яскравості); UA-дефолт 250 мс на
        ::view-transition-group(root) вкорочено до 160 мс, групи nav/dock без анімації → `finished` = кінець крос-фейду. ---- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition-old(root){animation:160ms cubic-bezier(.4,0,1,1) both vx-fade-out}
::view-transition-new(root){animation:160ms cubic-bezier(.2,.8,.2,1) both vx-fade-in}
::view-transition-group(root){animation-duration:160ms}
::view-transition-group(nav),::view-transition-group(dock){animation:none}
::view-transition-old(nav),::view-transition-new(nav),::view-transition-old(dock),::view-transition-new(dock){animation:none;mix-blend-mode:normal}
@keyframes vx-fade-in{from{opacity:0}to{opacity:1}}
@keyframes vx-fade-out{to{opacity:0}}

@layer base{
  /* ---- ресети (A2: з інлайну site_base; у шарі base їх перемагає кіт і будь-який нешаровий легасі) ---- */
  *{box-sizing:border-box}
  :where(html,body:not(.vx),body:not(.vx) *){margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}   /* ARC-09: clip замість body{overflow-x:hidden}; без scroll-behavior:smooth */
  body{-webkit-tap-highlight-color:transparent;overflow-x:clip}   /* A3 A-VIS-11: і на body (на частині Android body — scroll container); overflow сторінок лікують зони, fe_probe міряє innerWidth */
  :focus-visible{outline:3px solid var(--vx-focus);outline-offset:2px}   /* один focus-visible на сайт (§8.2); A: 3 px, ≥ 11:1 на всіх поверхнях */
  .vx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .vx-skip{position:absolute;left:16px;top:-64px;z-index:var(--vx-z-toast);padding:10px 14px;border-radius:10px;background:var(--vx-sf-3);color:var(--vx-ink-1);font:700 14px/1 var(--vx-f-text);text-decoration:none}
  .vx-skip:focus-visible{top:12px}
  body.vx svg.vi,[class*="vx-"] svg.vi,body > nav:not(.vx-dock) svg.vi{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}   /* лише кіт і шапка: легасі-іконки не чіпаємо */

  /* ---- легасі-база (з site_base.html, 1:1): body і main немігрованих сторінок ---- */
  :where(body:not(.vx)){font-family:var(--vx-f-text);background:var(--bg,var(--vx-bg-0));color:var(--vx-ink-2);min-height:100vh}
  :where(body:not(.vx)) main{max-width:1060px;margin:0 auto;padding:30px 18px 60px}
  ::selection{background:color-mix(in srgb,var(--vx-acc) 40%,transparent)}
  ::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:var(--vx-bg-0)}
  ::-webkit-scrollbar-thumb{background:var(--vx-sf-3);border-radius:8px;border:2px solid var(--vx-bg-0)}

  /* ---- мігрована сторінка: body.vx → базова типографіка кіту ---- */
  body.vx{margin:0;background:var(--vx-bg-0);color:var(--vx-ink-2);font:500 var(--vx-t-body)/1.5 var(--vx-f-text);
    font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;min-height:100vh}
  body.vx h1,body.vx h2,body.vx h3,body.vx h4,body.vx p{margin:0}
  body.vx a{color:var(--vx-info);text-decoration:none}
  body.vx button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0}
  body.vx input,body.vx select,body.vx textarea{font:inherit;color:inherit}
  body.vx main{max-width:var(--vx-container);margin:0 auto;padding:var(--vx-sp-5) var(--vx-gutter) var(--vx-sp-8)}
  body.vx.game main{max-width:var(--vx-container-game)}
  body.vx ::selection{background:var(--vx-acc-soft)}
  /*G1*/
  [hidden]{display:none!important}
  body.vx ::-webkit-scrollbar{width:10px;height:10px}
  body.vx ::-webkit-scrollbar-track{background:transparent}
  body.vx ::-webkit-scrollbar-thumb{border-radius:8px;border:3px solid transparent;background-clip:content-box;background-color:var(--vx-sf-3)}

  /* ---- §5.2 док для всіх сторінок з A2: main не ховається під доком (R10).
          Телефонна оболонка = (≤ 760) АБО ландшафт телефона (висота ≤ 480, ширина ≤ 1024 — 812×375, MOB-10, A-VIS-04);
          у ландшафті док — лівий стовпчик 56 px, main відступає зліва ---- */
  /*G1*/
  @media (max-width:760px), (orientation:landscape) and (max-height:480px) and (max-width:1024px){main,body.vx main{padding-bottom:calc(var(--vx-dock-h) + 16px)}}
  @media (orientation:landscape) and (max-height:480px) and (max-width:1024px){main,body.vx main{padding-bottom:var(--vx-sp-6);padding-left:calc(56px + env(safe-area-inset-left) + var(--vx-gutter))}}
  /* A0 MOB-01: iOS зумить сторінку при фокусі на інпут <16px */
  @media (max-width:760px), (orientation:landscape) and (max-height:480px) and (max-width:1024px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}}

  /* ---- §6.2 вхід/вихід сторінки (фолбек без view-transition: html без .vx-vt); A3 PM-02: вихід 60 мс, вхід 160 мс ---- */
  @keyframes vx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  html:not(.vx-vt) main{animation:vx-in 160ms var(--vx-e-out) backwards}   /* backwards + animationend → style.animation='none' (CORE-01) */
  body.vx-leaving main{opacity:0;transition:opacity 60ms var(--vx-e-in)}

  /* ---- §5.3 фон: нуль анімацій, нуль filter; акцент сторінки у верхньому радіалі ---- */
  /* A: одне тепле світло зверху (як золото в кадрі сховища) + віньєтка; без зірок, без фіолетових/рожевих радіалів */
  .vx-bg{position:fixed;inset:0;z-index:var(--vx-z-bg);pointer-events:none;background:
    radial-gradient(1100px 620px at 50% -12%,color-mix(in srgb,var(--vx-gold) 9%,transparent),transparent 72%),
    radial-gradient(140% 100% at 50% 40%,transparent 55%,rgba(5,4,3,.55) 100%),
    var(--vx-bg-0)}
  /* ігрові сторінки: статична перспективна неон-сітка знизу (opacity .06) */
  body.game .vx-bg::before{content:"";position:absolute;inset:auto 0 0 0;height:min(60vh,560px);opacity:.06;pointer-events:none;
    background:url("img/grid-floor.svg") center bottom/cover no-repeat}

  /* ---- §4.8 контейнери тостів і aria-live (у body) ---- */
  #vx-toasts{position:fixed;top:calc(var(--vx-nav-h) + 12px);right:16px;z-index:var(--vx-z-toast);display:flex;flex-direction:column;gap:8px;
    width:min(360px,calc(100vw - 32px));pointer-events:none;margin:0;padding:0}
  @media (max-width:760px){#vx-toasts{top:auto;bottom:calc(var(--vx-dock-h) + 8px);right:16px;left:16px;width:auto}}
  @media (orientation:landscape) and (max-height:480px) and (max-width:1024px){#vx-toasts{top:auto;bottom:8px;right:16px;left:auto;width:min(360px,calc(100vw - 88px))}}
  #vx-live-assertive{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* v4: cookie-тост — окремо, знизу ліворуч; на телефоні над доком, звичайні тости тоді піднімаються над ним */
  #vx-cookie{position:fixed;left:16px;bottom:16px;z-index:var(--vx-z-toast);width:min(400px,calc(100vw - 32px));pointer-events:none;margin:0;padding:0}
  #vx-cookie .vx-toast{pointer-events:auto}
  @media (max-width:760px){#vx-cookie{bottom:calc(var(--vx-dock-h) + 8px)} body:has(#vx-cookie .vx-toast) #vx-toasts{bottom:calc(var(--vx-dock-h) + 72px)}}
  /* екран входу на телефоні: обидві кнопки внизу першого екрана — тост лягає на кадр сцени під шапкою, а не на них */
  @media (max-width:760px){body.gate #vx-cookie{top:calc(var(--vx-nav-h) + 8px);bottom:auto}}
  /* лендинг на ПК: зліва внизу — заголовок «Что внутри» на згині; праворуч там лише кадр */
  @media (min-width:761px){body.ld #vx-cookie{left:auto;right:16px}}
  @media (orientation:landscape) and (max-height:480px) and (max-width:1024px){#vx-cookie{left:calc(56px + env(safe-area-inset-left) + 16px);bottom:8px;width:min(400px,calc(100vw - 88px))}}

  /* ---- §6.5 єдиний канвас частинок ---- */
  #vx-fx{position:fixed;inset:0;z-index:var(--vx-z-fx);pointer-events:none;width:100%;height:100%}

}

/* Оболонка — у @layer kit (перед kit.css/vrth.css у тому ж шарі): її селектори мають перемагати генеричні
   .vi/.tgl-правила легасі-кіту (vrth.css теж у kit), а не програвати їм як base < kit (DESIGN §9.1). */
@layer kit{
  /* ============================================================
     §5.1 / §5.2 шапка: один ряд 64 px (56 на ≤ 760), без backdrop-filter, sticky. Селектор body > nav:not(.vx-dock) — щоб і легасі-nav лендінга
     ({% block nav %} у landing.html, зона F) отримав оболонку, а док (теж <nav> у body) — ніколи (A-VIS-01: інакше top:0 + gap + border приклеюють док до шапки).
     Хуки оболонки — лише .vx-* або унікальні імена (.is-ringing, .vx-dr-*): голі .ring/.tgl/.it/.hd/.lbl перекривав нешаровий інлайн сторінок (A-VIS-02, §9.2 №1).
     ============================================================ */
  body > nav:not(.vx-dock){position:sticky;top:0;z-index:var(--vx-z-sticky);display:flex;align-items:center;gap:4px;height:64px;padding:0 var(--vx-gutter);
    background:color-mix(in srgb,var(--vx-bg-0) 92%,transparent);border-bottom:1px solid var(--vx-ln-1);
    white-space:nowrap;flex-wrap:nowrap;color:var(--vx-ink-2);font-family:var(--vx-f-text);animation:none;view-transition-name:nav}   /* box-shadow не анімується (PM-04, §6.1) */
  body > nav:not(.vx-dock).is-scrolled{box-shadow:var(--vx-el-1);background:var(--vx-bg-0)}
  body > nav:not(.vx-dock) a{text-decoration:none;color:inherit}
  body > nav:not(.vx-dock) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  /* лого + бренд-перемикач */
  body > nav:not(.vx-dock) .brandgrp{position:relative;display:inline-flex;align-items:center;gap:2px;margin-right:6px;flex:none}
  body > nav:not(.vx-dock) .logo{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px;border-radius:10px;color:var(--vx-ink-1)}
  body > nav:not(.vx-dock) .logo .logo-mark{width:28px;height:28px;flex:none}
  body > nav:not(.vx-dock) .logo .logo-txt{font:600 18px/1 var(--vx-f-text);letter-spacing:.16em;color:var(--vx-ink-1)}   /* A: суцільне чорнило, без градієнтного тексту */
  body > nav:not(.vx-dock) .logo .logo-mark{color:var(--vx-gold)}
  body > nav:not(.vx-dock) .logo-tag{font:800 10px/1 var(--vx-f-text);letter-spacing:.1em;padding:3px 6px;border-radius:6px;background:color-mix(in srgb,currentColor 16%,transparent)}
  body > nav:not(.vx-dock) .brandsw{width:28px;height:40px;display:grid;place-items:center;border-radius:8px;color:var(--vx-ink-4)}
  body > nav:not(.vx-dock) .brandsw .vi{width:14px;height:14px}
  body > nav:not(.vx-dock) .brandmenu{left:0;min-width:250px}
  body > nav:not(.vx-dock) .brandmenu .bm-it{display:flex;align-items:center;gap:11px;min-height:48px;padding:6px 10px;border-radius:10px}
  body > nav:not(.vx-dock) .brandmenu .bm-it.on{background:var(--vx-sf-2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ba) 40%,transparent)}
  body > nav:not(.vx-dock) .brandmenu .bm-ic{font-size:20px;flex:none;width:28px;text-align:center}
  body > nav:not(.vx-dock) .brandmenu .bm-tx{display:flex;flex-direction:column;min-width:0}
  body > nav:not(.vx-dock) .brandmenu .bm-tx b{font-size:14px;color:var(--vx-ink-1);font-weight:800}
  body > nav:not(.vx-dock) .brandmenu .bm-tx b i{font-style:normal}
  body > nav:not(.vx-dock) .brandmenu .bm-tx small{font-size:12px;color:var(--vx-ink-3);margin-top:2px}
  /* дропдаун (група, бренд, дзвінок) — без blur, --vx-z-drawer */
  body > nav:not(.vx-dock) .dd{position:absolute;top:calc(100% + 6px);left:0;min-width:224px;padding:6px;border-radius:14px;background:var(--vx-sf-1);border:1px solid var(--vx-ln-2);
    box-shadow:var(--vx-el-2);display:none;flex-direction:column;gap:2px;z-index:var(--vx-z-drawer);white-space:nowrap;animation:vx-dd-in var(--vx-d-3) var(--vx-e-out)}
  body > nav:not(.vx-dock) .dd::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}   /* hover-міст */
  body > nav:not(.vx-dock) .dd.open,body > nav:not(.vx-dock) .grp.open>.dd{display:flex}
  @keyframes vx-dd-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  body > nav:not(.vx-dock) .dd a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:10px;color:var(--vx-ink-2);font:700 14px/1.2 var(--vx-f-text);transition:background-color var(--vx-d-2),color var(--vx-d-2)}
  body > nav:not(.vx-dock) .dd a .vi{width:18px;height:18px;color:var(--vx-ink-3);flex:none}
  body > nav:not(.vx-dock) .dd a.on{background:var(--vx-acc-soft);color:var(--vx-acc-ink)} body > nav:not(.vx-dock) .dd a.on .vi{color:var(--vx-acc-ink)}
  body > nav:not(.vx-dock) .dd a.ov{color:var(--vx-acc-ink);border-bottom:1px solid var(--vx-ln-1);border-radius:10px 10px 0 0;margin-bottom:3px}
  @media (hover:hover){body > nav:not(.vx-dock) .dd a:hover{background:var(--vx-sf-2);color:var(--vx-ink-1)}body > nav:not(.vx-dock) .dd a:hover .vi{color:var(--vx-ink-1)}}
  /* групи */
  body > nav:not(.vx-dock) .nav-links{display:flex;align-items:center;gap:2px;min-width:0}
  body > nav:not(.vx-dock) .grp{position:relative;flex:none}
  body > nav:not(.vx-dock) .lnk{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:10px;color:var(--vx-ink-2);font:700 14px/1 var(--vx-f-text);cursor:pointer;
    transition:background-color var(--vx-d-2),color var(--vx-d-2)}
  body > nav:not(.vx-dock) .lnk .vi{width:18px;height:18px;flex:none}
  body > nav:not(.vx-dock) .lnk .car{width:12px;height:12px;color:var(--vx-ink-4);transition:transform var(--vx-d-2)}
  body > nav:not(.vx-dock) .grp.open>.lnk .car{transform:rotate(180deg)}
  @media (hover:hover){body > nav:not(.vx-dock) .lnk:hover{background:var(--vx-sf-2);color:var(--vx-ink-1)}}
  body > nav:not(.vx-dock) .lnk.on{background:var(--vx-acc-soft);color:var(--vx-acc-ink)} body > nav:not(.vx-dock) .lnk.on .vi{color:var(--vx-acc-ink)}
  body > nav:not(.vx-dock) .lnk:active{transform:scale(.97)}
  /* чип сезону (замість кнопки «Баттлпас») */
  body > nav:not(.vx-dock) .season{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 10px;margin-left:6px;border-radius:999px;flex:none;
    background:color-mix(in srgb,var(--vx-gold) 10%,var(--vx-sf-1));border:1px solid color-mix(in srgb,var(--vx-gold) 30%,transparent);
    font:700 13px/1 var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-ink-1);transition:border-color var(--vx-d-2)}
  body > nav:not(.vx-dock) .season .vi{width:16px;height:16px;color:var(--vx-gold)}
  body > nav:not(.vx-dock) .season .lv{color:var(--vx-gold)}
  body > nav:not(.vx-dock) .season .dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--vx-ok);border:2px solid var(--vx-bg-0);display:none}
  body > nav:not(.vx-dock) .season.has-claim .dot{display:block}
  body > nav:not(.vx-dock) .season.on{border-color:var(--vx-gold)}
  @media (hover:hover){body > nav:not(.vx-dock) .season:hover{border-color:color-mix(in srgb,var(--vx-gold) 60%,transparent)}}
  /* правий кластер */
  body > nav:not(.vx-dock) .nav-right{margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex:none}
  body > nav:not(.vx-dock) .sp{flex:1 1 auto;min-width:4px}
  body > nav:not(.vx-dock) .vx-bal{height:40px}
  body > nav:not(.vx-dock) .jp{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;background:var(--vx-sf-1);border:1px solid var(--vx-ln-2);
    font:800 14px/1 var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-gold);transition:border-color var(--vx-d-2)}
  body > nav:not(.vx-dock) .jp .vi{width:16px;height:16px}
  body > nav:not(.vx-dock) .jp b{font-weight:800}
  @media (hover:hover){body > nav:not(.vx-dock) .jp:hover{border-color:color-mix(in srgb,var(--vx-gold) 50%,transparent)}}
  body > nav:not(.vx-dock) .ic-btn{position:relative;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--vx-ink-2);flex:none;transition:background-color var(--vx-d-2),color var(--vx-d-2)}
  body > nav:not(.vx-dock) .ic-btn .vi{width:20px;height:20px}
  @media (hover:hover){body > nav:not(.vx-dock) .ic-btn:hover{background:var(--vx-sf-2);color:var(--vx-ink-1)}}
  body > nav:not(.vx-dock) .ic-btn:active{transform:scale(.94)}
  body > nav:not(.vx-dock) .ic-btn.glow{color:var(--vx-acc-ink)}
  body > nav:not(.vx-dock) .ic-btn.is-ringing .vi{animation:vx-bellring .7s var(--vx-e-out)}
  @keyframes vx-bellring{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}}
  body > nav:not(.vx-dock) .bell-dot{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--vx-live);color:var(--vx-ink-on-acc);
    font:800 10px/16px var(--vx-f-text);text-align:center;box-shadow:0 0 0 2px var(--vx-bg-0);animation:vx-pop 300ms var(--vx-e-spring)}
  /* аватар → ранг */
  body > nav:not(.vx-dock) .avbtn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 6px 0 4px;border-radius:999px;background:var(--vx-sf-1);border:1px solid var(--vx-ln-2);cursor:pointer;flex:none;
    transition:border-color var(--vx-d-2)}
  @media (hover:hover){body > nav:not(.vx-dock) .avbtn:hover{border-color:var(--vx-ln-3)}}
  body > nav:not(.vx-dock) .avbtn .av-im{width:30px;height:30px;border-radius:50%;overflow:hidden;display:grid;place-items:center;flex:none;background:var(--vx-sf-3);color:hsl(var(--av-h,200) 70% 70%)}
  body > nav:not(.vx-dock) .avbtn .av-im img{width:100%;height:100%;object-fit:cover;display:block}
  body > nav:not(.vx-dock) .avbtn .av-im .vi{width:18px;height:18px}
  body > nav:not(.vx-dock) .avbtn .vx-rank{--s:28px;font-size:12px}
  body > nav:not(.vx-dock) .avbtn .car{width:12px;height:12px;color:var(--vx-ink-4)}
  body > nav:not(.vx-dock) .avbtn.prem .av-im{box-shadow:0 0 0 2px var(--vx-gold)}
  body > nav:not(.vx-dock) .avbtn.prem.p3 .av-im{box-shadow:0 0 0 2px var(--vx-pink)}
  body > nav:not(.vx-dock) .vx-nav-cta{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;background:transparent;border:1px solid color-mix(in srgb,var(--vx-acc) 60%,transparent);color:var(--vx-acc-ink);font:600 14px/1 var(--vx-f-text);
    transition:transform var(--vx-d-2)}   /* v4 A: контур, не заливка — заливка лишається одній головній дії сторінки */
  body > nav:not(.vx-dock) .vx-nav-cta .vi{width:18px;height:18px}
  @media (hover:hover){body > nav:not(.vx-dock) .vx-nav-cta:hover{transform:translateY(-1px)}}
  body > nav:not(.vx-dock) .lang-sw{display:inline-flex;gap:2px}
  body > nav:not(.vx-dock) .lnk.lg{padding:0 8px;font-size:12px;color:var(--vx-ink-3)}
  body > nav:not(.vx-dock) .burger{display:none;width:40px;height:40px;border-radius:10px;place-items:center;color:var(--vx-ink-2);flex:none}
  body > nav:not(.vx-dock) .burger .vi{width:22px;height:22px}
  /* ---- дзвінок: дропдаун на десктопі, sheet у в'юпорті на ≤ 760 ---- */
  body > nav:not(.vx-dock) .bell-menu{position:absolute;top:calc(100% + 8px);right:0;left:auto;width:340px;max-width:calc(100vw - 32px);z-index:var(--vx-z-drawer);
    background:var(--vx-sf-1);border:1px solid var(--vx-ln-2);border-radius:14px;box-shadow:var(--vx-el-2);overflow:hidden;display:none;animation:vx-dd-in var(--vx-d-3) var(--vx-e-out);white-space:normal}
  body > nav:not(.vx-dock) .bell-menu.open{display:block}
  body > nav:not(.vx-dock) .bell-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;font:800 14px/1.2 var(--vx-f-text);color:var(--vx-ink-1);border-bottom:1px solid var(--vx-ln-1)}
  body > nav:not(.vx-dock) .bell-hd .vi{width:16px;height:16px;color:var(--vx-ink-3)}
  body > nav:not(.vx-dock) .bell-clr{color:var(--vx-ink-3);font:700 12px/1 var(--vx-f-text);text-transform:uppercase;letter-spacing:.06em;min-height:32px;padding:0 6px;border-radius:8px}
  body > nav:not(.vx-dock) .bell-tabs{display:flex;gap:4px;padding:8px 10px 4px}
  body > nav:not(.vx-dock) .bell-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;border-radius:9px;font:700 13px/1 var(--vx-f-text);color:var(--vx-ink-3);background:var(--vx-sf-2);cursor:pointer}
  body > nav:not(.vx-dock) .bell-tab .vi{width:14px;height:14px}
  body > nav:not(.vx-dock) .bell-tab.on{color:var(--vx-acc-ink);background:var(--vx-acc-soft)}
  body > nav:not(.vx-dock) .bell-prefs{padding:4px 6px 10px;max-height:300px;overflow:auto}
  body > nav:not(.vx-dock) .bell-pref{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 10px;border-radius:9px;cursor:pointer;font:600 14px/1.2 var(--vx-f-text);color:var(--vx-ink-2)}
  body > nav:not(.vx-dock) .bell-pref .pf-ic{display:grid;place-items:center;width:22px;height:22px;color:var(--vx-ink-3);flex:none}
  body > nav:not(.vx-dock) .bell-pref .pf-ic .vi{width:16px;height:16px}
  body > nav:not(.vx-dock) .bell-pref .vx-tgl{margin-left:auto}
  body > nav:not(.vx-dock) .bell-phint{font:600 12px/1.4 var(--vx-f-text);color:var(--vx-ink-3);padding:6px 12px 8px}
  body > nav:not(.vx-dock) .bell-list{max-height:min(360px,60vh);overflow-y:auto}
  body > nav:not(.vx-dock) .bell-it{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--vx-ln-1);position:relative}
  body > nav:not(.vx-dock) .bell-it.unread{background:var(--vx-acc-soft)}
  body > nav:not(.vx-dock) .bell-it.unread::before{content:"";position:absolute;left:5px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--vx-acc-ink);transform:translateY(-50%)}
  body > nav:not(.vx-dock) .bell-ic{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--vx-sf-2);color:var(--vx-ink-2)}   /* A-VIS-12: спрайт замість емодзі (§5.4) */
  body > nav:not(.vx-dock) .bell-ic .vi{width:16px;height:16px}
  body > nav:not(.vx-dock) .bell-ic.pos{color:var(--vx-ok)} body > nav:not(.vx-dock) .bell-ic.neg{color:var(--vx-err)} body > nav:not(.vx-dock) .bell-ic.hot{color:var(--vx-acc-ink);background:var(--vx-acc-soft)}
  body > nav:not(.vx-dock) .bell-bd{flex:1;min-width:0}
  body > nav:not(.vx-dock) .bell-tt{font:800 13px/1.3 var(--vx-f-text);color:var(--vx-ink-1)}
  body > nav:not(.vx-dock) .bell-sb{font:600 12px/1.3 var(--vx-f-text);color:var(--vx-ink-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body > nav:not(.vx-dock) .bell-tm{font:600 12px/1 var(--vx-f-text);color:var(--vx-ink-3);margin-top:3px}   /* A-VIS-05: ink-3 ≥ 4.5:1 і на фоні unread */
  body > nav:not(.vx-dock) .bell-am{font:800 13px/1 var(--vx-f-text);font-variant-numeric:tabular-nums;white-space:nowrap;align-self:center}
  body > nav:not(.vx-dock) .bell-am.pos{color:var(--vx-ok)} body > nav:not(.vx-dock) .bell-am.neg{color:var(--vx-err)}
  body > nav:not(.vx-dock) .bell-empty{padding:34px 16px;text-align:center;color:var(--vx-ink-3);font:600 13px/1.4 var(--vx-f-text)}
  body > nav:not(.vx-dock) .bell-empty .vi{width:26px;height:26px;display:block;margin:0 auto 7px;opacity:.5}
  /* ---- брейкпоінти: ≥1500 іконка+підпис · 1200–1499 іконка+caret · <1200 бургер · ≤760 56 px і док ---- */
  @media (max-width:1499px){body > nav:not(.vx-dock) .lnk .tx{display:none}body > nav:not(.vx-dock) .lnk{padding:0 10px}body > nav:not(.vx-dock) .season .tx{display:none}}
  @media (max-width:1199px){body > nav:not(.vx-dock) .nav-links{display:none}body > nav:not(.vx-dock) .burger{display:grid}}
  @media (max-width:760px), (orientation:landscape) and (max-height:480px) and (max-width:1024px){
    body > nav:not(.vx-dock){height:56px;gap:2px}
    body > nav:not(.vx-dock) .burger,body > nav:not(.vx-dock) .jp,body > nav:not(.vx-dock) .brandsw,body > nav:not(.vx-dock) .avbtn .av-im,body > nav:not(.vx-dock) .avbtn .car,body > nav:not(.vx-dock) .logo-tag{display:none}
    body > nav:not(.vx-dock) .brandgrp{margin-right:0}
    body > nav:not(.vx-dock) .logo{padding:0 2px;gap:6px}
    body > nav:not(.vx-dock) .logo .logo-txt{font-size:16px}
    body > nav:not(.vx-dock) .nav-right{gap:4px}
    body > nav:not(.vx-dock) .avbtn{padding:0 4px;background:none;border:0}
    body > nav:not(.vx-dock) .vx-nav-cta{height:36px;padding:0 12px;font-size:13px}
    body > nav:not(.vx-dock) .bell-menu{position:fixed;top:calc(var(--vx-nav-h) + 8px);left:12px;right:12px;width:auto;max-width:none;max-height:calc(100dvh - var(--vx-nav-h) - var(--vx-dock-h) - 16px);overflow-y:auto}
  }
  @media (orientation:landscape) and (max-height:480px) and (max-width:1024px){body > nav:not(.vx-dock) .bell-menu{left:auto;right:12px;width:340px;max-height:calc(100dvh - var(--vx-nav-h) - 16px)}}
  @media (max-width:340px){body > nav:not(.vx-dock) .logo .logo-txt{display:none}}   /* A-VIS-07: на 375 wordmark видно (§5.2 «[V] VRTH …»); ховається лише на дуже вузьких */

  /* ---- drawer як нативний <dialog> (меню аватара, «Ещё»/бургер): справа 320 на десктопі, sheet на ≤ 760 (MOB-04, MOB-09) ---- */
  dialog.vx-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(320px,88vw);height:100%;max-height:none;max-width:none;border:0;border-left:1px solid var(--vx-ln-2);border-radius:0;
    padding:12px 8px;background:var(--vx-sf-1);color:var(--vx-ink-2);box-shadow:var(--vx-el-2);overflow-y:auto;overscroll-behavior:contain;font:500 15px/1.4 var(--vx-f-text)}
  dialog.vx-drawer[open]{display:flex;flex-direction:column;gap:2px;animation:vx-drawer-in var(--vx-d-4) var(--vx-e-out)}
  dialog.vx-drawer.closing{animation:vx-drawer-out 160ms var(--vx-e-in) forwards}
  dialog.vx-drawer::backdrop{background:var(--vx-scrim)}
  @keyframes vx-drawer-in{from{transform:translateX(100%);opacity:0}to{transform:none;opacity:1}}   /* PM-03: 320 мс вхід (§6.1 drawer), лише transform+opacity */
  @keyframes vx-drawer-out{to{transform:translateX(100%);opacity:0}}
  .vx-drawer .vx-dr-handle{display:none;width:36px;height:4px;border-radius:2px;background:var(--vx-ln-3);margin:0 auto 8px;flex:none}
  .vx-drawer .vx-dr-hd{display:flex;align-items:center;gap:11px;padding:6px 8px 12px}
  .vx-drawer .vx-dr-hd .av-im{width:44px;height:44px;border-radius:13px;overflow:hidden;display:grid;place-items:center;background:var(--vx-sf-3);color:hsl(var(--av-h,200) 70% 70%);flex:none}
  .vx-drawer .vx-dr-hd .av-im img{width:100%;height:100%;object-fit:cover;display:block}
  .vx-drawer .vx-dr-hd .av-im .vi{width:24px;height:24px}
  .vx-drawer .vx-dr-hd .vx-dr-nm{font:800 15px/1.1 var(--vx-f-text);color:var(--vx-ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vx-drawer .vx-dr-hd .vx-dr-sub{font:600 12px/1.2 var(--vx-f-text);color:var(--vx-ink-3);margin-top:3px}
  .vx-drawer .vx-dr-hd .vx-dr-x{margin-left:auto}
  .vx-drawer .vx-dr-it .vx-dr-sfx{margin-left:auto;font:700 12px/1 var(--vx-f-text);color:var(--vx-ink-3)}
  .vx-drawer .vx-dr-it .vx-tgl{margin-left:auto}
  .vx-drawer .vx-dr-it.danger{color:var(--vx-err)} .vx-drawer .vx-dr-it.danger .vi{color:var(--vx-err)}
  .vx-drawer .vx-dr-foot{position:sticky;bottom:-12px;margin:auto -8px -12px;padding:6px 8px calc(12px + env(safe-area-inset-bottom));background:var(--vx-sf-1);border-top:1px solid var(--vx-ln-1);flex:none}   /* A-VIS-10: «Выйти» завжди видно */
  .vx-drawer .grp-d{display:flex;flex-direction:column;gap:2px}
  .vx-drawer .grp-d>.vx-dr-it .car{margin-left:auto;width:14px;height:14px;transition:transform var(--vx-d-2)}
  .vx-drawer .grp-d>.sub-d{display:none;flex-direction:column;gap:2px;padding-left:12px}
  .vx-drawer .grp-d.open>.sub-d{display:flex}
  .vx-drawer .grp-d.open>.vx-dr-it .car{transform:rotate(180deg)}
  .vx-drawer .langrow{display:flex;gap:5px;padding:4px 8px 6px}
  .vx-drawer .langrow a{flex:1;justify-content:center;min-height:40px;background:var(--vx-sf-2);font-size:13px}
  .vx-drawer .langrow a.is-on{background:var(--vx-acc-soft);color:var(--vx-acc-ink)}
  .vx-drawer a{text-decoration:none;color:inherit}
  .vx-drawer .bm-it{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--vx-ink-2);font:700 14px/1.2 var(--vx-f-text)}
  .vx-drawer .bm-it .bm-ic{width:22px;text-align:center;font-size:16px}
  .vx-drawer .bm-it.on{background:var(--vx-sf-2);color:var(--vx-ink-1)}
  .vx-drawer .bm-it small{display:block;font-weight:600;font-size:12px;color:var(--vx-ink-3)}
  @media (max-width:760px), (orientation:landscape) and (max-height:480px) and (max-width:1024px){
    dialog.vx-drawer{inset:auto 0 0 0;width:auto;height:auto;max-height:92dvh;border-left:0;border-top:1px solid var(--vx-ln-2);border-radius:20px 20px 0 0;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
    dialog.vx-drawer[open]{animation:vx-sheet-in var(--vx-d-4) var(--vx-e-out)}
    dialog.vx-drawer.closing{animation:vx-sheet-out 160ms var(--vx-e-in) forwards}
    .vx-drawer .vx-dr-handle{display:block}
    .vx-drawer .vx-dr-foot{bottom:calc(-12px - env(safe-area-inset-bottom))}
  }
  @keyframes vx-sheet-out{to{transform:translateY(100%)}}
  @media (min-width:1200px){.vx-drawer .only-m{display:none}}

  /* ---- чат-док (легасі-віджет .cw у контейнері .vx-chatdock): десктоп; на ≤ 760 не показується (CAS-02) ---- */
  .cw{position:fixed;right:18px;bottom:18px;z-index:var(--vx-z-dock)}
  .cw-bubble{width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;position:relative;background:var(--vx-acc);color:var(--vx-ink-on-acc);display:grid;place-items:center;
    box-shadow:0 10px 30px -6px var(--vx-acc-glow),0 4px 14px rgba(0,0,0,.5);transition:transform var(--vx-d-2)}
  @media (hover:hover){.cw-bubble:hover{transform:translateY(-2px)}}
  .cw.open .cw-bubble{display:none}
  .cw-bubble .vi{width:24px;height:24px}
  .cw-dot{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:9px;background:var(--vx-live);color:#fff;font:800 10px/14px var(--vx-f-text);display:none;place-items:center;padding:0 4px;border:2px solid var(--vx-bg-0)}
  .cw-panel{display:none;flex-direction:column;width:344px;max-width:92vw;height:444px;max-height:72vh;background:var(--vx-sf-1);border:1px solid var(--vx-ln-2);border-radius:18px;overflow:hidden;box-shadow:var(--vx-el-2)}
  .cw.open .cw-panel{display:flex;animation:vx-dd-in var(--vx-d-3) var(--vx-e-out)}
  .cw-hd{display:flex;align-items:center;gap:8px;padding:11px 12px;cursor:grab;user-select:none;background:var(--vx-sf-2);border-bottom:1px solid var(--vx-ln-1);font:800 14px/1 var(--vx-f-text);color:var(--vx-ink-1)}
  .cw-hd.drag{cursor:grabbing}
  .cw-hd .cw-t{display:inline-flex;align-items:center;gap:6px}.cw-hd .sp{flex:1}
  .cw-hd .vi{width:15px;height:15px}
  .cw-ic{background:var(--vx-sf-3);border:0;color:var(--vx-ink-2);width:28px;height:28px;border-radius:8px;cursor:pointer;display:grid;place-items:center;text-decoration:none}
  .cw-feed{flex:1;overflow-y:auto;padding:10px 11px;display:flex;flex-direction:column;gap:9px}
  .cw-m{display:flex;gap:8px;align-items:flex-start}
  .cw-m img,.cw-m .na{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;background:var(--vx-sf-3)}
  .cw-m .mb{min-width:0}.cw-m .mn{font:800 12px/1.2 var(--vx-f-text);color:var(--vx-ink-3);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
  .cw-m .mn .ci{font-size:12px}
  .cw-role{font-size:9px;font-weight:900;letter-spacing:.3px;border:1px solid;border-radius:5px;padding:0 4px;line-height:1.5}
  .cw-m .mn.cw-dev{color:var(--vx-pink)}
  .cw-m .mt{font:500 13px/1.35 var(--vx-f-text);color:var(--vx-ink-1);word-break:break-word}
  .cw-in{display:flex;gap:7px;padding:9px;border-top:1px solid var(--vx-ln-1)}
  .cw-in input{flex:1;min-width:0;height:40px;background:var(--vx-sf-2);border:1px solid var(--vx-ln-2);border-radius:10px;color:var(--vx-ink-1);padding:0 11px;font:600 16px/1 var(--vx-f-text)}
  .cw-in input:focus{outline:0;border-color:var(--vx-acc-ink)}
  .cw-in button{background:var(--vx-acc);border:0;color:var(--vx-ink-on-acc);border-radius:10px;width:44px;height:40px;cursor:pointer;display:grid;place-items:center}
  .cw-in button .vi{width:16px;height:16px}
  .cw.is-quiet{opacity:.4;pointer-events:none}
  @media (max-width:760px), (orientation:landscape) and (max-height:480px) and (max-width:1024px){.cw{display:none}}

  /* ---- §6.9 reduced motion — один блок. Токени вже дали --vx-d-*:1ms і --vx-inf:1; тут — те, що не керується токенами.
          A3 A-VIS-03 (MOT-03): «0 infinite під RM» має виконуватись і на немігрованих сторінках → шарований !important
          (important у шарі перемагає нешаровий звичайний інлайн) обмежує будь-яку анімацію в main до 1 ітерації —
          без animation:none, тож transitionend/animationend/finish працюють; плюс kill-list відомих легасі-амбієнтів ---- */
  @media (prefers-reduced-motion:reduce){
    main,html:not(.vx-vt) main{animation:none}
    body.vx-leaving main{transition:none}
    .vx-bg,.vx-bg::after,.vx-bg::before{animation:none}
    #vx-fx{display:none}
    body > nav:not(.vx-dock) .dd,body > nav:not(.vx-dock) .bell-menu,.cw.open .cw-panel,dialog.vx-drawer[open],dialog.vx-drawer.closing{animation-duration:1ms}
    body > nav:not(.vx-dock) .ic-btn.is-ringing .vi,body > nav:not(.vx-dock) .bell-dot{animation:none}
    main *,main *::before,main *::after{animation-iteration-count:1!important}
    .hub-atmo,.hh-ic,.machine-amb,.g-amb-p,.pdot,.av-t3,.nick-dev,.cx-bg,.cx-crys,.zrain,.zcloud,.zstorm,.zember,.machine-amb::before,.machine-amb::after,.hub-atmo::before,.hub-atmo::after{animation:none!important}
  }
}