/* Кабінет учасника. Одна колонка, великий лічильник, нічого зайвого —
   найчастіша причина зайти сюди це питання «я ще член клубу?».

   ПЕРШЕ ПРАВИЛО ТУТ НЕ ПРО ВИГЛЯД. Атрибут [hidden] програє будь-якому
   display у класі: .btn має display:inline-flex, і кнопка «Вийти»
   світилася на екрані входу, де виходити нема кому. Та сама пастка вже
   ловила перемикач у каталозі бізнесів. Тому — примусово. */
[hidden]{display:none !important}

/* Заставка з лого при вході в кабінет — той самий прийом, що на
   головній сторінці сайту (index.css): лого зʼявляється маленьким,
   тримає паузу, росте до нормального розміру й на завершення різко
   «пролітає» повз (scale 6.8), заставка гасне вслід за ним.
   animation-fill-mode both ховає її саму, без жодного рядка JS — і не
   чекає на перевірку сесії чи вхід. */
.hero-intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink-900);
  pointer-events: none;
  animation: hero-intro-exit 2.45s cubic-bezier(.72, 0, .2, 1) both;
}
.hero-intro img {
  width: min(60vw, 420px);
  height: auto;
  transform-origin: 50% center;
  animation: hero-intro-logo 2.15s cubic-bezier(.72, 0, .16, 1) both;
}
@keyframes hero-intro-logo {
  0%       { opacity: 0; transform: scale(.16); }
  13%, 34% { opacity: 1; transform: scale(.2); }
  72%      { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(6.8); }
}
@keyframes hero-intro-exit {
  0%, 72% { visibility: visible; opacity: 1; }
  99%     { visibility: visible; opacity: 0; }
  100%    { visibility: hidden; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-intro { display: none; }
  /* Картка каталогу підіймається на hover — рамка й тінь лишаються,
     їде тільки рух. */
  .kb-person { transition: border-color .18s ease, box-shadow .18s ease; }
  .kb-person:hover { transform: none; }
}

:root{--kb-top-h:63px;--kb-pad:clamp(14px,2.2vw,28px)} /* 34px лого + 14px+14px паддінгу .kb-top__in + 1px риски знизу — шухляді на вузькому екрані, щоб не ховатися під шапкою */
.kb-top{position:sticky;top:0;z-index:var(--z-header);
  border-bottom:1px solid var(--ink-600);background:var(--ink-900)}
/* padding:14px, а не 14px 0: скорочений запис обнуляє
   padding-inline:var(--gutter) з класу .container на цьому ж елементі,
   і тоді імʼя праворуч упирається просто в край екрана (0px). Повний
   --gutter (20-48px) тут не підходить — кабінет свідомо йде «в край»
   (бокова панель від 0), тож беремо ті самі 14px, що й по вертикалі. */
.kb-top__in{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px var(--kb-pad)}
.kb-logo{height:34px;width:auto;display:block}
/* Лого-перемикач: так само як у /admin, клацання ховає й повертає
   бокову панель — виходу на сайт тут свідомо немає. */
.kb-top__logo{appearance:none;border:0;background:transparent;padding:0;
  line-height:0;cursor:pointer;position:relative}
/* Жовта риска під лого — псевдоелемент, а не border/padding: висота
   кнопки не міняється, тож --kb-top-h (сама лінія кладеться поверх,
   не в потоці) лишається точною для .kb-tabs на вузькому екрані. */
.kb-top__logo::after{content:'';position:absolute;left:0;right:0;bottom:-8px;
  height:2px;background:var(--gold-500)}
.kb-top__logo:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;
  border-radius:4px}
.kb-top__right{display:flex;align-items:center;gap:12px}
.kb-who{color:var(--ink-400);font-size:var(--fs-xs)}
a.kb-menu__item{text-decoration:none;box-sizing:border-box}

.kb-main{padding:0 0 64px;min-height:60vh}
.kb-card{background:var(--ink-800);border:1px solid var(--ink-600);
  border-radius:14px;padding:24px 26px;margin-bottom:18px;max-width:none}
.kb-card h1{margin:0 0 10px;font-family:var(--font-display);font-size:var(--fs-h3)}
.kb-card h2{margin:0 0 8px;font-size:var(--fs-h4)}
.kb-card h3{margin:26px 0 8px;font-size:var(--fs-body);color:var(--gold-500)}
.kb-lead{color:var(--ink-400);margin:0 0 16px;max-width:70ch;line-height:1.6}
.kb-fine{color:var(--ink-400);font-size:var(--fs-xs);line-height:1.55}

/* Вхід — перше, що бачить член, тож картка оформлена як вітрина:
   золота риска згори, мʼяке світіння за карткою, глибока тінь.
   display тут НЕ задається — секцію ховає атрибут hidden (kabinet.js),
   і власний display перебив би його. */
.kb-login{position:relative;max-width:460px;margin:9vh auto 0;
  padding:44px 40px 32px;border-radius:20px;
  border-color:rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 45%),var(--ink-800);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 32px 80px -32px rgba(0,0,0,.75)}
.kb-login::before{content:'';position:absolute;top:-1px;left:40px;right:40px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-500),transparent)}
/* z-index:-1 без власного контексту накладання в батька — світіння
   малюється ПІД тлом картки й видне лише навколо її країв. */
.kb-login::after{content:'';position:absolute;inset:-90px -120px;z-index:-1;
  pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,194,0,.07),transparent)}
.kb-login__eyebrow{margin:0 0 14px;font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-500)}
.kb-login h1{margin:0 0 32px;font-weight:200;font-size:clamp(30px,4.2vw,38px);
  line-height:1.1;letter-spacing:-.02em}
.kb-login label{display:block;font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-400)}
.kb-login input{width:100%;min-height:54px;margin:8px 0 16px;padding:0 16px;
  background:rgba(255,255,255,.03);border:1px solid var(--ink-600);border-radius:12px;
  color:var(--paper);font:inherit;
  transition:border-color var(--t-fast) var(--ease-ui),box-shadow var(--t-fast) var(--ease-ui)}
.kb-login input::placeholder{color:var(--ink-500)}
.kb-login input:hover{border-color:var(--ink-500)}
.kb-login input:focus{outline:none;border-color:var(--gold-500);
  box-shadow:0 0 0 4px rgba(242,194,0,.14)}
.kb-login .btn{width:100%;min-height:54px}
.kb-login .kb-fine{margin:28px 0 0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.06);text-align:center}
/* 460px картки + 2×120px світіння: вужче за ~720px воно виходило б за
   край екрана, і на телефоні вся сторінка ставала ширшою за екран. */
@media (max-width:720px){
  .kb-login::after{inset:-60px 0}
}
@media (max-width:520px){
  /* .kb-main знімає бокові відступи контейнера — без власних картка
     лягала б упритул до країв телефона. */
  .kb-login{margin:5vh 16px 0;padding:36px 22px 26px;border-radius:16px}
  .kb-login::before{left:22px;right:22px}
}
/* Друга форма — вхід за кодом. Риска потрібна, бо без неї поле коду
   читається як ще одне поле першої форми, і людина тисне «Надіслати
   посилання» вдруге замість «Увійти за кодом». */
#kb-code-form{margin-top:22px;padding-top:20px;border-top:1px solid var(--ink-600)}
#kb-code{letter-spacing:.22em;font-variant-numeric:tabular-nums}

.kb-msg{margin:12px 0 0;font-size:var(--fs-sm)}
.kb-msg.is-good{color:#3DBE7B}
.kb-msg.is-bad{color:#E2685E}

/* ─── бокова панель ───
   Той самий принцип, що в /admin: .kb-layout — сітка з двох колонок,
   що згортається до grid-template-columns:0px 1fr, коли лого в шапці
   ховає панель. min-width:0 на дітях обовʼязковий — інакше вміст
   панелі не дає колонці стиснутися нижче своєї природної ширини. */
/* --kb-pad — той самий відступ, що в шапці (.kb-top__in): край панелі й
   контенту стоїть на одній лінії з лого та імʼям, а зверху є повітря
   замість впритул до риски шапки. */
.kb-layout{display:grid;grid-template-columns:216px 1fr;align-items:start;
  padding:clamp(20px,2.6vw,36px) var(--kb-pad) 0;
  gap:0 clamp(20px,2.4vw,32px);transition:grid-template-columns .2s ease}
.kb-layout.is-collapsed{grid-template-columns:0px 1fr}

/* На широкому екрані гасити нічого не треба — панель сама живе в
   сітці, не над контентом. */
.kb-side-backdrop{display:none}

/* min-block-size — підлога під попап «Налаштування» (kb-menu__list),
   що відкривається вниз від останнього пункту списку: висота .kb-tabs
   інакше дорівнює висоті самого списку (7 вкладок + кнопка), і на
   короткій сторінці попап вилазив би за overflow:hidden. 680px = ~439px
   список (28.08.2026, 7 вкладок) + ~6px відступ + ~202px попап (4
   пункти) із запасом. Зміните список вкладок чи пункти меню — звірте
   це число знову. */
.kb-tabs{min-width:0;min-block-size:680px;overflow:hidden;align-self:stretch;
  background:var(--ink-800);border:1px solid var(--ink-600);border-radius:14px;
  margin-bottom:0}
.kb-tabs__inner{display:flex;flex-direction:column;gap:2px;width:216px;
  padding:14px 10px;white-space:nowrap}
.kb-tab{display:block;width:100%;background:transparent;
  border:0;border-inline-start:3px solid transparent;color:var(--ink-400);
  padding:11px 14px;border-radius:8px;font:inherit;font-size:var(--fs-sm);
  text-align:start;cursor:pointer}
.kb-tab:hover{background:var(--ink-700);color:var(--paper)}
.kb-tab.is-on{background:var(--ink-700);border-inline-start-color:var(--gold-500);
  color:var(--paper);font-weight:600}
/* Іконки в бічному меню — рішення власника 28.09.2026. Ті самі
   знаки, що в нижній панелі на телефоні; активний пункт — золотий. */
.kb-tabs .kb-tab{display:flex;align-items:center;gap:12px}
.kb-tab__ico{width:21px;height:21px;flex:none;opacity:.85}
.kb-tab.is-on .kb-tab__ico{color:var(--gold-500);opacity:1}

.kb-content{min-width:0}

@media(max-width:780px){
  /* Колонка в 216px на телефоні лишила б вмісту смужку. Тому на
     вузькому екрані панель — не колонка в сітці, а шухляда: fixed
     поверх контенту, виїжджає зліва тим самим лого-перемикачем. */
  .kb-layout,.kb-layout.is-collapsed{grid-template-columns:1fr}

  .kb-tabs{position:fixed;top:var(--kb-top-h);inset-inline-start:0;bottom:0;
    width:216px;z-index:90;border-radius:0;
    transform:translateX(0);transition:transform .2s ease}
  .kb-layout.is-collapsed .kb-tabs{transform:translateX(-100%)}
  .kb-tabs__inner{height:100%}

  /* Підкладка гасить контент позаду відкритої шухляди й закриває
     її по кліку. Нижча за панель, вища за звичайний контент. */
  .kb-layout:not(.is-collapsed) .kb-side-backdrop{display:block;position:fixed;
    inset:0;z-index:80;background:rgba(5,15,24,.55)}
}

/* ─── нижня панель на мобільному ───────────────────────────────
   Темна, як решта кабінету — не окрема світла плашка, а продовження
   того самого інтерфейсу. Активний пункт — золота «таблетка» під
   іконкою й підписом, той самий акцент, що скрізь у кабінеті.
   Кнопки — ті самі .kb-tab, що в шухляді (розмітка kabinet/index.html),
   тому активний стан і клік підхоплюються самі; тут лише інше
   компонування (вертикальне, менший текст) під нижню панель. */
.kb-bottomnav{display:none}

@media(max-width:780px){
  /* Плаваюча панель із відступом від країв (власник 02.10.2026: «виходить
     за межі екрана»). Була на всю ширину з заокругленими лише верхніми
     кутами — читалась як картка, обрізана краями екрана. */
  .kb-bottomnav{display:flex;position:fixed;z-index:85;
    inset-inline:10px;bottom:calc(8px + env(safe-area-inset-bottom));
    background:var(--ink-800);border:1px solid var(--ink-600);
    border-radius:20px;padding:6px 4px;
    box-shadow:0 8px 24px rgba(0,0,0,.35)}

  /* Шухляда відкрита вже показує решту розділів — друга панель
     знизу поверх неї тільки плутала б. */
  .kb-layout:not(.is-collapsed) .kb-bottomnav{display:none}

  /* Ці чотири розділи вже є в нижній панелі (.kb-bottomnav нижче) —
     в шухляді на мобільному вони лише дублювали б її. На десктопі
     нижньої панелі немає взагалі, тому там ці ж .kb-tab лишаються —
     це виключно мобільний медіа-запит. */
  .kb-tabs .kb-tab[data-tab="events"],
  .kb-tabs .kb-tab[data-tab="directory"],
  .kb-tabs .kb-tab[data-tab="knowledge"],
  .kb-tabs .kb-tab[data-tab="offers"]{display:none}

  .kb-bottomnav .kb-tab{flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;width:auto;
    border-inline-start:0;border-radius:14px;padding:6px 2px;
    color:var(--ink-400);font-size:11px;line-height:1.2;text-align:center}
  .kb-bottomnav .kb-tab svg{width:22px;height:22px}
  .kb-bottomnav .kb-tab:hover{background:var(--ink-700);color:var(--paper)}
  .kb-bottomnav .kb-tab.is-on{background:rgba(242,194,0,.16);color:var(--gold-500);font-weight:600}

  /* Контент не ховається під панель, що лежить поверх нього. */
  .kb-content{padding-block-end:calc(84px + env(safe-area-inset-bottom))}

  /* «База знань» дублює підпис вкладки в шухляді/нижній панелі —
     на вузькому екрані зайвий рядок над Книги/Фільми/Матеріали. */
  .kb-pane[data-pane="knowledge"] > .kb-card > h2{display:none}
}

/* ─── лічильник ───
   Той самий словник, що в .kb-passcard нижче (градієнт, водяний
   знак, кольорова смуга) — це теж «картка членства», лише більша й
   без перевороту, тож має відчуватись рідною сестрою перепустки. */
.kb-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--ink-700),var(--ink-600));
  padding-block-end:32px;
}
.kb-hero::after{
  content:''; position:absolute; pointer-events:none;
  top:50%; inset-inline-end:-20px; transform:translateY(-50%);
  inline-size:170px; block-size:170px;
  background:url(/assets/brand/ncua-mark-white-128.png) center/contain no-repeat;
  opacity:.07;
}
.kb-hero__top{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:6px;position:relative;z-index:1}
.kb-hero__no{color:var(--ink-400);font-size:var(--fs-xs);letter-spacing:.08em;
  text-transform:uppercase}
.kb-hero__badge{font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;
  padding:4px 11px;border-radius:999px;white-space:nowrap}
.kb-hero--ok .kb-hero__badge{background:rgba(61,190,123,.16);color:#3DBE7B}
.kb-hero--warn .kb-hero__badge{background:rgba(242,194,0,.16);color:var(--gold-500)}
.kb-hero--bad .kb-hero__badge{background:rgba(226,104,94,.16);color:#E2685E}
.kb-hero h1{position:relative;z-index:1;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1}
.kb-hero .kb-lead,.kb-hero .btn{position:relative;z-index:1}
.kb-hero__foot{position:absolute;inset-inline:0;bottom:0;block-size:5px}
.kb-hero--ok .kb-hero__foot{background:#3DBE7B}
.kb-hero--warn .kb-hero__foot{background:var(--gold-500)}
.kb-hero--bad .kb-hero__foot{background:#E2685E}

.kb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;margin-bottom:18px}
.kb-tile{background:var(--ink-800);border:1px solid var(--ink-600);
  border-radius:12px;padding:14px 16px}
.kb-tile span{display:block;color:var(--ink-400);font-size:var(--fs-xs);margin-bottom:5px}
.kb-tile b{font-size:1.05rem}
.kb-perks{margin:0;padding-left:20px;color:var(--ink-400);line-height:1.7}
.kb-perks b{color:var(--paper)}

/* ─── форма ─── */
.kb-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.kb-two{grid-template-columns:1fr}}
.kb-f{margin-bottom:14px}
.kb-f label{display:block;font-size:var(--fs-xs);color:var(--ink-400);margin-bottom:5px}
.kb-f input,.kb-f textarea,.kb-f select{width:100%;background:var(--ink-700);
  border:1px solid var(--ink-500);color:var(--paper);padding:10px 12px;
  border-radius:9px;font:inherit}
.kb-f textarea{resize:vertical;line-height:1.55}
/* Замкнена форма (до кліку «Редагувати») — видно, що поле не для
   редагування зараз, а не просто невдало підсвічене. */
.kb-f input:disabled,.kb-f textarea:disabled,.kb-f select:disabled{
  opacity:.6;cursor:not-allowed;border-color:var(--ink-600)}
.kb-chip input:disabled,.kb-check input:disabled{cursor:not-allowed}
.kb-chip:has(input:disabled),.kb-check:has(input:disabled){opacity:.6}
.kb-chips{display:flex;flex-wrap:wrap;gap:7px}
.kb-chip{display:inline-flex;align-items:center;gap:6px;background:var(--ink-700);
  border:1px solid var(--ink-600);border-radius:999px;padding:6px 13px;
  font-size:var(--fs-xs);cursor:pointer}
.kb-chip input{width:auto}
/* Галочка в «таблетці» всередині поля форми. .kb-f label (display:block)
   і .kb-f input (padding, фон) сильніші за .kb-chip — без цих рядків
   галочка липла до слова й отримувала відступи текстового поля. */
.kb-f .kb-chip{display:inline-flex;gap:9px;margin:0;color:var(--paper)}
.kb-f .kb-chip input{width:auto;padding:0;margin:0;border:0;background:none;
  inline-size:16px;block-size:16px;accent-color:var(--gold-500);flex:none}
/* Дата: браузер малює її темним системним текстом, і на темному полі
   (ще й напівпрозорому в замкненій формі) її не видно. */
.kb-f input[type=date]{color-scheme:dark;color:var(--paper)}
.kb-f input[type=date]::-webkit-datetime-edit{color:var(--paper)}
.kb-f input[type=date]::-webkit-calendar-picker-indicator{opacity:.7;cursor:pointer}
/* Одне поле в рядку — на пів ширини, як сусіди в .kb-two. */
@media(min-width:701px){.kb-f--half{max-width:calc(50% - 7px)}}
.kb-check{display:flex;align-items:center;gap:9px;margin:8px 0;font-size:var(--fs-sm)}
.kb-check input{width:auto}
.kb-checks-row{display:flex;flex-wrap:wrap;column-gap:24px;row-gap:4px}
.kb-checks-row .kb-check{margin:8px 0}
.kb-actions{display:flex;align-items:center;gap:14px;margin-top:20px}

/* ─── каталог ─── */
/* Фільтри — «варіант G» (власник 04.10.2026): пошук лише лінією
   знизу, під ним «Відкритий до» і галузь — текстом через крапку, без
   рамок. Під словами — <select>, але відкривається не системне меню,
   а свій список (нижче, .kb-pick). */
.kb-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px 10px;margin-bottom:18px}
.kb-filters[hidden]{display:none}
.kb-filters input{flex:1 1 100%;min-width:0;-webkit-appearance:none;appearance:none;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C93A4' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") no-repeat 0 50%/17px;
  border:0;border-bottom:1px solid var(--ink-500);border-radius:0;
  padding:9px 0 9px 28px;color:var(--paper);font:inherit;font-size:var(--fs-sm)}
.kb-filters input::placeholder{color:var(--ink-400)}
.kb-filters input:focus{outline:none;border-bottom-color:var(--gold-500)}
.kb-filters select{-webkit-appearance:none;appearance:none;max-width:100%;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C93A4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0 center/14px;
  border:0;border-radius:0;padding:2px 20px 2px 0;color:#C4D1DB;
  font:inherit;font-size:var(--fs-sm);cursor:pointer}
.kb-filters select:hover{color:var(--paper)}
.kb-filters select:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
/* Пункти списку на комп'ютері беруть колір від <select>, а він
   прозорий — без цього білий текст на білому. */
.kb-filters option{background:var(--ink-700);color:var(--paper)}
.kb-filters__dot{color:var(--ink-400)}
.kb-filters__dot:has(+ select[hidden]){display:none}

/* Свій список замість системного — «варіант C» (власник 04.10.2026,
   kabinet.js → pickerFor). <select> лишається, але схований. */
.kb-filters select.is-proxied{display:none}
.kb-sel{display:inline-flex;align-items:center;gap:4px;padding:2px 0;border:0;background:none;
  font:inherit;font-size:var(--fs-sm);color:#C4D1DB;cursor:pointer;white-space:nowrap}
.kb-sel[hidden]{display:none}
.kb-sel svg{width:14px;height:14px;color:var(--ink-400);transition:transform .18s ease}
.kb-sel[aria-expanded="true"] svg{transform:rotate(180deg)}
.kb-sel:hover,.kb-sel[aria-expanded="true"]{color:var(--paper)}
.kb-sel.is-set{color:var(--gold-500)}
.kb-sel:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:4px}

.kb-pick-panel{position:absolute;z-index:120;min-width:220px;max-height:min(420px,70vh);overflow:auto;
  padding:6px;background:var(--ink-700);border:1px solid var(--ink-500);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.kb-pick-panel__list{display:flex;flex-direction:column}
.kb-pick-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;
  background:none;font:inherit;font-size:var(--fs-sm);color:#C4D1DB;text-align:left;cursor:pointer}
.kb-pick-opt span{flex:1}
.kb-pick-opt:hover,.kb-pick-opt:focus-visible{background:var(--ink-600);color:var(--paper);outline:none}
.kb-pick-opt.is-on{color:var(--gold-500)}
.kb-pick-opt svg{width:16px;height:16px;flex:none;visibility:hidden}
.kb-pick-opt.is-on svg{visibility:visible}
.kb-pick-opt__radio{display:none}

/* Телефон — шторка знизу над нижнім меню кабінету (z-index 85). */
.kb-pick-back{position:fixed;inset:0;z-index:200;background:rgba(5,15,24,.6)}
.kb-pick-panel.is-sheet{position:fixed;left:0;right:0;bottom:0;z-index:201;min-width:0;
  max-height:80vh;padding:10px 20px calc(16px + env(safe-area-inset-bottom));
  border-radius:18px 18px 0 0;border-bottom:0;box-shadow:0 -12px 40px rgba(0,0,0,.5)}
.kb-pick-panel__grip{display:block;width:38px;height:4px;margin:0 auto 12px;border-radius:2px;background:var(--ink-500)}
.kb-pick-panel__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;
  font-size:var(--fs-body);color:var(--paper)}
.kb-pick-panel__reset{border:0;background:none;padding:4px 0;font:inherit;font-size:var(--fs-xs);
  color:var(--gold-500);cursor:pointer}
.is-sheet .kb-pick-opt{padding:13px 0;border-radius:0;border-bottom:1px solid var(--ink-600);
  font-size:var(--fs-body)}
.is-sheet .kb-pick-opt:last-child{border-bottom:0}
.is-sheet .kb-pick-opt:hover,.is-sheet .kb-pick-opt:focus-visible{background:none}
.is-sheet .kb-pick-opt:focus-visible{color:var(--paper);box-shadow:inset 0 -2px 0 var(--gold-500)}
.is-sheet .kb-pick-opt.is-on{color:var(--paper)}
.is-sheet .kb-pick-opt svg{display:none}
.is-sheet .kb-pick-opt__radio{display:grid;place-items:center;flex:none;width:20px;height:20px;
  border-radius:50%;border:1.5px solid var(--ink-500)}
.is-sheet .kb-pick-opt.is-on .kb-pick-opt__radio{border-color:var(--gold-500)}
.is-sheet .kb-pick-opt.is-on .kb-pick-opt__radio::after{content:'';width:9px;height:9px;border-radius:50%;
  background:var(--gold-500)}
.kb-pick-lock,.kb-pick-lock body{overflow:hidden}
.kb-dir{display:grid}
/* «Нікого не знайшли» — на всю ширину, а не в одну колонку сітки. */
.kb-dir > p{grid-column:1/-1}
/* Картка каталогу — стовпчиком: фото, імʼя, локація, чіпи. Раніше
   імʼя стояло праворуч від фото, і в колонці 240px на нього
   лишалось ~80px — майже кожне ламалось навпіл. */
.kb-person{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  background:var(--ink-700);border:1px solid var(--ink-600);
  border-radius:14px;padding:18px;cursor:pointer;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.kb-person:hover{border-color:var(--gold-500);transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.38)}
.kb-person:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.kb-person__avatar{flex:none;display:flex;align-items:center;justify-content:center;
  width:140px;height:140px;border-radius:14px;background:var(--ink-600);
  border:1px solid var(--gold-500);color:var(--gold-500);
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:500}
/* Фото є в одиниць, решта — ініціали, і великою плиткою пласка
   заливка читалась як порожній квадрат. Градієнт лишає її спокійною,
   але дає глибину. На базовому класі, а не в .kb-dir: та сама
   плитка стоїть і в розгорнутій картці, і в прев'ю фото у формі —
   учасник має виглядати однаково скрізь. Фото не чіпаємо. */
.kb-person__avatar:not(.kb-person__avatar--photo){
  background:linear-gradient(158deg,#24435c 0%,var(--ink-600) 42%,#16293a 100%)}
.kb-person__name{margin:5px 0 0;font-size:var(--fs-h4);line-height:1.25;
  color:var(--paper)}
/* Чіпи — окремим блоком під тонкою рискою: без неї перелік
   зливався з локацією в один сірий стовпчик. Риска на обгортці, а не
   на першій групі: інакше вона зникала б у того, хто має «Відкритий
   до», але не має професії. */
.kb-person__tags{width:100%;margin:3px 0 0;padding-top:11px;
  border-top:1px solid var(--ink-600);
  display:flex;flex-direction:column;gap:7px}
/* Два класи в селекторі обовʼязкові: підпис — це <p> усередині
   .kb-person, тож .kb-person p (клас+тег) специфічніше за один клас
   і перебивало б розмір на --fs-sm, тобто 15px проти 11px у чіпів,
   які цей підпис підписує. Сирі 10px — як і в .kb-chips-ro span. */
.kb-person .kb-person__label{margin:0;font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--gold-500)}
.kb-no{color:var(--ink-400);font-weight:400;font-size:var(--fs-xs);margin-left:6px}
.kb-person__head{color:var(--gold-500);margin:0;font-size:var(--fs-sm)}
.kb-person p{margin:0;font-size:var(--fs-sm);line-height:1.55}
.kb-person__c{color:var(--ink-400);font-size:var(--fs-xs)}
.kb-person__loc{display:flex;align-items:center;gap:6px}
/* Компанія · посада під імʼям у сітці каталогу. */
.kb-person .kb-person__work{color:var(--ink-400);font-size:var(--fs-xs);line-height:1.45}
.kb-person__pin{width:14px;height:14px;flex:none;color:var(--gold-500)}
.kb-chips-ro{display:flex;flex-wrap:wrap;gap:6px}
.kb-chips-ro span{background:var(--ink-600);border:1px solid var(--ink-500);
  border-radius:20px;padding:3px 10px;font-size:11px;color:var(--ink-400)}
.kb-person__avatar--photo{object-fit:cover;background:var(--ink-600)}

/* «Команда» й «Учасники» — фото зверху на всю ширину картки, під ним
   дані; той самий вигляд і порядок, що в /admin → «Команда клубу»
   (kabinet.js → paintDir, team_order з міграції 102). «Учасники»
   перейшли на цю ж картку 04.10.2026 (власник) — раніше там була
   плитка з круглою аватаркою, по одній у рядок на телефоні. */
/* Розкладка — як блок команди на ncua.no/about.html (власник
   03.10.2026): три рівні колонки на всю ширину, над кожною людиною
   тонка лінія, фото без «картки» навколо (до 220px), під ним імʼя,
   посада в клубі, пошта (учасник — посада й компанія, локація). */
.kb-dir{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(24px,3vw,44px)}
/* «Учасники» — чотири в ряд (власник 04.10.2026); «Команда» лишається
   втрьох, як на about.html. Вужче за 1100px — знову три. */
.kb-dir.kb-dir--all{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,2.4vw,36px)}
@media(max-width:1100px){.kb-dir.kb-dir--all{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.kb-dir,.kb-dir.kb-dir--all{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  /* На телефоні все трохи дрібніше (власник 04.10.2026), щоб імʼя й
     прізвище («Vitaliy Yurchenko») стояли одним рядком. Довше
     («Anastasiia Kozhemiako») переноситься — обрізати імʼя не можна. */
  .kb-dir .kb-team-card .kb-person__name{font-size:15px;line-height:1.3}
  .kb-dir .kb-person .kb-team-card__role,
  .kb-dir .kb-team-card .kb-person__loc{font-size:12px;line-height:1.45}
  .kb-dir .kb-person.kb-team-card{padding-top:16px;gap:10px}}
.kb-person.kb-team-card{padding:22px 0 0;gap:14px;align-items:stretch;overflow:visible;
  background:none;border:0;border-top:1px solid var(--ink-600);border-radius:0}
.kb-person.kb-team-card:hover{transform:none;box-shadow:none;border-color:var(--ink-600)}
.kb-person.kb-team-card:hover .kb-team-card__photo{border-color:var(--gold-500)}
.kb-team-card__photo{width:100%;max-width:220px;aspect-ratio:4/5;border:1px solid var(--ink-600);border-radius:8px;
  background:linear-gradient(158deg,#24435c 0%,var(--ink-600) 42%,#16293a 100%);overflow:hidden;transition:border-color .18s ease}
.kb-team-card__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.kb-team-card__photo.is-empty{display:grid;place-items:center;color:var(--gold-500);
  font-family:var(--font-display);font-size:2.25rem;font-weight:300;letter-spacing:.04em}
.kb-team-card__body{display:flex;flex-direction:column;gap:6px;padding:0}
.kb-team-card .kb-person__name{margin:0;font-family:var(--font-display);font-size:var(--fs-h4);font-weight:500}
.kb-person .kb-team-card__role{color:var(--ink-400);font-size:var(--fs-sm)}
/* Пошта — завжди одним рядком (власник 04.10.2026): трохи дрібніша,
   не переноситься; зовсім не влізла — обрізається трьома крапками. */
.kb-team-card__mail{align-self:flex-start;max-width:100%;font-size:var(--fs-xs);color:var(--gold-500);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Контакти — кнопки-чіпи з іконкою замість рядка тексту через «·». */
.kb-person__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.kb-person__chip{display:inline-flex;align-items:center;gap:6px;background:var(--ink-600);
  border:1px solid var(--ink-500);border-radius:10px;padding:7px 12px;
  font-size:var(--fs-xs);color:var(--paper);text-decoration:none}
/* У повній картці контакти — одним рядком (власник 03.10.2026):
   компактніші кнопки; не влізли — ряд гортається вбік, не переноситься. */
.kb-pcard__body .kb-person__chips{flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.kb-pcard__body .kb-person__chips::-webkit-scrollbar{display:none}
.kb-pcard__body .kb-person__chip{flex:none;white-space:nowrap;padding:6px 10px;gap:5px}
.kb-person__chip svg{width:15px;height:15px;color:var(--gold-500);flex:none}
a.kb-person__chip:hover{border-color:var(--gold-500)}

/* Основна інформація — рядки «підпис / значення», без рамки: рамка
   тут злилася б із тлом і в прев'ю (.kb-person сам ink-700), і в
   модалці каталогу (сама ink-800). */
/* ─── повна картка людини (personCardBody у kabinet.js) — фото зліва,
   дані праворуч, статус-бейдж у кутку. Той самий блок і в прев'ю
   каталогу (.kb-catalog-preview), і в модалці (.person-modal__body,
   без .kb-person навколо) — тому оформлення лежить на .kb-pcard, а
   не на спільних .kb-person__*, якими досі користується компактна
   картка сітки каталогу. */
.kb-pcard{display:grid;grid-template-columns:min(200px,32%) minmax(0,1fr);gap:20px;align-items:start}
/* min-width:0 — інакше рядки, що не переносяться (контакти, вкладки),
   розпирали колонку ширше за екран: на телефоні фото зʼїжджало
   вправо, а текст обрізався (04.10.2026). */
.kb-pcard__body{min-width:0}
.kb-pcard__media{max-width:220px}
.kb-pcard__media .kb-person__avatar{width:100%;height:auto;aspect-ratio:3/4;
  border-radius:16px;font-size:var(--fs-h2)}
.kb-pcard__media .kb-person__avatar--photo{object-fit:cover}
.kb-pcard__name{margin:0 0 4px;font-size:var(--fs-h4)}
.kb-pcard__role{color:var(--gold-500);margin:0 0 6px;font-size:var(--fs-sm)}
.kb-pcard__loc{margin:0 0 14px}
.kb-pcard__row{display:grid;grid-template-columns:20px 130px 1fr;gap:14px;
  align-items:start;padding:12px 0;border-top:1px solid var(--ink-600);font-size:var(--fs-sm)}
.kb-pcard__row:first-child{border-top:none;padding-top:0}
.kb-pcard__row-icon{width:20px;height:20px;flex:none;color:var(--gold-500)}
.kb-pcard__row-label{color:var(--ink-400)}
.kb-pcard__row-value{white-space:pre-line}
/* Перемикач текстів профілю (kabinet.js → pcardTabs). */
.kb-ptabs{margin-top:16px;padding-top:16px;border-top:1px solid var(--ink-600)}
/* Вкладки, а не кружечки (власник 03.10.2026): в один ряд, без
   рамок; вибрана — біла з золотою рискою знизу й маленькою стрілкою,
   що вказує на свій текст нижче. Вузько — ряд гортається вбік. */
.kb-ptabs__bar{display:flex;flex-wrap:nowrap;gap:22px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:9px;
  /* Лінія ряду — фоном на 9px вище низу: нижче неї місце для стрілки,
     інакше overflow ряду її обрізав би. */
  background:linear-gradient(var(--ink-600),var(--ink-600)) left calc(100% - 9px)/100% 1px no-repeat}
.kb-ptabs__bar::-webkit-scrollbar{display:none}
.kb-ptabs__btn{position:relative;flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  padding:6px 0 11px;margin:0;border:0;border-bottom:2px solid transparent;border-radius:0;
  background:none;color:var(--ink-400);font:inherit;font-size:var(--fs-sm);cursor:pointer;
  transition:color .15s ease,border-color .15s ease}
.kb-ptabs__btn svg{width:16px;height:16px;flex:none}
.kb-ptabs__btn .kb-pcard__row-icon{color:currentColor;margin:0}
.kb-ptabs__btn:hover{color:var(--paper)}
.kb-ptabs__btn[aria-selected="true"]{color:var(--paper);border-bottom-color:var(--gold-500)}
.kb-ptabs__btn[aria-selected="true"] svg{color:var(--gold-500)}
.kb-ptabs__btn[aria-selected="true"]::after{content:'';position:absolute;left:50%;bottom:-8px;
  transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--gold-500);border-bottom:0}
.kb-ptabs__btn:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.kb-ptabs__panel{margin-top:12px;white-space:pre-line;line-height:1.7;font-size:var(--fs-sm);color:var(--paper)}
.kb-ptabs__panel[hidden]{display:none}

@media(max-width:640px){
  .kb-pcard{grid-template-columns:minmax(0,1fr);gap:16px}
  /* Телефон: фото по центру, під ним — імʼя, посада, галузь і місто
     теж по центру; контакти, «Відкритий до» й вкладки — на всю ширину. */
  .kb-pcard__media{width:min(200px,62%);max-width:none;justify-self:center;margin:0}
  .kb-pcard__name,.kb-pcard__role,.kb-pcard__industry{text-align:center}
  .kb-pcard__loc{justify-content:center}
  /* На телефоні контакти — круглі кнопки лише з жовтою іконкою, одним
     рядком по центру (власник 04.10.2026). Підпис («Email»,
     «Телефон»…) лишається для читача екрана. */
  .kb-pcard__body .kb-person__chips{flex-wrap:wrap;justify-content:center;gap:10px;overflow:visible}
  .kb-pcard__body .kb-person__chip{width:46px;height:46px;padding:0;gap:0;justify-content:center;border-radius:50%}
  .kb-pcard__body .kb-person__chip svg{width:20px;height:20px}
  .kb-pcard__body .kb-person__chip span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Вкладки текстів — без іконок і щільніше, щоб усі чотири вміщались. */
  .kb-ptabs__bar{gap:11px}
  .kb-ptabs__btn{font-size:12.5px;gap:0}
  .kb-ptabs__btn svg{display:none}
  .kb-pcard__row{grid-template-columns:20px 1fr;row-gap:2px}
  .kb-pcard__row-value{grid-column:2}
}

/* Завантаження фото у формі — велике фото зверху, кнопки під ним
   (не збоку — при 240px збоку лишалось б порожньо). */
.kb-avatar-upload{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.kb-avatar-upload__preview{display:block}
.kb-avatar-upload__preview .kb-person__avatar{width:240px;height:240px;font-size:var(--fs-h2)}
.kb-avatar-upload__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Фото й Ім'я/Прізвище — в один ряд: імена вузькою колонкою праворуч
   від фото, на тому самому рівні, а не окремим повношириним рядком
   над ним. */
.kb-identity{display:flex;gap:24px;flex-wrap:wrap}
.kb-identity__name{display:flex;gap:16px;flex-wrap:wrap;flex:1;min-width:280px}
.kb-identity__name .kb-f{flex:1;min-width:180px;margin-bottom:0}

/* Прев'ю власної картки в «Профіль для каталогу» — та сама .kb-person,
   що й у списку каталогу, лише не клікабельна й з відступом знизу
   перед формою/кнопкою «Редагувати». */
.kb-catalog-preview{cursor:default;margin-bottom:18px}
.kb-catalog-preview:hover{border-color:var(--ink-600)}

/* ─── підвкладки всередині пейну (База знань: Книги/Фільми/Матеріали) ─── */
.kb-subtabs{display:flex;gap:4px;border-bottom:1px solid var(--ink-600);
  margin-bottom:18px}
.kb-subtab{appearance:none;background:transparent;border:0;font:inherit;
  color:var(--ink-400);padding:8px 4px;margin-right:18px;cursor:pointer;
  border-bottom:2px solid transparent}
.kb-subtab.is-on{color:var(--paper);border-bottom-color:var(--gold-500)}
.kb-subtab:hover{color:var(--paper)}
.kb-subtab:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}

/* ─── картка учасника на весь екран ───
   margin:auto ОБОВʼЯЗКОВИЙ. Нативний <dialog> центрується саме ним
   (UA-стиль inset:0 + margin:auto), а скидання `* { margin: 0 }` у
   tokens.css його зносить — той самий фікс, що й .event-modal у
   components.css та .adm-dialog у admin.css. */
.person-modal{margin:auto;width:100%;max-width:min(820px,calc(100vw - 32px));
  max-height:calc(100vh - 64px);padding:0;border:none;border-radius:14px;
  background:var(--ink-800);color:var(--paper);overflow:hidden auto}
.person-modal::backdrop{background:rgba(5,15,24,.72)}
.person-modal__panel{position:relative;padding:24px 26px}
.person-modal__close{position:absolute;top:12px;right:12px;display:flex;
  align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;background:var(--ink-700);border:1px solid var(--ink-600);
  color:var(--ink-400)}
.person-modal__close svg{width:16px;height:16px}
.person-modal__close:hover{color:var(--paper);border-color:var(--gold-500)}
.person-modal__body{padding-right:24px}
@media(max-width:640px){
  .person-modal{max-width:calc(100vw - 20px);max-height:calc(100vh - 40px)}
  .person-modal__panel{padding:18px 16px 22px}
  .person-modal__body{padding-right:0}
  .person-modal__close{top:10px;right:10px;z-index:2}
}

/* ─── книга/фільм/матеріал на весь екран (kabinet-hub.js → openLibraryModal) ───
   Той самий фікс margin:auto, що й .person-modal вище. */
.library-modal{margin:auto;max-width:min(560px,calc(100vw - 32px));
  max-height:calc(100vh - 64px);padding:0;border:none;border-radius:14px;
  background:var(--ink-800);color:var(--paper);overflow:hidden auto}
.library-modal::backdrop{background:rgba(5,15,24,.72)}
.library-modal--media{max-width:min(920px,calc(100vw - 32px))}
.library-modal__panel{position:relative}
.library-modal__close{position:absolute;top:12px;right:12px;z-index:2;display:flex;
  align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;background:var(--ink-700);border:1px solid var(--ink-600);
  color:var(--ink-400)}
.library-modal__close svg{width:16px;height:16px}
.library-modal__close:hover{color:var(--paper);border-color:var(--gold-500)}
.library-modal__body{padding:24px 24px 24px 26px;display:flex;flex-direction:column;
  align-items:flex-start;gap:9px}
.library-modal__cover{width:100%;max-width:260px;aspect-ratio:2/3;object-fit:cover;
  border-radius:8px;background:var(--ink-600)}
/* Лого партнера в модалці — contain, бо cover ріже лого; на
   картці воно навпаки на всю ширину (див. .hub-card__cover--wide).
   Матеріали тут не проходять — у них або програвач, або --full. */
.library-modal__cover--wide{max-width:none;aspect-ratio:16/9;
  object-fit:contain;padding:10px}
/* Кадр зі зустрічі — форма наперед невідома (3:2, квадрат, портрет),
   тож жодної рамки: пропорції власні, object-fit:contain лишає його
   цілим, а не обтинає під наш прямокутник. max-height, щоб портретний
   кадр не виштовхнув опис за екран. */
.library-modal__cover--full{max-width:none;aspect-ratio:auto;height:auto;
  object-fit:contain;max-height:min(52vh,380px);background:var(--ink-700)}

/* Обкладинка ПЕРШИМ елементом вікна (пропозиція партнера, програма,
   матеріал без відео) — на всю ширину, впритул до країв вікна, без
   поля й власного тла (рішення власника 29.09.2026). Раніше лого
   стояло в рамці 16:9 з padding 10px на --ink-600, і між картинкою й
   вікном читалась синя смуга. Відʼємні поля дорівнюють padding
   .library-modal__body (24 / 24 / 26), радіус — радіусу вікна.
   max-block-size тримає високий кадр, щоб він не виштовхнув назву й
   опис за екран; object-position — щоб обтинало низ, а не верх.
   Вікно новини (.news-modal__cover) не першим елементом і має свій
   вигляд — сюди не входить. */
.library-modal__body > .library-modal__cover--wide:first-child:not(.news-modal__cover),
.library-modal__body > .library-modal__cover--full:first-child{
  inline-size:calc(100% + 50px);max-inline-size:none;
  margin:-24px -24px 8px -26px;padding:0;background:none;
  border-radius:14px 14px 0 0;aspect-ratio:auto;block-size:auto;
  max-block-size:min(56vh,440px);object-fit:cover;object-position:50% 30%}
/* Вікно само по собі звужується під вміст (shrink-to-fit), і з
   квадратним лого, обмеженим за висотою, ставало ~390px. Ширину
   вікна з обкладинкою фіксуємо на звичайних 560px. */
.library-modal:has(.library-modal__body > .library-modal__cover:first-child){
  width:min(560px,calc(100vw - 32px))}

/* ── книга/фільм/матеріал: обкладинка під нахилом на розмитому тлі
   з того самого кадру — той самий прийом, що обкладинка альбому в
   музичних застосунках («Зараз грає»). .library-modal--media на
   самому <dialog> лише розширює його; макет — тут. */
.library-modal__body--media{position:relative;display:grid;
  grid-template-columns:minmax(220px,38%) 1fr;padding:0;gap:0;align-items:stretch}
.library-modal__ambient{position:absolute;inset:0;background-size:cover;
  background-position:center;filter:blur(50px) saturate(1.35) brightness(.5);
  transform:scale(1.35);z-index:0}
.library-modal__ambient::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg, rgba(8,29,42,.6), rgba(8,29,42,.94) 60%)}
.library-modal__media{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:center;padding:44px 28px}
.library-modal__cover--tilt{max-width:210px;
  box-shadow:-16px 26px 46px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  transform:perspective(900px) rotateY(-14deg) rotateX(2deg)}
.library-modal__info{position:relative;z-index:1;padding:34px 30px 34px 6px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;justify-content:center}
.library-modal__info .hub-card__title{font-size:1.5rem;line-height:1.28}
.library-modal__divider{inline-size:100%;border:0;border-block-start:1px solid rgba(255,255,255,.14);margin:2px 0}

/* ── матеріал: програвач YouTube на всю ширину, під ним опис ──
   Свідомо НЕ два стовпці, як у книг: відео 16:9 у вузькій колонці
   стає смужкою, у якій нічого не розгледіти. Ширина модалки тут
   більша за звичайні 560px саме заради програвача. */
.library-modal--video{max-width:min(1040px,calc(100vw - 32px));width:min(1040px,calc(100vw - 32px))}
/* Новина в кабінеті (openNewsModal) — на всю сторінку, як сторінка
   газети клубу (рішення власника 28.09.2026): світлий папір, темний
   текст, шапка зі знаком і датою під подвійною лінією, буквиця, у
   кінці — горизонт клубу. Колонка тексту вузька, щоб рядки читались. */
.library-modal--news{max-width:none;width:100vw;height:100dvh;max-height:none;
  margin:0;border-radius:0;background:#FBFAF6;color:var(--ink-900)}
.library-modal--news::backdrop{background:rgba(5,15,24,.9)}
.library-modal--news .library-modal__close{position:fixed;top:18px;right:18px;
  width:44px;height:44px;color:var(--ink-900);background:var(--paper);
  border:1px solid rgba(8,29,42,.14);box-shadow:0 6px 18px -8px rgba(8,29,42,.3)}
.library-modal__body--news{gap:0;max-width:760px;margin-inline:auto;align-items:stretch;
  padding:clamp(28px,5vw,56px) clamp(18px,4vw,32px) 72px}

.news-paper__mast{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block-end:14px;border-block-end:3px double var(--ink-900)}
.news-paper__brand{display:flex;align-items:center;gap:12px}
.news-paper__mark{width:40px;height:40px;display:block}
.news-paper__names{display:grid;gap:2px;line-height:1.15}
.news-paper__club{font-family:var(--font-display);font-weight:700;font-size:.95rem;
  letter-spacing:.14em;text-transform:uppercase}
.news-paper__section{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate-600)}
.news-paper__date{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate-600);white-space:nowrap}

.news-paper__kicker{margin:clamp(28px,4vw,40px) 0 10px;font-size:.75rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-800)}
.library-modal--news .news-paper__title{margin:0 0 clamp(20px,3vw,28px);
  font-size:clamp(1.75rem,4vw,2.625rem);font-weight:300;line-height:1.15;
  letter-spacing:-.01em;color:var(--ink-900)}

.news-modal__cover{display:block;align-self:center;inline-size:auto;max-inline-size:100%;max-block-size:72vh;
  margin:0 auto clamp(24px,3.4vw,36px);object-fit:contain;padding:0;border-radius:4px;
  background:none;aspect-ratio:auto;box-shadow:0 24px 48px -28px rgba(8,29,42,.45)}

.library-modal--news .hub-desc{max-width:none;font-size:1.0625rem;line-height:1.8;
  color:#1F2F3A}
.library-modal--news .hub-desc__head{color:var(--gold-800);margin-block-start:14px}
.library-modal--news .hub-desc__name{color:var(--ink-900)}
.library-modal--news .hub-desc__list li::before,
.library-modal--news .hub-desc__person::before{background:var(--gold-800)}
/* Буквиця — перша літера першого абзацу, як у газеті. */
.news-paper__text > .hub-desc__p:first-child::first-letter{float:left;
  font-family:var(--font-display);font-weight:500;font-size:3.6em;line-height:.9;
  margin:.06em .1em 0 0;color:var(--ink-800)}
.library-modal--news .hub-card__acts{margin-block-start:28px}

.news-paper__foot{margin-block-start:clamp(40px,6vw,64px);text-align:center;color:var(--ink-800)}
.news-paper__horizon{opacity:.35}
.news-paper__sign{margin:10px 0 0;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate-600)}
@media (max-width:520px){
  .news-paper__mast{flex-wrap:wrap}
}
/* Обличчя в кадрі: обкладинки новин частіше вертикальні афіші з
   людиною у верхній третині — центр по висоті різав голову. */
.hub-card--news .hub-card__cover{object-position:50% 18%}
/* Фото програми у вікні — кадр зі зустрічі, на всю ширину без полів. */
.program-modal__cover{object-fit:cover;padding:0;border-radius:12px;inline-size:100%;
  margin-block-end:6px}
.library-modal__body--video{padding:0;gap:0;display:flex;flex-direction:column;
  align-items:stretch}
.video-modal__stage{position:relative;aspect-ratio:16/9;background:#000;
  border-radius:14px 14px 0 0;overflow:hidden}
.video-modal__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Хрестик лежить на кадрі, а не на рівному тлі модалки: --ink-700 на
   світлому кадрі зникає. Тінь і темна підкладка тримають його
   видимим на будь-якому відео. */
.library-modal--video .library-modal__close{color:var(--paper);
  background:rgba(5,15,24,.78);border-color:rgba(255,255,255,.2);
  box-shadow:0 2px 10px rgba(0,0,0,.45)}
.video-modal__info{padding:22px 26px 26px;display:flex;flex-direction:column;
  align-items:flex-start;gap:10px;min-width:0}
.video-modal__info .hub-card__title{font-size:1.5rem;line-height:1.28}
/* Перемикачі записів — не кнопки-дії, а вкладки: одна з них завжди
   ввімкнена, і натискання не веде нікуди, а міняє відео в тому ж
   програвачі. Тому вигляд чіпа, а не .btn. */
.video-modal__parts{display:flex;flex-wrap:wrap;gap:8px}
/* Записи й «Презентація» — один рядок під назвою (openLibraryModal). */
.video-modal__bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.video-modal__bar .btn{margin:0}

/* Розібраний опис (richDescription у kabinet-hub.js): світліший і
   крупніший за сірий службовий текст, з повітрям між абзацами,
   підзаголовки золоті, списки — з акуратними маркерами. */
.hub-desc{display:grid;gap:10px;max-width:76ch;font-size:1rem;line-height:1.7;
  color:rgba(255,255,255,.84)}
/* У широкому вікні з відео текст іде ширше, інакше справа лишалась
   порожня третина вікна. */
.video-modal__info .hub-desc{max-width:none}
.hub-desc__p{margin:0}
.hub-desc__head{margin:10px 0 -2px;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-500)}
.hub-desc__head:first-child{margin-block-start:0}
.hub-desc__list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.hub-desc__list li{position:relative;padding-inline-start:18px}
.hub-desc__list li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--gold-500)}
/* Спікер: імʼя білим жирним, перед абзацом — та сама золота крапка,
   що й у списках, тож і абзаци, і пункти зі спікерами виглядають
   однаково. */
.hub-desc__name{font-weight:600;color:var(--paper)}
.hub-desc__person{position:relative;padding-inline-start:18px}
.hub-desc__person::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--gold-500)}
.video-modal__part{padding:6px 13px;border-radius:999px;font-size:var(--fs-sm);
  color:var(--ink-400);background:var(--ink-700);border:1px solid var(--ink-600);
  cursor:pointer}
.video-modal__part:hover{color:var(--paper);border-color:var(--gold-500)}
.video-modal__part.is-on{color:var(--ink-900);background:var(--gold-500);
  border-color:var(--gold-500)}

/* ── подія: фото колонкою на всю висоту зліва, дані праворуч ──
   Свідомо НЕ той самий прийом, що в книг вище: обкладинка книги —
   предмет, який доречно «покласти» під кутом на розмите тло; фото
   події — сцена, і нахилена сцена читається як помилка верстки.
   Тут фото працює як афіша: кадр у край, дата поверх нього. */
.library-modal__body--event{display:grid;
  grid-template-columns:minmax(200px,38%) 1fr;padding:0;gap:0;
  align-items:stretch;min-height:340px}
.event-modal__poster{position:relative;overflow:hidden}
.event-modal__photo{width:100%;height:100%;object-fit:cover;display:block}
/* Затемнення згори й знизу — дата має лишатись читабельною на
   будь-якому кадрі, а не лише на вдало темному. */
.event-modal__poster::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,15,24,.45) 0%,
    rgba(5,15,24,0) 34%,rgba(5,15,24,.82) 100%)}
.event-modal__date{position:absolute;left:22px;bottom:18px;z-index:1;
  margin:0;display:flex;flex-direction:column;gap:2px}
/* Не --ink-400: рік лежить на фото, а не на рівному тлі, і тьмяний
   сірий на світлому кадрі зникає. */
.event-modal__year{font-size:var(--fs-eyebrow);letter-spacing:.12em;
  color:rgba(255,255,255,.72)}
.event-modal__info{padding:30px 28px;display:flex;flex-direction:column;
  align-items:flex-start;gap:11px;min-width:0}
.event-modal__info .hub-card__title{font-size:1.5rem;line-height:1.28}
.event-modal__info .hub-card__acts{margin-block-start:6px}
/* «Спікери» — підпис розділу, не другий заголовок: голий h3 брав
   базовий --fs-h3 і важив майже як назва події, з якою й конкурував.
   Той самий вигляд, що .kb-person__panel h5 у картці учасника. */
.event-modal__label{margin:6px 0 0;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.04em;color:var(--gold-500)}

@media(max-width:640px){
  /* Вузький екран: фото стає банером зверху. Портретна колонка тут
     з'їла б пів висоти, а кадр у подій горизонтальний. */
  .library-modal__body--event{grid-template-columns:1fr;min-height:0}
  .event-modal__poster{aspect-ratio:16/9}
  .event-modal__info{padding:22px 24px 24px}
  .library-modal__body--media{grid-template-columns:1fr}
  .library-modal__media{padding:28px 24px 6px}
  .library-modal__cover--tilt{max-width:170px;transform:none;
    box-shadow:0 14px 30px rgba(0,0,0,.5)}
  .library-modal__info{padding:16px 22px 26px}
  .video-modal__info{padding:18px 20px 24px}
}

/* ─── інструкція «Додати на початковий екран» (iOS) — той самий
   .library-modal, лише вужчий вміст: три кроки, без обкладинки. ─── */
.pwa-modal{max-width:min(420px,calc(100vw - 32px))}
.pwa-modal__body h2{margin:0 0 14px;font-size:var(--fs-h4)}
.pwa-steps{list-style:none;margin:0 0 14px;padding:0;display:flex;
  flex-direction:column;gap:14px}
.pwa-steps li{display:flex;align-items:flex-start;gap:12px;line-height:1.5}
.pwa-steps__num{flex:none;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--ink-700);
  border:1px solid var(--ink-600);color:var(--gold-500);font-size:var(--fs-sm);
  font-weight:600}

/* ─── таблиці ─── */
.kb-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.kb-table th{text-align:left;color:var(--ink-400);font-weight:500;font-size:var(--fs-xs);
  border-bottom:1px solid var(--ink-600);padding:8px 10px}
.kb-table td{padding:8px 10px;border-bottom:1px solid var(--ink-700)}
.kb-consents{margin:0;padding-left:18px;line-height:1.7}
.kb-consents li{margin-bottom:12px}

.kb-foot{border-top:1px solid var(--ink-600);padding:24px 0;
  color:var(--ink-400);font-size:var(--fs-xs)}
.kb-foot a{color:var(--ink-400)}

/* ═══════════════════════════════════════════════════════════════
   ГОЛОВНА КАБІНЕТУ ТА РЕСУРСНІ РОЗДІЛИ

   Картки, а не таблиця. Людина тут не порівнює рядки — вона шукає
   привід щось зробити: піти на зустріч, встигнути на грант, узяти
   знижку. Картка показує привід цілком, таблиця розрізає його на
   колонки.
   ═══════════════════════════════════════════════════════════════ */

/* Привітання й KPI-плашки в одному рядку на широкому екрані; на
   вузькому плашки самі переносяться під привітання — flex-wrap,
   без окремого медіа-запиту. */
.hub-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-block-end: 28px;
}
.hub-top .hub-hi { margin-block-end: 0; flex: 1 1 280px; }

.kpi-row { display: flex; flex-wrap: wrap; gap: 10px; }
.kpi-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 108px;
  flex: 1 1 108px;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: 12px;
  padding: 11px 13px;
}
.kpi-tile svg { width: 17px; height: 17px; color: var(--gold-500); }
.kpi-tile__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.kpi-tile__label { margin: 0; font-size: var(--fs-xs); color: var(--ink-400); line-height: 1.35; }

.hub-hi { margin-block-end: 28px; }
.hub-hi__title { margin: 0; font-size: var(--fs-h2); line-height: 1.15; }

/* Смуга стану членства. Вона тут ЛИШЕ коли з членством треба щось
   зробити — інакше перший екран знову перетворюється на нагадування
   про витрату, а це саме те, від чого ми пішли. */
.hub-alert {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 12px;
  margin-block-end: 28px;
  border: 1px solid var(--ink-600);
  background: var(--ink-700);
}
.hub-alert strong { font-size: var(--fs-body); }
.hub-alert span { color: var(--ink-400); font-size: var(--fs-sm); }
.hub-alert .btn { margin-inline-start: auto; }
.hub-alert.is-warn { border-color: var(--gold-600); }
.hub-alert.is-bad { border-color: #7d3b36; }

/* ─── Пропозиція встановити PWA — той самий вигляд, що .hub-alert
   вище, лише живе в статичній розмітці kabinet/index.html (не
   перемальовується при зміні вкладки), тому власний клас. ─── */
.kb-pwa-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* Той самий трюк, що .container (layout.css): padding-inline = gutter
     робить одну властивість і зовнішнім відступом від країв екрана
     на мобільному, і внутрішнім — від рамки картки до тексту. */
  max-width: calc(var(--w-wide) + 2 * var(--gutter));
  margin: 16px auto 0;
  padding: 16px var(--gutter);
  border-radius: 12px;
  border: 1px solid var(--ink-600);
  background: var(--ink-700);
}
.kb-pwa-banner__text strong { display: block; font-size: var(--fs-body); }
.kb-pwa-banner__text p {
  margin: 4px 0 0;
  color: var(--ink-400);
  font-size: var(--fs-sm);
  max-width: 52ch;
}
.kb-pwa-banner__actions {
  display: flex;
  gap: 10px;
  flex: none;
}

.hub-sec { margin-block-end: 34px; }
.hub-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-block-end: 14px;
}
.hub-sec__title { margin: 0; font-size: var(--fs-h4); }
.hub-sec__more {
  background: none;
  border: 0;
  padding: 4px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--gold-500);
  cursor: pointer;
  white-space: nowrap;
}
.hub-sec__more:hover { color: var(--gold-400); }
.hub-sec__more:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

.hub-sub { margin: 26px 0 12px; font-size: var(--fs-body); color: var(--gold-500); }
.hub-sub--muted { color: var(--ink-400); }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  /* Без align-items:start (тобто дефолтний stretch) — картки в рядку
     однакової висоти, і card__foot/margin-block-start:auto штовхає
     кнопку на той самий рівень у кожній колонці. .hub-card теж на це
     розраховував (block-size:100%), просто попередній start це гасив. */
}
/* Минулі події тьмяніші: вони тут для пошуку («як звалась та
   зустріч про нерухомість»), а не для дії. */
.hub-grid--past { opacity: .62; }

/* Матеріали — рівно три в ряду, а не auto-fill по 260px, який давав
   чотири. Кадри тут горизонтальні (16:9), і ширша колонка потрібна,
   щоб вони читались, а не стискались у смужку. Книги й фільми
   лишаються на auto-fill: портретні обкладинки добре стоять і
   вчотирьох. */
#kb-list-materials .hub-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) {
  #kb-list-materials .hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  #kb-list-materials .hub-grid { grid-template-columns: 1fr; }
}

/* Книги, фільми й пропозиції партнерів — пʼять у ряд (рішення власника
   28.09.2026; пропозиції — тим самим рішенням пізніше):
   портретна обкладинка 2:3 добре читається й вужчою, а auto-fill
   по 260px давав лише чотири. */
#kb-list-books .hub-grid,
#kb-list-movies .hub-grid,
#kb-list-offers .hub-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  #kb-list-books .hub-grid,
  #kb-list-movies .hub-grid,
  #kb-list-offers .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #kb-list-books .hub-grid,
  #kb-list-movies .hub-grid,
  #kb-list-offers .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #kb-list-books .hub-grid,
  #kb-list-movies .hub-grid,
  #kb-list-offers .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Пропозиції партнерів на телефоні — по одній у ряд (власник
   04.10.2026): банер партнера горизонтальний, і вдвох у 160px він
   ставав смужкою, а назва ламалась на три рядки. */
@media (max-width: 560px) {
  #kb-list-offers .hub-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Пропозиції з печаткою знижки (варіант D, 04.10.2026) — максимум три
   в ряд: у пʼятій частині ширини поруч із колом 56px на назву лишалось
   ~100px, і «Croissants» ламалось посеред слова. */
@media (min-width: 561px) {
  #kb-list-offers .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 561px) and (max-width: 900px) {
  #kb-list-offers .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* «Запропонувати книгу / фільм» під сіткою (kabinet-hub.js →
   libIdeaButton, власник 04.10.2026): кругла кнопка з лампочкою по
   центру, підпис під нею. Золото — лише лінією кола. */
.hub-suggest { display: flex; justify-content: center; margin-block-start: 28px; }
.hub-suggest__btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 4px; border: 0; background: none; font: inherit; cursor: pointer;
  color: var(--ink-400);
}
.hub-suggest__circle {
  display: grid; place-items: center;
  inline-size: 56px; block-size: 56px; border-radius: 50%;
  border: 1.5px solid var(--gold-500); color: var(--gold-500);
  transition: background-color .18s ease;
}
.hub-suggest__circle svg { width: 24px; height: 24px; }
.hub-suggest__label { font-size: var(--fs-sm); }
.hub-suggest__btn:hover .hub-suggest__circle { background: rgba(242, 194, 0, .1); }
.hub-suggest__btn:hover .hub-suggest__label { color: var(--paper); }
.hub-suggest__btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; border-radius: 12px; }

/* Знижка партнера — «варіант D» (власник 04.10.2026, kabinet-hub.js →
   offerRow): назва з рядком під нею ліворуч, кругла «печатка» зі
   знижкою праворуч. Золото — лише лінією кола й цифрою, без заливки. */
.hub-offer { display: flex; align-items: center; gap: 12px; width: 100%; margin-block-start: 4px; }
.hub-offer__text { flex: 1; min-width: 0; }
.hub-offer .hub-card__title { margin: 0; overflow-wrap: break-word; }
.hub-offer__sub { margin: 3px 0 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-400); }
.hub-offer__until {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(242, 194, 0, .72);
  font-variant-numeric: tabular-nums;
}
.hub-offer__until svg { width: 13px; height: 13px; flex: none; }
.hub-offer__until.is-soon { color: var(--gold-500); font-weight: 500; }
.hub-offer__stamp {
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-500);
  color: var(--gold-500);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
}
.hub-offer__stamp small { font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.hub-offer__stamp svg { width: 22px; height: 22px; }

/* Фільми й книги — «варіант C» (власник 04.10.2026, kabinet-hub.js →
   posterCard): постер без картки навколо, під ним назва й рік (книга —
   автор); на телефоні три в ряд замість двох великих карток. */
@media (max-width: 560px) {
  #kb-list-books .hub-grid,
  #kb-list-movies .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
}
.hub-poster { display: flex; flex-direction: column; gap: 4px; min-width: 0; cursor: pointer; }
.hub-poster:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 8px; }
.hub-poster__frame {
  position: relative;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--ink-600);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink-600);
  transition: border-color .18s ease;
}
.hub-poster:hover .hub-poster__frame { border-color: var(--gold-500); }
.hub-poster__frame img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hub-poster__frame.is-empty { display: grid; place-items: center; padding: 10px; text-align: center;
  color: var(--gold-500); font-size: var(--fs-xs); line-height: 1.3; }
/* Два класи — бо .kb-card h3 (клас+тег) специфічніший за один клас
   і робив назву золотою, 17px і з відступом 26px зверху. */
.hub-poster .hub-poster__title {
  margin: 4px 0 0;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--paper);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hub-poster__meta { margin: 0; font-size: .75rem; color: var(--ink-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Зірочка в куті постера — напівпрозора підкладка, щоб читалась і на
   світлому кадрі. */
.hub-like.hub-like--poster {
  position: absolute;
  right: 6px;
  bottom: 6px;
  margin: 0;
  padding: 2px 7px;
  gap: 4px;
  background: rgba(8, 20, 30, .82);
  border-color: transparent;
  font-size: 11px;
}
.hub-like--poster svg { width: 12px; height: 12px; }
@media (max-width: 560px) {
  .hub-poster .hub-poster__title { font-size: .75rem; }
  .hub-poster__meta { font-size: .6875rem; }
}

/* Вужча колонка — компактніший текст під обкладинкою: заголовок
   і автор дрібніші, відступи щільніші (рішення власника 28.09.2026). */
#kb-list-books .hub-card,
#kb-list-movies .hub-card,
#kb-list-offers .hub-card { gap: 6px; padding: 14px 14px 14px; }
#kb-list-books .hub-card__cover,
#kb-list-movies .hub-card__cover,
#kb-list-offers .hub-card__cover { width: calc(100% + 28px); margin: -14px -14px 4px; }
#kb-list-books .hub-card .hub-card__title,
#kb-list-movies .hub-card .hub-card__title,
#kb-list-offers .hub-card .hub-card__title { font-size: 1rem; line-height: 1.3; }
#kb-list-books .hub-card__meta,
#kb-list-movies .hub-card__meta,
#kb-list-offers .hub-card__meta { font-size: .75rem; }
#kb-list-books .kb-chips-ro span,
#kb-list-movies .kb-chips-ro span { font-size: 10px; padding: 2px 8px; }
#kb-list-books .hub-like,
#kb-list-movies .hub-like,
#kb-list-offers .hub-like { padding: 3px 8px; }

/* Обгортка «факти події + кнопка запису» (eventCard() у
   kabinet-hub.js). Тут — рівно те, чим була відстань між ними, поки
   вони були прямими дітьми .card (flex-direction:column;gap:14px):
   на десктопі жодної візуальної різниці. На телефоні
   @media(max-width:560px) нижче перемикає на row. */
.card__meta-row { display: flex; flex-direction: column; gap: 14px; }
/* Обгортка росте на решту висоти картки, а її низ (кнопка) — до дна:
   тоді «Записатися» й «Ви записані» стоять на одній лінії в усьому
   ряду, скільки б рядків не займала назва події. */
.card--event .card__meta-row { flex: 1 1 auto; }
/* Обгортка всього, що праворуч від дати (eventCard): поза «квитком»
   її для розкладки немає — діти поводяться як діти самої картки. */
.card--event .card__main { display: contents; }
/* День тижня, штамп «за N дн.» і короткий «1 записався» — лише в
   «квитку» (нижче). */
.card--event .card__date-wd,
.card--event .card__date-stamp,
.ev-going__short { display: none; }
.card--event .card__meta-row > .card__foot { margin-block-start: auto; }

/* Низ картки програми: стан участі й кнопка разом, притиснуті до дна. */
.hub-card__foot {
  margin-block-start: auto;
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-block-start: 6px;
}
.hub-card__foot .btn,
.hub-card__foot .hub-card__acts { margin-block-start: 0; }
.hub-card__foot .hub-fine { margin: 0; }

/* Картка події клікабельна — відкриває повний опис/спікерів у
   модалці (openEventDetailModal). Той самий hover, що вже дає
   .card:hover (components.css), тут лише курсор. */
.card--event { cursor: pointer; }

/* Сильніше заокруглення карток у кабінеті — рішення власника
   28.09.2026, та сама мова, що в картках партнерів на сайті. */
.hub-grid .card { border-radius: 20px; }

/* Вкладки «Архів подій / Найближчі»: лінія під ними впиралась у верх
   карток і зливалась з їхніми рамками в одну «рисочку» — прибрано
   (рішення власника 28.09.2026), а картки відсунуто від вкладок. */
#kb-list-events .tabs__list { border-bottom: 0; margin-block-end: 18px; }

/* Архів подій — рекапи як на сайті (recapCard() у kabinet-hub.js):
   оголошення, одне фото ліворуч, назва й опис праворуч. Кожна подія
   на всю ширину, а не плиткою в сітці. */
.kb-recaps { display: grid; gap: 16px; }
.kb-recap {
  padding: clamp(18px, 2vw, 24px);
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-ui);
}
.kb-recap:hover { border-color: var(--gold-500); }
.kb-recap:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.kb-recap__ann {
  margin: 0 0 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--gold-500);
}
.kb-recap__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}
.kb-recap__grid--text { grid-template-columns: 1fr; }
.kb-recap__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  background: var(--ink-700);
}
.kb-recap__info { display: grid; gap: 10px; align-content: start; min-width: 0; }
.kb-recap .kb-recap__title {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.3;
  color: var(--paper);
}
.kb-recap__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-400);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-recap__when { margin: -2px 0 0; font-size: var(--fs-xs); color: var(--ink-400); letter-spacing: .02em; }
.kb-recap__label {
  margin: 4px 0 -4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.kb-recap__topics { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.kb-recap__topics li {
  position: relative;
  padding-inline-start: 14px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
}
.kb-recap__topics li::before {
  content: "";
  position: absolute;
  inset-inline-start: 1px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-500);
}
.kb-recap__people { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.kb-recap__people li { display: grid; gap: 1px; font-size: var(--fs-sm); line-height: 1.35; }
.kb-recap__people strong { font-weight: 600; color: var(--paper); }
.kb-recap__people span { font-size: 12px; color: var(--ink-400); }
.kb-recap__more-people { align-self: center; color: var(--ink-400); }
.kb-recap__who { margin: 0; font-size: var(--fs-sm); color: var(--paper); }
.kb-recap__who .kb-recap__label { display: inline; margin: 0 8px 0 0; }
/* Вікно архівної події: ті самі мітки, теми й спікери, що в картці,
   тільки повністю; спікери — стовпчиком, з роллю під іменем. */
.event-modal__info .kb-recap__label { margin-block: 10px -2px; }
.event-modal__desc { font-size: .9375rem; line-height: 1.65; }
.kb-recap__people--full { display: grid; gap: 10px; }
@media (max-width: 700px) {
  .kb-recap__grid { grid-template-columns: 1fr; }
  .kb-recap__photo { aspect-ratio: 16 / 9; }
}
/* Корінець і мініатюри — лише в «погашеному квитку» на телефоні. */
.kb-recap__stub,
.kb-recap__thumbs { display: none; }
@media (max-width: 560px) {
  /* «Погашений квиток» («варіант F», власник 04.10.2026, recapCard):
     та сама форма, що в «Найближчих», але корінець тьмяний і зі
     штампом «Була». Анонс, велике фото й опис — у вікні по кліку. */
  .kb-recap {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    padding: 0;
  }
  .kb-recap__ann,
  .kb-recap__photo,
  .kb-recap__text,
  .kb-recap__when { display: none; }
  .kb-recap__stub {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 16px 0;
    border-inline-end: 1.5px dashed var(--ink-500);
    color: var(--ink-400);
  }
  .kb-recap__stub-day {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 200;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .kb-recap__stub-month { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
  .kb-recap__stub-year { font-size: 10px; color: var(--ink-500); margin-block-start: 2px; }
  .kb-recap__stamp {
    margin-block-start: 8px;
    padding: 2px 6px;
    border: 1px solid var(--ink-500);
    border-radius: 4px;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    transform: rotate(-8deg);
  }
  /* Вирізи на лінії відриву — як у квитка «Найближчих». */
  .kb-recap__stub::before,
  .kb-recap__stub::after {
    content: '';
    position: absolute;
    inset-inline-end: -9px;
    inline-size: 17px;
    block-size: 17px;
    border-radius: 50%;
    background: var(--ink-800);
  }
  .kb-recap__stub::before { top: -10px; }
  .kb-recap__stub::after { bottom: -10px; }
  .kb-recap__grid,
  .kb-recap__grid--text {
    grid-column: 2;
    grid-row: 1;
    display: block;
    padding: 16px 16px 16px 18px;
  }
  .kb-recap__info { gap: 7px; }
  .kb-recap .kb-recap__title { font-size: 1rem; }
  .kb-recap__who .kb-recap__label { display: none; }
  .kb-recap__who { color: var(--ink-400); font-size: var(--fs-xs); }
  .kb-recap__thumbs { display: flex; gap: 5px; margin-block-start: 3px; }
  .kb-recap__thumb {
    position: relative;
    flex: none;
    inline-size: 54px;
    block-size: 54px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--ink-700);
  }
  .kb-recap__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .kb-recap__more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(5, 15, 24, .62);
    color: var(--paper);
    font-size: 12px;
    font-weight: 500;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kb-recap { transition: none; }
}

/* «Записатися» проти «Ви записані» — різна довжина напису робила
   кнопки різної ширини в сусідніх картках одного ряду hub-grid.
   width:100% рівняє їх по ширині картки незалежно від тексту. */
.hub-grid .card--event .card__foot .btn {
  width: 100%;
}

.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  border-radius: 20px;
  padding: 16px 17px 17px;
  block-size: 100%;
}

/* Зірочка «подобається» — внизу картки, окремим рядком (не поверх
   обкладинки). margin-block-start:auto — той самий трюк, що й
   .hub-card .btn нижче: притискає її до низу картки незалежно від
   того, скільки тексту вище. stopPropagation у toggleLike() не дає
   кліку заразом відкрити модалку картки. */
.hub-like {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-block-start: auto;
  background: var(--ink-600);
  border: 1px solid var(--ink-500);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: var(--fs-xs);
  color: var(--paper);
  cursor: pointer;
}
.hub-like svg { width: 14px; height: 14px; color: var(--ink-400); flex: none; }
.hub-like.is-on svg { color: var(--gold-500); fill: var(--gold-500); }
.hub-like:hover { border-color: var(--gold-500); }
.hub-like:disabled { opacity: .6; cursor: not-allowed; }

/* У модалці зірочка сидить одразу під заголовком, а не притиснута
   до низу — там немає «низу картки», що її тягнув би. */
.hub-like--inline {
  margin: 2px 0 6px;
  background: var(--ink-700);
}
.hub-card--prog { background: var(--ink-800); border-color: var(--ink-500); }
.hub-card--clickable { cursor: pointer; }
.hub-card--clickable:hover { border-color: var(--gold-500); }
.hub-card--clickable:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.hub-card__when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hub-card__day {
  font-size: var(--fs-sm);
  color: var(--gold-500);
  text-transform: lowercase;
}
/* Обкладинка до самих країв картки (не в межах padding, як решта
   вмісту) — тому мінус-відступи назовні на ширину/верх padding-у
   .hub-card, і заокруглення лише зверху (знизу вона переходить у
   текст картки, не в її справжній нижній край). */
.hub-card__cover {
  width: calc(100% + 34px);
  /* Без max-width:none глобальний ресет `img { max-width: 100% }`
     (tokens.css) обтинає ширину назад до 100%: мінус-відступ виносив
     обкладинку до лівого краю, а справа лишалась щілина в 34px. */
  max-width: none;
  margin: -16px -17px 0;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  /* 20px картки мінус 1px її рамки — інакше в кутах щілина. */
  border-radius: 19px 19px 0 0;
  background: var(--ink-600);
}
/* Лого/промо-графіка партнерів і превʼю матеріалів — не обкладинка
   книги: у портретній 2:3 рамці широкі банери (текст на всю ширину)
   обрізались по краях. 16:9 показує їх цілими й робить картку
   нижчою. */
.hub-card__cover--wide {
  aspect-ratio: 16 / 9;
}
/* Лого партнера на картці — теж cover, на всю ширину (рішення
   власника 28.09.2026). Раніше тут був contain, бо cover різав
   квадратні лого («ACCOUNTIN…» замість «ACCOUNTING ACADEMY»);
   власник свідомо обрав заповнення без полів. Ціле лого лишається
   в модалці (.library-modal__cover--wide). */
/* Те саме, що й .hub-card__title нижче: .kb-card h3 (заголовки
   розділів на кшталт «Контакти») чіпляє й заголовок картки події —
   він теж h3 всередині .kb-card. Крім кольору, звідти прилітав
   margin:26px 0 8px, і відступи в картці виходили 40/22/14 замість
   рівних 14 від flex-gap. Повертаємо те, що задає сам компонент у
   components.css. */
.kb-card .card__title{margin:0;font-size:var(--fs-h4);color:var(--c-text)}

/* Два класи, а не один. `.kb-card h3` (заголовки розділів на кшталт
   «Контакти») важить (0,1,1) і перебиває `.hub-card__title` (0,1,0),
   хоч би нижче той стояв: специфічність сильніша за порядок. Через
   це правило було мертве — назва картки лишалась золотою і з
   відступами 26/8 замість нуля, і виміряти це можна лише на живій
   сторінці, бо у файлі все виглядає правильно. Колір паперовий, щоб
   акцент на картці був один — золотий чіп знижки, а не два. */
.kb-card .hub-card__title { margin: 0; font-size: var(--fs-body); line-height: 1.35; color: var(--paper); }
/* Картки новин, пропозицій і програм на головній лежать не в .kb-card,
   і заголовок брав розмір звичайного h3 (28px) — удвічі більший за
   заголовок картки зустрічі поруч. Тепер той самий, що в зустрічей
   (рішення власника 28.09.2026). */
.hub-card .hub-card__title { font-size: var(--fs-h4); line-height: 1.35; }
/* Заголовок новини під фото — дрібніший (рішення власника 28.09.2026). */
.hub-card--news .hub-card__title { font-size: 1rem; line-height: 1.35; }
/* Корінець програми — лише в «квитку» на головній (нижче); обгортка
   назви поза ним «прозора». */
.hub-card--prog .hub-card__stub { display: none; }
.hub-card--prog .hub-card__main { display: contents; }
@media (max-width: 560px) {
  /* «Знайомства» на головній — квитки (варіант E, власник 04.10.2026,
     programCard): та сама мова, що квитки подій і «Запросіть друга».
     Корінець — іконка й статус програми, праворуч назва й підпис, без
     фото. Клік — те саме вікно програми. */
  .hub-sec--programs .hub-card--prog {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    padding: 0;
    gap: 0;
    border-radius: 18px;
    block-size: auto;
  }
  .hub-sec--programs .hub-card--prog > .hub-card__cover,
  .hub-sec--programs .hub-card--prog > .hub-tag { display: none; }
  .hub-sec--programs .hub-card--prog .hub-card__stub {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 16px 4px;
    border-inline-end: 1.5px dashed var(--ink-500);
    text-align: center;
    color: var(--gold-500);
  }
  .hub-sec--programs .hub-card--prog .hub-card__stub svg { width: 26px; height: 26px; margin-block-end: 6px; }
  .hub-sec--programs .hub-card--prog .hub-card__stub-when,
  .hub-sec--programs .hub-card--prog .hub-card__stub-state {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.35;
    text-transform: uppercase;
  }
  .hub-sec--programs .hub-card--prog .hub-card__stub-when + .hub-card__stub-when { color: var(--ink-400); }
  /* Вирізи — кольору тла головної (ink-900). */
  .hub-sec--programs .hub-card--prog .hub-card__stub::before,
  .hub-sec--programs .hub-card--prog .hub-card__stub::after {
    content: '';
    position: absolute;
    inset-inline-end: -9px;
    inline-size: 17px;
    block-size: 17px;
    border-radius: 50%;
    background: var(--ink-900);
  }
  .hub-sec--programs .hub-card--prog .hub-card__stub::before { top: -10px; }
  .hub-sec--programs .hub-card--prog .hub-card__stub::after { bottom: -10px; }
  .hub-sec--programs .hub-card--prog .hub-card__main {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 16px 14px 16px 16px;
  }
  .hub-sec--programs .hub-card--prog .hub-card__title { margin: 0; font-size: 1rem; }
  .hub-sec--programs .hub-card--prog .hub-card__meta { margin: 0; font-size: var(--fs-xs); }
}

/* Рядок дати й підводка — лише в «газетній стрічці» на головній (нижче). */
.hub-card--news .hub-card__dateline,
.hub-card--news .hub-card__lead { display: none; }
@media (max-width: 560px) {
  /* «Новини клубу» на головній (newsCard, власник 04.10.2026): без
     фото — дата золотом, заголовок, один рядок підводки (спершу
     «газетна стрічка», варіант C). Кожна новина — окрема картка з тим
     самим тлом, рамкою й заокругленням, що квитки «Знайомств» (варіант
     A), лише без корінця. Клік — те саме вікно газети. Розділ «Новини»
     й комп'ютер — як були. */
  .hub-sec--news .hub-grid { display: grid; gap: 10px; }
  .hub-sec--news .hub-card--news {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    background: var(--ink-800);
    border: 1px solid var(--ink-500);
    border-radius: 18px;
    block-size: auto;
  }
  .hub-sec--news .hub-card--news:hover { transform: none; box-shadow: none; }
  .hub-sec--news .hub-card--news .hub-card__cover,
  .hub-sec--news .hub-card--news .hub-tag,
  .hub-sec--news .hub-card--news .hub-card__meta { display: none; }
  .hub-sec--news .hub-card--news .hub-card__dateline {
    display: block;
    margin: 0;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-500);
  }
  .hub-sec--news .hub-card--news .hub-card__title { margin: 0; }
  .hub-sec--news .hub-card--news .hub-card__lead {
    display: block;
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hub-sec--news .hub-card--news:focus-visible { outline-offset: 0; }
}
/* Чіп і назва — одна група, тому між ними менше повітря, ніж до
   обкладинки над ними. З рівним gap:9px з обох боків чіп «висів»
   посередині й не читався разом із назвою. Через margin, а не gap:
   .hub-card роздає однаковий gap усім дітям. */
.hub-card__cover + .hub-tag { margin-block-start: 5px; }

/* Закрите для рівня (lockedCard у kabinet-hub.js, міграція 065):
   картку видно, але обкладинка приглушена й знебарвлена, а замок
   «Premium» лежить поверх неї в куті. Колір не повертається під
   курсором — інакше закрите виглядало б відкритим. */
.hub-card--locked .hub-card__cover { filter: grayscale(1) brightness(.72); }
.hub-card--locked .hub-card__title { color: var(--paper); opacity: .78; }
.hub-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(8, 29, 42, .82);
  border: 1px solid rgba(242, 194, 0, .45);
  color: var(--gold-500);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  backdrop-filter: blur(6px);
}
.hub-lock svg { width: 13px; height: 13px; flex: none; }
.hub-card--locked .hub-lock { position: absolute; top: 12px; right: 12px; z-index: 1; }
.hub-card--locked .hub-lock--inline { position: static; }
.hub-card--locked:hover { border-color: rgba(242, 194, 0, .55); }
.hub-lock--big { font-size: 12px; padding: 6px 12px 6px 10px; }
.hub-lock--big svg { width: 15px; height: 15px; }
.library-modal__body--locked { gap: 14px; max-width: 460px; }
.hub-tag + .hub-card__title { margin-block-start: -4px; }
.hub-card__meta { margin: 0; font-size: var(--fs-xs); color: var(--ink-400); line-height: 1.5; }
.hub-card__text { margin: 0; font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.55; }
.hub-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: auto; }
.hub-card .btn { margin-block-start: auto; }
.hub-card__acts .btn { margin-block-start: 0; }

.hub-tag {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 20px;
  background: var(--ink-600);
  color: var(--ink-400);
}
/* Строк, що спливає, — єдине місце, де тут дозволено акцент. Якщо
   підсвічувати все, не підсвічено ніщо. */
.hub-tag.is-hot { background: #7d3b36; color: #ffd9d5; }
.hub-tag.is-gold { background: var(--gold-500); color: var(--ink-900); }

/* Промокод купоном (варіант A, 06.10.2026): золотий контур, пунктир
   перфорації, кнопка «Копіювати» корінцем. */
.hub-coupon {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--gold-500);
  border-radius: 12px;
  overflow: hidden;
  max-width: 100%;
}
.hub-coupon__main {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-right: 1.5px dashed var(--gold-500);
}
.hub-coupon__lab {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.hub-coupon__code {
  display: block;
  margin-top: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem;
  letter-spacing: .08em;
  color: #fff;
  overflow-wrap: anywhere;
  padding: 0;
  background: none;
  border: 0;
}
.hub-coupon__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 0 16px;
  border: 0;
  background: var(--gold-500);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--fs-sm, .875rem);
  font-weight: 500;
  cursor: pointer;
}
.hub-coupon__copy svg { width: 16px; height: 16px; }
.hub-coupon__copy:hover { filter: brightness(1.06); }
.hub-coupon__copy:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.hub-coupon__copy.is-done { background: #7fd3a6; }
/* На телефоні кнопка — лише іконка, щоб довгий код (16 знаків)
   лишався в один рядок. */
@media (max-width: 480px) {
  .hub-coupon__copy span { display: none; }
  .hub-coupon__copy { padding: 0 14px; }
  .hub-coupon__copy svg { width: 20px; height: 20px; }
  .hub-coupon__code { font-size: .95rem; letter-spacing: .04em; }
}

.hub-joined { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hub-fine { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--ink-400); line-height: 1.5; }
.hub-empty { margin-block-start: 10px; }

/* ── Меню налаштувань ─────────────────────────────────────────── */
/* Кнопка внизу того самого списку, що й вкладки, тому виглядає як
   вкладка — border-block-start відділяє її від розділів кабінету,
   бо це не ще один розділ, а вихід у попап. */
.kb-menu {
  position: relative;
  margin-block-start: 10px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--ink-600);
}
.kb-menu__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: 0;
  border-inline-start: 3px solid transparent;
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--ink-400);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: start;
  cursor: pointer;
}
.kb-menu__btn:hover { background: var(--ink-700); color: var(--paper); }
.kb-menu__btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.kb-menu__ico { width: 21px; height: 21px; flex: none; }
/* Панель — рівно 216px: попап на всю ширину батька, а не фіксовані
   220px, бо ті на 4px ширші за саму панель і обрізались би нею
   (overflow:hidden на .kb-tabs тримає заокруглені кути).

   Відкривається ВНИЗ від кнопки — останнього пункту списку. Раніше
   вниз обрізало б overflow:hidden на .kb-tabs (висота дорівнювала
   висоті самого списку); тепер .kb-tabs має свій min-block-size саме
   під цей попап, тож обрізати нема чому. */
.kb-menu__list {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 6px);
  background: var(--ink-700);
  border: 1px solid var(--ink-500);
  border-radius: 10px;
  padding: 6px;
  z-index: 40;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.kb-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  inline-size: 100%;
  text-align: start;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 10px 12px;
  color: var(--paper);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.kb-menu__item:hover { background: var(--ink-600); }
.kb-menu__item[hidden] { display: none; }
/* Іконки пунктів меню «Налаштування» (власник 03.10.2026) — той самий
   лінійний значок 24×24, що в боковому меню. */
.kb-menu__ico { flex: none; inline-size: 18px; block-size: 18px; color: var(--ink-400); }
.kb-menu__item:hover .kb-menu__ico { color: var(--paper); }
.kb-menu__item:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.kb-menu__item--out { color: var(--ink-400); border-block-start: 1px solid var(--ink-600);
  margin-block-start: 6px; padding-block-start: 12px; border-radius: 0 0 7px 7px; }

/* На вузькому екрані 4 плитки в стовпчик по 2 — вже не «на перший
   погляд», а прокрутка вниз. Один рядок з горизонтальним скролом
   рахує зручніше, ніж зменшення тексту до нечитабельного. */
@media (max-width: 560px) {
  .kpi-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .kpi-row::-webkit-scrollbar { display: none; }
  .kpi-tile { flex: 0 0 128px; min-width: 128px; }

  /* «Найближчі зустрічі» на головній — той самий рядок-скрол:
     на телефоні картка на всю ширину означала б гортати вниз
     повз новини й пропозиції, щоб побачити другу подію. */
  .hub-sec--events .hub-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .hub-sec--events .hub-grid::-webkit-scrollbar { display: none; }
  /* Ширше за 260px — у картці тепер «квиток» із корінцем 74px (нижче),
     і назві треба місце; сусідня картка все одно визирає з краю. */
  .hub-sec--events .hub-grid > * { flex: 0 0 min(300px, 86%); }

  /* «Пропозиції партнерів» на головній — той самий рядок-скрол. */
  .hub-sec--offers .hub-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .hub-sec--offers .hub-grid::-webkit-scrollbar { display: none; }
  .hub-sec--offers .hub-grid > * { flex: 0 0 260px; }

  /* Картка події у вкладці «Події» (не на головній — там уже рядок-
     скрол вище): дата поруч із назвою в одному рядку замість над нею
     на всю ширину; опис — один рядок з «…» замість чотирьох; час/
     локація і кнопка запису — один рядок унизу замість трьох
     окремих. grid-column:1/-1 на card__text/card__meta-row працює
     незалежно від того, чи є card__meta (не завжди є). */
  .card--event {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    row-gap: 8px;
    align-items: start;
  }
  .card--event > .card__date { grid-column: 1; grid-row: 1; }
  .card--event .card__meta,
  .card--event .card__title { grid-column: 2; }
  .card--event .card__text,
  .card--event .card__meta-row { grid-column: 1 / -1; }

  .card--event .card__text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card--event .card__meta-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
  }
  .card--event .event-facts {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .card--event .event-facts svg { width: 15px; height: 15px; }
  /* Розділова риска між «коли» і «де» замість другого рядка. На
     вужчих телефонах («Rebel Oslo» довше за назву й ще не влазить
     поруч) обидва пункти й так лишаються поруч, лише переносяться —
     компактніше за три окремі рядки, що були раніше. */
  .card--event .event-facts li:not(:first-child) {
    padding-inline-start: 8px;
    border-inline-start: 1px solid var(--ink-600);
  }
  .card--event .card__foot {
    margin-block-start: 0;
    padding-block-start: 0;
  }

  /* «Квиток» — вкладка «Події» на телефоні (власник 04.10.2026;
     спершу варіант B, потім компактний A — того ж розміру, що
     «погашений квиток» в архіві). Корінець — як в архіві, але золотий:
     число, місяць, день тижня й штамп «за N дн.». Праворуч назва, час
     і місце одним рядком, «1 записався» й кнопка в одному рядку. Опис,
     «Запросити друга» й список «хто йде» — у вікні по кліку. Той самий
     квиток — у «Найближчих зустрічах» на головній (власник 04.10.2026).
     На комп'ютері — як було. */
  :is(#kb-list-events, .hub-sec--events) .card--event {
    grid-template-columns: 74px minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
    padding: 0;
    align-items: stretch;
  }
  :is(#kb-list-events, .hub-sec--events) .card--event > .card__date {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 16px 0;
    border-inline-end: 1.5px dashed var(--ink-500);
  }
  :is(#kb-list-events, .hub-sec--events) .card--event .card__date-day { font-size: 2rem; }
  :is(#kb-list-events, .hub-sec--events) .card--event .card__date-month { font-size: 10px; letter-spacing: .12em; }
  :is(#kb-list-events, .hub-sec--events) .card--event .card__date-wd {
    display: block;
    margin-block-start: 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-400);
  }
  :is(#kb-list-events, .hub-sec--events) .card--event .card__date-stamp {
    display: block;
    margin-block-start: 8px;
    padding: 2px 6px;
    border: 1px solid var(--gold-500);
    border-radius: 4px;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gold-500);
    transform: rotate(-8deg);
  }
  /* Вирізи на лінії відриву — кола кольору тла навколо картки. */
  :is(#kb-list-events, .hub-sec--events) .card--event > .card__date::before,
  :is(#kb-list-events, .hub-sec--events) .card--event > .card__date::after {
    content: '';
    position: absolute;
    inset-inline-end: -9px;
    inline-size: 17px;
    block-size: 17px;
    border-radius: 50%;
    background: var(--ink-800);
  }
  /* На головній картки лежать на темнішому тлі сторінки (ink-900). */
  #kb-home .hub-sec--events .card--event > .card__date::before,
  #kb-home .hub-sec--events .card--event > .card__date::after { background: var(--ink-900); }
  :is(#kb-list-events, .hub-sec--events) .card--event > .card__date::before { top: -10px; }
  :is(#kb-list-events, .hub-sec--events) .card--event > .card__date::after { bottom: -10px; }

  :is(#kb-list-events, .hub-sec--events) .card--event > .card__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 16px 14px 16px 16px;
  }
  :is(#kb-list-events, .hub-sec--events) .card--event .card__text { display: none; }
  :is(#kb-list-events, .hub-sec--events) .card--event .card__title { margin: 0; font-size: 1rem; line-height: 1.3; }
  /* space-between: влізли в рядок — текст ліворуч, кнопка праворуч;
     не влізли (на 375px «4 записались» + «Записатися» — ні) — кнопка
     наступним рядком, ліворуч під текстом. */
  :is(#kb-list-events, .hub-sec--events) .card--event .card__meta-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    width: 100%;
  }
  /* Час і місце — одним рядком через крапку, іконка лише в часу.
     Пункти — рядковими (inline), а не флекс-плитками: довге місце
     переноситься словами, і «·» не опиняється на початку рядка. */
  :is(#kb-list-events, .hub-sec--events) .card--event .event-facts {
    display: block;
    flex: 1 1 100%;
    font-size: var(--fs-xs);
    line-height: 1.5;
  }
  :is(#kb-list-events, .hub-sec--events) .card--event .event-facts li { display: inline; }
  :is(#kb-list-events, .hub-sec--events) .card--event .event-facts li:first-child svg {
    display: inline-block;
    vertical-align: -3px;
    margin-inline-end: 6px;
  }
  /* margin — від базового li + li (0.5em) у base.css. */
  :is(#kb-list-events, .hub-sec--events) .card--event .event-facts li:not(:first-child) {
    margin: 0;
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  :is(#kb-list-events, .hub-sec--events) .card--event .event-facts li:not(:first-child) svg { display: none; }
  :is(#kb-list-events, .hub-sec--events) .card--event .event-facts li:not(:first-child)::before {
    content: '·';
    margin-inline: 6px;
    color: var(--ink-400);
  }
  /* «хто йде» — коротко, без облич і без повторної «за N дн.»;
     рядок, у якому лишилась лише вона, ховаємо цілком. */
  :is(#kb-list-events, .hub-sec--events) .card--event .ev-going {
    flex: 0 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
  }
  :is(#kb-list-events, .hub-sec--events) .card--event .ev-going__faces,
  :is(#kb-list-events, .hub-sec--events) .card--event .ev-going__text,
  :is(#kb-list-events, .hub-sec--events) .card--event .ev-going > .hub-tag { display: none; }
  :is(#kb-list-events, .hub-sec--events) .card--event .ev-going__short {
    display: block;
    margin: 0;
    white-space: nowrap;
    font-size: var(--fs-xs);
    color: var(--ink-400);
  }
  :is(#kb-list-events, .hub-sec--events) .card--event .ev-going__all { font-size: var(--fs-xs); }
  :is(#kb-list-events, .hub-sec--events) .card--event .ev-going:not(:has(.ev-going__text)) { display: none; }
  :is(#kb-list-events, .hub-sec--events) .card--event .card__foot {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-block-start: 0;
  }
  :is(#kb-list-events, .hub-sec--events) .card--event .card__foot .btn { width: auto; padding-inline: 16px; }
  /* «Запросити друга» з квитка прибрано (власник 04.10.2026) — вона
     лишається у вікні події по кліку на картку. */
  :is(#kb-list-events, .hub-sec--events) .card--event .kb-invite-link { display: none; }
}

/* ── Перепустка: двостороння картка ──────────────────────────────
   perspective на батьку, обидві грані absolute + backface-visibility
   — стандартний CSS-flip. Висота фіксована (--pc-h): грані absolute
   не тягнуть висоту батька самі, а обидві мусять бути однакового
   розміру. */
.kb-passcard {
  --pc-h: 260px;
  position: relative;
  inline-size: 100%;
  max-inline-size: 480px;
  block-size: var(--pc-h);
  margin-block: 18px;
  cursor: pointer;
  perspective: 1400px;
}
.kb-passcard:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; border-radius: 14px; }
.kb-passcard__inner {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.kb-passcard.is-flipped .kb-passcard__inner { transform: rotateY(180deg); }
.kb-passcard__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Safari не ховає зворот грані, коли в ній є діти з власним шаром
   (position + z-index над вантами, анімовані ванти) — на звороті з QR
   просвічували дзеркальні написи лицевого боку. Перша спроба
   (02.10.2026) ховала грань через visibility із затримкою — на
   телефоні власника 03.10.2026 написи однаково просвічували. Тепер
   невидиму грань прибирає скрипт (kabinet-hub.js → passCard, клас
   is-off) рівно посередині повороту, коли картка стоїть ребром:
   display:none не намалюється ні в якому рушії. */
.kb-passcard__face.is-off { display: none; }
/* Повернення з display:none перезапустило б промальовування вант —
   після першого перевороту вони просто намальовані. */
.kb-passcard.is-drawn .kb-cable, .kb-passcard.is-drawn .kb-cable-dot { animation: none; }

/* лицьовий бік. Світліше за фон сторінки (--ink-900) і плитки над нею
   (--ink-800) — інакше картка зверху непомітно зливається з тлом.
   Три яруси: знак і номер, імʼя з рівнем, тихий рядок унизу. Одна
   золота лінія по нижньому краю — єдиний акцент. */
.kb-passcard__face--front {
  background: linear-gradient(150deg, var(--ink-700), var(--ink-600));
  color: var(--paper);
  padding: 22px 24px 20px;
  justify-content: space-between;
  box-shadow: inset 0 -3px 0 var(--gold-500);
}
/* Ванти під текстом: лежать першими в грані й нижче за решту дітей. */
.kb-passcard__face--front > * { position: relative; z-index: 1; }
.kb-passcard__face--front > .kb-passcard__cables {
  position: absolute; z-index: 0;
  inset: 0;
  inline-size: 100%; block-size: 100%;
  pointer-events: none;
}
.kb-cable {
  stroke: var(--paper);
  stroke-width: .8;
  stroke-opacity: .13;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.kb-cable--pylon { stroke-width: 2.2; stroke-opacity: .2; }
.kb-cable--gold { stroke: var(--gold-500); stroke-opacity: .75; stroke-width: 1; }
.kb-cable-dot { fill: var(--gold-500); }
/* Промальовування — раз, при появі картки. Хто вимкнув рух, бачить
   одразу готовий малюнок. */
@media (prefers-reduced-motion: no-preference) {
  .kb-cable { animation: kb-cable-draw 1.1s cubic-bezier(.4, .1, .2, 1) both; animation-delay: calc(var(--i) * 70ms); }
  .kb-cable--gold { animation-duration: 1.6s; }
  .kb-cable-dot { animation: kb-cable-dot .5s ease-out 1.3s both; }
}
@keyframes kb-cable-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kb-cable-dot { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
.kb-cable-dot { transform-box: fill-box; transform-origin: center; }

.kb-passcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kb-passcard__mark { block-size: 30px; inline-size: auto; display: block; }
.kb-passcard__no {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.kb-passcard__id { min-inline-size: 0; }
.kb-passcard__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 5.4vw, 28px);
  font-weight: 500;
  line-height: 1.12;
  color: var(--paper);
  overflow-wrap: anywhere;
}
.kb-passcard__tier {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.kb-passcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-400);
}
.kb-passcard__note { min-inline-size: 0; }
.kb-passcard__hint { flex: none; letter-spacing: 0.06em; opacity: .8; }
/* зворотний бік — та сама причина світлого тла, що й раніше: сканери
   читають темне на світлому. */
.kb-passcard__face--back {
  background: var(--paper);
  color: var(--ink-900);
  transform: rotateY(180deg);
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
}
.kb-passcard__qr { inline-size: 140px; }
.kb-passcard__qr svg { display: block; inline-size: 100%; height: auto; }
.kb-passcard__backlabel { margin: 0; font-size: 14px; font-weight: 500; }
.kb-passcard__backmeta { margin: 0; font-size: 11px; color: #4a5a68; letter-spacing: 0.02em; }

@media (max-width: 420px) {
  .kb-passcard { --pc-h: 224px; }
}

/* ── Перепустка на головній ── */
.hub-status {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  margin-block-end: 28px;
}
.hub-status__pass {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* ── Коротке повідомлення ─────────────────────────────────────── */
.kb-toast {
  position: fixed;
  inset-block-end: 22px;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: fit-content;
  max-inline-size: min(92vw, 460px);
  background: var(--ink-600);
  border: 1px solid var(--ink-500);
  color: var(--paper);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: var(--fs-sm);
  z-index: 60;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.kb-toast.is-on { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .kb-toast { transition: none; }
}

/* ─── Заявка на Executive Circle і Corporate ───────────────────
   Живе в тій самій модалці, що й решта кабінету (.library-modal).
   Її тіло вирівняне по лівому краю через align-items:flex-start,
   тож формі треба явна ширина — інакше поля стискаються до
   ширини свого тексту. */
.kb-apply{width:100%}
.kb-apply__legend{margin:0 0 10px;font-size:var(--fs-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-400)}
.kb-apply__cats{display:grid;gap:8px;margin-bottom:18px}

/* Критерій — це вибір із чотирьох, тому радіо, а не кнопки.
   Підказка під назвою дослівно з BRIEF.md §3: людина має бачити,
   під що підписується, ДО того як писати відповідь. */
.kb-apply__cat{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:11px 13px;border:1px solid var(--ink-600);border-radius:12px;
  background:var(--ink-700);cursor:pointer}
.kb-apply__cat:hover{border-color:var(--ink-500)}
.kb-apply__cat:has(input:checked){border-color:var(--gold-500);background:var(--ink-600)}
.kb-apply__cat:has(input:focus-visible){outline:2px solid var(--gold-500);outline-offset:2px}
.kb-apply__cat input{width:auto;margin-top:3px}
.kb-apply__cat b{display:block;font-weight:600;font-size:var(--fs-sm)}
.kb-apply__cat .kb-fine{display:block;margin-top:2px}

.kb-apply__fields{display:block}
.kb-apply .kb-f:last-of-type{margin-bottom:4px}

/* Зірочка обовʼязкового поля. Для скрінрідера працює required на
   самому полі, тож вона суто візуальна. */
.kb-req{color:var(--gold-500)}

/* Перепустка неоплаченого членства. Не ховаємо — на вході рішення
   ухвалює людина, і api/pass.js показує їй справжній стан. Але
   картка не має ВИГЛЯДАТИ чинною: золота смуга внизу тут читається
   як «усе гаразд, проходьте». */
.kb-passcard.is-pending .kb-passcard__face--front{box-shadow:inset 0 -3px 0 var(--ink-500)}

/* ─── «Запроси друга» (kabinet-hub.js) ─────────────────────────
   Другорядна дія на картці події: текст, а не друга жовта кнопка —
   головне на картці лишається «Записатися». */
.kb-invite-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  inline-size:100%;margin-block-start:8px;padding:6px 4px;background:none;border:0;
  white-space:nowrap;
  font:inherit;font-size:var(--fs-xs);color:var(--gold-500);cursor:pointer;
  border-radius:8px}
.kb-invite-link svg{width:15px;height:15px;flex:none}
.kb-invite-link:hover{color:var(--gold-400);text-decoration:underline;text-underline-offset:3px}
.kb-invite-link:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
/* У модалці події — поруч із кнопкою, а не на всю ширину. */
.hub-card__acts .kb-invite-link{inline-size:auto;margin:0}

/* Вікно «поділитися». Тіло .library-modal вирівняне по лівому краю,
   тож обгортці треба явна ширина — інакше поле з посиланням
   стискається до ширини тексту (та сама причина, що в .kb-apply). */
.kb-invite{inline-size:100%;display:flex;flex-direction:column;gap:10px;padding-inline-end:28px}
.kb-invite .hub-card__title{font-size:1.35rem;line-height:1.28}
.kb-invite__field{margin-block-start:4px}
.kb-invite__label{display:block;font-size:var(--fs-xs);color:var(--ink-400);margin-bottom:5px}
.kb-invite__field input{inline-size:100%;background:var(--ink-700);color:var(--paper);
  border:1px solid var(--ink-600);border-radius:10px;padding:11px 12px;font:inherit;
  font-size:var(--fs-sm);text-overflow:ellipsis}
.kb-invite__field input:focus{outline:none;border-color:var(--gold-500)}
/* Сітка 2×2: «Поділитися/Скопіювати» зверху, месенджери під ними.
   Без «Поділитися» (десктопний Firefox) кнопок три — тоді перша на
   всю ширину. */
.kb-invite__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kb-invite__acts .btn{inline-size:100%;padding-inline:10px}
.kb-invite__acts .btn:first-child:nth-last-child(odd){grid-column:1 / -1}
.kb-invite__note{margin:0;font-size:var(--fs-sm);color:var(--paper)}
@media(max-width:480px){
  .kb-invite{padding-inline-end:0}
  .kb-invite .hub-card__title{padding-inline-end:34px}
}

/* Блок на головній. Навмисно маленький: перший екран — про те, що
   клуб дає, а не про лічильники. */
.kb-invite-card{display:grid;gap:18px;background:var(--ink-800);
  border:1px solid var(--ink-600);border-radius:14px;padding:20px 22px}
/* Корінець і речення — лише в «квитку-запрошенні» на телефоні (нижче);
   обгортка правої частини поза ним «прозора». */
.kb-invite-card__stub,.kb-invite-card__lead{display:none}
.kb-invite-card__main{display:contents}
.kb-invite-card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.kb-invite-card__title{margin:0;font-size:var(--fs-h4);font-weight:300}
/* Три кроки (варіант 2, 03.10.2026): кружечки з номерами на золотій
   лінії, що згасає до синього — шлях від «поділитись» до «+1 місяць». */
.kb-invite-steps{position:relative;margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kb-invite-steps::before{content:"";position:absolute;inset-inline:14px;top:13px;height:1px;
  background:linear-gradient(90deg,var(--gold-500),var(--ink-500))}
.kb-invite-steps__step{position:relative;margin:0;display:grid;gap:10px;align-content:start}
.kb-invite-steps__dot{display:grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;
  font-size:var(--fs-xs);font-weight:500;background:var(--ink-800);border:1px solid var(--ink-500);color:var(--ink-400)}
.kb-invite-steps__step:first-child .kb-invite-steps__dot{background:var(--gold-500);border-color:var(--gold-500);color:var(--ink-900)}
.kb-invite-steps__step:nth-child(2) .kb-invite-steps__dot{border-color:var(--gold-500);color:var(--gold-500)}
.kb-invite-steps__text{margin:0;font-size:var(--fs-sm);line-height:1.45;color:var(--paper)}
.kb-invite-steps__gold{color:var(--gold-500)}
@media (max-width:520px){
  .kb-invite-steps{grid-template-columns:1fr;gap:12px}
  .kb-invite-steps::before{inset-inline:auto;inset-inline-start:13px;top:14px;bottom:14px;width:1px;height:auto;
    background:linear-gradient(180deg,var(--gold-500),var(--ink-500))}
  .kb-invite-steps__step{grid-template-columns:28px 1fr;align-items:center;gap:12px}
}
.kb-invite-card__more{flex:1 1 100%}
.kb-invite-card__more>summary,.kb-invite__terms>summary{display:inline-block;cursor:pointer;
  list-style:none;font-size:var(--fs-sm);color:var(--gold-500)}
.kb-invite-card__more>summary::-webkit-details-marker,
.kb-invite__terms>summary::-webkit-details-marker{display:none}
.kb-invite-card__more>summary::after,.kb-invite__terms>summary::after{content:" +"}
.kb-invite-card__more[open]>summary::after,.kb-invite__terms[open]>summary::after{content:" −"}
.kb-invite-card__more>summary:focus-visible,
.kb-invite__terms>summary:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:4px}
.kb-invite-card__stats{margin:10px 0 0;font-size:var(--fs-sm);color:var(--paper)}
.kb-invite__terms{font-size:var(--fs-xs);color:var(--ink-400);line-height:1.5}
.kb-invite__terms>summary{font-size:var(--fs-xs)}
.kb-invite__rules{margin:8px 0 6px;padding-inline-start:18px}
.kb-invite__rules li{margin-bottom:4px}
.kb-invite__terms p{margin:0}
.kb-invite__terms a{color:var(--gold-500)}
.kb-invite__scratch{position:absolute;inset-inline-start:-9999px;opacity:0}
.kb-invite-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.kb-invite-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;
  padding:8px 0;border-top:1px solid var(--ink-600);font-size:var(--fs-sm)}
.kb-invite-list li:first-child{border-top:0}
.kb-invite-list__name{font-weight:600}
.kb-invite-list__event{grid-column:1;color:var(--ink-400);font-size:var(--fs-xs)}
.kb-invite-list__status{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:end;
  color:var(--ink-400);font-size:var(--fs-xs);max-inline-size:30ch}
.kb-invite-list__status.is-good{color:#3DBE7B}
@media(max-width:560px){
  /* Іконка тут забирала б колонку в і так вузького тексту. */
  .kb-invite-card__icon{display:none}
  .kb-invite-card .btn{inline-size:100%}
  .card--event .kb-invite-link svg{display:none}
  .card--event .kb-invite-link{white-space:nowrap;margin-block-start:4px}
  .kb-invite-list li{grid-template-columns:minmax(0,1fr)}
  .kb-invite-list__status{grid-column:1;grid-row:auto;text-align:start;max-inline-size:none}
}

/* «Квиток-запрошення» на телефоні (варіант A, власник 04.10.2026,
   kabinet-hub.js → inviteBlock): та сама мова, що квитки подій і
   архіву — корінець «+1 місяць вам» за лінією відриву, праворуч назва,
   одне речення замість трьох кроків і кнопка. Окремим блоком ПІСЛЯ
   медіа вище: там .kb-invite-card .btn на всю ширину. */
@media(max-width:560px){
  .kb-invite-card{grid-template-columns:78px minmax(0,1fr);gap:0;padding:0;border-radius:18px}
  .kb-invite-card__stub{grid-column:1;grid-row:1;position:relative;margin:0;padding:18px 0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border-inline-end:1.5px dashed var(--ink-500)}
  .kb-invite-card__stub-num{font-family:var(--font-display);font-size:2rem;font-weight:200;line-height:1;color:var(--gold-500)}
  .kb-invite-card__stub-unit{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-500)}
  .kb-invite-card__stub-who{margin-block-start:2px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}
  /* Вирізи — кольору тла головної (ink-900). */
  .kb-invite-card__stub::before,.kb-invite-card__stub::after{content:'';position:absolute;inset-inline-end:-9px;
    inline-size:17px;block-size:17px;border-radius:50%;background:var(--ink-900)}
  .kb-invite-card__stub::before{top:-10px}
  .kb-invite-card__stub::after{bottom:-10px}
  .kb-invite-card__main{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;
    align-items:flex-start;gap:8px;padding:16px 14px 16px 16px}
  .kb-invite-card__head{display:contents}
  .kb-invite-card__title{order:1;font-size:1.0625rem;font-weight:400}
  .kb-invite-card__lead{order:2;display:block;margin:0;font-size:var(--fs-xs);line-height:1.5;color:#C4D1DB}
  .kb-invite-card__head .btn{order:3;inline-size:auto;margin-block-start:4px;padding-inline:18px}
  .kb-invite-card .kb-invite-steps{display:none}
  .kb-invite-card__more{order:4;flex:none;width:100%}
}

/* Пропозиція після запису на подію. Там само, де toast, і так само
   зникає сама — але з кнопкою, тож кліки їй потрібні. */
.kb-nudge{position:fixed;inset-block-end:22px;inset-inline:0;margin-inline:auto;
  inline-size:fit-content;max-inline-size:min(calc(100vw - 32px),520px);z-index:90;
  display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;
  background:var(--ink-600);border:1px solid var(--ink-500);border-radius:12px;
  color:var(--paper);box-shadow:0 10px 30px rgba(5,15,24,.45);
  opacity:0;transform:translateY(10px);pointer-events:none;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.kb-nudge.is-on{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;
  transition:opacity .18s ease,transform .18s ease}
.kb-nudge__text{font-size:var(--fs-sm);line-height:1.45;min-inline-size:0}
.kb-nudge .btn{flex:none}
.kb-nudge__close{flex:none;display:flex;align-items:center;justify-content:center;
  inline-size:30px;block-size:30px;border-radius:50%;background:transparent;
  border:1px solid var(--ink-500);color:var(--ink-400);cursor:pointer}
.kb-nudge__close svg{width:14px;height:14px}
.kb-nudge__close:hover{color:var(--paper);border-color:var(--gold-500)}
/* У модалці події — звичайний рядок під кнопкою. */
.kb-nudge--inline{position:static;inline-size:100%;max-inline-size:none;margin:4px 0 0;
  opacity:1;transform:none;pointer-events:auto;visibility:visible;box-shadow:none;
  background:var(--ink-700);border-color:var(--ink-600);justify-content:space-between;flex-wrap:wrap}
@media(max-width:780px){
  /* Над нижньою панеллю, а не під нею. */
  .kb-nudge:not(.kb-nudge--inline),.kb-toast{inset-block-end:calc(84px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.kb-nudge{transition:none}}

/* Заголовок модалки не мусить заходити під хрестик закриття. */
.library-modal__body > .hub-card__title:first-child{padding-inline-end:36px}

/* ═══ Розділ «Членство й оплати» (kabinet-membership.js) ═══════════
   Рішення власника 30.09.2026 (BRIEF §10.8): спокійна, «білінгова»
   сторінка — одна колонка до 1040px, кожна картка з одним заголовком
   і щонайбільше однією золотою кнопкою. Відступи кратні 8px. Числа
   про гроші — табличні цифри, щоб суми в стовпчик не «гуляли».
   Ширина обмежена свідомо: на 1440px рядок у всю ширину читається як
   таблиця Excel, а не як договір. */
.kb-ms{display:grid;gap:16px;max-width:1040px}
.kb-ms .kb-card{margin:0}
.kb-ms-loading{margin:0;padding:24px 0}
.kb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.kb-ms-card{container-type:inline-size;padding:24px}
.kb-ms-card__head{margin:0 0 16px}
.kb-ms-card__title{margin:0;font-family:var(--font-display);font-weight:500;
  font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
.kb-ms-eyebrow{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-400)}
.kb-ms-sub{margin:-8px 0 16px;color:var(--ink-400);font-size:var(--fs-sm);line-height:1.55;max-width:62ch}
.kb-ms-label{display:block;margin:0 0 6px;font-size:var(--fs-xs);font-weight:500;color:var(--ink-400)}
.kb-ms-fine{margin:12px 0 0;max-width:62ch}
.kb-ms-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.kb-ms-actions .btn{margin:0}
.kb-ms-nudge{margin:12px 0 0;font-size:var(--fs-sm);color:var(--gold-500)}

/* Текстова кнопка-посилання: «Скасувати зміну», «Квитанція»,
   «Показати всі». 44px по висоті — ціль для пальця, хоч і без рамки. */
.kb-ms-link{appearance:none;background:none;border:0;padding:0 2px;min-height:44px;
  display:inline-flex;align-items:center;
  font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--gold-500);cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(242,194,0,.35);text-underline-offset:4px}
.kb-ms-link:hover{color:var(--gold-400);text-decoration-color:currentColor}
.kb-ms-link:disabled{opacity:.5;cursor:default}
.kb-ms .btn:focus-visible,.kb-ms-link:focus-visible,.kb-ms summary:focus-visible,
.kb-ms select:focus-visible,.kb-ms input:focus-visible,.kb-ms textarea:focus-visible,
.library-modal .kb-ms-actions .btn:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
.kb-ms .btn--sm,.library-modal .kb-ms-actions .btn--sm{min-height:44px}

/* Бейдж і чіп — одна форма, різні кольори. */
.kb-ms-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
  font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.kb-ms-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.kb-ms-badge.is-ok{background:rgba(61,190,123,.14);color:#3DBE7B}
.kb-ms-badge.is-warn{background:rgba(242,194,0,.14);color:var(--gold-500)}
.kb-ms-badge.is-bad{background:rgba(226,104,94,.14);color:#E2685E}
.kb-ms-badge.is-pause{background:rgba(157,190,214,.14);color:#9DBED6}
.kb-ms-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:500;white-space:nowrap;background:var(--ink-700);
  border:1px solid var(--ink-600);color:var(--paper)}
.kb-ms-chip.is-good{color:#3DBE7B;border-color:rgba(61,190,123,.35);background:rgba(61,190,123,.08)}
.kb-ms-chip.is-muted{color:var(--ink-400)}

/* Факти «ключ — значення». Колонки з тонкими розділювачами, як
   у рахунку, а не плитки: плитки роблять кожну дату окремою подією. */
.kb-ms-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:0;margin:0;border-top:1px solid var(--ink-600)}
.kb-ms-fact{padding:14px 16px 2px 0}
.kb-ms-fact+.kb-ms-fact{padding-inline-start:16px;border-inline-start:1px solid var(--ink-600)}
.kb-ms-facts dt{font-size:var(--fs-xs);color:var(--ink-400);margin:0 0 4px}
.kb-ms-facts dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.kb-ms-fact__note{display:block;margin-top:2px;font-weight:400;font-size:var(--fs-xs);color:var(--ink-400)}
.kb-ms-fact__note.is-warn{color:var(--gold-500)}

/* ─── 1. Стан ─── */
.kb-ms-status{position:relative;overflow:hidden;padding:24px;
  background:linear-gradient(160deg,var(--ink-700),var(--ink-800) 70%)}
.kb-ms-status>*{position:relative;z-index:1}
/* Варіант 4.1 (03.10.2026): кільце днів ліворуч, праворуч назва з
   бейджем і факти плашками; дії — під тонкою лінією. */
.kb-ms-status__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.kb-ms-status__head:not(:has(.kb-ms-ring)){grid-template-columns:minmax(0,1fr)}
.kb-ms-status__main{display:grid;gap:12px;min-inline-size:0}
.kb-ms-status__top{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.kb-ms-status__tier{margin:0;font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.02em}
.kb-ms-ring{--ring:var(--gold-500);flex:none;display:grid;place-items:center;inline-size:104px;block-size:104px;
  border-radius:50%;background:conic-gradient(var(--ring) 0 var(--passed,0%),var(--ink-600) var(--passed,0%) 100%)}
.kb-ms-ring.is-bad{--ring:#E2685E}
.kb-ms-ring.is-pause{--ring:#9DBED6}
.kb-ms-ring__in{display:grid;place-items:center;align-content:center;inline-size:88px;block-size:88px;
  border-radius:50%;background:var(--ink-800);text-align:center}
.kb-ms-ring__num{font-family:var(--font-display);font-size:1.75rem;font-weight:200;line-height:1;color:var(--ring)}
.kb-ms-ring__lab{margin-top:2px;font-size:var(--fs-xs);color:var(--ink-400)}
/* Факти в картці стану — плашками, а не колонками з розділювачами. */
.kb-ms-status .kb-ms-status__main .kb-ms-facts{display:flex;flex-wrap:wrap;gap:8px;border-top:0}
.kb-ms-status .kb-ms-status__main .kb-ms-fact{padding:7px 12px;border:1px solid var(--ink-600);
  border-radius:10px;background:var(--ink-700)}
.kb-ms-status .kb-ms-status__main .kb-ms-fact+.kb-ms-fact{padding-inline-start:12px;border-inline-start:1px solid var(--ink-600)}
.kb-ms-status .kb-ms-status__main .kb-ms-facts dt{font-size:.6875rem;margin:0 0 2px}
.kb-ms-status .kb-ms-status__main .kb-ms-facts dd{font-size:var(--fs-sm)}
.kb-ms-status__do{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-block-start:18px;
  padding-block-start:16px;border-block-start:1px solid var(--ink-600)}
.kb-ms-status__do .kb-ms-actions,.kb-ms-status__do .kb-fine{margin:0}
/* Executive — картка в стилі картки стану (варіант 3, kabinet-membership.js
   → upgradeCard): корона, назва з бейджем, кнопка праворуч
   в тому ж рядку, золота риска знизу. */
.kb-ms-exec{position:relative;overflow:hidden;padding:24px;border-color:var(--ink-600);
  background:linear-gradient(160deg,var(--ink-700),var(--ink-800) 70%)}
.kb-ms-exec .kb-ms-status__line{background:var(--gold-500)}
.kb-ms-exec__head{display:flex;align-items:center;gap:16px 18px;flex-wrap:wrap}
.kb-ms-exec__go{flex:none;margin-inline-start:auto;gap:8px}
.kb-ms-exec__go svg{inline-size:16px;block-size:16px}
.kb-ms-exec__mark{flex:none;display:grid;place-items:center;inline-size:64px;block-size:64px;border-radius:50%;
  border:1px solid var(--ink-500);color:var(--gold-500)}
.kb-ms-exec__mark svg{inline-size:26px;block-size:26px}
.kb-ms-exec__main{flex:1 1 220px;display:grid;gap:4px;min-inline-size:0}
.kb-ms-exec__title{margin:0;font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.15;letter-spacing:-.02em}
.kb-ms-exec__sub{margin:0;font-size:var(--fs-sm);color:var(--ink-400)}
@media (max-width:520px){
  .kb-ms-status__head{grid-template-columns:minmax(0,1fr)}
  .kb-ms-ring{inline-size:88px;block-size:88px}
  .kb-ms-ring__in{inline-size:74px;block-size:74px}
}
.kb-ms-status__lead{margin:16px 0 0;max-width:62ch;color:var(--ink-400);font-size:var(--fs-sm);line-height:1.6}
/* Колірна риска знизу — тонка (2px): стан уже каже бейдж, риска лише
   підтримує його, а товста смуга перетягувала на себе всю картку. */
.kb-ms-status__line{position:absolute!important;inset-inline:0;bottom:0;block-size:2px;background:#3DBE7B;opacity:.8}
.kb-ms-status--warn .kb-ms-status__line{background:var(--gold-500)}
.kb-ms-status--bad .kb-ms-status__line{background:#E2685E}
.kb-ms-status--pause .kb-ms-status__line{background:#9DBED6}

.kb-ms-sched{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:16px 0 0;
  padding:8px 8px 8px 16px;border-radius:10px;background:rgba(242,194,0,.07);
  border:1px solid rgba(242,194,0,.22)}
.kb-ms-sched__ico{width:18px;height:18px;color:var(--gold-500);flex:none}
.kb-ms-sched__text{margin:0;flex:1 1 220px;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.kb-ms-sched .kb-ms-link{min-height:36px}

/* Розкривачка: «Деталі договору», «Ваші запрошення», «Обрати рівень». */
.kb-ms-details{margin-top:16px}
.kb-ms-details>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  cursor:pointer;list-style:none;font-size:var(--fs-sm);font-weight:500;color:var(--ink-400)}
.kb-ms-details>summary::-webkit-details-marker{display:none}
.kb-ms-details>summary::after{content:'';width:7px;height:7px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);
  transition:transform .15s ease}
.kb-ms-details[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.kb-ms-details>summary:hover{color:var(--paper)}
.kb-ms-details__body{padding-top:8px}
.kb-ms-details__body .kb-ms-facts{border-top:0}
.kb-ms-details__body .kb-fine{margin:12px 0 0}

/* Повідомлення: оформлення у Vipps, заявка, перевірка покупки. */
.kb-ms-notice{padding:16px 24px;border-inline-start:3px solid var(--ink-500)}
.kb-ms-notice.is-warn{border-inline-start-color:var(--gold-500)}
.kb-ms-notice.is-ok{border-inline-start-color:#3DBE7B}
.kb-ms-notice.is-muted{border-inline-start-color:var(--ink-400)}
.kb-ms-notice__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kb-ms-notice__title{margin:0;font-size:var(--fs-body);font-weight:600}
.kb-ms-notice__text{margin:8px 0 0;color:var(--ink-400);font-size:var(--fs-sm);line-height:1.55}
.kb-ms-notice>.kb-ms-notice__text:first-child{margin:0;color:var(--paper)}
.kb-ms-notice .kb-ms-actions{margin-top:12px}

/* Неоплачене: другий спосіб оплати того самого рівня. */
.kb-ms-alt{margin:8px 0 0}
.kb-ms-alt .kb-ms-link{text-align:start;line-height:1.4}
.kb-ms-back{align-self:flex-start;margin-top:4px;min-height:40px;font-size:var(--fs-xs);color:var(--ink-400);
  text-decoration-color:rgba(124,147,164,.4)}
.kb-ms-back:hover{color:var(--paper)}

/* Рівні в сітці (paintOffer). */
.kb-tiers{margin:0}
.kb-tier__price{margin:0;color:var(--ink-400);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.kb-tier__price b{color:var(--paper);font-size:1.125rem;font-weight:600}

/* ─── 2. Наступний рівень ─── */
.kb-ms-up{border-color:rgba(242,194,0,.32);
  background:radial-gradient(120% 140% at 100% 0,rgba(242,194,0,.07),transparent 55%),var(--ink-800)}
.kb-ms-up--soft{border-color:var(--ink-600);background:var(--ink-800)}
.kb-ms-up__grid{display:grid;gap:24px}
@container (min-width:720px){
  .kb-ms-up__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
  .kb-ms-up__locked{padding-inline-start:24px;border-inline-start:1px solid var(--ink-600)}
}
.kb-ms-offer{margin:0 0 16px}
.kb-ms-offer__label{margin:0;font-size:var(--fs-xs);color:var(--ink-400)}
.kb-ms-offer__price{margin:2px 0;color:var(--ink-400);font-variant-numeric:tabular-nums}
.kb-ms-offer__price b{font-family:var(--font-display);font-weight:500;font-size:2rem;
  line-height:1.15;color:var(--paper);letter-spacing:-.01em}
.kb-ms-offer__cmp{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;
  color:var(--ink-400);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.kb-ms-save{color:#3DBE7B;font-weight:600}
.kb-ms-perks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kb-ms-perks li{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm)}
.kb-ms-perks svg{width:18px;height:18px;flex:none;color:var(--gold-500)}
.kb-ms-locked{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kb-ms-lock{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;
  background:var(--ink-700);border:1px solid var(--ink-600)}
.kb-ms-lock__media{position:relative;flex:none;width:64px;height:48px;border-radius:8px;
  overflow:hidden;background:var(--ink-600);display:flex;align-items:center;justify-content:center}
.kb-ms-lock__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.55)}
.kb-ms-lock__ico{position:relative;width:18px;height:18px;color:var(--gold-500)}
.kb-ms-lock__text{display:grid;gap:1px;min-width:0}
.kb-ms-lock__kind{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)}
.kb-ms-lock__title{font-size:var(--fs-sm);font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-ms-lock__benefit{font-size:var(--fs-xs);color:var(--gold-500)}

/* ─── 3. «Запроси друга» ─── */
.kb-ms-ref__grid{display:grid;gap:24px;grid-template-areas:"info" "share" "friends"}
.kb-ms-ref__info{grid-area:info}
.kb-ms-share{grid-area:share}
.kb-ms-ref__friends{grid-area:friends}
@container (min-width:720px){
  .kb-ms-ref__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    grid-template-rows:auto 1fr;grid-template-areas:"info share" "friends share";align-items:start}
  .kb-ms-share{padding-inline-start:24px;border-inline-start:1px solid var(--ink-600);align-self:stretch}
}
.kb-ms-gets{margin:0 0 24px;display:grid;gap:12px}
.kb-ms-gets>div{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline}
.kb-ms-gets dt{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-500)}
.kb-ms-gets dd{margin:0;font-size:var(--fs-sm);line-height:1.5}
.kb-ms-meter__label{margin:0 0 8px;font-size:var(--fs-sm);color:var(--ink-400);font-variant-numeric:tabular-nums}
.kb-ms-meter__label b{color:var(--paper);font-size:1.125rem}
.kb-ms-meter__bar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;max-width:320px}
.kb-ms-meter__bar span{height:8px;border-radius:4px;background:var(--ink-600)}
.kb-ms-meter__bar span.is-on{background:var(--gold-500)}
.kb-ms-meter .kb-fine{margin:8px 0 0}

/* align-content:start — колонка тягнеться на всю висоту заради лінії
   зліва, але рядки всередині мають лишатися своєї висоти: інакше з
   довгим списком запрошень перемикач і кнопки роздувались. */
.kb-ms-share{display:grid;gap:16px;min-width:0;align-content:start}
.kb-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:0;padding:4px;
  border:1px solid var(--ink-600);border-radius:999px;background:var(--ink-900);justify-self:start}
.kb-seg__opt{position:relative;display:block;cursor:pointer}
.kb-seg__opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.kb-seg__opt span{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 20px;
  border-radius:999px;font-size:var(--fs-sm);font-weight:500;color:var(--ink-400);white-space:nowrap;
  transition:background-color .15s ease,color .15s ease}
.kb-seg__opt:hover span{color:var(--paper)}
.kb-seg__opt input:checked+span{background:var(--paper);color:var(--ink-800)}
.kb-seg__opt input:focus-visible+span{outline:2px solid var(--gold-500);outline-offset:2px}
.kb-seg__opt input:disabled+span{opacity:.4;cursor:not-allowed}
.kb-ms-field{margin:0;min-width:0}
.kb-ms-field[hidden]{display:none}
.kb-ms select,.kb-ms .kb-ms-url,.kb-ms-mini input,.library-modal .kb-ms-field textarea{
  width:100%;min-height:44px;padding:10px 14px;border-radius:10px;font:inherit;font-size:var(--fs-sm);
  background:var(--ink-700);color:var(--paper);border:1px solid var(--ink-600)}
.kb-ms select{appearance:none;padding-inline-end:40px;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-400) 50%),linear-gradient(135deg,var(--ink-400) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.kb-ms .kb-ms-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--ink-400)}
.kb-ms select:hover,.kb-ms .kb-ms-url:hover{border-color:var(--ink-500)}
.kb-ms-share__note{margin:-4px 0 0;font-size:var(--fs-sm);color:var(--gold-500);line-height:1.5}
.kb-ms-share__note[hidden]{display:none}
.kb-ms-share__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kb-ms-share__acts .btn{width:100%;padding-inline:12px;margin:0}
.kb-ms-share__acts .btn:last-child{grid-column:1 / -1}
@container (min-width:900px){
  .kb-ms-share__acts{grid-template-columns:auto auto 1fr}
  .kb-ms-share__acts .btn:last-child{grid-column:auto}
}
/* Список запрошених — у лівій колонці, під лічильником. */
.kb-ms-friends__head{margin:0}
.kb-ms-friends__empty{margin:4px 0 0;font-size:var(--fs-sm);color:var(--ink-400)}
.kb-ms-share__main{width:100%;margin:0}
.kb-ms-friends{list-style:none;margin:0;padding:0}
.kb-ms-friends li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;border-top:1px solid var(--ink-700)}
.kb-ms-friends li:first-child{border-top:0}
.kb-ms-friends__who{display:grid;gap:2px;min-width:0}
.kb-ms-friends__name{font-weight:600;font-size:var(--fs-sm)}
.kb-ms-friends__ev{font-size:var(--fs-xs);color:var(--ink-400)}
.kb-ms-ref .kb-ms-fine a{color:var(--gold-500)}

/* ─── Гостьові всередині «Запроси друга» ───
   Один тихий рядок під вибором зустрічі (власник 01.10.2026: окремий
   блок із лічильником, жетонами й легендою казав те саме тричі). */
.kb-ms-pass{margin:0;font-size:var(--fs-sm);color:var(--ink-400);font-variant-numeric:tabular-nums}
.kb-ms-pass[hidden]{display:none}
.kb-ms-pass .kb-ms-link{margin-inline-start:4px}

/* Рядки «іконка — назва — пояснення — дія» (Корисне, Керування). */
.kb-ms-rows{list-style:none;margin:0;padding:0}
.kb-ms-row{display:grid;grid-template-columns:20px minmax(0,1fr);gap:16px;padding:16px 0;
  border-top:1px solid var(--ink-700)}
.kb-ms-row:first-child{border-top:0;padding-top:0}
.kb-ms-row:last-child{padding-bottom:0}
.kb-ms-row__ico{width:20px;height:20px;margin-top:2px;color:var(--gold-500)}
.kb-ms-row__body{display:grid;gap:4px;min-width:0}
.kb-ms-row__title{margin:0;font-weight:600;font-size:var(--fs-sm)}
.kb-ms-row__text{margin:0;color:var(--ink-400);font-size:var(--fs-sm);line-height:1.5}
.kb-ms-row__acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:8px}
.kb-ms-row__acts .btn{margin:0}
.kb-ms-row__acts .btn:disabled{opacity:.6;pointer-events:none}
@container (min-width:720px){
  .kb-ms-row__body{grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center}
  .kb-ms-row__title,.kb-ms-row__text{grid-column:1}
  .kb-ms-row__acts{grid-column:2;grid-row:1 / span 2;margin:0;justify-content:flex-end}
  .kb-ms-row__body>.kb-ms-mini,.kb-ms-row__body>.kb-ms-details{grid-column:1 / -1}
}
.kb-ms-mini{display:grid;gap:8px;margin-top:12px;padding:16px;border-radius:12px;
  background:var(--ink-700);border:1px solid var(--ink-600);max-width:420px}
.kb-ms-mini[hidden]{display:none}
.kb-ms-mini .kb-ms-label{margin:0}
.kb-ms-mini input{background:var(--ink-800)}
.kb-ms-mini .kb-fine{margin:0}
.kb-ms-mini .btn{justify-self:start;margin:0}
.kb-ms-mini .kb-msg{margin:0}
.kb-ms-mini .kb-msg:empty{display:none}
.kb-ms-autopay{margin-top:4px}
.kb-ms-autopay .hub-grid{margin-top:8px}
.kb-ms-cancel{color:var(--paper)}

/* ─── 6. Платежі ─── */
.kb-ms-pay{list-style:none;margin:0;padding:0}
.kb-ms-pay__row{display:grid;grid-template-columns:140px minmax(0,1fr) auto 150px;
  gap:4px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--ink-700);
  font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.kb-ms-pay__row:first-child{border-top:0;padding-top:0}
.kb-ms-pay__date{color:var(--ink-400)}
.kb-ms-pay__what{display:grid;gap:2px;min-width:0}
.kb-ms-pay__method{font-weight:500}
.kb-ms-pay__period{font-size:var(--fs-xs);color:var(--ink-400)}
.kb-ms-pay__sum{text-align:end;font-weight:600;white-space:nowrap}
.kb-ms-pay__row.is-bonus .kb-ms-pay__sum{color:var(--gold-500)}
.kb-ms-pay__tail{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.kb-ms-pay__tail .kb-ms-link{min-height:36px}
.kb-ms-more{margin-top:8px}
@container (max-width:600px){
  .kb-ms-pay__row{grid-template-columns:minmax(0,1fr) auto}
  .kb-ms-pay__date{grid-column:1;grid-row:1;font-size:var(--fs-xs)}
  .kb-ms-pay__what{grid-column:1;grid-row:2}
  .kb-ms-pay__sum{grid-column:2;grid-row:1 / span 2;align-self:start}
  .kb-ms-pay__tail{grid-column:1 / -1;justify-content:flex-start}
  .kb-ms-pay__tail:empty{display:none}
}

/* ─── Діалоги: причина, пропозиція, пауза ─── */
.library-modal__body .kb-ms-actions{margin-top:8px}
.library-modal__body>h2{margin:0 36px 4px 0;font-family:var(--font-display);font-weight:500;font-size:1.375rem;line-height:1.3}
.library-modal__body .kb-lead{margin:0 0 4px}
.kb-ms-reasons{display:grid;gap:4px;width:100%;margin:4px 0 0;padding:0;border:0}
.kb-ms-reason{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;
  border:1px solid var(--ink-600);background:var(--ink-700);cursor:pointer;font-size:var(--fs-sm)}
.kb-ms-reason:hover{border-color:var(--ink-500)}
.kb-ms-reason:has(input:checked){border-color:var(--gold-500);background:var(--ink-600)}
.kb-ms-reason:has(input:focus-visible){outline:2px solid var(--gold-500);outline-offset:2px}
.kb-ms-reason input{margin:0;accent-color:var(--gold-500)}
.library-modal .kb-ms-field{width:100%}
.library-modal .kb-ms-field textarea{resize:vertical;line-height:1.5}
.library-modal .kb-seg{margin:4px 0}
.library-modal .kb-msg:empty{display:none}

/* ─── Квитанція ───
   Паперова, світла — і в модалці, і на друку: роботодавець отримує її
   як документ, а не як скриншот темного інтерфейсу. */
.kb-receipt{width:100%;margin:8px 0 0;padding:24px;border-radius:10px;background:var(--paper);
  color:var(--ink-800);font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums}
.kb-receipt__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;padding-bottom:16px;border-bottom:2px solid var(--ink-800)}
.kb-receipt__org{margin:0;font-family:var(--font-display);font-weight:700;font-size:16px}
.kb-receipt__orgnr{margin:2px 0 0;font-size:12px;color:var(--slate-600)}
.kb-receipt__title{margin:0;font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--ink-800)}
.kb-receipt__rows{margin:8px 0 0}
.kb-receipt__rows>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;
  padding:8px 0;border-bottom:1px solid var(--paper-100)}
.kb-receipt__rows dt{color:var(--slate-600);font-size:12px}
.kb-receipt__rows dd{margin:0;font-weight:500;word-break:break-word}
.kb-receipt__total{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 0;
  padding:12px 0;border-top:2px solid var(--ink-800);border-bottom:2px solid var(--ink-800)}
.kb-receipt__total b{font-size:20px}
.kb-receipt__vat{margin:12px 0 0;font-size:12px;color:var(--slate-600)}
.kb-receipt__foot{margin:4px 0 0;font-size:12px;color:var(--slate-600)}
#kb-print{display:none}
@media print{
  html.kb-printing body>*:not(#kb-print){display:none!important}
  html.kb-printing,html.kb-printing body{background:#fff!important}
  html.kb-printing #kb-print{display:block}
  html.kb-printing .kb-receipt{max-width:640px;margin:0 auto;padding:0;border-radius:0}
}

@media(max-width:560px){
  .kb-ms{gap:12px}
  .kb-ms-card,.kb-ms-status{padding:20px 16px}
  .kb-ms-notice{padding:16px}
  .kb-ms-facts{grid-template-columns:1fr 1fr}
  .kb-ms-fact:nth-child(odd){padding-inline-start:0;border-inline-start:0}
  .kb-ms-fact:nth-child(2n){padding-inline-start:16px;border-inline-start:1px solid var(--ink-600)}
  .kb-ms-actions .btn{flex:1 1 100%}
  .kb-seg{justify-self:stretch}
  .kb-seg__opt span{padding:0 12px}
  .kb-receipt{padding:16px}
  .kb-receipt__rows>div{grid-template-columns:1fr;gap:2px}
}
@media(prefers-reduced-motion:reduce){
  .kb-seg__opt span,.kb-ms-details>summary::after{transition:none}
}

/* Подія, на яку людина прийшла з сайту (?event=, «Я член клубу»). */
.card--event.is-target {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

/* ─── Хто йде на подію (088) ──────────────────────────────────── */
.ev-going {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-block-start: 4px;
}
.ev-going__faces { display: flex; }
/* «за N дн.» у кінці рядка — притиснута праворуч (kabinet-hub.js → soonTag). */
.ev-going > .hub-tag { margin-inline-start: auto; }
.ev-going__face {
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  border: 2px solid var(--ink-700);
  background: var(--ink-600);
  color: var(--gold-500);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  flex: none;
}
.ev-going__faces .ev-going__face + .ev-going__face { margin-inline-start: -8px; }
.ev-going__face img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ev-going__text { margin: 0; font-size: var(--fs-xs); color: var(--ink-400); line-height: 1.5; flex: 1 1 160px; }
.ev-going__all {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold-500);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.ev-going__list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; }
.ev-going__row { display: flex; align-items: center; gap: 12px; }
.ev-going__row .ev-going__face { inline-size: 40px; block-size: 40px; font-size: 14px; }
.ev-going__row strong { display: block; }

/* ─── «Маєте ідею події?» ───────────────────────────────────────
   Смуга на всю ширину під подіями, а не картка в ряду (рішення
   власника 03.10.2026): легке золоте тло, суцільна тонка рамка,
   іконка ліворуч, кнопка праворуч. На телефоні — стовпчиком. */
.hub-card--idea {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid rgba(242, 194, 0, .35);
  background: rgba(242, 194, 0, .06);
}
.hub-idea__mark {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: rgba(242, 194, 0, .12);
  color: var(--gold-500);
}
.hub-idea__mark svg { inline-size: 24px; block-size: 24px; }
.hub-idea__text { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: 4px; }
.hub-idea__text .eyebrow { margin: 0; }
.hub-idea__text .hub-card__title { margin: 0; font-size: 1.125rem; line-height: 1.35; }
.hub-idea__text .hub-card__text { margin: 0; }
.hub-card--idea > .btn { flex: none; }
@media (max-width: 640px) {
  .hub-card--idea { flex-direction: column; align-items: flex-start; }
}
/* Вікно «Запропонувати подію» (рішення власника 03.10.2026): шапка з
   іконкою, поля на всю ширину, формат і роль — плашками. */
.library-modal--idea{max-width:min(600px,calc(100vw - 32px))}
.kb-idea__body{padding:28px 28px 26px;align-items:stretch;gap:0}
.kb-idea__head{display:flex;gap:16px;align-items:flex-start;padding-inline-end:28px;
  padding-block-end:20px;border-block-end:1px solid var(--ink-600)}
/* Екран «Дякуємо» — сама шапка, без лінії під нею. */
.kb-idea__head:last-child{border-block-end:0;padding-block-end:0}
.kb-idea__intro{display:grid;gap:6px;min-inline-size:0}
.kb-idea__intro .eyebrow,.kb-idea__intro .hub-card__title,.kb-idea__intro .hub-card__text{margin:0}
.kb-idea__intro .hub-card__title{font-size:1.375rem}
.kb-idea { display: grid; gap: 18px; margin-block-start: 20px; inline-size: 100%; }
.kb-idea .kb-field { display: grid; gap: 8px; }
.kb-idea .kb-field__label { font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink-400); }
.kb-idea .input { inline-size: 100%; font-size: var(--fs-sm); }
.kb-choice{margin:0;padding:0;border:0;display:grid;gap:8px;min-inline-size:0}
.kb-choice legend{padding:0;margin-block-end:8px}
.kb-choice__list{display:flex;flex-wrap:wrap;gap:8px}
/* .kb-pick, а не .kb-chip: .kb-chip — галочки профілю, своє оформлення. */
.kb-pick{position:relative;cursor:pointer}
.kb-pick input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.kb-pick span{display:inline-flex;align-items:center;padding:8px 14px;border:1px solid var(--ink-500);
  border-radius:999px;font-size:var(--fs-sm);line-height:1.3;color:var(--ink-400);
  transition:border-color .15s,color .15s,background-color .15s}
.kb-pick:hover span{border-color:var(--ink-400);color:var(--paper)}
.kb-pick input:checked + span{border-color:var(--gold-500);color:var(--paper);background:rgba(242,194,0,.12)}
.kb-pick input:focus-visible + span{outline:2px solid var(--gold-500);outline-offset:2px}
.kb-idea__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  padding-block-start:18px;border-block-start:1px solid var(--ink-600)}


/* ─── Друга й третя компанія в профілі (092) ─────────────────── */
.kb-extra-co {
  margin-block: 6px 14px;
  padding: 14px 16px 2px;
  border: 1px solid var(--ink-600);
  border-radius: 12px;
}
.kb-extra-co__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 10px; }
.kb-extra-co__head h4 { margin: 0; font-size: var(--fs-sm); color: var(--gold-500); font-weight: 500; }
.kb-extra-co__del,
.kb-add-company {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.kb-extra-co__del { color: var(--ink-400); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px; }
.kb-extra-co__del:hover { color: var(--paper); }
.kb-add-company { color: var(--gold-500); font-size: var(--fs-sm); font-weight: 600; margin-block: 2px 18px; }
.kb-add-company[hidden] { display: none; }

/* Плашка «встановити застосунок» на телефоні — з тим самим відступом від
   країв, що й картки під нею, а не рамкою впритул до країв екрана. */
@media(max-width:780px){
  .kb-pwa-banner{width:auto;margin:12px 14px 0;padding:16px 18px}
}

/* ─── «Додайте фото профілю» — над карткою каталогу, коли фото немає ── */
.kb-photo-nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-block: 4px 18px;
  padding: 14px 16px;
  border: 1px dashed var(--gold-500);
  border-radius: 14px;
  background: rgba(242, 194, 0, .06);
}
.kb-photo-nudge[hidden] { display: none; }
.kb-photo-nudge__ico {
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink-600);
  color: var(--gold-500);
  font-weight: 600;
}
.kb-photo-nudge__text { flex: 1 1 200px; display: grid; gap: 2px; }
.kb-photo-nudge__text span { color: var(--ink-400); font-size: var(--fs-xs); line-height: 1.5; }

/* ── Онлайн-участь (093): «Буду очно / онлайн», зміна формату,
   «Підключитися» в день зустрічі й записи в архіві ─────────────── */
.ev-switch {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold-500);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  text-underline-offset: 3px;
}
.ev-switch:hover { text-decoration: underline; }
.ev-switch:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.ev-switch:disabled { opacity: .5; cursor: default; }
.ev-note {
  flex: 1 0 100%;
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.kb-recap__media { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-recap__media .btn { margin: 0; }
.kb-recs { margin-block-start: 28px; }
.kb-recs__title { margin: 0 0 12px; font-size: 1.1rem; font-weight: 500; }
.kb-recs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kb-recs__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 16px;
  border: 1px solid var(--ink-600);
  border-radius: var(--r);
}
.kb-recs__info { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.kb-recs__name { color: var(--paper); }
.kb-recs__date { color: var(--c-muted); font-size: var(--fs-sm); }
.kb-recs__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-recs__acts .btn { margin: 0; }

/* Майбутня подія в кабінеті відкривається вікном сайту (events.js →
   openEventDetail, рішення власника 03.10.2026): світле, на весь екран.
   Кабінетні кнопки в ньому — розміру кнопок сайту, по центру, а
   золоті на темному «Запросити друга» / «Змінити формат» — синім,
   як мітки вікна (--event-ink). */
.event-modal .event-detail-acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:0}
.event-modal .ev-acts{justify-content:center}
.event-modal .ev-acts .btn--sm{min-height:48px;padding:12px 28px;font-size:var(--fs-sm)}
.event-modal .kb-invite-link,
.event-modal .ev-switch{color:var(--event-ink)}
.event-modal .kb-invite-link:hover{color:var(--ink-800)}

/* Бот клубу (108): смуга на першому екрані головної, поки Telegram не
   підключено. Як hub-alert, але спокійна: це пропозиція, не тривога. */
.hub-tg { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  margin-block: 0 22px; padding: 14px 18px; border-radius: 14px;
  background: rgba(42, 171, 238, .08); border: 1px solid rgba(42, 171, 238, .35); }
.hub-tg__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.hub-tg__title { font-size: 16px; }
.hub-tg__lead { font-size: 14px; opacity: .8; }
.hub-tg__btn { flex: none; }
.hub-tg .kb-muted { flex-basis: 100%; margin: 0; }
@media (max-width: 560px) {
  .hub-tg__btn { width: 100%; justify-content: center; }
}

/* Своя анкета події в кабінеті (07.10.2026): відоме з профілю —
   довідкою зверху, питання — лише ті, яких у профілі немає. */
.kb-regform__lead { margin: 18px 0 8px; font-size: var(--fs-xs); color: var(--ink-400); }
.kb-regform__known { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: var(--fs-sm, 15px); }
.kb-regform__known dt { color: var(--ink-400); }
.kb-regform__known dd { margin: 0; overflow-wrap: anywhere; }
.kb-regform { margin-top: 4px; }
.kb-regform__err { color: #E2685E; font-size: var(--fs-xs); margin: 0 0 12px; }
.kb-regform__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (max-width: 520px) {
  .kb-regform__known { grid-template-columns: 1fr; gap: 0; }
  .kb-regform__known dd { margin-bottom: 8px; }
  .kb-regform__acts .btn { flex: 1 1 100%; }
}

/* Чек-лист онбордингу (07.10.2026): перший екран, поки є незроблені
   кроки. Зроблене — тьмяніше, з галочкою; незроблене — з кнопкою. */
.hub-onb { margin-block: 0 22px; padding: 18px 20px; border-radius: 16px;
  background: var(--ink-700); border: 1px solid var(--ink-600); }
.hub-onb__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hub-onb__title { margin: 0; font-size: 18px; }
.hub-onb__count { color: var(--gold-500); font-size: 14px; font-weight: 600; white-space: nowrap; }
.hub-onb__bar { height: 4px; margin: 10px 0 6px; border-radius: 4px; background: var(--ink-600); overflow: hidden; }
.hub-onb__bar span { display: block; height: 100%; background: var(--gold-500); border-radius: 4px; transition: width .3s; }
.hub-onb__list { list-style: none; margin: 0; padding: 0; }
.hub-onb__step { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ink-600); }
.hub-onb__step:first-child { border-top: 0; }
.hub-onb__mark { flex: none; display: grid; place-items: center; inline-size: 24px; block-size: 24px;
  margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--ink-400); font-size: 13px; font-weight: 700; }
.hub-onb__step.is-done .hub-onb__mark { background: #3DBE7B; border-color: #3DBE7B; color: var(--ink-900); }
.hub-onb__step.is-done .hub-onb__name { color: var(--ink-400); font-weight: 500; }
.hub-onb__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.hub-onb__name { font-size: 15px; }
.hub-onb__hint { font-size: 14px; color: var(--ink-400); overflow-wrap: anywhere; }
.hub-onb__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
.hub-onb__link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px;
  color: var(--gold-500); cursor: pointer; text-decoration: none; }
.hub-onb__link:hover { text-decoration: underline; }
.hub-onb__link:disabled { opacity: .5; cursor: default; }
.hub-onb__err { margin: 6px 0 0; font-size: 13px; color: #E2685E; }
@media (max-width: 560px) {
  .hub-onb { padding: 16px; }
  .hub-onb__acts .btn { flex: 1 1 100%; justify-content: center; }
}
.kb-check--map { align-items: flex-start; margin-top: 14px; }
.kb-check--map input { margin-top: 3px; }
.kb-check--map a { color: var(--gold-500); }

/* «Спільнота» для неоплаченого члена (130, 07.10.2026): замість
   порожнього списку — чому закрито і кнопка оплати. */
.kb-paywall { grid-column: 1 / -1; max-width: 620px; margin: 8px auto; padding: 28px 24px; text-align: center;
  border-radius: 16px; background: var(--ink-700); border: 1px solid var(--ink-600); }
.kb-paywall__ico { font-size: 28px; }
.kb-paywall__title { margin: 10px 0 8px; font-size: 19px; line-height: 1.3; }
.kb-paywall__text { margin: 0 auto 18px; color: var(--ink-400); font-size: 15px; max-width: 480px; }
.kb-paywall__acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 20px; }
.kb-paywall__link { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-500); cursor: pointer; }
.kb-paywall__link:hover { text-decoration: underline; }
@media (max-width: 560px) { .kb-paywall { padding: 22px 16px; } .kb-paywall__acts .btn { width: 100%; justify-content: center; } }

/* «Спікер / Партнер» на головній (08.10.2026). */
.hub-speaker { margin-block: 0 22px; padding: 18px 20px; border-radius: 16px;
  background: var(--ink-700); border: 1px solid var(--gold-600); }
.hub-speaker .eyebrow { margin: 0 0 6px; }
.hub-speaker__lead { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.hub-speaker__text { margin: 0; color: var(--ink-400); font-size: 15px; }
.hub-speaker__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
@media (max-width: 560px) { .hub-speaker { padding: 16px; } .hub-speaker__acts .btn { width: 100%; justify-content: center; } }