/* 计费界面重做样稿 · 平台后台
   颜色一律取初恋主题语义令牌；另外只用设计正本给的三方角色色和 Logo / 主操作的粉色。 */

:root[data-theme="chulian"] {
  --brand-pink: var(--r12-pink);
  --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Mono", ui-monospace, Menlo, Consolas, monospace;
}

:root[data-theme="chulian"][data-mode="light"] {
  --brand-pink: var(--r12-pink);
}

/* 三方角色色：算力商青、贴牌商紫；「我」用中性墨色（设计正本 3.2 修订）。 */
body[data-ui="v2"] {
  --role-supplier: #4fc3b0;
  --role-platform: var(--ink);
  --role-dealer: #c29bff;
}

:root[data-theme="chulian"][data-mode="light"] body[data-ui="v2"] {
  --role-supplier: #0f7f70;
  --role-platform: var(--ink);
  --role-dealer: #7b4fd6;
}

* { box-sizing: border-box; }
/* 外壳固定：页面本身不滚、不回弹，只有内容区（data-scroll="content"）能滚。 */
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--page-backdrop-base);
}
body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
code, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* 键盘焦点只给按钮和链接描边；输入框聚焦只变自己的边框，见下面的 .input / 搜索胶囊规则。 */
:where(button, a, [role="button"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* ---------- 外壳 ---------- */

.mockbar { position: relative; flex: none; z-index: 50; height: 40px; background: var(--surface); border-bottom: 1px solid var(--line); }
.mockbar-inner { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 16px; flex-wrap: nowrap; overflow: hidden; }
.mockbar-title { font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.08em; flex: none; }
.mockbar-note { font-size: var(--text-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-allowance {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.mock-allowance:hover { background: var(--fill-hover); color: var(--ink); }
.mock-allowance.is-on { color: var(--adopted); }

.shell { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }
/* 侧栏整列定高，内容放不下时只在导航自己里面滚。 */
.nav-col {
  display: flex;
  flex: none;
  width: 232px;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.nav {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 12px 20px;
  background: transparent;
}
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.topbar {
  flex: none;
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* 内容区是唯一能滚的地方。 */
.page-wrap {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--bg);
}
.page { width: 100%; max-width: 1280px; margin: 0 auto; padding: 26px 32px 64px; }
/* 弹窗打开时背后不滚。 */
body:has(.modal-overlay) [data-scroll="content"] { overflow: hidden; }

.logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.logo-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--brand-pink);
  color: #fff;
  font-weight: 700;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.logo-text b { font-size: 16px; }
.logo-text em { font-style: normal; font-size: 11px; color: var(--muted); }

.nav-list { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--muted);
  text-align: left;
}
.nav-item:hover { background: var(--fill-hover); color: var(--ink); }
.nav-item.is-on { background: var(--fill-selected); color: var(--ink); }
.nav-item .ico { width: 18px; height: 18px; }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 12px;
  border-top: 1px solid var(--line-subtle);
  color: var(--faint);
  font-size: var(--text-xs);
}
.nav-badge { padding: 2px 6px; border-radius: 999px; background: var(--surface-3); color: var(--muted); }

.crumb {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
}
.crumb-link {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px 6px;
  border-radius: 6px;
}
.crumb-link:hover { background: var(--fill-hover); color: var(--ink); }
.crumb-sep { color: var(--faint); }
.crumb-now { color: var(--ink); padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; }
.topbar-spacer { flex: 1; }
.who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  flex: none;
}
.avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  font-weight: 600;
}
.who-text { display: flex; flex-direction: column; line-height: 1.2; }
.who-text b { font-size: 12px; }
.who-text em { font-style: normal; font-size: 11px; color: var(--muted); font-family: var(--font-mono); }

/* ---------- 基础控件 ---------- */

.ico { flex: none; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--muted);
  flex: none;
}
.icon-btn:hover { background: var(--fill-hover); color: var(--ink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--ctl-h);
  padding: 0 14px;
  border: 1px solid var(--control-line);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink);
  white-space: nowrap;
}
.btn:hover { background: var(--fill-hover); }
.btn:active { background: var(--fill-pressed); }
.btn .ico { width: 15px; height: 15px; }
.btn-small { height: var(--ctl-h-sm); padding: 0 10px; font-size: var(--text-xs); }
.btn-quiet { border-color: transparent; color: var(--muted); }
.btn-quiet:hover { color: var(--ink); }
.btn-primary { background: var(--ink); color: var(--bg); border-color: transparent; }
.btn-primary:hover { background: var(--muted); }
.btn-main {
  background: var(--brand-pink);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}
.btn-main:hover { filter: brightness(1.06); background: var(--brand-pink); }

.input {
  height: var(--ctl-h);
  padding: 0 10px;
  border: 1px solid var(--control-line);
  border-radius: var(--r-control);
  background: var(--field-bg);
  color: var(--ink);
  min-width: 0;
}
/* 聚焦色用中性色（不是品牌粉，也不是状态色），只换边框，不套外圈。 */
:root[data-theme="chulian"] { --focus-neutral: var(--r12-selected-border); }
.input:focus { border-color: var(--focus-neutral); outline: none; box-shadow: none; }
.input:focus-visible { outline: none; box-shadow: none; }
.input::placeholder { color: var(--faint); }
.input-small { height: var(--ctl-h-sm); font-size: var(--text-xs); }
.textarea { height: auto; min-height: 90px; padding: 10px; resize: vertical; }

/* 分段切换：横排的一组胶囊按钮。注意不要和价格链的 .seg 段共用布局规则。 */
.seg {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  vertical-align: middle;
}
.seg-wrap { flex-wrap: wrap; }
.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ctl-h-sm);
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.seg-btn:hover { background: var(--fill-hover); color: var(--ink); }
.seg-btn.is-on { background: var(--ink); color: var(--bg); }
.seg-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.seg-small { padding: 2px; }
.seg-small .seg-btn { height: 22px; padding: 0 9px; font-size: 11px; }

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 230px;
  height: var(--ctl-h);
  padding: 0 10px;
  border: 1px solid var(--control-line);
  border-radius: var(--r-control);
  background: var(--field-bg);
  color: var(--muted);
  flex: 1 1 260px;
}
.search-box .ico { width: 15px; height: 15px; }
.search-box .input { flex: 1; height: 100%; padding: 0; border: 0; background: transparent; }
/* 搜索胶囊：聚焦只变外面这一圈的边框，里面的输入框没有自己的边框或外圈。 */
.search-box:focus-within,
.toolbar-search:focus-within { border-color: var(--focus-neutral); box-shadow: none; }
.search-box .input:focus,
.search-box .input:focus-visible,
.toolbar-search .input:focus,
.toolbar-search .input:focus-visible { outline: none; box-shadow: none; border-color: transparent; }

.check { width: 16px; height: 16px; accent-color: var(--ink); }

.switch {
  position: relative;
  width: 38px;
  height: 22px;
  flex: none;
  padding: 0;
  border: 1px solid var(--control-line);
  border-radius: 999px;
  background: var(--surface-3);
}
.switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform var(--dur-2) ease, background var(--dur-2) ease;
}
.switch.is-on { background: var(--adopted-soft); border-color: var(--adopted); }
.switch.is-on .knob { transform: translateX(16px); background: var(--adopted); }

/* ---------- 角色、标记 ---------- */

.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.role-chip-supplier { color: var(--role-supplier); }
.role-chip-platform { color: var(--ink); }
.role-chip-dealer { color: var(--role-dealer); }
.role-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.role-dot.role-supplier, .role-chip-supplier .role-dot { background: var(--role-supplier); }
.role-dot.role-platform, .role-chip-platform .role-dot { background: var(--role-platform); }
.role-dot.role-dealer, .role-chip-dealer .role-dot { background: var(--role-dealer); }

.unit-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  white-space: nowrap;
}
.tag-pending { background: var(--pending-soft); color: var(--pending); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }
.tag-ok { background: var(--adopted-soft); color: var(--adopted); }
.tag-off { background: var(--surface-3); color: var(--muted); }

.bang {
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  color: var(--surface);
  font-size: 9px;
  font-weight: 700;
  flex: none;
}
.tag-pending .bang, .banner-pending .bang { background: var(--pending); }
.tag-warn .bang, .banner-warn .bang { background: var(--warn); }

/* ---------- 页面骨架 ---------- */

.page { min-width: 0; }
.page > * + * { margin-top: 16px; }
.page-head { display: flex; align-items: flex-start; gap: 16px; }
.page-title { flex: 1; min-width: 0; }
.page-title h1 { font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-title); letter-spacing: -0.01em; }
.page-title p { margin-top: 6px; color: var(--muted); font-size: var(--text-sm); }
.page-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.panel { padding: 20px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { font-size: var(--text-lg); font-weight: 600; }
.panel-head h3 { font-size: var(--text-sm); font-weight: 500; }
.panel-head p { margin-top: 4px; font-size: var(--text-xs); }
.soft-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  flex: none;
}
.hint { margin-top: 10px; font-size: var(--text-xs); color: var(--faint); }
.muted { color: var(--muted); }
.empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: var(--text-sm);
  border: 1px dashed var(--line);
  border-radius: var(--r-control);
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface-2); min-width: 0; }
.stat-label { display: block; font-size: var(--text-xs); color: var(--muted); }
.stat-value { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; }
.stat-sub { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--faint); }
.stat-warn .stat-value { color: var(--warn); }
.stat-ok .stat-value { color: var(--adopted); }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.two-col > .card { margin-top: 0; }

/* ---------- 价格链 ---------- */

.chain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface-2);
  min-width: 0;
}
/* 价格链的段只认 .chain 的直接子元素，避免覆盖上面的分段切换 .seg。 */
.chain > .seg {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.chain > button.seg { width: 100%; cursor: pointer; -webkit-appearance: none; appearance: none; }
.chain > button.seg:hover { background: var(--fill-hover); }
.seg-go { position: absolute; top: 10px; right: 12px; color: var(--faint); font-size: 16px; line-height: 1; }
.seg-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.seg-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seg-value.is-empty { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--muted); font-weight: 400; }
.seg-unit { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-sub { font-size: var(--text-xs); color: var(--faint); }
.chain-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 0 6px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}
.chain-arrow b { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-weight: 600; }
.chain-arrow em { font-style: normal; font-size: 10px; color: var(--faint); }
.chain-arrow.is-empty { color: var(--faint); }
.lock { display: inline-flex; align-items: center; color: var(--muted); cursor: help; }
.lock .ico { width: 14px; height: 14px; }

.chain--compact { padding: 4px; border: 0; background: transparent; }
.chain--compact .seg { padding: 8px 6px; background: transparent; gap: 2px; }
.chain--compact .seg-value { font-size: 16px; }
.chain--compact .seg-unit, .chain--compact .seg-sub { font-size: 10px; }
.chain--compact .chain-arrow { min-width: 34px; padding: 0 2px; }
.chain--compact .chain-arrow b { font-size: 10px; }
.chain--compact .chain-arrow em { display: none; }
.chain--compact .role-chip { font-size: 10px; }

.chain--edit { grid-template-columns: minmax(0, 1fr) minmax(86px, auto) minmax(0, 1fr) minmax(210px, 1.25fr); }
.chain-amount { display: flex; align-items: baseline; gap: 4px; min-width: 0; width: 100%; }
.chain-amount .chain-input { flex: 1 1 auto; width: 0; min-width: 0; }
.chain-affix { flex: none; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); white-space: nowrap; }
.chain-margin { display: inline-flex; align-items: center; gap: 3px; }
.chain-input {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--control-line);
  border-radius: var(--r-control);
  background: var(--field-bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  min-width: 0;
}
.chain-input--big { font-size: 28px; }
.chain-input--tiny { width: 48px; height: 30px; padding: 0 6px; font-size: 13px; text-align: center; }
.chain-arrow--edit { min-width: 86px; }
.chain-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.chain-controls .hint { margin: 0; }

/* ---------- 价格链路页：一行一整条，平台之后分叉到每家贴牌商 ---------- */

.chain-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chain-toolbar .search-box { min-width: 240px; }
.chain-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted); }
.chain-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chain-legend .legend-arrow { color: var(--faint); font-family: var(--font-mono); }
.chain-list { display: flex; flex-direction: column; gap: 12px; }
.chain-group { position: relative; display: flex; flex-direction: column; gap: 6px; }
/* 文本模型的输入、输出两行用一条细竖线连着。 */
.chain-group--multi { padding-left: 14px; }
.chain-group--multi::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: var(--line-strong);
}
.chain-row {
  display: grid;
  grid-template-columns: minmax(168px, 1.05fr) 150px 56px 150px minmax(210px, 1.5fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  min-width: 0;
}
.chain-row.is-off { opacity: 0.55; }
.chain-model { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chain-model .vendor { width: 24px; height: 24px; }
.chain-model-text { display: flex; flex-direction: column; min-width: 0; }
.chain-name { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chain-id { font-family: var(--font-mono); font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chain-row .row-label { flex: none; margin-right: 0; }
.chain-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  text-align: left;
}
button.chain-node { cursor: pointer; }
button.chain-node:hover { background: var(--surface-3); }
.chain-node .node-label { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); }
.chain-node .node-name { font-size: var(--text-xs); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chain-node .node-price { font-family: var(--font-mono); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.chain-node .node-price em { font-style: normal; font-size: 10px; font-weight: 400; color: var(--muted); }
.chain-node .node-sub { font-size: 10px; color: var(--faint); font-family: var(--font-mono); }
.chain-node--platform .node-price { font-size: 20px; }
.chain-row.is-unpriced .chain-node {
  border-style: dashed;
  background: transparent;
}
.chain-row.is-unpriced .chain-node .node-price { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 400; color: var(--muted); }
.chain-row-actions { display: flex; justify-content: flex-end; }

/* 分叉：平台段往右生出几条线，每家贴牌商一个节点，上下排开。 */
.chain-fork { display: flex; align-items: center; min-width: 0; }
.fork-arrow { flex: none; width: 30px; text-align: center; color: var(--faint); font-family: var(--font-mono); font-size: 12px; }
.fork-nodes { position: relative; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; padding-left: 20px; }
.fork-nodes::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  bottom: 50%;
  width: 1px;
  background: var(--line-strong);
}
/* 两个及以上节点才画竖脊，单节点只留一条横线。 */
.fork-nodes[data-count="2"]::before { top: 26px; bottom: 26px; }
.fork-nodes[data-count="3"]::before { top: 26px; bottom: 26px; }
.fork-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fork-node::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 19px;
  height: 1px;
  background: var(--line-strong);
}
.fork-node:hover { background: var(--surface-3); }
.fork-node-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.fork-node-name { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fork-node-markup { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.fork-node-price { font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.fork-node-price em { font-style: normal; font-size: 10px; font-weight: 400; color: var(--muted); }
.fork-node-sub { font-size: 10px; color: var(--faint); }
.fork-empty-node {
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-control);
  color: var(--muted);
  font-size: var(--text-xs);
  text-align: center;
}
/* 模型详情里的分叉跟着平台段走，比链路页窄一些。 */
.chain--edit .chain-fork { align-self: stretch; }
.chain--edit .fork-nodes { padding-left: 18px; }
.chain--edit .fork-node::before { left: -18px; width: 17px; }
.chain--edit .fork-node { padding: 6px 9px; }
.chain--edit .fork-node-price { font-size: 14px; }

/* ---------- 实体卡 ---------- */

.entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.entity-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 16px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  cursor: pointer;
  min-width: 0;
}
.entity-card:hover { background: var(--surface-2); }
.role-bar-supplier { border-left-color: var(--role-supplier); }
.role-bar-platform { border-left-color: var(--role-platform); }
.role-bar-dealer { border-left-color: var(--role-dealer); }
.entity-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.entity-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.entity-title h3 { font-size: var(--text-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entity-sub { font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono); }
.entity-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.entity-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.entity-stat span { font-size: 11px; color: var(--muted); }
.entity-stat strong { font-family: var(--font-mono); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entity-stat em { font-style: normal; font-size: 10px; color: var(--faint); }
.entity-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line-subtle);
  font-size: var(--text-xs);
}
.go {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink);
  font-size: 18px;
  flex: none;
}

/* ---------- 模型列表 ---------- */

.models-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-right { margin-left: auto; }
.toolbar-wrap { flex-wrap: wrap; justify-content: flex-end; }

.models-layout { display: flex; align-items: flex-start; gap: 20px; }
/* 左栏筛选跟着内容区一起滚，滚到顶部就吸住。 */
.filters { position: sticky; top: 0; z-index: 3; width: 208px; flex: none; padding: 2px 0 8px; background: var(--bg); }
.filter-block + .filter-block { margin-top: 20px; }
.filter-title { display: block; font-size: var(--text-xs); color: var(--muted); font-weight: 500; margin: 0 0 6px; padding: 0 8px; }
.filter-list { display: flex; flex-direction: column; gap: 1px; }
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: left;
}
.filter-row:hover { background: var(--fill-hover); color: var(--ink); }
.filter-row.is-on { background: var(--fill-selected); border-left-color: var(--ink); color: var(--ink); }
.filter-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-count { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.filter-row.is-on .filter-count { color: var(--muted); }
.models-main { flex: 1; min-width: 0; }

.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.model-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  min-width: 0;
}
.model-card:hover { background: var(--surface-2); }
.model-card.is-off { opacity: 0.55; }
.mc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mc-title { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.model-card .vendor { width: 40px; height: 40px; }
.mc-name { min-width: 0; }
.mc-name h3 { font-size: var(--text-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-name code { display: block; margin-top: 2px; font-size: 10px; color: var(--faint); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.mc-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.unpriced-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--r-control);
  background: var(--surface-2);
}
.unpriced-block b { font-size: var(--text-sm); color: var(--warn); }
.unpriced-block p { font-size: var(--text-xs); color: var(--muted); }

/* 模型卡里的三列价格小表：列头角色圆点 + 右对齐等宽数字 + 数字下方比例 */
.mini-price { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 2px; }
.mini-price th, .mini-price td { padding: 2px 4px; border: 0; vertical-align: top; font-size: 11px; line-height: 1.25; }
.mini-price thead th { color: var(--muted); font-weight: 400; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.mini-price thead th .role-dot { display: inline-block; vertical-align: middle; margin-right: 4px; }
.mini-price tbody td, .mini-price tbody th { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
.mini-price tbody th.mp-label { text-align: left; font-family: var(--font-ui); color: var(--muted); font-size: 10px; white-space: nowrap; }
.mini-price .mp-supplier { width: 36%; }
.mini-price .mp-platform { width: 28%; }
.mini-price .mp-dealer { width: 36%; }
.mini-price--text .mp-label { width: 12%; }
.mini-price--text .mp-supplier { width: 30%; }
.mini-price--text .mp-platform { width: 26%; }
.mini-price--text .mp-dealer { width: 32%; }
.mini-price b { display: block; font-size: 12px; font-weight: 600; white-space: normal; }
.mini-price em { display: block; margin-top: 1px; font-style: normal; font-size: 10px; color: var(--faint); white-space: normal; }

.vendor {
  display: inline-block;
  width: 26px;
  height: 26px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.vendor-openai { -webkit-mask-image: url("icons/vendor-openai-chulian.svg"); mask-image: url("icons/vendor-openai-chulian.svg"); }
.vendor-google { -webkit-mask-image: url("icons/vendor-google-chulian.svg"); mask-image: url("icons/vendor-google-chulian.svg"); }
.vendor-midjourney { -webkit-mask-image: url("icons/vendor-midjourney-chulian.svg"); mask-image: url("icons/vendor-midjourney-chulian.svg"); }
.vendor-bytedance { -webkit-mask-image: url("icons/vendor-bytedance.svg"); mask-image: url("icons/vendor-bytedance.svg"); }
.vendor-anthropic { -webkit-mask-image: url("icons/vendor-anthropic-chulian.svg"); mask-image: url("icons/vendor-anthropic-chulian.svg"); }
.vendor-minimax { -webkit-mask-image: url("icons/vendor-minimax.svg"); mask-image: url("icons/vendor-minimax.svg"); }
.vendor-deepseek { -webkit-mask-image: url("icons/vendor-deepseek.svg"); mask-image: url("icons/vendor-deepseek.svg"); }
.vendor-qwen { -webkit-mask-image: url("icons/vendor-qwen.svg"); mask-image: url("icons/vendor-qwen.svg"); }
.vendor-other { -webkit-mask-image: url("icons/vendor-other.svg"); mask-image: url("icons/vendor-other.svg"); }

/* ---------- 表格 ---------- */

/* 不在这里开横向滚动，否则表头就没法相对内容区吸顶。 */
.table-wrap { width: 100%; }
table { width: 100%; border-collapse: collapse; }
/* 长表格的表头相对内容区吸顶。 */
.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 -1px 0 var(--surface);
}
/* 内容区自身有 16 的内边距；直接相对内容区吸顶时要贴着最上沿，不能留出这条缝。 */
[data-shell-content] .table-wrap thead th { top: -16px; }
/* 这三种表自己就是滚动容器（或在自己的滚动容器里），偏移量不能套内容区的内边距。 */
[data-shell-content] .pff-content .table-wrap thead th,
[data-shell-content] .pf-channel-table-wrap thead th,
[data-shell-content] .perf-table-wrap thead th { top: 0; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line-subtle); text-align: left; vertical-align: middle; font-size: var(--text-sm); }
/* 表格里所有格子垂直居中；行里的按钮、箭头、输入框、开关也跟同一行的文字居中。 */
.table th, .table td { vertical-align: middle; }
.table td .btn,
.table td .icon-btn,
.table td .input,
.table td .switch,
.table td .seg,
.table td .sp-row-ops,
.table td .sp-param-ops,
.table td .sp-range,
.table td .sp-concurrency,
.table td button,
.table td input,
.table td select { vertical-align: middle; }
/* 操作格不能直接改成 flex，否则这个 td 会脱离表格行、贴到上边线；恢复成单元格，按钮横排。 */
.table td.co-m-actions,
.table td.sp-param-ops { display: table-cell; white-space: nowrap; }
.table td.co-m-actions > .btn + .btn,
.table td.co-m-actions > .btn + .icon-btn,
.table td.co-m-actions > .icon-btn + .btn { margin-left: 6px; }
.table td.sp-param-ops > .btn + .btn { margin-left: 4px; }
/* 供货与质量：并发上限和「当前」并排，不把按钮顶到行的上半截。 */
.table .sp-concurrency-now { display: inline-block; margin-top: 0; margin-left: 6px; vertical-align: middle; }
th { color: var(--muted); font-weight: 500; font-size: var(--text-xs); white-space: nowrap; }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
tfoot td { border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); }
.model-table { min-width: 880px; }
.compact-table { min-width: 560px; }
.model-row.is-off { opacity: 0.55; }
.model-cell { white-space: nowrap; }
.model-cell .vendor { width: 22px; height: 22px; vertical-align: middle; margin-right: 6px; }
.model-cell .row-label { vertical-align: middle; }
.model-cell--sub { color: var(--muted); }
.model-cell--sub .group-rail { display: inline-block; width: 2px; height: 16px; margin: 0 8px 0 2px; background: var(--line-strong); vertical-align: middle; border-radius: 1px; }
td.unit-cell, td.supplier-cell { white-space: nowrap; }
.overview-recent .compact-table { min-width: 0; }
.model-text { display: inline-flex; flex-direction: column; vertical-align: middle; max-width: 240px; }
.model-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-id { font-size: 10px; color: var(--faint); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-label {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  margin-right: 4px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10px;
}
.cell-main { font-family: var(--font-mono); }
.cell-sub { font-size: 10px; color: var(--faint); font-family: var(--font-mono); }
.editable { cursor: text; }
.editable:hover { background: var(--fill-hover); }
.cell-input {
  width: 96px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--focus);
  border-radius: 6px;
  background: var(--field-bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-align: right;
}
.check-col { width: 34px; }
.go-col { width: 42px; text-align: right; }
.status-cell { white-space: nowrap; }
.status-cell .switch { vertical-align: middle; margin-right: 6px; }
.status-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; }
.actions-cell { white-space: nowrap; }
.actions-cell .input { width: 110px; margin-right: 6px; }

/* ---------- 总览 ---------- */

.chain-panel .chain { margin-top: 4px; }
.todo-list { display: flex; flex-direction: column; gap: 8px; }
.todo-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-control);
  background: var(--surface-2);
}
.todo-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 700;
}
.todo-text { flex: 1; min-width: 0; }
.todo-text b { font-size: var(--text-sm); }
.todo-text p { margin-top: 3px; font-size: var(--text-xs); color: var(--muted); }
.overview-split { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; align-items: stretch; }
.overview-card { display: flex; flex-direction: column; min-width: 0; }
.overview-body { flex: 1; min-width: 0; }
.overview-foot { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-subtle); }
.overview-more { border: 0; background: transparent; color: var(--muted); font-size: var(--text-xs); padding: 4px 6px; border-radius: 6px; }
.overview-more:hover { background: var(--fill-hover); color: var(--ink); }
.usage-list { display: flex; flex-direction: column; gap: 12px; }
.usage-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 2fr) auto; align-items: center; gap: 14px; font-size: var(--text-sm); }
.usage-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.usage-name span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usage-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.usage-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ink); opacity: 0.35; }
.mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; }
.mini-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  text-align: left;
  color: var(--ink);
  min-width: 0;
}
.mini-card:hover { background: var(--surface-2); }
.mini-card b { font-family: var(--font-mono); font-size: 20px; }
.mini-card span { font-size: var(--text-xs); color: var(--muted); }

/* ---------- 贴牌商 / 算力商后台 ---------- */

.date-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; }
.date-bar .input { width: 150px; }
.date-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.date-range .input { width: 150px; }

/* 贴牌商总览：公司池 / 成员额度 / 本期 三张模块卡 */
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.module-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.module-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.module-head h2 { font-size: var(--text-lg); font-weight: 600; }
.module-note { font-size: 10px; color: var(--faint); white-space: nowrap; }
.module-figure { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.module-label { font-size: var(--text-xs); color: var(--muted); }
.module-big {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-big span { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 400; color: var(--muted); }
.module-rows { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.module-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--text-sm); }
.module-rows span { color: var(--muted); }
.module-rows b { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.module-hint { font-size: 10px; color: var(--faint); }

.allowance-status { display: flex; flex-direction: column; gap: 12px; }
.allowance-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.allowance-state { font-size: var(--text-sm); color: var(--ink); }
.allowance-panel .panel-head { margin-bottom: 10px; align-items: center; }
.allowance-panel .switch { margin-top: 2px; }

.recent-list { display: flex; flex-direction: column; }
.recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line-subtle);
  white-space: nowrap;
  min-width: 0;
}
.recent-row:last-child { border-bottom: 0; }
.recent-model { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-sm); }
.recent-change { flex: none; font-size: 11px; color: var(--muted); }
.recent-time { flex: none; font-size: 10px; color: var(--faint); }

.d-type-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.d-count { font-size: var(--text-xs); }
.d-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.d-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  min-width: 0;
}
.d-card:hover { background: var(--surface-2); }
.d-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.d-card .vendor { width: 34px; height: 34px; }
.d-unit { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.d-price-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.d-price-table th, .d-price-table td { padding: 6px 4px; border-bottom: 1px solid var(--line-subtle); font-size: 12px; }
.d-price-table thead th { color: var(--muted); font-weight: 400; font-size: 10px; text-align: right; }
.d-price-table--text thead th:first-child { text-align: left; }
.d-price-table tbody td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-price-table .editable { cursor: text; }
.d-price-table .editable:hover { background: var(--fill-hover); }
.d-price-table .cell-sub { white-space: normal; font-family: var(--font-ui); font-size: 10px; line-height: 1.3; }
/* 卡片售价下面的实扣小字只是展示，点它仍然落到售价格子上，方便就地改价。 */
.d-price-table .cell-sub [data-cell="charge"] { pointer-events: none; }
.d-price-table .cell-input { width: 100%; min-width: 0; }
.d-price-table:not(.d-price-table--text) th:nth-child(1) { width: 30%; }
.d-price-table:not(.d-price-table--text) th:nth-child(2) { width: 20%; }
.d-price-table:not(.d-price-table--text) th:nth-child(3) { width: 50%; }
.d-price-table--text th:nth-child(1) { width: 12%; }
.d-price-table--text th:nth-child(2) { width: 26%; }
.d-price-table--text th:nth-child(3) { width: 18%; }
.d-price-table--text th:nth-child(4) { width: 44%; }
.d-row-label { text-align: left; font-family: var(--font-ui); font-weight: 400; color: var(--muted); font-size: 10px; }
.d-card-foot { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line-subtle); }
.d-lock { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.d-lock-name { font-size: 10px; color: var(--muted); white-space: nowrap; }
.d-lock-inline { display: flex; align-items: center; gap: 6px; }
.d-table { min-width: 920px; }
.d-chain { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
.d-chain .seg-name { font-size: var(--text-xs); color: var(--muted); }

.account-panel { max-width: 560px; }
.account-form { display: flex; flex-direction: column; gap: 14px; }
.account-form .input { width: 100%; }
.account-actions { display: flex; justify-content: flex-end; }

.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.s-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  min-width: 0;
}
.s-card:hover { background: var(--surface-2); }
.s-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.s-card-head .vendor { width: 36px; height: 36px; }
.s-name { min-width: 0; }
.s-name h3 { font-size: var(--text-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-name span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.s-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-control);
  background: var(--surface-2);
}
.s-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.s-price b { font-size: 20px; font-weight: 600; }
.s-price .cell-input { width: 92px; }
.s-pending .tag { white-space: normal; line-height: 1.4; }
.s-card-foot { margin-top: auto; font-size: 11px; }

/* ---------- 提示、空状态、详情 ---------- */

.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface-2);
  font-size: var(--text-sm);
}
.banner-warn { border-color: var(--warn); background: var(--warn-soft); }
.banner-pending { border-color: var(--pending); background: var(--pending-soft); }
.banner-info { border-color: var(--running); background: var(--running-soft); }
.banner .bang { flex: none; margin-top: 2px; }
.banner-text { min-width: 0; }
.banner-text .btn { margin-left: 8px; vertical-align: middle; }

.inline-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.group-title { margin: 18px 0 8px; font-size: var(--text-sm); color: var(--muted); font-weight: 500; }
.group-title:first-of-type { margin-top: 4px; }
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- 弹窗、轻提示 ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--overlay);
}
.modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-dialog);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.modal-wide { width: min(760px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: var(--text-lg); font-weight: 600; }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.form-row .input { width: 170px; }
.price-row-form { padding: 12px; border: 1px solid var(--line-subtle); border-radius: var(--r-control); background: var(--surface-2); }
.price-row-form h3 { font-size: var(--text-sm); margin-bottom: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: var(--text-xs); color: var(--muted); }
.field-hint { font-size: 11px; color: var(--faint); }

.toast {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 24px;
  z-index: 80;
  max-width: min(420px, calc(100vw - 48px));
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink);
  box-shadow: var(--shadow-2);
  font-size: var(--text-sm);
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-3), transform var(--dur-3);
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-ok { border-color: var(--r12-ok); background: var(--r12-ok-soft); color: var(--r12-ok); }
.toast.is-warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.toast.is-error { border-color: var(--r12-error); background: var(--r12-error-soft); color: var(--r12-error); }

.logged-out { display: grid; place-items: center; min-height: 60vh; }
.logged-card { max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.logout-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
}

/* ---------- 模型分组、改名、新增向导 ---------- */

.page-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-title-row h1 { min-width: 0; }
.name-edit { flex: none; }
.name-input { width: 220px; max-width: 100%; }

.mc-head-side { display: flex; align-items: center; gap: 8px; flex: none; }
.mc-tierline { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-tierline.is-warn { color: var(--warn); }

.model-group-row td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.mg-head { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.mg-head .vendor { width: 24px; height: 24px; }
.mg-toggle .ico { transition: transform var(--dur-2); }
.mg-toggle.is-collapsed .ico { transform: rotate(0deg); }
.mg-toggle:not(.is-collapsed) .ico { transform: rotate(90deg); }
.mg-name { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.mg-title { font-size: var(--text-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-id { font-size: 10px; color: var(--faint); font-family: var(--font-mono); }
.mg-count { margin-left: auto; font-size: 11px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.tier-cell { color: var(--muted); }
.tier-label { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--surface-3); color: var(--ink); font-size: 11px; white-space: nowrap; }
.tier-seg { margin-left: auto; }
.tier-table .tier-pick { padding: 0; border: 0; background: transparent; color: var(--ink); font-size: var(--text-sm); text-align: left; }
.tier-table .tier-pick:hover { color: var(--muted); text-decoration: underline; }
.tier-table tr.is-current td { background: var(--fill-selected); }
.tier-table tr.is-unpriced td { color: var(--muted); }

.s-tier-list { display: flex; flex-direction: column; gap: 8px; }
.s-tier { padding: 8px 10px; border: 1px solid var(--line-subtle); border-radius: var(--r-control); background: var(--surface-2); }
.s-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s-tier .s-price-row { margin-top: 4px; }
.s-tier .s-card-foot { margin-top: 4px; }

.modal.wizard { width: min(820px, 100%); }
.wizard .modal-head p { margin-top: 4px; font-size: var(--text-xs); }
.wizard-stepbar { display: flex; align-items: center; gap: 8px; padding: 12px 20px 0; }
.wizard-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-mono);
}
.wizard-dot.is-done { border-color: var(--adopted); color: var(--adopted); }
.wizard-dot.is-on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.wizard-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wizard-toolbar .search-box { flex: 1; min-width: 220px; }
.wizard-lead { color: var(--muted); font-size: var(--text-sm); }
.catalog-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.catalog-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  text-align: left;
}
.catalog-item:hover { background: var(--fill-hover); }
.catalog-item.is-on { border-color: var(--ink); background: var(--fill-selected); }
.catalog-item.is-disabled { opacity: 0.45; cursor: not-allowed; }
.catalog-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.catalog-main b { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-main code { font-size: 10px; color: var(--faint); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-status { flex: none; }
.catalog-count { flex: none; font-size: 11px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }

.spec-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.spec-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  text-align: left;
}
.spec-option:hover { background: var(--fill-hover); }
.spec-option.is-on { border-color: var(--ink); background: var(--fill-selected); }
.spec-option.is-disabled { opacity: 0.45; cursor: not-allowed; }
.spec-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  font-size: 11px;
}
.spec-option.is-on .spec-check { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.spec-name { flex: 1; font-size: var(--text-sm); }
.spec-state { font-size: 11px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }

.select-like {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--field-bg);
  color: var(--ink);
  text-align: left;
}
.select-like:hover { background: var(--fill-hover); }
.option-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
}
.option-row:hover { background: var(--fill-hover); }
.option-row.is-on { background: var(--fill-selected); }
.option-row em { font-style: normal; font-size: 11px; color: var(--faint); font-family: var(--font-mono); }
.per-spec-list { display: flex; flex-direction: column; gap: 8px; }
.link-btn { align-self: flex-start; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; text-decoration: underline; }
.link-btn:hover { color: var(--ink); }
.wizard-summary td, .wizard-summary th { font-size: 12px; }

/* ---------- 响应式 ---------- */

/* 窄一点的桌面把模型页筛选放到列表上方，表格不用横向挤。 */
@media (max-width: 1360px) {
  .models-layout { flex-direction: column; }
  .filters { width: 100%; position: static; }
}

@media (max-width: 1100px) {
  .nav-col { width: 64px; }
  .nav { padding: 12px 8px; }
  .logo { justify-content: center; padding: 4px 0 16px; }
  .logo-text, .nav-label, .nav-foot-text, .nav-badge { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .topbar { padding: 8px 20px; }
  .page { padding: 20px 20px 56px; }
  .models-layout { flex-direction: column; }
  .filters { width: 100%; position: static; }
}

@media (max-width: 900px) {
  .two-col, .entity-grid-2, .mini-grid, .overview-split, .module-grid { grid-template-columns: 1fr; }
  .stat-grid-2 { grid-template-columns: 1fr; }
  .modal-grid, .form-grid { grid-template-columns: 1fr; }
  .chain, .chain--edit { grid-template-columns: 1fr; }
  .chain-arrow { min-height: 36px; }
  .chain-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .chain-row-actions { grid-column: 1 / -1; }
  .chain-fork, .chain-row .chain-model { grid-column: 1 / -1; }
  .who-text, .who .role-chip { display: none; }
  .page-head { flex-direction: column; }
  .page-actions { width: 100%; }
  .page-actions .btn-main { width: 100%; }
}

/* ---------- 公司后台：模型、会员（m3c） ---------- */
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.cm-list, .llm-list { display: flex; flex-direction: column; }
.cm-row, .llm-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line-subtle); min-width: 0; }
.cm-row:last-child, .llm-row:last-child { border-bottom: 0; }
.cm-row.is-off, .llm-row.is-off { opacity: 0.55; }
.cm-row .vendor { width: 32px; height: 32px; flex: none; }
.cm-main, .llm-main { flex: 1; min-width: 0; }
.cm-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cm-name { border: 0; background: transparent; padding: 2px 4px; margin: 0 0 0 -4px; border-radius: 6px; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--ink); cursor: text; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cm-name:hover { background: var(--fill-hover); }
.cm-name-input { width: 240px; max-width: 100%; height: var(--ctl-h-sm); }
.cm-sub { margin-top: 3px; font-size: var(--text-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-toggle { flex: none; display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.llm-rank { flex: none; width: 24px; text-align: center; font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600; }
.llm-move { flex: none; display: flex; gap: 4px; }
.llm-row .tag { flex: none; }

.tab-bar { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); }
.tab-btn { height: var(--ctl-h-sm); padding: 0 14px; border: 0; border-radius: calc(var(--r-control) - 2px); background: transparent; color: var(--muted); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.tab-btn:hover { background: var(--fill-hover); color: var(--ink); }
.tab-btn.is-on { background: var(--ink); color: var(--bg); }
.member-table { min-width: 900px; }
.member-name { font-weight: 500; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.actions-cell { white-space: nowrap; }
.actions-cell .btn + .btn { margin-left: 4px; }
.d-card.is-off { opacity: 0.55; }
.d-table tr.is-off { opacity: 0.55; }
.fork-node.is-off { opacity: 0.6; }

.custom-block + .custom-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-subtle); }
.custom-block h3 { font-size: var(--text-sm); font-weight: 500; margin-bottom: 8px; }
.custom-empty { font-size: var(--text-xs); }
.custom-list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); }
.custom-list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.custom-from { color: var(--muted); }
.custom-arrow { color: var(--faint); font-family: var(--font-mono); }
.custom-to { font-weight: 500; }
.custom-order { list-style: decimal; padding-left: 20px; }
.custom-order li { display: list-item; }
.custom-order li > span + span { margin-left: 8px; }

.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.detail-grid > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); }
.detail-grid span { color: var(--muted); }
.detail-grid b { font-weight: 500; font-size: var(--text-sm); }
.record-access-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line-subtle); border-radius: var(--r-control); background: var(--surface-2); }
.record-access-row p { margin-top: 3px; font-size: var(--text-xs); }
.ledger-list { display: flex; flex-direction: column; }
.ledger-row { display: grid; grid-template-columns: 110px 56px 80px 64px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--line-subtle); font-size: var(--text-xs); }
.ledger-row:last-child { border-bottom: 0; }
.ledger-note { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-row .is-plus { color: var(--adopted); }
.ledger-row .is-minus { color: var(--warn); }
.drawer-panel { width: min(680px, 100%); }

.qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qr-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line-subtle); border-radius: var(--r-control); background: var(--surface-2); }
.qr-title { font-size: var(--text-xs); color: var(--muted); }
.qr-placeholder { display: flex; align-items: center; justify-content: center; min-height: 120px; border: 1px dashed var(--line-strong); border-radius: var(--r-control); background: var(--surface); color: var(--muted); font-size: var(--text-xs); }
.qr-placeholder.is-empty { color: var(--faint); }
.qr-actions { display: flex; gap: 6px; }
.tier-list { display: flex; flex-direction: column; }
.tier-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line-subtle); font-size: var(--text-sm); }
.tier-row:last-child { border-bottom: 0; }
.tier-amount { font-family: var(--font-mono); font-weight: 600; min-width: 72px; }
.tier-row .tag { margin-left: auto; }

@media (max-width: 900px) {
  .detail-grid, .qr-grid { grid-template-columns: 1fr; }
  .ledger-row { grid-template-columns: 92px 48px 72px minmax(0, 1fr); }
  .ledger-row .ledger-note { display: none; }
  .cm-toggle span:first-child { display: none; }
}

/* ---------- 模型名规则、品牌、开户（m3c 续做） ---------- */
span.cm-name { cursor: default; padding: 0; font-weight: 600; }
span.cm-name:hover { background: transparent; }
.origin-tag { flex: none; align-self: flex-start; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--line); font-size: 10px; color: var(--muted); white-space: nowrap; }
.origin-tag.is-foreign { border-color: var(--role-dealer); color: var(--role-dealer); }
.name-preview { flex-basis: 100%; display: block; margin-top: 2px; font-size: 10px; color: var(--faint); white-space: normal; }
.mg-name { flex-wrap: wrap; }
.mg-name .name-preview { width: 100%; }

.dealer-logo { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--surface-3); color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.entity-title .dealer-logo { margin-right: 2px; }
.brand-panel { display: flex; align-items: flex-start; gap: 14px; }
.brand-panel .dealer-logo { width: 56px; height: 56px; border-radius: 14px; font-size: 22px; }
.brand-info { flex: 1; min-width: 0; }
.brand-info h2 { font-size: var(--text-lg); font-weight: 600; }
.brand-info p { margin-top: 3px; font-size: var(--text-xs); }

.name-map-list { list-style: none; display: flex; flex-direction: column; }
.name-map-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 44px; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--line-subtle); font-size: var(--text-sm); }
.name-map-list li:last-child { border-bottom: 0; }
.map-from { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-arrow { color: var(--faint); font-family: var(--font-mono); }
.map-to { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-origin { font-size: 10px; color: var(--faint); text-align: right; }

.name-preview-list { display: flex; flex-direction: column; max-height: 320px; overflow: auto; }
.preview-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 2px; border-bottom: 1px solid var(--line-subtle); font-size: var(--text-xs); }
.preview-row:last-child { border-bottom: 0; }
.preview-from { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-arrow { color: var(--faint); font-family: var(--font-mono); }
.preview-to { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.upload-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 96px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface-2); color: var(--muted); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.upload-placeholder:hover { background: var(--surface-3); color: var(--ink); }
.upload-placeholder em { font-style: normal; font-size: 10px; color: var(--faint); }
.upload-placeholder.is-filled { border-style: solid; }
.upload-logo { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--surface-3); color: var(--ink); font-size: 20px; font-weight: 600; }
.page-title-row { flex-wrap: wrap; }
.row-menu { position: relative; display: inline-block; }
.actions-cell .row-menu > .btn { margin-left: 4px; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; flex-direction: column; min-width: 120px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: var(--shadow-2); }
.menu-pop[hidden] { display: none; }
.menu-item { border: 0; background: transparent; text-align: left; padding: 7px 10px; border-radius: 6px; font: inherit; font-size: var(--text-xs); color: var(--ink); cursor: pointer; white-space: nowrap; }
.menu-item:hover { background: var(--fill-hover); }
.role-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.filter-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.filter-chip:hover { background: var(--fill-hover); color: var(--ink); }
.filter-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip-count { margin-left: 6px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; opacity: 0.7; }
.role-cell { white-space: nowrap; }
.role-lock { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 5px; color: var(--faint); cursor: help; }
.role-lock .ico { width: 13px; height: 13px; }
.role-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.role-guide-col { min-width: 0; padding: 12px; border: 1px solid var(--line-subtle); border-radius: var(--r-control); background: var(--surface-2); }
.role-guide-col h3 { font-size: var(--text-sm); font-weight: 600; margin-bottom: 6px; }
.role-guide-col p { font-size: var(--text-xs); color: var(--muted); line-height: 1.55; }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-subtle); border-radius: var(--r-control); background: var(--surface-2); }
.perm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-text b { font-size: var(--text-sm); font-weight: 500; }
.perm-text .muted { font-size: 10px; }

@media (max-width: 900px) {
  .role-guide-grid { grid-template-columns: 1fr; }
}

/* ---------- 模型库 / 模型详情（v3） ---------- */
.models-page,
.model-detail-page { max-width: none; padding: 20px 24px 48px; }
.ml-loading { padding: 24px; color: var(--muted); }
.ml-muted { color: var(--faint); font-size: 12px; }
.ml-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ml-tabs { flex-wrap: wrap; }
.ml-tab-count { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
.ml-tabs .seg-btn.is-on .ml-tab-count { color: var(--bg); opacity: 0.7; }
.ml-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ml-search { width: 236px; }
.ml-result { font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.models-filters { width: 220px; max-height: calc(100vh - 120px); overflow: auto; }
.ml-filter-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 4px; }
.ml-clear { border: 0; background: transparent; color: var(--faint); font-size: var(--text-xs); cursor: pointer; }
.ml-clear:not(:disabled):hover { color: var(--ink); }
.ml-clear:disabled { opacity: 0.4; cursor: default; }
.ml-sort,
.ml-more { position: relative; }
.ml-sort > .btn .ico,
.ml-more > .btn .ico { width: 12px; height: 12px; transform: rotate(90deg); }
.ml-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 12; min-width: 168px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); box-shadow: var(--shadow-2); }
.ml-menu[hidden] { display: none; }
.ml-menu-item { display: block; width: 100%; height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: var(--text-sm); text-align: left; cursor: pointer; }
.ml-menu-item:hover { background: var(--fill-hover); color: var(--ink); }
.ml-menu-item.is-on { background: var(--fill-selected); color: var(--ink); }

.models-table { width: 100%; table-layout: fixed; }
.models-table th,
.models-table td { height: 36px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.models-page.is-compact .models-table th,
.models-page.is-compact .models-table td { height: 32px; font-size: 12px; }
.models-table tbody tr.models-row { cursor: pointer; }
.models-table tbody tr.models-row:hover { background: var(--fill-hover); }
.models-row td { border-bottom: 1px solid var(--line-subtle); }
.models-spacer td { padding: 0; border: 0; background: transparent; }
.ml-col-name { width: 18.2%; }
.ml-col-tasks { width: 10.5%; }
.ml-col-sup { width: 6.2%; }
.ml-col-cheap { width: 14%; }
.ml-col-platform { width: 10.6%; }
.ml-col-margin { width: 5%; }
.ml-col-status { width: 7%; }
.ml-col-route { width: 12%; }
.ml-col-calls { width: 7.5%; }
.ml-col-success { width: 9%; }
.ml-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ml-vendor { width: 20px; height: 20px; flex: none; }
.ml-name-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ml-name-text b { overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 500; }
.ml-name-text code { overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
.ml-task,
.ml-sup { display: inline-flex; align-items: center; height: 18px; margin-right: 4px; padding: 0 6px; border-radius: 4px; background: var(--surface-3); color: var(--muted); font-size: 10px; white-space: nowrap; }
.ml-sup.is-preferred { background: var(--fill-selected); color: var(--ink); font-weight: 600; }
.ml-best { font-size: 12px; color: var(--muted); }
.ml-best b { margin-left: 2px; font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.ml-cheap-sup { display: block; font-size: 9px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.ml-cheap-price { display: block; font-family: var(--font-mono); font-size: 12px; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.ml-cheap-price b { font-weight: 600; }
.ml-text-price { display: flex; flex-direction: column; gap: 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ml-text-price span { display: block; white-space: nowrap; }
.ml-was { margin-left: 6px; font-family: var(--font-mono); font-size: 9px; color: var(--faint); }
.ml-route em { margin-left: 4px; font-style: normal; font-size: 10px; color: var(--faint); }

.ml-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 116px; gap: 12px; }
.ml-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); cursor: pointer; }
.ml-card:hover { background: var(--fill-hover); }
.ml-card-top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ml-card-vendor { width: 32px; height: 32px; flex: none; }
.ml-card-title { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ml-card-title b { overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 500; white-space: nowrap; }
.ml-card-title code { overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: 9px; color: var(--faint); white-space: nowrap; }
.ml-card-price { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
.ml-card-price em { font-style: normal; font-size: 10px; color: var(--muted); }
.ml-card-price span { margin-left: 8px; font-family: var(--font-ui); font-size: 10px; font-weight: 400; color: var(--faint); }
.ml-card-meta { display: flex; justify-content: space-between; gap: 6px; margin-top: auto; overflow: hidden; font-size: 10px; color: var(--muted); white-space: nowrap; }
@media (max-width: 1180px) { .ml-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.detail-head-main { display: flex; gap: 12px; min-width: 0; }
.detail-vendor { width: 40px; height: 40px; flex: none; }
.detail-title { min-width: 0; }
.detail-title h1 { font-size: 22px; font-weight: 600; }
.detail-title-row { display: flex; align-items: center; gap: 8px; }
.detail-id-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.detail-id-row code { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.detail-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.detail-alias { margin-top: 8px; font-size: 12px; color: var(--muted); }
.detail-head-side { display: flex; align-items: center; gap: 8px; flex: none; }
.supplier-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--muted); text-align: left; cursor: pointer; }
.sup-tab:hover { background: var(--fill-hover); color: var(--ink); }
.sup-tab.is-on { background: var(--fill-selected); border-color: var(--line-strong); color: var(--ink); }
.sup-tab-name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.sup-tab-sub { font-family: var(--font-mono); font-size: 9px; color: var(--faint); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.detail-main,
.detail-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detail-panel { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); }
.detail-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.detail-panel-head h2 { font-size: 13px; font-weight: 600; }
.matrix-scroll { overflow: auto; max-height: 520px; border: 1px solid var(--line-subtle); border-radius: 6px; }
.tier-matrix { table-layout: auto; min-width: 100%; }
.tier-matrix th,
.tier-matrix td { padding: 6px 8px; border-bottom: 1px solid var(--line-subtle); font-size: 11px; white-space: nowrap; }
.tier-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); color: var(--muted); font-weight: 500; }
.mx-row-head { position: sticky; left: 0; z-index: 1; background: var(--surface); color: var(--muted); font-weight: 500; text-align: left; }
.tier-matrix thead th:first-child { z-index: 3; }
.mx-price { display: block; font-family: var(--font-mono); color: var(--ink); }
.mx-sub { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--faint); }
.mx-best { display: block; margin-bottom: 3px; font-size: 10px; color: var(--muted); }
.mx-bars { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.mx-bar { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: var(--surface-3); }
.mx-bar i { display: block; height: 100%; background: var(--muted); }
.mx-empty { font-family: var(--font-mono); color: var(--faint); }
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; }
.calc-dims { display: flex; flex-direction: column; gap: 10px; }
.calc-dim { display: flex; flex-direction: column; gap: 4px; }
.calc-dim-label { font-size: 10px; color: var(--faint); }
.calc-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.calc-opt { height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--muted); font-size: 11px; cursor: pointer; }
.calc-opt:hover { background: var(--fill-hover); color: var(--ink); }
.calc-opt.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.calc-results { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.calc-block h3 { margin-bottom: 4px; font-size: 10px; font-weight: 500; color: var(--faint); }
.calc-big { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.calc-route-item,
.calc-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line-subtle); font-size: 12px; }
.calc-rank { width: 18px; font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
.calc-route-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-route-name em { margin-left: 6px; font-style: normal; font-size: 10px; color: var(--faint); }
.calc-route-cost { font-family: var(--font-mono); }
.calc-trace { display: flex; flex-direction: column; gap: 3px; }
.calc-trace-step { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--muted); }
.calc-issues { display: flex; flex-direction: column; gap: 2px; }
.calc-issue { font-size: 11px; color: var(--error); }
.rt-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 70px 52px 100px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line-subtle); font-size: 11px; }
.rt-row.is-off { opacity: 0.55; }
.rt-rank,
.rt-cost { font-family: var(--font-mono); color: var(--muted); }
.rt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-name em { margin-left: 6px; font-style: normal; font-size: 10px; color: var(--faint); }
.rt-original,
.rt-auto,
.rt-reason { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.rt-toggle { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.detail-chain { flex-wrap: wrap; }
.rule-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11px; color: var(--muted); }
.rule-row > span { width: 34px; flex: none; }
.rule-input { flex: 1; min-width: 0; height: 28px; }
.rule-actions { display: flex; align-items: center; gap: 8px; }
.rule-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rule-item { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.record-line { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line-subtle); font-size: 11px; color: var(--muted); }
.record-line b { font-weight: 500; color: var(--ink); text-align: right; }
@media (max-width: 1280px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 修正一：紧凑头部、不截断价格、详情两栏 ---------- */
.models-page { padding: 4px 24px 32px; }
.models-page > * + * { margin-top: 2px; }
.ml-head { margin: 0; }
.ml-head-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ml-head-row h1 { font-size: 22px; font-weight: 600; line-height: 1.1; }
.ml-head-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.ml-head-actions { margin-left: auto; display: flex; align-items: center; flex: none; }
.ml-toolbar { margin-bottom: 0; min-height: 30px; flex-wrap: nowrap; }
.ml-tools { flex-wrap: nowrap; }
.ml-search { flex: 0 1 240px; min-width: 190px; height: 30px; }
@media (max-width: 1180px) {
  .ml-toolbar, .ml-tools { flex-wrap: wrap; }
}

.ml-col-name { width: 18.2%; }
.ml-col-tasks { width: 10.5%; }
.ml-col-sup { width: 6.2%; }
.ml-col-cheap { width: 14%; }
.ml-col-platform { width: 10.6%; }
.ml-col-margin { width: 5%; }
.ml-col-status { width: 7%; }
.ml-col-route { width: 12%; }
.ml-col-calls { width: 7.5%; }
.ml-col-success { width: 9%; }
.models-table td[data-cell="cheapest"],
.models-table td[data-cell="platform"],
.models-table td[data-cell="margin"],
.models-table td[data-cell="calls7d"],
.models-table td[data-cell="success7d"] { overflow: visible; text-overflow: clip; white-space: nowrap; text-align: right; }
.models-table td[data-cell="tasks"] { overflow: hidden; text-overflow: clip; }
.models-page.is-compact .models-table td[data-cell="tasks"] { font-size: 11px; }
.models-page.is-compact .models-table td[data-cell="route"] { font-size: 11px; }
.ml-price { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.ml-price em { font-style: normal; color: var(--faint); }
.ml-price-sub { display: block; margin-top: 1px; font-family: var(--font-ui); font-size: 9px; color: var(--faint); white-space: nowrap; }
.ml-unavail { display: block; margin-top: 1px; font-size: 9px; color: var(--warn); white-space: nowrap; }
.ml-sup-count { margin-right: 6px; font-family: var(--font-mono); color: var(--muted); }
.ml-sup-names { color: var(--ink); }
.ml-plus { font-size: 10px; color: var(--faint); }
.models-table td[data-cell="suppliers"],
.models-table td[data-cell="tasks"],
.models-table td[data-cell="route"] { font-size: 11px; }
.models-table td[data-cell="cheapest"] .ml-best { display: inline; }
.models-table td[data-cell="cheapest"] .ml-best b { margin-left: 3px; }
.models-table td[data-cell="cheapest"] .ml-was { margin-left: 5px; }

.detail-layout { grid-template-columns: minmax(0, 1fr) 380px; }
.calc-panel .calc-grid { grid-template-columns: minmax(0, 1fr); }
.detail-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detail-right { position: sticky; top: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; max-height: calc(100vh - 88px); overflow: auto; padding-right: 2px; }
.matrix-scroll { overflow: visible; max-height: none; }
.tier-matrix th,
.tier-matrix td { height: 40px; padding: 2px 8px; }
.tier-matrix td { position: relative; font-size: 10px; line-height: 1.1; }
.mx-best { display: block; margin-bottom: 0; font-size: 10px; line-height: 1.1; color: var(--ink); }
.mx-price { display: block; font-family: var(--font-mono); font-size: 12px; line-height: 1.1; color: var(--ink); }
.mx-count { display: inline-block; margin-left: 5px; font-size: 9px; font-style: normal; line-height: 1.1; color: var(--faint); }
.mx-off { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 3px; background: var(--surface-3); color: var(--faint); font-family: var(--font-ui); font-size: 9px; font-style: normal; line-height: 1.3; vertical-align: 1px; }
.mx-cheaper { display: block; font-size: 9px; line-height: 1.1; color: var(--faint); white-space: nowrap; }
.mx-sub { display: block; font-family: var(--font-mono); font-size: 9px; line-height: 1.1; color: var(--faint); }
.mx-pop { display: none; position: absolute; left: 0; top: calc(100% - 2px); z-index: 30; min-width: 220px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); box-shadow: var(--shadow-2); }
.tier-matrix td:hover .mx-pop { display: block; }
.mx-pop-row { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; font-size: 11px; white-space: nowrap; }
.mx-pop-row b { font-weight: 500; color: var(--ink); }
.mx-pop-row em { flex: 1; font-style: normal; color: var(--faint); }
.mx-pop-row span { font-family: var(--font-mono); }
.ml-ratio-toggle { margin-top: 8px; }
.matrix-head-tools { display: flex; align-items: center; gap: 10px; }
.matrix-head-tools .rt-toggle { font-size: 10px; color: var(--muted); }
.mx-auto-note { margin-top: 6px; font-size: 10px; line-height: 1.4; color: var(--faint); }
.detail-legacy { margin-top: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.sup-tab-note { display: block; max-width: 170px; font-size: 9px; line-height: 1.3; color: var(--faint); white-space: normal; }
@media (max-width: 1280px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-right { position: static; max-height: none; overflow: visible; }
}

/* ---------- 实际表现 ---------- */
.detail-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); }
.detail-tab { position: relative; height: 32px; padding: 0 14px; border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.detail-tab:hover { color: var(--ink); }
.detail-tab.is-on { color: var(--ink); font-weight: 600; }
.detail-tab.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.perf-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.perf-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.perf-ranges { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); }
.perf-ranges .seg-btn { height: 26px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.perf-ranges .seg-btn:hover { background: var(--fill-hover); color: var(--ink); }
.perf-ranges .seg-btn.is-on { background: var(--ink); color: var(--bg); }
.perf-custom { display: flex; align-items: center; gap: 6px; }
.perf-custom .input { height: 28px; width: 168px; }
.perf-now { margin-left: auto; font-family: var(--font-mono); font-size: 10px; }
.perf-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.perf-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); }
.perf-stat-label { font-size: 10px; color: var(--faint); }
.perf-stat-value { overflow: hidden; font-family: var(--font-mono); font-size: 20px; font-weight: 600; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.perf-stat-sub { overflow: hidden; font-size: 9px; color: var(--faint); text-overflow: ellipsis; white-space: nowrap; }
.perf-est { padding: 0 4px; border-radius: 3px; background: var(--surface-3); color: var(--warn); font-family: var(--font-ui); font-size: 9px; font-style: normal; font-weight: 500; }
.perf-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.perf-chart-card { min-width: 0; }
.perf-chart { min-width: 0; overflow: hidden; }
.perf-chart svg { display: block; width: 100%; height: 170px; }
.perf-grid-line { stroke: var(--line-subtle); stroke-width: 1; }
.perf-axis { fill: var(--faint); font-family: var(--font-mono); font-size: 9px; }
.perf-legend { fill: var(--faint); font-size: 9px; }
.perf-bar { fill: var(--surface-3); }
.perf-line { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.perf-line-ok { stroke: var(--role-supplier); }
.perf-line-p50 { stroke: var(--ink); }
.perf-line-p90 { stroke: var(--warn); stroke-dasharray: 4 3; }
.perf-line-cost { stroke: var(--role-dealer); }
.perf-empty { padding: 24px; color: var(--muted); text-align: center; }
.perf-empty-cell { padding: 18px 10px !important; color: var(--muted); text-align: center; }
.perf-table-wrap, .perf-calls-wrap { overflow: auto; max-width: 100%; }
.perf-table { width: 100%; table-layout: fixed; }
.perf-table th,
.perf-table td { height: 30px; padding: 0 8px; border-bottom: 1px solid var(--line-subtle); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); color: var(--muted); font-weight: 500; }
.perf-table td b { font-weight: 500; }
.perf-row-sub { margin-left: 5px; font-family: var(--font-mono); font-size: 9px; color: var(--faint); }
.perf-fail { color: var(--muted); }
.perf-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.perf-filter { display: flex; align-items: center; gap: 3px; min-width: 0; }
.perf-filter-label { margin-right: 2px; font-size: 10px; color: var(--faint); }
.perf-filter-btn { height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--muted); font-size: 10px; cursor: pointer; }
.perf-filter-btn:hover { background: var(--fill-hover); color: var(--ink); }
.perf-filter-btn.is-on { background: var(--fill-selected); border-color: var(--line-strong); color: var(--ink); }
.perf-sources { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); }
.perf-source { height: 26px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; white-space: nowrap; }
.perf-source:hover { background: var(--fill-hover); color: var(--ink); }
.perf-source.is-on { background: var(--ink); color: var(--bg); }
.perf-origin { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 3px; background: var(--fill-selected); color: var(--ink); font-size: 10px; }
.perf-origin[data-origin="customer"] { background: var(--adopted-soft); color: var(--adopted); }
.perf-origin[data-origin="direct"] { background: var(--pending-soft); color: var(--pending); }
.perf-row-context { opacity: .62; }
.perf-calls td { cursor: pointer; }
.perf-calls tr.perf-call:hover { background: var(--fill-hover); }
.perf-calls tr.perf-call.is-open { background: var(--fill-selected); }
.perf-time { font-family: var(--font-mono); color: var(--muted); }
.perf-status { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: 10px; }
.perf-status-ok { background: var(--fill-selected); color: var(--ink); }
.perf-status-bad { background: var(--surface-3); color: var(--warn); }
.perf-uncounted { margin-left: 5px; font-size: 9px; font-style: normal; color: var(--faint); }
.perf-expand { color: var(--faint); text-align: right; }
.perf-call-detail td { padding: 8px 10px !important; background: var(--surface-2); }
.perf-detail-grid { display: grid; grid-template-columns: 80px minmax(0, 1fr) 80px minmax(0, 1fr); gap: 4px 10px; font-size: 11px; }
.perf-detail-grid span { color: var(--faint); }
.perf-detail-grid b { overflow: hidden; font-family: var(--font-mono); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.perf-gap { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); color: var(--muted); font-size: 11px; }
.perf-gap b { margin-right: 5px; color: var(--warn); }
@media (max-width: 1280px) {
  .perf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .perf-charts { grid-template-columns: minmax(0, 1fr); }
  .perf-custom .input { width: 150px; }
}

/* ---------- 定价规则（v3 第三路） ---------- */
.rules-page .rules-note { margin: 0; font-size: 12px; color: var(--muted); }
.rules-page .rule-editor { border-color: var(--line-strong); }
.rule-form-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 8px 0; border-bottom: 1px solid var(--line-subtle); }
.rule-form-label { width: 88px; flex: none; font-size: 12px; color: var(--muted); line-height: 28px; }
.rule-form-control { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rule-form-value { font-family: var(--font-mono); font-size: 12px; }
.rule-value-input { width: 140px; height: 28px; }
.rule-form-unit { font-size: 12px; color: var(--muted); align-self: center; }
.rule-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.rule-form-error { margin-top: 8px; color: var(--error); font-size: 12px; }
.rule-picker { display: flex; flex-direction: column; gap: 6px; }
.rule-picker-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow: auto; }
.rule-pick { height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; cursor: pointer; }
.rule-pick:hover { color: var(--ink); background: var(--fill-hover); }
.rule-pick.is-on { color: var(--ink); border-color: var(--line-strong); background: var(--fill-selected); }
.rule-picker-selected { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rule-picker-empty { font-size: 11px; color: var(--faint); }
.rules-layers { display: flex; flex-direction: column; gap: 12px; }
.rules-page .rule-list { gap: 0; margin-top: 0; }
.rules-page .rule-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px 74px 96px; gap: 10px; align-items: center; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line-subtle); font-size: 12px; color: var(--ink); }
.rules-page .rule-row:last-child { border-bottom: 0; }
.rules-page .rule-row > span { width: auto; flex: none; }
.rule-row-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rule-row-main b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule-row-method { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.rule-affected { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: right; }
.rule-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.rule-readonly { font-size: 11px; color: var(--faint); text-align: right; }
.rule-empty { font-size: 12px; color: var(--muted); }
.rules-preview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: center; }
.rules-preview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rules-preview-stat { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); }
.rules-preview-stat span { display: block; font-size: 11px; color: var(--muted); }
.rules-preview-stat b { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 20px; }
.rules-preview-stat em { display: block; margin-top: 2px; font-size: 10px; color: var(--faint); font-style: normal; }
.rules-hist { border: 1px solid var(--line); border-radius: var(--r-control); padding: 10px; background: var(--surface-2); min-width: 0; }
.rules-hist-title { font-size: 11px; color: var(--muted); }
.rules-hist svg { display: block; width: 100%; height: 78px; }
.rules-hist-bar { fill: var(--surface-3); }
.rules-hist-count, .rules-hist-label { fill: var(--faint); font-family: var(--font-mono); font-size: 8px; }
.rules-preview-side { display: flex; align-items: center; gap: 16px; flex: none; }
.rules-min-margin { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.rules-min-margin .input { width: 66px; height: 28px; text-align: right; font-family: var(--font-mono); }
.rules-version { font-size: 12px; color: var(--muted); }
.rules-version b { font-family: var(--font-mono); color: var(--ink); }
.rules-ok { margin-top: 10px; padding: 8px 10px; border-radius: var(--r-control); background: var(--adopted-soft); color: var(--adopted); font-size: 12px; }
.rules-violation-head { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font-size: 12px; }
.rules-violation-head b { color: var(--warn); }
.rules-violation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; margin-top: 6px; }
.rule-violation { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line-subtle); font-size: 11px; min-width: 0; }
.rule-violation-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule-violation-tier { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule-violation-num { margin-left: auto; font-family: var(--font-mono); color: var(--warn); white-space: nowrap; }
.rules-violation-more { margin-top: 6px; font-size: 11px; }
.rules-publish-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rules-override { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 12px; color: var(--muted); }
.rules-override .input { flex: 1; min-width: 0; max-width: 360px; height: 28px; }
[data-rules-publish][disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- 算力商（v3 第三路） ---------- */
.sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sup-card { gap: 10px; }
.sup-card .entity-title h3 { font-size: 16px; }
.sup-status { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.sup-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.sup-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sup-stats span { font-size: 10px; color: var(--muted); }
.sup-stats b { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
.sup-stats em { font-style: normal; font-size: 9px; color: var(--faint); }
.sup-note { padding: 6px 8px; border-radius: var(--r-control); background: var(--warn-soft); color: var(--warn); font-size: 10px; line-height: 1.5; }
.sup-card .entity-foot { align-items: flex-start; font-size: 10px; line-height: 1.4; color: var(--muted); }
.sup-card .entity-foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sync-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.info-row { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--line-subtle); font-size: 12px; min-width: 0; }
.info-row span { color: var(--muted); flex: none; }
.info-row b { font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.limits-text { font-size: 12px; line-height: 1.7; color: var(--muted); }
.panel-message { margin-top: 10px; font-size: 11px; color: var(--adopted); }
.empty-text { padding: 10px 0; font-size: 12px; color: var(--muted); }
.membership-level { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.membership-track { position: relative; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: 6px 0 8px; }
.membership-fill { height: 100%; border-radius: 999px; background: var(--ink); }
.membership-mark { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.membership-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.membership-note { margin-top: 8px; font-size: 11px; color: var(--muted); }
.sup-quote-table { min-width: 640px; }
.sup-quote-table tbody tr { cursor: pointer; }
.sup-quote-table tbody tr:hover { background: var(--fill-hover); }
.reject-row td { background: var(--surface-2); }
.reject-label { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.reject-label .input { flex: 1; max-width: 360px; height: 26px; }
.pending-table .cell-sub { display: block; }

/* ---------- 同步与记录（v3 第三路） ---------- */
.sync-table-wrap { overflow: auto; max-width: 100%; }
.sync-table { width: 100%; table-layout: fixed; }
.sync-table th, .sync-table td { height: 32px; font-size: 12px; }
.sync-table th:nth-child(1) { width: 150px; }
.sync-table th:nth-child(2) { width: 110px; }
.sync-table th:nth-child(3) { width: 120px; }
.sync-table th:nth-child(4) { width: 110px; }
.sync-table th:nth-child(5) { width: 190px; }
.sync-row-note { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--warn); }
.change-list { display: flex; flex-direction: column; }
.change-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-subtle); }
.change-row:last-child { border-bottom: 0; }
.change-time { font-size: 11px; color: var(--muted); }
.change-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.change-name { font-size: 11px; color: var(--muted); }
.change-main p { margin-top: 3px; font-size: 11px; line-height: 1.6; color: var(--muted); }
.change-source { display: block; margin-top: 3px; font-size: 10px; color: var(--faint); }
.alert-list { display: flex; flex-direction: column; gap: 8px; }
.alert-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-subtle); border-radius: var(--r-control); background: var(--surface-2); }
.alert-mark { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex: none; font-size: 11px; font-weight: 700; background: var(--warn-soft); color: var(--warn); }
.alert-main { flex: 1; min-width: 0; }
.alert-main b { font-size: 12px; font-weight: 500; }
.alert-main p { margin-top: 2px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.alert-pending .alert-mark { background: var(--pending-soft); color: var(--pending); }
.alert-off .alert-mark { background: var(--surface-3); color: var(--muted); }

@media (max-width: 1280px) {
  .rules-preview-grid { grid-template-columns: minmax(0, 1fr); }
  .rules-violation-list { grid-template-columns: minmax(0, 1fr); }
  .info-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 价格后台 v3 · 公司「模型与价格」「品牌与合规」、算力商「报价表」 ---------- */

.dp-table { width: 100%; table-layout: fixed; }
.dp-table .ml-name-text em { font-style: normal; font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.dp-table th,
.dp-table td { height: 36px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-table tbody tr.dp-row,
.dp-table tbody tr.sq-row { cursor: pointer; }
.dp-table tbody tr.dp-row:hover,
.dp-table tbody tr.sq-row:hover { background: var(--fill-hover); }
.dp-table td[data-cell="cost"],
.dp-table td[data-cell="retail"],
.dp-table td[data-cell="margin"] { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; overflow: visible; text-overflow: clip; }
.dp-table td[data-cell="name"] { overflow: hidden; }
.dp-col-name { width: 30%; }
.dp-col-tier { width: 15%; }
.dp-col-cost { width: 12%; }
.dp-col-retail { width: 12%; }
.dp-col-margin { width: 9%; }
.dp-col-listed { width: 12%; }
.dp-col-action { width: 10%; }
.dp-table .is-bad { color: var(--error); }
.dp-expand-row > td,
.sq-expand-row > td { padding: 0 12px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.dp-tier-wrap { max-height: 330px; overflow: auto; border: 1px solid var(--line-subtle); border-radius: var(--r-control); background: var(--surface); }
.dp-tier-table { width: 100%; table-layout: fixed; }
.dp-tier-table th,
.dp-tier-table td { height: 32px; padding: 0 10px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-tier-table th { position: static; box-shadow: none; background: var(--surface-2); }
.dp-tier-table td:nth-child(1) { width: 42%; }
.dp-suggest { margin-top: 8px; font-size: 11px; color: var(--muted); }
.dp-pick-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow: auto; padding: 2px 0; }
.dp-rule-form .rule-form-row { align-items: flex-start; }

.dp-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dp-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); min-width: 0; }
.dp-card:hover { background: var(--surface-2); }
.dp-card-head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.dp-card-head .vendor { width: 28px; height: 28px; flex: none; }
.dp-card-title { flex: 1; min-width: 0; }
.dp-card-title b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-card-title span { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-card-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dp-card-prices div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-card-prices span { font-size: 10px; color: var(--muted); }
.dp-card-prices b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; }
.dp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; font-size: 11px; }
@media (max-width: 1360px) { .dp-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sq-col-name { width: 44%; }
.sq-col-common { width: 14%; }
.sq-col-supply { width: 12%; }
.sq-col-status { width: 18%; }
.sq-col-action { width: 12%; }
.sq-table th:nth-child(1) { width: 44%; }
.sq-table th:nth-child(2) { width: 14%; }
.sq-table th:nth-child(3) { width: 12%; }
.sq-table th:nth-child(4) { width: 18%; }
.sq-table th:nth-child(5) { width: 12%; }
.sq-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.sq-check input { accent-color: var(--adopted); }
.sq-reason { display: block; margin-top: 2px; font-size: 10px; font-style: normal; color: var(--warn); }
.sq-expand-row .dp-tier-wrap { max-height: 300px; }
.sq-tier-table th:nth-child(1) { width: 38%; }
.sq-tier-table th:nth-child(2) { width: 40%; }
.sq-tier-table th:nth-child(3) { width: 22%; }
.sq-input-wrap { display: inline-flex; align-items: center; gap: 5px; }
.sq-input-wrap .input { width: 92px; text-align: right; font-family: var(--font-mono); }
.sq-currency, .sq-unit { font-size: 11px; color: var(--muted); }
.sq-filled { color: var(--adopted); font-size: 11px; }
.sq-paste-text { width: 100%; min-height: 92px; padding: 8px 10px; resize: vertical; font-family: var(--font-mono); }
.sq-paste .inline-actions { margin-top: 8px; }
.sq-page .ml-tools { gap: 8px; }

.brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.brand-upload-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.brand-qr, .brand-file { display: grid; place-items: center; min-height: 84px; padding: 10px; border: 1px dashed var(--line); border-radius: var(--r-control); background: var(--surface-2); color: var(--muted); font-size: 12px; text-align: center; }
.brand-qr.is-empty, .brand-file.is-empty { color: var(--faint); }
.brand-note { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-subtle); font-size: 11px; color: var(--muted); }
.brand-section .seg { align-self: flex-start; }

@media (max-width: 1180px) {
  .brand-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 修正六：品牌入驻页 ---------- */
.brand-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.brand-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.brand-preview-col { position: sticky; top: 0; min-width: 0; }
.brand-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.brand-field .input { width: 100%; }
.brand-field-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.brand-field-head .field-label { min-width: 0; }
.brand-required { color: var(--error); font-weight: 700; }
.brand-usage { display: inline-grid; place-items: center; width: 15px; height: 15px; flex: none; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: 10px; line-height: 1; cursor: help; }
.brand-upload-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brand-upload-inline .brand-file { min-height: 44px; padding: 8px 10px; }
.brand-subsection { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-subtle); }
.brand-keys { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r-control); background: var(--surface-2); }
.brand-key-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
.brand-key-row + .brand-key-row { margin-top: 4px; }
.brand-key-row b { color: var(--faint); font-weight: 500; }
.brand-keys .brand-note { margin-top: 8px; padding-top: 8px; }
.brand-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.brand-progress { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.brand-status { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--muted); background: var(--surface-2); }
.brand-status.is-on { border-color: var(--adopted); color: var(--adopted); background: var(--adopted-soft); }
.brand-preview { display: flex; flex-direction: column; gap: 10px; }
.brand-preview-title { font-size: 11px; color: var(--muted); }
.brand-preview-block { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line-subtle); border-radius: var(--r-control); background: var(--surface-2); font-size: 11px; color: var(--muted); }
.brand-preview-block b { font-size: 12px; font-weight: 600; color: var(--ink); }
.brand-preview-block span { overflow-wrap: anywhere; }
@media (max-width: 1180px) {
  .brand-layout { grid-template-columns: minmax(0, 1fr); }
  .brand-preview-col { position: static; }
}

/* ---------- 修正八：AI 生成角标预览 ---------- */
.brand-ai-demo { position: relative; min-height: 84px; border-radius: var(--r-control); background: var(--surface-3); }
.brand-ai-badge { position: absolute; left: 8px; top: 8px; padding: 2px 6px; border-radius: 4px; background: var(--ink); color: var(--bg); font-size: 10px; line-height: 1.4; }

/* ---------- 修正九：对话 AI 标记与开关排版 ---------- */
.brand-subsection .brand-field + .brand-field { margin-top: 16px; }
.brand-field > .brand-note[data-brand-note] { margin-top: 0; padding-top: 0; border-top: 0; }
.brand-chat-row { display: flex; align-items: center; gap: 6px; }
.brand-chat-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-size: 10px; }
.brand-chat-name { font-size: 13px; color: var(--ink); }
.brand-ai-mark { display: inline-flex; align-items: center; height: 15px; padding: 0 3px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--muted); font-size: 9px; line-height: 1; }

/* ==========================================================================
   公司后台 v4 · 新外壳与共用组件
   数值照 lanes/zk12-common.md 第四、五节：按钮 28/24/32、分段 32/28、
   开关 32×18、标签 22、面板 16、卡片 12、表格行 44、导航宽 160、顶栏 48。
   ========================================================================== */

/* ---------- 外壳 ---------- */
.mockbar { height: 32px; background: var(--r12-surface); border-bottom: 1px solid var(--r12-line); }
.mockbar-inner { display: flex; align-items: center; gap: 8px; height: 31px; padding: 0 12px; flex-wrap: nowrap; overflow: hidden; }
.mockbar-title { font-size: 12px; color: var(--r12-muted); letter-spacing: .08em; flex: none; }
.mockbar-note { font-size: 12px; color: var(--r12-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mockbar .seg-control { height: 24px; }
.mockbar .seg-control .seg-btn { height: 20px; padding: 0 10px; font-size: 12px; }
.mockbar .btn { height: 24px; }

.shell { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }
.nav-col { width: 160px; }
[data-shell-nav] {
  flex: none;
  width: 160px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  background: var(--r12-surface);
  border-right: 1px solid var(--r12-line);
}
[data-shell-logo] { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 4px; margin-bottom: 8px; min-width: 0; }
[data-shell-logo] [data-logo] {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: var(--logo-bg, var(--r12-pink));
  color: var(--logo-ink, #fff);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
[data-shell-logo] .shell-brand { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
[data-shell-logo] .shell-brand b { font-size: 13px; font-weight: 600; color: var(--r12-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-shell-logo] .shell-brand em { font-style: normal; font-size: 12px; color: var(--r12-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-shell-nav] .nav-list { display: flex; flex-direction: column; gap: 2px; }
[data-shell-nav] .nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--r12-muted);
  font-size: 13px;
  text-align: left;
}
[data-shell-nav] .nav-item .ico { width: 16px; height: 16px; flex: none; }
[data-shell-nav] .nav-item:hover { background: var(--r12-hover); color: var(--r12-ink); }
[data-shell-nav] .nav-item.is-on,
[data-shell-nav] .nav-item[aria-current="page"] { background: var(--r12-selected-bg); color: var(--r12-ink); font-weight: 600; }
[data-shell-nav] .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-shell-nav] .nav-group {
  margin: 14px 0 2px;
  padding: 0 10px;
  color: var(--r12-faint);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.02em;
  user-select: none;
  pointer-events: none;
}
/* 当前一级项下面展开的子项：缩进一级、字号小一号、高 32，不冒充一级导航项。 */
[data-shell-nav] .nav-subnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 4px;
  padding-left: 26px;
}
[data-shell-nav] .nav-subnav .subnav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--r12-muted);
  font-size: 12px;
  text-align: left;
  overflow: hidden;
}
[data-shell-nav] .nav-subnav .subnav-item .ico { width: 14px; height: 14px; flex: none; }
/* 名字一项都不许被压缩；地方不够时只让右边的数字缩。 */
[data-shell-nav] .nav-subnav .subnav-item span { flex: 0 0 auto; white-space: nowrap; }
[data-shell-nav] .nav-subnav .subnav-item b { flex: 0 1 auto; min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 500; color: var(--r12-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-shell-nav] .nav-subnav .subnav-item:hover { background: var(--r12-hover); color: var(--r12-ink); }
[data-shell-nav] .nav-subnav .subnav-item[aria-current="page"] { background: var(--r12-selected-bg); color: var(--r12-ink); font-weight: 600; }

.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
[data-shell-topbar] {
  flex: none;
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--r12-bg);
  border-bottom: 1px solid var(--r12-line);
  overflow: visible;
}
.shell-title-group { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
[data-shell-title] { font-size: 15px; font-weight: 600; line-height: 22px; color: var(--r12-ink); white-space: nowrap; flex: none; }
[data-shell-sub] { font-size: 12px; line-height: 18px; color: var(--r12-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 44vw; }
[data-shell-actions] { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
[data-shell-theme] { width: 28px; height: 28px; }
[data-shell-bell] { position: relative; width: 28px; height: 28px; }
[data-bell-count] {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--r12-running);
  color: var(--r12-bg);
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
}
[data-shell-user] {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 2px 8px 2px 2px;
  border: 1px solid var(--r12-line);
  border-radius: 999px;
  min-width: 0;
}
[data-shell-user] .avatar { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--r12-surface-3); color: var(--r12-ink); font-size: 11px; font-weight: 600; }
[data-shell-user] .who-name { font-size: 12px; font-weight: 600; color: var(--r12-ink); white-space: nowrap; }
[data-shell-user] .who-phone { font-size: 11px; color: var(--r12-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-shell-user] [data-role-chip] { height: 20px; padding: 0 6px; font-size: 11px; }
[data-shell-logout] { height: 24px; }

[data-shell-content] {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  background: var(--r12-bg);
}
[data-shell-content] .page { width: 100%; max-width: none; margin: 0; padding: 0; }
[data-shell-content] .page > * + * { margin-top: 8px; }
/* 公司视角的页头已整体搬进顶栏；平台/算力商详情页仍保留自己的大标题。 */
[data-shell-content] .module-grid,
[data-shell-content] .stat-grid,
[data-shell-content] .two-col,
[data-shell-content] .role-guide-grid,
[data-shell-content] .qr-grid,
[data-shell-content] .model-grid,
[data-shell-content] .d-card-grid,
[data-shell-content] .s-grid,
[data-shell-content] .ml-grid { gap: 10px; }
/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--r12-surface-3);
  color: var(--r12-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--r12-dur-2) var(--r12-ease), color var(--r12-dur-2) var(--r12-ease), transform var(--r12-dur-1) var(--r12-ease);
}
.btn .ico { width: 16px; height: 16px; flex: none; }
.btn:hover { background: var(--r12-hover); }
.btn:active { transform: scale(.99); }
.btn.is-sm, .btn-small { height: 24px; padding: 0 10px; font-size: 12px; }
.btn.is-lg { height: 32px; padding: 0 14px; font-size: 13px; }
.btn.is-quiet, .btn-quiet { background: transparent; color: var(--r12-muted); }
.btn.is-quiet:hover, .btn-quiet:hover { background: var(--r12-hover); color: var(--r12-ink); }
.btn.is-primary, .btn-main { background: var(--r12-pink); color: var(--r12-on-brand, #fff); }
.btn.is-primary:hover, .btn-main:hover { background: var(--r12-pink-hover); filter: none; }
.btn-primary { background: var(--r12-surface-3); color: var(--r12-ink); }
.btn-primary:hover { background: var(--r12-hover); }
.btn.is-plus { background: var(--r12-ok-soft); color: var(--r12-ok); }
.btn.is-minus { background: var(--r12-error-soft); color: var(--r12-error); }
.btn.is-plus:hover { background: var(--r12-ok-soft); color: var(--r12-ok); }
.btn.is-minus:hover { background: var(--r12-error-soft); color: var(--r12-error); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--r12-surface-3); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--r12-muted);
}
.icon-btn .ico { width: 16px; height: 16px; }
.icon-btn.is-sm { width: 24px; height: 24px; }
.icon-btn:hover { background: var(--r12-hover); color: var(--r12-ink); }

/* ---------- 分段、开关、标签 ---------- */
.seg-control {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--r12-line);
  border-radius: 999px;
  background: var(--r12-surface-2);
  vertical-align: middle;
}
.seg-control .seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--r12-muted);
  font-size: 13px;
  white-space: nowrap;
}
.seg-control .seg-btn:hover { background: var(--r12-hover); color: var(--r12-ink); }
.seg-control .seg-btn.is-on,
.seg-control .seg-btn[aria-pressed="true"] { background: var(--r12-selected-bg); color: var(--r12-ink); font-weight: 600; }
.seg-control.is-sm, .seg-control.seg-small { height: 28px; }
.seg-control.is-sm .seg-btn, .seg-control.seg-small .seg-btn { height: 22px; padding: 0 10px; font-size: 12px; }
.seg-count { font-variant-numeric: tabular-nums; opacity: .7; }

.switch {
  position: relative;
  width: 32px;
  height: 18px;
  flex: none;
  padding: 0;
  border: 1px solid var(--r12-line-strong);
  border-radius: 999px;
  background: var(--r12-surface-3);
}
.switch .knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--r12-muted);
  transition: transform var(--r12-dur-2) var(--r12-ease), background var(--r12-dur-2) var(--r12-ease);
}
.switch.is-on { background: var(--r12-ok-soft); border-color: var(--r12-ok); }
.switch.is-on .knob { transform: translateX(14px); background: var(--r12-ok); }

.chip, .tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--r12-surface-3);
  color: var(--r12-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.chip-ok, .tag-ok { background: var(--r12-ok-soft); color: var(--r12-ok); }
.chip-pending, .tag-pending { background: var(--r12-review-soft); color: var(--r12-review); }
.chip-warn, .tag-warn { background: var(--r12-review-soft); color: var(--r12-review); }
.chip-off, .tag-off { background: var(--r12-surface-3); color: var(--r12-muted); }
.chip-error { background: var(--r12-error-soft); color: var(--r12-error); }
.chip-running { background: var(--r12-running-soft); color: var(--r12-running); }
.bang { display: inline-grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: currentColor; color: var(--r12-bg); font-size: 9px; font-weight: 700; flex: none; }
.tag-pending .bang, .banner-pending .bang { background: var(--r12-review); }
.tag-warn .bang, .banner-warn .bang { background: var(--r12-review); }
.unit-tag { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--r12-surface-3); color: var(--r12-muted); font-size: 11px; }

/* ---------- 卡片、面板 ---------- */
.card {
  background: var(--r12-surface);
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-card);
  padding: 12px;
}
.card:hover { border-color: var(--r12-line-strong); }
.panel {
  padding: 12px;
  background: var(--r12-surface);
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-panel);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: 0;
}
.panel-head h2 { font-size: 14px; font-weight: 600; line-height: 20px; }
.panel-head p { margin-top: 2px; font-size: 12px; color: var(--r12-muted); }
.panel-action { display: flex; align-items: center; gap: 6px; flex: none; }

.kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label { font-size: 12px; color: var(--r12-muted); }
.kpi-value { font-size: 20px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--r12-ink); }
.kpi-sub { font-size: 12px; color: var(--r12-muted); }
.kpi-action { flex: none; }

.quick { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--r12-line); background: var(--r12-surface-2); text-align: left; color: var(--r12-ink); font: inherit; cursor: pointer; }
.quick:hover { border-color: var(--r12-line-strong); }
.quick-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--r12-surface-3); color: var(--r12-ink); }
.quick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quick-text b { font-size: 13px; font-weight: 600; }
.quick-text span { font-size: 12px; color: var(--r12-muted); }
.quick-badge { flex: none; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--r12-surface-3); color: var(--r12-muted); font-size: 11px; line-height: 18px; white-space: nowrap; }

/* ---------- 表格、筛选、工具行、二级侧栏 ---------- */
.table { width: 100%; border-collapse: collapse; }
.table thead th { height: 36px; padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--r12-muted); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--r12-line); }
.table tbody td { height: 44px; padding: 0 10px; font-size: 13px; border-bottom: 1px solid var(--r12-line); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

.filter-card { width: 200px; flex: none; padding: 10px; }
.filter-card-head { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 4px; }
.filter-card-title { font-size: 12px; color: var(--r12-muted); }
.filter-clear { border: 0; background: transparent; color: var(--r12-muted); font-size: 12px; padding: 0; }
.filter-clear:hover { color: var(--r12-ink); }
.filter-group { margin-top: 8px; }
.filter-group-title { padding: 4px; font-size: 12px; color: var(--r12-muted); }
.filter-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--r12-muted); font-size: 13px; text-align: left; }
.filter-item b { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--r12-faint); }
.filter-item:hover { background: var(--r12-hover); color: var(--r12-ink); }
.filter-item[aria-pressed="true"] { background: var(--r12-selected-bg); color: var(--r12-ink); font-weight: 600; }

.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.toolbar-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--r12-line-strong); border-radius: 10px; background: var(--r12-surface-3); color: var(--r12-muted); flex: 0 1 280px; min-width: 180px; }
.toolbar-search .ico { width: 16px; height: 16px; flex: none; }
.toolbar-search .input { flex: 1; height: 100%; padding: 0; border: 0; background: transparent; }
.toolbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.subnav { position: sticky; top: 0; width: 168px; flex: none; padding: 6px; }
.subnav-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--r12-muted); font-size: 13px; text-align: left; }
.subnav-item .ico { width: 16px; height: 16px; flex: none; }
.subnav-item span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subnav-item b { font-size: 12px; font-weight: 500; color: var(--r12-faint); font-variant-numeric: tabular-nums; }
.subnav-item:hover { background: var(--r12-hover); color: var(--r12-ink); }
.subnav-item[aria-current="page"] { background: var(--r12-selected-bg); color: var(--r12-ink); font-weight: 600; }

/* ---------- 空状态 ---------- */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; padding: 24px; color: var(--r12-muted); text-align: center; border: 0; }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--r12-surface-3); color: var(--r12-muted); }
.empty p { font-size: 13px; }

/* ---------- 上传区 ---------- */
.upload-area { position: relative; display: block; min-height: 120px; border: 1px dashed var(--r12-line-strong); border-radius: 12px; background: var(--r12-surface-2); overflow: hidden; cursor: pointer; }
.upload-area:hover { border-color: var(--r12-selected-border); }
.upload-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.upload-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 12px; color: var(--r12-muted); font-size: 13px; }
.upload-empty .ico { width: 24px; height: 24px; }
.upload-empty em { font-style: normal; font-size: 12px; color: var(--r12-faint); }
.upload-preview { position: relative; display: block; min-height: 120px; }
.upload-preview img { display: block; width: 100%; height: 100%; min-height: 120px; object-fit: cover; }
.upload-tools { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(0,0,0,.42); opacity: 0; transition: opacity var(--r12-dur-2) var(--r12-ease); }
.upload-area:hover .upload-tools { opacity: 1; }
.upload-tool { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--r12-pop-bg); color: var(--r12-ink); cursor: pointer; }

/* ---------- 拾色器 ---------- */
.color-field { display: inline-flex; align-items: center; gap: 8px; }
.color-swatch { width: 20px; height: 20px; flex: none; padding: 0; border: 1px solid var(--r12-line-strong); border-radius: 6px; cursor: pointer; }
.color-input { width: 100px; height: 32px; font-variant-numeric: tabular-nums; }
.color-pop-layer { position: fixed; inset: 0; z-index: 320; }
.color-pop { position: fixed; z-index: 321; width: 288px; padding: 12px; background: var(--r12-pop-bg); border: 1px solid var(--r12-line); border-radius: var(--r12-r-pop); box-shadow: var(--r12-shadow-pop); }
.color-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.color-preset { width: 100%; height: 22px; padding: 0; border: 1px solid var(--r12-line); border-radius: 6px; cursor: pointer; }
.color-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 10px; }
.color-cell { width: 100%; height: 22px; padding: 0; border: 0; border-radius: 4px; cursor: pointer; }
.color-hue { display: flex; align-items: center; gap: 8px; height: 28px; margin-top: 10px; color: var(--r12-muted); }
.color-hue input { flex: 1; }
.color-hex-input { width: 100%; height: 32px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.color-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }

/* ---------- 抽屉、弹窗、弹层、提示 ---------- */
.drawer-scrim { position: fixed; inset: 0; z-index: 200; display: flex; align-items: stretch; justify-content: flex-end; background: var(--r12-scrim); opacity: 0; transition: opacity var(--r12-dur-3) var(--r12-ease); }
.drawer-scrim.is-open { opacity: 1; }
.drawer { display: flex; flex-direction: column; width: 480px; max-width: calc(100vw - 24px); height: calc(100% - 24px); margin: 12px; background: var(--r12-pop-bg); border: 1px solid var(--r12-line); border-radius: 16px; box-shadow: var(--r12-shadow-dialog); transform: translateX(24px); transition: transform var(--r12-dur-4) var(--r12-ease-enter); }
.drawer-scrim.is-open .drawer { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--r12-line); flex: none; }
.drawer-head h2 { font-size: 15px; font-weight: 600; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--r12-line); flex: none; }

.dialog-scrim { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--r12-scrim); opacity: 0; transition: opacity var(--r12-dur-3) var(--r12-ease); }
.dialog-scrim.is-open { opacity: 1; }
.dialog { width: 480px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); display: flex; flex-direction: column; background: var(--r12-pop-bg); border: 1px solid var(--r12-line); border-radius: var(--r12-r-dialog); box-shadow: var(--r12-shadow-dialog); opacity: 0; transform: translateY(8px) scale(.985); animation: r12-dialog-in var(--r12-dur-4) var(--r12-ease-enter) forwards; }
@keyframes r12-dialog-in { to { opacity: 1; transform: none; } }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--r12-line); flex: none; }
.dialog-head h2 { font-size: 15px; font-weight: 600; }
.dialog-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--r12-line); flex: none; }

.menu-layer { position: fixed; z-index: 340; }
.menu-pop { padding: 6px; background: var(--r12-pop-bg); border: 1px solid var(--r12-line); border-radius: var(--r12-r-pop); box-shadow: var(--r12-shadow-pop); }
.menu-pop .menu-item, .menu-pop button { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 12px; background: transparent; color: var(--r12-ink); font-size: 13px; text-align: left; }
.menu-pop button:hover { background: var(--r12-hover); }
.r12-tip { position: fixed; z-index: 500; transform: translate(-50%, -100%); padding: 4px 8px; border-radius: 6px; background: var(--r12-pop-bg); border: 1px solid var(--r12-line); box-shadow: var(--r12-shadow-pop); color: var(--r12-ink); font-size: 12px; white-space: nowrap; pointer-events: none; }

/* ---------- 组件规范页 ---------- */
.kit-page { display: flex; flex-direction: column; gap: 8px; }
.kit-section { display: flex; flex-direction: column; gap: 8px; }
.kit-section-head { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px; }
.kit-section-head h2 { font-size: 14px; font-weight: 600; }
.kit-section-head span { font-size: 12px; color: var(--r12-muted); }
.kit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kit-name { min-width: 96px; font-size: 12px; color: var(--r12-muted); }
.kit-stack { display: flex; flex-direction: column; gap: 8px; }
.kit-toolbar-next { min-height: 44px; border: 1px solid var(--r12-line); border-radius: 12px; background: var(--r12-surface-2); }
.kit-split { display: flex; gap: 8px; align-items: flex-start; }