#modal-date-picker {
    z-index: 22000 !important;
}
/* === LOADER === */
#loading-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999999;
    display: flex; flex-direction: column; 
    align-items: center; justify-content: center;
    background-color: #12000b;
    transition: opacity 0.5s ease, visibility 0.5s;
}

#loading-overlay.hidden {
    opacity: 0; visibility: hidden; pointer-events: none;
}

.loader-logo {
    width: 70px; height: 70px;
    object-fit: contain;
    margin-bottom: 25px;
    opacity: 0.9;
    animation: breathe 2.5s infinite ease-in-out;
}

.loader-text {
    font-size: 13px; font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    min-height: 20px; /* Чтобы текст не прыгал */
    margin-bottom: 15px;
    opacity: 0.7;
}

/* Прогресс бар */
.loader-progress-container {
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.loader-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent, #ff00cc); /* Использует цвет темы или дефолтный розовый */
    border-radius: 4px;
    transition: width 0.2s ease-out;
    box-shadow: 0 0 10px var(--accent, #ff00cc);
}

@keyframes breathe {
    0%, 100% { transform: scale(0.95); opacity: 0.6; }
    50% { transform: scale(1.05); opacity: 1; }
}

/* =========================================
1. VARIABLES & RESET & THEMES
========================================= */
:root {
    --bg-color: #12000b;
    --sidebar-bg: #1a0010;
    --card-bg: #2b001b;
    --nav-bg: #2b001b;
    
    --text-main: #ffffff;
    --text-secondary: #888888;
    
    /* PINK ACCENTS ONLY */
    --accent: #ff00cc; 
    --accent-light: #ff66e0;
    
    --border: #4d0030;
    --highlight-green: #2ecc71;
    --highlight-red: #e74c3c;
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --modal-bg: rgba(18, 0, 11, 0.95);
    
    /* iOS Style Colors */
    --ios-bg: #12000b;
    --ios-card: #2b001b;
    --ios-separator: #4d0030;
    --ios-header: #8E8E93; 

    --card-gradient: linear-gradient(165deg, #2b001b 0%, #1a0010 100%);
}

body.light-theme {
    --bg-color: #ffeef8;
    --sidebar-bg: #fff5fb; 
    --card-bg: #ffffff;
    --nav-bg: #ffffff;
    
    --text-main: #000000;
    --text-secondary: #666666; 
    
    --border: #fbcfe8;
    --modal-bg: rgba(255, 255, 255, 0.95);
    
    --accent: #db2777;
    --accent-light: #f472b6;

    --ios-bg: #ffeef8;
    --ios-card: #ffffff;
    --ios-separator: #e5e7eb;
    --ios-header: #6D6D72; 

    --card-gradient: linear-gradient(165deg, #ffffff 0%, #ffeef8 100%);
}

body[data-theme="noir"] {
    --accent: #ffffff;
    --accent-light: #cccccc;
    --accent-alt: #888888; 
    
    --highlight-green: #bbbbbb; /* Светло-серый вместо зеленого */
    --highlight-red: #444444;   /* Темно-серый вместо красного */
    --ios-separator: #333333;
    --border: #333333;
}

body[data-theme="noir"] .mode-greeting-text b {
    color: #ffffff !important; /* Названия категорий всегда белые */
}

/* Заменяем голубой цвет Bestie в нуарной теме */
body[data-theme="noir"] .plan-card.bestie {
    border-color: #ffffff !important;
    background: linear-gradient(165deg, #333 0%, #000 100%) !important;
    box-shadow: 0 0 20px rgba(255,255,255,0.1) !important;
}

body[data-theme="noir"] .plan-card.bestie .plan-title,
body[data-theme="noir"] .bestie-badge {
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
}

body[data-theme="noir"] .plan-btn.bestie-btn {
    background: #ffffff !important;
    color: #000000 !important;
}

/* Статус подписки в окне синхронизации */
body[data-theme="noir"] #sync-sub-value {
    color: #ffffff !important;
}

body[data-theme="noir"] .limit-fill {
    background: linear-gradient(90deg, #888, #fff) !important;
    box-shadow: 0 0 10px #ffffff;
}

/* Градиент для кнопок в нуаре */
body[data-theme="noir"] .btn-start-capsule {
    background: linear-gradient(to right, #666, #999) !important;
    box-shadow: 0 10px 30px -5px rgba(255,255,255,0.2) !important;
}

/* 1. Кнопки управления (Tinder-style) */
body[data-theme="noir"] .t-circle-btn {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* Активное состояние кнопок (инверсия) */
body[data-theme="noir"] .t-circle-btn:active,
body[data-theme="noir"] .t-circle-btn.active,
body[data-theme="noir"] .t-circle-btn.wl.active {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

/* 2. Большая кнопка генерации/старта */
body[data-theme="noir"] .btn-gen,
body[data-theme="noir"] .btn-start-capsule,
body[data-theme="noir"] .btn-watch {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(255,255,255,0.1) !important;
    background-image: none !important;
}

body[data-theme="noir"] .btn-gen:active,
body[data-theme="noir"] .btn-start-capsule:active {
    background: #ffffff !important;
    color: #000000 !important;
}

/* 3. Тумблеры (Switch) */
body[data-theme="noir"] input:checked + .slider {
    background-color: #ffffff !important;
}
body[data-theme="noir"] input:checked + .slider:before {
    background-color: #000000 !important;
    transform: translateX(20px);
}
body[data-theme="noir"] .slider {
    background-color: #333333;
}

/* 4. Бейджи (Extreme, LGBT...) */
body[data-theme="noir"] .warning-badge {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}

/* 5. Иконки в настройках и навбаре */
body[data-theme="noir"] .nav-item.active .nav-icon {
    color: #ffffff !important;
}

/* 6. Активные элементы списков */
body[data-theme="noir"] .theme-item.active {
    border-color: #ffffff !important;
}
body[data-theme="noir"] .lock-icon {
    color: #ffffff !important;
}

/* 7. График статистики */
body[data-theme="noir"] .chart-bar {
    background: #ffffff !important;
}

/* 8. Логотип (Fetish часть) */
body[data-theme="noir"] .logo span {
    background: #ffffff !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* 9. Кнопки выбора режима (Start Screen) */
body[data-theme="noir"] .mode-circle-btn {
    background: #000000 !important;      
    border: 1px solid #ffffff !important; 
    box-shadow: none !important;         
    color: #ffffff !important;           
}

body[data-theme="noir"] .mode-circle-btn:active {
    background: #ffffff !important;       
    color: #000000 !important;
}

body[data-theme="noir"] .ai-icon-img {
    filter: invert(1) !important; 
}
body[data-theme="noir"] .mode-circle-btn:active .ai-icon-img {
    filter: invert(0) !important; 
}

/* === THEME: OLD MONEY (Mahogany & Gold) === */
body[data-theme="old-money"] {
    --bg-color: #1a0505;
    --sidebar-bg: #260909;
    --card-bg: #2e0b0b;
    --nav-bg: #3d0e0e;
    
    --text-main: #f0e6d2; /* Папирус */
    --text-secondary: #a38970; /* Медь */
    
    --accent: #c5a059; /* Старое золото */
    --accent-light: #e6c98c; /* Светлое золото */
    
    --border: #4a1919;
    --ios-card: #2e0b0b;
    --ios-bg: #1a0505;
    --ios-separator: #4a1919;
    --ios-header: #8a6a4b;

    --card-gradient: linear-gradient(165deg, #2e0b0b 0%, #1a0505 100%);
    --modal-bg: rgba(26, 5, 5, 0.95);
}

/* 1. ЛОГОТИП (Золотой градиент) */
body[data-theme="old-money"] .logo span,
body[data-theme="old-money"] .sum-logo-text span.grad {
    background: linear-gradient(180deg, #f9f1d8 0%, #c5a059 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 2px 10px rgba(197, 160, 89, 0.2);
}

/* 2. ИКОНКИ В ИНТЕРФЕЙСЕ (Золотой фильтр) */
body[data-theme="old-money"] .nav-icon-img,
body[data-theme="old-money"] .settings-icon,
body[data-theme="old-money"] .share-icon-img,
body[data-theme="old-money"] .ex-card-icon {
    filter: invert(75%) sepia(26%) saturate(677%) hue-rotate(357deg) brightness(89%) contrast(88%) drop-shadow(0 2px 5px rgba(0,0,0,0.3)) !important;
    opacity: 1;
}

/* 3. ДЕКОРАЦИИ (Летающие иконки) - ЗОЛОТОЙ ГРАДИЕНТ/ОТЛИВ */
body[data-theme="old-money"] .deco-icon {
    /* Фильтр, превращающий белое/черное в золото + тень для объема */
    filter: invert(68%) sepia(35%) saturate(735%) hue-rotate(2deg) brightness(110%) contrast(100%) drop-shadow(0 4px 0px #3d1515) !important;
    opacity: 0.9;
}

/* =========================================
    4. КНОПКИ УПРАВЛЕНИЯ (TINDER) - ИСПРАВЛЕНИЕ
    ========================================= */

/* ОБЩИЙ СТИЛЬ для кнопок: Undo, Pass, Like, WL */
body[data-theme="old-money"] .t-circle-btn.undo,
body[data-theme="old-money"] .t-circle-btn.dislike,
body[data-theme="old-money"] .t-circle-btn.like,
body[data-theme="old-money"] .t-circle-btn.wl {
    background: #260909 !important; /* Темный фон (Махагон) */
    border: 1px solid #5c2424 !important; /* Рамка */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important; /* Тень */
}

/* ИКОНКИ ВНУТРИ ЭТИХ КНОПОК -> ДЕЛАЕМ ЗОЛОТЫМИ */
body[data-theme="old-money"] .t-circle-btn.undo .action-icon-img,
body[data-theme="old-money"] .t-circle-btn.dislike .action-icon-img,
body[data-theme="old-money"] .t-circle-btn.like .action-icon-img,
body[data-theme="old-money"] .t-circle-btn.wl .action-icon-img {
    /* Золотой фильтр (#c5a059) */
    filter: invert(75%) sepia(26%) saturate(677%) hue-rotate(357deg) brightness(89%) contrast(88%) !important;
}

/* АКТИВНОЕ СОСТОЯНИЕ (При нажатии) */
body[data-theme="old-money"] .t-circle-btn:active,
body[data-theme="old-money"] .t-circle-btn.wl.active {
    background: #f0e6d2 !important; /* Светлая вспышка */
    border-color: #fff !important;
}
/* При нажатии иконка темнеет */
body[data-theme="old-money"] .t-circle-btn:active .action-icon-img,
body[data-theme="old-money"] .t-circle-btn.wl.active .action-icon-img {
    filter: brightness(0.2) !important; 
}

/* ОСОБЫЙ СТИЛЬ ДЛЯ КНОПКИ WATCH (Центральная) */
body[data-theme="old-money"] .t-circle-btn.watch {
    /* Яркий золотой градиент */
    background: linear-gradient(135deg, #c5a059 0%, #8a6a4b 100%) !important;
    border: 1px solid #f0e6d2 !important; 
    box-shadow: 0 0 25px rgba(197, 160, 89, 0.4) !important;
}
/* Иконка внутри Watch -> ТЕМНАЯ (для контраста с золотом) */
body[data-theme="old-money"] .t-circle-btn.watch .action-icon-img {
    filter: brightness(0.15) !important; 
}

/* 5. КНОПКИ НА СТАРТОВОМ ЭКРАНЕ (Start Screen) */
body[data-theme="old-money"] .mode-circle-btn {
    background: #260909 !important;
    border: 1px solid #5c2424 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
}
/* Иконки внутри - БЕЛЫЕ */
body[data-theme="old-money"] .mode-circle-btn .side-icon-img,
body[data-theme="old-money"] .mode-circle-btn .ai-icon-img {
    filter: brightness(0) invert(1) !important; 
    opacity: 1 !important;
    drop-shadow: 0 0 10px rgba(197, 160, 89, 0.5) !important;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    height: 100vh;
    overflow: hidden; /* Скролл только внутри контейнеров */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button, select, input { font-family: inherit; outline: none; }
a { text-decoration: none; color: inherit; }

/* === CUSTOMIZATION === */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    gap: 15px;
    margin-bottom: 20px;
}

.theme-item {
    background: var(--ios-card);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.theme-item.active {
    border-color: var(--accent);
    background: var(--nav-bg);
}

.theme-item.locked {
    opacity: 0.6;
}

/* Квадраты предпросмотра */
.theme-preview-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(128,128,128,0.2);
    position: relative;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Кружок цвета внутри квадрата */
.theme-preview-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.theme-info {
    display: flex;
    flex-direction: column;
}

.theme-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.theme-type {
    font-size: 10px;
    text-transform: uppercase;
    margin-top: 2px;
}

.lock-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

/* Стили для элемента темы в режиме предпросмотра */
.theme-item.previewing {
    border-color: var(--accent) !important;
    background: var(--nav-bg);
}

/* Убираем прозрачность для заблокированных тем, чтобы их было видно при клике */
.theme-item.locked.previewing {
    opacity: 1 !important;
}

.pro-badge-icon {
    font-size: 10px;
    font-weight: 800;
    background: var(--accent); /* Цвет темы */
    color: #000; /* Контрастный текст */
    padding: 3px 6px;
    border-radius: 6px;
    text-transform: uppercase;
}

/* 2. Плавающая панель "Unlock" (внизу экрана) */
#preview-floating-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(120px); /* Спрятана внизу */
    width: 90%;
    max-width: 380px; /* Чуть компактнее */
    
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    
    padding: 10px 10px 10px 20px; /* Больше воздуха */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px; /* Гарантированный отступ между текстом и кнопкой */
    
    z-index: 30000;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    pointer-events: auto;
}

/* Состояние "Видно" */
#preview-floating-bar.visible {
    transform: translateX(-50%) translateY(0);
}

/* Светлая тема для плашки */
body.light-theme #preview-floating-bar {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Прозрачный щит-перехватчик */
#preview-overlay-shield {
    display: none; /* Скрыт по умолчанию */
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 29000; /* Перекрывает всё, кроме плашки Unlock */
    background: transparent; /* Невидимый */
    -webkit-tap-highlight-color: transparent;
}

/* Когда активен — блокирует всё */
#preview-overlay-shield.active {
    display: block;
}

/* =========================================
2. MAIN LAYOUT (Sidebar & Content)
========================================= */
.app-layout { display: flex; height: 100%; width: 100%; }

.sidebar {
    width: 340px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 10;
}

.main-content {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden !important;
}

.tab-content {
    flex: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch; 
    padding: 20px 15px;
    padding-bottom: 120px;
    padding-top: 110px; /* Место под хедер на мобильных */
    width: 100%;
    box-sizing: border-box;
}

.tab-content.active { display: flex; }

.center-wrapper {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

/* =========================================
3. HEADERS, LOGO & MASKS
========================================= */
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 0;
    letter-spacing: -1px;
    cursor: pointer;
    line-height: 1;
}
.logo span { 
    /* Градиент: Сверху #CB53F0, Снизу цвет темы */
    background: linear-gradient(180deg, #CB53F0 20%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    position: relative;
    z-index: 1;
}

.logo-img {
    height: 45px;
    width: auto;
    display: block;
    object-fit: contain;
    transform: translateY(0);
    margin-right: 2px;
}

body.tab-home-active .mobile-header .subtitle {
    display: none !important; /* Скрываем подзаголовок */
}

body.tab-home-active .mobile-header {
    min-width: auto;
    width: auto;
    padding: 8px 20px;
    border-radius: 50px;
    min-height: 50px; 
}

body.tab-home-active .mobile-header .logo {
    font-size: 22px;
    margin: 0;
}

body.tab-home-active .mobile-header .logo-img {
    height: 35px;
    transform: translateY(0);
}

body.tab-home-active #tab-home {
    padding-top: 80px !important; 
}

/* 1. Скрываем подзаголовок на ВСЕХ вкладках */
body.tab-home-active .mobile-header .subtitle,
body.tab-settings-active .mobile-header .subtitle,
body.tab-account-active .mobile-header .subtitle {
    display: none !important;
}

/* 2. Превращаем хедер в компактную капсулу на ВСЕХ вкладках */
body.tab-home-active .mobile-header,
body.tab-settings-active .mobile-header,
body.tab-account-active .mobile-header {
    min-width: auto;
    width: auto;
    padding: 8px 20px;      /* Компактные отступы */
    border-radius: 50px;    /* Полная капсула */
    min-height: 50px;
    flex-direction: row;    /* Элементы в строку */
}

/* 3. Уменьшаем размер шрифта логотипа */
body.tab-home-active .mobile-header .logo,
body.tab-settings-active .mobile-header .logo,
body.tab-account-active .mobile-header .logo {
    font-size: 22px;
    margin: 0;
}

/* 4. Уменьшаем картинку логотипа */
body.tab-home-active .mobile-header .logo-img,
body.tab-settings-active .mobile-header .logo-img,
body.tab-account-active .mobile-header .logo-img {
    height: 35px;
    transform: translateY(0);
}

/* 5. Корректируем отступ контента сверху (так как шапка стала меньше) */
body.tab-settings-active #tab-settings,
body.tab-account-active #tab-account {
    padding-top: 90px !important; /* Было 110px, уменьшаем под размер капсулы */
}

.subtitle {
    font-size: 11px; 
    color: var(--text-secondary); 
    text-transform: uppercase;
    letter-spacing: 1px; 
    text-align: center; 
    
    margin-top: -5px !important;   /* Тянем вверх к логотипу */
    margin-bottom: 25px !important; /* Отступ снизу до меню */
    
    font-weight: 600; 
    opacity: 0.7; 
    max-width: 240px; 
    margin-left: auto; /* Центрирование */
    margin-right: auto;
    line-height: 1.4;
}

/* Градиентные маски для скролла */
.top-gradient-mask {
    display: none;
    position: fixed; top: -50px; left: 0; width: 100%; height: 160px;
    z-index: 9000; pointer-events: none;
    background: linear-gradient(to bottom, var(--bg-color) 40%, transparent 100%);
}
.bottom-gradient-mask {
    display: none; 
    position: fixed; bottom: -50px; left: 0; width: 100%; height: 160px;
    z-index: 9000; pointer-events: none;
    background: linear-gradient(to top, var(--bg-color) 40%, transparent 100%);
}

@keyframes cardPopIn {
    0% { 
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    60% {
        opacity: 1;
        transform: scale(1.02) translateY(-5px); /* Легкий перелет */
    }
    100% { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.anim-initial-pop {
    animation: cardPopIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* Скрываем элементы карточки до начала анимации */
.card-content-hidden .stagger-item {
    opacity: 0;
    animation: none !important;
}

/* === 1. СКРЫВАЕМ ШАПКУ НА ГЛАВНОЙ === */
body.tab-home-active .mobile-header {
    display: none !important; /* Полностью убираем */
}

/* Корректируем отступ контента на главной */
body.tab-home-active #tab-home {
    /* Оставляем отступ только под статус-бар/челку телефона */
    padding-top: max(20px, env(safe-area-inset-top)) !important; 
}

/* === 2. ЧЕРНЫЙ ЭКРАН ПРИВАТНОСТИ (PWA) === */
#pwa-privacy-screen {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh; /* Используем vw/vh для гарантии */
    background-color: var(--bg-color); 
    z-index: 2147483647 !important; /* Максимальный Z-index с приоритетом */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Оптимизация рендеринга для iOS */
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0);
    will-change: opacity, display;
    pointer-events: none; /* Чтобы не мешал кликам, когда скрыт (если display глючит) */
}

/* Класс для мгновенного показа */
#pwa-privacy-screen.active {
    display: flex !important;
    pointer-events: auto;
}

/* =========================================
4. GENERATOR CARD & SLOT MACHINE
========================================= */
.animation-text-box { text-align: center; min-height: 20px; margin-bottom: 5px; width: 100%; }
.animation-text { font-size: 14px; font-weight: 700; color: var(--accent); text-transform: uppercase; opacity: 0; transition: opacity 0.2s; }
.animation-text.visible { opacity: 1; }

.status-text-combined {
    /* Позиционирование НАД карточкой */
    position: absolute;
    bottom: 100%; /* Приклеиваем к верху контейнера */
    left: 0;
    width: 100%;
    margin-bottom: 15px; /* Отступ от карточки */
    z-index: 15; 
    
    /* Стили текста */
    text-align: center; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    font-size: 16px; 
    font-weight: 700; 
    color: var(--text-main);
    text-transform: uppercase; 
    letter-spacing: 1px;
    line-height: 1.3; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    
    transform-origin: 50% 400px; /* Примерно центр низа карточки */
    will-change: transform;
    pointer-events: none; /* Чтобы текст не мешал свайпать */
}

.card {
    position: relative; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; 
    
    width: 100%;
    min-height: 60vh; 
    height: auto;
    
    background: var(--card-gradient);
    border: 1px solid var(--border);
    border-radius: 28px;
    overflow: hidden; 
    padding: 0 !important; 
    
    transition: transform 0.1s linear; 
    z-index: 5;
}

body.light-theme .card {
    background: var(--card-gradient);
    border: 1px solid rgba(0,0,0,0.04) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .mobile-header {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

body.light-theme .bottom-nav {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
}

body.light-theme .ios-group,
body.light-theme .capsule-btn,
body.light-theme .mode-capsule-btn {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.05);
}

body.light-theme .voice-icon-img,
body.light-theme .ai-icon-img {
    filter: invert(0) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.05));
    opacity: 0.6;
}

.card.has-results {
    min-height: inherit !important;
    height: auto !important;
    padding-top: 15px !important; 
    padding-bottom: 15px !important;
    justify-content: flex-start !important;
    gap: 5px; 
}

@keyframes flyInSmooth {
    0% { 
        transform: translateX(100px) scale(0.9); /* Слегка справа и меньше */
        opacity: 0; 
        filter: blur(10px);
    }
    100% { 
        transform: translateX(0) scale(1); 
        opacity: 1; 
        filter: blur(0);
    }
}

.anim-slow-enter {
    /* 0.8s - медленнее и плавнее, чем обычный свайп */
    animation: flyInSmooth 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

/* Slot Window */
.slot-window {
    width: 100%;
    /* На мобильных высота авто, чтобы не занимать лишнее место */
    height: auto !important; 
    min-height: 100px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    
    /* Маска для красивого исчезновения текста */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* На совсем маленьких экранах (iPhone SE и т.д.) чуть уменьшаем */
@media (max-height: 650px) {
    .slot-window {
        height: 180px !important;
    }
}

.card.has-results .slot-window {
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.slot-reel {
    display: flex; flex-direction: column; align-items: center;
    transform: translateY(0); width: 100%;
    will-change: transform;
}

.slot-item {
    height: auto !important; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    padding: 0 10px;
    font-size: clamp(32px, 8vw, 60px) !important;
    font-weight: 800;
    color: var(--text-main);
    flex-shrink: 0;
    box-sizing: border-box;
}
.card.has-results .slot-item {
    height: auto !important;
    padding: 0 10px !important;
    margin-bottom: 5px;
    font-size: clamp(28px, 6vw, 42px) !important;
    
    display: block !important; 
    text-align: center !important;
    white-space: normal !important; 
    line-height: 1.2 !important;
}

.slot-item span {
    font-weight: 600;
    margin-left: 6px; 
    display: inline; 
}

.card > div:last-child {
    z-index: 20; 
    flex: 0 0 auto; 
    width: 100%;
    padding-bottom: 20px;
    margin-top: auto; 
    background: transparent; 
}


/* Animations & Effects */
.slot-item.shrunk { transform: scale(0.8); opacity: 0.7; }
.slot-item.zoomed { transform: scale(1.2); color: var(--accent); text-shadow: 0 0 20px rgba(255, 153, 0, 0.4); }

.card.flash-active { background-color: #fff !important; border-color: #fff !important; transform: scale(1.02); }

.result-description { 
    font-size: 19px !important; 
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    line-height: 1.5 !important;
    max-width: 90%; 
    margin: 0 auto; 
    text-align: center;
    opacity: 0.2;
}
.result-description.fade-visible:not(:empty) { display: block; }

/* Idle Animation */
@keyframes scrollIdle { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.slot-reel.idle { animation: scrollIdle 60s linear infinite; filter: blur(5px); opacity: 0.6; }
.slot-reel.spinning { filter: blur(0); opacity: 1; }

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

/* Карточка вылетает СЛЕВА (для "Другое" / Свайп влево / Вернуться) */
@keyframes flyInLeft {
    0% { 
        transform: translateX(-150%) rotate(-15deg); /* Чуть дальше вылет */
        opacity: 0; 
        filter: blur(20px); /* Сильный блюр в начале */
    }
    50% {
        opacity: 1;
        filter: blur(10px); /* Блюр в середине */
    }
    100% { 
        transform: translateX(0) rotate(0); 
        opacity: 1; 
        filter: blur(0); /* Четкость в конце */
    }
}

/* Карточка вылетает СПРАВА (для "Похожее" / Свайп вправо) */
@keyframes flyInRight {
    0% { 
        transform: translateX(150%) rotate(15deg); 
        opacity: 0; 
        filter: blur(20px); 
    }
    50% {
        opacity: 1;
        filter: blur(10px);
    }
    100% { 
        transform: translateX(0) rotate(0); 
        opacity: 1; 
        filter: blur(0); 
    }
}

/* Классы для JS */
.anim-fly-left {
    animation: flyInLeft 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

.anim-fly-right {
    animation: flyInRight 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

/* =========================================
5. BUTTONS & CONTROLS
========================================= */
.btn-gen, .btn-watch, .related-item-btn, .btn-action { border-radius: 22px; outline: none; border: none; cursor: pointer; }

.gen-controls { display: flex; gap: 10px; width: 100%; margin-bottom: 15px; transition: opacity 0.3s; }
.btn-gen { flex: 1; padding: 22px; background: var(--text-main); color: var(--bg-color); font-size: 18px; font-weight: 900; text-transform: uppercase; box-shadow: 0 4px 15px rgba(255,255,255,0.1); }
.btn-gen.secondary { background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border); font-size: 16px; flex: 0.8; }

.btn-group { display: flex; gap: 10px; margin-bottom: 15px; width: 100%; }
.btn-watch { flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 16px; border-radius: 16px; font-weight: 800; font-size: 15px; text-transform: uppercase; background: var(--accent); color: #000; }

.card-actions { display: flex; gap: 15px; width: 100%; justify-content: center; margin-top: 20px; }
.btn-action { 
    flex: 1; padding: 15px; border-radius: 18px; border: 1px solid var(--border); 
    background: transparent; color: var(--text-secondary); font-size: 24px;
    font-weight: 700; transition: all 0.2s; max-width: 80px;
    display: flex; align-items: center; justify-content: center;
}
.btn-action.ban:hover, .btn-action.ban.active { border-color: var(--highlight-red); background: rgba(231, 76, 60, 0.15); color: var(--highlight-red); transform: scale(1.05); }
.btn-action.fav:hover, .btn-action.fav.active { border-color: var(--highlight-green); background: rgba(46, 204, 113, 0.15); color: var(--highlight-green); transform: scale(1.05); }

.btn-watch-later {
    width: 54px;
    flex-shrink: 0;
    border-radius: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-watch-later:active {
    transform: scale(0.95);
}

/* Активное состояние кнопки (когда добавлено) - Синий цвет */
.btn-watch-later.active {
    background: #3498db; /* Синий */
    color: #ffffff;
    border-color: #3498db;
}

/* Стиль тега в списке "Смотреть позже" (Синий) */
.catalog-item.wl-active { 
    background: rgba(52, 152, 219, 0.2); 
    color: #3498db; 
    border: 1px solid #3498db; 
}

/* Related & Tags */
.related-section { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-top: 35px !important;
    margin-bottom: 20px; 
    text-align: center; 
}
.related-tags {
    display: flex;
    flex-wrap: wrap;       /* Разрешаем перенос на следующую строку */
    justify-content: center; /* Центрируем теги */
    gap: 10px;             /* Расстояние между тегами */
    width: 100%;
}
.related-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; opacity: 0.8; }
.related-item-btn { background: var(--card-bg); border: 1px solid var(--border); padding: 8px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--text-main); transition: 0.2s; }

/* Utility */
.visually-hidden { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.fade-hidden { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; display: none; }
.fade-visible { opacity: 1; transform: translateY(0); display: flex; }

/* --- ИКОНКИ ИНТЕНСИВНОСТИ --- */
.intensity-selector-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 25px; /* Отступы по бокам для иконок */
    margin-top: 5px;
}

.intensity-btn {
    width: 45px;  /* Размер иконки */
    height: 45px;
    object-fit: contain;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* Неактивное состояние: серое и полупрозрачное */
    filter: grayscale(100%);
    opacity: 0.3; 
}

/* Активное состояние: цветное, яркое, чуть увеличено */
.intensity-btn.active {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.15);
}

/* --- ОБНОВЛЕНИЕ ДЛЯ СТАТУСА ПОДПИСКИ --- */
#settings-plan-status {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-secondary);
}
/* Цвет для PRO*/
#settings-plan-status.premium {
    color: var(--accent) !important;
    font-weight: 800;
}

#intensity-value-label {
    font-size: 14px; 
    font-weight: 800; 
    text-transform: uppercase; 
    margin-right: 2px;
    
    /* По умолчанию скрыт и смещен немного вниз */
    opacity: 0;
    transform: translateY(5px);
    
    /* Плавная анимация для всех свойств */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Класс для показа */
#intensity-value-label.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
6. IOS SETTINGS & COMPONENTS
========================================= */
.ios-group {
    background: var(--ios-card); border-radius: 22px; overflow: hidden; margin-bottom: 20px; width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.ios-header {
    margin: 25px 0 8px 20px; font-size: 13px; color: var(--ios-header);
    text-transform: uppercase; display: flex; justify-content: space-between;
}
.ios-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; background: var(--ios-card); min-height: 44px; position: relative;
}
.ios-row:not(:last-child)::after {
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 48px; 
    right: 16px;
    height: 1px;
    background-color: var(--ios-separator); 
    transform: scaleY(0.5);
}
.ios-row.clickable { cursor: pointer; transition: background 0.2s; }
.ios-row.clickable:active { background: var(--nav-bg); }

.capsule-btn {
    background: var(--ios-card); border-radius: 22px; padding: 5px 20px;
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; margin-bottom: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    min-height: 55px; cursor: pointer; transition: transform 0.2s, background 0.2s; border: none;
}
.capsule-btn:active { transform: scale(0.98); background: var(--nav-bg); }
.capsule-btn span { font-weight: 600; font-size: 16px; color: var(--text-main); }
.capsule-btn select { font-weight: 700; color: var(--accent) !important; font-size: 17px; background: transparent; border: none; text-align: right; appearance: none; -webkit-appearance: none; }

.platform-select, .ios-row select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text-secondary);
    text-align: right;
    direction: rtl;
    padding-right: 0;
    font-weight: 400;
    cursor: pointer;
    font-family: inherit;
}

/* Account Elements */
.sync-date { font-size: 11px; color: var(--text-secondary); text-align: center; margin-top: 10px; margin-bottom: 20px; opacity: 0.6; }

/* Switches & Sliders */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; margin: 0 5px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border); transition: .3s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent); }
input:checked + .slider:before { transform: translateX(20px); }

.range-slider { width: 100%; cursor: pointer; }
.intensity-labels { display: flex; justify-content: space-between; margin-top: 10px; padding: 0 5px; }
.intensity-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; }
.intensity-label.active { color: var(--accent); font-weight: 700; }

/* Accordion */
.accordion { background: transparent !important; }
.accordion-head { padding: 16px !important; font-size: 17px !important; color: var(--text-main) !important; display: flex; justify-content: space-between; }
.accordion-body { display: none; padding: 0 16px 16px; flex-wrap: wrap; gap: 8px; }
.accordion-body.open { display: flex; }

/* Tags */
.capsule-accordion-head { background: var(--card-bg); border: 1px solid var(--border); border-radius: 50px; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; width: auto; max-width: 200px; margin: 0 auto 15px auto; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; }

/* =========================================
7. MOBILE BOTTOM NAV
========================================= */
.bottom-nav {
    display: flex; 
    position: fixed; 
    bottom: 20px; 
    left: 50%; 
    transform: translateX(-50%);
    width: 85%; 
    max-width: 350px; 
    height: 65px;
    background: var(--ios-card); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 50px;
    z-index: 9999; 
    
    /* ИСПРАВЛЕНИЕ: Равномерный отступ со всех сторон */
    padding: 5px; 
    
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    justify-content: space-between; 
    align-items: center;
    box-sizing: border-box;
}


body.light-theme .bottom-nav { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.1); }
.nav-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    font-size: 10px; 
    font-weight: 600; 
    color: var(--text-secondary); 
    
    flex: 1; 
    height: 100%;
    cursor: pointer; 
    transition: all 0.2s; 
    z-index: 2; 
    position: relative;

    /* Отключает системное меню (копировать/сохранить) на iOS */
    -webkit-touch-callout: none; 
    /* Отключает выделение синим цветом */
    -webkit-user-select: none;   
    user-select: none;           
    /* Убирает серую подсветку при тапе (если она не нужна) */
    -webkit-tap-highlight-color: transparent; 
}
.nav-item.active { color: var(--text-main); }
.nav-item.active .nav-icon { transform: translateY(-2px); color: var(--accent); }
.nav-icon { font-size: 22px; margin-bottom: 2px; transition: transform 0.2s; }

@media (min-width: 769px) {
    .bottom-nav {
        display: none !important;
    }
}

.nav-icon-img {
    height: 24px;
    width: 24px;
    object-fit: contain;
    margin-bottom: 4px;
    transition: filter 0.3s, transform 0.2s;
    filter: invert(1);

    /* === ФИКС КАРТИНКИ === */
    pointer-events: none; 
    
    /* Запрещает перетаскивание картинки (призрак) */
    -webkit-user-drag: none; 
    user-drag: none;
}

/* Светлая тема */
body.light-theme .nav-icon-img {
    filter: invert(0);
    opacity: 0.6;
}

/* Активное состояние (светлая тема) */
body.light-theme .nav-item.active .nav-icon-img {
    filter: invert(0);
    opacity: 1;
}

.nav-item.active .nav-icon-img {
    transform: scale(1.1);
}

.nav-active-pill {
    position: absolute;
    top: 5px;
    bottom: 5px;
    
    left: 5px; 
    
    width: calc((100% - 10px) / 3); 
    
    background: rgba(255, 255, 255, 0.15);
    border-radius: 40px;
    z-index: 1; /* Таблетка под текстом */
    transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
    will-change: transform;
}

body.light-theme .nav-active-pill {
    background: rgba(0, 0, 0, 0.05);
}

/* Нуарная тема */
body[data-theme="noir"] .nav-active-pill {
    background: #ffffff;
}
body[data-theme="noir"] .nav-item.active {
    color: #000 !important;
}
body[data-theme="noir"] .nav-item.active .nav-icon-img {
    filter: invert(0) !important;
}

/* Убираем старую анимацию с контента, чтобы она не мешала быстрому слайдингу */
.tab-content.active .center-wrapper {
    animation: tabPremiumIn 0.3s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

/* =========================================
8. MODALS (GENERAL)
========================================= */
.modal-overlay {
    /* Фиксация позиции и слоя */
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 20000 !important;
    
    /* Фон и блюр */
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    /* Flex для позиционирования окна */
    display: flex !important;
    flex-direction: column !important;
    
    /* СКРЫТО ПО УМОЛЧАНИЮ (Анимация через opacity) */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s !important;
}

/* СОСТОЯНИЕ "ОТКРЫТО" - ЭТОТ КЛАСС ДОБАВЛЯЕТ JS */
.modal-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 2. САМО ОКНО (MODAL) */
.modal {
    /* Сброс старых размеров и отступов */
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    position: relative !important;
    
    /* Фон и тени */
    background: var(--sidebar-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    
    /* Плавная анимация появления */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

/* 3. ШАПКА (HEADER) */
.modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Центрируем заголовок */
    position: relative !important;
    min-height: 60px !important;
    padding: 0 !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}

.modal-header {
    border-bottom: none !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.modal-header > span:not(.modal-close-btn):not(.modal-header-actions) {
    position: absolute !important;
    left: 0;
    right: 0;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important; /* Убираем любой фон */
    box-shadow: none !important;        /* Убираем любые тени */
    
    font-size: 17px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--text-main) !important;
    pointer-events: none;
    z-index: 1;
}



/* Кнопка закрытия (Крестик) - Всегда справа */
.modal-header > span:last-child {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    width: 32px !important; height: 32px !important;
    border-radius: 50% !important;
    background: rgba(128, 128, 128, 0.15) !important;
    color: var(--text-secondary) !important;
    
    align-items: center !important; justify-content: center !important;
    font-size: 16px !important; cursor: pointer !important;
    z-index: 10 !important;
}

/* 4. ТЕЛО (BODY) */
.modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 20px 30px 20px !important;
}

#sub-status-btn {
    background: var(--card-bg); 
    border: 1px solid var(--border);
    transition: background 0.3s, border-color 0.3s;
}

@media (min-width: 769px) {
    .modal-overlay {
        justify-content: center !important;
        align-items: center !important;
    }

    .modal {
        width: 550px !important;       /* Фиксированная ширина */
        max-width: 90% !important;
        height: auto !important;
        max-height: 85vh !important;   /* Не на весь экран */
        
        border-radius: 24px !important;
        
        /* Анимация: Легкое увеличение */
        transform: scale(0.95) !important;
    }

    .modal-overlay.open .modal {
        transform: scale(1) !important;
    }
}

/* --- МОБИЛЬНАЯ ВЕРСИЯ (Узкий экран) --- */
@media (max-width: 768px) {
    .modal-overlay {
        justify-content: flex-end !important; /* Прижать к низу */
        align-items: center !important;
    }

    .modal {
        width: 100% !important;
        height: auto !important;
        max-height: 85vh !important; /* Шторка не на весь экран */
        min-height: 300px !important;
        
        /* Скругление только сверху */
        border-radius: 28px 28px 0 0 !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        
        padding-bottom: 0 !important;
        
        /* Анимация: Выезд снизу */
        transform: translateY(100%) !important;
    }

    .modal-overlay.open .modal {
        transform: translateY(0) !important;
    }

    /* "Ручка" шторки (серая полоска) */
    .modal-header::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(128, 128, 128, 0.4);
        border-radius: 10px;
    }
    
    /* Добавляем плавность для возврата шторки на место */
    .modal.swiping {
        transition: none !important; /* Отключаем анимацию во время перетаскивания */
    }
    
    .modal {
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
        will-change: transform;
    }
    
    /* Сдвигаем заголовок чуть ниже из-за ручки */
    .modal-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* Строго по центру */
        padding: 15px 20px !important;      /* Уменьшили отступ сверху */
        min-height: 60px !important;
        position: relative !important;
        
        /* Жирный текст */
        font-weight: 900 !important; 
        font-size: 18px !important;
        color: var(--text-main) !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .modal-header::before {
        top: 6px !important; /* Чуть выше */
    }
}



modal-header .modal-close-btn,
.modal-header #mods-counter,
.modal-header > span:not(.modal-close-btn):not(.modal-header-actions) {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important; 
    padding: 0 !important;
    line-height: 1 !important; /* Убираем влияние высоты строки */
    display: flex !important;
    align-items: center !important;
}

/* 3. Уточнение позиций сторон */
.modal-header .modal-close-btn {
    left: 20px !important;
}

#mods-counter {
    right: 20px !important;
    left: auto !important;
}

/* 4. Заголовок (центр) */
.modal-header > span:not(.modal-close-btn):not(.modal-header-actions) {
    left: 0;
    right: 0;
    width: 100%;
    justify-content: center !important;
    pointer-events: none;
    font-size: 18px !important;
    font-weight: 900 !important;
}

/* 5. Дополнительная правка для ПК (размер кнопки) */
@media (min-width: 769px) {
    .modal-close-btn {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        max-width: 14px !important;
        background: #ff5f56 !important;
        border-radius: 50% !important;
    }
    
    /* Прячем стрелку */
    .modal-close-icon {
        display: none !important;
    }
}

#modal-stats-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; 
    min-height: 0 !important;
}

.modal-header::before,
.modal-header::after {
    content: none !important;
    display: none !important;
}


/* Catalog Search */
.modal-search-box { width: 100%; margin-bottom: 15px; position: relative; }
.modal-search-input { width: 100%; background: var(--ios-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; font-size: 16px; color: var(--text-main); }
.modal-suggestions { display: none; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; margin-top: 5px; max-height: 200px; overflow-y: auto; position: absolute; width: 100%; z-index: 100; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.suggestion-row { padding: 10px 15px; border-bottom: 1px solid var(--border); font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; }

.catalog-item { padding: 8px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: default; display: inline-flex; align-items: center; gap: 8px; margin: 3px; }
.catalog-item.active { background: rgba(46, 204, 113, 0.2); color: #2ecc71; border: 1px solid #2ecc71; }
.catalog-item.ban-active { background: rgba(231, 76, 60, 0.2); color: #e74c3c; border: 1px solid #e74c3c; }
.catalog-remove-btn { cursor: pointer; opacity: 0.6; padding: 0 4px; }

/* =========================================
9. STATS & CHARTS
========================================= */
.axis-label-y { position: absolute; left: -15px; top: 50%; transform: translateY(-50%) rotate(-90deg); font-size: 10px; color: var(--text-secondary); }
.axis-label-x-title { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); }
.chart-container { display: flex; align-items: flex-end; justify-content: space-between; height: 250px; width: 100%; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); position: relative; }
.chart-bar-group { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; position: relative; }
.chart-bar.secondary { background: var(--text-secondary); margin-right: 2px; }
.bar-wrapper { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.chart-value-y {
    font-size: 10px; 
    font-weight: 700; 
    color: var(--text-main);
    margin-bottom: 4px; 
    text-align: center;
    width: 100%;
}

.stats-tf-capsule, .stats-nav-capsule { background: var(--ios-card); border: 1px solid var(--border); border-radius: 50px; display: flex; padding: 3px; width: 100%; }
.stats-tf-capsule { height: 36px; margin-bottom: 8px; }
.stats-nav-capsule { height: 50px; }
.stats-tf-item, .stats-nav-item { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 40px; font-size: 11px; font-weight: 700; color: var(--text-secondary); cursor: pointer; text-transform: uppercase; }
.stats-tf-item.active, .stats-nav-item.active { background: var(--nav-bg); color: var(--text-main); }
.stats-tf-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.tf-anchor {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================
10. SUBSCRIPTION MODAL (RESPONSIVE)
========================================= */
.plan-card {
    flex: 1 !important;
    min-width: 0 !important; 
    background: var(--ios-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    margin: 0 !important; 
}
.plan-card {
    position: relative !important; 
    overflow: hidden !important;  
    display: flex !important;
    flex-direction: column !important;
    background: var(--ios-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}
.plan-card.pro { border-color: #ff9900; box-shadow: 0 0 20px rgba(255, 153, 0, 0.1); }

.plan-title { font-size: 22px; font-weight: 900; text-transform: uppercase; margin-bottom: 5px; }
.plan-card.pro .plan-title { color: #ff9900; }
.plan-price { font-size: 18px; font-weight: 700; color: var(--text-main); margin-bottom: 15px; }

.plan-features { list-style: none; padding: 0; margin: 0 0 20px 0; }
.plan-features li { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; padding-left: 20px; position: relative; }
.plan-features li::before { content: "•"; position: absolute; left: 0; color: var(--text-main); }

.plan-btn { width: 100%; padding: 12px; border-radius: 12px; font-weight: 800; border: none; cursor: pointer; text-transform: uppercase; font-size: 14px; margin-top: auto; }
.plan-btn.current { background: var(--nav-bg); color: var(--text-secondary); opacity: 0.7; }
.plan-btn.pro-btn { background: #ff9900; color: #000; box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3); }

/* Mobile Default Layout for Plans */
.plans-container {
    display: flex !important;
    flex-direction: column !important; 
    gap: 15px !important;
    padding-bottom: 20px !important;
}
#modal-sub-overlay .modal { width: 90%; max-width: 400px; max-height: 90vh; }

/* =========================================
11. Tinder Logic
========================================= */
.tinder-actions {
    margin-top: auto; 
    padding-top: 10px;
    border-top: none;
    width: 100%;
    display: flex;
    gap: 10px;
}

.result-description {
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.related-section {
    margin-top: 5px !important;
    margin-bottom: 15px;
}

.btn-tinder {
    flex: 1;
    padding: 18px 10px;
    border-radius: 50px; /* Полностью круглые края */
    border: none;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.1s, opacity 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-tinder:active { transform: scale(0.95); }

.btn-pass {
    background:transparent;
    border: 2px solid var(--highlight-red);
    color: var(--highlight-red);
}

.btn-like {
    background: var(--highlight-green) !important;
    color: #fff !important; /* Белый текст для контраста */
    border: 2px solid var(--highlight-green) !important;
}

.btn-like:active, .btn-like.active-state {
    background: rgba(46, 204, 113, 0.2) !important;
    color: var(--highlight-green) !important;
}

/* === 3. КНОПКА НАЗАД (UNDO) === */
.undo-container {
    margin-top: 5px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.btn-undo {
    width: auto !important;
    height: auto !important;
    border-radius: 50px !important;
    padding: 8px 24px !important; 
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px !important;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.btn-undo:active {
    background: var(--nav-bg);
    transform: scale(0.96);
}

/* === 4. СВАЙПЫ (Карточка) === */
.card {
    position: relative; 
    overflow: hidden;
    touch-action: none; /* Важно для свайпов на мобильных */
    transform-origin: 50% 100%;
    will-change: transform, opacity;
    justify-content: space-between;
    margin-bottom: 10px !important; 
}

.card-reject {
    background: rgba(231, 76, 60, 0.9) !important; /* Красный */
    border-color: #c0392b !important;
    filter: blur(5px) grayscale(0.5); /* Блюр */
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.6) !important;
}

.card-like {
    background: rgba(46, 204, 113, 0.9) !important; /* Зеленый */
    border-color: #27ae60 !important;
    filter: blur(5px) grayscale(0.5); /* Блюр */
    box-shadow: 0 0 30px rgba(46, 204, 113, 0.6) !important;
}

/* --- 3. Начальная кнопка (Капсула внутри карточки) --- */
#start-btn-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-bottom: 15px;
    
    flex-shrink: 0 !important; 
    min-height: 70px;
    
    position: relative;
    z-index: 30; 
}

.btn-start-capsule {
    /* Градиент темы: Слева светлее, Справа основной цвет */
    background: linear-gradient(to right, var(--accent-light), var(--accent));
    
    color: white; /* Текст всегда белый для контраста */
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 18px 40px;
    border-radius: 50px;
    border: none;
    
    /* Свечение (тень) в цвет темы */
    box-shadow: 0 10px 40px -5px var(--accent);
    
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    
    flex-shrink: 0; 
    z-index: 30;
}

.btn-start-capsule:active {
    transform: scale(0.95);
    /* Уменьшаем тень при нажатии */
    box-shadow: 0 5px 20px -5px var(--accent);
}

/* --- 4. Анимация "Вишенка на торте" (Staggered Fade Up) --- */
@keyframes fadeInUpSmooth {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Базовый класс для элементов, которые должны появляться плавно */
.stagger-item {
    opacity: 0; /* Скрыты по умолчанию */
    animation: fadeInUpSmooth 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Задержки (Очередь появления) */
.delay-1 { animation-delay: 0.1s; } /* Заголовок (почти сразу после вспышки) */
.delay-2 { animation-delay: 0.3s; } /* Описание */
.delay-3 { animation-delay: 0.5s; } /* Похожие */
.delay-4 { animation-delay: 0.7s; } /* Кнопки (Watch/Like) */
.delay-5 { animation-delay: 1.0s; } /* Объяснение (Вишенка) */

/* Фикс для заголовка (слота), чтобы он не конфликтовал со скриптом барабана */
.slot-reel .slot-item.final-result {
    opacity: 0;
    animation: fadeInUpSmooth 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.1s;
}

/* Активные состояния для новых кнопок */
.btn-tinder.active-state {
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.3);
    transform: scale(0.98);
}
.btn-like.active-state { 
    background: #fff !important; 
    color: var(--accent) !important; 
    border-color: #fff !important;
}
.btn-pass.active-state { 
    background: var(--highlight-red) !important; 
    color: #fff !important; 
}

.restore-anim { animation: flyInLeft 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* 1. Скрываем старые кнопки по ID, а не по классу, чтобы не задеть кнопку старта */
#btn-gen, #btn-similar { 
    display: none !important; 
}

/* 2. Принудительно показываем контейнер старта, если у него нет класса hidden-initial */
#start-btn-container:not(.hidden-initial) {
    display: flex !important;
}

/* 3. Гарантируем, что новые кнопки будут Flex, когда мы уберем скрывающий класс */
#main-actions:not(.hidden-initial) {
    display: flex !important;
}

.hidden-initial, .visually-hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#start-btn-container {
    transition: opacity 0.3s ease;
}

/* Адаптация под мобильные */
@media (max-width: 768px) {
    
    /* 1. ГЛОБАЛЬНЫЕ СКРЫТИЯ */
    .sidebar, .tinder-actions, .btn-group, .undo-container, .badge-tooltip { display: none !important; }
    .mobile-header, .bottom-nav, .top-gradient-mask, .bottom-gradient-mask { display: flex !important; }
    .main-content { padding: 0 !important; }

    /* 2. КОНТЕЙНЕР */
    #tab-home .center-wrapper {
        height: 100vh !important;
        height: 100dvh !important;
        padding-top: 65px !important; 
        padding-bottom: 90px !important; 
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important;
        overflow: hidden !important; 
        width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* 3. КАРТОЧКА */
    .card, .card.has-results {
        flex-grow: 1 !important;
        height: 100% !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        padding: 10px 5px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        overflow: hidden !important;
    }

    /* === ВНУТРЕННИЕ БЛОКИ === */
    .card > div:nth-child(1) { flex: 0 0 auto !important; min-height: 25px !important; } /* Бейджи */
    
    /* ЦЕНТР (Возвращено space-evenly) */
    .card > div:nth-child(2) {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-evenly !important; 
        align-items: center !important;
        overflow: hidden !important; 
        padding: 10px 0 !important;
    }

    .card > div:last-child { flex: 0 0 auto !important; margin-top: 5px !important; width: 100%; } /* Кнопки */

    /* --- ЭЛЕМЕНТЫ КОНТЕНТА --- */
    
    .slot-window {
        width: 100%;
        height: auto !important;
        flex: 0 1 auto !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .slot-item { 
        font-size: clamp(26px, 9vw, 48px) !important;
        line-height: 1.1 !important;
    }

    /* === ОПИСАНИЕ === */
        #result-desc {
        max-height: none !important; 
        overflow-y: visible !important;
        
        flex-shrink: 0 !important; 
        
        font-size: 15px !important;
        line-height: 1.35 !important;
        margin: 10px 0 15px 0 !important;
        white-space: normal !important; 
        
        display: -webkit-box;
        -webkit-line-clamp: 6; /* Показать максимум 6 строк */
        -webkit-box-orient: vertical;
        overflow: hidden !important; 
    }
    
    /* === ПОХОЖИЕ (ТЕГИ) === */
    .related-section {
        margin-top: 0 !important; /* Отступ уже задан в margin-bottom описания */
        margin-bottom: 5px !important;
        width: 100%;
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }
    
    .related-tags { 
        display: flex !important;
        flex-wrap: nowrap !important; /* Запрещаем перенос строк */
        overflow-x: auto !important;  /* Разрешаем горизонтальный скролл */
        justify-content: flex-start !important; /* Выравнивание по началу */
        width: 100%;
        padding-bottom: 5px;
        gap: 6px !important;
        
        scrollbar-width: none; 
        -ms-overflow-style: none;
        
        mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    }
    .related-tags::-webkit-scrollbar { 
        display: none; 
    }
    
    .related-item-btn { 
        flex-shrink: 0 !important; /* Запрещаем кнопкам сжиматься */
        white-space: nowrap !important; 
        font-size: 12px; 
        padding: 8px 14px; 
    }

    /* --- КНОПКИ --- */
    .tinder-nav-row {
        gap: 8px !important; margin-bottom: 5px !important;
        justify-content: space-between !important; padding: 0 5px !important;
    }
    .t-circle-btn.small { width: 38px !important; height: 38px !important; font-size: 18px !important; }
    .t-circle-btn.medium { width: 50px !important; height: 50px !important; font-size: 24px !important; }
    .t-circle-btn.large { width: 64px !important; height: 64px !important; font-size: 28px !important; }

    #start-btn-container { min-height: 50px !important; }
    .btn-start-capsule { padding: 12px 30px !important; font-size: 16px !important; }

    #tab-settings .center-wrapper, #tab-account .center-wrapper { 
        padding: 40px 15px 120px 15px !important; height: auto !important; display: block !important;
    }
}

/* Зеленый тег (Лайк) */
.onb-tag.like {
    background: rgba(46, 204, 113, 0.2); 
    color: #2ecc71; 
    border: 1px solid #2ecc71;
}

/* Красный тег (Дизлайк) */
.onb-tag.dislike {
    background: rgba(231, 76, 60, 0.2); 
    color: #e74c3c; 
    border: 1px solid #e74c3c;
}

/* Общий стиль */
.onb-tag {
    padding: 6px 12px; 
    border-radius: 20px; 
    font-size: 13px; 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    animation: popIn 0.3s ease;
    cursor: default;
}

#tab-settings #mobile-mode-mount {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    width: 100%;
    display: flex;
    justify-content: center;
}

#tab-settings .mode-capsule-btn {
    width: 100%; 
    max-width: 200px;
    justify-content: center;
    background: var(--ios-card);
    height: 44px;
}

.capsule-trigger {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px; /* Полная капсула */
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
    margin: 0 auto; /* Центрируем кнопку */
}

.capsule-trigger:active {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(0.98);
}

body.light-theme .capsule-trigger {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

/* === 4. ИКОНКА ЧАСОВ === */
.t-circle-btn.wl {
    font-size: 26px; 
    padding-top: 2px; 
}

/* =========================================
12. OTHER COMPONENTS (Badges, History)
========================================= */

.warning-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; color: #fff; cursor: help; }
.badge-extreme { background: var(--highlight-red); }
.badge-lgbt { background: #9b59b6; }
.badge-niche { background: #34495e; }
.badge-wrapper { display: flex; justify-content: center; gap: 6px; margin-bottom: 2px; margin-top: 5px; width: 100%; position: relative; z-index: 5; }

.badge-tooltip {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: #fff; padding: 12px; border-radius: 14px; font-size: 13px; line-height: 1.4;
    width: 220px; text-align: left; pointer-events: none; opacity: 0; transition: opacity 0.2s;
    margin-bottom: 10px; border: 1px solid var(--border); z-index: 100; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.warning-badge:hover .badge-tooltip { opacity: 1; pointer-events: auto; }

.history-item-ios {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px; background: var(--ios-card); font-size: 16px; color: var(--text-main);
    position: relative; cursor: pointer; transition: background 0.2s;
}
.history-item-ios:active { background: var(--nav-bg); }
.history-item-ios:not(:last-child)::after {
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 16px; 
    right: 16px;
    height: 1px;
    background-color: var(--ios-separator); 
    transform: scaleY(0.5);
}

/* Onboarding & Age Gate */
.onb-tag { background: var(--accent); color: #000; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; animation: popIn 0.3s ease; }
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#age-gate .logo { font-size: 40px; margin-bottom: 20px; }
#age-gate .logo-img { height: 70px; margin-right: 10px; }

.mobile-header {
    display: none; position: fixed; top: calc(10px + env(safe-area-inset-top)); 
    left: 50%; transform: translateX(-50%); width: auto; min-width: 260px; max-width: 90%;
    background: var(--ios-card) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border) !important; border-radius: 35px; z-index: 9999;
    padding: 12px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    flex-direction: column; align-items: center; justify-content: center;
    color: var(--text-main);
}
body.light-theme .mobile-header { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.1); }
.mobile-header .logo { font-size: 20px; margin-bottom: 0; }
.mobile-header .logo-img { height: 40px; }

/* === 12. PREMIUM STATS === */
.locked-feature {
    position: relative;
    opacity: 0.5;
    pointer-events: none;
    filter: blur(2px);
}
.lock-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    z-index: 10;
    background: rgba(0,0,0,0.3);
    cursor: pointer;
    pointer-events: auto; /* Чтобы клик проходил на оверлей */
}
.lock-badge {
    background: var(--accent); color: #000;
    padding: 5px 10px; border-radius: 12px;
    font-weight: 800; font-size: 12px; text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.lock-badge-custom {
    position: absolute !important;
    top: 50% !important;
    right: -14px !important; 
    transform: translateY(-60%) !important; 
    
    font-size: 10px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    opacity: 0.9;
}

/* === WRAPPED / SUMMARY UI (Spotify Style) === */
.wrapped-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 25000; background: #000;
    display: none; flex-direction: column;
}
.wrapped-overlay.active { display: flex; animation: fadeIn 0.3s ease; }

/* Динамические фоны для слайдов */
.wrapped-slide {
    flex: 1; display: none; flex-direction: column;
    justify-content: center; align-items: center;
    padding: 40px; text-align: center;
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
}
.wrapped-slide.active-slide { display: flex; }

/* Градиенты для разных настроений */
.bg-fire { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); }
.bg-dark { background: linear-gradient(-45deg, #000000, #434343, #1a1a1a); }
.bg-toxic { background: linear-gradient(-45deg, #11998e, #38ef7d, #000000); }
.bg-passion { background: linear-gradient(-45deg, #8E2DE2, #4A00E0, #ff00cc); }

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.wrapped-big-text {
    font-size: clamp(40px, 10vw, 80px);
    font-weight: 900; line-height: 1; margin-bottom: 20px;
    color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.wrapped-sub-text {
    font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.9);
    line-height: 1.5; max-width: 400px;
}
.wrapped-stat-box {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 20px; padding: 20px;
    margin: 20px 0; border: 1px solid rgba(255,255,255,0.3);
}
.wrapped-highlight { color: #ffe600; font-weight: 800; }

.wrapped-nav-area {
    position: absolute; top: 0; height: 100%; width: 30%; z-index: 10;
}
.nav-left { left: 0; }
.nav-right { right: 0; }
.wrapped-close {
    position: absolute; top: 20px; right: 20px;
    font-size: 24px; color: rgba(255,255,255,0.5); z-index: 30; cursor: pointer;
}

/* Анимация заполнения бара */
@keyframes fillBarAnim {
    from { width: 0%; }
    to { width: 100%; }
}

/* Класс для запуска анимации */
.wrapped-progress-fill.animating {
    animation: fillBarAnim linear forwards;
}

/* Класс для паузы (добавляется JS-ом при удержании) */
.wrapped-overlay.paused .wrapped-progress-fill {
    animation-play-state: paused !important;
}

/*  финальная карточка */
.sum-row.detail-row {
    font-size: 11px; 
    color: var(--text-secondary);
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

#share-header-overlay {
    display: none; 
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
    align-items: center;
    justify-content: space-between;
}

.share-qr-box {
    background: #fff;
    padding: 5px;
    border-radius: 8px;
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-logo-text {
    font-weight: 900;
    font-size: 24px;
    color: #fff;
    line-height: 1;
}
.share-logo-text span {
    background: linear-gradient(180deg, #CB53F0 20%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.share-caption {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 4px;
    letter-spacing: 1px;
}

/* Стиль для иконки Share в шапке модалки */
.share-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: invert(1); /* Белая для темной темы */
    opacity: 0.8;
}

/* Для светлой темы */
body.light-theme .share-icon-img {
    filter: invert(0); /* Черная */
}

/* Контейнер для генерации скриншота (скрыт от глаз, но виден для скрипта) */
#export-stats-container {
    position: fixed;
    top: 0;
    left: -9999px; /* Убираем за пределы экрана */
    z-index: -1;
    width: 360px; /* Фиксированная ширина как у Wrapped */
    /* Используем стили Wrapped карточки */
    background: var(--ios-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: none;
}

/* Принудительные стили для графика внутри скриншота, чтобы он влез */
#export-stats-container .chart-container, 
#export-stats-container .chart-wrapper {
    height: 180px !important; 
    border: none !important;
    margin: 0 !important;
}

/* --- Кнопка Share в Wrapped (Круглая) --- */
.btn-round-share {
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background: rgba(255,255,255,0.15); 
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s;
}
.btn-round-share:active {
    transform: scale(0.95);
    background: rgba(255,255,255,0.3);
}
.btn-round-share img {
    width: 24px; 
    height: 24px; 
    filter: invert(1); /* Белая иконка */
}

/* --- QR Header для скриншотов --- */
/* Этот блок скрыт в UI, но появляется на картинке */
.screenshot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 15px;
    background: transparent;
}

.screenshot-logo-area {
    display: flex;
    flex-direction: column;
}

.screenshot-logo {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.screenshot-logo span {
    color: var(--accent) !important; 
    background: none !important; 
    -webkit-text-fill-color: initial !important;
}

.screenshot-caption {
    font-size: 12px;
    text-transform: uppercase;
    color: #ccc;
    letter-spacing: 2px;
    margin-top: 5px;
    font-weight: 600;
}

.screenshot-qr {
    background: #fff;
    padding: 5px;
    border-radius: 10px;
    height: 70px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapped-progress-container {
    position: absolute; 
    top: 15px; 
    left: 0; 
    width: 100%;
    padding: 0 15px; 
    display: flex; 
    gap: 4px; 
    z-index: 9999; /* Поверх всего */
    pointer-events: none; 
}
.wrapped-progress-bar {
    height: 3px; 
    flex: 1; 
    background: rgba(255,255,255,0.3);
    border-radius: 2px; 
    overflow: hidden;
}
.wrapped-progress-fill {
    height: 100%;
    background: #fff;
    width: 0%;
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
}

/* --- ДИЗАЙН СТАТИСТИКИ (CARD UI) --- */
.stats-card-ui {
    background: var(--ios-card); /* Или темный фон как в Wrapped */
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

/* Адаптация заголовка внутри карточки */
.stats-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
    margin-bottom: 5px;
}

.stats-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 700;
}

/* QR код внутри статистики */
.stats-qr-box {
    background: #fff;
    padding: 4px;
    border-radius: 8px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- СТИЛИ ДЛЯ ЛЕГЕНДЫ (В интерфейсе) --- */
.stats-legend-row {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    font-size: 10px;
    color: var(--text-secondary);
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.legend-dot {
    width: 8px; 
    height: 8px; 
    border-radius: 2px;
}

/* --- СТИЛЬ ДЛЯ ЭКСПОРТА (СКРИНШОТА) --- */
/* Это то, как будет выглядеть картинка */
#export-stats-card {
    position: fixed;
    left: -9999px; /* Скрываем за экраном */
    top: 0;
    z-index: -9999;
    
    width: 375px; /* Фиксированная ширина как у мобильника */
    background: var(--sidebar-bg); /* Темный фон */
    border: 1px solid var(--border);
    border-radius: 24px; /* Закругления */
    padding: 30px; /* Отступы внутри */
    
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: var(--font-main);
}

/* Логотип в экспорте */
.export-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(128,128,128,0.2);
    padding-bottom: 20px;
}

/* Убедимся, что при экспорте карточка ведет себя нормально */
.export-clone-container {
    position: fixed;
    top: -9999px;
    left: -9999px;
    z-index: -100;
    /* Фиксированная ширина для красивой картинки, чтобы не была узкой */
    width: 600px !important; 
    max-width: none !important;
    background: #12000b; /* Фон подложки, если прозрачность глючит */
    padding: 40px !important; /* Больше отступов для красоты */
    border-radius: 0 !important; /* Квадратные края для картинки или скругленные, как угодно */
}

/* Принудительно растягиваем внутреннюю карточку при экспорте */
.export-clone-container .sum-card-new {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Фикс для переносов в психотипе */
.sum-stat-box {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* === STATS UPDATE === */
/* Контейнер графика */
.chart-wrapper {
    flex-shrink: 0 !important;
    height: 220px !important; /* Фиксированная высота */
    margin-bottom: 20px !important;
    width: 100% !important;
}

/* Скролл-контейнер для предпочтений */
.chart-scroll-view {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
    align-items: flex-end;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    padding-bottom: 5px; /* Отступ для скролла */
}
.chart-scroll-view::-webkit-scrollbar { display: none; }

/* Колонка предпочтений (5 + немного 6-ая колонка) */
.pref-col {
    min-width: 17%; 
    max-width: 17%;
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 4px;
}

/* Колонка активности */
.act-col {
    min-width: 45px; 
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

/* Контейнер для трех столбиков */
.act-bars-group {
    display: flex;
    align-items: flex-end;
    gap: 3px; /* Расстояние между столбиками */
    height: 70%; /* Высота зоны столбиков */
    width: 100%;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(128,128,128,0.1);
}

.act-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.3s ease;
}

/* Сами бары */
.chart-bar {
    width: 100%; 
    /* Градиент сверху вниз: от светлого акцента к основному цвету */
    background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%) !important;
    border-radius: 6px 6px 0 0; /* Скругляем только верх */
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 4px;
    position: relative;
    margin: 0;
    /* Легкое свечение для красоты */
    box-shadow: 0 -2px 10px rgba(var(--accent), 0.3); 
}

/* Подписи под графиком */
.chart-label-x {
    margin-top: 5px;
    font-size: 10px;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.act-values-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 4px;
    padding: 0 2px;
}

.act-val {
    font-size: 8px;
    font-weight: 700;
    text-align: center;
    flex: 1;
}

.chart-label-x {
    margin-top: 4px;
    font-size: 9px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Цифры для активности (ПОД графиком) */
.act-values {
    display: flex;
    gap: 5px;
    font-size: 9px;
    font-weight: 700;
    margin-top: 2px;
    color: var(--text-main);
}

/* === 13. PAYMENT MODAL STYLES === */
.pay-desc {
    padding: 15px 20px 10px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
}

/* Секция промокода */
.promo-container {
    margin: 10px 15px 20px 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.promo-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    margin-left: 5px;
}

.promo-input-group {
    display: flex;
    gap: 8px;
    width: 100%;
}

.promo-input {
    flex: 1;
    background: var(--ios-bg); /* Цвет фона как у страницы */
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    font-size: 15px;
    color: var(--text-main);
    outline: none;
    transition: border-color 0.2s;
}

.promo-input:focus {
    border-color: var(--accent);
}

.promo-btn {
    width: 44px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.promo-btn:active {
    transform: scale(0.95);
}

/* === 14. LOGIN MODAL === */
.auth-benefits {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.auth-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text-main);
}

.auth-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nav-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.auth-note {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 15px;
    line-height: 1.4;
    opacity: 0.7;
}

.btn-google {
    width: 100%;
    background: #FFFFFF;
    color: #1f1f1f;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 14px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.1s;
}
.btn-google:active { transform: scale(0.98); }

/* 15. SYNC MODAL STYLES */
.sync-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.sync-stat-item.full-width {
    grid-column: span 2;
    width: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center !important; 
    justify-content: center !important;
    text-align: center !important;
    
    padding: 20px 15px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    background: var(--ios-card);
    border-radius: 16px;
}

.sync-stat-item.full-width:active {
    background: var(--nav-bg);
    transform: scale(0.98);
}

.sync-stat-item {
    background: var(--ios-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sync-stat-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 4px;
}

.sync-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
}

/* Анимация вращения для кнопки синхронизации */
@keyframes spinIcon { 100% { transform: rotate(360deg); } }
.spinning-icon { animation: spinIcon 1s linear infinite; display: inline-block; }


/* Fetish Wrapped */
@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.wrapped-lock-container {
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px dashed var(--border);
}
.wrapped-lock-title {
    font-size: 16px; font-weight: 800; margin-bottom: 5px;
    background: linear-gradient(45deg, #FF9900, #9B59B6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}
.wrapped-lock-desc {
    font-size: 12px; color: var(--text-secondary); margin-bottom: 15px;
}
.w-progress-track {
    height: 8px; width: 100%; background: rgba(255,255,255,0.1);
    border-radius: 4px; overflow: hidden; margin-bottom: 8px;
}
.w-progress-fill {
    height: 100%; background: linear-gradient(90deg, #FF9900, #9B59B6);
    width: 0%; transition: width 0.5s ease;
}
.w-progress-text {
    font-size: 11px; font-weight: 700; color: var(--text-main);
}

/* WRAPPED ARCHIVE (Вкладка истории) */
.wrapped-archive-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px; background: var(--ios-card); margin-bottom: 1px;
    cursor: pointer; position: relative;
}
.wrapped-archive-item:active { background: var(--nav-bg); }
.w-badge {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    padding: 4px 8px; border-radius: 6px; color: #000; margin-left: 10px;
}
.w-badge.daily { background: #bdc3c7; } /* Серый */
.w-badge.weekly { background: #2ecc71; } /* Зеленый */
.w-badge.monthly { background: #f1c40f; } /* Золотой */
.w-badge.yearly { background: linear-gradient(45deg, #FF9900, #9B59B6); color: #fff; }

/* ФИНАЛЬНАЯ КАРТОЧКА */
.sum-card-new {
    background: rgba(20, 20, 20, 0.95); 
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 24px; 
    padding: 25px;
    width: 90%; 
    max-width: 360px;
    display: flex; 
    flex-direction: column; 
    gap: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    position: relative; 
    overflow: hidden;
}
.sum-logo-new { font-weight: 900; font-size: 24px; color: #fff; letter-spacing: -1px; }
.sum-logo-new span.grad { 
    background: linear-gradient(180deg, #CB53F0 20%, var(--accent) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.sum-logo-new span.neutral { color: #fff; }

.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.sum-stat-box { background: rgba(255,255,255,0.05); padding: 10px; border-radius: 12px; text-align: center; }
.sum-stat-val { font-size: 22px; font-weight: 800; color: #fff; }
.sum-stat-lbl { font-size: 10px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 4px; }

/* Значки достижений */
.achievement-badge {
    width: 120px; height: 120px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 50px; margin-bottom: 20px;
    box-shadow: 0 0 30px rgba(255,255,255,0.2);
    border: 4px solid rgba(255,255,255,0.1);
}

/* Финальная сводка (Summary Card) */
.summary-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 24px;
    padding: 25px;
    width: 90%;
    max-width: 340px;
    text-align: left;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0; 
    transform: translateY(20px);
    animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.5s;
}
@keyframes slideUpFade {
    to { opacity: 1; transform: translateY(0); }
}
.sum-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding-bottom: 15px; 
    border-bottom: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 5px;
}
.sum-header-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Логотип: Картинка + Текст */
.sum-logo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.sum-logo-img {
    height: 32px; 
    width: auto;
    object-fit: contain;
}

.sum-logo-text { 
    font-weight: 900; 
    font-size: 20px; 
    color: #fff; 
    letter-spacing: -0.5px;
    line-height: 1;
}

/* Цветные буквы (если не нуар) */
.sum-logo-text span.grad { 
    background: linear-gradient(180deg, #CB53F0 20%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Важно для некоторых браузеров */
    display: inline-block; /* Чтобы градиент не ломался */
}

/* Нуарная тема: всё белое */
body[data-theme="noir"] .sum-logo-text span.grad {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* Подпись "Узнай себя" */
.sum-caption {
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    letter-spacing: 1px;
    margin-left: 2px; /* Чуть подвинуть под текст */
}

/* QR Код */
.sum-qr-box {
    background: #fff;
    padding: 4px;
    border-radius: 8px;
    width: 64px;
    height: 64px;
    flex-shrink: 0; /* Чтобы не сжимался */
    display: flex;
    align-items: center;
    justify-content: center;
}
.sum-qr-img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Бейджик периода в карточке */
.sum-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-top: -10px; 
}
.sum-logo { font-weight: 900; font-size: 18px; color: #fff; }
.sum-date { font-size: 10px; color: rgba(255,255,255,0.6); text-transform: uppercase; text-align: right; }
.sum-row { display: flex; justify-content: space-between; align-items: center; }
.sum-label { font-size: 12px; color: rgba(255,255,255,0.6); text-transform: uppercase; font-weight: 600; }
.sum-val { font-size: 18px; font-weight: 800; color: #fff; }
.sum-big-val { font-size: 28px; font-weight: 900; color: #ffe600; text-shadow: 0 0 20px rgba(255, 230, 0, 0.3); }
.sum-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.sum-tag { 
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.1); 
    padding: 4px 10px; border-radius: 12px; font-size: 11px; color: #fff; font-weight: 600; 
}

/* --- Анимация для отложенного появления (Интрига) --- */
@keyframes fadeInUpReveal {
    from { opacity: 0; transform: translateY(15px); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.reveal-delayed {
    opacity: 0; /* Скрыто по умолчанию */
    animation: fadeInUpReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.delay-1500 { animation-delay: 1.5s; } /* Задержка 1.5 сек (для слайда сравнения) */
.delay-3000 { animation-delay: 3.0s; } /* Задержка 3.0 сек (для психотипа) */

/* --- Исправление переноса текста в финальной карточке --- */
.sum-stat-box {
    /* Разрешаем перенос длинных слов */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    
    /* Включаем расстановку дефисов (если поддерживается браузером) */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    
    /* Разрешаем блоку растягиваться по высоте */
    height: auto !important; 
    min-height: 80px; /* Минимальная высота для красоты */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Убеждаемся, что заголовок внутри бокса тоже не ломает верстку */
.sum-stat-box div[style*="font-size:22px"] {
    line-height: 1.2 !important;
    margin-bottom: 5px;
}

/* === TINDER STYLE CONTROLS === */
.tinder-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    margin-top: auto;
    margin-bottom: 10px;
    gap: 15px; /* Чуть больше расстояние */
    padding: 0 5px;
}

.t-circle-btn {
    border: none; 
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #fff !important; 
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    
    /* Тонкая рамка для стиля */
    border: 1px solid rgba(255,255,255,0.1); 
}

.t-circle-btn:active {
    transform: scale(0.92);
    filter: brightness(0.9);
}

/* Размеры */
.t-circle-btn.small { width: 44px; height: 44px; font-size: 20px; }
.t-circle-btn.medium { width: 58px; height: 58px; font-size: 26px; }
.t-circle-btn.large { width: 72px; height: 72px; font-size: 32px; }

/* Цвета */
.t-circle-btn.undo {
    background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.3);
}

/* 2. DISLIKE (Красный градиент) */
.t-circle-btn.dislike {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    box-shadow: 0 5px 15px rgba(192, 57, 43, 0.4);
}

/* 3. WATCH (Цвет темы + Свечение) */
.t-circle-btn.watch {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    
    /* Мощное свечение */
    box-shadow: 0 0 20px var(--accent), 
                0 0 40px var(--accent-light),
                inset 0 0 10px rgba(255,255,255,0.5);
    
    animation: pulseGlow 2s infinite;
    z-index: 2; /* Чуть выше остальных */
    border: 1px solid rgba(255,255,255,0.3);
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 20px var(--accent); transform: scale(1); }
    50% { box-shadow: 0 0 35px var(--accent); transform: scale(1.05); }
    100% { box-shadow: 0 0 20px var(--accent); transform: scale(1); }
}

/* 4. LIKE (Зеленый градиент) */
.t-circle-btn.like {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4);
}

/* 5. WATCH LATER (серый) */
.t-circle-btn.wl {
    background: rgba(255, 255, 255, 0.15); /* Полупрозрачный серый */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary) !important;
    box-shadow: none; /* Без свечения */
    transition: all 0.2s ease;
}

/* При наведении или нажатии чуть светлее */
.t-circle-btn.wl:active {
    background: rgba(255, 255, 255, 0.3);
}

/* АКТИВНОЕ СОСТОЯНИЕ (Синий градиент) */
.t-circle-btn.wl.active {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(41, 128, 185, 0.3);
}

body.light-theme .t-circle-btn.wl {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
    color: #666 !important;
}
body.light-theme .t-circle-btn.wl.active {
    color: #ffffff !important; 
}

/* Нажатие */
.t-circle-btn:active {
    transform: scale(0.92) !important; /* Перебивает анимацию пульса */
    filter: brightness(1.1);
}

/* Disabled */
.t-circle-btn:disabled {
    background: #bdc3c7; /* Серый */
    box-shadow: none;
    opacity: 0.7;
    cursor: default;
    transform: none !important;
}

/* Скрываем старые элементы, которые мы заменили */
.tinder-actions, .btn-group, .undo-container {
    display: none !important;
}

/* Карточка должна быть Flex-колонкой для правильного размещения */
.card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-bottom: 10px !important;
}

/* Адаптация описания, чтобы не прилипало */
.result-description {
    margin-bottom: 20px;
}

/* ROADMAP STYLES */
.roadmap-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding-bottom: 20px;
}

.roadmap-item {
    display: flex !important;
    gap: 15px !important;
    padding-bottom: 0 !important; 
    position: relative !important;
}

.roadmap-item:last-child {
    padding-bottom: 0;
}

/* Колонка с иконкой и линией */
.rm-visual-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 40px !important;
    flex-shrink: 0 !important;
}

/* Иконка */
.rm-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.05);
    z-index: 2; /* Поверх линии */
    background: var(--card-bg); /* Чтобы не просвечивала */
}

/* Линия-соединитель */
.rm-line {
    width: 2px !important;
    background: var(--border) !important;
    flex-grow: 1 !important;
    min-height: 20px !important;
    margin-top: -5px !important;
    margin-bottom: -5px !important;
}

.roadmap-item:last-child .rm-line {
    display: none !important;
}


/* Контент */
.rm-content {
    background: var(--ios-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 25px !important;
}

.rm-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 5px;
}

.rm-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 5px !important;
}

/* Кнопка-капсула с плюсом */
.btn-capsule-plus {
    width: 60%; /* Ширина как у второстепенных кнопок */
    max-width: 200px;
    height: 44px;
    border-radius: 22px;
    background: transparent;
    border: 1px solid var(--border); /* Тонкая обводка */
    color: var(--text-secondary);
    font-size: 24px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 auto;
    padding-bottom: 4px; /* Выравнивание плюса */
}

/* Активное состояние кнопки (когда открыто) */
.btn-capsule-plus.active {
    background: var(--nav-bg);
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(0.98);
}

/* Анимация иконки плюса */
.btn-capsule-plus span {
    transition: transform 0.3s ease;
    display: block;
    line-height: 1;
}

/* Поворот плюса в крестик */
.btn-capsule-plus.active span {
    transform: rotate(45deg);
}

/* Контейнер с модификаторами */
#mod-container {
    width: 100%;
    max-height: 0; /* Высота 0 скрывает контент */
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
    padding: 0 10px; /* Немного отступа по бокам */
    visibility: hidden; /* Скрываем от кликов */
}

.mods-wrapper-expanded.open #mod-container {
    max-height: 500px; 
    opacity: 1;
    margin-top: 40px; 
    padding-bottom: 15px;
    visibility: visible;
}

/* Состояние "Открыто" */
#mod-container.open {
    max-height: 300px; /* Достаточно для всех тегов */
    opacity: 1;
    margin-top: 15px;
    padding-bottom: 10px;
}

#mods-block {
    width: 100%;
    padding: 0 15px; 
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}


.mods-wrapper-expanded {
    position: relative;
    width: 60px; 
    height: 44px; 
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    margin: 10px auto 0 auto;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10;
}

/* Иконка (Плюс -> Крестик) */
.mods-icon-plus {
    position: absolute;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 300;
    color: var(--text-secondary);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* ЦЕНТР (Закрыто) */
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
}

/* Контент тегов (Список) */
.mods-content {
    opacity: 0;
    width: 100%;
    padding: 45px 15px 20px 15px; /* Сверху отступ под крестик */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    transform: translateY(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none; /* Чтобы не кликалось в закрытом */
    visibility: hidden; /* Скрываем полностью */
}

/* === СОСТОЯНИЕ OPEN (ОТКРЫТО) === */
.mods-wrapper-expanded.open {
    width: 100% !important; 
    max-width: 100%; 
    height: auto;
    min-height: 160px;
    background: var(--ios-card);
    border-color: var(--accent);
    border-radius: 24px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    margin-top: 5px;
}

/* Крестик улетает в угол */
.mods-wrapper-expanded.open .mods-icon-plus {
    color: var(--highlight-red);
    top: 15px;
    right: 15px;
    left: auto; 
    transform: rotate(45deg);
}

.mods-wrapper-expanded.open .mods-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

/* Заголовок в выпадающем окне карточки */
.mods-header {
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
    opacity: 0.7;
}

/* Чипы в модальном окне настроек */
.mod-chip {
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    border: 1px solid transparent;
    
    /* Flex для красивого выравнивания иконок */
    display: inline-flex; 
    align-items: center;
    gap: 6px; /* Отступ между текстом и иконками */
}

.custom-mod-del:hover {
    color: #fff !important;
    transform: scale(1.2);
}

/* Активные (Зеленые) */
.mod-chip.active {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.3) !important;
}

.mod-chip.active::after {
    content: none !important;
}

/* Неактивные (Серые) */
.mod-chip.inactive {
    background: var(--ios-card);
    color: var(--text-secondary);
    border-color: var(--border);
    opacity: 0.8;
}
.mod-chip.inactive:hover {
    opacity: 1;
    background: var(--nav-bg);
}

.custom-mod-del {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.1);
    color: var(--highlight-red);
    font-size: 10px;
    margin-left: 4px;
    transition: all 0.2s;
}

.custom-mod-del:hover {
    background: var(--highlight-red);
    color: #fff;
    transform: scale(1.2);
}

/* Обновленный стиль тегов */
.tag {
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--bg-color);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: 0.2s;
    cursor: pointer;
    user-select: none;
}
.tag:active {
    transform: scale(0.95);
}
.tag.selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.swipe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Лежит поверх всего контента */
    z-index: 50 !important; 
    
    /* Скругляем углы под карточку */
    border-radius: 28px;
    
    pointer-events: none; 
    opacity: 1 !important; /* Управляем цветом через RGBA, а не opacity */
    background-color: transparent; /* По умолчанию прозрачный */
    transition: background-color 0.1s linear;
}

/* Верхняя часть (Бейджи) */
.card > div:nth-child(2) { 
    z-index: 15; 
    padding-top: 20px;
    flex: 0 0 auto; /* Не сжимать */
}

/* ЦЕНТРАЛЬНАЯ ЧАСТЬ (Слот + Описание) */
.card > div:nth-child(3) {
    z-index: 15;
    flex: 1 1 auto; /* Резиновая: может сжиматься и расти */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Чтобы длинное описание не ломало верстку */
    padding: 0 15px;
}

#onb-input {
    flex-shrink: 0 !important; /* Запрещаем сжимать поле ввода */
}

#onb-tags-container {
    max-height: 25vh; /* Ограничиваем высоту списка тегов */
    overflow-y: auto; /* Добавляем прокрутку, если тегов много */
    padding: 5px;
}

/* Скрываем скроллбар для красоты */
#onb-tags-container::-webkit-scrollbar { display: none; }

.version-tag {
        font-size: 11px;
        font-weight: 500;
        
        /* Сброс градиента */
        background: none !important;
        -webkit-text-fill-color: var(--text-secondary) !important; 
        color: var(--text-secondary) !important;
        
        opacity: 0.5;
        margin-left: 6px;
        
        /* Выравнивание */
        position: relative;
        top: 5px; /* Сдвигаем вниз от центральной линии */
    }

/* Общий стиль для иконок */
.deco-icon {
    position: absolute;
    z-index: 99 !important; 
    pointer-events: none; /* Клики проходят сквозь них */
    will-change: transform;
    transition: filter 0.3s ease; /* Плавная смена цвета при смене темы */
}

/* --- 1. ТЁМНАЯ ТЕМА (По умолчанию) --- */
/* Исходники черные -> инвертируем в белые + белая тень */
.deco-icon {
    /* invert(1) делает черное белым */
    filter: invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
    opacity: 0.9;
}

/* --- 2. СВЕТЛАЯ ТЕМА --- */
/* Исходники черные -> оставляем черными (invert 0) + темная тень */
body.light-theme .deco-icon {
    filter: invert(0) drop-shadow(0 5px 15px rgba(0, 0, 0, 0.15));
    opacity: 0.8; 
}

/* АНИМАЦИИ ПАРЕНИЯ */
@keyframes floatLeft {
    0% { transform: translate3d(0, 0, 0) rotate(-20deg) scale(1); }
    50% { transform: translate3d(-8px, -12px, 0) rotate(-15deg) scale(1.05); }
    100% { transform: translate3d(0, 0, 0) rotate(-20deg) scale(1); }
}

@keyframes floatRight {
    0% { transform: translate3d(0, 0, 0) rotate(15deg) scale(1); }
    50% { transform: translate3d(8px, -12px, 0) rotate(20deg) scale(1.05); }
    100% { transform: translate3d(0, 0, 0) rotate(15deg) scale(1); }
}

.icon-left {
    width: 140px;
    top: -40px; 
    left: -20px;
    animation: floatLeft 6s ease-in-out infinite;
}

.icon-right {
    width: 110px;
    top: -20px;
    right: -10px;
    animation: floatRight 7s ease-in-out infinite;
}

@media (max-width: 768px) {
    .icon-left {
        width: 75px !important;  
        top: 5px !important;    
        left: -5px !important;  
    }

    .icon-right {
        width: 60px !important;  
        top: 15px !important;   
        right: 0px !important;  
    }
}

body.no-deco .deco-icon {
    display: none !important;
}

/* === BESTIE PLAN STYLES === */
.plan-card.bestie {
    border: 2px solid #00d2ff; /* Яркий голубой бордюр */
    background: linear-gradient(165deg, rgba(0, 210, 255, 0.1), rgba(58, 123, 213, 0.05));
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.15);
    order: -1; /* На мобильных ставим его первым, чтобы заметили */
}

@media (min-width: 769px) {
    .plan-card.bestie { order: 0; }
}

.plan-card.bestie .plan-title {
    background: linear-gradient(to right, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #00d2ff;
}

.bestie-badge {
    position: absolute;
    top: 0; right: 0;
    background: #00d2ff;
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-bottom-left-radius: 12px;
}

.modal-header-actions {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
}

/* Общий стиль для круглых кнопок (Крестик и Поделиться) */
.icon-btn-round {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(128, 128, 128, 0.15) !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.icon-btn-round:hover {
    background: var(--nav-bg) !important;
    color: var(--text-main) !important;
}

/* Стили для счетчика (Scarcity Bar) */
.limit-container {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}

.limit-labels {
    display: flex; 
    justify-content: space-between; 
    font-size: 11px; 
    margin-bottom: 6px;
    color: var(--text-secondary);
}

.limit-track {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.limit-fill {
    height: 100%;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    width: 94%; /* 47 из 50 */
    box-shadow: 0 0 10px #00d2ff;
    animation: pulseBar 2s infinite;
}

@keyframes pulseBar {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

.plan-btn.bestie-btn {
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 210, 255, 0.4);
}

/* === NOTCH & BORDER STYLES === */

/* Базовый стиль чёлки */
.card-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    opacity: 0;
    
    padding: 4px 14px;
    border-radius: 50px;
    
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff;
    
    z-index: 40;
    /* Плавное появление */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.3s ease, 
                background-color 0.2s;
    pointer-events: none;
}

/* Класс для показа чёлки */
.card-notch.visible {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* --- ВАРИАНТ 1: WATCH LATER (Синий) --- */
.card.status-wl {
    border: 2px solid #3498db !important;
    box-shadow: 0 0 25px rgba(52, 152, 219, 0.15) !important;
}
.card.status-wl .card-notch {
    background: #3498db;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

/* --- ВАРИАНТ 2: FAVORITE (Зеленый) --- */
.card.status-fav {
    border: 2px solid #2ecc71 !important;
    box-shadow: 0 0 25px rgba(46, 204, 113, 0.15) !important;
}
.card.status-fav .card-notch {
    background: #2ecc71;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
}

/* --- ВАРИАНТ 3: DISLIKED (Красный) - на случай просмотра истории --- */
.card.status-ban {
    border: 2px solid #e74c3c !important;
    box-shadow: 0 0 25px rgba(231, 76, 60, 0.15) !important;
}
.card.status-ban .card-notch {
    background: #e74c3c;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

/* === 1. MODE CAPSULE (DROPDOWN STYLE) === */
.mode-capsule-wrapper {
    position: relative;
    z-index: 100;
    display: none; /* Скрыто по умолчанию (пока нет 10 действий) */
}

/* Стиль самой кнопки-капсулы */
.mode-capsule-btn {
    background: var(--ios-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.mode-capsule-btn:active, .mode-capsule-wrapper.open .mode-capsule-btn {
    background: var(--nav-bg);
    color: var(--text-main);
    border-color: var(--accent);
}

/* Выпадающий список */
.mode-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 160px;
    background: var(--ios-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 6px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mode-capsule-wrapper.open .mode-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(5px);
}

.mode-item {
    padding: 10px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.mode-item:hover, .mode-item:active {
    background: var(--nav-bg);
    color: var(--text-main);
}

.mode-item.active {
    background: rgba(155, 89, 182, 0.1); /* Акцент */
    color: var(--accent);
}

/* === 2. START SCREEN (CARD OVERLAY) === */
.mode-start-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--card-gradient);
    z-index: 50; /* Перекрывает всё внутри карточки */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between !important;
    padding: 40px 20px 30px 20px !important;
    transition: opacity 0.3s;
}

.mode-start-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.mode-greeting-text {
    font-size: clamp(24px, 5vw, 36px) !important; 
    font-weight: 800 !important;
    line-height: 1.2 !important; 
    text-align: center;
    color: var(--text-main);
    
    margin-top: auto; 
    margin-bottom: auto;
    max-width: 95%; 
    
    transition: opacity 0.3s ease;
}

.mode-buttons-circle-row {
    display: flex;
    justify-content: center;
    gap: 25px;
    width: 100%;
    margin-top: auto; 
    margin-bottom: 10px;
}

.mode-circle-btn {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: none !important;
    font-size: 32px;
    
    /* Тень и позиционирование */
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    color: #fff; /* Эмодзи всегда яркие */
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.mode-circle-btn:active {
    transform: scale(0.92);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* === 3. РАСПОЛОЖЕНИЕ КАПСУЛЫ (PC vs MOBILE) === */

/* По умолчанию (Mobile): Капсула под хедером */
#mobile-mode-mount {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: -15px !important; 
    margin-bottom: 25px !important;
    position: relative;
    z-index: 60;
}

#pc-mode-mount {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px; 
    border-top: none !important;
    padding-top: 0 !important;
}

/* PC ВЕРСИЯ */
@media (min-width: 769px) {
    #mobile-mode-mount {
        display: none !important; /* Скрываем мобильную версию */
    }

    #pc-mode-mount {
        display: flex;
        width: 100%;
        margin-top: auto; /* Прижимаем к низу сайдбара (или куда вам нужно) */
        padding-top: 20px;
        border-top: 1px solid var(--border);
    }
    
    /* Капсула на ПК растягивается или имеет свой стиль */
    #pc-mode-mount .mode-capsule-btn {
        width: auto; 
        min-width: 140px;
        justify-content: center;
    }
}

/* === AI ASSISTANT MODE STYLES === */

.mode-buttons-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px; 
    width: 100%;
    margin-top: auto;
    margin-bottom: 20px;
}

.mode-circle-btn {
    border-radius: 50%;
    border: none !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.1s, background 0.2s;
    cursor: pointer;
    position: relative;
}

.mode-circle-btn:active {
    transform: scale(0.92);
}

.mode-circle-btn.center-btn {
    width: 85px;
    height: 85px;
    font-size: 40px;
    z-index: 10;
    /* Градиент по умолчанию */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 10px 30px rgba(118, 75, 162, 0.5);
}

.mode-circle-btn.side-btn {
    width: 60px;
    height: 60px;
    font-size: 26px;
    z-index: 5;
}

.mode-circle-btn.explore {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.4);
}

.mode-circle-btn.pleasure {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    box-shadow: 0 5px 20px rgba(46, 204, 113, 0.4);
}



/* UI ВВОДА ЗАПРОСА (Скрыт по умолчанию) */
.assistant-ui {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--card-gradient);
    z-index: 60;
    padding: 20px;
    opacity: 0;
    transform: scale(0.9) translateY(20px); 
    transition: 
        opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    pointer-events: none;
}

.assistant-ui.visible {
    display: flex;
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.fade-out-up {
    opacity: 0 !important;
    transform: translateY(-30px) scale(0.9) !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.assistant-prompt {
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 30px;
    color: var(--text-main);
    line-height: 1.2;
}

.assistant-input-group {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    width: 100%;
    
    background: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 5px 5px 5px 15px;
    margin-bottom: 20px;
    position: relative;
}

.assistant-input {
    flex: 1; 
    background: transparent !important;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    padding: 10px 0;
    margin-right: 10px; 
}
.assistant-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.btn-mic-trigger {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0; 
}
.btn-mic-trigger.listening {
    background: #e74c3c;
    animation: pulseMic 1.5s infinite;
}

@keyframes pulseMic {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.btn-ai-confirm {
    background: #fff;
    color: #000;
    border: none;
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    
    opacity: 0;
    pointer-events: none;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-ai-confirm.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.btn-ai-confirm:active {
    transform: translateY(10px) scale(0.95) !important;
}

.btn-ai-cancel {
    margin-top: 20px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.2s;
}
.btn-ai-cancel:active {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}


/* АНИМАЦИЯ "ДУМАЮ..." */
.thinking-ui {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 70;
    background: var(--card-gradient);
}
.thinking-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ai-icon-img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    pointer-events: none; /* Чтобы клик проходил сквозь картинку на кнопку */
    
    /* По умолчанию (Темная тема) -> Инвертируем черный в белый */
    filter: invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
    transition: filter 0.3s ease;
}

.ai-hint-text {
    display: block;
    margin-top: 15px; /* Отступ сверху побольше */
    font-size: 14px;  /* Было ~10px (0.65em), стало крупнее */
    font-weight: 600; /* Жирнее */
    opacity: 0.9;     /* Ярче (было 0.8) */
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Светлая тема -> Оставляем черным */
body.light-theme .ai-icon-img {
    filter: invert(0) drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
}

.mode-circle-btn.center-btn.ai-assist {
    /* Адаптивный градиент темы */
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%) !important;
    
    /* Тонкая белая обводка для контраста */
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    
    /* Начальная тень */
    box-shadow: 0 0 20px var(--accent), 
                0 0 40px var(--accent-light);
    
    /* Анимация пульсации */
    animation: aiPulseGlow 2s infinite ease-in-out;
    z-index: 10;
}

.rolling-input-overlay {
    position: absolute;
    top: 0;
    left: 15px; 
    height: 100%;
    width: 80%;
    pointer-events: none;
    display: flex;
    align-items: center;
    overflow: hidden;
    opacity: 0.6;
    transition: opacity 0.2s;
    z-index: 1;
}

/* Скрываем подсказки, когда пользователь печатает */
.assistant-input:focus + .rolling-input-overlay,
.assistant-input:not(:placeholder-shown) ~ .rolling-input-overlay, 
.rolling-input-overlay.hidden {
    opacity: 0 !important;
}

.assistant-input:focus ~ .rolling-input-overlay {
    opacity: 0;
}

.rolling-list {
    display: flex;
    flex-direction: column;
}

.rolling-item {
    height: 50px; 
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    font-style: italic;
}

/* Анимация прокрутки */
@keyframes scrollPrompts {
    0%, 15% { transform: translateY(0); }
    20%, 35% { transform: translateY(-50px); }
    40%, 55% { transform: translateY(-100px); }
    60%, 75% { transform: translateY(-150px); }
    80%, 95% { transform: translateY(-200px); }
    100% { transform: translateY(-250px); } 
}

.animate-scroll {
    animation: scrollPrompts 12s cubic-bezier(0.6, 0.0, 0.4, 1.0) infinite;
}


/* Анимация свечения (масштаб + тень) */
@keyframes aiPulseGlow {
    0% {
        box-shadow: 0 0 15px var(--accent);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 35px var(--accent), 0 0 50px var(--accent-light);
        transform: scale(1.05); /* Легкое увеличение */
    }
    100% {
        box-shadow: 0 0 15px var(--accent);
        transform: scale(1);
    }
}

/* При нажатии чуть уменьшаем, но сохраняем градиент */
.mode-circle-btn.center-btn.ai-assist:active {
    transform: scale(0.95) !important;
    animation: none; /* Пауза анимации при клике */
}

/* Спец. стиль для темы NOIR (Черно-белая) */
body[data-theme="noir"] .mode-circle-btn.center-btn.ai-assist {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important;
}

/* иконка для боковых кнопок (scope.png, favorite.png) */
.side-icon-img {
    width: 32px;  /* Чуть меньше, чем центральная (45px) */
    height: 32px;
    object-fit: contain;
    pointer-events: none;
    
    /* Темная тема (Default): Инвертируем черный в белый + тень */
    filter: invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
    transition: filter 0.3s ease;
}

.mode-circle-btn.explore .side-icon-img {
    transform: scaleX(-1);
}

/* Стили для иконок внутри кнопок действий */
.action-icon-img {
    width: 50%;
    height: 50%;
    object-fit: contain;
    pointer-events: none;
    
    /* Темная тема (Default): Инвертируем черный в белый */
    filter: invert(1);
    transition: filter 0.3s ease;
}

/* Кнопка WATCH: Всегда белая иконка (т.к. фон цветной) */
.t-circle-btn.watch .action-icon-img {
    filter: brightness(0) invert(1) !important;
    width: 45%; /* Чуть меньше для Play */
    height: 45%;
    margin-left: 2px; /* Визуальная коррекция для треугольника */
}

/* Светлая тема: Иконки черные (кроме Watch) */
body.light-theme .action-icon-img {
    filter: invert(0);
}
body.light-theme .t-circle-btn.watch .action-icon-img {
    filter: brightness(0) invert(1) !important; /* Оставляем белой */
}

/* Watch Later ACTIVE: Когда кнопка синяя, иконка должна быть белой */
.t-circle-btn.wl.active .action-icon-img {
    filter: brightness(0) invert(1) !important;
}

/* Тема NOIR */
body[data-theme="noir"] .action-icon-img {
    filter: invert(1) !important;
}
/* В Noir при нажатии фон белый, иконка должна стать черной */
body[data-theme="noir"] .t-circle-btn:active .action-icon-img,
body[data-theme="noir"] .t-circle-btn.active .action-icon-img {
    filter: invert(0) !important;
}

body.light-theme .side-icon-img {
    filter: invert(0) drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
}

body[data-theme="noir"] .side-icon-img {
    filter: invert(1) !important;
}
body[data-theme="noir"] .mode-circle-btn:active .side-icon-img {
    filter: invert(0) !important;
}

.voice-icon-img {
    width: 24px; /* Чуть меньше кнопки */
    height: 24px;
    object-fit: contain;
    pointer-events: none;
    
    /* Темная тема (Default): Инвертируем черный в белый */
    filter: invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
    transition: filter 0.3s ease, transform 0.2s;
}

/* Светлая тема: Оставляем черным */
body.light-theme .voice-icon-img {
    filter: invert(0) opacity(0.7);
}

/* Анимация при записи (Красное свечение) */
.btn-mic-trigger.listening .voice-icon-img {
    filter: invert(1) drop-shadow(0 0 8px #e74c3c) !important;
    transform: scale(1.1);
}

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

/* Стили для иконок слева (png) */
.settings-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-right: 12px; /* Отступ от иконки до текста */
    flex-shrink: 0;
    
    /* По умолчанию (Темная тема): Инвертируем черные PNG в белые */
    filter: invert(1);
    opacity: 0.9;
    transition: filter 0.3s, opacity 0.3s;
}

/* Светлая тема: Оставляем черными (как в оригинале) */
body.light-theme .settings-icon {
    filter: invert(0);
    opacity: 0.65;
}

/* Обертка для левой части (Иконка + Текст), чтобы они стояли в ряд */
.ios-row-left {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --- CSS СТРЕЛКА (Вместо эмодзи ›) --- */
.chevron {
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--text-secondary);
    border-right: 2px solid var(--text-secondary);
    transform: rotate(45deg);
    margin-left: 8px;
    opacity: 0.6;
}

/* Стрелка вниз (для выпадающих списков, если нужно) */
.chevron-down {
    width: 8px;
    height: 8px;
    border-bottom: 2px solid var(--text-secondary);
    border-right: 2px solid var(--text-secondary);
    transform: rotate(45deg);
    margin-left: 8px;
    opacity: 0.6;
    margin-bottom: 3px;
}

/* Убираем старые эмодзи в тексте, если они где-то остались в HTML */
.ios-row span {
    display: inline-flex;
    align-items: center;
}

/* --- INTENSITY TOAST POPUP --- */
#intensity-toast {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%; 
    padding: 0 5px;
    
    font-size: 11px; 
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    z-index: 20;
    
    transition: opacity 0.2s; 
}

/* Цвета и свечение (Neon Text) */
.toast-safe {
    color: #2ecc71; /* Зеленый */
    text-shadow: 0 0 15px rgba(46, 204, 113, 0.6), 0 0 30px rgba(46, 204, 113, 0.2);
}

.toast-spicy {
    color: #f1c40f; /* Желто-оранжевый */
    text-shadow: 0 0 15px rgba(241, 196, 15, 0.6), 0 0 30px rgba(241, 196, 15, 0.2);
}

.toast-extreme {
    color: #ff004c; /* Агрессивный красный */
    text-shadow: 0 0 15px rgba(255, 0, 76, 0.8), 0 0 40px rgba(255, 0, 76, 0.4);
}

/* Новая анимация: Появление снизу-вверх и растворение */
@keyframes floatUpSimple {
    0% {
        opacity: 0;
        transform: translateY(5px) scale(0.9); /* Чуть ниже и меньше */
    }
    20% {
        opacity: 1;
        transform: translateY(0) scale(1);     /* Нормальная позиция */
    }
    80% {
        opacity: 1;
        transform: translateY(0) scale(1);     /* Пауза */
    }
    100% {
        opacity: 0;
        transform: translateY(-10px) scale(1); /* Улетает вверх */
    }
}

.anim-toast {
    animation: floatUpSimple 1.0s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

#intensity-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    background: var(--border);
    display: block;
}

#intensity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    cursor: pointer;
    margin-top: -1px;
}

.slider-container {
    width: 100%;
    padding: 0 5px;
    position: relative;
    margin-top: 5px !important; 
    margin-bottom: 0px;
}

.slider-narrow-wrapper {
    width: 85%;
    margin: 5px auto 5px auto !important; 
    position: relative;
    overflow: visible; 
    padding: 0 !important; 
    height: auto !important;
}

/* Иконки под слайдером */
.intensity-labels-icons {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
}

/* Боксы иконок */
.int-icon-box {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.int-icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}
.int-icon-wrapper:active {
    transform: scale(0.9);
}

.int-icon {
    width: 20px; 
    height: 20px;
    object-fit: contain;
    transition: all 0.3s ease;
    
    filter: invert(1);
    opacity: 0.3;
}

body.light-theme .int-icon {
    filter: invert(0);
    opacity: 0.8;
}

body[data-theme="noir"] .int-icon.active-safe,
body[data-theme="noir"] .int-icon.active-spicy,
body[data-theme="noir"] .int-icon.active-extreme {
    filter: invert(1) !important;
    opacity: 1;
    transform: scale(1.15);
}

/* --- ИКОНКА СБРОСА (КРАСНАЯ) --- */
.settings-icon.red-icon {
    filter: invert(36%) sepia(83%) saturate(1963%) hue-rotate(339deg) brightness(96%) contrast(87%) !important;
    opacity: 1 !important;
}

/* --- ЦВЕТА ДЛЯ АКТИВНЫХ ИКОНОК --- */

/* 1. SAFE (Зеленый #2ecc71) */
.int-icon.active-safe {
    filter: invert(68%) sepia(61%) saturate(452%) hue-rotate(97deg) brightness(89%) contrast(85%) !important;
    opacity: 1;
    transform: scale(1.2);
}

/* 2. SPICY (Оранжевый #f39c12) */
.int-icon.active-spicy {
    filter: invert(77%) sepia(33%) saturate(5427%) hue-rotate(357deg) brightness(101%) contrast(90%) !important;
    opacity: 1;
    transform: scale(1.2);
}

/* 3. EXTREME (Красный #e74c3c) */
.int-icon.active-extreme {
    filter: invert(43%) sepia(97%) saturate(1874%) hue-rotate(338deg) brightness(96%) contrast(89%) !important;
    opacity: 1;
    transform: scale(1.2);
}

#hist-list-swipes .ios-row, 
#hist-list-watch .ios-row,
#hist-list-wrapped .wrapped-archive-item {
    border-radius: 16px !important;
    margin-bottom: 8px !important; /* Отступ между карточками */
    border: 1px solid var(--border) !important; /* Легкая обводка для красоты */
}

/* Убираем линию-разделитель, так как теперь у нас отдельные карточки */
#hist-list-swipes .ios-row::after,
#hist-list-watch .ios-row::after {
    display: none !important;
}

/* 2. РОАДМАП (Выравнивание и отступы) */
.roadmap-item {
    align-items: center !important; /* Иконки по центру вертикально */
    margin-bottom: 25px !important; /* Отступ между пунктами */
}

.rm-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important; /* Отступ между Заголовком и Описанием */
}

.rm-line {
    display: none !important;
}

/* 3. ЗАЛ СЛАВЫ (Отступы) */
#sponsors-list {
    margin-right: 15px !important; /* Добавляем отступ справа */
    width: auto !important;
}

/* PANIC SETTINGS STYLES */
.panic-key-box {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed var(--border);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 15px;
    transition: all 0.2s;
    user-select: none;
}
.panic-key-box:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-secondary);
}
.panic-key-box.recording {
    border-color: var(--accent);
    background: rgba(255, 0, 204, 0.1); /* Pink tint */
    animation: pulseBorder 1.5s infinite;
}
.panic-key-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.panic-key-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-main);
    font-family: monospace;
}
.panic-note {
    font-size: 12px; 
    color: var(--text-secondary); 
    line-height: 1.5; 
    margin-bottom: 20px; 
    text-align: center;
}
.panic-highlight {
    color: var(--text-main);
    font-weight: 700;
}

@keyframes pulseBorder {
    0% { border-color: var(--accent); }
    50% { border-color: transparent; }
    100% { border-color: var(--accent); }
}

/* --- НОВЫЙ СТИЛЬ EXPLORED BAR --- */
.explored-row {
    padding: 12px 16px;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important; /* Центрируем по вертикали бар и иконку */
    min-height: 50px;
    border-bottom: 1px solid rgba(128,128,128,0.1);
}

.explored-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Правая часть: Бар + Цифры */
.explored-right {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 140px; /* Фиксированная ширина */
    position: relative;
}

/* Трек бара */
.explored-track {
    width: 100%;
    height: 8px; /* Чуть толще для красоты */
    background: var(--nav-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-bottom: 4px; /* Отступ до цифр */
}

/* Заливка */
.explored-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), #9b59b6);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 0 10px var(--accent); /* Легкое свечение */
}

/* Контейнер для цифр под баром */
.explored-nums-container {
    position: relative;
    width: 100%;
    height: 14px; /* Высота под шрифт */
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Бегущая цифра (Текущее) */
#ex-current {
    position: absolute;
    top: 0;
    left: 0; /* Будет меняться через JS */
    transform: translateX(-50%); /* Центрируем относительно конца полоски */
    transition: left 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    color: var(--text-main); /* Ярче */
    white-space: nowrap;
}

/* Статичная цифра (Всего) */
#ex-total-label {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.6;
}

/* --- Сетка категорий --- */
.explored-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    gap: 12px;
    padding-bottom: 20px;
}

/* --- Карточка категории --- */
.ex-card {
    background: var(--ios-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.2s;
    overflow: hidden;
}

.ex-card:active {
    transform: scale(0.98);
}

/* Иконка сверху по центру */
.ex-card-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 10px;
    /* Инверсия для темной темы, если иконки черные */
    filter: invert(1) drop-shadow(0 4px 6px rgba(0,0,0,0.2));
    transition: filter 0.3s;
}

body.light-theme .ex-card-icon {
    filter: invert(0) drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* Название категории */
.ex-card-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-main);
    margin-bottom: 8px;
    text-align: center;
}

/* Прогресс-бар контейнер */
.ex-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(128,128,128,0.2);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-bottom: 5px;
}

/* Прогресс-бар заливка */
.ex-progress-fill {
    height: 100%;
    background: var(--accent);
    width: 0%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

/* Текст статистики (снизу) */
.ex-card-stats {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 700;
}

/* --- СТИЛЬ ДЛЯ ПОЛНОСТЬЮ ОТКРЫТЫХ (ЗЕЛЕНЫЙ) --- */
.ex-card.completed {
    border: 1px solid #2ecc71;
    background: rgba(46, 204, 113, 0.1); /* Легкий зеленый фон */
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.2);
}

.ex-card.completed .ex-progress-fill {
    background: #2ecc71; /* Зеленая полоска */
}

.ex-card.completed .ex-card-title {
    color: #2ecc71;
}

.ex-card.completed .ex-card-icon {
    /* Зеленое свечение иконки */
    filter: invert(1) sepia(1) saturate(5) hue-rotate(80deg) drop-shadow(0 0 5px #2ecc71); 
}
/* Коррекция для светлой темы для completed */
body.light-theme .ex-card.completed .ex-card-icon {
    filter: invert(0) sepia(1) saturate(5) hue-rotate(80deg);
}

.ex-date {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 4px;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Показываем дату только если выполнено */
.ex-card.completed .ex-date {
    opacity: 1;
    color: #2ecc71; /* Зеленый цвет */
}

/* --- СТИЛИ ДЛЯ ПОЛЕЗНОСТЕЙ (TIPS) --- */

/* Сетка: 2 колонки */
.tips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 колонки */
    gap: 12px;
    padding-bottom: 20px;
}

/* Карточка-контейнер */
.tip-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden; /* Чтобы шапка не вылезала */
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    aspect-ratio: 0.8; /* Чуть вытянутый прямоугольник (близко к 4:3 вертикально) */
    cursor: pointer;
    transition: transform 0.2s;
    background: var(--ios-card); /* Подложка */
}

.tip-card:active {
    transform: scale(0.96);
}

/* 1/3 Сверху: Цветная шапка */
.tip-card-header {
    height: 35%; /* Треть высоты */
    width: 100%;
    /* Фон задается через JS (градиент) */
}

/* 2/3 Снизу: Нейтральное стекло */
.tip-card-body {
    height: 65%;
    width: 100%;
    position: relative; /* Для позиционирования иконки */
    padding: 12px;
    display: flex;
    flex-direction: column;
    
    /* Стеклянный нейтральный фон */
    background: var(--ios-card); 
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.05), transparent);
}

/* Иконка (Эмодзи) */
.tip-card-icon {
    position: absolute;
    top: -22px; /* Поднимаем вверх, чтобы села на границу */
    left: 12px; /* Слева */
    font-size: 36px; /* Крупный размер */
    line-height: 1;
    z-index: 2;
    /* Тень для контраста на фоне границы */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

/* Заголовок */
.tip-card-title {
    margin-top: 18px; /* Отступ сверху, чтобы не наехать на иконку */
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
    margin-bottom: 6px;
}

/* Описание */
.tip-card-desc {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.35;
    font-weight: 500;
    
    /* Обрезаем лишнее */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tip-card.viewed {
    opacity: 0.5;
    transform: scale(0.98);
    order: 1;
    filter: grayscale(0.5); 
}

/* Текст заголовка "Стань гуру" (маленький и серый) */
.tips-guru-text {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
    opacity: 0.7;
}

/* =========================================
DYNAMIC LOGO GRADIENTS PER THEME 
========================================= */

/* Базовые настройки для текста-градиента */
.logo span, 
.sum-logo-text span.grad {
    display: inline-block; /* Важно для корректной отрисовки */
    color: transparent;    /* На случай, если градиент не загрузится */
}

/* --- 1. BLUE (Midnight / Sky) --- */
body[data-theme="blue-dark"] .logo span,
body[data-theme="blue-light"] .logo span,
body[data-theme="blue-dark"] .sum-logo-text span.grad,
body[data-theme="blue-light"] .sum-logo-text span.grad {
    background: linear-gradient(180deg, #64ffda 0%, #2563eb 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* --- 2. GREEN (Forest / Mint) --- */
body[data-theme="green-dark"] .logo span,
body[data-theme="green-light"] .logo span,
body[data-theme="green-dark"] .sum-logo-text span.grad,
body[data-theme="green-light"] .sum-logo-text span.grad {
    background: linear-gradient(180deg, #86efac 0%, #16a34a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* --- 3. RED (Vampire / Rose) --- */
body[data-theme="red-dark"] .logo span,
body[data-theme="red-light"] .logo span,
body[data-theme="red-dark"] .sum-logo-text span.grad,
body[data-theme="red-light"] .sum-logo-text span.grad {
    background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* --- 4. GOLD (Luxury / Sand) --- */
body[data-theme="gold-dark"] .logo span,
body[data-theme="gold-light"] .logo span,
body[data-theme="gold-dark"] .sum-logo-text span.grad,
body[data-theme="gold-light"] .sum-logo-text span.grad {
    background: linear-gradient(180deg, #facc15 0%, #d97706 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* --- 5. PURPLE (Amethyst / Lavender) --- */
body[data-theme="purple-dark"] .logo span,
body[data-theme="purple-light"] .logo span,
body[data-theme="purple-dark"] .sum-logo-text span.grad,
body[data-theme="purple-light"] .sum-logo-text span.grad {
    background: linear-gradient(180deg, #e9d5ff 0%, #9333ea 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* --- 6. ORANGE (Magma / Peach) --- */
body[data-theme="orange-dark"] .logo span,
body[data-theme="orange-light"] .logo span,
body[data-theme="orange-dark"] .sum-logo-text span.grad,
body[data-theme="orange-light"] .sum-logo-text span.grad {
    background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* --- 7. NOIR (Черно-белая) --- */
body[data-theme="noir"] .logo span,
body[data-theme="noir"] .sum-logo-text span.grad {
    background: linear-gradient(180deg, #ffffff 0%, #888888 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* --- 8. OLD MONEY (Mahogany) --- */
body[data-theme="old-money"] .logo span,
body[data-theme="old-money"] .sum-logo-text span.grad {
    /* Золотой градиент */
    background: linear-gradient(180deg, #e6c98c 20%, #c5a059 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* --- 9. DEFAULT (Розовый) --- */
body:not([data-theme^="blue"]):not([data-theme^="green"]):not([data-theme^="red"]):not([data-theme^="gold"]):not([data-theme^="purple"]):not([data-theme^="orange"]):not([data-theme="noir"]):not([data-theme="old-money"]) .logo span {
    background: linear-gradient(180deg, #CB53F0 20%, #ff00cc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}


/* === НОВЫЙ БЛОК ИНТЕНСИВНОСТИ === */
.intensity-wrapper {
    background: var(--nav-bg); /* Цвет фона как у активных элементов */
    border-radius: 20px;       /* Закругленные края */
    padding: 15px 10px;        /* Внутренние отступы */
    margin: 10px 12px 12px 12px; /* Отступы от краев группы */
    border: 1px solid var(--border);
}

.intensity-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    gap: 5px;
}

.intensity-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-main);
    letter-spacing: 1px;
}

/* Ограничитель ширины для слайдера и иконок */
.intensity-controls-inner {
    width: 80%;       /* Слайдер стал меньше (уже) */
    margin: 0 auto;   /* Центрирование */
    position: relative;
}

/* =========================================
18. MEDIA QUERIES (ADAPTATION)
========================================= */

@media (max-width: 768px) {
    #row-install-app, 
    #group-install-container { 
        display: none !important;
    }
}

/* DESKTOP / TABLET (> 768px) */
@media (min-width: 769px) {
    
    /* 1. Глобальный контейнер таба - центрирует всё содержимое */
    #tab-home {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100vh !important;
        width: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: relative; 
    }

    /* 2. Промежуточная обертка - сжимаем её до размера контента */
    #tab-home .center-wrapper {
        height: auto !important;
        width: auto !important; /* Не растягивать на всю ширину! */
        max-width: none !important; 
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important; /* Центрирование по горизонтали */
        flex-direction: column !important;
    }

    /* 3. ЯКОРЯ КАРТОЧКИ (Самое важное для иконок) */
    /* Задаем им фиксированную ширину, чтобы иконки знали, где "край" карточки */
    #card-anchor, #card-anim-wrapper {
        width: 650px !important; /* Ширина равна ширине карточки */
        max-width: 90vw !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 4. САМА КАРТОЧКА */
    .card {
        width: 100% !important; /* Занимает всю ширину якоря (650px) */
        height: 85vh !important;
        
        min-height: 700px !important;
        max-height: 950px !important;
        
        margin: 0 !important;
        justify-content: space-between !important; 
    }

    /* 5. ИКОНКИ НА ПК (Возвращаем их на место) */
    .icon-left {
        width: 160px !important; /* Чуть крупнее для ПК */
        top: -40px !important;
        left: -40px !important;
    }
    .icon-right {
        width: 130px !important;
        top: -30px !important;
        right: -30px !important;
    }

    /* 6. ТЕКСТ РЕЗУЛЬТАТА */
    .slot-window {
        height: 55% !important; 
        display: flex !important;
        align-items: center !important;
    }
    .slot-item {
        font-size: 110px !important; 
        line-height: 1.1 !important;
    }

    /* 7. Фраза над карточкой */
    .status-text-combined {
        font-size: 24px !important;
        margin-bottom: 30px !important;
        white-space: nowrap; /* Чтобы не переносилась */
    }

    /* 8. Кнопки управления */
    .t-circle-btn.large { width: 90px !important; height: 90px !important; font-size: 40px !important; }
    .t-circle-btn.medium { width: 70px !important; height: 70px !important; font-size: 30px !important; }
    
    /* 9. Модальные окна */
    #modal-sub-overlay .modal {
        width: 950px !important;
        max-width: 95% !important;
    }
    .plans-container { flex-direction: row; align-items: stretch; justify-content: center; }
    .plan-card { flex: 1; }
}

#hist-list-swipes, #hist-list-watch {
    padding-bottom: 20px;
}

.stats-tf-capsule, 
.stats-nav-capsule {
    flex-shrink: 0 !important;
    width: 100% !important;
}

@media (min-width: 769px) {
    .plans-container {
        flex-direction: row !important;
        align-items: stretch !important;
    }
}

/* Закрепленный футер модального окна */
.modal-footer {
    flex-shrink: 0; /* Запрещаем сжиматься */
    padding: 15px 20px;
    background: var(--sidebar-bg); /* Цвет фона как у модалки */
    border-top: 1px solid var(--border); /* Разделитель сверху */
    z-index: 10;
}

/* Корректировка капсулы, чтобы она растягивалась красиво */
.modal-footer .stats-nav-capsule {
    margin-top: 0;
    width: 100%;
}

/* VERSION CAPSULE STYLE */
.version-card {
    display: flex;
    align-items: center; /* Центрирование по вертикали */
    justify-content: space-between;
    
    background: var(--ios-card);
    border: 1px solid var(--border);
    border-radius: 18px; /* Скругление капсулы */
    padding: 12px 16px;
    margin-bottom: 10px;
    
    transition: transform 0.2s;
}

.version-card:active {
    transform: scale(0.98);
    background: var(--nav-bg);
}

/* Левая часть: Версия */
.v-ver-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    color: var(--accent);
    font-weight: 800;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 10px;
    min-width: 50px;
    text-align: center;
    margin-right: 12px;
    flex-shrink: 0; /* Чтобы не сжималась */
}

/* Середина: Описание */
.v-content {
    flex: 1; /* Занимает всё свободное место */
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.3;
    margin-right: 12px;
    font-weight: 500;
}

/* Правая часть: Дата */
.v-date {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    white-space: nowrap; /* Чтобы дата не переносилась */
    flex-shrink: 0;
}

/* === BENTO GRID SYSTEM === */
.bento-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две колонки */
    grid-auto-rows: min-content;    /* Высота по содержимому */
    gap: 12px;
    padding-bottom: 20px;
}

/* Базовая карточка Бенто */
.bento-box {
    background: var(--ios-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.bento-box:active {
    transform: scale(0.98);
    background: var(--nav-bg);
}

/* --- ТИПЫ БЛОКОВ --- */

/* 1. Широкий блок (на всю ширину) */
.bento-wide {
    grid-column: span 2;
}

/* 2. Блок подписки (Акцентный) */
.bento-sub {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
    min-height: 100px;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Цветовые модификаторы для подписки */
.bento-sub.is-free { border-color: var(--border); }
.bento-sub.is-pro { border-color: #ff9900; background: linear-gradient(135deg, rgba(255, 153, 0, 0.1), transparent); }
.bento-sub.is-bestie { border-color: #00d2ff; background: linear-gradient(135deg, rgba(0, 210, 255, 0.1), transparent); }

/* 3. Квадратные статы (Apple Watch style) */
.bento-stat {
    aspect-ratio: 1.1 / 1; /* Почти квадрат */
    justify-content: space-between;
}

.bento-stat-large {
    display: flex;
    flex-direction: column;
    align-items: center;      /* Центрирование по горизонтали */
    justify-content: center;  /* Центрирование по вертикали */
    text-align: center;
    padding: 15px 10px;
    gap: 6px;                 /* Отступы между элементами */
    aspect-ratio: 1 / 1;      /* Строгий квадрат */
}

/* Крупная иконка по центру */
.bento-img-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    margin-bottom: 2px;
    
    /* Адаптация цвета (инверсия для темной темы, как в сайдбаре) */
    filter: invert(1);
    opacity: 0.9;
    transition: transform 0.2s;
}

/* Светлая тема - иконки темные */
body.light-theme .bento-img-icon {
    filter: invert(0);
    opacity: 0.7;
}

/* Эффект при нажатии на блок */
.bento-stat-large:active .bento-img-icon {
    transform: scale(0.9);
}

/* Корректировка цифры */
.bento-stat-large .bento-val {
    font-size: 28px;     /* Чуть крупнее */
    margin-top: 0;       /* Убираем старый margin-top: auto */
    line-height: 1;
}

/* Корректировка подписи */
.bento-stat-large .bento-label {
    font-size: 10px;
    opacity: 0.6;
    margin-top: 2px;
}

/* --- ВНУТРЕННОСТИ КАРТОЧЕК --- */

/* Иконка в углу */
.bento-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bg-color); /* Темнее фона карточки */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

/* Заголовок (мелкий) */
.bento-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Значение (большое) */
.bento-val {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    margin-top: auto; /* Прижать к низу, если флекс */
}

/* Профиль (User Identity) */
.bento-profile {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
.profile-avatar {
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    background: var(--nav-bg); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 16px;
}

/* Кнопка синхронизации */
.bento-action {
    background: var(--accent);
    color: #000;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;
    padding: 18px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    border: none;
    cursor: pointer;
}
.bento-action:active {
    transform: scale(0.96);
    filter: brightness(0.9);
}

/* Кнопки выхода/сброса (мелкие внизу) */
.bento-footer-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 5px;
}
.bento-small-btn {
    flex: 1;
    padding: 12px;
    border-radius: 16px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

#age-gate {
    background-color: var(--bg-color) !important; /* Сплошной цвет темы */
    backdrop-filter: none !important; /* Убираем блюр, он не нужен на сплошном */
    opacity: 1 !important; /* Гарантируем видимость */
}

/* 2. Центрирование кнопок в модальных окнах (Установка и Онбординг) */
#modal-install-overlay .btn-gen,
#onboarding-overlay .btn-gen {
    display: flex !important;
    justify-content: center !important; /* Центрирует текст/иконку по горизонтали */
    align-items: center !important;     /* Центрирует по вертикали */
    text-align: center !important;      /* На всякий случай для текста */
    width: 100% !important;             /* Растягиваем кнопку на всю ширину */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#modal-install-overlay .modal-close-btn {
    display: flex !important; /* Принудительно показываем */
    visibility: visible !important;
    opacity: 1 !important;
}


#block-account .ios-row[onclick*="handleLoginClick"] {
    padding: 10px 12px !important;
}

#block-prefs .ios-group > div:not(.ios-row):not(.custom-separator) {
    padding: 10px 10px 8px 14px !important; 
}

@media (min-width: 769px) {
    #block-account .ios-row[onclick*="handleLoginClick"] {
        padding: 8px 10px !important;
    }
}

/* --- STYLES FOR GENRE DETAILS (EXPLORED) --- */
.genre-detail-view {
    display: none; /* Скрыто по умолчанию */
    flex-direction: column;
    align-items: center;
    width: 100%;
    animation: fadeIn 0.3s ease;
}

.genre-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.genre-icon-large {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 10px;
    
    filter: invert(1) drop-shadow(0 0 15px rgba(255,255,255,0.2));
    transition: filter 0.3s ease;
}

body.light-theme .genre-icon-large {
    filter: invert(0) drop-shadow(0 0 15px rgba(0,0,0,0.1));
}

body[data-theme="old-money"] .genre-icon-large {
    filter: invert(75%) sepia(26%) saturate(677%) hue-rotate(357deg) brightness(89%) contrast(88%) drop-shadow(0 2px 5px rgba(0,0,0,0.3)) !important;
}

/* === СТИЛИ ДЛЯ РЕЖИМА ПАНИКИ (Green Theme) === */

/* Темная зеленая тема (По умолчанию в панике) -> Иконки БЕЛЫЕ */
body[data-theme="green-dark"] .settings-icon {
    filter: invert(1);
    opacity: 0.9;
}

/* Светлая зеленая тема -> Иконки ЧЕРНЫЕ */
body[data-theme="green-light"] .settings-icon {
    filter: invert(0);
    opacity: 0.7;
}

/* На всякий случай сбрасываем принудительные фильтры */
body[data-theme="green-dark"] .settings-icon,
body[data-theme="green-light"] .settings-icon {
    transition: filter 0.3s ease;
}

.genre-desc-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 15px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
}

.genre-samples-title {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 700;
}

.genre-samples-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    width: 100%;
}

.sample-tag {
    background: var(--ios-card);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}

.achievement-section {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.ach-icon-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 10px;
    opacity: 0.5; /* Полупрозрачная, пока не открыто */
    filter: grayscale(1);
    transition: all 0.5s ease;
}

.ach-icon-img.unlocked {
    opacity: 1;
    filter: grayscale(0) drop-shadow(0 0 20px var(--accent));
}

.ach-status-text {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-secondary);
}

.ach-status-text.unlocked {
    color: var(--accent);
}

/* Скрываем сетку, когда активны детали */
.modal-body.show-details #explored-grid {
    display: none;
}
.modal-body.show-details .genre-detail-view {
    display: flex;
}

/* --- ACHIEVEMENTS SYSTEM --- */

/* Кнопка в профиле (под бенто-блоком подписки) */
.btn-achievements-trigger {
    background: var(--ios-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.btn-achievements-trigger:active { transform: scale(0.98); background: var(--nav-bg); }

/* Сетка достижений (Grid) */
.ach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ПК: 3 колонки */
    gap: 15px;
    padding-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .ach-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Принудительно 2 колонки */
        gap: 10px; /* Чуть меньше отступы */
    }
    
    /* Уменьшаем отступы самого окна, чтобы влезало больше контента */
    #modal-achievements-overlay .modal-body {
        padding: 15px 10px !important;
        overflow-x: hidden !important; /* Запрещаем гориз. скролл */
    }
}

.ach-card {
    background: var(--ios-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0.5; /* По умолчанию закрыто */
    filter: grayscale(1);
    transition: transform 0.2s;
    min-height: 110px;
}

.ach-card.unlocked {
    opacity: 1;
    filter: grayscale(0);
    border-color: var(--accent);
    background: linear-gradient(165deg, var(--ios-card) 0%, rgba(255,255,255,0.05) 100%);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.ach-card:active { transform: scale(0.95); }

.ach-card-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
}

.ach-card-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-main);
    line-height: 1.2;
}

/* Секция достижений в деталях жанра */
.genre-achievements-header {
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 15px 0 10px 0;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    letter-spacing: 1px;
}

.genre-icons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Отступ между двумя наградами */
    margin-bottom: 10px;
}

.reward-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
}

.reward-display-img {
    width: 70px;
    height: 70px;
    object-fit: contain; /* Чтобы картинка вписывалась */
    margin-bottom: 8px;
    transition: transform 0.2s;
}

/* Специфика для Иконки приложения (App Icon) */
.reward-display-img.app-icon-style {
    border-radius: 15px; /* Скругление как у iOS иконки */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Тень */
    object-fit: cover; /* Иконка заполняет весь квадрат */
}

/* Специфика для Бейджа (Badge) */
.reward-display-img.badge-style {
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2)); /* Тень для прозрачного PNG */
}

/* Эффект нажатия (опционально) */
.reward-display-img:active {
    transform: scale(0.95);
}

/* Второе достижение (Иконка темы) */
.theme-reward-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    margin-bottom: 5px;
    /* Иконки тем обычно уже цветные, не инвертируем их */
}

/* --- DETAIL SHARING CARD (Скрытая карточка для экспорта) --- */
#achievement-share-card {
    position: fixed; left: -9999px; top: 0;
    width: 350px;
    background: #12000b; /* Темный фон для картинки */
    border: 1px solid #333;
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: sans-serif;
    color: #fff;
}

.share-ach-icon {
    width: 120px; height: 120px;
    object-fit: contain;
    margin: 20px 0;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.3));
}

.share-ach-title {
    font-size: 24px; font-weight: 900;
    text-transform: uppercase; margin-bottom: 10px;
    color: #ff00cc; /* Дефолтный акцент */
}

.share-ach-desc {
    font-size: 14px; color: #aaa; line-height: 1.5; margin-bottom: 20px;
}

.share-ach-date {
    background: rgba(255,255,255,0.1);
    padding: 5px 15px; border-radius: 20px;
    font-size: 12px; font-weight: 700; color: #fff;
    margin-bottom: 20px;
}

.icons-section-header {
    margin: 15px 0 5px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase;
    opacity: 0.7;
    display: flex !important; 
}

@media (max-width: 768px) {
    .icons-section-header {
        display: none !important;
    }
}

.icons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 20px;
}

.app-icon-item {
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
}

.app-icon-item:active { transform: scale(0.95); }

.app-icon-img {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    margin-bottom: 5px;
    border: 2px solid transparent; /* Для активного состояния */
    transition: all 0.2s;
    object-fit: cover;
}

/* Активная иконка (выбрана) */
.app-icon-item.active .app-icon-img {
    border-color: var(--accent);
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--accent);
}

/* Закрытая иконка */
.app-icon-item.locked .app-icon-img {
    filter: grayscale(1) brightness(0.7);
    opacity: 0.6;
}

/* Замочек на закрытой */
.icon-lock-badge {
    position: absolute;
    top: -5px; right: -5px;
    font-size: 12px;
}

.app-icon-label {
    font-size: 9px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.1;
    font-weight: 600;
}

/* --- СТИЛЬ ДЛЯ ЭМОДЗИ-АЧИВОК --- */
.ach-emoji-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Размер квадрата в списке */
    width: 50px; 
    height: 50px;
    
    /* Стеклянный фон */
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    
    /* Тень и свечение */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(255,255,255,0.05);
    
    margin-bottom: 8px; /* Отступ до текста */
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    overflow: hidden;
}

/* Эффект блика (Маска) */
.ach-emoji-box::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    opacity: 0.7;
    pointer-events: none;
}

/* Сам эмодзи внутри */
.ach-emoji-content {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); /* Тень для объема */
    z-index: 1;
}

/* --- СТИЛЬ ДЛЯ ОТКРЫТОЙ АЧИВКИ (Свечение цветом темы) --- */
.ach-card.unlocked .ach-emoji-box {
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(255, 0, 204, 0.2), inset 0 0 10px rgba(255, 0, 204, 0.1);
}

.ach-card.unlocked .ach-emoji-content {
    filter: drop-shadow(0 0 5px var(--accent)); /* Эмодзи тоже начинает светиться */
}

/* --- БОЛЬШАЯ ВЕРСИЯ (Для детального просмотра) --- */
.ach-emoji-box.large {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.2) 100%);
}

.ach-emoji-box.large .ach-emoji-content {
    font-size: 64px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.6));
}

/* Если закрыто в деталях */
.ach-emoji-box.large.locked {
    filter: grayscale(1);
    opacity: 0.5;
}

/* Стили для скидочных цен */
.price-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
}

.old-price {
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: line-through;
    margin-bottom: 2px;
}

.new-price-highlight {
    font-size: 22px;
    font-weight: 800;
    color: var(--highlight-green) !important; /* Зеленый для выгоды */
    animation: pulsePrice 2s infinite;
}

.discount-badge-card {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--highlight-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 5;
    box-shadow: 0 2px 10px rgba(231, 76, 60, 0.4);
}

@keyframes pulsePrice {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Стили для модалки лояльности */
.loyalty-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
    border: 3px solid var(--accent);
    padding: 3px;
}

/* Таймер окончания скидки */
.discount-timer {
    font-size: 11px;
    font-weight: 700;
    color: var(--highlight-red);
    background: rgba(231, 76, 60, 0.15);
    padding: 4px 8px;
    border-radius: 6px;
    margin-top: 4px;
    display: inline-block;
    animation: fadeIn 0.5s ease;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

/* Адаптация контейнера цены */
.price-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Прижать влево */
    justify-content: center;
    margin-bottom: 15px;
    min-height: 50px; /* Чтобы не прыгало при переключении */
}

/* Стили для слайда Топ Категорий */
.top-cats-container {
    width: 90%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cat-rank-row {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Анимация появления списка */
.cat-rank-row.visible {
    opacity: 1;
    transform: translateX(0);
}

.cat-rank-num {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-secondary);
    width: 25px;
}

.cat-rank-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-right: 12px;
}

.cat-rank-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex: 1;
    text-transform: uppercase;
}

.cat-rank-score {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
}

/* Особый стиль для ТОП-1 */
.cat-rank-row.rank-1 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
    border: 1px solid #ffd700;
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

/* Таймер интриги */
.rank-1-mask {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.rank-1-mask.revealed {
    transform: translateY(-100%);
}

.countdown-number {
    font-size: 40px;
    font-weight: 900;
    color: #fff;
    animation: pulseCount 0.8s infinite;
}

@keyframes pulseCount {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.modal-close-btn {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important; 
    max-width: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    
    /* Внешний вид */
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-secondary) !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
@media (min-width: 769px) {
    .modal-close-btn {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        max-width: 14px !important;
        border-radius: 50% !important;
        
        /* Цвет macOS (красный) */
        background: #ff5f56 !important; 
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        
        /* Позиционирование */
        left: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        
        /* Убираем лишние отступы */
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Символ крестика появляется только при наведении (эффект macOS) */
    .modal-close-btn::after {
        content: "×" !important; /* Символ умножения, он аккуратнее */
        font-size: 13px !important;
        color: #4e0002 !important; /* Темно-бордовый для контраста */
        line-height: 0.8 !important;
        font-weight: 700 !important;
        opacity: 0; /* Скрыт по умолчанию */
        transition: opacity 0.2s ease;
        display: block !important;
        margin-top: -1px; /* Микро-коррекция центровки */
    }
    .modal-close-btn:hover::after {
        opacity: 1;
    }

    .modal-close-btn:active {
        filter: brightness(0.8);
        transform: translateY(-50%) scale(0.9) !important;
    }
    .modal-header > span:not(.modal-close-btn):not(.modal-header-actions) {
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-top: 3px !important; /* Сдвигаем вниз на 3px */
        
        /* Доп. стили для красоты на ПК */
        font-size: 15px !important;
        letter-spacing: 0.5px !important;
    }
}


.modal-close-btn:active {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-50%) scale(0.95) !important;
    color: var(--text-main) !important;
}

/* Иконка стрелки для мобильных (CSS-рисованная или SVG) */
.modal-close-icon {
    /* Рисуем стрелку "Назад" или Крестик */
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border: none !important;
    
    /* Стрелка влево */
    border-top: 2px solid var(--text-main) !important;
    border-left: 2px solid var(--text-main) !important;
    transform: rotate(-45deg) !important;
    margin-left: 2px !important; /* Визуальная центровка стрелки */
    
    /* Сброс фона, если был */
    background: transparent !important;
}

.modal-close-btn::after, 
.modal-close-btn::before {
    display: none !important;
}

@media (max-width: 768px) {
    .modal-close-btn {
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: 20px !important;
    }
    
    /* Если справа есть иконки (Share), их тоже центрируем */
    .modal-header-actions {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .modal-close-icon {
        /* 1. Сбрасываем ВСЕ границы, чтобы убрать наследство от десктопа */
        border: none !important; 
        
        width: 8px !important;
        height: 8px !important;
        
        /* 2. Рисуем только две нужные стороны для "уголка" стрелки */
        border-top: 2px solid var(--text-main) !important;
        border-left: 2px solid var(--text-main) !important;
        
        /* 3. Поворачиваем на -45 градусов, чтобы угол смотрел влево */
        transform: rotate(-45deg) !important; 
        
        margin-left: 2px !important; 
        display: block !important;
        opacity: 0.8 !important;
    }

    .modal-close-btn:active {
        transform: translateY(-50%) scale(0.9) !important;
        background: rgba(128, 128, 128, 0.25) !important;
    }
}

/* Плавный переход для всех элементов, которые могут быть размыты */
#slot-reel, #result-desc, #badge-wrapper, #related-block {
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Класс размытия контента */
.card-content-blur {
    filter: blur(10px) !important;
    opacity: 0.4;
    pointer-events: none; /* Чтобы нельзя было кликнуть по размытым ссылкам */
}

#mods-counter {
    position: absolute !important;
    right: 20px !important; /* Отступ от правого края */
    left: auto !important;  /* Отменяем центрирование, если оно было */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Центрируем по вертикали */
    
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 100 !important;
    
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
}

.main-content {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100vh; /* Для старых браузеров */
    height: 100dvh; /* Dynamic viewport для мобильных */
    overflow: hidden;
}

/* Возвращаем правильное поведение вкладок */
.tab-content {
    display: none; /* Прячем неактивные */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    overflow-y: auto; /* Скролл внутри вкладок */
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* Активная вкладка */
.tab-content.active {
    display: flex !important;
}

@keyframes tabPremiumIn {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.99);
        filter: blur(4px); /* Эффект линзы */
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (max-width: 768px) {
    #tab-home .center-wrapper {
        height: 100% !important;
        max-height: 100% !important;
        padding-bottom: 110px !important; 
        padding-top: 75px !important;
        justify-content: center !important; /* Центрируем карточку по вертикали */
    }

    .tab-content.active .center-wrapper {
        animation: tabPremiumIn 0.25s cubic-bezier(0.2, 0, 0.2, 1) forwards;
        will-change: transform, opacity, filter;
    }
}

/* Календарная сетка */
.calendar-month { margin-bottom: 30px; }
.calendar-month-title { text-align: center; font-weight: 800; margin-bottom: 10px; text-transform: uppercase; color: var(--accent); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar-day-label { text-align: center; font-size: 10px; color: var(--text-secondary); padding: 5px 0; }

.calendar-day {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; border-radius: 8px; cursor: pointer;
    transition: background 0.2s; color: var(--text-main);
}

.calendar-day.disabled { opacity: 0.2; pointer-events: none; }
.calendar-day.selected { background: var(--accent) !important; color: #000 !important; font-weight: 800; }
.calendar-day.in-range { background: rgba(255, 0, 204, 0.2); border-radius: 0; }
.calendar-day:not(.disabled):hover { background: rgba(255,255,255,0.1); }

#calendar-scroll-container {
    display: flex;
    flex-direction: column; 
    gap: 20px;
    overflow-y: auto;
}

#calendar-scroll-container::-webkit-scrollbar {
    width: 4px;
}
#calendar-scroll-container::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

/* --- УЛУЧШЕННЫЙ ДИЗАЙН КАЛЕНДАРЯ --- */

.date-capsule-row {
    display: flex;
    gap: 15px;
    padding: 20px 20px 10px 20px;
    background: transparent !important;
    flex-shrink: 0; /* Чтобы шапка не сжималась при скролле */
    z-index: 10;
}

/* Капсула (теперь с relative для позиционирования инпута) */
.date-capsule {
    flex: 1;
    background: var(--ios-card);
    border: 1px solid var(--border);
    border-radius: 50px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    overflow: hidden; /* Чтобы каретка не вылезала */
}

/* Текст внутри капсулы */
.date-capsule span {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    pointer-events: none; /* Клики проходят сквозь текст на инпут */
    z-index: 1;
}

.date-capsule-input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
    
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary); 
    
    padding: 0 10px;
    border-radius: 50px;
}

.date-capsule-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
    font-weight: 600;
}

.date-capsule.filled .date-capsule-input {
    color: var(--text-main); 
}

.date-capsule-input:focus {
    background: rgba(255,255,255,0.05);
}

.date-capsule.filled {
    background: var(--nav-bg);
    border-color: var(--accent);
}
.date-capsule.filled span {
    color: var(--text-main);
}

/* Контейнер скролла */
#calendar-scroll-container {
    flex: 1;
    overflow-y: auto;
    /* Важно для iOS: инерционный скролл */
    -webkit-overflow-scrolling: touch; 
    padding: 10px 15px 100px 15px; /* Большой отступ снизу, чтобы кнопка не перекрывала */
    background: transparent;
    position: relative;
    z-index: 5;
}

/* Карточка месяца */
.calendar-month-card {
    background: var(--ios-card);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid var(--border);
}

.calendar-month-title {
    font-size: 15px !important;
    text-transform: capitalize !important;
    margin-bottom: 15px !important;
    color: var(--text-main) !important;
    text-align: center;
    font-weight: 800;
}

.calendar-grid {
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 8px; 
}

/* Дни-кружочки */
.calendar-day {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50% !important;
    font-size: 13px !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
}

.calendar-day.disabled { opacity: 0.2; pointer-events: none; }

.calendar-day.selected {
    background: var(--accent) !important;
    color: #000 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.calendar-day.in-range {
    background: rgba(255, 0, 204, 0.15) !important;
    color: var(--accent) !important;
    font-weight: 700;
}

/* Плавающая кнопка (Градиент снизу) */
.confirm-floating-container {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 20px 20px 30px 20px; /* Отступ снизу для iPhone (Home bar) */
    background: linear-gradient(to top, var(--bg-color) 40%, transparent 100%) !important;
    display: flex;
    justify-content: center;
    pointer-events: none; /* Пропускает клики сквозь градиент */
    z-index: 20;
}

.btn-confirm-capsule {
    pointer-events: auto; /* Сама кнопка кликабельна */
    width: 100% !important;
    max-width: 320px;
    padding: 16px !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    background: var(--text-main) !important;
    color: var(--bg-color) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    border: none;
}

/* --- SITES MODAL STYLES --- */

.smart-mode-container {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    margin: 15px;
    padding: 15px;
    border-radius: 16px;
    border: 1px solid var(--accent);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.site-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--ios-card);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
}

.site-card:first-child { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.site-card:last-child { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; border-bottom: none; }

.site-card:active {
    background: var(--nav-bg);
}

.site-card.selected {
    background: rgba(46, 204, 113, 0.1); /* Зеленоватый фон для выбранного */
}

.site-card.selected .site-check {
    opacity: 1;
    transform: scale(1);
}

.site-info {
    display: flex;
    flex-direction: column;
}

.site-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 2px;
}

.site-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.2;
}

.site-check {
    color: var(--accent);
    font-size: 18px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =========================================
MACOS STYLE SIDEBAR (DESKTOP ONLY)
========================================= */
@media (min-width: 769px) {
    
    body {
        /* Добавляем немного отступа контенту, чтобы он не прилипал к парящему сайдбару */
        overflow: hidden; /* Убираем скролл у всего body */
    }

    .sidebar {
        /* 1. РАЗМЕРЫ И ОТСТУПЫ (Парящий эффект) */
        height: calc(100vh - 20px) !important;
        margin-top: 10px !important;
        margin-left: 10px !important;
        margin-bottom: 10px !important;
        margin-right: 0 !important; /* Справа не нужен отступ, там контент */
        
        border-radius: 22px !important;

        padding: 10px !important;
        
        /* 2. ЭФФЕКТ СТЕКЛА (Glassmorphism) */
        background: rgba(28, 28, 30, 0.65) !important; 
        
        backdrop-filter: blur(25px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
        
        /* 3. ГРАНИЦЫ И ТЕНИ */
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important; /* Перебиваем старый border-right */
        
        /* Глубокая тень для ощущения "парения" */
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
        
        z-index: 100 !important;
    }

    /* Адаптация для СВЕТЛОЙ ТЕМЫ */
    body.light-theme .sidebar {
        /* Полупрозрачный белый */
        background: rgba(255, 255, 255, 0.65) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
    }

    /* Убираем скроллбар внутри сайдбара, чтобы было красиво, но оставляем возможность скроллить */
    .sidebar::-webkit-scrollbar {
        width: 0px;
        background: transparent;
    }
    
    /* Корректируем логотип, чтобы он красиво смотрелся в стекле */
    .sidebar .logo {
        margin-top: 10px !important; 
        margin-bottom: 10px !important;
        min-height: 40px;            
    }
}

@media (max-width: 768px) {

    /* 1. СКРЫВАЕМ ЗАГОЛОВКИ БЛОКОВ */
    .ios-header {
        display: none !important;
    }

    /* 2. УБИРАЕМ ВНУТРЕННИЕ ОТСТУПЫ У КОНТЕЙНЕРОВ */
    /* Это позволяет блокам растягиваться почти на всю ширину */
    #tab-settings, 
    #tab-account,
    #tab-settings .center-wrapper, 
    #tab-account .center-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. НАСТРАИВАЕМ САМИ БЛОКИ */
    .ios-group {
        /* Маленькие отступы от краев (10px) */
        margin-left: 20px !important; 
        margin-right: 20px !important;
        width: auto !important;
        
        margin-top: 0 !important;
        margin-bottom: 15px !important; /* Расстояние между блоками */
    }

    /* 4. ОТСТУП СВЕРХУ ДЛЯ ПЕРВОГО БЛОКА */
    #block-prefs .ios-group:first-child,
    #block-account .ios-group:first-child {
        margin-top: 15px !important;
    }
}

@media (max-width: 768px) {
    
    /* Сбрасываем внешние отступы у контейнеров-оберток */
    #block-prefs, #block-account, #block-extras, #block-history {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
    }

    /* Единственный источник отступа - сама группа кнопок */
    .ios-group {
        /* Стандартный отступ между всеми блоками */
        margin-bottom: 15px !important;
        margin-top: 0 !important;
    }

    /* Фикс для первого элемента, чтобы не прилипал к шапке */
    #block-prefs {
        margin-top: 15px !important;
    }

    body.tab-home-active .top-gradient-mask {
        display: none !important;
    }
    
    
}

/* --- 2. ПК ВЕРСИЯ (Стиль macOS Finder) --- */
@media (min-width: 769px) {
    
    /* Возвращаем заголовки (делаем их маленькими и аккуратными) */
    .ios-header {
        display: flex !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--text-secondary) !important;
        margin: 15px 0 5px 12px !important; /* Отступы как в списках */
        text-transform: uppercase;
        opacity: 0.7;
    }

    /* УБИРАЕМ СТИЛЬ КАРТОЧКИ У БЛОКОВ (Прозрачный фон, без границ) */
    .ios-group {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important; /* Чтобы ховер не обрезался */
    }

    /* СТИЛИЗУЕМ СТРОКИ (КНОПКИ) */
    .ios-row {
        background: transparent !important; /* Прозрачный фон */
        border-radius: 8px !important;      /* Скругление при наведении */
        margin: 0 5px 2px 5px !important;   /* Небольшой зазор между кнопками */
        padding: 8px 10px !important;       /* Компактные отступы внутри */
        min-height: 36px !important;        /* Чуть компактнее по высоте */
        border: none !important;            /* Убираем границы */
    }

    /* Убираем линии-разделители между кнопками */
    .ios-row::after {
        display: none !important;
    }

    /* Эффект наведения (Светлая подсветка как в macOS) */
    .ios-row.clickable:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Для светлой темы на ПК */
    body.light-theme .ios-row.clickable:hover {
        background: rgba(0, 0, 0, 0.05) !important;
    }

    /* Убираем шевроны (стрелочки) на ПК, для чистоты */
    .chevron {
        opacity: 0.3;
    }
}

/* === PC TWEAKS FOR GRIDS (3 COLUMNS) === */
@media (min-width: 769px) {
    
    /* 1. Делаем модальные окна шире именно для Tips и Explored, 
        чтобы 3 карточки влезли свободно */
    #modal-tips-overlay .modal,
    #modal-explored-overlay .modal {
        width: 750px !important; /* Увеличили ширину (было 550px) */
        max-width: 95vw !important;
    }

    /* 2. Переключаем сетку на 3 колонки */
    .tips-grid,
    .explored-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 равные колонки */
        gap: 20px !important; /* Чуть больше воздуха между карточками */
    }

    .ex-card-title {
        font-size: 12px !important; 
    }
    /* На ПК скрываем саму стрелку внутри красной точки */
    .modal-close-icon {
        display: none !important;
    }
}

.modal.swiping {
    transition: none !important;
}

.modal {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform;
}

/* Заголовок категории */
.tips-category-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 30px 0 15px 0;
    text-align: center; /* Центрирование */
    width: 100%;
}

/* Контейнер скролла */
.tips-scroll-row {
    display: flex;
    overflow-x: auto;
    overflow-y: visible; /* Чтобы тени не обрезались */
    gap: 15px;
    
    margin-left: -20px; 
    margin-right: -20px;
    width: calc(100% + 40px);
    
    /* 2. Добавляем внутренний отступ, чтобы первая и последняя карточка не прилипали к краю */
    padding: 20px 20px 40px 20px; 
    
    /* Скрываем скроллбар */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

@media (max-width: 768px) {
    .tips-scroll-row {
        /* Если у body padding 15px, корректируем */
        margin-left: -20px !important;
        margin-right: -20px !important;
        width: calc(100% + 40px) !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
.tips-scroll-row::-webkit-scrollbar { display: none; }

/* Карточка */
.tip-card {
    /* Фиксируем размер, но используем min-width, чтобы не сжимались */
    min-width: 240px;
    width: 240px;
    height: 320px;
    
    display: flex;
    flex-direction: column;
    
    /* ВАЖНО: visible, чтобы иконка могла торчать наружу */
    overflow: visible !important; 
    
    border-radius: 24px;
    border: 1px solid var(--border);
    background: var(--ios-card);
    position: relative;
    cursor: pointer;
    
    /* Убираем тусклость */
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1) !important;
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tip-card:active {
    transform: scale(0.96) !important;
}

/* Верхняя цветная часть (1/3) */
.tip-card-header {
    height: 35% !important;
    width: 100%;
    /* Скругляем только верх */
    border-radius: 24px 24px 0 0;
}

/* Нижняя часть (2/3) */
.tip-card-body {
    height: 65% !important;
    width: 100%;
    padding: 15px;
    background: var(--ios-card);
    
    display: flex;
    flex-direction: column;
    text-align: left; /* Текст слева, как раньше */
    
    /* Скругляем только низ */
    border-radius: 0 0 24px 24px;
    position: relative;
}

.tip-card-icon {
    font-size: 42px;
    position: absolute;
    
    /* Поднимаем вверх, чтобы она села на границу */
    top: -25px !important; 
    left: 15px !important;
    
    /* Сбрасываем центрирование, которое ломало вид */
    transform: none !important; 
    
    z-index: 10;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2));
    line-height: 1;
}

/* Заголовок */
.tip-card-title {
    /* Отступ сверху, чтобы не наехать на иконку */
    margin-top: 25px !important;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-main);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Описание */
.tip-card-desc {
    font-size: 11px;
    margin-top: 5px;
    opacity: 0.7;
    line-height: 1.4;
    color: var(--text-secondary);
    
    display: -webkit-box;
    -webkit-line-clamp: 5; /* Показываем больше текста */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Галочка прочитанного */
.tip-card.viewed::after {
    content: "✓";
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    z-index: 20;
    backdrop-filter: blur(4px);
}

/* === КОМПАКТНЫЕ КАРТОЧКИ БАЗЫ ЗНАНИЙ === */

/* 1. Уменьшаем контейнер карточки */
.tip-card {
    min-width: 160px !important; /* Было 240px */
    width: 160px !important;
    height: 215px !important;    /* Было 320px */
    border-radius: 18px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important; /* Чуть меньше тень */
}

/* 2. Адаптируем верхнюю и нижнюю части */
.tip-card-header {
    border-radius: 18px 18px 0 0 !important;
}

.tip-card-body {
    padding: 10px 12px !important; /* Уменьшаем внутренние отступы */
    border-radius: 0 0 18px 18px !important;
}

/* 3. Уменьшаем и двигаем иконку (Эмодзи) */
.tip-card-icon {
    font-size: 30px !important;  /* Было 42px */
    top: -18px !important;       /* Чуть ниже, так как иконка меньше */
    left: 10px !important;
}

/* 4. Тексты */
.tip-card-title {
    font-size: 12px !important;  /* Было 15px */
    margin-top: 15px !important; /* Меньше отступ от иконки */
    margin-bottom: 3px !important;
    line-height: 1.2 !important;
}

.tip-card-desc {
    font-size: 9px !important;   /* Было 11px */
    line-height: 1.35 !important;
    opacity: 0.8 !important;
    
    /* Показываем чуть меньше текста, чтобы влезло */
    -webkit-line-clamp: 5 !important; 
}

/* 5. Галочка прочитанного */
.tip-card.viewed::after {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    top: 8px !important;
    right: 8px !important;
}

/* 6. Отступы между списками (чтобы две категории влезли в экран) */
.tips-category-title {
    font-size: 11px !important;
    margin: 15px 0 5px 0 !important; /* Сжимаем вертикальные отступы */
    padding-left: 15px !important;
}

.tips-scroll-row {
    padding: 5px 15px 20px 15px !important; /* Убираем лишний воздух */
    gap: 10px !important; /* Расстояние между карточками */
}

/* === АНИМАЦИИ СТАТИСТИКИ И WRAPPED === */

/* 1. Диапазон дат в статистике */
.stats-date-range {
    text-align: center;
    font-size: 11px;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(5px);
    animation: fadeInUp 0.3s forwards;
}

/* 2. Переливающийся текст (Градиент) */
.shimmer-text {
    background: linear-gradient(90deg, #fff, var(--accent), #fff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
    to { background-position: 200% center; }
}

/* 3. Анимация Радара (Диаграммы) */
.radar-poly {
    transform-origin: center;
    transform: scale(0);
    opacity: 0;
    /* Анимация будет запускаться через JS класс */
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s;
}
.radar-poly.animate {
    transform: scale(1);
    opacity: 0.6;
}

/* 4. Анимация Эволюции (Контейнер) */
.evo-container {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.evo-row {
    position: absolute; /* Абсолютное позиционирование для анимации перемещения */
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: top 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s, transform 0.5s;
    left: 0;
}

/* 5. Асинхронное появление текста */
.stagger-text {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards;
}
.stagger-delay-1 { animation-delay: 0.2s; }
.stagger-delay-2 { animation-delay: 0.5s; }
.stagger-delay-3 { animation-delay: 0.8s; }
.stagger-delay-4 { animation-delay: 1.2s; }

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

/* === IN-APP PUSH NOTIFICATIONS === */
#notification-container {
    position: fixed;
    z-index: 999999;
    pointer-events: none; /* Чтобы не мешал кликам, когда пуст */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Стили для мобильных (сверху по центру) */
@media (max-width: 768px) {
    #notification-container {
        top: calc(10px + env(safe-area-inset-top));
        left: 0;
        width: 100%;
        padding: 0 15px;
        align-items: center;
    }
}

/* Стили для ПК (справа сверху) */
@media (min-width: 769px) {
    #notification-container {
        top: 20px;
        right: 20px;
        width: 350px;
        align-items: flex-end;
    }
}

.toast-push {
    pointer-events: auto; /* Делаем само уведомление кликабельным */
    background: rgba(28, 28, 30, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}

/* Светлая тема */
body.light-theme .toast-push {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.toast-push-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.toast-push-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.toast-push-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.toast-push-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
}

@keyframes slideInMobile {
    from { transform: translateY(-150%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInPC {
    from { transform: translateX(150%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast-animate-in {
    animation: slideInMobile 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@media (min-width: 769px) {
    .toast-animate-in {
        animation: slideInPC 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }
}

.toast-animate-out {
    opacity: 0 !important;
    transform: scale(0.9) !important;
}

@keyframes slideOutMobile {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-150%); opacity: 0; }
}

@keyframes slideOutPC {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(150%); opacity: 0; }
}

.toast-animate-out {
    animation: slideOutMobile 0.4s cubic-bezier(0.32, 0.725, 0.0, 1) forwards !important;
}

@media (min-width: 769px) {
    .toast-animate-out {
        animation: slideOutPC 0.4s cubic-bezier(0.32, 0.725, 0.0, 1) forwards !important;
    }
}

/* Анимация тряски для превышения лимита */
@keyframes shake-limit {
    0%, 100% { 
        transform: translateY(-50%) translateX(0); 
        color: var(--text-secondary); 
    }
    20%, 60% { 
        transform: translateY(-50%) translateX(-8px); 
        color: var(--highlight-red); 
    }
    40%, 80% { 
        transform: translateY(-50%) translateX(8px); 
        color: var(--highlight-red); 
    }
}

.shake-limit-active {
    animation: shake-limit 0.4s ease-in-out !important;
    color: #ff4d4d !important; 
    text-shadow: 0 0 10px rgba(255, 77, 77, 0.5); 
}

.pro-reward-box {
    width: 70px;
    height: 70px;
    border-radius: 15px;
    background: linear-gradient(135deg, #ff9900 0%, #ff5f00 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pro-reward-box.locked {
    background: #333;
    filter: grayscale(1);
    opacity: 0.3;
    box-shadow: none;
}

.pro-reward-box.claimed {
    background: #1a1a1a;
    border: 2px solid #2ecc71;
    color: #2ecc71;
    box-shadow: none;
}

.claimed-check {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #2ecc71;
    color: #000;
    font-size: 10px;
    padding: 2px;
    border-radius: 5px;
}

/* Список инструкции */
#modal-add-site-overlay ol li {
    margin-bottom: 8px;
}
/* Стиль для кнопки удаления кастомного сайта */
.site-card .site-delete {
    padding: 8px 12px;
    background: rgba(255,0,0,0.1);
    color: var(--highlight-red);
    border-radius: 8px;
    font-size: 14px;
}

@keyframes softUndoFlyIn {
    0% {
        opacity: 0;
        /* Карточка летит слева, немного повернута и уменьшена */
        transform: translateX(-120%) rotate(-15deg) scale(0.9);
    }
    100% {
        opacity: 1;
        /* Встает ровно на место */
        transform: translateX(0) rotate(0) scale(1);
    }
}

.anim-undo-soft {
    animation: softUndoFlyIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

#row-mode-select {
    transition: 
        max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        min-height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.4s ease,
        margin 0.4s ease,
        padding 0.4s ease;
        
    overflow: hidden;
    
    max-height: 70px; 
    opacity: 1;
}

#row-mode-select.hidden-row {
    min-height: 0 !important; 
    max-height: 0 !important;
    
    opacity: 0 !important;
    
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    border: none !important;
    pointer-events: none;
}

#row-mode-select.hidden-row::after {
    display: none !important;
}

.card.status-wl,
.card.status-fav,
.card.status-ban {
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

/* --- ВАРИАНТ 1: WATCH LATER (Синяя капсула) --- */
.card.status-wl .card-notch {
    background: #3498db;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

/* --- ВАРИАНТ 2: FAVORITE (Зеленая капсула) --- */
.card.status-fav .card-notch {
    background: #2ecc71;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
}

/* --- ВАРИАНТ 3: DISLIKED (Красная капсула) --- */
.card.status-ban .card-notch {
    background: #e74c3c;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

.card-notch {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 14px !important; /* Уменьшаем отступ справа для кнопки */
    pointer-events: auto !important; /* Чтобы кнопка внутри была кликабельной */
}

/* Кнопка удаления внутри чёлки */
.notch-close-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    flex-shrink: 0;
}

.notch-close-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.4);
}

/* =========================================================
RE-DESIGN START SCREEN 
========================================================= */

/* 1. БОКОВЫЕ КНОПКИ (Explore / Pleasure)  */
.mode-circle-btn.side-btn {
    width: 82px !important;      
    height: 82px !important;
    border-radius: 50% !important;
    z-index: 10 !important;       
    
    /* Добавляем жирную обводку для контраста */
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    
    /* Мощная тень */
    box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 0 10px rgba(255,255,255,0.2) !important;
    
    /* Анимация пульсации  */
    animation: sidePulse 2s infinite ease-in-out !important;
}

/* Иконки внутри боковых кнопок тоже увеличиваем */
.side-icon-img {
    width: 38px !important; 
    height: 38px !important;
}

/* Анимация пульсации для боковых кнопок */
@keyframes sidePulse {
    0% { transform: scale(1); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
    50% { transform: scale(1.05); box-shadow: 0 15px 40px rgba(0,0,0,0.5); }
    100% { transform: scale(1); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
}

/* 2. ЦЕНТРАЛЬНАЯ КНОПКА (AI) */
.mode-circle-btn.center-btn.ai-assist {
    width: 50px !important;      
    height: 50px !important;
    z-index: 5 !important;
    
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
    
    animation: none !important;
    
    margin-top: 15px; 
}

.ai-icon-img {
    width: 24px !important; 
    height: 24px !important;
    filter: invert(1) !important; 
    opacity: 0.8;
}

/* При нажатии на AI кнопку */
.mode-circle-btn.center-btn.ai-assist:active {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(0.95);
}

/* 3. АДАПТАЦИЯ ДЛЯ ТЕМЫ NOIR (ЧЕРНО-БЕЛАЯ) */
body[data-theme="noir"] .mode-circle-btn.side-btn {
    background: #000 !important;
    border: 3px solid #fff !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important;
}

body[data-theme="noir"] .mode-circle-btn.center-btn.ai-assist {
    background: transparent !important;
    border: 1px solid #666 !important;
}

/* 4. КОРРЕКЦИЯ ОТСТУПОВ КОНТЕЙНЕРА */
.mode-buttons-row {
    gap: 15px !important; 
    align-items: flex-start !important; 
}

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