/* Navorina Dashboard Redesign — desktop fintech OS */
@import url('./dash-landing-tokens.css?v=20260719-pill-inputs-v42');
@import url('./components/scrollbar.css');
@import url('./components/nv-switch.css');
@import url('./components/demo-qa-panel.css?v=20260727-demo-banner-v2');
@import url('./dash-landing-components.css');
@import url('./dash-sidebar-shell.css?v=20260720-pro-star-v13');
@import url('./dash-header-shell.css?v=20260727-demo-banner-v3');
@import url('./typography-navorina.css');
@import url('./command-palette.css');
@import url('./create-payment.css');
@import url('./create-send.css?v=20260724-capability-drawer');
@import url('./create-invoice.css');
@import url('./create-exchange.css?v=20260702-exchange-revolut');
@import url('./create-deposit.css?v=20260724-capability-drawer-v2');
@import url('./create-transfer.css');
@import url('./create-bank-connect.css');
@import url('./create-crypto-wallet.css');
@import url('./create-team-invite.css');
@import url('./create-integration.css');
@import url('./create-payment-approval.css');
@import url('./create-api-key.css');
@import url('./create-report-export.css');
@import url('./create-delete-confirm.css');
@import url('./create-success-modal.css');
@import url('./create-error-modal.css');
@import url('./create-unsaved-changes.css');
@import url('./create-session-expired.css');
@import url('./dash-page-buttons.css');
@import url('./dash-table-motion.css?v=20260720-invoicing-stability-v4');
@import url('./dash-mobile-shell.css');

/* Token values → dash-landing-tokens.css */

/* Header action is secondary; primary remains reserved for the page workflow. */
body.dash-page .dash-new-btn {
  background: var(--dash-surface);
  color: var(--dash-text);
}

body.dash-page .dash-new-btn:hover {
  background: var(--dash-surface-hover);
  color: var(--dash-text);
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Landing preview renders the real dashboard at a stable desktop canvas instead of a copied mock. */
html.dash-landing-preview,
html.dash-landing-preview body {
  overflow: hidden;
}

html.dash-landing-preview .dash-sidebar-toggle {
  display: none !important;
}

html.dash-landing-preview .dash-pro-wrap,
html.dash-landing-preview .dash-pro-wrap[hidden] {
  display: block !important;
}

html.dash-landing-preview .dash-shell {
  width: 156.25%;
  height: 156.25dvh;
  transform: scale(0.64);
  transform-origin: top left;
}

html.dash-landing-preview .dash-main {
  height: 156.25dvh;
}

html.dash-landing-preview .dash-sidebar {
  position: relative;
  height: auto;
  overflow: visible;
}

html.dash-landing-preview .dash-nav {
  height: auto;
  overflow: visible;
}

html.dash-landing-preview .dash-content {
  overflow: hidden !important;
  scrollbar-width: none;
}

html.dash-landing-preview .dash-content::-webkit-scrollbar {
  display: none;
}

html.dash-landing-preview .dash-hero__chart-tooltip {
  display: none;
}

html.dash-landing-preview .dash-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--dash-aside-width)) !important;
}

html.dash-landing-preview .dash-kpi-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html.dash-landing-preview :is(a, button, input, iframe) {
  pointer-events: none;
}

html.dash-landing-preview {
  --dash-sidebar-outer-gutter: 0px;
  --dash-workspace-margin-right: var(--spacing-6xl, 48px);
  --dash-main-aside-gap: var(--spacing-6xl, 48px);
}

/* Flow modals need solid surfaces even while dashboard cards stay translucent. */
:root {
  --dash-island-radius: 32px;
  --dash-workspace-radius: 40px;
  --flow-modal-backdrop: rgba(0, 0, 0, 0.78);
  --flow-modal-surface: var(--color-bg-modal, #121212);
  --flow-modal-card: var(--dash-popover-bg, #222222);
  --flow-modal-card-hover: color-mix(in srgb, var(--flow-modal-card) 84%, var(--color-text-primary, #eeeeee) 16%);
  --flow-modal-border: color-mix(in srgb, var(--color-text-primary, #eeeeee) 14%, transparent);
  --dash-brand-icon-filter: brightness(0) invert(1);
  --dash-brand-icon-opacity: 0.74;
  --dash-inner-surface: rgba(255, 255, 255, 0.015);
  --dash-wallet-action-surface: rgba(255, 255, 255, 0.03);
  --dash-activity-surface: var(--dash-inner-surface);
  --dash-aside-card: color-mix(in srgb, var(--dash-card) 72%, transparent);
  --dash-aside-surface: var(--dash-activity-surface);
  --dash-aside-surface-hover: color-mix(in srgb, var(--dash-surface-hover) 88%, transparent);
  --dash-aside-field: var(--dash-activity-surface);
  --dash-workspace-bg: color-mix(
    in srgb,
    var(--color-surface-muted, rgba(238, 238, 238, 0.06)) 52%,
    transparent
  );
  --dash-workspace-border: color-mix(in srgb, var(--dash-border) 64%, transparent);
  --dash-card-on-workspace: color-mix(in srgb, var(--dash-card) 92%, var(--dash-bg) 8%);
  --dash-card-on-workspace-hover: color-mix(in srgb, var(--dash-surface-hover) 84%, var(--dash-bg) 16%);
  --dash-island-gap: 16px;
  --dash-main-aside-gap: var(--spacing-4xl, 32px);
  --dash-workspace-margin-right: var(--spacing-4xl, 32px);
  --dash-workspace-pad-x: 16px;
  --dash-workspace-pad-top: 16px;
  --cexpr-bg: var(--flow-modal-backdrop);
  --cexpr-surface: var(--flow-modal-surface);
  --cexpr-card: var(--flow-modal-card);
  --cexpr-purple-soft: var(--flow-modal-card-hover);
  --cexpr-border: var(--flow-modal-border);

  --cpay-bg: var(--flow-modal-backdrop);
  --cpay-surface: var(--flow-modal-surface);
  --cpay-card: var(--flow-modal-card);
  --cpay-purple-soft: var(--flow-modal-card-hover);
  --cpay-border: var(--flow-modal-border);

  --cinv-bg: var(--flow-modal-backdrop);
  --cinv-surface: var(--flow-modal-surface);
  --cinv-card: var(--flow-modal-card);
  --cinv-purple-soft: var(--flow-modal-card-hover);
  --cinv-border: var(--flow-modal-border);

  --cxch-bg: var(--flow-modal-backdrop);
  --cxch-surface: var(--flow-modal-surface);
  --cxch-card: var(--flow-modal-card);
  --cxch-purple-soft: var(--flow-modal-card-hover);
  --cxch-border: var(--flow-modal-border);

  --cxfr-bg: var(--flow-modal-backdrop);
  --cxfr-surface: var(--flow-modal-surface);
  --cxfr-card: var(--flow-modal-card);
  --cxfr-purple-soft: var(--flow-modal-card-hover);
  --cxfr-border: var(--flow-modal-border);

  --cbnk-bg: var(--flow-modal-backdrop);
  --cbnk-surface: var(--flow-modal-surface);
  --cbnk-card: var(--flow-modal-card);
  --cbnk-purple-soft: var(--flow-modal-card-hover);
  --cbnk-border: var(--flow-modal-border);

  --cwlt-bg: var(--flow-modal-backdrop);
  --cwlt-surface: var(--flow-modal-surface);
  --cwlt-card: var(--flow-modal-card);
  --cwlt-purple-soft: var(--flow-modal-card-hover);
  --cwlt-border: var(--flow-modal-border);

  --tinv-bg: var(--flow-modal-backdrop);
  --tinv-surface: var(--flow-modal-surface);
  --tinv-card: var(--flow-modal-card);
  --tinv-purple-soft: var(--flow-modal-card-hover);
  --tinv-border: var(--flow-modal-border);

  --cint-bg: var(--flow-modal-backdrop);
  --cint-surface: var(--flow-modal-surface);
  --cint-card: var(--flow-modal-card);
  --cint-purple-soft: var(--flow-modal-card-hover);
  --cint-border: var(--flow-modal-border);

  --capi-bg: var(--flow-modal-backdrop);
  --capi-surface: var(--flow-modal-surface);
  --capi-card: var(--flow-modal-card);
  --capi-purple-soft: var(--flow-modal-card-hover);
  --capi-border: var(--flow-modal-border);

  --cappr-bg: var(--flow-modal-backdrop);
  --cappr-surface: var(--flow-modal-surface);
  --cappr-card: var(--flow-modal-card);
  --cappr-purple-soft: var(--flow-modal-card-hover);
  --cappr-border: var(--flow-modal-border);

  --cdel-surface: var(--flow-modal-surface);
  --cdel-card: var(--flow-modal-card);
  --cdel-border: var(--flow-modal-border);

  --cses-surface: var(--flow-modal-surface);
  --cses-card: var(--flow-modal-card);
  --cses-border: var(--flow-modal-border);

  --cerr-surface: var(--flow-modal-surface);
  --cerr-card: var(--flow-modal-card);
  --cerr-border: var(--flow-modal-border);

  --csuc-surface: var(--flow-modal-surface);
  --csuc-card: var(--flow-modal-card);
  --csuc-border: var(--flow-modal-border);

  --cuns-surface: var(--flow-modal-surface);
  --cuns-card: var(--flow-modal-card);
  --cuns-border: var(--flow-modal-border);
}

/* Responsive shell gutters: preserve the right rail while releasing space on compact screens. */
@media (min-width: 1440px) {
  :root {
    --dash-main-aside-gap: var(--spacing-6xl, 48px);
    --dash-workspace-margin-right: var(--spacing-6xl, 48px);
  }
}

@media (min-width: 1800px) {
  :root {
    --dash-sidebar-outer-gutter: var(--spacing-lg, 16px);
    --dash-workspace-margin-right: var(--spacing-8xl, 64px);
  }
}

@media (min-width: 2400px) {
  :root {
    --dash-sidebar-outer-gutter: var(--spacing-4xl, 32px);
  }
}

@media (max-width: 1280px) {
  :root {
    --dash-main-aside-gap: var(--spacing-2xl, 24px);
    --dash-workspace-margin-right: var(--spacing-2xl, 24px);
  }
}

@media (max-width: 800px) {
  :root {
    --dash-main-aside-gap: var(--spacing-lg, 16px);
    --dash-workspace-margin-right: 0px;
  }
}

/* Modal surfaces are separated from the backdrop by color and depth, never outlines. */
:is(
  .cpay-wizard,
  .cpay-summary-panel,
  .cinv-wizard,
  .cxch-modal,
  .cxfr-modal,
  .cbnk-wizard,
  .cwlt-wizard,
  .tinv-wizard,
  .cint-wizard,
  .capi-wizard,
  .cappr-wizard,
  .cexpr-wizard,
  .cdel-modal,
  .cses-modal,
  .cerr-modal,
  .csuc-modal,
  .cuns-modal
) {
  border: 0;
}

/* Shared close control from dash-form-dialog: round, borderless, hover surface. */
:is(
  .cpay-close,
  .cinv-close,
  .cxch-close,
  .cxfr-close,
  .cbnk-close,
  .cwlt-close,
  .tinv-close,
  .cint-close,
  .capi-close,
  .cappr-close,
  .cexpr-close
) {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-full, 999px);
  background: transparent;
  color: var(--dash-text-muted);
  transition: background var(--dash-transition), color var(--dash-transition);
}

:is(
  .cpay-close,
  .cinv-close,
  .cxch-close,
  .cxfr-close,
  .cbnk-close,
  .cwlt-close,
  .tinv-close,
  .cint-close,
  .capi-close,
  .cappr-close,
  .cexpr-close
):hover {
  border-color: transparent;
  background: var(--dash-surface-hover);
  color: var(--dash-text);
}

:is(
  .cpay-close,
  .cinv-close,
  .cxch-close,
  .cxfr-close,
  .cbnk-close,
  .cwlt-close,
  .tinv-close,
  .cint-close,
  .capi-close,
  .cappr-close,
  .cexpr-close
):focus-visible {
  outline: 2px solid var(--dash-accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* Unified hover/focus tooltips for dashboard shell controls. */
:where([data-tooltip]) {
  position: relative;
}

:where([data-tooltip])::before,
:where([data-tooltip])::after {
  position: absolute;
  z-index: var(--z-tooltip, 20000);
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
}

:where([data-tooltip])::before {
  content: attr(data-tooltip);
  width: max-content;
  max-width: min(220px, calc(100vw - 32px));
  padding: 7px 9px;
  border: none;
  border-radius: 12px;
  background: var(--dash-popover-bg-solid, #202020);
  color: var(--dash-text, #f4f4f5);
  box-shadow: var(--dash-popover-shadow, 0 16px 48px rgba(0, 0, 0, 0.45));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

:where([data-tooltip])::after {
  display: none;
}

:where([data-tooltip]:hover, [data-tooltip]:focus-visible)::before {
  opacity: 1;
}

:where([data-tooltip]:hover)::before {
  transition-delay: 650ms;
}

:where([data-tooltip]:focus-visible)::before {
  transition-delay: 0ms;
}

:where([data-tooltip][data-tooltip-placement="top"])::before,
:where([data-tooltip]:not([data-tooltip-placement]))::before {
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
}

:where([data-tooltip][data-tooltip-placement="top"])::after,
:where([data-tooltip]:not([data-tooltip-placement]))::after {
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translate(-50%, 4px) rotate(225deg);
}

:where([data-tooltip][data-tooltip-placement="top"]:hover, [data-tooltip][data-tooltip-placement="top"]:focus-visible)::before,
:where([data-tooltip]:not([data-tooltip-placement]):hover, [data-tooltip]:not([data-tooltip-placement]):focus-visible)::before {
  transform: translate(-50%, 0);
}

:where([data-tooltip][data-tooltip-placement="top"]:hover, [data-tooltip][data-tooltip-placement="top"]:focus-visible)::after,
:where([data-tooltip]:not([data-tooltip-placement]):hover, [data-tooltip]:not([data-tooltip-placement]):focus-visible)::after {
  transform: translate(-50%, 0) rotate(225deg);
}

:where([data-tooltip][data-tooltip-placement="bottom"])::before {
  left: 50%;
  top: calc(100% + 10px);
  transform: translate(-50%, -4px);
}

:where([data-tooltip][data-tooltip-placement="bottom"])::after {
  left: 50%;
  top: calc(100% + 6px);
  transform: translate(-50%, -4px) rotate(45deg);
}

:where([data-tooltip][data-tooltip-placement="bottom"]:hover, [data-tooltip][data-tooltip-placement="bottom"]:focus-visible)::before {
  transform: translate(-50%, 0);
}

:where([data-tooltip][data-tooltip-placement="bottom"]:hover, [data-tooltip][data-tooltip-placement="bottom"]:focus-visible)::after {
  transform: translate(-50%, 0) rotate(45deg);
}

:where([data-tooltip][data-tooltip-placement="right"])::before {
  left: calc(100% + 10px);
  top: 50%;
  transform: translate(-4px, -50%);
}

:where([data-tooltip][data-tooltip-placement="right"])::after {
  left: calc(100% + 6px);
  top: 50%;
  transform: translate(-4px, -50%) rotate(-45deg);
}

:where([data-tooltip][data-tooltip-placement="right"]:hover, [data-tooltip][data-tooltip-placement="right"]:focus-visible)::before {
  transform: translate(0, -50%);
}

:where([data-tooltip][data-tooltip-placement="right"]:hover, [data-tooltip][data-tooltip-placement="right"]:focus-visible)::after {
  transform: translate(0, -50%) rotate(-45deg);
}

:where([data-tooltip][data-tooltip-placement="left"])::before {
  right: calc(100% + 10px);
  top: 50%;
  transform: translate(4px, -50%);
}

:where([data-tooltip][data-tooltip-placement="left"])::after {
  right: calc(100% + 6px);
  top: 50%;
  transform: translate(4px, -50%) rotate(135deg);
}

:where([data-tooltip][data-tooltip-placement="left"]:hover, [data-tooltip][data-tooltip-placement="left"]:focus-visible)::before {
  transform: translate(0, -50%);
}

:where([data-tooltip][data-tooltip-placement="left"]:hover, [data-tooltip][data-tooltip-placement="left"]:focus-visible)::after {
  transform: translate(0, -50%) rotate(135deg);
}

@media (prefers-reduced-motion: reduce) {
  :where([data-tooltip])::before,
  :where([data-tooltip])::after {
    transition: none;
  }
}

body.dash-tooltips-ready :where([data-tooltip])::before,
body.dash-tooltips-ready :where([data-tooltip])::after {
  display: none;
}

.dash-tooltip-layer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-tooltip, 20000);
  display: flex;
  align-items: center;
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 160ms ease, transform 160ms ease;
}

.dash-tooltip-layer.is-visible {
  opacity: 1;
}

.dash-tooltip-layer__body {
  max-width: min(220px, calc(100vw - 32px));
  padding: 7px 9px;
  border: none;
  border-radius: 12px;
  background: var(--dash-popover-bg-solid, #202020);
  color: var(--dash-text, #f4f4f5);
  box-shadow: var(--dash-popover-shadow, 0 16px 48px rgba(0, 0, 0, 0.45));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.dash-tooltip-layer[data-placement="top"] {
  transform: translate3d(var(--tooltip-x), calc(var(--tooltip-y) + 4px), 0);
}

.dash-tooltip-layer[data-placement="top"].is-visible {
  transform: translate3d(var(--tooltip-x), var(--tooltip-y), 0);
}

.dash-tooltip-layer[data-placement="bottom"] {
  transform: translate3d(var(--tooltip-x), calc(var(--tooltip-y) - 4px), 0);
}

.dash-tooltip-layer[data-placement="bottom"].is-visible {
  transform: translate3d(var(--tooltip-x), var(--tooltip-y), 0);
}

.dash-tooltip-layer[data-placement="right"] {
  transform: translate3d(calc(var(--tooltip-x) - 4px), var(--tooltip-y), 0);
}

.dash-tooltip-layer[data-placement="right"].is-visible {
  transform: translate3d(var(--tooltip-x), var(--tooltip-y), 0);
}

.dash-tooltip-layer[data-placement="left"] {
  transform: translate3d(calc(var(--tooltip-x) + 4px), var(--tooltip-y), 0);
}

.dash-tooltip-layer[data-placement="left"].is-visible {
  transform: translate3d(var(--tooltip-x), var(--tooltip-y), 0);
}

@media (prefers-reduced-motion: reduce) {
  .dash-tooltip-layer {
    transition: none;
  }
}

body.dash-page:not(.dsf-page) img[src*="/transaction-icons/brand/"] {
  filter: var(--dash-brand-icon-filter) !important;
  opacity: var(--dash-brand-icon-opacity) !important;
}

.cdel-backdrop,
.cses-backdrop,
.cerr-backdrop,
.csuc-backdrop,
.cuns-backdrop {
  background: var(--flow-modal-backdrop);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body.dash-page {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-width: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dash-text);
  background: var(--dash-bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button,
input {
  font: inherit;
}

/* Product form geometry: single-line fields use one fully rounded silhouette. */
body.dash-page :is(
  input[type='text'],
  input[type='search'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  input[type='url'],
  input[type='number'],
  input[type='date'],
  input[type='time'],
  input[type='month'],
  input[type='week'],
  input[type='datetime-local'],
  input:not([type]),
  select
) {
  border-radius: var(--control-radius-input, var(--radius-full, 9999px)) !important;
}

body.dash-page .dash-quick__link-field {
  border-radius: var(--control-radius-input, var(--radius-full, 9999px));
}

.dash-shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* Main → dash-header-shell.css, dash-sidebar-shell.css */

.dash-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  container-type: inline-size;
  container-name: dash-main;
}

.dash-header,
.dash-main > main,
.dash-main > .dash-content,
.dash-main > [class$="-content"],
.dash-main > [class*="-content "] {
  inline-size: min(
    calc(100% - var(--dash-workspace-margin-right) - var(--dash-workspace-margin-right)),
    var(--dash-main-max-width)
  );
  margin-inline: auto;
}

.dash-header {
  position: relative;
  z-index: var(--dash-popover-z);
  margin-block: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dash-main > .dash-workspace-content,
.dash-content {
  position: relative;
  z-index: 1;
  padding: var(--dash-workspace-pad-top) var(--dash-workspace-pad-x) var(--dash-content-y);
  padding-left: calc(var(--dash-workspace-pad-x) + var(--dash-mobile-nav-gutter));
  padding-bottom: calc(var(--dash-content-y) + var(--dash-content-pad-bottom));
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dash-island-gap);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border-top-left-radius: var(--dash-workspace-radius);
  border-top-right-radius: var(--dash-workspace-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--dash-workspace-bg);
  transition: background var(--dash-transition), margin-top var(--dash-transition);
}

.dash-main > .dash-workspace-content::-webkit-scrollbar,
.dash-content::-webkit-scrollbar {
  display: none;
}

/* Shared flat workspace: the former tray surface becomes the page-island surface. */
body.dash-page .dash-main > .dash-workspace-content {
  --dash-page-island-bg: var(--dash-workspace-bg);
  --dash-card: var(--dash-page-island-bg);
  --dash-card-on-workspace: var(--dash-page-island-bg);
  --dash-aside-card: var(--dash-page-island-bg);
  --nv-surface-solid: var(--dash-page-island-bg);
  --inv-surface-solid: var(--dash-page-island-bg);
  padding-block: 0;
  padding-inline: var(--dash-mobile-nav-gutter) 0;
  background: transparent;
}

/* Only nested components use the subtle inner surface; page chrome and islands keep their own surfaces. */
body.dash-page .dash-main > .dash-workspace-content :where(section, .dash-card) {
  --dash-surface: var(--dash-inner-surface);
  --dash-elevated: var(--dash-inner-surface);
  --dash-input-bg: var(--dash-inner-surface);
  --color-bg-input: var(--dash-inner-surface);
  --color-input-bg: var(--dash-inner-surface);
  --color-button-secondary: var(--dash-inner-surface);
  --control-glass-surface: var(--dash-inner-surface);
}

/* Keep serif page titles clear of the flat workspace edge. */
body.dash-page .dash-main > .dash-workspace-content:has(h1[class$="-title"]),
body.dash-page .dash-main > .dash-workspace-content.has-workspace-title {
  padding-block-start: var(--spacing-2xl);
}

@media (max-width: 800px) {
  body.dash-page .dash-main > .dash-workspace-content {
    padding-block-end: calc(var(--dash-content-y) + var(--dash-content-pad-bottom));
  }
}

.dash-content--flat-workspace :is(
  .dash-overview,
  .dash-month-summary,
  .dash-split > .dash-card,
  .dash-grid > .dash-col:nth-child(2) > .dash-card,
  .dash-grid > .dash-col:nth-child(2) > .dash-onboarding
) {
  background: var(--dash-page-island-bg);
}

/* One shared rhythm between page-level islands; component internals keep their own spacing. */
body.dash-page .dash-workspace-content {
  --dash-gap: var(--dash-island-gap);
}

body.dash-page :is(
  .tax-content, .tax-layout, .tax-main, .tax-aside,
  .accd-content, .accd-layout, .accd-main, .accd-aside,
  .ops-content, .ops-layout, .ops-main, .ops-aside,
  .pay-content, .pay-layout, .pay-main, .pay-aside,
  .api-content, .api-layout, .api-main, .api-aside,
  .tx-content, .tx-layout, .tx-main, .tx-aside,
  .prof-content, .prof-layout, .prof-main, .prof-aside,
  .invd-content, .invd-layout, .invd-main, .invd-aside,
  .inv-content, .inv-layout, .inv-main, .inv-aside,
  .team-content, .team-layout, .team-main, .team-aside,
  .hlp-content, .hlp-layout, .hlp-main, .hlp-aside,
  .acct-content, .acct-layout, .acct-main, .acct-aside,
  .plan-content, .plan-layout, .plan-main, .plan-aside,
  .bud-content, .bud-layout, .bud-main, .bud-aside,
  .ntf-content, .ntf-layout, .ntf-main, .ntf-aside,
  .sec-content, .sec-layout, .sec-main, .sec-aside,
  .rpt-content, .rpt-layout, .rpt-main, .rpt-aside,
  .acc-content, .acc-layout, .acc-main, .acc-aside,
  .bill-content, .bill-layout, .bill-main, .bill-aside,
  .set-content, .set-layout, .set-main, .set-aside,
  .inc-content, .inc-layout, .inc-main, .inc-aside,
  .aud-content, .aud-layout, .aud-main, .aud-aside,
  .ntc-content, .ntc-layout, .ntc-main, .ntc-aside,
  .int-content, .int-layout, .int-main, .int-aside,
  .payd-content, .payd-layout, .payd-main, .payd-aside,
  .ins-content, .ins-layout, .ins-main, .ins-aside,
  .txd-content, .txd-layout, .txd-main, .txd-aside,
  .aiw-main
) {
  gap: var(--dash-island-gap);
}

/* Shared main + aside contract across dashboard sections. */
body.dash-page :is(
  .tax-layout, .accd-layout, .ops-layout, .pay-layout,
  .api-layout, .tx-layout, .prof-layout, .invd-layout,
  .inv-layout, .team-layout, .hlp-layout, .acct-layout,
  .plan-layout, .bud-layout, .ntf-layout, .sec-layout,
  .rpt-layout, .acc-layout, .bill-layout, .set-layout,
  .inc-layout, .aud-layout, .ntc-layout, .int-layout,
  .payd-layout, .ins-layout, .txd-layout
) {
  column-gap: var(--dash-main-aside-gap);
  row-gap: var(--dash-island-gap);
}

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--dash-aside-width));
  column-gap: var(--dash-main-aside-gap);
  row-gap: var(--dash-island-gap);
  align-items: start;
  min-width: 0;
}

body.dash-page .dash-content--flat-workspace > .dash-grid {
  margin-block-end: var(--spacing-6xl, 48px);
}

body.dash-page .dash-content--flat-workspace > .dash-environment-banner {
  inline-size: calc(100% - var(--dash-aside-width) - var(--dash-main-aside-gap));
  min-inline-size: 0;
  margin-block-end: 0;
  align-self: flex-start;
  flex: none;
}

html.dash-landing-preview .dash-content--flat-workspace > .dash-grid {
  margin-block-end: 0;
}

.dash-col {
  display: flex;
  flex-direction: column;
  gap: var(--dash-island-gap);
  min-width: 0;
}

.dash-col > .dash-onboarding {
  margin: 0;
}

/* KPI grid responds to main column width (not viewport) */
.dash-grid > .dash-col:first-child {
  container-type: inline-size;
  container-name: dash-main-col;
  gap: var(--spacing-3xl);
}

/* ── Cards ── */

.dash-card {
  background: var(--dash-card-on-workspace);
  border: none;
  border-radius: var(--dash-island-radius);
  box-shadow: none;
}

.dash-grid > .dash-col:nth-child(2) > .dash-card {
  background: var(--dash-aside-card);
}

.dash-grid > .dash-col:nth-child(2) > .dash-onboarding {
  background: var(--dash-aside-card);
  border-radius: var(--dash-island-radius);
}

/* Floating Assistant — restores the previous FAB → overlay panel interaction. */
.dash-floating-chat {
  --dash-floating-chat-width: min(clamp(24rem, 28dvi, 28rem), calc(100dvi - var(--spacing-3xl)));
  --dash-floating-chat-height: min(40rem, calc(100dvb - var(--spacing-5xl)));
  --dash-floating-chat-bg: var(
    --nv-surface-solid,
    color-mix(in srgb, var(--dash-bg-app) 82%, var(--dash-bg) 18%)
  );
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 1450;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}

.dash-floating-chat[hidden] {
  display: none;
}

/* An open assistant is an application overlay, above header popovers. */
.dash-floating-chat[data-state="expanded"] {
  z-index: var(--z-modal, 10001);
}

.dash-floating-chat__launcher,
.dash-floating-chat__panel {
  pointer-events: auto;
}

.dash-floating-chat__launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--dash-text);
  background-color: var(--dash-popover-bg-solid);
  background-image:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--dash-bg) 18%, transparent),
      color-mix(in srgb, var(--dash-bg) 52%, transparent)
    ),
    url('../img/pro-cosmos.png');
  background-position: center, center 18%;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 16px 44px rgb(0 0 0 / 36%);
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

.dash-floating-chat__launcher svg {
  position: relative;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 72%));
}

.dash-floating-chat__launcher[hidden],
.dash-floating-chat__panel[hidden] {
  display: none;
}

.dash-floating-chat__launcher:hover {
  filter: brightness(1.14);
  transform: translateY(-2px);
}

.dash-floating-chat__launcher:focus-visible,
.dash-floating-chat__head-button:focus-visible {
  outline: 2px solid var(--dash-text);
  outline-offset: 3px;
}

.dash-floating-chat__panel {
  display: flex;
  flex-direction: column;
  width: var(--dash-floating-chat-width);
  height: var(--dash-floating-chat-height);
  overflow: hidden;
  border: 0;
  border-radius: var(--dash-island-radius);
  color: var(--dash-text);
  background: var(--dash-floating-chat-bg);
  box-shadow:
    0 30px 96px rgb(0 0 0 / 68%),
    0 12px 32px rgb(0 0 0 / 36%);
  isolation: isolate;
  animation: dash-floating-chat-in 220ms ease-out;
}

html.dash-motion-ready .dash-floating-chat__panel {
  animation: none;
}

@keyframes dash-floating-chat-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dash-floating-chat__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 4rem;
  padding: var(--spacing-md) var(--spacing-lg);
}

.dash-floating-chat__identity,
.dash-floating-chat__head-actions {
  display: flex;
  align-items: center;
}

.dash-floating-chat__identity {
  min-width: 0;
  gap: 10px;
}

.dash-floating-chat__head-actions {
  flex: 0 0 auto;
  gap: 2px;
}

.dash-floating-chat__mark,
.dash-floating-chat__head-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
}

.dash-floating-chat__mark {
  background: color-mix(in srgb, var(--dash-text) 8%, transparent);
}

.dash-floating-chat__mark img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  opacity: 0.9;
  filter: grayscale(1) brightness(1.45) contrast(1.08);
}

.dash-floating-chat__head-button {
  margin: 0;
  padding: 0;
  color: var(--dash-text-muted);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

.dash-floating-chat__head-button:hover {
  color: var(--dash-text);
  background: var(--dash-aside-surface-hover);
}

.dash-floating-chat__title,
.dash-floating-chat__subtitle {
  margin: 0;
}

.dash-floating-chat__title {
  color: var(--dash-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.dash-floating-chat__subtitle {
  margin-top: 2px;
  overflow: hidden;
  color: var(--dash-text-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-floating-chat__frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
}

.dash-floating-chat__tour {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: 0 var(--spacing-lg) var(--spacing-sm);
  padding: var(--spacing-md);
  border: 0;
  border-radius: 20px;
  background: var(--dash-aside-surface);
}

.dash-floating-chat__tour-meta,
.dash-floating-chat__tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.dash-floating-chat__tour-meta {
  color: var(--dash-text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dash-floating-chat__tour-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-xs);
}

.dash-floating-chat__tour-progress span {
  height: 3px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--dash-text) 10%, transparent);
}

.dash-floating-chat__tour-progress span.is-active {
  background: var(--dash-green);
}

.dash-floating-chat__tour-title,
.dash-floating-chat__tour-copy {
  margin: 0;
}

.dash-floating-chat__tour-title {
  color: var(--dash-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.dash-floating-chat__tour-copy {
  color: var(--dash-text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.dash-floating-chat__tour-cta,
.dash-floating-chat__tour-prev,
.dash-floating-chat__tour-next {
  min-height: 2rem;
  border: 0;
  color: var(--dash-text);
  background: var(--dash-aside-surface-hover);
  cursor: pointer;
}

.dash-floating-chat__tour-cta {
  min-width: 0;
  padding: 0 var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.dash-floating-chat__tour-nav {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--spacing-xs);
}

.dash-floating-chat__tour-prev,
.dash-floating-chat__tour-next {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  padding: 0;
  border-radius: 50%;
}

.dash-floating-chat__tour-prev[hidden],
.dash-floating-chat__tour-next[hidden] {
  display: none;
}

.dash-floating-chat__tour-cta:hover,
.dash-floating-chat__tour-prev:hover,
.dash-floating-chat__tour-next:hover {
  background: color-mix(in srgb, var(--dash-aside-surface-hover) 82%, var(--dash-text) 18%);
}

.dash-floating-chat__tour-cta:focus-visible,
.dash-floating-chat__tour-prev:focus-visible,
.dash-floating-chat__tour-next:focus-visible {
  outline: 2px solid var(--dash-text);
  outline-offset: 2px;
}

html.dash-landing-preview .dash-floating-chat {
  display: none;
}

@media (max-width: 520px) {
  .dash-floating-chat {
    --dash-floating-chat-width: calc(100dvi - var(--spacing-2xl));
    --dash-floating-chat-height: min(38rem, calc(100dvb - var(--spacing-2xl)));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-floating-chat__launcher,
  .dash-floating-chat__panel {
    animation: none;
    transition: none;
  }
}

.dash-grid > .dash-col:nth-child(2) .dash-quick__item,
.dash-grid > .dash-col:nth-child(2) .dash-quick__copy,
.dash-grid > .dash-col:nth-child(2) .dash-quick__promo {
  background: var(--dash-aside-surface);
}

.dash-grid > .dash-col:nth-child(2) .dash-quick__link-field {
  background: var(--dash-aside-field);
}

.dash-grid > .dash-col:nth-child(2) .dash-quick__item:hover,
.dash-grid > .dash-col:nth-child(2) .dash-quick__promo:hover {
  background: var(--dash-aside-surface-hover);
}

.dash-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.dash-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

.dash-card__link {
  font-size: 12px;
  font-weight: 500;
  color: var(--dash-text-subtle);
  text-decoration: none;
  transition: color var(--dash-transition);
}

.dash-card__link:hover {
  color: var(--dash-purple);
}

/* ── Hero ── */

.dash-hero {
  position: relative;
  padding: 28px 28px 24px;
}

.dash-hero__label {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--dash-text-muted);
  padding-right: 200px;
}

.dash-hero__row {
  margin-bottom: 24px;
}

.dash-hero__balance {
  margin: 0;
  font-family: var(--font-numeric);
  font-size: 64px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.dash-hero__growth {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--dash-green-soft);
  color: var(--dash-green);
  font-family: var(--font-numeric);
  font-size: 13px;
  font-weight: 600;
}

.dash-hero__periods {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--dash-radius-btn);
  background: var(--dash-surface);
  border: none;
}

.dash-hero__period {
  padding: 6px 12px;
  border: none;
  border-radius: var(--dash-radius-btn);
  background: transparent;
  color: var(--dash-text-subtle);
  font-family: var(--font-numeric);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dash-transition), color var(--dash-transition);
}

.dash-hero__period.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dash-text);
}

.dash-hero__period:hover:not(.is-active) {
  color: var(--dash-text-muted);
}

.dash-hero__chart {
  height: 180px;
  margin-bottom: 24px;
}

.dash-hero__chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dash-hero__chart-tooltip {
  max-width: min(160px, calc(100vw - 32px));
  background: rgba(34, 34, 34, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
}

.dash-hero__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.dash-hero__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: var(--dash-radius-btn);
  border: none;
  background: var(--dash-surface);
  color: var(--dash-text);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dash-transition), border-color var(--dash-transition), transform var(--dash-transition);
}

.dash-hero__action:hover {
  background: var(--dash-surface-hover);
  border-color: var(--dash-border-hover);
  transform: translateY(-1px);
}

.dash-hero__action--primary {
  background: var(--dash-accent);
  border-color: transparent;
  color: var(--dash-accent-text);
}

.dash-hero__action--primary:hover {
  background: var(--dash-accent-hover);
  filter: none;
}

.dash-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  align-items: stretch;
  min-width: 0;
  overflow: clip;
  border: none;
  border-radius: var(--dash-island-radius);
  background: var(--nv-surface-solid, var(--dash-card-on-workspace));
}

.dash-overview > .dash-card {
  border-radius: 0;
  background: transparent;
}

.dash-overview .dash-wallet,
.dash-overview .dash-activity-panel {
  block-size: auto;
}

/* ── KPI ── */

.dash-month-summary {
  min-width: 0;
  padding: var(--spacing-xl);
  border: none;
  border-radius: var(--dash-island-radius);
  background: var(--nv-surface-solid, var(--dash-card-on-workspace));
}

.dash-month-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.dash-month-summary__head h2 {
  margin: 0;
  color: var(--dash-text);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.25;
}

.dash-month-summary__head a {
  color: var(--dash-text-subtle);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
}

.dash-month-summary__head a:hover { color: var(--dash-text); }

.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-md);
  min-width: 0;
}

.dash-kpi {
  --dash-kpi-pad: var(--spacing-lg);
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 104px;
  flex-direction: column;
  padding: var(--dash-kpi-pad);
  min-width: 0;
  border: none;
  border-radius: calc(var(--dash-island-radius) - var(--spacing-sm));
  background: var(--dash-activity-surface);
}

.dash-month-summary .dash-kpi__top { display: none; }

.dash-kpi__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 36px;
  margin-bottom: 16px;
}

.dash-kpi__icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.dash-kpi__icon--green { background: var(--dash-green-soft); color: var(--dash-green); }
.dash-kpi__icon--red { background: var(--dash-red-soft); color: var(--dash-red); }
.dash-kpi__icon--purple { background: var(--dash-purple-soft); color: var(--dash-purple); }
.dash-kpi__icon--blue { background: var(--dash-blue-soft); color: var(--dash-blue); }

.dash-kpi__spark {
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: 0;
  bottom: 18px;
  width: 58%;
  height: 44px;
  margin: 0;
  opacity: 0.54;
  overflow: visible;
  pointer-events: none;
}

.dash-kpi__label {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--dash-text-muted);
}

.dash-kpi__value {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-numeric);
  font-size: clamp(20px, 2.1cqi, 24px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-kpi__trend {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: var(--spacing-md);
  font-family: var(--font-numeric);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.dash-kpi__trend-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--dash-radius-btn);
}

.dash-month-summary .dash-kpi__trend-badge {
  padding: 0;
  background: transparent;
}

.dash-kpi__trend-value { text-box: trim-both cap alphabetic; }

.dash-kpi__trend--up .dash-kpi__trend-badge { background: var(--dash-green-soft); }
.dash-kpi__trend--down .dash-kpi__trend-badge { background: var(--dash-red-soft); }
.dash-kpi__trend--neutral .dash-kpi__trend-badge { background: var(--dash-blue-soft); }

.dash-kpi__trend--up { color: var(--dash-green); }
.dash-kpi__trend--down { color: var(--dash-red); }
.dash-kpi__trend--neutral { color: var(--dash-blue); }

/* ── Wallet + activity hero ── */

.dash-wallet {
  position: relative;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  padding: var(--spacing-2xl);
  padding-block-start: var(--spacing-xl);
  min-width: 0;
  min-block-size: 330px;
}

.dash-wallet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  min-height: var(--spacing-5xl);
}

.dash-wallet__account,
.dash-wallet__visibility,
.dash-wallet__actions button {
  border: 0;
  cursor: pointer;
}

.dash-wallet__account {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--spacing-md);
  padding: 0;
  background: transparent;
  color: var(--dash-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

.dash-wallet__account > span:nth-child(2),
.dash-cashflow .dash-card__title {
  text-box: trim-both cap alphabetic;
}

.dash-wallet__account-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--dash-green-soft);
  color: var(--dash-green);
  font-family: var(--font-numeric);
  font-weight: 600;
}

.dash-wallet__account svg { color: var(--dash-text-muted); }

.dash-wallet__account[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.dash-wallet__account-menu {
  position: fixed;
  inset: auto;
  z-index: var(--dash-popover-z);
  width: min(320px, calc(100vw - (var(--spacing-xl) * 2)));
  max-height: min(420px, calc(100dvh - (var(--spacing-xl) * 2)));
  margin: 0;
  padding: var(--spacing-sm);
  overflow: auto;
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius-card);
  background: var(--dash-popover-bg-solid);
  color: var(--dash-text);
  box-shadow: var(--dash-popover-shadow);
}

.dash-wallet__account-menu[popover] { display: none; }

.dash-wallet__account-menu[popover]:is(:popover-open, .is-open) {
  display: grid;
  gap: var(--spacing-xs);
}

.dash-wallet__account-option {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  min-height: 56px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 0;
  border-radius: var(--dash-radius-input);
  background: transparent;
  color: var(--dash-text);
  text-align: left;
  cursor: pointer;
}

.dash-wallet__account-option:hover,
.dash-wallet__account-option[aria-selected="true"] {
  background: var(--dash-surface-hover);
}

.dash-wallet__account-option-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--dash-green-soft);
  color: var(--dash-green);
  font-family: var(--font-numeric);
  font-weight: 600;
}

.dash-wallet__account-option-copy { min-width: 0; }

.dash-wallet__account-option-name,
.dash-wallet__account-option-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-wallet__account-option-name {
  font-size: 14px;
  font-weight: 600;
}

.dash-wallet__account-option-sub {
  margin-top: 2px;
  color: var(--dash-text-subtle);
  font-size: 12px;
}

.dash-wallet__account-option-balance {
  color: var(--dash-text);
  font-family: var(--font-numeric);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.dash-wallet__account-option-check {
  color: var(--dash-green);
  opacity: 0;
}

.dash-wallet__account-option[aria-selected="true"] .dash-wallet__account-option-check {
  opacity: 1;
}

.dash-wallet__link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--spacing-xs);
}

.dash-wallet__link svg { flex: 0 0 auto; }

.dash-wallet__link > span,
.dash-cashflow .dash-card__link > span {
  line-height: 1.25;
  text-box: trim-both cap alphabetic;
}

.dash-wallet__visibility {
  display: grid;
  position: relative;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--dash-text-muted);
}

.dash-wallet__balance-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--spacing-xl);
  text-align: center;
}

.dash-wallet__label-row {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.dash-wallet__label {
  margin: 0;
  color: var(--dash-text-muted);
  font-size: 14px;
}

.dash-wallet__balance {
  display: grid;
  justify-items: center;
  margin: 0;
  color: var(--dash-text);
  font-family: var(--font-numeric);
  margin-top: 6px;
  font-size: clamp(36px, 7cqi, 52px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.dash-wallet__balance > span {
  grid-area: 1 / 1;
}

.dash-wallet__balance-sizer {
  visibility: hidden;
  pointer-events: none;
}

.dash-wallet__change {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 30px;
  margin-top: 14px;
  padding: 0 14px;
  border-radius: var(--dash-radius-btn);
  background: var(--dash-green-soft);
  color: var(--dash-green);
  font-family: var(--font-numeric);
  font-size: 12px;
  font-weight: 600;
}

.dash-wallet__change[hidden] {
  display: none;
}

.dash-trend-icon { flex: 0 0 auto; }

.dash-wallet__visibility:hover { background: var(--dash-surface-hover); color: var(--dash-text); }

.dash-wallet__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  inline-size: min(100%, 720px);
  gap: var(--spacing-md);
  margin-top: auto;
  margin-inline: auto;
  padding-top: var(--spacing-2xl);
}

.dash-wallet__actions button {
  display: flex;
  flex-direction: column;
  inline-size: min(100%, 104px);
  min-width: 0;
  justify-self: center;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 0;
  background: transparent;
  color: var(--dash-text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.dash-wallet__action-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: var(--dash-wallet-action-surface);
  color: var(--dash-text);
  transition: background var(--dash-transition), transform var(--dash-transition);
}

.dash-wallet__actions button:hover { color: var(--dash-text); }
.dash-wallet__actions button:hover .dash-wallet__action-icon { background: var(--dash-surface-hover); transform: translateY(-1px); }

.dash-wallet__account:focus-visible,
.dash-wallet__visibility:focus-visible,
.dash-wallet__account-option:focus-visible {
  outline: 2px solid var(--dash-accent);
  outline-offset: 3px;
}

.dash-wallet__actions button:focus-visible {
  outline: none;
}

.dash-wallet__actions button:focus-visible .dash-wallet__action-icon {
  outline: 2px solid var(--dash-accent);
  outline-offset: 3px;
}

.dash-wallet__actions svg { color: inherit; }

@container (max-width: 300px) {
  .dash-wallet { padding: 20px; }
  .dash-wallet__balance { font-size: 34px; }
  .dash-wallet__action-icon { width: 48px; height: 48px; }
}

.dash-cashflow {
  container: cashflow / inline-size;
  padding: var(--spacing-2xl);
  padding-block-start: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--dash-island-radius);
}

.dash-cashflow .dash-card__head {
  margin-bottom: var(--spacing-xl);
  min-height: var(--spacing-5xl);
}

.dash-cashflow .dash-card__title {
  font-size: var(--font-size-lg);
  line-height: 1.25;
}

.dash-cashflow__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--spacing-lg);
  min-width: 0;
}

.dash-cashflow__chart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.dash-cashflow .dash-donut {
  position: relative;
  width: 128px;
  height: 128px;
  flex-shrink: 0;
}

.dash-cashflow .dash-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.dash-cashflow .dash-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8px;
}

.dash-cashflow .dash-donut__center-value {
  font-family: var(--font-numeric);
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.dash-cashflow .dash-donut__center-label {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--dash-text-subtle);
  line-height: 1.2;
}

.dash-cashflow__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-sm);
  min-width: 0;
}

.dash-cashflow .dash-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  min-height: var(--spacing-2xl);
  font-size: var(--font-size-base);
  min-width: 0;
}

.dash-cashflow .dash-legend-item__left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--dash-text-muted);
  min-width: 0;
  flex: 1;
}

.dash-cashflow .dash-legend-item__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-cashflow .dash-legend-item__dot {
  width: var(--spacing-sm);
  height: var(--spacing-sm);
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-cashflow .dash-legend-item__value {
  font-family: var(--font-numeric);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--dash-text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.dash-cashflow__status {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.35;
  color: var(--dash-green);
  font-weight: 500;
}

.dash-cashflow__status svg {
  flex-shrink: 0;
}

.dash-cashflow__footer {
  display: flex;
  align-items: center;
  min-height: var(--control-height-md);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--dash-border);
}

@container cashflow (min-width: 440px) {
  .dash-cashflow__body {
    display: grid;
    grid-template-columns: minmax(132px, 0.8fr) minmax(0, 1.2fr);
    gap: var(--spacing-2xl);
  }

  .dash-cashflow .dash-donut {
    width: 132px;
    height: 132px;
  }
}

/* ── Activity ── */

.dash-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dash-island-gap);
}

.dash-activity,
.dash-spending {
  padding: 24px;
  border-radius: var(--dash-island-radius);
}

.dash-spending {
  display: flex;
  flex-direction: column;
}

.dash-activity {
  border-radius: calc(var(--dash-island-radius) - var(--spacing-sm));
}

.dash-activity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-activity-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-block-size: 320px;
  max-block-size: 320px;
  margin: 0 var(--spacing-xl) var(--spacing-xl);
  border: none;
}

.dash-activity.dash-activity-panel {
  padding-block-end: 0;
  overflow: clip;
}

.dash-overview > .dash-activity-panel {
  border-radius: calc(var(--dash-island-radius) - var(--spacing-sm));
  background: var(--dash-activity-surface);
}

.dash-activity-panel .dash-card__head {
  flex: 0 0 auto;
  min-height: var(--spacing-5xl);
  margin-bottom: var(--spacing-md);
}

.dash-activity-panel__toolbar {
  align-items: center;
  gap: var(--spacing-lg);
}

.dash-activity__filters {
  display: flex;
  flex: 1 1 auto;
  gap: var(--spacing-xs);
  min-width: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.dash-activity-panel__toolbar .dash-card__link {
  flex: 0 0 auto;
}

.dash-activity__filters::-webkit-scrollbar { display: none; }

.dash-activity__filters button {
  min-block-size: 32px;
  padding-inline: var(--spacing-md);
  border: 0;
  border-radius: var(--dash-radius-btn);
  background: transparent;
  color: var(--dash-text-muted);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.dash-activity__filters button:hover:not([aria-pressed="true"]) {
  background: var(--dash-surface);
  color: var(--dash-text);
}

.dash-activity__filters button[aria-pressed="true"] {
  background: var(--dash-surface-hover);
  color: var(--dash-text);
}

.dash-activity__filters button:focus-visible {
  outline: 2px solid var(--dash-accent);
  outline-offset: 2px;
}

.dash-activity-panel .dash-activity-list {
  flex: 1 1 auto;
  min-block-size: 0;
  margin-inline: calc(var(--spacing-2xl) * -1);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.dash-activity-panel .dash-activity-list::-webkit-scrollbar {
  display: none;
}

.dash-activity-row[hidden] {
  display: none;
}

.dash-activity-panel .dash-activity-row {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) calc(var(--spacing-2xl) - var(--spacing-sm));
  margin-inline: var(--spacing-sm);
  border-radius: var(--radius-lg, 16px);
}

.dash-activity-panel .dash-activity-row__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.dash-activity-panel .dash-activity-row__avatar--asset img {
  width: 24px;
  height: 24px;
}

.dash-activity-panel .dash-activity-row__avatar--brand-aws img {
  width: 28px;
  height: 28px;
}

.dash-activity-panel .dash-activity-row__avatar--brand-spotify img {
  width: 25px;
  height: 25px;
}

.dash-activity-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  margin: 0 -12px;
  border-radius: 14px;
  cursor: pointer;
  transition: background var(--dash-transition), transform var(--dash-transition);
}

.dash-activity-row:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(2px);
}

.dash-activity-row__avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.dash-activity-row__avatar--asset {
  background: rgba(255, 255, 255, 0.055);
  color: var(--dash-text);
  overflow: hidden;
}

.dash-activity-row__avatar--asset img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.dash-activity-row__avatar--brand-aws img {
  width: 34px;
  height: 34px;
}

.dash-activity-row__avatar--brand-spotify img {
  width: 31px;
  height: 31px;
}

.dash-activity-row__avatar--income { background: var(--dash-green-soft); color: var(--dash-green); }
.dash-activity-row__avatar--expense { background: var(--dash-red-soft); color: var(--dash-red); }
.dash-activity-row__avatar--transfer { background: var(--dash-purple-soft); color: var(--dash-purple); }

.dash-activity-row__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.dash-activity-row__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--dash-text-subtle);
}

.dash-activity-row__right {
  text-align: right;
}

.dash-activity-row__amount {
  margin: 0;
  font-family: var(--font-numeric);
  font-size: 14px;
  font-weight: 600;
  color: var(--dash-text);
}

.dash-activity-row__date {
  margin: 2px 0 0;
  font-family: var(--font-numeric);
  font-size: 11px;
  color: var(--dash-text-subtle);
}

/* ── Spending ── */

.dash-spending-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block-start: auto;
}

.dash-spending-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
}

.dash-spending-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  color: var(--dash-text-muted);
}

.dash-spending-row__meta {
  min-width: 0;
}

.dash-spending-row__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.dash-spending-row__name {
  font-size: 13px;
  font-weight: 500;
}

.dash-spending-row__amount {
  font-family: var(--font-numeric);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.dash-spending-row__bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px;
  overflow: hidden;
  box-sizing: border-box;
}

.dash-spending-row__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--dash-accent-muted);
  transition: width 600ms ease;
}

.dash-spending-row__pct {
  font-family: var(--font-numeric);
  font-size: 12px;
  color: var(--dash-text-subtle);
  font-weight: 600;
}

/* ── Accounts ── */

.dash-accounts {
  padding: var(--spacing-xl);
  container-type: inline-size;
  border-radius: var(--dash-island-radius);
}

.dash-account-row {
  display: grid;
  grid-template-columns: 36px 1fr auto 16px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 0;
  border-bottom: none;
  color: var(--dash-text);
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--dash-transition);
}

.dash-account-row:where(a, a:visited, a:hover, a:focus-visible) {
  color: var(--dash-text);
  text-decoration: none;
}

.dash-account-row > div:nth-child(2) {
  min-width: 0;
}

.dash-account-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dash-account-row:first-child {
  padding-top: 0;
}

.dash-account-row:hover {
  opacity: 0.85;
}

.dash-account-row__icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.05);
  color: var(--dash-text);
  text-decoration: none;
}

.dash-account-row__icon--asset {
  background: rgba(255, 255, 255, 0.055);
  overflow: hidden;
}

.dash-account-row__icon--asset img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.dash-account-row__icon--blue {
  background: var(--dash-blue-soft);
  color: var(--dash-blue);
}

.dash-account-row__name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--dash-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.dash-account-row__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--dash-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.dash-account-row__balance {
  font-family: var(--font-numeric);
  font-size: 14px;
  font-weight: 600;
  color: var(--dash-text);
  text-align: right;
  white-space: nowrap;
  text-decoration: none;
}

.dash-account-row__chev {
  color: var(--dash-text-subtle);
}

@container (max-width: 360px) {
  .dash-account-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .dash-account-row__chev {
    display: none;
  }
}

/* ── Upcoming ── */

.dash-upcoming {
  padding: 20px;
}

.dash-upcoming--wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.dash-upcoming--wide .dash-card__head {
  grid-column: 1 / -1;
}

.dash-upcoming-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
}

.dash-upcoming-row:last-child {
  padding-bottom: 0;
}

.dash-upcoming-row:first-child {
  padding-top: 0;
}

.dash-upcoming--wide .dash-upcoming-row {
  grid-column: 1 / -1;
  grid-template-columns: 48px minmax(0, 1fr) max-content;
  border-top: none;
}

.dash-upcoming-row__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: var(--dash-radius-btn);
}

.dash-upcoming-row__month {
  font-size: 10px;
  font-weight: 700;
  color: var(--dash-text-subtle);
  letter-spacing: 0.04em;
}

.dash-upcoming-row__day {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.dash-upcoming-row__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.dash-upcoming-row__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--dash-text-subtle);
}

.dash-upcoming-row__right {
  text-align: right;
}

.dash-upcoming-row__amount {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.dash-upcoming-row__status {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 600;
}

.dash-upcoming-row__status--soon {
  color: var(--dash-orange);
}

.dash-upcoming-row__status--ok {
  color: var(--dash-text-subtle);
}

/* ── Quick actions / payment link ── */

.dash-quick {
  padding: 16px 20px;
  min-width: 0;
  max-width: 100%;
  border-radius: var(--dash-island-radius);
}

.dash-quick--actions {
  padding: 18px;
}

.dash-quick--actions .dash-card__head {
  margin-bottom: 14px;
}

.dash-quick__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin-bottom: 10px;
}

.dash-quick__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 76px;
  padding: 16px 10px;
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--dash-text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--dash-transition), color var(--dash-transition), transform var(--dash-transition);
}

.dash-quick__item:hover {
  background: var(--dash-surface-hover);
  color: var(--dash-text);
  transform: translateY(-2px);
}

.dash-quick__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--dash-text-muted);
}

.dash-quick__link-field {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  padding: 7px 8px 7px 12px;
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.035);
}

.dash-quick__link-field input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: none;
  background: transparent;
  color: var(--dash-text-muted);
  font-size: 12px;
  outline: none;
}

.dash-quick__copy {
  padding: 4px 8px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--dash-text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dash-transition), color var(--dash-transition);
}

.dash-quick__copy:hover {
  background: var(--dash-purple-soft);
  color: var(--dash-purple);
}

.dash-quick__link-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dash-quick__promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 76px;
  padding: 16px 10px;
  border-radius: 16px;
  background: var(--dash-surface);
  color: var(--dash-text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dash-transition), color var(--dash-transition), transform var(--dash-transition);
}

.dash-quick__promo:hover {
  background: var(--dash-surface-hover);
  color: var(--dash-text);
  transform: translateY(-2px);
}

.dash-quick__promo svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--dash-text-muted);
}

/* Chart animations */

@keyframes dashDrawLine {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

@keyframes dashFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.dash-donut .dash-donut-seg {
  animation: dashFadeIn 0.6s ease backwards;
}

.dash-donut .dash-donut-seg:nth-child(1) { animation-delay: 0.05s; }
.dash-donut .dash-donut-seg:nth-child(2) { animation-delay: 0.12s; }
.dash-donut .dash-donut-seg:nth-child(3) { animation-delay: 0.19s; }
.dash-donut .dash-donut-seg:nth-child(4) { animation-delay: 0.26s; }

.dash-spending-row__fill {
  width: 0;
}

.dash-spending-row.is-visible .dash-spending-row__fill {
  width: var(--pct);
}

.dash-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Dashboard responsive layout ── */

/* 4 KPI → 2×2 when main column is too narrow for four cards */
@container dash-main-col (max-width: 720px) {
  .dash-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1280px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }

  body.dash-page .dash-content--flat-workspace > .dash-environment-banner {
    inline-size: 100%;
  }

  .dash-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .dash-hero__balance {
    font-size: 56px;
  }
}

@media (max-width: 800px) {
  .dash-hero {
    padding: 20px 16px 18px;
  }

  .dash-hero__label {
    padding-right: 0;
  }

  .dash-hero__row {
    margin-bottom: 18px;
  }

  .dash-hero__balance {
    font-size: 40px;
  }

  .dash-hero__periods {
    top: 24px;
    right: 24px;
  }

  .dash-hero__period {
    padding: 8px 10px;
  }

  .dash-hero__chart {
    height: 148px;
    margin-bottom: 18px;
  }

  .dash-hero__chart-tooltip {
    transform: translate(calc(-100% + 20px), calc(-100% - 12px));
  }

  .dash-hero__chart-tooltip.is-below {
    transform: translate(calc(-100% + 20px), 14px);
  }

  .dash-hero__actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-kpi-row {
    grid-template-columns: 1fr;
  }

  .dash-kpi {
    --dash-kpi-pad: var(--spacing-lg);
  }

  .dash-month-summary {
    padding: var(--spacing-xl);
  }

  .dash-overview > .dash-activity-panel {
    margin: 0 var(--spacing-md) var(--spacing-md);
  }

  .dash-cashflow,
  .dash-activity,
  .dash-spending {
    padding: 18px 16px;
  }

  .dash-accounts,
  .dash-upcoming {
    padding: 16px;
  }

  .dash-upcoming--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-upcoming-row__right {
    min-width: 0;
  }

  .dash-upcoming-row__amount {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .dash-hero__action {
    font-size: 13px;
    padding: 0 10px;
  }
}

/* Settings subpage breadcrumb */
.settings-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--dash-text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.settings-crumb a {
  color: var(--dash-text-muted);
  text-decoration: none;
  transition: color var(--dash-transition);
}

.settings-crumb a:hover,
.settings-crumb a:focus-visible {
  color: var(--dash-text);
}

.settings-crumb__sep {
  color: var(--dash-text-muted);
  opacity: 0.5;
}

.settings-crumb [aria-current="page"] {
  min-width: 0;
  color: var(--dash-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prof-head .settings-crumb,
.team-head .settings-crumb,
.aud-main .settings-crumb {
  margin-bottom: 10px;
}