:root{
      --brand:#007bff;           /* 品牌主色 */
      --brand-600:#1a73e8;       /* 深一点的蓝 */
      --brand-700:#0056b3;       /* 悬停色 */
      --bg:#f4f7fa;              /* 页面背景 */
      --card:#ffffff;            /* 内容卡片背景 */
      --text:#111827;            /* 主文本 */
      --muted:#6b7280;           /* 次要文本 */
      --shadow:0 6px 20px rgba(0,0,0,.08);
      --radius:12px;
      --sidebar-w-sm:72px;       /* 侧栏折叠宽度(仅桌面) */
      --topbar-h:56px;           /* 顶部栏高度(移动端) */
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    html, body, .app, .content{ overflow-x: hidden;}
    body{ margin:0; background:var(--bg); color:var(--text); }

    /* 布局：左侧栏 + 右侧内容 */
    .app{
      display:flex;
      min-height:100vh;
      width:100%;
    }

    /* 左侧栏 */
    .sidebar{
      position:sticky; top:0; left:0;
      height:100vh;
      width:var(--sidebar-w);
      background:var(--brand);
      color:#fff;
      display:flex; flex-direction:column;
      box-shadow:var(--shadow);
      z-index:30;
      transition:width .25s ease, transform .25s ease;
    }

    /* 品牌区 */
    .brand{
      display:flex; align-items:center; gap:.6rem;
      padding:16px 14px;
      border-bottom:1px solid rgba(255,255,255,.15);
    }
    .brand__logo{ width:28px; height:28px; display:grid; place-items:center; background:rgba(255,255,255,.15); border-radius:8px; }
    .brand__title{ font-size:16px; font-weight:700; line-height:1.2; }

    /* 搜索框（大量菜单时很重要） */
    .search{ padding:12px; }
    .search input{
      width:100%;
      height:36px; border:none; outline:none;
      border-radius:10px; padding:0 12px 0 36px;
      background:rgba(255,255,255,.15); color:#fff;
    }
    .search input::placeholder{ color:rgba(255,255,255,.75); }
    .search .icon{ position:relative; }
    .search .icon::before{
      content:"\f002"; /* fa-search */
      font-family:"Font Awesome 6 Free"; font-weight:900;
      position:absolute; left:8px; top:7px; color:#fff; opacity:.9;
    }

    /* 菜单区：滚动容器 */
    .menu{ flex:1; overflow:auto; padding:8px 10px 10px; }
    .section{ margin-bottom:10px; }
    .section__title{ font-size:12px; letter-spacing:.08em; opacity:.8; padding:8px 10px; }

    .nav{ display:flex; flex-direction:column; gap:8px; }
    .nav a{
      display:flex; align-items:center; gap:10px;
      text-decoration:none; color:#fff;
      background:var(--brand-600);
      border-radius:10px; padding:10px 12px;
      box-shadow:0 4px 10px rgba(0,0,0,.08);
      transition:transform .2s ease, background .2s ease, opacity .2s ease;
      will-change:transform;
    }
    .nav a:hover{ background:var(--brand-700); transform:translateY(-2px); }
    .nav i{ font-size:16px; width:20px; text-align:center; }
    .nav span{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    /* 底部区域（登录/设置等） */
    .sidebar__footer{ padding:10px; border-top:1px solid rgba(255,255,255,.15); }
    .footer-btn{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(0,0,0,.15); color:#fff; text-decoration:none; }
    .footer-btn:hover{ background:rgba(0,0,0,.25); }

    /* 右侧内容 */
    .content{
      flex:1; min-width:0; /* 防止内容被压缩 */
      padding:10px 10px;
      background:var(--card);
      box-shadow:var(--shadow);
      margin:5px; border-radius:var(--radius);
      height:calc(100vh - 2px);
    overflow-y:auto;     /* 只允许竖向滚动 */
  overflow-x:hidden;   /* 禁止横向滚动 */
    }

    /* 桌面端可折叠侧栏 */
    .sidebar.collapsed{ width:var(--sidebar-w-sm); }
    .sidebar.collapsed .brand__title,
    .sidebar.collapsed .search,
    .sidebar.collapsed .section__title,
    .sidebar.collapsed .nav span,
    .sidebar.collapsed .sidebar__footer span{ display:none; }
    .sidebar.collapsed .menu{ padding:8px; }
    .sidebar.collapsed .nav a{ justify-content:center; }

    /* 折叠按钮（桌面） */
    .collapse-btn{
      position:absolute; right:-10px; top:14px; z-index:40;
      width:20px; height:20px; border-radius:50%; border:none; cursor:pointer;
      background:#fff; color:var(--brand-700); box-shadow:var(--shadow);
      display:grid; place-items:center;
    }

    /* 移动端：左侧栏变为抽屉 + 顶栏 */
    .topbar{ display:none; }
    @media (max-width: 768px){
      .topbar{
        position:sticky; top:0; left:0; right:0;
        height:var(--topbar-h);
        display:flex; align-items:center; gap:10px;
        padding:0 12px; background:var(--brand); color:#fff; z-index:50;
        box-shadow:var(--shadow);
      }
      .topbar .hamburger{ background:rgba(255,255,255,.12); border:none; color:#fff; width:36px; height:36px; border-radius:8px; display:grid; place-items:center; }
      .topbar .title{ font-size:16px; font-weight:700; }
  .app{
    display:block;
  }
      .sidebar{ position:fixed; transform:translateX(-100%); width:min(82vw, 320px); }
      body.sidebar-open .sidebar{ transform:translateX(0); }

      .content{ margin:3px;  }

      /* 移动端无需折叠按钮 */
      .collapse-btn{ display:none; }
    }

    /* 抽屉遮罩 */
    .overlay{
      position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:20;
      opacity:0; visibility:hidden; transition:opacity .25s ease;
    }

    /* 可选：平滑滚动优化 */
    .menu{ scroll-behavior:smooth; scrollbar-width:thin; }
    .menu::-webkit-scrollbar{ width:8px; }
    .menu::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.35); border-radius:10px; }


    /* 手机端：菜单底部加安全区内边距，避免被 iOS Home 指示条/浏览器工具栏挡住 */
@media (max-width: 768px){
  .menu{
    /* 原来有 padding:8px 10px 10px; 这里额外给底部安全区 */
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* 手机端：隐藏侧栏底部固定区域（改用菜单里的最后一项） */
@media (max-width: 768px){
  .sidebar__footer{ display: none; }
}


/* 登录菜单项的视觉样式（与 footer-btn 风格一致些） */
.nav .tab-link--login{
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.15);
}
.nav .tab-link--login:hover{
  background: rgba(0,0,0,.25);
}