/* v269: a11y-хелпер — приховати візуально, лишити для скрін-рідерів */
.kp-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.kp-global-header {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: var(--n-bg-2);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border-bottom: 1px solid var(--n-line);
  box-shadow: var(--n-sh-md);
}

.kp-global-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--n-accent-soft), transparent);
  opacity: .72;
}

.kp-global-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  /* v271: було max-width:var(--n-container-xl) (вміст обмежений 1200px і
     центрований) — хедер виглядав «не на всю ширину». Тепер вміст на всю
     ширину екрана з боковими відступами. */
  max-width: 100%;
  margin: 0;
  padding: 0 20px;
}

.kp-global-header__main,
.kp-global-header__utility,
.kp-global-header__appearance {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.kp-global-header__utility {
  justify-content: flex-end;
}

.kp-global-header__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--n-text);
}

.kp-global-header__brand-mark {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--n-accent);
  color: #fff;
  font-weight: var(--n-w-bold);
  letter-spacing: .04em;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--n-accent) 22%, transparent);
}

[data-theme="light"] .kp-global-header__brand-mark {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--n-accent) 18%, transparent);
}

.kp-global-header__toggle, .kp-global-header__bell, .kp-global-header__controls-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--n-line);
  /* v269: було var(--n-r-pill) (круглі) — тепер 14px як логотип brand-mark
     (щоб усі елементи хедера мали єдину квадратно-скруглену форму). */
  border-radius: 14px;
  background: var(--n-bg-2);
  color: var(--n-text);
  cursor: pointer;
  transition: transform var(--n-dur-fast) var(--n-ease),
              background var(--n-dur-fast) var(--n-ease),
              border-color var(--n-dur-fast) var(--n-ease),
              box-shadow var(--n-dur-fast) var(--n-ease),
              color var(--n-dur-fast) var(--n-ease);
}

.kp-global-header__toggle:hover, .kp-global-header__toggle:focus-visible, .kp-global-header__bell:hover, .kp-global-header__bell:focus-visible, .kp-global-header__controls-btn:hover, .kp-global-header__controls-btn:focus-visible{
  background: var(--n-bg-hover);
  border-color: var(--n-line);
  box-shadow: var(--n-sh-sm);
}

.kp-global-header__toggle {
  padding-inline: 12px;
}

.kp-global-header__toggle-lines {
  display: inline-grid;
  gap: 4px;
}

.kp-global-header__toggle-lines span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.kp-global-header__toggle-text,
.kp-global-header__bell-text,
.kp-global-header__controls-text {
  font-size: var(--n-fs);
  font-weight: var(--n-w-bold);
}

.kp-global-header__bell,
.kp-global-header__notifications {
  position: relative;
}

.kp-global-header__bell-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--n-danger, #d44f4f);
  box-shadow: 0 0 0 3px var(--n-bg-2);
}

.kp-global-header__dropdown, .kp-global-header__notifications{
  position: relative;
}

.kp-global-header__dropdown-menu, .kp-global-header__notifications-popover{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(420px, calc(100vw - 24px));
  max-height: min(78vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid var(--n-line);
  border-radius: 24px;
  background: var(--n-bg-2);
  box-shadow: var(--n-sh-lg);
}

.kp-global-header__dropdown-menu{
  display: none;
}

.kp-global-header__dropdown.is-open > .kp-global-header__dropdown-menu,
.kp-global-header__picker.is-open > .kp-global-header__picker-menu {
  display: block;
}

.kp-global-header__dropdown-menu[hidden], .kp-global-header__notifications-popover[aria-hidden="true"]{
  display: none;
}

.kp-global-header__controls-head,
.kp-global-header__notifications-head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.kp-global-header__controls-eyebrow{
  color: var(--n-text-mute);
  font-size: var(--n-fs);
  font-weight: var(--n-w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kp-global-header__controls-section--card, .kp-global-header__notifications-list{
  border: 1px solid var(--n-line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--n-bg-2) 88%, var(--n-accent-soft) 12%);
}

.kp-global-header__controls-section-head{
  display: grid;
  gap: 8px;
}

.kp-global-header__controls-list, .kp-global-header__controls-grid{
  display: grid;
  gap: 8px;
}

.kp-global-header__controls-grid--themes{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kp-global-header__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--n-line);
  border-radius: 16px;
  background: var(--n-bg-2);
  color: var(--n-text);
  text-decoration: none;
}

.kp-global-header__option:hover,
.kp-global-header__option:focus-visible {
  background: color-mix(in srgb, var(--n-accent) 12%, var(--n-bg-2));
  border-color: var(--n-accent-border);
  color: var(--n-text-strong);
}

.kp-global-header__option.is-active {
  color: var(--n-text-on-accent);
  background: var(--n-accent);
  border-color: transparent;
}

.kp-global-header__option.is-active .kp-global-header__option-meta,
.kp-global-header__option.is-active .kp-global-header__theme-icon,
.kp-global-header__option.is-active .kp-global-header__accent-swatch {
  color: inherit;
}

.kp-global-header__option-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: var(--n-fs);
  font-weight: var(--n-w-sem);
}

.kp-global-header__option-meta {
  font-size: var(--n-fs);
  font-weight: var(--n-w-bold);
  color: var(--n-text-soft);
}
.kp-global-header__option:hover .kp-global-header__option-meta,
.kp-global-header__option:focus-visible .kp-global-header__option-meta {
  color: var(--n-text-strong);
}

.kp-global-header__notifications-list{
  padding: 8px;
}

.kp-global-header__notifications-item{
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  color: var(--n-text);
  text-decoration: none;
}

.kp-global-header__notifications-item:hover, .kp-global-header__notifications-item:focus-visible{
  background: var(--n-bg-hover);
}

.kp-global-header__notifications-empty {
  padding: 12px 14px;
  color: var(--n-text-mute);
}

.kp-global-header__panel {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(420px, calc(100vw - 16px));
  max-width: 100%;
  transform: translateX(-104%);
  transition: transform var(--n-dur-base) var(--n-ease);
  z-index: 1290;
}

.kp-global-header__panel[aria-hidden="true"] {
  display: none !important;
}

.kp-global-header__panel[aria-hidden="false"] {
  display: block;
  transform: translateX(0);
}

.kp-global-header__panel-shell {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  overflow-y: auto;
  background: var(--n-bg);
  border-right: 1px solid var(--n-line);
  box-shadow: var(--n-sh-lg);
}

.kp-global-header__panel-top,
.kp-global-header__panel-copy,
.kp-global-header__panel-body {
  display: grid;
  gap: 10px;
}

.kp-global-header__panel-top {
  grid-template-columns: 1fr auto;
  align-items: start;
}

.kp-global-header__panel-copy strong {
  font-size: var(--n-fs);
}

.kp-global-header__panel-copy span {
  color: var(--n-text-mute);
  font-size: var(--n-fs);
}

.kp-global-header__panel-close,
.kp-global-header__backdrop {
  cursor: pointer;
}

.kp-global-header__panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--n-line-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--n-text) 10%, transparent);
  color: var(--n-text-strong);
  font-size: 18px;
  transition: background .15s var(--n-ease, ease), border-color .15s var(--n-ease, ease), color .15s var(--n-ease, ease);
}
.kp-global-header__panel-close:hover,
.kp-global-header__panel-close:focus-visible {
  background: var(--n-accent);
  border-color: var(--n-accent);
  color: var(--n-text-on-accent);
}

.kp-global-header__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1280;
  border: 0;
  background: rgba(7, 13, 24, .46);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--n-dur-base) var(--n-ease);
}

.kp-global-header__backdrop[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

[data-theme="light"] .kp-global-header, [data-theme="light"] .kp-global-header__panel-shell, [data-theme="light"] .kp-global-header__dropdown-menu, [data-theme="light"] .kp-global-header__notifications-popover{
  background: color-mix(in srgb, #ffffff 92%, var(--n-accent-soft) 8%);
}

[data-theme="light"] .kp-global-header__backdrop {
  background: rgba(15, 23, 42, .18);
}

@media (max-width: 900px) {
  .kp-global-header__inner {
    min-height: 62px;
    padding-inline: 14px;
    gap: 10px;
  }

  .kp-global-header__controls-text,
  .kp-global-header__bell-text,
  .kp-global-header__toggle-text {
    display: none;
  }

  .kp-global-header__toggle,
  .kp-global-header__bell,
  .kp-global-header__controls-btn {
    min-width: 42px;
    width: 42px;
    padding: 0;
  }

  .kp-global-header__dropdown-menu,
  .kp-global-header__notifications-popover,
  .kp-global-header__picker-menu {
    right: 0;
    width: min(360px, calc(100vw - 16px));
  }
}

@media (max-width: 640px) {
  .kp-global-header__inner {
    min-height: 58px;
    padding-inline: 10px;
  }

  .kp-global-header__brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .kp-global-header__panel {
    width: min(380px, calc(100vw - 8px));
  }

  .kp-global-header__panel-shell {
    padding: 14px;
  }

  .kp-global-header__controls-grid--themes,
  .kp-global-header__controls-grid--accents {
    grid-template-columns: 1fr;
  }
}

.kp-global-header__panel {
  background: transparent;
}

.kp-global-header__panel-shell {
  position: relative;
  /* v269: було hardcoded #0d1630 (синь, HB-001) — давало «інший фон» низу меню.
     Тепер токен-фон теми, суцільний, без синього відтінку. */
  background: var(--n-bg-2);
  isolation: isolate;
}

.kp-global-header__panel-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--n-bg-2);
  z-index: -1;
}

.kp-global-header__panel-top,
.kp-global-header__panel-body,
.kp-global-header__panel-copy {
  position: relative;
  z-index: 1;
}

.kp-global-header__backdrop[aria-hidden="false"] {
  background: rgba(4, 9, 18, .64);
  backdrop-filter: blur(2px);
}

[data-theme="light"] .kp-global-header__panel-shell {
  background: var(--n-bg-2);
}

[data-theme="light"] .kp-global-header__panel-shell::before {
  background: var(--n-bg-2);
}

[data-theme="light"] .kp-global-header__backdrop[aria-hidden="false"] {
  background: rgba(15, 23, 42, .12);
  backdrop-filter: blur(2px);
}

@media (max-width: 640px) {
  /* v1.1.3.769: видалено застаріле правило з translateX(-50%) — конфліктувало
   * з containing block від backdrop-filter. Чисте правило тепер у блоці після
   * `kp-header-ui-modal-open` body lock (нижче).
   */
  .kp-global-header__notifications-popover {
    right: 8px;
    left: auto;
    width: min(360px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
  }
}

/* v1.1.3.770: scroll-lock тільки на body, БЕЗ html, БЕЗ height: 100dvh.
 * Раніше: lock на html створював scrolling container → ламав sticky behavior
 * заголовка (sticky прив'язується до nearest scrolling ancestor — MDN).
 * Plus: height: 100dvh — динамічний viewport unit, пульсує разом з мобільними
 * URL-bar/keyboard, тому header "підстрибував" візуально.
 * Тепер: тільки overflow:hidden на body — це не створює scrolling ancestor для
 * header (бо header sticky відносно root), і не змінює geometry. */
body.kp-header-ui-modal-open {
  overflow: hidden;
}

/* v1.1.3.783: Mobile app-shell + permanent fix containing-block trap.
 *
 * Context (з analyst audit, передан Vasyl-ом): Header має `position: sticky` +
 * `backdrop-filter: blur(20px) saturate(1.15)`. Це окей на desktop, але на mobile:
 *
 * 1. sticky прив'язується до scroll container, не viewport — кориtuvач очікує
 *    "app-bar" поведінку (завжди зверху), а sticky може відставати від chrome
 *    transitions.
 * 2. CSS spec: ancestor з backdrop-filter / filter / transform створює
 *    containing block для fixed descendants. У header є fixed nested elements:
 *    .kp-global-header__panel (burger drawer), .kp-global-header__backdrop,
 *    дропдауни, popover. Усі вони fixed відносно header, не viewport.
 * 3. Існуюча protection (.kp-header-ui-modal-open, рядок 506+) покриває
 *    dropdown/popover state, але openPanel() ставить ІНШИЙ class
 *    'kp-header-panel-open' — для burger drawer той самий containing-block
 *    bug **не закритий**.
 *
 * Fix package:
 * - Mobile (<=900px): header стає `fixed` (true app-shell).
 * - Mobile: backdrop-filter БЕЗУМОВНО disabled на header (не залежно від
 *   modal state). Frost effect перенесений на ::before pseudo-element що НЕ
 *   є ancestor-ом для fixed nested elements (бо ::before sits як child, не
 *   parent).
 * - Body compensation через padding-top using --kp-header-h (writer-only-v781).
 * - .kp-header-panel-open додано в existing protection block для consistency. */
@media (max-width: 900px) {
  .kp-global-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    /* permanent disable — eliminates containing block bug для всіх fixed children */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* solid фон з opacity замість blur — все ще виглядає premium */
    background: color-mix(in srgb, var(--n-bg-2) 96%, transparent);
  }

  /* Body padding compensation — щоб контент не ховався під fixed header.
   * Exclude .kp-route-messages: messages layout має `height: 100vh + overflow: hidden`
   * (chat scroll context), padding-top там зрушив би chat вниз і обрізав останнє
   * повідомлення. Messages chat має власну top margin через scroll container. */
  body:not(.kp-route-messages) {
    padding-top: var(--kp-header-h, 62px);
  }
}

@media (max-width: 640px) {
  /* v1.1.3.769: КОРІНЬ — `.kp-global-header { backdrop-filter }` створює
   * containing block для position:fixed дітей (CSS spec). Тому fixed dropdown
   * позиціонується відносно header (не viewport) → left/right відраховуються
   * від header bounds → виглядає як обрізаний справа.
   *
   * Fix: при відкритому модальному стані — повністю disable backdrop-filter
   * на header. Тоді fixed елементи стають справжніми fixed (від viewport).
   * Backdrop blur забезпечується окремо через .kp-global-header::before
   * overlay (нижче), який і так fullscreen fixed inset:0.
   *
   * Альтернативи розглянуті: portal через JS (складно і ризик не synced state),
   * absolute positioning з reparenting (зайвий DOM churn).
   */
  /* v1.1.3.783: extended до .kp-header-panel-open (burger drawer open state).
   * Раніше protection покривав тільки `.kp-header-ui-modal-open` (dropdowns/
   * notifications), але openPanel() для burger drawer ставить інший class.
   * NB: на mobile <=900px backdrop-filter уже permanently disabled (вище),
   * так що цей override redundant — лишаю для consistency з desktop fallback
   * якщо хтось колись поверне backdrop-filter в base rule. */
  .kp-header-ui-modal-open .kp-global-header,
  .kp-header-panel-open .kp-global-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .kp-header-ui-modal-open .kp-global-header::before,
  .kp-header-panel-open .kp-global-header::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(6, 12, 24, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0;
    z-index: -1;
  }

  [data-theme="light"].kp-header-ui-modal-open .kp-global-header::before,
  [data-theme="light"] .kp-header-ui-modal-open .kp-global-header::before,
  [data-theme="light"].kp-header-panel-open .kp-global-header::before,
  [data-theme="light"] .kp-header-panel-open .kp-global-header::before {
    background: rgba(15, 23, 42, .18);
  }

  /* Чистий fixed positioning — після disable backdrop-filter він справді fixed.
   * Inset shorthand: top right bottom left. left:8 + right:8 = центрований
   * з відступом 8px від країв viewport (не header). max-height обмежений
   * щоб не вилазити нижче за viewport.
   */
  .kp-global-header__dropdown--controls > .kp-global-header__dropdown-menu {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 70px);
    left: 8px;
    right: 8px;
    bottom: auto;
    width: auto;
    max-width: none;
    max-height: calc(100svh - env(safe-area-inset-top, 0px) - 88px);
    margin: 0;
    transform: none;
    border-radius: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
  }

  .kp-global-header__notifications-popover {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 70px);
    left: 8px;
    right: 8px;
    bottom: auto;
    width: auto;
    max-width: none;
    max-height: calc(100svh - env(safe-area-inset-top, 0px) - 88px);
    margin: 0;
    transform: none;
    box-sizing: border-box;
  }

  /* Внутрішні елементи не повинні overflow-ити */
  .kp-global-header__dropdown-menu .kp-global-header__option,
  .kp-global-header__dropdown-menu .kp-global-header__controls-grid--themes > * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Accent dots row — горизонтальний скрол якщо не поміщається */
  .kp-global-header__controls-row--accents {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kp-global-header__controls-row--accents::-webkit-scrollbar {
    display: none;
  }
}

.kp-global-header {
  isolation: isolate;
}

.kp-global-header__panel {
  z-index: 1300;
}

.kp-global-header__panel-shell, .kp-global-header__dropdown-menu, .kp-global-header__notifications-popover{
  border-color: color-mix(in srgb, var(--n-accent) 12%, var(--n-line));
  box-shadow: 0 22px 56px rgba(5, 10, 18, .24);
}

@media (max-width: 900px) {
  .kp-global-header__inner {
    min-height: 62px;
    padding-inline: 12px;
    gap: 10px;
  }

  .kp-global-header__toggle,
  .kp-global-header__bell,
  .kp-global-header__controls-btn,
  .kp-global-header__picker-btn,
  .kp-global-header__utility-pill {
    min-height: 40px;
    padding-inline: 12px;
  }
}

@media (max-width: 640px) {
  .kp-global-header__toggle-text,
  .kp-global-header__bell-text,
  .kp-global-header__controls-text {
    display: none;
  }

  .kp-global-header__main,
  .kp-global-header__utility {
    gap: 8px;
  }

  .kp-global-header__panel-shell {
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
  }
}

.kp-global-header__dropdown-menu--controls {
  width: min(440px, calc(100vw - 24px));
  max-height: min(78vh, 720px);
  overflow: hidden;
  display: grid;
  /* v1.1.3.770: КРИТИЧНО — без явного columns track grid-track auto-sizes до
   * max-content → внутрішні секції розпирають контейнер зсередини (local repro:
   * container 344px, content 410px). minmax(0, 1fr) каже грідові: track може
   * стиснутись до 0 (не зважаючи на min-content дітей) і розтягнутись до 1fr. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* v1.1.3.770: контракт ширини для прямих дітей grid-у. min-width:0 потрібен
 * щоб override дефолтного min-width:auto (= min-content) — без нього flex/grid
 * діти не можуть бути меншими за свій intrinsic content. */
.kp-global-header__dropdown-menu--controls > .kp-global-header__controls-section,
.kp-global-header__dropdown-menu--controls > .kp-global-header__controls-head {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.kp-global-header__dropdown-menu--controls .kp-global-header__controls-grid--themes,
.kp-global-header__dropdown-menu--controls .kp-global-header__controls-list--languages,
.kp-global-header__dropdown-menu--controls .kp-global-header__controls-row--accents {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.kp-global-header__controls-head {
  margin-bottom: 0;
}

.kp-global-header__controls-section--languages .kp-global-header__controls-list--languages {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.kp-global-header__controls-list--languages::-webkit-scrollbar {
  width: 6px;
}
.kp-global-header__controls-list--languages::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--n-accent) 68%, transparent);
  border-radius: 999px;
}
.kp-global-header__controls-list--languages::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--n-line) 74%, transparent);
  border-radius: 999px;
}

.kp-global-header__controls-row--accents {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kp-global-header__accent-dot {
  /* v270: квадратні свотчі (14px як кнопки хедера) — єдиний стиль. Обгортка
     прозора, видно лише кольоровий квадратик; вибраний = ring-підсвітка. */
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--n-dur-fast) var(--n-ease), box-shadow var(--n-dur-fast) var(--n-ease);
}

.kp-global-header__accent-dot:hover,
.kp-global-header__accent-dot:focus-visible {
  transform: translateY(-1px);
  border-color: var(--n-line);
  box-shadow: var(--n-sh-sm);
}

.kp-global-header__accent-dot.is-active {
  /* v270: підсвітка вибраного — квадратна ring навколо свотча */
  box-shadow: 0 0 0 2px var(--n-bg-2), 0 0 0 4px var(--kp-accent-swatch, var(--n-accent));
}
.kp-global-header__accent-dot:hover {
  transform: translateY(-1px) scale(1.08);
}

.kp-global-header__accent-dot-swatch {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--kp-accent-swatch, var(--n-accent));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
/* v267: кожен свотч показує СВІЙ акцент (раніше всі падали на fallback --n-accent
   = поточний акцент, тож усі крапки були однакові й нерозрізнювані). Кольори =
   палітра портал-референсу (dark-варіанти, добре видно на темному тлі). */
.kp-global-header__accent-dot[data-kp-accent-option="coral"] .kp-global-header__accent-dot-swatch{background:#ed8d78}
.kp-global-header__accent-dot[data-kp-accent-option="amber"] .kp-global-header__accent-dot-swatch{background:#f5c366}
.kp-global-header__accent-dot[data-kp-accent-option="sage"] .kp-global-header__accent-dot-swatch{background:#94ad8c}
.kp-global-header__accent-dot[data-kp-accent-option="emerald"] .kp-global-header__accent-dot-swatch{background:#7ab096}
.kp-global-header__accent-dot[data-kp-accent-option="cyan"] .kp-global-header__accent-dot-swatch{background:#22d3ee}
.kp-global-header__accent-dot[data-kp-accent-option="blue"] .kp-global-header__accent-dot-swatch{background:#7a9cc0}
.kp-global-header__accent-dot[data-kp-accent-option="violet"] .kp-global-header__accent-dot-swatch{background:#a78bfa}
.kp-global-header__accent-dot[data-kp-accent-option="plum"] .kp-global-header__accent-dot-swatch{background:#c990b6}
.kp-global-header__accent-dot[data-kp-accent-option="rose"] .kp-global-header__accent-dot-swatch{background:#f472b6}
/* активний свотч — кільце довкола */
html[data-theme='light'] .kp-global-header__accent-dot[data-kp-accent-option="coral"] .kp-global-header__accent-dot-swatch{background:#e05d40}
html[data-theme='light'] .kp-global-header__accent-dot[data-kp-accent-option="amber"] .kp-global-header__accent-dot-swatch{background:#af7c1d}
html[data-theme='light'] .kp-global-header__accent-dot[data-kp-accent-option="sage"] .kp-global-header__accent-dot-swatch{background:#389a19}
html[data-theme='light'] .kp-global-header__accent-dot[data-kp-accent-option="emerald"] .kp-global-header__accent-dot-swatch{background:#199a5c}
html[data-theme='light'] .kp-global-header__accent-dot[data-kp-accent-option="cyan"] .kp-global-header__accent-dot-swatch{background:#1b92a4}
html[data-theme='light'] .kp-global-header__accent-dot[data-kp-accent-option="blue"] .kp-global-header__accent-dot-swatch{background:#3789df}
html[data-theme='light'] .kp-global-header__accent-dot[data-kp-accent-option="violet"] .kp-global-header__accent-dot-swatch{background:#896ae7}
html[data-theme='light'] .kp-global-header__accent-dot[data-kp-accent-option="plum"] .kp-global-header__accent-dot-swatch{background:#e149af}
html[data-theme='light'] .kp-global-header__accent-dot[data-kp-accent-option="rose"] .kp-global-header__accent-dot-swatch{background:#e24d9b}

@media (max-width: 640px) {
  .kp-global-header__dropdown--controls > .kp-global-header__dropdown-menu {
    width: min(360px, calc(100vw - 20px));
    max-height: min(78vh, 640px);
  }

  .kp-global-header__controls-section--languages .kp-global-header__controls-list--languages {
    max-height: 220px;
  }
}

.kp-global-header__dropdown-menu--controls {
  overflow: hidden !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.kp-global-header__controls-section--languages {
  min-height: 0;
}

.kp-global-header__controls-section--languages .kp-global-header__controls-list--languages {
  min-height: 0;
}

.kp-global-header__controls-row--accents {
  /* v1.1.3.770: justify-content: flex-start (не center) — center на nowrap+overflow
   * row створює intrinsic max-content width у батьківському grid-track навіть якщо
   * є overflow-x:auto, бо center потребує знати full content width для центрування.
   * flex-start дозволяє track-у бути будь-яким (включно з вузьким). */
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scroll-padding-inline: 8px;
}

.kp-global-header__controls-row--accents::-webkit-scrollbar {
  height: 5px;
}

.kp-global-header__controls-row--accents::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--n-accent) 64%, transparent);
  border-radius: 999px;
}

.kp-global-header__dropdown-menu--controls {
  display: none;
}
.kp-global-header__dropdown.is-open > .kp-global-header__dropdown-menu--controls {
  display: grid;
}
.kp-global-header__controls-section-head--center {
  justify-content: center;
  text-align: center;
}
.kp-global-header__controls-row--accents {
  justify-content: center;
  flex-wrap: nowrap;
  overflow: visible;
}
.kp-global-header__controls-section--accents {
  padding-bottom: 16px;
}
@media (max-width: 640px) {
  .kp-global-header__controls-row--accents {
    justify-content: center;
    overflow-x: auto;
  }
}

.kp-global-header__controls-head {
  margin-bottom: 0;
}

.kp-global-header__controls-head strong{
  display: none !important;
}

.kp-global-header__controls-section--themes .kp-global-header__controls-grid--themes {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--n-line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--n-bg-2) 92%, transparent);
}

.kp-global-header__option--theme {
  min-height: 48px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.kp-global-header__option--theme:first-child {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

.kp-global-header__option--theme:last-child {
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

.kp-global-header__option--theme:hover,
.kp-global-header__option--theme:focus-visible {
  border-color: transparent;
  box-shadow: none;
}

.kp-global-header__option--theme .kp-global-header__option-main {
  width: 100%;
  justify-content: center;
}

.kp-global-header__controls-section--languages .kp-global-header__controls-section-head {
  margin-bottom: 2px;
}

.kp-global-header__controls-row--accents {
  justify-content: center;
  align-items: center;
}

@media (max-width: 640px) {
  .kp-global-header__controls-section--themes .kp-global-header__controls-grid--themes {
    grid-template-columns: 1fr 1fr;
  }

  .kp-global-header__option--theme {
    min-height: 46px;
  }
}


.kp-global-header__notifications-popover {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kp-global-header__notifications-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--n-line, var(--n-line));
  flex-shrink: 0;
  gap: 8px;
  margin-bottom: 0;
}
.kp-global-header__notifications-head strong {
  font-family: var(--n-font-mono, monospace);
  font-size: .82rem;
  font-weight: 800;
  color: var(--n-text);
}
.kp-global-header__notifications-head a {
  font-size: .7rem;
  font-weight: 700;
  color: var(--n-accent);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid var(--n-line);
  background: var(--n-accent-soft);
  transition: all .14s;
  white-space: nowrap;
}
.kp-global-header__notifications-head a:hover {
  background: var(--n-accent);
  color: var(--n-bg);
  border-color: var(--n-accent);
}

.kp-global-header__notifications-list {
  padding: 6px;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--n-line) transparent;
  border: none;
  background: transparent;
  border-radius: 0;
}
.kp-global-header__notifications-list::-webkit-scrollbar { width: 3px; }
.kp-global-header__notifications-list::-webkit-scrollbar-thumb {
  background: var(--n-line); border-radius: 2px;
}

.kp-global-header__notifications-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--n-text-mute);
  font-size: .76rem;
}

.kp-global-header__notifications-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--n-text);
  text-decoration: none;
  transition: background .12s;
  margin-bottom: 2px;
  cursor: pointer;
  position: relative;
}
.kp-global-header__notifications-item.is-unread {
  background: color-mix(in srgb, var(--n-accent-soft) 50%, transparent);
}
.kp-global-header__notifications-item.is-unread::before {
  content: '';
  position: absolute; left: 2px; top: 10px; bottom: 10px;
  width: 2px; border-radius: 2px;
  background: var(--n-accent);
}
.kp-global-header__notifications-item:hover,
.kp-global-header__notifications-item:focus-visible {
  background: var(--n-bg-hover);
  outline: none;
}

.kp-global-header__notifications-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--n-bg-2);
  border: 1px solid var(--n-line);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--n-fs); flex-shrink: 0;
}
.kp-global-header__notifications-item.is-unread .kp-global-header__notifications-icon {
  background: var(--n-accent-soft);
  border-color: var(--n-accent-border, var(--n-line-strong));
}

.kp-global-header__notifications-copy { min-width: 0; }
.kp-global-header__notifications-message {
  font-size: .76rem;
  font-weight: 600;
  color: var(--n-text);
  line-height: 1.4;
  margin-bottom: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kp-global-header__notifications-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.kp-global-header__notifications-meta span {
  font-size: .6rem;
  color: var(--n-text-mute);
  font-family: var(--n-font-mono, monospace);
}
.kp-global-header__notifications-meta span + span::before {
  content: '·';
  margin-right: 6px;
}

.kp-global-header__notifications-actions {
  margin-top: 6px;
}
.kp-global-header__notification-action {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: .68rem;
  font-weight: 700;
  border: 1px solid var(--n-line);
  background: var(--n-bg-2);
  color: var(--n-text-soft);
  text-decoration: none;
  cursor: pointer;
  transition: all .13s;
  font-family: var(--n-font-sans, sans-serif);
}
.kp-global-header__notification-action:hover {
  background: var(--n-accent-soft);
  border-color: var(--n-accent-border, var(--n-line-strong));
  color: var(--n-accent);
}

.kp-global-header__bell-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--n-accent);
  border: 2px solid var(--n-bg-2, var(--n-bg-2));
  box-shadow: 0 0 5px var(--n-accent-glow);
  animation: notif-pulse 2s ease-in-out infinite;
}
@keyframes notif-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: .8; }
}

[data-theme="light"] .kp-global-header__notifications-item.is-unread {
  background: color-mix(in srgb, var(--n-accent-soft) 35%, transparent);
}
[data-theme="light"] .kp-global-header__notifications-item:hover {
  background: var(--n-bg-hover);
}

.kp-global-header__controls-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: currentColor;
}

.kp-global-header__controls-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.kp-global-header__picker-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--n-fs);
  line-height: 1;
  opacity: 0.6;
  margin-left: 2px;
  font-weight: 800;
  transition: transform .2s ease, opacity .15s;
  flex-shrink: 0;
}

.kp-global-header__controls-btn:hover .kp-global-header__picker-caret,
.kp-global-header__picker-btn:hover .kp-global-header__picker-caret {
  opacity: 1;
}

.kp-global-header__dropdown.is-open .kp-global-header__picker-caret,
[data-kp-dropdown][aria-expanded="true"] .kp-global-header__picker-caret,
[data-kp-dropdown-toggle][aria-expanded="true"] .kp-global-header__picker-caret {
  transform: rotate(180deg);
}

.kp-global-header__controls-btn {
  gap: 8px;
  padding: 0 12px 0 12px;
  border-color: var(--n-line, rgba(162, 185, 230, 0.08));
  background: rgba(255, 255, 255, 0.03);
  transition: all .15s;
}

.kp-global-header__controls-btn:hover {
  border-color: rgba(239, 100, 67, 0.3);
  background: rgba(239, 100, 67, 0.05);
  color: var(--n-accent);
}

.kp-global-header__controls-btn[aria-expanded="true"] {
  background: linear-gradient(135deg, rgba(239, 100, 67, 0.12) 0%, rgba(239, 100, 67, 0.04) 100%);
  border-color: rgba(239, 100, 67, 0.4);
  color: var(--n-accent);
  box-shadow: 0 0 12px -3px rgba(239, 100, 67, 0.3);
}

@media (max-width: 900px) {
  
  .kp-global-header__controls-icon {
    width: 18px;
    height: 18px;
  }

  
  .kp-global-header__picker-caret {
    font-size: var(--n-fs);
    opacity: 0.5;
  }

  
  .kp-global-header__controls-btn {
    min-width: 44px;
    padding: 0 10px;
    gap: 4px;
  }
}

@media (max-width: 640px) {
  .kp-global-header__controls-btn {
    min-width: 40px;
    padding: 0 8px;
  }

  .kp-global-header__controls-icon {
    width: 17px;
    height: 17px;
  }
}

.kp-global-header__toggle {
  border-color: var(--n-line, rgba(162, 185, 230, 0.08));
  background: rgba(255, 255, 255, 0.03);
  transition: all .15s;
}

.kp-global-header__toggle:hover {
  border-color: rgba(239, 100, 67, 0.3);
  background: rgba(239, 100, 67, 0.05);
  color: var(--n-accent);
}

.kp-global-header__toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, rgba(239, 100, 67, 0.12) 0%, rgba(239, 100, 67, 0.04) 100%);
  border-color: rgba(239, 100, 67, 0.4);
  color: var(--n-accent);
}

.kp-global-header__bell {
  border-color: var(--n-line, rgba(162, 185, 230, 0.08));
  background: rgba(255, 255, 255, 0.03);
  transition: all .15s;
}

.kp-global-header__bell:hover {
  border-color: rgba(239, 100, 67, 0.3);
  background: rgba(239, 100, 67, 0.05);
  color: var(--n-accent);
}

.kp-global-header__bell-badge {
  background: linear-gradient(135deg, var(--n-danger) 0%, #dc2626 100%);
  border: 2px solid var(--n-bg-2, var(--n-bg-sunk));
  box-shadow: 0 2px 6px -1px rgba(239, 68, 68, 0.5);
}

html[data-theme="light"] .kp-global-header__controls-btn,
html[data-theme="light"] .kp-global-header__toggle,
html[data-theme="light"] .kp-global-header__bell {
  background: var(--n-bg-soft);
  border-color: var(--n-line);
}

html[data-theme="light"] .kp-global-header__controls-btn:hover,
html[data-theme="light"] .kp-global-header__toggle:hover,
html[data-theme="light"] .kp-global-header__bell:hover {
  background: #fef3f2;
  border-color: color-mix(in srgb, var(--n-accent) 40%, transparent);
}

html[data-theme="light"] .kp-global-header__controls-btn[aria-expanded="true"],
html[data-theme="light"] .kp-global-header__toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--n-accent) 10%, transparent) 0%, color-mix(in srgb, var(--n-accent) 3%, transparent) 100%);
  border-color: color-mix(in srgb, var(--n-accent) 50%, transparent);
}


/* ─── v1.1.3.306: Перенесено з css/patches.css ──────────────────────────── */

/* "Усі мови" option у language dropdown — distinct з regular items */
.kp-global-header__option--more {
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: var(--n-accent);
  margin-top: 4px;
  border-top: 1px solid var(--n-line-soft, rgba(255,255,255,0.06));
  padding-top: 10px;
}

/* "Лад" (palette) dropdown — мінімалістична зачистка.
   Без цих overrides palette button показує текст і dropdown секції
   мають надмірно великі card-рамки. */

/* Кнопка-палітра: тільки іконка (без text label, без caret) */
.kp-global-header__controls-text,
.kp-global-header__picker-caret {
  display: none !important;
}

/* Тонший круглий контейнер навколо іконки */
.kp-global-header__controls-btn {
  padding: 8px;
  min-width: auto;
}
.kp-global-header__controls-icon svg {
  width: 22px;
  height: 22px;
}

/* Зняти заголовки в дропдауні (eyebrow / section title / section head) */
.kp-global-header__controls-eyebrow,
.kp-global-header__controls-section-title,
.kp-global-header__controls-section-head {
  display: none !important;
}

/* Зняти "card"-рамки/фон з кожної секції */
.kp-global-header__controls-section--card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Скоротити вертикальний відступ між секціями */
.kp-global-header__dropdown-menu--controls > .kp-global-header__controls-section + .kp-global-header__controls-section {
  margin-top: 14px !important;
}

/* Сам дропдаун — компактніше */
.kp-global-header__dropdown-menu--controls {
  padding: 14px !important;
}

/* v1.1.3.769 — РЕФАКТОР: попередній v764 hard fix (з !important на fixed/left/right)
 * видалено, бо він вів симптоматичну боротьбу з containing block, не з причиною.
 * Реальний фікс — disable backdrop-filter на header при modal-open — зроблено
 * вище, у блоці після `kp-header-ui-modal-open` body lock (рядки 485-573).
 */


/* ════════════════════════════════════════════════════════
 * v1.1.3.904 — Header logout button (replaces bell)
 * Vasyl: "Додати в хедер для авторизованого кнопку виходу з порталу"
 * ════════════════════════════════════════════════════════ */
.kp-global-header__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 4px;
  background: transparent;
  border: 1px solid var(--n-line);
  border-radius: 50%;
  color: var(--n-text-mute);
  text-decoration: none;
  transition: color var(--n-dur-fast, .15s) ease,
              background var(--n-dur-fast, .15s) ease,
              border-color var(--n-dur-fast, .15s) ease;
}
.kp-global-header__logout:hover,
.kp-global-header__logout:focus-visible {
  color: var(--n-danger);
  background: color-mix(in oklab, var(--n-danger) 8%, transparent);
  border-color: color-mix(in oklab, var(--n-danger) 35%, transparent);
}
.kp-global-header__logout-text {
  display: none;  /* icon-only — Cyber Glow compact header */
}
.kp-global-header__logout i {
  font-size: 16px;
}

/* v1.1.4.061 panel install CSS видалено у v1.1.4.066 — markup перенесено у
   header bar як shared .kp-global-header__icon-btn--install variant. */

/* ════════════════════════════════════════════════════════════════
 * v1.1.4.066 — Уніфіковані icon-кнопки у header bar
 *
 * Vasyl: "Відстилізуй кнопки у хедері, щоб всі однаково виглядали."
 *
 * До v066: controls-btn (pill з палітрою), logout (circular 44×44, red),
 * legacy pwa-install (gradient pill 8×14px). Three різні стилі.
 *
 * Після v066: shared `.kp-global-header__icon-btn` base (circular 44×44,
 * transparent bg, line border). Variants → distinct semantic colors:
 *   --install  → brand orange  (PWA install action)
 *   --logout   → red hover     (destructive sign-out)
 *
 * Legacy `.kp-global-header__logout` зберігає старі правила (additive composition).
 * ═══════════════════════════════════════════════════════════════ */

.kp-global-header__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 4px;
  background: transparent;
  border: 1px solid var(--n-line);
  border-radius: 50%;
  color: var(--n-text-mute);
  text-decoration: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color var(--n-dur-fast, .15s) ease,
              background var(--n-dur-fast, .15s) ease,
              border-color var(--n-dur-fast, .15s) ease,
              transform var(--n-dur-fast, .15s) ease,
              box-shadow var(--n-dur-fast, .15s) ease;
}

.kp-global-header__icon-btn[hidden] {
  display: none !important;
}

.kp-global-header__icon-btn:hover,
.kp-global-header__icon-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ─── PWA install variant — brand orange ──────────────────────── */
.kp-global-header__icon-btn--install {
  color: var(--n-accent, #ff7849);
  border-color: color-mix(in oklab, var(--n-accent, #ff7849) 40%, transparent);
  font-size: 20px;
}

.kp-global-header__icon-btn--install:hover,
.kp-global-header__icon-btn--install:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #ff8b5a 0%, #ff5a30 100%);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255, 120, 73, 0.4);
}

/* ─── Logout variant — red destructive ────────────────────────── */
.kp-global-header__icon-btn--logout:hover,
.kp-global-header__icon-btn--logout:focus-visible {
  color: var(--n-danger);
  background: color-mix(in oklab, var(--n-danger) 8%, transparent);
  border-color: color-mix(in oklab, var(--n-danger) 35%, transparent);
}

/* ════════════ v1.1.4.983: стильніший топбар — чисті прозорі icon-кнопки (accent hover) ════════════ */
.kp-global-header__toggle,
.kp-global-header__controls-btn {
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--n-text-soft);
}
.kp-global-header__toggle:hover,
.kp-global-header__toggle:focus-visible,
.kp-global-header__controls-btn:hover,
.kp-global-header__controls-btn:focus-visible {
  color: var(--n-accent);
  background: var(--n-accent-soft);
  box-shadow: none;
}
.kp-global-header__icon-btn {
  border: 0;
  background: transparent;
  color: var(--n-text-soft);
}
.kp-global-header__icon-btn:hover,
.kp-global-header__icon-btn:focus-visible {
  color: var(--n-accent);
  background: var(--n-accent-soft);
  transform: none;
  box-shadow: none;
}
.kp-global-header__picker-caret { display: none; }

/* v1.1.4.985: close-кнопка панелі — кругла й чиста (як ☰/🎨) */
/* v270: дубль .kp-global-header__panel-close прибрано — він (border:0,
   background:transparent) переписував контрастний вигляд з v269, роблячи
   кнопку знову невидимою. Лишається єдине визначення вище (рядок ~344). */

/* ════════════════════════════════════════════════════════════════
 * v1.1.5.272 — Nova header shape pass
 * - all topbar icon actions use the same rounded-square geometry as K+ mark
 * - legacy circular/pill overrides from v983 are neutralized here
 * - close button in drawer is visible and uses the same geometry
 * ════════════════════════════════════════════════════════════════ */
.kp-global-header__brand-mark,
.kp-global-header__toggle,
.kp-global-header__controls-btn,
.kp-global-header__language-btn,
.kp-global-header__notifications-btn,
.kp-global-header__bell,
.kp-global-header__icon-btn,
.kp-global-header__logout,
.kp-global-header__panel-close {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 14px !important;
}
.kp-global-header__brand-mark {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
}
.kp-global-header__toggle,
.kp-global-header__controls-btn,
.kp-global-header__language-btn,
.kp-global-header__notifications-btn,
.kp-global-header__bell,
.kp-global-header__icon-btn,
.kp-global-header__logout {
  border: 1px solid var(--n-line) !important;
  background: var(--n-bg-soft) !important;
  color: var(--n-text-soft);
  box-shadow: none !important;
  margin-left: 0;
}
.kp-global-header__toggle:hover,
.kp-global-header__toggle:focus-visible,
.kp-global-header__controls-btn:hover,
.kp-global-header__controls-btn:focus-visible,
.kp-global-header__language-btn:hover,
.kp-global-header__language-btn:focus-visible,
.kp-global-header__notifications-btn:hover,
.kp-global-header__notifications-btn:focus-visible,
.kp-global-header__bell:hover,
.kp-global-header__bell:focus-visible,
.kp-global-header__icon-btn:hover,
.kp-global-header__icon-btn:focus-visible,
.kp-global-header__logout:hover,
.kp-global-header__logout:focus-visible {
  color: var(--n-accent);
  background: var(--n-accent-soft) !important;
  border-color: var(--n-accent-border) !important;
  transform: none;
}
.kp-global-header__toggle[aria-expanded="true"],
.kp-global-header__controls-btn[aria-expanded="true"],
.kp-global-header__language-btn[aria-expanded="true"],
.kp-global-header__notifications-btn[aria-expanded="true"] {
  color: var(--n-accent);
  background: var(--n-accent-soft) !important;
  border-color: var(--n-accent-border) !important;
}
.kp-global-header__panel-close {
  color: var(--n-text-strong) !important;
  background: var(--n-bg-soft) !important;
  border: 1px solid var(--n-line-strong) !important;
}
.kp-global-header__panel-close svg,
.kp-global-header__panel-close .kp-icon {
  display: block;
  width: 18px;
  height: 18px;
  color: currentColor;
  stroke: currentColor;
}
.kp-global-header__panel-close:hover,
.kp-global-header__panel-close:focus-visible {
  color: var(--n-text-on-accent) !important;
  background: var(--n-accent) !important;
  border-color: var(--n-accent) !important;
}
@media (max-width: 640px) {
  .kp-global-header__toggle,
  .kp-global-header__controls-btn,
  .kp-global-header__language-btn,
  .kp-global-header__notifications-btn,
  .kp-global-header__bell,
  .kp-global-header__icon-btn,
  .kp-global-header__logout,
  .kp-global-header__panel-close {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 13px !important;
  }
  .kp-global-header__brand-mark {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 13px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
 * v1.1.5.280 — transparent header chrome
 * Vasyl: remove the visible header background strip. Keep the header controls,
 * but do not paint a separate bar over the page.
 * ════════════════════════════════════════════════════════════════ */
.kp-global-header {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.kp-global-header::after {
  display: none !important;
}
[data-theme="light"] .kp-global-header,
html[data-theme="light"] .kp-global-header {
  background: transparent !important;
}
@media (max-width: 900px) {
  .kp-global-header {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
}