:root{color-scheme:dark;
 --bg:#0f141a;--panel:#161d26;--panel2:#1d2630;--panel3:#27313d;--line:#273039;--line2:#39454f;
 --text:#e7ecf2;--mute:#9aa6b4;--dim:#647180;
 --acc:#2f80ed;--acct:#6fb0ff;--onacc:#ffffff;
 --up:#2fae73;--dn:#e05667;--warn:#e0b145;--info:#4aa3ff;
 --ov:255,255,255;--accv:47,128,237;--upv:47,174,115;--dnv:224,86,103;
 --r:8px;--rs:6px;--rl:12px;--shadow:0 8px 24px rgba(0,0,0,.40);
 --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
 --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
 --navy:#161d26;--gold:#2f80ed;--paper:#0f141a;--ink:#e7ecf2;--serif:Inter,system-ui,sans-serif;
 --red:#e05667;--green:#2fae73;--blue:#2f80ed;--muted:#9aa6b4;--border:#273039;--card:#161d26;
 --panel-2:#1d2630;--bg2:#161d26}html[data-theme="light"]{color-scheme:light;
 --bg:#f3f6fa;--panel:#ffffff;--panel2:#eef2f7;--panel3:#e3e9f0;--line:#e3e9f0;--line2:#cfd8e3;
 --text:#1a2432;--mute:#5a6676;--dim:#8893a3;
 --acc:#2563eb;--acct:#1d4ed8;--onacc:#ffffff;
 --up:#0f9d63;--dn:#d6455a;--warn:#a8730a;--info:#1d6fe0;
 --ov:0,0,0;--accv:37,99,235;--upv:15,157,99;--dnv:214,69,90;
 --r:8px;--rs:6px;--rl:12px;--shadow:0 8px 24px rgba(15,23,42,.12);
 --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
 --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
 --navy:#ffffff;--gold:#2563eb;--paper:#f3f6fa;--ink:#1a2432;--serif:Inter,system-ui,sans-serif;
 --red:#d6455a;--green:#0f9d63;--blue:#2563eb;--muted:#5a6676;--border:#e3e9f0;--card:#ffffff;
 --panel-2:#eef2f7;--bg2:#ffffff}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

html,body{background:var(--bg)!important;color:var(--text)!important}
body,button,input,select,textarea,th,td{font-family:var(--sans)!important;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
body{font-size:13px!important;line-height:1.45}
h1,h2,h3,h4,h5,legend{color:var(--text)!important;font-weight:600!important;letter-spacing:-.01em}
h1{font-size:20px!important}h2{font-size:16px!important}h3{font-size:14px!important}h4,h5{font-size:13px!important}
small,.small,.sub,.hint,.help,.meta,.muted,.dim,.note-sub,.caption{color:var(--mute)!important}
a{color:var(--acct)!important;text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0!important;border-top:1px solid var(--line)!important}
/* figures line up in columns only if the digits are the same width */
pre,code,.mono,.num,.amount,.clock,.ref,.sum,.total,.price,.qty,.id,td.num,.tabnum{font-family:var(--mono)!important;font-variant-numeric:tabular-nums}
::selection{background:rgba(var(--accv),.32)}
::placeholder{color:var(--dim)!important;opacity:1}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line2)!important;border-radius:10px;border:2px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}
*{scrollbar-color:var(--line2) transparent}

/* containers: anything that was a white or navy box becomes one hairline panel */
.app,main,.wrap,.work,.side,.grid,.split,.stack,.kpis,.tiles,section,article,.content,.page,.body,.col,.cols,.pane,.panes,.view{background:transparent!important;color:inherit}
header,.top,.topbar,.header,aside,.sidebar,.card,.kpi,.panel,.detail,.filters,.list,.doc,.ms,.mini>div,.mic-card,.hero,.assist,.msg,dialog,#helpBox,#msgr-panel,#ntf-panel,#msgr-people,.toast,.login,.tabs,.box,.tile,.widget,.modal,.dropdown,.menu,.sheet,.drawer,.popover,.settings,.section,.summary,.stat,.stats>div,.info,.note,.alert,.notice,.banner,.callout,.pending,.empty,.form,.fieldset,fieldset,.group,.block,.item,.entry,.result,.preview,.editor,.composer,.thread,.bubble,.profile,.account,.setting,.pref,.option,.subpanel,.inner,.frame{
 background:var(--panel)!important;color:var(--text)!important;border-color:var(--line)!important;box-shadow:none!important}
header,.top,.topbar,.header{border-bottom:1px solid var(--line)!important}
aside,.sidebar{border-right:1px solid var(--line)!important}
.card,.kpi,.panel,.detail,.doc,.ms,.mini>div,.mic-card,.hero,.assist,.login,.box,.tile,.widget,.stat,.stats>div,.section,.settings,.setting,.pref,.option,fieldset,.group,.block,.summary,.info,.note,.preview,.editor,.profile,.account{
 border:1px solid var(--line)!important;border-radius:var(--r)!important}
.card:before,.assist:before,.hero:before{display:none!important}

/* rows, tabs and the selected state */
.row:hover,tr:hover td,.tab:hover,nav a:hover,.chip:hover,.hti:hover,.kbi:hover,.n:hover,li:hover,.item:hover,.entry:hover,.result:hover{background:var(--panel2)!important}
.row[aria-selected="true"],.tab[aria-current="true"],nav a.on,.tabs a.on,.ht.on,.on,.active,.selected,.current{background:var(--panel2)!important;color:var(--text)!important}
.tab[aria-current="true"],nav a.on,.tab.active,.tab.on{box-shadow:inset 0 -2px 0 var(--acc)!important}
aside .on,.sidebar .on,aside a.on{box-shadow:inset 2px 0 0 var(--acc)!important}

/* tables: exchange density, right-aligned figures, hairline rules */
table{border-color:var(--line)!important;border-collapse:collapse!important;background:transparent!important}
thead th,th{background:var(--panel2)!important;color:var(--mute)!important;font-weight:600!important;font-size:11px!important;
 text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)!important;padding:8px 10px!important;text-align:left}
td{border-top:1px solid var(--line)!important;color:var(--text)!important;padding:8px 10px!important;font-size:12.5px!important}
tbody tr:hover td{background:var(--panel2)!important}
td.r,th.r,.right,.num,.amount,.price,.qty,.total{text-align:right!important}

/* controls */
button,.btn,.button,input[type=submit],input[type=button],.rfbtn,.action,.cta{
 font-family:var(--sans)!important;font-size:12.5px!important;font-weight:600!important;
 border-radius:var(--rs)!important;border:1px solid var(--line2)!important;
 background:var(--panel2)!important;color:var(--text)!important;padding:8px 13px!important;cursor:pointer;
 transition:background .12s ease,border-color .12s ease}
button:hover,.btn:hover,.button:hover,.rfbtn:hover,.action:hover,.cta:hover{background:var(--panel3)!important;border-color:var(--line2)!important}
button:disabled,.btn:disabled,.button:disabled{opacity:.45!important;cursor:default!important}
/* one accent button per view: the thing the page is for */
.primary,.btn-primary,.btn.primary,button.primary,.save,.submit,.confirm,.btn-save,.send,.btn-send,.call,.btn-call,.add,.btn-add,.new,.btn-new{
 background:var(--acc)!important;color:var(--onacc)!important;border-color:var(--acc)!important}
.primary:hover,.btn-primary:hover,.btn.primary:hover,button.primary:hover,.save:hover,.submit:hover,.confirm:hover,.send:hover,.call:hover,.add:hover,.new:hover{filter:brightness(1.08)}
.danger,.btn-danger,.delete,.btn-delete,.remove,.destructive{background:transparent!important;color:var(--dn)!important;border-color:var(--dn)!important}
.danger:hover,.btn-danger:hover,.delete:hover,.remove:hover{background:rgba(var(--dnv),.12)!important}
.ghost,.btn-ghost,.secondary,.btn-secondary,.cancel,.btn-cancel{background:transparent!important;color:var(--mute)!important;border-color:var(--line)!important}
.ghost:hover,.btn-ghost:hover,.secondary:hover,.cancel:hover{background:var(--panel2)!important;color:var(--text)!important}

/* form fields - the settings screens are mostly these */
input,select,textarea{
 background:var(--panel2)!important;color:var(--text)!important;
 border:1px solid var(--line)!important;border-radius:var(--rs)!important;
 padding:8px 10px!important;font-size:12.5px!important;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc)!important;box-shadow:0 0 0 3px rgba(var(--accv),.16)!important}
input[type=checkbox],input[type=radio]{accent-color:var(--acc)!important;width:auto!important;padding:0!important}
label,.label,.field-label,dt{color:var(--mute)!important;font-size:11.5px!important;font-weight:500!important}
option{background:var(--panel)!important;color:var(--text)!important}
input[disabled],select[disabled],textarea[disabled],input[readonly]{opacity:.6!important}

/* status colour, one meaning everywhere */
.ok,.good,.success,.up,.positive,.paid,.active-state,.won{color:var(--up)!important}
.bad,.error,.fail,.down,.negative,.overdue,.lost{color:var(--dn)!important}
.warn,.warning,.pending-state,.due{color:var(--warn)!important}
.info,.new-state{color:var(--info)!important}
.badge,.tag,.pill,.chip,.status,.label-pill,.state{
 background:var(--panel3)!important;color:var(--text)!important;border:1px solid var(--line)!important;
 border-radius:999px!important;font-size:11px!important;font-weight:600!important;padding:2px 9px!important;letter-spacing:.01em}
.badge.ok,.tag.ok,.pill.ok,.status.ok,.chip.ok{background:rgba(var(--upv),.14)!important;color:var(--up)!important;border-color:rgba(var(--upv),.3)!important}
.badge.bad,.tag.bad,.pill.bad,.status.bad,.chip.bad{background:rgba(var(--dnv),.14)!important;color:var(--dn)!important;border-color:rgba(var(--dnv),.3)!important}
.badge.warn,.tag.warn,.pill.warn,.status.warn,.chip.warn{background:rgba(var(--accv),.14)!important;color:var(--acct)!important;border-color:rgba(var(--accv),.3)!important}

/* overlays */
dialog,.modal,.sheet,.drawer,.popover,.dropdown,.menu{border:1px solid var(--line)!important;border-radius:var(--rl)!important;box-shadow:var(--shadow)!important}
dialog::backdrop,.backdrop,.overlay,.scrim{background:rgba(0,0,0,.6)!important}
.toast{border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--shadow)!important}

/* brand and identity text stays legible whatever the page painted it */
.brand,.brand small,.logo,.who,.who div,.who div small,.clock,.clock b,.clock span,.name,.title,.heading{color:var(--text)!important}
.brand b,.logo b,.accent,.gold{color:var(--acct)!important}

/* avatars, dividers, empty states */
.avatar,.pic,.initials{background:var(--panel3)!important;color:var(--text)!important;border:1px solid var(--line)!important}
.divider,.sep,.rule{background:var(--line)!important;border-color:var(--line)!important}
.empty,.none,.nodata,.placeholder{color:var(--mute)!important;background:transparent!important;border:1px dashed var(--line)!important;border-radius:var(--r)!important}

/* progress and meters */
/* not .bar: a toolbar is a div of that class on more than one screen, and a
   999px radius round a row of selects is not a progress bar */
progress,.meter,.track{background:var(--panel3)!important;border-radius:999px!important;border:0!important}
progress::-webkit-progress-bar{background:var(--panel3)!important;border-radius:999px}
/* not .bar>span: the real fills are <i>, and the pages that own them style
   them already. This only ever hit the Cases toolbar's count badge. */
progress::-webkit-progress-value,.fill{background:var(--acc)!important;border-radius:999px}

/* iframes: the shell hosts every tab in one, and a white default flashes on each switch */
iframe{background:var(--bg)!important;border:0!important;color-scheme:inherit}

/* ---- shell sidebar: one navigation list, not a stack of buttons ---------- */
aside .brand,.brand{font-family:var(--sans)!important;font-weight:600!important;font-size:14px!important;
 letter-spacing:-.01em;color:var(--text)!important;border-bottom:1px solid var(--line)!important}
.brand small{font-family:var(--sans)!important;letter-spacing:.14em!important;color:var(--mute)!important;font-size:9px!important}
nav{padding:6px 8px!important}
.tab{color:var(--mute)!important;background:transparent!important;border:0!important;
 border-left:2px solid transparent!important;border-radius:var(--rs)!important;
 padding:9px 11px!important;font-size:13px!important;font-weight:500!important;margin:1px 0!important}
.tab:hover{background:var(--panel2)!important;color:var(--text)!important}
/* the selected tab is marked with a rail, not a filled block: it reads as position, not as a button */
.tab[aria-current="true"]{background:var(--panel2)!important;color:var(--text)!important;
 border-left-color:var(--acc)!important;font-weight:600!important;box-shadow:none!important}
.who{border-top:1px solid var(--line)!important;color:var(--mute)!important;font-size:12px!important}
.langbtn,#thm{background:var(--panel2)!important;color:var(--text)!important;border:1px solid var(--line)!important;
 border-radius:var(--rs)!important;font-size:11.5px!important;font-weight:600!important;padding:4px 8px!important}
.langbtn:hover,#thm:hover{background:var(--panel3)!important}

/* ---- call outcome pills -------------------------------------------------- */
/* Most of these are ordinary endings. Painting them all red taught people to
   ignore the colour; neutral is the default and colour is reserved for a fault. */
.st{background:var(--panel3)!important;color:var(--mute)!important;border:1px solid var(--line)!important;
 border-radius:999px!important;font-size:10.5px!important;font-weight:600!important;
 letter-spacing:.02em;padding:2px 8px!important}
.st.ok,.st.answered{background:rgba(var(--upv),.13)!important;color:var(--up)!important;border-color:rgba(var(--upv),.28)!important}
.st.bad,.st.failed,.st.error{background:rgba(var(--dnv),.13)!important;color:var(--dn)!important;border-color:rgba(var(--dnv),.28)!important}

/* any fill built from these legacy tokens carries readable text */
[style*="var(--gold)"],.gold-fill{color:var(--onacc)!important}
.fcount,.count,.showing{background:transparent!important;color:var(--mute)!important;
 border:0!important;font-size:11.5px!important;font-weight:600!important;padding:0!important}

/* ---- team messenger, notifications, help -------------------------------- */
/* These were authored white and sat as a lit panel in the middle of a dark app. */
#msgr-panel,#ntf-panel,#helpBox{background:var(--panel)!important;color:var(--text)!important;
 border:1px solid var(--line)!important;box-shadow:var(--shadow)!important}
#msgr-people{background:var(--panel2)!important;border-right:1px solid var(--line)!important}
#msgr-people .p{color:var(--text)!important;border-bottom:1px solid var(--line)!important}
#msgr-people .p:hover,#msgr-people .p.sel{background:var(--panel3)!important}
#msgr-list{background:var(--bg)!important}
#msgr-head,#ntf-panel h4{background:var(--panel)!important;color:var(--text)!important;
 border-bottom:1px solid var(--line)!important}
#msgr-head button,#ntf-panel h4 button{color:var(--mute)!important;background:transparent!important}
#msgr-head button:hover,#ntf-panel h4 button:hover{color:var(--text)!important}
.msgr-m{border:1px solid var(--line)!important}
.msgr-m.in{background:var(--panel2)!important;color:var(--text)!important}
.msgr-m.out{background:var(--acc)!important;color:var(--onacc)!important;border-color:var(--acc)!important}
#msgr-foot,#msgr-panel form{background:var(--panel)!important;border-top:1px solid var(--line)!important}
#ntf-list .n{background:var(--panel)!important;color:var(--text)!important;border-bottom:1px solid var(--line)!important}
#ntf-list .n:hover{background:var(--panel2)!important}
#helpBox h4{color:var(--text)!important}
#helpBox p,#helpBox label{color:var(--mute)!important}
#helpTabs .ht{background:transparent!important;color:var(--mute)!important;border:0!important;
 border-bottom:2px solid transparent!important;border-radius:0!important}
#helpTabs .ht.on{color:var(--text)!important;border-bottom-color:var(--acc)!important;background:transparent!important}
/* the on-call strip and the dialer bubble */
#oncall{background:var(--panel)!important;color:var(--text)!important;border:1px solid var(--line)!important;
 border-radius:999px!important;box-shadow:var(--shadow)!important}
#oncall .ring{color:var(--acct)!important}
/* the dialer is a row in the one menu now; its own floating circle covered it */
#dlLauncher{display:none!important}
#thm svg{width:15px;height:15px;display:block}

/* on break: unmistakable, and the figure is monospaced so it does not jitter */
#brk-btn.on{background:var(--up)!important;color:var(--onacc)!important;border-color:var(--up)!important}
#brk-btn.on span{font-variant-numeric:tabular-nums;font-family:var(--mono)!important;letter-spacing:-.01em}
#brk-btn.hit{transform:scale(.96)}
#brk-btn{transition:transform .12s ease,background .12s ease}

/* The one floating action. It was falling back to the browser's default button
   face (white) where the earlier rule lost; filled with the accent it reads as
   deliberate and matches the trading terminal's primary control. */
#msgr-dock #dock-fab{width:48px;height:48px;padding:0!important;border-radius:999px!important;
 display:flex!important;align-items:center;justify-content:center;
 background:var(--acc)!important;color:var(--onacc)!important;border:1px solid var(--acc)!important;
 box-shadow:var(--shadow)!important}
#msgr-dock #dock-fab:hover{filter:brightness(1.08);background:var(--acc)!important}
#msgr-dock #dock-fab svg{width:22px;height:22px;stroke:currentColor}

/* the menu scrolls rather than running off a short window */
#dock-menu{max-height:calc(100vh - 120px)!important;overflow-y:auto!important;overscroll-behavior:contain}
#msgr-dock{max-width:calc(100vw - 24px)}

/* ---- the floating menu's rows -------------------------------------------- */
/* These carried no colour from the theme, so they tracked neither palette. */
#dock-menu .msgr-ib,#dock-menu #helpBtn{background:var(--panel)!important;color:var(--text)!important;
 border:1px solid var(--line)!important;border-radius:var(--rs)!important;
 height:auto!important;padding:10px 12px!important;font:600 13px/1.2 var(--sans)!important;
 box-shadow:none!important;justify-content:flex-start!important;gap:10px!important;width:100%!important}
#dock-menu .msgr-ib:hover,#dock-menu #helpBtn:hover{background:var(--panel2)!important;border-color:var(--line2)!important}
#dock-menu .msgr-ib svg,#dock-menu #helpBtn svg{color:var(--mute)!important}
#dock-menu .msgr-ib:hover svg{color:var(--text)!important}
#dock-menu .msgr-ib .badge{background:var(--dn)!important;color:#fff!important;margin-left:auto!important}
#msgr-grip{background:var(--panel2)!important;border:1px solid var(--line)!important;color:var(--mute)!important}
#dock-menu{background:transparent!important}

/* ---- transcripts, summaries and any other preformatted block ------------ */
/* These carry the words of a call, so contrast here is not decoration. */
pre{background:var(--panel2)!important;color:var(--text)!important;
 border:1px solid var(--line)!important;border-radius:var(--rs)!important}
pre b,pre strong{color:var(--text)!important}
.sechd{color:var(--acct)!important;letter-spacing:.06em}
.panel,.detail .panel{background:var(--panel)!important;color:var(--text)!important}
/* the summary and verbatim blocks sit inside the expanded call row */
.detail,.detail td{background:var(--bg)!important;color:var(--text)!important}

/* ---- dialer ------------------------------------------------------------- */
/* Authored in its own navy; on the light theme it was a dark slab. */
#dlPanel{background:var(--panel)!important;color:var(--text)!important;
 border:1px solid var(--line)!important;border-radius:var(--rl)!important;box-shadow:var(--shadow)!important}
.dl-head{border-bottom:1px solid var(--line)!important;color:var(--text)!important}
.dl-head .t{color:var(--text)!important}
.dl-head .st{color:var(--mute)!important;background:var(--panel2)!important;
 border:1px solid var(--line)!important;border-radius:999px!important;padding:2px 8px!important}
.dl-head .st.ok{color:var(--up)!important;background:rgba(var(--upv),.13)!important;border-color:rgba(var(--upv),.28)!important}
.dl-head .x{color:var(--mute)!important;background:transparent!important;border:0!important}
.dl-head .x:hover{color:var(--text)!important}
#dlNum{background:var(--panel2)!important;border:1px solid var(--line)!important;color:var(--text)!important;
 border-radius:var(--rs)!important;font-family:var(--mono)!important;font-variant-numeric:tabular-nums}
#dlNum::placeholder{color:var(--dim)!important}
.dl-pad button{background:var(--panel2)!important;border:1px solid var(--line)!important;color:var(--text)!important;
 border-radius:var(--rs)!important;font-variant-numeric:tabular-nums}
.dl-pad button:hover{background:var(--panel3)!important}
.dl-pad button small{color:var(--mute)!important}
#dlPanel .call,#dlPanel button.call,#dlCall{background:var(--up)!important;color:var(--onacc)!important;border-color:var(--up)!important}
#dlPanel .hang,#dlHang{background:var(--dn)!important;color:#fff!important;border-color:var(--dn)!important}

/* ---- call outcome chips and the day tabs -------------------------------- */
/* span.b, not .b: the shell gives a notification card's body the same class,
   and every declaration here is !important, so a bare .b turned the card body
   into a dark pill that overflowed the card. Every chip in the tabs is a span. */
span.b{background:var(--panel3)!important;color:var(--mute)!important;border:1px solid var(--line)!important;
 border-radius:999px!important;font-size:11px!important;font-weight:600!important;padding:3px 9px!important;
 letter-spacing:0!important;text-transform:none!important;display:inline-block!important}
span.b.ok{background:rgba(var(--upv),.13)!important;color:var(--up)!important;border-color:rgba(var(--upv),.30)!important}
span.b.no,span.b.bad{background:rgba(var(--dnv),.13)!important;color:var(--dn)!important;border-color:rgba(var(--dnv),.30)!important}
span.b.na{background:var(--panel3)!important;color:var(--mute)!important;border-color:var(--line)!important}
span.b.warn{background:rgba(240,185,11,.14)!important;color:var(--acc)!important;border-color:rgba(240,185,11,.32)!important}
.tabs a{background:var(--panel2)!important;color:var(--mute)!important;border:1px solid var(--line)!important;
 border-radius:var(--rs)!important;box-shadow:none!important;font-weight:600!important;font-size:12.5px!important;
 text-decoration:none!important}
.tabs a:hover{background:var(--panel3)!important;color:var(--text)!important}
.tabs a.on{background:var(--acc)!important;color:var(--onacc)!important;border-color:var(--acc)!important}
/* the headline figures are the page's own, not the accent's */
.kpi .v{color:var(--text)!important;font-variant-numeric:tabular-nums}
.kpi .l{color:var(--mute)!important}

/* ---- account block, foot of the sidebar --------------------------------- */
.who{border-top:1px solid var(--line)!important;padding:12px 12px!important;
 display:flex!important;flex-direction:column;gap:9px;background:transparent!important}
.who .wu{display:flex;align-items:center;gap:9px;min-width:0}
.who .av{width:28px;height:28px;flex:0 0 auto;border-radius:999px;
 background:var(--panel3)!important;color:var(--text)!important;border:1px solid var(--line)!important;
 display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.who .wn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 color:var(--text)!important;font-size:12.5px;font-weight:600}
.who .wa{display:flex;gap:6px;align-items:center}
.who .wa form{display:inline;margin:0}
/* the inherited link styling underlined both of these */
.who button,.who .langbtn,.who .signout{text-decoration:none!important;font-size:11.5px!important;
 font-weight:600!important;padding:5px 10px!important;border-radius:var(--rs)!important;
 background:var(--panel2)!important;color:var(--mute)!important;border:1px solid var(--line)!important;cursor:pointer}
.who button:hover,.who .langbtn:hover{background:var(--panel3)!important;color:var(--text)!important}
.who .signout{flex:1 1 auto}
.who .signout:hover{color:var(--dn)!important;border-color:var(--dn)!important;background:transparent!important}

/* the big figures at the top of a page are the point of it */
.kpi b,.kpi strong,.kpi .n,.stat b,.stat .n{color:var(--text)!important;font-variant-numeric:tabular-nums}
.kpi small,.kpi .lbl,.stat small{color:var(--mute)!important;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px!important}