/* =========================================================================
   Design tokens — единая система для всех экранов кабинета.
   Нейтральная холодная палитра + один сильный акцент + семантические цвета
   статусов. 8pt spacing scale, шкала радиусов, два уровня elevation.
   ========================================================================= */
:root {
  /* Нейтральная шкала (slate) */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Акцент — один сильный цвет бренда (индиго, доверие + технологичность) */
  --accent-50: #eef2ff;
  --accent-100: #e0e7ff;
  --accent-200: #c7d2fe;
  --accent-500: #4f46e5;
  --accent-600: #4338ca;
  --accent-700: #372fa0;

  /* Семантика статусов */
  --success-bg: #dcfce7;
  --success-fg: #15803d;
  --success-strong: #16a34a;
  --pending-bg: #fef3c7;
  --pending-fg: #92400e;
  --pending-strong: #d97706;
  --muted-bg: #f1f5f9;
  --muted-fg: #475569;
  --danger-bg: #fee2e2;
  --danger-fg: #b91c1c;
  --danger-strong: #dc2626;
  --info-bg: #e0e7ff;
  --info-fg: #3730a3;

  /* Поверхности и текст */
  --bg-page: var(--gray-50);
  --bg-surface: #ffffff;
  --bg-subtle: var(--gray-50);
  --border-color: var(--gray-200);
  --border-color-strong: var(--gray-300);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-400);

  /* Spacing — шкала 8pt (плюс 4px для мелких доводок) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Радиусы */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Elevation — два уровня, без тяжёлых теней */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --shadow-2: 0 12px 28px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);

  /* Типографика: system font stack, дружелюбный к китайскому/русскому/латинице */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: clamp(26px, 4vw, 34px);

  --leading-tight: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75; /* комфортно и для китайского, и для русского */
  --tracking-wide: 0.01em;

  /* Motion — сдержанная, 150-200ms */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================= Reset & base ============================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-500); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-600); }

h1, h2, h3 { line-height: var(--leading-tight); font-weight: 700; color: var(--text-primary); }

button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.hidden { display: none !important; }

.error {
  color: var(--danger-fg);
  background: var(--danger-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ================================ Header ================================ */
header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: var(--space-3); margin-right: auto; }
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0;
  box-shadow: var(--shadow-1);
  flex-shrink: 0;
}
.brand-name { font-weight: 700; font-size: var(--text-md); color: var(--text-primary); white-space: nowrap; }

.lang-switch {
  display: flex;
  gap: 2px;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  padding: 3px;
}
header .lang-switch button {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base);
  min-height: 32px;
}
header .lang-switch button:hover { color: var(--text-primary); }
header .lang-switch button.active { background: var(--bg-surface); color: var(--accent-600); box-shadow: var(--shadow-1); }

/* ================================= Main ================================= */
main { max-width: 960px; margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-16); }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.page-title { font-size: var(--text-3xl); }

/* ================================ Buttons ================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  min-height: 44px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent-500); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover:not(:disabled) { background: var(--accent-600); box-shadow: var(--shadow-2); }

.btn-ghost { background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border-color); }
.btn-ghost:hover:not(:disabled) { background: var(--gray-100); color: var(--text-primary); border-color: var(--border-color-strong); }

.btn-sm { padding: 6px 14px; min-height: 32px; font-size: var(--text-sm); }
.btn-lg { padding: 13px 24px; min-height: 50px; font-size: var(--text-md); width: 100%; }

.btn-back { margin-bottom: var(--space-5); }
.btn-back svg { flex-shrink: 0; }

/* Подстраховка: любая незаклассованная кнопка тоже выглядит опрятно */
button:not(.btn) {
  font-size: var(--text-base);
  font-weight: 600;
  padding: 10px 18px;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--accent-500);
  color: #fff;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard);
}
button:not(.btn):hover { background: var(--accent-600); }

/* =============================== Form fields ============================= */
.field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

input, textarea, select {
  padding: 12px 14px;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-md); /* >=16px — не даёт iOS зумить при фокусе */
  font-family: inherit;
  background: var(--bg-surface);
  color: var(--text-primary);
  width: 100%;
  min-height: 44px;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
input:hover, textarea:hover, select:hover { border-color: var(--gray-400); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-100);
}
textarea { min-height: 96px; resize: vertical; }

form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-3);
  background: var(--bg-surface);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}

/* ============================== Auth (login) ============================= */
.auth-screen {
  position: relative;
  min-height: calc(100vh - 65px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-4);
}

.auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 20%, var(--accent-100) 0%, transparent 45%),
    radial-gradient(circle at 88% 12%, #c7d2fe55 0%, transparent 40%),
    radial-gradient(circle at 50% 95%, var(--accent-50) 0%, transparent 55%),
    var(--bg-page);
}
.auth-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--gray-300) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .35;
  -webkit-mask-image: radial-gradient(circle at 50% 35%, black, transparent 70%);
  mask-image: radial-gradient(circle at 50% 35%, black, transparent 70%);
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-2);
  padding: var(--space-8) var(--space-6);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.auth-brand .brand-mark { width: 40px; height: 40px; font-size: var(--text-md); border-radius: var(--radius-md); }
.auth-brand .brand-name { font-size: var(--text-lg); }

.auth-card h1 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.auth-subtitle { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); }

.auth-card form { padding: 0; border: none; margin-top: 0; gap: var(--space-4); }

.auth-code-input {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  padding: 14px;
}

/* ============================ Products list ============================== */
.product-list { display: flex; flex-direction: column; gap: var(--space-3); }

.product-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.product-card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--accent-200);
  transform: translateY(-2px);
}

.product-card-media {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gray-100);
  flex-shrink: 0;
}
.product-card-media img { width: 100%; height: 100%; object-fit: cover; }

.product-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.product-card-desc {
  color: var(--text-primary);
  font-size: var(--text-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Без этих двух строк длинное название в одну строку растягивало карточку шире экрана:
     на телефоне страница уезжала вбок, текст обрезался краем экрана без многоточия
     и наезжал на стрелку. Многоточие работает только когда ширине есть во что упереться. */
  align-self: stretch;
  max-width: 100%;
}
.product-card-chevron { color: var(--text-muted); flex-shrink: 0; }

/* Статус-пилюли — общая база для всех вариантов статусов в кабинете */
.status, .pstate, .post-status-draft, .post-status-planned, .post-status-publishing,
.post-status-published, .post-status-failed, .post-status-stopped {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.status::before, .pstate::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-new, .status-analyzing { background: var(--pending-bg); color: var(--pending-fg); }
.status-ready { background: var(--success-bg); color: var(--success-fg); }
.status-failed { background: var(--danger-bg); color: var(--danger-fg); }

/* ============================== Empty state =============================== */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  background: var(--bg-surface);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-500);
  background: var(--accent-50);
  border-radius: var(--radius-lg);
}
.empty-state h2 { font-size: var(--text-lg); color: var(--text-primary); margin-bottom: var(--space-2); }
.empty-state p { font-size: var(--text-sm); max-width: 40ch; margin: 0 auto; line-height: var(--leading-relaxed); }

/* ============================ Upload panel/dropzone ======================== */
.upload-panel { margin-top: var(--space-6); box-shadow: var(--shadow-2); }
.upload-panel h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  border: 2px dashed var(--border-color-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--accent-500); background: var(--accent-50); }
.dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone-icon { color: var(--accent-500); margin-bottom: var(--space-2); }
.dropzone-text { font-weight: 600; color: var(--text-primary); }
.dropzone-hint { font-size: var(--text-xs); color: var(--text-muted); }

/* ============================== Product detail ============================= */
.product-detail { display: flex; flex-direction: column; }

.product-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
  flex-wrap: wrap;
}

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  flex: 1 1 260px;
  max-width: 320px;
  align-content: start;
}
.photos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-1);
  transition: transform var(--duration-base) var(--ease-standard);
}
.photos img:hover { transform: scale(1.03); }

.product-summary { flex: 2 1 320px; display: flex; flex-direction: column; gap: var(--space-3); }
.product-description { font-size: var(--text-base); line-height: var(--leading-relaxed); letter-spacing: .015em; color: var(--text-primary); }
/* Свёрнутое описание карточки: показываем начало, остальное — по кнопке. Длинное описание
   с маркетплейса иначе занимает верхнюю треть экрана, особенно на телефоне. */
.product-description-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.product-desc-toggle { margin-top: 6px; padding-left: 0; padding-right: 0; }
.product-card-url { font-size: var(--text-sm); word-break: break-all; }
.product-status-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ============================= Loading / skeleton =========================== */
.analyzing-panel, .loading-inline {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.loading-inline { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.analyzing-panel > p:first-of-type, .loading-inline p { color: var(--pending-fg); font-weight: 600; font-size: var(--text-sm); margin: 0; }
.analyzing-panel { flex-direction: row; align-items: center; flex-wrap: wrap; }
.analyzing-panel .skeleton-rows { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }

.spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--pending-bg);
  border-top-color: var(--pending-strong);
  animation: spin 700ms linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton-row {
  height: 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
.skeleton-row-lg { width: 70%; }
.skeleton-row-sm { width: 45%; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Общая карточка секции: диджест / витрина площадок / план / статья / фотоцех / видеоцех / отчёт /
   кошелёк / аудит карточки / сводка магазина (аудит) */
.digest, .platform-showcase, .plan-block, .article-block, .image-block, .video-block, .report-block,
.wallet-card, .audit-block, .audit-store-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-6);
  box-shadow: var(--shadow-1);
}
.digest h2, .platform-showcase h2, .plan-block h2, .article-block h2,
.image-block h2, .video-block h2, .report-block h2, .wallet-card h2,
.audit-block h2, .audit-store-card h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.digest h2::before, .platform-showcase h2::before, .plan-block h2::before, .article-block h2::before,
.image-block h2::before, .video-block h2::before, .report-block h2::before, .wallet-card h2::before,
.audit-block h2::before, .audit-store-card h2::before {
  content: '';
  width: 4px;
  height: 20px;
  background: var(--accent-500);
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

/* ================================== Digest ================================= */
.digest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}
.digest-field-full { grid-column: 1 / -1; }
.digest-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.digest-value { color: var(--text-primary); line-height: var(--leading-relaxed); letter-spacing: .015em; }
.digest-list { padding-left: 1.2em; color: var(--text-primary); line-height: var(--leading-relaxed); display: flex; flex-direction: column; gap: 4px; }
.digest-list li::marker { color: var(--accent-500); }

.kw-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kw {
  display: inline-block;
  background: var(--accent-50);
  color: var(--accent-700);
  border: 1px solid var(--accent-100);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ============================= Platform showcase ============================ */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.platform-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--gray-300);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.platform-card:hover { box-shadow: var(--shadow-1); }
.platform-card[aria-disabled="true"] { cursor: default; }
.platform-card-live { border-left-color: var(--success-strong); }
.platform-card-via_telegram { border-left-color: var(--accent-500); }
.platform-card-soon { border-left-color: var(--pending-strong); }
.platform-card-unavailable { border-left-color: var(--gray-300); opacity: .8; }
/* Правка 3: карточка-переключатель — рамка акцентного цвета + лёгкая заливка, когда выбрана */
.platform-card-selected { border-color: var(--accent-200); background: var(--accent-50); }
.platform-card-selected.platform-card-live,
.platform-card-selected.platform-card-via_telegram { border-left-color: var(--success-strong); }
/* Своя "галочка" чекбокса. ВАЖНО: квадрат со скруглением + птичка, а НЕ кружок — кружок с
   точкой внутри читается как radio (выбор одного варианта), а тут можно отмечать сразу
   несколько площадок. Круглая форма уже была и вводила в заблуждение на скриншоте ux-platforms. */
.platform-check {
  position: relative;
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--border-color-strong);
  border-radius: 5px;
  background: var(--bg-surface);
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.platform-card-selected .platform-check {
  border-color: var(--accent-500);
  background: var(--accent-500);
}
.platform-card-selected .platform-check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.platform-hint {
  margin-top: var(--space-3);
}
.platform-footnote {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.platform-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.platform-icon { font-size: 17px; line-height: 1; }
.platform-name { flex: 1; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); min-width: 90px; }

.pstate-live { background: var(--success-bg); color: var(--success-fg); }
.pstate-via { background: var(--info-bg); color: var(--info-fg); }
.pstate-soon { background: var(--pending-bg); color: var(--pending-fg); }
.pstate-off { background: var(--muted-bg); color: var(--muted-fg); }

/* ================================= Plan block =============================== */
.plan-form { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: var(--space-4); padding: 0; border: none; margin-top: var(--space-4); }
.plan-form-field { display: flex; flex-direction: column; gap: var(--space-1); }
.plan-form-field select { min-width: 110px; }
/* Правка 2: числовое поле "Своё значение" — появляется под select-ом того же поля */
.plan-custom-input { min-width: 90px; }
/* Подсказка "Всего постов" и ошибка ввода — на всю ширину формы, своей строкой под полями */
.plan-total-hint, .plan-form .error { flex-basis: 100%; margin: 0; }
.plan-total-hint { font-size: var(--text-sm); color: var(--text-secondary); }
.plan-form .btn { margin-left: auto; }
/* Правка 3: куда реально пойдут посты / что отмечено на будущее — под статусом кампании */
.plan-platforms-line { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-2); }
.plan-platforms-later { color: var(--text-muted); }

.plan-status {
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
}
.plan-status-running { background: var(--info-bg); color: var(--info-fg); }
.plan-status-done { background: var(--success-bg); color: var(--success-fg); }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

#plan-launch { margin-top: var(--space-4); }

/* ========================== Калькулятор стоимости ============================= */
/* Показ 2026-07-29 партнёру: раньше это была <table> из пяти колонок — значок "подключим при
   запуске" разной длины лепился К НАЗВАНИЮ площадки внутри ячейки и растягивал первую колонку
   по-разному на каждой строке, а на телефоне таблица разваливалась совсем. Теперь площадка —
   отдельный БЛОК: значок/название/статус — В ШАПКЕ блока (один раз, не в ячейке), а каждый
   формат — своя строка внутри блока с ОДИНАКОВОЙ раскладкой, поэтому ничего не съезжает.
   Живёт внутри .plan-form (flex) — сам занимает всю ширину строки формы. min-width: 0
   обязателен: без него flex-элемент не сжимается уже своего содержимого (классическая
   особенность flexbox — min-width по умолчанию auto, а не 0) и раздвигает страницу по
   горизонтали. Здесь так делать больше НЕЧЕМ: внутри блоков нет ничего с фиксированным
   min-width шире экрана — это и есть требование "нет горизонтальной прокрутки на 375px". */
.calc-block { flex-basis: 100%; min-width: 0; margin: var(--space-2) 0 0; }
.calc-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.calc-platform-list { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.calc-platform-block {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
}
.calc-platform-block-future { background: var(--bg-subtle); }
.calc-platform-block-free { padding: var(--space-2) var(--space-4); }
.calc-platform-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* статус-плашка переносится под название, а не толкает блок вширь */
  gap: var(--space-1) var(--space-3);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color);
}
.calc-platform-block-free .calc-platform-head { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.calc-platform-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.calc-platform-name {
  font-weight: 700;
  color: var(--text-primary);
  margin-right: auto;
  overflow-wrap: anywhere; /* длинное локализованное название не толкает строку за экран */
}
.calc-platform-status { flex-shrink: 0; }

.calc-format-rows { display: flex; flex-direction: column; }
.calc-format-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* на узком экране числа переносятся под название целиком, одним куском */
  justify-content: space-between;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--border-color);
}
.calc-format-row:last-child { border-bottom: none; }
.calc-format-row-zero { opacity: .55; } /* количество 0 в день — строка приглушена, без цены */
.calc-format-name { font-size: var(--text-sm); color: var(--text-primary); flex: 1 1 160px; }
.calc-format-nums {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap; /* "1 в день · 7 за период · 280 ₽" — одним куском, переносится только целиком */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc-perday-input {
  width: 46px;
  font-size: var(--text-sm);
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color-strong);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: center;
}
/* Telegram + "Пост с вашим фото": "в день" зеркалит поле формы "Постов в день", не
   редактируется здесь — обычный текст без вида инпута, чтобы не намекать на независимое
   управление частотой публикации (см. app.js, buildCalcInputRows). */
.calc-format-perday-synced {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  font-weight: 600;
  color: var(--text-secondary);
}
.calc-format-unit { font-size: var(--text-xs); color: var(--text-muted); }
.calc-format-period { font-size: var(--text-xs); color: var(--text-secondary); min-width: 80px; }
.calc-format-cost { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); min-width: 60px; text-align: right; }
.calc-format-row-zero .calc-format-cost { color: var(--text-muted); font-weight: 500; }

.calc-summary {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border-color-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.calc-total-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
.calc-total-label { font-size: var(--text-sm); color: var(--text-secondary); }
.calc-total-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent-600);
  font-variant-numeric: tabular-nums;
}
.calc-yuan { font-size: var(--text-sm); color: var(--text-muted); }
/* Общий класс для двух вторичных строк итога — «Ролики и новые кадры» и «После подключения
   площадок» (см. renderCalcBlock в app.js): три ЧЕСТНЫЕ суммы вместо старых двух, каждая
   про своё — что реально спишет кампания сейчас / что закажут отдельно / что станет платным
   после подключения площадки. */
.calc-secondary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 340px;
  font-size: var(--text-sm);
  color: var(--pending-fg);
  background: var(--pending-bg);
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
}
.calc-per-day-total { font-size: var(--text-sm); color: var(--text-secondary); }
.calc-charged-note { font-size: var(--text-xs); color: var(--text-muted); }
.calc-limit-warning { font-size: var(--text-sm); color: var(--pending-fg); font-weight: 600; }

/* ================================ Post timeline ============================== */
.post-list {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  padding-left: var(--space-6);
}
.post-list::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border-color);
}
.post-card {
  position: relative;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.post-card::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-6) + 1px);
  top: var(--space-5);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gray-400);
  box-shadow: 0 0 0 3px var(--bg-page);
}
.post-card-published::before { background: var(--success-strong); }
.post-card-failed::before { background: var(--danger-strong); }
.post-card-publishing::before { background: var(--pending-strong); }
.post-card-stopped::before { background: var(--gray-400); }

.post-card-published {
  background: linear-gradient(180deg, #f4fdf7 0%, var(--bg-subtle) 60%);
  border-color: #bbf0cd;
}

.post-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.post-time { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.icon-inline { flex-shrink: 0; }

.post-status-draft, .post-status-planned { background: var(--info-bg); color: var(--info-fg); }
.post-status-publishing { background: var(--pending-bg); color: var(--pending-fg); }
.post-status-published { background: var(--success-bg); color: var(--success-fg); }
.post-status-failed { background: var(--danger-bg); color: var(--danger-fg); }
.post-status-stopped { background: var(--muted-bg); color: var(--muted-fg); }

.post-photo {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-1);
  margin-top: var(--space-3);
}

.post-text-ru { margin-top: var(--space-3); line-height: var(--leading-relaxed); letter-spacing: .015em; color: var(--text-primary); }

.post-translation {
  margin-top: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.post-translation-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent-600);
  margin-bottom: var(--space-1);
}
.post-text-zh { font-size: var(--text-md); line-height: 1.9; letter-spacing: .02em; color: var(--text-secondary); }

.post-published-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--success-fg);
  background: var(--success-bg);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.post-published-link:hover { color: var(--success-fg); background: #c9f5d9; }

.post-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); }

.post-stop-pending-msg {
  margin-top: var(--space-3);
  background: var(--pending-bg);
  color: var(--pending-fg);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ================================ Article (SEO) ============================== */
.article-block .article-title { font-size: var(--text-lg); margin: var(--space-1) 0 var(--space-3); color: var(--text-primary); }
.article-summary-zh {
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
  letter-spacing: .02em;
}
.article-body {
  max-width: 68ch;
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  letter-spacing: .015em;
  font-size: var(--text-base);
}
.article-body h2 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: var(--text-md); margin: var(--space-5) 0 var(--space-2); }
.article-body p { margin-bottom: var(--space-4); }
.article-body ul { padding-left: 1.3em; margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.article-body strong { font-weight: 700; color: var(--text-primary); }
.article-body a { font-weight: 600; }

/* =================================== Wallet ==================================== */
.wallet-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.wallet-card-head h2 { margin-bottom: 0; }
.wallet-balance-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.wallet-balance { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-bottom: var(--space-4); }
.wallet-card-compact { padding: var(--space-4) var(--space-5); }
.wallet-card-compact .wallet-balance { font-size: var(--text-xl); margin-bottom: 0; }
.wallet-history h3 {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: var(--space-3);
}
.wallet-entry-list { display: flex; flex-direction: column; gap: var(--space-2); }
.wallet-entry { background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.wallet-entry-main { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-weight: 600; }
.wallet-entry-kind { color: var(--text-primary); font-size: var(--text-sm); }
.wallet-entry-amount { font-variant-numeric: tabular-nums; font-size: var(--text-base); }
.wallet-entry-positive .wallet-entry-amount { color: var(--success-fg); }
.wallet-entry-muted .wallet-entry-amount, .wallet-entry-muted .wallet-entry-kind { color: var(--text-muted); }
.wallet-entry-neutral .wallet-entry-amount { color: var(--text-primary); }
.wallet-entry-note { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 4px; }
.wallet-entry-date { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; display: block; }
.wallet-empty { color: var(--text-secondary); font-size: var(--text-sm); }

.wallet-card-highlight { animation: wallet-pulse 2.6s ease-in-out; }
@keyframes wallet-pulse {
  0%, 100% { box-shadow: var(--shadow-1); border-color: var(--border-color); }
  15%, 45%, 75% { box-shadow: 0 0 0 4px var(--danger-bg); border-color: var(--danger-strong); }
}

/* ============================= Витрина оплаты (модалка) ======================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 23, 42, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  padding: var(--space-8) var(--space-6) var(--space-6);
}
button.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
  color: var(--text-secondary);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
button.modal-close:hover { background: var(--gray-200); color: var(--text-primary); }
.pay-modal-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-5); padding-right: var(--space-8); }
.pay-method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.pay-method-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.pay-icon-badge {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.pay-method-name { flex: 1; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.pay-demo-note {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  line-height: var(--leading-relaxed);
}

/* ================================= Видеоцех ===================================== */
.video-empty-hint { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.video-hint { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.video-attempt-badge {
  display: inline-flex; align-items: center;
  background: var(--gray-100); color: var(--text-secondary);
  font-size: var(--text-xs); font-weight: 600;
  padding: 4px 10px; border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.video-idea-card { display: flex; flex-direction: column; gap: var(--space-4); }
.video-idea-title { font-size: var(--text-lg); color: var(--text-primary); }
.video-idea-field { display: flex; flex-direction: column; gap: 4px; }
.video-idea-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.video-idea-field p { color: var(--text-primary); line-height: var(--leading-relaxed); }
.video-price-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.video-paid-note { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 500; }
/* Правка 1: второстепенная бесплатная кнопка «Придумать другой сценарий» — рядом с платной,
   но заметно менее заметная (btn-ghost + приглушённая подпись), чтобы не спорить с главным CTA. */
.video-idea-alt-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px dashed var(--border-color); }
.video-free-note { font-size: var(--text-sm); color: var(--text-muted); }
.video-working-panel {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--bg-subtle); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.video-working-panel p { color: var(--pending-fg); font-weight: 600; font-size: var(--text-sm); margin: 0; }
.video-player-wrap { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-1); background: #000; }
.video-player-wrap video { width: 100%; max-height: 480px; display: block; background: #000; }
.video-not-charged {
  display: flex; align-items: center; gap: 8px;
  background: var(--success-bg); color: var(--success-fg);
  font-weight: 700; font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
}
.video-failed-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.video-not-charged-sm { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); margin: var(--space-2) 0 0; }
.video-history { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-color); }
.video-history h3 {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: var(--space-3);
}
.video-history-list { display: flex; flex-direction: column; gap: var(--space-3); }
.video-history-item { background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.video-history-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.video-history-item video { width: 100%; max-height: 280px; border-radius: var(--radius-sm); display: block; margin-top: var(--space-2); background: #000; }

/* ============================ Аудит карточки товара ============================ */
/* Стоит ВЫШЕ плана продвижения (см. audit-mount в app.js) — сначала чиним карточку, потом
   гоним на неё трафик. Бесплатно — audit-free-tag подчёркивает это рядом с кнопками запуска. */
.audit-free-tag {
  display: inline-block;
  background: var(--success-bg); color: var(--success-fg);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: var(--radius-pill);
}
.audit-none-text { color: var(--text-secondary); margin-bottom: var(--space-4); }
.audit-working-panel {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--bg-subtle); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.audit-working-panel p { color: var(--pending-fg); font-weight: 600; font-size: var(--text-sm); margin: 0; }

.audit-score-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.audit-score { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.audit-verdict {
  display: inline-flex; align-items: center;
  font-size: var(--text-sm); font-weight: 700;
  padding: 6px 14px; border-radius: var(--radius-pill);
}
.audit-score-weak, .audit-verdict-weak { color: var(--danger-strong); }
.audit-verdict-weak { background: var(--danger-bg); color: var(--danger-fg); }
.audit-score-average, .audit-verdict-average { color: var(--pending-strong); }
.audit-verdict-average { background: var(--pending-bg); color: var(--pending-fg); }
.audit-score-good, .audit-verdict-good { color: var(--success-strong); }
.audit-verdict-good { background: var(--success-bg); color: var(--success-fg); }

.audit-issues-block { margin-bottom: var(--space-5); }
.audit-issues-block h3, .audit-rewrite-block h3 {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: var(--space-3);
}
.audit-issues-list { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 1.2em; color: var(--text-primary); line-height: var(--leading-relaxed); }
.audit-issues-list li::marker { color: var(--danger-strong); }

/* Сравнение с лидерами выдачи (пункт 6 спеки) — необязательный блок под тремя главными
   проблемами (см. renderAuditCompetitors в app.js). Формат «в лоб»: значение клиента и медиана
   лидеров рядом, читается за секунды — никакого текста конкурента здесь нет и быть не может. */
.audit-rivals-block {
  background: var(--bg-subtle); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-5);
}
.audit-rivals-block h3 {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: var(--space-3);
}
.audit-rivals-metrics { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.audit-rivals-metric {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: 6px 0; border-bottom: 1px dashed var(--border-color);
}
.audit-rivals-metric:last-child { border-bottom: none; }
.audit-rivals-metric-label { color: var(--text-secondary); font-size: var(--text-sm); }
.audit-rivals-metric-value { color: var(--text-primary); font-size: var(--text-sm); white-space: nowrap; }
.audit-rivals-findings-label {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin: var(--space-3) 0 var(--space-2);
}
.audit-rivals-findings { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 1.2em; color: var(--text-primary); line-height: var(--leading-relaxed); }
.audit-rivals-basedon { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-xs); }

.audit-rewrite-block {
  background: var(--bg-subtle); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-5);
}
.audit-rewrite-field { margin-bottom: var(--space-3); }
.audit-rewrite-label {
  display: block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px;
}
.audit-rewrite-text { color: var(--text-primary); line-height: var(--leading-relaxed); white-space: pre-wrap; }
.audit-copy-row { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; }
.audit-copy-feedback { color: var(--success-fg); font-weight: 600; font-size: var(--text-sm); }
.audit-copy-feedback.hidden { display: none; }
.audit-rewrite-zh {
  margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--border-color);
}
.audit-translation-note { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); }
.audit-rewrite-text-zh { color: var(--text-secondary); line-height: var(--leading-relaxed); }
.audit-what-changed { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.audit-no-ai-note {
  background: var(--pending-bg); color: var(--pending-fg); font-weight: 600; font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-5);
}
/* Пояснение под находками для нерусского языка: сами находки остаются по-русски намеренно —
   это язык, на котором карточку читают покупатель и поиск маркетплейса. Без пояснения
   русский текст под китайским заголовком выглядит как недоделанный перевод. */
.audit-lang-note {
  color: var(--text-muted); font-size: var(--text-sm); margin: var(--space-2) 0 0;
}
/* «Разобрать заново» — рядом с плашкой noAiNote у черновика, и просто рядом с «Сделать это за
   меня» у полноценного готового разбора (см. renderAuditReady в app.js). */
.audit-actions-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
#audit-rerun-error.error { margin: var(--space-2) 0 0; font-size: var(--text-sm); }

/* Сводка по магазину (экран списка товаров) */
.page-header-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.audit-store-progress { display: flex; align-items: center; gap: var(--space-2); color: var(--pending-fg); font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-4); }
.audit-store-counts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.audit-store-count { font-size: var(--text-sm); font-weight: 600; padding: 4px 12px; border-radius: var(--radius-pill); }
.audit-store-count-weak { background: var(--danger-bg); color: var(--danger-fg); }
.audit-store-count-average { background: var(--pending-bg); color: var(--pending-fg); }
.audit-store-count-good { background: var(--success-bg); color: var(--success-fg); }
.audit-store-count-failed { background: var(--muted-bg); color: var(--muted-fg); }
.audit-store-issues { margin-bottom: var(--space-4); }
.audit-store-issues ul { padding-left: 1.2em; color: var(--text-primary); line-height: var(--leading-relaxed); }
.audit-store-startwith { margin-top: var(--space-2); }
/* «Разобрать все карточки» упёрлось в лимит одного клика (план нагрузки, п.3) — подсказка нажать ещё раз. */
.audit-store-remaining { color: var(--pending-fg); font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-4); }

/* =========================== Фотоцех: красивые кадры =========================== */
.image-empty-hint { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.image-hint { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.image-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--bg-subtle); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.image-card-chosen { border-color: var(--accent-500); box-shadow: 0 0 0 1px var(--accent-500) inset; }
.image-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.image-card-title { font-size: var(--text-base); color: var(--text-primary); }
.image-aspect-badge {
  font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: 999px; padding: 2px 10px; white-space: nowrap; flex-shrink: 0;
}
.image-scene { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.image-price-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.image-paid-note { font-size: var(--text-xs); color: var(--text-muted); }
.image-working-panel {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); background: var(--pending-bg, var(--bg-surface));
  border-radius: var(--radius-sm);
}
.image-working-panel p { color: var(--pending-fg); font-weight: 600; font-size: var(--text-sm); margin: 0; }
.image-actions-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.image-failed-panel { display: flex; flex-direction: column; gap: var(--space-2); }
/* «Деньги не списаны» — заметная зелёная строка (тот же приём, что у видеоцеха). */
.image-not-charged {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  color: var(--success-fg, #15803d); background: var(--success-bg, #dcfce7);
  font-size: var(--text-sm); font-weight: 600;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
}
.image-in-use {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-600, var(--accent-500)); font-weight: 600; font-size: var(--text-sm);
}
.image-footnote { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.image-more-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.image-free-note { font-size: var(--text-sm); color: var(--text-muted); }

/* Сравнение «было → стало»: два кадра и стрелка между ними — разница видна без слов. */
.ba-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); }
.ba-side { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.ba-side img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--bg-surface); display: block;
  border: 1px solid var(--border-color);
}
.ba-side figcaption { text-align: center; font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; }
.ba-after img { border-color: var(--accent-500); }
.ba-arrow { font-size: var(--text-xl); color: var(--accent-500); font-weight: 700; }

/* ============================= Отчёт по переходам =============================== */
.report-total-num { font-size: var(--text-3xl); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.report-total-label { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-5); }
.report-platform-section { margin-bottom: var(--space-5); }
.report-platform-section h3, .report-chart-section h3 {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: var(--space-3);
}
.report-platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-2); }
.report-platform-item {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--bg-subtle); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
}
.report-platform-icon { font-size: 16px; flex-shrink: 0; }
.report-platform-name { flex: 1; font-size: var(--text-sm); color: var(--text-primary); font-weight: 500; }
.report-platform-count { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.report-chart-svg { width: 100%; height: auto; display: block; }
.report-bar { fill: var(--accent-500); }
.report-axis { stroke: var(--border-color); stroke-width: 1; }
.report-chart-label { fill: var(--text-muted); font-size: 10px; }
.report-empty { color: var(--text-secondary); font-size: var(--text-sm); }

/* =================================== Responsive =============================== */
@media (max-width: 720px) {
  main { padding: var(--space-5) var(--space-4) var(--space-12); }
  header { padding: var(--space-2) var(--space-4); flex-wrap: wrap; }
  .brand-name { display: none; }
  .page-header { align-items: flex-start; }
  .page-header .btn { width: 100%; }
  .page-header-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .product-header { flex-direction: column; }
  .photos, .product-summary { flex-basis: auto; max-width: 100%; }
  /* flex-wrap: nowrap обязателен: базовое правило .plan-form задаёт flex-wrap: wrap для
     desktop-раскладки в строку; вместе с flex-direction: column (без явной высоты) это
     заставляет Chromium заворачивать содержимое в ВТОРУЮ колонку вместо переноса строк —
     калькулятор стоимости внутри формы раздвигал всю страницу по горизонтали на телефоне. */
  .plan-form { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .plan-form .btn { margin-left: 0; }
  .plan-form-field select { width: 100%; }
  .digest-grid { grid-template-columns: 1fr; }
  .platform-grid { grid-template-columns: 1fr; }
  .post-list { padding-left: var(--space-5); }
  .auth-card { padding: var(--space-6) var(--space-5); }
  .wallet-card-head { flex-wrap: wrap; }
  .wallet-card-head .btn { width: 100%; }
  .pay-method-grid { grid-template-columns: 1fr; }
  .modal-card { padding: var(--space-6) var(--space-4) var(--space-5); }
  .video-price-row { flex-direction: column; align-items: stretch; }
  .video-idea-alt-row { flex-direction: column; align-items: stretch; }
  /* Фотоцех на телефоне: карточки в одну колонку, но сравнение «было → стало» ОСТАЁТСЯ
     рядом (две мелкие фото + стрелка) — именно эта пара и есть главный аргумент показа. */
  .image-grid { grid-template-columns: 1fr; }
  .image-price-row .btn { width: 100%; }
  .ba-compare { gap: 4px; }
  .report-platform-grid { grid-template-columns: 1fr; }
  .calc-total-value { font-size: var(--text-xl); }
  .calc-secondary-row { max-width: 100%; }
  /* Блоки калькулятора на 375px: без своего min-width шире экрана (см. комментарий у
     .calc-block выше) — .calc-format-row переносит "N в день / M за период / цена" ЦЕЛИКОМ
     под название формата (flex-wrap на самой строке), а внутри этой группы числа не
     разваливаются на несколько строк (flex-wrap: nowrap на .calc-format-nums). Здесь только
     чуть плотнее отступы/шрифт, чтобы группа чисел гарантированно помещалась в одну строку
     даже на самом узком экране показа. */
  .calc-platform-block { padding: var(--space-3); }
  .calc-platform-head { gap: var(--space-1) var(--space-2); }
  .calc-format-row { padding: var(--space-1) 0; }
  .calc-format-nums { gap: var(--space-1); font-size: var(--text-xs); }
  .calc-format-period, .calc-format-cost { min-width: 0; }
  .calc-perday-input { width: 40px; padding: 4px; font-size: var(--text-xs); }
}

/* ── Галерея «Примеры работ» ─────────────────────────────────────────── */
.samples-block { background: var(--surface, #fff); border-radius: var(--radius-lg, 14px); padding: var(--space-6, 24px); margin-top: var(--space-6, 24px); box-shadow: var(--shadow-1); }
.samples-note { color: var(--gray-500, #6b7280); font-size: var(--text-sm, 14px); margin-top: 4px; }
.samples-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3, 12px); margin-top: var(--space-4, 16px); }
.sample-card { position: relative; padding: 0; border: none; background: var(--gray-100, #f3f4f6); border-radius: var(--radius-md, 10px); overflow: hidden; cursor: pointer; aspect-ratio: 9 / 16; display: block; transition: transform .16s ease, box-shadow .16s ease; }
/* Горизонтальные ролики в сетке показываем в том же вертикальном окне: обложка
   кадрируется по центру, зато ряды ровные без провалов. В крупном просмотре
   (.sample-viewer-wide) ролик открывается в своём настоящем формате. */
.sample-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.sample-card:focus-visible { outline: 2px solid var(--accent-500, #4f46e5); outline-offset: 2px; }
.sample-poster, .sample-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sample-video { opacity: 0; transition: opacity .2s ease; }
.sample-card:hover .sample-video { opacity: 1; }
.sample-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 8px; color: #fff; font-size: 13px; line-height: 1.35; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); }
.sample-overlay { position: fixed; inset: 0; background: rgba(15,17,26,.82); display: flex; align-items: center; justify-content: center; z-index: 60; padding: var(--space-4, 16px); }
.sample-viewer { position: relative; max-width: 420px; width: 100%; }
.sample-viewer-wide { max-width: 900px; }
.sample-viewer video { width: 100%; border-radius: var(--radius-lg, 14px); background: #000; display: block; max-height: 82vh; }
.sample-viewer-title { color: #fff; text-align: center; margin-top: var(--space-3, 12px); font-size: var(--text-sm, 14px); }
.sample-close { position: absolute; top: -42px; right: 0; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.sample-close:hover { background: rgba(255,255,255,.28); }
.field-hint { color: var(--gray-500, #6b7280); font-size: var(--text-xs, 12px); margin-top: 4px; }
/* Скрепка (задача 2): кнопка «Приложить файл» рядом с полем описания */
.attach-file-row { display: flex; align-items: center; gap: var(--space-3, 12px); margin-top: 8px; flex-wrap: wrap; }
.attach-file-btn { cursor: pointer; white-space: nowrap; }
.attach-file-status { color: var(--gray-500, #6b7280); font-size: var(--text-xs, 12px); word-break: break-all; }
@media (max-width: 520px) {
  .samples-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .sample-card, .sample-video { transition: none; } }

/* Перетаскивание фото: подсветка зоны и список выбранных файлов */
.dropzone-hot { border-color: var(--accent-500, #4f46e5); background: var(--accent-50, #eef1fb); }
.upload-picked { color: var(--gray-600, #4b5563); font-size: var(--text-sm, 14px); background: var(--gray-50, #f9fafb);
  border-radius: var(--radius-md, 10px); padding: 8px 12px; word-break: break-word; }

/* ── Живость интерфейса: мягкий подъём и свечение при наведении ──────────────
   Приём взят с детского сайта Академии (translateY + свечение), но приглушён:
   здесь деловой кабинет, поэтому подъём меньше, свечение слабее, скорость выше.
   Всё уважает prefers-reduced-motion. */

/* Витрина оплаты: карточки способов ---------------------------------------- */
.pay-method-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon name" "icon state";
  align-items: center;
  gap: 4px var(--space-3, 12px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pay-icon-badge { grid-area: icon; }
.pay-method-name {
  grid-area: name;
  min-width: 0;          /* иначе длинное «WeChat Pay 微信支付» распирает карточку */
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.pay-method-card .pstate {
  grid-area: state;
  justify-self: start;   /* метка «скоро» под названием, а не выпирает вбок */
  white-space: nowrap;
}
.pay-method-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(79, 70, 229, .18);
  border-color: var(--accent-300, #a5b4fc);
}

/* Площадки публикации ------------------------------------------------------ */
.platform-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.platform-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(79, 70, 229, .16);
  border-color: var(--accent-300, #a5b4fc);
}
.platform-icon-badge { transition: transform .18s ease; }
.platform-card:hover .platform-icon-badge { transform: scale(1.12); }

/* Карточки товаров --------------------------------------------------------- */
.product-card { transition: transform .18s ease, box-shadow .18s ease; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15, 17, 26, .10); }
.product-card:hover .product-card-chevron { transform: translateX(3px); }
.product-card-chevron { transition: transform .18s ease; }

/* Кнопки ------------------------------------------------------------------- */
.btn { transition: transform .14s ease, box-shadow .18s ease, background-color .14s ease; }
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(79, 70, 229, .32);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.btn-ghost:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent-400, #818cf8); }

/* Галерея примеров: подъём уже есть, добавляем свечение в тон -------------- */
.sample-card:hover { box-shadow: 0 14px 36px rgba(79, 70, 229, .22); }

/* Кошелёк и блоки-карточки ------------------------------------------------- */
.wallet-mount .wallet-card { transition: box-shadow .18s ease; }
.wallet-mount .wallet-card:hover { box-shadow: 0 12px 30px rgba(15, 17, 26, .08); }

/* Доступность: у кого выключена анимация — ничего не двигается -------------- */
@media (prefers-reduced-motion: reduce) {
  .pay-method-card, .platform-card, .platform-icon-badge, .product-card,
  .product-card-chevron, .btn, .sample-card, .wallet-mount .wallet-card {
    transition: none !important;
  }
  .pay-method-card:hover, .platform-card:hover, .product-card:hover,
  .btn-primary:hover:not(:disabled), .btn-ghost:hover:not(:disabled) {
    transform: none !important;
  }
}

/* ======================== Экран «Как это работает» =========================== */
/* Кнопка в шапке — ненавязчивая (спека, требование 6): тот же ghost-стиль, что и «Выйти» */
.howto-nav-btn { gap: 6px; }
.howto-nav-icon { font-size: 15px; line-height: 1; }

.howto-head { margin-bottom: var(--space-6); }
.howto-title { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.howto-subtitle {
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  max-width: 60ch;
}

/* Четыре карточки-шага: 2×2 на десктопе, одна колонка на телефоне.
   minmax(0, 1fr) обязателен — иначе длинное слово внутри карточки распирает колонку grid
   шире экрана и появляется горизонтальная прокрутка (та же ловушка, что у калькулятора). */
.howto-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.howto-step {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.howto-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.howto-step-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.howto-step-num {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.howto-step-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.howto-step-title { font-size: var(--text-lg); flex: 1; min-width: 0; }
.howto-step-lead { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.howto-step-body { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.howto-step-note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-left: 3px solid var(--accent-200);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-normal);
}
.howto-methods {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.howto-methods li {
  position: relative;
  padding-left: 20px;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}
.howto-methods li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-500);
}
/* Обещание «только чтение» — крупно и заметно (спека, шаг 1): зелёный блок доверия */
.howto-readonly {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--success-bg);
  color: var(--success-fg);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.howto-readonly-badge { font-size: 16px; line-height: 1.4; flex-shrink: 0; }

/* Блок коротких ответов — раскрывающийся аккордеон на нативных <details> (спека, требование 5) */
.howto-faq { margin-top: var(--space-8); }
.howto-faq-title { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.howto-faq-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.howto-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-primary);
  list-style: none;
  transition: background var(--duration-base) var(--ease-standard);
}
.howto-faq-q::-webkit-details-marker { display: none; }
.howto-faq-q:hover { background: var(--bg-subtle); }
.howto-faq-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--duration-base) var(--ease-standard);
}
.howto-faq-item[open] .howto-faq-chevron { transform: rotate(180deg); }
.howto-faq-a {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.howto-cta { display: flex; justify-content: center; margin-top: var(--space-8); }
/* CTA не на всю ширину на десктопе (btn-lg по умолчанию width:100%), но растягивается на телефоне */
.howto-cta .btn { width: auto; min-width: 240px; }

@media (max-width: 720px) {
  .howto-steps { grid-template-columns: 1fr; }
  .howto-cta .btn { width: 100%; }
  /* В шапке на телефоне бренд-имя уже скрыто; у «Как это работает» оставляем только иконку,
     чтобы длинная надпись не переполняла шапку и не появлялась горизонтальная прокрутка. */
  .howto-nav-label { display: none; }
  .howto-nav-btn { padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .howto-step, .howto-faq-chevron { transition: none !important; }
  .howto-step:hover { transform: none !important; }
}

/* ── Три входа добавления товаров (импорт из магазинов / ссылки / фото) ── */
.add-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-5);
  box-shadow: var(--shadow-1);
}
.add-panel-title { margin: 0 0 var(--space-4); font-size: 1.15rem; }
.add-tabs {
  display: flex; gap: var(--space-2);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
/* Уточняем контейнером (.add-tabs .add-tab) — иначе глобальный button:not(.btn) выше
   (специфичность 0,0,1,1) перебивает одиночный класс и красит вкладки в сплошной индиго. */
.add-tabs .add-tab {
  border: none; background: none; cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font: inherit; color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; border-radius: 0; min-height: 0;
}
.add-tabs .add-tab:hover { color: var(--text-primary); background: none; }
.add-tabs .add-tab.active { color: var(--accent-600); border-bottom-color: var(--accent-500); font-weight: 600; }
.add-method { display: block; }

/* Выбор площадки */
.store-platforms { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
/* Контейнер в селекторе — по той же причине, что и у .add-tab (перебить button:not(.btn)). */
.store-platforms .store-platform-btn {
  border: 1px solid var(--border-color-strong); background: var(--bg-surface);
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-5);
  cursor: pointer; font: inherit; font-weight: 500; color: var(--text-secondary); min-height: 0;
}
.store-platforms .store-platform-btn:hover { background: var(--bg-surface); }
.store-platforms .store-platform-btn.active { border-color: var(--accent-500); background: var(--accent-50); color: var(--accent-700); font-weight: 600; }

/* Форма ключа */
.store-connect-form { display: flex; flex-direction: column; gap: var(--space-3); }
.store-key-input {
  width: 100%; margin-top: var(--space-1); padding: var(--space-3);
  border: 1px solid var(--border-color-strong); border-radius: var(--radius-sm);
  font: inherit; box-sizing: border-box;
}
.store-readonly {
  background: var(--info-bg); color: var(--info-fg);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  font-size: .9rem; margin: 0;
}
.store-connected { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.store-connected-badge { color: var(--success-fg); font-weight: 600; }
.store-loading, .store-pick-hint, .empty-hint { color: var(--text-secondary); font-size: .92rem; }

/* Каталог с галочками */
.cat-toolbar { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; flex-wrap: wrap; }
.cat-count { color: var(--accent-600); font-size: .9rem; font-weight: 600; }
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.cat-item {
  display: flex; align-items: center; gap: var(--space-3);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: var(--space-3); cursor: pointer; background: var(--bg-surface);
  transition: border-color .15s, box-shadow .15s;
}
.cat-item:hover { border-color: var(--accent-200); box-shadow: var(--shadow-1); }
.cat-item:has(.cat-check:checked) { border-color: var(--accent-500); background: var(--accent-50); }
.cat-check { width: 18px; height: 18px; flex: none; accent-color: var(--accent-500); }
.cat-thumb {
  width: 56px; height: 56px; flex: none; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--gray-100); display: flex; align-items: center; justify-content: center;
}
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-title { font-size: .92rem; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.cat-brand { font-size: .8rem; color: var(--text-muted); }
.cat-msg { margin-top: var(--space-3); }

/* Метод «ссылки» */
.links-input {
  width: 100%; box-sizing: border-box; padding: var(--space-3);
  border: 1px solid var(--border-color-strong); border-radius: var(--radius-sm);
  font: inherit; margin-bottom: var(--space-3); resize: vertical;
}
.links-result { margin-top: var(--space-3); }
.links-done { color: var(--success-fg); font-weight: 600; }
.links-skipped-title { color: var(--text-secondary); margin-bottom: var(--space-1); }
.links-skipped { margin: 0; padding-left: var(--space-5); color: var(--danger-fg); font-size: .88rem; }
.links-skipped li { margin-bottom: var(--space-1); }

/* ==================== Метод «массовая загрузка» (задача 3) ==================== */
.bulk-progress { margin-top: var(--space-6); }
.bulk-progress-label { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-2); }
.bulk-progress-bar {
  width: 100%; height: 10px; border-radius: var(--radius-sm, 6px);
  background: var(--gray-100); overflow: hidden;
}
.bulk-progress-fill {
  height: 100%; background: var(--accent-500); border-radius: var(--radius-sm, 6px);
  transition: width var(--duration-base, .2s) var(--ease-standard, ease);
}

.bulk-confirm { margin-top: var(--space-6); }
.bulk-groups {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4); margin: var(--space-4) 0;
}
.bulk-group-card {
  border: 1px solid var(--border-color); border-radius: var(--radius-lg, 14px);
  background: var(--bg-surface); box-shadow: var(--shadow-1); padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
}
.bulk-group-title {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-weight: 600;
  border: 1px solid var(--border-color-strong); border-radius: var(--radius-sm, 8px);
}
.bulk-photo-well {
  display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 64px;
  padding: var(--space-2); border: 1px dashed var(--border-color); border-radius: var(--radius-sm, 8px);
  background: var(--bg-subtle);
}
.bulk-photo-well-hot { border-color: var(--accent-500); background: var(--accent-50); }
.bulk-photo { position: relative; width: 64px; height: 64px; flex: none; cursor: grab; }
.bulk-photo img {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm, 6px);
  border: 2px solid transparent; display: block;
}
.bulk-photo-selected img { border-color: var(--accent-500); }
.bulk-photo-remove {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; line-height: 18px;
  border-radius: 50%; border: none; background: var(--danger-fg, #dc2626); color: #fff;
  font-size: 14px; cursor: pointer; padding: 0;
}
.bulk-group-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.bulk-group-merge {
  flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: var(--text-sm, 14px);
  border: 1px solid var(--border-color-strong); border-radius: var(--radius-sm, 8px); font: inherit;
}
@media (max-width: 520px) {
  .bulk-groups { grid-template-columns: 1fr; }
}

/* «Станет после правок»: 6,3 → 9,1. Ради этой стрелки весь разбор и делается — она отвечает
   на единственный вопрос продавца «и что мне с этого», и превращает кнопку «сделайте за меня»
   из предложения в очевидность. Показывается только когда правка реально поднимает оценку. */
.audit-score-arrow { font-size: var(--text-2xl); color: var(--text-muted); margin: 0 var(--space-1); }
.audit-score-projected { color: var(--ok-fg, #1a7f4b); }
.audit-projected-note { color: var(--text-muted); font-size: var(--text-sm); align-self: center; }