/*  MOS design system — exact port of the approved Figma Make prototype
    (TSP/src/App.tsx + TSP/src/index.css).

    The prototype is Tailwind; Release 1 is Razor Pages, so every utility used there is
    reproduced here as a named class with the same computed value. Where a Tailwind token
    appears in the source it is noted, so the two can be diffed later:
        w-64 = 256px   h-20 = 80px   rounded-xl = 12px   rounded-lg = 8px
        text-xs = 12px text-sm = 14px shadow-xs = 0 1px 2px rgb(0 0 0 / .05)
*/

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root {
  --blue:        #0c4696;   /* --color-primary-blue  */
  --blue-deep:   #093878;   /* sidebar header + footer */
  --orange:      #ef552c;   /* --color-accent-orange */
  --orange-dark: #d84420;   /* hover */

  /*  ═══ THE SAME BRAND ORANGE, DARK ENOUGH TO READ  (plan row 114)  ═══

      #ef552c is the approved brand colour and it stays exactly as it is for borders,
      dots, focus rings, progress bars and icons - everything WCAG 1.4.11 covers, where
      3:1 is the bar and it passes at 3.34:1.

      It fails for TEXT, and not marginally:

          brand orange as text on the page background   3.34:1   (AA needs 4.5:1)
          white text on brand orange                    3.50:1
          brand orange as text on the peach chip        2.73:1

      Measured by tests/e2e/browser_check.py against the computed cascade in a real
      browser, which is the only place the answer exists - a stylesheet cannot be read for
      it, because inheritance, variables and media queries all contribute.

      #b23f21 is the LIGHTEST point on the same hue ramp that clears 4.5:1 in all four
      places text actually appears: on the page, on white, on peach, and carrying white.
      It is the smallest change to the brand that makes the words readable, rather than a
      new colour chosen for convenience.

          on the page   5.53:1      on white   5.79:1
          on peach      4.52:1      white on it 5.79:1  */
  --orange-text: #c94725;

  /*  ═══ TWO ORANGES, BECAUSE THE BACKGROUNDS DIFFER  ═══

      --orange-text  sits ON light: links, labels, the required asterisk, headline figures.
                     4.54:1 on the page, 4.76:1 on white.

      --orange-fill  CARRIES white: buttons, the active navigation item, the brand badge.
                     4.67:1 with white on it.

      --orange-deep  is only for text on the PEACH chip, which is a much lighter background
                     and so needs a darker foreground to reach the same 4.5:1. One token for
                     all three made the buttons far darker than they needed to be - a big
                     slab of brick where the brand is a warm orange - because every use was
                     being held to the hardest case.  */
  /*  THE FULL BRAND ORANGE, chosen by the product owner over the darker shade.

      White on it is 3.50:1. AA asks 4.5:1 for normal text, so this is a deliberate
      exception, not an oversight - it was measured, raised, and accepted twice. Recorded
      in tests/e2e/browser_check.py so the check still reports it every run instead of
      quietly forgetting, and so a NEW contrast problem is never lost among it.

      Two ways to have the brand colour AND the standard, if it is ever wanted:
        - button labels at 19px bold count as large text, where 3:1 is the bar and this
          passes comfortably;
        - or near-black labels on this orange, which measures 6.0:1.  */
  --orange-fill: #ef552c;

  /*  Still the darker shade wherever orange is TEXT on a light background. Small text at
      3.34:1 is a different problem from a large button label - it is the paragraph nobody
      over forty can read, and lightening it buys nothing visually.  */
  --orange-deep: #b23f21;
  --aqua:        #43d5b7;   /* --color-success-aqua  */
  --peach:       #fedcd4;   /* --color-bg-light-peach */
  --ink:         #453c3c;   /* --color-text-main     */

  /*  ═══ MUTED TEXT HAS A FLOOR, AND IT IS .75  (plan row 114) ═══

      Secondary text throughout MOS is the ink or white at a reduced opacity. That reads as a
      design choice and is a contrast decision: a translucent colour is not its own colour,
      it is whatever it composites to over what is behind it.

          ink at .50 over white   2.65:1        ink at .60   3.40:1
          ink at .70 over white   4.40:1        white at .55 on the blue sidebar  3.87:1

      AA needs 4.5:1. The measured minimums are .71 on white, .72 on the page background,
      .63 on the sidebar blue and .55 on the deep blue - so .75 clears all four with room to
      spare, and is still visibly quieter than full-strength ink.

      Found by tests/e2e/browser_check.py, which composites the layers the way the browser
      does. An earlier version of that check compared text against the raw colour of a
      translucent background and reported nonsense - 1:1 ratios on screens anybody can read -
      which hid these until it was fixed.

      Decoration keeps its low opacity: a scrollbar thumb, a placeholder, an icon beside text
      that already says the same thing. 1.4.3 is about text.  */
  --panel:       #ffffff;
  --page:        #fcf9f8;

  --amber-50:  #fffbeb;
  --amber-200: #fde68a;
  --amber-500: #f59e0b;
  --amber-800: #92400e;
  --rose-50:   #fff1f2;
  --rose-200:  #fecdd3;
  --rose-500:  #f43f5e;
  --rose-800:  #9f1239;

  --sidebar-w: 272px;
  --topbar-h:  80px;

  --shadow-2xs: 0 1px 1px rgb(69 60 60 / .04);
  --shadow-xs:  0 1px 2px rgb(69 60 60 / .06);
  --shadow-md:  0 4px 12px rgb(69 60 60 / .08);

  /*  Inter, not Roboto. Inter was drawn for user interfaces rather than for Android:
      taller x-height so 13px reads like 14px, unambiguous 1/l/I and 0/O, and real
      tabular figures - which matter here, because a column of amounts in proportional
      digits does not line up at the decimal point.

      The stack below it is the system UI font on each platform, so a failed webfont
      degrades to something designed for the same job rather than to Times. */
  --font-sans: Inter, "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--page);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mono { font-family: var(--font-mono); }

/*  Amounts, counts and dates in TABULAR figures: every digit the same width, so a column
    of money lines up at the decimal point instead of drifting by a pixel per 1. Inter
    ships them; without this it uses proportional digits and a table of rupees looks
    ragged for no reason anyone can name. */
.stat-value, td.amount, td.id, td.utr, .num, table { font-variant-numeric: tabular-nums; }

/*  Tabular figures for every numeric column. Without this, amounts jitter as digits
    change width and columns fail to line up. (Web Interface Guidelines: number columns) */
.num, td.num, .stat-value, .amount { font-variant-numeric: tabular-nums; }

::selection { background: var(--peach); color: var(--blue); }

/*  Thin scrollbars, ported from the prototype's index.css. Without these the sidebar
    nav shows a chunky OS scrollbar that breaks the dark panel. */
* { scrollbar-width: thin; scrollbar-color: rgb(69 60 60 / .25) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(69 60 60 / .25); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgb(69 60 60 / .45); }

/*  Inside the navy sidebar the thumb must be light, not dark. */
.sidebar { scrollbar-color: rgb(255 255 255 / .28) transparent; }
.nav::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .28); }
.nav::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / .45); }

/* ── focus, applied globally ─────────────────────────────────────────────── */
/*  :focus-visible only, so a mouse click does not draw a ring but Tab always does.
    Nothing in this file sets outline:none without providing this replacement. */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}
.sidebar :focus-visible { outline-color: var(--aqua); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: #fff; padding: 10px 16px;
  font-weight: 700; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ── shell ───────────────────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }

/* ── sidebar: bg #0c4696, w-64 ───────────────────────────────────────────── */
.sidebar {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  box-shadow: var(--shadow-md);
  z-index: 30;
}

/* brand header: h-20, px-6, bg #093878, border-b white/10 */
.brand {
  display: flex; align-items: center; gap: 12px;
  height: var(--topbar-h); padding: 0 20px;
  background: var(--blue-deep);
  border-bottom: 1px solid rgb(255 255 255 / .10);
  flex-shrink: 0;
}
.brand-badge {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--orange-fill); color: #fff;
  font-weight: 700; font-size: 16px; box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #fff; display: block; }
.brand-sub {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--aqua); margin: 0;
}

/* nav: p-4, space-y-1 */
.nav { flex: 1; padding: 14px 14px 8px; overflow-y: auto; min-height: 0; }
.nav-label {
  padding: 0 12px 10px; margin: 0;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .10em; color: rgb(255 255 255 / .75);
}
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; margin-bottom: 3px;
  border-radius: 8px; border: 0; background: transparent;
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .01em;
  text-align: left; line-height: 1.35;
  color: rgb(255 255 255 / .82); text-decoration: none; cursor: pointer;
  /*  Explicit property list — never `transition: all`
      (Web Interface Guidelines: animation). */
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-item:hover { background: rgb(255 255 255 / .10); color: #fff; }
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; color: rgb(255 255 255 / .70); }
.nav-item[aria-current="page"] {
  background: var(--orange-fill); color: #fff; font-weight: 700;
  box-shadow: 0 1px 3px rgb(0 0 0 / .18);
}
.nav-item[aria-current="page"] svg { color: #fff; }
.nav-badge {
  margin-left: auto; display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #fff; color: var(--orange-text);
  font-size: 10px; font-weight: 700;
}

/* portal switcher: border-t white/10, p-4, bg #093878 */
.switcher {
  border-top: 1px solid rgb(255 255 255 / .10);
  padding: 14px; background: var(--blue-deep); flex-shrink: 0;
  /*  A soft top edge so a nav item scrolling under the switcher reads as scrolled
      away, not as clipped by a bug. */
  box-shadow: 0 -10px 14px -10px rgb(0 0 0 / .35);
}
.switcher-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px; margin-bottom: 8px;
}
.switcher-head p {
  margin: 0; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--aqua);
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--aqua);
  animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; flex-shrink: 0;
}
.pulse-dot.orange { background: var(--orange); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

.switch-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 9px 12px; margin-bottom: 6px;
  border-radius: 8px; border: 1px solid rgb(255 255 255 / .12);
  background: rgb(255 255 255 / .10); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer;
  transition: background-color 150ms ease;
}
.switch-btn:hover { background: rgb(255 255 255 / .20); }
.switch-btn[aria-pressed="true"] {
  background: var(--orange-fill); border-color: var(--orange); box-shadow: var(--shadow-2xs);
}
.switch-btn span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-btn .tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--aqua);
  flex-shrink: 0; margin-left: 8px;
}

/* ── main column ─────────────────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* topbar: sticky h-20, border-b #fedcd4, bg white/95 */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--topbar-h); padding: 0 32px;
  border-bottom: 1px solid var(--peach);
  background: rgb(255 255 255 / .95);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-xs);
}
.topbar-label { margin: 0; font-size: 12px; font-weight: 700; color: rgb(69 60 60 / .75); }
.topbar-portal {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--blue);
}
.pill-aqua {
  border-radius: 999px; background: rgb(67 213 183 / .20); color: var(--blue);
  padding: 2px 10px; font-size: 10px; font-weight: 700;
  border: 1px solid rgb(67 213 183 / .40); white-space: nowrap;
}
.status-pill {
  display: flex; align-items: center; gap: 8px;
  border-radius: 999px; border: 1px solid rgb(67 213 183 / .40);
  background: rgb(67 213 183 / .15); color: var(--blue);
  padding: 6px 14px; font-weight: 700; box-shadow: var(--shadow-2xs);
}
.status-pill span:last-child { font-family: var(--font-mono); font-size: 11px; font-weight: 700; }

.content { padding: 24px 32px 64px; flex: 1; }

/* ── page head ───────────────────────────────────────────────────────────── */
.page-head {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid rgb(254 220 212 / .80);
}
.eyebrow-row { display: flex; align-items: center; gap: 8px; }
.eyebrow {
  margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--orange-text);
}
h1 {
  margin: 4px 0 0; font-size: 30px; font-weight: 700;
  letter-spacing: -.02em; color: var(--blue); text-wrap: balance;
}
h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--blue); text-wrap: balance; }
h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--blue); }
.sub { margin: 2px 0 0; font-size: 12px; color: rgb(69 60 60 / .75); }
.asof { font-size: 11px; color: rgb(69 60 60 / .75); }

/* ── cards ───────────────────────────────────────────────────────────────── */
.card {
  border-radius: 12px; border: 1px solid rgb(254 220 212 / .80);
  background: var(--panel); padding: 24px; box-shadow: var(--shadow-xs);
  transition: border-color 200ms ease;
}
.card:hover { border-color: rgb(239 85 44 / .30); }
.card + .card { margin-top: 16px; }
.card-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between; margin-bottom: 20px;
}

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── stat cards: border-l-4 + icon chip ──────────────────────────────────── */
.stat { border-left: 4px solid var(--aqua); padding: 20px; }
.stat.amber  { border-left-color: var(--amber-500); }
.stat.orange { border-left-color: var(--orange); }
.stat.blue   { border-left-color: var(--blue); }

.stat-top {
  display: flex; align-items: center; justify-content: space-between;
  color: rgb(69 60 60 / .75);
}
.stat-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.stat-chip {
  border-radius: 6px; padding: 6px; display: grid; place-items: center;
  background: rgb(67 213 183 / .20); color: var(--blue); flex-shrink: 0;
}
.stat.amber  .stat-chip { background: var(--amber-50); color: var(--amber-800); }
.stat.orange .stat-chip { background: var(--peach);    color: var(--orange-deep); }
.stat.blue   .stat-chip { background: rgb(12 70 150 / .10); color: var(--blue); }
.stat-chip svg { width: 16px; height: 16px; }

.stat-value {
  margin: 12px 0 0; font-family: var(--font-mono); font-size: 30px; font-weight: 700;
  letter-spacing: -.02em; color: var(--blue); line-height: 1.1;
}
.stat.amber  .stat-value { color: var(--amber-800); }
.stat.orange .stat-value { color: var(--orange-text); }

.stat-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 6px; font-size: 12px; color: rgb(69 60 60 / .80);
}
.stat-foot strong { color: var(--blue); font-weight: 700; }
.stat.amber  .stat-foot strong { color: var(--amber-800); }
.stat.orange .stat-foot strong { color: var(--orange-text); }

/* ── tables ──────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }

thead tr {
  border-bottom: 1px solid var(--peach);
  background: rgb(12 70 150 / .05);
}
th {
  padding: 12px 16px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--blue);
  white-space: nowrap;
}
th.right, td.right { text-align: right; }

tbody { font-size: 12px; }
tbody tr { border-top: 1px solid rgb(254 220 212 / .50); transition: background-color 150ms ease; }
tbody tr:first-child { border-top: 0; }
tbody tr:hover { background: rgb(254 220 212 / .15); }
td { padding: 14px 16px; vertical-align: middle; }

td.id     { font-family: var(--font-mono); font-weight: 500; color: var(--blue); }
td.utr    { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: rgb(69 60 60 / .75); }
td.strong { font-weight: 700; color: var(--ink); }
td.amount { font-family: var(--font-mono); font-weight: 700; color: var(--blue); }
td.time   { color: rgb(69 60 60 / .80); }
.cell-main { font-weight: 700; color: var(--ink); }
.cell-sub  { font-size: 11px; color: rgb(69 60 60 / .75); }

/*  Monospace identifiers - client ids, transaction references, correlation ids - are long
    and unbreakable, and unbreakable is what makes a page scroll sideways on a phone. They
    break anywhere rather than pushing the layout. */
.mono, .cell-sub.mono { overflow-wrap: anywhere; }

.link-action {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; color: var(--orange-text); text-decoration: none; background: none;
  border: 0; font: inherit; font-weight: 700; cursor: pointer;
  transition: color 150ms ease;
}
.link-action:hover { color: var(--blue); }
.link-action svg { width: 12px; height: 12px; }

/* ── badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 10px; font-size: 11px;
  border: 1px solid transparent; white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }

.badge-ok      { background: rgb(67 213 183 / .15); color: var(--blue); border-color: rgb(67 213 183 / .30); font-weight: 700; }
.badge-ok      .dot { background: var(--aqua); }
.badge-pending { background: var(--amber-50); color: var(--amber-800); border-color: var(--amber-200); font-weight: 500; }
.badge-pending .dot { background: var(--amber-500); }
.badge-bad     { background: var(--rose-50); color: var(--rose-800); border-color: var(--rose-200); font-weight: 500; }
.badge-bad     .dot { background: var(--rose-500); }
.badge-info    { background: rgb(12 70 150 / .08); color: var(--blue); border-color: rgb(12 70 150 / .20); font-weight: 700; }
.badge-info    .dot { background: var(--blue); }
/*  Unknown gets its own colour. It is NOT pending and NOT failed: the instruction to
    the operator is different ("do not retry"), so it must not borrow either style. */
.badge-warn    { background: #fff7ed; color: #9a3412; border-color: #fed7aa; font-weight: 700; }
.badge-warn    .dot { background: #ea580c; }
.badge-muted   { background: var(--page); color: rgb(69 60 60 / .75); border-color: var(--peach); font-weight: 500; }
.badge-muted   .dot { background: rgb(69 60 60 / .40); }

/*  Critical sits above Error. An operator must be able to tell "page someone" from
    "look at this" without reading the label. */
.badge-critical { background: #4c0519; color: #fff; border-color: #881337; font-weight: 700; }
.badge-critical .dot { background: #fda4af; }

/* -- filter chips -------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--peach); background: #fff; color: var(--ink);
  font-size: 12px; font-weight: 700;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.chip:hover { border-color: rgb(239 85 44 / .45); }
.chip-n {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--page); border-radius: 999px; padding: 1px 7px; color: rgb(69 60 60 / .75);
}
.chip-on { background: var(--blue); color: #fff; border-color: var(--blue); }
.chip-on .chip-n { background: rgb(255 255 255 / .20); color: #fff; }
.chip-critical { border-color: #fecdd3; }
.chip-critical.chip-on { background: #4c0519; border-color: #4c0519; }
.chip-error { border-color: var(--rose-200); }
.chip-error.chip-on { background: var(--rose-800); border-color: var(--rose-800); }
.chip-warn { border-color: var(--amber-200); }
.chip-warn.chip-on { background: var(--amber-800); border-color: var(--amber-800); }
.chip-info { border-color: rgb(12 70 150 / .25); }

/* -- forms --------------------------------------------------------------- */
.split { display: grid; gap: 20px; grid-template-columns: 1.1fr .9fr; align-items: start; }
.stack > * + * { margin-top: 16px; }

.field-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.field-grid .span-2 { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; }
.field label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: rgb(69 60 60 / .75); margin-bottom: 6px;
}
.field .req { color: var(--orange-text); }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--peach); border-radius: 8px;
  background: #fff; color: var(--blue); font: inherit; font-size: 12px; font-weight: 700;
  min-height: 42px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field textarea { min-height: 62px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 1px;
}
.field input.readonly { background: rgb(12 70 150 / .05); color: var(--blue); cursor: default; }
.field input.upper { text-transform: uppercase; }
.field .hint { margin: 5px 0 0; font-size: 10px; color: rgb(69 60 60 / .75); }
.field .err { margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--rose-800); }
.field .err:empty { display: none; }
.field input.input-validation-error,
.field textarea.input-validation-error { border-color: var(--rose-500); }

.card-foot {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--peach);
}

.kicker {
  margin: 0; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--blue);
}
.callout-warn {
  margin-top: 16px; padding: 12px; border-radius: 8px;
  border: 1px solid var(--amber-200); background: var(--amber-50);
  color: var(--amber-800); font-size: 12px; font-weight: 700;
}
.steps { margin: 10px 0 0; padding-left: 20px; font-size: 12px; line-height: 1.9; color: rgb(69 60 60 / .80); }
.steps b { color: var(--blue); }

/* -- key/value list ------------------------------------------------------ */
.kv { margin: 18px 0 0; }
.kv > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid rgb(254 220 212 / .50); font-size: 12px;
}
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: rgb(69 60 60 / .75); flex-shrink: 0; }
.kv dd { margin: 0; text-align: right; color: var(--ink); overflow-wrap: anywhere; }
.kv dd.strong { font-weight: 700; color: var(--blue); }

/* -- settlement timeline ------------------------------------------------- */
.timeline { list-style: none; margin: 18px 0 0; padding: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 14px; }
.timeline li:not(:last-child) { padding-bottom: 20px; }

/*  The connector runs from under one dot to the next, so the line never overlaps a dot. */
.timeline li:not(:last-child)::before {
  content: ""; position: absolute; left: 11px; top: 18px; bottom: 0;
  width: 2px; background: var(--peach);
}
.tl-dot {
  width: 16px; height: 16px; border-radius: 999px; margin-top: 2px;
  box-shadow: 0 0 0 4px #fff; position: relative; z-index: 1;
  background: var(--peach);
}
.tl-body { min-width: 0; }
.tl-title { margin: 0; font-size: 12px; font-weight: 700; color: var(--ink); }
.tl-detail { margin: 3px 0 0; font-size: 11px; color: rgb(69 60 60 / .75); line-height: 1.5; }
.tl-time { margin: 3px 0 0; font-size: 10px; color: rgb(69 60 60 / .75); }

/*  Each state is a different colour AND a different label, never colour alone
    (WCAG 1.4.1: do not convey meaning by colour only). */
.tl-done .tl-dot    { background: var(--aqua); }
.tl-current .tl-dot { background: var(--blue); animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.tl-failed .tl-dot  { background: var(--rose-500); }
.tl-unknown .tl-dot { background: #ea580c; animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.tl-pending .tl-dot { background: #fff; box-shadow: 0 0 0 4px #fff, inset 0 0 0 2px var(--peach); }
.tl-pending .tl-title { color: rgb(69 60 60 / .75); font-weight: 500; }
.tl-failed .tl-title  { color: var(--rose-800); }
.tl-unknown .tl-title { color: #9a3412; }

/* -- commission slabs ---------------------------------------------------- */
.slabs { display: flex; flex-direction: column; gap: 12px; }
.slab {
  border: 1px solid var(--peach); border-radius: 12px;
  background: var(--page); padding: 14px 16px 16px; margin: 0;
}
.slab-empty { border-style: dashed; opacity: .75; }
.slab legend {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--blue); padding: 0 6px;
}
.slab-grid { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0,1fr)); }
.slab-grid .field input, .slab-grid .field select { min-height: 38px; padding: 8px 10px; }

@media (max-width: 1200px) { .slab-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px)  { .slab-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 8px; padding: 8px 14px;
  font: inherit; font-size: 12px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-xs);
  touch-action: manipulation;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn svg { width: 14px; height: 14px; }

.btn-accent { background: var(--orange-fill); color: #fff; }
.btn-accent:hover { background: var(--orange-dark); }
.btn-aqua { background: var(--aqua); color: var(--blue); }
.btn-aqua:hover { background: #32c2a5; }
.btn-soft { border-color: var(--peach); background: #fff; color: var(--ink); }
.btn-soft:hover { background: rgb(254 220 212 / .20); border-color: rgb(239 85 44 / .40); }

/* ── inputs ──────────────────────────────────────────────────────────────── */
input[type=text], input[type=search], input[type=number], select {
  padding: 8px 12px; border: 1px solid var(--peach); border-radius: 8px;
  background: #fff; color: var(--ink); font: inherit; font-size: 12px;
  min-height: 36px;
}
input::placeholder { color: rgb(69 60 60 / .45); }
label { font-size: 12px; font-weight: 700; color: rgb(69 60 60 / .75); }

.filter-select {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--peach); border-radius: 8px; padding: 6px 10px; background: #fff;
}
.filter-select svg { width: 14px; height: 14px; color: rgb(69 60 60 / .50); }
.filter-select select { border: 0; padding: 2px 4px; min-height: 0; }
.filter-select select:focus { outline: none; }
.filter-select:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }

/* -- searchable select --------------------------------------------------
   The native select remains the submitted form value.  Only its visual and
   keyboard surface is replaced, so server binding and validation stay intact. */
.mos-select {
  position: relative;
  display: inline-block;
  min-width: 160px;
  max-width: 100%;
  vertical-align: middle;
}
.field > .mos-select,
.slab-grid .mos-select,
.setup-create-grid .mos-select,
.chargeback-form .mos-select,
.report-filter-grid .mos-select,
.page-toolbar .field .mos-select {
  width: 100%;
}
.mos-select-native {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  inset: 50% auto auto 50%;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.mos-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--ui-line-strong, #ccd8e5);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(15 35 65 / .04);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.mos-select-trigger:hover {
  border-color: #9eb4ca;
  background: #fbfdff;
}
.mos-select-trigger:focus-visible,
.mos-select.is-open .mos-select-trigger {
  outline: 3px solid rgb(12 70 150 / .34);
  outline-offset: 2px;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(12 70 150 / .14);
}
.mos-select-trigger.is-invalid {
  border-color: var(--rose-500);
  box-shadow: 0 0 0 3px rgb(190 24 93 / .12);
}
.mos-select-trigger:disabled {
  background: #f3f6f9;
  color: #7b899a;
  cursor: not-allowed;
  opacity: .78;
}
.mos-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mos-select-chevron {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  margin: -4px 3px 0 2px;
  border-right: 2px solid #315274;
  border-bottom: 2px solid #315274;
  transform: rotate(45deg);
  transition: transform 140ms ease, margin 140ms ease;
}
.mos-select.is-open .mos-select-chevron {
  margin-top: 4px;
  transform: rotate(225deg);
}
.mos-select-panel {
  position: absolute;
  z-index: 160;
  top: calc(100% + 7px);
  left: 0;
  width: max(100%, 280px);
  max-width: min(440px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid #cbd8e5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 46px rgb(16 40 72 / .19), 0 4px 12px rgb(16 40 72 / .08);
}
.mos-select-panel[hidden] { display: none; }
.row-actions .mos-select-panel,
.page-toolbar .mos-select-panel {
  right: 0;
  left: auto;
}
/* Editable grid selects live inside horizontally scrollable tables. A viewport-positioned
   panel keeps their options from being clipped by the table's overflow boundary. */
.table-wrap .mos-select-panel {
  position: fixed;
  top: 18vh;
  right: auto;
  left: 50%;
  width: min(390px, calc(100vw - 32px));
  transform: translateX(-50%);
}
body.mos-select-modal::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 154;
  background: rgb(7 23 42 / .32);
  backdrop-filter: blur(1px);
}
.mos-select-searchbox {
  position: relative;
  margin-bottom: 7px;
}
.mos-select-searchbox::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 1.7px solid #60748b;
  border-radius: 50%;
  transform: translateY(-58%);
  pointer-events: none;
}
.mos-select-searchbox::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 24px;
  width: 6px;
  height: 1.7px;
  border-radius: 2px;
  background: #60748b;
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
}
.mos-select-search {
  width: 100%;
  min-height: 39px !important;
  padding: 8px 34px 8px 34px !important;
  border-color: #cbd8e5 !important;
  background: #f7f9fc !important;
  color: #17283d;
}
.mos-select-search:focus {
  outline: none;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgb(12 70 150 / .12);
  background: #fff !important;
}
.mos-select-options {
  max-height: 286px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b8c7d7 transparent;
}
.mos-select-option {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 39px;
  padding: 8px 34px 8px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #183552;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.mos-select-option[hidden] { display: none; }
.mos-select-option:hover,
.mos-select-option:focus-visible {
  outline: none;
  background: #edf4fc;
  color: var(--blue);
}
.mos-select-option.is-selected {
  background: #e7f1fc;
  color: var(--blue);
  font-weight: 800;
}
.mos-select-option.is-selected::after {
  content: '';
  position: absolute;
  right: 13px;
  top: 50%;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-65%) rotate(-45deg);
}
.mos-select-option:disabled {
  color: #9aa6b3;
  cursor: not-allowed;
}
.mos-select-group {
  padding: 10px 10px 5px;
  color: #697c91;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mos-select-empty {
  margin: 0;
  padding: 18px 10px;
  color: #687a8f;
  font-size: 12px;
  text-align: center;
}
.filter-select .mos-select { min-width: 112px; }
.filter-select .mos-select-trigger {
  min-height: 26px;
  padding: 2px 22px 2px 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.filter-select .mos-select-chevron { margin-right: 2px; }
.filter-select:has(.mos-select.is-open) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── notices ─────────────────────────────────────────────────────────────── */
.notice {
  border-radius: 12px; padding: 14px 16px; font-size: 13px;
  border: 1px solid rgb(254 220 212 / .80); background: #fff; margin-bottom: 16px;
  box-shadow: var(--shadow-2xs);
}
.notice-info { border-left: 4px solid var(--blue); }
.notice-warn { border-left: 4px solid var(--amber-500); background: var(--amber-50); border-color: var(--amber-200); }
.notice-bad  { border-left: 4px solid var(--rose-500); background: var(--rose-50); border-color: var(--rose-200); }
.notice strong { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; color: var(--blue); }
.notice strong svg { width: 16px; height: 16px; flex-shrink: 0; }
.notice .link-action { display: inline-flex; }
.notice-warn strong { color: var(--amber-800); }
.notice-bad  strong { color: var(--rose-800); }

.empty { text-align: center; padding: 48px 16px; color: rgb(69 60 60 / .75); font-size: 14px; }
.empty svg { width: 32px; height: 32px; color: rgb(69 60 60 / .30); margin: 0 auto 8px; display: block; }

.bar { height: 6px; border-radius: 999px; background: var(--peach); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--aqua); border-radius: 999px; }

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

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1280px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .field-grid { grid-template-columns: 1fr; } .field-grid .span-2 { grid-column: auto; } }

@media (max-width: 1024px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%; flex-basis: auto; height: auto; position: static;
    flex-direction: column;
  }
  .nav { max-height: none; }
  .content { padding: 20px 16px 56px; }
  .topbar { padding: 0 16px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  h1 { font-size: 24px; }
}

@media (max-width: 640px) {
  .topbar { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  .status-pill span:last-child { font-size: 10px; }
  /*  A dense financial table cannot honestly collapse to one column, so it scrolls
      horizontally inside its own wrapper. The page itself never scrolls sideways. */
  .table-wrap { margin: 0 -24px; padding: 0 24px; }
}

/* ── motion preference ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Merchant communication and diagnostic workspaces. These use the existing surface,
   spacing and semantic tokens so operational pages stay visually consistent. */
.notification-list{display:grid;gap:0;margin-top:8px}
.notification-item{display:grid;grid-template-columns:5px minmax(0,1fr) auto;gap:16px;align-items:start;padding:18px 4px;border-top:1px solid var(--line)}
.notification-item:first-child{border-top:0}
.notification-item.is-unread{background:linear-gradient(90deg,rgba(31,111,235,.055),transparent 52%)}
.notification-marker{width:5px;height:100%;min-height:54px;border-radius:99px;background:var(--line)}
.notification-item.is-unread .notification-marker{background:var(--orange)}
.notification-copy h3{margin:8px 0 4px;font-size:16px;color:var(--ink)}
.notification-copy p{margin:0;color:var(--muted);line-height:1.55}
.diagnostic-json{max-width:560px;max-height:260px;overflow:auto;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--page);white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.5}
details>summary{cursor:pointer;color:var(--navy);font-weight:700}
details>summary:hover{color:var(--orange)}
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:16px;color:var(--muted)}
.is-disabled{pointer-events:none;opacity:.48}
@media(max-width:760px){.notification-item{grid-template-columns:4px minmax(0,1fr)}.notification-item>.btn{grid-column:2;justify-self:start}.diagnostic-json{max-width:calc(100vw - 80px)}}
.support-create{margin-bottom:18px}.support-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.support-span{grid-column:1/-1}.support-list{display:grid;border-top:1px solid var(--line)}
.support-row{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(280px,1.5fr) auto auto;gap:16px;align-items:center;padding:16px 8px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background .16s ease,box-shadow .16s ease}
.support-row:hover,.support-row.is-active{background:color-mix(in srgb,var(--orange) 4%,var(--surface));box-shadow:inset 4px 0 var(--orange)}.support-row span>strong,.support-row span>small{display:block}.support-row small{margin-top:4px;color:var(--muted)}
.support-detail{margin-top:18px}.support-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.support-summary>div{padding:13px;border-radius:12px;background:var(--page)}.support-summary span,.support-summary strong{display:block}.support-summary span{margin-bottom:5px;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em}.support-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:900px){.support-row{grid-template-columns:1fr auto}.support-row>:nth-child(2){grid-column:1/-1;grid-row:2}.support-form,.support-summary{grid-template-columns:1fr}.support-span{grid-column:auto}}

/* Funding: dense enough for operations, calm enough for a financially consequential task. */
.funding-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:18px;margin-bottom:20px}
.funding-account-panel,.funding-balance-panel{border-radius:24px;padding:28px 30px;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.funding-account-panel{color:#fff;background:linear-gradient(135deg,#082f55 0%,#0a4775 65%,#0c5f86 100%)}
.funding-account-panel:after{content:"";position:absolute;width:260px;height:260px;border:42px solid rgb(255 255 255 / .045);border-radius:50%;right:-105px;bottom:-150px;pointer-events:none}
.funding-account-panel .eyebrow,.funding-account-panel p{color:#d5e8f5}.funding-account-panel h2{color:#fff}
.funding-account-number{font:800 clamp(1.55rem,3vw,2.45rem)/1.15 var(--font-display);letter-spacing:.035em;margin:18px 0 15px;overflow-wrap:anywhere}
.funding-bank-meta{display:flex;gap:28px;flex-wrap:wrap;color:#c4dbea;margin-bottom:18px}.funding-bank-meta strong{color:#fff;margin-left:7px}
.funding-account-panel .btn-light{background:rgb(255 255 255 / .12);color:#fff;border-color:rgb(255 255 255 / .24);backdrop-filter:blur(8px)}
.funding-account-panel .btn-light:hover{background:rgb(255 255 255 / .2);transform:translateY(-1px)}
.funding-balance-panel{background:#fff;border:1px solid var(--line)}.funding-balance{font:800 clamp(1.8rem,3vw,2.7rem)/1 var(--font-display);color:var(--navy);margin:18px 0 24px}
.funding-balance-line{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-top:1px solid var(--line);color:var(--muted)}.funding-balance-line strong{color:var(--ink)}
.funding-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.7fr);gap:20px;align-items:start}.funding-form-card{padding:0}.funding-form-card>.card-head,.funding-form-card>form,.funding-form-card>.notice{padding:24px 28px}.funding-form-card>.card-head{border-bottom:1px solid var(--line)}
.funding-confirm{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid #f1d79c;border-radius:16px;background:#fff9ea;margin-top:18px}.funding-confirm p{color:#745b27;margin:4px 0 0}.funding-confirm strong{color:#5f4717}
.funding-steps{list-style:none;margin:22px 0 0;padding:0}.funding-steps li{display:flex;gap:14px;padding:0 0 20px;position:relative}.funding-steps li:not(:last-child):after{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:1px;background:var(--line)}.funding-steps>li>span{width:31px;height:31px;display:grid;place-items:center;flex:0 0 31px;border-radius:10px;background:#eaf3fb;color:var(--navy);font-weight:800;z-index:1}.funding-steps p{color:var(--muted);margin:4px 0 0;font-size:.88rem}
@media(max-width:960px){.funding-hero,.funding-grid{grid-template-columns:1fr}.funding-rules{order:-1}}
@media(max-width:600px){.funding-account-panel,.funding-balance-panel{padding:22px}.funding-form-card>.card-head,.funding-form-card>form{padding:20px}.funding-bank-meta{display:grid;gap:8px}}

/* ── print ───────────────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .btn, .link-action { display: none !important; }
  .content { padding: 0; }
  .card { border: 1px solid #ddd; box-shadow: none; }
}

/* ── AJAX states (mos.js) ────────────────────────────────────────────────────
   Everything below is applied by the client layer rather than by Razor. Kept in
   the same stylesheet, not a second file, so there is one place to look when a
   state renders wrongly.                                                      */

/*  Busy button. The spinner explains the wait; `disabled` is what actually stops
    a second click, because a second press on "Approve" is a second approval.   */
.spinner {
  display: inline-block; width: 12px; height: 12px; margin-right: 7px;
  vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: mos-spin .6s linear infinite;
}
@keyframes mos-spin { to { transform: rotate(360deg); } }

.btn[aria-busy="true"] { cursor: progress; opacity: .85; }
.btn:disabled { cursor: not-allowed; opacity: .55; }

/*  Invalid field. Colour alone never carries the meaning — the message text below
    the input is the signal, and the border reinforces it (WCAG 1.4.1).          */
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
  border-color: var(--rose-500);
  background: var(--rose-50);
}
.field input.is-invalid:focus,
.field select.is-invalid:focus,
.field textarea.is-invalid:focus {
  border-color: var(--rose-500);
  box-shadow: 0 0 0 1px var(--rose-500);
}

/*  The banner raised by mos.js. It is focused when it appears, so it needs a
    visible focus treatment of its own rather than the default outline sitting
    awkwardly around a full-width block.                                        */
#mos-banner { margin-bottom: 16px; scroll-margin-top: 16px; }
#mos-banner:focus { outline: 2px solid var(--orange); outline-offset: 2px; }
#mos-banner:focus:not(:focus-visible) { outline: none; }

/*  The correlation reference. Small and quiet: it matters only when someone is
    reporting a problem, and it should not compete with the message itself.      */
.correlation-ref {
  display: block; margin-top: 6px;
  font-size: 10px; letter-spacing: .02em;
  color: rgb(69 60 60 / .75);
}

/*  Reduced motion: the spinner still indicates work, without rotating.          */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-right-color: currentColor; opacity: .5; }
}

/*  Row actions. Small, right-aligned, and wrapping rather than overflowing — a table
    cell that scrolls sideways on a narrow screen hides the action entirely.          */
.row-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; flex-wrap: wrap;
}
.btn-xs {
  padding: 5px 10px; font-size: 11px; border-radius: 7px;
  /*  Still 32px tall including padding, so it stays a comfortable touch target even
      though it reads as a small control.                                             */
  min-height: 30px;
}
/*  Destructive actions carry the danger colour AND sit apart from the others, because
    colour alone is not a signal everyone can perceive (WCAG 1.4.1).                  */
.btn-soft.danger { color: var(--rose-800); border-color: var(--rose-200); }
.btn-soft.danger:hover { background: var(--rose-50); border-color: var(--rose-500); }

/* ── sign-in and recovery pages ──────────────────────────────────────────────
   A deliberately bare shell. Nobody is signed in yet, so there is no navigation
   to render and no role to show.                                              */

.auth-body { background: var(--blue-deep); min-height: 100dvh; }

.auth-shell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /*  dvh, not vh: on a phone 100vh sits behind the browser chrome, which pushes the
      submit button off screen exactly when the keyboard is open.                */
  min-height: 100dvh; padding: 24px 16px; gap: 14px;
}

.auth-card {
  width: 100%; max-width: 400px;
  background: #fff; border-radius: 14px; padding: 28px 26px;
  box-shadow: 0 18px 44px rgb(0 0 0 / .26);
}

.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.auth-brand .brand-name { color: var(--blue); font-size: 14px; letter-spacing: .02em; }
.auth-brand .brand-sub  { margin: 1px 0 0; font-size: 10px; color: rgb(69 60 60 / .75); }

.auth-title { margin: 0 0 4px; font-size: 21px; color: var(--blue); }
.auth-sub    { margin: 0 0 22px; font-size: 12px; color: rgb(69 60 60 / .75); }

.auth-card .field { margin-bottom: 15px; }

.auth-submit { width: 100%; justify-content: center; margin-top: 6px; padding: 11px; }

.auth-link { margin: 16px 0 0; text-align: center; font-size: 12px; }
.auth-link a, .link-button {
  color: var(--orange-text); font-weight: 700; text-decoration: none;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.auth-link a:hover, .link-button:hover { text-decoration: underline; }

.auth-legal { margin: 0; font-size: 10px; color: rgb(255 255 255 / .75); text-align: center; }
.auth-foot { display: none; }

/*  The code box. Wide tracking so six digits are easy to check against a phone, and
    large enough that the whole value is legible without leaning in.            */
.code-input {
  font-size: 22px; letter-spacing: .28em; text-align: center; padding: 12px 10px;
}

/*  Checkbox and its label on one line, both clickable.                         */
.field-inline {
  flex-direction: row; align-items: center; gap: 9px;
}
.field-inline label { margin: 0; font-weight: 500; font-size: 12px; cursor: pointer; }
.field-inline input[type="checkbox"] {
  /*  Comfortably clickable without dominating the row.                         */
  width: 17px; height: 17px; accent-color: var(--orange); cursor: pointer;
}

/*  Recovery codes, shown once. Monospace and widely spaced because they are copied
    by hand under mild stress.                                                  */
.code-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin: 14px 0 0; padding: 14px;
  background: var(--blue-050, rgb(12 70 150 / .05)); border-radius: 10px;
  list-style: none;
}
.code-list li {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--blue); text-align: center;
}
@media (max-width: 420px) { .code-list { grid-template-columns: 1fr; } }

/* ── signed-in identity in the top bar ──────────────────────────────────────── */
.topbar-right { display: flex; align-items: center; gap: 14px; }
.who { text-align: right; line-height: 1.25; }
.who-name { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--blue); }
.who-role { margin: 0; font-size: 10px; color: rgb(69 60 60 / .75); text-transform: capitalize; }

@media (max-width: 720px) {
  /*  The role line is the first thing to go on a narrow screen: the name identifies
      who is signed in, which is what actually matters at a glance.             */
  .who-role { display: none; }
}

/*  Account setup.                                                              */
.setup-steps { margin: 0 0 18px; padding-left: 18px; font-size: 12.5px; line-height: 1.7; }
.setup-steps li { margin-bottom: 3px; }

.qr-holder {
  padding: 14px; margin-bottom: 12px; border-radius: 10px;
  background: rgb(12 70 150 / .05); text-align: center;
}
.qr-note { margin: 0; font-size: 11.5px; color: rgb(69 60 60 / .75); }

/*  The setup key. Large and widely tracked because it is typed by hand into a phone,
    usually one character at a time.                                            */
.manual-key { margin: 0 0 18px; font-size: 11.5px; color: rgb(69 60 60 / .75); text-align: center; }
.manual-key .mono {
  display: block; margin-top: 6px; font-size: 14px; letter-spacing: .10em;
  color: var(--blue); font-weight: 700; word-break: break-all;
}

/* ── merchant profile: change requests and proposals ────────────────────────── */

/*  A collapsed proposal form. Closed by default because proposing a change to a
    verified value is the unusual action on this page, not the common one.       */
.propose > summary {
  cursor: pointer; padding: 9px 12px; border-radius: 9px;
  background: rgb(12 70 150 / .05); color: var(--blue);
  font-size: 12.5px; font-weight: 700; list-style: none;
}
.propose > summary::-webkit-details-marker { display: none; }
.propose > summary::before { content: "+ "; color: var(--orange); font-weight: 700; }
.propose[open] > summary::before { content: "− "; }
.propose > summary:hover { background: rgb(12 70 150 / .09); }
.propose > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.request-list { list-style: none; margin: 14px 0 0; padding: 0; }
.request-list li {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--peach);
}

/*  ═══ min-width: 0, AND WHY IT IS NOT OPTIONAL HERE  (plan row 114) ═══

    A flex item defaults to min-width: auto, which means it refuses to shrink below the
    width of its own content. An API client id is a 52-character unbroken string
    (mos_live_770d31660707e846e698fdcd13b8102f08202a6a76c611dc), so on a 360px phone this
    row pushed the whole page 26px wider than the viewport and every screen scrolled
    sideways - not only this one, because the page scrolls as a whole.

    min-width: 0 lets the column shrink; overflow-wrap lets the identifier break rather than
    simply clip. Both are needed: the first alone gives a clipped id nobody can read, the
    second alone never applies because the item never shrinks.

    Measured by tests/e2e/browser_check.py at 360x740, which is the narrowest phone still in
    real use. It is a layout result and cannot be read off the markup. */
.request-list li > *:first-child { min-width: 0; flex: 1 1 auto; }
.request-title, .request-sub, .request-reason { overflow-wrap: anywhere; }
.request-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.request-title  { margin: 0; font-size: 13px; font-weight: 700; color: var(--blue); }
.request-sub    { margin: 2px 0 0; font-size: 11px; color: rgb(69 60 60 / .75); }
.request-reason {
  margin: 6px 0 0; font-size: 11.5px; color: rgb(69 60 60 / .78);
  /*  Quoted rather than merely indented, so a reason is visibly the requester's words
      and not the system's.                                                       */
  padding-left: 9px; border-left: 2px solid var(--peach); font-style: italic;
}
.request-actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
}

/*  Old value beside new, so an approver compares rather than trusts a label.     */
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.compare-arrow { color: var(--orange); font-weight: 700; }
.compare-box { padding: 11px 13px; border-radius: 9px; font-size: 12.5px; }
.compare-old { background: rgb(69 60 60 / .05); color: rgb(69 60 60 / .75); }
.compare-new { background: var(--amber-50, rgb(239 85 44 / .07)); color: var(--blue); font-weight: 700; }
.compare-label { margin: 0 0 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }

@media (max-width: 560px) {
  /*  Stacked on a narrow screen. Side by side would shrink both values to the point
      where a transposed digit in a PAN is invisible — which is the one thing the
      approver is there to notice.                                                */
  .compare { grid-template-columns: 1fr; }
  .compare-arrow { transform: rotate(90deg); justify-self: center; }
  .request-list li { flex-direction: column; }
  .request-actions { align-items: flex-start; }
}

/* ── document submission and review ─────────────────────────────────────────── */

/*  The submit panel: an explanation on the left, the action on the right.        */
.submit-panel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 16px;
}
.submit-panel h2 { margin: 0 0 3px; }
.submit-panel .sub { margin: 0; }
@media (max-width: 620px) {
  .submit-panel { flex-direction: column; align-items: stretch; }
}

/*  A file input hidden inside its label. The label is the visible control, so it
    has to LOOK focusable — a keyboard user tabs to the input, and without this
    rule the focus ring would be drawn around something invisible.                */
.upload-label { position: relative; overflow: hidden; cursor: pointer; }
.upload-label:focus-within {
  outline: 2px solid var(--orange); outline-offset: 2px;
}

/*  Progress drawn as a fill behind the label text, from a custom property the
    script updates. No extra element, and no layout change as it grows — a
    progress bar that reflows the row on every update is worse than none.        */
.upload-label.is-uploading {
  pointer-events: none;
  background-image: linear-gradient(
    to right,
    var(--peach) 0,
    var(--peach) var(--upload-progress, 0%),
    transparent var(--upload-progress, 0%));
  background-repeat: no-repeat;
}
.upload-label.is-uploading span { position: relative; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  /*  The fill still moves, but nothing animates between steps.                  */
  .upload-label.is-uploading { transition: none; }
}

/*  A decided item reads more quietly than one still waiting, so a reviewer's eye
    lands on what is left to do.                                                 */
.request-list li:has(.badge-ok) .request-title { color: rgb(69 60 60 / .75); }

/*  ── the thin bar that shows a page is on its way ────────────────────────────────

    Sidebar navigation swaps <main> without reloading, so the browser's own loading
    indicator never appears. Without something in its place a slow page looks like a
    click that did nothing, and people click again.

    Fixed to the very top and above everything, because it has to be visible while the
    content underneath is still the PREVIOUS page. It animates to 80% and waits there:
    the remaining fifth is only ever completed by the content actually arriving, so the
    bar never claims to have finished something that has not. */
#mos-nav-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: var(--orange); z-index: 2000; opacity: 0;
    transition: width 200ms ease, opacity 200ms ease;
    pointer-events: none;
}
#mos-nav-progress.is-loading { width: 80%; opacity: 1; transition: width 1.4s cubic-bezier(.1,.7,.3,1); }

/*  The entry you just clicked dims slightly until its page arrives, so the click has an
    answer immediately rather than after the round trip. */
.nav-item { transition: background 120ms ease, color 120ms ease; }
.nav-item:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    #mos-nav-progress { transition: opacity 120ms ease; }
    .nav-item { transition: none; }
    .nav-item:active { transform: none; }
}

/*  ── the grouped sidebar ─────────────────────────────────────────────────────────

    Twenty-eight entries in one list is unreadable; grouped by the job somebody came to
    do, it is a menu. Built on <details>, so opening and closing needs no JavaScript and
    the keyboard and screen readers already understand it. */
.nav-group { margin-bottom: 2px; }
.nav-group-primary { margin-bottom: 10px; }

.nav-group-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 9px 12px; margin: 0;
    font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: rgb(255 255 255 / .58);
    cursor: pointer; user-select: none; border-radius: 8px;
    list-style: none;                      /* Firefox draws its own marker without this */
}
.nav-group-head::-webkit-details-marker { display: none; }
.nav-group-head:hover { color: #fff; background: rgb(255 255 255 / .06); }
.nav-group-head:focus-visible { outline: 2px solid var(--aqua); outline-offset: -2px; }

.nav-group-head svg {
    width: 14px; height: 14px; flex-shrink: 0;
    color: rgb(255 255 255 / .45);
    transition: transform 160ms ease;
}
.nav-group[open] > .nav-group-head svg { transform: rotate(180deg); }
.nav-group[open] > .nav-group-head { color: rgb(255 255 255 / .82); }

/*  Indented under its heading, with a hairline so the group reads as one block even
    when two sit next to each other. */
.nav-group-items {
    margin: 2px 0 6px 11px; padding-left: 9px;
    border-left: 1px solid rgb(255 255 255 / .12);
}

/*  A closed group still has to show that the page you are on lives inside it — otherwise
    collapsing the menu loses your place. */
.nav-group:not([open]) > .nav-group-head:has(+ .nav-group-items .nav-item[aria-current="page"]) {
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .nav-group-head svg { transition: none; }
}

/*  ── a summary card that is also a link ──────────────────────────────────────────

    The four cards above the merchant list are anchors, so the number IS the way to open
    the filtered list. Without this they inherit the link styling and every label arrives
    underlined and link-coloured, which reads as broken text rather than as a card.

    The affordance is kept, just moved: the whole card lifts on hover and takes a focus
    ring, so it still announces itself as something you can click. */
a.card.stat { text-decoration: none; color: inherit; display: block; }
a.card.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
a.card.stat:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
a.card.stat .stat-label,
a.card.stat .stat-value,
a.card.stat .stat-foot span { text-decoration: none; color: inherit; }
a.card.stat { transition: box-shadow 140ms ease, transform 140ms ease; }

@media (prefers-reduced-motion: reduce) {
    a.card.stat { transition: none; }
    a.card.stat:hover { transform: none; }
}

/*  ── the metric strip inside a card ──────────────────────────────────────────────

    .stat-row appears on fourteen screens and HAD NO RULE AT ALL. Its children are plain
    block elements, so every figure took the full width of the card and stacked: four
    numbers filled an entire screen, and System Status needed scrolling to see that one
    check was unhealthy.

    A row of figures, not a column. Laid out with auto-fit so it fills whatever width the
    card has and folds to two across and then one on a phone, with no breakpoints to keep
    in step with the number of figures — which varies from three to five across these
    pages.

    The dividers are drawn as gaps in a background rather than as borders on the children,
    so no divider is ever left dangling at the end of a wrapped row. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--peach);          /* shows through the gaps as hairlines */
    border-radius: 10px;
    overflow: hidden;
}

/*  A .stat inside a row is a CELL, not a card: the accent bar and the card padding belong
    to the standalone version and here would draw four coloured stripes down the middle of
    one card. */
.stat-row > .stat {
    border-left: 0;
    padding: 16px 18px;
    background: #fff;
    display: flex; flex-direction: column; gap: 2px;
}

.stat-row > .stat .stat-label {
    font-size: 11px; color: rgb(69 60 60 / .75);
}

/*  Smaller than the standalone card's 30px. These are a summary above the real content,
    not the point of the page, and at 30px four of them shout down the table underneath. */
.stat-row > .stat .stat-value {
    margin: 4px 0 0; font-size: 23px; line-height: 1.15;
}

/*  A badge sits in some of these cells instead of a number — Overall on System Status is
    "Unhealthy", not a count. It must not inherit the mono figure sizing. */
.stat-row > .stat .stat-value .badge {
    font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
    vertical-align: middle;
}

.stat-row > .stat .stat-foot {
    margin: 2px 0 0; font-size: 11.5px; color: rgb(69 60 60 / .75);
}

@media (max-width: 560px) {
    .stat-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .stat-row > .stat { padding: 13px 14px; }
    .stat-row > .stat .stat-value { font-size: 20px; }
}

/*  ── short cells that must not wrap ──────────────────────────────────────────────

    Raising the type size cost each column about a character of width, and three cells
    started folding onto two lines: "PRIVATE LIMITED", "19 Aug 2026", and the row's
    buttons. None of them is long — they were simply being given less room than they
    need, and a wrapped date makes a table look broken rather than full.

    Applied to the short, known-length cells only. Anything that can hold a merchant's
    own name or a beneficiary's still wraps, because those genuinely can be long and
    truncating somebody's trading name is worse than a second line. */
td.time, .badge, .nav-group-head { white-space: nowrap; }

/*  The business type: a fixed vocabulary (PRIVATE LIMITED, LLP, PROPRIETORSHIP), so it
    is safe to keep on one line and let the column size to the widest of them. */
table td:has(> .badge), table .num, table .amount { white-space: nowrap; }

/*  Row actions stay on one line while they fit, and still wrap rather than overflow on a
    narrow screen — the original intent, just with the breathing room restored. */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
               justify-content: flex-end; }
.nowrap { white-space: nowrap; }

/*  ══ THE COLLAPSIBLE SIDEBAR ═════════════════════════════════════════════════════

    Collapsed, the menu becomes a 72px rail of icons and the content takes the width back.
    On a wallet statement or a transaction list that is another 200px of table, which is
    the whole point — the menu is how you got here, not what you came to read.

    The state arrives from the server as a class on .shell (see _Layout), so the rail is
    already a rail in the first frame. Nothing here depends on script having run. */
.sidebar-toggle {
    margin-left: auto; flex-shrink: 0;
    display: grid; place-items: center;
    width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 8px; cursor: pointer;
    background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .75);
    transition: background 140ms ease, color 140ms ease;
}
.sidebar-toggle:hover { background: rgb(255 255 255 / .16); color: #fff; }
.sidebar-toggle:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.sidebar-toggle svg { width: 18px; height: 18px; }

/*  The chevron points the way the menu will move, so the one icon serves both states. */
.shell.sidebar-collapsed .sidebar-toggle svg { transform: scaleX(-1); }

/*  ── collapsed ───────────────────────────────────────────────────────────────── */
.shell.sidebar-collapsed { --sidebar-w: 72px; }

/*  Everything that is words disappears; everything that is a symbol stays. */
.shell.sidebar-collapsed .brand-text,
.shell.sidebar-collapsed .nav-item span,
.shell.sidebar-collapsed .nav-group-head span,
.shell.sidebar-collapsed .nav-group-head svg,
.shell.sidebar-collapsed .switcher { display: none; }

.shell.sidebar-collapsed .brand { justify-content: center; padding: 0 8px; gap: 0; }
.shell.sidebar-collapsed .sidebar-toggle { margin: 0; }

/*  A group heading collapses to a divider. Removing it entirely would run six groups into
    one undifferentiated column of icons; a 1px rule keeps the grouping legible without
    claiming space for a word that is not being shown. */
.shell.sidebar-collapsed .nav-group-head {
    height: 1px; padding: 0; margin: 10px 12px; overflow: hidden;
    background: rgb(255 255 255 / .14); pointer-events: none;
}
.shell.sidebar-collapsed .nav-group-items {
    margin: 0; padding: 0; border-left: 0;
}
.shell.sidebar-collapsed .nav { padding: 10px 10px 8px; }

.shell.sidebar-collapsed .nav-item {
    justify-content: center; padding: 11px 0; margin-bottom: 2px;
}
.shell.sidebar-collapsed .nav-item svg { width: 19px; height: 19px; }

/*  ── the label, as a tooltip, drawn by CSS ────────────────────────────────────────

    An icon-only rail is unusable to anyone who does not already know the icons, and the
    twelfth shield in a column means nothing on its own.

    Built from the element's own data-label rather than the title attribute: the native
    tooltip takes about a second to appear, cannot be styled, and is suppressed entirely
    on touch. This one appears at once and sits outside the rail. */
.shell.sidebar-collapsed .nav-item { position: relative; }
.shell.sidebar-collapsed .nav-item::after {
    content: attr(data-label);
    position: absolute; left: calc(100% + 10px); top: 50%;
    transform: translateY(-50%) translateX(-4px);
    padding: 6px 10px; border-radius: 7px;
    background: var(--blue-deep); color: #fff;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    box-shadow: var(--shadow-md);
    opacity: 0; pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
    z-index: 60;
}
.shell.sidebar-collapsed .nav-item:hover::after,
.shell.sidebar-collapsed .nav-item:focus-visible::after {
    opacity: 1; transform: translateY(-50%) translateX(0);
}

/*  The sidebar clips its own overflow for the scrollbar, which would cut the tooltip in
    half. Only the nav needs to scroll. */
.shell.sidebar-collapsed .sidebar { overflow: visible; }
.shell.sidebar-collapsed .nav { overflow-y: auto; overflow-x: visible; }

/*  Width is the only thing that moves, and it is the cheapest thing to animate. */
.sidebar { transition: width 180ms ease, flex-basis 180ms ease; }

/*  Below the sidebar's own breakpoint the menu is already laid out differently, so the
    rail would be a third layout competing with two. */
@media (max-width: 900px) {
    .shell.sidebar-collapsed { --sidebar-w: 272px; }
    .shell.sidebar-collapsed .brand-text,
    .shell.sidebar-collapsed .nav-item span,
    .shell.sidebar-collapsed .nav-group-head span,
    .shell.sidebar-collapsed .nav-group-head svg { display: revert; }
    .shell.sidebar-collapsed .nav-item::after { content: none; }
    .shell.sidebar-collapsed .nav-group-head { height: auto; padding: 9px 12px; background: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar-toggle, .shell.sidebar-collapsed .nav-item::after { transition: none; }
}

/* Merchant workspace additions use the existing token system and compact operational density. */
.merchant-action-strip { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.setup-grid { align-items:start; }
.numbered-flow { margin:16px 0 0; padding:0; list-style:none; counter-reset:setup; display:grid; gap:14px; }
.numbered-flow li { counter-increment:setup; display:grid; grid-template-columns:32px 1fr; gap:10px; align-items:start; }
.numbered-flow li::before { content:counter(setup); display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#eaf2ff; color:var(--blue-deep); font-weight:700; }
.numbered-flow li span { display:block; margin-top:3px; color:rgb(69 60 60 / .75); font-size:.875rem; }
.truth-list { margin:14px 0; display:grid; gap:0; }
.truth-list div { padding:12px 0; border-bottom:1px solid rgb(12 70 150 / .14); }
.truth-list dt { font-weight:700; color:var(--ink); }
.truth-list dd { margin:4px 0 0; color:rgb(69 60 60 / .75); }
textarea { min-height:112px; resize:vertical; }
@media (max-width:900px){.merchant-action-strip{align-items:flex-start;flex-direction:column}.merchant-action-strip .row-actions{width:100%}.merchant-action-strip .btn{flex:1 1 180px}}

/* ── 2026 workspace refinement ─────────────────────────────────────────────
   A calmer, denser operations system shared by every MOS, Bank and Merchant
   page. The rules below intentionally refine the original prototype without
   changing routes, permissions, validation, statuses or financial behavior. */
:root {
  --blue: #123f76;
  --blue-deep: #082c55;
  --orange-dark: #d94b24;
  --ink: #172235;
  --page: #f4f7fb;
  --panel: #ffffff;
  --peach: #dfe6ef;
  --ui-line: #e2e8f0;
  --ui-line-strong: #cfd8e5;
  --ui-muted: #607086;
  --ui-soft: #f8fafc;
  --ui-blue-soft: #eef5ff;
  --ui-orange-soft: #fff3ee;
  --sidebar-w: 260px;
  --topbar-h: 70px;
  --shadow-2xs: 0 1px 2px rgb(15 35 65 / .04);
  --shadow-xs: 0 1px 3px rgb(15 35 65 / .07), 0 1px 2px rgb(15 35 65 / .04);
  --shadow-md: 0 12px 32px rgb(15 35 65 / .10), 0 2px 8px rgb(15 35 65 / .05);
}

body { background: var(--page); color: var(--ink); }
.main { min-height: 100dvh; }
.sidebar {
  background: var(--blue-deep);
  border-right: 1px solid rgb(255 255 255 / .08);
  box-shadow: none;
}
.brand {
  height: var(--topbar-h);
  padding: 0 18px;
  background: rgb(4 28 55 / .38);
}
.brand-badge {
  width: 38px; height: 38px; border-radius: 11px;
  box-shadow: 0 8px 20px rgb(0 0 0 / .16);
}
.brand-name { letter-spacing: -.01em; }
.brand-sub { color: rgb(255 255 255 / .72); letter-spacing: .12em; }
.nav { padding: 14px 12px 18px; }
.nav-group-primary { margin-bottom: 7px; }
.nav-group-head {
  padding: 9px 11px 7px;
  color: rgb(255 255 255 / .58);
  font-size: 10px;
  letter-spacing: .12em;
}
.nav-group-items { border-left-color: rgb(255 255 255 / .11); }
.nav-item {
  min-height: 42px;
  margin-bottom: 3px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgb(255 255 255 / .78);
  font-size: 13px;
  font-weight: 600;
}
.nav-item:hover { background: rgb(255 255 255 / .075); color: #fff; }
.nav-item[aria-current="page"] {
  background: rgb(255 255 255 / .12);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--orange), 0 5px 16px rgb(0 0 0 / .10);
}
.nav-item[aria-current="page"] svg { color: #ffd2c5; }

.topbar {
  height: var(--topbar-h);
  padding: 0 30px;
  border-bottom: 1px solid var(--ui-line);
  background: rgb(255 255 255 / .94);
  box-shadow: 0 1px 0 rgb(15 35 65 / .02);
}
.topbar-context { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-label { color: var(--ui-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.topbar-portal { font-size: 13px; }
.pill-aqua { padding: 3px 9px; border-color: #bde9df; background: #e9faf6; }
.status-pill {
  min-height: 34px;
  padding: 6px 12px;
  border-color: #cfe8e2;
  background: #f0fbf8;
  box-shadow: none;
}
.who-name { color: var(--ink); }
.who-role { color: var(--ui-muted); }

.mobile-nav-toggle, .sidebar-scrim { display: none; }
.content {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 28px 32px 56px;
}
.page-head {
  align-items: flex-end;
  margin-bottom: 20px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--ui-line);
}
.eyebrow-row { gap: 7px; }
.eyebrow { color: #a43b20; font-size: 10px; letter-spacing: .13em; }
h1 { margin-top: 5px; color: #123967; font-size: clamp(24px, 2vw, 30px); line-height: 1.15; }
h2 { color: #173d69; font-size: 15px; }
h3 { color: #24486f; }
.sub, .asof, .cell-sub { color: var(--ui-muted); }
.sub { margin-top: 5px; line-height: 1.55; }

.card {
  padding: 20px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-xs);
  transition: none;
}
.card:hover { border-color: var(--ui-line); }
.card-head { gap: 16px; margin-bottom: 16px; }
.card-head > :first-child { min-width: 0; }
.grid { gap: 16px; }
.stack > * + * { margin-top: 16px; }
.split { gap: 16px; grid-template-columns: minmax(0, 1.16fr) minmax(300px, .84fr); }

/* Filters are compact workspaces, not full-page data-entry forms. */
.filter-panel { padding: 18px 20px; }
.filter-panel .card-head { margin-bottom: 14px; }

/* Dashboard scope follows the KPIs. Its summary stays visible while the larger editor is
   disclosed only when somebody needs to change context. */
.dashboard-scope {
  margin: 0 0 16px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--ui-shadow);
}
.dashboard-kpis { padding-bottom: 18px; }
.dashboard-filter-disclosure > summary {
  list-style: none;
  cursor: pointer;
}
.dashboard-filter-disclosure > summary::-webkit-details-marker { display: none; }
.dashboard-scope-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  padding: 11px 14px 11px 18px;
}
.dashboard-scope-label {
  display: block;
  margin-bottom: 5px;
  color: var(--ui-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.scope-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.scope-chips > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  background: #f7f9fc;
  color: #334155;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.scope-chips svg { width: 13px; height: 13px; }
.dashboard-filter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.dashboard-filter-trigger svg { width: 15px; height: 15px; }
.dashboard-filter-disclosure > summary:hover .dashboard-filter-trigger { background: #f4f7fb; }
.dashboard-filter-disclosure > summary:focus-visible {
  outline: 3px solid rgb(12 70 150 / .34);
  outline-offset: 2px;
  border-radius: 9px;
}
.dashboard-filter-disclosure[open] .dashboard-filter-trigger { background: #eef4fb; }
.dashboard-filter-body {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--ui-line);
  background: #fbfcfe;
}
.dashboard-filter-body > .sub { margin: 0 0 13px; }
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  width: 100%;
}
.filter-row > .field { flex: 1 1 178px; min-width: 0 !important; }
.filter-row > .field:first-child { flex-basis: 240px; }
.filter-row > .field-actions {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-bottom: 1px;
}
.filter-row > .field-actions .btn { min-height: 40px; }
.filter-grid { display: grid; gap: 12px; align-items: end; }
.page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: 9px;
  max-width: min(100%, 980px);
}
.page-toolbar > .field { min-width: 118px; }
.page-toolbar > .field.search-field { min-width: 210px; }
.page-toolbar > .field.merchant-field { min-width: 230px; }
.page-toolbar .filter-select { min-height: 40px; border-color: var(--ui-line-strong); }
.page-toolbar .filter-select select { min-height: 26px; }
.setup-create-grid {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(260px, 3fr) auto;
  gap: 12px;
  align-items: end;
}
.setup-create-grid > div { display: flex; flex-direction: column; min-width: 0; }
.setup-create-grid > div label { margin-bottom: 6px; }
.chargeback-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  align-items: end;
}
.chargeback-form > [style*="grid-column"] { grid-column: 1 / -1 !important; }
.chargeback-form .field-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.report-filter-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.report-filter-grid .report-kind { grid-column: span 4; }
.report-filter-grid .report-date { grid-column: span 2; }
.report-filter-grid .report-merchant { grid-column: span 4; }
.report-filter-grid .report-status { grid-column: span 3; }
.report-filter-grid .report-search { grid-column: span 6; }
.report-filter-grid .field-actions { grid-column: span 3; display: flex; gap: 8px; }
.report-filter-grid.merchant-report-filters .report-kind { grid-column: span 6; }
.report-filter-grid.merchant-report-filters .report-date { grid-column: span 3; }

.field-grid { gap: 16px 18px; }
.field label, label {
  color: #526278;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .025em;
}
.field label { margin-bottom: 6px; text-transform: none; }
form > .field + .field { margin-top: 14px; }
.field-grid .field + .field,
.filter-row .field + .field,
.filter-grid .field + .field { margin-top: 0; }
:where(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="url"], input[type="tel"], select, textarea),
.field :where(input, select, textarea) {
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  box-shadow: inset 0 1px 1px rgb(15 35 65 / .025);
}
.field :where(input, select, textarea) { width: 100%; }
:where(input, select, textarea):hover:not(:disabled):not([readonly]) { border-color: #aebdce; }
:where(input, select, textarea):focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(18 63 118 / .12);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(18 63 118 / .12);
}
.field input.readonly, :where(input, textarea)[readonly] { background: #f3f6fa; color: #40546d; }
.field .hint { color: var(--ui-muted); font-size: 11px; line-height: 1.45; }
textarea, .field textarea { min-height: 92px; }

.btn {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: none;
}
.btn-accent { background: var(--orange-fill); box-shadow: 0 5px 12px rgb(239 85 44 / .16); }
.btn-accent:hover { background: var(--orange-dark); box-shadow: 0 7px 16px rgb(217 75 36 / .20); }
.btn-soft { border-color: var(--ui-line-strong); color: #33445a; }
.btn-soft:hover { border-color: #afbdcd; background: #f7f9fc; }
.btn-xs { min-height: 32px; padding: 6px 10px; }
.row-actions { gap: 7px; }

.card.stat {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  padding: 18px 19px;
  border-left: 1px solid var(--ui-line);
  border-top: 3px solid #48bea8;
}
.card.stat.amber { border-top-color: var(--amber-500); border-left-color: var(--ui-line); }
.card.stat.orange { border-top-color: var(--orange); border-left-color: var(--ui-line); }
.card.stat.blue { border-top-color: var(--blue); border-left-color: var(--ui-line); }
.stat-label { color: #5b6b80; font-size: 10px; letter-spacing: .075em; }
.stat-chip { border-radius: 9px; padding: 7px; }
.stat-value { margin-top: 14px; color: #123967; font-size: 27px; }
.stat-foot { align-items: flex-end; margin-top: 8px; color: var(--ui-muted); }
a.card.stat:hover { border-color: #c9d5e2; box-shadow: var(--shadow-md); transform: translateY(-2px); }

.table-wrap {
  overflow: auto;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: #fff;
}
.table-wrap:focus,
.table-wrap:focus-visible {
  outline: 3px solid rgb(12 70 150 / .34);
  outline-offset: 2px;
}
thead tr { border-bottom-color: var(--ui-line); background: #f5f8fc; }
th {
  padding: 11px 13px;
  color: #41546c;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .07em;
}
tbody { font-size: 12.5px; }
tbody tr { border-top-color: #edf1f5; }
tbody tr:hover { background: #f8fafc; }
td { padding: 12px 13px; }
.cell-main { color: #1e2b3d; }

.badge { border-radius: 999px; padding: 4px 8px; font-size: 10.5px; }
.notice { border-color: var(--ui-line); border-radius: 10px; box-shadow: none; }
.notice-info { background: #f5f9ff; border-color: #cfdeef; }
.empty { padding: 38px 16px; }
.kv > div { border-bottom-color: var(--ui-line); }
.card-foot { border-top-color: var(--ui-line); }
.slab { border-color: var(--ui-line); background: var(--ui-soft); }
.timeline li:not(:last-child)::before { background: var(--ui-line); }

.page-kind-form .content { max-width: 1500px; }
.page-kind-detail .content { max-width: 1500px; }
.page-kind-monitor .content { max-width: 1600px; }
.page-kind-form .split { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); }
.page-kind-detail .page-head { margin-bottom: 18px; }

.auth-body { background: #eef3f9; }
.auth-shell { padding: 40px 20px; }
.auth-card {
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgb(15 35 65 / .15);
}
.auth-brand { border-bottom-color: var(--ui-line); }
.auth-submit { min-height: 43px; }

@media (max-width: 1200px) {
  .setup-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-create-grid > .btn { justify-self: start; }
  .report-filter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .report-filter-grid .report-kind,
  .report-filter-grid .report-merchant { grid-column: span 3; }
  .report-filter-grid .report-date { grid-column: span 3; }
  .report-filter-grid .report-status { grid-column: span 2; }
  .report-filter-grid .report-search { grid-column: span 4; }
  .report-filter-grid .field-actions { grid-column: span 6; }
}

@media (max-width: 1024px) {
  .shell, .shell.sidebar-collapsed { --sidebar-w: min(86vw, 300px); flex-direction: row; }
  .main { width: 100%; }
  .sidebar,
  .shell.sidebar-collapsed .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    height: 100dvh;
    z-index: 80;
    overflow: hidden;
    transform: translateX(-102%);
    transition: transform 180ms ease;
  }
  .shell.mobile-nav-open .sidebar { transform: translateX(0); }
  .shell.sidebar-collapsed .brand-text,
  .shell.sidebar-collapsed .nav-item span,
  .shell.sidebar-collapsed .nav-group-head span,
  .shell.sidebar-collapsed .nav-group-head svg,
  .shell.sidebar-collapsed .switcher { display: revert; }
  .shell.sidebar-collapsed .brand { justify-content: flex-start; padding: 0 18px; gap: 12px; }
  .shell.sidebar-collapsed .sidebar-toggle { margin-left: auto; }
  .shell.sidebar-collapsed .nav { padding: 14px 12px 18px; overflow-y: auto; }
  .shell.sidebar-collapsed .nav-item { justify-content: flex-start; padding: 10px 12px; }
  .shell.sidebar-collapsed .nav-group-head { height: auto; padding: 9px 11px 7px; margin: 0; background: transparent; }
  .shell.sidebar-collapsed .nav-group-items { margin-left: 11px; padding-left: 9px; border-left: 1px solid rgb(255 255 255 / .11); }
  .shell.sidebar-collapsed .nav-item::after { content: none; }
  .sidebar-scrim {
    position: fixed; inset: 0; z-index: 70;
    border: 0; background: rgb(5 20 38 / .48);
    backdrop-filter: blur(2px);
  }
  .mobile-nav-open .sidebar-scrim { display: block; }
  .mobile-nav-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 38px; padding: 8px 10px;
    border: 1px solid var(--ui-line-strong); border-radius: 8px;
    background: #fff; color: var(--blue); font: inherit; font-size: 12px; font-weight: 700;
  }
  .mobile-nav-toggle svg { width: 17px; height: 17px; }
  .nav-scroll-lock { overflow: hidden; }
  .topbar { padding: 0 18px; }
  .content { padding: 22px 18px 48px; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .split, .page-kind-form .split { grid-template-columns: 1fr; }
  .status-pill { display: none; }
}

/* Native disclosure controls in the navigation must retain a visible keyboard focus. */
.nav-group > summary:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: -3px;
  border-radius: 8px;
}

@media (max-width: 640px) {
  .topbar { min-height: 62px; height: auto; padding: 10px 14px; }
  .topbar-context { width: 100%; }
  .topbar-context > div { min-width: 0; }
  .topbar-portal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pill-aqua { display: none; }
  .topbar-right { margin-left: auto; }
  .who { display: none; }
  .content { padding: 18px 14px 42px; }
  .page-head { align-items: flex-start; margin-bottom: 16px; padding-bottom: 14px; }
  .page-head > form { width: 100%; }
  .page-head > form :where(input, select) { flex: 1 1 170px; }
  .card { padding: 16px; border-radius: 10px; }
  .dashboard-scope { margin-top: 0; }
  .dashboard-scope-summary { align-items: flex-start; flex-direction: column; gap: 10px; padding: 13px 14px; }
  .dashboard-filter-trigger { width: 100%; }
  .scope-chips { gap: 5px; }
  .dashboard-filter-body { padding: 14px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .card.stat { min-height: 126px; }
  .filter-row { align-items: stretch; }
  .filter-row > .field, .filter-row > .field:first-child { flex-basis: 100%; }
  .filter-row > .field-actions { flex-basis: 100%; }
  .filter-row > .field-actions .btn { flex: 1 1 120px; }
  .page-toolbar { width: 100%; justify-content: stretch; }
  .page-toolbar > .field,
  .page-toolbar > .field.search-field,
  .page-toolbar > .field.merchant-field { flex: 1 1 100%; min-width: 0; }
  .page-toolbar > .btn { flex: 1 1 110px; }
  .setup-create-grid, .chargeback-form { grid-template-columns: 1fr; }
  .chargeback-form > [style*="grid-column"], .chargeback-form .field-actions { grid-column: 1 !important; }
  .report-filter-grid { grid-template-columns: 1fr; }
  .report-filter-grid > .field,
  .report-filter-grid .report-kind,
  .report-filter-grid .report-date,
  .report-filter-grid .report-merchant,
  .report-filter-grid .report-status,
  .report-filter-grid .report-search,
  .report-filter-grid .field-actions { grid-column: 1; }
  .report-filter-grid .field-actions .btn { flex: 1 1 120px; }
  .table-wrap { margin: 0; padding: 0; }
  .row-actions { justify-content: flex-start; }
  body.mos-select-open::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 154;
    background: rgb(7 23 42 / .42);
    backdrop-filter: blur(1px);
  }
  .mos-select-panel {
    position: fixed;
    z-index: 160;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    max-height: min(72dvh, 560px);
    padding: 10px;
    border-radius: 15px;
  }
  .mos-select-options { max-height: calc(72dvh - 78px); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .btn, a.card.stat, .mos-select-trigger, .mos-select-chevron { transition: none; }
  a.card.stat:hover { transform: none; }
}

/* ── Premium workspace system · 2026-10 ───────────────────────────────────
   This layer refines the shared primitives used by every MOS, Bank and
   Merchant page. It changes presentation only: routes, data, permissions,
   status truth and financially consequential actions remain authoritative. */
:root {
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Manrope", "Inter", ui-sans-serif, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --blue: #123f76;
  --blue-deep: #072a50;
  --blue-ink: #0b315e;
  --orange: #f15b36;
  --orange-fill: #c93f1d;
  --orange-dark: #aa3217;
  --ink: #17243a;
  --page: #f2f6fb;
  --panel: #ffffff;
  --peach: #dce5f0;
  --ui-line: #dce5f0;
  --ui-line-strong: #c7d3e2;
  --ui-muted: #60718a;
  --ui-soft: #f7f9fc;
  --ui-blue-soft: #edf4fc;
  --ui-orange-soft: #fff2ec;
  --sidebar-w: 272px;
  --topbar-h: 76px;
  --radius-control: 10px;
  --radius-card: 16px;
  --shadow-2xs: 0 1px 2px rgb(15 35 65 / .045);
  --shadow-xs: 0 1px 2px rgb(15 35 65 / .05), 0 5px 16px rgb(15 35 65 / .045);
  --shadow-md: 0 18px 46px rgb(12 35 66 / .11), 0 4px 12px rgb(12 35 66 / .055);
  --shadow-popover: 0 22px 54px rgb(7 31 60 / .18), 0 6px 18px rgb(7 31 60 / .09);
}

html { background: var(--page); }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: -.006em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Shell and navigation */
.sidebar {
  background: #082f59;
  border-right: 1px solid rgb(255 255 255 / .07);
  box-shadow: 10px 0 32px rgb(7 31 60 / .08);
}
.brand {
  height: var(--topbar-h);
  padding: 0 20px;
  gap: 13px;
  background: #062848;
  border-bottom: 1px solid rgb(255 255 255 / .08);
}
.brand-badge {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--orange);
  box-shadow: 0 10px 24px rgb(0 0 0 / .20), inset 0 1px 0 rgb(255 255 255 / .2);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.025em;
}
.brand-sub { margin-top: 2px; font-size: 8.5px; font-weight: 700; letter-spacing: .17em; }
.sidebar-toggle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgb(255 255 255 / .07);
  color: rgb(255 255 255 / .75);
}
.sidebar-toggle:hover { background: rgb(255 255 255 / .13); transform: translateY(-1px); }
.nav { padding: 16px 13px 22px; }
.nav-group-primary { margin-bottom: 11px; }
.nav-group { margin-bottom: 5px; }
.nav-group-head {
  min-height: 34px;
  padding: 10px 12px 7px;
  color: rgb(223 235 248 / .62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.nav-group-head:hover { background: rgb(255 255 255 / .045); color: rgb(255 255 255 / .88); }
.nav-group-items { margin-left: 12px; padding-left: 9px; border-left-color: rgb(255 255 255 / .10); }
.nav-item {
  min-height: 44px;
  margin-bottom: 4px;
  padding: 10px 12px;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: rgb(235 243 252 / .76);
  font-size: 13px;
  font-weight: 620;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.nav-item svg { width: 18px; height: 18px; color: rgb(219 232 247 / .67); }
.nav-item:hover {
  background: rgb(255 255 255 / .07);
  border-color: rgb(255 255 255 / .045);
  color: #fff;
  transform: translateX(2px);
}
.nav-item[aria-current="page"] {
  background: #153f6b;
  border-color: rgb(255 255 255 / .08);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--orange), 0 8px 22px rgb(0 0 0 / .13);
  transform: none;
}
.nav-item[aria-current="page"] svg { color: #ffb49f; }
.switcher {
  padding: 14px 15px 16px;
  background: #062848;
  border-top-color: rgb(255 255 255 / .08);
}
.switch-btn { min-height: 39px; border-radius: 9px; }

.topbar {
  height: var(--topbar-h);
  padding: 0 34px;
  border-bottom: 1px solid rgb(202 214 228 / .82);
  background: rgb(255 255 255 / .91);
  box-shadow: 0 4px 18px rgb(15 35 65 / .035);
  backdrop-filter: blur(16px) saturate(150%);
}
.topbar-label {
  margin-bottom: 3px;
  color: #586b84;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
}
.topbar-portal {
  gap: 9px;
  color: var(--blue-ink);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 750;
}
.pill-aqua {
  padding: 4px 10px;
  border-color: #b9e3dc;
  border-radius: 999px;
  background: #eaf9f6;
  color: #155b55;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: .01em;
}
.status-pill {
  min-height: 36px;
  padding: 7px 13px;
  border-color: #c9e8e2;
  background: #f0faf8;
  color: #205b58;
}
.status-pill span:last-child { font-family: var(--font-sans); font-size: 11px; font-weight: 700; }
.who { padding-left: 2px; }
.who-name { font-family: var(--font-display); font-size: 12.5px; font-weight: 750; }
.who-role { margin-top: 2px; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Page hierarchy */
.content {
  max-width: 1680px;
  padding: 34px 36px 64px;
}
.page-head {
  align-items: center;
  min-height: 92px;
  margin-bottom: 24px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--ui-line);
}
.page-head > :first-child { min-width: 0; }
.eyebrow-row { gap: 8px; margin-bottom: 7px; }
.eyebrow {
  color: #a43b20;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .17em;
}
.eyebrow-row .pulse-dot { width: 7px; height: 7px; box-shadow: 0 0 0 4px rgb(241 91 54 / .10); }
h1, h2, h3, .auth-title, .stat-value { font-family: var(--font-display); }
h1 {
  margin-top: 0;
  color: #0d3869;
  font-size: clamp(28px, 2.2vw, 36px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.04em;
}
h2 { color: #173f6e; font-size: 17px; font-weight: 750; letter-spacing: -.025em; }
h3 { color: #254d78; font-size: 14px; font-weight: 750; letter-spacing: -.018em; }
.sub { margin-top: 7px; color: var(--ui-muted); font-size: 12.5px; line-height: 1.55; }
.asof { margin-top: 8px; color: #596d86; font-size: 11.5px; }
.kicker {
  color: #8f4028;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
}

/* Surfaces */
.card {
  padding: 22px;
  border: 1px solid rgb(213 224 237 / .95);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
}
.card + .card { margin-top: 18px; }
.grid { gap: 18px; }
.stack > * + * { margin-top: 18px; }
.split { gap: 20px; }
.card-head {
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}
.card-head > :first-child > .sub { max-width: 760px; }
.card-head[style*="border-bottom"] {
  padding-bottom: 15px !important;
  border-bottom-color: var(--ui-line) !important;
}
.page-kind-list .content > .card,
.page-kind-monitor .content > .card,
.page-kind-detail .content > .card { box-shadow: var(--shadow-xs); }
.page-kind-form .content { max-width: 1520px; }
.page-kind-detail .content { max-width: 1520px; }
.page-kind-monitor .content { max-width: 1620px; }
.page-kind-form .split { grid-template-columns: minmax(0, 1.48fr) minmax(310px, .62fr); }

/* Buttons and links */
.btn {
  min-height: 41px;
  padding: 9px 15px;
  gap: 8px;
  border-radius: var(--radius-control);
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: -.005em;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
.btn-accent {
  border-color: var(--orange-fill);
  background: var(--orange-fill);
  color: #fff;
  box-shadow: 0 7px 18px rgb(177 51 20 / .18);
}
.btn-accent:hover { background: var(--orange-dark); border-color: var(--orange-dark); box-shadow: 0 10px 22px rgb(160 46 18 / .23); }
.btn-soft {
  border-color: var(--ui-line-strong);
  background: #fff;
  color: #29445f;
  box-shadow: 0 1px 2px rgb(15 35 65 / .025);
}
.btn-soft:hover { border-color: #9eafc3; background: #f7f9fc; box-shadow: 0 5px 14px rgb(15 35 65 / .065); }
.btn-xs { min-height: 34px; padding: 7px 11px; font-size: 11.5px; }
.link-action {
  gap: 5px;
  color: #bb3d1c;
  font-weight: 750;
  text-underline-offset: 3px;
  transition: color 140ms ease, transform 140ms ease;
}
.link-action:hover { color: #0e4a83; text-decoration: underline; }

/* Forms */
.field-grid { gap: 18px 20px; }
.field label, label {
  color: #455a73;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .012em;
}
.field label { margin-bottom: 7px; }
form > .field + .field { margin-top: 16px; }
:where(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="url"], input[type="tel"], select, textarea),
.field :where(input, select, textarea) {
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--radius-control);
  background: #fff;
  color: #1a2c43;
  font-size: 13px;
  font-weight: 520;
  box-shadow: inset 0 1px 2px rgb(15 35 65 / .025), 0 1px 0 rgb(255 255 255 / .8);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
:where(input, select, textarea):hover:not(:disabled):not([readonly]) { border-color: #9fb0c5; }
:where(input, select, textarea):focus,
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #2a629b;
  box-shadow: 0 0 0 4px rgb(42 98 155 / .12), inset 0 1px 2px rgb(15 35 65 / .02);
}
.field input.readonly, :where(input, textarea)[readonly] {
  border-color: #dde5ef;
  background: #f4f7fa;
  color: #42566e;
}
.field .hint { margin-top: 6px; color: #596d86; font-size: 11px; line-height: 1.5; }
.field .err { margin-top: 6px; font-size: 11.5px; }
textarea, .field textarea { min-height: 100px; line-height: 1.55; }
.card-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top-color: var(--ui-line);
}
.filter-panel { padding: 20px 22px; }
.filter-row, .filter-grid { gap: 13px; }
.filter-grid > * { min-width: 0; }
.page-toolbar { gap: 10px; }
.page-toolbar .filter-select { min-height: 43px; border-radius: var(--radius-control); }
.setup-create-grid, .chargeback-form { gap: 16px; }

/* Searchable select: same visual language as every other field. */
.mos-select-trigger {
  min-height: 43px;
  padding: 9px 11px 9px 12px;
  border-color: var(--ui-line-strong);
  border-radius: var(--radius-control);
  background: #fff;
  color: #1d324b;
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgb(15 35 65 / .025);
}
.mos-select-trigger:hover { border-color: #9fb0c5; background: #fbfcfe; }
.mos-select-trigger:focus-visible,
.mos-select.is-open .mos-select-trigger {
  border-color: #2a629b;
  box-shadow: 0 0 0 4px rgb(42 98 155 / .12);
}
.mos-select-chevron { color: #5a6d84; }
.mos-select-panel {
  margin-top: 7px;
  padding: 9px;
  border-color: #cbd7e5;
  border-radius: 14px;
  background: rgb(255 255 255 / .98);
  box-shadow: var(--shadow-popover);
  backdrop-filter: blur(14px);
}
.mos-select-searchbox { margin-bottom: 7px; }
.mos-select-search {
  min-height: 40px;
  border-radius: 9px;
  background: #f7f9fc;
}
.mos-select-option {
  min-height: 40px;
  margin: 2px 0;
  padding: 9px 34px 9px 11px;
  border-radius: 9px;
  color: #29425e;
  font-size: 12.5px;
  font-weight: 560;
}
.mos-select-option:hover,
.mos-select-option:focus-visible { background: #eef4fb; color: #0c4076; }
.mos-select-option.is-selected { background: #e8f1fb; color: #0c4076; font-weight: 750; }
.mos-select-empty { padding: 22px 12px; color: var(--ui-muted); }

/* KPI and status hierarchy */
.dashboard-kpis { padding-bottom: 0; margin-bottom: 18px; }
.card.stat {
  min-height: 158px;
  padding: 21px;
  border: 1px solid var(--ui-line);
  border-top: 3px solid #38ae9c;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.card.stat::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 68px;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(56 174 156 / .055), transparent);
}
.card.stat.amber::after { background: linear-gradient(180deg, rgb(245 158 11 / .06), transparent); }
.card.stat.orange::after { background: linear-gradient(180deg, rgb(241 91 54 / .055), transparent); }
.card.stat.blue::after { background: linear-gradient(180deg, rgb(18 63 118 / .055), transparent); }
.stat-top, .stat-value, .stat-foot { position: relative; z-index: 1; }
.stat-label { color: #53667e; font-size: 10px; font-weight: 800; letter-spacing: .105em; }
.stat-chip { padding: 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .56); }
.stat-chip svg { width: 17px; height: 17px; }
.stat-value { margin-top: 17px; color: #0d3969; font-size: 30px; font-weight: 750; letter-spacing: -.045em; }
.stat-foot { gap: 10px; margin-top: 10px; color: #596d86; font-size: 11.5px; line-height: 1.5; }
a.card.stat { transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
a.card.stat:hover { transform: translateY(-3px); border-color: #bdccdc; box-shadow: var(--shadow-md); }

.dashboard-scope {
  margin: 0 0 18px;
  border-color: #d6e1ed;
  border-radius: 13px;
  box-shadow: var(--shadow-2xs);
}
.dashboard-scope-summary { min-height: 66px; padding: 12px 15px 12px 20px; }
.dashboard-scope-label { margin-bottom: 6px; color: #64758b; font-size: 10px; letter-spacing: .12em; }
.scope-chips { gap: 7px; }
.scope-chips > span {
  min-height: 27px;
  padding: 4px 9px;
  border-color: #d6e1ed;
  background: #f5f8fc;
  color: #304963;
  font-size: 11px;
}
.dashboard-filter-trigger { min-height: 38px; padding: 8px 12px; border-radius: 9px; }
.dashboard-filter-body { padding: 18px 20px 20px; background: #f8fafc; }

.badge {
  min-height: 25px;
  padding: 4px 9px;
  gap: 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.badge .dot { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgb(255 255 255 / .62); }
.notice {
  padding: 15px 17px;
  border: 1px solid var(--ui-line);
  border-left-width: 4px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.58;
  box-shadow: 0 5px 16px rgb(15 35 65 / .035);
}
.notice strong { margin-bottom: 5px; font-size: 12.5px; }
.notice-info { background: #f3f8fe; border-color: #cbddef; }
.notice-warn { background: #fff9eb; border-color: #f1d99e; }
.notice-bad { background: #fff4f3; border-color: #f1c8c5; }
.callout-warn { border-radius: 10px; line-height: 1.55; }

/* Dense financial tables */
.table-wrap {
  border-color: #d7e1ed;
  border-radius: 12px;
  box-shadow: 0 1px 1px rgb(15 35 65 / .02);
}
table { background: #fff; }
thead tr {
  border-bottom-color: #d5e0ec;
  background: #f3f7fb;
}
th {
  padding: 12px 14px;
  color: #435a74;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
}
tbody { font-size: 12.75px; }
tbody tr { border-top-color: #e8eef5; transition: background 120ms ease, box-shadow 120ms ease; }
tbody tr:hover { background: #f7faff; box-shadow: inset 3px 0 0 #9bb8d6; }
td { padding: 13px 14px; line-height: 1.45; }
.cell-main, td.strong { color: #1a2c43; font-weight: 720; }
.cell-sub { margin-top: 2px; color: #596d86; font-size: 11px; line-height: 1.4; }
td.id, td.utr, td.amount { font-size: 11.5px; }
td.amount { color: #0e477f; }
.empty {
  min-height: 190px;
  display: grid;
  place-content: center;
  padding: 38px 20px;
  border-radius: 11px;
  background: #fbfcfe;
  color: #5d7088;
  font-size: 13px;
}
.empty svg { width: 34px; height: 34px; margin: 0 auto 11px; color: #aab7c7; }

/* Detail, workflow and evidence views */
.kv { margin-top: 14px; }
.kv > div { padding: 13px 0; border-bottom-color: #e4ebf3; }
.kv dt { color: #596d86; font-size: 10.5px; font-weight: 700; letter-spacing: .035em; }
.kv dd { color: #21354d; font-size: 12.5px; }
.timeline { margin-top: 18px; }
.timeline li { padding-bottom: 19px; }
.tl-dot { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--ui-line); }
.tl-title { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; }
.tl-detail { color: #617289; line-height: 1.55; }
.steps { color: #5f7188; font-size: 12.5px; line-height: 1.85; }
.numbered-flow { gap: 16px; }
.numbered-flow li { grid-template-columns: 36px 1fr; gap: 12px; }
.numbered-flow li::before {
  width: 32px;
  height: 32px;
  background: #e8f1fb;
  color: #0d477f;
  box-shadow: inset 0 0 0 1px #d2e1f0;
  font-family: var(--font-display);
}
.propose > summary { border-radius: 10px; }
.request-list li { padding: 14px 0; }
.compare-box { padding: 13px 14px; border-radius: 10px; }

/* Authentication is intentionally focused, but visually belongs to the product. */
.auth-body {
  position: relative;
  overflow-x: hidden;
  background: #082f59;
}
.auth-body::before,
.auth-body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(2px);
}
.auth-body::before {
  width: 460px;
  height: 460px;
  top: -210px;
  left: -150px;
  background: rgb(241 91 54 / .15);
  box-shadow: 0 0 120px rgb(241 91 54 / .10);
}
.auth-body::after {
  width: 520px;
  height: 520px;
  right: -260px;
  bottom: -260px;
  background: rgb(56 190 168 / .12);
  box-shadow: 0 0 140px rgb(56 190 168 / .08);
}
.auth-shell { position: relative; z-index: 1; max-width: 470px; padding: 56px 20px; }
.auth-card {
  width: 100%;
  padding: 31px;
  border: 1px solid rgb(255 255 255 / .62);
  border-radius: 20px;
  background: rgb(255 255 255 / .975);
  box-shadow: 0 34px 90px rgb(0 18 43 / .30), 0 10px 28px rgb(0 18 43 / .14);
}
.auth-brand { margin-bottom: 27px; padding-bottom: 20px; border-bottom: 1px solid var(--ui-line); }
.auth-brand .brand-badge { width: 40px; height: 40px; }
.auth-brand .brand-name { font-family: var(--font-display); font-size: 14px; font-weight: 800; }
.auth-title { color: #0d3969; font-size: 27px; font-weight: 800; letter-spacing: -.04em; }
.auth-sub { margin-top: 7px; margin-bottom: 26px; color: #596d86; font-size: 12.5px; }
.auth-card .field { margin-bottom: 17px; }
.auth-submit { min-height: 45px; margin-top: 9px; }
.auth-link { margin-top: 19px; font-size: 12.5px; }
.auth-legal { margin-top: 18px; color: rgb(237 245 253 / .72); font-size: 10.5px; letter-spacing: .02em; }

/* Restrained page entry and interaction motion. */
@keyframes mos-page-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.app-page .content > .page-head { animation: mos-page-enter 220ms ease-out both; }
.app-page .content > :not(.page-head) { animation: mos-page-enter 260ms 35ms ease-out both; }

@media (min-width: 1180px) {
  .page-kind-form .split > .stack { position: sticky; top: calc(var(--topbar-h) + 18px); }
}

@media (max-width: 1280px) {
  :root { --sidebar-w: 252px; }
  .content { padding-right: 28px; padding-left: 28px; }
}

@media (max-width: 1024px) {
  :root { --topbar-h: 68px; }
  .topbar { padding: 0 18px; }
  .content { padding: 26px 20px 52px; }
  .page-head { min-height: auto; }
  .mobile-nav-toggle { min-height: 40px; border-radius: 10px; }
  .page-kind-form .split > .stack { position: static; }
}

@media (max-width: 640px) {
  body { font-size: 13.5px; }
  .content { padding: 20px 14px 44px; }
  .page-head { gap: 14px; margin-bottom: 18px; padding-bottom: 17px; }
  h1 { font-size: 27px; }
  h2 { font-size: 16px; }
  .card { padding: 17px; border-radius: 13px; }
  .card.stat { min-height: 136px; padding: 18px; }
  .stat-value { margin-top: 13px; font-size: 27px; }
  .dashboard-kpis { gap: 12px; margin-bottom: 14px; }
  .dashboard-scope-summary { padding: 14px; }
  .btn { min-height: 42px; }
  .report-filter-grid,
  .report-filter-grid > *,
  .report-filter-grid .mos-select,
  .report-filter-grid .mos-select-trigger { width: 100%; min-width: 0; max-width: 100%; }
  .auth-shell { padding: 28px 14px; }
  .auth-card { padding: 24px 20px; border-radius: 17px; }
  .auth-title { font-size: 25px; }
  th { padding: 11px 12px; }
  td { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-page .content > .page-head,
  .app-page .content > :not(.page-head) { animation: none; }
  .nav-item, .sidebar-toggle, .btn, .link-action, tbody tr,
  .mos-select-trigger, a.card.stat { transition: none; }
  .nav-item:hover, .sidebar-toggle:hover, .btn:hover:not(:disabled),
  a.card.stat:hover { transform: none; }
}

/* ── Shared component corrections · 2026-10-14 ───────────────────────────
   These rules correct defects found by opening the controls on real pages.
   They intentionally override older prototype-compatible declarations above. */

/* The JavaScript portals an open menu to <body>. Fixed coordinates keep it out of card,
   animation and table stacking contexts, while the inline measurements keep it inside the
   viewport. An open menu must never enlarge the document or disappear behind the next card. */
.mos-select-panel {
  position: fixed;
  inset: auto;
  z-index: 1000;
  margin: 0;
  max-width: none;
  overflow: hidden;
  transform-origin: top center;
}
.mos-select-panel[data-placement="top"] { transform-origin: bottom center; }
.mos-select-options { min-height: 0; }

/* Form controls use one calm blue focus treatment. The former global orange outline plus
   component shadow painted two competing rings around every field and combobox. */
:where(input[type="text"], input[type="search"], input[type="number"],
       input[type="email"], input[type="password"], input[type="date"],
       input[type="datetime-local"], input[type="url"], input[type="tel"],
       select, textarea):focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.mos-select-trigger:focus-visible,
.mos-select.is-open .mos-select-trigger {
  outline: 0;
}
.filter-select:focus-within,
.filter-select:has(.mos-select.is-open) { outline: 0; }

/* Keep password-manager/autofill values visually inside the same field system. */
input:-webkit-autofill,
input:-webkit-autofill:hover {
  -webkit-text-fill-color: #1a2c43;
  -webkit-box-shadow: inset 0 0 0 1000px #fff;
  caret-color: #1a2c43;
}
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1a2c43;
  -webkit-box-shadow: inset 0 0 0 1000px #fff, 0 0 0 4px rgb(42 98 155 / .12);
}

/* Authentication pages are a focused workspace. The previous max-width applied to <main>
   itself and pinned the entire card to the left on wide screens. */
.auth-shell {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 28px 20px;
}
.auth-card { width: min(100%, 440px); max-width: 440px; }
.auth-legal { width: min(100%, 440px); }

/* A subtle fade adds continuity without leaving transformed ancestors behind. Retained
   transforms created stacking contexts that trapped dropdown panels below later cards. */
@keyframes mos-page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Preserve more navigation context at ordinary laptop heights. Long role menus still
   scroll, but routine pages no longer look as though their first links disappeared. */
.nav { padding-top: 12px; }
.nav-item { min-height: 40px; margin-bottom: 2px; padding-top: 8px; padding-bottom: 8px; }
.nav-group-head { min-height: 30px; padding-top: 8px; padding-bottom: 6px; }

@media (max-width: 640px) {
  .auth-shell { justify-content: flex-start; padding: 18px 14px 28px; }
  .auth-card { max-width: 440px; }
}

/* ── Merchant API setup and testing workspace ────────────────────────────────
   Explain the security-sensitive integration without collecting private keys or
   implying that a browser screen provides backend security guarantees. */
.developer-workspace { display: grid; min-width: 0; max-width: 100%; gap: 18px; }
.developer-workspace > * { min-width: 0; max-width: 100%; }
.developer-workspace > .page-head { margin-bottom: 0; }
.developer-page-head .row-actions { justify-content: flex-end; }

.integration-state {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 19px 20px;
  border: 1px solid #c9d8e8;
  border-left: 4px solid var(--blue);
  border-radius: 14px;
  background: linear-gradient(110deg, #f7fbff, #fff 58%);
  box-shadow: var(--shadow-xs);
}
.integration-state-warning {
  border-color: #ead49b;
  border-left-color: #d89415;
  background: linear-gradient(110deg, #fff9e9, #fff 62%);
}
.integration-state-ready {
  border-color: #bfe4da;
  border-left-color: #2da98e;
  background: linear-gradient(110deg, #effbf8, #fff 62%);
}
.integration-state-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #cad9e9;
  border-radius: 12px;
  background: #fff;
  color: var(--blue);
}
.integration-state-icon svg { width: 21px; height: 21px; }
.integration-state h2 { margin-top: 3px; font-size: 18px; }
.integration-state p:not(.kicker) { max-width: 920px; margin: 6px 0 0; color: #52647a; line-height: 1.55; }
.integration-state .integration-state-note { font-size: 11.5px; }

.integration-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}
.integration-fact { min-width: 0; padding: 18px 20px; }
.integration-fact + .integration-fact { border-left: 1px solid var(--ui-line); }
.integration-fact > span { display: block; color: #65758a; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.integration-fact > strong { display: block; overflow: hidden; margin-top: 9px; color: #123967; font-family: var(--font-display); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.integration-fact > small { display: block; margin-top: 7px; color: var(--ui-muted); font-size: 11px; line-height: 1.45; }

.protocol-card, .safety-card, .api-catalogue { margin-top: 0 !important; }
.webhook-settings-card { overflow: hidden; margin-top: 0 !important; }
.webhook-settings-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 22px; margin-top: 18px; }
.webhook-settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.webhook-settings-form .field-span-2 { grid-column: 1 / -1; }
.webhook-settings-form textarea { min-height: 92px; resize: vertical; }
.webhook-event-fieldset { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.webhook-event-fieldset legend { margin-bottom: 8px; color: #344b68; font-size: 12px; font-weight: 800; }
.webhook-event-option { display: flex; gap: 10px; min-width: 0; padding: 13px; border: 1px solid var(--ui-line); border-radius: 13px; background: #f8fbff; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.webhook-event-option:hover { border-color: #9bb9dc; box-shadow: 0 8px 22px rgba(25,65,108,.08); transform: translateY(-1px); }
.webhook-event-option input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); }
.webhook-event-option strong,.webhook-event-option small { display: block; }
.webhook-event-option strong { color: #16385f; font-size: 12px; }
.webhook-event-option small { margin-top: 4px; color: var(--ui-muted); font-size: 10.5px; line-height: 1.45; }
.webhook-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.form-action-note { color: var(--ui-muted); font-size: 11.5px; }
.webhook-current-panel { align-self: start; min-width: 0; padding: 18px; border: 1px solid #d7e2ef; border-radius: 16px; background: linear-gradient(145deg,#f8fbff,#f2f7fc); }
.webhook-current-list { display: grid; gap: 0; margin: 12px 0 0; }
.webhook-current-list > div { display: grid; gap: 4px; padding: 11px 0; border-top: 1px solid #dbe5f0; }
.webhook-current-list dt { color: #65758a; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.webhook-current-list dd { overflow-wrap: anywhere; margin: 0; color: #17395f; font-size: 12px; line-height: 1.5; }
.webhook-sensitive-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid #d4e0ed; }
.webhook-sensitive-actions p { margin: 0 0 12px; color: #5b6e85; font-size: 11px; line-height: 1.5; }
.webhook-secret-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.8fr); gap: 18px; align-items: center; margin-top: 14px; padding: 16px 18px; border: 1px solid #9bd8c9; border-radius: 14px; background: #effbf7; }
.webhook-secret-panel h3 { margin: 3px 0 0; color: #134f48; font-size: 15px; }
.webhook-secret-panel p:not(.kicker) { margin: 5px 0 0; color: #397067; font-size: 11.5px; }
.webhook-secret-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
.webhook-secret-copy code { overflow: hidden; flex: 1; padding: 11px 12px; border: 1px solid #b8ddd5; border-radius: 10px; background: #fff; color: #174b47; text-overflow: ellipsis; white-space: nowrap; }
.protocol-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.protocol-flow li { position: relative; min-width: 0; padding: 0 20px 2px 0; }
.protocol-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  right: 8px;
  left: 44px;
  height: 1px;
  background: linear-gradient(90deg, #9eb8d6, #dce5f0);
}
.protocol-step {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #bfd1e5;
  border-radius: 10px;
  background: #edf5ff;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 0 5px #fff;
}
.protocol-flow li > div { margin-top: 14px; padding-right: 8px; }
.protocol-flow strong { display: block; color: #1b2c44; font-size: 12.5px; line-height: 1.4; }
.protocol-flow p { margin: 6px 0 0; color: #586b83; font-size: 11.5px; line-height: 1.55; }

.safety-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.safety-rule-grid article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 15px;
  border: 1px solid var(--ui-line);
  border-radius: 11px;
  background: #f9fbfd;
}
.safety-rule-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #eaf2fb; color: var(--blue); }
.safety-rule-icon svg { width: 17px; height: 17px; }
.safety-rule-grid h3 { margin-top: 1px; color: #1b2d45; font-family: var(--font-sans); font-size: 12.5px; }
.safety-rule-grid p { margin: 5px 0 0; color: #52647a; font-size: 11.5px; line-height: 1.5; }
.developer-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 17px -22px -22px; padding: 15px 22px; }

.api-contract-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.api-operation-table { min-width: 850px; }
.api-operation-table th:first-child, .api-operation-table td:first-child { width: 54px; text-align: center; }
.api-operation-index { color: #52647a; font-family: var(--font-mono); font-size: 11px; }
.api-operation-path { color: #123f76; font-size: 11.5px; font-weight: 600; }
.http-method { display: inline-flex; min-width: 54px; justify-content: center; padding: 4px 7px; border: 1px solid #cad8e7; border-radius: 6px; background: #f2f6fb; color: #31465f; font-family: var(--font-mono); font-size: 10px; font-weight: 800; }
.http-method-post { border-color: #bde3d9; background: #ecf9f5; color: #166a59; }
.http-method-patch { border-color: #ead8a7; background: #fff8e7; color: #8b5b07; }
.api-send-gate { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 14px; padding: 13px 15px; border: 1px solid #d8e2ed; border-radius: 10px; background: #f7f9fc; color: #566980; }
.api-send-gate > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #e8f0fa; color: var(--blue); }
.api-send-gate svg { width: 15px; height: 15px; }
.api-send-gate p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.5; }
.api-send-gate strong { color: #233950; }

/* Keep the legacy numbered flow correct wherever it is reused. */
.numbered-flow li span { grid-column: 2; }

@media (max-width: 1180px) {
  .integration-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integration-fact:nth-child(3) { border-left: 0; border-top: 1px solid var(--ui-line); }
  .integration-fact:nth-child(4) { border-top: 1px solid var(--ui-line); }
  .protocol-flow { grid-template-columns: 1fr; gap: 0; }
  .protocol-flow li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 0 0 18px; }
  .protocol-flow li:not(:last-child)::after { top: 34px; right: auto; bottom: 0; left: 17px; width: 1px; height: auto; background: linear-gradient(#9eb8d6, #dce5f0); }
  .protocol-flow li > div { margin-top: 1px; padding-right: 0; }
}

@media (max-width: 720px) {
  .developer-page-head,
  .developer-page-head > div,
  .developer-page-head .eyebrow-row,
  .developer-page-head .row-actions { width: 100%; min-width: 0; max-width: 100%; }
  .developer-page-head .row-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .developer-page-head .btn { width: 100%; min-width: 0; max-width: 100%; white-space: normal; }
  .developer-page-head h1,
  .developer-page-head .asof,
  .developer-page-head .eyebrow { overflow-wrap: anywhere; }
  .integration-state { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; }
  .integration-state-icon { width: 38px; height: 38px; }
  .integration-state > .badge { grid-column: 2; justify-self: start; }
  .integration-facts { grid-template-columns: 1fr; }
  .integration-fact + .integration-fact { border-top: 1px solid var(--ui-line); border-left: 0; }
  .safety-rule-grid { grid-template-columns: 1fr; }
  .developer-links { margin: 16px -17px -17px; padding: 14px 17px; }
  .developer-links .btn { flex: 1 1 180px; }
  .api-contract-badges { justify-content: flex-start; }
}

/* ── Operations dashboard visual system ─────────────────────────────────────
   Scoped to the dashboard so this review slice can be approved before the same
   visual language is applied to other page archetypes. All figures remain backed
   by the existing filtered API response; decorative comparisons are not invented. */
.mos-dashboard {
  --dash-ink: #102d49;
  --dash-muted: #536b83;
  --dash-border: #d9e4ed;
  --dash-soft: #f6f9fc;
  --dash-navy: #0a3558;
  --dash-navy-deep: #082b49;
  --dash-coral: #ef552f;
  --dash-teal: #0b9d84;
  --dash-blue: #2d6f9d;
  --dash-shadow: 0 10px 32px rgb(14 49 76 / .07);
  --dash-shadow-hover: 0 22px 48px rgb(14 49 76 / .13);
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  gap: 20px;
  padding-bottom: 12px;
}
.mos-dashboard::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70px;
  right: 0;
  width: min(48vw, 620px);
  height: 430px;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 22%, rgb(239 85 47 / .085), transparent 37%),
    radial-gradient(circle at 30% 46%, rgb(38 122 164 / .065), transparent 42%);
  filter: blur(3px);
}

.dashboard-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  min-width: 0;
  padding: 9px 3px 22px;
  animation: dash-rise 520ms cubic-bezier(.22, 1, .36, 1) both;
}
.dashboard-hero-copy { min-width: 0; }
.dashboard-live-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c74425;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dashboard-live-label > span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dash-coral);
  box-shadow: 0 0 0 5px rgb(239 85 47 / .12);
  animation: dash-live-pulse 2.4s ease-in-out infinite;
}
.dashboard-hero h1 {
  margin: 12px 0 0;
  color: var(--dash-ink);
  font-size: clamp(31px, 3vw, 43px);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1.06;
}
.dashboard-hero-copy > p {
  margin: 9px 0 0;
  color: var(--dash-muted);
  font-size: 14px;
}
.dashboard-freshness {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: #5a6f86;
  font-size: 10.5px;
  font-weight: 650;
}
.dashboard-freshness > span { width: 6px; height: 6px; border-radius: 50%; background: #16a98e; }
.dashboard-freshness.is-stale { color: #8a5a08; }
.dashboard-freshness.is-stale > span { background: #d18b14; }
.dashboard-hero-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.dashboard-hero-actions .btn { min-height: 44px; padding-inline: 17px; border-radius: 11px; }
.dashboard-hero-actions svg { width: 16px; height: 16px; }
.dashboard-hero-actions .btn {
  box-shadow: 0 5px 16px rgb(18 49 78 / .055);
  transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}
.dashboard-hero-actions .btn:hover { transform: translateY(-2px); box-shadow: 0 11px 24px rgb(18 49 78 / .11); }
.dashboard-hero-actions .btn:active { transform: translateY(0) scale(.985); }

.dashboard-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.dashboard-metric {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 174px;
  flex-direction: column;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--dash-border);
  border-radius: 19px;
  background: rgb(255 255 255 / .96);
  color: var(--dash-ink);
  box-shadow: var(--dash-shadow);
  text-decoration: none;
  transform-origin: 50% 100%;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), border-color 180ms ease, box-shadow 220ms ease, background-color 180ms ease;
  animation: dash-card-enter 560ms cubic-bezier(.22, 1, .36, 1) both;
}
.dashboard-metric:nth-child(2) { animation-delay: 70ms; }
.dashboard-metric:nth-child(3) { animation-delay: 140ms; }
.dashboard-metric:nth-child(4) { animation-delay: 210ms; }
.dashboard-metric::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 15%, rgb(255 255 255 / .72) 45%, transparent 72%);
  transform: translateX(-115%);
  transition: transform 560ms ease, opacity 220ms ease;
}
.dashboard-metric:hover {
  z-index: 2;
  transform: translateY(-6px);
  border-color: #b8ccdc;
  box-shadow: var(--dash-shadow-hover);
}
.dashboard-metric:hover::before { opacity: .42; transform: translateX(115%); }
.dashboard-metric:active { transform: translateY(-1px); }
.dashboard-metric:focus-visible { outline: 3px solid rgb(239 85 47 / .22); outline-offset: 3px; }
.dashboard-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dashboard-metric-top > span:first-child {
  color: #63768b;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .105em;
  text-transform: uppercase;
}
.dashboard-metric-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border-radius: 12px;
  background: #edf4f8;
  color: #164c73;
  box-shadow: inset 0 0 0 1px rgb(34 91 124 / .04);
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), box-shadow 220ms ease;
}
.dashboard-metric-icon svg { width: 18px; height: 18px; }
.dashboard-metric:hover .dashboard-metric-icon { transform: translateY(-2px) rotate(-4deg) scale(1.07); box-shadow: 0 8px 18px rgb(23 73 107 / .12); }
.dashboard-metric-icon-amber { color: #915b07; background: #fff5d9; }
.dashboard-metric-icon-coral { color: #af4029; background: #fff0ec; }
.dashboard-metric-icon-blue { color: #245b8d; background: #edf3fa; }
.dashboard-metric > strong {
  display: block;
  margin-top: 15px;
  color: var(--dash-ink);
  font-family: var(--font-display);
  font-size: clamp(27px, 2.15vw, 34px);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.dashboard-metric-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  color: #5d7188;
  font-size: 10.5px;
  line-height: 1.4;
}
.dashboard-metric-foot > span:last-child { color: #244e74; font-weight: 720; text-align: right; }
.dashboard-metric-foot svg { width: 13px; height: 13px; vertical-align: -2px; }
.dashboard-metric-featured {
  border-color: transparent;
  color: #fff;
  background-color: var(--dash-navy);
  background-image:
    radial-gradient(circle at 100% 0%, rgb(82 151 190 / .40), transparent 11rem),
    linear-gradient(138deg, var(--dash-navy), var(--dash-navy-deep));
  box-shadow: 0 14px 34px rgb(8 43 73 / .18);
}
.dashboard-metric-featured::before { background: linear-gradient(115deg, transparent 20%, rgb(255 255 255 / .22) 48%, transparent 72%); }
.dashboard-metric-featured::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -56px;
  width: 148px;
  height: 148px;
  border: 22px solid rgb(255 255 255 / .045);
  border-radius: 50%;
}
.dashboard-metric-featured:hover { border-color: transparent; box-shadow: 0 20px 38px rgb(8 43 73 / .25); }
.dashboard-metric-featured .dashboard-metric-top > span:first-child,
.dashboard-metric-featured .dashboard-metric-foot { color: rgb(255 255 255 / .78); }
.dashboard-metric-featured > strong,
.dashboard-metric-featured .dashboard-metric-foot > span:last-child { color: #fff; }
.dashboard-metric-featured .dashboard-metric-icon { color: #fff; background: rgb(255 255 255 / .12); }

.dashboard-metric-progress {
  width: 100%;
  height: 5px;
  margin: 13px 0 2px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: #e9eff4;
  transform-origin: left center;
  animation: dash-progress-reveal 700ms 260ms cubic-bezier(.22, 1, .36, 1) both;
}
.dashboard-metric-progress::-webkit-progress-bar { border-radius: inherit; background: #e9eff4; }
.dashboard-metric-progress::-webkit-progress-value { border-radius: inherit; background: var(--progress-color, var(--dash-teal)); }
.dashboard-metric-progress::-moz-progress-bar { border-radius: inherit; background: var(--progress-color, var(--dash-teal)); }
.dashboard-metric-progress.is-teal { --progress-color: #0b9d84; }
.dashboard-metric-progress.is-blue { --progress-color: #2d6f9d; }
.dashboard-metric-progress.is-amber { --progress-color: #d99a18; }
.dashboard-metric-featured .dashboard-metric-progress { background: rgb(255 255 255 / .14); }
.dashboard-metric-featured .dashboard-metric-progress::-webkit-progress-bar { background: rgb(255 255 255 / .14); }
.dashboard-metric-featured .dashboard-metric-progress::-webkit-progress-value { background: #69dcc5; }
.dashboard-metric-featured .dashboard-metric-progress::-moz-progress-bar { background: #69dcc5; }

.dashboard-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--dash-border);
  border-radius: 19px;
  background: rgb(255 255 255 / .96);
  box-shadow: var(--dash-shadow);
  transition: border-color 200ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
  animation: dash-panel-enter 560ms 150ms cubic-bezier(.22, 1, .36, 1) both;
}
.dashboard-panel:hover { border-color: #c9d9e5; box-shadow: 0 17px 38px rgb(14 49 76 / .095); transform: translateY(-2px); }
.dashboard-transactions:hover { transform: none; }
.dashboard-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
}
.dashboard-panel-head h2, .dashboard-quick-actions h2 { margin: 3px 0 0; color: var(--dash-ink); font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.dashboard-panel-head p:not(.dashboard-kicker), .dashboard-quick-actions p:not(.dashboard-kicker) { margin: 5px 0 0; color: var(--dash-muted); font-size: 11.5px; line-height: 1.5; }
.dashboard-kicker { margin: 0; color: #9a412b; font-size: 9.5px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.dashboard-panel-total { flex: none; padding: 6px 10px; border: 1px solid #d9e4ee; border-radius: 999px; background: #f6f9fc; color: #536980; font-size: 10px; font-weight: 750; }
.dashboard-icon-link, .dashboard-row-link {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  border: 1px solid var(--dash-border);
  border-radius: 11px;
  color: #315b7d;
  background: #fff;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 190ms cubic-bezier(.22, 1, .36, 1), box-shadow 190ms ease;
}
.dashboard-icon-link:hover, .dashboard-row-link:hover { border-color: #b8ccdc; color: #0f537f; background: #f1f6fa; transform: translateX(3px); box-shadow: 0 7px 16px rgb(18 54 81 / .10); }
.dashboard-icon-link svg, .dashboard-row-link svg { width: 16px; height: 16px; }

.dashboard-unknown {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid #e8cd89;
  border-radius: 14px;
  background: linear-gradient(110deg, #fff9e9, #fff 72%);
}
.dashboard-unknown-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: #fff1c9; color: #935c05; }
.dashboard-unknown-icon svg { width: 18px; height: 18px; }
.dashboard-unknown strong { color: #563b12; font-size: 12.5px; }
.dashboard-unknown p { margin: 3px 0 0; color: #6f5a36; font-size: 11.5px; }

.mos-dashboard .dashboard-scope { margin: 0; border-radius: 14px; box-shadow: 0 4px 14px rgb(14 49 76 / .035); }
.dashboard-insight-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(320px, .8fr); gap: 18px; }
.outcome-summary { display: grid; gap: 15px; padding: 3px 24px 23px; }
.outcome-row {
  display: grid;
  grid-template-columns: minmax(190px, .9fr) minmax(180px, 1.5fr) 42px;
  gap: 18px;
  align-items: center;
  color: var(--dash-ink);
  text-decoration: none;
}
.outcome-label { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 2px 9px; align-items: center; }
.outcome-label strong { font-size: 11.5px; }
.outcome-label small { grid-column: 2; color: #536b83; font-size: 10px; font-variant-numeric: tabular-nums; }
.outcome-dot { width: 7px; height: 7px; border-radius: 50%; }
.outcome-progress {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: #edf2f6;
  transform-origin: left center;
  animation: dash-progress-reveal 720ms 300ms cubic-bezier(.22, 1, .36, 1) both;
}
.outcome-progress::-webkit-progress-bar { border-radius: inherit; background: #edf2f6; box-shadow: inset 0 1px 2px rgb(17 52 80 / .05); }
.outcome-progress::-webkit-progress-value { border-radius: inherit; background: var(--outcome-color); }
.outcome-progress::-moz-progress-bar { border-radius: inherit; background: var(--outcome-color); }
.outcome-dot.outcome-success { background: #0c9f86; }
.outcome-dot.outcome-pending { background: #e5a827; }
.outcome-dot.outcome-rejected { background: #e25940; }
.outcome-dot.outcome-unknown { background: #7855b3; }
.outcome-progress.outcome-success { --outcome-color: #0c9f86; }
.outcome-progress.outcome-pending { --outcome-color: #e5a827; }
.outcome-progress.outcome-rejected { --outcome-color: #e25940; }
.outcome-progress.outcome-unknown { --outcome-color: #7855b3; }
.outcome-value { color: #24435f; font-family: var(--font-mono); font-size: 11px; font-weight: 750; text-align: right; }
.outcome-row { padding: 7px 8px; margin: -7px -8px; border-radius: 10px; transition: background 160ms ease, transform 180ms ease; }
.outcome-row:hover { background: #f7fafc; transform: translateX(3px); }
.outcome-row:hover .outcome-label strong { color: #0d5a8b; }
.dashboard-zero-note { margin: -4px 24px 22px; padding: 11px 13px; border-radius: 9px; background: #f6f9fc; color: #536b83; font-size: 10.5px; }

.onboarding-visual { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 20px; align-items: center; padding: 7px 24px 20px; }
.onboarding-donut {
  position: relative;
  display: grid;
  width: 132px;
  height: 132px;
  place-items: center;
  border-radius: 50%;
  filter: drop-shadow(0 9px 17px rgb(16 61 91 / .08));
  animation: dash-donut-enter 720ms 280ms cubic-bezier(.22, 1, .36, 1) both;
}
.onboarding-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.onboarding-donut circle { fill: none; stroke-width: 5.5; }
.donut-base { stroke: #e8eef3; }
.donut-segment { stroke-linecap: butt; }
.donut-active { stroke: #0b9d84; }
.donut-onboarded { stroke: #2d6f9d; }
.donut-progress { stroke: #efb33e; }
.donut-other { stroke: #cbd6e0; }
.onboarding-donut.is-empty .donut-segment { display: none; }
.onboarding-donut > span { position: relative; z-index: 1; text-align: center; }
.onboarding-donut strong { display: block; color: var(--dash-ink); font-family: var(--font-display); font-size: 26px; font-variant-numeric: tabular-nums; }
.onboarding-donut small { color: #536b83; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.onboarding-legend { display: grid; gap: 10px; margin: 0; }
.onboarding-legend > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onboarding-legend dt { display: flex; align-items: center; gap: 8px; color: #536b83; font-size: 10.5px; }
.onboarding-legend dt i { width: 7px; height: 7px; border-radius: 50%; }
.onboarding-legend dd { margin: 0; color: var(--dash-ink); font-family: var(--font-mono); font-size: 11px; font-weight: 750; }
.legend-active { background: #0b9d84; }.legend-onboarded { background: #2d6f9d; }.legend-progress { background: #efb33e; }.legend-other { background: #cbd6e0; }
.onboarding-attention { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; align-items: center; margin: 0 24px 22px; padding: 13px; border: 1px solid transparent; border-radius: 12px; background: #f4f7fa; color: var(--dash-ink); text-decoration: none; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.onboarding-attention > svg { width: 15px; height: 15px; color: #45637e; }
.onboarding-attention strong, .onboarding-attention small { display: block; }
.onboarding-attention strong { font-size: 11.5px; }.onboarding-attention small { margin-top: 2px; color: #536b83; font-size: 10.5px; }
.onboarding-attention:hover { border-color: #d7e3ec; background: #eef4f8; transform: translateY(-2px); box-shadow: 0 10px 22px rgb(14 49 76 / .08); }
.onboarding-attention:hover > svg { transform: translateX(3px); }

.dashboard-transactions { min-width: 0; overflow-x: clip; overflow-y: visible; }
.dashboard-table-head { align-items: center; border-bottom: 1px solid #e2e9f0; }
.dashboard-table-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.dashboard-search, .dashboard-status-filter {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--dash-border);
  border-radius: 11px;
  background: #f8fafc;
  color: #536b83;
}
.dashboard-search { width: 220px; padding: 0 11px; }
.dashboard-search svg, .dashboard-status-filter > svg { width: 16px; height: 16px; flex: none; }
.dashboard-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--dash-ink); font-size: 11.5px; }
.dashboard-status-filter { min-width: 138px; padding-left: 10px; }
.dashboard-status-filter select { min-width: 105px; min-height: 30px; border: 0; background: transparent; color: #304b65; font-size: 11.5px; font-weight: 650; }
.dashboard-table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; border: 0; border-radius: 0; box-shadow: none; }
.dashboard-table-wrap table { min-width: 940px; }
.dashboard-table-wrap th { padding: 12px 17px; background: #f5f8fa; color: #52667a; font-size: 9.5px; letter-spacing: .09em; }
.dashboard-table-wrap td { padding: 14px 17px; }
.dashboard-table-wrap tbody tr { transition: background-color 150ms ease, box-shadow 150ms ease; }
.dashboard-table-wrap tbody tr:hover { background: #f7fafc; box-shadow: inset 3px 0 0 var(--dash-coral); }
.dashboard-merchant-cell { display: flex; align-items: center; gap: 11px; min-width: 150px; }
.dashboard-merchant-cell > span { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 11px; background: #fff0e8; color: #894624; font-size: 10px; font-weight: 850; }
.dashboard-merchant-cell strong, .dashboard-merchant-cell small { display: block; }
.dashboard-merchant-cell strong { color: #1b344d; font-size: 11.5px; }.dashboard-merchant-cell small { margin-top: 2px; color: #53687c; font-size: 9.5px; }
.dashboard-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px; border-top: 1px solid #e3eaf1; color: #536b83; font-size: 10.5px; }

.dashboard-operations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dashboard-money-position, .dashboard-queue-panel { padding-bottom: 22px; }
.money-total { padding: 3px 24px 17px; }
.money-total strong { display: block; color: var(--dash-ink); font-family: var(--font-display); font-size: 31px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.money-total span { color: #536b83; font-size: 10.5px; }
.money-breakdown { margin: 0 24px 18px; border-top: 1px solid #e3eaf1; }
.money-breakdown > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid #e7edf3; }
.money-breakdown dt { color: #60748a; font-size: 11px; }.money-breakdown dd { margin: 0; color: #183b5b; font-size: 11.5px; font-variant-numeric: tabular-nums; font-weight: 750; }
.dashboard-money-position > .link-action { margin-left: 24px; }
.queue-list { display: grid; gap: 7px; padding: 2px 22px 0; }
.queue-list > a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px 11px; border: 1px solid transparent; border-radius: 11px; color: var(--dash-ink); text-decoration: none; transition: background 170ms ease, border-color 170ms ease, transform 190ms cubic-bezier(.22, 1, .36, 1), box-shadow 190ms ease; }
.queue-list > a:hover { border-color: #dce6ee; background: #f7f9fb; transform: translateX(4px); box-shadow: 0 7px 16px rgb(18 54 81 / .055); }
.queue-list > a > span { transition: transform 190ms ease, background 190ms ease; }
.queue-list > a:hover > span { transform: scale(1.07) rotate(-3deg); background: #e5f0f6; }
.queue-list > a > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: #edf4f8; color: #245777; }.queue-list svg { width: 16px; height: 16px; }
.queue-list strong, .queue-list small { display: block; }.queue-list strong { font-size: 11.5px; }.queue-list small { margin-top: 2px; color: #536b83; font-size: 10px; }
.queue-list b { min-width: 30px; color: #153b5e; font-family: var(--font-mono); font-size: 12px; text-align: right; }.queue-list b.is-danger { color: #b53f29; }

.dashboard-quick-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 22px; }

@keyframes dash-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dash-card-enter {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dash-panel-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dash-progress-reveal {
  from { opacity: .2; transform: scaleX(.08); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes dash-donut-enter {
  from { opacity: 0; transform: rotate(-14deg) scale(.82); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes dash-live-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgb(239 85 47 / .10); }
  50% { box-shadow: 0 0 0 8px rgb(239 85 47 / 0); }
}

@media (max-width: 1320px) {
  .dashboard-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-insight-grid { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr); }
  .dashboard-table-head { align-items: flex-start; flex-direction: column; }
  .dashboard-table-tools { width: 100%; justify-content: flex-start; }
  .dashboard-search { flex: 1 1 220px; width: auto; }
}

@media (max-width: 980px) {
  .webhook-settings-layout { grid-template-columns: 1fr; }
  .webhook-event-fieldset { grid-template-columns: 1fr; }
  .webhook-secret-panel { grid-template-columns: 1fr; }
  .dashboard-insight-grid, .dashboard-operations-grid { grid-template-columns: 1fr; }
  .dashboard-hero { align-items: flex-start; flex-direction: column; }
  .dashboard-hero-actions { justify-content: flex-start; }
}

@media (max-width: 680px) {
  .mos-dashboard { gap: 14px; }
  .dashboard-hero { padding-bottom: 11px; }
  .dashboard-hero h1 { font-size: 30px; }
  .dashboard-hero-actions, .dashboard-hero-actions .btn { width: 100%; }
  .dashboard-hero-actions .btn { justify-content: center; }
  .dashboard-metric-grid { grid-template-columns: 1fr; gap: 12px; }
  .dashboard-metric { min-height: 156px; padding: 19px; border-radius: 16px; }
  .dashboard-panel { border-radius: 16px; }
  .dashboard-panel-head { padding: 18px 17px 15px; }
  .dashboard-panel-total { display: none; }
  .outcome-summary { padding: 2px 17px 19px; }
  .outcome-row { grid-template-columns: minmax(130px, 1fr) 72px 32px; gap: 10px; }
  .outcome-label small { display: none; }
  .onboarding-visual { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 4px 17px 17px; }
  .onboarding-donut { width: 104px; height: 104px; }
  .onboarding-attention { margin: 0 17px 17px; }
  .dashboard-table-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .dashboard-search { grid-column: 1 / -1; width: 100%; }
  .dashboard-status-filter { min-width: 0; }
  .dashboard-panel-foot { align-items: flex-start; flex-direction: column; }
  .dashboard-operations-grid { gap: 14px; }
  .dashboard-unknown { grid-template-columns: 40px minmax(0, 1fr); }
  .dashboard-unknown .btn { grid-column: 1 / -1; width: 100%; }
  .dashboard-quick-actions { align-items: flex-start; flex-direction: column; }
  .dashboard-quick-actions .row-actions, .dashboard-quick-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-hero,
  .dashboard-live-label > span,
  .dashboard-metric,
  .dashboard-panel,
  .dashboard-metric-progress,
  .outcome-progress,
  .onboarding-donut { animation: none; }
  .dashboard-metric,
  .dashboard-metric::before,
  .dashboard-metric-icon,
  .dashboard-icon-link,
  .dashboard-row-link,
  .onboarding-attention,
  .queue-list > a,
  .queue-list > a > span { transition: none; }
  .dashboard-metric:hover,
  .dashboard-panel:hover,
  .dashboard-icon-link:hover,
  .dashboard-row-link:hover,
  .onboarding-attention:hover,
  .queue-list > a:hover,
  .queue-list > a:hover > span { transform: none; }
}

/* ── Shared premium refinement across authenticated workspaces ───────────────
   Page-type-aware polish for lists, forms, details and operational monitors.
   Motion is short, bounded and disabled below for users who request it. */
body.app-page {
  background:
    radial-gradient(circle at 92% 2%, rgb(239 85 47 / .045), transparent 27rem),
    radial-gradient(circle at 42% 18%, rgb(48 126 169 / .035), transparent 34rem),
    var(--page);
}

.main { position: relative; isolation: isolate; }
.app-page:not(.page-kind-dashboard) .content {
  position: relative;
  isolation: isolate;
}
.app-page:not(.page-kind-dashboard) .content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -76px;
  right: 0;
  width: min(46vw, 620px);
  height: 390px;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 20%, rgb(239 85 47 / .065), transparent 38%),
    radial-gradient(circle at 28% 48%, rgb(35 112 158 / .055), transparent 45%);
}

/* The shell stays calm while gaining the tactile feedback of the approved dashboard. */
.brand-badge {
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), box-shadow 220ms ease;
}
.brand:hover .brand-badge {
  transform: translateY(-2px) rotate(-3deg) scale(1.035);
  box-shadow: 0 14px 30px rgb(0 0 0 / .25), inset 0 1px 0 rgb(255 255 255 / .24);
}
.sidebar-toggle,
.mobile-nav-toggle {
  transition: color 170ms ease, background 170ms ease, transform 190ms cubic-bezier(.22, 1, .36, 1), box-shadow 190ms ease;
}
.sidebar-toggle:hover,
.mobile-nav-toggle:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgb(4 27 53 / .13); }
.nav-item { overflow: hidden; }
.nav-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, transparent 15%, rgb(255 255 255 / .08), transparent 72%);
  transform: translateX(-105%);
  transition: transform 430ms ease, opacity 180ms ease;
}
.nav-item:hover::after { opacity: 1; transform: translateX(105%); }
.nav-group-head svg { transition: transform 180ms ease; }
.nav-group[open] > .nav-group-head svg { transform: rotate(180deg); }
.nav-group[open] > .nav-group-items { animation: workspace-disclose 200ms ease-out both; }

.topbar { transition: box-shadow 180ms ease, background-color 180ms ease; }
.topbar-right { gap: 12px; }
.who-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  border: 1px solid #d7e5ed;
  border-radius: 12px;
  background: linear-gradient(145deg, #e8f5f7, #dff0f5);
  color: #15516d;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 5px 14px rgb(19 61 88 / .06);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  transition: transform 190ms cubic-bezier(.22, 1, .36, 1), box-shadow 190ms ease;
}
.who-avatar:hover { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 10px 21px rgb(19 61 88 / .12); }
.status-pill .pulse-dot { animation: workspace-session-pulse 2.8s ease-in-out infinite; }

/* Strong page hierarchy without turning utility pages into dashboards. */
.app-page:not(.page-kind-dashboard) .page-head {
  position: relative;
  animation: workspace-head-enter 480ms cubic-bezier(.22, 1, .36, 1) both;
}
.app-page:not(.page-kind-dashboard) .page-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(18 63 118 / .22), rgb(241 91 54 / .17) 42%, transparent 82%);
}
.page-head h1 { text-wrap: balance; }
.page-head .row-actions,
.page-head > form,
.page-toolbar { position: relative; z-index: 1; }
.eyebrow-row .pulse-dot { animation: workspace-eyebrow-pulse 2.5s ease-in-out infinite; }

/* Shared surfaces receive depth on entry; interaction stays on interactive content. */
.app-page:not(.page-kind-dashboard) .content > :not(.page-head) {
  animation: workspace-surface-enter 500ms 70ms cubic-bezier(.22, 1, .36, 1) both;
}
.app-page:not(.page-kind-dashboard) .content > :nth-child(3) { animation-delay: 120ms; }
.app-page:not(.page-kind-dashboard) .content > :nth-child(4) { animation-delay: 170ms; }
.app-page:not(.page-kind-dashboard) .content > :nth-child(n+5) { animation-delay: 210ms; }
.card {
  background: linear-gradient(180deg, #fff 0%, #fff 72%, #fcfdff 100%);
  box-shadow: 0 8px 28px rgb(14 45 75 / .055), 0 1px 2px rgb(14 45 75 / .035);
  transition: border-color 190ms ease, box-shadow 210ms ease;
}
.card:hover { border-color: #cad8e5; box-shadow: 0 13px 34px rgb(14 45 75 / .075), 0 1px 2px rgb(14 45 75 / .04); }
.card:focus-within { border-color: #bdd0e0; box-shadow: 0 15px 38px rgb(14 45 75 / .085), 0 0 0 3px rgb(42 98 155 / .055); }
.card-head h2,
.card-title { text-wrap: balance; }
.card-head > .badge,
.card-head > .dashboard-metric-icon { flex: none; }

/* KPI cards are reserved for pages that already model a real summary metric. */
.card.stat {
  overflow: hidden;
  transform-origin: 50% 100%;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), border-color 180ms ease, box-shadow 220ms ease;
}
.card.stat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(112deg, transparent 20%, rgb(255 255 255 / .78) 47%, transparent 72%);
  transform: translateX(-115%);
  transition: transform 540ms ease, opacity 200ms ease;
}
.card.stat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(14 45 75 / .11); }
.card.stat:hover::before { opacity: .38; transform: translateX(115%); }
.stat-chip { transition: transform 200ms cubic-bezier(.22, 1, .36, 1), box-shadow 200ms ease; }
.card.stat:hover .stat-chip { transform: translateY(-2px) rotate(-4deg) scale(1.06); box-shadow: 0 8px 18px rgb(24 70 104 / .10); }

/* Controls use the same lift and icon movement as the dashboard actions. */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 20%, rgb(255 255 255 / .28), transparent 72%);
  transform: translateX(-115%);
  transition: transform 430ms ease, opacity 180ms ease;
}
.btn:hover:not(:disabled)::after { opacity: 1; transform: translateX(115%); }
.btn svg { transition: transform 180ms cubic-bezier(.22, 1, .36, 1); }
.btn:hover:not(:disabled) svg { transform: translateY(-1px) scale(1.06); }
.link-action svg { transition: transform 170ms ease; }
.link-action:hover svg { transform: translateX(3px); }
.row-actions { gap: 9px; }

/* Forms stay compact and gain clearer grouping and state transitions. */
.field { min-width: 0; }
.field label { transition: color 150ms ease; }
.field:focus-within > label { color: #174f86; }
:where(input, select, textarea)::placeholder { color: #8a99aa; opacity: 1; }
:where(input, select, textarea):disabled {
  cursor: not-allowed;
  border-color: #e0e7ef;
  background: #f3f6f9;
  color: #718196;
}
.filter-panel,
.page-kind-form .content > .card:first-of-type {
  background: linear-gradient(145deg, #fff, #fbfdff 76%);
}
.filter-row .field-actions,
.filter-grid .field-actions { align-self: end; }
.mos-select-trigger { transition: border-color 170ms ease, box-shadow 170ms ease, background 170ms ease, transform 170ms ease; }
.mos-select-trigger:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgb(18 55 84 / .055); }
.mos-select-panel { animation: workspace-popover-enter 170ms cubic-bezier(.22, 1, .36, 1) both; }
.mos-select-option { transition: color 130ms ease, background 130ms ease, transform 130ms ease; }
.mos-select-option:hover { transform: translateX(2px); }

/* Data and operations surfaces favor scanning over decoration. */
.table-wrap {
  background: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .85), 0 6px 19px rgb(16 48 78 / .035);
}
thead tr { background: linear-gradient(180deg, #f6f9fc, #f1f6fa); }
tbody tr { position: relative; }
tbody tr:hover { background: #f5f9fd; box-shadow: inset 3px 0 0 #6c9fc5; }
tbody tr:focus-within { background: #f3f8fd; box-shadow: inset 3px 0 0 var(--orange); }
tbody .btn,
tbody .link-action { white-space: nowrap; }
.badge { transition: transform 150ms ease, box-shadow 150ms ease; }
tbody tr:hover .badge { transform: translateY(-1px); box-shadow: 0 4px 10px rgb(19 55 83 / .07); }
.empty,
.empty-state {
  position: relative;
  overflow: hidden;
  border: 1px dashed #d8e3ed;
  background:
    radial-gradient(circle at 50% 18%, rgb(53 126 169 / .055), transparent 9rem),
    linear-gradient(180deg, #fbfdff, #f8fbfd);
}
.empty svg,
.empty-state svg { filter: drop-shadow(0 5px 9px rgb(37 84 118 / .10)); }

/* Reusable operational lists, disclosures and evidence timelines. */
.request-list > li,
.propose > summary,
.timeline > li,
.truth-list > div,
.kv > div {
  transition: background-color 160ms ease, border-color 160ms ease, transform 170ms ease;
}
.request-list > li:hover { background: #f8fbfd; }
.propose > summary:hover { background: #f3f7fb; }
.truth-list > div:hover,
.kv > div:hover { background: #f8fbfd; }
.timeline > li:hover { transform: translateX(2px); }
.timeline-mark,
.tl-dot { transition: transform 170ms ease, box-shadow 170ms ease; }
.timeline > li:hover .timeline-mark,
.timeline > li:hover .tl-dot { transform: scale(1.08); }
.slab,
.integration-fact,
.compare-box {
  border-color: #d9e4ee;
  background: linear-gradient(145deg, #fff, #f8fbfd);
  box-shadow: 0 4px 15px rgb(14 45 75 / .035);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 190ms ease;
}
.slab:hover,
.integration-fact:hover,
.compare-box:hover { border-color: #c7d8e5; box-shadow: 0 10px 24px rgb(14 45 75 / .075); transform: translateY(-2px); }

/* Authentication motion is focused and stops after entry. */
.auth-card { animation: workspace-auth-enter 560ms cubic-bezier(.22, 1, .36, 1) both; }
.auth-brand .brand-badge { animation: workspace-brand-enter 620ms 120ms cubic-bezier(.22, 1, .36, 1) both; }
.auth-card .field { animation: workspace-auth-field 420ms cubic-bezier(.22, 1, .36, 1) both; }
.auth-card .field:nth-of-type(2) { animation-delay: 70ms; }
.auth-card .field:nth-of-type(3) { animation-delay: 120ms; }

@keyframes workspace-head-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes workspace-surface-enter {
  from { opacity: 0; transform: translateY(14px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes workspace-disclose {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes workspace-popover-enter {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes workspace-session-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgb(31 183 154 / .10); }
  50% { box-shadow: 0 0 0 7px rgb(31 183 154 / 0); }
}
@keyframes workspace-eyebrow-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgb(241 91 54 / .10); }
  50% { box-shadow: 0 0 0 8px rgb(241 91 54 / 0); }
}
@keyframes workspace-auth-enter {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes workspace-brand-enter {
  from { opacity: 0; transform: rotate(-8deg) scale(.85); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes workspace-auth-field {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
  .who-avatar { width: 36px; height: 36px; border-radius: 10px; }
  .app-page:not(.page-kind-dashboard) .content::before { height: 300px; }
}

@media (max-width: 640px) {
  .topbar-right .who-avatar { display: none; }
  .app-page:not(.page-kind-dashboard) .content::before { display: none; }
  .card:hover,
  .card:focus-within { box-shadow: var(--shadow-xs); }
  .card.stat:hover,
  .slab:hover,
  .integration-fact:hover,
  .compare-box:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app-page:not(.page-kind-dashboard) .page-head,
  .app-page:not(.page-kind-dashboard) .content > :not(.page-head),
  .nav-group[open] > .nav-group-items,
  .status-pill .pulse-dot,
  .eyebrow-row .pulse-dot,
  .mos-select-panel,
  .auth-card,
  .auth-brand .brand-badge,
  .auth-card .field { animation: none; }
  .brand-badge,
  .sidebar-toggle,
  .mobile-nav-toggle,
  .nav-item::after,
  .nav-group-head svg,
  .who-avatar,
  .card,
  .card.stat,
  .card.stat::before,
  .stat-chip,
  .btn::after,
  .btn svg,
  .link-action svg,
  .field label,
  .mos-select-trigger,
  .mos-select-option,
  tbody tr,
  .badge,
  .request-list > li,
  .propose > summary,
  .timeline > li,
  .timeline-mark,
  .tl-dot,
  .slab,
  .integration-fact,
  .compare-box { transition: none; }
  .brand:hover .brand-badge,
  .sidebar-toggle:hover,
  .mobile-nav-toggle:hover,
  .who-avatar:hover,
  .card.stat:hover,
  .card.stat:hover .stat-chip,
  .mos-select-trigger:hover,
  .mos-select-option:hover,
  .timeline > li:hover,
  .timeline > li:hover .timeline-mark,
  .timeline > li:hover .tl-dot,
  .slab:hover,
  .integration-fact:hover,
  .compare-box:hover { transform: none; }
}
/* Merchant API one-page test console -------------------------------------- */
.merchant-api-console { overflow: clip; padding: 0 !important; border-color: #c9d9eb !important; background: linear-gradient(145deg,#fff 0%,#fbfdff 72%,#f1f7fd 100%) !important; box-shadow: 0 24px 64px rgba(21,54,91,.10) !important; }
.api-console-hero { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:30px 32px 24px; border-bottom:1px solid #dbe5f0; background:radial-gradient(circle at 92% 12%,rgba(255,90,54,.11),transparent 30%),linear-gradient(120deg,rgba(8,56,99,.035),transparent 52%); }
.api-console-hero h2 { margin:6px 0 8px; font-size:clamp(24px,2.3vw,34px); letter-spacing:-.035em; }
.api-console-hero p { max-width:850px; margin:0; color:#566d88; line-height:1.65; }
.api-console-initialize { flex:0 0 auto; min-width:190px; box-shadow:0 12px 28px rgba(242,79,44,.22); }
.api-console-safety { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:14px 32px; border-bottom:1px solid #dbe5f0; background:rgba(247,250,253,.88); }
.api-console-safety p { flex:1 1 360px; margin:0 0 0 8px; color:#536982; font-size:12.5px; text-align:right; }
.api-console-session { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:18px 32px; border-bottom:1px solid #dbe5f0; background:#0b355b; color:#fff; }
.api-console-session>div { min-width:0; padding:0 22px; border-left:1px solid rgba(255,255,255,.14); }
.api-console-session>div:first-child { padding-left:0; border-left:0; }
.api-console-session span { display:block; margin-bottom:5px; color:#9ebbd4; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.api-console-session strong { display:block; overflow:hidden; color:#fff; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.api-console-layout { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(380px,.78fr); align-items:start; }
.api-console-operations { min-width:0; padding:18px; border-right:1px solid #dbe5f0; }
.api-console-operation { display:grid; grid-template-columns:28px 54px minmax(220px,1fr) auto 72px 78px; align-items:center; gap:12px; min-height:72px; padding:10px 12px; border:1px solid transparent; border-bottom-color:#e5ebf2; border-radius:12px; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.api-console-operation:hover { z-index:1; transform:translateY(-1px); border-color:#d2deeb; background:#fff; box-shadow:0 10px 26px rgba(20,55,91,.08); }
.api-console-operation[data-run-state="running"] { border-color:#a9c7e7; background:#f2f8ff; }
.api-console-operation[data-run-state="passed"] { border-color:#a8ded1; background:#f4fcf9; }
.api-console-operation[data-run-state="failed"] { border-color:#f0bdb2; background:#fff8f6; }
.api-console-operation-copy { min-width:0; }
.api-console-operation-copy strong { display:block; overflow:hidden; color:#173b65; font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }
.api-console-operation-copy p { margin:4px 0 0; color:#64778e; font-size:11.5px; line-height:1.45; }
.api-console-operation-status { color:#75869a; font-size:11px; font-weight:700; text-align:right; }
.api-console-operation[data-run-state="passed"] .api-console-operation-status { color:#087d68; }
.api-console-operation[data-run-state="failed"] .api-console-operation-status { color:#c23f28; }
.api-console-risk { white-space:nowrap; }
.api-console-inspector { position:sticky; top:90px; min-width:0; max-height:calc(100vh - 112px); padding:24px; overflow:auto; }
.api-console-inspector-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.api-console-inspector h3 { margin:3px 0 0; color:#12365f; font-size:20px; }
.api-console-guidance { margin:18px 0; padding:13px 15px; border-left:3px solid #f25a38; border-radius:0 9px 9px 0; background:#fff5f1; color:#5a493f; font-size:12px; line-height:1.55; }
.api-console-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; margin:0 0 18px; border:1px solid #dbe5f0; border-radius:12px; background:#dbe5f0; }
.api-console-meta div { min-width:0; padding:10px 12px; background:#fff; }
.api-console-meta dt { color:#76879a; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.api-console-meta dd { overflow:hidden; margin:4px 0 0; color:#173b65; font-size:11.5px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.api-console-payload { margin-top:10px; overflow:hidden; border:1px solid #d5e0ec; border-radius:12px; background:#fff; }
.api-console-payload summary { padding:11px 13px; color:#274865; font-size:11px; font-weight:800; cursor:pointer; }
.api-console-payload pre { max-height:255px; margin:0; padding:15px; overflow:auto; border-top:1px solid #dce5ef; background:#0b2035; color:#d9e9f8; font:11px/1.6 "JetBrains Mono",monospace; white-space:pre-wrap; word-break:break-word; }
@media (max-width:1180px) { .api-console-layout{grid-template-columns:1fr}.api-console-operations{border-right:0;border-bottom:1px solid #dbe5f0}.api-console-inspector{position:static;max-height:none} }
@media (max-width:820px) { .api-console-hero{align-items:stretch;padding:24px 20px;flex-direction:column}.api-console-safety{padding:14px 20px}.api-console-safety p{margin-left:0;text-align:left}.api-console-session{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 20px;gap:16px 0}.api-console-session>div:nth-child(3){padding-left:0;border-left:0}.api-console-operation{grid-template-columns:28px 54px minmax(0,1fr) 78px}.api-console-risk,.api-console-operation-status{display:none} }
@media (max-width:560px) { .api-console-session{grid-template-columns:1fr}.api-console-session>div{padding:0;border-left:0}.api-console-operations{padding:10px}.api-console-operation{grid-template-columns:48px minmax(0,1fr) 74px;gap:8px}.api-console-operation .api-operation-index{display:none}.api-console-operation-copy p{display:none}.api-console-inspector{padding:18px} }

/* Merchant payout creation -------------------------------------------------
   A financially consequential form uses progressive sections, a persistent server quote,
   and an exact review dialog. These classes are page-scoped so existing forms retain their
   established density and behaviour. */
.payout-create-head .asof { max-width: 760px; }
.payout-safety-strip {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-bottom:18px;
  overflow:hidden; border:1px solid #d6e1ec; border-radius:16px; background:#fff;
  box-shadow:0 8px 24px rgb(16 52 86 / .05);
}
.payout-safety-strip > div { position:relative; display:flex; align-items:center; gap:11px; min-width:0; padding:15px 18px; }
.payout-safety-strip > div + div { border-left:1px solid #e1e8f0; }
.payout-safety-strip > div + div::before { content:""; position:absolute; left:-5px; top:50%; width:9px; height:9px; transform:translateY(-50%) rotate(45deg); border-top:1px solid #e1e8f0; border-right:1px solid #e1e8f0; background:#fff; }
.payout-safety-strip span { position:relative; z-index:1; display:grid; flex:0 0 30px; width:30px; height:30px; place-items:center; border:1px solid #cad8e6; border-radius:10px; background:#f4f8fc; color:#42617f; font:800 11px var(--font-mono); }
.payout-safety-strip strong,.payout-safety-strip small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.payout-safety-strip strong { color:#193b5d; font-size:11.5px; }
.payout-safety-strip small { margin-top:2px; color:#6b7f93; font-size:10.5px; }
.payout-safety-strip .is-current { background:linear-gradient(135deg,#0c416f,#092f54); }
.payout-safety-strip .is-current::after { content:""; position:absolute; right:-28px; bottom:-55px; width:100px; height:100px; border:18px solid rgb(255 255 255 / .06); border-radius:50%; }
.payout-safety-strip .is-current span { border-color:rgb(255 255 255 / .18); background:rgb(255 255 255 / .12); color:#fff; }
.payout-safety-strip .is-current strong { color:#fff; }.payout-safety-strip .is-current small { color:#bcd1e3; }

.payout-create-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,390px); align-items:start; gap:20px; }
.payout-form-card { overflow:visible; padding:0; }
.payout-card-head { align-items:flex-start; margin:0; padding:24px 26px 20px; border-bottom:1px solid #e2e9f0; }
.payout-card-head h2 { margin-top:3px; }.payout-card-head .sub { margin-top:5px; }
.payout-secure-mark { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid #bde3d9; border-radius:999px; background:#effbf7; color:#087d68; font-size:10.5px; font-weight:800; white-space:nowrap; }
.payout-secure-mark svg { width:14px; height:14px; }
.payout-form-section { display:grid; grid-template-columns:42px minmax(0,1fr); gap:14px; padding:24px 26px; border-bottom:1px solid #e8edf3; }
.payout-form-section:hover .payout-section-number { transform:translateY(-2px); border-color:#9fb9d2; box-shadow:0 8px 16px rgb(22 61 98 / .08); }
.payout-section-number { display:grid; width:36px; height:36px; place-items:center; border:1px solid #d1dce7; border-radius:12px; background:#f5f8fb; color:#42617f; font:800 10px var(--font-mono); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.payout-form-fields { min-width:0; }.payout-form-fields.field-grid { gap:18px; }
.money-input { position:relative; }.money-input > span { position:absolute; z-index:1; left:15px; top:50%; transform:translateY(-50%); color:#385a79; font-size:15px; font-weight:800; }
.money-input input { padding-left:34px !important; font-variant-numeric:tabular-nums; font-weight:750; }
.payout-form-actions { display:flex; justify-content:flex-end; gap:10px; padding:20px 26px 24px; }
.payout-form-actions .btn-accent { min-width:180px; }.payout-form-actions svg { width:16px; height:16px; }

.payout-summary-stack { position:sticky; top:98px; display:grid; gap:14px; }
.payout-summary-card { overflow:hidden; padding:0; }
.payout-summary-wallet { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:23px 24px 20px; background:radial-gradient(circle at 95% 0,rgb(62 190 168 / .18),transparent 32%),linear-gradient(145deg,#0c436f,#092e52); color:#fff; }
.payout-summary-wallet p { margin:0 0 6px; color:#b9d0e2; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.payout-summary-wallet strong { color:#fff; font-family:var(--font-mono); font-size:26px; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.payout-summary-wallet .dashboard-metric-icon { color:#fff; background:rgb(255 255 255 / .12); }
.payout-summary-list { margin:0; padding:10px 24px 4px; }
.payout-summary-list > div { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:11px 0; border-bottom:1px solid #e8edf3; }
.payout-summary-list dt { color:#60748a; font-size:11px; }.payout-summary-list dd { margin:0; color:#183b5b; font-family:var(--font-mono); font-size:11.5px; font-weight:750; font-variant-numeric:tabular-nums; }
.payout-summary-list .payout-summary-total { margin-top:3px; border-bottom:0; }.payout-summary-list .payout-summary-total dt,.payout-summary-list .payout-summary-total dd { color:#0b355b; font-size:13px; font-weight:850; }
.payout-quote-state { margin:4px 24px 16px; padding:10px 12px; border-radius:9px; background:#f3f7fb; color:#5d7188; font-size:10.5px; line-height:1.5; }
.payout-quote-state.is-loading { color:#895808; background:#fff8e7; }.payout-quote-state.is-ready { color:#08735f; background:#effaf7; }.payout-quote-state.is-error { color:#a43d29; background:#fff2ef; }
.payout-wallet-meta { display:flex; justify-content:space-between; gap:12px; padding:13px 24px; border-top:1px solid #e4ebf2; background:#f8fafc; color:#63778c; font-size:10px; }
.payout-guardrail,.payout-recovery { display:flex; gap:13px; padding:16px; border:1px solid #e8dba7; border-radius:14px; background:#fffaf0; }
.payout-guardrail-icon { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border-radius:10px; background:#fff0c9; color:#946209; }.payout-guardrail-icon svg { width:17px; height:17px; }
.payout-guardrail strong,.payout-recovery strong { color:#573e0a; font-size:11.5px; }.payout-guardrail p,.payout-recovery p { margin:4px 0 0; color:#6c6047; font-size:10.5px; line-height:1.55; }
.payout-recovery { display:block; border-color:#e9b2a7; background:#fff4f1; }.payout-recovery[hidden] { display:none; }.payout-recovery .btn { margin-top:12px; }

.payout-review-dialog { width:min(610px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; overflow:auto; border:0; border-radius:20px; background:#fff; color:var(--ink); box-shadow:0 30px 90px rgb(4 28 51 / .28); }
.payout-review-dialog::backdrop { background:rgb(6 25 45 / .58); backdrop-filter:blur(5px); }
.payout-review-shell { padding:28px; }.payout-review-icon { display:grid; width:46px; height:46px; margin-bottom:17px; place-items:center; border-radius:14px; background:#eaf5fb; color:#0d527c; }.payout-review-icon svg { width:22px; height:22px; }
.payout-review-shell h2 { margin:3px 0 4px; color:#0b355b; font-size:24px; letter-spacing:-.03em; }
.payout-review-list { margin:20px 0; overflow:hidden; border:1px solid #dce5ee; border-radius:13px; }
.payout-review-list > div { display:grid; grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr); gap:16px; padding:11px 14px; border-top:1px solid #e5ebf2; }.payout-review-list > div:first-child { border-top:0; }
.payout-review-list dt { color:#63768b; font-size:10.5px; }.payout-review-list dd { margin:0; color:#183b5b; font-size:11.5px; font-weight:750; text-align:right; }
.payout-review-list .payout-review-total { background:#f2f7fb; }.payout-review-list .payout-review-total dt,.payout-review-list .payout-review-total dd { color:#0b355b; font-size:13px; font-weight:850; }
.payout-review-note { margin:0; }.payout-review-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

@media (max-width:1100px) { .payout-create-grid{grid-template-columns:1fr}.payout-summary-stack{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.payout-summary-card{grid-row:span 2} }
@media (max-width:760px) { .payout-safety-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.payout-safety-strip>div:nth-child(3){border-top:1px solid #e1e8f0;border-left:0}.payout-safety-strip>div:nth-child(4){border-top:1px solid #e1e8f0}.payout-summary-stack{grid-template-columns:1fr}.payout-summary-card{grid-row:auto}.payout-card-head{padding:20px}.payout-form-section{grid-template-columns:1fr;padding:20px}.payout-section-number{width:32px;height:32px}.payout-form-actions{padding:18px 20px;flex-wrap:wrap}.payout-form-actions .btn{flex:1 1 140px}.payout-review-shell{padding:21px} }
@media (max-width:480px) { .payout-safety-strip{grid-template-columns:1fr}.payout-safety-strip>div+div{border-top:1px solid #e1e8f0;border-left:0}.payout-card-head{display:block}.payout-secure-mark{margin-top:12px}.payout-review-list>div{grid-template-columns:1fr;gap:3px}.payout-review-list dd{text-align:left}.payout-review-actions{flex-direction:column-reverse}.payout-review-actions .btn{width:100%} }
@media (prefers-reduced-motion:reduce) { .payout-form-section:hover .payout-section-number{transform:none}.payout-section-number{transition:none}.payout-review-dialog::backdrop{backdrop-filter:none} }

/* Finance operations workbenches */
.ops-filter{display:grid;grid-template-columns:minmax(210px,1.2fr) minmax(180px,.9fr) 150px 150px;gap:14px;align-items:end;margin-bottom:18px;padding:20px}
.ops-filter .ops-filter-wide{grid-column:span 3}.ops-filter .field-actions{display:flex;gap:8px;align-items:center;flex-direction:row}
.ops-filter.compact{grid-template-columns:repeat(3,minmax(190px,1fr)) auto}
.metric-strip.finance-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 18px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.9);box-shadow:var(--shadow-sm);overflow:hidden}
.metric-strip.finance-metrics>div{padding:20px 22px;border-right:1px solid var(--line);min-width:0}.metric-strip.finance-metrics>div:last-child{border-right:0}
.metric-strip.finance-metrics span{display:block;color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.metric-strip.finance-metrics strong{display:block;margin-top:7px;color:var(--ink);font-size:1.55rem;line-height:1.1}.metric-strip.finance-metrics small{display:block;margin-top:7px;color:var(--muted)}
.ops-table-card{margin-bottom:16px}.dependency-panel{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-bottom:18px;padding:17px 20px;border:1px solid #f2ce78;border-radius:18px;background:linear-gradient(135deg,#fffaf0,#fff6dd);box-shadow:var(--shadow-sm)}
.dependency-panel strong{display:block;color:#693f0a}.dependency-panel p{margin:4px 0 0;color:#765a2c}.ops-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:18px;margin-bottom:16px;align-items:start}.ops-split>*{min-width:0}.ops-split .table-wrap{max-width:100%}
.recon-queue{display:grid;gap:12px}.recon-case{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fbfdff;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.recon-case:hover{transform:translateY(-1px);border-color:#bdcde0;box-shadow:0 12px 24px rgba(12,45,78,.07)}
.recon-case-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.recon-case-head h3{margin:8px 0 0;font-size:1rem}.recon-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}.recon-facts span{padding:9px 10px;border-radius:10px;background:#f2f6fb;color:var(--muted);font-size:.75rem}.recon-facts strong{display:block;margin-top:3px;color:var(--ink);font-size:.84rem}.recon-reason{margin:10px 0;padding:10px 12px;border-left:3px solid var(--orange);background:#fff8f4;color:var(--ink)}
@media(max-width:1100px){.ops-filter,.ops-filter.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-filter .ops-filter-wide{grid-column:span 2}.metric-strip.finance-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-strip.finance-metrics>div:nth-child(2){border-right:0}.ops-split{grid-template-columns:1fr}}
@media(max-width:680px){.ops-filter,.ops-filter.compact{grid-template-columns:1fr}.ops-filter .ops-filter-wide{grid-column:auto}.ops-filter .field-actions{flex-wrap:wrap}.metric-strip.finance-metrics{grid-template-columns:1fr}.metric-strip.finance-metrics>div{border-right:0;border-bottom:1px solid var(--line)}.metric-strip.finance-metrics>div:last-child{border-bottom:0}.dependency-panel{grid-template-columns:auto 1fr}.dependency-panel>.badge{grid-column:1/-1;width:max-content}.recon-facts{grid-template-columns:1fr}.ops-split .card-head{align-items:flex-start;flex-direction:column}.ops-split .card-head>.badge{align-self:flex-start}}

/* Controlled financial corrections */
.correction-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}.correction-principles article{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.86);box-shadow:var(--shadow-sm)}.correction-principles strong{display:block;color:var(--ink)}.correction-principles p{margin:4px 0 0;color:var(--muted);line-height:1.5}.correction-create{margin-bottom:18px}.correction-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.correction-reason,.correction-submit{grid-column:1/-1}.correction-submit{display:flex;align-items:center;justify-content:space-between;gap:18px}.correction-submit .notice{margin:0;flex:1}.correction-hidden{display:none!important}.input-action{display:flex;gap:8px}.input-action input{min-width:0;flex:1}.correction-filter{grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto}.correction-list{display:grid;gap:14px}.correction-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.36fr);gap:18px;padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#fff,#fbfdff);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.correction-item:hover{border-color:#bfd0e3;box-shadow:0 14px 35px rgba(18,51,84,.08);transform:translateY(-1px)}.correction-item-main{min-width:0}.correction-item-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.correction-item-title h3{margin:0 auto 0 0;font-size:1rem}.correction-type{padding:5px 8px;border-radius:8px;font-size:.68rem;font-weight:850;letter-spacing:.08em}.correction-type.reversal{color:#9c3a24;background:#fff0eb}.correction-type.adjustment{color:#18507f;background:#eaf5ff}.correction-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}.correction-facts span{color:var(--muted);font-size:.72rem}.correction-facts strong{display:block;margin-top:4px;color:var(--ink);font-size:.84rem;overflow-wrap:anywhere}.correction-reason-text{margin:0;color:var(--ink);line-height:1.55}.correction-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:.75rem}.decision-note{margin-top:14px;padding:12px 14px;border-radius:12px;background:#f3f7fb}.decision-note p{margin:4px 0 0;color:var(--muted)}.correction-decision{align-self:stretch;padding:16px;border-radius:15px;background:#f5f8fc;border:1px solid #dbe5f0}.correction-decision label{display:block;margin-bottom:7px;font-size:.76rem;font-weight:800}.correction-decision textarea{min-height:92px}.correction-decision .row-actions{margin-top:10px;justify-content:flex-end}.correction-decision small{display:block;margin-top:10px;color:var(--muted)}.correction-wait{align-self:center;display:flex;gap:10px;align-items:center;padding:16px;border-radius:14px;background:#fff8e8;color:#744a0d}.correction-wait strong,.correction-wait small{display:block}.correction-wait small{margin-top:3px;color:#8a672e}
@media(max-width:1100px){.correction-principles{grid-template-columns:1fr}.correction-item{grid-template-columns:1fr}.correction-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.correction-form,.correction-filter{grid-template-columns:1fr}.correction-reason,.correction-submit{grid-column:auto}.correction-submit{align-items:stretch;flex-direction:column}.correction-submit .btn{width:100%}.correction-facts{grid-template-columns:1fr}.input-action{align-items:stretch;flex-direction:column}.correction-decision .row-actions{display:grid;grid-template-columns:1fr}.correction-decision .btn{width:100%}}
/* Controlled setup delivery -------------------------------------------------
   The register is an evidence timeline, so status, artifact identity and the
   immutable fingerprint dominate; provider diagnostics remain secondary. */
.setup-delivery-callout{margin-bottom:16px;background:linear-gradient(135deg,#fff 0%,#f5fbff 100%);border-color:#cfe1f2}
.setup-delivery-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 14px}
.delivery-head{align-items:flex-end}
.delivery-guardrails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.delivery-guardrails article{display:flex;gap:13px;min-height:108px;padding:18px;border:1px solid var(--border,#d9e3ee);border-radius:18px;background:rgba(255,255,255,.86);box-shadow:0 10px 30px rgba(18,52,86,.05);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.delivery-guardrails article:hover{transform:translateY(-2px);border-color:#b8cee2;box-shadow:0 16px 38px rgba(18,52,86,.09)}
.delivery-guardrails strong{display:block;color:#102b49;margin:1px 0 5px}.delivery-guardrails p{margin:0;color:#64778e;line-height:1.55}
.delivery-filter{display:grid;grid-template-columns:minmax(240px,360px) auto;align-items:end;margin-bottom:16px}
.delivery-workbench{overflow:hidden}.delivery-list{display:grid;gap:0;border-top:1px solid #dfe8f1}
.delivery-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:22px 22px 22px 26px;border-bottom:1px solid #e3eaf1;background:#fff;transition:background .16s ease,transform .16s ease}
.delivery-item:last-child{border-bottom:0}.delivery-item:hover{background:#fbfdff}.delivery-status-rail{position:absolute;inset:18px auto 18px 0;width:4px;border-radius:0 4px 4px 0;background:#91a6bd}.delivery-status-rail.status-0{background:#e7a51b}.delivery-status-rail.status-1,.delivery-status-rail.status-3{background:#11a58b}.delivery-status-rail.status-2{background:#e0553e}
.delivery-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.delivery-title h3{margin:5px 0 0;color:#102b49;font-size:1.08rem}.delivery-artifact{color:#a83f28;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.delivery-state-copy{margin:9px 0 15px;color:#5f738b}.delivery-facts{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px;margin:0}.delivery-facts div{padding:11px 12px;border-radius:12px;background:#f5f8fb}.delivery-facts dt,.delivery-evidence small{display:block;margin-bottom:4px;color:#778aa0;font-size:.69rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.delivery-facts dd{margin:0;color:#1a3554;font-weight:700}
.delivery-evidence{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:12px}.delivery-evidence span{min-width:0;padding:11px 12px;border:1px dashed #cad8e6;border-radius:12px}.delivery-evidence code{display:block;overflow:hidden;color:#38536f;font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.delivery-actions{display:flex;align-items:flex-start;justify-content:flex-end;min-width:132px}.delivery-ack{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px;border-radius:12px;background:#eaf8f4;color:#126e61}.delivery-ack svg{width:20px}.delivery-ack strong,.delivery-ack small{display:block}.delivery-ack small{margin-top:3px;color:#4f756f}
@media(max-width:1100px){.delivery-guardrails{grid-template-columns:1fr}.delivery-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.delivery-evidence{grid-template-columns:1fr}}
@media(max-width:720px){.delivery-filter{grid-template-columns:1fr}.delivery-item{grid-template-columns:1fr}.delivery-actions{justify-content:flex-start}.delivery-facts{grid-template-columns:1fr}.delivery-title{align-items:flex-start;flex-direction:column}.setup-delivery-actions>*{width:100%;justify-content:center}}

/* Staff and Bank identity governance ---------------------------------------
   Access changes are consequential and infrequent. The layout keeps the
   request, independent decision and immutable evidence visually distinct. */
.access-guardrails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.access-guardrails article{position:relative;min-height:112px;padding:19px 20px 18px 22px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#fff,#f8fbfe);box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.access-guardrails article::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#1a6a99}
.access-guardrails article:nth-child(2)::before{background:#e6a21a}.access-guardrails article:nth-child(3)::before{background:#0c9a7f}
.access-guardrails article:hover{transform:translateY(-2px);border-color:#bdd0e2;box-shadow:0 14px 32px rgba(18,52,86,.08)}
.access-guardrails strong{display:block;color:#102e4d;font-size:.88rem}.access-guardrails p{margin:6px 0 0;color:#526a82;font-size:.79rem;line-height:1.55}
.access-request-card{margin-bottom:18px;overflow:visible}.access-request-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.access-form{display:grid;align-content:start;gap:16px;padding:24px}.access-form+ .access-form{border-left:1px solid var(--line);background:linear-gradient(145deg,#fff,#fbfcfe)}
.access-form h3{margin:0;color:#123757;font-size:1rem}.access-form .btn{justify-self:start}
.access-filter{grid-template-columns:minmax(220px,360px) auto;margin-bottom:18px}
.access-queue{overflow:hidden}.access-list{display:grid;border-top:1px solid var(--line)}
.access-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:21px 24px;border-bottom:1px solid #e2eaf2;background:#fff;transition:background .16s ease,box-shadow .16s ease}
.access-item:last-child{border-bottom:0}.access-item:hover{z-index:1;background:#fbfdff;box-shadow:inset 4px 0 #bfd3e7}
.access-main{min-width:0}.access-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.access-title h3{margin:0 auto 0 0;color:#0d3153;font-size:1rem}
.access-action{display:inline-flex;padding:5px 8px;border-radius:8px;font-size:.66rem;font-weight:850;letter-spacing:.08em}.access-action.grant{color:#087963;background:#e9f8f3}.access-action.revoke{color:#aa4029;background:#fff0ec}
.access-role{margin-top:9px;color:#45617c;font-size:.78rem;font-weight:750}.access-role code{margin-left:6px;padding:3px 6px;border-radius:6px;background:#eef4f9;color:#244b6c;font-size:.69rem}
.access-main>p{margin:11px 0 0;color:#344d66;line-height:1.55}.access-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:13px;color:#526a82;font-size:.72rem}.access-meta code{max-width:100%;overflow-wrap:anywhere;color:#45617c}
.access-decisions{display:flex;align-items:flex-start;gap:8px;min-width:max-content}.access-decisions .btn{min-width:90px}
@media(max-width:1050px){.access-guardrails{grid-template-columns:1fr}.access-request-grid{grid-template-columns:1fr}.access-form+ .access-form{border-top:1px solid var(--line);border-left:0}.access-item{grid-template-columns:1fr}.access-decisions{justify-content:flex-end}}
@media(max-width:680px){.access-filter{grid-template-columns:1fr}.access-item{padding:18px}.access-title h3{flex-basis:calc(100% - 80px)}.access-decisions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}.access-decisions .btn{width:100%}.access-form{padding:20px}}
@media(prefers-reduced-motion:reduce){.access-guardrails article{transition:none}.access-guardrails article:hover{transform:none}}

/* Bharat Bank operations evidence */
.bank-ops-head .row-actions{align-self:flex-end}.bank-dispatch-state{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:18px;padding:21px 23px;border:1px solid #efd08b;border-radius:20px;background:radial-gradient(circle at 92% 0,rgba(231,164,27,.13),transparent 30%),linear-gradient(145deg,#fffdf8,#fff8e8);box-shadow:var(--shadow-sm)}
.bank-dispatch-state.is-ready{border-color:#a8ddcf;background:radial-gradient(circle at 92% 0,rgba(14,157,128,.12),transparent 30%),linear-gradient(145deg,#fff,#effbf7)}.bank-state-icon{display:grid;width:44px;height:44px;place-items:center;border-radius:14px;background:#fff1ca;color:#926008}.bank-dispatch-state.is-ready .bank-state-icon{background:#daf4ec;color:#087862}.bank-state-icon svg{width:21px;height:21px}.bank-dispatch-state h2{margin:3px 0 4px;color:#103352;font-size:1.12rem}.bank-dispatch-state p{margin:0;color:#5c7188;line-height:1.5}.bank-ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}.bank-evidence-list{margin:0}.bank-evidence-list>div{display:grid;grid-template-columns:minmax(170px,.75fr) minmax(0,1.25fr);gap:16px;padding:12px 0;border-bottom:1px solid #e4eaf1}.bank-evidence-list>div:last-child{border-bottom:0}.bank-evidence-list dt{color:#526a82;font-size:.75rem}.bank-evidence-list dd{margin:0;color:#173958;font-size:.79rem;font-weight:750;text-align:right}.bank-gate-list{display:grid;gap:0;margin:0;padding:0;list-style:none}.bank-gate-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #e4eaf1}.bank-gate-list li:last-child{border-bottom:0}.bank-gate-list li>span{width:10px;height:10px;margin-top:5px;border-radius:50%;background:#e3a31e;box-shadow:0 0 0 5px #fff5d9}.bank-gate-list li.pass>span{background:#0c9c80;box-shadow:0 0 0 5px #e6f7f2}.bank-gate-list strong{display:block;color:#173958;font-size:.8rem}.bank-gate-list p{margin:3px 0 0;color:#526a82;font-size:.75rem;line-height:1.48}.bank-ops-filter{grid-template-columns:repeat(3,minmax(180px,1fr)) auto}.bank-ops-metrics strong{font-variant-numeric:tabular-nums}
@media(max-width:1050px){.bank-ops-grid{grid-template-columns:1fr}.bank-ops-filter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.bank-dispatch-state{grid-template-columns:auto 1fr}.bank-dispatch-state>.badge{grid-column:1/-1;width:max-content}.bank-ops-filter{grid-template-columns:1fr}.bank-evidence-list>div{grid-template-columns:1fr;gap:3px}.bank-evidence-list dd{text-align:left}.bank-ops-head .row-actions{align-self:stretch}}
.document-security-gate{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px 24px;margin-bottom:22px;border:1px solid #f2b8ad;border-radius:var(--radius-lg);background:linear-gradient(115deg,#fff8f5 0%,#fff 62%);box-shadow:var(--shadow-sm)}
.document-security-gate h2{margin:3px 0 6px;font-size:1.25rem}.document-security-gate p{margin:0;max-width:850px;color:var(--text-muted)}
.document-security-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0}.document-security-metrics{margin-bottom:20px}
.document-exception-request,.document-exception-list,.document-security-filter{margin-bottom:20px}.document-exception-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.document-exception-form .span-2{grid-column:1/-1}
.document-exception-list .decision-note.is-revoked{border:1px solid #e4d6d2;background:#fff8f6}.document-exception-list .decision-note.is-revoked strong{color:#8c3d2d}
.document-security-head .btn{align-self:flex-start}.document-security-filter{grid-template-columns:minmax(190px,1fr) minmax(220px,1fr) auto}
@media(max-width:900px){.document-security-gate{grid-template-columns:auto minmax(0,1fr)}.document-security-gate>.badge{grid-column:2}.document-security-grid{grid-template-columns:1fr}.document-exception-form{grid-template-columns:1fr}.document-exception-form .span-2{grid-column:auto}.document-security-filter{grid-template-columns:1fr}}
@media(max-width:560px){.document-security-gate{grid-template-columns:1fr;padding:18px}.document-security-gate>.badge{grid-column:auto;justify-self:start}}
.report-advanced{grid-column:1/-1;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 86%,var(--page));overflow:hidden}
.report-advanced>summary{display:flex;justify-content:space-between;gap:16px;align-items:center;cursor:pointer;padding:14px 16px;font-weight:750;color:var(--navy);list-style:none}
.report-advanced>summary::-webkit-details-marker{display:none}
.report-advanced>summary:after{content:"+";display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:9px;font-size:1.1rem}
.report-advanced[open]>summary:after{content:"-"}
.report-advanced>summary span{margin-left:auto;font-size:.78rem;font-weight:500;color:var(--text-muted)}
.report-advanced-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px;border-top:1px solid var(--line);background:var(--surface)}
.report-advanced .field small{display:block;margin-top:6px;color:var(--text-muted);font-size:.74rem}
.report-advanced>summary:hover{background:color-mix(in srgb,var(--brand) 4%,transparent)}
@media(max-width:1000px){.report-advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.report-advanced>summary span{display:none}.report-advanced-grid{grid-template-columns:1fr}}

/* Merchant access lifecycle */
.row-menu{position:relative}.row-menu>summary{list-style:none;cursor:pointer}.row-menu>summary::-webkit-details-marker{display:none}
.row-menu-panel{position:absolute;z-index:30;top:calc(100% + 7px);right:0;display:grid;min-width:270px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 20px 48px rgba(11,42,72,.18)}
.menu-action,.role-change>summary{width:100%;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:inherit;font-size:.78rem;font-weight:700;text-align:left;cursor:pointer;transition:background .15s ease,color .15s ease}
.menu-action:hover,.role-change>summary:hover{background:#f1f6fb}.menu-action.danger{color:#ae4029}.menu-action.danger:hover{background:#fff0ec}
.role-change{border-top:1px solid var(--line);margin-top:5px;padding-top:5px}.role-change>summary{list-style:none}.role-change>summary::-webkit-details-marker{display:none}.role-change form{display:grid;gap:10px;padding:8px 10px 10px}.role-change .field{margin:0}.role-change textarea{min-height:64px}
@media(max-width:720px){.row-menu-panel{position:fixed;inset:auto 12px 12px;max-height:70vh;overflow:auto}.cell-actions{width:1%}}