body:is(.dash-data-state--empty, .dash-data-state--zero) {
  --nv-zero-island-bg: var(--dash-page-island-bg, var(--dash-card, #111216));
  --nv-zero-text-primary: var(--dash-text, var(--text-primary, #f4f4f5));
  --nv-zero-text-secondary: var(--dash-text-muted, var(--text-secondary, #a1a1aa));
  --nv-zero-icon-bg: var(--surface-hover, rgba(255, 255, 255, 0.055));
  --nv-zero-secondary-action-bg: var(--surface-hover, rgba(255, 255, 255, 0.055));
}

html:is(.light-theme, .light) body.dash-page:is(.dash-data-state--empty, .dash-data-state--zero) {
  --nv-zero-island-bg: #ffffff;
  --nv-zero-text-primary: #202124;
  --nv-zero-text-secondary: #5f6368;
  --nv-zero-icon-bg: #f3f4f6;
  --nv-zero-secondary-action-bg: #f3f4f6;
}

.nv-product-empty {
  --nv-zero-island-pad-block: clamp(56px, 8vw, 80px);
  --nv-zero-island-bg: var(--dash-page-island-bg, var(--dash-card, #111216));
  --nv-zero-text-primary: var(--dash-text, var(--text-primary, #f4f4f5));
  --nv-zero-text-secondary: var(--dash-text-muted, var(--text-secondary, #a1a1aa));
  --nv-zero-icon-bg: var(--surface-hover, rgba(255, 255, 255, 0.055));
  --nv-zero-secondary-action-bg: var(--surface-hover, rgba(255, 255, 255, 0.055));
  display: grid;
  min-block-size: 0;
  margin-block-start: var(--spacing-xl, 24px);
  padding: var(--nv-zero-island-pad-block) 24px;
  place-items: center;
  border-radius: var(--dash-island-radius, 28px);
  background: var(--nv-zero-island-bg, var(--dash-page-island-bg, var(--dash-card, #111216)));
}

html:is(.light-theme, .light) .nv-product-empty {
  --nv-zero-island-bg: #ffffff;
  --nv-zero-text-primary: #202124;
  --nv-zero-text-secondary: #5f6368;
  --nv-zero-icon-bg: #f3f4f6;
  --nv-zero-secondary-action-bg: #f3f4f6;
}

body[data-local-test-data-state="current"] [data-cf-dashboard-first-value] {
  display: none !important;
}

body[data-local-test-data-state="empty"] .dash-first-value {
  padding-block: clamp(56px, 8vw, 80px) !important;
  background: var(--nv-zero-island-bg, var(--dash-page-island-bg, var(--dash-card, #111216)));
  color: var(--nv-zero-text-secondary, var(--dash-text-muted, #a1a1aa));
}

body[data-local-test-data-state="empty"] .dash-first-value h2 {
  color: var(--nv-zero-text-primary, var(--dash-text, #f4f4f5));
}

body[data-local-test-data-state="empty"] .dash-first-value p {
  color: var(--nv-zero-text-secondary, var(--dash-text-muted, #a1a1aa));
}

body[data-local-test-data-state="empty"] .dash-first-value__copy { gap: 0; }
body[data-local-test-data-state="empty"] .dash-first-value__copy > h2 { margin-block-start: 20px; }
body[data-local-test-data-state="empty"] .dash-first-value__copy > p { margin-block-start: 10px; }
body[data-local-test-data-state="empty"] .dash-first-value__copy > .nv-product-empty__action { margin-block-start: 22px; }

body.dash-data-state--zero .dash-main > :is(main, [class$="-content"], [class*="-content "]),
body.dash-data-state--empty .dash-main > :is(main, [class$="-content"], [class*="-content "]) {
  padding-block-start: 0 !important;
}

body.dash-data-state--zero .nv-product-empty,
body.dash-data-state--empty .nv-product-empty {
  margin-block-start: 0;
}

/* No source means no meaningful aggregate. This also wins over late data
   renderers that reveal the summary after the empty state was mounted. */
body.dash-data-state--empty .tx-summary,
body.dash-data-state--empty .acc-summary {
  display: none !important;
}

/* Notifications render from DS content after load; keep its stats and feed
   hidden in empty/zero so they never flash before the empty island mounts. */
body.ntc-page:is(.dash-data-state--empty, .dash-data-state--zero) :is(.nv-ntf__stats, .nv-ntf__layout) {
  display: none !important;
}

.nv-product-empty__content {
  display: grid;
  max-inline-size: 760px;
  justify-items: center;
  gap: 0;
  text-align: center;
}

.nv-product-empty__icon {
  display: grid;
  inline-size: 48px;
  block-size: 48px;
  margin-block-end: 0;
  place-items: center;
  border-radius: 16px;
  background: var(--nv-zero-icon-bg, var(--surface-hover, rgba(255, 255, 255, 0.055)));
  color: var(--nv-zero-text-secondary, var(--text-secondary, #a1a1aa));
}

.nv-product-empty__icon svg {
  inline-size: 22px;
  block-size: 22px;
}

.nv-product-empty h2,
.nv-product-empty p { margin: 0; }

.nv-product-empty h2 {
  margin-block-start: 20px;
  color: var(--nv-zero-text-primary, var(--text-primary, #f4f4f5));
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.nv-product-empty p {
  max-inline-size: 480px;
  margin-block-start: 10px;
  color: var(--nv-zero-text-secondary, var(--text-secondary, #a1a1aa));
  font-size: var(--nv-type-body-size);
  letter-spacing: var(--nv-type-body-tracking);
  line-height: var(--nv-type-body-line);
}

.nv-product-empty__action {
  display: inline-flex;
  min-block-size: 44px;
  margin-block-start: 22px;
  padding-inline: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  background: var(--text-primary, #f4f4f5);
  color: var(--page-bg, #090909);
  font: inherit;
  font-size: var(--nv-type-subhead-size);
  letter-spacing: var(--nv-type-subhead-tracking);
  font-weight: var(--nv-type-weight-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.nv-product-empty .nv-product-empty__action { margin-block-start: 22px; }

.nv-product-empty__action:hover { opacity: 0.88; }
.nv-product-empty__action:active { transform: scale(0.96); }
.nv-product-empty__action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.nv-product-empty__actions {
  display: flex;
  margin-block-start: 22px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.nv-product-empty__actions .nv-product-empty__action { margin-block-start: 0; }

.nv-product-empty__action--secondary {
  background: var(--nv-zero-secondary-action-bg, var(--surface-hover, rgba(255, 255, 255, 0.055)));
  color: var(--nv-zero-text-primary, var(--text-primary, #f4f4f5));
}

.nv-detail-empty-state {
  min-block-size: 0;
  padding-block: 88px;
  align-content: center;
  justify-items: center;
  gap: 12px;
  place-content: center;
  text-align: center;
}

.nv-detail-empty-state h1,
.nv-detail-empty-state p { margin: 0; }

.nv-detail-empty-state h1 { color: var(--nv-zero-text-primary, var(--text-primary, #f4f4f5)); }
.nv-detail-empty-state p { color: var(--nv-zero-text-secondary, var(--text-secondary, #a1a1aa)); }

.nv-detail-empty-state h1 { font-size: 16px; }
.nv-detail-empty-state p { max-inline-size: 46ch; font-size: var(--nv-type-callout-size); letter-spacing: var(--nv-type-callout-tracking); line-height: var(--nv-type-callout-line); }

.nv-detail-empty-state a {
  margin-block-start: 6px;
}

.dash-data-state--zero .nla__empty,
.dash-data-state--empty .nla__empty {
  padding: clamp(56px, 8vw, 80px) 24px;
}

.dash-data-state--zero .nla__empty-icon,
.dash-data-state--empty .nla__empty-icon {
  inline-size: 48px;
  block-size: 48px;
  margin-block-end: 20px;
  border-radius: 16px;
  background: var(--nv-zero-icon-bg, var(--surface-hover, rgba(255, 255, 255, 0.055)));
  color: var(--nv-zero-text-secondary, var(--dash-muted, #8f9098));
}

.dash-data-state--zero .nla__empty-icon svg,
.dash-data-state--empty .nla__empty-icon svg { inline-size: 22px; block-size: 22px; }

.dash-data-state--zero .nla__empty h3,
.dash-data-state--empty .nla__empty h3 {
  color: var(--nv-zero-text-primary, var(--dash-text, #f4f4f5));
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.dash-data-state--zero .nla__empty p,
.dash-data-state--empty .nla__empty p {
  margin-block-start: 10px;
  color: var(--nv-zero-text-secondary, var(--dash-text-muted, #a1a1aa));
  font-size: var(--nv-type-body-size);
  letter-spacing: var(--nv-type-body-tracking);
  line-height: var(--nv-type-body-line);
}

.dash-data-state--zero .nla__hub--zero,
.dash-data-state--empty .nla__hub--zero {
  grid-template-columns: minmax(0, 1fr);
  inline-size: 100%;
  block-size: auto;
  margin-block-start: 0;
  align-self: start;
  background: transparent;
}

body.nla-page.dash-data-state--zero .dash-main > main.nla,
body.nla-page.dash-data-state--empty .dash-main > main.nla {
  inline-size: min(
    calc(100% - var(--dash-workspace-margin-right) - var(--dash-workspace-margin-right)),
    var(--dash-main-max-width)
  );
  margin-inline: auto;
  padding-block-start: 0;
  padding-inline: 0;
}

.dash-data-state--zero .nla__hub--zero .nla__workspace,
.dash-data-state--empty .nla__hub--zero .nla__workspace {
  inline-size: 100%;
  min-block-size: 0;
  margin: 0;
  border-radius: var(--dash-island-radius, 28px);
  background: var(--nv-zero-island-bg, var(--dash-page-island-bg, var(--dash-card, #111216)));
}

.dash-data-state--zero .nla__hub--zero .nla__empty,
.dash-data-state--empty .nla__hub--zero .nla__empty {
  inline-size: 100%;
  max-inline-size: none;
  block-size: auto;
}

.nla__empty-actions {
  display: flex;
  margin-block-start: 22px;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.nla__empty-action {
  display: inline-flex;
  min-block-size: 44px;
  padding-inline: 18px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--surface-hover, rgba(255, 255, 255, 0.055));
  color: var(--text-primary, #f4f4f5);
  font: inherit;
  font-size: var(--nv-type-subhead-size);
  letter-spacing: var(--nv-type-subhead-tracking);
  font-weight: var(--nv-type-weight-semibold);
  cursor: pointer;
  transition: opacity 140ms ease, transform 140ms ease, background-color 140ms ease;
}

.nla__empty-action--primary {
  background: var(--text-primary, #f4f4f5);
  color: var(--page-bg, #090909);
}

.nla__empty-action:hover { opacity: 0.86; }
.nla__empty-action:active { transform: scale(0.96); }
.nla__empty-action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .nv-product-empty {
    padding: 64px 24px;
  }

  .nv-detail-empty-state,
  .dash-data-state--zero .nla__empty,
  .dash-data-state--empty .nla__empty { padding-block: 64px; }

  .dash-data-state--zero .nla__hub--zero,
  .dash-data-state--empty .nla__hub--zero { inline-size: 100%; }
}

@media (max-width: 600px) {
  .nv-product-empty {
    padding: 48px 20px;
    border-radius: var(--radius-xl, 24px);
  }

  .nv-detail-empty-state,
  .dash-data-state--zero .nla__empty,
  .dash-data-state--empty .nla__empty { padding-block: 48px; }

  .nla__empty-actions {
    inline-size: min(100%, 280px);
    flex-direction: column;
  }

  .nla__empty-action,
  .nv-product-empty__actions,
  .nv-product-empty__actions .nv-product-empty__action { inline-size: 100%; }

  .nv-product-empty__actions {
    max-inline-size: 280px;
    flex-direction: column;
  }
}

/* New-account settings use one truthful, quiet surface across every settings page. */
.nv-settings-zero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 320px);
  gap: var(--dash-gap, 24px);
  align-items: start;
  inline-size: 100%;
}

.nv-settings-zero--single { grid-template-columns: minmax(0, 1fr); }

.nv-settings-zero__main,
.nv-settings-zero__aside {
  display: grid;
  gap: var(--dash-gap, 24px);
  min-inline-size: 0;
}

.nv-settings-zero__aside {
  position: sticky;
  /* The sticky threshold must not become an initial layout offset. */
  inset-block-start: 0;
}

/* General settings keeps its native columns in the new-account state. */
body:is(.dash-data-state--empty, .dash-data-state--zero) .set-aside {
  top: 0;
  inset-block-start: 0;
}

.nv-settings-zero__card {
  min-inline-size: 0;
  padding: 24px;
  border: 0;
  border-radius: var(--dash-radius-card, 24px);
  background: var(--nv-zero-island-bg, var(--dash-page-island-bg, var(--dash-card, #111216)));
  box-shadow: none;
}

.nv-settings-zero__card--empty {
  --nv-zero-island-pad-block: 88px;
  padding: 0;
}

.nv-settings-zero__card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 20px;
}

.nv-settings-zero__card-head h2,
.nv-settings-zero__empty h2 {
  margin: 0;
  color: var(--nv-zero-text-primary, var(--dash-text, #f4f4f5));
  font-size: var(--nv-type-title-3-size);
  letter-spacing: var(--nv-type-title-3-tracking);
  font-weight: var(--nv-type-title-3-weight);
  line-height: var(--nv-type-title-3-line);
}

.nv-settings-zero__card-head p,
.nv-settings-zero__empty p {
  margin: 8px 0 0;
  max-inline-size: 620px;
  color: var(--nv-zero-text-secondary, var(--dash-text-muted, #8f9098));
  font-size: var(--nv-type-callout-size);
  letter-spacing: var(--nv-type-callout-tracking);
  line-height: var(--nv-type-callout-line);
}

.nv-settings-zero__rows {
  display: grid;
  gap: 0;
  margin: 0;
}

.nv-settings-zero__row {
  display: grid;
  grid-template-columns: minmax(9rem, 0.42fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-block-size: 48px;
}

.nv-settings-zero__row dt,
.nv-settings-zero__row dd {
  margin: 0;
  font-size: var(--nv-type-callout-size);
  letter-spacing: var(--nv-type-callout-tracking);
  line-height: var(--nv-type-callout-line);
}

.nv-settings-zero__row dt { color: var(--nv-zero-text-secondary, var(--dash-text-muted, #8f9098)); }
.nv-settings-zero__row dd { color: var(--nv-zero-text-primary, var(--dash-text, #f4f4f5)); font-weight: 520; }
.nv-settings-zero__muted { color: var(--nv-zero-text-secondary, var(--dash-text-muted, #8f9098)); font-weight: var(--nv-type-weight-regular); }

.nv-settings-zero__empty {
  display: grid;
  justify-items: center;
  padding-block: 56px;
  text-align: center;
}

.nv-settings-zero__card--empty .nv-settings-zero__empty {
  padding: var(--nv-zero-island-pad-block) 24px;
}

.nv-settings-zero__empty .nv-product-empty__icon { margin-block-end: 16px; }
.nv-settings-zero__empty p { max-inline-size: 430px; }

@media (min-width: 1101px) {
  :is(.nv-product-empty, .nv-settings-zero__card--empty, .nv-detail-empty-state, .nla__empty) p,
  .aud-preview--empty .aud-preview__state-copy {
    max-inline-size: none;
    white-space: nowrap;
  }
}

@media (max-width: 1100px) {
  :is(.nv-product-empty, .nv-settings-zero__card--empty, .nv-detail-empty-state, .nla__empty) p,
  .aud-preview--empty .aud-preview__state-copy {
    white-space: normal;
    text-wrap: pretty;
  }
}

.nv-settings-zero__action {
  display: inline-flex;
  min-block-size: 40px;
  margin-block-start: 20px;
  padding-inline: 18px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--dash-text, #f4f4f5);
  color: #090909;
  font: inherit;
  font-size: var(--nv-type-subhead-size);
  letter-spacing: var(--nv-type-subhead-tracking);
  font-weight: var(--nv-type-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 140ms ease, transform 140ms ease;
}

.nv-settings-zero__action:hover { opacity: 0.86; }
.nv-settings-zero__action:active { transform: scale(0.97); }
.nv-settings-zero__action:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.nv-settings-zero__identity {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-block: 10px 6px;
  text-align: center;
}

.nv-settings-zero__identity > span {
  display: grid;
  inline-size: 56px;
  block-size: 56px;
  margin-block-end: 4px;
  place-items: center;
  border-radius: 50%;
  background: var(--dash-surface-hover, rgba(255,255,255,.06));
  color: var(--dash-text, #f4f4f5);
  font-size: 18px;
  font-weight: var(--nv-type-weight-semibold);
}

.nv-settings-zero__identity strong { font-size: var(--nv-type-headline-size); letter-spacing: var(--nv-type-headline-tracking); }
.nv-settings-zero__identity small { color: var(--dash-text-muted, #8f9098); font-size: var(--nv-type-footnote-size); letter-spacing: var(--nv-type-footnote-tracking); }

.nv-settings-zero__plan {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.nv-settings-zero__plan > div { display: grid; gap: 6px; }
.nv-settings-zero__plan span { color: var(--dash-text-muted, #8f9098); font-size: var(--nv-type-callout-size); letter-spacing: var(--nv-type-callout-tracking); }
.nv-settings-zero__plan strong { color: var(--dash-text, #f4f4f5); font-size: clamp(32px, 5vw, 48px); letter-spacing: -.04em; }
.nv-settings-zero__plan small { color: var(--dash-text-muted, #8f9098); font-size: var(--nv-type-footnote-size); letter-spacing: var(--nv-type-footnote-tracking); }

.nv-settings-zero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-settings-zero__chips span {
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--dash-surface-hover, rgba(255,255,255,.055));
  color: var(--dash-text-muted, #8f9098);
  font-size: var(--nv-type-footnote-size);
  letter-spacing: var(--nv-type-footnote-tracking);
}

.nv-settings-zero__account-note {
  margin: 14px 0 0;
  color: var(--dash-text-muted, #8f9098);
  font-size: var(--nv-type-footnote-size);
  letter-spacing: var(--nv-type-footnote-tracking);
  text-align: center;
}

.nv-settings-zero__invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.28fr) auto;
  gap: 12px;
  align-items: end;
}

.nv-settings-zero__invite label { display: grid; gap: 8px; }
.nv-settings-zero__invite label > span { color: var(--dash-text-muted, #8f9098); font-size: var(--nv-type-footnote-size); letter-spacing: var(--nv-type-footnote-tracking); }
.nv-settings-zero__invite input,
.nv-settings-zero__invite select {
  min-block-size: 42px;
  inline-size: 100%;
  padding-inline: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--dash-surface-hover, rgba(255,255,255,.055));
  color: var(--dash-text, #f4f4f5);
  font: inherit;
  font-size: var(--nv-type-callout-size);
  letter-spacing: var(--nv-type-callout-tracking);
}

.nv-settings-zero__invite .nv-settings-zero__action { margin: 0; }
.nv-settings-zero__form-status { grid-column: 1 / -1; min-block-size: 18px; margin: 0; color: var(--dash-text-muted, #8f9098); font-size: var(--nv-type-footnote-size); letter-spacing: var(--nv-type-footnote-tracking); }

@media (max-width: 980px) {
  .nv-settings-zero { grid-template-columns: minmax(0, 1fr); }
  .nv-settings-zero__aside { position: static; }
}

@media (max-width: 900px) {
  body[data-local-test-data-state="empty"] .dash-first-value {
    padding-block: 64px !important;
  }

  .nv-settings-zero__card--empty { --nv-zero-island-pad-block: 80px; }
}

@media (max-width: 600px) {
  body[data-local-test-data-state="empty"] .dash-first-value {
    padding-block: 48px !important;
  }

  .nv-settings-zero,
  .nv-settings-zero__main,
  .nv-settings-zero__aside { gap: 16px; }
  .nv-settings-zero__card { padding: 20px; border-radius: 20px; }
  .nv-settings-zero__card--empty { padding: 0; }
  .nv-settings-zero__card--empty { --nv-zero-island-pad-block: 64px; }
  .nv-settings-zero__row { grid-template-columns: 1fr; gap: 4px; padding-block: 10px; }
  .nv-settings-zero__empty { padding-block: 44px; }
  .nv-settings-zero__card--empty .nv-settings-zero__empty { padding: var(--nv-zero-island-pad-block) 20px; }
  .nv-settings-zero__plan { align-items: start; flex-direction: column; }
  .nv-settings-zero__action { inline-size: 100%; }
  .nv-settings-zero__invite { grid-template-columns: 1fr; }
  .nv-settings-zero__form-status { grid-column: auto; }
}
