/* 儿童远视储备计算器 —— 视力表蓝 · E 字视标 */
.c60{
  --a:#0284c7;
  --a2:#7dd3fc;
  --a-soft:rgba(2,132,199,.10);
  --a-line:rgba(2,132,199,.26);
}

.c60-hero{
  background:
    radial-gradient(720px 300px at 10% -8%, rgba(255,255,255,.82), transparent 62%),
    repeating-linear-gradient(0deg, rgba(2,132,199,.06) 0 1px, transparent 1px 34px),
    linear-gradient(134deg, #f0f9ff 0%, #e0f2fe 44%, #bae6fd 100%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(720px 300px at 10% -8%, rgba(125,211,252,.14), transparent 62%),
    repeating-linear-gradient(0deg, rgba(125,211,252,.06) 0 1px, transparent 1px 34px),
    linear-gradient(134deg,#041a2c 0%,#06263d 48%,#0d1424 100%);
}
.hr .c60-hero-art .core{
  background:linear-gradient(145deg,#0ea5e9,#075985);
  box-shadow:0 18px 42px rgba(7,89,133,.34);
}
.hr .c60-hero-art .chip b{color:#0284c7;}

/* 视力表 E 字视标 */
.hr-eyechart{
  position:absolute;
  inset:8px auto auto 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  pointer-events:none;
  opacity:.22;
  transform:rotate(-6deg);
}
.hr-eyechart span{
  font-family:var(--font);
  font-weight:900;
  line-height:1;
  color:#0284c7;
  letter-spacing:2px;
}
.hr-eyechart span:nth-child(1){font-size:34px;}
.hr-eyechart span:nth-child(2){font-size:26px;}
.hr-eyechart span:nth-child(3){font-size:19px;}
.hr-eyechart span:nth-child(4){font-size:13px;}
.hr-eyechart span:nth-child(5){font-size:9px;}
:root[data-theme="dark"] .hr-eyechart span{color:#7dd3fc;}

.hr .c60-metric.is-hero{
  background:linear-gradient(135deg,#0284c7,#0c4a6e 76%);
  box-shadow:0 16px 34px rgba(12,74,110,.32);
}
.hr .c60-metric.is-hero .v{font-size:clamp(30px,3.6vw,44px);}

.hr .c60-chip.on{background:rgba(2,132,199,.12);border-color:#0284c7;color:#075985;}
.hr .c60-segbtn.on{color:#0284c7;}

.c60-seg-sm{padding:3px;}
.c60-seg-sm .c60-segbtn{padding:7px 8px;font-size:11.5px;}

.hr-formula{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  border:1px dashed var(--a-line);
  border-radius:12px;
  font-size:12.5px;
  font-weight:800;
  color:var(--a);
  background:var(--a-soft);
}

/* 水平轴图 */
.hr-axis svg{display:block;width:100%;height:auto;max-height:250px;}
.hr-axis text{font-family:var(--font);}

/* 表格 */
.c60-table-wrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:12px;}
.c60-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.c60-table th{background:var(--a-soft);color:var(--a);font-weight:800;text-align:left;padding:9px 12px;font-size:11.5px;}
.c60-table td{padding:7px 12px;border-top:1px solid var(--line);color:var(--ink2);}
.c60-table tbody tr:nth-child(even) td{background:rgba(2,132,199,.035);}
.hr-table td:nth-child(2){font-weight:800;color:var(--a);font-variant-numeric:tabular-nums;}
.hr-tip{margin-top:9px;font-size:11.5px;color:var(--ink2);line-height:1.7;}

/* 分级色 */
.hr-risk-low{color:#047857 !important;}
.hr-risk-mid{color:#b45309 !important;}
.hr-risk-high{color:#b91c1c !important;}
.hr-risk-vhigh{color:#be123c !important;}
:root[data-theme="dark"] .hr-risk-low{color:#34d399 !important;}
:root[data-theme="dark"] .hr-risk-mid{color:#fbbf24 !important;}
:root[data-theme="dark"] .hr-risk-high{color:#fb7185 !important;}
:root[data-theme="dark"] .hr-risk-vhigh{color:#fda4af !important;}

@media (max-width:640px){
  .hr-eyechart{opacity:.16;inset:-2px auto auto 0;}
  .hr-eyechart span:nth-child(1){font-size:26px;}
  .hr-eyechart span:nth-child(2){font-size:20px;}
  .hr-axis svg{max-height:210px;}
}
@media print{
  .hr-eyechart{display:none;}
}