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

body {
    overflow-x: hidden;
    background: var(--bg-page);
    color: var(--text-main);
    font-family: 'Poppins', sans-serif;
}

/* ===============================
   VARIABLES
=============================== */
:root {
    --left-width: 240px;
    --right-width: 280px;

    --bg-page: #f3f7fc;
    --bg-panel: #ffffff;
    --bg-post: linear-gradient(180deg, #ffffff 0%, #fcf9ff 100%);

    --text-main: #203040;
    --text-muted: #637487;
    --text-soft: #3a3450;

    --accent: #c3a0fd;
    --accent-2: #d492fd;
    --accent-3: #91caff;

    --border-soft: rgba(195, 160, 253, 0.18);
    --border-strong: rgba(212, 146, 253, 0.35);

    --shadow-soft: 0 6px 18px rgba(40, 30, 70, 0.06);
    --shadow-post: 0 8px 18px rgba(120, 80, 180, 0.06);
    --shadow-featured: 0 12px 26px rgba(120, 80, 180, 0.10);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --avatar-size: 52px;
    --transition-fast: 0.18s ease;
}

/* ===============================
   MAIN LAYOUT WRAPPER
=============================== */
.layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
    align-items: flex-start;
}

/* ===============================
   SIDE COLUMNS (IMPORTANT FIX)
=============================== */
.left-sidebar {
    width: var(--left-width);
    flex-shrink: 0;
}

.right-sidebar {
    width: var(--right-width);
    flex-shrink: 0;
}

/* ===============================
   MAIN CONTENT (CRITICAL FIX)
=============================== */
.main-content {
    flex: 1;
    min-width: 0; /* THIS prevents grid breaking */
}

/* ===============================
   FOOTER
=============================== */
.layout-footer {
    width: 100%;
    margin: 0;
}

/* ===============================
   SIDEBAR PANELS
=============================== */
.sidebar-section {
    padding: 15px;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: #f2f6fd;
}

.site-header,
.main-header,
header {
    position: sticky;
    top: 0;
    z-index: 999;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-sizing: border-box;
}

.site-wrapper,
.layout-wrapper,
.main-layout {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}