/* ============================================================
   应用外壳：侧边栏 / 顶栏 / 内容区 / 状态栏
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html, body, #app { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);   /* 正文基准 15px，全站默认值；不要再往下降 */
  line-height: var(--lh-normal);
  color: var(--ink-800);
  background: var(--ink-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: content-box; }

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100%;
}

/* ==================== 侧边栏 ==================== */
.sidebar {
  background: linear-gradient(180deg, var(--brand-900) 0%, var(--brand-800) 100%);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.sidebar::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);            /* 与顶栏同高：两侧底边连成一条直线 */
  flex: none;
  padding: 0 var(--sp-5);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

/* 品牌图标＝易企检官方应用图标（绿底圆角方块，图形与底色都在 SVG 里）。
   容器只负责尺寸 / 圆角裁切 / 投影，不再叠渐变底与文字。
   🔴 圆角用 **22%** 而不是写死 px：图标自身 rx=28/128=21.875%，
   容器只有跟着这个比例缩放才与图标圆角严丝合缝；写死 8px 在 30px 上是 26.7%（偏尖），
   在 34px 上又是 23.5%（偏圆）—— 这就是「图标看上去不规范」的真正来源。
   同理 SVG 的 size 必须等于这里定义的 30px，否则 overflow:hidden 会裁掉一圈。 */
.brand__mark {
  width: 30px;
  height: 30px;
  border-radius: 22%;
  overflow: hidden;
  display: block;
  flex: none;
  line-height: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.brand__mark svg { display: block; }

.brand__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--white);
  letter-spacing: 0.3px;
}
.brand__sub {
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.2px;
}

.nav { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-3) var(--sp-5); }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); background-clip: content-box; }

.nav__group { margin-bottom: var(--sp-5); }

.nav__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.36);
  padding: 0 var(--sp-3) var(--sp-2);
  text-transform: uppercase;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 7px var(--sp-3);
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-sm);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  position: relative;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__item:hover { background: rgba(255, 255, 255, 0.07); color: var(--white); }

/* 导航项右侧的临时标记（如"试用"）：撑在文字右边，不参与左侧图标对齐 */
.nav__tag {
  margin-left: auto;
  flex: none;
  font-size: var(--fs-2xs);
  line-height: 1.7;
  padding: 0 5px;
  border-radius: var(--r-sm);
  background: rgba(200, 154, 69, 0.22);
  border: 1px solid rgba(200, 154, 69, 0.4);
  color: var(--accent-300);
}

.nav__item.is-active {
  background: rgba(255, 255, 255, 0.11);
  color: var(--white);
  font-weight: var(--fw-medium);
}
.nav__item.is-active::before {
  content: "";
  position: absolute;
  left: -var(--sp-3);
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-500);
}

.nav__icon { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.nav__item.is-active .nav__icon { opacity: 1; color: var(--accent-300); }

/* ---------- 侧栏底部：设置入口 ----------
   ★ 2026-10-08 老板定：设置要**和上面的导航项长一样**（左图标右文字、左侧对齐），
     不再是一个孤零零的齿轮图标。所以这里直接复用 .nav__item，
     只在外面加一点上间距，与上方「我的」分组拉开。
     （消息提醒与反馈已挪到顶栏，见下方 .appbar__tools。） */
.sidebar__foot {
  flex: none;
  padding: var(--sp-3) var(--sp-4) 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar__setting { margin-top: 2px; }

/* ==================== 居中提示反馈（未接入后端的能力） ==================== */
.app-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 12px);
  background: rgba(20, 26, 24, 0.92); color: var(--white);
  font-size: var(--fs-xs); padding: 8px 16px; border-radius: var(--r-md);
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 99;
}
.app-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==================== 顶部常驻栏 ====================
   2026-10-05 定：左边全站唯一的面包屑，右边只有人员信息。
   ★ 2026-10-08 老板调整：消息提醒与反馈从侧栏底部挪到顶栏、放在人员信息左侧。
     顶栏现在的口径是「我在哪 + 有什么信儿 + 我是谁」——
     侧栏底部只留齿轮（设置）。别按旧规则再把它挪回侧栏。 */
.appbar {
  flex: none;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  background: var(--white);
  border-bottom: var(--border);
  position: relative;
  z-index: 30;
}
.appbar__grow { flex: 1; min-width: 0; }

/* ---------- 顶栏工具（消息 / 反馈） ---------- */
.appbar__tools { display: flex; align-items: center; gap: 2px; flex: none; }
.appbar__tool {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; border-radius: var(--r-md);
  background: none; color: var(--ink-500); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.appbar__tool:hover { background: var(--ink-100); color: var(--ink-900); }
/* 未读红点：右上角，不带数字（法规更新不是消息队列，标个点够用） */
.appbar__dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger-500, #e24b4a);
  border: 1.5px solid var(--white);
}

/* ---------- 面包屑（全站唯一一套，由 crumb.js 渲染） ---------- */
.app-crumbs { display: flex; align-items: center; gap: 1px; min-width: 0; flex-wrap: nowrap; }
.app-crumbs__i {
  display: inline-flex; align-items: center; padding: 5px 9px; border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--ink-500); white-space: nowrap;
  border: none; background: none; text-align: left;
  max-width: 30ch; overflow: hidden; text-overflow: ellipsis;
}
/* 首级文字与内容区左边缘对齐：顶栏 20px + 首级 10px = 内容区 30px */
.app-crumbs__i:first-child { padding-left: 10px; }
button.app-crumbs__i { cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
button.app-crumbs__i:hover { background: var(--ink-100); color: var(--ink-900); }
/* 当前页（末级）与分组名都不可点：末级加粗，分组名维持灰字、无悬停态 */
.app-crumbs__i.is-cur { color: var(--ink-900); font-weight: var(--fw-semibold); max-width: 44ch; }
.app-crumbs__sep { flex: none; color: var(--ink-300); margin: 0 1px; }

/* ---------- 顶栏右侧人员胶囊 ---------- */
.appbar__user {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 4px 9px 4px 4px; border-radius: var(--r-md);
  cursor: pointer; flex: none; transition: background var(--t-fast);
}
.appbar__user:hover { background: var(--ink-100); }
.ubox__av {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--ink-100); color: var(--ink-600);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.3px;
}
.ubox__av.is-on { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: var(--white); }
.ubox__av.is-on.is-adm { background: linear-gradient(135deg, var(--accent-600), var(--accent-700)); }
.ubox__av.is-warn { background: var(--danger-100); color: var(--danger-700); }
.ubox__meta { display: flex; flex-direction: column; line-height: 1.28; min-width: 0; }
.ubox__nm { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-800); white-space: nowrap; }
.ubox__og {
  font-size: var(--fs-2xs); color: var(--ink-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 124px;
}
.appbar__user > svg { color: var(--ink-400); flex: none; }

/* ==================== 主区域 ==================== */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--ink-50);
}

/* ==================== 页面容器 ==================== */
.viewport { flex: 1; overflow-y: auto; min-height: 0; scroll-behavior: smooth; }

/* 2026-10-05 老板定：页面一律自适应铺满，宽屏下右侧不留白 —— 去掉 1680px 总宽上限。
   （原来这个上限让所有 .page 页在 1920/2560 屏上右侧空出一大块。） */
.page { padding: var(--sp-6) 30px var(--sp-9); }

.page__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.page__title-wrap { min-width: 0; }
.page__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.2px;
  color: var(--ink-900);
  line-height: var(--lh-tight);
}
.page__desc {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  margin-top: var(--sp-2);
  max-width: 860px;
}
.page__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); flex: none; }

/* ---------- 左侧导航的次数徽章（2026-10-09 老板两次反馈后定稿） ----------
   第一版是彩色胶囊 + 「剩 10 次」全文，老板反馈：
     「徽章设计的太明显了，我总感觉有些瞧不起人的意思」。

   🔴 诊断：问题不在配色，在**存在感和措辞**。
     六个彩色胶囊在深色侧栏里抢视线，侧栏变成一块"额度看板"；
     「剩 10 次」这个说法等于系统一直在清点用户 —— 像被盯着用。

   定稿三条（改前必读）：
     ① **充足态几乎隐形**：无底色、无描边、低对比度的纯数字，贴在最右侧。
        用户扫一眼知道"还有"，但不会觉得被提醒。
     ② **只有真的该提醒时才亮**：剩 1 次给暖色、用尽给红色。
        那时候提前告知是服务（定稿铁律②：用户该提前知道这是最后一次）。
     ③ **会员不显示**（plan.js 那边已返回空文本），不宣告限制的存在。

   ⚠️ 数字与文字用等宽数字字形（font-variant-numeric），
      否则 10→9 时宽度跳动，侧栏数字会左右抖。

   🔴 为什么每个状态都要写成 `.nav__item .nav__qb.xxx` 两层以上：
     `.qb--out` 这套浅色胶囊定义在 **account.css** 里，而 account.css 排在
     index.html 样式表的**最后一位**（见 index.html 第 21 行）。
     同优先级下后加载的赢 —— 只写 `.nav__qb.qb--out` 会被它覆盖，
     结果就是侧栏里仍顶着个粉底胶囊（实测踩到）。加一层 `.nav__item` 抬优先级。 */
.nav__item .nav__qb {
  margin-left: auto;
  flex: none;
  padding: 0 2px;
  font-size: var(--fs-2xs);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-sm);
  /* 充足：几乎隐形 —— 只是一个安静的编号 */
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.42);
  font-weight: var(--fw-medium);
}
/* 同一个导航项既有"试用"标签又有徽章时，试用在前、徽章贴最右 */
.nav__tag + .nav__qb { margin-left: var(--sp-2); }

/* 剩 1 次：第一次也是唯一一次给暖色。仍旧不铺底色，只改字色 + 轻微加粗 */
.nav__item .nav__qb.qb--low {
  background: transparent;
  border: 0;
  color: #e8b768;
  font-weight: var(--fw-semibold);
}
/* 用尽：必须显眼（此时用户点下去会被拦，藏起来就是"点了才报错"） */
.nav__item .nav__qb.qb--out {
  background: transparent;
  border: 0;
  color: #ef9a9a;
  font-weight: var(--fw-semibold);
}
/* 不限次：不显示（会员），留一条兜底样式防止意外渲染出裸文字 */
.nav__item .nav__qb.qb--unlimit { display: none; }
/* 当前项：数字跟着提亮，否则"正在这一页"与"额度不足"两个信号互相盖过 */
.nav__item.is-active .nav__qb { color: rgba(255, 255, 255, 0.78); }
.nav__item.is-active .nav__qb.qb--low { color: #f0c882; }
.nav__item.is-active .nav__qb.qb--out { color: #f5b3b3; }