/* MODERN MINIMAL CSS - UPDATED */
:root {
    --primary: #2563eb;
    --accent: #3b82f6;
    --dark: #0f172a;
    --gray: #64748b;
    --light-bg: #f8fafc;
    --white: #ffffff;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --radius: 12px;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--light-bg);
    color: var(--dark);
    line-height: 1.6;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* HEADER */
.header {
    background: var(--white);
    padding: 1rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary);
    text-decoration: none;
}

/* NAVIGATION */
.nav {
    display: flex;
    gap: 24px;
}

.nav a {
    text-decoration: none;
    color: var(--gray);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 5px 0;
    transition: all 0.2s;
    border-bottom: 2px solid transparent; /* Заготовка під лінію знизу */
}

/* 3. Підсвітка активної сторінки та наведення */
.nav a:hover, .nav a.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary); /* Красива лінія під текстом */
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--dark);
}

/* GRID & CARDS */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.card {
    background: var(--white);
    padding: 24px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--dark);
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.1);
    border-color: var(--primary);
}

/* 2. FOOTER - Центрування */
.footer {
    text-align: center;
    padding: 20px 20px;
    color: var(--gray);
    font-size: 14px;
    background: var(--white); /* Можна додати легкий фон */
    border-top: 1px solid #e2e8f0;
    margin-top: 40px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        padding: 0; /* Прибираємо внутрішні відступи для ефекту на весь рядок */
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        gap: 0; /* Прибираємо проміжки між пунктами */
    }

    /* 1. Ефект наведення на мобільці на весь рядок */
    .nav a {
        padding: 15px 20px;
        border-bottom: 1px solid #f1f5f9; /* Розділювач між пунктами */
        border-left: 4px solid transparent; /* Заготовка під смужку збоку */
    }

    .nav a:hover, .nav a.active {
        background-color: #f8fafc;
        border-bottom: 1px solid #f1f5f9;
        border-left: 4px solid var(--primary); /* Смужка зліва замість низу */
    }

    .nav.show {
        display: flex;
    }
}

/* Кнопки банків у футері */
.bank-btn {
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: transform 0.2s, opacity 0.2s;
    color: white;
}

.bank-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.bank-btn.mono { background-color: #1a1a1a; }    /* Чорний Моно */
.bank-btn.privat { background-color: #72b22a; }  /* Зелений Приват */
.bank-btn.pumb { background-color: #f22b2b; }    /* Червоний ПУМБ */

/* Центрування футера вже є у нас в основному коді, але про всяк випадок переконайся */
.footer {
    text-align: center;
    border-top: 1px solid #e2e8f0;
    padding: 5px 0;
    background: #ffffff;
}

.header {
    /* ТУТ ВСТАВЛЯЙ СВІЙ ЛІНК */
    background-image: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)), 
                      url('https://images.unsplash.com/photo-1574362848149-11496d93a7c7?q=80&w=1000'); 
    
    background-size: cover;        /* Картинка заповнює весь простір */
    background-position: center;   /* Центруємо зображення */
    background-attachment: scroll; /* Картинка рухається разом зі сторінкою */
    
    padding: 50px 0;               /* Збільшуємо висоту, щоб було видно фон */
    color: white;                  /* Робимо текст білим, бо фон буде темним */
    transition: all 0.3s ease;
}

/* Робимо логотип і посилання білими, щоб вони читалися на фоні */
.header .logo {
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Легка тінь для чіткості */
}

.header .nav a {
    color: rgba(255, 255, 255, 0.8);
}

.header .nav a:hover, 
.header .nav a.active {
    color: white;
    border-bottom-color: white;
}

.header .menu-toggle {
    color: white;
}

@media (max-width: 768px) {
    .header {
        padding: 20px 0 !important; /* Трохи компактніше на мобілці */
        position: relative !important; /* Змінюємо sticky на relative для мобілки, щоб меню не тікало */
    }

    .header-inner {
        flex-direction: column; 
        position: relative;
    }

    .menu-toggle {
        display: block !important;
        order: 2; 
        margin-top: 10px;
        color: white !important;
    }

    .nav {
        display: none; 
        flex-direction: column;
        width: 100%;
        background: rgba(15, 23, 42, 0.98) !important; /* Робимо фон дуже темним і непрозорим */
        position: absolute;
        top: 100% !important; /* Випадає чітко під шапкою */
        left: 0;
        z-index: 9999 !important; /* Поверх усього! */
        margin-top: 0 !important;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.3);
    }

    .nav.show {
        display: flex !important;
    }

    .nav a {
        color: white !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-left: 4px solid transparent;
        text-align: center;
    }
}
    

/* Ефект при натисканні пальцем */
/* Повертаємо синю підсвітку для десктопної версії */
.header .nav a.active {
    color: var(--primary) !important; /* Робимо текст синім */
    border-bottom: 2px solid var(--primary) !important; /* Синя лінія знизу */
    opacity: 1;
}

.header .nav a:hover {
    color: var(--primary) !important;
    border-bottom: 2px solid var(--primary) !important;
}

body {
    margin: 0;
    padding: 0;
    /* Inter — це "золотий стандарт" сучасних інтерфейсів */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--light-bg);
    color: var(--dark);
    line-height: 1.5;
    font-size: 16px; /* Твій основний текст */
}

/* Налаштування заголовків на сторінках */
h1, h2, h3 {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: var(--dark);
    margin-top: 30px;
    margin-bottom: 20px;
    letter-spacing: -0.5px; /* Трохи зсуваємо літери для стилю */
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 45px 0;
    
    /* Робимо текст дуже делікатним */
    color: var(--gray);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em; /* Розсуваємо літери для "преміального" вигляду */
    opacity: 0.7;
}

.separator::before, .separator::after {
    content: '';
    flex: 1;
    /* Робимо лінію надтонкою (0.5px) і напівпрозорою */
    height: 1px;
    background: rgba(100, 116, 139, 0.2); 
}

/* Відступи від тексту */
.separator:not(:empty)::before { margin-right: 20px; }
.separator:not(:empty)::after { margin-left: 20px; }

/* --- ФІНАЛЬНІ НАЛАШТУВАННЯ СТИЛЮ --- */

/* Десктоп (комп'ютер) */
@media (min-width: 769px) {
    .header .nav a.active, 
    .header .nav a:hover {
        color: #ffffff !important; 
        border-bottom: 3px solid var(--primary) !important; 
        opacity: 1;
        padding-bottom: 5px;
    }
}

/* Мобілка */
@media (max-width: 768px) {
    .nav a.active {
        color: #ffffff !important; 
        background: rgba(37, 99, 235, 0.15); 
        border-left: 4px solid var(--primary) !important; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* Типографіка та Розділювачі */
body {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

h1, h2, h3 {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 45px 0;
    color: var(--gray);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0.7;
}

.separator::before, .separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(100, 116, 139, 0.2);
}



.cta-container {
    width: 100%;
    display: flex;
    justify-content: center; /* Залізобетонне центрування по горизонталі */
    margin: 30px 0; /* Великий відступ: 30px зверху і знизу */
    position: relative; /* Щоб не залежати від інших блоків */
    z-index: 10; /* Бути поверх усього контенту */
}

.cta-map-bar {
    display: inline-flex; /* Компактна таблетка по ширині тексту */
    align-items: center;
    gap: 10px; /* Відстань між крапкою і текстом */
    padding: 10px 22px; /* Трохи більші відступи для солідності */
    
    background: #1e293b; /* Темно-синій фон, як у хедера */
    border-radius: 50px; /* Округла форма */
    
    /* 3D ефект і тіні */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    color: #ffffff !important; /* Текст ТОЧНО білий */
    text-decoration: none;
    font-weight: 600;
    font-size: 13px; /* Чіткий, не замалий шрифт */
    transition: all 0.3s ease;
}

.cta-map-bar:hover {
    transform: translateY(-2px); /* Легке підняття при наведенні */
    background: #0f172a; /* Темнішає */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.radar-dot {
    width: 7px;
    height: 7px;
    background: #ff4d4d; /* Червоний */
    border-radius: 50%;
    flex-shrink: 0; /* Не стискати крапку */
    box-shadow: 0 0 10px #ff4d4d;
    animation: simple-pulse 2s infinite;
}

@keyframes simple-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

/* Сітка для Telegram-каналів */
.tg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.tg-card {
    display: flex;
    align-items: center;
    background: var(--white);
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--dark);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.tg-card:hover {
    border-color: var(--primary);
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

/* Маленька синя цятка або іконка зліва */
.tg-card::before {
    content: '✈️'; /* Можна замінити на будь-який емодзі або іконку */
    margin-right: 10px;
    font-size: 16px;
}

@media (max-width: 480px) {
    .tg-grid {
        grid-template-columns: 1fr; /* На зовсім малих екранах в один стовпчик */
    }
}

/* СТИЛЬ ДЛЯ МАП УКРИТТІВ */
.shelter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.shelter-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 30px;
    border: 1px solid #e2e8f0;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.shelter-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
}

/* Контейнер для логотипа — РОБИМО ЙОГО ВЕЛИКИМ І СОЛІДНИМ */
.shelter-logo {
    width: 280px;         /* Збільшили у 2.5 рази від попереднього! */
    height: 180px;        /* Зробили прямокутний контейнер, ідеальний для скріншотів мап */
    margin-bottom: 25px;
    
    display: flex;        /* Вмикаємо flexbox для центрування */
    align-items: center;  
    justify-content: center; 
    
    background: #f8fafc;  /* Дуже світлий сірий фон для іконки, щоб виділити її на білій картці */
    border-radius: 12px;  /* Трохи закруглимо кути самого контейнера */
    padding: 10px;        /* Додамо внутрішній відступ, щоб картинка не липла до країв */
    border: 1px solid #e2e8f0; /* Легка рамка */
    
    overflow: hidden;      /* Щоб нічого не вилазило за межі */
    transition: all 0.3s ease; /* Для плавного ефекту при наведенні */
}

/* Ефект сяйва при наведенні на КАРТКУ (не тільки на іконку) */
.shelter-card:hover .shelter-logo {
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.4); /* Червоне сяйво для мап тривог */
    border-color: #ff4d4d; /* Червона рамка */
}

/* Стиль самої картинки всередині контейнера */
.shelter-logo img {
    max-width: 100%;       /* Картинка займає максимум ширини контейнера */
    max-height: 100%;      /* Картинка займає максимум висоти контейнера */
    object-fit: contain;   /* Зберігає пропорції та не обрізається */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); /* Легка тінь іконки */
}

/* Підправимо заголовки, щоб вони виглядали солідніше під великими картинками */
.shelter-card h3 {
    font-size: 20px;       /* Трохи більший шрифт заголовка */
    color: var(--dark);
    margin-bottom: 25px;
    min-height: 60px;      /* Щоб заголовки у 2 рядки були рівними */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Список кроків */
.shelter-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* Текст кроків краще читається зліва */
    width: 100%;
}

.shelter-steps li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--gray);
    line-height: 1.4;
}

/* Красиві буліти замість стандартних */
.shelter-steps li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

/* Кнопка дії всередині картки */
.shelter-btn {
    margin-top: auto;
    padding: 10px 20px;
    background: var(--light-bg);
    color: var(--primary);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.2s;
}

.shelter-card:hover .shelter-btn {
    background: var(--primary);
    color: white;
}

/* Вступна картка */
.info-intro-card {
    background: #f1f5f9;
    padding: 25px;
    border-radius: 15px;
    border-left: 5px solid var(--primary);
    margin-bottom: 30px;
}

.link-format {
    background: #fff;
    padding: 10px;
    display: inline-block;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px dashed var(--primary);
}

/* Сітка переваг */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.benefit-item {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
}

/* Картки пристроїв */
.instructions-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.device-card {
    flex: 1;
    min-width: 280px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.device-header {
    padding: 15px;
    color: white;
    font-weight: 700;
    text-align: center;
}

.ios { background: #000; }
.android { background: #3ddc84; color: #000; }
.desktop { background: #24A1DE; }

.device-card ul {
    padding: 20px;
    list-style-type: none;
}

.device-card ul li {
    margin-bottom: 10px;
    font-size: 14px;
    position: relative;
    padding-left: 20px;
}

.device-card ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

/* Фінальна плашка */
.friendly-note {
    text-align: center;
    background: #fffbeb;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #fef3c7;
}

.shelter-joke {
    font-style: italic;
    color: #92400e;
    margin-top: 10px;
}

/* Заголовок переваг робимо менш агресивним */
.benefits-title {
    font-size: 16px;
    color: var(--dark);
    margin: 25px 0 15px 0;
    padding-left: 10px;
    border-left: 3px solid #ffd700; /* Жовта смужка біля блискавки */
}

/* Перетворюємо сітку на вертикальний стек */
.benefits-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}

.benefit-row {
    display: flex;
    align-items: center;
    background: #f8fafc; /* Дуже легкий фон */
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.benefit-row:hover {
    background: #fff;
    border-color: var(--primary);
    transform: translateX(5px); /* Легкий зсув вправо при наведенні */
}

.benefit-icon {
    font-size: 18px;
    margin-right: 15px;
    flex-shrink: 0;
}

.benefit-text {
    font-size: 14px;
    color: var(--gray);
    line-height: 1.4;
}

.benefit-text strong {
    color: var(--dark);
}

/* ГОЛОВНИЙ БЛОК АВАРІЙНОЇ СТОРІНКИ */
.emergency-hero {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 40px 0;
    background: var(--white);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.emergency-image {
    flex: 1;
    max-width: 500px;
}

.emergency-image img {
    width: 100%;
    border-radius: 12px;
    display: block;
    object-fit: cover;
}

.emergency-content {
    flex: 1;
    text-align: left;
}

.emergency-content h1 {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--dark);
}

.emergency-content p {
    font-size: 16px;
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Кнопка Бота - робимо її акцентною */
.bot-button {
    display: inline-block;
    padding: 12px 30px;
    background: #2d2d2d; /* Темний колір як на скріні */
    color: #fff !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.bot-button:hover {
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}

/* Мобільна адаптація */
@media (max-width: 768px) {
    .emergency-hero {
        flex-direction: column;
        text-align: center;
    }
    .emergency-content {
        text-align: center;
    }
    .emergency-image {
        max-width: 100%;
    }
}

.bot-button-container {
    width: 100%;
    display: flex;
    justify-content: center; /* Центрує кнопку по горизонталі всередині текстового блоку */
    margin-top: 10px;        /* Невеликий відступ від тексту зверху */
}

/* На мобілках, якщо захочеш повернути її ліворуч або лишити як є */
@media (max-width: 768px) {
    .bot-button-container {
        justify-content: center; /* На мобілках теж по центру */
    }
}

/* СІТКА АВАРІЙНИХ СЛУЖБ */
/* СІТКА СЛУЖБ - БЕЗ СИРІТОК */
/* ФІНАЛЬНА СІТКА НА GRID — ПЕРЕМОГА НАД СИРІТКОЮ */
/* --- ПЕРЕМОЖНА СІТКА (БЕЗ САМОДІЯЛЬНОСТІ БРАУЗЕРА) --- */

.services-grid {
    display: grid;
    /* Жорстко 4 колонки на великому екрані */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    margin: 30px 0;
    width: 100%;
}

.service-card {
    background: #fff;
    border-radius: 15px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 8px 15px rgba(37, 99, 235, 0.1);
}

/* ФОТО */
.service-img-container {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-bottom: 1px solid #e2e8f0;
}

.service-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* КОНТЕНТ */
.service-details {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.service-details h3 {
    font-size: 16px;
    margin-bottom: 15px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
}

/* ПОСИЛАННЯ ТА ТЕЛЕФОНИ */
.contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-size: 13px;
    color: var(--gray);
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 8px;
    background: #f8fafc;
    transition: all 0.2s;
}

.contact-link:hover {
    background: #f1f5f9;
    color: var(--primary);
}

.phone-link {
    color: #ff4d4d !important;
    font-weight: 700;
    border: 1px solid #ffebeb;
}

.phone-link:hover {
    border-color: #ff4d4d;
    background: #fff1f1;
}

/* --- АДАПТИВНІСТЬ: ЖОРСТКЕ ПЕРЕМИКАННЯ --- */

/* Коли 4 картки починають тиснути одна одну (ноутбуки) */
@media (max-width: 1200px) {
    .services-grid {
        /* Жорстко 2 колонки. Тепер буде 2 зверху, 2 знизу. Квадрат! */
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* Коли екран зовсім вузький (телефони) */
@media (max-width: 650px) {
    .services-grid {
        /* 1 колонка — всі в ряд */
        grid-template-columns: 1fr;
    }
}

/* Опис послуги всередині картки */
.service-desc {
    font-size: 13px;
    color: var(--gray);
    line-height: 1.4;
    margin-bottom: 15px;
    min-height: 60px; /* Щоб картки були однакової висоти, навіть якщо тексту різна кількість */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* КОНТЕЙНЕР ДЛЯ ВСІХ СПИСКІВ */
.masters-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.master-category {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* ЗАГОЛОВОК (Те, що видно завжди) */
.master-category summary {
    list-style: none;
    cursor: pointer;
    padding: 0;
}

.category-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    gap: 20px;
}

.category-header img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f1f5f9;
}

.category-title {
    font-size: 18px;
    font-weight: 700;
    flex-grow: 1;
}

.chevron {
    color: var(--gray);
    transition: transform 0.3s;
}

.master-category[open] .chevron {
    transform: rotate(180deg);
}

/* ВНУТРІШНІЙ СПИСОК (Та сама "кишка", яка тепер під контролем) */
.category-content {
    padding: 10px 20px 20px;
    background: #f8fafc;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    border-top: 1px solid #e2e8f0;
}

/* КАРТКА ОКРЕМОГО МАЙСТРА */
.master-item {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    line-height: 1.5;
}

.master-item strong {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
}

.master-phone {
    display: inline-block;
    margin: 8px 0;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    background: #eff6ff;
    padding: 5px 12px;
    border-radius: 20px;
}

.disclaimer {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    margin-bottom: 20px;
    font-style: italic;
}

.accordion-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.acc-item {
    flex: 1 1 calc(50% - 10px); /* 2 в ряд */
}

.acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 15px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
}

.acc-trigger img { width: 40px; height: 40px; border-radius: 50%; margin-right: 15px; }
.acc-trigger span { font-weight: 700; flex-grow: 1; text-align: left; }

/* КОНТЕНТ НА ВСЮ ШИРИНУ */
.acc-content {
    display: none; /* Спочатку приховано */
    width: 100%;   /* Завжди 100% ширини контейнера */
    background: #f8fafc;
    border-radius: 15px;
    padding: 20px;
    border: 1px solid #cbd5e1;
    margin-top: -5px;
    order: 10; /* Це змушує контент завжди бути ПІД усіма кнопками ряду */
}

.acc-content.active { display: block; }

/* Внутрішня сітка для майстрів */
.masters-grid-inner {
    display: grid;
    /* minmax(290px, 1fr) — це запобіжник: картка не може бути вужчою за 290 пікселів */
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); 
    gap: 20px;
    width: 100%; /* Чітко на всю ширину */
    box-sizing: border-box;
}

/* Сама картка */
.m-card {
    background: #fff;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    /* Додаємо, щоб контент всередині не виходив за межі */
    word-wrap: break-word; 
    overflow-wrap: break-word;
}

/* Виправляємо телефон, щоб він не ліз на текст */
.m-link {
    display: block; /* Робимо його окремим рядком-блоком */
    width: fit-content;
    margin: 10px 0;
    padding: 8px 12px;
    background: #eff6ff;
    border-radius: 8px;
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap; /* Щоб номер не розривався на два рядки */
}

@media (max-width: 600px) {
    .acc-item { flex: 1 1 100%; }
}

/* Стиль для кнопки, коли вона відкрита */
.acc-trigger.is-open {
    background: #f0f7ff; /* Ніжно-блакитний фон */
    border-color: #2563eb; /* Яскрава рамка */
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

/* Колір тексту та іконки при відкритті */
.acc-trigger.is-open span {
    color: #2563eb;
}

/* Повертаємо стрілочку */
.acc-trigger.is-open .arrow {
    transform: rotate(180deg);
    color: #2563eb;
}

/* Додай плавність стрілочці (у загальний стиль .arrow) */
.arrow {
    transition: transform 0.3s ease;
    display: inline-block;
}

.contacts-section {
    margin-top: 40px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 15px;
}

.contacts-container {
    display: flex;
    gap: 30px;
    flex-wrap: wrap; /* Для адаптивності на мобільних */
}

.contact-map {
    flex: 1;
    min-width: 300px;
}

.contact-map iframe {
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.contact-info {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-block h3 { margin-bottom: 10px; color: #2c3e50; }

.admin-links { margin: 15px 0; }

.admin-btn {
    display: inline-block;
    padding: 5px 12px;
    background: #0088cc;
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.9em;
    margin-left: 10px;
}

.contact-item {
    display: block;
    margin: 8px 0;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.houses-block {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.houses-list {
    list-style: none;
    padding: 0;
    font-size: 0.95em;
    line-height: 1.6;
    color: #555;
}

/* Мобільна версія */
@media (max-width: 768px) {
    .contacts-container { flex-direction: column; }
    .contact-map iframe { height: 300px; }
}

.admin-links {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.admin-profile {
    text-decoration: none;
    color: #1e293b;
    font-weight: 600;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.admin-profile:hover {
    color: #2563eb;
}

.admin-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #22c55e; /* Зробимо канал зеленим для контрасту */
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 0.9em;
    font-weight: 600;
    transition: transform 0.2s;
}

.admin-btn:hover {
    transform: scale(1.05);
    background: #16a34a;
}

.osbb-page {
    padding: 30px;
    border-radius: 15px;
    line-height: 1.6;
    color: #333;
}

.osbb-page h1 { color: #1e293b; margin-bottom: 20px; }
.osbb-page h3 { color: #2563eb; margin-top: 25px; }

.osbb-list {
    padding-left: 20px;
    margin: 15px 0;
}

.osbb-list li { margin-bottom: 10px; }

/* Стиль для кнопки */
.cta-container {
    margin-top: 40px;
    text-align: center;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    background: #0088cc; /* Колір Telegram */
    color: white;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
    transition: all 0.3s ease;
}

.cta-button:hover {
    background: #0077b5;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
}

@media (max-width: 600px) {
    .cta-button { width: 100%; font-size: 1em; padding: 12px 20px; }
}

.done-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.section-intro {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
}

.timeline {
    position: relative;
    border-left: 3px solid #2563eb;
    margin-left: 20px;
    padding-left: 30px;
}

.event-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
}

.event-card:hover {
    transform: translateX(5px);
}

/* Крапка на лінії */
.event-card::before {
    content: '';
    position: absolute;
    left: -41px;
    top: 20px;
    width: 16px;
    height: 16px;
    background: #2563eb;
    border: 4px solid #fff;
    border-radius: 50%;
    z-index: 1;
}

.event-date {
    font-size: 0.85em;
    font-weight: bold;
    color: #2563eb;
    margin-bottom: 8px;
}

.event-content h3 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    color: #1e293b;
}

.event-img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}

.event-executor {
    margin-top: 15px;
    font-size: 0.9em;
    color: #555;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.event-link {
    display: inline-block;
    margin-top: 10px;
    color: #0088cc;
    text-decoration: none;
    font-weight: 500;
}

/* Виділення важливих подій (наприклад, ДСНС) */
.event-card.highlight {
    border: 2px solid #2563eb;
    background: #f8faff;
}

@media (max-width: 600px) {
    .timeline {
        margin-left: 10px;
        padding-left: 20px;
    }
    .event-card::before {
        left: -31px;
    }
}

.needs-section {
    padding: 40px 20px;
}

.needs-section h2 { text-align: center; margin-bottom: 10px; }

.sticky-notes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 20px;
}

.sticky-note {
    width: 280px;
    min-height: 320px;
    padding: 20px;
    position: relative;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Ефект нахилу для реалістичності */
.sticky-note:nth-child(even) { transform: rotate(2deg); }
.sticky-note:nth-child(odd) { transform: rotate(-2deg); }
.sticky-note:hover { transform: rotate(0deg) scale(1.05); z-index: 10; }

/* Кольори стікерів */
.yellow { background: #fff9c4; border-bottom: 2px solid #fbc02d; }
.blue { background: #e3f2fd; border-bottom: 2px solid #1976d2; }
.pink { background: #fce4ec; border-bottom: 2px solid #d81b60; }

.note-img-wrapper {
    width: 100%;
    height: 150px;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.05);
}

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

.note-body h3 {
    font-family: 'Comic Sans MS', cursive, sans-serif; /* Додає ефект запису від руки */
    margin: 0 0 10px 0;
    font-size: 1.2em;
}

.note-body p {
    font-size: 0.95em;
    flex-grow: 1;
}

.note-footer {
    margin-top: 15px;
    font-size: 0.85em;
    border-top: 1px dashed rgba(0,0,0,0.1);
    padding-top: 10px;
}

/* Адаптивність */
@media (max-width: 600px) {
    .sticky-note { width: 100%; transform: rotate(0deg) !important; }
}

.admin-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dashed #2563eb;
    transition: all 0.2s;
}

.admin-link:hover {
    color: #d81b60;
    border-bottom-color: #d81b60;
}

/* Додатково: ефект загнутого куточка для реалістичності */
.sticky-note::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    border-width: 20px 20px 0 0;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) #fff; /* Колір фону вашого сайту замість #fff */
    display: block;
    width: 0;
}

/* =========================================
   ПОВНИЙ СТИЛЬ СТОРІНКИ НОВИН (КАЛЕНДАР)
   ========================================= */

/* Контейнер всієї сторінки */
.event-calendar-page {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #334155;
}

/* --- СТИЛЬ КАЛЕНДАРЯ --- */
.calendar-card {
    background: white;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    margin-bottom: 40px;
    border: 1px solid #e2e8f0;
}

.calendar-header {
    background: #e11d48; /* Червоний колір */
    color: white;
    text-align: center;
    padding: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 1.1em;
    text-transform: uppercase;
}

.calendar-body {
    display: flex;
    align-items: center;
    padding: 30px;
}

.calendar-day {
    font-size: 5em;
    font-weight: 900;
    line-height: 1;
    color: #1e293b;
    padding: 0 40px;
    border-right: 3px solid #f1f5f9;
    margin-right: 40px;
}

.calendar-title h1 {
    margin: 0;
    font-size: 2.2em;
    color: #0f172a;
    line-height: 1.2;
}

.calendar-title p {
    margin: 10px 0 0 0;
    font-size: 1.2em;
    color: #64748b;
}

/* --- СТИЛЬ КАРУСЕЛІ (ФОТО) --- */
.photo-carousel {
    margin-bottom: 50px;
}

.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 10px 0 25px 0;
    scrollbar-width: auto;
    scrollbar-color: #e11d48 #f1f5f9;
}

/* Покращений скролбар */
.carousel-track::-webkit-scrollbar {
    height: 10px;
}
.carousel-track::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
.carousel-track::-webkit-scrollbar-thumb {
    background: #e11d48;
    border-radius: 10px;
    border: 2px solid #f1f5f9;
}

.carousel-track img {
    flex: 0 0 85%;
    width: 85%;
    height: 500px;
    object-fit: cover;
    border-radius: 15px;
    scroll-snap-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Стрілочки навігації */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(225, 29, 72, 0.9);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.nav-btn:hover {
    background: #be123c;
    scale: 1.1;
}

.prev { left: -25px; }
.next { right: -25px; }

.carousel-hint {
    text-align: center;
    font-size: 0.95em;
    color: #64748b;
    margin-top: 15px;
}

/* --- СТИЛЬ ТЕКСТУ ТА СКЛАДУ ГУРТУ --- */
.event-text-content {
    line-height: 1.8;
    font-size: 1.15em;
}

.event-text-content h3 {
    color: #1e293b;
    margin-top: 40px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 10px;
}

.event-text-content ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin: 25px 0;
}

.event-text-content li {
    background: #f8fafc;
    padding: 15px;
    border-radius: 10px;
    border-left: 4px solid #3b82f6; /* Синій акцент для музикантів */
}

.info-note {
    background: #fffcf0;
    padding: 25px;
    border-left: 5px solid #e11d48;
    margin: 40px 0;
    border-radius: 0 12px 12px 0;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
}

.info-note h4 { margin: 0 0 10px 0; color: #9a3412; }

/* Кнопка Facebook */
.fb-link {
    display: inline-block;
    padding: 14px 30px;
    background: #1877f2;
    color: white !important;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: 0.3s;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

.fb-link:hover {
    background: #145dbf;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(24, 119, 242, 0.4);
}

/* --- АДАПТИВНІСТЬ --- */
@media (max-width: 768px) {
    .calendar-body { flex-direction: column; text-align: center; padding: 20px; }
    .calendar-day { 
        border-right: none; 
        border-bottom: 3px solid #f1f5f9; 
        margin-right: 0; 
        margin-bottom: 15px; 
        padding: 0 0 15px 0; 
    }
    .calendar-title h1 { font-size: 1.6em; }
    
    .nav-btn { display: none; } /* На мобільних гортаємо пальцем */
    .carousel-track img { flex: 0 0 100%; width: 100%; height: 350px; }
    
    .prev { left: 10px; }
    .next { right: 10px; }
}

/* Робимо сітку для 4-х людей рівномірною */
.band-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 колонки на ПК */
    gap: 20px;
    margin: 20px 0;
}

@media (max-width: 600px) {
    .band-grid {
        grid-template-columns: 1fr; /* 1 колонка на мобільних */
    }
}

.member-card {
    background: #fdfdfd;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #e11d48; /* Колір календаря для єдності */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.03);
}

.member-card strong {
    display: block;
    color: #1e293b;
    margin-bottom: 5px;
}

.member-card p {
    font-size: 0.9em;
    line-height: 1.4;
    margin: 0;
    color: #475569;
}

.main-intro {
    font-size: 1.2em;
    font-weight: 500;
    margin-bottom: 30px;
}

.instrument-deep-dive {
    background: #f1f5f9;
    padding: 20px;
    border-radius: 12px;
    margin: 30px 0;
}

.button-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.action-btn {
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    background: #1e293b;
    color: white !important;
    transition: 0.3s;
}

.action-btn.secondary { background: #e11d48; }
.action-btn:hover { opacity: 0.9; transform: translateY(-2px); }

/* Центрування кнопок */
.news-links-section {
    text-align: center; /* Центруємо текст над кнопками */
    margin-top: 40px;
    padding: 20px;
    border-top: 1px solid #f1f5f9;
}

.button-group {
    display: flex;
    gap: 15px;
    justify-content: center; /* ОСНОВНА МАГІЯ ТУТ: кнопки стають по центру */
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Трохи збільшимо кнопки, щоб на них було зручніше натискати */
.action-btn {
    padding: 12px 25px;
    min-width: 160px; /* Щоб кнопки були приблизно однакового розміру */
    text-align: center;
}

.donations-compact {
    padding: 30px 10px;
}

.donations-container {
    display: grid;
    /* Створюємо 6 рівних колонок */
    grid-template-columns: repeat(6, 1fr); 
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
}

.mini-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.2s;
}

.mini-card:hover {
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border-color: #3b82f6;
}

.mini-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin: 0 auto 10px;
}

.mini-card h4 {
    font-size: 0.9em;
    margin: 0 0 8px 0;
    color: #0f172a;
    line-height: 1.2;
}

.mini-card p {
    font-size: 0.75em;
    color: #64748b;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.mini-btn {
    display: block;
    padding: 6px 0;
    background: #334155;
    color: white !important;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: bold;
}

.mini-btn:hover { background: #1e293b; }
.mini-btn.green { background: #10b981; }
.mini-btn.purple { background: #8b5cf6; }

/* Адаптивність для мобільних */
@media (max-width: 1024px) {
    .donations-container {
        grid-template-columns: repeat(3, 1fr); /* 3 в ряд на планшетах */
    }
}

@media (max-width: 600px) {
    .donations-container {
        grid-template-columns: repeat(2, 1fr); /* 2 в ряд на телефонах */
    }
}

/* Контейнер, який відштовхує фон */
.collect-board {
    max-width: 900px;
    margin: 40px auto;
    background: #ffffff !important; /* Білий фон, щоб нічого не просвічувало */
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative;
    z-index: 10; /* Виводить таблицю на передній план */
}

.board-header {
    background: #1e293b;
    color: white;
    padding: 15px 20px;
    font-weight: bold;
    border-radius: 12px 12px 0 0;
}

.board-content {
    padding: 10px;
}

/* Кожен рядок як окрема картка */
.collect-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: white;
}

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

.collect-item .info h3 { margin: 0; font-size: 1.1em; color: #1e293b; }
.collect-item .info p { margin: 5px 0 0 0; font-size: 0.85em; color: #64748b; }

.details { display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.price { font-weight: bold; color: #1e293b; margin-bottom: 5px; }

/* Статуси */
.st-badge {
    font-size: 0.75em;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: bold;
}
.paused .st-badge { background: #f1f5f9; color: #64748b; }
.active .st-badge { background: #dcfce7; color: #166534; }

/* Кнопки */
.btn-st {
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: bold;
    background: #f1f5f9;
    color: #475569;
    display: inline-block;
}

.btn-st.primary {
    background: #2563eb;
    color: white !important;
}

/* Анімація */
.pulse { animation: simple-pulse 2s infinite; }
@keyframes simple-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Для мобільних */
@media (max-width: 650px) {
    .collect-item { flex-direction: column; text-align: center; gap: 15px; }
}

.collect-board {
    max-width: 1100px;
    margin: 40px auto;
    background: #ffffff !important;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
}

.board-header {
    background: #1e293b;
    color: white;
    padding: 20px;
    font-weight: bold;
    text-align: center;
    font-size: 1.2em;
}

.collect-item {
    display: grid;
    /* Три рівні колонки для балансу */
    grid-template-columns: 1.2fr 0.8fr 1fr;
    align-items: center;
    padding: 25px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.3s;
}

.collect-item:last-child { border-bottom: none; }
.collect-item:hover { background: #fcfdfe; }

/* Колонка 1: Назва та статус */
.col-main { position: relative; }
.status-indicator {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.active .status-indicator { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.paused .status-indicator { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

.col-main h3 { margin: 0; font-size: 1.15em; color: #0f172a; }
.col-main p { margin: 4px 0 0 0; font-size: 0.9em; color: #64748b; }

/* Колонка 2: Сума (центрована) */
.col-info { text-align: center; }
.price-label { display: block; font-size: 0.8em; color: #94a3b8; text-transform: uppercase; }
.price-value { font-size: 1.2em; font-weight: 700; color: #1e293b; }

/* Колонка 3: Кнопки-плітки */
.col-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.action-tile {
    flex: 1;
    text-align: center;
    padding: 10px 5px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    color: #475569 !important;
    transition: all 0.2s;
    min-width: 80px;
}

.action-tile:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

.action-tile.bank {
    background: #eff6ff;
    color: #2563eb !important;
    border-color: #bfdbfe;
}
.action-tile.bank:hover { background: #dbeafe; }

.action-tile.report {
    background: #fdf2f8;
    color: #be185d !important;
    border-color: #fbcfe8;
}

.action-tile.disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(1);
}

/* Адаптивність */
@media (max-width: 900px) {
    .collect-item {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }
    .col-actions { justify-content: center; }
}

.collect-board {
    max-width: 1100px;
    margin: 40px auto;
    background: #ffffff !important;
    border-radius: 16px; /* ЗАОКРУГЛЕННЯ ОСНОВИ */
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
}

.board-header {
    background: #1e293b;
    color: white;
    padding: 20px;
    font-weight: bold;
    text-align: center;
    font-size: 1.2em;
    /* УРА! ДОДАЛИ ЗАОКРУГЛЕННЯ ТІЛЬКИ ЗВЕРХУ ДЛЯ ШАПКИ */
    border-radius: 16px 16px 0 0; 
}

/* Стилі для завершеного збору */
.completed .status-indicator { 
    background: #f0fdf4; 
    color: #15803d; 
    border: 1px solid #bbf7d0; 
}

/* Робимо завершену картку трохи світлішою, щоб вона не відволікала від активних */
.collect-item.completed {
    background: #fafafa;
    opacity: 0.9;
}

.completed .price-value {
    color: #15803d;
}

/* Галочка замість грошей на кнопці банки, якщо хочеш */
.action-tile.bank.disabled {
    background: #f1f5f9;
    color: #94a3b8 !important;
    border-color: #e2e8f0;
}
/* --- СТАТУС: ТРИВАЄ (Синій - активна дія) --- */
.active .status-indicator { 
    background: #eff6ff; 
    color: #1e40af; 
    border: 1px solid #bfdbfe; 
}

/* Спеціальний синій колір для цілі в активному зборі */
.active .price-value {
    color: #2563eb;
}

/* --- СТАТУС: ВИКОНАНО (Зелений - успіх) --- */
.completed .status-indicator { 
    background: #f0fdf4; 
    color: #15803d; 
    border: 1px solid #bbf7d0; 
}

.completed .price-value {
    color: #16a34a;
}

/* Додатково: робимо картку "Виконано" трохи прозорішою, 
   щоб вона візуально йшла на другий план */
.collect-item.completed {
    background: #fcfcfc;
    opacity: 0.85;
}

/* --- СТАТУС: НА ПАУЗІ (Сірий - очікування) --- */
.paused .status-indicator { 
    background: #f8fafc; 
    color: #475569; 
    border: 1px solid #e2e8f0; 
}

.friends-grid-section {
    padding: 40px 20px;

}

.friends-container {
    display: grid;
    /* Робимо 3 в ряд, на планшетах 2, на моб 1 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.friend-card {
    background: #fcfdfe;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.friend-card:hover {
    transform: translateY(-8px);
    border-color: #3b82f6;
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.1);
}

/* Контейнер для логотипу/фото */
.friend-logo, .card-logo, .mini-logo {
    width: 100px !important; /* Трохи збільшив, щоб було солідніше */
    height: 100px !important;
    margin: 0 auto 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    overflow: hidden !important;
    background: transparent !important;
    position: relative !important; /* Фіксуємо позицію */
}

/* Сама картинка всередині */
.friend-logo img, .card-logo img, .mini-logo img {
    width: 100% !important;
    height: 100% !important;
    
    /* ОЦЕ МАЄ ВРЯТУВАТИ ЯСІНСЬКОГО */
    border-radius: 50% !important; 
    
    /* Щоб фото заповнило коло без білих смуг */
    object-fit: cover !important; 
    
    /* Додатковий захист від розмиття та викривлення */
    display: block !important;
    margin: 0 !important;
}

.friend-link {
    display: block;
    font-size: 1.15em;
    font-weight: 800;
    color: #1e293b;
    text-decoration: none;
    margin-bottom: 10px;
}

.friend-link:hover { color: #2563eb; }

.friend-body p {
    font-size: 0.9em;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 20px;
    min-height: 54px; /* Щоб картки були однієї висоти */
}

/* Секція закритих кейсів */
.friend-footer {
    border-top: 1px solid #f1f5f9;
    padding-top: 15px;
    margin-top: auto;
}

.cases-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 10px;
}

.cases-icons {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.case-dot {
    width: 32px;
    height: 32px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s;
}

.case-dot:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    transform: scale(1.15);
}

.action-tile.disabled {
    pointer-events: none; /* Вимикає клік повністю */
    cursor: default;
    opacity: 0.5;
    filter: grayscale(1);
}

.case-dot {
    width: 36px;
    height: 36px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px; /* Квадратні з м'якими кутами виглядають серйозніше */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: 0.2s;
    cursor: pointer;
}

.case-dot:hover {
    background: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
}

/* Вимикаємо "пусті" посилання */
.action-tile.disabled, .mini-btn.disabled, .case-dot.disabled {
    pointer-events: none; /* Клік не працює */
    cursor: default;
    opacity: 0.4;
    filter: grayscale(1);
}

/* Робимо кнопку візуально мертвою */
.disabled {
    cursor: default !important;
    opacity: 0.5 !important;
    filter: grayscale(1);
    pointer-events: none;
}

/* Фікс для кнопок у закритих кейсах */
.cases-icons {
    display: flex;
    justify-content: center; /* Центруємо їх разом */
    gap: 10px;
    flex-wrap: wrap; /* Якщо їх буде багато, вони перейдуть на новий рядок акуратно */
}

.case-dot {
    /* Додаємо ці два рядки, щоб вони не розповзалися */
    display: inline-flex !important; 
    width: 42px !important; 
    height: 42px !important;
    
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Прибираємо можливий фон, який дає конструктор */
.case-dot img, .case-dot span {
    max-width: 24px;
}

.case-dot {
    /* Цей рядок — головний "заспокійливе" для кнопки */
    display: inline-flex !important; 
    
    width: 42px !important; 
    height: 42px !important;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    font-size: 20px;
    margin: 5px; /* Щоб вони не злипалися */
}

/* Окремо для стану "disabled" */
.case-dot.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
    filter: grayscale(1);
}

.talents-board {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
    /* Фон, що нагадує дошку або стіну */

    padding: 40px;
    border-radius: 20px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.02);
}

.board-header-sticky {
    text-align: center;
    margin-bottom: 50px;
}

.board-header-sticky h2 {
    font-size: 2.2em;
    color: #1e293b;
    font-weight: 800;
}

.stickers-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    justify-items: center;
}

/* ЗАГАЛЬНИЙ СТИЛЬ СТІКЕРА */
.sticker-note {
    background: #fff; /* Можна зробити ледь жовтуватим #fffef0 */
    width: 100%;
    max-width: 350px;
    padding: 30px 20px;
    position: relative;
    
    /* Ефект нерівних країв та тіні "над столом" */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.08);
    border: 1px solid #f1f5f9;
    
    /* Трансформація для легкого повороту */
    transition: all 0.3s ease;
}

/* Трохи повертаємо стікери в різні боки для хаосу */
.note-1 { transform: rotate(-2deg); }
.note-2 { transform: rotate(3deg); }

.sticker-note:hover {
    transform: scale(1.05) rotate(0deg); /* При наведенні вирівнюється і збільшується */
    box-shadow: 10px 10px 25px rgba(0,0,0,0.15);
    z-index: 10;
}

/* Контент всередині */
.sticker-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.talent-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 15px;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.talent-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.talent-name {
    font-size: 1.3em;
    font-weight: 800;
    color: #1e293b;
    text-decoration: none;
    margin-bottom: 5px;
}

.talent-name:hover { color: #2563eb; }

.talent-role {
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.talent-desc {
    font-size: 0.95em;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 80px; /* Для однакової висоти стікерів */
}

.talent-phone {
    display: inline-block;
    background: #1e293b;
    color: white !important;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: background 0.2s;
}

.talent-phone:hover { background: #334155; }

/* ДЕКОРАТИВНІ ЕФЕКТИ */

/* Ефект скотчу для Анастасії */
.note-1 .tape-effect {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    width: 100px;
    height: 30px;
    background: rgba(255, 255, 255, 0.3); /* Напівпрозорий білий скотч */
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* Ефект шпильки для Тараса */
.note-2 .pin-effect {
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 24px;
    transform: rotate(15deg);
    opacity: 0.8;
}

/* Стиль для порожніх стікерів-оголошень */
.note-promo {
    background: rgba(255, 255, 255, 0.6) !important; /* Напівпрозорі */
    border: 2px dashed #cbd5e1 !important; /* Пунктирна рамка */
    filter: grayscale(0.5);
    opacity: 0.8;
}

.note-promo:hover {
    filter: grayscale(0);
    opacity: 1;
    border-style: solid !important;
    border-color: #3b82f6 !important;
}

/* Заглушка замість фото */
.placeholder-photo {
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    color: #94a3b8;
}

/* Кнопка для реклами - виділимо її кольором */
.promo-btn {
    background: #2563eb !important; /* Яскраво-синя */
}

.promo-btn:hover {
    background: #1d4ed8 !important;
}

/* Повороти для нових стікерів */
.note-3 { transform: rotate(1deg); }
.note-4 { transform: rotate(-3deg); }

/* --- ПЕРЕМОЖНИЙ БЛОК ДЛЯ ПАРТНЕРКИ --- */

/* Контейнер: додаємо padding зверху замість margin, щоб він не "вистрибував" */
.friend-logo {
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto 15px !important;
    padding-top: 25px !important; /* Робимо відступ всередині картки */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: transparent !important;
    position: relative !important;
}

/* Картинка: ідеальне коло */
.friend-logo img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important; /* Для людей */
    display: block !important;
}

/* Окреме правило для логотипів, щоб не були на все коло */
/* Це застосується до 2-ї та 3-ї картки (Святошино та Вуду) */
.friend-card:nth-child(2) .friend-logo img, 
.friend-card:nth-child(3) .friend-logo img {
    object-fit: contain !important; /* Не розтягуємо герби */
    padding: 8px !important; /* Даємо їм трохи простору всередині кола */
}

.back-to-top {
    position: fixed;
    bottom: 15px; /* Нижче */
    right: 15px;  /* Правіше */
    width: 40px;  /* Трохи менша */
    height: 40px;
    /* Колір: світло-сірий, напівпрозорий (0.6) */
    background-color: rgba(200, 200, 200, 0.6); 
    color: #555555; /* Колір стрілочки */
    border-radius: 50%;
    display: none; /* Керується скриптом */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Ледь помітна рамка */
    cursor: pointer;
    font-size: 20px;
    /* М'яка поява */
transition: opacity 0.3s ease, visibility 0.3s ease; /* Додай цей рядок */
    opacity: 0; /* Початковий стан */
}

/* При натисканні стає трохи темнішою */
.back-to-top:active {
    background-color: rgba(150, 150, 150, 0.8);
}

/* Ховаємо на ПК залізобетонно */
@media (min-width: 1025px) {
    .back-to-top {
        display: none !important;
    }
}

.social-section {
    padding: 30px 15px;
    text-align: center;
}

.section-title {
    margin-bottom: 25px;
    font-size: 1.5rem;
    color: #333;
}

.social-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.social-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    max-width: 320px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.social-card:hover {
    transform: translateY(-5px);
}

.social-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-weight: 600;
}

.social-icon {
    width: 32px;
    height: 32px;
}

/* Сітка фото для інсти */
.insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.insta-pic {
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    background-color: #f0f0f0;
}

.tg-body {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    text-align: left;
    line-height: 1.4;
}

.social-action {
    display: block;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    transition: background 0.3s;
}

.social-card:hover .social-action {
    background: #eef2ff;
}
/* Стиль для YouTube "в розробці" */
.development-badge {
    display: inline-block;
    background: #fff3cd;
    color: #856404;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 10px;
    border: 1px solid #ffeeba;
}

.yt-body {
    text-align: left;
    margin-bottom: 15px;
}

.yt-body p {
    font-size: 14px;
    color: #888; /* Трохи світліший текст, бо ще не готово */
    margin: 0;
    line-height: 1.4;
}

.social-action.disabled {
    background: #f0f0f0 !important;
    color: #aaa !important;
    cursor: not-allowed;
}

/* Колір іконок при наведенні для кожної мережі (опціонально) */
.social-card.insta:hover { border-color: #e1306c; }
.social-card.telegram:hover { border-color: #0088cc; }
.social-card.youtube:hover { border-color: #ff0000; }

.social-container {
    display: flex;
    flex-wrap: wrap; /* Дозволяє переносити на мобільних */
    gap: 20px;
    justify-content: center;
    align-items: stretch; /* Розтягує всі картки на однакову висоту в рядку */
}

.social-card {
    background: #fff;
    border-radius: 20px;
    padding: 25px; /* Трохи більше простору */
    width: 100%;
    max-width: 320px;
    flex: 1; /* Змушує картки ділити простір порівну */
    min-width: 280px; /* Щоб на мобілках не ставали надто вузькими */
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border: 1px solid #eee;
    
    /* Вертикальне вирівнювання вмісту */
    display: flex;
    flex-direction: column;
}

.social-card:hover {
    transform: translateY(-5px);
}

/* Це розштовхує вміст, щоб кнопка завжди була внизу */
.insta-grid, .tg-body, .yt-body {
    flex-grow: 1; 
    margin-bottom: 20px;
}

.social-action {
    margin-top: auto; /* Виштовхує кнопку в самий низ картки */
    display: block;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    text-align: center;
}

.social-card {
    background: #ffffff;
    border-radius: 18px; /* Трохи менший радіус для компактності */
    padding: 15px; /* Менше відступів всередині */
    border: 1px solid #eeeeee;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 290px; /* Трохи звузимо самі картки */
    min-height: 320px; /* Значно зменшили висоту (було 450) */
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.social-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px; /* Менше місця під заголовком */
    font-size: 14px; /* Компактніший шрифт */
}

.social-icon {
    width: 24px; /* Менші іконки */
    height: 24px;
}

/* Сітка фото Instagram */
.insta-grid {
    display: flex; /* Змінюємо сітку на гнучкий ряд */
    gap: 8px;
    margin: 10px 0 15px 0;
    width: 100%;
    overflow-x: auto; /* Дозволяємо горизонтальну прокрутку */
    scroll-snap-type: x mandatory; /* Магнітний ефект при гортанні */
    -webkit-overflow-scrolling: touch; /* Плавність на айфонах */
    padding-bottom: 5px; /* Місце для скролбару, якщо він з'явиться */
}

/* Приховуємо некрасивий скролбар, щоб було чисто */
.insta-grid::-webkit-scrollbar {
    display: none;
}
.insta-grid {
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

.insta-pic {
    flex: 0 0 120px; /* Фіксована ширина кожної картинки */
    height: 120px;   /* Робимо їх акуратними квадратами */
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    background-color: #f0f0f0;
    scroll-snap-align: start; /* Щоб картинка "примагнічувалася" до краю */
}

/* Текстові блоки */
.tg-body, .yt-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Текст тепер зверху, а не посередині */
    margin-bottom: 10px;
}

.tg-body p, .yt-body p {
    font-size: 13px; /* Трохи дрібніший текст */
    line-height: 1.3;
    color: #666;
}

/* Кнопка */
.social-action {
    margin-top: auto;
    display: block;
    padding: 10px; /* Компактніша кнопка */
    background: #f8f9fa;
    color: #2563eb;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}

/* Бейдж "В розробці" */
.development-badge {
    padding: 2px 8px;
    font-size: 10px;
    margin-bottom: 8px;
}

.insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: 5px 0 15px 0;
    /* Оце лікує твою проблему: */
    width: 100%; 
    overflow: hidden; 
}

.insta-pic {
    width: 100%; /* Фото займає лише свою частину сітки */
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    background-color: #f0f0f0;
}

.insta-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* ЗАБОРОНЯЄМО другий ряд */
    gap: 10px !important;
    margin: 10px 0 15px 0 !important;
    width: 100% !important;
    height: 140px !important; /* Фіксуємо висоту ряду */
    overflow-x: auto !important; /* Дозволяємо свайп */
    -webkit-overflow-scrolling: touch;
}

/* Прибираємо смугу прокрутки, щоб не псувала вигляд */
.insta-grid::-webkit-scrollbar {
    display: none !important;
}

.insta-pic {
    flex: 0 0 calc(50% - 5px) !important; /* Рівно половина ширини картки мінус зазор */
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 10px !important;
    background-color: #f0f0f0;
}

.info-bar {
    display: flex;
    justify-content: space-around; /* Розподіляємо елементи рівномірно */
    align-items: center;
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 12px;
    margin: 10px auto 30px;
    max-width: 900px; /* Трохи розширимо */
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); /* Дуже м'яка тінь */
    border: 1px solid #f0f0f0;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1; /* Кожен блок займає однакову частину місця */
    justify-content: center;
}

/* Додамо розділові лінії між блоками, крім останнього */
.info-item:not(:last-child) {
    border-right: 1px solid #eee;
}

.info-icon {
    font-size: 22px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.info-data {
    text-align: left; /* Текст вирівняний по лівому краю всередині блоку */
}

.info-value {
    display: block;
    font-weight: 700;
    font-size: 17px;
    color: #222;
    line-height: 1.2;
}

.info-label {
    display: block;
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* Адаптивність для мобілок */
@media (max-width: 768px) {
    .info-bar {
        flex-wrap: wrap; /* Дозволяємо перенос */
        gap: 10px;
        padding: 15px;
    }
    .info-item {
        flex: 1 1 45%; /* По два елементи в ряд на мобілці */
        border-right: none !important;
        justify-content: flex-start;
    }
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-icon {
    font-size: 24px;
}

.info-data {
    display: flex;
    flex-direction: column;
}

.info-value {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

.info-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 600px) {
    .info-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding-left: 25px;
    }
}

.header-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; /* Забороняємо перенос на новий рядок */
    gap: 5px;          /* Зменшуємо відстань між іконками */
    font-size: 11px;   /* На мобілках ставимо трохи менший шрифт */
    width: 100%;
    overflow-x: auto;  /* Якщо вже зовсім не влізе, можна буде трохи прокрутити */
}

/* Для десктопів повертаємо як було */
@media (min-width: 768px) {
    .header-info {
        gap: 15px;
        font-size: 14px;
    }
}

.h-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-left: 1px solid rgba(0,0,0,0.1); /* Легка риска для розділення */
}

.h-item:first-child {
    border-left: none; /* Прибираємо риску у першого елемента */
}

.h-label {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.6;
    text-transform: uppercase;
}

#temp {
    font-weight: 700;
}

/* На мобілках краще сховати або ще більше спростити */
@media (max-width: 480px) {
    .header-info {
        gap: 8px;
        font-size: 11px;
    }
    .h-label {
        display: none; /* Лишаємо тільки цифри на маленьких екранах */
    }
}

.header-info {
    display: flex;
    justify-content: flex-end; /* Притискаємо до правого краю */
    gap: 20px;
    margin-top: 10px; /* Ось він, твій відступ від меню! */
    padding: 5px 0;
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Тонка лінія для розділення, якщо фон темний */
}

.h-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.9); /* Робимо колір м'яким білим */
}

.h-label {
    font-size: 10px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
}

/* Контейнер для меню та віджета */
.nav-container {
    display: flex;
    flex-direction: column; /* Ставимо елементи один під одним */
    align-items: flex-end;  /* Притискаємо все до правого краю */
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Центруємо логотип відносно всього блоку навігації */
}

.header-info {
    display: flex;
    gap: 15px;
    margin-top: 8px; /* Відступ від меню */
    font-size: 12px;
    opacity: 0.8; /* Трохи приглушимо, щоб не відволікало від меню */
}

.h-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ffffff; /* Твій колір тексту в хедері */
}

.h-label {
    font-size: 9px;
    font-weight: bold;
    opacity: 0.6;
}

/* На мобільних, коли з'являється гамбургер, віджет можна сховати або підправити */
@media (max-width: 768px) {
    .nav-container {
        align-items: center;
    }
    .header-info {
        margin-top: 15px;
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px; /* Відступ між текстом і гербом */
    font-size: 28px; /* Збільшуємо назву (було десь 20-22) */
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.district-logo {
    height: 35px; /* Оптимальний розмір, щоб не ламати висоту хедера */
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); /* Додамо легкої глибини */
}

/* На мобільних робимо трохи меншим, щоб усе влізло */
@media (max-width: 768px) {
    .logo {
        font-size: 22px;
    }
    .district-logo {
        height: 28px;
    }
}

/* Знаходимо першу секцію або контейнер після хедера */
.container:first-of-type, 
main:first-of-type,
section:first-of-type {
    margin-top: 0 !important;
    padding-top: 20px !important; /* Регулюй це число, щоб виставити ідеальну відстань */
}

/* Прибираємо "вроджений" відступ у першого заголовка на сторінці */
h1:first-child, 
h2:first-child,
.article-title:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* 1. Прибираємо той тонкий сірий овал навколо фотки */
.partner-card a, 
.partner-card span, 
.partner-card picture,
.card a, 
.card span {
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    display: block !important;
    text-decoration: none !important;
}

/* 2. Робимо саму картку (білий блок) прямокутною */
.partner-card, .card {
    border-radius: 20px !important; /* Чітко задаємо кути картки */
    background: #fff !important;
    padding: 25px !important;
    border: 1px solid #e0e0e0 !important; /* Якщо хочеш тонку рамку всієї картки */
}

/* 3. Переконуємось, що Ясинський — це просто коло без фонів */
.partner-card img, .card img {
    width: 140px !important;
    height: 140px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: none !important; /* Прибираємо рамку з самої фотки */
    box-shadow: none !important;
    background: transparent !important;
}

/* 1. Прибираємо овал навколо фотки */
.friend-logo {
    border: none !important;      /* Вимикаємо сіру лінію */
    border-radius: 0 !important;  /* Прибираємо овальність контейнера */
    background: none !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
}

/* 2. Робимо саму фотку ідеально круглою */
.friend-logo img {
    width: 130px !important;      /* Фіксована ширина */
    height: 130px !important;     /* Така ж висота — це важливо! */
    border-radius: 50% !important;/* Тільки тут лишаємо коло */
    object-fit: cover !important; /* Щоб обличчя не сплющило */
    border: 2px solid #eee !important; /* Якщо хочеш тонку рамку, краще дай її самій фотці */
    display: block !important;
}

/* 3. Підправляємо картку, щоб вона була прямокутною */
.friend-card {
    border-radius: 20px !important; /* М'які кути білої плашки */
    padding: 25px !important;
    border: 1px solid #f0f0f0 !important;
    background: #fff !important;
}

/* ПРИБИРАЄМО КВАДРАТНІСТЬ ТА ЦЕНТРУЄМО */
.friend-logo {
    display: flex !important;
    justify-content: center !important; /* Центруємо фотку в картці */
    align-items: center !important;
    margin: 0 auto 15px !important;    /* Додаємо відступ знизу та центруємо блок */
    width: 130px !important;            /* Жорстко задаємо ширину контейнера */
    height: 130px !important;           /* Жорстко задаємо висоту контейнера */
    background: #ffffff !important;
    border-radius: 50% !important;      /* Створюємо коло */
    overflow: hidden !important;        /* Обрізаємо все зайве по контуру кола */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; /* Легка тінь, щоб виглядало як на макеті */
    padding: 0 !important;
    border: 3px solid #fff !important;  /* Біла рамка */
}

/* ФОТКА ВСЕРЕДИНІ КОЛА */
.friend-logo img {
    width: 100% !important;             /* Розтягуємо на всю ширину контейнера */
    height: 100% !important;            /* Розтягуємо на всю висоту */
    object-fit: cover !important;       /* Щоб обличчя не розтягувалось, а акуратно вписувалось */
    border-radius: 50% !important;      /* Робимо коло */
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* МЕДІА-ЗАПИТ: Працює тільки на екранах, вужчих за 480px (телефони) */
@media screen and (max-width: 480px) {
    /* Знаходимо контейнер, де лежать ці три кнопки */
    .fundraising-card .buttons-container, 
    .fundraising-card .friend-footer, /* Можливі варіанти назв класів */
    .fundraising-card div[style*="display: flex"] { /* "Ядерний" варіант, якщо класів немає */
        flex-wrap: wrap !important; /* Дозволяємо перенос на новий рядок */
        justify-content: center !important; /* Центруємо їх */
        gap: 10px !important; /* Робимо відступи між кнопками, щоб не злипалися */
    }

    /* Налаштування для кожної кнопки окремо */
    .fundraising-card .buttons-container a,
    .fundraising-card a[class*="button"],
    .fundraising-card .friend-link {
        flex: 1 1 calc(50% - 10px) !important; /* Кнопки займають по половині ширини (2 в ряд) */
        /* АБО, якщо хочеш 3 в ряд, але вужчі: flex: 1 1 calc(33.33% - 10px) !important; */
        text-align: center !important;
        justify-content: center !important;
        font-size: 14px !important; /* Трохи зменшимо шрифт, щоб вліз текст */
        padding: 8px 5px !important; /* Зменшимо внутрішні відступи */
    }

    /* Щоб "Банка" та "Звіт" не злипалися, якщо їх 3 в ряд */
    .fundraising-card a:last-child {
        margin-right: 0 !important;
    }
}

/* Тільки для маленьких екранів */
@media screen and (max-width: 480px) {
    /* Знаходимо блок з кнопками всередині збору */
    .fundraising-card div[style*="flex"], 
    .fundraising-card .buttons-container,
    .fundraising-card footer {
        display: block !important; /* Вимикаємо flex, ставимо їх стовпчиком */
        width: 100% !important;
    }

    /* Робимо кожну кнопку на всю ширину */
    .fundraising-card a {
        display: flex !important;
        width: 100% !important;
        margin: 8px 0 !important; /* Відступи між ними */
        box-sizing: border-box !important;
        justify-content: center !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    /* Фікс для самої білої картки, щоб не було дірок */
    .fundraising-card {
        padding: 15px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        width: calc(100% - 20px) !important;
    }
}

/* Мобільна адаптація для табло зборів */
@media screen and (max-width: 480px) {
    /* 1. Дозволяємо кнопкам переноситися */
    .col-actions {
        display: flex !important;
        flex-direction: column !important; /* Ставимо їх одна під одною */
        gap: 8px !important;               /* Відступ між ними */
        width: 100% !important;
        padding: 0 10px !important;
    }

    /* 2. Кожна кнопка займає всю ширину */
    .action-tile {
        width: 100% !important;
        justify-content: center !important; /* Текст по центру */
        margin: 0 !important;               /* Скидаємо старі відступи */
        box-sizing: border-box !important;
    }

    /* 3. Підправляємо саму картку збору, щоб вона не тиснула контент */
    .collect-item {
        padding: 15px 5px !important;
        margin-bottom: 15px !important;
    }

    /* 4. Заголовок і текст теж трохи підіжмемо, щоб було компактно */
    .col-main h3 {
        font-size: 18px !important;
    }
    
    @media screen and (max-width: 480px) {
    /* Контейнер для кнопок */
    .col-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;    /* Центруємо кнопки всередині колонки */
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;             /* Прибираємо внутрішні відступи, що зміщують */
        margin: 10px 0 0 0 !important;      /* Скидаємо всі зовнішні зміщення */
    }

    /* Самі кнопки */
    .action-tile {
        width: 90% !important;             /* Робимо трохи вужчими за блок для краси */
        max-width: 280px !important;       /* Щоб не були надто розтягнутими */
        margin-left: 0 !important;         /* ПРИБИРАЄМО ЗМІЩЕННЯ ПРАВОРУЧ */
        margin-right: 0 !important;
        margin-bottom: 8px !important;     /* Відступ між кнопками */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Додатково скидаємо відступи у всього блоку інформації, якщо він заважає */
    .col-info {
        text-align: center !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
}
}

.alarm-informer {
    transition: transform 0.3s ease;
}

.alarm-informer:hover {
    transform: scale(1.01); /* Трохи збільшується при наведенні */
}

/* Якщо захочеш зробити свою стрічку (Варіант 1) */
.alarm-banner {
    background: #f8f9fa;
    padding: 10px 20px;
    border-radius: 10px;
    border-left: 5px solid #ffc107; /* Жовта смужка - увага */
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.alarm-status-panel {
    max-width: 1100px;
    margin: 20px auto;
    background: #ffffff !important; /* Тільки білий фон! */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.alarm-indicator {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #333 !important; /* Чорний текст */
}

.alarm-dot {
    width: 12px;
    height: 12px;
    background-color: #28a745; /* Зелений за замовчуванням */
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
}

.alarm-title {
    margin-right: 10px;
    color: #666;
}

.alarm-details-btn {
    text-decoration: none;
    color: #007bff;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 12px;
    border: 1px solid #007bff;
    border-radius: 20px;
    transition: all 0.2s;
}

.alarm-details-btn:hover {
    background: #007bff;
    color: #fff;
}

/* Мобільна адаптація */
@media (max-width: 480px) {
    .alarm-status-panel {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

/* Стиль для хедера */
.header-alarm {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1); /* Напівпрозорий фон під колір хедера */
    padding: 4px 10px;
    border-radius: 15px;
    margin-left: 15px;
    cursor: pointer;
    transition: background 0.3s;
}

.header-alarm:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Статична крапка за замовчуванням */
.alarm-dot-mini {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #28a745; /* Зелений */
  border-radius: 50%;
  margin-right: 5px;
}

/* Клас для стану тривоги — додаємо червоний колір та миготіння */
.is-alarm .alarm-dot-mini {
  background-color: #ff4d4d; /* Червоний */
  animation: alarm-blink 1s infinite;
}

@keyframes alarm-blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}



@keyframes pulse-red {
    0% { transform: scale(1); box-shadow: 0 0 0px #ff4d4d; }
    50% { transform: scale(1.2); box-shadow: 0 0 10px #ff4d4d; }
    100% { transform: scale(1); box-shadow: 0 0 0px #ff4d4d; }
}

/* Контейнер для всіх інформерів у хедері */
.header-right-zone {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 15px !important; /* Відстань між тривогою, погодою та валютами */
    flex-wrap: nowrap !important; /* Забороняємо їм розривати рядок */
}

/* Налаштовуємо кожен інформер окремо */
.header-alarm, .weather-item, .currency-item {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important; /* Щоб текст не переносився */
    margin: 0 !important;
}

/* Якщо на мобілці воно все одно лізе - сховаємо зайве або зменшимо */
@media (max-width: 768px) {
    .header-right-zone {
        gap: 8px !important;
    }
    .header-alarm .alarm-text-mini {
        font-size: 11px !important; /* Робимо текст компактнішим */
    }
}

/* Фіксуємо висоту для всіх тригерів акордеонів */
.acc-trigger {
    height: 64px !important; /* Підбери це число (60-70px), щоб збігалося з іншими */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 20px !important;
    box-sizing: border-box !important;
}

/* Вирівнюємо іконки, щоб вони не розтягували кнопку */
.acc-trigger img {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
    margin-right: 15px !important;
    object-fit: contain !important;
}

/* Щоб стрілочка не втікала */
.arrow {
    margin-left: auto !important;
}

/* Універсальний фікс для мобілки */
@media screen and (max-width: 768px) {
    /* 1. Забороняємо всьому сайту хитатися вліво-вправо */
    body, html {
        overflow-x: hidden !important;
        position: relative;
    }

    /* 2. Налаштовуємо контейнер карток */
    .talents-container, .masters-grid-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 3. Картки-листочки (як у Анастасії) */
    .talent-card, .leaf-card {
        width: 95% !important; /* Робимо трохи вужчими за екран */
        max-width: 350px;
        margin: 15px auto !important;
        transform: rotate(0deg) !important; /* Прибираємо нахил на мобілці, щоб кути не вилазили */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; /* Полегшуємо тіні */
    }

    /* 4. Фікс для фото та кнопок всередині */
    .talent-card img {
        max-width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 768px) {
    /* 1. Контейнер: робимо його безпечним */
    .stickers-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px 0 !important;
        overflow: hidden !important;
    }

    /* 2. Самі стікери: скидаємо нахили та фіксовану ширину */
    .sticker-note {
        position: relative !important; /* Щоб не літали по екрану */
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: rotate(0deg) !important; /* Вирівнюємо, щоб не було еліпсів і вильотів */
        width: 90% !important; /* Займають майже всю ширину, але з зазором */
        max-width: 320px !important;
        margin: 15px auto !important; /* Центруємо */
        box-sizing: border-box !important;
    }

    /* 3. Фото: ЗАБОРОНЯЄМО сплющування */
    .talent-photo {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important; /* Не дає стискати в еліпс */
        margin: 0 auto 10px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }

    .talent-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Зберігає пропорції обличчя */
    }

    /* 4. Ефекти: щоб скотч або шпилька не заважали */
    .tape-effect, .pin-effect {
        max-width: 100% !important;
    }
}

/* Стилі для посилання-логотипа */
.logo-link {
    text-decoration: none !important; /* Прибираємо підкреслення тексту */
    color: inherit !important;        /* Зберігаємо білий колір тексту */
    display: flex;
    align-items: center;
    gap: 10px;                        /* Відстань між текстом і гербом */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Плавність ефектів */
}

/* Ефект при наведенні курсору (Ховер) */
.logo-link:hover {
    opacity: 0.8;                     /* Легка прозорість */
    transform: translateY(-1px);      /* Мікро-рух вгору для відчуття натискання */
}

/* Додатково для герба, щоб він теж реагував */
.logo-link:hover .district-logo {
    filter: brightness(1.1);          /* Герб стане трішки яскравішим */
}

/* По дефолту ховаємо символи */
.currency-symbol {
    display: none;
}

@media screen and (max-width: 600px) {
    /* Ховаємо великі літери USD/EUR */
    .currency-text {
        display: none;
    }
    
    /* Показуємо маленькі символи $ / € */
    .currency-symbol {
        display: inline;
        font-weight: bold;
        margin-right: 2px;
        color: #ffcc00; /* Можна додати колір, щоб виділялися */
    }

    /* Трохи стиснемо відступи в хедері для мобілки, щоб все влізло */
    .header-info {
        gap: 8px !important;
        font-size: 13px !important;
    }
    
    .h-item {
        margin-right: 5px !important;
    }
}

@media screen and (max-width: 600px) {
    /* 1. Ховаємо текстові мітки USD та EUR, якщо вони заважають */
    .h-label {
        display: none !important;
    }

    /* 2. Додаємо символ $ перед курсом долара */
    #usd-rate::before {
        content: "$ ";
        font-weight: bold;
        color: #ffcc00; /* Золотистий колір для помітності */
    }

    /* 3. Додаємо символ € перед курсом євро */
    #eur-rate::before {
        content: "€ ";
        font-weight: bold;
        color: #ffcc00;
    }

    /* 4. Трохи компактності для всього хедера */
    .header-info {
        display: flex !important;
        gap: 10px !important;
        justify-content: center;
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    /* Робимо кожен елемент валюти гнучким рядком */
    .h-item {
        display: flex !important;
        flex-direction: row !important; /* Тільки в рядок! */
        align-items: center !important; /* Вирівнюємо по центру вертикально */
        gap: 4px !important; /* Невеликий відступ між значком і цифрою */
        white-space: nowrap !important; /* Забороняємо переносно значка на новий рядок */
    }

    /* Якщо ми використовували псевдоелементи ::before */
    #usd-rate, #eur-rate {
        display: flex !important;
        align-items: center !important;
    }

    /* Налаштуємо сам значок, щоб він не "стрибав" */
    #usd-rate::before, #eur-rate::before {
        margin-right: 2px !important;
        line-height: 1 !important; /* Прибираємо зайві відступи зверху/знизу */
        font-size: 0.9em !important; /* Можна трошки зменшити значок, якщо затісно */
    }
}

/* РЕЗЕРВНІ КАНАЛИ ЗВ'ЯЗКУ */
.emergency-channels-container {
    max-width: 900px;
    margin: 30px auto;
    padding: 25px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    text-align: center;
    font-family: inherit;
}

.emergency-title {
    font-size: 22px;
    color: #222;
    margin: 0 0 8px 0;
}

.emergency-subtitle {
    font-size: 14px;
    color: #888;
    margin: 0 0 25px 0;
}

.emergency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
}

.emergency-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 10px;
    border-radius: 16px;
    text-decoration: none;
    color: #444;
    font-weight: 600;
    font-size: 14px;
    background: #f8f9fa;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.emergency-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 12px;
}

.emergency-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Ефекти наведення */
.emergency-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    background: #fff;
    border-color: #eee;
}

.emergency-item.wa:hover { color: #25D366; }
.emergency-item.vb:hover { color: #7360f2; }
.emergency-item.bip:hover { color: #fbc02d; }
.emergency-item.sg:hover { color: #3a76f0; }

/* Адаптивність для мобілок */
@media (max-width: 480px) {
    .emergency-grid {
        grid-template-columns: 1fr 1fr;
    }
    .emergency-title { font-size: 18px; }
}

/* Додай цей стиль до своєї таблиці, щоб кнопка ожила */
.active-btn {
    background: #e65757 !important;
    color: white !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}
.active-btn:hover {
    background: #cc0000 !important;
}

/* Кнопка Instagram - градієнтна */
.insta-btn {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    color: white !important;
    border: none !important;
}
.insta-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* Кнопка Telegram - фірмовий блакитний */
.tg-btn {
    background-color: #0088cc !important;
    color: white !important;
    border: none !important;
}
.tg-btn:hover {
    background-color: #0077b5 !important;
    transform: scale(1.02);
}

/* YouTube (приглушений червоний, як ти зробила) */
.active-btn {
    background-color: #e35d5d !important; /* Твій приглушений колір */
    color: white !important;
    border: none !important;
}
.active-btn:hover {
    background-color: #cc0000 !important;
}

/* Загальна поведінка для всіх активних кнопок */
.social-action {
    transition: all 0.3s ease !important;
    text-align: center !important;
    display: block !important;
}

<style>
.silence-modal {
    display: none; 
    position: fixed; 
    z-index: 10000; 
    left: 0; top: 0;
    width: 100%; height: 100%; 
    background-color: rgba(0, 0, 0, 0.7); /* Напівпрозорий фон */
    backdrop-filter: blur(4px); /* Легке розмиття фону сайту */
    align-items: center; 
    justify-content: center;
}

.silence-content {
    background: #1a1a1a; /* Темно-сірий, не радикально чорний */
    padding: 40px 30px;
    border-radius: 20px;
    max-width: 450px;
    width: 90%;
    position: relative;
    text-align: center;
    border: 1px solid #444;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.close-silence {
    position: absolute;
    top: 15px; right: 15px;
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s;
}
.close-silence:hover { color: #fff; }

.candle { font-size: 60px; margin-bottom: 15px; }

/* Золотистий колір для заголовка - гарно читається на темному */
.silence-title { 
    color: #ffd700; 
    font-size: 22px; 
    margin-bottom: 15px; 
    line-height: 1.3;
}

.silence-desc { 
    color: #e0e0e0; 
    font-size: 15px; 
    line-height: 1.5;
    margin-bottom: 20px;
}

.timer-container {
    font-weight: bold;
    color: #ffd700;
    font-size: 18px;
    border-top: 1px solid #333;
    padding-top: 15px;
}

#silence-overlay {
    /* display: none; — це лишаємо для роботи JS */
    position: fixed !important; /* Фіксуємо відносно екрана, а не сторінки */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important; /* На всю ширину вікна браузера */
    height: 100vh !important; /* На всю висоту вікна браузера */
    background-color: rgba(0, 0, 0, 0.7) !important; /* Напівпрозорий фон навколо */
    backdrop-filter: blur(5px) !important;
    z-index: 2147483647 !important; /* Максимально можливий рівень у браузерах */
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
}

.silence-content {
    background: #1a1a1a !important;
    padding: 40px !important;
    border-radius: 24px !important;
    border: 1px solid #ffd700 !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.6) !important;
    /* Центрування всередині фіксованого оверлею */
    position: relative !important; 
    max-width: 450px !important;
    width: 90% !important;
}


@keyframes pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(255, 77, 77, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}


.shelter-btn {
    text-decoration: none;
    color: white;
    border-radius: 8px;
    font-weight: bold;
    transition: transform 0.2s, opacity 0.2s;
}

.shelter-btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/*-----24-04-2026-----+*/

/* ==========================================================================
   ПРИМИРЕННЯ ЛОГОТИПА ТА МЕНЮ (CENTER FIX)
   ========================================================================== */

.header-inner {
    display: flex !important;
    /* Замість розльоту по краях — групуємо ближче до центру */
    justify-content: center !important; 
    align-items: center !important;
    gap: 60px !important; /* Ось це "дистанція" між лого і меню. Можеш міняти (40-80px) */
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Прибираємо білу смугу (overflow) */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Для планшетів, щоб не тікало нічого */
@media (max-width: 1024px) {
    .header-inner {
        gap: 30px !important; /* На менших екранах стаємо ще ближче */
    }
    
    .nav a {
        padding: 5px 8px !important;
        font-size: 14px !important;
        white-space: nowrap; /* Не даємо словам розриватись */
    }
}

/* Рятуємо логотип, щоб він не стискався */
.logo {
    flex-shrink: 0 !important;
}

/* Налаштовуємо контейнер навігації */
.nav-container {
    flex-grow: 0 !important; /* Не даємо йому займати весь вільний простір */
}

/* ==========================================================================
   СПЕЦІАЛЬНИЙ ФІКС ТІЛЬКИ ДЛЯ ПЛАНШЕТА (ПОРТРЕТ)
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    /* 1. Стискаємо відстані між пунктами меню по максимуму */
    .nav a {
        padding: 5px 6px !important; 
        font-size: 12px !important; /* Трохи менший шрифт, щоб усе влізло в ряд */
        letter-spacing: -0.2px; /* Ледь помітно зближуємо букви */
    }

    /* 2. Зменшуємо дірку між логотипом і валютами/меню */
    .header-inner {
        gap: 10px !important;
        padding: 0 10px !important;
        justify-content: space-around !important;
    }

    /* 3. Прибираємо зайві відступи в інфо-блоці (курс валют) */
    .header-info {
        gap: 8px !important;
        font-size: 12px !important;
    }

    /* 4. Рятуємо логотип, щоб він не займав пів екрана */
    .logo-link {
        font-size: 18px !important; /* Зменшуємо назву "Наш двір", якщо вона заважає */
    }
    
    .district-logo {
        height: 30px !important; /* Робимо герб трохи меншим */
        width: auto;
    }
}

/* ЗАПОБІЖНИК: щоб ніщо ніде не вилазило за край на будь-якому екрані */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
}

/* ==========================================================================
   TABLET PORTRAIT: PREVENT CLIPPING (ФІКС ОБРІЗАНОГО МЕНЮ)
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    .header-inner {
        flex-direction: column !important; /* Ставимо логотип над меню, щоб звільнити місце */
        gap: 10px !important;
        padding: 10px !important;
    }

    .nav {
        display: flex !important;
        flex-wrap: wrap !important; /* ДОЗВОЛЯЄМО ПЕРЕНОС: якщо "Контакти" не влазять, вони підуть нижче, а не за екран */
        justify-content: center !important;
        gap: 5px !important;
    }

    .nav a {
        padding: 4px 8px !important;
        font-size: 13px !important;
        background: rgba(0, 0, 0, 0.03); /* Легкий фон, щоб пункти виглядали як окремі кнопки */
        border-radius: 4px;
        margin: 2px;
    }

    /* Рятуємо інфо-блок (USD), щоб він не розпирав хедер */
    .header-info {
        width: 100%;
        justify-content: center !important;
        margin-bottom: 5px;
    }
}

/* ЗАЛІЗНИЙ ЗАБОРОН НА СКРОЛ ПРАВОРУЧ */
html, body {
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   DROPDOWN: THE ABSOLUTE FINAL POLISH (DARKER HOVER + MOBILE BG)
   ========================================================================== */

.nav-item-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: -12px;
}

.dropdown-toggle {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 5px;
    font-size: 14px;
    line-height: 1;
}

/* Список підменю (Десктоп) */
.dropdown-menu-list {
    display: none; 
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff !important;
    min-width: 195px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 8px 0 !important;
    list-style: none !important;
    z-index: 9999;
    margin: 0 !important;
    border: 1px solid #ddd !important;
}

/* Показуємо при наведенні */
.nav-item-dropdown:hover .dropdown-menu-list {
    display: block !important;
}

.dropdown-menu-list li {
    width: 100%;
    margin: 0 !important;
}

.dropdown-menu-list li a {
    color: #333333 !important;
    background: #ffffff !important;
    padding: 10px 20px !important;
    display: block !important;
    text-align: left !important;
    font-size: 14px !important;
    text-transform: none !important;
    transition: background 0.2s;
}

/* 1. БІЛЬШ ТЕМНИЙ СІРИЙ ХОВЕР НА ДЕСКТОПІ */
.dropdown-menu-list li a:hover {
    background-color: #d4d4d4 !important; 
    color: #000000 !important;
}

/* ==========================================================================
   МОБІЛЬНА АДАПТАЦІЯ: ОСТАТОЧНЕ ПРИБОРКАННЯ "ЖИРНИХ" ПУНКТІВ
   ========================================================================== */
@media (max-width: 768px) {
    .nav-item-dropdown {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 10px 0 !important;
    }

    /* Сама назва "Аварії" або "Потреби" */
    .nav-item-dropdown > a.nav-link-main {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 !important; /* Рівняємо висоту до решти меню */
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .dropdown-menu-list {
        display: block !important; 
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        
        
        /* РОБИМО ВУЖЧИМИ */
        width: 80% !important; 
        max-width: 250px !important; /* Щоб не розпливлись на широких екранах */
        margin: 0 auto 10px auto !important; 
        
        background: #05517d !important; 
        border-radius: 8px;
        padding: 0 !important; /* Прибираємо внутрішні розпірки списку */
    }

    .dropdown-menu-list li {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .dropdown-menu-list li a {
        text-align: center !important;
        background: transparent !important;
        color: #fff !important;
        
        /* Зменшуємо внутрішній відступ, щоб вони стали "худішими" */
        padding: 8px 10px !important; 
        font-size: 13px !important;
        line-height: 1.2 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

    .dropdown-menu-list li:last-child a {
        border-bottom: none !important;
    }

    /* Ховаємо стрілочку, вона тільки створює асиметрію */
    .dropdown-toggle {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* 1. ПРИБИРАЄМО РАДІУС ЗНИЗУ У ГОЛОВНОЇ КНОПКИ (Аварії/Потреби) */
    .nav-item-dropdown > a.nav-link-main {
        border-radius: 8px 8px 0 0 !important; /* Тільки верхні кути круглі */
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
    }

    /* 2. ПРИБИРАЄМО РАДІУС ЗВЕРХУ У СПИСКУ, ЩОБ ВІН ПРИСТАВ ДО КНОПКИ */
    .dropdown-menu-list {
        display: block !important; 
        position: static !important;
        width: 95% !important; 
        margin: 0 auto 10px auto !important; /* Прибрали верхній маржин */
        background: #05517d !important; 
        
        /* Робимо список ПОВНІСТЮ КВАДРАТНИМ або тільки знизу закругленим */
        border-radius: 0 0 8px 8px !important; 
        
        border: none !important;
        padding: 0 !important;
    }

    /* 3. ДЛЯ ВСІХ ІНШИХ ПУНКТІВ МЕНЮ (не випадайок) */
    /* Якщо у тебе звичайні пункти (Головна і т.д.) теж мають радіус, 
       і ти хочеш його лишити, то ми їх не чіпаємо. 
       Але в Аваріях тепер низ буде гострий, щоб "злитись" з синьою плашкою. */
}


@keyframes pulse-red {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.game-card { 
    background: #ffffff; 
    border: 2px solid #e2f1e4; /* Така ж рамка, як у слова */
    border-radius: 25px; 
    padding: 20px; 
    width: 260px;      /* Фіксуємо ширину */
    height: 350px;     /* Фіксуємо висоту, щоб картки були в один зріст */
    margin: 5px auto; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*-----26-04-2026-----+*/

/* Це спрацює тільки для телефонів */
@media (max-width: 480px) {
    .header-info {
        display: flex;
        justify-content: space-between; /* Рівномірно розподіляємо по ширині */
        gap: 2px !important;            /* Мінімальна відстань */
        font-size: 10px !important;     /* Ще трохи менший шрифт */
        padding: 0 5px;                 /* Мінімальні бокові відступи */
    }

    .header-info-item {
        margin: 0 !important;           /* Прибираємо всі зовнішні відступи */
        white-space: nowrap;            /* Забороняємо тексту всередині елементів розриватися */
    }

    /* Якщо дата все одно вилітає, зробимо її ще меншою */
    .date-block {
        font-weight: bold;
        color: #ffd700; /* Можна виділити кольором, щоб було помітніше при малому шрифті */
    }
}

/*----------+*/

@media (max-width: 768px) {
    .nav {
        display: none;
        flex-direction: column;
        background: #001f3f !important;
        width: 100% !important; /* На весь екран, щоб не з'їжджало */
        position: absolute;
        top: 100%;
        left: 0 !important;
        transform: none !important;
        padding: 0 !important;
    }

    .nav.show {
        display: flex !important;
    }

    .nav a {
        text-align: center !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Стрілочка, яка точно буде */
    .dropdown > a::after {
        content: " ▼" !important;
        display: inline !important;
        color: #ffd700 !important;
    }

    /* Підменю */
    .dropdown-content {
        position: static !important;
        display: none; /* Сховано за замовчуванням */
        background: rgba(0,0,0,0.2) !important;
    }

    .dropdown.active .dropdown-content {
        display: block !important;
    }
}

/* ФІНАЛЬНИЙ ПАТЧ ДЛЯ МОБІЛКИ - НЕ ЧІПАЄ ДЕСКТОП */
@media (max-width: 768px) {
    /* 1. Робимо кнопки тонкими */
    .header .nav a {
        height: auto !important;
        line-height: normal !important;
        padding: 12px 10px !important;
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Повертаємо стрілочку (спеціально для Аварій) */
    .dropdown > a::after {
        content: " ▼" !important;
        display: inline-block !important;
        margin-left: 5px !important;
        color: #ffd700 !important;
        font-size: 12px !important;
    }

    /* 3. Рівняємо меню по ширині хедера */
    .nav {
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
        background: #001f3f !important;
    }
}

.cat-carousel {
    padding: 40px 0;
    background-color: #f9f9f9; /* Світлий фон, щоб виділити блок */
    border-radius: 20px;
}

.carousel-container {
    width: 100%;
    overflow-x: auto;
    display: flex;
    scroll-snap-type: x mandatory;
    padding-bottom: 15px; /* Місце для скролбару, якщо він з'явиться */
}

.carousel-slide {
    display: flex;
    gap: 20px;
}

.carousel-slide img {
    width: 320px; /* Збільшили ширину */
    height: 240px; /* Збільшили висоту */
    object-fit: cover;
    border-radius: 18px;
    scroll-snap-align: center;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.carousel-slide img:hover {
    transform: scale(1.03); /* Ефект при наведенні на ПК */
}

/* Робимо скролбар тонким і симпатичним */
.carousel-container::-webkit-scrollbar {
    height: 6px;
}
.carousel-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/*----27-08-26---*/


/* Стиль для іконки лапок у меню */
.nav-pets {
    color: white !important; /* Робимо колір білим */
    filter: brightness(0) invert(1); /* Додатковий трюк, якщо емодзі відображається стандартно кольоровим */
    font-size: 1.2rem; /* Трохи збільшимо для зручності */
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.nav-pets:hover {
    transform: scale(1.2); /* Ефект при наведенні — лапка трохи збільшиться */
    opacity: 0.8;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}


    /* Додатковий фікс, щоб картки мали відступ */
    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px; /* Ось цей відступ між картками */
        margin-top: 20px;
    }

/* Відступи між кнопками акордеона */
.acc-item {
    margin-bottom: 12px !important; 
}

/* Налаштування іконок у кнопках, щоб вони не розпирали текст */
.acc-trigger img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
    margin-right: 15px !important;
    border-radius: 5px !important;
}

/* Стиль самої кнопки, щоб вона була схожа на ту, що на скріні */
.acc-trigger {
    display: flex !important;
    align-items: center !important;
    padding: 10px 20px !important;
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
    border-radius: 12px !important; /* Закруглення як на першому скріні */
    width: 100% !important;
    cursor: pointer !important;
}

.pet-accordion-row {
    display: flex;
    flex-wrap: wrap; /* Щоб на мобільних падали один під одного */
    gap: 20px;
    margin-top: 20px;
}

.pet-acc-card {
    flex: 1; /* Робить їх однакової ширини */
    min-width: 300px; /* Мінімальна ширина, щоб не злипалися на мобілках */
}

.acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 15px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.acc-trigger img {
    width: 30px;
    height: 30px;
    margin-right: 15px;
}

.acc-content-box {
    display: none;
    margin-top: 10px;
    background: #f1f5f9;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.arrow { margin-left: auto; font-style: normal; }


/* Спеціальна сітка для сторінки тварин */
.pet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px; /* Відступ між кнопками */
    margin-top: 20px;
    align-items: start;
}

/* Фікс для самих кнопок */
.acc-item {
    margin-bottom: 0 !important; /* Прибираємо старі відступи, бо тепер є gap */
}

.acc-trigger {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Щоб розкривашка була такої ж ширини як кнопка */
.acc-content {
    width: 100% !important;
    box-sizing: border-box;
}

.acc-content {
    width: 100% !important;
    clear: both; /* На всякий випадок */
}

/* Щоб іконки були акуратні, як ми домовлялися */
.acc-trigger img {
    width: 30px;
    height: 30px;
    margin-right: 12px;
    object-fit: contain;
}

/* Секція табло */
.pet-help-board {
    margin-top: 50px;
    padding: 30px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #eef2f6;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.board-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.5rem;
    color: #2d3748;
}

.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Картки */
.board-item {
    background: #f8fafc;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #edf2f7;
    transition: 0.3s;
}

.board-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Плашки з назвами */
.board-badge {
    padding: 10px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    color: white;
}

.found .board-badge { background: #48bb78; }    /* Зелений */
.lost .board-badge { background: #f56565; }     /* Червоний */
.adoption .board-badge { background: #4299e1; } /* Синій */

.board-body {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.board-body p {
    font-size: 14px;
    color: #4a5568;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* Кнопка-посилання */
.board-link {
    margin-top: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    text-decoration: none;
    color: #2d3748;
    font-weight: 600;
    font-size: 14px;
    transition: 0.2s;
}

.board-link:hover {
    background: #2d3748;
    color: #fff;
    border-color: #2d3748;
}

.board-footer {
    margin-top: 25px;
    text-align: center;
    font-size: 13px;
    color: #718096;
    font-style: italic;
}

/*--- 29.04.26 ----*/

/* Додамо трохи життя кнопкам */
    .tab-btn {
        padding: 10px 20px;
        border: 2px solid #ddd;
        border-radius: 8px;
        background: white;
        cursor: pointer;
        transition: all 0.3s;
        font-weight: bold;
    }
    .tab-btn:hover {
        background: #f0f0f0;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .notion-placeholder {
        background: #f9f9f9;
        border: 2px dashed #ccc;
        padding: 40px;
        text-align: center;
        border-radius: 15px;
    }

.tabs-header-new {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tab-btn-new {
    padding: 12px 24px;
    border: 2px solid #e0e0e0;
    border-radius: 30px;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.tab-btn-new.active {
    background: #4a90e2;
    color: white;
    border-color: #4a90e2;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.tab-btn-new:hover:not(.active) {
    background: #f5f5f5;
    border-color: #ccc;
}

.iframe-wrapper {
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #ddd;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Стиль для нових кнопок-посилань всередині карток */
.board-link-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background: white;
    border: 1px solid currentColor;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.board-link-btn:hover {
    background: rgba(0,0,0,0.05);
}

/* Контейнер для всього блоку Notion */
.notion-tabs-container {
    width: 100%;
    overflow: hidden; /* Щоб нічого не вилазило за межі екрана */
}

/* Кнопки, які можна гортати пальцем на мобільному */
.tabs-header-new {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto; /* Дозволяє скролити кнопки вбік */
    padding: 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Ховаємо скролбар */
}

.tabs-header-new::-webkit-scrollbar {
    display: none;
}

.tab-btn-new {
    flex: 0 0 auto; /* Кнопки не стискаються */
    padding: 10px 20px;
    border-radius: 25px;
    border: 1px solid #ddd;
    background: #fff;
    white-space: nowrap;
}

.tab-btn-new.active {
    background: #4a90e2;
    color: white;
    border-color: #4a90e2;
}

/* МАГІЯ ДЛЯ ГАЛЕРЕЇ */
.iframe-wrapper {
    position: relative;
    width: 100%;
    height: 700px;
    border-radius: 12px;
    border: 1px solid #eee;
    overflow: hidden;
}

#notion-gallery {
    width: 100%;
    height: 100%;
    border: none;
}

/* Спеціально для мобільних телефонів */
@media (max-width: 600px) {
    .iframe-wrapper {
        height: 85vh; /* Робимо вищим, щоб було зручно гортати */
    }
    
    /* Прибираємо зайві відступи, щоб розширити галерею */
    .container {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media (max-width: 600px) {
    /* Змушуємо галерею розтягнутися від краю до краю */
    .notion-tabs-container {
        margin-left: -15px; /* Виходимо за межі стандартних відступів */
        margin-right: -15px;
        width: calc(100% + 30px);
    }

    .iframe-wrapper {
        border-radius: 0; /* Прибираємо заокруглення, щоб картинки прилипали до країв */
        border-left: none;
        border-right: none;
        height: 80vh; /* Робимо висоту за розміром екрана */
    }

    /* Додаємо трохи вільного місця кнопкам зліва, щоб вони не липли до краю */
    .tabs-header-new {
        padding-left: 15px;
    }
}

@media (max-width: 600px) {
    .tabs-header-new {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* Ділимо екран на 3 рівні колонки */
        gap: 5px;
    }
    
    .tab-btn-new {
        padding: 8px 2px;
        font-size: 12px; /* Зменшуємо текст, щоб влізло в вузькі колонки */
        text-align: center;
    }
}

/* Робимо сітку карток адаптивною */
.board-grid {
    display: grid;
    /* На комп'ютері — 3 в ряд, на планшеті — по ситуації */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
}

/* Спеціально для мобільних / вузьких екранів */
@media (max-width: 900px) {
    .board-grid {
        /* Якщо 3 не влазять, робимо 1 картку на весь рядок, 
           щоб вони були великими і зручними */
        grid-template-columns: 1fr;
    }
    
    .board-item {
        margin-bottom: 10px;
    }
}

/* 04-05-2026 */ 

/* Оновлюємо сітку сервісів */
.services-grid {
    display: grid;
    /* Чітко 4 колонки на великих екранах */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    margin: 30px 0;
}

/* Адаптивність: 2 колонки на планшетах */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Адаптивність: 1 колонка на смартфонах */
@media (max-width: 600px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* Стиль для самих карток, щоб вони були однакової висоти */
.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.service-details {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Виштовхує контент догори */
}

/*-- 25-05-26 --*/
/* Контейнер для списку каналів */
.tg-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

/* Рядок каналу */
.tg-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg, #ffffff); /* підлаштується під твою тему */
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.tg-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Назва каналу */
.tg-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-color, #333);
}

/* Блок з кнопками */
.tg-actions {
    display: flex;
    gap: 8px;
}

/* Загальні стилі кнопок */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, opacity 0.2s;
}

/* Кнопка Перейти (Синя/Блакитна) */
.btn-primary {
    background-color: #0088cc; /* Класичний колір Телеграм */
    color: #fff;
}
.btn-primary:hover {
    background-color: #0077b3;
}

/* Кнопка Задонатити (Жовта/Зелена в майбутньому, зараз сіра через disabled) */
.btn-secondary {
    background-color: #e0e0e0;
    color: #757575;
}

/* Кнопка Поскаржитись (Червона) */
.btn-danger {
    background-color: #fce4e4;
    color: #cc3333;
}

/* Стилі для неактивних кнопок (браузер сам додасть opacity та вимкне кліки) */
.btn:disabled {
    background-color: #eaeaea !important;
    color: #aaaaaa !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Адаптивність для мобільних пристроїв */
@media (max-width: 600px) {
    .tg-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
    }
    .tg-actions {
        width: 100%;
        justify-content: space-between;
    }
    .btn {
        flex: 1;
        text-align: center;
        padding: 8px 4px;
        font-size: 0.8rem;
    }
}

/* Активна кнопка Задонатити (зелена, приємна для ока) */
.btn-success {
    background-color: #2ecc71; /* Гарний зелений колір */
    color: #fff;
    text-decoration: none;
}
.btn-success:hover {
    background-color: #27ae60; /* Трохи темніший при наведенні */
}

/*-- 27-05-2026 --*/

.osbb-page-container {
    width: 100%;
    font-family: system-ui, -apple-system, sans-serif;
    color: #334155;
    line-height: 1.6;
}
.osbb-main-header {
    text-align: center;
    margin-bottom: 30px;
}
.osbb-main-header h1 {
    color: #1e293b;
    font-size: 1.8rem;
    margin-bottom: 15px;
}
.osbb-subtitle {
    font-size: 1.05rem;
    background: #f8fafc;
    padding: 15px 20px;
    border-radius: 12px;
    color: #475569;
}
.osbb-section {
    margin-bottom: 35px;
}
.osbb-section h2 {
    color: #1e293b;
    font-size: 1.4rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 8px;
    margin-bottom: 15px;
}
.osbb-laws {
    background: #f1f5f9;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
}
.osbb-laws p {
    margin-bottom: 10px;
}
.osbb-laws p:last-child {
    margin-bottom: 0;
}
.osbb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 15px;
}
.osbb-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.osbb-card h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
}
.card-green h3 { color: #15803d; }
.card-red h3 { color: #b91c1c; }

.osbb-card ul {
    padding-left: 18px;
    margin: 0;
}
.osbb-card li {
    margin-bottom: 12px;
    font-size: 0.95rem;
}
.osbb-myth-card {
    background: #ffffff;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.myth-title {
    font-weight: 600;
    color: #b91c1c;
    margin-top: 0;
    margin-bottom: 8px;
}
.myth-text {
    margin: 0;
    font-size: 0.95rem;
}
.osbb-steps-list {
    padding-left: 20px;
}
.osbb-steps-list li {
    margin-bottom: 15px;
    font-size: 1rem;
}
.osbb-stories {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid #0284c7;
}

/* Фірмова жовта підказка як на Нашому Дворі */
.vet-tip-warm-box {
    background: #fffdf0;
    border: 1px solid rgba(218, 165, 32, 0.2);
    border-radius: 16px;
    padding: 20px 25px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    margin-top: 30px;
}
.vet-tip-warm-box .tip-title {
    margin: 0 0 8px 0;
    font-size: 1rem;
    color: #1e293b;
}
.vet-tip-warm-box .tip-text-italic {
    margin: 0;
    font-style: italic;
    color: #8b5a2b;
    line-height: 1.6;
    font-size: 1rem;
}

.osbb-cta-container {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

/* Наша фірмова водяна капсула у стилі Telegram */
.osbb-tg-capsule-btn {
    width: 100%; /* На всю ширину контенту */
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff !important; /* Щоб колір посилання не перебивався глобальними стилями */
    
    /* Об'ємний лазурно-блакитний градієнт */
    background: linear-gradient(135deg, #3a7bd5 0%, #3a6073 100%);
    
    display: flex;
    justify-content: space-between; /* Емодзі по боках */
    align-items: center;
    text-align: center;
    
    /* Ефект глянцю та об'єму «водички» */
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.15), 0 4px 12px rgba(58, 123, 213, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 16px; /* Капсульне заокруглення */
    transition: all 0.3s ease;
}

.osbb-tg-capsule-btn .tg-btn-icon {
    font-size: 1.3rem;
}

/* Ефект переливання при наведенні */
.osbb-tg-capsule-btn:hover {
    background: linear-gradient(135deg, #4a90e2 0%, #436f8a 100%);
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.6), 0 6px 15px rgba(58, 123, 213, 0.35);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Ефект при кліку */
.osbb-tg-capsule-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.osbb-law-link {
    color: #1e293b;
    text-decoration: underline;
    transition: color 0.2s ease;
}
.osbb-law-link:hover {
    color: #15803d; /* При наведенні стає приємного зеленого кольору */
}
.ua-content-section {
    width: 100%;
    margin: 30px 0;
    font-family: system-ui, -apple-system, sans-serif;
}
.ua-content-header {
    text-align: center;
    margin-bottom: 25px;
}
.ua-content-header h2 {
    color: #1e293b;
    font-size: 1.5rem;
    margin-bottom: 8px;
}
.ua-content-header p {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

/* ЛОГІКА ТАБІВ НА ЧИСТОМУ CSS */
.tabs-container input[type="radio"] {
    display: none; /* Ховаємо стандартні круглі радіо-кнопки */
}
.tabs-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
}
.tab-label {
    padding: 8px 16px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}
.tab-label:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* Приховуємо всі панелі за замовчуванням */
.tab-panel {
    display: none;
}

/* Магія CSS: показуємо потрібну панель залежно від вибраного інпуту */
#tab-history:checked ~ .tabs-content-wrapper .history-panel { display: block; }
#tab-tech:checked ~ .tabs-content-wrapper .tech-panel { display: block; }
#tab-humor:checked ~ .tabs-content-wrapper .humor-panel { display: block; }

/* Підсвічуємо активну вкладку */
#tab-history:checked ~ .tabs-nav label[for="tab-history"],
#tab-tech:checked ~ .tabs-nav label[for="tab-tech"],
#tab-humor:checked ~ .tabs-nav label[for="tab-humor"] {
    background: #2d6a4f; /* Фірмовий спокійний зелений */
    color: #ffffff;
}

/* СІТКА КАРТОК КАНАЛІВ */
.channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.channel-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.channel-card.empty-card {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.placeholder-text {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.95rem;
}

/* Назва каналу як велика капсульна кнопка-перехід */
.channel-title-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 10px 14px;
    border-radius: 10px;
    color: #1e293b;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 12px;
}
.channel-title-btn span {
    font-size: 0.75rem;
    background: #e2e8f0;
    padding: 3px 8px;
    border-radius: 6px;
    color: #475569;
    font-weight: 600;
}
.channel-title-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    text-decoration: none;
    color: #000;
}

.channel-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

/* БЛОК ДОНАТІВ */
.channel-donate-block {
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}
.donate-label {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
}
.donate-buttons {
    display: flex;
    gap: 8px;
}
.donate-btn {
    flex: 1;
    text-align: center;
    padding: 6px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.mono-bank {
    background: #fff5f5;
    color: #e53e3e;
    border: 1px solid #feb2b2;
}
.mono-bank:hover {
    background: #e53e3e;
    color: #ffffff;
    text-decoration: none;
}
.card-copy {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    cursor: pointer;
}
.card-copy:hover {
    background: #16a34a;
    color: #ffffff;
    text-decoration: none;
}
.donate-btn.disabled-btn {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #cbd5e1 !important;
    cursor: not-allowed !important;
    pointer-events: none; /* Повністю вимикає клікабельність */
    opacity: 0.6;
}
/* Оновлена кнопка-заголовок для підтримки логотипів */
.channel-title-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 8px 12px;
    border-radius: 12px;
    color: #1e293b;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 14px;
}

/* Контейнер для лого + назви */
.channel-brand-wrapper {
    display: flex;
    align-items: center;
    gap: 10px; /* Відступ між аватаркою та текстом */
}

/* Стиль самої кругленької аватарки */
.channel-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%; /* Робить картинку ідеально круглою */
    object-fit: cover;  /* Захищає картинку від розтягування */
    border: 1px solid #cbd5e1;
}

/* Маленький шильдик платформи праворуч */
.channel-title-btn .platform-badge {
    font-size: 0.75rem;
    background: #e2e8f0;
    padding: 3px 8px;
    border-radius: 6px;
    color: #475569;
    font-weight: 600;
}

.channel-title-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    text-decoration: none;
    color: #000;
}
/* --- НОВІ СТИЛІ ДЛЯ КАРТКИ КАНАЛУ --- */

.channel-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Макет: Лого зліва, текст справа */
.channel-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Відступ між лого та текстом */
    margin-bottom: 20px;
}

/* Секція Логотипу: Вушко */
.channel-logo-section {
    flex-shrink: 0; /* Не дає лого стискатися */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Новий логотип (більший, але акуратний) */
.channel-avatar-new {
    width: 48px; /* Збільшили з 32px до 48px */
    height: 48px;
    border-radius: 8px; /* Не такий агресивно круглий */
    object-fit: cover;
    border: 1px solid #cbd5e1;
}

/* Секція Тексту */
.channel-info-section {
    flex-grow: 1;
}

/* Рядок Заголовка: Назва + Платформа */
.channel-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* Назва Каналу як Посилання (але не капсула) */
.channel-link-new {
    text-decoration: none;
}
.channel-name-new {
    color: #1e293b;
    font-weight: 700;
    font-size: 1.1rem;
    transition: color 0.2s ease;
}
.channel-link-new:hover .channel-name-new {
    color: #15803d; /* Зелений при наведенні */
}

/* Платформа (залишається шильдиком) */
.platform-badge-new {
    font-size: 0.75rem;
    background: #e2e8f0;
    padding: 3px 8px;
    border-radius: 6px;
    color: #475569;
    font-weight: 600;
}

/* Опис */
.channel-desc-new {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* --- СТИЛІ ДОНАТІВ (залишаються як були) --- */
.channel-donate-block {
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}
.donate-label {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
}
.donate-buttons {
    display: flex;
    gap: 8px;
}
.donate-btn {
    flex: 1;
    text-align: center;
    padding: 6px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.mono-bank {
    background: #fff5f5;
    color: #e53e3e;
    border: 1px solid #feb2b2;
}
.mono-bank:hover {
    background: #e53e3e;
    color: #ffffff;
    text-decoration: none;
}
.donate-btn.disabled-btn {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #cbd5e1 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.6;
}
.card-copy {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    cursor: pointer;
}
.card-copy:hover {
    background: #16a34a;
    color: #ffffff;
    text-decoration: none;
}
/* Базова картка - повертаємо монолітність */
.channel-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Кнопка-заголовок: симетрична, на всю ширину */
.channel-title-btn-fixed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 10px 14px; /* Збільшили падінги, щоб кнопка дихала */
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

.channel-title-btn-fixed:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    text-decoration: none;
}

/* Контейнер для лого + тексту в один рядок */
.brand-inline-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Новий збалансований логотип - крупний, чіткий, не ламає рядок */
.brand-avatar-fixed {
    width: 40px;  /* Ідеальний розмір, щоб усе розгледіти */
    height: 40px;
    border-radius: 50%; /* Кругленький */
    object-fit: cover;
    border: 2px solid #ffffff; /* Білий обідок, щоб відокремити від фону кнопки */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Легка тінь для об'єму */
}

/* Текст назви */
.brand-name-fixed {
    color: #1e293b;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Шильдик платформи */
.platform-badge-fixed {
    font-size: 0.75rem;
    background: #e2e8f0;
    padding: 4px 10px;
    border-radius: 8px;
    color: #475569;
    font-weight: 600;
}

/* Текстові блоки на повну ширину (ідеальне вирівнювання) */
.channel-desc-fixed {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.channel-author-fixed {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 20px 0;
    padding-top: 10px;
    border-top: 1px dashed #f1f5f9; /* Делікатна лінія-розділювач всередині */
}

/* Блок донатів */
.channel-donate-block {
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}
.donate-label {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
}
.donate-buttons {
    display: flex;
    gap: 8px;
}
.donate-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.mono-bank {
    background: #fff5f5;
    color: #e53e3e;
    border: 1px solid #feb2b2;
}
.mono-bank:hover {
    background: #e53e3e;
    color: #ffffff;
    text-decoration: none;
}
.donate-btn.disabled-btn {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #cbd5e1 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.6;
}
.card-copy {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    cursor: pointer;
}
.card-copy:hover {
    background: #16a34a;
    color: #ffffff;
    text-decoration: none;
}
.patreon-btn {
    background: #fff8f5;
    color: #ff424d;
    border: 1px solid #ffb3b7;
}
.patreon-btn:hover {
    background: #ff424d;
    color: #ffffff;
    border-color: #ff424d;
    text-decoration: none;
}
/* Робимо навігацію табів адаптивною стрічкою */
.tabs-nav {
    display: flex;
    justify-content: flex-start; /* На мобілках притискаємо вліво */
    gap: 8px;
    margin-bottom: 25px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 12px;
    overflow-x: auto; /* Дозволяє гортати таби пальцем */
    white-space: nowrap; /* Не дає кнопкам переноситися на другий рядок */
    -webkit-overflow-scrolling: touch;
}

/* Приховуємо скроллбар у табах, щоб було красиво */
.tabs-nav::-webkit-scrollbar {
    display: none;
}

/* Центруємо таби на великих моніторах */
@media (min-width: 768px) {
    .tabs-nav {
        justify-content: center;
    }
}

/* Нова зафіксована сітка для карток (захист від розтягування) */
.channels-grid-fixed {
    display: flex;
    flex-wrap: wrap; /* Дозволяє карткам переноситися по 2-3 в ряд */
    gap: 20px;
    justify-content: center; /* Центрує картки на сторінці */
}

@media (min-width: 768px) {
    .channels-grid-fixed {
        justify-content: flex-start; /* На компах вирівнюємо акуратно по лівому краю */
    }
}

/* Сама картка тепер має чіткі межі розміру */
.channel-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    /* Магія розміру: на мобілці 100%, на компі - ідеальні 350px */
    width: 100%;
    max-width: 350px; 
    min-height: 380px; /* Всі картки будуть однакової висоти в ряду */
}

/* МАГІЯ ЗВ'ЯЗКУ ТАБІВ (9 штук) */
#tab-history:checked ~ .tabs-content-wrapper .history-panel,
#tab-gameplay:checked ~ .tabs-content-wrapper .gameplay-panel,
#tab-cinema:checked ~ .tabs-content-wrapper .cinema-panel,
#tab-games:checked ~ .tabs-content-wrapper .games-panel,
#tab-truecrime:checked ~ .tabs-content-wrapper .truecrime-panel,
#tab-humor:checked ~ .tabs-content-wrapper .humor-panel,
#tab-politics:checked ~ .tabs-content-wrapper .politics-panel,
#tab-media:checked ~ .tabs-content-wrapper .media-panel,
#tab-zsu:checked ~ .tabs-content-wrapper .zsu-panel { 
    display: block; 
}

/* Підсвічування активних кнопок */
#tab-history:checked ~ .tabs-nav label[for="tab-history"],
#tab-gameplay:checked ~ .tabs-nav label[for="tab-gameplay"],
#tab-cinema:checked ~ .tabs-nav label[for="tab-cinema"],
#tab-games:checked ~ .tabs-nav label[for="tab-games"],
#tab-truecrime:checked ~ .tabs-nav label[for="tab-truecrime"],
#tab-humor:checked ~ .tabs-nav label[for="tab-humor"],
#tab-politics:checked ~ .tabs-nav label[for="tab-politics"],
#tab-media:checked ~ .tabs-nav label[for="tab-media"],
#tab-zsu:checked ~ .tabs-nav label[for="tab-zsu"] {
    background: #2d6a4f;
    color: #ffffff;
}

.ua-content-section {
    width: 100%;
    margin: 30px 0;
    font-family: system-ui, -apple-system, sans-serif;
}
.ua-content-header {
    text-align: center;
    margin-bottom: 30px;
}
.ua-content-header h2 {
    color: #1e293b;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.ua-content-header p {
    color: #64748b;
    font-size: 1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* Навігаційна стрічка категорій */
.tabs-container input[type="radio"] {
    display: none !important;
}
.tabs-nav {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 25px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 12px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.tabs-nav::-webkit-scrollbar {
    display: none;
}

@media (min-width: 992px) {
    .tabs-nav {
        justify-content: center;
    }
}

.tab-label {
    padding: 8px 16px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: inline-block;
}

/* Перемикання відображення панелей */
.tab-panel {
    display: none;
}
#tab-history:checked ~ .tabs-content-wrapper .history-panel,
#tab-gameplay:checked ~ .tabs-content-wrapper .gameplay-panel,
#tab-cinema:checked ~ .tabs-content-wrapper .cinema-panel,
#tab-games:checked ~ .tabs-content-wrapper .games-panel,
#tab-truecrime:checked ~ .tabs-content-wrapper .truecrime-panel,
#tab-humor:checked ~ .tabs-content-wrapper .humor-panel,
#tab-politics:checked ~ .tabs-content-wrapper .politics-panel,
#tab-media:checked ~ .tabs-content-wrapper .media-panel,
#tab-zsu:checked ~ .tabs-content-wrapper .zsu-panel { 
    display: block !important; 
}

/* Активний таб */
#tab-history:checked ~ .tabs-nav label[for="tab-history"],
#tab-gameplay:checked ~ .tabs-nav label[for="tab-gameplay"],
#tab-cinema:checked ~ .tabs-nav label[for="tab-cinema"],
#tab-games:checked ~ .tabs-nav label[for="tab-games"],
#tab-truecrime:checked ~ .tabs-nav label[for="tab-truecrime"],
#tab-humor:checked ~ .tabs-nav label[for="tab-humor"],
#tab-politics:checked ~ .tabs-nav label[for="tab-politics"],
#tab-media:checked ~ .tabs-nav label[for="tab-media"],
#tab-zsu:checked ~ .tabs-nav label[for="tab-zsu"] {
    background: #2d6a4f !important;
    color: #ffffff !important;
}

/* 🧱 ЖОРСТКА СІТКА GRID (Рятує від зміщень та розтягувань) */
.channels-grid-new {
    display: grid !important;
    grid-template-columns: 1fr !important; /* На мобілці 1 в ряд */
    gap: 20px !important;
    justify-content: center;
}

@media (min-width: 768px) {
    .channels-grid-new {
        grid-template-columns: repeat(2, 1fr) !important; /* На планшеті 2 в ряд */
    }
}
@media (min-width: 1200px) {
    .channels-grid-new {
        grid-template-columns: repeat(3, 1fr) !important; /* На великому екрані строго 3 в ряд */
    }
}

/* Нові унікальні класи для карток (щоб глобальні стилі сайту їх не ламали) */
.channel-card-new {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 20px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.channel-card-new.empty-card {
    border: 2px dashed #cbd5e1 !important;
    background: #f8fafc !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 250px;
}
.placeholder-text {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.95rem;
}

/* Кнопка-назва всередині */
.channel-title-btn-fixed {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    margin-bottom: 16px !important;
}
.channel-title-btn-fixed:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
}
.brand-inline-block {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.brand-avatar-fixed {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.brand-name-fixed {
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}
.platform-badge-fixed {
    font-size: 0.75rem !important;
    background: #e2e8f0 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

/* Текстові блоки */
.channel-desc-fixed {
    font-size: 0.95rem !important;
    color: #334155 !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
}
.channel-author-fixed {
    font-size: 0.95rem !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin: 0 0 20px 0 !important;
    padding-top: 10px !important;
    border-top: 1px dashed #f1f5f9 !important;
}

/* Блок донатів */
.channel-donate-block {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 12px !important;
}
.donate-label {
    display: block !important;
    font-size: 0.8rem !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}
.donate-buttons {
    display: flex !important;
    gap: 8px !important;
}
.donate-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.mono-bank {
    background: #fff5f5 !important;
    color: #e53e3e !important;
    border: 1px solid #feb2b2 !important;
}
.mono-bank:hover {
    background: #e53e3e !important;
    color: #ffffff !important;
}
.patreon-btn {
    background: #fff8f5 !important;
    color: #ff424d !important;
    border: 1px solid #ffb3b7 !important;
}
.patreon-btn:hover {
    background: #ff424d !important;
    color: #ffffff !important;
}
.card-copy {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}
.card-copy:hover {
    background: #16a34a !important;
    color: #ffffff !important;
}
.donate-btn.disabled-btn {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #cbd5e1 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
}

/*-- 28-05 --*/
/* 1. БАЗОВА ФІКСОВАНА ШИРИНА КАРТОК */
.channels-grid-new .channel-card-new {
    width: 380px; /* Задаємо залізобетонну фіксовану ширину для всіх карток */
    max-width: 100%; /* Щоб на телефонах не вилазило за екран */
    box-sizing: border-box;
}

/* 2. РЯДОК ПОСИЛАННЯ (КОНТЕЙНЕР) */
.channel-title-btn-fixed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 8px;
}

/* 3. БЛОК АВАТАРКА + НАЗВА */
.brand-inline-block {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* Дозволяє внутрішнім елементам стискатися */
    flex: 1; /* Забирає весь вільний простір, підлаштовуючись під назву */
}

/* 4. ГУМОВА НАЗВА (МАГІЯ ТУТ) */
.brand-name-fixed {
    font-weight: 700;
    /* font-size підлаштовується: мінімум 12px, ідеально 1.1vw, максимум 15px */
    font-size: clamp(12px, 1.1vw, 15px); 
    line-height: 1.2;
    word-break: break-word; /* Якщо назва геть гігантська, вона просто перенесеться, а не випхне кнопку */
}

/* 5. КНОПКА YOUTUBE */
.platform-badge-fixed {
    flex-shrink: 0; /* Забороняємо кнопці ютубу стискатися, вона завжди ціла */
    white-space: nowrap;
}