/* ARBI Wallet — home screen. Built from Figma frame 22:3149 (393pt wide). */
:root {
  --ink: #222d43;
  --ink-2: #5d6474;
  --ink-3: #9a9ea8;
  --bg: #f4f4f5;
  --card: #fdfdfd;
  --line: rgba(34, 45, 67, .08);
  --green: #33745e;
  --green-2: #44906f;
  --green-ink: #2f7d57;
  --blue: #526de2;
  --lime: #7fd155;
  --r-card: 24px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --top: max(var(--sat), 12px);
  --bottom: max(var(--sab), 12px);
  --tabbar-h: 56px;
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 15px/1.3 Inter, -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
input { font: inherit; color: inherit; -webkit-user-select: text; user-select: text; }
h1, h2, h3, h4, p { margin: 0; }
img { display: block; -webkit-user-drag: none; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ───────── Stage / device ───────── */
#stage { height: 100%; }
#phone { position: fixed; top: 0; left: 0; height: var(--app-h, 100dvh); width: 100%; overflow: hidden; background: var(--bg); isolation: isolate; }
#app { position: absolute; inset: 0; transform-origin: 50% 0; transition: transform .5s var(--ease), border-radius .5s var(--ease), filter .5s var(--ease); background: var(--bg); overflow: hidden; }
#phone.sheet-open #app { transform: scale(.94) translateY(10px); border-radius: 28px; filter: brightness(.92); }
.device-status, .device-home { display: none; }

@media (min-width: 600px) {
  body { background: radial-gradient(1200px 800px at 50% 0%, #17362c 0%, #0b1512 60%, #070b0a 100%); }
  #stage { display: grid; place-items: center; }
  #phone {
    --sat: 54px; --sab: 34px; --top: 54px; --bottom: 34px;
    position: relative; width: 393px; height: 852px; border-radius: 56px;
    box-shadow: 0 0 0 11px #0b0b0d, 0 0 0 12.5px #3a3b40, 0 50px 120px rgba(0, 0, 0, .55);
    transform: scale(var(--fit, 1));
  }
  .device-status {
    display: flex; position: absolute; z-index: 90; top: 0; left: 0; right: 0; height: 54px; padding: 18px 32px 0 44px;
    justify-content: space-between; align-items: flex-start; pointer-events: none; color: #0b0b0d; transition: color .3s;
  }
  #phone.dark-chrome .device-status { color: #fff; }
  .ds-time { font: 600 17px/22px Inter, system-ui; letter-spacing: -.02em; }
  .ds-island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
  .ds-icons { display: flex; gap: 6px; align-items: center; height: 22px; }
  .ds-icons svg { fill: currentColor; }
  .device-home { display: block; position: absolute; z-index: 90; bottom: 8px; left: 50%; width: 138px; height: 5px; margin-left: -69px; border-radius: 3px; background: #0b0b0d; pointer-events: none; transition: background .3s; }
  #phone.dark-chrome .device-home { background: #fff; }
}

/* ───────── Press feedback ───────── */
.press, .press-soft, .action, .tab, .op, .btn-primary, .row, .rate, .chip, .grid-item { transition: transform .35s var(--spring), opacity .2s, background-color .2s, filter .2s; }
.press:active { transform: scale(.9); }
.press-soft:active { transform: scale(.975); }
.btn-primary:active { transform: scale(.97); filter: brightness(.94); }

/* ───────── Glass ───────── */
.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .38));
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 20px rgba(30, 60, 100, .12);
}
.glass-solid {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 8px 28px rgba(24, 32, 52, .14), 0 1px 3px rgba(24, 32, 52, .06);
}

/* ───────── Top bar ───────── */
.topbar { position: absolute; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: calc(var(--top) + 8px) 16px 10px; transition: transform .45s var(--ease), opacity .3s; }
.topbar-plate {
  position: absolute; inset: 0; z-index: -1; opacity: var(--plate, 0); pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .22)), url(assets/hero.jpg) 50% 0 / 100% auto;
  box-shadow: 0 10px 30px rgba(30, 70, 120, .22); border-radius: 0 0 26px 26px;
}
#app[data-tab]:not([data-tab="home"]) .topbar { transform: translateY(-110%); opacity: 0; }
.avatar { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 6px 16px rgba(20, 50, 90, .25); }
.avatar-badge { position: absolute; top: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: #e0303b; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); animation: badge 2.4s ease-in-out infinite; }
@keyframes badge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.35); } }
.search { flex: 1; height: 44px; border-radius: 22px; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: #55647c; font-size: 16px; min-width: 0; }
.search .ic { width: 22px; height: 22px; color: #3c4963; stroke-width: 2; }
.round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #2e3a52; }

/* ───────── Screens ───────── */
.screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; scrollbar-width: none; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity .28s ease, transform .45s var(--ease), visibility 0s .3s; }
.screen::-webkit-scrollbar { display: none; }
.screen.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ───────── Hero ───────── */
.hero { position: relative; height: calc(var(--top) + 386px); }
.hero-bg { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--top) + 392px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); will-change: transform; transform-origin: 50% 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; animation: heroIn 1.6s var(--ease) both, heroDrift 26s ease-in-out 1.6s infinite alternate; }
@keyframes heroDrift { to { transform: scale(1.09) translate(-1.6%, -1.2%); } }
.hero-bg::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(38% 30% at 50% 50%, rgba(255, 255, 255, .5), transparent 70%); mix-blend-mode: soft-light; animation: sun 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes sun { from { transform: translate(-34%, -22%); } to { transform: translate(30%, 4%); } }
@keyframes heroIn { from { transform: scale(1.14); filter: blur(6px) saturate(.9); } to { transform: none; filter: none; } }

.balance { position: absolute; left: 0; right: 0; top: calc(var(--top) + 136px); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.balance-label { font-size: 15px; color: rgba(34, 45, 67, .62); letter-spacing: .01em; }
.balance-value { font-size: 50px; line-height: 56px; font-weight: 600; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; transition: filter .35s, opacity .35s, transform .45s var(--spring); white-space: nowrap; }
.balance-cents { display: inline-block; font-size: 32px; letter-spacing: -.02em; opacity: .82; transform: translateY(-.17em); }
.ch { display: inline-block; height: 1.12em; line-height: 1.12em; overflow: hidden; vertical-align: bottom; }
.ch.sp { width: .2em; }
.dg i { display: block; font-style: normal; transition: transform 1.7s cubic-bezier(.16, 1, .3, 1) var(--dl, 0ms); will-change: transform; }
.dg b { display: block; height: 1.12em; font-weight: inherit; }
.balance:active .balance-value { transform: scale(.96); }
.balance.is-hidden .balance-value { filter: blur(14px); opacity: .55; }

.actions { position: absolute; left: 14px; right: 14px; top: calc(var(--top) + 290px); display: grid; grid-template-columns: repeat(4, 1fr); }
.action { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: #6a7080; }
.action-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #2e3a52; transition: transform .4s var(--spring); }
.action:active .action-ic { transform: scale(.86); }

/* ───────── Content ───────── */
.content { position: relative; padding: 4px 0 calc(var(--bottom) + var(--tabbar-h) + 84px); display: flex; flex-direction: column; gap: 14px; }
.reveal { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .6s ease, transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.is-off { display: none !important; }

/* Banners */
.banners-wrap { transition: height .45s var(--ease), opacity .3s, margin .45s var(--ease); }
.banners { display: flex; gap: 9px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding: 0 16px; }
.banners::-webkit-scrollbar, .promos::-webkit-scrollbar { display: none; }
.banner { position: relative; flex: 0 0 calc(100% - 1px); height: 98px; border-radius: var(--r-card); overflow: hidden; scroll-snap-align: start; padding: 20px 16px; transition: flex-basis .4s var(--ease), opacity .3s, transform .4s var(--ease), margin .4s var(--ease), padding .4s var(--ease); cursor: pointer; }
.banner.is-gone { flex-basis: 0; opacity: 0; transform: scale(.8); margin-right: -9px; padding-left: 0; padding-right: 0; }
.banner h3 { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.banner p { margin-top: 6px; font-size: 15px; line-height: 19px; color: var(--ink-2); max-width: 200px; }
.banner-text { position: relative; z-index: 1; }
.banner--light { background: var(--card); box-shadow: 0 8px 24px rgba(24, 32, 52, .05); }
.banner-art { position: absolute; right: 0; top: 0; height: 100%; width: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
.banner--green { background: linear-gradient(120deg, #2a6953, #4fa07f 70%, #86c9a6); color: #fff; }
.banner--green p, .banner--dark p { color: rgba(255, 255, 255, .78); }
.banner--dark { background: linear-gradient(120deg, #17181c, #33353d); color: #fff; }
.banner-x { position: absolute; z-index: 2; top: 10px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.banner-x .ic { width: 18px; height: 18px; stroke-width: 2; }
.banner-chip { position: absolute; right: 26px; bottom: -22px; width: 118px; height: 76px; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .08)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transform: rotate(-14deg); }
.banner-chip i { position: absolute; left: 12px; top: 14px; width: 22px; height: 16px; border-radius: 4px; background: rgba(255, 255, 255, .55); }
.banner-chip i + i { left: auto; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.banner-qr { position: absolute; right: 44px; top: 50%; margin-top: -30px; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.banner-qr .ic { width: 34px; height: 34px; stroke-width: 1.5; }
.dots { display: flex; justify-content: center; gap: 7px; padding-top: 10px; height: 16px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: #cdd0d6; transition: width .35s var(--ease), background-color .3s, opacity .3s, margin .35s; }
.dots i.on { width: 24px; background: #b4b8c0; }
.dots i.is-gone { width: 0; margin-left: -7px; opacity: 0; }

/* Cards */
.card { margin: 0 16px; padding: 20px 16px; border-radius: var(--r-card); background: var(--card); box-shadow: 0 8px 24px rgba(24, 32, 52, .05), 0 0 0 .5px rgba(24, 32, 52, .04); }
.card-title { display: flex; align-items: center; gap: 4px; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; }
.card-title .ic { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .3s var(--spring); }
.card-title--link:active .ic { transform: translateX(4px); }
.card-foot { margin-top: 14px; font-size: 14px; color: var(--ink-2); }

/* Operations */
.ops { display: flex; flex-direction: column; }
.op { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 0; border-radius: 14px; }
.op:active { transform: scale(.98); opacity: .7; }
.op-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #6480f0, #4a63d6); flex: none; }
.op-ic .ic { width: 22px; height: 22px; stroke-width: 1.7; }
.op-ic.in { background: linear-gradient(160deg, #92dc68, #6cc447); }
.op-ic.out { background: linear-gradient(160deg, #3a4257, #222d43); }
.op-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.op-main b { font-size: 16px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-main small { font-size: 13px; line-height: 16px; color: var(--ink-3); }
.op-amt { align-self: flex-start; font-size: 16px; line-height: 20px; font-variant-numeric: tabular-nums; }
.op-amt.pos { color: var(--green-ink); }
.op.is-new { animation: opNew .7s var(--ease) both; }
@keyframes opNew { from { opacity: 0; transform: translateY(-14px); max-height: 0; padding-block: 0; } to { opacity: 1; max-height: 80px; } }
.ops-more-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.ops-more-wrap > .ops { overflow: hidden; }
.ops-more-wrap.open { grid-template-rows: 1fr; }
.ops-more { display: block; width: 100%; margin-top: 4px; padding: 16px 0 0; border-top: 1px solid var(--line); text-align: center; font-size: 15px; font-weight: 600; color: var(--ink-3); transition: color .2s; }
.ops-more:active { color: var(--ink); }

/* Exchange */
.card--black { background: #000; color: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .18); padding-bottom: 16px; }
.card--black.flash { animation: flash 1s ease; }
@keyframes flash { 30% { box-shadow: 0 0 0 3px rgba(79, 160, 127, .7), 0 16px 40px rgba(0, 0, 0, .18); } }
.fx-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 24px; }
.fx-amount { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-amount input { width: 100%; background: none; border: 0; outline: 0; padding: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; color: #fff; caret-color: #6fd0a6; font-variant-numeric: tabular-nums; border-radius: 0; }
.fx-usd { font-size: 13px; color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
.fx-cur { display: flex; align-items: center; gap: 6px; height: 34px; margin-top: 8px; font-size: 16px; }
.fx-cur b { font-weight: 600; }
.fx-cur .chev { width: 16px; height: 16px; color: rgba(255, 255, 255, .6); stroke-width: 2; }
.fx-divider { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.fx-divider .line { flex: 1; height: 1px; background: rgba(255, 255, 255, .22); }
.fx-swap { width: 32px; height: 32px; margin: -4px -4px -4px 0; display: grid; place-items: center; border-radius: 50%; transition: transform .5s var(--spring), background-color .2s; }
.fx-swap .ic { width: 20px; height: 20px; }
.fx-swap.spin { transform: rotate(180deg); }
.fx-rate { font-size: 13px; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.fx-note { margin-top: 22px; font-size: 14px; line-height: 18px; color: rgba(255, 255, 255, .95); }
.fx-anim { animation: fxPop .45s var(--ease); }
@keyframes fxPop { 0% { opacity: 0; transform: translateY(8px); filter: blur(4px); } 100% { opacity: 1; transform: none; filter: none; } }

.btn-primary { position: relative; display: grid; place-items: center; width: 100%; height: 53px; margin-top: 18px; border-radius: 27px; color: #fff; font-size: 17px; font-weight: 500; background: linear-gradient(180deg, #3d8469, #2f6f59); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 24px rgba(47, 111, 89, .35); overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 4.5s ease-in-out infinite 2s; }
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn-primary .spinner { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s var(--spring); animation: spin .7s linear infinite; }
.btn-primary .btn-label { transition: opacity .2s, transform .3s var(--ease); }
.btn-primary.loading { pointer-events: none; }
.btn-primary.loading .btn-label { opacity: 0; transform: scale(.9); }
.btn-primary.loading .spinner { opacity: 1; transform: none; }
.btn-sm { width: auto; height: 46px; padding: 0 24px; font-size: 15px; margin-top: 8px; }
@keyframes spin { to { rotate: 360deg; } }

/* Flags */
.flag { display: inline-block; width: 22px; height: 22px; border-radius: 50%; flex: none; position: relative; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); background: #ccc center / cover; }
.flag-RUB { background: linear-gradient(#fff 33.4%, #1c57c9 33.4% 66.6%, #e03a35 66.6%); }
.flag-THB { background: linear-gradient(#c8283c 16.6%, #f6f6f8 16.6% 33.3%, #2f3a8c 33.3% 66.6%, #f6f6f8 66.6% 83.4%, #c8283c 83.4%); }
.flag-USD { background: repeating-linear-gradient(#c8323e 0 7.7%, #fff 7.7% 15.4%); }
.flag-USD::before { content: ""; position: absolute; left: 0; top: 0; width: 52%; height: 54%; background: #33427f radial-gradient(#fff 12%, transparent 14%) 0 0 / 5px 5px; }
.flag-USDT { background: #2ba17c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.500 6h11v2.800h-4v1.900c2.900.2 5 .9 5 1.800s-2.100 1.600-5 1.800V19h-3v-4.700c-2.900-.2-5-.9-5-1.800s2.100-1.600 5-1.800V8.800h-4z'/%3E%3C/svg%3E") center / 100%; }
.flag-EUR { background: #2a4bb0 radial-gradient(circle, transparent 34%, #ffd84a 35% 44%, transparent 45%); }

/* Rates */
.rates { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; margin-top: 18px; }
.rate { display: flex; flex-direction: column; align-items: flex-start; border-radius: 12px; }
.rate:active { transform: scale(.94); opacity: .7; }
.rate-flags { display: flex; height: 28px; }
.rate-flags .flag { width: 28px; height: 28px; }
.rate-flags .flag + .flag { margin-left: -8px; box-shadow: 0 0 0 2px var(--card); }
.rate small { margin-top: 6px; font-size: 13px; line-height: 16px; color: var(--ink-2); }
.rate b { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* Map */
.mapcard { position: relative; display: block; margin: 0 16px; height: 161px; border-radius: var(--r-card); overflow: hidden; background: #e9ebec; cursor: pointer; box-shadow: 0 8px 24px rgba(24, 32, 52, .05); }
.mapcard img { position: absolute; inset: -4% -2%; width: 104%; height: 108%; object-fit: cover; animation: mapDrift 18s ease-in-out infinite alternate; }
@keyframes mapDrift { to { transform: translate(1.5%, -2%) scale(1.03); } }
.mapcard::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(244, 244, 245, .92) 70%); }
.map-title { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.map-title .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.pin { position: absolute; z-index: 1; width: 36px; height: 46px; margin: -46px 0 0 -18px; transform-origin: 50% 100%; opacity: 0; filter: drop-shadow(0 6px 6px rgba(20, 50, 40, .3)); }
.pin--a { left: 66.800%; top: 28%; }
.pin--b { left: 31.500%; top: 57%; }
.in .pin { animation: pinDrop .8s var(--spring) both; }
.in .pin--a { animation-delay: .45s; }
.in .pin--b { animation-delay: .25s; }
@keyframes pinDrop { 0% { opacity: 0; transform: translateY(-40px) scale(.6); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.pin-pulse { position: absolute; left: 50%; bottom: -5px; width: 14px; height: 6px; margin-left: -7px; border-radius: 50%; background: rgba(31, 90, 69, .5); animation: pulse 2.4s ease-out infinite; }
.pin--a .pin-pulse { animation-delay: 1.2s; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }

/* Promos */
.promos { display: flex; gap: 9px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
.promo { position: relative; flex: 0 0 245px; height: 291px; border-radius: 28px; overflow: hidden; scroll-snap-align: start; padding: 22px 16px; color: #fff; background: #36373d; cursor: pointer; transition: transform .4s var(--spring); }
.promo:active { transform: scale(.975); }
.promo-bg { position: absolute; inset: 0; background: url(assets/promo.jpg) center / cover; transition: transform 1.2s var(--ease); }
.promo:active .promo-bg { transform: scale(1.05); }
.promo--violet .promo-bg { filter: hue-rotate(-62deg) saturate(1.15); }
.promo--mint .promo-bg { filter: hue-rotate(185deg) saturate(.9) brightness(1.05); }
.promo h3 { position: relative; font-size: 15px; line-height: 20px; font-weight: 600; }
.promo p { position: relative; margin-top: 8px; font-size: 15px; line-height: 19px; color: rgba(255, 255, 255, .72); }
.btn-dark { position: absolute; left: 16px; bottom: 20px; height: 36px; padding: 0 12px; border-radius: 18px; background: #17181c; color: #fff; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .3); }

.widgets-row { display: flex; justify-content: center; padding-top: 6px; }
.btn-widgets { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 22px 0 18px; border-radius: 18px; font-size: 15px; font-weight: 500; background: #fbfbfc; box-shadow: inset 0 0 0 1px #fff, 0 6px 18px rgba(24, 32, 52, .1), 0 1px 2px rgba(24, 32, 52, .06); }
.btn-widgets .ic { width: 20px; height: 20px; }

/* ───────── FAB + Tab bar ───────── */
.fab { position: absolute; z-index: 40; right: 16px; bottom: calc(var(--bottom) + var(--tabbar-h) + 22px); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #2e3a52; }
.tabbar { position: absolute; z-index: 40; left: 16px; right: 16px; bottom: calc(var(--bottom) + 10px); height: var(--tabbar-h); padding: 4px; border-radius: 28px; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 12px 34px rgba(24, 32, 52, .14), 0 1px 3px rgba(24, 32, 52, .06); }
.tab-ind { position: absolute; top: 4px; left: 4px; bottom: 4px; width: calc((100% - 8px) / 4); border-radius: 24px; background: rgba(34, 45, 67, .07); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .5s var(--ease); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #a0a3ab; font-size: 11px; font-weight: 500; border-radius: 24px; }
.tab .ic { width: 24px; height: 24px; stroke-width: 1.7; transition: transform .45s var(--spring); }
.tab.is-active { color: #4a5266; }
.tab.is-active .ic { color: var(--green); transform: translateY(-1px) scale(1.06); }
.tab:active .ic { transform: scale(.82); }

/* ───────── Stub tabs ───────── */
.screen--stub { padding: calc(var(--top) + 18px) 0 calc(var(--bottom) + var(--tabbar-h) + 40px); background: var(--bg); }
.screen--stub h1 { padding: 0 16px; font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.03em; }
.stub-list { margin-top: 16px; padding-block: 6px; }
.segmented { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 16px 0; padding: 3px; border-radius: 14px; background: rgba(34, 45, 67, .07); }
.segmented button { position: relative; z-index: 1; height: 34px; text-align: center; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .25s; }
.segmented button.on { color: var(--ink); }
.segmented i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 11px; background: #fff; box-shadow: 0 2px 8px rgba(24, 32, 52, .1); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .4s var(--ease); }
.empty { margin: 14vh 32px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.empty-ic { width: 88px; height: 88px; border-radius: 30px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #4fa07f, #235a47); box-shadow: 0 18px 40px rgba(47, 111, 89, .35), inset 0 1px 0 rgba(255, 255, 255, .3); margin-bottom: 10px; animation: float 4s ease-in-out infinite; }
.empty-ic .ic { width: 40px; height: 40px; stroke-width: 1.5; }
@keyframes float { 50% { transform: translateY(-8px) rotate(-3deg); } }
.empty b { font-size: 20px; line-height: 25px; letter-spacing: -.02em; }
.empty p { color: var(--ink-2); line-height: 21px; }

/* ───────── Sheet ───────── */
.sheet-backdrop { position: absolute; inset: 0; z-index: 60; background: rgba(8, 12, 20, .42); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.sheet-backdrop.on { opacity: 1; pointer-events: auto; }
.sheet { position: absolute; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 88%; display: flex; flex-direction: column; border-radius: 30px 30px 0 0; background: #f6f6f7; box-shadow: 0 -20px 60px rgba(8, 12, 20, .25); transform: translateY(105%); transition: transform .55s var(--ease); will-change: transform; }
.sheet.on { transform: translateY(var(--drag, 0px)); }
.sheet.dragging { transition: none; }
.sheet-head { position: relative; flex: none; padding: 22px 56px 10px 20px; touch-action: none; cursor: grab; }
.grab { position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(34, 45, 67, .18); }
.sheet-head h3 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.025em; min-height: 28px; }
.sheet-x { position: absolute; right: 16px; top: 20px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(34, 45, 67, .08); color: var(--ink-2); }
.sheet-x .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px calc(var(--bottom) + 18px); scrollbar-width: none; }
.sheet-body::-webkit-scrollbar { display: none; }
.sheet-body > * { animation: sheetItem .5s var(--ease) both; }
.sheet-body > :nth-child(2) { animation-delay: .04s; } .sheet-body > :nth-child(3) { animation-delay: .08s; } .sheet-body > :nth-child(4) { animation-delay: .12s; } .sheet-body > :nth-child(5) { animation-delay: .16s; }
@keyframes sheetItem { from { opacity: 0; transform: translateY(18px); } }
.sheet-sub { color: var(--ink-2); line-height: 21px; margin-bottom: 14px; padding: 0 4px; }

.list { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 .5px rgba(24, 32, 52, .05); }
.list + .list, .list + .btn-primary, .kv + .btn-row { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; position: relative; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--line); }
.row:active { background: rgba(34, 45, 67, .05); }
.row-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(160deg, #4fa07f, #2f6f59); }
.row-ic .ic { width: 21px; height: 21px; }
.row-ic.blue { background: linear-gradient(160deg, #6480f0, #4a63d6); } .row-ic.dark { background: linear-gradient(160deg, #3a4257, #222d43); } .row-ic.lime { background: linear-gradient(160deg, #92dc68, #6cc447); } .row-ic.amber { background: linear-gradient(160deg, #f6b755, #e8912c); } .row-ic.pink { background: linear-gradient(160deg, #f277a8, #dc4585); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-main b { font-size: 16px; font-weight: 500; line-height: 21px; }
.row-main small { font-size: 13px; color: var(--ink-3); line-height: 17px; }
.row > .ic { width: 16px; height: 16px; color: #c3c6cd; stroke-width: 2.4; }
.row .flag { width: 36px; height: 36px; }
.row-check { width: 24px; height: 24px; color: var(--green); opacity: 0; transform: scale(.4); transition: all .3s var(--spring); }
.row.sel .row-check { opacity: 1; transform: none; }
.row-val { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.switch { position: relative; width: 51px; height: 31px; border-radius: 16px; background: #dcdde2; transition: background-color .3s; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .35s var(--spring); }
.row.on .switch { background: var(--green-2); }
.row.on .switch::after { transform: translateX(20px); }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 6px; padding: 10px 0 8px; }
.grid-item { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; line-height: 15px; text-align: center; color: var(--ink-2); }
.grid-item .row-ic { width: 54px; height: 54px; border-radius: 18px; box-shadow: 0 8px 18px rgba(24, 32, 52, .12); }
.grid-item .row-ic .ic { width: 26px; height: 26px; }
.grid-item:active { transform: scale(.9); }

.kv { background: #fff; border-radius: 20px; padding: 4px 16px; }
.kv div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; font-size: 15px; }
.kv div + div { border-top: 1px solid var(--line); }
.kv span { color: var(--ink-2); } .kv b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-ghost { height: 50px; border-radius: 25px; background: rgba(34, 45, 67, .08); text-align: center; font-size: 16px; font-weight: 500; transition: transform .3s var(--spring), background-color .2s; }
.btn-ghost:active { transform: scale(.96); background: rgba(34, 45, 67, .14); }
.sheet .btn-primary { margin-top: 0; }

.hero-amount { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 20px; text-align: center; }
.hero-amount .op-ic, .hero-amount .row-ic { width: 60px; height: 60px; border-radius: 20px; margin-bottom: 8px; }
.hero-amount .ic { width: 32px; height: 32px; }
.hero-amount strong { font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hero-amount span { color: var(--ink-2); }
.pill-ok { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border-radius: 12px; font-size: 13px; font-weight: 500; color: var(--green-ink) !important; background: rgba(47, 125, 87, .12); }
.pill-ok .ic { width: 14px; height: 14px; stroke-width: 2.6; }

.success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 8px 22px; gap: 6px; }
.success-ic { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 12px; color: #fff; background: linear-gradient(160deg, #4fa07f, #2f6f59); box-shadow: 0 16px 40px rgba(47, 111, 89, .4); animation: pop .7s var(--spring) both .1s; }
.success-ic svg { width: 44px; height: 44px; stroke-width: 2.6; stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .5s ease forwards .45s; }
@keyframes pop { from { transform: scale(0); } } @keyframes draw { to { stroke-dashoffset: 0; } }
.success b { font-size: 24px; letter-spacing: -.025em; } .success p { color: var(--ink-2); line-height: 21px; }

.vcard { position: relative; height: 196px; margin: 4px 8px 20px; border-radius: 22px; padding: 22px; color: #fff; overflow: hidden; background: radial-gradient(120% 90% at 85% 100%, #a9dcc0 0%, transparent 55%), linear-gradient(135deg, #0f2f25, #2f6f59 55%, #6fb596); box-shadow: 0 24px 50px rgba(31, 90, 69, .4), inset 0 1px 0 rgba(255, 255, 255, .25); animation: vcard .9s var(--ease) both; }
@keyframes vcard { from { transform: perspective(700px) rotateX(38deg) translateY(30px) scale(.9); opacity: 0; } }
.vcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); animation: sheen 3.5s ease-in-out infinite 1s; }
.vcard .ic { width: 34px; height: 34px; stroke-width: 2; }
.vcard-num { position: absolute; left: 22px; bottom: 46px; font-size: 19px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.vcard-name { position: absolute; left: 22px; bottom: 20px; font-size: 13px; opacity: .8; letter-spacing: .08em; }
.vcard-brand { position: absolute; right: 22px; bottom: 18px; font-weight: 700; font-style: italic; font-size: 20px; }

.code { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 8px 0 20px; border-radius: 20px; background: #fff; margin-bottom: 12px; font-size: 20px; font-weight: 700; letter-spacing: .12em; }
.code button { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(34, 45, 67, .07); color: var(--ink); }
.profile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 0 18px; }
.profile img { width: 84px; height: 84px; border-radius: 50%; margin-bottom: 8px; box-shadow: 0 12px 30px rgba(24, 32, 52, .2); }
.profile b { font-size: 22px; letter-spacing: -.02em; }

/* ───────── Toast ───────── */
.toast { position: absolute; z-index: 80; left: 50%; top: calc(var(--top) + 10px); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 11px 18px 11px 12px; border-radius: 24px; color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; background: rgba(22, 26, 36, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 14px 34px rgba(8, 12, 20, .3); transform: translate(-50%, -160%) scale(.9); opacity: 0; transition: transform .55s var(--spring), opacity .3s; pointer-events: none; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.toast .ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--green-2); stroke-width: 3; }

/* ───────── Search overlay ───────── */
.search-ov { position: absolute; inset: 0; z-index: 55; display: flex; flex-direction: column; background: rgba(244, 244, 245, .86); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.search-ov.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.search-head { display: flex; align-items: center; gap: 12px; padding: calc(var(--top) + 8px) 16px 10px; }
.search-field { flex: 1; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 22px; background: #fff; box-shadow: 0 6px 20px rgba(24, 32, 52, .08); transform-origin: 0 50%; transform: scaleX(.86); transition: transform .5s var(--ease); }
.search-ov.on .search-field { transform: none; }
.search-field .ic { width: 22px; height: 22px; color: var(--ink-2); stroke-width: 2; }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; padding: 0; }
.search-cancel { font-size: 16px; color: var(--green); font-weight: 500; transform: translateX(20px); opacity: 0; transition: all .45s var(--ease) .05s; }
.search-ov.on .search-cancel { transform: none; opacity: 1; }
.search-body { flex: 1; overflow-y: auto; padding: 8px 16px 40px; transform: translateY(16px); opacity: 0; transition: all .5s var(--ease) .08s; }
.search-ov.on .search-body { transform: none; opacity: 1; }
.search-body h4 { margin: 20px 4px 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 36px; padding: 0 14px; border-radius: 18px; background: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 2px 8px rgba(24, 32, 52, .06); }
.chip:active { transform: scale(.93); }
.search-empty { padding: 28px 16px; text-align: center; color: var(--ink-3); }

/* ───────── Scanner ───────── */
.scanner { position: absolute; inset: 0; z-index: 70; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 0 32px; background: radial-gradient(90% 60% at 50% 42%, #2a3340, #0b0e13 75%); clip-path: circle(0 at var(--cx, 90%) var(--cy, 85%)); visibility: hidden; transition: clip-path .6s var(--ease), visibility 0s .6s; }
.scanner.on { clip-path: circle(150% at var(--cx, 90%) var(--cy, 85%)); visibility: visible; transition-delay: 0s; }
.scanner.torch { background: radial-gradient(90% 60% at 50% 42%, #77808c, #1a1f27 80%); }
.scanner-noise { position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); pointer-events: none; }
.scanner .round { position: absolute; top: calc(var(--top) + 8px); color: #fff; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.scanner-close { left: 16px; } .scanner-torch { right: 16px; }
.scanner.torch .scanner-torch { background: #fff; color: #111; }
.finder { position: relative; width: 240px; height: 240px; margin-bottom: 28px; border-radius: 34px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); transform: scale(1.2); opacity: 0; transition: transform .7s var(--spring) .15s, opacity .4s .15s; }
.scanner.on .finder { transform: none; opacity: 1; }
.finder i { position: absolute; width: 46px; height: 46px; border: 4px solid #fff; border-radius: 34px 0 0 0; border-right: 0; border-bottom: 0; }
.finder i:nth-child(1) { top: 0; left: 0; } .finder i:nth-child(2) { top: 0; right: 0; transform: rotate(90deg); } .finder i:nth-child(3) { bottom: 0; right: 0; transform: rotate(180deg); } .finder i:nth-child(4) { bottom: 0; left: 0; transform: rotate(270deg); }
.laser { position: absolute; left: 18px; right: 18px; top: 16px; height: 60px; border-top: 2px solid #7fe0b3; background: linear-gradient(rgba(127, 224, 179, .28), transparent); animation: laser 2.2s ease-in-out infinite alternate; }
@keyframes laser { to { transform: translateY(150px); } }
.scanner-title { position: relative; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.scanner-sub { position: relative; color: rgba(255, 255, 255, .6); line-height: 20px; }
.btn-glass { position: relative; margin-top: 22px; height: 48px; padding: 0 24px; border-radius: 24px; font-size: 15px; font-weight: 500; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ───────── Splash ───────── */
#splash { position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: #fff; background: radial-gradient(120% 80% at 50% 110%, #4fa07f 0%, #1f5a45 45%, #0e2a22 100%); transition: opacity .6s ease, transform .9s var(--ease), visibility 0s .9s; }
#splash.done { opacity: 0; transform: scale(1.25); visibility: hidden; pointer-events: none; }
.sp-a, .sp-b { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s var(--ease) forwards .15s; }
.sp-b { animation-delay: .55s; animation-duration: .5s; }
.sp-word { font-size: 17px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; padding-left: .32em; opacity: 0; animation: word .7s ease forwards .7s; }
@keyframes word { from { opacity: 0; letter-spacing: .6em; } to { opacity: .9; } }

/* ───────── Launch choreography ───────── */
.topbar > :not(.topbar-plate), .action, .balance-label { opacity: 0; }
.booted .topbar > :not(.topbar-plate) { opacity: 1; animation: dropIn .8s var(--spring) backwards; }
.booted .topbar > :nth-child(3) { animation-delay: .06s; } .booted .topbar > :nth-child(4) { animation-delay: .12s; } .booted .topbar > :nth-child(5) { animation-delay: .18s; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-26px) scale(.8); } to { opacity: 1; transform: none; } }
.booted .balance-label { animation: fadeUp .7s var(--ease) both .1s; }
.booted .action { opacity: 1; animation: popIn .75s var(--spring) backwards; }
.booted .action:nth-child(1) { animation-delay: .35s; } .booted .action:nth-child(2) { animation-delay: .43s; } .booted .action:nth-child(3) { animation-delay: .51s; } .booted .action:nth-child(4) { animation-delay: .59s; }
@keyframes popIn { from { opacity: 0; transform: translateY(18px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal.in .op, .reveal.in .rate { animation: fadeUp .6s var(--ease) backwards; }
.reveal.in .op:nth-child(2), .reveal.in .rate:nth-child(2) { animation-delay: .08s; } .reveal.in .op:nth-child(3), .reveal.in .rate:nth-child(3) { animation-delay: .16s; }
.banner-art { animation: floaty 5.5s ease-in-out infinite; transform-origin: 80% 100%; }
@keyframes floaty { 50% { transform: translateY(-4px) rotate(-1.2deg) scale(1.02); } }

/* Exchange card: slow aurora */
.card--black { position: relative; overflow: hidden; }
.card--black > * { position: relative; }
.card--black::before { content: ""; position: absolute; width: 90%; aspect-ratio: 1; right: -35%; bottom: -55%; border-radius: 50%; background: radial-gradient(closest-side, rgba(79, 160, 127, .55), rgba(79, 160, 127, 0)); filter: blur(10px); animation: aurora 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes aurora { from { transform: translate(0, 0) scale(1); opacity: .7; } to { transform: translate(-70%, -12%) scale(1.25); opacity: 1; } }

/* Promo cards lean while swiping */
.promos { perspective: 900px; }
.promo { transform: rotateY(calc(var(--tilt, 0) * -7deg)) scale(calc(1 - max(var(--tilt, 0), -1 * var(--tilt, 0)) * .05)); transition: none; }
.promo:active { transform: scale(.975); transition: transform .4s var(--spring); }
.promo-bg { transition: none; }

/* Scan button: periodic ring */
.fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(79, 160, 127, .55); opacity: 0; animation: ring 6s ease-out infinite 3s; pointer-events: none; }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 22%, 100% { transform: scale(1.9); opacity: 0; } }

/* ───────── Collapsing tab bar ───────── */
.tabbar { transition: left .55s var(--ease), right .55s var(--ease), height .55s var(--ease), bottom .55s var(--ease); }
.tab span { max-height: 14px; overflow: hidden; transition: opacity .25s, max-height .5s var(--ease); }
.fab { transition: bottom .55s var(--ease), right .55s var(--ease), transform .35s var(--spring); }
.nav-compact .tabbar { right: 70px; height: 50px; bottom: calc(var(--bottom) + 4px); }
.nav-compact .tab { gap: 1px; }
.nav-compact .tab span { font-size: 10px; }
.nav-compact .tab .ic { width: 21px; height: 21px; }
.nav-compact .fab { bottom: calc(var(--bottom) + 7px); }
.tab span { transition: font-size .45s var(--ease); }
.tab .ic { transition: transform .45s var(--spring), width .45s var(--ease), height .45s var(--ease), color .25s; }

/* ───────── Pull to refresh ───────── */
.ptr { position: absolute; z-index: 25; left: 50%; top: calc(var(--top) + 64px); width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; display: grid; place-items: center; color: var(--green); background: rgba(255, 255, 255, .85); box-shadow: 0 8px 24px rgba(24, 50, 80, .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: var(--p, 0); transform: translateY(calc(var(--p, 0) * 22px - 22px)) scale(calc(.5 + var(--p, 0) * .5)) rotate(calc(var(--p, 0) * 180deg)); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.ptr.spin { animation: ptrSpin .9s var(--ease) infinite; }
@keyframes ptrSpin { from { transform: translateY(0) rotate(180deg); } to { transform: translateY(0) rotate(540deg); } }
.ptr .ic { width: 22px; height: 22px; stroke-width: 2.2; }
.confetti { position: absolute; z-index: 85; left: 50%; top: 46%; pointer-events: none; }

/* iOS home-screen app: make the layout as tall as the real screen */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) { html { height: calc(100% + env(safe-area-inset-top)); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}