/* 09_manager_plan.css — частина style.css, винесена без перестановки правил.
   Бренд, Менеджер, шаблони відповідей, Майстер плану.
   Порядок підключення в index.html повторює порядок частин:
   каскад від розділення не змінився (перевірено побайтно). */
/* ── Reply templates (mg-tpl-*) — card list + one shared add/edit form. ── */
.mg-tpl-list{ display: grid; gap: var(--sp-8); margin-bottom: 12px; }
.mg-tpl-card{
  display: flex; align-items: center; gap: var(--sp-10); padding: 9px 12px;
  border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--border-soft);
}
.mg-tpl-body{ flex: 1; min-width: 0; }
.mg-tpl-title{ font: 600 var(--fs-12)/1.3 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.mg-tpl-preview{ font: 500 var(--fs-11)/1.4 var(--sans); color: var(--text-mute); overflow-wrap: anywhere; margin-top: 2px; }
.mg-tpl-actions{ flex: none; display: flex; gap: var(--sp-6); }
.mg-tpl-form-wrap{
  display: flex; flex-direction: column; gap: var(--sp-10); margin-bottom: 12px; padding: 12px;
  border-radius: var(--radius-sm); background: var(--bg-soft); border: 1px solid var(--border-soft);
}

/* — Опитування бренду (survey wizard, brand.js): банер-картка запуску +
   повноекранний оверлей, який переюзає .pw-* (plan_wizard's generic wizard
   shell/stepper/field/textarea/chip layout) — bs- лише для того, чого там
   немає готового аналога. — */
.bs-banner-card{
  border-color: var(--accent-t-edge);
  background: linear-gradient(135deg, var(--accent-t-wash-1) 0%, var(--accent-t-wash-1) 55%, var(--accent-t-wash-1) 100%);
}
.bs-banner-row{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); flex-wrap: wrap; }
.bs-banner-text{ display: flex; flex-direction: column; gap: var(--sp-4); }
.bs-banner-title{ font: 700 var(--fs-15)/1.3 var(--sans); }
.bs-banner-sub{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-dim); }
.bs-banner-last{ font: 500 var(--fs-11)/1 var(--mono); color: var(--text-mute); margin-top: 2px; }

.bs-step-count{ flex: none; font: 700 var(--fs-11)/1 var(--mono); color: var(--text-mute); }
.bs-full-input{ width: 100%; box-sizing: border-box; margin-top: 8px; }
.bs-actions{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); padding-top: 10px; max-width: 720px; margin: 0 auto; }

@media (max-width: 640px){
  .bs-banner-row{ flex-direction: column; align-items: stretch; }
  .bs-banner-row .btn{ width: 100%; }
}

/* ── Composer AI-assist ("AI-асистент ✨" section, composer.js) — new UI,
   .ca- prefix per convention. Reuses .btn/.chip and the existing `spin`
   keyframe (defined above at .job-card .jc-spin) rather than redeclaring it. */
.ca-assist{ margin-bottom: 16px; }
.ca-assist-row{ display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: 10px; }
.ca-assist-input{
  flex: 1 1 260px; min-width: 200px; height: 34px; padding: 0 12px; box-sizing: border-box;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); font: 500 var(--fs-13)/1 var(--sans);
}
.ca-assist-input:focus{ outline: none; border-color: var(--accent); }
.ca-assist-lang{
  flex: 0 0 auto; height: 34px; padding: 0 10px; box-sizing: border-box;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); font: 500 var(--fs-13)/1 var(--sans); cursor: pointer;
}
.ca-assist-lang:focus{ outline: none; border-color: var(--accent); }
.ca-assist-topics{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-8); margin-bottom: 10px; }
.ca-topic-card{
  text-align: left; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--border-soft); cursor: pointer;
  transition: var(--t-fast) var(--ease);
}
.ca-topic-card:hover{ border-color: var(--accent); background: var(--elevated); }
.ca-topic-card:active{ transform: scale(.98); }
.ca-topic-title{ font: 700 var(--fs-12)/1.35 var(--sans); color: var(--text); margin-bottom: 3px; }
.ca-topic-angle{ font: 500 var(--fs-11)/1.4 var(--sans); color: var(--text-mute); }
.ca-assist-status{ display: flex; align-items: center; gap: var(--sp-8); margin-bottom: 10px; font: 600 var(--fs-12)/1 var(--sans); color: var(--text-mute); }
.ca-assist-spin{ width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: spin .7s linear infinite; flex: none; }
.ca-assist-error{ font: 600 var(--fs-12)/1.4 var(--sans); color: var(--danger); margin-bottom: 10px; }
.ca-assist-actions{ margin-bottom: 4px; }

/* @slot-settings-v2 */
/* Settings — Services cards (Claude / Higgsfield / ffmpeg), settings.js.
   Cards reuse .onb-* primitives (input, actions-row, spin, progress, hint,
   badge) from the onboarding wizard so the two surfaces look identical. */
.svc-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-12); }
.svc-card{
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 14px 16px;
}
.svc-card-head{ display: flex; align-items: center; gap: var(--sp-8); margin-bottom: 10px; }
.svc-card-ic{
  flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm);
  /* 🛑 НЕЙТРАЛЬНИЙ, а не бренд-градієнт. Виміряно на живому екрані:
     п'ять сервісних карток — п'ять теплих значків поспіль, і поруч
     ще сім кнопок «Зберегти» тим самим кольором. Значок картки
     нічого не позначає, він лише називає сервіс; тепло тут витрачене
     на підпис. Той самий випадок, що з `.cmpz-card-ic` у вітрині
     Studio, де таких значків було двадцять шість. */
  background: var(--fill-2); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
}
.svc-card-ic svg{ width: 20px; height: 20px; display: block; }
.svc-card-title{ font: 700 var(--fs-13)/1.3 var(--sans); }
.svc-row{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); flex-wrap: wrap; padding: 6px 0; }
.svc-row + .svc-row{ border-top: 1px solid var(--border-soft); }
.svc-row-label{ font: 600 var(--fs-12)/1.3 var(--sans); color: var(--text-mute); flex: none; }
.svc-row-status{ display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; justify-content: flex-end; }
.svc-row-sub{ font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-mute); margin: -2px 0 4px; }
.svc-row-sub.svc-row-error{ color: var(--danger); }

/* @slot-picker-tabs */
/* Origin filter row (Все походження / ⬆ Завантажене / ✨ Згенероване), injected
   by composer.js under the existing Всі/Фото/Відео picker tabs — reuses the
   base .chip/.chip.active look, just needs the same row layout + a touch less
   bottom margin since .cmp-pick-tabs above it already spaces the grid. */
.cmp-pick-origin-tabs{ display: flex; gap: var(--sp-8); margin: -4px 0 12px; }
.cmp-pick-origin-tabs .chip{ font-size:  var(--fs-11); height: 28px; padding: 0 12px; opacity: .85; }
.cmp-pick-origin-tabs .chip.active{ opacity: 1; }

/* @slot-inbox-research */
/* "🔍 Про автора" — author dossier from the so-commenter-research skill,
   rendered inline on the inbox card (see frontend/js/inbox.js authorInfoHtml). */
.ib-author-info{ margin-top: 8px; }
.ib-research-btn{ font-size:  var(--fs-12); }
.ib-research-status{ font: 600 var(--fs-11)/1.4 var(--mono); color: var(--text-mute); }
.ib-research-status.ib-research-error{ color: var(--danger); }
.ib-dossier{
  display: flex; flex-direction: column; gap: var(--sp-6);
  padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.ib-dossier-head{ display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.ib-dossier-head .ib-research-btn{ margin-left: auto; }
.ib-dossier-link{ font: 600 var(--fs-11)/1 var(--mono); color: var(--link); text-decoration: none; }
.ib-dossier-link:hover{ text-decoration: underline; }
.ib-dossier-summary{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-dim); overflow-wrap: anywhere; }

/* @slot-audience */
/* "👥 Аудиторія з коментарів" block, appended to the Analytics view by
   analytics.js. Reuses .tiles/.tile, .panel, .badge, .empty-state,
   .ana-toolbar/.ana-refresh-error from the rest of Analytics — only the
   audience-specific pieces (summary error, columns, search, person rows)
   get their own rules here. */
.aud-scraping-badge{ margin-left: 4px; }
.aud-scraping-badge[hidden]{ display: none; }

.aud-summary-error{
  display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap;
  color: var(--warn); font: 500 var(--fs-12)/1.5 var(--sans);
  background: rgba(245,185,66,.08); border: 1px solid rgba(245,185,66,.3);
  border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px;
}
.aud-summary-error[hidden]{ display: none; }

.aud-summary-tiles{ grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; }
.aud-summary-tiles[hidden]{ display: none; }
@media (max-width: 640px){
  .aud-summary-tiles{ grid-template-columns: 1fr; }
}

.aud-cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); margin-bottom: 16px; }
.aud-cols[hidden]{ display: none; }
.aud-col-title{ font: 700 var(--fs-12)/1.3 var(--sans); color: var(--text); margin-bottom: 8px; }
.aud-list-simple{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.aud-list-simple li{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-dim); overflow-wrap: anywhere; }
.aud-list-simple .aud-list-empty{ color: var(--text-mute); font-style: italic; }
@media (max-width: 900px){
  .aud-cols{ grid-template-columns: 1fr; }
}

.aud-search-row{ margin-bottom: 12px; }
.aud-search-input{
  width: 100%; max-width: 340px; background: var(--panel); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 8px 12px; font: 500 var(--fs-13)/1.4 var(--sans);
}
.aud-search-input:focus{ outline: none; border-color: var(--accent); }

.aud-people-list{ display: flex; flex-direction: column; gap: var(--sp-8); }
.aud-person-row{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 10px 14px; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.aud-person-row:hover{ border-color: var(--border-hover); transform: translateY(-1px); }
.aud-person-main{ min-width: 0; flex: 1; }
.aud-person-name{ font: 700 var(--fs-13)/1.3 var(--sans); color: var(--text); text-decoration: none; }
a.aud-person-name:hover{ text-decoration: underline; }
.aud-person-sub{ font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-mute); margin-top: 2px; overflow-wrap: anywhere; }
.aud-person-badges{ display: flex; gap: var(--sp-6); flex-wrap: wrap; flex: none; }

/* Попередні звіти (summary_history) — collapsed <details> under audCols. */
.aud-hist-block{ margin-bottom: 16px; }
.aud-hist-details{ background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 4px 0; }
.aud-hist-summary{ cursor: pointer; list-style: none; font: 700 var(--fs-12)/1.3 var(--sans); color: var(--text); padding: 10px 14px; display: flex; align-items: center; gap: var(--sp-8); }
.aud-hist-summary::-webkit-details-marker{ display: none; }
.aud-hist-list{ display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 10px 8px; }
.aud-hist-row{ border-top: 1px solid var(--border-soft); }
.aud-hist-row-h{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); padding: 8px 4px; cursor: pointer; }
.aud-hist-date{ font: 600 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); flex: none; }
.aud-hist-line{ font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-dim); text-align: right; overflow-wrap: anywhere; }
.aud-hist-row-detail{ padding: 4px 4px 10px; }
.aud-hist-detail-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
@media (max-width: 640px){ .aud-hist-detail-cols{ grid-template-columns: 1fr; } }
.aud-hist-detail-h{ font: 700 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); margin-bottom: 4px;letter-spacing: .02em; }

/* @slot-apify-card */
/* Settings → Сервіси → "🕷 Apify (скрейпінг аудиторії)" card, settings.js.
   Built entirely from existing .svc-card/.svc-row/.onb-* primitives (see the
   Higgsfield card above) — same look, no new rules needed. */

/* @slot-token-help */
/* "ℹ Де взяти токен?" accordion — used in both the Settings → Сервіси
   Higgsfield/Apify cards (settings.js, .svc-card) and the onboarding wizard's
   token_higgsfield/token_apify steps (onboarding.js, .onb-step). Compact,
   collapsed by default; no modal. */
.svc-help-toggle, .onb-help-toggle{
  display: inline-flex; align-items: center; gap: var(--sp-4);
  background: none; border: none; padding: 4px 0; margin-top: 4px;
  font: 600 var(--fs-12)/1.3 var(--sans); color: var(--text-dim); cursor: pointer;
}
.svc-help-toggle:hover, .onb-help-toggle:hover{ color: var(--text); text-decoration: underline; }
.svc-help-toggle svg, .onb-help-toggle svg{ width: 16px; height: 16px; display: block; flex: none; }

.svc-help-panel, .onb-help-panel{
  margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--panel); font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-dim);
}
.svc-help-panel[hidden], .onb-help-panel[hidden]{ display: none; }

.svc-help-panel ol, .onb-help-panel ol{
  margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: var(--sp-4);
}
.svc-help-panel li, .onb-help-panel li{ color: var(--text-dim); }

.svc-help-link, .onb-help-link{ text-decoration: none; }

/* ── Plan Wizard ─────────────────────────────────────────────────────────
   Full-screen overlay (frontend/js/plan_wizard.js), opened from Calendar's
   "🗓 Згенерувати план" button. Reuses .modal-overlay for the Escape/
   backdrop-click convention (see ui.js registerOverlay) but its own .pw-shell
   fills the viewport instead of the centered .modal-card — this is a
   multi-stage wizard, not a small dialog. */
.pw-overlay{ z-index: 92; padding: 0; align-items: stretch; justify-content: stretch; }
.pw-shell{
  width: 100%; height: 100%; max-width: none; max-height: none;
  display: flex; flex-direction: column;
  background: var(--bg); overflow: hidden;
}
.pw-head{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); flex: none;
  padding: 16px 24px; border-bottom: 1px solid var(--border-soft); background: var(--panel);
}
.pw-title{ font: 800 16px/1.3 var(--sans); letter-spacing: -.01em; }

.pw-stepper{
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap;
  padding: 12px 24px; border-bottom: 1px solid var(--border-soft); background: var(--panel-2);
}
.pw-stepper-row{ display: flex; gap: var(--sp-8); flex: 1; flex-wrap: wrap; }
.pw-step{
  display: flex; align-items: center; gap: var(--sp-8);
  padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border-soft);
  color: var(--text-mute); font: 600 var(--fs-12)/1 var(--sans); transition: var(--t-fast) var(--ease);
}
.pw-step-num{
  width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--border); font: 700 var(--fs-10)/1 var(--mono); color: var(--text-dim); flex: none;
}
.pw-step.active{
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent-t-edge-hi), var(--accent-t-edge));
  box-shadow: inset 0 0 0 1px var(--accent-t-edge-hi);
}
.pw-step.active .pw-step-num{ background: var(--grad-brand); color: #fff; border-color: transparent; }
.pw-step.done{ color: var(--ok); }
.pw-step.done .pw-step-num{ background: rgba(var(--ok-rgb),.15); color: var(--ok); border-color: rgba(var(--ok-rgb),.3); }
.pw-header-cancel{ flex: none; color: var(--danger); }

.pw-body{ flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }

/* — Step 0: config form — */
.pw-step0{ max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.pw-field{ display: flex; flex-direction: column; gap: var(--sp-8); }
.pw-chip-row{ display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.pw-num-input, .pw-text-input, .pw-date-input, .pw-time-input{
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 12px; font: 500 var(--fs-13)/1.3 var(--sans); width: fit-content;
}
.pw-num-input{ width: 100px; }
.pw-num-input:focus, .pw-text-input:focus, .pw-date-input:focus, .pw-time-input:focus{ outline: none; border-color: var(--accent); }
.pw-textarea{
  width: 100%; min-height: 80px; resize: vertical; background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 10px 12px; font: 500 var(--fs-13)/1.5 var(--sans);
}
.pw-textarea:focus{ outline: none; border-color: var(--accent); }
.pw-text-input{ width: 100%; }
.pw-select{
  width: 100%;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 12px; font: 500 var(--fs-13)/1.3 var(--sans);
}
.pw-select:focus{ outline: none; border-color: var(--accent); }
.pw-entity-char{ display: flex; flex-direction: column; gap: var(--sp-6); margin-top: 12px; }
.pw-hint{
  font: 500 var(--fs-11)/1.5 var(--sans); color: var(--text-dim);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.pw-plan-concept{
  display: flex; flex-direction: column; gap: var(--sp-6); margin-bottom: 14px;
  padding: 14px 16px; border-radius: var(--radius-lg, var(--radius));
  border: 1px solid rgba(var(--accent-rgb, 90,140,255),.28); background: rgba(var(--accent-rgb, 90,140,255),.06);
}
.pw-plan-concept-label{
  display: flex; align-items: center; gap: var(--sp-6);
  font: 700 var(--fs-11)/1 var(--sans); color: var(--accent);
}
.pw-plan-concept-body{ font: 500 var(--fs-13)/1.6 var(--sans); color: var(--text); white-space: pre-wrap; }
/* Другорядні бейджі (заготовки каталогу) — тихіші за мережу/формат. */
.badge-soft{ opacity: .72; font-weight: 600; }

.pw-check-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-8); }
.pw-net-cb, .pw-fmt-cb{
  display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--panel);
  font: 600 var(--fs-12)/1.3 var(--sans); color: var(--text); cursor: pointer; transition: var(--t-fast) var(--ease);
}
.pw-net-cb:hover, .pw-fmt-cb:hover{ border-color: var(--border-hover); }
.pw-net-cb.disabled, .pw-fmt-cb.disabled{ opacity: .5; cursor: not-allowed; }
.pw-net-hint{ font: 600 var(--fs-10)/1 var(--mono); color: var(--warn); }
.pw-fmt-note{ flex-basis: 100%; font: 500 var(--fs-11)/1.4 var(--sans); color: var(--warn); }

.pw-slot-add{ display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.pw-toggle-row{ display: flex; align-items: center; gap: var(--sp-10); font: 600 var(--fs-13)/1.3 var(--sans); cursor: pointer; }
.pw-warn{
  font: 600 var(--fs-12)/1.4 var(--sans); color: var(--warn);
  background: rgba(245,185,66,.08); border: 1px solid rgba(245,185,66,.3); border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.pw-mode-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.pw-mode-card{
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); text-align: center;
  padding: 20px 14px; border-radius: var(--radius-lg); border: 1.5px solid var(--border-soft); background: var(--panel);
  color: var(--text); cursor: pointer; transition: var(--t-fast) var(--ease);
}
.pw-mode-card:hover{ border-color: var(--border-hover); transform: translateY(-2px); }
.pw-mode-card.active{
  border-color: transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--grad-brand) border-box;
  box-shadow: var(--shadow-soft);
}
.pw-mode-ic{ font-size: 28px; }
.pw-mode-title{ font: 700 var(--fs-13)/1.3 var(--sans); }
.pw-mode-sub{ font: 500 var(--fs-11)/1.4 var(--sans); color: var(--text-mute); }

.pw-actions{ display: flex; justify-content: flex-end; padding-top: 6px; }

/* — Running / spinner view — */
.pw-running{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-14);
  max-width: 560px; margin: 40px auto; text-align: center;
}
.pw-spinner{
  width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
.pw-running-title{ font: 700 var(--fs-15)/1.3 var(--sans); }
.pw-log{
  width: 100%; font:var(--fs-12)/1.6 var(--mono); max-height: 260px; overflow-y: auto; text-align: left;
  background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px;
}
.pw-log:empty{ display: none; }
.pw-log .ln{ color: var(--text-dim); border-bottom: 1px dashed var(--border-soft); padding: 3px 0; }
.pw-log .ln:last-child{ border-bottom: none; }

/* — Review views (concepts / texts / media) — */
.pw-review{ max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-16); }
.pw-review-head{ display: flex; align-items: baseline; gap: var(--sp-10); }
.pw-review-head h3{ margin: 0; font: 700 16px/1.3 var(--sans); }
.pw-review-count{ font: 500 var(--fs-12)/1 var(--mono); color: var(--text-mute); }

.pw-toolbar{ display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.pw-toolbar-spacer{ flex: 1; }

.pw-cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-14); }
.pw-card{
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 14px; display: flex; flex-direction: column; gap: var(--sp-10);
}
.pw-card[data-status="approved"]{ border-color: rgba(var(--ok-rgb),.3); }
.pw-card[data-status="rejected"]{ border-color: rgba(var(--danger-rgb),.3); }
.pw-card-head{ display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.pw-card-when{ font: 700 var(--fs-11)/1 var(--mono); color: var(--text-mute); }
.pw-card-nets{ display: flex; gap: var(--sp-4); font-size:  var(--fs-13); }
.pw-card-status{ margin-top: -4px; }
.pw-card-title{ font: 700 var(--fs-14)/1.3 var(--sans); }
.pw-card-concept{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-dim); }
.pw-card-actions{ display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-top: 4px; }
.pw-card-actions .btn{ flex: 1 1 auto; }

.pw-feedback-box{ display: flex; flex-direction: column; gap: var(--sp-8); }
.pw-feedback-input{
  width: 100%; min-height: 64px; resize: vertical; background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 8px 10px; font: 500 var(--fs-12)/1.5 var(--sans);
}
.pw-feedback-input:focus{ outline: none; border-color: var(--accent); }
.pw-feedback-actions{ display: flex; gap: var(--sp-8); justify-content: flex-end; }

.pw-tabs{ display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.pw-tab{
  padding: 5px 11px; border-radius: 999px; border: 1px solid transparent; background: transparent;
  color: var(--text-mute); font: 600 var(--fs-11)/1 var(--sans); cursor: pointer;
}
.pw-tab:hover{ color: var(--text-dim); }
.pw-tab.active{ background: var(--panel-2); border-color: var(--border); color: var(--text); }
.pw-text-body{ font: 500 var(--fs-13)/1.6 var(--sans); color: var(--text); white-space: pre-wrap; }

.pw-media-grid{ display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.pw-media-tile{ width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--bg-soft); }
.pw-media-tile-ph{ display: flex; align-items: center; justify-content: center; color: var(--text-mute); font: 500 var(--fs-11)/1 var(--mono); }
.pw-media-empty{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-mute); padding: 10px 0; }
.pw-media-note{ font: 600 var(--fs-11)/1.3 var(--sans); color: var(--warn); }

.pw-edit-form{ display: flex; flex-direction: column; gap: var(--sp-8); }
.pw-edit-row{ display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.pw-edit-row input, .pw-edit-row select{
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 7px 10px; font: 500 var(--fs-12)/1.3 var(--sans);
}
.pw-edit-title{
  width: 100%; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 10px; font: 600 var(--fs-13)/1.3 var(--sans); box-sizing: border-box;
}
.pw-edit-concept, .pw-edit-text{
  width: 100%; min-height: 90px; resize: vertical; background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 8px 10px; font: 500 var(--fs-12)/1.5 var(--sans); box-sizing: border-box;
}
.pw-edit-actions{ display: flex; gap: var(--sp-8); justify-content: flex-end; }

.pw-add-form{
  display: flex; flex-direction: column; gap: var(--sp-10);
  background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px;
}
.pw-add-form input[type="text"], .pw-add-form textarea{
  width: 100%; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 10px; font: 500 var(--fs-12)/1.4 var(--sans); box-sizing: border-box;
}
.pw-add-form textarea{ min-height: 70px; resize: vertical; }
.pw-add-nets{ display: flex; flex-wrap: wrap; gap: var(--sp-10); }
.pw-add-net{ display: flex; align-items: center; gap: 5px; font: 600 var(--fs-12)/1 var(--sans); color: var(--text-dim); cursor: pointer; }
.pw-add-net.disabled{ opacity: .5; cursor: not-allowed; }

.pw-bulk-regen{ display: flex; flex-direction: column; gap: var(--sp-10); align-items: flex-start; }
.pw-bulk-box{
  width: 100%; display: flex; flex-direction: column; gap: var(--sp-8);
  background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px;
}
.pw-bulk-hint{ font: 500 var(--fs-11)/1.4 var(--sans); color: var(--text-mute); }
.pw-bulk-text{
  width: 100%; min-height: 80px; resize: vertical; background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 8px 10px; font: 500 var(--fs-12)/1.5 var(--sans); box-sizing: border-box;
}

/* — Done / error views — */
.pw-done{ max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-16); }
.pw-done-msg{ font: 700 var(--fs-14)/1.4 var(--sans); }
.pw-done-table-wrap{ overflow-x: auto; }
.pw-done-table{ width: 100%; border-collapse: collapse; font-size:  var(--fs-12); }
.pw-done-table th, .pw-done-table td{ padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.pw-done-table th{ color: var(--text-mute); font: 700 var(--fs-11)/1 var(--sans); background: var(--panel-2); }
.pw-done-actions{ display: flex; justify-content: flex-end; }

.pw-error{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-12);
  max-width: 480px; margin: 60px auto; text-align: center;
}
.pw-error-icon{ font-size: 34px; color: var(--danger); }
.pw-error-msg{ font: 500 var(--fs-13)/1.5 var(--sans); color: var(--text-dim); }

@media (max-width: 768px){
  .pw-head{ padding: 14px 16px; }
  .pw-stepper{ padding: 10px 16px; }
  .pw-step span:not(.pw-step-num){ display: none; }
  .pw-step{ padding: 6px 9px; }
  .pw-body{ padding: 16px; }
  .pw-check-grid{ grid-template-columns: 1fr; }
  .pw-mode-cards{ grid-template-columns: 1fr; }
  .pw-cards{ grid-template-columns: 1fr; }
  .pw-card-actions{ flex-direction: column; }
  .pw-card-actions .btn{ width: 100%; }
}

/* ── Research hub (research.js) — reuses .brand-card/.chip/.btn/.badge/
   .lib-profile.md-body/.modal-*; only the pieces below are new. ────────── */
.rs-hint{
  font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-mute);
  margin: -8px 0 16px; padding: 10px 14px; background: var(--bg-soft);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
}
.rs-start-card{ display: flex; flex-direction: column; gap: var(--sp-12); }
.rs-type-chips{ display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.rs-type-chip.active{ border-color: transparent; color: var(--on-brand); background: var(--brand-ink); }
.rs-start-row{ display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; }
.rs-query-input{ flex: 1 1 260px; min-width: 0; }
.rs-start-err{ font: 500 var(--fs-12)/1.4 var(--sans); color: var(--danger); }

.rs-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-14); margin-bottom: 8px; }
.rs-analytics-head{ margin-top: 24px; }
.rs-analytics-grid{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 16px; }

.rs-card{
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; transition: var(--t-fast) var(--ease);
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.rs-card:hover{ border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.rs-card-error{ border-color: rgba(var(--danger-rgb),.35); }
.rs-card-top{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
/* Це НЕ контрол, а мітка: `pointer-events: none`, тобто на неї не
   натискають. Тому вона й менша за чип — 10px відступу й кегль 11.
   🛑 Ці значення довго не діяли: skin.css оголошував `.chip` пізніше
   й скороченим записом `font:` скидав кегль назад до 12, а padding —
   до 14. Побачили це аж коли `.chip` звели в одне правило. Тобто
   задум автора мовчки не виконувався, і тепер виконується. */
.rs-type-pill{ pointer-events: none; padding: 3px 10px; font-size:  var(--fs-11); }
.rs-card-title{
  font: 700 var(--fs-13)/1.35 var(--sans); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.rs-card-date{ font: 600 var(--fs-11)/1 var(--mono); color: var(--text-mute); }
.rs-card-summary{
  font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.rs-card-insights{ border-style: dashed; }

.rs-badge-running{ display: inline-flex; align-items: center; gap: var(--sp-6); color: var(--warn); border-color: rgba(245,185,66,.3); background: rgba(245,185,66,.08); }
.rs-spin{
  width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(245,185,66,.3); border-top-color: var(--warn);
  animation: spin .8s linear infinite; flex: none;
}
.rs-spin-lg{ width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--accent); }

.rs-view-card{ max-width: 760px; }
.rs-view-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-10); margin-bottom: 14px; }
.rs-view-head-text{ display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.rs-view-meta{ font: 600 var(--fs-11)/1 var(--mono); color: var(--text-mute); }
.rs-view-actions{ display: flex; align-items: center; gap: var(--sp-6); flex: none; }
.rs-view-body{ max-height: 62vh; overflow-y: auto; }
.rs-view-running{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-14);
  padding: 40px 16px; text-align: center; color: var(--text-dim); font: 500 var(--fs-13)/1.5 var(--sans);
}

.rs-skel{ aspect-ratio: unset; height: 120px; }

@media (max-width: 768px){
  .rs-grid, .rs-analytics-grid{ grid-template-columns: 1fr; }
  .rs-start-row{ flex-direction: column; align-items: stretch; }
  .rs-start-row .btn{ width: 100%; }
}

/* ===== Layout utilities (UX wave 2): form-heavy pages should not stretch full-width ===== */
.page-narrow{ max-width: 920px; margin: 0 auto; }
.page-mid{ max-width: 1180px; margin: 0 auto; }
.form-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
@media (max-width: 760px){ .form-grid-2{ grid-template-columns: 1fr; } }

/* ===== Текст лише для зчитувача екрана =====================================
   Для коротких оголошень («Дослідження «X» завершено»), які не мають місця в
   макеті, але мусять прозвучати. display:none і visibility:hidden не годяться —
   такий вузол зчитувач ігнорує; тому елемент лишається у потоці, але стиснутий
   до одного пікселя й обрізаний. white-space:nowrap — щоб довгий текст не
   створював прокрутку сторінки. */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ===== Notification bell (topbar) =========================================
   Badge: same visual spec as .nav-item .badge-count (color, shape, the
   badgePop keyframe) — reused, not reinvented — just anchored to a corner of
   a small square .icon-btn instead of sitting inline in a nav row, so it
   needs its own selector rather than literally reusing that rule as-is. */
#bellBtn{ position: relative; }
#bellBtn .badge-count{
  position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--brand-ink); color: var(--on-brand);
  font: 700 var(--fs-10)/16px var(--mono); text-align: center; display: none;
  box-shadow: 0 0 6px rgba(var(--brand-ink-rgb), 0.55);
}
#bellBtn .badge-count.show{ display: inline-block; }
#bellBtn .badge-count.badge-pop{ animation: badgePop 320ms var(--ease-out-back); }

/* Panel: reuses .modal-overlay/.modal-card (registerOverlay's Escape/
   backdrop-click/focus-trap all come free from that) but anchored under the
   topbar-right instead of centered — a notification list reads as a
   dropdown, not a centered dialog. */
.modal-overlay.bell-overlay{
  align-items: flex-start; justify-content: flex-end;
  padding: calc(var(--topbar-h) + 8px) 16px 16px 16px;
}
.modal-card.bell-panel{
  width: 100%; max-width: 380px; max-height: min(70vh, 560px);
  padding: 0; display: flex; flex-direction: column;
}
.bell-head{ padding: 14px 16px; margin-bottom: 0; border-bottom: 1px solid var(--border-soft); flex: none; }
.bell-list{ overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.bell-foot{ padding: 10px 16px; border-top: 1px solid var(--border-soft); text-align: center; flex: none; }
.bell-item{
  display: flex; align-items: flex-start; gap: var(--sp-10); padding: 10px 16px;
  cursor: pointer; border-bottom: 1px solid var(--border-soft);
  transition: background var(--t-fast) var(--ease);
}
.bell-item:last-child{ border-bottom: none; }
.bell-item:hover, .bell-item:focus-visible{ background: var(--panel-2); outline: none; }
.bell-item.unread{ background: rgba(var(--brand-ink-rgb), 0.06); }
.bell-item-dot{
  width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 6px;
  background: transparent; /* only unread rows show a dot -- see below */
}
.bell-item.unread .bell-item-dot{ background: var(--brand-ink); box-shadow: 0 0 5px var(--brand-ink); }
.bell-item-ic{ flex: none; color: var(--text-mute); margin-top: 1px; }
.bell-item-ic svg{ width: 16px; height: 16px; display: block; }
.bell-item-body{ flex: 1; min-width: 0; }
.bell-item-title{ font: 600 var(--fs-13)/1.35 var(--sans); color: var(--text); }
.bell-item.unread .bell-item-title{ font-weight: 700; }
.bell-item-text{
  font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-mute); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bell-item-time{ font: 500 var(--fs-11)/1 var(--mono); color: var(--text-mute); flex: none; margin-left: 4px; white-space: nowrap; }
@media (max-width: 480px){
  .modal-overlay.bell-overlay{ padding: calc(var(--topbar-h) + 6px) 8px 8px 8px; }
  .modal-card.bell-panel{ max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ФОЛБЕК aspect-ratio для WebKit < 15 (macOS < 12).
   Усе всередині @supports not — СУЧАСНІ браузери сюди не заглядають узагалі,
   тож на Windows і новому Mac не змінюється жоден піксель.
   Навіщо: без aspect-ratio контейнер мініатюри має висоту 0 (картинка в ньому
   — height:100% від нуля), тобто Галерея, Бібліотека й вибір медіа просто
   зникають з екрана. Це не «трохи інакший вигляд», а порожня сторінка.
   Прийом: ::before з padding-top задає висоту від ширини, а вміст виводимо
   з потоку, щоб псевдоелемент його не зсував.
   ═══════════════════════════════════════════════════════════════════════ */
@supports not (aspect-ratio: 1 / 1) {
  .skel-card, .media-item, .gal-thumb, .lib-thumb, .lib-media-item,
  .ana-heat-cell, .st-pick-thumb, .st-variant-action{ position: relative; }
  .skel-card::before, .media-item::before, .gal-thumb::before, .lib-thumb::before,
  .lib-media-item::before, .ana-heat-cell::before, .st-pick-thumb::before,
  .st-variant-action::before{ content: ""; display: block; padding-top: 100%; }
  .media-item > *, .gal-thumb > *, .lib-thumb > *, .lib-media-item > *,
  .st-pick-thumb > *{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

  .st-carousel-tile{ position: relative; }
  .st-carousel-tile::before{ content: ""; display: block; padding-top: 125%; }  /* 4:5 */
  .st-carousel-tile > *{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

  /* .pf-thumb img — сам <img>, а не контейнер: колонка сітки фіксовані 168px,
     тож 4:5 дає рівно 210px. */
  .pf-thumb img{ height: 210px; }
}

/* ══ Brand switcher ══════════════════════════════════════════════════════════
   The active brand is the context every view is read in, so the control lives
   in the topbar beside the product name rather than in settings. Visuals reuse
   the existing token set and the .icon-btn hover language; nothing new is
   invented here. */
.brand-switch{
  display:inline-flex; align-items:center; gap:7px;
  margin-left:10px; padding:5px 9px 5px 8px;
  background:none; border:1px solid var(--border); border-radius:var(--radius-sm,8px);
  color:var(--text-dim); font:600 var(--fs-12)/1 var(--sans); cursor:pointer;
  transition:background var(--t-fast,.15s) var(--ease), color var(--t-fast,.15s) var(--ease),
             border-color var(--t-fast,.15s) var(--ease);
  max-width:210px;
}
.brand-switch:hover{ background:var(--panel-2); color:var(--text); border-color:var(--border-hover); }
.brand-switch[aria-expanded="true"]{ background:var(--panel-2); color:var(--text); border-color:var(--border-hover); }
.brand-switch .bs-dot{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--grad-brand, var(--brand-ink));
}
.brand-switch .bs-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand-switch .bs-chev{ flex:0 0 auto; opacity:.65; }

.brand-menu-overlay{ position:fixed; inset:0; z-index:60; background:transparent; }
.brand-menu-overlay[hidden]{ display:none; }
.brand-menu{
  position:absolute; min-width:230px; max-width:320px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius,10px);
  box-shadow:var(--shadow-pop, 0 12px 32px rgba(0,0,0,.32));
  padding:6px; overflow:hidden;
}
.brand-menu .bm-head{
  padding:6px 10px 8px; font:600 var(--fs-10)/1 var(--sans);color:var(--text-mute);
}
.brand-menu .bm-item{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 10px; border:0; border-radius:var(--radius-sm,8px);
  background:none; color:var(--text); font:500 var(--fs-13)/1.25 var(--sans);
  text-align:left; cursor:pointer;
}
.brand-menu .bm-item:hover, .brand-menu .bm-item:focus-visible{ background:var(--panel-2); }
.brand-menu .bm-item[aria-checked="true"]{ color:var(--brand-ink); font-weight:600; }
.brand-menu .bm-check{ width:14px; flex:0 0 auto; opacity:0; }
.brand-menu .bm-item[aria-checked="true"] .bm-check{ opacity:1; }
.brand-menu .bm-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand-menu .bm-sep{ height:1px; margin:6px 4px; background:var(--border-soft, var(--border)); }
.brand-menu .bm-new{ color:var(--text-dim); }
.brand-menu .bm-new:hover{ color:var(--text); }
.brand-menu .bm-form{ display:flex; gap:var(--sp-6); padding:4px; }
.brand-menu .bm-form input{
  flex:1 1 auto; min-width:0; padding:7px 9px;
  background:var(--bg-soft, var(--bg)); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-sm,8px);
  font:500 var(--fs-13)/1 var(--sans);
}
.brand-menu .bm-form input:focus{ outline:none; border-color:var(--brand-ink); }
.brand-menu .bm-form button{
  flex:0 0 auto; padding:7px 11px; border:0; border-radius:var(--radius-sm,8px);
  background:var(--brand-ink); color:#fff; font:600 var(--fs-12)/1 var(--sans); cursor:pointer;
}
.brand-menu .bm-err{ padding:4px 10px 8px; color:var(--danger); font:500 var(--fs-11)/1.35 var(--sans); }

@media (max-width: 640px){
  .brand-switch{ max-width:120px; margin-left:6px; }
  .brand-menu{ left:8px !important; right:8px; min-width:0; max-width:none; width:auto; }
}

/* 🛑 На 360 px кнопка стискалась до ДЕВʼЯТНАДЦЯТИ пікселів ширини.
   Причина не в `max-width`, а в тому, що всередині стоїть `.bs-name` з
   `overflow:hidden` — його мінімальна ширина нуль, тож у тісному рядку
   flex вичавлював кнопку до самих полів. Лишалась смужка з крапкою, у яку
   пальцем не влучити, і назви бренду на ній усе одно не було видно.

   Тому нижче 400 px назву прибираємо СВІДОМО: лишається крапка з
   градієнтом бренду й шеврон, кнопка стає квадратною ціллю в 44 px, а
   ім'я бренду людина бачить у меню, яке ця кнопка й відкриває. */
@media (max-width: 400px){
  .brand-switch{
    flex:0 0 auto; max-width:none; min-width:44px; justify-content:center;
    padding:5px 8px; gap:5px;
  }
  .brand-switch .bs-name{ display:none; }
}