/* ============================================================================
   ALPHATG — Telegram Mini App
   Loud neon storefront. Acid lime + hot magenta, huge display type, glow on
   dark / hard sticker shadows on light. Two independently designed themes.
   Zero dependencies, self-hosted variable fonts.
   ========================================================================== */

/* ── Fonts (self-hosted variable, Cyrillic + Latin) ─────────────────────── */
@font-face {
  font-family: "Unbounded";
  src: url("./fonts/unbounded-cyrillic.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  src: url("./fonts/unbounded-latin.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("./fonts/manrope-cyrillic.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  src: url("./fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Motion tokens (transitions.dev scale) ──────────────────────────────── */
:root {
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;

  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);

  --blur-small: 2px;
  --blur-medium: 3px;
  --blur-large: 8px;
}

/* ── Design tokens — LIGHT ───────────────────────────────────────────────
   Not a dimmed dark theme. Light is its own idea: bright paper, ink-black
   type, lime used as a solid fill and magenta as the readable ink accent,
   depth carried by hard offset shadows instead of glow.                    */
:root {
  --bg: #f1f2ec;
  --bg-2: #e7e9df;
  --surface: #ffffff;
  --surface-2: #fbfcf7;
  --surface-sunk: #e6e8dd;
  --ink: #0b0c0f;
  /* Three-step grey ramp, each clearing 4.5:1 against its WORST ground
     (--surface-sunk). --faint carries real text — hints, country codes,
     group labels, every placeholder — so it is not allowed to be decorative.
     Worst-case ratios: ink-2 9.3, muted 6.1, faint 4.5. */
  --ink-2: #33394a;
  --muted: #4e5561;
  --faint: #636871;
  --line: rgba(11, 12, 15, 0.14);
  --line-2: rgba(11, 12, 15, 0.32);
  --line-hard: #0b0c0f;

  /* Neon family — same hues in both themes, different jobs */
  --lime: #c8ff2e;
  --lime-deep: #a5df00;
  --magenta: #ff2d8e;
  --cyan: #29e5ff;

  /* Accent roles */
  --accent: #c4006a;                 /* readable ink accent (5.3:1 on --bg) */
  --accent-ink: #c4006a;
  --accent-solid: #c4006a;           /* fill that carries #fff (5.9:1) */
  --accent-on: #ffffff;
  --accent-tint: rgba(196, 0, 106, 0.10);
  --accent-tint-2: rgba(196, 0, 106, 0.20);

  /* Punch = the lime fill, always with ink-black on top (16.3:1) */
  --punch: #c8ff2e;
  --punch-on: #0b0c0f;
  --punch-tint: rgba(200, 255, 46, 0.20);
  --punch-edge: #8fc400;

  --pri: #0b0c0f;
  --pri-ink: #ffffff;
  --pri-hover: #24272f;

  --ok: #067a45;      --ok-tint: rgba(6, 122, 69, 0.12);
  --warn: #8a5a00;    --warn-tint: rgba(138, 90, 0, 0.13);
  --danger: #c42020;  --danger-tint: rgba(196, 32, 32, 0.11);

  /* Light depth = hard sticker offsets, not blur */
  --shadow-card: 3px 3px 0 rgba(11, 12, 15, 0.16);
  --shadow-card-hot: 4px 4px 0 var(--punch-edge);
  --shadow-pop: 7px 7px 0 rgba(11, 12, 15, 0.22);
  --shadow-sheet: 0 -6px 0 rgba(11, 12, 15, 0.10);
  --shadow-press: 1px 1px 0 rgba(11, 12, 15, 0.18);

  /* Glow tokens collapse to flat rings in light — the theme keeps its punch
     through saturation and contrast instead of bloom.
     --glow-soft must be a real shadow, not `none`: it is used inside comma
     lists (`box-shadow: 0 0 0 1.5px var(--punch), var(--glow-soft)`), and
     `none` is only legal as the whole value, so the keyword would invalidate
     the entire declaration and drop the ring with it. */
  --glow-punch: 0 0 0 2px var(--punch-edge);
  --glow-accent: 0 0 0 2px var(--accent);
  --glow-soft: 0 0 0 0 transparent;
  --text-glow: none;

  --grain-opacity: 0.05;
  --ambient-opacity: 0.85;
  /* Ambient depth layers. On the paper background these are ink at very low
     alpha — anything stronger turns the dot field into visible dirt. */
  --dot-near: rgba(11, 12, 15, 0.13);
  --dot-far:  rgba(11, 12, 15, 0.065);
  --ring-line: rgba(11, 12, 15, 0.07);
  --beam: rgba(11, 12, 15, 0.05);

  --r-xs: 5px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  --font-display: "Unbounded", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--font-display);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --maxw: 640px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
}

/* ── Design tokens — DARK ────────────────────────────────────────────────
   Near-black ground so the neon actually reads as neon. Lime is the hero,
   magenta the counter-voice, cyan the cold third. Depth carried by glow.  */
html[data-theme="dark"] {
  --bg: #08090c;
  --bg-2: #0c0e13;
  --surface: #101319;
  --surface-2: #151922;
  --surface-sunk: #05060a;
  --ink: #f2f5f8;
  /* Worst ground here is --surface-2. Ratios: ink-2 8.2, muted 6.5, faint 5.1. */
  --ink-2: #a8b2c4;
  --muted: #909eb7;
  --faint: #7e8aa4;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.17);
  --line-hard: rgba(255, 255, 255, 0.28);

  --lime: #c8ff2e;
  --lime-deep: #a5df00;
  --magenta: #ff2d8e;
  --cyan: #29e5ff;

  /* In the dark the lime IS the accent — 16.7:1 on the ground */
  --accent: #c8ff2e;
  --accent-ink: #c8ff2e;
  --accent-solid: #c8ff2e;
  --accent-on: #08090c;
  --accent-tint: rgba(200, 255, 46, 0.13);
  --accent-tint-2: rgba(200, 255, 46, 0.26);

  --punch: #c8ff2e;
  --punch-on: #08090c;
  --punch-tint: rgba(200, 255, 46, 0.16);
  --punch-edge: #c8ff2e;

  --pri: #c8ff2e;
  --pri-ink: #08090c;
  --pri-hover: #d7ff5e;

  --ok: #3dffa0;      --ok-tint: rgba(61, 255, 160, 0.14);
  --warn: #ffc53d;    --warn-tint: rgba(255, 197, 61, 0.14);
  --danger: #ff6b6b;  --danger-tint: rgba(255, 107, 107, 0.14);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-card-hot: 0 0 0 1px rgba(200, 255, 46, 0.34), 0 12px 40px -14px rgba(200, 255, 46, 0.22);
  --shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, 0.86);
  --shadow-sheet: 0 -14px 60px -20px rgba(0, 0, 0, 0.9);
  --shadow-press: none;

  --glow-punch: 0 0 0 1px rgba(200, 255, 46, 0.5), 0 0 28px -4px rgba(200, 255, 46, 0.6), 0 0 60px -12px rgba(200, 255, 46, 0.35);
  --glow-accent: 0 0 0 1px rgba(255, 45, 142, 0.5), 0 0 26px -6px rgba(255, 45, 142, 0.55);
  --glow-soft: 0 0 22px -8px rgba(200, 255, 46, 0.4);
  --text-glow: 0 0 22px rgba(200, 255, 46, 0.35);

  --grain-opacity: 0.075;
  --ambient-opacity: 1;
  /* Lime on near-black carries much further than ink on paper, so these run
     below the light-theme alphas even though the contrast reads as higher. */
  --dot-near: rgba(200, 255, 46, 0.19);
  --dot-far:  rgba(200, 255, 46, 0.09);
  --ring-line: rgba(200, 255, 46, 0.10);
  --beam: rgba(200, 255, 46, 0.055);
}

/* ── Reset / base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  transition: background var(--duration-slow) var(--ease-in-out), color var(--duration-slow) var(--ease-in-out);
}

button { font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; border: none; }
input { font: inherit; color: inherit; }
svg { display: block; }
::selection { background: var(--punch); color: var(--punch-on); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-weight: 600; letter-spacing: -0.02em; }

/* Numbers everywhere read as data, not prose */
.val, .num, .amount, .qty-val, .adm-row-sum, .order-sum, .pl-price, .country-price, .svc-price {
  font-variant-numeric: tabular-nums;
}

/* ── Ambient mesh + grain ───────────────────────────────────────────────── */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: var(--ambient-opacity); transition: opacity var(--duration-slow) var(--ease-in-out); }
.ambient-blob {
  position: absolute; top: -20vh; right: -26vw;
  width: 86vw; height: 86vw; max-width: 660px; max-height: 660px;
  border-radius: 50%;
  /* Mid stop, not a straight ramp to transparent: a two-stop radial has a
     visible hard shoulder that made each field read as a disc. */
  background: radial-gradient(circle at 50% 50%, var(--lime) 0%,
              color-mix(in srgb, var(--lime) 45%, transparent) 36%, transparent 72%);
  opacity: 0.20;
  animation: drift 23s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
/* Two more blobs, no extra markup — the single span carries all three */
.ambient-blob::before, .ambient-blob::after {
  content: ""; position: absolute; border-radius: 50%;
  will-change: transform;
}
.ambient-blob::before {
  width: 78%; height: 78%; left: -46%; top: 62%;
  background: radial-gradient(circle at 50% 50%, var(--magenta) 0%,
              color-mix(in srgb, var(--magenta) 45%, transparent) 36%, transparent 72%);
  opacity: 0.9;
  animation: drift2 31s var(--ease-in-out) infinite alternate;
}
.ambient-blob::after {
  width: 62%; height: 62%; left: 16%; top: 118%;
  background: radial-gradient(circle at 50% 50%, var(--cyan) 0%,
              color-mix(in srgb, var(--cyan) 45%, transparent) 36%, transparent 74%);
  opacity: 0.55;
  animation: drift3 29s var(--ease-in-out) infinite alternate;
}
html[data-theme="dark"] .ambient-blob { opacity: 0.26; }

/* A fifth and sixth field, offset and on their own clocks. Periods across all
   of them are pairwise coprime (23/29/31/37/41) so the composite never lands
   back on the same arrangement — three blobs on round periods was the reason
   the old background read as a loop. */
.ambient-blob--b {
  top: auto; right: auto; bottom: -30vh; left: -34vw;
  animation: drift2 41s var(--ease-in-out) infinite alternate;
}
.ambient-blob--b::before {
  width: 70%; height: 70%; left: 58%; top: -52%;
  background: radial-gradient(circle at 50% 50%, var(--cyan) 0%,
              color-mix(in srgb, var(--cyan) 45%, transparent) 36%, transparent 72%);
  opacity: 0.5;
  animation: drift 37s var(--ease-in-out) infinite alternate;
}
.ambient-blob--b::after { display: none; }

@keyframes drift  { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-7vw, 8vh, 0) scale(1.14); } }
@keyframes drift2 { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(9vw, -6vh, 0) scale(1.2); } }
@keyframes drift3 { 0% { transform: translate3d(0,0,0) scale(1.1); } 100% { transform: translate3d(-5vw, -9vh, 0) scale(0.92); } }

/* ── Parallax planes ────────────────────────────────────────────────────
   --amb-y is the negated scrollTop of whichever screen is live (app.js).
   Far plane trails at 10% of it, near plane at 24% — the near one must move
   faster or the depth cue inverts. Both are plain wrappers: their children
   own the drift transforms, so parallax and drift never fight for the same
   property. */
.ambient-far, .ambient-near {
  position: absolute; inset: 0; pointer-events: none;
  will-change: transform;
}
.ambient-far  { transform: translate3d(0, calc(var(--amb-y, 0px) * 0.10), 0); }
.ambient-near { transform: translate3d(0, calc(var(--amb-y, 0px) * 0.24), 0); }

/* ── Dot depth ──────────────────────────────────────────────────────────
   Replaces the old 62px line grid. Lines drew a hard floor that stopped at
   the mask edge and left the middle of the screen visibly bare; two dot
   fields at different pitch, drifting in opposite directions, read as depth
   instead of structure and survive being seen through a 10px gap between
   cards. The mask lives on this element and the patterns on its pseudos, so
   the vignette stays put while the dots travel under it. */
.ambient-dots {
  /* inset 0, not a negative bleed: the mask already hides the edges, and every
     extra percent here is compositor texture on a layer that spans the screen. */
  position: absolute; inset: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(128% 108% at 50% 40%, #000 0%, rgba(0,0,0,0.5) 52%, transparent 86%);
  mask-image: radial-gradient(128% 108% at 50% 40%, #000 0%, rgba(0,0,0,0.5) 52%, transparent 86%);
}
/* -50px covers the largest drift (47px) with a pixel to spare, so the pattern
   never runs out of tile at the edge of the travel. */
.ambient-dots::before, .ambient-dots::after {
  content: ""; position: absolute; inset: -50px;
  will-change: transform;
}
.ambient-dots::before {
  background-image: radial-gradient(circle at 50% 50%, var(--dot-near) 1.1px, transparent 1.7px);
  background-size: 27px 27px;
  animation: dotsNear 19s var(--ease-linear) infinite;
}
.ambient-dots::after {
  background-image: radial-gradient(circle at 50% 50%, var(--dot-far) 1px, transparent 1.6px);
  background-size: 47px 47px;
  animation: dotsFar 33s var(--ease-linear) infinite;
}
@keyframes dotsNear { 0% { transform: translate3d(0,0,0); }   100% { transform: translate3d(27px, 27px, 0); } }
@keyframes dotsFar  { 0% { transform: translate3d(0,0,0); }   100% { transform: translate3d(-47px, -47px, 0); } }

/* ── Rings ──────────────────────────────────────────────────────────────
   Two huge hairline ellipses, mostly off-screen, turning against each other.
   Ellipses, not circles: a rotating circle is rotationally symmetric and the
   motion is literally invisible. These are what fill the dead centre band the
   grid mask used to leave empty. */
.ambient-rings { position: absolute; inset: 0; overflow: hidden; }
.ambient-rings::before, .ambient-rings::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid var(--ring-line);
  will-change: transform;
}
.ambient-rings::before {
  width: 164vw; height: 132vw; left: -32vw; top: -18vh;
  animation: ringTurn 97s var(--ease-linear) infinite;
}
.ambient-rings::after {
  width: 120vw; height: 96vw; left: 8vw; top: 46vh;
  animation: ringTurn 73s var(--ease-linear) infinite reverse;
}
@keyframes ringTurn { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ── Beam ───────────────────────────────────────────────────────────────
   One soft diagonal pass every 21s. Screen-space, outside both parallax
   planes. The keyframes park it off-canvas for the first 58% of the cycle,
   so it is an occasional event rather than a permanent moving stripe. */
.ambient-beam {
  /* 150%, not 220%: this is the widest layer on the page and every extra
     percent is compositor texture for a band that only crosses the screen. */
  position: absolute; top: -25%; left: -25%; width: 150%; height: 150%;
  background: linear-gradient(102deg, transparent 44%, var(--beam) 50%, transparent 56%);
  animation: beamSweep 21s var(--ease-in-out) infinite;
  will-change: transform;
}
@keyframes beamSweep {
  0%, 58% { transform: translate3d(-72%, 0, 0); }
  100%    { transform: translate3d(72%, 0, 0); }
}

/* Grain — fixed, pointer-events-none, never inside a scrolling container */
.ambient::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ── Theme switch sweep ─────────────────────────────────────────────────── */
.theme-sweep {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: radial-gradient(circle at var(--sx, 90%) var(--sy, 5%), var(--punch) 0%, var(--punch) 22%, transparent 62%);
  /* Same coordinates drive the gradient centre AND the scale origin, or the
     bloom grows from the viewport centre instead of the button that spawned it. */
  transform-origin: var(--sx, 90%) var(--sy, 5%);
  opacity: 0;
  animation: sweep var(--duration-very-slow) var(--ease-smooth-out) forwards;
  mix-blend-mode: hard-light;
}
@keyframes sweep {
  0%   { opacity: 0.85; transform: scale(0.1); }
  60%  { opacity: 0.42; }
  100% { opacity: 0; transform: scale(2.6); }
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
  position: relative; z-index: 20;
  flex: 0 0 auto;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.7) blur(16px);
  -webkit-backdrop-filter: saturate(1.7) blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--punch) 22%, var(--magenta) 62%, transparent 100%);
  opacity: 0.55;
}
.topbar-in {
  height: var(--topbar-h);
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 32px; height: 32px; flex: none;
  border-radius: 10px; overflow: hidden;
  background: var(--surface-sunk) center / cover no-repeat;
  background-image: url("./logo.jpg?v=d1e9e59db4");
  box-shadow: 0 0 0 1.5px var(--punch), var(--glow-soft);
  transition: box-shadow var(--duration-fast) var(--ease-smooth-out);
}
.brand:active .brand-mark { box-shadow: 0 0 0 2px var(--punch), var(--glow-punch); }
.brand-text {
  font-family: var(--font-display);
  font-weight: 800; letter-spacing: -0.05em; font-size: 17px;
  white-space: nowrap; text-transform: uppercase;
}
.brand-dim { color: var(--accent); font-weight: 800; }
html[data-theme="dark"] .brand-dim { color: var(--punch); text-shadow: var(--text-glow); }

.topbar-right { display: flex; align-items: center; gap: 8px; flex: none; }

/* Icon button (theme toggle, close) */
.icon-btn {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--ink);
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  transition: transform var(--duration-quick) var(--ease-smooth-out), background var(--duration-quick), color var(--duration-quick), border-color var(--duration-quick), box-shadow var(--duration-fast);
}
.icon-btn:active { transform: scale(0.92); border-color: var(--punch-edge); box-shadow: var(--glow-punch); }
.icon-btn.ghost { border-color: transparent; background: transparent; }
.icon-btn.ghost:active { box-shadow: none; background: var(--surface-sunk); }
.icon-btn svg { width: 19px; height: 19px; }

/* Theme toggle icon swap */
.icon-slot { position: relative; width: 19px; height: 19px; }
.icon-face { position: absolute; inset: 0; display: grid; place-items: center;
  transition: opacity var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-smooth-out), filter var(--duration-fast); }
.icon-face[data-icon="dark"] { opacity: 0; transform: scale(0.7) rotate(-40deg); filter: blur(2px); }
.icon-face[data-icon="light"] { opacity: 1; transform: none; filter: none; }
.t-icon-swap[data-state="dark"] .icon-face[data-icon="light"] { opacity: 0; transform: scale(0.7) rotate(40deg); filter: blur(2px); }
.t-icon-swap[data-state="dark"] .icon-face[data-icon="dark"] { opacity: 1; transform: none; filter: none; }
html[data-theme="dark"] .icon-face[data-icon="dark"] { color: var(--punch); }

/* ── Language tabs (sliding pill) ───────────────────────────────────────── */
.t-tabs {
  position: relative; display: inline-flex; align-items: center;
  background: var(--surface-sunk); border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill); padding: 3px;
}
.t-tabs-pill {
  position: absolute; top: 3px; left: 0; height: calc(100% - 6px);
  border-radius: var(--r-pill); background: var(--punch); width: 0;
  box-shadow: var(--glow-soft);
  transition: transform var(--duration-fast) var(--ease-smooth-out), width var(--duration-fast) var(--ease-smooth-out);
}
.t-tab {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--muted); padding: 6px 11px; border-radius: var(--r-pill);
  transition: color var(--duration-quick) var(--ease-in-out);
}
.t-tab[aria-pressed="true"] { color: var(--punch-on); }

/* ── Stage / screens (page side-by-side) ────────────────────────────────── */
.stage { position: relative; z-index: 10; flex: 1 1 auto; min-height: 0; }
.screen {
  position: absolute; inset: 0;
  opacity: 0; transform: translateX(9%); pointer-events: none;
  transition: transform var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out);
  will-change: transform, opacity;
}
.screen[data-state="active"] { opacity: 1; transform: none; pointer-events: auto; }
.screen[data-state="enter-left"]  { opacity: 0; transform: translateX(-9%); }
.screen[data-state="enter-right"] { opacity: 0; transform: translateX(9%); }
.screen[data-state="out-left"]    { opacity: 0; transform: translateX(-9%); pointer-events: none; }
.screen[data-state="out-right"]   { opacity: 0; transform: translateX(9%); pointer-events: none; }

.screen-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 18px 14px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 26px);
}
.screen[data-depth="deep"] .screen-scroll { padding-bottom: calc(env(safe-area-inset-bottom) + 130px); }
/* Each deep screen clears its own dock: product carries origin + qty + buy,
   top-up carries the note + button. Under-padding leaves the last field
   permanently pinned under the dock on first paint. */
.screen[data-page-id="product"] .screen-scroll { padding-bottom: calc(env(safe-area-inset-bottom) + 210px); }
.screen[data-page-id="topup"] .screen-scroll { padding-bottom: calc(env(safe-area-inset-bottom) + 180px); }
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* ── Section heads ──────────────────────────────────────────────────────── */
.kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--punch-on); background: var(--punch);
  padding: 4px 9px 3px; border-radius: var(--r-xs);
  box-shadow: var(--glow-soft);
}
.screen-title {
  font-size: clamp(30px, 9.5vw, 42px);
  margin-top: 12px;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 0.92;
}
.screen-sub { color: var(--ink-2); font-size: 14px; margin-top: 10px; max-width: 40ch; font-weight: 500; }

/* ── Reveal on mount (staggered) ─────────────────────────────────────────
   The transition-delay here outlives the reveal itself, and most .reveal
   elements are also tappable cards. Left in place it would own `transform`
   for the element's whole life, so a tap's :active scale would wait out the
   stagger before showing. playReveal() therefore strips the hook once the
   rise finishes; .is-done is the inert resting state it lands on.          */
.reveal { opacity: 0; transform: translateY(14px); filter: blur(3px); }
.reveal.is-in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity var(--duration-slow) var(--ease-in-out),
              transform var(--duration-slow) var(--ease-smooth-out),
              filter var(--duration-slow) var(--ease-in-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal.is-done { opacity: 1; transform: none; filter: none; transition: none; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 14px; letter-spacing: -0.02em;
  text-transform: uppercase;
  padding: 14px 18px; border-radius: var(--r-md);
  transition: transform var(--duration-quick) var(--ease-smooth-out), background var(--duration-quick), color var(--duration-quick), opacity var(--duration-quick), border-color var(--duration-quick), box-shadow var(--duration-fast);
  -webkit-user-select: none; user-select: none;
}
.btn:active { transform: scale(0.975) translateY(1px); }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--punch); color: var(--punch-on);
  box-shadow: var(--shadow-card-hot);
}
.btn-primary:active { background: var(--pri-hover); box-shadow: var(--glow-punch); }
html[data-theme="light"] .btn-primary:active { box-shadow: var(--shadow-press); background: var(--punch-edge); }

.btn-secondary { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-2); }
.btn-secondary:active { border-color: var(--ink); background: var(--surface-sunk); }
.btn-ghost { background: var(--surface-sunk); color: var(--ink); }
.btn-ghost:active { background: var(--punch-tint); }
.btn-accent { background: var(--accent-solid); color: var(--accent-on); }
.btn-accent:active { box-shadow: var(--glow-accent); }
/* A disabled CTA is not a faded CTA — a washed-out lime slab reads as broken.
   It drops out of the accent system entirely and states plainly that it is off. */
.btn[disabled], .btn.is-disabled {
  background: var(--surface-sunk); color: var(--muted);
  border: 1.5px solid var(--line); box-shadow: none;
  pointer-events: none; animation: none;
}
.btn svg { width: 18px; height: 18px; }

/* The one CTA that never sits still.
   The :not() guards are load-bearing, not defensive: a running animation beats
   normal author declarations in the cascade, so without them the disabled rule
   above cannot switch off either the animation or its animated box-shadow, and
   a dead button ends up the loudest thing on the screen. */
.btn-primary.btn-block:not([disabled]):not(.is-disabled) { animation: ctaPulse 3.4s var(--ease-in-out) infinite; }
@keyframes ctaPulse {
  0%, 100% { box-shadow: var(--shadow-card-hot); }
  50%      { box-shadow: var(--glow-punch); }
}

/* ── Chips / badges / tags ──────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px 3px; border-radius: var(--r-xs);
  background: var(--punch); color: var(--punch-on);
}
.pill-note {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--surface-sunk); border: 1px solid var(--line);
}

.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px 3px 8px; border-radius: var(--r-xs);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blip 2.2s var(--ease-in-out) infinite; }
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.status[data-s="delivered"]  { background: var(--ok-tint); color: var(--ok); }
.status[data-s="transit"]    { background: var(--punch-tint); color: var(--accent); }
html[data-theme="dark"] .status[data-s="transit"] { color: var(--punch); }
.status[data-s="processing"] { background: var(--warn-tint); color: var(--warn); }
.status[data-s="cancelled"]  { background: var(--danger-tint); color: var(--danger); }

/* ── Catalog ────────────────────────────────────────────────────────────── */
.cat-head { margin-bottom: 22px; }
.cat-section { margin-top: 28px; }
.cat-section:first-of-type { margin-top: 24px; }
.cat-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 2px 10px;
  border-bottom: 2px solid var(--ink);
}
.cat-section-title {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink); text-transform: uppercase;
}
.cat-section-note { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

.card {
  background: var(--surface); border: 1.5px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}

/* ── Catalog tiles ───────────────────────────────────────────────────────
   The catalog answers one question — which kind of account — so each option
   gets a tile you can identify by its artwork and price without reading the
   name. The flag strip along the bottom previews the country wall behind it. */
/* The margin is load-bearing, not decoration: tiles sat flush against the
   section rule (gap was exactly 0), so the -3px hover lift pushed the first
   row straight over that 2px line. Everything below is safe — later rows have
   the 10px grid gap to rise into. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

.tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 13px 13px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  transition: transform var(--duration-quick) var(--ease-smooth-out),
              border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.tile:active { transform: scale(0.975); border-color: var(--punch-edge); box-shadow: var(--shadow-card-hot); }
.tile--hero { grid-column: 1 / -1; }

/* Artwork plate: an uploaded image fills it, otherwise the product glyph sits
   on the lime so the tile still reads as a distinct thing at a glance. */
.tile-art {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--punch) 0%, var(--punch-edge) 100%);
  display: grid; place-items: center;
  box-shadow: var(--glow-soft);
}
/* 16/9, not the old 21/8 banner: the product artwork is authored at 16/9, and a
   21/8 plate cover-cropped a third of its height away — the clock face on the
   aged-accounts hero lost its top and bottom arcs. Same ratio everywhere now,
   so one master per product renders uncropped in the tile and on the detail. */
.tile--hero .tile-art { aspect-ratio: 16 / 9; }
/* Sits above .tile-art::after so the 45%-white sheen below only ever lifts the
   bare lime plate. Painted over real artwork it washed the illustration out. */
.tile-img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.tile-glyph { color: var(--punch-on); display: grid; place-items: center; }
.tile-glyph svg { width: 34px; height: 34px; }
.tile--hero .tile-glyph svg { width: 44px; height: 44px; }
/* A soft sheen so the plate is not a flat slab of colour. z-index 0 keeps it
   under .tile-img — it is only there for the glyph-on-lime fallback. */
.tile-art::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,0.45) 0%, transparent 58%);
  pointer-events: none;
}

.tile-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.tile-name {
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile--hero .tile-name { font-size: 16px; -webkit-line-clamp: 2; }
.tile-tag {
  font-size: 11.5px; color: var(--muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile:not(.tile--hero) .tile-tag { display: none; }

.tile-foot { display: flex; flex-direction: column; gap: 7px; }
.tile--hero .tile-foot { flex-direction: row; align-items: flex-end; justify-content: space-between; }
.tile-price {
  font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.045em;
  display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap;
}
html[data-theme="dark"] .tile-price { color: var(--punch); }
.tile-price i {
  font-family: var(--font-mono); font-style: normal;
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.tile-price .cur { font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--muted); }
.tile-price--none { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--danger); text-transform: uppercase; letter-spacing: 0.06em; }

.tile-geo { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tile-flags { display: inline-flex; }
.tile-flags .flag-img--sm { width: 17px; height: 13px; border-radius: 2px; }
.tile-flags .flag-img--sm + .flag-img--sm { margin-left: -5px; }
.tile-geo-n {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.tile-go { position: absolute; top: 13px; right: 13px; color: var(--punch-on); opacity: 0; }
.tile-go svg { width: 16px; height: 16px; }
.tile--hero .tile-go { opacity: 0.75; }

/* ── Country showcase ────────────────────────────────────────────────────
   Flag first and large: the card is identified by the image, which is the
   whole reason this screen replaced a sheet full of text rows.             */
.shelf-head { margin-top: 14px; margin-bottom: 4px; }
.shelf-title { font-size: clamp(24px, 7.5vw, 34px); }
.shelf-search { margin: 16px 0 14px; }

.shelf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ccard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  transition: transform var(--duration-quick) var(--ease-smooth-out),
              border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.ccard:active { transform: scale(0.97); border-color: var(--punch-edge); box-shadow: var(--shadow-card-hot); }

.ccard-flag {
  width: 100%; aspect-ratio: 3 / 2; margin-bottom: 9px;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-sunk); box-shadow: 0 0 0 1px var(--line-2);
}
/* Scoped on purpose: plain .flag-img pins 24x18 and is declared later in the
   file, so a single-class override here would lose on source order and the
   flag would sit as a stamp in the corner instead of filling the plate. */
.ccard-flag .flag-img--card { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; box-shadow: none; }
.ccard-name {
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccard-price {
  font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.045em;
  margin-top: 3px; display: inline-flex; align-items: baseline; gap: 3px;
}
html[data-theme="dark"] .ccard-price { color: var(--punch); }
.ccard-price .cur { font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--muted); }
.ccard-note { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ccard-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 7px 3px; border-radius: var(--r-xs);
  background: var(--punch); color: var(--punch-on); box-shadow: var(--glow-soft);
}

/* Product cards (catalog rows) */
.prod-card {
  position: relative;
  width: 100%; text-align: left; display: block;
  background: var(--surface); border: 1.5px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.prod-card:active { transform: scale(0.985); border-color: var(--punch-edge); box-shadow: var(--shadow-card-hot); }
.prod-card + .prod-card { margin-top: 14px; }

.prod-card--hero { position: relative; }
.prod-card--hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--lime) 0%, var(--magenta) 58%, var(--cyan) 100%);
}
.prod-hero-band {
  padding: 22px 18px 18px;
  background:
    radial-gradient(130% 100% at 100% 0%, var(--punch-tint) 0%, transparent 62%),
    var(--surface);
  border-bottom: 1px solid var(--line);
}
.prod-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.prod-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.02;
  text-transform: uppercase;
}
.prod-tagline { color: var(--ink-2); font-size: 13.5px; margin-top: 8px; max-width: 40ch; font-weight: 500; }
.prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; }
.prod-price-from { display: flex; flex-direction: column; gap: 1px; }
.prod-price-from .lbl { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }
.prod-price-from .val { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.04em; }
.prod-open {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--punch-on);
  padding: 10px 14px; border-radius: var(--r-pill);
  background: var(--punch);
  transition: gap var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-fast);
}
.prod-card:active .prod-open { gap: 10px; box-shadow: var(--glow-punch); }
.prod-open svg { width: 15px; height: 15px; }

/* Service list cards (compact) */
.svc-card { display: flex; align-items: center; gap: 12px; padding: 14px; }
.svc-emoji { display: none; }
.svc-ico {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center; color: var(--punch-on);
  background: var(--punch); box-shadow: var(--glow-soft);
}
.svc-ico svg { width: 20px; height: 20px; }
.svc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* Product names stay in the body face and are allowed two lines. Unbounded is
   a display face — very wide — and at 360px it truncated every name in the
   catalog to about fourteen characters ("Прогретые воз…", "Новореги с под…"),
   which is exactly the information the row exists to convey. */
.svc-name {
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-tag { font-size: 12px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.svc-price { font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: -0.04em; white-space: nowrap; }
.svc-price .cur { font-family: var(--font-mono); font-size: 9px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.svc-chevron { color: var(--faint); }
.svc-chevron svg { width: 18px; height: 18px; }

/* ── Product detail screen ──────────────────────────────────────────────── */
.pd-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--ink);
  padding: 9px 14px 9px 10px; border-radius: var(--r-pill);
  background: var(--surface); border: 1.5px solid var(--line-2);
  transition: transform var(--duration-quick) var(--ease-smooth-out), background var(--duration-quick), border-color var(--duration-quick);
}
.back-btn:active { transform: scale(0.95); border-color: var(--punch-edge); background: var(--punch-tint); }
.back-btn svg { width: 16px; height: 16px; }

.pd-media {
  position: relative;
  margin-top: 16px; border-radius: var(--r-lg); overflow: hidden;
  border: 1.5px solid var(--line-2); background: var(--surface-sunk);
  /* Matches .tile-art so the artwork is never cropped differently in the two
     places it appears — 16/10 was shaving the last letters off the headline. */
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-card);
}
/* Seats the plate into the page. Held to the last sliver and kept light: the
   product artwork carries its headline in the lower half, and the old
   52%→72% ramp was visibly dimming it once the plate went 16/9. */
.pd-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, transparent 84%, color-mix(in srgb, var(--bg) 34%, transparent) 100%);
}
.pd-media img, .pd-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.pd-head { margin-top: 20px; }
.pd-cat {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--punch-on); background: var(--punch);
  padding: 4px 9px 3px; border-radius: var(--r-xs);
}
.pd-title {
  font-size: clamp(28px, 8.5vw, 38px);
  margin-top: 12px; letter-spacing: -0.05em; line-height: 0.94;
  text-transform: uppercase;
}
.pd-tagline { color: var(--ink); font-size: 15px; margin-top: 12px; font-weight: 600; }
.pd-desc { color: var(--ink-2); font-size: 14.5px; line-height: 1.65; margin-top: 6px; max-width: 62ch; }

.section-label {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 10px;
  display: flex; align-items: center; gap: 10px;
}
.section-label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-2); }

/* Account age meter */
.age {
  margin-top: 16px; padding: 16px;
  background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.age-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.age-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; }
.age-title .ic { color: var(--accent); }
html[data-theme="dark"] .age-title .ic { color: var(--punch); }
.age-title .ic svg { width: 17px; height: 17px; }
.age-val { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--punch-on); background: var(--punch); padding: 3px 8px 2px; border-radius: var(--r-xs); letter-spacing: 0.04em; }
.age-track { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--surface-sunk); border: 1px solid var(--line); margin: 14px 0 9px; overflow: hidden; }
.age-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--cyan) 0%, var(--lime) 62%, var(--magenta) 100%);
  box-shadow: var(--glow-soft);
  transition: width var(--duration-very-slow) var(--ease-smooth-out);
}
.age-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: 0.04em; }
.age-note { color: var(--muted); font-size: 12.5px; margin-top: 10px; }

/* "Country not on the list" note — the handle inside it is a real link */
.pd-support {
  margin-top: 24px; padding: 15px;
  border-radius: var(--r-lg);
  background: var(--surface-2); border: 1.5px dashed var(--line-2);
}
.pd-support .lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.pd-support .tx { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-top: 7px; }
.support-link {
  display: inline; padding: 0; font: inherit;
  color: var(--accent); font-weight: 800;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--punch);
  transition: color var(--duration-quick), opacity var(--duration-quick);
}
html[data-theme="dark"] .support-link { color: var(--punch); }
.support-link:active { opacity: 0.6; }

/* Specs (divided rows, no boxes) */
.specs { border-top: 2px solid var(--ink); }
.spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.spec-k { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); flex: none; letter-spacing: 0.04em; text-transform: uppercase; }
.spec-v { font-size: 13.5px; color: var(--ink); text-align: right; font-weight: 700; }

/* ── Purchase dock (product screen bottom) ──────────────────────────────── */
.buydock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: 12px 14px calc(env(safe-area-inset-bottom) + 12px);
  background: var(--bg);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-top: 1.5px solid var(--line-2);
  transform: translateY(0);
}
.buydock::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--punch), var(--magenta), transparent);
}
.buydock-in { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

/* Country trigger */
.origin-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--line-2);
  transition: transform var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick), box-shadow var(--duration-fast);
}
.origin-row:active { transform: scale(0.99); border-color: var(--punch-edge); box-shadow: var(--glow-soft); }
.origin-flag { line-height: 1; flex: none; width: 26px; text-align: center; }
.origin-body { flex: 1 1 auto; min-width: 0; text-align: left; display: flex; flex-direction: column; }
.origin-lbl { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.origin-name { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.origin-name.is-empty { color: var(--muted); font-weight: 600; }
.origin-cta { font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--accent); flex: none; }
html[data-theme="dark"] .origin-cta { color: var(--punch); }

/* Quantity + total row */
.buy-controls { display: flex; align-items: center; gap: 12px; }
.qty { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: 3px; }
.qty-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--ink); transition: background var(--duration-quick), transform var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick); }
.qty-btn:active { transform: scale(0.88); background: var(--punch); color: var(--punch-on); }
.qty-btn[disabled] { color: var(--faint); pointer-events: none; }
.qty-btn svg { width: 18px; height: 18px; }
.qty-val { min-width: 42px; text-align: center; font-family: var(--font-mono); font-size: 16px; font-weight: 700; }
.buy-total { flex: 1 1 auto; min-width: 0; text-align: right; display: flex; flex-direction: column; gap: 0; }
.buy-total .lbl { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.buy-total .val { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.05em; white-space: nowrap; line-height: 1.1; }
html[data-theme="dark"] .buy-total .val:not(.is-empty) { color: var(--punch); text-shadow: var(--text-glow); }
.buy-total .val .cur { font-family: var(--font-mono); font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 4px; text-shadow: none; }
.buy-total .val.is-empty { color: var(--faint); font-weight: 700; text-shadow: none; }

/* Number pop-in */
.t-num { display: inline-block; }
.t-num.is-pop { animation: numPop var(--duration-fast) var(--ease-smooth-out); }
@keyframes numPop {
  0%   { opacity: 0; transform: translateY(8px); filter: blur(var(--blur-small)); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* ── Scrim + sheets (modal) ─────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(5, 6, 10, 0.62);
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-smooth-out);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.scrim.is-open { opacity: 1; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-width: var(--maxw); margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border: 1.5px solid var(--line-2); border-bottom: 0;
  box-shadow: var(--shadow-sheet);
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
  display: flex; flex-direction: column;
  /* vh first as the fallback: without a bound, an older WebView drops the dvh
     line, the sheet sizes to its content (25 country rows) and — anchored to
     bottom:0 with overflow:hidden — pushes its own title, search and close
     button above the viewport, where they cannot be scrolled back. */
  max-height: 82vh;
  max-height: 82dvh;
  transform: translateY(101%);
  transition: transform var(--duration-medium) var(--ease-smooth-out);
  overflow: hidden;
}
.sheet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--lime) 0%, var(--magenta) 58%, var(--cyan) 100%);
}
.sheet.is-open { transform: translateY(0); }
/* While sliding up the panel refuses pointer input, so the click synthesised
   after touchend cannot land on a button that just moved under the finger. */
.sheet[data-armed="0"] { pointer-events: none; }
.sheet.sheet--auto { top: auto; }
.sheet-grab { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--line-2); margin: 11px auto 2px; flex: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px 12px; flex: none; }
.sheet-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 14px; }

/* Country search */
.sheet-search {
  position: relative; display: flex; align-items: center; gap: 9px;
  margin: 0 16px 10px; padding: 0 12px;
  background: var(--surface-sunk); border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  flex: none;
  transition: border-color var(--duration-quick), box-shadow var(--duration-fast);
}
.search-ico { color: var(--muted); flex: none; }
.search-ico svg { width: 18px; height: 18px; }
.search-input { flex: 1 1 auto; min-width: 0; border: none; background: none; outline: none; padding: 12px 0; font-size: 15px; font-weight: 600; }
.sheet-search:focus-within { border-color: var(--punch-edge); box-shadow: var(--glow-soft); }
.search-input::placeholder { color: var(--faint); font-weight: 500; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-clear { width: 26px; height: 26px; flex: none; display: grid; place-items: center; color: var(--muted); border-radius: 50%; transition: opacity var(--duration-quick), transform var(--duration-quick) var(--ease-smooth-out); }
.search-clear svg { width: 15px; height: 15px; }
.search-clear:active { transform: scale(0.86); color: var(--ink); }
.search-clear[hidden] { display: none; }

/* Country list */
.country-item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-radius: var(--r-md);
  transition: background var(--duration-quick);
}
.country-item + .country-item { border-top: 1px solid var(--line); border-radius: 0; }
.country-item:active { background: var(--surface-sunk); }
.country-flag { line-height: 1; flex: none; width: 28px; text-align: center; }

/* Flag images (flagcdn) — used in country list, origin row, orders, confirm */
.flag-img {
  width: 24px; height: 18px; object-fit: cover; border-radius: 3px;
  display: inline-block; vertical-align: middle;
  box-shadow: 0 0 0 1px var(--line-2);
  background: var(--surface-sunk);
}
.flag-img--lg { width: 30px; height: 22px; border-radius: 4px; }
.origin-flag svg { width: 22px; height: 22px; color: var(--muted); }
.country-name { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.country-price { flex: none; font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: -0.03em; }
.country-price .cur { font-family: var(--font-mono); font-size: 10px; color: var(--muted); font-weight: 600; margin-left: 3px; }
.country-item.is-selected { background: var(--punch); border-radius: var(--r-md); }
.country-item.is-selected + .country-item { border-top-color: transparent; }
.country-item.is-selected .country-name,
.country-item.is-selected .country-price { color: var(--punch-on); }
.country-item.is-selected .country-price .cur { color: color-mix(in srgb, var(--punch-on) 62%, transparent); }
.country-check { flex: none; color: var(--punch-on); opacity: 0; transform: scale(0.6); transition: opacity var(--duration-quick), transform var(--duration-quick) var(--ease-bounce); }
.country-item.is-selected .country-check { opacity: 1; transform: none; }
.country-check svg { width: 18px; height: 18px; }

/* Sheet empty (no search results) */
.sheet-empty { text-align: center; padding: 34px 20px; }
.sheet-empty .em-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; }
.sheet-empty .em-hint { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ── Confirm sheet ──────────────────────────────────────────────────────── */
.confirm-sum { padding: 4px 0 2px; }
.confirm-lead { display: flex; align-items: center; gap: 12px; padding: 6px 2px 16px; }
.confirm-lead .flag { font-size: 26px; flex: none; }
.confirm-lead .txt { min-width: 0; display: flex; flex-direction: column; }
.confirm-lead .p { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.confirm-lead .c { font-size: 13px; color: var(--muted); margin-top: 3px; }
.crow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); }
.crow .k { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.crow .v { font-size: 14px; font-weight: 700; }
.crow.total { border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 13px; }
.crow.total .k { color: var(--ink); font-weight: 700; }
.crow.total .v { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.05em; }
html[data-theme="dark"] .crow.total .v { color: var(--punch); text-shadow: var(--text-glow); }
.crow.after .v { color: var(--ink-2); }
.confirm-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }

.insufficient {
  margin-top: 14px; padding: 13px; border-radius: var(--r-md);
  background: var(--danger-tint); border: 1.5px solid color-mix(in srgb, var(--danger) 42%, transparent);
  display: flex; gap: 10px; align-items: flex-start;
}
.insufficient .ic { color: var(--danger); flex: none; margin-top: 1px; }
.insufficient .ic svg { width: 18px; height: 18px; }
.insufficient .tx { font-size: 13px; color: var(--ink); line-height: 1.5; }
.insufficient .tx b { color: var(--danger); font-weight: 800; }

/* ── Success overlay ────────────────────────────────────────────────────── */
.success-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 62%, rgba(5, 6, 10, 0.72));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-smooth-out);
}
.success-overlay.is-open { opacity: 1; }
.success-card {
  position: relative;
  width: 100%; max-width: 340px; text-align: center;
  background: var(--surface); border: 1.5px solid var(--line-2);
  border-radius: var(--r-xl); box-shadow: var(--shadow-pop);
  padding: 32px 24px 22px;
  overflow: hidden;
  transform: scale(0.96); opacity: 0;
  transition: transform var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out);
}
.success-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--lime) 0%, var(--magenta) 58%, var(--cyan) 100%);
}
.success-overlay.is-open .success-card { transform: none; opacity: 1; }

.success-check {
  width: 72px; height: 72px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--punch-on); background: var(--punch);
  box-shadow: var(--glow-punch);
  opacity: 0; transform: scale(0.86); filter: blur(var(--blur-large));
  transition: opacity var(--duration-very-slow) var(--ease-in-out), transform var(--duration-very-slow) var(--ease-smooth-out), filter var(--duration-very-slow) var(--ease-in-out);
}
.success-check svg { width: 40px; height: 40px; }
.success-check svg path { stroke-dasharray: 32; stroke-dashoffset: 32; }
.success-check[data-state="in"] { opacity: 1; transform: none; filter: blur(0); }
.success-check[data-state="in"] svg path { animation: drawCheck var(--duration-very-slow) var(--ease-smooth-out) 0.12s forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

.success-text { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.t-stagger-line { opacity: 0; transform: translateY(10px); filter: blur(3px); }
.t-stagger[data-in="1"] .t-stagger-line { animation: lineRise var(--duration-slow) var(--ease-in-out) forwards; }
.t-stagger[data-in="1"] .t-stagger-line--1 { animation-delay: 0.14s; }
.t-stagger[data-in="1"] .t-stagger-line--2 { animation-delay: 0.22s; }
@keyframes lineRise { to { opacity: 1; transform: none; filter: blur(0); } }
#successTitle { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.045em; text-transform: uppercase; line-height: 1.02; }
#successSub { font-size: 14px; color: var(--muted); }

/* ── Bottom tab bar ─────────────────────────────────────────────────────── */
.tabbar {
  position: relative; z-index: 20; flex: 0 0 auto;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: stretch;
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-top: 1.5px solid var(--line-2);
}
.tabbar-btn {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--muted); position: relative; padding: 0 2px;
  transition: color var(--duration-quick) var(--ease-in-out);
}
.tabbar-btn::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 30px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--punch); transform: translateX(-50%) scaleX(0); transform-origin: center;
  box-shadow: var(--glow-soft);
  transition: transform var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast);
  opacity: 0;
}
.tabbar-ico { transition: transform var(--duration-fast) var(--ease-smooth-out); }
.tabbar-ico svg { width: 23px; height: 23px; }
.tabbar-lbl { font-family: var(--font-display); font-size: 8.5px; font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; }
.tabbar-btn[aria-current="true"] { color: var(--ink); }
html[data-theme="dark"] .tabbar-btn[aria-current="true"] { color: var(--punch); }
.tabbar-btn[aria-current="true"]::before { transform: translateX(-50%) scaleX(1); opacity: 1; }
.tabbar-btn[aria-current="true"] .tabbar-ico { transform: translateY(-1px); }
.tabbar-btn:active .tabbar-ico { transform: scale(0.88); }
.tabbar-btn--admin .tabbar-lbl { letter-spacing: 0; }

/* ── Wallet ─────────────────────────────────────────────────────────────── */
.wallet-card {
  position: relative;
  margin-top: 18px; padding: 22px 18px;
  border-radius: var(--r-xl); border: 1.5px solid var(--line-2);
  background:
    radial-gradient(140% 110% at 100% 0%, var(--punch-tint) 0%, transparent 56%),
    var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.wallet-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--lime) 0%, var(--magenta) 58%, var(--cyan) 100%);
}
.wallet-acc { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wallet-acc .who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.wallet-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center;
  color: var(--punch-on); background: linear-gradient(150deg, var(--lime) 0%, var(--cyan) 100%);
  box-shadow: var(--glow-soft);
}
.wallet-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wallet-avatar--ph svg { width: 24px; height: 24px; }
.wallet-acc .meta { min-width: 0; display: flex; flex-direction: column; }
.wallet-acc .meta .lbl { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.wallet-acc .meta .id { font-family: var(--font-mono); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.wallet-bal { margin-top: 22px; }
.wallet-bal .lbl { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; }
.wallet-bal .amount { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.wallet-bal .num {
  font-family: var(--font-display);
  font-size: clamp(40px, 13vw, 54px); font-weight: 800; letter-spacing: -0.06em; line-height: 0.9;
}
html[data-theme="dark"] .wallet-bal .num { color: var(--punch); text-shadow: var(--text-glow); }
.wallet-bal .cur { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--muted); }
.wallet-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

.wallet-actions { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wallet-actions .btn { padding: 15px 14px; gap: 8px; font-size: 12.5px; }
.wallet-actions .btn svg { width: 20px; height: 20px; }
/* Only the first (top-up) pulses — two pulsing buttons is noise */
.wallet-actions .btn-primary:not([disabled]):not(.is-disabled) { animation: ctaPulse 3.4s var(--ease-in-out) infinite; }

.section-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 30px 2px 12px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.section-row .t { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); }
.section-row .a { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
html[data-theme="dark"] .section-row .a { color: var(--punch); }
.section-row .a svg { width: 14px; height: 14px; }

/* ── Order rows ─────────────────────────────────────────────────────────── */
.orders { border-radius: var(--r-lg); overflow: hidden; border: 1.5px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow-card); }
.order-row { display: flex; align-items: center; gap: 12px; padding: 14px; }
.order-row + .order-row { border-top: 1px solid var(--line); }
.order-flag { line-height: 1; flex: none; width: 26px; text-align: center; }
.order-main { flex: 1 1 auto; min-width: 0; }
.order-name { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; letter-spacing: 0.04em; }
.order-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); flex: none; }
.order-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.order-sum { font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: -0.04em; white-space: nowrap; }
.order-sum .cur { font-family: var(--font-mono); font-size: 10px; color: var(--muted); font-weight: 600; margin-left: 3px; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 46px 24px; }
.empty-ico {
  width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center;
  color: var(--muted); background: var(--surface-sunk); border: 1.5px dashed var(--line-2);
}
.empty-ico svg { width: 26px; height: 26px; }
.empty-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; }
.empty-hint { font-size: 13.5px; color: var(--muted); margin-top: 7px; max-width: 30ch; margin-left: auto; margin-right: auto; }
.empty .btn { margin-top: 20px; }

/* ── About article ──────────────────────────────────────────────────────── */
.about-hero { margin-top: 8px; }
.about-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 10vw, 46px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.92;
  margin-top: 12px; text-transform: uppercase;
}
.about-lead { font-size: 16px; color: var(--ink); line-height: 1.55; margin-top: 16px; max-width: 38ch; font-weight: 600; }
.about-rule { height: 2px; background: var(--ink); margin: 28px 0; }
.about-block { margin-top: 26px; }
.about-block .n {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--punch-on); background: var(--punch);
  padding: 3px 8px 2px; border-radius: var(--r-xs);
}
.about-block h3 { font-size: 20px; margin-top: 10px; letter-spacing: -0.04em; text-transform: uppercase; }
.about-block p { font-size: 14.5px; color: var(--ink-2); line-height: 1.66; margin-top: 9px; max-width: 62ch; }
.about-foot {
  margin-top: 32px; padding: 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1.5px solid var(--line-2); box-shadow: var(--shadow-card);
  display: flex; align-items: center; gap: 13px;
}
.about-foot .mk { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--punch-on); background: var(--punch); box-shadow: var(--glow-soft); }
.about-foot .mk svg { width: 22px; height: 22px; }
.about-foot .tx .a { font-family: var(--font-display); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.about-foot .tx .b { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* ── Top-up ─────────────────────────────────────────────────────────────── */
.topup-mini {
  margin-top: 16px; padding: 15px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1.5px solid var(--line-2); box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topup-mini .k { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.topup-mini .v { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.04em; }
.topup-mini .v .cur { font-family: var(--font-mono); font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 3px; }
.topup-mini .arrow { color: var(--faint); }
.topup-mini .arrow svg { width: 18px; height: 18px; }

.preset-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.preset {
  padding: 14px 6px; border-radius: var(--r-md); text-align: center;
  background: var(--surface); border: 1.5px solid var(--line-2);
  font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: -0.03em;
  transition: transform var(--duration-quick) var(--ease-smooth-out), background var(--duration-quick), border-color var(--duration-quick), color var(--duration-quick), box-shadow var(--duration-fast);
}
.preset .cur { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--muted); font-weight: 600; margin-top: 3px; letter-spacing: 0.1em; }
.preset:active { transform: scale(0.94); }
.preset.is-active { background: var(--punch); color: var(--punch-on); border-color: var(--punch-edge); box-shadow: var(--glow-punch); }
.preset.is-active .cur { color: color-mix(in srgb, var(--punch-on) 64%, transparent); }

.custom-field { margin-top: 14px; }
.custom-input-wrap {
  display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 16px;
  background: var(--surface); border: 2px solid var(--line-2); border-radius: var(--r-md);
  transition: border-color var(--duration-quick), box-shadow var(--duration-fast);
}
.custom-input-wrap.is-focus { border-color: var(--punch-edge); box-shadow: var(--glow-soft); }
.custom-input-wrap.is-error { border-color: var(--danger); box-shadow: none; }
.custom-input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: none; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.04em; padding: 12px 0; }
.custom-input::placeholder { color: var(--faint); font-weight: 600; font-family: var(--font-sans); font-size: 16px; letter-spacing: 0; }
.custom-input-wrap .cur { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--muted); flex: none; }
.custom-error { font-size: 12.5px; font-weight: 600; color: var(--danger); margin-top: 8px; padding-left: 2px; height: 0; opacity: 0; overflow: hidden; transition: opacity var(--duration-quick); }
.custom-error.show { height: auto; opacity: 1; }

/* error shake */
.is-shaking { animation: shakeX 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes shakeX {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

.topup-dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: 12px 14px calc(env(safe-area-inset-bottom) + 12px);
  background: var(--bg);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-top: 1.5px solid var(--line-2);
}
.topup-dock::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--punch), var(--magenta), transparent);
}
.topup-dock-in { max-width: var(--maxw); margin: 0 auto; }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; left: 0; right: 0; z-index: 70;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 16px; pointer-events: none;
}
.toast {
  width: max-content; max-width: min(92vw, 420px);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg);
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-pop); font-size: 13.5px; font-weight: 700;
  opacity: 0; transform: translateY(12px) scale(0.96);
  transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out);
  pointer-events: auto;
}
.toast.is-in { opacity: 1; transform: none; }
.toast .ic { flex: none; display: grid; place-items: center; }
.toast .ic svg { width: 17px; height: 17px; }
.toast.ok .ic { color: var(--ok); }
.toast.warn .ic { color: var(--warn); }
html[data-theme="dark"] .toast { background: var(--surface); color: var(--ink); border-color: var(--punch-edge); box-shadow: var(--shadow-pop), var(--glow-soft); }

/* ── Gate (opened outside Telegram) ─────────────────────────────────────── */
.gate {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 30px;
  background: var(--bg);
}
/* width:100% matters — as a centred grid item the card would otherwise size to
   max-content and overflow the padded viewport on a narrow phone, clipping the
   copy off the right edge. max-width alone does not prevent that. */
.gate-card { width: 100%; max-width: 360px; text-align: center; }
.gate-mk {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 19px; overflow: hidden;
  background: var(--surface-sunk) center / cover no-repeat;
  background-image: url("./logo.jpg?v=d1e9e59db4");
  box-shadow: 0 0 0 2px var(--punch), var(--glow-punch);
}
.gate h2 { font-size: 24px; text-transform: uppercase; letter-spacing: -0.04em; }
.gate p { font-size: 14px; color: var(--muted); margin-top: 10px; line-height: 1.55; }
.gate .btn { margin-top: 22px; }

/* ── Skeleton ───────────────────────────────────────────────────────────── */
.skel { position: relative; overflow: hidden; background: var(--surface-sunk); border-radius: var(--r-md); border: 1px solid var(--line); }
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, var(--punch-tint) 50%, transparent 100%);
  animation: shimmer 1.3s var(--ease-linear) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-card { height: 152px; border-radius: var(--r-lg); margin-top: 14px; }
.skel-card:first-child { margin-top: 24px; }
.skel-row { height: 68px; border-radius: var(--r-md); margin-top: 10px; }

/* ════════════════════════════════════════════════════════════════════════
   ADMIN PANEL
   Same neon language, denser hierarchy. This is a working tool: rows are
   tighter, every number is monospaced and tabular, grouping is done with
   1px rules and hard 2px section heads instead of stacked cards. The lime
   is used sparingly here — as state, not as decoration.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Shared bits the storefront gained alongside the admin ──────────────── */
.cat-empty {
  padding: 20px 16px; text-align: center;
  font-size: 13px; color: var(--muted);
  border: 1.5px dashed var(--line-2); border-radius: var(--r-lg);
}
.svc-price--none { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 0.04em; }
.flag-img--gone { display: inline-block; background: var(--surface-sunk); }

.dock-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 13px; border-radius: var(--r-md);
  background: var(--warn-tint); border: 1.5px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.dock-note .ic { color: var(--warn); flex: none; margin-top: 1px; }
.dock-note .ic svg { width: 18px; height: 18px; }
.dock-note .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dock-note .tx b { font-size: 13px; font-weight: 800; }
.dock-note .tx span { font-size: 12.5px; color: var(--ink-2); }

.btn-sm { padding: 10px 13px; font-size: 11.5px; border-radius: var(--r-sm); gap: 6px; }
.btn-sm svg { width: 16px; height: 16px; }
.btn-danger { background: var(--danger); color: #fff; }
html[data-theme="dark"] .btn-danger { color: #250505; }
.btn-danger:active { filter: brightness(0.92); }
.adm-btn-danger { color: var(--danger); }

/* Sheet gained a subtitle and a sticky footer */
.sheet-head-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sheet-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; font-weight: 500; }
.sheet-foot {
  flex: none; padding: 12px 16px 4px; border-top: 1.5px solid var(--line-2);
  background: var(--surface);
}
.adm-foot-row { display: flex; align-items: center; gap: 9px; }
.adm-foot-row .btn { flex: 1 1 auto; }
.adm-foot-row .btn-secondary { flex: 0 0 auto; }
.adm-foot-col { display: flex; flex-direction: column; gap: 8px; }
.adm-link {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
  align-self: flex-start; padding: 5px 2px;
}
html[data-theme="dark"] .adm-link { color: var(--punch); }
.adm-count { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--muted); flex: none; }
.adm-confirm-tx { font-size: 14px; color: var(--ink-2); line-height: 1.55; padding: 2px 2px 10px; }

/* The admin CTA does not pulse — a working tool should sit still */
.screen[data-page-id^="admin"] .btn-primary.btn-block,
.sheet .btn-primary.btn-block { animation: none; }

/* ── Stats strip (no card boxes; 1px rules do the grouping) ─────────────── */
.adm-stats {
  margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1.5px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.adm-stat { padding: 14px 6px; text-align: center; }
.adm-stat + .adm-stat { border-left: 1px solid var(--line); }
.adm-stat .n { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .adm-stat .n { color: var(--punch); }
.adm-stat .l { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--muted); margin-top: 4px; letter-spacing: 0.1em; text-transform: uppercase; }

.adm-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 2px 10px; }
.adm-note-inline { font-family: var(--font-mono); font-size: 11px; color: var(--faint); letter-spacing: 0.04em; }

/* ── Catalog list (replaced the horizontal kanban) ──────────────────────
   Full width, grouped by category, no horizontal scroll and no gestures:
   at this viewport a column board showed one column at a time, so dragging
   meant aiming at something off-screen. Moving is an explicit chip now.     */
.pl { margin-top: 14px; }
.pl-group { margin-bottom: 24px; }

.pl-cat {
  display: flex; align-items: center; gap: 10px;
  padding: 0 2px 9px;
  border-bottom: 2px solid var(--ink);
}
.pl-cat-ico {
  width: 32px; height: 32px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--punch-on); background: var(--punch);
}
.pl-cat-ico svg { width: 17px; height: 17px; }
.pl-cat-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pl-cat-tx .a { font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: -0.025em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-cat-tx .b { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase; }
.pl-cat-acts { flex: none; display: flex; align-items: center; gap: 2px; }
.pl-cat-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--muted);
  transition: background var(--duration-quick), color var(--duration-quick), transform var(--duration-quick) var(--ease-smooth-out);
}
.pl-cat-btn:active { transform: scale(0.88); background: var(--punch); color: var(--punch-on); }
.pl-cat-btn[disabled] { color: var(--faint); opacity: 0.35; pointer-events: none; }
.pl-cat-btn svg { width: 17px; height: 17px; }

.pl-rows {
  margin-top: 10px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.pl-row + .pl-row { border-top: 1px solid var(--line); }

.pl-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 14px 12px 8px; text-align: left;
  transition: background var(--duration-quick);
}
.pl-head:active { background: var(--surface-sunk); }
.pl-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 700; letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-price { flex: none; font-family: var(--font-mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-price .cur { font-size: 9.5px; color: var(--muted); font-weight: 600; margin-left: 3px; }
.pl-price--none { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--danger); letter-spacing: 0.06em; text-transform: uppercase; }
.pl-go { flex: none; color: var(--faint); display: grid; place-items: center; }
.pl-go svg { width: 17px; height: 17px; }

.pl-chips { display: flex; gap: 8px; padding: 0 12px 12px 12px; flex-wrap: wrap; }
.pl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
  min-height: 38px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--surface-sunk); border: 1px solid var(--line);
  transition: transform var(--duration-quick) var(--ease-smooth-out), background var(--duration-quick), color var(--duration-quick), border-color var(--duration-quick);
}
.pl-chip:active { transform: scale(0.94); background: var(--punch); color: var(--punch-on); border-color: var(--punch-edge); }
.pl-chip .ic { display: grid; place-items: center; color: var(--muted); }
.pl-chip .ic svg { width: 14px; height: 14px; }
.pl-chip:active .ic { color: inherit; }

.pl-empty {
  margin-top: 10px; padding: 18px 14px; text-align: center;
  font-size: 12.5px; color: var(--muted);
  border: 1.5px dashed var(--line-2); border-radius: var(--r-lg);
}

.pl-add {
  margin-top: 8px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 10px; border-radius: var(--r-md);
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--ink-2); background: var(--surface-sunk);
  transition: transform var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick), background var(--duration-quick);
}
.pl-add:active { transform: scale(0.985); color: var(--punch-on); background: var(--punch); }
.pl-add svg { width: 15px; height: 15px; }

.pl-newcat {
  width: 100%; margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px; border-radius: var(--r-lg);
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--muted); background: transparent; border: 1.5px dashed var(--line-2);
  transition: transform var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick), color var(--duration-quick);
}
.pl-newcat:active { transform: scale(0.985); border-color: var(--punch-edge); color: var(--accent); }
html[data-theme="dark"] .pl-newcat:active { color: var(--punch); }
.pl-newcat svg { width: 16px; height: 16px; }

/* ── Section links + reset ─────────────────────────────────────────────── */
.adm-navs { border: 1.5px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.adm-nav { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px; text-align: left; transition: background var(--duration-quick); }
.adm-nav + .adm-nav { border-top: 1px solid var(--line); }
.adm-nav:active { background: var(--surface-sunk); }
.adm-nav-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--ink); background: var(--surface-sunk); border: 1px solid var(--line-2); }
.adm-nav-ico svg { width: 19px; height: 19px; }
.adm-nav-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.adm-nav-tx .a { font-family: var(--font-display); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.adm-nav-tx .b { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-nav-go { color: var(--faint); flex: none; }
.adm-nav-go svg { width: 17px; height: 17px; }

.adm-reset {
  margin-top: 26px; padding: 15px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line-2); background: var(--surface-2);
  display: flex; align-items: center; gap: 12px;
}
.adm-reset .tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.adm-reset .tx .a { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.adm-reset .tx .b { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.adm-reset .btn { flex: none; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.adm-field { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.adm-field:first-child { margin-top: 4px; }
.adm-field--grow { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.adm-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.adm-hint { font-size: 12px; color: var(--faint); }
.adm-input {
  width: 100%; padding: 12px 13px; border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--line-2);
  font-size: 15px; font-weight: 600; outline: none;
  transition: border-color var(--duration-quick), box-shadow var(--duration-fast);
}
.adm-input::placeholder { color: var(--faint); font-weight: 500; }
.adm-input:focus { border-color: var(--punch-edge); box-shadow: var(--glow-soft); }
.adm-input.is-invalid { border-color: var(--danger); box-shadow: none; }
.adm-input--lg { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
.adm-input--num { font-family: var(--font-mono); text-align: right; padding: 10px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.adm-toolbar { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.adm-search { margin: 0; flex: 1 1 auto; min-width: 0; }
.adm-search .search-input { padding: 10px 0; font-size: 14.5px; }

/* Language switch inside the editor */
.adm-langs { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--surface-sunk); border: 1.5px solid var(--line-2); }
.adm-lang {
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted);
  padding: 6px 11px; border-radius: var(--r-pill);
  transition: background var(--duration-quick), color var(--duration-quick);
}
.adm-lang[aria-pressed="true"] { background: var(--punch); color: var(--punch-on); }

/* Icon palette */
.adm-icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.adm-icon {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-md);
  color: var(--ink-2); background: var(--surface); border: 1.5px solid var(--line-2);
  transition: transform var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick), background var(--duration-quick), color var(--duration-quick), box-shadow var(--duration-fast);
}
.adm-icon svg { width: 20px; height: 20px; }
.adm-icon:active { transform: scale(0.9); }
.adm-icon.is-on { border-color: var(--punch-edge); background: var(--punch); color: var(--punch-on); box-shadow: var(--glow-soft); }

/* ── Product editor ────────────────────────────────────────────────────── */
.adm-ctx { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.adm-ctx-cat {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--line-2);
  transition: transform var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick);
}
.adm-ctx-cat:active { transform: scale(0.99); border-color: var(--punch-edge); }
.adm-ctx-cat .ico { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: var(--punch-on); background: var(--punch); }
.adm-ctx-cat .ico svg { width: 16px; height: 16px; }
.adm-ctx-cat .tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.adm-ctx-cat .tx .a { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.adm-ctx-cat .tx .b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.adm-ctx-cat .go { color: var(--faint); flex: none; }
.adm-ctx-cat .go svg { width: 16px; height: 16px; }

/* Rich text: a mini toolbar, not a word processor */
.adm-rich { border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: border-color var(--duration-quick), box-shadow var(--duration-fast); }
.adm-rich:focus-within { border-color: var(--punch-edge); box-shadow: var(--glow-soft); }
.adm-rich-bar { display: flex; align-items: center; gap: 3px; padding: 6px 7px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.adm-rt {
  min-width: 30px; height: 28px; padding: 0 8px;
  display: grid; place-items: center; border-radius: var(--r-xs);
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  transition: background var(--duration-quick), color var(--duration-quick), transform var(--duration-quick) var(--ease-smooth-out);
}
.adm-rt:active { transform: scale(0.9); }
.adm-rt.is-on { background: var(--punch); color: var(--punch-on); }
.adm-rt--wide { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-left: auto; }
.adm-rt-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; }
.adm-rich-in {
  min-height: 116px; padding: 12px 13px; outline: none;
  font-size: 14.5px; line-height: 1.62; color: var(--ink); font-weight: 500;
  -webkit-user-select: text; user-select: text;
}
.adm-rich-in:empty::before { content: attr(data-ph); color: var(--faint); pointer-events: none; }
.adm-rich-in b, .adm-rich-in strong { font-weight: 800; }
.adm-rich-in u { text-underline-offset: 2px; }

/* Media */
.adm-media { display: flex; flex-direction: column; gap: 10px; }
.adm-media-prev { border-radius: var(--r-lg); overflow: hidden; border: 1.5px solid var(--line-2); background: var(--surface-sunk); aspect-ratio: 16 / 10; }
.adm-media-prev img, .adm-media-prev video { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-media-none {
  aspect-ratio: 16 / 6; border-radius: var(--r-lg);
  border: 1.5px dashed var(--line-2); background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.adm-media-none .ic { color: var(--faint); }
.adm-media-none .ic svg { width: 24px; height: 24px; }
.adm-media-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-media-url { display: flex; gap: 8px; align-items: center; }
.adm-media-url .adm-input { flex: 1 1 auto; min-width: 0; padding: 10px 11px; font-size: 13.5px; }
.adm-media-url .btn { flex: none; }

/* Price table — one row per country, right-aligned mono inputs */
.adm-prices { border: 1.5px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.adm-price-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.adm-price-row + .adm-price-row { border-top: 1px solid var(--line); }
.adm-price-flag { flex: none; line-height: 1; }
.adm-price-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-price-name .code { font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); margin-left: 6px; letter-spacing: 0.08em; }
.adm-price-in { flex: none; display: flex; align-items: center; gap: 6px; }
.adm-price-in .adm-input { width: 88px; }
.adm-price-in .cur { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--muted); width: 30px; letter-spacing: 0.06em; }

.adm-warn {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px; border-radius: var(--r-md);
  background: var(--danger-tint); border: 1.5px solid color-mix(in srgb, var(--danger) 42%, transparent);
}
.adm-warn .ic { color: var(--danger); flex: none; margin-top: 1px; }
.adm-warn .ic svg { width: 18px; height: 18px; }
.adm-warn .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adm-warn .tx b { font-size: 13px; font-weight: 800; color: var(--danger); }
.adm-warn .tx span { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

.adm-danger-row {
  width: 100%; margin-top: 28px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px; border-radius: var(--r-md);
  font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--danger);
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--danger) 40%, transparent);
  transition: transform var(--duration-quick) var(--ease-smooth-out), background var(--duration-quick);
}
.adm-danger-row:active { transform: scale(0.98); background: var(--danger-tint); }
.adm-danger-row svg { width: 17px; height: 17px; }

/* Save dock */
.adm-dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: 10px 14px calc(env(safe-area-inset-bottom) + 12px);
  background: var(--bg);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-top: 1.5px solid var(--line-2);
}
.adm-dock-in { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 7px; }
.adm-dirty {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); text-align: center;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-smooth-out);
}
html[data-theme="dark"] .adm-dirty { color: var(--punch); }
.adm-dirty.is-on { opacity: 1; transform: none; }
.screen[data-page-id="adminProduct"] .screen-scroll { padding-bottom: calc(env(safe-area-inset-bottom) + 150px); }

/* ── Generic rows / lists (pool, users) ────────────────────────────────── */
.adm-rows { border: 1.5px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.adm-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; width: 100%; text-align: left; }
.adm-row + .adm-row { border-top: 1px solid var(--line); }
.adm-row--tap { transition: background var(--duration-quick); }
.adm-row--tap:active { background: var(--surface-sunk); }
.adm-row-flag { flex: none; line-height: 1; }
.adm-row-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.adm-row-tx .a { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-row-tx .b { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; letter-spacing: 0.04em; }
.adm-row-code { font-family: var(--font-mono); flex: none; font-size: 10px; font-weight: 700; color: var(--faint); letter-spacing: 0.1em; }
.adm-row-sum { font-family: var(--font-mono); flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-row-sum .cur { font-size: 9px; color: var(--muted); font-weight: 600; margin-left: 3px; }
.adm-row-del {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  color: var(--faint); border-radius: var(--r-sm);
  transition: color var(--duration-quick), background var(--duration-quick), transform var(--duration-quick) var(--ease-smooth-out);
}
.adm-row-del:active { transform: scale(0.88); color: var(--danger); background: var(--danger-tint); }
.adm-row-del svg { width: 16px; height: 16px; }

.adm-list { display: flex; flex-direction: column; }
.adm-list-row { display: flex; align-items: center; gap: 11px; padding: 11px 8px; border-radius: var(--r-md); transition: background var(--duration-quick); }
.adm-list-row + .adm-list-row { border-top: 1px solid var(--line); border-radius: 0; }
.adm-list-row:active { background: var(--surface-sunk); }
.adm-list-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); background: var(--surface-sunk); border: 1px solid var(--line); }
.adm-list-ico svg { width: 17px; height: 17px; }
.adm-list-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.adm-list-tx .a { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-list-tx .b { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; letter-spacing: 0.04em; }
.adm-list-check { flex: none; color: var(--accent); opacity: 0; transform: scale(0.6); transition: opacity var(--duration-quick), transform var(--duration-quick) var(--ease-bounce); }
html[data-theme="dark"] .adm-list-check { color: var(--punch); }
.adm-list-row.is-on .adm-list-check { opacity: 1; transform: none; }
.adm-list-check svg { width: 18px; height: 18px; }

/* ── Multi-select rows (country picker, apply-to-many) ─────────────────── */
.adm-pick-bulk { display: flex; gap: 7px; padding: 2px 0 10px; }
.adm-chip {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  padding: 8px 13px; border-radius: var(--r-pill);
  background: var(--surface-sunk); border: 1px solid var(--line);
  transition: transform var(--duration-quick) var(--ease-smooth-out), background var(--duration-quick), color var(--duration-quick), border-color var(--duration-quick);
}
.adm-chip:active { transform: scale(0.94); background: var(--punch); color: var(--punch-on); border-color: var(--punch-edge); }

.adm-group { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); padding: 16px 4px 6px; }
.adm-check-row {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px 6px; border-radius: var(--r-md);
  transition: background var(--duration-quick);
}
.adm-check-row + .adm-check-row { border-top: 1px solid var(--line); border-radius: 0; }
.adm-check-row:active { background: var(--surface-sunk); }
.adm-check-row.is-locked { opacity: 0.5; pointer-events: none; }
.adm-box {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line-2); background: var(--surface);
  color: transparent;
  transition: background var(--duration-quick), border-color var(--duration-quick), color var(--duration-quick), transform var(--duration-quick) var(--ease-bounce);
}
.adm-box svg { width: 13px; height: 13px; }
.adm-check-row.is-on .adm-box { background: var(--punch); border-color: var(--punch-edge); color: var(--punch-on); }
.adm-check-flag { flex: none; line-height: 1; }
.adm-check-name { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-check-code { font-family: var(--font-mono); flex: none; font-size: 10px; font-weight: 700; color: var(--faint); letter-spacing: 0.1em; }

/* ── Balances ──────────────────────────────────────────────────────────── */
.adm-lookup { display: flex; align-items: flex-end; gap: 9px; margin-top: 18px; }
.adm-lookup .btn { flex: none; padding: 12px 15px; }

.adm-user {
  position: relative;
  margin-top: 16px; padding: 17px 16px 15px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line-2); overflow: hidden;
  background: radial-gradient(140% 110% at 100% 0%, var(--punch-tint) 0%, transparent 58%), var(--surface);
}
.adm-user::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--lime) 0%, var(--magenta) 58%, var(--cyan) 100%);
}
.adm-user-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-user-id { font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.adm-user-name { font-size: 13px; color: var(--muted); }
.adm-pill {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px 3px; border-radius: var(--r-xs);
  background: var(--surface-sunk); color: var(--muted);
}
.adm-pill--new { background: var(--punch); color: var(--punch-on); }
.adm-user-bal { margin-top: 16px; }
.adm-user-bal .lbl { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.adm-user-bal .amount { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; }
.adm-user-bal .num { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.055em; line-height: 0.92; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .adm-user-bal .num { color: var(--punch); }
.adm-user-bal .cur { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--muted); }

.adm-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 16px; padding: 3px; border-radius: var(--r-md); background: var(--surface-sunk); border: 1.5px solid var(--line-2); }
.adm-mode {
  padding: 10px 6px; border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--muted);
  transition: background var(--duration-quick), color var(--duration-quick);
}
.adm-mode[aria-pressed="true"] { background: var(--punch); color: var(--punch-on); }

.adm-amount { margin-top: 12px; }
.adm-quick { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.adm-apply { margin-top: 14px; }

.adm-jr { border: 1.5px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.adm-jr-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.adm-jr-row + .adm-jr-row { border-top: 1px solid var(--line); }
.adm-jr-act {
  font-family: var(--font-mono);
  flex: none; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 7px 4px; border-radius: var(--r-xs); min-width: 74px; text-align: center;
}
.adm-jr-act[data-a="credit"] { background: var(--ok-tint); color: var(--ok); }
.adm-jr-act[data-a="debit"]  { background: var(--danger-tint); color: var(--danger); }
.adm-jr-act[data-a="set"]    { background: var(--warn-tint); color: var(--warn); }
.adm-jr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.adm-jr-main .a { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; }
.adm-jr-main .b { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; letter-spacing: 0.04em; }
.adm-jr-main .b .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); flex: none; }
.adm-jr-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.adm-jr-right .amt { font-family: var(--font-mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-jr-right .amt[data-a="credit"] { color: var(--ok); }
.adm-jr-right .amt[data-a="debit"]  { color: var(--danger); }
.adm-jr-right .delta { font-family: var(--font-mono); font-size: 10px; color: var(--faint); white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════
   INTERACTION LAYER
   Every hover rule lives behind `hover: hover` + `pointer: fine`. Without
   that gate a touch device applies :hover on tap and then keeps it until you
   tap something else — the element stays lit, which reads as a stuck
   selection. Telegram Desktop is a real pointer, so the hover work is not
   wasted; phones simply never see this block.
   ══════════════════════════════════════════════════════════════════════ */

/* Tap feedback that applies everywhere, pointer or not ─────────────────── */

/* Tiles and country cards bloom from the point of contact instead of just
   shrinking, so a tap on a big surface still feels like it registered. */
.tile, .ccard { isolation: isolate; }
.tile::after, .ccard::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, var(--punch-tint) 0%, transparent 62%);
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--duration-fast) var(--ease-smooth-out),
              transform var(--duration-fast) var(--ease-smooth-out);
}
.tile:active::after, .ccard:active::after { opacity: 1; transform: scale(1); }

/* The arrow leans out on press — a small promise that this goes somewhere */
.tile-go { transition: transform var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast); }
.tile:active .tile-go { transform: translateX(3px); opacity: 1; }
.tile-art { transition: transform var(--duration-fast) var(--ease-smooth-out); }
.tile:active .tile-art { transform: scale(1.03); }
.tile-glyph { transition: transform var(--duration-medium) var(--ease-bounce); }
.tile:active .tile-glyph { transform: scale(0.88) rotate(-4deg); }

.ccard-flag { transition: transform var(--duration-fast) var(--ease-smooth-out); overflow: hidden; }
.ccard:active .ccard-flag { transform: scale(1.06); }

/* Tab bar: the icon dips and the underline snaps wider */
.tabbar-btn::before { transition: transform var(--duration-fast) var(--ease-bounce), opacity var(--duration-fast), width var(--duration-fast) var(--ease-smooth-out); }
.tabbar-btn:active::before { opacity: 1; transform: translateX(-50%) scaleX(0.7); }
.tabbar-lbl { transition: transform var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick); }
.tabbar-btn:active .tabbar-lbl { transform: translateY(1px); }

/* Rows that lead somewhere get a nudge, not just a background swap */
.order-row, .adm-jr-row { transition: background var(--duration-quick), transform var(--duration-quick) var(--ease-smooth-out); }
.adm-nav-go, .pl-go, .svc-chevron, .topup-mini .arrow, .adm-ctx-cat .go {
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}
.adm-nav:active .adm-nav-go, .pl-head:active .pl-go, .adm-ctx-cat:active .go { transform: translateX(3px); }

.topup-mini { transition: transform var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick); }
.section-row .a { transition: transform var(--duration-quick) var(--ease-smooth-out), opacity var(--duration-quick); }
.section-row .a:active { transform: translateX(2px); opacity: 0.75; }

/* Stat cells: the number reacts, the box stays put */
.adm-stat .n { transition: transform var(--duration-fast) var(--ease-bounce); }
.adm-stat:active .n { transform: scale(1.12); }

/* Flags lift out of the strip on press */
.tile:active .tile-flags .flag-img--sm { transform: translateY(-2px); }
.tile-flags .flag-img--sm { transition: transform var(--duration-fast) var(--ease-smooth-out); }

/* Pointer-only refinements ─────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .tile:hover {
    transform: translateY(-3px);
    border-color: var(--punch-edge);
    box-shadow: var(--shadow-card-hot);
  }
  .tile:hover .tile-go { opacity: 1; transform: translateX(2px); }
  .tile:hover .tile-art { transform: scale(1.02); }
  /* A light sweeps across the art plate once per hover. z-index 2 clears
     .tile-img (z-index 1) — as a first child it would otherwise paint under it. */
  .tile-art::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform var(--duration-very-slow) var(--ease-smooth-out);
  }
  .tile:hover .tile-art::before { transform: translateX(120%); }

  .ccard:hover {
    transform: translateY(-3px);
    border-color: var(--punch-edge);
    box-shadow: var(--shadow-card-hot);
  }
  .ccard:hover .ccard-flag { transform: scale(1.05); }

  .prod-card:hover { transform: translateY(-2px); border-color: var(--punch-edge); box-shadow: var(--shadow-card-hot); }
  .prod-card:hover .prod-open { gap: 9px; box-shadow: var(--glow-soft); }

  .btn:hover { transform: translateY(-1px); }
  .btn-primary:hover { box-shadow: var(--glow-punch); }
  .btn-secondary:hover { border-color: var(--ink); background: var(--surface-sunk); }
  .btn-ghost:hover { background: var(--punch-tint); }
  .btn-accent:hover { box-shadow: var(--glow-accent); }
  .btn[disabled]:hover, .btn.is-disabled:hover { transform: none; box-shadow: none; }

  .icon-btn:hover { border-color: var(--punch-edge); color: var(--ink); }
  .icon-btn.ghost:hover { background: var(--surface-sunk); }
  .back-btn:hover { border-color: var(--punch-edge); background: var(--punch-tint); }
  .back-btn:hover svg { transform: translateX(-2px); }
  .back-btn svg { transition: transform var(--duration-fast) var(--ease-smooth-out); }

  .brand:hover .brand-mark { box-shadow: 0 0 0 2px var(--punch), var(--glow-punch); }

  .t-tab:hover { color: var(--ink); }
  .t-tab[aria-pressed="true"]:hover { color: var(--punch-on); }

  .tabbar-btn:hover { color: var(--ink); }
  html[data-theme="dark"] .tabbar-btn:hover { color: var(--punch); }
  .tabbar-btn:hover .tabbar-ico { transform: translateY(-2px); }

  .country-item:hover { background: var(--surface-sunk); }
  .country-item.is-selected:hover { background: var(--punch); }
  .order-row:hover, .adm-jr-row:hover { background: var(--surface-2); }
  .adm-row--tap:hover, .adm-list-row:hover, .adm-check-row:hover, .pl-head:hover, .adm-nav:hover { background: var(--surface-sunk); }
  .adm-nav:hover .adm-nav-go, .pl-head:hover .pl-go { transform: translateX(2px); }
  .svc-card:hover .svc-chevron { transform: translateX(2px); }
  .topup-mini:hover { border-color: var(--punch-edge); transform: translateY(-1px); }
  .topup-mini:hover .arrow { transform: translateX(2px); }

  .preset:hover { border-color: var(--punch-edge); transform: translateY(-2px); }
  .preset.is-active:hover { box-shadow: var(--glow-punch); }
  .pl-chip:hover, .adm-chip:hover { background: var(--punch-tint); border-color: var(--punch-edge); }
  .adm-icon:hover { border-color: var(--punch-edge); }
  .adm-mode:hover, .adm-lang:hover { color: var(--ink); }
  .adm-mode[aria-pressed="true"]:hover, .adm-lang[aria-pressed="true"]:hover { color: var(--punch-on); }
  .adm-rt:hover { background: var(--surface-sunk); }
  .adm-rt.is-on:hover { background: var(--punch); }
  .qty-btn:hover:not([disabled]) { background: var(--punch-tint); }
  .pl-cat-btn:hover:not([disabled]) { background: var(--surface-sunk); color: var(--ink); }
  .pl-add:hover, .pl-newcat:hover { border-color: var(--punch-edge); color: var(--ink); }
  .adm-row-del:hover { color: var(--danger); background: var(--danger-tint); }
  .adm-danger-row:hover { background: var(--danger-tint); }
  .search-clear:hover { color: var(--ink); }
  .support-link:hover, .adm-link:hover { opacity: 0.75; }
  .origin-row:hover { border-color: var(--punch-edge); }
  .adm-ctx-cat:hover { border-color: var(--punch-edge); }
  .wallet-actions .btn:hover { transform: translateY(-2px); }
}

/* ── Utilities ──────────────────────────────────────────────────────────── */
.hidden, [hidden] { display: none !important; }
.nowrap { white-space: nowrap; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ambient-blob, .ambient-blob::before, .ambient-blob::after { animation: none; }
  .ambient-dots::before, .ambient-dots::after { animation: none; }
  .ambient-rings::before, .ambient-rings::after { animation: none; }
  /* Parked off-canvas rather than frozen mid-screen as a static stripe. */
  .ambient-beam { animation: none; transform: translate3d(-58%, 0, 0); }
  .theme-sweep { display: none; }
  .btn-primary.btn-block:not([disabled]):not(.is-disabled),
  .wallet-actions .btn-primary:not([disabled]):not(.is-disabled) { animation: none; box-shadow: var(--shadow-card-hot); }
  .status::before { animation: none; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .t-stagger-line { opacity: 1; transform: none; filter: none; }
  .success-check { opacity: 1; transform: none; filter: none; }
  .success-check svg path { stroke-dashoffset: 0; }
  .adm-dirty { opacity: 1; transform: none; }
  .skel::after { animation: none; }
}