.fxLabel{display:block;font-size:11.5px;font-weight:500;color:var(--ui-text-secondary);margin:10px 0 5px}.fxInput{width:100%}.fxArea{width:100%;min-height:110px;padding:9px;resize:vertical}.fxQuick{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.fxList{display:grid;gap:7px}.fxChoice{width:100%;text-align:left;border:1px solid var(--ui-border);background:var(--ui-surface);border-radius:6px;padding:9px 10px;color:var(--ui-text-primary)}.fxChoice:hover{background:var(--ui-table-hover);border-color:var(--ui-border-strong)}.fxChoice b{display:block;font-size:12.5px}.fxChoice small{display:block;color:var(--ui-text-muted);font-size:11px;margin-top:3px}.fxDonutWrap{min-height:250px;display:grid;place-items:center;align-content:center;gap:12px}.fxDonut{width:160px;height:160px;border-radius:50%;background:conic-gradient(var(--ui-primary) 0 44%,var(--ui-accent) 44% 66%,var(--ui-info) 66% 84%,var(--ui-warning) 84% 94%,var(--ui-success) 94% 100%);position:relative}.fxDonut:after{content:"";position:absolute;inset:34px;border-radius:50%;background:#fff}.fxLegend{font-size:11.5px;color:var(--ui-text-secondary)}.fxReportHeat{min-height:230px;padding-top:12px}.fxFeeTable input{width:84px;min-width:84px}.drawerBody .table{font-size:12px}@media(max-width:680px){.fxQuick{display:grid;grid-template-columns:1fr 1fr}.fxFeeTable{min-width:650px}.fxDonut{width:130px;height:130px}}

/* --- charts -------------------------------------------------------------
 * One ordered categorical ramp, used in the same order by every chart, so a
 * colour means the same thing on the next screen as it did on the last. The
 * old charts each picked their own greens, ambers and blues, which made two
 * series that were the same thing look like two different ones.
 */
:root{
  --chart-1:#5A45CE; --chart-2:#B45FDC; --chart-3:#1048B0; --chart-4:#22B07D;
  --chart-5:#E8A33D; --chart-6:#C4517A;
  --chart-grid:rgba(23,26,40,.09);
  --chart-axis:rgba(23,26,40,.28);
  --chart-ink:#5C6270;
}
/* Flat by default. A chart surface is a reading, not a card: no gradient, no
   shadow, one hairline border, and strokes thin enough to read a value against. */
.barChart,.lineChart,.bubblePlot,.heatGrid,.heatmap,.fxDonutWrap,.sunburstWrap,
.interactiveRevenueChart,.sankeyScroll{
  background:none;box-shadow:none;
}
.bar,.barGroup>i,.miniBar>i{border-radius:2px;box-shadow:none}
.lineChart path,.interactiveRevenueChart path{stroke-width:1.6;vector-effect:non-scaling-stroke}
.axisLine{stroke:var(--chart-axis);stroke-width:1}
.revAxisText,.bubbleAxisX,.bubbleAxisY,.quadLabel,.heatLegend span,.hour,.day{
  font-size:9.5px;letter-spacing:.02em;color:var(--chart-ink);fill:var(--chart-ink);
}

/* Gridlines. The plots had none, so a bubble's position carried no magnitude —
   the quadrant it sat in was the only information the reader could recover. */
.bubblePlot{
  background-image:
    repeating-linear-gradient(to right,var(--chart-grid) 0 1px,transparent 1px 25%),
    repeating-linear-gradient(to bottom,var(--chart-grid) 0 1px,transparent 1px 25%);
  border:1px solid var(--ui-border);
}
.ctxBubble{
  box-shadow:none;border:1px solid rgba(255,255,255,.55);
  transition:transform .12s ease, filter .12s ease;cursor:default;
}
.ctxBubble:hover{transform:scale(1.06);filter:brightness(1.06);z-index:3}

/* The heat map reads as a table, so it is ruled like one. */
.heatCell2,.heatCell{border-radius:2px;transition:outline-color .1s ease}
.heatCell2:hover,.heatCell:hover{outline:2px solid var(--ui-primary);outline-offset:1px}
.heatGrid .day,.heatGrid .hour{font-weight:600}

/* Donuts and rings: no drop shadow, and a hover that says which arc is which. */
.contextDonut,.fxDonut{box-shadow:none;filter:none}
.sunburst circle{transition:opacity .12s ease}
.sunburst:hover circle{opacity:.45}
.sunburst circle:hover{opacity:1}

/* Legends line up with the ramp rather than restating a colour per screen. */
.legend i,.fxLegend i,.ctxLegendRow i{border-radius:2px;box-shadow:none}
.confidence{background:var(--chart-grid);border-radius:2px}
.confidence>i{border-radius:2px;background:var(--chart-1)}

/* --- the account menu in the top bar ------------------------------------
 * The avatar was a div with two letters in it: it named nobody and did
 * nothing, and the application had no way out except typing /logout. */
.userMenu{position:relative;flex:0 0 auto}
.topbar.lxGlobal .userMenu .avatar{cursor:pointer;padding:0;font-weight:700}
.topbar.lxGlobal .userMenu .avatar:hover{border-color:rgba(255,255,255,.7)}
.userPanel{position:absolute;top:calc(100% + 8px);right:0;min-width:232px;z-index:80;
  background:var(--ui-surface,#fff);color:var(--ui-text,#171A28);
  border:1px solid var(--ui-border,rgba(23,26,40,.12));border-radius:10px;
  box-shadow:0 12px 32px rgba(16,20,40,.18);padding:6px;text-align:left}
.userPanel[hidden]{display:none}
.userHead{display:flex;align-items:center;gap:10px;padding:8px 10px 10px}
.userPanel .avatar.lg{width:38px;height:38px;font-size:13px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--ui-accent-soft,#EEEAFB);color:var(--ui-accent-text,#5A45CE);
  border:1px solid var(--ui-border,rgba(23,26,40,.12));font-weight:700}
.userWho{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.userWho b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userWho small{font-size:11.5px;color:var(--ui-text-muted,#5C6270);text-transform:capitalize}
.userSep{height:1px;background:var(--ui-border,rgba(23,26,40,.12));margin:6px 4px}
.userItem{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;
  border:0;background:none;border-radius:7px;font:inherit;font-size:13px;
  color:inherit;cursor:pointer;text-align:left}
.userItem:hover{background:var(--ui-accent-soft,#EEEAFB)}
.userItem.danger{color:var(--ui-danger-text,#B3261E)}
.userItem.danger:hover{background:var(--ui-danger-soft,#FBE9E7)}

/* --- the customer-information tab ---------------------------------------
 * A record is read label-then-value, in groups. Two columns, and headings
 * that stay put while the values under them vary in length. */
.profileFields{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;align-items:start}
.profileFields h4{grid-column:1/-1;margin:14px 0 4px;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ui-text-muted);
  border-bottom:1px solid var(--ui-border);padding-bottom:5px}
.profileFields h4:first-child{margin-top:2px}
.fieldRow{display:flex;gap:12px;align-items:baseline;justify-content:space-between;
  padding:6px 0;border-bottom:1px dashed var(--ui-border);font-size:12.5px;min-width:0}
.fieldLabel{color:var(--ui-text-muted);white-space:nowrap;flex:0 0 auto}
.fieldValue{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.fieldValue .pill{font-weight:600;margin-left:4px}
@media (max-width:720px){.profileFields{grid-template-columns:1fr}}