/*styles.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body, 'DM Sans', 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99, 102, 241, 0.2) 0%, transparent 55%),
        linear-gradient(160deg, #0b0d1a 0%, #12102a 40%, #1a1035 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    padding: 0;
}

/* Планшеты: убираем "рамку" вокруг страниц, чтобы контент занимал всю ширину экрана */
@media (max-width: 1024px) {
    body {
        padding: 0;
    }

    .container {
        margin: 0;
        border-radius: 0;
        width: 100%;
        max-width: 100%;
    }
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.container {
    display: flex;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.98);
    border-radius: var(--radius-lg, 24px);
    box-shadow: var(--shadow-md, 0 8px 32px rgba(99, 102, 241, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.08);
    overflow: visible;
    width: 100%;
    max-width: none;
}

/* Admin layout: full width */
body.admin-wide {
    padding: 0;
}

body.admin-wide .container {
    max-width: none;
    margin: 0;
    border-radius: 0;
}

body.admin-wide .content {
    width: 100%;
}

/* Chat layout: full width (including thematic /chat?method=... pages) */
body.chat-page {
    padding: 0;
}

body.chat-page .container {
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

body.chat-page .content {
    width: 100%;
    max-width: none;
}

/* Страницы расчётов: контент на всю ширину */
body.methodology-page .content,
body.admin-wide .content,
.container-no-sidebar .content {
    width: 100%;
    max-width: none;
}

/* Стили для бокового меню */
.sidebar {
    width: 280px;
    background: #f9f3ff;
    color: #1e3a8a;
    padding: 30px 0;
}

.sidebar h2 {
    text-align: center;
    margin-bottom: 30px;
    font-weight: 500;
    padding: 0 20px;
    color: #1e3a8a;
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    font-size: 1.5em;
    letter-spacing: 0.5px;
}

.user-info {
    background: rgba(30, 58, 138, 0.1);
    border-radius: 25px;
    margin: 0 10px;
    padding: 8px 20px;
    border: 1px solid rgba(30, 58, 138, 0.2);
}

.user-info .nav-item {
    background: none !important;
}

.user-info .nav-item::after {
    display: none;
}

.menu-group {
    margin-bottom: 10px;
}

.menu-group-header {
    padding: 15px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1e3a8a;
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    font-size: 1.2em;
    letter-spacing: 0.3px;
    white-space: nowrap;
    /* НОВОЕ: Убираем outline для заголовков меню */
    outline: none;
}

.menu-group-header:focus {
    /* НОВОЕ: Красивое фокус для заголовков */
    outline: 2px solid #1e3a8a;
    outline-offset: -2px;
}

.menu-group-header:hover {
    background-color: rgba(30, 58, 138, 0.1);
    border-left-color: #1e3a8a;
}

.menu-group-header.active {
    background-color: rgba(30, 58, 138, 0.15);
    border-left-color: #1e3a8a;
}

.menu-group-header .arrow {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.menu-group-header.active .arrow {
    transform: rotate(90deg);
}

/* Короткие подписи вкладок — только чат на мобиле (см. chat.css) */
.menu-tab-icon,
.menu-tab-label-short {
    display: none;
}

.menu-group-header .menu-tab-text {
    flex: 1;
    min-width: 0;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(30, 58, 138, 0.05);
}

.menu-group-header.active+.submenu {
    max-height: 500px;
}

.submenu-item {
    padding: 12px 25px 12px 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    font-size: 14px;
    color: #1e3a8a;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: 0.2px;
    /* НОВОЕ: Убираем дефолтный outline */
    outline: none;
}

.submenu-item:focus {
    /* НОВОЕ: Красивое выделение для элементов подменю */
    outline: 2px solid #1e3a8a;
    /* Темно-синий */
    outline-offset: -2px;
    background-color: rgba(30, 58, 138, 0.1);
    /* Легкий фон для видимости */
}

.submenu-item:hover {
    background-color: rgba(30, 58, 138, 0.1);
    border-left-color: #1e3a8a;
}

.submenu-item.active {
    background-color: rgba(30, 58, 138, 0.15);
    border-left-color: #1e3a8a;
}

/* Стили для поля выбора (select) */
select {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 15px;
    font-family: 'DM Sans', 'Montserrat', sans-serif;
    font-weight: 500;
    color: #374151;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    background-color: #fafafa;
    outline: none;
    appearance: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
}

select:hover {
    border-color: #9ca3af;
    background-color: #fff;
}

select:focus {
    border-color: #667eea;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

select:invalid {
    color: #6b7280;
}

select option {
    color: #111827;
    padding: 8px;
}

/* Контейнер без сайдбара (гости) */
.container-no-sidebar .content {
    width: 100%;
}

.method-selectors {
    margin-bottom: 20px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}

.method-selectors * {
    min-width: 0;
}

@media (max-width: 768px) {
    .method-selectors {
        width: 100%;
        left: auto;
        margin-left: 0;
        padding-left: 12px;
        padding-right: 12px;
    }
}

.method-selectors-row {
    width: 100%;
}

.method-selectors-row .form-group {
    max-width: none;
    flex: 1;
    min-width: 150px;
}

/* Основной контент */
.content {
    flex: 1;
    padding: 30px;
    overflow: visible;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}

/* Стили для формы */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

/* Обёртка момента хорара (если есть в разметке) */
#horaryMomentBlock {
    display: contents;
}

#dataForm .form-row {
    display: flex !important; /* chat.css иногда задаёт grid; тут принудительно фиксируем */
}

/* В мобильной версии уменьшаем gap и margin-bottom */
@media (max-width: 768px) {
    .form-row {
        gap: 8px;
        margin-bottom: 15px;
        flex-wrap: wrap !important;
    }

    #dataForm .form-row .form-group,
    .profile-form .form-row .form-group,
    .additional-section .form-row .form-group {
        order: unset !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
    }

    #dataForm .form-row > .submit-btn,
    #dataForm .form-row > .submit-btn-main,
    #dataForm .form-row > button[type="submit"] {
        order: unset !important;
        width: 100% !important;
    }
}

/* Десктоп: держим основную форму расчета в одну строку */
@media (min-width: 1024px) {
    /* chat.css местами задаёт .form-row как grid; на этой форме принудительно делаем flex */
    #dataForm .form-row {
        display: flex !important;
    }

    #dataForm .form-row {
        flex-wrap: nowrap;
        gap: 10px;
        align-items: flex-start;
    }

    /* Ширины полей — в блоке @media (min-width: 768px) ниже (ФИО, город, дата, время) */
    #dataForm .fio-input,
    #dataForm .form-group input.fio-input {
        min-width: 0 !important;
        max-width: none;
        width: 100%;
    }

    #dataForm .submit-btn {
        align-self: center;
        margin-top: 0;
        transform: translateY(0);
    }

    /* Подсказка ко времени: оставляем в потоке, чтобы не накладывалась на соседние поля */
    #dataForm .form-group label + .form-hint {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin-top: 4px;
        transform: none !important;
    }
}

/* ФИО | пол | дата | время | город — порядок через order, дата=время по ширине, город шире */
@media (min-width: 768px) {
    #dataForm .form-row,
    .profile-form .form-row,
    .additional-section .form-row {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: flex-end;
    }

    #dataForm .form-row .form-group:has(#name),
    #dataForm .form-row .form-group:has(input.fio-input),
    #dataForm .form-row > .form-group:first-of-type:has(input.fio-input),
    .profile-form .form-row .form-group:has(input.fio-input),
    .profile-form .form-row > .form-group:first-of-type:has(input.fio-input),
    .additional-section .form-row .form-group:has(#second_name) {
        order: 1;
        flex: 1.7 1 13rem;
        min-width: 11rem;
        max-width: none;
    }

    #dataForm .form-row .form-group:has(#gender),
    #dataForm .form-row .form-group:has(#second_gender),
    .profile-form .form-row .form-group:has(#gender),
    .additional-section .form-row .form-group:has(#second_gender) {
        order: 2;
        flex: 0 0 7.5rem;
        min-width: 7rem;
        max-width: 8.5rem;
    }

    #dataForm .form-row .form-group:has(#birth_date),
    #dataForm .form-row .form-group:has(#second_birth_date),
    .profile-form .form-row .form-group:has(#birth_date),
    .additional-section .form-row .form-group:has(#second_birth_date) {
        order: 3;
        flex: 0 0 9.5rem;
        width: 9.5rem;
        min-width: 9.5rem;
        max-width: 9.5rem;
    }

    #dataForm .form-row .form-group:has(#time),
    #dataForm .form-row .form-group:has(#second_time),
    .profile-form .form-row .form-group:has(#time),
    .additional-section .form-row .form-group:has(#second_time) {
        order: 4;
        flex: 0 0 9.5rem;
        width: 9.5rem;
        min-width: 9.5rem;
        max-width: 9.5rem;
    }

    #dataForm .form-row .form-group:has(#city),
    #dataForm .form-row .form-group:has(#second_city),
    .profile-form .form-row .form-group:has(#city),
    .additional-section .form-row .form-group:has(#second_city) {
        order: 5;
        flex: 1.9 1 14rem;
        min-width: 12rem;
        max-width: none;
    }

    #dataForm #horaryHintBlock {
        order: 3;
        flex: 1 1 12rem;
        min-width: 8rem;
    }

    #dataForm #bhriguFields {
        order: 6;
        flex: 0 0 9rem;
    }

    #dataForm .form-row > .submit-btn,
    #dataForm .form-row > .submit-btn-main,
    #dataForm .form-row > button[type="submit"] {
        order: 7;
        flex: 0 0 auto;
        width: auto !important;
        min-width: 0;
        max-width: none;
        align-self: flex-end;
    }

    .profile-form .form-row .form-group:has(.new-profile-photos-actions) {
        order: 6;
        flex: 1 1 100%;
        min-width: min(100%, 20rem);
    }
}

.form-group {
    flex: 1;
    min-width: 150px;
    position: relative;
}

/* Стили для поля ФИО - делаем его шире */
.fio-input {
    min-width: 300px !important;
    width: 100%;
    max-width: 500px;
}

.form-group .fio-input {
    min-width: 300px !important;
    width: 100%;
    max-width: 500px;
}

/* Для формы с flex layout - поле ФИО должно занимать больше места */
.form-row .form-group:has(.fio-input) {
    flex: 2 1 10px;
    min-width: 300px;
}

/* Альтернативный способ для браузеров без поддержки :has() - применяем к первому элементу, если он содержит fio-input */
.form-row > .form-group:first-of-type:has(input.fio-input) {
    flex: 2 1 10px;
    min-width: 300px;
}

/* Убеждаемся, что само поле ФИО имеет правильную ширину */
.form-group input.fio-input {
    min-width: 300px !important;
    width: 100%;
}

/* Chat form: не даём полю ФИО переноситься ниже поля "Пол" */
@media (min-width: 768px) {
    #dataForm .form-row {
        flex-wrap: nowrap;
    }

    #dataForm .form-row .form-group {
        min-width: 0;
    }

    #dataForm .fio-input,
    #dataForm .form-group input.fio-input {
        min-width: 0 !important;
        width: 100%;
    }
}

label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
}

input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 15px;
    font-family: 'DM Sans', 'Montserrat', sans-serif;
    color: #374151;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    outline: none;
    appearance: none;
    background-color: #fafafa;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

input:hover {
    border-color: #9ca3af;
    background-color: #fff;
}

input:focus {
    outline: none;
    border-color: #667eea;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

input::placeholder {
    color: #9ca3af;
}

/* Не трогать нативный вид переключателей (глобальный input { appearance: none } ломает radio/checkbox). */
input[type="radio"],
input[type="checkbox"] {
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    appearance: auto;
    -webkit-appearance: auto;
}

/* Обертка для поля города: контекст позиционирования, dropdown не выходит за колонку */
.city-autocomplete-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
    /* Dropdown должен быть поверх следующих блоков (кнопки и т.п.) */
    z-index: 20000;
}

/* Dropdown только под полем города, не перекрывает соседние поля */
#cityDropdown.autocomplete-dropdown {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    margin-top: -1px;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 10px 10px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 20001;
    font-family: 'DM Sans', 'Montserrat', sans-serif;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    flex-direction: column;
}

.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s ease;
    outline: none;
    font-family: 'DM Sans', 'Montserrat', sans-serif;
    color: #374151;
}

.autocomplete-item:focus {
    background-color: #eef2ff;
    outline: none;
}

.autocomplete-item:hover {
    background-color: #f3f4f6;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.no-autocomplete {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.no-autocomplete:focus {
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.submit-btn {
    padding: 15px 30px;
    background: var(--gradient-aurora, linear-gradient(135deg, #6366f1 0%, #a855f7 45%, #ec4899 100%));
    color: white;
    border: none;
    border-radius: var(--radius-pill, 999px);
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    cursor: pointer;
    transition: transform var(--transition-fast, 0.18s ease), box-shadow var(--transition-base, 0.28s ease);
    white-space: nowrap;
    height: fit-content;
    align-self: flex-end;
    outline: none;
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.35);
}

.submit-btn:focus {
    /* НОВОЕ: Красивое фокус для кнопки */
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(168, 85, 247, 0.4);
}

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

/* Стили для кнопок прогнозов — универсальный fix для всех кнопок */
.forecast-section {
    margin-top: 40px;
}

.forecast-section h2 {
    color: #333;
    margin-bottom: 20px;
    font-weight: 600;
}

/* Пустые заголовки секций не должны создавать “дырки” */
.forecast-section h2:empty {
    display: none;
    margin: 0;
    padding: 0;
}

.button-group {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

/* =========================
   Admin: нормальная сетка кнопок
   ========================= */
body.admin-wide .forecast-section .button-group {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch;
}

/* =========================
   Methodology pages: нормальная сетка кнопок
   (иначе мобильные глобальные !important ломают вёрстку)
   ========================= */
body.methodology-page .forecast-section .button-group {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch;
}

/* Methodology pages: светлый фон без тёмной подложки */
body.methodology-page {
    background: #f5f7fb;
    background-image: none;
}

/* TWA/WebView: без светлой полосы над hero (login.css задаёт padding-top) */
body.mobile-app-shell {
    padding-top: 0 !important;
}

body.mobile-app-shell.methodology-page {
    padding-top: 0 !important;
}

/* Hero под фиксированной шапкой: тёмный фон до верха, текст ниже меню */
body.methodology-page > header.main-header:first-child + .content {
    padding-top: 0 !important;
}

@media (min-width: 769px) {
    body.methodology-page .method-hero {
        margin-top: 0;
        margin-left: -16px;
        margin-right: -16px;
        padding-top: var(--site-header-height, 56px);
        padding-right: 24px;
        padding-bottom: 24px;
        padding-left: 24px;
        border-radius: 0;
    }
}

@media (max-width: 768px) {
    body.methodology-page .content {
        padding-top: 0 !important;
    }

    body.mobile-app-shell.methodology-page .method-hero {
        padding-top: max(16px, env(safe-area-inset-top, 0px));
        border-radius: 0;
    }
}

body.methodology-page .content {
    background: #f5f7fb !important;
    background-image: none !important;
}

body.methodology-page .method-card,
body.methodology-page .catalog-card {
    background: #ffffff !important;
}

@media (min-width: 1100px) {
    body.methodology-page .forecast-section .button-group[data-section="top"],
    body.methodology-page .forecast-section .button-group[data-section="forecast"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

body.methodology-page .forecast-section .button-group button {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 14px 16px;
    line-height: 1.15;
    white-space: normal;
    word-break: break-word;
    text-wrap: balance;
    text-align: center;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.methodology-page .forecast-section .button-group .premium-btn {
    position: relative;
}

body.methodology-page .forecast-section .button-group .premium-btn .premium-icon {
    position: absolute;
    top: 8px;
    right: 10px;
    margin-left: 0;
    pointer-events: none;
}

body.methodology-page .button-group.button-group--western-other-forecasts {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 14px !important;
}

@media (min-width: 1100px) {
    body.methodology-page .button-group.button-group--western-other-forecasts {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    body.methodology-page .forecast-section .button-group {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    body.methodology-page .forecast-section .button-group button {
        min-height: 42px;
        padding: 10px 10px;
        font-size: 13px;
        border-radius: 8px;
    }

    body.methodology-page .forecast-section .button-group .premium-btn .premium-icon {
        top: 4px;
        right: 6px;
        transform: scale(0.9);
    }
}

@media (max-width: 520px) {
    body.methodology-page .forecast-section .button-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 360px) {
    body.methodology-page .forecast-section .button-group {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}

/* Верхние “Top запросы”: держим по 3 в ряд на широких экранах */
@media (min-width: 1100px) {
    body.admin-wide .forecast-section .button-group[data-section="top"],
    body.admin-wide .forecast-section .button-group[data-section="forecast"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* В админке кнопки должны выглядеть одинаково и не разъезжаться */
body.admin-wide .forecast-section .button-group button {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 14px 16px;
    line-height: 1.15;
    white-space: normal;       /* длинные названия переносятся */
    word-break: break-word;
    text-wrap: balance;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* TOP бейдж — в угол, чтобы не “толкал” текст */
body.admin-wide .forecast-section .button-group .premium-btn {
    position: relative;
}

body.admin-wide .forecast-section .button-group .premium-btn .premium-icon {
    position: absolute;
    top: 8px;
    right: 10px;
    margin-left: 0;
    pointer-events: none;
}

/* Запад: “Другие прогнозы” — сетка всегда, без конфликтов с flex */
body.admin-wide .button-group.button-group--western-other-forecasts {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 14px !important;
}

@media (min-width: 1100px) {
    body.admin-wide .button-group.button-group--western-other-forecasts {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Мобильные: такая же сетка (3 в ряд) */
@media (max-width: 768px) {
    body.admin-wide .forecast-section .button-group {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    body.admin-wide .forecast-section .button-group button {
        min-height: 42px;
        padding: 10px 10px;
        font-size: 13px;
        border-radius: 8px;
    }

    body.admin-wide .forecast-section .button-group .premium-btn .premium-icon {
        top: 4px;
        right: 6px;
        transform: scale(0.9);
    }
}

@media (max-width: 520px) {
    body.admin-wide .forecast-section .button-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 360px) {
    body.admin-wide .forecast-section .button-group {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}

/* Запад: шесть кнопок «Другие прогнозы» — две строки по три */
.button-group--western-other-forecasts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.button-group--western-other-forecasts .other-forecast-btn {
    flex: unset;
    min-width: 0;
    width: 100%;
}

/* Универсальный стиль для всех кнопок (forecast-btn, relationship-btn и т.д.) */
.forecast-btn,
.zwds-oracle-btn,
.premium-btn,
.relationship-btn,
.finance-btn,
.child-btn,
.family-btn,
.health-btn,
.fear-btn,
.person-btn,
.interest-btn,
.work-btn,
.home-btn,
.trips-btn,
.karma-btn,
.look-btn {
    flex: 1;
    min-width: 150px;
    padding: 15px;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
    /* НОВОЕ: Убираем outline для всех кнопок */
    outline: none;
}

.forecast-btn:focus,
.zwds-oracle-btn:focus,
.relationship-btn:focus,
.finance-btn:focus,
.premium-btn:focus,
.child-btn:focus,
.family-btn:focus,
.health-btn:focus,
.fear-btn:focus,
.person-btn:focus,
.interest-btn:focus,
.work-btn:focus,
.home-btn:focus,
.trips-btn:focus,
.karma-btn:focus,
.look-btn:focus {
    /* НОВОЕ: Красивое фокус для кнопок (белая граница с отступом) */
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Прогнозы - зеленый */
.forecast-btn {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.forecast-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4);
}

/* Цзы Вэй — оракулы (отдельно от зелёного «Прогноз») */
.zwds-oracle-btn:hover {
    transform: translateY(-2px);
}

.zwds-oracle-btn.zwds-oracle--home {
    background: linear-gradient(135deg, #319795 0%, #285e61 100%);
}

.zwds-oracle-btn.zwds-oracle--home:hover {
    box-shadow: 0 5px 15px rgba(49, 151, 149, 0.45);
}

.zwds-oracle-btn.zwds-oracle--love {
    background: linear-gradient(135deg, #d53f8c 0%, #97266d 100%);
}

.zwds-oracle-btn.zwds-oracle--love:hover {
    box-shadow: 0 5px 15px rgba(213, 63, 140, 0.45);
}

.zwds-oracle-btn.zwds-oracle--business {
    background: linear-gradient(135deg, #5a67d8 0%, #434190 100%);
}

.zwds-oracle-btn.zwds-oracle--business:hover {
    box-shadow: 0 5px 15px rgba(90, 103, 216, 0.45);
}

/* Отношения - розовый */
.relationship-btn {
    background: linear-gradient(135deg, #ed64a6 0%, #d53f8c 100%);
}

.relationship-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(237, 100, 166, 0.4);
}

/* Отношения - розовый */
.premium-btn {
    background: linear-gradient(135deg, #ed64a6 0%, #d53f8c 100%);
}

.premium-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(237, 100, 166, 0.4);
}

/* Финансы - желтый */
.finance-btn {
    background: linear-gradient(135deg, #ecc94b 0%, #d69e2e 100%);
}

.finance-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(236, 201, 75, 0.4);
}

/* Дети - голубой */
.child-btn {
    background: linear-gradient(135deg, #63b3ed 0%, #3182ce 100%);
}

.child-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(99, 179, 237, 0.4);
}

/* Семья - фиолетовый */
.family-btn {
    background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);
}

.family-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(159, 122, 234, 0.4);
}

/* Здоровье - бирюзовый */
.health-btn {
    background: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
}

.health-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(56, 178, 172, 0.4);
}

/* Страхи - оранжевый */
.fear-btn {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
}

.fear-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(237, 137, 54, 0.4);
}

/* Личность - индиго */
.person-btn {
    background: linear-gradient(135deg, #667eea 0%, #5a67d8 100%);
}

.person-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* Интересы - красный */
.interest-btn {
    background: linear-gradient(135deg, #fc8181 0%, #f56565 100%);
}

.interest-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(252, 129, 129, 0.4);
}

/* Работа - синий */
.work-btn {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
}

.work-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(66, 153, 225, 0.4);
}

/* Карма - глубокий фиолетовый (мистический) */
.karma-btn {
    background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%);
}

.karma-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(128, 90, 213, 0.4);
}

/* Внешность - золотисто-розовый (элегантный) */
.look-btn {
    background: linear-gradient(135deg, #d69e2e 0%, #b7791f 100%);
}

.look-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(214, 158, 46, 0.4);
}

/* Быт - серый */
.home-btn {
    background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
}

.home-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(160, 174, 192, 0.4);
}

/* Путешествия - бирюзовый */
.trips-btn {
    background: linear-gradient(135deg, #0bc5ea 0%, #00b5d8 100%);
}

.trips-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(11, 197, 234, 0.4);
}

.premium-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    color: #ffd700;
    font-size: 12px;
    font-weight: bold;
    background: rgba(255, 215, 0, 0.1);
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.premium-icon::before {
    content: "💎";
    margin-right: 4px;
}

.premium-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.button-group .premium-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 1px solid #ffd700;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.button-group .premium-btn:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5);
}

/* Адаптивность */
@media (max-width: 768px) {
        .form-row {
        flex-direction: column;
    }
    
    .form-group {
        min-width: 100%;
    }

    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

    .form-row {
        flex-direction: column;
    }

    .button-group {
        flex-direction: column;
    }

    .forecast-btn,
    .zwds-oracle-btn,
    .relationship-btn,
    .finance-btn,
    .child-btn,
    .family-btn,
    .health-btn,
    .fear-btn,
    .person-btn,
    .interest-btn,
    .work-btn,
    .home-btn,
    .trips-btn,
    .karma-btn,
    .look-btn {
        min-width: 100%;
    }
}

.gender-field {
    min-width: 150px;
}

.premium-btn.active-calculation .premium-icon {
    background-color: white !important;
    color: #4CAF50 !important;
}

.active-calculation {
    background-color: #4CAF50 !important;
    color: white !important;
    border-color: #4CAF50 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

/* Стили для контейнера заголовков */
.module-header-container {
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

.calculation-type-title {
    color: #4CAF50;
    font-size: 1.3em;
    font-weight: 600;
    margin: 10px 0 0 0;
    padding: 8px 15px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 8px;
    border-left: 4px solid #4CAF50;
}

/* Стили для дополнительных полей */
.additional-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.additional-section h3 {
    margin-top: 0;
    color: #495057;
    font-size: 1.2em;
    margin-bottom: 15px;
    border-bottom: 2px solid #667eea;
    padding-bottom: 8px;
}

/* Анимация появления дополнительных полей */
#additionalFields {
    transition: all 0.3s ease-in-out;
}

#additionalFields.visible {
    display: block !important;
    animation: slideDown 0.3s ease-in-out;
}

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

/* Стили для полей прогноза */
.forecast-type-fields {
    display: flex;
    gap: 15px;
    align-items: end;
    flex-wrap: wrap;
}

.forecast-type-fields .form-group {
    flex: 1;
    min-width: 200px;
}

/* Стили для поля выбора недели */
input[type="week"] {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

input[type="week"]:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.forecast-week-range-hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #666;
    line-height: 1.35;
}

select.forecast-week-select {
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
}

select.forecast-week-select:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

/* Стили для страницы консультаций */
.consultation-page {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 20px;
}

.consultation-header {
    text-align: center;
    margin-bottom: 30px;
}

.consultation-title {
    text-align: center;
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
}

.consultation-info {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 25px;
}

.consultation-price {
    font-size: 2em;
    font-weight: bold;
    color: #4CAF50;
    margin: 15px 0;
    text-align: center;
}

.duration {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 20px;
    text-align: center;
}

.consultation-features {
    list-style: none;
    padding: 0;
    max-width: 600px;
    margin: 0 auto;
}

.consultation-features li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 25px;
}

.consultation-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
}

.telegram-section {
    text-align: center;
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.telegram-btn {
    display: inline-block;
    background: #0088cc;
    color: white;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    margin: 15px 0;
    transition: background 0.3s;
}

.telegram-btn:hover {
    background: #0066a4;
}

.telegram-hint {
    color: #140101;
    font-size: 0.9em;
    margin-top: 10px;
}

/* Центрирование заголовков в консультации */
.consultation-info h3 {
    text-align: center;
    margin-bottom: 15px;
    color: #333;
}
/* Стили для логотипа с растворяющимися границами */
.sidebar-logo {
    text-align: center;
    position: relative;
    overflow: hidden;
}

.logo-image {
    max-width: 200px;
    height: auto;
    border-radius: 15px;
    background: rgb(248, 243, 255);
    transition: all 0.3s ease;
}

.logo-image:hover {
    transform: scale(1.05);
}

/* Стили для скрытых секций */
.hidden-section {
    display: none !important;
}

/* Плавные переходы для секций */
.forecast-section > div {
    transition: opacity 0.3s ease;
}

.forecast-section h2[data-section] {
    transition: all 0.3s ease;
}

/* Стили для скрытых секций с анимацией */
.forecast-section .hidden-section {
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transform: translateY(-10px);
}

.forecast-section h2.hidden-section {
    margin: 0;
    padding: 0;
    height: 0;
    opacity: 0;
}

.hidden-section {
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Стили для кнопок "Другие прогнозы" */
.other-forecast-btn {
    flex: 1;
    min-width: 150px;
    padding: 15px;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
    outline: none;
    background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%);
}

/* Джйотиш: "Другие прогнозы" — разные цвета по кнопкам */
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Варги"] {
    background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="СПЕЦИАЛЬНЫЕ ПРОГНОЗНЫЕ МЕТОДЫ"] {
    background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
    color: #ffffff;
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="ДАША-СИСТЕМЫ"] {
    background: linear-gradient(135deg, #48bb78 0%, #2f855a 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="ТОЧКИ, УПАГРАХИ, ЙОГИ"] {
    background: linear-gradient(135deg, #f56565 0%, #c53030 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Варшапхала"] {
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Вимшоттари Даша"] {
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Патьяамша Даша"] {
    background: linear-gradient(135deg, #0ea5e9 0%, #075985 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Сударшана-чакра"] {
    background: linear-gradient(135deg, #06b6d4 0%, #155e75 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Сударшана-чакра Даса"] {
    background: linear-gradient(135deg, #14b8a6 0%, #115e59 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Бхригу Нанди Нади"] {
    background: linear-gradient(135deg, #f43f5e 0%, #9f1239 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Шадбала"] {
    background: linear-gradient(135deg, #f97316 0%, #9a3412 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Аштакаварга"] {
    background: linear-gradient(135deg, #84cc16 0%, #3f6212 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Йоги"] {
    background: linear-gradient(135deg, #22c55e 0%, #166534 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Панчанга"] {
    background: linear-gradient(135deg, #a78bfa 0%, #5b21b6 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Мухурта"] {
    background: linear-gradient(135deg, #ec4899 0%, #831843 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Упаграхи и спец-точки"] {
    background: linear-gradient(135deg, #64748b 0%, #0f172a 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Саде-сати"] {
    background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Аштоттари Даша"] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Йогини Даша"] {
    background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Навамша Даша"] {
    background: linear-gradient(135deg, #8b5cf6 0%, #4c1d95 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Нараяна Даша"] {
    background: linear-gradient(135deg, #f472b6 0%, #9d174d 100%);
}
.other-forecast-btn:not(.active-calculation)[data-calculation-type="Чара Даша"] {
    background: linear-gradient(135deg, #fb7185 0%, #9f1239 100%);
}

.other-forecast-btn:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.other-forecast-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(128, 90, 213, 0.4);
}

.other-forecast-btn.active-calculation {
    background-color: #4CAF50 !important;
    color: white !important;
    border-color: #4CAF50 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

/* Стили для полей других прогнозов */
#otherForecastFields {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#otherForecastFields h3 {
    margin-top: 0;
    color: #495057;
    font-size: 1.2em;
    margin-bottom: 15px;
    border-bottom: 2px solid #805ad5;
    padding-bottom: 8px;
}

/* Специфичные стили для полей соляра, прогрессии, дирекции */
#solarFields,
#progressionFields,
#directionFields {
    display: flex;
    gap: 15px;
    align-items: end;
    flex-wrap: wrap;
    padding: 15px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e1e5e9;
}

#solarFields .form-group,
#progressionFields .form-group,
#directionFields .form-group {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}

/* Стили для числового поля года */
input[type="number"] {
    padding: 12px 15px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    outline: none;
    appearance: none;
}

input[type="number"]:focus {
    outline: none;
    border-color: #805ad5;
    box-shadow: 0 0 0 3px rgba(128, 90, 213, 0.1);
}

/* Стили для полей дат в других прогнозах */
#progression_date,
#direction_date {
    padding: 12px 15px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    outline: none;
}

#progression_date:focus,
#direction_date:focus {
    border-color: #805ad5;
    box-shadow: 0 0 0 3px rgba(128, 90, 213, 0.1);
}

/* Специфичные цвета для разных типов прогнозов */
#solarFields {
    border-left: 4px solid #ecc94b; /* Желтый для соляра */
}

#progressionFields {
    border-left: 4px solid #63b3ed; /* Голубой для прогрессии */
}

#directionFields {
    border-left: 4px solid #48bb78; /* Зеленый для дирекции */
}

/* Подсказки для полей */
.form-group label[for="solar_year"]::after {
    content: " (любой год)";
    font-size: 0.8em;
    color: #666;
    font-weight: normal;
}

.form-group label[for="progression_date"]::after {
    content: " (любая дата)";
    font-size: 0.8em;
    color: #666;
    font-weight: normal;
}

.form-group label[for="direction_date"]::after {
    content: " (любая дата)";
    font-size: 0.8em;
    color: #666;
    font-weight: normal;
}

/* Адаптивность для новых полей */
@media (max-width: 768px) {
    .other-forecast-btn {
        min-width: 100%;
    }
    
    #solarFields,
    #progressionFields,
    #directionFields {
        flex-direction: column;
        gap: 10px;
    }
    
    #solarFields .form-group,
    #progressionFields .form-group,
    #directionFields .form-group {
        min-width: 100%;
    }
    
    .forecast-type-fields {
        flex-direction: column;
    }
    
    .forecast-type-fields .form-group {
        min-width: 100%;
    }
}

/* Анимации для плавного появления полей */
#solarFields,
#progressionFields,
#directionFields,
.forecast-type-fields {
    animation: fadeInUp 0.3s ease-in-out;
}

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

/* Стили для состояний валидации */
input:valid {
    border-color: #48bb78;
}

input:invalid:not(:focus):not(:placeholder-shown) {
    border-color: #fc8181;
}

/* Стили для подсказок */
.form-hint {
    font-size: 0.8em;
    color: #666;
    margin-top: 5px;
    display: block;
}

/* Подсказка к времени рождения — всегда между меткой и полем */
.form-group:has(> input.input-time-hhmmss),
.form-group:has(> input[type="time"]) {
    display: flex;
    flex-direction: column;
}

.form-group:has(> input.input-time-hhmmss) > label,
.form-group:has(> input[type="time"]) > label {
    order: 1;
    margin-bottom: 4px;
}

.form-group:has(> input.input-time-hhmmss) > .form-hint,
.form-group:has(> input[type="time"]) > .form-hint {
    order: 2;
    margin-top: 0;
    margin-bottom: 4px;
}

.form-group:has(> input.input-time-hhmmss) > input.input-time-hhmmss,
.form-group:has(> input[type="time"]) > input[type="time"] {
    order: 3;
}

/* Стили для мобильной версии */
@media (max-width: 768px) {
    /* Скрываем слово "Меню" в сайдбаре */
    .sidebar h2 {
        display: none;
    }
    
    /* Уменьшаем логотип и скрываем его */
    .sidebar-logo {
        display: none;
    }
    
    /* Компактная форма */
    .form-row {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .form-group {
        min-width: 100%;
        margin-bottom: 8px;
    }
    
    /* Более компактные поля ввода */
    input, select {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    /* Более компактная кнопка отправки */
    .submit-btn {
        padding: 12px 20px;
        font-size: 15px;
        align-self: stretch;
        width: 100%;
    }
    
    /* Уменьшаем отступы в контенте */
    .content {
        padding: 15px;
    }
    
    /* Более компактные заголовки модулей */
    h1 {
        font-size: 1.5em;
        margin-bottom: 20px;
    }
    
    .module-title {
        font-size: 1.3em;
    }
    
    /* Более компактные заголовки секций */
    .forecast-section h2 {
        font-size: 1.2em;
        margin-bottom: 15px;
    }
    
    /* Более компактные кнопки */
    .forecast-btn,
    .zwds-oracle-btn,
    .premium-btn,
    .relationship-btn,
    .finance-btn,
    .family-btn,
    .health-btn,
    .fear-btn,
    .person-btn,
    .interest-btn,
    .work-btn,
    .karma-btn,
    .look-btn,
    .other-forecast-btn {
        padding: 12px 10px;
        font-size: 14px;
        min-width: 100%;
    }
    
    /* Группы кнопок с меньшим промежутком */
    .button-group {
        gap: 10px;
        margin-bottom: 20px;
    }
    
    /* Скрываем заголовок "Астрология: Западная" если слишком длинный */
    .calculation-type-title {
        font-size: 1em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
    
    /* Уменьшаем подсказки */
    .form-hint {
        font-size: 0.75em;
    }
    
    /* Компактные дополнительные секции */
    .additional-section {
        padding: 15px;
        margin: 15px 0;
    }
    
    .additional-section h3 {
        font-size: 1.1em;
        margin-bottom: 12px;
    }
    
    /* Компактные поля прогнозов */
    .forecast-type-fields {
        gap: 10px;
    }
    
    .forecast-type-fields .form-group {
        min-width: 100%;
    }
    
    /* Уменьшаем отступы в сайдбаре (не чат — там свои правила в chat.css) */
    body:not(.chat-page) .sidebar {
        padding: 10px 0;
    }
    
    .menu-group-header {
        padding: 8px 12px;
        font-size: 0.9em;
        white-space: nowrap;
    }
    
    .submenu-item {
        padding: 8px 15px 8px 25px;
        font-size: 0.85em;
    }
    
    /* Уменьшаем премиум иконки */
    .premium-icon {
        font-size: 10px;
        padding: 1px 4px;
    }
    
    /* Скрываем некоторые секции по умолчанию, если нужно */
    .forecast-section {
        margin-top: 25px;
    }
    
    /* Адаптация для консультационной страницы */
    .consultation-page {
        padding: 15px;
    }
    
    .consultation-title {
        font-size: 1.5em;
    }
    
    .consultation-price {
        font-size: 1.5em;
    }
    
    .telegram-btn {
        padding: 12px 20px;
        font-size: 1em;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
    .form-row {
        gap: 8px;
    }
    
    input, select {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    .submit-btn {
        padding: 10px 15px;
        font-size: 14px;
    }
    
    .forecast-btn,
    .zwds-oracle-btn,
    .premium-btn,
    .relationship-btn,
    .finance-btn,
    .family-btn,
    .health-btn,
    .fear-btn,
    .person-btn,
    .interest-btn,
    .work-btn,
    .karma-btn,
    .look-btn,
    .other-forecast-btn {
        padding: 10px 8px;
        font-size: 13px;
    }
    
    .content {
        padding: 10px;
    }
    
    .menu-group-header {
        padding: 8px 12px;
        font-size: 0.9em;
        white-space: nowrap;
    }
    
    .submenu-item {
        padding: 7px 12px 7px 22px;
        font-size: 0.8em;
    }
    
    /* Еще более компактные заголовки */
    h1 {
        font-size: 1.3em;
        margin-bottom: 15px;
    }
    
    .forecast-section h2 {
        font-size: 1.1em;
        margin-bottom: 12px;
    }
}

/* Мобильная версия - скрытие названий полей */
@media (max-width: 768px) {
    /* Скрываем названия полей формы */
    .form-group label {
        display: none !important;
    }
    
    /* Увеличиваем отступ сверху у полей ввода, чтобы компенсировать скрытие label */
    .form-group input,
    .form-group select {
        margin-top: 0;
    }
    
    /* Опционально: делаем плейсхолдеры более заметными */
    input::placeholder,
    select::placeholder {
        color: #666;
        font-size: 14px;
    }
    
    /* Для поля выбора пола - специальная стилизация */
    #gender {
        color: #666; /* Серый цвет для текста по умолчанию */
    }
    
    #gender:not(:focus):valid {
        color: #333; /* Темный цвет, когда значение выбрано */
    }
    
    /* Для поля времени - убираем скрытые секунды */
    #time::-webkit-datetime-edit-hour-field:focus,
    #time::-webkit-datetime-edit-minute-field:focus {
        background-color: transparent;
    }
    
    /* Компактное отображение полей автозаполнения */
    .autocomplete-dropdown {
        font-size: 14px;
    }
    
    .autocomplete-item {
        padding: 10px 12px;
    }
    
    /* Для поля города - показываем подсказку в плейсхолдере */
    #city::placeholder {
        content: "Город";
    }
    
    /* Для поля имени - улучшенный плейсхолдер */
    #name::placeholder {
        color: #666;
    }
    
    /* Уменьшаем отступы между полями формы */
    .form-row {
        gap: 8px;
        margin-bottom: 15px;
    }
    
    /* Делаем форму еще более компактной */
    .form-group {
        margin-bottom: 5px;
    }
    
    /* Убираем лишние отступы у поля ФИО с автозаполнением */
    .form-group:has(.fio-input),
    .form-group:has(#nameDropdown) {
        margin-bottom: 5px;
    }
    
    /* Убираем лишние отступы у dropdown автозаполнения */
    .autocomplete-dropdown {
        margin-bottom: 0;
    }
    
    /* Убираем лишние отступы после поля ФИО */
    .form-group:has(.fio-input) + .form-group {
        margin-top: 0;
    }
    
    /* Убираем лишние отступы у form-group, который содержит автозаполнение */
    .form-group:has(.autocomplete-dropdown) {
        margin-bottom: 5px;
    }
    .form-group:has(#cityDropdown) {
        margin-bottom: 0;
    }
    /* На мобильном оставляем обычный отступ между полем города и кнопкой */
    .form-group:has(#cityDropdown) + .submit-btn {
        margin-top: 0;
    }
}

/* Для очень маленьких экранов - дополнительные оптимизации */
@media (max-width: 480px) {
    /* Еще более компактные поля */
    .form-group input,
    .form-group select {
        padding: 8px 10px;
        font-size: 14px;
        height: 40px;
        border-radius: 6px;
    }
    
    /* Специальные стили для разных типов полей */
    input.input-date-ddmm,
    input.input-time-hhmmss,
    input[type="date"],
    input[type="text"],
    select {
        appearance: none;
        -webkit-appearance: none;
    }
    
    /* Улучшаем внешний вид выпадающих списков */
    select {
        background-position: right 8px center;
        background-size: 14px;
        padding-right: 30px;
    }
    
    /* Для поля даты - улучшаем отображение */
    input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 0.6;
        width: 20px;
        height: 20px;
    }
    
    /* Для поля времени - улучшаем отображение */
    input[type="time"]::-webkit-calendar-picker-indicator {
        opacity: 0.6;
        width: 20px;
        height: 20px;
    }
    
    /* Оптимизация для дополнительных полей */
    .additional-section .form-group label {
        display: none !important;
    }
    
    /* Компактные дополнительные поля */
    .additional-section {
        padding: 12px;
    }
    
    .additional-section h3 {
        font-size: 1em;
        margin-bottom: 10px;
    }
}

/* Супер компактный режим */
@media (max-width: 360px) {
    .form-group input,
    .form-group select {
        padding: 6px 8px;
        font-size: 13px;
        height: 36px;
    }
    
    /* Уменьшаем размер выпадающих стрелок */
    select {
        background-size: 12px;
        padding-right: 25px;
    }
    
    /* Компактные плейсхолдеры */
    ::placeholder {
        font-size: 13px;
    }
}

/* Мобильная версия - кнопки в одной строке на всю ширину */
@media (max-width: 768px) {
    /* Группы кнопок как flex-строка */
    .button-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 0 12px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .button-group.button-group--western-other-forecasts {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        flex-wrap: unset !important;
    }
    
    /* Кнопки равномерно распределены по ширине */
    .button-group .premium-btn,
    .button-group .forecast-btn,
    .button-group .zwds-oracle-btn,
    .button-group .relationship-btn,
    .button-group .finance-btn,
    .button-group .family-btn,
    .button-group .health-btn,
    .button-group .fear-btn,
    .button-group .person-btn,
    .button-group .interest-btn,
    .button-group .work-btn,
    .button-group .karma-btn,
    .button-group .look-btn,
    .button-group .other-forecast-btn {
        flex: 1 1 0 !important; /* Равномерное распределение */
        min-width: 0 !important; /* Позволяем сжиматься */
        max-width: 100% !important;
        height: 36px !important;
        padding: 6px 4px !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        border-radius: 6px !important;
        border: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
        /* Не перебиваем скрытие через .display-none (display:none !important) */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* Запад,6 кнопок: сетка 3×2 — после общих правил, иначе flex/nowrap перетирают вёрстку */
    .button-group.button-group--western-other-forecasts .other-forecast-btn {
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        height: auto !important;
        min-height: 36px !important;
    }

    /* Приоритетно скрываем элементы, помеченные display-none */
    .button-group .display-none {
        display: none !important;
    }
    
    /* Заголовки секций компактные */
    .forecast-section h2 {
        margin: 10px 0 4px 0 !important;
        padding: 0 !important;
        font-size: 0.9em !important;
        font-weight: 600 !important;
        color: #555 !important;
        width: 100% !important;
    }
    
    /* TOP иконки очень маленькие */
    .premium-icon {
        position: absolute !important;
        top: 2px !important;
        right: 2px !important;
        font-size: 8px !important;
        padding: 1px 2px !important;
        background: gold !important;
        color: #333 !important;
        border-radius: 4px !important;
        line-height: 1 !important;
        transform: scale(0.8) !important;
    }

    /* Overrides: на /admin и /methodology оставляем grid-сетку (не одна “полоса”) */
    body.admin-wide .forecast-section .button-group,
    body.methodology-page .forecast-section .button-group {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important;
        max-width: 100% !important;
    }

    body.admin-wide .forecast-section .button-group button,
    body.methodology-page .forecast-section .button-group button {
        height: auto !important;
        min-height: 42px !important;
        padding: 10px 10px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        line-height: 1.15 !important;
        border-radius: 8px !important;
    }
    
    /* Активная кнопка выделяется */
    .active-calculation {
        border: 2px solid white !important;
        box-shadow: 0 0 0 2px #4CAF50 !important;
        z-index: 1 !important;
    }
    
    /* Градиенты остаются, но более светлые */
    .forecast-btn {
        background: #68d391 !important;
        color: white !important;
    }

    .zwds-oracle-btn.zwds-oracle--home {
        background: #319795 !important;
        color: white !important;
    }

    .zwds-oracle-btn.zwds-oracle--love {
        background: #d53f8c !important;
        color: white !important;
    }

    .zwds-oracle-btn.zwds-oracle--business {
        background: #5a67d8 !important;
        color: white !important;
    }
    
    .relationship-btn {
        background: #f687b3 !important;
        color: white !important;
    }
    
    .finance-btn {
        background: #f6ad55 !important;
        color: #333 !important;
    }
    
    .family-btn {
        background: #b794f4 !important;
        color: white !important;
    }
    
    .health-btn {
        background: #4fd1c7 !important;
        color: white !important;
    }
    
    .fear-btn {
        background: #fc8181 !important;
        color: white !important;
    }
    
    .person-btn {
        background: #7f9cf5 !important;
        color: white !important;
    }
    
    .interest-btn {
        background: #f687b3 !important;
        color: white !important;
    }
    
    .work-btn {
        background: #63b3ed !important;
        color: white !important;
    }
    
    .karma-btn {
        background: #9f7aea !important;
        color: white !important;
    }
    
    .look-btn {
        background: #d69e2e !important;
        color: white !important;
    }
    
    .other-forecast-btn {
        background: #805ad5 !important;
        color: white !important;
    }
    
    .premium-btn {
        background: #4a5568 !important;
        color: white !important;
    }
    
    /* Убираем отступы по бокам контента */
    .content {
        padding: 0 max(0px, env(safe-area-inset-right, 0px)) 10px max(0px, env(safe-area-inset-left, 0px)) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.admin-wide .content {
        padding-left: max(0px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0px, env(safe-area-inset-right, 0px)) !important;
    }

    .container-no-sidebar .content:not(.home-guest-calc .content) {
        padding-left: max(0px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0px, env(safe-area-inset-right, 0px)) !important;
    }

    body.home-page .home-guest-calc .content {
        padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
    }

    body.methodology-page .content {
        padding-top: 0 !important;
        padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
    }
    
    /* Контейнер на всю ширину */
    .container,
    .container-no-sidebar,
    .home-guest-calc {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Главная: без белой полосы справа от горизонтальных блоков */
    body.home-page .hero-section,
    body.home-page .methodology-strip-wrap,
    body.home-page .methodology-home,
    body.home-page .funnel-section,
    body.home-page .container-no-sidebar {
        overflow-x: clip;
        max-width: 100%;
    }
}

/* Для средних мобильных экранов */
@media (max-width: 480px) {
    .button-group {
        gap: 3px !important;
        margin-bottom: 10px !important;
    }
    
    .button-group .premium-btn,
    .button-group .forecast-btn,
    .button-group .zwds-oracle-btn,
    .button-group .relationship-btn,
    .button-group .finance-btn,
    .button-group .family-btn,
    .button-group .health-btn,
    .button-group .fear-btn,
    .button-group .person-btn,
    .button-group .interest-btn,
    .button-group .work-btn,
    .button-group .karma-btn,
    .button-group .look-btn,
    .button-group .other-forecast-btn {
        height: 34px !important;
        padding: 5px 3px !important;
        font-size: 10px !important;
        border-radius: 5px !important;
    }

    .button-group.button-group--western-other-forecasts .other-forecast-btn {
        height: auto !important;
        min-height: 34px !important;
    }
    
    .premium-icon {
        font-size: 7px !important;
        padding: 0 1px !important;
        top: 1px !important;
        right: 1px !important;
    }
    
    .forecast-section h2 {
        margin: 8px 0 3px 0 !important;
        font-size: 0.85em !important;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 360px) {
    .button-group {
        gap: 2px !important;
    }
    
    .button-group .premium-btn,
    .button-group .forecast-btn,
    .button-group .zwds-oracle-btn,
    .button-group .relationship-btn,
    .button-group .finance-btn,
    .button-group .family-btn,
    .button-group .health-btn,
    .button-group .fear-btn,
    .button-group .person-btn,
    .button-group .interest-btn,
    .button-group .work-btn,
    .button-group .karma-btn,
    .button-group .look-btn,
    .button-group .other-forecast-btn {
        height: 32px !important;
        padding: 4px 2px !important;
        font-size: 9px !important;
        border-radius: 4px !important;
    }

    .button-group.button-group--western-other-forecasts .other-forecast-btn {
        height: auto !important;
        min-height: 32px !important;
    }
    
    /* Микро-иконка TOP */
    .premium-icon {
        display: none !important; /* Скрываем на очень маленьких экранах */
    }
    
    /* Еще меньше заголовки */
    .forecast-section h2 {
        margin: 6px 0 2px 0 !important;
        font-size: 0.8em !important;
    }
}

/* «База расчета» — диалог со списком блоков расчёта */
.calculation-base-btn.display-none,
button.calculation-base-btn[hidden] {
    display: none !important;
}

.calculation-base-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 6px 8px 0 0;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #9ca3af;
    color: #374151;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    vertical-align: middle;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.calculation-base-btn:not(.calculation-base-btn--chat) {
    background: #f9fafb;
}

.calculation-base-btn:not(.calculation-base-btn--chat):hover {
    background: #eef2ff;
    border-color: #6366f1;
    color: #312e81;
}

.calculation-base-btn--chat {
    position: relative;
    z-index: 0;
    isolation: isolate;
    margin: 0;
    padding: 10px 18px;
    font-size: 13px;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 999px;
    color: #fff;
    background: transparent;
    box-shadow: none;
    filter: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.calculation-base-btn--chat::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 55%, #5b21b6 100%);
}

.calculation-base-btn--chat > * {
    position: relative;
    z-index: 1;
}

.calculation-base-btn--chat:hover {
    color: #fff;
}

.calculation-base-btn--chat:hover::before {
    background: linear-gradient(135deg, #7c8ef0 0%, #8b5cb6 50%, #6d28d9 100%);
}

.calculation-base-btn--chat:active::before {
    filter: brightness(0.96);
}

.calculation-base-btn--chat:focus-visible {
    outline: 2px solid #a5b4fc;
    outline-offset: 3px;
}

.button-group .calculation-base-btn {
    margin-top: 6px;
    margin-bottom: 2px;
}

.calculation-base-dialog {
    border: none;
    border-radius: 14px;
    padding: 0;
    max-width: min(520px, 92vw);
    width: min(520px, 92vw);
    max-height: min(85vh, 100% - 2rem);
    overflow: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

/* Центр viewport (в т.ч. если диалог внутри flex-контейнера без top layer) */
.calculation-base-dialog[open] {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    margin: 0;
}

.calculation-base-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.calculation-base-dialog-inner {
    position: relative;
    padding: 20px 22px 18px;
}

.calculation-base-dialog .calculation-base-title {
    margin: 0 28px 12px 0;
    font-size: 1.15rem;
    color: #1e3a8a;
}

.calculation-base-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.calculation-base-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.calculation-base-list {
    margin: 0;
    padding-left: 1.25rem;
    color: #334155;
    line-height: 1.55;
    font-size: 14px;
}

.calculation-base-list li {
    margin-bottom: 6px;
}

.calculation-base-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* =========================
   NutriAstro: analytics modal (my-plan)
   ========================= */

/*
  Делает модалку аналитики полноэкранной.
  Класс приходит из разметки страницы /my-plan:
  modal-content plan-analytics-modal-content
*/
.modal .modal-content.plan-analytics-modal-content,
.modal-content.plan-analytics-modal-content {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    padding: clamp(12px, 2vw, 24px);
    overflow: hidden;
}

/* Чтобы flex-центрирование overlay не влияло на полноэкранный контент */
.modal:has(.plan-analytics-modal-content) {
    align-items: stretch;
    justify-content: stretch;
}

/* Фиксируем кнопку закрытия сверху справа */
.plan-analytics-modal-content .close-btn,
.plan-analytics-modal-content .modal-close,
.plan-analytics-modal-content .modal-close-btn {
    position: sticky;
    top: 8px;
    margin-left: auto;
    z-index: 2;
}

/* Мобильная верстка внутри аналитики */
@media (max-width: 768px) {
    .modal .modal-content.plan-analytics-modal-content,
    .modal-content.plan-analytics-modal-content {
        padding: 12px;
        font-size: 13px;
        line-height: 1.25;
    }

    .plan-analytics-modal-content h1,
    .plan-analytics-modal-content h2,
    .plan-analytics-modal-content h3 {
        line-height: 1.25;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Таблицы: не ломаем колонки, даём горизонтальный скролл */
    .plan-analytics-modal-content table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        min-width: 0;
        font-size: 12px;
        line-height: 1.2;
    }

    .plan-analytics-modal-content th,
    .plan-analytics-modal-content td {
        vertical-align: top;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        padding: 6px 8px;
    }
}

/* iOS safe areas (если модалка во весь экран на мобиле) */
@supports (padding: max(0px)) {
    .modal .modal-content.plan-analytics-modal-content,
    .modal-content.plan-analytics-modal-content {
        padding-top: max(12px, env(safe-area-inset-top));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        padding-left: max(12px, env(safe-area-inset-left));
    }
}

/* =========================
   Убрать полосу сверху: контент с y=0, меню внизу (см. main-header--dock-bottom)
   ========================= */
@media (max-width: 768px) {
    html,
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    header.main-header,
    .main-header {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 1000 !important;
        margin: 0 !important;
        padding-top: 0 !important;
        background: #ffffff !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
        border-radius: 15px 15px 0 0 !important;
        box-sizing: border-box !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    html:has(body.home-page) {
        background: #1a1a2e !important;
        background-image: none !important;
    }

    body.home-page {
        background: #1a1a2e !important;
        background-image: none !important;
    }

    body.home-page.home-guest {
        background: #1a1a2e !important;
        background-image: none !important;
    }
    body.home-page.home-guest .container-no-sidebar,
    body.home-page.home-guest .social-proof-section,
    body.home-page.home-guest .consultation-cta-section,
    body.home-page.home-guest .seo-content {
        background-color: #f5f7fb;
    }

    body.home-page .hero-section,
    body.home-page .methodology-home,
    body.home-page .methodology-strip-wrap,
    body.chat-page > .container,
    body > .container,
    body > main,
    body > .content,
    body.methodology-page .content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.methodology-page .method-hero {
        margin-top: 0 !important;
    }

    body.methodology-page {
        background: #f5f7fb !important;
        background-image: none !important;
    }

    body.methodology-page .content {
        background: #f5f7fb !important;
        background-image: none !important;
    }

    body.chat-page {
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    body.chat-page > .container {
        background: #f9f3ff !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--mobile-bottom-nav-space, calc(56px + env(safe-area-inset-bottom, 0px))) !important;
        padding: 0 !important;
    }

    body.chat-page .content {
        padding-bottom: 0 !important;
    }

    body.chat-page .sidebar,
    body.chat-page .method-sidebar {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

@media (min-width: 769px) {
    header.main-header,
    .main-header {
        top: 0 !important;
        bottom: auto !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border-radius: 0 !important;
    }
}

/* Мобильные формы расчёта: главная, чат, методология */
@media (max-width: 768px) {
    body.home-page #dataForm,
    body.chat-page .data-section #dataForm,
    body.methodology-page #dataForm {
        padding-left: 2px;
        padding-right: 2px;
        box-sizing: border-box;
    }

    body.methodology-page .method-module-header-row {
        padding-left: 2px;
        padding-right: 2px;
        margin-bottom: 12px;
    }

    body.methodology-page .method-module-header-row .calculation-base-btn--chat {
        width: 100%;
        justify-content: center;
        border-radius: 14px;
        padding: 12px 16px;
        min-height: 48px;
    }

    body.home-page #dataForm .form-row,
    body.chat-page .data-section #dataForm .form-row,
    body.methodology-page #dataForm .form-row {
        gap: 14px;
    }

    body.home-page #dataForm .form-group,
    body.chat-page .data-section .form-group,
    body.methodology-page #dataForm .form-group {
        margin-bottom: 10px;
    }

    body.home-page #dataForm .form-group input,
    body.home-page #dataForm .form-group select,
    body.chat-page .data-section .form-group input,
    body.chat-page .data-section .form-group select,
    body.methodology-page #dataForm .form-group input,
    body.methodology-page #dataForm .form-group select,
    body.home-page #dataForm input.input-date-ddmm,
    body.home-page #dataForm input.input-time-hhmmss,
    body.chat-page .data-section input.input-date-ddmm,
    body.chat-page .data-section input.input-time-hhmmss,
    body.methodology-page #dataForm input.input-date-ddmm,
    body.methodology-page #dataForm input.input-time-hhmmss {
        padding: 13px 16px !important;
        font-size: 15px !important;
        min-height: 50px !important;
        height: auto !important;
        border-radius: 14px !important;
        border: 1px solid rgba(102, 126, 234, 0.28) !important;
        background: #fff !important;
        box-shadow: 0 2px 12px rgba(102, 126, 234, 0.1) !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    body.home-page #dataForm .form-group input:focus,
    body.home-page #dataForm .form-group select:focus,
    body.chat-page .data-section .form-group input:focus,
    body.chat-page .data-section .form-group select:focus,
    body.methodology-page #dataForm .form-group input:focus,
    body.methodology-page #dataForm .form-group select:focus,
    body.home-page #dataForm input.input-date-ddmm:focus,
    body.home-page #dataForm input.input-time-hhmmss:focus,
    body.chat-page .data-section input.input-date-ddmm:focus,
    body.chat-page .data-section input.input-time-hhmmss:focus,
    body.methodology-page #dataForm input.input-date-ddmm:focus,
    body.methodology-page #dataForm input.input-time-hhmmss:focus {
        border-color: #667eea !important;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 4px 14px rgba(102, 126, 234, 0.12) !important;
        outline: none !important;
    }

    body.home-page #dataForm label,
    body.home-page .home-calc-title {
        color: #1e3a8a;
    }

    body.home-page #dataForm .form-hint,
    body.chat-page .data-section .form-hint,
    body.methodology-page #dataForm .form-hint {
        font-size: 0.75rem;
        color: rgba(55, 65, 81, 0.78);
        margin-bottom: 8px;
        line-height: 1.4;
    }

    body.home-page #dataForm .submit-btn-main,
    body.chat-page .data-section .submit-btn,
    body.methodology-page #dataForm .submit-btn-main {
        border-radius: 14px;
        min-height: 50px;
        margin-top: 8px;
        box-shadow: 0 4px 14px rgba(102, 126, 234, 0.25);
    }

    body.home-page #dataForm input::placeholder,
    body.chat-page .data-section input::placeholder,
    body.methodology-page #dataForm input::placeholder {
        color: #9ca3af;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    body.home-page .home-guest-calc .content {
        padding-left: max(18px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(18px, env(safe-area-inset-right, 0px)) !important;
    }

    body.methodology-page .content {
        padding-left: max(18px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(18px, env(safe-area-inset-right, 0px)) !important;
    }
}