/* Animated service illustrations (tools/mocks.py). Sizes are in em of the
   .mock font-size, which follows the container width — crisp at any size.
   data-state 1–4 = the 4 work steps; transitions show what changed. */
.mock-wrap { container-type: inline-size; width: 100%; }
.mock { position: relative; font-size: clamp(8px, 2.5cqi, 17px); aspect-ratio: 5 / 4; color: #E9EBEF; font-family: var(--sans, Manrope, sans-serif); --a: #F0A62F; --t: #2ED3A6; --card: #161A22; --line: rgba(255,255,255,.1); --ease: cubic-bezier(.2, .8, .2, 1); }
.mock * { box-sizing: border-box; }
.mock i, .mock em, .mock s, .mock u { font-style: normal; text-decoration: none; }
.mock .m-float { position: absolute; z-index: 3; padding: .8em 1em; border-radius: 1em; background: rgba(22, 26, 34, .92); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 1.6em 3em -1em rgba(0,0,0,.7); backdrop-filter: blur(10px); opacity: 0; transform: translateY(1em) scale(.92); transition: opacity .5s var(--ease), transform .7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes m-pulse { 50% { opacity: .55; } }
@keyframes m-bob { 50% { transform: translateY(-.35em); } }

/* ---------- app: phone with a store app */
.m-app .m-phone { position: absolute; left: 50%; top: 2%; width: 46%; height: 96%; transform: translateX(-50%); border-radius: 2.4em; background: #0B0D12; border: .45em solid #20242E; box-shadow: 0 2em 5em -1em rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; }
.m-app .m-notch { position: absolute; top: .5em; left: 50%; width: 30%; height: 1.2em; border-radius: 1em; background: #000; transform: translateX(-50%); z-index: 2; }
.m-app .m-scr { position: absolute; inset: 0; padding: 2.6em 1em 1em; display: flex; flex-direction: column; gap: .8em; background: radial-gradient(120% 60% at 50% 0%, rgba(240,166,47,.18), transparent 60%), #10131A; }
.m-app .m-scr > * { transition: filter .6s, opacity .6s; }
.m-app .m-top { display: flex; justify-content: space-between; align-items: center; font-size: .95em; }
.m-app .m-av { width: 1.8em; height: 1.8em; border-radius: 50%; background: linear-gradient(135deg, var(--a), #FFD58A); }
.m-app .m-bal { padding: .9em; border-radius: 1em; background: linear-gradient(135deg, #F0A62F, #C57F0B); color: #14100A; display: grid; }
.m-app .m-bal small { font-size: .7em; opacity: .8; }
.m-app .m-bal b { font-size: 1.45em; letter-spacing: -.02em; }
.m-app .m-up { justify-self: start; margin-top: .3em; font-size: .7em; font-weight: 800; padding: .15em .5em; border-radius: 1em; background: rgba(0,0,0,.18); }
.m-app .m-bars { display: flex; align-items: flex-end; gap: .35em; height: 5em; padding: .6em; border-radius: 1em; background: var(--card); }
.m-app .m-bars i { flex: 1; height: var(--h); border-radius: .3em .3em .1em .1em; background: var(--t); transform-origin: bottom; animation: m-grow 2.6s var(--ease) infinite alternate; }
.m-app .m-bars i:nth-child(2n) { animation-delay: .3s; }
@keyframes m-grow { from { transform: scaleY(.55); } }
.m-app .m-list { display: grid; gap: .45em; }
.m-app .m-list div { display: grid; grid-template-columns: 1.8em 1fr auto; align-items: center; gap: .6em; padding: .55em .6em; border-radius: .8em; background: var(--card); font-size: .78em; }
.m-app .m-list i { width: 1.8em; height: 1.8em; border-radius: .6em; background: rgba(46,211,166,.2); }
.m-app .m-tabs { margin-top: auto; display: flex; justify-content: space-around; padding: .6em; border-radius: 1em; background: var(--card); }
.m-app .m-tabs i { width: 1.3em; height: 1.3em; border-radius: .4em; background: rgba(255,255,255,.15); }
.m-app .m-tabs i.on { background: var(--a); }
.m-app .m-wire { position: absolute; inset: 2.6em 1em 1em; display: grid; grid-template-rows: 1.5em 5em 5em 1fr; gap: .8em; opacity: 0; transition: opacity .6s; pointer-events: none; }
.m-app .m-wire i { border: 1.5px dashed rgba(255,255,255,.35); border-radius: 1em; }
.m-app[data-state="1"] .m-scr > :not(.m-wire) { filter: grayscale(1); opacity: .12; }
.m-app[data-state="1"] .m-wire { opacity: 1; }
.m-app .m-push { left: 50%; top: 14%; transform: translate(-10%, -1em) scale(.92); display: flex; gap: .7em; align-items: center; font-size: .85em; }
.m-app .m-push span { display: grid; }
.m-app .m-bell { width: 2.2em; height: 2.2em; border-radius: .7em; background: var(--a); }
.m-app[data-state="3"] .m-push, .m-app[data-state="4"] .m-push { opacity: 1; transform: translate(-10%, 0) scale(1); }
.m-app .m-pub { left: 4%; bottom: 14%; display: grid; font-size: .9em; }
.m-app .m-pub b { color: var(--a); font-size: 1.3em; }
.m-app[data-state="4"] .m-pub { opacity: 1; transform: none; animation: m-bob 3s ease-in-out infinite; }

/* ---------- web: browser window building a landing page */
.m-web .m-browser { position: absolute; left: 50%; top: 4%; width: 92%; height: 88%; transform: translateX(-50%); border-radius: 1em; background: #10131A; border: 1px solid rgba(255,255,255,.12); overflow: hidden; box-shadow: 0 2em 5em -1em rgba(0,0,0,.8); transition: width .9s var(--ease); }
.m-web .m-bar { display: flex; align-items: center; gap: .45em; padding: .7em .9em; background: #1A1E27; }
.m-web .m-bar > i { width: .75em; height: .75em; border-radius: 50%; background: #FF6159; }
.m-web .m-bar > i:nth-child(2) { background: #FFBD2E; } .m-web .m-bar > i:nth-child(3) { background: #28C941; }
.m-web .m-url { margin-left: 1em; flex: 1; padding: .3em .8em; border-radius: 1em; background: #0E1117; font-size: .75em; color: #9AA1AD; }
.m-web .m-page { padding: 1.2em 1.4em; display: grid; gap: 1.2em; }
.m-web .m-nav { display: flex; align-items: center; gap: .9em; }
.m-web .m-nav b { width: 4em; height: 1em; border-radius: .3em; background: var(--a); }
.m-web .m-nav span { width: 2.6em; height: .55em; border-radius: .3em; background: rgba(255,255,255,.25); }
.m-web .m-nav em { margin-left: auto; width: 4.5em; height: 1.6em; border-radius: 1em; background: var(--a); }
.m-web .m-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.2em; align-items: center; }
.m-web .m-txt { display: grid; gap: .55em; }
.m-web .m-h1 { height: 1.4em; border-radius: .35em; background: #F2F3F5; width: 95%; }
.m-web .m-h1.s { width: 65%; background: linear-gradient(90deg, var(--a), var(--t)); }
.m-web .m-p { height: .55em; border-radius: .3em; background: rgba(255,255,255,.25); width: 90%; }
.m-web .m-p.s { width: 70%; }
.m-web .m-btn { justify-self: start; margin-top: .5em; padding: .6em 1.1em; border-radius: 1em; background: var(--a); color: #14100A; font-weight: 800; font-size: .72em; transition: transform .3s; }
.m-web .m-img { aspect-ratio: 4 / 3; border-radius: 1em; background: radial-gradient(60% 70% at 30% 30%, rgba(46,211,166,.6), transparent 60%), radial-gradient(60% 70% at 80% 70%, rgba(240,166,47,.7), transparent 60%), #1C2130; }
.m-web .m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.m-web .m-cards i { height: 4.5em; border-radius: .9em; background: #1A1E27; border: 1px solid var(--line); }
.m-web .m-page * { transition: background .6s, border-color .6s, color .6s, opacity .6s; }
.m-web[data-state="1"] .m-page :is(.m-nav b, .m-nav span, .m-nav em, .m-h1, .m-p, .m-btn, .m-img, .m-cards i) { background: transparent; border: 1.5px dashed rgba(255,255,255,.35); color: transparent; }
.m-web[data-state="3"] .m-browser { width: 42%; }
.m-web[data-state="3"] .m-hero { grid-template-columns: 1fr; }
.m-web[data-state="3"] .m-cards { grid-template-columns: 1fr; }
.m-web[data-state="3"] .m-nav span { display: none; }
.m-web .m-cursor { position: absolute; z-index: 4; left: 70%; top: 80%; width: 1.4em; height: 1.4em; opacity: 0; background: #fff; clip-path: polygon(0 0, 100% 55%, 55% 62%, 38% 100%); transition: left 1s var(--ease), top 1s var(--ease), opacity .3s; }
.m-web[data-state="4"] .m-cursor { opacity: 1; left: 16%; top: 47%; }
.m-web[data-state="4"] .m-btn { animation: m-click .5s 1s both; }
@keyframes m-click { 50% { transform: scale(.9); } }
.m-web .m-toast { position: absolute; z-index: 4; right: 6%; bottom: 6%; padding: .8em 1.2em; border-radius: 1em; background: var(--t); color: #06231A; font-weight: 800; font-size: .85em; opacity: 0; transform: translateY(1em); transition: opacity .4s 1.3s, transform .6s 1.3s cubic-bezier(.2, 1.4, .4, 1); }
.m-web[data-state="4"] .m-toast { opacity: 1; transform: none; }

/* ---------- store: listing + moderation pipeline */
.m-store .m-listing { position: absolute; left: 6%; right: 6%; top: 4%; padding: 1.3em; border-radius: 1.2em; background: #10131A; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 2em 5em -1em rgba(0,0,0,.8); }
.m-store .m-head { display: grid; grid-template-columns: 4.2em 1fr auto; gap: 1em; align-items: center; }
.m-store .m-icon { width: 4.2em; height: 4.2em; border-radius: 1.1em; background: linear-gradient(135deg, var(--a), #C57F0B); box-shadow: inset 0 0 0 .35em rgba(255,255,255,.15); }
.m-store .m-meta { display: grid; gap: .2em; }
.m-store .m-meta b { font-size: 1.1em; }
.m-store .m-meta small { color: #9AA1AD; font-size: .78em; }
.m-store .m-install { position: relative; padding: .7em 1.2em; border-radius: 1em; background: rgba(255,255,255,.1); font-weight: 800; font-size: .8em; overflow: hidden; transition: background .5s; }
.m-store .m-install .b { position: absolute; inset: 0; display: grid; place-items: center; transform: translateY(100%); transition: transform .5s var(--ease); }
.m-store[data-state="4"] .m-install { background: var(--t); color: #06231A; }
.m-store[data-state="4"] .m-install .a { opacity: 0; }
.m-store[data-state="4"] .m-install .b { transform: none; }
.m-store .m-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; margin-top: 1.2em; }
.m-store .m-shots i { aspect-ratio: 9 / 16; border-radius: .8em; background: linear-gradient(180deg, #1F2533, #141821); border: 1px solid var(--line); transition: background .6s, transform .6s var(--ease); }
.m-store[data-state="2"] .m-shots i, .m-store[data-state="3"] .m-shots i, .m-store[data-state="4"] .m-shots i { background: linear-gradient(180deg, rgba(240,166,47,.55), #1A1E28 70%); }
.m-store[data-state="2"] .m-shots i:nth-child(2n), .m-store[data-state="3"] .m-shots i:nth-child(2n), .m-store[data-state="4"] .m-shots i:nth-child(2n) { background: linear-gradient(180deg, rgba(46,211,166,.5), #1A1E28 70%); }
.m-store .m-desc { display: grid; gap: .45em; margin-top: 1em; }
.m-store .m-desc i { height: .55em; border-radius: .3em; background: rgba(255,255,255,.18); }
.m-store .m-desc i.s { width: 60%; }
.m-store .m-pipe { position: absolute; left: 6%; right: 6%; bottom: 4%; margin: 0; padding: 1em 1.2em; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; border-radius: 1.2em; background: rgba(22,26,34,.95); border: 1px solid rgba(255,255,255,.12); font-size: .78em; }
.m-store .m-pipe li { display: grid; justify-items: center; gap: .5em; text-align: center; color: #6E7581; transition: color .4s; position: relative; }
.m-store .m-pipe li i { width: 2em; height: 2em; border-radius: 50%; border: .2em solid rgba(255,255,255,.15); transition: background .4s, border-color .4s; position: relative; z-index: 1; background: #161A22; }
.m-store .m-pipe li:not(:last-child)::after { content: ''; position: absolute; top: 1em; left: 60%; width: 80%; height: .2em; background: rgba(255,255,255,.12); }
.m-store[data-state="1"] li:nth-child(1), .m-store[data-state="2"] li:nth-child(-n+2), .m-store[data-state="3"] li:nth-child(-n+3), .m-store[data-state="4"] li { color: #E9EBEF; }
.m-store[data-state="1"] li:nth-child(1) i, .m-store[data-state="2"] li:nth-child(-n+2) i, .m-store[data-state="3"] li:nth-child(-n+3) i, .m-store[data-state="4"] li i { background: var(--a); border-color: var(--a); }
.m-store[data-state="3"] li:nth-child(3) i { background: transparent; border-color: var(--a) transparent var(--a) var(--a); animation: m-spin 1s linear infinite; }
.m-store[data-state="4"] li:nth-child(4) i { background: var(--t); border-color: var(--t); }
@keyframes m-spin { to { transform: rotate(360deg); } }
.m-store .m-conf { position: absolute; inset: 0; pointer-events: none; }
.m-store .m-conf i { position: absolute; left: 80%; top: 14%; width: .6em; height: .6em; border-radius: .15em; background: var(--a); opacity: 0; }
.m-store .m-conf i:nth-child(2n) { background: var(--t); } .m-store .m-conf i:nth-child(3n) { background: #FF7A9A; }
.m-store[data-state="4"] .m-conf i { animation: m-conf 1.4s var(--ease) both; }
.m-store .m-conf i:nth-child(1) { --x: -6em; --y: -3em; } .m-store .m-conf i:nth-child(2) { --x: -3em; --y: -5em; } .m-store .m-conf i:nth-child(3) { --x: 1em; --y: -4em; }
.m-store .m-conf i:nth-child(4) { --x: 3em; --y: -1em; } .m-store .m-conf i:nth-child(5) { --x: -5em; --y: 1em; } .m-store .m-conf i:nth-child(6) { --x: -1em; --y: 2em; }
@keyframes m-conf { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(200deg); } }

/* ---------- chat: Telegram-style shop bot */
.m-chat .m-win { position: absolute; left: 50%; top: 2%; width: 66%; height: 96%; transform: translateX(-50%); border-radius: 1.6em; background: #0F141B; border: 1px solid rgba(255,255,255,.12); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2em 5em -1em rgba(0,0,0,.8); }
.m-chat .m-head { display: flex; gap: .7em; align-items: center; padding: .9em 1em; background: #171D27; }
.m-chat .m-head span { display: grid; font-size: .85em; }
.m-chat .m-head small { color: #8FA3BC; }
.m-chat .m-bot { width: 2.4em; height: 2.4em; border-radius: 50%; background: linear-gradient(135deg, #3AA0E8, #2ED3A6); }
.m-chat .m-msgs { flex: 1; padding: 1em; display: flex; flex-direction: column; gap: .6em; justify-content: flex-end; background: radial-gradient(100% 60% at 50% 100%, rgba(58,160,232,.12), transparent 70%); }
.m-chat .m-msgs > * { margin: 0; max-width: 82%; font-size: .82em; line-height: 1.4; transition: opacity .45s var(--ease), transform .55s cubic-bezier(.2, 1.3, .4, 1), max-height .45s; max-height: 12em; }
.m-chat .m-in { align-self: flex-end; padding: .6em .9em; border-radius: 1em 1em .3em 1em; background: #2E6BD8; }
.m-chat .m-out { align-self: flex-start; padding: .6em .9em; border-radius: 1em 1em 1em .3em; background: #1E2633; }
.m-chat .m-out.ok { background: rgba(46,211,166,.2); color: #BFF5E2; }
.m-chat .m-kb { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; margin-top: .6em; }
.m-chat .m-kb i { padding: .35em; border-radius: .5em; background: rgba(58,160,232,.25); text-align: center; font-size: .9em; }
.m-chat .m-prod { align-self: flex-start; display: grid; grid-template-columns: 3em 1fr auto; gap: .7em; align-items: center; padding: .6em; border-radius: 1em; background: #1E2633; }
.m-chat .m-prod > i { width: 3em; height: 3em; border-radius: .7em; background: linear-gradient(135deg, var(--a), #8B5A1C); }
.m-chat .m-prod span { display: grid; }
.m-chat .m-prod small { color: #8FA3BC; }
.m-chat .m-prod em { font-weight: 800; color: var(--a); }
.m-chat .m-paybtn { display: block; padding: .5em 1em; border-radius: .7em; background: var(--a); color: #14100A; font-weight: 800; text-align: center; }
.m-chat .m-typing { align-self: flex-start; display: flex; gap: .3em; padding: .7em .9em !important; border-radius: 1em; background: #1E2633; }
.m-chat .m-typing i { width: .5em; height: .5em; border-radius: 50%; background: #8FA3BC; animation: m-pulse 1s infinite; }
.m-chat .m-typing i:nth-child(2) { animation-delay: .2s; } .m-chat .m-typing i:nth-child(3) { animation-delay: .4s; }
.m-chat [data-s] { opacity: 0; transform: translateY(1em) scale(.95); max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.m-chat[data-state="1"] [data-s="1"], .m-chat[data-state="2"] :is([data-s="1"], [data-s="2"]), .m-chat[data-state="3"] :is([data-s="1"], [data-s="2"], [data-s="3"]), .m-chat[data-state="4"] [data-s] { opacity: 1; transform: none; max-height: 12em; padding-top: .6em; padding-bottom: .6em; }
.m-chat[data-state="4"] .m-typing { display: none; }
.m-chat .m-input { display: flex; justify-content: space-between; align-items: center; margin: .6em; padding: .6em .9em; border-radius: 1em; background: #171D27; color: #6E7581; font-size: .8em; }
.m-chat .m-input i { width: 1.6em; height: 1.6em; border-radius: 50%; background: #2E6BD8; }

/* ---------- sheet: spreadsheet that fixes and automates itself */
.m-sheet .m-xl { position: absolute; left: 3%; right: 3%; top: 4%; border-radius: 1em; background: #F4F6F5; color: #1C2A24; overflow: hidden; box-shadow: 0 2em 5em -1em rgba(0,0,0,.8); }
.m-sheet .m-fx { display: flex; gap: .8em; align-items: center; padding: .55em .8em; background: #fff; border-bottom: 1px solid #D9E1DD; font-size: .78em; }
.m-sheet .m-fx b { color: #1F7A4D; font-style: italic; }
.m-sheet .m-formula { font-family: var(--mono, monospace); color: #1C2A24; overflow: hidden; white-space: nowrap; }
.m-sheet .m-formula span { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s steps(30); }
.m-sheet:not([data-state="1"]) .m-formula span { clip-path: inset(0 0 0 0); }
.m-sheet .m-grid { display: grid; grid-template-columns: 1.6em 1.6fr 1.1fr 1fr .8fr; font-size: .74em; }
.m-sheet .m-grid i { padding: .5em .55em; border-right: 1px solid #DEE5E1; border-bottom: 1px solid #DEE5E1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .5s, color .5s; }
.m-sheet .m-grid i.h { background: #E8EEEB; color: #5C6F66; text-align: center; font-weight: 700; }
.m-sheet .m-grid i.n { text-align: right; font-variant-numeric: tabular-nums; }
.m-sheet .m-grid i.st { color: #1F7A4D; font-weight: 700; }
.m-sheet .m-grid i.st.w { color: #B66A00; }
.m-sheet .m-grid i.e { color: #C62828; background: #FDECEC; }
.m-sheet:not([data-state="1"]) .m-grid i.e { color: transparent; background: transparent; position: relative; }
.m-sheet:not([data-state="1"]) .m-grid i.e::after { content: '24 000'; position: absolute; right: .55em; color: #1C2A24; }
.m-sheet:not([data-state="1"]) .m-grid i.e:nth-of-type(n+20)::after { content: '24 000'; }
.m-sheet .m-grid i.tot { font-weight: 800; }
.m-sheet .m-grid i.t { font-weight: 800; }
.m-sheet[data-state="3"] .m-grid i:not(.h), .m-sheet[data-state="4"] .m-grid i:not(.h) { animation: m-sweep 1.2s var(--ease) both; }
.m-sheet .m-grid i:nth-child(n+11) { animation-delay: .1s; } .m-sheet .m-grid i:nth-child(n+16) { animation-delay: .2s; } .m-sheet .m-grid i:nth-child(n+21) { animation-delay: .3s; } .m-sheet .m-grid i:nth-child(n+26) { animation-delay: .4s; }
@keyframes m-sweep { 40% { background: #FFF1D6; } }
.m-sheet .m-macro { display: inline-block; margin: .8em; padding: .5em 1em; border-radius: .6em; background: #1F7A4D; color: #fff; font-weight: 800; font-size: .75em; opacity: .35; transition: opacity .4s, transform .3s; }
.m-sheet[data-state="3"] .m-macro, .m-sheet[data-state="4"] .m-macro { opacity: 1; animation: m-click .5s .2s both; }
.m-sheet .m-chart { position: relative; float: right; margin: .6em .8em .8em; width: 40%; height: 3.6em; display: flex; align-items: flex-end; gap: .35em; padding: .5em; border-radius: .7em; background: #fff; border: 1px solid #DEE5E1; opacity: 0; transition: opacity .5s; }
.m-sheet .m-chart i { flex: 1; height: var(--h); background: #1F7A4D; border-radius: .25em .25em 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--ease); }
.m-sheet .m-chart i:nth-child(2n) { background: var(--a); }
.m-sheet[data-state="4"] .m-chart { opacity: 1; }
.m-sheet[data-state="4"] .m-chart i { transform: none; }
.m-sheet .m-chart i:nth-child(2) { transition-delay: .08s; } .m-sheet .m-chart i:nth-child(3) { transition-delay: .16s; } .m-sheet .m-chart i:nth-child(4) { transition-delay: .24s; } .m-sheet .m-chart i:nth-child(5) { transition-delay: .32s; } .m-sheet .m-chart i:nth-child(6) { transition-delay: .4s; }
.m-sheet .m-timer { left: 6%; bottom: 3%; display: grid; gap: .1em; }
.m-sheet .m-timer s { color: #8E959F; text-decoration: line-through; font-size: .85em; }
.m-sheet .m-timer b { color: var(--t); font-size: 1.6em; letter-spacing: -.02em; }
.m-sheet .m-timer small { color: #9AA1AD; font-size: .75em; }
.m-sheet[data-state="4"] .m-timer, .m-sheet[data-state="3"] .m-timer { opacity: 1; transform: none; }

/* ---------- xapp: program with buttons + phone version + export */
.m-xapp .m-window { position: absolute; left: 2%; top: 4%; width: 78%; height: 80%; display: grid; grid-template-columns: 26% 1fr; border-radius: 1.1em; background: #10131A; border: 1px solid rgba(255,255,255,.12); overflow: hidden; box-shadow: 0 2em 5em -1em rgba(0,0,0,.8); }
.m-xapp .m-side { display: flex; flex-direction: column; gap: .4em; padding: 1em .7em; background: #171B24; font-size: .78em; }
.m-xapp .m-logo { width: 2.2em; height: 2.2em; border-radius: .7em; background: linear-gradient(135deg, #1F9D5A, #2ED3A6); margin-bottom: .6em; }
.m-xapp .m-side span { padding: .55em .7em; border-radius: .6em; color: #9AA1AD; transition: background .4s, color .4s; }
.m-xapp .m-side span.on { background: rgba(46,211,166,.16); color: #E9EBEF; }
.m-xapp .m-main { padding: 1em 1.1em; display: flex; flex-direction: column; gap: .8em; position: relative; }
.m-xapp .m-titlebar { display: flex; justify-content: space-between; align-items: center; }
.m-xapp .m-exp { padding: .45em .8em; border-radius: .6em; background: rgba(255,255,255,.08); font-size: .72em; transition: background .4s; }
.m-xapp .m-form { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: .6em; align-items: end; }
.m-xapp .m-form label { display: grid; gap: .3em; font-size: .72em; }
.m-xapp .m-form small { color: #9AA1AD; }
.m-xapp .m-form i { padding: .55em .6em; border-radius: .55em; background: #0B0D12; border: 1px solid rgba(255,255,255,.14); }
.m-xapp .m-save { grid-column: 1 / -1; justify-self: start; padding: .55em 1.2em; border-radius: .6em; background: #1F9D5A; font-weight: 800; font-size: .74em; }
.m-xapp .m-rows { display: grid; gap: .45em; }
.m-xapp .m-rows i { height: 1.8em; border-radius: .55em; background: #171B24; border: 1px solid rgba(255,255,255,.06); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.m-xapp:not([data-state="1"]) .m-rows i { transform: none; }
.m-xapp .m-rows i:nth-child(2) { transition-delay: .1s; } .m-xapp .m-rows i:nth-child(3) { transition-delay: .2s; } .m-xapp .m-rows i:nth-child(4) { transition-delay: .3s; }
.m-xapp .m-menu { position: absolute; right: 1.1em; top: 3em; display: grid; gap: .3em; padding: .45em; border-radius: .8em; background: #1C212C; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 1em 2em rgba(0,0,0,.5); font-size: .75em; opacity: 0; transform: translateY(-.6em) scale(.95); transform-origin: top right; transition: opacity .35s, transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.m-xapp .m-menu span { display: flex; align-items: center; gap: .6em; padding: .45em .8em; border-radius: .5em; }
.m-xapp .m-menu span::before { content: ''; width: 1.1em; height: 1.3em; border-radius: .2em; background: #1F9D5A; }
.m-xapp .m-menu .p::before { background: #E5484D; } .m-xapp .m-menu .s::before { background: var(--a); }
.m-xapp[data-state="3"] .m-menu { opacity: 1; transform: none; }
.m-xapp[data-state="3"] .m-exp { background: rgba(240,166,47,.25); }
.m-xapp[data-state="3"] .m-menu span { animation: m-hl 2.4s infinite; }
.m-xapp[data-state="3"] .m-menu span:nth-child(2) { animation-delay: .8s; } .m-xapp[data-state="3"] .m-menu span:nth-child(3) { animation-delay: 1.6s; }
@keyframes m-hl { 0%, 30% { background: rgba(255,255,255,.1); } 40%, 100% { background: transparent; } }
.m-xapp .m-mini { position: absolute; right: 3%; bottom: 2%; width: 26%; aspect-ratio: 9 / 18; border-radius: 1.6em; background: #0B0D12; border: .35em solid #20242E; box-shadow: 0 2em 4em -1em rgba(0,0,0,.8); overflow: hidden; opacity: 0; transform: translateY(2em) rotate(4deg); transition: opacity .5s, transform .8s cubic-bezier(.2, 1.3, .4, 1); }
.m-xapp .m-mini-scr { position: absolute; inset: 0; padding: 1.4em .7em .7em; display: flex; flex-direction: column; gap: .45em; font-size: .7em; background: #10131A; }
.m-xapp .m-mini-scr i { height: 2em; border-radius: .5em; background: #171B24; }
.m-xapp .m-mini-scr span { margin-top: auto; padding: .5em; border-radius: .6em; background: #1F9D5A; text-align: center; font-weight: 800; }
.m-xapp[data-state="4"] .m-mini { opacity: 1; transform: none; }

/* ---------- map: business card climbing the local ranking */
.m-map .m-mapbg { position: absolute; inset: 3% 34% 3% 3%; border-radius: 1.2em; overflow: hidden; background: #EDE8DF; box-shadow: 0 2em 5em -1em rgba(0,0,0,.8); }
.m-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-map .park { fill: #CFE6C4; }
.m-map .road { stroke: #fff; stroke-width: 6; fill: none; }
.m-map .road.b { stroke-width: 11; stroke: #FFE7B3; }
.m-map .m-pin { position: absolute; width: 1.6em; height: 1.6em; margin: -1.6em 0 0 -.8em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #8C96A6; box-shadow: 0 .3em .6em rgba(0,0,0,.25); }
.m-map .m-pin.me { width: 2.4em; height: 2.4em; margin: -2.4em 0 0 -1.2em; background: #E5484D; z-index: 2; transition: transform .5s cubic-bezier(.2, 1.6, .4, 1); }
.m-map[data-state="4"] .m-pin.me { animation: m-drop 1.2s cubic-bezier(.2, 1.6, .4, 1) infinite alternate; }
@keyframes m-drop { to { transform: rotate(-45deg) translate(.4em, -.4em) scale(1.12); } }
.m-map .m-results { position: absolute; right: 2%; top: 5%; bottom: 5%; width: 44%; padding: 1em; border-radius: 1.2em; background: #10131A; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 2em 5em -1em rgba(0,0,0,.8); }
.m-map .m-search { padding: .6em .9em; border-radius: .8em; background: #1A1E27; font-size: .8em; color: #C9CDD4; }
.m-map .m-slots { display: grid; gap: .5em; margin-top: .8em; }
.m-map .m-slots i { height: 3.4em; border-radius: .8em; background: #171B24; border: 1px solid rgba(255,255,255,.06); }
.m-map .m-me { --pos: 4; position: absolute; left: 1em; right: 1em; top: calc(3.6em + var(--pos) * 3.9em); height: 3.4em; display: grid; grid-template-columns: 2em 1fr auto; gap: .6em; align-items: center; padding: 0 .7em; border-radius: .8em; background: #232838; border: 1px solid var(--a); box-shadow: 0 .8em 2em rgba(0,0,0,.4); transition: top .9s cubic-bezier(.2, 1.1, .3, 1); font-size: .82em; }
.m-map .m-n { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: var(--a); color: #14100A; font-weight: 800; }
.m-map .m-n::after { content: '5'; } .m-map[data-state="2"] .m-n::after { content: '4'; } .m-map[data-state="3"] .m-n::after { content: '3'; } .m-map[data-state="4"] .m-n::after { content: '2'; }
.m-map[data-state="2"] .m-me { --pos: 3; } .m-map[data-state="3"] .m-me { --pos: 2; } .m-map[data-state="4"] .m-me { --pos: 1; }
.m-map .m-t { display: grid; }
.m-map .m-stars { color: #6E7581; letter-spacing: .05em; font-size: .85em; }
.m-map .m-stars em::after { content: '4,2'; color: #9AA1AD; }
.m-map[data-state="3"] .m-stars, .m-map[data-state="4"] .m-stars { color: var(--a); }
.m-map[data-state="3"] .m-stars em::after, .m-map[data-state="4"] .m-stars em::after { content: '4,9'; }
.m-map .m-top3 { padding: .25em .55em; border-radius: .5em; background: var(--t); color: #06231A; font-weight: 800; font-size: .75em; opacity: 0; transform: scale(.6); transition: opacity .4s .5s, transform .5s .5s cubic-bezier(.2, 1.6, .4, 1); }
.m-map[data-state="3"] .m-top3, .m-map[data-state="4"] .m-top3 { opacity: 1; transform: none; }

/* ---------- vid: video editor */
.m-vid .m-ed { position: absolute; left: 3%; right: 3%; top: 3%; bottom: 3%; display: grid; grid-template-rows: 1fr auto auto; gap: .8em; padding: 1em; border-radius: 1.2em; background: #10131A; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 2em 5em -1em rgba(0,0,0,.8); }
.m-vid .m-prev { position: relative; border-radius: .9em; overflow: hidden; background: #0B0D12; }
.m-vid .m-frame { position: absolute; inset: 0; background: url(/video/launch.webp) center / cover; transition: inset .8s var(--ease), border-radius .8s, opacity .6s; opacity: .95; }
.m-vid[data-state="1"] .m-frame { opacity: 0; }
.m-vid .m-script { position: absolute; left: 8%; top: 18%; width: 60%; display: grid; gap: .7em; opacity: 0; transition: opacity .5s; }
.m-vid .m-script i { height: .7em; border-radius: .4em; background: rgba(255,255,255,.35); }
.m-vid .m-script i.s { width: 60%; }
.m-vid[data-state="1"] .m-script { opacity: 1; }
.m-vid .m-play { position: absolute; left: 50%; top: 50%; width: 3.6em; height: 3.6em; margin: -1.8em 0 0 -1.8em; border-radius: 50%; background: rgba(255,255,255,.9); clip-path: circle(50%); }
.m-vid .m-play::after { content: ''; position: absolute; left: 40%; top: 30%; border-left: 1.2em solid #0B0D12; border-top: .75em solid transparent; border-bottom: .75em solid transparent; }
.m-vid[data-state="1"] .m-play, .m-vid[data-state="3"] .m-play { opacity: 0; }
.m-vid .m-ars { position: absolute; inset: 8%; display: flex; gap: 6%; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s; }
.m-vid .m-ars span { display: grid; place-items: end center; padding-bottom: .4em; border-radius: .5em; background: url(/video/launch.webp) center / cover; border: .15em solid rgba(255,255,255,.8); font-weight: 800; font-size: .8em; text-shadow: 0 1px 4px rgba(0,0,0,.8); transform: translateY(1em); transition: transform .6s cubic-bezier(.2, 1.4, .4, 1); }
.m-vid .m-ars .v { height: 92%; aspect-ratio: 9 / 16; } .m-vid .m-ars .q { height: 60%; aspect-ratio: 1; } .m-vid .m-ars .h { height: 45%; aspect-ratio: 16 / 9; }
.m-vid[data-state="3"] .m-ars { opacity: 1; }
.m-vid[data-state="3"] .m-ars span { transform: none; }
.m-vid[data-state="3"] .m-frame { opacity: .15; }
.m-vid .m-tl { position: relative; display: grid; gap: .35em; padding: .6em; border-radius: .8em; background: #0B0D12; }
.m-vid .m-trk { display: flex; gap: .25em; height: 1.4em; }
.m-vid .m-trk.v i { width: var(--w); border-radius: .35em; background: linear-gradient(90deg, #8B5CF6, #C084FC); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.m-vid .m-trk.t i { width: var(--w); border-radius: .35em; background: var(--a); transform: scaleX(0); transform-origin: left; transition: transform .7s .2s var(--ease); }
.m-vid .m-trk.a { align-items: center; gap: .2em; }
.m-vid .m-trk.a i { flex: 1; height: var(--h); border-radius: .2em; background: var(--t); opacity: .7; }
.m-vid:not([data-state="1"]) .m-trk i { transform: none; }
.m-vid .m-head { position: absolute; top: .3em; bottom: .3em; left: 6%; width: .18em; background: #fff; border-radius: .1em; box-shadow: 0 0 .6em rgba(255,255,255,.6); }
.m-vid[data-state="2"] .m-head { animation: m-scrub 3s linear infinite; }
@keyframes m-scrub { to { left: 94%; } }
.m-vid .m-render { display: grid; grid-template-columns: auto 1fr auto; gap: .8em; align-items: center; font-size: .78em; }
.m-vid .m-render > i { height: .5em; border-radius: .3em; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.m-vid .m-render > i::after { content: ''; position: absolute; inset: 0; background: var(--t); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease); }
.m-vid[data-state="4"] .m-render > i::after { transform: none; }
.m-vid .m-render b { color: var(--t); opacity: 0; transition: opacity .4s 1.5s; }
.m-vid[data-state="4"] .m-render b { opacity: 1; }

/* ---------- pay: foreign subscriptions paid, receipt */
.m-pay .m-panel { position: absolute; left: 4%; top: 4%; width: 70%; padding: 1.2em; border-radius: 1.2em; background: #10131A; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 2em 5em -1em rgba(0,0,0,.8); display: grid; gap: .9em; }
.m-pay .m-ask { justify-self: end; padding: .6em .9em; border-radius: 1em 1em .3em 1em; background: #2E6BD8; font-size: .82em; }
.m-pay .m-subs { display: grid; gap: .5em; }
.m-pay .m-subs > div { display: grid; grid-template-columns: 2.4em 1fr auto; gap: .7em; align-items: center; padding: .6em; border-radius: .9em; background: #171B24; font-size: .82em; }
.m-pay .m-subs > div > i { width: 2.4em; height: 2.4em; border-radius: .7em; display: grid; place-items: center; font-weight: 800; color: #0B0D12; }
.m-pay .c1 { background: #F0A62F; } .m-pay .c2 { background: #2ED3A6; } .m-pay .c3 { background: #5C8FE6; }
.m-pay .m-subs span { display: grid; }
.m-pay .m-subs small { color: #9AA1AD; font-size: .85em; }
.m-pay .m-st { position: relative; display: grid; font-size: .8em; font-weight: 800; }
.m-pay .m-st s, .m-pay .m-st u { grid-area: 1 / 1; padding: .3em .6em; border-radius: .6em; transition: opacity .4s, transform .5s cubic-bezier(.2, 1.6, .4, 1); }
.m-pay .m-st s { background: rgba(255,255,255,.08); color: #9AA1AD; }
.m-pay .m-st u { background: rgba(46,211,166,.18); color: var(--t); opacity: 0; transform: scale(.6); }
.m-pay[data-state="4"] .m-st s { opacity: 0; }
.m-pay[data-state="4"] .m-st u { opacity: 1; transform: none; }
.m-pay[data-state="4"] .m-subs > div:nth-child(2) .m-st u { transition-delay: .15s; } .m-pay[data-state="4"] .m-subs > div:nth-child(3) .m-st u { transition-delay: .3s; }
.m-pay .m-calc { display: flex; justify-content: space-between; padding: .6em .2em 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .82em; color: #9AA1AD; opacity: .25; transition: opacity .5s; }
.m-pay .m-calc b { color: #E9EBEF; }
.m-pay:not([data-state="1"]) .m-calc { opacity: 1; }
.m-pay .m-prog { height: .45em; border-radius: .3em; background: rgba(255,255,255,.08); overflow: hidden; }
.m-pay .m-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--a), var(--t)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.m-pay[data-state="3"] .m-prog i { transform: scaleX(.7); }
.m-pay[data-state="4"] .m-prog i { transform: none; }
.m-pay .m-receipt { right: 4%; bottom: 6%; width: 38%; display: grid; gap: .55em; background: #F5F3EE; color: #1B1D22; border-radius: .6em; }
.m-pay .m-receipt i { height: .5em; border-radius: .3em; background: #D9D4C8; }
.m-pay .m-receipt i.s { width: 60%; }
.m-pay .m-stamp { justify-self: center; margin-top: .3em; padding: .25em .7em; border: .2em solid #1F9D5A; border-radius: .5em; color: #1F9D5A; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: .85em; transform: rotate(-8deg) scale(1.6); opacity: 0; transition: transform .45s .5s cubic-bezier(.2, 1.6, .4, 1), opacity .3s .5s; }
.m-pay[data-state="4"] .m-receipt { opacity: 1; transform: none; }
.m-pay[data-state="4"] .m-stamp { opacity: 1; transform: rotate(-8deg); }

@media (prefers-reduced-motion: reduce) { .mock *, .mock { animation: none !important; transition: none !important; } }