@import url("/app/card.css");

/* Власні шари й стани картки живуть у card.css. Нижче лишилися правила для
   модалки, сітки та інших частин оболонки, які ще походять зі Framer. */

/* ---------- модалка ---------- */
/* Розмір і радіус дає CSS Framer через клас обгортки; тут лише центрування. */
.uib-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.2);
}
.uib-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Framer центрував модалку саме так — transform лежав на його обгортці. */
  transform: translate(-50%, -50%);
  width: 800px;
  height: 675px;
}
/* Тіло модалки у Framer розтягував його ж контейнер; тут це робимо явно. */
.uib-modal > * {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 880px) {
  /* на вузьких екранах модалка стає майже на всю ширину — це вже свій адаптив */
  .uib-modal { width: calc(100vw - 32px); height: min(675px, calc(100vh - 32px)); }
}

/* ---------- адаптив (свій, не копія Framer) ---------- */
/* Framer тримав окрему копію розмітки під кожен брейкпоінт і фіксовану
   висоту картки. Ми лишаємо одну копію: ширину картки задає колонка сітки,
   а висоту — пропорція. Кількість колонок вважає relayout() із доступної
   ширини, а не з ширини вікна, тому картка ніколи не буває ні вужчою за
   288px, ні розтягнутою на пів екрана. */

[data-framer-name="All list"] {
  grid-template-columns: repeat(var(--uib-cols, 3), minmax(0, 1fr)) !important;
  justify-content: stretch;
}

/* Промо-картка у блоці free ширша за пропорцією (445×250 у макеті), тому
   загальне співвідношення для неї не годиться — блок ставав вищим на 74px. */
[data-framer-name="free sections"] [data-section]:not(.uib-card) { aspect-ratio: 445 / 250 }

/* ---------- сайдбар на планшеті й телефоні ---------- */
/* Сама висувна панель, її смужка й бургер живуть в app/sidebar.css —
   поруч із рештою сайдбара, щоб маркетингові сторінки діставали те саме.
   Тут лишається те, що стосується саме розкладки каталогу. */
@media (max-width: 1023px) {
  /* контент займає всю ширину, бо сайдбар більше не в потоці */
  [data-framer-name="Container"], [data-framer-name="Content Section"] { width: 100% !important }
}

/* В одну колонку картка не має розпливатися на всю ширину планшета.
   Кількість колонок ставить relayout(), тому й правило чіпляємо до неї. */
[data-framer-name="All list"][data-cols="1"] { justify-content: center }
[data-framer-name="All list"][data-cols="1"] .uib-card-item { max-width: 448px; margin: 0 auto }

@media (max-width: 767px) {
  [data-framer-name="All list"] { gap: 16px !important }

  /* Framer ставить заголовкам white-space: pre, тому довгий рядок не
     переносився й вилазив за екран. На вузькому дозволяємо перенос, а
     рядок «заголовок + посилання» кладемо у два рядки. */
  h1.framer-text, h2.framer-text, h3.framer-text { white-space: normal !important }
  [data-framer-name="free sections"] > div,
  [data-framer-name="title+search"] {
    flex-wrap: wrap !important;
    height: auto !important;
    row-gap: 8px;
  }
  /* обгортки заголовків у Framer мають фіксовану ширину — стискаємо їх
     до екрана (картки це правило не чіпає, воно лише в цих рядках) */
  [data-framer-name="free sections"] > div > div,
  [data-framer-name="free sections"] h2,
  [data-framer-name="title+search"] > div { max-width: 100% !important }
}

/* Модалка: на телефоні вписуємо у екран замість фіксованих 800×675 */
@media (max-width: 900px), (max-height: 760px) {
  .uib-modal > * {
    width: min(800px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}

/* ---------- плавність оболонки ---------- */
/* сайдбар: пункти й кнопка згортання */
nav [data-framer-name="Nav Item"],
nav [data-framer-name="btn-Sections"],
.uib-sidebar [data-framer-name="minimize-btn"] {
  transition: background-color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}
.uib-sidebar [data-framer-name="minimize-btn"]:hover { transform: scale(1.08); }

/* FAQ: відповідь виїжджає, іконка повертається */
[data-framer-name="Answer wrap"] {
  animation: uib-faq-open 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow: hidden;
}
@keyframes uib-faq-open {
  from { opacity: 0; transform: translateY(-4px); max-height: 0 }
  to { opacity: 1; transform: none; max-height: 400px }
}
/* Пункти FAQ — як в оригіналі: плоскі плашки #f7f7f7 без рамки й тіні.
   Раніше вони були білими картками з кільцем `0 0 0 1px` плюс розмита
   тінь — на білому полотні це читалось як подвійна обводка. Наведення —
   лише тон темніше, щоб було видно, що плашка натискається. */
[data-framer-name="FAQ grid"] [data-framer-name="Closed"],
[data-framer-name="FAQ grid"] [data-framer-name="Open"] {
  background-color: #f7f7f7 !important;
  box-shadow: none !important;
  overflow: hidden;   /* під час згортання відповідь не вилазить за плашку */
  transition: background-color 0.18s ease;
}
[data-framer-name="FAQ grid"] [data-framer-name="Closed"]:hover {
  background-color: #f2f2f3 !important;
}

[data-framer-name="Question row"] { cursor: pointer }
[data-framer-name="Toggle icon"] { transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important }
}

/* ---------- вікно входу ---------- */
.uib-auth-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(384px, calc(100vw - 32px));
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  font-family: Inter, -apple-system, sans-serif;
  animation: uib-auth-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes uib-auth-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.98) }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) }
}
.uib-auth-box h2 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.2px }
.uib-auth-box input {
  border: 1px solid #e2e4e9;
  border-radius: 12px;
  padding: 12px 16px;
  font: inherit;
  font-size: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.uib-auth-box input:focus {
  outline: none;
  border-color: #7c5cff;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.16);
}
.uib-auth-box button {
  border: 1px solid #e2e4e9;
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}
.uib-auth-box button:hover { background: #f5f7fa; transform: translateY(-1px) }
.uib-auth-box button:active { transform: translateY(0) }
.uib-auth-box .uib-primary { background: #111; color: #fff; border-color: #111; font-weight: 600 }
.uib-auth-box .uib-primary:hover { background: #000 }
.uib-auth-msg { margin: 2px 0 0; font-size: 12px; color: #e0603a }
.uib-auth-msg[data-ok="true"] { color: #2e9e5b }
.uib-auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border-radius: 50% !important;
  line-height: 1;
}

/* Підпис автора під карткою секції спільноти. Офіційні секції цього
   елемента не отримують — їхня розмітка лишається побайтово тією ж. */
.uib-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;   /* grid-ok: знак і підпис в одному рядку, 12px текст */
  text-decoration: none;
  margin-top: 1px;
  font-family: Geist, Inter, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #8b8b95;
}
/* Посилання в CSS Framer стилізовані сильніше, тому колір і підкреслення
   для підпису автора задаємо явно. */
a.uib-by, a.uib-by:link, a.uib-by:visited {
  color: #8b8b95 !important; text-decoration: none !important;
}
a.uib-by:hover { color: #0b0b0c !important; text-decoration: underline !important }

/* ================= кабінет автора (/account) =================
   Свої блоки, а не розмітка Framer: у нього немає готового екрана під це.
   Типографіка й радіуси взяті з карток каталогу, щоб не вибивалось.
   Секції розділені: хто ти → твої секції → нарахування. */
.uib-account { display: flex; flex-direction: column; gap: 32px; width: 100%; margin: 4px 0 32px }
.uib-account * { box-sizing: border-box }
.uib-acc-card,
.uib-acc-item {
  background: #fff;
  border: 1px solid #eeeef0;
  border-radius: 16px;
  padding: 16px;
  font-family: Geist, Inter, sans-serif;
  color: #0b0b0c;
}
.uib-acc-block { display: flex; flex-direction: column; gap: 16px }
.uib-acc-block-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px solid #e8e8ec;
}
.uib-acc-block-head h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; flex: 1 }

/* ---- профіль ---- */
.uib-acc-profile { display: flex; flex-direction: column; gap: 16px; padding: 24px }
.uib-acc-id { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap }
.uib-acc-pic {
  width: 64px; height: 64px; border-radius: 999px;   /* grid-ok: коло */
  object-fit: cover; flex: 0 0 64px; display: grid; place-items: center;
  background: #eee6ff; color: #582cb4; font: 600 24px/1 Geist, Inter, sans-serif;
}
.uib-acc-id-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px }
.uib-acc-id-text h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.uib-acc-id-text p { margin: 0; font-size: 14px; line-height: 20px; color: #52525b }
.uib-acc-id-text code {
  font: 400 12px/16px "Geist Mono", ui-monospace, monospace;
  background: #f5f5f7; border-radius: 4px; padding: 4px 8px; cursor: pointer;
}
.uib-acc-id-text code:hover { background: #ebebeb }
.uib-acc-id-acts { display: flex; gap: 8px; flex-wrap: wrap }
.uib-acc-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.uib-acc-net {
  font-size: 12px; line-height: 16px; padding: 8px 12px; border-radius: 999px;   /* grid-ok: pill */
  border: 1px solid #e4e4e7; color: #0b0b0c; text-decoration: none;
  transition: background-color 0.16s ease;
}
.uib-acc-net:hover { background: #f5f5f7 }
.uib-acc-quota { margin: 0 }

.uib-acc-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.uib-acc-head h3, .uib-acc-empty h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em }
.uib-acc-head p, .uib-acc-empty p, .uib-acc-card > p { margin: 0; font-size: 14px; color: #71717a; line-height: 20px }
.uib-acc-head > div { flex: 1; min-width: 224px }
.uib-acc-empty {
  text-align: center; padding: 32px; background: #fff;
  border: 1px solid #eeeef0; border-radius: 16px;
}
.uib-acc-list { display: flex; flex-direction: column; gap: 8px }

.uib-acc-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 16px; align-items: center }
.uib-acc-thumb { width: 96px; height: 64px; border-radius: 8px; overflow: hidden; background: #f5f5f7 }
.uib-acc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.uib-acc-title { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em }
.uib-acc-sub { font-size: 12px; line-height: 16px; color: #8b8b95 }
.uib-acc-note { font-size: 12px; line-height: 16px; color: #b45309; margin-top: 8px }
.uib-acc-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right }
.uib-acc-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end }

.uib-acc-chip {
  font-size: 12px; line-height: 16px; padding: 4px 8px; border-radius: 999px;   /* grid-ok: pill */
  border: 1px solid #e4e4e7; color: #71717a; white-space: nowrap;
}
.uib-acc-chip.ok { border-color: #16a34a; color: #16a34a }
.uib-acc-chip.pending { border-color: #2563eb; color: #2563eb }
.uib-acc-chip.changes { border-color: #d97706; color: #d97706 }
.uib-acc-chip.rejected { border-color: #dc2626; color: #dc2626 }

.uib-acc-btn {
  font: 500 14px/1 Geist, Inter, sans-serif;
  padding: 12px 16px; border-radius: 12px; border: 1px solid #e4e4e7;
  background: #fff; color: #0b0b0c; cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.uib-acc-btn:hover { background: #ebebeb }
.uib-acc-btn.primary { background: #0b0b0c; border-color: #0b0b0c; color: #fff }
.uib-acc-btn.primary:hover { background: #ebebeb; color: #0b0b0c; border-color: #ebebeb }
.uib-acc-btn.danger { color: #dc2626; border-color: #f1d2d2 }
.uib-acc-btn:disabled { opacity: 0.5; cursor: default }

/* ---- попап додавання секції ---- */
.uib-acc-dlg {
  border: 1px solid #eeeef0; border-radius: 16px; padding: 0;
  width: min(560px, calc(100vw - 32px)); max-height: min(90vh, 820px);
  background: #fff; color: #0b0b0c; overflow: hidden;
}
.uib-acc-dlg::backdrop { background: rgba(11, 11, 12, 0.45) }
.uib-acc-form { display: flex; flex-direction: column; max-height: inherit; font-family: Geist, Inter, sans-serif }
.uib-acc-dlg-top { display: flex; align-items: center; gap: 12px; padding: 16px 16px; border-bottom: 1px solid #eeeef0 }
.uib-acc-dlg-top h3 { margin: 0; font-size: 16px; font-weight: 600 }
.uib-acc-x { margin-left: auto; border: 0; background: none; font-size: 16px; cursor: pointer; color: #71717a }
.uib-acc-dlg-body { display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow-y: auto; overflow-x: hidden }
.uib-acc-dlg-foot { display: flex; gap: 8px; align-items: center; padding: 16px 16px; border-top: 1px solid #eeeef0; flex-wrap: wrap }
.uib-acc-grow { flex: 1 }
.uib-acc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.uib-acc-field { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.uib-acc-field > span { font-size: 12px; color: #71717a }
.uib-acc-field input, .uib-acc-field select, .uib-acc-dlg textarea {
  font: 400 12px/1.4 Geist, Inter, sans-serif;
  padding: 12px 12px; border: 1px solid #e4e4e7; border-radius: 12px;
  background: #fff; color: #0b0b0c; width: 100%;
}
.uib-acc-field input:focus, .uib-acc-field select:focus { outline: 2px solid #0b0b0c1a; border-color: #0b0b0c }
.uib-acc-cats { display: flex; flex-wrap: wrap; gap: 8px; max-height: 128px; overflow-y: auto }
.uib-acc-cats label {
  font-size: 12px; padding: 8px 12px; border: 1px solid #e4e4e7; border-radius: 999px;   /* grid-ok: pill */
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.uib-acc-cats label:has(input:checked) { border-color: #0b0b0c }
.uib-acc-cats input { width: auto; accent-color: #0b0b0c }
.uib-acc-paste {
  position: relative; border: 1px dashed #d4d4d8; border-radius: 12px; min-height: 96px;
  display: grid; place-items: center; text-align: center; padding: 16px; cursor: text;
  font-size: 14px; color: #71717a; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.uib-acc-paste:focus-within { border-color: #0b0b0c; background: #fafafa }
.uib-acc-paste textarea { position: absolute; inset: 0; opacity: 0; resize: none; border: 0 }
.uib-acc-state { font-size: 12px; color: #8b8b95 }
.uib-acc-state.ok { color: #16a34a }
.uib-acc-state.err { color: #dc2626 }
.uib-acc-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #52525b; line-height: 1.5 }
.uib-acc-check input { margin-top: 2px; accent-color: #0b0b0c }
.uib-acc-msg { font-size: 12px; padding: 12px 12px; border-radius: 12px; background: #f5f5f7; color: #52525b }
.uib-acc-msg.err { background: #fee2e2; color: #b91c1c }
.uib-acc-msg.ok { background: #dcfce7; color: #15803d }

/* ---- тост ---- */
.uib-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #0b0b0c; color: #fff; font: 500 12px/1 Geist, Inter, sans-serif;
  padding: 12px 16px; border-radius: 999px; z-index: 10000;   /* grid-ok: pill */
  animation: uib-toast-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes uib-toast-in { from { opacity: 0; transform: translate(-50%, 8px) } to { opacity: 1; transform: translate(-50%, 0) } }

@media (max-width: 700px) {
  .uib-acc-item { grid-template-columns: 72px minmax(0, 1fr); }
  .uib-acc-thumb { width: 72px; height: 56px }
  .uib-acc-meta, .uib-acc-acts { grid-column: 1 / -1; align-items: flex-start; justify-content: flex-start; text-align: left }
  .uib-acc-two { grid-template-columns: 1fr }
}

/* меню акаунта біля кнопки в сайдбарі */
.uib-menu {
  position: fixed; z-index: 10000; min-width: 184px;
  background: #fff; border: 1px solid #eeeef0; border-radius: 12px; padding: 8px;
  box-shadow: 0 12px 32px rgba(11, 11, 12, 0.12);
  display: flex; flex-direction: column; gap: 2px;
  animation: uib-menu-in 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes uib-menu-in { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
.uib-menu a, .uib-menu button {
  font: 500 12px/1 Geist, Inter, sans-serif; text-align: left; text-decoration: none;
  padding: 12px 12px; border: 0; border-radius: 8px; background: none; color: #0b0b0c; cursor: pointer;
}
.uib-menu a:hover, .uib-menu button:hover { background: #f5f5f7 }

/* картинка в попапі кабінету */
.uib-acc-img { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; align-items: start }
.uib-acc-img-prev {
  width: 136px; height: 88px; border: 1px solid #e4e4e7; border-radius: 12px; overflow: hidden;
  background: #f5f5f7; display: grid; place-items: center; font-size: 12px; color: #a1a1aa;
}
.uib-acc-img-prev img { width: 100%; height: 100%; object-fit: cover; display: block }
.uib-acc-img-side { display: flex; flex-direction: column; gap: 8px; min-width: 0 }

/* нарахування в кабінеті */
.uib-acc-pay { display: flex; flex-direction: column; gap: 8px; margin-top: 12px }
.uib-acc-payrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 16px; align-items: center;
  padding: 12px 0 0; border-top: 1px solid #eeeef0; font-size: 14px;
}
.uib-acc-payrow b { font-size: 14px }

/* Міні-меню: лишаються тільки іконки. У знятому стані підпис «Support»
   є в розмітці, а ховало його правило рантайму Framer — без нього текст
   вилазив за вузьку панель. */
.uib-sidebar[data-framer-name="Desktop Sidebar-mini"] [data-framer-component-type="RichTextContainer"] {
  display: none !important;
}

/* ================= сайдбар: нічого не випадає з картки =================
   Висота меню — на весь екран, а вміст буває вищим: відкритий каталог із
   шістнадцятьма категоріями плюс блок користувача. Тоді нижній блок
   (контакти й користувач) вилазив за нижній край картки й обрізався
   екраном — його просто не було видно. Тому верхня частина стискається й
   скролиться сама, а нижня лишається притиснутою до низу картки. */
@media (min-width: 1024px) {
  .uib-sidebar { display: flex !important; flex-direction: column }
  .uib-sidebar > [data-framer-name="Navigation"] { flex: 0 1 auto; min-height: 0 }
  .uib-sidebar > [data-framer-name="for user nav"] { flex: 0 0 auto; margin-top: auto }
}

/* ================= сайдбар: свої стани ================= */
/* Акордеон категорій згортається класом, а не підміною розмітки: підміна
   давала стрибок меню на кожен клік. */
/* Розкриття панелі категорій — переходом, а не display: none (його
   анімувати неможливо). Висоту в --uib-cat-h кладе client.js перед
   перемиканням, тому max-height веде саме до реальної висоти списку. */
.uib-sidebar [data-framer-name="open cat"] {
  /* Скролиться саме список категорій, а не все меню: логотип, «Dashboard»,
     сама кнопка каталогу й «Make 3D Graphic» лишаються на місці за будь-якої
     висоти екрана. Обидві межі міряє client.js: --uib-cat-h — це реальна
     висота списку (щоб анімація не тягнулась у порожнє), --uib-cat-max —
     скільки місця лишається в меню під нього. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d4d4d8 transparent;
  max-height: min(var(--uib-cat-h, 720px), var(--uib-cat-max, 720px));
  opacity: 1;
  visibility: visible;
  transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease,
              visibility 0s;
}
.uib-sidebar.uib-cat-closed [data-framer-name="open cat"] {
  max-height: 0;
  overflow: hidden;
  /* visibility гасимо в кінці згортання: інакше список зникав би одразу,
     без анімації. Він потрібен, щоб згорнуті посилання не ловили фокус
     з клавіатури. */
  visibility: hidden;
  transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease,
              visibility 0s 0.28s;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .uib-sidebar [data-framer-name="open cat"] { transition: none }
}
/* Шеврон намальований маскою на окремому блоці «icons-uiblockify», а не
   через <svg>: закрито — дивиться вправо, відкрито — вгору. */
.uib-sidebar [data-framer-name="icons-uiblockify"] {
  transition: transform 0.2s ease, opacity 0.16s ease;
}
.uib-sidebar.uib-cat-closed [data-framer-name="icons-uiblockify"] { transform: rotate(90deg) }
/* Закрито й без курсора шеврона не видно — так само, як в оригіналі.
   `!important` тут обов'язковий: Framer лишив на цьому блоці інлайновий
   opacity: 1, і без нього шеврон стирчав у спокої. */
.uib-sidebar.uib-cat-closed [data-framer-name^="web section"] [data-framer-name="icons-uiblockify"] {
  opacity: 0 !important;
}
.uib-sidebar.uib-cat-closed [data-framer-name="dashboard-btn"]:hover [data-framer-name="icons-uiblockify"] {
  opacity: 1 !important;
}

/* Закрито — кнопка каталогу має бути точно така, як інші пункти меню.
   У знімку вона зверстана відкритим станом: усередині обгортка «Nav Item»
   зі своїми 8px, і через них іконка з назвою стояли на 8px правіше, ніж у
   «Dashboard», а підпис був чорний замість сірого. В оригіналі в
   закритому стані всі три рядки однакові (текст від 64px, колір
   rgb(98,105,122)) — вирівнюємо. */
.uib-sidebar [data-framer-name^="web section"] [data-framer-name="Nav Item"] {
  /* Відступ їде переходом: між станами він 8px → 0, і без цього назва з
     іконкою стрибала на 8px убік на кожне розкривання. */
  transition: padding 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.uib-sidebar.uib-cat-closed [data-framer-name^="web section"] [data-framer-name="Nav Item"] {
  padding: 0 !important;
}
.uib-sidebar.uib-cat-closed [data-framer-name^="web section"] [data-framer-name="Nav Item"] p {
  color: #62697a !important;
}

/* Чипи «Free Sections / Community / Assets» переносяться, а не вилазять
   за картку меню. */
.uib-sidebar [data-framer-name="other cat"] {
  flex-wrap: wrap !important;
  row-gap: 8px;
  height: auto !important;
  align-content: flex-start;
}
.uib-sidebar [data-framer-name="resources"] { height: auto !important }
.uib-sidebar [data-framer-name="open cat"] { height: auto !important }

/* Чип спільноти — світло-голубий, як бейдж HI, а не кольоровий шум.
   Зроблений із зеленого чипа «Free Sections», тому від нього лишались дві
   речі: зелене кільце (Framer малює рамку через ::after) і власний фон у
   внутрішньому блоці з текстом — на ховері він читався як підкладка під
   написом. Кільце перефарбовуємо, підкладку знімаємо. */
.uib-sidebar a[href="/community"] [data-framer-name="Category Title"] p {
  color: #1d5fd1 !important;
  line-height: 16px !important;   /* grid-ok: висота чипа 24px, текст по центру */
}
.uib-sidebar a[href="/community"] {
  align-items: center !important;
  border: 1px solid #cbdffd !important;
  background-color: #e8f1ff !important;
}
.uib-sidebar a[href="/community"]::after { border-color: #cbdffd !important }
.uib-sidebar a[href="/community"] > div { background-color: transparent !important }

/* Наведення на пункти меню: Framer робив це своїм motion, тут — звичайним
   переходом. Тон узятий із наявного стану наведення на картку. */
.uib-sidebar [data-framer-name="dashboard-btn"],
.uib-sidebar [data-framer-name="resources btn"],
.uib-sidebar [data-framer-name="Category"],
.uib-sidebar [data-framer-name="minimize-btn"] {
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
/* ================= стани кнопок меню (як в оригіналі) =================
   Дефолт — плоска кнопка в тон сторінки. Ховер — біла картка з тінню.
   Відкритий каталог — кнопка виглядає як на ховері, а сам каталог іде
   окремою карткою через 8px, щоб тінь кнопки не обрізалась. */
.uib-sidebar [data-framer-name="default"],
.uib-sidebar [data-framer-name^="web section"],
.uib-sidebar [data-framer-name="name+icon"] {
  transition: background-color 0.16s ease, box-shadow 0.16s ease, border-radius 0.2s ease;
}
.uib-sidebar [data-framer-name="web section (active)"],
.uib-sidebar [data-framer-name="default"] {
  background: #f9fbfc !important;
  border-radius: 10px !important;   /* grid-ok: радіус пігулки меню, як в оригіналі */
  box-shadow: none !important;
}
/* Кнопка каталогу — це два вкладені шари («web section» і всередині нього
   «web section button» із відступом 8px). Пігулку малює лише зовнішній:
   коли фон, радіус і тінь діставались обом, внутрішній прозирав із-під
   зовнішнього закругленими кутами — саме ті «лишні деталі» на кнопці. */
.uib-sidebar [data-framer-name*="web section button"] {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.uib-sidebar [data-framer-name*="web section button"]::after { border-width: 0 !important }
.uib-sidebar [data-framer-name="web section (active)"] { overflow: visible !important }
/* Рамку ::after у дефолті знімаємо з усіх пунктів — в оригіналі вони
   плоскі, картка з рамкою й тінню з'являється лише під курсором. */
.uib-sidebar [data-framer-name="default"]::after { border-width: 0 !important }
/* Рамку Framer малює через ::after — у дефолті її немає, як і в решти
   кнопок меню; вона з'являється на ховері й коли каталог відкритий. */
.uib-sidebar [data-framer-name="web section (active)"]::after { border-width: 0 !important }
/* відкрито: рамка кнопки без низу — його продовжує каталог */
.uib-sidebar:not(.uib-cat-closed) [data-framer-name="web section (active)"]::after {
  border-width: 1px 1px 0 !important;
  border-radius: 16px 16px 0 0 !important;
}
/* Ховер знято з живого сайту: пігулка лишається на місці, лише радіус
   10 → 14px і тонка тінь 0 1px 1px чорного 10%. Рамки немає. Раніше тут
   була біла картка з тінню 0 2px 8px — вона читалась як окремий блок,
   що вискакує з меню, і саме це не збігалось з оригіналом. */
.uib-sidebar [data-framer-name="dashboard-btn"]:hover [data-framer-name="default"],
.uib-sidebar.uib-cat-closed [data-framer-name="dashboard-btn"]:hover [data-framer-name="web section (active)"] {
  border-radius: 14px !important;   /* grid-ok: радіус ховера знято з оригіналу */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}
/* Єдиний пункт, що на ховері білішає, — кнопка каталогу (в оригіналі
   рядок Dashboard лишається в тон меню). */
.uib-sidebar.uib-cat-closed [data-framer-name="dashboard-btn"]:hover [data-framer-name="web section (active)"] {
  background: #fff !important;
}
/* Відкритий каталог: в оригіналі це ОДНА картка — кнопка стає її верхом
   (закруглені лише верхні кути), а список категорій продовжує її знизу.
   Тому тут ніякого відступу між ними: рамка й тінь спільні. */
.uib-sidebar:not(.uib-cat-closed) [data-framer-name="web section (active)"] {
  background: #fff !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: none !important;
}
.uib-sidebar:not(.uib-cat-closed) [data-framer-name="web section button (active)"] {
  border-radius: 16px 16px 0 0 !important;
}
/* Рамка каталогу: боки й низ — продовження рамки кнопки. */
.uib-sidebar [data-framer-name="open cat"] {
  border-top-width: 0 !important;
  border-color: #eeeef0 !important;
}
.uib-sidebar [data-framer-name="open cat"] {
  margin-top: 0 !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: none;
}
/* Каталог розкривається на всю висоту: у знімку список категорій лежить
   у контейнері з фіксованою висотою й прокруткою, тому останній рядок
   чипів обрізався. */
.uib-sidebar [data-framer-name="sections"] > div:last-child {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
/* Якщо сайдбар не влазить у короткий екран — гортаємо його, а не ховаємо
   вміст під край. */
.uib-sidebar { overflow-y: auto }
/* Чипи й пункти категорій — це посилання з власним фоном (зелений, голубий,
   білий), тому ховер робимо затемненням: працює на будь-якому тоні. */
/* Категорії в сайдбарі: на живому сайті ховер змінює лише колір тексту
   (#62697a → #000), фон лишається прозорим. */
.uib-sidebar a { transition: color 0.16s ease, background-color 0.16s ease }
.uib-sidebar a:hover p { color: #000 !important }
.uib-sidebar a[href="/community"]:hover { background-color: #d8e7ff !important }

.uib-sidebar [data-framer-name="minimize-btn"]:hover { background-color: #f2f3f5; border-radius: 8px }
.uib-sidebar a:hover [data-framer-name="Category Title"] p { color: #0b0b0c }
.uib-sidebar a[href="/community"]:hover [data-framer-name="Category Title"] p { color: #16469c !important }

/* Іконки з SVG-спрайтів: до появи символів браузер розтягував <svg> на
   пів екрана — обмежуємо їх коробкою батька. */
.uib-sidebar svg, .uib-sidebar use { max-width: 100%; max-height: 100% }
.uib-sidebar [data-framer-name="icon"] svg { width: 100%; height: 100% }

/* ================= плавний скрол (Lenis) =================
   Ті самі правила, що радить сама бібліотека: поки вона керує скролом,
   власний scroll-behavior браузера має бути вимкнений, інакше плавність
   б'ється з нативним «стрибком» до якорів. */
html.lenis, html.lenis body { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto !important }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain }
.lenis.lenis-stopped { overflow: hidden }

/* ================= маячок довантаження ================= */
/* Під сіткою дашборда: поки видно — клієнт тягне наступну порцію карток.
   Спінер свій, бо спінер Framer був частиною його CMS-компонента. */
.uib-more {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  height: 64px; margin: 8px 0 0;
}
.uib-more-spin {
  width: 24px; height: 24px; border-radius: 50%;   /* grid-ok: коло спінера */
  border: 2px solid #eeeef0; border-top-color: #9966ff;
  opacity: 0; transition: opacity 0.2s ease;
}
.uib-more[data-state="load"] .uib-more-spin {
  opacity: 1;
  animation: uib-more-spin 0.8s linear infinite;
}
@keyframes uib-more-spin { to { transform: rotate(360deg) } }
.uib-more-retry {
  display: none; height: 40px; padding: 0 24px; border-radius: 999px;
  border: 1px solid #eeeef0; background: #fff; color: #0b0b0c;
  font: 500 14px/20px Geist, Inter, -apple-system, sans-serif; cursor: pointer;
}
.uib-more[data-state="err"] .uib-more-retry { display: inline-flex; align-items: center }
.uib-more-retry:hover { background: #f9fbfc }

/* ================= полотно каталогу ================= */
/* В оригіналі під сторінкою лежить легкий градієнт (#f0f6fa → білий);
   ми робимо полотно білим. Градієнт Framer стоїть і на body, і на корені
   сторінки (клас uib-canvas ставить tools/extract-shell.mjs), тому
   перекриваємо обидва. */
body, .uib-canvas { background: #fff !important }

/* ================= іконка біля назви секції ================= */
/* Замість логотипа Figma для всіх: аватар автора або знак uiblockify. */
[data-framer-name="figma-icon"] {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.uib-avatar, .uib-mark {
  width: 16px; height: 16px; display: block; object-fit: cover;
}
/* Знак у рядку «by …» — 16px, як іконка секції в оригіналі. Раніше він
   стояв окремо злівa від назви картки й був вирівняний по двох рядках. */
.uib-by .uib-avatar, .uib-by .uib-mark { flex: 0 0 16px }
.uib-avatar { border-radius: 999px }   /* grid-ok: коло */
.uib-init {
  display: grid; place-items: center;
  background: #eee6ff; color: #582cb4;
  font: 600 8px/1 Geist, Inter, sans-serif;   /* grid-ok: підпис у колі 16px */
}

/* Наведення на кнопки в каталозі (банер дашборда, CTA у промо-блоках).
   Тон беремо з інлайнового фону, який лишив Framer: чорна кнопка лишається
   чорною й лише світлішає на пару тонів, світла — темнішає до #ebebeb.
   Стрілка в кнопці при цьому зсувається праворуч. */
[data-framer-name="Primary"],
[data-framer-name="Secondary"],
[data-framer-name="button"],
[data-framer-name="btn"] {
  transition: background-color 0.16s ease, color 0.16s ease;
}
/* чорні кнопки: лишаються чорними, текст білий */
[data-framer-name="Primary"][style*="background-color:rgb(0, 0, 0)"]:hover,
[data-framer-name="Primary"][style*="background-color: rgb(0, 0, 0)"]:hover,
[data-framer-name="Secondary"][style*="background-color:rgb(0, 0, 0)"]:hover,
[data-framer-name="Secondary"][style*="background-color: rgb(0, 0, 0)"]:hover {
  background-color: #26262b !important;
}
/* фіолетові — світліший фіолетовий */
[data-framer-name="Primary"][style*="rgb(132, 87, 244)"]:hover,
[data-framer-name="Secondary"][style*="rgb(132, 87, 244)"]:hover {
  background-color: #9a75f7 !important;
}
/* Світлі кнопки — темнішають, текст чорніє. `.uib-user-holder` — це
   кнопка Sign In, у яку підставлено блок користувача: її ховер нам не
   потрібен, бо тоді підсвічувався і футер із копірайтом усередині. */
[data-framer-name="Primary"]:not(.uib-user-holder):not([style*="background-color:rgb(0, 0, 0)"]):not([style*="background-color: rgb(0, 0, 0)"]):not([style*="rgb(132, 87, 244)"]):hover,
[data-framer-name="Secondary"]:not(.uib-user-holder):not([style*="background-color:rgb(0, 0, 0)"]):not([style*="background-color: rgb(0, 0, 0)"]):not([style*="rgb(132, 87, 244)"]):hover {
  background-color: #ebebeb !important;
}
[data-framer-name="Primary"]:not(.uib-user-holder):not([style*="background-color:rgb(0, 0, 0)"]):not([style*="background-color: rgb(0, 0, 0)"]):not([style*="rgb(132, 87, 244)"]):hover p,
[data-framer-name="Secondary"]:not(.uib-user-holder):not([style*="background-color:rgb(0, 0, 0)"]):not([style*="background-color: rgb(0, 0, 0)"]):not([style*="rgb(132, 87, 244)"]):hover p {
  color: #0b0b0c !important;
}
/* стрілка в кнопці їде праворуч */
[data-framer-name="container-btn"] > svg:last-child { transition: transform 0.16s ease }
a:hover > [data-framer-name="container-btn"] > svg:last-child,
button:hover > [data-framer-name="container-btn"] > svg:last-child { transform: translateX(4px) }

/* автор у шапці модалки — злівa, навпроти кнопок */
.uib-modal-author {
  display: flex; align-items: center; gap: 8px; margin-right: auto;
  font: 400 14px/20px Geist, Inter, sans-serif; color: #71717a;
}
.uib-modal-author img, .uib-modal-init {
  width: 24px; height: 24px; border-radius: 999px;   /* grid-ok: коло */
  object-fit: cover; display: grid; place-items: center;
  background: #eee6ff; color: #582cb4; font: 600 12px/1 Geist, Inter, sans-serif;
}
.uib-modal-author b { color: #0b0b0c; font-weight: 500 }

/* ================= блок користувача в сайдбарі ================= */
/* Замінює кнопку Sign In, коли є сесія: аватар, ім'я, email і шеврон;
   розкривається виходом, посиланням на свої секції та ключем ліцензії. */
.uib-user-holder {
  /* Обгортка — це кнопка Sign In із href: кліки й наведення пускаємо
     тільки в сам блок користувача, інакше клац по копірайту вів на
     /signin, а курсор ставав «пальцем» над простим текстом. */
  pointer-events: none;
  display: block !important;
  height: auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  cursor: default;
}
.uib-user-holder::after { display: none !important }
.uib-user-holder .uib-user { pointer-events: auto }
/* Картка — це сам рядок. Раніше фон і 8px падінгу були ще й на обгортці,
   і виходила коробка в коробці: зовнішня світла рамка навколо картки. */
.uib-user {
  background: none;
  /* сайдбар центрує вміст своїх кнопок — нам треба ліворуч */
  align-items: stretch !important;
  text-align: left;
  padding: 0;
  font-family: Geist, Inter, sans-serif;
}
.uib-user-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px; border: 0; background: #f1f3f7; cursor: pointer;
  border-radius: 12px; transition: background-color 0.16s ease;
}
.uib-user-row:hover { background: #e8ebf2 }
/* Відкрито — шеврон дивиться вгору. */
.uib-user[data-open="1"] .uib-user-chev { transform: rotate(180deg) }
.uib-user-pic {
  width: 40px; height: 40px; border-radius: 999px;   /* grid-ok: коло */
  object-fit: cover; flex: 0 0 40px; display: grid; place-items: center;
  background: #eee6ff; color: #582cb4; font: 600 16px/1 Geist, Inter, sans-serif;
}
.uib-user-who { display: flex; flex-direction: column; min-width: 0; flex: 1; align-items: flex-start; text-align: left }
.uib-user-name { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100% }
.uib-user-who b {
  font-size: 16px; line-height: 20px; color: #0b0b0c; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Тариф біля імені: PRO — бузковий, FREE — сірий. */
.uib-user-plan {
  flex: 0 0 auto; padding: 0 8px; border-radius: 8px;
  background: #f4f4f5; color: #71717a;
  font: 600 12px/16px Geist, Inter, sans-serif; letter-spacing: 0.04em;
}
.uib-user-plan[data-plan="pro"] { background: #eee6ff; color: #582cb4 }
.uib-user-who i {
  font-style: normal; font-size: 12px; line-height: 16px; color: #71717a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Закрито — шеврон дивиться вниз, відкрито — вгору (правило вище).
   Раніше в закритому стані він був повернутий на -90° і показував
   праворуч, тобто не читався як «розкрити». */
.uib-user-chev { color: #71717a; flex: 0 0 16px; transition: transform 0.2s ease }
/* Меню — не в потоці, а карткою над рядком: блок стоїть у самому низу
   сайдбара, і його батьки («for user nav», «for-members») обрізають усе,
   що виходить за їхню фіксовану висоту. Спливання вгору знімає і обрізання,
   і стрибок решти сайдбара. */
.uib-user { position: relative }
.uib-user-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px; background: #fff; border: 1px solid #eeeef0;
  border-radius: 16px; box-shadow: 0 12px 32px rgba(11, 11, 12, 0.12);
  z-index: 20;
}
/* CSS Framer розкладає всі div як flex, тому просто [hidden] не спрацьовує */
.uib-user-menu[hidden] { display: none !important }

/* Рядки меню — усі однакові: іконка 16px, підпис, підсвітка на ховері.
   Так само виглядають і «Sign out», і «I have a License Key»: у меню
   акаунта немає головної дії, тому й виділяти щось кольором нема чого. */
.uib-user-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; height: 40px; padding: 0 8px; box-sizing: border-box;
  border: 0; background: none; border-radius: 8px; cursor: pointer;
  font: 400 14px/20px Geist, Inter, sans-serif;
  color: #0b0b0c; text-align: left; text-decoration: none;
  transition: background-color 0.16s ease;
}
.uib-user-item:hover { background: #f4f4f5 }
.uib-user-item svg { flex: 0 0 16px; color: #52525b }
/* Лічильник непрочитаних (повідомлення від адміна) — праворуч у рядку */
.uib-user-count {
  margin-left: auto; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #eee6ff; color: #582cb4;
  font: 600 12px/16px Geist, Inter, sans-serif; text-align: center;
}
.uib-user-sep { height: 1px; margin: 4px 0; background: #eeeef0 }

/* Розділювач і копірайт — окремим блоком під карткою користувача, а не
   впритул до неї: інакше лінія читалась як частина картки. */
.uib-user-foot {
  cursor: default;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid #eeeef0;
  font: 400 12px/16px Geist, Inter, sans-serif;
  color: #8b8b95; text-align: center;
}

/* Блок «Contact us» (підпис, Support і кнопка X) потрібен лише гостю: у
   того, хто увійшов, Support лежить у меню акаунта, і в сайдбарі від
   цього блока лишався самотній значок X під порожнім заголовком.
   Класи ставить paintAuth — по імені шару, а не по хешу Framer. */
.uib-sidebar.uib-has-user [data-framer-name="for-members"] > [data-framer-name="nav title"],
.uib-sidebar.uib-has-user .uib-contact-row {
  display: none !important;
}

/* Обрізання батьків знімаємо, щоб картка меню була видна повністю: кнопку
   Sign In Framer кладе в кілька обгорток із overflow: hidden / clip. */
.uib-sidebar [data-framer-name="for user nav"],
.uib-sidebar [data-framer-name="for-members"],
.uib-sidebar [data-framer-name="for user nav"] *:has(.uib-user),
.uib-user-holder { overflow: visible !important }

/* Рамка фокусу: свій акцент замість синього системного кільця. */
.uib-user-row:focus-visible,
.uib-user-item:focus-visible {
  outline: 2px solid #cbdffd; outline-offset: 2px;
}
.uib-user-row:focus:not(:focus-visible),
.uib-user-item:focus:not(:focus-visible) { outline: none }

/* рядки соцмереж у налаштуваннях профілю */
.uib-acc-linkrows { display: flex; flex-direction: column; gap: 8px }
.uib-acc-linkrow { display: grid; grid-template-columns: 160px minmax(0, 1fr) 48px; gap: 8px }
.uib-acc-linkrow select, .uib-acc-linkrow input {
  font: 400 14px/20px Geist, Inter, sans-serif;
  padding: 8px 12px; border: 1px solid #e4e4e7; border-radius: 8px; width: 100%;
}
.uib-acc-linkrow .uib-acc-btn { padding: 8px }
@media (max-width: 600px) { .uib-acc-linkrow { grid-template-columns: minmax(0, 1fr) 48px } }