/* Telas do produto em vetor (HTML + CSS).
   Tudo é medido em --u, uma fração da largura da própria tela (container query),
   então a tela inteira escala como uma imagem, sem perder nitidez. */

:root, [data-scheme="light"] {
  --m-app: #F5F5F8; --m-card: #FFFFFF; --m-side: #FFFFFF; --m-sunken: #EDEDF2;
  --m-strong: #000000; --m-text: #171719; --m-muted: #6E6E78; --m-line: #EDEDF2; --m-field: #C7C7CE;
  --m-ink: #000000; --m-on-ink: #FFFFFF; --m-up: #4F7020; --m-down: #C9382A;
  --m-ok-bg: #EFF6E1; --m-wait-bg: #FCF2E2; --m-wait: #8A5A0F;
  --m-sage-bg: #A2B7B8; --m-sage: #000000; --m-accent-line: #000000;
}
[data-scheme="dark"] {
  --m-app: #0B0B0C; --m-card: #171719; --m-side: #111113; --m-sunken: #26262A;
  --m-strong: #FFFFFF; --m-text: #E4E4EA; --m-muted: #C7C7CE; --m-line: #26262A; --m-field: #4A4A52;
  --m-ink: #FFFFFF; --m-on-ink: #000000; --m-up: #9CC455; --m-down: #EFA79F;
  --m-ok-bg: #1F2A12; --m-wait-bg: #2E2210; --m-wait: #F3D9A6;
  --m-sage-bg: #365F61; --m-sage: #FFFFFF; --m-accent-line: transparent;
}
@media (prefers-color-scheme: dark) {
  [data-scheme="system"] {
    --m-app: #0B0B0C; --m-card: #171719; --m-side: #111113; --m-sunken: #26262A;
    --m-strong: #FFFFFF; --m-text: #E4E4EA; --m-muted: #C7C7CE; --m-line: #26262A; --m-field: #4A4A52;
    --m-ink: #FFFFFF; --m-on-ink: #000000; --m-up: #9CC455; --m-down: #EFA79F;
    --m-ok-bg: #1F2A12; --m-wait-bg: #2E2210; --m-wait: #F3D9A6;
    --m-sage-bg: #365F61; --m-sage: #FFFFFF; --m-accent-line: transparent;
  }
}

.tela { display: block; width: 100%; container-type: inline-size; }

.ui {
  --u: calc(100cqi / 1440);
  position: relative;
  font-family: var(--font-family);
  font-size: calc(var(--u) * 14);
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-align: left;
  color: var(--m-text);
  background: var(--m-app);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.ui--mob { --u: calc(100cqi / 390); font-size: calc(var(--u) * 15); }
.ui p { margin: 0; }
.ui ul { list-style: none; margin: 0; padding: 0; }
.ui b { font-weight: 500; color: var(--m-strong); }
.ui small { font-size: calc(var(--u) * 12); }
.ui .i { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: none; }
.ui .muted { color: var(--m-muted); }
.ui .up { color: var(--m-up); }
.ui .down { color: var(--m-down); }
.mo { white-space: nowrap; }
.mo small { font-size: 0.72em !important; opacity: 0.8; }
.ui-grow { flex: 1; }
.ui-center { display: block; text-align: center; }

/* ---------- moldura do console ---------- */
.ui--desk { display: grid; grid-template-columns: calc(var(--u) * 254) minmax(0, 1fr); min-height: calc(var(--u) * 900); }
.ui-side { background: var(--m-side); border-right: 1px solid var(--m-line); padding: calc(var(--u) * 16) calc(var(--u) * 12); }
.ui-brand { display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 4) calc(var(--u) * 14); font-size: calc(var(--u) * 17); }
.ui-brand img { width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: calc(var(--u) * 6); }
.ui-eyebrow { font-size: calc(var(--u) * 11); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-muted); margin: calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 6) !important; }
.ui--mob .ui-eyebrow { margin: calc(var(--u) * 4) 0 0 !important; font-size: calc(var(--u) * 12); }
.ui-side li { display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 12); border-radius: 999px; white-space: nowrap; transition: background-color 0.2s; }
.ui-side li:hover { background: var(--m-sunken); }
.ui-side li.on { background: var(--m-ink); color: var(--m-on-ink); }
.ui-main { min-width: 0; }
.ui-top { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 62); padding: 0 calc(var(--u) * 24); border-bottom: 1px solid var(--m-line); }
.ui-crumb { font-weight: 500; color: var(--m-strong); }
.ui-select { display: inline-flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); height: calc(var(--u) * 38); min-width: calc(var(--u) * 172); padding: 0 calc(var(--u) * 16); border: 1px solid var(--m-field); border-radius: 999px; color: var(--m-strong); white-space: nowrap; }
.ui-select--wide { min-width: calc(var(--u) * 182); }
.ui-select--sm { height: calc(var(--u) * 30); min-width: 0; padding: 0 calc(var(--u) * 10); }
.ui-select .i { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.ui-round { display: inline-grid; place-items: center; width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: 50%; background: var(--m-sunken); color: var(--m-strong); flex: none; }
.ui-round--sm { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.ui-round--sm .i { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.ui-body { display: flex; flex-direction: column; gap: calc(var(--u) * 16); padding: calc(var(--u) * 26) calc(var(--u) * 24) calc(var(--u) * 28); }
.ui-head { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 16); margin-bottom: calc(var(--u) * 4); }
.ui-title { font-size: calc(var(--u) * 44); line-height: 1.05; letter-spacing: -0.03em; color: var(--m-strong); }
.ui-sub { margin-top: calc(var(--u) * 8) !important; font-size: calc(var(--u) * 15); color: var(--m-muted); }

/* ---------- peças ---------- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 18); border-radius: 999px; font-weight: 500; white-space: nowrap; transition: transform 0.25s var(--ease-out), filter 0.25s; }
.ui-btn:hover { transform: translateY(calc(var(--u) * -2)); }
.ui-btn--dark { background: var(--m-ink); color: var(--m-on-ink); }
.ui-btn--accent { background: var(--brand-accent); color: #000; box-shadow: inset 0 0 0 1px var(--m-accent-line); }
.ui-btn--ghost { border: 1px solid var(--m-field); color: var(--m-strong); }
.ui-btn--lg { height: calc(var(--u) * 48); padding: 0 calc(var(--u) * 26); font-size: calc(var(--u) * 17); }
.ui-btn--xs { height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10); font-size: calc(var(--u) * 11); gap: calc(var(--u) * 5); }
.ui-btn--xs .i { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.ui-btn--block { width: 100%; height: calc(var(--u) * 42); }
.ui-chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 10); border-radius: 999px; font-size: calc(var(--u) * 12); font-weight: 500; white-space: nowrap; background: var(--m-sunken); color: var(--m-strong); }
.ui-chip .i { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.ui-chip--ok { background: var(--m-ok-bg); color: var(--m-up); }
.ui-chip--wait { background: var(--m-wait-bg); color: var(--m-wait); }
.ui-chip--ink { background: var(--m-ink); color: var(--m-on-ink); }
.ui-chip--neutral { color: var(--m-muted); }
.ui-chip--sage { background: var(--m-sage-bg); color: var(--m-sage); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 14); font-size: calc(var(--u) * 13); }
.ui-card { background: var(--m-card); border-radius: calc(var(--u) * 20); padding: calc(var(--u) * 20); }
.ui-card__title { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--u) * 16) !important; font-size: calc(var(--u) * 18); color: var(--m-strong); }
.ui-card__title u { font-size: calc(var(--u) * 13); text-underline-offset: 3px; }
.ui-live { display: inline-block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); margin-right: calc(var(--u) * 8); border-radius: 50%; background: var(--status-pending-dot); animation: pulse 1.6s ease-in-out infinite; }

/* painel */
.ui-alert { display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 16) calc(var(--u) * 20); border-radius: calc(var(--u) * 18); background: var(--m-wait-bg); }
.ui-alert > .i { width: calc(var(--u) * 24); height: calc(var(--u) * 24); color: var(--m-wait); }
.ui-alert > div { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.ui-alert b { color: var(--m-wait); font-size: calc(var(--u) * 16); }
.ui-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 16); }
.ui-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-stat { display: flex; flex-direction: column; gap: calc(var(--u) * 8); min-height: calc(var(--u) * 124); padding: calc(var(--u) * 18) calc(var(--u) * 20); border-radius: calc(var(--u) * 20); background: var(--m-card); }
.ui-stat__label { display: flex; justify-content: space-between; align-items: center; color: var(--m-muted); }
.ui-stat__value { display: flex; align-items: center; font-size: calc(var(--u) * 24); color: var(--m-strong); }
.ui-stat__foot { margin-top: auto; font-size: calc(var(--u) * 12); color: var(--m-muted); }
.ui-stat--dark { background: var(--m-ink); }
.ui-stat--dark .ui-stat__label, .ui-stat--dark .ui-stat__value, .ui-stat--dark .ui-stat__foot { color: var(--m-on-ink); }
.ui-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: calc(var(--u) * 16); }
.ui-bars { display: flex; align-items: stretch; gap: calc(var(--u) * 8); height: calc(var(--u) * 200); }
.ui-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: calc(var(--u) * 8); }
.ui-bar i { display: block; width: 100%; border-radius: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 4) calc(var(--u) * 4); background: var(--m-sunken); transform-origin: 50% 100%; transition: transform 0.9s var(--ease-entrance), background-color 0.2s; }
.ui-bar:hover i { background: var(--brand-accent-200); }
.ui-bar.on i { background: var(--brand-accent); box-shadow: inset 0 0 0 1px var(--m-accent-line); }
.ui-bar small { color: var(--m-muted); font-size: calc(var(--u) * 10); }
.h40 { height: 40%; } .h44 { height: 44%; } .h52 { height: 52%; } .h56 { height: 56%; } .h60 { height: 60%; }
.h64 { height: 64%; } .h68 { height: 68%; } .h72 { height: 72%; } .h76 { height: 76%; } .h80 { height: 80%; }
.h84 { height: 84%; } .h88 { height: 88%; } .h96 { height: 96%; }
.js .tela .ui-bar i { transform: scaleY(0.08); }
.tela.is-in .ui-bar i { transform: none; }
.ui-bar:nth-child(2) i { transition-delay: 0.04s; } .ui-bar:nth-child(3) i { transition-delay: 0.08s; }
.ui-bar:nth-child(4) i { transition-delay: 0.12s; } .ui-bar:nth-child(5) i { transition-delay: 0.16s; }
.ui-bar:nth-child(6) i { transition-delay: 0.2s; } .ui-bar:nth-child(7) i { transition-delay: 0.24s; }
.ui-bar:nth-child(8) i { transition-delay: 0.28s; } .ui-bar:nth-child(9) i { transition-delay: 0.32s; }
.ui-bar:nth-child(10) i { transition-delay: 0.36s; } .ui-bar:nth-child(11) i { transition-delay: 0.4s; }
.ui-bar:nth-child(12) i { transition-delay: 0.44s; } .ui-bar:nth-child(13) i { transition-delay: 0.48s; }
.ui-bar:nth-child(14) i { transition-delay: 0.52s; }
.ui-list li { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 8) 0; border-radius: calc(var(--u) * 12); transition: background-color 0.2s; }
.ui-list li:hover { background: var(--m-app); }
.ui-list li > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-list b { font-size: calc(var(--u) * 15); }
.ui-list small { color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-health__row { display: flex; align-items: flex-end; gap: calc(var(--u) * 48); }
.ui-health__row > span { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 6); }
.ui-health__row small { color: var(--m-muted); font-size: calc(var(--u) * 13); }
.ui-health__grow { width: calc(var(--u) * 180); }
.ui-progress { display: block; width: 100%; height: calc(var(--u) * 10); border-radius: 999px; background: var(--m-sunken); overflow: hidden; }
.ui-progress i { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--brand-accent); }

/* tabelas */
.ui-filters { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); }
.ui-filters span { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 14); border: 1px solid var(--m-field); border-radius: 999px; color: var(--m-strong); transition: background-color 0.2s; }
.ui-filters span:hover { background: var(--m-sunken); }
.ui-filters span i { display: grid; place-items: center; min-width: calc(var(--u) * 22); height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 6); border-radius: 999px; background: var(--m-sunken); font-style: normal; font-size: calc(var(--u) * 11); }
.ui-filters span.on { background: var(--m-ink); border-color: var(--m-ink); color: var(--m-on-ink); }
.ui-filters span.on i { background: var(--m-on-ink); color: var(--m-ink); }
.ui-toolbar { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.ui-search { flex: 0 1 calc(var(--u) * 620); display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 42); padding: 0 calc(var(--u) * 16); border: 1px solid var(--m-field); border-radius: 999px; color: var(--m-muted); white-space: nowrap; overflow: hidden; }
.ui-seg { display: inline-flex; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3); border-radius: 999px; background: var(--m-sunken); }
.ui-seg span { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 12); border-radius: 999px; color: var(--m-muted); }
.ui-seg span.on { background: var(--m-card); color: var(--m-strong); box-shadow: inset 0 0 0 1px var(--m-field); }
.ui-table { background: var(--m-card); border-radius: calc(var(--u) * 20); overflow: hidden; }
.ui-th, .ui-tr { display: grid; grid-template-columns: var(--cols); align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 20); }
.ui-th { height: calc(var(--u) * 46); border-bottom: 1px solid var(--m-field); color: var(--m-muted); font-size: calc(var(--u) * 13); }
.ui-th span { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.ui-th .i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.ui-tr { height: calc(var(--u) * 50); border-bottom: 1px solid var(--m-line); color: var(--m-strong); transition: background-color 0.2s; }
.ui-tr:last-child { border-bottom: 0; }
.ui-tr:hover { background: var(--m-app); }
.ui-tr > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-th .r { justify-content: flex-end; }
.ui-tr .r { text-align: right; }
.ui-table--fila { --cols: 1.3fr 1fr 1fr 1fr 1.5fr 0.7fr 0.9fr; }
.ui-table--membros { --cols: 1fr 1fr 1.2fr 0.9fr 1fr 0.9fr 1.1fr; }
.ui-table--agentes { --cols: 1.6fr 1fr 1fr 1.4fr 1fr; }
.ui-table--carteira { --cols: 1.4fr 0.6fr 1.8fr 1fr 1fr; }
.ui-pager { display: flex; justify-content: space-between; align-items: center; color: var(--m-muted); }
.ui-pager__mid, .ui-pager__nav { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.ui-pager__nav > span:not(.ui-round) { color: var(--m-strong); font-size: calc(var(--u) * 13); }

/* rakeback */
.ui-form { display: flex; flex-direction: column; gap: calc(var(--u) * 22); }
.ui-form .ui-card__title { margin-bottom: 0 !important; }
.ui-form small { display: block; margin-bottom: calc(var(--u) * 10); font-size: calc(var(--u) * 15); color: var(--m-strong); }
.ui-form small.hint { margin: calc(var(--u) * 8) 0 0; font-size: calc(var(--u) * 12); color: var(--m-muted); }
.ui-form__grid { display: grid; grid-template-columns: calc(var(--u) * 280) calc(var(--u) * 360); gap: calc(var(--u) * 24); }
.ui-radio { display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 34); font-size: calc(var(--u) * 16); color: var(--m-strong); }
.ui-radio::before { content: ""; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; border: 1.5px solid var(--m-field); box-sizing: border-box; }
.ui-radio.on::before { border-color: var(--m-strong); background: radial-gradient(circle, var(--m-strong) 42%, transparent 46%); }
.ui-input { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 18); border: 1px solid var(--m-field); border-radius: calc(var(--u) * 16); font-size: calc(var(--u) * 16); color: var(--m-strong); }
.ui-input i { font-style: normal; color: var(--m-muted); }
.ui-input--half { width: calc(var(--u) * 280); justify-content: flex-start; }
.ui-toggle { display: flex; align-items: flex-start; gap: calc(var(--u) * 14); }
.ui-toggle > span { display: flex; flex-direction: column; }
.ui-toggle b { font-size: calc(var(--u) * 16); }
.ui-switch { position: relative; flex: none; width: calc(var(--u) * 46); height: calc(var(--u) * 26); border-radius: 999px; background: var(--m-ink); }
.ui-switch::after { content: ""; position: absolute; top: calc(var(--u) * 4); right: calc(var(--u) * 4); width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: 50%; background: var(--brand-accent); }

/* relatórios */
.ui-period { display: flex; align-items: center; gap: calc(var(--u) * 8); color: var(--m-muted); }
.ui-reports { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 12); }
.ui-report { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 8); min-height: calc(var(--u) * 150); padding: calc(var(--u) * 16); transition: transform 0.25s var(--ease-out), box-shadow 0.25s; }
.ui-report:hover { transform: translateY(calc(var(--u) * -3)); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) calc(var(--u) * -12) rgb(0 0 0 / 0.25); }
.ui-report b { font-size: calc(var(--u) * 15); }
.ui-report small { flex: 1; color: var(--m-muted); }

/* ---------- app do jogador ---------- */
.ui--mob { display: flex; flex-direction: column; min-height: calc(var(--u) * 844); }
.ui-mtop { display: flex; align-items: center; gap: calc(var(--u) * 18); height: calc(var(--u) * 60); padding: 0 calc(var(--u) * 16); background: var(--m-card); border-bottom: 1px solid var(--m-line); }
.ui-mtop .ui-brand { padding: 0; font-size: calc(var(--u) * 19); }
.ui-mtop .ui-brand img { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.ui-mtop > .i, .ui-mbell .i { width: calc(var(--u) * 24); height: calc(var(--u) * 24); color: var(--m-strong); }
.ui-mbell { position: relative; display: grid; }
.ui-mbell > i { position: absolute; top: calc(var(--u) * -6); right: calc(var(--u) * -6); display: grid; place-items: center; width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%; background: var(--status-danger-fill); color: #fff; font-style: normal; font-size: calc(var(--u) * 10); }
.ui-mback { display: flex; align-items: center; gap: calc(var(--u) * 16); height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 20); border-bottom: 1px solid var(--m-line); }
.ui-mback b { font-size: calc(var(--u) * 18); }
.ui-mback .i { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.ui-mbody { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 12); padding: calc(var(--u) * 16); }
.ui-hello { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 10); }
.ui-hello b { font-size: calc(var(--u) * 21); }
.ui-hello__btns { display: flex; gap: calc(var(--u) * 6); }
.ui-hello__btns i { display: grid; place-items: center; width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: 50%; background: var(--m-ink); color: var(--m-on-ink); }
.ui-hello__btns i.accent { background: var(--brand-accent); color: #000; box-shadow: inset 0 0 0 1px var(--m-accent-line); }
.ui-search--m { flex: none; height: calc(var(--u) * 46); }
.ui-mchips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); }
.ui-mchips span { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 12); border-radius: 999px; background: var(--m-ink); color: var(--m-on-ink); font-size: calc(var(--u) * 13); }
.ui-mchips .i { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.ui-acc { display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding: calc(var(--u) * 18); border-radius: calc(var(--u) * 24); background: var(--m-card); transition: transform 0.25s var(--ease-out); }
.ui-acc:hover { transform: translateY(calc(var(--u) * -2)); }
.ui-acc__head { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.ui-acc__head > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-acc__head b { font-size: calc(var(--u) * 17); }
.ui-acc__head small { color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-avatar { display: grid; place-items: center; flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; background: var(--m-ink); color: var(--m-on-ink); font-size: calc(var(--u) * 13); font-weight: 600; }
.ui-acc__ok { display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 13); color: var(--m-up); }
.ui-acc__ok i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--olive-500); }
.ui-acc__row { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 8); }
.ui-acc__chips { display: flex; align-items: baseline; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 27); letter-spacing: -0.02em; color: var(--m-strong); }
.ui-acc__chips small { font-size: calc(var(--u) * 16); color: var(--m-muted); }
.ui-acc__row .up { font-size: calc(var(--u) * 13); }
.ui-acc__link { margin-top: calc(var(--u) * 4); padding-top: calc(var(--u) * 12); border-top: 1px solid var(--m-line); text-align: right; text-decoration: underline; color: var(--m-strong); }
.ui-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: calc(var(--u) * 8) calc(var(--u) * 4) calc(var(--u) * 12); border-top: 1px solid var(--m-line); background: var(--m-card); }
.ui-tabs > span { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 11); text-align: center; color: var(--m-muted); }
.ui-tabs .i { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.ui-tabs > span.on { color: var(--m-strong); }
.ui-tabs > span.on > i { display: grid; place-items: center; width: calc(var(--u) * 50); height: calc(var(--u) * 28); border-radius: 999px; background: var(--brand-accent); color: #000; font-style: normal; }
.ui-amount { display: flex; justify-content: center; align-items: baseline; gap: calc(var(--u) * 18); margin: 0 calc(var(--u) * 34); padding-bottom: calc(var(--u) * 4); border-bottom: 2px solid var(--m-strong); }
.ui-amount small { font-size: calc(var(--u) * 22); color: var(--m-muted); }
.ui-amount b { font-size: calc(var(--u) * 58); font-weight: 400; letter-spacing: -0.03em; color: var(--m-muted); }
.ui-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 6); }
.ui-quick span { display: grid; place-items: center; height: calc(var(--u) * 34); border: 1px solid var(--m-field); border-radius: 999px; font-size: calc(var(--u) * 13); color: var(--m-strong); transition: background-color 0.2s, color 0.2s; }
.ui-quick span:hover { background: var(--m-ink); color: var(--m-on-ink); }
.ui-sum { display: flex; flex-direction: column; gap: calc(var(--u) * 10); padding: calc(var(--u) * 18); border-radius: calc(var(--u) * 20); background: var(--m-sunken); }
.ui-sum p { display: flex; justify-content: space-between; align-items: baseline; color: var(--m-strong); }
.ui-sum__total { font-size: calc(var(--u) * 17); font-weight: 500; }
.ui-mcta { padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 18); border-top: 1px solid var(--m-line); }
.ui-mcta span { display: grid; place-items: center; height: calc(var(--u) * 52); border-radius: 999px; background: var(--m-sunken); color: var(--m-muted); font-size: calc(var(--u) * 16); }
.ui-max { color: var(--m-strong); font-size: calc(var(--u) * 15); }
.ui-label { color: var(--m-strong); font-size: calc(var(--u) * 15); }
.ui-pick { display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 14) calc(var(--u) * 16); border: 1px solid var(--m-field); border-radius: calc(var(--u) * 18); }
.ui-pick.on { border: 2px solid var(--m-strong); }
.ui-pick > i { flex: none; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; border: 1.5px solid var(--m-field); box-sizing: border-box; }
.ui-pick.on > i { border-color: var(--m-strong); background: radial-gradient(circle, var(--m-strong) 42%, transparent 46%); }
.ui-pick > span { display: flex; flex-direction: column; }
.ui-pick b { font-size: calc(var(--u) * 17); }
.ui-pick small { color: var(--m-muted); font-size: calc(var(--u) * 13); }
.ui-limits { display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding: calc(var(--u) * 18); border-radius: calc(var(--u) * 20); background: var(--m-card); }

@media (prefers-reduced-motion: reduce) {
  .js .tela .ui-bar i { transform: none; }
}