.nv-cloudflare-preview-auth .set-content,
.nv-cloudflare-preview-auth .prof-content,
.nv-cloudflare-preview-auth .sec-content {
  display: none !important;
}

.acct-settings-preview {
  display: none;
}

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

.nv-cloudflare-preview-auth.nv-security-live .acct-settings-preview {
  display: none;
}

.nv-cloudflare-preview-auth.nv-security-live .sec-content {
  display: block !important;
}

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

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

.acct-settings-preview__head {
  display: none;
  gap: 10px;
  margin-bottom: 30px;
}

.acct-settings-preview__eyebrow {
  margin: 0;
  color: var(--dash-muted, #8f9098);
  font: 600 12px/1.4 Inter, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.acct-settings-preview__title {
  margin: 0;
  color: var(--dash-text, #f5f5f6);
  font: 600 clamp(32px, 4vw, 48px)/1.08 Inter, sans-serif;
  letter-spacing: -.04em;
}

.acct-settings-preview__intro {
  max-width: 680px;
  margin: 0;
  color: var(--dash-muted, #8f9098);
  font: 400 15px/1.6 Inter, sans-serif;
}

.acct-settings-preview__tabs {
  display: none;
  gap: 6px;
  margin: 0 0 22px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.acct-settings-preview__tabs::-webkit-scrollbar {
  display: none;
}

.acct-settings-preview__tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--dash-muted, #8f9098);
  font: 500 14px/20px Inter, sans-serif;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, transform 120ms ease;
}

.acct-settings-preview__tab:hover,
.acct-settings-preview__tab:focus-visible {
  color: var(--dash-text, #f5f5f6);
  background: var(--dash-card, #111216);
  outline: none;
}

.acct-settings-preview__tab:active {
  transform: scale(.98);
}

.acct-settings-preview__tab[aria-current="page"] {
  color: var(--dash-text, #f5f5f6);
  background: var(--dash-card, #111216);
}

.acct-settings-preview__surface {
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.acct-settings-preview__content--profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 376px);
  gap: 24px;
  align-items: start;
}

.acct-settings-preview__profile-card,
.acct-settings-preview__content--profile > .acct-settings-preview__section {
  box-sizing: border-box;
  overflow: visible;
  border-radius: var(--dash-radius-card, 20px);
  background: var(--dash-card, #111216);
}

.acct-settings-preview__profile-card { padding: 24px; }

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

.acct-settings-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: acct-settings-shimmer 1.4s linear infinite;
}

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

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

.acct-settings-preview__avatar-section {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px 20px;
  align-items: start;
  padding: 0;
}

.acct-settings-preview__name-section {
  display: block;
  padding: 0;
  border-top: 0;
}

.acct-settings-preview__name-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.acct-settings-preview__field {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  color: var(--dash-text, #f5f5f6);
  font: 500 12px/18px Inter, sans-serif;
}

.acct-settings-preview__field small {
  color: var(--dash-muted, #8f9098);
  font: 400 12px/18px Inter, sans-serif;
}

.acct-settings-preview__name-input {
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: var(--color-surface-inset, var(--color-well, rgba(255,255,255,.06)));
  color: var(--dash-text, #f5f5f6);
  font: 400 16px/1.2 Inter, sans-serif;
  outline: 0;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.acct-settings-preview__name-input:hover {
  background: var(--color-surface-inset-hover, var(--color-well-hover, rgba(255,255,255,.1)));
}

.acct-settings-preview__name-input[readonly] {
  background: var(--color-surface-inset, var(--color-well, rgba(255,255,255,.06)));
  color: var(--dash-muted, #8f9098);
}

.acct-settings-preview__name-input:focus-visible {
  background: var(--color-surface-inset-hover, var(--color-well-hover, rgba(255,255,255,.1)));
  box-shadow: 0 0 0 2px var(--color-focus-ring, var(--dash-border-strong, currentColor));
}

.acct-settings-preview__name-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}

.acct-settings-preview__avatar {
  position: relative;
  display: grid;
  grid-row: 1 / span 2;
  width: 80px;
  height: 80px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--dash-profile-avatar-bg);
  color: var(--dash-profile-avatar-fg);
  font: 400 36px/1 'Instrument Serif', serif;
}

.acct-settings-preview__avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--dash-profile-avatar-ring);
  pointer-events: none;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.acct-settings-preview__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acct-settings-preview__avatar:has(img) { background: transparent; }
.acct-settings-preview__avatar:has(img)::before { content: none; }

.acct-settings-preview__avatar-copy h2,
.acct-settings-preview__avatar-copy p,
.acct-settings-preview__avatar-status {
  margin: 0;
}

.acct-settings-preview__avatar-copy h2 {
  color: var(--dash-text, #f5f5f6);
  font: 600 15px/1.4 Inter, sans-serif;
}

.acct-settings-preview__avatar-copy p {
  max-width: 500px;
  margin-top: 5px;
  color: var(--dash-muted, #8f9098);
  font: 400 13px/1.5 Inter, sans-serif;
}

.acct-settings-preview__avatar-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  justify-content: flex-start;
  gap: 8px;
  max-width: 250px;
}

.acct-settings-preview__avatar-action {
  min-height: 40px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--dash-text, #f5f5f6);
  color: var(--dash-bg, #090a0c);
  font: 600 13px/20px Inter, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 140ms ease, transform 120ms ease;
}

.acct-settings-preview__avatar-action--quiet {
  background: var(--color-well, rgba(255, 255, 255, .08));
  color: var(--dash-text, #f5f5f6);
}

.acct-settings-preview__avatar-action:hover { opacity: .84; }
.acct-settings-preview__avatar-action:active { transform: scale(.96); }
.acct-settings-preview__avatar-action:disabled { cursor: wait; opacity: .5; }
.acct-settings-preview__avatar-action:focus-visible {
  outline: 2px solid var(--dash-text, #f5f5f6);
  outline-offset: 2px;
}

.acct-settings-preview__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.acct-settings-preview__avatar-status {
  flex-basis: 100%;
  min-height: 18px;
  color: var(--dash-muted, #8f9098);
  font: 400 12px/1.5 Inter, sans-serif;
  text-align: right;
}

.acct-settings-preview__avatar-status.is-error { color: var(--dash-danger, #f87171); }

.acct-settings-preview__section-head {
  min-height: 32px;
  padding: 24px 24px 20px;
}

.acct-settings-preview__profile-card > .acct-settings-preview__section-head { padding: 0 0 20px; }

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

.acct-settings-preview__rows {
  margin: 0;
}

.acct-settings-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;
}

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

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

.acct-settings-preview__label {
  color: var(--dash-muted, #8f9098);
}

.acct-settings-preview__value {
  color: var(--dash-text, #f5f5f6);
  text-align: right;
}

/* Account facts use the same record-card contract as the design-system catalog. */
.acct-settings-preview__section--record {
  display: grid;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  padding: 20px 22px;
  container: acct-settings-record / inline-size;
}

.acct-settings-preview__section--record .acct-settings-preview__section-head {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
}

.acct-settings-preview__copy-all {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--dash-control-bg, rgba(255, 255, 255, .06));
  color: var(--dash-text, #f5f5f6);
  font: 600 12px/1 Inter, sans-serif;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.acct-settings-preview__copy-all:hover {
  background: var(--color-well-hover, rgba(255, 255, 255, .1));
}

.acct-settings-preview__section--record .acct-settings-preview__rows {
  display: grid;
}

.acct-settings-preview__section--record .acct-settings-preview__row {
  grid-template-columns: 32px minmax(5.5rem, .8fr) minmax(0, 1.2fr) 32px;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 0;
}

.acct-settings-preview__section--record .acct-settings-preview__row + .acct-settings-preview__row {
  border-top: 0;
}

.acct-settings-preview__record-icon,
.acct-settings-preview__copy {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--dash-muted, #8f9098);
}

.acct-settings-preview__record-icon {
  background: var(--dash-control-bg, rgba(255, 255, 255, .06));
}

.acct-settings-preview__record-icon svg,
.acct-settings-preview__copy svg {
  width: 14px;
  height: 14px;
}

.acct-settings-preview__copy {
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.acct-settings-preview__copy:hover {
  background: var(--dash-control-bg, rgba(255, 255, 255, .06));
  color: var(--dash-text, #f5f5f6);
}

.acct-settings-preview__section--record :is(button, a):focus-visible {
  outline: 2px solid var(--dash-text, #f5f5f6);
  outline-offset: 2px;
}

@container acct-settings-record (max-width: 420px) {
  .acct-settings-preview__section--record .acct-settings-preview__row {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) 32px;
  }

  .acct-settings-preview__record-icon { display: none; }
}

.acct-settings-preview__note {
  display: none;
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--dash-card, #111216) 82%, transparent);
  color: var(--dash-muted, #8f9098);
  font: 400 14px/1.55 Inter, sans-serif;
}

.acct-settings-preview__note strong {
  color: var(--dash-text, #f5f5f6);
  font-weight: 600;
}

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

@keyframes acct-settings-shimmer {
  to { background-position: -120% 0; }
}

@media (max-width: 720px) {
  .nv-cloudflare-preview-auth .acct-settings-preview {
    padding: 28px 16px 56px;
  }

  .acct-settings-preview__head {
    margin-bottom: 22px;
  }

  .acct-settings-preview__tabs {
    margin-inline: -4px;
  }

  .acct-settings-preview__surface {
    border-radius: 20px;
  }

  .acct-settings-preview__content--profile {
    grid-template-columns: minmax(0, 1fr);
  }

  .acct-settings-preview__row {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 17px 20px;
  }

  .acct-settings-preview__avatar-section {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 20px;
  }

  .acct-settings-preview__avatar {
    grid-row: auto;
    width: 56px;
    height: 56px;
    font-size: 17px;
  }

  .acct-settings-preview__avatar-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: none;
  }

  .acct-settings-preview__avatar-status { text-align: left; }

  .acct-settings-preview__name-section {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px;
  }

  .acct-settings-preview__name-form {
    grid-template-columns: 1fr;
  }

  .acct-settings-preview__name-form .acct-settings-preview__avatar-action {
    justify-self: start;
  }

  .acct-settings-preview__value {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acct-settings-preview__skeleton { animation: none; }
  .acct-settings-preview__tab { transition: none; }
}
