/* =====================================================================
   AXIOM MINI APP: "Liquid Glass" design system
   Vanilla CSS, no build step. Pair with the theme bridge in the spec (section 2.3)
   that copies Telegram.WebApp.themeParams into the --ax-*-rgb triplets.

   Layers in this file:
     0. Tokens: theme (Telegram bridge), glass, radii, space, type, motion, z
     1. Base / reset
     2. Background (vibrant blobs)
     3. Glass material
     4. Layout: app shell, screens, headers, sections
     5. Components
     6. Screen-specific pieces
     7. Motion: screen transitions, keyframes
     8. Modes: lite, reduced motion, high contrast, no backdrop-filter
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. TOKENS
   --------------------------------------------------------------------- */

/* 0.1 Fallback palettes. Telegram overrides them via --tg-theme-* (colors)
   and the JS bridge (the rgb triplets). Triplets are "R G B" so they
   work in rgb(var(--x) / alpha) on every WebView, without color-mix(). */
:root {
  color-scheme: light;
  --ax-fb-bg: #ffffff;
  --ax-fb-bg-2: #efeff4;
  --ax-fb-section: #ffffff;
  --ax-fb-text: #000000;
  --ax-fb-hint: #8e8e93;
  --ax-fb-link: #2481cc;
  --ax-fb-accent: #2481cc;
  --ax-fb-on-accent: #ffffff;
  --ax-fb-destructive: #ff3b30;

  --ax-bg-rgb: 255 255 255;
  --ax-bg-2-rgb: 239 239 244;
  --ax-glass-rgb: 255 255 255;       /* = section_bg_color */
  --ax-text-rgb: 0 0 0;
  --ax-hint-rgb: 142 142 147;
  --ax-accent-rgb: 36 129 204;       /* = button_color */
  --ax-destructive-rgb: 255 59 48;
  --ax-success-rgb: 52 199 89;
  --ax-warning-rgb: 255 159 10;

  /* Background blob palette (accent + 3 fixed companions) */
  --ax-blob-1: var(--ax-accent-rgb);
  --ax-blob-2: 140 92 246;   /* violet */
  --ax-blob-3: 255 105 180;  /* pink   */
  --ax-blob-4: 45 212 191;   /* teal   */
  --ax-blob-a: .55;          /* blob opacity: tuned per scheme for text contrast */
  --ax-grain-a: .035;

  /* Glass material: light scheme */
  --ax-edge-hi: .80;         /* specular rim, brightest corner */
  --ax-edge-lo: .10;
  --ax-glint: .55;           /* inset top highlight line */
  --ax-sheen: .30;           /* top-down sheen gradient */
  --ax-shadow-rgb: 20 24 40;
  --ax-shadow-a: .14;
  --ax-fill-a: .06;          /* neutral fills (inputs, tracks, pressed rows) */
  --ax-sep-a: .10;           /* hairlines */
}

:root[data-scheme="dark"] {
  color-scheme: dark;
  --ax-fb-bg: #1c1c1e;
  --ax-fb-bg-2: #000000;
  --ax-fb-section: #2c2c2e;
  --ax-fb-text: #ffffff;
  --ax-fb-hint: #98989e;
  --ax-fb-link: #3e88f7;
  --ax-fb-accent: #3e88f7;
  --ax-fb-on-accent: #ffffff;
  --ax-fb-destructive: #ff453a;

  --ax-bg-rgb: 28 28 30;
  --ax-bg-2-rgb: 0 0 0;
  --ax-glass-rgb: 44 44 46;
  --ax-text-rgb: 255 255 255;
  --ax-hint-rgb: 152 152 158;
  --ax-accent-rgb: 62 136 247;
  --ax-destructive-rgb: 255 69 58;
  --ax-success-rgb: 48 209 88;
  --ax-warning-rgb: 255 179 64;

  --ax-blob-a: .62;
  --ax-grain-a: .05;

  --ax-edge-hi: .38;
  --ax-edge-lo: .04;
  --ax-glint: .16;
  --ax-sheen: .07;
  --ax-shadow-rgb: 0 0 0;
  --ax-shadow-a: .45;
  --ax-fill-a: .09;
  --ax-sep-a: .12;
}

/* 0.2 Semantic colors (Telegram vars first, fallback second) */
:root, [data-scheme] {
  --ax-bg:          var(--tg-theme-bg-color, var(--ax-fb-bg));
  --ax-page:        var(--tg-theme-secondary-bg-color, var(--ax-fb-bg-2));
  --ax-section:     var(--tg-theme-section-bg-color, var(--ax-fb-section));
  --ax-text:        var(--tg-theme-text-color, var(--ax-fb-text));
  --ax-hint:        var(--tg-theme-hint-color, var(--ax-fb-hint));
  --ax-subtitle:    var(--tg-theme-subtitle-text-color, var(--ax-hint));
  --ax-section-hdr: var(--tg-theme-section-header-text-color, var(--ax-hint));
  --ax-link:        var(--tg-theme-link-color, var(--ax-fb-link));
  --ax-accent:      var(--tg-theme-button-color, var(--ax-fb-accent));
  --ax-accent-text: var(--tg-theme-accent-text-color, var(--ax-accent));
  --ax-on-accent:   var(--tg-theme-button-text-color, var(--ax-fb-on-accent));
  --ax-destructive: var(--tg-theme-destructive-text-color, var(--ax-fb-destructive));
  --ax-success:     rgb(var(--ax-success-rgb));
  --ax-warning:     rgb(var(--ax-warning-rgb));

  /* Secondary text ON GLASS: derived from text color, not hint, so it keeps
     >= 4.5:1 over any tint (hint is calibrated for an opaque bg). */
  --ax-text-2: rgb(var(--ax-text-rgb) / .62);
  --ax-text-3: rgb(var(--ax-text-rgb) / .42);   /* placeholders / disabled only */
  --ax-fill:   rgb(var(--ax-text-rgb) / var(--ax-fill-a));
  --ax-fill-2: rgb(var(--ax-text-rgb) / calc(var(--ax-fill-a) * 1.8));
  --ax-sep:    rgb(var(--ax-text-rgb) / var(--ax-sep-a));

  /* Telegram inline-button styles for the post preview */
  --ax-tgbtn-blue:  #3390ec;
  --ax-tgbtn-green: #31b545;
  --ax-tgbtn-red:   #e5484d;
}

/* 0.3 Glass elevation levels.
   L1 = content (cards, list groups)   L2 = chrome (tab bar, nav, dock)
   L3 = overlay (sheets, toasts)       see spec section 3 */
:root {
  --g1-a: .62; --g1-blur: 20px; --g1-sat: 170%;
  --g2-a: .58; --g2-blur: 24px; --g2-sat: 190%;
  --g3-a: .80; --g3-blur: 30px; --g3-sat: 180%;
}
:root[data-scheme="dark"] {
  --g1-a: .55;
  --g2-a: .55;
  --g3-a: .78;
}

/* 0.4 Shape, space, type, motion, layers */
:root {
  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 34px;
  --r-pill: 999px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;
  --gutter: 16px;
  --hit: 44px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Inter", "Roboto", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

  /* type scale: size / line-height / weight / tracking */
  --t-large:    700 34px/41px var(--font);  --tr-large: -.022em;
  --t-title1:   700 28px/34px var(--font);  --tr-title1: -.020em;
  --t-title2:   650 22px/28px var(--font);  --tr-title2: -.016em;
  --t-title3:   600 20px/25px var(--font);  --tr-title3: -.012em;
  --t-headline: 600 17px/22px var(--font);  --tr-headline: -.008em;
  --t-body:     400 17px/22px var(--font);  --tr-body: -.008em;
  --t-callout:  400 16px/21px var(--font);
  --t-subhead:  400 15px/20px var(--font);
  --t-footnote: 400 13px/18px var(--font);
  --t-caption:  500 12px/16px var(--font);
  --t-caption2: 600 11px/13px var(--font);

  /* motion */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.32, 1.25, .5, 1);     /* fallback, tiny overshoot */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);    /* fallback, playful */
  --d-press: 120ms; --d-fast: 180ms; --d-base: 320ms; --d-slow: 520ms; --d-sheet: 560ms;

  --z-bg: 0; --z-content: 1; --z-sticky: 10; --z-tabbar: 20; --z-dock: 25;
  --z-toast: 40; --z-backdrop: 50; --z-sheet: 51; --z-confetti: 60;

  /* Telegram safe areas (Bot API 8.0+); 0 fallback */
  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --vh: var(--tg-viewport-stable-height, 100vh);
  --tabbar-h: 64px;
}

/* Real spring curves where linear() is supported (Chrome 113+, Safari 17.2+) */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* damping ~0.8: gentle, settles fast; for screens, sheets, thumbs */
    --ease-spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%,
      .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%,
      1.017 63.9%, 1.001 85.6%, 1);
    /* damping ~0.55: visible overshoot; for presses released, badges, swatches, toasts */
    --ease-bounce: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%,
      1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1, 1.078 30.1%, 1.049 32.6%,
      .994 37.6%, .981 40.2%, .974 43.1%, .976 45.5%, .993 53.4%, 1.001 58.6%,
      1.004 64.2%, 1 82.1%, 1);
  }
}

/* ---------------------------------------------------------------------
   1. BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--ax-page);
}
body {
  margin: 0;
  min-height: var(--vh);
  font: var(--t-body);
  letter-spacing: var(--tr-body);
  color: var(--ax-text);
  background: var(--ax-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
  font-feature-settings: "cv11", "ss01";
}
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--ax-link); text-decoration: none; }
img { display: block; max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: .88em; letter-spacing: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Focus: visible only for keyboard / switch access */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ax-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgb(var(--ax-accent-rgb) / .22);
}

/* Typography utilities */
.t-large    { font: var(--t-large);    letter-spacing: var(--tr-large); }
.t-title1   { font: var(--t-title1);   letter-spacing: var(--tr-title1); }
.t-title2   { font: var(--t-title2);   letter-spacing: var(--tr-title2); }
.t-title3   { font: var(--t-title3);   letter-spacing: var(--tr-title3); }
.t-headline { font: var(--t-headline); letter-spacing: var(--tr-headline); }
.t-body     { font: var(--t-body); }
.t-callout  { font: var(--t-callout); }
.t-subhead  { font: var(--t-subhead); }
.t-footnote { font: var(--t-footnote); }
.t-caption  { font: var(--t-caption); }
.t-2 { color: var(--ax-text-2); }
.t-accent { color: var(--ax-accent-text); }
.t-danger { color: var(--ax-destructive); }

/* ---------------------------------------------------------------------
   2. BACKGROUND: the vibrant field the glass refracts
   One fixed layer. Blobs are radial gradients (NO filter: blur()).
   Only transform is animated, on the compositor.
   --------------------------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgb(var(--ax-blob-1) / calc(var(--ax-blob-a) * .5)), transparent 60%),
    var(--ax-page);
  contain: strict;
}
.bg__blob {
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  opacity: var(--ax-blob-a);
  will-change: transform;
  animation: ax-drift 28s var(--ease-in-out) infinite alternate;
}
.bg__blob:nth-child(1) {
  left: -35vmax; top: -30vmax;
  background: radial-gradient(closest-side, rgb(var(--ax-blob-1)) 0%, rgb(var(--ax-blob-1) / .5) 45%, rgb(var(--ax-blob-1) / 0) 100%);
}
.bg__blob:nth-child(2) {
  right: -40vmax; top: 10vh;
  background: radial-gradient(closest-side, rgb(var(--ax-blob-2)) 0%, rgb(var(--ax-blob-2) / .45) 45%, rgb(var(--ax-blob-2) / 0) 100%);
  animation-duration: 34s; animation-delay: -12s; animation-name: ax-drift-2;
}
.bg__blob:nth-child(3) {
  left: -20vmax; bottom: -45vmax;
  background: radial-gradient(closest-side, rgb(var(--ax-blob-3)) 0%, rgb(var(--ax-blob-3) / .4) 45%, rgb(var(--ax-blob-3) / 0) 100%);
  animation-duration: 40s; animation-delay: -20s; animation-name: ax-drift-3;
}
.bg__blob:nth-child(4) {
  width: 50vmax; height: 50vmax;
  right: -10vmax; bottom: -10vmax;
  background: radial-gradient(closest-side, rgb(var(--ax-blob-4)) 0%, rgb(var(--ax-blob-4) / .4) 50%, rgb(var(--ax-blob-4) / 0) 100%);
  animation-duration: 31s; animation-delay: -6s;
}
/* Static film grain: breaks up gradient banding and makes the glass read as glass.
   One tiny SVG, rasterised once. */
.bg::after {
  content: "";
  position: absolute; inset: 0;
  opacity: var(--ax-grain-a);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.bg.is-paused .bg__blob { animation-play-state: paused; }

@keyframes ax-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(18vw, 12vh, 0) scale(1.12); }
  100% { transform: translate3d(6vw, 26vh, 0) scale(.94); }
}
@keyframes ax-drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-22vw, 18vh, 0) scale(.9); }
  100% { transform: translate3d(-8vw, -10vh, 0) scale(1.1); }
}
@keyframes ax-drift-3 {
  0%   { transform: translate3d(0, 0, 0) scale(1.05); }
  50%  { transform: translate3d(20vw, -14vh, 0) scale(.95); }
  100% { transform: translate3d(30vw, -4vh, 0) scale(1.15); }
}

/* ---------------------------------------------------------------------
   3. GLASS MATERIAL
   .glass + one level modifier. Edge = 1px gradient rim via masked ::before.
   NEVER nest a .glass inside a .glass: inner surfaces use .tint (no blur).
   --------------------------------------------------------------------- */
.glass {
  --ga: var(--g1-a); --gb: var(--g1-blur); --gs: var(--g1-sat);
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgb(255 255 255 / var(--ax-sheen)) 0%, rgb(255 255 255 / 0) 42%),
    rgb(var(--ax-glass-rgb) / var(--ga));
  -webkit-backdrop-filter: blur(var(--gb)) saturate(var(--gs));
          backdrop-filter: blur(var(--gb)) saturate(var(--gs));
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / var(--ax-glint)),
    inset 0 -1px 0 0 rgb(255 255 255 / calc(var(--ax-glint) * .25)),
    0 1px 2px rgb(var(--ax-shadow-rgb) / calc(var(--ax-shadow-a) * .35)),
    0 10px 30px -10px rgb(var(--ax-shadow-rgb) / var(--ax-shadow-a));
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgb(255 255 255 / var(--ax-edge-hi)) 0%,
    rgb(255 255 255 / calc(var(--ax-edge-hi) * .25)) 28%,
    rgb(255 255 255 / var(--ax-edge-lo)) 55%,
    rgb(255 255 255 / calc(var(--ax-edge-hi) * .55)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass--2 {
  --ga: var(--g2-a); --gb: var(--g2-blur); --gs: var(--g2-sat);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / var(--ax-glint)),
    inset 0 -1px 0 0 rgb(255 255 255 / calc(var(--ax-glint) * .3)),
    0 2px 6px rgb(var(--ax-shadow-rgb) / calc(var(--ax-shadow-a) * .5)),
    0 18px 40px -12px rgb(var(--ax-shadow-rgb) / calc(var(--ax-shadow-a) * 1.3));
}
.glass--3 {
  --ga: var(--g3-a); --gb: var(--g3-blur); --gs: var(--g3-sat);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / var(--ax-glint)),
    0 4px 12px rgb(var(--ax-shadow-rgb) / calc(var(--ax-shadow-a) * .6)),
    0 30px 80px -20px rgb(var(--ax-shadow-rgb) / calc(var(--ax-shadow-a) * 1.6));
}
/* Accent glass: tinted by the Telegram button color (hero CTA, selected states) */
.glass--accent {
  background:
    linear-gradient(180deg, rgb(255 255 255 / calc(var(--ax-sheen) + .1)) 0%, rgb(255 255 255 / 0) 50%),
    linear-gradient(135deg, rgb(var(--ax-accent-rgb) / .92), rgb(var(--ax-blob-2) / .80));
  color: var(--ax-on-accent);
}
.glass--accent .t-2, .glass--accent .t-accent { color: rgb(255 255 255 / .82); }

/* Inner translucent surface: no backdrop-filter, safe to repeat */
.tint {
  background: var(--ax-fill);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 .5px rgb(var(--ax-text-rgb) / .06);
}

/* ---------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------- */
.app {
  position: relative;
  z-index: var(--z-content);
  min-height: var(--vh);
  max-width: 560px;
  margin: 0 auto;
}
.screen {
  position: relative;
  min-height: var(--vh);
  padding: calc(var(--safe-top) + var(--s-2)) var(--gutter) calc(var(--safe-bottom) + var(--tabbar-h) + 40px);
}
.screen--pushed { padding-bottom: calc(var(--safe-bottom) + 112px); } /* room for MainButton / dock */
.screen--center { display: flex; flex-direction: column; justify-content: center; }

/* Large-title header (collapses into .nav on scroll) */
.hdr { padding: var(--s-3) 4px var(--s-4); }
.hdr__eyebrow { font: var(--t-footnote); font-weight: 600; color: var(--ax-text-2); margin: 0 0 2px; }
.hdr__title { font: var(--t-large); letter-spacing: var(--tr-large); margin: 0; }
.hdr__sub { font: var(--t-subhead); color: var(--ax-text-2); margin: 6px 0 0; }

/* Compact floating nav pill: appears when the large title scrolls away */
.nav {
  position: sticky;
  top: calc(var(--safe-top) + 6px);
  z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 44px;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 96px);
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  font: var(--t-headline);
  opacity: 0;
  transform: translateY(-8px) scale(.96);
  transition: opacity var(--d-fast) var(--ease-out), transform var(--d-base) var(--ease-spring);
  pointer-events: none;
}
.nav.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.nav__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* In-page back button: ONLY rendered outside Telegram (dev / browser) */
.nav-back {
  position: fixed; top: calc(var(--safe-top) + 6px); left: 12px;
  z-index: var(--z-sticky);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ax-accent-text);
}

.section { margin-top: var(--s-6); }
.section__hdr {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 var(--s-4) var(--s-2);
  font: var(--t-footnote); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ax-text-2);
}
.section__hdr .count { font-variant-numeric: tabular-nums; }
.section__foot { padding: var(--s-2) var(--s-4) 0; font: var(--t-footnote); color: var(--ax-text-2); }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.row-gap { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* ---------------------------------------------------------------------
   5. COMPONENTS
   --------------------------------------------------------------------- */

/* 5.1 Card */
.card { padding: var(--s-5); border-radius: var(--r-lg); }
.card--hero { padding: var(--s-6) var(--s-5); border-radius: var(--r-xl); text-align: center; }
.card--cta {
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; min-height: 84px;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-xl);
  text-align: left;
  transition: transform var(--d-base) var(--ease-bounce);
}
.card--cta:active { transform: scale(.97); transition-duration: var(--d-press); transition-timing-function: var(--ease-out); }
.card--cta .cta__icon {
  flex: none; width: 52px; height: 52px; border-radius: 18px;
  display: grid; place-items: center; font-size: 28px;
  background: rgb(255 255 255 / .22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 6px 16px -6px rgb(0 0 0 / .3);
}
.card--cta .cta__title { font: var(--t-headline); font-size: 18px; }
.card--cta .cta__sub { font: var(--t-footnote); opacity: .85; margin-top: 2px; }
.card--cta .cta__chev { margin-left: auto; opacity: .8; }

/* 5.2 List group + rows */
.list { border-radius: var(--r-lg); overflow: hidden; padding: 0; margin: 0; list-style: none; }
.row {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  min-height: 56px;
  padding: 10px var(--s-4);
  text-align: left;
  transition: background-color var(--d-fast) var(--ease-out);
}
.row--tall { min-height: 68px; }
.row + .row::before {               /* inset hairline, starts at the text column */
  content: ""; position: absolute; top: 0; right: 0;
  left: var(--row-sep-inset, 60px);
  height: .5px; background: var(--ax-sep);
}
.list--plain .row { --row-sep-inset: var(--s-4); }
.row:is(button, a):active, .row.is-pressed { background: var(--ax-fill-2); transition-duration: 0ms; }
.row__icon {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; font-size: 17px; line-height: 1;
  color: #fff;
  background: linear-gradient(160deg, rgb(255 255 255 / .28), rgb(255 255 255 / 0) 60%), var(--ic, var(--ax-accent));
  box-shadow: inset 0 .5px 0 rgb(255 255 255 / .5), 0 2px 6px -2px rgb(0 0 0 / .25);
}
.row__icon--lg { width: 44px; height: 44px; border-radius: 13px; font-size: 24px; }
.row__icon--gift {                  /* emoji on a soft colored orb */
  width: 48px; height: 48px; border-radius: 15px; font-size: 26px;
  background:
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 55%),
    radial-gradient(circle at 50% 60%, rgb(var(--hue, var(--ax-accent-rgb)) / .55), rgb(var(--hue, var(--ax-accent-rgb)) / .18));
}
.row { --row-sep-inset: 60px; }
.row:has(.row__icon--lg) { --row-sep-inset: 72px; }
.row:has(.row__icon--gift) { --row-sep-inset: 76px; }
.row__body { flex: 1; min-width: 0; display: block; }
.row__title, .row__sub { display: block; }
.row__title { font: var(--t-body); letter-spacing: var(--tr-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__title--strong { font-weight: 600; }
.row__sub { font: var(--t-footnote); color: var(--ax-text-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__trail { flex: none; display: flex; align-items: center; gap: 6px; color: var(--ax-text-2); font: var(--t-callout); }
.row__value { font-variant-numeric: tabular-nums; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { width: 8px; height: 14px; flex: none; color: var(--ax-text-3); }
.row__check { color: var(--ax-accent-text); opacity: 0; transform: scale(.4); transition: transform var(--d-base) var(--ease-bounce), opacity var(--d-fast); }
.row[aria-checked="true"] .row__check { opacity: 1; transform: none; }
.row--danger .row__title { color: var(--ax-destructive); }
.row--accent .row__title { color: var(--ax-accent-text); font-weight: 500; }
.row.is-new { animation: ax-row-flash 1.6s var(--ease-out) 1; }

/* 5.3 Buttons */
.btn {
  --bh: 50px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--bh); min-width: var(--hit);
  padding: 0 22px;
  border-radius: var(--r-pill);
  font: var(--t-headline); letter-spacing: var(--tr-headline);
  white-space: nowrap;
  user-select: none; -webkit-user-select: none;
  transition: transform var(--d-base) var(--ease-bounce), filter var(--d-fast), opacity var(--d-fast), background-color var(--d-fast);
}
.btn:active { transform: scale(.96); transition-duration: var(--d-press); transition-timing-function: var(--ease-out); }
.btn--sm { --bh: 36px; padding: 0 16px; font: var(--t-subhead); font-weight: 600; }
.btn--lg { --bh: 56px; padding: 0 28px; font-size: 18px; }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: var(--bh); padding: 0; }
.btn--sm.btn--icon { --bh: 44px; } /* icon-only never below 44 */

.btn--primary {
  color: var(--ax-on-accent);
  background:
    linear-gradient(180deg, rgb(255 255 255 / .24) 0%, rgb(255 255 255 / 0) 55%),
    var(--ax-accent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .38),
    inset 0 -1px 0 rgb(0 0 0 / .10),
    0 10px 24px -10px rgb(var(--ax-accent-rgb) / .85);
}
.btn--primary:active { filter: brightness(1.08) saturate(1.1); }
.btn--secondary {        /* glass-like, no blur (sits on glass or bg) */
  color: var(--ax-accent-text);
  background:
    linear-gradient(180deg, rgb(255 255 255 / calc(var(--ax-sheen) * .8)), rgb(255 255 255 / 0) 60%),
    rgb(var(--ax-accent-rgb) / .12);
  box-shadow: inset 0 0 0 1px rgb(var(--ax-accent-rgb) / .16), inset 0 1px 0 rgb(255 255 255 / var(--ax-glint));
}
.btn--neutral {
  color: var(--ax-text);
  background: var(--ax-fill-2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--ax-glint) * .6));
}
.btn--destructive {
  color: var(--ax-destructive);
  background: rgb(var(--ax-destructive-rgb) / .12);
  box-shadow: inset 0 0 0 1px rgb(var(--ax-destructive-rgb) / .14);
}
.btn--destructive-solid {
  color: #fff;
  background: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / 0) 55%), rgb(var(--ax-destructive-rgb));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 10px 24px -10px rgb(var(--ax-destructive-rgb) / .8);
}
.btn--ghost { color: var(--ax-accent-text); background: transparent; }
.btn--ghost:active { background: var(--ax-fill); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .42; pointer-events: none; filter: saturate(.6); }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid currentColor; border-color: rgb(255 255 255 / .9) rgb(255 255 255 / .9) rgb(255 255 255 / .25) rgb(255 255 255 / .25);
  animation: ax-spin .8s linear infinite;
}
.btn--secondary.is-loading::after, .btn--neutral.is-loading::after, .btn--ghost.is-loading::after {
  border-color: var(--ax-accent) var(--ax-accent) rgb(var(--ax-accent-rgb) / .2) rgb(var(--ax-accent-rgb) / .2);
}

/* 5.4 Floating tab bar (root screens only) */
.tabbar {
  position: fixed;
  left: 50%; bottom: calc(var(--safe-bottom) + 12px);
  z-index: var(--z-tabbar);
  display: grid; grid-template-columns: repeat(4, 1fr);
  width: min(calc(100% - 32px), 400px);
  height: var(--tabbar-h);
  padding: 6px;
  border-radius: var(--r-pill);
  transform: translateX(-50%);
  transition: transform var(--d-slow) var(--ease-spring), opacity var(--d-base);
}
.tabbar.is-hidden { transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; }
.tabbar__lens {          /* the liquid "drop" that slides under the active tab */
  position: absolute; top: 6px; bottom: 6px; left: 6px;
  width: calc((100% - 12px) / 4);
  border-radius: var(--r-pill);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / calc(var(--ax-sheen) + .15)), rgb(255 255 255 / 0) 70%),
    rgb(var(--ax-accent-rgb) / .16);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / var(--ax-glint)), inset 0 0 0 .5px rgb(var(--ax-accent-rgb) / .25);
  transform: translateX(calc(100% * var(--tab, 0)));
  transition: transform var(--d-slow) var(--ease-bounce);
}
.tabbar.is-moving .tabbar__lens { animation: ax-lens-stretch var(--d-slow) var(--ease-out); }
.tab {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--hit);
  border-radius: var(--r-pill);
  font: var(--t-caption2); letter-spacing: .01em;
  color: var(--ax-text-2);
  transition: color var(--d-fast), transform var(--d-base) var(--ease-bounce);
}
.tab:active { transform: scale(.9); transition-duration: var(--d-press); }
.tab__icon { font-size: 22px; line-height: 24px; filter: grayscale(.4); opacity: .8; transition: filter var(--d-fast), opacity var(--d-fast), transform var(--d-base) var(--ease-bounce); }
.tab[aria-selected="true"] { color: var(--ax-accent-text); }
.tab[aria-selected="true"] .tab__icon { filter: none; opacity: 1; transform: translateY(-1px) scale(1.08); }

/* 5.5 Bottom dock: in-page stand-in for Telegram MainButton (fallback + mockup) */
.dock {
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 12px);
  z-index: var(--z-dock);
  display: flex; gap: var(--s-2);
  width: min(calc(100% - 24px), 536px);
  padding: 8px;
  border-radius: var(--r-pill);
  transform: translateX(-50%);
}
.dock .btn { flex: 1; }
.dock .btn--neutral { flex: 0 0 auto; }

/* 5.6 Segmented control */
.seg {
  --n: 2; --i: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(var(--n), 1fr);
  padding: 3px;
  min-height: 40px;
  border-radius: var(--r-pill);
  background: var(--ax-fill-2);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .06);
}
.seg__thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--n));
  border-radius: var(--r-pill);
  background:
    linear-gradient(180deg, rgb(255 255 255 / calc(var(--ax-sheen) + .2)), rgb(255 255 255 / 0) 70%),
    rgb(var(--ax-glass-rgb) / .95);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / var(--ax-glint)), 0 3px 10px -2px rgb(var(--ax-shadow-rgb) / calc(var(--ax-shadow-a) * 1.2)), 0 0 0 .5px rgb(0 0 0 / .04);
  transform: translateX(calc(100% * var(--i)));
  transition: transform var(--d-slow) var(--ease-spring);
}
.seg__opt {
  position: relative; z-index: 1;
  min-height: 38px; padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  font: var(--t-subhead); font-weight: 600;
  color: var(--ax-text-2);
  transition: color var(--d-fast);
}
.seg__opt[aria-checked="true"] { color: var(--ax-text); }
.seg--lg { min-height: 50px; }
.seg--lg .seg__opt { min-height: 44px; font: var(--t-callout); font-weight: 600; }

/* 5.7 Text fields */
.field { display: block; }
.field__label { display: block; padding: 0 var(--s-4) 6px; font: var(--t-footnote); font-weight: 600; color: var(--ax-text-2); }
.field__box {
  position: relative;
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  background: var(--ax-fill);
  box-shadow: inset 0 0 0 1px rgb(var(--ax-text-rgb) / .06), inset 0 1px 2px rgb(0 0 0 / .04);
  transition: box-shadow var(--d-fast) var(--ease-out), background-color var(--d-fast);
}
.field__box:focus-within {
  background: rgb(var(--ax-glass-rgb) / .9);
  box-shadow: inset 0 0 0 1.5px var(--ax-accent), 0 0 0 4px rgb(var(--ax-accent-rgb) / .18);
}
.field__prefix { color: var(--ax-text-2); font-weight: 500; }
.field__input {
  flex: 1; min-width: 0; height: 50px;
  border: 0; outline: 0; background: transparent;
  font: var(--t-body);
}
.field__input::placeholder { color: var(--ax-text-3); }
.field__input:focus-visible { box-shadow: none; outline: none; }
textarea.field__input { height: auto; min-height: 132px; padding: 14px 0; resize: none; line-height: 22px; }
.field__box--area { align-items: flex-start; }
.field__meta { display: flex; justify-content: space-between; gap: var(--s-2); padding: 6px var(--s-4) 0; font: var(--t-footnote); color: var(--ax-text-2); }
.field__counter { font-variant-numeric: tabular-nums; margin-left: auto; }
.field__counter.is-over { color: var(--ax-destructive); font-weight: 600; }
.field.is-invalid .field__box { box-shadow: inset 0 0 0 1.5px var(--ax-destructive), 0 0 0 4px rgb(var(--ax-destructive-rgb) / .15); animation: ax-shake 360ms var(--ease-out); }
.field.is-invalid .field__error { color: var(--ax-destructive); }
.field__error { display: flex; gap: 6px; align-items: flex-start; }
.field__clear { width: 44px; height: 44px; margin-right: -12px; display: grid; place-items: center; color: var(--ax-text-3); }

/* Placeholder tokens toolbar for the post text */
.tokens { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px var(--s-4) 0; }
.token {
  height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  font: var(--t-footnote); font-family: var(--font-mono); font-weight: 600;
  color: var(--ax-accent-text); background: rgb(var(--ax-accent-rgb) / .12);
  position: relative;
}
.token::after { content: ""; position: absolute; inset: -6px -2px; } /* 44px hit */

/* 5.8 Date & time pickers (native inputs wearing glass) */
.dt { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s-2); }
.dt__cell {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 64px; padding: 8px var(--s-4);
  border-radius: var(--r-md);
  background: var(--ax-fill);
  box-shadow: inset 0 0 0 1px rgb(var(--ax-text-rgb) / .06);
  transition: box-shadow var(--d-fast);
}
.dt__cell:focus-within { box-shadow: inset 0 0 0 1.5px var(--ax-accent), 0 0 0 4px rgb(var(--ax-accent-rgb) / .18); }
.dt__label { font: var(--t-caption); color: var(--ax-text-2); text-transform: uppercase; letter-spacing: .04em; }
.dt__value { font: var(--t-title3); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dt__native { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; } /* opens OS picker */
.dt.is-invalid .dt__cell { box-shadow: inset 0 0 0 1.5px var(--ax-destructive); }
.quick { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding: var(--s-3) 2px 2px; margin: 0 -2px; }
.quick::-webkit-scrollbar { display: none; }
.quick .chip { flex: none; }

/* 5.9 Toggle switch */
.switch {
  position: relative; flex: none;
  width: 52px; height: 32px;
  border-radius: var(--r-pill);
  background: rgb(var(--ax-text-rgb) / .16);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .12);
  transition: background-color var(--d-base) var(--ease-out);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, #fff, #f4f4f6);
  box-shadow: 0 3px 8px rgb(0 0 0 / .18), 0 1px 1px rgb(0 0 0 / .1), inset 0 0 0 .5px rgb(0 0 0 / .04);
  transition: transform var(--d-slow) var(--ease-bounce), width var(--d-base) var(--ease-spring);
}
.switch:active::after { width: 34px; }                      /* liquid stretch on press */
.switch[aria-checked="true"] { background: var(--ax-success); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch[aria-checked="true"]:active::after { transform: translateX(14px); }
.switch::before { content: ""; position: absolute; inset: -6px -2px; }  /* 44px hit */

/* 5.10 Chips */
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border-radius: var(--r-pill);
  font: var(--t-subhead); font-weight: 500;
  background:
    linear-gradient(180deg, rgb(255 255 255 / calc(var(--ax-sheen) * .9)), rgb(255 255 255 / 0) 70%),
    var(--ax-fill-2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--ax-glint) * .7)), inset 0 0 0 .5px rgb(var(--ax-text-rgb) / .08);
  transition: transform var(--d-base) var(--ease-bounce), opacity var(--d-fast);
}
button.chip::after { content: ""; position: absolute; inset: -4px 0; }
.chip:active { transform: scale(.95); }
.chip--accent { color: var(--ax-accent-text); background: rgb(var(--ax-accent-rgb) / .13); }
.chip__at { color: var(--ax-text-2); }
.chip--removable { padding-right: 4px; }
.chip__x {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; color: var(--ax-text-2);
  background: rgb(var(--ax-text-rgb) / .08);
  position: relative;
}
.chip__x::after { content: ""; position: absolute; inset: -8px; } /* 44px hit */
.chip.is-entering { animation: ax-chip-in var(--d-slow) var(--ease-bounce) both; }
.chip.is-leaving { animation: ax-chip-out var(--d-base) var(--ease-out) both; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* 5.11 Wizard stepper */
.stepper { display: flex; gap: 4px; padding: 0 4px; }
.stepper__seg {
  flex: 1; height: 4px; border-radius: var(--r-pill);
  background: rgb(var(--ax-text-rgb) / .12);
  overflow: hidden; position: relative;
  transition: flex-grow var(--d-slow) var(--ease-spring), opacity var(--d-base);
}
.stepper__seg::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--ax-accent), rgb(var(--ax-blob-2)));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-slow) var(--ease-spring);
}
.stepper__seg.is-done::after { transform: scaleX(1); }
.stepper__seg.is-current::after { transform: scaleX(.5); }
.stepper__seg.is-removed { flex-grow: 0.0001; opacity: 0; }
.step-meta { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-3) 4px 0; font: var(--t-footnote); color: var(--ax-text-2); font-weight: 600; }

/* 5.12 Bottom sheet / modal */
.backdrop {
  position: fixed; inset: 0; z-index: var(--z-backdrop);
  background: rgb(0 0 0 / .32);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out);
}
.backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed;
  left: 8px; right: 8px;
  bottom: calc(var(--safe-bottom) + 8px);
  z-index: var(--z-sheet);
  max-width: 544px; margin: 0 auto;
  max-height: calc(var(--vh) - var(--safe-top) - 48px);
  display: flex; flex-direction: column;
  border-radius: var(--r-2xl);
  transform: translateY(calc(100% + 40px));
  transition: transform var(--d-sheet) var(--ease-spring);
}
.sheet.is-open { transform: none; }
.sheet.is-dragging { transition: none; }
.sheet__grabber { width: 36px; height: 5px; border-radius: 3px; background: rgb(var(--ax-text-rgb) / .22); margin: 8px auto 0; flex: none; }
.sheet__head { padding: var(--s-5) var(--s-6) 0; text-align: center; flex: none; }
.sheet__icon {
  width: 64px; height: 64px; margin: 0 auto var(--s-3);
  border-radius: 22px; display: grid; place-items: center; font-size: 32px;
  background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / .6), rgb(255 255 255 / 0) 60%), rgb(var(--tone, var(--ax-accent-rgb)) / .2);
  box-shadow: inset 0 0 0 1px rgb(var(--tone, var(--ax-accent-rgb)) / .25);
}
.sheet__icon--danger  { --tone: var(--ax-destructive-rgb); }
.sheet__icon--warning { --tone: var(--ax-warning-rgb); }
.sheet__icon--success { --tone: var(--ax-success-rgb); }
.sheet__title { font: var(--t-title3); letter-spacing: var(--tr-title3); margin: 0; }
.sheet__body {
  padding: var(--s-3) var(--s-6) 0;
  overflow-y: auto; overscroll-behavior: contain;
  font: var(--t-callout); color: var(--ax-text-2); text-align: center;
  -webkit-overflow-scrolling: touch;
}
.sheet__body b, .sheet__body strong { color: var(--ax-text); font-weight: 600; }
.sheet__body--left { text-align: left; }
.sheet__actions { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) var(--s-4) var(--s-4); flex: none; }
/* Long-error anatomy */
.err-steps { margin: var(--s-4) 0 0; padding: 0; list-style: none; counter-reset: st; text-align: left; }
.err-steps li {
  counter-increment: st; position: relative;
  padding: 10px 12px 10px 48px; margin-top: 6px;
  border-radius: var(--r-md); background: var(--ax-fill);
  color: var(--ax-text); font: var(--t-subhead);
}
.err-steps li::before {
  content: counter(st); position: absolute; left: 12px; top: 9px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font: var(--t-caption); font-weight: 700; color: var(--ax-on-accent); background: var(--ax-accent);
}
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin-top: var(--s-4); padding: 12px 14px; border-radius: var(--r-md); background: var(--ax-fill); text-align: left; font: var(--t-subhead); }
.kv dt { color: var(--ax-text-2); }
.kv dd { margin: 0; text-align: right; color: var(--ax-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.kv dd.is-bad { color: var(--ax-destructive); }
.path { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; font: var(--t-footnote); font-weight: 600; color: var(--ax-text); }
.path span { padding: 3px 8px; border-radius: 8px; background: var(--ax-fill-2); }

/* 5.13 Toast */
.toast {
  position: fixed; left: 50%; top: calc(var(--safe-top) + 10px);
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: 10px;
  max-width: min(calc(100% - 32px), 420px);
  min-height: 48px; padding: 8px 18px 8px 10px;
  border-radius: var(--r-pill);
  font: var(--t-subhead); font-weight: 600;
  transform: translate(-50%, calc(-100% - 40px)) scale(.9);
  opacity: 0;
  transition: transform var(--d-slow) var(--ease-bounce), opacity var(--d-fast);
}
.toast.is-open { transform: translate(-50%, 0); opacity: 1; }
.toast__icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; flex: none; color: #fff; background: var(--ax-success); }
.toast--error .toast__icon { background: var(--ax-destructive); }
.toast--info .toast__icon { background: var(--ax-accent); }

/* 5.14 Inline banner (non-blocking warnings inside a screen) */
.banner {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font: var(--t-subhead);
  background: rgb(var(--tone, var(--ax-warning-rgb)) / .14);
  box-shadow: inset 0 0 0 1px rgb(var(--tone, var(--ax-warning-rgb)) / .22);
}
.banner__icon { font-size: 20px; line-height: 20px; }
.banner--danger { --tone: var(--ax-destructive-rgb); }
.banner--info { --tone: var(--ax-accent-rgb); }
.banner.is-entering { animation: ax-pop-in var(--d-slow) var(--ease-bounce) both; }

/* 5.15 Skeletons */
.skel {
  position: relative; overflow: hidden;
  border-radius: 8px;
  background: rgb(var(--ax-text-rgb) / .08);
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / calc(var(--ax-sheen) + .18)) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: ax-shimmer 1.4s var(--ease-in-out) infinite;
}
.skel--line { height: 12px; }
.skel--title { height: 16px; width: 60%; }
.skel--sub { height: 12px; width: 38%; margin-top: 8px; }
.skel--icon { width: 48px; height: 48px; border-radius: 15px; flex: none; }
.skel--tile { aspect-ratio: 1; border-radius: var(--r-lg); }
.skel--pill { height: 24px; width: 56px; border-radius: var(--r-pill); }

/* 5.16 Empty states */
.empty { text-align: center; padding: var(--s-8) var(--s-6); }
.empty__orb {
  position: relative;
  width: 112px; height: 112px; margin: 0 auto var(--s-5);
  border-radius: 36px;
  display: grid; place-items: center; font-size: 56px;
  animation: ax-float 6s var(--ease-in-out) infinite;
}
.empty__orb::after {          /* sparkle */
  content: "✦"; position: absolute; top: -6px; right: -4px;
  font-size: 20px; color: rgb(var(--ax-blob-2));
  animation: ax-twinkle 2.4s var(--ease-in-out) infinite;
}
.empty__title { font: var(--t-title3); letter-spacing: var(--tr-title3); margin: 0; }
.empty__text { font: var(--t-subhead); color: var(--ax-text-2); margin: 8px auto 0; max-width: 300px; }
.empty__cta { margin-top: var(--s-5); }

/* 5.17 Status badge */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  font: var(--t-caption); font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
}
.badge--active { color: rgb(var(--ax-success-rgb)); background: rgb(var(--ax-success-rgb) / .14); }
.badge--active::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 rgb(var(--ax-success-rgb) / .6);
  animation: ax-pulse 2s var(--ease-out) infinite;
}
.badge--finished { color: var(--ax-text-2); background: rgb(var(--ax-text-rgb) / .08); }
.badge--finished::before { content: "✓"; font-size: 11px; }
.badge--count { color: var(--ax-on-accent); background: var(--ax-accent); min-width: 24px; justify-content: center; padding: 0 7px; }
[data-scheme="dark"] .badge--active { color: #4ade80; }

/* 5.18 Color swatch selector */
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: var(--s-3) 0 var(--s-2);
  border-radius: var(--r-md);
  font: var(--t-caption); color: var(--ax-text-2);
  transition: background-color var(--d-fast);
}
.swatch__dot {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(160deg, rgb(255 255 255 / .35), rgb(255 255 255 / 0) 55%), var(--sw);
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .1), 0 4px 12px -4px var(--sw);
  transition: transform var(--d-slow) var(--ease-bounce), box-shadow var(--d-base);
}
.swatch--default .swatch__dot {
  --sw: rgb(var(--ax-text-rgb) / .22);
  background: linear-gradient(160deg, rgb(255 255 255 / .5), rgb(255 255 255 / 0) 60%), rgb(var(--ax-text-rgb) / .14);
  box-shadow: inset 0 0 0 1px rgb(var(--ax-text-rgb) / .14);
}
.swatch--blue  { --sw: var(--ax-tgbtn-blue); }
.swatch--green { --sw: var(--ax-tgbtn-green); }
.swatch--red   { --sw: var(--ax-tgbtn-red); }
.swatch__dot::after {
  content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 20px; font-weight: 700; color: #fff;
  opacity: 0; transform: scale(.3);
  transition: transform var(--d-slow) var(--ease-bounce), opacity var(--d-fast);
}
.swatch--default .swatch__dot::after { color: var(--ax-text); }
.swatch[aria-checked="true"] { color: var(--ax-text); font-weight: 600; }
.swatch[aria-checked="true"] .swatch__dot {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px rgb(var(--ax-glass-rgb)), 0 0 0 5px var(--sw), 0 8px 18px -6px var(--sw);
}
.swatch[aria-checked="true"] .swatch__dot::after { opacity: 1; transform: none; }

/* 5.19 Telegram post preview (channel post + inline join button) */
.tgprev {
  position: relative;
  padding: var(--s-4) var(--s-3) var(--s-3);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* stylised chat wallpaper: soft gradient + doodle dots */
  background:
    radial-gradient(circle at 20% 20%, rgb(255 255 255 / .25) 0 1.5px, transparent 2px) 0 0 / 22px 22px,
    radial-gradient(circle at 70% 60%, rgb(255 255 255 / .18) 0 1px, transparent 1.5px) 0 0 / 30px 30px,
    linear-gradient(150deg, #a8d8a0 0%, #d6e9a6 35%, #8fc9b5 70%, #79b7c8 100%);
}
[data-scheme="dark"] .tgprev {
  background:
    radial-gradient(circle at 20% 20%, rgb(255 255 255 / .07) 0 1.5px, transparent 2px) 0 0 / 22px 22px,
    linear-gradient(150deg, #1e3a2f 0%, #23332a 40%, #1a2f3c 100%);
}
.tgprev__label { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: var(--r-pill); font: var(--t-caption); color: #fff; background: rgb(0 0 0 / .22); }
.tgprev__msg { max-width: 92%; margin-top: 20px; }
.tgprev__bubble {
  padding: 8px 12px 6px;
  border-radius: 16px 16px 16px 6px;
  background: #ffffff;
  color: #000;
  box-shadow: 0 1px 1px rgb(0 0 0 / .12);
  font: 400 15px/20px var(--font);
  display: flow-root;
  white-space: pre-wrap; word-wrap: break-word;
}
[data-scheme="dark"] .tgprev__bubble { background: #212d3b; color: #fff; }
.tgprev__chan { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 600; font-size: 14px; color: #3390ec; }
.tgprev__ava { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: linear-gradient(135deg, #ff8a65, #e91e63); }
.tgprev__meta { float: right; margin: 6px 0 -2px 10px; font-size: 12px; color: rgb(0 0 0 / .42); }
[data-scheme="dark"] .tgprev__meta { color: rgb(255 255 255 / .45); }
.tgprev__ph { padding: 0 3px; border-radius: 4px; background: rgb(51 144 236 / .14); color: #2a7fd4; }
.tgprev__kb { margin-top: 4px; }
.tgprev__btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 12px;
  border-radius: 10px 10px 16px 6px;
  font: 600 14px/18px var(--font); color: #fff;
  background: rgb(0 0 0 / .26);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); /* small radius: cheap */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-bounce);
}
.tgprev__btn[data-style="blue"]  { background: var(--ax-tgbtn-blue); }
.tgprev__btn[data-style="green"] { background: var(--ax-tgbtn-green); }
.tgprev__btn[data-style="red"]   { background: var(--ax-tgbtn-red); }
.tgprev__btn.is-bump { animation: ax-bump var(--d-slow) var(--ease-bounce); }

/* 5.20 Spinner & progress ring */
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgb(var(--ax-accent-rgb) / .2); border-top-color: var(--ax-accent); animation: ax-spin .8s linear infinite; }
.verify {
  position: relative; width: 120px; height: 120px; margin: 0 auto;
  display: grid; place-items: center; font-size: 52px;
}
.verify::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(var(--ax-accent-rgb) / 0), var(--ax-accent), rgb(var(--ax-blob-2)), rgb(var(--ax-accent-rgb) / 0) 70%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: ax-spin 1.1s linear infinite;
}
.verify::after {
  content: ""; position: absolute; inset: 12px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / .6), rgb(255 255 255 / 0) 60%), rgb(var(--ax-accent-rgb) / .14);
}

/* 5.21 Copy field (join link) */
.copy {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 52px; padding: 4px 4px 4px var(--s-4);
  border-radius: var(--r-md);
  background: var(--ax-fill);
}
.copy__text { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 14px; color: var(--ax-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------
   6. SCREEN PIECES
   --------------------------------------------------------------------- */
.orb {                                   /* big gift / prize orb */
  position: relative;
  width: var(--orb, 104px); height: var(--orb, 104px);
  margin: 0 auto;
  border-radius: 32%;
  display: grid; place-items: center;
  font-size: calc(var(--orb, 104px) * .52);
  background:
    radial-gradient(circle at 30% 22%, rgb(255 255 255 / .75), rgb(255 255 255 / 0) 45%),
    radial-gradient(circle at 50% 65%, rgb(var(--hue, var(--ax-accent-rgb)) / .65), rgb(var(--hue, var(--ax-accent-rgb)) / .2));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .7),
    inset 0 -8px 20px rgb(var(--hue, var(--ax-accent-rgb)) / .25),
    0 18px 40px -14px rgb(var(--hue, var(--ax-accent-rgb)) / .7);
}
.orb--lg { --orb: 136px; }
.orb--sm { --orb: 72px; }
.hero-title { font: var(--t-title1); letter-spacing: var(--tr-title1); margin: var(--s-4) 0 0; }
.hero-sub { font: var(--t-subhead); color: var(--ax-text-2); margin: 6px 0 0; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.stat { padding: var(--s-4); border-radius: var(--r-lg); }
.stat__label { font: var(--t-footnote); color: var(--ax-text-2); font-weight: 600; }
.stat__value { font: var(--t-title1); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat__value--sm { font: var(--t-headline); margin-top: 6px; }

.countdown { display: inline-flex; gap: 6px; margin-top: var(--s-3); }
.countdown span { min-width: 48px; padding: 6px 8px; border-radius: 12px; background: var(--ax-fill-2); font: var(--t-headline); font-variant-numeric: tabular-nums; }
.countdown small { display: block; font: var(--t-caption2); color: var(--ax-text-2); font-weight: 600; }

.gifts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.gift-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: var(--s-4) var(--s-3) var(--s-3);
  border-radius: var(--r-lg);
  text-align: center;
  transition: transform var(--d-base) var(--ease-bounce);
}
.gift-tile:active { transform: scale(.95); transition-duration: var(--d-press); }
.gift-tile .orb { --orb: 72px; }
.gift-tile__name { font: var(--t-subhead); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-tile__stars { font: var(--t-footnote); color: var(--ax-text-2); font-variant-numeric: tabular-nums; }
.gift-tile[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ax-accent), 0 10px 30px -10px rgb(var(--ax-accent-rgb) / .6); }

.stars { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: var(--r-pill); font: var(--t-footnote); font-weight: 600; font-variant-numeric: tabular-nums; color: #b7791f; background: rgb(255 193 7 / .16); }
[data-scheme="dark"] .stars { color: #fcd34d; }

.avatar {
  width: 96px; height: 96px; margin: 0 auto;
  border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  font: 600 38px/1 var(--font); color: #fff;
  background: linear-gradient(135deg, rgb(var(--ax-accent-rgb)), rgb(var(--ax-blob-2)));
  box-shadow: 0 0 0 4px rgb(var(--ax-glass-rgb) / .7), 0 14px 34px -12px rgb(var(--ax-accent-rgb) / .8);
}

.winner { text-align: center; padding: var(--s-6) var(--s-5); }
.winner__trophy { font-size: 64px; line-height: 1; animation: ax-trophy 900ms var(--ease-bounce) both; }

.steps-card ol { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps-card li { counter-increment: s; position: relative; min-height: 48px; padding: 13px 0 13px 40px; font: var(--t-subhead); }
.steps-card li + li { border-top: .5px solid var(--ax-sep); }
.steps-card li .spinner { position: absolute; right: 0; top: 14px; }
.steps-card li::before {
  content: counter(s); position: absolute; left: 0; top: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font: var(--t-footnote); font-weight: 700;
  color: var(--ax-accent-text); background: rgb(var(--ax-accent-rgb) / .14);
}

.confetti { position: fixed; inset: 0; z-index: var(--z-confetti); pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px;
  background: var(--c); left: var(--x);
  animation: ax-fall var(--t, 1.8s) var(--ease-in-out) var(--dl, 0s) forwards;
}

/* ---------------------------------------------------------------------
   7. MOTION: screen transitions & keyframes
   Router toggles these classes; animate only transform/opacity.
   --------------------------------------------------------------------- */
.screen.is-enter-push  { animation: ax-push-in var(--d-slow) var(--ease-spring) both; }
.screen.is-leave-push  { animation: ax-push-out var(--d-slow) var(--ease-spring) both; }
.screen.is-enter-pop   { animation: ax-pop-back-in var(--d-slow) var(--ease-spring) both; }
.screen.is-leave-pop   { animation: ax-pop-back-out var(--d-base) var(--ease-out) both; }
.screen.is-enter-tab   { animation: ax-tab-in var(--d-base) var(--ease-spring) both; }
.screen.is-enter-step  { animation: ax-step-in var(--d-slow) var(--ease-spring) both; }
.screen.is-enter-stepback { animation: ax-step-back-in var(--d-slow) var(--ease-spring) both; }
/* While leaving, kill blur on the outgoing screen: two blurred screens at once is the #1 jank cause */
.screen[class*="is-leave"] .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.screen[class*="is-leave"] { position: absolute; inset: 0; pointer-events: none; }
.stagger > * { animation: ax-rise var(--d-slow) var(--ease-spring) both; animation-delay: calc(var(--k, 0) * 40ms); }

@keyframes ax-push-in      { from { transform: translate3d(36%, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ax-push-out     { to   { transform: translate3d(-18%, 0, 0) scale(.97); opacity: 0; } }
@keyframes ax-pop-back-in  { from { transform: translate3d(-18%, 0, 0) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ax-pop-back-out { to   { transform: translate3d(40%, 0, 0); opacity: 0; } }
@keyframes ax-tab-in       { from { transform: translate3d(0, 10px, 0) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ax-step-in      { from { transform: translate3d(24px, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ax-step-back-in { from { transform: translate3d(-24px, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ax-rise         { from { transform: translate3d(0, 14px, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ax-pop-in       { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ax-chip-in      { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ax-chip-out     { to   { transform: scale(.6); opacity: 0; } }
@keyframes ax-bump         { 0% { transform: scale(1); } 40% { transform: scale(1.04, .94); } 100% { transform: scale(1); } }
@keyframes ax-lens-stretch { 0% { scale: 1 1; } 35% { scale: 1.18 .9; } 100% { scale: 1 1; } }
@keyframes ax-spin         { to { transform: rotate(360deg); } }
@keyframes ax-shimmer      { to { transform: translateX(100%); } }
@keyframes ax-float        { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes ax-twinkle      { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes ax-pulse        { 0% { box-shadow: 0 0 0 0 rgb(var(--ax-success-rgb) / .55); } 70%, 100% { box-shadow: 0 0 0 7px rgb(var(--ax-success-rgb) / 0); } }
@keyframes ax-shake        { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes ax-row-flash    { 0%, 30% { background: rgb(var(--ax-accent-rgb) / .16); } 100% { background: transparent; } }
@keyframes ax-trophy       { from { transform: scale(.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ax-fall         { to { transform: translate3d(var(--dx, 0), calc(var(--vh) + 40px), 0) rotate(var(--r, 540deg)); opacity: .9; } }

/* ---------------------------------------------------------------------
   8. MODES
   --------------------------------------------------------------------- */

/* 8.1 LITE (low-end devices): set html.ax-lite from JS (spec 4.3).
   No backdrop-filter anywhere, static background, near-opaque glass. */
.ax-lite .glass, .no-backdrop .glass, .ax-lite .tgprev__btn {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
.ax-lite { --g1-a: .92; --g2-a: .94; --g3-a: .97; }
.ax-lite .bg__blob { animation: none; will-change: auto; }
.ax-lite .bg::after { display: none; }
.ax-lite .bg__blob:nth-child(n+3) { display: none; }
.ax-lite .skel::after { animation: none; }
.ax-lite .skel { animation: ax-skel-pulse 1.2s ease-in-out infinite; }
@keyframes ax-skel-pulse { 50% { opacity: .55; } }
.ax-lite .empty__orb, .ax-lite .empty__orb::after { animation: none; }

/* 8.1b MID tier (Android AVERAGE): smaller blur radii, fewer blobs, and
   repeated tiles (grid, stats, orbs) lose their own blur */
.ax-mid { --g1-blur: 14px; --g2-blur: 20px; --g3-blur: 24px; }
.ax-mid .bg__blob:nth-child(4), .ax-mid .bg::after { display: none; }
.ax-mid :is(.gift-tile, .stat, .empty__orb).glass, .glass--noblur {
  --ga: .86;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* 8.2 No backdrop-filter support at all */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --g1-a: .92; --g2-a: .94; --g3-a: .97; }
}

/* 8.3 Reduced motion: no drift, no springs, crossfades only */
@media (prefers-reduced-motion: reduce) {
  .bg__blob, .empty__orb, .empty__orb::after, .badge--active::before, .skel::after { animation: none !important; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .screen[class*="is-enter"] { animation: ax-fade 200ms linear both !important; }
  .spinner, .btn.is-loading::after, .verify::before { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
  .confetti { display: none; }
}
@keyframes ax-fade { from { opacity: 0; } to { opacity: 1; } }

/* 8.4 Higher contrast: thicker, more opaque glass, solid hairlines */
@media (prefers-contrast: more) {
  :root { --g1-a: .94; --g2-a: .95; --g3-a: .98; --ax-blob-a: .25; --ax-sep-a: .25; }
  :root { --ax-text-2: rgb(var(--ax-text-rgb) / .78); }
  .glass::before { background: rgb(var(--ax-text-rgb) / .25); }
}

/* =====================================================================
   EXTENSIONS (app-specific additions on top of the design system)
   ===================================================================== */
/* Компонентные display (.btn, .row …) не должны перебивать атрибут hidden */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   Icons : единый набор линейных SVG (Lucide) вместо эмодзи
   --------------------------------------------------------------------- */
.ic { display: block; flex: none; width: 1em; height: 1em; }
.ic--inline { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; stroke-width: 2.2; }
.ic--star { display: inline-block; width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; fill: currentColor; stroke-width: 1.5; }

/* Плитка-иконка в строке : цветное стекло, белый глиф с мягкой тенью */
.row__icon {
  background:
    linear-gradient(180deg, rgb(255 255 255 / .34), rgb(255 255 255 / 0) 55%),
    var(--ic, var(--ax-accent));
  box-shadow:
    inset 0 .5px 0 rgb(255 255 255 / .65),
    inset 0 0 0 .5px rgb(255 255 255 / .18),
    0 3px 8px -3px rgb(0 0 0 / .28);
}
.row__icon .ic { width: 18px; height: 18px; stroke-width: 2.2; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .2)); }
.row__icon--text { font: 700 11px/1 var(--font); letter-spacing: .03em; }
.row__icon--gift { color: #fff; }
.row__icon--gift .ic { width: 24px; height: 24px; stroke-width: 1.8; filter: drop-shadow(0 1px 3px rgb(var(--hue) / .9)); }

.orb { color: #fff; }
.orb .ic { width: 46%; height: 46%; stroke-width: 1.6; filter: drop-shadow(0 2px 8px rgb(var(--hue, var(--ax-accent-rgb)) / .9)); }

.empty__orb { color: var(--ax-accent-text); }
.empty__orb .ic { width: var(--ic-size, 48px); height: var(--ic-size, 48px); stroke-width: 1.6; }

.sheet__icon { color: rgb(var(--tone, var(--ax-accent-rgb))); }
.sheet__icon .ic { width: 30px; height: 30px; stroke-width: 1.9; }

.card--cta .cta__icon { color: #fff; }
.card--cta .cta__icon .ic { width: 26px; height: 26px; stroke-width: 1.9; }

.tab__icon { filter: none; opacity: 1; display: grid; place-items: center; height: 24px; }
.tab__icon .ic { width: 23px; height: 23px; stroke-width: 1.9; transition: stroke-width var(--d-fast); }
.tab[aria-selected="true"] .tab__icon .ic { stroke-width: 2.3; }

.toast__icon .ic { width: 16px; height: 16px; stroke-width: 3; }
.banner__icon { color: rgb(var(--tone, var(--ax-warning-rgb))); }
.banner__icon .ic { width: 20px; height: 20px; }
.winner__trophy .ic { width: 64px; height: 64px; margin: 0 auto; stroke-width: 1.5; filter: drop-shadow(0 4px 12px rgb(0 0 0 / .25)); }
.verify { color: var(--ax-accent-text); }
.verify .ic { width: 48px; height: 48px; stroke-width: 1.6; }

/* ---------------------------------------------------------------------
   Motion : плавнее и дешевле
   Анимированный фон под backdrop-filter заставлял размывать его заново каждый кадр —
   это главный источник рывков. Фон теперь статичный; переходы — короткие, без перелёта.
   --------------------------------------------------------------------- */
:root {
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-smooth: cubic-bezier(.2, .8, .2, 1);
}
.bg__blob { animation: none !important; will-change: auto; }

@keyframes ax2-in-right { from { transform: translate3d(28px, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ax2-in-left  { from { transform: translate3d(-20px, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ax2-fade-out { to { opacity: 0; } }
@keyframes ax2-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ax2-appear   { from { transform: translate3d(0, 6px, 0); opacity: 0; } to { transform: none; opacity: 1; } }

.screen.is-enter-push { animation: ax2-in-right 300ms var(--ease-smooth) both; }
.screen.is-enter-pop  { animation: ax2-in-left 300ms var(--ease-smooth) both; }
.screen.is-enter-tab  { animation: ax2-fade-in 180ms ease-out both; }
.screen.is-leave-push,
.screen.is-leave-pop  { animation: ax2-fade-out 150ms ease-out both; }

/* Контент, пришедший с сервера, появляется одним мягким движением, без лесенки */
.stagger > * { animation: ax2-appear 240ms var(--ease-smooth) both; animation-delay: 0ms; }
.ax-appear { animation: ax2-appear 240ms var(--ease-smooth) both; }

@media (prefers-reduced-motion: reduce) {
  .stagger > *, .ax-appear { animation: none; }
}

/* Тихая перерисовка (свежие данные поверх кэша) — без анимаций появления */
.ax-quiet .stagger > *, .ax-quiet .ax-appear { animation: none !important; }

/* Плитка подарка — цвет по названию (перекрывает общий фон .row__icon выше) */
.row__icon--gift {
  background:
    radial-gradient(circle at 30% 22%, rgb(255 255 255 / .6), rgb(255 255 255 / 0) 55%),
    linear-gradient(160deg, rgb(var(--hue, var(--ax-accent-rgb)) / .95), rgb(var(--hue, var(--ax-accent-rgb)) / .6));
  box-shadow:
    inset 0 .5px 0 rgb(255 255 255 / .7),
    inset 0 0 0 .5px rgb(255 255 255 / .2),
    0 4px 12px -4px rgb(var(--hue, var(--ax-accent-rgb)) / .7);
}