.vs-sub {
  background: #14141d;
  border: 1px solid rgba(196,179,255,.14);
  border-radius: 18px;
  overflow: hidden;
}
.vs-sub__hdr { padding: 20px; border-bottom: 1px solid rgba(196,179,255,.10); }
.vs-sub__toprow { display: flex; align-items: center; justify-content: space-between; }
.vs-sub__pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,200,87,.12); color: #FFC857;
  border: 1px solid rgba(255,200,87,.28);
  font: 700 12px/1 'Inter', sans-serif;
  padding: 6px 12px; border-radius: 999px;
}
.vs-sub__pill svg { width: 12px; height: 12px; }
.vs-sub__pill.pill--pro {
  background: rgba(122,82,255,.15); color: #c4b3ff;
  border-color: rgba(122,82,255,.35);
}
.vs-sub__counter {
  font: 11px/1 'JetBrains Mono', monospace;
  color: #8e7ed0; letter-spacing: .1em;
}
.vs-sub__plan {
  font: 700 22px/1 'Archivo Black', sans-serif;
  letter-spacing: -0.01em; margin-top: 12px; color: #fff;
}
.vs-sub__desc { color: #8e7ed0; font-size: 12.5px; margin-top: 4px; }
.vs-sub__progress { margin-top: 14px; }
.vs-sub__progress-label {
  display: flex; justify-content: space-between;
  font: 10px/1 'JetBrains Mono', monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: #8e7ed0; margin-bottom: 6px;
}
.vs-sub__bar {
  height: 6px; background: rgba(196,179,255,.10);
  border-radius: 999px; overflow: hidden;
}
.vs-sub__fill {
  height: 100%;
  background: linear-gradient(90deg, #8c66ff, #c4b3ff);
  border-radius: 999px;
}
.vs-sub__body { padding: 18px 20px; }
.vs-sub__rows { display: flex; flex-direction: column; }
.vs-sub__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-top: 1px solid rgba(196,179,255,.06);
  font-size: 14px;
}
.vs-sub__row:first-child { border-top: none; padding-top: 4px; }
.vs-sub__row .k { color: #8e7ed0; }
.vs-sub__row .v { color: #fff; font-weight: 600; }
.vs-sub__row .v.ok { color: #3DDC97; }
.vs-sub__row .v.warn { color: #FFC857; }
.vs-sub__row .v.mono { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.vs-sub__actions { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.vs-sub__actions .vs-btn { width: 100%; }

/* Boutons vs-btn */
.vs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 10px;
  font: 600 14px/1 'Inter', sans-serif;
  cursor: pointer; text-decoration: none;
  transition: opacity .18s, transform .12s;
  border: none;
}
.vs-btn:active { transform: translateY(1px); }
.vs-btn--primary {
  background: linear-gradient(135deg, #764ee5, #5c34cc);
  color: #fff;
  box-shadow: 0 4px 14px rgba(118,78,229,.35);
}
.vs-btn--primary:hover { opacity: .88; }
.vs-btn--ghost {
  background: transparent;
  color: #c4b3ff;
  border: 1px solid rgba(196,179,255,.25);
}
.vs-btn--ghost:hover { background: rgba(196,179,255,.06); }