/* 应用整体布局：顶栏 + 侧栏 + 主内容 */

/* 顶栏 */
.app-header {
  /* 顶栏背景 */
  background: #fff;
  /* 底部分割线 */
  border-bottom: 1px solid #e2e8f0;
  /* 内边距 */
  padding: 16px 24px;
}

/* 产品标题 */
.app-title {
  /* 标题字号 */
  font-size: 1.25rem;
  /* 字重 */
  font-weight: 600;
}

/* 副标题说明 */
.app-subtitle {
  /* 与标题间距 */
  margin-top: 4px;
  /* 次要文字色 */
  color: #64748b;
  /* 略小字号 */
  font-size: 0.9rem;
}

/* 主体：侧栏 + 内容区 */
.app-layout {
  /* 最大内容宽度 */
  max-width: 1100px;
  /* 水平居中 */
  margin: 0 auto;
  /* 内边距 */
  padding: 24px 20px 48px;
  /* 侧栏与主区横向排列 */
  display: flex;
  /* 换行：窄屏时侧栏在上 */
  flex-wrap: wrap;
  /* 列间距 */
  gap: 20px;
}

/* 侧栏导航 */
.app-nav {
  /* 侧栏固定宽度 */
  flex: 0 0 200px;
  /* 纵向按钮列表 */
  display: flex;
  flex-direction: column;
  /* 按钮间距 */
  gap: 4px;
}

/* 主内容区 */
.app-main {
  /* 占据剩余宽度 */
  flex: 1 1 480px;
  /* 白色卡片背景 */
  background: #fff;
  /* 圆角 */
  border-radius: 8px;
  /* 边框 */
  border: 1px solid #e2e8f0;
  /* 最小高度避免切换时跳动 */
  min-height: 360px;
}

/* 窄屏：侧栏占满宽 */
@media (max-width: 640px) {
  .app-nav {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
}