:root {
    /* === FONTS === */
    --font-main: 'Roboto Condensed', sans-serif;

    /* === CORE COLORS === */
    --color-bg-main: #dee4ec;
    --color-bg-panel: #ffffff;
    --color-bg-soft: #f4f8fb;

    --color-primary: #105B89;
    --color-primary-hover: #0d4a6e;
    /*--color-dark: #071D49;*/

    --color-text-main: #071D49;
    --color-text-secondary: #555;

    --color-border: #ddd;

    --color-success: #2e7d32;
    --color-warning: #ed6c02;
    --color-danger: #d32f2f;

    /* Фоновые цвета */
    --bg-body: #f9f9f7;              /* Основной фон страницы */
    --bg-container: #ffffff;         /* Фон блоков контента */
    --bg-footer: #eeeeee;            /* Фон футера */


    /* === SPACING === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 15px;
    --space-lg: 25px;

    /* === RADIUS === */
    --radius-sm: 4px;
    --radius-md: 8px;

    /* === SHADOWS === */
    --shadow-soft: 0 2px 6px rgba(0,0,0,0.08);
    --shadow-medium: 0 4px 15px rgba(0,0,0,0.12);



    --golden-gradient: linear-gradient(0deg, #D4AF37, #FCF6BA, #F1D592, #FBF5B7, #D4AF37);

    --border-thickness: 4px;

    /* === PREMIUM (optional) === */
    /*--golden-plate: linear-gradient(to bottom, rgba(211,204,17,0.5), rgba(255,250,200,0.8));*/

    --golden-plate: linear-gradient(to bottom, rgba(211, 204, 17, 0.6), rgba(255, 250, 200, 0.9) 20%, rgba(255, 250, 220, 0.56) 84%, rgba(211, 204, 17, 0.6));

    --golden: #cbc40f;
    /*--golden: #cfd481;*/

    --goldish: rgba(211, 204, 17, 0.8);
    /*--goldish: rgba(255, 250, 220, 0.86);*/
    --goldplate: #fff884;


    /*!*--golden-gradient: linear-gradient(135deg, #D4AF37, #FCF6BA, #F1D592, #FBF5B7, #D4AF37);*!*/
    /*--golden-gradient: linear-gradient(0deg, #D4AF37, #FCF6BA, #F1D592, #FBF5B7, #D4AF37);*/
    /*--border-thickness: 4px;*/

    /*!* === PREMIUM (optional) === *!*/
    /*!*--golden-plate: linear-gradient(to bottom, rgba(211,204,17,0.5), rgba(255,250,200,0.8));*!*/

    /*--golden-plate: linear-gradient(to bottom, rgba(211, 204, 17, 0.6), rgba(255, 250, 200, 0.9) 20%, rgba(255, 250, 220, 0.56) 84%, rgba(211, 204, 17, 0.6));*/
    /*--golden: #cbc40f;*/




    /*!*--goldish: rgba(211, 204, 17, 0.8);*!*/
    /*--goldish: rgba(255, 250, 220, 0.86);*/
    /*--goldplate: #fff884;*/




    /*--border-color:  #ddd;*/
    --olive-brown: rgb(147, 147, 49);
    /*--olive-brown: rgb(var(--olive-brown-rgb));*/

    --main-green: #006400;
    --light-bg: #e0e0e0;
    --panel-border:  #999;
    --btn-green: #28a745;
    --btn-yellow: #ffff00;
    --text-blue: #0000ff;
    --header-height: 50px;
    --border-radius-panel: 4px;
    --border-radius-input: 3px;
    --border-radius-btn: 3px;
    --text-blue-font: Roboto, sans-serif;

    /* === ЦВЕТОВАЯ ПАЛИТРА === */
    /*--color-dark: #071D49;         !* Глубокий синий (Банк) *!*/
    --color-dark: #114165;         /* Глубокий синий (Банк) */

    --color-primary: #105B89;      /* Трон акцент (Синий неон) */
    --color-accent-gold: #D4AF37;  /* Швейцарское Золото */
    /*--color-bg-main: #050b18;      !* Фон как в Tron Legacy *!*/
    --color-bg-main: #0f2249;      /* Фон как в Tron Legacy */

    /* === ЦВЕТА ЛЬДА === */
    --color-ice-base: rgba(18, 48, 86, 0.15); /* Холодная подложка льда */
    --color-ice-highlight: rgba(255, 255, 255, 0.08); /* Блик на грани */
    --color-border-ice: rgba(135, 206, 235, 0.15); /* Очень тонкая ледяная кайма */

    --font-main: 'Roboto';
    --radius-strict: 5px; /* Строгий радиус для "элитного" вида */


}

/* ================================= */
/* BASE */
/* ================================= */

body {
    font-family: var(--font-main);
    background: var(--color-bg-main);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 97vh;
    max-height: 100vh;
    overflow: hidden;
    height: 100%;

    /*margin: 20px;*/
    /*background-color: #67a8f7;*/
    /*background: url('../images/background/glass4.png') no-repeat center center fixed;*/
    background-size: cover;
    /*color: #333;*/

    background: linear-gradient(135deg, #050b18 0%, #0a192f 100%);
    color: #76cff7;


}


/*.container {*/
/*flex: 1;*/
/*}*/

.message{
    color: black;
}

.welcomeMessage {
    margin-right: 20px;
    font-weight: bold;
    cursor: pointer;
}

a{
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
}

p {
    /*color: white;*/
    text-decoration: none;
}

/* ================================= */
/* HEADER (CRITICAL UX LAYER) */
/* ================================= */

.siteheader {
    display: flex;
    justify-content: space-between;
    align-items: center;

    /*background: linear-gradient(90deg, var(--color-dark), var(--color-primary));*/
    color: white;

    height: 48px;
    padding: 0 20px;

    /*border-radius: 6px;*/
    border-radius: 0 0 15px 15px;
    /*box-shadow: var(--shadow-soft);*/
    /*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);*/

    background: rgba(7, 29, 73, 0.95);
    /*border-bottom: 1px solid var(--color-primary);*/

    /*box-shadow: 0 0 20px rgba(16, 91, 137, 0.3);*/
    z-index: 100;


}

/*.logo { font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; }*/

.logo {
    font-family: var(--font-main);
    /*box-shadow: 0 0 20px rgba(16, 91, 137, 0.3);*/
    font-size: 22px;
    line-height: 1;
    font-weight: bold;
    color: white;
    /*text-transform: uppercase;*/
}

.siteheader h2 {
    /*font-size: 18px;*/
    /*font-weight: 700;*/
    /*letter-spacing: 0.5px;*/
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
    line-height: 1;
    font-weight: bold;
    /*box-shadow: 0 0 20px rgba(16, 91, 137, 0.3);*/
    /*color: var(--main-color-white);*/
    color: white;
    /*text-transform: uppercase;*/
}

/* NAV */
.main-nav {
    display: flex;
    align-items: center;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}

.nav-list a {
    color: rgba(255,255,255,0.85);
    padding: 6px 10px;
    border-radius: 4px;
    transition: 0.2s;
}

.nav-list a:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}

/* DROPDOWN */

.dropdown {
    position: relative;
}

.dropdown-menu {

    list-style: none; /* Убирает точки */
    margin: 0;        /* Убирает внешние отступы браузера */
    padding: 0;       /* Убирает внутренние отступы (где обычно сидят точки) */


    display: none;
    position: absolute;
    top: 100%;
    right: 0;

    background: #fff;
    border-radius: 6px;
    box-shadow: var(--shadow-medium);

    padding: 8px 0;
    min-width: 160px;
    z-index: 1000;
}

/* Если ссылки лежат внутри li, убедитесь, что li тоже чистые */
.dropdown-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--color-text-main);
}

.dropdown-menu a:hover {
    background: var(--color-primary);
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/* ================================= */
.content-wrapper {
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    /*justify-content: center;*/
    align-items: center;
    overflow: hidden; /* Запрещает содержимому растягивать тело страницы */
    min-width: 0;
}

/* ================================= */
/* LAYOUT */
/* ================================= */
/* === НОВЫЙ ГЛОБАЛЬНЫЙ КОНТЕЙНЕР === */
.cabinet-container {
    width: 90%; /* Ровно 80% от экрана (по 10% с боков) *!*/
    /*margin: 0 auto; !* Выравнивание по центру *!*/
    height: calc(100vh - 80px); /* Подстройте под высоту вашего хедера */
    display: flex;

    flex-direction: column; /* Элементы друг под другом */

    gap: 15px;
    /*!* Отключаем любое влияние на ширину извне *!*/
    /*overflow: hidden;*/
    /*min-width: 0;*/

    /*border: solid #7bff53 1px;*/
    padding: 8px;

    /*padding: 20px 5%;*/

    /*gap: 20px;*/
    /*margin-bottom: 4px;*/

    overflow-y: auto;

}

/* === 1 ПАНЕЛЬ (Приветствие) === */
.welcome-bar {

    background: linear-gradient(135deg, #D4AF37 0%, #F1D592 50%, #D4AF37 100%);
    color: #071D49;
    padding: 12px 20px;
    border-radius: var(--radius-strict);
    font-weight: 600;

    /*box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);*/

    /* 4. Тень Tron: легкий неоновый отсвет */
    box-shadow: 0 5px 25px rgba(19, 109, 164, 0.7);

    display: flex;
    align-items: center;
    gap: 15px;

    /*width: 100%;*/
    /*flex-shrink: 0; !* Запрещаем ей сжиматься по высоте *!*/
    /*background: var(--golden-plate);*/

    /*padding: 12px;*/
    /*border-radius: var(--radius-md, 8px);*/
    /*text-align: center;*/
    /*box-sizing: border-box;*/
    /*margin-top: 5px;*/

    /*!*background-color: #f0f7ff;*!*/
    /*border-color: transparent;*/
    /*!*Внутренние золотые тени (без изменений)*!*/
    /*box-shadow:*/
            /*inset 0 0 15px rgba(212, 175, 55, 0.8),*/
            /*inset 0 0 5px rgba(251, 245, 183, 0.2),*/
                /*!* 1. Тень снизу для объема *!*/
            /*0 2px 6px rgba(0, 0, 0, 0.3),*/
                /*!* 2. Тень справа по вертикали *!*/
            /*4px 0 8px rgba(0, 0, 0, 0.2);*/
    /*transition: box-shadow 0.3s ease;*/

}

/* PROFILE LAYOUT */

.profile-layout-wrapper {
    display: flex;
    flex: 1;
    gap: 24px;

    /* Добавляем горизонтальные отступы минимум по 15-20px */
    padding: 10px 24px;

    /*padding: 15px 0;*/
    height: calc(100vh - 120px);
    box-sizing: border-box;
    /*border: solid red 1px;*/
    width: 100%;
    min-width: 0;
    min-height: 0;
    /*overflow: hidden;*/
    overflow-y: auto
}

.panel-services, .panel-dynamic {
    backdrop-filter: blur(25px) saturate(120%);
    /*background: var(--color-ice-base);*/
    border: 1px solid var(--color-border-ice);
    border-radius: var(--radius-strict);
    position: relative;

    /* ИСПРАВЛЕНИЕ: разрешаем вертикальный скролл */
    /*overflow: hidden;*/

    overflow-y: auto;
    overflow-x: hidden; /* защищаем от горизонтального скролла */

    /* ИСПРАВЛЕНИЕ: даем возможность flex-элементу уменьшаться */
    min-height: 0;

    box-shadow: 0 5px 25px rgba(18, 101, 152, 0.4);
}

.panel-services {
    /*flex: 1.5;*/
    width: 690px;
    overflow-y: auto;
    padding: 15px;
    gap: 15px;
    display: flex;
    flex-direction: column;
}
.panel-dynamic {
    /*flex: 1;*/
    width: -webkit-calc(100% - 690px);
    width: calc(100% - 650px);
    padding: 25px;
    display: flex; flex-direction: column;
    gap: 10px;
}

/* 1. Общий сброс для панелей */
.panel-services, .panel-dynamic {
    /* Чтобы скроллбар не "прыгал", можно зарезервировать под него место */
    scrollbar-gutter: stable;
    overflow-y: auto !important;
}

/* 2. Настройка ширины (ОБЯЗАТЕЛЬНО) */
.panel-services::-webkit-scrollbar,
.panel-dynamic::-webkit-scrollbar {
    width: 6px !important; /* Ширина вертикального */
    height: 6px !important; /* Высота горизонтального */
    display: block !important;
}

/* 3. Дорожка (Track) — делаем прозрачной, чтобы не портить "лёд" */
.panel-services::-webkit-scrollbar-track,
.panel-dynamic::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 10px !important;
}

/* 4. Ползунок (Thumb) — наш "неоновый" акцент */
.panel-services::-webkit-scrollbar-thumb,
.panel-dynamic::-webkit-scrollbar-thumb {
    background: var(--color-primary, #105B89) !important;
    border-radius: 10px !important;
    /* Эффект свечения как в Tron */
    box-shadow: 0 0 8px rgba(16, 91, 137, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 5. Эффект при наведении */
.panel-services::-webkit-scrollbar-thumb:hover,
.panel-dynamic::-webkit-scrollbar-thumb:hover {
    background: #2cacec !important; /* Ярче при наведении */
}

/* 6. Для Firefox (он не понимает webkit) */
.panel-services, .panel-dynamic {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}


/*.panel-services {*/
    /*flex: 60;*/
    /*min-width: 0;*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*!*gap: 15px;*!*/
    /*!*overflow-y: auto;*!*/
    /*!*padding: 10px 20px 10px 10px;*!*/
    /*!*border-radius: var(--radius-md);*!*/

    /**/
/*}*/

/*.panel-dynamic {*/
    /*flex: none;*/
    /*flex: 40;*/
    /*min-width: 0;*/
    /*background-color: #fff;*/
    /*border-radius: 8px;*/
    /*box-shadow: 0 4px 15px rgba(0,0,0,0.1);*/
    /*padding: 8px;*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*overflow-y: auto;*/
    /*height: fit-content;*/
    /*max-height: 100%;*/

/*}*/

/* === ЯДЕРНАЯ ЗАЩИТА ОТ ИНПУТОВ И ТЕКСТА === */
/* Заставляем ВСЕ элементы внутри правой панели вести себя идеально */
.panel-dynamic input,
.panel-dynamic textarea,
.panel-dynamic p,
.panel-dynamic h4 {
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
    font-family: var(--font-main);
}
.requestSubscriptionForm {
    max-width: 505px;
}


.panel-dynamic input,
.panel-dynamic textarea {
    color: var(--text-blue);
}


/* SERVICE CARD (extends) */

.service-card {
    height: auto;
    /*min-height: 80px; !* Минималка только для иконки и текста *!*/
    /*!*background: var(--golden-plate);*!*/
    /*!* --golden-gradient: linear-gradient(135deg, #D4AF37, #FCF6BA, #F1D592, #FBF5B7, #D4AF37); *!*/
    /*background: var(--golden-plate);*/
    /*background: #FCF6BA;*/

    /*padding: 15px;*/
    /*border-radius: 8px;*/
    /*border: 1px solid var(--golden); !* #e0e0e0;*!*/
    display: flex;
    flex-wrap: wrap; /* Позволяет футеру переходить на новую строку */
    align-content: space-between;
    /*cursor: pointer;*/
    /*transition: all 0.2s ease;*/
    text-decoration: none;
    /*color: inherit;*/
    /*min-height: 125px;*/


    /*background: rgba(255, 255, 255, 0.01);*/
    /*background: var(--color-ice-highlight);*/
    background: rgba(255, 200, 255, 0.05);


    /*border: 1px solid rgba(255, 255, 255, 0.05);*/
    border: 1px solid var(--color-border-ice);
    border-radius: var(--radius-strict);
    padding: 20px;
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    z-index: 1; /* Чтобы текст был поверх текстуры льда панели */


}

.service-card.active {

    /*--golden: #cfd481;*/

    /*--goldish: rgba(211, 204, 17, 0.8);*/
    /*!*--goldish: rgba(255, 250, 220, 0.86);*!*/
    /*--goldplate: #fff884;*/



    /*background: var(--color-ice-base); !* rgba(79, 174, 205, 0.9);*!*/
    /*background: var(--golden-gradient);*/
    /*background: var(--golden);*/
    background: linear-gradient(135deg, #D4AF37 0%, #F1D592 50%, #D4AF37 100%);

    /*border: 1px solid #2694cb; !*#8e7524; !* var(--color-border-ice);*/
    border: 1px solid var(--color-accent-gold);
    /* border-color: #8e7524; /* rgba(251, 245, 183, 0.2); /* var(--color-accent-gold);*/

    /*border-color: var(--color-border-ice);*/
    /*box-shadow: inset 0 0 15px rgba(16, 91, 137, 0.1);*/


    /*background: linear-gradient(135deg, #D4AF37 0%, #F1D592 50%, #D4AF37 100%);*/
    /*border-color: transparent;*/
    /*Внутренние золотые тени (без изменений)*/
    box-shadow:
        /* --- Внутренние тени (Всплеск золота) --- */
            /*inset 0 0 12px rgba(212, 175, 55, 0.8),*/
            /*inset 0 0 6px rgba(251, 245, 183, 0.2),*/

            /*inset 0 0 8px rgba(18, 101, 152, 0.6),*/
            /*inset 0 0 4px rgba(18, 101, 152, 0.1),*/


                /* --- Внешние тени для объема --- */
            /*0 4px 10px rgba(0, 0, 0, 0.5),*/
            /*6px 0 12px rgba(0, 0, 0, 0.3),*/

                /* --- ВАША НОВАЯ ВНЕШНЯЯ ТЕНЬ (Синий неон Tron) --- */
            /*0 5px 25px rgba(18, 101, 152, 0.8);*/
    0 3px 20px rgba(76, 169, 199, 0.7);

    /*0 5px 25px rgba(7, 60, 120, 0.7);*/

    transition: box-shadow 0.3s ease;


}




.service-card.premium {
    background: var(--golden-plate);
}

/* Контейнер для Иконки + Описания */
.card-main-content {
    display: flex;
    flex: 1;
    min-width: 200px;
}

.service-icon {
    width: 50px;
    height: 50px;
    /*background-color: #f5f5f5;*/
    margin-right: 15px;
    flex-shrink: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*.service-info h3 {*/
    /*margin: 0 0 5px 0;*/
    /*color: var(--dark-navy);*/
    /*font-size: 17px;*/
    /*font-weight: 700;*/
/*}*/

/*.service-info p {*/
    /*margin: 0;*/
    /*color: #555;*/
    /*font-size: 12px;*/
    /*line-height: 1.3;*/
    /*max-width: 100%;           !* Ограничиваем ширину абзаца шириной карточки *!*/
    /*overflow-wrap: break-word; !* Современное правило переноса *!*/
    /*word-break: break-word;    !* Фоллбэк для некоторых браузеров (особенно Safari) *!*/
/*}*/


/*.service-info h3 { margin: 0; color: var(--color-accent-gold); text-transform: uppercase; font-size: 16px;}*/
/*.service-info h3 { margin: 0; color: var(--olive-brown);  font-size: 16px;}*/
/*.service-info p { font-size: 12px; opacity: 0.6; margin-top: 5px; color: #fff; }*/


/* 1. БАЗОВОЕ СОСТОЯНИЕ (Тусклое) */
.service-card .service-info h3 {
    margin: 0;
    /* Делаем заголовок более блеклым, подмешивая прозрачность или серый */
    color: rgba(147, 147, 49, 0.5); /* Ваша оливковая переменная, но на 50% прозрачная *!*/

    font-size: 16px;
    text-transform: uppercase;
    transition: all 0.3s ease; /* Плавный переход цвета */
}

.service-card .service-info p {
    font-size: 12px;
    opacity: 0.3; /* Сильно приглушаем описание */
    margin-top: 5px;
    color: #fff;
    transition: all 0.3s ease;
}

/* 2. АКТИВНОЕ СОСТОЯНИЕ (Яркое) */
.service-card.active .service-info h3 {
    /*color: var(--olive-brown); !* Возвращаем полный насыщенный цвет *!*/
    color: #071D49;
    /* Можно добавить легкое свечение тексту в стиле Tron */
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

.service-card.active .service-info p {
    opacity: 1; /* Проявляем текст почти полностью *!*/
    color: #071D49;
}



/* Блок платежа справа */
.dynamic-text {
    /*color: #333;*/
    /*line-height: 1.1;*/
    /* 1. Делаем абзац гибким контейнером (нужно для clamp) */
    /*display: -webkit-box;*/
    /*!* 2. Направляем текст сверху вниз *!*/
    /*-webkit-box-orient: vertical;*/
    /*!* 3. ЖЕСТКО задаем 3 строки *!*/
    /*-webkit-line-clamp: 2;*/

    /* 4. Обрезаем всё, что не влезло */
    /*overflow: hidden;*/

    /* Страховка от раздвижения */
    /*overflow-wrap: break-word;*/
    /*word-break: break-word;*/

    display: block !important;
    position: relative;
    z-index: 9999;
    color: #fff;

}


.card-payment-info {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 10px;
}

.info-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.info-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--olive-brown);
    white-space: nowrap;
}

/* Стилизация "окошек" под базу данных */
.info-value-box {
    background: #ffffff;
    border: 1px solid #b5b5b5;
    color: #000080; /* Темно-синий текст */
    /*font-family: 'Courier New', monospace;*/
    font-weight: bold;
    font-size: 13px;
    padding: 1px 6px;
    min-width: 85px;
    text-align: center;
    border-radius: 2px;
}

.info-value-box.text-small {
    font-size: 13px;
    min-width: 105px;
}

/* Нижняя линия карточки (Футер) */
.card-footer-line {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 8px;
    /*border-top: 1px dashed rgba(0,0,0,0.1);*/
}

.info-value-box.highlight {
    position: relative;
    /*border-color: #81c784;*/
    overflow: hidden;
    /* Плавный переход, если процент изменится */
    transition: background 0.5s ease;
}


.recharge-btn {
    display: flex;
    align-items: center;
    margin-left: 12px;
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
    text-transform: none;
    color: var(--olive-brown);
}

/* Эффект при наведении на всю кнопку сразу */
.recharge-btn:hover span {
    color: var(--olive-brown) !important;
    opacity: 1 !important;
    text-decoration: underline;
}

/* Это правило покрасит вторую часть (скобки), если нет критического класса */
.recharge-btn span:last-child:not(.text-danger-blink) {
    opacity: 0.7; /* Можно сделать скобки чуть приглушенными статично */
}

/* Стиль для скобок, когда время на исходе */
.text-danger-blink {
    color: #d32f2f !important;
    animation: soft-blink 3s infinite;
}

@keyframes soft-blink {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Конкретные картинки для каждого класса */
.icon-etl {
    background-image: url('../images/icons/DBRaptor.svg');
}

.icon-lith {
    background-image: url('../images/icons/LithoRaptor.svg');
}

.icon-geo {
    background-image: url('../images/icons/WellReports.svg');
}

.icon-drill {
    background-image: url('../images/icons/Drilling.svg');
}

.icon-reno {
    background-image: url('../images/icons/Budget.svg');
}

/* --- Right Panel Typography --- */
.panel-title {

    /*color: #071D49;*/

    /*font-weight: 700;*/
    /*margin-bottom: var(--space-md);*/

    /*border-bottom: 2px solid #f0f0f0;*/
    /*padding-bottom: 10px;*/

    /*display: flex;*/
    /*justify-content: space-between;*/
    align-items: center;
    /*border-bottom: 1px solid rgba(16, 91, 137, 0.5);*/
    padding-bottom: 10px;
    font-family: var(--main-font-main);
    font-size: 14px;
    text-transform: uppercase;
    /*color: var(--color-dark);*/
    color: #fff;

}

/* Маленький шрифт для подписей строго над инпутами */
.label-tiny {
    font-size: 9px;
    font-weight: bold;
    color: #444;
    white-space: nowrap;
}


/* --- Contact Page Styles --- */
.contact-info-block {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 25px;
    border-left: 4px solid #105B89;
}

.contact-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
}

.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-info-item strong {
    width: 80px;
    color: #071D49;
}

/* Контейнер группы делаем гридом */
.contact-form-group {
    max-width: 600px;
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 2px 10px;
    align-items: center;
    margin-bottom: 10px;
}

.contact-form-group label {
    display: inline-block;
    white-space: nowrap;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0;
}

.contact-form-group input {
    width: 60%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.contact-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.btn-submit-service {
    background-color: var(--main-green);
    color: white;
    border: none;
    width: 76px;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 12px;
    transition: background 0.3s;
}


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


/* === Формы и Кнопки (Swiss Precision) === */
/*.btn-submit  {*/
    /*background: var(--color-primary, #105B89);*/
    /*border: 1px solid #2cacec;*/
    /*border-radius: 3px;*/
    /*color: #fff;*/
    /*padding: 10px 20px;*/
    /*cursor: pointer;*/
    /*text-transform: uppercase;*/
    /*font-weight: bold;*/
    /*letter-spacing: 1px;*/
    /*transition: 0.3s;*/
/*}*/

/*.btn-submit:hover {*/
    /*box-shadow: 0 0 15px rgba(16, 91, 137, 0.6);*/
/*}*/

/* Вспомогательные блоки */
.promo-label { color: #28a745; font-size: 11px; margin-top: 4px; display: none; }
.not-subscribed-label { color: #999; font-size: 11px; font-style: italic; }


/* Контейнер группы делаем гридом */
/*.template-form-group {*/
    /*display: grid;*/
    /*grid-template-columns: min-content 1fr;*/
    /*gap: 2px 6px;*/
    /*align-items: center;*/
    /*margin-bottom: 4px;*/
/*}*/

/*.template-form-group label {*/
    /*display: inline-block;*/
    /*white-space: nowrap;*/
    /*text-align: right;*/
    /*font-size: 12px;*/
    /*font-weight: 500;*/
    /*color: #333;*/
    /*margin-bottom: 0;*/
/*}*/

/*.template-form-group input, select, textarea {*/
    /*width: 100%;*/
    /*padding: 4px;*/
    /*margin-bottom: 3px;*/
    /*border: 1px solid var(--color-border);*/
    /*border-radius: var(--radius-sm);*/
/*}*/


/*!*.template-form-group input {*!*/
/*!*width: 60%;*!*/
/*!*padding: 8px 10px;*!*/
/*!*border: 1px solid #ccc;*!*/
/*!*border-radius: 4px;*!*/
/*!*box-sizing: border-box;*!*/
/*!*}*!*/

/*.template-form-group textarea {*/
    /*resize: vertical;*/
    /*min-height: 50px;*/
/*}*/

/* Главный контейнер-родитель */
.template-form-group {
    max-width: 505px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px; /* Расстояние между полями и кнопками */
    padding: 6px;
    /*background: #fff;*/




}

/* Левая субпанель: Сетка для полей */
.template-form-group .form-fields {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 1px 4px;
    align-items: center;
    flex-grow: 1; /* Занимает все доступное пространство слева */
}

/* Правая субпанель: Колонка для кнопок */
.template-form-group .form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 100px;
}

/* Стилизация меток только внутри этой формы */
.template-form-group .form-fields label {
    white-space: nowrap;
    text-align: right;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    opacity: 0.4;
    margin: 0;
    padding-bottom: 2px;
    padding-right: 2px;
}

/* Стилизация полей ввода только внутри этой формы */
.template-form-group .form-fields input,
.template-form-group .form-fields textarea,
.template-form-group .form-fields select {
    width: 100%;
    padding: 1px 1px;
    box-sizing: border-box; /* Важно: padding не увеличивает ширину */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
}

.template-form-group .form-fields textarea {
    resize: vertical;
    min-height: 40px;
    max-height: 60px;
}

/* Стили кнопок внутри формы */
.template-form-group .form-actions button {
    width: 100%; /* Кнопки будут одной ширины в колонке */
    padding: 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    /*border: 1px solid #ddd;*/
    transition: background 0.2s;
}

.template-form-group .form-actions .btn-save {
    background-color: #28a745;
    color: white;
    border: none;
    font-weight: bold;
}

.template-form-group .form-actions .btn-save:hover {
    background-color: #218838;
}

.template-form-group .form-actions .btn-help {
    background-color: #f8f9fa;
    color: #333;
}


/* --- Create Database Block --- */
.premium-block {
    margin-top: 14px;
    background: #f4f8fb;
    padding: 10px;
    border-radius: 6px;
    border-top: 1px solid #e0e0e0;
}
.premium-block-title {
    font-size: 16px;
    color: #071D49;
    font-weight: bold;
    margin-bottom: 10px;
}

/* ================================= */
/* FORMS */
/* ================================= */

input, select, textarea {
    width: 100%;
    padding-right: 1px;
    margin-bottom: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--text-blue);
}

/* ================================= */
/* UTILITIES */
/* ================================= */

.hidden {
    display: none;
}

/* ================================= */
/* FOOTER (CONSISTENT WITH HEADER) */
/* ================================= */

.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    /*background: linear-gradient(90deg, var(--color-dark), var(--color-primary));*/
    color: rgba(255,255,255,0.8);
    height: 40px;
    padding: 0 15px;
    border-radius: 6px;
    /*margin-top: 10px;*/
    margin-top: auto; /* ← КЛЮЧ */
    box-shadow: var(--shadow-soft);
}

/* Внутренний контейнер */
.footer_section {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Текст */
.footer_item p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

/* Ссылки */
.footer a {
    color: rgba(255,255,255,0.85);
    margin: 0 6px;
    transition: 0.2s;
}

.footer a:hover {
    color: white;
    text-decoration: underline;
}

/* Блок формы -----------------------------------------*/
.login-box {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    margin: 1rem;
}

/* Заголовок */
.login-box h1 {
    text-align: center;
    color: #071D49;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    font-weight: 600;
}

/* Сообщения об ошибках */
.login-box .message {
    background: #f8d7da;
    color: #dc3545;
    padding: 0.75rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Группы полей */
.form-group {
    /*margin-bottom: 1.25rem;*/
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    /*margin-bottom: 5px;*/
    font-weight: 500;
    /*color: #1e293b;*/
    /*font-weight: bold;*/
    color: var(--olive-brown);
}

.form-group input {
    width: 100%;
    /*padding: 0.75rem;*/
    padding: 10px;
    font-size: 1rem;
    /*border: 1px solid #cbd5e1;*/
    border-radius: 4px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;

    /*border: 1px solid red; !*/
    border: 1px solid var(--border-color);
    /*border: 1px solid var(--border-color2);*/
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: #bec4cf;
    box-shadow: 0 0 0 3px rgba(7, 29, 73, 0.1);
}

/* Ссылки внизу */
.login-links {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
}

.login-links a {
    color: #071D49;
    text-decoration: none;
    margin: 0 0.25rem;
}

.login-links a:hover {
    text-decoration: underline;

}

/* Notification Overlay Styles (перенесены из вашего кода) */
.notification-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.3s;
}
.notification-overlay.active { opacity: 1; visibility: visible; }
.notification-box {
    background: #fff; padding: 30px; border-radius: 8px;
    text-align: center; max-width: 350px; position: relative;
}
.notification-box.error { border-top: 5px solid #dc3545; }
.notification-box.success { border-top: 5px solid #28a745; }

.password-rules {
    font-size: 0.8em; padding: 10px; background: #f8f9fa;
    border: 1px solid #eee; border-radius: 4px; margin-bottom: 10px;
    list-style: none;
}
.password-rules li.invalid { color: #dc3545; }
.password-rules li.valid { color: #28a745; }



/*   стили табов ************************/
/* Стили специально для вложенных табов (не конфликтуют с основными) */
.sub-tabs-nav {
    display: flex;
    border-bottom: 2px solid var(--color-accent-gold); /*#eee;*/
    margin-bottom: 2px;
    margin-top: 4px;

}

.sub-tab-btn {

    /*background: none;*/
    border: 1px solid var(--olive-brown);
    /*padding: 10px 15px;*/
    cursor: pointer;
    opacity: 0.8;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: bold;
    color: var(--olive-brown);

    background: rgba(255, 200, 255, 0.05);

    overflow: hidden;
    display: block;
    padding: 5px 22px 5px 8px;

    line-height: 18px;
    /*color: var(--color-primary);*/
    /*background-color: var(--main-border-color);*/
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;

    -webkit-clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);


}
.sub-tab-btn.active {
    /*border-bottom: 2px solid var(--olive-brown); !* fallback на случай, если css переменная не прогрузится *!*/
    opacity: 0.9;

    /*color: var(--olive-brown); !*rgba(147, 147, 49, 0.5); *!*/
    color: #071D49;
    background: linear-gradient(135deg, #D4AF37 0%, #F1D592 50%, #D4AF37 100%);
    /*margin-bottom: -2px; !* Чтобы линия таба ложилась на линию контейнера *!*/
}

.sub-tab-pane{
    display: none; /* Все скрыты по умолчанию */

    /*background: #f0f4f8;*/
    background: rgba(135, 206, 235, 0.05); /* rgba(255, 200, 255, 0.05); */
    color: #fff;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 8px;
    margin-bottom: 6px;
    border: 1px solid var(--color-border-ice);
    /*border-left: 4px solid #105B89;*/
}

.sub-tab-pane.active {
    display: block !important; /* Показываем только активную */
}

/* Стили из G_tab для блоков внутри табов */
.standard-tools { margin-top: 15px; }
.premium-block { margin-top: 20px; }
.premium-block-title { font-weight: bold; margin-bottom: 10px; color: #071D49; }
.btn-submit.outline {
    background: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
}

/*.btn-submit.outline:hover {*/
    /*background: #dc3545;*/
    /*color: #fff;*/
/*}*/

/*  **********************************************!*/

.menu-option2{
    align-items: flex-start;

}


.template-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/*.panel-dynamic .btn-submit {*/
    /*width: max-content;*/
    /*background-color: #105B89;*/
    /*color: white;*/
    /*border: none;*/
    /*padding: 8px 20px;*/
    /*border-radius: 4px;*/
    /*cursor: pointer;*/
    /*font-family: 'Roboto', sans-serif;*/
    /*font-weight: bold;*/
    /*font-size: 12px;*/
    /*transition: background 0.3s;*/
    /*align-self: flex-start;*/
    /*justify-self: start;*/
/*}*/


.btn-submit {
    width: max-content;
    background-color: #105B89;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 12px;
    transition: background 0.3s;
    align-self: flex-start;
    justify-self: start;
}

/*.btn-submit:hover {*/
    /*background-color: #0d4a6e;*/
    /*!*background: #0a2a5a;*!*/
/*}*/

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

.template {
    overflow: hidden;   /* 🔥 обрезает вылезание */
    /*width: 600px;*/
    /*height: 300px;*/
    box-sizing: border-box;
    /*border: 1px solid #007a00;*/
}
.mapping {
    overflow: hidden;   /* 🔥 обрезает вылезание */
    /*width: 600px;*/
    /*height: 300px;*/
    box-sizing: border-box;
    /*border: 1px solid chocolate;*/
}

/* Внешний вид "карточки" блока */
.grid-block {
    /*background: #fff;*/
    /*border: 1px solid #ddd;*/
    /*padding: 6px;*/
    /*border-radius: 8px;*/
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.05);*/
    /*!*margin-top: 2px;*!*/
    *margin-bottom: 2px;
    color: #071D49;
    /*background: #fff;*/
    background: rgba(255, 200, 255, 0.05);
    border: 1px solid var(--color-border-ice);
    /*border: 1px solid #ddd;*/
    padding: 10px;
    border-radius: 4px; /* Приводим к общему радиусу проекта */
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.05);*/
    box-shadow: 0 2px 12px rgba(18, 101, 152, 0.3);

    /* Добавляем внешний отступ, если padding-а родителя мало */
    margin: 10px 0;

    /* Гарантируем, что блок не вылезет за пределы */
    max-width: 100%;
    box-sizing: border-box;

}

.grid-title {
    display: block;   /*  Делаем блок, чтобы работал margin-bottom */
    /*border-bottom: 1px solid rgba(16, 91, 137, 0.1);*/
    padding-bottom: 5px;
    color: var(--olive-brown);/* rgba(147, 147, 49, 0.5); */
    /*display: block;      !* Делаем блок, чтобы работал margin-bottom *!*/
    /*padding-left: 4px;*/
    /*margin-bottom: 12px; !* Тот самый отступ до рамки грида *!*/
    /*font-size: 14px;*/
    /*text-transform: uppercase;*/
    /*letter-spacing: 0.5px;*/
    /*color: var(--color-primary); !* Синий в стиле Tron для связи с системой *!*/
}

/* Общий контейнер панелей */
.panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/******************************* SUKA ****************/
/* ================================= */
/* FOOTER GROUP LAYOUT (FIX) */
/* ================================= */

/* 1. Основной контейнер  DONE */
/*.footer-group-container {*/
    /*display: flex;*/
    /*align-items: flex-end; !* Выравнивание по низу (базовой линии инпутов) *!*/
    /*width: 100%;*/
    /*gap: 6px;            !* Единый отступ между группами *!*/
    /*justify-content: center;*/
    /*flex-wrap: wrap;*/
    /*margin-bottom: 3px;*/
    /*!*border: 1px solid gray;*!*/
    /*background-color: var(--bg-footer);*/
    /*padding-bottom: 2px;*/
/*}*/


/* 1. Основной контейнер */
.footer-group-container {
    display: flex;
    align-items: flex-end; /* Выравнивание по нижней линии */
    width: 100%;
    gap: 15px;             /* Увеличил отступ между блоками для читаемости */
    justify-content: flex-start; /* Начинаем от левого края */
    flex-wrap: nowrap;     /* Запрещаем перенос, чтобы держать одну линию */
    margin-bottom: 3px;
    /*background-color: var(--bg-footer);*/
    background-color: #cddbe7;
    border-radius: var(--border-radius-panel);
    padding: 5px;
}

/* 2. Блоки групп (Rows и Extra) */
/*.block-rows  {*/
    /*display: flex;         !* Включаем flex для содержимого блока *!*/
    /*flex-direction: row;   !* Выстраиваем элементы в линию *!*/
    /*align-items: flex-end; !* Выравниваем инпуты внутри по низу *!*/
    /*gap: 8px;              !* Отступ между парами Label+Input внутри блока *!*/
    /*!*border: 1px solid red;*!*/
/*}*/

/*.block-tabular-extra {*/
    /*display: flex;         !* Включаем flex для содержимого блока *!*/
    /*flex-direction: row;   !* Выстраиваем элементы в линию *!*/
    /*align-items: flex-end; !* Выравниваем инпуты внутри по низу *!*/
    /*gap: 8px;              !* Отступ между парами Label+Input внутри блока *!*/
    /*!*border: 1px solid blue;*!*/
/*}*/

.block-rows, .block-tabular-extra {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: nowrap; /* Не давать инпутам падать на вторую строку внутри блока */
}

/* Чтобы подписи были над инпутами, но сами пары шли в ряд */
.input-pair {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/*!* 3. Стилизация пар Label + Input *!*/
/*.input-pair {*/
    /*display: flex;*/
    /*flex-direction: column; !* Текст метки над инпутом *!*/
    /*align-items: flex-start;*/
    /*gap: 2px;*/
/*}*/

/*.input-pair {*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*gap: 2px; !* Фиксированный отступ между подписью и инпутом *!*/
    /*align-items: center;*/
/*}*/



/* 4. Специфично для блока с чекбоксом (End Row + EoF) */
.input-row-flex {
    display: flex;
    align-items: center;   /* Чекбокс по центру высоты инпута */
    gap: 5px;
}

/* Вспомогательный класс для скрытия (если управляете через JS добавлением класса) */
.hidden {
    display: none !important;
}


/* 2. Сбрасываем лишний margin-bottom для инпутов внутри футера */
/* Это убирает разницу в высоте между обычными инпутами и оберткой */
.footer-group-container .input-number {
    margin-bottom: 0;
    height: 22px;         /* Фиксируем высоту */
    display: block;
}

/* 3. Стили обертки для Инпут + Чекбокс */
/*.input-row-flex {*/
    /*display: flex;*/
    /*!*width: 100px;*!*/
    /*align-items: center;  !* Центрируем чекбокс по вертикали относительно инпута *!*/
    /*gap: 4px;*/
    /*!* Ключевой момент: фиксируем высоту обертки равной высоте инпута *!*/
    /*height: 22px;*/
/*}*/

/* 4. Уточнение для чекбокса */
/* Глобальный стиль input { width: 100% } ломает чекбокс, исправляем */
.footer-group-container input[type="checkbox"] {
    width: auto;
    margin: 0;            /* Убираем отступы */
    cursor: pointer;
    vertical-align: middle;
}

/* 5. Подпись к чекбоксу */
.checkbox-label {
    /*display: flex;*/
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* Опционально: чтобы лейблы сверху всегда были на одной линии */
/*.input-pair {*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*gap: 2px; !* Фиксированный отступ между подписью и инпутом *!*/
    /*align-items: center;*/
/*}*/

.blue-text {
    color: var(--text-blue);
    font-family: var(--text-blue-font);
}

/* Вертикальная пара: Надпись сверху, Инпут снизу */
/* Числовые поля ввода */
.input-number {
    width: 65px;
    height: 22px;
    /*border-radius: var(--border-radius-input);*/
    text-align: center;
    /*font-weight: bold;*/
    /*font-weight: normal;*/
}




.menu-group-title {
    /*font-family: var(--main-font-main);*/
    font-size: 12px;
    font-weight: bold;
    /*color: var(--golden);*/
    /*text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);*/
}