/* Смысл · интерфейс v1.0 · 17.09.2026
   Базовые токены и компоненты. Это не готовое приложение.
   Шрифтовое решение обновлено владельцем 23.09.2026: Onest, SIL OFL 1.1.
   Геометрию логотипа/иконок и логику компонентов реализовать по ТЗ.
*/

:root {
  color-scheme: light;
  --sm-bg: #F2EFE8;
  --sm-surface: #FBFAF6;
  --sm-surface-alt: #F7F3EC;
  --sm-surface-hover: #EEE7DF;
  --sm-surface-selected: #F1E4E5;
  --sm-surface-disabled: #E8E2DB;
  --sm-text-primary: #262229;
  --sm-text-secondary: #5F5753;
  --sm-text-muted: #6E645F;
  --sm-text-disabled: #8B8178;
  --sm-text-inverse: #FBFAF6;
  --sm-border-subtle: #DED6CD;
  --sm-border-strong: #CCC1B6;
  --sm-border-control: #8F8179;
  --sm-wine: #6B1F2D;
  --sm-wine-hover: #571725;
  --sm-wine-pressed: #45121D;
  --sm-wine-secondary: #8D4352;
  --sm-gold-text: #856018;
  --sm-gold-hover: #684A0D;
  --sm-gold-soft: #F1E7D2;
  --sm-gold-decorative: #B58A43;
  --sm-success: #246548;
  --sm-success-bg: #E5EFE8;
  --sm-danger: #A3333D;
  --sm-danger-bg: #F7E7E8;
  --sm-warning: #805B12;
  --sm-warning-bg: #F7EBCF;
  --sm-info: #5F526B;
  --sm-info-bg: #EDE8F1;
  --sm-chart-1: #6B1F2D;
  --sm-chart-2: #9B5565;
  --sm-chart-3: #77675D;
  --sm-chart-4: #6A6388;
  --sm-chart-5: #947128;
  --sm-map-1: #F1E4E5;
  --sm-map-2: #D3AFB6;
  --sm-map-3: #B87988;
  --sm-map-4: #944255;
  --sm-map-5: #6B1F2D;
  --sm-logo-light: #D9BCB6;
  --sm-logo-mid: #A15C66;
  --sm-shadow-card: 0 2px 8px rgba(38, 34, 41, 0.04);
  --sm-shadow-popover: 0 12px 32px rgba(38, 34, 41, 0.12);
  --sm-shadow-modal: 0 24px 64px rgba(38, 34, 41, 0.18);
  --sm-scrim: rgba(38, 34, 41, 0.40);
  --sm-chart-area: rgba(107, 31, 45, 0.06);
  --sm-chart-band: rgba(107, 31, 45, 0.12);
  --sm-logo-gradient: linear-gradient(135deg, #6B1F2D 0%, #A15C66 55%, #D9BCB6 100%);
  --sm-font: "Onest", Arial, sans-serif;
  --sm-weight-regular: 400;
  --sm-weight-semibold: 600;
  --sm-weight-bold: 700;
  --sm-space-0: 0rem;
  --sm-space-2: 0.125rem;
  --sm-space-4: 0.25rem;
  --sm-space-8: 0.5rem;
  --sm-space-12: 0.75rem;
  --sm-space-16: 1rem;
  --sm-space-20: 1.25rem;
  --sm-space-24: 1.5rem;
  --sm-space-32: 2rem;
  --sm-space-40: 2.5rem;
  --sm-space-48: 3rem;
  --sm-space-64: 4rem;
  --sm-radius-check: 0.25rem;
  --sm-radius-badge: 0.375rem;
  --sm-radius-control: 0.5rem;
  --sm-radius-card: 0.75rem;
  --sm-radius-dialog: 1rem;
  --sm-radius-round: 9999px;
  --sm-sidebar-width: 14rem;
  --sm-topbar-height: 4rem;
  --sm-content-max: 100rem;
  --sm-page-gutter: 1.5rem;
  --sm-grid-gap: 1rem;
  --sm-control-min: 2.5rem;
  --sm-type-h1: 2.25rem;
  --sm-line-h1: 2.75rem;
  --sm-type-h2: 1.375rem;
  --sm-line-h2: 1.75rem;
  --sm-type-card-title: 1.25rem;
  --sm-line-card-title: 1.75rem;
  --sm-type-body: 1rem;
  --sm-line-body: 1.5rem;
  --sm-type-meta: 0.875rem;
  --sm-line-meta: 1.25rem;
  --sm-type-kpi: 2rem;
  --sm-line-kpi: 2.5rem;
  --sm-chart-line-width: 2.5;
  --sm-chart-comparison-width: 2;
  --sm-chart-point-radius: 3;
  --sm-chart-previous-dash: 6 4;
  --sm-chart-benchmark-dash: 2 4;
  --sm-chart-forecast-dash: 8 4;
  --sm-duration-fast: 120ms;
  --sm-duration-popover: 160ms;
  --sm-duration-panel: 200ms;
  --sm-ease: ease-out;
  --sm-ease-panel: cubic-bezier(0.2, 0, 0, 1);
  --sm-z-table: 10;
  --sm-z-chrome: 20;
  --sm-z-menu: 40;
  --sm-z-overlay: 60;
  --sm-z-dialog: 70;
  --sm-z-tooltip: 80;
  --sm-z-toast: 90;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-padding-top: calc(var(--sm-topbar-height) + 1rem); }
body {
  margin: 0;
  background: var(--sm-bg);
  color: var(--sm-text-primary);
  font-family: var(--sm-font);
  font-size: var(--sm-type-body);
  line-height: var(--sm-line-body);
  font-synthesis: none;
}
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button, input, select, textarea { min-width: 0; }
img, svg { max-width: 100%; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sm-wine);
  outline-offset: 2px;
}
.sm-on-dark :focus-visible, .sm-button--primary:focus-visible {
  box-shadow: 0 0 0 2px var(--sm-text-inverse);
  outline: 2px solid var(--sm-wine);
  outline-offset: 4px;
}
.sm-numeric { font-variant-numeric: lining-nums tabular-nums; }
.sm-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;
}
.sm-app { min-height: 100dvh; }
.sm-sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sm-sidebar-width);
  padding: 1.5rem 0.75rem;
  display: flex; flex-direction: column;
  background: var(--sm-surface-alt);
  border-right: 1px solid var(--sm-border-subtle);
  z-index: var(--sm-z-chrome);
  overflow-y: auto;
}
.sm-logo { display: block; width: 11rem; height: 2.5rem; object-fit: contain; }
.sm-logo--mark { display: none; width: 2rem; height: 2rem; }
.sm-logo-link { display: inline-flex; margin: 0 0.75rem 1.5rem; flex-shrink: 0; }
.sm-nav { display: grid; gap: 0.25rem; }
.sm-nav-link {
  position: relative; display: flex; align-items: center;
  min-height: 2.75rem; gap: 0.75rem; padding: 0.625rem 1rem;
  color: var(--sm-text-secondary); text-decoration: none;
  font-size: 1rem; line-height: 1.375rem; font-weight: 400;
  border-radius: var(--sm-radius-control);
  transition: background-color var(--sm-duration-fast) var(--sm-ease),
    color var(--sm-duration-fast) var(--sm-ease);
}
.sm-nav-link > .sm-icon { color: var(--sm-wine); flex: 0 0 auto; }
.sm-nav-link:hover { background: var(--sm-surface-hover); color: var(--sm-text-primary); }
.sm-nav-link[aria-current="page"] {
  background: var(--sm-surface-selected); color: var(--sm-wine); font-weight: 600;
}
.sm-nav-link[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 0.625rem; bottom: 0.625rem;
  width: 3px; border-radius: 2px; background: var(--sm-wine);
}
.sm-nav-divider { border: 0; border-top: 1px solid var(--sm-border-subtle); margin: 1rem 0; }
.sm-sidebar-slogan { margin-top: auto; padding: 1.5rem 0.75rem 0; color: var(--sm-text-muted); font-size: 0.875rem; line-height: 1.25rem; }
.sm-workspace { margin-left: var(--sm-sidebar-width); min-width: 0; }
.sm-topbar {
  position: sticky; top: 0; z-index: var(--sm-z-chrome);
  min-height: var(--sm-topbar-height); padding: 0.75rem var(--sm-page-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--sm-bg); border-bottom: 1px solid var(--sm-border-subtle);
}
.sm-content { max-width: var(--sm-content-max); margin: 0 auto; padding: 1.5rem var(--sm-page-gutter); }
.sm-stack { display: grid; gap: 1rem; }
.sm-page-title { margin: 0; font-size: var(--sm-type-h1); line-height: var(--sm-line-h1); font-weight: 700; letter-spacing: -0.02em; }
.sm-section-title { margin: 0; font-size: var(--sm-type-h2); line-height: var(--sm-line-h2); font-weight: 600; }
.sm-card-title { margin: 0; font-size: var(--sm-type-card-title); line-height: var(--sm-line-card-title); font-weight: 600; }
.sm-description { margin: 0.25rem 0 0; color: var(--sm-text-secondary); }
.sm-meta { font-size: var(--sm-type-meta); line-height: var(--sm-line-meta); color: var(--sm-text-muted); }
.sm-eyebrow { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sm-text-muted); }
.sm-page-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; }
.sm-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.sm-button {
  display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem;
  min-height: var(--sm-control-min); padding: 0.4375rem 1rem;
  border: 1px solid var(--sm-border-control); border-radius: var(--sm-radius-control);
  background: var(--sm-surface); color: var(--sm-text-primary);
  font-size: 1rem; line-height: 1.5rem; font-weight: 600; text-decoration: none;
  transition: background-color var(--sm-duration-fast) var(--sm-ease), border-color var(--sm-duration-fast) var(--sm-ease);
}
.sm-button:hover:not(:disabled) { background: var(--sm-surface-hover); border-color: var(--sm-wine); }
.sm-button--primary { background: var(--sm-wine); border-color: var(--sm-wine); color: var(--sm-text-inverse); }
.sm-button--primary:hover:not(:disabled) { background: var(--sm-wine-hover); border-color: var(--sm-wine-hover); }
.sm-button--primary:active:not(:disabled) { background: var(--sm-wine-pressed); border-color: var(--sm-wine-pressed); }
.sm-button--ghost { color: var(--sm-wine); background: transparent; border-color: transparent; }
.sm-button--ghost:hover:not(:disabled) { border-color: transparent; }
.sm-button--danger { color: var(--sm-danger); border-color: var(--sm-danger); }
.sm-button--danger:hover:not(:disabled) { border-color: var(--sm-danger); background: var(--sm-danger-bg); }
.sm-button:disabled, .sm-button[aria-disabled="true"] { background: var(--sm-surface-disabled); color: var(--sm-text-disabled); border-color: var(--sm-border-strong); }
.sm-icon-button { padding: 0.5rem; width: var(--sm-control-min); min-width: var(--sm-control-min); }
.sm-icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sm-icon--20 { width: 1.25rem; height: 1.25rem; }
.sm-icon--16 { width: 1rem; height: 1rem; }
.sm-icon--filled { fill: currentColor; stroke: none; }
.sm-brand { color: var(--sm-gold-text); font-weight: 600; }
a.sm-brand:hover { color: var(--sm-gold-hover); text-decoration: underline; text-underline-offset: 3px; }
.sm-card { min-width: 0; padding: 1.25rem; background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); box-shadow: var(--sm-shadow-card); }
.sm-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1rem; row-gap: 0.75rem; }
.sm-field { display: grid; gap: 0.375rem; align-content: start; min-width: 0; }
.sm-label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--sm-text-secondary); }
.sm-input {
  width: 100%; min-height: var(--sm-control-min); padding: 0.4375rem 0.75rem;
  border: 1px solid var(--sm-border-control); border-radius: var(--sm-radius-control);
  background: var(--sm-surface); color: var(--sm-text-primary);
  font-size: 1rem; line-height: 1.5rem;
}
.sm-input::placeholder { color: var(--sm-text-muted); opacity: 1; }
.sm-input:hover:not(:disabled), .sm-input:focus { border-color: var(--sm-wine); }
.sm-input[aria-invalid="true"] { border-color: var(--sm-danger); }
.sm-input:disabled { background: var(--sm-surface-disabled); color: var(--sm-text-disabled); }
.sm-field-error { color: var(--sm-danger); font-size: 0.875rem; line-height: 1.25rem; }
.sm-brands { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sm-brand-chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--sm-control-min); padding: 0.4375rem 0.75rem; border: 1px solid var(--sm-border-control); border-radius: var(--sm-radius-control); background: var(--sm-surface); color: var(--sm-gold-text); font-weight: 600; }
.sm-brand-chip[aria-pressed="true"] { background: var(--sm-surface-selected); border-color: var(--sm-wine); }
.sm-brand-chip .sm-icon { color: var(--sm-wine); }
.sm-checkbox { width: 1.25rem; height: 1.25rem; accent-color: var(--sm-wine); }
/* Пользовательская форма checkbox должна сохранить input и связанный label. */
.sm-tabs { display: flex; gap: 1.5rem; overflow-x: auto; }
.sm-tab { flex: 0 0 auto; min-height: 2.75rem; padding: 0.625rem 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--sm-text-secondary); font-weight: 600; }
.sm-tab[aria-selected="true"] { color: var(--sm-wine); border-bottom-color: var(--sm-wine); }
.sm-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sm-kpi { min-height: 7.75rem; }
.sm-kpi-label { font-size: 1rem; line-height: 1.375rem; font-weight: 600; }
.sm-kpi-value { margin-top: 0.5rem; font-size: var(--sm-type-kpi); line-height: var(--sm-line-kpi); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.sm-kpi-delta { margin-top: 0.25rem; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; font-weight: 600; }
.sm-status { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 1.75rem; padding: 0.25rem 0.5rem; border-radius: var(--sm-radius-badge); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.sm-status--success { background: var(--sm-success-bg); color: var(--sm-success); }
.sm-status--danger { background: var(--sm-danger-bg); color: var(--sm-danger); }
.sm-status--warning { background: var(--sm-warning-bg); color: var(--sm-warning); }
.sm-status--info { background: var(--sm-info-bg); color: var(--sm-info); }
.sm-positive { color: var(--sm-success); }
.sm-negative { color: var(--sm-danger); }
.sm-benchmark { padding: 0.75rem 1rem; border: 1px solid var(--sm-border-subtle); border-left: 3px solid var(--sm-wine); border-radius: var(--sm-radius-control); background: var(--sm-surface-alt); font-size: 0.875rem; line-height: 1.25rem; }
.sm-analysis-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem; }
.sm-chart-card { min-height: 22rem; }
.sm-chart-canvas { min-height: 13.75rem; background: var(--sm-surface); }
.sm-chart-card text { font-family: var(--sm-font); font-size: 14px; fill: var(--sm-text-muted); }
.sm-chart-grid { stroke: var(--sm-border-subtle); stroke-width: 1; }
.sm-chart-current { fill: none; stroke: var(--sm-chart-1); stroke-width: 2.5; }
.sm-chart-previous { fill: none; stroke: var(--sm-chart-3); stroke-width: 2; stroke-dasharray: 6 4; }
.sm-chart-benchmark { fill: none; stroke: var(--sm-chart-5); stroke-width: 2; stroke-dasharray: 2 4; }
.sm-chart-forecast { fill: none; stroke: var(--sm-wine-secondary); stroke-width: 2.5; stroke-dasharray: 8 4; }
.sm-chart-band { fill: var(--sm-chart-band); stroke: none; }
.sm-table-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); background: var(--sm-surface); }
.sm-table { width: 100%; border-collapse: collapse; background: var(--sm-surface); font-variant-numeric: lining-nums tabular-nums; }
.sm-table th { min-height: 2.75rem; padding: 0.75rem 1rem; background: var(--sm-surface-alt); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--sm-text-secondary); text-align: left; }
.sm-table td { height: 3rem; padding: 0.75rem 1rem; font-size: 1rem; line-height: 1.5rem; border-top: 1px solid var(--sm-border-subtle); }
.sm-table th[data-numeric], .sm-table td[data-numeric] { text-align: right; white-space: nowrap; }
.sm-table tbody tr:hover { background: var(--sm-surface-hover); }
.sm-table tbody tr[aria-selected="true"] { background: var(--sm-surface-selected); }
.sm-table tfoot td { background: var(--sm-surface-alt); font-weight: 600; border-top: 1px solid var(--sm-border-strong); }
.sm-table--compact td { height: 2.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.sm-popover { max-width: min(24rem, calc(100vw - 1rem)); padding: 0.5rem; background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); box-shadow: var(--sm-shadow-popover); z-index: var(--sm-z-menu); }
.sm-tooltip { max-width: 20rem; padding: 0.5rem 0.75rem; border-radius: var(--sm-radius-control); background: var(--sm-text-primary); color: var(--sm-text-inverse); font-size: 0.875rem; line-height: 1.25rem; z-index: var(--sm-z-tooltip); }
.sm-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.5rem; overflow: auto; border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-dialog); background: var(--sm-surface); color: var(--sm-text-primary); box-shadow: var(--sm-shadow-modal); }
.sm-dialog::backdrop { background: var(--sm-scrim); }
.sm-skeleton { border-radius: var(--sm-radius-check); background: var(--sm-surface-disabled); }

@media (min-width: 1600px) {
  .sm-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sm-analysis-grid--with-ranking { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); }
}
@media (max-width: 1279px) {
  :root { --sm-sidebar-width: 5rem; --sm-type-h1: 2rem; --sm-line-h1: 2.5rem; }
  .sm-sidebar { padding-inline: 0.75rem; }
  .sm-sidebar .sm-nav-label, .sm-sidebar .sm-logo-wordmark, .sm-sidebar-slogan { display: none; }
  .sm-sidebar .sm-nav-link { justify-content: center; padding-inline: 0.5rem; }
  .sm-sidebar .sm-logo-link { margin: 0 auto 1.5rem; }
  .sm-sidebar .sm-logo--lockup { display: none; }
  .sm-sidebar .sm-logo--mark { display: block; width: 2rem; height: 2rem; }
  .sm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-analysis-grid { grid-template-columns: minmax(0, 1fr); }
}
/* data-nav-collapsed="true" применяется контроллером интерфейса только от 1280px. */
@media (min-width: 1280px) {
  .sm-app[data-nav-collapsed="true"] { --sm-sidebar-width: 5rem; }
  .sm-app[data-nav-collapsed="true"] .sm-nav-label,
  .sm-app[data-nav-collapsed="true"] .sm-logo-wordmark,
  .sm-app[data-nav-collapsed="true"] .sm-sidebar-slogan { display: none; }
  .sm-app[data-nav-collapsed="true"] .sm-sidebar .sm-nav-link { justify-content: center; padding-inline: 0.5rem; }
  .sm-app[data-nav-collapsed="true"] .sm-logo--lockup { display: none; }
  .sm-app[data-nav-collapsed="true"] .sm-logo--mark { display: block; }
  .sm-app[data-nav-collapsed="true"] .sm-logo-link { margin: 0 auto 1.5rem; }
}
@media (max-width: 1023px) {
  :root { --sm-page-gutter: 1.25rem; }
  .sm-sidebar { display: none; }
  .sm-workspace { margin-left: 0; }
  /* Мобильное меню рендерится отдельным модальным drawer с полными подписями. */
  .sm-nav-drawer { width: min(18rem, calc(100vw - 2rem)); }
}
@media (max-width: 767px) {
  :root { --sm-page-gutter: 1rem; --sm-control-min: 2.75rem; --sm-type-h1: 1.75rem; --sm-line-h1: 2.25rem; }
  .sm-kpi-grid, .sm-filter-grid { grid-template-columns: minmax(0, 1fr); }
  .sm-card { padding: 1rem; }
  .sm-chart-card { min-height: 20rem; }
  .sm-dialog { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
}
@media (pointer: coarse) { :root { --sm-control-min: 2.75rem; } }
@media (max-height: 899px) { .sm-sidebar-slogan { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .sm-sidebar, .sm-topbar, .sm-actions, .sm-filters, .sm-export-hide { display: none !important; }
  .sm-workspace { margin-left: 0; }
  .sm-content { max-width: none; padding: 0; }
  .sm-card { box-shadow: none; break-inside: avoid; }
}