/* 🔴 D168 段 3:`--ink / --line / --paper / --card` 四个**搬去 `design-tokens.css`** 了 ——
   那四个在合同图里也有一份,值略有出入(paper #fbf8f5 vs #faf8f3、ink #2d2826 vs #23241f、
   line #e4d9d2 vs #e3e0d6)。两处各写一份 = 一件事两处真相,谁改了谁都不知道。
   现在唯一定义在 `design-tokens.css`(它在本文件**之后**加载),这里只留本仓自己的那几个。 */
/* 🔴 06a §五 现查出来的一件「一件事两处真相」:
   这一组本仓自己的调色板,和合同图那份令牌**语义重复**——
   `--muted #897f7a` 压白底只有 **3.9:1**(乙档里最大的一坨:348 条全是它),
   而合同图的 `--sub #6d6f66` 压白底是 **6.0:1**。同一个「次要文字」两个值,
   低的那个还把 AA 拖下去了。所以能对上语义的**一律指到合同图那份**,值不再本仓自己定。

   🔴 06f §三 店主裁:`--accent / --accent-dark`(品牌金)**归一到 `--brand / --brandd`,两个名字从仓里消失**。
   上一版这里写着「故意不动 —— 换成 --brand 会让整套皮的金变沉」,**那个顾虑在「当字」这件事上是反的**:
   店主现查出三条 ——
     ① 这两个只在 `:root` 里定义**一次**,两个深色块里各 **0 处** → **它压根没有深色档的值**,
        深色下是「浅色档的金压在新暖棕面上」,`--accent-dark` 压深卡只有 **3.81**,而它主要当**字**用、全仓 76 处;
     ② 浅色档里 `--accent` 压白 **2.32**,比 `--brand` 的 2.88 **还差** —— 那个"更亮更好看"的金,当字反而更看不清;
     ③ 归一后 `--brandd` 深档 **9.59**、浅档 **4.73**。
   走法:当字的 → `--brandd`;当面 / 边框 / 描边的 → `--brand`。
   「金看着够不够亮」是**审美问题,归店主**:要亮就去改合同图里 `--brand` 的值,
   **任何时候不许两个值并存** —— 那正是一路在拆的第二套真相。
   判据 `test-color-usage` ⑤:本仓 `--accent` 定义 0 处、使用 0 处,塞回一处当场红并点名行号。 */
:root {
  --muted: var(--sub);
  --soft: var(--wall);
  /* 🔴  是**面**不是字:它给「选中的黑胶囊」当底(黑底白字)。
     我头一版指到 --ink,深色档下 --ink 翻成浅色 → 浅底 + 浅字 = 看不见(甲档当场从 0 涨到 16)。
     这跟  那个病一模一样 —— **字色令牌不许当面用**。面要的是 --hero(两档都深)。 */
  --black: var(--hero);
  --success: var(--good);
  --danger: var(--bad);
  --shadow: 0 16px 42px rgba(45, 40, 38, 0.09);
}

/* 🔴 06i:全站 <a> 的**底色**规矩 —— 在这一条之前,仓里**一条 `a` 规则都没有**,
   于是所有没带 class 的链接都是**浏览器默认蓝**(那个色值不写进来:写死色棘轮连注释一起数)。浅色档压白还能读(~8:1),
   **深色档压深卡只有 1.66:1 = 看不见**。顾客端「订单详情 → 查看服务确认单原件」
   正是被 06i 的登录态夹具**第一次**扫出来的 —— 那一页此前从没进过任何一份红榜。
   用金色文字令牌:浅 4.73 / 深 9.59,两档都过 AA,且与签单页 .claim .alt a 的写法一致。
   带 class 的链接(.ghost-link / .fin-info 那些)有自己的规则,不受这一条影响。
   ⚠️ 上一版我把这段插在 `.simulator-logic-note button` 的**选择器中间**,
      结果既没生效、又把 `button{margin-top:8px}` 变成了全局规则 —— 现测发现并已还原。
      教训:往 CSS 里插规则要认**顶层块的边界**,不许按「第一次出现的某个词」下刀。 */
a {
  color: var(--brandd);
}

.wechat-mock-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 18px;
  align-items: start;
}

.wechat-session-panel,
.wechat-detail-panel {
  min-height: 0;
}

.wechat-session-list {
  display: grid;
  gap: 10px;
}

.wechat-session-group-title {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.wechat-status-card,
.wechat-mock-inject,
.wechat-customer-simulator {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wall);
}

.wechat-status-card label,
.wechat-mock-inject label,
.wechat-customer-simulator label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.wechat-status-card input,
.wechat-mock-inject input,
.wechat-mock-inject textarea,
.wechat-customer-simulator input,
.wechat-customer-simulator select,
.wechat-customer-simulator textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.wechat-customer-simulator p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.wechat-phone-preview {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--wall);
}

.wechat-phone-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.wechat-phone-head span {
  color: var(--brandd);
}

.wechat-phone-timeline {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  padding: 12px;
}

.wechat-check-grid {
  display: grid;
  gap: 6px;
}

.wechat-check-grid span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.wechat-check-grid .ok {
  color: var(--good);
}

.wechat-check-grid .missing {
  color: var(--brandd);
}

.wechat-session-card {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.wechat-session-card.active {
  border-color: var(--ink);
  box-shadow: 0 10px 24px rgba(40, 36, 34, 0.08);
}

.wechat-session-card strong {
  font-size: 18px;
  line-height: 1.25;
}

.wechat-session-card small {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.wechat-session-card em {
  color: var(--gold);
  font-style: normal;
  font-weight: 800;
}

.wechat-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.wechat-detail-head h2 {
  margin: 0;
  font-size: 28px;
}

.mock-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--hero);
  color: var(--heroink);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.wechat-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.wechat-info-grid > div {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wall);
}

.wechat-info-grid strong {
  font-size: 16px;
}

.wechat-info-grid span {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.wechat-timeline-section,
.quote-workbench {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.wechat-timeline-section h3,
.quote-workbench h3 {
  margin: 0 0 14px;
  font-size: 22px;
}

.knowledge-match-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wall);
}

.knowledge-match-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.knowledge-match-head h3 {
  margin: 0 0 5px;
  font-size: 22px;
}

.knowledge-match-head p,
.knowledge-private-note {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.knowledge-match-head span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--hero);
  color: var(--heroink);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.knowledge-intents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.knowledge-intents em {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--tagmbg);
  color: var(--brandd);
  font-style: normal;
  font-weight: 900;
}

.knowledge-match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.knowledge-match-card {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.knowledge-match-card.tenant {
  border-color: rgba(199, 162, 123, 0.65);
  background: var(--card);
}

.knowledge-match-card.handoff {
  background: var(--wall);
}

.knowledge-match-card small {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.knowledge-match-card strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-match-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.wechat-timeline {
  display: grid;
  gap: 12px;
}

.wechat-bubble {
  max-width: min(760px, 88%);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.wechat-bubble.customer {
  justify-self: end;
  background: var(--hero);
  color: var(--heroink);
}

.wechat-bubble.staff {
  justify-self: start;
  border-color: rgba(71, 115, 95, 0.26);
  background: var(--card);
}

.wechat-bubble span {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.wechat-bubble.customer span {
  color: var(--brandd);
}

.wechat-bubble.staff span {
  color: var(--good);
}

.wechat-bubble p {
  margin: 0;
  line-height: 1.55;
  font-weight: 700;
}

.wechat-message-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.wechat-message-images figure {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}

.wechat-message-images img {
  display: block;
  width: 100%;
  height: 86px;
  object-fit: cover;
}

.wechat-message-images figcaption {
  overflow: hidden;
  padding: 5px 6px;
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  opacity: 0.82;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simulator-body {
  height: 100vh;
  overflow: hidden;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(200, 164, 126, 0.14), transparent 28%),
    var(--paper);
}

.simulator-shell {
  width: min(1440px, calc(100vw - 36px));
  height: 100vh;
  margin: 0 auto;
  padding: 22px 0 34px;
  display: grid;
  grid-template-rows: max-content minmax(0, 1fr);
  box-sizing: border-box;
}

.simulator-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.simulator-layout {
  display: grid;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.simulator-control-card,
.simulator-chat-card {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.simulator-control-card {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.simulator-control-card label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.simulator-control-card input,
.simulator-control-card select,
.simulator-control-card textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.simulator-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.simulator-test-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wall);
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.simulator-test-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.simulator-test-card ol {
  margin: 0;
  padding-left: 18px;
}

.simulator-test-card li + li {
  margin-top: 5px;
}

.simulator-logic-note {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wall);
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.simulator-logic-note summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.simulator-logic-note p {
  margin: 8px 0;
  line-height: 1.55;
}

.simulator-logic-note textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.simulator-logic-note button {
  margin-top: 8px;
}

.simulator-upload-grid {
  margin-top: -4px;
}

.simulator-chat-card {
  display: grid;
  grid-template-rows: max-content max-content max-content minmax(0, 1fr) max-content;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.simulator-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--wall);
}

.simulator-chat-head h2 {
  margin: 2px 0 0;
  font-size: 24px;
}

.simulator-chat-head span {
  color: var(--muted);
  font-weight: 900;
}

.simulator-thread {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding: 20px;
  background:
    linear-gradient(180deg, var(--card), var(--card)),
    #f8f2ed;
}

.simulator-bubble {
  max-width: min(780px, 84%);
}

.simulator-bubble.pending {
  opacity: 0.72;
}

.simulator-bubble.pending p::after {
  content: ' · 发送中';
  color: var(--brandd);
  font-size: 12px;
  font-weight: 900;
}

.simulator-empty {
  align-self: center;
  justify-self: center;
  max-width: 420px;
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--card);
  text-align: center;
}

.simulator-empty strong {
  font-size: 22px;
}

.simulator-empty p {
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}

.simulator-conversation-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}.sim-conversation-chip {
  min-width: 150px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--wall);
  padding: 10px 12px;
  color: var(--ink);
  text-align: left;
}

.sim-conversation-chip.active {
  border-color: var(--black);
  background: var(--black);
  color: var(--heroink);
}

.sim-conversation-chip strong,
.sim-conversation-chip span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sim-conversation-chip span {
  margin-top: 3px;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  opacity: 0.72;
}

.simulator-state-panel {
  min-height: 0;
  max-height: 174px;
  overflow: auto;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  padding: 12px 14px;
}

.sim-state-empty,
.sim-state-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px 14px;
}

.sim-state-empty {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-weight: 850;
}

.sim-state-empty strong,
.sim-state-card strong {
  color: var(--ink);
  font-size: 14px;
}

.sim-state-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 2fr);
  gap: 12px;
  align-items: start;
}

.sim-state-card > div {
  display: grid;
  gap: 4px;
}

.sim-state-card > div span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.sim-state-card dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.sim-state-card p {
  min-width: 0;
  margin: 0;
  border-radius: 8px;
  background: var(--wall);
  padding: 8px;
}

.sim-state-card dt,
.sim-state-card dd {
  margin: 0;
}

.sim-state-card dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.sim-state-card dd {
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simulator-feedback textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card);
}

.simulator-composer {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 2;
  min-height: 0;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--card);
}

.simulator-compose-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.simulator-compose-row textarea {
  width: 100%;
  min-height: 48px;
  max-height: 140px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--wall);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.simulator-compose-row button[disabled] {
  cursor: wait;
  opacity: 0.68;
}.sim-upload-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  background: var(--card);
  color: var(--brandd);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.sim-upload-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.simulator-compose-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.inline-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--black);
}

.simulator-composer .simulator-upload-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.simulator-composer .simulator-upload-grid figure {
  width: 82px;
  flex: 0 0 82px;
}

.simulator-composer .simulator-upload-grid img {
  aspect-ratio: 1 / 0.74;
}

.simulator-composer .simulator-help {
  padding: 0 2px;
}

.ai-feedback-editor {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.ai-feedback-editor summary {
  cursor: pointer;
  color: var(--brandd);
  font-size: 12px;
  font-weight: 900;
}

.ai-feedback-body {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.ai-feedback-body label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.ai-feedback-body textarea {
  width: min(640px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.manual-reply-panel.needs-human {
  border-color: rgba(163, 76, 72, 0.32);
  background: var(--card);
}

.quote-workbench label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 900;
}

.quote-workbench textarea,
.quote-workbench input,
.quote-workbench select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.mock-image-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mock-image-preview-grid figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
}

.mock-image-preview-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.mock-image-preview-grid figcaption {
  overflow: hidden;
  padding: 7px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-list {
  display: grid;
  gap: 12px;
}

.workflow-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wall);
}

.workflow-card.quote-card {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.manual-draft-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.manual-draft-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.manual-draft-grid select,
.manual-draft-grid input,
.manual-draft-grid textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.manual-draft-grid .quote-notes-field {
  grid-column: 1 / -1;
}

.draft-link-preview {
  white-space: normal !important;
  word-break: break-all;
}

.workflow-card.reminder {
  background: var(--card);
}

.workflow-summary,
.workflow-card div:first-child {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.workflow-card strong,
.workflow-card small,
.workflow-card p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.workflow-card small,
.workflow-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.workflow-card p {
  white-space: nowrap;
}

.quote-reference-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0 2px;
  border-top: 1px solid var(--line);
}

.quote-reference-strip figure {
  flex: 0 0 116px;
  margin: 0;
}

.quote-reference-strip img {
  width: 116px;
  height: 88px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--card);
}

.quote-reference-strip figcaption,
.quote-image-empty {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.quote-response-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.quote-response-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.quote-response-grid .quote-notes-field {
  grid-column: 1 / -1;
}

.quote-response-grid input,
.quote-response-grid select,
.quote-response-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  box-sizing: border-box;
}

.workflow-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.action-row.wrap {
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .simulator-body {
    height: auto;
    overflow: auto;
  }

  .simulator-shell {
    height: auto;
    display: block;
  }

  .wechat-mock-grid,
  .wechat-info-grid,
  .knowledge-match-grid,
  .simulator-layout {
    grid-template-columns: 1fr;
  }

  .wechat-detail-head,
  .knowledge-match-head {
    display: grid;
  }

  .wechat-detail-head h2 {
    font-size: 24px;
  }

  .wechat-bubble {
    max-width: 100%;
  }

  .simulator-topbar {
    display: grid;
  }

  .simulator-layout {
    height: auto;
    min-height: 0;
  }

  .simulator-chat-card {
    grid-template-rows: max-content max-content max-content minmax(180px, 1fr) max-content;
    height: calc(100vh - 24px);
    min-height: 560px;
    max-height: none;
  }

  .simulator-compose-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .sim-state-card {
    grid-template-columns: 1fr;
  }

  .sim-state-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-response-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 860px) {
  .simulator-shell {
    width: min(1440px, calc(100vw - 24px));
    padding-top: 12px;
    padding-bottom: 18px;
  }

  .simulator-topbar {
    gap: 10px;
    margin-bottom: 10px;
  }

  .simulator-layout {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    height: calc(100vh - 124px);
    min-height: 0;
  }

  .simulator-chat-card {
    grid-template-rows: max-content max-content max-content minmax(120px, 1fr) max-content;
    height: 100%;
    min-height: 0;
  }

  .simulator-chat-head {
    padding: 12px 14px;
  }

  .simulator-chat-head h2 {
    font-size: 20px;
  }

  .simulator-conversation-strip {
    padding: 8px;
  }

  .sim-conversation-chip {
    min-width: 132px;
    padding: 8px 10px;
  }

  .simulator-state-panel {
    max-height: 92px;
    padding: 8px;
  }

  .sim-state-empty,
  .sim-state-card {
    padding: 8px 10px;
  }

  .sim-state-card {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .sim-state-card dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .sim-state-card p {
    padding: 5px 6px;
  }

  .simulator-composer {
    gap: 6px;
    padding: 8px;
  }

  .simulator-compose-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
  }

  .sim-upload-button,
  .simulator-compose-row textarea,
  .simulator-compose-row .primary {
    min-height: 42px;
  }

  .simulator-compose-row textarea {
    padding: 9px 10px;
  }

  .simulator-compose-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
  }

  .inline-toggle {
    min-width: 0;
  }

  .inline-toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .simulator-thread {
    padding: 12px;
  }
}

@media (max-width: 560px) {
  .simulator-compose-row {
    grid-template-columns: 1fr;
  }

  .sim-upload-button {
    width: 100%;
  }
}

* {
  box-sizing: border-box;
}

/* 🔴 D168 段 3(字体三件套,合同图第 2 行那三个 family):
   正文 `Noto Sans SC` / 标题 `Noto Serif SC` / **数字 `Fraunces`**(数字那一支挂在 `.dh-*` 上)。
   今天走 Google Fonts 链接(方案①,admin.html 里那一行);自托管 woff2 是方案②,已进上线批。
   后面的系统字体是**兜底**,不是「假装是 Noto」—— 网络取不到时页面照样能读。 */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Noto Sans SC', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}
h1, h2, h3, .section-title { font-family: 'Noto Serif SC', Georgia, serif; }

.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  /* 令牌化:原来写死 `#fff`,深色态下就是一张白卡贴在深底上(一件事一处真相) */
  background: var(--card);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  /* 🔴 05z 现测:浏览器给 button 的默认字色是 `buttontext`(黑),**不继承**页面的 --ink ——
     于是深色档下所有「没写 color 的按钮」都是黑字压深卡,量出来 1.33:1(看不见)。
     一行收干净:按钮默认跟着上下文的字色走。写死了 color 的按钮不受影响。 */
  color: inherit;
}

.shell {
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 24px 0 48px;
}

.topbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.brand,
.ghost-link {
  color: inherit;
  text-decoration: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--black);
  color: var(--brandd);
  font-weight: 800;
  overflow: hidden;
  padding: 6px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 22px;
}

.brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-lang-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}

.admin-lang-toggle .toggle {
  min-height: 32px;
  padding: 6px 10px;
}

.ghost-link,
.toggle,
.ghost {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  padding: 8px 14px;
  font-weight: 700;
}

.toggle.active,
.ghost:hover {
  background: var(--black);
  color: var(--heroink);
  border-color: var(--black);
}

.customer-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.25fr);
  gap: 18px;
  align-items: start;
}

.booking-panel,
.detail-panel,
.orders-panel,
.admin-card,
.admin-main {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.booking-panel,
.detail-panel,
.orders-panel,
.admin-card,
.admin-main {
  padding: 18px;
}

.panel-heading h1,
.section-row h1,
.section-row h2,
.admin-card h2,
.detail-panel h3 {
  margin: 0;
}

.panel-heading h1 {
  font-size: 30px;
  line-height: 1.1;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--brandd);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  margin: 18px 0;
  background: var(--card);
}

.segment {
  min-height: 48px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  font-weight: 850;
}

.segment.active {
  background: var(--black);
  color: var(--heroink);
}

.service-list,
.admin-list,
.service-admin-list {
  display: grid;
  gap: 12px;
}

.service-card {
  width: 100%;
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
  text-align: left;
}

.service-card.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(200, 164, 126, 0.22);
}

.service-card img,
.visual-hero img,
.booking-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--soft);
}

.service-card img {
  height: 112px;
  border-radius: 8px;
}

.service-card h2 {
  margin: 2px 0 6px;
  font-size: 20px;
  line-height: 1.2;
}

.service-card p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.45;
}

.meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 800;
}

.meta .price {
  color: var(--brandd);
}

.quote-hint {
  display: block;
  margin-top: 8px;
  color: var(--brandd);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.price-boundary-box {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 14px;
}

.price-boundary-box strong {
  color: var(--ink);
  font-size: 15px;
}

.price-boundary-box p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 680;
  line-height: 1.55;
}

.price-boundary-box small {
  color: var(--brandd);
  font-weight: 850;
}

.visual-hero {
  min-height: 260px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  align-items: end;
  padding: 22px;
  margin-bottom: 18px;
  color: var(--heroink);
  background: var(--black);
}

.visual-hero img {
  position: absolute;
  inset: 0;
  opacity: 0.72;
}

.visual-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), var(--hero));
}

.visual-hero > div {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.visual-hero h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.05;
}

.visual-hero p:last-child {
  margin: 0;
  color: var(--heroink);
  font-size: 17px;
  line-height: 1.45;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-grid.tight {
  gap: 10px;
}

label {
  display: grid;
  gap: 8px;
}

label span,
.summary-bar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(200, 164, 126, 0.18);
}

.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 12px;
}

.subtle {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.slot-grid,
.addon-grid,
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.slot,
.addon,
.metric {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  padding: 10px;
  font-weight: 800;
}

.slot.active,
.addon.active {
  border-color: var(--brand);
  background: var(--tagmbg);
  color: var(--brandd);
}

.addon {
  display: grid;
  gap: 4px;
  text-align: left;
}

.addon small {
  color: var(--muted);
  font-weight: 700;
}

.notes {
  margin-top: 18px;
}

.summary-bar {
  position: sticky;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
  margin-top: 18px;
  box-shadow: var(--shadow);
}

.summary-bar strong {
  display: block;
  margin-top: 2px;
  font-size: 24px;
  color: var(--brandd);
}
/* 🔴 主按钮(店主 06c §二 认的建议,06e 落地)· **金底不动,字改深**
   原来是奶白字压金底 = **2.02:1**(比更早的白字 2.32 还低)——读得清但过不了 AA,
   而金色来自合同图,不能为了对比度去改图。所以改字不改底:
     · 浅色档:`--brand` 底 + `--hero` 字 → **5.26:1**
     · 深色档:同两个令牌 → **9.39:1**
     (色值不写进注释 —— 写死色棘轮连注释一起数,而且值本来就该只在令牌文件里有一份)
   再把字号/字重推到 WCAG 的**大字档**(≥18.66px 且 ≥700),门槛从 4.5 降到 3.0 —— 双保险。
   ⚠️ 底色走 `--brand`(合同图令牌),不再走本仓自己那个 `--accent`:
      一件事一处真相,金色只有令牌那一份。

   ⚠️⚠️ **为什么拿 `--hero` 当字色 —— 别顺手「修」掉**(店主 06f §二 要求写清)
   `--hero` 名义上是个**面色**令牌(它给英雄区当底),这里却拿来当**字色**用。
   看着像手滑,不是:它是**两档里最深的那个暖棕**(深色档里比浅色档还更深一层),
   而金底在两档里都是浅的 —— 所以「最深的暖棕压在金底上」正是这颗按钮该有的字色,
   **一个令牌同时管住两档**,不用按档各指一个字色。
   (色值一律不写进注释:写死色棘轮连注释一起数,而且值本来就只该在令牌文件里有一份。)
   下一个人若把它改回 `--heroink`(奶白,同族里最像样的那个误改),两档分别只剩 2.52 / 1.73 ——
   深档那 1.73 几乎看不见。`test-color-usage` ①b 会当场红并点到本文件的行号。 */
.primary {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: var(--hero);
  padding: 10px 18px;
  font-size: 19px;      /* ≥18.66px + 下面的 850 字重 = WCAG 大字档,门槛 3.0 */
  font-weight: 850;
}

.primary:hover {
  background: var(--brandd);   /* 悬停压深一档,仍在令牌里 */
}

.primary:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.primary.slim {
  min-height: 40px;
}

.primary.full {
  width: 100%;
}

.orders-panel {
  margin-top: 18px;
}

.empty-state {
  min-height: 140px;
  display: grid;
  place-items: center;
  gap: 6px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.empty-state strong {
  color: var(--ink);
}

.booking-result,
.booking-item {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
}

.booking-image {
  height: 118px;
  border-radius: 8px;
}

.booking-copy h3,
.booking-copy p {
  margin: 0;
}

.booking-copy h3 {
  font-size: 22px;
}

.booking-copy p {
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
}

.status {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border-radius: 999px;
  background: var(--soft);
  color: var(--brandd);
  padding: 4px 10px;
  font-weight: 850;
  white-space: nowrap;
}

.status.CONFIRMED,
.status.COMPLETED {
  background: var(--wall);
  color: var(--success);
}

.status.CANCELLED,
.status.EXPIRED {
  background: var(--badbg);
  color: var(--danger);
}

/* D51:售后状态入网页 —— 三态配色同小程序 orders 徽标(签署绿/更正暖橙/售后蓝) */
.status.AFTER_SALES {
  background: var(--tagwbg);
  color: var(--tagw);
}
.status.order-badge { font-weight: 700; }
.order-badge.badge-signed { background: var(--wall); color: var(--good); }
.order-badge.badge-amended { background: var(--card); color: var(--brandd); }
.order-badge.badge-aftersales { background: var(--tagwbg); color: var(--tagw); }

.booking-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(20px);
  min-width: min(420px, calc(100vw - 32px));
  border-radius: 8px;
  background: var(--black);
  color: var(--heroink);
  padding: 12px 16px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
  text-align: center;
  font-weight: 800;
  z-index: 10;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.admin-shell {
  width: min(1320px, calc(100vw - 32px));
}

.token-input {
  width: 190px;
  min-height: 40px;
  border-radius: 999px;
}

.metric-grid {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
}

.metric {
  display: grid;
  min-height: 96px;
  align-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: inherit;
  padding: 16px;
  text-align: left;
}

.metric strong {
  font-size: 30px;
}

.metric.revenue-metric {
  background: var(--wall);
  border-color: var(--brand);
}

.admin-app {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-workspace,
.admin-page,
.admin-dashboard-page {
  display: grid;
  gap: 18px;
}

.admin-sidebar {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 10px;
  box-shadow: var(--shadow-soft);
}.sidebar-link {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0 14px;
  text-align: left;
  font-size: 16px;
  font-weight: 900;
}

.sidebar-link.active {
  background: var(--black);
  color: var(--heroink);
}

.dashboard-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
}

.dashboard-chart-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 230px;
  width: 100%;
  border: 1px solid var(--line);
  padding: 18px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dashboard-chart-card:hover,
.metric:hover,
.dashboard-detail-card:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.dashboard-chart-card h2 {
  margin: 0;
  font-size: 38px;
}

.dashboard-card-cue {
  border-radius: 999px;
  background: var(--soft);
  color: var(--brandd);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 900;
}

.chart-stat-row,
.traffic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px 14px;
  color: var(--muted);
  font-weight: 850;
}

.traffic-row {
  width: 100%;
  color: var(--ink);
  text-align: left;
}

.chart-stat-row strong,
.traffic-row strong {
  color: var(--ink);
  font-size: 20px;
}

.chart-bar-row {
  display: grid;
  gap: 8px;
}

.chart-bar-row > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-weight: 850;
}

.chart-bar-row strong {
  color: var(--ink);
}

.chart-bar-row i {
  display: block;
  height: 12px;
  min-width: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c9a47d, var(--hero));
}

.dashboard-detail-panel {
  padding: 18px;
}

.dashboard-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.dashboard-detail-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 10px;
  color: inherit;
  text-align: left;
}

.dashboard-detail-card img,
.mini-avatar {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
}

.mini-avatar {
  display: grid;
  place-items: center;
  background: var(--soft);
  color: var(--black);
  font-size: 24px;
  font-weight: 950;
}

.dashboard-detail-card span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.dashboard-detail-card strong,
.dashboard-detail-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-detail-card small {
  color: var(--muted);
  font-weight: 800;
}

.ai-panel,
.ai-result-box,
.ai-copy-box {
  display: grid;
  gap: 12px;
}

.ai-panel {
  padding: 18px;
}

.ai-brief-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
}

.ai-list-card,
.ai-result-box,
.ai-copy-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
}

.ai-list-card strong,
.ai-copy-box strong {
  display: block;
  margin-bottom: 6px;
}

.ai-list-card p,
.ai-copy-box p,
.ai-result-box p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.ai-list-card p + p,
.ai-result-box p + p {
  margin-top: 8px;
}

.ai-result-box p {
  display: grid;
  gap: 4px;
}

.ai-result-box span,
.ai-copy-box small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ai-result-box strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}

.ai-mock-banner {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  background: var(--card);
  padding: 10px;
}

.ai-mock-banner strong {
  color: var(--brandd);
  font-size: 13px;
}

.ai-mock-banner span {
  color: var(--muted);
  line-height: 1.45;
}

.customer-ai-result {
  grid-column: 1 / -1;
}

.ai-gallery-card,
.ai-gallery-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
}

.ai-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ai-gallery-tile {
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 10px;
}

.gallery-tile-image {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 8px;
  background: var(--wall);
  cursor: pointer;
  padding: 0;
}

.gallery-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-tile-image .gallery-status {
  position: absolute;
  left: 8px;
  top: 8px;
}

.gallery-tile-copy {
  display: grid;
  gap: 4px;
}

.gallery-tile-copy h3,
.gallery-tile-copy p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-tile-copy h3 {
  color: var(--ink);
  font-size: 16px;
}

.gallery-tile-copy p,
.gallery-tile-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.ai-gallery-card > img {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  object-fit: cover;
}

.ai-gallery-row {
  align-items: start;
  grid-template-columns: 152px minmax(0, 1fr);
}.gallery-main-button {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 152px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  padding: 0;
}

.gallery-main-button img,
.gallery-strip img,
.share-photo-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-main-button span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
}

.gallery-row-body {
  display: grid;
  gap: 12px;
}

.gallery-status-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.gallery-status {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  padding: 7px 10px;
}

.gallery-status.uploaded {
  background: var(--wall);
  color: var(--muted);
}

.gallery-status.processing {
  background: var(--tagmbg);
  color: var(--brandd);
}

.gallery-status.review {
  background: var(--wall);
  color: var(--good);
}

.gallery-status.ready {
  background: var(--hero);
  color: var(--heroink);
}

.gallery-strip {
  display: grid;
  grid-template-columns: repeat(6, 54px);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.gallery-strip img {
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.gallery-expanded,
.gallery-share-grid,
.share-original-grid {
  display: grid;
  gap: 14px;
}

.gallery-image-pairs {
  display: grid;
  gap: 12px;
}

.gallery-image-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gallery-image-pair figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 8px;
}

.gallery-image-pair img {
  width: 100%;
  height: 220px;
  border-radius: 6px;
  object-fit: cover;
}

.gallery-image-pair figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.edited-preview {
  filter: brightness(1.05) contrast(1.04) saturate(1.08);
}

.gallery-platform-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wall);
  padding: 12px;
}

.share-link-button {
  text-decoration: none;
}

.gallery-detail-page,
.gallery-detail-section {
  display: grid;
  gap: 14px;
}

.gallery-detail-hero {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
}

.gallery-detail-hero > img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
}

.gallery-meta-grid {
  margin-top: 12px;
}

.gallery-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.gallery-review-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 8px;
}

.gallery-review-card > img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
}

.gallery-review-actions {
  display: grid;
  gap: 8px;
}

.gallery-platform-list {
  display: grid;
  gap: 10px;
}

.gallery-platform-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
}

.active-pill {
  background: var(--ink);
  color: var(--heroink);
}

.upload-inline {
  position: relative;
  overflow: hidden;
}

.upload-inline input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.portfolio-preview-grid,
.technician-work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.portfolio-preview-card,
.technician-work-grid a {
  overflow: hidden;
  display: block;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 0;
}

.portfolio-preview-card img,
.technician-work-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-page-web,
.technician-portfolio-section {
  display: grid;
  gap: 16px;
}

.portfolio-page-web > .technician-work-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-platform-row,
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.share-shell {
  width: min(100vw - 32px, 960px);
  margin: 0 auto;
  padding: 28px 0 48px;
}

.share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.share-card {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px;
}

.share-photo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 12px;
}

.share-main-photo {
  overflow: hidden;
  height: 420px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.share-main-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.share-photo-strip {
  display: grid;
  align-content: start;
  gap: 10px;
}.share-photo-strip button {
  overflow: hidden;
  height: 84px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  padding: 0;
}

.share-photo-strip button.active {
  border-color: var(--brand);
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.info-detail-card {
  cursor: default;
}

.technician-performance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 12px;
}

.technician-performance-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 14px;
}

.technician-performance-card h3 {
  margin: 0 0 6px;
}

.technician-performance-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.staff-performance-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}

.performance-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.performance-numbers span {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  background: var(--soft);
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.performance-numbers strong {
  color: var(--ink);
  font-size: 18px;
}

.finance-panel {
  padding: 18px;
}

.finance-form {
  display: grid;
  gap: 14px;
}

.finance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
}

.finance-grid p {
  display: grid;
  gap: 6px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 14px;
}

.finance-grid span,
.customer-stats span {
  color: var(--muted);
  font-weight: 800;
}

.finance-grid strong {
  font-size: 24px;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(540px, 1fr) 380px;
  gap: 18px;
  align-items: start;
}

.admin-card + .admin-card {
  margin-top: 18px;
}

.admin-card h2 {
  font-size: 20px;
  margin-bottom: 14px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.check-row input {
  width: 18px;
  min-height: 18px;
}

.service-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 14px;
}

.compact-row {
  align-items: center;
  margin-bottom: 12px;
}

.service-admin-row h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.service-admin-row p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.inline-edit {
  display: grid;
  grid-template-columns: minmax(96px, 124px) minmax(96px, 124px) auto auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.inline-edit label {
  min-width: 0;
}

.inline-edit input {
  min-width: 96px;
  width: 100%;
  text-align: center;
}

.service-editor-card {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  background: var(--wall);
}

.service-editor-card h3 {
  margin: 0;
  font-size: 18px;
}

.service-editor-card textarea {
  min-height: 72px;
  resize: vertical;
}

.service-image-field {
  display: grid;
  gap: 10px;
}

.service-image-field img {
  width: min(320px, 100%);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.service-image-field input[type='file'] {
  min-height: auto;
  border-style: dashed;
  background: var(--card);
  padding: 12px;
}

.service-image-field small {
  color: var(--muted);
  font-weight: 800;
}

.admin-tabs,
.filter-row,
.calendar-controls {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}.admin-tab {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  padding: 8px 14px;
  font-weight: 850;
}

.admin-tab.active {
  background: var(--black);
  border-color: var(--black);
  color: var(--heroink);
}

.filter-dropdown {
  position: relative;
}

.filter-dropdown summary {
  display: grid;
  min-width: 104px;
  min-height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  padding: 0 16px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.filter-dropdown summary::-webkit-details-marker {
  display: none;
}

.filter-dropdown[open] select {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 190px;
  min-height: 44px;
  z-index: 3;
  box-shadow: var(--shadow-soft);
}

.filter-row label {
  min-width: 180px;
}

.booking-date-group + .booking-date-group {
  margin-top: 18px;
}

.booking-detail-panel {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px;
  background: var(--wall);
  box-shadow: var(--shadow);
}

.booking-detail-panel h2,
.booking-detail-panel h3 {
  margin: 0;
}

.booking-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.booking-detail-grid p {
  display: grid;
  gap: 4px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 10px;
}

.booking-detail-grid span,
.booking-detail-section .subtle {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.booking-detail-section {
  display: grid;
  gap: 10px;
}

.booking-notes-box {
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
  color: var(--ink);
  font-weight: 750;
  line-height: 1.55;
  white-space: pre-wrap;
}

.admin-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 10px;
}

.admin-reference-grid a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.admin-reference-grid img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.compact-upload-grid {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.compact-upload-grid .upload-box-web,
.compact-upload-grid .reference-thumb {
  width: 100%;
  min-height: 148px;
}

.compact-upload-grid .reference-thumb img {
  min-height: 148px;
}

.small-empty {
  min-height: 96px;
}

.booking-date-group h2 {
  margin: 0 0 10px;
  font-size: 22px;
}

.customer-profile-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(260px, auto);
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.customer-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--brandd);
  font-size: 22px;
  font-weight: 900;
}

.customer-profile-card h3 {
  margin: 0 0 6px;
}

#customersTitle {
  white-space: nowrap;
}

.customer-profile-card p {
  margin: 3px 0;
  color: var(--muted);
  font-weight: 750;
}

.customer-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 8px;
}

.customer-stats span {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wall);
  padding: 10px;
}

.customer-stats strong {
  color: var(--ink);
}

.customer-detail-page,
.customer-records {
  display: grid;
  gap: 14px;
}

.customer-detail-hero {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(260px, auto);
  gap: 16px;
  align-items: center;
  padding: 16px;
}

.customer-avatar.large {
  width: 76px;
  height: 76px;
  font-size: 28px;
}

.customer-detail-hero h2,
.customer-records h2 {
  margin: 0;
}

.customer-records {
  padding: 16px;
}

.customer-record-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.customer-record-row img {
  width: 92px;
  height: 92px;
  border-radius: 8px;
  object-fit: cover;
}

.customer-record-row h3 {
  margin: 6px 0;
}

.customer-record-row p {
  margin: 4px 0;
  color: var(--muted);
  font-weight: 800;
}

.attention-note {
  color: var(--brandd) !important;
}

.calendar-controls {
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 10px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calendar-weekdays {
  margin-bottom: 8px;
  color: var(--muted);
  text-align: center;
}

.calendar-cell {
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  padding: 8px;
  text-align: left;
  overflow: hidden;
}

.calendar-cell.today-cell {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(200, 164, 126, 0.18);
}

.muted-cell {
  opacity: 0.35;
}

.calendar-day {
  display: block;
  margin-bottom: 6px;
  font-weight: 900;
}

.calendar-event,
.calendar-more {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  margin-top: 4px;
  padding: 4px 6px;
  color: var(--ink);
  background: var(--soft);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event {
  border-left: 4px solid var(--tech-color);
  background: var(--tech-bg);
  color: var(--tech-color);
}

.calendar-event.CONFIRMED {
  background: var(--tech-bg);
  color: var(--tech-color);
}

.calendar-event.PENDING_PAYMENT {
  background: var(--tech-bg);
  color: var(--tech-color);
}

/* D51:日历格售后单同色系(蓝),与列表徽标一致 */
.calendar-event.AFTER_SALES {
  background: var(--tech-bg);
  color: var(--tech-color);
}

.hidden {
  display: none !important;
}

.web-app-shell {
  max-width: 1180px;
}

.ai-assistant-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
}

.ai-assistant-fab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--black);
  color: var(--heroink);
  padding: 8px 16px 8px 8px;
  box-shadow: 0 20px 46px rgba(47, 44, 42, 0.22);
}

.ai-assistant-fab span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--tagmbg);
  color: var(--black);
  font-weight: 950;
}

.ai-assistant-fab strong {
  font-size: 15px;
}

.ai-assistant-panel {
  display: grid;
  width: min(420px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 36px));
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 28px 72px rgba(47, 44, 42, 0.26);
  overflow: hidden;
}

.ai-assistant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px;
}

.ai-assistant-head h2 {
  margin: 2px 0 0;
  font-size: 22px;
}

.ai-assistant-messages {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding: 14px;
}

.ai-message {
  max-width: 86%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 10px 12px;
}

.ai-message.user {
  justify-self: end;
  background: var(--black);
  color: var(--heroink);
}

.ai-message p {
  margin: 0;
  line-height: 1.48;
  font-weight: 800;
  white-space: pre-wrap;
}

.ai-message small {
  display: block;
  margin-top: 8px;
  color: var(--brandd);
  font-weight: 850;
  line-height: 1.4;
}

.ai-assistant-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 12px 14px 0;
}

.ai-assistant-quick button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 850;
}

.ai-assistant-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px 14px 14px;
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(420px, 1.18fr);
  gap: 18px;
  align-items: stretch;
}

.auth-card,
.auth-visual,
.web-hero,
.service-web-page,
.detail-web,
.booking-flow,
.cart-page-web,
.checkout-page-web,
.me-web {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.auth-card {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 28px;
}

.auth-card h1 {
  margin: 0 0 10px;
  font-size: 38px;
  line-height: 1.06;
}

.auth-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.auth-form {
  display: grid;
  gap: 12px;
}.google-btn {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-weight: 850;
}

.google-btn span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-right: 8px;
  background: var(--black);
  color: var(--heroink);
}

.auth-visual {
  min-height: 560px;
  overflow: hidden;
}

.auth-visual img,
.store-card-wide img,
.recommend-card img,
.detail-visual-web,
.reference-grid-web img,
.cart-card-web img,
.checkout-item-web img,
.recent-card-web img,
.menu-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
}.web-tab {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}

.web-tab.active {
  background: var(--black);
  color: var(--heroink);
}

.web-tab span {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  margin-left: 4px;
  /* 06g §二 筐一「放错面」·**双端同病**:后台那七处金压 --wall 修了,顾客端这三处是同一个病。
     圆牌里就一个数字,和 .cs-avatar / 小程序 .av 同族 —— 金底 + --hero 字(5.26 / 9.39)。 */
  background: var(--brand);
  color: var(--hero);
  font-size: 12px;
}

.web-hero {
  min-height: 520px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  overflow: hidden;
}

/* D78 空态:这家店没配轮播时,右半边不该留一块 520px 高的空白 —— 收成单列、矮一半。
   零回落的代价不能是"版面看起来坏了",否则商家会去找一张别人的图填上。 */
.web-hero.no-carousel {
  grid-template-columns: 1fr;
  min-height: 260px;
}

.hero-carousel {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background: var(--soft);
}

.hero-slide-track,
.hero-slide {
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 420ms ease, transform 520ms ease;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

.hero-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(251, 248, 245, 0.16), rgba(0, 0, 0, 0.06));
}

.hero-carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  font-size: 30px;
  font-weight: 800;
  transform: translateY(-50%);
  backdrop-filter: blur(8px);
}

.hero-carousel-btn.prev {
  left: 14px;
}

.hero-carousel-btn.next {
  right: 14px;
}

.hero-carousel-dots {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.hero-carousel-dots button {
  width: 9px;
  height: 9px;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  padding: 0;
}

.hero-carousel-dots button.active {
  width: 28px;
  background: var(--black);
}

.web-hero-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 36px;
}

.web-hero-copy h1 {
  margin: 0;
  font-size: clamp(44px, 8vw, 86px);
  line-height: 0.95;
}

.web-hero-copy p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.section {
  margin-top: 20px;
}

.quick-grid,
.home-actions {
  display: grid;
  gap: 12px;
}

.quick-grid {
  grid-template-columns: repeat(4, 1fr);
}

.service-shortcut-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quick-item {
  display: grid;
  min-height: 118px;
  align-content: center;
  justify-items: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 16px;
  color: var(--ink);
  font-weight: 850;
  text-align: left;
}

.quick-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  /* 06g §二 筐一「放错面」·**双端同病**:同上,42px 的圆里就一个字母。 */
  background: var(--brand);
  color: var(--hero);
}.portfolio-wide-button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--card) 0%, var(--wall) 100%);
  padding: 18px;
  color: var(--ink);
  text-align: left;
}

.portfolio-wide-button strong {
  display: block;
  font-size: 22px;
  line-height: 1.15;
}

.portfolio-wide-button small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 750;
}

.portfolio-arrow {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--heroink);
}

.recommend-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.recommend-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 10px;
  color: var(--ink);
  text-align: left;
}

.recommend-card img {
  height: 168px;
  border-radius: 8px;
}

.recommend-card span {
  color: var(--muted);
  font-weight: 750;
}

.store-card-wide {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.store-card-wide img {
  height: 150px;
  border-radius: 8px;
}

.store-card-wide h3 {
  margin: 6px 0 8px;
  font-size: 26px;
}

.store-card-wide p {
  margin: 6px 0;
  color: var(--muted);
  font-weight: 700;
}

.service-web-page,
.detail-web,
.booking-flow,
.cart-page-web,
.checkout-page-web,
.me-web {
  padding: 18px;
}

.service-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.service-toolbar h1 {
  margin: 0;
  font-size: 36px;
}

.segmented.compact {
  width: min(420px, 100%);
  margin: 0;
}

.service-layout-web {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 14px;
}

.category-rail {
  position: sticky;
  top: 82px;
  display: grid;
  align-content: start;
  gap: 8px;
}.category-rail button {
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  padding: 10px;
  font-weight: 850;
  text-align: center;
}

.category-rail button.active {
  background: var(--black);
  color: var(--heroink);
}

.service-list-web {
  display: grid;
  gap: 12px;
}

.web-service-card {
  grid-template-columns: 168px 1fr;
}

.web-service-card img {
  height: 150px;
}

.back-btn {
  margin-bottom: 12px;
}

.detail-visual-web {
  display: block;
  height: 360px;
  border-radius: 8px;
}

.detail-web .detail-main {
  margin-top: 12px;
  padding: 24px;
}

.detail-web h1 {
  margin: 0 0 10px;
  font-size: 42px;
  line-height: 1.1;
}

.detail-web p {
  color: var(--muted);
  line-height: 1.55;
}

.detail-price-row,
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 12px;
}

.detail-price-row {
  color: var(--ink);
  font-weight: 800;
}

.detail-tags {
  color: var(--muted);
  font-weight: 750;
}

.detail-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.list-card-web h2 {
  margin: 0;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.list-card-web p {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 16px 22px;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.45;
}

.list-card-web p + p {
  border-top: 1px solid var(--line);
}

.list-card-web p span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--soft);
  color: var(--brandd);
}

.reference-grid-web {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.reference-grid-web img {
  height: 220px;
  border-radius: 8px;
}

.bottom-action-web {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.booking-service {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  align-items: center;
}

.mini-visual-web {
  width: 112px;
  height: 112px;
  border-radius: 8px;
  object-fit: cover;
}

.booking-service h2 {
  margin: 0 0 8px;
}

.booking-service p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.form-card {
  padding: 14px;
}

.booking-slots {
  margin-top: 14px;
}

.upload-box-web {
  width: min(360px, 100%);
  min-height: 110px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 20px;
  font-weight: 850;
}

.upload-box-web {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 16px;
  text-align: center;
}

.upload-box-web input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.upload-box-web small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.reference-upload-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.ai-reference-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-top: 12px;
  padding: 14px;
}

.ai-reference-panel p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 750;
}

.ai-reference-panel .ai-result-box {
  grid-column: 1 / -1;
}

.reference-thumb {
  position: relative;
  min-height: 110px;
  overflow: hidden;
}

.reference-thumb img {
  width: 100%;
  height: 100%;
  min-height: 110px;
  object-fit: cover;
}

.mini-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  min-height: 30px;
  padding: 0;
}

.cart-reference-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.cart-reference-row img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.cart-card-web {
  display: grid;
  grid-template-columns: auto 1fr 132px auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
}

.cart-card-web > img {
  height: 112px;
  border-radius: 8px;
}

.checkout-item-web {
  display: block;
  margin-bottom: 12px;
  padding: 16px;
}

.checkout-copy-web {
  display: grid;
  gap: 10px;
}

.checkout-meta-web {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkout-meta-web span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  padding: 6px 12px;
  font-weight: 850;
}

.check {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--heroink);
  font-weight: 850;
}

.check.checked {
  background: var(--brand);
  border-color: var(--brand);
  /* 金底上的字一律 --hero(规矩丙)。未选中时 .check 的奶白字压白卡=看不见,那是它要的效果,
     所以字色只在**选中**这条上改,不去动 .check 那条。 */
  color: var(--hero);
}

.cart-copy h2,
.checkout-item-web h2 {
  margin: 0;
  font-size: 24px;
}

.cart-title-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.cart-copy p,
.checkout-item-web p {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0;
  color: var(--muted);
  font-weight: 750;
}

.tall {
  min-height: 300px;
}

.cost-card {
  display: grid;
  gap: 12px;
}

.deposit-policy-card {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.deposit-policy-card h2,
.deposit-policy-card p {
  margin: 0;
}

.deposit-policy-card p {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.6;
}

.cost-card p,
.store-box {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.store-box {
  padding: 16px;
}

.web-member-card {
  background: var(--black);
  color: var(--heroink);
  border-radius: 8px;
  padding: 24px;
}

.member-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.member-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
}

.member-copy {
  min-width: 0;
}

.avatar {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  object-fit: cover;
}

.member-top h1 {
  margin: 0 0 4px;
  font-size: 34px;
}

.member-top p {
  margin: 0;
  color: var(--brandd);
  font-weight: 800;
}

.member-level-line {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.web-level-pill {
  border: 0;
  min-height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  color: var(--brandd);
  font-weight: 850;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}

.web-level-pill small {
  color: var(--brandd);
  font-size: 12px;
  font-weight: 900;
}

.member-provider {
  color: var(--brandd);
  font-size: 13px;
  font-weight: 800;
  text-transform: capitalize;
}

.member-code-chip {
  display: grid;
  min-width: 78px;
  justify-items: center;
  gap: 6px;
  border: 1px solid rgba(234, 215, 199, 0.32);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--brandd);
  padding: 9px;
}

.member-code-chip small {
  font-size: 12px;
  font-weight: 850;
}

.mini-qr {
  display: grid;
  grid-template-columns: repeat(5, 7px);
  gap: 2px;
  border: 5px solid var(--line);
  border-radius: 6px;
  background: var(--wall);
}

.mini-qr i {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: rgba(43, 41, 39, 0.14);
}

.mini-qr i.on {
  background: var(--black);
}

.member-code-detail {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  border: 1px solid rgba(234, 215, 199, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 14px;
}

.member-code-detail h2 {
  margin: 4px 0 8px;
  font-size: 24px;
  color: var(--heroink);
}

.member-code-detail p {
  margin: 0;
  color: var(--brandd);
  font-weight: 750;
  line-height: 1.55;
}

.member-code-detail .eyebrow {
  color: var(--brandd);
}

.member-code-detail .member-referral-row code {
  border-color: rgba(234, 215, 199, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: var(--brandd);
}

.growth-block {
  margin-top: 20px;
}

.growth-head,
.member-assets {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.growth-track {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
  margin-top: 8px;
}

.growth-fill {
  height: 100%;
  background: var(--brand);
}

.growth-note,
.deposit-rule-note {
  margin: 8px 0 0;
  color: var(--brandd);
  font-weight: 750;
  line-height: 1.45;
}

.deposit-rule-note {
  color: var(--brandd);
}

.member-benefits-link {
  width: 100%;
  margin: 12px 0 0;
  border: 1px solid rgba(234, 215, 199, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--brandd);
  padding: 10px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.member-assets {
  margin-top: 22px;
}

/* 勘误(08-23)后三块从 <div> 换成可点的 <button>,这条只选 div 就失效了 ——
   数字与标签挤成一行、按钮默认白底露出来(本批 L1 截图抓到)。两种标签一起选。 */
.member-assets div,
.member-assets button {
  display: grid;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.member-assets strong {
  font-size: 26px;
}

.member-assets span {
  color: var(--brandd);
  font-weight: 750;
}

.order-entry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
}.order-entry button {
  min-height: 78px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
}

.order-entry strong,
.order-entry span {
  display: block;
}

.order-entry strong {
  font-size: 26px;
  color: var(--brandd);
}

.recent-list-web,
.menu-grid-web {
  display: grid;
  gap: 12px;
}

.recent-card-web {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 14px;
  padding: 12px;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  color: inherit;
  text-align: left;
}

.recent-card-web img {
  height: 112px;
  border-radius: 8px;
}

.recent-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.recent-card-web p {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 750;
}

.menu-grid-web {
  grid-template-columns: repeat(4, 1fr);
}

.menu-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
  text-align: left;
}

.menu-card img {
  height: 92px;
  border-radius: 8px;
}

.menu-card span {
  color: var(--muted);
}

.logout-btn {
  margin-top: 18px;
}

/* 功能格的配图位放线条图标时:留白居中,别把图标拉成铺满照片(换成奖品缩略图后这条不再生效) */
.menu-grid-web .menu-card img.menu-img-art {
  object-fit: contain;
  padding: 18px;
  background: var(--tagmbg);
  box-sizing: border-box;
}

/* 积分商城页顶部一行:我的可用积分 + 次级入口「明细」(08-24:商城页只留这一处余额) */
.points-bal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 14px;
  color: var(--muted);
  font-weight: 650;
}

.points-bal strong { color: var(--ink); font-size: 22px; margin-left: 6px; }

/* 裁定①(08-23):黑卡「积分」格下面的「可兑 N 件」小字(句后端唯一,没有就整行不出) */
.member-assets .asset-hint {
  color: var(--brandd);
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
}

/* 商城筛选 chip:与小程序 .ml-filter 同一视觉(选中=深底白字)。
   此前借用 .section-note-btn 只加 active class 而没有对应样式,页面上看不出选中的是哪个。 */
.mall-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
}

.mall-filter {
  border: 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mall-filter.on {
  background: var(--hero);
  color: var(--heroink);
}

.section-note-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.web-member-extra {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  color: var(--brandd);
  font-weight: 750;
}

.member-code-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 18px;
}

.member-code-copy h2 {
  margin: 4px 0 8px;
  font-size: 28px;
  letter-spacing: 0;
}

.member-code-copy p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.55;
}

.member-code-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.member-code-meta span,
.member-code-meta strong {
  border-radius: 999px;
  background: var(--soft);
  padding: 7px 12px;
  color: var(--brandd);
  font-weight: 850;
}

.member-qr-block {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.member-qr-block small {
  color: var(--muted);
  font-weight: 800;
}

.qr-mock {
  display: grid;
  grid-template-columns: repeat(7, 9px);
  gap: 3px;
  border: 8px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
  padding: 8px;
}

.qr-mock span {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: rgba(43, 41, 39, 0.14);
}

.qr-mock span.on {
  background: var(--black);
}

.member-referral-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.member-referral-row code {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 12px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-tabs-web {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.order-tabs-web button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  padding: 8px 14px;
  font-weight: 800;
  white-space: nowrap;
}

.order-tabs-web button.active {
  background: var(--black);
  border-color: var(--black);
  color: var(--heroink);
}

.order-list-web,
.assets-web-page,
.member-benefits-web,
.orders-web-page,
.order-detail-web,
.store-web-page,
.placeholder-web {
  display: grid;
  gap: 14px;
}

.member-benefits-hero-web {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 14px;
  align-items: stretch;
  border-radius: 8px;
  background: var(--black);
  color: var(--heroink);
  padding: 24px;
}

.member-benefits-hero-web h1 {
  margin: 6px 0 10px;
  font-size: 36px;
  line-height: 1.08;
}

.member-benefits-hero-web p {
  max-width: 680px;
  margin: 0;
  color: var(--brandd);
  font-weight: 750;
  line-height: 1.55;
}

.member-benefits-hero-web .eyebrow {
  color: var(--brandd);
}

.benefits-progress-card {
  display: grid;
  gap: 8px;
  align-content: center;
  border: 1px solid rgba(234, 215, 199, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 16px;
}

.benefits-progress-card span,
.benefits-progress-card small {
  color: var(--brandd);
  font-weight: 800;
}

.benefits-progress-card strong {
  font-size: 30px;
}

.tier-grid-web {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.tier-card-web {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 16px;
}

.tier-card-web.active {
  border-color: var(--brand);
  background: var(--wall);
  box-shadow: 0 12px 28px rgba(45, 40, 38, 0.08);
}

.tier-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tier-card-head span,
.tier-card-head strong {
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}

.tier-card-head span {
  background: var(--soft);
  color: var(--brandd);
}

.tier-card-head strong {
  background: var(--black);
  color: var(--heroink);
  white-space: nowrap;
}

.tier-card-web h2 {
  margin: 0;
  font-size: 24px;
}

.tier-threshold,
.tier-deposit {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.tier-deposit strong {
  color: var(--brandd);
}

.tier-benefit-list {
  display: grid;
  gap: 7px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.tier-benefit-list li {
  position: relative;
  padding-left: 16px;
  color: var(--ink);
  font-weight: 750;
  line-height: 1.35;
}

.tier-benefit-list li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  content: "";
}

.upgrade-gifts-web {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
}

.upgrade-gifts-web h2 {
  margin: 0 0 6px;
}

.upgrade-gifts-web p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.5;
}

.order-card-web {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 14px;
  color: inherit;
  text-align: left;
}

.order-head-web,
.info-card-web p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.order-head-web span {
  color: var(--brandd);
  font-weight: 850;
}

.order-body-web {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 14px;
  margin-top: 12px;
}

.order-body-web img,
.detail-card-web img,
.store-hero-web,
.placeholder-card img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  background: var(--soft);
}

.order-body-web img {
  height: 104px;
}

.order-body-web p,
.info-card-web p,
.store-info-web p,
.placeholder-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

.order-body-web p + p,
.info-card-web p + p,
.store-info-web p + p {
  margin-top: 8px;
}

.detail-card-web,
.info-card-web,
.store-info-web,
.placeholder-card {
  padding: 16px;
}

.detail-card-web h1,
.store-info-web h1,
.placeholder-card h1 {
  margin: 8px 0;
}

.detail-card-web img {
  height: 260px;
  margin-top: 12px;
}

.info-card-web strong {
  text-align: right;
}

.archive-card-web {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.archive-card-web p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.customer-work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
}

.customer-work-grid a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.customer-work-grid img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.customer-work-item {
  display: grid;
  gap: 8px;
  margin: 0;
}

.mini-download {
  min-height: 34px;
  padding: 7px 10px;
  text-align: center;
  text-decoration: none;
}

.button-link {
  display: inline-grid;
  min-height: 42px;
  place-items: center;
  text-decoration: none;
}

.customer-share-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 14px;
}

.section-row.compact h3 {
  margin: 0;
}

.customer-platform-row,
.customer-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.customer-platform-row button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  padding: 7px 14px;
  font-weight: 850;
}

.customer-platform-row button.active {
  border-color: var(--black);
  background: var(--black);
  color: var(--heroink);
}

.customer-share-copy {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
}

.customer-share-copy p {
  display: block;
  margin: 8px 0;
  color: var(--ink);
  font-weight: 650;
  line-height: 1.6;
}

.customer-share-copy small {
  color: var(--brandd);
  font-weight: 800;
}

.asset-card-web {
  border-radius: 8px;
  padding: 18px;
}

.asset-card-web.dark {
  display: flex;
  align-items: end;
  justify-content: space-between;
  min-height: 128px;
  background: var(--black);
  color: var(--brandd);
}

.asset-card-web span,
.asset-card-web small,
.gift-card-web span {
  color: var(--muted);
  font-weight: 750;
}

.asset-card-web.dark span {
  color: var(--brandd);
}

.asset-card-web strong {
  display: block;
  margin-top: 6px;
  font-size: 30px;
}

.asset-grid-web {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.asset-grid-web button,
.gift-card-web {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  color: inherit;
  text-align: left;
}

.gift-card-web {
  display: grid;
  gap: 6px;
  padding: 18px;
}

.store-hero-web {
  height: 280px;
}

.placeholder-card img {
  height: 220px;
  margin-bottom: 12px;
}

@media (max-width: 920px) {
  .customer-grid,
  .admin-layout,
  .auth-layout,
  .web-hero,
  .detail-columns {
    grid-template-columns: 1fr;
  }

  .booking-panel {
    order: 2;
  }

  .detail-panel {
    order: 1;
  }

  .admin-shell {
    width: min(100vw - 24px, 760px);
  }

  .service-admin-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .service-admin-row > .status {
    justify-self: start;
  }

  .detail-visual-web {
    height: 300px;
  }

  .detail-web h1 {
    font-size: 34px;
  }

  .reference-grid-web {
    grid-template-columns: 1fr;
  }

  .admin-app {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    display: flex;
    overflow-x: auto;
  }

  .sidebar-link {
    min-width: 132px;
    text-align: center;
  }

  .metric-grid,
  .ai-gallery-grid,
  .dashboard-chart-grid,
  .dashboard-detail-list,
  .technician-performance-grid,
  .ai-brief-grid,
  .finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-gallery-card {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .ai-gallery-row {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .gallery-detail-hero {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .gallery-review-grid,
  .portfolio-preview-grid,
  .technician-work-grid,
  .portfolio-page-web > .technician-work-grid,
  .tier-grid-web {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-benefits-hero-web {
    grid-template-columns: 1fr;
  }

  .gallery-main-button {
    height: 132px;
  }

  .customer-profile-card {
    grid-template-columns: 58px 1fr;
  }

  .customer-stats {
    grid-column: 1 / -1;
  }

  .customer-detail-hero {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .customer-detail-hero .customer-stats {
    grid-column: 1 / -1;
  }

  .customer-record-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .customer-record-row > button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .shell,
  .admin-shell {
    width: min(100vw - 20px, 560px);
    padding-top: 14px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .panel-heading h1 {
    font-size: 26px;
  }

  .brand strong {
    font-size: 20px;
  }

  .brand small {
    font-size: 12px;
  }

  .segment {
    font-size: 18px;
  }

  .service-card,
  .booking-result,
  .booking-item {
    grid-template-columns: 96px 1fr;
  }

  .booking-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .booking-actions button {
    flex: 1;
  }

  .visual-hero {
    min-height: 220px;
  }

  .form-grid,
  .reference-upload-grid,
  .booking-detail-grid,
  .admin-reference-grid,
  .customer-work-grid {
    grid-template-columns: 1fr;
  }

  .inline-edit {
    grid-template-columns: repeat(2, minmax(112px, 1fr));
  }

  .inline-edit button {
    min-height: 46px;
  }

  .summary-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .web-tabs,
  .metric-grid,
  .ai-gallery-grid,
  .dashboard-chart-grid,
  .dashboard-detail-list,
  .technician-performance-grid,
  .ai-brief-grid,
  .finance-grid,
  .quick-grid,
  .recommend-strip,
  .menu-grid-web,
  .service-layout-web,
  .store-card-wide,
  .cart-card-web,
  .checkout-item-web,
  .order-entry,
  .asset-grid-web,
  .order-body-web,
  .recent-card-web {
    grid-template-columns: 1fr;
  }

  .customer-profile-card {
    grid-template-columns: 1fr;
  }

  .customer-detail-hero,
  .customer-record-row,
  .ai-assistant-form {
    grid-template-columns: 1fr;
  }

  .customer-record-row img {
    width: 100%;
    height: 180px;
  }

  .ai-assistant-widget {
    right: 10px;
    bottom: 10px;
    left: 10px;
  }

  .ai-assistant-fab {
    width: 100%;
    justify-content: center;
  }

  .ai-assistant-panel {
    width: 100%;
    max-height: calc(100vh - 20px);
  }

  .member-code-card,
  .member-referral-row {
    grid-template-columns: 1fr;
  }

  .member-qr-block {
    justify-items: start;
  }

  .customer-stats {
    grid-template-columns: 1fr;
  }

  .performance-numbers {
    grid-template-columns: 1fr;
  }

  .ai-gallery-card,
  .ai-gallery-row,
  .ai-reference-panel {
    grid-template-columns: 1fr;
  }

  .gallery-main-button {
    height: 220px;
  }

  .gallery-image-pair,
  .gallery-detail-hero,
  .gallery-review-grid,
  .share-photo-layout {
    grid-template-columns: 1fr;
  }

  .portfolio-preview-grid,
  .technician-work-grid,
  .portfolio-page-web > .technician-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-platform-row {
    grid-template-columns: 1fr;
  }

  .gallery-image-pair img {
    height: 190px;
  }

  .share-shell {
    width: min(100vw - 20px, 560px);
    padding-top: 14px;
  }

  .share-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .share-main-photo {
    height: 300px;
  }

  .share-photo-strip {
    grid-template-columns: repeat(4, 76px);
    overflow-x: auto;
  }

  .share-photo-strip button {
    height: 76px;
  }

  .category-rail {
    position: static;
    grid-template-columns: repeat(2, 1fr);
  }

  .service-web-page,
  .detail-web,
  .booking-flow,
  .cart-page-web,
  .checkout-page-web,
  .me-web {
    padding: 12px;
  }

  .service-toolbar {
    display: grid;
    gap: 12px;
  }

  .service-toolbar h1 {
    font-size: 28px;
  }

  .web-service-card {
    grid-template-columns: 112px 1fr;
    gap: 12px;
    padding: 10px;
  }

  .web-service-card img {
    height: 120px;
  }

  .web-service-card h2 {
    font-size: 22px;
  }

  .web-service-card p {
    font-size: 14px;
  }

  .detail-visual-web {
    height: 230px;
  }

  .detail-web .detail-main {
    padding: 18px;
  }

  .detail-web h1 {
    font-size: 30px;
  }

  .detail-price-row,
  .detail-tags {
    display: grid;
  }

  .tier-grid-web,
  .upgrade-gifts-web {
    grid-template-columns: 1fr;
  }

  .upgrade-gifts-web {
    display: grid;
  }

  .list-card-web h2 {
    padding: 16px 18px;
    font-size: 24px;
  }

  .list-card-web p {
    padding: 14px 18px;
    font-size: 16px;
  }

  .reference-grid-web img {
    height: 180px;
  }

  .bottom-action-web {
    position: sticky;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 18px -12px -12px;
    border-top: 1px solid var(--line);
    background: var(--card);
    padding: 10px 12px;
  }

  .bottom-action-web button {
    min-height: 48px;
  }

  .auth-visual,
  .web-hero {
    min-height: auto;
  }

  .hero-carousel {
    min-height: 260px;
  }

  .service-shortcut-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-wide-button {
    min-height: 88px;
    padding: 14px;
  }

  .portfolio-wide-button strong {
    font-size: 20px;
  }
}

@media (max-width: 430px) {
  .shell,
  .admin-shell {
    width: min(100vw - 16px, 430px);
    padding-top: 10px;
  }

  .topbar {
    gap: 10px;
  }

  .top-actions .ghost,
  .top-actions .admin-lang-toggle button {
    min-height: 38px;
    padding-inline: 12px;
  }

  .service-web-page,
  .detail-web,
  .booking-flow,
  .cart-page-web,
  .checkout-page-web,
  .me-web {
    padding: 8px;
  }

  .service-shortcut-row {
    grid-template-columns: 1fr;
  }

  .category-rail {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .category-rail button {
    min-height: 44px;
    padding: 8px;
    font-size: 14px;
  }

  .web-service-card {
    grid-template-columns: 96px 1fr;
  }

  .web-service-card img {
    height: 104px;
  }

  .web-service-card h2 {
    font-size: 20px;
  }

  .web-service-card .meta {
    gap: 6px;
    font-size: 13px;
  }

  .detail-visual-web {
    height: 200px;
  }

  .detail-web .detail-main {
    padding: 16px;
  }

  .detail-web h1 {
    font-size: 28px;
  }

  .list-card-web h2 {
    padding: 15px 16px;
  }

  .list-card-web p {
    gap: 10px;
    padding: 13px 16px;
  }

  .list-card-web p span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .inline-edit {
    grid-template-columns: 1fr 1fr;
  }

  .inline-edit input {
    min-width: 0;
  }
}

/* ===== Store settings: business hours (2026-07-04) ===== */
.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--hero2);
  color: var(--heroink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.business-hours-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 18px;
}
.business-hours-row {
  display: grid;
  grid-template-columns: 64px auto 1fr 16px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: var(--card);
}
.business-hours-row.closed {
  opacity: 0.55;
  background: rgba(0, 0, 0, 0.04);
}
.business-hours-row input[type='time'] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  font: inherit;
}
.business-hours-row .hours-dash {
  text-align: center;
  opacity: 0.5;
}
.business-hours-row .check-row.slim-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ===== Service workbench: needs-human queue (2026-07-04) ===== */
.wechat-session-group-title.needs-human-title {
  color: var(--bad);
  font-weight: 700;
}
.wechat-session-card.needs-human {
  border-color: rgba(214, 69, 69, 0.55);
  box-shadow: 0 0 0 1px rgba(214, 69, 69, 0.25);
}
.wechat-session-card em.status-needs_human,
.wechat-session-card em.status-human_active {
  color: var(--bad);
  font-weight: 700;
}

/* ===== CS workbench 3-column layout (2026-07-04) ===== */
.cs-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.cs-filter-pill {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.cs-filter-pill.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--hero);   /* 规矩丙:金底上的字一律 --hero */
}
.cs-filter-pill b { color: var(--hero); }   /* 同上;非选中态另有 :not(.active) 那条盖掉 */
.cs-filter-pill:not(.active) b { color: var(--danger); }
.cs-workbench-grid {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) minmax(220px, 290px);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1080px) {
  .cs-workbench-grid { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
  .cs-context-col { grid-column: 1 / -1; }
}
.cs-session-col { padding: 12px; }
.cs-chat-col { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 520px; }
.cs-chat-col > div { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cs-search {
  width: 100%;
  height: 30px;
  font-size: 12px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 8px;
}
.cs-chat-row {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  align-items: center;
}
.cs-chat-row:hover { background: var(--paper); }
.cs-chat-row.active { background: var(--soft); }
.cs-chat-row.needs-human { border-left-color: var(--danger); background: var(--wall); }
.cs-chat-row.needs-human.active { background: var(--badbg); }
.cs-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* 06g §二 筐一「放错面」:金字压 --wall 4.08 → 改成规矩丙那一族「金底 + --hero 字」= 5.26 / 9.39。
     小程序 `.av` 本批也是这个写法(双端同批律:同一个东西两端别长成两样)。 */
  background: var(--brand);
  color: var(--hero);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.cs-avatar.danger { background: var(--badbg); color: var(--bad); }   /* 06a:最后一处「浅底写死、字跟着令牌翻」的头像片 */
.cs-chat-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cs-chat-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cs-chat-row-top strong { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-chat-row-top small { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.cs-chat-row-preview {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-mock-group { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.cs-mock-group summary { font-size: 12px; color: var(--muted); cursor: pointer; margin-bottom: 8px; }
.cs-chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.cs-chat-head-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-chat-head-main strong { font-size: 14px; color: var(--ink); }
.cs-pill-danger { background: var(--wall); color: var(--danger); }
.cs-chat-timeline {
  flex: 1;
  min-height: 320px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 14px 16px;
}
.cs-reply-box { border-top: 1px solid var(--line); padding: 10px 16px 14px; }
.cs-reply-box.needs-human { background: var(--card); }
.cs-reply-box textarea { width: 100%; font-size: 13px; margin-bottom: 8px; }
.cs-reply-actions { justify-content: flex-end; }
.cs-context-col { display: flex; flex-direction: column; gap: 10px; }
.cs-context-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.cs-context-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.cs-context-card-head > span:first-child { font-size: 12px; color: var(--muted); }
.cs-count-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: var(--heroink);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-context-name { font-size: 13px; color: var(--ink); }
.cs-context-card .subtle { font-size: 12px; line-height: 1.5; margin: 2px 0 0; }
.cs-task-item {
  font-size: 12px;
  color: var(--ink);
  background: var(--paper);
  border-left: 2px solid var(--brand);
  padding: 6px 8px;
  margin-bottom: 6px;
}
.cs-task-item small { display: block; color: var(--muted); }
.cs-context-details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
}
.cs-context-details summary { font-size: 12px; color: var(--muted); cursor: pointer; }

/* ===== CS workbench overflow/containment fixes (2026-07-04 v2) ===== */
.cs-workbench-grid > * {
  min-width: 0;
  max-width: 100%;
}
.cs-session-col {
  overflow: hidden;
}
.cs-session-col .wechat-session-list {
  display: block;
  max-height: 64vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.cs-chat-row,
.cs-chat-row-main,
.cs-chat-row-top,
.cs-chat-row-preview {
  min-width: 0;
  max-width: 100%;
}
.cs-chat-row-top strong,
.cs-chat-row-preview {
  overflow-wrap: anywhere;
}
.cs-chat-col {
  min-width: 0;
  overflow: hidden;
}
.cs-chat-head-main strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.cs-chat-timeline .wechat-bubble,
.cs-chat-timeline .wechat-bubble p {
  overflow-wrap: anywhere;
  max-width: 100%;
}
.cs-context-col {
  min-width: 0;
  overflow: hidden;
}
.cs-context-card,
.cs-context-details {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.cs-context-card .subtle,
.cs-context-name,
.cs-task-item,
.cs-task-item small {
  overflow-wrap: anywhere;
}
.cs-context-details .form-grid,
.cs-context-details .form-grid.tight {
  grid-template-columns: 1fr;
}
.cs-context-details .wechat-backend-workflow,
.cs-context-details > *:not(summary) {
  max-width: 100%;
}
.cs-context-details img {
  max-width: 100%;
  height: auto;
}

/* ===== CS workbench app-like fixed heights (2026-07-04 v3) ===== */
.cs-workbench-grid {
  align-items: stretch;
}
.cs-session-col {
  display: flex;
  flex-direction: column;
  height: 72vh;
  padding: 12px;
}
.cs-session-col .section-row.compact-row {
  flex-shrink: 0;
}
.cs-session-col .wechat-session-list {
  flex: 1;
  min-height: 0;
  max-height: none;
}
.cs-chat-col {
  height: 72vh;
  min-height: 0;
}
.cs-chat-col > div {
  height: 100%;
}
.cs-chat-timeline {
  max-height: none;
  min-height: 0;
}
.cs-context-col {
  height: 72vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.cs-context-details pre,
.cs-context-details code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cs-chat-row + .cs-chat-row {
  margin-top: 4px;
}
.wechat-session-group-title {
  margin: 10px 0 6px;
}

/* ===== CS workbench alignment + full-width workflow (2026-07-04 v4) ===== */
.cs-workbench-grid {
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) minmax(260px, 360px);
  height: 72vh;
}
.cs-session-col,
.cs-chat-col,
.cs-context-col {
  height: 100%;
  min-height: 0;
}
.cs-context-col > * {
  flex-shrink: 0;
}
.cs-context-card,
.cs-context-details {
  overflow: visible;
}
.cs-workflow-full {
  margin-top: 14px;
  display: grid;
  gap: 14px;
}
.cs-workflow-full .quote-workbench {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 16px 18px;
}
.cs-workflow-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 12px 18px;
}
.cs-workflow-details summary {
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
@media (max-width: 1080px) {
  .cs-workbench-grid {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    height: auto;
  }
  .cs-session-col, .cs-chat-col { height: 68vh; }
  .cs-context-col { grid-column: 1 / -1; height: auto; overflow: visible; }
}

/* ===== CS workbench v5: flush bottoms + in-place quote ops (2026-07-04) ===== */
.cs-context-card-last {
  flex: 1 0 auto;
}
.cs-inline-details {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.cs-inline-details summary {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.cs-quote-task textarea {
  width: 100%;
  font-size: 12px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 8px;
}
.cs-quote-actions {
  margin-top: 8px;
  gap: 6px;
}
.cs-quote-actions .slim {
  font-size: 12px;
  padding: 5px 10px;
}
.cs-quote-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.cs-quote-thumbs img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.cs-workflow-full .manual-draft-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 16px 18px;
}

/* ===== Image lightbox (2026-07-05) ===== */
.cs-lightbox {
  position: fixed;
  inset: 0;
  background: var(--hero);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  cursor: zoom-out;
}
.cs-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
  background: var(--card);
}
.cs-quote-thumbs img,
.quote-reference-strip img,
.wechat-message-images img {
  cursor: zoom-in;
}

/* ===== Overdue (>10min) human-waiting highlight (2026-07-05) ===== */
.cs-chat-row.overdue {
  background: var(--badbg);
  border-left-color: #7f2f2b;
}
.cs-chat-row.overdue.active {
  background: #edcabf;
}
.cs-chat-row.overdue .cs-chat-row-top strong {
  color: var(--ink);
}
.cs-avatar.overdue {
  background: var(--hero);
  color: var(--heroink);
}
.cs-overdue-time {
  color: var(--ink) !important;
  font-weight: 700;
}

/* ===== Store settings: collapsible list + plan card (2026-07-05) ===== */
.settings-list-card {
  padding: 6px 18px;
}
.settings-item {
  border-bottom: 1px solid var(--line);
}
.settings-item:last-child {
  border-bottom: none;
}
.settings-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
}
.settings-item summary::-webkit-details-marker {
  display: none;
}
.settings-item summary::after {
  content: '▾';
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
}
.settings-item[open] summary::after {
  content: '▴';
}
.settings-item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}
.settings-item-value {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-item-body {
  padding: 0 2px 18px;
}
.plan-feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.plan-feature {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  /* 06g §二 筐一「放错面」:--brandd 压 --wall 4.08。改用合同图**成对设计**的标记色 ——
     --tagm 压 --tagmbg = 5.36 / 7.8。金不是不能用,是它压错了那层面。 */
  background: var(--tagmbg);
  color: var(--tagm);
}
.plan-feature.off {
  background: var(--wall);
  color: var(--sub);
  text-decoration: line-through;
}

/* ===== Plan expiry + renew entry (2026-07-05) ===== */
.settings-item-value.plan-expired {
  color: var(--danger);
  font-weight: 700;
}
.plan-expired-banner {
  background: var(--wall);
  color: var(--danger);
  font-size: 13px;
  padding: 8px 12px;
  border-left: 2px solid var(--danger);
  margin: 0 0 10px;
}
.plan-renew-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0 8px;
}
.plan-renew-row select {
  flex: 1;
  max-width: 220px;
  height: 32px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  padding: 0 8px;
}

/* ===== Tenant KB editor (2026-07-05) ===== */
.kb-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.kb-facts-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.kb-facts-grid input {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
}
.kb-entry-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kb-entry-list-title {
  font-size: 13px;
  color: var(--ink);
}
.kb-entry {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper);
  border-left: 2px solid var(--brand);
  border-radius: 0 8px 8px 0;
}
.kb-entry.disabled {
  opacity: 0.5;
  border-left-color: var(--muted);
}
.kb-entry-main {
  min-width: 0;
}
.kb-entry-main strong { font-size: 13px; color: var(--ink); }
.kb-entry-main small { display: block; font-size: 11px; color: var(--muted); margin: 2px 0 4px; }
.kb-entry-main p { font-size: 12px; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.kb-entry-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.kb-add-form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.kb-add-form strong { font-size: 13px; }
.kb-add-form input,
.kb-add-form textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  padding: 8px 10px;
}
.kb-add-form button { align-self: flex-start; }

/* ===== KB import + store info (2026-07-05) ===== */
.kb-upload-button {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
}
.kb-upload-button:hover { border-color: var(--brand); color: var(--brandd); }
.kb-doc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.kb-doc-list strong { font-size: 13px; }
.kb-doc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink);
  background: var(--paper);
  border-left: 2px solid var(--brandd);
  padding: 6px 10px;
}
.store-info-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.store-info-table td { padding: 6px 8px 6px 0; color: var(--muted); }
.store-info-table td code {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--ink);
  font-size: 12px;
}

/* ===== Finance page (2026-07-05) ===== */
.finance-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.finance-metric {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.finance-metric span { font-size: 12px; color: var(--muted); }
.finance-metric strong { font-size: 20px; color: var(--ink); }
.finance-metric.good strong { color: var(--success); }
.finance-metric.bad strong { color: var(--danger); }
.finance-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.finance-quick-grid label,
.finance-note-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.finance-quick-grid input,
.finance-quick-grid select,
.finance-note-field input,
.finance-rule-add input,
.finance-rule-add select,
.finance-filters select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
}
.finance-note-field { margin-bottom: 10px; }
.finance-rule-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 10px;
  background: var(--paper);
  border-left: 2px solid var(--brand);
  margin-bottom: 6px;
}
/* 🔴 07f 裁 #67:这里原来是 `opacity: 0.5`。店主口径:**「不重要」用颜色的深浅表达,不用透明度** ——
   透明度会把底色拖进前景,**两边一起变**,谁也算不准(对比度尺子就是被它坑的:
   同一行状态词旧尺子量 2.52,折进 opacity 之后是 1.52 甲档「看不见」)。
   改用 --flat(「无状态/静默」那一档的字色):压 --paper 浅 5.57 / 深 6.68,两档都过 AA。
   血缘:这个类有三个使用方 —— 薪资「未配方案」行(admin.js:2020)、考勤 rest/none 行(:2160)、
   财务设置「未启用的固定支出」行(:2881)。三处语义一致(这行不适用),同一句话治。 */
.finance-rule-row.disabled { color: var(--flat); border-left-color: var(--muted); }
.finance-rule-add {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1fr 0.7fr auto;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.finance-filters { display: flex; gap: 8px; }
.finance-txn-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 70px 110px auto;
  gap: 10px;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.finance-txn-row:last-child { border-bottom: none; }
.finance-txn-date { color: var(--muted); font-size: 12px; }
.finance-txn-main { min-width: 0; display: flex; flex-direction: column; }
.finance-txn-main strong { font-size: 13px; color: var(--ink); }
.finance-txn-main small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finance-txn-channel { font-size: 12px; color: var(--muted); }
.finance-txn-amount { text-align: right; }
.finance-txn-row.positive .finance-txn-amount { color: var(--success); }
.finance-txn-row.negative .finance-txn-amount { color: var(--danger); }
.finance-txn-row.is-reversed { opacity: 0.55; }
.finance-txn-row.is-reversal { background: var(--card); }
.finance-txn-flag { font-size: 11px; color: var(--muted); }

/* ===== Finance targets/progress/payroll (2026-07-05) ===== */
.finance-progress-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.finance-alerts { display: flex; flex-wrap: wrap; gap: 6px; }
.finance-alert {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--brandd);
}
.finance-alert.good { background: var(--wall); color: var(--success); }
.finance-alert.warn { background: var(--wall); color: var(--danger); font-weight: 700; }
.finance-alert.info { background: var(--soft); color: var(--brandd); }
.finance-progress-row { display: flex; flex-direction: column; gap: 4px; }
.finance-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}
.finance-progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--soft);
  overflow: hidden;
}
.finance-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width 0.4s ease;
}
.finance-progress-fill.done { background: var(--success); }
.finance-comp-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 110px 90px auto auto;
  gap: 10px;
  align-items: end;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.finance-comp-row label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.finance-comp-row input[type='number'] {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  font-size: 13px;
}
.finance-comp-name { font-size: 13px; font-weight: 700; color: var(--ink); padding-bottom: 6px; }

/* ===== Finance rings + grouped layout (2026-07-05 v2) ===== */
.finance-ring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  justify-items: center;
}
.finance-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.finance-ring .ring-track {
  fill: none;
  stroke: var(--soft);
  stroke-width: 8;
}
.finance-ring .ring-fill {
  fill: none;
  stroke: var(--brand);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}
.finance-ring.done .ring-fill { stroke: var(--success); }
.finance-ring .ring-pct {
  font-size: 16px;
  font-weight: 700;
  fill: var(--ink);
}
.finance-ring.done .ring-pct { fill: var(--success); }
.finance-ring strong { font-size: 13px; color: var(--ink); margin-top: 2px; }
.finance-ring span { font-size: 12px; color: var(--ink); }
.finance-ring .ring-target { color: var(--muted); font-size: 11px; }
.finance-ring small { font-size: 11px; color: var(--muted); }
.finance-quick-card h2,
.settings-list-card h2 {
  font-size: 16px;
  margin: 0;
}
.settings-list-card .section-row.compact-row {
  padding: 12px 2px 4px;
  border-bottom: 1px solid var(--line);
}

/* ===== Stored value + guide + insights (2026-07-05 3D) ===== */
.fin-info {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  vertical-align: 1px;
}
.fin-info:hover { color: var(--brandd); }
.fin-guide-panel {
  background: var(--card);
  border-radius: 14px;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 18px 22px;
  cursor: default;
}
.fin-guide-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.fin-guide-head strong { font-size: 15px; color: var(--ink); }
.fin-guide-section { margin-bottom: 14px; }
.fin-guide-section strong { font-size: 13px; color: var(--brandd); display: block; margin-bottom: 4px; }
.fin-guide-section p { font-size: 13px; color: var(--ink); line-height: 1.7; margin: 0; }
.fin-insight-box {
  background: var(--paper);
  border-left: 2px solid var(--brand);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink);
  white-space: pre-wrap;
  line-height: 1.7;
}
.sv-metrics { margin-bottom: 12px; }
.sv-op-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.6fr) 1fr 1fr auto auto;
  gap: 8px;
  margin-bottom: 12px;
}
.sv-op-row select,
.sv-op-row input {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
}
.sv-account-list { display: flex; flex-direction: column; }
.sv-account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 150px;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.sv-account-row:last-child { border-bottom: none; }
.sv-account-row.dormant { background: var(--card); }
.sv-account-name { display: flex; flex-direction: column; min-width: 0; }
.sv-account-name strong { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-account-name small { font-size: 11px; color: var(--muted); }
.sv-account-balance { font-weight: 700; color: var(--ink); }
.sv-account-dormant { font-size: 12px; color: var(--muted); text-align: right; }
.sv-account-row.dormant .sv-account-dormant { color: var(--brandd); font-weight: 700; }

/* ===== Finance lock overlay (2026-07-05) ===== */
#financePage.fin-locked > *:not(.fin-lock-overlay) {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}
#financePage.fin-locked {
  position: relative;
  min-height: 60vh;
}
.fin-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 10;
}
.fin-lock-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 22px 26px;
  width: min(340px, 90%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fin-lock-card strong { font-size: 15px; color: var(--ink); }
.fin-lock-card input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
}

/* ===== Finance sidebar-nav layout (2026-07-05 approved sketch v2) ===== */
.fin-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fin-title-row h1 { margin: 0; }
.fin-mini-btn {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}
.fin-layout-grid {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.fin-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 16px;
}.fin-nav-btn {
  text-align: left;
  font-size: 13px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.fin-nav-btn:hover { border-color: var(--brand); color: var(--brandd); }
.fin-nav-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--hero);   /* 规矩丙:金底上的字一律 --hero */
  font-weight: 700;
}
.fin-nav-btn.fin-nav-ai { border-color: var(--brand); color: var(--brandd); }
.fin-tab-content { min-width: 0; }
.fin-tab-content > .admin-card { margin-top: 0 !important; }
@media (max-width: 900px) {
  .fin-layout-grid { grid-template-columns: 1fr; }
  .fin-nav { flex-direction: row; flex-wrap: wrap; position: static; }
}

/* ===== Finance header compact fix (2026-07-05) ===== */
#financePage .section-row > #financeMonth {
  width: 170px;
  flex: 0 0 auto;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
}
.fin-title-row {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.fin-title-row h1 {
  white-space: nowrap;
  font-size: 28px;
}
.fin-mini-btn {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ===== 评审P0批:今日待办 / 搜索 / 会员徽章 ===== */
.today-tasks-card { grid-column: 1 / -1; }
.today-tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.today-task {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.today-task:hover { border-color: var(--brand); transform: translateY(-1px); }
.today-task .task-count { font-size: 1.45rem; font-weight: 700; line-height: 1; }
.today-task .task-label { font-size: .78rem; color: var(--muted); }
.today-task.has-items { border-color: var(--brand); background: var(--soft); }
.today-task.tone-danger.has-items { border-color: var(--danger); }
.today-task.tone-danger.has-items .task-count { color: var(--danger); }
.today-task.tone-warn.has-items .task-count { color: var(--brandd); }
.today-task.is-locked { opacity: .75; }
.today-task .task-lock { font-size: 1.1rem; }

.booking-search,
.customer-search {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  width: 220px;
  max-width: 100%;
}
.booking-search:focus,
.customer-search:focus { outline: none; border-color: var(--brand); }
.customer-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.member-tier-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  vertical-align: middle;
  border: 1px solid transparent;
}
.member-tier-badge.tier-silver { background: var(--wall); color: var(--ink); border-color: var(--line); }
.member-tier-badge.tier-gold { background: var(--tagmbg); color: var(--tagm); border-color: var(--brand); }   /* 06g §二 筐一:--tagmbg 的配对色是 --tagm(5.36),不是 --brandd(4.28) */
.member-tier-badge.tier-platinum { background: var(--wall); color: var(--tagw); border-color: var(--line); }
.member-tier-badge.tier-diamond { background: var(--wall); color: #6b4f8a; border-color: var(--line); }

@media (max-width: 720px) {
  .today-tasks-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-search, .customer-search { width: 100%; }
}

/* ===== 排班周视图网格 + 员工管理 ===== */
.schedule-week-nav { display: flex; gap: 6px; }
.schedule-week-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}
.schedule-default-times { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.schedule-default-times input[type="time"] {
  width: 108px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
}
.schedule-week-grid-wrap { overflow-x: auto; }
#scheduleWeekGrid { min-width: 640px; }
.swg-row {
  display: grid;
  grid-template-columns: 110px repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.swg-head .swg-day {
  text-align: center;
  padding: 6px 2px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: .8rem;
}
.swg-day.is-today strong { color: var(--brandd); }
.swg-day.is-closed-day { color: var(--muted); }
.swg-closed-tag { color: var(--muted); font-size: .68rem; }
.swg-day small { color: var(--muted); }
.swg-tech-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px;
  min-width: 0;
}
.swg-tech-col strong { font-size: .85rem; }
.swg-tech-col small { color: var(--muted); font-size: .72rem; }
.swg-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease;
  text-align: center;
  min-width: 0;
}
.swg-cell strong { font-size: .74rem; font-weight: 600; }
.swg-cell.is-working { background: var(--soft); border-color: var(--brand); }
.swg-cell.is-off { color: var(--muted); background: var(--paper); }
.swg-cell.is-off strong { font-weight: 500; }
.swg-cell.is-conflict { border-color: #caa53d; background: var(--tagmbg); }
.swg-cell.is-today { box-shadow: 0 0 0 1px var(--brandd); }
.swg-cell:hover { border-color: var(--brandd); }
div.swg-cell { cursor: default; }
.swg-count { font-size: .68rem; color: var(--brandd); }
.swg-warn { font-size: .68rem; color: var(--brandd); }

.tech-manage-row { display: flex; gap: 8px; margin-top: 8px; }
.tech-inactive-tag {
  margin-left: 8px;
  font-size: .68rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
}
.technician-performance-card.is-inactive { opacity: .6; }
.rating-placeholder { color: var(--muted); font-weight: 500; font-size: .8rem; }
.danger-ghost { color: var(--danger); border-color: var(--danger); }

@media (max-width: 720px) {
  .swg-row { grid-template-columns: 84px repeat(7, minmax(64px, 1fr)); }
}

/* ===== 客户运营信息(标签/备注/生日) ===== */
.customer-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.customer-tag {
  font-size: .7rem;
  padding: 2px 9px;
  border-radius: 999px;
  /* 06g §二 筐一「放错面」:金字压 --wall 只有 4.08;压白卡 4.73。
     它本来就有 --line 边框,换成白底也不会糊在卡上。 */
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--brandd);
}
.customer-profile-form { display: grid; grid-template-columns: 1fr 220px; gap: 12px; margin-top: 10px; }
.customer-profile-form .customer-notes-label,
.customer-profile-form button { grid-column: 1 / -1; }
.customer-profile-form button { justify-self: start; }
.customer-profile-form label { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: var(--muted); }
.customer-profile-form input,
.customer-profile-form textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
}
@media (max-width: 720px) {
  .customer-profile-form { grid-template-columns: 1fr; }
}
.cs-link-member-row { display: flex; gap: 6px; margin-top: 6px; }
.cs-link-member-row select { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: .8rem; }

/* ===== 特殊日期 / 财务导出 / 服务上下架 ===== */
.special-dates-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.special-dates-block h4 { margin: 0 0 4px; font-size: .9rem; }
.special-dates-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.special-date-row {
  display: grid;
  grid-template-columns: 100px 110px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: .85rem;
}
.special-date-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.special-date-add-row input, .special-date-add-row select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
}
.special-date-add-row #specialDateNote { flex: 1; min-width: 120px; }
.finance-filters-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.services-ai-hint {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--brandd);
  font-size: .84rem;
}
.service-active-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.service-active-toggle input { accent-color: var(--brandd); width: 16px; height: 16px; cursor: pointer; }

/* ===== UI 打磨:动效 / 溢出防护 / 交互反馈 (20260706) ===== */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.admin-page:not(.hidden),
.admin-dashboard-page:not(.hidden) { animation: pageIn .22s ease; }

.dashboard-chart-card,
.customer-profile-card,
.technician-performance-card,
.admin-card { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
button.dashboard-chart-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(45, 40, 38, .08); }
.customer-profile-card:hover,
.technician-performance-card:hover { box-shadow: 0 6px 18px rgba(45, 40, 38, .07); }

.metric { transition: transform .15s ease, border-color .15s ease; }
.metric:hover { transform: translateY(-1px); border-color: var(--brand); }
.today-task:active,
.swg-cell:active { transform: scale(.97); }
.ghost.slim:active, .primary.slim:active { transform: scale(.96); }
.ghost, .primary, .ghost.slim, .primary.slim { transition: background .15s ease, border-color .15s ease, transform .12s ease, color .15s ease; }

/* 溢出防护:长名字/长备注不得撑破格子 */
.swg-tech-col strong,
.swg-tech-col small,
.cs-context-name,
.special-date-row .subtle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-tag { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-task .task-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.customer-profile-card h3,
.technician-performance-card h3 { overflow-wrap: anywhere; }
.finance-txn-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; }
.member-tier-badge { flex-shrink: 0; }

.dashboard-title-actions { display: flex; align-items: center; gap: 10px; }
.sidebar-version {
  margin-top: auto;
  padding: 10px 12px 4px;
  font-size: .68rem;
  color: var(--muted);
  opacity: .8;
  user-select: all;
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .admin-page:not(.hidden), .admin-dashboard-page:not(.hidden) { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ===== UI 规范批 20260706-fix5:统一卡片内边距/待办卡排版/网格边缘/客户卡/图库 ===== */
/* 今日待办:对齐指标格的排版(上标签下数字,同字号同色系,不贴边) */
.today-tasks-card { padding: 16px 18px 18px; }
.today-tasks-card .today-tasks-title { font-size: 20px; margin: 0; }
.today-tasks-grid { margin-top: 12px; gap: 10px; }
.today-task {
  gap: 6px;
  padding: 12px 14px;
  min-height: 78px;
  justify-content: center;
  background: var(--card);
}
.today-task .task-label {
  font-size: .8rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.3;
}
.today-task .task-count {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.today-task.has-items { background: var(--soft); }
.today-task.tone-danger.has-items .task-count { color: var(--danger); }
.today-task.tone-warn.has-items .task-count { color: var(--brandd); }
.today-task.is-locked .task-count { font-size: 1.3rem; }

/* 排班周网格:右缘圆角/今日描边不被裁掉 */
.schedule-week-grid-wrap { padding: 3px 3px 6px; margin: 0 -3px; }
#scheduleWeekGrid .swg-row:last-child { margin-bottom: 0; }

/* 客户卡:信息分组留白,标签与按钮不挤 */
.customer-profile-card .customer-contact { color: var(--muted); font-size: .88rem; }
.customer-profile-card .customer-tags { margin-top: 7px; }
.customer-card-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* 图库详情:分区卡内容不贴边;社媒文案区排版 */
.gallery-detail-section.card { padding: 16px 18px; }
.gallery-detail-section.card > .section-row { margin-bottom: 12px; }
.gallery-platform-list { max-width: 560px; }
.gallery-platform-row { grid-template-columns: 150px 150px; justify-content: start; }
.gallery-platform-row .share-link-button { text-align: center; }
.gallery-copy-hint { margin-top: 10px; }
.ai-copy-box { margin-top: 12px; }

/* 全局兜底:任何直接用 .card 的分区块,标题不许贴卡边 */
section.card > .section-row:first-child { margin-top: 0; }

/* 财务修改密码 */
.fin-lock-hint { max-width: 340px; font-size: .78rem; line-height: 1.5; }

/* ===== fix6:首页三列紧凑网格 + 客户详情卡内边距 ===== */
.dashboard-chart-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
@media (max-width: 1150px) { .dashboard-chart-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 700px) { .dashboard-chart-grid { grid-template-columns: 1fr; } }
.locked-stat-row strong { color: var(--muted); font-weight: 600; }

.customer-profile-edit.card { padding: 16px 18px; }
.customer-records.card { padding: 16px 18px; }
.customer-detail-hero.card { padding: 16px 18px; }
.customer-detail-hero p { margin: 3px 0; }

/* ===== 员工端P0批:服务安全条/今日时间线/排班申请 ===== */
.customer-care-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.care-tag { background: var(--tagmbg); border-color: var(--brand); color: var(--brandd); font-weight: 600; }
.care-note { font-size: .78rem; color: var(--brandd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.staff-timeline-card { padding: 16px 18px; margin-bottom: 16px; }
.staff-timeline-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  margin-top: 8px;
}
.staff-timeline-row.is-done { opacity: .55; }
.stl-time { font-size: 1.05rem; }
.stl-time small { display: block; color: var(--muted); font-weight: 500; }
.stl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stl-main span { font-size: .82rem; color: var(--muted); }

.schedule-requests-panel { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.schedule-requests-panel h4 { margin: 0 0 8px; font-size: .9rem; }
.schedule-request-row {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  margin-bottom: 6px;
  font-size: .85rem;
}
.schedule-request-row .subtle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schreq-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.schreq-status { font-size: .75rem; border-radius: 999px; padding: 2px 10px; border: 1px solid var(--line); }
.schreq-pending { background: var(--tagmbg); color: var(--brandd); border-color: var(--brand); }
.schreq-approved { background: var(--wall); color: var(--success); }
.schreq-rejected { background: var(--wall); color: var(--danger); }
.comp-estimate-note { margin-top: 6px; font-size: .76rem; }
.wechat-session-group-title.mine-title { color: var(--brandd); }
@media (max-width: 720px) {
  .staff-timeline-row { grid-template-columns: 70px minmax(0, 1fr); }
  .staff-timeline-row .status { grid-column: 2; justify-self: start; }
  .schedule-request-row { grid-template-columns: 1fr; }
}

/* ===== 员工端单卡业绩:铺满整行,数据块均匀展开 ===== */
.technician-performance-grid.single-card { grid-template-columns: 1fr; }
.technician-performance-grid.single-card .technician-performance-card { padding: 18px 20px; }
.technician-performance-grid.single-card .performance-numbers {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.technician-performance-grid.single-card .performance-numbers span { padding: 14px 16px; font-size: 13px; }
.technician-performance-grid.single-card .performance-numbers strong { font-size: 24px; }

/* ===== 账号批:登录双入口/强制改密/员工账号管理 ===== */
.login-role-tabs { display: flex; gap: 8px; margin: 8px 0 10px; }
.login-role-tab {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 18px;
  background: var(--paper);
  color: var(--muted);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: all .15s ease;
}
.login-role-tab.active { background: var(--ink); color: var(--heroink); border-color: var(--ink); }
.login-remember-row { font-size: .85rem; color: var(--muted); }
.force-pass-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(45, 40, 38, .45); display: grid; place-items: center; }
.force-pass-overlay .fin-lock-card { background: var(--card); }
.tech-account-name { font-size: .75rem; color: var(--muted); align-self: center; }

/* ===== 员工端P1:待传作品/我的报价记录 + 移动端补齐 ===== */
.metric-warn strong { color: var(--brandd); }
.metric-warn { border-color: var(--brand); background: var(--tagmbg); }
.missing-work-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: .7rem;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--tagmbg);
  border: 1px solid var(--brand);
  color: var(--tagm);   /* 06g §二 筐一:同上,--tagmbg 的配对色 */
  font-weight: 600;
}
.my-quote-history {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 16px 18px;
}
.my-quote-history h3 { margin: 0 0 10px; font-size: 1rem; }
.quote-history-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 90px auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  margin-bottom: 6px;
  font-size: .83rem;
}
.qh-date { color: var(--muted); }
.qh-message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-price { font-weight: 700; text-align: right; }
.qh-status { font-size: .74rem; color: var(--brandd); }

/* 移动端补齐(手机实机走查前的静态审计) */
@media (max-width: 720px) {
  .quote-history-row { grid-template-columns: 80px minmax(0, 1fr); }
  .qh-price, .qh-status { grid-column: 2; text-align: left; }
  .login-role-tabs { justify-content: center; }
  .fin-lock-card { max-width: calc(100vw - 48px); }
  .dashboard-title-actions { flex-wrap: wrap; }
  .customer-profile-card { grid-template-columns: 48px minmax(0, 1fr); }
  .customer-profile-card .customer-stats { grid-column: 1 / -1; }
  .gallery-platform-row { grid-template-columns: 1fr 1fr; }
  .finance-filters-row { width: 100%; }
}

/* 我的今天:待传作品/待审核 chips */
.staff-day-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.staff-day-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  transition: border-color .15s ease;
}
.staff-day-chip:hover { border-color: var(--brandd); }
.staff-day-chip.chip-warn { background: var(--tagmbg); border-color: var(--brand); color: var(--brandd); font-weight: 600; }

/* F4: 技师卡管理按钮不再挤成竖排字 */
.tech-manage-row { flex-wrap: wrap; align-items: center; }
.tech-manage-row .ghost.slim { white-space: nowrap; flex-shrink: 0; }
.tech-account-name { white-space: nowrap; }

/* ===== 走查修复批2:窄屏(手机)员工端/工作台 ===== */
@media (max-width: 760px) {
  .cs-workbench-grid { grid-template-columns: 1fr; }
  .cs-session-col { height: 46vh; }
  .cs-chat-col { height: 64vh; }
  .cs-chat-head { flex-wrap: wrap; }
  .cs-chat-head-main { flex-wrap: wrap; min-width: 0; }
  .cs-chat-head .pill,
  .cs-chat-head .ghost.slim,
  .cs-chat-head .primary.slim { white-space: nowrap; flex-shrink: 0; }
  .technician-performance-grid.single-card .performance-numbers { grid-template-columns: repeat(2, 1fr); }
  .technician-performance-grid.single-card .performance-numbers strong { font-size: 19px; }
  .sidebar-link { min-width: 108px; white-space: nowrap; flex-shrink: 0; }
  .section-row > .subtle { min-width: 0; }
}

/* 日结行主标识:时间打头(店主 2026-08-09 修订 v6);单号退到签署单/详情里 */
.dc-alloc .head .dc-tm{font-weight:800;color: var(--ink);margin-right:10px;font-variant-numeric:tabular-nums}

/* 跨零点单的自解释标注(日结行) */
.dc-alloc .head .dc-xday{margin-left:10px;font-style:normal;font-size:11.5px;font-weight:600;color: var(--brandd);background: var(--card);border-radius:7px;padding:2px 8px}

/* 日结待确认行的「查看签署单」入口(与待分配行同一套跳转) */
.dc-alloc .dc-links{padding:6px 0 2px}
.dc-alloc .dc-links a{font-size:12.5px;color:var(--bronze);cursor:pointer;text-decoration:underline}

/* 切换门店弹层(v1.4 批,参照小程序 shop-select) */
.store-switch-overlay{position:fixed;inset:0;background: rgba(30,24,18,.45);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.store-switch-panel{background: var(--card);border-radius:18px;padding:18px 20px;max-width:420px;width:100%;max-height:70vh;overflow:auto}
.store-switch-row{display:block;width:100%;text-align:left;border: 1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:10px;background: var(--card);cursor:pointer}
.store-switch-row strong{display:block;font-size:15px;color: var(--ink)}
.store-switch-row span{display:block;font-size:12.5px;color: var(--ink);margin-top:2px}
/* 门店列表「会员」标(店主 08-25):已入会的店置顶 + 打标,与「当前门店」那枚区分开 —— 一个说身份,一个说位置 */
.store-switch-row .store-joined-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11px;font-style:normal;font-weight:600;color: var(--good);background: var(--wall);vertical-align:middle}
.store-switch-row em{display:inline-block;font-style:normal;font-size:11.5px;color: var(--brandd);background: var(--tagmbg);border-radius:999px;padding:2px 10px;margin-top:6px}
.store-switch-row.current{border-color: var(--brand);background: var(--wall)}

/* D50-c①:表单弹层控件站内化——checkbox 不再裸原生大蓝√;六弹层同源生效 */
.form-modal-panel input[type="checkbox"]{width:16px;height:16px;min-width:0;flex:none;margin:0;accent-color:#b98d5f;cursor:pointer}
/* 勾选框与文字同一行(常规表单样式):.kb-facts-grid label 默认竖排,这里显式回横排并整行跨列 */
.form-modal-panel label.fm-check{display:flex;flex-direction:row;align-items:center;gap:8px;grid-column:1/-1;font-size:13px;color: var(--ink);cursor:pointer}
.form-modal-panel label{font-size:13px;color: var(--ink)}
.form-modal-panel .kb-facts-grid label>span{font-size:12.5px;color: var(--brandd);font-weight:700}
.form-modal-panel input[type="text"],.form-modal-panel input[type="number"],.form-modal-panel select{border: 1px solid var(--line);border-radius:10px;padding:8px 10px;font-family:inherit;font-size:13px;background: var(--card);color: var(--ink);width:100%}
.form-modal-panel input:focus,.form-modal-panel select:focus{outline:none;border-color: var(--brand)}

/* S6①(2026-08-25):服务内容占比 = 圆环图。百分比与金额写在图例上,不靠悬停猜。 */
.mix-donut-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:6px 0}
.mix-donut{position:relative;width:168px;height:168px;border-radius:50%;flex:0 0 auto}
.mix-donut-hole{position:absolute;inset:26px;background: var(--card);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.mix-donut-hole b{font-size:15px;color: var(--ink)}
.mix-donut-hole span{font-size:11.5px;color: var(--ink)}
.mix-donut-legend{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.mix-legend-row{display:flex;align-items:center;gap:8px;font-size:13px}
.mix-legend-row i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.mix-legend-row .nm{flex:1;color: var(--ink)}
.mix-legend-row b{color: var(--ink)}
.mix-legend-row .amt{color: var(--ink);min-width:84px;text-align:right}
/* S6②:主图表柱子悬停显示金额(浮层跟着柱子走,不用把数字常年挤在图上) */
.trend-bar .stack{position:relative}
.trend-bar .b{position:relative}
.trend-hover{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 6px);white-space:nowrap;background: var(--hero);color: var(--heroink);font-size:11.5px;padding:4px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.trend-bar:hover .trend-hover{opacity:1}

/* S13①(2026-08-25):模块① 上架服务按大类分组 —— 组头一行,组内还是原来的行 */
.svc-group{margin-bottom:14px}
.svc-group-head{display:flex;align-items:center;gap:8px;padding:6px 2px;border-bottom: 1px solid var(--line);margin-bottom:6px}
.svc-group-name{font-size:13.5px;font-weight:600;color: var(--ink)}
.svc-group-count{font-size:11.5px;color: var(--ink);background: var(--wall);border-radius:999px;padding:1px 8px}

/* ===== N-5 退卡口:客户档案 →「账户调整」弹层(图=合同「退卡口设计图」)===== */
.account-adjust-panel{max-width:460px}
.aa-head{display:flex;align-items:baseline;gap:8px;padding-bottom:12px;border-bottom: 1px solid var(--line);margin-bottom:14px}
.aa-head strong{font-size:17px}
.aa-head .subtle{font-size:12.5px;color: var(--ink);flex:1}
.aa-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.aa-fact{background: var(--wall);border-radius:8px;padding:9px 11px}
.aa-fact span{display:block;font-size:11.5px;color: var(--ink)}
.aa-fact strong{display:block;font-size:16px;margin-top:2px;font-variant-numeric:tabular-nums}
.aa-fact.hi{background: var(--wall)}
.aa-fact.hi strong{color: var(--tagw)}
.aa-hint{font-size:12.5px;color: var(--ink);margin:9px 0 14px}
.aa-seg{display:flex;border: 1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:14px}
/* 六统一(08-30c 店主规格):选中=黑底白字,未选=白底黑字描边 —— 全端页签同一套,暗红破例收编 */
.aa-seg-btn{flex:1;padding:9px 6px;font-size:13.5px;background: var(--card);border:1px solid var(--black);color:var(--black);cursor:pointer}
.aa-seg-btn+.aa-seg-btn{border-left: 0}
.aa-seg-btn.on{background:var(--black);color: var(--heroink);font-weight:600}
.aa-sub{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.aa-sub-btn{border: 1px solid var(--line);background: var(--card);border-radius:999px;padding:5px 12px;font-size:12.5px;color: var(--ink);cursor:pointer}
.aa-sub-btn.on{border-color: var(--hero2);color: var(--bad);font-weight:600}
.aa-field{display:block;margin-bottom:12px}
.aa-field>span{display:block;font-size:12.5px;color: var(--ink);margin-bottom:4px}
.aa-field input,.aa-field select{width:100%;border: 1px solid var(--line);border-radius:7px;padding:9px 11px;font-size:14px;background: var(--wall)}
.aa-field em{display:block;font-style:normal;font-size:11.5px;color: var(--ink);margin-top:4px}
.aa-link{border: 0;background: none;color: var(--bad);font-size:11.5px;text-decoration:underline;cursor:pointer;padding:0}
.aa-calc{background: var(--badbg);border: 1px solid var(--hero2);border-radius:8px;padding:11px 13px;margin:14px 0}
.aa-calc div{display:flex;justify-content:space-between;font-size:13.5px;color: var(--ink);padding:2px 0;font-variant-numeric:tabular-nums}
.aa-calc div.tot{border-top: 1px solid var(--hero2);margin-top:5px;padding-top:7px;font-weight:600;color: var(--ink)}
.aa-btns{display:flex;gap:9px;flex-wrap:wrap}
.aa-elsewhere{background: var(--wall);border-radius:8px;padding:14px;font-size:13.5px;color: var(--ink)}
/* N-5 v1.1:拆账行 + 赠送黄条(只提醒不拦) */
.aa-split{font-size:12.5px;color: var(--ink);margin:6px 0 0}
.aa-warn{background: var(--tagmbg);border: 1px solid var(--hero2);color: var(--ink);border-radius:8px;padding:9px 12px;font-size:13px;margin:12px 0}

/* N-5 v1.2 ②:日结「今晚数钱按这个数」收据式卡片(回执图 2026-08-27) */
.dc-due{background: var(--card);border: 1px solid var(--line);border-radius:8px;padding:14px 16px;margin:10px 0 0}
.dc-due-lab{font-size:11px;letter-spacing:.1em;color: var(--ink);font-weight:700}
.dc-due-big{font-size:30px;font-weight:700;line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums}
.dc-due-calc{margin-top:11px;font-size:12.5px;font-variant-numeric:tabular-nums}
.dc-due-row{display:flex;justify-content:space-between;padding:2.5px 0;color: var(--ink)}
.dc-due-row.neg{color: var(--ink)}
.dc-due-row.tot{border-top: 1px solid var(--line);margin-top:5px;padding-top:6px;font-weight:700;color: var(--ink)}
.dc-due-aside{margin-top:10px;font-size:11.8px;color: var(--ink);border-top: 1px dashed var(--line);padding-top:8px}
.dc-stats{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.dc-stat{background: var(--card);border: 1px solid var(--line);border-radius:5px;padding:7px 11px;flex:1;min-width:96px}
.dc-stat .l{font-size:10.5px;color: var(--ink)}
.dc-stat .v{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.dc-due-note{font-size:11.5px;color: var(--ink);margin-top:8px}

/* D78 顾客首页轮播 · 商家自管面板(2026-08-28)。
   刻意复用同页 settings-item / card 的间距与圆角,不另起一套视觉。 */
.hero-slide-admin-list { display: grid; gap: 12px; margin: 12px 0; }
.hero-slide-admin-row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; padding: 12px; }
.hero-slide-admin-row img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; background: rgba(0,0,0,.05); }
.hero-slide-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; grid-column: 2; }
.hero-slide-admin-footer { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero-slide-upload { cursor: pointer; display: inline-flex; align-items: center; }
@media (max-width: 640px) {
  .hero-slide-admin-row { grid-template-columns: 1fr; }
  .hero-slide-admin-actions { grid-column: 1; }
}

/* D79 日结 · 现金手记(2026-08-28)。复用日结页既有的 dc-* 视觉,不另起一套。 */
.dc-notes { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.dc-notes-head { display: grid; gap: 2px; margin-bottom: 8px; }
.dc-notes-list { display: grid; gap: 6px; margin-bottom: 10px; }
.dc-notes-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; font-size: 14px; }
.dc-notes-row.rev { opacity: .62; }
.dc-notes-row .k { color: var(--muted); }
.dc-notes-row .a { font-variant-numeric: tabular-nums; font-weight: 600; }
.dc-notes-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dc-notes-form input, .dc-notes-form select { min-width: 120px; }
.dc-notes-form #dcNoteText { flex: 1 1 220px; }

/* D78 轮播文案(2026-08-28 六:面板写了顾客端看不到 —— 原来只落在 alt) */
.hero-slide-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 20px 16px; color: var(--heroink); font-size: 15px; letter-spacing: .02em;
  background: linear-gradient(to top, var(--hero), rgba(0,0,0,0));
  pointer-events: none;
}
.dc-notes-split { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); border-left: 2px solid var(--line); padding-left: 8px; }

/* 图片占位(2026-08-28 六立律:没上传过的图,要让人看出「这里该有图,只是还没传」) */
.img-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 8px, rgba(0,0,0,.045) 8px 16px);
  border: 1px dashed var(--line); color: var(--muted);
  font-size: 12px; text-align: center; min-height: 64px; box-sizing: border-box;
}
.img-placeholder svg { opacity: .55; }
.img-placeholder span { opacity: .85; }
.finance-entry-note { margin: 4px 0 8px; border-left: 2px solid var(--line); padding-left: 8px; }
.dc-deposit-alert { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--hero2); color: var(--bad); background: rgba(192,57,43,.06); font-size: 13px; }

/* 结算开单(网页):**小程序屏=设计合同**(店主 08-29 裁)——
   全部块摊开、零下拉;chips/列表行/stepper 照小程序控件形态;宽屏只用横向空间(项目区两栏)。 */
.settle-composer { display: grid; gap: 14px; margin-bottom: 16px; max-width: 860px; }
.sw-s2row { display: flex; gap: 8px; align-items: baseline; margin-top: 2px; }
.sw-s2name { font-weight: 600; }
.sw-s2phone { color: var(--muted); font-size: 13px; }
.sw-s2badge { font-size: 12px; color: var(--brandd); border: 1px solid var(--brand); border-radius: 10px; padding: 0 8px; }
.sw-card, .sw-group { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: block; background: var(--card); }
.sw-ch { font-size: 15px; font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.sw-sec { font-size: 13px; font-weight: 600; margin: 12px 0 6px; color: var(--ink); }
.sw-hint { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 6px; }
.sw-hint-line { font-size: 12px; color: var(--muted); margin: 4px 0; }
.sw-gh { font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.sw-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: 13px; background: var(--card); cursor: pointer; }
.sw-chip.on { background: var(--hero); color: var(--heroink); border-color: var(--hero2); }
.sw-tcbadge { margin-left: 4px; font-size: 11px; color: var(--brandd); }
/* 项目/加项 = 列表行(小程序 .item 同形):勾框 + 名称 + 划线原价 + 现价;宽屏两栏 */
.sw-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: none; border-bottom: 1px solid rgba(0,0,0,.05); background: none; font-size: 14px; cursor: pointer; text-align: left; }
.sw-ck { width: 20px; height: 20px; border: 1.5px solid #cfc8c0; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; color: var(--heroink); }
.sw-ck.on { background: var(--hero); border-color: var(--hero2); }
.sw-iname { flex: 1; }
.sw-iname .sw-sub, .sw-sub { display: block; font-size: 11px; color: var(--muted); }
.sw-pr { display: inline-flex; gap: 8px; align-items: baseline; }
.sw-mut { color: var(--muted); font-size: 12px; }
.sw-strike { text-decoration: line-through; }
.sw-now { font-variant-numeric: tabular-nums; }
.sw-now.free { color: var(--brandd); }
.sw-grppicked { font-size: 12px; color: var(--ink); background: rgba(176,141,87,.08); border-radius: 6px; padding: 6px 10px; margin-top: 6px; }
.sw-stepper { display: inline-flex; gap: 8px; align-items: center; }
.sw-sb { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; }
.sw-qn { font-size: 13px; min-width: 44px; text-align: center; }
.sw-inputline { display: flex; gap: 8px; }
.sw-in { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 14px; flex: 1; }
.sw-in.amt { flex: 0 0 110px; }
.sw-in.full { width: 100%; box-sizing: border-box; }.sw-addbtn { border: none; background: var(--hero); color: var(--heroink); border-radius: 999px; padding: 0 16px; cursor: pointer; }
.sw-cst { display: flex; justify-content: space-between; width: 100%; padding: 6px 8px; border: none; background: none; font-size: 13px; cursor: pointer; }
.sw-cst .sw-del { color: var(--bad); margin-left: 10px; }
.sw-cst-amt { font-variant-numeric: tabular-nums; }
.sw-addmain { border: 1px dashed var(--brand); color: var(--brandd); background: none; border-radius: 10px; padding: 12px; font-size: 14px; cursor: pointer; }
.sw-grpx { color: var(--bad); }
/* 定金 radio(小程序 .radios 同形) */
.sw-radios { display: grid; gap: 6px; }
.sw-radio { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--card); font-size: 14px; cursor: pointer; text-align: left; }
.sw-radio .sw-dt { width: 14px; height: 14px; border: 1.5px solid #cfc8c0; border-radius: 50%; flex: none; }
.sw-radio.on { border-color: var(--hero2); }
.sw-radio.on .sw-dt { border-width: 4.5px; border-color: var(--hero2); }
.sw-ok { color: var(--brandd); margin-left: 6px; }
/* 券入口行(小程序 .cpnline 同形) */
.sw-cpnline { display: flex; align-items: center; width: 100%; border: none; border-top: 1px solid rgba(0,0,0,.05); background: none; padding: 10px 4px; font-size: 14px; cursor: pointer; margin-top: 8px; }
.sw-cpnline .l { flex: none; font-weight: 600; margin-right: 12px; }
.sw-cpnline .v { flex: 1; text-align: right; }
.sw-cpnline .v.ok { color: var(--brandd); }
.sw-cpnline .v.mut { color: var(--muted); }
.sw-cpnline .arr { margin-left: 6px; color: var(--muted); }/* 开关(小程序 .sw 同形) */ .sw-sw { width: 42px; height: 24px; border-radius: 999px; border: none; background: #ddd6ce; position: relative; cursor: pointer; flex: none; }
.sw-sw .sw-dot { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); transition: left .15s; }
.sw-sw.on { background: var(--hero); }
.sw-sw.on .sw-dot { left: 20px; }
/* 支付构成(小程序 .paym 同形) */
.sw-paym { display: flex; gap: 10px; width: 100%; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--card); margin-top: 6px; font-size: 14px; cursor: pointer; text-align: left; }
.sw-paym.on { border-color: var(--hero2); }
.sw-paym.passive { cursor: default; background: rgba(0,0,0,.02); }
.sw-pmark { color: var(--muted); }
.sw-pmain b { display: block; }
.sw-psmall { font-size: 12px; color: var(--muted); }
.sw-paynote { font-size: 12px; color: var(--muted); margin-top: 8px; }
/* 明细 + 合计(小程序 .total 收据式) */
.sw-total-card { font-size: 14px; }
.sw-mg { font-weight: 600; font-size: 13px; margin: 10px 0 4px; }
.sw-dtl { display: flex; justify-content: space-between; padding: 2px 0; }
.sw-dtl-r { display: inline-flex; gap: 8px; align-items: baseline; }
.sw-dtl-a { font-variant-numeric: tabular-nums; }
.sw-tl { display: flex; justify-content: space-between; padding: 3px 0; }
.sw-tl.save { color: var(--brandd); }
.sw-tl.big { font-size: 17px; font-weight: 700; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }.sw-cta { border: none; background: var(--hero); color: var(--heroink); border-radius: 999px; padding: 14px; font-size: 16px; cursor: pointer; width: 100%; }
.sw-cta:disabled { opacity: .6; }
.sw-foot { text-align: center; font-size: 12px; color: var(--muted); }
.sw-empty { font-size: 13px; color: var(--muted); padding: 6px 0; }
.sw-warn { color: var(--bad); font-size: 13px; }
.sw-tccard.tcdead { opacity: .5; }
.sw-tcexp { color: var(--bad); font-size: 11px; margin-left: 6px; }
/* 券弹层(小程序 cpnsheet 同形) */
.sw-cpnmask { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60; }
.sw-cpnsheet { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(480px, 92vw); max-height: 70vh; overflow: auto; background: var(--card); border-radius: 12px; padding: 16px; z-index: 61; display: grid; gap: 8px; }
.sw-cpn { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--card); cursor: pointer; text-align: left; }
.sw-cpn.on { border-color: var(--hero2); }
.sw-cpn.dis { opacity: .5; }
.sw-cpn .n { font-weight: 600; display: block; }
.sw-cpn .s { font-size: 12px; color: var(--muted); }
.sw-cpn .d { color: var(--brandd); font-weight: 600; }
.sw-cpnok { border: none; background: var(--hero); color: var(--heroink); border-radius: 8px; padding: 10px; cursor: pointer; }
/* 宽屏:只用横向空间 —— 项目/加项列表两栏,交互模型不变 */
@media (min-width: 1100px) {
  .sw-group { display: block; }
  .sw-group .sw-item { width: calc(50% - 6px); display: inline-flex; box-sizing: border-box; }
}
.sw-pending { border-left: 3px solid #b08d57; padding: 8px 12px; background: rgba(176,141,87,.07); font-size: 14px; }
/* 开单打开时=独立一页:订单页其余块全部让位(点哪张卡都一样,画面必变) */
#bookingsPage.settle-open > :not(#settlementComposer) { display: none; }

/* 今天台面(小程序今日台面同款,2026-08-30):技师×时间网格 */
#todayBoard { display: block; }
.tb-datebar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tb-nav { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; font-size: 16px; }
.tb-date { font-size: 16px; font-weight: 700; }
.tb-today { margin-left: auto; border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; background: var(--card); cursor: pointer; font-size: 13px; }
.tb-today.cur { background: var(--hero); color: var(--heroink); border-color: var(--hero2); }
.tb-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }.tb-pill { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; background: var(--card); }
.tb-pill b { font-weight: 700; }
.tb-pill.live { color: var(--good); border-color: var(--hero2); }
.tb-pill.hot { color: var(--brandd); border-color: var(--brand); cursor: pointer; }
.tb-closed { padding: 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; }
.tb-grid { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.tb-left { flex: none; width: 52px; border-right: 1px solid var(--line); }
.tb-corner { height: 56px; border-bottom: 1px solid var(--line); }
.tb-gutter { position: relative; }
.tb-hr { height: 48px; font-size: 11px; color: var(--muted); padding: 2px 6px; box-sizing: border-box; }
.tb-hr.off { background: rgba(0,0,0,.03); }
/* 🔴 D186(店主 05v 补一 §四 亲看):分栏之后一位技师并排 5 张卡,把右边那列挤出了屏,
   右边缘只露出半张 —— **叠字治好了,「看不全」是新病**。
   台面本来就横向可滚,但**看不出来还有**。裁的原话:「要么看得全,要么看得出还有」。
   做法:①可滚时右侧浮一条渐变 + 一句提示(纯装饰,不挡点击);②内容右侧留 8px,
   最后一张卡不贴着边(贴边看着就像被切了一半)。 */
.tb-right { overflow-x: auto; flex: 1; position: relative; }
.tb-rin { min-width: max-content; padding-right: 8px; }
.tb-more { position: absolute; right: 0; top: 56px; bottom: 0; width: 44px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--card)); display: flex; align-items: center; justify-content: flex-end; }
.tb-more span { font-size: 11px; color: var(--muted); writing-mode: vertical-rl; padding: 0 2px; }
.tb-heads { display: flex; border-bottom: 1px solid var(--line); }
.tb-th { width: 150px; flex: none; padding: 6px 10px; height: 56px; box-sizing: border-box; border-right: 1px solid rgba(0,0,0,.04); }
.tb-nm { font-weight: 600; font-size: 14px; }
.tb-rl { font-size: 11px; color: var(--muted); }
.tb-st { display: inline-block; font-size: 11px; border-radius: 8px; padding: 0 8px; margin-top: 2px; }
.tb-st.busy { background: rgba(192,57,43,.1); color: var(--bad); }
.tb-st.free { background: rgba(29,122,79,.1); color: var(--good); }
.tb-cols { display: flex; position: relative; }
.tb-col { width: 150px; flex: none; position: relative; border-right: 1px solid rgba(0,0,0,.04); }
.tb-line { height: 48px; border-bottom: 1px dashed rgba(0,0,0,.06); box-sizing: border-box; }
.tb-line.off { background: rgba(0,0,0,.03); }
/* 🔴 D171:交叠的单在同一技师列里**并排分栏**(左/宽由 JS 按泳道算,写在 style 上)。
   这里只管「不许互相压」之后的可读性:分栏后列窄了,文字一律**单行 + 省略号**,
   不换行、不折字 —— 折行才是店主截图里「两串字叠在一起」的另一半原因。 */
.tb-blk { position: absolute; left: 4px; right: 4px; border: none; border-radius: 8px; padding: 4px 8px; text-align: left; cursor: pointer; overflow: hidden; font-size: 12px; display: flex; flex-direction: column; gap: 1px; }
.tb-blk > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
/* 分栏后字号收一档:两栏并排时 12px 会把「10:00–13:00」挤出去 */
.tb-blk.split { font-size: 11px; padding: 3px 5px; }
.tb-blk.split .tb-bs, .tb-blk.split .tb-tags { display: none; }   /* 层级:时间 > 顾客名 > 项目;窄栏先舍项目与标签 */
.tb-blk.free { background: rgba(29,122,79,.06); border: 1px dashed rgba(29,122,79,.4); color: var(--good); align-items: center; justify-content: center; }
.tb-blk.hand { background: var(--tagmbg); }
.tb-blk.foot { background: var(--wall); }
.tb-blk.lash { background: var(--tagwbg); }
.tb-blk.care { background: var(--wall); }
.tb-blk.pending { opacity: .55; }
/* 🔴 D172(夜班令6 段 3):台面那四个品类色是**浅色系的**,深底上一放就是四块高亮补丁
   —— 店主那张深色截图里「浅色台面卡」说的就是它。深色下换成同色相的暗版 + 浅字。
   为什么不直接令牌化:这四个是**品类色**(手/足/睫/护理),浅深两套本来就该各调一次,
   不是同一个语义的明暗两面。两套都写在这里,一处真相。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tb-blk.hand { background: var(--hero); color: var(--heroink); }
  :root:not([data-theme="light"]) .tb-blk.foot { background: var(--hero); color: var(--heroink); }
  :root:not([data-theme="light"]) .tb-blk.lash { background: var(--hero); color: var(--heroink); }
  :root:not([data-theme="light"]) .tb-blk.care { background: var(--hero); color: var(--heroink); }
  :root:not([data-theme="light"]) .tb-blk.free { background: rgba(111, 208, 160, .08); color: var(--good); }
}
:root[data-theme="dark"] .tb-blk.hand { background: var(--hero); color: var(--heroink); }
:root[data-theme="dark"] .tb-blk.foot { background: var(--hero); color: var(--heroink); }
:root[data-theme="dark"] .tb-blk.lash { background: var(--hero); color: var(--heroink); }
:root[data-theme="dark"] .tb-blk.care { background: var(--hero); color: var(--heroink); }
:root[data-theme="dark"] .tb-blk.free { background: rgba(111, 208, 160, .08); color: var(--good); }
.tb-blk.settled { outline: 2px solid #b08d57; }
.tb-bt { font-weight: 600; }
.tb-bn { font-weight: 600; }
.tb-bs { color: var(--ink); }
.tb-sdot { font-style: normal; margin-right: 3px; }
.tb-sdot.active { color: var(--good); }
.tb-sdot.done { color: var(--brandd); }
.tb-tag { font-style: normal; font-size: 10px; border-radius: 6px; padding: 0 5px; margin-right: 3px; }
.tb-tag.as-blue { background: var(--tagwbg); color: var(--tagw); }
.tb-tag.owner { background: var(--tagmbg); color: var(--brandd); }
.tb-tag.zhi { background: var(--wall); color: #6b4d8f; }
.tb-tag.xin { background: var(--wall); color: var(--good); }
.tb-unpaid { font-style: normal; font-size: 10px; color: var(--bad); }
.tb-legend { font-size: 12px; color: var(--muted); margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.tb-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.tb-legend .lg.hand { background: var(--tagmbg); } .tb-legend .lg.foot { background: var(--wall); }
.tb-legend .lg.lash { background: var(--tagwbg); } .tb-legend .lg.care { background: var(--wall); }
.tb-legend .lg.free { background: rgba(29,122,79,.15); border: 1px dashed rgba(29,122,79,.4); }
.tb-legend-hd { color: var(--muted); }
.tb-setup-wall { border: 1px dashed var(--brand); border-radius: 10px; padding: 28px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.tb-setup-wall p { color: var(--muted); font-size: 13px; max-width: 420px; }
/* 死口清剿·三接回(2026-08-30):随单充值行内件 + 双技师数字排(镜像小程序 rvsheet/numlist) */
.sw-rvlink { color: var(--brandd); font-weight: 600; cursor: pointer; }
.sw-rvlink.dis { opacity: .5; }
.sw-bindbar { display: block; font-size: 12px; color: var(--brandd); background: rgba(176,141,87,.1); border-radius: 6px; padding: 4px 8px; margin: 4px 0; }
.sw-cpnsheet input#swRvAmt { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 15px; width: 100%; box-sizing: border-box; }
.sw-numlist { display: grid; gap: 2px; margin: 6px 0 2px; }
.sw-numrow { font-size: 13px; color: var(--muted); }
.sw-numrow b { color: var(--ink); margin-right: 4px; }
.sw-techrow { display: flex; align-items: center; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
.sw-tn { font-size: 13px; font-weight: 600; min-width: 56px; }
.sw-chip.mini { padding: 2px 10px; font-size: 12px; }
/* 营业时间强制设置(图 v1.0 屏①/屏②):全屏接管,无 ×,不可绕过 */
#hoursSetupWall { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: auto; }
.hsw-box { width: min(420px, 92vw); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; }
.hsw-title { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.hsw-hint { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.hsw-day { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }.hsw-sw, .ui-sw { width: 34px; height: 20px; border-radius: 999px; border: none; background: var(--line); position: relative; cursor: pointer; flex-shrink: 0; }
.hsw-sw::after, .ui-sw::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--card); top: 2px; left: 2px; transition: left .15s; }
.hsw-sw.on, .ui-sw.on { background: var(--hero2); }
.hsw-sw.on::after, .ui-sw.on::after { left: 16px; }
.hsw-dn { width: 2.4em; font-size: 14px; }
.hsw-times { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 13px; }
.hsw-times input { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 13px; }
.hsw-ph { margin-left: auto; font-size: 12px; color: var(--muted); background: var(--wall); border-radius: 4px; padding: 2px 8px; }
.hsw-save { width: 100%; margin-top: 16px; border: none; border-radius: 8px; padding: 11px 0; font-size: 15px; font-weight: 700; cursor: pointer; }
.hsw-save.go { background: var(--hero2); color: var(--heroink); }
.hsw-save.dis { background: var(--wall); color: var(--muted); cursor: not-allowed; }
.hsw-note { text-align: center; font-size: 12px; color: var(--brandd); margin-top: 6px; }
.hsw-staff { text-align: center; padding: 46px 24px; }
.hsw-emoji { font-size: 34px; margin-bottom: 8px; }
/* 入口总收敛(08-30c):账户调整弹层内嵌充值/冲销 */
.aa-mrow{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 10px}
.aa-txn{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.aa-txn.rev{opacity:.65}
.aa-txn-info{flex:1;min-width:0;display:flex;flex-direction:column}
.aa-txn .neg{color: var(--bad)}
/* 小记图片(08-30f) */
.mn-imgrow{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.mn-tile{position:relative;display:inline-block}
.mn-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.mn-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.mn-del{position:absolute;top:-6px;right:-6px;width:20px;height:20px;line-height:18px;border: none;border-radius:50%;background: var(--hero);color: var(--heroink);font-size:11px;cursor:pointer}
.dc-due-note{font-size:11.5px;color:var(--muted);margin:-2px 0 6px;padding-left:2px}

/* ===== 通知与回访(照《通知与回访设置图 v1.0》重做;08-31m)===== */
.nfy-tabs { display: flex; gap: 8px; margin-bottom: 12px; }.nfy-tab { border-radius: 999px; padding: 4px 16px; font-size: 13px; font-weight: 700; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
/* 🔴 05z 现测(这一处是**改之前就坏的**,不是这一批改坏的):
   选中那颗胶囊原来写的是 `background: var(--ink, #141413)` —— 拿**字色令牌当面用**。
   浅色档下 --ink 是深的,看着没事;深色档下 --ink 翻成浅色,于是「浅底 + 奶白字」= 1.08:1。
   归族「一个令牌只回答一个问题」:字色令牌不许当背景。选中态要的是深胶囊 → --hero。 */
.nfy-tab.on { background: var(--hero); color: var(--heroink); }
.nfy-notice { background: var(--wall); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--ink); margin-bottom: 12px; }
.nfy-grp { font-size: 13px; font-weight: 700; letter-spacing: .04em; margin: 14px 0 8px; }
.nfy-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.nfy-card.off { opacity: .85; }
.nfy-head { display: flex; align-items: center; }
.nfy-head b { font-size: 14px; }
.nfy-sw { margin-left: auto; }
.nfy-sw input { width: 18px; height: 18px; }
.nfy-param { font-size: 13px; color: var(--ink); margin-top: 8px; }
.nfy-num { width: 70px; padding: 3px 6px; text-align: center; }
.nfy-tpl { width: 100%; box-sizing: border-box; margin-top: 8px; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; background: var(--card); line-height: 1.6; resize: vertical; }
.nfy-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.nfy-chips button { font-size: 11px; background: var(--wall); color: var(--ink); border: none; border-radius: 999px; padding: 1px 10px; cursor: pointer; }
.nfy-prev { margin-top: 6px; font-size: 12px; color: var(--ink); }
.nfy-prev em { font-style: normal; color: var(--ink); }
.nfy-btnrow { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.nfy-reset { color: var(--ink); }
.nfy-queue-head { margin-bottom: 10px; }
.nfy-rec { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.nfy-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.nfy-dot.d-ok { background: var(--hero2); } .nfy-dot.d-wait { background: var(--hero2); } .nfy-dot.d-fail { background: var(--hero); } .nfy-dot.d-off { background: #b3b3ae; }
.nfy-rec-text { color: var(--ink); margin-top: 2px; }
.nfy-why summary { cursor: pointer; color: var(--bad); font-size: 12px; }
/* ===== RFM 接回网页(customer-tags.js;08-30h 拉平批①)===== */
.rfm-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px 2px; font-size: 13px; }
.rfm-chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; }
.rfm-chip.on { background: var(--hero); color: var(--heroink); border-color: var(--hero2); }
/* 01t 店主裁定:阈值编辑器横排一行 */
.rfm-rules-editor { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 12px 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.rfm-rules-editor input { width: 64px; padding: 2px 6px; text-align: center; }
.rfm-rules-editor button { align-self: center; margin-left: auto; }

/* ===== 打卡 WiFi 名单(attendance-wifi.js;08-31 裁清单#11)===== */
.att-wifi { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.att-wifi-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.att-wifi-list li { display: flex; align-items: center; gap: 10px; }
.att-wifi-add { display: flex; gap: 8px; align-items: center; }
.att-wifi-add input { padding: 4px 8px; font-size: 13px; }

/* ===== 员工工作台(staff-workbench.js;08-31 清单#1+#3)===== */
.swb { display: flex; flex-direction: column; gap: 14px; }
.swb-card h3 { margin-bottom: 8px; }
.swb-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.swb-day { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; font-size: 13px; }
.swb-day.off { opacity: .55; }
.swb-tiers, .swb-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.swb-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin-bottom: 10px; }
.swb-item { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.swb-quote { border-top: 1px solid var(--line); padding-top: 8px; }

/* ===== 召回周报横条(recall-digest.js;08-31 清单#13)===== */
.recall-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; }
.recall-items { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; }
.recall-items.hidden { display: none; }
.recall-item p { margin: 4px 0; font-size: 13px; }

/* ===== 员工端展示(全店)三选一(staff-visibility.js;08-31k)===== */
.staff-vis-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.staff-vis-note { margin: 2px 0 10px; }

/* ===== 网页写小记弹层(service-note-modal.js;31m 三)===== */
.sn-sheet { max-width: 520px; }
.sn-ta { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; line-height: 1.6; margin: 8px 0; resize: vertical; }
.sw-btnrow { display: flex; gap: 10px; margin-top: 10px; align-items: center; }

/* ===== 值日行(today-board;31l)===== */
.tb-duty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; font-size: 13px; }
.tb-duty-lab { font-weight: 700; }
.tb-duty-chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 2px 12px; font-size: 12px; cursor: pointer; }
.tb-duty-chip.on { background: var(--hero); color: var(--heroink); border-color: var(--hero2); font-weight: 700; }
.tb-duty-chip.ro { cursor: default; opacity: .9; }

/* ===== 报价状态横幅(31p;三色,句后端出)===== */
.qs-banner { margin: 8px 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.6; }
.qs-banner.quoted { background: var(--wall); color: var(--ink); }
.qs-banner.expired { background: var(--card); color: var(--brandd); font-weight: 600; }
.qs-banner.reference { background: var(--wall); color: var(--ink); }

/* 客服与报价(31q 裁定1) */
.qset .br-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.qs-gear { margin-left: auto; float: right; }
.qset-sheet { max-width: 420px; }

/* D91 薪资卡月切换(同形 monthbar) */
.swb-monthbar { display: flex; align-items: center; gap: 10px; }
.swb-monthbar h3 { margin: 0; }

/* D98:值日设置行=行内说明小字 + 右侧标准开关(.ui-sw=全站唯一开关) */
.duty-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0; }
.duty-row .note { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* D97:台面待写小记 pill + 面板行 */
.tb-pill.warn { background: var(--card); color: var(--brandd); border-color: var(--line); cursor: pointer; }
.tbn-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }

/* D101② 会话侧顾客卡 kv 行 */
.cs-kv { display: flex; justify-content: space-between; gap: 10px; margin: 3px 0; font-size: 12.5px; }
.cs-kv span { color: var(--muted); }

/* 补录小合同(01v):面板里那两句(提示 + 后端出的归属确认句) */
.tbf-bf { font-size: 12.5px; color: var(--muted); margin: 2px 0; line-height: 1.6; }
.tbf-bf.note { color: var(--brandd); background: var(--card); border-radius: 8px; padding: 8px 10px; }

/* D107(02c 裁③):老板端订单详情「服务签署单」块 —— 与顾客端同源同形 */
.sig-block .sig-row { display: flex; justify-content: space-between; gap: 12px; margin: 5px 0; font-size: 13px; }
.sig-block .sig-row.total { border-top: 1px solid var(--line); padding-top: 7px; font-size: 13.5px; }

/* D105:值日块内就地「回到今天」*/
.tb-duty-back { margin-left: 8px; border: 0; background: none; color: var(--brandd); text-decoration: underline; cursor: pointer; font-size: 13px; }

/* ── 主页业绩大屏 · **皮按合同图原样搬**(D168 段 3;图 v3.1 §三;页面本体在 apps/web/dashboard-home.js)──

   店主 05t 原话:「做的是骨架,皮一点没搬」。上一版是白卡片黑字 + 一条灰描边折线,
   合同图上是**深色英雄块 + 金色数字 + 带渐变填充的折线 + 5 个 dots + 600ms 数字滚动**。
   这一段整块重写,颜色**只用令牌**(`design-tokens.css`,逐字符搬自合同图):

   🔴 **兜底值全删**。原来这里写的是 `var(--line, #e5e0da)` 这种带兜底的 —— 兜底值等于
   偷偷藏了第二套配色:令牌没加载上时页面照样「好看」,于是没人发现令牌根本没生效。
   现在取不到就该露出来。

   ⚠️ **与图不符一处,已报待裁 #16**:合同图的圆角是 16/14/12/10/9px,
   而本仓《形制集》只许 {999px, 8px, 50%, 0} 且**条数棘轮只减不增**(店主立的)。
   两条规矩打架,这里按**形制集**取 8px —— 要按图的圆角,得先改形制集,那是店主的裁。 */
.dh-card { padding: 16px; margin-bottom: 12px; }
/* 英雄区自己就是那块深色卡,外面不再套一层白卡(套了就是「深块贴在白卡里」) */
.dh-hero-card { padding: 0; border: 0; background: transparent; margin-bottom: 12px; }

.dh-hero {
  /* `background-color` 单独写一遍不是冗余:渐变落在 `background-image` 上,
     `getComputedStyle().backgroundColor` 读出来会是**透明** —— 判据要能读到底色
     (店主 05t 段 3 第 4 条原话:「backgroundColor 转 hex === --hero 当前值」)。
     顺带:渐变没加载出来时,底色也还是对的那一个。 */
  background-color: var(--hero);
  background-image: radial-gradient(90% 120% at 100% 0%, rgba(217, 185, 126, .22), transparent 55%), linear-gradient(160deg, var(--hero), var(--hero2));
  color: var(--heroink);
  border-radius: 8px;
  padding: 16px 18px 14px;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start;
}
.dh-hero-left { display: flex; flex-direction: column; min-height: 100%; }

/* 维度条:图上就在深块里(不是深块外面那一行灰按钮) */
.dh-periods { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.dh-period { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--herogrid); color: var(--herosub); background: transparent; cursor: pointer; }
.dh-period.on { background: var(--herogold); color: var(--hero); border-color: var(--herogold); font-weight: 700; }
.dh-full { margin-left: auto; border-radius: 999px; border: 1px solid var(--herogold); color: var(--herogold); background: transparent; font-size: 12px; padding: 2px 10px; cursor: pointer; opacity: 1; }

.dh-k { font-size: 13px; color: var(--herosub); margin: 0; }
/* 大数字 = Fraunces + 等宽数字位(滚动时不许左右跳) */
.dh-big { font-family: 'Fraunces', Georgia, 'Noto Serif SC', serif; font-variant-numeric: tabular-nums; font-size: 3.3rem; line-height: 1.05; font-weight: 700; letter-spacing: -.01em; color: var(--heroink); margin: 4px 0 2px; }
.dh-cur { font-size: 1.2rem; color: var(--herogold); font-weight: 500; margin-right: 4px; }
.dh-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 4px; }
.dh-delta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; border-radius: 999px; padding: 1px 9px; font-weight: 600; }
.dh-delta.up { background: var(--goodbg); color: var(--good); }
.dh-delta.down { background: var(--badbg); color: var(--bad); }
.dh-delta-none { background: var(--flatbg); color: var(--flat); }
.dh-locked { color: var(--herosub); }
.dh-truth { color: var(--herosub); margin: 8px 0; }
.dh-skeleton .dh-sk-line { height: 18px; margin: 10px 0; background: var(--herogrid); }

/* 折线:描边金色 + 渐变填充(.35 → 0)+ 末点圆环 —— 三件缺一件都不是图上那条线 */
.dh-spark { display: block; margin: 2px 0 6px; max-width: 100%; }

/* 轮播 dots:5 个,选中那个变成金色的胶囊 */
/* 🔴 现测踩到:图上 dots 是 `<i>`,而这里得能点(轮播要能手动切),所以渲染的是 `<button>` ——
   选择器还写着 `i` 的话,五个 dot 就顶着浏览器默认按钮样式出场(截图上是五道灰杠)。
   选择器跟着真实节点走,不跟着图上的标签名走。 */
.dh-dots { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
.dh-dots button { width: 5px; height: 5px; border-radius: 50%; background: var(--herogrid); display: block; border: 0; padding: 0; cursor: pointer; appearance: none; }
.dh-dots button.on { background: var(--herogold); width: 14px; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) { .dh-dots button.on { transition: width .3s; } }

/* 此刻四格 + 下一位卡:都在深块里(图 §三) */
.dh-now4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto; padding-top: 12px; }
.dh-now-cell { background: rgba(245, 239, 227, .06); border: 1px solid var(--herogrid); border-radius: 8px; padding: 7px 10px 6px; display: flex; flex-direction: column; text-align: left; }
.dh-now-cell span { display: block; font-size: 11px; color: var(--herosub); }
.dh-now-cell strong { font-family: 'Fraunces', Georgia, serif; font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 700; color: var(--heroink); line-height: 1.15; }
.dh-next { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; background: rgba(217, 185, 126, .13); border: 1px solid rgba(217, 185, 126, .38); border-radius: 8px; padding: 8px 12px; }
.dh-next-time { font-family: 'Fraunces', Georgia, serif; font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 700; color: var(--herogold); line-height: 1.1; }
.dh-next-who { font-weight: 600; color: var(--heroink); font-size: .95rem; }
.dh-next-what { color: var(--herosub); font-size: 12px; }
.dh-next-none { color: var(--herosub); }
.dh-next-go { margin-left: auto; border: 0; background: transparent; cursor: pointer; color: var(--herogold); font-size: 12px; }
.dh-closed { font-size: 18px; color: var(--herosub); }

/* 右栏四小牌:图 §三 里它们**也在深块内**,是半透明面板不是白卡 */
.dh-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.dh-tile { background: rgba(245, 239, 227, .06); border: 1px solid var(--herogrid); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.dh-tile-k { font-size: 12px; color: var(--herosub); }
.dh-tile-v { font-family: 'Fraunces', Georgia, serif; font-variant-numeric: tabular-nums; font-size: 1.3rem; font-weight: 700; color: var(--heroink); }
.dh-tile-x { font-size: 11px; color: var(--herosub); }
/* AI 今日一句:图上是横跨两列的最后一格 */
.dh-ai { grid-column: 1 / -1; background: rgba(245, 239, 227, .06); border: 1px solid var(--herogrid); border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.5; color: var(--heroink); }
.dh-ai-at { color: var(--herosub); font-size: 11px; display: block; }

/* 🔴 J-36 现测(店主 2026-09-09 立的四条之一):待办数字在**浅色**下只有 4.08:1,不到 4.5。
   金色数字(`--brandd` #8a6f45)压在 `--wall`(#f1eee6)上就是这个数。
   改的是**底色**不是令牌值:换成 `--card`(浅色 #fff / 深色 #20241f)→ 浅色 4.70:1、深色 9.19:1。
   为什么不改令牌:令牌是从合同图逐字符搬的,改它令牌刀当场红 —— **该动的是用法,不是那份值**。
   与图的差异(图上这一行底色是 `--wall`)记在回执里:对比度这条是店主今晚立的硬线。 */
.dh-todo-row { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 1px solid var(--line); background: var(--card); padding: 6px 8px; cursor: pointer; border-radius: 8px; }
.dh-todo-row + .dh-todo-row { margin-top: 6px; }
.dh-todo-row strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; color: var(--brandd); }
.dh-todo-row[data-urgent="1"] { border-left: 3px solid var(--bad); }

/* 🔴 D154:宿主 `#dashboardCharts` 原来是三列的图表网格(旧首页的形状),
   新首页自己就是「两栏 + 通栏 + 下两栏」——所以先把宿主改回单列块流,
   否则我的 section 会被塞进旧网格的三个格子里(现测:1082px 下被切成三条 351px)。 */
#dashboardCharts.dashboard-chart-grid { display: block; }

.dh-bottom { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) {
  .dh-hero, .dh-bottom { grid-template-columns: 1fr; }
  .dh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 段 11 · 前台全屏大屏(图 v3.2 §五)。这块屏挂在前台不动,顾客可能看到。
   🔴 D168 段 4 第 4 条:全屏态**同步换皮** —— 底色走 `--hero` 系(图 §五 的 `.tv` 就是
   「深底 + 右上角一团金光」),大数字走 `--herogold`。原来这里写死 `#14110f`/`#f6f1ea`,
   与令牌各说各话:深色主题一开,首页跟着变、这块屏不变。 */
.dh-fs { position: fixed; inset: 0; z-index: 9999; background-color: var(--hero); background-image: radial-gradient(70% 100% at 80% 0%, rgba(217, 185, 126, .25), transparent 60%), linear-gradient(160deg, var(--hero), var(--hero2)); color: var(--heroink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dh-fs .fs-wrap { text-align: center; padding: 40px; transition: transform 1.6s ease-in-out; }
.dh-fs .fs-wrap.fs-saver { transform: scale(1.1); }
.dh-fs .fs-top { display: flex; justify-content: space-between; font-size: 18px; opacity: .7; margin-bottom: 28px; gap: 40px; }
.dh-fs .fs-label { font-size: 22px; opacity: .75; margin: 0 0 10px; }
.dh-fs .fs-big { font-family: 'Fraunces', Georgia, 'Noto Serif SC', serif; font-variant-numeric: tabular-nums; font-size: clamp(64px, 14vw, 180px); margin: 0; font-weight: 700; line-height: 1; color: var(--herogold); }
.dh-fs .fs-now { display: flex; gap: 32px; justify-content: center; font-size: 26px; margin-top: 28px; opacity: .9; }
.dh-fs .fs-next { margin-top: 18px; font-size: 22px; opacity: .75; }
.dh-fs .fs-dots { display: flex; gap: 8px; justify-content: center; margin-top: 34px; }
.dh-fs .fs-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--herogold); opacity: .25; }
.dh-fs .fs-dots i.on { opacity: .9; }
.dh-fs .fs-exit { margin-top: 26px; font-size: 15px; opacity: .45; }
@media (prefers-reduced-motion: reduce) { .dh-fs .fs-wrap { transition: none; } .dh-fs .fs-wrap.fs-saver { transform: none; } }

/* ═══ 签署文件留档(10b)· 合同图 v2 ═══════════════════════════════
   🔴 颜色一律走既有 token,不新造色(配色批的棘轮盯着 styles.css 的写死色)。
   🔴 圆角一律取**形制集** {999px, 8px, 50%, 0} —— 第一版我随手写了 4/6/9/10/14px 七种,
   `test-ui-spec` ① 当场红(容器侧 65 > 58)。二形法不是审美偏好,是**一眼认得出是同一个系统**。 */
.signed-docs-empty{border:1px dashed var(--line);border-radius:8px;padding:18px 12px;text-align:center;color:var(--sub);font-size:.9rem;margin-bottom:10px}
.signed-docs-list{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.signed-doc-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 4px;border:0;border-top:1px solid var(--line);background:none;color:inherit;text-align:left;cursor:pointer}
.signed-doc-row:first-child{border-top:0}
.signed-doc-row.is-voided .signed-doc-title{color:var(--sub)}
.signed-doc-row.is-voided .signed-doc-thumb{opacity:.5}
.signed-doc-thumb{width:34px;height:44px;flex:none;border:1px solid var(--line);border-radius:8px;background:var(--card);position:relative;overflow:hidden}
.signed-doc-thumb::before{content:"";position:absolute;inset:6px 5px auto 5px;height:2px;background:var(--line);box-shadow:0 5px 0 var(--line),0 10px 0 var(--line),0 15px 0 var(--line)}
.signed-doc-text{flex:1;min-width:0;display:flex;flex-direction:column}
.signed-doc-title{font-size:.9rem;font-weight:600}
.signed-doc-meta{font-size:.76rem;color:var(--sub)}
.signed-doc-pill{font-size:.7rem;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.signed-doc-pill.is-ok{background:var(--goodbg,var(--wall));color:var(--good,var(--ink))}
.signed-doc-pill.is-voided{background:var(--wall);color:var(--sub)}
.signed-type-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.signed-type{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:11px 12px;cursor:pointer;font-size:.9rem}
/* 🔴 图 v2.1(10c §一②):选中态用主色,不用品牌金 —— 与小程序端同一个样子 */
.signed-type.is-on{border-color:var(--accd,var(--acc));background:var(--wall)}
/* 🔴 浏览器实拍才看见:原生 radio 不限尺寸会被全局 input 样式撑成一个大圆饼。
   合同图上是 15px 的小圆点(`.opt .k`),按图钉死。 */
.signed-type input[type=radio]{width:15px;height:15px;flex:none;margin:0;accent-color:var(--accd,var(--acc))}
.signed-visible-row input[type=checkbox]{width:15px;height:15px;flex:none;margin:0}
.signed-title-row,.signed-visible-row{display:flex;align-items:center;gap:8px;font-size:.86rem;margin:8px 0}
.signed-title-row input{flex:1}
.signed-shots{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;min-height:8px}
.signed-shot{position:relative;width:76px}
.signed-shot img{width:76px;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.signed-shot b{display:block;font-size:.68rem;color:var(--sub);text-align:center;font-weight:600}
.signed-shot.is-add{width:76px;height:96px;border:1px dashed var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--sub)}
.signed-pages{display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow-y:auto;margin-bottom:10px}
.signed-pages img{width:100%;border:1px solid var(--line);border-radius:8px}
.signed-kv{display:flex;justify-content:space-between;font-size:.84rem;padding:4px 0;border-bottom:1px solid var(--line)}
.signed-kv span:first-child{color:var(--sub)}
.signed-kv .is-ok{color:var(--good,var(--ink));font-weight:700}
.signed-kv .is-voided{color:var(--sub);font-weight:700}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:90}
.modal-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px;max-width:420px;width:100%;max-height:88vh;overflow-y:auto}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.modal-head h3{margin:0;font-size:1.02rem}
.modal-actions{display:flex;gap:8px;margin:10px 0}
.btn-like{flex:1;text-align:center;background:var(--brand,var(--acc));color:var(--card);border-radius:999px;padding:9px 0;font-size:.88rem;font-weight:700;cursor:pointer}
.btn-like.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:500}

/* 顾客端「我签署过的文件」· 只读(图 v2 第 5 屏)。圆角取形制集,颜色全走 token。 */
.signed-docs-mine{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.signed-doc-mine{display:flex;align-items:center;gap:10px;padding:8px 4px;border-top:1px solid var(--line)}
.signed-doc-mine:first-child{border-top:0}