/* =========================================================================
   Payflow dashboard theme.

   This file loads last, so it is the authoritative token layer: app.css,
   dashboard.css and reference.css each declare their own :root, and the
   cascade resolves in favour of whatever is here. Palette values are sampled
   directly from the approved mockups in payflow_dashboard_mockups/, not
   guessed, so light and dark stay in step with the reference.

   Hand-written, no build step, same as every other file in this directory.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */

:root {
  --font: Inter, "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Surfaces */
  --paper: #f5f8fd;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunk: #f2f5fb;
  --surface-veil: rgba(255, 255, 255, .78);
  --sidebar: #f6f9fe;

  /* Lines */
  --line: #e7ebf6;
  --line-strong: #d3daea;

  /* Ink */
  --ink: #0f1430;
  --ink-soft: #5b6480;
  --ink-faint: #8a93ad;

  /* Accent */
  --accent: #5b4df5;
  --accent-hot: #7c5cf8;
  --accent-ink: #4b3fe0;
  --accent-soft: #eeebfe;
  --accent-line: #d5cdfd;
  --accent-tile: #ebe8fe;
  --accent-tile-ink: #5b4df5;
  --accent-glow: 0 6px 18px rgba(91, 77, 245, .28);

  /* Charts */
  --chart: #6353f6;
  --chart-compare: #b9c1d6;
  --chart-area-top: rgba(99, 83, 246, .22);
  --chart-area-bottom: rgba(99, 83, 246, 0);
  --chart-grid: #edf0f8;

  /* Status */
  --good: #12805c;
  --good-soft: #e3f7ee;
  --good-line: #b6e6cf;
  --good-tile: #e3f7ee;
  --warn: #8a5a08;
  --warn-soft: #fff4e0;
  --warn-line: #f6ddb0;
  --warn-tile: #fff4e0;
  --bad: #c02a3c;
  --bad-soft: #ffeef0;
  --bad-line: #f8ccd3;
  --bad-tile: #ffeef0;
  --info: #1f5fd0;
  --info-soft: #e8f0ff;
  --info-tile: #e8f0ff;

  /* Geometry */
  --radius-xl: 18px;
  --radius: 16px;
  --radius-sm: 11px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-12: 48px;

  /* Type */
  --text-page-title: 34px;
  --text-eyebrow: 11px;

  /* Elevation */
  --shadow: 0 1px 2px rgba(16, 24, 48, .04), 0 10px 24px rgba(16, 24, 48, .05);
  --shadow-soft: 0 1px 2px rgba(16, 24, 48, .04);
  --shadow-pop: 0 12px 32px rgba(16, 24, 48, .12);

  /* Backgrounds: swapped per theme, referenced once below. */
  --bg-page: url('/assets/backgrounds/dashboard-light-desktop.png');
  --bg-card: url('/assets/backgrounds/card-light-desktop.png');
}

/* The root element needs its own background. The palette is declared on <body>
   so the dark block can override it in one place, which means var(--paper) is
   not resolvable here — hence the literals, kept in step with the two token
   blocks below. Without this, any area the body does not cover (a short page
   in a tall window, or overscroll) shows the browser's default white through
   the page. */
html { color-scheme: light; background: #f5f8fd; }
body, button, input, select, textarea { font-family: var(--font); }

body.payflow-dashboard {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Dark palette keeps the same geometry and restrains the status hues so a
   red pill never becomes the brightest thing on the screen. */
html[data-theme="dark"] { color-scheme: dark; background: #0a111c; }
html[data-theme="dark"] body {
  --paper: #0a111c;
  --surface: #141b29;
  --surface-raised: #17203044;
  --surface-sunk: #101825;
  --surface-veil: rgba(15, 23, 35, .82);
  --sidebar: #0f1723;

  --line: #222c42;
  --line-strong: #313c56;

  --ink: #eef1fa;
  --ink-soft: #9ba5c0;
  /* Lifted from #737e9b. Captions, hints, table headers and timestamps all use
     this, and at the old value every one of them landed just under 4.5:1 on the
     card surface — legible but below AA for body-sized text. This clears it on
     --surface, --surface-sunk and --sidebar alike while staying clearly
     subordinate to --ink-soft. */
  --ink-faint: #8791ac;

  --accent: #6757fd;
  --accent-hot: #8b6cff;
  --accent-ink: #b3a9ff;
  /* Only a hover/pressed background now; every text use was moved to
     --accent-ink, which is the accent tuned for reading. Left undefined here,
     it fell through to the light theme's near-black navy and turned the
     primary button's hover state into a dark hole. */
  --accent-strong: #4b3bea;
  --accent-soft: #1b1f4b;
  --accent-line: #3a3384;
  --accent-tile: #241f5c;
  --accent-tile-ink: #b3a9ff;
  --accent-glow: 0 6px 20px rgba(87, 71, 253, .38);

  --chart: #7a67ff;
  --chart-compare: #7c88ab;
  --chart-area-top: rgba(122, 103, 255, .3);
  --chart-area-bottom: rgba(122, 103, 255, 0);
  --chart-grid: #1f2839;

  --good: #4ade80;
  --good-soft: #102f22;
  --good-line: #1d5a3d;
  --good-tile: #12351f;
  --warn: #fbbf24;
  --warn-soft: #33260c;
  --warn-line: #5d461a;
  --warn-tile: #33260c;
  /* A shade brighter than the sampled green so the delta and status chips clear
     AA against their own soft backgrounds in this theme. */
  --good: #56e096;
  --bad: #fb7185;
  --bad-soft: #3a1420;
  --bad-line: #6a2534;
  --bad-tile: #3a1420;
  --info: #7dd3fc;
  --info-soft: #0d2b3d;
  --info-tile: #0d2b3d;

  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .28);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, .45);

  --bg-page: url('/assets/backgrounds/dashboard-dark-desktop.png');
  --bg-card: url('/assets/backgrounds/card-dark-desktop.png');

  background: var(--paper);
  color: var(--ink);
}

/* --------------------------------------------------------------- app shell */

.payflow-dashboard .shell {
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100dvh;
}

.payflow-dashboard .sidebar {
  min-width: 0;
  padding: 16px 12px 20px;
  gap: 14px;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
}

/* The artwork is pinned top-centre so the swoosh lands behind the page heading
   exactly as the mockups show it.

   It rides on its own layer rather than on .main's background, because the
   image is finite (1672x941, drawn at 1920px wide so ~1081px tall) and any page
   longer than that ends the artwork on a hard horizontal edge against --paper.
   A mask fades the bottom out instead, so there is nothing to see where the
   two meet. Masking .main itself would fade the content with it. */
.payflow-dashboard .main {
  position: relative;
  min-width: 0;
  background-color: var(--paper);
}
.payflow-dashboard .main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1081px;
  background-image: var(--bg-page);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 1920px auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* The top bar and the page body sit above the artwork layer. The bar needs to
   outrank the content as well, not just the artwork: its menus open downwards
   over the page, and at equal z-index the later sibling wins, which would put
   .content over an open popover and swallow the clicks. */
.payflow-dashboard .main > * { position: relative; z-index: 1; }
.payflow-dashboard .main > .st-topbar { z-index: 30; }
/* Same reasoning for the page head, whose actions slot can hold a menu. */
.payflow-dashboard .main > .st-pagehead { z-index: 20; }

/* ----------------------------------------------------------- workspace card */

.st-account { margin: 0 2px 8px; }
.st-account > summary {
  min-height: 52px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.st-account > summary:hover { background: var(--accent-soft); }
.st-account__avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--accent-hot), var(--accent));
  box-shadow: var(--accent-glow);
  color: #fff;
  font-weight: 700;
}
.st-account__copy { gap: 1px; }
.st-account__copy strong {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}
.st-account__copy span { color: var(--ink-faint); font-size: 11.5px; }
.st-account__menu {
  border-radius: var(--radius);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}

/* ------------------------------------------------------------------ sidebar */

.payflow-dashboard .nav { padding: 0 2px; gap: 2px; }
.payflow-dashboard .nav__section {
  padding: 18px 12px 6px;
  color: var(--ink-faint);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.payflow-dashboard .nav__link,
.st-nav__fold > summary {
  position: relative;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
}
.payflow-dashboard .nav__link svg,
.st-nav__fold > summary svg { color: var(--ink-faint); }
.payflow-dashboard .nav__link:hover,
.st-nav__fold > summary:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}
.payflow-dashboard .nav__link[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: none;
}
.payflow-dashboard .nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.payflow-dashboard .nav__link[aria-current="page"] svg { color: var(--accent-tile-ink); }
.payflow-dashboard .nav__link--sub { min-height: 36px; padding-left: 34px; font-size: 13.5px; }
.payflow-dashboard .nav__count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--bad-soft);
  color: var(--bad);
  font-size: 11px;
  font-weight: 600;
}
.st-nav__chevron { color: var(--ink-faint); }

/* Sidebar footer. margin-top:auto pins it to the bottom of the rail, which
   needs the rail itself to be a column flex container. */
.payflow-dashboard .sidebar { display: flex; flex-direction: column; }
.payflow-dashboard .nav--foot {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------- topbar */

.st-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 64px;
  padding: 10px 28px;
  background: var(--surface-veil);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.payflow-dashboard .header-search {
  height: 42px;
  max-width: 540px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.payflow-dashboard .header-search svg { color: var(--ink-faint); }
.payflow-dashboard .header-search input { color: var(--ink); font-size: 13.5px; }
.payflow-dashboard .header-search input::placeholder { color: var(--ink-faint); }
.payflow-dashboard .header-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 77, 245, .14);
}
.search-shortcut {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-sunk);
  color: var(--ink-faint);
  font-size: 11px;
}
.payflow-dashboard .utility-button {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}
.payflow-dashboard .utility-button:hover {
  background: var(--surface-sunk);
  border-color: transparent;
  color: var(--ink);
}
.utility-indicator { background: var(--bad); }
.theme-toggle { border: 1px solid transparent; }
.payflow-dashboard .utility-button svg.theme-toggle__sun,
.authcard__tools .utility-button svg.theme-toggle__sun { display: block; }
.payflow-dashboard .utility-button svg.theme-toggle__moon,
.authcard__tools .utility-button svg.theme-toggle__moon { display: none; }
html[data-theme="dark"] .payflow-dashboard .utility-button svg.theme-toggle__sun,
html[data-theme="dark"] .authcard__tools .utility-button svg.theme-toggle__sun { display: none; }
html[data-theme="dark"] .payflow-dashboard .utility-button svg.theme-toggle__moon,
html[data-theme="dark"] .authcard__tools .utility-button svg.theme-toggle__moon { display: block; }
.utility-popover {
  border-radius: var(--radius);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}

/* Signed-in identity cluster, top right. */
.st-identity { position: relative; margin-left: 4px; }
.st-identity > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
}
.st-identity > summary::-webkit-details-marker { display: none; }
.st-identity > summary:hover { background: var(--surface-sunk); }
.st-identity__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--accent-hot), var(--accent));
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.st-identity__copy { display: grid; line-height: 1.25; min-width: 0; }
.st-identity__copy strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.st-identity__copy span { font-size: 11.5px; color: var(--ink-faint); }
.st-identity__caret { width: 14px; height: 14px; fill: none; stroke: var(--ink-faint); stroke-width: 1.6; }
.st-identity .utility-popover { right: 0; min-width: 240px; }
@media (max-width: 1100px) { .st-identity__copy { display: none; } }

/* ---------------------------------------------------------------- page head */

.st-pagehead {
  padding: var(--space-7) var(--space-7) 0;
  align-items: flex-start;
  gap: var(--space-4);
}
.st-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-faint);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.st-pagehead h1,
.st-today__head h1,
.st-overview__head h2,
.section-heading h2 { color: var(--ink); }
.st-pagehead h1 {
  font-size: var(--text-page-title);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.st-pagehead__sub {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.st-pagehead__actions { gap: 10px; }

/* --------------------------------------------------------------- content */

.payflow-dashboard .content {
  padding: var(--space-6) var(--space-7) var(--space-12);
  gap: var(--space-5);
}

/* ------------------------------------------------------------------- cards */

.payflow-dashboard :is(.card, .st-side-card, .st-metric-card, .st-settings__card, .operational-section, .st-today__main) {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.payflow-dashboard :is(.card__head, .card__header) {
  background: transparent;
  border-color: var(--line);
  min-height: 60px;
}
.payflow-dashboard .card__foot {
  background: var(--surface-sunk);
  border-color: var(--line);
}
.payflow-dashboard :is(.card__head, .card__header) h2,
.st-table-card__head h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.section-description, .payflow-dashboard .muted { color: var(--ink-soft); }

/* A titled card header with a tinted glyph tile, as used across the
   reference for Insights, Quick actions, Payment mix and so on. */
.st-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  margin-right: 10px;
  border-radius: 9px;
  background: var(--accent-tile);
  color: var(--accent-tile-ink);
}
.st-card-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.st-card-title { display: flex; align-items: center; min-width: 0; }

/* ------------------------------------------------------- KPI / metric strip */

.st-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
}
.st-kpi {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.st-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-tile);
  color: var(--accent-tile-ink);
}
.st-kpi__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.st-kpi__icon--good { background: var(--good-tile); color: var(--good); }
.st-kpi__icon--warn { background: var(--warn-tile); color: var(--warn); }
.st-kpi__icon--bad { background: var(--bad-tile); color: var(--bad); }
.st-kpi__icon--info { background: var(--info-tile); color: var(--info); }
.st-kpi__body { display: grid; gap: 4px; min-width: 0; }
.st-kpi__label { color: var(--ink-soft); font-size: 13px; font-weight: 500; }
.st-kpi__value {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--ink);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.st-kpi__value .money__currency { font-size: .55em; font-weight: 600; color: var(--ink-soft); }
.st-kpi__foot { color: var(--ink-faint); font-size: 12.5px; }

/* Delta chip. Colour carries the direction, the arrow repeats it for anyone
   who cannot see the colour. */
.st-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.st-delta--up { background: var(--good-soft); color: var(--good); }
.st-delta--down { background: var(--bad-soft); color: var(--bad); }
.st-delta::before { font-size: 11px; line-height: 1; }
.st-delta--up::before { content: "\2191"; }
.st-delta--down::before { content: "\2193"; }

/* --------------------------------------------------------------- today hero */

.st-today { gap: var(--space-5); }
.payflow-dashboard .st-today__main { padding: var(--space-6); }
.st-today__head h1 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.st-today__metrics { gap: var(--space-12); margin: var(--space-4) 0 var(--space-2); }
.st-today__metric-label { color: var(--ink-soft); font-size: 13px; font-weight: 500; }
.st-today__metric strong {
  color: var(--ink);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.035em;
}
.st-today__when { color: var(--ink-faint); font-size: 12px; }
.st-today__metric + .st-today__metric strong { color: var(--ink); }
.st-today__foot {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.st-today__foot-label { color: var(--ink-soft); font-size: 13px; }
.st-today__foot strong { color: var(--ink); font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.st-today__foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}
.st-today__foot a:hover { background: var(--accent-soft); text-decoration: none; }

/* ------------------------------------------------------------ quick actions */

.st-side-card { padding: var(--space-5); }
.st-side-card h2 { color: var(--ink); font-size: 15.5px; font-weight: 600; }
.quick-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.quick-link:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  text-decoration: none;
}
.quick-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  border: 1px solid transparent;
  background: var(--accent-tile);
  color: var(--accent-tile-ink);
}
.quick-link__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.quick-link__icon--good { background: var(--good-tile); color: var(--good); }
.quick-link__icon--info { background: var(--info-tile); color: var(--info); }
.quick-link__copy { display: grid; gap: 2px; min-width: 0; }
.quick-link__copy strong { font-size: 13.5px; font-weight: 600; }
.quick-link__copy span { color: var(--ink-faint); font-size: 12px; }
.quick-link__go { margin-left: auto; color: var(--ink-faint); }

.quick-links { display: grid; gap: 8px; }
.st-today__aside { display: grid; align-content: start; gap: var(--space-4); }

/* --------------------------------------------------------------- page hero */

.payflow-dashboard .dashboard-welcome.st-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-2) 0 var(--space-1);
  border: 0;
  background: none;
  box-shadow: none;
}
.st-hero__copy { min-width: 0; }
.st-hero__copy h1 {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-page-title);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.14;
}
.st-hero__wave { margin-left: 6px; font-size: .86em; }
.st-hero__copy p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.st-hero__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-hero__actions .btn { height: 42px; padding: 0 16px; gap: 8px; }
.st-hero__actions .btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.st-hero__actions .btn--primary { font-size: 14px; }

/* Compact period chooser. A <details> rather than a scripted menu, because
   live-updates.js deliberately skips a refresh while a <details> is open. */
.st-period { position: relative; }
.st-period > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
}
.st-period > summary::-webkit-details-marker { display: none; }
.st-period__caret { width: 14px; height: 14px; margin-left: 2px; }
.st-period .utility-popover { right: 0; min-width: 180px; }

/* ------------------------------------------------------------- promo card */

/* Marketing panel from the reference home page. Static copy and artwork
   only, it reports no figures. */
.st-promo {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background-color: var(--accent);
  background-image: var(--bg-card);
  background-size: cover;
  background-position: center;
  color: #fff;
  box-shadow: var(--shadow);
}
.st-promo__eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.st-promo h2 {
  margin: 0;
  max-width: 15ch;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.22;
}
.st-promo p {
  margin: 0;
  max-width: 26ch;
  /* Full white. Anything translucent lands under AA against the card's purple. */
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
}
/* The light artwork needs dark copy; dark mode retains the white treatment. */
html[data-theme="light"] .st-promo h2,
html[data-theme="light"] .st-promo p {
  color: #111936;
}
.st-promo__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
}
.st-promo__cta:hover { background: #fff; text-decoration: none; box-shadow: var(--shadow-pop); }
.st-promo__art {
  position: absolute;
  right: -18px;
  bottom: -14px;
  width: 148px;
  height: 148px;
  pointer-events: none;
  background: url('/assets/backgrounds/link-card.png') center / contain no-repeat;
  filter: drop-shadow(0 12px 22px rgba(10, 8, 40, .38));
}
@media (max-width: 1240px) { .st-promo__art { display: none; } }

/* ------------------------------------------------------------ period pills */

.payflow-dashboard .st-pills {
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.payflow-dashboard .st-pills a {
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
}
.payflow-dashboard .st-pills a:hover { background: var(--surface); color: var(--ink); }
.payflow-dashboard .st-pills a[aria-current="page"] {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--accent-glow);
}
.st-pills__label, .st-pills__meta { background: transparent; border-color: transparent; color: var(--ink-faint); }

.payflow-dashboard .st-chip {
  border-color: var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
}
.payflow-dashboard .st-chip:hover { background: var(--surface-sunk); color: var(--ink); }
.payflow-dashboard .st-chip.is-active {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ----------------------------------------------------------------- buttons */

.payflow-dashboard .btn, .authcard .btn {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}
.payflow-dashboard .btn:hover, .authcard .btn:hover {
  background: var(--surface-sunk);
  border-color: var(--line-strong);
}
.payflow-dashboard .btn--primary, .authcard .btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-hot), var(--accent));
  color: #fff;
  box-shadow: var(--accent-glow);
}
.payflow-dashboard .btn--primary:hover, .authcard .btn--primary:hover {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-hot));
}
.payflow-dashboard .btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }

/* ------------------------------------------------------------------ inputs */

body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]), select, textarea) {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
}
body :is(input, select, textarea):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 77, 245, .14);
  outline: none;
}
body input[readonly] { background: var(--surface-sunk) !important; color: var(--ink-soft); }
body .field > label, body .field__label, body label.field { color: var(--ink-soft); font-size: 12.5px; font-weight: 500; }
body .field__hint { color: var(--ink-faint); }

/* A single horizontal control bar: date range, selects, search, export. */
.st-controlbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.st-controlbar__search { flex: 1 1 260px; min-width: 200px; height: 42px; max-width: none; }
.st-controlbar__select { display: inline-flex; }
.st-controlbar__select select { height: 42px; padding-inline: 12px; }
.st-controlbar__export { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.st-controlbar .btn { height: 42px; padding: 0 14px; gap: 8px; }
.st-controlbar .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Visually hidden, still announced. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ tables */

.payflow-dashboard .tablewrap { border-radius: 0 0 var(--radius) var(--radius); }
.payflow-dashboard table.data { font-size: 13.5px; }
.payflow-dashboard table.data th {
  padding: 11px 16px;
  background: var(--surface-sunk);
  border-color: var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.payflow-dashboard table.data td {
  padding: 13px 16px;
  border-color: var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.payflow-dashboard table.data tbody tr:hover,
.payflow-dashboard table.data tbody tr:focus-within { background: var(--surface-sunk); }
.payflow-dashboard table.data tbody tr:last-child td { border-bottom: 0; }
.payflow-dashboard .st-table-card__head { min-height: 64px; }
.st-table-card__count { color: var(--ink-faint); font-weight: 500; }

/* Customer cell: initials medallion plus two lines of identity. */
.st-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-person__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--accent-tile);
  color: var(--accent-tile-ink);
  font-size: 11.5px;
  font-weight: 700;
}
.st-person__copy { display: grid; gap: 1px; min-width: 0; }
.st-person__copy strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.st-person__copy span { font-size: 12px; color: var(--ink-faint); }

.payment-identity__ref {
  display: inline-block;
  max-width: 100%;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.payment-identity__customer { margin-top: 3px; color: var(--ink-soft); font-size: 12px; }
.payment-identity__customer a { color: var(--ink-soft); }
.money { font-variant-numeric: tabular-nums; }
.money__currency { margin-left: 4px; color: var(--ink-faint); font-size: .82em; font-weight: 500; }
.unknown { color: var(--ink-faint); font-style: normal; }

/* The method cell is PromptPay or a bank, never a card scheme: the platform
   supports one method and inventing brand marks would misdescribe it. */
.st-method { display: inline-flex; align-items: center; gap: 8px; }
.st-method__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  background: var(--accent-tile);
  color: var(--accent-tile-ink);
}
.st-method__mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ------------------------------------------------------------------- pills */

.payflow-dashboard .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.payflow-dashboard .pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.payflow-dashboard .pill--good, .payflow-dashboard .payment-status--good { background: var(--good-soft); border-color: var(--good-line); color: var(--good); }
.payflow-dashboard .pill--warn, .payflow-dashboard .payment-status--warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.payflow-dashboard .pill--bad, .payflow-dashboard .payment-status--bad { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }
.payflow-dashboard .pill--info { background: var(--info-soft); border-color: transparent; color: var(--info); }
.payflow-dashboard .pill--muted { background: var(--surface-sunk); border-color: var(--line); color: var(--ink-soft); }

/* ------------------------------------------------------------------ notices */

.payflow-dashboard .notice { border-radius: var(--radius); border-width: 1px; }
.payflow-dashboard .notice--ok { background: var(--good-soft); border-color: var(--good-line); color: var(--good); }
.payflow-dashboard .notice--warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.payflow-dashboard .notice--bad { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }
.payflow-dashboard .notice--info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.st-sandbox { background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--warn-line); }
.st-sandbox__badge { background: var(--warn); color: var(--paper); border-radius: var(--radius-pill); }
.banner--live { background: var(--bad-soft); color: var(--bad); border-bottom: 1px solid var(--bad-line); }

/* ------------------------------------------------------------------ charts */

/* The scale sits on the left of the plot in the approved design, so the frame
   is laid out explicitly rather than by append order. */
.st-chart__frame {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 20px;
  width: 100%;
  height: 188px;
}
.st-chart--today .st-chart__frame { grid-template-columns: 56px minmax(0, 1fr); height: 214px; }
.st-chart--small .st-chart__frame { grid-template-columns: 42px minmax(0, 1fr); height: 132px; }
.st-chart__y { grid-column: 1; grid-row: 1; position: relative; }
.st-chart--today .st-chart__y { display: block; }
.st-chart__canvas { grid-column: 2; grid-row: 1; }
.st-chart__x { grid-column: 2; grid-row: 2; }
.st-chart__y span {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.st-chart { min-height: 188px; }
.st-chart--today { min-height: 214px; }
.st-chart--small { min-height: 132px; }
/* Comparison legends are chrome the reference keeps off the compact cards. */
.st-chart--small .st-chart__legend { display: none; }

.st-chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.st-chart__bar { fill: var(--chart); opacity: .92; }
.st-chart__bar:last-of-type { fill: var(--accent-hot); }
.st-chart__line { stroke: var(--chart); stroke-width: 2.25; }
.st-chart__line--dashed { stroke: var(--chart-compare); stroke-dasharray: 4 4; stroke-width: 1.75; opacity: .9; }
/* The fill is a per-chart gradient reference set as an attribute by app.js,
   so no fill is declared here: a CSS fill would override it. */
.st-chart__area { stroke: none; }
.st-chart__stop--top { stop-color: var(--chart-area-top); }
.st-chart__stop--bottom { stop-color: var(--chart-area-bottom); }
.st-chart__dot { fill: var(--chart); stroke: var(--surface); stroke-width: 2; }
.st-chart__dot--compare { fill: var(--chart-compare); stroke: var(--surface); stroke-width: 1.5; }
/* No opacity here on purpose. The renderer shows and hides the crosshair by
   setting the opacity attribute, and a declaration in CSS outranks a
   presentation attribute — which left the crosshair parked at the first
   observation of every chart instead of following the pointer. */
.st-chart__crosshair { stroke: var(--chart); stroke-width: 1; stroke-dasharray: 4 4; }
.st-chart__hover-dot { fill: var(--chart); stroke: var(--surface); stroke-width: 3; }
.st-chart__hover-dot--compare { fill: var(--chart-compare); }
.st-chart__now { fill: var(--chart); stroke: var(--surface); stroke-width: 3; }
.st-chart__y { color: var(--ink-faint); font-size: 11px; }
.st-chart__x { color: var(--ink-faint); font-size: 11.5px; }
.st-chart__axis { fill: var(--ink-faint); }
.st-chart__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 12px;
}
.st-chart__legend-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.st-chart__legend-swatch { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--chart); }
.st-chart__legend-swatch--compare {
  width: 18px;
  height: 0;
  border-top: 2px dashed var(--chart-compare);
  border-radius: 0;
  background: transparent;
}
.st-chart__tooltip {
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  font-size: 12.5px;
}
.st-chart__tooltip strong { border-color: var(--line); color: var(--ink); font-weight: 700; }
.st-chart__empty, .st-chart__loading { background: var(--surface); border-color: var(--line); }
.st-chart__pill { background: var(--surface-sunk); border-radius: var(--radius-pill); color: var(--ink-faint); }
.st-tip-row { color: var(--ink-soft); }
.st-tip-row b { color: var(--ink); }

/* ------------------------------------------------------------ metric cards */

.st-overview__grid { gap: var(--space-4); }
.payflow-dashboard .st-metric-card { padding: var(--space-5); }
.st-metric-card header { gap: 4px; margin-bottom: var(--space-3); }
.st-metric-card h3, .st-metric-card header h3 { color: var(--ink-soft); font-size: 13px; font-weight: 500; }
.st-metric-card header strong {
  color: var(--ink);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.st-metric-card header span { color: var(--ink-faint); font-size: 12.5px; }
.st-overview__title h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.st-overview__title p { margin: 4px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.st-overview__head { align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.st-top-customers { display: grid; gap: 2px; }
.st-top-customers li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.st-top-customers li:last-child { border-bottom: 0; }
.st-top-customers span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- status donut */

.status-donut__track { stroke: var(--surface-sunk); }
.status-donut__legend { gap: 2px; }
.status-donut__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 9px;
  color: var(--ink);
  font-size: 13px;
}
.status-donut__item:hover, .status-donut__item.is-active { background: var(--surface-sunk); text-decoration: none; }
.status-donut__center strong { color: var(--ink); font-weight: 700; letter-spacing: -.03em; }
.status-donut__center span { color: var(--ink-faint); font-size: 12px; }
.status-breakdown__track { background: var(--surface-sunk); }
.status-breakdown__fill { background: var(--chart); }
.status-breakdown__track > span { background: var(--chart); }
.activity-chart__track { background: var(--surface-sunk); border-bottom-color: var(--line); }
/* The bar is an inline-styled span inside the track, not its own class. */
.activity-chart__track > span { background: linear-gradient(180deg, var(--accent-hot), var(--accent)); border-radius: 4px 4px 0 0; }
.activity-chart__count { color: var(--ink-faint); font-size: 11px; }
.activity-chart__date { color: var(--ink-faint); font-size: 11px; }
.activity-chart__column:hover > .activity-chart__track > span { background: var(--accent-hot); }

/* Secondary in-page tabs. */
.st-tabs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.st-tabs a {
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 500;
}
.st-tabs a:hover { color: var(--ink); text-decoration: none; }
.st-tabs a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.st-tabs--inline { border-bottom: 0; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
}
.report-context { color: var(--ink-faint); font-size: 12.5px; }
.report-context__dot { background: var(--good); }
.st-report-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
}
.st-report-link:last-child { border-bottom: 0; }
.st-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--chart); }
.st-swatch--available, .st-swatch--compare { background: var(--chart-compare); }
.st-swatch--incoming, .st-swatch--current { background: var(--chart); }
.st-balance-bar { background: var(--surface-sunk); }
.st-balance-bar__incoming { background: linear-gradient(90deg, var(--accent), var(--accent-hot)); }

/* --------------------------------------------------- attention and health */

.attention-list { display: grid; gap: 8px; }
.attention-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
}
.attention-row:hover { border-color: var(--accent-line); background: var(--surface-sunk); text-decoration: none; }
.attention-row strong { display: block; font-size: 13.5px; font-weight: 600; }
.attention-row small { color: var(--ink-faint); font-size: 12px; }
.attention-row b { margin-left: auto; font-size: 15px; font-variant-numeric: tabular-nums; }
.attention-row__signal { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ink-faint); }
.attention-row--quiet .attention-row__signal { background: var(--good); }
.attention-row--warn .attention-row__signal { background: var(--warn); }
.attention-row--bad .attention-row__signal { background: var(--bad); }
.health-grid { gap: var(--space-4); }
.health-item {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.health-item h3 { color: var(--ink-soft); font-size: 13px; font-weight: 500; }
.health-item strong { color: var(--ink); font-size: 15px; font-weight: 600; }
.health-item p { color: var(--ink-soft); font-size: 12.5px; }
.health-item .status-dot { background: var(--ink-faint); }
.health-item--good .status-dot { background: var(--good); }
.health-item--warn .status-dot { background: var(--warn); }
.health-item--bad .status-dot { background: var(--bad); }
.health-item--info .status-dot { background: var(--info); }
.metric-card--plain {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.metric-card__label { color: var(--ink-soft); font-size: 13px; font-weight: 500; }
.metric-card--plain strong { color: var(--ink); font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.metric-card--plain small { color: var(--ink-faint); font-size: 12.5px; }
.metric-card--attention { border-color: var(--warn-line); }

/* ------------------------------------------------- pagination, empty, misc */

.pagination a, .pagination button, .row-menu summary {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}
.pagination a:hover, .pagination button:hover, .row-menu summary:hover { background: var(--surface-sunk); color: var(--ink); }
.pagination [aria-current="page"] { border-color: transparent; background: var(--accent); color: #fff; }
.empty, .empty-table, .empty-links { color: var(--ink-soft); }
.empty__title, .empty-links h3 { color: var(--ink); font-weight: 600; }
.empty__hint { color: var(--ink-faint); }
.freshness { color: var(--ink-faint); font-size: 12px; }
.freshness--stale { color: var(--warn); }
.quick-link, .st-key-row, .st-method-row { border-color: var(--line); color: var(--ink); }
.st-settings__icon { background: var(--accent-tile); border-color: transparent; color: var(--accent-tile-ink); }
.language-switcher { background: var(--surface-sunk); border-color: var(--line); border-radius: var(--radius-sm); }
.language-switcher a { color: var(--ink-soft); }
.language-switcher a[aria-current="true"] { background: var(--accent); color: #fff; border-radius: 8px; }
.range-popover, .st-account__menu {
  border-radius: var(--radius);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.st-devbar { background: var(--surface); border-top: 1px solid var(--line); }
.st-devbar__link, .st-devbar__tools a { color: var(--ink-soft); }
.st-devbar__tools a:hover { background: var(--surface-sunk); color: var(--ink); }
.skip-link:focus { background: var(--accent); color: #fff; }
:where(a):focus-visible, :where(button):focus-visible, :where(summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------- auth pages */

.authpage {
  background-color: var(--paper);
  background-image: var(--bg-page);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}
.authcard {
  border-radius: var(--radius-xl);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.authcard__title { color: var(--ink); }
.authcard__sub { color: var(--ink-soft); }
.authcard__tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.authcard__tools .utility-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.authcard__tools .language-switcher { margin-left: 0; }

/* ------------------------------------------------------- responsive artwork */

/* The three artwork sizes exist so a tablet or phone is not served a 1920px
   plate. Swap the asset, not the layout. */
@media (max-width: 1280px) {
  :root { --bg-page: url('/assets/backgrounds/dashboard-light-tablet.png'); --bg-card: url('/assets/backgrounds/card-light-tablet.png'); }
  html[data-theme="dark"] body { --bg-page: url('/assets/backgrounds/dashboard-dark-tablet.png'); --bg-card: url('/assets/backgrounds/card-dark-tablet.png'); }
  .payflow-dashboard .main::before { background-size: 1280px auto; height: 960px; }
}

@media (max-width: 900px) {
  :root { --bg-page: url('/assets/backgrounds/dashboard-light-mobile.png'); --bg-card: url('/assets/backgrounds/card-light-mobile.png'); }
  html[data-theme="dark"] body { --bg-page: url('/assets/backgrounds/dashboard-dark-mobile.png'); --bg-card: url('/assets/backgrounds/card-dark-mobile.png'); }
  :root { --text-page-title: 26px; }

  .payflow-dashboard .main::before { background-size: 900px auto; height: 1600px; }
  .payflow-dashboard .shell { grid-template-columns: 1fr; min-height: 0; height: auto; align-content: start; }
  .payflow-dashboard .sidebar { display: block; height: 72px; min-height: 72px; padding: 12px 16px; position: relative; }
  .payflow-dashboard.is-nav-open .sidebar { height: auto; }
  .payflow-dashboard .st-account { margin: 0; max-width: calc(100% - 80px); }
  .payflow-dashboard .st-nav-toggle { top: 18px; right: 16px; margin: 0; }
  .st-topbar { padding-inline: 16px; position: static; }
  .st-pagehead, .payflow-dashboard .content { padding-left: 16px; padding-right: 16px; }
  .st-today__metrics { gap: var(--space-6); }
  .st-kpi-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ----------------------------------------------- metric card header, design */

/* Each card in "Your overview" leads with a tinted glyph beside its name,
   then the figure and its movement on one line, then the comparison caption.
   The grid rows are declared here rather than relying on source order so the
   caption cannot end up between the figure and the chip. */
.st-metric-card header { display: grid; gap: 6px; }
.st-metric-card h3,
.st-metric-card header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
}
.st-metric-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  background: var(--accent-tile);
  color: var(--accent-tile-ink);
}
.st-metric-card__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.st-metric-card__icon--good { background: var(--good-tile); color: var(--good); }
.st-metric-card__icon--warn { background: var(--warn-tile); color: var(--warn); }
.st-metric-card__icon--bad { background: var(--bad-tile); color: var(--bad); }
.st-metric-card__icon--info { background: var(--info-tile); color: var(--info); }

.st-metric-card__value {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.st-metric-card__value strong {
  color: var(--ink);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}

/* ------------------------------------------------------------- promo card */

/* The promotion is a single target: the whole panel is clickable rather than
   carrying a button, which is how the design draws it. The anchor is laid
   over the card and the artwork sits above it so the glyph stays visible. */
.st-promo__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.st-promo__link:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.st-promo__art { z-index: 2; }

/* --------------------------------------------- appearance switch, account */

/* The theme switch moved out of the top bar, which the design keeps to four
   utilities, and into the account menu. */
.st-identity__theme {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.st-identity__theme:hover { background: var(--surface-sunk); }
.st-identity__theme svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.st-identity__theme svg.theme-toggle__sun { display: block; }
.st-identity__theme svg.theme-toggle__moon { display: none; }
html[data-theme="dark"] .st-identity__theme svg.theme-toggle__sun { display: none; }
html[data-theme="dark"] .st-identity__theme svg.theme-toggle__moon { display: block; }

/* The hidden attribute has to win over the layout rule that gives .freshness
   a display value, otherwise marking the node hidden has no effect. The home
   page keeps the stamp in the DOM for live-updates.js to write into without
   showing a refresh cadence the design does not carry. */
.freshness[hidden] { display: none; }

/* ------------------------------------------------- search field, top bar */

/* The field fills the bar up to its maximum and the shortcut hint sits at the
   far end of it, so the placeholder has the whole width to be read in rather
   than being clipped by a badge parked mid-field. */
.payflow-dashboard .header-search { display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.payflow-dashboard .header-search svg { width: 17px; height: 17px; flex: none; }
.payflow-dashboard .header-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
}
.payflow-dashboard .header-search .search-shortcut { flex: none; margin-left: auto; }

/* ------------------------------------------------------ today hero columns */

/* The aside carries four action rows whose supporting lines must not wrap, so
   the rail is wider than a default sidebar column and the gutter matches the
   grid gap used across the overview. */
.payflow-dashboard .st-today {
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: var(--space-6);
}
@media (max-width: 1240px) {
  .payflow-dashboard .st-today { grid-template-columns: minmax(0, 1fr); }
  .payflow-dashboard .st-today__aside { position: static; }
}

/* ----------------------------------------------------------- period pills */

/* The pill group is read as a segmented control; naming it again in front of
   the segments only repeats the section heading above it. */
.st-pills__label { display: none; }

/* The currency picker is a menu, so it carries the same caret as the period
   chooser rather than looking like a plain button. */
.currency-picker > summary { display: inline-flex; align-items: center; gap: 6px; }
.currency-picker > summary::-webkit-details-marker { display: none; }

/* ------------------------------------------------------------ promo card */

/* Keep the copy clear of the artwork. Without a ceiling the paragraph runs
   under the glyph and the last word disappears into it. */
.st-promo h2 { max-width: 13ch; }
.st-promo p { max-width: 21ch; }
.st-promo__art { width: 124px; height: 124px; right: -10px; bottom: -8px; }

/* --------------------------------------------------------- sidebar footer */

/* The footer group is separated by spacing rather than a rule, which is how
   the design closes the rail. */
.payflow-dashboard .nav--foot { border-top: 0; margin-top: auto; padding-top: var(--space-4); }

/* The hero key is the last item in the figures row and is pushed to the far
   edge, aligned with the metric labels rather than the amounts below them. */
.st-today__legend { margin-left: auto; align-self: flex-start; padding-top: 2px; }

/* Two lines, as the design sets it: the ceiling is just under the width of
   "Streamline payments" so the first line breaks after the first word. */
.st-promo h2 { max-width: 18ch; font-size: 19px; }

/* ------------------------------------------- metric card density, design */

/* The design fits nine of these cards on the page, so the card is sized to
   its contents rather than to a floor. reference.css sets a 220px minimum and
   a 140px chart, which together leave a band of empty space under every plot. */
.payflow-dashboard .st-metric-card { min-height: 0; padding: 16px 16px 12px; }
.payflow-dashboard .st-metric-card header { margin-bottom: 10px; }
.payflow-dashboard .st-metric-card .st-chart { min-height: 0; }
.payflow-dashboard .st-chart--small { min-height: 0; }
.payflow-dashboard .st-chart--small .st-chart__frame { height: 116px; grid-template-rows: minmax(0, 1fr) 18px; }

/* The list card has no plot to fill the same space, so it keeps a floor that
   matches the height its neighbours settle at. */
.payflow-dashboard .st-metric-card--list { min-height: 196px; }

/* ------------------------------------------------- today card density */

/* The hero card sits above the fold with the overview grid, so its chart and
   footer are sized to leave "Your overview" visible rather than pushing it
   off the first screen. */
.payflow-dashboard .st-today__main { padding: var(--space-5) var(--space-6); }
.st-today__metrics { margin: var(--space-3) 0 var(--space-4); }
.payflow-dashboard .st-chart--today { min-height: 0; }
.payflow-dashboard .st-chart--today .st-chart__frame { height: 186px; }
.st-today__foot { margin-top: var(--space-3); padding-top: var(--space-4); }

/* ------------------------------------------------------ aside density */

/* The aside sets the height of the hero row, so its two cards are what decide
   whether "Your overview" is reachable on the first screen. Both are sized to
   the density the design uses. */
.payflow-dashboard .st-side-card { padding: var(--space-4); }
.payflow-dashboard .st-side-card header { margin-bottom: var(--space-3); }
.st-today__aside { gap: var(--space-3); }

.payflow-dashboard .quick-link { padding: 10px; gap: 10px; }
.payflow-dashboard .quick-link__icon { width: 34px; height: 34px; border-radius: 10px; }
.payflow-dashboard .quick-link__icon svg { width: 17px; height: 17px; }
.quick-links { gap: 6px; }

.payflow-dashboard .st-promo { padding: 18px; gap: 6px; }

/* --------------------------------------------------- first-screen rhythm */

/* The design fits the greeting, the Today card and the first row of overview
   cards onto one screen at 1536x864. These are the trims that keep it there:
   a shorter bar, less air above the greeting, and tighter copy in the two
   aside cards, which are what set the height of the hero row. */
.st-topbar { min-height: 56px; padding: 8px 28px; }
.payflow-dashboard .content { padding-top: var(--space-4); }

.payflow-dashboard .quick-link { padding: 8px 10px; }
.payflow-dashboard .st-promo { padding: 15px 18px; }
.st-promo h2 { line-height: 1.16; }
.st-promo p { line-height: 1.35; }

/* ===================================================== operational panels */

/* Each section below the overview grid is one card in the design: the heading
   sits inside the same border as its contents rather than floating above a
   separate box. */
.payflow-dashboard .st-panel {
  padding: var(--space-4) var(--space-4) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* The attention panel recesses so its rows can read as raised cards on top
   of it. The other panels hold their contents flat and stay on --surface. */
.payflow-dashboard .st-panel:has(> .attention-list) { background: var(--surface-sunk); }

.payflow-dashboard .st-panel > .section-heading {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.payflow-dashboard .st-panel .section-heading p { margin-top: 2px; color: var(--ink-faint); font-size: 12px; }

/* A right-aligned timestamp closing the panel. */
.st-panel__foot { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.st-panel__foot .freshness { color: var(--ink-faint); font-size: 11.5px; }

/* --------------------------------------------------------- attention rows */

/* Each row is its own card, as the design draws it. Separate cards rather
   than rule-separated rows because these are four independent queues, not a
   continuous list, and each is a link to a different place. */
.payflow-dashboard .attention-list {
  display: grid;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.payflow-dashboard .attention-row {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 11px;
  /* dashboard.css sizes these as rows in a divided list and pins a 68px
     floor. As separate cards they are sized by their own two lines. */
  min-height: 0;
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* Rows sit above the panel, not in it: the solid card surface on the
     recessed panel below, which is what separates them into four distinct
     targets. Not --surface-raised, which carries an alpha channel in the dark
     palette and would let the panel show through instead of lifting off it. */
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.payflow-dashboard .attention-row:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  text-decoration: none;
  /* No nudge: app.css shifts list rows on hover, which reads as a wobble on a
     card that already has a border to highlight. */
  transform: none;
}

/* Four fixed hues, one per queue. Stated as literals rather than status
   tokens: these identify a row, they do not grade it, so they must not shift
   when a count changes. */
.attention-row__signal {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
}
.attention-row--red .attention-row__signal { background: #f2617a; }
.attention-row--amber .attention-row__signal { background: #e0a53a; }
.attention-row--blue .attention-row__signal { background: #4f7bf0; }
.attention-row--green .attention-row__signal { background: #35b57f; }

.attention-row__copy { display: grid; gap: 0; min-width: 0; }
.payflow-dashboard .attention-row__copy strong { color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.payflow-dashboard .attention-row__copy small { color: var(--ink-faint); font-size: 11px; line-height: 1.45; }

.payflow-dashboard .attention-row__count {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Specificity has to clear app.css's `.attention-row > span:last-child`, which
   paints the chevron in --accent-strong. That token is a near-black navy and
   disappears entirely against a dark surface. */
.payflow-dashboard .attention-row .attention-row__go {
  color: var(--ink-faint);
  font-size: 15px;
  font-weight: 400;
  text-align: right;
}

/* ------------------------------------------------------------ empty states */

/* Centred in whatever it fills, with the glyph above the message. */
.payflow-dashboard .empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: var(--space-8) var(--space-5);
  border: 0;
  background: transparent;
  text-align: center;
}
.empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 2px;
  border-radius: 11px;
  background: var(--surface-sunk);
  color: var(--ink-faint);
}
.empty__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.payflow-dashboard .empty__title { color: var(--ink); font-size: 14px; font-weight: 600; }
.payflow-dashboard .empty__hint { max-width: 46ch; color: var(--ink-faint); font-size: 12.5px; }

/* The donut keeps its ring beside an empty legend rather than collapsing, so
   the card reads the same whether or not there is a mix to show. */
.status-donut__legend:has(> .empty) { display: grid; place-items: center; }

/* -------------------------------------------------------------- health grid */

/* Three separate cards in the design, not one divided block. */
.payflow-dashboard .health-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.payflow-dashboard .health-item {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.payflow-dashboard .health-item__head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.health-item__label { color: var(--ink-faint); font-size: 11.5px; font-weight: 500; }
.payflow-dashboard .health-item strong { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.payflow-dashboard .health-item p { margin: 0; color: var(--ink-faint); font-size: 12px; }
.payflow-dashboard .health-item a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 600;
}
.payflow-dashboard .health-item .status-dot { width: 7px; height: 7px; border-radius: 50%; }
.health-item--good .status-dot { background: var(--good); }
.health-item--warn .status-dot { background: var(--warn); }
.health-item--bad .status-dot { background: var(--bad); }
.health-item--info .status-dot { background: var(--info); }

/* The supporting line hangs under the title text, not under the glyph tile,
   so the two read as one block. 30px tile + 10px gap. */
.payflow-dashboard .st-panel .section-heading p,
.payflow-dashboard .card__head .section-description { margin-left: 40px; }

/* ===================================================== payment links page */

/* The create form and the history sit side by side, same proportions as the
   home page hero so the two screens share a spine. */
.payment-links-layout {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1100px) {
  .payment-links-layout { grid-template-columns: minmax(0, 1fr); }
}

/* The form column is sticky: the history can be long and the create action
   should stay reachable without scrolling back up. */
.payment-links-layout > #create-link { position: sticky; top: 76px; }

/* A .stack lays its children out in a column, so a button stretches to the
   full width. Right for a form submit, wrong for the setup link that stands
   in for the form. Both axes are set because .stack is flex here and grid
   elsewhere. */
.payment-links-layout .card__body > .btn { justify-self: start; align-self: flex-start; }

.link-history { display: grid; gap: var(--space-3); min-width: 0; }
.link-history__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: 2px;
}
.link-history__heading h2 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 600; }
.link-history__heading > span { color: var(--ink-faint); font-size: 12.5px; }

/* ------------------------------------------------------------- link cards */

.link-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.link-card__head strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.link-card__meta { color: var(--ink-faint); font-size: 12px; }
.link-card__amount {
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.link-card__amount small { color: var(--ink-soft); font-size: .55em; font-weight: 600; margin-left: 2px; }
.link-card__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-card__confirm > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}
.link-card__confirm > summary::-webkit-details-marker { display: none; }
.link-card__confirm > summary::before { content: "+"; font-size: 14px; line-height: 1; }
.link-card__confirm[open] > summary::before { content: "\2212"; }
.link-card__confirm > form { margin-top: var(--space-3); }

/* The recipient of every link on this page, stated once above the form. */
.recipient-summary {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.recipient-summary > span { color: var(--ink-faint); font-size: 11.5px; font-weight: 500; }
.recipient-summary > strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.recipient-summary > div { color: var(--ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* An inline SVG with no dimensions and no stroke resolves to a black fill at
   the size of its container, which is what filled the empty card. */
.empty-links svg, .empty__icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.empty-links svg { width: 34px; height: 34px; }

/* ============================================== payment links, design pass */

/* The supplied icons are 1254px PNGs that already carry their own rounded
   tile and colour, so they are drawn as-is rather than masked to currentColor.
   Masking them would flatten each one to a solid square, because the artwork
   is opaque across the whole tile and only the corners are transparent.
   The file is chosen per element through the --pl-glyph custom property. */
/* The tile artwork occupies only the middle 52% of each 1254px canvas; the
   rest is transparent bleed. At background-size:contain that padding is scaled
   too and the tile renders at barely half the box, so the artwork is blown up
   to ~1/0.52 to make the tile itself meet the box edges. */
.pl-glyph {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  background-image: var(--pl-glyph);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 192%;
}
.pl-glyph--sm { width: 18px; height: 18px; }
.pl-glyph--tile { width: 42px; height: 42px; }
.pl-glyph--lg { width: 54px; height: 54px; }

/* The link total sits under the page actions, right aligned. */
.pl-count { display: block; width: 100%; color: var(--ink-faint); font-size: 12.5px; text-align: right; }

/* --------------------------------------------------------- create card */

.payflow-dashboard .pl-create .card__body { display: grid; gap: 10px; }
.payflow-dashboard .pl-create h2 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; }
.payflow-dashboard .pl-create p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }
/* Full width, unlike the setup link it replaced: this is the page's primary
   action and the design gives it the whole column. */
.payflow-dashboard .pl-create .btn--primary {
  justify-self: stretch;
  align-self: stretch;
  justify-content: center;
  margin-top: 4px;
  gap: 8px;
}
.payflow-dashboard .pl-create .btn--primary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------------------------------------------------------- table card */

/* Not overflow:hidden. The head holds a status menu and every row holds an
   actions menu, and both open past the card edge — clipping them to the card
   is what makes a dropdown look broken. Nothing here needs clipping anyway:
   the header and footer sit on the card's own background, so no child paints
   over the rounded corners. */
.payflow-dashboard .pl-table-card { display: grid; align-content: start; }
.pl-table-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.pl-table-card__head h2 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; gap: 10px; }
.pl-table-card__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pl-search { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink-faint); stroke-width: 1.8; }
.pl-search input {
  width: 210px;
  min-width: 0;
  height: 34px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  outline: none;
}
.pl-search input::placeholder { color: var(--ink-faint); }
.pl-search {
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.pl-search:focus-within { border-color: var(--accent); }

.pl-filter { position: relative; }
.pl-filter > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.pl-filter > summary::-webkit-details-marker { display: none; }
.pl-filter .utility-popover { right: 0; min-width: 170px; }

/* ------------------------------------------------------------- the table */

.payflow-dashboard .pl-table { width: 100%; }
.payflow-dashboard .pl-table thead th {
  padding: 10px 16px;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.pl-table__sorted { color: var(--ink) !important; }
.payflow-dashboard .pl-table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.payflow-dashboard .pl-table tbody tr:last-child td { border-bottom: 0; }
.payflow-dashboard .pl-table tbody tr:hover { background: var(--surface-sunk); }

.pl-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-row__copy { display: grid; gap: 1px; min-width: 0; }
.pl-row__copy strong { color: var(--ink); font-size: 13px; font-weight: 600; }
.pl-row__copy a { color: var(--ink-faint); font-size: 11.5px; }
.pl-row__copy a:hover { color: var(--accent-ink); }

.pl-amount { color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-reference { color: var(--ink-soft); font-size: 12.5px; white-space: nowrap; }
.pl-created { white-space: nowrap; }
.pl-created span { display: block; color: var(--ink); font-size: 12.5px; }
.pl-created small { display: block; color: var(--ink-faint); font-size: 11.5px; }
.pl-actions { width: 44px; text-align: right; }

/* The row menu anchors to its own cell and opens to the left so it cannot run
   off the right edge of the table. */
.payflow-dashboard .pl-table .row-menu { position: relative; display: inline-block; }
.payflow-dashboard .pl-table .row-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}
.payflow-dashboard .pl-table .row-menu > summary::-webkit-details-marker { display: none; }
.payflow-dashboard .pl-table .row-menu > summary:hover { background: var(--surface-sunk); color: var(--ink); }
.payflow-dashboard .pl-table .row-menu .utility-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  min-width: 190px;
  text-align: left;
}
/* An open menu lifts its row above the ones after it, otherwise the next row's
   background paints over the panel. */
.payflow-dashboard .pl-table tbody tr:has(.row-menu[open]),
.payflow-dashboard .pl-table tbody tr:has(details[open]) { position: relative; z-index: 6; }

/* .tablewrap carries overflow-x:auto for narrow viewports, and a scroll
   container on one axis clips the other as well — which cut the last rows'
   menus off at the table edge and left the pager underneath taking the clicks.
   The clipping is released only while a menu is open, so horizontal scrolling
   still behaves the rest of the time. */
.payflow-dashboard .pl-table-card .tablewrap:has(.row-menu[open]) {
  position: relative;
  z-index: 10;
  overflow: visible;
}

/* Status reads as a dot plus a word, so it does not rely on the pill colour
   alone to carry the state. */
.pl-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.pl-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pl-status--good { background: var(--good-soft); color: var(--good); }
.pl-status--warn { background: var(--warn-soft); color: var(--warn); }
.pl-status--bad { background: var(--bad-soft); color: var(--bad); }
.pl-status--muted { background: var(--surface-sunk); color: var(--ink-soft); }

/* ------------------------------------------------------------ table foot */

.pl-table-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.pl-table-card__foot > span { color: var(--ink-faint); font-size: 12.5px; }

.pl-pager { display: flex; align-items: center; gap: 6px; }
.pl-pager__step, .pl-pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
}
.pl-pager__step:hover, .pl-pager__page:hover { background: var(--surface-sunk); color: var(--ink); text-decoration: none; }
.pl-pager__page[aria-current="page"] {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--accent-glow);
}
.pl-pager [aria-disabled="true"] { opacity: .45; pointer-events: none; }
.pl-pager__gap { color: var(--ink-faint); padding: 0 2px; }

/* The table column is the wide one here, the reverse of the overview hero. */
.payment-links-layout { grid-template-columns: 268px minmax(0, 1fr); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================ dark-theme contrast repairs */

/* The delta chip carries its own direction colour. It is a <span> inside the
   card header, so `.st-metric-card header span` — two elements plus a class —
   outranks `.st-delta--up` and was repainting both chips in the muted caption
   colour, losing the up/down signal entirely. */
.payflow-dashboard .st-metric-card header .st-delta--up,
.payflow-dashboard .st-today__metric-label .st-delta--up { color: var(--good); }
.payflow-dashboard .st-metric-card header .st-delta--down,
.payflow-dashboard .st-today__metric-label .st-delta--down { color: var(--bad); }
.payflow-dashboard .st-metric-card header .st-delta,
.payflow-dashboard .st-today__metric-label .st-delta { font-size: 12px; }

/* The pills group label inherited a light literal background from
   reference.css, which reads as a pale block on the dark toolbar. */
.payflow-dashboard .st-pills__label,
.payflow-dashboard .st-pills__meta { background: transparent; }

/* Versioned modern artwork. WebP removes the multi-megabyte PNG transfer from
   first paint; PNG remains a compatibility fallback for CSS image selection. */
:root {
  --bg-page: image-set(url('/assets/optimized/v1/backgrounds/dashboard-light-desktop.webp') type("image/webp"), url('/assets/backgrounds/dashboard-light-desktop.png') type("image/png"));
  --bg-card: image-set(url('/assets/optimized/v1/backgrounds/card-light-desktop.webp') type("image/webp"), url('/assets/backgrounds/card-light-desktop.png') type("image/png"));
}
html[data-theme="dark"] body {
  --bg-page: image-set(url('/assets/optimized/v1/backgrounds/dashboard-dark-desktop.webp') type("image/webp"), url('/assets/backgrounds/dashboard-dark-desktop.png') type("image/png"));
  --bg-card: image-set(url('/assets/optimized/v1/backgrounds/card-dark-desktop.webp') type("image/webp"), url('/assets/backgrounds/card-dark-desktop.png') type("image/png"));
}
.st-promo__art {
  background-image: image-set(url('/assets/optimized/v1/backgrounds/link-card.webp') type("image/webp"), url('/assets/backgrounds/link-card.png') type("image/png"));
}
@media (max-width: 1280px) {
  :root {
    --bg-page: image-set(url('/assets/optimized/v1/backgrounds/dashboard-light-tablet.webp') type("image/webp"), url('/assets/backgrounds/dashboard-light-tablet.png') type("image/png"));
    --bg-card: image-set(url('/assets/optimized/v1/backgrounds/card-light-tablet.webp') type("image/webp"), url('/assets/backgrounds/card-light-tablet.png') type("image/png"));
  }
  html[data-theme="dark"] body {
    --bg-page: image-set(url('/assets/optimized/v1/backgrounds/dashboard-dark-tablet.webp') type("image/webp"), url('/assets/backgrounds/dashboard-dark-tablet.png') type("image/png"));
    --bg-card: image-set(url('/assets/optimized/v1/backgrounds/card-dark-tablet.webp') type("image/webp"), url('/assets/backgrounds/card-dark-tablet.png') type("image/png"));
  }
}
@media (max-width: 900px) {
  :root {
    --bg-page: image-set(url('/assets/optimized/v1/backgrounds/dashboard-light-mobile.webp') type("image/webp"), url('/assets/backgrounds/dashboard-light-mobile.png') type("image/png"));
    --bg-card: image-set(url('/assets/optimized/v1/backgrounds/card-light-mobile.webp') type("image/webp"), url('/assets/backgrounds/card-light-mobile.png') type("image/png"));
  }
  html[data-theme="dark"] body {
    --bg-page: image-set(url('/assets/optimized/v1/backgrounds/dashboard-dark-mobile.webp') type("image/webp"), url('/assets/backgrounds/dashboard-dark-mobile.png') type("image/png"));
    --bg-card: image-set(url('/assets/optimized/v1/backgrounds/card-dark-mobile.webp') type("image/webp"), url('/assets/backgrounds/card-dark-mobile.png') type("image/png"));
  }
}