@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* S2 · бот — единственный стилевой лист: токены, база, компонентный слой.
   Значения сняты с собранного CSS salesap.ru, не подобраны на глаз.

   Про малиновый. Фирменный #E62F6D даёт на белом контраст 4.21 при норме 4.5 —
   и ровно столько же даёт белый на нём. Поэтому 500 живёт только заливкой:
   иконки, полосы, обводки, крупные акценты. Текст и фоны кнопок берутся с 700
   и темнее. Это арифметика WCAG, а не вкус, и менять её на глаз нельзя.

   Вторичный текст — #697287, а не фирменный серый #8E8E93: тот даёт 3.26 на
   наших подписях 12–13px. Разница на глаз незаметна, читаемость спасена.

   Тёмной темы у S2 нет ни одной утилитой — не выдумываем и здесь. */

:root {
  /* Роли — точные значения языка */
  --color-bg: #F7F7FC;
  --color-surface: #FFFFFF;
  --color-text: #0E0D0D;
  --color-muted: #697287;
  --color-line: #E8E8E9;
  --color-accent: #E62F6D;
  /* Терракоты у S2 нет; вторая рампа схлопнута в основную,
     чтобы не править единственное место, где она использовалась (.offer). */
  --color-accent-2: #E62F6D;

  /* Статусы */
  --color-success: #3E9A2E;
  --color-warning: #a66a1f;
  --color-error: #D4024A;
  --color-success-tint: #eaf6ef;
  --color-warning-tint: #fff9e8;
  --color-error-tint: #fff2f2;

  /* Нейтральная рампа */
  --color-neutral-100: #F7F7FC;
  --color-neutral-200: #EFEEF5;
  --color-neutral-300: #E8E8E9;
  --color-neutral-400: #D1D1D6;
  --color-neutral-500: #A8AEBD;
  --color-neutral-600: #8E8E93;
  --color-neutral-700: #6E7891;
  --color-neutral-800: #48484A;
  --color-neutral-900: #343440;

  /* Акцент — малиновый S2. 500 = фирменный --main, но в текст и кнопки
     не идёт: с 700 и темнее контраст проходит норму. */
  --color-accent-100: #F8E4ED;
  --color-accent-200: #FAD1DF;
  --color-accent-300: #F4A8C2;
  --color-accent-400: #EE729C;
  --color-accent-500: #E62F6D;
  --color-accent-600: #CF2A62;
  --color-accent-700: #B82657;
  --color-accent-800: #9C204A;
  --color-accent-900: #781839;

  /* Второй акцент — псевдоним основного: отдельного тёплого у S2 нет */
  --color-accent-2-100: var(--color-accent-100);
  --color-accent-2-200: var(--color-accent-200);
  --color-accent-2-300: var(--color-accent-300);
  --color-accent-2-400: var(--color-accent-400);
  --color-accent-2-500: var(--color-accent-500);
  --color-accent-2-600: var(--color-accent-600);
  --color-accent-2-700: var(--color-accent-700);
  --color-accent-2-800: var(--color-accent-800);
  --color-accent-2-900: var(--color-accent-900);

  /* Типографика */
  /* Proxima Nova у S2 платная — её файлы не берём. Остаёмся на Inter,
   а серифную гарнитуру убираем: у S2 её нет, заголовки той же гротеской. */
  --font-heading: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --text-display: 38px;
  --text-title: 30px;
  --text-section: 26px;
  --text-lead: 20px;
  --text-body: 16px;
  --text-sm: 15px;
  --text-xs: 13px;
  --text-2xs: 12px;

  /* Плотность */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Форма */
  --radius-sm: 6px;
  --radius: 12px;          /* контролы: кнопка, поле, выпадашка */
  --radius-lg: 20px;       /* карточки и поверхности — их rounded-base */
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 36px rgba(0, 0, 0, 0.08);   /* их .shadow дословно */
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.22);

  --measure: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.625;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  margin: 0;
}

/* Шкала S2: заголовки той же гротеской, вес 800 — серифа и «лёгких»
   заголовков у них нет. */
h1 { font-size: 44px; line-height: 50px; font-weight: 800; }
h2 { font-size: 30px; line-height: 36px; font-weight: 800; }
h3 { font-size: 20px; line-height: 1.2; font-weight: 700; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-800); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; }

::selection { background: var(--color-accent-200); color: var(--color-accent-900); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Служебные */
.muted { color: var(--color-muted); }
.eyebrow {
  margin: 0;
  color: var(--color-accent-700);
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hr { border: 0; border-top: 1px solid var(--color-line); margin: var(--space-6) 0; }

/* Поверхности */
.surface,
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  /* Крупный радиус — только поверхностям. На контроле высотой 40px радиус 20px
     превратил бы кнопку в таблетку, поэтому контролы остаются на --radius. */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.surface { padding: var(--space-5); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* Карточка */
.card { display: grid; gap: var(--space-2); padding: var(--space-3); min-width: 0; }
.card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-neutral-100);
  color: var(--color-muted);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-title { margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.25; }
.card-body { margin: 0; color: var(--color-muted); font-size: var(--text-xs); }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.card-kicker { color: var(--color-muted); font-size: var(--text-2xs); font-weight: 700; }

.card-clickable {
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.card-clickable:hover,
.card-clickable:focus-visible {
  border-color: var(--color-accent-600);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Кнопки */
.btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.btn-primary { background: var(--color-accent-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-accent-800); box-shadow: var(--shadow-md); }
.btn-primary:active { background: var(--color-accent-900); }
.btn-secondary { border-color: var(--color-line); }
.btn-secondary:hover { border-color: var(--color-accent-600); background: var(--color-accent-100); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--color-accent-100); }
.btn-icon { width: 40px; padding: 0; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Метки */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-2xs);
  font-weight: 700;
}
.tag-accent { border-color: transparent; background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { border-color: transparent; background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { border-color: transparent; background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { background: transparent; }
button.tag { cursor: pointer; }
button.tag:hover { border-color: var(--color-accent-600); }
.tag-active { border-color: var(--color-accent-600); background: var(--color-accent-100); color: var(--color-accent-800); }

/* Статусы */
.status { display: inline-flex; align-items: center; min-height: 24px; border-radius: var(--radius-pill); padding: 3px var(--space-2); font-size: var(--text-2xs); font-weight: 700; }
.status-success { background: var(--color-success-tint); color: var(--color-success); }
.status-progress { background: var(--color-warning-tint); color: var(--color-warning); }
.status-failed { background: var(--color-error-tint); color: var(--color-error); }

/* Поля */
.field { display: grid; gap: var(--space-1); }
.field > label,
.field > span { font-size: var(--text-sm); font-weight: 600; }
.field-required { color: var(--color-error); }
.field-error { color: var(--color-error); font-size: var(--text-xs); }
.input,
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.field textarea { min-height: 104px; resize: vertical; }
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--color-accent-300);
  outline-offset: 0;
  border-color: var(--color-accent-600);
}
.choice-list { display: grid; gap: var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-3); background: var(--color-surface); }
.choice-item { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.choice-item input { width: auto; min-height: 0; box-shadow: none; }

/* Навигация */
.nav {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.nav-brand { justify-self: start; display: flex; align-items: center; gap: var(--space-3); font-weight: 800; }
.nav-mark { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--radius); background: var(--color-accent-700); color: #fff; }
.tabs { justify-self: center; display: inline-flex; align-items: center; gap: var(--space-1); border-radius: var(--radius-pill); padding: var(--space-1); background: color-mix(in srgb, var(--color-accent-100) 86%, transparent); }
.tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  color: var(--color-muted);
  font-size: var(--text-body);
  font-weight: 500;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.tab:hover { color: var(--color-accent-800); }
.tab-active { background: var(--color-surface); color: var(--color-accent-800); box-shadow: var(--shadow-md); }

/* Таблица */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { border-bottom: 1px solid var(--color-line); padding: var(--space-3); text-align: left; vertical-align: top; }
.table th { background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 700; }

/* Диалог */
.dialog-backdrop { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-6); background: rgba(0, 0, 0, 0.42); }
.dialog { width: min(1040px, 100%); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-bg); box-shadow: var(--shadow-lg); }
.dialog-title { padding: var(--space-5); border-bottom: 1px solid var(--color-line); background: var(--color-surface); }
.dialog-body { padding: var(--space-5); overflow-y: auto; display: grid; gap: var(--space-5); align-content: start; }
.dialog-actions { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-line); background: var(--color-surface); }

/* Оболочка */
.main { max-width: var(--measure); margin: 0 auto; padding: var(--space-6); }