/* ═══════════════════════════════════════════════════════════════
   ФонтанГрад — Design System v2
   Чтобы откатить: cp custom.css.backup custom.css
═══════════════════════════════════════════════════════════════ */

/*
 * F3 — Self-hosted шрифты (GDPR: нет запросов на fonts.googleapis.com)
 *
 * Файлы .woff2 размещаются в /static/fonts/
 * Инструкция: /static/fonts/README.md
 *
 * ВАЖНО: Каждый @font-face ниже ограничен unicode-range только Latin-символами.
 * Кириллица НАМЕРЕННО исключена из этих правил — чтобы при наличии woff2-файлов
 * (которые содержат только Latin-глифы) браузер корректно переключался на
 * системный шрифт для кириллицы, а не рисовал «квадратики».
 *
 * Кириллица покрывается отдельными @font-face ниже (local() → системный шрифт),
 * а при отсутствии woff2-файлов весь текст идёт через fallback-стек в body.
 *
 * Поддержка платформ:
 *   iOS / macOS  → -apple-system = San Francisco (кириллица ✓)
 *   Windows      → Segoe UI (кириллица ✓)
 *   Android      → Roboto (кириллица ✓)
 *   Linux        → Ubuntu / Cantarell / Noto Sans (кириллица ✓)
 */

/* ── Latin subset — только латинские символы ──────────────────────────── */

@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: local('DM Sans Light'), local('DMSans-Light'),
       url('../fonts/dm-sans-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: local('DM Sans'), local('DMSans-Regular'),
       url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: local('DM Sans Italic'), local('DMSans-Italic'),
       url('../fonts/dm-sans-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: local('DM Sans Medium'), local('DMSans-Medium'),
       url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: local('DM Sans SemiBold'), local('DMSans-SemiBold'),
       url('../fonts/dm-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: local('DM Sans Bold'), local('DMSans-Bold'),
       url('../fonts/dm-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Cyrillic subset — кириллица через local() → системный шрифт ──────── */
/*
 * Если woff2-файлы с кириллическим сабсетом добавлены в /static/fonts/
 * (dm-sans-cyrillic-*-normal.woff2 из fontsource), раскомментируйте url()-строки.
 * Сейчас local() подтягивает DM Sans если он установлен в системе,
 * иначе браузер падает на fallback-стек body (-apple-system, Segoe UI, Roboto).
 */

@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: local('DM Sans Light'), local('DMSans-Light');
       /* url('../fonts/dm-sans-cyrillic-300-normal.woff2') format('woff2'); */
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: local('DM Sans'), local('DMSans-Regular');
       /* url('../fonts/dm-sans-cyrillic-400-normal.woff2') format('woff2'); */
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'DM Sans';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: local('DM Sans Italic'), local('DMSans-Italic');
       /* url('../fonts/dm-sans-cyrillic-400-italic.woff2') format('woff2'); */
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: local('DM Sans Medium'), local('DMSans-Medium');
       /* url('../fonts/dm-sans-cyrillic-500-normal.woff2') format('woff2'); */
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: local('DM Sans SemiBold'), local('DMSans-SemiBold');
       /* url('../fonts/dm-sans-cyrillic-600-normal.woff2') format('woff2'); */
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'DM Sans';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: local('DM Sans Bold'), local('DMSans-Bold');
       /* url('../fonts/dm-sans-cyrillic-700-normal.woff2') format('woff2'); */
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --fg-navy:           #0f2b4e;
  --fg-blue:           #2563eb;
  --fg-blue-hover:     #1d4fd8;
  --fg-blue-light:     #dbeafe;
  --fg-blue-mid:       #3b82f6;

  --fg-sent:           #059669;
  --fg-sent-bg:        #d1fae5;
  --fg-queued:         #0284c7;
  --fg-queued-bg:      #e0f2fe;
  --fg-processing:     #d97706;
  --fg-processing-bg:  #fef3c7;
  --fg-failed:         #dc2626;
  --fg-failed-bg:      #fee2e2;
  --fg-pending:        #6b7280;
  --fg-pending-bg:     #f3f4f6;

  --fg-bg:             #f0f4f8;
  --fg-card:           #ffffff;
  --fg-border:         #e5e9ef;
  --fg-border-soft:    #f1f5f9;

  --fg-text:           #1e293b;
  --fg-text-muted:     #64748b;
  --fg-text-faint:     #94a3b8;

  --fg-shadow-sm:      0 1px 3px rgba(15,43,78,.06), 0 1px 2px rgba(15,43,78,.04);
  --fg-shadow:         0 4px 12px rgba(15,43,78,.08), 0 1px 3px rgba(15,43,78,.05);
  --fg-shadow-md:      0 8px 24px rgba(15,43,78,.11), 0 2px 6px rgba(15,43,78,.06);

  --fg-radius-sm:      6px;
  --fg-radius:         10px;
  --fg-radius-lg:      14px;
  --fg-ease:           cubic-bezier(.4,0,.2,1);
  --fg-t:              .18s var(--fg-ease);
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--fg-bg);
  color: var(--fg-text);
  font-family: 'DM Sans',
               -apple-system,        /* iOS Safari, macOS Safari → San Francisco */
               BlinkMacSystemFont,   /* macOS Chrome → San Francisco */
               'Segoe UI',           /* Windows → Segoe UI (кириллица ✓) */
               Roboto,               /* Android → Roboto (кириллица ✓) */
               'Helvetica Neue',     /* старые macOS */
               Arial,                /* универсальный (кириллица ✓) */
               sans-serif;
  font-size: .9rem;
  color: var(--fg-text);
  background: var(--fg-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'DM Sans',
               -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--fg-text);
}

/* ── NAVBAR ── */
.navbar {
  background: linear-gradient(135deg, var(--fg-navy) 0%, #1a3a6e 100%) !important;
  padding: 0 1.25rem;
  min-height: 54px;
  box-shadow: 0 2px 16px rgba(15,43,78,.25);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: #fff !important;
}

.navbar-brand i { color: #60a5fa; }

.navbar-nav .nav-link {
  font-size: .845rem;
  font-weight: 500;
  color: rgba(255,255,255,.72) !important;
  padding: .5rem .75rem;
  border-radius: var(--fg-radius-sm);
  transition: background var(--fg-t), color var(--fg-t);
  white-space: nowrap;
}

.navbar-nav .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.10); }
.navbar-nav .nav-link.active { color: #fff !important; background: rgba(255,255,255,.15); }

.navbar .dropdown-menu {
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-radius);
  box-shadow: var(--fg-shadow-md);
  padding: 6px;
  margin-top: 4px;
}

.navbar .dropdown-item {
  border-radius: var(--fg-radius-sm);
  font-size: .875rem;
  padding: 7px 12px;
  transition: background var(--fg-t);
}

.navbar .dropdown-item:hover { background: var(--fg-blue-light); }

.navbar .badge {
  font-size: .68rem;
  font-weight: 600;
  background: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.85) !important;
  border-radius: 20px;
  padding: 2px 8px;
}

/* ── CARDS ── */
.card {
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-radius-lg) !important;
  box-shadow: var(--fg-shadow) !important;
  background: var(--fg-card);
  transition: transform var(--fg-t), box-shadow var(--fg-t);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--fg-shadow-md) !important;
}

.card .card-title {
  font-size: .95rem;
  font-weight: 600;
}

.card .card-title i { color: var(--fg-blue); }

/* Stat card icons */
.card .fs-2.text-primary   { color: #2563eb !important; }
.card .fs-2.text-success   { color: #059669 !important; }
.card .fs-2.text-info      { color: #0284c7 !important; }
.card .fs-2.text-secondary { color: #6b7280 !important; }
.card .fs-2.text-warning   { color: #d97706 !important; }
.card .fs-2.text-danger    { color: #dc2626 !important; }

/* ── TABLES ── */
.table {
  font-size: .875rem;
  border-color: var(--fg-border-soft);
  margin-bottom: 0;
}

.table thead th {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-text-muted);
  background: #f8fafc !important;
  border-bottom: 2px solid var(--fg-border) !important;
  border-top: none;
  padding: 10px 14px;
  white-space: nowrap;
}

.table td {
  padding: 9px 14px;
  vertical-align: middle;
  border-color: var(--fg-border-soft);
}

.table-hover tbody tr { transition: background var(--fg-t); }
.table-hover tbody tr:hover { background: #f5f8ff !important; }

/* ── BADGES ── */
/* ── BADGES ─────────────────────────────────────────────────────── */

/* Базовый badge */
.badge {
  font-family: 'DM Sans',
               -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 3px 10px;
  border-radius: 20px;
  line-height: 1.4;
  vertical-align: middle;
}

/* Пастельные badge (счётчики, фото, роли) */
.badge.bg-success  { background: var(--fg-sent-bg) !important;       color: var(--fg-sent) !important;       border: 1px solid rgba(5,150,105,.25);  }
.badge.bg-info     { background: var(--fg-queued-bg) !important;      color: var(--fg-queued) !important;     border: 1px solid rgba(2,132,199,.25);  }
.badge.bg-warning  { background: var(--fg-processing-bg) !important;  color: var(--fg-processing) !important; border: 1px solid rgba(217,119,6,.25);  }
.badge.bg-danger   { background: var(--fg-failed-bg) !important;      color: var(--fg-failed) !important;     border: 1px solid rgba(220,38,38,.25);  }
.badge.bg-secondary{ background: var(--fg-pending-bg) !important;     color: var(--fg-pending) !important;    border: 1px solid rgba(107,114,128,.2); }

/* Статусные badge: solid-цвет + белый текст — контраст 4.5:1+ */
.badge.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  border: none !important;
}

.badge.badge-status .status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: .85;
}

.badge.badge-status.status-sent       { background: var(--fg-sent) !important;       color: #fff !important; }
.badge.badge-status.status-queued     { background: var(--fg-queued) !important;      color: #fff !important; }
.badge.badge-status.status-processing { background: var(--fg-processing) !important;  color: #fff !important; }
.badge.badge-status.status-failed     { background: var(--fg-failed) !important;      color: #fff !important; }
.badge.badge-status.status-pending    { background: var(--fg-pending) !important;     color: #fff !important; }

.badge.badge-status .status-dot                     { background: rgba(255,255,255,.75); }
.badge.badge-status.status-queued     .status-dot   { animation: pulse-dot 1.8s ease-in-out infinite; }
.badge.badge-status.status-processing .status-dot   { animation: pulse-fast 1s ease-in-out infinite; }

/* ── BUTTONS ── */
.btn {
  font-family: 'DM Sans',
               -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 500;
  border-radius: var(--fg-radius);
  transition: all var(--fg-t);
  font-size: .875rem;
  letter-spacing: -.01em;
}

.btn-primary { background: var(--fg-blue) !important; border-color: var(--fg-blue) !important; box-shadow: 0 1px 3px rgba(37,99,235,.3); }
.btn-primary:hover { background: var(--fg-blue-hover) !important; border-color: var(--fg-blue-hover) !important; box-shadow: 0 3px 10px rgba(37,99,235,.35); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary { color: var(--fg-blue) !important; border-color: var(--fg-blue) !important; }
.btn-outline-primary:hover { background: var(--fg-blue) !important; color: #fff !important; transform: translateY(-1px); }

.btn-outline-secondary { color: var(--fg-text-muted) !important; border-color: var(--fg-border) !important; }
.btn-outline-secondary:hover { background: #f8fafc !important; color: var(--fg-text) !important; border-color: #c8d0db !important; }

.btn-outline-danger { color: var(--fg-failed) !important; border-color: #fca5a5 !important; }
.btn-outline-danger:hover { background: var(--fg-failed-bg) !important; border-color: var(--fg-failed) !important; transform: translateY(-1px); }

.btn-warning { background: var(--fg-processing-bg) !important; border-color: #fbbf24 !important; color: var(--fg-processing) !important; }
.btn-warning:hover { background: #fde68a !important; transform: translateY(-1px); }

.btn-xs { padding: 3px 9px; font-size: .75rem; border-radius: var(--fg-radius-sm); }

/* ── FORM CONTROLS ── */
.form-control, .form-select {
  font-family: 'DM Sans',
               -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif;
  font-size: .875rem;
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-radius);
  color: var(--fg-text);
  transition: border-color var(--fg-t), box-shadow var(--fg-t);
  padding: .45rem .75rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--fg-blue-mid);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
  outline: none;
}

.form-control::placeholder { color: var(--fg-text-faint); font-weight: 400; }
.form-label { font-weight: 500; font-size: .84rem; margin-bottom: 5px; }
.form-control-sm, .form-select-sm { font-size: .83rem; border-radius: var(--fg-radius-sm); padding: .32rem .65rem; }
textarea.form-control { resize: vertical; min-height: 80px; }

input[type="file"].form-control { cursor: pointer; }
input[type="file"].form-control::-webkit-file-upload-button {
  background: var(--fg-blue-light);
  border: none;
  color: var(--fg-blue);
  font-family: 'DM Sans',
               -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: .8rem;
  padding: 5px 12px;
  border-radius: var(--fg-radius-sm);
  cursor: pointer;
  margin-right: 10px;
}
input[type="file"].form-control::-webkit-file-upload-button:hover { background: #bfdbfe; }

/* ── ALERTS ── */
.alert {
  border-radius: var(--fg-radius-lg) !important;
  border: none;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--fg-shadow-sm);
  padding: 12px 16px;
}

.alert-success  { background: var(--fg-sent-bg);       color: var(--fg-sent);        border-left: 4px solid var(--fg-sent)        !important; }
.alert-danger   { background: var(--fg-failed-bg);      color: var(--fg-failed);      border-left: 4px solid var(--fg-failed)      !important; }
.alert-warning  { background: var(--fg-processing-bg);  color: #92400e;               border-left: 4px solid #f59e0b              !important; }
.alert-info     { background: var(--fg-queued-bg);      color: #075985;               border-left: 4px solid var(--fg-queued)      !important; }

/* ── PAGINATION ── */
.pagination .page-link {
  font-family: 'DM Sans',
               -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif;
  font-size: .83rem;
  font-weight: 500;
  color: var(--fg-text-muted);
  border-color: var(--fg-border);
  border-radius: var(--fg-radius-sm) !important;
  margin: 0 2px;
  padding: 5px 11px;
  transition: all var(--fg-t);
}
.pagination .page-link:hover { background: var(--fg-blue-light); border-color: #93c5fd; color: var(--fg-blue); }
.pagination .page-item.active .page-link { background: var(--fg-blue); border-color: var(--fg-blue); color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,.35); }

/* ── PAGE HEADINGS ── */
main h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
main h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }

/* ── FOOTER ── */
footer {
  font-size: .8rem;
  color: var(--fg-text-faint) !important;
  border-top: 1px solid var(--fg-border);
  background: var(--fg-card) !important;
  padding: 12px !important;
}

/* ── TOOLTIP ── */
.tooltip .tooltip-inner {
  background: var(--fg-navy);
  border-radius: var(--fg-radius);
  font-size: .8rem;
  max-width: 280px;
  text-align: left;
  padding: 8px 12px;
}

/* ── ANIMATIONS ── */
main { animation: fg-in .22s var(--fg-ease) both; }

@keyframes fg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.row .col-md-4:nth-child(1) .card { animation-delay: .02s; }
.row .col-md-4:nth-child(2) .card { animation-delay: .05s; }
.row .col-md-4:nth-child(3) .card { animation-delay: .08s; }
.row .col-md-4:nth-child(4) .card { animation-delay: .11s; }
.row .col-md-4:nth-child(5) .card { animation-delay: .14s; }
.row .col-md-4:nth-child(6) .card { animation-delay: .17s; }

.row .col-md-4 .card { animation: fg-in .3s var(--fg-ease) both; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .navbar { padding: 0 .75rem; }
  main.container-fluid { padding: 14px !important; }
  .card { border-radius: var(--fg-radius) !important; }
}

/* ── F10: NProgress bar — корпоративный цвет ── */
#nprogress .bar {
  background: var(--fg-blue) !important;
  height: 3px !important;
}
#nprogress .peg {
  box-shadow: 0 0 10px var(--fg-blue), 0 0 5px var(--fg-blue) !important;
}

/* ── F7: Soft-deleted row styling ── */
tr.table-danger.opacity-75 td {
  text-decoration: none;
  color: var(--fg-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   УЛУЧШЕНИЕ 1: Dark Mode — полная версия
   Переключается через data-theme="dark" на <html>
   Сохраняется в localStorage через fg-theme.js
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* Переопределяем все проектные CSS-переменные */
  --fg-navy:          #0f2b4e;
  --fg-bg:            #0f172a;
  --fg-card:          #1e293b;
  --fg-border:        #334155;
  --fg-border-soft:   #243044;
  --fg-text:          #e2e8f0;
  --fg-text-muted:    #94a3b8;
  --fg-text-faint:    #64748b;
  --fg-blue-light:    #1e3a5f;
  --fg-blue-mid:      #3b82f6;
  --fg-sent-bg:       #052e16;
  --fg-queued-bg:     #082f49;
  --fg-processing-bg: #2d1a00;
  --fg-failed-bg:     #2d0a0a;
  --fg-pending-bg:    #243044;

  /* Переопределяем Bootstrap CSS-переменные для тёмной темы */
  --bs-body-bg:          #0f172a;
  --bs-body-color:       #e2e8f0;
  --bs-card-bg:          #1e293b;
  --bs-card-color:       #e2e8f0;
  --bs-card-border-color:#334155;
  --bs-card-cap-bg:      #243044;
  --bs-card-cap-color:   #e2e8f0;
  --bs-border-color:     #334155;
  --bs-secondary-color:  #94a3b8;
  --bs-secondary-bg:     #243044;
  --bs-tertiary-bg:      #1e293b;
  --bs-heading-color:    #e2e8f0;
  --bs-link-color:       #60a5fa;
  --bs-link-hover-color: #93c5fd;
  --bs-emphasis-color:   #f1f5f9;
  --bs-table-bg:         transparent;
  --bs-table-color:      #e2e8f0;
  --bs-table-border-color:#334155;
  --bs-table-striped-bg: #243044;
  --bs-light-rgb:        36,48,68;
  --bs-white-rgb:        30,41,59;
  --bs-shadow-sm:        0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --fg-shadow-sm:        0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --fg-shadow:           0 4px 12px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3);
  --fg-shadow-md:        0 8px 24px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
}

/* ── База ─────────────────────────────────────────────────────────── */
[data-theme="dark"] body,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
  background-color: var(--fg-bg) !important;
  color: var(--fg-text);
}

/* ── Карточки Bootstrap ───────────────────────────────────────────── */
[data-theme="dark"] .card {
  background-color: var(--fg-card) !important;
  border-color: var(--fg-border) !important;
  color: var(--fg-text);
}
[data-theme="dark"] .card-body   { color: var(--fg-text); }
[data-theme="dark"] .card-title  { color: var(--fg-text) !important; }
[data-theme="dark"] .card-text   { color: var(--fg-text-muted); }
[data-theme="dark"] .card-header {
  background-color: var(--fg-border-soft) !important;
  border-color: var(--fg-border) !important;
  color: var(--fg-text);
}
[data-theme="dark"] .card-footer {
  background-color: var(--fg-border-soft) !important;
  border-color: var(--fg-border) !important;
}
/* Тень карточки в тёмной теме */
[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.4) !important; }
[data-theme="dark"] .shadow    { box-shadow: 0 4px 12px rgba(0,0,0,.5) !important; }

/* ── Текст ────────────────────────────────────────────────────────── */
[data-theme="dark"] .text-muted       { color: var(--fg-text-muted) !important; }
[data-theme="dark"] .text-dark        { color: var(--fg-text) !important; }
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--fg-text); }
[data-theme="dark"] .small           { color: inherit; }

/* ── Таблицы ──────────────────────────────────────────────────────── */
[data-theme="dark"] .table {
  color: var(--fg-text);
  border-color: var(--fg-border);
  --bs-table-bg: transparent;
  --bs-table-color: var(--fg-text);
  --bs-table-border-color: var(--fg-border);
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light th {
  background-color: var(--fg-border-soft) !important;
  color: var(--fg-text-muted) !important;
  border-color: var(--fg-border) !important;
  --bs-table-bg: var(--fg-border-soft);
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th { border-color: var(--fg-border); }
[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--fg-blue-light) !important;
  color: var(--fg-text);
}
[data-theme="dark"] .table-sm td,
[data-theme="dark"] .table-sm th { border-color: var(--fg-border); }

/* ── Формы ────────────────────────────────────────────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-check-input {
  background-color: #0f172a;
  color: var(--fg-text);
  border-color: var(--fg-border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #0f172a;
  color: var(--fg-text);
  border-color: var(--fg-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}
[data-theme="dark"] .form-control::placeholder { color: var(--fg-text-faint); }
[data-theme="dark"] .form-label { color: var(--fg-text); }
[data-theme="dark"] .input-group-text {
  background-color: var(--fg-border-soft);
  color: var(--fg-text-muted);
  border-color: var(--fg-border);
}

/* ── Кнопки outline ──────────────────────────────────────────────── */
[data-theme="dark"] .btn-outline-secondary {
  color: var(--fg-text-muted); border-color: var(--fg-border);
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--fg-border-soft); color: var(--fg-text);
}
[data-theme="dark"] .btn-outline-primary {
  color: #60a5fa; border-color: #3b82f6;
}
[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--fg-blue); color: #fff;
}
[data-theme="dark"] .btn-outline-danger {
  color: #f87171; border-color: #ef4444;
}
[data-theme="dark"] .btn-outline-danger:hover {
  background-color: var(--fg-failed); color: #fff;
}
[data-theme="dark"] .btn-outline-warning {
  color: #fbbf24; border-color: #f59e0b;
}
[data-theme="dark"] .btn-outline-warning:hover {
  background-color: #d97706; color: #fff;
}
[data-theme="dark"] .btn-light, [data-theme="dark"] .btn-outline-light {
  background-color: var(--fg-border-soft);
  color: var(--fg-text);
  border-color: var(--fg-border);
}

/* ── Алерты Bootstrap ────────────────────────────────────────────── */
[data-theme="dark"] .alert {
  border-left-width: 4px;
}
[data-theme="dark"] .alert-info {
  background-color: #082f49 !important;
  color: #7dd3fc !important;
  border-color: #0369a1 !important;
}
[data-theme="dark"] .alert-warning {
  background-color: #2d1a00 !important;
  color: #fcd34d !important;
  border-color: #d97706 !important;
}
[data-theme="dark"] .alert-success {
  background-color: var(--fg-sent-bg) !important;
  color: #6ee7b7 !important;
  border-color: #059669 !important;
}
[data-theme="dark"] .alert-danger {
  background-color: var(--fg-failed-bg) !important;
  color: #fca5a5 !important;
  border-color: #dc2626 !important;
}

/* ── Бейджи ───────────────────────────────────────────────────────── */
/* Пастельные badges в dark mode — более насыщенные фоны для читаемости */
[data-theme="dark"] .badge.bg-success   { background: rgba(5,150,105,.25) !important;  color: #34d399 !important; border-color: rgba(5,150,105,.4) !important; }
[data-theme="dark"] .badge.bg-info      { background: rgba(2,132,199,.25) !important;   color: #38bdf8 !important; border-color: rgba(2,132,199,.4) !important; }
[data-theme="dark"] .badge.bg-warning   { background: rgba(217,119,6,.25) !important;   color: #fbbf24 !important; border-color: rgba(217,119,6,.4) !important; }
[data-theme="dark"] .badge.bg-danger    { background: rgba(220,38,38,.25) !important;   color: #f87171 !important; border-color: rgba(220,38,38,.4) !important; }
[data-theme="dark"] .badge.bg-secondary { background: #334155 !important; color: #94a3b8 !important; }
[data-theme="dark"] .badge.bg-light     { background: #243044 !important; color: #94a3b8 !important; }
/* badge-status в dark mode — те же solid-цвета, не меняем */

/* ── Навигация / пагинация ────────────────────────────────────────── */
[data-theme="dark"] .page-link {
  background-color: var(--fg-card);
  border-color: var(--fg-border);
  color: var(--fg-text-muted);
}
[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--fg-blue);
  border-color: var(--fg-blue);
  color: #fff;
}
[data-theme="dark"] .page-link:hover {
  background-color: var(--fg-blue-light);
  color: var(--fg-text);
}
[data-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--fg-border-soft);
  color: var(--fg-text-faint);
}

/* ── Dropdown и меню ──────────────────────────────────────────────── */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--fg-card);
  border-color: var(--fg-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
[data-theme="dark"] .dropdown-item { color: var(--fg-text); }
[data-theme="dark"] .dropdown-item:hover { background: var(--fg-blue-light); color: var(--fg-text); }
[data-theme="dark"] .dropdown-divider { border-color: var(--fg-border); }
[data-theme="dark"] .dropdown-header  { color: var(--fg-text-faint); }

/* ── Модальные окна ───────────────────────────────────────────────── */
[data-theme="dark"] .modal-content {
  background-color: var(--fg-card);
  border-color: var(--fg-border);
  color: var(--fg-text);
}
[data-theme="dark"] .modal-header {
  border-color: var(--fg-border);
  background-color: var(--fg-border-soft);
}
[data-theme="dark"] .modal-footer { border-color: var(--fg-border); }

/* ── Список / nav-tabs ────────────────────────────────────────────── */
[data-theme="dark"] .list-group-item {
  background-color: var(--fg-card);
  border-color: var(--fg-border);
  color: var(--fg-text);
}
[data-theme="dark"] .list-group-item:hover {
  background-color: var(--fg-blue-light);
}
[data-theme="dark"] .nav-tabs { border-color: var(--fg-border); }
[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--fg-text-muted);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--fg-card);
  border-color: var(--fg-border);
  color: var(--fg-text);
}

/* ── Блок bg-light используемый в карточках фото ─────────────────── */
[data-theme="dark"] .bg-light {
  background-color: var(--fg-border-soft) !important;
  color: var(--fg-text) !important;
}
[data-theme="dark"] .border     { border-color: var(--fg-border) !important; }
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end { border-color: var(--fg-border) !important; }

/* ── Разделители, бэкдроп ─────────────────────────────────────────── */
[data-theme="dark"] hr { border-color: var(--fg-border); }
[data-theme="dark"] .vr { background-color: var(--fg-border); }

/* ── Flash messages в base.html ──────────────────────────────────── */
[data-theme="dark"] .alert-dismissible .btn-close {
  filter: invert(1) brightness(1.5);
}

/* Кнопка переключения темы */
.theme-toggle {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .8rem;
  cursor: pointer;
  transition: all var(--fg-t);
  display: flex;
  align-items: center;
  gap: 5px;
}
.theme-toggle:hover { background: rgba(255,255,255,.2); }

/* ═══════════════════════════════════════════════════════════════════
   УЛУЧШЕНИЕ 2: Пульсирующие статусы
   ═══════════════════════════════════════════════════════════════════ */

@keyframes pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}
@keyframes pulse-fast {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: .3; transform: scale(.6); }
}

/* badge-status styles moved to BADGES section above */

/* Строка с ошибкой — лёгкий красный фон */
tr.row-failed { background: #fff5f5 !important; }
[data-theme="dark"] tr.row-failed { background: #2d0a0a !important; }

/* ═══════════════════════════════════════════════════════════════════
   УЛУЧШЕНИЕ 3: Анимированные счётчики дашборда
   ═══════════════════════════════════════════════════════════════════ */

.stat-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--fg-t), box-shadow var(--fg-t);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--fg-shadow-md) !important; }
.stat-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  border-radius: 0 0 var(--fg-radius-lg) var(--fg-radius-lg);
}
.stat-card.accent-primary::after   { background: var(--fg-blue); }
.stat-card.accent-success::after   { background: var(--fg-sent); }
.stat-card.accent-info::after      { background: var(--fg-queued); }
.stat-card.accent-secondary::after { background: var(--fg-pending); }
.stat-card.accent-warning::after   { background: var(--fg-processing); }
.stat-card.accent-danger::after    { background: var(--fg-failed); }

.stat-count {
  font-size: 2rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.stat-label { font-size: .8rem; color: var(--fg-text-muted); margin-top: 3px; }
.stat-trend { font-size: .75rem; margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   УЛУЧШЕНИЕ 4: Skeleton loader
   ═══════════════════════════════════════════════════════════════════ */

@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 1200px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 1200px 100%;
}
.skeleton-row td { padding: 10px 14px; }
.skeleton-text {
  height: 14px; border-radius: 4px; display: inline-block;
}
.skeleton-badge { height: 20px; width: 70px; border-radius: 20px; display: inline-block; }

/* ═══════════════════════════════════════════════════════════════════
   УЛУЧШЕНИЕ 5: Фотогалерея — улучшенные миниатюры
   ═══════════════════════════════════════════════════════════════════ */

/* Этап-плитка */
.stage-panel {
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.stage-panel-header {
  background: var(--fg-border-soft);
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
[data-theme="dark"] .stage-panel-header { background: #1e293b; }
.stage-panel-body   { padding: 14px 16px; }
.stage-counter {
  font-size: .78rem; font-weight: 700; padding: 2px 9px;
  border-radius: 20px; border: 1px solid;
}
.stage-counter.ok     { color: var(--fg-sent);   border-color: rgba(5,150,105,.3); background: var(--fg-sent-bg); }
.stage-counter.warn   { color: var(--fg-processing); border-color: rgba(217,119,6,.3); background: var(--fg-processing-bg); }
.stage-counter.limit  { color: var(--fg-failed); border-color: rgba(220,38,38,.3); background: var(--fg-failed-bg); }

/* Фото-карточка */
.photo-card {
  position: relative;
  width: 130px; height: 130px;
  border-radius: var(--fg-radius);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--fg-border-soft);
  border: 2px solid transparent;
  transition: border-color var(--fg-t), transform var(--fg-t);
}
.photo-card:hover { border-color: var(--fg-blue); transform: scale(1.03); }
.photo-card img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-card .photo-overlay {
  position: absolute; inset: 0;
  background: rgba(15,43,78,.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--fg-t);
}
.photo-card:hover .photo-overlay { opacity: 1; }
.photo-card .photo-overlay i { color: #fff; font-size: 1.6rem; }

/* Удаление и выделение */
.photo-card .photo-delete {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(220,38,38,.85); color: #fff;
  border: none; display: none; align-items: center; justify-content: center;
  font-size: .7rem; cursor: pointer; z-index: 2;
}
.photo-card:hover .photo-delete { display: flex; }
.photo-card.selected { border-color: var(--fg-blue); }
.photo-card.selected::before {
  content: '✓';
  position: absolute; top: 5px; left: 5px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--fg-blue); color: #fff;
  font-size: .7rem; display: flex; align-items: center; justify-content: center;
}
/* Бейдж дубликата */
.photo-card .badge-dup {
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  background: rgba(217,119,6,.92); color: #fff;
  font-size: .65rem; font-weight: 700; text-align: center;
  border-radius: 3px; padding: 1px 4px; z-index: 2;
}
/* Прогресс загрузки поверх карточки */
.photo-card .photo-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: rgba(255,255,255,.3);
}
.photo-card .photo-progress-bar {
  height: 100%; background: var(--fg-blue);
  transition: width .2s; border-radius: 0 0 2px 2px;
}

/* Кнопка «Выбрать всё / Удалить выбранные» */
.bulk-actions { display: none; gap: 8px; align-items: center; }
.bulk-actions.visible { display: flex; }

/* ═══════════════════════════════════════════════════════════════════
   УЛУЧШЕНИЕ 6: Fullscreen lightbox
   ═══════════════════════════════════════════════════════════════════ */

#fg-lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.92);
  align-items: center; justify-content: center;
}
#fg-lightbox.open { display: flex; }
#fg-lightbox img  { max-width: 90vw; max-height: 88vh; border-radius: 6px; object-fit: contain; }
#fg-lightbox .lb-close {
  position: fixed; top: 18px; right: 24px;
  color: #fff; font-size: 2rem; cursor: pointer; z-index: 10000;
  background: rgba(255,255,255,.12); border-radius: 50%;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border: none; transition: background var(--fg-t);
}
#fg-lightbox .lb-close:hover { background: rgba(255,255,255,.25); }
#fg-lightbox .lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  color: #fff; font-size: 2rem; cursor: pointer;
  background: rgba(255,255,255,.12); border-radius: 50%;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border: none; transition: background var(--fg-t);
}
#fg-lightbox .lb-nav:hover   { background: rgba(255,255,255,.25); }
#fg-lightbox .lb-prev { left:  16px; }
#fg-lightbox .lb-next { right: 16px; }
#fg-lightbox .lb-caption {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.8); font-size: .85rem;
  background: rgba(0,0,0,.5); padding: 4px 16px; border-radius: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   УЛУЧШЕНИЕ 7: Операционный дашборд
   ═══════════════════════════════════════════════════════════════════ */

.dash-section-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-text-faint);
  margin-bottom: 12px;
}
.status-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 500;
}
.status-indicator .dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.status-indicator.ok   .dot { background: var(--fg-sent);       animation: pulse-dot 3s ease-in-out infinite; }
.status-indicator.warn .dot { background: var(--fg-processing); animation: pulse-dot 1.5s ease-in-out infinite; }
.status-indicator.err  .dot { background: var(--fg-failed);     animation: pulse-fast 1s ease-in-out infinite; }

.quick-filter-btn {
  font-size: .8rem; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--fg-border); background: transparent;
  color: var(--fg-text-muted); cursor: pointer;
  transition: all var(--fg-t);
}
.quick-filter-btn:hover,
.quick-filter-btn.active {
  background: var(--fg-blue); border-color: var(--fg-blue); color: #fff;
}

.activity-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--fg-border-soft);
}
.activity-row:last-child { border-bottom: none; }
.activity-bar-wrap {
  flex: 1; height: 6px; border-radius: 3px;
  background: var(--fg-border-soft); overflow: hidden;
}
.activity-bar {
  height: 100%; border-radius: 3px; background: var(--fg-blue);
  transition: width .8s cubic-bezier(.4,0,.2,1);
}


/* ═══════════════════════════════════════════════════════════════════
   ПРЕМИАЛЬНОЕ ВЫРАВНИВАНИЕ — глобальные правила
   ═══════════════════════════════════════════════════════════════════ */

/* ── Таблицы: вертикальное центрирование всех ячеек ── */
.table td, .table th {
  vertical-align: middle;
}

/* ── Строка таблицы: минимальная высота для дышащего ритма ── */
.table td { min-height: 44px; }
.table-sm td { padding-top: .45rem; padding-bottom: .45rem; }
.table-sm th { padding-top: .5rem;  padding-bottom: .5rem; }

/* ── Badge в ячейке таблицы: убираем смещение ── */
.table td .badge,
.table td .badge-status {
  vertical-align: middle;
  position: relative;
  top: 0;
}

/* ── Flexbox-ячейки: иконка + текст ── */
.d-flex.align-items-center { gap: .4rem; }

/* ── Заголовки страниц ── */
h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--fg-navy);
}
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
h4 { font-size: 1rem; font-weight: 600; line-height: 1.35; }
h5 { font-size: .95rem; font-weight: 600; }

/* ── Card title выравнивание ── */
.card-title {
  margin-bottom: .3rem;
  line-height: 1.3;
}

/* ── Кнопки: вертикальный центр текста и иконок ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  line-height: 1;
}
.btn i, .btn .bi { line-height: 1; font-size: .95em; }

/* ── Form label: чёткий ритм ── */
.form-label {
  font-weight: 500;
  font-size: .84rem;
  color: var(--fg-text);
  margin-bottom: .35rem;
  line-height: 1.4;
}

/* ── Nav link: вертикальный центр ── */
.navbar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

/* ── Stat card: чёткие пропорции ── */
.stat-count {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--fg-text);
}
.stat-label {
  font-size: .79rem;
  font-weight: 500;
  color: var(--fg-text-muted);
  margin-top: 4px;
  line-height: 1.3;
  letter-spacing: .01em;
}

/* ── Dashboard system status indicators ── */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1;
}
.status-indicator.ok   { color: var(--fg-sent); }
.status-indicator.warn { color: var(--fg-processing); }
.status-indicator.err  { color: var(--fg-failed); }

/* ── Quick filter buttons ── */
.quick-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .81rem;
  font-weight: 500;
  line-height: 1;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1.5px solid var(--fg-border);
  background: transparent;
  color: var(--fg-text-muted);
  cursor: pointer;
  transition: all var(--fg-t);
  text-decoration: none;
  white-space: nowrap;
}
.quick-filter-btn:hover,
.quick-filter-btn.active {
  background: var(--fg-blue);
  border-color: var(--fg-blue);
  color: #fff;
}

/* ── Small text helpers ── */
.text-nowrap { white-space: nowrap; }
.fw-semibold { font-weight: 600; }

/* ── Card header typography ── */
.card-header {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.4;
  padding: .65rem 1rem;
}
.card-header .fw-semibold { font-size: .88rem; }

/* ── Мелкий текст в ячейках: четкость ── */
.table .small, .table td.small {
  font-size: .8rem;
  line-height: 1.4;
  color: var(--fg-text-muted);
}
.table td { color: var(--fg-text); }
.table td.text-muted, .table td .text-muted { color: var(--fg-text-muted) !important; }