/* 马桶坑距计算器 —— 青瓷卫浴 · 坑距标尺 */
.c60{
  --a:#0f766e;
  --a2:#5eead4;
  --a-soft:rgba(15,118,110,.10);
  --a-line:rgba(15,118,110,.26);
}

/* 卫生间墙砖：小方格 + 顶部灯光 */
.c60-hero{
  background:
    radial-gradient(700px 300px at 14% 0%, rgba(255,255,255,.80), transparent 62%),
    linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 52%, #f8fafc 100%);
}
.c60-hero::before{
  background-image:
    linear-gradient(to right, rgba(15,118,110,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,118,110,.09) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(80% 80% at 72% 16%, #000 0%, transparent 82%);
  -webkit-mask-image:radial-gradient(80% 80% at 72% 16%, #000 0%, transparent 82%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(700px 300px at 14% 0%, rgba(94,234,212,.12), transparent 62%),
    linear-gradient(135deg,#041b1a 0%,#062a27 52%,#041413 100%);
}
:root[data-theme="dark"] .c60-hero::before{
  background-image:
    linear-gradient(to right, rgba(94,234,212,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(94,234,212,.07) 1px, transparent 1px);
}

/* 自绘插画：马桶侧视 + 卷尺标线 */
.c60-hero-art .tr-toilet{
  position:relative;
  width:190px;
  height:150px;
}
.c60-hero-art .tr-tank{
  position:absolute;
  right:8px;top:18px;
  width:52px;height:64px;
  border-radius:10px 10px 6px 6px;
  background:linear-gradient(150deg,#ffffff,#ccfbf1 58%,#99f6e4);
  border:1px solid rgba(15,118,110,.28);
  box-shadow:inset 0 -8px 0 rgba(15,118,110,.06), 0 12px 20px rgba(15,118,110,.12);
}
.c60-hero-art .tr-bowl{
  position:absolute;
  left:22px;bottom:22px;
  width:104px;height:54px;
  border-radius:42px 42px 26px 26px;
  background:linear-gradient(160deg,#ffffff,#e6fffb 60%,#99f6e4);
  border:1px solid rgba(15,118,110,.24);
  box-shadow:0 14px 22px rgba(15,118,110,.14);
}
.c60-hero-art .tr-bowl::after{
  content:"";
  position:absolute;
  left:18px;top:8px;
  width:64px;height:26px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,#bff7ee,#7dd3c8 70%,#4fd1c5);
  border:1px solid rgba(15,118,110,.22);
}
.c60-hero-art .tr-pipe{
  position:absolute;
  left:8px;bottom:34px;
  width:18px;height:18px;
  border-radius:50%;
  background:radial-gradient(circle,#134e4a 0 42%,#5eead4 44% 100%);
  border:2px solid rgba(15,118,110,.4);
  box-shadow:0 0 0 4px rgba(94,234,212,.22);
}
.c60-hero-art .tr-rule{
  position:absolute;
  left:11px;right:8px;
  bottom:64px;
  height:2px;
  background:repeating-linear-gradient(90deg,#0f766e 0 6px,transparent 6px 11px);
  opacity:.85;
}
.c60-hero-art .tr-arrow{
  position:absolute;
  left:8px;bottom:60px;
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:10px solid #0f766e;
  transform:rotate(90deg);
}
.c60-hero-art .tr-label{
  position:absolute;
  left:44px;bottom:82px;
  font-size:11px;font-weight:900;
  color:#0f766e;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(15,118,110,.22);
  border-radius:999px;
  padding:2px 8px;
}
:root[data-theme="dark"] .c60-hero-art .tr-tank{
  background:linear-gradient(150deg,#0b3b37,#072a27);
  border-color:rgba(94,234,212,.26);
  box-shadow:inset 0 -8px 0 rgba(94,234,212,.05), 0 12px 20px rgba(0,0,0,.3);
}
:root[data-theme="dark"] .c60-hero-art .tr-bowl{
  background:linear-gradient(160deg,#0d423d,#072a27);
  border-color:rgba(94,234,212,.22);
  box-shadow:0 14px 22px rgba(0,0,0,.3);
}
:root[data-theme="dark"] .c60-hero-art .tr-bowl::after{
  background:radial-gradient(ellipse at 50% 40%,#115e59,#0b3b37 70%,#062a27);
  border-color:rgba(94,234,212,.2);
}
:root[data-theme="dark"] .c60-hero-art .tr-rule{background:repeating-linear-gradient(90deg,#5eead4 0 6px,transparent 6px 11px);}
:root[data-theme="dark"] .c60-hero-art .tr-arrow{border-top-color:#5eead4;}
:root[data-theme="dark"] .c60-hero-art .tr-label{
  background:rgba(6,24,22,.9);
  color:#5eead4;
  border-color:rgba(94,234,212,.26);
}
.c60-hero-art .chip{background:rgba(255,255,255,.94);}
:root[data-theme="dark"] .c60-hero-art .chip{background:rgba(6,24,22,.9);}
.c60-hero-art .chip b{color:#0f766e;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#5eead4;}

/* 主结果：深青 */
.c60-metric.is-hero{
  background:linear-gradient(135deg,#115e59,#0f766e 48%,#14b8a6 100%);
  box-shadow:0 16px 34px rgba(15,118,110,.30);
}
.c60-metric.is-hero .v{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.4px;}

.c60-segbtn.on{color:#0f766e;}
:root[data-theme="dark"] .c60-segbtn.on{color:#5eead4;}
.c60-chip.on{background:rgba(15,118,110,.12);border-color:#0f766e;color:#0f766e;}
:root[data-theme="dark"] .c60-chip.on{color:#5eead4;border-color:#5eead4;}

/* 结果小标题：瓷砖缝竖线 */
.tr-sub{
  position:relative;
  margin:20px 0 2px;
  padding-left:14px;
  font-size:13.5px;
  font-weight:900;
  color:var(--ink);
  letter-spacing:.2px;
}
.tr-sub::before{
  content:"";
  position:absolute;
  left:0;top:4px;bottom:4px;
  width:5px;
  border-radius:2px;
  background:repeating-linear-gradient(180deg,#0f766e 0 8px,#5eead4 8px 16px);
}

/* 偏差条形图：青色 */
.c60-bar-row .bf{background:linear-gradient(90deg,#0f766e,#5eead4);}

/* 对照表 */
#trTable td:first-child{font-weight:900;color:var(--ink);white-space:nowrap;}
#trTable td:nth-child(n+2){font-variant-numeric:tabular-nums;}
#trTable tbody tr.is-rec td{background:color-mix(in srgb,var(--a) 8%,var(--card));font-weight:800;color:var(--ink);}
#trTable tbody tr.is-rec td:first-child{color:var(--a);}
:root[data-theme="dark"] #trTable tbody tr.is-rec td:first-child{color:#5eead4;}

/* 输入区：坑距测量像标尺刻度 */
#trM1Field .c60-control,
#trM2Field .c60-control,
#trM3Field .c60-control{
  border-color:rgba(15,118,110,.30);
  background:linear-gradient(0deg,rgba(15,118,110,.03),rgba(15,118,110,.03)) var(--card);
}
:root[data-theme="dark"] #trM1Field .c60-control,
:root[data-theme="dark"] #trM2Field .c60-control,
:root[data-theme="dark"] #trM3Field .c60-control{background:rgba(94,234,212,.05);}

/* 结论型指标字号 */
#trType,#trVerdict,#trPipeCheck{font-size:clamp(16px,1.9vw,21px);letter-spacing:-.2px;}
#trMainNote,#trTypeNote,#trVerdictNote,#trPipeCheckNote{line-height:1.5;}
#trFitNote{font-weight:900;color:#0f766e;}
:root[data-theme="dark"] #trFitNote{color:#5eead4;}

/* 批量表 */
#trBatchTable td:first-child{font-weight:800;color:var(--ink);}
#trBatchTable tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--a) 3%,transparent);}
#trBatchTable td:nth-child(n+2){font-variant-numeric:tabular-nums;}
#trBatchTable tbody tr.is-err td{color:var(--err);background:var(--err-soft);}
#trBatchTable tbody tr.is-warn td{background:var(--warn-soft);}

/* 提醒框 */
.c60-warn h3{color:#7c2d12;}
:root[data-theme="dark"] .c60-warn{color:#fcd34d;}

@media (max-width:960px){
  .c60-hero-art .tr-toilet{width:164px;height:132px;}
  .c60-hero-art .tr-bowl{width:92px;height:48px;left:18px;}
  .tr-sub{margin-top:18px;}
}
@media (max-width:640px){
  .c60-hero-art{display:none;}
  .c60-metrics{grid-template-columns:1fr 1fr;}
  .c60-metric.is-hero{grid-column:1/-1;}
  .tr-sub{font-size:13px;}
  #trType,#trVerdict,#trPipeCheck{font-size:16px;}
  #trTable{min-width:520px;}
  .c60-actions .c60-btn{flex:1 1 auto;}
}
@media print{
  .c60-actions,.c60-batch,.c60-hist,.c60-seg,.c60-msg,.c60-hero-art{display:none!important;}
  .c60-card{box-shadow:none;border-color:#ccc;}
  #trTable{min-width:0;}
  #trTable tbody tr.is-rec td{background:#ccfbf1!important;}
}