/* ================= 经典后台布局：顶部矩形导航栏 + 左侧功能面板 =================
   只做骨架与顶部栏，不改 styles.css（视觉主文件归 Codex）。
   ⚠️ styles.css 只给 button 设了字体与光标、**没重置背景** →
      本文件里所有自定义按钮都必须显式写 background/border。 */

/* ---------- 骨架：上下两段，下面再左右分栏 ---------- */
.app { flex-direction: column; gap: 0; padding: 0; }
.app-body {
  flex: 1; min-height: 0; display: flex; gap: 16px;
  padding: 14px 16px 16px;
}
.sidebar { height: 100%; min-height: 0; }
.content-stage { height: 100%; }

/* ---------- 顶部：从左到右贯穿的矩形导航栏 ---------- */
.topbar {
  flex: none; position: relative; z-index: 30;
  display: flex; align-items: center; gap: 26px;
  height: 64px; padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(5, 42, 55, .62), rgba(4, 34, 46, .52));
  box-shadow: 0 10px 26px rgba(0, 16, 24, .3);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
}
.topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }
.topbar-brand .brand-logo { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; padding: 3px; }
.topbar-name {
  font-size: 13px; font-weight: 650; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: rgba(235, 250, 251, .92);
}
/* 品牌与标签之间的竖分隔线（更接近传统后台） */
.topbar-brand::after {
  content: ''; width: 1px; height: 22px; margin-left: 6px;
  background: rgba(255, 255, 255, .16);
}

/* ---------- 板块标签（平铺矩形 + 底部下划线） ---------- */
.topbar-tabs {
  display: flex; align-items: stretch; align-self: stretch;
  min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none;
}
.topbar-tabs::-webkit-scrollbar { display: none; }

.app-tab {
  position: relative; flex: none;
  display: flex; align-items: center; gap: 8px;
  height: 100%; padding: 0 18px;
  border: 0; border-radius: 0; background: transparent;
  color: rgba(203, 231, 235, .68);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background .18s, color .18s;
}
.app-tab .ic {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: color .18s, filter .18s;
}
.app-tab::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 2px; border-radius: 2px 2px 0 0;
  background: transparent; transition: background .18s, box-shadow .18s;
}
.app-tab:hover { color: rgba(238, 252, 252, .96); background: rgba(255, 255, 255, .07); }
.app-tab.active { color: #eafcfa; background: rgba(84, 218, 207, .1); }
.app-tab.active .ic { color: #7fe3d8; filter: drop-shadow(0 0 6px rgba(127, 227, 216, .45)); }
.app-tab.active::after {
  background: #45e0cf;
  box-shadow: 0 0 10px rgba(69, 224, 207, .85);
}

/* ---------- 顶部右侧：账户区 ---------- */
.topbar-user {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .14);
}
.tu-ic {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: rgba(127, 227, 216, .72); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.tu-name {
  max-width: 130px; font-size: 12.5px; color: rgba(203, 231, 235, .82);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tu-btn {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: rgba(203, 231, 235, .74);
  transition: background .16s, color .16s, border-color .16s;
}
.tu-btn svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.tu-btn:hover { background: rgba(255, 255, 255, .13); color: #eafcfa; border-color: rgba(255, 255, 255, .22); }
.tu-btn.tu-danger:hover { color: #ffb3b6; background: rgba(255, 120, 120, .14); border-color: rgba(255, 120, 120, .32); }

/* ---------- 左侧面板标题 ---------- */
.side-head {
  flex: none; display: flex; align-items: center; gap: 7px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.side-head::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: #54d8cf; box-shadow: 0 0 8px rgba(84, 216, 207, .9);
}
.side-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  color: rgba(196, 236, 238, .66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 菜单超长时在面板内滚动；条目略紧凑，账务 12 项常见屏高能一屏放下 */
.sidebar .nav { min-height: 0; padding: 10px 10px 12px; gap: 4px; overflow-y: auto; scrollbar-width: thin; }
.sidebar .nav-item { padding: 10px 13px; }

/* ---------- 窄屏：顶部只留图标 ---------- */
@media (max-width: 860px) {
  .topbar { height: 56px; gap: 12px; padding: 0 12px; }
  .topbar-name, .topbar-brand::after { display: none; }
  .app-body { gap: 10px; padding: 10px; }
  .app-tab { padding: 0 12px; }
  .app-tab span { display: none; }
  .app-tab .ic { width: 18px; height: 18px; }
  .app-tab::after { left: 8px; right: 8px; }
  .side-head { display: none; }
  .tu-name { display: none; }
  .topbar-user { gap: 6px; padding-left: 10px; }
  .tu-btn { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-tab, .app-tab .ic, .app-tab::after { transition: none; }
}