/* ================= AI 招聘成本计算器 ================= */
.calc-wrap{
  background:linear-gradient(150deg,#161233 0%,#241d4a 55%,#2e2456 100%);
  border-radius:26px;padding:38px 34px;color:#e8e6f5;
  box-shadow:0 30px 70px rgba(23,18,58,.28);
  position:relative;overflow:hidden;
}
.calc-wrap::after{
  content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;
  background:radial-gradient(circle,rgba(124,58,237,.38),transparent 68%);
  pointer-events:none;
}
.calc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px}
.calc-title{display:flex;align-items:center;gap:14px}
.calc-badge{
  width:42px;height:42px;border-radius:13px;flex:none;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;color:#fff;
  box-shadow:0 8px 20px rgba(124,58,237,.4);
}
.calc-head h3{font-size:23px;font-weight:700;color:#fff;line-height:1.3}
.calc-head p{font-size:14px;color:#a9a3cc;margin-top:4px}
.calc-reset{
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);
  color:#cfc9e8;font-size:13px;font-weight:600;padding:9px 16px;border-radius:10px;
  cursor:pointer;font-family:inherit;transition:background .2s;white-space:nowrap;
}
.calc-reset:hover{background:rgba(255,255,255,.14)}

.calc-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:26px;position:relative;z-index:1}
.calc-panel h4{
  font-size:16px;font-weight:700;color:#fff;margin-bottom:18px;
  display:flex;align-items:center;gap:8px;
}
.calc-panel h4::before{content:"";width:7px;height:7px;border-radius:50%;background:#8b7cf6;display:block}
.calc-field{margin-bottom:20px}
.calc-field-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.calc-field-top label{font-size:14px;color:#d5d0ea}
.calc-field-top .val{font-size:20px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-field-top .val small{font-size:13px;color:#9b95bd;margin-right:2px}
.calc-hint{font-size:12px;color:#8b86ab;margin-bottom:8px}

.calc-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;outline:none;
  background:linear-gradient(90deg,#7c3aed var(--p,50%),rgba(255,255,255,.14) var(--p,50%));}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:4px solid #7c3aed;cursor:pointer;
  box-shadow:0 3px 10px rgba(124,58,237,.55);transition:transform .15s;
}
.calc-range::-webkit-slider-thumb:hover{transform:scale(1.15)}
.calc-range::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid #7c3aed;cursor:pointer;
  box-shadow:0 3px 10px rgba(124,58,237,.55);
}

.calc-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc-card{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);
  border-radius:16px;padding:18px 18px 16px;
}
.calc-card .k{font-size:13px;color:#a9a3cc;margin-bottom:8px}
.calc-card .v{font-size:28px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.calc-card .s{font-size:12px;color:#8b86ab;margin-top:7px}
.calc-card.green .v{color:#4ade80}
.calc-card.amber .v{color:#fbbf24}
.calc-card.blue .v{color:#60a5fa}
.calc-card.violet{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.12)}
.calc-card.violet .v{color:#a78bfa}

.calc-compare{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc-compare .calc-card .v{font-size:26px}

/* 锁定的滑杆（固定值，不可调整） */
.calc-range:disabled{opacity:.5;cursor:not-allowed}
.calc-range:disabled::-webkit-slider-thumb{cursor:not-allowed;background:#d8d3ec;border-color:#6d5fc4;box-shadow:none;transform:none}
.calc-range:disabled::-moz-range-thumb{cursor:not-allowed;background:#d8d3ec;border-color:#6d5fc4;box-shadow:none}

.calc-conclusion{
  margin-top:18px;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.34);
  border-radius:16px;padding:18px 20px;
}
.calc-conclusion h5{font-size:13px;color:#c4b5fd;margin-bottom:8px;font-weight:700}
.calc-conclusion p{font-size:15px;line-height:1.85;color:#e4e0f5}

.calc-foot{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.calc-legend{font-size:12px;color:#8b86ab}
.calc-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(120deg,#7c3aed,#4f46e5);color:#fff;
  padding:12px 26px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none;
  box-shadow:0 10px 24px rgba(99,102,241,.35);transition:transform .2s,box-shadow .2s;
}
.calc-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(99,102,241,.45)}

/* 独立页面（calculator.html）时的页面级样式 */
.calc-page{background:linear-gradient(150deg,#161233 0%,#241d4a 55%,#2e2456 100%);padding:56px 0 72px}
.calc-page .calc-wrap{max-width:1100px;margin:0 auto}
.calc-page-head{text-align:center;max-width:640px;margin:0 auto 34px}
.calc-page-head h1{font-size:clamp(28px,3.6vw,40px);font-weight:700;color:#fff;margin-bottom:12px}
.calc-page-head p{font-size:16px;color:#b5afd4;line-height:1.8}

/* 内嵌模式（?embed=1）：去掉独立页面的导航、标题与页脚 */
body.is-embed .nav,
body.is-embed .calc-page-head,
body.is-embed .page-foot{display:none}
body.is-embed .calc-page{padding:22px 0;background:#fff}
body.is-embed .calc-wrap{border-radius:20px;box-shadow:none;border:1px solid #e7e3f5}
body.is-embed .calc-wrap::after{opacity:.6}

@media (max-width:900px){
  .calc-grid{grid-template-columns:1fr}
  .calc-cards,.calc-compare{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .calc-wrap{padding:26px 20px;border-radius:20px}
  .calc-cards,.calc-compare{grid-template-columns:1fr}
  .calc-head{flex-direction:column}
}