/* ==========================================================================
   EMERALD QUANT DESIGN SYSTEM (CSS TOKENS & UI COMPONENTS)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Цветовая палитра Emerald Quant (Dark Mode First) --- */
  --bg: #0e1511;                         /* Глубокий темно-зеленый фон (Base Layer) */
  --surface-lowest: #09100c;            /* Самый глубокий слой для контрастных подложек */
  --surface-low: #161d19;               /* Цвет для карточек и основных контейнеров (Level 1) */
  --surface: #1a211d;                   /* Цвет для стандартных элементов интерфейса */
  --surface-high: #242c27;              /* Слой над карточками (Hover/Active) (Level 2) */
  --surface-highest: #2f3632;           /* Внешний слой для всплывающих меню (Level 3) */
  --surface-container-lowest: var(--surface-lowest);
  --surface-container-low: var(--surface-low);
  --surface-container: var(--surface);
  --surface-container-high: var(--surface-high);
  --surface-container-highest: var(--surface-highest);
  --scrollbar-thumb: rgba(255, 255, 255, 0.18);
  --scrollbar-thumb-hover: var(--primary);
  --scrollbar-track: rgba(255, 255, 255, 0.02);
  --card-bg: rgba(22, 29, 25, 0.65);
  
  /* --- Сигнальные цвета --- */
  --primary: #10b981;                   /* Emerald Green (основной акцентный цвет) */
  --primary-hover: #059669;             /* Сочный зеленый для ховеров */
  --primary-glow: rgba(16, 185, 129, 0.15);
  --accent: #10b981;                    /* Обратная совместимость с --accent */
  --accent-hover: #059669;
  
  --secondary: #3b82f6;                 /* Электрический синий (навигация, фокус) */
  --secondary-hover: #2563eb;
  --secondary-glow: rgba(59, 130, 246, 0.15);
  
  --tertiary: #ffb3af;                  /* Коралл (дополнительный) */
  --error: #ffb4ab;                     /* Мягкий красный для ошибок/убытков */
  --error-glow: rgba(255, 180, 171, 0.15);
  --success: #4edea3;                   /* Мягкий зеленый для роста/прибыли */
  --success-glow: rgba(78, 222, 163, 0.15);
  
  /* --- Текстовые цвета --- */
  --text: #dde4dd;                      /* Основной текст с легким зеленым отливом */
  --text-bright: #ffffff;               /* Яркий белый для заголовков */
  --text-muted: #bbcabf;                /* Приглушенный текст для подписей */
  
  /* --- Границы и обводки --- */
  --border: rgba(255, 255, 255, 0.08);  /* outline-variant для разделения карточек */
  --border-focus: rgba(16, 185, 129, 0.3);
  --outline: #86948a;                   /* outline для активных границ */
  
  /* --- Геометрия и скругления --- */
  --radius-sm: 0.25rem;                 /* 4px */
  --radius-md: 0.375rem;                /* 6px */
  --radius-lg: 0.5rem;                  /* 8px (Buttons, Inputs) */
  --radius-xl: 0.75rem;                 /* 12px (Cards) */
  --radius-2xl: 1rem;                   /* 16px (Large components) */
  --radius-3xl: 1.5rem;                 /* 24px (Dialogs, Manifesto) */
  --radius-full: 9999px;                /* Pills */
  
  /* --- Шрифты --- */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* --- Цветовая палитра Google Stitch (Luminous Professionalism - Light Mode) --- */
:root.light, html.light, body.light, .light {
  --bg: #f7f9fb;
  --surface-lowest: #ffffff;
  --surface-low: #f2f4f6;
  --surface: #eceef0;
  --surface-high: #e6e8ea;
  --surface-highest: #e0e3e5;
  --surface-container-lowest: var(--surface-lowest);
  --surface-container-low: var(--surface-low);
  --surface-container: var(--surface);
  --surface-container-high: var(--surface-high);
  --surface-container-highest: var(--surface-highest);
  --scrollbar-thumb: rgba(0, 0, 0, 0.18);
  --scrollbar-thumb-hover: var(--primary);
  --scrollbar-track: rgba(0, 0, 0, 0.02);
  --card-bg: rgba(255, 255, 255, 0.75);
  
  --primary: #00696f;
  --primary-hover: #004f54;
  --primary-glow: rgba(0, 105, 111, 0.08);
  --accent: #00f2ff;
  --accent-hover: #00dbe7;
  
  --secondary: #565e74;
  --secondary-hover: #3f465c;
  --secondary-glow: rgba(86, 94, 116, 0.08);
  
  --tertiary: #505f76;
  --error: #ba1a1a;
  --error-glow: rgba(186, 26, 26, 0.06);
  --success: #00696f;
  --success-glow: rgba(0, 105, 111, 0.06);
  
  --text: #1f2937;        /* Очень темный серый, почти черный */
  --text-bright: #000000; /* Абсолютно черный */
  --text-muted: #4b5563;  /* Насыщенный темно-серый */
  
  --border: rgba(15, 23, 42, 0.08);
  --border-focus: rgba(0, 105, 111, 0.25);
  --outline: #6a7a7b;
}

/* Переопределение теней и фонов для светлой темы */
.light .ds-card, .light .glass-card {
  background: var(--card-bg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.8);
  border-color: var(--border);
}
.light .ds-card:hover, .light .glass-card:hover {
  border-color: rgba(5, 150, 105, 0.25);
  box-shadow: 0 16px 36px rgba(5, 150, 105, 0.04), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.9);
}
.light .ds-floating-island, .light .floating-island {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.8);
  border-color: var(--border);
}
.light .ds-floating-island:hover, .light .floating-island:hover {
  border-color: rgba(5, 150, 105, 0.25);
}
.light .num-arrows {
  border-left-color: rgba(0, 0, 0, 0.06);
  background: rgba(234, 239, 233, 0.85);
}
.light .num-btn:first-child {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.light .custom-dropdown-btn {
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-bright);
  border-color: var(--border);
}
.light .custom-dropdown-btn:hover,
.light .custom-dropdown-btn.open {
  background: rgba(5, 150, 105, 0.03);
  border-color: var(--primary);
  box-shadow: 0 0 12px rgba(5, 150, 105, 0.1);
}
.light .custom-dropdown-list {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--border);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1), inset 1px 1px 0px rgba(255,255,255,0.9);
}
.light .custom-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-bright);
}
.light .custom-dropdown-item.active {
  background: rgba(5, 150, 105, 0.05);
}
.light .flatpickr-calendar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--border) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
}
.light .custom-fp-nav {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}
.light .custom-fp-btn {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}
.light .custom-fp-btn:hover:not(:disabled) {
  background: rgba(5, 150, 105, 0.08) !important;
  border-color: rgba(5, 150, 105, 0.25) !important;
}
.light .flatpickr-day:not(.prevMonthDay):not(.nextMonthDay):not(.selected):not(.startRange):not(.endRange):not(.inRange):not(.today) {
  background: rgba(0, 0, 0, 0.01) !important;
  border-color: rgba(0, 0, 0, 0.03) !important;
}
.light .flatpickr-day:not(.prevMonthDay):not(.nextMonthDay):not(.selected):not(.startRange):not(.endRange):not(.inRange):hover {
  background: rgba(5, 150, 105, 0.08) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1) !important;
}
.light .flatpickr-day.selected, 
.light .flatpickr-day.startRange, 
.light .flatpickr-day.endRange {
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3) !important;
}

/* --- Глобальные стили --- */
body {
  background: radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.08), transparent 50%), 
              radial-gradient(circle at 20% 80%, rgba(187, 202, 191, 0.04), transparent 50%), 
              var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  margin: 0;
  min-height: 100vh;
  position: relative;
}

/* --- Премиальный глобальный аналоговый шум --- */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  opacity: 0.04;
  pointer-events: none;
  z-index: 99999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* --- Моноширинный шрифт --- */
.ds-mono, .mono-font {
  font-family: var(--font-mono);
}

/* --- Стеклянные карточки с эффектом rim light (подсветка верхнего левого угла) --- */
.ds-card, .glass-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px) saturate(110%);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 
              inset 1px 1px 0px 0px rgba(255, 255, 255, 0.04);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ds-card:hover, .glass-card:hover {
  border-color: rgba(16, 185, 129, 0.2);
  box-shadow: 0 16px 48px rgba(16, 185, 129, 0.06), 
              inset 1px 1px 0px 0px rgba(255, 255, 255, 0.06);
}

/* --- Анимация перехода для модалок Vue --- */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-enter-active > div, .fade-leave-active > div {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-from > div, .fade-leave-to > div {
  transform: scale(0.95);
}

/* --- Элегантный плавающий островок навигации --- */
.ds-floating-island, .floating-island {
  background: rgba(22, 29, 25, 0.85);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 
              inset 1px 1px 0px 0px rgba(255, 255, 255, 0.04);
  transition: all 0.3s ease;
}

.ds-floating-island:hover, .floating-island:hover {
  border-color: rgba(16, 185, 129, 0.25);
}

/* --- Кнопки с магнитным эффектом (Atmos/Emerald Quant) --- */
.ds-btn, .btn-atmos {
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-weight: 500;
  font-family: var(--font-sans);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}

.ds-btn:hover, .btn-atmos:hover {
  transform: scale(1.03) translateY(-1px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
}

.ds-btn:active, .btn-atmos:active {
  transform: scale(0.98) translateY(0);
}

.ds-btn-primary, .btn-atmos-primary {
  background-color: var(--primary);
  color: #002416 !important;
  border: 1px solid var(--primary);
  font-weight: 600;
}

.ds-btn-primary:hover, .btn-atmos-primary:hover {
  background-color: #34d399;
  border-color: #34d399;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.ds-btn-secondary, .btn-atmos-secondary {
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--text-bright);
}

.ds-btn-secondary:hover, .btn-atmos-secondary:hover {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
}

/* --- Стилизованные Поля ввода (Atmos inputs) --- */
.num-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.num-wrap input[type="number"], .ds-input {
  background-color: rgba(0, 0, 0, 0.4) !important;
  border: none !important;
  border-bottom: 2px solid var(--border) !important;
  color: var(--text-bright);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  padding: 0.375rem 0.5rem;
  width: 85px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align: right;
  -moz-appearance: textfield;
}

.num-wrap input[type="number"]::-webkit-inner-spin-button,
.num-wrap input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.num-wrap input[type="number"]:focus, .ds-input:focus {
  outline: none !important;
  background-color: rgba(16, 185, 129, 0.04) !important;
  border-bottom-color: var(--primary) !important;
  box-shadow: 0 4px 12px var(--primary-glow) !important;
}

.num-wrap input[type="number"] {
  padding-right: 26px !important;
}

/* --- Кастомные стрелочки для числовых полей --- */
.num-arrows {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 2px;
  height: calc(100% - 2px);
  width: 20px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(22, 29, 25, 0.85);
  border-radius: 0 4px 0 0;
  overflow: hidden;
  opacity: 0.4;
  transition: all 0.2s ease;
}

.num-wrap:hover .num-arrows,
.num-wrap:focus-within .num-arrows {
  opacity: 1;
}

.num-wrap input[type="number"]:focus + .num-arrows {
  border-left-color: rgba(16, 185, 129, 0.2);
}

.num-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.num-btn:hover {
  color: var(--primary);
  background: rgba(16, 185, 129, 0.1);
}

.num-btn:active {
  color: #fff;
  background: rgba(16, 185, 129, 0.25);
}

.num-btn:first-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.num-wrap input[type="number"]:focus + .num-arrows .num-btn:first-child {
  border-bottom-color: rgba(16, 185, 129, 0.1);
}

/* --- Стилизация Таблиц высокого разрешения --- */
.ds-table-container {
  background-color: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.ds-table-header {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ds-table-header th {
  padding: 1rem;
}

.ds-table-row {
  border-bottom: 1px solid rgba(60, 74, 66, 0.2);
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.ds-table-row:hover {
  background-color: var(--surface-high);
}

.ds-table-row td {
  padding: 1rem;
}

/* --- Статус-Бейджи и Тренды --- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
}

.ds-badge-success {
  background-color: var(--success-glow);
  color: var(--success);
  border: 1px solid rgba(78, 222, 163, 0.2);
}

.ds-badge-error {
  background-color: var(--error-glow);
  color: var(--error);
  border: 1px solid rgba(255, 180, 171, 0.2);
}

.ds-badge-neutral {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* --- Кастомные скроллбары --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover) !important;
}

/* Кроссбраузерная поддержка для Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* --- Лоадер --- */
.loader {
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top: 2px solid var(--primary);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  animation: spin 0.8s cubic-bezier(0.4, 0.1, 0.1, 1) infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Кастомный дропдаун Atmos --- */
.custom-dropdown {
  position: relative;
  display: inline-block;
  z-index: 40;
}
.custom-dropdown-btn {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 6px 36px 6px 16px;
  font-size: 12px;
  color: var(--text-bright);
  cursor: pointer;
  min-width: 190px;
  max-width: 400px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.25s ease;
  position: relative;
}
.custom-dropdown-btn::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  transition: transform 0.2s;
}
.custom-dropdown-btn.open::after {
  transform: translateY(-50%) rotate(180deg);
}
.custom-dropdown-btn:hover,
.custom-dropdown-btn.open {
  border-color: var(--primary);
  background: rgba(16, 185, 129, 0.04);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);
}
.custom-dropdown-list {
  position: fixed;
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(22, 29, 25, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  z-index: 9999;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7), inset 1px 1px 0px rgba(255,255,255,0.05);
  padding: 6px 0;
  margin-top: 4px;
}
.custom-dropdown-list::-webkit-scrollbar { width: 4px; }
.custom-dropdown-list::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.custom-dropdown-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb) !important; border-radius: 99px; }
.custom-dropdown-item {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
}
.custom-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-bright);
  padding-left: 18px;
}
.custom-dropdown-item.active {
  color: var(--primary);
  font-weight: 600;
  background: rgba(16, 185, 129, 0.06);
}

/* --- Стилизация Flatpickr под дизайн Emerald Quant --- */
.flatpickr-calendar {
  background: rgba(22, 29, 25, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 
              inset 1px 1px 0px 0px rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--radius-2xl) !important;
  font-family: var(--font-sans) !important;
  padding: 12px !important;
  width: 332px !important;
  box-sizing: border-box !important;
}
.flatpickr-months {
  display: none !important;
}
.flatpickr-current-month {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-bright) !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.flatpickr-monthDropdown-months {
  display: none !important;
}
.flatpickr-monthDropdown-months option {
  background-color: var(--bg) !important;
  color: var(--text-bright) !important;
}
.flatpickr-monthDropdown-months:hover {
  color: var(--primary-hover) !important;
}

.flatpickr-current-month .numInputWrapper {
  display: none !important;
}
.flatpickr-current-month input.numInput.cur-year {
  font-weight: 700 !important;
  color: var(--text-bright) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown::after {
  border-right-color: var(--text-muted) !important;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:hover::after {
  border-right-color: var(--primary) !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after {
  border-left-color: var(--text-muted) !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:hover::after {
  border-left-color: var(--primary) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  display: none !important;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  fill: var(--primary) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.flatpickr-weekdays {
  background: transparent !important;
  border-bottom: none !important;
}
.flatpickr-weekday {
  background: transparent !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Кастомная панель навигации месяца и года */
.custom-fp-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 4px 8px !important;
  box-sizing: border-box !important;
}

.custom-fp-section {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.custom-fp-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.custom-fp-btn:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: var(--primary) !important;
}

.custom-fp-btn:disabled {
  opacity: 0.25 !important;
  cursor: default !important;
}

.custom-fp-label {
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  user-select: none !important;
}

.custom-fp-month-label {
  color: var(--primary) !important;
  min-width: 65px !important;
}

.custom-fp-year-label {
  color: var(--text-bright) !important;
  min-width: 45px !important;
}

.flatpickr-day {
  color: var(--text-bright) !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
}

/* Обычные дни */
.flatpickr-day:not(.prevMonthDay):not(.nextMonthDay):not(.selected):not(.startRange):not(.endRange):not(.inRange):not(.today) {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.flatpickr-day:not(.prevMonthDay):not(.nextMonthDay):not(.selected):not(.startRange):not(.endRange):not(.inRange):hover {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: var(--primary) !important;
  color: var(--text-bright) !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--text-muted) !important;
  opacity: 0.2 !important;
}
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: transparent !important;
  opacity: 0.4 !important;
}

.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
  border: 1.5px solid var(--primary) !important;
  background: rgba(16, 185, 129, 0.05) !important;
  color: var(--primary) !important;
}

/* Диапазон и выбор */
.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: var(--primary) !important;
  color: #002416 !important;
  font-weight: 700 !important;
  transform: scale(1.03) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: transparent !important;
  color: var(--primary) !important;
  box-shadow: -5px 0 0 rgba(16, 185, 129, 0.12), 5px 0 0 rgba(16, 185, 129, 0.12) !important;
}

/* --- Классы анимаций и микро-взаимодействий --- */
.ds-pulse-glow {
  animation: pulseGlow 2s infinite ease-in-out;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.1); }
  50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }
}

/* ==========================================================================
   STITCH UI TOOLBAR COMPONENTS
   ========================================================================== */

.btn-stitch-primary {
  height: 38px;
  background-color: var(--primary);
  color: #002416 !important;
  border: 1px solid var(--primary);
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
  user-select: none;
  cursor: pointer;
}
.btn-stitch-primary:hover:not(:disabled) {
  background-color: #34d399;
  border-color: #34d399;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}
.btn-stitch-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}
.btn-stitch-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-stitch-secondary {
  height: 38px;
  background-color: rgba(16, 185, 129, 0.03);
  color: #4edea3 !important;
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  user-select: none;
  cursor: pointer;
}
.btn-stitch-secondary:hover:not(:disabled) {
  background-color: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.45);
  color: #6ffbbe !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}
.btn-stitch-secondary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}
.btn-stitch-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-stitch-danger {
  height: 38px;
  background-color: rgba(255, 255, 255, 0.02);
  color: #ffb4ab !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  user-select: none;
  cursor: pointer;
}
.btn-stitch-danger:hover:not(:disabled) {
  background-color: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ffdad6 !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}
.btn-stitch-danger:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}
.btn-stitch-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Stitch Dropdown Styles */
.custom-dropdown-btn.stitch-dropdown {
  border-radius: var(--radius-lg) !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.custom-dropdown-btn.stitch-dropdown:hover,
.custom-dropdown-btn.stitch-dropdown.open {
  border-color: var(--primary) !important;
  background: rgba(16, 185, 129, 0.04) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.15) !important;
}

/* Stitch Instrument Badges */
.stitch-badge {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-sans);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(0, 0, 0, 0.35);
  color: var(--text-muted);
  transition: all 0.2s ease;
  user-select: none;
}
.stitch-badge:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--text-bright);
}

.stitch-badge-cron {
  background-color: #101613 !important; /* Глубокий темно-зеленый приборный */
  border-color: rgba(16, 185, 129, 0.18) !important;
  color: #bbcabf !important;
}
.stitch-badge-cron:hover {
  border-color: rgba(16, 185, 129, 0.35) !important;
  background-color: #141c18 !important;
  color: #ffffff !important;
}

.stitch-badge-tests-success {
  background-color: rgba(16, 185, 129, 0.04) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
}
.stitch-badge-tests-success:hover {
  border-color: rgba(16, 185, 129, 0.4) !important;
  background-color: rgba(16, 185, 129, 0.08) !important;
  color: #34d399 !important;
}

.stitch-badge-tests-error {
  background-color: rgba(239, 68, 68, 0.04) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
}
.stitch-badge-tests-error:hover {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background-color: rgba(239, 68, 68, 0.08) !important;
  color: #f87171 !important;
}

/* Premium Stitch Search Input */
.stitch-search-input {
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-lg) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  transition: all 0.2s ease !important;
}
.stitch-search-input:focus {
  border-color: var(--primary) !important;
  background-color: rgba(0, 0, 0, 0.55) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.15) !important;
}

/* ==========================================================================
   GOOGLE STITCH (EMERALD QUANT) ADDITIONAL PREMIUM COMPONENTS
   ========================================================================== */

/* Premium Inputs */
.stitch-input {
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-lg) !important;
  color: #ffffff !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  transition: all 0.2s ease !important;
}
.stitch-input:focus {
  border-color: var(--primary) !important;
  background-color: rgba(0, 0, 0, 0.55) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.15) !important;
  outline: none !important;
}

/* Premium Table Rows */
.stitch-row-dark {
  background-color: var(--surface-lowest) !important;
  transition: all 0.15s ease !important;
}
tr.stitch-row-dark td {
  background-color: var(--surface-lowest) !important;
  transition: all 0.15s ease !important;
}
tr.stitch-row-dark:hover td,
tr.stitch-row-dark.active-row td {
  background-color: var(--surface-low) !important;
}

/* Row Left Indicators (applied to the first td which is sticky left) */
td.row-indicator-minus:first-child {
  border-left: 3px solid #ef4444 !important;
}
td.row-indicator-zero:first-child {
  border-left: 3px solid #f59e0b !important;
}
td.row-indicator-low:first-child {
  border-left: 3px solid rgba(59, 130, 246, 0.65) !important;
}
td.row-indicator-ok:first-child {
  border-left: 3px solid transparent !important;
}

/* Premium Stitch Micro-Badges */
.stitch-badge-minus {
  background-color: rgba(239, 68, 68, 0.08) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-sm) !important;
}
.stitch-badge-zero {
  background-color: rgba(245, 158, 11, 0.08) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-sm) !important;
}
.stitch-badge-low {
  background-color: rgba(59, 130, 246, 0.08) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-sm) !important;
}

/* Premium Product Image */
.stitch-product-img {
  width: 40px !important;
  height: 48px !important;
  object-fit: cover !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background-color: var(--surface-low) !important;
  transition: all 0.2s ease !important;
}
.stitch-product-img:hover {
  border-color: var(--primary) !important;
  transform: scale(1.04);
}

/* --- Стили для светлой темы (Специальные переопределения) --- */
.light .stitch-badge-minus {
  color: #b91c1c !important;
  background-color: rgba(185, 28, 28, 0.05) !important;
  border-color: rgba(185, 28, 28, 0.2) !important;
}
.light .stitch-badge-zero {
  color: #b45309 !important;
  background-color: rgba(180, 83, 9, 0.05) !important;
  border-color: rgba(180, 83, 9, 0.2) !important;
}
.light .stitch-badge-low {
  color: #1d4ed8 !important;
  background-color: rgba(29, 78, 216, 0.05) !important;
  border-color: rgba(29, 78, 216, 0.2) !important;
}
.light .stitch-product-img {
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Фиксы наездов верстки и улучшение отступов для таблиц */
.ds-table-container, .scrollbar-thin {
  scrollbar-width: thin;
}

/* Увеличиваем контрастность рамок в инпутах в светлой теме */
.light input[type="number"], .light .ds-input {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
  color: var(--text-bright);
}
.light input[type="number"]:focus, .light .ds-input:focus {
  background-color: rgba(5, 150, 105, 0.02) !important;
  border-bottom-color: var(--primary) !important;
}

/* --- Стилизация вкладок фильтрации (Filter Tabs) --- */
.filter-tab {
  height: 32px;
  padding: 0 0.875rem;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--text-muted);
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.filter-tab:hover {
  color: var(--text-bright);
  background-color: var(--surface-high);
}

.filter-tab.active-all {
  background-color: var(--surface-highest);
  color: var(--text-bright);
  border-color: var(--border);
  font-weight: 600;
}

/* Убыточные */
.filter-tab.type-loss {
  color: #f87171;
}
.light .filter-tab.type-loss {
  color: #dc2626;
}
.filter-tab.type-loss:hover {
  background-color: rgba(239, 68, 68, 0.08);
}
.filter-tab.active-loss {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
  font-weight: 600;
}
.light .filter-tab.active-loss {
  background-color: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
  color: #dc2626;
}

/* В ноль */
.filter-tab.type-zero {
  color: #fbbf24;
}
.light .filter-tab.type-zero {
  color: #d97706;
}
.filter-tab.type-zero:hover {
  background-color: rgba(245, 158, 11, 0.08);
}
.filter-tab.active-zero {
  background-color: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  font-weight: 600;
}
.light .filter-tab.active-zero {
  background-color: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.25);
  color: #d97706;
}

/* Мин. прибыль */
.filter-tab.type-low {
  color: #60a5fa;
}
.light .filter-tab.type-low {
  color: #2563eb;
}
.filter-tab.type-low:hover {
  background-color: rgba(59, 130, 246, 0.08);
}
.filter-tab.active-low {
  background-color: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
  font-weight: 600;
}
.light .filter-tab.active-low {
  background-color: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
  color: #2563eb;
}

/* Выше целевой */
.filter-tab.type-aboveTarget {
  color: #34d399;
}
.light .filter-tab.type-aboveTarget {
  color: #059669;
}
.filter-tab.type-aboveTarget:hover {
  background-color: rgba(52, 211, 153, 0.08);
}
.filter-tab.active-aboveTarget {
  background-color: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
  color: #34d399;
  font-weight: 600;
}
.light .filter-tab.active-aboveTarget {
  background-color: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.25);
  color: #059669;
}

/* Нулевая закупка */
.filter-tab.type-nopurchase {
  color: #9ca3af;
}
.light .filter-tab.type-nopurchase {
  color: #4b5563;
}
.filter-tab.type-nopurchase:hover {
  background-color: rgba(156, 163, 175, 0.08);
}
.filter-tab.active-nopurchase {
  background-color: rgba(156, 163, 175, 0.15);
  border-color: rgba(156, 163, 175, 0.3);
  color: #9ca3af;
  font-weight: 600;
}
.light .filter-tab.active-nopurchase {
  background-color: rgba(75, 85, 99, 0.08);
  border-color: rgba(75, 85, 99, 0.25);
  color: #4b5563;
}

/* С продажами */
.filter-tab.type-salesOnly {
  color: #34d399;
}
.light .filter-tab.type-salesOnly {
  color: #059669;
}
.filter-tab.type-salesOnly:hover {
  background-color: rgba(52, 211, 153, 0.08);
}
.filter-tab.active-salesOnly {
  background-color: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
  color: #34d399;
  font-weight: 600;
}
.light .filter-tab.active-salesOnly {
  background-color: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.25);
  color: #059669;
}

/* В наличии */
.filter-tab.type-inStock {
  color: #34d399;
}
.light .filter-tab.type-inStock {
  color: #059669;
}
.filter-tab.type-inStock:hover {
  background-color: rgba(52, 211, 153, 0.08);
}
.filter-tab.active-inStock {
  background-color: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
  color: #34d399;
  font-weight: 600;
}
.light .filter-tab.active-inStock {
  background-color: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.25);
  color: #059669;
}

/* Нет в наличии */
.filter-tab.type-outOfStock {
  color: #f87171;
}
.light .filter-tab.type-outOfStock {
  color: #dc2626;
}
.filter-tab.type-outOfStock:hover {
  background-color: rgba(239, 68, 68, 0.08);
}
.filter-tab.active-outOfStock {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
  font-weight: 600;
}
.light .filter-tab.active-outOfStock {
  background-color: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
  color: #dc2626;
}

/* Архив */
.filter-tab.type-archive {
  color: #9ca3af;
}
.light .filter-tab.type-archive {
  color: #4b5563;
}
.filter-tab.type-archive:hover {
  background-color: rgba(156, 163, 175, 0.08);
}
.filter-tab.active-archive {
  background-color: rgba(156, 163, 175, 0.15);
  border-color: rgba(156, 163, 175, 0.3);
  color: #9ca3af;
  font-weight: 600;
}
.light .filter-tab.active-archive {
  background-color: rgba(75, 85, 99, 0.08);
  border-color: rgba(75, 85, 99, 0.25);
  color: #4b5563;
}

/* Светлая шапка таблицы */
.light th {
  background-color: var(--surface-low) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border) !important;
}
.light td {
  border-bottom-color: var(--border) !important;
}
.light .bg-\[\#0d0d12\] {
  background-color: var(--surface-low) !important;
}
.light td.bg-\[\#162721\] {
  background-color: var(--surface-low) !important;
  color: var(--text-bright) !important;
}
.light .text-white {
  color: var(--text) !important;
}
.light .text-white\/35 {
  color: var(--text-muted) !important;
}
.light .text-white\/40 {
  color: var(--text-muted) !important;
}
.light .text-white\/60 {
  color: var(--text) !important;
}
.light .text-white\/70 {
  color: var(--text) !important;
}
.light .text-white\/80 {
  color: var(--text-bright) !important;
}
.light .border-white\/10 {
  border-color: var(--border) !important;
}
.light .border-white\/5 {
  border-color: var(--border) !important;
}
.light .bg-black\/35 {
  background-color: var(--surface) !important;
}
.light .bg-black\/60 {
  background-color: var(--surface-low) !important;
}
.light .stitch-toolbar {
  background-color: var(--surface-lowest) !important;
  border-color: var(--border) !important;
}
.light #settings-modal-tabs button.border-transparent {
  color: var(--text-muted) !important;
}
.light #settings-modal-tabs button.border-transparent:hover {
  color: var(--text-bright) !important;
}
.light #settings-modal-tabs button.border-primary {
  color: var(--primary) !important;
}

/* AI Ассистент в светлой теме */
.light button.bg-purple-500\/10 {
  background-color: rgba(168, 85, 247, 0.08) !important;
  color: #7e22ce !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
}
.light button.bg-purple-500\/35 {
  background-color: #7e22ce !important;
  color: #ffffff !important;
  border-color: #7e22ce !important;
  box-shadow: 0 4px 12px rgba(126, 34, 206, 0.2) !important;
}

/* --- Исправление элементов управления Stitch UI в светлой теме --- */

/* 1. Выпадающие списки Stitch */
.light .custom-dropdown-btn.stitch-dropdown {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: var(--border) !important;
  color: var(--text-bright) !important;
}
.light .custom-dropdown-btn.stitch-dropdown::after {
  border-top-color: var(--text-muted) !important;
}
.light .custom-dropdown-btn.stitch-dropdown:hover,
.light .custom-dropdown-btn.stitch-dropdown.open {
  background: rgba(5, 150, 105, 0.03) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 12px rgba(5, 150, 105, 0.08) !important;
}

/* 2. Поля ввода Stitch */
.light .stitch-input,
.light .stitch-search-input {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-bright) !important;
}
.light .stitch-input:focus,
.light .stitch-search-input:focus {
  background-color: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 8px rgba(5, 150, 105, 0.12) !important;
}

/* 3. Бэйджи Stitch */
.light .stitch-badge {
  background-color: rgba(0, 0, 0, 0.02) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.light .stitch-badge:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-bright) !important;
}
.light .stitch-badge-cron {
  background-color: rgba(5, 150, 105, 0.04) !important;
  border-color: rgba(5, 150, 105, 0.15) !important;
  color: var(--primary) !important;
}
.light .stitch-badge-cron:hover {
  background-color: rgba(5, 150, 105, 0.08) !important;
  color: var(--primary-hover) !important;
}

/* --- Маппинг захардкоженных темных утилит Tailwind в светлой теме --- */

/* Фоновые полупрозрачные слои */
.light .bg-black\/20 { background-color: rgba(0, 0, 0, 0.02) !important; }
.light .bg-black\/30 { background-color: rgba(0, 0, 0, 0.03) !important; }
.light .bg-black\/35 { background-color: rgba(0, 0, 0, 0.03) !important; }
.light .bg-black\/40 { background-color: rgba(0, 0, 0, 0.04) !important; }
.light .bg-black\/50 { background-color: rgba(0, 0, 0, 0.05) !important; }
.light .bg-black\/60 { background-color: rgba(0, 0, 0, 0.06) !important; }
.light .bg-black\/90 { background-color: var(--surface-lowest) !important; }

/* Нейтральные захардкоженные фоны */
.light .bg-neutral-800\/20 { background-color: rgba(0, 0, 0, 0.02) !important; }
.light .bg-neutral-800\/60 { background-color: rgba(0, 0, 0, 0.04) !important; }
.light .bg-neutral-800\/80 { background-color: rgba(0, 0, 0, 0.06) !important; }
.light .bg-neutral-800 { background-color: var(--surface-high) !important; }
.light .bg-neutral-900 { background-color: var(--surface-lowest) !important; }
.light .bg-neutral-900\/40 { background-color: rgba(0, 0, 0, 0.03) !important; }
.light .bg-neutral-950\/20 { background-color: rgba(0, 0, 0, 0.02) !important; }

/* Цинковые фоны */
.light .bg-zinc-800\/50 { background-color: rgba(0, 0, 0, 0.03) !important; }
.light .bg-zinc-900\/80 { background-color: rgba(0, 0, 0, 0.05) !important; }

/* Границы и рамки */
.light .border-white\/5 { border-color: rgba(0, 0, 0, 0.05) !important; }
.light .border-white\/10 { border-color: rgba(0, 0, 0, 0.08) !important; }
.light .border-white\/15 { border-color: rgba(0, 0, 0, 0.1) !important; }
.light .border-white\/20 { border-color: rgba(0, 0, 0, 0.12) !important; }
.light .border-white\/25 { border-color: rgba(0, 0, 0, 0.15) !important; }
.light .border-neutral-700 { border-color: var(--border) !important; }
.light .border-neutral-800 { border-color: var(--border) !important; }
.light .border-zinc-700\/50 { border-color: rgba(0, 0, 0, 0.08) !important; }
.light .border-zinc-800 { border-color: rgba(0, 0, 0, 0.1) !important; }

/* Контрастность текстов */
.light .text-white\/15 { color: rgba(0, 0, 0, 0.15) !important; }
.light .text-white\/20 { color: rgba(0, 0, 0, 0.2) !important; }
.light .text-white\/30 { color: var(--text-muted) !important; opacity: 0.6 !important; }
.light .text-white\/40 { color: var(--text-muted) !important; }
.light .text-white\/50 { color: var(--text-muted) !important; }
.light .text-white\/60 { color: var(--text) !important; }
.light .text-white\/70 { color: var(--text) !important; }
.light .text-white\/80 { color: var(--text-bright) !important; }
.light .text-white\/90 { color: var(--text-bright) !important; }
.light .text-white\/95 { color: var(--text-bright) !important; }
.light .text-neutral-300 { color: var(--text) !important; }
.light .text-neutral-400 { color: var(--text-muted) !important; }
.light .text-neutral-500 { color: var(--text-muted) !important; opacity: 0.8 !important; }
.light .text-red-300 { color: #b91c1c !important; }

/* Кнопки "✕" закрытия модалок */
.light button.text-white\/60:hover {
  color: var(--text-bright) !important;
}
.light button.text-on-surface-variant:hover {
  color: var(--text-bright) !important;
}

/* --- Специфичные кнопки Stitch в светлой теме --- */
.light .btn-stitch-primary {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(0, 105, 111, 0.15) !important;
}
.light .btn-stitch-primary:hover:not(:disabled) {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 105, 111, 0.25) !important;
}
.light .btn-stitch-secondary {
  background-color: rgba(0, 105, 111, 0.04) !important;
  color: var(--primary) !important;
  border-color: rgba(0, 105, 111, 0.15) !important;
}
.light .btn-stitch-secondary:hover:not(:disabled) {
  background-color: rgba(0, 105, 111, 0.08) !important;
  border-color: rgba(0, 105, 111, 0.35) !important;
  color: var(--primary-hover) !important;
}
.light .btn-stitch-secondary:hover:not(:disabled) svg {
  color: var(--primary-hover) !important;
}
.light .btn-stitch-danger {
  background-color: rgba(186, 26, 26, 0.06) !important;
  color: #ba1a1a !important;
  border-color: rgba(186, 26, 26, 0.22) !important;
}
.light .btn-stitch-danger:hover:not(:disabled) {
  background-color: rgba(186, 26, 26, 0.12) !important;
  border-color: rgba(186, 26, 26, 0.4) !important;
  color: #93000a !important;
}

/* Таблицы в светлой теме */
.light .ds-table-row {
  border-bottom: 1px solid var(--border) !important;
}
.light .ds-table-container {
  box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
}


/* --- Высококонтрастные цвета шрифтов для светлой темы (WCAG AA Compliant) --- */
.light .text-red-400 {
  color: #b91c1c !important; /* Глубокий темно-красный */
}
.light .text-red-400\/80 {
  color: rgba(185, 28, 28, 0.8) !important;
}
.light .text-blue-400 {
  color: #1d4ed8 !important; /* Глубокий королевский синий */
}
.light .text-blue-400\/80 {
  color: rgba(29, 78, 216, 0.8) !important;
}
.light .text-emerald-400 {
  color: #047857 !important; /* Глубокий лесной зеленый */
}
.light .text-emerald-400\/80 {
  color: rgba(4, 120, 87, 0.8) !important;
}
.light .text-purple-400 {
  color: #7e22ce !important; /* Глубокий фиолетовый */
}
.light .text-purple-400\/80 {
  color: rgba(126, 34, 206, 0.8) !important;
}
.light .text-neutral-400\/80 {
  color: var(--text-muted) !important;
}

/* Подписи-счетчики в круглых скобках для вкладок */
.light .text-red-500\/40 {
  color: #b91c1c !important;
  opacity: 0.65 !important;
}
.light .text-blue-500\/40 {
  color: #1d4ed8 !important;
  opacity: 0.65 !important;
}
.light .text-emerald-500\/40 {
  color: #047857 !important;
  opacity: 0.65 !important;
}
.light .text-purple-500\/40 {
  color: #7e22ce !important;
  opacity: 0.65 !important;
}
.light .text-neutral-500\/40 {
  color: var(--text-muted) !important;
  opacity: 0.65 !important;
}

/* Полупрозрачные бэкграунды вкладок при активном состоянии */
.light .bg-red-500\/10 {
  background-color: rgba(185, 28, 28, 0.08) !important;
}
.light .bg-blue-500\/10 {
  background-color: rgba(29, 78, 216, 0.08) !important;
}
.light .bg-emerald-500\/10 {
  background-color: rgba(4, 120, 87, 0.08) !important;
}
.light .bg-purple-500\/15 {
  background-color: rgba(126, 34, 206, 0.1) !important;
}
.light .bg-neutral-500\/10 {
  background-color: rgba(106, 122, 123, 0.08) !important;
}
.light .border-red-500\/20 {
  border-color: rgba(185, 28, 28, 0.2) !important;
}
.light .border-blue-500\/20 {
  border-color: rgba(29, 78, 216, 0.2) !important;
}
.light .border-emerald-500\/20 {
  border-color: rgba(4, 120, 87, 0.2) !important;
}
.light .border-purple-500\/30 {
  border-color: rgba(126, 34, 206, 0.25) !important;
}
.light .border-neutral-500\/20 {
  border-color: rgba(106, 122, 123, 0.2) !important;
}

/* --- Стилизация всех модальных окон под светлую тему --- */
.light .fixed.inset-0 > div[class*="bg-"] {
  background-color: var(--surface-container-lowest) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Глобальное переопределение темных HEX фонов контейнеров окон */
.light .bg-\[\#0A0A0C\],
.light .bg-\[\#0B0B0F\],
.light .bg-\[\#0D0D12\],
.light .bg-\[\#0c100e\],
.light .bg-\[\#0c1510\],
.light .bg-\[\#0d0d12\],
.light .bg-[#0B0B0F],
.light .bg-[#0b0b0f],
.light .bg-[#0c1510],
.light .bg-neutral-900,
.light .bg-\[\#111115\],
.light .bg-\[\#17171e\] {
  background-color: var(--surface-container-lowest) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Переопределение внутренних контейнеров, карточек и плашек в модальных окнах */
.light .bg-\[\#121217\],
.light .bg-\[\#16161D\],
.light .bg-\[\#1A1A22\],
.light .bg-\[\#2A2A38\],
.light .bg-neutral-950,
.light .bg-neutral-900\/40,
.light .bg-white\/5,
.light .bg-black\/20,
.light .bg-black\/35,
.light .bg-neutral-800 {
  background-color: var(--surface-low) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Исключение для оверлеев модалок (чтобы подложка за окном оставалась темной/размытой) */
.light .fixed.inset-0.bg-black\/60,
.light .fixed.inset-0.bg-black\/75,
.light .fixed.inset-0.bg-black\/80,
.light .fixed.inset-0.bg-black\/85,
.light .fixed.inset-0.bg-black\/90,
.light .fixed.inset-0.bg-black\/95 {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Цвета текстов, заглавий и описаний внутри модалок в светлой теме */
.light .fixed.inset-0 h2,
.light .fixed.inset-0 h3,
.light .fixed.inset-0 .text-white,
.light .fixed.inset-0 strong.text-white\/80,
.light .fixed.inset-0 strong {
  color: var(--text-bright) !important;
}

.light .fixed.inset-0 p,
.light .fixed.inset-0 .text-white\/50,
.light .fixed.inset-0 .text-white\/70,
.light .fixed.inset-0 .text-neutral-400,
.light .fixed.inset-0 .text-\[\#8E8E93\],
.light .fixed.inset-0 .text-\[\#A3A3A3\] {
  color: var(--text-muted) !important;
}

/* Границы и разделители в модалках */
.light .fixed.inset-0 .border-white\/5,
.light .fixed.inset-0 .border-white\/10,
.light .fixed.inset-0 .border-neutral-800 {
  border-color: var(--border) !important;
}

/* --- Семантические утилиты фонов и границ для всех тем (Google Stitch совместимость) --- */
.bg-surface-container-lowest {
  background-color: var(--surface-container-lowest) !important;
}
.bg-surface-container-low {
  background-color: var(--surface-low) !important;
}
.bg-surface-container {
  background-color: var(--surface) !important;
}
.bg-surface-container-high {
  background-color: var(--surface-high) !important;
}
.bg-surface-container-highest {
  background-color: var(--surface-highest) !important;
}
.border-outline-variant {
  border-color: var(--border) !important;
}

/* Переопределение переменных текста вкладок настроек */
.light .text-on-surface-variant {
  color: var(--text-muted) !important;
}
.light .text-on-surface {
  color: var(--text-bright) !important;
}
.light .hover\:text-on-surface:hover {
  color: var(--text-bright) !important;
}