/* EmiPay design system (owner 21.10.2026: «усі кнопки, віджети, іконки, шрифти — в одному стилі»).
   Loaded last: one set of tokens for controls, labels, badges, numbers and icons across every role and theme.
   Typography: --display only for page/dialog headings and the big amount; --font for all text and numbers;
   --mono only for ids, codes, card numbers, hashes and timers. */
:root {
  --ctl-h: 40px; --ctl-h-sm: 32px; --ctl-r: 12px; --ctl-r-sm: 9px; --ctl-fs: 13px; --ctl-fs-sm: 12px;
  --ico: 17px; --ico-sm: 15px;
  --label-fs: 10.5px; --label-ls: .08em;
  --chip-h: 24px; --chip-fs: 11px;
}

/* ── buttons: primary (.mag / default), secondary, ghost, danger; sizes md / sm; icon buttons ── */
button:is(.mag, .secondary, .ghost, .danger, .big) { min-height: var(--ctl-h); padding: 0 17px; border-radius: var(--ctl-r); font-family: var(--font); font-size: var(--ctl-fs); font-weight: 600; line-height: 1.15; gap: 8px; }
button:is(.mag, .secondary, .ghost, .danger).sm, button.sm:not(.icon) { min-height: var(--ctl-h-sm); padding: 0 12px; border-radius: var(--ctl-r-sm); font-size: var(--ctl-fs-sm); gap: 6px; }
button.icon { width: var(--ctl-h); height: var(--ctl-h); min-height: 0; padding: 0; border-radius: var(--ctl-r); flex-shrink: 0; }
button.icon.sm, .rowact button.icon { width: var(--ctl-h-sm); height: var(--ctl-h-sm); border-radius: var(--ctl-r-sm); }
button svg, .fv-btn svg, a.secondary svg { width: var(--ico); height: var(--ico); flex-shrink: 0; }
button.sm svg { width: var(--ico-sm); height: var(--ico-sm); }
button:focus-visible, a:focus-visible, .fv-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }
button:disabled, button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.rowact { white-space: nowrap; } .rowact > button + button { margin-left: 6px; }
.linkbtn { font-family: var(--font); font-weight: 600; }
/* `.sm` is a button size only — it must not pad avatars, chips or tags */
.avatar.sm { padding: 0; font-family: var(--font); font-weight: 700; font-size: 10.5px; letter-spacing: 0; }
.avatar { font-family: var(--font); font-weight: 700; letter-spacing: 0; }

/* ── labels: section kickers, table heads, nav groups, stat captions — one style (body font, small caps) ── */
.eyebrow, th, .navgroup, .topstat label, .tl-title, .formsection, .c-top span, .bc-kind, .qfoot, .pstate, .msrc, .chart-x {
  font-family: var(--font); font-weight: 600; font-size: var(--label-fs); letter-spacing: var(--label-ls); text-transform: uppercase;
}
.eyebrow { font-size: 11px; }
.tl-title { font-size: 11px; color: var(--muted); }
.dialogbody .tl-title, .panel .tl-title { margin: 22px 0 10px; }
.dialogbody .tl-title:first-child { margin-top: 0; }
th { color: var(--dim); }
/* units next to numbers (UAH, USDT, шт.) */
.metric small, .amt em, .qamt small, .bigmetric small, .bigamount small, .topstat strong small, .count, .navcount, .chiptab em, .delta {
  font-family: var(--font); font-style: normal; letter-spacing: .02em;
}
.metric small, .amt em, .qamt small, .bigmetric small, .bigamount small { font-size: 11px; font-weight: 600; color: var(--muted); }

/* ── numbers: tabular in tables and lists, never monospace ── */
td.num, .num { font-family: var(--font); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); white-space: nowrap; }
.metric, .topstat strong, .kv4 b, .lines2 .line b, .amt, .qamt { font-family: var(--font); font-variant-numeric: tabular-nums; }

/* ── chips: status badges, roles, tags — one pill shape and height ── */
.badge, .rolechip.sm, .pill, .lvl {
  display: inline-flex; align-items: center; gap: 6px; height: var(--chip-h); min-height: var(--chip-h); padding: 0 10px 0 9px; border-radius: 999px;
  font-family: var(--font); font-size: var(--chip-fs); font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1; white-space: nowrap;
}
.rolechip.sm i, .badge::before { width: 6px; height: 6px; }
.pill { padding: 0 10px; color: var(--muted); background: color-mix(in oklab, var(--neutral, var(--muted)) 10%, transparent); box-shadow: inset 0 0 0 1px var(--line-2); }
.pill.ok { color: var(--ok); background: color-mix(in oklab, var(--ok) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ok) 28%, transparent); }
.navcount:not(.on) { display: none; }
.count { display: inline-grid; }
.count, .navcount { place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* the topbar role chip is a control-height chip, not a button */
.topbar .rolechip:not(.sm) { height: var(--ctl-h); padding: 0 14px; border-radius: 999px; font-family: var(--font); }

/* ── ids and codes stay monospace, in one chip style ── */
.idchip { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0; height: 26px; padding: 0 9px; border-radius: 8px; display: inline-flex; align-items: center; }
.timer { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── form controls ── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-family: var(--font); font-size: 13.5px; border-radius: var(--ctl-r); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select { min-height: var(--ctl-h); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent); }
input[type=range] { width: 100%; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; height: 22px; cursor: pointer; }
label { font-family: var(--font); }
.checklabel { gap: 10px; align-items: center; }

/* ── dialogs ── */
#modal .dialoghead h2, .fv-title b { font-family: var(--display); }
.fv-title b { font-family: var(--font); font-weight: 600; }
#modal .formactions, #modal .dialog-actions { gap: 8px; }

/* ── toasts ── */
.toast { font-family: var(--font); font-size: 13px; }

/* ── tabs: page tabs and filter chips share one look ── */
.tab, .chiptab, .section-tab { font-family: var(--font); font-weight: 600; }

/* ── viewer toolbar uses the same buttons and icons ── */
.fv-tools button, .fv-btn { height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); min-width: var(--ctl-h-sm); padding: 0 9px; border-radius: var(--ctl-r-sm); font-family: var(--font); font-size: var(--ctl-fs-sm); font-weight: 600; gap: 6px; }
.fv-tools button svg, .fv-btn svg, .fv-nav svg { width: var(--ico-sm); height: var(--ico-sm); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fv-nav { display: none; place-items: center; }
.fv.fv-multi .fv-nav { display: grid; }
.fv-nav svg { width: 22px; height: 22px; }
.fv-zoom { font-family: var(--font); }
@media (max-width: 640px) { .fv-wide span { display: none; } .fv-wide { padding: 0; width: var(--ctl-h-sm); } }

/* ── empty states ── */
.empty h3, .empty b { font-family: var(--font); }

@media (max-width: 760px) {
  :root { --ctl-h: 40px; --ctl-h-sm: 32px; }
}

/* tab counters look like every other counter */
.chiptab em, .tab em, .section-tab em { font: 700 10.5px var(--font); font-style: normal; font-variant-numeric: tabular-nums; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; }
.tab, .chiptab, .section-tab { border-radius: 10px; font-size: 12.5px; }

/* sidebar footer: compact icon buttons so the name and role fit */
.sidefoot button.icon { width: 34px; height: 34px; border-radius: var(--ctl-r-sm); }
.sidefoot .info small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
/* bell: sound row aligned on the control line */
.alertsound { align-items: end; }
.alertsound label { display: grid; gap: 6px; }
.alertsound input[type=range] { height: var(--ctl-h); }
/* universal search in the palette */
#palette { width: min(760px, calc(100% - 28px)); }
#pal-list .pal-group { padding: 10px 18px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
#pal-list li[role=option] span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pal-list li[role=option] small { flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }