/* === NOVA VPS — BUILD-YOUR-SERVER CONFIGURATOR (additive) === */
/* Scoped entirely to .nv2-* classes; reads the page's own ALL_PLANS data.
   Sliders score every real plan and recommend the closest match. */

.nv2-wrap{margin:34px 0 26px;background:var(--nv-card,#11151c);border:1px solid var(--nv-border,rgba(148,163,184,.15));
  border-radius:16px;padding:26px;position:relative;overflow:hidden}
.nv2-wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#3b82f6,#22d3ee)}
.nv2-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.nv2-head h3{font-size:1.15rem;font-weight:800;color:var(--nv-text,#e2e8f0);margin:0}
.nv2-head .nv2-tag{font-size:.68rem;letter-spacing:.12em;color:#3b82f6;font-weight:800}
.nv2-grid{display:grid;grid-template-columns:1fr 280px;gap:26px}
@media (max-width:820px){.nv2-grid{grid-template-columns:1fr}}
.nv2-sliders{display:flex;flex-direction:column;gap:18px}
.nv2-row label{display:flex;justify-content:space-between;font-size:.85rem;color:var(--nv-text2,#94a3b8);
  font-weight:600;margin-bottom:8px}
.nv2-row label b{color:var(--nv-text,#e2e8f0);font-variant-numeric:tabular-nums}
input[type=range].nv2-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(90deg,#3b82f6 var(--nv2-fill,50%),rgba(148,163,184,.2) var(--nv2-fill,50%));
  outline:none;cursor:pointer}
input[type=range].nv2-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid #3b82f6;box-shadow:0 2px 10px rgba(59,130,246,.5);cursor:grab}
input[type=range].nv2-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;
  border:3px solid #3b82f6;box-shadow:0 2px 10px rgba(59,130,246,.5);cursor:grab}
.nv2-result{background:rgba(59,130,246,.07);border:1px solid rgba(59,130,246,.3);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;gap:8px}
.nv2-result .nv2-closest{font-size:.68rem;letter-spacing:.14em;color:#22d3ee;font-weight:800}
.nv2-result .nv2-name{font-size:1.6rem;font-weight:900;color:var(--nv-text,#e2e8f0);line-height:1}
.nv2-result .nv2-price{font-size:1.35rem;font-weight:800;color:#3b82f6}
.nv2-result .nv2-price small{font-size:.8rem;color:var(--nv-text2,#94a3b8);font-weight:600}
.nv2-specs{display:flex;flex-direction:column;gap:5px;font-size:.83rem;color:var(--nv-text2,#94a3b8)}
.nv2-specs b{color:var(--nv-text,#e2e8f0);font-weight:700}
.nv2-fit{font-size:.78rem;color:#22d3ee;font-weight:700}
.nv2-cta{margin-top:10px;padding:11px 16px;border-radius:10px;border:0;cursor:pointer;
  background:linear-gradient(90deg,#3b82f6,#22d3ee);color:#fff;font-weight:800;font-size:.9rem;
  transition:transform .15s,box-shadow .15s}
.nv2-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(59,130,246,.4)}
.nv2-loading{color:var(--nv-text2,#94a3b8);font-size:.85rem;padding:18px 0}

/* live latency badge patch (upgrades the hardcoded header chip) */
.nv2-lat{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.72rem;
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#22c55e;
  border-radius:99px;padding:3px 10px;margin-left:8px}
.nv2-lat .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:nv2-blink 1.6s infinite}
@keyframes nv2-blink{0%,100%{opacity:1}50%{opacity:.35}}

@media (prefers-reduced-motion: reduce){
  .nv2-lat .dot{animation:none}
  .nv2-cta{transition:none}
}