:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: #0b0e14; color: #e6e9ef;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
}
a { color: #8ab4f8; text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.muted { color: #8b94a7; }
.warn { color: #e8a33d; }
.error { color: #f07178; }
[hidden] { display: none !important; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid #1c2230; background: #0f131c; position: sticky; top: 0; z-index: 5;
}
.topbar-plain { justify-content: flex-end; border-bottom: none; background: transparent; position: static; }
.topbar nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar nav a.active { color: #fff; font-weight: 600; }
.brand { font-weight: 600; }
/* Primary navigation: a fixed left sidebar on a wide screen, a collapsible menu on a narrow one. */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nav-toggle-label { display: none; }
@media (min-width: 900px) {
  .topbar.sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 220px; flex-direction: column; align-items: stretch;
    justify-content: flex-start; flex-wrap: nowrap; padding: 16px 14px; border-bottom: none; border-right: 1px solid #1c2230;
    overflow-y: auto; }
  .topbar.sidebar nav { flex-direction: column; align-items: stretch; gap: 4px; }
  .topbar.sidebar .nav-toggle { display: none; }
  .topbar.sidebar nav a { padding: 7px 10px; border-radius: 6px; }
  .topbar.sidebar nav a.active { background: #1c2436; }
  .topbar.sidebar nav .who { padding: 10px 10px 4px; font-size: 13px; overflow-wrap: anywhere; }
  .topbar.sidebar nav .lang { align-self: flex-start; margin: 4px 10px; }
  .topbar.sidebar .tagline { display: block; font-size: 12px; }
  body:has(> .topbar.sidebar) > main, body:has(> .topbar.sidebar) > .page { margin-left: 220px; }
  /* .stack is width:100% + max-width:1180px; with the 220px sidebar margin that overflowed the viewport. */
  body[data-page="deposit"]:has(> .topbar.sidebar) > main.stack { width: calc(100% - 220px); }
}
@media (max-width: 899px) {
  .topbar.sidebar { flex-wrap: wrap; }
  .topbar.sidebar .nav-toggle-label { display: inline-flex; }
  .topbar.sidebar nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; }
  .topbar.sidebar nav a { padding: 8px 4px; }
  .topbar.sidebar .nav-toggle:checked ~ nav { display: flex; }
  .topbar.sidebar .nav-toggle:focus-visible + .nav-toggle-label { outline: 2px solid #8ab4f8; outline-offset: 2px; }
}
.lang { padding: 3px 10px; border: 1px solid #2a3244; border-radius: 999px; font-size: 13px; }

.center { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 60px); padding: 16px; }
.stack { max-width: 1180px; margin: 0 auto; padding: 16px; display: grid; gap: 14px; width: 100%;
  grid-template-columns: minmax(0, 1fr); }
.stack > * { min-width: 0; }
/* The admin tables (flags, users, audit) are wide; give that page more of a big screen. */
body[data-page="admin"] .stack { max-width: 1600px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; flex-wrap: wrap; }

.card { width: 100%; min-width: 0; padding: 18px; border: 1px solid #222836; border-radius: 12px; background: #111622; }
.card.login { max-width: 400px; text-align: center; padding: 28px; }
.card h1 { font-size: 20px; margin: 0 0 4px; }
.card h2 { font-size: 17px; margin: 0 0 10px; }
.card h3 { font-size: 15px; margin: 0 0 8px; }
.msg { color: #e8a33d; }
.rules { margin: 4px 0; padding-left: 4px; list-style: none; }
.notice { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: #16202f; color: #b9c3d6; font-size: 13px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.banner { padding: 10px 12px; border-radius: 8px; background: #16202f; }
.banner.error { background: #2a1519; color: #f5a3aa; }
.banner.warn { background: #2a2115; color: #f0c27a; }
.banner.ok { background: #132a1c; color: #8fdca9; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px;
  border-radius: 8px; border: 1px solid #2a3244; background: #182032; color: #e6e9ef; font: inherit; cursor: pointer;
}
.btn:hover { background: #1f2940; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.loading::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .5em; vertical-align: -.15em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .8s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.loading::after { animation-duration: 2.4s; } }
.btn.primary { background: #2f5bd3; border-color: #2f5bd3; color: #fff; }
.btn.tiny { padding: 2px 8px; font-size: 12px; }
.btn.google { background: #fff; color: #1f2430; font-weight: 600; margin-top: 16px; width: 100%; }
.gicon { width: 18px; height: 18px; }

input, select, textarea {
  background: #0d121c; color: #e6e9ef; border: 1px solid #2a3244; border-radius: 8px; padding: 7px 9px; font: inherit;
  min-width: 0;
}
textarea { resize: vertical; }
/* Label / input / hint each get their own row so the inputs line up across a row even when only some
   fields carry a hint. `align-items: end` used to bottom-align the whole field, which pushed the input of
   a hinted field (UID) above its neighbours — visible as soon as the read-only form grew to five fields. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 10px;
  align-items: start; grid-auto-rows: auto; }
.form-grid h3 { grid-column: 1 / -1; }
.field { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 4px; font-size: 13px; }
@supports not (grid-template-rows: subgrid) {
  .form-grid { align-items: end; }
  .field { grid-row: auto; grid-template-rows: auto; }
}
.field small { font-size: 12px; }

/* Forms are a stack of labelled groups rather than one long auto-fill run, so the number of fields stops
   deciding the shape: 2, 3 or 5 inputs all read as deliberate instead of leaving orphans on the last row.
   Each group keeps its own .form-grid, so the label/input/hint subgrid still aligns within a group and the
   640px single-column rule below still applies. */
.form-stack { display: grid; gap: 14px; }
.field-group > h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: #9aa4b8; letter-spacing: .02em; }
/* A button is not a field: it never becomes a grid cell stretched to a 220px track. It stays inside the
   <form> (a type="submit" outside it would stop submitting) but out of the field grid. */
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
.form-grid > p, .form-grid > h4 { grid-column: 1 / -1; }
/* A value the key form owns: sits in the input's grid row so the subgrid stays aligned, but is not editable. */
.field .value { padding: 7px 0; color: #e6e9ef; font-variant-numeric: tabular-nums; word-break: break-all; }
label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
/* The global `input { min-width: 0 }` lets a long label squeeze its checkbox/radio to a few px; keep the native size. */
label.inline > input[type="checkbox"], label.inline > input[type="radio"] { flex: none; }
/* The consent sentence is the click target for the Approve / Save acknowledgement: at least 24px tall. */
label.pair-replace-ack { min-height: 24px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: #0d121c;
  border: 1px solid #222836; font-size: 13px; }
.chip.bad { border-color: #4a3520; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: #1c2436; color: #b9c3d6; }
.badge.stage-running { background: #133021; color: #8fdca9; }
.badge.stage-error { background: #3a1a1f; color: #f5a3aa; }
.badge.stage-unassigned { background: #22252d; color: #8b94a7; }
/* "this is a teammate's number, not yours" — deliberately a different hue from every stage badge */
.badge.shared { background: #1d2a3d; color: #8fbcdc; margin-left: 6px; }

.dot { font-size: 14px; }
.dot.on { color: #5fd08a; }
.dot.off { color: #59627a; }
.dot.unknown { color: #e8a33d; }

.table-wrap { overflow-x: auto; max-width: 100%; }
table.grid { border-collapse: collapse; width: 100%; font-size: 13px; }
table.grid td { overflow-wrap: anywhere; }
table.grid th, table.grid td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #1c2230; vertical-align: top; }
table.grid th { color: #8b94a7; font-weight: 500; white-space: nowrap; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tab { padding: 5px 12px; border-radius: 999px; border: 1px solid #2a3244; background: transparent; color: #e6e9ef; cursor: pointer; }
.tab.active { background: #2f5bd3; border-color: #2f5bd3; }
/* Selected but never submitted (see `pending` in renderDetail): a dashed amber outline, so it reads as
   "about to be" rather than "already is" one of this number's exchanges — never plain blue .active. */
.tab.pending { border-style: dashed; border-color: #d3902f; color: #d3902f; }
.tab.pending.active { background: #d3902f; border-color: #d3902f; color: #14171f; }

.entry-mode { margin: 4px 0; }
.wizard-steps { gap: 6px; margin: 8px 0; }
.wizard-step { padding: 6px 14px; border-radius: 8px; border: 1px solid #2a3244; background: transparent; color: #8b94a7; cursor: pointer; }
.wizard-step.done { color: #e6e9ef; border-color: #3a7d4f; }
.wizard-step.active { background: #2f5bd3; border-color: #2f5bd3; color: #fff; }
.wizard-exchange { font-weight: 600; border-left: 3px solid #d3902f; }
.wizard-nav { margin: 10px 0; gap: 8px; }

dialog.detail { width: min(1100px, 96vw); max-height: 92vh; padding: 0; border: 1px solid #222836; border-radius: 14px;
  background: #0b0e14; color: #e6e9ef; }
dialog.detail::backdrop { background: rgba(0, 0, 0, .6); }
dialog.detail.ask { width: min(520px, 94vw); }
.ask-body { padding: 14px 16px; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid #1c2230; position: sticky; top: 0; background: #0f131c; }

.vault-row { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid #1c2230; }
.revealed { padding: 3px 8px; background: #221a0d; border-radius: 6px; color: #ffd28a; user-select: all; }

.vpn-row { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid #1c2230; }
.vpn-uri { display: block; word-break: break-all; padding: 6px 8px; background: #0d121c; border-radius: 6px; user-select: all; }
.vpn-qr { width: 160px; height: 160px; padding: 6px; border-radius: 6px; background: #fff; }

.report { font-size: 13px; }
.result.ok { color: #8fdca9; font-weight: 600; }
.result.warn { color: #f0c27a; font-weight: 600; }
.result.fail { color: #f5a3aa; font-weight: 600; }
ul.checks, ul.writes { margin: 4px 0; padding-left: 18px; }
li.st-pass, li.st-ok { color: #8fdca9; }
li.st-fail { color: #f5a3aa; }
li.st-warn, li.st-unverified { color: #f0c27a; }

/* A refusal: the one thing the operator came back for, so it gets the weight instead of the pass list. */
.failure { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: #2a151a;
  border: 1px solid #5c2a32; border-left: 3px solid #f5a3aa; }
.failure p { margin: 0 0 4px; }
.failure p:last-child { margin-bottom: 0; }
.failure-step { color: #f5a3aa; font-weight: 600; }
.failure-why, .failure-do { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline;
  color: #e6e9ef; line-height: 1.45; }
.failure .tag { color: #9aa4b8; font-size: 12px; white-space: nowrap; }
/* A probe reason / remedy can run to a few sentences (Binance -2015): let it wrap inside the grid on a narrow screen. */
.failure-why > span:last-child, .failure-do > span:last-child { min-width: 0; overflow-wrap: break-word; }
/* Nothing was written is the reassuring half of a refusal — it should not read like a second error. */
.safe { color: #8fb8d6; margin: 6px 0; }
details.passes { margin: 6px 0; }
details.passes > summary { cursor: pointer; color: #8b94a7; font-size: 12px; }
details.passes ul.checks { margin-top: 4px; }
details.passes li { color: #7f8798; }
.pending::after { content: ""; display: inline-block; width: 6px; text-align: left; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.assign-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px; max-height: 320px;
  overflow-y: auto; margin: 8px 0; }
.assign-item { font-size: 13px; }

@media (max-width: 640px) {
  .who, .tagline { display: none; }
  .stack { padding: 10px; }
  .card { padding: 14px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Three-status summary: calm colours — ok / needs a look / not known or not started. */
.st-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; line-height: 1.6; }
.st-pill.ok { background: #133021; color: #8fdca9; }
.st-pill.attn { background: #33261a; color: #f0c27a; }
.st-pill.unk { background: #22252d; color: #9aa3b5; }
/* VPN line + needs-attention (VPN line vs exchange API, each with its next action). */
.vpn-line { margin: 6px 0; }
.attention { margin: 8px 0; padding: 8px 12px; border-left: 3px solid #f0c27a; background: #1f1b16; }
.attention ul { margin: 6px 0 0; padding-left: 18px; }
.attention li { margin: 4px 0; }
.badge.attn-kind { background: #33261a; color: #f0c27a; }
.mode-tag { display: inline-block; padding: 1px 9px; border-radius: 6px; font-size: 12px; border: 1px solid #2a3244; }
.mode-tag.manual { background: #1d2a3d; color: #8fbcdc; }
.mode-tag.api { background: #241d3d; color: #b9a6f0; }
.holder-tags { margin: 4px 0; gap: 6px; }
.holder-tag { display: inline-block; padding: 1px 9px; border-radius: 6px; font-size: 12px; border: 1px solid #2a3244; background: #1d2a3d; color: #8fbcdc; }
.holder-tag.unset { background: transparent; color: #8b94a7; border-style: dashed; }
.holder-section { margin: 8px 0; }
.mode-tag.unset { background: transparent; color: #8b94a7; border-style: dashed; }
table.status-grid tr.current td { background: #151c2b; }
details.more { margin: 8px 0; }
details.more > summary { cursor: pointer; color: #8b94a7; font-size: 13px; }
details.more[open] > summary { margin-bottom: 6px; }
details.vpn-fold > summary { cursor: pointer; font-weight: 600; color: #2f6fed; }
details.vpn-fold[open] > summary { margin-bottom: 8px; }
.status-summary { display: grid; gap: 8px; }
.perm-warning { background: #3a2d12; color: #f6d58f; border: 1px solid #d3902f; font-size: 14px; }
.outcome { margin: 8px 0; padding: 10px 12px; border-radius: 8px; font-size: 15px; font-weight: 600; }
.outcome.ok { background: #14301f; color: #8fdca9; border: 1px solid #2f7a4d; }
.outcome.fail { background: #3a1a1e; color: #f5a3aa; border: 1px solid #a8434d; }
.outcome.uid { background: #1c2436; color: #dfe6f5; border: 1px solid #3a4866; }
.outcome.warn { background: #3a2d12; color: #f6d58f; border: 1px solid #d3902f; }

/* wallets (M3b) */
.subnav { display: flex; gap: 14px; padding: 8px 20px; border-bottom: 1px solid #2a2f3a; }
.subnav a.active { font-weight: 600; text-decoration: underline; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

.deposit-address { overflow-wrap: anywhere; font-size: 1.1rem; }

.deposit-chain-warning { font-weight: 700; border: 2px solid #b45309; }
.deposit-qr { margin: 0; max-width: 400px; }
.deposit-qr img { display: block; width: 296px; height: auto; max-width: 100%; background: white; }
.deposit-qr figcaption { margin-top: 8px; font-weight: 700; }
/* /deposit funds check: a single column that never grows past the page. Its tables scroll inside their own
   .table-wrap, and a full 66-character tx hash wraps (with its copy button) instead of widening the page. */
.deposit-funds, .deposit-section { display: grid; gap: 10px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.deposit-funds > *, .deposit-section > * { min-width: 0; }
.deposit-funds h2, .deposit-funds h3, .deposit-funds p { overflow-wrap: anywhere; }
table.deposit-grid th[scope="row"] { white-space: normal; }
table.deposit-grid td.deposit-tx { min-width: 14ch; }
table.deposit-grid td.deposit-tx code { overflow-wrap: anywhere; word-break: break-all; }
/* /embed/deposit inside the Dashboard Live page's fixed-height frame: no sidebar, tighter spacing; the frame's own
   document scrolls, never the Dashboard page sideways. */
main.stack.embed { padding: 10px; gap: 10px; max-width: none; }
.embed-bar { justify-content: space-between; flex-wrap: wrap; overflow-wrap: anywhere; }
.embed .deposit-address-result { padding: 0; }
.embed .deposit-address-result > .btn { justify-self: start; }
.embed .deposit-qr img { width: 220px; }

/* BN paired intake: two fixed account panels side by side (master | sub-account), the UID review inline in the step. */
.pair-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 0; padding: 10px 14px; border-radius: 8px; background: #223557; }
.pair-overall.ok { color: #8fdca9; }
.pair-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 800px) { .pair-columns { grid-template-columns: 1fr; } }
.pair-account { min-width: 0; padding: 16px; border: 1px solid #3a4866; border-radius: 10px; }
.pair-account-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 10px; }
.pair-account-head h4 { margin: 0; }
.pair-who { margin: 2px 0 0; }
.pair-badge { white-space: nowrap; font-size: 12px; color: #a4b0c4; }
.pair-badge.ok { color: #8fdca9; }
.pair-badge.warn { color: #efc472; }
.pair-selector { margin-bottom: 12px; }
.pair-step { margin: 0; padding: 14px 0; border-top: 1px solid #303c50; }
.pair-step > h5 { margin: 0 0 6px; font-size: 13px; }
.pair-reason:empty, .pair-fb:empty, .pair-load:empty, .pair-uid:empty { display: none; }
.pair-reason { margin: 6px 0 0; }
.pair-uid { margin: 8px 0; padding: 10px 12px; border-radius: 7px; background: #161f2d; }
.uid-review { margin: 8px 0; padding: 10px 12px; border: 1px solid #3a4866; border-radius: 8px; }
.uid-who { font-size: 18px; }
.paired-intake p.ok { color: #8fdca9; }
.pair-live:empty, .uid-status:empty { display: none; }
.pair-live { margin: 8px 0; padding: 8px 10px; border-left: 3px solid #3a4866; }
.uid-status { margin: 8px 0; }
/* Ops account status: the two computed answers stand out; colour only repeats the text (never the only cue). */
body[data-page="account_status"] .stack { max-width: 1600px; }
.status-outputs { flex-wrap: wrap; align-items: stretch; }
.status-outputs .card { flex: 1 1 260px; display: grid; gap: 4px; }
.status-outputs strong { font-size: 22px; }
.status-yes { color: #8fdca9; }
.status-no { color: #f07178; }
.status-pending, .status-unknown { color: #e8a33d; }
/* Account inventory groups (the dashboard Account Picker's verdict): in use is NORMAL, not a fault. */
.status-g-selectable { color: #8fdca9; }
.status-g-occupied { color: #8fb8e8; }
.status-g-attention { color: #e8a33d; }
.status-g-retired, .status-g-unknown { color: #a4b0c4; }
.status-g-rfi { color: #f5a3aa; }
.status-g-pending_retirement { color: #c3b1ee; }
.status-facets { flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.status-facets select { max-width: 220px; }
/* Multi-select filters: a native <details> per filter (the closed line states the selection); an open one takes the full row, so
   the same layout serves a phone. The option list scrolls instead of growing with the roster. */
.status-facet { flex: 0 1 240px; min-width: 0; border: 1px solid #2a3244; border-radius: 6px; padding: 4px 8px; }
.status-facet[open] { flex-basis: 100%; }
.status-facet > summary { cursor: pointer; font-size: 13px; overflow-wrap: anywhere; }
.status-facet.active { border-color: #2f5bd3; }
.status-facet.not { border-color: #d3902f; border-style: dashed; }
.status-facet-body { display: grid; gap: 6px; margin-top: 6px; }
.status-facet-mode { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; border: 0; font-size: 13px; }
.status-facet-mode legend { padding: 0; color: #8b94a7; font-size: 12px; }
.status-facet-opts { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; }
.status-facet-opts label, .status-facet-mode label { display: flex; gap: 6px; align-items: baseline; font-size: 13px; cursor: pointer; }
.status-facet-opts input, .status-facet-mode input { width: 16px; height: 16px; flex: none; padding: 0; }
.status-facet-opts label, .status-facet-mode label { min-height: 24px; align-items: center; }
.status-pager { gap: 8px 10px; margin: 6px 0; }
.status-pager label { font-size: 13px; margin-left: auto; }
.status-pager select { width: auto; }
.status-outputs button.card { text-align: left; cursor: pointer; }
.status-outputs button.card.active { outline: 2px solid currentColor; }
.status-outputs button.card.excluded { outline-style: dashed; }
.status-reasons { display: grid; gap: 4px; }
.status-reasons p { margin: 0; font-size: 12px; }
.status-reason-chips { gap: 6px; }
.status-reason[aria-pressed="true"] { background: #2f5bd3; border-color: #2f5bd3; color: #fff; }
.status-reason.excluded[aria-pressed="true"] { background: #7a4a12; border-color: #d3902f; }
.status-invert[aria-pressed="true"] { background: #7a4a12; border-color: #d3902f; color: #fff; }
/* Table: the main reason first, then every other reason as small text; a reason chosen in the filter is marked and bold. */
.status-reason-more { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 12px; }
.status-hit { font-weight: 700; color: #e6edf8; }
.status-trader-api { font-style: italic; }
table.grid td.status-person { white-space: nowrap; overflow-wrap: normal; }   /* a name is not split mid-word on a phone; the table scrolls instead */
/* A timer re-render replaces the list under the person's focus; the browser's scroll anchoring would otherwise jump the page to keep the
   removed node's position. The re-render restores the focus itself (without scrolling). */
body[data-page="account_status"], body[data-page="account_status"] #root, body[data-page="account_status"] #root * { overflow-anchor: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.status-trader-unassigned { color: #e8a33d; }

/* Short labels keep their words together; long reasons still wrap and the table can scroll. */
.status-list th, .status-list td.status-nowrap, .status-list .status-nowrap { white-space: nowrap; overflow-wrap: normal; }
.status-list .status-reason-cell { min-width: 320px; max-width: 600px; overflow-wrap: anywhere; }
.status-problem-attention, .status-reason.status-problem-attention[aria-pressed="true"] { color: #e8a33d; }
.status-problem-rfi, .status-reason.status-problem-rfi[aria-pressed="true"] { color: #f5a3aa; }
.status-hit { color: inherit; }
.status-hold-trigger { border: 0; background: none; color: #a4b0c4; padding: 2px 0; font: inherit; text-align: left; cursor: help; }
.status-hold-trigger:hover, .status-hold-trigger:focus-visible { color: #e6edf8; text-decoration: underline dotted; }
.status-hold-popover { position: fixed; z-index: 90; max-height: min(440px, calc(100vh - 24px)); overflow: auto;
  box-sizing: border-box; padding: 14px; border: 1px solid #3a4866; border-radius: 9px; background: #161e2c;
  box-shadow: 0 8px 30px #0008; }
.status-hold-popover[hidden] { display: none; }
.status-hold-head { justify-content: space-between; align-items: center; }
.status-hold-head button { white-space: nowrap; }
.status-hold-body { gap: 6px; font-size: 13px; }
.status-hold-body p, .status-hold-body h4, .status-hold-body ul { margin: 0; }
.status-hold-body h4 { margin-top: 8px; }
.status-hold-body ul { padding-left: 20px; }
.status-limit-rule { margin: 0; font-size: 12px; }

/* ── Withdrawal progress (read-only): progress first, one row per reminded account; a table on a wide screen, cards
   on a phone (the same DOM, so an open detail and the focus survive a resize). ── */
@media (min-width: 900px) {
  body[data-page="withdrawal_progress"]:has(> .topbar.sidebar) > main.stack { width: calc(100% - 220px); }
}
body[data-page="withdrawal_progress"], body[data-page="withdrawal_progress"] #root,
body[data-page="withdrawal_progress"] #root * { overflow-anchor: none; }
.st-pill.bad { background: #3a1a1f; color: #f5a3aa; }
.st-pill.none { background: #1d2a3d; color: #8fbcdc; }
.badge.flag { background: #33261a; color: #f0c27a; }
.wp-title { gap: 8px; align-items: center; margin-bottom: 2px; }
.wp-head h1 { margin: 0; font-size: 20px; }
.wp-sub { margin: 0; }
.wp-meta { display: grid; gap: 2px; justify-items: end; text-align: right; }
.wp-small { font-size: 12px; }
.wp-notes p { margin: 2px 0; }
/* The counts' qualifier is the always-visible summary; the full meaning is inside the native disclosure. */
.wp-about { margin: 8px 0 0; }
.wp-about summary { cursor: pointer; padding: 2px 0; }
.wp-about summary:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }
.wp-about p { margin: 4px 0 0; }
.wp-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wp-card { display: grid; gap: 6px; justify-items: start; padding: 10px 12px; border: 1px solid #222836; border-radius: 10px;
  background: #0d121c; color: #e6e9ef; font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.wp-card:hover { border-color: #3a4866; }
.wp-card[aria-pressed="true"] { border-color: #2f5bd3; box-shadow: inset 0 0 0 1px #2f5bd3; }
.wp-card:focus-visible, .wp-seg button:focus-visible, .wp-toggle:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }
.wp-count { font-size: 22px; font-variant-numeric: tabular-nums; }
.wp-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.wp-filters input[type="search"] { flex: 1 1 220px; min-width: 0; }
.wp-live { margin-left: auto; }
.wp-seg { display: inline-flex; border: 1px solid #2a3244; border-radius: 999px; overflow: hidden; }
.wp-seg button { background: transparent; color: #e6e9ef; border: 0; padding: 6px 12px; font: inherit; cursor: pointer; min-height: 36px; }
.wp-seg button[aria-pressed="true"] { background: #2f5bd3; }
/* One compact table, one row per account; the account name opens the detail row below it. */
.wp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wp-table th { color: #8b94a7; font-size: 12px; font-weight: 500; text-align: left; padding: 6px 8px;
  border-bottom: 1px solid #222836; white-space: nowrap; }
.wp-table td { padding: 8px; vertical-align: top; border-bottom: 1px solid #1c2230; }
.wp-cell { min-width: 0; overflow-wrap: anywhere; }
.wp-cell .st-pill { margin-bottom: 2px; }
.wp-name { gap: 6px; align-items: center; }
.wp-acct-btn { background: transparent; border: 0; padding: 0; color: #8ab4f8; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 28px; }
.wp-acct-btn[aria-expanded="true"] { color: #e6e9ef; }
.wp-acct-btn:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }
.wp-amt { font-variant-numeric: tabular-nums; }
.wp-drow > td { padding: 0 0 10px; }
.wp-ov-line { margin: 2px 0; }
.wp-detail { margin-top: 6px; padding: 12px 14px; border: 1px solid #1c2230; border-radius: 10px;
  background: #0f131c; }
.wp-detail-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.wp-dsec h3 { font-size: 14px; margin: 0 0 8px; }
.wp-dsec h4 { font-size: 13px; margin: 8px 0 4px; color: #b9c3d6; }
.wp-dsec p { margin: 4px 0; }
.wp-wds { list-style: none; margin: 0; padding: 0; }
.wp-wd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 8px 0;
  border-top: 1px solid #1c2230; }
.wp-wd:first-child { border-top: 0; }
.wp-wd-meta { grid-column: 2 / -1; margin: 0; }
/* Independent sections (2026-11-12): withdrawal records + sub-account transfers, closed until opened. */
.wp-extra { margin-top: 16px; }
.wp-extra > summary { cursor: pointer; font-weight: 600; }
.wp-hist, .wp-transfers { list-style: none; margin: 8px 0 0; padding: 0; }
.wp-hist-item, .wp-tr { padding: 10px 0; border-top: 1px solid #1c2230; }
.wp-hist-item:first-child, .wp-tr:first-child { border-top: 0; }
.wp-tr-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.wp-src summary { cursor: pointer; color: #8b94a7; font-size: 12px; }
.wp-mini { font-size: 12px; }
.wp-pager { justify-content: center; margin-top: 10px; }
.wp-empty { padding: 12px 4px; margin: 0; }
@media (max-width: 899px) {
  .wp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wp-detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* Phone: the accounts come up sooner — a tighter header, compact one-line headline cards (label left, count right,
     still 44px tall), the search on its own row, exchange + account count on the next, period + clear after that. */
  .wp-head { padding: 12px 14px; }
  .wp-head h1 { font-size: 18px; }
  .wp-sub { font-size: 13px; }
  .wp-meta { justify-items: start; text-align: left; margin-top: 6px; }
  .wp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .wp-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px 10px; min-height: 44px; }
  .wp-card .st-pill { white-space: normal; }
  .wp-count { font-size: 18px; justify-self: end; }
  .wp-filters { gap: 6px; }
  .wp-filters input[type="search"] { flex-basis: 100%; min-height: 40px; }
  .wp-filters select { order: 1; flex: 1 1 calc(100% - 110px); min-height: 40px; }
  .wp-live { order: 2; margin-left: 0; flex: 0 0 auto; }      /* not focusable: moving it keeps the focus order */
  .wp-seg { order: 3; flex: 1 1 auto; }
  .wp-seg button { flex: 1 1 0; min-height: 40px; padding: 6px 8px; }
  .wp-filters > .btn { order: 4; min-height: 40px; }
  .wp-table { font-size: 12px; }
  .wp-table th, .wp-table td { padding: 6px; }
  .wp-acct-btn { min-height: 40px; }
  .wp-wd { grid-template-columns: minmax(0, 1fr) auto; }
  .wp-wd .wp-time { grid-column: 1 / -1; }
  .wp-wd-meta { grid-column: 1 / -1; }
}