/* ============================================================
   Дизайн-система дашборда юзер-тестов — единый источник истины.
   Подключается и в дашборд (index.html), и в витрину (components.html).
   Принципы: одна шкала кеглей (множитель ~1.2), ограниченные веса/цвета,
   край держим тенью+тоном, теги одного размера, акцент (lime) — точечно.
   ============================================================ */
:root{
  /* — палитра — */
  --paper:#f2f4ee; --card:#fff; --sidebar:#fbfcf9;
  --ink:#17191d; --muted:#5f656d; --faint:#9aa0a8;
  --line:rgba(20,24,28,.10); --line-soft:rgba(20,24,28,.06);
  --soft:#edf0e8; --soft2:#e4e8dd;
  --lime:#d3f23e; --dark:#15171b;
  --good:#1f8f53; --goodbg:#e7f4ec; --warn:#c43d2e; --warnbg:#fbe9e6;
  --amber:#a76d05; --amberbg:#f8efd8; --info:#2e6bb0; --infobg:#e9f1fa;

  /* — типографика: одна шкала, шаг ~1.2 — */
  --fs-2xs:11px;  /* микроподписи, легенда */
  --fs-xs:12px;   /* лейблы (капс), вторичное */
  --fs-sm:13px;   /* поддержка, таблицы */
  --fs-md:14px;   /* тело (база) */
  --fs-lg:16px;   /* лид, акцентный текст */
  --fs-xl:20px;   /* заголовок экрана */
  --fs-2xl:26px;  /* h1 / среднее число */
  --fs-3xl:33px;  /* крупное KPI-число */
  --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.5;
  --fw-r:400; --fw-m:500; --fw-sb:600; --fw-b:700;
  --tr-label:.06em; /* трекинг капс-лейблов */

  /* — отступы (8-сетка) — */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  /* — радиусы — */
  --r-sm:10px; --r:14px; --r-lg:18px; --r-pill:999px;
  /* — тени — */
  --sh:0 1px 2px rgba(16,24,16,.05), 0 6px 22px rgba(16,24,16,.05);
  --sh-sm:0 1px 2px rgba(16,24,16,.05);
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}

/* — типографические роли (используем вместо случайных размеров) — */
.t-display{font-size:var(--fs-3xl);font-weight:var(--fw-b);letter-spacing:-.025em;line-height:var(--lh-tight)}
.t-h1{font-size:var(--fs-2xl);font-weight:var(--fw-b);letter-spacing:-.025em;line-height:var(--lh-tight)}
.t-h2{font-size:var(--fs-xl);font-weight:var(--fw-b);letter-spacing:-.02em;line-height:var(--lh-tight)}
.t-h3{font-size:var(--fs-lg);font-weight:var(--fw-sb);letter-spacing:-.01em;line-height:var(--lh-snug)}
.t-body{font-size:var(--fs-md);font-weight:var(--fw-r);line-height:var(--lh-body)}
.t-sm{font-size:var(--fs-sm);font-weight:var(--fw-r);line-height:var(--lh-body)}
.t-label{font-size:var(--fs-xs);font-weight:var(--fw-b);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--faint)}
.t-caption{font-size:var(--fs-2xs);font-weight:var(--fw-r);color:var(--faint)}
.t-muted{color:var(--muted)} .t-faint{color:var(--faint)} .num{font-variant-numeric:tabular-nums}

/* — кнопка (одна система) — */
.ds-btn{font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-sb);padding:9px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:border-color .12s,background .12s;
  display:inline-flex;align-items:center;gap:7px;line-height:1}
.ds-btn:hover{border-color:rgba(20,24,28,.28)}
.ds-btn.primary{background:var(--lime);border-color:transparent;color:#1a1d12}
.ds-btn.primary:hover{filter:brightness(.96);border-color:transparent}
.ds-btn.ghost{background:transparent}
.ds-btn.block{width:100%;justify-content:center}

/* — тег / бейдж (ОДИН размер, варианты только по цвету) — */
.ds-tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);font-weight:var(--fw-b);
  line-height:1;padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap;background:var(--soft);color:var(--muted)}
.ds-tag.t-up{text-transform:uppercase;letter-spacing:.03em}
.ds-tag.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.ds-tag.warn{background:var(--warnbg);color:var(--warn)}
.ds-tag.amber{background:var(--amberbg);color:var(--amber)}
.ds-tag.good{background:var(--goodbg);color:var(--good)}
.ds-tag.info{background:var(--infobg);color:var(--info)}
.ds-tag.muted{background:var(--soft);color:var(--muted)}

/* — селект (ровные отступы, своя стрелка) — */
.ds-select{font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-sb);color:var(--ink);
  padding:9px 36px 9px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  appearance:none;-webkit-appearance:none;cursor:pointer;line-height:1.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235f656d' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px}
.ds-select:hover{border-color:rgba(20,24,28,.28)}

/* — карточка / поверхность — */
.ds-card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--sh);padding:var(--sp-6)}

/* — сегмент-контрол / чип-группа — */
.ds-seg{display:inline-flex;background:var(--soft);border-radius:var(--r-sm);padding:3px;gap:2px}
.ds-seg button{border:0;background:transparent;padding:7px 13px;font-size:var(--fs-sm);font-weight:var(--fw-sb);
  border-radius:8px;color:var(--muted);cursor:pointer;line-height:1;display:inline-flex;align-items:center;gap:7px}
.ds-seg button.on{background:var(--card);box-shadow:var(--sh-sm);color:var(--ink)}
.ds-seg button .ct{font-size:var(--fs-2xs);color:var(--faint);font-variant-numeric:tabular-nums}
.ds-seg button.on .ct{color:var(--muted)}

/* — таблица — */
.ds-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.ds-table th{text-align:left;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:var(--fw-b);padding:0 12px 12px}
.ds-table th.r,.ds-table td.r{text-align:right}
.ds-table td{padding:13px 12px;border-top:1px solid var(--line-soft);vertical-align:middle;font-variant-numeric:tabular-nums}
.ds-table tr:hover td{background:var(--soft)}

/* — код/слаг — */
.ds-code{font-family:var(--mono);font-size:var(--fs-2xs);background:var(--soft);padding:3px 8px;border-radius:6px;color:var(--ink)}