/* ============================================================================
   veneer-plan.css — 方案规划：输入条 / 数据源标签 / 首选方案 / 可行性矩阵 / 备选
   配色沿用 shadecast.css 的 --teal / --acc / --gold，另加一组可行性语义色。
   ========================================================================= */

/* 色令牌挂在 :root —— 详情弹层 #cf-modal 挂在 body 下(见 color-forecast.html
   的层叠说明)，不在 .cf-root 里；若把令牌定义在 .cf-root 上，弹层里的
   var(--cf-*) 会解析失败，连带 `border: 1px solid var(--cf-line)` 这类简写整条作废。 */
:root {
  --cf-ok: #2f8f63;
  --cf-ok-bg: #e6f3ec;
  --cf-warn: #a8781f;
  --cf-warn-bg: #f8f0dc;
  --cf-bad: #a83c49;
  --cf-bad-bg: #f8e6e8;
  --cf-out: #8b96a5;
  --cf-out-bg: #eef1f4;
  --cf-ink: #1b2430;
  --cf-sub: #5b6b7c;
  --cf-dim: #8b96a5;
  --cf-line: #dfe5ec;
  --cf-hair: #edf1f5;
  --cf-surface: #fff;
  --cf-surface-2: #f5f8fa;
  /* 已选方案的高亮底：与侧栏 --teal-soft 同口径 */
  --cf-teal-soft: #eaf4f3;
  --cf-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

.cf-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--cf-surface);
  color: var(--cf-ink);
}

/* ── 常驻输入条 ───────────────────────────────────────────────────────── */
/* 头部一行：客户选择器(静态 DOM) + 渲染态输入条(JS 重绘)，一律左对齐，右侧留空 */
.cf-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--cf-surface-2);
  border-bottom: 1px solid var(--cf-line);
}

.cf-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.cf-patient-menu {
  flex: none;
  position: relative;
}

/* 选择器移到行首后，弹层跟着改为左对齐 */
.cf-patient-menu .patient-picker-popover {
  right: auto;
  left: 0;
}

/* 选择器按钮 = 当前客户展示 + 切换入口。未选中时是虚线占位的「选择客户」 */
.cf-pick-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--cf-line);
  border-radius: 999px;
  background: var(--cf-surface);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cf-root .cf-pick-trigger:hover {
  border-color: #147874;
  box-shadow: 0 4px 14px rgba(20, 120, 116, .12);
}

/* 外壳 .patient-menu 给 summary 预置的「切换」图标在这里用不上，
   改用尾部箭头，并盖掉 [open] 时把整块文字染成 --acc 的那条规则 */
.cf-pick-trigger::before {
  display: none;
}

.cf-patient-menu[open] .cf-pick-trigger {
  border-color: #147874;
  color: var(--cf-ink);
}

.cf-pick-trigger::after {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  margin-left: 2px;
  color: var(--cf-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;
}

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

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

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

/* 未选客户时的占位头像 */
.cfb-av-empty {
  background: var(--cf-surface-2);
  border: 1px dashed var(--cf-line);
  color: var(--cf-dim);
  font-size: 15px;
  font-weight: 400;
}

.cfb-patient-txt {
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.cfb-patient-txt b {
  font-size: 13px;
}

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

.cfb-color {
  appearance: none;
  border: 1px solid transparent;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px;
  border-radius: 9px;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}

.cf-root .cfb-color:hover {
  border-color: var(--cf-line);
  background: var(--cf-surface);
}

.cfb-sw {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, .18);
  flex: none;
}

.cfb-color-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.cfb-color-txt .k {
  font-family: var(--cf-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cf-dim);
}

.cfb-color-txt .v {
  font-family: var(--cf-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.cfb-arrow {
  color: var(--cf-dim);
  font-size: 15px;
}

.cfb-gap {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  padding: 0 6px;
}

.cfb-gap .n {
  font-family: var(--cf-mono);
  font-size: 16px;
  font-weight: 700;
  color: #a8781f;
  font-variant-numeric: tabular-nums;
}

.cfb-gap .l {
  font-family: var(--cf-mono);
  font-size: 9.5px;
  letter-spacing: .05em;
  color: var(--cf-dim);
}

/* 色块本身点了就能开输入面板，这颗按钮是次要入口：贴着 ΔE 放，不再顶到行尾 */
.cfb-edit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  border: 1px solid var(--cf-line);
  border-radius: 999px;
  background: var(--cf-surface);
  color: var(--cf-sub);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.cfb-edit::before {
  content: "";
  width: 13px;
  height: 13px;
  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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

.cf-root .cfb-edit:hover {
  border-color: #147874;
  color: #147874;
}

/* 展开态：按钮和下方输入面板是一体的，给个明确的「已打开」样子 */
.cfb-edit.on {
  border-color: #147874;
  background: #e7f2f0;
  color: #0f5a57;
}

.cfb-edit.on::before {
  -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='M18 15l-6-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='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
}

@keyframes cf-flash {
  0%, 50%, 100% { box-shadow: 0 0 0 0 rgba(20, 120, 116, 0); }
  25%, 75% { box-shadow: 0 0 0 3px rgba(20, 120, 116, .55); }
}

.cf-flash {
  animation: cf-flash .8s ease;
}

/* ── 输入展开态 ───────────────────────────────────────────────────────── */
.cf-input {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  padding: 18px 20px;
  background: var(--cf-surface);
  border-bottom: 1px solid var(--cf-line);
}

.cf-input[hidden] {
  display: none;
}

.cf-input-col h4 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
}

.cf-input-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--cf-dim);
}

.cf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

/* ── 展开态里的牙位块：九宫格预览 + 分区色号 ─────────────────────────── */
/* 横跨基牙/目标两列，整块可点，打开牙位详情弹层 */
.cf-tooth-panel {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px dashed var(--cf-line);
}

.cf-tooth-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
}

.cf-tooth-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.cf-tooth-head .cf-btn-ghost {
  margin-left: auto;
  padding: 5px 12px;
  font-size: 12px;
}

.cf-tooth-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding: 10px;
  border: 1px solid var(--cf-line);
  border-radius: 10px;
  background: var(--cf-surface-2);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cf-root .cf-tooth-body:hover {
  border-color: #147874;
  box-shadow: 0 4px 16px rgba(20, 120, 116, .12);
}

.cf-tooth-body:focus-visible {
  outline: 2px solid #147874;
  outline-offset: 2px;
}

.cf-nine-fig {
  flex: none;
  width: 168px;
  margin: 0;
  text-align: center;
}

.cf-nine-img {
  position: relative;
  display: block;
}

.cf-nine-fig img {
  display: block;
  width: 100%;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: var(--cf-surface);
}

/* 取样区热区：位置由 JS 按 nineRect 内联，内部再三等分成 9 格 */
.cf-nine-hots {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.cf-nine-hot {
  border: 1px solid transparent;
}

.cf-nine-hot:hover {
  background: rgba(20, 120, 116, .18);
  border-color: rgba(20, 120, 116, .9);
}

/* 悬停提示：贴在取样区上/下边，横跨整块，避免左右列的提示溢出图外 */
.cf-nine-tip {
  position: absolute;
  left: var(--cf-tip-l, 0);
  right: var(--cf-tip-r, 0);
  bottom: 0;
  display: none;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(18, 28, 36, .88);
  color: #fff;
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
}

.cf-nine-tip.up {
  bottom: auto;
  top: 0;
}

.cf-nine-tip b {
  display: block;
  font-family: var(--cf-mono);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cf-nine-hot:hover .cf-nine-tip {
  display: block;
}

/* 分区表点选后对应热区闪两下：与牙色测定页 drawFlashOverlay 同一套黄色 */
@keyframes cf-zone-flash {
  0%, 50%, 100% {
    background: rgba(255, 214, 10, .12);
    box-shadow: inset 0 0 0 2px rgba(255, 204, 0, .55);
  }
  25%, 75% {
    background: rgba(255, 214, 10, .54);
    box-shadow: inset 0 0 0 2px rgba(255, 204, 0, 1);
  }
}

.cf-nine-hot.is-flash {
  animation: cf-zone-flash 1.2s ease;
}

/* 被点的格子本身也闪一下：不依赖预览图几何，老报告同样有反馈 */
@keyframes cf-zone-cell-flash {
  0%, 50%, 100% {
    background: rgba(255, 214, 10, .14);
    box-shadow: inset 0 0 0 2px rgba(255, 204, 0, .5);
  }
  25%, 75% {
    background: rgba(255, 214, 10, .5);
    box-shadow: inset 0 0 0 2px rgba(255, 204, 0, 1);
  }
}

.cf-zone-table.full .cf-zone-cell.is-flash {
  animation: cf-zone-cell-flash 1.2s ease;
}

.cf-nine-fig figcaption {
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--cf-dim);
}

.cf-nine-fig.full {
  width: 200px;
}

.cf-nine-fig.is-empty {
  width: 168px;
  padding: 28px 10px;
  border: 1px dashed var(--cf-line);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--cf-dim);
  text-align: center;
}

.cf-zone-table {
  flex: 1;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 12px;
}

.cf-zone-table th {
  width: 1px;
  padding-right: 4px;
  font-family: var(--cf-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--cf-dim);
  white-space: nowrap;
  text-align: right;
}

.cf-zone-cell {
  padding: 5px 8px;
  border: 1px solid var(--cf-line);
  border-radius: 7px;
  background: var(--cf-surface);
  line-height: 1.35;
  vertical-align: top;
}

.cf-zone-cell.is-empty {
  background: var(--cf-surface-2);
  border-style: dashed;
}

.cf-zone-shade {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}

.cf-zone-shade i {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .15);
}

.cf-zone-pos,
.cf-zone-na {
  display: block;
  font-size: 10px;
  color: var(--cf-dim);
}

.cf-zone-lab,
.cf-zone-de {
  display: block;
  font-family: var(--cf-mono);
  font-size: 10px;
  color: var(--cf-sub);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 弹层里的完整版：格子多两行数字。Lab 一行不折行(nowrap)，表格就压不回去了，
   放不下时让它整体换到预览图下面，别把弹层撑出横向滚动 */
.cf-tooth-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
  margin-top: 16px;
}

/* 弹层里的表格沿用「牙色测定」分区表的形态：合并边线成统一网格、区名竖排、
   格内居中三行(色号 / 位置 / Lab)，hover 用 outline 盖在合并边线上补全四边 */
.cf-zone-table.full {
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 10.5px;
  color: var(--cf-sub);
}

.cf-zone-table.full th {
  writing-mode: vertical-rl;
  text-orientation: upright;
  width: 18px;
  padding: 0 1px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  vertical-align: middle;
}

.cf-zone-table.full .cf-zone-cell {
  position: relative;
  height: 58px;
  padding: 5px 4px;
  border: 1px solid var(--cf-line);
  border-radius: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.cf-zone-table.full .cf-zone-cell:hover {
  border-color: #147874;
  background: #e7f2f0;
  outline: 1px solid #147874;
  outline-offset: -1px;
  z-index: 1;
}

.cf-zone-table.full .cf-zone-cell.is-empty {
  opacity: .6;
  cursor: default;
}

.cf-zone-table.full .cf-zone-cell.is-empty:hover {
  border-color: var(--cf-line);
  background: var(--cf-surface);
  outline: none;
}

.cf-zone-table.full .cf-zone-shade {
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #147874;
}

.cf-zone-table.full .cf-zone-shade i {
  width: 11px;
  height: 11px;
  border-radius: 0;
}

.cf-zone-table.full .cf-zone-pos {
  margin: 1px 0;
}

.cf-zone-table.full .cf-zone-lab,
.cf-zone-table.full .cf-zone-de {
  font-size: 9.5px;
}

/* ── 弹层里的交互式预览(assets/veneer-tooth.js) ────────────────────────── */
.cf-tooth-live {
  flex: none;
  width: 260px;
}

/* 色彩范围分析：右侧分区表让位，这一列铺满，容差面板摆到画布右边 */
.cf-tooth-live.is-range {
  flex: 1;
  width: auto;
  min-width: 0;
}

.cf-tooth-side {
  flex: 1;
  min-width: 0;
}

.cf-tooth-side[hidden] {
  display: none;
}

.cft-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.cft-left {
  flex: none;
  width: 260px;
}

.cft-stage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #1c2430;
}

.cft-canvas {
  display: block;
  cursor: crosshair;
}

.cft-title {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(18, 26, 34, .72);
  color: #fff;
  font-size: 10.5px;
  pointer-events: none;
}

.cft-tools {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cft-btn {
  appearance: none;
  font: inherit;
  font-size: 10.5px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px;
  background: rgba(18, 26, 34, .72);
  color: #fff;
  cursor: pointer;
}

.cft-seg {
  display: inline-flex;
  margin-left: auto;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
}

.cft-seg-btn {
  appearance: none;
  font: inherit;
  font-size: 10.5px;
  padding: 4px 9px;
  border: 0;
  background: rgba(18, 26, 34, .72);
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
}

.cft-seg-btn.on {
  background: #1f5fa8;
  color: #fff;
  font-weight: 600;
}

.cft-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  background: rgba(28, 36, 48, .9);
  color: rgba(255, 255, 255, .78);
  font-size: 11.5px;
}

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

.cft-status.is-error {
  color: #ffb4b4;
}

/* 悬停实时色值：固定高度，避免鼠标进出时把下方内容顶来顶去 */
.cft-readout {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  margin-top: 6px;
  padding: 4px 6px;
  border: 1px solid var(--cf-line);
  border-radius: 8px;
  background: var(--cf-surface-2);
  font-size: 10.5px;
}

.cft-read-hint {
  color: var(--cf-dim);
}

.cft-read-sw {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .15);
}

.cft-read-lab {
  font-family: var(--cf-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cft-read-near {
  margin-left: auto;
  color: var(--cf-dim);
  white-space: nowrap;
}

/* 色彩范围分析：基础色值 + ΔE00 容差 */
.cft-range {
  flex: 1;
  min-width: 0;
}

.cft-range[hidden] {
  display: none;
}

.cft-range-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
}

.cft-range-head .cft-btn {
  margin-left: auto;
  flex: none;
  border-color: var(--cf-line);
  background: var(--cf-surface);
  color: var(--cf-sub);
}

.cft-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 7px;
  cursor: pointer;
}

.cft-row.on {
  background: #fdf6d8;
}

.cft-row-line {
  width: 14px;
  height: 3px;
  flex: none;
  border-radius: 2px;
}

.cft-row-sw {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .15);
}

.cft-row-name {
  width: 42px;
  flex: none;
  font-size: 12px;
}

.cft-row-slider {
  flex: 1;
  min-width: 0;
  accent-color: #1f4f7a;
}

.cft-row-num {
  width: 52px;
  flex: none;
  padding: 3px 6px;
  border: 1px solid var(--cf-line);
  border-radius: 6px;
  font: inherit;
  font-size: 11.5px;
  font-family: var(--cf-mono);
  text-align: center;
}

.cft-row-unit {
  flex: none;
  font-size: 9.5px;
  color: var(--cf-dim);
}

.cft-range-note,
.cft-range-empty {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--cf-dim);
}

/* 弹层顶部：色块 + 色号 + Lab，只摆客观色值 */
.cf-tooth-color {
  text-align: center;
}

.cf-tooth-lab {
  display: block;
  margin-top: 2px;
  font-family: var(--cf-mono);
  font-size: 10.5px;
  color: var(--cf-sub);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cf-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  padding: 5px 11px;
  border: 1px solid var(--cf-line);
  border-radius: 999px;
  background: var(--cf-surface);
  color: var(--cf-sub);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.cf-root .cf-chip:hover {
  border-color: #147874;
  color: #147874;
}

.cf-chip.on {
  border-color: #147874;
  background: #e7f2f0;
  color: #0f5a57;
  font-weight: 600;
}

.cf-chip i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .16);
  flex: none;
}

.cf-chip.ghost {
  border-style: dashed;
}

.cf-lab-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.cf-lab-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--cf-dim);
}

.cf-lab-field input {
  font: inherit;
  font-family: var(--cf-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 7px 9px;
  border: 1px solid var(--cf-line);
  border-radius: 7px;
  background: var(--cf-surface);
  color: var(--cf-ink);
  width: 100%;
}

.cf-lab-field input:focus-visible {
  outline: 2px solid #147874;
  outline-offset: 1px;
  border-color: #147874;
}

.cf-lab-field input[aria-invalid="true"] {
  border-color: var(--cf-bad);
  background: var(--cf-bad-bg);
}

/* ── 数据源标签 ───────────────────────────────────────────────────────── */
.cf-tabs {
  flex: none;
  display: flex;
  gap: 4px;
  padding: 10px 20px 0;
  background: var(--cf-surface-2);
  border-bottom: 1px solid var(--cf-line);
}

.cf-tab {
  appearance: none;
  font: inherit;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 10px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  background: none;
  color: var(--cf-dim);
  cursor: pointer;
  white-space: nowrap;
}

.cf-root .cf-tab:hover {
  color: var(--cf-ink);
}

.cf-tab.on {
  background: var(--cf-surface);
  border-color: var(--cf-line);
  color: var(--cf-ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 #147874;
}

.cf-conf {
  font-family: var(--cf-mono);
  font-size: 9.5px;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.cf-conf-physical {
  background: var(--cf-ok-bg);
  color: var(--cf-ok);
}

.cf-conf-measured {
  background: #e7f2f0;
  color: #0f5a57;
}

.cf-conf-public {
  background: var(--cf-warn-bg);
  color: var(--cf-warn);
}

/* 当前牙位的方案落在这个数据源：Tab 上打标，未选中时也一眼看得见 */
.cf-tab.has-plan {
  color: var(--cf-ink);
}

.cf-tab.has-plan:not(.on) {
  background: var(--cf-teal-soft);
  border-color: var(--cf-line);
}

.cf-tab-flag {
  padding: 2px 7px;
  border-radius: 999px;
  background: #147874;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.cf-tab-flag.is-sent {
  background: var(--cf-ok);
}

/* ── 结果区 ───────────────────────────────────────────────────────────── */
.cf-results {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px;
  display: grid;
  gap: 20px;
  align-content: start;
}

.cf-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--cf-dim);
  font-size: 14px;
  border: 1px dashed var(--cf-line);
  border-radius: 10px;
}

.cf-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cf-panel-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.cf-panel-note {
  font-size: 12px;
  color: var(--cf-dim);
}

.cf-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--cf-dim);
}

.cf-lg {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: -1px;
}

.cf-lg.ok { background: var(--cf-ok-bg); border: 1px solid var(--cf-ok); }
.cf-lg.warn { background: var(--cf-warn-bg); border: 1px solid var(--cf-warn); }
.cf-lg.bad { background: var(--cf-bad-bg); border: 1px solid var(--cf-bad); }
.cf-lg.out { background: repeating-linear-gradient(135deg, var(--cf-out-bg), var(--cf-out-bg) 3px, transparent 3px, transparent 6px); border: 1px solid var(--cf-line); }
.cf-lg.pick { background: #fff; border: 2px solid #147874; }

.cf-fg-ok { color: var(--cf-ok); }
.cf-fg-warn { color: var(--cf-warn); }
.cf-fg-bad { color: var(--cf-bad); }
.cf-fg-out { color: var(--cf-out); }

/* ── 方案卡（推荐 / 已选择）───────────────────────────────────────────── */
.cf-hero {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px 22px;
  align-items: center;
  padding: 18px 20px;
  border: 1.5px solid var(--cf-line);
  border-radius: 12px;
  background: var(--cf-surface);
}

.cf-hero-ok { border-color: var(--cf-ok); background: linear-gradient(180deg, var(--cf-ok-bg), transparent 60%); }
.cf-hero-warn { border-color: var(--cf-warn); background: linear-gradient(180deg, var(--cf-warn-bg), transparent 60%); }
.cf-hero-bad { border-color: var(--cf-bad); background: linear-gradient(180deg, var(--cf-bad-bg), transparent 60%); }
.cf-hero-out { border-color: var(--cf-line); background: var(--cf-surface-2); }

/* 选了方案后：已选卡在上、推荐卡在下，两张卡之间自己留间距 */
.cf-hero + .cf-hero {
  margin-top: 14px;
}

/* 已选择方案：外圈一道 teal 环，与推荐卡拉开层级 */
.cf-hero.is-selected {
  box-shadow: 0 0 0 2px #147874, 0 6px 18px rgba(20, 120, 116, .12);
}

/* 已经有选择时，推荐卡退成参考项 */
.cf-hero.is-muted {
  background: var(--cf-surface-2);
  border-color: var(--cf-line);
}

.cf-hero-tag {
  font-family: var(--cf-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cf-sub);
  margin-bottom: 4px;
}

.cf-hero.is-selected .cf-hero-tag {
  color: #147874;
  font-weight: 700;
}

.cf-hero-tag-note {
  margin-left: 6px;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 400;
  color: var(--cf-dim);
}

.cf-hero-name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

.cf-hero-name em {
  font-style: normal;
  color: #147874;
}

.cf-hero-sub {
  font-size: 12.5px;
  color: var(--cf-sub);
  margin-top: 5px;
}

.cf-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  margin-top: 8px;
  color: #fff;
}

.cf-pill-ok { background: var(--cf-ok); }
.cf-pill-warn { background: var(--cf-warn); }
.cf-pill-bad { background: var(--cf-bad); }
.cf-pill-out { background: var(--cf-out); }
.cf-pill-pick { background: #147874; margin-left: 6px; }

.cf-hero-swatches {
  display: flex;
  gap: 12px;
}

.cf-hero-swatches > div {
  text-align: center;
}

.cf-hero-sw {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  border: 2px solid rgba(0, 0, 0, .12);
  margin: 0 auto 4px;
}

.cf-hero-sw.is-target {
  border-color: var(--cf-ok);
}

.cf-hero-swatches small {
  font-size: 10.5px;
  color: var(--cf-dim);
}

.cf-hero-score {
  text-align: center;
  padding-left: 20px;
  border-left: 1px solid var(--cf-line);
}

.cf-hero-score .n {
  font-family: var(--cf-mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cf-hero-score .l {
  font-family: var(--cf-mono);
  font-size: 10px;
  color: var(--cf-dim);
  margin-top: 4px;
}

.cf-hero-foot {
  grid-column: 1 / -1;
  border-top: 1px solid var(--cf-hair);
  padding-top: 11px;
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--cf-sub);
}

.cf-hero-foot b {
  font-family: var(--cf-mono);
  color: var(--cf-ink);
  font-variant-numeric: tabular-nums;
}

.cf-hero-more {
  appearance: none;
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border: 1px solid var(--cf-line);
  border-radius: 7px;
  background: var(--cf-surface);
  color: var(--cf-sub);
  cursor: pointer;
}

.cf-root .cf-hero-more:hover {
  border-color: #147874;
  color: #147874;
}

.cf-hero-more + .cf-hero-more {
  margin-left: -10px;
}

/* ── 方案落库状态 + 发送给牙医 ────────────────────────────────────────── */
.cf-planbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--cf-line);
  font-size: 12px;
}

.cf-plan-state {
  font-weight: 600;
  white-space: nowrap;
}

.cf-plan-state.is-saving { color: var(--cf-sub); }
.cf-plan-state.is-saved { color: #147874; }
.cf-plan-state.is-sent { color: var(--cf-ok); }
.cf-plan-state.is-error { color: var(--cf-bad); }

.cf-plan-note {
  color: var(--cf-dim);
  flex: 1;
  min-width: 120px;
}

.cf-plan-btn {
  appearance: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.cf-plan-btn.primary {
  background: #147874;
  color: #fff;
}

.cf-root .cf-plan-btn.primary:hover { background: #0f5a57; }

.cf-plan-btn.ghost {
  background: var(--cf-surface);
  border-color: var(--cf-line);
  color: var(--cf-sub);
}

.cf-root .cf-plan-btn.ghost:hover { border-color: #147874; color: #147874; }

.cf-plan-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* 已发送：整页转只读的说明条 */
.cf-plan-locked {
  padding: 11px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--cf-ok);
  border-radius: 10px;
  background: var(--cf-ok-bg);
  color: var(--cf-ok);
  font-size: 12.5px;
}

/* ── 可行性矩阵 ───────────────────────────────────────────────────────── */
.cf-matrix-scroll {
  overflow-x: auto;
  border: 1px solid var(--cf-line);
  border-radius: 10px;
  background: var(--cf-surface);
}

table.cf-matrix {
  border-collapse: separate;
  border-spacing: 3px;
  width: 100%;
  min-width: 620px;
  font-family: var(--cf-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 6px;
}

table.cf-matrix th {
  font-weight: 500;
  font-size: 11px;
  color: var(--cf-dim);
  padding: 4px;
}

.cf-unit-row th {
  font-size: 9.5px;
  padding-top: 0;
}

/* 材料名列收到内容宽度，剩余宽度平分给厚度列——否则列数少时(公开数据源 5 列)
   名称列会把数字挤到最右边 */
table.cf-matrix th.cf-rowh {
  text-align: left;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--cf-ink);
  white-space: nowrap;
  padding: 6px 12px 6px 6px;
  font-weight: 500;
  position: sticky;
  left: 0;
  background: var(--cf-surface);
  z-index: 1;
  width: 1px;
}

table.cf-matrix th.cf-rowh small {
  display: block;
  font-size: 10.5px;
  color: var(--cf-dim);
  font-weight: 400;
}

td.cf-cell {
  position: relative;
  text-align: center;
  padding: 8px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  min-width: 54px;
}

td.cf-cell small {
  display: block;
  font-size: 9.5px;
  opacity: .75;
  font-weight: 400;
}

.cf-cell-ok { background: var(--cf-ok-bg); color: var(--cf-ok); font-weight: 700; }
.cf-cell-warn { background: var(--cf-warn-bg); color: var(--cf-warn); }
.cf-cell-bad { background: var(--cf-bad-bg); color: var(--cf-bad); }
.cf-cell-out {
  background: repeating-linear-gradient(135deg, var(--cf-out-bg), var(--cf-out-bg) 4px, transparent 4px, transparent 8px);
  color: var(--cf-out);
}
.cf-cell-na { color: var(--cf-dim); cursor: default; }

td.cf-cell.is-best { border-color: currentColor; }

/* 已选方案的那一格：teal 环 + 右上角对勾，与「本行最优」的细边框区分开 */
td.cf-cell.is-pick {
  outline: 2px solid #147874;
  outline-offset: 0;
  font-weight: 700;
}

td.cf-cell.is-pick::after {
  content: "✓";
  position: absolute;
  top: 0;
  right: 3px;
  font-size: 9px;
  line-height: 1.4;
  color: #147874;
}

/* 已选方案所在的行：行首名字挂一枚「已选」标，整行底色微微抬起 */
tr.is-pick-row th.cf-rowh {
  background: var(--cf-teal-soft, #eaf4f3);
  box-shadow: inset 3px 0 0 #147874;
}

.cf-pick-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #147874;
  color: #fff;
  font-family: var(--cf-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: 1px;
}

.cf-root td.cf-cell:hover { border-color: var(--cf-ink); }
.cf-root td.cf-cell:focus-visible { outline: 2px solid #147874; outline-offset: 1px; }

.cf-expand {
  appearance: none;
  font: inherit;
  font-size: 12.5px;
  margin-top: 10px;
  padding: 7px 14px;
  border: 1px dashed var(--cf-line);
  border-radius: 8px;
  background: none;
  color: var(--cf-sub);
  cursor: pointer;
}

.cf-root .cf-expand:hover { border-color: #147874; color: #147874; }

/* ── 实物样板：条带 ───────────────────────────────────────────────────── */
.cf-strip {
  display: grid;
  gap: 1px;
  background: var(--cf-line);
  border: 1px solid var(--cf-line);
  border-radius: 10px;
  overflow: hidden;
}

.cf-strip-row {
  appearance: none;
  font: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 30px 1fr 72px 62px 68px;
  gap: 14px;
  align-items: center;
  padding: 11px 14px;
  background: var(--cf-surface);
  border: none;
  cursor: pointer;
  color: inherit;
}

.cf-root .cf-strip-row:hover { background: var(--cf-surface-2); }

.cf-strip-row.on {
  box-shadow: inset 3px 0 0 #147874;
  background: var(--cf-teal-soft, #eaf4f3);
}

.cf-strip-sw {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, .18);
}

.cf-strip-name { font-size: 13px; }

.cf-strip-thk,
.cf-strip-de,
.cf-strip-band {
  font-family: var(--cf-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.cf-strip-thk { color: var(--cf-sub); }
.cf-strip-de { padding: 6px 4px; border-radius: 6px; }
.cf-strip-band { font-size: 11px; }

/* ── 备选清单 ─────────────────────────────────────────────────────────── */
.cf-alt-list {
  display: grid;
  gap: 1px;
  background: var(--cf-line);
  border: 1px solid var(--cf-line);
  border-radius: 10px;
  overflow: hidden;
}

.cf-alt-row {
  appearance: none;
  font: inherit;
  text-align: left;
  color: inherit;
  display: grid;
  grid-template-columns: 22px 30px 1fr auto minmax(0, 24ch);
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--cf-surface);
  border: none;
  cursor: pointer;
}

.cf-root .cf-alt-row:hover { background: var(--cf-surface-2); }

.cf-alt-rk {
  font-family: var(--cf-mono);
  font-size: 11px;
  color: var(--cf-dim);
}

.cf-alt-sw {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .18);
}

.cf-alt-nm {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.cf-alt-nm b { font-size: 13px; font-weight: 600; }

.cf-alt-nm span {
  font-family: var(--cf-mono);
  font-size: 11px;
  color: var(--cf-dim);
}

.cf-alt-de {
  font-family: var(--cf-mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cf-alt-note {
  font-size: 11.5px;
  color: var(--cf-sub);
  text-align: right;
}

/* ── 数据源附加区 ─────────────────────────────────────────────────────── */
.cf-aside-card {
  border: 1px solid var(--cf-line);
  border-left: 3px solid #147874;
  border-radius: 10px;
  background: var(--cf-surface-2);
  padding: 15px 18px;
}

.cf-aside-card.warn {
  border-left-color: var(--cf-warn);
  background: var(--cf-warn-bg);
}

.cf-aside-card h3 {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 600;
}

.cf-aside-card p {
  margin: 0;
  font-size: 13px;
  color: var(--cf-sub);
  max-width: 78ch;
}

.cf-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--cf-sub);
}

.cf-steps li { margin-bottom: 4px; }

.cf-aside-note {
  margin-top: 9px !important;
  font-size: 12px !important;
  color: var(--cf-dim) !important;
}

/* ── 品牌筛选栏 ───────────────────────────────────────────────────────── */
.cf-filterbar {
  display: grid;
  gap: 8px;
  padding: 13px 16px;
  border: 1px solid var(--cf-line);
  border-radius: 10px;
  background: var(--cf-surface-2);
}

.cf-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cf-filter-lb {
  font-family: var(--cf-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cf-dim);
  width: 68px;
  flex: none;
}

.cf-seg {
  appearance: none;
  font: inherit;
  font-size: 12px;
  padding: 4px 11px;
  border: 1px solid var(--cf-line);
  border-radius: 999px;
  background: var(--cf-surface);
  color: var(--cf-sub);
  cursor: pointer;
}

.cf-root .cf-seg:hover { border-color: #147874; color: #147874; }

.cf-seg.on {
  border-color: #147874;
  background: #e7f2f0;
  color: #0f5a57;
  font-weight: 600;
}

/* ── 详情弹层 ─────────────────────────────────────────────────────────── */
.cf-modal[hidden] { display: none; }

.cf-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cf-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 20, 28, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.cf-modal-panel {
  position: relative;
  background: var(--cf-surface);
  color: var(--cf-ink);
  border-radius: 16px;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 24px 24px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
}

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

.cf-modal-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.cf-modal-sub {
  font-size: 12px;
  color: var(--cf-dim);
  margin-top: 4px;
}

.cf-modal-x {
  appearance: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cf-surface-2);
  color: var(--cf-sub);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}

.cf-modal-colors {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--cf-surface-2);
  border-radius: 11px;
  margin-bottom: 14px;
}

.cf-modal-colors > div { text-align: center; }

.cf-modal-colors small {
  font-size: 10.5px;
  color: var(--cf-dim);
}

.cf-modal-arrow,
.cf-modal-vs {
  color: var(--cf-dim);
  font-size: 13px;
}

.cf-modal-score {
  margin-left: auto;
  text-align: center;
}

.cf-modal-score .n {
  font-family: var(--cf-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cf-modal-score .l {
  font-family: var(--cf-mono);
  font-size: 10px;
  color: var(--cf-dim);
  margin-top: 3px;
}

.cf-modal-warn {
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--cf-warn-bg);
  border: 1px solid var(--cf-warn);
  color: #6f5320;
  font-size: 12.5px;
  margin-bottom: 14px;
}

.cf-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.cf-btn-primary,
.cf-btn-ghost {
  appearance: none;
  font: inherit;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
}

.cf-btn-primary {
  background: #147874;
  color: #fff;
  font-weight: 600;
}

.cf-btn-ghost {
  background: var(--cf-surface);
  border-color: var(--cf-line);
  color: var(--cf-sub);
}

.cf-root .cf-btn-ghost:hover,
.cf-modal .cf-btn-ghost:hover { border-color: #147874; color: #147874; }

/* buildDeviation() 产出的偏差分析块。这套样式此前只存在于旧的独立页
   veneer_prediction.html 内联段里，从未随 JS 一起迁进 veneer-legacy.css，
   因此在本页一直是裸的；这里按本页色板补齐。 */
.dev-box {
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid var(--cf-line);
  border-radius: 10px;
  background: var(--cf-surface-2);
}

.dev-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--cf-sub);
  margin-bottom: 9px;
  letter-spacing: .02em;
}

.dev-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.dev-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
}

.dev-match { background: var(--cf-ok-bg); color: var(--cf-ok); border-color: var(--cf-ok); }
.dev-bright { background: var(--cf-warn-bg); color: var(--cf-warn); border-color: var(--cf-warn); }
.dev-yellow { background: var(--cf-warn-bg); color: var(--cf-warn); border-color: var(--cf-warn); }
.dev-dark { background: #eef2fb; color: #33478a; border-color: #c3cfe8; }
.dev-blue { background: #eef2fb; color: #33478a; border-color: #c3cfe8; }
.dev-red { background: var(--cf-bad-bg); color: var(--cf-bad); border-color: var(--cf-bad); }
.dev-green { background: var(--cf-ok-bg); color: var(--cf-ok); border-color: var(--cf-ok); }

.dev-desc {
  font-size: 12.5px;
  color: var(--cf-sub);
  line-height: 1.65;
  margin-top: 6px;
}

/* clinicalGradeDE00 的五级标签（veneer-legacy.css 已有 grade-1..5 配色，此处只补形状） */
.cf-modal .clinical-grade,
.cf-results .clinical-grade {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.cf-meas {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cf-hair);
}

.cf-meas[hidden] { display: none; }

.cf-meas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: end;
}

.cf-meas-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--cf-dim);
}

.cf-meas-grid label.wide { grid-column: span 2; }

.cf-meas-grid input {
  font: inherit;
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--cf-line);
  border-radius: 7px;
  background: var(--cf-surface);
  color: var(--cf-ink);
}

.cf-meas-fb {
  margin-top: 9px;
  font-size: 12.5px;
}

.cf-meas-fb.ok { color: var(--cf-ok); }
.cf-meas-fb.err { color: var(--cf-bad); }

/* ── 窄屏 ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cf-input { grid-template-columns: 1fr; }
  .cf-tooth-body,
  .cf-tooth-detail { flex-direction: column; }
  .cf-nine-fig,
  .cf-nine-fig.full,
  .cf-nine-fig.is-empty { width: 100%; }
  .cf-zone-table { width: 100%; }
  .cf-hero { grid-template-columns: 1fr; }
  .cf-hero-score { border-left: none; padding-left: 0; text-align: left; }
  .cf-alt-row { grid-template-columns: 22px 30px 1fr auto; }
  .cf-alt-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-root *,
  .cf-modal * { animation: none !important; transition: none !important; }
}