/* ==========================================================================
   Counter & Vault — design system
   Operational register: dark navigation rail, white workspace, flat sections,
   dense tables. Colour is reserved for actions, product navigation and status.
   Single visual world — there is no dark workspace. The rate board is the one
   dark surface, because it is a screen physically on a wall.
   Weights: 400 / 500 / 600 only. Three weights, never more — the discipline is
   part of why this register reads as calm rather than busy.
   ========================================================================== */

:root {
  color-scheme: light;

  /* neutrals ------------------------------------------------------------- */
  --bg: #FFFFFF;
  --surface: #FAFAFB;        /* metric band, search fill, row hover */
  --surface-2: #F5F6F7;      /* deeper tint, sub-table headers */
  --surface-3: #EBECF0;      /* hairline fills, meter track */
  --line: rgba(20, 23, 26, 0.09);   /* alpha, so it darkens over hover and selected rows */
  --line-solid: #E8EAED;
  --line-2: rgba(20, 23, 26, 0.16); /* heavier divider */
  --ink: #14171A;            /* primary text and figures */
  --ink-body: #1B1F21;
  /* Both greys clear 4.5:1 for small text on white and on the tinted
     surfaces (the old tertiary #878E99 was 3.3:1). */
  --ink-2: #565E68;          /* secondary text, labels */
  --ink-3: #68707A;          /* tertiary, meta */
  --ink-disabled: #B0B6BF;

  /* brand ---------------------------------------------------------------- */
  /* The accent carries selection, links and focus. It deliberately does NOT
     carry the primary button: a filled indigo/violet button is the single most
     common generated-UI tell, and #612FFF sits one digit from Tailwind's
     default indigo-500 (#615FFF). Flip --action to var(--primary) for an
     accent-filled primary instead. */
  --primary: #2B4C8C;
  --primary-hi: #223E73;
  --action: #14171A;
  --action-hi: #2B2F33;
  --primary-300: #86A0D8;
  --primary-wash: #EAF0FB;   /* selected */
  --primary-100: #D3E0F3;
  --coral: #C6994E;          /* product navigation and accents only */
  --coral-red: #FF4F42;
  /* Direction reads from label and column position, never from hue. */
  --buy: var(--ink);
  --sell: var(--ink);

  /* status: background + ink pairs, used only on chips -------------------- */
  --ok-bg: #BBF2D1;   --ok: #08512E;
  --warn-bg: #FAE891; --warn: #634114;
  --risk-bg: #FFCECC; --risk: #801302;
  --pend-bg: #EAF0FB; --pend: #223E73;
  --off-bg: #E8EAED;  --off: #2B2F33;

  /* rail ----------------------------------------------------------------- */
  --rail-bg: #16223F;
  --rail-ink: #FFFFFF;
  --rail-ink-2: #D0D4D9;
  --rail-ink-3: #878E99;
  --rail-line: rgba(255, 255, 255, 0.08);
  --rail-hover: rgba(255, 255, 255, 0.06);

  /* board (customer-facing display) -------------------------------------- */
  --board-bg: #14171A;
  --board-ink: #FFFFFF;
  --board-ink-2: #878E99;
  --board-line: rgba(255, 255, 255, 0.10);

  /* geometry ------------------------------------------------------------- */
  --r-1: 4px;    /* chips, checkboxes */
  --r-2: 6px;    /* buttons, inputs, filters, alerts */
  --r-3: 8px;    /* cards, large inputs */
  --r-4: 12px;   /* drawers, dialogs, the board */
  --rail: 236px;
  --row: 56px;
  --shadow-card: 0 1px 2px rgba(20, 23, 26, 0.03), 0 8px 24px -8px rgba(20, 23, 26, 0.10);
  --shadow-pop: 0 4px 6px -2px rgba(20, 23, 26, 0.05), 0 16px 40px -12px rgba(20, 23, 26, 0.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-sticky: 20; --z-rail: 30; --z-drawer: 40; --z-modal: 50; --z-toast: 60;

  /* type ----------------------------------------------------------------- */
  --sans: 'Archivo', 'Noto Sans SC', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ================================================================== base */
* { box-sizing: border-box; }
/* Every inline icon gets a sane default so a bare ${ico(...)} call dropped
   into a table cell or a pill never renders at its unscaled intrinsic size —
   a rule this file had for buttons, callouts and a handful of other
   containers, but not for icons used inline anywhere else. More specific
   selectors (.btn svg, .callout svg, ...) still win on specificity. */
svg { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
/* The hidden attribute must beat any class that sets display. A UA stylesheet
   loses to author styles, so `.auth-error{display:flex}` on a [hidden] element
   renders an empty error box on page load without this. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink-body);
  font: 400 14px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--ink); text-wrap: balance; }
h1 { font-size: 32px; line-height: 1.18; letter-spacing: -0.018em; }
h2 { font-size: 20px; line-height: 1.3; letter-spacing: -0.012em; }
h3 { font-size: 16px; line-height: 1.4; letter-spacing: -0.006em; }
h4 { font-size: 14px; line-height: 1.4; }
p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hi); text-decoration: underline; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-radius: var(--r-1); }

/* Figures align in columns, set in the text face — not in a mono. */
table, .num, .tile-v, .kv .v, .board-figure { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.t-sub { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.t-strong { font-weight: 500; color: var(--ink); }
.lbl { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
/* An exception amount takes bare red text — never a coloured chip, never green. */
.neg { color: var(--risk); }

/* ================================================================= shell */
.app { display: grid; grid-template-columns: var(--rail) 1fr; grid-template-rows: 1fr; min-height: 100dvh; }

.rail {
  background: var(--rail-bg); color: var(--rail-ink-2);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh;
  z-index: var(--z-rail); overflow: hidden;
}
/* the organisation switcher — here, the branch */
.brand {
  display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 60px; flex: none;
  border-bottom: 1px solid var(--rail-line); cursor: pointer; border-radius: 0;
  border-left: 0; border-right: 0; border-top: 0; background: none; width: 100%; text-align: left;
}
.brand:hover { background: var(--rail-hover); }
.brand-mark {
  width: 28px; height: 28px; border-radius: var(--r-2); flex: none;
  background: linear-gradient(140deg, var(--coral-red), var(--coral));
  color: #FFF; display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.brand-text { min-width: 0; flex: 1; }
.brand-name {
  display: block; font-size: 14px; font-weight: 600; color: var(--rail-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub { display: block; font-size: 11px; color: var(--rail-ink-3); }
.brand svg { width: 14px; height: 14px; color: var(--rail-ink-3); flex: none; stroke-width: 1.7; }

.nav { display: flex; flex-direction: column; padding: 8px 8px 16px; overflow-y: auto; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; flex: none;
  border-radius: var(--r-2); color: var(--rail-ink-2); text-decoration: none;
  font-size: 14px; font-weight: 400; transition: background 120ms var(--ease), color 120ms var(--ease);
}
.nav a:hover { background: var(--rail-hover); color: var(--rail-ink); text-decoration: none; }
/* The active state is the product-navigation coral — the only place coral leads. */
.nav a[aria-current='page'] { color: var(--coral); font-weight: 500; }
.nav a svg { flex: none; width: 18px; height: 18px; stroke-width: 1.5; }
.nav a .badge { margin-left: auto; }
.nav-group { font-size: 11px; font-weight: 500; color: var(--rail-ink-3); padding: 16px 10px 6px; }
/* second level: branch rows carrying their own figure */
.nav a.nav-sub {
  display: block; height: auto; padding: 7px 10px 7px 38px; color: var(--rail-ink-2);
  border-radius: var(--r-2); font-size: 13px; font-weight: 400; line-height: 1.35;
}
.nav a.nav-sub:hover { background: var(--rail-hover); color: var(--rail-ink); text-decoration: none; }
.nav a.nav-sub[aria-current='true'] { color: var(--rail-ink); font-weight: 500; }
.nav a.nav-sub em { display: block; font-style: normal; font-size: 12px; color: var(--rail-ink-3); font-variant-numeric: tabular-nums; }

.rail-foot { border-top: 1px solid var(--rail-line); padding: 10px; flex: none; display: grid; gap: 8px; }

/* language switcher, in the rail so it is reachable from any screen */
.lang { display: flex; gap: 2px; padding: 2px; background: rgba(255, 255, 255, 0.06); border-radius: var(--r-2); }
.lang button {
  flex: 1; border: 0; background: none; cursor: pointer; padding: 5px 0; border-radius: var(--r-1);
  font-size: 12px; font-weight: 500; color: var(--rail-ink-3);
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.lang button:hover { color: var(--rail-ink); }
.lang button[aria-pressed='true'] { background: rgba(255, 255, 255, 0.12); color: var(--rail-ink); }

/* Chinese sets wider and does not want Latin's tightened tracking. */
:root[data-lang='zh'] body { line-height: 1.7; }
:root[data-lang='zh'] h1, :root[data-lang='zh'] h2, :root[data-lang='zh'] h3,
:root[data-lang='zh'] .tile-v, :root[data-lang='zh'] .kv-total .v { letter-spacing: 0; }
:root[data-lang='zh'] .lbl, :root[data-lang='zh'] thead th { font-size: 13px; }

/* workspace ---------------------------------------------------------------- */
.main { padding: 0 32px 72px; min-width: 0; }

/* page header: 40px title, actions right-aligned with the primary one last */
.page-head { display: flex; align-items: flex-start; gap: 24px; padding: 28px 0 0; flex-wrap: wrap; }
.page-head > div:first-child { flex: 1 1 340px; min-width: 0; }
.page-head h1 + p { margin-top: 8px; color: var(--ink-2); max-width: 82ch; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 8px; }
/* pages without tabs keep the same gap between header and first section */
.page-head + :not(.tabs) { margin-top: 32px; }

/* the measured vertical rhythm: 40 / 40 / 32 / 12 / 32 */
.tabs {
  display: flex; gap: 24px; margin: 40px 0 0; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  border: 0; background: none; cursor: pointer; padding: 0 0 12px; white-space: nowrap;
  font-size: 16px; font-weight: 400; color: var(--ink-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 120ms var(--ease), border-color 120ms var(--ease);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected='true'] { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.tabs + * { margin-top: 40px; }

.stack { display: grid; gap: 32px; }
.grid { display: grid; gap: 24px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.split { display: grid; gap: 32px; grid-template-columns: minmax(0, 1.62fr) minmax(320px, 0.88fr); align-items: start; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-tight { display: flex; gap: 8px; align-items: center; }
.between { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

@media (max-width: 1180px) {
  :root { --rail: 64px; }
  .brand-text, .brand svg, .nav a span, .nav-group, .nav-sub, .rail-foot .switcher-text { display: none; }
  .nav a { justify-content: center; padding: 0; }
  .brand { justify-content: center; padding: 0; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed; inset: auto 0 0 0; height: auto; flex-direction: row; top: auto;
    border-top: 1px solid var(--rail-line);
  }
  .brand { display: none; }
  .rail-foot {
    display: flex; align-items: center; border-top: 0; border-left: 1px solid var(--rail-line);
    padding: 6px 8px; flex: none;
  }
  .rail-foot .switcher { display: none; }
  .lang button { padding: 5px 8px; white-space: nowrap; }
  /* more sections than fit: the bar scrolls, and a fade at the right edge says so */
  .nav {
    flex-direction: row; overflow-x: auto; padding: 6px 28px 6px 6px; gap: 2px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .tabs {
    padding-right: 24px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .nav a { padding: 0 11px; flex: none; }
  /* room at the end of the page for the bottom bar and the Ask AI button */
  .main { padding: 0 16px 140px; }
  /* tables scroll inside their panel rather than wrapping every cell */
  .panel .tw th, .panel .tw td { white-space: nowrap; }
  .main .board { padding: 20px 16px 22px; }
  .board .board-per { display: none; }
  .board .board-figure { font-size: 17px; }
  h1 { font-size: 28px; }
  .page-head { padding-top: 24px; }
  .denom-row { grid-template-columns: 76px 1fr 64px 92px; gap: 8px; }
}

/* ========================================================== metric band
   Figures sit in one flat tinted band as label-above-value. Not boxed
   cards, and not separated by rules — the band itself is the container.   */
.tiles {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  background: var(--surface); border-radius: var(--r-3); padding: 18px 24px; gap: 20px 48px;
}
/* Figures take their content's width. Equal columns are what makes a metric
   row read as five identical cards. */
.tile { min-width: 0; flex: 0 0 auto; max-width: 280px; }
.tile-dominant { flex: 0 0 auto; margin-right: 8px; }
.tile .lbl { display: block; margin-bottom: 4px; }
.tile-v { font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -0.014em; line-height: 1.2; }
.tile-v small { font-size: 14px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.tile-d { margin-top: 4px; font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.tile-dominant .tile-v { font-size: 30px; }
/* cents at half the size of the figure */
.tile-v .dec { font-size: 0.5em; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }

/* ============================================================== sections
   Sections are flat. A table is the page, not a card sitting on the page. */
.panel { min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 0 0 16px; }
.panel-head h2, .panel-head h3 { flex: 1; min-width: 0; font-size: 20px; font-weight: 600; }
.panel-body { padding: 0; }
.panel-foot { padding: 16px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* the genuine card, for a surface that really must lift off the page */
.card {
  background: var(--bg); border-radius: var(--r-3); box-shadow: var(--shadow-card);
  padding: 20px;
}
.card > .panel-head { padding-bottom: 14px; }
.card > .panel-foot { padding-top: 14px; }

/* ================================================================ tables */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-2);
  padding: 0 16px 10px; white-space: nowrap; border-bottom: 1px solid var(--line);
  background: var(--bg); position: sticky; top: 0; z-index: 1;
}
thead th:first-child, tbody td:first-child, tfoot td:first-child { padding-left: 0; }
thead th:last-child, tbody td:last-child, tfoot td:last-child { padding-right: 0; }
tbody td {
  padding: 0 16px; height: var(--row); border-bottom: 1px solid var(--line);
  vertical-align: middle; color: var(--ink-body);
}
tbody tr { transition: background 100ms var(--ease); }
tbody tr[data-click]:hover { background: var(--surface); cursor: pointer; }
tbody tr[aria-selected='true'] { background: var(--primary-wash); }
tfoot td { padding: 0 16px; height: 52px; font-weight: 500; color: var(--ink); border-top: 1px solid var(--line-2); }
.r { text-align: right; }
/* Identifiers and reference codes never wrap: a broken reference reads as two
   values, and the wrap pushed rows past the 56px they are designed around. */
.ref { white-space: nowrap; }
.c { text-align: center; }
.flash { animation: flash 1.2s var(--ease); }
@keyframes flash { from { background: var(--primary-wash); } to { background: transparent; } }

/* the filter row: search and selects left, table controls right */
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.filters .search { flex: 0 1 280px; }
.filters .spacer { flex: 1 1 auto; }

/* ============================================================== controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-2); cursor: pointer; white-space: nowrap;
  font-size: 14px; font-weight: 500;
  border: 1px solid var(--line); background: var(--bg); color: var(--primary);
  transition: background 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease);
}
.btn:hover { background: var(--surface); border-color: var(--line-2); }
.btn[disabled] { background: var(--line); border-color: var(--line); color: var(--ink-disabled); cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; stroke-width: 1.6; }
.btn-primary { background: var(--action); border-color: var(--action); color: #FFF; }
.btn-primary:hover { background: var(--action-hi); border-color: var(--action-hi); }
.btn-primary[disabled] { background: var(--line); border-color: var(--line); color: var(--ink-disabled); }
.btn-ghost { border-color: transparent; background: none; color: var(--primary); }
.btn-ghost:hover { background: var(--primary-wash); border-color: transparent; }
/* There is no destructive variant. A rejection is a plain secondary button. */
.btn-risk { color: var(--risk); }
.btn-risk:hover { background: var(--surface); }
.btn-neutral { color: var(--ink); }
.btn-icon { width: 40px; padding: 0; color: var(--ink-2); }
.btn-icon:hover { color: var(--ink); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }

.field { display: grid; gap: 6px; min-width: 0; }
.field > label { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.input, .select {
  height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--bg); width: 100%; font-size: 14px; color: var(--ink);
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.input:hover, .select:hover { border-color: var(--line-2); }
.input:focus, .select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(43, 76, 140, 0.16);
}
.input::placeholder { color: var(--ink-3); }
.input-lg {
  height: 64px; font-size: 28px; font-weight: 600; padding: 0 14px; letter-spacing: -0.016em;
  background: var(--surface); border-color: transparent; font-variant-numeric: tabular-nums;
}
.input-lg:hover { background: var(--surface-2); border-color: transparent; }
.input-lg:focus { background: var(--bg); }
.select {
  appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2368707A' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5L8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.search { position: relative; }
.search .input { padding-left: 36px; background: var(--surface); border-color: transparent; }
.search .input:focus { background: var(--bg); }
.search svg {
  position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px;
  color: var(--ink-3); stroke-width: 1.7; pointer-events: none;
}
input[type='checkbox'] {
  appearance: none; width: 16px; height: 16px; border: 1px solid var(--line-2);
  border-radius: var(--r-1); background: var(--bg); cursor: pointer; flex: none;
  display: inline-grid; place-content: center; margin: 0;
}
input[type='checkbox']:hover { border-color: var(--primary-300); }
input[type='checkbox']:checked { background: var(--primary); border-color: var(--primary); }
input[type='checkbox']:checked::after {
  content: ''; width: 9px; height: 5px; border: 1.8px solid #FFF;
  border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -1px;
}
input[type='range'] { accent-color: var(--primary); width: 100%; }

.seg { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface); border-radius: var(--r-2); }
.seg button {
  border: 0; background: none; cursor: pointer; padding: 6px 14px; border-radius: var(--r-1);
  font-size: 14px; font-weight: 400; color: var(--ink-2);
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed='true'] { background: var(--bg); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(20,23,26,.06); }
.seg-dir button { padding: 9px 18px; }

.switcher {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px;
  border: 0; border-radius: var(--r-2); background: none; color: var(--rail-ink-2);
  cursor: pointer; text-align: left;
}
.switcher:hover { background: var(--rail-hover); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,0.1); color: var(--rail-ink); font-size: 11px; font-weight: 600;
}
/* the same control inside the white workspace */
dialog .switcher { color: var(--ink); border: 1px solid var(--line); }
dialog .switcher:hover { background: var(--surface); }
dialog .avatar { background: var(--surface-2); color: var(--ink-2); }

/* ================================================================ status
   Rectangular chips, 24px tall, 4px radius, sentence case. Colour only
   where a state genuinely needs it; routine states stay neutral.          */
.pill {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border-radius: var(--r-1); font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--off-bg); color: var(--off);
}
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-risk { background: var(--risk-bg); color: var(--risk); }
.pill-info { background: var(--pend-bg); color: var(--pend); }
/* Direction is not a state: it gets no chip and no colour. */
.pill-buy, .pill-sell { background: none; color: var(--ink-2); padding: 0; height: auto; font-weight: 400; }
/* the routine state: no chip at all, just quiet text */
.pill-plain { background: none; color: var(--ink-2); padding: 0; height: auto; font-weight: 400; }
.badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center;
  background: var(--coral); color: var(--rail-bg); font-size: 11px; font-weight: 600;
}
.cc {
  display: inline-grid; place-items: center; width: 22px; height: 16px; border-radius: 2px; flex: none;
  background: var(--surface-2); color: var(--ink-2); font-size: 9px; font-weight: 600; letter-spacing: 0.02em;
}

/* ============================================================= key/value */
.kv { display: grid; }
.kv > div { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kv > div:last-child { border-bottom: 0; }
.kv dt, .kv .k { color: var(--ink-2); font-size: 14px; flex: 1; min-width: 0; }
.kv dd, .kv .v { margin: 0; text-align: right; color: var(--ink); font-weight: 500; }
.kv-total { border-top: 1px solid var(--line-2) !important; border-bottom: 0 !important; padding-top: 14px !important; }
.kv-total .k { color: var(--ink); font-weight: 500; }
.kv-total .v { font-size: 22px; font-weight: 600; letter-spacing: -0.014em; }

/* ================================================================ alerts
   A compact row, not a card. One line wherever possible.                  */
.callout {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-2);
  background: var(--surface); font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.callout svg { width: 16px; height: 16px; flex: none; stroke-width: 1.6; margin-top: 2px; color: var(--ink-3); }
.callout strong { color: var(--ink); font-weight: 500; }
.callout-ok svg { color: var(--ok); }
.callout-warn { background: #FEF9E7; color: #6B4A16; }
.callout-warn strong, .callout-warn svg { color: var(--warn); }
.callout-risk { background: #FFF4F3; color: #8A2A1C; }
.callout-risk strong, .callout-risk svg { color: var(--risk); }

/* one attention row — the alternative to a large alert card */
.attention {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px;
}
.attention > svg { width: 16px; height: 16px; flex: none; color: var(--risk); stroke-width: 1.7; }
.attention .grow { flex: 1; min-width: 0; color: var(--ink-2); }
.attention strong { color: var(--ink); font-weight: 500; }

/* =============================================================== counter */
.denoms { display: grid; }
.denom-row {
  display: grid; grid-template-columns: 96px 1fr 76px 112px; gap: 16px; align-items: center;
  height: 52px; border-bottom: 1px solid var(--line);
}
.denom-row:last-child { border-bottom: 0; }
.denom-row .input { height: 36px; text-align: right; }
.denom-row.lbl { height: 34px; }
.meter { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.meter > i { display: block; height: 100%; background: #2B2F33; border-radius: 2px; transition: width 240ms var(--ease); }
.meter-ok > i { background: var(--primary); }
.meter-warn > i { background: var(--coral); }
.meter-risk > i { background: var(--coral-red); }
.rank-list { border-top: 1px solid var(--line); }
.rank-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 42px; border-bottom: 1px solid var(--line);
}
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pad button {
  height: 48px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg);
  font-size: 16px; font-weight: 500; cursor: pointer;
}
.pad button:hover { background: var(--surface); }

/* ============================================================ rate board
   Deliberately its own world: a screen on a wall, read from three metres. */
.board { background: var(--board-bg); color: var(--board-ink); border-radius: var(--r-4); padding: 28px 32px 32px; }
.board-head { display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--board-line); padding-bottom: 18px; flex-wrap: wrap; }
.board-head h2 { font-size: 22px; color: var(--board-ink); }
.board-head .lbl { color: var(--board-ink-2); }
.board thead th {
  background: none; color: var(--board-ink-2); border-bottom-color: var(--board-line);
  position: static; font-size: 12px; padding-top: 18px;
}
.board tbody td { border-bottom: 1px solid var(--board-line); height: 48px; color: var(--board-ink); }
.board tbody tr:hover { background: rgba(255,255,255,0.03); }
.board .cc { background: rgba(255,255,255,0.10); color: var(--board-ink); }
.board .t-sub { color: var(--board-ink-2); }
.board .b-buy { color: #B9AEFF; }
.board .b-sell { color: var(--coral); }
.board-figure { font-size: 20px; font-weight: 600; letter-spacing: -0.012em; }

/* ============================================================== overlays */
dialog {
  border: 0; border-radius: var(--r-4); padding: 0; background: var(--bg); color: var(--ink-body);
  box-shadow: var(--shadow-pop); max-width: min(560px, calc(100vw - 32px)); width: 100%;
}
dialog::backdrop { background: rgba(20, 23, 26, 0.4); }
dialog .panel-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
dialog .panel-body { padding: 20px 24px; }
dialog .panel-foot { padding: 16px 24px; border-top: 1px solid var(--line); background: var(--surface); }

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(600px, 100%); background: var(--bg);
  box-shadow: var(--shadow-pop); z-index: var(--z-drawer);
  display: flex; flex-direction: column; animation: slide 240ms var(--ease);
}
@keyframes slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer .panel-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.drawer-body { overflow-y: auto; padding: 20px 24px; flex: 1; }
.drawer .panel-foot { padding: 16px 24px; border-top: 1px solid var(--line); background: var(--surface); }
.scrim { position: fixed; inset: 0; background: rgba(20, 23, 26, 0.24); z-index: var(--z-drawer); }

/* ---- AI assistant --------------------------------------------------------
   Copilot's grammar in the product's own colours: one gradient, the coral of
   the brand mark running into the violet accent, marks everything the
   assistant is or does, and nothing else in the app uses it. The panel sits
   beside the work on wide screens and becomes a sheet on small ones. */
:root { --ai: linear-gradient(135deg, #FF8E3C 0%, #FF4F42 38%, #E0529C 66%, #612FFF 100%); }

.ai-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--ai); color: #FFF; box-shadow: 0 4px 12px -4px rgba(255, 79, 66, .45);
}
.ai-avatar svg { width: 16px; height: 16px; }
.ai-avatar.sm { width: 24px; height: 24px; border-radius: 7px; box-shadow: none; }
.ai-avatar.sm svg { width: 14px; height: 14px; }
.ai-avatar.lg { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 12px 28px -10px rgba(97, 47, 255, .55), 0 6px 16px -8px rgba(255, 79, 66, .45); }
.ai-avatar.lg svg { width: 24px; height: 24px; }
.ai-avatar.busy { background-size: 220% 220%; animation: ai-shift 1.6s ease-in-out infinite; }
@keyframes ai-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.assistant-launch {
  position: fixed; right: 24px; bottom: 24px; z-index: calc(var(--z-drawer) - 1);
  height: 44px; padding: 0 16px 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; gap: 9px; background: var(--ink); color: #FFF;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 10px 28px -12px rgba(97, 47, 255, .55), 0 6px 16px -10px rgba(255, 79, 66, .45), 0 1px 2px rgba(20, 23, 26, .3);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
/* a thin gradient rim */
.assistant-launch::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--ai); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.assistant-launch:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -12px rgba(97, 47, 255, .7), 0 8px 18px -10px rgba(255, 79, 66, .55), 0 1px 2px rgba(20, 23, 26, .3);
}

.assistant {
  position: fixed; inset: 0 0 0 auto; z-index: calc(var(--z-drawer) + 1); width: min(420px, 100%);
  display: flex; flex-direction: column; box-shadow: var(--shadow-pop);
  /* a soft wash of the gradient across the top, fading into white */
  background-color: var(--bg);
  background-image:
    radial-gradient(90% 100% at 0% 0%, rgba(255, 142, 60, .12), transparent 70%),
    radial-gradient(90% 100% at 100% 0%, rgba(97, 47, 255, .11), transparent 70%);
  background-repeat: no-repeat; background-size: 100% 340px;
  transform: translateX(104%); visibility: hidden; transition: transform 220ms var(--ease), visibility 0s linear 220ms;
}
/* visible at once when opening, so the input can take focus immediately;
   hidden only after the slide-out when closing */
.assistant[aria-hidden='false'] { transform: none; visibility: visible; transition: transform 220ms var(--ease), visibility 0s; }
.assistant-open .assistant-launch { visibility: hidden; }
.assistant-head {
  min-height: 68px; padding: 14px 14px 14px 18px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(20, 23, 26, .06);
}
.assistant-head > div { flex: 1; min-width: 0; }
.assistant-head h2 { font-size: 15px; }
.assistant-head p { margin-top: 2px; color: var(--ink-2); font-size: 12px; }
.assistant-head .btn { width: 36px; padding: 0; }
.assistant-head .btn svg { width: 18px; height: 18px; }

.assistant-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 18px 12px; }

.assistant-empty { max-width: 340px; margin: 6vh auto 0; }
.assistant-empty h3 { margin-top: 18px; font-size: 20px; letter-spacing: -0.015em; }
.assistant-empty > p { margin-top: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.assistant-suggestions { display: grid; gap: 8px; margin-top: 22px; }
/* a hairline border that turns into the gradient on hover */
.assistant-suggestions button {
  display: flex; align-items: center; gap: 11px; min-height: 50px; padding: 8px 10px 8px 8px;
  text-align: left; cursor: pointer; color: var(--ink); font-size: 13.5px;
  border: 1px solid transparent; border-radius: 12px;
  background: linear-gradient(#FFF, #FFF) padding-box, linear-gradient(rgba(20, 23, 26, .10), rgba(20, 23, 26, .10)) border-box;
  box-shadow: 0 1px 2px rgba(20, 23, 26, .04);
  transition: box-shadow 160ms var(--ease);
}
.assistant-suggestions button:hover {
  background: linear-gradient(#FFF, #FFF) padding-box, var(--ai) border-box;
  box-shadow: 0 8px 20px -10px rgba(97, 47, 255, .40);
}
.assistant-suggestions button > span:nth-child(2) { flex: 1; min-width: 0; }
.ai-go { width: 16px; height: 16px; color: var(--primary); opacity: 0; transform: translateX(-4px); transition: opacity 160ms ease, transform 160ms var(--ease); }
.assistant-suggestions button:hover .ai-go { opacity: 1; transform: none; }

.ai-tile { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; }
.ai-tile svg { width: 17px; height: 17px; stroke-width: 1.7; }
.ai-tile.coral  { background: #FFF0E6; color: #C84F14; }
.ai-tile.violet { background: #F0EFFF; color: #612FFF; }
.ai-tile.pink   { background: #FDEBF4; color: #B82F76; }
.ai-tile.amber  { background: #FFF4D6; color: #9A6100; }

.assistant-message { margin-bottom: 18px; }
.assistant-message p { white-space: pre-wrap; line-height: 1.6; font-size: 14px; color: var(--ink); }
.assistant-message.reply { display: flex; align-items: flex-start; gap: 10px; }
.assistant-message.reply .ai-avatar { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; margin-top: 1px; }
.assistant-message.reply .ai-avatar svg { width: 14px; height: 14px; }
.assistant-message.reply > div { flex: 1; min-width: 0; }
.assistant-who { display: block; margin-bottom: 3px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.assistant-message.user { display: flex; justify-content: flex-end; }
.assistant-message.user p {
  max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  background: linear-gradient(135deg, #F2EFFF, #FFF0E8); box-shadow: inset 0 0 0 1px rgba(97, 47, 255, .08);
}

.assistant-thinking { display: flex; align-items: center; gap: 9px; color: var(--ink-2); }
.ai-dots { display: inline-flex; gap: 4px; }
.ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: #FF8E3C; animation: ai-dot 1s ease-in-out infinite; }
.ai-dots i:nth-child(2) { background: #E0529C; animation-delay: .15s; }
.ai-dots i:nth-child(3) { background: #612FFF; animation-delay: .3s; }
@keyframes ai-dot { 0%, 80%, 100% { transform: none; opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }

.assistant-followups { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px 36px; }
.assistant-followups button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; cursor: pointer;
  border: 1px solid rgba(97, 47, 255, .20); border-radius: 999px; background: #FFF; color: var(--ink); font-size: 12.5px;
  transition: background 140ms ease, border-color 140ms ease;
}
.assistant-followups button svg { width: 14px; height: 14px; color: var(--primary); }
.assistant-followups button:hover { background: var(--primary-wash); border-color: rgba(97, 47, 255, .40); }

.assistant-compose { padding: 10px 14px 12px; }
.assistant-box {
  position: relative; border: 1.5px solid transparent; border-radius: 16px;
  background: linear-gradient(#FFF, #FFF) padding-box, linear-gradient(rgba(20, 23, 26, .12), rgba(20, 23, 26, .12)) border-box;
  box-shadow: 0 4px 16px -10px rgba(20, 23, 26, .18);
  transition: box-shadow 160ms var(--ease);
}
.assistant-box:focus-within {
  background: linear-gradient(#FFF, #FFF) padding-box, var(--ai) border-box;
  box-shadow: 0 10px 26px -12px rgba(97, 47, 255, .45), 0 6px 16px -10px rgba(255, 79, 66, .35);
}
.assistant-box textarea {
  display: block; width: 100%; min-height: 52px; max-height: 132px; resize: none; padding: 15px 52px 15px 15px;
  border: 0; border-radius: 14px; background: transparent; font-size: 14px; line-height: 22px;
}
.assistant-box textarea:focus { outline: none; }
.assistant-box button {
  position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px;
  display: grid; place-items: center; cursor: pointer; background: var(--surface-2); color: var(--ink-3);
  transition: background 160ms ease, color 160ms ease, transform 160ms var(--ease);
}
.assistant-box button svg { width: 17px; height: 17px; }
.assistant-box.has-text button { background: var(--ai); color: #FFF; box-shadow: 0 6px 14px -6px rgba(97, 47, 255, .6); }
.assistant-box.has-text button:hover { transform: translateY(-1px); }
.assistant-box button:disabled { opacity: .5; cursor: wait; }
.assistant-compose > p { margin-top: 8px; color: var(--ink-3); font-size: 11px; text-align: center; }
.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; }

@media (min-width: 1440px) {
  body.assistant-open .app { margin-right: 420px; }
  .app { transition: margin-right 220ms var(--ease); }
}
@media (max-width: 760px) {
  /* a round button on phones, so it covers as little of the page as possible */
  .assistant-launch { right: 14px; bottom: 76px; width: 48px; height: 48px; padding: 0; justify-content: center; }
  .assistant-launch-label { display: none; }
  .assistant-launch .ai-avatar.sm { width: 28px; height: 28px; border-radius: 8px; }
  .assistant { bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-avatar.busy, .ai-dots i { animation: none; }
  .assistant-launch, .assistant-suggestions button, .ai-go, .assistant-box button { transition: none; }
}

.toasts { position: fixed; bottom: 24px; left: 50%; translate: -50% 0; z-index: var(--z-toast); display: grid; gap: 8px; justify-items: center; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--r-2);
  background: var(--ink); color: #FFF; font-size: 14px; box-shadow: var(--shadow-pop);
  animation: rise 240ms var(--ease);
}
.toast svg { width: 16px; height: 16px; stroke-width: 1.8; color: var(--coral); }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ================================================================== misc */
.spark { display: block; width: 100%; height: 28px; overflow: visible; }
.empty { padding: 56px 24px; text-align: center; color: var(--ink-2); }
.empty h3 { margin-bottom: 6px; color: var(--ink); }
.demo-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.demo-note svg { width: 14px; height: 14px; stroke-width: 1.7; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
@media print { .rail, .head-actions, .tabs { display: none; } .main { padding: 0; } }


/* ==========================================================================
   Auth pages (sign in, verification code)
   Archetype taken from the shipped auth CSS of Stripe, Increase and Mercury:
   a centred form column on the SAME pure-white ground as the workspace, with
   no card chrome at all — Stripe's auth "card" declares only position and
   flex-shrink, no background, border, radius or shadow. A card floating on
   tinted grey is the dated form. The logo is left-aligned to the column, not
   centred. The accent does not go on the button here either.
   ========================================================================== */
.auth { background: var(--bg); }
.auth-col {
  width: 440px; max-width: 100%; margin: 96px auto 64px; padding: 32px;
  border: 1px solid rgba(20, 23, 26, .08); border-radius: 18px; background: var(--bg);
  box-shadow: 0 28px 80px rgba(31, 35, 38, .10);
  animation: auth-card-in 620ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; text-decoration: none; }
.auth-logo:hover { text-decoration: none; }
.auth-logo .brand-mark { width: 28px; height: 28px; font-size: 11px; }
.auth-logo span { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.auth-progress {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px;
  border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 12px; font-weight: 500;
}
.auth-progress span { position: relative; padding-bottom: 10px; }
.auth-progress span::after {
  content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px;
  background: var(--primary); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms cubic-bezier(.16, 1, .3, 1);
}
.auth-progress span[aria-current='step'] { color: var(--ink); }
.auth-progress span[aria-current='step']::after { transform: scaleX(1); }
.auth-stage { animation: auth-stage-in 440ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes auth-stage-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}
/* Auth headings are quieter than the app's 40px page titles, and getting
   quieter still — Stripe's newest auth heading is 22px/400. */
.auth h1 { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.2px; }
.auth-sub { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.auth-form { margin-top: 24px; display: grid; gap: 16px; }
.auth-form .input { border-color: var(--line-2); }
.auth-pw { position: relative; }
.auth-pw .input { padding-right: 44px; }
.auth-reveal {
  position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border: 0; padding: 0;
  background: none; color: var(--ink-3); cursor: pointer; border-radius: var(--r-1);
  display: grid; place-items: center;
}
.auth-reveal:hover { color: var(--ink); background: var(--surface); }
.auth-forgot { margin-top: -4px; text-align: right; font-size: 13px; }
.auth-form .btn-primary { transition: transform 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease); }
.auth-form .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20, 23, 26, .16); }
.auth-form .btn-primary:active { transform: translateY(1px) scale(.99); }
.auth-error {
  display: flex; gap: 8px; margin-top: 24px; padding: 10px 12px; border-radius: var(--r-2);
  background: #FFF4F3; color: #8A2A1C; font-size: 13px; line-height: 1.5;
}
.auth-error svg { color: var(--risk); margin-top: 1px; }
.auth-note { margin-top: 24px; font-size: 13px; color: var(--ink-2); }

/* verification code — 6 discrete boxes, 3+3 grouping */
.otp { display: flex; gap: 8px; margin-top: 24px; }
.otp .otp-sep { width: 12px; flex: none; }
.otp input {
  width: 44px; height: 48px; flex: none; text-align: center; padding: 0;
  font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--bg);
}
.otp input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(97, 47, 255, 0.18);
}
.otp[aria-busy='true'] { opacity: 0.6; pointer-events: none; }
.auth-resend { margin-top: 20px; font-size: 13px; }
.auth-resend .dim { color: var(--ink-3); }
.auth-alt { margin-top: 16px; display: grid; gap: 8px; font-size: 13px; justify-items: start; }
.auth-back {
  margin-top: 16px; border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px;
}
.auth-back:hover { color: var(--ink); }

.auth-foot {
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line);
  display: grid; gap: 10px; font-size: 12px; line-height: 18px; color: var(--ink-2);
}
.auth-foot strong { color: var(--ink); font-weight: 500; }
.auth-links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.auth-links > span:first-child { color: var(--ink); font-weight: 500; }
.auth-links a { color: var(--ink-2); }
.auth-links a:hover { color: var(--primary); }
.auth-lang { margin-left: auto; display: flex; gap: 2px; }
.auth-lang button {
  border: 0; background: none; cursor: pointer; padding: 3px 7px; border-radius: var(--r-1);
  font-size: 12px; font-weight: 500; color: var(--ink-3);
}
.auth-lang button:hover { color: var(--ink); }
.auth-lang button[aria-pressed='true'] { background: var(--surface-2); color: var(--ink); }
.auth-demo { color: var(--ink-3); }

@media (max-width: 480px) {
  .auth-col { margin-top: 0; }
  .otp input { width: 42px; height: 48px; }
  .otp { gap: 6px; }
  .otp .otp-sep { width: 8px; }
}


/* Split auth layout. The dark half shows the product's own live rate data;
   the light half is reserved for authentication. */
.auth-split { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
.auth-pane {
  grid-area: pane; display: flex; justify-content: center; align-items: center;
  padding: 48px 40px; min-width: 0; background: #F4F5F6;
}
.auth-pane .auth-col { margin: 0; }

.auth-board {
  grid-area: board; display: none; position: relative; overflow: hidden;
  background: #17191B; color: var(--board-ink); padding: 52px clamp(40px, 5vw, 80px) 24px;
  flex-direction: column; min-width: 0;
}
.auth-board::before {
  content: ""; position: absolute; inset: -8%; pointer-events: none;
  background:
    radial-gradient(circle at 82% 22%, rgba(255, 142, 60, .10), transparent 26%),
    linear-gradient(145deg, transparent 56%, rgba(255, 255, 255, .025));
  animation: board-drift 18s ease-in-out infinite alternate;
}
@keyframes board-drift {
  from { opacity: .7; transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { opacity: 1; transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}
.auth-board > * { position: relative; }
.auth-board-brand { display: flex; align-items: center; gap: 12px; }
.auth-board-brand .brand-mark { width: 34px; height: 34px; position: relative; }
.auth-board-brand .brand-mark::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255, 142, 60, .42); border-left-color: transparent; border-bottom-color: transparent;
  animation: brand-orbit 10s linear infinite;
}
@keyframes brand-orbit { to { transform: rotate(360deg); } }
.auth-board-brand strong { display: block; color: var(--board-ink); font-size: 15px; font-weight: 600; }
.auth-board-brand small { display: block; color: var(--board-ink-2); font-size: 11px; margin-top: 1px; }
.auth-board-copy { margin: clamp(64px, 10vh, 104px) 0 40px; max-width: 560px; }
.auth-board-copy h2 {
  max-width: 12ch; color: var(--board-ink); font-size: clamp(38px, 4.3vw, 66px);
  line-height: 1.02; letter-spacing: -.035em;
}
.auth-board-copy p { margin-top: 20px; max-width: 48ch; color: #B8BDC5; font-size: 16px; line-height: 1.65; }
.auth-board-rates {
  margin-top: auto; max-width: 620px; padding: 20px 22px 18px;
  border: 1px solid var(--board-line); border-radius: var(--r-3);
  background: rgba(255, 255, 255, .025);
}
@media (min-width: 1024px) {
  .auth-split {
    grid-template-columns: minmax(520px, 1.05fr) minmax(460px, .95fr);
    grid-template-areas: "board pane";
  }
  .auth-board { display: flex; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .auth-board { padding-top: 32px; padding-bottom: 16px; }
  .auth-board-copy { margin: 36px 0 24px; }
  .auth-board-copy h2 { font-size: clamp(36px, 4vw, 50px); }
  .auth-board-copy p { margin-top: 14px; font-size: 14px; }
  .auth-board-rates { padding: 14px 18px 12px; }
  .auth-board td { height: 32px; }
  .auth-board-foot { margin-top: 10px; line-height: 1.35; }
}
.auth-board-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--board-line); }
.auth-board-head h3 { font-size: 14px; font-weight: 500; color: var(--board-ink); letter-spacing: 0; }
.auth-board-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--board-ink-2); }
.auth-board-live i {
  width: 6px; height: 6px; border-radius: 50%; background: #3FCF8E; flex: none;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.auth-board table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
/* The app's thead rule paints a sticky white header; on the dark board that
   renders as a white band across the panel. Override both. */
.auth-board thead th {
  text-align: left; font-size: 11px; font-weight: 500; color: var(--board-ink-2);
  padding: 12px 0 8px; border-bottom: 1px solid var(--board-line);
  background: none; position: static;
}
.auth-board table { table-layout: fixed; }
.auth-board th:nth-child(1), .auth-board td:nth-child(1) { width: 22%; }
.auth-board th:nth-child(2), .auth-board td:nth-child(2) { width: 34%; }
.auth-board th.r, .auth-board td.r { text-align: right; }
.auth-board td { padding: 0; height: 38px; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--board-ink); font-size: 13px; }
.auth-board .b-buy { color: #B9AEFF; font-weight: 500; }
.auth-board .b-sell { color: var(--coral); font-weight: 500; }
/* a rate that just moved lifts briefly, the way a dealing board reads */
.auth-board .tick { animation: tick 900ms var(--ease); }
@keyframes tick { 0% { opacity: .35; transform: translateY(-2px); } 100% { opacity: 1; transform: none; } }
.auth-board-foot { margin-top: 14px; font-size: 11px; color: var(--board-ink-2); line-height: 1.5; }

.auth-rise { animation: none; }

/* Stripe's evidenced failure shake — the one animation real auth pages ship */
.auth-shake { animation: authshake 600ms ease both; }
@keyframes authshake {
  10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-board::before, .auth-board-brand .brand-mark::after,
  .auth-board-live i, .auth-board .tick, .auth-col, .auth-stage, .auth-rise, .auth-shake { animation: none !important; }
  .auth-progress span::after { transition: none; }
}
@media (max-width: 1023px) {
  .auth-split { grid-template-areas: "pane"; }
  .auth-pane { min-height: 100dvh; }
}
@media (max-width: 480px) {
  .auth-pane { padding: 40px 16px 48px; align-items: flex-start; background: var(--bg); }
  .auth-col { width: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
}

/* ============================================ settlement-console additions
   Domain classes layered on the Counter & Vault system: hierarchy indent,
   platform tag, utilisation meter cell, statement stepper, activity log,
   snapshot rows. Everything else reuses the base system above.            */
.plat{display:inline-grid;place-items:center;height:16px;min-width:24px;padding:0 5px;border-radius:2px;background:var(--surface-2);color:var(--ink-2);font-size:9px;font-weight:600;letter-spacing:.03em;flex:none}
.tag{font-size:10px;font-weight:600;letter-spacing:.04em;padding:2px 6px;border-radius:var(--r-1);color:var(--ink-2);background:var(--surface-2);white-space:nowrap}
.tag-boss{background:var(--primary-wash);color:var(--pend)}
.i1 .k-name{padding-left:24px} .i2 .k-name{padding-left:48px}
.util{display:flex;align-items:center;gap:10px;min-width:118px}
.util .meter{flex:1} .util .n{font-variant-numeric:tabular-nums;color:var(--ink-2);width:34px;text-align:right;font-size:13px}
.steps{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.steps::-webkit-scrollbar{display:none}
.step{flex:none;display:flex;align-items:center;gap:8px;padding:0 14px 12px;font-size:13px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.step .n{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:600;background:var(--surface-3);color:var(--ink-3)}
.step.done{color:var(--ink-2)} .step.done .n{background:var(--ink);color:#fff}
.step.current{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)} .step.current .n{background:var(--primary);color:#fff}
.log{display:grid}
.log>div{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.log>div:last-child{border-bottom:0}
.log time{color:var(--ink-3);width:120px;flex:none;font-variant-numeric:tabular-nums}
.log b{color:var(--ink);font-weight:500}
.snap-row{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.snap-row:last-child{border-bottom:0}
.snap-row .k{color:var(--ink-2);width:150px;flex:none;font-size:13px}
.snap-row .v{color:var(--ink);font-weight:500;min-width:0}
.rank-row{padding:0 0} .rank-row .cc{margin-right:2px}
@media (max-width:600px){ .snap-row .k{width:112px} }

/* ------------------------------------------------ printable PDF statement */
#print-doc { display: none; }
@media print {
  .app, .toasts, dialog { display: none !important; }
  #print-doc { display: block !important; }
  @page { margin: 16mm; }
}
.pdoc { font-family: var(--sans); color: #14171A; max-width: 660px; margin: 0 auto; }
.pdoc .phead { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #14171A; padding-bottom: 12px; margin-bottom: 18px; }
.pdoc h2 { font-size: 22px; margin: 0; }
.pdoc .psub { color: #565E68; font-size: 13px; margin-top: 3px; }
.pdoc .pmeta { text-align: right; font-family: var(--mono); font-size: 12px; color: #565E68; line-height: 1.5; }
.pdoc .pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-bottom: 20px; }
.pdoc .pgrid span { display: block; font-size: 11px; color: #68707A; }
.pdoc .pgrid b { font-weight: 600; }
.pdoc .ptable { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.pdoc .ptable td { padding: 9px 0; border-bottom: 1px solid #E8EAED; font-size: 14px; }
.pdoc .ptable .r { text-align: right; font-variant-numeric: tabular-nums; }
.pdoc .ptable tfoot td { border-top: 2px solid #14171A; border-bottom: 0; font-weight: 600; font-size: 16px; padding-top: 12px; }
.pdoc .neg { color: #801302; }
.pdoc .pfx { font-size: 13px; color: #565E68; margin-top: 4px; }
.pdoc .pfoot { margin-top: 22px; font-size: 12px; color: #68707A; border-top: 1px solid #E8EAED; padding-top: 12px; line-height: 1.5; }

/* statement kv sub-caption on its own line */
.kv .k small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; margin-top: 1px; }

/* ------------------------------------------------------------- login shell */
.loginwrap { position: fixed; inset: 0; background: var(--surface); display: grid; place-items: center; z-index: 100; padding: 24px; }
.loginwrap[hidden] { display: none !important; }
.logincard { background: var(--bg); border-radius: var(--r-4); box-shadow: var(--shadow-pop); padding: 30px; width: 100%; max-width: 360px; }

/* AM888 brand mark */
.brand-mark { background: linear-gradient(140deg, #B8863C, #E6C87F) !important; color: #16223F !important; }

/* ================================================ compact collapsible sidebar */
.nav a { height: 33px; font-size: 13px; gap: 9px; padding: 0 10px; }
.nav a svg { width: 16px; height: 16px; }
.nav a .badge { margin-left: auto; }
.nav-sec { display: flex; flex-direction: column; }
.nav-group {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--rail-ink-3); font-size: 11px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; padding: 11px 10px 5px;
  transition: color 120ms var(--ease);
}
.nav-group:hover { color: var(--rail-ink-2); }
.nav-group .chev { width: 12px; height: 12px; transition: transform 160ms var(--ease); opacity: .7; }
.nav-sec.open .nav-group .chev { transform: rotate(90deg); }
.nav-items { display: none; padding-bottom: 4px; }
.nav-sec.open .nav-items { display: block; }
.nav-note { font-size: 10.5px; color: var(--rail-ink-3); padding: 14px 10px 6px; }

/* mobile top bar (hidden on desktop) */
.topbar { display: none; }
.tb-mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(140deg, #B8863C, #E6C87F); color: #16223F; display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; }
#navscrim { display: none; }

/* ------------------------------------------------- mobile: rail becomes a drawer */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .topbar {
    display: flex; align-items: center; gap: 12px; position: sticky; z-index: 40;
    top: env(safe-area-inset-top, 0px);
    background: var(--rail-bg); color: var(--rail-ink);
    padding: 12px 16px; margin: 0 -16px 8px;
  }
  .topbar .burger { background: none; border: 0; color: var(--rail-ink); width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; }
  .rail {
    position: fixed; inset: 0 auto 0 0; width: 264px; max-width: 84vw; height: 100dvh;
    flex-direction: column; transform: translateX(-100%);
    transition: transform 220ms var(--ease); z-index: 60; overflow: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,.4);
  }
  .rail.open { transform: translateX(0); }
  .brand { display: flex; }
  .nav { flex-direction: column; overflow-y: auto; padding: 8px; -webkit-mask-image: none; mask-image: none; }
  .nav a { flex: none; justify-content: flex-start; padding: 0 10px; }
  .rail-foot { display: grid; }
  #navscrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease); }
  #navscrim.show { opacity: 1; pointer-events: auto; }
  .main { padding: 0 16px 48px; }
  .page-head { padding-top: 8px; }
  .head-actions { width: 100%; }
  h1 { font-size: 24px; }
  /* stacked panels get room */
  .split { grid-template-columns: 1fr; }
}

/* drawer shows full labels (override the tablet icon-rail collapse) */
@media (max-width: 820px) {
  :root { --rail: 264px; }
  .nav a span, .nav a .badge { display: inline-flex; }
  .brand-text { display: block; }
  .switcher-text, .switcher-text span { display: block; }
  .nav a { justify-content: flex-start; padding: 0 10px; }
  .brand { justify-content: flex-start; padding: 0 14px; }
}