/* WSPRO V4.02 - BLAST JOB: sign-in, the sign-up wizard, onboarding, forgot-password and the Telegram / phone gates.
   Markup: auth-bb.js (login, register), pages-public.js (onboarding, phone gate), pages-forgot.js, pages-telegram.js.
   Design read: sign-in, sign-up, onboarding and recovery for WhatsApp-number operators, in the fixed arcade-cabinet language
   (sky, coin, grass, navy blocks; Fredoka + Nunito), dial ENERGY 3 / RHYTHM 2 / MOTION 2: one focal object per page, the card.
   RHYTHM 2 is one step below the landing's RHYTHM 3 on purpose (DESIGN-V4 section 1, per-surface dials): a sign-in screen has
   one card and one job, so the only composition change on it is the side panel against the card; varying more would be noise.

   Why each decision (one line each):
   - Coin yellow is the single accent because coins are what the operator earns; here it marks the one button that moves you
     forward, the current flag and the lit lamp, nothing else.
   - The solid navy edge replaces blurred shadows because pressing a block is the product's gesture; the press distance equals
     the edge height so the sink is believable.
   - The contact shadow (the floor) sits only under floating objects: the side panel and the card on sign-in and sign-up, the
     current step card in onboarding. Nothing else lifts off the board.
   - Slots are recessed (an inset top shadow on cream) and keys are raised, so "type here" and "press here" read by shape.
   - The headline on the side panel sits in a white light box: the cabinet marquee, once per screen.
   - The trail (dotted navy path, round flags) repeats from the landing into the wizard, onboarding and the gates, so the visitor
     learns the vocabulary once.
   - The wizard recap is a ticket stub because it is the receipt you check before the coin goes in; the coin slot stands beside
     the one button that spends it, and the coin drops only when the account really exists.
   - The send-mode picker in onboarding is a lever (groove plus coin knob) because the three modes are one choice on one scale.
   - Fredoka for headings, legends and flag numbers because it is rounded like the blocks; Nunito for body and labels because it
     stays legible at 13 to 16px.
   - Radii follow the ladder: 10 lamps and strip, 14 slots and keycaps, 18 light box and lever, 28 side panel and card.
   - Motion is a press, a one-time entrance, a pop on a validated step, a coin drop on success and a shake only on a failed
     check. Nothing loops. Entrances and the login coin run once per route enter (.is-fresh), never on a language re-render.
     Reduced motion turns it all off and the sign-up redirect is immediate.
   - Keyboard focus on a slot is the same 3px accent ring every key gets, drawn around the slot: one focus vocabulary, and a
     ring that reads at 5:1 on both the cream and the night card (a pale halo did not).
   - A flag that is still ahead keeps its glyph at full ink on a translucent face (white at .62, night face at .72): "ahead" is
     told by the face, not by fading the number below 4.5:1.
   - The public nav on these pages is the same marquee as the landing (3px navy, inset language rail, 44px keys), so the one
     nav component looks the same wherever it appears and every key meets the 44px tap target.
   - The language rail keys are 44px here (DESIGN-V4 writes 36px for the rail) because 44px is the tap floor for every control on
     a page people use on a phone; the track grows to 52px and sits centred beside the 44px theme key.
   - Night placeholders are declared again under :root[data-theme="dark"] because dark.css paints every placeholder grey
     (#6b717a, 3.1:1 on the night slot) with a stronger selector; ink-3 (#93a5c9) reads at 6.5:1 on the slot.
   - Placeholders are format hints ("Your full name", "ABC123"), not a sample person: a field never shows a name that belongs to nobody.
   - The sign-up card sits at the top of its column (not centred) because the panes differ in height and a heading that moves
     on every Continue reads as a jump, not a step.
   - In night mode the unchecked block checkbox gets a lit rim (ink-3 border) because the navy edge alone sits at 1.5:1 on the
     navy card; the keycaps get a line-2 rim for the same reason.
   - Dark mode is the same cabinet at night (navy faces, #14244a screens), not grey.
   - "Forgot password?" is drawn beside the password label but comes after the slot in the DOM, so Tab goes username, password,
     eye: the order every sign-in form has.
   - Text keys (Forgot password, Create account, Back to log in, Resend code) keep their 13.5px line but grow a 44px hit area
     (inline-flex plus a negative vertical margin) because every control on a page people use on a phone meets the tap floor;
     the block checkboxes get the same 44px row for the same reason, the 22px key face stays.
   - The perk markers on the sign-in panel are unlit tokens (key face, navy ring) because coin yellow on that screen belongs to
     the Log in key alone: coin is the next press and money, never an icon (do-not list).
   - The Telegram slot and the second trail flag carry the send glyph (a paper plane, Telegram's own mark); the handset belonged
     to the old phone-number field.
   - The onboarding lift animates transform only; the edge and the floor of the lifted card are the resting state of .current,
     drawn by the redraw, so no shadow is ever tweened.
   - After the coin drops (620ms) the Account created stamp holds 420ms: its pop finishes, and nobody waits more than about a
     second after the server said yes.
   - A refused slot keeps its red border while it has focus (no focus rule resets border-color) because the error must stay visible
     where the person is typing; the red halo gives way to the accent focus ring there so two rings never stack.
   - The wizard, the sign-in form and the forgot flow keep their step and typed text across a language change because the rail sits
     above the form and a four-language product invites switching mid-way; the markup carries the step so nothing replays, and
     focus returns to the pressed language key so a keyboard continues where it was. Leaving the route drops it all.
   - A progress lamp settles only when it lights after the page is drawn (.lit), never for a lamp the markup already carried.
   - A disabled text key (Resend code during its cooldown) is ink-3 with the default cursor: a pointer cursor promises a press.
   - The gate header keys and the language rail are flex: none so every key keeps its 44px at every width; the brand gives way.
   - Known server refusals are mapped to dictionary lines (S.axMsg) so a refusal answers in the UI language; an unknown one is shown
     as sent, never hidden. */

/* ---------- scoped tokens (declared on the page roots, never on :root) ---------- */
.auth, .tg {
  --cab-key: #ffffff;
  --cab-screen: #ffffff;
  --cab-lamp: inset 0 2px 0 rgba(255, 255, 255, .55);
  --cab-lamp-coin: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(185, 127, 0, .35);
  --cab-slot: inset 0 3px 0 rgba(19, 33, 63, .12);
  --cab-floor: 0 24px 30px -18px rgba(19, 33, 63, .35);
  --cab-edge-2: 0 2px 0 var(--arc-edge);
  --cab-edge-3: 0 3px 0 var(--arc-edge);
  --cab-edge-4: 0 4px 0 var(--arc-edge);
  --cab-edge-6: 0 6px 0 var(--arc-edge);
  --cab-edge-8: 0 8px 0 var(--arc-edge);
  --arc-grass-low: #d8f3d3;
  --flag-done: #3fae5a;
  --press: cubic-bezier(.3, 1.6, .5, 1);
  --snap: cubic-bezier(.3, 1.4, .45, 1);
  --rise: cubic-bezier(.2, 1.2, .4, 1);
  background: var(--bg);
}
:root[data-theme="dark"] .auth, :root[data-theme="dark"] .tg {
  --cab-key: #1a2d5c;
  --cab-screen: #14244a;
  --cab-lamp: inset 0 2px 0 rgba(255, 255, 255, .12);
  --cab-slot: inset 0 3px 0 rgba(0, 0, 0, .35);
  --cab-floor: 0 24px 30px -18px rgba(0, 0, 0, .6);
  --arc-grass-low: #12301f;
}

/* ---------- keys: every button on these pages is a white keycap or a coin start button ---------- */
.auth .btn, .tg .btn {
  --e: 4px;
  min-height: 48px; padding: 0 20px;
  border: 2.5px solid var(--arc-edge); border-radius: 14px;
  font: 600 15px var(--font-display); letter-spacing: .01em; color: var(--arc-navy);
  background: var(--cab-key); box-shadow: 0 var(--e) 0 var(--arc-edge);
  transition: transform .18s var(--press), box-shadow .18s var(--press), background .15s;
}
.auth .btn-primary, .tg .btn-primary { --e: 6px; min-height: 52px; border-width: 3px; border-radius: 16px; background: var(--arc-coin); box-shadow: 0 var(--e) 0 var(--arc-edge), var(--cab-lamp-coin); }
:root[data-theme="dark"] .auth .btn, :root[data-theme="dark"] .tg .btn { color: var(--ink); background: var(--cab-key); }
:root[data-theme="dark"] .auth .btn-secondary, :root[data-theme="dark"] .tg .btn-secondary { border-color: var(--line-2); } /* a night keycap on a night card needs a rim the edge alone does not give */
:root[data-theme="dark"] .auth .btn-primary, :root[data-theme="dark"] .tg .btn-primary { color: var(--arc-navy); background: var(--arc-coin); }
@media (hover: hover) {
  .auth .btn:hover, .tg .btn:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--e) + 2px) 0 var(--arc-edge); background: var(--cab-key); transition-duration: .12s; }
  .auth .btn-primary:hover, .tg .btn-primary:hover { background: var(--arc-coin); box-shadow: 0 calc(var(--e) + 2px) 0 var(--arc-edge), var(--cab-lamp-coin); }
}
.auth .btn:active, .tg .btn:active, .auth .btn.is-pressed, .tg .btn.is-pressed { transform: translateY(var(--e)); box-shadow: 0 0 0 var(--arc-edge); background: var(--cab-key); transition-duration: .09s; transition-timing-function: ease-out; }
.auth .btn-primary:active, .tg .btn-primary:active, .auth .btn-primary.is-pressed, .tg .btn-primary.is-pressed { background: var(--arc-coin); box-shadow: 0 0 0 var(--arc-edge), var(--cab-lamp-coin); }
:root[data-theme="dark"] .auth .btn-secondary:active, :root[data-theme="dark"] .tg .btn-secondary:active { background: var(--cab-key); }
/* loading = the key stays held down until the server answers; on an error it releases with the overshoot */
.auth .btn.is-loading, .tg .btn.is-loading { transform: translateY(var(--e)) !important; box-shadow: 0 0 0 var(--arc-edge); opacity: 1; cursor: progress; }
.auth .btn-primary.is-loading, .tg .btn-primary.is-loading { box-shadow: 0 0 0 var(--arc-edge), var(--cab-lamp-coin); }
.auth .btn[disabled], .tg .btn[disabled] { transform: none !important; box-shadow: 0 2px 0 var(--arc-edge); }
.auth .btn .ico, .tg .btn .ico { stroke-width: 2.4; }

/* ---------- the coin slot (14 x 34) and the coin that drops into it ---------- */
.ax-slot { position: relative; display: inline-block; width: 14px; height: 34px; border-radius: 4px; background: var(--arc-edge); flex: none; }
.ax-slot[hidden] { display: none; }
.ax-slot::after { content: ''; position: absolute; left: 6px; top: 6px; width: 2px; height: 22px; border-radius: 1px; background: var(--bg); }
.ax-slot-hill::after { background: #4caf50; }
.ax-slot .ax-coin { position: absolute; left: 50%; bottom: calc(100% + 2px); width: 30px; height: 30px; margin-left: -15px; opacity: 0; }
.ax-slot.is-drop .ax-coin { animation: ax-coin-drop .78s both; }
@keyframes ax-coin-drop {
  0% { opacity: 1; transform: translateY(-48px); animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
  70% { opacity: 1; transform: translateY(0) scale(1.08, .92); animation-timing-function: ease-out; }
  79.5% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translateY(10px) scale(.7); }
}

/* ---------- shared motion ---------- */
@keyframes ax-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ax-power { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes ax-pop { 0% { transform: scale(1) rotate(0); } 55% { transform: scale(1.25) rotate(-6deg); } 100% { transform: none; } }
@keyframes ax-stamp { 0% { opacity: 0; transform: scale(.4); } 55% { opacity: 1; transform: scale(1.18) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes ax-settle { 0% { transform: scaleY(.88); } 100% { transform: none; } }
@keyframes ax-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.ax-shake { animation: ax-shake .32s ease-in-out 1 !important; }
/* power-on: the nav lands once per page load and the lantern sways once (the class is removed again by S.axPower) */
.auth.is-on .site-nav-wrap { animation: ax-power .48s var(--rise) both; }
.auth.is-on .brand-mark.lantern svg { animation: lantern-sway 1.2s ease-in-out .12s 1; }

/* ---------- the public nav on these pages: the same marquee as the landing (one component, one look) ---------- */
.auth .site-nav-wrap .site-nav { background: var(--cab-key); border: 3px solid var(--arc-edge); border-radius: 18px; box-shadow: var(--cab-edge-4); padding: 8px 8px 8px 14px; gap: 10px; flex-wrap: nowrap; }
.auth .site-nav-wrap .site-nav::before { display: none; }
.auth .site-nav .spacer { min-width: 0; }
.auth .site-nav .brand { color: var(--ink); }
/* language rail: four 44px keys in one inset track; theme: a 44px keycap */
.auth .site-nav .lang-switch { background: var(--inset); border: 2px solid var(--arc-edge); border-radius: 12px; padding: 2px; gap: 3px; box-shadow: var(--cab-slot); }
.auth .site-nav .lang-switch button { min-height: 44px; min-width: 44px; padding: 0 8px; border-radius: 9px; font: 700 12.5px var(--font); color: var(--ink-2); box-shadow: none; transition: transform .18s var(--press), box-shadow .18s; }
.auth .site-nav .lang-switch button[aria-pressed="true"], :root[data-theme="dark"] .auth .site-nav .lang-switch button[aria-pressed="true"] { background: var(--cab-key); color: var(--ink); box-shadow: inset 0 0 0 2px var(--arc-edge), var(--cab-edge-2); }
.auth .site-nav .lang-switch button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--arc-edge); transition-duration: .09s; }
.auth .site-nav .theme-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 12px; background: var(--cab-key); border: 2.5px solid var(--arc-edge); box-shadow: var(--cab-edge-3); color: var(--ink); transition: transform .18s var(--press), box-shadow .18s; }
.auth .site-nav .theme-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--arc-edge); transition-duration: .09s; }
@media (hover: hover) {
  .auth .site-nav .lang-switch button:hover { color: var(--ink); background: transparent; }
  .auth .site-nav .theme-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--arc-edge); background: var(--cab-key); }
}
/* small phones: the brand collapses to the lantern so the rail and the theme key keep their size (declared after every other brand rule) */
@media (max-width: 440px) { .auth .site-nav-wrap .site-nav { gap: 8px; padding: 6px 6px 6px 10px; } .auth .site-nav-wrap .site-nav .brand { font-size: 0; gap: 0; } .auth .site-nav .lang-switch button { padding: 0 5px; } }

/* ---------- sign-in and sign-up page frame ---------- */
.ax { width: 100%; max-width: 1120px; margin-inline: auto; padding: 28px var(--gutter) 64px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: stretch; }

/* side panel: the sky, floating object 1 */
.ax-side { position: relative; overflow: hidden; min-height: 520px; border: 3px solid var(--arc-edge); border-radius: 28px; box-shadow: var(--cab-edge-8), var(--cab-floor); padding: 30px 28px 136px; background: linear-gradient(180deg, #63bbff 0%, #cdeaff 100%); color: var(--arc-navy); display: flex; flex-direction: column; gap: 24px; }
.auth.is-fresh .ax-side { animation: ax-rise .55s var(--rise) both; }
:root[data-theme="dark"] .ax-side { background: linear-gradient(180deg, #0b1730 0%, #1d3a73 100%); color: #eaf2ff; }
.ax-marquee { position: relative; z-index: 1; align-self: flex-start; background: var(--cab-key); border: 3px solid var(--arc-edge); border-radius: 18px; box-shadow: var(--cab-edge-4); padding: 14px 18px; }
.ax-marquee h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.08; max-width: 11em; color: var(--arc-navy); }
:root[data-theme="dark"] .ax-marquee h2 { color: var(--ink); }
.ax-hills { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 84px; }
.ax-coin { width: 24px; height: 24px; flex: none; }
/* the perks stand on the ground, above the hills, so the sky between the marquee and them reads as sky, not as a gap */
.ax-perks { list-style: none; margin: auto 0 0; padding: 0 110px 0 0; display: grid; gap: 12px; font-weight: 800; position: relative; z-index: 1; }
.ax-perks li { display: flex; align-items: center; gap: 10px; }
/* perk markers are unlit tokens: coin yellow on this screen belongs to the Log in key alone */
.ax-perks .ax-coin circle:first-of-type { fill: var(--cab-key); stroke: var(--arc-edge); }
.ax-perks .ax-coin circle:last-of-type { stroke: var(--ink-3); }
:root[data-theme="dark"] .ax-perks .ax-coin circle:first-of-type { stroke: var(--ink-3); } /* the night edge (#050b1a) vanishes on the night sky */
/* the 74px coin drops into the slot on the hill once per visit; after that only the slot stays (a coin went in, the game is on) */
.ax-bigcoin { position: absolute; right: 28px; bottom: 42px; z-index: 1; display: grid; justify-items: center; gap: 2px; }
.ax-bigcoin .ax-coin { width: 74px; height: 74px; opacity: 0; filter: drop-shadow(0 6px 0 rgba(19, 33, 63, .35)); }
.auth.is-fresh .ax-bigcoin .ax-coin { animation: ax-coin-drop .78s .25s both; }

/* level trail (sign-up steps) */
.ax-trail { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; z-index: 1; }
.ax-trail li { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding-bottom: 22px; }
.ax-trail li:last-child { padding-bottom: 0; }
.ax-trail li::before { content: ''; position: absolute; left: 21px; top: 46px; bottom: 0; width: 4px; background: repeating-linear-gradient(to bottom, var(--arc-navy) 0 4px, transparent 4px 14px); opacity: .35; }
.ax-trail li::after { content: ''; position: absolute; left: 21px; top: 46px; bottom: 0; width: 4px; border-radius: 2px; background: var(--arc-navy); transform: scaleY(0); transform-origin: top; transition: transform .5s cubic-bezier(.3, .8, .3, 1); }
:root[data-theme="dark"] .ax-trail li::before { background: repeating-linear-gradient(to bottom, #eaf2ff 0 4px, transparent 4px 14px); }
:root[data-theme="dark"] .ax-trail li::after { background: var(--arc-coin); }
.ax-trail li:last-child::before, .ax-trail li:last-child::after { display: none; }
.ax-trail li.is-done::after { transform: scaleY(1); }
.ax-flag { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--cab-key); color: var(--arc-navy); border: 3px solid var(--arc-edge); box-shadow: var(--cab-edge-4); transition: background .3s, color .3s, opacity .3s, transform .3s var(--press), box-shadow .3s; }
:root[data-theme="dark"] .ax-flag { color: var(--ink); }
.ax-flag .ico { width: 20px; height: 20px; stroke-width: 2.4; }
.ax-flag-ok { position: absolute; inset: -3px; display: grid; place-items: center; border-radius: 50%; background: var(--flag-done); color: var(--arc-navy); border: 3px solid var(--arc-edge); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.ax-flag-ok .ico { stroke-width: 3.2; }
.ax-trail li.is-now .ax-flag { background: var(--arc-coin); color: var(--arc-navy); transform: scale(1.1); box-shadow: var(--cab-edge-4), var(--cab-lamp-coin); }
.ax-trail li.is-done .ax-flag-ok { opacity: 1; transform: none; }
.ax-trail li.pop .ax-flag { animation: ax-pop .42s cubic-bezier(.3, 1.8, .5, 1) 1; }
.ax-trail b { display: block; font: 600 18px var(--font-display); }
.ax-trail li > div { transition: opacity .3s; }
.ax-trail li > div > span { display: block; margin-top: 2px; font-weight: 600; font-size: 14px; max-width: 22em; }
/* a step still ahead: translucent face, full-ink glyph (the sky shows through; the icon stays at 4:1 or better) */
.ax-trail li:not(.is-now):not(.is-done) .ax-flag { background: rgba(255, 255, 255, .62); color: var(--ink-3); }
.ax-trail li:not(.is-now):not(.is-done) > div { opacity: .78; }
:root[data-theme="dark"] .ax-trail li:not(.is-now):not(.is-done) .ax-flag { background: rgba(26, 45, 92, .72); }

/* the card: floating object 2, the focal point of the page */
.ax-card { background: var(--cab-key); border: 3px solid var(--arc-edge); border-radius: 28px; box-shadow: var(--cab-edge-8), var(--cab-floor); padding: clamp(22px, 4vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.auth.is-fresh .ax-card { animation: ax-rise .55s var(--rise) .055s both; }
/* the wizard card sizes to its step and stays pinned to the top, so the heading never jumps between panes */
.ax-side-reg + .ax-card { align-self: start; justify-content: flex-start; }
.ax-form { display: grid; gap: 18px; }
.ax-form h1 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.01em; line-height: 1.08; }
.ax-form .lede { color: var(--ink-2); margin-top: 6px; font-weight: 600; }
.ax-field { gap: 8px; }
.ax-field > label { font-size: 14px; font-weight: 700; color: var(--ink-2); transition: color .15s; }
.ax-field:focus-within > label { color: var(--ink); }
.ax-field .hint { font-size: 13.5px; font-weight: 600; }
.ax-field .err, .ax-form .err { font-size: 13px; font-weight: 700; }
/* a refusal that names no field: one line above the keys, on the step that was pressed */
.ax-form-err { margin: -6px 0 0; padding: 10px 14px; border: 2px solid var(--bad); border-radius: 12px; background: var(--surface); color: var(--bad); }
.ax-form-err[hidden] { display: none; }
/* password field: the forgot key sits in the label row visually (grid), after the slot in the DOM (Tab order) */
.ax-field-pw { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.ax-field-pw > .ax-in, .ax-field-pw > .err { grid-column: 1 / -1; }
.ax-forgot { grid-row: 1; grid-column: 2; justify-self: end; font-size: 13.5px; font-weight: 800; text-underline-offset: 3px; }
/* text keys: a 44px hit area on a 22px line (inline-flex, negative vertical margin), so the layout does not move */
.auth .link-btn, .ax-alt a, .fg-card .muted a, .onb-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: -11px -4px; }

/* slots: recessed, below the floor */
.ax-in { position: relative; display: flex; align-items: center; border: 2.5px solid var(--arc-edge); border-radius: 14px; background: var(--inset); box-shadow: var(--cab-slot); transition: box-shadow .15s, background .15s, border-color .15s; }
/* focus: the slot face turns white and the global 3px accent ring is drawn around the slot (the input inside gives its own up) */
.ax-in:has(.input:focus) { background: var(--surface); box-shadow: inset 0 3px 0 rgba(19, 33, 63, .06); outline: 3px solid var(--accent); outline-offset: 2px; }
.ax-in.invalid { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(192, 57, 43, .15), var(--cab-slot); }
/* refused and focused, every slot family: red border, white face, the accent ring; the red halo steps aside so two rings never stack */
.ax-in.invalid:has(.input:focus), .fg-card .input.invalid:focus, .fg-card .input-group.invalid:has(.input:focus), .tg .tg-gate .input.invalid:focus { border-color: var(--bad); background: var(--surface); box-shadow: inset 0 3px 0 rgba(19, 33, 63, .06); }
.ax-ic { flex: none; width: 46px; display: grid; place-items: center; color: var(--ink-3); }
.ax-in .input { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none !important; height: 52px; min-height: 0; padding-left: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.ax-in .input::placeholder { color: var(--ink-3); font-weight: 600; }
/* night: dark.css paints placeholders #6b717a (3.1:1 on the night slot) with a stronger selector; ink-3 reads at 6.5:1 */
:root[data-theme="dark"] .auth .ax-in .input::placeholder, :root[data-theme="dark"] .fg-card .input::placeholder, :root[data-theme="dark"] .tg .tg-gate .input::placeholder,
:root[data-theme="dark"] #lw-form .input::placeholder, :root[data-theme="dark"] #l2-form .input::placeholder { color: var(--ink-3); }
.ax-in .input:focus { outline: none; }
/* the eye key: a 44px target, flat at rest, a 2px key on hover, sinks on press */
.ax-eye { margin-right: 2px; width: 44px; height: 44px; border-radius: 12px; border: 2px solid transparent; color: var(--ink-3); transition: transform .18s var(--press), box-shadow .18s, background .15s, border-color .15s; }
.ax-eye:hover { background: var(--cab-key); border-color: var(--arc-edge); box-shadow: var(--cab-edge-2); color: var(--ink); transform: translateY(-1px); }
.ax-eye:active { transform: translateY(1px); box-shadow: 0 0 0 var(--arc-edge); border-color: var(--arc-edge); background: var(--cab-key); }
/* block checkbox (remember me, terms): a 22px key; checked = coin face with a navy check. The row is a 44px target (11px padding,
   7px pulled back by the margin so the form rhythm grows by 4px, not 22) */
.auth .check { gap: 12px; align-items: flex-start; font-size: 14px; font-weight: 600; color: var(--ink-2); min-height: 44px; padding: 11px 0; margin: -7px 0; }
.auth .check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none; border: 2.5px solid var(--arc-edge); border-radius: 7px; background: var(--cab-key); box-shadow: var(--cab-edge-2); cursor: pointer; transition: transform .18s var(--press), box-shadow .18s, background .15s; }
.auth .check input:active { transform: translateY(2px); box-shadow: 0 0 0 var(--arc-edge); }
:root[data-theme="dark"] .auth .check input:not(:checked) { border-color: var(--ink-3); } /* 5:1 rim on the night card; the navy edge alone was 1.5:1 */
.auth .check input:checked { background: var(--arc-coin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313213f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px 15px no-repeat; }
.auth .check span, .auth .check { line-height: 1.45; }
/* the security check keeps its room only where it really renders, so production never shifts the card */
.auth .captcha-box.is-live { min-height: 70px; }
.ax-alt { font-weight: 600; }
.ax-dev { margin-top: 6px; padding: 12px 14px; border: 2px dashed var(--line-2); border-radius: 14px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13.5px; }
.ax-dev .mono { user-select: all; color: var(--ink-2); }
.ax-dev .btn { min-height: 36px; --e: 3px; padding: 0 14px; font-size: 14px; border-radius: 10px; }

/* ---------- wizard ---------- */
/* progress strip: an inset marquee with one lamp per step; a lamp fills with coin and settles once */
.ax-prog { --n: 4; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; padding: 4px; background: var(--inset); border: 2px solid var(--arc-edge); border-radius: 10px; }
.ax-prog i { display: block; height: 10px; border-radius: 5px; background: var(--surface); border: 2px solid var(--arc-edge); position: relative; overflow: hidden; }
.ax-prog i::after { content: ''; position: absolute; inset: 0; background: var(--arc-coin); box-shadow: var(--cab-lamp); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.3, .8, .3, 1); }
.ax-prog i.on::after { transform: scaleX(1); }
.ax-prog i.lit { animation: ax-settle .32s var(--press) .62s 1; } /* lit = lamp turned on after the page was drawn (not carried by the markup) */
.ax-count { margin: -6px 0 0; font: 600 14px var(--font-display); color: var(--ink-3); }
.ax-panes { display: grid; }
.ax-pane { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 18px; align-content: start; }
.ax-pane[hidden] { display: none; }
.ax-pane legend { font: 600 22px var(--font-display); margin-bottom: 14px; padding: 0; color: var(--ink); }
.ax-pane.ax-enter { animation: ax-in-fwd .5s var(--rise) both; }
.ax-pane.ax-enter[data-dir="back"] { animation-name: ax-in-back; }
.ax-pane.ax-leave { animation: ax-out-fwd .19s ease-in both; }
.ax-pane.ax-leave[data-dir="back"] { animation-name: ax-out-back; }
/* password meter: four lamps */
.auth .pw-meter { gap: 6px; }
.auth .pw-meter i { height: 6px; border-radius: 4px; background: var(--inset); border: 1.5px solid var(--arc-edge); box-sizing: content-box; transition: background .2s; }
.auth .pw-meter[data-s="1"] i:nth-child(-n+1) { background: var(--bad); }
.auth .pw-meter[data-s="2"] i:nth-child(-n+2), .auth .pw-meter[data-s="3"] i:nth-child(-n+3), .auth .pw-meter[data-s="4"] i { background: var(--flag-done); }
/* the recap: a ticket stub, perforated top and bottom (the mask cuts the notches through the border too) */
.ax-recap { margin: 0; display: grid; gap: 0; padding: 6px 0; background: var(--inset); border: 2.5px solid var(--arc-edge); border-radius: 12px;
  -webkit-mask: radial-gradient(circle at 7px 0, transparent 4px, #000 4.5px) top / 14px 8px repeat-x, radial-gradient(circle at 7px 100%, transparent 4px, #000 4.5px) bottom / 14px 8px repeat-x, linear-gradient(#000, #000) 0 8px / 100% calc(100% - 16px) no-repeat;
  mask: radial-gradient(circle at 7px 0, transparent 4px, #000 4.5px) top / 14px 8px repeat-x, radial-gradient(circle at 7px 100%, transparent 4px, #000 4.5px) bottom / 14px 8px repeat-x, linear-gradient(#000, #000) 0 8px / 100% calc(100% - 16px) no-repeat; }
.ax-recap div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1.5px dashed var(--line-2); }
.ax-recap div:first-child { border-top: 0; }
.ax-recap dt { color: var(--ink-3); font-weight: 700; font-size: 14px; }
.ax-recap dd { margin: 0; font-weight: 800; font-size: 15px; color: var(--ink); text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* nav row: Back keycap, the coin slot (step 4 only), the start button */
.ax-nav { display: flex; gap: 12px; align-items: center; }
.ax-nav #ax-next { flex: 1; }
.ax-nav #ax-back { flex: 0 0 auto; min-height: 52px; }
.ax-nav #ax-back[hidden] { display: none; }
/* the moment after the coin went in: the account exists, the page is about to move on */
.ax-made { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 14px 0 6px; animation: ax-rise .3s var(--rise) both; }
.ax-made[hidden] { display: none; }
.ax-made-flag { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--flag-done); color: var(--arc-navy); border: 3px solid var(--arc-edge); box-shadow: var(--cab-edge-4); animation: ax-stamp .34s cubic-bezier(.3, 1.8, .5, 1) .04s both; }
.ax-made-flag .ico { width: 30px; height: 30px; stroke-width: 3; }
.ax-made b { font: 600 24px var(--font-display); color: var(--ink); margin-top: 6px; }
.ax-made span { color: var(--ink-2); font-weight: 600; }

@keyframes ax-in-fwd { from { opacity: 0; transform: translateX(46px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ax-in-back { from { opacity: 0; transform: translateX(-46px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ax-out-fwd { to { opacity: 0; transform: translateX(-36px); } }
@keyframes ax-out-back { to { opacity: 0; transform: translateX(36px); } }

/* ---------- onboarding (.auth .onb): three cards on one column, depth tells the state ---------- */
.auth .onb { max-width: 760px; margin-inline: auto; padding-block: 40px 64px; display: grid; gap: 28px; }
.onb-head { display: grid; gap: 8px; }
.onb-kick { font: 600 14px var(--font-display); color: var(--ink-3); }
.onb-head h1 { font-size: clamp(28px, 4vw, 36px); line-height: 1.08; letter-spacing: -0.01em; }
.onb-head .lede { color: var(--ink-2); font-weight: 600; }
.onb-prog { --n: 3; margin-top: 10px; max-width: 420px; }
.auth .onb-steps { display: grid; gap: 16px; }
.auth .onb-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px; border-radius: 20px; background: var(--inset); border: 2.5px solid var(--line-2); box-shadow: none; transition: transform .22s var(--press), box-shadow .22s var(--press); }
.auth .onb-step .n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 700 20px var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-3); background: rgba(255, 255, 255, .62); border: 3px solid var(--arc-edge); }
:root[data-theme="dark"] .auth .onb-step:not(.current):not(.done) .n { background: rgba(26, 45, 92, .72); } /* current and done keep navy ink on coin and green in both themes */
.auth .onb-step h3 { font-size: 20px; color: var(--ink-2); }
.auth .onb-step .body { display: grid; gap: 16px; min-width: 0; }
.auth .onb-step .body p.muted { margin-top: 4px; color: var(--ink-2); font-weight: 600; }
.auth .onb-step .hint { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
/* current = the one floating object on the page */
.auth .onb-step.current { background: var(--cab-key); border-color: var(--arc-edge); box-shadow: var(--cab-edge-6), var(--cab-floor); }
.auth .onb-step.current h3 { color: var(--ink); }
.auth .onb-step.current .n { background: var(--arc-coin); color: var(--arc-navy); box-shadow: var(--cab-edge-4), var(--cab-lamp-coin); }
/* done = flat on the ground */
.auth .onb-step.done { background: var(--arc-grass-low); border-color: var(--arc-edge); }
.auth .onb-step.done h3 { color: var(--ink); }
.auth .onb-step.done .n { background: var(--flag-done); color: var(--arc-navy); }
.auth .onb-step.done .n .ico { width: 22px; height: 22px; stroke-width: 3; }
.onb-acts { display: flex; gap: 12px; flex-wrap: wrap; }
.auth .onb .btn { min-height: 48px; }
.auth .onb .btn-primary { --e: 4px; min-height: 48px; border-width: 2.5px; border-radius: 14px; }
/* the lever: one groove, three notches, the checked notch is the coin knob; the radios stay real inputs */
.auth .mode-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; background: var(--inset); border: 3px solid var(--arc-edge); border-radius: 18px; box-shadow: var(--cab-slot), var(--cab-edge-6); }
.auth .pick { position: relative; display: grid; gap: 4px; align-content: center; justify-items: center; text-align: center; min-height: 64px; padding: 10px 12px; border: 2.5px solid transparent; border-radius: 12px; background: transparent; box-shadow: none; cursor: pointer; transition: background .15s, border-color .15s, transform .18s var(--press), box-shadow .18s var(--press); }
.auth .pick b { font: 600 17px var(--font-display); color: var(--ink); }
.auth .pick span { font: 600 13px var(--font); color: var(--ink-2); }
.auth .pick:active { transform: translateY(2px); }
.auth .pick:has(input:checked) { background: var(--arc-coin); border-color: var(--arc-edge); box-shadow: var(--cab-edge-3), var(--cab-lamp-coin); }
.auth .pick:has(input:checked):active { box-shadow: 0 1px 0 var(--arc-edge), var(--cab-lamp-coin); }
.auth .pick:has(input:checked) b, .auth .pick:has(input:checked) span { color: var(--arc-navy); }
.auth .pick:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
/* finish */
.onb-fin { display: flex; align-items: center; gap: 12px; }
.auth .onb-fin .btn-primary { --e: 6px; min-height: 52px; border-width: 3px; border-radius: 16px; padding: 0 24px; font-size: 16px; }
.onb-foot { font-size: 14px; font-weight: 600; color: var(--ink-2); }
/* entrance: the cards rise in turn; completion: the finished card sinks, 120ms later the next one lifts (transform only: its edge
   and floor are the resting state of .current, already drawn by the redraw) */
.onb-enter .onb-head, .onb-enter .onb-step, .onb-enter .onb-fin, .onb-enter .onb-foot { animation: ax-rise .55s var(--rise) both; animation-delay: calc(var(--i, 0) * 55ms); }
.auth .onb-step.is-sink { transform: translateY(6px); box-shadow: none; }
.auth .onb-step.is-lift { animation: onb-lift .35s var(--snap) .12s both; }
@keyframes onb-lift { 0% { transform: translateY(6px); } 55% { transform: translateY(-4px); } 100% { transform: none; } }

/* ---------- forgot password (.fg-card): a raised block, no floor ---------- */
.fg-main { display: block; padding-block: 28px 64px; }
.fg-card { max-width: 520px; margin-inline: auto; background: var(--cab-key); border: 3px solid var(--arc-edge); border-radius: 28px; box-shadow: var(--cab-edge-8); padding: clamp(22px, 4vw, 40px); display: grid; gap: 18px; }
.auth.is-fresh .fg-card { animation: ax-rise .55s var(--rise) both; }
.fg-card h1 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.01em; line-height: 1.08; }
.fg-card .lede { color: var(--ink-2); font-weight: 600; margin-top: 6px; }
.fg-card form, .fg-card .fg-steps { display: grid; gap: 18px; }
.fg-card .field { gap: 8px; }
.fg-card .field > label { font-size: 14px; font-weight: 700; color: var(--ink-2); transition: color .15s; }
.fg-card .field:focus-within > label { color: var(--ink); }
.fg-card .input, .fg-card .input-group { border: 2.5px solid var(--arc-edge); border-radius: 14px; background: var(--inset); box-shadow: var(--cab-slot); transition: box-shadow .15s, background .15s, border-color .15s; }
.fg-card .input { height: 52px; min-height: 52px; padding: 0 16px; font-size: 16px; font-weight: 700; color: var(--ink); }
.fg-card .input::placeholder { color: var(--ink-3); font-weight: 600; }
.fg-card .input:focus, .fg-card .input-group:has(.input:focus) { background: var(--surface); box-shadow: inset 0 3px 0 rgba(19, 33, 63, .06); outline: 3px solid var(--accent); outline-offset: 2px; }
.fg-card .input.invalid, .fg-card .input-group.invalid { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(192, 57, 43, .15), var(--cab-slot); }
.fg-card .input-group { overflow: hidden; align-items: center; }
.fg-card .input-group .input { border: 0; border-radius: 0; background: none; height: 47px; min-height: 0; box-shadow: none !important; }
.fg-card .input-group .input:focus { outline: none; } /* the ring is on the group */
.fg-card .input.otp { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: .2em; font-variant-numeric: tabular-nums; max-width: 240px; }
.fg-card .hint { font-size: 13.5px; font-weight: 600; }
.fg-card .err { font-size: 13px; font-weight: 700; }
.fg-card .link-btn { font-size: 13.5px; font-weight: 800; text-underline-offset: 3px; }
/* the resend key during its cooldown: it reads as waiting, not as a link */
.fg-card .link-btn[disabled] { color: var(--ink-3); cursor: default; text-decoration: none; }
.fg-card .link-btn[disabled]:hover { text-decoration: none; }
.fg-card .muted { font-weight: 600; }
.fg-done { display: flex; align-items: center; gap: 14px; }
.fg-flag { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--flag-done); color: var(--arc-navy); border: 3px solid var(--arc-edge); box-shadow: var(--cab-edge-4); animation: ax-stamp .42s cubic-bezier(.3, 1.8, .5, 1) .15s both; }
.fg-flag .ico { width: 26px; height: 26px; stroke-width: 3; }
.fg-done h1 { font-size: clamp(24px, 3vw, 30px); }

/* ---------- Telegram gate and phone gate (.tg): the same trail, a lighter touch ---------- */
.tg-top .brand { font-family: var(--font-display); font-size: 15px; gap: 8px; line-height: 1.05; min-width: 0; }
.tg-top .lang-switch button { white-space: nowrap; }
@media (max-width: 480px) { .tg-top { gap: 6px; } .tg-top .brand { font-size: 0; gap: 0; } .tg-top .brand-mark.lantern { flex: none; } }
.tg-top .icon-btn, .tg-top .lang-switch { flex: none; } /* the keys keep 44px at every width; the brand gives way */
.tg-top .icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 2.5px solid var(--arc-edge); background: var(--cab-key); box-shadow: var(--cab-edge-3); color: var(--arc-navy); transition: transform .18s var(--press), box-shadow .18s var(--press); }
:root[data-theme="dark"] .tg-top .icon-btn { color: var(--ink); }
.tg-top .icon-btn:hover { background: var(--cab-key); transform: translateY(-1px); box-shadow: var(--cab-edge-4); }
.tg-top .icon-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--arc-edge); }
/* the same language rail as the public nav: an inset track with 44px keys */
.tg-top .lang-switch { background: var(--inset); border: 2px solid var(--arc-edge); border-radius: 12px; padding: 2px; gap: 3px; box-shadow: var(--cab-slot); }
.tg-top .lang-switch button { min-height: 44px; min-width: 44px; padding: 0 8px; border-radius: 9px; font: 700 12.5px var(--font); color: var(--ink-2); box-shadow: none; }
@media (max-width: 480px) { .tg-top .lang-switch button { padding: 0 5px; } }
.tg-top .lang-switch button[aria-pressed="true"], :root[data-theme="dark"] .tg-top .lang-switch button[aria-pressed="true"] { background: var(--cab-key); color: var(--ink); box-shadow: inset 0 0 0 2px var(--arc-edge), var(--cab-edge-2); }
.tg-top .lang-switch button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--arc-edge); }
/* entrance once per route enter; a language change or a poll redraw does not replay it */
.tg:not(.is-fresh) .tg-copy > *, .tg:not(.is-fresh) .tg-node, .tg:not(.is-fresh) .tg-foot { animation: none; }
.tg .tg-kick { font: 600 14px var(--font-display); letter-spacing: 0; color: var(--ink-3); }
.tg .tg-kick b { color: var(--ink); font-family: var(--font-display); }
.tg .tg-copy h1 { font-weight: 600; letter-spacing: -0.01em; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.04; }
.tg .tg-lead { font-weight: 600; }
.tg .tg-who { font-weight: 600; }
.tg .tg-node::before, .tg .tg-node::after { left: 20px; width: 4px; border-radius: 0; }
.tg .tg-node::after { background: repeating-linear-gradient(to bottom, var(--arc-navy) 0 4px, transparent 4px 14px); opacity: .35; }
:root[data-theme="dark"] .tg .tg-node::after { background: repeating-linear-gradient(to bottom, #eaf2ff 0 4px, transparent 4px 14px); }
.tg .tg-node::before { background: var(--arc-navy); border-radius: 2px; }
:root[data-theme="dark"] .tg .tg-node::before { background: var(--arc-coin); }
.tg .tg-dot { width: 44px; height: 44px; background: var(--cab-key); border: 3px solid var(--arc-edge); color: var(--ink-3); box-shadow: var(--cab-edge-4); transition: background .3s, color .3s, box-shadow .3s, opacity .3s, transform .3s var(--press); }
.tg .tg-idx { font: 700 16px var(--font-display); }
/* a node still ahead: translucent face, the number and the lock at full ink-3 (5:1 on the page, not .62 of it) */
.tg .tg-node.is-todo .tg-dot, .tg .tg-node.is-wait .tg-dot { background: rgba(255, 255, 255, .62); color: var(--ink-3); }
:root[data-theme="dark"] .tg .tg-node.is-todo .tg-dot, :root[data-theme="dark"] .tg .tg-node.is-wait .tg-dot { background: rgba(26, 45, 92, .72); }
.tg .tg-node.is-current .tg-dot { opacity: 1; background: var(--arc-coin); color: var(--arc-navy); box-shadow: var(--cab-edge-4), var(--cab-lamp-coin); }
.tg .tg-node.is-done .tg-dot, .tg .tg-node.is-open .tg-dot { opacity: 1; background: var(--flag-done); color: var(--arc-navy); box-shadow: var(--cab-edge-4); }
.tg .tg-tick { stroke-width: 3; }
.tg .tg-lock { stroke-width: 2.2; }
.tg .tg-nb h2 { font: 600 20px var(--font-display); letter-spacing: 0; }
.tg .tg-nb p { font-weight: 600; }
.tg .tg-act .btn { --e: 4px; min-height: 48px; padding: 0 18px; font-size: 15px; border-radius: 14px; }
.tg #tg-check { --e: 4px; min-height: 48px; border-width: 2.5px; border-radius: 14px; }
.tg .tg-foot { border-top: 2px dashed var(--line-2); }
.tg .tg-msg { font-weight: 600; font-size: 13.5px; }
/* the phone gate form: one slot, one start button, in a raised block */
.tg .tg-gate { display: grid; gap: 14px; max-width: 380px; background: var(--cab-key); border: 3px solid var(--arc-edge); border-radius: 20px; box-shadow: var(--cab-edge-6); padding: 22px; }
.tg .tg-gate .field { gap: 8px; }
.tg .tg-gate .field > label { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.tg .tg-gate .field:focus-within > label { color: var(--ink); }
.tg .tg-gate .input { height: 52px; min-height: 52px; padding: 0 16px; font-size: 16px; font-weight: 700; color: var(--ink); border: 2.5px solid var(--arc-edge); border-radius: 14px; background: var(--inset); box-shadow: var(--cab-slot); transition: box-shadow .15s, background .15s, border-color .15s; }
.tg .tg-gate .input::placeholder { color: var(--ink-3); font-weight: 600; }
.tg .tg-gate .input:focus { background: var(--surface); box-shadow: inset 0 3px 0 rgba(19, 33, 63, .06); outline: 3px solid var(--accent); outline-offset: 2px; }
.tg .tg-gate .hint { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.tg .tg-gate .onb-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.tg .tg-gate .onb-acts .btn { flex: 1 1 auto; }
.tg .tg-gate .input.invalid { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(192, 57, 43, .15), var(--cab-slot); }
.tg .tg-gate .err { font-size: 13px; font-weight: 700; }
.tg .tg-gate .btn-primary { --e: 4px; min-height: 48px; border-width: 2.5px; border-radius: 14px; }

/* ---------- widths ---------- */
@media (max-width: 980px) {
  .ax { grid-template-columns: 1fr; padding-top: 16px; gap: 20px; align-items: start; align-content: start; }
  .ax-side-reg { display: none; }
  .ax-side-login { min-height: 0; padding: 24px 24px 100px; }
  .ax-side-login .ax-perks { display: none; }
  .ax-side-reg + .ax-card { align-self: auto; }
  .ax-marquee h2 { font-size: 24px; }
  .ax-bigcoin { bottom: 34px; right: 22px; }
  .ax-bigcoin .ax-coin { width: 60px; height: 60px; }
}
@media (max-width: 619px) { .auth .mode-pick { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .auth .onb-step { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .auth .onb-step .n { width: 40px; height: 40px; font-size: 18px; }
  .onb-acts .btn, .onb-fin .btn { flex: 1 1 auto; width: 100%; }
  .onb-fin { flex-direction: column; align-items: stretch; }
}
@media (max-width: 520px) {
  /* the slot stays beside the start button on the first line; Back takes a full line below */
  .ax-nav { flex-wrap: wrap; }
  .ax-nav .ax-slot { order: 1; }
  .ax-nav #ax-next { order: 2; flex: 1 1 60%; }
  .ax-nav #ax-back { order: 3; flex: 1 1 100%; }
}

/* ---------- reduced motion: every state still shows, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .auth :not(.spinner), .auth :not(.spinner)::before, .auth :not(.spinner)::after, .auth .site-nav-wrap,
  .tg :not(.spinner), .tg :not(.spinner)::before, .tg :not(.spinner)::after { animation: none !important; transition: none !important; }
  .ax-bigcoin .ax-coin { opacity: 1; }
  .ax-slot .ax-coin { display: none; }
}