/* 51 · 美瞳直径怎么选 —— 雾紫「镜片同心环」：圆环形母题、参数数字、双栏核对 */
.clp{
  --ink:#2f2540; --sub:#7d7191; --card:#fffdfd; --line:#e7dff0;
  --pri:#8054c6; --pri-soft:#f2ecfb; --ok:#3b8f7a; --warn:#bd813a; --bad:#c4567f; --bg:#faf7fd;
  --cl-font:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --cl-num:"Segoe UI Variable Text","Bahnschrift",ui-monospace,monospace;
  color:var(--ink);background:var(--bg);font-family:var(--cl-font);
  font-size:14.5px;line-height:1.8;padding:28px 16px 62px;
}
:root[data-theme="dark"] .clp{
  --ink:#f0e9f8; --sub:#b3a5c7; --card:#241d31; --line:#3d3252;
  --pri:#c39df2; --pri-soft:#342747; --ok:#86d6bd; --warn:#e9bf7d; --bad:#f39abb; --bg:#17121f;
}
.clp-wrap{max-width:1120px;margin:0 auto;}
.clp *{box-sizing:border-box;}
.clp h1,.clp h2,.clp h3{margin:0;}
.clp b{color:var(--pri);font-weight:700;}
.clp-hero{
  display:grid;grid-template-columns:minmax(0,1.45fr) 230px;gap:24px;align-items:center;
  background:radial-gradient(circle at 88% 30%,var(--pri-soft),var(--card) 62%);
  border:1px solid var(--line);border-radius:24px;padding:30px 34px;
  box-shadow:0 12px 30px rgba(128,84,198,.09);
}
.clp-badge{font-size:12px;font-weight:700;letter-spacing:1.1px;color:var(--pri);}
.clp-hero h1{font-size:32px;line-height:1.32;font-weight:780;margin:12px 0 10px;letter-spacing:-.3px;}
.clp-hero h1 em{display:block;font-style:normal;font-size:16px;font-weight:600;color:var(--sub);margin-top:6px;}
.clp-hero p{margin:0;max-width:730px;line-height:1.9;}
.clp-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.clp-hero-meta span{font-size:11.5px;font-weight:650;color:var(--pri);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 12px;}
.clp-hero-ring{display:flex;flex-direction:column;align-items:center;gap:4px;}
.clp-hero-ring>span{font-size:11px;color:var(--sub);}
.clp-ring-dia{fill:rgba(128,84,198,.10);stroke:var(--pri);stroke-width:2;}
.clp-ring-gdia{fill:rgba(128,84,198,.20);stroke:var(--pri);stroke-width:1.5;}
.clp-ring-eye{fill:#f6f0ea;stroke:#d3c4b9;stroke-width:1.5;}
.clp-ring-pupil{fill:#332b3c;}
.clp-ring-axis{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4;}
.clp-card,.clp-panel,.clp-empty{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 26px;margin-top:18px;box-shadow:0 2px 12px rgba(80,50,120,.05);}
.clp-card-h,.clp-h2{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:18px;}
.clp-card-h h2{font-size:19px;font-weight:750;}
.clp-h2{font-size:17px;font-weight:750;}
.clp-card-tip,.clp-h2 span{font-size:12px;color:var(--sub);font-weight:500;}
.clp-form{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.clp-f{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:650;}
.clp-f em{font-style:normal;font-size:11px;color:var(--sub);font-weight:400;line-height:1.55;}
.clp-num{display:flex;align-items:center;gap:8px;}
.clp-num input,.clp-ta{width:100%;font:600 15px var(--cl-num);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:none;transition:border-color .16s,box-shadow .16s;}
.clp-num i{font-style:normal;font-size:11.5px;color:var(--sub);}
.clp-num input:hover,.clp-ta:hover{border-color:var(--pri);}
.clp-num input:focus,.clp-ta:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft);}
.clp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.clp-btn{font:650 13.5px var(--cl-font);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 19px;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s,background .15s;}
.clp-btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--pri);box-shadow:0 6px 16px rgba(128,84,198,.16);}
.clp-btn:disabled{opacity:.5;cursor:not-allowed;}
.clp-btn-main{background:var(--pri);border-color:var(--pri);color:#fff;}
.clp-btn-ghost{background:transparent;color:var(--sub);}
.clp-msg{font-size:12.5px;color:var(--sub);margin:12px 0 0;min-height:18px;}
.clp-empty{text-align:center;color:var(--sub);padding:42px 20px;}
.clp-empty-ic{display:block;font-size:30px;}
.clp-empty b{display:block;color:var(--ink);font-size:16px;}
.clp-empty em{display:block;font-style:normal;font-size:13px;margin-top:6px;}
.clp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px;}
.clp-kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:3px;}
.clp-kpi.is-hero{background:linear-gradient(135deg,var(--pri),#a277dc);border-color:transparent;color:#fff;}
.clp-kpi .k{font-size:12px;color:var(--sub);}
.clp-kpi.is-hero .k,.clp-kpi.is-hero .s{color:#f1e6ff;}
.clp-kpi .v{font:800 26px/1.25 var(--cl-num);}
.clp-kpi-txt{font-size:18px!important;font-family:var(--cl-font)!important;}
.clp-kpi .s{font-size:11px;color:var(--sub);}
.clp-visual-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:center;}
.clp-svg svg{width:100%;height:auto;}
.clp-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.clp-legend li{display:flex;align-items:center;gap:10px;font-size:13px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 13px;}
.clp-legend i{width:14px;height:14px;border-radius:50%;flex:none;}
.clp-legend small{color:var(--sub);font-size:11.5px;margin-left:auto;}
.clp-tw{overflow:auto;}
.clp-tb{width:100%;border-collapse:collapse;font-size:13px;min-width:600px;}
.clp-tb th,.clp-tb td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.clp-tb th{background:var(--bg);font-size:11.5px;color:var(--sub);}
.clp-tb tbody tr:hover{background:var(--pri-soft);}
.clp-reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.clp-reasons div{background:var(--bg);border-radius:10px;border-left:3px solid var(--warn);padding:10px 13px;font-size:12.5px;line-height:1.7;}
.clp-ta{min-height:98px;resize:vertical;line-height:1.7;}
.clp-final{margin-top:20px;}
@media (max-width:860px){
  .clp{padding:18px 12px 48px;}
  .clp-hero{grid-template-columns:1fr;padding:22px 18px;}
  .clp-hero-ring{display:none;}
  .clp-hero h1{font-size:26px;}
  .clp-form,.clp-kpis,.clp-visual-grid,.clp-reasons{grid-template-columns:1fr;}
  .clp-card,.clp-panel{padding:18px 16px;}
  .clp-card-h,.clp-h2{flex-direction:column;gap:3px;}
}