/* ============================================
   APP LAYOUT - 主框架布局
   ============================================ */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ============================================
   MAIN CONTENT - 主内容区
   ============================================ */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding: 36px 40px;
  max-width: 1100px;
  transition: margin-left var(--transition-slow);
}

.main-content.wide {
  max-width: none;
}

.sidebar.collapsed ~ .main-content,
.app-layout.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed-width);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .main-content {
    margin-left: 0 !important;
    padding: 76px 20px 20px;
  }

  .app-layout {
    flex-direction: column;
  }
}