/* Crystal ID Pro — 前台样式（主题中立，浅色为主，自动适配深色） */
.cidp-wrap{--cidp-pri:#7c3aed;--cidp-pri2:#8b5cf6;--cidp-bd:#e3e6ee;--cidp-bg:#fff;--cidp-soft:#f7f8fc;
 --cidp-tx:#1f2430;--cidp-mut:#6b7280;--cidp-ok:#16a34a;--cidp-warn:#d97706;--cidp-bad:#dc2626;
 max-width:900px;margin:0 auto;color:var(--cidp-tx);font-size:15px;line-height:1.6}
.cidp-wrap *{box-sizing:border-box}
@media (prefers-color-scheme: dark){
 .cidp-wrap{--cidp-bd:#334155;--cidp-bg:#1e293b;--cidp-soft:#0f172a;--cidp-tx:#e2e8f0;--cidp-mut:#94a3b8}
}
.cidp-card{background:var(--cidp-bg);border:1px solid var(--cidp-bd);border-radius:13px;padding:16px 18px;margin:0 0 14px}
.cidp-card h3{margin:0 0 12px;font-size:16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cidp-card h3 small{font-weight:400;color:var(--cidp-mut);font-size:12.5px}
.cidp-modebar{display:flex;align-items:center;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.cidp-mode{border:1px solid var(--cidp-bd);background:var(--cidp-bg);color:var(--cidp-tx);border-radius:999px;
 padding:7px 18px;font-size:14px;cursor:pointer;font-weight:600}
.cidp-mode.on{background:var(--cidp-pri);border-color:var(--cidp-pri);color:#fff}
.cidp-modehint{color:var(--cidp-mut);font-size:12.5px}
.cidp-drop{border:2px dashed var(--cidp-bd);border-radius:12px;padding:26px 14px;text-align:center;
 color:var(--cidp-mut);cursor:pointer;background:var(--cidp-soft)}
.cidp-drop.drag{border-color:var(--cidp-pri2);background:rgba(124,58,237,.07)}
.cidp-prev{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cidp-prev img{width:78px;height:78px;object-fit:cover;border-radius:8px;border:1px solid var(--cidp-bd)}
.cidp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.cidp-grid{grid-template-columns:1fr}}
.cidp-grid label{display:block;font-size:13px;color:var(--cidp-mut);margin-bottom:4px}
.cidp-grid input[type=text],.cidp-grid select{width:100%;padding:9px 10px;border:1px solid var(--cidp-bd);
 border-radius:8px;background:var(--cidp-bg);color:var(--cidp-tx);font-size:15px}
.cidp-grid em{display:block;color:var(--cidp-mut);font-size:12px;font-style:normal;margin-top:3px}
.cidp-go{width:100%;padding:13px;border:0;border-radius:10px;background:var(--cidp-pri);color:#fff;
 font-size:16px;font-weight:700;cursor:pointer}
.cidp-go[disabled]{opacity:.6;cursor:default}
.cidp-spin{text-align:center;color:var(--cidp-mut);padding:14px;font-size:14px}
.cidp-wrap[data-mode="basic"] .cidp-pro-only{display:none}
.cidp-verdict{border-radius:11px;padding:13px 15px;margin:0 0 12px;border-left:4px solid var(--cidp-mut);background:var(--cidp-soft)}
.cidp-verdict.high{border-left-color:var(--cidp-ok)}
.cidp-verdict.mid{border-left-color:var(--cidp-warn)}
.cidp-verdict.low{border-left-color:var(--cidp-bad)}
.cidp-verdict b.t{font-size:16px}
.cidp-top{margin-top:5px;font-size:15px}
.cidp-top .nm{font-size:19px;font-weight:800}
.cidp-chip{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--cidp-pri);color:#fff;font-size:13px;font-weight:700}
.cidp-cand{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--cidp-bd)}
.cidp-cand:last-child{border-bottom:0}
.cidp-cand .l{flex:1;min-width:0}
.cidp-cand .nm{font-weight:700}
.cidp-cand .en{color:var(--cidp-mut);font-size:12.5px;margin-left:5px}
.cidp-cand .why{color:var(--cidp-mut);font-size:12.5px;margin-top:3px}
.cidp-bar{height:8px;border-radius:5px;background:linear-gradient(90deg,var(--cidp-pri),var(--cidp-pri2));min-width:6px}
.cidp-barwrap{width:110px;flex:0 0 110px;padding-top:6px}
.cidp-pct{width:46px;flex:0 0 46px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.cidp-tag{display:inline-block;font-size:11px;padding:2px 7px;border-radius:6px;background:var(--cidp-soft);
 border:1px solid var(--cidp-bd);color:var(--cidp-mut);margin:2px 4px 0 0}
.cidp-tag.out{background:#fee2e2;border-color:#fecaca;color:#b91c1c}
.cidp-next{background:var(--cidp-soft);border:1px solid var(--cidp-bd);border-radius:10px;padding:12px 14px;margin-top:12px}
.cidp-warn{background:#fffbeb;border:1px solid #fcd34d;color:#92400e;border-radius:9px;padding:9px 12px;margin:6px 0;font-size:13.5px}
@media (prefers-color-scheme: dark){.cidp-warn{background:#422006;border-color:#a16207;color:#fde68a}
 .cidp-tag.out{background:#7f1d1d;border-color:#991b1b;color:#fecaca}}
.cidp-nbrow{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.cidp-nb{flex:0 0 auto;width:94px;text-align:center}
.cidp-nb img{width:94px;height:94px;object-fit:cover;border-radius:8px;border:1px solid var(--cidp-bd)}
.cidp-nb span{display:block;font-size:11.5px;color:var(--cidp-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cidp-kv{width:100%;border-collapse:collapse;font-size:13.5px}
.cidp-kv td{padding:4px 6px;border-bottom:1px solid var(--cidp-bd);vertical-align:top}
.cidp-kv td:first-child{color:var(--cidp-mut);width:76px;white-space:nowrap}
.cidp-err{background:#fee2e2;border:1px solid #fecaca;color:#b91c1c;border-radius:9px;padding:11px 13px}
.cidp-ok{background:#dcfce7;border:1px solid #86efac;color:#166534;border-radius:9px;padding:11px 13px;margin-bottom:12px}
.cidp-det{margin-top:8px}
.cidp-det summary{cursor:pointer;color:var(--cidp-pri2);font-size:13px}
.cidp-imgs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cidp-imgs img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--cidp-bd);cursor:zoom-in}
.cidp-lb{position:fixed;inset:0;background:rgba(0,0,0,.93);display:none;align-items:center;justify-content:center;z-index:99999;cursor:zoom-out}
.cidp-lb img{max-width:96vw;max-height:96vh}

.cidp-forms{display:flex;gap:10px;flex-wrap:wrap}
.cidp-formbtn{flex:1;min-width:150px;border:2px solid var(--cidp-bd);background:var(--cidp-bg);color:var(--cidp-tx);
 border-radius:11px;padding:13px 10px;font-size:15px;font-weight:600;cursor:pointer}
.cidp-formbtn.on{border-color:var(--cidp-pri);background:rgba(124,58,237,.08);color:var(--cidp-pri)}
.cidp-auth{background:#ecfdf5;border:1px solid #6ee7b7;border-left:4px solid var(--cidp-ok);border-radius:10px;
 padding:11px 13px;margin-top:12px;font-size:14px}
.cidp-auth.bad{background:#fef2f2;border-color:#fca5a5;border-left-color:var(--cidp-bad)}
.cidp-auth .how{color:var(--cidp-mut);font-size:12.5px;margin-top:5px}
@media (prefers-color-scheme: dark){.cidp-auth{background:#052e1a;border-color:#14532d}.cidp-auth.bad{background:#1c0f0f;border-color:#7f1d1d}}

/* ===== 共生：一块石头上不止一种矿物 ===== */
.cidp-asm{background:var(--cidp-soft);border:1px solid var(--cidp-bd);border-left:4px solid var(--cidp-pri);
 border-radius:10px;padding:11px 13px;margin:0 0 12px;font-size:14px}
.cidp-asm .row{display:flex;align-items:baseline;gap:8px;margin-top:6px;flex-wrap:wrap}
.cidp-asm .role{flex:0 0 auto;font-size:11.5px;padding:2px 8px;border-radius:999px;
 background:var(--cidp-pri);color:#fff;font-weight:600}
.cidp-asm .where{color:var(--cidp-mut);font-size:12.5px}
.cidp-asm .note{margin-top:8px;color:var(--cidp-mut);font-size:13px;line-height:1.55}
.cidp-tag.asm{background:rgba(124,58,237,.12);border-color:var(--cidp-pri2);color:var(--cidp-pri)}

/* ===== 正反证据：绿勾红叉 ===== */
.cidp-cand .why.ok{color:#15803d}
.cidp-cand .why.no{color:#b45309}
@media (prefers-color-scheme: dark){.cidp-cand .why.ok{color:#4ade80}.cidp-cand .why.no{color:#fbbf24}}

/* ===== 验石台：下一步测什么 ===== */
.cidp-probe{background:var(--cidp-bg);border:1px solid var(--cidp-bd);border-radius:9px;padding:10px 12px;margin-top:9px}
.cidp-probe .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cidp-probe .no{flex:0 0 auto;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;
 background:var(--cidp-pri);color:#fff;font-size:12px;font-weight:700}
.cidp-probe .cost{margin-left:auto;font-size:11.5px;color:var(--cidp-mut);
 border:1px solid var(--cidp-bd);border-radius:999px;padding:1px 8px}
.cidp-probe .ex{margin-top:6px;font-size:13.5px;line-height:1.6}
.cidp-probe .how{margin-top:5px;font-size:12.5px;color:var(--cidp-mut);line-height:1.55}
.cidp-probe .need{margin-top:4px;font-size:12px;color:var(--cidp-mut)}

/* ===== 物性反查全库 ===== */
.cidp-prop{background:#fffbeb;border:1px solid #fcd34d;border-radius:10px;padding:11px 13px;margin-top:12px;font-size:14px}
.cidp-prop .row{display:flex;align-items:baseline;gap:8px;margin-top:6px;flex-wrap:wrap}
.cidp-prop .row .en{color:var(--cidp-mut);font-size:12.5px}
.cidp-prop .row .why{color:var(--cidp-mut);font-size:12.5px;margin-left:auto}
.cidp-prop .tip{margin-top:8px;font-size:12.5px;color:#92400e;line-height:1.55}
@media (prefers-color-scheme: dark){.cidp-prop{background:#422006;border-color:#a16207;color:#fde68a}
 .cidp-prop .tip{color:#fde68a}}

/* ⛔ 不依赖 emoji 字体：勾叉和小标题的图标全用 CSS 画，任何设备都一样 */
.cidp-cand .why.ok::before,.cidp-cand .why.no::before{display:inline-block;width:1em;margin-right:2px;font-weight:700}
.cidp-cand .why.ok::before{content:"\2713"}
.cidp-cand .why.no::before{content:"\2717"}
.cidp-asm>b.hd::before,.cidp-next>b.hd::before,.cidp-prop>b.hd::before{content:"";display:inline-block;
 width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:baseline}
.cidp-asm>b.hd::before{background:var(--cidp-pri)}
.cidp-next>b.hd::before{background:#0ea5e9}
.cidp-prop>b.hd::before{background:#d97706}

/* 1.5.5：画面里没有可鉴定主体时的提示卡 */
.cidp-nosub{border-left:4px solid #d08700;background:#fdf8ec}
.cidp-nosub h3{color:#8a5a00}
.cidp-nosub-msg{font-size:15px;color:#5a4a20;margin:8px 0 4px;line-height:1.7}
.cidp-retip{background:#fff;border:1px dashed #d9c58f;border-radius:6px;padding:9px 12px;font-size:13.5px;color:#5a4a20;line-height:1.65;margin:8px 0}
.cidp-nosub-act{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cidp-nosub-act>*{min-width:0}
.cidp-force{background:#fff;border:1px solid #c9a227;color:#8a5a00;border-radius:6px;padding:8px 14px;font-size:14px;cursor:pointer}
.cidp-force:hover{background:#fdf3e0}
.cidp-nosub-hint{font-size:12.5px;color:#8a7a50;line-height:1.6;flex:1 1 240px}

/* 1.5.6 视频上传 */
.cidp-drop .cidp-hint{display:block;margin-top:6px;font-size:12px;color:#888;line-height:1.5}
.cidp-prev img.from-video{outline:2px solid #2f7cd6;outline-offset:-2px;position:relative}
.cidp-prev img.from-video::after{content:"视频";position:absolute;left:4px;top:4px;
  background:#2f7cd6;color:#fff;font-size:10px;padding:1px 5px;border-radius:3px}
/* 1.5.8 粘贴上传的一次性反馈 */
.cidp-drop.pasted{border-color:#7c3aed;background:#f6f2ff;transition:background .2s,border-color .2s}

/* ---- 1.5.13 耗时明细面板 ---- */
.cidp-timing .tt-total{font-size:14px;color:var(--cidp-mut);margin:-4px 0 10px}
.cidp-timing .tt-total b{color:var(--cidp-ink,#111);font-size:16px}
.cidp-timing .tt-row{display:grid;grid-template-columns:minmax(120px,210px) 1fr 62px;
  gap:9px;align-items:center;margin:3px 0;font-size:13.5px}
.cidp-timing .tt-row.sm{font-size:12.5px;opacity:.85;padding-left:16px}
.cidp-timing .tt-n{color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cidp-timing .tt-bar{background:#f1f5f9;border-radius:4px;height:13px;overflow:hidden}
.cidp-timing .tt-bar i{display:block;height:100%;border-radius:4px}
.cidp-timing .tt-bar i.ai{background:#7c3aed}
.cidp-timing .tt-bar i.srv{background:#0891b2}
.cidp-timing .tt-bar i.net{background:#94a3b8}
.cidp-timing .tt-v{text-align:right;font-variant-numeric:tabular-nums;color:#111;font-weight:600}
.cidp-timing .tt-sub{margin:10px 0 4px;font-size:12.5px;color:var(--cidp-mut)}

/* ===== 共生标本逐点标注（1.5.15 起统一到 4px 刻度） =====
   ⛔⛔ 1.5.14 的教训（站主实地指出 + 视觉探针坐实）：这一段我当初是 13/15/9/11/10/14/7/6/3/2
      随手给的数值，探针报「只有 15% 的间距落在 4px 倍数上，本页没有统一刻度体系」。
      ⭐ 规矩：这一段里**所有** padding/margin/gap 只许取 4 的倍数（4/8/12/16/24）。
   ⛔⛔ 第二个坑：编号圆原来靠 flex 默认的 flex-start 顶端对齐，而主角标题 17px、配角标题 15px，
      于是**同一个圆在两张卡里偏移量不一样**（实测 -3.1px vs -1.5px，肉眼能看出来）。
      ⭐ 正解：圆和标题行**共用同一个行高 24px**（圆 24×24/line-height:24px，标题行 min-height:24px），
      这样字号怎么变都天然居中，不靠任何魔法数字。
   ⛔ 第三个坑：图上的点 24px、卡片里的编号 21px —— 同一个编号两个尺寸。现在统一 24px。
   ⛔ 点用百分比定位（0~1000 归一化坐标 ÷ 10），图片怎么缩放点都跟得住。 */
.cidp-anno{background:var(--cidp-soft);border:1px solid var(--cidp-bd);border-left:4px solid var(--cidp-pri);
 border-radius:8px;padding:12px 16px;margin:12px 0}
.cidp-anno>b.hd{display:block;font-size:14.5px;line-height:24px;margin-bottom:12px}
.cidp-anno>b.hd::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;
 background:var(--cidp-pri);margin-right:8px;vertical-align:middle}
/* ⛔ 写下 display:flex 的同一刻就把 min-width:0 写掉（协议：grid/flex 子项必须给 min-width:0） */
.cidp-anno .anno-wrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.cidp-anno .anno-wrap>*{min-width:0}
.cidp-anno .anno-figs{flex:1 1 280px;display:flex;flex-direction:column;gap:8px}
.cidp-anno .anno-cards{flex:1 1 280px;display:flex;flex-direction:column;gap:8px}
.cidp-anno .anno-fig{position:relative;margin:0;line-height:0}
.cidp-anno .anno-fig img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--cidp-bd);cursor:zoom-in}
.cidp-anno .anno-fig figcaption{line-height:24px;font-size:12px;color:var(--cidp-mut);margin-top:4px}
/* 图上的点：和卡片里的编号同尺寸同字号，免得同一个「②」看起来是两个东西 */
.cidp-anno .anno-dot{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;
 color:#fff;font-size:13px;font-weight:700;border:2px solid #fff;
 box-shadow:0 1px 5px rgba(0,0,0,.45);pointer-events:none}
.cidp-anno .anno-card{display:flex;gap:8px;background:var(--cidp-bg);border:1px solid var(--cidp-bd);
 border-radius:8px;padding:12px}
/* ⛔ 用 inset 阴影加粗主角边框，不用 border-width —— 换 border 会把内容推移 1px，两张卡就对不齐了 */
.cidp-anno .anno-card.pri{border-color:var(--cidp-pri);box-shadow:0 0 0 1px var(--cidp-pri) inset}
/* ⛔⛔ 1.5.16【光学对齐】：盒子对齐 ≠ 眼睛看到的对齐。
   实心圆 24px 全是墨；中文字形的墨在 24px 行盒里**偏上**（实测上留 2px、下留 5px）
   → 盒子明明齐平，肉眼看圆就是偏低 1.5px（站主两次指出，我前一次只量 CSS 盒子所以没查出来）。
   ⭐ 这 1.5px 是从【2 倍图的真实像素】量出来的，不是拍的：
      对照实验四种改法，align-items:baseline 反而更差(+2.5/+1.5 且两张卡不一致)，
      translateY(-1.5px) 让两张卡同时归零(0.0/0.0)，-2px 则过头(-0.5)。
   ⛔ 这个补偿值绑定【line-height:24px + 当前中文字体栈】。改行高或改字体族 = 必须重新量。
      断言脚本 `_claude/scripts/cidp_check_ink_align.py` 会从像素复量，偏差 >0.5px 就报红。 */
.cidp-anno .anno-card>.n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;color:#fff;
 font-size:13px;font-weight:700;transform:translateY(-1.5px)}

/* ⛔⛔ 1.5.17【数字在圆里居中】—— 站主第三次指出，前两次我量的都是「圆 vs 标题」，
   **没量过「数字 vs 圆」**。4 倍图实测（正=偏下）：
     卡片编号 −0.38 / −0.50   图上的点 **+1.62 / +1.50**  ← 图上的点明显偏下，肉眼看得见
   根因：`.anno-dot` 有 `border:2px solid #fff`，而全局 `box-sizing:border-box` 让 24px 含了边框
   → **内容盒只剩 20px，line-height 却写着 24px**，数字被顶下去约 1.5px。
   ⭐ 修法（对照实验选的，不是拍的）：
     A 现状                          图点 +1.62/+1.50
     B 改 flex 居中（机制型）          图点 −0.38/+0.50，但卡片反而变 +0.62/+0.50
     C B + 下垫 1px                   四个统一到 −0.38~−0.50（一致，但都偏上）
     D C + 数字包 <i> 再下移 0.5px     **四个全部落进 ±0.12px** ← 采用
   ⛔ 亚像素 padding（0.5px/1.5px）会被舍入，试过 D/E/F 三组结果完全相同 —— 想精确只能动数字本身，
      所以数字必须包一层 <i>（cidp.js 里已改），否则只能整体位移圆+数字。
   ⛔ 水平方向还剩 ≤0.5px，是字形自身左右边距不对称 + 亚像素舍入，**单一数值调不齐**
      （同一个「1」在卡片是 −0.25、在图上是 +0.38），已实测确认无法统一，且远低于可见阈值，不再动。
   断言：`_claude/scripts/cidp_check_digit.py` 从 4 倍图复量，垂直 >0.35px 报红。 */
.cidp-anno .anno-card>.n,.cidp-anno .anno-dot{display:flex;align-items:center;justify-content:center;
 line-height:1;padding-bottom:1px/*optical*/}   /* optical: 这 1px 不是间距，是圆圈内部的光学补偿，不受 4px 刻度约束 */
.cidp-anno .anno-card>.n>i,.cidp-anno .anno-dot>i{display:block;font-style:normal;transform:translateY(0.5px)}
.cidp-anno .anno-card>.b{flex:1 1 auto;min-width:0}
/* ⭐ 标题行锁 24px：圆 24px、行内每个元素也 24px，圆天然对齐第一行，与标题字号无关。
   ⛔ 用 flex-start 不用 center：只要行里有一个元素比 24px 高，center 就会把整行文字推下去，
      圆却不动 —— 1.5.14 就是这么歪的（.cidp-chip 自带 2px 上下 padding → 行变 28px → 文字下移 2px）。
   ⛔ .cidp-chip 是全局共用的胶囊，不能改它本体；只在标题行里把它的上下 padding 归零。 */
.cidp-anno .anno-card .t{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;min-height:24px;line-height:24px}
.cidp-anno .anno-card .t>*{line-height:24px}
.cidp-anno .anno-card .t .cidp-chip{padding-top:0;padding-bottom:0}
.cidp-anno .anno-card .t b{font-size:15px}
.cidp-anno .anno-card.pri .t b{font-size:17px}
.cidp-anno .anno-card .en{color:var(--cidp-mut);font-size:12px}
.cidp-anno .anno-card .cf{color:var(--cidp-mut);font-size:12px}
.cidp-anno .anno-card .lk{font-size:13.5px;line-height:20px;margin-top:4px}
.cidp-anno .anno-card .sb{font-size:12.5px;line-height:20px;color:var(--cidp-mut);margin-top:4px}
.cidp-anno .anno-card .alt{font-size:12.5px;line-height:20px;color:var(--cidp-mut);margin-top:8px;
 border-top:1px dashed var(--cidp-bd);padding-top:8px}
.cidp-anno .tagp{font-size:11px;padding:0 8px;border-radius:999px;background:var(--cidp-pri);color:#fff;font-weight:600}
.cidp-anno .tagi{font-size:11px;padding:0 8px;border-radius:999px;background:var(--cidp-bd);color:var(--cidp-mut);font-weight:600}
.cidp-anno .note{margin-top:12px;color:var(--cidp-mut);font-size:13px;line-height:20px}
.cidp-anno .anno-foot{margin-top:12px;padding-top:8px;border-top:1px solid var(--cidp-bd);
 font-size:12.5px;color:var(--cidp-mut);line-height:20px}
@media(max-width:560px){
 .cidp-anno{padding:12px}
 .cidp-anno .anno-wrap{flex-direction:column}
 .cidp-anno .anno-figs,.cidp-anno .anno-cards{flex:1 1 auto;width:100%}
 /* ⛔ 这里原来把点缩到 21px，结果图上和卡片里同一个编号两个尺寸。现在不缩了。 */
}