/**
 * Sidebar Styles - 侧边栏样式合集
 *
 * 包含以下功能模块:
 * - 基础侧边栏样式 (sidebar-optimized.css)
 * - 手风琴式菜单 (sidebar-accordion.css)
 * - 可调整宽度 (sidebar-resizable.css)
 * - 切换按钮修复 (sidebar-toggle-fix.css)
 *
 * 合并日期: 2025-11-20
 */

/* ========================================
   基础侧边栏样式
   ======================================== */

.sidebar{position:fixed;top:0;left:0;bottom:0;width:240px;padding:70px 20px 20px;background:linear-gradient(135deg,#ffe0b2,#fff3d6);backdrop-filter:blur(8px);border-right:1px solid var(--border-color);overflow-y:auto;transform:translateX(-100%) !important;transition:transform 0.3s ease-in-out !important;z-index:1050 !important;font-family:"Helvetica Neue",Arial,sans-serif;will-change:transform;backface-visibility:hidden;display:block !important;visibility:visible !important;left:0 !important}.sidebar.open{transform:translateX(0) !important;display:block !important;visibility:visible !important;left:0 !important}.sidebar-header{display:flex;align-items:center;justify-content:flex-end;margin-bottom:0.8rem;padding:8px 4px;position:absolute;top:0;right:0;left:0;height:60px;background:inherit;z-index:10}.sidebar-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid rgba(250,140,50,.2);box-shadow:0 2px 8px rgba(250,140,50,.15);transition:all .3s ease;cursor:pointer}.sidebar-logo img{width:100%;height:100%;border-radius:50%;object-fit:cover}.sidebar-logo:hover{border-color:rgba(250,140,50,.4);box-shadow:0 4px 16px rgba(250,140,50,.25);transform:scale(1.05)}.sidebar-collapse-btn{background:transparent;border:none;padding:6px;border-radius:6px;color:#666;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.sidebar-collapse-btn:hover{background:rgba(250,140,50,.1);color:#fa8c32}.sidebar-header small{font-size:.75rem;color:var(--text-secondary)}.sidebar-section{margin-top:2rem}.sidebar-section h3{margin-bottom:.5rem;font-size:1rem;color:#333}.nav-list,.sub-list{list-style:none;margin:0;padding:0}.nav-list li{margin-bottom:1rem}.nav-list a{text-decoration:none;color:#4a3429;font-size:.95rem;font-weight:500;padding:8px 12px;border-radius:8px;transition:all .3s cubic-bezier(.4, 0, .2, 1);position:relative;display:block;text-shadow:0 1px 2px rgba(255,255,255,.5)}.nav-list a:hover{color:#fa8c32;background:rgba(250,140,50,.1);transform:translateX(4px);box-shadow:0 4px 12px rgba(250,140,50,.15)}.nav-list a:active{transform:translateX(2px)}.group-header.collapsible{display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none}.group-header.collapsible:hover .toggle-icon{color:#fa8c32}.toggle-icon{font-size:.8rem;color:#666;transition:all .3s ease;font-weight:bold}.toggle-icon.expanded{transform:rotate(90deg)}.sub-list{padding-left:1rem;margin-top:.5rem;max-height:500px;overflow:hidden;transition:all .4s cubic-bezier(.4, 0, .2, 1)}.sub-list.collapsed{max-height:0;margin-top:0;opacity:0}.sub-list.expanded{opacity:1}.sub-list li{margin-bottom:.5rem}.sub-list a{color:#6b7280;font-size:.85rem;font-weight:400;padding:6px 16px;border-radius:6px;transition:all .3s ease;position:relative;display:block}.sub-list a:hover{color:#fa8c32;background:rgba(250,140,50,.08);transform:translateX(2px)}.sidebar-footer{margin-top:2rem;padding:0}.qr-container{background:linear-gradient(135deg,rgba(255,224,178,.95) 0,rgba(255,243,214,.9) 50%,rgba(250,140,50,.1) 100%);border-radius:16px;padding:20px;margin-top:24px;box-shadow:0 8px 32px rgba(250,140,50,.15),0 4px 16px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.3);position:relative;overflow:hidden;text-align:center;backdrop-filter:blur(8px);border:2px solid rgba(250,140,50,.2);transition:all .3s ease}.qr-container:hover{transform:translateY(-2px);box-shadow:0 12px 48px rgba(250,140,50,.25),0 6px 24px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.4)}.qr-container::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 30%,rgba(250,140,50,.08) 0,transparent 40%);animation:subtle-rotate 20s linear infinite;pointer-events:none}@keyframes subtle-rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.qr-header{display:flex;align-items:center;gap:10px;margin-bottom:18px;justify-content:center;position:relative;z-index:1}.qr-icon{color:#fa8c32;display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:rgba(250,140,50,.15);border-radius:8px;border:1px solid rgba(250,140,50,.3);box-shadow:0 2px 8px rgba(250,140,50,.2)}.qr-title{color:#4a3429;font-weight:700;font-size:.95rem;text-shadow:0 1px 2px rgba(255,255,255,.8);letter-spacing:.3px}.qr-image-wrapper{position:relative;display:inline-block;margin:16px auto 18px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.98);padding:8px;box-shadow:0 8px 24px rgba(250,140,50,.2),0 4px 12px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.9);border:2px solid rgba(250,140,50,.15);transition:all .3s ease}.qr-image-wrapper:hover{transform:scale(1.03);box-shadow:0 12px 32px rgba(250,140,50,.3),0 6px 16px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.95)}.qr-image-wrapper img{width:110px;height:110px;display:block;margin:0 auto;border-radius:8px;object-fit:contain}.qr-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.scan-line{position:absolute;left:8px;right:8px;height:2px;background:linear-gradient(90deg,transparent,rgba(250,140,50,.6),rgba(255,187,51,.8),rgba(250,140,50,.6),transparent);border-radius:1px;animation:elegant-scan 2.5s ease-in-out infinite}@keyframes elegant-scan{0%,100%{top:8px;opacity:0}20%{opacity:.6}50%{top:50%;opacity:1;transform:translateY(-50%)}80%{opacity:.6}}.discord-qr,.wechat-qr{display:none;opacity:0;transition:opacity .3s cubic-bezier(.4, 0, .2, 1)}html[lang=zh-CN] .wechat-qr{display:block;animation:qr-fade-in .4s ease-out forwards}html[lang=zh-CN] .discord-qr{display:none}html[lang=en] .wechat-qr{display:none}html[lang=en] .discord-qr{display:block;animation:qr-fade-in .4s ease-out forwards}@keyframes qr-fade-in{0%{opacity:0;transform:scale(.9) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}.qr-image-wrapper.qr-switching-out{animation:qr-fade-out .2s ease-in forwards}.qr-image-wrapper.qr-switching-in{animation:qr-fade-in .3s ease-out forwards}@keyframes qr-fade-out{0%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.95) translateY(-5px)}}.menu-toggle{position:fixed;top:10px;left:20px;background:0 0;border:none;font-size:1.5rem;color:var(--primary-color);cursor:pointer;z-index:1100;padding:8px;border-radius:4px;transition:background-color var(--transition-fast)}.menu-toggle:hover{background:rgba(250,140,50,.1)}.menu-toggle:focus{outline:2px solid var(--primary-color);outline-offset:2px}.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:opacity var(--transition-fast);z-index:1000;display:none}.overlay.active{opacity:1;pointer-events:auto;display:block}@media (min-width:1200px){.sidebar{width:280px}}@media (min-width:769px) and (max-width:1024px){.sidebar{width:200px}}@media (max-width:768px){.sidebar{width:200px;padding:70px 14px 14px;overflow-y:visible !important;height:auto !important;min-height:100vh !important}.sidebar.open~.content{margin-left:200px;width:calc(100% - 200px)}.sidebar-header h2{font-size:1.3rem}.nav-list a{font-size:1rem;padding:8px 0;display:block}.sub-list a{font-size:.95rem}.menu-toggle{top:12px;left:12px;font-size:1.6rem;padding:10px}.qr-container{padding:18px;margin-top:20px;border-radius:14px}.qr-image-wrapper img{width:85px;height:85px}}@media (max-width:600px) and (min-width:481px){.sidebar{width:180px;padding:65px 10px 10px}.sidebar.open~.content{margin-left:180px;width:calc(100% - 180px)}}@media (max-width:480px) and (min-width:376px){.sidebar{width:160px;padding:60px 8px 8px}.sidebar.open~.content{margin-left:160px;width:calc(100% - 160px)}}@media (max-width:375px) and (min-width:361px){.sidebar{width:140px;padding:55px 6px 6px}.sidebar.open~.content{margin-left:140px;width:calc(100% - 140px)}}@media (max-width:360px){.sidebar{width:120px;padding:50px 4px 4px}.overlay.active{opacity:.3;pointer-events:auto}.sidebar.open~.content{margin-left:0}.qr-container{padding:14px;margin-top:16px;border-radius:10px}.qr-image-wrapper img{width:65px;height:65px}.sidebar-header h2{font-size:1.1rem}.nav-list a{font-size:.85rem;padding:6px 4px}}.nav-list a:focus,.sub-list a:focus{outline:2px solid var(--primary-color);outline-offset:2px;box-shadow:0 0 0 4px rgba(250,140,50,.1)}@media (prefers-reduced-motion:reduce){.nav-list a,.qr-container,.qr-image-wrapper,.sidebar,.sub-list a{transition:none}.qr-container::before,.scan-line{animation:none}}@media (prefers-contrast:high){.sidebar{border-right:2px solid var(--border-color)}.nav-list a,.sub-list a{border:1px solid transparent}.nav-list a:hover,.sub-list a:hover{border-color:var(--primary-color)}}@media (prefers-color-scheme:dark){.sidebar{background:linear-gradient(135deg,rgba(30,41,59,.95),rgba(15,23,42,.9));border-right:1px solid rgba(148,163,184,.2)}.sidebar-header h2{color:#e2e8f0;text-shadow:0 1px 3px rgba(0,0,0,.3)}.nav-list a{color:#cbd5e1;text-shadow:none}.nav-list a:hover{color:#fa8c32;background:rgba(250,140,50,.15)}.sub-list a{color:#94a3b8}}

/* ========================================
   手风琴式菜单
   ======================================== */

/**
 * 侧边栏手风琴式菜单样式
 * 支持流畅的展开/收起动画效果
 */

/* 菜单组容器 */
.nav-group {
  margin-bottom: 0.8rem;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.nav-group:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(250, 140, 50, 0.1);
}

/* 组标题样式 */
.group-header.collapsible {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, rgba(250, 140, 50, 0.1), rgba(255, 221, 0, 0.05));
  border: 1px solid rgba(250, 140, 50, 0.2);
  position: relative;
  overflow: hidden;
}

.group-header.collapsible::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(250, 140, 50, 0.1), transparent);
  transition: left 0.5s ease;
}

.group-header.collapsible:hover::before {
  left: 100%;
}

.group-header.collapsible:hover {
  background: linear-gradient(135deg, rgba(250, 140, 50, 0.15), rgba(255, 221, 0, 0.08));
  border-color: rgba(250, 140, 50, 0.3);
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(250, 140, 50, 0.2);
}

.group-header.collapsible:active {
  transform: translateX(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(250, 140, 50, 0.15);
}

/* 组标题文字 */
.group-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  transition: color 0.3s ease;
}

.group-header.collapsible:hover .group-title {
  color: #fa8c32;
}

/* 切换图标样式 - 完全隐藏 */
.toggle-icon {
  display: none !important;
}

/* JavaScript初始化完成后显示图标 - 已禁用 */

/* 切换图标悬停和展开样式 - 已禁用 */

/* 子菜单容器 */
.sub-list {
  padding-left: 0;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(250, 140, 50, 0.02));
  border-top: 1px solid rgba(250, 140, 50, 0.1);
  opacity: 0;
  transform: translateY(-10px);
}

.sub-list.collapsed {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-10px);
  padding-top: 0;
  padding-bottom: 0;
}

.sub-list.expanded {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
  padding-top: 8px;
  padding-bottom: 8px;
}

.sub-list.expanding {
  opacity: 0.7;
  transform: translateY(-5px);
}

.sub-list.collapsing {
  opacity: 0.3;
  transform: translateY(-5px);
}

/* 子菜单项样式 */
.sub-list li {
  margin-bottom: 0.3rem;
  padding: 0 16px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  transition-delay: calc(var(--item-index, 0) * 0.05s);
}

.sub-list.expanded li {
  opacity: 1;
  transform: translateX(0);
}

.sub-list li:nth-child(1) { --item-index: 1; }
.sub-list li:nth-child(2) { --item-index: 2; }
.sub-list li:nth-child(3) { --item-index: 3; }
.sub-list li:nth-child(4) { --item-index: 4; }
.sub-list li:nth-child(5) { --item-index: 5; }
.sub-list li:nth-child(6) { --item-index: 6; }

/* 子菜单链接样式 */
.sub-list a {
  color: #555;
  font-size: 0.9rem;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: block;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.sub-list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(250, 140, 50, 0.1), rgba(250, 140, 50, 0.05));
  transition: width 0.3s ease;
  border-radius: 0 6px 6px 0;
}

.sub-list a:hover::before {
  width: 100%;
}

.sub-list a:hover {
  color: #fa8c32;
  background: rgba(250, 140, 50, 0.08);
  transform: translateX(4px);
  border-left-color: #fa8c32;
  box-shadow: 0 2px 8px rgba(250, 140, 50, 0.15);
}

.sub-list a:active {
  transform: translateX(2px) scale(0.98);
}

/* 嵌套子菜单 (三级菜单) */
.sub-list .sub-list {
  margin-left: 16px;
  margin-top: 4px;
  padding-left: 8px;
  border-left: 2px dashed rgba(250, 140, 50, 0.3);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 4px 4px 0;
  max-height: none;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
}

.sub-list.collapsed .sub-list {
  max-height: 0;
  opacity: 0;
  transform: translateY(-5px);
  margin-top: 0;
  overflow: hidden;
}

.sub-list.expanded .sub-list {
  max-height: none;
  opacity: 1;
  transform: translateY(0);
  margin-top: 4px;
}

.sub-list .sub-list li {
  margin-bottom: 0.2rem;
  padding: 0 8px;
}

.sub-list .sub-list a {
  font-size: 0.8rem;
  color: #777;
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

.sub-list .sub-list a:hover {
  color: #fa8c32;
  background: rgba(250, 140, 50, 0.08);
  border-left-color: #fa8c32;
  transform: translateX(2px);
}

.sub-list .sub-list a::before {
  content: '•';
  color: rgba(250, 140, 50, 0.6);
  margin-right: 6px;
  font-size: 0.7rem;
}

/* 焦点样式 */
.group-header.collapsible:focus {
  outline: 2px solid rgba(250, 140, 50, 0.5);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(250, 140, 50, 0.1);
}

.sub-list a:focus {
  outline: 2px solid rgba(250, 140, 50, 0.5);
  outline-offset: 1px;
  background: rgba(250, 140, 50, 0.08);
}

/* 移动端优化 */
@media (max-width: 768px) {
  .nav-group {
    margin-bottom: 0.6rem;
  }
  
  .group-header.collapsible {
    padding: 10px 12px;
    border-radius: 6px;
  }
  
  .group-title {
    font-size: 0.95rem;
  }
  
  /* toggle-icon 已全局隐藏 */
  
  .sub-list li {
    padding: 0 12px;
    margin-bottom: 0.2rem;
  }
  
  .sub-list a {
    font-size: 0.85rem;
    padding: 6px 10px;
  }
  
  .sub-list .sub-list {
    margin-left: 15px;
  }
}

/* 超小屏优化 */
@media (max-width: 480px) {
  .group-header.collapsible {
    padding: 8px 10px;
  }
  
  .group-title {
    font-size: 0.9rem;
  }
  
  .sub-list li {
    padding: 0 10px;
  }
  
  .sub-list a {
    font-size: 0.8rem;
    padding: 5px 8px;
  }
}

/* 高对比度主题支持 */
@media (prefers-contrast: high) {
  .group-header.collapsible {
    border-color: #fa8c32;
    background: rgba(250, 140, 50, 0.2);
  }
  
  .group-title {
    color: #000;
    font-weight: 700;
  }
  
  /* toggle-icon 已全局隐藏 */
  
  .sub-list a {
    color: #333;
    border-left-width: 4px;
  }
  
  .sub-list a:hover {
    background: rgba(250, 140, 50, 0.15);
    border-left-color: #fa8c32;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .group-header.collapsible,
  .sub-list,
  .sub-list li,
  .sub-list a {
    transition: none;
  }
  
  .group-header.collapsible::before {
    display: none;
  }
}

/* ========================================
   可调整宽度功能
   ======================================== */

/**
 * 侧边栏可调整宽度增强样式
 * 基于原有sidebar-optimized.css，添加拖拽调整功能支持
 */

/* 
 * 重要说明：该文件扩展了原有的侧边栏样式，使其支持动态宽度调整
 * 同时保持原有的响应式设计和移动端兼容性
 */

/* 桌面端侧边栏增强 - 支持动态宽度 */
@media (min-width: 769px) {
  .sidebar {
    /* 移除固定宽度，允许JavaScript动态设置 */
    width: var(--sidebar-width, 240px);
    min-width: 200px;
    max-width: 500px;
    /* 保持原有的 position: fixed，不要改为relative */
  }
  
  /* 确保JavaScript设置的内联样式优先级最高 */
  .sidebar[style*="width"] {
    width: var(--sidebar-width, 240px) !important;
  }
  
  /* 覆盖原始CSS中的固定宽度设置 */
  .sidebar {
    width: var(--sidebar-width, 240px) !important;
  }
  
  /* 隐藏侧边栏滚动条 */
  .sidebar {
    /* 隐藏滚动条但保持滚动功能 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }
  
  /* 隐藏WebKit滚动条 */
  .sidebar::-webkit-scrollbar {
    display: none;
  }
  
  /* 优化侧边栏内容布局，避免溢出 */
  .sidebar {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  
  /* 确保导航区域可以适应剩余空间 */
  .sidebar nav {
    flex: 1;
    overflow: hidden;
  }
  
  /* 侧边栏底部区域不要太占空间 */
  .sidebar-footer {
    flex-shrink: 0;
  }
  
  /* QR容器进一步优化 */
  .qr-container {
    margin-top: 16px !important;
    padding: 16px !important;
  }
  
  .qr-image-wrapper img {
    width: 90px !important;
    height: 90px !important;
  }
  
  /* 内容区域自适应侧边栏宽度 - 仅在桌面端 */
  .content.shifted {
    margin-left: var(--sidebar-width, 240px);
    transition: margin-left 0.3s ease;
  }
  
  /* 确保内容区域始终从顶部开始 */
  .content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    top: 0;
  }
  
  /* 调整时的平滑过渡 */
  .sidebar-resizing .sidebar {
    transition: none; /* 调整时禁用过渡效果 */
  }
  
  .sidebar-resizing .content.shifted {
    transition: none; /* 调整时禁用过渡效果 */
  }
  
  /* 拖拽手柄样式增强 */
  .sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    background: transparent;
    cursor: col-resize;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
  }
  
  .sidebar-resize-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 40px;
    background: transparent;
    border-radius: 1px;
    transition: all 0.2s ease;
  }
  
  .sidebar-resize-handle:hover {
    background: rgba(250, 140, 50, 0.1);
    width: 8px;
  }
  
  .sidebar-resize-handle:hover::before {
    background: rgba(250, 140, 50, 0.6);
    height: 60px;
  }
  
  .sidebar-resize-handle.active {
    background: rgba(250, 140, 50, 0.2);
    width: 8px;
  }
  
  .sidebar-resize-handle.active::before {
    background: var(--primary-color);
    height: 80px;
  }
  
  /* 拖拽图标增强 */
  .resize-handle-icon {
    opacity: 0;
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    pointer-events: none;
    transform: scale(0.8);
  }
  
  .sidebar-resize-handle:hover .resize-handle-icon,
  .sidebar-resize-handle.active .resize-handle-icon,
  .sidebar-resize-handle:focus .resize-handle-icon {
    opacity: 1;
    transform: scale(1);
  }
  
  /* 拖拽提示文字 */
  .sidebar-resize-handle::after {
    content: '拖拽调整宽度';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1070;
  }
  
  .sidebar-resize-handle:hover::after {
    opacity: 1;
  }
}

/* 调整状态下的全局样式 */
.sidebar-resizing {
  cursor: col-resize !important;
}

.sidebar-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
}

.sidebar-resizing .sidebar {
  box-shadow: 0 0 20px rgba(250, 140, 50, 0.3);
}

/* 宽度变化动画 */
.sidebar:not(.sidebar-resizing) {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.content.shifted:not(.sidebar-resizing *) {
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 焦点和无障碍支持 */
.sidebar-resize-handle:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  background: rgba(250, 140, 50, 0.15);
}

.sidebar-resize-handle[aria-pressed="true"] {
  background: rgba(250, 140, 50, 0.25);
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .sidebar-resize-handle {
    border-right: 2px solid var(--primary-color);
  }
  
  .sidebar-resize-handle:hover,
  .sidebar-resize-handle.active {
    background: rgba(250, 140, 50, 0.3);
    border-right-width: 3px;
  }
  
  .resize-handle-icon {
    background: white;
    border: 2px solid var(--primary-color);
  }
  
  .sidebar-resize-handle::after {
    background: var(--primary-color);
    color: white;
    border: 1px solid white;
  }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
  .sidebar-resize-handle,
  .resize-handle-icon,
  .sidebar,
  .sidebar.open ~ .content {
    transition: none !important;
  }
  
  .sidebar-resize-handle::before {
    transition: none;
  }
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .sidebar-resize-handle:hover {
    background: rgba(250, 140, 50, 0.15);
  }
  
  .sidebar-resize-handle.active {
    background: rgba(250, 140, 50, 0.25);
  }
  
  .sidebar-resize-handle:hover::before,
  .sidebar-resize-handle.active::before {
    background: #fa8c32;
  }
  
  .resize-handle-icon {
    background: rgba(30, 30, 30, 0.95);
    color: #fa8c32;
    box-shadow: 0 2px 12px rgba(250, 140, 50, 0.2);
  }
  
  .sidebar-resize-handle::after {
    background: rgba(30, 30, 30, 0.9);
    color: #fa8c32;
    border: 1px solid rgba(250, 140, 50, 0.3);
  }
}

/* 覆盖原始CSS中不同屏幕尺寸的固定宽度设置 */
@media (min-width: 1200px) {
  .sidebar {
    width: var(--sidebar-width, 280px) !important;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .sidebar {
    width: var(--sidebar-width, 240px) !important;
  }
}

/* 移动端完全禁用调整功能 */
@media (max-width: 768px) {
  .sidebar-resize-handle {
    display: none !important;
  }
  
  .sidebar {
    /* 移动端恢复固定宽度 */
    width: 200px !important;
    min-width: unset !important;
    max-width: unset !important;
  }
  
  /* 移动端响应式宽度保持不变 */
  @media (max-width: 600px) and (min-width: 481px) {
    .sidebar {
      width: 180px !important;
    }
  }
  
  @media (max-width: 480px) and (min-width: 376px) {
    .sidebar {
      width: 160px !important;
    }
  }
  
  @media (max-width: 375px) and (min-width: 361px) {
    .sidebar {
      width: 140px !important;
    }
  }
  
  @media (max-width: 360px) {
    .sidebar {
      width: 120px !important;
    }
  }
}

/* 宽度指示器（可选，用于调试） */
.sidebar-width-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 1070;
}

.sidebar-resizing .sidebar-width-indicator {
  opacity: 1;
}

/* 兼容性增强 */
.sidebar[style*="width"] {
  /* 确保JavaScript设置的内联样式优先级 */
  width: var(--sidebar-width) !important;
}

/* 过渡状态优化 */
.sidebar-width-transition {
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.sidebar-width-transition ~ .content {
  transition: margin-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 最小和最大宽度视觉提示 */
.sidebar[data-at-min-width="true"] .sidebar-resize-handle::after {
  content: '已达最小宽度';
}

.sidebar[data-at-max-width="true"] .sidebar-resize-handle::after {
  content: '已达最大宽度';
}

/* 双击重置提示 */
.sidebar-resize-handle[title*="双击"]::after {
  content: '拖拽调整 / 双击重置';
}

/* ========================================
   切换按钮修复
   ======================================== */

/**
 * 侧边栏开关按钮固定定位修复
 * 确保按钮在页面滚动时始终可见
 */

/* 基础固定定位 - 确保按钮始终可见 */
.menu-toggle {
  position: fixed !important;
  top: 8px !important;
  left: 20px !important;
  z-index: 9999 !important; /* 提高z-index确保在最顶层 */
  background: transparent !important;
  border: none !important;
  font-size: 1.5rem !important;
  color: #333 !important;
  cursor: pointer !important;
  padding: 8px !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.menu-toggle:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.05) !important;
  box-shadow: none !important;
}

.menu-toggle:active {
  transform: scale(0.95) !important;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .menu-toggle {
    top: 12px !important;
    left: 12px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1.3rem !important;
    z-index: 9999 !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }
}

@media (max-width: 480px) {
  .menu-toggle {
    top: 10px !important;
    left: 10px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1.2rem !important;
  }
}

@media (max-width: 360px) {
  .menu-toggle {
    top: 8px !important;
    left: 8px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 1.1rem !important;
  }
}

/* 确保按钮在所有状态下都可见 */
.menu-toggle {
  pointer-events: auto !important;
  user-select: none !important;
}

/* 防止按钮被其他元素遮挡 */
.menu-toggle::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}

/* 对比度和可访问性优化 */
@media (prefers-contrast: high) {
  .menu-toggle {
    background: #fa8c32 !important;
    border: 2px solid #000 !important;
    color: #000 !important;
  }
}

/* 减少动画的用户偏好支持 */
@media (prefers-reduced-motion: reduce) {
  .menu-toggle {
    transition: none !important;
  }

  .menu-toggle:hover {
    transform: none !important;
  }
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .menu-toggle {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
  }
}

/* 焦点状态优化 */
.menu-toggle:focus {
  outline: 3px solid rgba(250, 140, 50, 0.5) !important;
  outline-offset: 2px !important;
}

/* 确保在打印时隐藏 */
@media print {
  .menu-toggle {
    display: none !important;
  }
}