/* =====================================================================
   FAST-PAYMENT-SERVICE · operations console
   A compact, dark command-centre skin. Colour carries meaning only:
     green  = ok / connected / done        amber = attention / pending
     red    = failed / blocked / danger    indigo = primary action / selection
   Every class the console renders is defined here; nothing is decoration.
   ===================================================================== */
:root{
  --bg:#0a0c10;--panel:#101318;--panel-2:#13171d;--panel-3:#181d25;--inset:#0c0f13;
  --line:#1f252e;--line-2:#2a313c;--line-3:#363f4c;
  --text:#e4e9f0;--text-2:#c3cbd6;--muted:#8591a1;--dim:#5b6573;
  --ok:#3ecf8e;--ok-bg:#0f2219;--ok-line:#1f4a35;
  --warn:#f0b541;--warn-bg:#231b0b;--warn-line:#4d3b15;
  --bad:#f2575d;--bad-bg:#26110f;--bad-line:#552126;
  --info:#6f8cff;--info-2:#8ea4ff;--info-bg:#121a33;--info-line:#2b3a6b;
  /* legacy names still read by inline styles */
  --accent:var(--ok);--accent-2:var(--info);--danger:var(--bad);
  --radius:8px;--radius-sm:6px;
  --shadow:0 10px 30px rgba(0,0,0,.35);--focus:0 0 0 2px rgba(111,140,255,.35);
  --mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);min-height:100vh;
  font:12px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"cv11" 1}
button,input,textarea,select{font:inherit;color:inherit}
code,.mono{font-family:var(--mono);font-size:.94em}
a{color:var(--info-2)}
::selection{background:rgba(111,140,255,.35)}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#262d38;border-radius:9px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------------------------------ shell */
.sidebar{position:fixed;inset:0 auto 0 0;width:212px;background:#0c0e12;border-right:1px solid var(--line);
  padding:12px 10px;display:flex;flex-direction:column;z-index:20;overflow-y:auto}
.brand{display:flex;gap:9px;align-items:center;margin:2px 4px 14px}
.logo{width:28px;height:28px;border-radius:7px;background:var(--info);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.brand b{display:block;font-size:11px;letter-spacing:.08em}
.brand small{display:block;color:var(--dim);font-size:9px;letter-spacing:.06em}
.side-caption{color:var(--dim);font-size:9px;font-weight:600;letter-spacing:.12em;margin:12px 8px 4px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);color:var(--muted);
  cursor:pointer;margin:1px 0;font-size:12px;border:1px solid transparent;user-select:none}
.nav-item:hover{background:var(--panel-2);color:var(--text)}
.nav-item.active{background:var(--info-bg);border-color:var(--info-line);color:#fff}
.nav-item .ico{width:16px;text-align:center;opacity:.8;font-size:12px}
.nav-item .dot{display:none}
.nav-item .count{margin-left:auto;background:var(--warn);color:#1a1405;border-radius:9px;padding:0 6px;font-size:10px;font-weight:700}
.nav-item.urgent{color:var(--warn)}
.side-bottom{margin-top:auto;padding:10px 6px 2px;border-top:1px solid var(--line)}
.side-bottom .tiny{line-height:1.4}
.live-pill{display:none}
.main{margin-left:212px;min-height:100vh}
.topbar{position:sticky;top:0;z-index:15;background:rgba(10,12,16,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:9px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.topbar h1{font-size:15px;margin:0;font-weight:650;letter-spacing:.01em}
.topbar .page-desc{color:var(--muted);font-size:11px;margin-top:1px;max-width:640px}
.eyebrow{text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-size:9px;font-weight:600}
.top-actions{display:flex;gap:6px;align-items:center}
.avatar{display:none}
.statusbar{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.sb{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border:1px solid var(--line-2);border-radius:5px;
  background:var(--panel);font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--text-2);white-space:nowrap;cursor:default}
.sb i{width:6px;height:6px;border-radius:50%;background:var(--dim);display:inline-block}
.sb.ok i{background:var(--ok);box-shadow:0 0 6px rgba(62,207,142,.6)}
.sb.warn{border-color:var(--warn-line);color:var(--warn)}.sb.warn i{background:var(--warn)}
.sb.bad{border-color:var(--bad-line);background:var(--bad-bg);color:#ffb3b6}.sb.bad i{background:var(--bad)}
.sb.info{border-color:var(--info-line);color:var(--info-2)}.sb.info i{background:var(--info)}
.page{padding:14px 20px 70px;max-width:1680px}

/* ------------------------------------------------------------------ layout */
.grid{display:grid;gap:10px}
/* A grid cell must be allowed to be narrower than its content, so a wide
   table scrolls inside its card instead of widening the whole page. */
.grid>*,.row>*,.row3>*,.cat-layout>*{min-width:0}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}.g6{grid-template-columns:repeat(6,minmax(0,1fr))}.g7{grid-template-columns:repeat(7,minmax(0,1fr))}
.split{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.split-side{grid-template-columns:minmax(0,1fr) 320px}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.section{padding:12px 14px}
.card.section+.card.section,.card+.card{margin-top:10px}
/* Side by side in a grid, cards never take the stacked-card gap. */
.grid>.card+.card,.grid>.card.section+.card.section{margin-top:0}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.section-head h3{margin:0;font-size:13px;font-weight:650}
.section-head .muted.tiny{margin-top:2px}
.section-head .right{display:flex;gap:6px;align-items:center}
.subsection{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2);margin-top:8px}
.subsection-title{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:650;margin-bottom:8px}
.divider{height:1px;background:var(--line);margin:10px 0}

/* metrics: compact KPI tiles */
.metric{padding:10px 12px;min-height:0}
.metric .label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.metric .value{font-size:19px;font-weight:700;margin-top:3px;letter-spacing:-.01em}
.metric .value small{font-size:10px;color:var(--muted);font-weight:600;margin-left:3px}
.metric .sub{margin-top:2px;color:var(--muted);font-size:10.5px}
.metric.highlight{border-color:var(--info-line)}
.metric.hot{border-color:var(--warn-line)}.metric.hot .value{color:var(--warn)}
.metric[role=button]:hover{border-color:var(--line-3);background:var(--panel-2)}
.metric.bad{border-color:var(--bad-line)}.metric.bad .value{color:var(--bad)}
.mini{padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2)}
.mini b{font-size:12.5px}
.kpi-row{display:flex;gap:8px;flex-wrap:wrap}

/* ------------------------------------------------------------------ buttons
   primary  = the one main action (indigo)
   default  = secondary action
   .ghost   = tertiary / quiet
   .danger  = destructive     .warn = needs care     .success/.ok = positive */
button{border:1px solid var(--line-2);background:var(--panel-3);color:var(--text);border-radius:var(--radius-sm);
  padding:0 10px;height:28px;font-size:11.5px;font-weight:550;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
button:hover{border-color:var(--line-3);background:#1e242d}
button:active{transform:translateY(.5px)}
button:disabled{opacity:.55;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus);border-color:var(--info)!important}
.btn:hover{border-color:var(--line-3)}
.primary,button.primary{background:var(--info);border-color:var(--info);color:#fff;font-weight:650}
.primary:hover,button.primary:hover{background:#7f99ff;border-color:#7f99ff}
.ghost,button.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.ghost:hover,button.ghost:hover{background:var(--panel-3);border-color:var(--line-2);color:var(--text)}
.danger,button.danger{background:var(--bad-bg);border-color:var(--bad-line);color:#ffb3b6}
.danger:hover,button.danger:hover{background:#34161a;border-color:#7a2c33}
.warn,button.warn{background:var(--warn-bg);border-color:var(--warn-line);color:#ffd48a}
.warn:hover,button.warn:hover{background:#2e230d;border-color:#6b5220}
.success,button.success,button.ok{background:var(--ok-bg);border-color:var(--ok-line);color:#8ff0c2}
.selected{border-color:var(--info)!important;background:var(--info-bg)!important;color:#fff!important}
button.sm,.sm button{height:24px;padding:0 8px;font-size:11px}
button.icon-btn{width:28px;padding:0}
.icon{border:0;background:transparent;font-size:18px;height:28px;width:28px;padding:0;color:var(--muted)}
.icon:hover{background:var(--panel-3);color:var(--text)}
.controls{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.quick-action{height:36px;font-weight:650}

/* segmented choices (replaces dropdowns) */
.choice-row{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--inset);padding:2px}
.choice-row{max-width:100%}
/* A choice labelled with a long merchant name wraps inside its button rather
   than widening the row past the page (Ledger overflowed on narrow screens). */
.choice-row .choice{border:0;background:transparent;color:var(--muted);min-height:24px;height:auto;padding:3px 10px;border-radius:4px;font-size:11px;white-space:normal;text-align:left;line-height:1.3}
button{max-width:100%}
.choice-row .choice:hover{color:var(--text);background:var(--panel-3)}
.choice-row .choice.active{background:var(--info-bg);color:#fff;box-shadow:inset 0 0 0 1px var(--info-line)}
.choice{background:var(--panel-3);border-color:var(--line-2)}
.choice.active{background:var(--info-bg);border-color:var(--info);color:#fff}
.choice-row .choice-custom{width:96px;height:24px;margin-left:4px;border:1px solid var(--line-2);background:var(--panel);border-radius:4px;padding:0 7px;font-size:11px}
.filter-strip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;align-items:center}
.filter-strip .choice{height:24px;padding:0 10px;font-size:11px}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.merchant-choice{height:auto;min-height:44px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 10px;white-space:normal}
.merchant-choice.active{border-color:var(--info);background:var(--info-bg);color:#fff}
.merchant-choice-grid{max-height:240px;overflow:auto;padding:2px}

/* ------------------------------------------------------------------ forms */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:9px;min-width:0}
.field label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.field input,.field select,.field textarea,.searchbar input,.input-row input,.lock-card input,input[type=text],input[type=number],input[type=search],input[type=date],input[type=password],input:not([type]){
  background:var(--inset);color:var(--text);border:1px solid var(--line-2);border-radius:var(--radius-sm);height:30px;padding:0 9px;outline:0;font-size:12px;min-width:0}
.field input,.field select{width:100%}
.field textarea,textarea{width:100%;min-height:72px;padding:7px 9px;resize:vertical;background:var(--inset);color:var(--text);border:1px solid var(--line-2);border-radius:var(--radius-sm);font-size:12px}
input::placeholder,textarea::placeholder{color:var(--dim)}
input[type=date]{color-scheme:dark}
input[type=checkbox]{accent-color:var(--info)}
select{background:var(--inset);color:var(--text);border:1px solid var(--line-2);border-radius:var(--radius-sm);height:30px;padding:0 8px}
.field .muted.tiny{line-height:1.4}
.input-row{display:flex;gap:6px;align-items:center}.input-row input{flex:1}
.searchbar{display:flex;gap:6px;margin-bottom:8px;align-items:center;flex-wrap:wrap}
.searchbar input{flex:1;min-width:180px}
.daterange{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
.daterange input[type=date],.searchbar .daterange input[type=date]{width:128px;flex:0 0 128px;min-width:0;height:30px}
.row>.daterange{align-self:end;margin-bottom:9px}
.file{padding:7px 9px;border:1px dashed var(--line-3);border-radius:var(--radius-sm);background:var(--inset)}

/* ------------------------------------------------------------------ tables */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
/* No fixed minimum width. It was 720px, which made every table in a half-
   width card (Credit), a popup or the drawer wider than its box — the root
   of the sideways swiping. Tables now size to their content and container;
   cells wrap text when they must (below), so none collapses. */
.table{width:100%;border-collapse:collapse;font-size:11.5px}
.table th,.table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
/* Text cells wrap between words when — and only when — the table would
   otherwise outgrow its box. With every cell `nowrap`, a single long value (a
   100-character merchant name, an error message) stretched the whole table
   past the screen. Amounts, badges, ids, dates and buttons still never break. */
.table td{white-space:normal;overflow-wrap:break-word}
/* Headers too: a one-line "MERCHANT / COUNTERPARTY" fixed its column at 175px. */
.table th{white-space:normal}
.table td.nowrap,.table td.num,.table td .nowrap,.table td .pill,.table td button,.table td code{white-space:nowrap}
/* The grey line under a name (a nickname, a handle) is often one long
   unbroken word; it may break anywhere rather than set its column's width. */
.table td .muted{overflow-wrap:anywhere}
.table th{color:var(--dim);font-weight:650;font-size:10px;text-transform:uppercase;letter-spacing:.06em;position:sticky;top:0;background:var(--panel-2);z-index:1}
.table tbody tr{cursor:pointer}
.table tbody tr:hover{background:#151a21}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr.selected-row{background:var(--info-bg)}
.table td .muted.tiny,.table td .tiny{font-size:10px}
.table td button{height:24px;padding:0 7px;font-size:11px}
.table .num,.num{text-align:right;font-variant-numeric:tabular-nums}
/* Long identifiers are clipped on screen but whole in the DOM, so selecting or
   double-clicking still copies the full value; the title shows it on hover. */
code.clip,.clip{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* Row actions stay reachable when a wide table scrolls sideways. */
.table .actions-col{position:sticky;right:0;background:var(--panel);box-shadow:-8px 0 10px -6px rgba(0,0,0,.6)}
.table tbody tr:hover .actions-col{background:#151a21}
.table tbody tr.selected-row .actions-col{background:var(--info-bg)}
.table th.actions-col{background:var(--panel-2);z-index:2}
.selected-row{position:relative}
.selected-row td:first-child:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--info)}
.row-select{cursor:pointer}

/* ------------------------------------------------------------------ badges */
.pill{display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 7px;border:1px solid var(--line-2);border-radius:4px;
  font-size:10px;font-weight:650;letter-spacing:.03em;white-space:nowrap;color:var(--text-2);background:var(--panel-3)}
.pill.ok{color:#7fe8b6;background:var(--ok-bg);border-color:var(--ok-line)}
.pill.warn{color:#ffd48a;background:var(--warn-bg);border-color:var(--warn-line)}
.pill.bad{color:#ffb3b6;background:var(--bad-bg);border-color:var(--bad-line)}
.pill.blue{color:#b7c6ff;background:var(--info-bg);border-color:var(--info-line)}
.pill.gray{color:var(--muted);background:var(--panel-3);border-color:var(--line-2)}
.strip{display:flex;gap:4px;flex-wrap:wrap;align-items:stretch}
.chip{display:flex;flex-direction:column;gap:0;padding:2px 7px;border:1px solid var(--line-2);border-radius:5px;background:var(--panel-2);min-width:0}
/* Where there is room, a row's chips stay on one line (a wrapped strip made
   Ledger rows 87px tall); on narrower screens they may wrap rather than
   push the table sideways. */
@media(min-width:1360px){.strip-line .strip{flex-wrap:nowrap}.table td.nm b{white-space:nowrap}}
/* Up to two lines of a long text cell; the whole text is in its tooltip. */
/* Capped at 260px so a long description does not claim the width the entry
   chips beside it need to stay on one line (Ledger rows grew to 87px). */
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:120px;max-width:260px;overflow-wrap:anywhere}
.chip i{font-style:normal;color:var(--dim);font-size:9px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.chip b{font-size:11px;white-space:nowrap;font-weight:650}
.chip.ok{border-color:var(--ok-line);background:var(--ok-bg)}.chip.ok b{color:#7fe8b6}
.chip.warn{border-color:var(--warn-line);background:var(--warn-bg)}.chip.warn b{color:#ffd48a}
.chip.bad{border-color:var(--bad-line);background:var(--bad-bg)}.chip.bad b{color:#ffb3b6}
.chip.blue{border-color:var(--info-line);background:var(--info-bg)}.chip.blue b{color:#b7c6ff}
.ok{color:var(--ok)}.bad{color:var(--bad)}
.kbd{font-family:var(--mono);border:1px solid var(--line-3);border-bottom-width:2px;padding:0 4px;border-radius:4px;color:var(--text-2);font-size:9.5px}

/* ------------------------------------------------------------------ notices */
.notice{padding:8px 10px;border:1px solid var(--info-line);border-left:3px solid var(--info);background:#10152a;color:var(--text-2);border-radius:var(--radius-sm);font-size:11.5px;line-height:1.5}
.notice.warn{border-color:var(--warn-line);border-left-color:var(--warn);background:#1c160a}
.notice.danger{border-color:var(--bad-line);border-left-color:var(--bad);background:#1f0e10}
.notice b{color:var(--text)}
.empty{padding:22px;text-align:center;color:var(--muted);background:transparent;font-size:12px}
.muted{color:var(--muted)}.tiny{font-size:10.5px}.small{font-size:11px}.nowrap{white-space:nowrap}

/* ------------------------------------------------------------------ progress & charts */
.progress{height:5px;background:var(--inset);border-radius:9px;overflow:hidden;border:1px solid var(--line);margin-top:5px}
.progress>span{display:block;height:100%;background:var(--ok);border-radius:9px}
.stat-line{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:4px 0;border-bottom:1px dashed var(--line)}
.stat-line:last-child{border-bottom:0}
.chart{display:flex;align-items:flex-end;gap:5px;height:130px;padding:8px 2px 0}
.bar-wrap{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-width:0}
.bar{width:100%;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,var(--info),#3b4fa8);min-height:3px}
.bar-label{text-align:center;font-size:9px;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.bar-value{text-align:center;font-size:9px;color:var(--muted)}

/* ------------------------------------------------------------------ slots */
.slot{padding:10px 12px}
.slot.active-slot{border-color:var(--ok-line)}
.slot-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.slot-no{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.slot-rate{font-size:17px;font-weight:700;margin:6px 0}
.slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.slot-kpi{padding:5px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2)}
.slot-kpi .k{color:var(--dim);font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.slot-kpi .v{font-weight:600;margin-top:1px;font-size:11px;word-break:break-word}
.qr-preview{width:150px;height:150px;object-fit:contain;border-radius:var(--radius);border:1px solid var(--line-2);background:#fff;padding:6px}

/* ------------------------------------------------------------------ modal */
.modal{position:fixed;inset:0;background:rgba(3,5,8,.72);display:grid;place-items:center;z-index:40;padding:16px}
.modal.hidden{display:none}
.modal-card{width:min(760px,100%);max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.6)}
#modalBody{padding:12px 14px}
.modal-head{padding:9px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--panel);z-index:2}
.modal-head h3{margin:1px 0 0;font-size:13.5px;font-weight:650}
.modal-body{padding:12px 14px}
/* Action buttons wrap to a new line on a narrow popup instead of running off
   its right edge, where they could not be reached at all. */
.modal-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}

/* ---- tables and long values inside popups and the drawer ----
   ROOT CAUSE of the sideways swipe in popups: `.table` carries a 720px
   minimum width and every cell is `nowrap` — right for a full-page table, but
   inside a 760px popup a table of names, order numbers and reasons could not
   shrink, so its box had to be swiped (649px on "Post to Ledger" at ~1100px).
   In a popup or the drawer a table instead fits its container and wraps text;
   amounts and badges still never break. A popup that holds a table may also
   use more of a wide screen. */
.modal-card:has(table){width:min(1080px,100%)}
#modalBody .table,.drawer-body .table{min-width:0}
/* Wrap between words only: a number or order number is never cut in half. */
#modalBody .table th,#modalBody .table td,.drawer-body .table td{white-space:normal;overflow-wrap:break-word}
#modalBody .table td.num,#modalBody .table th.num,#modalBody .table td button{white-space:nowrap}
/* Identifiers (order numbers, UIDs, ad numbers) may break at any character —
   they carry no words to keep whole, and a 33-character UID was otherwise the
   widest thing in its table. Amounts are not code and never break. */
#modalBody .table td code,.drawer-body .table td code{word-break:break-all;white-space:normal}
/* A badge holding a sentence ("Counterparty is not a registered merchant —
   register them first") wraps too: kept on one line it made its column 351px
   and crushed every other column to 26px. */
#modalBody .table td .pill{white-space:normal;height:auto;min-height:19px;line-height:1.3;padding:2px 7px;text-align:left}
/* Long unbroken text (URLs, UIDs, error messages) wraps inside the box rather
   than pushing it wider. break-word only breaks when a word cannot fit. */
#modalBody,.drawer-body,.notice,.toast{overflow-wrap:break-word}
.kbd-hint{clear:both;display:block;text-align:right;color:var(--dim);font-size:10px;margin-top:8px}

/* ------------------------------------------------------------------ drawer
   Detail that should sit beside the page instead of over it. */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,96vw);background:var(--panel);border-left:1px solid var(--line-2);
  box-shadow:-20px 0 60px rgba(0,0,0,.45);z-index:35;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .16s ease}
.drawer.open{transform:none}
.drawer-head{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.drawer-head h3{margin:1px 0 0;font-size:13.5px;font-weight:650;word-break:break-all}
.drawer-body{padding:12px 14px;overflow:auto;flex:1}
.drawer-foot{padding:9px 14px;border-top:1px solid var(--line);display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:120px 1fr;gap:3px 10px;font-size:11.5px}
.kv dt{color:var(--muted)}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.dsec{margin-bottom:12px}.dsec:last-child{margin-bottom:0}
.dsec h4{margin:0 0 6px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:650}

/* action menu (secondary actions behind ⋯) */
.menu{position:fixed;z-index:45;min-width:180px;background:var(--panel-3);border:1px solid var(--line-3);border-radius:var(--radius);box-shadow:var(--shadow);padding:4px}
.menu button{width:100%;justify-content:flex-start;background:transparent;border-color:transparent;height:28px}
.menu button:hover{background:#232a35}
.menu button.danger{color:#ffb3b6;background:transparent}
.menu hr{border:0;border-top:1px solid var(--line-2);margin:4px 2px}

/* stepper (session lifecycle) */
.steps{display:flex;gap:3px;flex-wrap:wrap}
.step{font-size:9.5px;font-weight:650;letter-spacing:.04em;padding:2px 6px;border-radius:4px;background:var(--panel-3);color:var(--dim);border:1px solid var(--line)}
.step.done{color:#7fe8b6;background:var(--ok-bg);border-color:var(--ok-line)}
.step.now{color:#fff;background:var(--info-bg);border-color:var(--info)}
.step.fail{color:#ffb3b6;background:var(--bad-bg);border-color:var(--bad-line)}

/* category layout: settings-style nav + panel */
.cat-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;align-items:start}
.cat-nav{position:sticky;top:calc(var(--topbar-h,56px) + 8px);display:flex;flex-direction:column;gap:1px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:5px}
.cat-nav button{justify-content:flex-start;background:transparent;border-color:transparent;color:var(--muted);height:28px;font-weight:550}
.cat-nav button:hover{background:var(--panel-3);color:var(--text)}
.cat-nav button.active{background:var(--info-bg);color:#fff;border-color:var(--info-line)}
.cat-panel>.hidden-cat{display:none}

/* attention list (dashboard / action center) */
.attn-list{display:flex;flex-direction:column}
.attn{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line)}
.attn:last-child{border-bottom:0}
.attn .dotc{width:7px;height:7px;border-radius:50%;flex:none;background:var(--info)}
.attn.warn .dotc{background:var(--warn)}.attn.bad .dotc{background:var(--bad)}.attn.ok .dotc{background:var(--ok)}
.attn .t{flex:1;min-width:0}.attn .t b{font-weight:600}.attn .t div{color:var(--muted);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------------------------------------------ toasts
   Top-right under the bar, so they never sit on the job dock or the
   bottom-right controls. */
/* --topbar-h is the top bar's measured height: it grows when the status
   chips wrap, and a fixed 56px put toasts over its Refresh / Quick Add. */
#toast{position:fixed;right:16px;top:calc(var(--topbar-h,56px) + 6px);z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
/* With the drawer open, notices move to its left instead of covering it. */
#drawer.open~#toast{right:calc(min(560px,96vw) + 16px)}
.toast{pointer-events:auto;max-width:min(400px,calc(100vw - 32px));padding:8px 11px;border:1px solid var(--line-3);border-left:3px solid var(--info);background:var(--panel-3);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);font-size:11.5px;cursor:pointer;animation:tin .14s ease}
.toast.success{border-left-color:var(--ok)}
.toast.error{border-left-color:var(--bad);background:#1f1214}
.toast .n{color:var(--muted);margin-left:6px;font-size:10px}
@keyframes tin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ misc components */
.focus-panel{padding:12px 14px;border:1px solid var(--info-line);border-radius:var(--radius);background:var(--panel)}
.focus-panel h3{margin:2px 0;font-size:14px}
.diagnostic-pass{border-color:var(--ok-line)!important;background:var(--ok-bg)!important}
.diagnostic-fail{border-color:var(--bad-line)!important;background:var(--bad-bg)!important}
details>summary{cursor:pointer;color:var(--muted);font-size:11px}
details[open]>summary{margin-bottom:6px}
pre{background:var(--inset);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px;font-size:10.5px;overflow:auto}

/* Everything on this screen is a reference an operator needs to copy: UIDs,
   order numbers, session ids, ad numbers. Rows are clickable, but that must not
   cost the ability to select their text. */
body,.table td,.table th,code,.mini,.notice,.slot-kpi .v{user-select:text;-webkit-user-select:text}
.table td code,.table td b{cursor:text}

/* Until now only `.modal.hidden` existed, so `class="hidden"` on anything else
   did nothing at all and the element stayed visible. */
.hidden{display:none!important}

/* ------------------------------------------------------------------ lock screen
   z-index sits above the modal layer (40) on purpose: if a session expires
   while a confirmation dialog is open, the lock must cover it rather than
   leave a half-usable form on screen. */
.lock-screen{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;background:rgba(6,8,11,.96);backdrop-filter:blur(14px)}
.lock-screen.hidden{display:none}
.lock-card{width:min(340px,94vw);background:var(--panel);border:1px solid var(--line-2);border-radius:12px;padding:22px 20px;text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.7)}
.lock-card h2{margin:10px 0 4px;font-size:15px}
.lock-mark{width:40px;height:40px;margin:0 auto;border-radius:10px;display:grid;place-items:center;font-size:18px;background:var(--info-bg);border:1px solid var(--info-line)}
.lock-card input{width:100%;margin-top:14px;text-align:center;letter-spacing:.34em;font-size:15px;height:38px}
.lock-card button{width:100%;margin-top:10px;height:34px}
.lock-error{min-height:15px;margin-top:8px;color:var(--bad);font-size:11px}
.lock-foot{margin-top:14px;opacity:.7}
.lock-foot code{background:var(--inset);border:1px solid var(--line);border-radius:4px;padding:1px 5px}

/* ------------------------------------------------------------------ job dock
   Long operations run here: bottom-right, with a real progress bar and a
   cancel. Hidden entirely when nothing is running. */
.jobdock{position:fixed;right:16px;bottom:16px;z-index:80;width:320px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:6px}
.jobdock.hidden{display:none}
.jobdock .job{border:1px solid var(--line-2);background:var(--panel-3);border-radius:var(--radius);padding:8px 10px;box-shadow:var(--shadow)}
.jobdock .job.running{border-color:var(--info-line)}
.jobdock .job.failed{border-color:var(--bad-line)}
.jobdock .job.done{border-color:var(--ok-line)}
.jobdock .job-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.jobdock .job-title{font-size:11.5px;font-weight:650;line-height:1.35}
.jobdock .job-msg{color:var(--muted);font-size:10.5px;margin-top:2px;line-height:1.4;overflow-wrap:anywhere}
.jobdock .job-bar{height:4px;border-radius:4px;background:var(--inset);margin-top:7px;overflow:hidden}
.jobdock .job-bar span{display:block;height:100%;background:var(--info);transition:width .4s ease}
/* Unknown total: a moving stripe, not a percentage we cannot honestly claim. */
.jobdock .job-bar.indeterminate span{width:35%;animation:jobslide 1.25s ease-in-out infinite}
@keyframes jobslide{0%{margin-left:-35%}100%{margin-left:100%}}
.jobdock .job-actions{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.jobdock .job-actions button{height:24px;font-size:11px;padding:0 8px}
.jobdock .dock-head{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.12em;color:var(--dim);font-weight:650}
.jobdock .dock-head button{height:20px;font-size:10px;padding:0 7px;background:transparent;color:var(--muted)}
/* The finished-job state is a LABEL, deliberately unlike a button. */
.jobdock .job-state{font-size:9px;letter-spacing:.12em;color:var(--muted);font-weight:650}

/* ------------------------------------------------------------------ tiles
   A scanning view for pages that can hold thousands of rows. */
.tile-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tile{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:9px 11px;cursor:pointer;transition:border-color .12s}
.tile:hover{border-color:var(--line-3)}
.tile-selected{border-color:var(--info)}
.tile-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-size:12px;line-height:1.3}
.tile-head b{overflow-wrap:anywhere}
.tile-figure{font-size:15px;font-weight:700;margin:5px 0 2px}
.tile code{overflow-wrap:anywhere}

/* ------------------------------------------------------------------ responsive */
@media(max-width:1400px){.g7{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1200px){.g4,.g5,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}.row3{grid-template-columns:1fr 1fr}.split,.split-side{grid-template-columns:1fr}}
/* Narrower desktops: the side menu becomes an icon rail (every item keeps its
   tooltip). At ~1100px the full 212px menu left too little room for the
   9–11-column tables, and Orders lost its Payment / Ledger column off-screen. */
/* The sidebar is an icon rail between 761 and 1279px unless the operator chose
   the full sidebar (html.sb-full), and above 1279px only when they chose the rail
   (html.sb-rail). The choice is remembered, so zooming the page no longer opens
   and closes it on its own. */
@media(min-width:761px) and (max-width:1279px){
  html:not(.sb-full) .sidebar{width:56px;padding:10px 6px;overflow-x:hidden}
  html:not(.sb-full) .main{margin-left:56px}
  html:not(.sb-full) .brand{justify-content:center;margin:2px 0 10px}html:not(.sb-full) .brand>div:last-child{display:none}
  html:not(.sb-full) .side-caption{font-size:0;height:1px;margin:8px 6px;background:var(--line)}
  html:not(.sb-full) .nav-item{justify-content:center;padding:7px 0;position:relative}
  html:not(.sb-full) .nav-item>span:not(.ico):not(.count){display:none}
  html:not(.sb-full) .nav-item .ico{width:auto;font-size:14px}
  html:not(.sb-full) .nav-item .count{position:absolute;top:1px;right:1px;padding:0 4px;font-size:9px}
  html:not(.sb-full) .side-bottom{display:none}
  html:not(.sb-full) .page{padding:12px 14px 70px}
}
@media(min-width:1280px){
  html.sb-rail .sidebar{width:56px;padding:10px 6px;overflow-x:hidden}
  html.sb-rail .main{margin-left:56px}
  html.sb-rail .brand{justify-content:center;margin:2px 0 10px}html.sb-rail .brand>div:last-child{display:none}
  html.sb-rail .side-caption{font-size:0;height:1px;margin:8px 6px;background:var(--line)}
  html.sb-rail .nav-item{justify-content:center;padding:7px 0;position:relative}
  html.sb-rail .nav-item>span:not(.ico):not(.count){display:none}
  html.sb-rail .nav-item .ico{width:auto;font-size:14px}
  html.sb-rail .nav-item .count{position:absolute;top:1px;right:1px;padding:0 4px;font-size:9px}
  html.sb-rail .side-bottom{display:none}
  html.sb-rail .page{padding:12px 14px 70px}
}
.sb-toggle{position:absolute;top:14px;right:8px;width:22px;height:22px;padding:0;border-radius:6px;font-size:13px;line-height:1;background:transparent;border:1px solid var(--line);color:var(--muted);z-index:2}
.sb-toggle:hover{color:var(--text);border-color:var(--muted)}
@media(min-width:761px) and (max-width:1279px){html:not(.sb-full) .sb-toggle{position:static;display:block;margin:0 auto 8px}}
@media(min-width:1280px){html.sb-rail .sb-toggle{position:static;display:block;margin:0 auto 8px}}
@media(max-width:760px){.sb-toggle{display:none}}
@media(max-width:960px){.cat-layout{grid-template-columns:1fr}.cat-nav{position:static;flex-direction:row;flex-wrap:wrap}.statusbar{display:none}}
@media(max-width:760px){.sidebar{position:static;width:auto;border-right:0;border-bottom:1px solid var(--line)}.main{margin-left:0}
  .topbar{position:static;flex-wrap:wrap}.g4,.g3,.g2,.g5,.g6,.row,.row3{grid-template-columns:1fr}.page{padding:12px}
  .top-actions{flex-wrap:wrap}.nav-item{display:inline-flex;margin-right:2px}.sidebar nav{display:flex;flex-wrap:wrap}
  .side-caption{display:none}.choice-grid{grid-template-columns:1fr}.tile-grid{grid-template-columns:1fr}.jobdock{width:calc(100vw - 32px)}
  .drawer{width:100vw}
  /* The top bar is not sticky here, so toasts use the top edge. */
  #toast{top:8px;left:16px;right:16px;align-items:stretch}}
/* Recipient picker, preset chips and variable chips (Notify, Get Ad switch). */
.pick-list{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-top:6px;padding:4px}
.pick-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;cursor:pointer;min-width:0}
.pick-row:hover{background:var(--line)}
.pick-row input{width:15px;height:15px;flex:0 0 auto;margin:0;accent-color:#7c83ff}
.pick-row span{min-width:0;overflow-wrap:anywhere}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip-btn{display:inline-flex;align-items:stretch;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.chip-btn button{border:0;border-radius:0;height:26px;padding:0 10px;background:transparent}
.chip-btn button.x{padding:0 8px;color:var(--muted);border-left:1px solid var(--line-2)}
.chip-btn button:hover{background:var(--line)}
.var-chip{height:22px;padding:0 7px;font-size:11px;font-family:ui-monospace,Consolas,monospace;border-radius:6px}
/* Stat tiles used on Merchant Control. */
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:12px}
.stat-tile{background:var(--panel,#111419);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.stat-tile .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stat-tile .v{font-size:20px;font-weight:700;margin-top:2px}
.stat-tile .s{font-size:11px;color:var(--muted)}
.stat-tile.warn .v{color:var(--warn)}.stat-tile.bad .v{color:var(--bad)}
/* Merchant Control: the controls grid inside a merchant's panel. */
.ctrl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 16px;align-items:start}
.ctrl-grid .field{margin:0;min-width:0}
tr.ctrl-panel>td{background:var(--panel-2);padding:12px 14px}
/* Older pages' stat boxes (.grid.cards > .card.stat): same look as the stat tiles. */
.grid.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.card.stat{padding:10px 12px;min-width:0}
.card.stat .label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card.stat .value{font-size:20px;font-weight:700;margin-top:2px;overflow-wrap:anywhere}
.card-preview{margin-top:12px}
.card-preview img{display:block;width:100%;max-width:240px;margin-top:6px;border-radius:10px;border:1px solid var(--line);background:#fff}
a.btn-link{text-decoration:none}
.pick-row{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:400;color:var(--text)}
.brand{padding-right:26px}
@media(min-width:761px) and (max-width:1279px){html:not(.sb-full) .brand{padding-right:0}}
@media(min-width:1280px){html.sb-rail .brand{padding-right:0}}

/* ---------------- onboarding task */
.ob-progress{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ob-bar{flex:1;height:8px;border-radius:99px;background:var(--inset);border:1px solid var(--line);overflow:hidden}
.ob-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--info),var(--ok));border-radius:99px;transition:width .4s}
.ob-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px}
.ob-step{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2)}
.ob-step.done{border-color:var(--ok-line);background:var(--ok-bg)}
.ob-step.active{border-color:var(--info-line);background:var(--info-bg)}
.ob-step.warn{border-color:var(--warn-line);background:var(--warn-bg)}
.ob-step>div{min-width:0}.ob-step .tiny{overflow-wrap:anywhere}
.ob-sec{border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-top:10px;background:var(--panel-2)}
.ob-sec-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:8px}
.ob-timeline{display:grid;gap:4px}
.ob-line{display:flex;gap:8px;align-items:baseline;color:var(--muted)}
.ob-line.on{color:var(--text)}
.ob-line b{min-width:130px}
.ob-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ob-kpis>div{background:var(--inset);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px;text-align:center}
.ob-kpis b{display:block;font-size:18px}.ob-kpis span{font-size:11px;color:var(--muted)}
.ob-kpis .hot{border-color:var(--warn-line);color:var(--warn)}
.ob-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.ob-chip{font-size:11px;padding:2px 8px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted)}
.ob-chip.done{border-color:var(--ok-line);color:var(--ok)}
.ob-chip.active{border-color:var(--info-line);color:var(--info-2)}
.ob-chip.warn{border-color:var(--warn-line);color:var(--warn)}
.ob-decide{flex-wrap:wrap}
button.danger-text{color:var(--bad)}
@media (max-width:600px){.ob-kpis{grid-template-columns:repeat(2,1fr)}.ob-line{flex-wrap:wrap}.ob-line b{min-width:0}}

/* ---------------- statements */
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.st-grid .st-wide{grid-column:1/-1}
@media (max-width:760px){.st-grid{grid-template-columns:1fr}}

/* ---------------- dashboard */
.dh-hero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dh-tile{position:relative;overflow:hidden;cursor:pointer;padding:16px 18px 14px;border-radius:12px;
  background:linear-gradient(160deg,var(--panel-3),var(--panel));border:1px solid var(--line-2);
  transition:border-color .15s,transform .15s}
.dh-tile:hover{border-color:var(--line-3);transform:translateY(-1px)}
.dh-tile:focus-visible{outline:none;box-shadow:var(--focus)}
.dh-tile.accent{background:radial-gradient(120% 140% at 0% 0%,rgba(62,207,142,.16),transparent 55%),linear-gradient(160deg,var(--panel-3),var(--panel));border-color:var(--ok-line)}
.dh-tile.live{border-color:var(--info-line);background:radial-gradient(120% 140% at 100% 0%,rgba(111,140,255,.18),transparent 55%),linear-gradient(160deg,var(--panel-3),var(--panel))}
.dh-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.dh-big{font-size:32px;font-weight:800;letter-spacing:-.02em;margin-top:6px;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.dh-big small{font-size:13px;font-weight:600;color:var(--muted);margin-left:6px;letter-spacing:0}
.dh-sub{color:var(--text-2);font-size:13px;margin-top:4px;font-variant-numeric:tabular-nums}
.dh-foot{margin-top:10px;font-size:12px;min-height:22px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dh-foot .up{color:var(--ok);font-weight:700}.dh-foot .down{color:var(--bad);font-weight:700}
.dh-spark{display:flex;align-items:flex-end;gap:3px;height:28px;width:100%}
.dh-spark i{flex:1;background:linear-gradient(180deg,var(--info-2),var(--info));border-radius:2px 2px 0 0;opacity:.85;min-height:2px}
.dh-chips{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:12px}
.dh-chip{cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);transition:border-color .15s}
.dh-chip:hover{border-color:var(--line-3)}
.dh-chip span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.dh-chip b{font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dh-chip b small{font-size:12px;color:var(--muted);font-weight:600}
.dh-chip em{font-style:normal;font-size:11.5px;color:var(--dim)}
.dh-chip.hot{border-color:var(--warn-line);background:var(--warn-bg)}.dh-chip.hot b{color:var(--warn)}
.dh-chip.warn{border-color:var(--info-line)}.dh-chip.warn b{color:var(--info-2)}
.dh-main{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);gap:12px;margin-top:12px;align-items:start}
.dh-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.dh-col>.card{margin:0}
.dh-chart{height:210px}
.dh-table tbody tr{cursor:pointer}
.dh-controls{padding:6px 14px}
.dh-ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.dh-ctl+.dh-ctl{border-top:1px solid var(--line)}
.dh-ctl b{display:block;margin-top:2px}
.dh-ctl.off b{color:var(--bad)}
.dh-rank{display:flex;gap:10px;align-items:flex-start;padding:8px 0;cursor:pointer;border-top:1px solid var(--line)}
.dh-rank:first-of-type{border-top:0}
.dh-pos{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--panel-3);color:var(--text-2);flex:none}
.dh-rank:nth-of-type(1) .dh-pos{background:linear-gradient(160deg,#f6dd8a,#b8862e);color:#1b1405}
.dh-rank-main{flex:1;min-width:0}
.dh-rank-top,.dh-rank-sub{display:flex;justify-content:space-between;gap:8px}
.dh-rank-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-rank-top span{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.dh-rank-top small{color:var(--muted);font-weight:600}
.dh-rank-sub{font-size:11.5px;color:var(--dim);margin-top:3px}
.dh-rank-bar{height:5px;border-radius:99px;background:var(--inset);margin-top:5px;overflow:hidden}
.dh-rank-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--info),var(--ok))}
.dh-slots{display:grid;gap:6px}
.dh-slot{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);cursor:pointer}
.dh-slot .muted{margin-left:auto}
#passCard .pick-list,#passCardBody .pick-list{max-height:132px}
@media (max-width:1200px){.dh-chips{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1100px){.dh-hero{grid-template-columns:repeat(2,minmax(0,1fr))}.dh-main{grid-template-columns:1fr}}
@media (max-width:600px){.dh-hero{grid-template-columns:1fr}.dh-chips{grid-template-columns:repeat(2,minmax(0,1fr))}.dh-big{font-size:27px}}

/* A pick list inside a form field reads as names, not as a field label. */
.field .pick-row,.field .pick-row b{text-transform:none;letter-spacing:0;font-size:13px;color:var(--text);font-weight:inherit}
.field .pick-row b{font-weight:700}
/* On one column the switches and what needs you come before the charts. */
@media (max-width:1100px){.dh-main>.dh-col:last-child{order:-1}}