/**
 * 🎨 SoulPulse Master Styles v3.0
 * Профессиональная единая система стилей
 * 
 * АРХИТЕКТУРА:
 * 1. unified.css - Базовые переменные и компоненты
 * 2. master.css - Координация и расширенные стили
 * 3. platform.css - Платформенные адаптации
 * 4. components.css - Специфичные компоненты
 */

/* ===== ИМПОРТ БАЗОВОЙ СИСТЕМЫ ===== */

/**
 * 🎨 SoulPulse Unified Styles v2.0
 * Современная унифицированная система стилей для всех платформ
 */

/* ===== СБРОС И БАЗОВЫЕ СТИЛИ ===== */

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

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--sp-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
  font-size: 16px;
  line-height: 1.5;
  background: var(--sp-gradient-background, linear-gradient(135deg, #f9fafb 0%, #ffffff 100%));
  color: var(--sp-text-primary, #111827);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Предотвращаем FOUC: скрываем до готовности */

html:not(.sp-ready) body { opacity: 0; }

html.sp-ready body { opacity: 1; transition: opacity 200ms ease; }

/* ===== CSS ПЕРЕМЕННЫЕ ПО УМОЛЧАНИЮ ===== */

:root {
  /* Основные цвета (универсальные) */
  /* Calm palette */
  --sp-color-primary: #6b7bd1;            /* спокойный сине‑лиловый */
  --sp-color-primary-hover: #5d6cbc;
  --sp-color-primary-light: #e7ebff;
  --sp-color-secondary: #8aa6c1;          /* мягкий серо‑голубой */
  --sp-color-secondary-hover: #7895b2;
  --sp-color-secondary-light: #e8f0f6;
  --sp-color-accent: #d3a15f;             /* тёплый песочно‑золотой */
  --sp-color-accent-hover: #bf8f4f;
  --sp-color-accent-light: #f8eddc;
  
  /* Состояния */
  --sp-state-active: #007bff;
  --sp-state-hover: #0056b3;
  --sp-interactive-active: #0056b3;
  --sp-interactive-hover: #004085;
  
  /* Switch переключатели */
  --sp-switch-bg: #d1d5db;
  --sp-switch-bg-checked: #10b981;
  --sp-switch-handle: #ffffff;
  --sp-switch-border: #e5e7eb;
  
  /* Фоны (светлая тема по умолчанию) */
  --sp-bg-primary: #ffffff;
  --sp-bg-secondary: #f6f8fb;            /* мяглее */
  --sp-bg-tertiary: #eef2f7;
  --sp-bg-card: rgba(255, 255, 255, 0.92);
  --sp-bg-card-hover: rgba(248, 250, 252, 0.96);
  --sp-bg-hover: #eef2f7;
  --sp-bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Тексты (светлая тема по умолчанию) */
  --sp-text-primary: #111827;
  --sp-text-secondary: #5d6470;          /* спокойнее контраст */
  --sp-text-tertiary: #8e98a6;
  --sp-text-inverse: #ffffff;
  --sp-text-on-primary: #ffffff;
  --sp-text-disabled: #d1d5db;
  
  /* Границы (светлая тема по умолчанию) */
  --sp-border-primary: #e3e8ef;
  --sp-border-secondary: #edf2f7;
  --sp-border-focus: #6b7bd1;
  
  /* Семантические цвета */
  --sp-color-success: #10b981;
  --sp-color-success-hover: #059669;
  --sp-color-success-light: #d1fae5;
  --sp-color-warning: #f59e0b;
  --sp-color-warning-light: #fef3c7;
  --sp-color-danger: #ef4444;
  --sp-color-danger-light: #fee2e2;
  --sp-color-info: #6366f1;
  
  /* Градиенты (светлая тема по умолчанию) */
  --sp-gradient-primary: linear-gradient(135deg, #6b7bd1 0%, #8aa6c1 100%);
  --sp-gradient-secondary: linear-gradient(135deg, #8aa6c1 0%, #d3a15f 100%);
  --sp-gradient-accent: linear-gradient(135deg, #d3a15f 0%, #e7c089 100%);
  --sp-gradient-background: linear-gradient(135deg, #f6f8fb 0%, #ffffff 100%);
  --sp-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 248, 251, 0.92) 100%);
  
  /* Тени */
  /* Более мягкие тени для "объёмных" элементов */
  --sp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --sp-shadow-md: 0 6px 12px rgba(15, 23, 42, 0.08);
  --sp-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.1);
  --sp-shadow-xl: 0 20px 35px rgba(15, 23, 42, 0.12);
  --sp-shadow-glow: 0 0 18px rgba(107, 123, 209, 0.25);
  
  /* Размеры и отступы */
  --sp-spacing-xs: 0.25rem;
  --sp-spacing-sm: 0.5rem;
  --sp-spacing-md: 1rem;
  --sp-spacing-lg: 1.5rem;
  --sp-spacing-xl: 2rem;
  
  /* Радиусы */
  /* Более округлая геометрия */
  --sp-radius-sm: 8px;
  --sp-radius-md: 12px;
  --sp-radius-lg: 16px;
  --sp-radius-xl: 20px;
  
  /* Типография */
  --sp-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --sp-font-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'source-code-pro', Menlo, Consolas, monospace;
  
  /* Платформенные настройки */
  --sp-platform-header-height: 64px;
  --sp-platform-sidebar-width: 250px;
  
  /* Анимации */
  --sp-transition-fast: 150ms ease;
  --sp-transition-normal: 200ms ease;
  --sp-transition-slow: 300ms ease;

  /* Подсветка кода (минимальная дифференциация) */
  --code-bg: #0f172a;           /* тёмный синий фон */
  --code-fg: #e5e7eb;           /* светлый текст */
  --code-keyword: #93c5fd;      /* голубой */
  --code-string: #fcd34d;       /* жёлтый */
  --code-number: #fca5a5;       /* розовый */
  --code-func: #a7f3d0;         /* мятный */
  --code-comment: #94a3b8;      /* серый */
}

/* ===== ТЕМНАЯ ТЕМА ===== */

.sp-theme-dark {
  --sp-color-primary: #6366f1;
  --sp-color-primary-hover: #5048e5;
  --sp-color-primary-light: #e0e7ff;
  --sp-color-secondary: #8b5cf6;
  --sp-color-secondary-hover: #7c3aed;
  --sp-color-secondary-light: #ede9fe;
  --sp-color-accent: #f59e0b;
  --sp-color-accent-hover: #d97706;
  --sp-color-accent-light: #fef3c7;
  
  /* Состояния */
  --sp-state-active: #0ea5e9;
  --sp-state-hover: #0284c7;
  --sp-interactive-active: #0284c7;
  --sp-interactive-hover: #0369a1;
  
  /* Switch переключатели */
  --sp-switch-bg: #374151;
  --sp-switch-bg-checked: #059669;
  --sp-switch-handle: #f9fafb;
  --sp-switch-border: #4b5563;
  
  /* Фоны (темная тема) */
  --sp-bg-primary: #0f0f0f;
  --sp-bg-secondary: #111827;
  --sp-bg-tertiary: #1f2937;
  --sp-bg-card: rgba(42, 42, 42, 0.95);
  --sp-bg-card-hover: rgba(55, 65, 81, 0.98);
  --sp-bg-hover: #374151;
  --sp-bg-overlay: rgba(0, 0, 0, 0.8);
  
  /* Тексты (темная тема) */
  --sp-text-primary: #ffffff;
  --sp-text-secondary: #9ca3af;
  --sp-text-tertiary: #6b7280;
  --sp-text-inverse: #111827;
  --sp-text-on-primary: #ffffff;
  --sp-text-disabled: #4b5563;
  
  /* Границы (темная тема) */
  --sp-border-primary: #374151;
  --sp-border-secondary: #1f2937;
  
  /* Градиенты (темная тема) */
  --sp-gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --sp-gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --sp-gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --sp-gradient-background: linear-gradient(135deg, #1a1a3a 0%, #0f0f0f 100%);
  --sp-gradient-card: linear-gradient(135deg, rgba(42, 42, 42, 0.95) 0%, rgba(26, 26, 26, 0.95) 100%);
  
  /* Тени (темная тема) */
  --sp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --sp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --sp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --sp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --sp-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.5);
}

/* ===== СВЕТЛАЯ ТЕМА ===== */

.sp-theme-light {
  --sp-color-primary: #5048e5;
  --sp-color-primary-hover: #4338ca;
  --sp-color-secondary: #7c3aed;
  --sp-color-accent: #d97706;
  
  --sp-bg-primary: #ffffff;
  --sp-bg-secondary: #f9fafb;
  --sp-bg-tertiary: #f3f4f6;
  --sp-bg-card: rgba(255, 255, 255, 0.95);
  --sp-bg-card-hover: rgba(229, 231, 235, 0.98);
  --sp-bg-hover: #e5e7eb;
  --sp-bg-overlay: rgba(255, 255, 255, 0.8);
  
  --sp-text-primary: #111827;
  --sp-text-secondary: #4b5563;
  --sp-text-tertiary: #6b7280;
  --sp-text-inverse: #ffffff;
  --sp-text-disabled: #9ca3af;
  
  --sp-border-primary: #e5e7eb;
  --sp-border-secondary: #f3f4f6;
  
  --sp-color-success: #059669;
  --sp-color-success-hover: #047857;
  --sp-color-warning: #d97706;
  --sp-color-danger: #dc2626;
  --sp-color-info: #5048e5;
  
  --sp-gradient-background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
  --sp-gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.95) 100%);
}

/* ===== БАЗОВЫЕ КОМПОНЕНТЫ ===== */

/* Карточки */

.sp-card {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border-primary);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--sp-spacing-lg);
  transition: all var(--sp-transition-normal);
}

.sp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-lg);
}

.sp-card--interactive {
  cursor: pointer;
}

.sp-card--interactive:hover {
  border-color: var(--sp-border-focus);
  box-shadow: var(--sp-shadow-glow);
}

/* Кнопки */

.sp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-spacing-sm);
  padding: var(--sp-spacing-sm) var(--sp-spacing-md);
  border: none;
  border-radius: var(--sp-radius-md);
  font-family: var(--sp-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--sp-transition-fast);
  user-select: none;
}

.sp-button--primary {
  background: var(--sp-color-primary);
  color: var(--sp-text-inverse);
}

.sp-button--primary:hover {
  background: var(--sp-color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--sp-shadow-md);
}

.sp-button--secondary {
  background: var(--sp-bg-secondary);
  color: var(--sp-text-primary);
  border: 1px solid var(--sp-border-primary);
}

.sp-button--secondary:hover {
  background: var(--sp-bg-hover);
  border-color: var(--sp-border-focus);
}

.sp-button--ghost {
  background: transparent;
  color: var(--sp-text-primary);
  border: 1px solid transparent;
}

.sp-button--ghost:hover {
  background: var(--sp-bg-hover);
  border-color: var(--sp-border-primary);
}

/* Инпуты */

.sp-input {
  width: 100%;
  padding: var(--sp-spacing-sm) var(--sp-spacing-md);
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border-primary);
  border-radius: var(--sp-radius-md);
  color: var(--sp-text-primary);
  font-family: var(--sp-font-family);
  font-size: 14px;
  line-height: 1.5;
  transition: all var(--sp-transition-fast);
}

.sp-input:focus {
  outline: none;
  border-color: var(--sp-border-focus);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.sp-input::placeholder {
  color: var(--sp-text-tertiary);
}

/* Текст */

.sp-text--primary {
  color: var(--sp-text-primary);
}

.sp-text--secondary {
  color: var(--sp-text-secondary);
}

.sp-text--tertiary {
  color: var(--sp-text-tertiary);
}

.sp-text--success {
  color: var(--sp-color-success);
}

.sp-text--warning {
  color: var(--sp-color-warning);
}

.sp-text--danger {
  color: var(--sp-color-danger);
}

/* ===== ПЛАТФОРМЕННЫЕ СТИЛИ ===== */

/* Общие стили для всех платформ */

.sp-platform-container {
  min-height: 100vh;
  background: var(--sp-gradient-background);
  color: var(--sp-text-primary);
  overflow: auto; /* включаем скролл для обходного режима */
}

/* ===== Минимальная подсветка кода ===== */

.sp-code {
  font-family: var(--sp-font-mono);
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 10px;
  padding: 10px 12px;
  display: block;
  white-space: pre-wrap;
}

.sp-code .kw { color: var(--code-keyword); }

.sp-code .str { color: var(--code-string); }

.sp-code .num { color: var(--code-number); }

.sp-code .fn  { color: var(--code-func); }

.sp-code .cm  { color: var(--code-comment); font-style: italic; }

/* Telegram Mini App */

.sp-platform-telegram {
  height: 100dvh;
  overflow-x: hidden; /* не блокируем вертикальный скролл */
  --sp-platform-header-height: 56px;
  /* Платформенные calm‑настройки для Mini App: компактнее и чуть выше контраст */
  --sp-radius-lg: 14px;
  --sp-radius-xl: 18px;
  --sp-shadow-md: 0 4px 10px rgba(15, 23, 42, 0.10);
  --sp-shadow-lg: 0 10px 20px rgba(15, 23, 42, 0.12);
  --sp-text-secondary: #526070;
}

.sp-platform-telegram .sp-header {
  height: var(--sp-platform-header-height);
  padding: 0 var(--sp-spacing-md);
  background: rgba(15, 15, 15, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sp-border-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.sp-platform-telegram .sp-content {
  padding: 1px;
  height: calc(100dvh - var(--sp-platform-header-height) - 28px);
  overflow-y: auto;
  overflow-x: hidden; /* предотвращаем горизонтальный скролл внутри контента */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Формы/настройки в MiniApp — ширина 100%, без вылетов и перенаполнений */

.telegram-mini-app .settings-page,
.telegram-mini-app .profile-page,
.telegram-mini-app .ant-layout-content,
.telegram-mini-app .ant-card,
.telegram-mini-app .ant-tabs,
.telegram-mini-app .ant-tabs-content,
.telegram-mini-app .ant-tabs-tabpane {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.telegram-mini-app .ant-tabs-nav-wrap {
  overflow: hidden !important;
}

.telegram-mini-app .ant-card-body {
  padding: var(--sp-spacing-xs) !important;
}

/* Settings: Tabs — без лишних отступов и паддингов */

.telegram-mini-app .settings-page .ant-tabs {
  background: transparent !important;
}

.telegram-mini-app .settings-page .ant-tabs > .ant-tabs-nav {
  margin: 0 !important;
}

.telegram-mini-app .settings-page .ant-tabs .ant-tabs-content-holder {
  padding: 0 !important;
}

/* Иконки и стрелки в Select/Dropdown читаемые */

.telegram-mini-app .ant-select .ant-select-arrow,
.telegram-mini-app .ant-dropdown .anticon,
.telegram-mini-app .ant-select .anticon {
  color: var(--sp-text-primary) !important;
}

/* Компактные карточки и теги в Mini App */

.sp-platform-telegram .sp-card,
.sp-platform-telegram .sp-card-elevated {
  padding: var(--sp-spacing-md);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-md);
}

.sp-platform-telegram .ant-tag {
  padding: 0 8px !important;
  line-height: 20px !important;
  border-radius: 12px !important;
}

.sp-platform-telegram .sp-bottom-menu {
  height: 26px;
  background: rgba(15, 15, 15, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(148,163,184,0.35); /* тоньше рамка */
  box-shadow: inset 0 0.5px 0 rgba(148,163,184,0.35); /* едва заметная линия */
  display: flex;
  align-items: center;
  padding: 0 6px;
}

/* Web Platform */

.sp-platform-web {
  min-height: 100vh;
}

.sp-platform-web .sp-header {
  height: var(--sp-platform-header-height);
  padding: 0 var(--sp-spacing-lg);
  background: rgba(15, 15, 15, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sp-border-primary);
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sp-platform-web .sp-layout {
  display: flex;
  min-height: calc(100vh - var(--sp-platform-header-height));
}

.sp-platform-web .sp-sidebar {
  width: var(--sp-platform-sidebar-width);
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--sp-border-primary);
  padding: var(--sp-spacing-lg) 0;
  position: sticky;
  top: var(--sp-platform-header-height);
  height: calc(100vh - var(--sp-platform-header-height));
  overflow-y: auto;
}

.sp-platform-web .sp-content {
  flex: 1;
  padding: var(--sp-spacing-lg);
  min-height: calc(100vh - var(--sp-platform-header-height));
}

/* Чуть просторнее теги/карточки в Web */

.sp-platform-web .sp-card,
.sp-platform-web .sp-card-elevated {
  padding: var(--sp-spacing-lg);
  border-radius: var(--sp-radius-xl);
}

.sp-platform-web .ant-tag {
  padding: 2px 10px !important;
  border-radius: 14px !important;
}

/* ===== УТИЛИТАРНЫЕ КЛАССЫ ===== */

/* Отступы */

.sp-m-0 { margin: 0; }

.sp-m-1 { margin: var(--sp-spacing-xs); }

.sp-m-2 { margin: var(--sp-spacing-sm); }

.sp-m-3 { margin: var(--sp-spacing-md); }

.sp-m-4 { margin: var(--sp-spacing-lg); }

.sp-m-5 { margin: var(--sp-spacing-xl); }

.sp-p-0 { padding: 0; }

.sp-p-1 { padding: var(--sp-spacing-xs); }

.sp-p-2 { padding: var(--sp-spacing-sm); }

.sp-p-3 { padding: var(--sp-spacing-md); }

.sp-p-4 { padding: var(--sp-spacing-lg); }

.sp-p-5 { padding: var(--sp-spacing-xl); }

/* Flexbox */

.sp-flex { display: flex; }

.sp-flex-col { flex-direction: column; }

.sp-flex-row { flex-direction: row; }

.sp-items-center { align-items: center; }

.sp-justify-center { justify-content: center; }

.sp-justify-between { justify-content: space-between; }

.sp-gap-1 { gap: var(--sp-spacing-xs); }

.sp-gap-2 { gap: var(--sp-spacing-sm); }

.sp-gap-3 { gap: var(--sp-spacing-md); }

.sp-gap-4 { gap: var(--sp-spacing-lg); }

/* Размеры */

.sp-w-full { width: 100%; }

.sp-h-full { height: 100%; }

.sp-min-h-screen { min-height: 100vh; }

/* Позиционирование */

.sp-relative { position: relative; }

.sp-absolute { position: absolute; }

.sp-fixed { position: fixed; }

.sp-sticky { position: sticky; }

/* Скрытие */

.sp-hidden { display: none; }

.sp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== АНИМАЦИИ ===== */

@keyframes sp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sp-slide-up {
  from { 
    transform: translateY(20px);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes sp-scale-in {
  from { 
    transform: scale(0.9);
    opacity: 0;
  }
  to { 
    transform: scale(1);
    opacity: 1;
  }
}

.sp-animate-fade-in {
  animation: sp-fade-in 200ms ease-out;
}

.sp-animate-slide-up {
  animation: sp-slide-up 300ms ease-out;
}

.sp-animate-scale-in {
  animation: sp-scale-in 200ms ease-out;
}

/* ===== АДАПТИВНОСТЬ ===== */

@media (max-width: 768px) {
  .sp-platform-web .sp-sidebar {
    display: none;
  }
  
  .sp-platform-web .sp-content {
    padding: var(--sp-spacing-md);
  }
  
  .sp-card {
    padding: var(--sp-spacing-md);
  }
}

@media (max-width: 475px) {
  .sp-platform-web .sp-content {
    padding: var(--sp-spacing-sm);
  }
  
  .sp-card {
    padding: var(--sp-spacing-sm);
  }
}

/* ===== СОВМЕСТИМОСТЬ С ANT DESIGN ===== */

/* Переопределяем стили Ant Design для соответствия нашей теме */

.sp-platform-container .ant-card {
  background: var(--sp-bg-card) !important;
  border-color: var(--sp-border-primary) !important;
  border-radius: var(--sp-radius-lg) !important;
}

.sp-platform-container .ant-card-head {
  background: transparent !important;
  border-bottom-color: var(--sp-border-primary) !important;
}

.sp-platform-container .ant-card-head-title {
  color: var(--sp-text-primary) !important;
}

.sp-platform-container .ant-btn-primary {
  background: var(--sp-color-primary) !important;
  border-color: var(--sp-color-primary) !important;
}

.sp-platform-container .ant-btn-primary:hover {
  background: var(--sp-color-primary-hover) !important;
  border-color: var(--sp-color-primary-hover) !important;
}

.sp-platform-container .ant-input {
  background: var(--sp-bg-secondary) !important;
  border-color: var(--sp-border-primary) !important;
  color: var(--sp-text-primary) !important;
}

.sp-platform-container .ant-input:focus {
  border-color: var(--sp-border-focus) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

/* ===== СКРОЛЛБАРЫ ===== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--sp-border-primary);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sp-text-tertiary);
}

/* Firefox */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--sp-border-primary) var(--sp-bg-secondary);
}

/* Дополнительные переменные для модернизации */

:root {
  /* Альфа-версии основного цвета */
  --sp-color-primary-alpha-80: rgba(99, 102, 241, 0.8);
  --sp-color-primary-alpha-70: rgba(99, 102, 241, 0.7);
  --sp-color-primary-alpha-50: rgba(99, 102, 241, 0.5);
  
  /* Тени для текста */
  --sp-shadow-text: 0 1px 2px rgba(0, 0, 0, 0.8);
  --sp-shadow-text-strong: 0 2px 4px rgba(0, 0, 0, 0.9);
  
  /* Дополнительные размеры шрифтов */
  --sp-font-size-4xl: 48px;
  --sp-font-size-3xl: 36px;
  --sp-font-size-2xl: 32px;
  --sp-font-size-xl: 24px;
  --sp-font-size-lg: 18px;
  --sp-font-size-base: 16px;
  --sp-font-size-sm: 14px;
  --sp-font-size-xs: 12px;
  
  /* Дополнительные радиусы скругления */
  --sp-border-radius-xs: 4px;
  --sp-border-radius-sm: 8px;
  --sp-border-radius-md: 12px;
  --sp-border-radius-lg: 16px;
  --sp-border-radius-xl: 20px;
  
  /* Дополнительные переходы */
  --sp-transition-fast: all 0.2s ease;
  --sp-transition-normal: all 0.3s ease;
  --sp-transition-slow: all 0.5s ease;
  
  /* Дополнительные отступы */
  --sp-spacing-xs: 8px;
  --sp-spacing-sm: 12px;
  --sp-spacing-md: 16px;
  --sp-spacing-lg: 20px;
  --sp-spacing-xl: 24px;
  --sp-spacing-2xl: 32px;
  --sp-spacing-3xl: 48px;
  
  /* Размеры контейнеров */
  --sp-container-sm: 400px;
  --sp-container-md: 600px;
  --sp-container-lg: 800px;
  --sp-container-xl: 1200px;
  
  /* Размеры элементов UI */
  --sp-button-min-width: 140px;
  --sp-input-height: 40px;
  --sp-header-height: 60px;
  
  /* Цвета состояний */
  --sp-color-error: #ef4444;
  --sp-bg-error: #fef2f2;
  --sp-color-success-light: #064e3b;
  --sp-color-primary-light: #312e81;
  --sp-color-secondary-light: #3c1361;
  --sp-color-secondary-hover: #7c3aed;
  --sp-color-warning: #f59e0b;
  --sp-color-warning-light: #451a03;
  --sp-color-danger-light: #7f1d1d;
  --sp-color-accent-light: #451a03;
  --sp-color-accent-hover: #d97706;
  --sp-bg-warning: #fef3c7;
  
  /* Альфа-версии белого цвета */
  --sp-white-alpha-90: rgba(255, 255, 255, 0.9);
  --sp-white-alpha-85: rgba(255, 255, 255, 0.85);
  --sp-white-alpha-80: rgba(255, 255, 255, 0.8);
  --sp-white-alpha-70: rgba(255, 255, 255, 0.7);
  --sp-white-alpha-30: rgba(255, 255, 255, 0.3);
  --sp-white-alpha-20: rgba(255, 255, 255, 0.2);
  --sp-white-alpha-15: rgba(255, 255, 255, 0.15);
  --sp-white-alpha-10: rgba(255, 255, 255, 0.1);
  --sp-white-alpha-05: rgba(255, 255, 255, 0.05);
  
  /* Альфа-версии черного цвета */
  --sp-black-alpha-50: rgba(0, 0, 0, 0.5);
  --sp-black-alpha-30: rgba(0, 0, 0, 0.3);
  --sp-black-alpha-20: rgba(0, 0, 0, 0.2);
  --sp-black-alpha-15: rgba(0, 0, 0, 0.15);
  --sp-black-alpha-10: rgba(0, 0, 0, 0.1);
  --sp-black-alpha-05: rgba(0, 0, 0, 0.05);
}

/* ===== ТЕГИ (универсально, без хардкода, на базе дизайн‑токенов) ===== */

.sp-tag {
  border: 1px solid var(--sp-border-primary) !important;
  border-radius: 12px !important;
  font-weight: 500 !important;
}

/* Типы */

.sp-tag--type-birthday {
  background: color-mix(in srgb, var(--sp-color-accent) 12%, var(--sp-bg-card)) !important;
  color: color-mix(in srgb, var(--sp-color-accent) 55%, var(--sp-text-primary)) !important;
  border-color: color-mix(in srgb, var(--sp-color-accent) 45%, var(--sp-border-primary)) !important;
}

.sp-tag--type-meeting {
  background: color-mix(in srgb, var(--sp-color-secondary) 12%, var(--sp-bg-card)) !important;
  color: color-mix(in srgb, var(--sp-color-secondary) 55%, var(--sp-text-primary)) !important;
  border-color: color-mix(in srgb, var(--sp-color-secondary) 45%, var(--sp-border-primary)) !important;
}

.sp-tag--type-deadline {
  background: color-mix(in srgb, var(--sp-color-danger) 12%, var(--sp-bg-card)) !important;
  color: color-mix(in srgb, var(--sp-color-danger) 55%, var(--sp-text-primary)) !important;
  border-color: color-mix(in srgb, var(--sp-color-danger) 45%, var(--sp-border-primary)) !important;
}

.sp-tag--type-holiday {
  background: color-mix(in srgb, var(--sp-color-success) 12%, var(--sp-bg-card)) !important;
  color: color-mix(in srgb, var(--sp-color-success) 55%, var(--sp-text-primary)) !important;
  border-color: color-mix(in srgb, var(--sp-color-success) 45%, var(--sp-border-primary)) !important;
}

.sp-tag--type-custom,
.sp-tag--type-reminder {
  background: color-mix(in srgb, var(--sp-color-secondary) 8%, var(--sp-bg-card)) !important;
  color: color-mix(in srgb, var(--sp-color-secondary) 40%, var(--sp-text-primary)) !important;
  border-color: color-mix(in srgb, var(--sp-color-secondary) 30%, var(--sp-border-primary)) !important;
}

/* Приоритеты */

.sp-tag--prio-low {
  background: color-mix(in srgb, var(--sp-color-secondary) 8%, var(--sp-bg-card)) !important;
  color: color-mix(in srgb, var(--sp-text-secondary) 80%, var(--sp-text-primary)) !important;
}

.sp-tag--prio-medium {
  background: color-mix(in srgb, var(--sp-color-primary) 10%, var(--sp-bg-card)) !important;
  color: color-mix(in srgb, var(--sp-color-primary) 55%, var(--sp-text-primary)) !important;
}

.sp-tag--prio-high {
  background: color-mix(in srgb, var(--sp-color-accent) 12%, var(--sp-bg-card)) !important;
  color: color-mix(in srgb, var(--sp-color-accent) 55%, var(--sp-text-primary)) !important;
}

.sp-tag--prio-urgent {
  background: color-mix(in srgb, var(--sp-color-danger) 14%, var(--sp-bg-card)) !important;
  color: color-mix(in srgb, var(--sp-color-danger) 60%, var(--sp-text-primary)) !important;
}

/* ===== РАСШИРЕННЫЕ ПЕРЕМЕННЫЕ ===== */

:root {
  /* Дополнительные цветовые вариации */
  --sp-color-primary-50: #eef2ff;
  --sp-color-primary-100: #e0e7ff;
  --sp-color-primary-200: #c7d2fe;
  --sp-color-primary-300: #a5b4fc;
  --sp-color-primary-400: #818cf8;
  --sp-color-primary-500: #6366f1;
  --sp-color-primary-600: #5048e5;
  --sp-color-primary-700: #4338ca;
  --sp-color-primary-800: #3730a3;
  --sp-color-primary-900: #312e81;
  
  /* Семантические состояния */
  --sp-state-hover: var(--sp-color-primary-50);
  --sp-state-active: var(--sp-color-primary-100);
  --sp-state-focus: var(--sp-color-primary-500);
  --sp-state-disabled: var(--sp-text-disabled);
  
  /* Интерактивные элементы */
  --sp-interactive-hover: rgba(99, 102, 241, 0.1);
  --sp-interactive-active: rgba(99, 102, 241, 0.2);
  --sp-interactive-focus: 0 0 0 3px rgba(99, 102, 241, 0.3);
  
  /* Анимации и переходы */
  --sp-animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --sp-animation-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --sp-animation-sharp: cubic-bezier(0.4, 0, 0.6, 1);
  
  /* Размеры контента */
  --sp-content-max-width: 1200px;
  --sp-content-padding: var(--sp-spacing-lg);
  --sp-sidebar-width: 280px;
  --sp-header-height: 72px;
  
  /* Z-индексы */
  --sp-z-dropdown: 1000;
  --sp-z-sticky: 1020;
  --sp-z-fixed: 1030;
  --sp-z-modal-backdrop: 1040;
  --sp-z-modal: 1050;
  --sp-z-popover: 1060;
  --sp-z-tooltip: 1070;
  --sp-z-toast: 1080;
}

/* ===== ТЕМНАЯ ТЕМА - РАСШИРЕННЫЕ ПЕРЕМЕННЫЕ ===== */

.sp-theme-dark {
  /* Дополнительные цвета для темной темы */
  --sp-color-primary-50: #1e1b4b;
  --sp-color-primary-100: #312e81;
  --sp-color-primary-200: #3730a3;
  --sp-color-primary-300: #4338ca;
  --sp-color-primary-400: #5048e5;
  --sp-color-primary-500: #6366f1;
  --sp-color-primary-600: #818cf8;
  --sp-color-primary-700: #a5b4fc;
  --sp-color-primary-800: #c7d2fe;
  --sp-color-primary-900: #e0e7ff;
  
  /* Состояния для темной темы */
  --sp-state-hover: rgba(255, 255, 255, 0.05);
  --sp-state-active: rgba(255, 255, 255, 0.1);
  --sp-interactive-hover: rgba(255, 255, 255, 0.05);
  --sp-interactive-active: rgba(255, 255, 255, 0.1);
}

/* ===== СВЕТЛАЯ ТЕМА - РАСШИРЕННЫЕ ПЕРЕМЕННЫЕ ===== */

.sp-theme-light {
  /* Дополнительные цвета для светлой темы */
  --sp-color-primary-50: #eef2ff;
  --sp-color-primary-100: #e0e7ff;
  --sp-color-primary-200: #c7d2fe;
  --sp-color-primary-300: #a5b4fc;
  --sp-color-primary-400: #818cf8;
  --sp-color-primary-500: #6366f1;
  --sp-color-primary-600: #5048e5;
  --sp-color-primary-700: #4338ca;
  --sp-color-primary-800: #3730a3;
  --sp-color-primary-900: #312e81;
  
  /* Состояния для светлой темы */
  --sp-state-hover: var(--sp-color-primary-50);
  --sp-state-active: var(--sp-color-primary-100);
  --sp-interactive-hover: rgba(99, 102, 241, 0.05);
  --sp-interactive-active: rgba(99, 102, 241, 0.1);
}

/* ===== ГЛОБАЛЬНЫЕ УЛУЧШЕНИЯ ===== */

/* Улучшенная типография */

.sp-platform-container h1, 
.sp-platform-container h2, 
.sp-platform-container h3, 
.sp-platform-container h4, 
.sp-platform-container h5, 
.sp-platform-container h6 {
  color: var(--sp-text-primary);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--sp-spacing-md) 0;
}

h1 { font-size: 2.5rem; }

h2 { font-size: 2rem; }

h3 { font-size: 1.75rem; }

h4 { font-size: 1.5rem; }

h5 { font-size: 1.25rem; }

h6 { font-size: 1.125rem; }

/* Улучшенные параграфы */

.sp-platform-container p {
  color: var(--sp-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--sp-spacing-md) 0;
}

/* Улучшенные ссылки */

.sp-platform-container a {
  color: var(--sp-color-primary);
  text-decoration: none;
  transition: all var(--sp-transition-fast);
}

.sp-platform-container a:hover {
  color: var(--sp-color-primary-hover);
  text-decoration: underline;
}

/* ===== РАСШИРЕННЫЕ КОМПОНЕНТЫ ===== */

/* Улучшенные карточки */

.sp-card-elevated {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border-primary);
  border-radius: var(--sp-radius-xl);
  box-shadow: var(--sp-shadow-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--sp-spacing-xl);
  transition: all var(--sp-transition-normal);
  position: relative;
  overflow: hidden;
}

.sp-card-elevated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(107,123,209,0.4), rgba(255,255,255,0));
  opacity: 1;
}

.sp-card-elevated:hover {
  transform: translateY(-4px);
  box-shadow: var(--sp-shadow-xl);
  border-color: var(--sp-border-focus);
}

/* Мягкая подсветка краёв для объёмности */

.sp-edge-highlight {
  position: relative;
}

.sp-edge-highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.6) inset,
    0 -1px 0 0 rgba(0,0,0,0.05) inset,
    0 0 0 1px rgba(255,255,255,0.4) inset;
}

.sp-soft-card {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border-primary);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-md);
  transition: transform var(--sp-transition-fast), box-shadow var(--sp-transition-fast), border-color var(--sp-transition-fast);
}

.sp-soft-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-lg);
  border-color: var(--sp-border-focus);
}

/* Улучшенные кнопки */

.sp-button-primary {
  background: var(--sp-gradient-primary);
  color: var(--sp-text-inverse);
  border: none;
  border-radius: var(--sp-radius-lg);
  padding: var(--sp-spacing-sm) var(--sp-spacing-lg);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--sp-transition-fast);
  box-shadow: var(--sp-shadow-md);
  position: relative;
  overflow: hidden;
}

.sp-button-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left var(--sp-transition-normal);
}

.sp-button-primary:hover::before {
  left: 100%;
}

.sp-button-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-lg);
}

.sp-button-primary:active {
  transform: translateY(0);
  box-shadow: var(--sp-shadow-sm);
}

/* Улучшенные формы */

.sp-input {
  width: 100%;
  padding: var(--sp-spacing-sm) var(--sp-spacing-md);
  border: 2px solid var(--sp-border-primary);
  border-radius: var(--sp-radius-lg);
  background: var(--sp-bg-primary);
  color: var(--sp-text-primary);
  font-size: 14px;
  transition: all var(--sp-transition-fast);
}

.sp-input:focus {
  outline: none;
  border-color: var(--sp-border-focus);
  box-shadow: var(--sp-interactive-focus);
  background: var(--sp-bg-card);
}

.sp-input::placeholder {
  color: var(--sp-text-tertiary);
}

/* ===== УТИЛИТАРНЫЕ КЛАССЫ ===== */

/* Отступы */

.sp-m-0 { margin: 0; }

.sp-m-xs { margin: var(--sp-spacing-xs); }

.sp-m-sm { margin: var(--sp-spacing-sm); }

.sp-m-md { margin: var(--sp-spacing-md); }

.sp-m-lg { margin: var(--sp-spacing-lg); }

.sp-m-xl { margin: var(--sp-spacing-xl); }

.sp-p-0 { padding: 0; }

.sp-p-xs { padding: var(--sp-spacing-xs); }

.sp-p-sm { padding: var(--sp-spacing-sm); }

.sp-p-md { padding: var(--sp-spacing-md); }

.sp-p-lg { padding: var(--sp-spacing-lg); }

.sp-p-xl { padding: var(--sp-spacing-xl); }

/* Цвета текста */

.sp-text-primary { color: var(--sp-text-primary); }

.sp-text-secondary { color: var(--sp-text-secondary); }

.sp-text-tertiary { color: var(--sp-text-tertiary); }

.sp-text-success { color: var(--sp-color-success); }

.sp-text-warning { color: var(--sp-color-warning); }

.sp-text-danger { color: var(--sp-color-danger); }

/* Фоны */

.sp-bg-primary { background: var(--sp-bg-primary); }

.sp-bg-secondary { background: var(--sp-bg-secondary); }

.sp-bg-card { background: var(--sp-bg-card); }

/* Границы */

.sp-border { border: 1px solid var(--sp-border-primary); }

.sp-border-primary { border-color: var(--sp-border-primary); }

.sp-border-focus { border-color: var(--sp-border-focus); }

/* Скругления */

.sp-rounded-sm { border-radius: var(--sp-radius-sm); }

.sp-rounded-md { border-radius: var(--sp-radius-md); }

.sp-rounded-lg { border-radius: var(--sp-radius-lg); }

.sp-rounded-xl { border-radius: var(--sp-radius-xl); }

/* Тени */

.sp-shadow-sm { box-shadow: var(--sp-shadow-sm); }

.sp-shadow-md { box-shadow: var(--sp-shadow-md); }

.sp-shadow-lg { box-shadow: var(--sp-shadow-lg); }

/* Мягкий hover для кликабельных рядов/элементов */

.sp-soft-hover {
  transition: background var(--sp-transition-fast), transform var(--sp-transition-fast), box-shadow var(--sp-transition-fast);
}

.sp-soft-hover:hover { 
  background: var(--sp-interactive-hover);
}

/* Современное меню: таблетки/пилюли */

.sp-platform-container .ant-menu {
  background: transparent !important;
  border: none !important;
}

.sp-platform-container .ant-menu-horizontal > .ant-menu-item,
.sp-platform-container .ant-menu-inline .ant-menu-item {
  border-radius: 999px !important;
  margin: 2px 6px !important;
  padding: 6px 12px !important;
}

.sp-platform-container .ant-menu-item-selected {
  background: var(--sp-interactive-active) !important;
  color: var(--sp-text-primary) !important;
}

/* Переходы */

.sp-transition { transition: all var(--sp-transition-normal); }

.sp-transition-fast { transition: all var(--sp-transition-fast); }

.sp-transition-slow { transition: all var(--sp-transition-slow); }

/* ===== АДАПТИВНОСТЬ ===== */

@media (max-width: 768px) {
  :root {
    --sp-content-padding: var(--sp-spacing-md);
    --sp-sidebar-width: 100%;
    --sp-header-height: 64px;
  }
  
  .sp-card-elevated {
    padding: var(--sp-spacing-lg);
  }
  
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
}

@media (max-width: 480px) {
  :root {
    --sp-content-padding: var(--sp-spacing-sm);
  }
  
  .sp-card-elevated {
    padding: var(--sp-spacing-md);
  }
  
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}

/* ===== АНИМАЦИИ ===== */

@keyframes sp-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sp-slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes sp-bounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
  40%, 43% { transform: translate3d(0, -10px, 0); }
  70% { transform: translate3d(0, -5px, 0); }
  90% { transform: translate3d(0, -2px, 0); }
}

.sp-animate-fade-in { animation: sp-fade-in 0.3s ease-out; }

.sp-animate-slide-in { animation: sp-slide-in 0.3s ease-out; }

.sp-animate-bounce { animation: sp-bounce 1s ease-out; }

/* ===== СПЕЦИАЛЬНЫЕ ЭФФЕКТЫ ===== */

/* Skeleton shimmer */

@keyframes sp-skeleton {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

/* Утилита для skeleton (можно использовать как класс при необходимости) */

.sp-skeleton {
  background: linear-gradient(90deg, rgba(200,200,200,0.25), rgba(160,160,160,0.35), rgba(200,200,200,0.25));
  background-size: 200px 100%;
  animation: sp-skeleton 1.2s ease-in-out infinite;
}

.sp-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sp-theme-dark .sp-glass {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sp-glow {
  box-shadow: 0 0 20px var(--sp-color-primary);
}

.sp-gradient-text {
  background: var(--sp-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* SoulPulse Mini App Styles v2.0 */

/* очищено: глобальные * и body перенесены в unified.css */

/* Основные переменные - НАСЛЕДУЕМ ОТ UNIFIED SYSTEM */
/* очищено: дубли переменных :root перенесены в unified.css */

/* Динамический фон поверх системной темы Telegram */
/* очищено: фоны-оверлеи управляются через unified.css */

/* Топбар и заголовок: мягкий полупрозрачный фон через переменную */
.soulpulse-header { --topbar-bg: rgba(15, 16, 32, 0.6); background: transparent !important; border: 0 !important; }
.telegram-mini-app .soulpulse-header { 
  --topbar-bg: rgba(15,15,15,0.85) !important; 
  background: var(--topbar-bg) !important; 
  border: 0 !important; 
  backdrop-filter: blur(10px) !important;
}

/* Экраны */
.sp-platform-container .screen {
  min-height: 100vh;
  padding: var(--sp-spacing-md);
  display: flex;
  flex-direction: column;
}

/* Экран загрузки */
.sp-platform-container .loading {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.sp-platform-container .loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-spacing-md);
}

.sp-platform-container .spinner {
  width: var(--sp-spacing-3xl);
  height: var(--sp-spacing-3xl);
  border: 3px solid var(--sp-border-primary);
  border-top: 3px solid var(--sp-color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Экран приветствия */
.welcome {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--sp-spacing-2xl) var(--sp-spacing-md);
}

.welcome-content {
  max-width: var(--sp-container-sm, 400px);
  width: 100%;
}

.logo {
  margin-bottom: var(--sp-spacing-xl);
}

.soul-icon {
  font-size: var(--sp-font-size-4xl);
  display: block;
  margin-bottom: var(--sp-spacing-xs);
  filter: drop-shadow(0 0 20px var(--sp-color-primary-alpha-50, rgba(99, 102, 241, 0.5)));
}

.logo h1 {
  margin: 0;
  font-size: var(--sp-font-size-2xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--sp-color-primary), var(--sp-color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  font-size: var(--sp-font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--sp-spacing-2xl);
}

.welcome-text {
  text-align: left;
  margin-bottom: var(--sp-spacing-2xl);
  padding: var(--sp-spacing-lg);
  background: var(--bg-card);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-light);
}

.welcome-text ul {
  margin: var(--sp-spacing-md) 0;
  padding-left: var(--sp-spacing-lg);
}

.welcome-text li {
  margin-bottom: var(--sp-spacing-xs);
}

/* Заголовок приложения */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-spacing-xl);
  padding: var(--sp-spacing-md) 0;
  border-bottom: 1px solid var(--border-light);
}

.app-header h1 {
  margin: 0;
  font-size: var(--sp-font-size-xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sp-text-primary);
  text-shadow: var(--sp-shadow-text);
}

.app-header .soul-icon {
  font-size: var(--sp-font-size-xl);
  filter: drop-shadow(0 0 10px var(--sp-color-primary-alpha-50, rgba(99, 102, 241, 0.5)));
}

.settings-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 8px 12px;
  color: var(--sp-text-primary);
  font-size: var(--sp-font-size-base);
  cursor: pointer;
  transition: var(--sp-transition-fast);
}

.settings-btn:hover {
  background: var(--bg-hover);
  transform: translateY(-1px);
}

/* Информация о пользователе */
.user-info {
  margin-bottom: var(--sp-spacing-xl);
  padding: var(--sp-spacing-lg);
  background: var(--sp-interactive-hover);
  border-radius: var(--border-radius);
  border: 1px solid var(--sp-border-focus);
}

/* Начальный текст делаем максимально читаемым */
.user-info, .user-info p { color: var(--sp-text-primary); }

.user-info p {
  margin: 0;
}

.user-info p:first-child {
  font-size: var(--sp-font-size-lg);
  font-weight: 600;
  margin-bottom: var(--sp-spacing-xs);
}

.hint {
  color: var(--text-secondary);
  font-size: var(--sp-font-size-sm);
}

/* Секции */
.section {
  margin-bottom: var(--sp-spacing-2xl);
}

.section h3 {
  margin: 0 0 16px 0;
  font-size: var(--sp-font-size-lg);
  font-weight: 600;
  color: var(--sp-text-primary);
}

/* Сетка промптов */
.prompts-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* УДАЛЕНО: Дублированные стили prompt-card - используем унифицированные стили ниже */

.prompt-content {
  padding: var(--sp-spacing-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-spacing-md);
  cursor: pointer;
  user-select: none;
}

/* Информация о промпте */
.prompt-info {
  flex: 1;
}

/* Заголовок промпта */
.prompt-header {
  display: flex;
  align-items: center;
  gap: var(--sp-spacing-sm);
  margin-bottom: var(--sp-spacing-xs);
}

/* Аватар промпта */
.prompt-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 0 8px var(--sp-white-alpha-30));
  /* Фиксированные размеры для предотвращения сплющивания */
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  flex-shrink: 0 !important;
  /* Объем для значков */
  box-shadow: 
    0 2px 4px var(--sp-black-alpha-10),
    inset 0 1px 0 var(--sp-white-alpha-20) !important;
  border: 1px solid var(--sp-white-alpha-10) !important;
  border-radius: var(--sp-border-radius-md) !important;
  transform: scale(1) !important;
  transition: all 0.2s ease !important;
}

.prompt-avatar:hover {
  transform: scale(1.05) !important;
  box-shadow: 
    0 4px 8px var(--sp-black-alpha-15),
    inset 0 1px 0 var(--sp-white-alpha-30) !important;
}

/* Внутренние элементы аватара */
.prompt-avatar .ant-avatar,
.prompt-avatar img,
.prompt-avatar svg,
.prompt-avatar .anticon {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--sp-border-radius-sm) !important;
}

/* Секция заголовка */
.prompt-title-section {
  flex: 1;
}

/* Заголовок промпта */
.prompt-title {
  margin: 0 !important;
  color: var(--sp-text-primary) !important;
  font-size: var(--sp-font-size-lg) !important;
}

/* Теги промпта */
.prompt-tags {
  display: flex;
  align-items: center;
  gap: var(--sp-spacing-xs);
  margin-top: var(--sp-spacing-xs);
  flex-wrap: wrap !important; /* Перенос тегов на новую строку */
  max-width: 100% !important; /* Ограничиваем ширину */
  overflow: hidden !important; /* Предотвращаем выезд за границы */
}

.prompt-icon {
  font-size: var(--sp-font-size-2xl);
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px var(--sp-white-alpha-30));
}

.icon-emoji {
  font-size: var(--sp-font-size-3xl);
  line-height: 1;
}

.prompt-category {
  display: inline-block;
  background: var(--sp-interactive-hover);
  color: var(--sp-text-primary);
  padding: 2px var(--sp-spacing-xs);
  border-radius: var(--sp-border-radius-md);
  font-size: var(--sp-font-size-xs);
  font-weight: 500;
  margin-top: var(--sp-spacing-xs);
  border: 1px solid var(--sp-border-focus);
}

.prompt-settings {
  margin-top: var(--sp-spacing-xs);
  text-align: right;
}

.settings-btn {
  background: var(--sp-state-hover);
  border: 1px solid var(--sp-white-alpha-20);
  border-radius: var(--sp-border-radius-sm);
  color: var(--sp-white-alpha-70);
  padding: var(--sp-spacing-xs) var(--sp-spacing-xs);
  font-size: var(--sp-font-size-sm);
  cursor: pointer;
  transition: var(--sp-transition-fast);
}

.settings-btn:hover {
  background: var(--sp-state-active);
  color: var(--sp-white-alpha-90);
  transform: scale(1.05);
}

/* Модальное окно */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--sp-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--sp-spacing-lg);
}

/* Базовые стили модального окна - ТОЛЬКО для веб-версии */
body:not(.telegram-mini-app) .modal-content {
  background: var(--bg-secondary);
  border-radius: var(--sp-border-radius-lg);
  max-width: var(--sp-container-md, 500px);
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--sp-white-alpha-10);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-spacing-lg);
  border-bottom: 1px solid var(--sp-white-alpha-10);
}

.prompt-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-icon {
  font-size: var(--sp-font-size-2xl);
}

.prompt-category-badge {
  background: var(--sp-interactive-active);
  color: var(--sp-text-primary);
  padding: var(--sp-spacing-xs) var(--sp-spacing-xs);
  border-radius: var(--sp-border-radius-md);
  font-size: var(--sp-font-size-xs);
  font-weight: 500;
}

.close-btn {
  background: none;
  border: none;
  color: var(--sp-white-alpha-70);
  font-size: var(--sp-font-size-lg);
  cursor: pointer;
  padding: var(--sp-spacing-xs);
  border-radius: var(--sp-border-radius-xs);
  transition: var(--sp-transition-fast);
}

.close-btn:hover {
  background: var(--sp-state-hover);
  color: rgba(255, 255, 255, 1);
}

.modal-body {
  padding: var(--sp-spacing-lg);
}

.prompt-section {
  margin-bottom: var(--sp-spacing-lg);
}

.prompt-section h3 {
  margin: 0 0 8px 0;
  font-size: var(--sp-font-size-base);
  color: var(--sp-text-primary);
}

.prompt-section p {
  margin: 4px 0;
  line-height: 1.5;
  color: var(--sp-text-primary);
}

.archetype-item {
  background: var(--sp-bg-hover);
  border-radius: var(--sp-border-radius-sm);
  padding: 12px;
  margin-bottom: var(--sp-spacing-xs);
}

.archetype-item h4 {
  margin: 0 0 4px 0;
  color: var(--secondary-color);
  font-size: var(--sp-font-size-sm);
}

.modal-footer {
  padding: var(--sp-spacing-lg);
  border-top: 1px solid var(--sp-white-alpha-10);
  text-align: center;
}

.toggle-btn {
  background: var(--sp-color-primary);
  color: white;
  border: none;
  border-radius: var(--sp-border-radius-md);
  padding: 12px 24px;
  font-size: var(--sp-font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: var(--sp-transition-fast);
  min-width: var(--sp-button-min-width, 140px);
}

.toggle-btn.active {
  background: var(--success-color);
}

.toggle-btn.inactive {
  background: var(--sp-state-hover);
  color: var(--sp-white-alpha-70);
}

.toggle-btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.prompt-info {
  flex: 1;
  min-width: 0;
}

.prompt-name {
  margin: 0 0 4px 0;
  font-size: var(--sp-font-size-base);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.premium-badge {
  font-size: var(--sp-font-size-sm);
  opacity: 0.8;
}

.prompt-description {
  margin: 0;
  font-size: var(--sp-font-size-base);
  color: var(--sp-text-primary);
  line-height: 1.5;
}

/* Переключатель */
.prompt-toggle {
  flex-shrink: 0;
}

.toggle-switch {
  width: var(--sp-spacing-3xl);
  height: var(--sp-spacing-xl);
  background: var(--border-color);
  border-radius: var(--sp-border-radius-lg);
  position: relative;
  transition: var(--sp-transition-normal);
  cursor: pointer;
}

.toggle-switch.on {
  background: var(--success-color);
}

.toggle-switch.off {
  background: var(--border-color);
}

.toggle-handle {
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: var(--sp-transition-normal);
  box-shadow: 0 2px 4px var(--sp-black-alpha-20);
}

.toggle-switch.on .toggle-handle {
  transform: translateX(20px);
}

/* Нижние действия */
.bottom-actions {
  margin-top: auto;
  padding-top: 24px;
  text-align: center;
}

.chat-btn {
  font-size: var(--sp-font-size-lg);
  padding: 16px 32px;
  min-width: 200px;
}

/* Кнопки */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: white;
  border: none;
  border-radius: var(--border-radius);
  padding: 12px 24px;
  font-size: var(--sp-font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: var(--sp-transition-normal);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Настройки */
.profile-info,
.subscription-info {
  padding: var(--sp-spacing-lg);
  background: var(--bg-card);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-light);
  margin-bottom: 16px;
}

.profile-info p {
  margin: 8px 0;
}

.subscription-info p {
  margin-bottom: 16px;
  color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 480px) {
  .screen {
    padding: 12px;
  }
  
  .prompt-content {
    padding: var(--sp-spacing-md);
    gap: 12px;
  }
  
  .prompt-icon {
    font-size: 28px;
  }
  
  .app-header h1 {
    font-size: var(--sp-font-size-lg);
  }
  
  .logo h1 {
    font-size: var(--sp-font-size-xl);
  }
  
  .soul-icon {
    font-size: var(--sp-font-size-3xl);
  }
}

/* УНИФИЦИРОВАННЫЕ СТИЛИ ДЛЯ ВСЕХ СТРАНИЦ - НА ОСНОВЕ СТРАНИЦЫ ЛИЧНОСТЕЙ */

/* Общие стили для всех контейнеров страниц */
.page-container,
.container {
  background: var(--sp-gradient-background);
  min-height: 100vh;
  color: var(--sp-text-primary);
  padding: var(--sp-spacing-xs);
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-spacing-xs);
}

/* Унифицированный заголовок страницы - МАКСИМАЛЬНО КОМПАКТНЫЙ */
.soulpulse-header {
  text-align: center;
  margin-bottom: var(--sp-spacing-xs);
  padding: var(--sp-spacing-xs);
  background: var(--sp-bg-card);
  border-radius: var(--sp-border-radius-sm);
  border: 1px solid var(--sp-border-primary);
  backdrop-filter: blur(10px);
}

.soulpulse-title {
  font-size: var(--sp-font-size-base) !important;
  font-weight: 600 !important;
  color: var(--sp-text-primary) !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-spacing-sm) !important;
}

.soulpulse-subtitle {
  font-size: var(--sp-font-size-sm) !important;
  color: var(--sp-text-secondary) !important;
  margin-bottom: 0 !important;
  margin-top: var(--sp-spacing-xs) !important;
  opacity: 0.8 !important;
}

/* УТИЛИТАРНЫЕ КЛАССЫ ДЛЯ ОТСТУПОВ */
.mb-1 { margin-bottom: var(--sp-spacing-xs) !important; }
.mb-2 { margin-bottom: var(--sp-spacing-sm) !important; }
.mb-3 { margin-bottom: var(--sp-spacing-md) !important; }
.mb-4 { margin-bottom: var(--sp-spacing-lg) !important; }
.mb-5 { margin-bottom: var(--sp-spacing-xl) !important; }

.mt-1 { margin-top: var(--sp-spacing-xs) !important; }
.mt-2 { margin-top: var(--sp-spacing-sm) !important; }
.mt-3 { margin-top: var(--sp-spacing-md) !important; }
.mt-4 { margin-top: var(--sp-spacing-lg) !important; }
.mt-5 { margin-top: var(--sp-spacing-xl) !important; }

.p-1 { padding: var(--sp-spacing-xs) !important; }
.p-2 { padding: var(--sp-spacing-sm) !important; }
.p-3 { padding: var(--sp-spacing-md) !important; }
.p-4 { padding: var(--sp-spacing-lg) !important; }
.p-5 { padding: var(--sp-spacing-xl) !important; }

/* УВЕЛИЧИВАЕМ РАЗМЕРЫ КОНТЕНТНЫХ БЛОКОВ */
.ant-card {
  min-height: 140px !important;
}

.ant-card .ant-card-body {
  padding: var(--sp-spacing-lg) !important;
}

/* УВЕЛИЧИВАЕМ РАЗМЕРЫ КНОПОК И ФОРМ */
.ant-btn {
  min-height: 40px !important;
  padding: var(--sp-spacing-sm) var(--sp-spacing-lg) !important;
  font-size: var(--sp-font-size-base) !important;
}

.ant-input,
.ant-select-selector {
  min-height: 40px !important;
  padding: var(--sp-spacing-sm) var(--sp-spacing-md) !important;
}

.ant-form-item {
  margin-bottom: var(--sp-spacing-lg) !important;
}

/* Унифицированные заголовки */
.page-title {
  font-size: var(--sp-font-size-2xl);
  font-weight: 700;
  color: var(--sp-text-primary);
  margin-bottom: var(--sp-spacing-lg);
  text-align: center;
}

.section-title {
  font-size: var(--sp-font-size-xl);
  font-weight: 600;
  color: var(--sp-text-primary);
  margin-bottom: var(--sp-spacing-md);
}

/* Унифицированные сетки - как в личностях */
.unified-grid,
.prompts-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-spacing-md);
  margin-top: var(--sp-spacing-lg);
}

/* Унифицированные карточки - на основе prompt-card */
.unified-card,
.prompt-card {
  background: var(--sp-bg-card) !important;
  border: 1px solid var(--sp-border-primary) !important;
  border-radius: var(--sp-border-radius-md) !important;
  padding: 0 !important; /* Ant Design padding убираем */
  margin-bottom: var(--sp-spacing-md) !important;
  transition: var(--sp-transition-fast) !important;
  overflow: hidden !important;
  animation: fadeInUp 0.5s ease forwards !important;
  opacity: 0.95 !important; /* Прозрачность для всех карточек */
}

.unified-card:hover,
.prompt-card:hover {
  border-color: var(--sp-border-focus) !important;
  box-shadow: var(--sp-shadow-lg) !important;
  transform: translateY(-2px) !important;
}

/* Индивидуальные цвета для всех карточек (веб + мини-апп) */
.unified-card:not(.active):not(.premium),
.prompt-card:not(.active):not(.premium) {
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--card-accent, #6366f1) 6%, var(--sp-bg-card)), 
    color-mix(in srgb, var(--card-accent, #6366f1) 3%, var(--sp-bg-card))
  ) !important;
  border-color: color-mix(in srgb, var(--card-accent, #6366f1) 15%, var(--sp-border-primary)) !important;
}

.unified-card.active,
.prompt-card.active {
  border-color: var(--card-accent, var(--sp-color-success)) !important;
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--card-accent, #10b981) 12%, var(--sp-bg-card)), 
    color-mix(in srgb, var(--card-accent, #10b981) 6%, var(--sp-bg-card))
  ) !important;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--card-accent, #10b981) 45%, transparent) !important;
}

.unified-card.premium,
.prompt-card.premium {
  border-color: var(--card-accent, var(--sp-color-accent)) !important;
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--card-accent, #f59e0b) 12%, var(--sp-bg-card)), 
    color-mix(in srgb, var(--card-accent, #f59e0b) 6%, var(--sp-bg-card))
  ) !important;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--card-accent, #f59e0b) 45%, transparent) !important;
}

/* Содержимое карточек */
.unified-card-content,
.prompt-content {
  display: flex;
  align-items: center;
  gap: var(--sp-spacing-md);
}

.unified-card-icon,
.prompt-icon {
  font-size: var(--sp-font-size-2xl);
  flex-shrink: 0;
  color: var(--sp-color-primary);
}

.unified-card-text,
.prompt-text {
  flex: 1;
}

.unified-card-title,
.prompt-name {
  font-size: var(--sp-font-size-lg);
  font-weight: 600;
  color: var(--sp-text-primary);
  margin-bottom: var(--sp-spacing-xs);
}

.unified-card-description,
.prompt-description {
  font-size: var(--sp-font-size-base);
  color: var(--sp-text-secondary);
  line-height: 1.5;
}

/* Унифицированные кнопки */
.unified-btn {
  background: var(--sp-interactive-hover);
  color: var(--sp-text-primary);
  border: 1px solid var(--sp-border-primary);
  padding: 12px 24px;
  border-radius: var(--sp-border-radius-sm);
  cursor: pointer;
  transition: var(--sp-transition-fast);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.unified-btn:hover {
  background: var(--sp-interactive-active);
  border-color: var(--sp-border-focus);
  transform: translateY(-1px);
}

.unified-btn.primary {
  background: var(--sp-color-primary);
  color: var(--sp-text-on-primary);
  border-color: var(--sp-color-primary);
}

.unified-btn.primary:hover {
  background: var(--sp-color-primary-hover);
  border-color: var(--sp-color-primary-hover);
}

/* УДАЛЕНО: Дублированные анимации - уже есть в унифицированных стилях */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Темные темы Telegram */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-card: #2a2a2a;
    --bg-hover: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --border-color: #404040;
    --border-light: #303030;
  }
}

/* Принудительные стили для telegram-mini-app */
.telegram-mini-app .soulpulse-header { background: transparent !important; color: var(--sp-text-primary) !important; }

.telegram-mini-app .soulpulse-title {
  color: var(--sp-text-primary) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  text-shadow: none !important;  /* Убираем тень для лучшей читаемости */
}

.telegram-mini-app .soulpulse-subtitle { 
  color: var(--text-secondary) !important;
  background: transparent !important; 
}

.telegram-mini-app .ant-card-head-title,
.telegram-mini-app .ant-card-head .ant-card-head-title {
  color: var(--sp-text-primary) !important;
  background: transparent !important;
  font-weight: 600 !important;
  font-size: var(--sp-font-size-lg) !important;
}

.telegram-mini-app .page-title,
.telegram-mini-app h1,
.telegram-mini-app h2,
.telegram-mini-app h3,
.telegram-mini-app h4,
.telegram-mini-app h5,
.telegram-mini-app h6 {
  color: var(--sp-text-primary) !important;
  background: transparent !important;
}

/* Полноценная современная тема для Telegram Mini App - НАСЛЕДУЕТ ОТ UNIFIED SYSTEM */
.telegram-mini-app {
  /* Фоны наследуем от unified system */
  --bg-primary: var(--sp-bg-primary);
  --bg-secondary: var(--sp-bg-secondary);
  --bg-card: var(--sp-bg-card);
  --bg-hover: var(--sp-bg-hover);

  /* Тексты наследуем от unified system */
  --text-primary: var(--sp-text-primary);
  --text-secondary: var(--sp-text-secondary);
  --text-hint: var(--sp-text-tertiary);

  /* Акценты наследуем от unified system */
  --primary-color: var(--sp-color-primary);
  --primary-hover: var(--sp-color-primary-hover);
  --secondary-color: var(--sp-color-secondary);
  --accent-color: var(--sp-color-accent);
  --success-color: var(--sp-color-success);

  /* Бордеры наследуем от unified system */
  --border-color: var(--sp-border-primary);
  --border-light: var(--sp-border-secondary);
  --grad-start: var(--sp-bg-tertiary);
  --grad-end: var(--sp-bg-primary);
  --topbar-bg: var(--sp-bg-card);
}

/* Карточки и базовые контейнеры */
.telegram-mini-app .ant-card:not(.prompt-card),
.telegram-mini-app .ant-card-bordered:not(.prompt-card) {
  background: var(--sp-bg-card) !important;
  border-color: var(--sp-border-primary) !important;
  backdrop-filter: blur(10px) !important;
  opacity: 0.95 !important;
}
.telegram-mini-app .ant-card-head {
  background: transparent !important;
  border-bottom-color: var(--border-light) !important;
}
.telegram-mini-app .ant-divider {
  border-color: var(--border-color) !important;
}

/* Теги */
/* УДАЛЕНО: Дублированное правило - используем только одно ниже */

/* Переключатели - унифицированные стили */
.ant-switch {
  background: var(--sp-switch-bg) !important;
  border: 1px solid var(--sp-switch-border) !important;
}

.ant-switch-checked {
  background: var(--sp-switch-bg-checked) !important;
  border-color: var(--sp-switch-bg-checked) !important;
}

.ant-switch .ant-switch-handle::before {
  background: var(--sp-switch-handle) !important;
}

.ant-switch:focus {
  box-shadow: 0 0 0 2px var(--sp-color-primary-light) !important;
}

/* Кнопки и иконки в шапке - УНИФИЦИРОВАННЫЕ СТИЛИ */

/* Общие стили для всех платформ */
.app-topbar { 
  background: var(--sp-bg-secondary) !important; 
  border-bottom: 1px solid var(--sp-border-primary) !important; 
}

.app-topbar .ant-btn,
.app-topbar .ant-btn .anticon { 
  color: var(--sp-text-primary) !important; 
}

/* Специальные стили для кнопки меню */
.menu-toggle-btn {
  background: var(--sp-interactive-hover) !important;
  border: 1px solid var(--sp-border-primary) !important;
  border-radius: var(--sp-border-radius-sm) !important;
  padding: 8px !important;
  transition: var(--sp-transition-fast) !important;
}

.menu-toggle-btn:hover {
  background: var(--sp-interactive-active) !important;
  border-color: var(--sp-border-focus) !important;
  color: var(--sp-color-primary) !important;
  transform: scale(1.05);
}

.menu-toggle-btn .anticon {
  color: inherit !important;
}

/* Специфичные стили для Telegram Mini App */
.telegram-mini-app .app-topbar { 
  background: var(--topbar-bg) !important; 
  border-bottom: 1px solid var(--border-color) !important; 
}

.telegram-mini-app .app-topbar .ant-btn,
.telegram-mini-app .app-topbar .ant-btn .anticon { 
  color: var(--sp-text-primary) !important; 
}

/* Drawer/меню - УНИФИЦИРОВАННЫЕ СТИЛИ ДЛЯ ВСЕХ ПЛАТФОРМ */

/* Общие стили для всех drawer/меню */
.ant-drawer .ant-drawer-header { 
  background: var(--sp-bg-secondary) !important; 
  border-bottom-color: var(--sp-border-primary) !important; 
}

.ant-drawer .ant-drawer-body { 
  background: var(--sp-bg-secondary) !important; 
}

.ant-drawer .ant-drawer-close { 
  color: var(--sp-text-primary) !important; 
}

/* Специфичные стили для Telegram Mini App */
.telegram-mini-app .ant-drawer .ant-drawer-header { 
  background: var(--bg-secondary) !important; 
  border-bottom-color: var(--border-color) !important; 
}
.telegram-mini-app .ant-drawer .ant-drawer-body { 
  background: var(--bg-secondary) !important; 
}
.telegram-mini-app .ant-drawer .ant-drawer-close { 
  color: var(--sp-text-primary) !important; 
}

/* Текст в Drawer меню - заголовки и содержимое */
.telegram-mini-app .ant-drawer .ant-drawer-title,
.telegram-mini-app .ant-drawer .ant-drawer-title h4,
.telegram-mini-app .ant-drawer .ant-drawer-title .ant-typography-title {
  color: var(--sp-text-primary) !important;
  font-weight: 600 !important;
}

.telegram-mini-app .ant-drawer .ant-drawer .brand-section span {
  color: var(--sp-white-alpha-90) !important;
}

/* УНИФИЦИРОВАННЫЕ СТИЛИ НАВИГАЦИИ ДЛЯ ВСЕХ ПЛАТФОРМ */

/* Общие стили для всех nav-item */
.ant-drawer .nav-item {
  color: var(--sp-text-primary) !important;
  padding: 12px 16px;
  margin: 4px 8px;
  border-radius: var(--sp-border-radius-sm);
  transition: var(--sp-transition-fast);
  cursor: pointer;
}

.ant-drawer .nav-item .nav-text {
  color: var(--sp-text-primary) !important;
  font-weight: 500;
}

.ant-drawer .nav-item .nav-icon {
  color: var(--sp-text-secondary) !important;
  background: var(--sp-interactive-hover);
  padding: 8px;
  border-radius: var(--sp-border-radius-sm);
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

.ant-drawer .nav-item:hover {
  background: var(--sp-state-hover) !important;
  transform: translateX(4px);
}

.ant-drawer .nav-item:hover .nav-icon {
  background: var(--sp-interactive-active);
  color: var(--sp-color-primary) !important;
}

.ant-drawer .nav-item.active {
  background: var(--sp-interactive-active) !important;
  color: var(--sp-color-primary) !important;
}

.ant-drawer .nav-item.active .nav-icon {
  background: var(--sp-color-primary);
  color: var(--sp-text-on-primary) !important;
}

/* Специфичные стили для Telegram Mini App */
.telegram-mini-app .ant-drawer .nav-item {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .ant-drawer .nav-item .nav-text {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .ant-drawer .nav-item .nav-icon {
  color: var(--sp-white-alpha-80) !important;
}

/* Неактивные элементы слегка приглушены */
.telegram-mini-app .ant-drawer .nav-item:not(.active) {
  opacity: 0.8;
}

.telegram-mini-app .ant-drawer .nav-item:not(.active):hover {
  opacity: 1;
}

/* Текст "Текущая страница" и другие описания */
.telegram-mini-app .ant-drawer .ant-typography-caption,
.telegram-mini-app .ant-drawer .current-page .ant-typography,
.telegram-mini-app .ant-drawer .current-page span {
  color: var(--sp-text-primary) !important;
}

/* Текст навигации в drawer - более агрессивные правила */
.telegram-mini-app .ant-drawer .menu-content span,
.telegram-mini-app .ant-drawer .menu-content div,
.telegram-mini-app .ant-drawer span,
.telegram-mini-app .ant-drawer div {
  color: var(--sp-text-primary) !important;
}

/* Прямое нацеливание на элементы навигации - агрессивное перебитие inline стилей */
.telegram-mini-app .ant-drawer .navigation-items div,
.telegram-mini-app .ant-drawer .navigation-items span {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .ant-drawer .navigation-items .anticon {
  color: var(--sp-text-primary) !important;
}

/* Специфичные правила для nav-item элементов */
.telegram-mini-app .ant-drawer .nav-item {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .ant-drawer .nav-item:not(.active) {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .ant-drawer .nav-item .nav-icon,
.telegram-mini-app .ant-drawer .nav-item .nav-text {
  color: var(--sp-text-primary) !important;
}

/* Для неактивных элементов - максимальный приоритет */
.telegram-mini-app .ant-drawer .nav-item:not(.active) .nav-icon,
.telegram-mini-app .ant-drawer .nav-item:not(.active) .nav-text {
  color: var(--sp-white-alpha-90) !important;
}

/* Ультра-агрессивные правила для перебития всех inline стилей */
.telegram-mini-app .ant-drawer .nav-item[style] {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .ant-drawer .nav-item:not(.active)[style] {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .ant-drawer .nav-item > span {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .ant-drawer .nav-item:not(.active) > span {
  color: var(--sp-text-primary) !important;
}

/* Максимальный CSS specificity для перебития inline стилей */
.telegram-mini-app .ant-drawer .navigation-items .nav-item.nav-item.nav-item {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .ant-drawer .navigation-items .nav-item.nav-item.nav-item > span.nav-text {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .ant-drawer .navigation-items .nav-item.nav-item.nav-item > span.nav-icon {
  color: var(--sp-text-primary) !important;
}

/* Еще более агрессивные правила для тестовой среды */
body .telegram-mini-app .ant-drawer .nav-item:not(.active),
html .telegram-mini-app .ant-drawer .nav-item:not(.active) {
  color: var(--sp-text-primary) !important;
  background: var(--bg-hover) !important;
  opacity: 0.7;
}

/* Специальные правила для фона неактивных элементов - улучшенная видимость */
.telegram-mini-app .ant-drawer .nav-item:not(.active) {
  background: var(--sp-bg-hover) !important;
  border-radius: var(--sp-border-radius-sm);
  margin: 2px 0;
}

.telegram-mini-app .ant-drawer .nav-item:not(.active):hover {
  background: var(--sp-state-hover) !important;
  transform: translateX(4px);
  transition: var(--sp-transition-fast);
}

/* Улучшенная видимость иконок меню */
.telegram-mini-app .ant-drawer .nav-item .nav-icon {
  background: var(--sp-interactive-hover);
  padding: 8px;
  border-radius: var(--sp-border-radius-sm);
  margin-right: 12px;
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .ant-drawer .nav-item:hover .nav-icon {
  background: var(--sp-interactive-active);
  color: var(--sp-color-primary) !important;
}

/* Текст в карточках промптов */
/* УДАЛЕНО: Конфликтующие Mini App переопределения - используем унифицированные стили */

/* УДАЛЕНО: Дублированные стили prompt-card - используем только унифицированные стили */

/* Отступ под подзаголовком, чтобы блок с описанием не сливался */
.soulpulse-subtitle { display: block; margin-top: 4px; margin-bottom: 12px; }

/* УДАЛЕНО: Дублированные Mini App анимации - используем унифицированные */

@keyframes fadeInSmall {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Компактный режим списков на узких экранах */
@media (max-width: 400px) {
  .telegram-mini-app .prompt-content { padding: var(--sp-spacing-sm); gap: var(--sp-spacing-xs); }
  .telegram-mini-app .prompt-card .ant-typography { font-size: var(--sp-font-size-sm); }
  .telegram-mini-app .prompt-card .ant-tag { font-size: var(--sp-font-size-xs); height: auto; line-height: 1.2; vertical-align: middle; }
}

/* Предотвращение сползания объектов в Mini App */
.telegram-mini-app {
  overflow-x: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}

.telegram-mini-app * {
  box-sizing: border-box;
  max-width: 100%;
}

.telegram-mini-app .prompt-card,
.telegram-mini-app .unified-card {
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  /* Дополнительные красивые стили для Mini App */
  background: linear-gradient(180deg, var(--sp-white-alpha-10), var(--sp-white-alpha-05)) !important;
  border: 1px solid var(--sp-border-primary) !important;
  box-shadow: 0 2px 8px var(--sp-black-alpha-10) !important;
  /* Мягкие цветовые подсветки */
  position: relative;
  transition: all 0.3s ease !important;
  opacity: 0.95 !important; /* Немного прозрачности как в архивной версии */
}

/* УДАЛЕНО: Дублированное определение активных карточек - используем индивидуальные цвета ниже */

/* УДАЛЕНО: Дублированное определение premium карточек - используем индивидуальные цвета ниже */

/* Hover эффекты для карточек в Mini App */
.telegram-mini-app .prompt-card:hover,
.telegram-mini-app .unified-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px var(--sp-black-alpha-20) !important;
  border-color: var(--sp-color-primary) !important;
  background: linear-gradient(180deg, var(--sp-white-alpha-20), var(--sp-white-alpha-10)) !important;
}

/* Улучшенная читаемость текста в Mini App карточках */
.telegram-mini-app .prompt-card .prompt-title,
.telegram-mini-app .prompt-card .ant-typography-title,
.telegram-mini-app .prompt-card h4 {
  color: var(--sp-text-primary) !important;
  text-shadow: none !important; /* Убираем тени для лучшей читаемости */
  font-weight: 600 !important;
  font-size: var(--sp-font-size-lg) !important;
}

.telegram-mini-app .prompt-card .ant-typography,
.telegram-mini-app .prompt-card p {
  color: var(--sp-text-secondary) !important;
  text-shadow: none !important;
  font-size: var(--sp-font-size-sm) !important;
  line-height: 1.5 !important;
}

/* ИСПРАВЛЕНО: Улучшаем теги без блокировки их естественных цветов */
/* УДАЛЕНО: Избыточное переопределение тегов в карточках - пусть работают естественно */

/* УДАЛЕНО: Специальные стили для цветных тегов - пусть работают естественно */

/* УДАЛЕНО: Не перекрашиваем теги принудительно - пусть Ant Design управляет цветами */

/* УДАЛЕНО: Дублированное определение - используем индивидуальные цвета ниже */

/* Мягкие фоны с индивидуальными цветами из БД для Mini App */
.telegram-mini-app .prompt-card:not(.active):not(.premium),
.telegram-mini-app .unified-card:not(.active):not(.premium) {
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--card-accent, #6366f1) 8%, var(--sp-white-alpha-05)), 
    color-mix(in srgb, var(--card-accent, #6366f1) 4%, var(--sp-white-alpha-05))
  ) !important;
  border-color: color-mix(in srgb, var(--card-accent, #6366f1) 20%, var(--sp-border-primary)) !important;
  opacity: 0.95 !important;
}

/* Активные карточки с индивидуальным цветом для Mini App */
.telegram-mini-app .prompt-card.active,
.telegram-mini-app .unified-card.active {
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--card-accent, #10b981) 15%, var(--sp-white-alpha-05)), 
    color-mix(in srgb, var(--card-accent, #10b981) 8%, var(--sp-white-alpha-05))
  ) !important;
  border-color: var(--card-accent, var(--sp-color-success)) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--card-accent, #10b981) 25%, transparent) !important;
  opacity: 0.95 !important;
}

/* Premium карточки с индивидуальным цветом для Mini App */
.telegram-mini-app .prompt-card.premium,
.telegram-mini-app .unified-card.premium {
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--card-accent, #f59e0b) 15%, var(--sp-white-alpha-05)), 
    color-mix(in srgb, var(--card-accent, #f59e0b) 8%, var(--sp-white-alpha-05))
  ) !important;
  border-color: var(--card-accent, var(--sp-color-accent)) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--card-accent, #f59e0b) 25%, transparent) !important;
  opacity: 0.95 !important;
}

/* Дополнительные темные и светлые палитры для Mini App - НАСЛЕДУЮТ ОТ UNIFIED SYSTEM */
.theme-dark-indigo.telegram-mini-app {
  --bg-primary: var(--sp-bg-primary);
  --bg-secondary: var(--sp-bg-secondary);
  --bg-card: var(--sp-bg-card);
  --bg-hover: var(--sp-bg-hover);
  --text-primary: var(--sp-text-primary);
  --text-secondary: var(--sp-text-secondary);
  --primary-color: var(--sp-color-primary);
  --secondary-color: var(--sp-color-secondary);
  --border-color: var(--sp-border-primary);
  --border-light: var(--sp-border-secondary);
}

.theme-dark-slate.telegram-mini-app {
  /* Слейт вариант - можно оставить хардкод для уникальности */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: rgba(51, 65, 85, 0.95);
  --bg-hover: #475569;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --primary-color: #3b82f6;
  --secondary-color: #22d3ee;
  --border-color: #475569;
  --border-light: #334155;
}

.theme-light-indigo.telegram-mini-app {
  /* Светлая тема - наследуем от unified system */
  --bg-primary: var(--sp-bg-primary);
  --bg-secondary: var(--sp-bg-secondary);
  --bg-card: var(--sp-bg-card);
  --bg-hover: var(--sp-bg-hover);
  --text-primary: var(--sp-text-primary);
  --text-secondary: var(--sp-text-secondary);
  --primary-color: var(--sp-color-primary);
  --secondary-color: var(--sp-color-secondary);
  --border-color: var(--sp-border-primary);
  --border-light: var(--sp-border-secondary);
}

/* Дополнительные правки читабельности для Telegram Mini App */
.telegram-mini-app .user-info,
.telegram-mini-app .user-info p { color: var(--sp-text-primary) !important; }

/* УДАЛЕНО: Конфликтующие Mini App переопределения карточек - используем унифицированные стили */

/* Иконка меню в шапке должна быть видимой */
.telegram-mini-app .soulpulse-header .ant-btn,
.telegram-mini-app .soulpulse-header .ant-btn .anticon {
  color: var(--sp-text-primary) !important;
}

/* Базовые теги Ant на тёмном фоне - ТОЛЬКО для тегов без цвета */
.telegram-mini-app .ant-tag:not(.ant-tag-has-color):not(.prompt-card .ant-tag) {
  color: var(--sp-text-primary) !important;
  background: var(--sp-bg-secondary) !important;
  border-color: var(--sp-border-primary) !important;
}

/* ЯВНО СОХРАНЯЕМ ЦВЕТА ЦВЕТНЫХ ТЕГОВ В MINI APP */
.telegram-mini-app .ant-tag.ant-tag-has-color {
  /* Цветные теги сохраняют СВОИ естественные цвета от Ant Design */
  /* НЕ переопределяем background, color, border-color */
}

/* Модальные окна для описания промптов - уже есть в основных стилях, не дублируем */

/* Веб-версия: исправляем цвет текста в модальных окнах */
body:not(.telegram-mini-app) .modal-body {
  color: var(--sp-text-primary);
}

body:not(.telegram-mini-app) .modal-body h3 {
  color: var(--sp-text-primary);
}

body:not(.telegram-mini-app) .modal-body p {
  color: var(--sp-text-primary);
}

/* Для веб-версии применяем правильные цвета */
.modal-body {
  color: var(--sp-text-primary);
}

/* Ant Design Modal - правильные CSS стили */
.telegram-mini-app-modal .ant-modal-content {
  background: var(--sp-bg-card) !important;
  border: 1px solid var(--sp-border-primary) !important;
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app-modal .ant-modal-header {
  background: var(--sp-bg-card) !important;
  border-bottom: 1px solid var(--sp-border-primary) !important;
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app-modal .ant-modal-body {
  background: var(--sp-bg-card) !important;
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app-modal .ant-modal-title {
  color: var(--sp-text-primary) !important;
}

.web-modal .ant-modal-content {
  background: var(--bg-secondary) !important;
  color: var(--sp-text-primary) !important;
}

.web-modal .ant-modal-header {
  background: var(--bg-secondary) !important;
  color: var(--sp-text-primary) !important;
}

.web-modal .ant-modal-body {
  background: var(--bg-secondary) !important;
  color: var(--sp-text-primary) !important;
}

/* Divider на странице промптов */
.telegram-mini-app .prompts-divider {
  color: var(--sp-text-primary) !important;
}

.prompts-divider {
  color: var(--sp-text-primary) !important;
}

/* Исправляем все тексты в модальном окне Mini App */
.telegram-mini-app-modal .ant-typography,
.telegram-mini-app-modal .ant-typography-paragraph,
.telegram-mini-app-modal .ant-typography-text,
.telegram-mini-app-modal .ant-modal-body .ant-typography,
.telegram-mini-app-modal .ant-modal-body p,
.telegram-mini-app-modal .ant-modal-body span,
.telegram-mini-app-modal .ant-modal-body div {
  color: var(--sp-text-primary) !important;
}

/* Вторичный текст в модальном окне Mini App */
.telegram-mini-app-modal .ant-modal-body [style*="color: var(--text-secondary)"],
.telegram-mini-app-modal .ant-modal-body .text-secondary {
  color: var(--sp-text-secondary) !important;
}

/* УНИВЕРСАЛЬНЫЕ СТИЛИ ДЛЯ ВСЕХ ТЕГОВ - МИНИМАЛЬНЫЕ ИЗМЕНЕНИЯ */
.ant-tag {
  font-size: var(--sp-font-size-xs) !important;
  border-radius: var(--sp-border-radius-sm) !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
  /* Сохраняем естественные цвета Ant Design */
}

/* Кастомные модальные окна в Mini App */
.telegram-mini-app .modal-content {
  background: var(--sp-bg-card) !important;
  border: 1px solid var(--sp-border-primary) !important;
  color: var(--sp-text-primary) !important;
}

/* УДАЛЕНО: Принудительные стили заголовка - используем React стили */

/* Кастомные заголовки модальных окон */
.telegram-mini-app .modal-header {
  background: var(--sp-bg-card) !important;
  border-bottom: 1px solid var(--sp-border-primary) !important;
  color: var(--sp-text-primary) !important;
}

/* УДАЛЕНО: Принудительный цвет заголовка - используем React стили для правильной работы тем */

/* УДАЛЕНО: Принудительные стили тела - используем React стили */

/* Кастомное тело модального окна */
.telegram-mini-app .modal-body {
  background: var(--sp-bg-card) !important;
  color: var(--sp-text-primary) !important;
}

/* Оверлей модального окна */
.telegram-mini-app .modal-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* Кастомные модальные окна - общие стили */
.telegram-mini-app .modal-overlay .modal-content {
  background: var(--sp-bg-card) !important;
  border: 1px solid var(--sp-border-primary) !important;
  border-radius: var(--sp-border-radius-lg) !important;
  box-shadow: var(--sp-shadow-xl) !important;
}

/* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ - принудительные стили для Mini App */
.telegram-mini-app .modal-overlay .modal-content,
.telegram-mini-app .modal-content,
.telegram-mini-app div.modal-content {
  background: var(--sp-bg-card) !important;
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .modal-overlay .modal-body,
.telegram-mini-app .modal-body,
.telegram-mini-app div.modal-body {
  background: var(--sp-bg-card) !important;
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .modal-overlay .modal-header,
.telegram-mini-app .modal-header,
.telegram-mini-app div.modal-header {
  background: var(--sp-bg-card) !important;
  color: var(--sp-text-primary) !important;
  border-bottom: 1px solid var(--sp-border-primary) !important;
}

.telegram-mini-app .ant-modal-body p,
.telegram-mini-app .ant-modal-body .ant-typography {
  color: var(--sp-text-secondary) !important;
  text-shadow: none !important;
}

/* УДАЛЕНО: Дублированные стили тегов в модальных окнах - пусть работают естественно */

/* Контейнеры тегов в модальных окнах */
.telegram-mini-app .ant-modal-body .prompt-tags,
.telegram-mini-app .modal-body .prompt-tags,
.telegram-mini-app .modal-content .prompt-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--sp-spacing-xs) !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.modal-body h3 {
  color: var(--sp-text-primary);
}

.modal-body p {
  color: var(--sp-text-primary);
}

/* Все элементы в модальных окнах веб-версии */
body:not(.telegram-mini-app) .modal-body .prompt-section p,
body:not(.telegram-mini-app) .modal-body .prompt-section span,
body:not(.telegram-mini-app) .modal-body .prompt-section div {
  color: var(--sp-text-primary) !important;
}

body:not(.telegram-mini-app) .modal-body .archetype-item p {
  color: var(--sp-text-primary) !important;
}

/* УДАЛЕНО: Дублированные стили - используем унифицированные стили выше */

/* УДАЛЕНО: Превалирующие стили кнопок - используем унифицированные стили */

/* УДАЛЕНО: Превалирующие стили карточек - используем унифицированные стили */

/* УНИФИЦИРОВАННЫЕ СТИЛИ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ - КАК НА СТРАНИЦЕ ЛИЧНОСТИ */

/* Главная страница - используем те же стили что и для страницы личностей */
.telegram-mini-app .home-page,
.telegram-mini-app .home-page .container {
  background: transparent !important;
}

/* Карточки на главной странице - как на странице личностей */
.telegram-mini-app .home-page .ant-card:not(.prompt-card) {
  background: var(--sp-bg-card) !important;
  border: 1px solid var(--sp-border-primary) !important;
  border-radius: var(--sp-border-radius-md) !important;
  backdrop-filter: blur(10px) !important;
  opacity: 0.95 !important;
  transition: all var(--sp-transition-normal) !important;
}

.telegram-mini-app .home-page .ant-card:not(.prompt-card):hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--sp-shadow-lg) !important;
}

/* Заголовки и тексты - как на странице личностей */
.telegram-mini-app .home-page .soulpulse-title,
.telegram-mini-app .home-page h1,
.telegram-mini-app .home-page h2,
.telegram-mini-app .home-page h3 {
  color: var(--sp-text-primary) !important;
  text-shadow: none !important;
}

.telegram-mini-app .home-page .soulpulse-subtitle,
.telegram-mini-app .home-page p,
.telegram-mini-app .home-page .ant-typography {
  color: var(--sp-text-secondary) !important;
  text-shadow: none !important;
}

/* СПЕЦИАЛЬНЫЕ КЛАССЫ ДЛЯ TELEGRAM HOME */

/* Интерактивные карточки функций */
.telegram-home-feature-card {
  background: var(--sp-bg-card) !important;
  border: 1px solid var(--sp-border-primary) !important;
  border-radius: 12px !important;
  padding: 10px 16px !important; /* ниже по высоте, ширину не трогаем */
  cursor: pointer !important;
  transition: all var(--sp-transition-normal) !important;
  backdrop-filter: blur(10px) !important;
  opacity: 0.95 !important;
}

.telegram-home-feature-card:hover {
  background: var(--sp-bg-card-hover) !important;
  border-color: var(--sp-border-focus) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--sp-shadow-lg) !important;
}

/* Информационные блоки */
.telegram-home-info-card {
  background: var(--sp-bg-card) !important;
  border: 1px solid var(--sp-border-primary) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  backdrop-filter: blur(10px) !important;
  opacity: 0.95 !important;
}

/* Рекомендательный блок */
.telegram-home-recommendation-card {
  background: var(--sp-bg-tertiary) !important;
  border: 1px solid var(--sp-color-primary) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  backdrop-filter: blur(10px) !important;
  opacity: 0.95 !important;
}

/* Кнопки в Telegram Home - МЯГКИЕ СИСТЕМНЫЕ ЦВЕТА */
.telegram-home-button {
  background: var(--sp-bg-secondary) !important;
  color: var(--sp-text-primary) !important;
  border: 1px solid var(--sp-border-primary) !important;
  border-radius: var(--sp-border-radius-md) !important;
  padding: var(--sp-spacing-sm) var(--sp-spacing-md) !important;
  font-size: var(--sp-font-size-sm) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--sp-transition-normal) !important;
  width: 100% !important;
  backdrop-filter: blur(10px) !important;
  opacity: 0.9 !important;
}

.telegram-home-button:hover {
  background: var(--sp-bg-hover) !important;
  border-color: var(--sp-border-focus) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--sp-shadow-md) !important;
  opacity: 1 !important;
}

.telegram-home-button.success {
  background: var(--sp-bg-tertiary) !important;
  border-color: var(--sp-color-success) !important;
  color: var(--sp-color-success) !important;
}

.telegram-home-button.success:hover {
  background: var(--sp-color-success) !important;
  color: var(--sp-text-primary) !important;
}

/* Страница личностей в Telegram Mini App */
.telegram-mini-app .prompts-page h2,
.telegram-mini-app .prompts-page .ant-typography-title {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .prompts-page p,
.telegram-mini-app .prompts-page .ant-typography-paragraph {
  color: var(--sp-white-alpha-85) !important;
}

/* УДАЛЕНО: Дублированные стили карточек промптов - используем унифицированные стили выше */

/* Переключатель "Отключить базовую личность" - только для страницы промптов */
.telegram-mini-app .prompt-settings p,
.telegram-mini-app .prompt-settings .ant-typography {
  color: var(--sp-text-primary) !important;
  text-shadow: var(--sp-shadow-text) !important;
}

/* Стили для переключателя базовой личности */
.telegram-mini-app .ant-typography {
  color: var(--sp-text-primary) !important;
}

/* Switch стили уже определены выше - убираем дублирование */

/* Специальные исправления для кастомных модальных окон в Telegram Mini App */
.telegram-mini-app .modal-content .prompt-section h3 {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .modal-content .prompt-section p {
  color: var(--sp-text-primary) !important;
}

/* Общие исправления текста для Telegram Mini App */
.telegram-mini-app .container h1,
.telegram-mini-app .container h2,
.telegram-mini-app .container h3 {
  color: var(--sp-text-primary) !important;
}

/* Заголовки и описания страниц */
.telegram-mini-app .soulpulse-title {
  color: var(--sp-text-primary) !important;
}

.telegram-mini-app .soulpulse-subtitle,
.telegram-mini-app .soulpulse-header p {
  color: var(--sp-text-primary) !important;
  opacity: 0.9;
}

/* Верхний блок страницы личностей */
.telegram-mini-app .prompts-page .soulpulse-header h2,
.telegram-mini-app .prompts-page .soulpulse-title {
  color: var(--sp-text-primary) !important;
  text-shadow: var(--sp-shadow-text-strong);
}

.telegram-mini-app .prompts-page .soulpulse-subtitle {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
/* SoulPulse Mini App - Современный адаптивный дизайн */

/* CSS переменные для цветовой схемы - ИНТЕГРАЦИЯ С UNIFIED SYSTEM */
:root {
  /* Основные цвета - наследуем от unified system */
  --primary-color: var(--sp-color-primary, #6366f1);
  --primary-hover: var(--sp-color-primary-hover, #4f46e5);
  --primary-light: var(--sp-color-primary-light, #e0e7ff);
  
  /* Вторичные цвета */
  --secondary-color: var(--sp-color-secondary, #8b5cf6);
  --secondary-hover: var(--sp-color-secondary-hover, #7c3aed);
  --secondary-light: var(--sp-color-secondary-light, #ede9fe);
  
  /* Акцентные цвета */
  --accent-color: var(--sp-color-accent, #06b6d4);
  --accent-hover: var(--sp-color-accent-hover, #0891b2);
  --accent-light: var(--sp-color-accent-light, #cffafe);
  
  /* Успех и предупреждения */
  --success-color: var(--sp-color-success, #10b981);
  --success-light: var(--sp-color-success-light, #d1fae5);
  --warning-color: var(--sp-color-warning, #f59e0b);
  --warning-light: var(--sp-color-warning-light, #fef3c7);
  --error-color: var(--sp-color-danger, #ef4444);
  --error-light: var(--sp-color-danger-light, #fee2e2);
  
  /* Нейтральные цвета - наследуем от unified system */
  --text-primary: var(--sp-text-primary, #1f2937);
  --text-secondary: var(--sp-text-secondary, #6b7280);
  --text-muted: var(--sp-text-tertiary, #9ca3af);
  --border-color: var(--sp-border-primary, #e5e7eb);
  --border-light: var(--sp-border-secondary, #f3f4f6);
  --background-primary: var(--sp-bg-primary, #ffffff);
  --background-secondary: var(--sp-bg-secondary, #f9fafb);
  --background-tertiary: var(--sp-bg-tertiary, #f3f4f6);
  
  /* Градиенты - наследуем от unified system */
  --gradient-primary: var(--sp-gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
  --gradient-secondary: var(--sp-gradient-secondary, linear-gradient(135deg, #f093fb 0%, #f5576c 100%));
  --gradient-accent: var(--sp-gradient-accent, linear-gradient(135deg, #4facfe 0%, #00f2fe 100%));
  
  /* Тени - наследуем от unified system */
  --shadow-sm: var(--sp-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
  --shadow-md: var(--sp-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  --shadow-lg: var(--sp-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
  --shadow-xl: var(--sp-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
  
  /* Скругления - наследуем от unified system */
  --radius-sm: var(--sp-radius-sm, 0.375rem);
  --radius-md: var(--sp-radius-md, 0.5rem);
  --radius-lg: var(--sp-radius-lg, 0.75rem);
  --radius-xl: var(--sp-radius-xl, 1rem);
  
  /* Анимации - наследуем от unified system */
  --transition-fast: var(--sp-transition-fast, 0.15s ease-in-out);
  --transition-normal: var(--sp-transition-normal, 0.3s ease-in-out);
  --transition-slow: var(--sp-transition-slow, 0.5s ease-in-out);
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --border-color: #374151;
    --border-light: #4b5563;
    --background-primary: #111827;
    --background-secondary: #1f2937;
    --background-tertiary: #374151;
  }
}

/* Базовые стили */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--background-secondary);
  color: var(--text-primary);
  line-height: 1.6;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

/* Контейнеры */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.container-fluid {
  width: 100%;
  padding: 0 16px;
}

/* Адаптивная сетка */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .grid-cols-3, .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Карточки */
.card {
  background: var(--background-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
  overflow: hidden;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.card-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--background-secondary);
}

.card-body {
  padding: 1.5rem;
}

.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-light);
  background: var(--background-secondary);
}

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.875rem;
  line-height: 1.25rem;
  gap: 0.5rem;
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: var(--background-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--background-secondary);
  border-color: var(--primary-color);
}

.btn-success {
  background: var(--success-color);
  color: white;
}

.btn-warning {
  background: var(--warning-color);
  color: white;
}

.btn-error {
  background: var(--error-color);
  color: white;
}

/* Анимации */
@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes slideIn {
  from { 
    transform: translateX(-100%); 
  }
  to { 
    transform: translateX(0); 
  }
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0.5; 
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { 
    transform: translate3d(0, 0, 0); 
  }
  40%, 43% { 
    transform: translate3d(0, -30px, 0); 
  }
  70% { 
    transform: translate3d(0, -15px, 0); 
  }
  90% { 
    transform: translate3d(0, -4px, 0); 
  }
}

/* Классы анимаций */
.fade-in {
  animation: fadeIn var(--transition-normal) ease-out;
}

.slide-in {
  animation: slideIn var(--transition-normal) ease-out;
}

.pulse {
  animation: pulse 2s infinite;
}

.bounce {
  animation: bounce 1s infinite;
}

/* Утилиты */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

.bg-primary { background: var(--background-primary); }
.bg-secondary { background: var(--background-secondary); }
.bg-tertiary { background: var(--background-tertiary); }

.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }

.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Адаптивность */
@media (max-width: 640px) {
  .container {
    padding: 0 12px;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 8px;
  }
  
  .card-body {
    padding: 0.75rem;
  }
}

/* Специальные стили для SoulPulse */
.soulpulse-header {
  background: var(--gradient-primary);
  color: white;
  padding: 2rem 0;
  text-align: center;
  margin-bottom: 2rem;
}

/* УДАЛЕНО: Хардкод размера заголовка - используем унифицированные стили из styles.css */

/* УДАЛЕНО: Хардкод размера подзаголовка - используем унифицированные стили из styles.css */

/* Стили для промптов */
.prompt-card {
  background: linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%);
  border-left: 4px solid var(--primary-color);
  transition: all var(--transition-normal);
}

.prompt-card:hover {
  border-left-color: var(--secondary-color);
  transform: translateX(4px);
}

.prompt-card.active {
  border-left-color: var(--success-color);
  background: var(--success-light);
}

/* Стили для навигации */
.nav-item {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.nav-item:hover {
  background: var(--background-secondary);
  color: var(--primary-color);
}

.nav-item.active {
  background: var(--primary-color);
  color: white;
}

/* Стили для форм */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-primary);
}

.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--background-primary);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* Стили для уведомлений */
.notification {
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  border-left: 4px solid;
}

.notification.success {
  background: var(--success-light);
  border-left-color: var(--success-color);
  color: var(--text-primary);
}

.notification.warning {
  background: var(--warning-light);
  border-left-color: var(--warning-color);
  color: var(--text-primary);
}

.notification.error {
  background: var(--error-light);
  border-left-color: var(--error-color);
  color: var(--text-primary);
}

/* Стили для загрузки */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--border-light);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Принудительная светлая тема для мини-приложения - ИНТЕГРАЦИЯ С UNIFIED SYSTEM */
html, body {
  background-color: var(--sp-bg-secondary, #f9fafb) !important;
  color: var(--sp-text-primary, #111827) !important;
}

/* Убираем любые темные темы Telegram */
html.dark, body.dark,
html.telegram-dark, body.telegram-dark,
html.tg-dark, body.tg-dark,
html.black, body.black {
  background-color: var(--sp-bg-secondary, #f9fafb) !important;
  color: var(--sp-text-primary, #111827) !important;
}

/* Принудительные стили для корневого элемента */
#root {
  background-color: var(--sp-bg-secondary, #f9fafb) !important;
  color: var(--sp-text-primary, #111827) !important;
  min-height: 100vh !important;
}

/* Принудительные стили для всех дочерних элементов - ОТКЛЮЧЕНО для Telegram стилей */
/* * {
  background-color: inherit !important;
} */

/* Исключения для элементов которые должны иметь свой цвет */
.bg-white, .bg-gray-50, .bg-blue-500, .bg-green-500, .bg-red-500 {
  background-color: initial !important;
}

/* Telegram WebApp variable override - ИНТЕГРАЦИЯ С UNIFIED SYSTEM */
:root {
  --tg-theme-bg-color: var(--sp-bg-secondary, #f9fafb) !important;
  --tg-theme-text-color: var(--sp-text-primary, #111827) !important;
  --tg-theme-hint-color: var(--sp-text-secondary, #6b7280) !important;
  --tg-theme-link-color: var(--sp-color-primary, #3b82f6) !important;
  --tg-theme-button-color: var(--sp-color-primary, #3b82f6) !important;
  --tg-theme-button-text-color: var(--sp-text-on-primary, #ffffff) !important;
  --tg-theme-secondary-bg-color: var(--sp-bg-primary, #ffffff) !important;
}

/* Видимость иконок и модалок в Mini App */
.telegram-mini-app .prompt-icon,
.telegram-mini-app .icon-emoji {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Исправление видимости иконок Ant Design в Mini App */
.telegram-mini-app .anticon,
.telegram-mini-app .anticon svg {
  color: var(--sp-text-primary, #111827) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Глобально для всех SVG в Mini App — наследуем цвет текста */
.telegram-mini-app svg {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Убедимся, что иконки занимают место и не схлопываются по высоте */
.telegram-mini-app .anticon {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Иконки внутри кнопок — контрастные */
.telegram-mini-app .ant-btn .anticon { color: var(--sp-text-primary, #111827) !important; }
.telegram-mini-app .ant-btn-primary .anticon { color: var(--sp-text-inverse, #ffffff) !important; }
/* Стрелки/иконки выпадающих списков */
.telegram-mini-app .ant-select .ant-select-arrow,
.telegram-mini-app .ant-select .anticon {
  color: var(--sp-text-primary, #111827) !important;
  fill: currentColor !important;
}

/* Тумблеры/переключатели — видимые иконки/ручка */
.telegram-mini-app .ant-switch .anticon,
.telegram-mini-app .ant-switch .anticon svg {
  color: var(--sp-text-primary, #111827) !important;
  fill: currentColor !important;
}

/* Иконка закрытия модалки (крестик) — явно видима */
.telegram-mini-app .ant-modal-close-x .anticon,
.telegram-mini-app .ant-modal-close-x .anticon svg,
.telegram-mini-app .ant-modal .ant-modal-close .anticon svg {
  color: var(--sp-text-primary, #111827) !important;
  fill: currentColor !important;
}

/* Кнопки-иконки (icon-only) — размеры и центрирование */
.telegram-mini-app .ant-btn-icon-only {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

/* Иконка закрытия модалки и элементы внутри модалок */
.telegram-mini-app .ant-modal .anticon,
.telegram-mini-app .ant-modal .anticon svg {
  color: var(--sp-text-primary, #111827) !important;
  fill: currentColor !important;
}

/* Защита от случайных переопределений цветом фона и текста на иконках */
.telegram-mini-app .ant-btn-icon-only .anticon,
.telegram-mini-app .ant-btn .anticon {
  background: transparent !important;
}

.telegram-mini-app .modal-overlay,
.telegram-mini-app .ant-modal-root,
.telegram-mini-app .ant-modal-wrap {
  z-index: 9999 !important;
}

.telegram-mini-app body,
.telegram-mini-app .sp-platform-telegram,
.telegram-mini-app .sp-content {
  overflow-y: auto !important;
  overflow-x: hidden !important; /* предотвращаем горизонтальную прокрутку */
  -webkit-overflow-scrolling: touch;
}

/* Контейнеры в MiniApp на всю ширину экрана, без сползания влево */
.telegram-mini-app .container,
.telegram-mini-app .settings-page,
.telegram-mini-app .telegram-home,
.telegram-mini-app .ant-layout,
.telegram-mini-app .ant-layout-content {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Кнопки не выходят за границы и адаптивно уменьшают отступы */
.telegram-mini-app .ant-btn {
  max-width: 100% !important;
  white-space: normal !important;
}

/* Гарантируем отображение главного экрана мини‑аппа */
.telegram-mini-app .telegram-home {
  display: block !important;
  min-height: 100vh !important;
}