/* ===== Fintech Redesign — Geist font ===== */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

/* ===== Design Tokens ===== */
:root {
    /* === Fintech surface / ink (Stripe-style) === */
    --bg:           #FFFFFF;
    --bg-app:       #FAFAFA;
    --bg-muted:     #F6F6F7;
    --bg-tint:      #F8FAFC;
    --surface:      #FFFFFF;

    --ink-1:        #0A2540;   /* primary text — Stripe navy */
    --ink-2:        #1A2B45;
    --ink-3:        #425466;   /* secondary */
    --ink-4:        #697386;   /* muted */
    --ink-5:        #8A94A6;   /* placeholder */

    --hair:         #EBEEF3;   /* hairline border вместо shadow */
    --hair-strong:  #DDE2EB;
    --hair-soft:    #F2F4F8;

    --accent:        #0A2540;
    --accent-2:      #1E3A5F;
    --accent-bright: #635BFF;
    --accent-tint:   #EFF2F7;

    /* === Brand-якори маркетплейсов === */
    --oz:       #1E6DB5;
    --oz-tint:  #E9F0F8;
    --wb:       #6D28D9;
    --wb-tint:  #EFE9FB;
    --ya:       #D97706;
    --ya-tint:  #FCEFDE;
    --la:       #1F2937;
    --la-tint:  #E7E9EC;

    --pos:      #16A34A;
    --pos-tint: #ECFDF3;
    --neg:      #DC2626;
    --neg-tint: #FEF1F1;
    --warn:     #B45309;

    --r-1:    4px;
    --r-2:    6px;
    --r-3:    8px;
    --r-4:    12px;
    --r-pill: 9999px;
    --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);

    /* === Legacy aliases (обратная совместимость со старыми шаблонами) === */
    --color-primary:        var(--ink-1);
    --color-primary-hover:  #06192E;
    --color-primary-light:  var(--accent-2);
    --color-accent:         var(--accent-bright);
    --color-accent-light:   var(--accent-tint);

    --color-ozon:           var(--oz);
    --color-ozon-bg:        var(--oz-tint);
    --color-wb:             var(--wb);
    --color-wb-bg:          var(--wb-tint);
    --color-yandex:         var(--ya);
    --color-yandex-bg:      var(--ya-tint);
    --color-yandex-dark:    #B45309;
    --color-lamoda:         var(--la);
    --color-lamoda-bg:      var(--la-tint);
    --color-lamoda-dark:    #111827;

    --color-success:        var(--pos);
    --color-success-muted:  #15803D;
    --color-success-bg:     var(--pos-tint);
    --color-warning:        var(--warn);
    --color-warning-bg:     #FFFBEB;
    --color-danger:         var(--neg);
    --color-danger-muted:   #B91C1C;
    --color-danger-bg:      var(--neg-tint);

    --text-2xs: 0.625rem;
    --text-3xs: 0.5625rem;

    --color-bg:              var(--bg-app);
    --color-surface:         var(--surface);
    --color-text:            var(--ink-1);
    --color-text-secondary:  var(--ink-3);
    --color-text-muted:      var(--ink-4);
    --color-border:          var(--hair-strong);
    --color-border-light:    var(--hair);

    /* Точный стек из reference styles.css (Claude Design handoff) */
    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --radius-sm: var(--r-2);
    --radius-md: var(--r-3);
    --radius-lg: var(--r-4);
    --radius-xl: 1rem;
    --radius-full: var(--r-pill);

    --shadow-sm: 0 1px 2px rgba(10,37,64,0.04);
    --shadow-md: 0 4px 6px -1px rgba(10,37,64,0.06), 0 2px 4px -2px rgba(10,37,64,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(10,37,64,0.08), 0 4px 6px -4px rgba(10,37,64,0.04);

    --transition-fast: 150ms var(--ease);
    --transition-base: 200ms var(--ease);
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html { font-family: var(--font-sans); }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--ink-1);
    background: var(--bg-app);
    font-feature-settings: 'ss01', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ===== Skip Link ===== */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    background: var(--color-primary);
    color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    z-index: 1000;
    font-size: var(--text-sm);
    text-decoration: none;
}
.skip-link:focus {
    top: var(--space-4);
}

/* ===== SR Only ===== */
.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;
}

/* ===== Layout — Fintech topbar (белый, hairline, sticky) ===== */
.page-header {
    background: #FFFFFF;
    color: var(--ink-1);
    padding: 0 var(--space-6);
    border-bottom: 1px solid var(--hair);
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 50;
}
.page-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-1);
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.page-header__brand-mark {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 12l3-3 2.5 1.5L13 4' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
        linear-gradient(135deg, var(--ink-1) 0%, var(--accent-2) 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px, 100% 100%;
    flex-shrink: 0;
}
.page-header__brand-text {
    font-weight: 600;
}
.page-header__row {
    max-width: none;
    width: 100%;
    margin: 0;
    height: 56px;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
    flex-wrap: nowrap;
}
.page-header__spacer {
    flex: 1;
    min-width: 0;
}
.page-header__meta {
    font-size: 12px;
    color: var(--ink-4);
    opacity: 1;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.page-header__meta::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pos);
    box-shadow: 0 0 0 3px var(--pos-tint);
}

.page-main {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--space-6);
}

/* ===== Breadcrumbs ===== */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    list-style: none;
    padding: 0;
    margin-top: 0;
}
.breadcrumb a {
    color: var(--color-accent);
    text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep { color: var(--color-text-muted); }

/* ===== Cards (fintech) ===== */
.card {
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: var(--r-4);
    box-shadow: none;
}
.card--padded { padding: 20px 22px; }

.stat-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 1100px) {
    .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .stat-cards { grid-template-columns: 1fr; }
}
.stat-card {
    padding: 20px 22px;
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: var(--r-4);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    transition: border-color 150ms var(--ease);
}
.stat-card:hover { border-color: var(--hair-strong); }
.stat-card--center { align-items: stretch; }
.stat-card--center .stat-card__label,
.stat-card--center .stat-card__value,
.stat-card--center .stat-card__sub {
    text-align: left;
}
.stat-card--center .stat-card__value {
    flex: 0 0 auto;
    display: block;
    font-size: 36px;
    line-height: 1;
}
.stat-card--center .stat-card__sub {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 2px;
}
.stat-card__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0;
}
.stat-card__value {
    font-size: 28px;
    font-weight: 600;
    color: var(--ink-1);
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum', 'ss01';
}
.stat-card__value--success { color: var(--pos); }
.stat-card__sub {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-3);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.store-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.store-dot--ozon { background: var(--oz); }
.store-dot--wb { background: var(--wb); }
.store-dot--ya { background: var(--ya); }

.stat-card--list { min-width: 200px; }
.stat-card--list .stat-card__label { margin-bottom: 4px; }
.stat-card__rows {
    margin-top: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    gap: 3px 12px;
    align-items: baseline;
    font-size: 12px;
    line-height: 1.5;
}
.stat-row__name {
    color: var(--ink-1);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-row__val {
    color: var(--ink-2);
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.stat-row__pct {
    color: var(--ink-4);
    font-size: 11.5px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.stat-row--header { display: contents; }
.stat-row--header > span {
    color: var(--ink-4);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--hair);
}
.stat-row { display: contents; }

/* ===== Month Tabs ===== */
.month-tabs {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    width: 100%;
}
.month-tabs::-webkit-scrollbar { display: none; }
a.month-tab { text-decoration: none; }
.month-tab {
    padding: var(--space-2) var(--space-4);
    min-height: 44px;
    min-width: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent;
    color: rgba(255,255,255,0.8);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: inherit;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.month-tab:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}
.month-tab:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}
.month-tab.active {
    background: white;
    color: var(--color-primary);
    border-color: white;
    font-weight: var(--weight-semibold);
}

/* Month tabs on light background (main content area) */
.month-tabs--main {
    margin-bottom: 16px;
}
.month-tabs--main .month-tab {
    border-color: var(--hair-strong);
    color: var(--ink-3);
    background: #FFFFFF;
    min-height: 34px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 500;
}
.month-tabs--main .month-tab:hover {
    border-color: var(--ink-1);
    color: var(--ink-1);
    background: var(--bg-muted);
}
.month-tabs--main .month-tab:focus-visible {
    outline: 2px solid var(--ink-1);
    outline-offset: 2px;
}
.month-tabs--main .month-tab.active {
    background: var(--ink-1);
    color: #FFFFFF;
    border-color: var(--ink-1);
    font-weight: 600;
}
/* Переключатель месяцев над заголовком страницы, выровнен слева. */
.page-head__months {
    width: auto;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 0;
    justify-content: flex-start;
}

/* ===== Filter Pills (fintech) ===== */
.filter-pills {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 4px;
    background: var(--bg-muted);
    border-radius: var(--r-3);
    width: fit-content;
}
.filter-pill {
    padding: 6px 14px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-3);
    border-radius: var(--r-2);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    transition: background 120ms var(--ease), color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.filter-pill:hover {
    color: var(--ink-1);
    background: rgba(255,255,255,0.6);
}
.filter-pill:focus-visible {
    outline: 2px solid var(--ink-1);
    outline-offset: 2px;
}
.filter-pill.active {
    background: #FFFFFF;
    color: var(--ink-1);
    border-color: var(--hair);
    box-shadow: 0 1px 1px rgba(10,37,64,0.04);
    font-weight: 600;
}

/* ===== Chart (fintech card) ===== */
.chart-section { margin-bottom: 32px; }
.chart-container {
    width: 100%;
    height: 420px;
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: var(--r-4);
    box-shadow: none;
    overflow: hidden;
    padding: 16px 20px 8px;
}
.chart-container > div { width: 100%; height: 100%; }
.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ink-4);
    font-size: 13px;
    letter-spacing: -0.005em;
}

/* ===== Date Grid ===== */
.section-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: var(--space-8) 0 var(--space-4);
}
.month-group {
    margin-bottom: var(--space-6);
}
.month-group__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}
.month-group__title a {
    color: inherit;
    text-decoration: none;
}
.month-group__title a:hover { color: var(--color-accent); }

.date-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.date-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    min-height: 36px;
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: var(--r-3);
    color: var(--ink-1);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: border-color 120ms var(--ease), background 120ms var(--ease);
}
.date-chip:hover {
    border-color: var(--ink-1);
    background: var(--bg-tint);
    box-shadow: none;
}
.date-chip:focus-visible {
    outline: 2px solid var(--ink-1);
    outline-offset: 2px;
}

/* ===== Report Table ===== */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }

#report-table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--text-sm);
}
#report-table th,
#report-table td {
    padding: var(--space-3) var(--space-4);
    text-align: center;
    border: 1px solid var(--color-border-light);
    white-space: nowrap;
}
#report-table thead th {
    background: var(--color-primary);
    color: white;
    font-weight: var(--weight-semibold);
    position: sticky;
    top: 0;
    z-index: 10;
}
#report-table tbody tr:hover { background: var(--color-accent-light); }
#report-table tbody tr:last-child {
    font-weight: var(--weight-bold);
    background: var(--color-border-light);
}
#report-table td:first-child { text-align: left; font-weight: var(--weight-medium); }

.group-blue   { background-color: var(--color-ozon-bg); }
.group-purple { background-color: var(--color-wb-bg); }
.group-yellow { background-color: var(--color-yandex-bg); }

/* ===== Navigation Buttons ===== */
.nav-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: 44px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.btn:hover { border-color: var(--color-accent); background: var(--color-accent-light); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Тактильный отклик нажатия — лёгкое «вдавливание» */
.btn:active,
.period-pill:active,
.fresh-pill:active,
.filter-pill:active,
.month-tab:active,
.date-chip:active,
.mode-tab:active { transform: scale(0.97); }
.btn--primary {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--color-border-light); }

/* ===== Error Page ===== */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}
.error-box {
    max-width: 480px;
    text-align: center;
    padding: var(--space-10);
}
.error-box__icon {
    color: var(--color-danger);
    margin-bottom: var(--space-4);
    display: flex;
    justify-content: center;
}
.error-box__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-2);
}
.error-box__message {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6);
}
.error-box__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

/* ===== Utilities ===== */
.spacer { flex: 1; }
.mt-6 { margin-top: var(--space-6); }
.empty-state { text-align: center; color: var(--color-text-muted); }
/* Standalone-вариант пустого состояния (вне ячейки таблицы) */
.empty-state--block { margin: var(--space-8) 0; }
/* Действие-выход из пустого состояния (напр. сброс фильтров) */
.empty-state__action {
    color: var(--color-accent);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
}
.empty-state__action:hover { text-decoration: underline; }
.empty-state__action:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }

/* ===== Header Tabs (Общая аналитика / Матрица) ===== */
.header-tabs {
    display: flex;
    gap: 2px;
    margin: 0;
    flex: 1;
    align-items: stretch;
    height: 100%;
}
.header-tab {
    position: relative;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-3);
    text-decoration: none;
    border-radius: 0;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 150ms var(--ease), border-color 150ms var(--ease);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.header-tab:hover { color: var(--ink-1); background: transparent; }
.header-tab.active {
    color: var(--ink-1);
    background: transparent;
    border-bottom-color: var(--ink-1);
    font-weight: 600;
}
.header-tab.active::after { content: none; }
.header-tab:focus-visible { outline: 2px solid var(--ink-1); outline-offset: -4px; border-radius: 4px; }

/* ===== Period rows (Месяц / Неделя / День) ===== */
.period-rows {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    display: grid;
    gap: var(--space-2);
    box-shadow: var(--shadow-sm);
}
.period-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: var(--space-3);
}
.period-row__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.period-row__pills {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}
.period-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px var(--space-3);
    min-height: 40px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    font-family: inherit;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.period-pill:hover {
    border-color: var(--color-primary-light);
    color: var(--color-primary);
    background: var(--color-accent-light);
}
.period-pill.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    font-weight: var(--weight-semibold);
}
.period-pill:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* День-пилюля — день недели и дата в две строки */
.period-pill--day {
    flex-direction: column;
    gap: 0;
    line-height: 1.25;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}
.period-pill__wd {
    font-size: var(--text-2xs);
    text-transform: lowercase;
}
.period-pill__date {
    font-variant-numeric: tabular-nums;
}

/* Период-ряд «Произвольный период» — форма с двумя <input type="date"> и кнопкой Применить */
.period-range-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.period-range-form__field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.period-range-form__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.period-range-form input[type="date"] {
    padding: 7px var(--space-3);
    min-height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.period-range-form input[type="date"]:hover { border-color: var(--color-primary-light); }
.period-range-form input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-accent-light);
}
.period-range-form__sep { color: var(--color-text-muted); }
.period-range-form__apply {
    min-height: 40px;
    padding: 0 var(--space-4);
}
/* Active state — когда выбран range, input'ы и кнопка подсвечены */
.period-row--active .period-range-form input[type="date"] {
    border-color: var(--color-primary);
    background: var(--color-accent-light);
}

/* Режим «Остатки» — период недоступен кроме дня (остатки = срез на момент) */
.period-row--disabled { opacity: 0.5; }
.period-pill.is-disabled {
    cursor: not-allowed;
    background: var(--color-border-light);
    color: var(--color-text-muted);
    pointer-events: none;
}
.period-row--disabled .period-range-form input[type="date"],
.period-row--disabled .period-range-form__apply {
    cursor: not-allowed;
}

/* ===== Notice (fallback note) ===== */
.notice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid color-mix(in srgb, var(--color-warning) 35%, white);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

/* ===== Mode tabs (Заказы / Воронка / Остатки / Карточка) ===== */
.mode-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    align-items: end;
}
.mode-tab {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.mode-tab:hover { color: var(--color-text); background: var(--color-border-light); }
.mode-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: var(--weight-semibold);
}
.mode-tab.disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
    pointer-events: none;
}
/* ===== Filters bar ===== */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.filters-bar__search {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 240px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
}
.filters-bar__search:focus-within {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-surface);
}
.filters-bar__search input {
    border: 0;
    outline: 0;
    background: transparent;
    flex: 1;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--color-text);
}
.filters-bar__group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}
.filters-bar__fresh-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 2px;
}
/* Пилюли-пресеты «Новинки» в строке фильтров */
.fresh-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--space-3);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.fresh-pill:hover {
    border-color: var(--color-primary-light);
    color: var(--color-primary);
}
.fresh-pill.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.fresh-pill:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Общая кнопка сброса всех фильтров */
.btn--reset {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
    font-weight: var(--weight-semibold);
}
.btn--reset:hover {
    background: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
}
/* Reset в is-disabled (нет активных фильтров) — серый, без интеракции */
.btn--reset.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

/* ===== Matrix meta ===== */
.matrix-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
    flex-wrap: wrap;
}
/* matrix-meta размещён внутри .filters-bar перед поиском — отделяем тонкой границей справа */
.filters-bar .matrix-meta {
    flex-shrink: 0;
    padding-right: var(--space-3);
    border-right: 1px solid var(--color-border);
}
@media (max-width: 768px) {
    .filters-bar .matrix-meta {
        flex-basis: 100%;
        padding-right: 0;
        padding-bottom: var(--space-2);
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }
}
.matrix-meta__period {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.matrix-meta__total {
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-medium);
}
.matrix-meta__dot { color: var(--color-text-muted); }

/* ===== Matrix table ===== */
.matrix-table-wrap {
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    max-height: calc(100vh - 360px);
    min-height: 320px;
    box-shadow: var(--shadow-sm);
}
.matrix-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
}
.matrix-table th,
.matrix-table td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border-light);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}
/* Названия / категории / даты — стандартный text-base (16px) */
.matrix-table tbody td { font-size: var(--text-base); }
/* Числовые ячейки крупнее — 18px. Specificity .col-num/.col-total > tbody td, иначе
   старое правило .col-num{font-size:text-sm} победило бы tbody-правило и числа были бы мельче. */
.matrix-table tbody .col-num,
.matrix-table tbody .col-total { font-size: var(--text-lg); }
/* ===== Matrix table — header =====
   Паттерн разделителей:
   - Горизонтальная линия 1px rgba(white,0.18) между уровнями (row1→row2, row2→row3)
   - Totals-ряд: верхняя линия 2px rgba(white,0.35) — визуально «жирнее», но та же логика
   - Вертикальные линии ТОЛЬКО между MP-группами (border-right на .sep)
   - Внутри одной MP-группы vertical-линий нет — цвет сам отделяет
   - YA-колонки: --color-yandex-dark (#B45309) — контраст белого текста ~5.1:1 (AA pass)
   Per-cell sticky: height: 32px на всех ячейках → top кратны 32 → браузер округляет синхронно */
/* Фон на самих рядах thead — закрывает субпиксельные щели между sticky-ячейками
   (иначе сквозь зазоры просвечивает белый фон страницы — заметно на пустой таблице). */
.matrix-table thead tr { background: var(--color-primary); }
.matrix-table thead tr.matrix-table__subhead { background: var(--color-primary-light); }
.matrix-table thead tr.matrix-table__totals { background: var(--color-primary-light); }
.matrix-table thead th,
.matrix-table thead td {
    position: sticky;
    background: var(--color-primary);
    color: white;
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    height: 32px;
    line-height: 1;
    border-bottom: none;
    border-top: none;
}
/* Ряд 1 — mp-group: top:0, z-index:5 */
.matrix-table thead tr:first-child th {
    top: 0;
    z-index: 5;
}
/* Ряд 2 — subhead: top:32, слегка светлее navy. Линий между mp-group и subhead НЕТ —
   цвет колонны един для всех уровней, лейблы CFG/KOT/Σ читаются как «внутренние подписи»
   того же блока. Никаких рваных линий на rowspan-Σ. */
.matrix-table__subhead th {
    top: 32px;
    z-index: 4;
    background: var(--color-primary-light);
    font-size: var(--text-2xs);
    padding: 4px var(--space-2);
}
/* Ряд 3 — totals: top:64. ЕДИНСТВЕННАЯ линия в шапке — отделяет «итог» от подписей.
   Сплошная белая 2px, идёт по всей ширине ряда (в totals нет rowspan'ов). */
.matrix-table thead tr.matrix-table__totals th,
.matrix-table thead tr.matrix-table__totals td {
    top: 64px;
    z-index: 4;
    background: var(--color-primary-light);
    border-top: 2px solid rgba(255,255,255,0.55);
}
.matrix-table__totals .muted { opacity: 0.55; font-weight: var(--weight-medium); }
.matrix-table__totals strong { font-weight: var(--weight-bold); }
/* Rowspan-ячейки 1-го ряда перекрывают subhead/totals */
.matrix-table thead tr:first-child th[rowspan] {
    z-index: 6;
}
.matrix-table tbody tr:hover {
    background: var(--color-accent-light);
}
/* col-total и col-num имеют собственный background (var(--color-bg)) который перекрывает
   hover-фон строки. Возвращаем подсветку явно при hover. */
.matrix-table tbody tr:hover .col-total,
.matrix-table tbody tr:hover td.col-total {
    background: var(--color-accent-light);
}
.matrix-table tbody tr:last-child td { border-bottom: 0; }

/* Sticky-left стек: индекс → фото → название. Каждое следующее `left:` = сумма ширин предыдущих. */
.matrix-table .col-idx,
.matrix-table .col-photo,
.matrix-table .col-name {
    position: sticky;
    background: inherit;
}
.matrix-table .col-idx {
    left: 0;
    z-index: 3;
    width: 44px;
    min-width: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted, var(--color-text-secondary));
}
/* Число в числовой ячейке — всегда block с min-height, чтобы пустое значение
   (qty_total = 0 → _format_int_blank вернул '') сохраняло вертикальное место.
   Иначе при отсутствии числа pct-бейдж «прыгает» к верху ячейки и оказывается
   выше, чем бейджи в соседних ячейках с числом. */
.matrix-table .num,
.matrix-table strong.num {
    display: block;
    min-height: 1.2em;
    line-height: 1.2;
}

/* Бейдж % изменения относительно прошлого периода — pill под числом в ячейке.
   Светлый тинт фона + насыщенный текст: читаемо на любом фоне ячейки. */
.pct {
    display: block;
    width: max-content;
    margin: 2px auto 0;
    padding: 0 5px;
    border-radius: var(--radius-full);
    font-size: var(--text-3xs);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
}
.pct--up   { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success-muted); }
.pct--down { background: color-mix(in srgb, var(--color-danger)  18%, transparent); color: var(--color-danger-muted); }
/* В шапке (totals-row) фон тёмно-navy или насыщенный — фон капсулы плотнее, текст пастельный для AA-контраста */
.matrix-table thead .pct--up   { background: color-mix(in srgb, var(--color-success) 45%, transparent); color: #FFFFFF; }
.matrix-table thead .pct--down { background: color-mix(in srgb, var(--color-danger)  45%, transparent); color: #FFFFFF; }
.matrix-table .col-photo { left: 44px; z-index: 3; width: 72px; }
.matrix-table .col-name {
    left: 116px;
    z-index: 3;
    text-align: left;
    min-width: 240px;
    max-width: 360px;
    white-space: normal;
}
.matrix-table thead .col-idx,
.matrix-table thead .col-photo,
.matrix-table thead .col-name { z-index: 8; background: var(--color-primary); }
.matrix-table thead .col-name { text-align: left; }
.matrix-table tbody tr:nth-child(odd) .col-idx { background: var(--color-bg); }
.matrix-table tbody tr:nth-child(even) .col-idx { background: var(--color-surface); }
.matrix-table tbody tr:hover .col-idx { background: var(--color-accent-light); }
.matrix-table tbody tr:nth-child(odd) .col-photo,
.matrix-table tbody tr:nth-child(odd) .col-name { background: var(--color-bg); }
.matrix-table tbody tr:nth-child(even) .col-photo,
.matrix-table tbody tr:nth-child(even) .col-name { background: var(--color-surface); }
.matrix-table tbody tr:hover .col-photo,
.matrix-table tbody tr:hover .col-name { background: var(--color-accent-light); }

.matrix-table .col-cat,
.matrix-table .col-color {
    text-align: left;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    min-width: 90px;
}
.matrix-table .col-color { max-width: 160px; }
.matrix-table .col-brand {
    text-align: center;
    min-width: 110px;
    max-width: 240px;
    white-space: normal;
}
.matrix-table tbody .col-brand { padding: var(--space-2) var(--space-2); }
/* Ячейка бренда — основной бренд (chip), кнопка «+N» под ним отдельной строкой,
   чтобы колонка не расширялась по ширине. */
.matrix-table .col-brand .brand-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.brand-more {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: 1.35;
    color: var(--color-text-secondary);
    background: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.brand-more:hover,
.brand-more[aria-expanded="true"] {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Бренд-чип: кликабельный pill с названием бренда. Клик фильтрует таблицу по этому
   бренду (?brand=...), повторный клик снимает (is-active state). */
.brand-chip {
    display: inline-block;
    padding: 3px 8px;
    margin: 1px 2px;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text);
    background: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
/* hover/focus только для кликабельных <a class="brand-chip"> (если будут в будущем) */
a.brand-chip:hover {
    background: var(--color-bg);
    border-color: var(--color-primary-light);
    color: var(--color-primary);
}
a.brand-chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}
.brand-chip.is-active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.matrix-table .col-num {
    /* Sans-цифры: чистый ноль без точки, у́же моноширинных. tabular-nums
       сохраняет равную ширину разрядов для выравнивания колонок. */
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-sm);
    min-width: 62px;
}
.matrix-table .col-total {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
/* Объединённая колонка: дата создания сверху, дней в продаже снизу */
.matrix-table .col-created {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.3;
}
.col-created__date { display: block; }
.col-created__days {
    display: block;
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}
/* Шапка объединённой колонки — «Создана» и «Дней» в две строки */
.matrix-table .col-created__hd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.matrix-table .col-created__hd + .col-created__hd {
    margin-top: 3px;
}
.matrix-table .col-arts {
    text-align: left;
    max-width: 280px;
    white-space: normal;
}
.matrix-table .col-photo img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-border-light);
    display: block;
    margin: 0 auto;
}
.no-photo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--color-border-light);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: var(--text-lg);
}

.name-cell__name {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}
.name-cell__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.name-cell__chips .sku-chip { margin-left: 0; }

.mp-label {
    display: inline-block;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.03em;
    color: white;
    text-transform: uppercase;
}
.mp-label--ozon { background: var(--color-ozon); }
.mp-label--wb { background: var(--color-wb); }
.mp-label--ya { background: var(--color-yandex); }


.th-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.th-sort:hover { color: white; }
/* Фокус-кольцо белое — ссылки сортировки живут на тёмной navy-шапке */
.th-sort:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.th-sort__arrow { font-size: 0.75rem; opacity: 0.85; margin-left: 2px; }
/* Неактивная стрелка sortable-колонки — подсказка «можно сортировать» */
.th-sort__arrow--dim { opacity: 0.4; font-size: 0.7rem; }
.th-sort:hover .th-sort__arrow--dim { opacity: 0.75; }

/* Заголовок колонки с кнопкой-фильтром (Категория, Бренд): название + иконка справа */
.th-with-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
.th-filter-btn {
    background: transparent;
    border: 0;
    padding: 3px;
    margin: 0;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    border-radius: var(--radius-sm);
    line-height: 0;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.th-filter-btn:hover { color: white; background: rgba(255,255,255,0.15); }
.th-filter-btn:focus-visible { outline: 2px solid white; outline-offset: 1px; color: white; }
.th-filter-btn.is-active { color: white; background: var(--color-accent); }
.th-filter-btn.is-active:hover { background: var(--color-accent); opacity: 0.88; }

/* Popover фильтра колонки — список значений с чекбоксами + поиск + Применить/Сбросить */
.col-filter-popover {
    position: absolute;
    z-index: 150;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    width: 280px;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 1;
    transform: scale(1);
    transform-origin: top left;
    transition: opacity 140ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1), display 140ms allow-discrete;
}
.col-filter-popover[hidden] { display: none; opacity: 0; transform: scale(0.96); }
@starting-style {
    .col-filter-popover:not([hidden]) { opacity: 0; transform: scale(0.96); }
}
.col-filter-popover__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg);
}
.col-filter-popover__title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.col-filter-popover__close {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    line-height: 0;
}
.col-filter-popover__close:hover { color: var(--color-text); background: var(--color-border-light); }
.col-filter-popover__search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-light);
}
.col-filter-popover__search input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.col-filter-popover__search input {
    border: 0;
    outline: 0;
    flex: 1;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--color-text);
    background: transparent;
}
.col-filter-popover__list {
    list-style: none;
    margin: 0;
    padding: var(--space-1) 0;
    overflow-y: auto;
    flex: 1;
    min-height: 80px;
}
.col-filter-popover__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
}
.col-filter-popover__option:hover { background: var(--color-bg); }
.col-filter-popover__option input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.col-filter-popover__empty {
    padding: var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.col-filter-popover__actions {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg);
    justify-content: space-between;
}
.col-filter-popover__actions .btn {
    flex: 1;
    min-height: 36px;
    justify-content: center;
}

/* Range-режим popover'а (фильтр «Дней в продаже»): 2 number-input от/до */
.col-filter-popover__range {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    flex: 1;
}
.col-filter-popover__range[hidden] { display: none; }
.col-filter-popover__range-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.col-filter-popover__range-item input {
    width: 100%;
    padding: 7px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    text-transform: none;
}
.col-filter-popover__range-item input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 0;
    border-color: var(--color-accent);
}

/* ===== MP groups — matrix thead ===== */
/* Ряд 1: mp-group pills — брендовый цвет MP */
.matrix-table thead .mp-group {
    background: var(--color-primary-hover);
    padding: var(--space-2);
}
.matrix-table thead .mp-group--wb { background: var(--color-wb); }
.matrix-table thead .mp-group--oz { background: var(--color-ozon); }
.matrix-table thead .mp-group--ya { background: var(--color-yandex-dark); }
.matrix-table thead .mp-group .mp-label { background: rgba(0,0,0,0.18); }

/* Ряды 2–3: bg-wb/oz/ya — продолжают цветную колонну вниз.
   YA = yandex-dark для AA контраста белого текста (7.1:1). */
.matrix-table thead .bg-wb { background: var(--color-wb); color: white; }
.matrix-table thead .bg-oz { background: var(--color-ozon); color: white; }
.matrix-table thead .bg-ya { background: var(--color-yandex-dark); color: white; }

/* Totals-ряд: bg-колонки наследуют те же бренд-цвета */
.matrix-table thead .matrix-table__totals .bg-wb { background: var(--color-wb); }
.matrix-table thead .matrix-table__totals .bg-oz { background: var(--color-ozon); }
.matrix-table thead .matrix-table__totals .bg-ya { background: var(--color-yandex-dark); }

/* Цветной фон ячеек по МП-группе в tbody */
.matrix-table .bg-wb { background-color: color-mix(in srgb, var(--color-wb-bg) 50%, white); }
.matrix-table .bg-oz { background-color: color-mix(in srgb, var(--color-ozon-bg) 50%, white); }
.matrix-table .bg-ya { background-color: color-mix(in srgb, var(--color-yandex-bg) 60%, white); }
.matrix-table tbody tr:hover .bg-wb { background-color: color-mix(in srgb, var(--color-wb-bg) 80%, white); }
.matrix-table tbody tr:hover .bg-oz { background-color: color-mix(in srgb, var(--color-ozon-bg) 80%, white); }
.matrix-table tbody tr:hover .bg-ya { background-color: color-mix(in srgb, var(--color-yandex-bg) 80%, white); }

/* Разделители между секциями таблицы (порядок MP: OZ → WB → YA):
   1. Между секцией sticky-info (Дней) и общими суммами (Σшт/Σ₽) — тонкая 1px
   2. Между общими суммами (Σ₽) и зоной MP-разбивки (OZ) — жирная 3px (как между MP)
   3. Между MP-группами (OZ-Σ → WB-CFG, WB-Σ → YA-CFG) — жирная 3px на .sep
   4. Между mp-group ячейками первого ряда — жирная 3px (отдельным правилом, на них нет .sep) */

/* (1) sticky-info | общие суммы */
.matrix-table thead :not(.col-total) + .col-total {
    border-left: 1px solid rgba(255,255,255,0.25);
}
.matrix-table tbody :not(.col-total) + .col-total {
    border-left: 1px solid var(--color-border);
}

/* (2) общие суммы | MP-разбивка — линия 3px проходит через все 3 ряда шапки и tbody.
   Первая MP-группа — OZ (порядок OZ → WB → YA). Явно перечисляем 3 случая для
   надёжности специфичности (в totals-ряду конкурирует `.matrix-table__totals .bg-oz`). */
.matrix-table thead .mp-group--oz,
.matrix-table thead .matrix-table__subhead .col-num.bg-oz:first-of-type,
.matrix-table thead .matrix-table__totals .col-total + .bg-oz {
    border-left: 3px solid rgba(255,255,255,0.7);
}
.matrix-table tbody .col-total + .bg-oz {
    border-left: 3px solid rgba(30,58,95,0.25);
}

/* (3) и (4) разделители MP-групп */
.matrix-table .sep { border-right: 2px solid rgba(30,58,95,0.25); }
.matrix-table thead .sep { border-right: 3px solid rgba(255,255,255,0.7) !important; }
.matrix-table thead .mp-group--wb,
.matrix-table thead .mp-group--oz { border-right: 3px solid rgba(255,255,255,0.7); }

/* Итог-колонка группы (Σ WB / Σ OZ) — жирность, тот же фон что у группы */
.matrix-table .mp-sum { font-weight: var(--weight-semibold); }
.matrix-table tbody .bg-wb.mp-sum { background-color: color-mix(in srgb, var(--color-wb-bg) 80%, white); }
.matrix-table tbody .bg-oz.mp-sum { background-color: color-mix(in srgb, var(--color-ozon-bg) 80%, white); }
.matrix-table tbody .bg-ya.mp-sum { background-color: color-mix(in srgb, var(--color-yandex-bg) 85%, white); }
.matrix-table tbody tr:hover .bg-wb.mp-sum { background-color: color-mix(in srgb, var(--color-wb-bg) 95%, white); }
.matrix-table tbody tr:hover .bg-oz.mp-sum { background-color: color-mix(in srgb, var(--color-ozon-bg) 95%, white); }
.matrix-table tbody tr:hover .bg-ya.mp-sum { background-color: color-mix(in srgb, var(--color-yandex-bg) 95%, white); }
.matrix-table .muted { color: var(--color-text-muted); }

/* ===== Полноширинные страницы (матрица / аналитика / админка): минимальные боковые отступы.
       page-header сейчас всегда full-width, поэтому override для шапки больше не нужен. ===== */
.matrix-page .page-main,
.analytics-page .page-main,
.admin-page .page-main {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3) var(--space-4);
}
/* Стабилизация ширины: при переключении вкладок promo_mode разная ширина таблиц
   не должна менять ширину page-main; html-scrollbar-gutter + width:100% + min-width:0 */
.analytics-page { min-width: 0; }
.analytics-page body, .analytics-page main { min-width: 0; }
.analytics-table-wrap { width: 100%; min-width: 0; box-sizing: border-box; }
.matrix-page .matrix-table-wrap { max-height: calc(100vh - 300px); }

/* ===== Клик по строке → курсор pointer на ячейках метрик ===== */
.matrix-row { cursor: pointer; }
/* Внутренние интерактивные элементы (.art-trigger, .sku-chip) переопределяют курсор сами */
.matrix-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* ===== Плавающая подсказка над строкой («Кликните — разбивка по товару») ===== */
.row-hint {
    position: fixed;
    z-index: 250;
    pointer-events: none;       /* не перехватывает курсор, иначе мерцание */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-text);   /* тёмный slate */
    color: white;
    border-radius: 6px;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 140ms ease, transform 140ms ease;
}
.row-hint.is-visible {
    opacity: 0.95;
    transform: translateY(0);
}
.row-hint__icon { flex-shrink: 0; }
/* Touch-устройства: hover ненадёжен — подсказку не показываем */
@media (hover: none) {
    .row-hint { display: none; }
}

/* ===== Breakdown modal (fintech) ===== */
.breakdown-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms var(--ease);
    will-change: opacity;
}
.breakdown-modal[hidden] { display: none; }
.breakdown-modal.is-open { opacity: 1; pointer-events: auto; }
.breakdown-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 37, 64, 0.45);
    /* backdrop-filter: blur тяжёлый для GPU при большой таблице позади — убран ради плавности.
       reference (Claude Design) тоже использует только плоский overlay без blur. */
}
.breakdown-modal__panel {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(10,37,64,0.22), 0 4px 12px rgba(10,37,64,0.06);
    max-width: 95vw;
    max-height: 92vh;
    width: max-content;
    min-width: min(480px, 92vw);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(12px) scale(0.98);
    transition: transform 240ms var(--ease);
}
.breakdown-modal.is-open .breakdown-modal__panel { transform: translateY(0) scale(1); }
.breakdown-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: 0;
    line-height: 1;
    color: var(--ink-4);
    cursor: pointer;
    z-index: 1;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-2);
    transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.breakdown-modal__close:hover { color: var(--ink-1); background: var(--bg-muted); }
.breakdown-modal__close:focus-visible { outline: 2px solid var(--ink-1); outline-offset: -2px; }
.breakdown-modal__body {
    overflow: auto;
    padding: 16px 24px 18px;
}

/* Header модалки: Thumb 48×48 + название + цвет + бейдж артикулов */
.breakdown-modal__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 60px 14px 24px;
    border-bottom: 1px solid var(--hair);
    background: #FFFFFF;
}
.breakdown-modal__header-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    display: grid;
    place-items: center;
}
/* SVG-силуэт (fallback): grid + place-items центрует */
.breakdown-modal__header-thumb > svg {
    width: 32px;
    height: 32px;
    display: block;
}
/* Фото: img абсолютно перекрывает контейнер, object-fit: cover центрует кадр */
.breakdown-modal__header-thumb > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.breakdown-modal__header-info {
    flex: 1;
    min-width: 0;
}
.breakdown-modal__header-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.breakdown-modal__header-title > span:first-child {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-1);
    letter-spacing: -0.015em;
}
.breakdown-modal__header-color {
    font-size: 13px;
    color: var(--ink-3);
    font-weight: 400;
}

/* Счётчик в табе «Запросы (WB N · OZ M)» */
.modal-tab__count {
    display: inline-block;
    margin-left: 4px;
    font-size: 11.5px;
    color: var(--ink-4);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* === scrollbar-gutter: резервирует место под скроллбар, чтобы открытие модалки
        не сдвигало контент вправо при body {overflow:hidden} === */
html { scrollbar-gutter: stable; }


/* ===== Export modal (прогресс и лог скачивания Excel) ===== */
.export-modal {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms var(--ease);
    will-change: opacity;
}
.export-modal[hidden] { display: none; }
.export-modal.is-open { opacity: 1; pointer-events: auto; }
.export-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 37, 64, 0.45);
}
.export-modal__panel {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(10,37,64,0.22);
    width: min(560px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: translateY(12px) scale(0.98);
    transition: transform 240ms var(--ease);
    overflow: hidden;
}
.export-modal.is-open .export-modal__panel { transform: translateY(0) scale(1); }

.export-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hair);
}
.export-modal__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-1);
    letter-spacing: -0.005em;
}
.export-modal__close {
    background: transparent;
    border: 0;
    color: var(--ink-4);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--r-2);
    transition: background 120ms var(--ease), color 120ms var(--ease);
}
.export-modal__close:hover { background: var(--bg-muted); color: var(--ink-1); }

.export-modal__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}
.export-modal__progress {
    width: 100%;
    height: 8px;
    background: var(--bg-muted);
    border-radius: 4px;
    overflow: hidden;
}
.export-modal__progress-bar {
    height: 100%;
    width: 0%;
    background: var(--ink-1);
    border-radius: 4px;
    transition: width 220ms var(--ease), background 120ms var(--ease);
}
.export-modal__progress-bar--error { background: var(--neg); }
.export-modal__progress-text {
    font-size: 12.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.export-modal__log {
    background: var(--bg-tint);
    border: 1px solid var(--hair-soft);
    border-radius: var(--r-2);
    padding: 10px 12px;
    max-height: 280px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-2);
}
.export-modal__log-line {
    display: flex;
    gap: 10px;
    padding: 1px 0;
}
.export-modal__log-ts {
    color: var(--ink-5);
    flex-shrink: 0;
    font-feature-settings: 'tnum';
}
.export-modal__log-msg {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}

.breakdown__loading {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spinner-rotate 0.7s linear infinite;
}
@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}
.breakdown__title {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-right: var(--space-8);
    flex-wrap: wrap;
}
.breakdown__name {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.breakdown__color {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    text-transform: lowercase;
}
.breakdown__count {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    background: var(--color-border-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.breakdown-table-wrap {
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.breakdown-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: var(--text-sm);
}
.breakdown-table th,
.breakdown-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Breakdown: артикул/размер базовый, числовые столбцы — крупнее */
.breakdown-table tbody td { font-size: var(--text-base); }
.breakdown-table tbody .bg-wb,
.breakdown-table tbody .bg-oz,
.breakdown-table tbody .bg-ya,
.breakdown-table tbody .col-total { font-size: var(--text-lg); }
/* ===== Breakdown table — header =====
   Тот же паттерн что у matrix-table:
   - Горизонтальная линия 1px rgba(white,0.18) между уровнями
   - Totals: верхняя линия 2px rgba(white,0.35)
   - Вертикальные линии ТОЛЬКО на .sep (граница последней колонки каждой MP-группы)
   - YA = yandex-dark (#92400E) для AA-контраста белого текста
   Без sticky (модалка скроллится внутри) */
.breakdown-table thead th,
.breakdown-table thead td {
    background: var(--color-primary);
    color: white;
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: none;
    border-top: none;
    height: 32px;
    line-height: 1;
}
/* Ряд 1 — mp-group: брендовый цвет каждого MP */
.breakdown-table thead .mp-group--wb { background: var(--color-wb); }
.breakdown-table thead .mp-group--oz { background: var(--color-ozon); }
.breakdown-table thead .mp-group--ya { background: var(--color-yandex-dark); }
.breakdown-table thead .mp-group .mp-label { background: rgba(0,0,0,0.18); }

/* Ряды subhead и sub-subhead: фон navy-light. Линий между mp-group → subhead → sub-subhead НЕТ.
   Это убирает «рваные» линии на rowspan-Σ-ячейках и даёт чистые цветные колонны. */
.breakdown-table__subhead th {
    background: var(--color-primary-light);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    padding: 4px var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Цветные колонны в subhead/sub-subhead */
.breakdown-table thead .bg-wb { background: var(--color-wb); color: white; }
.breakdown-table thead .bg-oz { background: var(--color-ozon); color: white; }
.breakdown-table thead .bg-ya { background: var(--color-yandex-dark); color: white; }

/* Totals-ряд: ЕДИНСТВЕННАЯ горизонтальная линия в шапке — 2px сплошная белая.
   Идёт по всей ширине: в totals rowspan'ов нет, линия не разорвётся. */
.breakdown-table thead .breakdown-table__totals th,
.breakdown-table thead .breakdown-table__totals td {
    background: var(--color-primary-light);
    border-top: 2px solid rgba(255,255,255,0.55);
}
.breakdown-table thead .breakdown-table__totals .bg-wb { background: var(--color-wb); }
.breakdown-table thead .breakdown-table__totals .bg-oz { background: var(--color-ozon); }
.breakdown-table thead .breakdown-table__totals .bg-ya { background: var(--color-yandex-dark); }
.breakdown-table__totals th[scope="row"] {
    text-align: left;
    padding-left: var(--space-3);
}

/* Разделители — тот же паттерн что у matrix-table:
   1. sticky-info (Артикул/Размер) | общие суммы (Σшт/Σ₽): 1px
   2. общие суммы | MP-разбивка: 3px
   3-4. между MP-группами: 3px на .sep + на mp-group--wb/oz border-right */

/* (1) sticky-info | общие суммы */
.breakdown-table thead :not(.col-total) + .col-total {
    border-left: 1px solid rgba(255,255,255,0.25);
}
.breakdown-table tbody :not(.col-total) + .col-total {
    border-left: 1px solid var(--color-border);
}

/* (2) общие суммы | MP-разбивка — линия 3px проходит через все ряды шапки и tbody.
   Перечисляем 3 случая для надёжности специфичности. */
.breakdown-table thead .mp-group--wb,
.breakdown-table thead .breakdown-table__subhead .bg-wb:first-of-type,
.breakdown-table thead .breakdown-table__totals .col-total + .bg-wb {
    border-left: 3px solid rgba(255,255,255,0.7);
}
.breakdown-table tbody .col-total + .bg-wb {
    border-left: 3px solid rgba(30,58,95,0.25);
}

/* (3) и (4) между MP-группами */
.breakdown-table .sep { border-right: 2px solid rgba(30,58,95,0.25); }
.breakdown-table thead .sep { border-right: 3px solid rgba(255,255,255,0.7) !important; }
.breakdown-table thead .mp-group--wb,
.breakdown-table thead .mp-group--oz { border-right: 3px solid rgba(255,255,255,0.7); }

/* tbody: цветной фон ячеек по МП-группе */
.breakdown-table tbody .bg-wb { background-color: color-mix(in srgb, var(--color-wb-bg) 50%, white); }
.breakdown-table tbody .bg-oz { background-color: color-mix(in srgb, var(--color-ozon-bg) 50%, white); }
.breakdown-table tbody .bg-ya { background-color: color-mix(in srgb, var(--color-yandex-bg) 60%, white); }
.breakdown-table tbody tr:hover .bg-wb { background-color: color-mix(in srgb, var(--color-wb-bg) 80%, white); }
.breakdown-table tbody tr:hover .bg-oz { background-color: color-mix(in srgb, var(--color-ozon-bg) 80%, white); }
.breakdown-table tbody tr:hover .bg-ya { background-color: color-mix(in srgb, var(--color-yandex-bg) 80%, white); }
/* FBO-ячейка — rowspan на все размеры артикула, выделяем визуально что это
   агрегированное число артикул-уровня (не привязано к строке размера). */
.breakdown-table tbody .fbo-merged {
    vertical-align: middle;
    font-weight: var(--weight-semibold);
    border-left: 1px dashed var(--color-border);
    border-right: 1px dashed var(--color-border);
}
.breakdown-table .col-art {
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    white-space: nowrap;
}
.breakdown-table .col-size {
    text-align: center;
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 56px;
}
.breakdown-table .col-art code {
    font-family: inherit;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}
.sku-chip {
    display: inline-block;
    padding: 2px 6px;
    margin-left: 4px;
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    border-radius: var(--radius-sm);
    vertical-align: middle;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.sku-chip:hover { opacity: 0.88; transform: translateY(-1px); }
.sku-chip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sku-chip--wb { background: var(--color-wb); }
.sku-chip--oz { background: var(--color-ozon); }
/* YA: ~10px bold uppercase. На обычном --color-yandex белый текст 3.36:1 не AA.
   Берём dark-вариант (#B45309) — ~5.1:1, читаемо в маленьком размере. */
.sku-chip--ya { background: var(--color-yandex-dark); }
.breakdown-table .col-total {
    background: var(--color-bg);
    font-weight: var(--weight-semibold);
}
.breakdown-table thead .col-total { background: var(--color-primary); color: white; }
.breakdown-table .muted { color: var(--color-text-muted); }
.breakdown-table tbody tr:last-child td { border-bottom: 0; }

.matrix-table .col-total {
    background: var(--color-bg);
    font-weight: var(--weight-semibold);
}
.matrix-table thead .col-total {
    background: var(--color-primary);
    color: white;
}

/* ===== Кнопка-триггер артикулов в name-cell ===== */
.art-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 8px;
    background: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.art-trigger:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.art-trigger[aria-expanded="true"] {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* ===== Поповер артикулов ===== */
.art-popover {
    position: absolute;
    z-index: 100;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    min-width: 360px;
    max-width: 520px;
    max-height: 420px;
    overflow-y: auto;
    opacity: 1;
    transform: scale(1);
    transform-origin: top left;
    transition: opacity 140ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1), display 140ms allow-discrete;
}
.art-popover[hidden] { display: none; opacity: 0; transform: scale(0.96); }
@starting-style {
    .art-popover:not([hidden]) { opacity: 0; transform: scale(0.96); }
}
.art-popover__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}
.art-popover__close {
    background: transparent;
    border: 0;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.art-popover__close:hover { color: var(--color-text); background: var(--color-border-light); }
.art-popover__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.art-popover__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(120px, 1fr);
    gap: 4px var(--space-2);
}
.art-popover__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
}
.art-popover__list code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text);
    flex: 1;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.art-copy {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    width: 22px;
    height: 22px;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1;
    flex-shrink: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.art-copy:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.art-copy:active { transform: scale(0.9); }
.art-copy.copied {
    background: var(--color-success);
    color: white;
    border-color: var(--color-success);
    transform: scale(1.05);
}
.art-copy.flash { background: var(--color-accent-light); color: var(--color-accent); }

/* ===== Toast уведомление о копировании ===== */
.art-toast {
    position: fixed;
    left: 50%;
    bottom: var(--space-6);
    transform: translateX(-50%) translateY(20px);
    background: var(--color-text);
    color: white;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
    z-index: 1000;
    max-width: 80vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.art-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.art-toast--err {
    background: var(--color-danger);
}
.art-popover__copy-all {
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--color-primary);
    color: white;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    font-family: inherit;
}
.art-popover__copy-all:hover { background: var(--color-primary-hover); }
.art-popover__copy-all.copied { background: var(--color-success); }

/* ===== Поповер брендов (наследует .art-popover) ===== */
.brand-popover { min-width: 180px; max-width: 280px; }
.brand-popover__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.brand-popover__list li { display: flex; }
.brand-popover__list .brand-chip { width: 100%; text-align: center; }

/* ===== Responsive ===== */
/* Стандартный набор брейкпойнтов 1024 / 768 / 480 — выровнено с design-system-рекомендацией */
@media (max-width: 1024px) {
    .page-main { max-width: none; }
    .page-header__row { max-width: none; }
    .matrix-table-wrap { max-height: calc(100vh - 320px); }
}
@media (max-width: 768px) {
    .page-header { padding: var(--space-3) var(--space-4); }
    .page-header h1 { font-size: var(--text-lg); }
    .header-tabs { flex-basis: 100%; margin: var(--space-2) 0 0; order: 3; }
    .page-main { padding: var(--space-4); }
    /* .stat-cards основной display:flex с wrap; на 768px распределяем 2-в-ряд через flex-basis */
    .stat-cards { gap: var(--space-3); }
    .stat-cards > .stat-card { flex: 1 1 calc(50% - var(--space-3)); min-width: 0; }
    .chart-container { height: 300px; }
    .filter-pills { gap: var(--space-1); }
    .filter-pill { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }
    .period-row { grid-template-columns: 1fr; gap: var(--space-1); }
    .matrix-table-wrap { max-height: 60vh; }
    /* На узких экранах заголовок не должен сжиматься (иначе текст ломается по словам). */
    .page-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
}
@media (max-width: 480px) {
    .stat-cards > .stat-card { flex: 1 1 100%; }
    .month-tab { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); min-height: 40px; }
    .filter-pill { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); min-height: 40px; }
}

/* ===== Reduced motion ===== */
/* Уважаем системную настройку: отключаем все длинные анимации/transition, оставляем
   мгновенный отклик. Spinner превращается в статичный круг. Toast появляется без slide. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .spinner {
        border-top-color: var(--color-accent);
        animation: none !important;
    }
    .art-toast--show {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ===== Аналитика — внешний трафик ===== */
/* На странице аналитики все 4 KPI-карточки одного типа (center) — выравниваем в grid 4×1,
   чтобы ширина не «прыгала» от длины значений (как было с flex-wrap по контенту). */
.analytics-page .stat-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 1024px) {
    .analytics-page .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .analytics-page .stat-cards { grid-template-columns: 1fr; }
}

.analytics-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-3) 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--weight-semibold);
}
/* Отступ для 2-го и далее подзаголовка на странице */
.analytics-subtitle--spaced { margin-top: var(--space-6); }
.analytics-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    margin-top: var(--space-4);
}
/* Панель с кнопкой выгрузки над таблицами аналитики */
.analytics-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: var(--space-3);
}
.analytics-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
}
.analytics-table th,
.analytics-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}
/* Фон на ряду thead — закрывает субпиксельные щели между sticky-ячейками при скролле */
.analytics-table thead tr { background: var(--color-primary); }
.analytics-table thead th {
    background: var(--color-primary);
    color: white;
    font-weight: var(--weight-semibold);
    position: sticky;
    top: 0;
    z-index: 2;
}
.analytics-table tbody td { font-size: var(--text-base); }
.analytics-table tbody tr:hover { background: var(--color-border-light); }
.analytics-table tbody tr:last-child td { border-bottom: 0; }
.analytics-table .col-idx {
    color: var(--color-text-muted);
    width: 40px;
    font-variant-numeric: tabular-nums;
}
.analytics-table .col-key {
    text-align: left;
    font-weight: var(--weight-medium);
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.analytics-table .col-num {
    font-variant-numeric: tabular-nums;
}
.analytics-table .col-muted {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}
/* Колонка «Товар» — перенос в две строки, если не помещается */
.analytics-table .col-product {
    text-align: left;
    max-width: 240px;
    white-space: normal;
}
.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.analytics-meta {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ===== Вкладки внутри breakdown-модалки (Разбивка / Запросы) ===== */
.modal-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--hair);
    margin-bottom: 16px;
    padding: 0 4px;
}
.modal-tab {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-3);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.005em;
    transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.modal-tab:hover { color: var(--ink-1); }
.modal-tab.is-active {
    color: var(--ink-1);
    border-bottom-color: var(--ink-1);
    font-weight: 600;
}
.modal-tab:focus-visible { outline: 2px solid var(--ink-1); outline-offset: -2px; border-radius: 4px; }
.modal-tabpanel[hidden] { display: none; }

/* ===== Таблица запросов ===== */
.queries-section { margin-bottom: var(--space-5); }
.queries-section:last-child { margin-bottom: 0; }
.queries-section__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.queries-section__meta {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.queries-table .col-query {
    text-align: left;
    white-space: normal;
    min-width: 220px;
    max-width: 360px;
    font-size: var(--text-sm);
}
.queries-table thead .col-query { color: white; }

/* Ограничение высоты ~10 строк + вертикальная прокрутка; шапка sticky при скролле */
.queries-table-wrap {
    max-height: 440px;
    overflow-y: auto;
}
.queries-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
/* Фон на ряду шапки — закрывает субпиксельные щели между sticky-ячейками
   (иначе сквозь зазоры просвечивает белый фон таблицы). */
.queries-table thead tr { background: var(--color-primary); }

/* Лёгкий фон таблицы в оттенок бренд-цвета МП */
.queries-table--wb tbody td { background: color-mix(in srgb, var(--color-wb) 7%, white); }
.queries-table--oz tbody td { background: color-mix(in srgb, var(--color-ozon) 7%, white); }
.queries-table--wb tbody tr:hover td { background: color-mix(in srgb, var(--color-wb) 15%, white); }
.queries-table--oz tbody tr:hover td { background: color-mix(in srgb, var(--color-ozon) 15%, white); }

/* Сортируемые заголовки таблицы запросов (клик → сортировка, JS в matrix.html) */
.queries-table th.q-sort {
    cursor: pointer;
    user-select: none;
}
.queries-table th.q-sort:hover { background: var(--color-primary-light); }
.queries-table th.q-sort:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.queries-table th.q-sort[aria-sort] .th-sort__arrow--dim { opacity: 0.9; }

/* ===== Вкладка «Промокоды WB CFG» ===== */
/* Refresh-bar WB — кнопка «Обновить данные» + статус-индикатор (ref: HANDOFF §4.4) */
.promo-wb-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 0 16px;
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: var(--r-3);
}
.promo-wb-week {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-3);
}
.promo-wb-week select {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--hair-strong);
    border-radius: var(--r-2);
    font-family: inherit;
    font-size: 13px;
    background: #FFFFFF;
    color: var(--ink-1);
}
/* Inline-edit имени акции — input без рамки, рамка появляется на focus */
.promo-wb-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.promo-wb-name input[type="text"] {
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--r-2);
    font-family: inherit;
    font-size: 13px;
    min-width: 0;
    flex: 1;
    color: var(--ink-1);
    background: transparent;
    transition: border-color 120ms var(--ease), background 120ms var(--ease), box-shadow 120ms var(--ease);
}
.promo-wb-name input[type="text"]:hover { background: var(--bg-muted); }
.promo-wb-name input[type="text"]:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--ink-1);
    box-shadow: 0 0 0 3px rgba(10,37,64,0.08);
}
.promo-wb-name input[type="text"]::placeholder { color: var(--ink-5); font-style: italic; }
.promo-wb-name button {
    display: inline-flex;
    align-items: center;
    padding: 5px 7px;
    border: 1px solid transparent;
    border-radius: var(--r-2);
    background: transparent;
    color: var(--ink-4);
    cursor: pointer;
    line-height: 0;
    transition: background 120ms var(--ease), color 120ms var(--ease);
}
.promo-wb-name button:hover {
    background: var(--pos-tint);
    color: var(--pos);
}
.promo-wb-hint {
    font-size: 12px;
    color: var(--ink-4);
    flex: 1;
    min-width: 0;
}
/* Статус-окно фоновой выгрузки финотчёта WB */
.wb-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--hair);
    border-radius: var(--r-2);
    font-size: 12.5px;
    font-weight: 500;
    background: #FFFFFF;
}
.wb-status[hidden] { display: none; }
.wb-status--running {
    background: var(--accent-tint);
    color: var(--ink-1);
    border-color: color-mix(in srgb, var(--ink-1) 18%, transparent);
}
.wb-status--done {
    background: var(--pos-tint);
    color: var(--pos);
    border-color: color-mix(in srgb, var(--pos) 25%, transparent);
}
.wb-status--error {
    background: var(--neg-tint);
    color: var(--neg);
    border-color: color-mix(in srgb, var(--neg) 25%, transparent);
}
/* Строка «Итого» в таблицах аналитики */
.analytics-table__totals td {
    border-top: 2px solid var(--color-border);
    background: var(--color-bg);
    font-weight: var(--weight-semibold);
}
/* ==== Внешний трафик WB CFG — двухрядная шапка, группа суб-колонок «Платформа» ==== */
.analytics-table--tw thead tr { background: var(--color-primary); }
.analytics-table--tw thead tr.tw-subhead { background: var(--color-primary-light); }
.analytics-table--tw thead th { height: 38px; }
.analytics-table--tw thead .tw-subhead th {
    top: 38px;
    background: var(--color-primary-light);
    font-weight: var(--weight-medium);
}
/* боковые границы блока суб-колонок «Платформа» */
.analytics-table--tw .tw-group,
.analytics-table--tw .tw-group-start { border-left: 1px solid var(--color-border-light); }
.analytics-table--tw .tw-group,
.analytics-table--tw .tw-group-end { border-right: 1px solid var(--color-border-light); }
.analytics-table--tw thead .tw-group,
.analytics-table--tw thead .tw-group-start,
.analytics-table--tw thead .tw-group-end {
    border-left-color: rgba(255, 255, 255, 0.28);
    border-right-color: rgba(255, 255, 255, 0.28);
}
/* .notice — базовый класс уже есть; --error переопределяет только цвета */
.notice--error {
    background: var(--color-danger-bg);
    color: var(--color-danger-muted);
    border-color: var(--color-danger);
}

/* ===== Страницы входа / смены пароля ===== */
.auth-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg-app);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 1px 2px rgba(10,37,64,0.04);
    position: relative;
}
.auth-card::before {
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 12l3-3 2.5 1.5L13 4' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
        linear-gradient(135deg, var(--ink-1) 0%, var(--accent-2) 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px, 100% 100%;
    margin-bottom: 4px;
}
.auth-card__title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-1);
}
.auth-card__sub {
    margin: -16px 0 4px;
    font-size: 13.5px;
    color: var(--ink-3);
}
.auth-error {
    padding: 10px 14px;
    background: var(--neg-tint);
    color: var(--neg);
    border: 1px solid color-mix(in srgb, var(--neg) 25%, transparent);
    border-radius: var(--r-2);
    font-size: 13px;
    font-weight: 500;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
    text-transform: none;
    letter-spacing: 0;
}
.auth-field input {
    padding: 0 12px;
    height: 40px;
    border: 1px solid var(--hair-strong);
    border-radius: var(--r-2);
    font-family: inherit;
    font-size: 14px;
    color: var(--ink-1);
    background: #FFFFFF;
    text-transform: none;
    letter-spacing: 0;
    transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.auth-field input:focus-visible,
.auth-field input:focus {
    outline: none;
    border-color: var(--ink-1);
    box-shadow: 0 0 0 3px rgba(10,37,64,0.08);
}
.auth-submit {
    justify-content: center;
    height: 40px;
    font-size: 14px;
    margin-top: 4px;
}
.auth-back {
    font-size: var(--text-sm);
    color: var(--color-accent);
    text-decoration: none;
}
.auth-back:hover { text-decoration: underline; }
/* ===== Админка пользователей ===== */
.admin-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 24px 0 12px;
}
.admin-subtitle:first-of-type { margin-top: 4px; }
.admin-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: var(--r-4);
    box-shadow: none;
}
.admin-add input[type="text"],
.admin-add input[type="password"] {
    min-height: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--hair-strong);
    border-radius: var(--r-2);
    font-family: inherit;
    font-size: 13px;
    color: var(--ink-1);
    background: #FFFFFF;
    box-sizing: border-box;
    transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.admin-add input:focus {
    outline: none;
    border-color: var(--ink-1);
    box-shadow: 0 0 0 3px rgba(10,37,64,0.08);
}
.admin-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
}
.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--hair);
    border-radius: var(--r-4);
    background: #FFFFFF;
}
.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.admin-table th,
.admin-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--hair-soft);
    text-align: left;
    vertical-align: top;
}
.admin-table thead th {
    background: var(--bg-tint);
    color: var(--ink-4);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--hair);
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table__name { font-weight: var(--weight-semibold); }
.admin-row-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.admin-row-form:last-child { margin-bottom: 0; }

/* Контейнер «Сбросить + Удалить» в одной строке без переносов */
.admin-row-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-3);
}
.admin-row-actions .admin-row-form {
    margin-bottom: 0;
    flex-wrap: nowrap;
}
.admin-row-actions .admin-row-form:first-child {
    flex: 1 1 auto;     /* форма сброса забирает оставшееся, сжимается при необходимости */
    min-width: 0;
}
.admin-row-actions .admin-row-form:last-child {
    flex: 0 0 auto;     /* «Удалить» — фиксированной ширины, не сжимается */
}

.admin-row-form input[type="text"],
.admin-row-form input[type="password"] {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-surface);
    box-sizing: border-box;
}
.admin-row-form input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }

/* Колонки админ-таблицы: задаём ширины, чтобы секции не выдавливали остальные */
.admin-table__col-name     { width: 180px; }
.admin-table__col-sections { width: auto; min-width: 320px; }
.admin-table__col-pwd      { width: 460px; }

/* ===== Password field с тогглом «показать/скрыть» ===== */
.pw-field {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    flex: 1 1 180px;
    min-width: 0;       /* позволяет сжиматься внутри flex-родителя */
}
.pw-field input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding-right: 40px !important;
}
.pw-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}
.pw-toggle:hover { color: var(--color-text); background: var(--color-border-light); }
.pw-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
/* [hidden] не скрывает SVG если где-то задано display — форсим */
.pw-toggle svg[hidden] { display: none; }

/* ===== Flash-сообщения ===== */
.flash-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.flash {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    font-size: var(--text-sm);
    color: var(--color-text);
    animation: flash-in 200ms ease;
}
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.flash--success {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success-muted);
}
.flash--error {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger-muted);
}
.flash__text { flex: 1 1 auto; line-height: 1.45; }
.flash__close {
    background: transparent;
    border: 0;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0 4px;
}
.flash__close:hover { opacity: 1; }


/* ===== Меню пользователя в шапке (на белом topbar) ===== */
.page-header__user {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--ink-3);
}
.page-header__username {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
}
.page-header__username::before {
    content: attr(data-initials);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-muted);
    border: 1px solid var(--hair);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
    font-family: var(--font-sans);
    letter-spacing: 0;
}
.page-header__link {
    font-size: 12.5px;
    color: var(--ink-4);
    text-decoration: none;
    white-space: nowrap;
    transition: color 120ms var(--ease);
}
.page-header__link:hover { color: var(--ink-1); text-decoration: none; }
.page-header__link:focus-visible { outline: 2px solid var(--ink-1); outline-offset: 2px; border-radius: 3px; }


/* =================================================================== */
/* === V2 — Sidebar layout + продуктовые карточки                  === */
/* =================================================================== */

/* App shell — flex wrapper с sidebar + main column */
.app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bg-app);
}
.app-shell__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* === Sidebar (232px persistent left nav) === */
.sidebar {
    width: 232px;
    background: #FBFBFC;
    border-right: 1px solid var(--hair);
    padding: 18px 14px;
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 18px;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-1);
    letter-spacing: -0.01em;
    text-decoration: none;
}
.sidebar__brand-mark {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--ink-1) 0%, var(--accent-2) 100%);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 12l3-3 2.5 1.5L13 4' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
        linear-gradient(135deg, var(--ink-1) 0%, var(--accent-2) 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px, 100% 100%;
    flex-shrink: 0;
}
.sidebar__group {
    margin-bottom: 14px;
}
.sidebar__title {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 0 10px;
    margin-bottom: 6px;
}
.sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--r-2);
    color: var(--ink-2);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms var(--ease), color 120ms var(--ease);
    line-height: 1;
}
.sidebar__link:hover { background: var(--bg-muted); color: var(--ink-1); }
.sidebar__link.is-active {
    background: var(--ink-1);
    color: #FFFFFF;
}
.sidebar__link.is-active .sidebar__link-count { color: rgba(255,255,255,0.7); }
.sidebar__link svg { flex-shrink: 0; opacity: 0.85; }
.sidebar__link-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.sidebar__footer {
    margin-top: auto;
    padding: 12px 10px;
    border-top: 1px solid var(--hair);
    font-size: 11.5px;
    color: var(--ink-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sidebar__footer-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sidebar__user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 0 -4px;
    border-radius: var(--r-2);
    background: var(--bg-muted);
}
.sidebar__user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--hair);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
    flex-shrink: 0;
}
.sidebar__user-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.sidebar__user-logout {
    color: var(--ink-4);
    text-decoration: none;
    padding: 4px;
    border-radius: 3px;
    line-height: 0;
    transition: color 120ms var(--ease), background 120ms var(--ease);
}
.sidebar__user-logout:hover { color: var(--neg); background: var(--neg-tint); }

/* === Status dot (зелёная точка sync) === */
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pos);
    display: inline-block;
    box-shadow: 0 0 0 3px var(--pos-tint);
}

/* === Sub-header (V2 top bar в main column) === */
.subheader {
    height: 56px;
    background: #FFFFFF;
    border-bottom: 1px solid var(--hair);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 40;
}
.subheader__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-1);
}
.subheader__divider {
    width: 1px;
    height: 16px;
    background: var(--hair);
}
.subheader__context {
    font-size: 13px;
    color: var(--ink-3);
}
.subheader__spacer { flex: 1; min-width: 0; }
.subheader__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-muted);
    border: 1px solid var(--hair);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
}

/* === Search (search box с лупой и ⌘K kbd) === */
.search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--hair-strong);
    border-radius: var(--r-2);
    background: #FFFFFF;
    color: var(--ink-4);
    font-size: 13px;
    min-width: 240px;
    transition: border-color 120ms var(--ease);
}
.search:focus-within { border-color: var(--ink-1); color: var(--ink-1); }
.search input {
    border: 0;
    outline: 0;
    flex: 1;
    background: transparent;
    font: inherit;
    color: var(--ink-1);
    min-width: 0;
    font-family: var(--font-sans);
}
.search input::placeholder { color: var(--ink-5); }
.kbd {
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 2px 5px;
    border-radius: 3px;
    background: var(--bg-muted);
    color: var(--ink-4);
    border: 1px solid var(--hair);
}

/* === Segmented control (.subheader/.card-head) === */
.segmented {
    display: inline-flex;
    padding: 3px;
    background: var(--bg-muted);
    border-radius: var(--r-3);
    gap: 2px;
}
.segmented__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-3);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 120ms var(--ease), color 120ms var(--ease);
    white-space: nowrap;
    text-decoration: none;
}
.segmented__btn:hover { color: var(--ink-1); }
.segmented__btn.is-active {
    background: #FFFFFF;
    color: var(--ink-1);
    box-shadow: 0 0 0 1px var(--hair) inset, 0 1px 1px rgba(10,37,64,0.04);
    font-weight: 600;
}

/* === Page chrome (V2 main area) === */
.page-v2 {
    flex: 1;
    overflow: auto;
    padding: 20px 24px 32px;
    background: var(--bg-app);
}

/* === Card head/body (V2 cards) === */
.card__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--hair);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-1);
    letter-spacing: -0.005em;
}
.card__body {
    padding: 18px 20px;
}
.card__body--flush { padding: 0; }

/* === Hero card (4-cell + chart) === */
.hero-card {
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: var(--r-4);
    overflow: hidden;
    margin-bottom: 16px;
}
.hero-card__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--hair);
}
.hero-card__cell {
    padding: 22px 24px;
    border-right: 1px solid var(--hair);
    min-width: 0;
}
.hero-card__cell:last-child { border-right: 0; }
.hero-card__cell--lead { padding: 24px 28px; }

.hero-card__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.hero-card__big {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
}
.hero-card__big-num {
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum', 'ss01';
}
.hero-card__big-unit {
    font-size: 18px;
    color: var(--ink-3);
    font-weight: 500;
}
.hero-card__value {
    margin-top: 10px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum', 'ss01';
}
.hero-card__sub {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--ink-4);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.hero-card__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--pos-tint);
    color: var(--pos);
    font-variant-numeric: tabular-nums;
}
.hero-card__delta--neg { background: var(--neg-tint); color: var(--neg); }
.hero-card__delta--flat { background: var(--bg-muted); color: var(--ink-3); }
.hero-card__chart { padding: 20px 28px 24px; }

@media (max-width: 1100px) {
    .hero-card__grid { grid-template-columns: 1fr 1fr; }
    .hero-card__cell { border-right: 0; border-bottom: 1px solid var(--hair); }
    .hero-card__cell:nth-child(odd) { border-right: 1px solid var(--hair); }
}
@media (max-width: 640px) {
    .hero-card__grid { grid-template-columns: 1fr; }
    .hero-card__cell { border-right: 0; }
}

/* === MP-cards (3 продуктовые карточки маркетплейсов) === */
.mp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 1100px) {
    .mp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .mp-grid { grid-template-columns: 1fr; }
}
.mp-card {
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: var(--r-4);
    overflow: hidden;
    transition: border-color 150ms var(--ease);
}
.mp-card:hover { border-color: var(--hair-strong); }
.mp-card__head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--hair);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mp-card__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mp-card__brand-chip {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.mp-card__brand-chip--oz { background: var(--oz); }
.mp-card__brand-chip--wb { background: var(--wb); }
.mp-card__brand-chip--ya { background: var(--ya); }
.mp-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-1);
}
.mp-card__body { padding: 18px 20px; }
.mp-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.mp-card__total {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.mp-card__revenue {
    font-size: 12.5px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}
.mp-card__spark { width: 100%; height: 40px; display: block; margin-top: 6px; }
.mp-card__stores {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mp-card__store {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12.5px;
    padding: 4px 0;
}
.mp-card__store-name { color: var(--ink-2); }
.mp-card__store-stats {
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* === Badge === */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: 500;
    background: var(--bg-muted);
    color: var(--ink-3);
    line-height: 1.5;
}
.badge--oz { background: var(--oz-tint); color: var(--oz); }
.badge--wb { background: var(--wb-tint); color: var(--wb); }
.badge--ya { background: var(--ya-tint); color: var(--ya); }
.badge--pos { background: var(--pos-tint); color: var(--pos); }
.badge--neg { background: var(--neg-tint); color: var(--neg); }

/* === Dot (МП индикаторы) === */
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
}
.dot--oz { background: var(--oz); }
.dot--wb { background: var(--wb); }
.dot--ya { background: var(--ya); }

/* === Share bar (mini-bar для долей в таблицах) === */
.share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 120px;
}
.share__bar {
    flex: 1;
    height: 4px;
    background: var(--hair-soft);
    border-radius: 2px;
    overflow: hidden;
    min-width: 50px;
}
.share__fill {
    height: 100%;
    border-radius: 2px;
    background: var(--ink-2);
}
.share__fill--oz { background: var(--oz); }
.share__fill--wb { background: var(--wb); }
.share__fill--ya { background: var(--ya); }
.share__pct {
    font-size: 11.5px;
    color: var(--ink-4);
    width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* === Sparkline (SVG) === */
.spark { display: block; }
.spark__line {
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.spark__fill { opacity: 1; }
.hero-card__spark {
    width: 100%;
    max-width: 180px;
    height: 32px;
    margin-top: 14px;
}
.mp-card__spark {
    width: 100%;
    height: 40px;
    display: block;
    margin: 12px 0 8px;
}

/* === Categories table (V2) === */
.cat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cat-table thead th {
    text-align: left;
    font-weight: 500;
    color: var(--ink-4);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 18px;
    border-bottom: 1px solid var(--hair);
    background: var(--bg-tint);
    white-space: nowrap;
}
.cat-table tbody td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--hair-soft);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.cat-table tbody tr:last-child td { border-bottom: 0; }
.cat-table tbody tr:hover td { background: var(--bg-tint); }
.cat-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cat-table .muted { color: var(--ink-4); }

/* === Buttons (fintech .btn) === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--r-2);
    border: 1px solid var(--hair-strong);
    background: #FFFFFF;
    color: var(--ink-1);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms var(--ease), border-color 120ms var(--ease);
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover { background: var(--bg-muted); }
.btn--primary {
    background: var(--ink-1);
    color: white;
    border-color: var(--ink-1);
}
.btn--primary:hover { background: #06192E; }
.btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--ink-3);
}
.btn--ghost:hover { background: var(--bg-muted); color: var(--ink-1); }
.btn--sm { height: 28px; font-size: 12.5px; padding: 0 10px; }


/* =================================================================== */
/* === Thumb (категорийная плашка с силуэтом) — ref: matrix.jsx    === */
/* =================================================================== */
.thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
}
.thumb svg {
    width: 22px;
    height: 22px;
}
/* В матрице thumb стоит вместо `.no-photo`, в той же ячейке `.col-photo` */
.col-photo .thumb { margin: 0 auto; }

/* Модалка breakdown: 48×48 версия в хедере */
.thumb--lg {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}
.thumb--lg svg { width: 30px; height: 30px; }

/* NEW-бейдж на новинках (≤30 дней) — ref: matrix.jsx isNew */
/* Админка: аватар-кружок с инициалами в ячейке логина + бейджи разделов (read-only) */
.admin-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-user-cell__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-muted);
    border: 1px solid var(--hair);
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0;
}
.admin-user-cell__name {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-1);
}
.admin-sections-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.admin-section-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--r-pill);
    background: var(--accent-tint);
    color: var(--accent-2);
    line-height: 1.6;
    white-space: nowrap;
}
.admin-section-badge--inactive {
    background: var(--bg-muted);
    color: var(--ink-5);
    opacity: 0.5;
}

/* Page head — eyebrow + H1 + sub (для главной, отчёта, админки) */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 20px;
}
.page-head__main { flex: 1; min-width: 0; }
.page-head__title {
    margin: 6px 0 6px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-1);
    line-height: 1.15;
}
.page-head__sub {
    margin: 0;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5;
}
.page-head__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Отчёт по дню — stacked-bar по МП + мини-карточки МП (ref: HANDOFF §5) */
.mp-report { margin: 16px 0; }
.mp-stacked-bar {
    display: flex;
    height: 36px;
    width: 100%;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--bg-muted);
    margin-bottom: 16px;
}
.mp-stacked-bar__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: opacity 120ms var(--ease);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 8px;
    min-width: 0;
}
.mp-stacked-bar__seg:hover { opacity: 0.85; }
.mp-stacked-bar__seg--oz { background: var(--oz); }
.mp-stacked-bar__seg--wb { background: var(--wb); }
.mp-stacked-bar__seg--ya { background: var(--ya); }
.mp-stacked-bar__label {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.mp-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 700px) {
    .mp-mini-grid { grid-template-columns: 1fr; }
}
.mp-mini {
    padding: 14px 16px;
    border-radius: var(--r-3);
    border: 1px solid var(--hair);
}
.mp-mini--oz { background: var(--oz-tint); border-color: color-mix(in srgb, var(--oz) 14%, transparent); }
.mp-mini--wb { background: var(--wb-tint); border-color: color-mix(in srgb, var(--wb) 14%, transparent); }
.mp-mini--ya { background: var(--ya-tint); border-color: color-mix(in srgb, var(--ya) 14%, transparent); }
.mp-mini__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.mp-mini__name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-1);
    flex: 1;
    min-width: 0;
}
.mp-mini__share {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.mp-mini__qty {
    font-size: 24px;
    font-weight: 600;
    color: var(--ink-1);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum', 'ss01';
}
.mp-mini__unit {
    font-size: 13px;
    color: var(--ink-3);
    font-weight: 500;
    margin-left: 4px;
}
.mp-mini__sum {
    font-size: 13px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    margin-top: 2px;
}
.mp-mini__sub {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--ink-4);
}

/* nav-row (←/→ между датами) — обновлено под финтех */
.nav-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}
.nav-row .spacer { flex: 1; }

/* Status-pills — цветные плашки статусов акций и заказов */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: 500;
    background: var(--bg-muted);
    color: var(--ink-3);
    line-height: 1.5;
    white-space: nowrap;
}
.status-pill::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.status-pill--active   { background: var(--pos-tint); color: var(--pos); }
.status-pill--paused   { background: #FFF7E6; color: var(--warn); }
.status-pill--planned  { background: var(--accent-tint); color: var(--accent-2); }
.status-pill--finished { background: var(--bg-muted); color: var(--ink-4); }
.status-pill--cancelled{ background: var(--neg-tint); color: var(--neg); }

/* KPI-strip — 4 минимальных KPI-карточки наверху вкладки Аналитики */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 1100px) {
    .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .kpi-strip { grid-template-columns: 1fr; }
}
.kpi-strip__cell {
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: var(--r-3);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.kpi-strip__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.kpi-strip__value {
    font-size: 22px;
    font-weight: 600;
    color: var(--ink-1);
    letter-spacing: -0.015em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum', 'ss01';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-strip__sub {
    font-size: 11.5px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

/* Пояснение формулы под шапкой модалки breakdown в режиме stocks */
.stock-calc-note {
    margin: 12px 0 14px;
    padding: 10px 14px;
    background: var(--bg-tint);
    border: 1px solid var(--hair);
    border-radius: var(--r-2);
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
}

/* Артикул-уровневая FBO-ячейка (rowspan на все размеры артикула):
   видно что число общее на артикул, а не на конкретный размер. */
/* Подпись «арт» рядом с FBO-значением — числовая ячейка как обычная,
   только маленький бейдж рядом с числом ясно говорит «это число на артикул». */
.fbo-art-cell__main {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.fbo-art-cell__tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    color: var(--ink-4);
    background: var(--bg-muted);
    border: 1px solid var(--hair);
    border-radius: 3px;
    padding: 1px 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    font-family: var(--font-sans);
}

/* В FBO-ячейках таблицы breakdown stocks: «30д: N» + «~M дн запаса» под основным числом */
.stock-aux {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.stock-aux__q30 {
    color: var(--ink-4);
}
.stock-aux__days {
    color: var(--ink-2);
    font-weight: 600;
}
.stock-aux__days--low {
    color: var(--neg);
}
.stock-aux__days--muted {
    color: var(--ink-5);
    font-style: italic;
    font-weight: 400;
}

/* Блок «Дней запаса» в модалке breakdown (только режим Остатки) — расчёт по МП */
.stock-calc {
    margin: 14px 0 18px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: var(--r-3);
}
.stock-calc__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.stock-calc__title {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.stock-calc__formula {
    font-size: 11.5px;
    color: var(--ink-4);
    font-family: var(--font-mono);
}
.stock-calc__formula-text {
    color: var(--ink-3);
}
.stock-calc__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 800px) {
    .stock-calc__grid { grid-template-columns: 1fr; }
}
.stock-calc__cell {
    padding: 12px 14px;
    border-radius: var(--r-2);
    background: var(--bg-tint);
    border: 1px solid var(--hair-soft);
}
.stock-calc__cell--oz { background: color-mix(in srgb, var(--oz) 5%, white); border-color: color-mix(in srgb, var(--oz) 14%, transparent); }
.stock-calc__cell--wb { background: color-mix(in srgb, var(--wb) 5%, white); border-color: color-mix(in srgb, var(--wb) 14%, transparent); }
.stock-calc__cell--ya { background: color-mix(in srgb, var(--ya) 5%, white); border-color: color-mix(in srgb, var(--ya) 14%, transparent); }
.stock-calc__cell--low { background: var(--neg-tint); border-color: color-mix(in srgb, var(--neg) 25%, transparent); }
.stock-calc__cell-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.stock-calc__cell-mp {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-1);
    flex: 1;
}
.stock-calc__cell-days {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: #FFFFFF;
    color: var(--ink-2);
    border: 1px solid var(--hair);
    font-variant-numeric: tabular-nums;
}
.stock-calc__cell-days--low {
    background: var(--neg);
    color: #FFFFFF;
    border-color: var(--neg);
}
.stock-calc__cell-body {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ink-2);
}
.stock-calc__num,
.stock-calc__result {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.stock-calc__result {
    font-weight: 700;
    color: var(--ink-1);
    font-size: 14px;
}
.stock-calc__op,
.stock-calc__eq {
    color: var(--ink-4);
    font-weight: 400;
}
.stock-calc__unit {
    color: var(--ink-4);
    font-size: 11.5px;
    font-family: var(--font-sans);
}
.stock-calc__muted {
    color: var(--ink-4);
    font-style: italic;
    font-size: 12px;
    font-family: var(--font-sans);
}
.stock-calc__cell-detail {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--hair);
    font-size: 11px;
    color: var(--ink-4);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* «Дней запаса» в режиме Остатки — под Σ шт */
.stock-days {
    font-size: 10.5px;
    color: var(--ink-4);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    line-height: 1.2;
    white-space: nowrap;
}
.stock-days--low {
    color: var(--neg);
    font-weight: 600;
}
.stock-days--muted {
    color: var(--ink-5);
}

.new-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    padding: 2px 6px;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--pos);
    background: var(--pos-tint);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    font-family: var(--font-sans);
    text-transform: uppercase;
    vertical-align: middle;
}


/* =================================================================== */
/* === Login split-screen (ref: other-screens.jsx LoginScreen)     === */
/* =================================================================== */
body.login-page {
    margin: 0;
    min-height: 100vh;
    background: #FFFFFF;
}
.login-shell {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #FFFFFF;
}
.login-shell__visual {
    background: var(--ink-1);
    color: #FFFFFF;
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.login-shell__pattern {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    pointer-events: none;
}
.login-shell__brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
}
.login-shell__brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: #FFFFFF;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 12l3-3 2.5 1.5L13 4' fill='none' stroke='%230A2540' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    flex-shrink: 0;
}
.login-shell__hero {
    position: relative;
    max-width: 460px;
}
.login-shell__title {
    margin: 0 0 16px;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #FFFFFF;
}
.login-shell__sub {
    margin: 0;
    font-size: 14.5px;
    color: rgba(255,255,255,0.7);
    line-height: 1.55;
}
.login-shell__footer {
    position: relative;
    display: flex;
    gap: 24px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    font-variant-numeric: tabular-nums;
}

.login-shell__form {
    padding: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #FFFFFF;
}
.login-shell__form-inner {
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
}
.login-shell__form-title {
    margin: 6px 0 8px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-1);
}
.login-shell__form-sub {
    margin: 0 0 28px;
    font-size: 13.5px;
    color: var(--ink-3);
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.login-field__label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.login-field__label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
}
.login-field__hint {
    font-size: 12px;
    color: var(--ink-3);
    text-decoration: none;
    transition: color 120ms var(--ease);
}
.login-field__hint:hover { color: var(--ink-1); }
.login-form .input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--hair-strong);
    border-radius: var(--r-2);
    background: #FFFFFF;
    font: inherit;
    font-size: 14px;
    color: var(--ink-1);
    box-sizing: border-box;
    transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.login-form .input:focus,
.login-form .input:focus-visible {
    outline: none;
    border-color: var(--ink-1);
    box-shadow: 0 0 0 3px rgba(10,37,64,0.08);
}
.login-form__submit {
    height: 40px;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    margin-top: 4px;
    gap: 8px;
}
.login-shell__bottom {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--hair);
    font-size: 12.5px;
    color: var(--ink-4);
    line-height: 1.55;
}
.login-shell__bottom a {
    color: var(--ink-1);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-1);
}

@media (max-width: 860px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-shell__visual { padding: 32px; min-height: 220px; }
    .login-shell__form { padding: 32px; }
    .login-shell__title { font-size: 26px; }
}


/* =================================================================== */
/* === Matrix table — финтех override (light header, hairline)     === */
/* === ref: matrix.jsx Th / ProductCell                            === */
/* =================================================================== */

.matrix-table-wrap {
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-4) !important;
    background: #FFFFFF;
}

/* Все строки thead — светлый фон bg-tint вместо тёмного --color-primary */
.matrix-table thead tr,
.matrix-table thead tr.matrix-table__subhead,
.matrix-table thead tr.matrix-table__totals {
    background: var(--bg-tint) !important;
}
.matrix-table thead tr.matrix-table__subhead {
    background: var(--bg-muted) !important;
}
.matrix-table thead tr.matrix-table__totals {
    background: #FFFFFF !important;
    border-top: 1px solid var(--hair);
}

/* Базовые TH — светлый фон, ink-3 текст, 10.5px uppercase (как reference Th) */
.matrix-table thead th,
.matrix-table thead td {
    background: var(--bg-tint) !important;
    color: var(--ink-3) !important;
    font-weight: 500 !important;
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--hair) !important;
    padding: 10px 8px !important;
}
.matrix-table thead tr.matrix-table__totals th,
.matrix-table thead tr.matrix-table__totals td {
    background: #FFFFFF !important;
    color: var(--ink-2) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    border-top: 1px solid var(--hair) !important;
}

/* Sticky левые колонки в шапке — bg-tint, ink-4 (НЕ тёмный) */
.matrix-table thead .col-idx,
.matrix-table thead .col-photo,
.matrix-table thead .col-name {
    background: var(--bg-tint) !important;
    color: var(--ink-3) !important;
    z-index: 8;
}
.matrix-table thead .matrix-table__subhead .col-idx,
.matrix-table thead .matrix-table__subhead .col-photo,
.matrix-table thead .matrix-table__subhead .col-name {
    background: var(--bg-muted) !important;
}
.matrix-table thead .matrix-table__totals .col-idx,
.matrix-table thead .matrix-table__totals .col-photo,
.matrix-table thead .matrix-table__totals .col-name {
    background: #FFFFFF !important;
}

/* Бренд-группа OZ/WB/YA — пастельный 8% tint фон, цветной текст (как ref Th mp=) */
.matrix-table thead .mp-group--oz {
    background: color-mix(in srgb, var(--oz) 8%, #FFFFFF) !important;
    color: var(--oz) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}
.matrix-table thead .mp-group--wb {
    background: color-mix(in srgb, var(--wb) 8%, #FFFFFF) !important;
    color: var(--wb) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}
.matrix-table thead .mp-group--ya {
    background: color-mix(in srgb, var(--ya) 8%, #FFFFFF) !important;
    color: var(--ya) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}
/* Subhead ячейки с bg-oz/wb/ya — пастельный 5% tint, цветной текст */
.matrix-table thead .bg-oz {
    background: color-mix(in srgb, var(--oz) 5%, var(--bg-muted)) !important;
    color: var(--oz) !important;
}
.matrix-table thead .bg-wb {
    background: color-mix(in srgb, var(--wb) 5%, var(--bg-muted)) !important;
    color: var(--wb) !important;
}
.matrix-table thead .bg-ya {
    background: color-mix(in srgb, var(--ya) 5%, var(--bg-muted)) !important;
    color: var(--ya) !important;
}
/* Totals ряд с цветными bg — белый фон + цветной текст */
.matrix-table thead tr.matrix-table__totals .bg-oz { background: #FFFFFF !important; color: var(--oz) !important; }
.matrix-table thead tr.matrix-table__totals .bg-wb { background: #FFFFFF !important; color: var(--wb) !important; }
.matrix-table thead tr.matrix-table__totals .bg-ya { background: #FFFFFF !important; color: var(--ya) !important; }

/* Тело таблицы — hairline разделители */
.matrix-table tbody td {
    border-bottom: 1px solid var(--hair-soft);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.matrix-table tbody tr:hover { background: var(--bg-tint); }
.matrix-table tbody tr:hover .col-idx,
.matrix-table tbody tr:hover .col-photo,
.matrix-table tbody tr:hover .col-name { background: var(--bg-tint); }

/* МП-tint фон в теле — насыщенный 14% (видимо но не перебивает текст) */
.matrix-table .bg-oz { background-color: color-mix(in srgb, var(--oz) 14%, white); }
.matrix-table .bg-wb { background-color: color-mix(in srgb, var(--wb) 14%, white); }
.matrix-table .bg-ya { background-color: color-mix(in srgb, var(--ya) 14%, white); }
.matrix-table tbody tr:hover .bg-oz { background-color: color-mix(in srgb, var(--oz) 22%, white); }
.matrix-table tbody tr:hover .bg-wb { background-color: color-mix(in srgb, var(--wb) 22%, white); }
.matrix-table tbody tr:hover .bg-ya { background-color: color-mix(in srgb, var(--ya) 22%, white); }
/* mp-sum (Σ по МП) — заметнее итогов */
.matrix-table .bg-oz.mp-sum { background-color: color-mix(in srgb, var(--oz) 22%, white); }
.matrix-table .bg-wb.mp-sum { background-color: color-mix(in srgb, var(--wb) 22%, white); }
.matrix-table .bg-ya.mp-sum { background-color: color-mix(in srgb, var(--ya) 22%, white); }
.matrix-table tbody tr:hover .bg-oz.mp-sum { background-color: color-mix(in srgb, var(--oz) 32%, white); }
.matrix-table tbody tr:hover .bg-wb.mp-sum { background-color: color-mix(in srgb, var(--wb) 32%, white); }
.matrix-table tbody tr:hover .bg-ya.mp-sum { background-color: color-mix(in srgb, var(--ya) 32%, white); }

/* Σ-колонки итогов */
.matrix-table .col-total {
    background: var(--bg-tint);
    font-weight: 600;
    color: var(--ink-1);
}
.matrix-table tbody tr:hover .col-total {
    background: var(--bg-muted);
}

/* Separator — тонкая hairline */
.matrix-table .sep { border-right: 1px solid var(--hair) !important; }
.matrix-table thead .sep { border-right: 1px solid var(--hair-strong) !important; }

/* Разделители MP-групп — наследие тёмной шапки рисовало их белыми 3px
   (rgba(255,255,255,.7)); на светлом фоне это давало белые полосы.
   Приводим к тонкой hairline, как .sep. */
.matrix-table thead .mp-group--wb,
.matrix-table thead .mp-group--oz {
    border-right: 1px solid var(--hair-strong) !important;
}
.matrix-table thead .mp-group--oz,
.matrix-table thead .matrix-table__subhead .col-num.bg-oz:first-of-type,
.matrix-table thead .matrix-table__totals .col-total + .bg-oz {
    border-left: 1px solid var(--hair-strong) !important;
}
.matrix-table thead :not(.col-total) + .col-total {
    border-left: 1px solid var(--hair) !important;
}
/* Тело — тот же стык первой MP-колонки 1px вместо тёмных 3px (вертикаль с шапкой) */
.matrix-table tbody .col-total + .bg-oz {
    border-left: 1px solid var(--hair) !important;
}
.matrix-table tbody :not(.col-total) + .col-total {
    border-left: 1px solid var(--hair) !important;
}

/* PCT-бейджи — финтех (pos/neg tint) */
.matrix-table thead .pct--up,
.matrix-table .pct--up {
    background: var(--pos-tint) !important;
    color: var(--pos) !important;
    font-weight: 600;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
}
.matrix-table thead .pct--down,
.matrix-table .pct--down {
    background: var(--neg-tint) !important;
    color: var(--neg) !important;
    font-weight: 600;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
}

/* row-hint — тёмная плашка-тултип */
.row-hint {
    background: var(--ink-1);
    color: #FFFFFF;
    border-radius: var(--r-2);
    box-shadow: 0 4px 12px rgba(10,37,64,0.15);
    font-size: 11.5px;
    font-weight: 500;
    padding: 5px 9px;
}


/* =================================================================== */
/* === Breakdown table — финтех override (модалка «Разбивка по арт») === */
/* =================================================================== */
.breakdown-table-wrap {
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-3) !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

/* Все ряды шапки — светлый фон bg-tint */
.breakdown-table thead tr,
.breakdown-table thead tr.breakdown-table__subhead,
.breakdown-table thead tr.breakdown-table__totals {
    background: var(--bg-tint) !important;
}
.breakdown-table thead tr.breakdown-table__subhead {
    background: var(--bg-muted) !important;
}
.breakdown-table thead tr.breakdown-table__totals {
    background: #FFFFFF !important;
}

/* Базовые TH/TD шапки — ink-3 текст, 10.5px uppercase */
.breakdown-table thead th,
.breakdown-table thead td {
    background: var(--bg-tint) !important;
    color: var(--ink-3) !important;
    font-weight: 500 !important;
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--hair) !important;
    padding: 10px 8px !important;
}
.breakdown-table thead tr.breakdown-table__totals th,
.breakdown-table thead tr.breakdown-table__totals td {
    background: #FFFFFF !important;
    color: var(--ink-2) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    border-top: 1px solid var(--hair) !important;
}
.breakdown-table__totals th[scope="row"] {
    text-transform: uppercase !important;
    font-size: 10.5px !important;
    letter-spacing: 0.06em;
    color: var(--ink-4) !important;
    font-weight: 600 !important;
}

/* Бренд-группа OZ/WB/YA — пастельный 8% tint, цветной текст */
.breakdown-table thead .mp-group--oz {
    background: color-mix(in srgb, var(--oz) 8%, #FFFFFF) !important;
    color: var(--oz) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}
.breakdown-table thead .mp-group--wb {
    background: color-mix(in srgb, var(--wb) 8%, #FFFFFF) !important;
    color: var(--wb) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}
.breakdown-table thead .mp-group--ya {
    background: color-mix(in srgb, var(--ya) 8%, #FFFFFF) !important;
    color: var(--ya) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}
.breakdown-table thead .mp-group .mp-label {
    background: transparent !important;
    padding: 0 !important;
}
.breakdown-table thead .mp-label--wb { color: var(--wb) !important; }
.breakdown-table thead .mp-label--ozon { color: var(--oz) !important; }
.breakdown-table thead .mp-label--ya { color: var(--ya) !important; }

/* Subhead с bg-oz/wb/ya — 5% tint + цветной текст */
.breakdown-table thead .bg-oz {
    background: color-mix(in srgb, var(--oz) 5%, var(--bg-muted)) !important;
    color: var(--oz) !important;
}
.breakdown-table thead .bg-wb {
    background: color-mix(in srgb, var(--wb) 5%, var(--bg-muted)) !important;
    color: var(--wb) !important;
}
.breakdown-table thead .bg-ya {
    background: color-mix(in srgb, var(--ya) 5%, var(--bg-muted)) !important;
    color: var(--ya) !important;
}
/* Totals ряд с bg-X — белый фон, цветной текст */
.breakdown-table thead tr.breakdown-table__totals .bg-oz { background: #FFFFFF !important; color: var(--oz) !important; }
.breakdown-table thead tr.breakdown-table__totals .bg-wb { background: #FFFFFF !important; color: var(--wb) !important; }
.breakdown-table thead tr.breakdown-table__totals .bg-ya { background: #FFFFFF !important; color: var(--ya) !important; }

/* Тело — hairline разделители, насыщенный 14% tint в МП-ячейках */
.breakdown-table tbody td {
    border-bottom: 1px solid var(--hair-soft) !important;
    color: var(--ink-2) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.breakdown-table tbody tr:hover td { background: var(--bg-tint); }
.breakdown-table tbody .bg-oz { background-color: color-mix(in srgb, var(--oz) 14%, white) !important; }
.breakdown-table tbody .bg-wb { background-color: color-mix(in srgb, var(--wb) 14%, white) !important; }
.breakdown-table tbody .bg-ya { background-color: color-mix(in srgb, var(--ya) 14%, white) !important; }
.breakdown-table tbody tr:hover .bg-oz { background-color: color-mix(in srgb, var(--oz) 22%, white) !important; }
.breakdown-table tbody tr:hover .bg-wb { background-color: color-mix(in srgb, var(--wb) 22%, white) !important; }
.breakdown-table tbody tr:hover .bg-ya { background-color: color-mix(in srgb, var(--ya) 22%, white) !important; }

/* col-total — слегка выделен */
.breakdown-table .col-total {
    background: var(--bg-tint);
    font-weight: 600;
    color: var(--ink-1);
}
.breakdown-table thead .col-total {
    background: var(--bg-tint) !important;
    color: var(--ink-3) !important;
}
.breakdown-table thead tr.breakdown-table__totals .col-total {
    background: #FFFFFF !important;
    color: var(--ink-1) !important;
    font-weight: 700 !important;
}

/* Separator между МП-группами — hairline, без белых толстых полос (V1 паттерн). */
.breakdown-table .sep { border-right: 1px solid var(--hair) !important; }
.breakdown-table thead .sep { border-right: 1px solid var(--hair-strong) !important; }
/* Перебиваем V1-стиль border-right: 3px solid rgba(255,255,255,0.7) на mp-group — белая линия
   контрастировала на тёмном navy шапки, но на светлом tint фоне выглядит как чужеродная полоса. */
.breakdown-table thead .mp-group--oz,
.breakdown-table thead .mp-group--wb,
.breakdown-table thead .mp-group--ya {
    border-right: 1px solid var(--hair) !important;
}
.breakdown-table thead .mp-group--ya { border-right: 0 !important; }

/* col-art / col-size — нейтральный шрифт */
.breakdown-table .col-art code {
    background: var(--bg-muted) !important;
    color: var(--ink-2) !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-2) !important;
    padding: 2px 6px !important;
    font-family: var(--font-mono);
    font-size: 12px;
}
.breakdown-table tbody .fbo-merged {
    background: color-mix(in srgb, var(--bg-tint) 70%, transparent) !important;
}


/* =================================================================== */
/* === Queries table — финтех override (модалка «Запросы»)         === */
/* =================================================================== */
.queries-table-wrap {
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-3) !important;
    background: #FFFFFF !important;
    margin-top: 8px;
}
.queries-section__head {
    align-items: baseline !important;
    margin-bottom: 10px !important;
}
.queries-section__meta {
    color: var(--ink-4) !important;
    font-size: 12px !important;
}

/* Шапка queries — bg-tint, ink-3 */
.queries-table thead tr {
    background: var(--bg-tint) !important;
}
.queries-table thead th {
    background: var(--bg-tint) !important;
    color: var(--ink-3) !important;
    font-weight: 500 !important;
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--hair) !important;
    padding: 10px 10px !important;
}
.queries-table thead .col-query {
    color: var(--ink-3) !important;
    text-align: left !important;
}

/* МП-tint в теле queries — лёгкий 4% */
.queries-table--wb tbody td {
    background: color-mix(in srgb, var(--wb) 4%, white) !important;
    color: var(--ink-2) !important;
    border-bottom: 1px solid var(--hair-soft) !important;
}
.queries-table--oz tbody td {
    background: color-mix(in srgb, var(--oz) 4%, white) !important;
    color: var(--ink-2) !important;
    border-bottom: 1px solid var(--hair-soft) !important;
}
.queries-table--wb tbody tr:hover td { background: color-mix(in srgb, var(--wb) 10%, white) !important; }
.queries-table--oz tbody tr:hover td { background: color-mix(in srgb, var(--oz) 10%, white) !important; }

/* Sortable headers */
.queries-table th.q-sort {
    cursor: pointer;
    transition: background 120ms var(--ease);
}
.queries-table th.q-sort:hover {
    background: var(--bg-muted) !important;
    color: var(--ink-1) !important;
}
.queries-table th.q-sort:focus-visible {
    outline: 2px solid var(--ink-1) !important;
    outline-offset: -2px !important;
}
.queries-table th.q-sort .th-sort__arrow {
    color: var(--ink-1);
    margin-left: 3px;
}
.queries-table th.q-sort .th-sort__arrow--dim {
    color: var(--ink-5);
    opacity: 1;
}

/* ===== Lamoda (LA) — графит #1F2937. Зеркалит эффективные правила YA ===== */
.group-graphite { background-color: var(--color-lamoda-bg); }
.mp-label--lamoda { background: var(--color-lamoda); color: #fff; }
.mp-card__brand-chip--la { background: var(--la); }
.sku-chip--la { background: var(--la); }

/* matrix thead */
.matrix-table thead .mp-group--la { background: color-mix(in srgb, var(--la) 8%, #FFFFFF) !important; color: var(--la) !important; font-weight: 700 !important; font-size: 11px !important; }
.matrix-table thead .bg-la { background: color-mix(in srgb, var(--la) 5%, var(--bg-muted)) !important; color: var(--la) !important; }
.matrix-table thead tr.matrix-table__totals .bg-la { background: #FFFFFF !important; color: var(--la) !important; }
/* matrix tbody */
.matrix-table .bg-la { background-color: color-mix(in srgb, var(--la) 12%, white); }
.matrix-table tbody tr:hover .bg-la { background-color: color-mix(in srgb, var(--la) 20%, white); }
.matrix-table .bg-la.mp-sum { background-color: color-mix(in srgb, var(--la) 20%, white); }
.matrix-table tbody tr:hover .bg-la.mp-sum { background-color: color-mix(in srgb, var(--la) 28%, white); }

/* breakdown thead/tbody */
.breakdown-table thead .mp-group--la { background: var(--color-lamoda-dark); }
.breakdown-table thead .mp-label--lamoda { color: var(--la) !important; }
.breakdown-table thead .bg-la { background: color-mix(in srgb, var(--la) 5%, var(--bg-muted)) !important; color: var(--la) !important; }
.breakdown-table thead tr.breakdown-table__totals .bg-la { background: #FFFFFF !important; color: var(--la) !important; }
.breakdown-table tbody .bg-la { background-color: color-mix(in srgb, var(--la) 12%, white) !important; }
.breakdown-table tbody tr:hover .bg-la { background-color: color-mix(in srgb, var(--la) 20%, white) !important; }