/* 设计报价计算器 —— 品红 · 色板母题 */
.c60{
  --a:#c026d3;
  --a2:#f0abfc;
  --a-soft:rgba(192,38,211,.10);
  --a-line:rgba(192,38,211,.26);
}

.c60-hero{
  background:
    radial-gradient(680px 300px at 14% 0%, rgba(255,255,255,.76), transparent 60%),
    linear-gradient(135deg,#fdf4ff 0%,#fae8ff 46%,#fce7f3 100%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(680px 300px at 14% 0%, rgba(192,38,211,.18), transparent 60%),
    linear-gradient(135deg,#23101f 0%,#2a1229 48%,#0e1626 100%);
}

/* hero：六格色板 */
.dq-art{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:190px;
}
.dq-palette{
  display:grid;
  grid-template-columns:repeat(3,58px);
  grid-template-rows:repeat(2,58px);
  gap:9px;
  transform:rotate(-3deg);
}
.dq-palette i{
  display:block;
  border-radius:13px;
  box-shadow:0 10px 22px rgba(88,28,135,.18), inset 0 0 0 1px rgba(255,255,255,.35);
}
.dq-swatch-label{
  font-size:11.5px;
  font-weight:900;
  letter-spacing:2.4px;
  color:#a21caf;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(192,38,211,.2);
  border-radius:999px;
  padding:4px 12px;
}
:root[data-theme="dark"] .dq-swatch-label{background:rgba(14,22,38,.8);color:#f0abfc;border-color:#1f2b3e;}

.c60-metric.is-hero{
  background:linear-gradient(135deg,#c026d3,#86198f 72%);
  box-shadow:0 16px 34px rgba(192,38,211,.27);
}
.c60-segbtn.on{color:#a21caf;}
.c60-chip.on{background:rgba(192,38,211,.11);border-color:#c026d3;color:#a21caf;}
.c60-bar-row .bf{background:linear-gradient(90deg,#f0abfc,#c026d3);}

/* 报价区间轨道 */
.dq-range{
  margin-top:18px;
  padding:14px 16px 12px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(192,38,211,.055),rgba(192,38,211,.015));
  border:1px dashed rgba(192,38,211,.24);
}
.dq-range-head{
  display:flex;justify-content:space-between;
  font-size:12px;font-weight:800;color:var(--ink2);
  margin-bottom:12px;
}
.dq-track{
  position:relative;
  height:12px;
  margin:26px 8px 6px;
  border-radius:999px;
  background:linear-gradient(90deg,#fae8ff,#f0abfc);
}
.dq-fill{
  position:absolute;left:0;top:0;height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#f0abfc,#c026d3);
  transition:width .55s cubic-bezier(.2,.7,.2,1);
}
.dq-mark{
  position:absolute;top:50%;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:26px;height:26px;
  border-radius:50%;
  background:#fff;
  border:2.5px solid #c026d3;
  color:#a21caf;
  font-size:10.5px;
  font-weight:900;
  box-shadow:0 4px 10px rgba(126,34,206,.18);
  transition:left .55s cubic-bezier(.2,.7,.2,1);
}
.dq-mark.low{border-color:#f0abfc;color:#a21caf;}
.dq-mark.mid{border-color:#c026d3;background:#c026d3;color:#fff;}
.dq-mark.high{border-color:#7e22ce;color:#6b21a8;}
.dq-scale{
  display:flex;justify-content:space-between;
  font-size:11.5px;font-weight:800;color:var(--muted);
  font-variant-numeric:tabular-nums;
  margin-top:6px;
}
:root[data-theme="dark"] .dq-range{background:rgba(192,38,211,.06);border-color:rgba(240,171,252,.22);}
:root[data-theme="dark"] .dq-mark{background:#101a2b;}
:root[data-theme="dark"] .dq-mark.low{color:#f0abfc;border-color:#f0abfc;}
:root[data-theme="dark"] .dq-mark.high{color:#e9d5ff;border-color:#a855f7;}
:root[data-theme="dark"] .dq-mark.mid{background:#c026d3;color:#fff;}
:root[data-theme="dark"] .dq-track{background:linear-gradient(90deg,#2a1229,#4a1d4d);}

@media (max-width:640px){
  .dq-palette{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:7px;}
  .dq-range{padding:12px 12px 10px;}
  .dq-mark{width:22px;height:22px;font-size:9.5px;}
}