/* 移动端抽屉菜单公共样式（index / calc / k8 三页共用，2026-08-24） */
.nav-left { display:flex; align-items:center; gap:16px; }
.nav-toggle { display:none; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.22); color:#fff; font-size:20px;
  width:38px; height:38px; border-radius:8px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; flex:0 0 auto; transition:background .2s; }
.nav-toggle:hover { background:rgba(255,255,255,.28); }
.nav-toggle.active { background:rgba(255,255,255,.25); }
.nav-toggle .bar { display:block; width:18px; height:2px; background:#fff;
  border-radius:2px; margin:3px auto; transition:transform .28s ease, opacity .2s ease; }
.nav-toggle.active .bar:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.nav-toggle.active .bar:nth-child(2) { opacity:0; }
.nav-toggle.active .bar:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* 抽屉遮罩 */
.mobile-drawer-mask { display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); z-index:999; opacity:0;
  transition:opacity .25s ease; }
.mobile-drawer-mask.show { display:block; opacity:1; }

/* 抽屉本体 */
.mobile-drawer { position:fixed; top:0; right:0; width:300px;
  max-width:86vw; height:100vh; background:#fff; z-index:1000;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; overflow:hidden; box-shadow:-4px 0 24px rgba(0,0,0,.18); }
.mobile-drawer.open { transform:translateX(0); }
.mobile-drawer-header { display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid #eee; flex-shrink:0; }
.mobile-drawer-title { font-size:16px; font-weight:600; color:#1e3c72; }
.mobile-drawer-close { background:none; border:none; font-size:22px; color:#999;
  cursor:pointer; padding:0 4px; line-height:1; }
.mobile-drawer-close:hover { color:#333; }
.mobile-drawer-body { flex:1; overflow-y:auto; padding:12px 0; }
.mobile-drawer-section { padding:8px 18px 14px; }
.mobile-drawer-section + .mobile-drawer-section { border-top:1px solid #f0f0f0; }
.mobile-drawer-label { font-size:12px; color:#aaa; margin-bottom:8px; text-transform:uppercase; letter-spacing:1px; }
.mobile-drawer-nav { display:flex; flex-direction:column; gap:4px; }
.mobile-drawer-nav a { display:block; padding:10px 12px; border-radius:8px;
  color:#333; text-decoration:none; font-size:14px; transition:background .15s; }
.mobile-drawer-nav a:hover { background:#f5f7fa; }

/* 用户区（仅 index.html 用到） */
.drawer-user-info { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.drawer-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#1e3c72,#2a5298);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; }
.drawer-user-name { font-size:15px; font-weight:600; color:#1e3c72; }
.drawer-user-role { font-size:12px; color:#999; }
.drawer-actions { display:flex; gap:8px; margin-top:10px; }
.drawer-actions .btn { flex:1; padding:9px 0; text-align:center; font-size:13px; }

@media (max-width:768px) {
  .topbar { flex-wrap:wrap; padding:10px 14px; gap:8px; }
  .topbar h1 { font-size:16px; flex:1; min-width:0; }
  .nav-toggle { display:inline-flex; margin-left:auto; }
  .nav-left { display:none; }
}
/* 桌面端：抽屉永不可见 */
@media (min-width:769px) {
  .mobile-drawer, .mobile-drawer-mask { display:none !important; }
}