/* --- ОСНОВНИЙ КОНТЕЙНЕР --- */
.sgb-app {
    display: flex; 
    flex-direction: column;
    width: 100%; 
    min-height: auto;
    background: transparent !important; 
    color: var(--sh-text) !important;
    font-family: var(--font-family, system-ui, -apple-system, BlinkMacSystemFont, sans-serif) !important;
    padding: var(--space-3, 12px) 0;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.sgb-app * {
    font-family: var(--font-family, system-ui, -apple-system, BlinkMacSystemFont, sans-serif) !important;
    box-sizing: border-box;
}

/* --- ГРУПА (заголовок секції — текст повністю з адмінки, нічого не захардкожено) --- */
.sgb-group-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, var(--sh-text-muted, #6b7280));
    margin: 20px 4px 8px;
}
.sgb-app > .sgb-group-label:first-child { margin-top: 4px; }

/* --- СПИСОК (замість сітки квадратних карток) --- */
.sgb-list-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--lg-surface-bg, var(--sh-pill-bg, var(--glass-bg))) !important;
    border: 1px solid var(--lg-surface-border, var(--sh-menu-border, var(--border-subtle))) !important;
    box-shadow: var(--lg-shadow-soft, var(--shadow-sm)), var(--lg-inner-highlight) !important;
    border-radius: var(--sh-ui-card-radius, var(--radius-2xl, 24px)) !important;
    overflow: hidden;
    margin-bottom: var(--space-5, 20px);
    position: relative;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sgb-list-card {
        backdrop-filter: var(--lg-blur, blur(var(--glass-blur, 20px)));
        -webkit-backdrop-filter: var(--lg-blur, blur(var(--glass-blur, 20px)));
    }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sgb-list-card { background: var(--bg-surface-solid, #ffffff) !important; }
}

.sgb-row-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--lg-surface-border, var(--border-subtle, rgba(0,0,0,0.08)));
    text-decoration: none !important;
    color: var(--text-primary, var(--sh-text)) !important;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.sgb-list-card .sgb-row-item:last-child { border-bottom: none; }

/* Рух без зміни кольору при натисканні — як і було в оригінальному стилі кнопок */
.sgb-row-item:active { transform: scale(var(--lg-press-scale, 0.98)); }

.sgb-row-item:focus-visible {
    outline: none;
    box-shadow: var(--sh-ui-focus-ring, 0 0 0 3px rgba(40,127,240,0.22)) inset;
}

.sgb-row-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
}

.sgb-row-label { flex: 1; text-align: left; }

.sgb-row-chevron {
    flex-shrink: 0;
    color: var(--text-disabled, var(--sh-text-muted, #ADB5BD));
    display: flex;
}
.sgb-row-chevron svg { display: block; }

/* --- HEADER IMAGE (без змін — стосується сторінки за посиланням, а не самого списку) --- */
.sgb-hero-img {
    display: block;
    margin: 0 auto var(--space-7, 28px) auto; 
    
    /* Розміри як в оригіналі */
    width: auto;           
    height: auto;          
    max-width: 100%;       
    
    /* Обмеження висоти, про яке ви казали */
    max-height: 280px;     
    
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important; 
    
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25));
}

/* --- АДАПТИВНІСТЬ (ПК): список трохи ширший за максимальною шириною --- */
@media (min-width: 768px) {
    .sgb-list-card { max-width: 720px; margin-left: auto; margin-right: auto; }
    .sgb-group-label { max-width: 720px; margin-left: auto; margin-right: auto; }
    .sgb-row-item { font-size: 16px; padding: 16px 20px; }
}

/* --- АДАПТИВНІСТЬ (МОБІЛЬНИЙ) --- */
@media (max-width: 600px) {
    .sgb-hero-img {
        width: auto !important; 
        height: auto !important;
        max-height: 220px !important; /* Мобільне обмеження висоти */
        margin-bottom: var(--space-5, 20px);
    }
}