/* Убираем синюю рамку фокуса */
*:focus {
    outline: none;
}

/* === ШАПКА И ЛОГОТИП === */
.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;
}

.desktop-fullscreen-btn {
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    color: #333333;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.1s ease, background-color 0.2s ease, color 0.2s ease;
}

.desktop-fullscreen-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
}

.desktop-fullscreen-btn.visible {
    display: inline-flex;
}

.desktop-fullscreen-btn:active {
    transform: scale(0.98);
    background: #FF5722;
    color: #FFFFFF;
}

:root {
    --primary-orange: #FF5722; /* Насыщенный оранжевый */
    --bg-color: #ffffff;
    --tile-bg: #f0f0f0;
    --text-black: #000000;
    --desktop-shell-max-width: 700px;
    --upload-stack-gap: 12px;
}

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

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Жестко блокируем скролл всей страницы */
}

body {
    background-color: var(--bg-color);
    font-family: 'Montserrat', sans-serif;
    color: var(--text-black);

    /* === ИДЕАЛЬНАЯ ВЫСОТА === */
    height: 100vh;
    height: 100dvh;
    height: var(--app-vh, 100dvh);
    height: var(--tg-viewport-height, var(--app-vh, 100dvh));

    display: flex;
    flex-direction: column;
    
    /* Запрет выделения текста (чтобы интерфейс ощущался как нативное приложение) */
    -webkit-user-select: none;
    user-select: none;
}

/* Разрешаем выделение текста только там, где юзер должен печатать */
input, textarea {
    -webkit-user-select: auto !important;
    user-select: auto !important;
}

/* === ОБЛАСТЬ КОНТЕНТА === */
.screen {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: none; 
    /* Заставляем рендерить это на GPU */
    will-change: transform, opacity;
    transform: translateZ(0); 
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS/Mac */
}

.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;
}

/* Убираем затемнение у плиток виртуальных моделей */
#gallery-container .tile::after {
    display: 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;
    height: 100dvh;
    height: var(--app-vh, 100dvh);
    height: var(--tg-viewport-height, var(--app-vh, 100dvh));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

/* --- НОВЫЙ БЛОК: Заголовки (Ваш платный шрифт) --- */
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;
    margin-left: 18px;
}

.bottom-nav-page-header h3 {
    margin-left: 0;
    font-weight: 400;
}

.bottom-nav-page-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.bottom-nav-info-content {
    padding: 0 10px !important;
    box-sizing: border-box;
}

.bottom-nav-info-content .node-text,
.bottom-nav-info-content .action-btn-orange {
    width: 100%;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.bottom-nav-info-content .back-btn-top {
    width: auto;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

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

/* === ШРИФТ НА ПЛИТКАХ (КАК НА МАКЕТЕ) === */
.tile span {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 10px;
    z-index: 2;
    
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;      /* Обычная толщина */
    font-size: 19px;       /* Крупный текст */
    text-transform: none;  /* Без капса */
    line-height: 1.1;
    letter-spacing: 0.2px;
    
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}


/* Скрываем заголовки внутри описаний, чтобы не ломали верстку */
.node-text h3 {
    display: none;
}

/* 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.45 !important; /* Межстрочный интервал */
    font-size: 14px !important;
    color: #333 !important;
}

/* 1. Верхнее описание (как на скрине: серая плашка) */
.node-text {
    background-color: #F4F4F4; /* Светло-серый фон */
    border-radius: 16px;       /* Скругление */
    padding: 15px !important;  /* Внутренний отступ */
    margin: 0 0 12px 0 !important; /* Отступы снаружи */
    
    color: #4b4b4b !important; 
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important; 
    font-weight: 400 !important; 
    line-height: 1.42 !important; /* Чуть больше воздуха между строк */
    text-align: left !important;
    border: none !important
}

/* === ЕДИНЫЙ СТИЛЬ ДЛЯ ТЕКСТОВЫХ БЛОКОВ (СЕРАЯ ПЛАШКА) === */
.node-text,
.tile-description {
    background-color: #F4F4F4; /* Светло-серый фон */
    border-radius: 16px;       /* Скругление */
    padding: 15px;             /* Внутренние отступы */
    margin-bottom: 10px;       /* Отступ снизу */
    
    color: #4b4b4b !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important; /* Размер шрифта */
    font-weight: 400 !important;
    line-height: 1.42 !important;
    text-align: left !important;
    border: none !important;
    
    /* Плавность для анимации цвета */
    transition: background-color 0.2s, color 0.2s;
}

/* Специфичный отступ для верхнего текста (инструкции на странице генерации) */
.node-text {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 14px !important; /* Чуть крупнее */
}

/* Любые серые текстовые плашки после кнопки "Назад" должны начинаться с ней по одной вертикали */
.back-btn-top ~ .node-text,
.back-btn-top ~ .page-title-box,
.back-btn-top ~ .page-info-box {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.back-btn-top ~ .page-title-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* === ОПИСАНИЕ ПОД ПЛИТКОЙ (КНОПКА) === */
.tile-description {
    margin-top: 8px;
    font-size: 12px !important;
    cursor: pointer; /* Курсор руки */
    /* Чтобы текст не выделялся при клике */
    user-select: none; 
    -webkit-tap-highlight-color: transparent;
}

/* Мгновенное включение оранжевого, плавное затухание */
.tile-description, .action-tile, .tariff-card, .format-btn {
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease !important;
}

/* ЭФФЕКТ НАЖАТИЯ (ОРАНЖЕВЫЙ) */
.tile-description:active, 
.tile-description.clicked {
    background-color: #ea5e28 !important; 
    color: #ffffff !important; 
    transition: none !important; /* Мгновенно загорается */
}

/* Обертка плитки */
.tile-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* === НИЖНЕЕ МЕНЮ (NAVBAR) === */
.bottom-nav {
    /* === ЖЕСТКАЯ ФИКСАЦИЯ === */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 9999 !important; /* Поверх абсолютно всего */
    
    /* Твои родные стили дизайна */
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
    padding: 8px 15px 25px 15px; /* Учет safe area iPhone */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (min-width: 700px) {
    body.desktop-shell-active {
        background: linear-gradient(180deg, #f8ebe4 0%, #f1dfd5 100%);
    }

    body.desktop-shell-active::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(circle at 14% 18%, rgba(234, 94, 40, 0.34) 0%, rgba(234, 94, 40, 0.16) 20%, rgba(234, 94, 40, 0) 42%),
            radial-gradient(circle at 84% 16%, rgba(234, 94, 40, 0.28) 0%, rgba(234, 94, 40, 0.12) 18%, rgba(234, 94, 40, 0) 38%),
            radial-gradient(circle at 18% 84%, rgba(234, 94, 40, 0.24) 0%, rgba(234, 94, 40, 0.10) 18%, rgba(234, 94, 40, 0) 40%),
            radial-gradient(circle at 86% 78%, rgba(188, 69, 24, 0.22) 0%, rgba(188, 69, 24, 0.08) 16%, rgba(188, 69, 24, 0) 34%),
            radial-gradient(circle at 50% 50%, rgba(234, 94, 40, 0.08) 0%, rgba(234, 94, 40, 0) 52%),
            linear-gradient(180deg, rgba(255, 250, 247, 0.56) 0%, rgba(255, 250, 247, 0.12) 100%);
        opacity: 1;
        animation: desktopShellAmbient 22s ease-in-out infinite alternate;
    }

    body.desktop-shell-active .screen {
        width: min(100%, var(--desktop-shell-max-width));
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        background: #ffffff;
        border-left: 1px solid rgba(234, 94, 40, 0.12);
        border-right: 1px solid rgba(234, 94, 40, 0.12);
    }

    body.desktop-shell-active .screen.active {
        box-shadow: 0 0 0 1px rgba(234, 94, 40, 0.06), 0 18px 48px rgba(122, 51, 21, 0.12);
    }

    body.desktop-shell-active .bottom-nav {
        left: 50% !important;
        transform: translateX(-50%);
        width: min(100%, var(--desktop-shell-max-width)) !important;
        background: #ffffff;
        border-left: 1px solid rgba(234, 94, 40, 0.12);
        border-right: 1px solid rgba(234, 94, 40, 0.12);
        box-shadow: 0 -10px 28px rgba(122, 51, 21, 0.10);
    }
}

@keyframes desktopShellAmbient {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    50% {
        transform: scale(1.035) translate3d(10px, -8px, 0);
    }
    100% {
        transform: scale(1.055) translate3d(-12px, 10px, 0);
    }
}

.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 {
    position: relative;
    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;
    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;
    flex: 1; /* Растягиваем контейнер */
    min-width: 0; /* Разрешаем сжиматься */
}

/* Квадратная иконка */
#logo-full, #logo-icon {
    height: auto;          
    max-height: 29px;      
    width: auto;           
    max-width: 100%;       /* Адаптивность */
    object-fit: contain;   
    display: block;
    margin-left: -1px;
    margin-top: 1px;
}

/* 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: calc(75px + env(safe-area-inset-bottom, 0px));
    /* Скрываем скроллбар для красоты */
    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; /* Нужно для анимации градиента */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.gen-btn-cost {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
}
.gen-btn-cost b { line-height: 1; }

/* Этот класс мы будем добавлять через 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-workspace {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    min-width: 0;
}

.upload-workspace-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--upload-stack-gap);
    min-width: 0;
    transition:
        filter 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.upload-control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-text-block {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.upload-controls-block {
    display: flex;
    flex-direction: column;
    gap: var(--upload-stack-gap);
    overflow-x: hidden;
    min-width: 0;
}

.upload-workspace.is-generating .upload-workspace-content {
    filter: blur(1.2px) grayscale(0.32) saturate(0.56);
    opacity: 0.82;
    transform: scale(0.997);
    pointer-events: none;
    user-select: none;
}

.upload-generation-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(248, 248, 248, 0.02) 0%, rgba(232, 232, 232, 0.18) 100%);
    backdrop-filter: blur(0px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        backdrop-filter 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.upload-workspace.is-generating .upload-generation-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: blur(0.75px);
    background:
        linear-gradient(180deg, rgba(247, 247, 247, 0.06) 0%, rgba(230, 230, 230, 0.22) 100%);
}

.upload-generation-loader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(248, 248, 248, 0.72);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}

.upload-generation-label {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(10px, 3vw, 14px);
    font-weight: 400;
    letter-spacing: 0.2px;
    color: #6f6f6f;
    text-transform: uppercase;
}

.upload-folding-cube {
    width: 42px;
    height: 42px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
}

.upload-folding-cube .cube {
    width: 100%;
    height: 100%;
    position: relative;
}

.upload-folding-cube .cube::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: #FF5722;
    box-shadow: 0 3px 10px rgba(255, 87, 34, 0.28);
    transform-origin: center;
    animation: uploadFoldCube 1.8s infinite ease-in-out both;
}

.upload-folding-cube .cube2::before {
    animation-delay: 0.15s;
}

.upload-folding-cube .cube3::before {
    animation-delay: 0.3s;
}

.upload-folding-cube .cube4::before {
    animation-delay: 0.45s;
}

@keyframes uploadFoldCube {
    0%, 10% {
        transform: perspective(120px) rotateX(-180deg);
        opacity: 0;
    }
    25%, 75% {
        transform: perspective(120px) rotateX(0deg);
        opacity: 1;
    }
    90%, 100% {
        transform: perspective(120px) rotateY(180deg);
        opacity: 0;
    }
}

.upload-action-wrap {
    padding: 0;
    margin-top: var(--upload-stack-gap);
}

.upload-grid {
    display: grid;
    /* БЫЛО: grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: 1fr 1fr; /* СТАЛО: 2 колонки (Крупные) */
    gap: 10px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Сама плитка (квадратная) */
.upload-tile {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    min-width: 0;
    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);
    -webkit-backdrop-filter: blur(5px);
    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: flex-start;
    align-items: center;     /* Центрируем по горизонтали */
    box-sizing: border-box;
    padding: 18px 0 24px;
    opacity: 1;
}

#modal-image-toolbar {
    position: relative;
    z-index: 10001;
    width: min(90%, 940px);
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 0 0 12px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

#image-modal.show #modal-image-toolbar {
    opacity: 1;
    transform: translateY(0);
}

#modal-image-stage {
    position: relative;
    z-index: 10;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pan-y;
}

#modal-image-pan {
    --modal-shift-x: 0px;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    transform: translate3d(var(--modal-shift-x), 0, 0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

/* Само изображение внутри модалки */
#modal-img {
    --modal-img-scale: 0.95;
    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(var(--modal-img-scale));
    transform-origin: center center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
    will-change: transform;
}

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

.modal-action-row {
    position: relative;
    z-index: 10001;
    width: min(86%, 340px);
    display: flex;
    gap: 10px;
    margin: 20px auto 0;
}

.modal-action-row > button {
    flex: 1 1 0;
    min-width: 0;
}

.modal-share-btn {
    min-height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform 0.12s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.modal-share-btn:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.38);
}

/* Зона клика для закрытия (теперь она ловит клики по фону) */
.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 minmax(68px, 1fr) 34px; 
    justify-items: center; /* Центруем все по горизонтали */
    align-items: stretch;
    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: 8px;     /* Убираем отступы, грид сам центрует */
}

/* Надпись "БАЛАНС" (Справа) */
.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 !important;
    padding: 0 !important;
    min-height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    align-self: center;
    box-sizing: border-box;
}

/* Цифры баланса */
.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%; }

.profile-balance-card {
    justify-items: stretch;
    text-align: left;
    grid-template-rows: minmax(0, 1fr) 40px;
}

.profile-balance-card .profile-balance-heading {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
    font-size: 9px !important;
    font-weight: 500;
    color: #888 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.05;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.profile-balance-card .profile-balance-card-middle {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    align-self: center;
    box-sizing: border-box;
}

.profile-balance-line {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-sizing: border-box;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.profile-balance-line-main {
    min-height: 40px;
    transform: translateY(0px); /* Двигай баланс вверх/вниз отдельно */
}

.profile-balance-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.profile-balance-card .profile-balance-value .lightning-icon {
    width: 14px !important;
    height: 14px !important;
}

.profile-balance-card .profile-balance-value .balance-val {
    padding: 0;
    align-self: auto;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1;
}

.profile-balance-line-term {
    min-height: 40px;
    gap: 6px;
    margin-top: 8px;
    transform: translateY(3px); /* Двигай срок действия вверх/вниз отдельно */
    transition: border-color 0.3s;
}


/* Подписка заморожена — серая рамка, текст по центру */
.profile-balance-line-term.term-frozen {
    justify-content: center;
}

/* Нет подписки — текст по центру */
.profile-balance-line-term.term-none {
    justify-content: center;
}

.profile-balance-subtitle {
    font-size: 9px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.05;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    white-space: nowrap;
}

.profile-subscription-term {
    font-weight: 700;
    color: #1A1A1A;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.profile-balance-card .profile-balance-action {
    width: 100%;
    height: 34px;
    min-height: 34px;
    padding: 0 10px;
    background: #FFFFFF;
    color: #FF5722;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 0;
    align-self: end;
    box-sizing: border-box;
    box-shadow: none;
    transition: transform 0.1s, background 0.2s, color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.profile-balance-card .profile-balance-action:active {
    transform: scale(0.98);
    background: #F55B25;
    color: #FFFFFF;
    box-shadow: none;
}

.profile-balance-card .profile-balance-action .lightning-icon path {
    fill: #FF5722;
}

.profile-balance-card .profile-balance-action:active .lightning-icon path {
    fill: #FFFFFF;
}

@media (max-width: 380px) {
    .profile-balance-line {
        padding: 0 11px;
        gap: 6px;
    }

    .profile-balance-line-term {
        padding: 0 10px;
        gap: 4px;
    }

    .profile-balance-subtitle {
        letter-spacing: 0.4px;
    }

    .profile-balance-card .profile-balance-action {
        padding: 0 8px;
        gap: 3px;
    }
}

/* === НОВЫЕ СТИЛИ (ПРОМО, МОДАЛКИ, ЦЕНЫ) === */
.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; -webkit-backdrop-filter: blur(5px); 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); }

#subscription-offer-modal {
    z-index: 10020;
}

.subscription-offer-card {
    width: min(90vw, 360px);
    max-width: 360px;
    text-align: left;
    padding: 22px 20px 18px;
    border: 1px solid rgba(255, 87, 34, 0.16);
    box-shadow: 0 18px 48px rgba(23, 23, 23, 0.18);
}

.subscription-offer-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 87, 34, 0.12);
    color: #FF5722;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 14px;
}

.subscription-offer-title {
    margin: 0 0 10px;
    font-size: 21px;
    line-height: 1.15;
    color: #161616;
}

.subscription-offer-text {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: #4d4d4d;
}

.subscription-offer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.subscription-offer-link {
    border: 1px solid #E7E7E7;
    background: #F8F8F8;
    color: #1E1E1E;
    border-radius: 12px;
    padding: 11px 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.2s, background 0.2s;
}

.subscription-offer-link:active,
.subscription-offer-cancel:active {
    transform: scale(0.98);
}

.subscription-offer-link:hover {
    border-color: rgba(255, 87, 34, 0.25);
    background: #FFF4EF;
}

.subscription-offer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#subscription-offer-confirm-btn {
    width: 100%;
    margin: 0;
}

.subscription-offer-cancel {
    width: 100%;
    border: none;
    background: #F1F1F1;
    color: #4B4B4B;
    border-radius: 12px;
    padding: 13px 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

#subscription-manage-modal {
    z-index: 10020;
}

.subscription-manage-card {
    width: min(90vw, 350px);
    max-width: 350px;
    padding: 15px;
    text-align: left;
}

.subscription-manage-title {
    margin: 0 0 15px;
    font-size: 18px;
    color: #1A1A1A;
    text-align: center;
}

.subscription-manage-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

button.subscription-manage-tile {
    width: 100%;
    border: 1px solid #E0E0E0;
    background: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
}

button.subscription-manage-tile .tile-text {
    text-align: left;
}

button.subscription-manage-tile.cancel-sub .tile-text,
button.subscription-manage-tile.cancel-sub .tile-arrow {
    color: #ff3b30;
}

button.subscription-manage-tile.is-locked {
    background: #F5F5F5;
    border-color: #E7E7E7;
}

button.subscription-manage-tile.is-locked .tile-text,
button.subscription-manage-tile.is-locked .tile-arrow {
    color: #A0A0A0;
}

button.subscription-manage-tile:active:not(.is-locked) {
    background: #FF5722;
    border-color: #FF5722;
}

button.subscription-manage-tile:active:not(.is-locked) .tile-text,
button.subscription-manage-tile:active:not(.is-locked) .tile-arrow {
    color: #FFFFFF;
}

button.subscription-manage-tile.cancel-sub:active:not(.is-locked) {
    background: #FF3B30;
    border-color: #FF3B30;
}

#addon-lock-modal {
    z-index: 10020;
}

.addon-lock-card {
    width: min(90vw, 340px);
    max-width: 340px;
    text-align: left;
    padding: 22px 20px 18px;
    border: 1px solid rgba(30, 30, 30, 0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,246,246,0.98) 100%);
    box-shadow: 0 18px 48px rgba(23, 23, 23, 0.18);
}

.addon-lock-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(51, 51, 51, 0.08);
    color: #4B4B4B;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 14px;
}

.addon-lock-title {
    margin: 0 0 10px;
    font-size: 21px;
    line-height: 1.15;
    color: #181818;
}

.addon-lock-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #565656;
}

.addon-lock-actions {
    margin-top: 18px;
}

.addon-lock-actions .magic-button {
    width: 100%;
    margin: 0;
}

.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)
============================================== */

/* Свитч Месяц / Год */
.period-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 0;
    background: #F5F5F5;
    border-radius: 14px;
}

.period-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #888;
    transition: color 0.2s;
}

.period-label.active {
    color: #1A1A1A;
    font-weight: 700;
}

/* Toggle switch */
.period-toggle {
    position: relative;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
}

.period-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.period-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ccc;
    border-radius: 28px;
    transition: background 0.3s;
}

.period-toggle-slider::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.period-toggle input:checked + .period-toggle-slider {
    background: #FF5722;
}

.period-toggle input:checked + .period-toggle-slider::before {
    transform: translateX(20px);
}

.period-discount-tag {
    background: #FF5722;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 8px;
}

/* Годовые тарифы — цена в строку */
.tariff-price-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.old-price-strike {
    font-size: 16px;
    font-weight: 500;
    color: #1A1A1A;
    position: relative;
}

.old-price-strike.strike-red::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 2px;
    background: #FF5722;
    transform-origin: left top;
    transform: rotate(20deg);
    animation: strikeDiagonal 0.4s ease-out 0.15s forwards;
}

@keyframes strikeDiagonal {
    to { width: 105%; }
}

.new-price-bold {
    font-size: 18px;
    font-weight: 800;
    color: #1A1A1A;
}

/* Оранжевая точка-индикатор промокода */
.promo-dot {
    position: relative;
}

.promo-dot::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    background: #FF5722;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 87, 34, 0.5);
    animation: promoDotPulse 1.5s ease-in-out infinite;
}

@keyframes promoDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* Анимация нажатия для шапки */
.header-left-logo,
.header-right-stats {
    transition: transform 0.15s ease;
}

.header-left-logo:active,
.header-right-stats:active {
    transform: scale(0.92);
}

/* Плавное появление карточек */
#tariffs-container {
    transition: opacity 0.15s ease;
}

/* Анимация прокрутки цифр */
.digit-roll {
    animation: digitRoll 0.4s ease-out forwards;
}

@keyframes digitRoll {
    0%   { transform: translateY(0);    opacity: 1; }
    40%  { transform: translateY(-10px); opacity: 0; }
    60%  { transform: translateY(10px);  opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}

/* Годовые тарифы — строка цены */
.tariff-price-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}

.yearly-new-price {
    font-weight: 800;
    font-size: 18px;
    color: #FF5722;
}

/* Карточка тарифа */
.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;
    position: relative;
    overflow: hidden;
}

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

.tariff-card-body {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.tariff-card.addon-locked {
    background: linear-gradient(180deg, #F5F5F5 0%, #EFEFEF 100%);
    border-color: #E6E6E6;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.tariff-card.addon-locked .tariff-card-body {
    filter: grayscale(0.18) blur(0.55px);
    opacity: 0.9;
}

.tariff-card.addon-locked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(240,240,240,0.22) 100%);
    pointer-events: none;
}

.tariff-card.addon-locked .price-tag {
    background: #C8C8C8;
    box-shadow: 0 4px 10px rgba(144, 144, 144, 0.12);
}

.tariff-lock-chip, .tariff-current-chip {
    position: absolute;
    top: 12px;
    right: 14px;

    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: #616161;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
    z-index: 1;
}
.tariff-current-chip {
    top: auto;
    bottom: 12px;
    background: #FF5722;
    color: #fff;
    border: none;
}
.tariff-card.current-plan {
    border: 2px solid #FF5722;
    box-shadow: 0 0 0 1px rgba(255, 87, 34, 0.15);
}

/* Левая часть (Текст) */
.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: 14px;
    font-weight: 500;
    color: #999;
    position: relative;
    margin-right: 2px;
}

.old-price-label.strike-animated {
    text-decoration: none;
}

.old-price-label.strike-animated::after {
    content: "";
    position: absolute;
    left: -2px;
    top: 50%;
    width: 0;
    height: 2px;
    background: #999;
    animation: strikeThrough 0.4s ease-out 0.15s forwards;
}

@keyframes strikeThrough {
    to { width: calc(100% + 4px); }
}

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

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

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

.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: #FF5722 !important; /* Оранжевый активный */
    color: #fff !important;
    border-color: #FF5722 !important;
    box-shadow: 0 4px 10px rgba(255, 87, 34, 0.3); /* Оранжевая тень */
    transform: translateY(-1px);
}

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

/* Принудительное центрирование кнопки в модалке */
#modal-download-btn {
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 10001;
    flex-shrink: 0;
}

@media (max-width: 420px) {
    .modal-action-row {
        width: min(90%, 340px);
        gap: 8px;
    }

    .modal-share-btn {
        font-size: 13px;
    }
}

/* === 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;

    transform: translateY(-2px) !important;
}

/* Красная окантовка, если осталось 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: stretch;
    align-self: stretch;
    margin-top: 0;
}

/* === КНОПКА ВОЗВРАТА В LIGHTBOX === */
.modal-close-btn {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 10px 16px 10px 14px;
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    z-index: 10002;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(255,255,255,0.22);
    appearance: none;
    -webkit-appearance: none;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.modal-close-btn:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.18);
}

/* === КРАСНАЯ КНОПКА ОТМЕНЫ ПОДПИСКИ === */
.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);
}

/* === МОДАЛКА КАЧЕСТВА === */
.quality-ask-row {
    display: flex;
    align-items: center;
    padding: 10px 4px 14px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 14px;
}
.quality-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    transition: opacity 0.3s, filter 0.3s;
}
.quality-grid.disabled {
    opacity: 0.35;
    filter: blur(2px);
    pointer-events: none;
}
.quality-tile {
    background: #f5f5f5;
    border-radius: 14px;
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
}
.quality-tile:active { transform: scale(0.94); }
.quality-tile.active {
    background: #FF5722;
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3);
}
.quality-tile-label { font-size: 22px; font-weight: 800; }
.quality-tile-res { font-size: 11px; font-weight: 500; color: #888; margin-top: 4px; }
.quality-tile.active .quality-tile-res { color: rgba(255,255,255,0.75); }
.quality-tile-desc { font-size: 11px; font-weight: 600; color: #aaa; margin-top: 2px; }
.quality-tile.active .quality-tile-desc { color: rgba(255,255,255,0.85); }
.quality-tile-cost { font-size: 11px; font-weight: 700; color: #FF5722; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 1px; }
.quality-tile.active .quality-tile-cost { color: rgba(255,255,255,0.95); }
.quality-tile.active .quality-tile-cost svg path { fill: #fff !important; }

/* Свитч качества на кнопке генерации */
.gen-quality-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 2px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.gen-quality-toggle span {
    padding: 3px 8px;
    border-radius: 16px;
    transition: background 0.2s, color 0.2s;
    color: rgba(255,255,255,0.6);
}
.gen-quality-toggle span.active {
    background: rgba(255,255,255,0.95);
    color: #FF5722;
}

/* ==============================================
   ТРОЙНАЯ СЕТКА (ТОВАР + ОБРАЗ + ФОН)
============================================== */
.custom-upload-grid {
    display: grid;
    /* БЫЛО: grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: 1fr 1fr; /* СТАЛО: 2 колонки (Крупные) */
    gap: 8px; 
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    min-width: 0;
}

.custom-upload-tile {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    min-width: 0;
    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.random-model-active-tile {
    border: 2px solid #E6E6E6;
    border-style: solid;
    background:
        linear-gradient(180deg, #FCFCFC 0%, #F3F3F3 100%);
}

.random-model-active-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    text-align: center;
    color: #666;
}

.random-model-active-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    color: #505050;
}

.random-model-active-subtitle {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: #8A8A8A;
}

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

.custom-upload-tile img.upload-preview-keep-top {
    object-position: top;
}

.native-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 9;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
}

/* === НАДПИСЬ В ПЛИТКЕ ЗАГРУЗКИ === */
.tile-label {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 24px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(10px, 3.2vw, 14px);
    font-weight: 400;
    letter-spacing: 0.2px;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    z-index: 2;
    pointer-events: none;
}

.tile-label-action {
    color: #FF5722;
    font-weight: 400;
    flex: 0 0 auto;
}

.tile-label-text {
    color: #6f6f6f;
    font-weight: 400;
    flex: 0 1 auto;
    min-width: 0;
}

@media (max-width: 430px) {
    .tile-label {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        flex-direction: column;
        gap: 2px;
        white-space: normal;
        line-height: 1.08;
    }

    .tile-label-action,
    .tile-label-text {
        display: block;
        width: 100%;
        text-align: center;
    }
}

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

.custom-upload-tile.filled .tile-label,
.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: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    border-radius: 12px !important; /* Одинаковое скругление */
    background: #ffffff !important; /* Одинаковая белая рамка */
    
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    align-self: end;
}

/* 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: 300 !important; /* Возвращаем нормальную толщину текста */
    font-family: 'Montserrat', sans-serif !important;
    color: #000000 !important; /* Жестко фиксируем цвет для текста и всех вложенных тегов */
}

/* Оставляем жирность для тегов <b> внутри плашек, чтобы выделение работало */
.node-text b, 
.node-text strong {
    font-weight: 700 !important;
}

/* === ТУМБЛЕР (SWITCH) === */
.switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    margin: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    border: 1px solid #eee;
}

.switch-container.switch-container-inside-tile {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 8;
    margin: 0;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.virtual-model-switch-host {
    margin: 0 0 12px;
}

.virtual-model-switch-shell {
    background: #F5F5F5;
    border-radius: 22px;
    padding: 6px;
}

.random-model-switch-panel {
    margin: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.switch-label {
    font-size: 13px;
    font-weight: 600;
    color: #4B4B4B;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #FF5722; /* Оранжевый */
}

input:checked + .slider:before {
    transform: translateX(22px);
}

/* Состояние disabled для плитки модели */
.custom-upload-tile.disabled {
    opacity: 0.5;
    pointer-events: none;
    background-color: #e0e0e0;
    border-color: #ccc;
}

.tile-wrapper.manual-selection-disabled .tile,
#gallery-container .tile.manual-selection-disabled {
    opacity: 0.58;
    filter: grayscale(1);
    box-shadow: none;
}

.tile-wrapper.manual-selection-disabled .tile,
.tile-wrapper.manual-selection-disabled .tile-description,
#gallery-container .tile.manual-selection-disabled {
    cursor: not-allowed;
}

.tile-wrapper.manual-selection-disabled .tile-description,
.tile-description.manual-selection-disabled {
    color: #9A9A9A !important;
}

/* === ФИКС ВЫРАВНИВАНИЯ ШАПКИ === */

/* 1. Убираем ручное смещение цифры баланса, чтобы она встала по центру */
.header-balance-box .balance-val {
    transform: none !important; 
    line-height: 1 !important;
    padding-top: 2px !important; /* Микро-коррекция для шрифта Montserrat */
}

/* 2. Гарантируем, что контейнер баланса центрирует всё (Таймер, Цифру, Молнию) */
.header-balance-box {
    align-items: center !important;
    height: auto !important; /* Убираем 100%, чтобы не растягивало */
}

/* 3. Выравниваем бейдж PRO/FREE */
.header-right-stats .status-badge {
    align-self: center !important;
    margin: 0 !important;
    transform: translateY(1px); /* Оптическая компенсация для PRO, чтобы стоял ровно с цифрами */
}

/* 4. Центрируем таймер (овал) */
.timer-oval {
    align-self: center !important;
    margin-top: 0 !important;
    transform: none !important;
}

/* 5. Общий контейнер правой части */
.header-right-stats {
    align-items: center !important;
}

/* === 2. КНОПКА НАЗАД (СВЕРХУ) С АНИМАЦИЕЙ === */
.back-btn-top {
    display: inline-block;
    background-color: #F4F4F4;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    padding: 10px 16px 10px 14px;
    border-radius: 12px;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    margin-bottom: 10px;
    margin-top: 5px;
    
    /* 🔥 ВАЖНО: Быстрый переход для эффекта моргания */
    transition: background-color 0.1s ease, color 0.1s ease, transform 0.1s ease;
}

/* Класс для JS-анимации (Оранжевый) */
.back-btn-top.blink-orange {
    background-color: #FF5722 !important; 
    color: #ffffff !important;
    transform: scale(0.97); /* Легкое нажатие */
}

/* === СТИЛИ ДЛЯ КНОПОК ПОДДЕРЖКИ И ДЕЛЕГИРОВАНИЯ (ОРАНЖЕВЫЕ) === */
.action-btn-orange {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #FF512F 0%, #DD2476 100%); /* Твой фирменный градиент */
    color: #fff;
    border: none;
    border-radius: 12px;
    margin-top: 9px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.1s;
}

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

/* Скрываем лишние элементы в тарифах */
.header-right-stats .balance {
    display: none !important; /* Скрывает слово ТАРИФЫ если оно там было */
}

.page-info-box {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    display: block;
}

.page-title-box {
    background: transparent;
    border-radius: 0;
    padding: 0 10px;
    margin-bottom: 8px;
    margin-top: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    line-height: 1.4;
}

.page-info-box .page-title-box {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.page-path {
    color: #7C7C7C;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.15;
}

.page-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    row-gap: 6px;
    column-gap: 0;
    line-height: 1.4;
    width: 100%;
    min-width: 0;
}

.page-path-inline {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
}

.page-breadcrumbs-inline {
    row-gap: 6px;
    column-gap: 0;
}

.page-crumb-group {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.page-crumb-separator {
    color: #C0C0C0;
    font-size: 14px;
    font-weight: 300;
    flex: 0 0 auto;
    margin: 0 4px;
    line-height: 1;
}

.page-crumb {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    border: none;
    background-color: #F4F4F4;
    color: #333;
    border-radius: 8px;
    padding: 6px 12px;
    margin: 0;
    box-shadow: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    cursor: pointer;
    text-align: left;
    min-width: 0;
    max-width: 100%;
    transition: background-color 0.1s ease, color 0.1s ease;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.page-crumb > span {
    display: block;
    min-width: 0;
}

.page-crumb:hover {
    background-color: #F4F4F4;
}

.page-crumb:active {
    transform: scale(0.97);
    background-color: #FF5722;
    color: #FFFFFF;
}

.page-crumb.is-static {
    cursor: default;
}

.page-crumb.is-current {
    background-color: #F4F4F4;
    color: #333;
    font-weight: 500;
}

.page-current {
    color: #3E3E3E;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
}

.page-current-inline {
    color: #5B5B5B;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
}

.page-crumb.page-current-inline,
.page-crumb.page-current-inline-muted,
.page-crumb.page-current-inline-parts {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
}

.page-current-inline-muted {
    color: #5B5B5B;
}

.page-current-inline-parts {
    color: #696969;
}

.page-description-box {
    margin: 0 0 12px 0 !important;
    padding: 15px 14px !important;
}

/* Корректируем отступы для кнопки назад, чтобы она стояла ровно между блоками */
.back-btn-top {
    margin-top: 0;
    margin-bottom: 10px;
}

.upload-screen-layout {
    display: flex;
    flex-direction: column;
    gap: var(--upload-stack-gap);
    overflow-x: hidden;
    min-width: 0;
}

.upload-screen-layout > .back-btn-top,
.upload-screen-layout > .page-title-box,
.upload-screen-layout > .page-info-box,
.upload-screen-layout > .upload-workspace,
.upload-screen-layout > .upload-action-wrap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.upload-screen-layout > .back-btn-top {
    align-self: flex-start !important;
    width: auto !important;
}

.upload-screen-layout > .page-title-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.upload-screen-layout .page-description-box {
    margin: 0 !important;
}

.upload-screen-layout .upload-workspace-content,
.upload-screen-layout .upload-controls-block {
    gap: var(--upload-stack-gap) !important;
}

.upload-screen-layout .upload-action-wrap {
    margin-top: 0 !important;
}

/* === КАРОУСЕЛЬ ДЛЯ ГАЛЕРЕИ В ПРОФИЛЕ === */
.gallery-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 -10px; /* Выносим за края для красивого свайпа */
    padding: 0 10px;
}

.gallery-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 10px;
    padding-bottom: 15px; /* Место под тень/скролл */
    scrollbar-width: none; /* Прячем скроллбар в Firefox */
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    width: 100%;
}
.gallery-grid::-webkit-scrollbar { display: none; } /* Прячем в Chrome/Safari */

.gallery-item {
    flex: 0 0 calc(33.333% - 7px); /* Показываем 3 элемента на экране */
    scroll-snap-align: start;
    aspect-ratio: 1;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Стрелочки для ПК (скрыты на мобилках) */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 10;
    border: none;
    color: #FF5722;
    font-weight: bold;
}
.gallery-arrow.left { left: 0px; }
.gallery-arrow.right { right: 0px; }

@media (hover: none) and (pointer: coarse) {
    .gallery-arrow { display: none; } /* Прячем на тач-устройствах */
}

/* === 2. КНОПКА НАЗАД (Сверху + Оранжевая при нажатии) === */
.back-btn-top {
    /* Оставляем твои старые стили, добавляем поведение при нажатии */
    transition: background-color 0.1s, color 0.1s;
}

.back-btn-top:active {
    background-color: #FF5722 !important; /* Твой фирменный оранжевый */
    color: #ffffff !important;
}

/* === 5. PANTONE COLOR PICKER === */
.pantone-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    background: #fff;
    transition: transform 0.1s;
}
.pantone-wrapper:active { transform: scale(0.98); }

/* Скрытый инпут цвета */
#pantone-input-native {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    top: 0; left: 0;
}

.pantone-hex {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #333; /* Будем менять динамически на белый/черный */
    z-index: 2;
    background: rgba(255,255,255,0.8);
    padding: 4px 8px;
    border-radius: 6px;
    margin-top: 5px;
}

.pantone-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #666;
    z-index: 2;
    background: rgba(255,255,255,0.8);
    padding: 2px 6px;
    border-radius: 4px;
}

/* === 1. НАСТРОЙКИ СЛУЧАЙНОЙ МОДЕЛИ === */
.random-settings {
    margin-top: 10px;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #eee;
    animation: fadeIn 0.3s ease;
}

.random-settings-label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: #8A8A8A;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.rs-row {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
}
.rs-row:last-child { margin-bottom: 0; }

.rs-btn {
    flex: 1;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}
/* === 1. ИСПРАВЛЕНИЕ СЕЛЕКТОРА МОДЕЛИ (ОРАНЖЕВЫЙ) === */
.rs-btn.active {
    background: #FF5722 !important; /* Оранжевый активный */
    color: #fff !important;
    border-color: #FF5722 !important;
    box-shadow: 0 2px 8px rgba(255, 87, 34, 0.3);
}

/* === МОДАЛЬНЫЕ ОКНА: ВЕРТИКАЛЬНЫЕ ПЛИТКИ (ИСПРАВЛЕНО) === */

/* Контейнер модалки */
.modal-card-scrollable {
    width: 90%;
    max-width: 400px;
    padding: 15px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

/* Сетка внутри */
.modal-grid-content {
    overflow-y: auto;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 колонки */
    gap: 12px; /* Чуть больше отступ */
    padding: 5px;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    
    /* ВАЖНО: Это лечит "колоду карт" */
    grid-auto-rows: max-content; 
    align-items: start; 
}

/* ПЛИТКА (Обертка) */
.modal-style-tile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Тень посильнее */
    border: 1px solid #f0f0f0;
    transition: transform 0.1s;
    
    /* Убираем aspect-ratio отсюда, чтобы плитка росла вниз */
    height: auto;
    position: relative; /* Чтобы не проваливалась */
}

.modal-style-tile:active {
    transform: scale(0.96);
}

/* КАРТИНКА (ВЫТЯНУТАЯ 3:4) */
.modal-style-tile img {
    width: 100%;
    aspect-ratio: 3 / 4; /* Делаем вертикальной */
    object-fit: cover;
    display: block;
    background: #eee;
}

/* ПОДПИСЬ (ВСЕГДА ВИДНА) */
.modal-tile-label {
    background-color: #F4F4F4;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    
    /* Фиксируем высоту текста */
    min-height: 36px; 
    padding: 8px 4px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    border-top: 1px solid #eaeaea;
    z-index: 2;
}

/* Заголовок модалки */
.modal-header-badge {
    background-color: #F4F4F4;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #000;
}

/* === КНОПКА МОЙ КАТАЛОГ === */
.catalog-btn {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background: #fff;
    border: 1px solid #FF5722; /* Оранжевая рамка */
    color: #FF5722;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.catalog-btn:active, .catalog-btn.active {
    background: #FF5722;
    color: #fff;
}

/* Анимация расширения галереи */
.gallery-grid {
    transition: max-height 0.5s ease-in-out;
}

/* Класс для развернутой галереи */
.gallery-grid.expanded {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    overflow-y: visible; /* Убираем скролл внутри, показываем всё */
    overflow-x: hidden;
    flex-wrap: wrap;
    max-height: none; /* Раскрываем на всю высоту */
    scroll-snap-type: none; /* Отключаем карусель */
}

/* Скрываем стрелочки навигации в модалке, если мы на мобильном, но оставляем для ПК */
.modal-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.modal-nav-arrow:hover { background: rgba(255,255,255,0.4); }
.modal-nav-arrow.prev { left: 10px; }
.modal-nav-arrow.next { right: 10px; }

@media (hover: none) and (pointer: coarse) {
    .modal-nav-arrow { display: none; } /* Скрываем на тачскринах, там свайп */
}

/* =======================================================
   ЯДЕРНЫЙ СБРОС И ИДЕАЛЬНАЯ ЛИНИЯ ШАПКИ (УМЕНЬШЕННАЯ ВЕРСИЯ)
======================================================= */

/* 1. Главный контейнер */
.header-right-stats {
    display: flex !important;
    flex-direction: row-reverse !important; 
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important; /* Уменьшили отступ между блоками */
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Контейнер баланса (Таймер -> Цифра -> Молния) */
.header-balance-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important; /* Компактный отступ между цифрами и молнией */
    height: 18px !important; 
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Плашка статуса (PRO / FREE) */
.header-right-stats .status-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 15px !important; /* Жесткая компактная высота */
    padding: 0 4px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important; /* Мелкий аккуратный шрифт */
    font-weight: 900 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    
    transform: none !important; 
    box-sizing: border-box !important;
}

/* 4. Овал таймера (НА 20 ДН.) */
.timer-oval {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 15px !important; /* Строго вровень с PRO */
    padding: 0 6px !important;
    margin: 0 !important;
    border-radius: 8px !important; /* Ровно половина от 15px */
    border: 1px solid #ccc !important;
    background: transparent !important;
    
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9px !important; /* Микро-шрифт, но читаемый */
    font-weight: 700 !important;
    color: #666 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    
    transform: none !important;
    box-sizing: border-box !important;
}

/* 5. Цифры баланса (87) */
.header-balance-box .balance-val {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 15px !important; /* Вровень со всем остальным */
    margin: 0 !important;
    padding: 0 !important;
    
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important; /* Главный акцент, чуть крупнее остальных */
    font-weight: 800 !important;
    color: #000000 !important;
    line-height: 1 !important;
    
    transform: none !important;
}

/* 6. Иконка молнии */
.header-balance-box .lightning-icon {
    display: block !important;
    width: 12px !important; /* Мелкая молния */
    height: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

/* =======================================================
   УВЕЛИЧЕНИЕ ИКОНКИ "М" (ОТДЕЛЬНО ОТ ФУЛЛ-ЛОГО)
======================================================= */

#logo-icon {
    height: 31px !important;
    max-height: none !important;
    width: auto !important;
    object-fit: contain !important;
    display: block;
    margin-top: 0;
    margin-left: -3px;
}

.profile-logo-icon {
    height: 31px !important;
    width: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block;
    flex-shrink: 0;
    margin-top: 0;
    margin-left: -3px;
}

.profile-screen-header {
    justify-content: flex-start;
    padding-bottom: 2px;
    margin-bottom: 8px;
}

.profile-screen-header .header-left-logo {
    flex: 0 0 auto;
}

.profile-screen-header .header-right-stats {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-screen-header .status-badge {
    cursor: pointer;
}

/* === НОВЫЙ ФИРМЕННЫЙ СТИЛЬ КНОПОК === */
.magic-button, 
.action-btn-orange {
    /* Градиент в фирменных цветах: основа -> светлый блик -> основа */
    background: linear-gradient(135deg, #ea5e28 0%, #ff8b60 50%, #ea5e28 100%) !important;
    background-size: 200% auto !important; /* Увеличиваем фон для плавной прокрутки */
    animation: shimmerBrand 3s linear infinite !important; /* Анимация перелива */
    color: white !important;
    border: none !important;
}

/* Анимация перелива (эффект свечения/волны) */
@keyframes shimmerBrand {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Вторая кнопка (Ознакомиться) — прозрачная с оранжевой рамкой */
.action-btn-outline {
    width: 100%;
    padding: 14px;
    background: transparent !important;
    color: #ea5e28 !important;
    border: 2px solid #ea5e28 !important;
    border-radius: 12px;
    margin-top: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

.action-btn-outline:active {
    transform: scale(0.98);
    background: rgba(234, 94, 40, 0.1) !important;
}

/* === FINAL CLIENT FIXES === */
.node-text,
.node-text *,
.node-text b,
.node-text strong,
.node-text h1,
.node-text h2,
.node-text h3 {
    color: #4B4B4B !important;
    font-family: 'Montserrat', sans-serif !important;
}

.node-text,
.tile-description,
.page-description-box {
    font-weight: 400 !important;
    line-height: 1.42 !important;
}

.page-title-box {
    padding: 0 10px !important;
    margin: 0 0 8px 0 !important;
    gap: 2px !important;
}

.back-btn-top ~ .page-title-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.page-path {
    color: #7C7C7C !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
}

.page-breadcrumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    row-gap: 6px !important;
    column-gap: 0 !important;
    line-height: 1.4 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.page-breadcrumbs-inline {
    row-gap: 6px !important;
    column-gap: 0 !important;
}

.page-crumb-group {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.page-crumb-separator {
    color: #C0C0C0 !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    flex: 0 0 auto !important;
    margin: 0 4px !important;
    line-height: 1 !important;
}

.page-crumb {
    display: inline-flex !important;
    align-items: center !important;
    border: none !important;
    background-color: #F4F4F4 !important;
    color: #333 !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    white-space: normal !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.page-crumb > span {
    display: block !important;
    min-width: 0 !important;
}

.page-crumb.is-current {
    background-color: #F4F4F4 !important;
    color: #333 !important;
    font-weight: 500 !important;
}

.page-current {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #3E3E3E !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-transform: none !important;
}

.page-current-inline,
.page-current-inline-muted,
.page-current-inline-parts {
    color: #696969 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-transform: none !important;
}

.page-crumb:hover {
    background-color: #F4F4F4 !important;
}

.page-crumb:active,
.page-crumb.is-current:active {
    background-color: #FF5722 !important;
    color: #FFFFFF !important;
}

.page-description-box {
    margin: 0 0 12px 0 !important;
    padding: 14px !important;
}

.upload-text-block {
    margin: 0 !important;
}

.upload-screen-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--upload-stack-gap) !important;
}

.upload-screen-layout > .back-btn-top,
.upload-screen-layout > .page-title-box,
.upload-screen-layout > .page-info-box,
.upload-screen-layout > .upload-workspace,
.upload-screen-layout > .upload-action-wrap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.upload-screen-layout > .back-btn-top {
    align-self: flex-start !important;
    width: auto !important;
}

.upload-screen-layout > .page-title-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.upload-screen-layout .page-description-box {
    margin: 0 !important;
}

.upload-workspace-content {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--upload-stack-gap) !important;
}

.upload-control-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.upload-controls-block {
    gap: var(--upload-stack-gap) !important;
}

.custom-upload-grid {
    margin: 0 !important;
}

.upload-action-wrap {
    padding: 0 !important;
    margin-top: 0 !important;
}

.upload-grid {
    margin: 0 !important;
}

.pose-label {
    margin: 0 !important;
}

.pose-selector {
    margin: 0 !important;
}

.bottom-nav-info-content {
    padding: 0 10px !important;
    box-sizing: border-box;
}

.bottom-nav-page-header h3 {
    margin-left: 0 !important;
    font-weight: 400 !important;
}

.bottom-nav-page-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.bottom-nav-info-content .node-text,
.bottom-nav-info-content .action-btn-orange {
    width: 100% !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.bottom-nav-info-content .back-btn-top {
    width: auto !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#logo-icon,
.profile-logo-icon {
    margin-top: 0 !important;
}

/* === ПРИВЯЗКА EMAIL (модалка) === */
.link-email-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.le-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background: rgba(255,255,255,0.8);
    color: #333;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.le-input:focus { border-color: #EA5E28; }
.le-input.invalid { border-color: #cc3333; background: rgba(255, 68, 68, 0.06); }
.le-input.valid { border-color: #2e7d32; }
.le-input::placeholder { color: #aaa; }

.le-pw-wrap { position: relative; width: 100%; }
.le-pw-wrap .le-input { padding-right: 46px; }
.le-pw-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; cursor: pointer; opacity: 0.35;
    transition: opacity 0.2s; background: none; border: none; padding: 0;
}
.le-pw-toggle:hover { opacity: 0.6; }

.le-hint {
    font-size: 11px; color: #cc3333; text-align: left; line-height: 1.4; display: none;
}
.le-hint.active { display: block; }

.le-rules {
    display: none; flex-wrap: wrap; gap: 6px; margin-top: 2px;
}
.le-rules.active { display: flex; }
.le-rule {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: 500;
    background: rgba(204, 51, 51, 0.08); border: 1px solid rgba(204, 51, 51, 0.2);
    color: #b33; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap;
}
.le-rule::before {
    content: ''; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    background: rgba(204, 51, 51, 0.15); border: 1.5px solid rgba(204, 51, 51, 0.3);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.le-rule.ok {
    background: rgba(100, 160, 100, 0.07); border-color: rgba(100, 160, 100, 0.2);
    color: rgba(80, 140, 80, 0.7);
}
.le-rule.ok::before {
    background: rgba(100, 160, 100, 0.55); border-color: rgba(100, 160, 100, 0.4);
    box-shadow: 0 0 5px rgba(100, 160, 100, 0.15);
}
@keyframes leRuleCheck { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.le-rule.pop { animation: leRuleCheck 0.3s ease; }

/* Сегментированный ввод кода */
.code-segments {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.code-segments .code-cell {
    width: 42px; height: 50px;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    background: rgba(255,255,255,0.8);
    outline: none;
    transition: border-color 0.2s;
    padding: 0;
    caret-color: #EA5E28;
}
.code-segments .code-cell:focus {
    border-color: #EA5E28;
}
.code-segments .code-cell.filled {
    border-color: #2e7d32;
    background: rgba(46, 125, 50, 0.04);
}
.code-segments .code-dash {
    font-size: 18px;
    color: #ccc;
    user-select: none;
    margin: 0 2px;
}
.code-resend {
    text-align: center;
    margin-top: 10px;
}
.code-resend button {
    background: none;
    border: none;
    color: #EA5E28;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.2s;
}
.code-resend button:hover { background: rgba(234,94,40,0.06); }
.code-resend button:disabled { color: #aaa; cursor: default; }
.code-resend button:disabled:hover { background: none; }

.le-submit {
    width: 100%; padding: 14px 24px; border: none; border-radius: 10px;
    background: #EA5E28; color: #fff; font-family: 'Montserrat', sans-serif;
    font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s;
}
.le-submit:hover { background: #d4531f; }
.le-submit:active { transform: scale(0.98); }
.le-submit:disabled { background: #ccc; cursor: not-allowed; }

/* =============================
   NOTIFICATIONS SYSTEM
   ============================= */

/* Push banner */
.notif-push {
    position: fixed; top: 0; left: 50%; z-index: 10000;
    transform: translateX(-50%) translateY(-120%); width: calc(100% - 16px); max-width: 420px;
    padding: 12px 16px; border-radius: 14px;
    background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    cursor: pointer; display: flex; align-items: center; gap: 12px;
}
.notif-push.visible { transform: translateX(-50%) translateY(8px); }
.notif-push-icon {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(234,94,40,0.1);
}
.notif-push-icon svg { width: 18px; height: 18px; }
.notif-push-text { flex: 1; min-width: 0; }
.notif-push-title { font-weight: 600; font-size: 13px; color: #1a1a1a; }
.notif-push-body { font-size: 12px; color: #888; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* Red badge dot */
.notif-badge {
    position: absolute; top: 4px; right: 4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #e53935; display: none;
}
.notif-badge.active { display: block; }

/* Bell icon on profile card */
.profile-bell {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; cursor: pointer; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    transform-origin: top center;
}
.profile-bell.ringing svg {
    animation: bellRing 0.6s ease-in-out infinite;
    stroke: #ea5e28;
}
@keyframes bellRing {
    0%   { transform: rotate(0deg); }
    8%   { transform: rotate(14deg); }
    16%  { transform: rotate(-12deg); }
    24%  { transform: rotate(10deg); }
    32%  { transform: rotate(-8deg); }
    40%  { transform: rotate(6deg); }
    48%  { transform: rotate(-4deg); }
    56%  { transform: rotate(2deg); }
    64%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
.profile-bell svg { width: 20px; height: 20px; fill: none; stroke: #888; stroke-width: 2; transform-origin: top center; }
.profile-bell .notif-badge { top: -2px; right: -2px; }

/* 3D Flip card */
.profile-flip-container {
    perspective: 800px; position: relative;
}
.profile-flip-inner {
    position: relative; transition: transform 0.6s ease;
    transform-style: preserve-3d;
}
.profile-flip-inner.flipped { transform: rotateY(180deg); }
.profile-flip-front, .profile-flip-back {
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.profile-flip-back {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    transform: rotateY(180deg);
    background: #fff; border-radius: 16px; padding: 12px;
    display: flex; flex-direction: column; overflow: hidden;
}
.profile-flip-back-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;
}
.profile-flip-back-header span { font-weight: 600; font-size: 14px; color: #1a1a1a; }
.profile-flip-back-close {
    width: 24px; height: 24px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; border-radius: 50%;
    background: #f5f5f5;
}
.profile-flip-back-close svg { width: 14px; height: 14px; stroke: #888; }

/* Notification list on flip back */
.notif-list { flex: 1; overflow-y: auto; }
.notif-list-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 4px;
    border-bottom: 1px solid #f5f5f5; cursor: pointer;
}
.notif-list-item:last-child { border-bottom: none; }
.notif-list-icon {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.notif-list-icon.info { background: rgba(33,150,243,0.1); }
.notif-list-icon.promo { background: rgba(234,94,40,0.1); }
.notif-list-icon.action { background: rgba(76,175,80,0.1); }
.notif-list-info { flex: 1; min-width: 0; }
.notif-list-title { font-size: 12px; font-weight: 600; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-list-time { font-size: 10px; color: #aaa; margin-top: 1px; }
.notif-list-empty { text-align: center; color: #ccc; font-size: 13px; padding: 20px 0; }

/* Notification detail modal */
.notif-modal-type { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-bottom: 12px; }
.notif-modal-type.info { background: rgba(33,150,243,0.1); color: #2196F3; }
.notif-modal-type.promo { background: rgba(234,94,40,0.1); color: #ea5e28; }
.notif-modal-type.action { background: rgba(76,175,80,0.1); color: #4CAF50; }
.notif-promo-block {
    margin: 12px 0; padding: 12px; border-radius: 10px;
    background: rgba(234,94,40,0.06); text-align: center;
}
.notif-promo-code { font-size: 20px; font-weight: 700; color: #ea5e28; letter-spacing: 2px; margin-bottom: 8px; }
.notif-promo-apply {
    padding: 8px 24px; border: none; border-radius: 20px;
    background: linear-gradient(135deg,#ea5e28,#f7a44c); color: #fff;
    font-weight: 600; font-size: 13px; cursor: pointer;
}

/* Personal promos dropdown in promo modal */
.personal-promos-list { margin-top: 12px; }
.personal-promo-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; margin-bottom: 6px; border-radius: 10px;
    background: rgba(234,94,40,0.06); cursor: pointer; transition: background 0.2s;
}
.personal-promo-item:hover { background: rgba(234,94,40,0.12); }
.personal-promo-code { font-weight: 700; font-size: 14px; color: #ea5e28; }
.personal-promo-desc { font-size: 12px; color: #888; }