/* webapp/static/style.css - The Final "Soul" Edition */
:root {
    --blue: #3ea8f7;
    --text: #ffffff;
    --hint: #8e99a7;
    --bg: #111820;
    --card-bg: rgba(30, 38, 50, 0.75);
    --card-border: rgba(255, 255, 255, 0.1);
    --input-bg: #111820;
    --color-bronze: #cd7f32;
    --color-silver: #c0c0c0;
    --color-gold: #ffd700;
    /* Можете добавить другие уровни, например, Platinum */
    --color-platinum-1: #83e4ff; 
    --platinum-glow: #b3eaff;
    --platinum-border: #7be4ff;
    --platinum-badge-bg: rgba(179,234,255,0.12);
    --platinum-text: #e5faff;
    --color-violet: #8e44ad;
}

@keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(100%); } }

* { box-sizing: border-box; }

* { box-sizing: border-box; }

html {
    height: 100%;
}
body {
    font-family: 'Inter', sans-serif; color: var(--text);
    background-color: var(--bg); margin: 0;
    padding-top: 70px; overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.background-visuals {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; overflow: hidden;
}
.grid-pattern {
    width: 100%; height: 100%;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px; opacity: 0.5;
}


.circle {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(62, 168, 247, 0.12), transparent 60%);
    animation: float 25s ease-in-out infinite;
}
.circle.c1 { width: 400px; height: 400px; top: 10%; left: -100px; animation-duration: 20s; }
.circle.c2 { width: 600px; height: 600px; top: 50%; right: -200px; animation-duration: 30s; }
.circle.c3 { width: 300px; height: 300px; bottom: 5%; left: 30%; animation-duration: 25s; }


.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(17, 24, 32, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--card-border);
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    height: 70px;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.site-nav {
    display: flex;
    gap: 30px;
    margin: 0 auto; /* Центрирует навигацию между лого и правой частью */
}

.site-nav a {
    color: var(--hint);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.site-nav a:hover {
    color: var(--text);
}

.nav-link--special-gradient {
    background: linear-gradient(45deg, #83e4ff, var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    transition: all 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
    text-shadow: 0 0 5px rgba(131, 228, 255, 0);
}

.nav-link--special-gradient:hover {
    /* Чуть больше scale, чтобы эффект был "воздушнее" */

    /* Мягкое, ненавязчивое свечение */
    text-shadow:
        0 0 5px rgba(131, 228, 255, 0.33), /* внутреннее - слабее и мягче */
        0 0 10px rgba(62, 168, 247, 0.20);  /* внешнее - очень рассеянное, слабое */

    /* Плавности больше, чем резкости */
}



/* 2. Стили для компактной CTA-ссылки (Автопокупка) */
.nav-link--cta-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue);
    font-weight: 600;
}
.nav-link--cta-text:hover {
    color: #5EAEF8; /* Более светлый синий при наведении */
}
.nav-link--cta-text svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}


/* 3. Стили для выпадающего меню "Ещё" */
.nav-dropdown-wrapper {
    position: relative; /* Родительский элемент для позиционирования меню */
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Стрелочка в меню */
.nav-dropdown-toggle .profile-arrow {
    stroke: var(--hint);
    transition: transform 0.2s ease-in-out;
}
.nav-dropdown-wrapper:hover .nav-dropdown-toggle .profile-arrow {
    transform: rotate(180deg);
}

/* Само выпадающее меню */
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 15px); /* Располагаем под кнопкой с отступом */
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    /* Копируем стили из меню профиля для консистентности */
    background: #1A222C; 
    border: 1px solid var(--card-border);
    border-radius: 10px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 200;
    padding: 8px;
    max-height: 240px;     /* или 200px/220px — подбери, чтобы меню не вылезало за экран */
    overflow-y: auto;      /* если пунктов больше — появится скролл */
    
    /* Анимация появления */
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.95);
    visibility: hidden;
    transition: all 0.2s ease-out;
}
.nav-dropdown-wrapper:hover .nav-dropdown-menu {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    visibility: visible;
}







/* Кнопка-бургер (по умолчанию скрыта) */
.mobile-nav-toggle {
    display: none;
    background: none; border: none; padding: 0; cursor: pointer;
    z-index: 1001;
}
.mobile-nav-toggle svg { color: var(--text); width: 28px; height: 28px; }

/* Фон-затемнение */
.menu-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* Стили для мобильных устройств */
@media (max-width: 900px) {
    /* 1. Настраиваем layout шапки: [кнопка] [лого по центру] [действия] */
    .header-content {
        justify-content: space-between;
    }
    .mobile-nav-toggle { display: block; }
    .site-nav { display: none; } /* Важно: прячем десктопную навигацию */

    /* 2. Стили для выезжающей панели (когда body.mobile-nav-open) */
    body.mobile-nav-open .site-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        max-width: 85vw;
        z-index: 999;
        padding: 20px;

        /* Фон "в нашем стиле" */
        background: rgba(26, 34, 44, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-right: 1px solid var(--card-border);
        box-shadow: 5px 0 35px rgba(0,0,0,0.3);

        /* Анимация выезда */
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
    body.mobile-nav-open .site-nav.is-visible {
        transform: translateX(0);
    }

    /* 3. Показываем фон-затемнение */
    body.mobile-nav-open .menu-backdrop {
        display: block;
        opacity: 1;
    }

    /* 4. Стили контента внутри панели */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-bottom: 20px;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--card-border);
    }
    .mobile-menu-header span { font-size: 1.2rem; font-weight: 700; color: var(--text); }
    .mobile-menu-close { background: none; border: none; padding: 0; }
    .mobile-menu-close svg { color: var(--hint); width: 26px; height: 26px; }

    /* Ссылки */
    body.mobile-nav-open .site-nav a {
        color: var(--hint);
        font-size: 1.1rem;
        font-weight: 500;
        padding: 12px 10px;
        border-radius: 8px;
        transition: all 0.2s ease;
    }
     body.mobile-nav-open .site-nav a:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text);
     }
    body.mobile-nav-open .site-nav .nav-link--cta-text {
        color: var(--blue);
        font-weight: 700;
    }

    /* Запрет прокрутки основной страницы */
    body.mobile-nav-open { overflow: hidden; }
}






.header-actions {
    margin-left: auto; /* Прижимает правую часть к краю */
}

.login-btn {
    background: var(--blue);
    color: var(--text);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.login-btn:hover {
    background: #4eb3f8;
    box-shadow: 0 0 15px rgba(62, 168, 247, 0.4);
}

.content-wrapper, .faq-section { animation: fade-in-up 0.8s ease-out; animation-fill-mode: backwards; }
.main-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; gap: 80px; max-width: 1100px;
    margin: 80px auto; padding: 0 30px;
}
.hero-section {
    animation-delay: 0.1s;
    align-self: start;  /* Фиксируем у верха */
    padding-top: 50px;  /* Добавляем отступ, чтобы блок не "прилипал" к верху */
}
.hero-section h1 { font-size: 64px; line-height: 1.1; margin: 0 0 20px; font-weight: 800; letter-spacing: -2.5px; }
.hero-section p { font-size: 18px; color: var(--hint); line-height: 1.6; margin: 0 0 30px 0; max-width: 450px; }
/* webapp/static/style.css */

/* --- НОВЫЙ ДИЗАЙН ДЛЯ СПИСКА ПРЕИМУЩЕСТВ В HERO-БЛОКЕ --- */

.features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* Чуть увеличим расстояние */
    margin-top: 40px;
    justify-content: flex-start;
}

.feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    /* Фон делаем чуть темнее и плотнее, чтобы текст лучше читался */
    background: rgba(30, 41, 59, 0.7); 
    border: 1px solid var(--card-border);
    border-radius: 99px;
    font-size: 15px;
    font-weight: 500;
    /* Текст делаем ярким белым */
    color: var(--text); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Убираем все анимации и эффекты при наведении */
    transition: none;
    cursor: default;
}

.feature-pill svg {
    width: 20px; /* Чуть увеличим иконку */
    height: 20px;
    /* Иконку делаем фирменного синего цвета */
    stroke: var(--blue); 
    stroke-width: 2;
    fill: none;
}

.card {
    background: var(--card-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 20px; padding: 32px;
    border: 1px solid var(--card-border);
    animation-delay: 0.3s;
}

/* Обновляем сетку для формы, чтобы она поддерживала новую структуру */
#autopurchase-settings-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две колонки одинаковой ширины */
    gap: 20px; /* Промежуток между элементами */
}

/* Правило для элемента, который должен занимать всю ширину */
#autopurchase-settings-form .form-group.full-width {
    grid-column: 1 / -1; /* Растягиваем на все колонки */
}

/* Стили для кастомного селекта в твоем стиле */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

/* Контейнер для нашего нового дропдауна */
.custom-dropdown {
    position: relative;
    width: 100%;
}

/* Кнопка, которая выглядит как поле ввода */
.custom-dropdown .dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px;
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


.custom-dropdown.is-open .dropdown-toggle {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(49, 166, 248, 0.2);
}

/* Анимация стрелки при открытии */
.custom-dropdown .profile-arrow {
    stroke: var(--hint);
    transition: transform 0.2s ease-out;
}

.custom-dropdown.is-open .profile-arrow {
    transform: rotate(180deg);
}

/* Само выпадающее меню - стили взяты из твоего .nav-dropdown-menu */
.custom-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px); /* Располагаем под кнопкой с отступом */
    left: 0;
    width: 100%;
    background: #1A222C;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 200;
    padding: 8px;

    /* Анимация появления */
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    visibility: hidden;
    transition: all 0.2s ease-out;
}

/* Показываем меню, когда у родителя есть класс .is-open */
.custom-dropdown.is-open .dropdown-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

/* Стили для пунктов меню */
.custom-dropdown .dropdown-item {
    padding: 12px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.15s ease-in-out;
}

.custom-dropdown .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.form-group select {
    -webkit-appearance: none; /* Убираем стандартный вид в Chrome/Safari */
    -moz-appearance: none;    /* Убираем стандартный вид в Firefox */
    appearance: none;         /* Убираем стандартный вид в других браузерах */

    width: 100%;
    background-color: var(--input-bg); /* Используем твою переменную цвета */
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px;
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group select:focus {
    outline: none;
    border-color: var(--blue); /* Подсветка при фокусе */
    box-shadow: 0 0 0 3px rgba(49, 166, 248, 0.2);
}

.form-group { margin-bottom: 22px; position: relative; }
.form-group label { display: block; font-weight: 500; margin-bottom: 10px; color: var(--hint); font-size: 14px; }
.form-group input, .form-group select {
    width: 100%; padding: 15px; background-color: var(--input-bg);
    border: 1px solid var(--card-border); color: var(--text); border-radius: 12px;
    font-size: 16px; font-family: 'Inter', sans-serif; transition: all 0.2s ease;
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(49, 166, 248, 0.2); }

.quantity-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 12px;
}
.preset-btn {
    padding: 10px;
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    color: var(--hint);
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s ease;
}
.preset-btn:hover {
    border-color: var(--blue);
    color: var(--text);
}
.preset-btn.active {
    background-color: var(--blue);
    color: var(--text);
    border-color: var(--blue);
    box-shadow: 0 0 15px rgba(62, 168, 247, 0.3);
}

.select-wrapper { display: none; } /* Прячем старую обертку */
.custom-select-wrapper {
    position: relative;
    user-select: none;
}
.custom-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background-color: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: #1A222C; /* ИСПРАВЛЕНО: Плотный, непрозрачный фон, как у меню профиля */
    border: 1px solid var(--card-border);
    border-radius: 12px;
    z-index: 10;
    padding: 8px;
    max-height: 200px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: all 0.2s ease;
}
.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(49, 166, 248, 0.2);
}
.select-arrow {
    stroke: var(--hint);
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}
.custom-select-wrapper.open .select-arrow {
    transform: rotate(180deg);
}

.custom-option .option-text {
    display: flex;
    justify-content: space-between; /* раскидывает по краям */
    align-items: center;
    width: 100%; /* занимает всю доступную ширину */
}

/* Стиль для самого бейджа с комиссией */
.commission-badge {
    font-size: 0.8em; /* чуть меньше основного текста */
    font-weight: 500;
    color: #8A9AAB; /* приглушенный цвет */
    background-color: rgba(138, 154, 171, 0.1); /* полупрозрачный фон */
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 8px; /* небольшой отступ слева */
}

/* Когда опция выбрана и отображается в заголовке,
   бейдж тоже должен быть виден */
#selected-payment-display .option-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#selected-payment-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
}
#selected-payment-display img {
    width: 24px;
    height: 24px;
}
.custom-select-wrapper.open .custom-options {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.custom-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}
.custom-option img {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease; /* Добавим плавности для ховера */
}
.custom-option:hover { background-color: rgba(255, 255, 255, 0.05); }
.custom-option.selected {
    /* Неактивная выбранная опция - просто не показываем */
    display: none;
}

.price-calculation { background: var(--input-bg); padding: 16px; border-radius: 12px; margin-top: 24px; text-align: center; }
.price-calculation p { margin: 0 0 4px 0; font-size: 13px; color: var(--hint); }
.price-calculation strong { font-size: 28px; font-weight: 700; color: var(--text); }

#submit-btn { width: 100%; margin-top: 20px; padding: 16px; background: var(--blue); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; }
#submit-btn:hover:not(:disabled) {
    background-color: #4eb3f8; /* Делаем цвет чуть ярче */
    /*transform: translateY(-2px); /* Слегка приподнимаем кнопку */
    box-shadow: 0 8px 25px rgba(62, 168, 247, 0.1); /* Тень делаем мягче и более рассеянной */
}
#submit-btn:disabled { background: #2a3847; color: var(--hint); cursor: not-allowed; }

/* --- ПЕРЕРИСОВАННЫЕ, "ЖИВЫЕ" БЛОКИ --- */
.how-it-works-section, .features-section, .faq-section { padding: 60px 30px; animation: fade-in-up 0.8s ease-out; animation-fill-mode: backwards; }
.how-it-works-section { animation-delay: 0.3s; padding-top: 80px; }
.features-section { animation-delay: 0.4s; }
.faq-section { animation-delay: 0.5s; padding-top: 0; }
.site-footer-bottom { 
    padding: 30px; 
    border-top: 1px solid var(--card-border); 
    /* margin-top: 60px;  <-- УДАЛИ ИЛИ ЗАКОММЕНТИРУЙ */
    margin-top: auto;   /* <--- ДОБАВЬ ЭТУ СТРОКУ */
}


.how-it-works-section h2, .features-section h2, .faq-section h2 { text-align: center; margin: 0 auto 60px; font-size: 36px; max-width: 600px; font-weight: 800; }

.steps-container { display: flex; justify-content: space-between; align-items: flex-start; max-width: 1000px; margin: 0 auto; position: relative; }
.step-item { flex: 1; text-align: center; padding: 0 20px; }
.step-icon {
    display: flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--card-bg); border: 2px solid var(--card-border);
    margin: 0 auto 20px; transition: all 0.3s ease;
}
.step-icon span { color: var(--blue); font-size: 20px; font-weight: 700; }
.step-item:hover .step-icon { border-color: var(--blue); box-shadow: 0 0 20px rgba(62, 168, 247, 0.3); transform: scale(1.1); }
.step-item h3 { font-size: 20px; margin: 0 0 10px; }
.step-item p { margin: 0; color: var(--hint); line-height: 1.6; }
.step-connector { flex-grow: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--card-border), var(--card-border) 4px, transparent 4px, transparent 10px); margin: 30px -20px 0; }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1100px; margin: 0 auto; }
.feature-card {
    background: var(--card-bg); border-radius: 20px; padding: 30px;
    border: 1px solid var(--card-border); text-align: center;
    transition: all 0.3s ease;
}
.feature-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.2); border-color: var(--blue); }
.feature-icon {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 16px;
    background: var(--input-bg); color: var(--blue);
    margin: 0 auto 25px;
}
.feature-card h3 { font-size: 20px; margin: 0 0 10px; }
.feature-card p { margin: 0; color: var(--hint); line-height: 1.6; }

.faq-content { max-width: 800px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 15px; }
.faq-item summary {
    font-weight: 500;
    font-size: 17px;
    cursor: pointer;
    padding: 20px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center; /* <-- Добавлена эта строка */
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 24px; color: var(--hint); transition: transform 0.3s ease-out; }
.faq-item[open] summary { color: var(--text); }
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--text); }
.faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}
.faq-item[open] .faq-answer {
    /* Установите значение, которое точно больше высоты контента */
    max-height: 200px;
}
.faq-answer p { color: var(--hint); line-height: 1.6; font-size: 15px; padding: 0 20px 20px; margin: 0; min-height: 0; }

.footer-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.footer-content p { margin: 0; color: var(--hint); }
.footer-nav a { margin-left: 20px; color: var(--hint); text-decoration: none; }
.footer-nav a:hover { color: var(--text); }

@media (max-width: 900px) {
    /* Меняем сетку на одну колонку для всех основных блоков */
    .main-grid, 
    .steps-container-new, /* <-- Добавляем наш новый блок */
    .features-grid { 
        grid-template-columns: 1fr;
        max-width: 500px;
        gap: 30px; /* Уменьшаем отступ между карточками */
        margin-top: 40px;
    }

    .hero-section { 
        text-align: center;
    }

    .features-list { 
        justify-content: center;
    }

    .feature-card { 
        max-width: 350px; 
        margin: 0 auto; 
    }

    /* Прячем разделитель-звезду на мобильных, чтобы не мешался */
    .section-divider {
        display: none;
    }
}

@media (max-width: 768px) {
    body { 
        padding-top: 65px; 
    }
    .site-nav { 
        display: none; 
    }
    .main-grid, 
    .faq-section, 
    .header-content, 
    .how-it-works-section, 
    .features-section {
        padding-left: 20px;
        padding-right: 20px;
    }
    .how-it-works-section h2, .features-section h2, .faq-section h2 {
        font-size: 32px; /* Уменьшаем заголовки секций */
        margin-bottom: 40px;
    }
    .hero-section h1 { 
        font-size: 40px; 
    }
    .footer-content { 
        flex-direction: column; 
        gap: 15px; 
        text-align: center; 
    }
    .footer-nav { 
        display: flex; 
        flex-direction: column; 
        gap: 10px; 
    }
    .footer-nav a { 
        margin-left: 0; 
    }
}

/* --- Новые стили для уведомлений --- */
#notification-container {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.notification {
    background: #2a3847;
    border: 1px solid var(--card-border);
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 320px;
    opacity: 0;
    transform: translateX(100%);
    animation: toast-in 0.5s forwards ease-out;
}
.notification.exiting {
    animation: toast-out 0.5s forwards ease-in;
}

.notification-icon {
    flex-shrink: 0;
}
.notification-icon svg {
    width: 24px;
    height: 24px;
}
.notification-content p {
    margin: 0;
    font-weight: 500;
    color: var(--text);
}
.notification-content span {
    font-size: 14px;
    color: var(--hint);
}

.notification.wait .notification-icon svg { color: var(--blue); }
.notification.success .notification-icon svg { color: var(--success); }
.notification.error .notification-icon svg { color: var(--error); }

.user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px;
    border-radius: 99px;
    transition: background-color 0.2s ease;
}

.user-profile:hover, .user-profile.active {
    background-color: var(--input-bg);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #2a3847;
}

.user-name {
    font-weight: 500;
    font-size: 15px;
    color: var(--text);
    margin-right: 4px;
}

.profile-arrow {
    stroke: var(--hint);
    transition: transform 0.2s ease-in-out;
}

.user-profile.active .profile-arrow {
    transform: rotate(180deg);
}

/* --- НОВЫЕ, УЛУЧШЕННЫЕ СТИЛИ ДЛЯ ВЫПАДАЮЩЕГО МЕНЮ --- */
.profile-dropdown {
    position: absolute;
    top: 75px;
    right: 30px;
    width: 260px;
    /* НЕПРОЗРАЧНЫЙ ФОН */
    background: #1A222C; 
    border: 1px solid var(--card-border);
    /* МЕНЕЕ ЗАКРУГЛЕННЫЕ УГЛЫ */
    border-radius: 10px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 200;
    overflow: hidden;

    opacity: 0;
    transform: translateY(10px) scale(0.95);
    visibility: hidden;
    transition: all 0.2s ease-out;
}

.profile-dropdown.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}


.dropdown-links {
    padding: 8px;
}

.dropdown-item {
    display: flex; /* Для выравнивания иконки и текста */
    align-items: center;
    gap: 12px; /* Отступ между иконкой и текстом */
    padding: 12px;
    color: var(--hint);
    text-decoration: none;
    font-size: 15px;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item svg {
    width: 20px;
    height: 20px;
    stroke: var(--hint);
    stroke-width: 1.5;
    fill: none;
    transition: stroke 0.2s ease;
}

.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

.dropdown-item:hover svg {
    stroke: var(--text);
}

.dropdown-footer {
    padding: 8px;
    border-top: 1px solid var(--card-border);
}

.dropdown-item.logout span {
    color: #ff6b6b;
    font-weight: 500;
}

.dropdown-item.logout svg {
    stroke: #ff6b6b;
}

.dropdown-item.logout:hover span {
    color: #ff8585;
}
.dropdown-item.logout:hover svg {
    stroke: #ff8585;
}
body.auth-loading #login-btn,
body.auth-loading #user-profile {
    visibility: hidden;
}

/* Общий стиль для контейнеров-сеток */
.steps-container-new, .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Общий стиль для обеих карточек */
.step-card-new, .feature-card {
    background-color: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* --- МАГИЯ СВЕЧЕНИЯ, ТЕПЕРЬ ДЛЯ ВСЕХ КАРТОЧЕК --- */
.step-card-new::before,
.feature-card::before {
    content: '';
    position: absolute;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(62, 168, 247, 0.15) 0%, transparent 80%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.step-card-new:hover,
.feature-card:hover {
    border-color: rgba(62, 168, 247, 0.4);
}

.step-card-new:hover::before,
.feature-card:hover::before {
    opacity: 1; /* Показываем свечение при наведении */
}

/* Общий стиль для контента, чтобы он был поверх свечения */
.step-card-new > *,
.feature-card > * {
    position: relative;
    z-index: 2;
}


/* --- Уникальные стили для карточек "Как это работает" --- */
.step-card-new .step-number-bg {
    position: absolute;
    top: -20px;
    right: 15px;
    font-size: 96px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.03);
    z-index: 1;
    user-select: none;
}
.step-card-new .step-icon {
    margin-bottom: 24px;
}
.step-card-new h3 {
    text-align: left;
}
.step-card-new p {
    text-align: left;
}


/* --- Уникальные стили для карточек "Преимущества" --- */
.feature-card {
    text-align: center;
}
.feature-card .feature-icon {
    margin: 0 auto 25px; /* Центрируем иконку */
}
.feature-card:hover .feature-icon {
    background: var(--blue);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(62, 168, 247, 0.4);
}

/* Общий стиль для иконок в обоих блоках */
.step-icon,
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--card-bg);
    color: var(--blue); /* Задаем цвет для SVG */
    margin-bottom: 25px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}
.step-icon svg,
.feature-icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor; /* Наследует цвет (color) от родителя */
    stroke-width: 2;
    fill: none;
}
.feature-card:hover .feature-icon svg {
    stroke: white;
}

/* Удаляем старые, неиспользуемые классы, если они остались */
.steps-container, .step-connector, .step-item, .step-card-glow {
    display: none;
}

@media (max-width: 900px) {
    /* Меняем все наши 2-х и 3-х колоночные сетки на одну колонку */
    .main-grid,
    .steps-container-new, /* <-- ИСПОЛЬЗУЕМ ПРАВИЛЬНЫЙ КЛАСС */
    .features-grid {
        grid-template-columns: 1fr; /* Ставим одну колонку */
        max-width: 500px;
        gap: 30px; /* Уменьшаем отступ между карточками */
    }
    .main-grid {
        margin-top: 40px;
    }

    .hero-section {
        text-align: center;
        order: -1; /* Поднимаем текстовый блок над формой на мобильных */
    }

    .features-list {
        justify-content: center;
    }

    .feature-card {
        max-width: 380px;
        margin: 0 auto;
    }

    /* Прячем наш красивый разделитель на мобильных, чтобы не мешался */
    .section-divider {
        display: none;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }
    .site-nav {
        display: none;
    }
    .main-grid,
    .faq-section,
    .header-content,
    .how-it-works-section,
    .features-section {
        padding-left: 20px;
        padding-right: 20px;
    }
    .history-page-header {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 25px;
    }
    .history-page-header h2 {
        font-size: 28px;
        text-align: center;
    }
    .details-info p {
        font-size: 13px;
    }
    .transaction-amount {
        font-size: 14px;
    }
    .how-it-works-section, .features-section {
        padding-top: 60px; /* Уменьшаем вертикальные отступы */
        padding-bottom: 60px;
    }
    .how-it-works-section h2, .features-section h2, .faq-section h2 {
        font-size: 32px; /* Уменьшаем заголовки секций */
        margin-bottom: 40px;
    }
    .hero-section h1 {
        font-size: 48px; /* Делаем главный заголовок крупнее */
    }
    .footer-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .footer-nav {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .footer-nav a {
        margin-left: 0;
    }
}

@keyframes star-pulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(62, 168, 247, 0.4));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 16px rgba(62, 168, 247, 0.6));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(62, 168, 247, 0.4));
    }
}

/*
 * НОВАЯ, УЛУЧШЕННАЯ ВЕРСИЯ РАЗДЕЛИТЕЛЯ
 */

.section-divider {
    display: flex;          /* Включаем flexbox для выравнивания */
    align-items: center;      /* Выравниваем звезду и линии по центру */
    gap: 20px;              /* <-- Создаем отступ в 20px слева и справа от звезды */
    max-width: 800px;
    margin: 100px auto;
}

/* Создаем левую и правую линию */
.section-divider::before,
.section-divider::after {
    content: '';              /* Обязательное свойство для псевдоэлементов */
    height: 1px;              /* Высота линии */
    flex-grow: 1;             /* Заставляем линии растягиваться на всё доступное место */
}

/* Левая линия с градиентом, исчезающим слева */
.section-divider::before {
    background: linear-gradient(to left, var(--card-border), transparent);
}
/* Правая линия с градиентом, исчезающим справа */
.section-divider::after {
    background: linear-gradient(to right, var(--card-border), transparent);
}


/* Стили для самой звезды */
.divider-star {
    /* УБИРАЕМ фон и лишние отступы, так как теперь в них нет нужды */
    padding: 0;
    /* background: var(--bg); -- УДАЛЕНО */
}

/* Стили для SVG-иконки звезды (остаются без изменений) */
.divider-star svg {
    width: 32px;
    height: 32px;
    color: var(--blue);
    animation: star-pulse 4s infinite ease-in-out;
}

/* --- НОВАЯ АНИМАЦИЯ ДЛЯ ПРЕЛОАДЕРА --- */
@keyframes logo-pulse {
    0% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 10px rgba(62, 168, 247, 0.3));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 25px rgba(62, 168, 247, 0.6));
    }
    100% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 10px rgba(62, 168, 247, 0.3));
    }
}

/* --- СТИЛИ ДЛЯ ПРЕЛОАДЕРА --- */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg); /* Фон в цвет сайта */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Выше всех остальных элементов */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Плавное исчезновение */
}
.preloader.hidden {
    opacity: 0;
    visibility: hidden;
}
.preloader-logo svg {
    color: var(--blue);
    animation: logo-pulse 2s infinite ease-in-out;
}




.history-page-container {
    max-width: 700px;
    margin: 60px auto; /* Сверху/снизу отступ, по бокам auto для центрирования */
    padding: 0 20px;
}

/* Контейнер страницы, чтобы контент был по центру, а не растягивался */
.simple-history-page {
    max-width: 700px;
    margin: 60px auto; /* 60px сверху/снизу, auto по бокам для центрирования */
    padding: 0 20px;   /* Небольшие отступы по бокам для мобильных */
}

/* Шапка с заголовком и фильтрами */
.history-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    animation: fade-in-up 0.5s ease-out;
}

.history-page-header h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
}

/* Стили для кнопок-фильтров */
.filter-group {
    display: flex;
    background-color: var(--input-bg);
    padding: 6px;
    border-radius: 10px;
}
.filter-btn {
    padding: 8px 16px;
    border: none;
    background-color: transparent;
    color: var(--hint);
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
.filter-btn:hover {
    color: var(--text);
}
.filter-btn.active {
    color: var(--text);
    background-color: var(--blue);
}

/* Список транзакций */
.transaction-list {
    position: relative; /* Нужно для позиционирования спиннера */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;

    display: flex;
    flex-direction: column;
    gap: 12px;
}
.transaction-list.is-loading {
    opacity: 0.5;
    pointer-events: none; /* Блокируем клики на старые элементы */
}
.transaction-list.is-updating {
    opacity: 0;
    /* Можно добавить легкое смещение для красоты */
    transform: translateY(20px);
}

.transaction-item {
    display: flex;
    flex-direction: column; /* <-- ЗАМЕНА 1: Ставим вертикальное направление */
    padding: 0;             /* <-- ЗАМЕНА 2: Убираем внутренний отступ */
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    transition: transform 0.3s ease, border-color 0.2s ease, opacity 0.4s ease, transform 0.4s ease;
    /*animation: fade-in-up 0.5s ease-out forwards;*/
    cursor: pointer;
}
.transaction-summary {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    width: 100%;
}
.transaction-item:hover {
    transform: translateY(-4px);
    border-color: rgba(62, 168, 247, 0.4);
}
/* Стрелочка для спойлера */
.details-arrow {
    margin-left: auto; /* Прижимаем к правому краю */
    padding-left: 16px;
}
.details-arrow svg {
    stroke: var(--hint);
    transition: transform 0.3s ease-in-out;
}

/* Поворачиваем стрелочку при открытии */
.transaction-item.is-open .details-arrow svg {
    transform: rotate(180deg);
}

/* Скрытый контент спойлера */
.details-content {
    max-height: 0; /* Изначально блок сжат */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.3s ease-in-out;
    padding: 0 20px; /* Убираем отступы, когда блок сжат */
    border-top: 1px solid transparent; /* Разделитель, который появится при открытии */
}

/* Стили для открытого спойлера */
.transaction-item.is-open .details-content {
    max-height: 250px; /* Раскрываем блок до этой высоты */
    padding: 20px; /* Возвращаем отступы */
    border-top-color: var(--card-border);
}

/* Детальная информация внутри спойлера */
/* Детальная информация внутри спойлера */
.details-info {
    margin-bottom: 20px;
    /* Новые свойства для правильной структуры */
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    overflow: hidden;
}
.details-info p {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Улучшение для выравнивания */
    font-size: 14px;
    color: var(--hint);
    margin: 0 0 8px;
    /* Ключевые свойства для исправления переноса текста */
    white-space: normal;
    word-wrap: break-word;
}
.details-info p strong {
    font-weight: 500;
    color: var(--hint);
    /* Отступ и защита от сжатия */
    margin-right: 16px;
    flex-shrink: 0;
}
.details-info p span {
    color: var(--text);
    font-weight: 500;
    /* Выравнивание по правому краю */
    text-align: right;
}

/* Кнопка "Задать вопрос" (без изменений) */
.details-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--hint);
    text-decoration: none;
    font-size: 15px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.details-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text);
}
.details-action-btn svg {
    width: 20px;
    height: 20px;
}
/* Элементы внутри карточки */
.transaction-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 16px; flex-shrink: 0; }
.transaction-icon svg { width: 20px; height: 20px; stroke-width: 2; }
.transaction-details { flex-grow: 1; }
.transaction-details strong { font-size: 15px; font-weight: 500; color: var(--text); display: block; }
.transaction-details span { font-size: 13px; color: var(--hint); }
.transaction-amount { font-size: 15px; font-weight: 600; margin-left: 16px; }

/* Цвета для типов транзакций */
.transaction-amount.deposit { color: #34D399; }
.transaction-icon.deposit { background-color: rgba(52, 211, 153, 0.1); color: #34D399; }
.transaction-icon.deposit svg { stroke: #34D399; }

.transaction-amount.expense { color: #ff5c5c; }
.transaction-icon.expense { background-color: rgba(255, 92, 92, 0.1); color: #ff5c5c; }
.transaction-icon.expense svg { stroke: #ff5c5c; }




/* Сообщение, если транзакций нет */
.loading-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: var(--hint);
    font-size: 15px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
}


.pagination-container {
    text-align: center;
    margin-top: 30px;
    padding-bottom: 20px;
    transition: opacity 0.3s ease; /* <--- ДОБАВЬ ЭТУ СТРОКУ */

}

.load-more-btn {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--hint);
    padding: 12px 30px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.load-more-btn:hover:not(:disabled) {
    border-color: var(--blue);
    color: var(--text);
}

.load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}








/* Подзаголовок для секций */
.section-subtitle {
    font-size: 18px;
    color: var(--hint);
    line-height: 1.6;
    max-width: 700px;
    margin: -40px auto 60px;
    text-align: center;
}


/* Герой-блок на реферальной странице */
.referral-hero .hero-section {
    animation-delay: 0s;
}

.hero-actions {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.hero-cta-btn {
    padding: 14px 28px;
    font-size: 16px;
}

.secondary-btn {
    background: var(--input-bg);
    color: var(--hint);
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--card-border);
    transition: all 0.2s ease;
}

.secondary-btn:hover {
    color: var(--text);
    border-color: var(--hint);
}


/* Визуализация уровней в герой-блоке */
.hero-visual-card {
    background: var(--card-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 20px;
    padding: 32px;
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px; /* Чтобы карточка не была слишком маленькой */
}

.referral-level-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.level-node {
    background-color: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 12px 20px;
    text-align: center;
    width: 80%;
    max-width: 200px;
}
.level-node span {
    display: block;
    font-size: 14px;
    color: var(--hint);
}
.level-node strong {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}
.level-node.you {
    padding: 16px 20px;
    background-color: var(--blue);
}
.level-node.you span {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.level-branch {
    width: 2px;
    height: 30px;
    background: repeating-linear-gradient(
        var(--card-border),
        var(--card-border) 4px,
        transparent 4px,
        transparent 8px
    );
}

/* Сетка для карточек с уровнями (Bronze, Silver, Gold) */
.tiers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.tier-card {
    background-color: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.tier-card:hover {
    transform: translateY(-5px);
    border-color: rgba(62, 168, 247, 0.4);
}

.tier-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--card-border);
}

.tier-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: var(--card-bg);
}

.tier-icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: currentColor;
}

.tier-info h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
}

.tier-info span {
    color: var(--hint);
    font-size: 14px;
}

.tier-body p {
    color: var(--hint);
    line-height: 1.6;
    margin-top: 0;
    flex-grow: 1; /* Чтобы тело карточки занимало доступное место */
}

.tier-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tier-perks li {
    color: var(--text);
    font-weight: 500;
}
.tier-perks li strong {
    color: var(--blue);
    font-weight: 700;
    font-size: 18px;
    margin-right: 8px;
}

.star-icon {
  color: #f5f5f5; /* или любой другой цвет звезды */
  width: 0.7em;
  height: 0.7em;
  align-items: center;
}
.quantity-presets .icon-star {
  width: 0.8em;
  height: 0.8em;
  align-items: center;
}

/* Адаптация для мобильных устройств */
@media (max-width: 900px) {
    .referral-hero {
        text-align: center;
    }
    .hero-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    .hero-visual-card {
        order: -1; /* Ставим карточку с визуализацией над текстом */
        margin-top: 0;
    }
    .tiers-grid {
        grid-template-columns: repeat(1, 1fr);
        max-width: 700px;
    }
}
@media (max-width: 768px) {
    .section-subtitle {
        font-size: 16px;
        margin: -30px auto 40px;
    }
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
}


.dynamic-referral-visual {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 250px;
    margin: 40px auto;
    animation: fade-in-up 1s ease-out;
}

/* Общие стили для узлов (юзер, друзья) */
.node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 80px;
    opacity: 0;
    animation: node-fade-in 0.5s ease-out forwards;
}
.node-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 50%;
}
.node-icon svg {
    width: 24px;
    height: 24px;
    color: var(--hint);
}
.node > span {
    font-size: 13px;
    color: var(--hint);
    font-weight: 500;
}

/* Позиционирование узлов */
.user-node { left: 50%; top: 10px; transform: translateX(-50%); animation-delay: 0.2s; }
.friend-1 { left: 10px; top: 130px; animation-delay: 0.4s; }
.friend-2 { right: 10px; top: 130px; animation-delay: 0.6s; }
.user-node .node-icon { background: var(--blue); }
.user-node .node-icon svg { color: white; }

/* Баланс пользователя */
.user-balance {
    background: var(--input-bg);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    transition: all 0.2s ease;
}
.user-balance.highlight {
    transform: scale(1.1);
    background: #34D399; /* Зеленый цвет успеха */
    box-shadow: 0 0 15px #34D399;
}

/* SVG с линиями */
.connectors {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 300px; height: 200px;
    stroke: var(--card-border);
    stroke-width: 1.5;
    stroke-dasharray: 5;
    opacity: 0.5;
}

/* Уведомления и пакеты с комиссией */
.purchase-bubble, .commission-packet {
    position: absolute;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.5);
}
.purchase-bubble {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    border: 1px solid var(--card-border);
}
.commission-packet {
    background: var(--blue);
    color: white;
    offset-path: path('M 0 0'); /* Путь по умолчанию */
    box-shadow: 0 0 15px var(--blue);
}

/* Анимации */
@keyframes node-fade-in {
    to { opacity: 1; }
}

/* --- Анимация для первого реферала --- */
#purchase-1 { animation: show-purchase 1s ease-out 2s forwards; }
#commission-1 { animation: move-packet-1 2s ease-in-out 3s forwards; }
#balance-highlight-1 { animation: highlight-balance 1s ease 5s forwards; }

/* --- Анимация для второго реферала --- */
#purchase-2 { animation: show-purchase 1s ease-out 7s forwards; }
#commission-2 { animation: move-packet-2 2s ease-in-out 8s forwards; }
#balance-highlight-2 { animation: highlight-balance 1s ease 10s forwards; }

/* Общие кейфреймы */
@keyframes show-purchase {
    0% { transform: scale(0.5) translateY(0); opacity: 0; }
    50% { transform: scale(1.1) translateY(-10px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes highlight-balance {
    50% {
        transform: scale(1.1);
        background: #34D399;
        box-shadow: 0 0 15px #34D399;
    }
}

/* Кейфреймы для движения пакетов по путям */
@keyframes move-packet-1 {
    0% { opacity: 1; transform: scale(0.7); offset-distance: 100%; }
    90% { transform: scale(1); }
    100% { opacity: 0; offset-distance: 0%; transform: scale(0.5); }
}
@keyframes move-packet-2 {
    0% { opacity: 1; transform: scale(0.7); offset-distance: 100%; }
    90% { transform: scale(1); }
    100% { opacity: 0; offset-distance: 0%; transform: scale(0.5); }
}

/* Привязка пакетов к их путям */
#commission-1 { offset-path: path('M 60 140 Q 80 70 150 50'); }
#commission-2 { offset-path: path('M 240 140 Q 220 70 150 50'); }

/* Позиционирование всплывающих окон покупки */
#purchase-1 { top: 140px; left: 90px; }
#purchase-2 { top: 140px; right: 90px; }

/* Общая анимация цикла */
.dynamic-referral-visual {
    animation: main-loop 12s infinite 2s;
}
@keyframes main-loop {
    0% { opacity: 1; }
    95% { opacity: 1; }
    100% { opacity: 0; }
}

/* Адаптивность */
@media (max-width: 900px) {
    .dynamic-referral-visual { order: -1; }
}
@media (max-width: 480px) {
    .dynamic-referral-visual { transform: scale(0.8); margin: 0 auto; }
}

/* Удаляем старые стили, чтобы не было конфликтов */
.hero-visual-card, .referral-level-visual, .level-node, .level-branch {
    display: none;
}

/* Основной контейнер для нового визуала */
.hero-visual-reimagined {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    perspective: 1000px; /* Для 3D эффектов */
}

.referral-rings-container {
    position: relative;
    width: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fade-in-up 1s ease-out 0.2s backwards;
}

/* Анимация вращения для колец */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spin-reverse {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* Стили для каждого кольца */
.ring {
    position: absolute;
    border-radius: 50%;
    border-style: dashed;
    border-width: 1px;
    opacity: 0.5;
    transition: all 0.4s ease;
}

.ring-1 {
    width: 180px;
    height: 180px;
    border-color: var(--blue);
    animation: spin 30s linear infinite;
}

.ring-2 {
    width: 260px;
    height: 260px;
    border-color: rgba(62, 168, 247, 0.6);
    animation: spin-reverse 40s linear infinite;
    animation-delay: -5s;
}

.ring-3 {
    width: 340px;
    height: 340px;
    border-color: rgba(62, 168, 247, 0.4);
    animation: spin 50s linear infinite;
}

.referral-rings-container:hover .ring {
    opacity: 1;
    border-width: 2px;
    border-style: solid;
}

/* Центральный элемент "Вы" */
.center-node {
    position: relative;
    z-index: 10;
    width: 80px;
    height: 80px;
    background-color: var(--blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 25px rgba(62, 168, 247, 0.5), inset 0 0 10px rgba(255,255,255,0.3);
    border: 2px solid rgba(255,255,255,0.5);
    transition: transform 0.3s ease;
}
.center-node span {
    font-size: 22px;
    font-weight: 700;
    color: white;
}
.referral-rings-container:hover .center-node {
    transform: scale(1.1);
}

/* Текстовые метки на кольцах */
.ring-label {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(-50%); /* Центрируем и выносим над кольцом */
    background-color: var(--bg);
    padding: 4px 10px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
}

.ring-label strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    display: block;
}

.ring-label span {
    font-size: 12px;
    color: var(--hint);
    font-weight: 500;
}

.ring-2 .ring-label {
    top: auto;
    bottom: 0;
    transform: translateX(-50%) translateY(50%);
}

.ring-3 .ring-label {
    left: 0;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/* Декоративные искры */
@keyframes pulse-spark {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 1; }
}

.spark {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--blue);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--blue);
    animation: pulse-spark 3s infinite ease-in-out;
}
.s1 { top: 15%; left: 15%; animation-delay: 0s; }
.s2 { top: 20%; right: 10%; animation-delay: 1s; }
.s3 { bottom: 10%; left: 25%; animation-delay: 2s; }


/* Адаптация для мобильных устройств */
@media (max-width: 900px) {
    .hero-visual-reimagined {
        margin: 0 auto 30px;
        order: -1;
    }
}
@media (max-width: 400px) {
    .referral-rings-container {
        transform: scale(0.85); /* Уменьшаем весь блок на маленьких экранах */
    }
}





/* --- Стили для страницы профиля (Финальная версия 4.0) --- */

/* Анимация для плавного появления */
@keyframes fade-in-stagger {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Основной контейнер страницы */
.profile-page-container {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
}

/* Верхняя сетка из двух колонок */
.profile-top-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    align-items: start; /* <-- ИЗМЕНЕНИЕ: Возвращаем растягивание */
    gap: 20px;
    margin-bottom: 20px;
}

/* Левая и правая колонки */
.profile-left-column, .profile-right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.profile-user-card {
    /* Добавляем position и overflow для работы псевдо-элементов */
    position: relative;
    overflow: hidden;

    /* Ваши существующие стили */
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    animation: fade-in-stagger 0.5s ease-out 0.1s forwards;
    opacity: 0;

    /* Плавный переход для рамки при наведении */
    transition: border-color 0.3s ease;
}

/* Эффект глянцевого блика в левом верхнем углу */
.profile-user-card::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -70px;
    width: 150px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.08); /* Очень легкий белый оттенок */
    filter: blur(30px); /* Сильно размываем для мягкого эффекта */
    transform: rotate(20deg); /* Небольшой наклон */
    z-index: 2;
}

/* Эффект аккуратного свечения в правом нижнем углу */
.profile-user-card::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(62, 168, 247, 0.12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}

/* Весь контент карточки (аватар, текст) должен быть поверх эффектов */
.profile-user-card > * {
    position: relative;
    z-index: 3;
}

/* Простое выделение рамкой при наведении */
.profile-user-card:hover {
    border-color: rgba(62, 168, 247, 0.4);
}
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--blue); flex-shrink: 0; }
.profile-user-card .user-details h1 { font-size: 24px; margin: 0 0 4px; }
.profile-user-card .user-details span { color: var(--hint); font-size: 15px; }

/* 2. Стилизуем новый значок уровня */
.profile-level-badge {
    display: inline-block;
    margin-top: 10px;
    margin-left: 7px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 3. Задаем переменные по умолчанию и используем их в стилях */
.profile-user-card {
    /* Задаем цвет по умолчанию (Bronze) */
    --level-color: var(--color-bronze);
}
.profile-user-card .profile-avatar {
    /* Рамка аватара теперь зависит от уровня */
    border-color: var(--level-color);
}
.profile-user-card .profile-level-badge {
    /* Текст значка теперь зависит от уровня */
    color: var(--level-color);
}
.profile-user-card::after { /* Свечение */
    /* Свечение теперь тоже зависит от уровня! */
    background: radial-gradient(circle, var(--level-color, var(--color-bronze)) 0%, transparent 65%);
    opacity: 0.15; /* Делаем свечение чуть ярче */
}
.profile-user-card::before { /* Глянец */
    /* Глянец тоже может быть цветным, но оставим его белым для контраста */
    background-color: rgba(255, 255, 255, 0.08);
}






/* 4. А теперь — переопределяем цвета для каждого уровня */

/* Для уровня Silver */
.level-silver {
    --level-color: var(--color-silver);
}

/* Для уровня Gold */
.level-gold {
    --level-color: var(--color-gold);
}

/* ==============================================
    💎 СПЕЦИАЛЬНОЕ ОФОРМЛЕНИЕ PLATINUM 💎
==============================================
*/

:root {
    --color-platinum-1: #83e4ff;
    --color-platinum-2: #a594ff;
}

@keyframes rotate-glow {
    from { transform: translate(50%, 50%) rotate(0deg); }
    to { transform: translate(50%, 50%) rotate(360deg); }
}

.level-platinum {
    --level-color: var(--color-platinum-1);
}

/* Эффект свечения для Platinum */
.level-platinum::after {
    background: conic-gradient(
        from 0deg,
        var(--color-platinum-2),
        var(--color-platinum-1),
        var(--color-platinum-2),
        transparent 60%
    );
    animation: rotate-glow 5s linear infinite;
    opacity: 0.3;
    bottom: auto;
    right: auto;
    top: 50%;
    left: 50%;
    transform-origin: center;
}



/* Градиентный текст для значка Platinum */
.level-platinum .profile-level-badge {
    background-image: linear-gradient(45deg, var(--color-platinum-1), var(--color-platinum-2));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    border-color: var(--color-platinum-1);
}

/* Не забудьте этот стиль для иконки в правой карточке */
.tier-card .tier-icon {
    color: var(--level-color, var(--color-bronze));
}

/* Сетка статистики */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    animation: fade-in-stagger 0.5s ease-out 0.2s forwards;
    opacity: 0;
}
.stat-card {
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.stat-icon { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background-color: var(--card-bg); color: var(--hint); }
.stat-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.stat-content .stat-value { font-size: 22px; font-weight: 700; color: var(--text); margin: 0; }
.stat-content .stat-label { font-size: 14px; color: var(--hint); margin: 0; line-height: 1.3; }
.stat-content .stat-value span { font-size: 16px; color: var(--hint); }


/* Карточка уровня (финальная правка выравнивания) */
.tier-card {
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 0; /* Убираем общий padding, будем задавать его для секций */
    animation: fade-in-stagger 0.5s ease-out 0.3s forwards;
    opacity: 0;
    display: flex;
    flex-direction: column; /* Выстраиваем контент в колонку */
}
.tier-card .tier-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    margin-bottom: 0; /* Убираем старый отступ */
    border-bottom: 1px solid var(--card-border); /* <-- ОСТАВЛЯЕМ ТОЛЬКО ЭТУ ЛИНИЮ */
}
.tier-card .tier-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: var(--card-bg);
}
.tier-card .tier-icon svg { width: 28px; height: 28px; }
.tier-card .tier-info h3 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.tier-card .tier-info span { color: var(--hint); font-size: 14px; }

.tier-card .tier-body {
    padding: 24px;
    border-top: none; /* <-- УБИРАЕМ ВЕРХНЮЮ РАМКУ */
}

.tier-card .tier-body p { color: var(--hint); line-height: 1.6; margin: 0 0 16px; font-size: 15px; }
.tier-card .tier-perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tier-card .tier-perks li {
  display: flex;
  align-items: center;
}

.tier-card .tier-perks li svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
  color: var(--blue);
  flex-shrink: 0;
  /* 1. Маленький отступ от иконки до процентов */
  margin-right: 6px;
}

/* Стили для КОЛОНКИ с процентами */
.tier-card .tier-perks li .perk-value {
  width: 35px;
  flex-shrink: 0;
  text-align: left;
  font-weight: 700;
  color: var(--blue);
  font-size: 18px;
  /* 2. Отступ побольше от процентов до текста */
  margin-right: 14px;
}

/* Стили для описания */
.tier-card .tier-perks li .perk-description {
  font-weight: 500;
  color: var(--text);
}



/* Нижний блок с реф. ссылкой (в стиле index.html) */
.profile-referral-section {
    background: var(--input-bg); /* <-- ИЗМЕНЕНИЕ: Фон как у карточек статистики */
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 32px;
    animation: fade-in-stagger 0.5s ease-out 0.4s forwards;
    opacity: 0;
    display: grid;
    grid-template-columns: 1fr 420px;
    align-items: center;
    gap: 40px;
}

.referral-text-content h3 {
    margin: 0 0 8px;
    font-size: 24px; /* Крупнее заголовок */
    font-weight: 700;
}

.referral-text-content p {
    color: var(--hint);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 450px;
}

.link-input-group {
    display: flex;
    background: var(--bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    overflow: hidden;
}
.link-input-group input {
    flex-grow: 1;
    padding: 14px 16px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 15px;
}
.link-input-group button {
    padding: 0 24px;
    border: none;
    background: var(--blue);
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s;
    min-width: 140px; /* <-- ИЗМЕНЕНИЕ: Задаем минимальную ширину */
    text-align: center; /* Центрируем текст внутри */
    justify-content: center;
}
.link-input-group button:hover { background: #4eb3f8; }

/* Адаптивность для этого блока */
@media (max-width: 900px) {
    .profile-referral-section {
        grid-template-columns: 1fr; /* В одну колонку */
        text-align: center;
    }
    .referral-text-content p {
        margin: 0 auto 24px; /* Центрируем параграф и добавляем отступ снизу */
    }
}

/* Адаптивность */
@media (max-width: 900px) { .profile-top-grid { grid-template-columns: 1fr; } }
@media (max-width: 550px) { .stats-grid { grid-template-columns: 1fr; } }


.discount-prompt {
    display: none; /* Изначально скрыт */
    background: rgba(62, 168, 247, 0.1);
    border: 1px solid rgba(62, 168, 247, 0.2);
    border-radius: 12px;
    padding: 15px;
    margin-top: 20px;

    opacity: 0;
    transform: scale(0.95);
    transition: all 0.4s ease-out;
}

.discount-prompt.visible {
    display: block; /* Показываем блок */
    opacity: 1;
    transform: scale(1);
}

/* Стили для контента внутри блока */
.prompt-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.prompt-icon {
    flex-shrink: 0;
    color: var(--blue);
}
.prompt-icon svg {
    width: 28px;
    height: 28px;
}

.prompt-text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.prompt-text span {
    font-size: 13px;
    color: var(--hint);
}
.prompt-text b {
    color: var(--blue);
    font-weight: 700;
}

/* ===== НОВЫЕ СТИЛИ ДЛЯ СОСТОЯНИЯ "СКИДКА ПРИМЕНЕНА" ===== */
.discount-prompt.applied {
    background: rgba(46, 204, 113, 0.1); /* Зеленый фон */
    border-color: rgba(46, 204, 113, 0.25); /* Зеленая рамка */
}

.discount-prompt.applied .prompt-icon {
    color: #2ecc71; /* Зеленый цвет иконки */
}





/* Новая обертка становится "якорем" для кнопки */
.input-with-button {
    position: relative;
}

/* Добавляем отступ справа в поле ввода, чтобы текст не заезжал под кнопку */
.input-with-button input#username {
    padding-right: 95px; /* Место для кнопки */
}

/* ФИНАЛЬНЫЙ СТИЛЬ КНОПКИ */
.self-fill-btn {
    /* --- 1. ИДЕАЛЬНОЕ ЦЕНТРИРОВАНИЕ --- */
    position: absolute;
    top: 50%; /* Ставим верхний край на середину */
    transform: translateY(-50%); /* Смещаем на половину своей высоты вверх */
    right: 10px;
    z-index: 5;

    /* Все остальные стили остаются прежними */
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 99px;
    color: var(--hint);
    cursor: pointer;
    font-weight: 500;
    padding: 5px 12px;
    font-size: 13px;
    align-items: center;
    gap: 6px;
}


.self-fill-btn.visible {
    display: inline-flex;
    opacity: 1;
}

/* Эффект при наведении в общем стиле сайта */
.self-fill-btn:hover {
    color: var(--text); /* Текст становится белым */
    border-color: var(--blue);
}

.self-fill-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}







/* Замени старые стили .discount-prompt / .status-block на эти */

/* Замени старые стили .status-block на эти */

.status-block {
    display: none; /* Изначально скрыт */
    border-radius: 12px;
    padding: 15px 20px;
    margin-top: 20px;
    opacity: 0;
    transform: scale(0.98);
    /* Плавная анимация появления/исчезновения */
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.status-block.visible {
    display: block;
    opacity: 1;
    transform: scale(1);
}

/* Общие стили для контента (иконка + текст) */
.status-block .content-wrapper { display: flex; align-items: center; gap: 15px; }
.status-block .icon { flex-shrink: 0; }
.status-block .icon svg { width: 28px; height: 28px; transition: color 0.3s ease; }
.status-block .text strong { display: block; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.status-block .text span { font-size: 13px; color: var(--hint); }
.status-block .text b { font-weight: 700; }

/* --- Стили для конкретных состояний --- */

/* 1. Состояние: Приглашение войти (синий) */
.status-block.state-login {
    background: rgba(62, 168, 247, 0.1);
    border: 1px solid rgba(62, 168, 247, 0.2);
}
.status-block.state-login .icon { color: var(--blue); }
.status-block.state-login .text b { color: var(--blue); }

/* 2. Состояние: Успех (зеленый) */
.status-block.state-success {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.25);
}
.status-block.state-success .icon { color: #2ecc71; }

/* 3. Состояние: Обработка, шаг 1 (золотой/желтый) */
.status-block.state-processing-yellow {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.status-block.state-processing-yellow .icon {
    color: #f7b139; /* Яркий, насыщенный желто-оранжевый */
}

/* 4. Состояние: Обработка, шаг 2 (синий) */
.status-block.state-processing-blue {
    background: rgba(62, 168, 247, 0.1);
    border: 1px solid rgba(62, 168, 247, 0.2);
}
.status-block.state-processing-blue .icon {
    color: var(--blue);
}


/* Анимация вращения для спиннера */
@keyframes spin { to { transform: rotate(360deg); } }
.status-block .icon.is-spinning svg {
    animation: spin 1s linear infinite;
}

/* Добавь этот код в конец твоего style.css */

/* Анимация для "дышащего" хомяка или покачивающейся ракеты */
@keyframes pulse-float {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* Применяем анимацию к иконкам в состоянии обработки */
.status-block.state-processing-yellow .icon svg,
.status-block.state-processing-blue .icon svg {
    animation: pulse-float 2s ease-in-out infinite;
}

/* Анимация для летящей звезды */
@keyframes shoot-star {
  0% { transform: translateX(5px) translateY(-5px) scale(0.9); opacity: 0.8; }
  100% { transform: translateX(0) translateY(0) scale(1); opacity: 1; }
}
.status-block.state-success .icon svg {
    animation: shoot-star 0.5s ease-out forwards;
}

.status-block.state-error {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.25);
}
.status-block.state-error .icon {
    color: #e74c3c;
}

.status-area {
    min-height: 62px; /* подбери в DevTools — обычно 56-70px, см. ниже */
    position: relative;
    width: 100%;
    transition: min-height 0.2s cubic-bezier(0.4,0,0.2,1);
    /* Можно добавить margin-top, если надо */
}

.form-helper-text {
  color: var(--hint);
  font-size: 14px;
  margin-top: 8px;
  transition: color 0.2s;
}


















.section-heading {
    text-align: center; /* Центрируем заголовок */

    /* Главное - настраиваем отступы, чтобы убрать лишнее расстояние */
    margin-top: 80px;    /* Отступ сверху от реферального блока */
    margin-bottom: 40px; /* Отступ снизу до карточки автопокупки */
}

.section-heading h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--hint); /* Используем цвет подсказок для второстепенного заголовка */
    text-transform: uppercase; /* Заглавные буквы для стиля */
    letter-spacing: 0.1em;   /* Увеличиваем расстояние между буквами */
}
/*
 * ФИНАЛЬНЫЕ СТИЛИ ДЛЯ БЛОКА АВТОПОКУПКИ

/*
 * НОВЫЙ СТИЛЬ "МАТОВОЕ СТЕКЛО" ДЛЯ КАРТОЧКИ АВТОПОКУПКИ
 */

/* Сама карточка */
.autopurchase-card {
    margin-top: 30px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Главная магия: полупрозрачный фон и размытие */
    background: var(--card-bg); /* Фон с 50% прозрачности */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(16px);

    transition: all 0.3s ease;
}

/* Шапка карточки */
.autopurchase-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 2px;
    cursor: pointer;
}
.autopurchase-card .card-header .header-text h3 {
    margin: 0 0 4px; font-size: 18px; font-weight: 700;
}
.autopurchase-card .card-header .header-text p {
    margin: 0; color: var(--hint); font-size: 14px;
}

/* Скрывающееся тело карточки */
.autopurchase-card .card-body {
    position: relative;
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    /*border-top: 1px solid transparent;*/
    transition: max-height 0.5s ease-out, padding 0.5s ease-out, border-color 0.4s ease-out;
}
.autopurchase-card .card-body.is-open {
    max-height: 850px;
    padding: 24px;
    padding-top: 28px; /* или сколько тебе нужно */
    /*border-top-color: var(--card-border);*/
}
.card-divider {
    height: 1px;
    width: 100%;
    background: var(--card-border, rgba(255,255,255,0.13));
    margin: 0 0 20px 0;
    margin-left: -24px;
    margin-right: -24px;
}


/* Убираем сжатие и центрирование с самой формы */
#autopurchase-settings-form {
    /* max-width и margin: auto больше не нужны */
}

/* Создаем сетку из 2-х колонок: гибкая левая и фиксированная правая */
.settings-layout-grid {
    display: grid;
    grid-template-columns: 1fr 260px; /* Основная колонка | Колонка с подсказками */
    gap: 30px; /* Увеличиваем расстояние между колонками */
    align-items: start;
}
/* Левая колонка теперь сама управляет своими элементами */
.form-inputs-column {
    display: flex;
    flex-direction: column;
}
.form-inputs-column .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
/* Стили для правой колонки с подсказками */
.form-aside h4 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}
.form-aside ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.form-aside li {
    font-size: 13px;
    line-height: 1.6;
    color: var(--hint);
}
.form-aside li strong {
    color: #cad0d8; /* Чуть светлее для акцента */
    font-weight: 500;
}

/* Сетка для полей ввода (остаётся без изменений) */
#autopurchase-settings-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    row-gap: 6px;    /* уменьшает вертикальный отступ между рядами */
    column-gap: 16px; /* оставляет горизонтальный, как есть (или тоже можно уменьшить) */

}


/* Кнопка сохранения и переключатель остаются без изменений,
   так как их стили уже написаны хорошо и универсальны.
*/
#ap-save-btn {
    width: 100%; padding: 14px; border: none; background: var(--blue);
    color: white; cursor: pointer; font-weight: 600; font-size: 15px;
    border-radius: 12px; transition: background-color 0.2s;
}
#ap-save-btn:hover:not(:disabled) { background: #4eb3f8; }
#ap-save-btn:disabled { background: var(--hint); cursor: not-allowed; }

.toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.1); transition: .4s; border-radius: 34px; }
.toggle-switch .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
.toggle-switch input:checked + .slider { background-color: var(--blue); }
.toggle-switch input:checked + .slider:before { transform: translateX(22px); }

/* Стили для планшетов и телефонов (ширина экрана до 768px) */
@media (max-width: 768px) {
    /* Уменьшаем большие отступы заголовка, чтобы экономить место */
    .section-heading {
        margin-top: 40px;
        margin-bottom: 30px;
    }

    /* Уменьшаем отступы внутри шапки и тела карточки */
    .autopurchase-card .card-header {
        padding: 20px 16px;
    }
    .autopurchase-card .card-body,
    .autopurchase-card .card-body.is-open {
        padding-left: 16px;
        padding-right: 16px;
    }
    .autopurchase-card .card-body.is-open {
         padding-top: 24px;
         padding-bottom: 24px;
    }


    /* Основную сетку перестраиваем в одну колонку:
       сначала форма, под ней - блок с подсказками */
    .settings-layout-grid {
        grid-template-columns: 1fr;
        gap: 30px; /* Отступ между формой и блоком подсказок */
    }
}

/* Стили для телефонов (ширина экрана до 600px) */
@media (max-width: 600px) {
    /* Сетку для полей ввода тоже перестраиваем в одну колонку,
       чтобы каждое поле занимало всю ширину. */
    .form-inputs-column .form-grid {
        grid-template-columns: 1fr;
    }
}













.label-with-tooltip {
    display: flex;
    align-items: baseline;
    gap: 8px; /* Расстояние между текстом и знаком вопроса */
}

/* Сам значок вопроса "?" */
.tooltip-trigger {
    position: relative; /* Для позиционирования текста подсказки */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    background-color: rgba(138, 148, 164, 0.15); /* Полупрозрачный фон */
    color: var(--hint);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    cursor: help;
    transition: background-color 0.2s, color 0.2s;
}

/* Текст подсказки, скрытый по умолчанию */
.tooltip-content {
    position: absolute;
    bottom: 125%; /* Появляется над знаком вопроса */
    left: 50%;
    transform: translateX(-50%);
    width: 280px; /* Ширина подсказки */
    background-color: #1A222C; /* Темный фон, как у меню */
    color: var(--text);
    padding: 12px 16px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    z-index: 10;

    /* Анимация */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(5px);
    transition: opacity 0.2s, transform 0.2s;
}

/* Показываем подсказку при наведении на знак вопроса */
.tooltip-trigger:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}





.currency-icon {
    /* Делаем иконку по высоте как текст */
    height: 1em;
    width: 1em;
    /* Немного опускаем, чтобы выровнять по центру текста */
    vertical-align: -0.15em;
    /* Небольшой отступ от цифр */
    margin-left: 0.2em;
}

.cancel-btn {
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.2s ease;

    /* ▼▼▼ Стили, использующие твои переменные ▼▼▼ */
    background-color: transparent;      /* Прозрачный фон */
    border: 1px solid var(--card-border); /* Рамка, как у карточек */
    color: var(--hint);                 /* Приглушенный цвет текста */
}

.cancel-btn:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Легкая подсветка фона */
    color: var(--text);                         /* Текст становится ярким (белым) */
    border-color: var(--hint);                  /* Рамка становится заметнее */
}


.recipient-filter {
    grid-column: 1 / -1; /* Растягиваем на всю ширину */
}

.recipient-filter .mock-segmented-control {
    margin-top: 0; /* Убираем отступ сверху, т.к. label уже есть */
}




































.mobile-nav-toggle, #mobile-menu-panel, #menu-backdrop {
    display: none;
}

@media (max-width: 950px) {
    /* 1. Прячем десктопную навигацию и показываем бургер */
    .site-header .site-nav {
        display: none;
    }
    /* Прячем десктопную кнопку "Войти" и профиль на мобильных */
.header-actions .login-btn,
.header-actions .user-profile {
    display: none;
}

/* Стили для футера в мобильном меню (где теперь кнопка "Войти") */
#mobile-menu-panel .mobile-menu-footer {
    margin-top: auto; /* Прижимает блок к низу панели */
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#mobile-menu-panel .mobile-menu-footer .login-btn {
    display: block;  /* Растягиваем кнопку на всю ширину */
    text-align: center;
    width: 100%;
}
    .mobile-nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 28px;
        height: 22px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
    }
    .mobile-nav-toggle span {
        width: 100%;
        height: 3px;
        background-color: #fff;
        border-radius: 2px;
        transition: transform 0.3s, opacity 0.3s;
    }
    body.mobile-nav-open .mobile-nav-toggle {
        position: fixed; /* Фиксируем поверх всего при открытии */
        top: 28px;
        right: 20px;
    }
    body.mobile-nav-open .mobile-nav-toggle span:nth-child(1){ transform: translateY(9.5px) rotate(45deg); }
    body.mobile-nav-open .mobile-nav-toggle span:nth-child(2){ opacity: 0; }
    body.mobile-nav-open .mobile-nav-toggle span:nth-child(3){ transform: translateY(-9.5px) rotate(-45deg); }

    /* 2. Стилизуем выезжающую панель */
    #mobile-menu-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: 320px;
        max-width: 85%;
        height: 100%;
        background: rgba(18, 23, 30, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 1000;
    }
    body.mobile-nav-open #mobile-menu-panel {
        transform: translateX(0);
    }
    .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; }
    .mobile-menu-title { font-size: 20px; font-weight: 700; color: #fff; }
    .mobile-menu-close { background: none; border: none; color: #8A919C; font-size: 32px; font-weight: 300; line-height: 1; cursor: pointer; padding: 0 5px; }

    /* 3. Контейнер со ссылками внутри панели */
    #mobile-menu-panel .nav-links-container { display: flex; flex-direction: column; padding: 20px; gap: 8px; overflow-y: auto; }
    #mobile-menu-panel .nav-link--cta-text,
    #mobile-menu-panel .nav-dropdown-toggle { font-size: 18px; font-weight: 500; color: #fff; padding: 15px; border-radius: 10px; text-decoration: none; }
    #mobile-menu-panel .nav-dropdown-wrapper { display: flex; flex-direction: column; }
    #mobile-menu-panel .nav-dropdown-menu { display: flex; flex-direction: column; position: static; opacity: 1; transform: none; pointer-events: auto; width: auto; background: none; box-shadow: none; border: none; padding: 10px 0 0 15px; margin-top: 5px; border-left: 2px solid #31A6F8; }
    #mobile-menu-panel .dropdown-item { text-decoration: none; color: #8A919C; }

    /* 4. Фон-затемнение */
    #menu-backdrop { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
    body.mobile-nav-open #menu-backdrop { opacity: 1; pointer-events: auto; }
}