/* === ШАПКА И ЛОГОТИП === */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    height: 50px; /* Фиксированная высота шапки */
}

.logo img {
    height: 30px;       /* Логотип будет аккуратным */
    width: auto;        /* Ширина подстроится автоматически */
    display: block;
    object-fit: contain;
}

.balance {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

:root {
    --primary-orange: #FF5722; /* Насыщенный оранжевый */
    --bg-color: #ffffff;
    --tile-bg: #f0f0f0;
    --text-black: #000000;
}

@font-face {
    font-family: 'HalvarBreit';
    src: url('fonts/HalvarBreit-Lt.ttf') format('truetype');
    font-weight: normal; 
    font-style: normal;
    font-display: swap; /* Чтобы текст не был невидимым во время загрузки шрифта */
}

body {
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    /* Основной текст - Montserrat (читаемый, современный) */
    font-family: 'Montserrat', sans-serif; 
    color: var(--text-black);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* === ОБЛАСТЬ КОНТЕНТА === */
.screen {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    padding-bottom: 20px; /* Отступ под контент */
}

.screen.active {
    display: block;
}

/* === УНИВЕРСАЛЬНАЯ ПЛИТКА (ГРИД) === */
/* Применяется ко всем меню, а не только к главному */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 колонки */
    gap: 10px;
    margin-top: 10px;
}

.tile {
    position: relative;
    width: 100%;
    aspect-ratio: 0.85; /* Вертикальный формат */
    background-color: var(--tile-bg);
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    /* Мягкая анимация самой плитки при появлении */
    animation: fadeIn 0.3s ease-out;
}

/* Затемнение снизу для читаемости текста */
.tile::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
    pointer-events: none;
}


/* Эффект нажатия на плитку */
.tile:active {
    transform: scale(0.96);
    transition: transform 0.1s;
}

/* === ТИПОГРАФИКА (Montserrat Style) === */
body {
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    /* Единый шрифт для всего приложения */
    font-family: 'Montserrat', sans-serif;
    color: var(--text-black);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- НОВЫЙ БЛОК: Заголовки (Ваш платный шрифт) --- */
h1, h2, h3, h4, 
.header-name {
    font-family: 'HalvarBreit', sans-serif;
    /* У файла суффикс Lt (Light), но заголовки обычно жирные. 
       Если шрифт покажется слишком тонким, браузер попытается сделать его жирным сам (faux bold),
       но лучше, если есть, использовать Bold версию файла. 
       Пока оставляем 700, чтобы сохранить "вес" заголовка. */
    font-weight: 700; 
    text-transform: none;
}

/* --- ОСТАЛЬНОЕ: Элементы интерфейса (остаются на Montserrat) --- */
.balance-val, 
.magic-button, 
.status-badge,
.nav-btn span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: none; 
}

/* Название разделов (Главная, Support и т.д.) */
h3 {
    margin: 15px 10px 10px 10px;
    font-size: 20px; 
    font-weight: 700;
}

/* Текст на плитках (КАК НА РЕФЕРЕНСЕ) */
/* === НАСТРОЙКА ШРИФТОВ ПЛИТОК === */

/* 1. БАЗОВЫЙ СТИЛЬ (Для всех внутренних меню - "Обычный текст") */
.tile span {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    z-index: 2;
    
    color: white;
    font-family: 'Montserrat', sans-serif;
    
    /* Делаем шрифт спокойным (Medium), как просили */
    font-weight: 500; 
    font-size: 16px;  
    text-transform: none; /* Обычный регистр (не капс) */
    
    line-height: 1.2;
    text-align: left;
    white-space: pre-wrap;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Тень для читаемости */
}

/* 2. СТИЛЬ ГЛАВНОГО МЕНЮ (Заголовки - "Тонкие") */
/* Этот стиль применится только если есть класс tile-main */
.tile-main span {
    /* Делаем в 2 раза тоньше (Regular) */
    font-weight: 400; 
    
    /* Чуть крупнее, так как это заголовок */
    font-size: 15px; 
    
    /* Заголовки капсом для стиля */
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

/* Описание режимов (Убиваем любую жирность от бота) */
.node-text,
.node-text * {
    font-weight: 400 !important; /* 400 - обычный, 300 - тонкий, 600 - полужирный */
    line-height: 1.6 !important; /* Межстрочный интервал */
    font-size: 14px !important;
    color: #333 !important;
}

/* Обертка самого блока (отступы) */
.node-text {
    padding: 0 15px !important; 
    margin-bottom: 25px !important; 
    text-align: left !important;
}


/* === НИЖНЕЕ МЕНЮ (NAVBAR) === */
.bottom-nav {
    flex-shrink: 0;
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
    padding: 8px 15px 25px 15px; /* Учет safe area iPhone */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.nav-btn {
    background: transparent;
    border: none;
    font-size: 10px;
    color: #999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    width: 60px;
    transition: color 0.2s ease;
    position: relative;
}

/* Иконки в нижнем меню (SVG или FontAwesome) */
.nav-btn svg {
    width: 24px;
    height: 24px;
    fill: #999;
    transition: fill 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy effect */
}

/* АКТИВНОЕ СОСТОЯНИЕ (Оранжевый) */
.nav-btn.active {
    color: var(--primary-orange);
}

.nav-btn.active svg {
    fill: var(--primary-orange);
    transform: scale(1.15); /* Чуть увеличиваем иконку */
}

/* АНИМАЦИЯ НАЖАТИЯ (Взрыв/Пульсация) */
.nav-btn:active svg {
    transform: scale(0.9); /* Сжимается при клике */
}

/* === ЭЛЕМЕНТЫ ИНТЕРФЕЙСА (Загрузка, Инпуты) === */
.upload-area {
    border: 2px dashed #ddd;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    margin: 15px 0;
    background: #fafafa;
}
.magic-button {
    background: linear-gradient(135deg, #FF512F 0%, #DD2476 100%);
    color: white;
    border: none;
    border-radius: 14px;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
}
.magic-button:active { transform: scale(0.98); }

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

/* Кнопка НАЗАД внутри сетки (делаем её на всю ширину) */
.tile-back {
    grid-column: span 2; /* Растянуть на 2 колонки */
    aspect-ratio: auto;
    height: 50px;
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tile-back::after { display: none; } /* Убрать затемнение */
.tile-back span {
    position: static;
    color: #333;
    text-align: center;
}

/* === НОВЫЕ СТИЛИ ДЛЯ ПРОФИЛЯ === */
.profile-header-card {
    display: flex; align-items: center; gap: 15px;
    background: #fff; padding: 20px; border-radius: 20px;
    margin: 15px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.avatar-circle {
    width: 50px; height: 50px; background: #eee; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.profile-details h2 { margin: 0; font-size: 18px; }
.profile-details p { margin: 0; color: #888; font-size: 12px; }

/* Оранжевая карточка баланса */
.balance-card {
    /* Черный фон */
    background: #000 !important; 
    color: white; 
    padding: 20px; 
    border-radius: 20px; 
    margin-bottom: 25px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.balance-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 15px; 
}

/* Сетка галереи */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery-item { aspect-ratio: 1; background-size: cover; border-radius: 10px; background-color: #ddd; }

/* Инфо карточки (support/earn) */
.info-card { background: #fff; padding: 15px; border-radius: 15px; margin-bottom: 10px; }
.earn-banner { background: linear-gradient(45deg, #FF9800, #FFC107); color:#fff; padding:20px; border-radius:15px; margin-bottom:15px; text-align:center; }
.ref-box { background:#f5f5f5; padding:10px; border-radius:8px; display:flex; justify-content:space-between; margin-top:5px; }
.action-btn { width:100%; padding:12px; background:#222; color:#fff; border:none; border-radius:10px; margin-top:10px; }

/* Фикс для высоты, чтобы нижний бар не перекрывал контент */
.scroll-content {
    padding-bottom: 100px !important; 
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}

/* Стили для профиля и карточек */
.profile-header-card {
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.balance-card button:active {
    transform: scale(0.98);
}

/* === ОБНОВЛЕННАЯ ШАПКА (FIXED) === */
.custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Центрирует лево и право по вертикали */
    padding: 10px 15px;
    background: #fff;
    min-height: 50px; /* Фиксируем высоту для стабильности */
    box-sizing: border-box;
}

/* 1. Логотип слева */
.header-left-logo {
    display: flex;
    align-items: center;
}

/* Длинный логотип */
#logo-full {
    height: 22px; 
    width: auto;
    object-fit: contain;
    object-position: left center;
    margin-top: 2px; /* Микро-калибровка по вертикали */
}

/* Квадратная иконка */
#logo-icon {
    height: 37px; /* Делаем саму картинку больше, чтобы "М" доросла до 22px */
    width: auto;
    object-fit: contain;
    object-position: left center;
    
    /* Сдвигаем влево и вверх, чтобы отрезать прозрачный "воздух" файла 5.png */
    margin-left: -9px;
    margin-top: -3px; 
}

/* 2. Скрываем (Аватар + Имя) */
.header-center-identity {
    display: none !important;
}

/* 3. Правая часть (Статус + Баланс) */
.header-right-stats {
    display: flex;
    align-items: center; /* Строгое выравнивание по центру */
    flex-direction: row-reverse; 
    gap: 6px; /* Оптимальный отступ между плашкой и цифрой */
}

.header-balance-box {
    display: flex !important;
    align-items: center; /* Центрируем число и молнию между собой */
    gap: 2px;
    height: 100%; /* Занимает всю высоту родителя для точности */
}

.header-balance-box .balance-val {
    font-size: 13px;
    font-weight: 700;
    line-height: 1; /* Схлопываем лишнее пространство вокруг цифр */
    display: inline-flex;
    align-items: center;
    /* Если после этого цифра все еще кажется чуть ниже, раскомментируй строку ниже: */
    transform: translateY(-1.5px); 
}

/* Иконка молнии в шапке */
.header-balance-box .lightning-icon {
    width: 14px;  /* Размер под стать тексту */
    height: 14px;
    display: block;
}

/* === СТИЛИ ДЛЯ СТАТУСА (ИДЕАЛЬНЫЙ РАЗМЕР) === */
.status-badge {
    display: inline-flex !important; /* Делаем гибким контейнером */
    align-items: center;      /* Центрируем текст внутри плашки по вертикали */
    justify-content: center;   /* Центрируем текст по горизонтали */
    
    /* Твои размеры */
    font-size: 10px !important; 
    padding: 0 8px !important; /* Убираем вертикальный padding, задаем только боковой */
    height: 18px;             /* Фиксируем высоту, чтобы она не зависела от шрифта */
    border-radius: 6px;
    line-height: 1;
    margin: 0 !important;
    box-sizing: border-box;
}
.status-badge:active {
    transform: scale(0.95);
}

/* FREE */
.status-free {
    background: #f0f0f0;
    color: #999;
    font-weight: 700;
}

/* PRO */
.status-pro {
    font-weight: 900; 
    font-style: normal;
    background: none;
    border: none;
    background: linear-gradient(90deg, #FF9800, #FF5722, #FF9800);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 2px rgba(255, 87, 34, 0.4));
    animation: shineProText 3s linear infinite;
}

@keyframes shineProText {
    to { background-position: 200% center; }
}

@keyframes pulseLightning {
    0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 152, 0, 0.4)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 4px rgba(255, 87, 34, 0.6)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 152, 0, 0.4)); }
}

.hidden { display: none !important; }

/* === ГЛОБАЛЬНЫЙ ПРЕЛОАДЕР === */
#global-loader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #ffffff; /* Белый фон перекрывает всё */
    z-index: 9999; /* Поверх всего */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 0.5s ease-out; /* Плавное исчезновение */
}

#global-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Круговая анимация (Спиннер) */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 87, 34, 0.2); /* Светло-оранжевый след */
    border-top: 5px solid #FF5722; /* Ярко-оранжевый верх */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

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

/* Модификатор для уменьшения спиннера (для кнопки) */
.spinner.small {
    width: 20px;     /* Маленький размер */
    height: 20px;
    border-width: 3px; /* Тонкие границы */
    margin: 0;       /* Убираем отступы если есть */
    /* Важно: делаем цвет верхушки черным, чтобы было видно на желтой кнопке */
    border-top-color: #000; 
}

/* Для результата генерации используем стандартный размер, 
   но можно добавить отступы для красоты */
.result-loader-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    width: 100%;
}

.loader-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    font-weight: 600;
    font-size: 16px;
    animation: pulse 1.5s infinite ease-in-out;
}

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

/* === БЕЙДЖИ СТАТУСА (Убираем лишние отступы) === */
.status-badge {
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    transition: transform 0.1s;
    margin: 0; /* Убираем внешние отступы, теперь всё регулирует gap родителя */
    align-self: center; /* Центрируем по вертикали относительно цифр */
}

.status-badge:active {
    transform: scale(0.95);
}

/* FREE - Серая плашка */
.status-free {
    /* == ГЕОМЕТРИЯ КАК У КНОПКИ == */
    display: block;        /* Чтобы работал width */
    width: 100%;           /* Растягиваем на всю ширину */
    padding: 6px 0;        /* Высота (отступы внутри) как у кнопки */
    border-radius: 10px;   /* Скругление углов как у кнопки */
    box-sizing: border-box; /* Чтобы отступы не ломали ширину */
    
    /* == ЦВЕТА И ФОН == */
    background: #ffffff;   /* Белый фон (или #f0f0f0, как у кнопки сейчас) */
    color: #999;           /* Серый цвет текста */
    
    /* == ТЕКСТ == */
    font-size: 12px;       /* Размер шрифта как у кнопки */
    font-weight: 700;      /* Жирность */
    text-align: center;    /* Текст по центру */
    text-transform: uppercase;
    
    /* == ПОЗИЦИЯ == */
    margin-top: auto;      /* Прижимаем к низу карточки */
}

/* PRO - СТРОГИЙ ОРАНЖЕВЫЙ (БЕЗ КУРСИВА) */
.status-pro {
    font-size: 16px; /* Размер под стать балансу */
    font-weight: 900; /* Жирный */
    font-style: normal; /* УБРАЛИ КУРСИВ */
    
    background: none;
    border: none;
    padding: 0;
    
    /* Огненный градиент */
    background: linear-gradient(90deg, #FF9800, #FF5722, #FF9800);
    background-size: 200% auto;
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    
    /* Свечение */
    filter: drop-shadow(0 0 5px rgba(255, 87, 34, 0.5));
    
    /* Анимация переливания */
    animation: shineProText 3s linear infinite;
}

@keyframes shineProText {
    to { background-position: 200% center; }
}

/* === ДОБАВИТЬ В КОНЕЦ ФАЙЛА === */

/* 1. Чтобы цифры баланса в черной карточке стали белыми */
.balance-card .balance-val {
    color: #fff !important; 
    font-size: 24px;
}

/* 2. Стиль для большой аватарки в профиле */
.profile-big-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f0f0f0;
    background: #eee;
}

/* 3. Стиль для логотипа на экране загрузки (вместо текста) */
.loader-logo {
    width: 160px; 
    height: auto;
    /* Увеличь это значение, чтобы опустить лого ниже */
    margin-top: 30px; 
    margin-bottom: 20px;
    animation: pulse 1.5s infinite ease-in-out;
}

/* === ОБНОВЛЕННАЯ ОБЛАСТЬ КОНТЕНТА С АНИМАЦИЕЙ === */
.screen {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    padding-bottom: 20px;
    /* Скрываем скроллбар для красоты */
    scrollbar-width: none; 
}

.screen::-webkit-scrollbar { 
    display: none; 
}

/* Когда экран становится активным — проигрываем анимацию */
.screen.active {
    display: block;
    animation: screenFadeUp 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* Сама анимация (появление снизу + прозрачность) */
@keyframes screenFadeUp {
    0% {
        opacity: 0;
        transform: translateY(15px); /* Начинаем чуть ниже */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Встаем на место */
    }
}

/* === ДИНАМИЧНАЯ КНОПКА ГЕНЕРАЦИИ === */
.magic-button {
    /* Добавляем плавность переходов */
    transition: all 0.3s ease;
    background-size: 200% auto; /* Нужно для анимации градиента */
}

/* Этот класс мы будем добавлять через JS при нажатии */
.magic-button.loading {
    /* ГРАДИЕНТ: Оранжевый (#FF5722) -> Желтый (#FFC107) -> Оранжевый */
    background-image: linear-gradient(90deg, #FF5722 0%, #FFC107 50%, #FF5722 100%);
    
    /* Увеличиваем фон, чтобы градиент плавно "ехал" */
    background-size: 200% auto;
    
    /* Анимация: 2 секунды (вместо 0.8), линейная (равномерная), бесконечная */
    animation: gradientSmooth 2s linear infinite;
    
    opacity: 1 !important;
    cursor: wait;
    transform: scale(0.98);
    color: #fff; /* Текст белый, чтобы читался на желтом */
    text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Легкая тень для текста */
}

/* Новая плавная анимация */
@keyframes gradientSmooth {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center; /* Полный круг для идеальной склейки */
    }
}

/* === ФИКС КАРТИНКИ РЕЗУЛЬТАТА (Больше места) === */
.node-image {
    width: 100%;
    height: auto;       /* Высота подстроится под контент */
    max-height: none !important; /* ГЛАВНОЕ: Убираем лимит в 250px */
    object-fit: contain;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* Красивая тень */
}

/* Сетка для загрузки фото */
.upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 плитки в ряд */
    gap: 10px;
    margin: 20px 0;
}

/* Сама плитка (квадратная) */
.upload-tile {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f5f5f5;
    border: 2px dashed #ccc; /* Пунктирная рамка для пустой */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
}

.upload-tile:active {
    transform: scale(0.95);
}

/* Стиль для заполненной плитки */
.upload-tile.filled {
    border: 2px solid var(--primary-orange); /* Оранжевая рамка */
    background-color: #fff;
    border-style: solid;
}

.upload-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Иконка плюсика */
.upload-icon {
    font-size: 32px;
    color: #aaa;
    line-height: 1;
}

/* Кнопка удаления (крестик) */
.delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,0.6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 10;
}

/* --- 1. Желтая кнопка с анимацией --- */
@keyframes gold-pulse {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#main-btn {
    /* Желто-оранжевый градиент */
    background: linear-gradient(90deg, #FFC107, #FF9800, #FFC107);
    background-size: 200% 200%;
    color: #000; /* Черный текст */
    font-weight: 800; /* Жирный текст */
    border: none;
    transition: all 0.3s ease;
    animation: gold-pulse 3s ease infinite; /* Переливание */
    
    /* Центрирование спиннера внутри */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#main-btn:active {
    transform: scale(0.98);
}

#main-btn.loading {
    opacity: 0.8;
    pointer-events: none; /* Блокируем нажатия */
    font-size: 16px;
}

/* --- 2. Адаптация спиннера --- */
/* Маленький спиннер для кнопки (использует твой класс .spinner) */
.spinner.small {
    width: 20px;
    height: 20px;
    border-width: 3px;
    margin: 0; 
    border-top-color: #000; /* Черная верхушка для желтой кнопки */
}

/* Обертка для большого спиннера при загрузке результата */
.result-loader-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    width: 100%;
}

/* =========================================
   МОДАЛЬНОЕ ОКНО (LIGHTBOX) - КРАСИВОЕ
========================================= */
#image-modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    z-index: 9999; /* Поверх всего */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Полупрозрачный черный фон */
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px); /* Эффект размытия фона (дорогой вид) */
    
    /* Для центрирования */
    align-items: center;
    justify-content: center;
    
    /* Анимация появления фона */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Класс, который добавляет JS для показа */
#image-modal.show {
    display: flex;
    flex-direction: column; /* ⬅️ КРИТИЧЕСКИ ВАЖНО: Выстраивает элементы сверху вниз */
    justify-content: center; /* Центрируем по вертикали */
    align-items: center;     /* Центрируем по горизонтали */
    opacity: 1;
}

/* Само изображение внутри модалки */
#modal-img {
    position: relative;
    z-index: 10; /* Картинка поверх фона */
    max-width: 90%;
    max-height: 85vh; 
    object-fit: contain;
    border-radius: 16px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

/* Состояние изображения при открытии */
#image-modal.show #modal-img {
    transform: scale(1);
}

/* Зона клика для закрытия (теперь она ловит клики по фону) */
.modal-close-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Ловит клики на фоне */
    cursor: pointer;
}

/* ==============================================
   НОВЫЙ ДИЗАЙН ПРОФИЛЯ (GRID ALIGNMENT)
============================================== */

.profile-widgets-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 15px 0;
}

/* ОБЩИЙ СТИЛЬ ДЛЯ ОБЕИХ КАРТОЧЕК */
.profile-info-card,
.profile-balance-card {
    background: #E0E0E0;
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    margin: 0;
    
    /* == МАГИЯ ВЫРАВНИВАНИЯ == */
    display: grid;
    /* Три строки: 
       1. Верх (50px) - Аватарка или "БАЛАНС"
       2. Середина (1fr) - Имя или Цифры (растягивается)
       3. Низ (auto) - Кнопка или Статус
    */
    grid-template-rows: 50px 1fr auto; 
    justify-items: center; /* Центруем все по горизонтали */
    align-items: center;   /* Центруем все по вертикали */
    text-align: center;
    height: 100%;          /* Растягиваем на всю высоту родителя */
    box-sizing: border-box;
}

/* === 1. ВЕРХНИЙ РЯД (ВЫСОТА 50px) === */

/* Аватарка (Слева) */
.profile-info-card .profile-big-avatar {
    width: 44px;   /* Чуть меньше 50px, чтобы влезла */
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin: 0;     /* Убираем отступы, грид сам центрует */
}

/* Надпись "БАЛАНС" (Справа) */
.profile-balance-card > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; /* Занимает все 50px высоты ячейки */

    padding-top: 1px; /* Увеличивай цифру, чтобы опустить слово ниже */
    
    /* СТИЛИЗАЦИЯ ТЕКСТА */
    font-size: 12px !important;
    font-weight: 600;
    color: #888 !important; /* Серый, чтобы не спорил с цифрой */
    text-transform: uppercase;
    letter-spacing: 1.5px;  /* Разрядка букв для стиля */
}

/* === 2. СРЕДНИЙ РЯД (ИМЯ И ЦИФРЫ) === */

/* Имя пользователя */
.profile-info-card h2,
#profile-name {
    margin: 0;
    padding: 5px 0; /* Небольшой воздух */
    font-size: 16px;
    font-weight: 700;
    color: #000;
    align-self: start; /* Прижимаем к верху средней ячейки */
}

/* Цифры баланса */
.profile-balance-card .balance-val {
    margin: 0;
    padding: 5px 0;
    font-size: 16px !important;
    font-weight: 700;
    color: #000 !important;
    line-height: 1;
    align-self: start; /* Прижимаем к верху, ровно как имя */
    
    display: flex;
    align-items: center;
    gap: 4px;
}

/* === 3. НИЖНИЙ РЯД (КНОПКИ) === */

/* Статус FREE */
.status-free {
    width: 100%;
    padding: 8px 0;
    background: #ffffff;
    color: #999;
    border-radius: 12px;
    
    /* ТЕКСТ */
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 800; /* Жирность 800 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    margin-top: 10px; /* Отступ от имени */
}

/* Кнопка ПОПОЛНИТЬ */
.profile-balance-card button {
    width: 100%;
    padding: 7px 0;
    background: #ffffff; /* Белый фон, как у FREE */
    color: #999;         /* Текст, как у FREE */
    border-radius: 12px;
    border: none;
    cursor: pointer;
    
    /* ТЕКСТ ОДИН В ОДИН КАК У FREE */
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 750; /* Жирность 800 (такая же) */
    text-transform: uppercase; /* Тоже капсом для симметрии */
    letter-spacing: 0.1px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    
    margin-top: 10px; /* Отступ от цифр */
}

/* Убираем лишнее, если осталось */
.profile-info-card #profile-status-text { margin: 0; width: 100%; }

/* === НОВЫЕ СТИЛИ (ПРОМО, МОДАЛКИ, ЦЕНЫ) === */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 10000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-card { background: white; padding: 25px; border-radius: 20px; width: 85%; max-width: 320px; text-align: center; transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.modal-overlay.active .modal-card { transform: scale(1); }

.profile-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 25px; }
.action-tile { background: #fff; padding: 15px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 600; font-size: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); transition: transform 0.1s; }
.action-tile:active { transform: scale(0.98); }
.cancel-sub { color: #ff3b30; }

.modern-input { width: 100%; padding: 12px; border: 2px solid #eee; border-radius: 12px; font-size: 16px; outline: none; text-align: center; font-weight: bold; margin-top: 10px; box-sizing: border-box; }
.ref-link-box { background: #f4f4f4; padding: 12px; border-radius: 10px; font-size: 12px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border: 1px dashed #ccc; }

.timer-header { background: #000; color: #fff; padding: 10px; border-radius: 10px; margin: 10px; text-align: center; animation: fadeIn 0.5s; }
.timer-val { font-family: monospace; font-size: 18px; font-weight: bold; color: #FF5722; margin-top: 4px; }

/* ЦЕННИКИ */
.price-box { display: flex; flex-direction: column; align-items: flex-end; }
.old-price { font-size: 12px; text-decoration: line-through; color: #999; margin-bottom: -2px; }
.new-price { font-weight: bold; font-size: 16px; color: #000; }
.new-price.discounted { color: #2ecc71; /* Зеленый цвет для новой цены */ }

/* ==============================================
   НОВЫЙ ДИЗАЙН: КНОПКИ ПРОФИЛЯ
============================================== */
.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.action-tile {
    width: 100%;             /* Растягиваем на всю ширину */
    box-sizing: border-box;  /* Чтобы отступы не ломали ширину */
    
    background: #FFFFFF;
    padding: 18px 20px;
    border-radius: 16px;
    
    /* Добавляем серую рамку */
    border: 1px solid #E0E0E0; 
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: transform 0.1s, background-color 0.1s;
    
    margin-bottom: 0; /* Отступы регулирует родитель */
}

.action-tile:active {
    transform: scale(0.98);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.tile-icon { font-size: 18px; margin-right: 12px; }
.tile-text { flex: 1; font-weight: 600; font-size: 14px; color: #222; }
.tile-arrow { color: #ccc; font-size: 18px; font-weight: 300; }

.action-tile.cancel-sub {
    border: 1px solid rgba(255, 59, 48, 0.1);
}
.action-tile.cancel-sub .tile-text, 
.action-tile.cancel-sub .tile-icon { color: #ff3b30; }


/* ==============================================
   НОВЫЙ ДИЗАЙН: МАГАЗИН (TARIFFS)
============================================== */

/* Карточка тарифа */
.tariff-card {
    background: #FFFFFF;
    
    /* Добавляем серую рамку */
    border: 1px solid #E0E0E0; 
    
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 12px;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.1s;
    cursor: pointer;
}

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

/* Левая часть (Текст) */
.tariff-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tariff-title {
    font-weight: 700;
    font-size: 15px;
    color: #000;
}

.tariff-desc {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}

/* Правая часть (Цена) */
.tariff-price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* Оранжевая кнопка цены (ВСЕГДА такая) */
.price-tag {
    background: #FF5722;
    color: #fff;
    padding: 8px 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    min-width: 60px;
    box-shadow: 0 4px 10px rgba(255, 87, 34, 0.25);
}

/* Старая цена (зачеркнутая над кнопкой) */
.old-price-label {
    font-size: 11px;
    color: #999;
    text-decoration: line-through;
    margin-right: 2px;
}

/* === Добавить в конец style.css === */

/* Селектор ракурса */
.pose-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    padding-left: 5px;
}

.pose-selector {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
}

.pose-btn {
    flex: 1;
    padding: 12px 0;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    background: #FFFFFF;
    color: #888;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* Активное состояние - Стильный черный */
.pose-btn.active {
    background: #000000;
    color: #FFFFFF;
    border-color: #000000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

.pose-btn:active {
    transform: scale(0.98);
}

/* Принудительное центрирование кнопки в модалке */
#modal-download-btn {
    margin: 20px auto 0 auto !important; 
    display: block !important;
    width: 80% !important;       /* Ширина относительно экрана */
    max-width: 300px !important; /* Не даст кнопке стать огромной на ПК */
    z-index: 10001;
    flex-shrink: 0;              /* Запрещает сплющивать кнопку */
}

/* === 1. ОВАЛЬНЫЙ ТАЙМЕР ДНЕЙ === */
.timer-oval {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 8px; /* Фиксированная высота для совпадения с иконками */
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 700;
    color: #666;
    background: transparent;
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* Красная окантовка, если осталось 3 или меньше дней */
.timer-oval.danger {
    border-color: #ff3b30 !important;
    color: #ff3b30 !important;
    background: rgba(255, 59, 48, 0.05);
}

/* Компоновка баланса и таймера в профиле */
.profile-balance-card-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: start; 
    margin-top: -5px; /* Двигаем цифры выше к слову "Баланс" */
}

/* === 2. НОВАЯ КНОПКА ЗАКРЫТИЯ ФОТО === */
.modal-close-btn {
    position: absolute;
    top: -50px; /* Спрятана за пределами экрана */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.2); /* Серая полупрозрачная */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: 6px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    z-index: 10001;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Пружинящая анимация */
    border: 1px solid rgba(255,255,255,0.2);
}

/* Когда модалка открыта — кнопка аккуратно выплывает */
#image-modal.show .modal-close-btn {
    top: 20px; 
}

/* === КРАСНАЯ КНОПКА ОТМЕНЫ ПОДПИСКИ === */
.profile-action-btn.danger-btn {
    border-color: #ff3b30 !important;
    color: #ff3b30 !important;
}

/* Эффект при нажатии (легкий красный фон вместо серого) */
.profile-action-btn.danger-btn:active {
    background-color: rgba(255, 59, 48, 0.08) !important;
    transform: scale(0.98); /* Твоя стандартная анимация сжатия */
}

/* ==============================================
   СЕТКА ФОРМАТОВ (ПУЛЕНЕПРОБИВАЕМАЯ)
============================================== */
.format-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Жестко фиксируем высоты трех строк: 
       1-я строка (110px), 2-я (80px), 3-я (100px) */
    grid-template-rows: 110px 80px 100px; 
    gap: 8px;
}

.format-btn {
    background: #f5f5f5;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    user-select: none;
    width: 100%;
    height: 100%; /* По умолчанию тянется на всю ячейку */
    box-sizing: border-box;
}

.format-btn small {
    font-size: 10px;
    font-weight: 500;
    color: #888;
    margin-top: 4px;
}

/* === ИНДИВИДУАЛЬНЫЕ НАСТРОЙКИ ПЛИТОК === */

/* 1. Квадрат (1x1) - жестко обрезаем высоту и прижимаем вверх, чтобы оставить пустоту снизу */
[id="fmt-1:1"] {
    height: 95px !important; 
    align-self: start;
}

/* 2. Сториз (9:16) - тянем на 2 строки вниз (80px + 100px + отступ) */
.format-btn.tall {
    grid-row: span 2;
}

/* 3. Широкие (16:9 и 3:2) - тянем на 2 колонки вбок */
.format-btn.wide {
    grid-column: span 2;
}

/* ============================================== */

/* Анимация и активное состояние */
.format-btn:active {
    transform: scale(0.92);
}

.format-btn.active {
    background: #FF5722;
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3);
}

.format-btn.active small {
    color: rgba(255, 255, 255, 0.8);
}

/* ==============================================
   ТРОЙНАЯ СЕТКА (ТОВАР + ОБРАЗ + ФОН)
============================================== */
.custom-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Теперь 3 ровные колонки */
    gap: 8px; /* Чуть уменьшили отступ, чтобы влезло на мобилках */
    margin: 20px 0;
}

.custom-upload-tile {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f5f5f5;
    border: 2px dashed #ccc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
}

.custom-upload-tile:active { transform: scale(0.95); }

.custom-upload-tile.filled {
    border: 2px solid #FF5722;
    border-style: solid;
    background-color: #fff;
}

.custom-upload-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 5;
}

/* === НАДПИСИ ПО ГРАНЯМ === */
.tile-edge {
    position: absolute;
    font-size: 9px; /* Уменьшили шрифт, чтобы красиво влезло в 3 колонки */
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #aaa;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 2;
}

.tile-edge.text-top {
    top: 8px;
    left: 0;
    right: 0;
    text-align: center;
}

/* Новая позиция: ПРАВАЯ ГРАНЬ */
.tile-edge.text-right {
    right: 5px;
    top: 0;
    bottom: 0;
    /* Текст сверху вниз, вершины букв смотрят влево */
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-upload-tile .upload-icon {
    font-size: 28px;
    color: #aaa;
    font-weight: 300;
}

.custom-upload-tile.filled .tile-edge,
.custom-upload-tile.filled .upload-icon { display: none; }

/* === КАРТОЧКИ В МОДАЛКАХ (С подписями) === */
.style-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.1s;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.style-card:active { transform: scale(0.95); }
.style-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

/* Подписи стали красивее и заметнее */
.style-card .style-label { 
    padding: 8px 4px; 
    font-size: 10px; /* Чуть меньше шрифт */
    font-weight: 700; 
    text-align: center; 
    color: #333; 
    border-top: 1px solid #f0f0f0;
    min-height: 28px; /* Запас для текста в две строчки */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

/* ========================================================
   ИДЕАЛЬНАЯ СИНХРОНИЗАЦИЯ FREE И PRO В ЛЕВОМ КВАДРАТЕ 
======================================================== */

/* 1. Общая форма, размер и положение для ОБОИХ статусов */
.profile-info-card #profile-status-text {
    display: block !important;
    width: 100% !important;
    padding: 7px 0 !important; /* Высота плашки */
    margin: 0 !important;
    margin-top: 4px !important; /* Жестко фиксируем отступ, чтобы не прыгали */
    border-radius: 12px !important; /* Одинаковое скругление */
    background: #ffffff !important; /* Одинаковая белая рамка */
    
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important; /* Тот самый размер текста как у FREE */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* 2. Цвет текста, когда у юзера FREE */
.profile-info-card #profile-status-text.status-free {
    color: #999 !important;
    -webkit-text-fill-color: #999 !important;
}

/* 3. Цвет текста, когда у юзера PRO */
.profile-info-card #profile-status-text.status-pro {
    color: #FF5722 !important; 
    -webkit-text-fill-color: #FF5722 !important;
    
    /* Убиваем старые анимации и градиенты, чтобы текст был четким */
    background-image: none !important;
    filter: none !important;
    animation: none !important;
}

/* ==============================================
   КРАСИВОЕ ПОЛЕ ВВОДА ДЛЯ СВОБОДНОЙ ГЕНЕРАЦИИ
============================================== */
.modern-textarea {
    width: 100%;
    height: 140px; /* Достаточно места для текста */
    padding: 16px;
    
    /* Внешний вид как у твоих action-tiles */
    background-color: #FAFAFA;
    border: 2px solid #E0E0E0;
    border-radius: 16px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    
    /* Типографика */
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.5;
    
    /* Убираем дефолтное уродство браузера */
    outline: none;
    resize: none; /* Запрещаем юзеру растягивать поле и ломать верстку */
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Красивая анимация при клике (фокусе) */
.modern-textarea:focus {
    background-color: #FFFFFF;
    border-color: #FF5722; /* Твой фирменный оранжевый */
    box-shadow: 0 0 0 4px rgba(255, 87, 34, 0.1);
}

/* Цвет плейсхолдера (подсказки) */
.modern-textarea::placeholder {
    color: #aaa;
    font-weight: 400;
}

/* ПРИНУДИТЕЛЬНО СБРАСЫВАЕМ ЛЮБУЮ ЖИРНОСТЬ В ОПИСАНИЯХ */
div.node-text, 
div.node-text *, 
.node-text b, 
.node-text strong, 
.node-text h1, 
.node-text h2, 
.node-text h3 {
    font-weight: 100 !important; /* 400 - это тонкий текст. Можно поставить 300, будет еще тоньше */
    font-family: 'Montserrat', sans-serif !important;
}