.ct-photo #ct-ov { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-hud { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; opacity: 0; transition: .3s; }
.ct-hud.on { opacity: 1; }
.ct-hud span { background: rgba(20, 30, 40, .72); color: #fff; font-size: 14px; padding: 4px 10px; border-radius: 99px; backdrop-filter: blur(4px); }
.ct-hud b { font-size: 17px; font-variant-numeric: tabular-nums; }
.ct-demo { position: absolute; right: 10px; bottom: 10px; background: #fff3d6; color: #a46a0a; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 8px; }
.ct-res { margin-top: 14px; animation: popIn .4s ease; }
.ct-cmp { padding: 14px 16px; }
.ct-cmp h4 { font-size: 16px; margin-bottom: 8px; }
.ct-tb { width: 100%; border-collapse: collapse; font-size: 16px; }
.ct-tb th { font-size: 13px; color: var(--ink-3); font-weight: 500; text-align: center; padding: 4px; }
.ct-tb td { text-align: center; padding: 9px 4px; border-top: 1px solid var(--line); font-weight: 700; }
.ct-tb td:first-child { text-align: left; }
.ct-diff { color: var(--red); } .ct-ok { color: var(--green); }
.ct-warn { margin-top: 10px; padding: 14px 16px; border-radius: 18px; background: #fff6e5; border: 2px solid #f3cf86; }
.ct-warn b { display: block; font-size: 17px; color: #8a5408; }
.ct-warn p { font-size: 14px; color: #7a5a1c; margin-top: 4px; line-height: 1.6; }
.ct-good { margin-top: 10px; padding: 14px 16px; border-radius: 18px; background: #eaf7ef; border: 2px solid #b9e0c6; font-size: 16px; color: var(--green-d); font-weight: 700; }