/* tg-glass — NRB UI kit in the style of Telegram's own mini-apps (Wallet).
 *
 * Plain CSS, no build, no framework. Every class starts with `tgg-`, every token with `--tgg-`.
 * Works without JavaScript (dark Wallet palette); `tg-glass.js` binds the tokens to
 * Telegram.WebApp.themeParams, safe areas and haptics.
 *
 * Source of truth: apps/shared/tg-glass/. Apps keep a byte-identical copy next to their own
 * styles (`node apps/shared/tg-glass/sync.mjs`); tests fail when a copy drifts.
 *
 * Contrast (dark): #FFFFFF on #1C1C1E 17:1, #8E8E93 on #1C1C1E 5.0:1, #FFFFFF on #3E88F7 3.6:1 (17px semibold = large text),
 * #3E88F7 on #1C1C1E 5.0:1.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────────
 * --tgg-theme-* are written by tg-glass.js from Telegram.WebApp.themeParams (only for the scheme
 * the app allows). Without them the Wallet dark palette below applies. */
:root {
  --tgg-bg: var(--tgg-theme-secondary-bg, #000000);
  --tgg-surface: var(--tgg-theme-section-bg, #1C1C1E);
  --tgg-surface-2: #2C2C2E;
  --tgg-text: var(--tgg-theme-text, #FFFFFF);
  --tgg-hint: var(--tgg-theme-hint, #8E8E93);
  --tgg-subtitle: var(--tgg-theme-subtitle, #8E8E93);
  --tgg-section-header: var(--tgg-theme-section-header, #8E8E93);
  --tgg-accent: var(--tgg-theme-button, #3E88F7);
  --tgg-on-accent: var(--tgg-theme-button-text, #FFFFFF);
  --tgg-link: var(--tgg-theme-link, #3E88F7);
  --tgg-destructive: var(--tgg-theme-destructive, #FF453A);
  --tgg-positive: #30D158;
  --tgg-separator: var(--tgg-theme-separator, rgba(84, 84, 88, .55));
  --tgg-fill: rgba(118, 118, 128, .24);
  --tgg-fill-2: rgba(118, 118, 128, .18);
  --tgg-accent-soft: rgba(62, 136, 247, .16);
  --tgg-press: rgba(255, 255, 255, .10);

  /* liquid glass */
  --tgg-glass: rgba(37, 37, 40, .58);
  --tgg-glass-strong: rgba(44, 44, 48, .72);
  --tgg-glass-solid: #232326;
  --tgg-glass-border: rgba(255, 255, 255, .14);
  --tgg-glass-highlight: inset 0 .5px 0 rgba(255, 255, 255, .28), inset 0 -.5px 0 rgba(255, 255, 255, .05);
  --tgg-glass-shadow: 0 8px 28px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
  --tgg-glass-blur: blur(22px) saturate(180%);

  /* shape and rhythm (Telegram iOS: 12px rows, 16px gutters) */
  --tgg-r-card: 14px;
  --tgg-r-btn: 12px;
  --tgg-r-tile: 8px;
  --tgg-r-pill: 999px;
  --tgg-gutter: 16px;
  --tgg-row-h: 48px;
  --tgg-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* motion: press in fast, spring back */
  --tgg-ease-out: cubic-bezier(.32, .72, 0, 1);
  --tgg-spring: cubic-bezier(.34, 1.56, .64, 1);
  --tgg-press-scale: .97;

  /* safe areas: Telegram (Bot API 8.0+) sets --tg-safe-area-inset-* and --tg-content-safe-area-inset-*;
   * browsers give env(). Apps that already have their own variables override --tgg-safe-*. */
  --tgg-safe-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --tgg-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --tgg-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
  --tgg-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));
  --tgg-dock-space: calc(76px + var(--tgg-safe-bottom));
  color-scheme: dark;
}

/* Light palette: only when the app allows it and Telegram says light (tg-glass.js sets the attribute). */
:root[data-tgg-scheme="light"] {
  --tgg-bg: var(--tgg-theme-secondary-bg, #EFEFF4);
  --tgg-surface: var(--tgg-theme-section-bg, #FFFFFF);
  --tgg-surface-2: #F2F2F7;
  --tgg-text: var(--tgg-theme-text, #000000);
  --tgg-hint: var(--tgg-theme-hint, #8E8E93);
  --tgg-subtitle: var(--tgg-theme-subtitle, #8E8E93);
  --tgg-section-header: var(--tgg-theme-section-header, #6D6D72);
  --tgg-accent: var(--tgg-theme-button, #007AFF);
  --tgg-link: var(--tgg-theme-link, #007AFF);
  --tgg-destructive: var(--tgg-theme-destructive, #FF3B30);
  --tgg-positive: #34C759;
  --tgg-separator: var(--tgg-theme-separator, rgba(60, 60, 67, .29));
  --tgg-fill: rgba(118, 118, 128, .12);
  --tgg-fill-2: rgba(118, 118, 128, .08);
  --tgg-accent-soft: rgba(0, 122, 255, .12);
  --tgg-press: rgba(0, 0, 0, .06);
  --tgg-glass: rgba(255, 255, 255, .62);
  --tgg-glass-strong: rgba(255, 255, 255, .78);
  --tgg-glass-solid: #F7F7F9;
  --tgg-glass-border: rgba(0, 0, 0, .08);
  --tgg-glass-highlight: inset 0 .5px 0 rgba(255, 255, 255, .9), inset 0 -.5px 0 rgba(0, 0, 0, .04);
  --tgg-glass-shadow: 0 8px 28px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);
  color-scheme: light;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
.tgg-app {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--tgg-bg); color: var(--tgg-text);
  font-family: var(--tgg-font); font-size: 17px; line-height: 1.29; letter-spacing: -.41px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
}
.tgg-page {
  padding: calc(8px + var(--tgg-safe-top)) calc(var(--tgg-gutter) + var(--tgg-safe-right)) calc(24px + var(--tgg-dock-space))
    calc(var(--tgg-gutter) + var(--tgg-safe-left));
  display: flex; flex-direction: column; gap: 20px; max-width: 560px; margin: 0 auto; box-sizing: border-box;
}
.tgg-title { margin: 0; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .37px; }
.tgg-headline { margin: 0; font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: .38px; }
.tgg-hint { color: var(--tgg-hint); font-size: 13px; line-height: 18px; letter-spacing: -.08px; margin: 0; }
.tgg-num { font-variant-numeric: tabular-nums; }
.tgg-hidden { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Glass surface ────────────────────────────────────────────────────────── */
.tgg-glass {
  background: var(--tgg-glass);
  -webkit-backdrop-filter: var(--tgg-glass-blur); backdrop-filter: var(--tgg-glass-blur);
  border: .5px solid var(--tgg-glass-border);
  box-shadow: var(--tgg-glass-highlight), var(--tgg-glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tgg-glass, .tgg-seg, .tgg-search, .tgg-fab, .tgg-tabbar, .tgg-icon-btn { background: var(--tgg-glass-solid); }
}

/* ── Press feedback (every interactive kit element) ──────────────────────────
 * In: fast scale-down + translucent highlight. Out: spring back. */
.tgg-press, .tgg-btn, .tgg-row[href], button.tgg-row, label.tgg-row, .tgg-action, .tgg-seg__item, .tgg-fab, .tgg-icon-btn,
.tgg-tab, .tgg-chip, .tgg-card--tap {
  position: relative; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform .45s var(--tgg-spring), background-color .2s ease, opacity .2s ease, color .2s ease;
}
.tgg-press::after, .tgg-btn::after, .tgg-action__icon::after, .tgg-fab::after, .tgg-icon-btn::after, .tgg-chip::after, .tgg-card--tap::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--tgg-press); opacity: 0;
  pointer-events: none; transition: opacity .3s ease;
}
.tgg-press:active, .tgg-btn:active, .tgg-action:active, .tgg-fab:active, .tgg-icon-btn:active, .tgg-tab:active, .tgg-chip:active,
.tgg-card--tap:active, .tgg-seg__item:active {
  transform: scale(var(--tgg-press-scale)); transition-duration: .12s; transition-timing-function: var(--tgg-ease-out);
}
.tgg-press:active::after, .tgg-btn:active::after, .tgg-action:active .tgg-action__icon::after, .tgg-fab:active::after,
.tgg-icon-btn:active::after, .tgg-chip:active::after, .tgg-card--tap:active::after { opacity: 1; transition-duration: .08s; }
/* rows of a list highlight in place (iOS), no scale: the card would jitter */
.tgg-row[href]:active, button.tgg-row:active, label.tgg-row:active { background-color: var(--tgg-press); transition-duration: .05s; }
:where(.tgg-btn, .tgg-press, .tgg-action, .tgg-fab, .tgg-icon-btn, .tgg-tab, .tgg-chip, .tgg-seg__item, .tgg-row)[disabled],
:where(.tgg-btn, .tgg-press, .tgg-action, .tgg-row)[aria-disabled="true"] { opacity: .4; pointer-events: none; }
:where([class^="tgg-"], [class*=" tgg-"]):focus-visible { outline: 2px solid var(--tgg-accent); outline-offset: 2px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.tgg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  min-height: 50px; padding: 0 20px; border: 0; border-radius: var(--tgg-r-btn); overflow: hidden;
  background: var(--tgg-accent); color: var(--tgg-on-accent); font: 600 17px/22px var(--tgg-font); letter-spacing: -.41px;
  text-decoration: none; cursor: pointer;
}
.tgg-btn--secondary { background: var(--tgg-accent-soft); color: var(--tgg-link); }
.tgg-btn--plain { background: var(--tgg-surface); color: var(--tgg-link); }
.tgg-btn--destructive { background: rgba(255, 69, 58, .14); color: var(--tgg-destructive); }
.tgg-btn--glass { background: var(--tgg-glass); color: var(--tgg-text); -webkit-backdrop-filter: var(--tgg-glass-blur);
  backdrop-filter: var(--tgg-glass-blur); border: .5px solid var(--tgg-glass-border); box-shadow: var(--tgg-glass-highlight); }
.tgg-btn--block { width: 100%; }
.tgg-btn--sm { min-height: 36px; padding: 0 14px; border-radius: var(--tgg-r-pill); font-size: 15px; }
.tgg-btn svg { width: 20px; height: 20px; flex: none; }

.tgg-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: .5px solid var(--tgg-glass-border); background: var(--tgg-glass); color: var(--tgg-text); cursor: pointer;
  -webkit-backdrop-filter: var(--tgg-glass-blur); backdrop-filter: var(--tgg-glass-blur); box-shadow: var(--tgg-glass-highlight);
}
.tgg-icon-btn svg { width: 22px; height: 22px; }

.tgg-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--tgg-r-pill); border: 0;
  background: var(--tgg-fill); color: var(--tgg-text); font: 500 15px/20px var(--tgg-font); cursor: pointer; overflow: hidden;
}
.tgg-chip[aria-pressed="true"], .tgg-chip[aria-selected="true"] { background: var(--tgg-accent); color: var(--tgg-on-accent); }

/* ── Segmented control: floating liquid-glass pill with a sliding glider ─────
 * <div class="tgg-seg" role="tablist" style="--n:3" data-active="0">
 *   <span class="tgg-seg__glider" aria-hidden="true"></span>
 *   <button class="tgg-seg__item" role="tab" aria-selected="true">…</button> …
 * --n: number of items (default 3), --i (or data-active 0..5): active index. */
.tgg-seg {
  --n: 3; --i: 0; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch;
  padding: 4px; gap: 0; border-radius: var(--tgg-r-pill); box-sizing: border-box; isolation: isolate;
  background: var(--tgg-glass); -webkit-backdrop-filter: var(--tgg-glass-blur); backdrop-filter: var(--tgg-glass-blur);
  border: .5px solid var(--tgg-glass-border); box-shadow: var(--tgg-glass-highlight), var(--tgg-glass-shadow);
}
.tgg-seg[data-active="1"] { --i: 1; } .tgg-seg[data-active="2"] { --i: 2; } .tgg-seg[data-active="3"] { --i: 3; }
.tgg-seg[data-active="4"] { --i: 4; } .tgg-seg[data-active="5"] { --i: 5; }
.tgg-seg--inline { box-shadow: var(--tgg-glass-highlight); background: var(--tgg-fill); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; }
.tgg-seg__glider {
  position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: var(--tgg-r-pill);
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .3), 0 2px 8px rgba(0, 0, 0, .25);
  transform: translateX(calc(var(--i) * 100%)); transition: transform .5s var(--tgg-spring);
}
:root[data-tgg-scheme="light"] .tgg-seg__glider { background: #FFFFFF; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
[dir="rtl"] .tgg-seg__glider { left: auto; right: 4px; transform: translateX(calc(var(--i) * -100%)); }
.tgg-seg__item {
  min-width: 0; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--tgg-r-pill); background: transparent; cursor: pointer;
  color: var(--tgg-hint); font: 600 15px/20px var(--tgg-font); letter-spacing: -.24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
}
.tgg-seg__item[aria-selected="true"], .tgg-seg__item[aria-pressed="true"], .tgg-seg__item[aria-current="page"] { color: var(--tgg-text); }
.tgg-seg--sm .tgg-seg__item { min-height: 30px; font-size: 13px; }
.tgg-seg-wrap { display: flex; justify-content: center; }

/* ── Floating bottom dock: search pill + round «+» ────────────────────────── */
.tgg-dock {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px;
  padding: 12px calc(var(--tgg-gutter) + var(--tgg-safe-right)) calc(10px + max(var(--tgg-safe-bottom), 8px)) calc(var(--tgg-gutter) + var(--tgg-safe-left));
  pointer-events: none; box-sizing: border-box;
}
.tgg-dock > * { pointer-events: auto; }
.tgg-dock::before { content: ''; position: absolute; z-index: -1; inset: -24px 0 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--tgg-bg) 78%, transparent) 55%, var(--tgg-bg) 100%); }
.tgg-search {
  flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px; box-sizing: border-box;
  border-radius: var(--tgg-r-pill); color: var(--tgg-hint); font: 400 17px/22px var(--tgg-font);
  background: var(--tgg-glass-strong); -webkit-backdrop-filter: var(--tgg-glass-blur); backdrop-filter: var(--tgg-glass-blur);
  border: .5px solid var(--tgg-glass-border); box-shadow: var(--tgg-glass-highlight), var(--tgg-glass-shadow);
}
.tgg-search svg { width: 20px; height: 20px; flex: none; }
.tgg-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tgg-text); font: inherit; letter-spacing: -.41px; }
.tgg-search input::placeholder { color: var(--tgg-hint); }
.tgg-fab {
  flex: none; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%;
  color: var(--tgg-text); cursor: pointer; overflow: hidden;
  background: var(--tgg-glass-strong); -webkit-backdrop-filter: var(--tgg-glass-blur); backdrop-filter: var(--tgg-glass-blur);
  border: .5px solid var(--tgg-glass-border); box-shadow: var(--tgg-glass-highlight), var(--tgg-glass-shadow);
}
.tgg-fab svg { width: 24px; height: 24px; }
.tgg-fab--accent { background: var(--tgg-accent); color: var(--tgg-on-accent); border-color: transparent; }

/* ── Floating tab bar (glass capsule, sliding pill) ─────────────────────────
 * <nav class="tgg-tabbar" style="--n:5" data-active="0"><span class="tgg-tabbar__glider"></span><a class="tgg-tab" aria-current="page">…</a>… */
.tgg-tabbar {
  --n: 4; --i: 0; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; max-width: 440px;
  height: 62px; padding: 4px; box-sizing: border-box; border-radius: var(--tgg-r-pill); isolation: isolate;
  background: var(--tgg-glass); -webkit-backdrop-filter: var(--tgg-glass-blur); backdrop-filter: var(--tgg-glass-blur);
  border: .5px solid var(--tgg-glass-border); box-shadow: var(--tgg-glass-highlight), var(--tgg-glass-shadow);
}
.tgg-tabbar[data-active="1"] { --i: 1; } .tgg-tabbar[data-active="2"] { --i: 2; } .tgg-tabbar[data-active="3"] { --i: 3; }
.tgg-tabbar[data-active="4"] { --i: 4; }
.tgg-tabbar__glider { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n));
  border-radius: var(--tgg-r-pill); background: rgba(255, 255, 255, .11); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .2);
  transform: translateX(calc(var(--i) * 100%)); transition: transform .5s var(--tgg-spring); }
[dir="rtl"] .tgg-tabbar__glider { left: auto; right: 4px; transform: translateX(calc(var(--i) * -100%)); }
.tgg-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; border-radius: var(--tgg-r-pill);
  color: var(--tgg-hint); text-decoration: none; font: 500 10px/1 var(--tgg-font); letter-spacing: .1px; border: 0; background: none; cursor: pointer; }
.tgg-tab svg { width: 24px; height: 24px; }
.tgg-tab[aria-current="page"], .tgg-tab[aria-selected="true"] { color: var(--tgg-accent); font-weight: 600; }
.tgg-tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }

/* ── Inset grouped list ───────────────────────────────────────────────────── */
.tgg-section { display: flex; flex-direction: column; gap: 6px; }
.tgg-section__header { margin: 0; padding: 0 16px; color: var(--tgg-section-header); font: 400 13px/18px var(--tgg-font); text-transform: uppercase; letter-spacing: -.08px; }
.tgg-section__header--title { text-transform: none; color: var(--tgg-text); font: 600 20px/25px var(--tgg-font); letter-spacing: .38px; padding: 0 4px; }
.tgg-section__footer { margin: 0; padding: 0 16px; color: var(--tgg-hint); font: 400 13px/18px var(--tgg-font); letter-spacing: -.08px; }
.tgg-list { margin: 0; padding: 0; list-style: none; border-radius: var(--tgg-r-card); background: var(--tgg-surface); overflow: hidden; }
.tgg-list > li { list-style: none; }
.tgg-row {
  display: flex; align-items: center; gap: 12px; min-height: var(--tgg-row-h); width: 100%; box-sizing: border-box; padding: 0 16px; margin: 0;
  border: 0; background: transparent; color: var(--tgg-text); text-align: start; text-decoration: none; font: 400 17px/22px var(--tgg-font);
  letter-spacing: -.41px; cursor: default;
}
.tgg-row[href], button.tgg-row, label.tgg-row { cursor: pointer; }
.tgg-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 11px 0; align-self: stretch; }
/* hairline separator, inset to the text like iOS (after the icon tile when there is one); none after the last row */
.tgg-row { position: relative; --tgg-sep-inset: 16px; }
.tgg-row:has(> .tgg-row__icon) { --tgg-sep-inset: 58px; }
.tgg-row:has(> .tgg-tile--lg) { --tgg-sep-inset: 68px; }
.tgg-list > li:not(:last-child) > .tgg-row::after, .tgg-list > .tgg-row:not(:last-child)::after {
  content: ''; position: absolute; inset-inline-start: var(--tgg-sep-inset); inset-inline-end: 0; bottom: 0; height: .5px;
  background: var(--tgg-separator); pointer-events: none; }
.tgg-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgg-row__title--wrap { white-space: normal; }
.tgg-row__subtitle { color: var(--tgg-subtitle); font-size: 14px; line-height: 18px; letter-spacing: -.15px; overflow: hidden; text-overflow: ellipsis; }
.tgg-row__value { flex: none; max-width: 50%; color: var(--tgg-hint); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgg-row__value--strong { color: var(--tgg-text); font-weight: 600; }
.tgg-row__chevron { flex: none; width: 8px; height: 13px; color: rgba(235, 235, 245, .3); margin-inline-start: -4px; }
:root[data-tgg-scheme="light"] .tgg-row__chevron { color: rgba(60, 60, 67, .3); }
[dir="rtl"] .tgg-row__chevron { transform: scaleX(-1); }
.tgg-row--destructive { color: var(--tgg-destructive); }
.tgg-row--accent { color: var(--tgg-link); }
.tgg-row--center { justify-content: center; }
.tgg-row[aria-pressed="true"] .tgg-row__check, .tgg-row[aria-checked="true"] .tgg-row__check { opacity: 1; }
.tgg-row__check { flex: none; width: 20px; height: 20px; color: var(--tgg-accent); opacity: 0; }

/* coloured rounded-square icon tile */
.tgg-row__icon, .tgg-tile {
  --tint: #3E88F7; flex: none; width: 30px; height: 30px; border-radius: var(--tgg-r-tile); background: var(--tint); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font: 600 13px/1 var(--tgg-font);
}
.tgg-row__icon svg, .tgg-tile svg { width: 19px; height: 19px; }
.tgg-row__icon img, .tgg-tile img { width: 100%; height: 100%; object-fit: cover; }
.tgg-tile--lg { width: 40px; height: 40px; border-radius: 10px; }
.tgg-tile--round { border-radius: 50%; }
.tgg-tint-blue { --tint: #3E88F7; } .tgg-tint-green { --tint: #30D158; } .tgg-tint-orange { --tint: #FF9F0A; }
.tgg-tint-red { --tint: #FF453A; } .tgg-tint-purple { --tint: #BF5AF2; } .tgg-tint-pink { --tint: #FF375F; }
.tgg-tint-teal { --tint: #40C8E0; } .tgg-tint-indigo { --tint: #5E5CE6; } .tgg-tint-yellow { --tint: #FFD60A; color: #1C1C1E; }
.tgg-tint-grey { --tint: #8E8E93; } .tgg-tint-cyan { --tint: #64D2FF; } .tgg-tint-mint { --tint: #66D4CF; }

/* plain card (same surface as a list) */
.tgg-card { border-radius: var(--tgg-r-card); background: var(--tgg-surface); padding: 16px; box-sizing: border-box; overflow: hidden; }
.tgg-card--tap { cursor: pointer; }
.tgg-card--selected { box-shadow: inset 0 0 0 2px var(--tgg-accent); }

/* ── Big balance header (Wallet) ──────────────────────────────────────────────
 * The number stands alone and is the only big thing; nothing sits on its baseline.
 *   A (default) — caption, number, the unit on its own small grey line:
 *     <div class="tgg-balance"><p class="tgg-balance__label">Баланс</p>
 *       <p class="tgg-balance__amount">1 250</p><p class="tgg-balance__unit">кредитов</p></div>
 *   B (.tgg-balance--coin) — a coin glyph before the number instead of the unit word (keep the word for
 *     screen readers), and an optional pill below (`.tgg-delta`, e.g. «≈ 60 генераций»):
 *       <p class="tgg-balance__amount"><span class="tgg-balance__coin" aria-hidden="true"><svg…/></span>1 250</p>
 * One action may follow: <a class="tgg-btn tgg-btn--sm tgg-balance__action">＋ Пополнить</a>.
 * Money keeps its currency glued to the number, as Wallet does with «$13.88»: «13 880 ₽».
 * .tgg-balance--sm — the same inside a card. */
.tgg-balance { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 0 6px; }
.tgg-balance__label { color: var(--tgg-hint); font: 400 15px/20px var(--tgg-font); letter-spacing: -.24px; margin: 0 0 2px; }
.tgg-balance__amount {
  display: inline-flex; align-items: center; justify-content: center; gap: .16em; margin: 0; max-width: 100%;
  font: 700 54px/62px var(--tgg-font); letter-spacing: -.03em; word-spacing: .08em; font-variant-numeric: lining-nums proportional-nums; white-space: nowrap;
}
.tgg-balance__unit { margin: 0; color: var(--tgg-hint); font: 500 15px/20px var(--tgg-font); letter-spacing: -.24px; }
.tgg-balance > .tgg-delta { margin-top: 10px; }
/* one compact pill action right under the amount («Пополнить»), instead of a row of buttons that repeats the tab bar */
.tgg-balance__action { margin-top: 16px; gap: 6px; padding: 0 18px 0 14px; }
.tgg-balance__action svg { width: 18px; height: 18px; }
.tgg-balance__coin {
  position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: .6em; height: .6em;
  margin-inline-end: .02em; border-radius: 50%; color: #FFFFFF;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45), transparent 55%), linear-gradient(150deg, #6CB4FF 0%, var(--tgg-coin, #2F7BF0) 70%);
  box-shadow: inset 0 -.035em 0 rgba(0, 0, 0, .22), inset 0 0 0 .02em rgba(255, 255, 255, .22);
}
.tgg-balance__coin svg { width: 56%; height: 56%; }
/* text only screen readers get (B keeps the unit word here) */
.tgg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tgg-balance--sm { padding: 0; }
.tgg-balance--sm .tgg-balance__amount { font-size: 46px; line-height: 54px; }
@media (max-width: 360px) { .tgg-balance__amount { font-size: 46px; line-height: 54px; } .tgg-balance--sm .tgg-balance__amount { font-size: 40px; line-height: 48px; } }
.tgg-delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--tgg-r-pill); background: var(--tgg-fill);
  color: var(--tgg-hint); font: 500 13px/18px var(--tgg-font); font-variant-numeric: tabular-nums; }
.tgg-delta--up { color: var(--tgg-positive); } .tgg-delta--down { color: var(--tgg-destructive); }

/* ── Action-button grid (Пополнить · Отправить · …) ───────────────────────── */
.tgg-actions { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.tgg-actions > li { display: flex; min-width: 0; }
.tgg-actions > li > .tgg-action { flex: 1; }
.tgg-action {
  display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--tgg-text); font: 500 13px/16px var(--tgg-font); letter-spacing: -.08px; text-decoration: none;
}
.tgg-action__icon {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 84px; height: 56px; box-sizing: border-box;
  border-radius: 16px; background: var(--tgg-surface); color: var(--tgg-link); overflow: hidden;
}
.tgg-action__icon svg { width: 26px; height: 26px; }
.tgg-action > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgg-action--primary .tgg-action__icon { background: var(--tgg-accent); color: var(--tgg-on-accent); }

/* ── Header bar (back button + title + trailing) ──────────────────────────── */
.tgg-navbar { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.tgg-navbar__title { flex: 1; min-width: 0; margin: 0; font: 600 17px/22px var(--tgg-font); letter-spacing: -.41px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgg-navbar > :first-child, .tgg-navbar > :last-child { flex: none; min-width: 40px; }

/* ── Motion preferences ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tgg-seg__glider, .tgg-tabbar__glider { transition: none; }
  .tgg-press, .tgg-btn, .tgg-row, .tgg-action, .tgg-seg__item, .tgg-fab, .tgg-icon-btn, .tgg-tab, .tgg-chip, .tgg-card--tap { transition: none; }
  .tgg-press:active, .tgg-btn:active, .tgg-action:active, .tgg-fab:active, .tgg-icon-btn:active, .tgg-tab:active, .tgg-chip:active,
  .tgg-card--tap:active, .tgg-seg__item:active { transform: none; }
}