/* ═══════════════════════════════════════════════════════════════════════════
   Ключи API, филиалы, белая марка, доступ партнёра (18 сентября 2026).
   Только логические свойства — экраны открываются и справа налево.
   Своей палитры нет: токены темы с запасными значениями.
   ═══════════════════════════════════════════════════════════════════════════ */

.plat-card { display: flex; flex-direction: column; gap: 14px; }
.plat-head { display: flex; flex-direction: column; gap: 6px; }
.plat-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plat-title { margin: 0; font-size: 1.15rem; }
.plat-subtitle { margin: 14px 0 6px; font-size: 1rem; }
.plat-chip { font-size: .72rem; padding-block: 3px; padding-inline: 9px; border-radius: 999px; border: 1px solid var(--rp-line, rgba(127,127,127,.3)); }
.plat-chip-live { color: #22c55e; border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.08); }
.plat-chip-draft { color: var(--rp-ink-2, #94a3b8); }
.plat-chip-setup { color: #fbbf24; border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.08); }
.plat-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.plat-col { display: flex; flex-direction: column; gap: 10px; }
.plat-form { padding-block: 10px; }
.plat-field { display: flex; flex-direction: column; gap: 4px; min-inline-size: 180px; }
.plat-field-label { font-size: .78rem; opacity: .75; }
.plat-input { min-block-size: 36px; padding-block: 6px; padding-inline: 10px; border-radius: 8px;
  border: 1px solid var(--rp-line, rgba(127,127,127,.3)); background: var(--rp-surface-2, rgba(127,127,127,.06)); color: inherit; font: inherit; }
.plat-color { inline-size: 44px; block-size: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.plat-check { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.plat-notice { color: var(--rp-ink-1, inherit); }
.plat-error { color: #f87171; }
.plat-danger { color: #f87171; }
.plat-table-wrap { overflow-x: auto; }
.plat-table { inline-size: 100%; border-collapse: collapse; font-size: .88rem; }
.plat-table th, .plat-table td { text-align: start; padding-block: 8px; padding-inline: 10px; border-block-end: 1px solid var(--rp-line, rgba(127,127,127,.18)); vertical-align: middle; }
.plat-table th { font-weight: 600; opacity: .75; font-size: .78rem; }
.plat-table tr.is-revoked td { opacity: .5; }
.plat-table tr.is-overdue td { color: #fbbf24; }
.plat-link { color: var(--wl-accent, var(--rp-blue, #3b82f6)); text-decoration: none; }
.plat-link:hover { text-decoration: underline; }
.api-key-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; word-break: break-all; }
.plat-secret-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px;
  border: 1px solid rgba(34,197,94,.45); background: rgba(34,197,94,.07); }
.plat-secret-box .api-key-secret { padding-block: 6px; padding-inline: 10px; border-radius: 8px; background: rgba(0,0,0,.25); flex: 1 1 320px; }
.plat-docs { border-block-start: 1px solid var(--rp-line, rgba(127,127,127,.2)); padding-block-start: 10px; }
.plat-facts { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.plat-code { margin: 6px 0; padding: 12px; border-radius: 10px; background: rgba(0,0,0,.35); overflow-x: auto; font-size: .8rem; line-height: 1.5; }
.plat-method { display: inline-block; min-inline-size: 48px; text-align: center; font-weight: 700; font-size: .72rem; padding-block: 3px; border-radius: 6px; }
.plat-method-get { background: rgba(59,130,246,.18); color: #60a5fa; }
.plat-method-post { background: rgba(34,197,94,.18); color: #4ade80; }
.plat-branch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.plat-branch { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--rp-line, rgba(127,127,127,.22)); background: var(--rp-surface-2, rgba(127,127,127,.04));
  border-inline-start: 3px solid var(--plat-accent, var(--wl-accent, rgba(127,127,127,.35))); }
.plat-branch.is-selected { border-color: var(--wl-accent, #3b82f6); }
.plat-branch-name { font-size: 1rem; }
.plat-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; opacity: .85; }
.plat-branch-view { display: flex; flex-direction: column; gap: 10px; border-block-start: 1px solid var(--rp-line, rgba(127,127,127,.2)); padding-block-start: 8px; }
.plat-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.plat-section { display: flex; flex-direction: column; gap: 8px; }
.plat-branding-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .plat-branding-layout { grid-template-columns: 1fr; } }
.plat-brand-preview { --plat-accent: #2f6bff; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px;
  border: 1px solid var(--rp-line, rgba(127,127,127,.25)); background: var(--rp-surface-2, rgba(127,127,127,.05)); }
.plat-preview-bar { display: flex; align-items: center; gap: 10px; }
.plat-preview-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 38px; block-size: 38px; border-radius: 10px;
  background: var(--plat-accent); color: #fff; font-weight: 700; overflow: hidden; }
.plat-preview-mark img { inline-size: 100%; block-size: 100%; object-fit: contain; background: #fff; }
.plat-preview-chip { padding-block: 5px; padding-inline: 12px; border-radius: 8px; background: var(--plat-accent); color: #fff; font-size: .82rem; }
.plat-preview-link { color: var(--plat-accent); font-size: .85rem; text-decoration: underline; }
.plat-preview-login { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: rgba(0,0,0,.2); }
.plat-preview-input { block-size: 30px; border-radius: 6px; border: 1px solid var(--rp-line, rgba(127,127,127,.3)); }
.plat-preview-button { align-self: flex-start; padding-block: 6px; padding-inline: 14px; border-radius: 8px; background: var(--plat-accent); color: #fff; font-size: .85rem; }

/* Исходящие вебхуки (26 сентября 2026, план 10B): форма, карточки адресов,
   журнал доставок. Карточки, а не таблица: адрес длинный, на 375 px он
   переносится, а страница не уезжает вбок. */
.plat-hook-form { display: flex; flex-direction: column; gap: 10px; }
.plat-hook-form .plat-field { min-inline-size: 0; }
.plat-hook-form .plat-input { inline-size: 100%; box-sizing: border-box; }
.plat-hook-form > .primary-button { align-self: flex-start; }
.plat-hook-events { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.plat-hooks { display: flex; flex-direction: column; gap: 10px; }
.plat-hook { display: flex; flex-direction: column; gap: 6px; padding-block: 12px; padding-inline: 14px; border-radius: 12px; min-inline-size: 0;
  border: 1px solid var(--rp-line, rgba(127,127,127,.22)); background: var(--rp-surface-2, rgba(127,127,127,.04)); }
.plat-hook.is-on { border-inline-start: 3px solid rgba(34,197,94,.6); }
.plat-hook .cs-note { margin: 0; }
.plat-hook-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-inline-size: 0; }
.plat-hook-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; overflow-wrap: anywhere; min-inline-size: 0; }
.plat-hook-actions { align-items: center; gap: 8px; }
.plat-hook-log { border-block-start: 1px solid var(--rp-line, rgba(127,127,127,.2)); padding-block-start: 8px; }
.plat-hook-log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.plat-hook-log-list li { overflow-wrap: anywhere; }
.plat-hook-log-list li.is-delivered strong { color: #22c55e; }
.plat-hook-log-list li.is-dead strong, .plat-hook-log-list li.is-failed strong { color: #f87171; }
.plat-hook-log-list li.is-pending strong { color: #fbbf24; }

/* Белая марка: акцент клиента на основных кнопках и активном пункте меню. */
/* !important on purpose: the design system paints .primary-button with a
   gradient at higher specificity, and a client brand must win over it. */
html[data-white-label] .primary-button { background: var(--wl-accent) !important; border-color: var(--wl-accent) !important; }
html[data-white-label] .nav-item[aria-current="page"] .nav-icon { color: var(--wl-accent); }
html[data-white-label] button.brand img, html[data-white-label] a.auth-brand img { object-fit: contain; border-radius: 8px; }