/* ============================================================================
 * eTrader — shared dashboard styles (admin.html + broker.html)
 * Same tokens, typography and compact desktop feel as the trading terminal.
 * ==========================================================================*/
/* Design tokens. Clean, bank-grade, Apple-plain: a white canvas, near-black text, ONE grey for
   secondary text, hairline separators, no decorative shadows. Every name the app already uses is
   kept - only the values change, so this is purely visual. */
:root{
  --winbg:#ffffff; --panel:#ffffff; --panelhdr:#ffffff; --toolbar:#ffffff;
  --border:#d4d4d9; --border2:#dedee3; --text:#0a0a0a; --muted:#86868b;
  --sel:#eef4ff; --selborder:#0071e3; --accentblue:#0071e3;
  --buy:#1a7f37; --sell:#d0342c; --up:#1a7f37; --down:#d0342c;
  --surface:#ffffff; --surface2:#fbfbfd; --surface3:#f5f5f7; --surface4:#f5f5f7;
  --rowhover:#f5f5f7; --demobg:#fff4e0; --demotext:#8a5a00; --livebg:#e6f5ec;
  --text2:#1d1d1f; --text3:#1d1d1f; --text4:#424245; --text5:#424245; --scrollbar:#d2d2d7;
  /* Flat by default. Only overlays that truly float (modals) carry a soft shadow, defined where
     they're used, not here. */
  --shadow:none; --shadow-lg:none;
}
/* Dark: clean black canvas, Apple-dark elevated surfaces, and the accent/up/down colours brighten
   so they read as clearly on black as they do on white. */
html.dark{
  --winbg:#000000; --panel:#1c1c1e; --panelhdr:#1c1c1e; --toolbar:#1c1c1e;
  --border:#38383a; --border2:#2c2c2e; --text:#f5f5f7; --muted:#98989d;
  --sel:#173154; --selborder:#0a84ff; --accentblue:#0a84ff;
  --buy:#30d158; --sell:#ff453a; --up:#30d158; --down:#ff453a;
  --surface:#1c1c1e; --surface2:#161618; --surface3:#2c2c2e; --surface4:#242426;
  --rowhover:#2c2c2e; --demobg:#3a2e10; --demotext:#ffd479; --livebg:#12331f;
  --text2:#f5f5f7; --text3:#f5f5f7; --text4:#d6d6d8; --text5:#c7c7c9; --scrollbar:#48484a;
  --shadow:none; --shadow-lg:none;
}
*{box-sizing:border-box;}
html,/* One typeface everywhere - the system UI font, which is San Francisco on Apple devices, so the
   app reads like a native Apple product with nothing to download. -webkit-font-smoothing gives it
   the same crisp weight the Apple site uses. */
body{margin:0;padding:0;min-height:100%;background:var(--winbg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:12.5px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{color:var(--accentblue);text-decoration:none;} a:hover{opacity:.75;}
button,input,select,textarea{font-family:inherit;}
::-webkit-scrollbar{width:11px;height:11px;} ::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:6px;}

/* Custom form controls — our own look, never the OS default. */
input[type=checkbox]{-webkit-appearance:none;appearance:none;margin:0;width:16px;height:16px;flex-shrink:0;
  border:1.5px solid var(--border);border-radius:5px;background:var(--surface);cursor:pointer;position:relative;
  vertical-align:middle;transition:background .12s,border-color .12s;}
input[type=checkbox]:hover{border-color:var(--selborder);}
/* Apple-style tick: a single stroke with rounded caps/joins, not a CSS-border corner. */
input[type=checkbox]:checked{border-color:var(--accentblue);
  background:var(--accentblue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M2.8 6.3 4.9 8.4 9.1 3.9'/%3E%3C/svg%3E") center/12px 12px no-repeat;}
input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--accentblue) 22%, transparent);}
input[type=color]{-webkit-appearance:none;appearance:none;border:1px solid var(--border);border-radius:8px;
  padding:0;background:none;cursor:pointer;overflow:hidden;}
input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:8px;}
input[type=color]::-webkit-color-swatch{border:none;border-radius:8px;}
input[type=color]::-moz-color-swatch{border:none;border-radius:8px;}

/* top bar — slim toolbar, like the terminal's #topBar */
/* Glass top bar, like the Apple site's nav: translucent, saturated, blurred so content scrolls
   softly beneath it. Falls back to a solid bar where backdrop-filter isn't supported. */
.pf-top{display:flex;align-items:center;gap:10px;height:52px;padding:0 22px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;}
html.dark .pf-top{background:rgba(22,22,23,.72);}
.pf-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;}
.pf-logo{width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;border-radius:5px;overflow:hidden;flex-shrink:0;}
.pf-logo svg,.auth-logo svg{width:100%;height:100%;display:block;}
.pf-badge{display:inline-flex;align-items:center;line-height:1;font-size:10px;font-weight:700;letter-spacing:.2px;
  padding:3px 9px;border-radius:20px;background:var(--sel);color:var(--accentblue);}
.pf-spacer{flex:1;}
.pf-top-user{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11.5px;}
.pf-icon-btn{background:var(--surface3);border:1px solid var(--border);color:var(--text3);border-radius:4px;
  width:30px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.pf-icon-btn:hover{background:var(--sel);border-color:var(--selborder);}

/* layout */
.pf-wrap{max-width:1140px;margin:0 auto;padding:20px 16px 50px;}
.pf-h1{font-size:17px;font-weight:700;margin:0 0 2px;}
.pf-sub{color:var(--muted);font-size:12px;margin:0 0 18px;}
.pf-grid{display:grid;gap:12px;}
.pf-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.pf-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.pf-grid.cols-3,.pf-grid.cols-4{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.pf-grid.cols-3,.pf-grid.cols-4{grid-template-columns:1fr;}}

/* cards */
/* Flat, hairline-bordered cards — no shadow. Depth comes from the border and the white space
   around it, the way the Apple site separates sections. Corners barely rounded. */
.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);}
/* Header and body sit on the same 16px inset, so a title and the text beneath it share one left edge
   and the card has one consistent margin all the way round. The header used to be 9px/14px against a
   14px body, which read as the title being nudged up and in relative to its own content. */
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--border2);background:var(--panelhdr);border-radius:6px 6px 0 0;}
.card-hd h2{font-size:13px;font-weight:700;margin:0;display:inline-flex;align-items:center;gap:8px;}
.card-hd h2 svg.ic{width:15px;height:15px;color:var(--accentblue);}
.card-bd{padding:16px;}
.card-bd.flush{padding:0;}
/* The intro paragraph under a card's title. Every card wrote this as an inline margin override, and
   they had drifted to 12px, 14px and 0. */
.card-bd > .pf-sub:first-child{margin:0 0 16px;}

/* stat tiles */
.stat{padding:13px 15px;}
.stat .k{color:var(--muted);font-size:11px;letter-spacing:.2px;}
.stat .v{font-size:23px;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums;}
.stat .v.small{font-size:15px;}

/* buttons */
/* line-height matches `.btn svg.ic` (14px) and vertical-align pins the box to the line's middle
   instead of a baseline. Without both, a button with an icon and one without - Edit next to
   Disable in a table's actions cell - render 1px different in height and 3px out of vertical
   alignment, because an inline-flex box takes its baseline from its first flex item and an SVG
   has none. Keep these in sync with the icon size if it changes (see .btn.lg). */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);
  color:var(--text2);border-radius:8px;padding:7px 13px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
  line-height:14px;vertical-align:middle;}
.btn:hover{background:var(--sel);border-color:var(--selborder);}
.btn.primary{background:var(--accentblue);border-color:var(--accentblue);color:#fff;}
.btn.primary:hover{filter:brightness(1.08);background:var(--accentblue);}
.btn.danger{color:var(--down);border-color:var(--border);}
.btn.danger:hover{background:var(--down);border-color:var(--down);color:#fff;filter:none;}
/* One step down from .btn, not two. At 5px/11px an `sm` button beside a regular one read as a
   different control from a different design; these are the proportions the broker dashboard already
   used, so the two consoles now scale their buttons identically. */
.btn.sm{padding:6px 10px;font-size:11.5px;}
.btn.active{background:var(--sel);border-color:var(--selborder);color:var(--accentblue);}
.btn.ghost{border-color:transparent;background:transparent;}

/* toolbar above a flush table (search + filters + count) */
.tbl-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;
  border-bottom:1px solid var(--border2);background:var(--surface2);}
.tbl-tools input[type=search],.tbl-tools input[type=text]{flex:1;min-width:170px;padding:6px 9px;
  border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text);font-size:12px;}
.tbl-tools .seg{display:flex;gap:4px;}
/* The count and the controls read as one unit, kept together at the end of the row. Pushed to
   opposite edges (what this used to do) the label ends up ~760px from the buttons it describes on
   a full-width table, reading as a stray fragment rather than a caption for the controls. */
.pager{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:9px 14px;
  border-top:1px solid var(--border2);font-size:11.5px;color:var(--muted);}
/* A pager with nothing in it must take no space. Single-page lists render an empty .pager, and the
   class's own border-top + padding were drawing a stray divider and a band of dead space under the
   last row of every short table. :empty covers it wherever the pager is built, so no call site has
   to remember to hide its own element. */
.pager:empty{display:none;padding:0;border-top:none;}
.pager .pg-btns{display:flex;align-items:center;gap:6px;}
.pager .pg-at{font-variant-numeric:tabular-nums;align-self:center;padding:0 4px;}
/* A search/filter row INSIDE an already-padded card body — not the flush-table toolbar. .tbl-tools
   is for a toolbar that spans a card edge to edge (its own fill and a full-width bottom rule); used
   inside .card-bd it renders as an inset grey box with a rule that stops short of both edges. */
.card-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.card-tools input[type=search],.card-tools input[type=text]{flex:1;min-width:200px;
  padding:9px 11px;border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-size:12.5px;line-height:1.3;}
.card-tools select{width:auto;}
.btn.ghost:hover{background:var(--surface3);border-color:transparent;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* forms */
/* One vertical rhythm for every form on the platform: 8px from a label to the control it names, 18px
   from that control to whatever comes next. The old 5px/12px put a label almost touching its input
   while the gap to the NEXT field was barely larger, so a stack of fields read as one undifferentiated
   block and a lone field sat too close to the button under it. Keep the ratio near 1:2 — the gap
   INSIDE a field must stay clearly smaller than the gap BETWEEN fields, or the label stops looking
   like it belongs to the box beneath it, but 5-6px is close enough to touching that the label reads
   as stuck to the input rather than sitting above it. */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.field label{font-size:11.5px;color:var(--muted);font-weight:600;}
/* Scoped to a form/card body's OWN last field. Unscoped, this also hits the last cell of a .row2/.row3
   — zeroing one column's margin while its neighbours keep theirs, which leaves the row with a ragged
   bottom edge instead of a straight one. */
.card-bd > .field:last-child,.m-bd > .field:last-child{margin-bottom:0;}
/* line-height is pinned to the same 1.3 the dropdown button uses. Left to `normal` an input resolves
   to roughly 1.2, so an input and the <select> beside it — same padding, same font — still ended up a
   pixel or two apart, and nothing in a form row lined up along its bottom edge. */
.field input,.field select,.field textarea{padding:9px 11px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);color:var(--text);font-size:12.5px;width:100%;line-height:1.3;}
/* A checkbox is never a full-width form control. The `width:100%` above also caught checkboxes that
   happened to sit inside a .field, which is why every one of them carried an inline `width:auto` to
   escape — and `auto` on an appearance:none box collapses it to its ~13px intrinsic width against an
   18px height, i.e. a squashed rectangle rather than the square tickbox everywhere else. Pinning the
   size here means the markup needs no inline escape at all. */
.field input[type=checkbox]{width:16px;height:16px;padding:0;flex:0 0 16px;}
/* Focus stays a 1px border — never thicker — and gains a soft halo instead of a heavy outline.
   The halo is the accent at low opacity, so it adapts to light and dark automatically. */
/* One soft ring, never two. A full-accent border plus a 20% glow read as a double outline on the
 * dark back offices — the border only leans toward the accent, and the glow sits back. */
.field input:focus,.field select:focus,.field textarea:focus,
.tbl-tools input:focus,.in:focus{outline:none;
  border-color:color-mix(in srgb, var(--accentblue) 62%, var(--border));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accentblue) 12%, transparent);}
/* Fields plus a trailing action, baseline-aligned. A grid row (.row2/.row3) gives the button a whole
   1fr column and stretches it, so a two-word action renders as a slab as wide as the input beside it;
   here the fields flex and the button keeps its natural width. */
.fld-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.fld-row > .field{flex:1;min-width:160px;margin-bottom:0;}
.fld-row > .btn{margin-bottom:1px;}
/* Fields in a grid row align by their TOPS, so every label in the row sits on one line. Bottom- or
   stretch-alignment lines the row up by whichever control happens to be tallest — a <select> the
   dropdown enhancer has wrapped is a couple of pixels taller than a plain input — and pushes that
   field's label out of line with the ones beside it. */
.row2,.row3,.row5{align-items:start;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 12px;}
.row5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 8px;}
@media (max-width:640px){ .row3,.row5{grid-template-columns:1fr 1fr;} }
/* Data-feed bridge: a labelled section toggle (the checkbox enables that transport). The checkbox
   keeps its normal 16px box - don't set width:auto, which collapses it to a sliver inside the flex
   row (reads as a stray blue bar + white tick). */
.fb-sec{display:flex;align-items:center;gap:7px;margin:16px 0 8px;font-size:12px;cursor:pointer;}
.fb-sec input[type=checkbox]{margin:0;}
.hint{font-size:11px;color:var(--muted);line-height:1.45;}
/* A checkbox and its label on one line. Every card was writing this as the same five inline styles,
   which is how they drifted to three different font sizes and gaps. */
.chk-row{display:flex;align-items:center;gap:9px;font-size:12.5px;margin-bottom:10px;cursor:pointer;}
/* A field that belongs to the option above it: cleared past the checkbox and hung off a hairline. */
.sub-field{margin:2px 0 14px 30px;padding-left:14px;border-left:1px solid var(--border2);}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:12px;}
.tbl th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.2px;
  padding:8px 14px;border-bottom:1px solid var(--border2);background:var(--surface2);position:sticky;top:0;}
.tbl td{padding:9px 14px;border-bottom:1px solid var(--border2);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover{background:var(--rowhover);}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;}
.tbl .actions{text-align:right;white-space:nowrap;}
/* Pager — these lists arrive whole, so paging is presentation only: it keeps a 50-row instrument
   table readable without a round trip per page. */
/* Action buttons are emitted without whitespace between them, so space them here rather than
   relying on the markup. A destructive action gets pushed clear of the benign ones beside it and
   separated by a hairline: grouping by proximity is what stops a click aimed at "Disable"
   landing on "Remove". */
.tbl .actions .btn + .btn{margin-left:6px;}
.tbl .actions .btn + .btn.danger{position:relative;margin-left:18px;}
.tbl .actions .btn + .btn.danger::before{content:"";position:absolute;left:-9px;top:50%;
  transform:translateY(-50%);width:1px;height:15px;background:var(--border);}
.mono{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;}
.empty{padding:28px;text-align:center;color:var(--muted);}
/* An empty state's icon is illustration, not a button glyph — at the inline 15px it read as a
   speck above the sentence it belongs to. */
.empty svg.ic{width:30px;height:30px;opacity:.45;stroke-width:1.5;}

/* broker logo icon (+ letter placeholder) */
.brk-ico{width:22px;height:22px;border-radius:5px;flex-shrink:0;object-fit:cover;
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  border:1px solid var(--border2);background:var(--surface3);overflow:hidden;}
/* The placeholder for a broker with no logo yet. It was a blue gradient tile with a white initial,
   which is the same blue box the platform mark used to be - so it goes the same way: the initial
   carries the blue and sits on the neutral surface every other icon uses. It keeps the border here
   (unlike the gradient, which dropped it) so an empty logo still reads as a slot, not a stray letter. */
.brk-ico.brk-ico-ph{background:var(--surface3);color:var(--accentblue);
  font-weight:700;font-size:11px;text-transform:uppercase;}
.brk-ico.brk-ico-ph::after{content:attr(data-ph);}
.brk-ico.brk-ico-lg{width:44px;height:44px;border-radius:8px;font-size:20px;}
img.brk-ico{padding:0;}
.logo-upload{display:flex;align-items:center;gap:10px;}

/* badges / pills */
/* A pill is one short label, so it never wraps: in a narrow column "B-book" would otherwise
   break at its own hyphen and render as "B-" over "book" inside the rounded background. */
.pill{display:inline-flex;align-items:center;line-height:1;font-size:11px;font-weight:700;letter-spacing:.2px;
  padding:3px 9px;border-radius:20px;white-space:nowrap;vertical-align:middle;}
/* Pill text is often a raw enum from the API ("active", "live", "margin.call"), so capitalise
   the first letter here rather than at every call site. Leading digits are unaffected. */
.pill::first-letter{text-transform:uppercase;}
.pill.demo{background:var(--demobg);color:var(--demotext);}
.pill.live{background:var(--livebg);color:var(--up);}
.pill.active{background:var(--livebg);color:var(--up);}
.pill.suspended{background:rgba(201,75,75,.16);color:var(--sell);}
.pill.archived{background:var(--surface3);color:var(--muted);}
.pill.neutral{background:var(--surface3);color:var(--muted);}

/* key/secret display */
.keybox{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border2);
  border-radius:4px;padding:7px 9px;}
.keybox code{flex:1;overflow:auto;white-space:nowrap;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;color:var(--text);}
.copy{cursor:pointer;border:1px solid var(--border);background:var(--surface3);border-radius:4px;padding:4px 9px;font-size:11px;color:var(--text3);
  display:inline-flex;align-items:center;gap:5px;}
.copy svg.ic{width:12px;height:12px;}
.copy:hover{background:var(--sel);border-color:var(--selborder);}

/* code blocks (API docs) */
pre.code{background:#0e1116;color:#d6deeb;border-radius:6px;padding:13px 15px;overflow:auto;font-size:11px;line-height:1.55;
  font-family:"SF Mono",Menlo,Consolas,monospace;border:1px solid #1c2230;}
pre.code .k{color:#c792ea;} pre.code .s{color:#c3e88d;} pre.code .c{color:#5c6773;}

/* hybrid routing rule builder */
.rrule{border:1px solid var(--border2);border-radius:6px;padding:10px 12px;margin-bottom:10px;background:var(--surface2);}
.rrule-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px;font-size:12px;color:var(--text2);}
.rrule-hd b{color:var(--text);}
.rrule select,.rcond select,.rcond input{padding:5px 8px;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text);font-size:11.5px;}
.rcond{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap;}
.rcond input[type=number]{width:90px;}
.rr-and{font-size:10.5px;color:var(--muted);letter-spacing:.2px;margin:0 2px;}
.rr-x{cursor:pointer;color:var(--muted);border:1px solid var(--border);border-radius:4px;width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;background:var(--surface);font-size:13px;line-height:1;flex-shrink:0;}
.rr-x:hover{color:var(--down);border-color:var(--down);}
.rr-book{font-weight:700;}

/* custom dropdown (replaces native <select> popups) */
.uisel{position:relative;}
/* min-width:0 !important beats any inline min-width the markup gave the ORIGINAL select — the
   collapsed native shadow must never keep that width, or an off-screen 150px select silently
   widens the whole page on phones. */
select.uisel-native{position:absolute;width:1px;height:1px;min-width:0 !important;opacity:0;pointer-events:none;margin:0;}
/* Padding and font match `.field input` exactly. They didn't (8/10 vs 9/11), so a dropdown standing
   beside a text input — the role filter next to the members search, the currency next to the client
   name — sat 2px shorter than it, and a row of controls never lined up along either edge. */
.uisel-btn{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 11px;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text);
  font-size:12.5px;cursor:pointer;font-family:inherit;line-height:1.3;}
.uisel-btn:hover{border-color:var(--selborder);}
.uisel.open .uisel-btn{outline:1px solid var(--selborder);border-color:var(--selborder);}
.uisel-btn[disabled]{opacity:.55;cursor:not-allowed;}
.uisel-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* A dropdown living in a table row is one size down from a form control — at form size it sets the
   height of every row in the table, so an accounts list with a Book picker per row grew ~8px a row. */
.tbl .uisel-btn{padding:5px 9px;font-size:11.5px;}
/* …and one in a card header matches the `btn sm` actions it stands beside, not the inputs down in the
   body. A form-sized dropdown next to a small button is an 11px height difference in a 40px-tall
   header — the routing card's mode picker against its Save button was exactly that. */
.card-hd .uisel-btn{padding:6px 10px;font-size:11.5px;}
.uisel-caret{color:var(--muted);display:flex;flex-shrink:0;transition:transform .15s;}
.uisel.open .uisel-caret{transform:rotate(180deg);}
/* Fixed positioning (coords set in JS on open) so the menu escapes any overflow:auto
   ancestor - e.g. the Book selector inside the scrollable accounts table - and sizes to
   its content instead of being squeezed to the button's width. */
.uisel-menu{display:none;position:fixed;z-index:3000;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);
  max-height:240px;overflow:auto;padding:4px;width:max-content;max-width:min(320px,90vw);}
.uisel.open .uisel-menu,.uisel-menu.open{display:block;}
.uisel-opt{padding:7px 9px;border-radius:4px;font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.uisel-opt:hover{background:var(--rowhover);}
.uisel-opt.sel{background:var(--sel);color:var(--accentblue);font-weight:600;}
.uisel-opt.disabled{opacity:.5;cursor:not-allowed;}

/* modal — matches the terminal's .om-hdr / .om-body language */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:60;
  align-items:center;justify-content:center;padding:20px;}
.modal-bg.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);
  width:440px;max-width:100%;max-height:90vh;overflow:auto;}
.modal .m-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  border-bottom:1px solid var(--border2);background:var(--panelhdr);}
.modal .m-hd h3{margin:0;font-size:12.5px;font-weight:700;}
.modal .m-x{cursor:pointer;color:var(--muted);font-size:16px;line-height:1;background:none;border:none;}
.modal .m-bd{padding:14px;}
.modal .m-ft{padding:12px 14px;border-top:1px solid var(--border2);display:flex;justify-content:flex-end;gap:8px;}

/* Modal treatment — one generation with the redesigned back-office pages, shared by every page on
   this stylesheet (admin, broker, integrations). It used to live inline in admin.html only, which
   left the broker dashboard's modals with the older compact header/typography next to the admin's
   redesigned ones. Scoped to .modal so nothing outside a dialog changes. */
.modal{border-radius:24px;overflow:hidden;}
.modal .m-hd{padding:16px 20px;}
.modal .m-hd h3{font-size:16px;font-weight:800;letter-spacing:-.2px;}
.modal .m-bd{padding:18px 20px;}
.modal .m-ft{padding:14px 20px;gap:10px;}
.modal .field{margin-bottom:18px;}
.modal .field label{font-size:12.5px;font-weight:600;}
.modal .field input,.modal .field select,.modal .field textarea{padding:11px 13px;font-size:13.5px;width:100%;box-sizing:border-box;}
.modal .btn{padding:9px 16px;font-size:13px;font-weight:600;}
.modal .btn.primary{font-weight:700;}
.modal .m-x{border-radius:10px;}
.modal .hint{font-size:12px;line-height:1.5;}

/* Every dialog stays inside the window: the header and the actions footer are pinned and only the
   body scrolls. The glass rule's overflow:hidden above used to clip a tall form (Create money
   manager) with its lower fields and Save out of reach. A <form> wrapping body + footer takes part
   in the same column. Dialogs built without an .m-bd scroll as a whole. The page behind is locked
   by platform.js (html.ui-lock) for as long as any dialog is open. */
.modal-bg .modal{display:flex;flex-direction:column;max-width:100%;
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:hidden;}
.modal-bg .modal > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin:0;}
.modal-bg .modal > .m-hd,.modal-bg .modal > form > .m-hd,
.modal-bg .modal > .m-ft,.modal-bg .modal > form > .m-ft{flex:none;}
.modal-bg .modal .m-hd{gap:12px;}
.modal-bg .modal .m-hd h3{min-width:0;overflow-wrap:anywhere;}
.modal-bg .modal > .m-bd,.modal-bg .modal > form > .m-bd{flex:1 1 auto;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.modal-bg .modal:not(:has(.m-bd)){overflow-y:auto;overscroll-behavior:contain;}
.modal-bg .modal .m-ft{flex-wrap:wrap;}
html.ui-lock,html.ui-lock body{overflow:hidden;}
@media (max-width:640px){
  .modal-bg{padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));}
  .modal-bg .modal{width:100%;max-height:calc(100vh - 24px - env(safe-area-inset-bottom,0px));
    max-height:calc(100dvh - 24px - env(safe-area-inset-bottom,0px));}
}

/* login screen */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(120% 120% at 50% 0%, #16233f 0%, var(--winbg) 62%);}
html.dark .auth{background:radial-gradient(120% 120% at 50% 0%, #0e1a30 0%, var(--winbg) 62%);}
.auth-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);
  width:360px;max-width:100%;padding:26px 24px;}
/* The platform mark is a SOLID blue tile now, not a thin glyph, so it carries far more visual weight
   at the same box size. 52px read as oversized; 38px is the right presence for a filled app icon. */
.auth-logo{width:38px;height:38px;border-radius:23%;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;margin:0 auto 14px;}
.auth h1{text-align:center;font-size:16px;margin:0 0 3px;}
.auth .auth-sub{text-align:center;color:var(--muted);font-size:11.5px;margin:0 0 20px;}
/* The submit button belongs to the field above it — it's the end of one short form, not a separate
   section — so it sits closer than the platform's between-fields gap rather than further away. */
.auth .field{margin-bottom:16px;}
.auth .btn{width:100%;justify-content:center;padding:11px;font-size:13px;margin-top:0;}
.auth-err{background:rgba(201,75,75,.13);color:var(--sell);border:1px solid rgba(201,75,75,.32);
  border-radius:4px;padding:8px 11px;font-size:11.5px;margin-bottom:13px;display:none;}
.auth-err.show{display:block;}

/* inline svg icons — inherit text color, align with adjacent text */
svg.ic{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
svg.ic.fill{fill:currentColor;stroke:none;}
.btn svg.ic{width:14px;height:14px;}
.btn.lg{padding:9px 15px;font-size:12.5px;line-height:16px;}  /* matches .btn.lg svg.ic */
.btn.lg svg.ic{width:16px;height:16px;}

/* stat tiles with icon */
.stat.ic-stat{display:flex;align-items:center;gap:13px;}
.stat .stat-ic{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--sel);color:var(--accentblue);flex-shrink:0;}
.stat .stat-ic svg.ic{width:19px;height:19px;stroke-width:1.8;}

/* ---- broker manager (redesigned, compartmentalised) ---- */
.brk{margin-bottom:16px;overflow:hidden;transition:border-color .15s;}
.brk:hover{border-color:var(--border2);}
.brk.suspended{opacity:.82;}

.brk-hd{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--panelhdr);border-bottom:1px solid var(--border2);}
.brk-id{display:flex;align-items:center;gap:13px;min-width:0;flex:1;}
.brk-id h2{font-size:14.5px;font-weight:700;margin:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1.2;}
.brk-meta{display:flex;align-items:center;gap:7px 15px;flex-wrap:wrap;margin-top:6px;color:var(--muted);font-size:11.5px;}
.brk-meta .mi{display:inline-flex;align-items:center;gap:5px;min-width:0;}
.brk-meta .mi svg.ic{width:13px;height:13px;opacity:.8;stroke-width:1.7;}
.brk-meta .mi b{color:var(--text3);font-weight:600;}
.brk-meta .mi .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px;}

/* management action toolbar */
.brk-tools{display:flex;flex-wrap:wrap;gap:7px;padding:11px 16px;border-bottom:1px solid var(--border2);background:var(--surface2);}
.brk-tools .sp{flex:1;}

.brk-bd{padding:15px 16px;}
.sec{margin-bottom:17px;}
.sec:last-child{margin-bottom:0;}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
.sec-t{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.2px;color:var(--muted);}
.sec-t svg.ic{width:14px;height:14px;opacity:.85;stroke-width:1.8;}

/* section header inside modals */
.m-sec{font-size:11.5px;font-weight:700;letter-spacing:.2px;color:var(--muted);
  display:flex;align-items:center;gap:7px;margin:4px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border2);}
.m-sec svg.ic{width:14px;height:14px;}
.m-sec:not(:first-child){margin-top:20px;}

/* toasts — the same glass notifications the terminal uses (terminal.html), so a broker who moves
   between the dashboard and the terminal sees one platform rather than two.
   Bottom-LEFT and column-reverse: the newest sits nearest the corner and older ones ride upward, and
   the left keeps them clear of the right-hand actions every panel puts in the top corner. */
#toasts{position:fixed;bottom:16px;left:16px;z-index:100;display:flex;flex-direction:column-reverse;gap:9px;
  max-width:300px;pointer-events:none;}
/* Apple-style glass: translucent, blurred, soft rounded. A small colour dot marks the type instead of
   a heavy left bar, so it reads as one calm surface. */
.toast{position:relative;background:rgba(255,255,255,.68);-webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(0,0,0,.06);
  border-radius:14px;padding:10px 14px 10px 28px;font-size:11.5px;
  line-height:1.4;animation:toastIn .26s cubic-bezier(.22,1,.36,1);pointer-events:auto;}
.toast::before{content:"";position:absolute;left:13px;top:13px;width:7px;height:7px;border-radius:50%;background:var(--accentblue);}
.toast.success::before{background:var(--up);}
.toast.error::before{background:var(--down);}
.toast.info::before{background:var(--muted);}
.toast b{display:block;margin-bottom:1px;font-size:11.5px;color:var(--text);font-weight:600;}
html.dark .toast{background:rgba(15,18,30,.96);border-color:rgba(255,255,255,.10);}
/* Pages that follow the OS theme (admin, broker, integrations — no `html.dark` class) need the
   same dark toast via the media query, else it keeps the light background and looks washed-out. */
@media (prefers-color-scheme:dark){ html:not(.light) .toast{background:rgba(15,18,30,.96);border-color:rgba(255,255,255,.10);} }
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ============================================================================
 * Narrow viewports (phones). The admin console and broker dashboard are built
 * desktop-first; below 760px the top bar wraps instead of clipping, multi-column
 * form rows stack, every table scrolls sideways inside its own card rather than
 * stretching the page, and toolbars/pagers wrap. Both pages share this shell, so
 * this one block covers admin.html and broker.html together.
 * ==========================================================================*/
@media (max-width:760px){
  /* Top bar: let it grow to two rows rather than squeeze the sign-out controls off
     the edge. Brand on the first row, account controls wrap beneath when tight. */
  .pf-top{height:auto;min-height:52px;flex-wrap:wrap;padding:9px 14px;row-gap:8px;}
  .pf-brand{font-size:12px;min-width:0;}
  .pf-top-user{gap:6px;flex-wrap:wrap;}
  .pf-wrap{padding:16px 12px 40px;}
  .pf-h1{font-size:16px;}
  .pf-sub{margin-bottom:14px;}

  /* Stacked stat tiles read better a touch smaller. */
  .stat{padding:12px 14px;}
  .stat .v{font-size:20px;}

  /* Every multi-column layout collapses to one column. cols-2 needs !important because the
     markup sets grid-template-columns inline, which a plain class can't override. min-width:0 on
     grid/flex children lets the tracks actually shrink to the viewport - without it a track keeps
     its content's min-width and the row overflows the page (which is what pushed a fixed-position
     toast, and the whole page, wider than the screen). */
  .row2,.row3,.row5,.pf-grid.cols-2{grid-template-columns:1fr !important;}
  .pf-grid > *,.row2 > *,.row3 > *,.row5 > *{min-width:0;}

  /* Tables scroll horizontally within their card instead of widening the page. Scoped to bodies
     that actually hold a table so form cards are untouched (belt-and-suspenders: the markup already
     wraps most tables in an overflow:auto div). */
  .card-bd:has(.tbl){overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* …and any table whose immediate parent is a plain div (cluster/health panels build their
     tables straight into a container) gets the same treatment. */
  div:has(> .tbl){overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tbl{font-size:11.5px;}
  .tbl th,.tbl td{padding:8px 10px;}
  .tbl-tools{padding:9px 11px;}
  .pager{flex-wrap:wrap;justify-content:space-between;gap:8px 12px;}

  /* Card headers (title + an action or inline control) wrap instead of shoving the control off
     the right edge. */
  .card-hd{flex-wrap:wrap;row-gap:8px;}

  /* Broker-manager cards (admin console): the identity block takes the full row so the company
     name isn't squeezed to a sliver, and the "Open dashboard" action drops beneath it full-width. */
  .brk-hd{flex-wrap:wrap;padding:12px 13px;}
  .brk-hd .brk-id{flex-basis:100%;}
  .brk-hd .brk-open{flex:1;justify-content:center;}
  .brk-bd{padding:13px;}
  .brk-tools{padding:10px 13px;}
  .brk-meta .mi .trunc{max-width:150px;}

  /* Modals fill more of the small screen. */
  .modal-bg{padding:12px;}
  .modal{width:100%;border-radius:12px;}
}

/* ============================================================================
 * Apple-glass theme overlay (eTrader) — dynamic background + translucent, blurred
 * cards, rounded corners, SF Pro. Layered on top so the existing layout
 * tokens are unchanged; only the finish changes. Applies to admin / broker / docs.
 * ==========================================================================*/
:root{ --bg1:#eaf0fe; --bg2:#f3f6ff; --bg3:#e4ebfb; --bg4:#edf1fb;
  --glass-card:rgba(255,255,255,.68); --glass-brd:rgba(92,104,138,.20); --glass-soft:rgba(255,255,255,.5); }
html.dark{ --bg1:#101740; --bg2:#151a3e; --bg3:#0a1024; --bg4:#05070f;
  --glass-card:rgba(30,37,66,.55); --glass-brd:rgba(255,255,255,.09); --glass-soft:rgba(40,48,80,.42); }
@media (prefers-color-scheme:dark){ html:not(.light){
  --bg1:#101740; --bg2:#151a3e; --bg3:#0a1024; --bg4:#05070f; --text:#f5f5f7; --muted:#8b93b8;
  --winbg:#05070f; --border:rgba(255,255,255,.09); --border2:rgba(255,255,255,.07);
  --panel:#0e1332; --panelhdr:#0e1332; --toolbar:#0e1332;
  --sel:#1b2c60; --selborder:#3d7bff; --accentblue:#3d7bff;
  --buy:#30d158; --sell:#ff453a; --up:#30d158; --down:#ff453a;
  --surface:rgba(40,48,80,.42); --surface2:rgba(30,37,66,.4); --surface3:rgba(50,58,92,.5); --surface4:rgba(40,48,80,.42);
  /* Row hover: a whisper of blue. This was falling back to the LIGHT value, flashing white on hover. */
  --rowhover:rgba(96,126,224,.12); --demobg:#3a2e10; --demotext:#ffd479; --livebg:#12331f;
  --gridline:rgba(255,255,255,.07); --tabactive:rgba(255,255,255,.06); --scrollbar:#2c3768;
  --text2:#f5f5f7; --text3:#eef1ff; --text4:#c7ccec; --text5:#b3b9dd;
  --glass-card:rgba(30,37,66,.55); --glass-brd:rgba(255,255,255,.09); --glass-soft:rgba(40,48,80,.42); } }
body{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif !important;
  background:
    radial-gradient(70% 60% at 12% 8%,var(--bg1) 0%,transparent 60%),
    radial-gradient(75% 65% at 88% 18%,var(--bg2) 0%,transparent 60%),
    radial-gradient(90% 85% at 50% 108%,var(--bg3) 0%,transparent 62%),
    var(--bg4) !important;
  background-attachment:fixed !important; }
/* The same backdrop on the root. The rule above paints only the body's own box, and html keeps the
 * plain --winbg from the base rule, so on any page shorter than the window (a short list, a list still
 * loading, a tall screen) the gradient stopped where the content did and white showed underneath.
 * The root's background fills the whole canvas; both layers are fixed to the viewport, so where they
 * overlap they draw the same pixels. */
html{ min-height:100%;
  background:
    radial-gradient(70% 60% at 12% 8%,var(--bg1) 0%,transparent 60%),
    radial-gradient(75% 65% at 88% 18%,var(--bg2) 0%,transparent 60%),
    radial-gradient(90% 85% at 50% 108%,var(--bg3) 0%,transparent 62%),
    var(--bg4) !important;
  background-attachment:fixed !important; }
.card, .modal, .auth-card{ background:var(--glass-card) !important; border:1px solid var(--glass-brd) !important;
  border-radius:20px !important; -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:none !important; }
/* The card header used to carry an opaque fill with square-ish top corners, which poked out past
 * the card's rounded corner ("one box on top of another"). Make it transparent so the card's own
 * glass shows through and the radius is respected — no overflow:hidden (that would clip dropdowns). */
.card-hd{ background:transparent !important; border-bottom:1px solid var(--glass-brd) !important;
  border-radius:0 !important; }
.card-bd{ background:transparent !important; }
.pf-top{ background:var(--glass-card) !important; border-bottom:1px solid var(--glass-brd) !important;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); position:sticky; top:0; z-index:50; }
.auth{ background:transparent !important; }
/* The console header, copied from eTrader ID's #topBar so every eTrader console wears one bar: 42px,
   a 22px mark, "eTrader" bold with the product name in regular grey, and plain icon-and-label links
   instead of filled buttons. Every page wears it now, the public ones (home, AI, Tide, legal) included;
   the class stays opt-in so a page without it keeps the older bar. The long selectors are there to
   out-rank the dark-mode `.btn:not(.primary)` fill further up, which carries !important. */
.pf-top.idbar{ height:42px; padding:5px 14px 5px 17px; gap:10px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  background:rgba(255,255,255,.82) !important; border-bottom:1px solid rgba(20,25,50,.08) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
html.dark .pf-top.idbar{ background:rgba(16,22,48,.86) !important; border-bottom-color:rgba(255,255,255,.07) !important; }
@media (prefers-color-scheme:dark){ html:not(.light) .pf-top.idbar{ background:rgba(16,22,48,.86) !important; border-bottom-color:rgba(255,255,255,.07) !important; } }
.pf-top.idbar .pf-brand{ gap:6px; font-size:12.5px; font-weight:700; line-height:normal; white-space:nowrap; }
.pf-top.idbar .pf-brand .pf-logo{ margin-right:1px; }
.pf-top.idbar .pf-logo{ width:22px; height:22px; }
.pf-top.idbar .pf-badge{ display:inline; padding:0; background:none; border-radius:0; font-size:inherit;
  font-weight:400; letter-spacing:0; line-height:normal; color:#424245; }
html.dark .pf-top.idbar .pf-badge{ color:#c7ccec; }
@media (prefers-color-scheme:dark){ html:not(.light) .pf-top.idbar .pf-badge{ color:#c7ccec; } }
.pf-top.idbar .pf-top-user{ gap:4px; }
html .pf-top.idbar .pf-top-user .btn:not(.primary):not(.danger){ background:none !important; border:none !important;
  box-shadow:none !important; color:var(--text3) !important; font-size:11.5px; font-weight:400; padding:5px 10px; border-radius:9px !important; gap:5px; }
html .pf-top.idbar .pf-top-user .btn:not(.primary):not(.danger):hover{ background:var(--surface3) !important; color:var(--text) !important; }
.pf-top.idbar .pf-top-user .btn svg.ic{ width:15px; height:15px; }
.pf-top.idbar .pf-top-user .btn:not(.primary):not(.danger) + .btn.primary{ margin-left:10px; }
.pf-top.idbar .pf-who{ font-size:11.5px; color:var(--text4); }
@media (max-width:640px){
  .pf-top.idbar{ height:auto; min-height:42px; flex-wrap:nowrap; }
  .pf-top.idbar.pub .pf-top-user .btn:not(.primary){ display:none !important; }
}
.btn{ border-radius:12px !important; }
/* Dark-mode secondary buttons carry the platform's blue identity instead of reading flat/gray. */
@media (prefers-color-scheme:dark){ html:not(.light){
  .btn:not(.primary):not(.danger){ background:rgba(56,74,150,.34) !important; border-color:rgba(120,150,255,.24) !important; color:#e2e8ff !important; }
  .btn:not(.primary):not(.danger):hover{ background:rgba(72,94,185,.5) !important; border-color:var(--accentblue) !important; color:#fff !important; }
} }
html.dark .btn:not(.primary):not(.danger){ background:rgba(56,74,150,.34) !important; border-color:rgba(120,150,255,.24) !important; color:#e2e8ff !important; }
html.dark .btn:not(.primary):not(.danger):hover{ background:rgba(72,94,185,.5) !important; border-color:var(--accentblue) !important; color:#fff !important; }
/* …but a GHOST button must stay ghostly. The blanket dark rule above was overriding .btn.ghost's
 * transparency, so quiet inline toggles (e.g. the cluster's "Only needs attention" filter) rendered
 * as loud filled pills competing with the primary actions next to them. */
.btn.ghost, html.dark .btn.ghost{ background:transparent !important; border-color:transparent !important; }
.btn.ghost:hover, html.dark .btn.ghost:hover{ background:rgba(120,150,255,.14) !important; border-color:transparent !important; }
@media (prefers-color-scheme:dark){ html:not(.light){
  .btn.ghost{ background:transparent !important; border-color:transparent !important; }
  .btn.ghost:hover{ background:rgba(120,150,255,.14) !important; border-color:transparent !important; }
} }
/* More rounding across forms/controls — the platform's language is soft, not square. */
input,select,textarea,.tbl-tools input,.in{ border-radius:13px !important; }
.field input,.field select,.field textarea,.uisel-btn,.row2 input,.row2 select{ border-radius:13px !important; }
/* The header badge is the same shape language as a pill — the two used to sit side by side with
 * different corner radii (badge 20, pill 11). */
.pill,.pf-badge{ border-radius:11px !important; }
.stat, .card.stat{ border-radius:20px !important; }
.brk{ border-radius:20px !important; }
.keybox,.docs-nav a{ border-radius:12px !important; }
/* Small controls that are NOT <button class="btn">, so the .btn rule above never reached them: the
 * keybox's Copy, the rule builder's ✕, the top bar's icon buttons and the dropdown's own rows were
 * all left at the old 4px while everything around them rounded to 11-13. */
.copy,.rr-x,.pf-icon-btn{ border-radius:11px !important; }
.uisel-opt{ border-radius:9px; }
.brk-ico{ border-radius:7px; } .brk-ico.brk-ico-lg{ border-radius:12px; }
.pf-h1{ font-weight:800; letter-spacing:-.4px; }
/* Broker card header: same transparent glass as .card-hd so the (bright) name reads clearly and the
 * rounded corner is respected — it used an opaque fill that made the title low-contrast in dark. */
.brk-hd{ background:transparent !important; border-bottom:1px solid var(--glass-brd) !important; }
.brk-id h2{ color:var(--text) !important; }
/* Dropdown menus must be near-opaque, or the rows behind them bleed through (they were see-through). */
.uisel-menu{ background:#ffffff !important; box-shadow:none !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4); border:1px solid var(--glass-brd) !important; }
@media (prefers-color-scheme:dark){ html:not(.light){ .uisel-menu{ background:#151b3d !important; } } }
html.dark .uisel-menu{ background:#151b3d !important; }