/* ════════════════════════════════════════════════════════════════════════
   bz.css — 白栈设计系统（照 Lovart 的令牌体系，2026-11-05）
   一套文件，替代之前 7 层补丁。

   ── 保留（一个不少）──────────────────────────────────────────────────
   logo、名字「白栈」、全部功能、图库、密钥、页面结构、业务逻辑、JS。
   本文件只改「视觉形态」：颜色 / 字号 / 圆角 / 边框 / 间距观感 / 按钮形态。
   不改：display / position / grid / flex / 交互逻辑 / DOM 结构。

   ── 令牌来源（全部实测自 lovart.art 的 234 个设计变量）──────────────
   圆角：4 / 6 / 8 / 10 / 12 / 16 / round（8px 主力）
   字号：heading 18/16/14/13 + body 14/13/12/11，每档带 fw + lh
   灰阶：文字 90% / 55% / 30% 黑
   边框：7% / 10% / 15% 黑（不是灰色，是黑色透明度）
   底色：body #fff / canvas #f5f5f5 / overlay 4% / hover 6% / active 8%
   主按钮：#2c2c2c（不是纯黑）
   强调色 9 色，每色带 10% 透明 surface 版

   加载顺序：必须在 v10.css 之后（同特异性靠顺序覆盖）
   ════════════════════════════════════════════════════════════════════════ */

/* ── 0. 令牌 ─────────────────────────────────────────────────────────── */
html[data-ui="crisp"] {
  /* 文字 4 级 */
  --bz-t1: #000000e6;   /* 90% 主文字 */
  --bz-t2: #0000008c;   /* 55% 次级 */
  --bz-t3: #0000004d;   /* 30% 辅助 */
  --bz-t4: #00000026;   /* 15% 极弱 */

  /* 边框 3 级 */
  /* v369（M6）：统一到 --line 同灰阶（原 #00000012/1a/26 是第三套描边体系） */
  --bz-l1: #ededed;
  --bz-l2: #ededed;
  --bz-l3: #ededed;   /* v369 M6：归到 --line 灰阶第 1 档；交互态改由背景色区分 */

  /* 底色 */
  --bz-bg:        #fff;
  --bz-bg-canvas: #f5f5f5;
  --bz-ov:        #0000000a;   /* 4% */
  --bz-ov-h:      #0000000f;   /* 6% hover */
  --bz-ov-a:      #00000014;   /* 8% active/选中 */

  /* 主按钮（不是纯黑） */
  --bz-inv:      #2c2c2c;
  --bz-inv-h:    #4a4a4a;
  --bz-inv-a:    #1a1a1a;

  /* 强调色（9 色，各带 10% surface） */
  --bz-blue:   #4368e3;  --bz-blue-s:   #4368e31a;
  --bz-teal:   #24a99c;  --bz-teal-s:   #24a99c1a;
  --bz-amber:  #e9931c;  --bz-amber-s:  #e9931c1a;
  --bz-coral:  #ff6f61;  --bz-coral-s:  #ff6f611a;
  --bz-violet: #9b7cff;  --bz-violet-s: #9b7cff1a;
  --bz-rose:   #e94486;  --bz-rose-s:   #e944861a;
  --bz-lime:   #8acb3a;  --bz-lime-s:   #8acb3a1a;
  --bz-cyan:   #24b6e6;  --bz-cyan-s:   #24b6e61a;
  --bz-slate:  #afb9cf;  --bz-slate-s:  #afb9cf1a;

  /* 状态色 */
  --bz-ok: #2ecc71; --bz-warn: #f28a2e; --bz-danger: #e74c3c;

  /* 圆角 7 档（8px 主力） */
  --bz-r4: 4px; --bz-r6: 6px; --bz-r8: 8px;
  --bz-r10: 10px; --bz-r12: 12px; --bz-r16: 16px;
  --bz-round: 9999px;

  /* 字号 8 档（每档带行高） */
  --bz-h-lg: 18px; --bz-h-lg-lh: 26px;
  --bz-h-md: 16px; --bz-h-md-lh: 24px;
  --bz-h-sm: 14px; --bz-h-sm-lh: 22px;
  --bz-h-xs: 13px; --bz-h-xs-lh: 20px;
  --bz-b-lg: 14px; --bz-b-lg-lh: 22px;
  --bz-b-md: 13px; --bz-b-md-lh: 20px;
  --bz-b-sm: 12px; --bz-b-sm-lh: 18px;
  --bz-b-xs: 11px; --bz-b-xs-lh: 16px;

  /* 阴影（只有浮层用） */
  --bz-sh-1: 0 1px 2px rgba(0,0,0,.04);
  --bz-sh-2: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --bz-sh-3: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
  --bz-sh-4: 0 24px 64px rgba(0,0,0,.16), 0 8px 20px rgba(0,0,0,.08);

  /* 缓动 */
  --bz-ease: cubic-bezier(.16,1,.3,1);
  --bz-dur: .18s;
}

/* ── 1. 全局 ─────────────────────────────────────────────────────────── */
html[data-ui="crisp"] body {
  background: var(--bz-bg-canvas);
  color: var(--bz-t2);
  font-size: var(--bz-b-md);
  line-height: var(--bz-b-md-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum";
}
html[data-ui="crisp"] #main { background: transparent; }

/* ── 2. 侧栏：图标 + 文字，h36，选中 8% 浅灰块 ─────────────────────────── */
html[data-ui="crisp"] #sidebar {
  background: var(--bz-bg);
  border-right: 1px solid var(--bz-l1);
}
html[data-ui="crisp"] #sidebar .nav-item {
  height: 36px;
  border-radius: var(--bz-r8);
  font-size: var(--bz-h-md);
  font-weight: 400;
  color: var(--bz-t1);
  letter-spacing: -.01em;
  transition: background var(--bz-dur) var(--bz-ease),
              color var(--bz-dur) var(--bz-ease);
}
html[data-ui="crisp"] #sidebar .nav-item:hover {
  background: var(--bz-ov-h);
  color: var(--bz-t1);
}
html[data-ui="crisp"] #sidebar .nav-item.active,
html[data-ui="crisp"] #sidebar .nav-item.on {
  background: var(--bz-ov-a);
  color: var(--bz-t1);
  font-weight: 400;       /* 不加粗，Lovart 也不加粗 */
  box-shadow: none;
}
html[data-ui="crisp"] #sidebar .nav-item .ic {
  color: var(--bz-t2);
  opacity: 1;
}
html[data-ui="crisp"] #sidebar .nav-item.active .ic { color: var(--bz-t1); }

/* 侧栏底部：法律链接更弱 */
html[data-ui="crisp"] .sidebar-legal {
  font-size: var(--bz-b-xs);
  color: var(--bz-t3);
  line-height: var(--bz-b-xs-lh);
}
html[data-ui="crisp"] .sidebar-legal a { color: var(--bz-t3); }
html[data-ui="crisp"] .sidebar-legal a:hover { color: var(--bz-t2); }

/* ── 3. 顶栏 ─────────────────────────────────────────────────────────── */
html[data-ui="crisp"] #topbar {
  background: var(--bz-bg);
  border-bottom: 1px solid var(--bz-l1);
  box-shadow: none;
}
html[data-ui="crisp"] #topbar .brand-word {
  font-size: var(--bz-h-md);
  font-weight: 500;
  color: var(--bz-t1);
  letter-spacing: -.02em;
}

/* 余额胶囊 */
html[data-ui="crisp"] #topbar .pill,
html[data-ui="crisp"] #topbar .credits {
  background: var(--bz-ov);
  border: 0;
  border-radius: var(--bz-round);
  font-size: var(--bz-b-md);
  color: var(--bz-t1);
  font-variant-numeric: tabular-nums;
  height: 30px;
  padding: 0 12px;
}

/* 顶栏按钮：ghost 形态 */
html[data-ui="crisp"] #topbar .btn,
html[data-ui="crisp"] #topbar button {
  height: 32px;
  border-radius: var(--bz-r8);
  font-size: var(--bz-b-lg);
  font-weight: 400;
  color: var(--bz-t1);
  border: 1px solid var(--bz-l2);
  background: var(--bz-bg);
  transition: background var(--bz-dur) var(--bz-ease),
              border-color var(--bz-dur) var(--bz-ease);
}
html[data-ui="crisp"] #topbar .btn:hover,
html[data-ui="crisp"] #topbar button:hover {
  background: var(--bz-ov-h);
  border-color: var(--bz-l3);
}

/* ── 4. 模式按钮 → 药丸行（Lovart 的筛选药丸） ──────────────────────────── */
html[data-ui="crisp"] .gen-mode-bar {
  margin-bottom: 16px;
}
html[data-ui="crisp"] .segmented {
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
html[data-ui="crisp"] .segmented > button {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--bz-round);
  background: var(--bz-bg);
  border: 1px solid var(--bz-l2);
  color: var(--bz-t1);
  font-size: var(--bz-h-md);
  font-weight: 400;
  line-height: 30px;
  box-shadow: none;
  white-space: nowrap;
  transition: background var(--bz-dur) var(--bz-ease),
              border-color var(--bz-dur) var(--bz-ease),
              color var(--bz-dur) var(--bz-ease);
}
html[data-ui="crisp"] .segmented > button:hover {
  background: var(--bz-ov-h);
  border-color: var(--bz-l3);
}
/* 选中：8% 浅灰实底（Lovart 的「为你推荐」就是这种，不反白） */
html[data-ui="crisp"] .segmented > button.active {
  background: var(--bz-ov-a);
  border-color: var(--bz-l3);
  color: var(--bz-t1);
  font-weight: 500;
  box-shadow: none;
}
html[data-ui="crisp"] .gen-mode-bar .hint {
  font-size: var(--bz-b-md);
  color: var(--bz-t3);
  margin-top: 10px;
  display: block;
}

/* ── 5. 卡片：白底 + r12 + 7% 边，无阴影 ───────────────────────────────── */
html[data-ui="crisp"] .card {
  background: var(--bz-bg);
  border: 1px solid var(--bz-l1);
  border-radius: var(--bz-r12);
  box-shadow: none;
  transition: border-color var(--bz-dur) var(--bz-ease);
}
html[data-ui="crisp"] .card:hover { border-color: var(--bz-l2); }

html[data-ui="crisp"] .card-title {
  font-size: var(--bz-h-sm);
  font-weight: 500;
  color: var(--bz-t1);
  letter-spacing: -.012em;
  line-height: var(--bz-h-sm-lh);
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 14px;
}
html[data-ui="crisp"] .card-title .hint {
  font-size: var(--bz-b-sm);
  color: var(--bz-t3);
  font-weight: 400;
  margin-left: 8px;
}

/* ── 6. 主按钮 / 次按钮 ────────────────────────────────────────────────── */
html[data-ui="crisp"] .btn {
  height: 44px;
  border-radius: var(--bz-r12);
  font-size: var(--bz-h-md);
  font-weight: 500;
  letter-spacing: -.01em;
  transition: background var(--bz-dur) var(--bz-ease),
              box-shadow var(--bz-dur) var(--bz-ease),
              transform .12s var(--bz-ease);
}
html[data-ui="crisp"] .btn.primary,
html[data-ui="crisp"] .btn-primary {
  background: var(--bz-inv);
  border: 1px solid var(--bz-inv);
  color: #fff;
  box-shadow: none;
}
html[data-ui="crisp"] .btn.primary:hover {
  background: var(--bz-inv-h);
  border-color: var(--bz-inv-h);
}
html[data-ui="crisp"] .btn.primary:active {
  background: var(--bz-inv-a);
  transform: scale(.99);
}
html[data-ui="crisp"] .btn:not(.primary):not(.danger):not(.ghost) {
  background: var(--bz-bg);
  border: 1px solid var(--bz-l2);
  color: var(--bz-t1);
}
html[data-ui="crisp"] .btn:not(.primary):not(.danger):not(.ghost):hover {
  background: var(--bz-ov-h);
  border-color: var(--bz-l3);
}

/* ── 7. 表单：输入框凹陷感 ─────────────────────────────────────────────── */
html[data-ui="crisp"] input[type="text"],
html[data-ui="crisp"] input[type="number"],
html[data-ui="crisp"] input[type="search"],
html[data-ui="crisp"] input:not([type]),
html[data-ui="crisp"] textarea,
html[data-ui="crisp"] select {
  background: var(--bz-bg-canvas);
  border: 1px solid var(--bz-l1);
  border-radius: var(--bz-r8);
  color: var(--bz-t1);
  font-size: var(--bz-b-lg);
  line-height: var(--bz-b-lg-lh);
  transition: border-color var(--bz-dur) var(--bz-ease),
              background var(--bz-dur) var(--bz-ease);
}
html[data-ui="crisp"] input:focus,
html[data-ui="crisp"] textarea:focus,
html[data-ui="crisp"] select:focus {
  outline: none;
  background: var(--bz-bg);
  border-color: var(--bz-l3);
}

/* ── 8. 上传区：大虚线 + 柔底 ─────────────────────────────────────────── */
html[data-ui="crisp"] #dropZone,
html[data-ui="crisp"] .drop-zone {
  border: 1.5px dashed var(--bz-l2);
  border-radius: var(--bz-r12);
  background: var(--bz-bg-canvas);
  transition: border-color var(--bz-dur) var(--bz-ease),
              background var(--bz-dur) var(--bz-ease);
}
html[data-ui="crisp"] #dropZone:hover,
html[data-ui="crisp"] .drop-zone:hover {
  border-color: var(--bz-l3);
  background: var(--bz-bg);
}
html[data-ui="crisp"] .dz-txt {
  font-size: var(--bz-h-md);
  font-weight: 500;
  color: var(--bz-t1);
}
html[data-ui="crisp"] .dz-sub {
  font-size: var(--bz-b-md);
  color: var(--bz-t3);
}

/* ── 9. 底部生成条：浮动 + 圆角 + 阴影 ─────────────────────────────────── */
html[data-ui="crisp"] #genDock {
  background: var(--bz-bg);
  border-top: 1px solid var(--bz-l1);
  box-shadow: 0 -2px 12px rgba(0,0,0,.05);
  border-radius: 0;
}

/* ── 10. 表格（成本明细用） ────────────────────────────────────────────── */
html[data-ui="crisp"] .cst-tbl th {
  background: transparent;
  font-size: var(--bz-b-sm);
  font-weight: 500;
  color: var(--bz-t3);
  letter-spacing: .02em;
  border-bottom: 1px solid var(--bz-l1);
}
html[data-ui="crisp"] .cst-tbl td {
  font-size: var(--bz-b-md);
  color: var(--bz-t2);
  border-bottom: 1px solid var(--bz-l1);
}
html[data-ui="crisp"] .cst-tbl tbody tr:hover { background: var(--bz-ov); }
html[data-ui="crisp"] .cst-money,
html[data-ui="crisp"] .cst-num { font-variant-numeric: tabular-nums; }

html[data-ui="crisp"] .cst-kpi {
  background: var(--bz-bg-canvas);
  border: 1px solid var(--bz-l1);
  border-radius: var(--bz-r10);
}
html[data-ui="crisp"] .cst-kpi b {
  font-size: 22px;
  font-weight: 500;
  color: var(--bz-t1);
  letter-spacing: -.03em;
  line-height: 1.2;
}
html[data-ui="crisp"] .cst-kpi span {
  font-size: var(--bz-b-md);
  color: var(--bz-t3);
  line-height: var(--bz-b-md-lh);
}

/* ── 11. 滚动条：细、圆 ──────────────────────────────────────────────── */
html[data-ui="crisp"] * {
  scrollbar-width: thin;
  scrollbar-color: #d4d4d4 transparent;
}
html[data-ui="crisp"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-ui="crisp"] ::-webkit-scrollbar-track { background: transparent; }
html[data-ui="crisp"] ::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: var(--bz-round);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* ── 12. 弹窗 / 遮罩 ──────────────────────────────────────────────────── */
html[data-ui="crisp"] .mask,
html[data-ui="crisp"] .modal-mask,
html[data-ui="crisp"] .overlay,
html[data-ui="crisp"] .backdrop,
html[data-ui="crisp"] .ann-mask {
  background: #0006;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
html[data-ui="crisp"] .modal,
html[data-ui="crisp"] .dialog,
html[data-ui="crisp"] .ann-box,
html[data-ui="crisp"] .ann-mask > div {
  border-radius: var(--bz-r16);
  border: 1px solid var(--bz-l1);
  box-shadow: var(--bz-sh-4);
}
html[data-ui="crisp"] .ann-mask h2,
html[data-ui="crisp"] .ann-title {
  font-size: var(--bz-h-lg);
  font-weight: 500;
  color: var(--bz-t1);
  letter-spacing: -.02em;
}
html[data-ui="crisp"] .ann-mask p,
html[data-ui="crisp"] .ann-mask li {
  font-size: var(--bz-b-lg);
  line-height: 1.7;
  color: var(--bz-t2);
}

/* ── 13. 统计条（#adminStrip）：每项小卡 ────────────────────────────────── */
html[data-ui="crisp"] #adminStrip {
  background: var(--bz-bg);
  border: 1px solid var(--bz-l1);
  border-radius: var(--bz-r10);
  padding: 8px 12px;
  gap: 8px;
}
html[data-ui="crisp"] #adminStrip .as-item {
  background: var(--bz-bg-canvas);
  border-radius: var(--bz-r6);
  padding: 3px 9px;
  font-size: var(--bz-b-sm);
  color: var(--bz-t3);
  font-weight: 400;
}
html[data-ui="crisp"] #adminStrip .as-item b {
  font-size: var(--bz-h-md);
  font-weight: 500;
  color: var(--bz-t1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
html[data-ui="crisp"] #adminStrip .as-go {
  color: var(--bz-t2);
  font-size: var(--bz-b-sm);
  font-weight: 400;
  border-radius: var(--bz-r6);
  padding: 3px 9px;
}
html[data-ui="crisp"] #adminStrip .as-go:hover {
  background: var(--bz-ov-a);
  color: var(--bz-t1);
  text-decoration: none;
}

/* ── 14. 深色模式 ──────────────────────────────────────────────────────── */
html[data-ui="crisp"][data-theme="dark"] {
  --bz-t1: #f2f2f2e6;
  --bz-t2: #f2f2f28c;
  --bz-t3: #f2f2f24d;
  --bz-t4: #f2f2f226;
  --bz-l1: #ffffff12;
  --bz-l2: #ffffff1a;
  --bz-l3: #ffffff26;
  --bz-bg: #1a1a1a;
  --bz-bg-canvas: #101010;
  --bz-ov: #ffffff0a;
  --bz-ov-h: #ffffff0f;
  --bz-ov-a: #ffffff14;
  --bz-inv: #f2f2f2;
  --bz-inv-h: #ffffff;
  --bz-inv-a: #d4d4d4;
}
html[data-ui="crisp"][data-theme="dark"] body { background: var(--bz-bg-canvas); }
html[data-ui="crisp"][data-theme="dark"] #sidebar,
html[data-ui="crisp"][data-theme="dark"] #topbar,
html[data-ui="crisp"][data-theme="dark"] .card { background: var(--bz-bg); }
html[data-ui="crisp"][data-theme="dark"] .segmented > button { background: var(--bz-bg); color: var(--bz-t1); }
html[data-ui="crisp"][data-theme="dark"] .btn.primary { background: var(--bz-inv); color: #1a1a1a; }

/* ── 15. 手机端：侧栏滑出、单栏、药丸折行 ─────────────────────────────── */
@media (max-width: 860px) {
  html[data-ui="crisp"] .segmented > button {
    height: 32px;
    padding: 0 12px;
    font-size: var(--bz-b-lg);
  }
  html[data-ui="crisp"] .card { border-radius: var(--bz-r10); }
  html[data-ui="crisp"] #sidebar .nav-item { height: 40px; }
}