/* Additive styles for help panels, semantic status, comparison chips, overlay tooltips and notifications.
   Semantic colors are separate from the brand magenta/lime. */
html[data-xpayz-theme=dark] {
  --positive: #7ee2b8; --positive-bg: #163428; --positive-border: #2f6b52;
  --negative: #fd9891; --negative-bg: #3d2120; --negative-border: #7d3a36;
  --warning: #fbc760; --warning-bg: #3a2c12; --warning-border: #7a5a1f;
  --info: #9dcbff; --info-bg: #162e49; --info-border: #3d6388;
  --neutral: #b6bdcc; --neutral-bg: #262c3b; --neutral-border: #485166;
  --xz-ctl-bg: #1b2133; --xz-ctl-ink: #f4f2fa; --xz-ctl-line: #ffffff26; --xz-ctl-hover: #262d42;
  --xz-tip-bg: #1b2133; --xz-tip-ink: #f4f2fa; --xz-tip-muted: #b6bdcc; --xz-tip-line: #61718e; --xz-tip-shadow: 0 12px 28px #0007;
  --xz-focus: #9dcbff;
}
html[data-xpayz-theme=light] {
  --positive: #1f7a52; --positive-bg: #e8f7ef; --positive-border: #9dd9bb;
  --negative: #b42620; --negative-bg: #fff0ef; --negative-border: #f2b2ad;
  --warning: #8a4200; --warning-bg: #fff5e0; --warning-border: #f2c97d;
  --info: #22568f; --info-bg: #edf4ff; --info-border: #acc9ee;
  --neutral: #4f5b6d; --neutral-bg: #f0f3f7; --neutral-border: #cfd7e2;
  --xz-ctl-bg: #ffffff; --xz-ctl-ink: #27354a; --xz-ctl-line: #d7dfe9; --xz-ctl-hover: #edf2f7;
  --xz-tip-bg: #ffffff; --xz-tip-ink: #1f2b3d; --xz-tip-muted: #4f5b6d; --xz-tip-line: #cfd7e2; --xz-tip-shadow: 0 12px 28px #24364b2e;
  --xz-focus: #22568f;
}
:root { --xz-layer-overlay: 60; }

/* ---------- Status dots: text labels always accompany them ---------- */
.xz-status-dot {
  display: inline-block; position: relative; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; color: var(--positive); vertical-align: middle;
}
.xz-status-dot[data-tone=good] { color: var(--positive); }
.xz-status-dot[data-tone=info] { color: var(--info); }
.xz-status-dot[data-tone=warning] { color: var(--warning); }
.xz-status-dot[data-tone=critical] { color: var(--negative); }
.xz-status-dot[data-tone=neutral] { color: var(--neutral); }
/* Notification "ping" for live states: a copy of the dot grows out and fades away, on repeat.
   Only transform and opacity animate (GPU-friendly). Failed and inactive states stay still (no flashing),
   and reduced motion turns it off further down. */
.xz-status-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: currentColor; opacity: 0; pointer-events: none;
  animation: xz-halo 2s cubic-bezier(0, 0, .2, 1) infinite;
}
/* Critical pings too (slow, 2 s: far below the 3-per-second flash limit) so problems draw the eye; only inactive/neutral stays still. */
.xz-status-dot[data-tone=neutral]::after { animation: none; }
@keyframes xz-halo { 0% { transform: scale(1); opacity: .75; } 80%, 100% { transform: scale(2.6); opacity: 0; } }

/* Legacy sidebar/header dots become semantic dots without changing their size. */
.dot.xz-status-dot { width: 10px; height: 10px; }

/* ---------- Status chips ---------- */
body .chip[data-status-tone]:not(#xz-none) { display: inline-flex; gap: 6px; align-items: center; border: 1px solid transparent; }
body .chip[data-status-tone=positive]:not(#xz-none) { color: var(--positive); background: var(--positive-bg); border-color: var(--positive-border); }
body .chip[data-status-tone=negative]:not(#xz-none) { color: var(--negative); background: var(--negative-bg); border-color: var(--negative-border); }
body .chip[data-status-tone=warning]:not(#xz-none) { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
body .chip[data-status-tone=info]:not(#xz-none) { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
body .chip[data-status-tone=neutral]:not(#xz-none) { color: var(--neutral); background: var(--neutral-bg); border-color: var(--neutral-border); }
.chip .xz-status-dot { width: 6px; height: 6px; }

/* ---------- Notification bell: same box as the Settings trigger ---------- */
.xz-header-actions { display: flex; align-items: center; gap: 8px; }
.xz-bell {
  position: relative; box-sizing: border-box; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-height: 40px; padding: 0; margin: 0;
  border: 1px solid var(--xz-ctl-line); border-radius: 10px;
  background: var(--xz-ctl-bg); color: var(--xz-ctl-ink);
  box-shadow: none; line-height: 0; cursor: pointer;
  overflow: hidden; /* keeps the sparkle and halo inside the button: no layout shift */
}
.xz-bell:hover { background: var(--xz-ctl-hover); }
/* Beat the generic light-theme button rule so the bell matches the Settings trigger exactly. */
html[data-xpayz-theme] .xz-header-actions .xz-bell { background: var(--xz-ctl-bg); border-color: var(--xz-ctl-line); color: var(--xz-ctl-ink); box-shadow: none; }
html[data-xpayz-theme] .xz-header-actions .xz-bell:hover { background: var(--xz-ctl-hover); }
.xz-bell:focus { outline: none; }
.xz-bell:focus-visible { outline: 2px solid var(--xz-focus); outline-offset: 2px; }
.xz-bell .xz-bell-icon { display: block; width: 18px; height: 18px; transform-origin: 50% 2px; }
.xz-bell .xz-status-dot {
  position: absolute; top: 6px; inset-inline-end: 6px; width: 8px; height: 8px;
  box-shadow: 0 0 0 2px var(--xz-ctl-bg);
}
.xz-bell:hover .xz-status-dot { box-shadow: 0 0 0 2px var(--xz-ctl-hover); }
.xz-bell-sparkle {
  position: absolute; top: 15px; inset-inline-end: 4px; width: 5px; height: 5px; opacity: 0; pointer-events: none;
  background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.xz-bell[data-tone=info] .xz-bell-sparkle { color: var(--info); animation: xz-twinkle 3.6s ease-in-out infinite; }
.xz-bell[data-tone=critical] .xz-bell-sparkle { color: var(--negative); animation: xz-twinkle 2.4s ease-in-out infinite; }
.xz-bell[data-tone=critical] .xz-bell-icon { animation: xz-nudge 9s ease-in-out infinite; }
.xz-bell[data-tone=good] .xz-status-dot::after { animation: none; }
@keyframes xz-twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.4); } 80% { opacity: 1; transform: scale(1); } 90% { opacity: .3; transform: scale(.7); } }
@keyframes xz-nudge { 0%, 90%, 100% { transform: rotate(0); } 92% { transform: rotate(-10deg); } 95% { transform: rotate(8deg); } 98% { transform: rotate(-4deg); } }
.demo-locked .xz-bell { display: none; }
/* No notifications: inactive bell, no dot, no hover. */
.xz-bell[aria-disabled=true] .xz-status-dot, .xz-bell[aria-disabled=true] .xz-bell-sparkle { display: none; }
html[data-xpayz-theme] .xz-header-actions .xz-bell[aria-disabled=true] { cursor: default; color: var(--xz-ctl-ink); opacity: .45; }
html[data-xpayz-theme] .xz-header-actions .xz-bell[aria-disabled=true]:hover { background: var(--xz-ctl-bg); }

/* ---------- Workspace updates dialog ---------- */
.update-list { list-style: none; margin: 8px 0 0; padding: 0; }
.update-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--neutral-border); }
.update-row:last-child { border-bottom: 0; }
.update-row > .xz-status-dot { margin-top: 6px; }
.update-row b { display: block; }
.update-row p { margin: 4px 0 6px; line-height: 1.55; }
.update-tone { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral); }
.update-row[data-tone=critical] .update-tone { color: var(--negative); }
.update-row[data-tone=info] .update-tone { color: var(--info); }
.update-empty { display: flex; gap: 12px; align-items: center; padding: 10px 0; line-height: 1.6; }
html[dir=rtl] .update-row .link-arrow { display: inline-block; transform: scaleX(-1); }
.update-row a, .how-it-works a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; }
dialog.updates-dialog { max-width: min(520px, calc(100vw - 32px)); }

/* ---------- Help panels ---------- */
.how-it-works { margin-top: 20px; }
.how-it-works p { line-height: 1.7; }
.how-it-works .guide-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0; }
.how-it-works [hidden] { display: none; }
.how-it-works button { margin-top: 6px; }

/* ---------- Comparison chips ---------- */
.metric-delta { display: block; margin-top: 12px; }
.metric-delta > button {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; max-width: 100%;
  padding: 5px 8px; border-radius: 7px; font-size: 11px; line-height: 1.4; text-align: start;
  color: var(--neutral); background: var(--neutral-bg); border: 1px solid var(--neutral-border); box-shadow: none;
}
.metric-delta .delta-value { font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.metric-delta .delta-label { font-weight: 500; }
.metric-delta[data-treatment=favorable] > button { color: var(--positive); background: var(--positive-bg); border-color: var(--positive-border); }
.metric-delta[data-treatment=unfavorable] > button { color: var(--negative); background: var(--negative-bg); border-color: var(--negative-border); }
.metric-delta > button:focus { outline: none; }
.metric-delta > button:focus-visible { outline: 2px solid var(--xz-focus); outline-offset: 2px; }
html[dir=rtl] .metric-delta .delta-arrow { display: inline-block; transform: scaleX(-1); }

/* ---------- Shared overlay layer: above page content, below modal dialogs (top layer) ---------- */
#xz-overlay-layer { position: fixed; inset: 0; z-index: var(--xz-layer-overlay); pointer-events: none; }
.delta-tooltip {
  position: absolute; pointer-events: auto; box-sizing: border-box; width: 320px; max-width: 320px;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--xz-tip-line);
  background: var(--xz-tip-bg); color: var(--xz-tip-ink); box-shadow: var(--xz-tip-shadow);
  font-size: 12px; line-height: 1.55; text-align: start;
}
.delta-tooltip[hidden] { display: none; }
.delta-tooltip .tip-title { display: block; margin-bottom: 6px; font-size: 12px; }
.delta-tooltip dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.delta-tooltip dt { color: var(--xz-tip-muted); }
.delta-tooltip dd { margin: 0; display: grid; }
.delta-tooltip dd b { font-variant-numeric: tabular-nums; }
.delta-tooltip .tip-range, .delta-tooltip .tip-split { color: var(--xz-tip-muted); }
.delta-tooltip .tip-split { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; direction: ltr; unicode-bidi: isolate; text-align: start; }
.delta-tooltip p { margin: 8px 0 0; }
.delta-tooltip .tip-note { color: var(--xz-tip-muted); font-size: 11px; }

/* ---------- Payment pair, scenarios, widget options ---------- */
.pending-pairs .pending-pair .token-logo { opacity: .7; }
.pending-pairs.compact .hint { font-size: 11px; }
.scenario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.scenario-grid h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.scenario-grid button { margin: 0 6px 8px 0; }
.qr-logo-choice { margin-top: 10px; }
.sweep-actions, .billing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.fee-example .detail-row b { font-variant-numeric: tabular-nums; }
.toolbar select { max-width: 100%; }

@media (max-width: 600px) { .xz-header-actions { gap: 6px; } }

.aside-bottom > a { display: block; margin-top: 8px; }
:where(.how-it-works a, .update-row a):focus-visible { outline: 2px solid var(--xz-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .xz-bell, .xz-bell *, .xz-status-dot, .xz-status-dot::before, .xz-status-dot::after { animation: none !important; transition: none !important; }
  .xz-bell-sparkle { opacity: 0 !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Light theme: inherited secondary greys darkened just enough for WCAG AA (4.5:1) on their surfaces. */
html[data-xpayz-theme=light] body .workspace > small:not(#xz-none) { color: #586378; }
html[data-xpayz-theme=light] body .table-wrap th:not(#xz-none) { color: #535e74; }
html[data-xpayz-theme=light] body td small:not(#xz-none), html[data-xpayz-theme=light] body td .asset-name small:not(#xz-none) { color: #586378; }
html[data-xpayz-theme=light] body .widget-design small:not(#xz-none) { color: #5c566e; }
html[data-xpayz-theme=light] body .chip[data-status-tone=neutral]:not(#xz-none) { color: #485366; }

.billing-actions + .hint { margin-bottom: 22px; }
.billing-actions + .hint { margin-bottom: 22px; }
/* RTL: amounts and IDs take their direction from their own content (e.g. "58.75 USDT" stays in reading order). */
html[dir=rtl] :is(.stat strong, .balance-row strong, .detail-row b, td, .delta-tooltip dd b) { unicode-bidi: plaintext; }

/* Thinner ring around the small network badge on token icons (was 2px). */
body .asset-mark .network-badge { border-width: 1px; }

/* Header preferences: icon only, same 40x40 box as the bell. */
#xz-settings .xz-menu-trigger { width: 40px; min-height: 40px; padding: 10px; gap: 0; }

/* One column per live network (TRON, Solana, BSC); wraps evenly instead of leaving half a row empty. */
body .grid.network-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* ---------- Merchant profile ---------- */
.profile-form label { margin-top: 18px; color: var(--ink); font-weight: 600; }
.profile-form label:first-child { margin-top: 0; }
.profile-form .optional { margin-inline-start: 6px; font-weight: 400; font-size: 11px; color: var(--muted); }
.profile-form .field-hint { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.profile-form input[aria-invalid=true] { border-color: var(--negative); }
.profile-form .detail-row:first-of-type { margin-top: 18px; }
.profile-actions { margin-top: 18px; flex-wrap: wrap; }
.profile-actions .primary { margin-top: 0; width: auto; }
.profile-logo { display: flex; gap: 18px; align-items: flex-start; }
.profile-logo p { margin-top: 0; font-size: 12px; }
.profile-logo-tile { flex: 0 0 auto; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 18px; background: #fff; border: 1px solid var(--xz-ctl-line); overflow: hidden; }
.profile-logo-tile img { width: 84%; height: 84%; object-fit: contain; }
.profile-monogram { font: 700 52px/1 "Plus Jakarta Sans", Inter, sans-serif; color: #101320; }
@media (max-width: 520px) { .profile-logo { flex-direction: column; } }
/* Workspace card shows the merchant logo once one is uploaded. */
.workspace.has-logo { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; }
.workspace.has-logo > :not(.workspace-logo) { grid-column: 2; }
.workspace-logo { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; background: #fff; object-fit: contain; padding: 3px; box-sizing: border-box; }

/* ---------- Overview: payment volume chart ---------- */
/* Own ink/line tokens per theme: the shared --ink does not switch in the light theme. */
:is(.vchart-legend, .vchart, .vchart-controls, .vchart-table) { --s-deposits: #3987e5; --s-payouts: #d95926; --vc-ink: #f5f4f9; --vc-muted: #b3afc5; --vc-line: #ffffff17; --vc-hover: #ffffff0d; }
html[data-xpayz-theme=light] :is(.vchart-legend, .vchart, .vchart-controls, .vchart-table) { --s-deposits: #2a78d6; --s-payouts: #eb6834; --vc-ink: #1b2533; --vc-muted: #5b6676; --vc-line: #e2e8ef; --vc-hover: #1b25330a; }
.vchart-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; border: 1px solid var(--xz-ctl-line); background: var(--xz-ctl-bg); }
html body .segmented button { padding: 6px 11px; min-height: 32px; border: 0; border-radius: 7px; background: transparent; color: var(--vc-muted); font-size: 12px; font-weight: 600; box-shadow: none; }
html body .segmented button:hover { color: var(--vc-ink); background: var(--vc-hover); }
html body .segmented button[aria-pressed=true] { color: var(--vc-ink); background: var(--xz-ctl-hover); box-shadow: inset 0 0 0 1px var(--xz-ctl-line); }
.vchart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: -6px 0 18px; font-size: 12px; color: var(--vc-muted); }
.vchart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.vchart-legend b { color: var(--vc-ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.vchart-range { margin-inline-start: auto; }
.vchart-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--s-deposits); }
.vchart-key[data-series=payouts] { background: var(--s-payouts); }
.vchart { position: relative; }
.vchart-plot { position: relative; height: 240px; margin: 0 0 30px 46px; }
.vchart-tick { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--vc-line); }
.vchart-tick:first-child { border-top-color: var(--vc-muted); opacity: .6; }
.vchart-tick span { position: absolute; right: calc(100% + 8px); transform: translateY(-50%); font-size: 10px; color: var(--vc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vchart-days { position: absolute; inset: 0; display: flex; }
html body .vchart .vchart-day { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; cursor: default; }
html body .vchart .vchart-day:hover, html body .vchart .vchart-day:focus-visible { background: var(--vc-hover); }
html body .vchart .vchart-day:focus-visible { outline: 2px solid var(--xz-focus, currentColor); outline-offset: 2px; }
.vchart-bars { display: flex; align-items: flex-end; gap: 2px; height: 100%; width: min(64%, 46px); }
.vchart-bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--s-deposits); transition: opacity .15s; }
.vchart-bar[data-series=payouts] { background: var(--s-payouts); }
.vchart-day.is-dim .vchart-bar { opacity: .35; }
.vchart-x { position: absolute; top: calc(100% + 8px); font-size: 10px; color: var(--vc-muted); white-space: nowrap; }
.vchart[data-range="30"] .vchart-bars { width: min(76%, 24px); gap: 1px; }
.vchart[data-range="30"] .vchart-x-minor { visibility: hidden; }
.vchart[data-range="1"] .vchart-bars { width: min(28%, 70px); }
@media (max-width: 700px) { .vchart-x-minor { visibility: hidden; } .vchart-plot { height: 200px; margin-left: 40px; } .vchart-range { margin-inline-start: 0; flex-basis: 100%; } }
.vchart-tip { position: absolute; top: -8px; z-index: 3; min-width: 180px; padding: 10px 12px; display: grid; gap: 5px; border-radius: 10px; border: 1px solid var(--xz-ctl-line); background: var(--xz-ctl-bg); color: var(--vc-ink); font-size: 12px; box-shadow: 0 12px 28px #0005; pointer-events: none; }
.vchart-tip span { display: flex; align-items: center; gap: 7px; color: var(--vc-muted); }
.vchart-tip span b { margin-inline-start: auto; color: var(--vc-ink); font-variant-numeric: tabular-nums; }
.vchart-tip-net { border-top: 1px solid var(--vc-line); padding-top: 5px; }
body .vchart-table td, body .vchart-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
body .vchart-table tbody th, body .vchart-table tfoot th { text-transform: none; letter-spacing: normal; font-size: 12px; font-weight: 500; color: var(--vc-ink); background: transparent; text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--vc-line); }
body .vchart-table tfoot :is(th, td) { font-weight: 700; border-top: 1px solid var(--vc-line); border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .vchart-bar { transition: none; } }

/* ---------- Global refinements ---------- */
/* Sidebar: the module list scrolls on short screens instead of running under the status block. */
@media (min-width: 801px) {
  body aside nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  body aside .aside-bottom { flex-shrink: 0; }
}
@media (min-width: 801px) and (max-height: 960px) {
  body aside nav a { padding-block: 8px; margin-block: 2px; }
  body aside .workspace { margin-block: 16px 10px; padding-block: 14px; }
  body aside .aside-bottom small { margin-bottom: 12px; }
}
/* Sentence case for labels (was forced Title Case). */
body .detail-row > span:first-child, body .capability-row { text-transform: none; }
body .detail-row > span:first-child, body .capability-row > span { display: inline-block; }
body .detail-row > span:first-child::first-letter, body .capability-row > span::first-letter { text-transform: uppercase; }
/* Numbers: right-aligned, tabular figures. */
body .data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Phones: each table row becomes a labeled card instead of a sideways-scrolling grid. */
@media (max-width: 700px) {
  body .data-table, body .data-table tbody, body .data-table tr, body .data-table td { display: block; width: 100%; }
  body .data-table { white-space: normal; }
  body .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body .data-table tr { padding: 12px 0; border-bottom: 1px solid var(--vc-line, #8883); }
  body .data-table td { position: relative; padding: 5px 0 5px 42%; border: 0; text-align: right; min-height: 26px; overflow-wrap: anywhere; }
  body .data-table td::before { content: attr(data-label); position: absolute; left: 0; top: 6px; width: 40%; text-align: left; font-size: 11px; color: var(--vc-muted, #8a8f9c); }
  body .data-table td:first-child { padding-left: 0; text-align: left; font-weight: 600; }
  body .data-table td:first-child::before, body .data-table td.empty::before { content: none; }
  body .data-table td.empty { padding-left: 0; text-align: center; }
  body .data-table td .chip { float: none; }
  body .table-wrap { overflow: visible; }
}
:root { --vc-line: #ffffff17; --vc-muted: #b3afc5; }
html[data-xpayz-theme=light] { --vc-line: #e2e8ef; --vc-muted: #5b6676; }
/* Long tables: show the first rows with a count and "Show more". */
.table-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; font-size: 12px; color: var(--vc-muted); }
#cashier[hidden] { display: none !important; }
/* Billing: three cards fill the row; actions sit right under the balances. */
@media (min-width: 801px) { body .billing-stats { grid-template-columns: repeat(4, 1fr); } }
.credit-out { color: var(--negative); }
body .billing-actions { margin: -6px 0 24px; flex-wrap: wrap; justify-content: flex-start; }
.profile-edit-link { display: inline-block; margin-bottom: 8px; font-size: 12px; }

/* ---------- Checkout Widget configurator ---------- */
body .checkout-config { grid-template-columns: minmax(0, 1fr) minmax(400px, 500px); align-items: start; }
.checkout-controls { display: grid; gap: 22px; min-width: 0; }
.checkout-controls > .panel, .checkout-preview > .panel { margin: 0; }
@media (min-width: 1101px) { .checkout-preview > .panel { position: sticky; top: 20px; } }
@media (max-width: 1100px) { body .checkout-config { grid-template-columns: 1fr; } .checkout-preview { order: -1; } }
.config-group { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.config-group:last-child { margin-bottom: 0; }
.config-group legend { padding: 0; margin-bottom: 10px; font-size: 12px; font-weight: 700; color: var(--vc-ink, inherit); }
.config-group .widget-designs { margin-bottom: 0; }
.config-note { margin: 8px 0 0; font-size: 11px; color: var(--vc-muted); }
.config-note a { text-decoration: underline; text-underline-offset: 2px; }
.embed-steps { list-style: none; counter-reset: step; margin: 0 0 16px; padding: 0; display: grid; gap: 16px; }
.embed-steps li { counter-increment: step; position: relative; padding-inline-start: 36px; display: grid; gap: 8px; min-width: 0; }
.embed-steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: -2px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 700; border: 1px solid var(--xz-ctl-line); color: var(--vc-ink); }
.embed-steps b { font-size: 13px; color: var(--vc-ink); }
.embed-steps span { font-size: 12px; color: var(--vc-muted); }
.embed-steps .code-block { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.embed-steps button { justify-self: start; }
body .checkout-frame { height: 700px; margin: 0 auto; transition: width .2s ease; }
body .checkout-frame[data-size=phone] { width: 375px; max-width: 100%; border-radius: 28px; box-shadow: 0 0 0 8px var(--xz-ctl-bg), 0 0 0 9px var(--xz-ctl-line); margin-block: 10px; }
@media (prefers-reduced-motion: reduce) { body .checkout-frame { transition: none; } }
body .vchart-table abbr { text-decoration: none; }

/* "Live" state (environment indicator): light sky blue with the ping, distinct from neutral gray and from operational green. */
.xz-status-dot[data-tone=live] { color: #6cc9ff; }
html[data-xpayz-theme=light] .xz-status-dot[data-tone=live] { color: #0b8fd8; }

/* Phone tab bar: no visible scrollbar (it looked like a stray gray bar); soft edge fade hints that it scrolls. */
@media (max-width: 800px) {
  body aside nav { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); padding-inline: 4px; }
  body aside nav::-webkit-scrollbar { display: none; }
  body aside nav a { font-size: 12px; }
}

/* Sidebar: logo flush with the workspace card; clearer menu labels (brighter ink, 13 px). */
body aside .brand { padding-inline: 0 !important; }
body aside .brand .xz-logo-frame { margin-left: 0 !important; }
@media (min-width: 801px) {
  body aside nav a { font-size: 13px; font-weight: 500; letter-spacing: .005em; color: #e9e4f2; }
  body aside nav a svg { opacity: .9; }
  body aside nav a:hover { color: #fff; background: #ffffff0d; }
  body aside nav a.active { font-weight: 700; color: #fff; }
  html[data-xpayz-theme=light] body aside nav a { color: #354052; }
  html[data-xpayz-theme=light] body aside nav a:hover { color: #1b2533; background: #1b25330a; }
  html[data-xpayz-theme=light] body aside nav a.active { color: #1b2533; }
}

/* Checkout Widget: give the preview real desktop width (the widget's phone layout starts below 480 px). */
body .checkout-config { grid-template-columns: minmax(340px, 1fr) minmax(560px, 1.2fr); }
@media (max-width: 1360px) { body .checkout-config { grid-template-columns: 1fr; } .checkout-preview { order: -1; } .checkout-preview > .panel { position: static; } }
body .checkout-frame[data-size=desktop] { width: 100%; max-width: 640px; }

/* ---------- Transaction details ---------- */
html body .tx-open { all: unset; cursor: pointer; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
html body .tx-open:hover { text-decoration-color: currentColor; }
html body .tx-open:focus-visible { outline: 2px solid var(--xz-focus, currentColor); outline-offset: 2px; border-radius: 3px; }
#content .data-table tbody tr:has(.tx-open) { cursor: pointer; }
#content .data-table tbody tr:has(.tx-open):hover td { background: color-mix(in srgb, currentColor 4%, transparent); }
.tx-drawer { --tx-bg: #141826; --tx-ink: #f5f4f9; --tx-muted: #aaa6bd; --tx-line: #ffffff1a; --tx-chip: #ffffff0d;
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--tx-line); background: var(--tx-bg); color: var(--tx-ink); box-shadow: -24px 0 60px #0007; }
html[data-xpayz-theme=light] .tx-drawer { --tx-bg: #ffffff; --tx-ink: #1b2533; --tx-muted: #5b6676; --tx-line: #e2e8ef; --tx-chip: #f3f6f9; box-shadow: -24px 0 60px #1b253322; }
.tx-drawer::backdrop { background: #05070d99; backdrop-filter: blur(2px); }
.tx-drawer[open] { animation: tx-in .22s ease-out; }
@keyframes tx-in { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tx-drawer[open] { animation: none; } }
.tx-drawer-inner { height: 100%; overflow-y: auto; padding: 22px 24px 0; display: flex; flex-direction: column; gap: 20px; }
.tx-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.tx-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-muted); }
.tx-head h2 { margin: 6px 0 4px; font-size: 24px; letter-spacing: -.5px; color: var(--tx-ink); }
.tx-id { font-size: 11px; color: var(--tx-muted); }
html body .tx-close { width: 36px; height: 36px; padding: 0; border-radius: 10px; font-size: 22px; line-height: 1; background: var(--tx-chip); border: 1px solid var(--tx-line); color: var(--tx-ink); }
.tx-status { display: flex; gap: 10px; align-items: center; font-size: 12px; }
.tx-drawer h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--tx-muted); }
.tx-timeline { list-style: none; margin: 0; padding: 0; }
.tx-timeline li { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.tx-timeline li:not(:last-child)::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--tx-line); }
.tx-timeline li[data-state=done]:not(:last-child)::before { background: var(--positive); opacity: .55; }
.tx-step-dot { flex: 0 0 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--tx-line); background: var(--tx-bg); box-sizing: border-box; }
li[data-state=done] .tx-step-dot { background: var(--positive); border-color: var(--positive); }
li[data-state=current] .tx-step-dot { border-color: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 25%, transparent); }
li[data-state=failed] .tx-step-dot { background: var(--negative); border-color: var(--negative); }
.tx-timeline b { display: block; font-size: 13px; color: var(--tx-ink); }
li[data-state=todo] b { color: var(--tx-muted); font-weight: 500; }
.tx-timeline time, .tx-timeline small { display: block; font-size: 11px; color: var(--tx-muted); margin-top: 2px; }
.tx-fields { margin: 0; display: grid; gap: 0; }
.tx-field { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--tx-line); font-size: 12px; }
.tx-field dt { color: var(--tx-muted); }
.tx-field dd { margin: 0; color: var(--tx-ink); min-width: 0; }
.tx-value { display: block; overflow-wrap: anywhere; font-size: 11px; line-height: 1.5; }
.tx-actions { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; align-items: center; }
html body .tx-copy { padding: 3px 9px; min-height: 26px; font-size: 11px; border-radius: 7px; background: var(--tx-chip); border: 1px solid var(--tx-line); color: var(--tx-ink); box-shadow: none; }
.tx-explorer { font-size: 11px; font-weight: 600; color: var(--info); text-decoration: underline; text-underline-offset: 2px; }
.tx-explorer.is-disabled { color: var(--tx-muted); text-decoration: line-through; cursor: not-allowed; }
.tx-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 11px; line-height: 1.5; color: var(--tx-muted); background: var(--tx-chip); border: 1px solid var(--tx-line); }
.tx-foot { position: sticky; bottom: 0; margin-top: auto; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 0 18px; background: var(--tx-bg); border-top: 1px solid var(--tx-line); }
@media (max-width: 520px) { .tx-drawer { width: 100vw; border-left: 0; } .tx-field { grid-template-columns: 1fr; gap: 4px; } }
.tx-head > div { display: block; min-width: 0; } .tx-head .tx-kicker, .tx-head .tx-id { display: block; }
html body .addr-copy { --tx-chip: var(--xz-ctl-bg); --tx-line: var(--xz-ctl-line); --tx-ink: currentColor; margin-inline-start: 6px; vertical-align: middle; }
html[data-xpayz-theme=light] #content .data-table tbody tr:has(.tx-open):hover td { background: #f7f9fc; }

/* ---------- Checkout Widget: style controls ---------- */
.widget-swatch.design-4 { background: linear-gradient(115deg, #10b981, #14b8a6 60%, #a3e635); }
.widget-swatch.design-5 { background: linear-gradient(115deg, #6366f1, #a855f7 60%, #ec4899); }
.widget-swatch.design-6 { background: linear-gradient(115deg, #3f3f46, #71717a 60%, #d4d4d8); }
.widget-swatch.design-7 { background: linear-gradient(115deg, #ffffff, #dbeafe 55%, #93c5fd); border-color: #c9d3e0; }
body .widget-designs.design-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { body .widget-designs.design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.config-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; }
.config-label { font-size: 12px; color: var(--vc-muted); margin: 0; }
.config-row select { max-width: 280px; }
.config-row .segmented { justify-self: start; }
.accent-picker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.accent-picker input[type=color] { width: 40px; height: 34px; padding: 2px; border-radius: 8px; border: 1px solid var(--xz-ctl-line); background: var(--xz-ctl-bg); cursor: pointer; }
.accent-picker input[type=text] { width: 110px; font-family: var(--font-mono, monospace); font-size: 12px; }
.accent-picker input[aria-invalid=true] { border-color: var(--negative); }
.accent-picker button { font-size: 11px; padding: 6px 10px; }
#cfg-accent-note { min-height: 0; margin: 0 0 4px 132px; }
#cfg-accent-note:empty { display: none; }
.config-checks { display: flex; gap: 18px; flex-wrap: wrap; }
.config-checks label { display: inline-flex; gap: 7px; align-items: center; margin: 0; font-size: 12px; color: var(--vc-ink, inherit); }
.config-checks input { width: 16px; height: 16px; accent-color: #adfc02; }
.config-reset { display: flex; justify-content: flex-end; border-top: 1px solid var(--vc-line); padding-top: 14px; }
@media (max-width: 560px) { .config-row { grid-template-columns: 1fr; gap: 6px; } #cfg-accent-note { margin-left: 0; } }

/* ---------- Micro-interactions (all off under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Settings gear turns one tooth (60°) on hover and stays turned while its menu is open. */
  #xz-settings-toggle svg { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
  #xz-settings-toggle:hover svg, #xz-settings-toggle:focus-visible svg, #xz-settings-toggle[aria-expanded=true] svg { transform: rotate(60deg); }
  /* Bell rings on hover/focus; an inactive bell (no notifications) stays still. */
  .xz-bell:not([aria-disabled=true]):is(:hover, :focus-visible) .xz-bell-icon { animation: xz-ring .9s ease-in-out; }
  @keyframes xz-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
  /* Primary actions lift slightly; every button presses in. */
  html body :is(button.primary, #cashier) { transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; }
  html body :is(button.primary, #cashier):not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 18px #adfc0233; filter: brightness(1.04); }
  html body button:not(:disabled):not(.vchart-day):not(.tx-open):active { transform: scale(.97); }
  html body :is(button.primary, #cashier):not(:disabled):active { transform: translateY(0) scale(.97); box-shadow: none; }
  /* Sidebar icons nudge toward the label; arrow links slide. */
  body aside nav a svg { transition: transform .2s ease; }
  body aside nav a:hover svg { transform: translateX(2px); }
  :is(.quiet-link, .profile-edit-link, .tx-explorer:not(.is-disabled)) { transition: letter-spacing .2s ease; }
  :is(.quiet-link, .profile-edit-link):hover { letter-spacing: .01em; }
}

/* ---------- Requirements pass: controls, exceptions, API, team, go-live ---------- */
.stop-banner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent); background: color-mix(in srgb, var(--warning) 12%, transparent); font-size: 13px; }
.stop-banner > div { flex: 1 1 260px; }
.control-actions { margin-top: 14px; flex-wrap: wrap; }
html body button.danger-action { background: var(--negative); border-color: var(--negative); color: #fff; }
html body button[data-action=portal-stop]:not(:disabled) { background: #b42620; border-color: #b42620; color: #fff; }
html body button[data-action=portal-stop]:not(:disabled):hover { background: #9a1f1a; border-color: #9a1f1a; }
html[data-xpayz-theme=dark] body button[data-action=portal-stop]:not(:disabled) { background: #c93a32; border-color: #c93a32; }
html[data-xpayz-theme=dark] body button[data-action=portal-stop]:not(:disabled):hover { background: #ad2e27; border-color: #ad2e27; }
.batch-review { max-height: 340px; overflow: auto; margin: 10px 0 14px; }
#modalbody textarea { width: 100%; box-sizing: border-box; font-size: 12px; }
.key-once { white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.hook-form label { margin-top: 0; }
.hook-form .config-group { margin: 14px 0; }
.event-format pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.roles-title { margin: 18px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--vc-muted); }
.role-desc { font-weight: 500; text-align: right; max-width: 60%; }
.golive { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.golive li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid var(--vc-line); }
.golive li[data-done=true] { opacity: .75; }
.golive a { display: grid; gap: 3px; text-decoration: none; }
.golive b { font-size: 13px; }
.golive small { font-size: 11px; color: var(--vc-muted); }
.golive-mark { flex: 0 0 20px; height: 20px; border-radius: 50%; border: 2px solid var(--vc-line); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.golive li[data-done=true] .golive-mark { background: var(--positive); border-color: var(--positive); color: #08130c; }
.golive-bar { width: 140px; height: 6px; border-radius: 6px; background: var(--vc-line); overflow: hidden; align-self: center; }
.golive-bar span { display: block; height: 100%; background: var(--positive); }
body dialog:has(.batch-review) { max-width: 880px; } body .batch-review td.wallet-address { min-width: 170px; }

/* ---------- Stable grouped navigation ---------- */
#nav ul { list-style: none; margin: 0; padding: 0; }
#nav .nav-strip { display: none; }
html body #nav .nav-top { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 10px 12px; margin: 2px 0; border: 1px solid transparent; border-radius: 8px; background: transparent; box-shadow: none; color: #e9e4f2; font: inherit; font-size: 13px; font-weight: 500; text-align: start; cursor: pointer; }
html body #nav button.nav-top:hover { color: #fff; background: #ffffff0d; transform: none; }
html[data-xpayz-theme=light] body #nav .nav-top { color: #354052; }
html[data-xpayz-theme=light] body #nav button.nav-top:hover { color: #1b2533; background: #1b25330a; }
#nav .nav-top svg { width: 18px; height: 18px; flex-shrink: 0; }
#nav .nav-chev { margin-inline-start: auto; width: 16px !important; height: 16px !important; opacity: .7; transition: transform .2s ease; }
#nav [aria-expanded=true] .nav-chev { transform: rotate(180deg); }
#nav .nav-group.is-active > button.nav-top { font-weight: 700; color: #fff; }
html[data-xpayz-theme=light] #nav .nav-group.is-active > button.nav-top { color: #1b2533; }
#nav .nav-children { margin: 0 0 6px; padding-inline-start: 30px; }
#nav .nav-children[hidden] { display: none; }
html body #nav .nav-children a { padding: 7px 12px; margin: 1px 0; font-size: 12.5px; }
#nav .nav-children a[href$=".html"] { opacity: .9; }
.subnav { display: none; }
@media (max-width: 800px) {
  body aside nav#nav { display: block; }
  #nav .nav-tree { display: none; }
  #nav .nav-strip { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  #nav .nav-strip::-webkit-scrollbar { display: none; }
  #nav .nav-strip a { white-space: nowrap; }
  .subnav { display: block; margin: -6px 0 16px; overflow-x: auto; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
  .subnav a { display: block; white-space: nowrap; padding: 7px 12px; border-radius: 999px; font-size: 12px; border: 1px solid var(--xz-ctl-line); text-decoration: none; color: inherit; }
  .subnav a.active { background: var(--xz-ctl-hover); font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) { #nav .nav-chev { transition: none; } }

/* Address requests */
.net-inline { display: inline-flex; align-items: center; gap: 6px; }
.net-inline .network-logo { width: 16px; height: 16px; }
#content tr.row-focus td { background: color-mix(in srgb, var(--info) 14%, transparent); }
.wallets-requests-link { margin-top: 14px; }
.wallets-requests-link a { text-decoration: underline; text-underline-offset: 3px; }

/* Demo accounts on the login page */
.auth-demo-accounts { margin-top: 14px; border: 1px solid var(--xz-ctl-line, #ffffff26); border-radius: 12px; padding: 10px 14px; font-size: 12px; }
.auth-demo-accounts summary { cursor: pointer; font-weight: 700; }
.auth-demo-accounts summary span { font-weight: 400; opacity: .75; }
.auth-demo-accounts p { margin: 8px 0; opacity: .8; }
.auth-demo-accounts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
html body .auth-demo-accounts button { width: 100%; display: grid; gap: 2px; text-align: start; padding: 8px 10px; border-radius: 9px; font-size: 12px; font-weight: 500; }
.auth-demo-accounts button b { font-size: 12px; }
.auth-demo-accounts button span { font-family: var(--font-mono, monospace); font-size: 11px; opacity: .8; }
@media (max-width: 420px) { .auth-demo-accounts ul { grid-template-columns: 1fr; } }
/* The sidebar shortcuts duplicate the Integrations and Help sections of the navigation. */
body aside .aside-bottom a { display: none; }
html[data-xpayz-theme=light] body .big-input { color: #1b2533; background: #ffffff; }
/* Toggle rows with a title and an explanation (Connect-wallet payments). */
body .capability-row > span > small { display: block; margin-top: 4px; font-weight: 400; line-height: 1.5; }
body .capability-row > span > b { font-weight: 600; }

/* ---------- Team & Access, accepted coins, approvals, platform admin (28 Oct spec) ---------- */
.preview-banner { border-color: color-mix(in srgb, var(--info) 55%, transparent); background: color-mix(in srgb, var(--info) 12%, transparent); }
.seat-meter { height: 6px; border-radius: 99px; background: var(--xz-ctl-bg); border: 1px solid var(--xz-ctl-line); overflow: hidden; margin: 2px 0 14px; }
.seat-meter > span { display: block; height: 100%; background: var(--positive); }
.stage-steps { margin: 0 0 14px 18px; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.error-box { padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--negative) 55%, transparent); background: color-mix(in srgb, var(--negative) 10%, transparent); font-size: 12px; margin: 0 0 12px; }
.accepted-row > span { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; }
.accepted-row > span > small { flex-basis: 100%; margin-left: 44px; }
.auth-admin-link { font-size: 12px; margin-top: 12px; }
.auth-admin-link span { opacity: .8; }
.admin-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
a.admin-stat { text-decoration: none; color: inherit; display: block; }
a.admin-stat strong { display: block; font-size: 26px; margin: 8px 0 4px; }
a.admin-stat small { font-size: 11px; }
a.admin-stat:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.admin-figure { font-size: 15px; line-height: 2; font-variant-numeric: tabular-nums; }
.admin-timeline { list-style: none; margin: 0 0 12px; padding: 0 0 0 14px; border-left: 2px solid var(--xz-ctl-line); display: grid; gap: 8px; font-size: 12px; }
.admin-timeline small { display: block; margin-top: 3px; overflow-wrap: anywhere; }
#modalbody h3 { font-size: 13px; margin: 14px 0 6px; }
.cap-cell { min-width: 74px; padding: 6px 10px; font-size: 12px; }

/* ---------- Sidebar business card: logo or monogram, name, type, merchant ID · role; opens the profile ---------- */
.workspace.workspace-card { padding: 0; display: block; }
.workspace-link { display: grid; grid-template-columns: 40px minmax(0, 1fr) 14px; gap: 10px; align-items: center; padding: 12px; color: inherit; text-decoration: none; border-radius: inherit; transition: background-color .15s ease; }
.workspace-link:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.workspace-link:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.workspace-card .workspace-logo { width: 40px; height: 40px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; padding: 0; grid-row: auto; }
.workspace-card .workspace-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.workspace-card .workspace-logo.is-monogram { background: linear-gradient(135deg, #c2027a, #55386f); color: #fff; font: 700 18px/1 "Plus Jakarta Sans", Inter, sans-serif; }
.workspace-text { min-width: 0; }
.workspace-text b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-card .workspace-text small { margin-top: 4px; line-height: 1.4; }
.workspace-card .workspace-meta { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-chev { width: 14px; height: 14px; opacity: .7; }
[dir=rtl] .workspace-chev { transform: scaleX(-1); }

/* ---------- Accepted coins & networks: selectable card grid ---------- */
.coin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 4px 0 14px; }
.coin-card { position: relative; display: grid; gap: 12px; align-content: start; margin: 0; padding: 16px; border: 1px solid var(--xz-ctl-line); border-radius: 14px; background: var(--xz-ctl-bg); cursor: pointer; text-transform: none; font-weight: 400; transition: border-color .15s ease, box-shadow .15s ease; }
.coin-card input { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.coin-card:hover { border-color: color-mix(in srgb, var(--positive) 45%, var(--xz-ctl-line)); }
.coin-card:has(input:focus-visible) { outline: 2px solid var(--info); outline-offset: 2px; }
.coin-card:has(input:checked) { border-color: var(--positive); box-shadow: inset 0 0 0 1px var(--positive); }
.coin-card:has(input:disabled) { cursor: not-allowed; }
.coin-card[data-tone=blocked] { border-style: dashed; box-shadow: none; }
.coin-check { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--xz-ctl-line); display: grid; place-items: center; }
.coin-check svg { width: 14px; height: 14px; opacity: 0; }
.coin-card:has(input:checked) .coin-check { background: var(--positive); border-color: var(--positive); color: #08160c; }
.coin-card:has(input:checked) .coin-check svg { opacity: 1; }
.coin-card[data-tone=blocked]:has(input:checked) .coin-check { background: transparent; border-color: var(--xz-ctl-line); color: inherit; }
.coin-card[data-tone=blocked] .coin-check svg { opacity: 0; }
.coin-head { display: flex; align-items: center; gap: 12px; padding-inline-end: 30px; }
.coin-head b { display: block; font-size: 16px; }
.coin-head small { display: block; font-size: 11px; margin-top: 2px; }
.coin-status small { display: block; margin-top: 6px; font-size: 11px; line-height: 1.4; }
.coin-meta { display: grid; gap: 4px; font-size: 11px; padding-top: 10px; border-top: 1px solid var(--xz-ctl-line); }
@media (prefers-reduced-motion: reduce) { .coin-card, .workspace-link { transition: none; } }
html[data-xpayz-theme=light] body .workspace-text small, html[data-xpayz-theme=light] body .workspace-text small .mono { color: #4a5568; }
.coin-card[data-tone=blocked]:has(input) .coin-check svg { opacity: 0; }
.coin-card[data-tone=blocked] .coin-check { border-style: dashed; }
.setup-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.setup-desc { font-size: 12px; line-height: 1.5; }
.addr-qr { display: block; width: 220px; max-width: 100%; margin: 8px auto; background: #fff; border-radius: 8px; image-rendering: pixelated; }
.nav-separate { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--xz-ctl-line); }
.addr-cell { display: block; overflow-wrap: anywhere; }
.addr-actions { display: flex; gap: 6px; margin-top: 6px; }
nav a.is-greyed { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.nav-na { display: inline-block; white-space: nowrap; flex-shrink: 0; margin-inline-start: 6px; padding: 1px 6px; border-radius: 99px; font-size: 9px; font-weight: 600; border: 1px solid currentColor; vertical-align: middle; }

/* ---------- Logo editor ---------- */
#modal:has(.logo-editor) { width: min(640px, calc(100vw - 32px)); max-width: none; }
.logo-editor { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin: 12px 0; }
.le-stage { flex: 0 0 auto; padding: 8px; border-radius: 14px; border: 1px solid var(--xz-ctl-line); background: repeating-conic-gradient(#9aa3b2 0 25%, #e9edf3 0 50%) 0 0 / 16px 16px; }
#le-canvas { display: block; width: 280px; height: 280px; max-width: calc(100vw - 90px); max-height: calc(100vw - 90px); cursor: grab; touch-action: none; border-radius: 8px; outline: 2px dashed rgba(255, 255, 255, .85); outline-offset: -2px; }
#le-canvas:active { cursor: grabbing; }
#le-canvas:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }
.le-side { flex: 1 1 160px; }
.le-previews { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; font-size: 12px; }
.le-previews > span { flex-basis: 100%; font-weight: 600; }
.le-prev { display: grid; justify-items: center; gap: 4px; }
.le-prev canvas { border-radius: 10px; background: repeating-conic-gradient(#9aa3b2 0 25%, #e9edf3 0 50%) 0 0 / 10px 10px; }
#le-p1 { width: 40px; height: 40px; }
#le-p2 { width: 48px; height: 48px; border-radius: 6px; }
.le-controls { display: grid; gap: 10px; margin-bottom: 14px; }
.le-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.le-row > label, .le-label { min-width: 72px; font-weight: 600; margin: 0; }
.le-row input[type=range] { flex: 1 1 140px; min-width: 120px; accent-color: var(--positive); }
.le-row output { min-width: 44px; text-align: end; font-variant-numeric: tabular-nums; }
.le-row button { min-width: 36px; }
.le-controls .le-row:first-child { flex-wrap: nowrap; }
.le-controls .le-row:first-child input[type=range] { min-width: 0; }
@media (max-width: 520px) { .le-row > label, .le-label { min-width: 0; flex-basis: 100%; } .le-controls .le-row:first-child > label { flex-basis: auto; } }

/* Desktop sidebar: the whole sidebar scrolls as one piece (logo, business card, menu), so menu items never slide
   underneath the business card when the window is short or zoomed in. */
@media (min-width: 801px) {
  body aside { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  body aside > nav#nav { flex: 0 0 auto; overflow: visible; min-height: auto; }
  body aside > .aside-bottom { margin-top: auto; }
}

/* ---------- Billing (client, 28 Oct): consistent type scale, one card per coin, dropdown controls ---------- */
.bill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-bottom: 20px; }
.bill-card { display: grid; gap: 12px; min-width: 0; padding: 18px; border-radius: 16px; border: 1px solid var(--xz-ctl-line); }
.bill-card[data-state=low] { border-color: color-mix(in srgb, var(--warning) 60%, var(--xz-ctl-line)); }
.bill-card[data-state=used-up] { border-color: color-mix(in srgb, var(--negative) 60%, var(--xz-ctl-line)); }
.bill-card .bill-head { display: flex; align-items: center; gap: 10px; }
.bill-card .bill-name { flex: 1; min-width: 0; }
.bill-card h3 { margin: 0; font-size: 15px; line-height: 1.2; }
.bill-card .bill-name span { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-balance { margin: 0; font: 700 26px/1.1 "Plus Jakarta Sans", Inter, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bill-balance small { font-size: 14px; font-weight: 600; }
.bill-meta { margin: 0; display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--xz-ctl-line); }
.bill-meta div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.bill-meta dt { font-weight: 400; }
.bill-meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.bill-warn { margin: 0; font-size: 12px; color: var(--negative); }
.bill-actions { justify-content: flex-start; gap: 8px; margin: 0; }
.bill-topup { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.bill-topup label { flex-basis: 100%; margin: 0; font-size: 13px; font-weight: 600; }
.bill-topup select { flex: 1 1 260px; max-width: 420px; font-size: 14px; }
.bill-filters { justify-content: flex-start; gap: 12px; margin-bottom: 12px; }
.bill-filter { display: grid; gap: 4px; margin: 0; font-size: 12px; font-weight: 600; text-transform: none; }
.bill-filter select { font-size: 14px; min-width: 160px; }
.bill-neg, .bill-pos { font-variant-numeric: tabular-nums; }
.bill-pos { color: var(--positive); }
details.bill-explain { padding: 0; }
details.bill-explain > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-radius: inherit; }
details.bill-explain > summary::-webkit-details-marker { display: none; }
details.bill-explain > summary span { display: grid; gap: 4px; }
details.bill-explain > summary b { font-size: 16px; }
details.bill-explain > summary small { font-size: 13px; }
details.bill-explain > summary svg { transition: transform .2s ease; flex-shrink: 0; }
details.bill-explain[open] > summary svg { transform: rotate(180deg); }
details.bill-explain > summary:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
details.bill-explain > :not(summary) { margin: 0 24px 20px; }
#content .panel .data-table td small { font-size: 11px; }
@media (prefers-reduced-motion: reduce) { details.bill-explain > summary svg { transition: none; } }

/* ---------- Coin and network dropdowns with icons (coin-select.js) ---------- */
select.cs-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip-path: inset(50%); }
.cs-wrap { position: relative; display: inline-block; min-width: 180px; max-width: 100%; vertical-align: bottom; }
.bill-topup .cs-wrap { flex: 1 1 260px; max-width: 420px; }
label .cs-wrap, .bill-filter .cs-wrap { display: block; }
.cs-wrap.full-width, #modalbody .cs-wrap { display: block; width: 100%; }
.cs-button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 12px; text-align: start; font: inherit; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.cs-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); flex-shrink: 0; transition: transform .15s ease; }
.cs-open .cs-chev { transform: rotate(-135deg) translate(-2px, -1px); }
.cs-icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; display: inline-block; }
.cs-icon > img:first-child { width: 24px; height: 24px; border-radius: 50%; display: block; }
.cs-icon .cs-badge { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--bg, #11131f); }
.cs-icon.cs-all { border-radius: 50%; border: 1.5px dashed currentColor; opacity: .7; }
.cs-list { position: absolute; z-index: 60; inset-inline: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: 280px; overflow-y: auto; border-radius: 12px; border: 1px solid var(--xz-ctl-line); background: var(--bg, #11131f); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); min-width: 220px; }
html[data-xpayz-theme=light] .cs-list { background: #fff; box-shadow: 0 14px 34px rgba(20, 30, 50, .16); }
.cs-list:focus { outline: none; }
.cs-list li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.cs-list li.cs-active { background: color-mix(in srgb, var(--positive) 16%, transparent); outline: 2px solid var(--info); outline-offset: -2px; }
.cs-list li[aria-selected=true] { font-weight: 700; }
.cs-list li[aria-selected=true]::after { content: '✓'; margin-inline-start: auto; }
.cs-list li[aria-disabled=true] { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .cs-chev { transition: none; } }

/* ---------- Folded sections (UX pass): explanations and reference material open on demand ---------- */
details.fold { padding: 0; }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-radius: inherit; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary span { display: grid; gap: 4px; }
details.fold > summary b { font-size: 16px; }
details.fold > summary small { font-size: 13px; }
details.fold > summary svg { transition: transform .2s ease; flex-shrink: 0; }
details.fold[open] > summary svg { transform: rotate(180deg); }
details.fold > summary:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
details.fold > .fold-body { padding: 0 24px 20px; }
@media (prefers-reduced-motion: reduce) { details.fold > summary svg { transition: none; } }
.coin-card > label.coin-toggle { display: grid; gap: 12px; margin: 0; cursor: pointer; text-transform: none; font-weight: 400; }
.coin-card:has(input:disabled) > label.coin-toggle { cursor: not-allowed; }
.coin-card { cursor: default; }
.coin-limits { margin: 0; display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--xz-ctl-line); }
.coin-limits div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.coin-limits dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.coin-foot { display: flex; justify-content: flex-start; }
.coin-foot button { padding: 6px 12px; font-size: 13px; }
.fold-stack > .panel { border: 0; background: none; box-shadow: none; padding: 0; margin: 0 0 18px; backdrop-filter: none; }
.fold-stack > .panel:last-child { margin-bottom: 0; }
.fold-stack > .panel .panel-head { margin-bottom: 6px; }
.fold-stack > .panel h2 { font-size: 15px; }
.golive-head { display: flex; align-items: center; gap: 12px; }
.golive-head .golive-bar { flex: 1 1 120px; }
.golive-head button { padding: 5px 12px; font-size: 12px; white-space: nowrap; }
/* Password visibility: eye icon (slashed while the password is shown). */
.auth-password button[aria-pressed] { display: inline-grid; place-items: center; width: 40px; padding: 0 !important; }
.auth-password .eye-icon .eye-slash { display: none; }
.auth-password button[aria-pressed=true] .eye-icon .eye-slash { display: inline; }
.auth-password button[aria-pressed]:focus-visible { outline: 2px solid var(--info, #7cc4ff); outline-offset: 1px; }

/* Status dots carry meaning (requirement UI-10): green only when data supports "all good"; info blue for sandbox/demo;
   amber when something is not connected or needs attention. */
html body .dot[data-tone=info] { background: #5aa9ff; box-shadow: 0 0 0 2px rgba(90, 169, 255, .18); }
html body .dot[data-tone=warning] { background: #f5b84b; box-shadow: 0 0 0 2px rgba(245, 184, 75, .2); }
html body .dot[data-tone=critical] { background: #ff6b6b; box-shadow: 0 0 0 2px rgba(255, 107, 107, .2); }
html body .dot[data-tone=good] { background: #3ccf8e; box-shadow: 0 0 0 2px rgba(60, 207, 142, .18); }
html[data-xpayz-theme=light] body .dot[data-tone=warning] { background: #c98600; }
html[data-xpayz-theme=light] body .dot[data-tone=info] { background: #1f6fd1; }
.admin-theme select { min-height: 38px; padding: 6px 10px; font-size: 13px; }
/* Square icon button in the header (admin theme toggle), same look as the merchant console's bell and gear. */
.xz-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; background: var(--xz-ctl-bg); border: 1px solid var(--xz-ctl-line); color: var(--xz-ctl-ink); box-shadow: none; cursor: pointer; }
.xz-icon-btn:hover { background: var(--xz-ctl-hover); }
.xz-icon-btn:focus-visible { outline: 2px solid var(--xz-focus, #7cc4ff); outline-offset: 2px; }
.xz-icon-btn[data-mode=dark] .ti-moon, .xz-icon-btn[data-mode=light] .ti-sun { display: none; }
.admin-console .xz-header-actions #admin-signout { height: 40px; padding: 0 16px; border-radius: 12px; }
/* Chart upgrades: series toggles in the legend, 30-day density, controls wrap neatly. */
.vchart-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px; margin: -4px -8px; border: 1px solid transparent; border-radius: 8px; background: none; box-shadow: none; color: var(--vc-muted); font: inherit; font-size: 12px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.vchart-toggle:hover { border-color: var(--vc-line); }
.vchart-toggle[aria-pressed=false] { text-decoration: line-through; opacity: .75; }
.vchart-toggle[aria-pressed=false] .vchart-key { background: transparent !important; box-shadow: inset 0 0 0 2px var(--vc-muted); }
.vchart-toggle:focus-visible { outline: 2px solid var(--xz-focus, currentColor); outline-offset: 2px; }
.vchart[data-range="30"] .vchart-bars { width: min(80%, 16px); gap: 1px; }
.vchart[data-range="30"] .vchart-bar { border-radius: 2px 2px 0 0; }
.vchart-controls { align-items: center; justify-content: flex-end; }
.vchart-controls .cs-wrap { min-width: 170px; }
.vchart-controls [data-volume-export] { min-height: 38px; }
/* Global search in the header */
.gsearch { position: relative; display: flex; align-items: center; }
.gsearch input { width: 300px; height: 40px; padding: 0 64px 0 14px; border-radius: 12px; font-size: 13px; }
.gsearch kbd { position: absolute; inset-inline-end: 10px; font: 600 10px/1 Inter, sans-serif; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--xz-ctl-line); opacity: .8; pointer-events: none; }
.gsearch ul { position: absolute; z-index: 70; top: calc(100% + 6px); inset-inline-end: 0; width: min(440px, 92vw); max-height: 360px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 12px; border: 1px solid var(--xz-ctl-line); background: var(--bg, #11131f); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
html[data-xpayz-theme=light] .gsearch ul { background: #fff; box-shadow: 0 14px 34px rgba(20, 30, 50, .16); }
.gsearch li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.gsearch li small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch li[aria-selected=true] { background: color-mix(in srgb, var(--positive) 16%, transparent); outline: 2px solid var(--info); outline-offset: -2px; }
.gsearch li.gs-empty { cursor: default; }
@media (max-width: 1100px) { .gsearch input { width: 200px; } .gsearch kbd { display: none; } .gsearch input { padding-inline-end: 14px; } }
@media (max-width: 640px) { .gsearch input { width: 140px; } }
.vchart[data-range="30"] .vchart-x-minor, .vchart[data-range="14"] .vchart-x-minor { visibility: hidden; }
header > .gsearch { margin-inline-start: auto; margin-inline-end: 8px; }
/* Coin cells: icon + amount (+ network) in tables and lists */
.coin-cell { display: inline-flex; align-items: center; gap: 10px; text-align: start; }
.coin-cell .asset-name { display: grid; gap: 1px; }
td.num .coin-cell, .num .coin-cell { justify-content: flex-end; }
.coin-cell-sm { display: flex; gap: 8px; margin: 2px 0; }
.coin-cell-sm .asset-mark { transform: scale(.8); transform-origin: left center; }
.coin-sub { display: block; }
.coin-figures { display: grid; gap: 14px; }
.coin-figure b { font-size: 18px; font-variant-numeric: tabular-nums; }
.coin-figure small { font-size: 12px; }
.admin-figure .coin-figure .asset-name { line-height: 1.35; } .admin-figure { line-height: 1.4; }
.coin-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 14px; } .coin-row .coin-cell-sm { margin: 0; } .net-inline .network-logo { border-radius: 50%; }
.net-inline .network-logo { margin: 0; }
/* Admin: merchant logos and token tiles */
.m-cell { display: inline-flex; align-items: center; gap: 12px; }
.m-cell > span:last-child { display: grid; gap: 2px; }
.m-logo { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: #fff; }
.m-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.m-logo.m-mono { background: linear-gradient(135deg, #c2027a, #55386f); color: #fff; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 700; }
.m-hero { display: flex; align-items: center; gap: 18px; margin: 4px 0 20px; }
.m-hero h2 { margin: 0 0 6px; font-size: 22px; }
.m-hero p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.m-hero .m-logo { border-radius: 16px; }
.token-letter { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #6b7a90; color: #fff; font-weight: 700; font-size: 13px; }
.pa-known { margin: 10px 0 4px; }
/* Completed demo v4: compact shared components for every merchant workspace. */
.time-zone-fields { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(230px, 1.5fr) auto; align-items: end; gap: 12px; }
.time-zone-fields label { display: grid; gap: 7px; min-width: 0; margin: 0; font-size: 12px; text-transform: none; }
.time-zone-fields input, .time-zone-fields select { width: 100%; min-width: 0; margin: 0; padding: 10px 11px; font-size: 12px; }
.time-zone-fields button { min-height: 38px; font-size: 12px; }
.time-zone-form .field-hint { display: block; margin-top: 11px; font-size: 11px; line-height: 1.7; }
.wallet-balances-page, .service-credit-page { container-type: inline-size; min-width: 0; }
.wallet-balances-intro { margin-bottom: 16px; }
.wallet-balances-intro h2 { font-size: 17px; line-height: 1.5; }
.wallet-balances-intro p { margin-top: 4px; font-size: 12px; line-height: 1.6; }
.wallet-network-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.wallet-network-grid .wallet-network-card { display: flex; flex-direction: column; min-width: 0; padding: 18px; margin: 0; }
.wallet-network-card .network-heading { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 16px; line-height: 1.4; }
.wallet-network-card .network-heading img { width: 24px; height: 24px; margin: 0; }
.wallet-token-list { display: grid; align-content: start; gap: 8px; min-height: 124px; }
.wallet-network-card .wallet-token-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 58px; margin: 0; padding: 9px 0; }
.wallet-token-row > div { min-width: 0; }
.wallet-token-row .asset-mark { width: 27px; height: 27px; margin-inline-end: 8px; }
.wallet-token-row .token-logo { width: 24px; height: 24px; }
.wallet-token-row .network-badge { width: 13px; height: 13px; }
.wallet-network-card .balance-row strong { min-width: 0; font-size: 17px; line-height: 1.35; text-align: end; overflow-wrap: anywhere; }
.wallet-network-card .balance-row strong small { display: block; margin-top: 3px; font-size: 10px; }
.wallet-network-card .asset-name { font-size: 12px; line-height: 1.5; }
.wallet-network-card .asset-name small { font-size: 10px; line-height: 1.5; }
.wallet-gas-row { min-height: 70px; gap: 12px; padding-block: 13px; }
.wallet-role-list { display: grid; gap: 12px; margin-top: 16px; margin-bottom: 15px; }
.wallet-role-list h3 { margin: 0 0 5px; font-size: 11px; line-height: 1.6; }
.wallet-role-list .wallet-address { margin: 0; font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; word-break: break-word; }
.wallet-network-card > .hint { margin: auto 0 0; padding: 10px 11px; font-size: 10px; line-height: 1.7; }
.wallet-balances-page .wallets-requests-link { margin-top: 16px; font-size: 11px; line-height: 1.7; }
.wallet-changes-page { width: 100%; max-width: 1080px; margin-inline: auto; }
.wallet-changes-page .panel { padding: 17px; margin-bottom: 16px; }
.wallet-changes-page .panel-head { gap: 14px; margin-bottom: 15px; }
.wallet-changes-page .panel-head h2 { font-size: 16px; }
.wallet-changes-page .panel-head p, .wallet-changes-page .hint, .wallet-changes-page .stage-steps { font-size: 11px; line-height: 1.65; }
.wallet-changes-page .data-table td { padding-block: 11px; font-size: 11px; }
.wallet-changes-page .data-table td small, .wallet-changes-page .wallet-address { font-size: 10px; line-height: 1.6; }
.wallet-changes-page .toolbar { flex-wrap: wrap; gap: 8px; }
.wallet-changes-page button { min-height: 32px; padding: 7px 10px; font-size: 11px; }
#modal:has(#ar-net) { padding: 20px; }
#modal:has(#ar-net) h2 { font-size: 20px; }
#modal:has(#ar-net) p, #modal:has(#ar-net) label, #modal:has(#ar-net) .field-hint { font-size: 12px; line-height: 1.65; }
.service-credit-page .bill-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1120px; margin: 0 auto 16px; }
.service-credit-page .bill-card { display: flex; flex-direction: column; gap: 10px; padding: 15px; border-radius: 13px; }
.service-credit-page .bill-head { gap: 8px; flex-wrap: wrap; }
.service-credit-page .bill-head .asset-mark { width: 27px; height: 27px; margin: 0; }
.service-credit-page .bill-head .token-logo { width: 24px; height: 24px; }
.service-credit-page .bill-head .network-badge { width: 13px; height: 13px; }
.service-credit-page .bill-head .chip { font-size: 9px; padding: 2px 5px; }
.service-credit-page .bill-name { flex: 1 1 62px; }
.service-credit-page .bill-name h3 { font-size: 14px; }
.service-credit-page .bill-name span { font-size: 10px; line-height: 1.6; }
.service-credit-page .bill-balance { margin: 3px 0; font-size: 23px; line-height: 1.3; overflow-wrap: anywhere; }
.service-credit-page .bill-balance small { font-size: 11px; }
.service-credit-page .bill-meta { gap: 6px; padding-top: 9px; }
.service-credit-page .bill-meta div { gap: 8px; font-size: 11px; line-height: 1.6; }
.service-credit-page .bill-meta dd { text-align: end; overflow-wrap: anywhere; }
.service-credit-page .bill-warn { font-size: 10px; line-height: 1.6; }
.service-credit-page .bill-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin-top: auto; }
.service-credit-page .bill-actions button { min-height: 30px; padding: 6px 9px; font-size: 10px; line-height: 1.4; }
body .service-credit-page .bill-actions button:not(:disabled) { background: linear-gradient(120deg, #c9ff78, #adfc02); border-color: #adfc02; color: #172400; box-shadow: 0 2px 9px #adfc0214; }
.service-credit-page > .panel { padding: 17px; margin-bottom: 16px; }
.service-credit-page .panel-head { margin-bottom: 15px; gap: 12px; }
.service-credit-page .panel-head h2 { font-size: 16px; }
.service-credit-page .panel-head p, .service-credit-page .detail-row { font-size: 11px; line-height: 1.7; }
.service-credit-page .bill-topup label { font-size: 11px; }
.service-credit-page .bill-topup .cs-wrap { flex-basis: 220px; max-width: 360px; }
.service-credit-page .bill-topup .cs-button { min-height: 36px; padding: 7px 10px; font-size: 12px; }
.setup-funding-note { font-size: 11px; line-height: 1.75; }
@container (max-width: 780px) { .wallet-network-grid { grid-template-columns: minmax(0, 1fr); } .wallet-token-list { min-height: 0; } }
@container (max-width: 760px) { .service-credit-page .bill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 400px) { .service-credit-page .bill-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1050px) { .time-zone-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } .time-zone-fields button { justify-self: start; } }
@media (max-width: 600px) { .time-zone-fields { grid-template-columns: minmax(0, 1fr); } .vchart[data-range="30"] .vchart-bars { width: 90%; } }

.integration-library-link { display:flex;align-items:center;justify-content:space-between;gap:20px; }
.integration-library-link h2 { font-size:17px;line-height:1.5; }
.integration-library-link p { margin-top:5px;font-size:12px;line-height:1.7; }
.integration-library-link > a { flex:0 0 auto;padding:8px 11px;border:1px solid var(--xz-ctl-line);border-radius:8px;font-size:12px;text-decoration:none; }
@media(max-width:700px) { .integration-library-link { flex-direction:column;align-items:flex-start; } .vchart[data-range="30"] .vchart-x { visibility:hidden; } .vchart[data-range="30"] .vchart-day:nth-child(1) .vchart-x,.vchart[data-range="30"] .vchart-day:nth-child(16) .vchart-x,.vchart[data-range="30"] .vchart-day:last-child .vchart-x { visibility:visible; } }
@media(max-width:420px) { .vchart[data-range="7"] .vchart-day:nth-child(even) .vchart-x { visibility:hidden; } }
.vchart-tip { min-width:min(180px,calc(100% - 16px));max-width:calc(100% - 16px); }
/* All-time chart: with many monthly bars, only every fifth label is shown (the table view lists them all). */
.vchart[data-range="all"] .vchart-x-minor { visibility: hidden; }
/* Header search in right-to-left languages: keep the text clear of the shortcut badge on the start side. */
.gsearch input { padding-inline: 14px 64px; }
@media (max-width: 1100px) { .gsearch input { padding-inline: 14px; } }

/* Payment link type (client, 29 Oct): single payment or reusable. */
.choice-group{border:0;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice-group legend{font-size:12px;color:var(--muted);margin-bottom:8px;padding:0}
.choice-group .choice{margin:0;display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer}
.choice-group .choice input{width:auto;margin:2px 0 0;flex:none}
.choice-group .choice b{display:block;font-size:12px;color:var(--ink)}
.choice-group .choice small{display:block;font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4}
.choice-group .choice:has(input:checked){border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}
@media(max-width:520px){.choice-group{grid-template-columns:1fr}}

/* "Not available" features: small "i" (client, 29 Oct). The full message is in the link's title and for screen readers. */
.nav-info { display: inline-grid; place-items: center; width: 12px; height: 12px; margin-inline-start: 4px; border-radius: 50%; border: 1px solid currentColor; font: italic 700 8px/1 Georgia, serif; vertical-align: 1px; }
.na-note { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.na-note .nav-info { width: 16px; height: 16px; font-size: 10px; margin: 0; }

/* Coin icon inside free text and amount-only cells (XZCoinText / XZCoinAmount in coin-select.js). */
.coin-inline { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; vertical-align: middle; }
.coin-inline-mark { position: relative; display: inline-block; width: 16px; height: 16px; flex: none; }
.coin-inline-mark > img:first-child { width: 16px; height: 16px; border-radius: 50%; display: block; }
.coin-inline-mark .cs-badge { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--bg, #11131f); }
/* Switch between the demo workspaces and the sandbox backend on the sign-in screens. */
.auth-mode-switch{text-align:center;font-size:12px;color:var(--muted,#aaa1bc);margin-top:16px}
.auth-mode-switch button{background:none;border:0;box-shadow:none;padding:2px 4px;color:#d9f59c;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html[data-xpayz-theme=light] .auth-mode-switch{color:#758198}
html[data-xpayz-theme=light] .auth-mode-switch button{color:#4d6b00}