/**
 * 🎨 Кабінет бренду — «освіження» (25.09.2026, бета).
 *
 * Єдиний спокійний стиль поверх наявних компонентів: одна висота/радіус кнопок і полів,
 * картки з тонкою рамкою замість важких тіней, KPI без «акцентної планки», сегментні
 * під-вкладки, компактні службові смуги (договір, «Як це працює»).
 *
 * Підключено ПІСЛЯ inline-<style> у frontend/vendor/index.html → ті самі селектори
 * перемагають за порядком. Відкат = прибрати один <link>.
 * Кольори — лише токени (--color-*, --vp-*): темна тема (shared/css/dark.css, з !important)
 * лишається головною для фонів.
 */
:root {
  /* Поверхня картки/сегмента: у темній темі --vp-surface (dark.css), у світлій — білий. НЕ --color-white напряму. */
  --vpr-surface: var(--vp-surface, var(--color-white));
  /* «Магічний» градієнт імпорту/AI (фірмовий, однаковий в обох темах) — ОДНЕ джерело. */
  --vpr-magic: linear-gradient(120deg, #2563eb, #7c3aed 50%, #db2777);
  --vpr-on-magic: #fff;
  --vpr-radius: 14px;
  --vpr-radius-sm: 10px;
  --vpr-line: color-mix(in srgb, var(--color-border) 85%, transparent);
  --vpr-shadow: 0 1px 2px rgba(44, 36, 21, .05), 0 1px 1px rgba(44, 36, 21, .03);
  --vpr-shadow-hover: 0 6px 18px rgba(44, 36, 21, .08);
  --vpr-accent-soft: color-mix(in srgb, var(--color-accent) 9%, transparent);
  --vpr-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* ─── Типографіка ─────────────────────────────────────────────── */
.vp-page-header h1 { font-size: 1.6rem; letter-spacing: -.01em; line-height: 1.15; }
/* Заголовки всередині карток — робочий шрифт, не дисплейний: спокійніше й читабельніше. */
.vp-card h2 { font-family: var(--font-body); font-weight: 700; font-size: 1.14rem; letter-spacing: -.005em; line-height: 1.3; }
.vp-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; letter-spacing: -.005em; line-height: 1.3; }

/* ─── Картки ──────────────────────────────────────────────────── */
.vp-card {
  border-radius: var(--vpr-radius);
  border: 1px solid var(--vpr-line);
  box-shadow: var(--vpr-shadow);
  padding: 20px;
  margin-bottom: 16px;
}

/* ─── KPI-плитки: без кольорової планки зліва, одна рамка як у карток ─── */
.vp-kpi-grid { gap: 12px; }
.vp-kpi {
  border-radius: var(--vpr-radius);
  border: 1px solid var(--vpr-line);
  border-left-width: 1px;
  box-shadow: var(--vpr-shadow);
  padding: 14px 16px;
}
.vp-kpi__label { font-size: 0.7rem; letter-spacing: .06em; }
.vp-kpi__value { font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ─── Кнопки ──────────────────────────────────────────────────── */
.vp-btn {
  border-radius: var(--vpr-radius-sm);
  border-width: 1px;
  padding: 9px 16px;
  min-height: 40px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  justify-content: center;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}
.vp-btn:focus-visible { outline: none; box-shadow: var(--vpr-ring); }
.vp-btn--outline {
  background: var(--vpr-surface);
  color: var(--color-accent-ink);
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-border));
}
.vp-btn--outline:hover { background: var(--vpr-accent-soft); border-color: var(--color-accent); color: var(--color-accent-ink); }
.vp-btn--danger { border-color: color-mix(in srgb, var(--vp-danger) 45%, var(--color-border)); }
.vp-btn--ghost { box-shadow: none; }
.vp-btn--sm { min-height: 32px; padding: 6px 12px; font-size: 0.8rem; border-radius: 9px; }

/* ─── Поля ────────────────────────────────────────────────────── */
.vp-input, .vp-textarea, .vp-select {
  border-width: 1px;
  border-radius: var(--vpr-radius-sm);
  padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.vp-input, .vp-select { min-height: 42px; }
.vp-input:focus, .vp-textarea:focus, .vp-select:focus { border-color: var(--color-accent); box-shadow: var(--vpr-ring); }
.vp-formgroup label { font-size: 0.8rem; font-weight: 600; margin-bottom: 5px; }

/* ─── Під-вкладки: сегмент-контрол (білий «повзунок» на пісочній доріжці) ─── */
.vp-subtabs {
  background: color-mix(in srgb, var(--color-border) 55%, var(--color-bg));
  box-shadow: none;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.vp-subtab { border-radius: 9px; font-weight: 600; }
.vp-subtab:hover { background: color-mix(in srgb, var(--vpr-surface) 55%, transparent); }
.vp-subtab.active,
.vp-subtab.active:hover {
  background: var(--vpr-surface);
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(44, 36, 21, .12);
}

/* ─── Callout-и ───────────────────────────────────────────────── */
.vp-note { border-radius: 12px; }

/* ─── «❓ Як це працює» — тихий рядок, а не ще одна картка ──────── */
.vp-help.vp-tour-inline { margin: 0 0 14px; }
.vp-help.vp-tour-inline > summary {
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.vp-help.vp-tour-inline[open] > summary { border-style: solid; border-radius: 10px 10px 0 0; color: var(--color-text); }

/* ─── Банер нової редакції договору — одним рядком ─────────────── */
.vp-contract-announce.vp-card {
  border: 1px solid var(--vp-warning-border, var(--color-border));
  border-left: 3px solid var(--vp-warning, #f59e0b);
  box-shadow: none;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
}
.vp-contract-announce > summary strong { font-size: 0.86rem !important; font-weight: 700; }

/* ─── Таблиці ─────────────────────────────────────────────────── */
.vp-table th { font-size: 0.72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; }

/* ─── Телефон ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .vp-card { padding: 16px 14px; border-radius: 14px; }
  .vp-kpi { padding: 11px 13px; }
  .vp-kpi__value { font-size: 1.28rem; }
  .vp-page-header h1 { font-size: 1.35rem; }
  .vp-btn { min-height: 44px; }
  .vp-btn--sm { min-height: 36px; }
  .vp-input, .vp-select { min-height: 44px; }

  /* Конструктор анкети: назва блоку на весь рядок, кнопки ▲▼🗑 — другим рядком праворуч */
  .cf-block__head { flex-wrap: wrap; row-gap: 8px; }
  .cf-block__head .cf-block__title { flex: 1 1 calc(100% - 44px) !important; min-width: 0; }
  .cf-block__head .cf-ibtn:first-of-type { margin-left: auto; }

  /* Замовлення (картки): головна дія не обрізається «Підтвердив — п…» — переносимо у 2 рядки */
  .vp-oc-acts > .vp-btn { white-space: normal !important; line-height: 1.15 !important; text-overflow: clip !important;
    padding-top: 5px !important; padding-bottom: 5px !important; display: flex !important; align-items: center; justify-content: center; }

  /* Банер договору: без «· детальніше», коротко й в один-два рядки */
  .vp-contract-announce > summary strong { font-size: 0.8rem !important; line-height: 1.3 !important; }
  .vp-contract-announce > summary strong > span { display: none; }
  .vp-contract-announce > summary .vp-btn { min-height: 34px; padding: 6px 12px; }

}

/* ─── Налаштування: другий рядок під «💳 Оплата» ─────────────── */
.vp-subtabs[hidden] { display: none !important; }
.vp-subtabs.vp-subtabs--kids { background: transparent; padding: 0; margin-top: -8px; gap: 6px; }
.vp-subtabs--kids .vp-subtab { border: 1px solid var(--color-border); background: var(--vpr-surface); padding: 6px 12px; font-size: 0.8rem; border-radius: 999px; }
.vp-subtabs--kids .vp-subtab.active,
.vp-subtabs--kids .vp-subtab.active:hover { background: var(--vpr-accent-soft); color: var(--color-accent-ink); border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); box-shadow: none; }
.vp-kpi-grid[hidden] { display: none !important; }

/* ─── Акції: «➕ Новий промокод» — кнопка, що розгортає форму ─── */
.vpr-newpromo > summary::-webkit-details-marker { display: none; }
.vpr-newpromo:not([open]) { background: none !important; border: 0; box-shadow: none; padding: 0; margin-bottom: 14px; }
.vpr-newpromo[open] > summary { background: var(--vpr-surface); color: var(--color-accent-ink); border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-border)); }

/* ─── Аналітика: непарна остання KPI-плитка на телефоні — на всю ширину (не висить сама) ─── */
@media (max-width: 600px) {
  #vp-anl-kpi { grid-template-columns: 1fr 1fr !important; }
  #vp-anl-kpi > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ─── Під-вкладки на ПК — на всю ширину, рівними частинами (обидва рядки) ─── */
@media (min-width: 601px) {
  .vp-subtabs { display: flex; flex-wrap: nowrap; }
  .vp-subtabs > .vp-subtab { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; white-space: nowrap; }
  .vp-subtabs--kids > .vp-subtab { flex: 1 1 0; }
}

/* ═══ Огляд → Головне (25.09) ═══════════════════════════════════ */
/* Швидкі дії — великі плитки на всю ширину (4 в ряд; телефон — 2×2) */
.vpr-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.vpr-quick > .vpr-qa { justify-content: flex-start; gap: 12px; min-height: 64px; padding: 12px 16px; text-align: left; border-radius: var(--vpr-radius); }
.vpr-qa__ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.vpr-qa__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vpr-qa__t b { font-size: 0.95rem; line-height: 1.2; }
.vpr-qa__t small { font-size: 0.74rem; font-weight: 500; opacity: .75; line-height: 1.25; white-space: normal; }
@media (max-width: 900px) { .vpr-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 600px) {
  .vpr-quick > .vpr-qa { min-height: 58px; padding: 10px 12px; gap: 10px; }
  .vpr-qa__ic { width: 34px; height: 34px; font-size: 1.1rem; }
  .vpr-qa__t small { display: none; }
}
/* Іконка поради/задачі — у тонованому кружечку кольору картки (--rec) */
.vpr-rec__ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; line-height: 1; background: color-mix(in srgb, var(--rec, var(--color-accent)) 13%, transparent); }
.vpr-rec { transition: box-shadow .15s, border-color .15s; }
.vpr-rec:hover { box-shadow: var(--vpr-shadow-hover); border-color: color-mix(in srgb, var(--rec, var(--color-accent)) 35%, var(--color-border)); }
/* «Потрібна ваша дія» — список рядків */
.vpr-todo[hidden] { display: none !important; }
.vpr-todo__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--vpr-line); }
.vpr-todo__row:first-child { border-top: none; }
.vpr-todo__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vpr-todo__t b { font-size: 0.92rem; }
.vpr-todo__t span { font-size: 0.8rem; color: var(--color-text-muted); }
.vpr-todo__x { border: none; background: none; color: var(--color-text-muted); font-size: 1.1rem; cursor: pointer; opacity: .55; padding: 4px 6px; line-height: 1; }
.vpr-todo__x:hover { opacity: 1; }
@media (max-width: 600px) {
  .vpr-todo__row { gap: 10px; }
  .vpr-todo__lbl { display: none; }
  .vpr-todo__row > .vp-btn { min-width: 44px; min-height: 40px; padding: 0 12px; font-size: 1rem; }
  .vpr-todo__x { padding: 4px 2px; }
  /* Поради-стрічка: кожна картка своєї висоти (не тягнеться до найвищої) */
  #vp-recs-grid { align-items: flex-start !important; }
  #vp-recs-grid .vpr-rec__txt { flex: none !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Готовність: виконане згорнуто */
.vpr-done { margin-top: 8px; }
.vpr-done > summary { cursor: pointer; list-style: none; font-size: 0.82rem; font-weight: 600; color: var(--vp-success-fg, #15803d); padding: 4px 0; }
.vpr-done > summary::-webkit-details-marker { display: none; }
.vpr-done > summary::after { content: ' ▾'; color: var(--color-text-muted); }
.vpr-done[open] > summary::after { content: ' ▴'; }

/* ═══ Комісія та розрахунки — одна картка балансу ═══ */
.vpr-bal__main { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.vpr-bal__lbl { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); }
.vpr-bal__sum { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--vp-success-fg, #15803d); line-height: 1.15; }
.vpr-bal.is-debt .vpr-bal__sum { color: var(--vp-danger); }
.vpr-bal__hint { font-size: 0.84rem; color: var(--color-text-muted); margin-top: 2px; }
.vpr-bal__extra { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vpr-line); font-size: 0.84rem; color: var(--color-text-muted); }
.vpr-bal__extra b { color: var(--color-text); }

/* ═══ Просування: на телефоні ціна й «Оформити Platinum» — одразу під назвою ═══ */
@media (max-width: 600px) {
  .vpr-plat-cta { order: -1; width: 100%; text-align: left !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .vpr-plat-cta > .vp-btn { margin-top: 0 !important; }
  .vpr-plat-cta > div:first-child { margin-right: auto; }
}

/* ═══ Помічник: розділи — як решта карток кабінету ═══ */
.vp-helper-section { border: 1px solid var(--vpr-line); box-shadow: var(--vpr-shadow) !important; border-radius: var(--vpr-radius) !important; }
.vp-helper-section > summary { font-family: var(--font-body) !important; font-weight: 700; font-size: 1rem !important; }
.vp-helper-section > summary::-webkit-details-marker { display: none; }
#vp-tab-content h3 { font-family: var(--font-body); font-weight: 700; letter-spacing: -.005em; }

/* ═══ Огляд: 4 цифри одним рядком ═══ */
.vpr-kpis { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 0 0 16px; background: var(--vpr-surface);
  border: 1px solid var(--vpr-line); border-radius: var(--vpr-radius); box-shadow: var(--vpr-shadow); overflow: hidden; }
.vpr-kpis > div { flex: 1 1 0; min-width: 110px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--vpr-line); }
.vpr-kpis > div span { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.vpr-kpis > div b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.vpr-kpis__more { align-self: center; padding: 0 16px; font-size: 0.8rem; font-weight: 600; color: var(--color-accent-ink); text-decoration: none; white-space: nowrap; }
.vpr-kpis__more:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .vpr-kpis > div { flex: 1 1 45%; border-bottom: 1px solid var(--vpr-line); padding: 10px 12px; }
  .vpr-kpis > div:nth-child(2n) { border-right: none; }
  .vpr-kpis__more { flex: 1 1 100%; padding: 10px 12px; text-align: center; }
}

/* ═══ Вікно «Імпорт товару» — спокійне, в стилі кабінету ═══ */
.vp-imp { background: var(--vpr-surface); color: var(--color-text); max-width: 560px; width: 100%; border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35); max-height: 92vh; overflow-y: auto; overflow-x: hidden; }
.vp-imp__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 6px; }
.vp-imp__head > div { flex: 1; min-width: 0; }
.vp-imp__head h3 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 700; font-family: var(--font-body); }
.vp-imp__head p { margin: 0; font-size: 0.86rem; color: var(--color-text-muted); line-height: 1.5; }
.vp-imp__x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--color-bg); color: var(--color-text-muted);
  font-size: 1.2rem; line-height: 1; cursor: pointer; }
.vp-imp__x:hover { color: var(--color-text); }
.vp-imp__body { padding: 14px 22px 20px; }
.vp-imp__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px;
  background: color-mix(in srgb, var(--color-border) 55%, var(--color-bg)); margin-bottom: 12px; }
.vp-imp-tab { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border: none; border-radius: 9px;
  background: transparent; color: var(--color-text-muted); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.vp-imp-tab:hover { color: var(--color-text); }
.vp-imp-tab.is-on { background: var(--vpr-surface); color: var(--color-text); box-shadow: 0 1px 3px rgba(44,36,21,.12); }
.vp-imp__tip { font-size: 0.85rem; line-height: 1.55; color: var(--color-text-muted); margin: 0 2px 12px; min-height: 2.6em; }
.vp-imp__tip b { color: var(--color-text); }
.vp-imp__bulk { margin-top: 16px; border-top: 1px solid var(--vpr-line); padding-top: 12px; }
.vp-imp__bulk > summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--color-text-muted); }
@media (max-width: 600px) {
  .vp-imp__tabs { grid-template-columns: 1fr 1fr; }
  .vp-imp__head { padding: 18px 16px 4px; }
  .vp-imp__body { padding: 12px 16px 18px; }
}
body:has(#vp-url-modal) #vp-admin-fab { display: none !important; }   /* кнопка чату не лізе поверх вікна імпорту */
/* Імпорт: власнику подобалась яскрава шапка — повертаємо градієнт (решта вікна спокійна) */
.vp-imp__head { background: var(--vpr-magic); color: var(--vpr-on-magic); padding: 20px 22px 18px; }
.vp-imp__head p { color: color-mix(in srgb, var(--vpr-on-magic) 90%, transparent); }
.vp-imp__x { background: color-mix(in srgb, var(--vpr-on-magic) 20%, transparent); color: var(--vpr-on-magic); }
.vp-imp__x:hover { color: var(--vpr-on-magic); background: color-mix(in srgb, var(--vpr-on-magic) 30%, transparent); }
.vp-imp__body { padding-top: 16px; }
#vp-url-go { background: var(--vpr-magic); border: none; color: var(--vpr-on-magic); box-shadow: 0 6px 18px rgba(124,58,237,.3); }
#vp-url-go:hover { filter: brightness(1.07); }
.vp-imp-tab.is-on { color: var(--vp-purple); }

/* ═══ Огляд → Головне: інформативні блоки (лише токени — темна тема підхоплює) ═══ */
.vpr-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.vpr-grid2 > .vp-card { margin: 0; }
@media (max-width: 900px) { .vpr-grid2 { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; } }
.vpr-h { margin: 0 0 8px !important; font-size: 1.02rem !important; }
.vpr-hrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.vpr-more { font-size: 0.8rem; font-weight: 600; color: var(--color-accent-ink); text-decoration: none; white-space: nowrap; }
.vpr-more:hover { text-decoration: underline; }
.vpr-empty { font-size: 0.86rem; color: var(--color-text-muted); padding: 10px 0 4px; }
.vpr-list { list-style: none; margin: 0; padding: 0; }
.vpr-list > li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--vpr-line); font-size: 0.88rem; }
.vpr-list > li:first-child { border-top: none; }
.vpr-list__n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.74rem; font-weight: 700; background: var(--vpr-accent-soft); color: var(--color-accent-ink); }
.vpr-list__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpr-list__m { color: var(--color-text-muted); font-size: 0.8rem; white-space: nowrap; }
.vpr-list > li > b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vpr-list--orders > li { cursor: pointer; border-radius: 8px; }
.vpr-list--orders > li:hover { background: var(--vpr-accent-soft); }
.vpr-list--orders .vp-obadge { flex: none; }
@media (max-width: 600px) { .vpr-list--orders .vp-obadge { display: none; } }
/* Тренд і міні-графік у рядку цифр */
.vpr-trend { font-style: normal; font-size: 0.72rem; font-weight: 700; margin-left: 4px; color: var(--color-text-muted); vertical-align: middle; }
.vpr-trend.is-up { color: var(--vp-success-fg); }
.vpr-trend.is-down { color: var(--vp-danger-fg, var(--vp-danger)); }
.vpr-spark { display: block; width: 100%; max-width: 140px; height: 26px; margin-top: 4px; color: var(--color-accent); opacity: .85; }
/* Швидкість відповіді */
.vpr-resp { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; }
.vpr-resp b { font-size: 1.7rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vpr-resp span { font-size: 0.84rem; color: var(--color-text-muted); }
.vpr-resp.is-ok b { color: var(--vp-success-fg); }
.vpr-resp.is-mid b { color: var(--vp-warning-fg); }
.vpr-resp.is-bad b { color: var(--vp-danger-fg, var(--vp-danger)); }
.vpr-resp__sub { font-size: 0.82rem; color: var(--color-text-muted); }
.vpr-resp__note { font-size: 0.82rem; margin-top: 8px; line-height: 1.5; }
/* Огляд: інформаційні картки не «підскакують» і не підсвічуються при наведенні (це не кнопки); кожна — своєї висоти */
.vpr-grid2 { align-items: start; }
.vp-content .vpr-grid2 > .vp-card:hover { transform: none !important; box-shadow: var(--vpr-shadow) !important; border-color: var(--vpr-line) !important; background: var(--vpr-surface); }
:root[data-theme^="dark"] .vp-content .vpr-grid2 > .vp-card:hover { background: var(--vp-surface) !important; }

/* ═══ Огляд: права колонка — дві картки одна під одною ═══ */
.vpr-stack { display: flex; flex-direction: column; gap: 16px; }
.vpr-stack > .vp-card { margin: 0; }
.vp-content .vpr-stack > .vp-card:hover { transform: none !important; box-shadow: var(--vpr-shadow) !important; border-color: var(--vpr-line) !important; }
:root[data-theme^="dark"] .vp-content .vpr-stack > .vp-card:hover, :root[data-theme^="dark"] .vp-content .vpr-todo:hover { background: var(--vp-surface) !important; }
.vp-content .vpr-todo:hover { transform: none !important; box-shadow: var(--vpr-shadow) !important; border-color: var(--vpr-line) !important; }
.vpr-todo { margin-bottom: 16px; }
@media (max-width: 900px) { .vpr-stack { gap: 12px; } }

/* ═══ Спільне для вкладок у стилі «Замовлень» ═══ */
.vpr-muted { color: var(--color-text-muted); }
.vpr-hot { color: var(--vp-warning-fg); }
.vpr-bar { display: block; height: 6px; border-radius: 4px; background: var(--color-border); overflow: hidden; margin-top: 4px; }
.vpr-bar > i { display: block; height: 100%; background: var(--color-accent); }
/* Стан форми інд. замовлень — одним рядком */
.vpr-formline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 14px;
  border: 1px solid var(--vpr-line); border-radius: 12px; background: var(--vpr-surface); font-size: 0.86rem; }
.vpr-formline__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--color-text-muted); }
.vpr-formline.is-live .vpr-formline__dot { background: var(--vp-success); }
.vpr-formline__t { flex: 1; min-width: 200px; }
/* Продажі квитків — рядки подій */
.vpr-evlist { padding: 4px 18px !important; }
.vpr-evrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) auto 14px; gap: 14px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--vpr-line); cursor: pointer; }
.vpr-evrow:first-child { border-top: none; }
.vpr-evrow:hover .vpr-evrow__main b { color: var(--color-accent-ink); }
.vpr-evrow__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vpr-evrow__main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpr-evrow__main span, .vpr-evrow__num span { font-size: 0.78rem; color: var(--color-text-muted); }
.vpr-evrow__seats { font-size: 0.8rem; min-width: 0; }
.vpr-evrow__num { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.vpr-evrow__go { color: var(--color-text-muted); font-size: 1.2rem; }
@media (max-width: 600px) {
  .vpr-evlist { padding: 2px 14px !important; }
  .vpr-evrow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .vpr-evrow__seats { grid-column: 1 / -1; grid-row: 2; }
  .vpr-evrow__go { display: none; }
}
/* Питання про товари */
.vpr-pq { margin-bottom: 12px; }
.vpr-pq.is-open { border-left: 3px solid var(--vp-warning); }
.vpr-pq__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 0.8rem; }
.vpr-pq__prod { color: var(--color-accent-ink); font-weight: 600; text-decoration: none; }
.vpr-pq__prod:hover { text-decoration: underline; }
.vpr-pq__q { font-weight: 600; font-size: 0.98rem; line-height: 1.45; margin-top: 8px; }
.vpr-pq__who { font-size: 0.76rem; color: var(--color-text-muted); margin-top: 2px; }
.vpr-pq__a { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--vpr-accent-soft); }
.vpr-pq__atext { font-size: 0.92rem; line-height: 1.5; }
.vpr-pq__ameta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.74rem; font-weight: 600; color: var(--color-accent-ink); margin-top: 4px; }
.vpr-pq__acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* Форма інд.: довідки під перемикачем — щільно */
.vpr-helpstack { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.vpr-helpstack > * { margin: 0 !important; }

/* ═══ Форма індивідуальних замовлень (25.09) — лише токени теми ═══ */
.cf-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.cf-steps { flex: 1 1 420px; display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.cf-steps li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--vpr-line); background: var(--vpr-surface); min-width: 0; }
.cf-steps b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
  background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.cf-steps span { display: flex; flex-direction: column; font-size: 0.86rem; font-weight: 700; min-width: 0; }
.cf-steps small { font-size: 0.74rem; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-steps li.is-done b { background: var(--vp-success); border-color: var(--vp-success); color: var(--vpr-on-magic); }
.cf-steps li.is-now { border-color: var(--color-accent); box-shadow: var(--vpr-ring); }
.cf-steps li.is-now b { background: var(--color-accent); border-color: var(--color-accent); color: var(--vpr-on-magic); }
.cf-steps li.is-bad { border-color: var(--vp-danger); }
.cf-steps li.is-bad b { background: var(--vp-danger); border-color: var(--vp-danger); color: var(--vpr-on-magic); }
.cf-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: 0.9rem; padding: 10px 14px;
  border: 1px solid var(--vpr-line); border-radius: 12px; background: var(--vpr-surface); position: relative; }
.cf-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cf-toggle__ui { width: 40px; height: 22px; border-radius: 999px; background: var(--color-border); position: relative; transition: background .15s; flex: none; }
.cf-toggle__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--vpr-surface); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.cf-toggle input:checked + .cf-toggle__ui { background: var(--vp-success); }
.cf-toggle input:checked + .cf-toggle__ui::after { transform: translateX(18px); }
.cf-toggle input:focus-visible + .cf-toggle__ui { box-shadow: var(--vpr-ring); }
.cf-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 20px; align-items: start; }
.cf-prev { position: sticky; top: 16px; border: 1px solid var(--vpr-line); border-radius: var(--vpr-radius); background: var(--vpr-surface); box-shadow: var(--vpr-shadow); overflow: hidden; }
.cf-prev__head { padding: 10px 14px; font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); border-bottom: 1px solid var(--vpr-line); background: var(--color-bg); }
.cf-prev__body { padding: 14px; max-height: 70vh; overflow-y: auto; font-size: 0.86rem; }
.cf-prev__empty { color: var(--color-text-muted); text-align: center; padding: 24px 8px; line-height: 1.5; }
.cf-prev__intro { margin: 0 0 12px; line-height: 1.5; }
.cf-prev__blk { margin-bottom: 14px; }
.cf-prev__bt { font-weight: 700; font-size: 0.92rem; margin-bottom: 8px; }
.cf-prev__f { margin-bottom: 10px; }
.cf-prev__lab { font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; }
.cf-prev__req { color: var(--vp-danger); font-style: normal; }
.cf-prev__in { min-height: 34px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text-muted); font-size: 0.8rem; background: var(--color-bg); }
.cf-prev__in--ta { min-height: 60px; }
.cf-prev__in--sel::after { content: " ▾"; float: right; }
.cf-prev__chk { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; }
.cf-prev__chk span { width: 16px; height: 16px; border: 1.5px solid var(--color-border); border-radius: 4px; }
.cf-prev__pal { display: flex; gap: 6px; flex-wrap: wrap; }
.cf-prev__pal span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--vpr-surface); box-shadow: 0 0 0 1px var(--color-border); }
.cf-prev__cards { display: flex; gap: 6px; flex-wrap: wrap; }
.cf-prev__cards span { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 10px; font-size: 0.8rem; }
.cf-prev__btn { margin-top: 6px; text-align: center; padding: 10px; border-radius: 10px; background: var(--color-accent); color: var(--vpr-on-magic); font-weight: 700; font-size: 0.86rem; }
@media (max-width: 1000px) { .cf-cols { grid-template-columns: 1fr; } .cf-prev { position: static; } .cf-prev__body { max-height: none; } }
.cf-addf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--color-border); }
.cf-addf > span { font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); margin-right: 2px; }
.cf-addf__b { border: 1px solid var(--color-border); background: var(--vpr-surface); color: var(--color-text); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 0.8rem; cursor: pointer; }
.cf-addf__b:hover { border-color: var(--color-accent); color: var(--color-accent-ink); }
.cf-tpl { border: 1px dashed color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); border-radius: var(--vpr-radius); padding: 14px 16px; margin: 0 0 16px; background: var(--vpr-accent-soft); }
.cf-tpl__h { font-size: 0.9rem; margin-bottom: 10px; }
.cf-tpl__h span { color: var(--color-text-muted); }
.cf-tpl__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cf-tpl__b { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--vpr-line); border-radius: 12px; background: var(--vpr-surface); color: var(--color-text); font: inherit; font-weight: 600; font-size: 0.86rem; cursor: pointer; text-align: left; }
.cf-tpl__b span { font-size: 1.3rem; }
.cf-tpl__b:hover { border-color: var(--color-accent); }
@media (max-width: 700px) { .cf-tpl__grid { grid-template-columns: 1fr 1fr; } }
.cf-badge { font-size: 0.8rem; color: var(--color-text-muted); background: var(--color-bg); padding: 4px 10px; border-radius: 20px; }
.cf-save { position: sticky; bottom: 0; margin-top: 18px; padding: 12px 0; background: linear-gradient(transparent, var(--color-bg) 30%); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; z-index: 5; }
@media (max-width: 600px) { .cf-steps { flex-direction: column; } .cf-toggle { width: 100%; justify-content: space-between; } }

/* ═══ Івенти: редактор (25.09) ═══ */
.ev-ed-tabs { margin: 0 0 14px !important; }
.ev-next { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.ev-more { margin: 0 0 14px; border: 1px solid var(--vpr-line); border-radius: var(--vpr-radius); background: var(--vpr-surface); }
.ev-more > summary { cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 700; font-size: 0.95rem; display: flex; flex-direction: column; gap: 3px; }
.ev-more > summary::-webkit-details-marker { display: none; }
.ev-more > summary span { font-size: 0.78rem; font-weight: 500; color: var(--color-text-muted); }
.ev-more > summary::after { content: "▾"; position: absolute; right: 16px; color: var(--color-text-muted); }
.ev-more { position: relative; }
.ev-more[open] > summary { border-bottom: 1px solid var(--vpr-line); margin-bottom: 12px; }
.ev-more[open] > summary::after { content: "▴"; }
.ev-more > .vp-card { margin: 0 12px 12px !important; box-shadow: none; }
.ev-savebar { position: sticky; bottom: 0; z-index: 6; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 0;
  background: linear-gradient(transparent, var(--color-bg) 30%); }
.vp-otabs[hidden], .vp-otool[hidden] { display: none !important; }

/* Форма інд.: «Корисно знати» — помітніше (заголовок, контрастні рядки) */
.cf-help__h { margin: 4px 2px 2px !important; font-size: 1rem !important; }
.cf-help > .vp-chrome-card, .cf-help > details { border: 1px solid var(--color-border) !important; background: var(--vpr-surface) !important; }
.cf-help > details > summary { color: var(--color-text) !important; font-weight: 700; }
.cf-help > details > summary:hover { color: var(--color-accent-ink) !important; }
.cf-tpl__grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; }

/* Головна дія сторінки (напр. «➕ Новий івент») — помітна */
.vpr-cta { min-height: 44px; padding: 10px 20px; font-size: 0.95rem; font-weight: 700; box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.vp-otabs__lbl { align-self: center; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); margin-right: 4px; white-space: nowrap; }

/* ═══ Наведення (25.09, власник: «підсвічується вся картка, а не рядок») ═══
   Картки-контейнери кабінету НЕ піднімаються й не фарбуються при наведенні (це не кнопки).
   Натомість підсвічується конкретний рядок у списку, на який наведено мишку. */
.vp-content .vp-card:hover, .vp-content .vp-kpi:hover {
  transform: none !important; box-shadow: var(--vpr-shadow) !important; border-color: var(--vpr-line) !important;
}
:root[data-theme^="dark"] .vp-content .vp-card:hover,
:root[data-theme^="dark"] .vp-content .vp-kpi:hover { background: var(--vp-surface) !important; }
/* поради на Огляді — лишаємо легкий акцент (картка = дія) */
.vp-content .vpr-rec:hover { border-color: color-mix(in srgb, var(--rec, var(--color-accent)) 35%, var(--color-border)) !important; box-shadow: var(--vpr-shadow-hover) !important; }
/* Рядки списків — ось що підсвічується */
.vpr-evrow, .vpr-tk, .vpr-list--orders > li { transition: background .12s; }
.vpr-evrow:hover, .vpr-list--orders > li:hover { background: var(--vpr-accent-soft); }
.vpr-evrow { margin: 0 -18px; padding-left: 18px !important; padding-right: 18px !important; }
.ev-row:hover { background: var(--vpr-accent-soft); }

/* ═══ Учасники події — картки ═══ */
.vpr-tk { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) auto; gap: 6px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--vpr-line); }
.vpr-tk:first-of-type, .vpr-tklist > .vpr-tk:first-child { border-top: none; }
.vpr-tk:hover { background: var(--vpr-accent-soft); }
.vpr-tk__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vpr-tk__who span { font-size: 0.8rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.vpr-tk__ans { color: var(--color-text) !important; }
.vpr-tk__pay { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.8rem; }
.vpr-tk__sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 0.8rem; white-space: nowrap; }
.vpr-tk__sum b { font-size: 0.95rem; }
.vpr-tk__acts { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 0.8rem; }
.vpr-tk__acts:empty { display: none; }
.vpr-tklist, .vpr-pendtr { padding-top: 6px !important; padding-bottom: 6px !important; }
.vpr-pendtr { border-left: 3px solid var(--vp-warning) !important; }
.vpr-pendtr .vpr-h { margin-top: 10px !important; }
@media (max-width: 600px) {
  .vpr-tk { grid-template-columns: minmax(0, 1fr) auto; }
  .vpr-tk__pay { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .vpr-tk__sum { grid-row: 1; grid-column: 2; }
}
@media (max-width: 600px) { .vpr-evrow { margin: 0 -14px; padding-left: 14px !important; padding-right: 14px !important; } }

/* ═══ Івенти: рядок — кнопки праворуч у тому ж ряду (ПК), під назвою (телефон) ═══ */
@media (min-width: 761px) {
  .ev-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
  .ev-row__head { grid-column: 1; align-items: center; }
  .ev-row__actions { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
  .ev-row__actions > div { justify-content: flex-end; }
  .ev-row > .vp-note { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .ev-row__actions { padding-left: 68px; } }
@media (max-width: 420px) { .ev-row__actions { padding-left: 0; } }

/* ═══ «Написати клієнту» над анкетою інд. замовлення ═══ */
.vp-cbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.vp-cbar__l { font-size: 0.8rem; color: var(--color-text-muted); margin-right: 2px; }
.vp-cbar .vp-btn { text-decoration: none; }

/* ═══ Сторінка однієї події (продажі + учасники) ═══ */
.vp-oback-lite { background: none; border: 0; padding: 4px 0; margin: 0 0 6px; color: var(--color-text-muted); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.vp-oback-lite:hover { color: var(--color-accent-ink, var(--color-accent)); }
.vpr-evhead { align-items: flex-start !important; }
.vpr-evhead__t { flex: 1 1 320px; min-width: 0; }
.vpr-evhead__t h1 { margin: 0 0 6px; overflow-wrap: anywhere; }
.vpr-evhead__m { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 0.86rem; color: var(--color-text-muted); }
.vpr-evhead__a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vpr-evhead__a a.vp-btn { text-decoration: none; }
.vpr-evkpis > div small { font-size: 0.76rem; }
.vpr-evkpis .vpr-bar { margin-top: 6px; }
.vpr-evchart { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding-top: 6px; }
.vpr-evchart__c { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.vpr-evchart__c i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--color-accent); }
.vpr-evchart__c i.is-0 { background: var(--vpr-line); }
.vpr-evchart__c:hover i { filter: brightness(1.15); }
.vpr-evchart__ax { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--color-text-muted); margin-top: 4px; }
.vpr-evtools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vpr-tklist .vp-otabs { margin-bottom: 8px; }
.vpr-tk__cs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.vpr-tk__c { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid var(--vpr-line); border-radius: 999px; font-size: 0.76rem; font-weight: 600; color: var(--color-text); text-decoration: none; }
.vpr-tk__c:hover { border-color: var(--color-accent); color: var(--color-accent-ink, var(--color-accent)); }
.vpr-evchart__c i { max-width: 34px; margin: 0 auto; }
details.vpr-recent > summary { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1rem; }
details.vpr-recent > summary::-webkit-details-marker { display: none; }
details.vpr-recent > summary::before { content: '▸'; color: var(--color-text-muted); transition: transform .15s; }
details.vpr-recent[open] > summary::before { transform: rotate(90deg); }
details.vpr-recent[open] > summary { margin-bottom: 10px; }

/* ═══ 🧭 Напрями анкети («Що замовляєте?») ═══ */
.cf-dirs__start { display: block; width: 100%; text-align: left; margin: 0 0 14px; padding: 11px 14px; border: 1px dashed var(--vpr-line); border-radius: 12px; background: none; color: var(--color-text-muted); font: inherit; font-size: 0.86rem; cursor: pointer; }
.cf-dirs__start b { color: var(--color-accent-ink, var(--color-accent)); }
.cf-dirs__start:hover { border-color: var(--color-accent); }
.cf-dirs { margin: 0 0 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--color-accent) 40%, var(--vpr-line)); border-radius: 14px; background: var(--vpr-accent-soft); }
.cf-dirs__h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.cf-dirs__h span { font-size: 0.8rem; color: var(--color-text-muted); }
.cf-dirs__row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cf-dirs__row input { flex: 1 1 auto; min-width: 0; }
.cf-builder .cf-dirs__row input.cf-dirs__em { flex: 0 0 56px; width: 56px; text-align: center; padding-left: 4px; padding-right: 4px; }
.cf-dirs__n { flex: 0 0 auto; font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; }
.cf-dirs__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.cf-dirs__warn { font-size: 0.78rem; color: var(--vp-warning-fg); }
.cf-block__for { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--color-border); background: var(--vpr-accent-soft); font-size: 0.82rem; color: var(--color-text-muted); }
.cf-builder .cf-block__for select { width: auto; flex: 1 1 auto; max-width: 320px; padding: 6px 10px; }
.cf-tpl__b--2 { flex-direction: column; align-items: flex-start; cursor: default; gap: 6px; }
.cf-tpl__b--2 .vp-btn { width: 100%; justify-content: center; }
.cf-tpl__rep { background: none; border: 0; padding: 0; font: inherit; font-size: 0.76rem; color: var(--color-text-muted); text-decoration: underline; cursor: pointer; }
.cf-prev__sw { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px dashed var(--vpr-line); font-size: 0.78rem; color: var(--color-text-muted); }
.cf-prev__sw button { padding: 4px 10px; border: 1px solid var(--vpr-line); border-radius: 999px; background: var(--vpr-surface); color: var(--color-text); font: inherit; font-size: 0.78rem; cursor: pointer; }
.cf-prev__sw button.is-on { border-color: var(--color-accent); background: var(--vpr-accent-soft); font-weight: 700; }
.cf-prev__cards span.is-on { border-color: var(--color-accent); background: var(--vpr-accent-soft); font-weight: 600; }
@media (max-width: 560px) { .cf-block__for { flex-wrap: wrap; } .cf-builder .cf-block__for select { max-width: none; } }
.vp-cbar__alt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--color-text-muted); margin-left: 4px; }
.vpr-tk__cs { align-items: center; }

/* ═══ 🧭 Напрями анкети — вкладки (кожен напрям = своя анкета) ═══ */
.cf-dtabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; border-bottom: 1px solid var(--vpr-line); margin: 0 0 0; }
.cf-dtab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; background: none; color: var(--color-text-muted); font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; margin-bottom: -1px; }
.cf-dtab em { font-style: normal; font-size: 0.72rem; padding: 1px 7px; border-radius: 999px; background: var(--vpr-line); color: var(--color-text); }
.cf-dtab:hover { color: var(--color-text); }
.cf-dtab[aria-selected="true"] { background: var(--vpr-surface); border-color: var(--vpr-line); color: var(--color-text); box-shadow: inset 0 3px 0 var(--color-accent); }
.cf-dtab--add { color: var(--color-accent-ink, var(--color-accent)); }
.cf-dtab--common { margin-left: auto; }
.cf-dtabinfo { padding: 12px 14px; margin: 0 0 14px; background: var(--vpr-surface); border: 1px solid var(--vpr-line); border-top: 0; border-radius: 0 0 12px 12px; }
.cf-dtabinfo p { margin: 6px 0 0; font-size: 0.82rem; color: var(--color-text-muted); }
.cf-dtabinfo .cf-dirs__row { margin: 0; }
.cf-dtabinfo .cf-dirs__warn { color: var(--vp-warning-fg); }
.cf-dtab__empty { padding: 18px; margin: 0 0 12px; border: 1px dashed var(--vpr-line); border-radius: 12px; font-size: 0.86rem; color: var(--color-text-muted); text-align: center; }
.cf-tpl--tab { margin-top: 0; }
@media (max-width: 560px) { .cf-dtabs { flex-wrap: nowrap; overflow-x: auto; } .cf-dtab { white-space: nowrap; } .cf-dtab--common { margin-left: 0; } }

/* ═══ «Список + панель» для продажів квитків: сторінка події в правій панелі ═══ */
/* 26.09: однакова висота рядків — назва в один рядок з «…» (довгі назви більше не «пригають») */
.vpr-evsplit .vp-orow { min-height: 64px; }
.vpr-evsplit .vp-orow__r1 b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vpr-evsplit .vp-opanel { padding: 16px 18px; }
.vpr-evsplit .vp-opanel .vpr-evhead h1 { font-size: 1.35rem; }
.vpr-evsplit .vp-opanel .vpr-grid2 { grid-template-columns: 1fr; }
.vpr-evsplit .vp-opanel .vpr-kpis > div { min-width: 120px; }
.cf-dtabinfo .cf-dirs__row { flex-wrap: wrap; }
.cf-dtabinfo .cf-dirs__row input:not(.cf-dirs__em) { flex: 1 1 160px; }
.cf-dtabinfo .cf-dirs__row .vp-btn { flex: 0 0 auto; white-space: nowrap; }
details.vpr-evov { padding: 12px 18px; margin-bottom: 14px; }
details.vpr-evov > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; cursor: pointer; }
details.vpr-evov > summary::-webkit-details-marker { display: none; }
.vpr-evov__t { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.vpr-evov__t::after { content: '▸'; color: var(--color-text-muted); font-size: 0.8rem; transition: transform .15s; }
details.vpr-evov[open] .vpr-evov__t::after { transform: rotate(90deg); }
details.vpr-evov[open] > summary { margin-bottom: 10px; }

/* ═══════════════ 🎨 Бокова панель (25.09) ═══════════════
   Фон — var(--color-primary) (темний у всіх темах). Усі відтінки — з --sb-ink (білий токен) через color-mix,
   акцент — var(--color-accent). Активний пункт — мʼяка підсвітка + акцентна риска, а не суцільна плашка. */
.vp-sidebar { --sb-ink: var(--color-white, #fff); padding: 14px 12px; gap: 0; }
.vp-sidebar .vp-logo, .vp-sidebar .vp-vendor-row { display: none; }
.vp-sb-brand { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 0 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--sb-ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--sb-ink) 8%, transparent); }
.vp-sb-brand .vp-logo__badge { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 40px; color: var(--sb-ink); font-size: 1.05rem; }
.vp-sb-brand__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vp-sb-brand__t b { color: var(--sb-ink); font-size: 0.98rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-sb-brand__t > span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; color: color-mix(in srgb, var(--sb-ink) 58%, transparent); }
.vp-sb-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-ink) 8%, transparent); }
.vp-sb-brand__go { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--sb-ink) 70%, transparent); text-decoration: none; font-weight: 700; background: color-mix(in srgb, var(--sb-ink) 7%, transparent); transition: .15s; }
.vp-sb-brand__go:hover { background: var(--color-accent); color: var(--sb-ink); }

.vp-sidebar .vp-nav { gap: 2px; }
.vp-nav-sep { height: 1px; margin: 8px 6px; background: color-mix(in srgb, var(--sb-ink) 8%, transparent); }
/* іконка-квадратик */
.vp-ni { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.98rem; line-height: 1;
  background: color-mix(in srgb, var(--sb-ink) 7%, transparent); transition: background .15s; }
.vp-ni--sm { flex: 0 0 20px; width: 20px; height: 20px; background: none; font-size: 0.86rem; opacity: .85; }
.vp-nt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* верхній рівень: Огляд, групи, Налаштування — однаковий вигляд */
.vp-sidebar .vp-nav-top, .vp-sidebar .vp-nav-group-header {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; margin: 0;
  font-family: var(--font-body); font-size: 0.93rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: color-mix(in srgb, var(--sb-ink) 80%, transparent); background: none; box-shadow: none; }
.vp-sidebar .vp-nav-top:hover, .vp-sidebar .vp-nav-group-header:hover { background: color-mix(in srgb, var(--sb-ink) 6%, transparent); color: var(--sb-ink); }
.vp-sidebar .vp-nav-group-header .chev { margin-left: auto; font-size: 0.72rem; opacity: .55; transition: transform .2s; }
.vp-sidebar .vp-nav-group:not(.collapsed) > .vp-nav-group-header { color: var(--sb-ink); }
.vp-sidebar .vp-nav-group.has-active > .vp-nav-group-header .vp-ni,
.vp-sidebar .vp-nav-top.active .vp-ni { background: color-mix(in srgb, var(--color-accent) 85%, transparent); }
.vp-sidebar .vp-nav-top.active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--sb-ink); box-shadow: none; }
.vp-nav-group-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; background: var(--color-accent); color: var(--sb-ink); }
.vp-nav-group-badge + .chev { margin-left: 6px; }
.vp-nav-group:not(.collapsed) .vp-nav-group-badge { display: none; }

/* підпункти: тонка лінія ліворуч, активний — мʼяка підсвітка + акцентна риска */
.vp-sidebar .vp-nav-group-inner { gap: 1px; padding: 2px 0 6px 0; margin-left: 22px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--sb-ink) 10%, transparent); }
.vp-sidebar .vp-nav-group-inner .vp-nav-link { padding: 7px 10px; gap: 8px; border-radius: 9px; font-size: 0.87rem; font-weight: 500;
  color: color-mix(in srgb, var(--sb-ink) 68%, transparent); background: none; box-shadow: none; }
.vp-sidebar .vp-nav-group-inner .vp-nav-link:hover { background: color-mix(in srgb, var(--sb-ink) 6%, transparent); color: var(--sb-ink); }
.vp-sidebar .vp-nav-group-inner .vp-nav-link.active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--sb-ink); font-weight: 600; box-shadow: none; }
.vp-sidebar .vp-nav-group-inner .vp-nav-link.active::before { content: ''; position: absolute; left: -11px; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--color-accent); }

/* низ: тема + сайт + вихід компактно */
.vp-sidebar .vp-sidebar-footer { border-top: 1px solid color-mix(in srgb, var(--sb-ink) 8%, transparent); padding-top: 10px; gap: 6px; }
.vp-sb-foot { display: flex; gap: 6px; }
.vp-sb-foot a { flex: 1 1 0; justify-content: center; padding: 8px 10px !important; border-radius: 10px; font-size: 0.82rem !important; font-weight: 600;
  color: color-mix(in srgb, var(--sb-ink) 70%, transparent) !important; background: color-mix(in srgb, var(--sb-ink) 5%, transparent); }
.vp-sb-foot a:hover { background: color-mix(in srgb, var(--sb-ink) 10%, transparent) !important; color: var(--sb-ink) !important; }
.vp-sb-foot .vp-logout-link:hover { background: color-mix(in srgb, var(--vp-danger, var(--color-accent)) 30%, transparent) !important; }

/* телефон (drawer): правий відступ під ✕, трохи більші цілі дотику */
@media (max-width: 760px) {
  .vp-sidebar .vp-nav-top, .vp-sidebar .vp-nav-group-header { padding: 8px; font-size: 0.98rem; }
  .vp-sidebar .vp-nav-group-inner .vp-nav-link { padding: 10px; font-size: 0.95rem; }
}
.vp-nav-group-badge[hidden] { display: none !important; }
.vp-sb-brand__t > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 🔎 25.09 (власник: «маленьке трошки»): крупніший сайдбар — ширше, більші іконки, шрифт і відступи. */
@media (min-width: 761px) {
  .vp-layout { grid-template-columns: 288px 1fr; }
  .vp-sidebar { padding: 16px 14px; }
  .vp-sidebar .vp-nav { gap: 3px; }
  .vp-ni { flex-basis: 36px; width: 36px; height: 36px; border-radius: 11px; font-size: 1.12rem; }
  .vp-ni--sm { flex-basis: 22px; width: 22px; height: 22px; font-size: 1rem; }
  .vp-sidebar .vp-nav-top, .vp-sidebar .vp-nav-group-header { padding: 7px 10px; gap: 12px; font-size: 1.02rem; }
  .vp-sidebar .vp-nav-group-inner { margin-left: 27px; padding-left: 12px; gap: 2px; }
  .vp-sidebar .vp-nav-group-inner .vp-nav-link { padding: 9px 12px; gap: 10px; font-size: 0.97rem; }
  .vp-sidebar .vp-nav-group-inner .vp-nav-link.active::before { left: -13px; top: 8px; bottom: 8px; }
  .vp-sb-brand { padding: 12px; }
  .vp-sb-brand .vp-logo__badge { width: 44px; height: 44px; flex-basis: 44px; font-size: 1.15rem; }
  .vp-sb-brand__t b { font-size: 1.05rem; }
  .vp-sb-brand__t > span { font-size: 0.8rem; }
  .vp-sb-foot a { font-size: 0.9rem !important; padding: 10px !important; }
  .vp-nav-group-badge { min-width: 22px; height: 22px; font-size: 0.74rem; }
}
/* Лічильники в меню — цифра рівно по центру (шрифт заголовків мав зсунуту базову лінію). */
.vp-nav-group-badge, .vp-sidebar .vp-nav-link__badge { font-family: var(--font-body); line-height: 1; font-variant-numeric: tabular-nums; padding-top: 1px; box-sizing: border-box; align-self: center; }
.vp-sidebar .vp-nav-group-header .chev { align-self: center; line-height: 1; }

/* ═══════════════ 💬 Чати з клієнтами (25.09, освіження) ═══════════════ */
.vp-chat-2col { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; height: calc(100vh - 250px); min-height: 320px; }
.vp-chat-listbox { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; height: 100%; max-height: none; }
#vp-chat-active { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; height: 100%; max-height: none; }
.vpr-chattabs { margin-bottom: 12px; }
.vpr-chsearch { padding: 10px; border-bottom: 1px solid var(--vpr-line); }
.vpr-chsearch input { width: 100%; padding: 9px 12px; border: 1px solid var(--vpr-line); border-radius: 10px; background: var(--color-bg); color: var(--color-text); font: inherit; font-size: 0.88rem; }
.vpr-chlist { overflow-y: auto; flex: 1; }
.vpr-chr { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px !important; border-bottom: 1px solid var(--vpr-line); cursor: pointer; position: relative; }
.vpr-chr__av { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem;
  background: var(--vpr-accent-soft); color: var(--color-accent-ink, var(--color-accent)); }
.vpr-chr__m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vpr-chr__top { display: flex; align-items: baseline; gap: 8px; }
.vpr-chr__top b { flex: 1 1 auto; min-width: 0; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpr-chr__top time { flex: 0 0 auto; font-size: 0.74rem; color: var(--color-text-muted); }
.vpr-chr__prev { font-size: 0.82rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpr-chr__prev i { font-style: normal; font-weight: 600; }
.vpr-chr.is-unread .vpr-chr__prev { color: var(--color-text); font-weight: 600; }
.vpr-chr__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.vpr-chr__tags em { font-style: normal; font-size: 0.7rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--vpr-line); color: var(--color-text-muted); }
.vpr-chr__tags em.is-aw { background: var(--vp-warning-bg); border-color: var(--vp-warning-border, var(--vp-warning)); color: var(--vp-warning-fg); }
.vpr-chr .vp-chat-unread { align-self: center; flex: 0 0 auto; min-width: 22px; height: 22px; padding: 1px 7px 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: var(--color-white, #fff); font-size: 0.72rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.vpr-chr.vp-chat-row--active, .vpr-chr.vp-chat-row--active:hover { background: var(--vpr-accent-soft) !important; border-left-color: var(--color-accent); }
.vpr-chempty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 24px; color: var(--color-text-muted); text-align: center; }
.vpr-chempty__ic { font-size: 2.6rem; }
.vpr-chempty b { color: var(--color-text); font-size: 1rem; }
.vpr-chempty ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; font-size: 0.86rem; }
.vpr-chhead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--vpr-line); background: var(--color-bg); }
.vpr-chhead.is-admin { border-left: 4px solid var(--vp-purple); }
.vpr-chhead__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vpr-chhead__t b { font-size: 0.98rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vpr-chhead__t > span { font-size: 0.8rem; color: var(--color-text-muted); }
.vpr-chhead__t a { color: var(--color-accent-ink, var(--color-accent)); text-decoration: none; }
.vpr-chhead__a { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.vpr-chhead .vp-chat-back { display: none; align-items: center; border: 0; background: var(--vpr-accent-soft); color: var(--color-text); border-radius: 9px; height: 32px; padding: 0 10px; font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
details.vpr-chrules { border-bottom: 1px solid var(--vpr-line); }
details.vpr-chrules > summary { padding: 4px 14px; font-size: 0.72rem; color: var(--color-text-muted); cursor: pointer; list-style: none; }
details.vpr-chrules > summary::-webkit-details-marker { display: none; }
details.vpr-chrules > div { padding: 6px 14px 9px; font-size: 0.78rem; line-height: 1.45; background: var(--vp-warning-bg); color: var(--vp-warning-fg); }
.vpr-chai { border-color: color-mix(in srgb, var(--vp-purple) 55%, var(--color-border)) !important; color: var(--vp-purple) !important; }
@media (max-width: 760px) {
  .vp-chat-2col { height: auto; }
  #vp-tab-content:has(.vp-chat-2col--open) > .vpr-chathead,
  #vp-tab-content:has(.vp-chat-2col--open) > .vpr-chattabs { display: none; }
  .vpr-chhead { padding: 8px 10px; }
  .vpr-chhead .vpr-chr__av { display: none; }
  .vpr-chhead__a .vp-btn { font-size: 0.74rem; padding: 4px 8px; }
}

/* 🔎 Сайдбар без переносів і без прокрутки (власник: «в 2 ряди й дуже великі — зʼявляється скрол»). */
.vp-sidebar .vp-nt { white-space: nowrap; }
@media (min-width: 761px) {
  .vp-ni { flex-basis: 32px; width: 32px; height: 32px; border-radius: 10px; font-size: 1.02rem; }
  .vp-sidebar .vp-nav { gap: 1px; }
  .vp-sidebar .vp-nav-top, .vp-sidebar .vp-nav-group-header { padding: 5px 8px; gap: 11px; font-size: 0.98rem; }
  .vp-sidebar .vp-nav-group-inner { margin-left: 23px; padding: 1px 0 4px 10px; gap: 1px; }
  .vp-sidebar .vp-nav-group-inner .vp-nav-link { padding: 7px 10px; gap: 8px; font-size: 0.93rem; }
  .vp-sidebar .vp-nav-group-inner .vp-nav-link.active::before { left: -11px; top: 7px; bottom: 7px; }
  .vp-nav-sep { margin: 6px; }
  .vp-sb-brand { margin-bottom: 10px; padding: 10px; }
}
/* Невисокі екрани ноутбуків (≤ 820 px заввишки): компактніше, щоб меню влазило без прокрутки. */
@media (min-width: 761px) and (max-height: 820px) {
  .vp-sidebar { padding: 10px 12px; }
  .vp-sb-brand { padding: 7px 8px; margin-bottom: 6px; }
  .vp-sb-brand .vp-logo__badge { width: 36px; height: 36px; flex-basis: 36px; }
  .vp-ni { flex-basis: 28px; width: 28px; height: 28px; font-size: 0.95rem; border-radius: 9px; }
  .vp-sidebar .vp-nav-top, .vp-sidebar .vp-nav-group-header { padding: 3px 8px; font-size: 0.95rem; }
  .vp-sidebar .vp-nav-group-inner .vp-nav-link { padding: 5px 10px; font-size: 0.9rem; }
  .vp-sidebar .vp-nav-group-inner { margin-left: 21px; }
  .vp-nav-sep { margin: 4px 6px; }
  .vp-sidebar .vp-sidebar-footer { flex-direction: row; align-items: center; flex-wrap: wrap; padding-top: 6px; }
  .vp-sidebar .vp-sidebar-footer > :not(.vp-sb-foot) { flex: 0 0 auto; }
  .vp-sb-foot { flex: 1 1 150px; }
  .vp-sb-foot a { padding: 6px 8px !important; font-size: 0.82rem !important; }
}
@media (min-width: 761px) and (max-height: 740px) {
  .vp-sb-brand__t > span { display: none; }
  .vp-sidebar .vp-nav-top, .vp-sidebar .vp-nav-group-header { padding: 2px 8px; }
  .vp-sidebar .vp-nav-group-inner .vp-nav-link { padding: 4px 10px; }
}
@media (max-width: 760px) {
  .vpr-chhead { flex-wrap: wrap; row-gap: 6px; }
  .vpr-chhead .vp-chat-back { white-space: nowrap; flex: 0 0 auto; }
  .vpr-chhead__t { flex: 1 1 0; }
  .vpr-chhead__t b { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .vpr-chhead__a { flex: 1 1 100%; justify-content: flex-end; }
}
.vp-chat-2col { height: calc(100vh - 330px); }
@media (min-width: 761px) { #vp-tab-content:has(.vp-chat-2col) { padding-bottom: 12px !important; } }

/* ═══════════════ 📨 Автокомунікації (25.09, освіження) ═══════════════ */
.vpr-cmdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--vpr-line); }
.vpr-cmdot.is-on { background: var(--vp-success); }
.vpr-cm { padding: 0 !important; overflow: hidden; }
.vpr-cm.is-on { border-left: 3px solid var(--vp-success) !important; }
.vpr-cm__top { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--vpr-line); flex-wrap: wrap; }
.vpr-cm__t { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vpr-cm__t b { font-size: 1.02rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vpr-cmwhen { font-size: 0.84rem; color: var(--color-text-muted); }
.vpr-cm__delay { display: flex; align-items: center; gap: 6px; }
.vpr-cm__delay label { font-size: 0.8rem; color: var(--color-text-muted); }
.vpr-cm__delay .vp-input { width: 76px; }
.vpr-cm__delay .vp-select { width: auto; }
.vpr-cm__cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; }
.vpr-cm__edit { padding: 16px 18px; }
.vpr-cm__edit textarea { min-height: 240px; line-height: 1.6; resize: vertical; }
.vpr-cmvars { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; font-size: 0.76rem; color: var(--color-text-muted); }
.vpr-cmvars button { font: inherit; font-size: 0.76rem; padding: 3px 10px; border: 1px solid var(--vpr-line); border-radius: 999px; background: var(--color-bg); color: var(--color-text); cursor: pointer; }
.vpr-cmvars button:hover { border-color: var(--color-accent); }
.vpr-cmprev { border-left: 1px solid var(--vpr-line); background: var(--color-bg); display: flex; flex-direction: column; }
.vpr-cmprev__h { padding: 10px 16px; font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); border-bottom: 1px solid var(--vpr-line); }
.vpr-cmprev__in { padding: 14px 16px; font-size: 0.9rem; line-height: 1.6; }
.vpr-cmprev__from { font-size: 0.76rem; color: var(--color-text-muted); margin-bottom: 6px; }
.vpr-cmprev__subj { font-weight: 700; font-size: 1rem; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--vpr-line); }
.vpr-cmprev mark { background: var(--vpr-accent-soft); color: inherit; border-radius: 4px; padding: 0 3px; }
@media (max-width: 900px) { .vpr-cm__cols { grid-template-columns: 1fr; } .vpr-cmprev { border-left: 0; border-top: 1px solid var(--vpr-line); } }

/* ⚡ Знімок вкладки, поки тягнуться свіжі дані: клікати не можна (дані могли застаріти), але без блимання. */
#vp-tab-content.is-stale { pointer-events: none; }
.vpr-chstk { padding: 5px 10px !important; font-size: 0.8rem !important; flex-shrink: 0; }

/* ═══ 🛍 Вибір товару для чату ═══ */
.vpr-pick-ov { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--color-primary) 60%, transparent); }
.vpr-pick { width: 100%; max-width: 1040px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: var(--vpr-surface); color: var(--color-text); border: 1px solid var(--vpr-line); box-shadow: var(--vpr-shadow-hover); }
.vpr-pick__h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--vpr-line); }
.vpr-pick__h h3 { margin: 0; font-size: 1.05rem; white-space: nowrap; }
.vpr-pick__h input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--vpr-line); border-radius: 10px; background: var(--color-bg); color: var(--color-text); font: inherit; font-size: 0.9rem; }
.vpr-pick__x { flex: 0 0 34px; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--vpr-accent-soft); color: var(--color-text); font-size: 1.2rem; cursor: pointer; }
.vpr-pick__cats { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--vpr-line); }
.vpr-pick__chip { border: 1px solid var(--vpr-line); background: none; color: var(--color-text); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.vpr-pick__chip[aria-pressed="true"] { border-color: var(--color-accent); background: var(--vpr-accent-soft); color: var(--color-accent-ink, var(--color-accent)); }
.vpr-pick__list { overflow-y: auto; padding: 14px 18px; flex: 1; }
.vpr-pick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vpr-pick__it { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--vpr-line); border-radius: 12px; overflow: hidden; background: var(--color-bg); color: var(--color-text); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.vpr-pick__it:hover, .vpr-pick__it:focus-visible { border-color: var(--color-accent); transform: translateY(-2px); }
.vpr-pick__ph { display: block; aspect-ratio: 1; background: var(--vpr-accent-soft); }
.vpr-pick__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vpr-pick__noimg { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 2.4rem; }
.vpr-pick__t { padding: 8px 10px 2px; font-size: 0.84rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vpr-pick__p { padding: 0 10px 10px; font-size: 0.92rem; color: var(--color-accent-ink, var(--color-accent)); }
@media (max-width: 900px) { .vpr-pick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vpr-pick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .vpr-pick__h { flex-wrap: wrap; } .vpr-pick__h input { order: 3; flex-basis: 100%; } .vpr-pick-ov { padding: 8px; } }

/* 👁 Перегляд автолиста: пошта (справжній HTML листа) і Telegram (бот + кнопки) */
.vpr-cmprev__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vpr-cmprev__tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--vpr-surface); border: 1px solid var(--vpr-line); }
.vpr-cmprev__tabs button { border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: 0.78rem; font-weight: 700; padding: 4px 10px; border-radius: 8px; cursor: pointer; }
.vpr-cmprev__tabs button[aria-selected="true"] { background: var(--vpr-accent-soft); color: var(--color-text); }
.vpr-cmprev__in { padding: 12px !important; }
.vpr-mailp { width: 100%; min-height: 420px; border: 1px solid var(--vpr-line); border-radius: 10px; background: var(--color-white, #fff); display: block; }
.vpr-tgp { border-radius: 14px; overflow: hidden; border: 1px solid var(--vpr-line); }
.vpr-tgp__bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--vpr-surface); border-bottom: 1px solid var(--vpr-line); }
.vpr-tgp__bar b { display: block; font-size: 0.9rem; }
.vpr-tgp__bar small { font-size: 0.72rem; color: var(--color-text-muted); }
.vpr-tgp__av { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-white, #fff); font-weight: 700; }
.vpr-tgp__chat { padding: 14px 12px; background: color-mix(in srgb, var(--vp-info, var(--color-accent)) 10%, var(--color-bg)); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.vpr-tgp__msg { max-width: 92%; padding: 9px 12px 18px; border-radius: 14px 14px 14px 4px; background: var(--vpr-surface); color: var(--color-text); font-size: 0.86rem; line-height: 1.5; position: relative; box-shadow: var(--vpr-shadow); overflow-wrap: anywhere; }
.vpr-tgp__msg time { position: absolute; right: 10px; bottom: 4px; font-size: 0.66rem; color: var(--color-text-muted); }
.vpr-tgp__kb { width: 92%; display: flex; flex-direction: column; gap: 4px; }
.vpr-tgp__row { display: flex; gap: 4px; }
.vpr-tgp__btn { flex: 1 1 0; min-width: 0; text-align: center; padding: 8px 4px; border-radius: 10px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--vpr-surface) 75%, transparent); color: var(--color-text); border: 1px solid var(--vpr-line); }
.vpr-tgp__btn i { font-style: normal; opacity: .6; font-size: 0.7rem; }
.vpr-tgp__note { margin: 0; padding: 8px 12px; font-size: 0.76rem; background: var(--vpr-surface); border-top: 1px solid var(--vpr-line); }

/* вибір товару: select категорії, компактніші картки (5 у ряд на широкому) */
.vpr-pick__sel { flex: 0 0 auto; max-width: 240px; padding: 9px 12px; border: 1px solid var(--vpr-line); border-radius: 10px; background: var(--color-bg); color: var(--color-text); font: inherit; font-size: 0.88rem; }
.vpr-pick__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.vpr-pick__ph { aspect-ratio: 4 / 3; }
.vpr-pick__t { font-size: 0.8rem; }
.vpr-pick__p { font-size: 0.86rem; }
@media (max-width: 1100px) { .vpr-pick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .vpr-pick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vpr-pick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vpr-pick__sel { order: 4; flex: 1 1 100%; max-width: none; } }
.vpr-pick__t { -webkit-line-clamp: 3; min-height: 3.9em; }
.vpr-pick__h .uis { flex: 0 0 230px; max-width: 230px; }
@media (max-width: 560px) { .vpr-pick__h .uis { order: 4; flex: 1 1 100%; max-width: none; } }

/* ═══ ⭐ Оцінки й відгуки (аналітика) ═══ */
.vpr-rt__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.vpr-rt__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.vpr-rt__c { padding: 14px; border: 1px solid var(--vpr-line); border-radius: 12px; background: var(--color-bg); }
.vpr-rt__h { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 6px; }
.vpr-rt__big { display: flex; align-items: center; gap: 10px; }
.vpr-rt__big b { font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.vpr-rt__stars { color: var(--vp-warning, var(--color-accent)); letter-spacing: 1px; font-size: 1.05rem; }
.vpr-rt__stars i { font-style: normal; color: var(--vpr-line); }
.vpr-rt__dist { display: grid; gap: 3px; margin-top: 10px; }
.vpr-rt__dist > div { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--color-text-muted); }
.vpr-rt__dist i { height: 6px; border-radius: 6px; background: var(--vpr-line); overflow: hidden; }
.vpr-rt__dist i b { display: block; height: 100%; background: var(--vp-warning, var(--color-accent)); border-radius: 6px; }
.vpr-rt__dist em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.vpr-rt__sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--vpr-line); }
.vpr-rt__rev { padding: 10px 0; border-top: 1px solid var(--vpr-line); }
.vpr-rt__rev:first-of-type { border-top: 0; }
.vpr-rt__rh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.86rem; }
.vpr-rt__pt { font-size: 0.78rem; margin-top: 2px; }
.vpr-rt__tx { font-size: 0.9rem; line-height: 1.5; margin-top: 4px; white-space: pre-line; }
.vpr-rt__ph { display: flex; gap: 6px; margin-top: 6px; }
.vpr-rt__ph img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }

/* ═══════════════ 🎨 Сторінка бренду (Вітрина, 25.09) ═══════════════ */
.vpr-bprog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 0.82rem; color: var(--color-text-muted); }
.vpr-bprog em { font-style: normal; padding: 3px 10px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--color-accent) 50%, var(--vpr-line)); color: var(--color-text); background: var(--vpr-accent-soft); }
.vpr-bprog.is-full { color: var(--vp-success-fg, var(--color-text)); }
.vpr-bcols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.vpr-bprev { position: sticky; top: 16px; border: 1px solid var(--vpr-line); border-radius: 16px; overflow: hidden; background: var(--vpr-surface); }
.vpr-bprev__h { padding: 10px 14px; font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); border-bottom: 1px solid var(--vpr-line); }
.vpr-bprev__ban { height: 110px; background-size: cover; background-position: center; }
.vpr-bprev__id { display: flex; align-items: flex-end; gap: 10px; padding: 0 14px; margin-top: -26px; }
.vpr-bprev__logo { width: 60px; height: 60px; border-radius: 50%; flex: 0 0 60px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem;
  background: var(--color-accent); color: var(--color-white, #fff); border: 3px solid var(--vpr-surface); }
.vpr-bprev__logo img { width: 100%; height: 100%; object-fit: cover; }
.vpr-bprev__id > div { display: flex; flex-direction: column; padding-bottom: 4px; min-width: 0; }
.vpr-bprev__id b { font-size: 1.02rem; }
.vpr-bprev__id span { font-size: 0.78rem; color: var(--color-text-muted); }
.vpr-bprev__body { display: flex; gap: 10px; padding: 12px 14px 4px; }
.vpr-bprev__seller { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: 0 0 54px; }
.vpr-bprev__body p { margin: 0; font-size: 0.82rem; line-height: 1.5; }
.vpr-bprev__soc { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px 0; }
.vpr-bprev__soc span { font-size: 0.72rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--vpr-line); }
.vpr-bprev__cta { margin: 12px 14px 14px; padding: 9px; border-radius: 10px; text-align: center; font-weight: 700; font-size: 0.84rem; background: var(--color-accent); color: var(--color-white, #fff); }
.vpr-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px -4px 0; padding: 12px 4px;
  background: linear-gradient(to top, var(--vpr-surface) 70%, transparent); }
.vpr-savebar .vpr-muted { font-size: 0.8rem; }
@media (max-width: 1100px) { .vpr-bcols { grid-template-columns: 1fr; } .vpr-bprev { position: static; max-width: 420px; } }

/* 🔎 Картка у видачі Google (живий перегляд) */
.vpr-serp { margin: 12px 0 4px; padding: 14px 16px; border: 1px solid var(--vpr-line); border-radius: 12px; background: var(--color-bg); }
.vpr-serp__lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 8px; }
.vpr-serp__site { display: flex; align-items: center; gap: 10px; }
.vpr-serp__fav { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-white, #fff); font-weight: 800; font-size: 0.8rem; }
.vpr-serp__site b { display: block; font-size: 0.84rem; }
.vpr-serp__site small { font-size: 0.74rem; color: var(--color-text-muted); }
.vpr-serp__t { margin-top: 6px; font-size: 1.12rem; line-height: 1.3; color: var(--vp-info, var(--color-accent)); }
.vpr-serp__d { margin-top: 3px; font-size: 0.86rem; line-height: 1.5; color: var(--color-text-muted); }
.vpr-serp__t { color: var(--color-accent-ink, var(--color-accent)); font-weight: 500; }

/* ═══ 🎨 Сторінка бренду v2 — редагування «як на сайті» (25.09) ═══ */
.vpr-bform > .vp-card { margin-bottom: 14px; }
.vpr-bhead { padding: 0 !important; overflow: hidden; }
.vpr-bhead__ban { position: relative; }
.vpr-bhead__ban .vp-dropzone { width: 100% !important; height: 210px !important; aspect-ratio: auto !important; max-height: none !important; border-radius: 0 !important; border-width: 0 0 1px !important; }
.vpr-bhead__swatch { height: 210px; }
.vpr-bhead__tools { position: absolute; top: 12px; right: 12px; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--vpr-surface) 88%, transparent); border: 1px solid var(--vpr-line); z-index: 2; }
.vpr-bhead__tools button { border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: 0.8rem; font-weight: 700; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.vpr-bhead__tools button.is-on { background: var(--vpr-accent-soft); color: var(--color-accent-ink, var(--color-accent)); }
.vpr-bhead__row { display: flex; align-items: flex-end; gap: 18px; padding: 0 22px 20px; margin-top: -56px; position: relative; z-index: 1; flex-wrap: wrap; }
.vpr-bhead__logo { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vpr-bhead__logo .vp-dropzone { width: 120px !important; height: 120px !important; aspect-ratio: 1 !important; border-radius: 50% !important; border: 4px solid var(--vpr-surface) !important; background: var(--color-bg); box-shadow: var(--vpr-shadow); overflow: hidden; }
.vpr-bhead__logo .vp-dropzone img { border-radius: 50%; }
.vpr-bhead__frame { border: 1px solid var(--vpr-line); background: var(--vpr-surface); color: var(--color-text-muted); font: inherit; font-size: 0.74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.vpr-bhead__names { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 60px; }
.vpr-bhead__names input { width: 100%; border: 1px solid transparent; background: transparent; color: var(--color-text); font: inherit; border-radius: 10px; padding: 6px 10px; transition: border-color .15s, background .15s; }
.vpr-bhead__names input:hover { border-color: var(--vpr-line); }
.vpr-bhead__names input:focus { outline: none; border-color: var(--color-accent); background: var(--color-bg); }
.vpr-bhead__name { font-family: var(--font-heading) !important; font-size: 1.6rem !important; font-weight: 800 !important; }
.vpr-bhead__tag { font-size: 0.98rem !important; color: var(--color-text-muted) !important; }
.vpr-bhead__names small { padding: 0 10px; font-size: 0.76rem; color: var(--color-text-muted); }
.vpr-babout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; }
.vpr-babout__ph { display: flex; flex-direction: column; gap: 6px; }
.vpr-babout__ph .vp-dropzone { width: 100% !important; height: 170px !important; aspect-ratio: auto !important; border-radius: 14px !important; }
.vpr-babout__ph small { font-size: 0.74rem; color: var(--color-text-muted); line-height: 1.4; }
.vpr-babout__tx textarea { width: 100%; min-height: 170px; line-height: 1.6; }
.vpr-babout__meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 0.76rem; color: var(--color-text-muted); }
.vpr-babout__meta .is-low { color: var(--vp-warning-fg, var(--color-accent)); font-weight: 700; }
.vpr-bsoc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vpr-bsoc label { display: flex; flex-direction: column; gap: 5px; font-size: 0.84rem; font-weight: 600; }
.vpr-bcollab { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--vpr-line); border-radius: 12px; cursor: pointer; }
.vpr-bcollab input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--color-accent); margin-top: 2px; flex: none; }
.vpr-bcollab small { display: block; font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.5; margin-top: 2px; }
@media (max-width: 760px) {
  .vpr-bhead__ban .vp-dropzone, .vpr-bhead__swatch { height: 150px !important; }
  .vpr-bhead__row { padding: 0 14px 16px; margin-top: -44px; gap: 10px; }
  .vpr-bhead__logo .vp-dropzone { width: 92px !important; height: 92px !important; }
  .vpr-bhead__names { padding-top: 0; flex-basis: 100%; }
  .vpr-bhead__name { font-size: 1.3rem !important; }
  .vpr-babout { grid-template-columns: 1fr; }
  .vpr-babout__ph { max-width: 200px; }
  .vpr-bsoc { grid-template-columns: 1fr; }
}

/* Під-вкладки (сегмент): активну видно і в темній темі */
.vp-subtab.active, .vp-subtab.active:hover { background: var(--vpr-accent-soft) !important; color: var(--color-accent-ink, var(--color-accent)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent) !important; }
/* Пункт верхнього рівня (Огляд, Налаштування) — мʼяка підсвітка і в темній темі (dark.css мав більшу вагу). */
:root .vp-sidebar .vp-nav-link.vp-nav-top.active, :root[data-theme] .vp-sidebar .vp-nav-link.vp-nav-top.active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--sb-ink); box-shadow: none; }
:root .vp-sidebar .vp-nav-group-inner .vp-nav-link.active, :root[data-theme] .vp-sidebar .vp-nav-group-inner .vp-nav-link.active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--sb-ink); }
.vpr-bsoc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vpr-bsoc label small { font-weight: 400; font-size: 0.74rem; color: var(--color-text-muted); }
@media (max-width: 760px) { .vpr-bsoc { grid-template-columns: 1fr; } }

/* ═══ 🏷 Промокоди (Маркетинг, 25.09) ═══ */
.vpr-prlist { padding: 4px 16px !important; }
.vpr-pr { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--vpr-line); }
.vpr-pr:first-child { border-top: 0; }
.vpr-pr.is-off { opacity: .6; }
.vpr-pr__disc { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-accent-ink, var(--color-accent)); text-align: center; padding: 8px 4px; border-radius: 12px; background: var(--vpr-accent-soft); font-variant-numeric: tabular-nums; }
.vpr-pr__m { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vpr-pr__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vpr-pr__code { font-family: ui-monospace, monospace; font-weight: 800; font-size: 1rem; letter-spacing: .04em; padding: 4px 10px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--color-accent) 55%, var(--vpr-line)); background: var(--color-bg); color: var(--color-text); cursor: copy; }
.vpr-pr__code i { font-style: normal; font-size: .8rem; opacity: .6; }
.vpr-pr__cond { font-size: 0.82rem; color: var(--color-text-muted); }
.vpr-pr .vpr-bar { max-width: 260px; }
.vpr-pr__site { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
details.vpr-newpromo > summary::-webkit-details-marker { display: none; }
details.vpr-newpromo[open] > summary { margin-bottom: 4px; }
@media (max-width: 700px) {
  .vpr-pr { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .vpr-pr__disc { font-size: 1.15rem; }
  .vpr-pr__site { grid-column: 2 / 3; }
}
.vpr-pr { grid-template-columns: minmax(92px, max-content) minmax(0, 1fr) auto auto; }
.vpr-pr__disc { white-space: nowrap; font-size: 1.3rem; padding: 10px 12px; }
@media (max-width: 700px) { .vpr-pr { grid-template-columns: minmax(72px, max-content) minmax(0, 1fr) auto; } .vpr-pr__disc { font-size: 1.05rem; padding: 8px; } }
.vp-otabs .promo-pill { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

/* ═══════════════ 💎 Преміальні тарифи просування (25.09) ═══════════════ */
/* Токени «золотої картки» Platinum — навмисно однакові в обох темах (преміальна темна картка). */
:root { --vpr-gold: #e7c27d; --vpr-gold-hi: #f5d79a; --vpr-gold-lo: #d6a85a; --vpr-plat-bg1: #1d1a22; --vpr-plat-bg2: #121016; --vpr-plat-ink: #f4eee4; --vpr-plat-on: #241a08; }
.pm-plans { display: flex; flex-direction: column; gap: 16px; }
.pm-plans__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pm-plans__h h3 { margin: 0; font-family: var(--font-heading); font-size: 1.4rem; }
.pm-plans__h span { font-size: 0.84rem; color: var(--color-text-muted); }
.pm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pm-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 22px; border-radius: 20px; background: var(--vpr-surface); border: 1px solid var(--vpr-line); box-shadow: var(--vpr-shadow); transition: transform .2s, box-shadow .2s; }
.pm-card:hover { transform: translateY(-4px); box-shadow: var(--vpr-shadow-hover); }
.pm-card__tag { position: absolute; top: -12px; left: 22px; padding: 4px 12px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; letter-spacing: .02em; background: var(--color-bg); border: 1px solid var(--vpr-line); color: var(--color-text-muted); }
.pm-card__ic { font-size: 2.2rem; line-height: 1; }
.pm-card h4 { margin: 0; font-family: var(--font-heading); font-size: 1.6rem; }
.pm-card__lead { margin: 0; font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.45; }
.pm-card ul { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 7px; font-size: 0.88rem; }
.pm-card li { position: relative; padding-left: 24px; line-height: 1.4; }
.pm-card li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; background: var(--vpr-accent-soft); color: var(--color-accent-ink, var(--color-accent)); }
.pm-durs { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-top: auto; }
.pm-dur { cursor: pointer; }
.pm-dur input { position: absolute; opacity: 0; pointer-events: none; }
.pm-dur span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 6px; border-radius: 12px; border: 1.5px solid var(--vpr-line); background: var(--color-bg); text-align: center; transition: border-color .15s, background .15s; }
.pm-dur b { font-size: 0.8rem; }
.pm-dur em { font-style: normal; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; }
.pm-dur small { font-size: 0.68rem; color: var(--color-text-muted); }
.pm-dur input:checked + span { border-color: var(--color-accent); background: var(--vpr-accent-soft); }
.pm-btn { margin-top: 6px; width: 100%; border: 0; border-radius: 14px; padding: 14px; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; background: var(--color-accent); color: var(--color-white, #fff); box-shadow: 0 8px 22px color-mix(in srgb, var(--color-accent) 35%, transparent); transition: transform .15s, filter .15s; }
.pm-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
/* VIP — підсвічена */
.pm-card.is-hot { border: 2px solid color-mix(in srgb, var(--vp-purple) 70%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--vp-purple) 14%, var(--vpr-surface)), var(--vpr-surface) 55%); box-shadow: 0 18px 44px color-mix(in srgb, var(--vp-purple) 28%, transparent); transform: translateY(-6px); }
.pm-card.is-hot:hover { transform: translateY(-9px); }
.pm-card.is-hot .pm-card__tag { background: var(--vp-purple); border-color: transparent; color: var(--color-white, #fff); }
.pm-card.is-hot li::before { background: color-mix(in srgb, var(--vp-purple) 20%, transparent); color: var(--vp-purple); }
.pm-card.is-hot .pm-dur input:checked + span { border-color: var(--vp-purple); background: color-mix(in srgb, var(--vp-purple) 14%, transparent); }
.pm-btn--hot { background: linear-gradient(135deg, var(--vp-purple), color-mix(in srgb, var(--vp-purple) 60%, var(--color-accent))); box-shadow: 0 10px 26px color-mix(in srgb, var(--vp-purple) 40%, transparent); }
/* Platinum — золота преміальна (однаково темна в обох темах — як «чорна картка») */
.pm-card.is-plat { border: 1.5px solid color-mix(in srgb, var(--vpr-gold) 55%, transparent); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--vpr-gold) 20%, transparent), transparent 55%), linear-gradient(160deg, var(--vpr-plat-bg1), var(--vpr-plat-bg2)); color: var(--vpr-plat-ink); box-shadow: 0 18px 44px color-mix(in srgb, var(--vpr-plat-bg2) 60%, transparent); }
.pm-card.is-plat .pm-card__tag { background: linear-gradient(135deg, var(--vpr-gold-hi), var(--vpr-gold-lo)); border-color: transparent; color: var(--vpr-plat-on); }
.pm-card.is-plat h4 { background: linear-gradient(135deg, var(--vpr-gold-hi), var(--vpr-gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-card.is-plat .pm-card__lead, .pm-card.is-plat .pm-card__price span, .pm-card.is-plat .pm-card__save { color: color-mix(in srgb, var(--vpr-plat-ink) 70%, transparent); }
.pm-card.is-plat li::before { background: color-mix(in srgb, var(--vpr-gold) 18%, transparent); color: var(--vpr-gold); }
.pm-card__price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pm-card__price b { font-family: var(--font-heading); font-size: 2.2rem; color: var(--vpr-gold); }
.pm-card__price span { font-size: 0.82rem; }
.pm-card__save { font-size: 0.8rem; }
.pm-card__save s { opacity: .8; }
.pm-btn--plat { background: linear-gradient(135deg, var(--vpr-gold-hi), var(--vpr-gold-lo)); color: var(--vpr-plat-on); box-shadow: 0 10px 26px color-mix(in srgb, var(--vpr-gold-lo) 35%, transparent); }
/* наочний міні-каталог */
.pm-show { padding: 16px 18px; border-radius: 18px; border: 1px dashed var(--vpr-line); background: var(--color-bg); }
.pm-show__t { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; font-size: 0.86rem; }
.pm-show__t span { color: var(--color-text-muted); font-size: 0.8rem; }
.pm-show__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pm-show__card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 12px; background: var(--vpr-surface); border: 1px solid var(--vpr-line); opacity: .55; }
.pm-show__card span { display: block; aspect-ratio: 4 / 3; border-radius: 8px; background: color-mix(in srgb, var(--color-text-muted) 18%, transparent); }
.pm-show__card b { font-size: 0.78rem; }
.pm-show__card em { font-style: normal; font-size: 0.68rem; color: var(--color-text-muted); }
.pm-show__card i { position: absolute; top: 12px; left: 12px; z-index: 1; font-style: normal; font-size: 0.66rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.pm-show__card.is-vip { opacity: 1; border: 2px solid color-mix(in srgb, var(--vp-purple) 70%, transparent); box-shadow: 0 8px 22px color-mix(in srgb, var(--vp-purple) 25%, transparent); }
.pm-show__card.is-vip i { background: linear-gradient(135deg, var(--vpr-gold-hi), var(--vpr-gold-lo)); color: var(--vpr-plat-on); }
.pm-show__card.is-vip span { background: linear-gradient(135deg, color-mix(in srgb, var(--vp-purple) 35%, transparent), color-mix(in srgb, var(--color-accent) 30%, transparent)); }
.pm-show__card.is-top { opacity: .92; border-color: color-mix(in srgb, var(--color-accent) 50%, var(--vpr-line)); }
.pm-show__card.is-top i { background: var(--color-accent); color: var(--color-white, #fff); }
.pm-show__card.is-top span { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
details.pm-legal > summary { cursor: pointer; font-size: 0.8rem; color: var(--color-text-muted); }
@media (max-width: 1100px) { .pm-grid { grid-template-columns: 1fr; } .pm-card.is-hot { transform: none; } .pm-card.is-hot:hover { transform: translateY(-3px); } }
@media (max-width: 560px) { .pm-show__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══ 💎 Platinum — членська картка (вкладка Platinum) ═══ */
.pm-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 30px 30px 24px; color: var(--vpr-plat-ink);
  border: 1.5px solid color-mix(in srgb, var(--vpr-gold) 50%, transparent);
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--vpr-gold) 22%, transparent), transparent 55%),
              radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--vp-purple) 18%, transparent), transparent 60%),
              linear-gradient(160deg, var(--vpr-plat-bg1), var(--vpr-plat-bg2));
  box-shadow: 0 24px 60px color-mix(in srgb, var(--vpr-plat-bg2) 55%, transparent); }
.pm-hero__top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.pm-hero__tags { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.pm-hero__chip { font-size: 0.72rem; font-weight: 800; letter-spacing: .16em; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--vpr-gold-hi), var(--vpr-gold-lo)); color: var(--vpr-plat-on); }
.pm-hero__on { font-size: 0.78rem; font-weight: 700; color: var(--vp-success); }
.pm-hero__off { font-size: 0.78rem; color: color-mix(in srgb, var(--vpr-plat-ink) 60%, transparent); }
.pm-hero h2 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.1; background: linear-gradient(135deg, var(--vpr-gold-hi), var(--vpr-gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-hero p { margin: 0; font-size: 1rem; line-height: 1.55; color: color-mix(in srgb, var(--vpr-plat-ink) 78%, transparent); max-width: 560px; }
.pm-hero__until { margin-top: 12px; color: var(--vp-success); font-size: 0.9rem; }
.pm-hero__buy { padding: 20px; border-radius: 18px; background: color-mix(in srgb, var(--vpr-plat-ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--vpr-gold) 30%, transparent); text-align: left !important; }
.pm-hero__price b { font-family: var(--font-heading); font-size: 2.8rem; color: var(--vpr-gold-hi); line-height: 1; }
.pm-hero__price span { font-size: 0.9rem; color: color-mix(in srgb, var(--vpr-plat-ink) 65%, transparent); margin-left: 4px; }
.pm-hero__day { font-size: 0.84rem; color: color-mix(in srgb, var(--vpr-plat-ink) 65%, transparent); margin-top: 4px; }
.pm-hero__save { margin-top: 10px; font-size: 0.82rem; line-height: 1.45; color: color-mix(in srgb, var(--vpr-plat-ink) 70%, transparent); }
.pm-hero__save b { color: var(--vpr-gold-hi); }
.pm-hero__cta { display: block; width: 100%; margin-top: 16px; border: 0; border-radius: 14px; padding: 15px; font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer;
  background: linear-gradient(135deg, var(--vpr-gold-hi), var(--vpr-gold-lo)); color: var(--vpr-plat-on); box-shadow: 0 12px 30px color-mix(in srgb, var(--vpr-gold-lo) 40%, transparent); transition: transform .15s, filter .15s; }
.pm-hero__cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.pm-hero__code { display: block; width: 100%; margin-top: 8px; border: 1px solid color-mix(in srgb, var(--vpr-gold) 40%, transparent); background: none; color: var(--vpr-gold-hi); border-radius: 12px; padding: 9px; font: inherit; font-weight: 700; font-size: 0.86rem; cursor: pointer; }
.pm-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 24px; }
.pm-perk { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--vpr-plat-ink) 5%, transparent); border: 1px solid color-mix(in srgb, var(--vpr-gold) 18%, transparent); }
.pm-perk__ic { font-size: 1.3rem; }
.pm-perk b { font-family: var(--font-heading); font-size: 1.7rem; line-height: 1; color: var(--vpr-gold-hi); }
.pm-perk span:last-child { font-size: 0.8rem; line-height: 1.35; color: color-mix(in srgb, var(--vpr-plat-ink) 72%, transparent); }
.pm-hero__slots { margin-top: 18px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--vpr-gold) 18%, transparent); }
@media (max-width: 900px) { .pm-hero { padding: 22px 18px; } .pm-hero__top { grid-template-columns: 1fr; gap: 18px; } .pm-hero h2 { font-size: 1.7rem; } }

/* Вкладки просування — великі (власник: «дуже маленькі») */
.vp-otabs .promo-tab { font-size: 1.05rem; padding: 14px 22px 12px; gap: 8px; }
/* «Товари» — компактніше */
.pm-show { padding: 12px 14px; }
.pm-show__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pm-show__card span { aspect-ratio: 1; }
.pm-show__card b { font-size: 0.72rem; }
.pm-show__card em { display: none; }
.pm-card { padding: 22px 18px 18px; gap: 8px; }
.pm-card__ic { font-size: 1.7rem; }
.pm-card h4 { font-size: 1.35rem; }
.pm-card ul { gap: 5px; font-size: 0.84rem; margin: 2px 0 4px; }
.pm-dur span { padding: 7px 4px; }
.pm-dur em { font-size: 1.05rem; }
.pm-btn { padding: 12px; font-size: 0.95rem; }
.pm-card__price b { font-size: 1.9rem; }
@media (max-width: 700px) { .pm-show__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pm-perks--key { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pm-perks--key + .pm-perks { margin-top: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pm-perks--key + .pm-perks .pm-perk { flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; }
.pm-perks--key + .pm-perks .pm-perk b { font-size: 1.15rem; }
.pm-perk.is-key { padding: 18px; gap: 6px; border: 1.5px solid color-mix(in srgb, var(--vpr-gold) 55%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--vpr-gold) 16%, transparent), color-mix(in srgb, var(--vpr-plat-ink) 4%, transparent)); }
.pm-perk.is-key .pm-perk__ic { font-size: 1.6rem; }
.pm-perk.is-key b { font-size: 2rem; }
.pm-perk.is-key span:last-child { font-size: 0.86rem; }
@media (max-width: 700px) { .pm-perks--key { grid-template-columns: 1fr; } }
/* «⋯» з 2–3 пунктів — одна колонка, не широка двоколонкова (власник: «пішло не за планом») */
@media (min-width: 761px) { .vp-okebab__menu.is-short:not(.vp-osheet__menu) { display: flex; flex-direction: column; width: auto; min-width: 260px; max-width: 320px; } }
.vp-okebab__menu.is-short { min-width: 290px !important; }
.vp-okebab__menu.is-short button { align-items: flex-start; text-align: left; white-space: nowrap; width: 100%; }
.pm-show__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pm-show__card span { aspect-ratio: 5 / 2; }
.pm-show__card i { top: 10px; left: 10px; }
.vpr-pr { grid-template-columns: 92px minmax(0, 1fr) auto auto auto; }
.vpr-pr__tgl { white-space: nowrap; }
.vpr-pr__tgl.is-on { border-color: var(--color-accent); color: var(--color-accent-ink, var(--color-accent)); }
.vpr-pr.is-off .vpr-pr__tgl { opacity: 1; }
@media (max-width: 700px) { .vpr-pr { grid-template-columns: 72px minmax(0, 1fr) auto; } .vpr-pr__tgl { grid-column: 2 / 3; justify-self: start; } }

/* ═══ ➕ Новий промокод — картка з кроками й прев'ю (25.09) ═══ */
.vpr-np { padding: 22px 24px !important; }
.vpr-np[hidden] { display: none !important; }
.vpr-np__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.vpr-np__head h3 { margin: 0; font-family: var(--font-heading); font-size: 1.25rem; }
.vpr-np__x { border: 0; background: none; color: var(--color-text-muted); font-size: 1.1rem; cursor: pointer; padding: 6px 10px; border-radius: 8px; }
.vpr-np__x:hover { background: var(--color-bg); color: var(--color-text); }
.vpr-np__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.vpr-np__f { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vpr-np__step { display: flex; flex-direction: column; gap: 8px; }
.vpr-np__step small, .vpr-np__cond small { font-size: 0.76rem; color: var(--color-text-muted); font-weight: 400; }
.vpr-np__l { font-size: 0.78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.vpr-np__coderow { display: flex; gap: 8px; }
.vpr-np__code { flex: 1; min-width: 0; font-family: ui-monospace, monospace !important; font-size: 1.15rem !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.vpr-np__disc { display: flex; gap: 10px; align-items: stretch; }
.vpr-np__disc .vp-input { width: 130px; font-size: 1.3rem !important; font-weight: 800; text-align: center; }
.vpr-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--color-bg); border: 1px solid var(--vpr-line); }
.vpr-seg label { cursor: pointer; }
.vpr-seg input { position: absolute; opacity: 0; pointer-events: none; }
.vpr-seg span { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 48px; padding: 8px 16px; border-radius: 9px; font-weight: 700; color: var(--color-text-muted); transition: background .15s, color .15s; }
.vpr-seg input:checked + span { background: var(--vpr-surface); color: var(--color-text); box-shadow: var(--vpr-shadow); }
.vpr-seg input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.vpr-seg--wide { width: max-content; max-width: 100%; }
#vp-np-target { display: flex; flex-direction: column; gap: 8px; }
#vp-np-target[hidden] { display: none; }
.vpr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vpr-chip { border: 1px solid var(--vpr-line); background: none; color: var(--color-text); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 0.86rem; cursor: pointer; }
.vpr-chip.is-on { border-color: var(--color-accent); background: var(--vpr-accent-soft); color: var(--color-accent-ink, var(--color-accent)); font-weight: 700; }
.vpr-np__picker { padding: 10px 12px; background: var(--color-bg); border: 1px solid var(--vpr-line); border-radius: 12px; max-height: min(460px, 60vh); overflow-y: auto; }
.vpr-np__more { border: 1px solid var(--vpr-line); border-radius: 12px; padding: 12px 14px; }
.vpr-np__more summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; }
.vpr-np__more summary span { font-weight: 400; color: var(--color-text-muted); font-size: 0.82rem; }
.vpr-np__cond { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.vpr-np__cond label { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; font-weight: 600; }
.vpr-np__pub { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.vpr-np__pub > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.vpr-np__side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; background: var(--color-bg); border: 1px solid var(--vpr-line); }
.vpr-np__ticket { display: flex; border-radius: 14px; overflow: hidden; border: 1.5px dashed color-mix(in srgb, var(--color-accent) 55%, var(--vpr-line)); background: var(--vpr-surface); }
.vpr-np__off { display: flex; align-items: center; justify-content: center; min-width: 96px; padding: 14px 10px; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: var(--color-accent-ink, var(--color-accent)); background: var(--vpr-accent-soft); border-right: 1.5px dashed color-mix(in srgb, var(--color-accent) 55%, var(--vpr-line)); white-space: nowrap; }
.vpr-np__tb { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; min-width: 0; }
.vpr-np__tb code { font-family: ui-monospace, monospace; font-weight: 800; font-size: 1rem; letter-spacing: .05em; overflow-wrap: anywhere; }
.vpr-np__tb span { font-size: 0.84rem; }
.vpr-np__tb small { font-size: 0.74rem; color: var(--color-text-muted); }
.vpr-np__go { width: 100%; justify-content: center; padding: 13px !important; font-size: 1rem !important; }
.vpr-np__msg { font-size: 0.85rem; min-height: 1em; }
@media (max-width: 900px) { .vpr-np__grid { grid-template-columns: 1fr; } .vpr-np__side { position: static; } .vpr-np__cond { grid-template-columns: 1fr; } .vpr-np { padding: 16px !important; } }
.vpr-np__disc .vp-input { flex: 0 0 140px; width: 140px !important; }

/* ═══ 💎 Місця підписки — картки (25.09) ═══ */
.pm-slots { margin-top: 6px; }
.pm-slots__t { font-size: 0.78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--vpr-plat-ink) 65%, transparent); margin: 10px 0 10px; }
.pm-slots__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pm-slotc { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--vpr-plat-ink) 5%, transparent); border: 1px solid color-mix(in srgb, var(--vpr-gold) 22%, transparent); }
.pm-slotc.is-free { border-color: color-mix(in srgb, var(--vpr-gold) 50%, transparent); }
.pm-slotc__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pm-slotc__h span { font-weight: 800; font-size: 1rem; }
.pm-slotc__h b { font-family: var(--font-heading); font-size: 1.5rem; color: var(--vpr-gold-hi); line-height: 1; }
.pm-slotc__h b i { font-style: normal; font-size: 0.95rem; color: color-mix(in srgb, var(--vpr-plat-ink) 55%, transparent); }
.pm-slotc__cells { display: flex; gap: 8px; flex-wrap: wrap; }
.pm-slot { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem;
  border: 1.5px dashed color-mix(in srgb, var(--vpr-gold) 55%, transparent); color: color-mix(in srgb, var(--vpr-gold) 75%, transparent); }
.pm-slot.is-on { border: 0; background: linear-gradient(135deg, var(--vpr-gold-hi), var(--vpr-gold-lo)); color: var(--vpr-plat-on); }
.pm-slotc__st { font-size: 0.82rem; color: color-mix(in srgb, var(--vpr-plat-ink) 70%, transparent); }
.pm-slotc.is-free .pm-slotc__st { color: var(--vpr-gold-hi); font-weight: 700; }
.pm-slotc__btn { margin-top: auto; width: 100%; border-radius: 12px; padding: 10px; font: inherit; font-weight: 800; font-size: 0.9rem; cursor: pointer;
  background: none; color: var(--vpr-gold-hi); border: 1px solid color-mix(in srgb, var(--vpr-gold) 45%, transparent); }
.pm-slotc__btn.is-main { border: 0; background: linear-gradient(135deg, var(--vpr-gold-hi), var(--vpr-gold-lo)); color: var(--vpr-plat-on); }
.pm-slotc__btn:hover { filter: brightness(1.06); }
.pm-slots__note { margin-top: 10px; font-size: 0.8rem; line-height: 1.45; color: color-mix(in srgb, var(--vpr-plat-ink) 65%, transparent); }
.pm-slots__note.is-box, .pm-slots__warn { padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--vpr-gold) 40%, transparent); background: color-mix(in srgb, var(--vpr-gold) 12%, transparent); color: var(--vpr-plat-ink); }
.pm-slots__warn { margin-top: 10px; font-size: 0.84rem; line-height: 1.5; }

/* 📱 Рядок промокоду на телефоні: знижка ліворуч, під назвою — перемикач, кнопка й «⋯» в один рядок */
@media (max-width: 700px) {
  .vpr-pr { grid-template-columns: 64px auto auto minmax(0, 1fr); gap: 8px 10px; }
  .vpr-pr > .vpr-pr__disc { grid-column: 1; grid-row: 1 / 3; font-size: 1.05rem; padding: 8px 2px; align-self: start; }
  .vpr-pr > .vpr-pr__m { grid-column: 2 / 5; grid-row: 1; }
  .vpr-pr > .vpr-pr__site { grid-column: 2; grid-row: 2; }
  .vpr-pr > .vpr-pr__tgl { grid-column: 3; grid-row: 2; }
  .vpr-pr > .vp-okebab { grid-column: 4; grid-row: 2; justify-self: end; }
  .vpr-pr > span:empty { display: none; }
  .vpr-prlist { padding: 4px 12px !important; }
}

/* Рядок промокоду: знижка не вилазить за плашку */
.vpr-pr { grid-template-columns: 112px minmax(0, 1fr) auto auto auto; }
.vpr-pr__disc { white-space: nowrap; overflow: hidden; font-size: 1.4rem; }
.vpr-pr__disc.is-long { font-size: 1.1rem; }
@media (max-width: 700px) { .vpr-pr { grid-template-columns: 76px auto auto minmax(0, 1fr); } .vpr-pr__disc, .vpr-pr__disc.is-long { font-size: 0.95rem; } }
.vpr-seg input:disabled + span { opacity: .35; cursor: not-allowed; }
#vp-np-disc-hint { font-size: 0.76rem; color: var(--color-text-muted); }

/* 🎯 Вибір категорій/типів — плитки */
.vpr-tg { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.vpr-tg__i { cursor: pointer; }
.vpr-tg__i input { position: absolute; opacity: 0; pointer-events: none; }
.vpr-tg__box { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 36px 12px 14px; border-radius: 12px; border: 1.5px solid var(--vpr-line); background: var(--vpr-surface); transition: border-color .15s, background .15s; }
.vpr-tg__box b { font-size: 0.92rem; line-height: 1.3; }
.vpr-tg__box small { font-size: 0.76rem; color: var(--color-text-muted); }
.vpr-tg__box i { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--vpr-line); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 0.72rem; font-weight: 800; color: transparent; }
.vpr-tg__i:hover .vpr-tg__box { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--vpr-line)); }
.vpr-tg__i input:checked + .vpr-tg__box { border-color: var(--color-accent); background: var(--vpr-accent-soft); }
.vpr-tg__i input:checked + .vpr-tg__box i { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white, #fff); }
.vpr-tg__i input:focus-visible + .vpr-tg__box { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.vpr-np__picker:has(.vpr-tg) { background: none; border: 0; padding: 0; }
.vp-cf-promo { margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: 0.84rem; line-height: 1.5; background: var(--vpr-accent-soft); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); }

/* 🎁 «Маю промокод» під кнопкою тарифу */
.pm-gift { border: 0; background: none; font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; padding: 4px; margin-top: -2px; }
.pm-gift:hover { color: var(--color-accent-ink, var(--color-accent)); text-decoration: underline; }
.pm-card.is-plat .pm-gift { color: var(--vpr-gold-hi); }

/* ═══ 🚀 Вікно «Просування товару» (25.09) ═══ */
.pmm-ov { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 18px; background: color-mix(in srgb, #000 55%, transparent); }
.pmm { max-width: 560px !important; }
.pmm-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; }
.pmm-head__img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--color-bg); }
.pmm-head__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pmm-head__t small { font-size: 0.74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.pmm-head__t b { font-family: var(--font-heading); font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmm-x { border: 0; background: none; color: var(--color-text-muted); font-size: 1.1rem; cursor: pointer; padding: 6px 10px; border-radius: 8px; }
.pmm-x:hover { background: var(--color-bg); color: var(--color-text); }
.pmm-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px !important; }
.pmm-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; }
.pmm-type { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 16px; border-radius: 16px; cursor: pointer; font: inherit; color: var(--color-text);
  border: 2px solid var(--vpr-line); background: var(--vpr-surface); transition: border-color .15s, box-shadow .15s; }
.pmm-type__tag { position: absolute; top: -10px; right: 12px; font-size: 0.68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--vp-purple); color: var(--color-white, #fff); }
.pmm-type__ic { font-size: 1.6rem; }
.pmm-type b { font-family: var(--font-heading); font-size: 1.3rem; }
.pmm-type__lead { font-size: 0.82rem; color: var(--color-text-muted); }
.pmm-type__from { margin-top: 6px; font-size: 0.84rem; font-weight: 700; color: var(--color-accent-ink, var(--color-accent)); }
.pmm-type[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.pmm-type.is-vip[aria-pressed="true"] { border-color: var(--vp-purple); box-shadow: 0 8px 24px color-mix(in srgb, var(--vp-purple) 28%, transparent); }
.pmm-type.is-vip .pmm-type__from { color: var(--vp-purple); }
.pmm-what { margin: 0; padding: 12px 14px 12px 32px; border-radius: 12px; background: var(--color-bg); font-size: 0.86rem; line-height: 1.6; }
.pmm-l { font-size: 0.76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: -6px; }
.pmm-durs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pmm-dur { cursor: pointer; }
.pmm-dur[hidden] { display: none; }
.pmm-dur input { position: absolute; opacity: 0; pointer-events: none; }
.pmm-dur span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 12px; border: 1.5px solid var(--vpr-line); background: var(--vpr-surface); }
.pmm-dur b { font-size: 0.84rem; color: var(--color-text-muted); font-weight: 600; }
.pmm-dur em { font-style: normal; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; }
.pmm-dur small { position: absolute; top: -8px; right: 6px; font-size: 0.66rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--vp-success); color: var(--color-white, #fff); }
.pmm-dur input:checked + span { border-color: var(--color-accent); background: var(--vpr-accent-soft); }
.pmm-dur input:checked + span em { color: var(--color-accent-ink, var(--color-accent)); }
.pmm-dur input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pmm-sum { font-size: 0.84rem; line-height: 1.5; color: var(--color-text-muted); }
.pmm-sum b { color: var(--color-text); }
.pmm-gift { border: 1px dashed var(--vpr-line); border-radius: 12px; padding: 10px 14px; }
.pmm-gift summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--color-accent-ink, var(--color-accent)); list-style: none; }
.pmm-gift summary::-webkit-details-marker { display: none; }
.pmm-gift__row { display: flex; gap: 8px; margin: 10px 0 6px; }
.pmm-gift__row .vp-input { flex: 1; min-width: 0; text-transform: uppercase; font-family: ui-monospace, monospace; }
.pmm-gift small { font-size: 0.76rem; color: var(--color-text-muted); }
.pmm-plat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; color: var(--vpr-plat-ink);
  background: linear-gradient(135deg, var(--vpr-plat-bg1), var(--vpr-plat-bg2)); border: 1px solid color-mix(in srgb, var(--vpr-gold) 45%, transparent); }
.pmm-plat > span { font-size: 1.4rem; }
.pmm-plat > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pmm-plat b { color: var(--vpr-gold-hi); font-size: 0.92rem; }
.pmm-plat small { font-size: 0.76rem; color: color-mix(in srgb, var(--vpr-plat-ink) 70%, transparent); }
.pmm-plat button { border: 0; border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 800; font-size: 0.84rem; cursor: pointer; background: linear-gradient(135deg, var(--vpr-gold-hi), var(--vpr-gold-lo)); color: var(--vpr-plat-on); white-space: nowrap; }
.pmm-go { width: 100%; justify-content: center; padding: 14px !important; font-size: 1.02rem !important; }
@media (max-width: 520px) { .pmm-types { grid-template-columns: 1fr 1fr; gap: 8px; } .pmm-type { padding: 12px; } .pmm-plat { flex-wrap: wrap; } }

/* ☀️ Світла тема: чіткіші межі між блоками (власник: «проблема з розділенням») — рамка темніша, тінь помітніша. Темна — без змін. */
:root:not([data-theme^="dark"]) {
  --vpr-line: color-mix(in srgb, var(--color-border) 70%, var(--color-text) 14%);
  --vpr-shadow: 0 1px 3px rgba(44, 36, 21, .08), 0 4px 14px rgba(44, 36, 21, .05);
}
/* 💬 Чати: підсвітка рядка при наведенні */
.vpr-chr { transition: background .12s; }
.vpr-chr:hover { background: color-mix(in srgb, var(--color-accent) 11%, var(--vpr-surface)) !important; }
.pm-card .pm-gift, .pm-gift { background: none !important; box-shadow: none !important; border: 0 !important; text-decoration: none !important; width: auto; align-self: center; padding: 6px 10px !important; border-radius: 8px; font-size: 0.86rem; font-weight: 700; color: var(--color-text-muted); }
.pm-card .pm-gift:hover { color: var(--color-accent-ink, var(--color-accent)); background: var(--vpr-accent-soft) !important; }
.pm-card.is-plat .pm-gift { color: var(--vpr-gold-hi); }
.pm-card.is-plat .pm-gift:hover { background: color-mix(in srgb, var(--vpr-gold) 14%, transparent) !important; }

/* ═══ 📊 Аналітика v2 (25.09) ═══ */
.vpa-per { display: inline-flex; gap: 3px; padding: 4px; border-radius: 12px; background: var(--color-bg); border: 1px solid var(--vpr-line); flex-wrap: wrap; }
.vpa-per__b { border: 0; background: none; font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--color-text-muted); padding: 7px 13px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.vpa-per__b[aria-pressed="true"] { background: var(--vpr-surface); color: var(--color-text); box-shadow: var(--vpr-shadow); }
.vpa-custom { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: -4px 0 12px; font-size: 0.86rem; }
.vpa-custom label { display: inline-flex; gap: 6px; align-items: center; }
.vpa-custom .vp-input { width: auto; padding: 7px 10px; }
.vpa-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vpa-k { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--vpr-radius); background: var(--vpr-surface); border: 1px solid var(--vpr-line); box-shadow: var(--vpr-shadow); min-width: 0; }
.vpa-k__l { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); }
.vpa-k__v { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpa-k__f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vpa-k__f small { font-size: 0.74rem; color: var(--color-text-muted); }
.vpa-d { display: inline-flex; align-items: center; font-size: 0.74rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--color-bg); color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vpa-d.is-up { background: var(--vp-success-bg); color: var(--vp-success-fg); }
.vpa-d.is-down { background: var(--vp-danger-bg); color: var(--vp-danger-fg); }
.vpa-d.is-new { background: var(--vp-info-bg); color: var(--vp-info-fg); }
.vpa-cmp { font-size: 0.78rem; color: var(--color-text-muted); margin: 8px 2px 16px; }
.vpa-chart { padding: 18px 20px 12px !important; }
.vpa-chart__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.vpa-chart__h h3, .vpa-fun h3, .vpa-mini h3, .vpa-top h3, .vpa-tips h3 { margin: 0; font-size: 1.02rem; }
.vpa-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--color-bg); border: 1px solid var(--vpr-line); flex-wrap: wrap; }
.vpa-seg button { border: 0; background: none; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); padding: 5px 11px; border-radius: 7px; cursor: pointer; }
.vpa-seg button[aria-pressed="true"] { background: var(--vpr-surface); color: var(--color-text); box-shadow: var(--vpr-shadow); }
.vpa-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vpa-grid2 > .vp-card { margin-bottom: 16px; }
.vpa-fun__r { display: grid; grid-template-columns: 130px minmax(0, 1fr) 56px 44px; gap: 10px; align-items: center; padding: 7px 0; font-size: 0.86rem; }
.vpa-fun__bar { height: 12px; border-radius: 999px; background: var(--color-bg); overflow: hidden; }
.vpa-fun__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, var(--vp-purple))); }
.vpa-fun__r b { text-align: right; font-variant-numeric: tabular-nums; }
.vpa-fun__r em { font-style: normal; font-size: 0.76rem; color: var(--color-text-muted); text-align: right; }
.vpa-fun h3 { margin-bottom: 8px !important; }
.vpa-note { font-size: 0.76rem; color: var(--color-text-muted); margin: 8px 0 0; line-height: 1.45; }
.vpa-mini__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.vpa-mini__g > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--color-bg); }
.vpa-mini__g b { font-family: var(--font-heading); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.vpa-mini__g span { font-size: 0.78rem; color: var(--color-text-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vpa-link { border: 0; background: none; font: inherit; font-size: 0.84rem; font-weight: 700; color: var(--color-accent-ink, var(--color-accent)); cursor: pointer; }
.vpa-top__r { display: grid; grid-template-columns: 20px 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; font: inherit; color: var(--color-text); padding: 8px 6px; border-radius: 10px; cursor: pointer; }
.vpa-top__r:hover { background: var(--color-bg); }
.vpa-top__n { font-weight: 800; color: var(--color-text-muted); text-align: center; }
.vpa-top__t { min-width: 0; display: flex; flex-direction: column; font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpa-top__t small { font-weight: 400; font-size: 0.76rem; color: var(--color-text-muted); }
.vpa-top__r b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vpa-th { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; display: block; flex: 0 0 auto; }
.vpa-tips ul { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 0.88rem; line-height: 1.5; }
/* Товари */
.vpa-psum { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.86rem; color: var(--color-text-muted); margin: 2px 2px 12px; }
.vpa-psum b { color: var(--color-text); font-size: 1rem; }
.vpa-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.vpa-tools > .vp-input[type=search] { flex: 1 1 220px; max-width: 320px; }
.vpa-tools .vpr-chip em { font-style: normal; opacity: .65; margin-left: 2px; }
.vpa-sort { width: auto !important; margin-left: auto; }
.vpa-plist { padding: 4px 14px !important; }
.vpa-pr { display: grid; grid-template-columns: 44px minmax(0, 2.4fr) repeat(5, minmax(0, 0.8fr)) minmax(0, 1.1fr); gap: 12px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--vpr-line); cursor: pointer; font-size: 0.86rem; }
.vpa-pr[hidden] { display: none; }
.vpa-pr:hover:not(.vpa-pr--h) { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.vpa-pr--h { border-top: 0; cursor: default; font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); padding-top: 12px; }
.vpa-pr--h span:nth-child(n+3) { text-align: right; }
.vpa-pr__m { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vpa-pr__m b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpa-pr__m small { font-size: 0.74rem; color: var(--color-text-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vpa-pr__c { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.vpa-pr__c small { font-size: 0.72rem; color: var(--color-text-muted); }
.vpa-pr__c.is-rev b { font-weight: 800; }
.vpa-b { font-size: 0.68rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--color-bg); color: var(--color-text-muted); }
.vpa-b.is-vip { background: color-mix(in srgb, var(--vp-purple) 16%, transparent); color: var(--vp-purple); }
.vpa-b.is-top { background: var(--vpr-accent-soft); color: var(--color-accent-ink, var(--color-accent)); }
@media (max-width: 1100px) { .vpa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .vpa-grid2 { grid-template-columns: 1fr; gap: 0; }
  .vpa-pr--h { display: none; }
  .vpa-pr { grid-template-columns: 44px repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
  .vpa-pr__m { grid-column: 2 / 5; }
  .vpa-pr__c { align-items: flex-start; grid-column: span 1; }
  .vpa-pr > .vpa-pr__c:nth-child(3), .vpa-pr > .vpa-pr__c:nth-child(6) { grid-column: 2; }
  .vpa-pr__c::before { content: attr(data-l); font-size: 0.68rem; color: var(--color-text-muted); }
  .vpa-sort { margin-left: 0; }
}
@media (max-width: 560px) { .vpa-kpis { gap: 8px; } .vpa-k { padding: 12px; } .vpa-k__v { font-size: 1.25rem; } .vpa-fun__r { grid-template-columns: 100px minmax(0, 1fr) 44px 36px; } }
@media (max-width: 700px) {
  .vpa-per { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .vpa-per::-webkit-scrollbar { display: none; }
  .vpa-tools .vpr-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .vpa-tools .vpr-chips::-webkit-scrollbar { display: none; }
  .vpa-tools .vpr-chip { white-space: nowrap; }
  .vpa-tools > .vp-input[type=search] { max-width: none; }
  .vpa-psum { gap: 6px 14px; }
}

/* 🌐 Аналітика → Трафік */
.vpa-h3 { margin: 0 0 10px; font-size: 1.02rem; }
.vpa-info { padding: 10px 14px; border-radius: 12px; background: var(--vp-info-bg); color: var(--vp-info-fg); border: 1px solid var(--vp-info-border, transparent); font-size: 0.86rem; margin-bottom: 14px; }
.vpa-l { font-size: 0.76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin: 12px 0 4px; }
.vpa-bars { display: flex; flex-direction: column; }
.vpa-bars__r { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto 40px; gap: 4px 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--vpr-line); font-size: 0.86rem; }
.vpa-bars__r:first-child { border-top: 0; }
.vpa-bars__l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpa-bars__r b { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vpa-bars__r b small { font-weight: 400; font-size: 0.72rem; color: var(--color-text-muted); }
.vpa-bars__r em { font-style: normal; font-size: 0.76rem; color: var(--color-text-muted); text-align: right; }
.vpa-bars__s { grid-column: 1 / -1; margin-top: -4px; font-size: 0.74rem; color: var(--color-text-muted); }
.vpa-dev { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--color-bg); margin: 6px 0 10px; }
.vpa-dev i { display: block; height: 100%; }
.vpa-dev .is-m, .vpa-dev__l i.is-m { background: var(--color-accent); }
.vpa-dev .is-d, .vpa-dev__l i.is-d { background: var(--vp-purple); }
.vpa-dev .is-t, .vpa-dev__l i.is-t { background: var(--vp-info, var(--color-text-muted)); }
.vpa-dev__l { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.86rem; }
.vpa-dev__l span { display: inline-flex; align-items: center; gap: 6px; }
.vpa-dev__l i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.vpa-terms { display: flex; flex-direction: column; }
.vpa-terms__r { display: grid; grid-template-columns: minmax(0, 1fr) 90px 80px 70px; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--vpr-line); font-size: 0.86rem; align-items: center; }
.vpa-terms__r span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpa-terms__r b { text-align: right; font-variant-numeric: tabular-nums; }
.vpa-terms__r.is-h { border-top: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.vpa-terms__r.is-h span:not(:first-child) { text-align: right; }
#vp-gsc-stats { margin-bottom: 16px; }
@media (max-width: 560px) { .vpa-terms__r { grid-template-columns: minmax(0, 1fr) 56px 50px 50px; gap: 6px; } .vpa-bars__r { grid-template-columns: minmax(0, 1fr) 70px auto 34px; } }

/* 👥 Аналітика → Покупці */
.vpa-mini__g--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vpa-buy .vpa-terms__r { grid-template-columns: minmax(0, 1.4fr) 120px 120px 110px; }
.vpa-buy .vpa-terms__r b { display: flex; flex-direction: column; align-items: flex-end; }
.vpa-buy .vpa-terms__r b small { font-weight: 400; font-size: 0.72rem; color: var(--color-text-muted); }
.vpa-buy .vpa-terms__r span em { margin-left: 6px; font-style: normal; }
.vpa-cmp:empty { margin: 0 0 16px; }
@media (max-width: 700px) { .vpa-mini__g--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vpa-buy .vpa-terms__r { grid-template-columns: minmax(0, 1fr) 84px 84px; } .vpa-buy .vpa-terms__r > :nth-child(4) { display: none; } }
.vpa-credit { display: flex; align-items: center; gap: 16px; padding: 18px 22px; margin-bottom: 16px; border-radius: var(--vpr-radius);
  background: linear-gradient(120deg, var(--vpr-accent-soft), color-mix(in srgb, var(--vp-purple) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); }
.vpa-credit__ic { font-size: 2rem; }
.vpa-credit__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vpa-credit__t b { font-size: 1.05rem; }
.vpa-credit__t b em { font-style: normal; color: var(--color-accent-ink, var(--color-accent)); }
.vpa-credit__t span { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.45; }
.vpa-credit__p { display: flex; flex-direction: column; align-items: center; font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--color-accent-ink, var(--color-accent)); line-height: 1; }
.vpa-credit__p small { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); margin-top: 4px; }
@media (max-width: 560px) { .vpa-credit { flex-wrap: wrap; padding: 14px; } .vpa-credit__p { font-size: 1.6rem; } }

/* 🛎 Аналітика → Сервіс */
.vpa-k.is-good .vpa-k__v { color: var(--vp-success-fg); }
.vpa-k.is-bad .vpa-k__v { color: var(--vp-danger-fg); }
.vpa-info.is-warn { background: var(--vp-warning-bg); color: var(--vp-warning-fg); border-color: var(--vp-warning-border, transparent); }

/* 📣 Аналітика → Маркетинг */
.vpa-pc .vpa-terms__r { grid-template-columns: minmax(0, 1.6fr) 90px 110px 100px; }
.vpa-pc code { font-family: ui-monospace, monospace; font-weight: 800; letter-spacing: .04em; }
.vpa-pc small { font-size: 0.74rem; color: var(--color-text-muted); margin-left: 6px; }
.vpa-prm { padding: 12px 0; border-top: 1px solid var(--vpr-line); }
.vpa-prm:first-of-type { border-top: 0; }
.vpa-prm__h { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.vpa-prm__h > div { display: flex; flex-direction: column; min-width: 0; }
.vpa-prm__h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpa-prm__h small { font-size: 0.76rem; color: var(--color-text-muted); }
.vpa-prm__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vpa-prm__g > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--color-bg); }
.vpa-prm__g span { font-size: 0.74rem; color: var(--color-text-muted); }
.vpa-prm__g b { font-family: var(--font-heading); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.vpa-prm__g small { font-size: 0.72rem; color: var(--color-text-muted); }
.vpa-prm__g .vpa-d { align-self: flex-start; }
@media (max-width: 700px) { .vpa-prm__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vpa-pc .vpa-terms__r { grid-template-columns: minmax(0, 1fr) 50px 84px; } .vpa-pc .vpa-terms__r > :nth-child(4) { display: none; } }
/* Вкладки аналітики — великі (власник: «таби побільше») */
.vpa-tabs .vp-otab { font-size: 1.04rem; padding: 14px 20px 12px; gap: 8px; }
.vpa-per__b { font-size: 0.92rem; padding: 9px 15px; }
@media (max-width: 700px) { .vpa-tabs .vp-otab { font-size: 0.95rem; padding: 12px 14px 10px; } }

/* 💰 Комісія та розрахунки / Звіти — компактні рядки (25.09) */
.vpr-led { padding: 4px 16px !important; }
.vpr-led__r { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--vpr-line); }
.vpr-led__r:first-child { border-top: 0; }
.vpr-led__r.is-due .vpr-led__m b { color: var(--color-text); }
.vpr-led__ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--color-bg); font-size: 1rem; }
.vpr-led__m { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vpr-led__m b { font-size: 0.9rem; font-weight: 600; }
.vpr-led__m small { font-size: 0.76rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpr-led__amt { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 90px; }
.vpr-led__amt.is-neg { color: var(--vp-danger-fg); }
.vpr-led__amt.is-pos { color: var(--vp-success-fg); }
.vpr-led__chk { font-size: 0.78rem; font-weight: 700; color: var(--color-accent-ink, var(--color-accent)); text-decoration: none; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); border-radius: 8px; padding: 3px 9px; white-space: nowrap; }
.vp-okebab__lbl { display: block; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 0.86rem; }
.vp-okebab__lbl:hover { background: var(--color-bg); }
.vpr-chips em { font-style: normal; opacity: .65; margin-left: 2px; }
@media (max-width: 700px) {
  .vpr-led__r { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px 10px; }
  .vpr-led__r > .vp-obadge, .vpr-led__r > .vpr-led__chk, .vpr-led__r > .vp-btn, .vpr-led__r > .vp-okebab { grid-column: 2 / 3; justify-self: start; }
  .vpr-led__amt { grid-column: 3; grid-row: 1; }
  .vpr-led__r > span:empty { display: none; }
}
.vpr-kep__step { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--vpr-line); }
.vpr-kep__step > b { display: block; margin-bottom: 4px; }
.vpr-kep__opt { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--color-bg); }
.vpr-kep__opt ol { margin: 6px 0 0 18px; padding: 0; line-height: 1.6; }
.vpr-kep__step a, .vpr-kep__opt a { color: var(--vp-info-fg, var(--color-accent)); font-weight: 600; }

/* 🔏 Інструкція КЕП — кроки */
.vpr-kep { border: 1px solid var(--vpr-line); border-radius: 12px; padding: 14px 16px; background: var(--vpr-surface); }
.vpr-kep__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.vpr-kep__head span { font-size: 0.8rem; color: var(--color-text-muted); }
.vpr-kep__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vpr-kep__steps > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.vpr-kep__n { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; background: var(--vpr-accent-soft); color: var(--color-accent-ink, var(--color-accent)); }
.vpr-kep__steps h5 { margin: 4px 0 4px; font-size: 0.92rem; }
.vpr-kep__steps p { margin: 0; font-size: 0.86rem; line-height: 1.6; }
.vpr-kep kbd { display: inline-block; font-family: inherit; font-size: 0.8rem; font-weight: 700; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--vpr-line); background: var(--color-bg); white-space: nowrap; }
.vpr-kep__svc { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin-top: 8px; }
.vpr-kep__card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--color-bg); border: 1px solid var(--vpr-line); font-size: 0.84rem; }
.vpr-kep__card.is-best { border-color: color-mix(in srgb, var(--color-accent) 50%, var(--vpr-line)); background: var(--vpr-accent-soft); }
.vpr-kep__card em { position: absolute; top: -9px; right: 10px; font-style: normal; font-size: 0.66rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--color-accent); color: var(--color-white, #fff); }
.vpr-kep__card small { color: var(--color-text-muted); font-size: 0.76rem; margin-bottom: 4px; }
.vpr-kep__card ul { margin: 2px 0 0; padding-left: 16px; line-height: 1.55; }
.vpr-kep a { color: var(--color-accent-ink, var(--color-accent)); font-weight: 700; }
.vpr-kep__foot { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--vpr-line); font-size: 0.8rem; color: var(--color-text-muted); }
@media (max-width: 800px) { .vpr-kep__svc { grid-template-columns: 1fr; } }
.vpr-kep__card ul { list-style: disc; } .vpr-kep__card li { margin: 1px 0; } .vpr-kep__card li::marker { color: var(--color-accent); }
.vpr-kep__card { gap: 3px; }
.vpr-kep__card ul { flex: 1; }
.vpr-kep__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-weight: 700 !important; font-size: 0.84rem; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--vpr-line)); background: var(--vpr-surface); color: var(--color-accent-ink, var(--color-accent)) !important; transition: background .15s; }
.vpr-kep__btn:hover { background: var(--vpr-accent-soft); }
.vpr-kep__btn.is-main { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white, #fff) !important; }
.vpr-kep__btn.is-main:hover { filter: brightness(1.06); background: var(--color-accent); }
.vpr-kep__btn.is-sm { margin: 0 0 0 6px; padding: 3px 10px; font-size: 0.76rem; }

/* ═══ 🎓 Допомога: Довідка й Навчання (25.09) ═══ */
.vpr-hsearch { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.vpr-hsearch .vp-input { font-size: 1rem; padding: 12px 14px; }
.vpr-hsearch span { font-size: 0.86rem; color: var(--color-text-muted); }
.vpr-htopics { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-bottom: 18px; }
.vpr-htopic { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--vpr-line); background: var(--vpr-surface); font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--color-text); text-align: left; cursor: pointer; box-shadow: var(--vpr-shadow); transition: border-color .15s, transform .15s; }
.vpr-htopic:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--vpr-line)); transform: translateY(-1px); }
.vpr-htopic span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpr-hs { background: var(--vpr-surface) !important; border: 1px solid var(--vpr-line); border-radius: var(--vpr-radius); box-shadow: var(--vpr-shadow); margin-bottom: 10px; scroll-margin-top: 80px; }
.vpr-hs[hidden] { display: none; }
.vpr-hs > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; user-select: none; }
.vpr-hs > summary::-webkit-details-marker { display: none; }
.vpr-hs__ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--vpr-accent-soft); }
.vpr-hs__t { flex: 1; min-width: 0; font-weight: 700; font-size: 1rem; }
.vpr-hs__chev { width: 8px; height: 8px; border: solid var(--color-text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
.vpr-hs[open] .vpr-hs__chev { transform: rotate(-135deg); }
.vpr-hs[open] > summary { border-bottom: 1px solid var(--vpr-line); }
.vpr-hs__b { padding: 14px 18px 16px; font-size: 0.9rem; line-height: 1.6; color: var(--color-text); }
.vpr-hs__b p:first-child { margin-top: 0; }
.vpr-faq { border-bottom: 1px solid var(--vpr-line); }
.vpr-faq[hidden] { display: none; }
.vpr-faq > summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 0.9rem; padding: 10px 0 10px 22px; position: relative; }
.vpr-faq > summary::-webkit-details-marker { display: none; }
.vpr-faq > summary::before { content: '+'; position: absolute; left: 2px; top: 8px; font-weight: 800; color: var(--color-accent-ink, var(--color-accent)); }
.vpr-faq[open] > summary::before { content: '−'; }
.vpr-faq > div { padding: 0 0 12px 22px; color: var(--color-text-muted); font-size: 0.86rem; line-height: 1.55; }
.vpr-learn-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border-radius: var(--vpr-radius);
  background: linear-gradient(120deg, var(--vpr-accent-soft), color-mix(in srgb, var(--vp-purple) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); }
.vpr-learn-hero__ic { font-size: 2.2rem; }
.vpr-learn-hero__t { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.vpr-learn-hero__t b { font-family: var(--font-heading); font-size: 1.3rem; }
.vpr-learn-hero__t span { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; }
.vpr-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.vpr-guide { display: flex; align-items: center; gap: 12px; padding: 14px 15px; border-radius: var(--vpr-radius); border: 1px solid var(--vpr-line); background: var(--vpr-surface); box-shadow: var(--vpr-shadow); font: inherit; text-align: left; cursor: pointer; color: var(--color-text); transition: border-color .15s, transform .15s; }
.vpr-guide:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--vpr-line)); transform: translateY(-1px); }
.vpr-guide__ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; background: var(--vpr-accent-soft); }
.vpr-guide__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vpr-guide__t b { font-size: 0.94rem; }
.vpr-guide__t small { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.4; }
.vpr-guide__go { color: var(--color-accent-ink, var(--color-accent)); font-weight: 800; }
.vpr-learn-help { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 14px 18px; border-radius: var(--vpr-radius); border: 1px dashed var(--vpr-line); }
.vpr-learn-help > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; font-size: 0.88rem; }
.vpr-learn-help span { color: var(--color-text-muted); font-size: 0.84rem; line-height: 1.5; }
.vpr-htopics[hidden], .vpr-hsearch span[hidden] { display: none !important; }

/* ⚙️ Налаштування — вкладки як у «Замовленнях» (25.09) */
.vp-subtabs.vpr-settabs { background: none !important; padding: 0 !important; border-radius: 0 !important; gap: 2px !important; border-bottom: 1px solid var(--vpr-line); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap !important; }
.vp-subtabs.vpr-settabs::-webkit-scrollbar { display: none; }
.vp-subtabs.vpr-settabs .vp-subtab { flex: none !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 13px 18px 11px !important; font-size: 1rem; font-weight: 600; color: var(--color-text-muted); border-bottom: 2.5px solid transparent !important; margin-bottom: -1px; gap: 8px; }
.vp-subtabs.vpr-settabs .vp-subtab:hover { color: var(--color-text); }
.vp-subtabs.vpr-settabs .vp-subtab.active { color: var(--color-text) !important; border-bottom-color: var(--color-accent) !important; }
.vp-subtabs.vp-subtabs--kids { background: none !important; padding: 0 !important; gap: 6px !important; flex-wrap: wrap !important; margin: -4px 0 14px; }
.vp-subtabs.vp-subtabs--kids .vp-subtab { flex: none !important; border: 1px solid var(--vpr-line) !important; background: var(--vpr-surface) !important; border-radius: 999px !important; padding: 7px 14px !important; font-size: 0.86rem; box-shadow: none !important; }
.vp-subtabs.vp-subtabs--kids .vp-subtab.active { border-color: var(--color-accent) !important; background: var(--vpr-accent-soft) !important; color: var(--color-accent-ink, var(--color-accent)) !important; font-weight: 700; }
.vpr-bprog em[role="button"] { cursor: pointer; }
.vpr-bprog em[role="button"]:hover { border-color: var(--color-accent); }
/* ⚙️ Вкладки налаштувань — на всю ширину (власник) */
.vp-subtabs.vpr-settabs .vp-subtab { flex: 1 1 0 !important; justify-content: center; white-space: nowrap; }
.vp-subtabs.vp-subtabs--kids { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
.vp-subtabs.vp-subtabs--kids .vp-subtab { flex: 1 1 0 !important; justify-content: center; white-space: nowrap; }
@media (max-width: 900px) { .vp-subtabs.vpr-settabs .vp-subtab, .vp-subtabs.vp-subtabs--kids .vp-subtab { flex: none !important; } }
.vpr-cchg { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--vpr-line); }
.vps-older { margin-top: 8px; }
.vps-older > summary { cursor: pointer; font-weight: 700; font-size: 0.88rem; color: var(--color-accent-ink, var(--color-accent)); padding: 6px 0; }

/* ═══ 📱 Моб-аудит 25.09 ═══ */
/* Картки «Огляду» не розтягуються ширше екрана довгими назвами */
.vpr-stack > *, .vp-content > *, #vp-tab-content > * { min-width: 0; }
.vpr-stack > .vp-card { max-width: 100%; overflow: hidden; }
/* Форма інд. замовлень: редактор+превʼю в одну колонку без розпирання */
@media (max-width: 1000px) { .cf-cols { grid-template-columns: minmax(0, 1fr) !important; } .cf-cols > * { min-width: 0; } }
@media (max-width: 760px) {
  /* Заголовок сторінки дублює верхню панель — ховаємо, щоб не «жер» місце */
  .vp-osplit-head > h1, .vp-page-header > h1 { display: none; }
  .vp-osplit-head { margin-bottom: 8px; gap: 8px; }
  /* Рядок дій картки замовлення: головна кнопка на всю ширину, іконки — рядом нижче (нічого не обрізається) */
  .vp-oc-acts { display: flex !important; flex-wrap: wrap; gap: 6px; width: 100%; }
  .vp-oc-acts > .vp-btn { flex: 1 1 100%; justify-content: center; }
  .vp-oc-acts > .vp-oc-ibtn, .vp-oc-acts > .vp-okebab > summary { flex: 0 0 40px; width: 40px; height: 40px; }
  /* Чати: список на всю висоту, без порожнечі */
  .vp-chat-2col { height: auto !important; min-height: 0 !important; }
  .vp-chat-listbox { height: auto !important; }
  /* Аналітика: кнопки періоду не стискаються й не обрізаються */
  .vpa-per__b { flex: none; }
  /* Тап-цілі: «×» закриття порад і посилання «Усі →» */
  .vpr-todo__x, .vpr-rec [aria-label*="Закрити"], .vpr-rec .vpr-rec__x { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
  .vpr-more, .vpa-link { padding: 8px 4px; }
}
/* 📱 Огляд: колонки сітки не розпирає довга назва товару */
.vpr-grid2 > * { min-width: 0; }
@media (max-width: 900px) { .vpr-grid2 { grid-template-columns: minmax(0, 1fr) !important; } }
.vpr-list__t { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  /* Промокод: перемикач «на сайті» · «Вимкнути» · «⋯» в один рядок без накладань */
  .vpr-pr { grid-template-columns: 64px auto minmax(0, 1fr) auto !important; }
  .vpr-pr > .vpr-pr__tgl { grid-column: 3; justify-self: end; }
  .vpr-pr > .vp-okebab { grid-column: 4; justify-self: end; }
  /* Чипи-фільтри в прокручуваному рядку — не стискаються (текст не обрізається) */
  .vpr-chips > .vpr-chip, .vpr-chips > button { flex: none; white-space: nowrap; }
}

/* ═══ 📱 Моб-патч 2 (25.09) ═══ */
@media (max-width: 760px) {
  /* «Як це працює» — повноцінна тап-ціль, один рядок */
  .vp-tour-inline > summary { min-height: 40px; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Сторінка бренду: перемикач «Фото / Колір теми» — під банером, не поверх іконки */
  .vpr-bhead__tools { position: static !important; margin: 8px auto 0; justify-content: center; }
  .vpr-bhead__ban { display: flex; flex-direction: column; }
  /* Platinum: спершу заголовок, потім ціна й кнопка */
  .pm-hero__top > .pm-hero__txt { order: 0; }
  .pm-hero__top > .pm-hero__buy { order: 1; }
  .pm-hero h2 { font-size: 1.5rem; }
  .pm-perks--key { grid-template-columns: 1fr !important; }
  /* Чат: панель інструментів — рівна прокрутка, кнопки не стискаються */
  #vp-chat-tools, .vpr-chtools { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  #vp-chat-tools > *, .vpr-chtools > * { flex: none; }
  /* Шторка: пункти — великі тап-цілі */
  .vp-osheet__menu > button, .vp-osheet__menu > a, .vp-osheet__menu .vp-rowmenu__item { min-height: 48px; display: flex; align-items: center; gap: 10px; }
  /* Шапки: пульс у рядок, не в стовпчик */
  .vp-opulse { flex-wrap: wrap; gap: 4px 12px; font-size: 0.84rem; }
}
@media (max-width: 760px) {
  /* Дії замовлення: головна кнопка — окремим рядком на всю ширину, під нею іконки (стрілка не зникає) */
  .vp-oc-acts > .vp-btn { flex: 1 1 100% !important; width: 100% !important; }
  .vp-oc-acts > .vp-oc-ibtn, .vp-oc-acts > .vp-okebab { flex: 0 0 auto !important; }
  /* Шторка: пункт — рядок «іконка + текст», не стовпчик */
  .vp-osheet__menu .vp-rowmenu__item { flex-direction: row !important; justify-content: flex-start !important; text-align: left; background: none; border: 0; width: 100%; padding: 12px 14px !important; font-size: 0.95rem; color: var(--color-text); border-radius: 10px; }
  .vp-osheet__menu .vp-rowmenu__item.is-danger { color: var(--vp-danger-fg); }
  /* Банер бренду: перемикач «Фото / Колір теми» — у правому верхньому куті, контент банера нижче */
  .vpr-bhead__tools { position: absolute !important; top: 8px; right: 8px; margin: 0 !important; font-size: 0.8rem; }
  .vpr-bhead__ban { position: relative; padding-top: 40px; }
}
/* 🛡 Чат з адміном: на телефоні — пункт меню «☰ Ще» замість плаваючої кнопки, що закривала контент */
.vp-sb-admin { display: none; }
@media (max-width: 760px) {
  #vp-admin-fab { display: none !important; }
  .vp-sb-admin { display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); margin: 8px 12px 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--vp-purple) 45%, transparent);
    background: color-mix(in srgb, var(--vp-purple) 14%, transparent); color: var(--sb-ink, var(--color-text)); font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
}
/* 📱 Меню «☰ Ще»: ширше — назви розділів не обрізаються */
@media (max-width: 900px) {
  .vp-sidebar { width: min(330px, 88vw) !important; left: calc(-1 * min(346px, 92vw)) !important; }
  .vp-sidebar.open { left: 0 !important; }
}
/* 📱 Шторка «⋯»: назва пункту й опис — обидва ліворуч, рівною колонкою */
.vp-osheet__menu > button, .vp-osheet__menu > a { align-items: flex-start !important; justify-content: center !important; text-align: left !important; width: 100%; padding: 11px 14px !important; border-radius: 10px; }
.vp-osheet__menu > button b, .vp-osheet__menu > a b { display: block; text-align: left; font-size: 0.95rem; }
.vp-osheet__menu > button small, .vp-osheet__menu > a small { display: block; text-align: left; margin-top: 2px; }
.vp-osheet__menu > button:active, .vp-osheet__menu > a:active { background: var(--color-bg); }
/* 📱 Дашборд івенту: дії рівною сіткою 2×2 (без самотньої 🔄 у другому ряду) */
.vpr-evhead__lbl { display: none; }
@media (max-width: 760px) {
  .vpr-evhead__a { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .vpr-evhead__a > .vp-btn { width: 100%; justify-content: center; margin: 0; }
  .vpr-evhead__lbl { display: inline; }
}
/* 📱 Картка івенту: дії рівною сіткою 2 колонки (як у дашборді) */
@media (max-width: 760px) {
  .ev-row__acts { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .ev-row__acts > .vp-btn { width: 100%; justify-content: center; margin: 0 !important; }
}
/* 📱 Прев'ю «Як бачить покупець» — акордеон (згорнуто за замовчуванням); вкладки напрямів анкети — прокрутка без обрізання */
@media (max-width: 760px) {
  .cf-prev__head, .vpr-cmprev__h > span:first-child { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-size: 0.9rem !important; }
  .cf-prev__head::after, .vpr-cmprev__h > span:first-child::after { content: ''; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
  .cf-prev.is-open .cf-prev__head::after, .vpr-cmprev.is-open .vpr-cmprev__h > span:first-child::after { transform: rotate(-135deg); }
  .cf-prev:not(.is-open) .cf-prev__body, .vpr-cmprev:not(.is-open) .vpr-cmprev__in, .vpr-cmprev:not(.is-open) .vpr-cmprev__tabs { display: none !important; }
  .cf-prev:not(.is-open) .cf-prev__head { border-bottom: 0; }
  .vpr-cmprev__h { flex-wrap: wrap; }
  .vpr-cmprev__h > span:first-child { flex: 1 1 100%; }
  .cf-dtabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .cf-dtabs::-webkit-scrollbar { display: none; }
  .cf-dtab { flex: none !important; white-space: nowrap; }
}
/* 📱 Реальне превʼю івенту: сторінка займає рівно видиму висоту (низ/футер не обрізаються) */
@media (max-width: 760px) {
  #ev-realpv > div:last-child { padding: 0 !important; align-items: stretch !important; overflow: hidden !important; min-height: 0; }
  #ev-realpv-fwrap { height: 100%; max-width: 100% !important; width: 100% !important; }
  #ev-realpv-frame { height: 100% !important; border-radius: 0 !important; }
}
/* 📱 «Про бренд»: фото майстра по центру */
@media (max-width: 760px) {
  .vpr-babout { grid-template-columns: 1fr !important; }
  .vpr-babout__ph { align-items: center; text-align: center; }
  .vpr-babout__ph .vp-dropzone { width: 200px !important; height: 200px !important; margin: 0 auto; }
  .vpr-babout__ph small { max-width: 260px; }
}
/* 📱 «Що ще додати» / «Варто налаштувати» — один рядок із прокруткою, а не 3 рядки бульбашок */
@media (max-width: 760px) {
  .vpr-bprog:not(.is-full) { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; white-space: nowrap; margin-right: -16px; padding-right: 16px; }
  .vpr-bprog::-webkit-scrollbar { display: none; }
  .vpr-bprog > * { flex: none; }
  .vpr-bprog em { padding: 4px 10px; font-size: 0.8rem; }
}
/* 📱 Промокод: 1-й рядок — знижка + код і умови; 2-й рядок на ВСЮ ширину — «на сайті» · «Вимкнути» · «⋯» */
@media (max-width: 700px) {
  .vpr-pr { grid-template-columns: 64px minmax(0, 1fr) auto auto !important; gap: 10px 10px !important; }
  .vpr-pr > .vpr-pr__disc { grid-column: 1 !important; grid-row: 1 !important; align-self: start; font-size: 1rem !important; padding: 8px 2px !important; }
  .vpr-pr > .vpr-pr__disc.is-long { font-size: 0.82rem !important; }
  .vpr-pr > .vpr-pr__m { grid-column: 2 / 5 !important; grid-row: 1 !important; }
  .vpr-pr > .vpr-pr__site { grid-column: 1 / 3 !important; grid-row: 2 !important; justify-self: start; }
  .vpr-pr > .vpr-pr__tgl { grid-column: 3 !important; grid-row: 2 !important; justify-self: end; }
  .vpr-pr > .vp-okebab { grid-column: 4 !important; grid-row: 2 !important; justify-self: end; }
}
@media (max-width: 760px) {
  /* ТОП/VIP: «Як це виглядає в каталозі» — акордеон */
  .pm-show__t { cursor: pointer; display: flex !important; align-items: center; justify-content: space-between; gap: 8px; margin: 0 !important; min-height: 32px; }
  .pm-show__t::after { content: ''; flex: none; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
  .pm-show.is-open .pm-show__t::after { transform: rotate(-135deg); }
  .pm-show:not(.is-open) .pm-show__grid { display: none !important; }
  .pm-show.is-open .pm-show__grid { margin-top: 10px; }
  .pm-show__t span { display: none; }
  /* Статистика просування: 2 колонки — «у просуванні» на всю ширину, перегляди й продажі поруч */
  .pm-stats { display: grid !important; grid-template-columns: 1fr 1fr; }
  .pm-stats > .pm-stat { min-width: 0 !important; padding: 10px 12px !important; gap: 9px !important; border-left: 0 !important; }
  .pm-stats > .pm-stat:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--vpr-line); }
  .pm-stats > .pm-stat:nth-child(3) { border-left: 1px solid var(--vpr-line) !important; }
  .pm-stats > .pm-stat > div:first-child { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
}
/* 📱 Чипи-фільтри всюди: компактні, один рядок із прокруткою */
@media (max-width: 760px) {
  .vpr-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 6px !important; margin-right: -16px; padding-right: 16px; }
  .vpr-chips::-webkit-scrollbar { display: none; }
  .vpr-chip { flex: none !important; white-space: nowrap; padding: 6px 11px !important; font-size: 0.82rem !important; min-height: 34px; }
}
/* 📱 Рядок звіту/операції: назва й сума вгорі; статус під назвою; дія й «⋯» — одним рядком */
@media (max-width: 700px) {
  .vpr-led__r { grid-template-columns: 34px minmax(0, 1fr) auto auto !important; gap: 6px 10px !important; align-items: center; }
  .vpr-led__r > .vpr-led__ic { grid-column: 1 !important; grid-row: 1 !important; align-self: start; }
  .vpr-led__r > .vpr-led__m { grid-column: 2 / 4 !important; grid-row: 1 !important; }
  .vpr-led__r:not(:has(.vpr-led__amt)) > .vpr-led__m { grid-column: 2 / 5 !important; }
  .vpr-led__r > .vpr-led__amt { grid-column: 4 !important; grid-row: 1 !important; min-width: 0; }
  .vpr-led__r > .vp-obadge { grid-column: 2 / 5 !important; grid-row: 2 !important; justify-self: start; }
  .vpr-led__r > .vpr-led__chk { grid-column: 3 / 5 !important; grid-row: 2 !important; justify-self: end; }
  .vpr-led__r > .vp-btn { grid-column: 2 / 4 !important; grid-row: 3 !important; justify-self: stretch; justify-content: center; }
  .vpr-led__r > .vp-okebab { grid-column: 4 !important; grid-row: 3 !important; justify-self: end; }
  .vpr-led__r:has(> .vp-obadge) > .vpr-led__chk { grid-row: 2 !important; }
}
/* Шторка: пункт-label (КЕП) вирівняний з кнопками */
.vp-osheet__menu .vp-okebab__lbl { padding: 11px 14px !important; min-height: 48px; display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
/* 📱 Шапки: без опису-підпису й мітки «Варто налаштувати / Що ще додати» — лише лічильник і чипи одним рядком */
@media (max-width: 760px) {
  .vp-opulse__desc { display: none !important; }
  .vpr-bprog:not(.is-full) > span:first-child { display: none; }
  .vpr-bprog { margin-top: -2px; margin-bottom: 10px; }
}
.vpr-nbu > summary::-webkit-details-marker { display: none; } .vpr-nbu > summary::after { content: ""; flex: none; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; } .vpr-nbu[open] > summary::after { transform: rotate(-135deg); } @media (max-width: 760px) { .vpr-nbu > summary > span { display: none; } }

/* ═══ 🔔 Новини Ниткаль + шапка меню (26.09) ═══ */
/* ✕ у картці бренду: той самий квадратик, що ↗ і 🔔 */
.vp-sb-brand { position: relative; }
.vp-sb-brand .vp-drawer-close { display: none; }
@media (max-width: 900px) {
  .vp-sb-brand .vp-drawer-close { display: inline-flex !important; position: static !important; flex: 0 0 34px; width: 34px !important; height: 34px !important;
    border-radius: 10px !important; background: color-mix(in srgb, var(--sb-ink) 12%, transparent) !important; color: var(--sb-ink) !important; font-size: 1rem; }
  .vp-sb-brand .vp-sb-brand__go { flex-basis: 34px; width: 34px; height: 34px; }
  .vp-sb-brand { gap: 8px; }
}
.vp-bell { position: relative; border: 0; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.vp-bell__b { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
  background: var(--vp-danger, var(--color-accent)); color: var(--color-white, #fff); font-size: 0.64rem; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--color-primary); }
.vp-bell__b[hidden] { display: none !important; }
/* Верхня панель (телефон): кнопки праворуч */
.vp-tb-acts { display: none; }
@media (max-width: 900px) {
  .vp-topbar { padding-right: 96px !important; }
  .vp-tb-acts { display: flex; gap: 6px; position: absolute; right: 10px; top: calc(8px + env(safe-area-inset-top, 0px)); }
  .vp-tb-btn { position: relative; width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--color-border); background: var(--color-bg);
    color: var(--color-text); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer; padding: 0; }
  .vp-tb-btn .vp-bell__b { box-shadow: 0 0 0 2px var(--vp-surface, var(--color-bg)); }
}
/* Панель новин: справа (веб) / на весь екран (телефон) */
.vp-news-ov { position: fixed; inset: 0; z-index: 10060; background: rgba(12,10,8,.5); display: flex; justify-content: flex-end; }
.vp-news { width: min(560px, 100vw); height: 100%; background: var(--vp-surface, var(--color-bg)); color: var(--color-text); display: flex; flex-direction: column;
  box-shadow: -16px 0 40px rgba(0,0,0,.25); }

.vp-news__h { display: flex; align-items: flex-start; gap: 12px; padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 14px; border-bottom: 1px solid var(--color-border); }
.vp-news__h > div { flex: 1; min-width: 0; }
.vp-news__h h2 { margin: 0; font-size: 1.15rem; }
.vp-news__h p { margin: 3px 0 0; font-size: 0.82rem; color: var(--color-text-muted); }
.vp-news__x { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); cursor: pointer; font-size: 1rem; }
.vp-news__list { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.vp-news__empty { padding: 36px 16px; text-align: center; color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.55; }
.vp-news__empty b { display: block; color: var(--color-text); font-size: 1rem; margin-bottom: 6px; }
.vp-news__i { border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px; background: var(--color-bg); }
.vp-news__i.is-new { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg)); }
.vp-news__i--important { border-left: 3px solid var(--vp-warning, var(--color-accent)); }
.vp-news__meta { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--color-text-muted); margin-bottom: 4px; }
.vp-news__k { font-weight: 600; }
.vp-news__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); margin-left: auto; }
.vp-news__i h3 { margin: 0 0 4px; font-size: 0.98rem; line-height: 1.35; }
.vp-news__body { font-size: 0.88rem; line-height: 1.55; color: var(--color-text); overflow-wrap: anywhere; }
.vp-news__body a { color: var(--color-accent); }
.vp-news__go { display: inline-flex; margin-top: 8px; font-size: 0.86rem; font-weight: 600; color: var(--color-accent); text-decoration: none; }
.vp-news__f { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-border); }
.vp-news__f .vp-btn { width: 100%; justify-content: center; }
@media (max-width: 760px) { .vp-news { width: 100vw; box-shadow: 0 -10px 40px rgba(0,0,0,.2); } }

.vp-news__f .vp-btn { gap: 8px; }
@media (min-width: 901px) { .vp-sb-brand { gap: 8px; } .vp-sb-brand .vp-sb-brand__go { flex-basis: 28px; width: 28px; height: 28px; } }

/* ═══ ✨ Рух: поява й переходи (26.09) ═══ */
/* Пункт «🔔 Новини» під «Оглядом» */
.vp-nav-news { cursor: pointer; }
.vp-nav-news .vp-nav-link__badge[hidden], [data-news-badge][hidden] { display: none !important; }
.vp-nav-news .vp-nav-link__badge { margin-left: auto; }
/* Дзвіночок «дзеленькає», коли є нове */
@keyframes vpRing { 0%,100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.vp-bell.is-ring, .vp-nav-news.is-ring .vp-ni { animation: vpRing .9s ease-in-out 2; transform-origin: 50% 10%; }
@keyframes vpPop { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.is-ring [data-news-badge] { animation: vpPop .35s cubic-bezier(.34,1.56,.64,1); }
/* Вкладка: мʼяка поява */
@keyframes vpTabIn { from { opacity: .25; } to { opacity: 1; } }
.vp-tab-enter { animation: vpTabIn .24s ease-out; }
/* Панель новин: фон плавно, панель виїжджає (веб — справа, телефон — знизу шторкою); закриття — у зворотний бік */
@keyframes vpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vpFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes vpSlideR { from { transform: translateX(100%); } to { transform: none; } }
@keyframes vpSlideROut { from { transform: none; } to { transform: translateX(100%); } }
@keyframes vpSlideUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes vpSlideDown { from { transform: none; } to { transform: translateY(100%); } }
@keyframes vpItemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Затемнення — лише фон (background-color), а не opacity всього шару: інакше панель напівпрозора, поки виїжджає */
@keyframes vpDimIn { from { background-color: rgba(12,10,8,0); } }
@keyframes vpDimOut { to { background-color: rgba(12,10,8,0); } }
.vp-news-ov { animation: vpDimIn .24s ease-out; }
.vp-news-ov .vp-news { animation: vpSlideR .32s cubic-bezier(.22,1,.36,1); }
.vp-news-ov.is-closing { animation: vpDimOut .22s ease-in forwards; pointer-events: none; }
.vp-news-ov.is-closing .vp-news { animation: vpSlideROut .22s cubic-bezier(.4,0,1,1) forwards; }
.vp-news__i { animation: vpItemIn .34s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(80ms + var(--i, 0) * 45ms); }
@media (max-width: 760px) {
  .vp-news-ov { align-items: flex-end; }
  .vp-news { height: calc(100% - 28px - env(safe-area-inset-top, 0px)); border-radius: 22px 22px 0 0; }
  .vp-news__h { padding-top: 22px; position: relative; }
  .vp-news__h::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--color-border); }
  .vp-news-ov .vp-news { animation: vpSlideUp .38s cubic-bezier(.22,1,.36,1); }
  .vp-news-ov.is-closing .vp-news { animation: vpSlideDown .22s cubic-bezier(.4,0,1,1) forwards; }
}
/* Нижні шторки «⋯» — фон плавно, панель виїжджає знизу з пружинкою */
.vp-osheet { animation: vpDimIn .22s ease-out; }
.vp-osheet__panel { animation: vpSlideUp .34s cubic-bezier(.22,1,.36,1); position: relative; padding-top: 14px !important; }
.vp-osheet__panel:focus { outline: none; }
/* «ручка» шторки — як у новинах */
.vp-osheet__panel::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--color-border); }
.vp-osheet__menu > * { animation: vpItemIn .3s cubic-bezier(.22,1,.36,1) both; }
.vp-osheet__menu > *:nth-child(2) { animation-delay: 30ms; } .vp-osheet__menu > *:nth-child(3) { animation-delay: 60ms; }
.vp-osheet__menu > *:nth-child(4) { animation-delay: 90ms; } .vp-osheet__menu > *:nth-child(n+5) { animation-delay: 120ms; }
/* Нижня навігація: іконка «підстрибує» при виборі */
@keyframes vpBnPop { 0% { transform: scale(1); } 40% { transform: scale(.82); } 75% { transform: scale(1.12); } 100% { transform: scale(1); } }
.vp-bn__item.active .vp-bn__ic { animation: vpBnPop .36s cubic-bezier(.34,1.56,.64,1); }
/* Меню «☰ Ще»: пункти заїжджають слідом за шторкою */
@media (max-width: 900px) {
  .vp-sidebar.open .vp-sb-brand, .vp-sidebar.open .vp-nav > * { animation: vpItemIn .34s cubic-bezier(.22,1,.36,1) both; }
  .vp-sidebar.open .vp-nav > *:nth-child(2) { animation-delay: 30ms; } .vp-sidebar.open .vp-nav > *:nth-child(3) { animation-delay: 55ms; }
  .vp-sidebar.open .vp-nav > *:nth-child(4) { animation-delay: 80ms; } .vp-sidebar.open .vp-nav > *:nth-child(5) { animation-delay: 100ms; }
  .vp-sidebar.open .vp-nav > *:nth-child(n+6) { animation-delay: 120ms; }
}
@media (prefers-reduced-motion: reduce) {
  .vp-tab-enter, .vp-news-ov, .vp-news-ov .vp-news, .vp-news__i, .vp-osheet, .vp-osheet__panel, .vp-osheet__menu > *,
  .vp-bn__item.active .vp-bn__ic, .vp-bell.is-ring, .vp-nav-news.is-ring .vp-ni, .vp-sidebar.open .vp-nav > *, .vp-sidebar.open .vp-sb-brand { animation: none !important; }
}
@media (min-width: 761px) { .vp-news__h { padding: 22px 26px 16px; } .vp-news__list { padding: 18px 24px; gap: 12px; } .vp-news__i { padding: 16px 18px; } .vp-news__i h3 { font-size: 1.05rem; } .vp-news__body { font-size: 0.92rem; } .vp-news__f { padding: 14px 24px; } }

/* 🛡 Підтримка Ниткаль: компактна шапка (26.09; admin-chat-fab.js не чіпаємо — лише CSS) */
#vp-admin-panel__hd { padding: 8px 12px 8px 14px !important; gap: 8px !important; }
#vp-admin-panel__hd > span:first-child { display: none; }   /* 🛡 дублює заголовок */
#vp-admin-panel__sub { display: none; }                       /* режим і так видно на перемикачі нижче */
#vp-fab-quota { margin-top: 1px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vp-fab-quota:empty { display: none; }
#vp-admin-panel__hd button { width: 30px !important; height: 30px !important; }
#vp-admin-panel__modes { padding: 6px 10px !important; gap: 6px !important; }
#vp-admin-panel__modes .vp-fabmode { padding: 6px 10px !important; min-height: 0 !important; font-size: 0.85rem !important; }

/* 🏪 Низ меню: «Моя сторінка» + «Чат з адміном» одним рядком (26.09) */
.vp-sb-quick { display: flex; gap: 8px; margin: 8px 0 6px; }
.vp-sb-quick > * { flex: 1 1 0; min-width: 0; }
.vp-sb-mypage { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 10px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 0.92rem;
  color: var(--sb-ink); background: color-mix(in srgb, var(--color-accent) 22%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent); white-space: nowrap; transition: background .15s; }
.vp-sb-mypage:hover { background: var(--color-accent); }
@media (max-width: 760px) {
  .vp-sb-quick .vp-sb-admin { width: auto !important; margin: 0 !important; padding: 11px 10px !important; justify-content: center; font-size: 0.92rem !important; white-space: nowrap; }
}
.vp-sidebar-footer a.vp-sb-mypage { color: var(--sb-ink, #fff) !important; padding: 11px 10px !important; font-size: 0.92rem !important; }
/* Рядок «Моя сторінка / Чат з адміном» — одним стилем з «Сайт / Вийти», текст не впирається в краї */
.vp-sidebar-footer .vp-sb-quick > a.vp-sb-mypage, .vp-sidebar-footer .vp-sb-quick > .vp-sb-admin {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; box-sizing: border-box;
  padding: 8px 6px !important; margin: 0 !important; width: auto !important; border-radius: 12px !important;
  font: inherit; font-weight: 700 !important; font-size: 0.86rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--sb-ink, #fff) !important; background: color-mix(in srgb, var(--sb-ink) 9%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--sb-ink) 14%, transparent) !important; }
.vp-sidebar-footer .vp-sb-quick > a.vp-sb-mypage:hover, .vp-sidebar-footer .vp-sb-quick > .vp-sb-admin:hover { background: color-mix(in srgb, var(--sb-ink) 16%, transparent) !important; }
/* 🔔 Побачена новина: крапка «нове» гасне, підсвітка мʼяко сходить */
.vp-news__dot { transition: opacity .4s, transform .4s; }
.vp-news__i { transition: background-color .6s, border-color .6s; }
.vp-news__i.is-new.is-seen .vp-news__dot { opacity: 0; transform: scale(.3); }
.vp-news__i.is-new.is-seen { border-color: var(--color-border); background: var(--color-bg); }

/* 📱 Смуги вкладок (26.09, власник): 2 вкладки — кожна на пів екрана; 3+ — трохи менше половини (44%),
   щоб з краю визирала наступна й було видно, що є ще. Лише перемикачі, не фільтр-чипи. */
@media (max-width: 760px) {
  :is(.vp-subtabs:not(.vp-subtabs--kids), .vp-otabs, .vpa-seg, .vpr-seg) {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  :is(.vp-subtabs:not(.vp-subtabs--kids), .vp-otabs, .vpa-seg, .vpr-seg)::-webkit-scrollbar { display: none; }
  :is(.vp-subtabs:not(.vp-subtabs--kids), .vp-otabs, .vpa-seg, .vpr-seg) > :is(button, a, .vp-subtab) {
    flex: 1 0 auto !important; min-width: calc(50% - 4px); max-width: none; justify-content: center; text-align: center; white-space: nowrap; scroll-snap-align: start; box-sizing: border-box; }
  :is(.vp-subtabs:not(.vp-subtabs--kids), .vp-otabs, .vpa-seg, .vpr-seg):has(> :nth-child(3 of :is(button, a, .vp-subtab))) > :is(button, a, .vp-subtab) {
    flex: 0 0 auto !important; min-width: 44%; }   /* 44% — мінімум; довга назва з лічильником розширює вкладку, а не обрізається */
  /* текст не вилазить: задовга назва — з «…» */

}

/* 🐞 26.09: згорнута група меню — пункти невидимі, але лишались клікабельними смужкою між заголовками
   (тап у проміжок відкривав «Мої товари», «Чати», «Сторінку бренду»…). Вимикаємо їх, поки група згорнута. */
.vp-nav-group-items { overflow: hidden; }
.vp-nav-group.collapsed .vp-nav-group-items { visibility: hidden; pointer-events: none; transition: grid-template-rows .25s ease, opacity .2s ease, visibility 0s linear .25s; }
.vp-nav-group:not(.collapsed) .vp-nav-group-items { visibility: visible; }

/* ➡️ Смуги вкладок (телефон): стрілка «›»/«‹» на краю, коли є ще вкладки (26.09, «як для тупих» 🙂) */
.vpa-seg, .vpr-seg, .vp-otabs { --vp-strip-bg: var(--color-bg); }
.vp-subtabs { --vp-strip-bg: color-mix(in srgb, var(--color-border) 55%, var(--color-bg)); }
@keyframes vpNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@media (max-width: 760px) {
  .vp-strip-more::after, .vp-strip-less::before {
    position: sticky; z-index: 3; flex: 0 0 40px !important; min-width: 40px !important; align-self: stretch; pointer-events: none;
    display: flex; align-items: center; font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--color-accent); }
  .vp-strip-more::after { content: "›"; right: 0; margin-left: -40px; justify-content: flex-end; padding-right: 9px;
    background: radial-gradient(circle at calc(100% - 14px) 50%, color-mix(in srgb, var(--color-accent) 16%, var(--vp-strip-bg)) 13px, transparent 14px),
                linear-gradient(to right, transparent, var(--vp-strip-bg) 45%); }
  .vp-strip-less::before { content: "‹"; left: 0; margin-right: -40px; justify-content: flex-start; padding-left: 9px;
    background: radial-gradient(circle at 14px 50%, color-mix(in srgb, var(--color-accent) 16%, var(--vp-strip-bg)) 13px, transparent 14px),
                linear-gradient(to left, transparent, var(--vp-strip-bg) 45%); }
  .vp-strip-nudge.vp-strip-more::after { animation: vpNudge .7s ease-in-out .4s 2; }
}
@media (prefers-reduced-motion: reduce) { .vp-strip-nudge.vp-strip-more::after { animation: none; } }

/* ═══ 🧭 Єдиний вигляд вкладок (26.09, власник: «як Головне / AI-поради» всюди) ═══
   Доріжка — пісочна, активна — мʼяка акцентна «пігулка» з рамкою. Для .vp-subtabs, .vp-otabs (замовлення, аналітика,
   звіти, чати, події, просування…) і перемикача періоду .vpa-seg. Лічильники (em) і «гарячі» крапки — як були. */
:root { --vp-tabs-track: color-mix(in srgb, var(--color-border) 55%, var(--color-bg)); }
.vp-subtabs:not(.vp-subtabs--kids), .vp-otabs, .vpa-seg {
  background: var(--vp-tabs-track) !important; border: 0 !important; border-radius: 12px !important; padding: 4px !important; gap: 4px !important; box-shadow: none !important; }
.vp-otabs { margin-bottom: 14px; }
.vp-subtabs:not(.vp-subtabs--kids) > .vp-subtab, .vp-otabs > .vp-otab, .vpa-seg > button {
  border: 1px solid transparent !important; border-radius: 9px !important; margin: 0 !important; background: transparent; box-shadow: none !important;
  color: var(--color-text-muted); font-weight: 600; justify-content: center; transition: background .15s, color .15s, border-color .15s; }
.vp-otabs > .vp-otab { padding: 9px 14px; }
.vp-subtabs:not(.vp-subtabs--kids) > .vp-subtab:hover, .vp-otabs > .vp-otab:hover, .vpa-seg > button:hover { background: color-mix(in srgb, var(--vpr-surface) 55%, transparent); color: var(--color-text); }
.vp-subtabs:not(.vp-subtabs--kids) > .vp-subtab.active, .vp-otabs > .vp-otab[aria-selected="true"], .vpa-seg > button[aria-pressed="true"] {
  background: var(--vpr-accent-soft) !important; color: var(--color-accent-ink, var(--color-accent)) !important;
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)) !important; box-shadow: none !important; }
.vp-otabs > .vp-otab em { background: color-mix(in srgb, var(--vpr-surface) 70%, transparent); }
.vp-otabs > .vp-otab[aria-selected="true"] em { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.vp-otabs > .vp-otab:focus-visible { border-radius: 9px !important; }
/* стрілки «›/‹» — під колір доріжки */
.vp-subtabs, .vp-otabs, .vpa-seg { --vp-strip-bg: var(--vp-tabs-track); }

/* 🧭 Меню (26.09): на вебі ширше (320px), смуга прокрутки прихована (гортається й далі — колесом/пальцем) */
@media (min-width: 761px) { .vp-layout { grid-template-columns: 320px 1fr !important; } }
.vp-sidebar { scrollbar-width: none; -ms-overflow-style: none; }
.vp-sidebar::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* довгі пункти («Індивідуальні замовлення») — переносом у 2 рядки замість «…» */
.vp-sidebar .vp-nav-group-inner .vp-nav-link .vp-nt { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }

/* ═══ 🧵 Матеріали й закупки — під новий кабінет (26.09) ═══ */
.mat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mat-head__t { flex: 1; min-width: 240px; }
.mat-head__t h1 { margin: 0; }
.mat-head__t .vp-page-sub { margin: 6px 0 0; }
.mat-head__a { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mat-kebab { min-width: 40px; justify-content: center; font-weight: 700; letter-spacing: .05em; }
.mat-kpis .mat-kpi-low { cursor: pointer; transition: background .15s ease; }
.mat-kpis .mat-kpi-low:hover { background: var(--color-bg); }
.mat-kpis .mat-kpi-low.is-bad b { color: var(--vp-danger); }
.mat-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.mat-tabs { flex: 0 1 auto; margin: 0 !important; }
.mat-tabn { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; align-items: center; justify-content: center; font-size: 0.72rem; background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.vp-subtab.active .mat-tabn { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.mat-search { flex: 1 1 220px; max-width: 380px; }
.mat-list { display: flex; flex-direction: column; gap: 8px; }
.mat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 16px !important; margin: 0 !important; }
.mat-row.is-low { box-shadow: inset 3px 0 0 var(--vp-danger); }
.mat-row.is-arch { opacity: .6; }
.mat-row__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mat-row__name { font-size: 0.96rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-row__sub { display: flex; gap: 6px; flex-wrap: wrap; font-size: 0.8rem; color: var(--color-text-muted); }
.mat-row__sub > span:not(.mat-chip) + span:not(.mat-chip)::before { content: '· '; }
.mat-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-muted); }
.mat-chip--link { background: var(--vp-info-bg); color: var(--vp-info-fg); border-color: transparent; }
.mat-row__meta { font-size: 0.78rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.mat-row__note { font-size: 0.76rem; color: var(--color-text-muted); font-style: italic; }
.mat-row__stock { text-align: right; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; min-width: 90px; }
.mat-row__stock b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.mat-row.is-low .mat-row__stock b { color: var(--vp-danger); }
.mat-row__stock span { font-size: 0.78rem; color: var(--color-text-muted); }
.mat-row__stock small { font-size: 0.7rem; color: var(--color-text-muted); }
.mat-row__acts { display: flex; gap: 6px; align-items: center; }
.mat-empty { padding: 22px !important; text-align: center; color: var(--color-text-muted); font-size: 0.9rem; }
/* вікна: центр на вебі, шторка на телефоні */
.mat-ov { position: fixed; inset: 0; z-index: 10001; background: rgb(20 15 10 / .5); display: flex; align-items: center; justify-content: center; padding: 16px; animation: matFade .18s ease-out; }
.mat-ov.is-closing { animation: matFadeOut .2s ease-in forwards; }
@keyframes matFade { from { opacity: 0; } } @keyframes matFadeOut { to { opacity: 0; } }
.mat-ov__p { width: 100%; max-width: 720px; max-height: 92vh; display: flex; flex-direction: column; background: var(--vpr-surface); color: var(--color-text); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.28); animation: matIn .22s cubic-bezier(.22,1,.36,1); }
@keyframes matIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.mat-ov__h { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 12px; border-bottom: 1px solid var(--vpr-line); }
.mat-ov__h h3 { margin: 0; font-size: 1.08rem; font-weight: 700; }
.mat-ov__x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--vpr-line); background: var(--color-bg); color: var(--color-text); cursor: pointer; }
.mat-ov__b { padding: 14px 20px 4px; overflow-y: auto; overscroll-behavior: contain; }
.mat-ov__msg { min-height: 18px; font-size: 0.84rem; padding: 4px 20px 0; }
.mat-ov__f { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 20px 16px; border-top: 1px solid var(--vpr-line); }
.mat-pu-wrap { overflow-x: auto; }
.mat-pu { min-width: 560px; }
@media (max-width: 760px) {
  .mat-head__a { width: 100%; }
  .mat-head__a .vp-btn:first-child { flex: 1; justify-content: center; }
  .mat-tools { flex-direction: column; align-items: stretch; }
  .mat-search { max-width: none; flex: 0 0 auto; height: 44px; }   /* у колонці flex-basis ставав висотою */
  .mat-tabs .vp-subtab { flex: 1 1 0 !important; min-width: 0 !important; }
  .mat-hide-m { display: none; }
  .mat-head__a .vp-btn { white-space: nowrap; }
  .mat-kpis { display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1fr); }
  .mat-kpis > div b { white-space: nowrap; }
  .mat-kpis > div { min-width: 0 !important; padding: 10px 10px !important; border-right: 1px solid var(--vpr-line) !important; border-bottom: 0 !important; }
  .mat-kpis > div:last-child { border-right: 0 !important; }
  .mat-kpis > div span { font-size: 0.6rem !important; letter-spacing: .03em !important; }
  .mat-kpis > div b { font-size: 1rem !important; }
  .mat-tabs { width: 100%; }
  .mat-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; padding: 12px 14px !important; }
  .mat-row__acts { grid-column: 1 / -1; }
  .mat-row__acts .vp-btn:not(.mat-kebab) { flex: 1; justify-content: center; }
  .mat-row__name { white-space: normal; }
  .mat-ov { align-items: flex-end; padding: 0; }
  .mat-ov__p { max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: matUp .3s cubic-bezier(.22,1,.36,1); }
  .mat-ov.is-closing .mat-ov__p { animation: matDown .2s ease-in forwards; }
  .mat-ov__h { padding-top: 22px; }
  .mat-ov__h::before { content: ''; position: absolute; left: 50%; top: 7px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--vpr-line); }
  .mat-ov__f .vp-btn { flex: 1; justify-content: center; }
  .mat-ov__b [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* закупка: рядок накладної — карткою */
  .mat-pu { min-width: 0; }
  .mat-pu thead { display: none; }
  .mat-pu, .mat-pu tbody { display: block; }
  .mat-pu tr { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; padding: 10px; margin: 0 0 8px; border: 1px solid var(--vpr-line); border-radius: 12px; background: var(--color-bg); }
  .mat-pu td { display: block; padding: 0 !important; border: 0 !important; }
  .mat-pu td:first-child { grid-column: 1 / -1; }
  .mat-pu td[data-label]::before { content: attr(data-label); display: block; font-size: 0.7rem; color: var(--color-text-muted); margin-bottom: 2px; }
  .mat-pu td.pu-sum { grid-column: 1 / 3; text-align: left !important; }
  .mat-pu td.pu-del { grid-column: 3; grid-row: 2; align-self: end; }
}
@keyframes matUp { from { transform: translateY(100%); } } @keyframes matDown { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .mat-ov, .mat-ov__p { animation: none !important; } }