@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..750&family=Instrument+Serif:ital@0;1&display=swap");
/* Example screens, part 1: tokens, app chrome, cards, KPIs, charts, tables.
   Design language: light premium SaaS (Linear / Stripe / Attio). 4px grid, 1px hairlines, layered soft shadows. */
.mx {
  --bg: #f7f8fa; --card: #fff; --bd: #e5e7eb; --bd2: #f0f1f4; --bd3: #d5d9e0; --tx: #0c111d; --tx2: #344054; --mu: #667085; --mu2: #98a2b3;
  --nv: #0f1b2d; --nv2: #1d2f4d; --gr: #12a26f; --gr2: #0b7c55; --grs: #e7f7ef; --bl: #3b6cf6; --bls: #ebf1ff; --am: #b45309; --ams: #fef3dc; --rd: #d92d20; --rds: #fef0ee; --vi: #7a5af8; --vis: #f1edff;
  --r1: 4px; --r2: 6px; --r3: 8px; --r4: 12px;
  --sh1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh2: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --sh3: 0 12px 28px -8px rgba(16, 24, 40, .16), 0 4px 10px -4px rgba(16, 24, 40, .06);
  --sh4: 0 28px 56px -18px rgba(16, 24, 40, .28), 0 10px 20px -10px rgba(16, 24, 40, .1);
  font-family: Inter, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif; font-size: 12.5px; line-height: 1.45; color: var(--tx); background: var(--bg); text-align: left;
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01", "ss03"; letter-spacing: -.003em; }
.mx * { box-sizing: border-box; }
.mx h1, .mx h2, .mx h3, .mx h4, .mx h5, .mx h6 { font-family: inherit; color: inherit; }
.mx b { font-weight: 600; }
.mx small { display: block; color: var(--mu); font-size: 11px; letter-spacing: 0; }
.mx p { margin: 0; }
.mx kbd, .mx-kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; font: 500 10px/1 Inter, sans-serif; color: var(--mu); background: #fff; border: 1px solid var(--bd); border-bottom-width: 2px; border-radius: 5px; }
.mx-i { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle; }
.mx-i.rot { transform: rotate(90deg); width: 12px; }
.mx-i.rot2 { transform: rotate(180deg); color: var(--mu); }
.mx-mut { color: var(--mu); }
.mx-num, .mx-kpi-v, .mx-table td, .mx-big { font-variant-numeric: tabular-nums; }

/* brand marks */
.mx-logo { width: 30px; height: 30px; display: inline-grid; place-items: center; flex-shrink: 0; position: relative; border-radius: 8px;
  background: linear-gradient(135deg, #19b886, #0b5e46); color: #fff; font-weight: 750; font-size: 14px; letter-spacing: -.02em; box-shadow: 0 1px 2px rgba(11, 94, 70, .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.mx-logo.mx-mark { background: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .18), 0 2px 6px -2px rgba(16, 24, 40, .18); border-radius: 27%; }
.mx-logo svg { width: 100%; height: 100%; display: block; }
.mx-logo.sm { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }
.mx-logo.xl { width: 64px; height: 64px; font-size: 30px; border-radius: 16px; }

/* chrome */
.mx-app { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 640px; background: var(--bg); }
.mx-side { background: #fbfbfc; border-right: 1px solid var(--bd); color: var(--tx2); display: flex; flex-direction: column; padding: 12px 10px 10px; min-width: 0; }
.mx-org { display: flex; gap: 9px; align-items: center; padding: 4px 6px 12px; min-width: 0; }
.mx-org > div { min-width: 0; flex: 1; }
.mx-org b { color: var(--tx); font-size: 13.5px; font-weight: 650; letter-spacing: -.015em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-org small { color: var(--mu); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-org .mx-logo { width: 28px; height: 28px; }
.mx-org-sw { color: var(--mu2); width: 14px; height: 14px; }
.mx-side-q { display: flex; align-items: center; gap: 8px; margin: 0 2px 12px; padding: 5px 8px; background: #fff; border: 1px solid var(--bd); border-radius: var(--r3); color: var(--mu2); box-shadow: var(--sh1); font-size: 12px; }
.mx-side-q .mx-i { width: 13px; height: 13px; }
.mx-side-q kbd { margin-left: auto; }
.mx-side-l { font-size: 10.5px; font-weight: 600; color: var(--mu2); padding: 0 10px 6px; letter-spacing: .02em; }
.mx-side nav { display: flex; flex-direction: column; gap: 1px; }
.mx-nav { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 12.5px; font-weight: 500; color: #475467; border-radius: var(--r2); border: 1px solid transparent; }
.mx-nav .mx-i { color: var(--mu2); width: 16px; height: 16px; }
.mx-nav.on { background: #fff; color: var(--tx); border-color: var(--bd); box-shadow: var(--sh1); font-weight: 600; }
.mx-nav.on .mx-i { color: var(--gr); }
.mx-nav em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; background: #f0f1f4; color: var(--mu); padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.mx-nav.on em { background: var(--grs); color: var(--gr2); }
.mx-side-f { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.mx-ai-mini { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; color: var(--gr2); position: relative;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #7ee2b8, #c9d7ff 60%, #e5e7eb) border-box; border: 1px solid transparent; box-shadow: var(--sh2); }
.mx-ai-mini > div { flex: 1; min-width: 0; }
.mx-ai-mini b { color: var(--tx); display: block; font-size: 12px; }
.mx-ai-mini small { color: var(--mu); }
.mx-ai-orb { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0;
  background: radial-gradient(circle at 30% 25%, #a7f3d0, #12a26f 45%, #0b4f3a 100%); box-shadow: 0 0 0 3px #e7f7ef, 0 4px 10px -2px rgba(18, 162, 111, .5); }
.mx-ai-orb .mx-i { width: 14px; height: 14px; fill: currentColor; stroke-width: 1; }
.mx-ai-go { color: var(--mu2) !important; width: 13px !important; }
.mx-me { display: flex; align-items: center; gap: 9px; padding: 8px 6px 2px; border-top: 1px solid var(--bd); }
.mx-me > div { flex: 1; min-width: 0; }
.mx-me b { display: block; font-size: 12px; color: var(--tx); }
.mx-me small { font-size: 10.5px; }
.mx-me > .mx-i { color: var(--mu2); }
.mx-body { min-width: 0; display: flex; flex-direction: column; }
.mx-bar { display: flex; align-items: center; gap: 14px; background: #fff; border-bottom: 1px solid var(--bd); padding: 0 18px; height: 46px; flex-shrink: 0; }
.mx-crumbs { display: flex; gap: 6px; align-items: center; color: var(--mu); white-space: nowrap; min-width: 0; font-weight: 500; }
.mx-crumbs b { color: var(--tx); overflow: hidden; text-overflow: ellipsis; }
.mx-crumbs i { font-style: normal; color: var(--bd3); display: inline-flex; }
.mx-crumbs i .mx-i { width: 12px; height: 12px; }
.mx-search { margin-left: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--bd); background: #fff; padding: 0 6px 0 10px; height: 32px; width: 270px; color: var(--mu2); border-radius: var(--r3); box-shadow: var(--sh1); flex-shrink: 0; }
.mx-search .mx-i { width: 14px; height: 14px; }
.mx-search kbd, .mx-search .mx-kbd { margin-left: auto; }
.mx-bar-r { display: flex; align-items: center; gap: 6px; color: var(--mu); flex-shrink: 0; }
.mx-ib { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r2); color: var(--mu); position: relative; }
.mx-bellw > i { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #f04438; box-shadow: 0 0 0 2px #fff; }
.mx-vsep { width: 1px; height: 20px; background: var(--bd); margin: 0 6px; }
.mx-i.bell { width: 16px; height: 16px; }
.mx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 14px 18px 2px; }
.mx-head > div:first-child { min-width: 0; }
.mx-head h4 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.022em; line-height: 1.2; }
.mx-head p { color: var(--mu); margin-top: 3px; }
.mx-head-r { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.mx-content { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 12px; }

/* atoms */
.mx-av { width: 26px; height: 26px; border-radius: 50%; background: #e7e9ee; color: #344054; font-size: 10px; font-weight: 650; display: inline-grid; place-items: center; flex-shrink: 0; letter-spacing: .01em; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .06); }
.mx-av.sm { width: 22px; height: 22px; font-size: 8.5px; }
.mx-av.lg { width: 36px; height: 36px; font-size: 12.5px; }
.mx-avs { display: inline-flex; }
.mx-avs .mx-av { box-shadow: 0 0 0 2px #fff; margin-left: -6px; }
.mx-avs .mx-av:first-child { margin-left: 0; }
.mx-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 550; line-height: 16px; padding: 1px 8px; border-radius: 999px; background: #f2f4f7; color: #475467; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .06); }
.mx-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; display: none; }
.mx-tag.green { background: var(--grs); color: #067647; box-shadow: inset 0 0 0 1px rgba(6, 118, 71, .14); }
.mx-tag.blue { background: var(--bls); color: #2f54d6; box-shadow: inset 0 0 0 1px rgba(47, 84, 214, .14); }
.mx-tag.amber { background: var(--ams); color: var(--am); box-shadow: inset 0 0 0 1px rgba(180, 83, 9, .16); }
.mx-tag.red { background: var(--rds); color: #b42318; box-shadow: inset 0 0 0 1px rgba(180, 35, 24, .14); }
.mx-tag.navy { background: #eef1f6; color: var(--nv); box-shadow: inset 0 0 0 1px rgba(15, 27, 45, .1); }
.mx-tag.violet { background: var(--vis); color: #5925dc; box-shadow: inset 0 0 0 1px rgba(89, 37, 220, .14); }
.mx-tag.green::before, .mx-tag.amber::before, .mx-tag.red::before, .mx-tag.blue::before { display: inline-block; }
.mx-dot { width: 8px; height: 8px; border-radius: 50%; background: #c7ced9; flex-shrink: 0; display: inline-block; margin-top: 5px; }
.mx-dot.green { background: var(--gr); box-shadow: 0 0 0 3px var(--grs); }
.mx-dot.amber { background: #f79009; box-shadow: 0 0 0 3px var(--ams); }
.mx-dot.red { background: #f04438; box-shadow: 0 0 0 3px var(--rds); }
.mx-dot.blue { background: var(--bl); box-shadow: 0 0 0 3px var(--bls); }
.mx-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r3); white-space: nowrap; font-weight: 600; font-size: 12px; letter-spacing: -.005em;
  background: linear-gradient(180deg, #22324c, var(--nv)); color: #fff; border: 1px solid #0a1322;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(16, 24, 40, .2); }
.mx-btn .mx-i { width: 14px; height: 14px; }
.mx-btn.ghost { background: #fff; color: var(--tx2); border-color: var(--bd); box-shadow: var(--sh1); }
.mx-btn.ghost .mx-i { color: var(--mu); }
.mx-btn.light { background: #fff; color: var(--nv); border-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.mx-btn.green, .mx-btn.brand { background: linear-gradient(180deg, #1fb07d, var(--gr)); border-color: #0d8a5d; }
.mx-btn.sm { height: 26px; padding: 0 9px; font-size: 11.5px; border-radius: var(--r2); }
.mx-seg { display: inline-flex; padding: 2px; gap: 2px; background: #f0f1f4; border: 1px solid var(--bd); border-radius: var(--r3); }
.mx-seg span { padding: 3px 10px; font-size: 11.5px; font-weight: 500; color: var(--mu); border-radius: 6px; }
.mx-seg span.on { background: #fff; color: var(--tx); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(16, 24, 40, .04); }
.mx-link { color: var(--bl); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.mx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mx-chips span { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--bd); background: #fff; padding: 4px 11px; color: var(--tx2); font-weight: 500; border-radius: 999px; box-shadow: var(--sh1); }
.mx-chips span.on { background: var(--nv); border-color: var(--nv); color: #fff; }
.mx-check { width: 15px; height: 15px; border: 1px solid var(--bd3); border-radius: 4px; display: inline-block; background: #fff; position: relative; flex-shrink: 0; box-shadow: var(--sh1); }
.mx-check.on { background: var(--gr); border-color: var(--gr); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.mx-check.on::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.mx-prog { height: 6px; background: #eef0f3; margin-top: 6px; border-radius: 999px; overflow: hidden; }
.mx-prog i { display: block; height: 100%; background: linear-gradient(90deg, #34d399, var(--gr)); border-radius: 999px; }
.mx-mini { height: 6px; background: #eef0f3; width: 90px; border-radius: 999px; overflow: hidden; }
.mx-mini i { display: block; height: 100%; background: linear-gradient(90deg, #34d399, var(--gr)); border-radius: 999px; }
.mx-big { font-size: 26px; font-weight: 650; letter-spacing: -.025em; }
.mx-big small { display: inline; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.mx-input { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--bd); background: #fff; border-radius: var(--r3); padding: 8px 10px; color: var(--mu2); margin-top: 10px; box-shadow: var(--sh1); }
.mx-eyebrow { font: 600 10.5px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--gr) !important; }
.mx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 16px; color: var(--mu); }
.mx-empty > span { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 1px solid var(--bd); box-shadow: var(--sh2); color: var(--mu); margin-bottom: 6px; }
.mx-empty b { color: var(--tx); }
.mx-empty .mx-btn { margin-top: 8px; }

/* layout */
.mx-g { display: grid; gap: 12px; }
.mx-g-21 { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.mx-g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mx-stack { display: flex; flex-direction: column; gap: 12px; }
.mx-card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--r4); padding: 12px 14px; min-width: 0; box-shadow: var(--sh2); }
.mx-card.flush { padding: 0; overflow: hidden; }
.mx-card > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 20px; }
.mx-card h5 { margin: 0; font-size: 13px; font-weight: 600; color: var(--tx); letter-spacing: -.01em; }
.mx-card.flush > header { padding: 12px 16px 0; }
.mx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mx-kpis.two { grid-template-columns: 1fr 1fr; }
.mx-kpi { background: #fff; border: 1px solid var(--bd); border-radius: var(--r4); padding: 11px 13px 9px; box-shadow: var(--sh2); min-width: 0; }
.mx-kpi-t { display: flex; justify-content: space-between; align-items: center; color: var(--mu); font-size: 11.5px; font-weight: 500; }
.mx-kpi-t .mx-i { color: var(--mu2); width: 14px; height: 14px; }
.mx-kpi-v { font-size: 22px; font-weight: 650; letter-spacing: -.028em; margin: 4px 0 2px; white-space: nowrap; line-height: 1.15; }
.mx-kpi-f { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; min-height: 26px; }
.mx-kpi-f em { font-style: normal; font-size: 11px; font-weight: 600; color: #067647; background: var(--grs); padding: 1px 7px 1px 5px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.mx-kpi-f em.bad { color: #b42318; background: var(--rds); }
.mx-kpi-f em.flat { background: none; }
.mx-kpi-ar { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mx-spark { flex-shrink: 0; color: var(--gr); overflow: visible; }
.mx-spark .ln, .mx-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.mx-spark circle { fill: #fff; stroke: currentColor; stroke-width: 1.5; }
.mx-spark.down { color: #f04438; }

/* charts */
.mx-area { width: 100%; height: 190px; display: block; overflow: visible; }
.mx-area .grid line { stroke: #eef0f3; stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.mx-area .grid line.base { stroke: var(--bd); stroke-dasharray: none; }
.mx-area .main { fill: none; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mx-area .cmp { fill: none; stroke: #b4bcc9; stroke-width: 1.4; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.mx-area .cursor { stroke: #98a2b3; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.mx-area .halo { fill: var(--gr); opacity: .14; }
.mx-area .pt { fill: #fff; stroke: var(--gr); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.mx-area text { font-size: 10px; fill: var(--mu2); font-family: Inter, sans-serif; font-variant-numeric: tabular-nums; }
.mx-area .tip rect { fill: var(--nv); filter: drop-shadow(0 6px 10px rgba(16, 24, 40, .25)); }
.mx-area .tip .tl { fill: #98a2b3; font-size: 9.5px; }
.mx-area .tip .tv { fill: #fff; font-size: 12px; font-weight: 650; }
.mx-legend { display: flex; gap: 14px; color: var(--mu); font-size: 11px; margin: -4px 0 6px; }
.mx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mx-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--gr); }
.mx-legend i.n { background: #fff; border: 1.5px dashed #b4bcc9; }
.mx-donut { display: flex; align-items: center; gap: 16px; }
.mx-donut svg { width: 128px; height: 128px; flex-shrink: 0; }
.mx-donut circle { fill: none; stroke-width: 12; stroke-linecap: butt; }
.mx-donut circle.trk { stroke: #f0f1f4; }
.mx-donut .big { font-size: 15px; font-weight: 700; fill: var(--tx); font-family: Inter, sans-serif; letter-spacing: -.02em; }
.mx-donut .small { font-size: 8.5px; fill: var(--mu); font-family: Inter, sans-serif; }
.mx-donut ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.mx-donut li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--bd2); color: var(--tx2); }
.mx-donut li:last-child { border-bottom: 0; }
.mx-donut li i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mx-donut li b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--tx); }
.mx-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mx-ring svg { width: 84px; height: 84px; }
.mx-ring circle { fill: none; stroke-width: 7; }
.mx-ring .bg { stroke: rgba(255, 255, 255, .16); }
.mx-card .mx-ring .bg, .mx-wizard main .mx-ring .bg { stroke: #eef0f3; }
.mx-ring .fg { stroke: #34d399; stroke-linecap: round; }
.mx-card .mx-ring .fg { stroke: var(--gr); }
.mx-ring text { font: 700 15px Inter, sans-serif; fill: currentColor; letter-spacing: -.02em; }
.mx-ring span { font-size: 10.5px; opacity: .8; }
.mx-hbars { display: flex; flex-direction: column; gap: 9px; }
.mx-hbar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 52px; gap: 12px; align-items: center; color: var(--tx2); }
.mx-hbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-hbar div { height: 8px; background: #f0f1f4; border-radius: 999px; overflow: hidden; }
.mx-hbar i { display: block; height: 100%; background: linear-gradient(90deg, #6ee7b7, var(--gr)); border-radius: 999px; }
.mx-hbar b { text-align: right; font-variant-numeric: tabular-nums; color: var(--tx); }
.mx-vbars { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.mx-vbars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.mx-vbars i { display: flex; flex-direction: column; justify-content: flex-end; background: #d6f2e5; border-radius: 4px 4px 2px 2px; overflow: hidden; }
.mx-vbars u { display: block; background: linear-gradient(180deg, #2cc28b, var(--gr)); }
.mx-vbars small { text-align: center; font-size: 9.5px; color: var(--mu2); margin-top: 4px; }

/* tables and lists */
.mx-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.mx-table th { text-align: left; font-size: 11px; font-weight: 550; color: var(--mu); padding: 8px 12px; background: #fafbfc; border-bottom: 1px solid var(--bd); white-space: nowrap; letter-spacing: 0; text-transform: none; }
.mx-table td { padding: 9px 12px; border-bottom: 1px solid var(--bd2); white-space: nowrap; vertical-align: middle; color: var(--tx2); }
.mx-table td b { color: var(--tx); }
.mx-table tr:last-child td { border-bottom: 0; }
.mx-card:not(.flush) .mx-table th:first-child, .mx-card:not(.flush) .mx-table td:first-child { padding-left: 0; }
.mx-card:not(.flush) .mx-table th { background: none; }
.mx-table tr.hl td { background: #f5fbf8; }
.mx-table tr.hl td:first-child { box-shadow: inset 2px 0 0 var(--gr); }
.mx-table td.mut { color: var(--mu); }
.mx-table .r { text-align: right; }
.mx-table tr.tot td { font-size: 14px; border-top: 1px solid var(--bd3); border-bottom: 0; color: var(--tx); }
.mx-co { display: flex; gap: 10px; align-items: center; }
.mx-co small { margin-top: 1px; }
.mx-fav { width: 28px; height: 28px; border-radius: 7px; background: #eef4ff; color: #3056d3; font-weight: 700; font-size: 12px; display: grid; place-items: center; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .06); }
.mx-table tr:nth-child(8n+2) .mx-fav { background: #ecfdf3; color: #067647; }
.mx-table tr:nth-child(8n+3) .mx-fav { background: #fff6ed; color: #c4320a; }
.mx-table tr:nth-child(8n+4) .mx-fav { background: #f4f3ff; color: #5925dc; }
.mx-table tr:nth-child(8n+5) .mx-fav { background: #fdf2fa; color: #c11574; }
.mx-table tr:nth-child(8n+6) .mx-fav { background: #f0f9ff; color: #026aa2; }
.mx-table tr:nth-child(8n+7) .mx-fav { background: #fefbe8; color: #a15c07; }
.mx-table tr:nth-child(8n) .mx-fav { background: #f2f4f7; color: #344054; }
.mx-score { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.mx-score div { width: 64px; height: 6px; background: #eef0f3; border-radius: 999px; overflow: hidden; }
.mx-score i { display: block; height: 100%; background: #b4bcc9; border-radius: 999px; }
.mx-score i.hot { background: linear-gradient(90deg, #34d399, var(--gr)); }
.mx-feed { display: flex; flex-direction: column; }
.mx-feed-i { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--bd2); }
.mx-feed-i:first-child { border-top: 0; padding-top: 2px; }
.mx-feed-i > div { flex: 1; min-width: 0; }
.mx-feed-i time { color: var(--mu2); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mx-agent { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--bd2); }
.mx-agent:first-of-type { border-top: 0; padding-top: 0; }
.mx-agent > div { flex: 1; min-width: 0; }
.mx-agent-i { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(145deg, #effbf5, #d9f4e7); color: var(--gr2); display: grid; place-items: center; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(18, 162, 111, .15); }
.mx-appr { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--bd2); }
.mx-appr:first-of-type { border-top: 0; padding-top: 0; }
.mx-appr > div { flex: 1; min-width: 0; }
.mx-yes { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(180deg, #1fb07d, var(--gr)); color: #fff; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(11, 124, 85, .35); }
.mx-todo { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--bd2); }
.mx-todo:first-of-type { border-top: 0; padding-top: 0; }
.mx-todo b { flex: 1; font-weight: 500; }
.mx-todo b.strike { text-decoration: line-through; color: var(--mu2); }
.mx-file { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--bd2); }
.mx-file:first-of-type { border-top: 0; padding-top: 0; }
.mx-file > div { flex: 1; min-width: 0; }
.mx-file > span { width: 28px; height: 34px; border-radius: 4px 9px 4px 4px; background: linear-gradient(180deg, #fff1ef, #fee4e2); color: #d92d20; font-size: 8.5px; font-weight: 750; display: grid; place-items: end center; padding-bottom: 5px; box-shadow: inset 0 0 0 1px rgba(217, 45, 32, .18); }
.mx-msg { display: flex; gap: 8px; margin-bottom: 10px; }
.mx-msg p { background: #f5f6f8; padding: 7px 10px; margin-top: 3px; border-radius: 4px 12px 12px 12px; }
.mx-run { display: grid; grid-template-columns: 12px 48px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--bd2); }
.mx-run:first-of-type { border-top: 0; padding-top: 0; }
.mx-run .mx-dot { margin: 0; }
.mx-run time { color: var(--mu2); font-size: 11px; }

/* abstract photography (K.photo). Layered gradients plus film grain so imagery reads as a real photo */
.mx-photo { position: relative; overflow: hidden; border-radius: var(--r3); min-height: 120px; background: #1d2b3a; isolation: isolate; }
.mx-photo i { position: absolute; display: block; }
.mx-photo::after { content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mx-photo::before { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .35)); pointer-events: none; }
/* garden at dusk with warm path lights */
.ph-garden { background: linear-gradient(180deg, #1c2340 0%, #3b3a63 34%, #c9776b 58%, #f3b37c 66%, #1a2419 67%, #0c140e 100%); }
.ph-garden i:nth-child(1) { left: -10%; right: 45%; bottom: 20%; height: 42%; background: radial-gradient(ellipse at 40% 100%, #16261a 60%, transparent 62%); filter: blur(1px); }
.ph-garden i:nth-child(2) { left: 40%; right: -15%; bottom: 22%; height: 50%; background: radial-gradient(ellipse at 60% 100%, #0f1d13 58%, transparent 60%); }
.ph-garden i:nth-child(3) { left: 0; right: 0; bottom: 6%; height: 30%; background: radial-gradient(circle at 18% 60%, rgba(255, 214, 140, .95) 0 2px, rgba(255, 190, 110, .35) 3px, transparent 16px), radial-gradient(circle at 42% 70%, rgba(255, 214, 140, .95) 0 2px, rgba(255, 190, 110, .35) 3px, transparent 16px), radial-gradient(circle at 66% 62%, rgba(255, 214, 140, .95) 0 2px, rgba(255, 190, 110, .35) 3px, transparent 16px), radial-gradient(circle at 88% 74%, rgba(255, 214, 140, .95) 0 2px, rgba(255, 190, 110, .35) 3px, transparent 16px); }
.ph-garden i:nth-child(4) { left: 20%; right: 20%; top: 12%; height: 50%; background: radial-gradient(circle at 70% 30%, rgba(155, 255, 214, .8) 0 1.5px, transparent 3px), radial-gradient(circle at 30% 50%, rgba(155, 255, 214, .7) 0 1.5px, transparent 3px), radial-gradient(circle at 50% 20%, rgba(155, 255, 214, .7) 0 1px, transparent 3px), radial-gradient(circle at 85% 60%, rgba(155, 255, 214, .7) 0 1px, transparent 3px); filter: drop-shadow(0 0 4px #6ff5c2); }
/* warm interior with window light */
.ph-interior { background: linear-gradient(180deg, #e9ddcc 0%, #dccab2 62%, #b89877 63%, #9d7b5b 100%); }
.ph-interior i:nth-child(1) { left: 58%; top: 10%; width: 28%; height: 46%; background: linear-gradient(180deg, #fbf6ee, #efe3d0); box-shadow: 0 0 40px 10px rgba(255, 245, 225, .7); border: 4px solid #cdb697; }
.ph-interior i:nth-child(2) { left: 8%; bottom: 22%; width: 52%; height: 24%; background: linear-gradient(180deg, #5d6b5f, #435046); border-radius: 12px 12px 4px 4px; box-shadow: 0 18px 24px -10px rgba(0, 0, 0, .35); }
.ph-interior i:nth-child(3) { left: 12%; bottom: 38%; width: 18%; height: 14%; background: #7b8a7c; border-radius: 8px; }
.ph-interior i:nth-child(4) { left: 64%; bottom: 14%; width: 10%; height: 36%; background: radial-gradient(ellipse at 50% 20%, #5f8a5a 0 40%, transparent 42%), linear-gradient(#0000 55%, #c9a57f 55%); }
/* studio product shot */
.ph-product { background: radial-gradient(90% 70% at 50% 35%, #f6f3ee 0%, #e4ddd1 55%, #cfc6b6 100%); }
.ph-product i:nth-child(1) { left: 50%; bottom: 16%; width: 30%; height: 8%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0, 0, 0, .35), transparent 70%); filter: blur(3px); }
.ph-product i:nth-child(2) { left: 50%; bottom: 20%; width: 20%; height: 52%; transform: translateX(-50%); border-radius: 12px 12px 8px 8px; background: linear-gradient(90deg, #1b2530 0%, #3a4a58 30%, #202b36 60%, #0f161d 100%); }
.ph-product i:nth-child(3) { left: 50%; bottom: 70%; width: 9%; height: 6%; transform: translateX(-50%); background: linear-gradient(90deg, #a0835a, #e6cf9e 40%, #8a6d45); border-radius: 3px; }
.ph-product i:nth-child(4) { left: 46%; bottom: 36%; width: 8%; height: 18%; background: #f6efe2; border-radius: 2px; opacity: .92; }
/* coastline */
.ph-coast { background: linear-gradient(180deg, #8ec5e8 0%, #cfe7f3 42%, #2a86a8 43%, #3fa3bf 58%, #e9d7b4 60%, #d8c095 100%); }
.ph-coast i:nth-child(1) { left: -5%; right: 50%; top: 30%; height: 16%; background: radial-gradient(ellipse at 20% 100%, #4f6b52 55%, transparent 57%); }
.ph-coast i:nth-child(2) { left: 0; right: 0; top: 56%; height: 5%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8) 20%, rgba(255, 255, 255, .5) 60%, transparent); filter: blur(1.5px); }
.ph-coast i:nth-child(3) { right: 12%; top: 10%; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 250, 220, .95), rgba(255, 250, 220, 0) 70%); }
/* clinic / wellness */
.ph-clinic { background: linear-gradient(160deg, #eef6f5 0%, #dcecea 50%, #c3dcd8 100%); }
.ph-clinic i:nth-child(1) { left: 10%; top: 18%; width: 34%; height: 58%; border-radius: 50% 50% 8px 8px; background: linear-gradient(180deg, #9cc9c1, #6aa99f); filter: blur(2px); }
.ph-clinic i:nth-child(2) { right: 8%; bottom: 12%; width: 46%; height: 30%; border-radius: 10px; background: #fbfdfd; box-shadow: 0 16px 30px -12px rgba(30, 80, 70, .35); }
.ph-clinic i:nth-child(3) { right: 16%; top: 14%; width: 22%; height: 30%; border-radius: 50%; background: radial-gradient(circle, #f4fbf9, transparent 70%); }
/* food and hospitality */
.ph-food { background: radial-gradient(100% 80% at 50% 50%, #5a3b26 0%, #2e1d12 70%, #1a100a 100%); }
.ph-food i:nth-child(1) { left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #f7f3ec 0 58%, #e8e2d8 60%, #d6cfc3 66%, transparent 67%); box-shadow: 0 20px 30px -10px rgba(0, 0, 0, .6); }
.ph-food i:nth-child(2) { left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 40%, #e7a54a, #b8612b 45%, #7a3a1c 70%, transparent 72%), radial-gradient(circle at 65% 60%, #6f9a3c 0 12%, transparent 14%); }
.ph-food i:nth-child(3) { left: 8%; top: 12%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 160, .55), transparent 70%); }
/* team at work, soft bokeh */
.ph-team { background: linear-gradient(180deg, #d9d4cc 0%, #c4bdb2 55%, #8f8577 100%); }
.ph-team i:nth-child(1) { left: 14%; bottom: 0; width: 24%; height: 70%; border-radius: 45% 45% 10px 10px; background: radial-gradient(circle at 50% 18%, #c89a78 0 14%, transparent 15%), linear-gradient(#0000 30%, #2f3d52 30%); }
.ph-team i:nth-child(2) { left: 44%; bottom: 0; width: 26%; height: 78%; border-radius: 45% 45% 10px 10px; background: radial-gradient(circle at 50% 16%, #8a5f45 0 13%, transparent 14%), linear-gradient(#0000 28%, #e9e4dc 28%); }
.ph-team i:nth-child(3) { left: 74%; bottom: 0; width: 22%; height: 66%; border-radius: 45% 45% 10px 10px; background: radial-gradient(circle at 50% 18%, #e0b99a 0 15%, transparent 16%), linear-gradient(#0000 31%, #6b7f67 31%); }
.ph-team i:nth-child(4) { inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .5), transparent 20%), radial-gradient(circle at 80% 15%, rgba(255, 240, 210, .45), transparent 18%); filter: blur(6px); }
.ph-team { filter: saturate(.95); }
/* city at night */
.ph-city { background: linear-gradient(180deg, #0b1220 0%, #1b2742 55%, #3b3350 100%); }
.ph-city i:nth-child(1) { left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(90deg, #0c1322 0 8%, transparent 8% 10%, #111a2e 10% 22%, transparent 22% 24%, #0d1528 24% 31%, transparent 31% 33%, #121c33 33% 50%, transparent 50% 52%, #0c1426 52% 64%, transparent 64% 66%, #101a30 66% 82%, transparent 82% 84%, #0b1222 84% 100%); clip-path: polygon(0 30%, 8% 30%, 8% 10%, 22% 10%, 22% 40%, 31% 40%, 31% 0, 50% 0, 50% 25%, 64% 25%, 64% 5%, 82% 5%, 82% 35%, 100% 35%, 100% 100%, 0 100%); }
.ph-city i:nth-child(2) { left: 0; right: 0; bottom: 0; height: 50%; background-image: radial-gradient(rgba(255, 214, 140, .8) 1px, transparent 1.5px); background-size: 9px 11px; opacity: .55; mask: linear-gradient(transparent, #000 30%); -webkit-mask: linear-gradient(transparent, #000 30%); }
.ph-team i:nth-child(-n+3) { filter: blur(1.4px); }
.ph-city i:nth-child(2) { clip-path: polygon(0 30%, 8% 30%, 8% 10%, 22% 10%, 22% 40%, 31% 40%, 31% 0, 50% 0, 50% 25%, 64% 25%, 64% 5%, 82% 5%, 82% 35%, 100% 35%, 100% 100%, 0 100%); height: 55%; opacity: .45; }
.ph-city::before { background: radial-gradient(80% 50% at 50% 100%, rgba(255, 170, 90, .18), transparent 70%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .35)); }
.mx-tag:has(> .mx-i)::before { display: none !important; }
.mx-tag > .mx-i { width: 11px; height: 11px; }

/* ==== Shared polish layer (core). Frame, product families, avatars, marks, charts, scenes. ==== */

/* fixed 1180 x 680 frame: every screen is exactly the same height; content below the fold is cut like a real screenshot */
.mx { --ac: #12a26f; --acs: color-mix(in srgb, var(--ac) 11%, #fff); --ac2: color-mix(in srgb, var(--ac) 78%, #000); --acl: color-mix(in srgb, var(--ac) 55%, #fff);
  height: 680px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.mx > * { flex: 1 1 auto; min-height: 0; }
.mx-app { min-height: 0; height: 100%; }
.mx-side { min-height: 0; overflow: hidden; }
.mx-body { min-height: 0; overflow: hidden; }
.mx-content { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* browser chrome around the example (modal + harness) */
.browser-bar { gap: 14px; }
.browser-bar .dots { display: inline-flex; gap: 7px; flex-shrink: 0; padding-left: 2px; }
.browser-bar .dots i { width: 11px; height: 11px; margin: 0; border: 0; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .2); }
.browser-bar .dots i:nth-child(2) { background: #febc2e; }
.browser-bar .dots i:nth-child(3) { background: #28c840; }
.browser-bar .url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-left: 26px; border-radius: 6px; position: relative;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 11h12v10H6zM8.5 11V8a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E") 9px 50% / 11px no-repeat; }

/* accent follows the product family */
.mx-nav.on .mx-i { color: var(--ac); }
.mx-nav.on em { background: var(--acs); color: var(--ac2); }
.mx-prog i, .mx-mini i { background: linear-gradient(90deg, var(--acl), var(--ac)); }
.mx-hbar i { background: linear-gradient(90deg, var(--acl), var(--ac)); }
.mx-vbars i { background: var(--acs); }
.mx-vbars u { background: linear-gradient(180deg, var(--acl), var(--ac)); }
.mx-card .mx-ring .fg { stroke: var(--ac); }
.mx-spark { color: var(--ac); }
.mx-spark.down { color: #f04438; }
.mx-spark.flat { color: #98a2b3; }
.mx-legend i { background: var(--ac); }
.mx-eyebrow { color: var(--ac) !important; }
.mx-agent-i { background: var(--acs); color: var(--ac2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 22%, transparent); }
.mx-btn.brand { background: linear-gradient(180deg, var(--acl), var(--ac)); border-color: var(--ac2); }

/* page header subtitle: parts render as separate spans with a hairline between, not a string of middle dots */
.mx-head p span + span::before { content: ""; display: inline-block; width: 1px; height: 10px; background: var(--bd3); margin: 0 9px; vertical-align: -1px; }

/* sidebar variants */
.mx-nav .sw { width: 9px; height: 9px; border-radius: 3px; margin: 0 3px 0 4px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.mx-side-l.x { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.mx-side-l.x .mx-i { width: 12px; height: 12px; }
.mx-app.dense .mx-nav { padding: 5px 10px; font-size: 12px; }
.mx-app.dense .mx-side-q { margin-bottom: 10px; }
.mx-app.side-tint .mx-side { background: color-mix(in srgb, var(--ac) 5%, #f8f9fb); border-right-color: color-mix(in srgb, var(--ac) 14%, #e5e7eb); }
.mx-app.side-tint .mx-nav.on { border-color: color-mix(in srgb, var(--ac) 22%, #e5e7eb); }
.mx-app.side-dark .mx-side { background: linear-gradient(180deg, #111726 0%, #0c111c 100%); border-right-color: #1d2536; color: #c3cad6; }
.mx-app.side-dark .mx-org b { color: #f5f7fa; }
.mx-app.side-dark .mx-org small, .mx-app.side-dark .mx-org-sw { color: #7c879b; }
.mx-app.side-dark .mx-side-q { background: #172033; border-color: #243049; color: #7c879b; box-shadow: none; }
.mx-app.side-dark .mx-side-q kbd { background: #1d2840; border-color: #2c3953; color: #8a96ab; }
.mx-app.side-dark .mx-side-l { color: #5f6b80; }
.mx-app.side-dark .mx-nav { color: #aab3c2; }
.mx-app.side-dark .mx-nav .mx-i { color: #6b778c; }
.mx-app.side-dark .mx-nav.on { background: #1b2436; border-color: #2a3550; color: #fff; box-shadow: inset 2px 0 0 var(--ac); }
.mx-app.side-dark .mx-nav.on .mx-i { color: var(--acl); }
.mx-app.side-dark .mx-nav em { background: #1f2a40; color: #8f9bb0; }
.mx-app.side-dark .mx-nav.on em { background: color-mix(in srgb, var(--ac) 28%, #111726); color: #fff; }
.mx-app.side-dark .mx-me { border-top-color: #1e2738; }
.mx-app.side-dark .mx-me b { color: #eef1f6; }
.mx-app.side-dark .mx-me small, .mx-app.side-dark .mx-me > .mx-i { color: #6b778c; }
.mx-app.side-dark .mx-ai-mini { background: linear-gradient(#151d2e, #151d2e) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--ac) 70%, #fff), #2a3550 70%) border-box; color: var(--acl); box-shadow: none; }
.mx-app.side-dark .mx-ai-mini b { color: #f1f4f8; }
.mx-app.side-dark .mx-ai-mini small { color: #7c879b; }
.mx-ai-orb { background: radial-gradient(circle at 30% 25%, #fff 0, var(--acl) 18%, var(--ac) 55%, var(--ac2) 100%); box-shadow: 0 0 0 3px var(--acs), 0 4px 10px -2px color-mix(in srgb, var(--ac) 50%, transparent); }
.mx-app.side-dark .mx-ai-orb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 22%, #111726); }

/* sidebar footers */
.mx-usage, .mx-syncf, .mx-teamf, .mx-statf, .mx-helpf { padding: 10px; border-radius: 10px; background: #fff; border: 1px solid var(--bd); box-shadow: var(--sh1); font-size: 11.5px; }
.mx-usage > div:first-child { display: flex; justify-content: space-between; align-items: baseline; }
.mx-usage b { font-size: 12.5px; color: var(--tx); font-variant-numeric: tabular-nums; }
.mx-usage b span { font-weight: 500; color: var(--mu); font-size: 11px; }
.mx-usage .mx-prog { margin: 7px 0 6px; height: 5px; }
.mx-usage > small:last-child { font-size: 10.5px; }
.mx-syncf { display: flex; flex-direction: column; gap: 8px; }
.mx-syncf-i { display: flex; gap: 4px; }
.mx-syncf b { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tx); }
.mx-syncf b .mx-dot { margin: 0; }
.mx-teamf, .mx-statf, .mx-helpf { display: flex; align-items: center; gap: 9px; }
.mx-teamf > div, .mx-statf > div, .mx-helpf > div { flex: 1; min-width: 0; }
.mx-teamf b, .mx-statf b, .mx-helpf b { display: block; font-size: 12px; color: var(--tx); }
.mx-helpf > .mx-i { color: var(--ac); }
.mx-pulse { width: 10px; height: 10px; border-radius: 50%; background: #17b26a; box-shadow: 0 0 0 4px rgba(23, 178, 106, .18), 0 0 0 8px rgba(23, 178, 106, .07); flex-shrink: 0; margin: 0 4px; }
.mx-app.side-dark .mx-usage, .mx-app.side-dark .mx-syncf, .mx-app.side-dark .mx-teamf, .mx-app.side-dark .mx-statf, .mx-app.side-dark .mx-helpf { background: #151d2e; border-color: #243049; box-shadow: none; }
.mx-app.side-dark .mx-usage b, .mx-app.side-dark .mx-syncf b, .mx-app.side-dark .mx-teamf b, .mx-app.side-dark .mx-statf b, .mx-app.side-dark .mx-helpf b { color: #eef1f6; }
.mx-app.side-dark .mx-usage small, .mx-app.side-dark .mx-syncf small, .mx-app.side-dark .mx-teamf small, .mx-app.side-dark .mx-statf small { color: #7c879b; }
.mx-app.side-dark .mx-usage .mx-prog { background: #243049; }
.mx-app.side-dark .mx-avs .mx-av { box-shadow: 0 0 0 2px #151d2e; }

/* avatars: portraits, initials, stacks, agents */
.mx-face { overflow: hidden; background: #e7e9ee; padding: 0; }
.mx-face svg { width: 100%; height: 100%; display: block; }
.mx-avs { align-items: center; }
.mx-avs .mx-av { box-shadow: 0 0 0 2px #fff; margin-left: -5px; position: relative; }
.mx-avs .mx-av:first-child { margin-left: 0; }
.mx-av.mx-more { background: #f2f4f7; color: var(--mu); font-size: 9px; }
.mx-av.xs { width: 18px; height: 18px; font-size: 7.5px; }
.mx-av.xl { width: 48px; height: 48px; font-size: 16px; }
.mx-agent-av { width: 30px; height: 30px; position: relative; flex-shrink: 0; display: inline-block; }
.mx-agent-av svg { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 2px 6px -1px rgba(16, 24, 40, .3), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.mx-agent-av i { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #17b26a; box-shadow: 0 0 0 2px #fff; }
.mx-phone-h .mx-agent-av i { box-shadow: 0 0 0 2px #13233c; }

/* business marks and app tiles */
.mx-fav.g { background: none !important; box-shadow: none; color: inherit; }
.mx-fav.g svg, .mx-appi svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mx-appi { width: 26px; height: 26px; display: inline-block; flex-shrink: 0; border-radius: 7px; filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .08)); }
.mx-appi.xs { width: 18px; height: 18px; }
.mx-appi.sm { width: 22px; height: 22px; }
.mx-appi.lg { width: 34px; height: 34px; }
.mx-fav.xs { width: 18px; height: 18px; }
.mx-fav.sm { width: 22px; height: 22px; }

/* KPI tones */
.mx-kpi-f em.good { color: #067647; background: var(--grs); }
.mx-kpi-f em.warn { color: var(--am); background: var(--ams); }
.mx-kpi-f em.flat { color: var(--mu); background: #f2f4f7; }
.mx-kpi-f em.none { background: none; }
.mx-kpi-s { display: inline; margin-left: 6px; font-size: 10.5px; color: var(--mu2); }

/* area chart with HTML overlays (axis labels, callout, annotation) */
.mx-chart { position: relative; width: 100%; font-variant-numeric: tabular-nums; }
.mx-chart .mx-area { position: absolute; inset: 0; width: 100%; height: 100%; }
.mx-area .main { stroke-width: 2.4; }
.mx-area .halo, .mx-area .pt { display: none; }
.mx-area .note { stroke: color-mix(in srgb, var(--ac) 45%, #fff); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.mx-chart .yl { position: absolute; left: 0; transform: translateY(-50%); text-align: right; font-size: 10px; color: var(--mu2); line-height: 1; white-space: nowrap; }
.mx-chart .xl { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 10px; color: var(--mu2); line-height: 1; white-space: nowrap; }
.mx-chart .xl.a0 { transform: none; }
.mx-chart .xl.a1 { transform: translateX(-100%); }
.mx-chart .pt, .mx-chart .np { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ac); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ac) 16%, transparent); }
.mx-chart .np { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-width: 2px; box-shadow: none; }
.mx-chart .nt { position: absolute; top: -4px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--ac2); background: #fff; border: 1px solid color-mix(in srgb, var(--ac) 30%, #fff); padding: 2px 7px; border-radius: 999px; white-space: nowrap; box-shadow: var(--sh1); }
.mx-chart .nt i { width: 6px; height: 6px; border-radius: 50%; background: var(--ac); }
.mx-chart .tp { position: absolute; transform: translateX(-50%); background: var(--nv); color: #fff; border-radius: 8px; padding: 7px 10px 8px; min-width: 112px; box-shadow: 0 10px 22px -8px rgba(16, 24, 40, .45); z-index: 2; pointer-events: none; }
.mx-chart .tp.l { transform: translateX(calc(-100% - 14px)); }
.mx-chart .tp small { color: #98a2b3; font-size: 10px; }
.mx-chart .tp b { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.01em; margin: 1px 0 2px; white-space: nowrap; }
.mx-chart .tp em { font-style: normal; font-size: 10.5px; font-weight: 600; color: #6ee7b7; white-space: nowrap; }
.mx-chart .tp em.bad { color: #fda29b; }
.mx-legend i.c { background: #d0d5dd; }

/* labelled bar chart (K.bars) */
.mx-bars { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; font-variant-numeric: tabular-nums; }
.mx-bars .ax { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: var(--mu2); text-align: right; padding-bottom: 18px; line-height: 1; margin-top: -5px; }
.mx-bars .pl { position: relative; display: flex; align-items: stretch; gap: 8px; padding-bottom: 18px; }
.mx-bars .pl hr { position: absolute; left: 0; right: 0; margin: 0; border: 0; border-top: 1px dashed #eaecf0; }
.mx-bars .pl hr:nth-child(1) { top: 0; }
.mx-bars .pl hr:nth-child(2) { top: calc((100% - 18px) / 2); }
.mx-bars .pl hr:nth-child(3) { top: calc(100% - 18px); border-top-style: solid; border-color: var(--bd); }
.mx-bars .pl > div { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; }
.mx-bars .pl > div > span { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.mx-bars i, .mx-bars u { display: block; width: 44%; max-width: 26px; border-radius: 4px 4px 1px 1px; position: relative; }
.mx-bars i { background: linear-gradient(180deg, var(--acl), var(--ac)); }
.mx-bars u { background: #e4e7ec; }
.mx-bars .hi i { background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 80%, #fff), var(--ac2)); box-shadow: 0 0 0 3px var(--acs); }
.mx-bars em { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--tx2); white-space: nowrap; }
.mx-bars small { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--mu2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* card footer (for short lists) */
.mx-card-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bd2); color: var(--mu); font-size: 11.5px; }
.mx-card-f b { color: var(--tx); }

/* SVG scenes (K.scene) */
.mx-scene { position: relative; overflow: hidden; border-radius: var(--r3); min-height: 120px; background: #0c1220; isolation: isolate; }
.mx-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mx-scene:not(.mx-photo)::after { content: ""; position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mx-scene.sc-van, .mx-scene.sc-cafe, .mx-scene.sc-clinic, .mx-scene.sc-portrait { background: #e9e4dc; }
.mx-scene.mx-photo::before { z-index: 1; }
.mx-usage > div:first-child em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--mu); }
.mx-app.side-dark .mx-usage > div:first-child em { color: #8f9bb0; }
.mx-usage > b { display: block; margin-top: 2px; }
.mx-chart .tp { transform: translateX(14px); }
.mx-search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mx-fav.g { display: inline-block; }
.mx-usage small, .mx-syncf small, .mx-teamf small, .mx-statf small, .mx-helpf small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }