/* Раздел «Интеграции» (public/panel/integrations.js): хаб карточек и страница интеграции по шагам.
   Токены — из panel.css; свои классы с префиксом in-. Стиль — как мастер #/welcome и «Знания»: крупный текст, воздух. */

.in { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.in-rest { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.in-groups { display: flex; flex-direction: column; gap: 36px; min-width: 0; }

/* Кнопки раздела: касание не меньше 44 px */
.in-btn { min-height: 44px; }
.in-btn-lg { min-height: 52px; height: 52px; padding: 0 28px; font-size: 16px; }
.in-btn:focus-visible,
.in-ext:focus-visible,
.in-step-head:focus-visible,
.in-spoiler summary:focus-visible,
.in-crumbs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Хаб: группы и карточки ---------- */

.in-group { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.in-group-head { display: flex; flex-direction: column; gap: 2px; }
.in-group-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.in-group-sub { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }

.in-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.in-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  min-width: 0;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.in-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.in-card-soon { background: var(--surface-2); }
.in-card-error { border-color: var(--danger); }
.in-card-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.in-card-titles { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.in-card-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.in-card-tagline { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.in-card-foot { margin-top: auto; padding-top: 4px; }
.in-card-foot .btn { width: 100%; }

/* ---------- Логотипы (нарисованы в integrations.js) ---------- */

.in-logo { display: inline-flex; width: 44px; height: 44px; flex: none; }
.in-logo-svg { width: 100%; height: 100%; }
.in-logo-bg { fill: #64748b; }
.in-logo-t { fill: #fff; text-anchor: middle; font-weight: 700; font-family: 'Inter Tight', Inter, Arial, sans-serif; }
.in-logo-tb { fill: #4285f4; text-anchor: middle; font-weight: 700; font-family: 'Inter Tight', Inter, Arial, sans-serif; }
.in-logo-w { fill: #fff; }
.in-logo-b { fill: #4285f4; }
.in-logo-s { fill: none; stroke: #23a566; stroke-width: 1.6; stroke-linecap: round; }
.in-logo-wl { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.in-logo-widget .in-logo-bg { fill: #5b4cff; }
.in-logo-form .in-logo-bg { fill: #7c6cf5; }
.in-logo-forms .in-logo-bg { fill: #0d9488; }
.in-logo-amocrm .in-logo-bg { fill: #1b9ad6; }
.in-logo-bitrix24 .in-logo-bg { fill: #0f97d6; }
.in-logo-google_sheets .in-logo-bg { fill: #23a566; }
.in-logo-csv .in-logo-bg { fill: #55606e; }
.in-logo-google_calendar .in-logo-bg { fill: #4285f4; }
.in-logo-yandex_calendar .in-logo-bg { fill: #e5361a; }
.in-logo-telegram .in-logo-bg { fill: #229ed9; }
.in-logo-max .in-logo-bg { fill: #5b4cff; }
.in-logo-vk .in-logo-bg { fill: #0077ff; }
.in-logo-avito .in-logo-bg { fill: #0a8fe0; }
.in-logo-email .in-logo-bg { fill: #475569; }
.in-phead .in-logo { width: 64px; height: 64px; }

/* ---------- Страница интеграции ---------- */

.inp { display: flex; flex-direction: column; gap: 24px; max-width: 1180px; min-width: 0; }
.inp-body { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.in-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.in-crumbs-list { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-2); }
.in-crumbs-list li + li::before { content: "›"; margin-right: 6px; color: var(--ink-3); }
.in-crumbs-list a { color: var(--ink-2); text-decoration: none; }
.in-crumbs-list a:hover { color: var(--ink); text-decoration: underline; }
.in-crumbs-list [aria-current] { color: var(--ink); font-weight: 500; }

.in-phead { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
.in-phead-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.in-phead-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.in-h1 { margin: 0; font-size: clamp(28px, 3.4vw, 38px); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; overflow-wrap: anywhere; }
.in-phead-sub { margin: 0; max-width: 720px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }

.in-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; min-width: 0; }
.in-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.in-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.in-panel,
.in-section,
.in-aside-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  min-width: 0;
}
.in-panel { padding: 28px; gap: 18px; }
.in-panel-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.in-panel-danger { border-color: var(--danger-bg); }
.in-aside-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.in-aside-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

.in-checks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.in-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; }
.in-checks-ico { display: inline-flex; width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--ok-ink); }
.in-checks-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.in-how { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

.in-note {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
.in-note-bad { background: var(--danger-bg); color: var(--danger-ink); }
.in-soon { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.in-hint { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }
.in-hint-full { flex-basis: 100%; margin: 0; }
.in-empty { margin: 0; padding: 12px 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }

/* ---------- Шаги ---------- */

.in-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.in-step {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  min-width: 0;
}
.in-step[data-state="current"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.in-step[data-state="todo"] .in-step-title { color: var(--ink-2); }
.in-step-h { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: 0; }
.in-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 14px 18px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.in-step-num {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 600;
}
.in-step[data-state="current"] .in-step-num { background: var(--accent); color: #fff; }
.in-step[data-state="done"] .in-step-num { background: var(--ok); color: #fff; }
.in-step[data-state="done"] .in-step-digit { display: none; }
.in-step:not([data-state="done"]) .in-step-check { display: none; }
.in-step-check { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.in-step-titles { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.in-step-title { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.in-step-sum { font-size: 14px; color: var(--ink-3); overflow-wrap: anywhere; }
.in-step-sum:empty { display: none; }
.in-step-chev { width: 22px; height: 22px; flex: none; stroke: var(--ink-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
.in-step.is-open .in-step-chev { transform: rotate(180deg); }
.in-step-body { padding: 2px 18px 24px 68px; min-width: 0; }
.in-step-inner { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
.in-step-inner > * { max-width: 100%; }
.in-step-text { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.in-step-link { margin: 0; }

.in-ext {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.in-ext svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Схемы «куда нажать» */
.in-scheme { margin: 0; width: 100%; max-width: 440px; }
.in-sc { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.in-scheme-cap { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.in-sc-win { fill: var(--surface-2); stroke: var(--line-2); }
.in-sc-win2 { fill: var(--surface); stroke: var(--line-2); }
.in-sc-bar { fill: var(--surface); stroke: var(--line); }
.in-sc-btn { fill: var(--surface); stroke: var(--line-2); }
.in-sc-chk { fill: var(--surface); stroke: var(--line-2); }
.in-sc-hl,
.in-sc-hlbtn { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 1.6; }
.in-sc-tick,
.in-sc-ptr { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.in-sc-faint { stroke: var(--line-2); stroke-width: 1.5; stroke-linecap: round; }
.in-sc-badge { fill: var(--accent); }
.in-sc-t { font-family: Inter, -apple-system, Arial, sans-serif; font-size: 12px; }
.in-sc-mute { fill: var(--ink-2); }
.in-sc-hlt { fill: var(--accent); font-weight: 600; }
.in-sc-note { fill: var(--ink-3); font-size: 11.5px; }
.in-sc-strong { fill: var(--ink); font-weight: 600; }
.in-sc-badget { fill: #fff; font-size: 10px; font-weight: 700; }

/* ---------- Поля внутри шага ---------- */

.in-fieldbox { gap: 6px; width: 100%; max-width: 520px; }
.in-flabel { font-size: 15px; font-weight: 600; color: var(--ink); }
.in-fieldbox input,
.in-fieldbox select { height: 48px; font-size: 16px; }
.in-example { margin: 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.45; overflow-wrap: anywhere; }
.in-example:empty { display: none; }
.in-fmsg { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.in-fmsg:empty { display: none; }
.in-fmsg-ok { color: var(--ok-ink); }
.in-fmsg-bad { color: var(--danger-ink); }
.in-fieldbox input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--danger) inset; }
.in-dates { display: flex; flex-wrap: wrap; gap: 14px; width: 100%; }
.in-dates .field { flex: 1 1 160px; min-width: 0; max-width: 220px; }
.in-date { width: 100%; min-height: 48px; font-size: 16px; }

.in-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.in-form { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
.in-oauth { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* Результат действия: ✓ или ошибка с понятным текстом */
.in-msg { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; }
.in-msg:empty { display: none; }
.in-msg-ok,
.in-msg-fail { padding: 12px 16px; border-radius: var(--r-md); }
.in-msg-ok { background: var(--ok-bg); color: var(--ok-ink); }
.in-msg-fail { background: var(--danger-bg); color: var(--danger-ink); }
.in-msg-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; font-size: 13px; font-weight: 700; color: #fff; }
.in-msg-ok .in-msg-ico { background: var(--ok); }
.in-msg-fail .in-msg-ico { background: var(--danger); }
.in-test-link { min-height: 0; }
.in-test-link:empty { display: none; }

/* Согласие на передачу данных за рубеж */
.in-ack { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 620px; padding: 16px 18px; border-radius: var(--r-md); background: var(--warn-bg); }
.in-ack-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.in-ack-row { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; font-weight: 600; cursor: pointer; }
.in-ack-row input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: var(--accent); cursor: pointer; }
.in-ack-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Ручное подключение под спойлером */
.in-spoiler { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 18px 18px; }
.in-spoiler summary { display: flex; align-items: center; min-height: 56px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--accent); border-radius: var(--r-md); }
.in-spoiler[open] summary { margin-bottom: 8px; }

/* ---------- Журнал отправок ---------- */

.in-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.in-section-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.in-jobs { margin: 0; padding: 0; list-style: none; }
.in-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  padding: 12px 0;
  box-shadow: 0 -1px 0 var(--line);
}
.in-job:first-child { box-shadow: none; }
.in-job-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.in-job-target { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.in-job-date { font-size: 13px; color: var(--ink-3); }
.in-job-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--ink-2);
  min-width: 0;
}
.in-job-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.in-job-retry { grid-column: 1 / -1; justify-self: start; }

/* ---------- «Каналы → Интеграции»: аккуратные блоки (panel.js, buildSetupIntegrations) ---------- */

.in-tidy { display: flex; flex-direction: column; gap: 28px; max-width: 980px; min-width: 0; }
.in-tidy-block { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.in-tidy-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.in-tidy-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.in-tidy .ycal { margin-top: 0; padding-top: 0; border-top: 0; border-bottom: 0; }

.in-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.in-summary-text { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.45; }

.in-notify { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.in-notify > li + li { border-top: 1px solid var(--line); }
.in-notify-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 16px 20px; cursor: pointer; }
.in-notify-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.in-notify-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.in-notify-hint { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.in-notify-row input[type="checkbox"] { width: 24px; height: 24px; flex: none; accent-color: var(--accent); cursor: pointer; }
.in-notify-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- ВКонтакте (П142): форма подключения в «Каналы → Интеграции» и на #/integrations/vk ---------- */

.vk { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 620px; }
.vk p { margin: 0; overflow-wrap: anywhere; }
.vk-status { display: flex; align-items: center; gap: 10px; }
.vk-how summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14.5px; font-weight: 500; }
.vk-steps { margin: 4px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.vk-steps li + li { margin-top: 6px; }
.vk-url-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; }
.vk-url-row .field { flex: 1 1 280px; min-width: 0; }
.vk input { width: 100%; box-sizing: border-box; min-width: 0; }
.vk-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; text-overflow: ellipsis; }
.vk-copy { min-height: 44px; }
.vk-form { display: flex; flex-direction: column; gap: 14px; margin: 0; max-width: 520px; }
.vk-form .btn { min-height: 44px; }

/* Авито: адрес вебхука с кнопкой «Скопировать», статус */
.in-av-url-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; }
.in-av-url-row .field { flex: 1 1 280px; min-width: 0; }
.in-av-url-row input { width: 100%; box-sizing: border-box; min-width: 0; }
.in-av-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; text-overflow: ellipsis; }
.in-av-copy { min-height: 44px; }
.in-av-status { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.vk-form .form-actions { flex-wrap: wrap; }

/* ---------- Планшет и десктоп ---------- */

@media (min-width: 768px) {
  .in-job { grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto; }
  .in-job-meta { grid-column: auto; }
  .in-job-retry { grid-column: auto; justify-self: end; }
}

@media (min-width: 1080px) {
  .in-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
  .in-aside { position: sticky; top: 24px; }
}

/* ---------- Телефон ---------- */

@media (max-width: 600px) {
  .in { gap: 28px; }
  .in-phead { gap: 14px; }
  .in-phead .in-logo { width: 52px; height: 52px; }
  .in-phead-sub { font-size: 16px; }
  .in-panel { padding: 20px 16px; }
  .in-panel,
  .in-section,
  .in-aside-card { border-radius: var(--r-md); }
  .in-step-head { padding: 12px 14px; gap: 12px; }
  .in-step-body { padding: 2px 14px 20px; }
  .in-step-title { font-size: 18px; }
  .in-step-text { font-size: 16px; }
  .in-actions .btn,
  .in-step-inner > .btn { width: 100%; }
  .in-card-foot .btn { width: 100%; }
  .in-notify-row { padding: 14px 16px; min-height: 64px; }
  .vk-copy,
  .in-av-copy,
  .vk-form .btn { width: 100%; }
  .in-section-head { flex-direction: column; }
}

@media (max-width: 640px) {
  .forms-site .form-actions .btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .in-step-chev,
  .in-card { transition: none; }
}

/* ---------- «Формы сайта» (#/connections/forms) ---------- */

.forms-site { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.forms-site .facts .fact-key { width: 90px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.forms-site .facts .fact { align-items: baseline; }
.forms-site .facts { margin-bottom: 12px; }
.forms-site .widget-details + .widget-details { margin-top: 8px; }
.forms-test-result { font-size: 14px; margin-top: 10px; }
.forms-test-result:empty { display: none; }
.forms-test-result.is-ok { color: var(--ink); font-weight: 500; }
.forms-test-result.is-fail { color: var(--danger); }

/* Секретный ключ форм: статус, одноразовый показ ключа, переключатель «только по секретному ключу» */
.forms-secret { margin-top: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.forms-secret .block-title, .forms-secret .field-hint { margin: 0; }
.forms-secret-status { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.forms-secret-shown { background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.forms-secret-note { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.forms-secret-value { display: block; background: var(--surface); color: var(--ink); border-radius: var(--r-sm); padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; user-select: all; }
.forms-secret .form-actions .btn, .forms-secret-shown .form-actions .btn { min-height: 44px; }
.forms-secret-only { display: flex; flex-direction: column; gap: 6px; }
.forms-secret-only .switch { align-items: center; min-height: 44px; flex-wrap: wrap; font-size: 14px; color: var(--ink); }
.forms-secret-only .switch-label { flex: 1 1 200px; min-width: 0; }
.forms-secret-warn { color: var(--warn-ink); }