/* ============================================================
   外壳布局 —— 应用壳体（侧栏 / 顶栏 / 内容区）只此一份
   ============================================================ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-md); line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand-600); text-decoration:none; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--gray-300); border-radius:var(--r-full); }
::-webkit-scrollbar-track{ background:transparent; }

#app{ display:flex; min-height:100vh; }

/* ---------- 侧栏 ---------- */
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  transition:width var(--dur) var(--ease); z-index:30;
}
.sidebar.mini{ width:var(--sidebar-w-mini); flex-basis:var(--sidebar-w-mini); }

.sb-head{
  height:var(--topbar-h); display:flex; align-items:center; gap:var(--sp-3);
  padding:0 var(--sp-4); border-bottom:1px solid var(--border); flex:0 0 auto;
}
.sb-logo{
  width:30px;height:30px;border-radius:var(--r-md);flex:0 0 30px;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:var(--fs-lg);letter-spacing:1px;
}
.sb-title{ font-size:var(--fs-lg); font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; }
.sb-sub{ font-size:var(--fs-xs); color:var(--text-3); white-space:nowrap; overflow:hidden; }
.sidebar.mini .sb-title,.sidebar.mini .sb-sub,.sidebar.mini .sb-group,
.sidebar.mini .nav-item span,.sidebar.mini .sb-foot{ display:none; }

.sb-nav{ flex:1 1 auto; overflow-y:auto; padding:var(--sp-3) var(--sp-2) var(--sp-6); }
.sb-group{
  font-size:var(--fs-xs); color:var(--text-3); padding:var(--sp-4) var(--sp-3) var(--sp-1);
  letter-spacing:.5px; font-weight:600;
}
.nav-item{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:8px var(--sp-3); margin:2px 0; border-radius:var(--r-md);
  color:var(--text-2); cursor:pointer; font-size:var(--fs-md);
  border-left:3px solid transparent; white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav-item:hover{ background:var(--surface-3); color:var(--text); }
.nav-item.active{ background:var(--brand-50); color:var(--brand-700); border-left-color:var(--brand-600); font-weight:600; }
.nav-item .ni-ico{ width:18px;height:18px;flex:0 0 18px;opacity:.9; }
.nav-item .ni-badge{
  margin-left:auto;background:var(--bad-600);color:#fff;font-size:var(--fs-xs);
  border-radius:var(--r-full);padding:0 6px;min-width:18px;text-align:center;line-height:18px;
}
.sb-foot{
  flex:0 0 auto; padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border);
  font-size:var(--fs-xs); color:var(--text-3);
}

/* ---------- 主区 ---------- */
.main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.topbar{
  height:var(--topbar-h); flex:0 0 var(--topbar-h); background:var(--surface);
  border-bottom:1px solid var(--border); display:flex; align-items:center;
  gap:var(--sp-3); padding:0 var(--sp-5); position:sticky; top:0; z-index:20;
}
.topbar .tb-title{ font-size:var(--fs-xl); font-weight:600; }
.topbar .tb-crumb{ font-size:var(--fs-sm); color:var(--text-3); }
.topbar .tb-right{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); }

.content{ flex:1 1 auto; padding:var(--sp-5); max-width:1560px; width:100%; }
.page{ animation:fadeIn .2s var(--ease); }
@keyframes fadeIn{ from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} }

/* 页面头部（统一：标题 + 说明 + 操作区） */
.page-head{
  display:flex; align-items:flex-start; gap:var(--sp-4);
  margin-bottom:var(--sp-4); flex-wrap:wrap;
}
.page-head .ph-main{ flex:1 1 auto; min-width:220px; }
.page-head h2{ margin:0; font-size:var(--fs-2xl); font-weight:600; }
.page-head .ph-desc{ color:var(--text-2); font-size:var(--fs-md); margin-top:2px; }
.page-head .ph-actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* 栅格 */
.grid{ display:grid; gap:var(--sp-4); }
.grid.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid.auto{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
@media(max-width:1180px){ .grid.g4{grid-template-columns:repeat(2,1fr);} .grid.g3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:760px){
  .grid.g2,.grid.g3,.grid.g4{ grid-template-columns:1fr; }
  .content{ padding:var(--sp-3); }
  .sidebar{ position:fixed; left:0; top:0; box-shadow:var(--sh-3); }
  .sidebar.hide-m{ transform:translateX(-100%); }
  .topbar .tb-menu{ display:inline-flex !important; }
  .topbar .tb-title{ font-size:var(--fs-lg); }
  .topbar .tb-right .ipt{ width:96px !important; }
}

/* 移动端遮罩 */
.mask{ position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:25; display:none; }
.mask.show{ display:block; }

/* 统计磁贴 */
.stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--sp-4); box-shadow:var(--sh-1);
}
.stat .st-label{ font-size:var(--fs-sm); color:var(--text-2); }
.stat .st-value{ font-size:var(--fs-3xl); font-weight:600; line-height:1.2; margin-top:2px; }
.stat .st-hint{ font-size:var(--fs-xs); color:var(--text-3); }
.stat.ok .st-value{ color:var(--ok-600); }
.stat.warn .st-value{ color:var(--warn-600); }
.stat.bad .st-value{ color:var(--bad-600); }
.stat.info .st-value{ color:var(--info-600); }