/* pages/live-editor.css */
/* ---------- Live editor shell (F.1) ---------- */
.le-shell { display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden; }
.le-topbar {
  display: flex; gap: var(--space-8); align-items: center;
  padding: var(--space-10) var(--space-16); border-bottom: 1px solid var(--border-subtle);
  min-width: 0; background: var(--bg-surface);
}
.le-title { color: var(--text-primary); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-slug { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-label); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-spacer { flex: 1; }
.le-split { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(560px, .95fr) minmax(480px, 1.05fr); gap: var(--space-16); padding: var(--space-16); overflow: hidden; }
.le-left, .le-right {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8); overflow: hidden;
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
.le-left { overflow-y: auto; } /* accordion must scroll — was clipped with 3+ sections open */

/* ---------- Guided offer builder ---------- */
.le-shell--guided .le-split { grid-template-columns: minmax(580px, 1fr) minmax(480px, 1fr); }
.le-builder { display: flex; flex-direction: column; min-height: 100%; background: var(--bg-canvas); }
.le-builder__intro { padding: var(--space-20) var(--space-20) var(--space-16); background: var(--bg-surface); }
.le-builder__intro h1 {
  max-width: 620px; margin: var(--space-10) 0 var(--space-6); color: var(--text-primary);
  font-size: var(--fs-title); line-height: 1.2; letter-spacing: -.01em;
}
.le-builder__intro p { max-width: 640px; margin: 0; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; }
.le-guide-nav {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6);
  padding: 0 var(--space-20) var(--space-16); background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}
.le-guide-nav__item {
  position: relative; display: flex; align-items: center; gap: var(--space-8); min-width: 0;
  min-height: 52px; padding: var(--space-8); color: var(--text-muted); text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-6); cursor: pointer;
}
.le-guide-nav__item:hover { color: var(--text-primary); background: var(--bg-elevated); }
.le-guide-nav__item:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.le-guide-nav__item.is-current { color: var(--text-primary); background: var(--accent-soft-bg); border-color: var(--accent-soft-border); }
.le-guide-nav__item.is-complete:not(.is-current) { color: var(--text-secondary); }
.le-guide-nav__number {
  display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px;
  color: var(--text-tertiary); background: var(--bg-input); border: 1px solid var(--border-default);
  border-radius: 50%; font-size: var(--fs-micro); font-weight: var(--fw-bold);
}
.le-guide-nav__item.is-current .le-guide-nav__number { color: var(--text-on-accent); background: var(--accent); border-color: var(--accent); }
.le-guide-nav__item.is-complete .le-guide-nav__number { color: var(--ok); background: var(--ok-soft-bg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.le-guide-nav__item > span:last-child { display: grid; gap: var(--space-4); min-width: 0; }
.le-guide-nav__item strong, .le-guide-nav__item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-guide-nav__item strong { font-size: var(--fs-label); }
.le-guide-nav__item small { color: var(--text-muted); font-size: var(--fs-micro); }
.le-builder__stage { flex: 1; padding: var(--space-20); }
.le-guide-card {
  display: grid; gap: var(--space-20); max-width: 760px; margin: 0 auto; padding: var(--space-20);
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-8);
  box-shadow: var(--shadow-sm);
}
.le-guide-card__heading { display: flex; align-items: flex-start; gap: var(--space-12); }
.le-guide-card__icon {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  color: var(--accent-soft-text); background: var(--accent-soft-bg); border-radius: var(--radius-8);
}
.le-guide-card__heading h2, .le-guide-finish-copy h2 { margin: 0; color: var(--text-primary); font-size: var(--fs-section); line-height: 1.25; }
.le-guide-card__heading p, .le-guide-finish-copy p {
  max-width: 64ch; margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5;
}
.le-guide-details { border: 1px solid var(--border-subtle); border-radius: var(--radius-6); background: var(--bg-elevated); }
.le-guide-details > summary {
  display: flex; align-items: center; gap: var(--space-8); min-height: var(--touch-target);
  padding: var(--space-8) var(--space-12); color: var(--text-secondary); cursor: pointer; list-style: none;
}
.le-guide-details > summary::-webkit-details-marker { display: none; }
.le-guide-details > summary span { font-size: var(--fs-label); font-weight: var(--fw-medium); }
.le-guide-details > summary small { margin-left: auto; color: var(--text-muted); font-size: var(--fs-micro); }
.le-guide-details[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.le-guide-details > .le-field { display: grid; gap: var(--space-4); padding: var(--space-12); }
.le-guide-details--accounts > .le-accounts__head { padding: var(--space-12) var(--space-12) 0; }
.le-guide-details--accounts > .le-accounts { padding: 0 var(--space-12) var(--space-12); }
.le-link-flow {
  display: flex; align-items: center; justify-content: center; gap: var(--space-8); padding: var(--space-10);
  color: var(--text-muted); background: var(--bg-elevated); border-radius: var(--radius-6); font-size: var(--fs-label);
}
.le-link-flow span { padding: var(--space-4) var(--space-8); color: var(--text-secondary); background: var(--bg-input); border-radius: var(--radius-pill); }
.le-form--guide-links { grid-template-columns: minmax(0, 1fr) minmax(150px, .3fr); }
.le-guide-presets { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.le-choice-card {
  position: relative; display: grid; gap: var(--space-4); min-width: 220px; padding: var(--space-12) var(--space-16);
  color: var(--text-primary); text-align: left; background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-8); cursor: pointer;
}
.le-choice-card.is-selected { background: var(--accent-soft-bg); border-color: var(--accent-soft-border); }
.le-choice-card strong { padding-right: var(--space-20); font-size: var(--fs-small); }
.le-choice-card small { color: var(--text-muted); font-size: var(--fs-label); }
.le-choice-card__check { position: absolute; top: var(--space-12); right: var(--space-12); color: var(--accent-soft-text); }
.le-recording-tip {
  display: flex; align-items: center; gap: var(--space-12); min-height: 58px; padding: var(--space-10) var(--space-12);
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-6);
}
.le-recording-tip__number {
  display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; color: var(--accent-soft-text);
  background: var(--accent-soft-bg); border-radius: 50%; font-size: var(--fs-label); font-weight: var(--fw-bold);
}
.le-recording-tip p { flex: 1; margin: 0; color: var(--text-primary); font-size: var(--fs-label); line-height: 1.4; }
.le-recording-tip p span { color: var(--text-muted); }
.le-guide-steps-head, .le-launch-control, .le-guide-final-actions {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
}
.le-guide-steps-head h3, .le-guide-success h3 { margin: 0; color: var(--text-primary); font-size: var(--fs-body); }
.le-guide-steps-head p, .le-guide-success p { margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--fs-label); line-height: 1.45; }
.le-guide-success { display: grid; gap: var(--space-12); padding-top: var(--space-20); border-top: 1px solid var(--border-subtle); }
.le-guide-success .le-field { display: grid; gap: var(--space-4); }
.le-guide-preserved { display: flex; align-items: center; gap: var(--space-6); color: var(--ok) !important; }
.le-guide-footer {
  position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-12) var(--space-20); background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  border-top: 1px solid var(--border-subtle); backdrop-filter: blur(12px);
}
.le-guide-footer__progress { margin: auto; color: var(--text-muted); font-size: var(--fs-label); }
.le-guide-card--finish { justify-items: center; text-align: center; }
.le-guide-finish-icon {
  display: grid; place-items: center; width: 64px; height: 64px; color: var(--warn);
  background: var(--warn-soft-bg); border-radius: 50%;
}
.le-guide-finish-icon.is-ready { color: var(--ok); background: var(--ok-soft-bg); }
.le-readiness { display: grid; width: 100%; border: 1px solid var(--border-subtle); border-radius: var(--radius-8); overflow: hidden; }
.le-readiness__item {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--space-8); min-height: 48px;
  padding: var(--space-8) var(--space-12); color: var(--text-primary); text-align: left;
  background: var(--bg-surface); border: 0; border-bottom: 1px solid var(--border-subtle); cursor: pointer;
}
.le-readiness__item:last-child { border-bottom: 0; }
.le-readiness__item:hover { background: var(--bg-elevated); }
.le-readiness__item > span { display: grid; place-items: center; color: var(--text-muted); }
.le-readiness__item.is-complete > span, .le-readiness__item.is-complete small { color: var(--ok); }
.le-readiness__item strong { font-size: var(--fs-small); }
.le-readiness__item small { color: var(--warn); font-size: var(--fs-label); }
.le-launch-control { width: 100%; padding: var(--space-12); text-align: left; background: var(--bg-elevated); border-radius: var(--radius-8); }
.le-launch-control > div { display: grid; gap: var(--space-4); }
.le-launch-control strong { color: var(--text-primary); font-size: var(--fs-small); }
.le-launch-control small { color: var(--text-muted); font-size: var(--fs-label); }
.le-guide-final-actions { width: 100%; justify-content: flex-end; }

/* ---------- Live editor accordion + Section 1 (F.2) ---------- */
.le-acc { display: flex; flex-direction: column; }
.le-acc__head {
  display: flex; gap: var(--space-8); align-items: center;
  padding: var(--space-12) var(--space-16); background: var(--bg-elevated);
  width: 100%; min-height: var(--touch-target); border: 0;
  border-bottom: 1px solid var(--border-subtle);
  color: inherit; font: inherit; text-align: left;
  cursor: pointer; user-select: none;
}
.le-acc__head:hover { background: var(--bg-input); }
.le-acc__head:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.le-acc__head.is-open {
  background: var(--bg-input);
  /* padding-left ≈ base var(--space-16) minus the 3px accent border so the title stays put when the border appears */
  border-left: 3px solid var(--accent); padding-left: var(--space-12);
}
.le-acc__chev {
  width: 8px; height: 8px; flex: 0 0 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  color: var(--text-muted); transform: rotate(-45deg); transition: transform 120ms ease;
}
.le-acc__head.is-open .le-acc__chev { transform: rotate(45deg) translate(-1px, -1px); }
.le-acc__title { color: var(--text-primary); font-weight: var(--fw-bold); flex: 1; }
.le-acc__head .pill { min-width: 26px; min-height: 24px; justify-content: center; }
.le-acc__body {
  padding: var(--space-16); border-bottom: 1px solid var(--border-subtle); background: var(--bg-canvas);
  overflow-y: auto; max-height: 60vh;
}
.le-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); min-width: 0; }
.le-form label { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-small); }
.le-form label > span { color: var(--text-secondary); }
.le-form__toggle { flex-direction: row; align-items: center; justify-content: space-between; }
.le-field-error { margin: 0; color: var(--danger); font-size: var(--fs-label); line-height: 1.35; }
.le-form .input[aria-invalid="true"] { border-color: var(--danger); }
.le-form .input[aria-invalid="true"]:focus { outline-color: var(--danger); }

/* ---------- Offer editor: basic commercial settings ---------- */
.le-basic { display: grid; gap: 0; min-width: 0; }
.le-form-group {
  min-width: 0; padding: var(--space-20) 0;
  background: transparent; border: 0; border-radius: 0;
}
.le-form-group:first-child { padding-top: 0; }
.le-form-group:last-child { padding-bottom: 0; }
.le-form-group + .le-form-group { border-top: 1px solid var(--border-subtle); }
.le-form-group__head, .le-accounts__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16);
  margin-bottom: var(--space-16);
}
.le-form-group__head h3, .le-accounts__head h3 {
  margin: 0; color: var(--text-primary); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.3;
}
.le-form-group__head p, .le-accounts__head p {
  max-width: 68ch; margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--fs-label); line-height: 1.45;
}
.le-field { min-width: 0; }
.le-field > span, .le-account-field > span {
  color: var(--text-secondary); font-size: var(--fs-label); font-weight: var(--fw-medium); line-height: 1.35;
}
.le-field > span b { color: var(--danger); }
.le-field-help { color: var(--text-muted); font-size: var(--fs-micro); line-height: 1.4; }
.le-form--identity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.le-form--identity .le-field--wide { grid-column: 1 / -1; }
.le-postback-note {
  display: flex; align-items: flex-start; gap: var(--space-8);
  margin: var(--space-12) 0 0; padding: var(--space-10) var(--space-12);
  border: 1px solid var(--border-default); border-radius: var(--radius-6);
  background: var(--info-soft-bg); color: var(--text-secondary);
  font-size: var(--fs-label); line-height: 1.45;
}
.le-postback-note::before {
  content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin-top: var(--space-4);
  border-radius: 50%; background: var(--info);
}
.le-form--links { grid-template-columns: minmax(0, 1fr) minmax(140px, .32fr); }
.le-form--links .le-field--tracking { grid-column: 1 / -1; }
.le-active-control {
  display: inline-flex; align-items: center; gap: var(--space-12); flex: 0 0 auto;
  min-height: var(--touch-target); padding: 0; background: transparent;
  border: 0; border-radius: 0;
}
.le-active-control__copy { display: grid; gap: var(--space-4); }
.le-active-control__copy strong { color: var(--text-primary); font-size: var(--fs-label); line-height: 1.2; }
.le-active-control__copy small { color: var(--text-muted); font-size: var(--fs-micro); line-height: 1.2; }
.le-form input[readonly] { color: var(--text-tertiary); background: var(--bg-elevated); cursor: default; }

/* ---------- Live editor Section 2: Аудитория (F.3) ---------- */
.le-form__full { grid-column: 1 / -1; }
.le-fieldset {
  grid-column: 1 / -1; border: 1px solid var(--border-subtle); border-radius: var(--radius-6);
  padding: var(--space-8) var(--space-12); display: flex; gap: var(--space-16); align-items: center;
}
.le-fieldset legend { color: var(--text-tertiary); font-size: var(--fs-label); padding: 0 var(--space-4); }
/* --block: stack stacked textareas/labels vertically instead of the inline
   checkbox row layout the base .le-fieldset uses. */
.le-fieldset--block { flex-direction: column; align-items: stretch; gap: var(--space-8); }
.le-chk { display: inline-flex; gap: var(--space-6); align-items: center; font-size: var(--fs-secondary); }
.le-audience-more {
  overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-8);
  background: var(--bg-elevated);
}
.le-audience-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  min-height: var(--touch-target); padding: var(--space-10) var(--space-12); cursor: pointer; list-style: none;
}
.le-audience-more > summary::-webkit-details-marker { display: none; }
.le-audience-more > summary > span { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--text-primary); }
.le-audience-more > summary strong { font-size: var(--fs-label); }
.le-audience-more > summary small { color: var(--text-muted); font-size: var(--fs-micro); white-space: nowrap; }
.le-audience-more[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.le-audience-more__body { display: grid; gap: var(--space-16); padding: var(--space-16); }
.le-audience-group {
  display: grid; gap: var(--space-12); padding: var(--space-16); background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-6);
}
.le-audience-group__head h3 { margin: 0; color: var(--text-primary); font-size: var(--fs-body); }
.le-audience-group__head p { margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--fs-label); line-height: 1.45; }
.le-form--audience-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.le-fieldset--compact { grid-column: auto; align-items: center; flex-wrap: wrap; }
.le-audience-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.le-audience-switch {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  min-width: 0; min-height: 64px; padding: var(--space-10) var(--space-12);
  color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-6); cursor: pointer;
}
.le-audience-switch > span { display: grid; gap: var(--space-4); min-width: 0; }
.le-audience-switch strong { font-size: var(--fs-label); line-height: 1.25; }
.le-audience-switch small { color: var(--text-muted); font-size: var(--fs-micro); line-height: 1.35; }
.le-audience-switch input { flex: 0 0 auto; }
.le-audience-note {
  margin: 0; padding: var(--space-10) var(--space-12); color: var(--text-secondary);
  background: var(--info-soft-bg); border-radius: var(--radius-6); font-size: var(--fs-label); line-height: 1.45;
}

/* ---------- Live editor Section 3: Шаги (F.4) ---------- */
.le-steps { display: flex; flex-direction: column; gap: var(--space-8); }
.le-steps__list { display: flex; flex-direction: column; gap: var(--space-4); }
.le-step {
  display: flex; gap: var(--space-8); align-items: center;
  padding: var(--space-8) var(--space-10); background: var(--bg-elevated); border-radius: var(--radius-4);
  border: 1px solid transparent; font-size: var(--fs-small);
}
.le-step:hover { border-color: var(--border-default); }
/* literal 1px vertical padding on these dense chips: no --space-1 token, and 1→4 is a 4× change (not imperceptible) — leave */
.le-step__num { background: var(--bg-canvas); color: var(--text-tertiary); padding: 1px var(--space-6); border-radius: var(--radius-4); font-family: var(--font-mono); font-size: var(--fs-micro); min-width: 22px; text-align: center; }
.le-step__tag { max-width: 190px; padding: 1px var(--space-6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--radius-4); font-size: var(--fs-micro); font-weight: 600; }
.le-step-tag--info    { background: var(--info-soft-bg);   color: var(--info); }
.le-step-tag--ok      { background: var(--ok-soft-bg);     color: var(--ok); }
.le-step-tag--warn    { background: var(--warn-soft-bg);   color: var(--warn); }
.le-step-tag--danger  { background: var(--danger-soft-bg); color: var(--danger); }
.le-step-tag--accent  { background: var(--accent-soft-bg); color: var(--accent-soft-text); }
.le-step-tag--brand   { background: rgba(249,115,22,.15);  color: var(--brand-hh); }
.le-step-tag--pink    { background: var(--pink-soft-bg);   color: var(--pink); }
.le-step-tag--muted   { background: var(--bg-canvas);      color: var(--text-muted); }
.le-step__sel { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--fs-label); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-step__summary { flex: 1; min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: var(--fs-label); text-overflow: ellipsis; white-space: nowrap; }
.le-step__arrow { display: inline-flex; color: var(--text-muted); transform: rotate(90deg); }
.le-step__val { color: var(--warn); font-family: var(--font-mono); font-size: var(--fs-label); flex: 1; overflow: hidden; text-overflow: ellipsis; }
.le-step__btns { display: flex; gap: var(--space-4); margin-left: auto; }
.le-step__btn {
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer;
  padding: var(--space-4) var(--space-4); font-size: var(--fs-label); border-radius: var(--radius-4);
}
.le-step__btn:hover { color: var(--text-primary); background: var(--bg-canvas); }
.le-step__btn--danger:hover { color: var(--danger); }
/* Per-step editor form (slide-in) */
.le-step-editor__form { display: grid; gap: var(--space-12); }
.le-fe { display: grid; gap: var(--space-4); min-width: 0; }
.le-fe > span { font-size: var(--fs-label); color: var(--text-secondary); font-weight: var(--fw-medium); }
.le-fe textarea.input { resize: vertical; font-family: var(--font-mono); font-size: var(--fs-small); }
.le-fe--check { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-8); }
.le-fe--check > span { color: var(--text-primary); font-weight: var(--fw-normal); }
/* Advanced section — geo aliases + list textareas */
.le-adv-label { display: block; font-size: var(--fs-label); color: var(--text-secondary); font-weight: var(--fw-medium); margin-bottom: var(--space-4); }
.le-alias-list { display: grid; gap: var(--space-6); margin: var(--space-6) 0; }
.le-alias-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: var(--space-6); align-items: center; }
.le-alias-arrow { display: inline-flex; color: var(--text-muted); transform: rotate(90deg); }
.le-icon--down { transform: rotate(180deg); }
.le-sub-banner { margin: 0 0 var(--space-10); }
/* offer editor — partner-account list (basic section) */
.le-form-group--accounts { padding-bottom: 0; }
.le-accounts { display: grid; gap: var(--space-8); min-width: 0; }
.le-accounts__head #le-acc-add { flex: 0 0 auto; white-space: nowrap; }
.le-account-row {
  position: relative; display: grid;
  grid-template-columns: 28px minmax(0, .72fr) minmax(0, 1.35fr) minmax(76px, .38fr) 36px;
  gap: var(--space-8); align-items: start; min-width: 0; padding: var(--space-10);
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-6);
}
.le-account-row__index {
  display: grid; place-items: center; width: 28px; height: 28px; margin-top: var(--space-20);
  color: var(--text-tertiary); background: var(--bg-canvas); border-radius: 50%;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-bold);
}
.le-account-row__title {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.le-account-field { display: grid; gap: var(--space-4); min-width: 0; }
.le-account-row__delete { align-self: start; margin-top: var(--space-20); }
.le-accounts__empty {
  display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-16);
  text-align: center; background: var(--bg-elevated); border: 1px dashed var(--border-default); border-radius: var(--radius-6);
}
.le-accounts__empty p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.le-accounts__empty span { color: var(--text-muted); font-size: var(--fs-label); }

/* ---------- Live editor Section 5: Подписка / Publish (F.6) ---------- */
.le-sub { display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-start; font-size: var(--fs-secondary); }
.le-sub p { margin: 0; color: var(--text-tertiary); line-height: 1.45; }
/* literal 1px vertical padding: tight inline-code chip, no --space-1 token — leave */
.le-sub code { background: var(--bg-input); padding: 1px var(--space-4); border-radius: var(--radius-4); font-family: var(--font-mono); color: var(--accent-soft-text); }
.le-hint { color: var(--text-muted); font-size: var(--fs-label); line-height: 1.4; }

/* ---------- Live editor right panel: live stream (F.7) ---------- */
.le-right__toolbar { display: flex; gap: var(--space-8); align-items: center; padding: var(--space-8) var(--space-12); background: var(--bg-elevated); border-bottom: 1px solid var(--border-subtle); min-width: 0; }
.le-preview-empty {
  display: grid; justify-items: center; align-content: center; gap: var(--space-10); flex: 1;
  max-width: 460px; margin: auto; padding: var(--space-24); text-align: center;
}
.le-preview-empty > span { display: grid; place-items: center; width: 64px; height: 64px; color: var(--accent-soft-text); background: var(--accent-soft-bg); border-radius: 50%; }
.le-preview-empty h2 { margin: 0; color: var(--text-primary); font-size: var(--fs-section); }
.le-preview-empty p { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--fs-small); line-height: 1.55; }
.le-right__canvas { flex: 1; min-height: 220px; padding: var(--space-12); background: radial-gradient(circle at 50% 50%, var(--bg-elevated), var(--bg-canvas)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: crosshair; }
.le-right__canvas:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.le-right__canvas.is-disconnected { cursor: not-allowed; }
.le-right__canvas img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.le-stream-cover {
  position: absolute; inset: var(--space-12); display: grid; place-items: center;
  padding: var(--space-16); text-align: center; color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-canvas) 88%, transparent);
  border: 1px dashed var(--border-default); border-radius: var(--radius-6);
}
.le-stream-cover[hidden] { display: none; }
.le-canvas-help { margin: 0; padding: var(--space-6) var(--space-12); color: var(--text-muted); font-size: var(--fs-label); line-height: 1.4; border-top: 1px solid var(--border-subtle); }
.le-right .rc-btn:focus-visible, .le-right .rc-speed:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.le-right .rc-btn:disabled, .le-right .rc-speed:disabled { opacity: .5; cursor: not-allowed; }
.le-load-error { margin: auto; max-width: 620px; }
.le-unsaved p { margin: 0 0 var(--space-8); }

/* ---------- Live editor history + JSON drawer (F.8/F.9) ----------
   The old hand-rolled singleton shell (backdrop, root container, head/title/
   close-button — "le-history-overlay"/"le-history" + its __head/__title/
   __close children) is gone (Phase 5) — the shared overlay.js core now
   supplies the backdrop, surface, title, and the ≥44px .overlay__close close
   button (see js/pages/live-editor.js's ensureHistoryOverlay(), which adds
   the `.overlay--le-history` class for the wide/scrolling sizing this dialog
   needs — rules in overlay.css). Only the content sub-classes below remain,
   unscoped so they still work inside the core's `.overlay__body`. */
.le-history__body {
  flex: 1; overflow: auto;
}
/* Table STRUCTURE (width/border-collapse/th·td padding) now comes from the
   shared .data-table (BB3 Ph2 T1) — only the row-state survivor and the
   content sub-classes below remain here. store-detail.js's version rows also
   carry .data-table (+ .data-table--versions, BB3 Ph2 T3) and .is-current, so
   this un-scoped rule reaches them too — but store.css's
   .data-table--versions tr.is-current has the same specificity and loads
   LATER, so it wins there with the accent highlight instead; see store.css. */
.data-table tr.is-current { background: var(--bg-elevated); }
.le-history__when { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-small); white-space: nowrap; }
.le-history__keys { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--fs-label); }

/* JSON viewer (F.9) — reuses the le-history dialog's overlay.js core shell */
.le-history__jsonbar { display: flex; gap: var(--space-10); align-items: center; padding-bottom: var(--space-10); }
.le-history__hint { color: var(--text-muted); font-size: var(--fs-label); }
.le-history__json {
  margin: 0; padding: var(--space-12) var(--space-16);
  background: var(--bg-canvas); border: 1px solid var(--border-subtle); border-radius: var(--radius-6);
  color: var(--text-primary); font-family: var(--font-mono); font-size: var(--fs-small);
  line-height: 1.45; white-space: pre; overflow: auto;
  max-height: 65vh;
}

/* ---------- Publish modal (G.6) ----------
   The old hand-rolled shell (backdrop, root container, header/h3/code,
   footer actions — "le-publish-overlay"/"le-publish" + its header* and
   __actions children) is gone (Phase 5) — the shared overlay.js core
   (openModal → openOverlay variant:"modal") now supplies the backdrop,
   surface, title ("Опубликовать <slug> в магазин"), footer
   (Опубликовать/Отмена), and the ≥44px .overlay__close close button. This
   same `.le-publish__body` rule is also reused by the migrated 5th dialog
   (settings/test-profiles.js's edit modal). */
.le-publish__body {
  display: flex; flex-direction: column; gap: var(--space-12);
}

@media (max-width: 1180px) {
  .le-topbar { flex-wrap: wrap; }
  .le-split {
    display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto;
    align-content: start;
  }
  .le-left, .le-right { flex: 0 0 auto; overflow: visible; width: 100%; }
  .le-right { min-height: 460px; }
  .le-acc__body { max-height: none; overflow: visible; }
  .le-guide-nav__item > span:last-child small { display: none; }
}

@media (max-width: 768px) {
  .le-topbar {
    position: sticky; top: 0; z-index: var(--z-sticky);
    flex-wrap: wrap; row-gap: var(--space-6); padding: var(--space-8) var(--space-10);
    box-shadow: var(--shadow-sm);
  }
  .le-topbar .le-title { flex: 1 1 140px; }
  .le-topbar .le-slug { flex: 1 1 100%; order: 3; }
  .le-topbar #le-save { margin-left: auto; }
  .le-split {
    grid-template-columns: minmax(0, 1fr); overflow-x: hidden; overflow-y: auto;
    padding: var(--space-10); align-content: start;
  }
  .le-left, .le-right { overflow: visible; width: 100%; }
  .le-right { min-height: 420px; }
  .le-acc__body { max-height: none; padding: var(--space-12); overflow: visible; }
  .le-form { grid-template-columns: minmax(0, 1fr); }
  .le-form__full, .le-fieldset, .le-accounts { grid-column: 1; }
  .le-form--audience-extra, .le-audience-check-grid { grid-template-columns: minmax(0, 1fr); }
  .le-form-group { padding: var(--space-16) 0; }
  .le-form-group:first-child { padding-top: 0; }
  .le-form-group:last-child { padding-bottom: 0; }
  .le-form-group__head { flex-direction: column; gap: var(--space-10); }
  .le-builder__intro { padding: var(--space-16); }
  .le-builder__intro h1 { font-size: var(--fs-section); }
  .le-guide-nav {
    display: flex; gap: var(--space-4); padding: 0 var(--space-10) var(--space-12);
    overflow-x: auto; scroll-snap-type: x proximity;
  }
  .le-guide-nav__item { flex: 0 0 auto; min-height: 44px; padding: var(--space-6) var(--space-8); scroll-snap-align: start; }
  .le-guide-nav__item > span:last-child small { display: none; }
  .le-builder__stage { padding: var(--space-10); }
  .le-guide-card { gap: var(--space-16); padding: var(--space-16); }
  .le-guide-card__heading h2, .le-guide-finish-copy h2 { font-size: var(--fs-section); }
  .le-form--guide-links { grid-template-columns: minmax(0, 1fr); }
  .le-link-flow { justify-content: flex-start; overflow-x: auto; }
  .le-link-flow span { white-space: nowrap; }
  .le-guide-footer { padding: var(--space-10); }
  .le-guide-footer__progress { display: none; }
  .le-guide-footer #le-guide-next { margin-left: auto; }
  .le-guide-final-actions { flex-direction: column-reverse; }
  .le-guide-final-actions .btn { width: 100%; justify-content: center; }
  .le-active-control { width: 100%; justify-content: space-between; }
  .le-account-row { grid-template-columns: 28px minmax(0, 1fr) 44px; align-items: center; padding: var(--space-10); }
  .le-account-row__index { grid-column: 1; grid-row: 1; margin-top: 0; }
  .le-account-row__title {
    position: static; grid-column: 2; grid-row: 1; width: auto; height: auto; padding: 0; margin: 0;
    overflow: visible; clip: auto; white-space: normal; color: var(--text-secondary); font-size: var(--fs-label);
  }
  .le-account-field { grid-column: 1 / -1; }
  .le-account-row__delete { grid-column: 3; grid-row: 1; justify-self: end; margin-top: 0; }
  .le-alias-row { grid-template-columns: minmax(0, 1fr) auto; }
  .le-step { flex-wrap: wrap; min-width: 0; }
  .le-step__sel, .le-step__val { max-width: calc(100% - 72px); }
  .le-step__btns { width: 100%; justify-content: flex-end; }
  .le-step__btn { min-width: var(--touch-target); min-height: var(--touch-target); }
  .le-right__toolbar { flex-wrap: wrap; }
  .le-right__canvas { min-height: 300px; }
  .rc-bar { flex-wrap: wrap; padding: var(--space-8) var(--space-10); }
  .rc-progress { flex: 1 1 160px; order: 3; margin: 0; }
}

@media (max-width: 480px) {
  .le-topbar .pill { display: none; }
  .le-topbar .btn { padding-inline: var(--space-10); }
  .le-accounts__head { align-items: flex-start; flex-direction: column; }
  .le-accounts__head #le-acc-add { width: 100%; justify-content: center; }
  .le-fieldset { align-items: flex-start; flex-wrap: wrap; }
  .le-audience-more > summary { align-items: flex-start; }
  .le-audience-more > summary small { white-space: normal; text-align: right; }
  .le-audience-more__body, .le-audience-group { padding: var(--space-12); }
  .le-guide-card__heading { align-items: center; }
  .le-guide-card__icon { flex-basis: 40px; width: 40px; height: 40px; }
  .le-recording-tip { align-items: flex-start; flex-wrap: wrap; }
  .le-recording-tip .btn { width: 100%; justify-content: center; }
  .le-guide-steps-head { align-items: flex-start; flex-direction: column; }
  .le-readiness__item { grid-template-columns: 24px 1fr; }
  .le-readiness__item small { grid-column: 2; }
  .le-launch-control { align-items: center; }
  .le-right { min-height: 360px; }
}