/* 瞳距计算器 —— 光学紫 · 镜片同心圆 */
.c60{
  --a:#7c3aed;
  --a2:#c4b5fd;
  --a-soft:rgba(124,58,237,.10);
  --a-line:rgba(124,58,237,.26);
}

/* 镜片母题：同心圆 + 光学光晕 */
.c60-hero{
  background:
    radial-gradient(660px 300px at 12% 0%, rgba(255,255,255,.82), transparent 64%),
    repeating-radial-gradient(circle at 86% 34%, rgba(124,58,237,.07) 0 1px, transparent 1px 16px),
    repeating-radial-gradient(circle at 70% 80%, rgba(196,181,253,.08) 0 1px, transparent 1px 22px),
    linear-gradient(135deg,#faf8ff 0%,#ede9fe 52%,#e0e7ff 100%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(660px 300px at 12% 0%, rgba(124,58,237,.18), transparent 64%),
    repeating-radial-gradient(circle at 86% 34%, rgba(196,181,253,.07) 0 1px, transparent 1px 16px),
    repeating-radial-gradient(circle at 70% 80%, rgba(124,58,237,.12) 0 1px, transparent 1px 22px),
    linear-gradient(135deg,#120a24 0%,#171030 52%,#0d1526 100%);
}
.c60-hero-art .core{
  background:linear-gradient(145deg,#a78bfa,#6d28d9);
  box-shadow:0 18px 42px rgba(109,40,217,.34);
}
.c60-hero-art .chip b{color:#6d28d9;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#c4b5fd;}

.c60-metric.is-hero{
  background:linear-gradient(135deg,#7c3aed,#4c1d95 76%);
  box-shadow:0 16px 34px rgba(109,40,217,.3);
}
.c60-metric.is-hero .v{font-size:clamp(28px,3.4vw,42px);}

.c60-segbtn.on{color:#6d28d9;}
.c60-chip.on{background:rgba(124,58,237,.10);border-color:#7c3aed;color:#6d28d9;}
:root[data-theme="dark"] .c60-chip.on{color:#c4b5fd;border-color:#a78bfa;}

/* 说明清单 */
.pd-howto{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.pd-howto li{
  position:relative;
  padding:11px 13px 11px 40px;
  border-radius:12px;
  background:linear-gradient(90deg,rgba(124,58,237,.08),transparent 74%);
  border:1px solid rgba(124,58,237,.18);
  color:var(--ink2);
  font-size:13px;
  line-height:1.75;
}
.pd-howto li::before{
  content:"◎";
  position:absolute;left:13px;top:8px;
  font-size:16px;color:var(--a);
}
.pd-howto b{color:var(--ink);}

/* 镜架预设 */
.pd-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;}
.pd-presets-label{font-size:12px;color:var(--muted);font-weight:700;}

/* 示意区 */
.pd-viz{
  margin-top:16px;
  border:1px solid rgba(124,58,237,.24);
  border-radius:14px;
  background:
    repeating-radial-gradient(circle at 30% 20%, rgba(124,58,237,.05) 0 1px, transparent 1px 17px),
    var(--soft);
  padding:12px 14px 10px;
}
.pd-viz-h{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-bottom:8px;
  font-size:12px;font-weight:800;color:#6d28d9;
}
.pd-viz-h span:last-child{color:var(--muted);font-weight:600;}
.pd-viz svg{display:block;width:100%;height:auto;}

/* 适配评分条 */
.pd-score{
  display:flex;align-items:center;gap:12px;
  margin-top:10px;padding:9px 12px;
  border-radius:10px;
  background:rgba(124,58,237,.07);
  border:1px solid rgba(124,58,237,.16);
  font-size:12px;color:var(--ink2);
}
.pd-score b{color:#6d28d9;font-size:13px;}
:root[data-theme="dark"] .pd-score b{color:#c4b5fd;}
.pd-score-bar{
  flex:1;height:8px;border-radius:99px;overflow:hidden;
  background:rgba(124,58,237,.15);
}
.pd-score-bar span{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#a78bfa,#6d28d9);
  transition:width .35s ease;
}

#pdBars .c60-bar-row .bf{background:linear-gradient(90deg,#a78bfa,#6d28d9);}

@media (max-width:640px){
  .pd-viz{padding:10px 8px 8px;}
  .pd-presets{margin-top:10px;}
}