/* 测色模块 · 图片校色工作区（网格标记 + CCM 校准）
   设计依据：service/color-pick-fe.md §3；令牌全部复用 shadecast.css(.reso-app 亮色映射) */

.color-pick-workspace {
  position: relative;
}

/* 组件自带 display 规则会盖过 [hidden] 的 UA 样式，这里统一兜底 */
.cp-workspace [hidden],
.cp-canvas-wrap [hidden] {
  display: none !important;
}

/* ── 工作区两栏：画布 + 右侧手风琴 ─────────────────────────── */
.cp-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  margin-top: 14px;
}

/* 牙形细描阶段插入中间列：画布 | 九宫格预览+分区表 | 手风琴 */
.cp-workspace.shape-on {
  grid-template-columns: minmax(0, 1fr) 280px 300px;
}

@media (max-width: 1100px) {

  .cp-workspace,
  .cp-workspace.shape-on {
    grid-template-columns: 1fr;
  }
}

/* ── 标注画布 ──────────────────────────────────────────────── */
.cp-canvas-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cp-canvas-wrap {
  position: relative;
  /* 底部工具条按画布实际宽度决定图标+文字 / 纯图标(见 @container 段) */
  container-type: inline-size;
  height: 460px;
  /* JS 会按当前视口自动撑满；仍可通过底部把手拖拽调整 */
  min-height: 320px;
  border: 1px solid var(--bd);
  border-radius: 11px;
  background: #23262b;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.cp-canvas-wrap canvas.cp-pan {
  cursor: grab;
}

/* 长按图片进入拖动：优先级高于其它光标(含 .cp-mark-armed 的 none) */
.cp-canvas-wrap canvas.cp-panning,
.cp-canvas-wrap canvas.cp-panning.cp-mark-armed {
  cursor: grabbing !important;
}

.cp-canvas-wrap canvas.cp-locked {
  cursor: default;
  pointer-events: none;
}

.cp-canvas-wrap .preview-loading {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
}

.cp-canvas-wrap .preview-loading .case-loading-text {
  color: #aab2bd;
}

/* 牙色详情生成后固定在视口底部，提示页面下方还有可滚动内容。 */
.cp-scroll-cue {
  position: fixed;
  /* 低于 .color-pick-open(z-index:20)，避免遮住画布底部工具与拖拽手柄；
     仍高于其后的牙色详情内容。 */
  z-index: 19;
  left: var(--sidebar-width, 210px);
  right: 0;
  bottom: 0;
  height: 64px;
  padding: 22px 24px 8px;
  border: 0;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .42) 52%,
      rgba(255, 255, 255, .96) 100%);
  color: var(--acc);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.cp-scroll-cue[hidden] {
  display: none;
}

.cp-scroll-cue-action {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  font-size: 14px;
}

.cp-scroll-cue-action svg {
  width: 17px;
  height: 17px;
  flex: none;
  animation: cp-scroll-cue-bounce 1.35s ease-in-out infinite;
}

@keyframes cp-scroll-cue-bounce {

  0%,
  100% {
    transform: translateY(-1px);
  }

  50% {
    transform: translateY(2px);
  }
}

@media (max-width: 760px) {
  .cp-scroll-cue {
    left: 0;
  }
}

/* 画布高度拖拽把手(画布下方独立条，不与画布手势冲突) */
.cp-resize-handle {
  flex: none;
  height: 14px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  border-radius: 7px;
  user-select: none;
  touch-action: none;
}

.cp-resize-handle:hover,
.cp-resize-handle.dragging {
  background: var(--acc-soft);
}

.cp-resize-grip {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--bd);
}

.cp-resize-handle:hover .cp-resize-grip,
.cp-resize-handle.dragging .cp-resize-grip {
  background: var(--acc);
}

/* 牙位标记层浮层：左上角展示已选牙位(DOM 渲染，不参与画布变换) */
.cp-mark-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(20, 22, 26, .72);
  color: #dfe5ec;
  font-size: 12px;
  line-height: 1.4;
  backdrop-filter: blur(4px);
  pointer-events: none;
  /* 不挡画布手势 */
}

/* 未选择牙齿时的弱化态：长方形、无边框、更透明，仅作轻提示 */
.cp-mark-overlay.subtle {
  border-radius: 0;
  background: rgba(20, 22, 26, .42);
  backdrop-filter: none;
}

/* 牙位标记层：普通箭头光标；已点选待标记牙位后隐藏系统光标，
   改由画布绘制跟随鼠标的黄色半透明方框 */
.cp-canvas-wrap canvas.cp-mark-cursor {
  cursor: default;
}

.cp-canvas-wrap canvas.cp-mark-armed {
  cursor: none;
}

/* 画布底部工具条 */
.cp-toolbar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  /* 空隙不挡画布手势 */
}

.cp-toolbar>* {
  pointer-events: auto;
}

/* 按钮不压缩、文字不折行：画布变窄时先让缩放条收窄，再退成纯图标 */
.cp-tool-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(20, 22, 26, .72);
  color: #dfe5ec;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: 7px;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.cp-tool-btn svg {
  width: 14px;
  height: 14px;
  flex: none;
  display: block;
}

.cp-tool-btn:hover {
  background: rgba(40, 45, 52, .85);
}

.cp-tool-sep {
  flex: 1 1 0;
  min-width: 0;
}

/* 缩放拖拽条：与工具按钮同款深色胶囊，百分比浮在条正上方。
   工具条里唯一可压缩的元素——宽度不够时先收它，别去挤按钮文字 */
.cp-zoom-slider {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 1 132px;
  min-width: 56px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px;
  background: rgba(20, 22, 26, .72);
  backdrop-filter: blur(4px);
}

.cp-zoom-value {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 6px;
  background: rgba(20, 22, 26, .82);
  color: #dfe5ec;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.cp-zoom-slider input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .24);
  cursor: pointer;
}

.cp-zoom-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #dfe5ec;
  cursor: grab;
}

.cp-zoom-slider input[type=range]:active::-webkit-slider-thumb {
  cursor: grabbing;
}

.cp-zoom-slider input[type=range]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #dfe5ec;
  cursor: grab;
}

.cp-zoom-slider input[type=range]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .24);
}

/* 原图 | 校正后 分段切换 */
.cp-seg {
  display: inline-flex;
  flex: none;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.cp-seg button {
  border: 0;
  background: rgba(20, 22, 26, .72);
  color: #aab2bd;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 10px;
  cursor: pointer;
}

.cp-seg button.on {
  background: var(--acc);
  color: #fff;
}

/* 画布窄到装不下完整工具条时：按钮只留图标(说明退到 title 悬浮提示)，
   分段切换收紧内边距——一律保持单行，不折行、不换行堆叠 */
@container (max-width: 560px) {
  .cp-toolbar .cp-tool-txt {
    display: none;
  }

  .cp-toolbar .cp-tool-btn {
    padding: 6px 8px;
  }

  .cp-toolbar .cp-seg button {
    padding: 6px 8px;
  }
}

/* 画布内浮动提示（当前应点的角） */
.cp-canvas-hint {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 7px;
  background: rgba(20, 22, 26, .72);
  color: #dfe5ec;
  font-size: 12px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.cp-canvas-hint[hidden] {
  display: none;
}

/* ── 右侧操作区：Tab(图片校色 / 牙位标记，样式复用登录页 tab-pill) ── */
/* 拉满整行高度并纵向排布，与左侧画布列等高 */
.cp-side {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cp-tab-pill {
  gap: 22px;
  margin: 0 2px 10px;
}

.cp-tab-pill button {
  font-size: 13px;
  font-weight: 600;
  padding: 0 0 9px;
}

.stepper .step {
  border: 0;
  font-family: inherit;
}

.stepper .step.clickable {
  cursor: pointer;
}

.stepper .step.clickable:hover {
  filter: brightness(.97);
}

.stepper .step:not(.clickable) {
  cursor: default;
}

.cp-report-config {
  padding: 16px;
  border: 1px solid var(--bd);
  border-radius: 11px;
  background: var(--card, #fff);
}

/* 报告不再单列成 Tab，而是「牙位标记」的 ③ 报告节：节内已有留白与边框，
   这里去掉卡片外壳，免得卡中套卡。 */
.cp-acc-body>.cp-report-config {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* ③ 报告节里「报告还不完整」的待办条：强制展开时顶替报告配置显示 */
.cp-report-pending {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--gold);
  border-left-width: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}

.cp-report-pending-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-report-pending-head div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cp-report-pending-head strong {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.cp-report-pending-head small {
  font-size: 11px;
  line-height: 1.5;
  color: var(--sub);
}

.cp-report-pending-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.cp-report-config-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.cp-report-config-head div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cp-report-config-head small {
  color: var(--sub);
  font-size: 11.5px;
}

.cp-report-config-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--teal);
  background: var(--teal-soft);
  font-weight: 800;
}

.cp-report-config-list {
  margin: 0 0 16px;
  border-top: 1px solid var(--bd);
}

.cp-report-config-list div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bd);
  font-size: 12px;
}

.cp-report-config-list dt {
  color: var(--sub);
}

.cp-report-config-list dd {
  margin: 0;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}

.cp-report-config .cp-text-link {
  display: block;
  margin: 12px auto 0;
}

.cp-pdf-entry {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--bd);
  border-radius: 11px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.cp-pdf-entry:hover {
  border-color: var(--acc);
  background: var(--acc-soft);
  box-shadow: 0 6px 18px rgba(32, 68, 105, .1);
}

.cp-pdf-entry:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.cp-pdf-entry:disabled {
  cursor: wait;
  opacity: .68;
}

.cp-pdf-file-icon {
  width: 38px;
  height: 46px;
  display: block;
  color: #ef4b4d;
}

.cp-pdf-file-icon svg,
.cp-pdf-download svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cp-pdf-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cp-pdf-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-pdf-copy small {
  color: var(--sub);
  font-size: 11px;
}

.cp-pdf-download {
  width: 24px;
  height: 24px;
  color: var(--dim);
}

.cp-pdf-entry:hover .cp-pdf-download {
  color: var(--acc);
}

.cp-plan-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 8px;
  margin-top: 12px;
}

.cp-plan-cta {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-inline: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.cp-custom-plan-gate {
  position: relative;
  display: block;
}

.cp-custom-plan-tip {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: 250px;
  padding: 8px 10px;
  border-radius: 7px;
  background: #172536;
  color: #fff;
  box-shadow: 0 8px 24px rgba(16, 30, 46, .2);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}

.cp-custom-plan-tip::after {
  position: absolute;
  top: 100%;
  right: 34px;
  border: 6px solid transparent;
  border-top-color: #172536;
  content: "";
}

.cp-custom-plan-gate:hover .cp-custom-plan-tip,
.cp-custom-plan-gate:focus-within .cp-custom-plan-tip {
  opacity: 1;
  transform: translateY(0);
}

/* 点击打开弹窗后按钮仍可能保留 :focus；弹窗期间强制收起 hover/focus 提示。 */
.cp-custom-plan-gate.is-open .cp-custom-plan-tip,
.cp-custom-plan-gate.is-open:hover .cp-custom-plan-tip,
.cp-custom-plan-gate.is-open:focus-within .cp-custom-plan-tip {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: none;
}

.cp-custom-plan-status {
  margin-top: 9px;
  color: var(--teal);
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

.cp-plan-cta.disabled {
  pointer-events: none;
  opacity: .45;
}

.cp-provider-modal .create-card {
  width: min(720px, 100%);
}

.cp-provider-description {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.6;
}

/* 左右分栏：左列是选取方式，右列是对应内容 */
.cp-provider-body {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-bottom: 14px;
}

.cp-provider-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--card-2);
}

.cp-provider-cat {
  padding: 10px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sub);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.cp-provider-cat[hidden] {
  display: none;
}

.cp-provider-cat:hover {
  background: rgba(255, 255, 255, .78);
  color: var(--ink);
}

.cp-provider-cat.is-on {
  background: var(--acc);
  color: #fff;
  font-weight: 700;
}

.cp-provider-panes {
  min-height: 232px;
}

.cp-provider-pane[hidden] {
  display: none;
}

.cp-provider-pane-title {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
}

.cp-provider-pane-note {
  margin: 5px 0 10px;
  color: var(--sub);
  font-size: 11.5px;
  line-height: 1.55;
}

/* 简易列表：行与行之间只用发丝线分隔，不做卡片 */
.cp-provider-list {
  max-height: min(42vh, 268px);
  overflow: auto;
  border: 1px solid var(--bd);
  border-radius: 11px;
  background: rgba(255, 255, 255, .58);
}

.cp-provider-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.cp-provider-option + .cp-provider-option .cp-provider-option-body {
  border-top: 1px solid var(--bd);
}

.cp-provider-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cp-provider-option-body {
  display: grid;
  /* 名称与账号各占一份可压缩空间，两边都用省略号收尾，长名字不会顶穿右侧信息 */
  grid-template-columns: 16px minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  transition: background .16s ease;
}

.cp-provider-option:hover .cp-provider-option-body {
  background: rgba(255, 255, 255, .9);
}

.cp-provider-option input:checked + .cp-provider-option-body {
  background: var(--acc-soft);
}

.cp-provider-check {
  width: 16px;
  height: 16px;
  border: 1px solid var(--bd);
  border-radius: 50%;
  background: #fff;
}

.cp-provider-option input:checked + .cp-provider-option-body .cp-provider-check {
  border: 5px solid var(--acc);
}

.cp-provider-option input:focus-visible + .cp-provider-option-body {
  outline: 2px solid var(--acc);
  outline-offset: -2px;
}

.cp-provider-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-provider-tag {
  margin-left: 6px;
  color: var(--sub);
  font-size: 11px;
  font-weight: 400;
}

.cp-provider-meta {
  /* justify-self:end 会让它按内容宽度排版，不加 max-width 就会往左压到名字上 */
  justify-self: end;
  max-width: 100%;
  overflow: hidden;
  color: var(--dim);
  font-size: 11px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-provider-search {
  display: block;
  margin-bottom: 10px;
}

.cp-provider-search input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
}

.cp-provider-search input:focus {
  border-color: var(--acc);
  outline: none;
}

/* 账号/手机号查找：输入框 + 查找按钮同一行 */
.cp-provider-lookup {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}

/* label 改成 flex，让里面的 input 撑满行高，与右侧按钮齐平 */
.cp-provider-lookup .cp-provider-search {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.cp-provider-lookup-btn {
  flex: 0 0 auto;
  padding: 9px 20px;
  font-size: 12.5px;
  cursor: pointer;
}

/* 剩余次数：常态灰字，用完转成警示色 */
.cp-provider-quota {
  margin-bottom: 10px;
  color: var(--dim);
  font-size: 11.5px;
  line-height: 1.55;
}

.cp-provider-quota[hidden] {
  display: none;
}

.cp-provider-quota.is-out {
  color: var(--red);
}

/* 命中账号尚未开通服务商时的说明条 */
.cp-provider-grant-hint {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: var(--acc-soft);
  color: var(--sub);
  font-size: 11.5px;
  line-height: 1.6;
}

.cp-provider-grant-hint[hidden] {
  display: none;
}

.cp-provider-manual-note {
  margin-top: 10px;
  color: var(--dim);
  font-size: 11px;
  line-height: 1.6;
}

.cp-provider-modal .form-actions {
  align-items: center;
  justify-content: flex-end;
}

.cp-provider-picked {
  margin-right: auto;
  overflow: hidden;
  color: var(--sub);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-provider-picked strong {
  color: var(--ink);
}

.cp-provider-picked[hidden] {
  display: none;
}

/* 「下载报告手动发送」分类下要藏掉发送按钮：.btn 自带 display 会盖掉 [hidden] */
.cp-provider-modal .form-actions .btn[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .cp-provider-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp-provider-nav {
    flex-direction: row;
    overflow-x: auto;
  }

  .cp-provider-cat {
    flex: 0 0 auto;
  }
}

@media (max-width: 460px) {
  .cp-plan-actions {
    grid-template-columns: 1fr;
  }

  .cp-custom-plan-tip {
    right: 50%;
    max-width: min(250px, calc(100vw - 48px));
    transform: translate(50%, 4px);
  }

  .cp-custom-plan-gate:hover .cp-custom-plan-tip,
  .cp-custom-plan-gate:focus-within .cp-custom-plan-tip {
    transform: translate(50%, 0);
  }
}

/* FDI 牙位图(SVG)：每颗牙为一个 .cp-tooth 节点，预留交互选择 */
/* ── 牙位粗选引导条 ────────────────────────────────────────
   粗选是全流程里唯一「两处交互来回跑」的一步(右侧选编号 → 左侧点中心点)，
   普通 .cp-note 太轻、看不见，这里做成带步骤号与指向箭头的强提示条。 */
.cp-pick-guide {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--acc);
  border-left-width: 3px;
  border-radius: 9px;
  background: var(--acc-soft);
  color: var(--ink);
}

.cp-pick-guide-step {
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 21px;
  text-align: center;
}

.cp-pick-guide-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cp-pick-guide-copy strong {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}

.cp-pick-guide-copy small {
  font-size: 11px;
  line-height: 1.45;
  color: var(--sub);
}

.cp-pick-guide-arrow {
  flex: none;
  display: flex;
  color: var(--acc);
}

.cp-pick-guide-arrow svg {
  width: 18px;
  height: 18px;
}

/* ① 还没选编号：箭头朝下指向紧邻其下的牙位图 */
.cp-pick-guide[data-step="pick"] .cp-pick-guide-arrow {
  transform: rotate(90deg);
  animation: cp-guide-nudge-down 1.4s ease-in-out infinite;
}

/* ② 已选编号：整条转成待标记的红色(与牙位图上的 pending 同色)，
      箭头朝左指向大图，提示这一步要去图片上点 */
.cp-pick-guide[data-step="place"] {
  border-color: #c0392b;
  background: rgba(192, 57, 43, .1);
  animation: cp-guide-pulse 1.6s ease-in-out infinite;
}

.cp-pick-guide[data-step="place"] .cp-pick-guide-step {
  background: #c0392b;
}

.cp-pick-guide[data-step="place"] .cp-pick-guide-arrow {
  color: #c0392b;
  transform: rotate(180deg);
  animation: cp-guide-nudge-left 1.4s ease-in-out infinite;
}

/* 箭头沿自身朝向来回轻推：translateX 写在 rotate 之后，位移随箭头转向 */
@keyframes cp-guide-nudge-down {

  0%,
  100% {
    transform: rotate(90deg) translateX(0);
  }

  50% {
    transform: rotate(90deg) translateX(4px);
  }
}

@keyframes cp-guide-nudge-left {

  0%,
  100% {
    transform: rotate(180deg) translateX(0);
  }

  50% {
    transform: rotate(180deg) translateX(4px);
  }
}

@keyframes cp-guide-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(192, 57, 43, 0);
  }

  50% {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .18);
  }
}

@media (prefers-reduced-motion: reduce) {

  .cp-pick-guide,
  .cp-pick-guide .cp-pick-guide-arrow {
    animation: none;
  }
}

.cp-fdi {
  margin: 8px 0 10px;
}

.cp-fdi svg {
  display: block;
  width: 100%;
  height: auto;
}

.cp-fdi .cp-tooth circle {
  fill: rgba(255, 255, 255, .85);
  stroke: var(--bd);
  stroke-width: 1;
  transition: fill .12s ease, stroke .12s ease;
}

.cp-fdi .cp-tooth text {
  fill: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  font-family: inherit;
  pointer-events: none;
  user-select: none;
}

.cp-fdi .cp-tooth {
  cursor: pointer;
}

.cp-fdi .cp-tooth:hover circle {
  stroke: var(--acc);
  fill: var(--acc-soft);
}

/* 已完成标记(有中心点)的选中态 */
.cp-fdi .cp-tooth.selected circle {
  stroke: var(--acc);
  stroke-width: 1.5;
  fill: var(--acc);
}

.cp-fdi .cp-tooth.selected text {
  fill: #fff;
}

/* 当前待标记(已在右侧选中、等待图上点中心点) */
.cp-fdi .cp-tooth.pending circle {
  stroke: #c0392b;
  stroke-width: 2;
  fill: rgba(192, 57, 43, .12);
}

.cp-fdi .cp-tooth.pending text {
  fill: #c0392b;
}

/* 校色未完成时牙位图不可交互 */
.cp-fdi.is-disabled {
  opacity: .45;
  pointer-events: none;
}

/* ── 已标记牙位列表 ── */
.cp-mark-list-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--dim);
  margin: 2px 0 4px;
}

.cp-mark-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  border-top: 1px solid var(--bd);
  font-size: 12px;
}

.cp-mark-row:first-child {
  border-top: 0;
}

.cp-mark-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 20px;
  border-radius: 5px;
  background: #204469;
  color: #fff;
  font-weight: 600;
  flex: none;
}

.cp-mark-row.pending .cp-mark-no {
  background: #c0392b;
}

.cp-mark-name {
  flex: none;
  color: var(--ink);
}

.cp-mark-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cp-mark-todo {
  color: #c0392b;
  font-size: 11px;
}

.cp-mark-pos {
  color: var(--dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.cp-mark-del {
  border: 0;
  background: none;
  color: var(--dim);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
}

.cp-mark-del:hover {
  color: #c0392b;
  background: rgba(192, 57, 43, .1);
}

/* ── 底部牙位记录：每颗已选牙一条独立手风琴卡片 ── */
.color-pick-results > .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .06em;
}

.color-pick-results > .eyebrow::before {
  content: "";
  width: 4px;
  height: 18px;
  flex: none;
  border-radius: 2px;
  background: var(--acc);
}

.cp-records {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-records .cp-acc {
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}

/* 覆盖侧栏手风琴的相邻分隔线规则(记录卡片各自带边框) */
.cp-records .cp-acc+.cp-acc {
  border-top: 1px solid var(--bd);
}

.cp-records .cp-acc-head {
  padding: 9px 12px;
  font-size: 13.5px;
}

.cp-records .cp-acc-body {
  padding-left: 12px;
  padding-right: 12px;
}

.cp-records .cp-acc.open .cp-acc-body {
  padding: 10px 12px 12px;
}

.cp-record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px 20px;
  font-size: 12.5px;
}

.cp-record-grid .k {
  color: var(--dim);
  margin-right: 8px;
}

.cp-fdi .cp-fdi-label {
  fill: var(--dim);
  font-size: 9.5px;
  font-family: inherit;
}

.cp-fdi .cp-fdi-line {
  stroke: var(--bd);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

/* ── 手风琴（三节：色卡型号 / 色卡定位 / 色卡校准结果）────────
   表头一行紧凑；内容区 padding 尽量小；节间仅 1px 分隔线 */
.cp-steps {
  border: 1px solid var(--bd);
  border-radius: 11px;
  background: var(--card);
  overflow: hidden;
}

.cp-acc+.cp-acc {
  border-top: 1px solid var(--hair);
}

.cp-acc-head {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
}

.cp-acc-head:hover {
  background: var(--card-2);
}

.cp-acc.locked .cp-acc-head {
  color: var(--dim);
  cursor: not-allowed;
}

/* 「还没做完」的节：置灰提示这一步的结果还不完整，但仍可点开查看
   (与 .locked 的区别就在这——locked 是压根点不开) */
.cp-acc.pending .cp-acc-head {
  color: var(--dim);
}

.cp-acc-caret {
  flex: none;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: .55;
  transition: transform .15s ease;
}

.cp-acc.open .cp-acc-caret {
  transform: rotate(90deg);
}

.cp-acc-title {
  font-weight: 600;
  white-space: nowrap;
}

.cp-acc-summary {
  margin-left: auto;
  font-size: 12px;
  color: var(--sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-acc-summary.ok {
  color: var(--green);
}

.cp-acc-summary.warn {
  color: var(--red);
}

/* 手风琴展开/收起动画：max-height + opacity + padding 过渡 */
.cp-acc-body {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 10px;
  border-top: 1px solid transparent;
  font-size: 12.5px;
  transition: max-height .3s ease, opacity .22s ease,
    padding-top .3s ease, padding-bottom .3s ease, border-color .3s ease;
}

.cp-acc.open .cp-acc-body {
  overflow: visible;
  max-height: 2400px;
  opacity: 1;
  padding: 8px 10px 10px;
  border-top-color: var(--hair);
}

/* 节内元素间距压缩 */
.cp-acc-body>*+* {
  margin-top: 8px;
}

.cp-field-label {
  font-size: 11px;
  color: var(--sub);
  margin-bottom: 4px;
}

.cp-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
}

.cp-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sub);
  cursor: pointer;
}

/* 角点颜色引导 */
.cp-guide {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-guide-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.35;
}

.cp-guide-row.done {
  opacity: .5;
}

.cp-guide-row.active {
  background: var(--acc-soft);
}

.cp-guide-swatch {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 2px solid transparent;
}

.cp-guide-row.active .cp-guide-swatch {
  box-shadow: 0 0 0 2px var(--acc);
}

.cp-guide-state {
  margin-left: auto;
  font-size: 11px;
  white-space: nowrap;
}

.cp-guide-row.done .cp-guide-state {
  color: var(--green);
}

.cp-guide-row.active .cp-guide-state {
  color: var(--acc);
  font-weight: 600;
}

/* 小按钮排 */
.cp-btn-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cp-btn-row .btn {
  padding: 5px 10px;
  font-size: 12px;
}

.btn.cp-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* 本页所有可用操作按钮统一使用可点击的小手光标。 */
.color-pick-page .btn:not([disabled]):not(.disabled) {
  cursor: pointer;
}

.btn[disabled],
.btn.disabled {
  opacity: .45;
  pointer-events: none;
}

/* 方向行 */
.cp-orient-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sub);
}

.cp-orient-row strong {
  color: var(--ink);
}

.cp-link-btn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--acc);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

/* 纯文本链接按钮(重新选择/重新校准等次要动作) */
.cp-text-link {
  display: block;
  margin: 2px auto 0;
  border: 0;
  background: none;
  padding: 2px 4px;
  color: var(--sub);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cp-text-link:hover {
  color: var(--acc);
}

/* 校准完成后的主操作区：主按钮居中(正常尺寸)，次要动作为链接置于其下 */
.cp-actions-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 2px;
}

.cp-actions-center .btn {
  min-width: 170px;
  text-align: center;
  justify-content: center;
}

/* 结果卡 */
.cp-result {
  border: 1px solid var(--bd);
  border-radius: 9px;
  padding: 8px 10px;
  background: var(--card-2);
}

.cp-result .metric-line {
  padding: 3px 0;
  font-size: 12px;
}

/* 校准 warning：橙色(提醒但非失败)；只有真正的错误才用红色 */
.cp-result-warnings {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 11.5px;
  color: #c47a1d;
  line-height: 1.5;
}

/* 比色片校准推荐卡：左侧色条按级别区分(先排查 / 强烈建议 / 建议 / 可选)。
   色值与 .cp-result-warnings 同一套口径，两种主题下均直接写死。 */
.cp-rec {
  margin-top: 8px;
  padding: 7px 9px 7px 11px;
  border-radius: 8px;
  border-left: 3px solid var(--sub);
  background: var(--card-2);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--sub);
  text-align: left;
}

/* .cp-actions-center 是 align-items:center 的 flex 列，卡片需显式撑满宽度 */
.cp-actions-center .cp-rec {
  align-self: stretch;
}

.cp-rec .cp-rec-title {
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

.cp-rec ul {
  margin: 3px 0 0;
  padding-left: 15px;
}

.cp-rec li {
  margin-top: 2px;
}

.cp-rec.is-fix-first {
  border-left-color: #c47a1d;
}

.cp-rec.is-fix-first .cp-rec-title {
  color: #c47a1d;
}

.cp-rec.is-required {
  border-left-color: var(--red);
}

.cp-rec.is-required .cp-rec-title {
  color: var(--red);
}

.cp-rec.is-recommended {
  border-left-color: var(--teal);
}

.cp-rec.is-recommended .cp-rec-title {
  color: var(--teal);
}

.cp-rec.is-optional {
  border-left-color: var(--green);
}

.cp-rec.is-optional .cp-rec-title {
  color: var(--green);
}

.cp-note {
  font-size: 11.5px;
  color: var(--sub);
  line-height: 1.55;
}

.cp-note.error {
  color: var(--red);
}

.cp-note.success {
  color: var(--green);
}

/* 校准中 spinner 行 */
.cp-running {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sub);
}

.cp-running .case-loading-spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
  flex: none;
}

/* 校准进行中的大号 Loading 块(③节内) */
.cp-running.cp-big {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 20px 0 12px;
  font-size: 13px;
  color: var(--ink);
}

.cp-running.cp-big .case-loading-spinner {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.cp-running.cp-big small {
  color: var(--dim);
  font-size: 11px;
  line-height: 1.5;
}

/* ── 牙形细描：中间列(九宫格预览 + 分区表) ─────────────────── */
.cp-nine-col {
  align-self: start;
  min-width: 0;
}

.cp-nine-canvas-wrap {
  position: relative;
  height: 300px;
  border: 1px solid var(--bd);
  border-radius: 11px;
  background: #23262b;
  overflow: hidden;
}

.cp-nine-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.cp-nine-canvas-wrap canvas.dragging {
  cursor: grabbing;
}

.cp-nine-toolbar {
  left: 8px;
  right: 8px;
  bottom: 8px;
}

/* 左上角标题：与左侧大图左上角浮层(.cp-canvas-hint / .cp-mark-overlay)同款——
   半透明深色底、白字、毛玻璃 */
.cp-nine-corner-title {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(20, 22, 26, .72);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* 底部「九宫格 | 亮度等值线」切换：复用 .cp-seg 深色分段样式 */
.cp-nine-mode-seg {
  flex: none;
}

/* 九宫格分区表(表格版)：首列竖排区名 + 3×3 数据单元 */
.cp-nine-table {
  margin-top: 6px;
}

.cp-nine-table[hidden] {
  display: none;
}

.cp-nine-table-el {
  width: 100%;
  /* 合并所有边线：相邻单元共享同一条边，形成统一网格 */
  border-collapse: collapse;
  table-layout: fixed;
}

/* 竖排区名(切端/体部/颈部)：两字上下叠排，节省横向空间 */
.cp-nine-rowlabel {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  padding: 0 1px;
  width: 17px;
  text-align: center;
  vertical-align: middle;
}

.cp-nine-cell {
  position: relative;
  border: 1px solid var(--bd);
  background: var(--card);
  padding: 5px 4px;
  text-align: center;
  vertical-align: middle;
  height: 52px;
  font-size: 10.5px;
  color: var(--sub);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

/* 分区表内不留圆角(单元格与色块均为直角) */
.cp-nine-table .cp-nine-swatch {
  border-radius: 0;
}

/* border-collapse 下相邻单元共享同一条边，hover 只改 border-color 会因
   边线归属只出现部分线条；改用 outline 覆盖在合并边线之上，四边完整显示 */
.cp-nine-cell:hover {
  border-color: var(--acc);
  background: var(--acc-soft);
  outline: 1px solid var(--acc);
  outline-offset: -1px;
  z-index: 1;
}

.cp-nine-cell-pos {
  display: block;
  margin: 1px 0;
}

.cp-nine-cell.empty {
  color: var(--dim);
  opacity: .6;
  cursor: default;
}

.cp-nine-cell.empty:hover {
  border-color: var(--bd);
  background: var(--card);
  outline: none;
  z-index: auto;
}

.cp-nine-cell-shade {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--acc);
}

.cp-nine-swatch {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .12);
}

.cp-nine-cell .lab {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  color: var(--dim);
  white-space: nowrap;
}

.cp-nine-status {
  grid-column: 1 / -1;
  padding: 14px 8px;
  text-align: center;
  font-size: 11.5px;
  color: var(--dim);
}

.cp-nine-status.error {
  color: var(--red);
}

/* ── 色彩范围分析：基础色值 + ΔE00 容差调整区(替代分区测算表) ──── */
.cp-contour-panel {
  margin-top: 6px;
}

.cp-contour-panel[hidden] {
  display: none;
}

.cp-contour-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--dim);
  margin-bottom: 6px;
}

/* 恢复默认：置于面板标题行右侧的小按钮 */
.cp-contour-reset {
  flex: none;
  border: 1px solid var(--bd);
  background: var(--card);
  color: var(--sub);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.cp-contour-reset:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.cp-contour-note {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--dim);
  line-height: 1.5;
}

/* ── 色彩范围分析：基础色值 + ΔE00 容差滑块行 ─────────────── */
.cp-range-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-top: 1px solid var(--hair);
  cursor: pointer;
}

.cp-range-row:first-of-type {
  border-top: 0;
}

/* 选中(仅该项范围在预览中展示)：醒目淡黄色高亮 */
.cp-range-row.active {
  background: #fff3b0;
}

/* 该基础色值对应的围线颜色指示(短彩色条) */
.cp-range-line {
  flex: none;
  width: 14px;
  height: 4px;
  border-radius: 2px;
}

.cp-range-name {
  flex: none;
  min-width: 34px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.cp-range-slider {
  flex: 1;
  min-width: 40px;
  accent-color: var(--acc);
  cursor: pointer;
}

.cp-range-num {
  flex: none;
  width: 52px;
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 4px 6px;
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--card);
}

.cp-range-num:focus {
  outline: none;
  border-color: var(--acc);
}

.cp-range-unit {
  flex: none;
  font-size: 10.5px;
  color: var(--dim);
}

/* 底部记录：4 色彩范围图网格 */
.cp-record-range-maps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.cp-record-range-maps .cp-record-thumb-box figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.cp-record-range-maps .cp-range-line {
  width: 12px;
}

/* ── 牙形细描：右侧手风琴内的牙齿 Tab + 比色结果 ───────────── */
.cp-shape-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cp-shape-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  border: 1px solid var(--bd);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  /* 在原高度基础上加高约 50%(6px→10px 上下内边距) */
  padding: 10px 11px;
  border-radius: 7px;
  cursor: pointer;
}

.cp-tooth-tab-content {
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: var(--card);
  overflow: visible;
}

/* 牙形细描的预期色下拉需要越过卡片和手风琴底部显示完整选项。 */
.cp-steps:has(.cp-shade-picker) {
  overflow: visible;
}

.cp-tooth-content-section {
  padding: 9px 10px 10px;
}

.cp-tooth-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.cp-tooth-content-section+.cp-tooth-content-section {
  border-top: 1px solid var(--hair);
}

.cp-tooth-section-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--acc);
}

.cp-tooth-summary .cp-tooth-section-title {
  flex: none;
  margin: 0;
}

.cp-tooth-summary-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--sub);
  font-size: 12px;
}

.cp-tooth-summary-line strong {
  color: var(--ink);
  font-size: 12px;
}

.cp-tooth-target-content .cp-shade-field {
  max-width: none;
}

.cp-shape-tab-no {
  font-size: 13px;
}

/* 测色色号(如 -A2)：随编号一行展示，弱调色以区分 */
.cp-shape-tab-shade {
  font-size: 12px;
  font-weight: 700;
  color: var(--acc);
}

.cp-shape-tab.active .cp-shape-tab-shade {
  color: #fff;
}

.cp-shape-tab:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.cp-shape-tab.active {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}

/* 已完成细描的牙：Tab 上带一枚绿勾，还剩哪几颗要描一眼看得出 */
.cp-shape-tab-done {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
}

.cp-shape-tab.is-done:not(.active) {
  border-color: var(--green);
  background: var(--green-soft);
}

.cp-shape-tab.active .cp-shape-tab-done {
  color: #fff;
}

/* 流程按钮：整条测色流程的「下一步」——完成细描 → 下一颗牙 → 加入报告
   (并处理下一图片)。文案由 color-pick.js shapeFlowAction() 给出，可能带
   文件名，所以留出换行余地而不是撑破按钮。 */
.cp-shape-done {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-shape-done .btn {
  white-space: normal;
  line-height: 1.4;
  text-align: center;
}

.cp-shape-done .btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* 本图已并入报告：流程按钮位换成这条状态，没有可点的下一步 */
.cp-done-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--green);
  border-radius: 9px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.cp-done-status[hidden] {
  display: none;
}

.cp-done-status-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--green);
  color: var(--card, #fff);
  font-size: 11px;
}

/* hover 大图上的某颗牙时，底部对应 Tab 高亮闪烁提示可点击切换 */
.cp-shape-tab.hot:not(.active) {
  border-color: var(--acc);
  color: var(--acc);
  background: var(--acc-soft);
  animation: cp-tab-blink .9s ease-in-out infinite;
}

@keyframes cp-tab-blink {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(88, 166, 255, 0);
  }

  50% {
    box-shadow: 0 0 0 3px rgba(88, 166, 255, .28);
  }
}

.cp-shape-result {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.cp-shape-result[hidden] {
  display: none;
}

.cp-shape-best {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 6px;
}

.cp-shape-best-swatch {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .12);
}

.cp-shape-best-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.cp-shape-best-sub {
  font-size: 11px;
  color: var(--dim);
}

.cp-shade-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}

.cp-shade-value-card {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: var(--card);
}

.cp-shade-value-label {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
}

.cp-shade-value-main {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cp-shade-value-empty {
  display: flex;
  align-items: center;
  min-height: 34px;
  font-size: 12px;
  color: var(--dim);
}

.cp-shade-compare-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acc);
  font-size: 24px;
  font-weight: 700;
}

@media (max-width: 720px) {
  .cp-shade-comparison {
    grid-template-columns: 1fr;
  }

  .cp-shade-compare-arrow {
    min-height: 20px;
    transform: rotate(90deg);
  }
}

.cp-shape-cand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2.5px 0;
  font-size: 11.5px;
  color: var(--sub);
}

.cp-shape-cand .cp-nine-swatch {
  width: 12px;
  height: 12px;
}

.cp-shape-cand strong {
  color: var(--ink);
  min-width: 34px;
}

.cp-shape-cand .de {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--dim);
}

.cp-shape-lab-line {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── 牙形细描：色彩描述体系(比色体系 + 目标色) ─────────────── */
.cp-shade-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.cp-shade-panel-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--dim);
  margin-bottom: 7px;
}

.cp-shade-fields {
  display: flex;
  gap: 8px;
}

.cp-shade-field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-shade-field>span {
  font-size: 11px;
  color: var(--sub);
}

.cp-shade-picker {
  position: relative;
  display: block;
  min-width: 0;
}

.cp-shade-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cp-shade-trigger,
.cp-shade-option {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(36px, auto) 1fr 24px;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.cp-shade-trigger {
  min-height: 40px;
  padding: 7px 34px 7px 10px;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  position: relative;
}

.cp-shade-trigger:hover,
.cp-shade-trigger:focus-visible,
.cp-shade-picker.open .cp-shade-trigger {
  border-color: var(--acc);
  outline: none;
  box-shadow: 0 0 0 2px var(--acc-soft);
}

.cp-shade-choice {
  display: contents;
}

.cp-shade-name {
  font-size: 13px;
  font-weight: 700;
}

.cp-shade-lab {
  color: var(--dim);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

.cp-shade-caret {
  position: absolute;
  right: 12px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.cp-shade-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 42, 65, .16);
}

.cp-shade-picker.open-up .cp-shade-menu {
  top: auto;
  bottom: calc(100% + 5px);
}

.cp-shade-option {
  border: 0;
  border-radius: 6px;
  padding: 7px 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.cp-shade-option:hover:not(.selected) {
  background: #f3f6f8;
}

.cp-shade-option.selected {
  background: var(--acc-soft);
  color: var(--acc);
  box-shadow: inset 3px 0 0 var(--acc);
}

.cp-shade-option.selected .cp-shade-lab {
  color: var(--acc);
  opacity: .78;
}

.cp-shade-option.selected:hover {
  background: color-mix(in srgb, var(--acc-soft) 72%, var(--acc) 28%);
}

.cp-shade-swatch {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid var(--bd);
  background:
    linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%) 0 0/8px 8px,
    linear-gradient(45deg, #ddd 25%, #fff 25%, #fff 75%, #ddd 75%) 4px 4px/8px 8px;
}

.cp-shade-option.none,
.cp-shade-trigger.none {
  grid-template-columns: 1fr;
}

.cp-shade-target-info {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.5;
}

.cp-shade-target-info[hidden] {
  display: none;
}

.cp-shade-target-lab {
  color: var(--dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.cp-shade-de {
  margin-top: 3px;
  font-weight: 600;
}

.cp-shade-de.good {
  color: var(--green);
}

.cp-shade-de.warn {
  color: #c47a1d;
}

.cp-shade-de.bad {
  color: var(--red);
}

/* 九宫格预览 → 分区表 的过渡示意：向下的实心箭头图标 + 右侧文案，一横排、上下靠近 */
.cp-nine-flow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 4px 0 3px;
}

.cp-nine-flow-arrow {
  width: 20px;
  height: 20px;
  flex: none;
  color: #5c7791;
}

.cp-nine-flow-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--dim);
  letter-spacing: .3px;
}

/* ── 比色片锚定校准(④型号 / ⑤定位 / ⑥结果) ─────────────────── */
.cp-stab-picker {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cp-stab-picker .cp-select {
  flex: 1;
  min-width: 0;
}

.cp-stab-picker .btn {
  flex: none;
  padding: 6px 12px;
  font-size: 12px;
}

.cp-stab-picker .btn.armed {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}

/* 已定位比色片列表 */
.cp-stab-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  border-top: 1px solid var(--bd);
  font-size: 12px;
}

.cp-stab-row:first-child {
  border-top: 0;
}

.cp-stab-row.armed {
  color: var(--acc);
  font-weight: 600;
}

.cp-stab-swatch {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--bd);
}

.cp-stab-shade {
  flex: none;
  min-width: 34px;
  font-weight: 700;
  color: var(--ink);
}

.cp-stab-coord {
  margin-left: auto;
  color: var(--dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.cp-stab-coord.todo {
  color: #c0392b;
}

.cp-stab-del {
  border: 0;
  background: none;
  color: var(--dim);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
  flex: none;
}

.cp-stab-del:hover {
  color: #c0392b;
  background: rgba(192, 57, 43, .1);
}

/* ⑥结果：各比色片残差明细 */
.cp-stab-tabs-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
}

.cp-stab-detail-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--sub);
}

.cp-stab-detail-row .cp-stab-shade {
  min-width: 30px;
  font-size: 11.5px;
}

.cp-stab-detail-row .de {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
}

.cp-stab-detail-row .de.good {
  color: var(--green);
}

.cp-stab-detail-row .de.warn {
  color: #c47a1d;
}

.cp-stab-detail-row .de.bad {
  color: var(--red);
}

/* 合并节内的分隔线(色卡型号↔四角定位 / 比色片型号↔定位) */
.cp-sub-divider {
  height: 1px;
  background: var(--hair);
  margin: 6px 0 2px;
}

.cp-locate-body {
  margin-top: 8px;
}

/* 折叠区内由 gap 统一间距，别再叠一层 margin */
.cp-locate-alt-body>.cp-locate-body {
  margin-top: 0;
}

.cp-locate-body>*+* {
  margin-top: 8px;
}

/* ── 牙形细描：hover 大图的实时 Lab / 比色分析浮层 ─────────────── */
.cp-hover-lab {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 固定宽度 + 等宽字体：内容变化时不改变盒宽，避免浮层位置晃动 */
  width: 190px;
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(20, 22, 26, .82);
  color: #eef2f7;
  line-height: 1.3;
  pointer-events: none;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.cp-hover-lab-swatch {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .32);
}

.cp-hover-lab-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.cp-hover-lab-shade {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-hover-lab-val {
  font-size: 10px;
  color: #aeb8c4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 底部牙位记录：先详情，再 1+4 图片预览 ───────────────────── */
.cp-record-analysis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
  /* 两列等高：左侧九宫格图与右侧 4 图区高度完全一致 */
  align-items: stretch;
}

/* 左侧九宫格图：撑满整列高度，画布按比例居中(object-fit)不拉伸 */
.cp-record-grid-thumb {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cp-record-grid-thumb .cp-record-thumb {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  object-fit: contain;
}

.cp-record-range-col {
  min-width: 0;
}

.cp-record-range-col .cp-record-range-maps {
  margin-top: 0;
}

.cp-record-range-empty {
  /* 预留与「已生成 2×2 范围图」相近的高度，未生成↔已生成切换时不跳动 */
  aspect-ratio: 4 / 3.4;
  min-height: 0;
  border: 1px dashed var(--bd);
  border-radius: 9px;
  background: var(--card-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  text-align: center;
}

.cp-record-range-generate {
  min-width: 150px;
  justify-content: center;
}

.cp-record-range-generate.loading {
  pointer-events: none;
  opacity: .86;
}

.cp-record-range-generate.loading::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-right: 7px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: cp-report-spin .75s linear infinite;
}

.cp-record-range-note {
  font-size: 11px;
  line-height: 1.45;
  color: var(--sub);
}

.cp-record-thumb-box {
  margin: 0;
  border: 1px solid var(--bd);
  border-radius: 9px;
  overflow: hidden;
  background: #23262b;
}

.cp-record-thumb {
  display: block;
  width: 100%;
  height: auto;
  background: #23262b;
}

.cp-record-thumb-box figcaption {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  /* 纯色标签条：与图片深色底一体，替换原先的灰色卡片底 */
  color: #e7e9ee;
  background: #23262b;
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
}

/* ── 牙位备注：每颗牙可编辑的文字描述 ─────────────────────────── */
.cp-record-note-field {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}

.cp-record-note-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  margin-bottom: 5px;
}

.cp-record-note-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  resize: vertical;
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--card);
}

.cp-record-note-input:focus {
  outline: none;
  border-color: var(--acc);
}

.cp-record-note-input::placeholder {
  color: var(--sub);
}

/* ── 底部牙位记录：细描后的详细比色信息 ─────────────────────── */
.cp-record-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}

.cp-record-subtitle {
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  margin: 9px 0 4px;
}

.cp-record-detail .cp-shape-cand {
  padding: 2.5px 0;
}

.cp-region-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  font-size: 12px;
}

.cp-region-name {
  min-width: 30px;
  font-weight: 600;
  color: var(--ink);
}

.cp-region-shade {
  min-width: 34px;
  color: var(--acc);
}

.cp-region-lab {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--dim);
}

/* 流程按钮执行中(生成报告)：转圈 + 屏蔽点击 */
.cp-shape-done .btn.loading {
  position: relative;
  pointer-events: none;
  opacity: .86;
}

.cp-shape-done .btn.loading::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: cp-report-spin .75s linear infinite;
}

@keyframes cp-report-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .cp-record-analysis {
    grid-template-columns: 1fr;
  }
}

/* ── 治疗方案 Tab ─────────────────────────────────────────────────────
   方案规划页【发送给牙医】之后出现：制订者 / 材料 / 厚度 / 色差对照。
   同时 body.cp-plan-sent 把牙位标记、牙形细描整块转为只读观感。 */
.cp-plan-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cp-plan-empty {
  padding: 22px 16px;
  border: 1px dashed var(--bd);
  border-radius: 11px;
  color: var(--dim);
  font-size: 12.5px;
  text-align: center;
}

.cp-plan-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-plan-head div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cp-plan-head small {
  color: var(--sub);
  font-size: 11.5px;
}

.cp-plan-badge {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.cp-plan-meta {
  margin: 0;
  border-top: 1px solid var(--bd);
}

.cp-plan-meta div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bd);
  font-size: 12px;
}

.cp-plan-meta dt { color: var(--sub); }

.cp-plan-meta dd {
  margin: 0;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}

.cp-plan-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cp-plan-item {
  padding: 14px;
  border: 1px solid var(--bd);
  border-radius: 11px;
  background: var(--card, #fff);
}

.cp-plan-item-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}

.cp-plan-item-head div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cp-plan-item-head strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.cp-plan-item-head small {
  color: var(--sub);
  font-size: 11px;
}

.cp-plan-tooth {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 700;
  font-size: 13px;
}

.cp-plan-rows {
  border-top: 1px solid var(--bd);
}

.cp-plan-rows div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bd);
  font-size: 11.5px;
}

.cp-plan-rows dt { color: var(--sub); }

.cp-plan-rows dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

.cp-plan-sws {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.cp-plan-sw {
  flex: 1;
  text-align: center;
}

.cp-plan-sw i {
  display: block;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .12);
  margin-bottom: 5px;
}

.cp-plan-sw small {
  color: var(--dim);
  font-size: 10.5px;
}

.cp-plan-advice {
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--bd);
  color: var(--sub);
  font-size: 11.5px;
  line-height: 1.6;
}

/* 方案已发送：牙位标记 / 牙形细描只读。按钮置灰 + 交互屏蔽，
   但内容照常展示(还要能看)，画布也保留缩放平移。
   「生成报告」不在此列：它常驻右下角，锁定原因由 reportGateReason()
   写进 hover 气泡，屏蔽掉 pointer-events 反而看不到原因。 */
body.cp-plan-sent [data-cp-tab-panel="mark"] .cp-fdi,
body.cp-plan-sent [data-cp-tab-panel="mark"] .cp-mark-list,
body.cp-plan-sent [data-cp-tab-panel="mark"] .cp-shade-panel,
body.cp-plan-sent [data-cp-tab-panel="mark"] .cp-tooth-target-content {
  opacity: .55;
  pointer-events: none;
  filter: grayscale(.35);
}

/* 牙齿切换 Tab(.cp-shape-tab)属查看导航，锁定后仍可点 */
body.cp-plan-sent [data-cp-tab-panel="mark"] .cp-acc-body button:not(.cp-acc-head):not(.cp-shape-tab),
body.cp-plan-sent [data-cp-tab-panel="report"] [data-cp-report-regenerate] {
  opacity: .5;
  pointer-events: none;
}

/* 只读提示条：挂在牙位标记面板顶部 */
body.cp-plan-sent [data-cp-tab-panel="mark"] .cp-steps::before {
  content: "🔒 治疗方案已发送给牙医，本档案的牙位标记与牙形细描已锁定，仅供查看。";
  display: block;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--teal);
  border-radius: 10px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 11.5px;
  line-height: 1.55;
}

/* ── 档案文件页签 ──────────────────────────────────────────
   列出该客户档案下的全部文件：文档在前、RAW 图片在后。停在头部右上角，
   与左侧的客户 chip / 档案信息同一行。
   配色是反的：未选中是白色卡片，选中的那枚**与页面底色融为一体**——
   选中项「陷进」背景里，未选中项浮在上面，不靠描边也能一眼看出当前是哪个。 */
/* 宽度分配：页签区拿走头部的全部剩余空间(basis 0，宽度只由布局决定、
   与页签内容无关，JS 才能拿它当"可用宽度"来量)；左侧信息区改为按内容
   取宽、必要时先于页签被压缩。 */
.cp-imgbar {
  flex: 1 1 0;
  min-width: 260px;      /* 再挤也要容得下「当前页签 + 全部文件入口」 */
  margin-left: auto;     /* 推到头部最右 */
  align-self: flex-end;  /* 只有页签贴到头部底边(chip / 信息仍居中) */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.cp-imgbar[hidden] {
  display: none;
}

.cp-imgbar-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;   /* 页签靠右排，末位紧邻「全部文件」入口 */
  gap: 6px;
  /* 装不下的页签由 JS 收进右侧的「全部文件」入口，这里只兜底裁切，不再横向滚动 */
  overflow: hidden;
  /* 底部留 1px：选中项靠负外边距压进这段内边距去盖基线。留在**内边距**里
     而不是溢出到容器外，才不会被 overflow 的裁剪切掉。 */
  padding: 3px 2px 1px;
}

.cp-imgbar-list > .cp-imgchip[hidden] {
  display: none;
}

.cp-imgchip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  max-width: 200px;   /* 第二行多了上传日期，给足宽度 */
  /* 底部多留 1px 抵消下面的负外边距，内容不会因压线而偏移 */
  padding: 5px 11px 6px 5px;
  border: 1px solid transparent;
  border-radius: 10px 10px 0 0;
  /* 未选中：白色卡片，坐在基线**之上**，不遮挡这条线 */
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  color: var(--sub);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.cp-imgchip:not(.is-active):hover {
  background: var(--acc-soft);
  color: var(--ink);
}

/* 选中：底色透明(透出页面背景) + 上/左/右三边描边，下边框透明并压住基线，
   把那条线咬开一个口子——经典页签的形状，朝下方工作区「打开」。 */
.cp-imgchip.is-active {
  background: transparent;
  border-color: var(--acc);
  /* 底边取页面底色：这 1px 正好落在基线那一行，把身下那段蓝线抹掉，
     形成敞口。颜色与页面背景完全相同(#f7f8f6)，看不出是一条边。
     注意不能改用 box-shadow —— 偏移 1px 后会落到基线**下面**一行，
     线会原样透出来。 */
  border-bottom-color: var(--app);
  margin-bottom: -1px;
  z-index: 1;
  color: var(--ink);
}

.cp-imgchip.is-active .cp-imgchip-name {
  color: var(--acc);
}

.cp-imgchip-thumb {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bd);
  flex: 0 0 auto;
}

.cp-imgchip-thumb.is-empty {
  display: block;
}

/* 文档页签的类型图标：透明底，只留描边与角标 */
.cp-imgchip-thumb.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: transparent;
}

.cp-imgchip-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.cp-imgchip-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 第二行：上传日期 + 进展。日期整段留住(它短且固定)，进展太长时才省略号 */
.cp-imgchip-meta {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  font-size: 10.5px;
  color: var(--dim);
}

.cp-imgchip-date {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 两段都在时才画分隔点。节点始终留在 DOM 里(复用不重建)，空的那段用
   [hidden] 收起来，分隔点跟着一起不画 */
.cp-imgchip-date + .cp-imgchip-step::before {
  content: "·";
  margin-right: 5px;
  color: var(--bd);
}

.cp-imgchip-date[hidden] + .cp-imgchip-step::before {
  content: none;
}

.cp-imgchip-step {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-imgchip.is-done .cp-imgchip-step {
  color: var(--ok, #2e8b57);
}

/* ── 第二档：缩略图页签 ────────────────────────────────────
   完整页签排不下时，未选中的页签只留缩略图(RAW 的预览图 / 文档的类型
   图标本身就足够辨认)，当前页签保持完整文字。名称与进展移到 title 气泡，
   进展另用缩略图右下角的状态点表示。 */
.cp-imgbar.is-crowded .cp-imgchip:not(.is-active) {
  padding: 5px;
  gap: 0;
}

.cp-imgbar.is-crowded .cp-imgchip:not(.is-active) .cp-imgchip-body {
  display: none;
}

.cp-imgbar.is-crowded .cp-imgchip.is-active {
  max-width: 200px;   /* 唯一带文字的页签，给足展示宽度 */
}

.cp-imgchip-dot {
  display: none;
  position: absolute;
  right: 2px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #fff;
}

/* 只标「有进展可言」的测色图片：文档与不参与测色的图片没有状态，不画点 */
.cp-imgbar.is-crowded .cp-imgchip:not(.is-active) .cp-imgchip-dot[data-state="done"],
.cp-imgbar.is-crowded .cp-imgchip:not(.is-active) .cp-imgchip-dot[data-state="todo"] {
  display: block;
}

.cp-imgchip-dot[data-state="done"] {
  background: var(--green);
}

.cp-imgchip-dot[data-state="todo"] {
  background: var(--gold);
}

/* ── 右侧常驻的「全部文件」入口 ────────────────────────────
   页签条只展示排得下的那几个文件，全量列表(搜索 + 按用途分组)始终从这枚
   入口进——三档降级里它都在，不随溢出与否显隐。
   兼任第三档的溢出抽屉：页签条收了文件时角标由总数改写成 +N(.is-overflow)。 */
.cp-filemenu {
  flex: 0 0 auto;
  align-self: flex-end;
  padding: 3px 0 1px;
}

.cp-filemenu[hidden] {
  display: none;
}

.cp-imgchip-more {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 10px;
  border-style: dashed;
  border-color: var(--bd);
  border-radius: 10px 10px 0 0;
  background: #ffffff;
  color: var(--sub);
  cursor: pointer;
}

/* .patient-menu 给 summary 预置的「切换」图标在页签里用不上。
   选择器要压过 .patient-menu summary::before 的 (0,1,2)，故带上 .cp-imgbar */
.cp-imgbar .cp-imgchip-more::before {
  display: none;
}

.cp-imgchip-more::-webkit-details-marker {
  display: none;
}

.cp-imgchip-more:hover,
.cp-filemenu[open] .cp-imgchip-more {
  border-color: var(--acc);
  background: var(--acc-soft);
  color: var(--acc);
}

/* 入口图标：四格缩略图的意思，与「查看全部文件」对应 */
.cp-imgchip-more-icon {
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E");
}

.cp-imgchip-more-label {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* 页签条一挤，入口先让出文案，只留图标 + 角标 */
.cp-imgbar.is-crowded .cp-imgchip-more-label {
  display: none;
}

/* 第二档把未选中页签压成了纯缩略图(padding 5px、gap 0)，这枚入口不是页签，
   不跟着压：选择器要压过 .cp-imgbar.is-crowded .cp-imgchip:not(.is-active) */
.cp-imgbar.is-crowded .cp-imgchip.cp-imgchip-more {
  padding: 9px;
  gap: 5px;
}

.cp-imgchip-more-count {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(32, 68, 105, .07);
  font-size: 11px;
  font-weight: 700;
  color: var(--sub);
  white-space: nowrap;
}

/* 有文件没排下：角标改成 +N，用主色点出来 */
.cp-filemenu.is-overflow .cp-imgchip-more-count {
  background: var(--acc-soft);
  color: var(--acc);
}

.cp-imgchip-more-caret {
  width: 12px;
  height: 12px;
  flex: none;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform .15s ease;
}

.cp-filemenu[open] .cp-imgchip-more-caret {
  transform: rotate(180deg);
}

/* 比原来宽一点：行里多了逐牙摘要，一行放得下三颗牙才不至于处处换行 */
.cp-filepop {
  width: 372px;
}

.cp-filepop-count {
  font-size: 11.5px;
  color: var(--dim);
  white-space: nowrap;
}

.cp-filepop-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.cp-file-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--dim);
}

.cp-file-group:first-child {
  padding-top: 2px;
}

.cp-file-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 2px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}

.cp-file-row[hidden] {
  display: none;
}

.cp-file-row:hover {
  background: var(--acc-soft);
}

.cp-file-row.is-active {
  border-color: var(--acc);
  background: var(--acc-soft);
  cursor: default;
}

.cp-file-thumb {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--bd);
  flex: 0 0 auto;
}

.cp-file-thumb.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: transparent;
}

.cp-file-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cp-file-copy strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 副行：上传日期(带时分) + 进展。日期不参与省略，进展过长才截断 */
.cp-file-copy small {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  color: var(--dim);
}

.cp-file-date {
  flex: 0 0 auto;
  white-space: nowrap;
}

.cp-file-date + .cp-file-step::before {
  content: "·";
  margin-right: 6px;
  color: var(--bd);
}

.cp-file-date[hidden] + .cp-file-step::before {
  content: none;
}

.cp-file-step {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-file-row.is-done .cp-file-step {
  color: var(--green);
}

/* ── 文件行的逐牙摘要 ──────────────────────────────────────
   一颗牙一枚小胶囊：牙位编号 · 测色结果 → 预期色号。牙位少(一张图通常
   1~3 颗)，放不下时换行，不省略——色号本身就那么短，截断反而认不出。 */
.cp-file-teeth {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 5px;
  margin-top: 4px;
}

.cp-file-teeth[hidden] {
  display: none;
}

.cp-file-tooth {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 7px 2px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: #ffffff;
  font-size: 10.5px;
  white-space: nowrap;
}

.cp-file-tooth b {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

.cp-file-shade {
  font-weight: 600;
  color: var(--ink);
}

/* 还没出结论：占位「待测」压成灰色，不与真结果抢注意力 */
.cp-file-shade.is-todo {
  font-weight: 500;
  color: var(--dim);
}

.cp-file-arrow {
  color: var(--dim);
}

.cp-file-target {
  font-weight: 600;
  color: var(--acc);
}

/* 图例：与胶囊同一套样式，只是文字换成字段名，读一眼就知道怎么看 */
.cp-filepop-legend {
  padding: 8px 4px 9px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--bd);
  color: var(--dim);
}

.cp-filepop-legend[hidden] {
  display: none;
}

.cp-filepop-legend .cp-file-tooth {
  border-style: dashed;
  background: transparent;
}

.cp-filepop-legend b,
.cp-filepop-legend .cp-file-shade,
.cp-filepop-legend .cp-file-target {
  font-weight: 600;
  color: var(--dim);
}

.cp-file-flag {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--acc);
  border-radius: 999px;
  font-size: 10.5px;
  color: var(--acc);
}

.cp-file-empty {
  padding: 22px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--dim);
}

/* 复用其它图片的校色结果（本图没色卡时的备选路径） */
.cp-reuse-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px dashed var(--bd);
}

.cp-reuse-row[hidden] {
  display: none;
}

/* ── 客户选择器 chip(与方案规划页 .cf-pick-trigger 同款) ──────
   summary 本身就是「当前客户」的展示，点击即展开客户列表——展示与切换
   合为一个控件，不再是「标题 + 右侧切换按钮」两处。 */
/* 头部一行：客户 chip + 档案信息(左) …… 文件页签(右)。
   底部一条**通栏**基线：页签坐在它上面，选中项把它咬开一个口子。
   线不能画在页签列表上——那个容器是 overflow-x:auto，选中项用来压线的
   负外边距会被裁掉，线就永远擦不掉。 */
.patient-header {
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding-bottom: 0;
}

.patient-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  /* 与选中页签的描边同色，整条页签栏是一套蓝 */
  background: var(--acc);
}

/* 选择器移到行首后，弹层跟着改为左对齐(与方案规划页同一条修正)。
   沿用 shadecast 的 right:0 会让 380px 宽的弹层从触发器右边缘向左铺开，
   直接顶到内容区左沿之外、藏进侧栏底下。 */
.cp-patient-menu {
  flex: 0 0 auto;      /* 头部空间紧张时不压缩 chip */
  align-self: center;
  /* 页签比 chip 高，居中会显得 chip 偏下；上提几像素与信息行齐平 */
  margin-bottom: 6px;
}

.cp-patient-menu .patient-picker-popover {
  right: auto;
  left: 0;
}

.cp-patient-menu > .cp-pick-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  list-style: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cp-pick-trigger::-webkit-details-marker {
  display: none;
}

.cp-pick-trigger:hover {
  border-color: var(--acc);
  box-shadow: 0 4px 14px rgba(32, 68, 105, .12);
}

.cp-pick-trigger.is-empty {
  border-style: dashed;
}

/* .patient-menu 给 summary 预置的「切换」图标在这里用不上，改用尾部箭头 */
.cp-pick-trigger::before {
  display: none;
}

.cp-pick-trigger::after {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  margin-left: 2px;
  color: var(--dim);
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform .15s ease;
}

.cp-patient-menu[open] .cp-pick-trigger {
  border-color: var(--acc);
}

.cp-patient-menu[open] .cp-pick-trigger::after {
  transform: rotate(180deg);
}

.cfb-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  flex: none;
}

.cfb-av-empty {
  background: var(--card-2);
  border: 1px dashed var(--bd);
  color: var(--dim);
  font-size: 15px;
  font-weight: 400;
}

.cfb-patient-txt {
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  text-align: left;
  white-space: nowrap;   /* 「档案号 · 性别 · 年龄」不折成两行 */
}

.cfb-patient-txt b {
  font-size: 13px;
  color: var(--ink);
}

/* 档案号单独一行，用等宽字降一档，与上一行的身份信息拉开层次 */
.cp-pick-trigger .cfb-patient-txt span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .01em;
}

.cfb-patient-txt span {
  font-size: 11px;
  color: var(--dim);
}

/* 状态徽标 + 档案号 / 文件数 / 创建时间，紧跟在 chip 右侧(左半区) */
.cp-head-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  /* 按内容取宽、可被压缩：剩余空间整块留给右侧页签区(它是 basis 0，
     宽度只由布局决定，JS 才能拿它当"能放几个页签"的可用宽度来量)。 */
  flex: 0 1 auto;
  min-width: 0;
}

/* 「还有 N 张图片未并入报告」这类进度提示，并入左侧信息区 */
.cp-head-note {
  font-size: 11.5px;
  color: var(--dim);
}

.cp-head-note:empty {
  display: none;
}

/* ── 文档视图(选中非 RAW 文件时替代画布) ──────────────────
   落在 .cp-canvas-wrap 的深色底上，故文字取浅色系。 */
.cp-doc-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
}

.cp-doc-view[hidden] {
  display: none;
}

/* 图标本体是描边 + 半透明填充的 SVG，深色底上再垫一层浅色圆角块才清楚 */
.cp-doc-icon {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
}

.cp-doc-name {
  font-size: 15px;
  font-weight: 600;
  color: #f2f4f7;
  word-break: break-all;
  max-width: 460px;
}

.cp-doc-meta {
  font-size: 12.5px;
  color: rgba(242, 244, 247, .68);
}

.cp-doc-hint {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(242, 244, 247, .55);
}

.cp-doc-dl {
  margin-top: 12px;
}

/* 文档视图下右侧工作区(手风琴/牙位面板)无意义，整体隐藏 */
.cp-workspace.is-doc-view .cp-side {
  display: none;
}

.cp-workspace.is-doc-view .cp-canvas-col {
  grid-column: 1 / -1;
}

/* ═══════════ 自动定位 + 采集质量(曝光/灰阶) ═══════════ */

/* ① 色卡定位节的三段布局：摘要 / 折叠的其它方式 / 常驻提交区。
   自动定位成功(.is-auto)时把折叠区 order 挪到提交按钮之后，
   主路径自上而下只剩「定位成功 → 曝光 → 确认提交」。 */
.cp-locate-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* gap 已接管间距，去掉 .cp-acc-body 的相邻兄弟 margin，避免双份 */
.cp-locate-flow>*+* {
  margin-top: 0;
}

.cp-locate-flow>.cp-autoloc-ok {
  order: 1;
}

.cp-locate-flow>.cp-locate-alt {
  order: 2;
}

.cp-locate-flow>.cp-locate-submit {
  order: 3;
}

.cp-locate-flow.is-auto>.cp-locate-alt {
  order: 4;
}

.cp-locate-submit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 自动定位成功摘要：只讲结论与"要你做什么"。
   配色沿用采集质量卡的写法(中性底 + 状态色左边框)，两张卡上下相邻不打架 */
.cp-autoloc-ok {
  border: 1px solid var(--bd);
  border-left: 3px solid var(--green);
  border-radius: 9px;
  padding: 8px 10px;
  background: var(--card-2);
}

.cp-autoloc-ok.is-low {
  border-left-color: #c47a1d;
}

.cp-autoloc-ok-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cp-autoloc-ok-icon {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.cp-autoloc-ok.is-low .cp-autoloc-ok-icon {
  background: #c47a1d;
}

.cp-autoloc-ok-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cp-autoloc-ok-copy strong {
  font-size: 12.5px;
  color: var(--ink);
}

.cp-autoloc-ok-copy small {
  font-size: 11px;
  color: var(--sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-autoloc-ok-badge {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--green);
  color: var(--green);
  white-space: nowrap;
}

.cp-autoloc-ok.is-low .cp-autoloc-ok-badge {
  border-color: #c47a1d;
  color: #c47a1d;
}

.cp-autoloc-ok-msg {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--sub);
  line-height: 1.55;
}

.cp-autoloc-ok-msg strong {
  color: var(--ink);
}

/* 「其它定位方式」折叠区：手动流程下(.is-plain)藏掉 summary 直接摊开，
   自动成功后才收成一行可点开的次要入口 */
.cp-locate-alt-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px dashed var(--bd);
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
}

.cp-locate-alt-summary::-webkit-details-marker {
  display: none;
}

.cp-locate-alt-summary:hover {
  border-color: var(--acc);
}

.cp-locate-alt-caret {
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--sub);
  border-bottom: 1.5px solid var(--sub);
  transform: rotate(-45deg);
  transition: transform .2s ease;
}

.cp-locate-alt[open] .cp-locate-alt-caret {
  transform: rotate(45deg);
}

.cp-locate-alt-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cp-locate-alt-copy strong {
  font-size: 12px;
  color: var(--ink);
}

.cp-locate-alt-copy small {
  font-size: 10.5px;
  color: var(--sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-locate-alt-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-locate-alt[open] .cp-locate-alt-body {
  margin-top: 8px;
}

/* 手动流程：折叠壳退化为普通容器，不占额外视觉层级 */
.cp-locate-alt.is-plain>.cp-locate-alt-summary {
  display: none;
}

.cp-locate-alt.is-plain[open] .cp-locate-alt-body {
  margin-top: 0;
}

/* 自动定位卡：状态本身就是操作提示，所以标题行右侧直接挂状态徽章 */
.cp-autoloc {
  border: 1px solid var(--bd);
  border-radius: 9px;
  padding: 8px 10px;
  background: var(--card-2);
}

.cp-autoloc-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cp-autoloc-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.cp-autoloc-badge {
  margin-left: auto;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  color: var(--sub);
  white-space: nowrap;
}

.cp-autoloc-badge.ok {
  color: var(--green);
  border-color: var(--green);
}

.cp-autoloc-badge.warn {
  color: #c47a1d;
  border-color: #c47a1d;
}

.cp-autoloc-badge.busy {
  color: var(--acc);
  border-color: var(--acc);
}

.cp-autoloc-msg {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--sub);
  line-height: 1.55;
}

.cp-autoloc-msg:empty {
  display: none;
}

.cp-autoloc .cp-btn-row {
  margin-top: 7px;
}

/* 精简态：识别已成功，结论归上方摘要卡，这里只留两颗操作按钮 */
.cp-autoloc.is-compact {
  border: 0;
  padding: 0;
  background: none;
}

.cp-autoloc.is-compact .cp-autoloc-head,
.cp-autoloc.is-compact .cp-autoloc-msg {
  display: none;
}

.cp-autoloc.is-compact .cp-btn-row {
  margin-top: 0;
}

/* 采集质量卡：整体色调跟着结论走(通过/提醒/不合格)，
   因为"该不该重拍"是这张卡唯一要传达的事 */
.cp-expo {
  border: 1px solid var(--bd);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--card-2);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--sub);
}

.cp-expo.is-pass {
  border-left-color: var(--green);
}

.cp-expo.is-warning {
  border-left-color: #c47a1d;
}

.cp-expo.is-fail {
  border-left-color: var(--red);
}

.cp-expo-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.cp-expo-title {
  font-weight: 700;
  color: var(--ink);
}

.cp-expo-verdict {
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
}

.cp-expo.is-pass .cp-expo-verdict {
  color: var(--green);
}

.cp-expo.is-warning .cp-expo-verdict {
  color: #c47a1d;
}

.cp-expo.is-fail .cp-expo-verdict {
  color: var(--red);
}

.cp-expo-msg {
  margin-top: 2px;
}

/* 4 级灰阶实测条：色块为实测线性亮度，下方标注标称 L* */
.cp-expo-bands {
  display: flex;
  gap: 4px;
  margin-top: 7px;
}

.cp-expo-band {
  flex: 1;
  text-align: center;
}

.cp-expo-chip {
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--hair);
}

.cp-expo-chip.clipped {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}

.cp-expo-band small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--sub);
}

.cp-expo-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 6px;
  font-size: 11px;
}

.cp-expo-metrics span strong {
  color: var(--ink);
  font-weight: 600;
}

.cp-expo ul {
  margin: 5px 0 0;
  padding-left: 15px;
}

.cp-expo li {
  margin-top: 2px;
}

.cp-expo-advice {
  color: #c47a1d;
}