/* Generated by scripts/build-screens.mjs from site/pages/screens/src/mobile.css: do not edit by hand. */
/* The mobile screens (api/screens/mobile.js): « Votre Groupe Pro », a native-feeling iOS app at 390 × 844 design px (the kit's
   phone draws the status bar over the top 54 px and the home indicator at the bottom), its store listing and its release
   console (a 1280 × 800 browser). Shared phone parts: .scr.mob and .mb-*; each screen's own parts are scoped by .scr-<name>.
   Logical properties only (Arabic is right to left). z-index stays below 5 so the kit's status bar and home indicator stay on top. */

/* ── shared phone parts ── */
.scr.mob { --bg: #f2f3f7; --sep: rgba(60, 60, 67, .14); height: calc(var(--u) * 844); font-size: calc(var(--u) * 15); letter-spacing: calc(var(--u) * -.1); }
.dark .scr.mob { --sep: rgba(255, 255, 255, .1); }
.scr.mob .num { white-space: nowrap; }
.scr.mob :where(p, figure, ul, li), .scr-release :where(p, ul, li) { margin: 0; }
.scr.mob .mb-body { position: absolute; inset: 0; padding-top: calc(var(--u) * 54); display: flex; flex-direction: column; overflow: hidden; }
.scr.mob .mb-lt { font-size: calc(var(--u) * 32); font-weight: 750; letter-spacing: calc(var(--u) * -.9); line-height: 1.12; }
.scr.mob .mb-nav { height: calc(var(--u) * 44); flex: 0 0 auto; display: flex; align-items: center; gap: calc(var(--u) * 10); padding-inline: calc(var(--u) * 6) calc(var(--u) * 16); }
.scr.mob .mb-back { display: inline-flex; align-items: center; gap: 1px; color: var(--acc-tx); font-size: calc(var(--u) * 16.5); font-weight: 500; white-space: nowrap; }
.scr.mob .mb-back .ic { width: calc(var(--u) * 26); height: calc(var(--u) * 26); stroke-width: 2.3; }
.scr.mob .mb-cb { position: relative; width: calc(var(--u) * 34); height: calc(var(--u) * 34); flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sur); color: var(--acc-tx); box-shadow: 0 1px calc(var(--u) * 2) rgba(16, 24, 40, .06); }
.scr.mob .mb-cb .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); stroke-width: 2; }
.scr.mob .mb-badge { position: absolute; top: calc(var(--u) * -3); inset-inline-end: calc(var(--u) * -4); min-width: calc(var(--u) * 18); height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 5); border-radius: calc(var(--u) * 9); background: #ff3b30; color: #fff; font: 700 calc(var(--u) * 11)/calc(var(--u) * 18) var(--sf); font-style: normal; text-align: center; box-shadow: 0 0 0 calc(var(--u) * 2) var(--bg); }
.scr.mob .mb-sec { display: flex; align-items: center; gap: calc(var(--u) * 8); margin: calc(var(--u) * 22) calc(var(--u) * 20) calc(var(--u) * 8); flex: 0 0 auto; }
.scr.mob .mb-sh { font-size: calc(var(--u) * 20); font-weight: 750; letter-spacing: calc(var(--u) * -.4); line-height: 1.2; white-space: nowrap; }
.scr.mob .mb-sec.sm { margin-top: calc(var(--u) * 18); }
.scr.mob .mb-sec.sm .mb-sh { font-size: calc(var(--u) * 13); font-weight: 600; letter-spacing: calc(var(--u) * .2); color: var(--tx2); text-transform: uppercase; }
[lang="ar"] .scr.mob .mb-sec.sm .mb-sh { text-transform: none; letter-spacing: 0; font-size: calc(var(--u) * 14); }
.scr.mob .mb-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--u) * 22); height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 11); background: var(--line2); color: var(--tx2); font-size: calc(var(--u) * 12); font-weight: 700; }
.scr.mob .mb-sec.sm .mb-cnt { height: calc(var(--u) * 20); min-width: calc(var(--u) * 30); font-size: calc(var(--u) * 11.5); background: var(--acc-soft); color: var(--acc-tx); }
.scr.mob .mb-link { margin-inline-start: auto; color: var(--acc-tx); font-size: calc(var(--u) * 15); font-weight: 500; white-space: nowrap; }
.scr.mob .mb-link.sm { font-size: calc(var(--u) * 14); }
/* an inset grouped list */
.scr.mob .mb-list { margin-inline: calc(var(--u) * 16); background: var(--sur); border-radius: calc(var(--u) * 14); overflow: hidden; flex: 0 0 auto; box-shadow: 0 1px 1px rgba(16, 24, 40, .03); }
.scr.mob .mb-li { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 12); min-height: calc(var(--u) * 62); padding: calc(var(--u) * 10) calc(var(--u) * 14); }
.scr.mob .mb-li + .mb-li::before, .scr.mob .mb-kv + .mb-kv::before { content: ""; position: absolute; top: 0; inset-inline: calc(var(--u) * 62) 0; height: 1px; background: var(--sep); }
.scr.mob .mb-li-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.scr.mob .mb-li-h { font-size: calc(var(--u) * 15.5); font-weight: 600; line-height: 1.3; letter-spacing: calc(var(--u) * -.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr.mob .mb-li-s { font-size: calc(var(--u) * 13); color: var(--tx2); line-height: 1.35; margin-top: calc(var(--u) * 2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr.mob .mb-tile { width: calc(var(--u) * 36); height: calc(var(--u) * 36); flex: 0 0 auto; border-radius: calc(var(--u) * 10); display: flex; align-items: center; justify-content: center; background: var(--acc-soft); color: var(--acc-tx); }
.scr.mob .mb-tile .ic { width: calc(var(--u) * 19); height: calc(var(--u) * 19); stroke-width: 1.9; }
.scr.mob .mb-tile.warn { background: var(--warn-soft); color: var(--warn); } .scr.mob .mb-tile.info { background: var(--info-soft); color: var(--info); }
.scr.mob .mb-tile.ok { background: var(--ok-soft); color: var(--ok); } .scr.mob .mb-tile.gray { background: var(--line2); color: var(--tx2); }
.scr.mob .mb-tile.ok .ic { stroke-width: 2.4; }
.scr.mob .mb-chev { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: 0 0 auto; color: var(--tx3); stroke-width: 2.4; opacity: .8; }
.scr.mob .mb-li .bd { flex: 0 0 auto; }
.scr.mob .mb-amt { font-size: calc(var(--u) * 14.5); font-weight: 650; color: var(--tx); flex: 0 0 auto; }
.scr.mob .mb-pbtn { flex: 0 0 auto; height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 14); border-radius: calc(var(--u) * 15); display: inline-flex; align-items: center; background: var(--acc); color: #fff; font-size: calc(var(--u) * 13.5); font-weight: 650; }
/* label / value rows */
.scr.mob .mb-kv { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 12); min-height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 15); }
.scr.mob .mb-kv + .mb-kv::before { inset-inline-start: calc(var(--u) * 16); }
.scr.mob .mb-kv > span { color: var(--tx2); white-space: nowrap; }
.scr.mob .mb-kv > b { margin-inline-start: auto; font-weight: 550; text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* buttons */
.scr.mob .mb-btn { position: relative; height: calc(var(--u) * 52); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 20); border-radius: calc(var(--u) * 14); font-size: calc(var(--u) * 16.5); font-weight: 650; white-space: nowrap; overflow: hidden; background: var(--line2); color: var(--tx); }
.scr.mob .mb-btn .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); stroke-width: 2.2; }
.scr.mob .mb-btn.pri { background: var(--acc); color: #fff; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * -10) rgba(11, 107, 85, .8); }
.scr.mob .mb-btn.okb { background: var(--ok-soft); color: var(--ok); }
.scr.mob .mb-btn.sec { background: var(--sur); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line); }
.scr.mob .mb-x { width: calc(var(--u) * 30); height: calc(var(--u) * 30); flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--line2); color: var(--tx2); }
.scr.mob .mb-x .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); stroke-width: 2.6; }
/* the tab bar */
.scr.mob .mb-tabs { position: absolute; z-index: 4; inset-inline: 0; bottom: 0; height: calc(var(--u) * 84); padding: calc(var(--u) * 7) calc(var(--u) * 6) 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start;
  background: rgba(249, 249, 251, .82); -webkit-backdrop-filter: blur(calc(var(--u) * 18)) saturate(1.8); backdrop-filter: blur(calc(var(--u) * 18)) saturate(1.8); border-top: 1px solid rgba(0, 0, 0, .1); }
.scr.mob .mb-tab { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); min-width: 0; color: #8b8f98; font-size: calc(var(--u) * 10.5); font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.scr.mob .mb-tab .ic { width: calc(var(--u) * 26); height: calc(var(--u) * 26); stroke-width: 1.7; }
.scr.mob .mb-tab.on { color: var(--acc); }
.scr.mob .mb-tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* a state change: two elements in one cell (without .in, the new one only) */
.scr.mob .mb-swap { display: inline-grid; vertical-align: middle; }
.scr.mob .mb-swap > .mb-was, .scr.mob .mb-swap > .mb-now { grid-area: 1 / 1; min-width: 0; }
.scr.mob .mb-swap > .mb-was { visibility: hidden; opacity: 0; }
.in .scr.mob .mb-swap > .mb-was { animation: mb-out .35s ease var(--d, 3s) both; }
.in .scr.mob .mb-swap > .mb-now { animation: mb-in .5s cubic-bezier(.2, .9, .3, 1.2) calc(var(--d, 3s) + .15s) both; }
/* before the frame comes into view (.js without .in), the states that will change are hidden; with reduced motion the kit forces
   opacity 1, so the final state shows */
.js .dev:not(.in) .scr.mob .mb-swap, .js .dev:not(.in) .scr-app-pay .py-sheet, .js .dev:not(.in) .scr-app-pay .py-dim { opacity: 0; }
@keyframes mb-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; transform: scale(.96); } }
@keyframes mb-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* ── 1. app-home ── */
.scr-app-home .hm-head { display: flex; align-items: flex-end; gap: calc(var(--u) * 12); padding: calc(var(--u) * 2) calc(var(--u) * 20) 0; }
.scr-app-home .hm-date { font-size: calc(var(--u) * 13); font-weight: 650; color: var(--tx3); text-transform: uppercase; letter-spacing: calc(var(--u) * .3); margin-bottom: calc(var(--u) * 2); }
[lang="ar"] .scr-app-home .hm-date { text-transform: none; letter-spacing: 0; }
.scr-app-home .hm-head .mb-cb { width: calc(var(--u) * 40); height: calc(var(--u) * 40); color: var(--tx); margin-bottom: calc(var(--u) * 2); }
.scr-app-home .hm-head .mb-cb .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.scr-app-home .hm-head .av { margin-bottom: calc(var(--u) * 2); }
.scr-app-home .hm-co { display: flex; align-items: center; gap: calc(var(--u) * 7); margin: calc(var(--u) * 6) calc(var(--u) * 20) 0; font-size: calc(var(--u) * 15); font-weight: 550; color: var(--tx2); }
.scr-app-home .hm-co .vg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.scr-app-home .hm-co > .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); stroke-width: 2.4; color: var(--tx3); }
.scr-app-home .hm-card { position: relative; flex: 0 0 auto; margin: calc(var(--u) * 12) calc(var(--u) * 16) 0; padding: calc(var(--u) * 14) calc(var(--u) * 18) calc(var(--u) * 16); border-radius: calc(var(--u) * 22); color: #fff; overflow: hidden;
  background: radial-gradient(130% 120% at 100% 0%, rgba(95, 217, 182, .32) 0%, rgba(95, 217, 182, 0) 52%), linear-gradient(155deg, #10806a 0%, #0b5446 52%, #06302a 100%);
  box-shadow: 0 calc(var(--u) * 22) calc(var(--u) * 34) calc(var(--u) * -22) rgba(6, 48, 42, .9), 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(6, 48, 42, .18); }
.scr-app-home .hm-card::before { content: ""; position: absolute; inset-inline-end: calc(var(--u) * -70); top: calc(var(--u) * -96); width: calc(var(--u) * 240); height: calc(var(--u) * 240); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 calc(var(--u) * 30) rgba(255, 255, 255, .035), 0 0 0 calc(var(--u) * 60) rgba(255, 255, 255, .025); pointer-events: none; }
.scr-app-home .hm-card > * { position: relative; }
.scr-app-home .hm-card-top { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--u) * 14); font-weight: 600; color: rgba(255, 255, 255, .78); }
.scr-app-home .hm-id { font-size: calc(var(--u) * 12.5); font-weight: 600; padding: calc(var(--u) * 3) calc(var(--u) * 8); border-radius: calc(var(--u) * 7); background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9); letter-spacing: calc(var(--u) * .2); }
.scr-app-home .hm-amt { display: flex; align-items: baseline; gap: calc(var(--u) * 7); margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 34); font-weight: 750; letter-spacing: calc(var(--u) * -1.1); line-height: 1.1; }
.scr-app-home .hm-cur { font-size: calc(var(--u) * 17); font-weight: 650; letter-spacing: 0; color: rgba(255, 255, 255, .72); }
.scr-app-home .hm-card-mid { display: flex; align-items: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 13); }
.scr-app-home .hm-pill { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 13); background: rgba(255, 255, 255, .95); color: #6b3d00; font-weight: 650; white-space: nowrap; }
.scr-app-home .hm-pill i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: #f59e0b; }
.scr-app-home .hm-due { color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.scr-app-home .hm-card-bot { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 11); font-size: calc(var(--u) * 12.5); color: rgba(255, 255, 255, .72); }
.scr-app-home .hm-card-bot .num { color: #fff; font-weight: 600; }
.scr-app-home .hm-bar { display: block; height: calc(var(--u) * 5); margin-top: calc(var(--u) * 7); border-radius: calc(var(--u) * 3); background: rgba(255, 255, 255, .18); overflow: hidden; }
.scr-app-home .hm-bar i { display: block; height: 100%; border-radius: calc(var(--u) * 3); background: linear-gradient(90deg, #7ee8c8, #ffffff); }
.scr-app-home .hm-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: calc(var(--u) * 14) calc(var(--u) * 12) 0; flex: 0 0 auto; }
.scr-app-home .hm-act { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 12.5); font-weight: 600; color: var(--tx); white-space: nowrap; }
.scr-app-home .hm-act .c { width: calc(var(--u) * 54); height: calc(var(--u) * 54); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sur); color: var(--acc-tx); box-shadow: 0 1px calc(var(--u) * 2) rgba(16, 24, 40, .06), 0 calc(var(--u) * 8) calc(var(--u) * 16) calc(var(--u) * -10) rgba(16, 24, 40, .18); }
.scr-app-home .hm-act .c .ic { width: calc(var(--u) * 24); height: calc(var(--u) * 24); stroke-width: 1.9; }
.scr-app-home .hm-act.pri .c { background: var(--acc); color: #fff; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 18) calc(var(--u) * -10) rgba(11, 107, 85, .9); }
.scr-app-home .mb-sec { margin-top: calc(var(--u) * 16); }
.scr-app-home .mb-li { min-height: calc(var(--u) * 58); padding-block: calc(var(--u) * 8); }
.scr-app-home .mb-li .avs .av { box-shadow: 0 0 0 calc(var(--u) * 2) var(--sur); }

/* ── 2. app-pay ── */
.scr-app-pay .py-head { padding: calc(var(--u) * 4) calc(var(--u) * 20) 0; }
.scr-app-pay .py-from { display: flex; align-items: center; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 13.5); font-weight: 600; color: var(--tx2); }
.scr-app-pay .py-from .vg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.scr-app-pay .py-title { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 24); font-weight: 750; letter-spacing: calc(var(--u) * -.6); line-height: 1.2; }
.scr-app-pay .py-amt { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 38); font-weight: 750; letter-spacing: calc(var(--u) * -1.3); line-height: 1.1; }
.scr-app-pay .py-head .row { margin-top: calc(var(--u) * 12); }
.scr-app-pay .py-head .bd { height: calc(var(--u) * 26); font-size: calc(var(--u) * 12.5); border-radius: calc(var(--u) * 8); }
.scr-app-pay .py-ht { font-size: calc(var(--u) * 12.5); color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.scr-app-pay .py-det { margin-top: calc(var(--u) * 20); }
.scr-app-pay .py-cta { position: absolute; inset-inline: calc(var(--u) * 16); bottom: calc(var(--u) * 34); }
.scr-app-pay .py-dim { position: absolute; z-index: 3; inset: 0; background: rgba(8, 12, 16, .4); }
.scr-app-pay .py-sheet { position: absolute; z-index: 4; inset-inline: 0; bottom: 0; padding: calc(var(--u) * 8) calc(var(--u) * 20) calc(var(--u) * 34); border-radius: calc(var(--u) * 30) calc(var(--u) * 30) 0 0; background: var(--sur); box-shadow: 0 calc(var(--u) * -10) calc(var(--u) * 30) rgba(0, 0, 0, .18); display: flex; flex-direction: column; }
.scr-app-pay .py-grab { display: block; width: calc(var(--u) * 38); height: calc(var(--u) * 5); margin: 0 auto calc(var(--u) * 10); border-radius: calc(var(--u) * 3); background: rgba(60, 60, 67, .25); }
.scr-app-pay .py-st { display: grid; }
.scr-app-pay .py-face, .scr-app-pay .py-done { display: flex; flex-direction: column; }
.scr-app-pay .py-sh-h { display: flex; align-items: center; gap: calc(var(--u) * 10); min-height: calc(var(--u) * 36); }
.scr-app-pay .py-sh-h b { flex: 1 1 auto; font-size: calc(var(--u) * 18); font-weight: 700; letter-spacing: calc(var(--u) * -.3); }
.scr-app-pay .py-who { display: flex; align-items: center; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 14); }
.scr-app-pay .py-who .vg { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.scr-app-pay .py-sh-amt { margin: calc(var(--u) * 14) 0 calc(var(--u) * 8); font-size: calc(var(--u) * 30); font-weight: 750; letter-spacing: -1px; line-height: 1.1; }
.scr-app-pay .py-sheet .mb-kv { padding: 0; min-height: calc(var(--u) * 44); font-size: calc(var(--u) * 14.5); }
.scr-app-pay .py-sheet .mb-kv::before { inset-inline-start: 0; }
.scr-app-pay .py-sheet .mb-kv:first-of-type::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--sep); }
.scr-app-pay .py-fid { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 22); font-size: calc(var(--u) * 15); font-weight: 600; color: var(--tx); }
.scr-app-pay .py-face-ic { position: relative; width: calc(var(--u) * 64); height: calc(var(--u) * 64); display: flex; align-items: center; justify-content: center; color: var(--acc); }
.scr-app-pay .py-face-ic .ic { width: calc(var(--u) * 64); height: calc(var(--u) * 64); stroke-width: 1.4; }
.scr-app-pay .py-face-ic::after { content: ""; position: absolute; inset: calc(var(--u) * -10); border-radius: calc(var(--u) * 22); border: calc(var(--u) * 2) solid var(--acc); opacity: 0; }
.scr-app-pay .py-done { align-items: center; text-align: center; }
.scr-app-pay .py-ok { width: calc(var(--u) * 76); height: calc(var(--u) * 76); margin-top: calc(var(--u) * 10); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ok); color: #fff; box-shadow: 0 0 0 calc(var(--u) * 10) var(--ok-soft); }
.scr-app-pay .py-ok .ic { width: calc(var(--u) * 40); height: calc(var(--u) * 40); stroke-width: 3; }
.scr-app-pay .py-ok-t { margin-top: calc(var(--u) * 22); font-size: calc(var(--u) * 24); font-weight: 750; letter-spacing: calc(var(--u) * -.6); }
.scr-app-pay .py-ok-s { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 14); color: var(--tx2); }
.scr-app-pay .py-sync { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 32); margin: calc(var(--u) * 14) 0 calc(var(--u) * 12); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 16); background: var(--acc-soft); color: var(--acc-tx); font-size: calc(var(--u) * 13.5); font-weight: 600; white-space: nowrap; }
.scr-app-pay .py-sync .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); stroke-width: 2; }
.scr-app-pay .py-done .mb-kv { align-self: stretch; text-align: start; }
.scr-app-pay .py-done .mb-btn { align-self: stretch; margin-top: calc(var(--u) * 16); }
/* motion: the pay button is pressed, the sheet slides up, Face ID pulses, the success state pops (kit .mb-swap, delay .d37) */
.in .scr-app-pay .py-cta .mb-btn { animation: py-press .35s ease .7s both; }
.in .scr-app-pay .py-dim { animation: scr-fade .45s ease 1s both; }
.in .scr-app-pay .py-sheet { animation: py-sheet .6s cubic-bezier(.2, .85, .25, 1) 1s both; }
.in .scr-app-pay .py-face-ic .ic { animation: py-pulse .9s ease-in-out 1.8s 2 both; }
.in .scr-app-pay .py-face-ic::after { animation: py-scan .9s ease-out 1.8s 2; }
.in .scr-app-pay .py-ok .ic path { stroke-dasharray: 30; animation: py-check .5s ease 4.05s both; }
.in .scr-app-pay .py-sync { animation: scr-up .5s ease 4.4s both; }
@keyframes py-press { 50% { transform: scale(.96); filter: brightness(.9); } }
@keyframes py-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes py-pulse { 50% { transform: scale(1.08); opacity: .7; } }
@keyframes py-scan { from { opacity: .6; transform: scale(.7); } to { opacity: 0; transform: scale(1.15); } }
@keyframes py-check { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }

/* ── 3. app-sign ── */
.scr-app-sign .sg-head { padding: calc(var(--u) * 2) calc(var(--u) * 20) 0; }
.scr-app-sign .sg-tags { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.scr-app-sign .sg-meta { font-size: calc(var(--u) * 12.5); color: var(--tx3); white-space: nowrap; }
.scr-app-sign .sg-title { margin-top: calc(var(--u) * 7); font-size: calc(var(--u) * 26); font-weight: 750; letter-spacing: calc(var(--u) * -.8); line-height: 1.15; }
.scr-app-sign .sg-sub { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 14); color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-app-sign .sg-strip { display: flex; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 12); padding-inline: calc(var(--u) * 20); overflow: hidden; flex: 0 0 auto; }
.scr-app-sign .sg-th { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 5); flex: 0 0 auto; }
.scr-app-sign .sg-pg { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 3.5); width: calc(var(--u) * 44); height: calc(var(--u) * 56); padding: calc(var(--u) * 7) calc(var(--u) * 6); border-radius: calc(var(--u) * 5); background: var(--sur); box-shadow: 0 0 0 1px var(--line), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(16, 24, 40, .06); }
.scr-app-sign .sg-pg i { display: block; height: calc(var(--u) * 2); border-radius: 1px; background: #d5d9e0; }
.scr-app-sign .sg-pg i:first-child { width: 60%; height: calc(var(--u) * 3); background: #9aa1ab; margin-bottom: calc(var(--u) * 2); }
.scr-app-sign .sg-pg i:nth-child(3) { width: 86%; } .scr-app-sign .sg-pg i:nth-child(5) { width: 72%; } .scr-app-sign .sg-pg i:nth-child(6) { width: 92%; }
.scr-app-sign .sg-pg.p2 i:nth-child(4) { height: calc(var(--u) * 8); background: #e3e6eb; }
.scr-app-sign .sg-pg.p3 i:nth-child(2) { width: 40%; } .scr-app-sign .sg-pg.p3 i:nth-child(5) { height: calc(var(--u) * 10); border: 1px solid #d5d9e0; background: transparent; }
.scr-app-sign .sg-pg.p4 i:first-child { width: 80%; }
.scr-app-sign .sg-pg.p5 i:nth-child(4) { width: 50%; margin-top: calc(var(--u) * 8); height: 1px; background: #9aa1ab; } .scr-app-sign .sg-pg.p5 i:nth-child(5) { width: 50%; height: 1px; margin-inline-start: auto; margin-top: -1px; background: #9aa1ab; }
.scr-app-sign .sg-pg.p5 i:nth-child(6) { display: none; }
.scr-app-sign .sg-th.on .sg-pg { box-shadow: 0 0 0 calc(var(--u) * 2) var(--acc), 0 calc(var(--u) * 4) calc(var(--u) * 10) calc(var(--u) * -4) rgba(11, 107, 85, .5); }
.scr-app-sign .sg-pn { font-size: calc(var(--u) * 11.5); font-weight: 600; color: var(--tx3); }
.scr-app-sign .sg-th.on .sg-pn { color: var(--acc-tx); }
.scr-app-sign .sg-page { margin: calc(var(--u) * 12) calc(var(--u) * 16) 0; padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 14); border-radius: calc(var(--u) * 16); background: var(--sur); flex: 0 0 auto; }
.scr-app-sign .sg-art { display: flex; align-items: baseline; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 14); }
.scr-app-sign .sg-art b { font-weight: 700; flex: 1 1 auto; }
.scr-app-sign .sg-art span { font-size: calc(var(--u) * 12); color: var(--tx3); white-space: nowrap; }
.scr-app-sign .sg-txt { margin-top: calc(var(--u) * 5); font-size: calc(var(--u) * 13); line-height: 1.45; color: var(--tx2); }
.scr-app-sign .sg-pad { position: relative; height: calc(var(--u) * 108); margin-top: calc(var(--u) * 10); border-radius: calc(var(--u) * 12); background: #fbfbf8; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.scr-app-sign .sg-pad-l { position: absolute; top: calc(var(--u) * 9); inset-inline-start: calc(var(--u) * 12); font-size: calc(var(--u) * 11.5); font-weight: 600; color: var(--tx3); }
.scr-app-sign .sg-clear { position: absolute; top: calc(var(--u) * 8); inset-inline-end: calc(var(--u) * 12); font-size: calc(var(--u) * 12.5); font-weight: 600; color: var(--acc-tx); }
.scr-app-sign .sg-sig { position: absolute; inset-inline-start: calc(var(--u) * 46); top: calc(var(--u) * 14); width: calc(var(--u) * 224); height: calc(var(--u) * 80); direction: ltr; overflow: visible; }
.scr-app-sign .sg-sig path { fill: none; stroke: #13233f; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.scr-app-sign .sg-sig path.s5 { stroke-width: 2; }
.scr-app-sign .sg-x { position: absolute; inset-inline-start: calc(var(--u) * 14); bottom: calc(var(--u) * 19); color: var(--tx3); }
.scr-app-sign .sg-x .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); stroke-width: 2.4; }
.scr-app-sign .sg-line { position: absolute; inset-inline: calc(var(--u) * 14); bottom: calc(var(--u) * 17); height: 1px; background: #c9ced6; }
.scr-app-sign .sg-list { margin-top: 0; }
.scr-app-sign .mb-sec.sm { margin: calc(var(--u) * 14) calc(var(--u) * 20) calc(var(--u) * 7); }
.scr-app-sign .sg-sn { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 11); min-height: calc(var(--u) * 47); padding: calc(var(--u) * 5) calc(var(--u) * 14); }
.scr-app-sign .sg-sn + .sg-sn::before { content: ""; position: absolute; top: 0; inset-inline: calc(var(--u) * 53) 0; height: 1px; background: var(--sep); }
.scr-app-sign .sg-sn .mb-li-h { font-size: calc(var(--u) * 14.5); }
.scr-app-sign .sg-sn .mb-li-s { font-size: calc(var(--u) * 12.5); margin-top: 0; }
.scr-app-sign .sg-ok { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 13); font-weight: 600; color: var(--ok); white-space: nowrap; }
.scr-app-sign .sg-ok .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); stroke-width: 2.8; }
.scr-app-sign .sg-wait { display: inline-flex; align-items: center; height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 9); border-radius: calc(var(--u) * 12); background: var(--warn-soft); color: var(--warn); font-size: calc(var(--u) * 12.5); font-weight: 650; white-space: nowrap; }
.scr-app-sign .sg-sn .mb-swap { justify-items: end; }
.scr-app-sign .sg-bar { position: absolute; z-index: 4; inset-inline: 0; bottom: 0; padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 34); background: rgba(242, 243, 247, .86); -webkit-backdrop-filter: blur(calc(var(--u) * 16)); backdrop-filter: blur(calc(var(--u) * 16)); border-top: 1px solid var(--sep); }
.scr-app-sign .sg-bar .mb-swap { display: grid; }
.scr-app-sign .sg-tap { position: absolute; top: 50%; left: 50%; width: calc(var(--u) * 60); height: calc(var(--u) * 60); margin: calc(var(--u) * -30) 0 0 calc(var(--u) * -30); border-radius: 50%; background: rgba(255, 255, 255, .5); opacity: 0; }
/* motion: the signature is drawn stroke by stroke, the button is tapped, then « Signé · 4/4 » (swaps .d33 → .d36) */
.js .dev:not(.in) .scr-app-sign .sg-sig path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.in .scr-app-sign .sg-sig path { stroke-dasharray: 1; animation: sg-draw .5s linear var(--sd, 1s) both; }
.in .scr-app-sign .sg-sig .s0 { animation-duration: 1.1s; --sd: .9s; animation-timing-function: cubic-bezier(.4, .1, .6, .9); }
.in .scr-app-sign .sg-sig .s1 { --sd: 2.05s; animation-duration: .18s; } .in .scr-app-sign .sg-sig .s2 { --sd: 2.28s; animation-duration: .18s; }
.in .scr-app-sign .sg-sig .s3 { --sd: 2.5s; animation-duration: .2s; } .in .scr-app-sign .sg-sig .s4 { --sd: 2.75s; animation-duration: .05s; }
.in .scr-app-sign .sg-sig .s5 { --sd: 2.85s; animation-duration: .3s; }
.in .scr-app-sign .sg-tap { animation: sg-tap .5s ease-out 3.1s both; }
@keyframes sg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sg-tap { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(4); } }

/* ── 4. app-offline (dark) ── */
.dark .scr.mob.scr-app-offline { --sep: rgba(255, 255, 255, .08); }
.scr-app-offline .mb-cb { background: var(--sur); color: var(--acc-tx); box-shadow: none; }
.scr-app-offline .of-ban { margin: calc(var(--u) * 4) calc(var(--u) * 16) 0; flex: 0 0 auto; }
.scr-app-offline .of-ban .mb-swap { display: grid; }
.scr-app-offline .of-b { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 14); border-radius: calc(var(--u) * 13); font-size: calc(var(--u) * 14); white-space: nowrap; }
.scr-app-offline .of-b .sp { overflow: hidden; text-overflow: ellipsis; }
.scr-app-offline .of-b b { font-weight: 700; }
.scr-app-offline .of-b .ic { width: calc(var(--u) * 19); height: calc(var(--u) * 19); stroke-width: 2.1; }
.scr-app-offline .of-b.off { background: rgba(240, 166, 58, .16); color: #f6b85a; box-shadow: inset 0 0 0 1px rgba(240, 166, 58, .28); }
.scr-app-offline .of-b.on { background: rgba(52, 192, 107, .16); color: #4fd383; box-shadow: inset 0 0 0 1px rgba(52, 192, 107, .3); }
.scr-app-offline .of-b .of-bk { width: calc(var(--u) * 18); height: calc(var(--u) * 18); stroke-width: 2.8; }
.scr-app-offline .of-spin { width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%; border: calc(var(--u) * 2) solid rgba(246, 184, 90, .3); border-top-color: #f6b85a; flex: 0 0 auto; }
.in .scr-app-offline .of-spin { animation: of-rot .9s linear infinite; }
@keyframes of-rot { to { transform: rotate(360deg); } }
.scr-app-offline .of-head { padding: calc(var(--u) * 14) calc(var(--u) * 20) 0; }
.scr-app-offline .of-cap { font-size: calc(var(--u) * 12.5); font-weight: 600; color: var(--tx3); }
.scr-app-offline .of-title { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 23); font-weight: 750; letter-spacing: calc(var(--u) * -.6); white-space: nowrap; line-height: 1.15; }
.scr-app-offline .of-meta { display: flex; align-items: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 13.5); color: var(--tx2); white-space: nowrap; }
.scr-app-offline .of-meta .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--tx3); }
.scr-app-offline .of-sep { width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: 50%; background: var(--tx3); margin: 0 calc(var(--u) * 4); }
.scr-app-offline .of-meta .av { margin-inline-end: 1px; }
.scr-app-offline .of-prog { display: flex; align-items: baseline; justify-content: space-between; margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 13); }
.scr-app-offline .of-pl { color: var(--tx2); font-weight: 500; }
.scr-app-offline .of-pv { font-weight: 700; color: var(--acc-tx); }
.scr-app-offline .of-bar { display: block; height: calc(var(--u) * 6); margin-top: calc(var(--u) * 7); border-radius: calc(var(--u) * 3); background: var(--line); overflow: hidden; }
.scr-app-offline .of-bar i { display: block; height: 100%; border-radius: calc(var(--u) * 3); background: var(--acc); }
.scr-app-offline .of-list { margin-top: calc(var(--u) * 16); }
.scr-app-offline .of-it { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 12); min-height: calc(var(--u) * 58); padding: calc(var(--u) * 8) calc(var(--u) * 14); }
.scr-app-offline .of-it + .of-it::before { content: ""; position: absolute; top: 0; inset-inline: calc(var(--u) * 50) 0; height: 1px; background: var(--sep); }
.scr-app-offline .of-it .mb-li-h { font-size: calc(var(--u) * 15); }
.scr-app-offline .of-it .mb-li-s { font-size: calc(var(--u) * 12.5); }
.scr-app-offline .of-ck { width: calc(var(--u) * 24); height: calc(var(--u) * 24); flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: calc(var(--u) * 1.5) solid #4a515c; }
.scr-app-offline .of-it.on .of-ck { border: 0; background: var(--acc); color: #04231b; }
.scr-app-offline .of-ck .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); stroke-width: 3.2; }
.scr-app-offline .of-it.on .mb-li-h { color: var(--tx); }
.scr-app-offline .of-ph { width: calc(var(--u) * 30); height: calc(var(--u) * 30); flex: 0 0 auto; border-radius: calc(var(--u) * 7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.scr-app-offline .of-ph + .of-ph { margin-inline-start: calc(var(--u) * -6); box-shadow: 0 0 0 calc(var(--u) * 2) var(--sur), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.scr-app-offline .of-ph.pa { background: linear-gradient(180deg, #8fb3d9 0 38%, transparent 38%), repeating-linear-gradient(90deg, #b8bec7 0 calc(var(--u) * 3), #7d858f calc(var(--u) * 3) calc(var(--u) * 9)), #6f7781; }
.scr-app-offline .of-ph.pb { background: repeating-linear-gradient(135deg, #f2a516 0 calc(var(--u) * 5), #1d1f22 calc(var(--u) * 5) calc(var(--u) * 10)); }
.scr-app-offline .of-ph.pc { background: radial-gradient(circle at 50% 58%, #e0473f 0 30%, transparent 31%), linear-gradient(180deg, #5d6570, #3c424a); }
.scr-app-offline .of-ph.pd { background: linear-gradient(180deg, transparent 0 20%, #c5ccd4 20% 80%, transparent 80%), linear-gradient(90deg, #39404a 0 20%, #4b535e 20% 80%, #39404a 80%); }
.scr-app-offline .of-pend, .scr-app-offline .of-sync { width: calc(var(--u) * 28); height: calc(var(--u) * 28); display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.scr-app-offline .of-pend { background: rgba(240, 166, 58, .16); color: #f6b85a; }
.scr-app-offline .of-sync { color: var(--tx3); }
.scr-app-offline .of-it .mb-swap .of-sync { color: #4fd383; background: rgba(52, 192, 107, .14); }
.scr-app-offline .of-pend .ic, .scr-app-offline .of-sync .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); stroke-width: 2; }
.scr-app-offline .of-sigl { margin-top: calc(var(--u) * 14); }
.scr-app-offline .of-bar2 { position: absolute; z-index: 4; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 34); background: rgba(11, 13, 16, .86); -webkit-backdrop-filter: blur(calc(var(--u) * 16)); backdrop-filter: blur(calc(var(--u) * 16)); border-top: 1px solid var(--sep); }
.scr-app-offline .of-bar2 .mb-btn.sec { background: var(--sur2); box-shadow: inset 0 0 0 1px var(--line); padding: 0 calc(var(--u) * 18); }
.scr-app-offline .mb-btn.pri { color: #04231b; box-shadow: none; }

/* ── 5. store ── */
.scr.mob.scr-store { --bg: #ffffff; }
.scr-store .st-head { display: flex; gap: calc(var(--u) * 16); padding: calc(var(--u) * 6) calc(var(--u) * 20) 0; }
.scr-store .st-icon { width: calc(var(--u) * 100); height: calc(var(--u) * 100); flex: 0 0 auto; border-radius: calc(var(--u) * 24); display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, #2bc49c 0%, rgba(43, 196, 156, 0) 60%), linear-gradient(160deg, #0f8f72, #064a3b); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 calc(var(--u) * 6) calc(var(--u) * 16) calc(var(--u) * -8) rgba(6, 74, 59, .6); }
.scr-store .st-icon .vg { width: calc(var(--u) * 62); height: calc(var(--u) * 62); }
.scr-store .st-icon .vg rect { fill: transparent; }
.scr-store .st-icon .vg path { stroke-width: 2.4; }
.scr-store .st-id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.scr-store .st-name { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 22); font-weight: 750; letter-spacing: calc(var(--u) * -.5); line-height: 1.2; }
.scr-store .st-id > p:not(.st-get):not(.st-name) { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 14); line-height: 1.35; color: var(--tx2); }
.scr-store .st-get { display: flex; align-items: center; gap: calc(var(--u) * 10); margin-top: auto; }
.scr-store .st-btn { display: inline-flex; align-items: center; height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 22); border-radius: calc(var(--u) * 16); background: var(--acc); color: #fff; font-size: calc(var(--u) * 15); font-weight: 700; }
.scr-store .st-iap { font-size: calc(var(--u) * 11); color: var(--tx3); line-height: 1.2; }
.scr-store .st-share { width: calc(var(--u) * 22); height: calc(var(--u) * 22); color: var(--acc-tx); }
.scr-store .st-info { display: flex; margin: calc(var(--u) * 16) 0 0 calc(var(--u) * 20); padding: 0; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); overflow: hidden; flex: 0 0 auto; }
[dir="rtl"] .scr-store .st-info { margin: calc(var(--u) * 16) calc(var(--u) * 20) 0 0; }
.scr-store .st-info > div { position: relative; flex: 0 0 calc(var(--u) * 88); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 9) 0 calc(var(--u) * 8); text-align: center; white-space: nowrap; }
.scr-store .st-info > div + div::before { content: ""; position: absolute; inset-inline-start: 0; top: calc(var(--u) * 16); bottom: calc(var(--u) * 16); width: 1px; background: var(--sep); }
.scr-store .st-info span { font-size: calc(var(--u) * 11); font-weight: 600; color: var(--tx3); }
.scr-store .st-info b { font-size: calc(var(--u) * 20); font-weight: 750; color: var(--tx2); line-height: 1.1; letter-spacing: calc(var(--u) * -.3); }
.scr-store .st-info em { font-style: normal; font-size: calc(var(--u) * 12); color: var(--tx3); }
.scr-store .st-stars { display: flex; gap: 1px; color: var(--tx2); }
.scr-store .st-stars .ic { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.scr-store .st-cat { width: calc(var(--u) * 22); height: calc(var(--u) * 22); color: var(--tx2); stroke-width: 2; }
.scr-store .st-shots { display: flex; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 14); padding-inline: calc(var(--u) * 20); overflow: hidden; flex: 0 0 auto; }
.scr-store .st-shot { position: relative; flex: 0 0 calc(var(--u) * 156); height: calc(var(--u) * 304); margin: 0; padding: calc(var(--u) * 14) calc(var(--u) * 12) 0; border-radius: calc(var(--u) * 18); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; }
.scr-store .st-shot.s-a { background: linear-gradient(170deg, #0f8f72, #07493b); }
.scr-store .st-shot.s-b { background: linear-gradient(170deg, #1d2430, #0b0e13); }
.scr-store .st-shot.s-c { background: linear-gradient(170deg, #e7f4ef, #cfe9df); }
.scr-store .st-shot figcaption { min-height: calc(var(--u) * 42); font-size: calc(var(--u) * 13); font-weight: 750; line-height: 1.3; letter-spacing: calc(var(--u) * -.2); text-align: center; color: #fff; }
.scr-store .st-shot.s-c figcaption { color: #0b3d31; }
.scr-store .st-ph { container-type: inline-size; --u: calc(100cqw / 390); --dw: 390; position: relative; width: 84%; margin-top: calc(var(--u) * 12); padding: 3.1%; border-radius: 15.5% / 7.4%; background: #0c0c0e; box-shadow: inset 0 0 0 1px #3a3a3e, 0 calc(var(--u) * 14) calc(var(--u) * 26) calc(var(--u) * -12) rgba(0, 0, 0, .55); flex: 0 0 auto; text-align: start; }
.scr-store .st-ph .scr *, .scr-store .st-ph .scr *::before, .scr-store .st-ph .scr *::after { animation: none !important; }
.scr-store .st-new { margin: calc(var(--u) * 14) calc(var(--u) * 20) 0; flex: 0 0 auto; }
.scr-store .st-new-h { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.scr-store .st-new-h .mb-sh { font-size: calc(var(--u) * 20); font-weight: 750; letter-spacing: calc(var(--u) * -.4); }
.scr-store .st-ver { display: flex; justify-content: space-between; margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 13); color: var(--tx3); }
.scr-store .st-ul { margin-top: calc(var(--u) * 8); display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.scr-store .st-ul li { position: relative; padding-inline-start: calc(var(--u) * 14); font-size: calc(var(--u) * 14); line-height: 1.38; color: var(--tx); }
.scr-store .st-ul li::before { content: ""; position: absolute; inset-inline-start: 1px; top: calc(var(--u) * 8); width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: var(--acc); }
.scr-store .st-foot { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); margin: auto calc(var(--u) * 20) calc(var(--u) * 34); padding-top: calc(var(--u) * 12); font-size: calc(var(--u) * 12.5); color: var(--tx3); white-space: nowrap; }
.scr-store .st-foot .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }

/* ── 6. release (browser 1280 × 800) ── */
.scr-release { height: calc(var(--u) * 800); }
.scr-release .side .brand { padding-bottom: calc(var(--u) * 12); }
.scr-release .rl-br p:first-child { font-weight: 700; }
.scr-release .rl-app { display: flex; align-items: center; gap: calc(var(--u) * 10); margin: 0 0 calc(var(--u) * 12); padding: calc(var(--u) * 8) calc(var(--u) * 10); border-radius: calc(var(--u) * 10); border: 1px solid var(--line); background: var(--sur2); }
.scr-release .rl-app .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--tx3); }
.scr-release .rl-ai .vg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.scr-release .rl-or { background: #ea7a1e; }
.scr-release .nv .dot { margin-inline: calc(var(--u) * 4) calc(var(--u) * 3); }
.scr-release .rl-me { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 8) calc(var(--u) * 2); border-top: 1px solid var(--line); }
.scr-release .rl-me .ic { color: var(--tx3); }
.scr-release .rl-crumbs { display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 13.5); color: var(--tx2); white-space: nowrap; }
.scr-release .rl-crumbs .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--tx3); }
.scr-release .rl-crumbs b { color: var(--tx); font-weight: 600; }
.scr-release .rl-search { width: calc(var(--u) * 280); }
.scr-release .content { gap: calc(var(--u) * 14); }
.scr-release .pagehead { align-items: center; }
.scr-release .rl-h1 { display: flex; align-items: center; gap: calc(var(--u) * 12); margin: calc(var(--u) * 2) 0 calc(var(--u) * 3); }
.scr-release .rl-h1 .bd { font-size: calc(var(--u) * 12); }
.scr-release .rl-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 16); }
.scr-release .rl-lane { padding: calc(var(--u) * 14) calc(var(--u) * 18) calc(var(--u) * 14); }
.scr-release .rl-lane-h { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.scr-release .rl-os { width: calc(var(--u) * 36); height: calc(var(--u) * 36); border-radius: calc(var(--u) * 10); display: flex; align-items: center; justify-content: center; background: var(--line2); color: var(--tx); }
.scr-release .rl-step { position: relative; margin: calc(var(--u) * 14) calc(var(--u) * 4) 0; }
.scr-release .rl-track { position: absolute; top: calc(var(--u) * 10); inset-inline: calc(var(--u) * 11); height: calc(var(--u) * 3); border-radius: calc(var(--u) * 2); background: var(--line); }
.scr-release .rl-fill { position: absolute; top: 0; inset-inline-start: 0; height: 100%; border-radius: calc(var(--u) * 2); background: var(--acc); }
.scr-release .rl-nodes { position: relative; display: flex; justify-content: space-between; }
.scr-release .rl-node { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; font-size: calc(var(--u) * 12); }
.scr-release .rl-node:first-child { align-items: flex-start; text-align: start; }
.scr-release .rl-node:last-child { align-items: flex-end; text-align: end; }
.scr-release .rl-node i { width: calc(var(--u) * 23); height: calc(var(--u) * 23); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sur); border: calc(var(--u) * 2) solid var(--line); color: #fff; margin-bottom: calc(var(--u) * 6); }
.scr-release .rl-node i .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); stroke-width: 3.2; }
.scr-release .rl-node.done i { background: var(--acc); border-color: var(--acc); }
.scr-release .rl-node.cur i { border-color: var(--acc); box-shadow: 0 0 0 calc(var(--u) * 4) var(--acc-soft); }
.scr-release .rl-node.cur i::after { content: ""; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: var(--acc); }
.scr-release .rl-node b { font-size: calc(var(--u) * 14); font-weight: 700; color: var(--tx); line-height: 1.3; }
.scr-release .rl-node span, .scr-release .rl-node em { line-height: 1.35; }
.scr-release .rl-node.next b { color: var(--tx2); }
.scr-release .rl-node span { color: var(--tx2); white-space: nowrap; }
.scr-release .rl-node em { font-style: normal; color: var(--tx3); font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.scr-release .rl-node.cur em { color: var(--acc-tx); font-weight: 600; }
.scr-release .rl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(var(--u) * 12); padding-top: calc(var(--u) * 10); border-top: 1px solid var(--line2); }
.scr-release .rl-st + .rl-st { padding-inline-start: calc(var(--u) * 16); border-inline-start: 1px solid var(--line2); }
.scr-release .rl-st .lbl { font-size: calc(var(--u) * 12); color: var(--tx2); font-weight: 500; white-space: nowrap; }
.scr-release .rl-st .val { margin-top: 0; font-size: calc(var(--u) * 19); font-weight: 700; letter-spacing: calc(var(--u) * -.4); color: var(--tx); }
.scr-release .rl-st .val.up { color: var(--ok); }
.scr-release .rl-bottom { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(var(--u) * 14); }
.scr-release .rl-chart { display: flex; flex-direction: column; padding: calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 14); }
.scr-release .rl-chart .card-h { margin-bottom: calc(var(--u) * 6); }
.scr-release .rl-chart .seg { margin-inline-start: calc(var(--u) * 8); }
.scr-release .rl-kpi { display: flex; align-items: baseline; gap: calc(var(--u) * 10); }
.scr-release .rl-big { font-size: calc(var(--u) * 30); font-weight: 750; letter-spacing: calc(var(--u) * -.8); }
.scr-release .rl-dl { display: inline-flex; align-items: center; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 12.5); font-weight: 650; }
.scr-release .rl-dl .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); stroke-width: 2.2; }
.scr-release .rl-plot { position: relative; flex: 1 1 auto; min-height: 0; display: flex; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 14); direction: ltr; }
.scr-release .num { white-space: nowrap; }
.scr-release .rl-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: calc(var(--u) * 11); color: var(--tx3); margin: calc(var(--u) * -7) 0; width: calc(var(--u) * 32); }
.scr-release .rl-area { position: relative; flex: 1 1 auto; border-bottom: 1px solid var(--line); }
.scr-release .rl-tip { position: absolute; top: 3%; inset-inline-end: calc(16.67% + calc(var(--u) * 14)); display: flex; flex-direction: column; gap: calc(var(--u) * 3); padding: calc(var(--u) * 8) calc(var(--u) * 10); border-radius: calc(var(--u) * 9); background: var(--ink); color: #fff; font-size: calc(var(--u) * 11.5); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * -8) rgba(0, 0, 0, .5); white-space: nowrap; }
.scr-release .rl-tip b { font-weight: 700; }
.scr-release .rl-tip span { display: flex; align-items: center; gap: calc(var(--u) * 6); }
.scr-release .rl-tip i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: calc(var(--u) * 2); background: var(--s1); }
.scr-release .rl-tip i.s2 { background: #a5a5f5; }
.scr-release .rl-x { position: relative; height: calc(var(--u) * 14); margin-top: calc(var(--u) * 8); margin-inline-start: calc(var(--u) * 42); }
.scr-release .rl-x span { position: absolute; top: 0; transform: translateX(-50%); }
.scr-release .rl-x span:nth-child(1) { inset-inline-start: 0; transform: none; } .scr-release .rl-x span:nth-child(2) { inset-inline-start: 16.67%; } .scr-release .rl-x span:nth-child(3) { inset-inline-start: 33.33%; }
.scr-release .rl-x span:nth-child(4) { inset-inline-start: 50%; } .scr-release .rl-x span:nth-child(5) { inset-inline-start: 66.67%; } .scr-release .rl-x span:nth-child(6) { inset-inline-start: 83.33%; }
.scr-release .rl-x span:nth-child(7) { inset-inline-start: auto; inset-inline-end: 0; transform: none; }
.scr-release .rl-side { display: flex; flex-direction: column; gap: calc(var(--u) * 14); min-height: 0; }
.scr-release .rl-side .card { padding: calc(var(--u) * 14) calc(var(--u) * 16); }
.scr-release .rl-side .card-h { margin-bottom: calc(var(--u) * 8); }
.scr-release .rl-notes ul { display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.scr-release .rl-notes li { position: relative; padding-inline-start: calc(var(--u) * 14); font-size: calc(var(--u) * 13); line-height: 1.4; color: var(--tx2); }
.scr-release .rl-notes li::before { content: ""; position: absolute; inset-inline-start: 1px; top: calc(var(--u) * 7); width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: var(--acc); }
.scr-release .rl-notes .seg span { height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 8); font-size: calc(var(--u) * 11.5); }
.scr-release .rl-flags { flex: 1 1 auto; }
.scr-release .rl-flag { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 7) 0; }
.scr-release .rl-flag + .rl-flag { border-top: 1px solid var(--line2); }
.scr-release .rl-fk { width: calc(var(--u) * 24); height: calc(var(--u) * 24); flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ok-soft); color: var(--ok); }
.scr-release .rl-fk .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); stroke-width: 3; }
.scr-release .rl-flag .ltr { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: calc(var(--u) * 11); }
.scr-release .rl-tip b.num { margin-inline-start: auto; padding-inline-start: calc(var(--u) * 10); }
.scr-release .rl-guide { position: absolute; top: 0; bottom: 0; inset-inline-start: 83.33%; width: 1px; background: var(--tx3); opacity: .45; }
.scr-release .rl-pt { position: absolute; inset-inline-start: 83.33%; width: calc(var(--u) * 11); height: calc(var(--u) * 11); margin: calc(var(--u) * -5.5) 0 0 calc(var(--u) * -5.5); border-radius: 50%; border: calc(var(--u) * 2) solid var(--sur); box-shadow: 0 1px calc(var(--u) * 3) rgba(16, 24, 40, .3); }
.scr-release .rl-pt.p-a { top: 31.67%; background: var(--s2); }
.scr-release .rl-pt.p-i { top: 66.67%; background: var(--s1); }
.scr-release .rl-search .ell { flex: 1 1 auto; }
.scr-release .rl-ptr { inset-inline-start: calc(83.33% + calc(var(--u) * 4)); top: calc(31.67% + calc(var(--u) * 5)); }