/* ============================================================
   2-layout / app-shell.css
   应用外壳：.app 根容器 + .main 主区 + .content + .section
   来源：website-complete / styles.css L77, L298–307, L370–378
   注：.content 的 max-width/居中由 container.css 决定
   ============================================================ */

.app { display: flex; min-height: 100vh; max-width: 100vw; overflow-x: clip; }

/* ===== Main ===== */
.main {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* ===== Content ===== */
/* 宽度/居中/padding 由 container.css 统一管理 */
.content {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--content-padding-y) var(--content-padding-x);
    overflow-x: clip;
    box-sizing: border-box;
}

.section { margin-bottom: var(--gap-xl); }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .main {
        margin-left: 0;
        max-width: 100vw;
        width: 100%;
        padding-bottom: 64px;
    }
    .content {
        padding: 16px;
        overflow-x: hidden;
        max-width: 100%;
        box-sizing: border-box;
        padding-bottom: calc(16px + 64px);
    }
}