/* ============================================================
   布局：侧边栏 / 顶栏 / 标签栏 / 内容区
   ============================================================ */

.app{min-height:100vh}

/* ---------- 侧边栏 ---------- */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
  background:#fff;border-right:1px solid var(--bd-2);
  display:flex;flex-direction:column;z-index:100;
}
.sb-logo{
  height:var(--topbar-h);display:flex;align-items:center;
  padding:0 18px;flex:0 0 auto;
}
.sb-logo .wordmark{display:flex;align-items:center;gap:8px;text-decoration:none}
.sb-logo svg{display:block}
.sb-logo img{display:block;height:23px;width:auto}
.sb-logo .txt{
  font-size:20px;font-weight:700;color:#16202e;letter-spacing:-.3px;
  font-family:"Segoe UI",var(--font);
}
.sb-logo .txt em{font-style:normal;color:var(--c-brand)}
.sb-menu{flex:1;overflow-y:auto;padding:6px 8px 24px}
.sb-menu::-webkit-scrollbar{width:4px}

.sb-item{
  display:flex;align-items:center;gap:9px;
  height:38px;padding:0 10px;margin-bottom:2px;border-radius:var(--radius-sm);
  color:var(--t-1);font-size:13.5px;font-weight:500;cursor:pointer;
  user-select:none;transition:background .15s,color .15s;
}
.sb-item:hover{background:var(--bg-hover)}
.sb-item .ico{flex:0 0 16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.sb-item .ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sb-item .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-item .arw{flex:0 0 12px;transition:transform .2s;opacity:.55}
.sb-item .arw svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.sb-item.open .arw{transform:rotate(90deg)}
.sb-item.active{
  background:var(--c-primary);color:#fff;
  box-shadow:var(--sh-primary);
}
.sb-item.active .arw,.sb-item.active .badge{color:#fff}

/* 子菜单 */
.sb-sub{overflow:hidden;max-height:0;transition:max-height .24s ease}
.sb-sub.open{max-height:900px}
.sb-sub .sb-item{
  height:34px;padding-left:34px;font-size:13px;font-weight:400;color:var(--t-2);
}
.sb-sub .sb-item.active{background:var(--c-primary-light);color:var(--c-primary);font-weight:500;box-shadow:none}
.sb-sub .sb-item.active::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:var(--c-primary);border-radius:0 3px 3px 0;
}
.sb-sub .sb-item{position:relative}

/* 角标 */
.sb-item .badge{
  flex:0 0 auto;min-width:18px;height:18px;line-height:18px;text-align:center;
  padding:0 5px;border-radius:9px;background:var(--c-danger);color:#fff;
  font-size:11px;font-weight:600;
}
.sb-item .badge.dot{
  min-width:7px;width:7px;height:7px;padding:0;border-radius:50%;font-size:0;
}

/* ---------- 顶栏 ---------- */
.topbar{
  position:fixed;left:var(--sidebar-w);right:0;top:0;height:var(--topbar-h);
  background:#fff;border-bottom:1px solid var(--bd-2);
  display:flex;align-items:center;gap:14px;padding:0 18px;z-index:90;
}
.tb-crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--t-3)}
.tb-crumb .cur{color:var(--t-1);font-weight:500}
.tb-crumb svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.tb-act{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--t-2);cursor:pointer;padding:5px 2px;border-radius:6px}
.tb-act:hover{color:var(--c-primary)}
.tb-act svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.tb-avatar{
  width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#2e6be6,#5b90f5);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
}
.tb-user{display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
.tb-user .nm{font-size:13px;color:var(--t-1);white-space:nowrap}
.tb-user > svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;flex:0 0 auto}

/* ---------- 标签栏 ---------- */
.tabbar{
  position:fixed;left:var(--sidebar-w);right:0;top:var(--topbar-h);height:var(--tabbar-h);
  background:#fff;border-bottom:1px solid var(--bd-2);
  display:flex;align-items:center;gap:6px;padding:0 14px;z-index:89;
  overflow-x:auto;overflow-y:hidden;
}
.tabbar::-webkit-scrollbar{height:0}
.tab{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  height:26px;padding:0 10px;border-radius:var(--radius-sm);
  font-size:12.5px;color:var(--t-2);background:#fff;border:1px solid var(--bd-1);
  cursor:pointer;transition:.15s;user-select:none;
}
.tab:hover{border-color:#c3cbe0;color:var(--c-primary)}
.tab.active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.tab .x{width:13px;height:13px;display:flex;align-items:center;justify-content:center;border-radius:50%;opacity:.6}
.tab .x:hover{background:rgba(0,0,0,.12);opacity:1}
.tab.active .x:hover{background:rgba(255,255,255,.25)}
.tab .x svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ---------- 主内容 ---------- */
.main{
  margin-left:var(--sidebar-w);
  padding:calc(var(--topbar-h) + var(--tabbar-h)) 0 0;
  min-height:100vh;
}
.main-inner{padding:16px 16px 76px}

/* 页面标题带 */
.pg-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pg-title{font-size:17px;font-weight:600;color:var(--t-1)}
.pg-desc{font-size:12.5px;color:var(--t-3)}

/* 页面级 Tab */
.ptabs{display:flex;align-items:center;gap:26px;border-bottom:1px solid var(--bd-1);margin-bottom:16px}
.ptab{
  position:relative;padding:0 2px 11px;font-size:13.5px;color:var(--t-2);
  cursor:pointer;white-space:nowrap;transition:color .15s;
}
.ptab:hover{color:var(--c-primary)}
.ptab.active{color:var(--c-primary);font-weight:600}
.ptab.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--c-primary);border-radius:2px;
}
.ptab .cnt{color:var(--t-3);font-size:12px;margin-left:3px}

/* 面包屑分隔 */
.sep{color:var(--t-4)}