/* Слой вёрстки демо-кабинета.
   platform.css НЕ ПРАВИТСЯ — этот файл только собирает компоновку на его токенах.
   Цвета, радиусы, тени, шрифты берутся из переменных платформы, поэтому внешний вид
   совпадает с продуктом автоматически, без подбора на глаз.

   Источники токенов в platform.css:
     :root / .dark  — --background, --card, --border, --muted-foreground,
                      --primary, --sidebar-*, --chart-1..5  (светлая и тёмная темы)
     .mapp          — фирменная палитра AI Маржа (--c-brand и родственные)
   Фирменные значения продублированы ниже как --brand*: platform.css держит их
   внутри .mapp, а нам они нужны на всём документе. Значения не изменены. */

:root {
  /* Палитра взята из боевого сайта aimarzha.ru (тенант aimarzha, редизайн 2026).
     Значения скопированы из его собственных токенов --sf-*, а не подобраны на глаз:
     тёмная тема — фон #070706, акцент #E6B267; светлая — фон #fcf9f3, акцент #ad831f.
     Одно осознанное отличие: границей светлой темы взят --sf-border-strong (#f6efdc),
     а не --sf-border (#f9f5e8). На сайте граница почти не нужна, в кабинете на ней
     держатся таблицы и панели, и более светлая просто исчезает. */
  --brand: #ad831f;
  --brand-hover: #96711a;
  --brand-active: #83641b;
  --brand-text: #83641b;
  --brand-on: #ffffff;
  --brand-soft: #f6efdc;
  --brand-glow: rgba(173, 131, 31, .24);
  --brand-gradient: linear-gradient(135deg, #F7D894 0%, #E6B267 48%, #A05E2B 100%);
  --warn: #b26b00;
  --warn-bg: #fdf4e3;
  --danger: #c93535;
  --danger-bg: #fbeaea;
  --ai: #A05E2B;

  /* Поверхности платформы перекрашены под сайт: platform.css не правится, токены
     перекрываются здесь. */
  --background: #fcf9f3;
  --foreground: #1a1a18;
  --card: #ffffff;
  --border: #f6efdc;
  --muted: #faf6eb;
  --muted-foreground: #6b6a64;
  --accent: #f6efdc;
  --sidebar-border: #f6efdc;
  --sidebar-accent: #f6efdc;

  --sb-w: 264px;
  --topbar-h: 60px;
  --gutter: 24px;
  /* Форма — по сайту: у него --sf-radius-xl и 2xl равны 24px. */
  --r-card: 20px;
  --r-ctl: 12px;
  --r-panel: 24px;
  --r-chip: 8px;

  --shadow-xs: 0 1px 2px rgba(31, 30, 29, .05);
  --shadow-md: 0 10px 30px rgba(31, 30, 29, .07);
  --shadow-lg: 0 20px 50px rgba(31, 30, 29, .14);
}

.dark {
  /* Основная тема кабинета: сайт с 2026 года тёмный (colorMode: dark). */
  --brand: #E6B267;
  --brand-hover: #F7D894;
  --brand-active: #A05E2B;
  --brand-text: #F7D894;
  --brand-on: #070706;
  --brand-soft: rgba(230, 178, 103, .14);
  --brand-glow: rgba(230, 178, 103, .34);
  --brand-gradient: linear-gradient(135deg, #F7D894 0%, #E6B267 48%, #A05E2B 100%);
  --warn: #E6B267;
  --warn-bg: rgba(230, 178, 103, .12);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, .12);
  --ai: #F7D894;

  --background: #070706;
  --foreground: #FCF8F1;
  --card: #12100D;
  --popover: #12100D;
  --secondary: #19150F;
  --muted: #19150F;
  --muted-foreground: #CDC5BA;
  --border: #2B251C;
  --input: #2B251C;
  --accent: #211B13;
  --sidebar: #0D0C0A;
  --sidebar-border: #2B251C;
  --sidebar-accent: #211B13;

  --shadow-xs: 0 1px 2px rgba(252, 248, 241, .05);
  --shadow-md: 0 10px 28px rgba(252, 248, 241, .10);
  --shadow-lg: 0 20px 48px rgba(252, 248, 241, .14);
}

* { box-sizing: border-box; }

/* Оболочка заблокирована, скроллится рабочая область — так устроена сама платформа:
   platform.css задаёт body{height:100%;overflow:hidden}. Мы это не ломаем, а достраиваем,
   иначе получится страница, которую нельзя прокрутить. */
html {
  height: 100%;
  overflow-x: hidden; /* горизонтального скролла страницы быть не должно */
  background: var(--background);
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#app { height: 100dvh; overflow: hidden; }

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ───────────────────────────── Оболочка ───────────────────────────── */

.app { display: flex; height: 100%; width: 100%; overflow: hidden; }

.sidebar {
  width: var(--sb-w);
  flex: 0 0 var(--sb-w);
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 40;
}

.sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--sidebar-border);
  min-height: var(--topbar-h);
}
.sidebar__logo {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: var(--r-ctl);
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px;
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.sidebar__name { font-weight: 650; font-size: 14px; letter-spacing: -.01em; }
.sidebar__sub { font-size: 11px; color: var(--muted-foreground); margin-top: 1px; }

.sidebar__scroll { flex: 1; overflow-y: auto; padding: 10px 10px 16px; }
.sidebar__group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); padding: 12px 10px 6px; }

.navitem {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0; background: transparent;
  border-radius: var(--r-ctl);
  cursor: pointer;
  text-align: left;
  color: var(--sidebar-foreground);
  font-size: 13.5px;
  transition: background .12s ease, color .12s ease;
}
.navitem:hover { background: var(--sidebar-accent); }
.navitem[aria-current="page"] { background: var(--sidebar-accent); font-weight: 600; }
.navitem[aria-current="page"] .navitem__ic { color: var(--brand-text); }
.navitem__ic { width: 18px; height: 18px; flex: 0 0 18px; color: var(--muted-foreground); }
.navitem__badge {
  margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums;
  background: var(--muted); color: var(--muted-foreground);
  padding: 1px 7px; border-radius: 999px;
}

.sidebar__foot { padding: 12px; border-top: 1px solid var(--sidebar-border); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.topbar {
  height: var(--topbar-h);
  flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--background);
  z-index: 30;
}
.topbar__title { font-weight: 650; font-size: 15px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__sub { font-size: 12px; color: var(--muted-foreground); }
.topbar__spacer { margin-left: auto; }
.burger { display: none; }
.topbar__logo { display: none; }
.sidebar-bd { display: none; }

.content {
  padding: var(--gutter);
  flex: 1; min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.content__head { margin-bottom: 18px; }
.content__h1 { font-size: 20px; font-weight: 680; letter-spacing: -.02em; margin: 0 0 4px; }
.content__lead { color: var(--muted-foreground); font-size: 13px; margin: 0; max-width: 76ch; }

/* ───────────────────────────── Карточки и сетки ───────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-xs);
  padding: 16px;
  min-width: 0;
}
.card--flush { padding: 0; overflow: hidden; }
.card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.card__title { font-weight: 620; font-size: 14px; margin: 0; letter-spacing: -.01em; }
.card__hint { font-size: 12px; color: var(--muted-foreground); margin: 2px 0 0; }
.card__actions { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }

.grid { display: grid; gap: 16px; min-width: 0; }
.grid--kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Плашка с числом */
.kpi { position: relative; }
.kpi__label { font-size: 12px; color: var(--muted-foreground); display: flex; align-items: center; gap: 6px; }
.kpi__value { font-size: 24px; font-weight: 680; letter-spacing: -.025em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi__value--sm { font-size: 19px; }
.kpi__foot { margin-top: 6px; font-size: 12px; color: var(--muted-foreground); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.trend { font-variant-numeric: tabular-nums; font-weight: 600; }
.trend--up { color: var(--brand-text); }
.trend--down { color: var(--danger); }
.trend--flat { color: var(--muted-foreground); }

/* ───────────────────────────── Кнопки и элементы ──────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 13px;
  border-radius: var(--r-ctl);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-size: 13px; font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover { background: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn--primary:active { background: var(--brand-active); border-color: var(--brand-active); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--accent); }
.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn--lg { height: 42px; padding: 0 20px; font-size: 14px; }
.btn--block { width: 100%; }
.btn__ic { width: 16px; height: 16px; flex: 0 0 16px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 550;
  background: var(--muted); color: var(--muted-foreground);
  white-space: nowrap;
}
.chip--ok { background: var(--brand-soft); color: var(--brand-text); }
.chip--warn { background: var(--warn-bg); color: var(--warn); }
.chip--danger { background: var(--danger-bg); color: var(--danger); }
.chip--ai { background: color-mix(in oklab, var(--ai) 14%, transparent); color: var(--ai); }
.chip__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.seg { display: inline-flex; background: var(--muted); border-radius: var(--r-ctl); padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg__btn { flex: 0 0 auto; }
.seg__btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 5px 11px; border-radius: var(--r-chip);
  font-size: 12.5px; color: var(--muted-foreground); font-weight: 550;
}
.seg__btn[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 12.5px; font-weight: 550; }
.input {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--input); border-radius: var(--r-ctl);
  background: var(--background); color: var(--foreground);
  width: 100%;
}
.input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent; }
.input--err { border-color: var(--danger); }
.field__err { font-size: 12px; color: var(--danger); }

/* ───────────────────────────── Таблицы ────────────────────────────── */
/* Таблица никогда не растягивает страницу: скролл живёт внутри своей обёртки */

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.tbl th {
  text-align: left; font-weight: 550; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted-foreground);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.is-clickable { cursor: pointer; }
.tbl tbody tr.is-clickable:hover { background: var(--accent); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .strong { font-weight: 600; }
.tbl__empty { padding: 28px; text-align: center; color: var(--muted-foreground); font-size: 13px; }
.tbl__foot { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }

.cellmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cellmain__t { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cellmain__s { font-size: 11.5px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────────────────────────── Графики ────────────────────────────── */

.chart { width: 100%; display: block; overflow: visible; }
.chart__grid { stroke: var(--border); stroke-width: 1; }
.chart__axis { fill: var(--muted-foreground); font-size: 10.5px; }
.chart__dot { transition: r .12s ease; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; font-size: 12px; }
.chart-legend__i { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); }
.chart-legend__sw { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 10px; }

.funnel__row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.funnel__label { width: 108px; flex: 0 0 108px; font-size: 12.5px; }
.funnel__bar { flex: 1; height: 26px; background: var(--muted); border-radius: var(--r-chip); overflow: hidden; min-width: 0; }
.funnel__fill { height: 100%; border-radius: var(--r-chip); background: var(--brand); opacity: .85; }
.funnel__val { width: 132px; flex: 0 0 132px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }

.bars { display: flex; flex-direction: column; gap: 9px; }
.bars__row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr minmax(88px, auto); gap: 12px; align-items: center; }
.bars__track { height: 9px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.bars__fill { height: 100%; border-radius: 999px; }
.bars__val { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* ───────────────────────────── Платёжный календарь ────────────────── */

.cal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cal__m { min-width: 0; }
.cal__title { font-weight: 620; font-size: 13.5px; margin: 0 0 10px; text-transform: capitalize; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__wd { font-size: 10.5px; color: var(--muted-foreground); text-align: center; padding-bottom: 4px; }
.cal__day {
  border: 1px solid var(--border); border-radius: var(--r-ctl);
  padding: 5px 5px 6px; min-height: 62px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); cursor: pointer; text-align: left;
  transition: border-color .12s ease, background .12s ease;
  min-width: 0;
}
.cal__day:hover { border-color: var(--brand); }
.cal__day--empty { border-color: transparent; background: transparent; cursor: default; }
.cal__day--past { opacity: .62; }
.cal__day--today { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.cal__day--gap { border-color: var(--danger); background: var(--danger-bg); }
.cal__dnum { font-size: 11px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.cal__in { font-size: 11px; color: var(--brand-text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.cal__out { font-size: 11px; color: var(--danger); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }

/* ───────────────────────────── Контент-завод ──────────────────────── */

.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.post__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--muted); }
.post__body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.post__title { font-size: 13.5px; font-weight: 570; line-height: 1.35; margin: 0; }
.post__meta { margin-top: auto; display: flex; gap: 12px; font-size: 11.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; flex-wrap: wrap; }

/* ───────────────────────────── Карточка сущности (шторка) ─────────── */

.drawer-bd {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .32);
  opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 60;
  backdrop-filter: blur(1px);
}
.drawer-bd.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  z-index: 61;
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 12px; }
.drawer__title { font-size: 16px; font-weight: 650; margin: 0; letter-spacing: -.015em; }
.drawer__sub { font-size: 12.5px; color: var(--muted-foreground); margin: 3px 0 0; }
.drawer__body { padding: 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.drawer__foot { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }

.deflist { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 9px 16px; font-size: 13px; }
.deflist dt { color: var(--muted-foreground); }
.deflist dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline__i { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.timeline__i:not(:last-child)::before {
  content: ''; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--border);
}
.timeline__dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 999px; background: var(--brand); margin-top: 4px; z-index: 1; }
.timeline__c { min-width: 0; }
.timeline__d { font-size: 11.5px; color: var(--muted-foreground); }
.timeline__t { font-size: 13px; }

/* ───────────────────────────── Опрос и сборка ─────────────────────── */

.intro { height: 100%; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--background); }
.intro__box { width: min(660px, 100%); }
.intro__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; justify-content: center; }
.intro__step { font-size: 12px; color: var(--muted-foreground); letter-spacing: .02em; }
.intro__bar { height: 3px; background: var(--muted); border-radius: 999px; margin: 12px 0 26px; overflow: hidden; }
.intro__bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .35s cubic-bezier(.4, 0, .2, 1); }
.intro__q { font-size: 25px; font-weight: 680; letter-spacing: -.03em; margin: 0 0 6px; line-height: 1.2; }
.intro__hint { color: var(--muted-foreground); font-size: 13.5px; margin: 0 0 22px; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opts--1 { grid-template-columns: 1fr; }
.opt {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-ctl);
  background: var(--card); cursor: pointer; font-size: 14px;
  transition: border-color .12s ease, background .12s ease, transform .06s ease;
}
.opt:hover { border-color: var(--brand); background: var(--brand-soft); }
.opt:active { transform: translateY(1px); }
.opt[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); font-weight: 570; }
.opt__tick {
  width: 19px; height: 19px; flex: 0 0 19px; border-radius: 6px;
  border: 1.5px solid var(--border); display: grid; place-items: center; color: transparent;
}
.opt[aria-pressed="true"] .opt__tick { background: var(--brand); border-color: var(--brand); color: #fff; }
.intro__foot { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* Свои площадки: тендеры, АТИ, отраслевые биржи. Перечислить их заранее нельзя,
   а у многих именно оттуда идёт основной поток заявок. */
.srcs {
  margin-top: 16px; padding: 15px 16px;
  border: 1px dashed var(--border); border-radius: var(--r-ctl);
  background: var(--card);
}
.srcs__head { margin-bottom: 12px; }
.srcs__title { font-size: 13.5px; font-weight: 600; }
.srcs__hint { font-size: 12.5px; color: var(--muted-foreground); margin-top: 3px; max-width: 60ch; }
.srcs__row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.srcs__row .input { flex: 1; min-width: 0; height: 40px; }
.srcs__add { margin-top: 2px; }
.srcs__ok { display: flex; gap: 7px; align-items: flex-start; margin-top: 10px; color: var(--brand); }
.srcs__ok > span { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }

.build { text-align: center; max-width: 460px; margin: 0 auto; }
.build__ring { width: 74px; height: 74px; margin: 0 auto 22px; }
.build__step { font-size: 14.5px; min-height: 22px; }
.build__list { margin: 22px 0 0; padding: 0; list-style: none; text-align: left; display: flex; flex-direction: column; gap: 9px; }
.build__li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted-foreground); transition: color .2s ease; }
.build__li.is-done { color: var(--foreground); }
.build__li i { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 999px; border: 1.5px solid var(--border); display: grid; place-items: center; }
.build__li.is-done i { background: var(--brand); border-color: var(--brand); }

/* ───────────────────────────── Чат ────────────────────────────────── */

/* ── Рука-ассистент у правого края ────────────────────────────────────────
   Геометрия и повадки взяты из виджета консультанта на comash.ru
   (apps/studio/public/marzha-assistant.js): рука 168×150, наполовину за краем,
   покачивание, перебор пальцами, свечение. Клиент видит один и тот же жест
   на сайте и в кабинете. */

.mz-stage {
  position: fixed; right: 0; bottom: 18px;
  width: 168px; height: 150px; z-index: 55; pointer-events: none;
}
.mz-hand-wrap { position: absolute; inset: 0; will-change: transform; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
/* Донор прячет руку на 69 % — там она на цветном фоне лендинга и заметна.
   В кабинете фон белый, и на 69 % от неё оставались еле видимые кончики пальцев.
   Выдвинута сильнее: это единственная точка входа в ассистента. */
.mz-stage.is-collapsed .mz-hand-wrap { transform: translateX(50%); }
.mz-stage.is-collapsed:hover .mz-hand-wrap { transform: translateX(38%); }
.mz-stage.is-reach     .mz-hand-wrap { transform: translateX(0); transition: transform .8s cubic-bezier(.34, 1.56, .4, 1); }
.mz-stage.is-open      .mz-hand-wrap { transform: translateX(132%); transition: transform .55s cubic-bezier(.5, 0, .75, 0); }

.mz-hand-float { position: absolute; inset: 0; animation: mz-breathe 4.2s ease-in-out infinite; }
.mz-stage.is-reach .mz-hand-float { animation-duration: 2.6s; }
.mz-hand-wave { position: absolute; inset: 0; transform-origin: 88% 66%; }
.mz-stage.is-reach .mz-hand-wave { animation: mz-wave 1.25s cubic-bezier(.36, .07, .19, .97) .18s 1; }

.mz-hand {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: auto; cursor: pointer; overflow: visible;
  filter: drop-shadow(-10px 12px 20px rgba(8, 30, 26, .28));
  -webkit-tap-highlight-color: transparent;
}
.mz-hand:focus { outline: none; }
.mz-hand:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: var(--r-ctl); }

.mz-finger { transform-box: fill-box; transform-origin: 100% 50%; }
.mz-f1 { animation: mz-tap 3.4s ease-in-out 0s infinite; }
.mz-f2 { animation: mz-tap 3.4s ease-in-out .12s infinite; }
.mz-f3 { animation: mz-tap 3.4s ease-in-out .24s infinite; }
.mz-f4 { animation: mz-tap 3.4s ease-in-out .36s infinite; }
.mz-stage.is-collapsed:hover .mz-finger { animation-duration: 1s; }
.mz-stage.is-collapsed:hover .mz-aura { opacity: .95; transform: scale(1.08); }
.mz-stage.is-collapsed:hover .mz-bubble { opacity: 1; transform: translate(-100%, 0) scale(1); }

.mz-aura {
  position: absolute; right: -4%; bottom: 2%; width: 86%; height: 86%;
  border-radius: 50%; z-index: -1; opacity: .8; transition: .5s;
  background: radial-gradient(circle at 50% 50%, var(--brand-glow), var(--brand-glow) 38%, transparent 70%);
  filter: blur(12px); animation: mz-aura 4.6s ease-in-out infinite;
}
.mz-stage.is-open .mz-aura { opacity: 0; }

.mz-bubble {
  position: absolute; left: -6px; top: 14px;
  transform: translate(-100%, 0) scale(.6); transform-origin: 110% 60%;
  opacity: 0; pointer-events: none; white-space: nowrap;
  background: var(--card); color: var(--foreground);
  border: 1px solid var(--border); border-radius: var(--r-ctl);
  padding: 9px 13px; font-size: 13px; font-weight: 550;
  box-shadow: var(--shadow-md);
  transition: opacity .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.mz-stage.is-reach .mz-bubble { opacity: 1; transform: translate(-100%, 0) scale(1); }

@keyframes mz-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mz-aura { 0%, 100% { transform: scale(1); opacity: .62; } 50% { transform: scale(1.1); opacity: .85; } }
@keyframes mz-tap { 0%, 72%, 100% { transform: rotate(0deg); } 80% { transform: rotate(-11deg); } 88% { transform: rotate(2deg); } }
@keyframes mz-wave { 0% { transform: rotate(-7deg); } 22% { transform: rotate(15deg); } 45% { transform: rotate(-3deg); } 70% { transform: rotate(11deg); } 100% { transform: rotate(0deg); } }

/* ── Панель ассистента: выезжает от правого края во всю высоту ───────────── */

.chat {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 62;
  width: min(440px, 100vw);
  height: 100dvh;
  background: var(--card); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%); opacity: 1; pointer-events: none;
  transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}
.chat.is-open { transform: translateX(0); pointer-events: auto; }
.chat__head { padding: 13px 15px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.chat__title { font-size: 13.5px; font-weight: 620; }
.chat__sub { font-size: 11.5px; color: var(--muted-foreground); }
.chat__body { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 88%; font-size: 13.5px; line-height: 1.5; }
.msg--me { align-self: flex-end; background: var(--brand); color: #fff; padding: 9px 13px; border-radius: var(--r-card) var(--r-card) var(--r-chip) var(--r-card); }
.msg--ai { align-self: flex-start; background: var(--muted); padding: 10px 13px; border-radius: var(--r-card) var(--r-card) var(--r-card) var(--r-chip); white-space: pre-wrap; }
.msg--ai strong { font-weight: 620; }
.chat__foot { padding: 11px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.chat__in { flex: 1; height: 36px; border: 1px solid var(--input); border-radius: var(--r-ctl); padding: 0 14px; background: var(--background); }
.chat__in:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.chat__hints { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 15px 12px; }
.chat__hint { font-size: 11.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); cursor: pointer; color: var(--muted-foreground); }
.chat__hint:hover { border-color: var(--brand); color: var(--brand); }
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--muted-foreground); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* «Объясни вот это» — любой элемент с этим признаком можно спросить у чата */
.explain { cursor: help; position: relative; }
.explain:hover { text-decoration: underline dotted var(--brand); text-underline-offset: 3px; }
.explain-mark {
  position: fixed; border: 2px solid var(--brand); border-radius: var(--r-ctl);
  box-shadow: 0 0 0 4px var(--brand-soft); pointer-events: none; z-index: 58;
  transition: all .16s ease;
}

/* ───────────────────────────── Экскурсия ──────────────────────────── */

.tour-bd { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.tour-hole {
  position: fixed; border-radius: var(--r-ctl); z-index: 71;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55), 0 0 0 3px var(--brand);
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.tour-pop {
  position: fixed; z-index: 72; width: min(340px, calc(100vw - 28px));
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-lg); padding: 15px 16px;
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
}
.tour-pop__step { font-size: 11.5px; color: var(--muted-foreground); letter-spacing: .03em; }
.tour-pop__title { font-size: 15px; font-weight: 650; margin: 5px 0 6px; letter-spacing: -.015em; }
.tour-pop__text { font-size: 13px; color: var(--muted-foreground); margin: 0 0 14px; line-height: 1.55; }
.tour-pop__foot { display: flex; align-items: center; gap: 8px; }
.tour-pop__dots { display: flex; gap: 4px; margin-right: auto; }
.tour-pop__dot { width: 5px; height: 5px; border-radius: 999px; background: var(--border); }
.tour-pop__dot.is-on { background: var(--brand); width: 14px; }

/* ───────────────────────────── Подсказки мёртвых кнопок ───────────── */

.toast-wrap { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(460px, calc(100vw - 28px)); }
.toast {
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--r-card); box-shadow: var(--shadow-md); padding: 12px 15px;
  font-size: 13px; display: flex; gap: 11px; align-items: flex-start; width: 100%;
  animation: toastin .22s cubic-bezier(.4, 0, .2, 1);
}
.toast__ic { color: var(--brand); flex: 0 0 18px; margin-top: 1px; }
.toast__t { font-weight: 600; margin-bottom: 2px; }
.toast__s { color: var(--muted-foreground); line-height: 1.45; }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ───────────────────────────── Новый раздел ───────────────────────── */
/* Экран намеренно пустой: ни таблиц, ни цифр. Только просьба сказать словами,
   чего не хватает, — и ответ, что это делается. */

.builder__intro { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.builder__ic {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--r-ctl);
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center;
}
.builder__ic > span { width: 20px; height: 20px; }
.builder__h { font-size: 17px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 5px; line-height: 1.3; }
.builder__lead { color: var(--muted-foreground); font-size: 13.5px; margin: 0; max-width: 62ch; }

.builder__stream {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 132px; max-height: 46vh; overflow-y: auto;
  padding: 4px 2px; margin-bottom: 14px;
}
.builder__msg { max-width: 100%; }
.builder__msg.msg--me { max-width: 84%; }

.builder__empty {
  border: 1px dashed var(--border); border-radius: var(--r-ctl);
  padding: 26px 20px; text-align: center; color: var(--muted-foreground);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.builder__emptyic { width: 26px; height: 26px; color: var(--brand); opacity: .8; }
.builder__empty p { margin: 0; font-size: 13px; max-width: 44ch; }

.builder__ex { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.builder__form { display: flex; gap: 9px; }
.builder__form .input { flex: 1; min-width: 0; }
.builder__cta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 767px) {
  .builder__form { flex-direction: column; align-items: stretch; }
  .builder__stream { max-height: none; }
}

/* ───────────────────────────── Финал ──────────────────────────────── */

.final { max-width: 720px; margin: 0 auto; }
.final__h { font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 8px; line-height: 1.15; }
.final__lead { color: var(--muted-foreground); font-size: 14.5px; margin: 0 0 26px; }
.final__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.final__stat { padding: 14px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--card); }
.final__statv { font-size: 20px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.final__statl { font-size: 12px; color: var(--muted-foreground); margin-top: 3px; }

/* Подсветка карточки: кнопка «Что дальше» нажата, когда экран уже открыт.
   Без неё нажатие выглядело как «ничего не произошло». */
.is-flash { animation: flash 1.2s cubic-bezier(.4, 0, .2, 1); }
@keyframes flash {
  0%   { box-shadow: 0 0 0 0 var(--brand-glow); border-color: var(--brand); }
  35%  { box-shadow: 0 0 0 8px transparent;     border-color: var(--brand); }
  100% { box-shadow: var(--shadow-xs);          border-color: var(--border); }
}

/* ───────────────────────────── Разное ─────────────────────────────── */

.muted { color: var(--muted-foreground); }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hr { height: 1px; background: var(--border); border: 0; margin: 0; }
.note { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.5; }
.empty { padding: 32px 20px; text-align: center; color: var(--muted-foreground); font-size: 13px; }

.skel { background: linear-gradient(90deg, var(--muted) 25%, var(--accent) 50%, var(--muted) 75%); background-size: 200% 100%; animation: skel 1.4s infinite; border-radius: var(--r-chip); }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ───────────────────────────── Адаптив ────────────────────────────── */
/* Проверяется на 1920, 1440, 1024, 768 и 390 — как требует ТЗ п.13 */

@media (max-width: 1440px) {
  :root { --sb-w: 236px; --gutter: 20px; }
  .grid--kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
  .grid--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2-1, .grid--1-2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Мобильный слой: кабинет ведёт себя как приложение ──────────────────────
   Левая колонка уезжает целиком, разделы открываются шторкой справа — там же,
   где бургер, чтобы палец не ходил через весь экран. */

@media (max-width: 1023px) {
  :root { --gutter: 16px; --topbar-h: 56px; }

  .sidebar {
    position: fixed; right: 0; left: auto; top: 0; bottom: 0;
    width: min(310px, 86vw); height: 100dvh;
    border-right: 0; border-left: 1px solid var(--sidebar-border);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--shadow-lg);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sidebar.is-open { transform: translateX(0); }

  /* Шторка поверх руки-ассистента: у той z-index 55, и без этого она
     торчала бы поверх меню. */
  .sidebar { z-index: 57; }

  /* Затемнение под шторкой — отдельным слоем, а не псевдоэлементом сайдбара:
     у сайдбара есть transform, а он становится точкой отсчёта для вложенного
     position:fixed, и подложка схлопывалась в ничто. */
  .sidebar-bd {
    display: block; position: fixed; inset: 0; z-index: 56;
    background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none;
    transition: opacity .26s ease;
  }
  .sidebar-bd.is-open { opacity: 1; pointer-events: auto; }

  .burger {
    display: inline-flex; width: 40px; height: 40px; padding: 0;
    flex: 0 0 40px; margin-left: 2px;
  }
  .burger .btn__ic { width: 21px; height: 21px; }

  /* Крупные пункты меню — попадать пальцем, а не целиться */
  .navitem { padding: 12px 12px; font-size: 15px; border-radius: var(--r-ctl); }
  .navitem__ic { width: 20px; height: 20px; flex-basis: 20px; }
  .sidebar__scroll { padding: 8px 12px 20px; }
  .sidebar__brand { min-height: var(--topbar-h); }

  .topbar { padding: 0 12px; gap: 10px; }
  .topbar__logo {
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--r-chip);
    background: var(--brand); color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 14px;
  }
  .tour-label { display: none; }
  #btn-tour { width: 38px; padding: 0; }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .cal { grid-template-columns: minmax(0, 1fr); }
  .drawer { width: min(520px, 100%); }
}

@media (max-width: 767px) {
  .content { padding: 14px; }
  .grid { gap: 12px; }
  /* Панель фильтров не должна распирать карточку — она уезжает на свою строку */
  .card__head { flex-wrap: wrap; }
  .card__actions { margin-left: 0; width: 100%; }
  .grid--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts { grid-template-columns: minmax(0, 1fr); }
  .final__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts { grid-template-columns: 1fr; }
  .intro__q { font-size: 21px; }
  .kpi__value { font-size: 21px; }
  .chat { width: 100vw; border-left: 0; }
  /* На узком экране рука меньше и без облачка: при ширине 390 оно накрыло бы
     пол-экрана. Так же сделано в виджете на сайте. */
  .mz-stage { width: 112px; height: 100px; bottom: 10px; }
  .mz-bubble { display: none; }
  .drawer { width: 100%; }
  .funnel__label { width: 84px; flex-basis: 84px; font-size: 11.5px; }
  .funnel__val { width: 96px; flex-basis: 96px; font-size: 11.5px; }
  .bars__row { grid-template-columns: minmax(74px, 104px) 1fr minmax(72px, auto); gap: 8px; }
  .deflist { grid-template-columns: 1fr; gap: 3px 0; }
  .deflist dd { text-align: left; margin-bottom: 8px; font-weight: 550; }
  .topbar { padding: 0 14px; gap: 8px; }
  .topbar__sub { display: none; }
}

@media (max-width: 767px) {
  /* В клетку календаря сумма не влезает и обрезается многоточием — «+4,3…» читается
     как что угодно. Показываем полосы прихода и расхода, точные суммы — по нажатию. */
  .cal__in, .cal__out { font-size: 0; line-height: 0; display: block; }
  .cal__in::before, .cal__out::before {
    content: ''; display: block; height: 4px; border-radius: 999px; margin-top: 3px;
  }
  .cal__in::before { background: var(--brand); }
  .cal__out::before { background: var(--danger); }
}

@media (max-width: 420px) {
  .grid--kpi, .final__grid { grid-template-columns: minmax(0, 1fr); }
  .content__h1 { font-size: 18px; }
  .final__h { font-size: 21px; }
  .cal__day { min-height: 52px; padding: 4px; }
  .cal__grid { gap: 3px; }
}

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

@media print { .sidebar, .chat, .chat-fab, .tour-pop, .tour-hole { display: none !important; } }


/* Переключатель темы поверх приложения.

   Живёт вне #app, потому что #app перерисовывается целиком при смене
   экрана: кнопка внутри него исчезала бы на каждом шаге опроса.
   z-index выше шторок и чата, но ниже модальных окон платформы. */
#theme-switch {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

#theme-switch:hover {
  color: var(--foreground);
  border-color: var(--muted-foreground);
}

#theme-switch:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

#theme-switch svg { width: 17px; height: 17px; display: block; }

/* В кабинете своя такая же кнопка в верхней панели — две подряд выглядели бы
   ошибкой вёрстки. Внутри кабинета оставляем штатную. */
body:has(.shell) #theme-switch { display: none; }

/* --- Фирменный слой AI-Маржа 2026 -----------------------------------------
   Эталон — боевой сайт aimarzha.ru. Правила стоят в конце файла намеренно:
   компоновка выше уже описала эти узлы, и перекрывать её надо после неё. */

/* Плитка с буквой на сайте — не заливка, а фирменный градиент логотипа. */
.sidebar__logo {
  background: var(--brand-gradient);
  color: #070706;
}

/* Главная кнопка на сайте лежит на мягком тёплом свете, а не плоская. */
.btn--primary { box-shadow: 0 8px 20px var(--brand-glow); }
.btn--primary:hover { box-shadow: 0 10px 26px var(--brand-glow); }

/* Тёплое свечение фона первого экрана — как на главной сайта. */
.dark body::before {
  content: '';
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 60vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 60% at 18% 0%, rgba(230, 178, 103, .10), transparent 70%),
    radial-gradient(50% 50% at 82% 8%, rgba(160, 94, 43, .08), transparent 70%);
}

/* --- Входной экран по образцу сайта ---------------------------------------
   На сайте содержание лежит в карточке на почти чёрном фоне и начинается
   высоко. Здесь опрос висел по центру пустого экрана: первое действие
   уезжало на 518 px при потолке 320 px, и половина первого экрана пустовала. */

.intro {
  align-items: flex-start;
  padding: clamp(20px, 6vh, 64px) 24px 48px;
}

/* Карточка — те же поверхность, граница и радиус, что у блоков сайта. */
.intro__box {
  width: min(660px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: clamp(20px, 3.4vw, 34px);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
}

/* Фирменный знак вместо плитки с буквой — как в шапке сайта. */
.intro__brand { flex-direction: column; gap: 10px; margin-bottom: 26px; }
/* Знак крупный: брендбук держит его главным элементом и запрещает опускать
   ниже 160 px в digital. 440 px на десктопе, на узком экране — доля ширины,
   но не меньше брендбукового минимума. */
.intro__logo { width: min(440px, 76%); min-width: 190px; height: auto; display: block; }
.intro__brand-sub {
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-foreground);
}

/* Вопрос — крупнее: на сайте заголовок ведёт экран, а не соседствует с полем. */
.intro__q { font-size: clamp(23px, 2.6vw, 30px); }
.intro__bar { margin-bottom: 22px; }

/* --- Брендбук AI-Маржа 2026: доводка ---------------------------------------
   Источник — брендбук «AI-Маржа / Brand System 2026», страницы 08 (палитра)
   и 15 (правила). Core Black #070706 · Ivory #FCF8F1 · AI Gold #E6B267 ·
   Bronze #A05E2B · Graphite #625D56. Правило: тёмное поле, светлый контент,
   золото — только акцент. Синего в системе нет вовсе. */

/* Платформа держит свой акцент в --ds-*, и он оставался синим: от него шли
   голубые рамки, кольца фокуса и подсветка выбранных строк. */
:root {
  --ds-accent: #ad831f;
  --ds-accent-hover: #83641b;
  --ds-accent-ink: #83641b;
  --ds-accent-soft: #f6efdc;
  --ds-surface-hover: #f6efdc;
}
.dark {
  --ds-accent: #E6B267;
  --ds-accent-hover: #F7D894;
  --ds-accent-ink: #F7D894;
  --ds-accent-soft: rgba(230, 178, 103, .16);
  --ds-surface-hover: #211B13;
}

/* --- Палитра графиков ------------------------------------------------------
   Брендбук запрещает чужие цвета, поэтому ряды данных различаются не оттенком,
   а ступенью одной фирменной лестницы: Value Gradient #F7D894 → #E6B267 →
   #A05E2B, продлённый в бронзу. Прогнано валидатором как ordinal-лестница
   против настоящих поверхностей кабинета:
     тёмная  (#12100D): монотонность L — PASS, зазор ΔL ≥ 0.06 — PASS,
                        тёмный конец #96603A 3.65:1 — PASS, разброс тона 31°;
     светлая (#fcf9f3): те же четыре проверки — PASS, светлый конец
                        #D9A254 2.16:1 (для светлой темы лестница сдвинута
                        темнее, иначе верхняя ступень тонет в Ivory).
   Ряды подписаны легендой и осями — на одной лестнице это обязательное
   второе кодирование, цветом различать нельзя. */
:root {
  --chart-1: #D9A254;
  --chart-2: #C08A45;
  --chart-3: #A87338;
  --chart-4: #8C5C2C;
  --chart-5: #6E4526;
}
.dark {
  --chart-1: #F7D894;
  --chart-2: #E6B267;
  --chart-3: #D19553;
  --chart-4: #B5763A;
  --chart-5: #96603A;
}

/* Знак в шапке кабинета: брендбук (с. 06) требует в малом размере ставить
   знак AI, а не букву. Плитка отдана изображению целиком — градиент уже
   внутри знака, подкладывать второй под него нельзя. */
.sidebar__logo {
  background: none;
  object-fit: contain;
  border-radius: var(--r-ctl);
  box-shadow: none;
}

/* Выход в готовый пример с первого шага анкеты.
   Ссылка второстепенная: анкета остаётся основным путём, пример — для тех,
   кто сначала хочет посмотреть, что внутри. */
.intro__example {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted-foreground);
  text-align: center;
}
.intro__example a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.intro__example a:hover {
  opacity: .82;
}