.nv-cloudflare-preview-auth .team-content,
.nv-cloudflare-preview-auth .ntf-content,
.nv-cloudflare-preview-auth .ntc-content,
.nv-cloudflare-preview-auth .int-content,
.nv-cloudflare-preview-auth .api-content {
  display: none !important;
}

.nv-cloudflare-preview-auth .dash-icon-btn__badge {
  display: none !important;
}

.nv-cloudflare-preview-auth.nv-platform-settings-live .wsp-preview {
  display: none;
}

.nv-cloudflare-preview-auth.nv-platform-settings-live .int-content {
  display: block !important;
}

.wsp-preview {
  display: none;
}

.nv-cloudflare-preview-auth .wsp-preview {
  display: block;
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: var(--dash-content-y, 32px) var(--dash-page-x, 32px) 80px;
}

.wsp-preview__surface {
  overflow: hidden;
  border-radius: var(--dash-radius-card, 20px);
  background: var(--dash-page-island-bg, var(--dash-card, #111216));
}

.wsp-preview__loading {
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--dash-muted, #8f9098) 12%, transparent);
}

.wsp-preview__skeleton {
  height: 72px;
  background:
    linear-gradient(90deg, transparent 20%, color-mix(in srgb, white 7%, transparent) 48%, transparent 76%),
    var(--dash-card, #111216);
  background-size: 220% 100%;
  animation: wsp-preview-shimmer 1.4s linear infinite;
}

.wsp-preview__content[hidden],
.wsp-preview__loading[hidden] { display: none; }

.wsp-preview__section + .wsp-preview__section {
  border-top: 1px solid color-mix(in srgb, var(--dash-muted, #8f9098) 14%, transparent);
}

.wsp-preview__section-head { padding: 24px 24px 10px; }

.wsp-preview__section-title {
  margin: 0;
  color: var(--dash-text, #f5f5f6);
  font: 600 16px/1.4 Inter, sans-serif;
}

.wsp-preview__rows { margin: 0; }

.wsp-preview__row {
  display: grid;
  grid-template-columns: minmax(160px, .65fr) minmax(0, 1.35fr);
  gap: 24px;
  align-items: start;
  min-height: 64px;
  padding: 20px 24px;
}

.wsp-preview__row + .wsp-preview__row {
  border-top: 1px solid color-mix(in srgb, var(--dash-muted, #8f9098) 10%, transparent);
}

.wsp-preview__label,
.wsp-preview__value {
  margin: 0;
  overflow-wrap: anywhere;
  font: 400 14px/1.5 Inter, sans-serif;
}

.wsp-preview__label { color: var(--dash-muted, #8f9098); }
.wsp-preview__value { color: var(--dash-text, #f5f5f6); text-align: right; }

.wsp-preview__error {
  margin: 0;
  padding: 28px 24px;
  color: var(--dash-text, #f5f5f6);
  font: 500 15px/1.5 Inter, sans-serif;
}

.wsp-preview__section--plans { padding-bottom: 24px; }

.wsp-preview__plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 24px;
}

.wsp-preview__plan {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 250px;
  padding: 22px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--dash-card, #111216) 84%, white 16%);
}

.wsp-preview__plan-name,
.wsp-preview__plan-description,
.wsp-preview__plan-price { margin: 0; }

.wsp-preview__plan-name {
  color: var(--dash-text, #f5f5f6);
  font: 600 20px/1.25 Inter, sans-serif;
}

.wsp-preview__plan-description {
  min-height: 44px;
  color: var(--dash-muted, #8f9098);
  font: 400 14px/1.55 Inter, sans-serif;
}

.wsp-preview__plan-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--dash-muted, #8f9098);
}

.wsp-preview__plan-price strong {
  color: var(--dash-text, #f5f5f6);
  font: 600 36px/1 Inter, sans-serif;
  letter-spacing: -.04em;
}

.wsp-preview__plan-action {
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  border: 0;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111216;
  font: 600 14px/1 Inter, sans-serif;
  cursor: pointer;
}

.wsp-preview__plan-action:disabled {
  opacity: .48;
  cursor: default;
}

.wsp-preview__plan-action:not(:disabled):hover { background: #fff; }

@keyframes wsp-preview-shimmer { to { background-position: -120% 0; } }

@media (max-width: 720px) {
  .nv-cloudflare-preview-auth .wsp-preview { padding: 20px 16px 56px; }
  .wsp-preview__surface { border-radius: 20px; }
  .wsp-preview__row { grid-template-columns: 1fr; gap: 5px; padding: 17px 20px; }
  .wsp-preview__value { text-align: left; }
  .wsp-preview__plans { grid-template-columns: 1fr; padding: 0 20px; }
  .wsp-preview__plan { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .wsp-preview__skeleton { animation: none; }
}
