header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;

    /* 关键：强制不受父容器限制 */
    margin: 0 auto !important;
}
html, body { overflow-x: hidden; }
img, canvas, video { max-width: 100%; height: auto; }
html, body {
  margin: 0;
  width: 100%;
}


body {
  padding-top: 60px; /* 跟你的 header 高度一致/稍大一点 */
}

.logo {
    margin: 0;
    font-size: 1.2rem;
}

/* 汉堡按钮样式 */
.hamburger {
    display: none; /* 默认桌面端不显示 */
    font-size: 24px;
    background: none;
    border: none;
    color: #222;
    cursor: pointer;
    margin-left: auto; /* 往右推 */
}

/* Sidebar 默认样式 */
.sidebar {
    background: #fff;
    padding: 15px;
}

.page-with-sidebar {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* 左侧栏：固定宽度+吸顶 */
.page-with-sidebar .sidebar {
  flex: 0 0 220px;     /* 固定 220px 宽 */
  top: 80px;           /* 顶部 header 高度 */
  align-self: flex-start;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

/* 右侧内容自动占满 */
.page-with-sidebar .content {
  flex: 1 1 auto;
  min-width: 0; /* 防止图表溢出 */
}

/* 手机端样式 */
@media (max-width: 768px) {
    .hamburger {
        display: block; /* 手机端显示汉堡按钮 */
    }

    /* 默认隐藏 */
    .page-with-sidebar .sidebar {
        display: none;
    }

    /* 点击汉堡按钮时显示 */
    .page-with-sidebar .sidebar.active {
        display: block !important; /* 提高优先级 */
        position: absolute;
        top: 60px; /* header 高度 */
        left: 0;
        background: white;
        width: 220px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        z-index: 999;
    }

    .page-with-sidebar {
        display: block;
        margin: 1rem auto;
    }
}
@media (min-width: 769px) {
    .hamburger {
        display: none !important; /* 桌面端强制隐藏 */
    }
}

/* 彻底避免横向滚动 */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }

/* 响应式媒体不撑宽 */
img, canvas, video, svg { max-width: 100%; height: auto; }

/* 任何表格在小屏强制不超宽（桌面仍保持原样） */
@media (max-width: 768px) {
  table { max-width: 100% !important; table-layout: fixed !important; }
  th, td { word-break: break-word; overflow-wrap: anywhere; }
}

/* header 最终版（去掉 100vw 和没必要的 margin） */
header{
  position: fixed; top: 0; left: 0; right: 0;
  width: auto; max-width: 100%;
  box-sizing: border-box; z-index: 1000;
  display: flex; justify-content: space-between; align-items: center;
  background:#fff; padding:10px 15px; border-bottom:1px solid #ddd;
  /* 不要 margin:0 auto */
}
body { padding-top: 60px; } /* 跟 header 高度对齐 */