/* static/css/layout_grid.css - Управление сеткой 80% и закругленными колонками */

#app {
    display: flex;
    justify-content: center; /* Центрирование рабочей области */
    height: 100vh;
    width: 100vw;
    background-color: var(--bg_dark);
    padding: 20px 0;
}

#main_container {
    display: flex;
    width: 80%; /* Рабочая область — 80% от экрана */
    height: 100%;
    gap: 16px;
}

.column {
    height: 100%;
    overflow-y: auto;
    padding: 32px;
    border: 1px solid var(--border_color);
    border-radius: 24px;
    transition:
        transform 0.2s ease,
        border-color 0.3s ease;
}

/* Распределение согласно золотому сечению и именам из шаблона */
#user_menu {
    width: var(--width_menu);
    background-color: var(--bg_dark);
}

#profile_content {
    width: var(--width_content);
    background-color: var(--column_bg);
}

#extra_area {
    width: var(--width_extra);
    background-color: var(--bg_dark);
}

/* Стилизация скроллбара */
.column::-webkit-scrollbar {
    width: 4px;
}

.column::-webkit-scrollbar-thumb {
    /* ИСПРАВЛЕНО: Хардкод заменен на переменную */
    background: var(--scrollbar_thumb);
    border-radius: 10px;
}