:root{
  --bg:#f7f7ff;--surface:#fff;--surface-soft:#f5f3ff;--surface-violet:#efebff;
  --text:#101633;--muted:#7d87aa;--muted2:#aab0c7;--line:#e6e8f4;
  --violet:#5638ff;--violet2:#7b39ff;--pink:#ff3f7d;--blue:#3427d8;
  --success:#0ca35a;--success-soft:#e4f8ee;--orange:#ff9900;--orange-soft:#fff0d5;
  --shadow:0 20px 55px rgba(55,49,128,.09);--shadow-sm:0 10px 30px rgba(55,49,128,.06);
  --safe-top:max(10px,env(safe-area-inset-top));--safe-bottom:max(10px,env(safe-area-inset-bottom));
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)!important;color:var(--text)!important;font-family:"Golos Text",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
body{overflow-x:hidden;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}button,input,select,textarea{font:inherit}button{cursor:pointer}svg{display:block;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.hidden{display:none!important}
.app-shell{width:min(100%,860px);margin:0 auto;min-height:100dvh;padding-bottom:104px;background:linear-gradient(180deg,#fbfbff,#f7f7ff)}
.main{padding:14px 18px 28px!important}

/* header */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 20px 14px;background:rgba(255,255,255,.97)!important;border:0!important;border-bottom:1px solid rgba(230,232,244,.7)!important;backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(42,37,94,.035)}
.brand-lockup{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:29px;font-weight:800;letter-spacing:-.08em;background:linear-gradient(145deg,#ff5b73,#ff347e 50%,#7b31ff);box-shadow:0 10px 24px rgba(207,55,151,.25);position:relative}.brand-mark:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;right:8px;bottom:7px}.brand-mark span{display:none}.brand{font-size:29px!important;line-height:1!important;font-weight:800!important;letter-spacing:-.045em!important;color:var(--text)!important}.brand-sub{margin-top:5px;font-size:15px!important;color:var(--muted)!important}
.topbar-actions{display:flex;align-items:center;gap:9px}.balance-pill{height:50px;padding:0 18px;border:0!important;border-radius:999px!important;background:#f3f1ff!important;display:flex;align-items:center;gap:10px;color:var(--text)!important;box-shadow:none!important}.balance-pill .balance-lightning{width:26px;height:26px;color:var(--violet)}.balance-pill .balance-lightning svg{width:26px;height:26px;stroke-width:2}.balance-pill b{font-size:23px!important;letter-spacing:-.03em}.quick-topup{width:46px;height:46px;border:0!important;border-radius:50%!important;background:linear-gradient(145deg,#7b65ff,#5936ff)!important;color:#fff!important;display:grid;place-items:center;box-shadow:0 8px 20px rgba(88,54,255,.22)}.quick-topup svg{width:24px;height:24px;stroke-width:2}.top-avatar{width:48px;height:48px;padding:3px!important;border:2px solid #d8ceff!important;border-radius:50%!important;background:#fff!important;overflow:hidden}.top-avatar-image{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;object-fit:cover}.avatar-fallback{background:linear-gradient(145deg,#3a31ff,#c13aff);color:#fff;font-weight:800}

.section-kicker{display:block;color:#4934ff!important;font-size:13px!important;font-weight:800!important;letter-spacing:.14em!important;text-transform:uppercase}.primary-gradient{border:0;color:#fff;background:linear-gradient(105deg,var(--pink),#d826c1 48%,#7131ff);box-shadow:0 12px 30px rgba(167,46,224,.2);font-weight:800}.primary-gradient svg{stroke-width:2}.soft-button{border:0;background:#f1efff;color:#5537ff;font-weight:800}.empty{padding:28px;border-radius:24px;background:#fff;border:1px dashed #dfe1ef;text-align:center;color:var(--muted)}

/* home */
.marketing-hero{position:relative;isolation:isolate;overflow:hidden;min-height:452px;border-radius:28px;padding:28px 26px 112px;color:#fff;background-image:linear-gradient(90deg,#2428c8 0%,rgba(45,35,202,.97) 42%,rgba(33,21,126,.53) 68%,rgba(25,15,92,.15) 100%),var(--hero-art);background-size:100% 100%,auto 100%;background-position:left top,right center;background-repeat:no-repeat;box-shadow:var(--shadow)}
.marketing-hero:after{content:"";position:absolute;inset:auto 0 0;height:42%;z-index:-1;background:linear-gradient(180deg,transparent,rgba(20,17,112,.22))}.marketing-hero-copy{width:min(57%,470px);position:relative;z-index:1}.marketing-pill{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px;border-radius:999px;border:1px solid rgba(255,255,255,.27);background:rgba(255,255,255,.11);font-size:12px;font-weight:800;letter-spacing:.07em}.marketing-pill i{width:17px;height:17px;color:#ffd36a}.marketing-pill svg{width:17px;height:17px;stroke-width:1.8}.marketing-hero h1{margin:20px 0 14px;font-size:clamp(38px,6.4vw,61px);line-height:.98;letter-spacing:-.055em;font-weight:800}.marketing-hero p{margin:0 0 22px;color:rgba(255,255,255,.85);font-size:17px;line-height:1.42}.marketing-cta{width:min(100%,430px);height:76px;border-radius:22px;padding:0 22px;display:flex;align-items:center;justify-content:space-between}.marketing-cta span{display:flex;align-items:center;gap:12px;font-size:20px}.marketing-cta span svg,.marketing-cta>svg{width:24px;height:24px}.marketing-proof{position:absolute;left:24px;right:24px;bottom:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.marketing-proof>div{min-height:68px;padding:12px 14px;display:flex;align-items:center;gap:12px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(10px)}.marketing-proof i{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.13)}.marketing-proof i svg{width:22px;height:22px}.marketing-proof span{font-size:13px;line-height:1.18;font-weight:650}
.steps-section{margin-top:16px;padding:22px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow-sm)}.steps-section h2{margin:6px 0 18px;font-size:32px;letter-spacing:-.045em}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.steps-grid article{position:relative;min-height:180px;padding:16px 12px 18px;border-radius:20px;background:linear-gradient(180deg,#faf9ff,#f5f3ff);text-align:center}.step-no{position:absolute;top:13px;left:13px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#eee9ff;color:#5538ff;font-size:14px;font-weight:800}.steps-grid article>i{width:60px;height:60px;margin:3px auto 12px;border-radius:50%;display:grid;place-items:center;background:#e9e5ff;color:#4e33ff}.steps-grid article>i svg{width:29px;height:29px;stroke-width:1.8}.steps-grid b{display:block;font-size:18px}.steps-grid small{display:block;margin-top:8px;color:var(--muted);font-size:13px;line-height:1.4}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:30px 4px 14px}.section-heading h2{margin:5px 0 0;font-size:31px;line-height:1;letter-spacing:-.045em}.section-heading button{border:0;background:none;color:#5136ff;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}.section-heading button svg{width:19px;height:19px}

/* shared cards/catalog */
.trend-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.trend-card{overflow:hidden;border-radius:24px;background:#fff;border:1px solid #e9eaf4;box-shadow:var(--shadow-sm);color:var(--text);position:relative}.trend-media{height:210px;position:relative;overflow:hidden;background:#ecebfa}.trend-media>.cover,.split-cover,.split-pane,.split-pane img{width:100%;height:100%}.trend-media>.cover,.split-pane img{display:block;object-fit:cover}.split-cover{display:grid;grid-template-columns:1fr 1fr;position:relative}.split-pane{overflow:hidden}.split-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-1px)}.card-badge{position:absolute;right:10px;top:10px;z-index:2;display:flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:999px;color:#fff;font-size:10px;font-weight:800;letter-spacing:.05em;background:linear-gradient(100deg,#6f53ff,#5c37ff);box-shadow:0 6px 16px rgba(76,47,255,.25)}.card-badge.hot{background:linear-gradient(100deg,#ff672b,#ff3574)}.card-badge-icon{width:14px;height:14px}.card-badge-icon svg{width:14px;height:14px;stroke-width:2}.trend-card-body{position:relative;min-height:130px;padding:15px 58px 16px 16px}.trend-card-body h3{margin:0 0 7px;font-family:Georgia,"Times New Roman",serif;font-size:21px;line-height:1.1;font-weight:700;letter-spacing:-.025em}.trend-card-body p{margin:0;color:var(--muted);font-size:13px;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-arrow{position:absolute;right:14px;bottom:16px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#f2f0ff;color:#593cff}.card-arrow svg{width:18px;height:18px;stroke-width:2.2}
.catalog-head{padding:16px 4px 14px}.catalog-head h1,.profile-heading h1{margin:6px 0 10px;font-size:clamp(39px,6vw,58px);line-height:1;letter-spacing:-.055em}.catalog-head p{margin:0;color:var(--muted);font-size:20px;line-height:1.45}.catalog-search{height:82px;margin:12px 0 16px;padding:0 22px;display:flex;align-items:center;gap:16px;border:1px solid #e3e5f1;border-radius:24px;background:#fff}.catalog-search i{width:31px;height:31px;color:#697397}.catalog-search svg{width:31px;height:31px;stroke-width:1.7}.catalog-search input{width:100%;border:0;outline:0;background:none;color:var(--text);font-size:22px}.catalog-search input::placeholder{color:#aeb5cf}.catalog-chips{display:flex;gap:12px;overflow-x:auto;padding:0 0 15px;scrollbar-width:none}.catalog-chips::-webkit-scrollbar{display:none}.catalog-chip{flex:0 0 auto;height:64px;padding:0 22px;border:0;border-radius:22px;background:#f2f1fb;color:var(--text);display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700}.catalog-chip i{width:23px;height:23px;color:#5538ff}.catalog-chip svg{width:23px;height:23px;stroke-width:2}.catalog-chip.active{color:#fff;background:linear-gradient(120deg,#5539ff,#6a31ff);box-shadow:0 9px 24px rgba(89,51,255,.2)}.catalog-chip.active i{color:#fff}.catalog-grid{padding-bottom:10px}.results-enter{animation:fadeUp .22s ease both}

/* history */
.results-hero{position:relative;overflow:hidden;min-height:280px;padding:34px 30px;border-radius:28px;color:#fff;background-image:linear-gradient(90deg,#2b2ec8 0%,rgba(46,35,198,.94) 43%,rgba(34,21,120,.35) 77%,rgba(17,11,74,.08)),var(--hero-art);background-size:100% 100%,auto 100%;background-position:left top,right center;background-repeat:no-repeat}.results-hero>div{width:63%}.results-hero span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em}.results-hero span i{width:17px;height:17px}.results-hero span svg{width:17px;height:17px}.results-hero h1{margin:20px 0 8px;font-size:48px;line-height:1;letter-spacing:-.055em}.results-hero p{margin:0;color:rgba(255,255,255,.85);font-size:16px;line-height:1.4}.results-hero>strong{position:absolute;right:24px;bottom:28px;width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);font-size:38px}.results-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 18px}.results-stats article{min-height:185px;padding:20px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}.results-stats i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center}.results-stats i svg{width:31px;height:31px;stroke-width:1.9}.results-stats .violet{background:#eee9ff;color:#593cff}.results-stats .orange{background:var(--orange-soft);color:#f29100}.results-stats .blue{background:#e8efff;color:#3b56ff}.results-stats b{display:block;margin-top:18px;font-size:42px;line-height:.9}.results-stats span{display:block;margin-top:9px;color:var(--muted);font-size:14px;line-height:1.18}.results-stats article:first-child span{color:#4f35ff;font-weight:700}.result-list{display:flex;flex-direction:column;gap:16px}.result-list-row{width:100%;min-height:200px;padding:14px;display:grid;grid-template-columns:36% 1fr 48px;gap:18px;align-items:center;border:1px solid var(--line);border-radius:28px;background:#fff;text-align:left;box-shadow:var(--shadow-sm)}.result-list-row .order-thumb{width:100%;height:170px;border-radius:20px;overflow:hidden;background:#eeeef8}.result-list-row .order-thumb img{width:100%;height:100%;object-fit:cover}.result-list-copy .status{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:999px;font-size:12px;font-weight:800}.status.success{background:#e5f8ed;color:#0b9b54}.status.failed{background:#ffe9e9;color:#c12e39}.status.processing{background:#eeeaff;color:#5a3cff}.result-list-copy h3{margin:14px 0 7px;font-size:28px;letter-spacing:-.04em}.result-list-copy p{margin:0;color:var(--muted);font-size:13px}.result-list-chevron{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#f3f1ff;color:#5a3cff}.result-list-chevron svg{width:18px;height:18px;stroke-width:2.2}.order-progress{margin-top:8px;color:var(--muted);font-size:11px;display:flex;gap:7px}.thumb-loader{display:grid;place-items:center;height:100%}.thumb-expired{font-size:11px;text-align:center;color:var(--muted);padding:8px}.mini-spinner,.button-spinner{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .7s linear infinite}

/* profile */
.profile-heading{padding:18px 4px 12px}.profile-card-new{position:relative;overflow:hidden;min-height:360px;padding:30px;border-radius:28px;color:#fff;background-image:linear-gradient(90deg,#2826ca 0%,rgba(41,31,184,.94) 44%,rgba(29,17,105,.35) 78%,rgba(20,13,76,.18)),var(--hero-art);background-size:100% 100%,auto 100%;background-position:left,right center;background-repeat:no-repeat}.profile-person{display:flex;align-items:center;gap:22px}.profile-avatar{position:relative;width:122px;height:122px;padding:5px;border-radius:50%;background:linear-gradient(145deg,#7c54ff,#f04ebf);box-shadow:0 0 0 3px rgba(255,255,255,.14)}.profile-avatar-image{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center}.profile-avatar button{position:absolute;right:-2px;bottom:4px;width:42px;height:42px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;background:rgba(77,64,204,.88);color:#fff}.profile-avatar button svg{width:18px;height:18px}.profile-person h2{margin:0;font-size:31px;letter-spacing:-.035em}.profile-person p{margin:8px 0 0;color:#b9b2ff;font-size:19px}.profile-divider{height:1px;margin:26px 0 24px;background:rgba(255,255,255,.22)}.profile-wallet{display:flex;align-items:center;gap:18px}.profile-wallet>i{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;background:rgba(118,75,255,.55)}.profile-wallet>i svg{width:38px;height:38px}.profile-wallet strong{display:block;font-size:55px;line-height:.9}.profile-wallet span{display:block;margin-top:8px;color:#bbb5ff;font-size:16px;font-weight:700}.profile-wallet button{margin-left:auto;height:74px;padding:0 30px;border:0;border-radius:22px;color:#fff;background:linear-gradient(105deg,#ff487d,#d928c4 50%,#8438ff);font-size:21px;font-weight:800;display:flex;align-items:center;gap:16px}.profile-wallet button svg{width:23px;height:23px}.partner-banner{width:100%;min-height:220px;margin-top:16px;padding:26px 26px;position:relative;overflow:hidden;border:0;border-radius:28px;color:#fff;background:linear-gradient(115deg,#2c33db,#4928db 55%,#6a2cf5);text-align:left;display:grid;grid-template-columns:1fr 250px 42px;align-items:center;box-shadow:var(--shadow)}.partner-banner>div:first-child{z-index:1}.partner-banner span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.07em}.partner-banner span i{width:17px;height:17px}.partner-banner b{display:block;margin-top:18px;font-size:31px;line-height:1.04;letter-spacing:-.04em}.partner-banner small{display:block;margin-top:13px;color:#c4c1ff;font-size:14px}.partner-art{width:250px;height:150px}.partner-art svg{width:100%;height:100%;stroke:none}.partner-banner>em{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12)}.partner-banner>em svg{width:20px;height:20px;stroke-width:2}.settings-kicker{margin:34px 4px 14px}.settings-list{overflow:hidden;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}.settings-list button{width:100%;min-height:102px;padding:16px 22px;border:0;border-bottom:1px solid var(--line);background:#fff;display:grid;grid-template-columns:62px 1fr 28px;gap:18px;align-items:center;text-align:left}.settings-list button:last-child{border-bottom:0}.settings-list button>i{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:#efebff;color:#5a3cff}.settings-list button>i svg{width:31px;height:31px;stroke-width:1.9}.settings-list b{display:block;font-size:21px}.settings-list small{display:block;margin-top:6px;color:var(--muted);font-size:14px}.settings-list em{color:#151a38}.settings-list em svg{width:20px;height:20px;stroke-width:2.2}

/* product detail is a full route */
.product-page{padding:0 2px 12px}.product-visual{overflow:hidden;border-radius:28px;background:#ececf8;aspect-ratio:1.67/1}.product-visual>img,.product-before-after,.product-before-after>div,.product-before-after img{width:100%;height:100%}.product-visual>img,.product-before-after img{display:block;object-fit:cover}.product-before-after{display:grid;grid-template-columns:1fr 1fr;position:relative}.product-before-after>div{overflow:hidden}.product-before-after>span{position:absolute;left:50%;top:0;bottom:0;width:4px;background:#fff;transform:translateX(-2px) rotate(6deg);transform-origin:center}.product-page>h1{margin:24px 20px 10px;font-size:44px;line-height:1;letter-spacing:-.055em}.product-description{margin:0 20px;color:var(--muted);font-size:18px;line-height:1.5}.product-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 18px 14px}.product-facts article{min-height:132px;padding:20px;display:flex;align-items:center;gap:16px;border-radius:22px;background:#f8f7ff;border:1px solid #eceaf8}.product-facts i{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#ece8ff;color:#5a3cff}.product-facts i svg{width:30px;height:30px;stroke-width:1.9}.product-facts b{display:block;font-size:18px}.product-facts small{display:block;margin-top:6px;font-size:17px;color:var(--text)}.product-tags{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 18px 14px}.product-tags span{min-height:56px;padding:0 16px;border-radius:18px;background:#f2efff;color:#3f4672;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px}.product-tags svg{width:19px;height:19px;color:#5638ff;stroke-width:2}.generation-price{margin:14px 18px;padding:22px;border-radius:24px;background:linear-gradient(110deg,#f7f2ff,#e9e1ff 70%,#d7cbff);display:flex;align-items:center;justify-content:space-between}.generation-price-label{display:flex;align-items:center;gap:15px;color:#5538ff}.generation-price-label>span:first-child{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff}.generation-price-label svg{width:27px;height:27px;stroke-width:2}.generation-price-label small{display:block;font-size:16px;font-weight:700}.generation-price-label em{display:block;margin-top:5px;text-decoration:line-through;color:#9891c5;font-size:13px}.generation-price-value{display:flex;align-items:baseline;gap:8px;color:#4f30ff}.generation-price-value strong{font-size:42px}.generation-price-value span{font-size:14px;font-weight:800;text-transform:uppercase}.product-photo-tip{margin:14px 18px;min-height:148px;padding:12px;display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:center;border-radius:24px;background:#fff;border:1px solid var(--line)}.product-photo-tip img{width:190px;height:124px;border-radius:18px;object-fit:cover}.product-photo-tip b{font-size:20px;color:#7d3a2d}.product-photo-tip p{margin:7px 0 0;color:var(--muted);font-size:14px;line-height:1.45}.promo-note{margin:14px 18px;padding:12px 15px;border-radius:16px;background:#fff3d8;color:#8c5a00;display:flex;align-items:center;gap:10px;font-weight:700}.promo-note i{width:22px;height:22px}.product-start{width:calc(100% - 36px);height:78px;margin:16px 18px 6px;padding:0 28px;border-radius:24px;display:flex;align-items:center;justify-content:space-between;font-size:20px}.product-start svg{width:24px;height:24px}

/* topup full page */
.topup-page{padding:0 2px 18px}.topup-hero-new{min-height:330px;padding:34px 34px;border-radius:28px;color:#fff;background-image:linear-gradient(90deg,#2c30d3 0%,rgba(54,39,210,.94) 43%,rgba(46,27,145,.38) 74%,rgba(20,12,78,.1)),var(--hero-art);background-size:100% 100%,auto 100%;background-position:left,right center;background-repeat:no-repeat}.topup-hero-new>span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em}.topup-hero-new>span i{width:18px;height:18px;color:#ffd364}.topup-hero-new h1{margin:24px 0 18px;font-size:58px;line-height:.92;letter-spacing:-.06em}.topup-hero-new p{margin:0;color:#d4d2ff;font-size:20px;line-height:1.45}.topup-presets-new{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}.topup-preset{position:relative;min-height:122px;border:1px solid var(--line);border-radius:24px;background:#fff;color:var(--text)}.topup-preset strong{font-size:31px}.topup-preset.selected{color:#fff;border-color:transparent;background:linear-gradient(120deg,#9e48ff,#cc38dc 60%,#f049b7);box-shadow:0 0 0 3px #d6a4ff,0 12px 25px rgba(145,64,255,.18)}.topup-preset.selected:after{content:"";position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;background:#fff}.topup-preset.selected:before{content:"";position:absolute;right:25px;top:23px;width:9px;height:5px;border-left:2px solid #7141ff;border-bottom:2px solid #7141ff;transform:rotate(-45deg);z-index:2}.topup-bonus{position:absolute;left:12px;bottom:9px;font-size:10px;color:#6e44ff}.topup-preset.selected .topup-bonus{color:#fff}.topup-custom-new,.topup-payment{padding:26px;border:1px solid var(--line);border-radius:28px;background:#fff;margin-top:16px}.topup-custom-new h2,.topup-payment h2{margin:0 0 18px;font-size:26px}.custom-input{height:92px;padding:0 24px;border:1px solid #dfe0ef;border-radius:22px;background:#fafaff;display:flex;align-items:center}.custom-input input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text);font-size:34px;font-weight:700}.custom-input span{font-size:30px;color:#7d84a6;font-weight:700}.topup-custom-new p{margin:14px 0 0;color:var(--muted);font-size:14px}.topup-summary-new{display:none}.topup-summary-new.ready{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;padding:18px 24px;border-radius:22px;background:#efedff}.topup-summary-new>div:last-child{text-align:right}.topup-summary-new small{display:block;color:var(--muted);font-size:12px}.topup-summary-new b{display:block;margin-top:6px;font-size:21px}.topup-summary-new em{font-size:11px;color:#5638ff}.topup-methods-new{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.topup-method-new{min-height:140px;padding:20px;border:1px solid var(--line);border-radius:22px;background:#fff;display:grid;grid-template-columns:62px 1fr auto;gap:16px;align-items:center;text-align:left}.topup-method-new>i{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:#f1efff;color:#222945}.topup-method-new>i svg{width:30px;height:30px;stroke-width:1.8}.topup-method-new b{display:block;font-size:19px}.topup-method-new small{display:block;margin-top:6px;color:var(--muted);font-size:13px}.topup-method-new>em{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#f0edff;color:#5e3dff}.topup-method-new>em svg{width:18px;height:18px;stroke-width:2.3}.topup-method-new .soon{width:auto;height:auto;padding:7px 10px;border-radius:999px;color:#9da3bb;background:#f5f5fb;font-size:10px;font-style:normal}.topup-method-new.selected{border-color:#8b74ff;box-shadow:0 0 0 2px #eee9ff}.topup-method-new:disabled{opacity:.58}.topup-note{margin-top:16px;min-height:96px;padding:18px 22px;border-radius:22px;background:#eeeaff;display:flex;align-items:center;gap:16px;color:#5235ff}.topup-note i{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#e3ddff}.topup-note i svg{width:27px;height:27px;stroke-width:2}.topup-note b{font-size:17px;line-height:1.25}.topup-pay{width:100%;height:80px;margin-top:16px;border-radius:24px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;font-size:22px}.topup-pay>span{display:flex;align-items:center;gap:12px}.topup-pay svg{width:25px;height:25px}.topup-pay:disabled{opacity:.45}

/* result full page */
.result-page{padding:0 2px}.result-media-grid{display:grid;gap:16px}.result-media-grid.single{grid-template-columns:1fr}.result-media{display:flex;flex-direction:column;gap:14px}.result-media img{width:100%;max-height:700px;object-fit:contain;border-radius:28px;background:#eef0f8}.save-result{height:80px;border-radius:24px;display:flex;align-items:center;justify-content:center;gap:18px;font-size:22px}.save-result svg{width:28px;height:28px}.retention-card{margin-top:18px;padding:26px 30px;min-height:155px;border:1px solid var(--line);border-radius:28px;background:#fff;display:flex;align-items:center;gap:24px}.retention-card>i{width:84px;height:84px;border-radius:24px;display:grid;place-items:center;background:#efebff;color:#5738ff}.retention-card>i svg{width:44px;height:44px;stroke-width:1.8}.retention-card b{font-size:24px}.retention-card p{margin:8px 0 0;color:var(--muted);font-size:17px;line-height:1.4}.result-benefits-new{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.result-benefits-new article{min-height:112px;padding:18px 20px;border-radius:22px;background:#f2f0ff;display:flex;align-items:center;gap:16px}.result-benefits-new i{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#e4e0ff;color:#5638ff}.result-benefits-new i svg{width:28px;height:28px;stroke-width:1.9}.result-benefits-new b{display:block;font-size:17px}.result-benefits-new small{display:block;margin-top:5px;color:var(--muted);font-size:14px}.result-other,.result-retry{width:100%;height:78px;border-radius:24px;font-size:21px;font-weight:800;display:grid;grid-template-columns:40px 1fr 30px;align-items:center;padding:0 26px}.result-other{border:0;color:#fff;background:linear-gradient(110deg,#5b3cff,#6b32ff)}.result-retry{margin-top:14px;border:1px solid var(--line);color:#5638ff;background:#fff}.result-other svg,.result-retry svg{width:26px;height:26px}.result-retry{grid-template-columns:40px 1fr 40px}.result-retry svg:last-child{display:none}.result-expired{min-height:320px;padding:30px;border-radius:28px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;text-align:center}.result-expired i{width:70px;height:70px;border-radius:22px;display:grid;place-items:center;background:#eeeaff;color:#5a3cff}.result-expired i svg{width:34px;height:34px}.result-expired b{font-size:22px}.result-expired span{color:var(--muted);max-width:380px}

/* bottom nav */
.bottom-nav{position:fixed;z-index:35;left:50%;bottom:0;transform:translateX(-50%);width:min(860px,100%);height:92px;padding:9px 18px calc(9px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.98)!important;border:0!important;box-shadow:0 -12px 35px rgba(54,48,128,.035);backdrop-filter:blur(18px);transition:transform .22s ease,opacity .22s ease}.bottom-nav.is-hidden{transform:translate(-50%,110%);opacity:0;pointer-events:none}.nav-item{border:0!important;background:none!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#697493!important}.nav-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center}.nav-icon svg{width:26px;height:26px;stroke-width:1.9}.nav-item em{font-size:12px!important;font-style:normal;font-weight:700!important}.nav-item.active{color:#5638ff!important}.nav-item.active .nav-icon{background:#eee9ff}.nav-item.active em{color:#5638ff}

/* modal framework, referral and wizard */
.modal-backdrop{position:fixed;z-index:100;inset:0;padding:max(10px,var(--safe-top)) 10px max(10px,var(--safe-bottom));display:flex;align-items:center;justify-content:center;background:rgba(23,25,52,.43);backdrop-filter:blur(11px);overscroll-behavior:contain}.sheet{position:relative;width:min(100%,830px);max-height:calc(100dvh - 20px);overflow:auto;border-radius:34px;background:#fff!important;color:var(--text);padding:18px 28px 28px;box-shadow:0 28px 90px rgba(22,19,65,.24);overscroll-behavior:contain;scrollbar-width:thin;animation:sheetIn .22s ease-out}.sheet-handle{width:82px;height:8px;margin:0 auto 18px;border-radius:999px;background:#d9d7eb}.modal-close,.modal-back{position:sticky;top:10px;z-index:8;width:58px;height:58px;border:0;border-radius:50%;display:grid;place-items:center;background:#f4f2ff;color:var(--text)}.modal-close{float:right;margin-top:-4px}.modal-back{float:left;margin-top:-4px}.modal-close svg,.modal-back svg{width:27px;height:27px;stroke-width:2}.modal-dismiss{transform:translateY(50px);opacity:0;transition:.2s ease}.modal-fade{opacity:0;transition:.2s ease}.sheet.dragging{transition:none!important}
.referral-sheet-new{padding-top:14px}.referral-hero-new{clear:both;min-height:400px;margin-top:18px;padding:28px;border-radius:28px;color:#fff;background-image:linear-gradient(90deg,#282bd1 0%,rgba(56,37,212,.93) 48%,rgba(38,20,125,.28) 78%,rgba(18,10,67,.08)),var(--hero-art);background-size:100% 100%,auto 100%;background-position:left,right center;background-repeat:no-repeat}.referral-hero-new>div{width:58%}.referral-hero-new>div>span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em}.referral-hero-new>div>span i{width:17px;height:17px}.referral-hero-new h2{margin:20px 0 16px!important;font-size:50px!important;line-height:.98!important;letter-spacing:-.055em!important;color:#fff}.referral-hero-new h2 em{font-style:normal;color:#ff8ac7}.referral-hero-new p{margin:0;color:#e2ddff;font-size:16px;line-height:1.35}.referral-balance{width:min(100%,450px);height:94px;margin-top:20px;padding:0 18px;border:1px solid rgba(255,255,255,.25);border-radius:22px;background:rgba(255,255,255,.13);display:grid;grid-template-columns:60px 1fr 25px;align-items:center;gap:14px}.referral-balance>i{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#a765ff,#793bff)}.referral-balance>i svg{width:28px;height:28px}.referral-balance small{display:block;color:#e2ddff;font-size:13px}.referral-balance b{display:block;margin-top:4px;font-size:24px}.referral-balance>svg{width:20px;height:20px}.referral-stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.referral-stat-cards article{min-height:160px;padding:17px;border:1px solid var(--line);border-radius:22px;background:#fff}.referral-stat-cards i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#ece9ff;color:#583aff}.referral-stat-cards i.orange{background:#fff0e4;color:#ff6b30}.referral-stat-cards i svg{width:25px;height:25px;stroke-width:1.9}.referral-stat-cards b{display:block;margin-top:15px;font-size:30px}.referral-stat-cards span{display:block;margin-top:5px;color:var(--muted);font-size:13px;line-height:1.2}.referral-panel{margin-top:14px;padding:22px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow-sm)}.referral-panel h3{margin:0;font-size:25px;letter-spacing:-.04em}.referral-panel>p{margin:6px 0 14px;color:var(--muted);font-size:14px}.referral-url{height:68px;padding:0 14px;border:1px solid #dfe1ee;border-radius:18px;display:grid;grid-template-columns:28px 1fr 42px;gap:10px;align-items:center;background:#fff}.referral-url>i{color:#3d4670}.referral-url>i svg,.referral-url>button svg{width:23px;height:23px;stroke-width:1.8}.referral-url input{min-width:0;border:0;outline:0;background:none;color:#212846;font-size:14px}.referral-url button{width:42px;height:42px;border:0;border-radius:12px;background:#f1efff;color:#5638ff;display:grid;place-items:center}.referral-button-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}.referral-button-row button{min-height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:15px}.referral-button-row button svg{width:21px;height:21px}.referral-info{margin-top:10px;padding:13px;border-radius:16px;background:#f1efff;color:var(--muted);display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;font-size:12px;line-height:1.4}.referral-info i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#e4ddff;color:#583aff}.referral-info svg{width:18px;height:18px}.referral-select{width:100%;height:64px;padding:0 16px;border:1px solid #dfe1ee;border-radius:18px;background:#fff;color:var(--text);font-size:15px}.referral-card-preview{margin-top:12px;padding:12px;border-radius:18px;background:#f3f1ff;display:grid;grid-template-columns:150px 1fr;gap:14px}.referral-card-preview-media{height:115px;border-radius:14px;overflow:hidden;background:#eae8f8}.referral-card-preview-media img{width:100%;height:100%;object-fit:cover}.referral-card-preview-copy span{color:#5a3cff;font-size:11px;font-weight:800;text-transform:uppercase}.referral-card-preview-copy b{display:block;margin-top:7px;font-size:18px}.referral-card-preview-copy p{margin:6px 0;color:var(--muted);font-size:12px}.referral-card-preview-price{font-size:13px;font-weight:800}.referral-money-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.referral-money-actions button{min-height:86px;padding:12px 14px;border:0;border-radius:20px;background:#fff;display:grid;grid-template-columns:52px 1fr 22px;gap:12px;align-items:center;text-align:left;box-shadow:var(--shadow-sm)}.referral-money-actions button>i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center}.referral-money-actions .blue{background:#e8f0ff;color:#3159ff}.referral-money-actions .pink{background:#ffe7f0;color:#ff3f79}.referral-money-actions i svg{width:25px;height:25px}.referral-money-actions b{display:block;font-size:15px}.referral-money-actions small{display:block;margin-top:4px;color:var(--muted);font-size:11px}.referral-money-actions>button>svg{width:18px;height:18px}.referral-money-panel{margin-bottom:8px}.referral-amount-field{height:66px;padding:0 10px 0 16px;border:1px solid #dfe1ee;border-radius:17px;display:flex;align-items:center;gap:8px}.referral-amount-field input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:19px}.referral-amount-field button{height:44px;border:0;border-radius:13px;background:#f2efff;color:#6041ff;font-weight:700}.money-label{display:block;margin:18px 0 8px;font-weight:700}.money-submit{width:100%;height:60px;border-radius:17px;margin-top:10px}.referral-panel>small{display:block;margin-top:10px;color:var(--muted);font-size:11px;line-height:1.4}.referral-extra{margin-top:14px;border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden}.referral-extra summary{height:70px;padding:0 20px;list-style:none;display:flex;align-items:center;justify-content:space-between;font-weight:800}.referral-extra summary::-webkit-details-marker{display:none}.referral-extra summary svg{width:18px;height:18px}.referral-extra-body{padding:0 20px 20px}.referral-extra-body h3{margin:20px 0 12px}.referral-notify-list{display:flex;flex-direction:column;gap:10px}.referral-notify-row{min-height:74px;padding:12px 14px;border-radius:17px;background:#f3f1ff;display:flex;align-items:center;justify-content:space-between}.referral-notify-row b{display:block;font-size:13px}.referral-notify-row small{display:block;margin-top:4px;color:var(--muted);font-size:11px}.referral-notify-row input{width:44px;height:24px}.referral-history-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px;border-radius:16px;background:#f0eeff}.referral-history-tabs button{border:0;border-radius:12px;background:none;min-height:44px;color:var(--muted);font-size:12px;font-weight:800}.referral-history-tabs button.active{background:#fff;color:var(--text)}.referral-tab-panel{display:none;padding-top:12px}.referral-tab-panel.active{display:block}.referral-person,.referral-commission-row,.referral-withdraw-row{padding:12px;border:1px solid var(--line);border-radius:14px;margin-top:8px}.referral-empty{padding:18px;border-radius:16px;background:#f7f6ff;color:var(--muted)}

/* creation wizard */
.creation-sheet{width:min(100%,900px);padding:18px 38px 30px}.creation-stepper{clear:both;max-width:560px;margin:16px auto 48px;display:grid;grid-template-columns:74px 1fr 74px 1fr 74px;align-items:start}.creation-step-node{text-align:center}.creation-step-node>span{width:68px;height:68px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:#f0effb;color:#5f6687;font-size:22px;font-weight:800;border:1px solid transparent}.creation-step-node>span svg{width:30px;height:30px;stroke-width:2.3}.creation-step-node small{display:block;margin-top:10px;color:#7f88aa;font-size:13px;font-weight:700}.creation-step-node.active>span{color:#fff;background:linear-gradient(145deg,#7557ff,#5738ff);box-shadow:0 0 0 12px #f2eeff,0 10px 24px rgba(88,55,255,.2)}.creation-step-node.active small{color:#5638ff}.creation-step-node.complete>span{color:#fff;background:linear-gradient(145deg,#7557ff,#5738ff)}.creation-connector{padding-top:33px}.creation-connector i{display:block;height:2px;background:#dadced}.creation-connector.complete i{background:#6b4cff}.create-step-copy{text-align:center;max-width:700px;margin:0 auto 28px}.create-step-copy>span{color:#5437ff;font-size:12px;font-weight:800;letter-spacing:.12em}.create-step-copy h2{margin:14px 0 10px!important;font-size:44px!important;line-height:1!important;letter-spacing:-.055em!important}.create-step-copy p{margin:0;color:var(--muted);font-size:20px;line-height:1.5}.upload-zone-new{min-height:390px;border:2px dashed #bcb3ff;border-radius:28px;background:linear-gradient(180deg,#fcfbff,#f8f7ff);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer}.upload-zone-new input{display:none}.upload-plus{width:104px;height:104px;margin-bottom:18px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#8064ff,#5c3cff);box-shadow:0 14px 28px rgba(91,58,255,.2)}.upload-plus svg{width:52px;height:52px;stroke-width:1.5}.upload-zone-new strong{font-size:26px}.upload-zone-new small{margin-top:10px;color:var(--muted);font-size:17px}.selection-status{width:max-content;max-width:100%;margin:16px auto 0;padding:12px 18px;border-radius:999px;background:#e5f8ed;color:#0a9f55;display:flex;align-items:center;gap:8px;font-weight:800}.selection-status svg{width:20px;height:20px;stroke-width:2.3}.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.preview-grid.single{grid-template-columns:minmax(0,300px);justify-content:center}.preview{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#f0eff8}.preview img{width:100%;height:100%;object-fit:cover}.preview button{position:absolute;right:8px;top:8px;width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(19,22,45,.62);color:#fff}.preview button svg{width:17px;height:17px}.legal-link{display:block;margin:24px auto 0;border:0;background:none;color:#687194;text-decoration:underline;font-size:16px}.creation-main-button{width:100%;height:82px;margin-top:24px;border-radius:24px;display:flex;align-items:center;justify-content:center;gap:18px;font-size:23px}.creation-main-button>svg{width:25px;height:25px}.creation-main-button:disabled{background:#ecebf8;color:#a3a8c0;box-shadow:none}.confirm-summary{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:#fff}.confirm-summary>div{min-height:92px;padding:14px 22px;display:grid;grid-template-columns:58px 1fr auto;gap:16px;align-items:center;border-bottom:1px solid var(--line)}.confirm-summary>div:last-child{border-bottom:0}.confirm-summary i{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#f0edff;color:#5738ff}.confirm-summary i svg{width:27px;height:27px;stroke-width:1.9}.confirm-summary span{font-size:20px}.confirm-summary span small{display:block;margin-top:5px;color:var(--muted);font-size:12px;text-decoration:line-through}.confirm-summary b{font-size:20px}.confirm-summary .price b{color:#5638ff;font-size:22px;text-transform:uppercase}.ai-note{margin-top:16px;padding:18px 20px;border:1px solid #ffdeb2;border-radius:20px;background:#fff8ef;display:flex;gap:15px;align-items:center}.ai-note>i{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#ffe5c2;color:#f29b17}.ai-note i svg{width:28px;height:28px}.ai-note b{display:block;font-size:19px}.ai-note small{display:block;margin-top:5px;color:#647093;font-size:14px;line-height:1.35}.legal-gate-new{margin-top:16px;padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line)}.legal-gate-new h3{margin:0 0 15px;font-size:24px}.legal-gate-new label{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;margin-top:12px}.legal-gate-new input{position:absolute;opacity:0}.legal-gate-new label>i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#efeaff;color:transparent}.legal-gate-new label input:checked+i{color:#fff;background:linear-gradient(145deg,#7a59ff,#5d39ff)}.legal-gate-new i svg{width:23px;height:23px}.legal-gate-new span{color:#5d6689;font-size:14px;line-height:1.45}.legal-gate-new button{border:0;background:none;color:#583aff;text-decoration:underline;padding:0}.create-progress{text-align:center}.progress-visual{width:150px;height:150px;margin:12px auto 22px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 35% 30%,#b79aff,#6741ff 55%,#4a2bd0);box-shadow:0 18px 46px rgba(91,58,255,.22)}.progress-visual svg{width:66px;height:66px}.progress-card{max-width:520px;margin:0 auto;padding:18px;border-radius:20px;background:#f3f1ff;display:flex;align-items:center;gap:14px;text-align:left}.progress-pulse{width:14px;height:14px;border-radius:50%;background:#5e3cff;box-shadow:0 0 0 7px #dfd9ff;animation:pulseRing 1.4s infinite}.progress-card b{display:block}.progress-card small{display:block;margin-top:4px;color:var(--muted)}.progress-hint{max-width:580px;margin:18px auto;color:var(--muted);line-height:1.45}.progress-collapse{height:58px;padding:0 26px;border-radius:18px}.creation-stage{overflow:hidden;transition:height .36s ease}.create-step-panel{transition:transform .35s ease,opacity .35s ease}.create-step-panel.is-staging.from-right{transform:translateX(35px);opacity:0}.create-step-panel.is-staging.from-left{transform:translateX(-35px);opacity:0}.create-step-panel.exit-left{transform:translateX(-35px);opacity:0}.create-step-panel.exit-right{transform:translateX(35px);opacity:0}.create-step-panel.enter-active{transform:none;opacity:1}

/* generic legacy modals */
.legal-sheet,.support-sheet,.tariffs-sheet{padding:20px 28px 28px}.legal-hero{clear:both;margin-top:18px;padding:18px;border-radius:22px;background:#f2efff;display:flex;align-items:center;gap:15px}.legal-hero>span{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:#e6e0ff;color:#5738ff}.legal-hero>span svg{width:26px;height:26px}.legal-hero h2{margin:0!important;font-size:26px!important}.legal-hero p{margin:5px 0 0;color:var(--muted)}.legal-list,.tariff-list{margin-top:14px}.legal-row,.tariff-row,.support-contact{width:100%;min-height:78px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;margin-top:10px}.legal-row{display:flex;align-items:center;justify-content:space-between;text-align:left}.legal-row small{display:block;margin-top:4px;color:var(--muted)}.legal-row em{font-style:normal;color:#5638ff}.support-contact b{display:block;font-size:22px}.support-contact p{color:var(--muted);line-height:1.45}.support-contact .primary,.tariff-topup-cta{width:100%;height:58px;border:0;border-radius:18px;background:linear-gradient(105deg,#ff407c,#7b34ff);color:#fff;font-weight:800}.tariff-row{display:flex;align-items:center;justify-content:space-between}.tariff-row small{display:block;color:var(--muted)}.tariff-row strong{font-size:20px;color:#5638ff}.tariff-rate{margin-top:14px;padding:16px;border-radius:18px;background:#f3f1ff}.tariff-rate b{display:block}.tariff-rate span{color:var(--muted)}
.topup-checkout-stub{text-align:center}.checkout-stub-mark{width:74px;height:74px;margin:28px auto 12px;border-radius:50%;display:grid;place-items:center;background:#e6f8ed;color:#0ca35a}.checkout-stub-mark svg{width:36px;height:36px}.checkout-stub-summary{display:grid;gap:8px;margin:16px 0}.checkout-stub-summary>div{padding:13px;border-radius:14px;background:#f4f2ff;display:flex;justify-content:space-between}.checkout-stub-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.checkout-stub-actions button{height:56px;border-radius:16px;border:0}.checkout-stub-actions .primary{background:#5638ff;color:#fff}.checkout-stub-actions .secondary{background:#f1efff;color:#5638ff}

/* toast */
.toast-root{position:fixed;z-index:300;top:82px;left:50%;transform:translateX(-50%);width:min(92%,520px)}.toast{margin-bottom:8px;padding:13px 16px;border-radius:16px;background:#111632;color:#fff;box-shadow:0 14px 35px rgba(17,22,50,.2)}

@keyframes sheetIn{from{transform:translateY(22px);opacity:.55}to{transform:none;opacity:1}}@keyframes fadeUp{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulseRing{50%{box-shadow:0 0 0 12px rgba(223,217,255,.25)}}

/* tablet/small Telegram webview */
@media(max-width:760px){
  .app-shell{max-width:100%}.main{padding:12px 10px 24px!important}.topbar{padding:12px 10px 11px}.brand-mark{width:48px;height:48px}.brand{font-size:26px!important}.brand-sub{font-size:13px!important}.balance-pill{height:46px;padding:0 14px}.balance-pill b{font-size:21px!important}.quick-topup{width:43px;height:43px}.top-avatar{width:44px;height:44px}
  .marketing-hero{min-height:496px;padding:26px 18px 118px;border-radius:26px;background-image:linear-gradient(90deg,#252bd3 0%,rgba(55,38,211,.96) 47%,rgba(43,25,146,.47) 72%,rgba(24,14,83,.13) 100%),var(--hero-art)}.marketing-hero-copy{width:64%}.marketing-hero h1{font-size:clamp(34px,7.4vw,52px)}.marketing-hero p{font-size:15px}.marketing-cta{height:66px;padding:0 18px}.marketing-cta span{font-size:18px}.marketing-proof{left:18px;right:18px;bottom:16px;gap:8px}.marketing-proof>div{min-height:62px;padding:9px 10px;gap:8px}.marketing-proof i{width:32px;height:32px;flex-basis:32px}.marketing-proof i svg{width:19px;height:19px}.marketing-proof span{font-size:11px}
  .steps-section{padding:20px 16px}.steps-section h2{font-size:29px}.steps-grid{gap:10px}.steps-grid article{min-height:162px;padding:14px 9px}.step-no{width:36px;height:36px;font-size:12px}.steps-grid article>i{width:52px;height:52px}.steps-grid article>i svg{width:24px;height:24px}.steps-grid b{font-size:16px}.steps-grid small{font-size:11px}.section-heading h2{font-size:29px}.trend-grid{gap:12px}.trend-media{height:178px}.trend-card-body{min-height:124px;padding:14px 52px 15px 14px}.trend-card-body h3{font-size:19px}.trend-card-body p{font-size:12px}.card-arrow{width:40px;height:40px;right:12px;bottom:14px}
  .catalog-head h1,.profile-heading h1{font-size:45px}.catalog-head p{font-size:17px}.catalog-search{height:72px}.catalog-search input{font-size:19px}.catalog-chip{height:58px;padding:0 18px;font-size:15px}
  .results-hero{min-height:270px;padding:28px 24px}.results-hero h1{font-size:42px}.results-hero p{font-size:14px}.results-stats{gap:12px}.results-stats article{min-height:172px;padding:17px}.results-stats i{width:58px;height:58px}.results-stats b{font-size:38px}.result-list-row{grid-template-columns:30% 1fr 44px;min-height:175px;gap:14px}.result-list-row .order-thumb{height:140px}.result-list-copy h3{font-size:23px}
  .profile-card-new{min-height:340px;padding:26px}.profile-avatar{width:110px;height:110px}.profile-person h2{font-size:28px}.profile-wallet strong{font-size:50px}.profile-wallet button{height:68px;padding:0 24px;font-size:19px}.partner-banner{grid-template-columns:1fr 190px 36px;padding:23px}.partner-banner b{font-size:28px}.partner-art{width:190px}.settings-list b{font-size:19px}
  .product-page>h1{font-size:39px}.product-description{font-size:16px}.product-facts{gap:12px;margin-left:14px;margin-right:14px}.product-facts article{padding:16px;gap:12px}.product-facts i{width:54px;height:54px}.product-tags{margin-left:14px;margin-right:14px;gap:10px}.generation-price{margin-left:14px;margin-right:14px}.product-photo-tip{margin-left:14px;margin-right:14px;grid-template-columns:155px 1fr}.product-photo-tip img{width:155px}.product-start{width:calc(100% - 28px);margin-left:14px;margin-right:14px}
  .topup-hero-new{min-height:300px;padding:28px}.topup-hero-new h1{font-size:52px}.topup-presets-new{grid-template-columns:repeat(2,1fr)}.topup-payment{padding:22px}.topup-methods-new{grid-template-columns:1fr}.topup-method-new{min-height:110px}.topup-custom-new{padding:22px}.custom-input{height:82px}.custom-input input{font-size:30px}
  .retention-card{padding:22px}.retention-card>i{width:74px;height:74px}.retention-card b{font-size:22px}.retention-card p{font-size:15px}.result-benefits-new article{padding:15px}.result-other,.result-retry,.save-result{height:72px;font-size:19px}
  .sheet{width:calc(100% - 12px);max-height:calc(100dvh - 12px);border-radius:30px;padding-left:22px;padding-right:22px}.referral-hero-new{min-height:380px;padding:24px}.referral-hero-new>div{width:62%}.referral-hero-new h2{font-size:44px!important}.referral-stat-cards{grid-template-columns:repeat(2,1fr)}.referral-button-row,.referral-money-actions{grid-template-columns:1fr 1fr}.creation-sheet{padding-left:24px;padding-right:24px}.create-step-copy h2{font-size:40px!important}.create-step-copy p{font-size:17px}.upload-zone-new{min-height:340px}.creation-stepper{grid-template-columns:64px 1fr 64px 1fr 64px;max-width:500px}.creation-step-node>span{width:60px;height:60px}.creation-connector{padding-top:29px}.confirm-summary>div{grid-template-columns:52px 1fr auto;padding:13px 17px}.confirm-summary i{width:52px;height:52px}.confirm-summary span{font-size:17px}.confirm-summary b{font-size:17px}
}

/* phone widths */
@media(max-width:470px){
  .app-shell{padding-bottom:92px}.main{padding:10px 8px 22px!important}.topbar{gap:8px;padding:10px 8px}.brand-lockup{gap:8px}.brand-mark{width:42px;height:42px;border-radius:13px;font-size:24px}.brand{font-size:21px!important}.brand-sub{font-size:11px!important;margin-top:3px}.topbar-actions{gap:5px}.balance-pill{height:42px;padding:0 10px;gap:6px}.balance-pill .balance-lightning,.balance-pill .balance-lightning svg{width:21px;height:21px}.balance-pill b{font-size:18px!important}.quick-topup{width:38px;height:38px}.quick-topup svg{width:20px;height:20px}.top-avatar{width:40px;height:40px;padding:2px!important}
  .marketing-hero{min-height:448px;padding:22px 15px 112px;background-position:left top,120% center;background-size:100% 100%,auto 100%}.marketing-hero-copy{width:72%}.marketing-pill{min-height:32px;padding:0 10px;font-size:9px}.marketing-hero h1{margin-top:14px;font-size:32px;line-height:1.01}.marketing-hero p{font-size:12px;line-height:1.38}.marketing-cta{height:58px;border-radius:18px}.marketing-cta span{font-size:14px}.marketing-cta span svg,.marketing-cta>svg{width:19px;height:19px}.marketing-proof{left:12px;right:12px;bottom:12px;gap:5px}.marketing-proof>div{min-height:58px;padding:8px 7px;border-radius:15px;gap:5px}.marketing-proof i{width:28px;height:28px;flex-basis:28px}.marketing-proof i svg{width:17px;height:17px}.marketing-proof span{font-size:8.5px}
  .steps-section{padding:18px 10px;border-radius:24px}.section-kicker{font-size:10px!important}.steps-section h2{font-size:25px;margin-bottom:14px}.steps-grid{gap:6px}.steps-grid article{min-height:143px;padding:13px 5px}.step-no{width:31px;height:31px;top:8px;left:7px;font-size:10px}.steps-grid article>i{width:44px;height:44px;margin-top:2px}.steps-grid article>i svg{width:20px;height:20px}.steps-grid b{font-size:13px}.steps-grid small{font-size:9px}.section-heading{margin:24px 2px 12px}.section-heading h2{font-size:26px}.section-heading button{font-size:11px}.section-heading button svg{width:16px;height:16px}
  .trend-grid{gap:8px}.trend-card{border-radius:20px}.trend-media{height:122px}.card-badge{right:7px;top:7px;min-height:25px;padding:0 8px;font-size:8px}.card-badge-icon,.card-badge-icon svg{width:11px;height:11px}.trend-card-body{min-height:112px;padding:11px 39px 12px 11px}.trend-card-body h3{font-size:15px;line-height:1.08}.trend-card-body p{font-size:10px;line-height:1.34}.card-arrow{width:34px;height:34px;right:8px;bottom:10px}.card-arrow svg{width:15px;height:15px}
  .catalog-head{padding:12px 3px}.catalog-head h1,.profile-heading h1{font-size:35px}.catalog-head p{font-size:14px}.catalog-search{height:60px;padding:0 15px;border-radius:19px}.catalog-search i,.catalog-search i svg{width:24px;height:24px}.catalog-search input{font-size:16px}.catalog-chips{gap:7px}.catalog-chip{height:50px;padding:0 13px;border-radius:17px;font-size:13px}.catalog-chip i,.catalog-chip i svg{width:18px;height:18px}
  .results-hero{min-height:220px;padding:22px 17px;border-radius:24px;background-position:left,120% center}.results-hero>div{width:70%}.results-hero h1{margin-top:14px;font-size:32px}.results-hero p{font-size:11px}.results-hero>strong{width:58px;height:58px;right:14px;bottom:20px;font-size:28px}.results-stats{gap:7px}.results-stats article{min-height:145px;padding:12px;border-radius:19px}.results-stats i{width:47px;height:47px}.results-stats i svg{width:23px;height:23px}.results-stats b{margin-top:14px;font-size:32px}.results-stats span{font-size:10px}.result-list{gap:10px}.result-list-row{min-height:130px;padding:9px;grid-template-columns:31% 1fr 34px;gap:10px;border-radius:20px}.result-list-row .order-thumb{height:108px;border-radius:16px}.result-list-copy .status{min-height:25px;padding:0 9px;font-size:9px}.result-list-copy h3{margin:8px 0 4px;font-size:17px}.result-list-copy p{font-size:9px}.result-list-chevron{width:32px;height:32px}.result-list-chevron svg{width:14px;height:14px}
  .profile-heading{padding:12px 3px 8px}.profile-card-new{min-height:300px;padding:19px;border-radius:24px;background-position:left,125% center}.profile-avatar{width:82px;height:82px}.profile-avatar button{width:32px;height:32px}.profile-avatar button svg{width:14px;height:14px}.profile-person{gap:14px}.profile-person h2{font-size:20px}.profile-person p{font-size:13px}.profile-divider{margin:18px 0}.profile-wallet{gap:10px}.profile-wallet>i{width:56px;height:56px;border-radius:17px}.profile-wallet>i svg{width:28px;height:28px}.profile-wallet strong{font-size:38px}.profile-wallet span{font-size:11px}.profile-wallet button{height:54px;padding:0 15px;border-radius:17px;font-size:14px;gap:8px}.profile-wallet button svg{width:17px;height:17px}.partner-banner{min-height:165px;padding:18px;grid-template-columns:1fr 105px 28px;border-radius:24px}.partner-banner span{font-size:8px}.partner-banner b{margin-top:12px;font-size:20px}.partner-banner small{font-size:10px}.partner-art{width:105px;height:105px}.partner-banner>em{width:28px;height:28px}.partner-banner>em svg{width:14px;height:14px}.settings-kicker{margin-top:26px}.settings-list{border-radius:23px}.settings-list button{min-height:84px;padding:12px 14px;grid-template-columns:48px 1fr 20px;gap:12px}.settings-list button>i{width:48px;height:48px;border-radius:15px}.settings-list button>i svg{width:24px;height:24px}.settings-list b{font-size:15px}.settings-list small{font-size:10px}
  .product-visual{border-radius:22px}.product-page>h1{margin:18px 12px 8px;font-size:31px}.product-description{margin:0 12px;font-size:13px}.product-facts{margin:16px 10px 10px;gap:8px}.product-facts article{min-height:98px;padding:12px;gap:8px;border-radius:18px}.product-facts i{width:44px;height:44px}.product-facts i svg{width:22px;height:22px}.product-facts b{font-size:13px}.product-facts small{font-size:13px}.product-tags{margin:0 10px 10px;gap:8px}.product-tags span{min-height:48px;padding:0 8px;font-size:9px}.product-tags svg{width:15px;height:15px}.generation-price{margin:10px;padding:15px;border-radius:19px}.generation-price-label{gap:9px}.generation-price-label>span:first-child{width:42px;height:42px}.generation-price-label svg{width:20px;height:20px}.generation-price-label small{font-size:11px}.generation-price-value strong{font-size:30px}.generation-price-value span{font-size:9px}.product-photo-tip{margin:10px;grid-template-columns:90px 1fr;gap:10px;padding:9px;border-radius:19px}.product-photo-tip img{width:90px;height:82px;border-radius:14px}.product-photo-tip b{font-size:13px}.product-photo-tip p{font-size:10px}.product-start{width:calc(100% - 20px);height:64px;margin:12px 10px 4px;border-radius:20px;padding:0 18px;font-size:15px}.product-start svg{width:20px;height:20px}
  .topup-hero-new{min-height:250px;padding:22px;border-radius:24px;background-position:left,120% center}.topup-hero-new h1{margin-top:18px;font-size:41px}.topup-hero-new p{font-size:14px}.topup-presets-new{gap:8px}.topup-preset{min-height:92px;border-radius:19px}.topup-preset strong{font-size:23px}.topup-preset.selected:after{width:27px;height:27px;right:9px;top:9px}.topup-preset.selected:before{right:18px;top:17px}.topup-custom-new,.topup-payment{padding:17px;border-radius:22px}.topup-custom-new h2,.topup-payment h2{font-size:20px}.custom-input{height:68px;border-radius:17px;padding:0 17px}.custom-input input{font-size:24px}.custom-input span{font-size:22px}.topup-custom-new p{font-size:11px}.topup-summary-new.ready{padding:14px 16px}.topup-summary-new b{font-size:16px}.topup-method-new{min-height:88px;padding:12px;grid-template-columns:48px 1fr auto;gap:10px;border-radius:18px}.topup-method-new>i{width:48px;height:48px;border-radius:15px}.topup-method-new>i svg{width:24px;height:24px}.topup-method-new b{font-size:14px}.topup-method-new small{font-size:10px}.topup-method-new>em{width:30px;height:30px}.topup-note{min-height:80px;padding:14px;border-radius:18px}.topup-note i{width:48px;height:48px}.topup-note b{font-size:13px}.topup-pay{height:66px;border-radius:20px;padding:0 20px;font-size:17px}
  .retention-card{padding:16px;gap:14px;border-radius:22px}.retention-card>i{width:58px;height:58px;border-radius:18px}.retention-card>i svg{width:30px;height:30px}.retention-card b{font-size:16px}.retention-card p{font-size:11px}.result-benefits-new{gap:8px}.result-benefits-new article{min-height:86px;padding:10px;gap:9px}.result-benefits-new i{width:43px;height:43px}.result-benefits-new b{font-size:12px}.result-benefits-new small{font-size:10px}.save-result,.result-other,.result-retry{height:62px;border-radius:19px;font-size:15px}.save-result svg,.result-other svg,.result-retry svg{width:20px;height:20px}
  .bottom-nav{height:82px;padding-left:6px;padding-right:6px}.nav-icon{width:40px;height:40px}.nav-icon svg{width:23px;height:23px}.nav-item em{font-size:10px!important}
  .modal-backdrop{padding:6px}.sheet{width:100%;max-height:calc(100dvh - 12px);border-radius:28px;padding:13px 16px 20px}.sheet-handle{width:58px;height:6px;margin-bottom:14px}.modal-close,.modal-back{width:48px;height:48px}.modal-close svg,.modal-back svg{width:22px;height:22px}
  .referral-hero-new{min-height:310px;margin-top:12px;padding:18px;border-radius:23px;background-position:left,125% center}.referral-hero-new>div{width:70%}.referral-hero-new h2{font-size:32px!important}.referral-hero-new p{font-size:11px}.referral-balance{height:72px;grid-template-columns:44px 1fr 18px;padding:0 12px;gap:9px}.referral-balance>i{width:44px;height:44px}.referral-balance small{font-size:9px}.referral-balance b{font-size:16px}.referral-stat-cards{gap:8px}.referral-stat-cards article{min-height:126px;padding:12px;border-radius:18px}.referral-stat-cards i{width:43px;height:43px}.referral-stat-cards b{margin-top:10px;font-size:24px}.referral-stat-cards span{font-size:10px}.referral-panel{padding:16px;border-radius:20px}.referral-panel h3{font-size:19px}.referral-panel>p{font-size:11px}.referral-url{height:58px}.referral-url input{font-size:11px}.referral-button-row{gap:8px}.referral-button-row button{min-height:50px;font-size:11px}.referral-card-preview{grid-template-columns:100px 1fr}.referral-card-preview-media{height:90px}.referral-money-actions{grid-template-columns:1fr}.referral-money-actions button{min-height:75px}.referral-extra summary{height:60px}
  .creation-sheet{padding-left:14px;padding-right:14px}.creation-stepper{grid-template-columns:48px 1fr 48px 1fr 48px;margin:12px auto 34px}.creation-step-node>span{width:46px;height:46px;font-size:16px}.creation-step-node>span svg{width:22px;height:22px}.creation-step-node small{font-size:9px;margin-top:7px}.creation-connector{padding-top:22px}.create-step-copy{margin-bottom:20px}.create-step-copy h2{font-size:31px!important}.create-step-copy p{font-size:13px}.upload-zone-new{min-height:280px;border-radius:23px}.upload-plus{width:82px;height:82px}.upload-plus svg{width:41px;height:41px}.upload-zone-new strong{font-size:20px}.upload-zone-new small{font-size:12px}.selection-status{font-size:11px;padding:9px 13px}.preview-grid.single{grid-template-columns:minmax(0,210px)}.creation-main-button{height:66px;border-radius:20px;font-size:17px}.legal-link{font-size:13px}.confirm-summary{border-radius:20px}.confirm-summary>div{min-height:75px;padding:10px;grid-template-columns:42px 1fr auto;gap:8px}.confirm-summary i{width:42px;height:42px;border-radius:13px}.confirm-summary i svg{width:21px;height:21px}.confirm-summary span{font-size:13px}.confirm-summary b{font-size:13px}.confirm-summary .price b{font-size:14px}.ai-note{padding:13px;border-radius:17px}.ai-note>i{width:46px;height:46px}.ai-note b{font-size:14px}.ai-note small{font-size:10px}.legal-gate-new{padding:15px;border-radius:18px}.legal-gate-new h3{font-size:18px}.legal-gate-new label{grid-template-columns:36px 1fr}.legal-gate-new label>i{width:36px;height:36px}.legal-gate-new span{font-size:11px}
}

@media(max-width:365px){.brand-sub{display:none}.brand{font-size:20px!important}.balance-pill{padding:0 8px}.topbar-actions{gap:4px}.marketing-hero-copy{width:76%}.marketing-hero h1{font-size:29px}.marketing-proof span{font-size:7.5px}.trend-media{height:108px}.trend-card-body h3{font-size:13px}.catalog-chip{padding:0 11px}.profile-person h2{font-size:18px}.partner-banner{grid-template-columns:1fr 82px 24px}.partner-art{width:82px}.settings-list b{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* hard overrides against legacy storefront card skin */
.trend-card{background:#fff!important;border:1px solid #e9eaf4!important;box-shadow:var(--shadow-sm)!important}
.trend-card::after,.trend-card:after{display:none!important;content:none!important}
.trend-card:hover{transform:none!important;box-shadow:var(--shadow-sm)!important}
.card-badge,.card-badge.hot{left:auto!important;right:10px!important;top:10px!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 6px 16px rgba(76,47,255,.22)!important;color:#fff!important;background:linear-gradient(100deg,#6f53ff,#5c37ff)!important}
.card-badge.hot{background:linear-gradient(100deg,#ff672b,#ff3574)!important}
.card-arrow{background:#f2f0ff!important;color:#593cff!important;backdrop-filter:none!important}
.trend-card:hover .card-arrow{transform:none!important;background:#f2f0ff!important}

/* final composition tuning against approved renders */
@media(min-width:761px){
  .marketing-hero-copy{width:min(64%,540px)}
  .marketing-hero h1{font-size:52px}
  .trend-media{height:190px}
  .trend-card-body{min-height:116px}
}
.modal-close,.modal-back{position:absolute!important;top:58px!important;margin:0!important;float:none!important;z-index:12!important}
.modal-close{right:28px!important}.modal-back{left:28px!important}
.referral-hero-new,.creation-stepper{margin-top:76px}
.creation-sheet .creation-stepper{margin-top:70px}
@media(max-width:470px){
  .modal-close,.modal-back{top:48px!important}.modal-close{right:16px!important}.modal-back{left:16px!important}
  .referral-hero-new{margin-top:64px}.creation-sheet .creation-stepper{margin-top:62px}
}
.welcome-profile-promo{width:100%;min-height:88px;margin-top:14px;padding:14px 18px;border:1px solid #e4e0ff;border-radius:20px;background:#f4f1ff;display:grid;grid-template-columns:52px 1fr 28px;gap:14px;align-items:center;text-align:left;color:var(--text)}
.welcome-profile-promo>span:first-child{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#e7e0ff;color:#583aff}.welcome-profile-promo svg{width:24px;height:24px}.welcome-profile-promo strong{display:block;font-size:16px}.welcome-profile-promo small{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.35}.welcome-profile-promo em{color:#583aff;font-style:normal}
.referral-balance b strong{font:inherit;color:inherit}
.creation-step-node.active .creation-step-circle{color:#fff!important;background:linear-gradient(145deg,#7557ff,#5738ff)!important;border-color:transparent!important;box-shadow:0 0 0 12px #f2eeff,0 10px 24px rgba(88,55,255,.2)!important;transform:none!important}
.creation-step-node.complete .creation-step-circle{color:#fff!important;background:linear-gradient(145deg,#7557ff,#5738ff)!important;border-color:transparent!important;box-shadow:none!important}
.creation-step-node.pending .creation-step-circle{background:#f0effb!important;color:#5f6687!important;border-color:transparent!important}


/* === V3.1 typography + icon fidelity tuning === */
html,body{
  font-family:"Inter","Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
svg{stroke-width:1.85}
.brand,.catalog-head h1,.profile-heading h1,.steps-section h2,.section-heading h2,.product-title,.results-hero h1,.marketing-hero h1,.profile-person h2,.partner-banner-copy strong,.settings-list b,.history-card h3,.result-title,.referral-hero-new h2,.topup-hero-new h1,.create-step-copy h2,.product-facts b,.trend-card-body h3{
  font-weight:700!important;
}
.brand{letter-spacing:-.04em!important}
.brand-sub,.marketing-hero p,.steps-grid small,.trend-card-body p,.catalog-head p,.settings-list small,.history-card small,.product-description,.product-photo-tip p,.retention-card p,.referral-panel>p,.topup-hero-new p,.create-step-copy p,.legal-gate-new span,.confirm-summary span,.ai-note small,.product-tags span,.marketing-proof span{
  font-weight:500!important;
}
.section-kicker,.marketing-pill,.step-no,.nav-item em,.card-badge,.product-tags span,.marketing-proof span,.referral-panel h3,.topup-custom-new h2,.topup-payment h2,.product-photo-tip b,.result-benefits-new b,.retention-card b{letter-spacing:0!important}
.marketing-hero{
  min-height:438px;
  padding:28px 26px 108px;
  background-image:linear-gradient(90deg,#2a2ce2 0%,rgba(44,39,210,.95) 38%,rgba(40,30,163,.58) 66%,rgba(24,15,92,.12) 100%),var(--hero-art);
}
.marketing-hero-copy{width:min(55%,460px)}
.marketing-pill{
  min-height:36px;
  padding:0 16px;
  font-size:11px;
  font-weight:700;
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.10);
}
.marketing-pill i,.marketing-pill svg{width:16px;height:16px}
.marketing-hero h1{
  margin:18px 0 14px;
  font-size:clamp(34px,5.8vw,56px);
  line-height:1.02;
  letter-spacing:-.052em;
  font-weight:700!important;
}
.marketing-hero p{
  margin:0 0 22px;
  color:rgba(255,255,255,.88);
  font-size:16px;
  line-height:1.34;
}
.marketing-cta{
  width:min(100%,404px);
  height:68px;
  border-radius:20px;
  padding:0 22px;
}
.marketing-cta span{gap:10px;font-size:18px;font-weight:700}
.marketing-cta span svg,.marketing-cta>svg{width:22px;height:22px}
.marketing-proof{left:18px;right:18px;bottom:16px;gap:10px}
.marketing-proof>div{
  min-height:64px;
  padding:11px 14px;
  gap:10px;
  border-radius:18px;
  background:rgba(255,255,255,.11);
}
.marketing-proof i{width:34px;height:34px;flex-basis:34px}
.marketing-proof i svg{width:18px;height:18px;stroke-width:1.8}
.marketing-proof span{font-size:12px;font-weight:600;line-height:1.18}
.steps-section h2,.section-heading h2{font-weight:700!important}
.steps-grid article{padding:16px 14px 18px}
.steps-grid article>i{width:58px;height:58px;background:#f0ecff}
.steps-grid article>i svg{width:27px;height:27px;stroke-width:1.7}
.steps-grid b{font-size:17px;font-weight:700}
.steps-grid small{font-size:12px;line-height:1.38}
.section-heading button{font-weight:700;font-size:14px}
.trend-card-body h3{
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  font-weight:700!important;
}
.trend-card-body p{font-size:12px;line-height:1.38}
.card-arrow{width:42px;height:42px}
.card-arrow svg{width:17px;height:17px;stroke-width:2.05}
.card-badge{min-height:29px;padding:0 11px;font-size:10px;font-weight:700;letter-spacing:.02em}
.card-badge-icon,.card-badge-icon svg{width:13px;height:13px}
.bottom-nav{
  height:94px;
  padding:10px 18px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px rgba(54,48,128,.03);
}
.nav-item{gap:4px;color:#70799a!important;position:relative}
.nav-icon{
  width:34px;
  height:34px;
  border-radius:0;
  background:transparent!important;
  color:inherit;
}
.nav-icon svg{width:24px;height:24px;stroke-width:1.9}
.nav-item em{font-size:12px!important;font-weight:600!important;color:inherit}
.nav-item.active{color:#5b3cff!important}
.nav-item.active .nav-icon{background:transparent!important}
.nav-item.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5b3cff;
}
.nav-item.active em{color:#5b3cff!important}
.balance-pill .balance-lightning svg,.quick-topup svg,.top-avatar svg,.marketing-proof svg,.steps-grid svg,.card-arrow svg,.nav-icon svg{stroke-linecap:round;stroke-linejoin:round}
@media(min-width:761px){
  .marketing-hero-copy{width:min(54%,455px)}
  .marketing-hero h1{font-size:58px}
  .marketing-hero p{font-size:17px}
}
@media(max-width:760px){
  .marketing-hero{
    min-height:540px;
    padding:24px 20px 104px;
    background-image:linear-gradient(180deg,rgba(46,40,217,.92) 0%,rgba(46,40,217,.90) 37%,rgba(35,27,157,.68) 58%,rgba(23,15,84,.20) 100%),var(--hero-art);
    background-size:cover,cover;
    background-position:center center,center center;
  }
  .marketing-hero-copy{width:100%}
  .marketing-hero h1{font-size:clamp(30px,8vw,46px);line-height:.98}
  .marketing-hero p{max-width:92%;font-size:15px}
  .marketing-cta{width:100%;height:64px;border-radius:18px}
  .marketing-cta span{font-size:17px}
  .marketing-proof{grid-template-columns:repeat(3,1fr);left:14px;right:14px;bottom:14px;gap:8px}
  .marketing-proof>div{min-height:60px;padding:10px 10px;border-radius:16px}
  .marketing-proof span{font-size:10px}
  .steps-grid article{min-height:162px}
  .bottom-nav{height:86px;padding-left:8px;padding-right:8px}
  .nav-item::after{bottom:1px}
}
@media(max-width:430px){
  .brand{font-size:28px!important}
  .brand-sub{font-size:14px!important}
  .topbar{padding:13px 16px 12px}
  .brand-mark{width:46px;height:46px;border-radius:14px;font-size:26px}
  .balance-pill{height:46px;padding:0 15px}
  .balance-pill b{font-size:21px!important}
  .quick-topup{width:42px;height:42px}
  .top-avatar{width:44px;height:44px}
  .steps-section{padding:20px 16px}
  .steps-grid{gap:10px}
  .steps-grid article{padding:14px 10px 16px}
  .steps-grid b{font-size:15px}
  .section-heading h2{font-size:28px}
  .nav-item em{font-size:11px!important}
}


/* === V3.2 staging fidelity fixes === */
:root{
  --bg:#f6f6ff;
  --surface:#ffffff;
  --surface-soft:#f7f5ff;
  --line:#e8e9f4;
  --text:#141a3a;
  --muted:#7f87ab;
}
.app-shell{background:linear-gradient(180deg,#fbfbff,#f6f6ff)}
.main{padding:14px 16px 32px!important}
.section-kicker{color:#5a3cff!important;font-size:12px!important;font-weight:800!important}
.marketing-hero{
  min-height:458px;
  padding:24px 20px 104px;
  border-radius:30px;
  background-image:linear-gradient(92deg,#292de3 0%,rgba(43,37,211,.95) 39%,rgba(39,29,166,.56) 66%,rgba(21,15,82,.12) 100%),var(--hero-art);
}
.marketing-hero-copy{width:min(56%,470px)}
.marketing-pill{min-height:38px;padding:0 16px;font-size:11px;font-weight:700;border-radius:999px;background:rgba(255,255,255,.12)}
.marketing-pill i,.marketing-pill svg{width:16px;height:16px}
.marketing-hero h1{font-size:clamp(33px,5.4vw,56px)!important;line-height:1.01!important;letter-spacing:-.05em!important;font-weight:700!important;margin:18px 0 12px!important;max-width:11ch}
.marketing-hero p{font-size:16px!important;line-height:1.36!important;max-width:25ch}
.marketing-cta{width:min(100%,404px);height:66px;border-radius:20px;padding:0 22px}
.marketing-cta span{font-size:17px;font-weight:700;gap:10px}
.marketing-proof{left:16px;right:16px;bottom:16px;gap:10px}
.marketing-proof>div{min-height:60px;padding:10px 12px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.marketing-proof i{width:34px;height:34px;flex-basis:34px;background:rgba(255,255,255,.14)}
.marketing-proof i svg{width:18px;height:18px;stroke-width:1.85}
.marketing-proof span{font-size:12px!important;font-weight:600!important;line-height:1.2}
.steps-section{margin-top:18px;padding:22px 18px 20px;border-radius:30px;background:#fff;box-shadow:0 12px 34px rgba(51,48,128,.04)}
.steps-section h2{margin:6px 0 18px;font-size:31px!important;line-height:1.03;letter-spacing:-.045em}
.steps-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.steps-grid article{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;position:relative;min-height:170px;padding:18px 14px 18px;border-radius:22px;background:linear-gradient(180deg,#fbfaff,#f6f4ff)}
.steps-grid article:not(:last-child)::after{content:"";position:absolute;top:58px;right:-12px;width:22px;border-top:3px dotted #dcd4ff}
.step-no{top:12px;left:12px;width:38px;height:38px;font-size:13px;background:#efe9ff;color:#5b3cff}
.steps-grid article>i{width:54px;height:54px;margin:2px auto 12px;border-radius:50%;background:#ece7ff;color:#593dff}
.steps-grid article>i svg{width:24px;height:24px;stroke-width:1.8}
.steps-grid b{font-size:17px;font-weight:700;margin-top:4px}
.steps-grid small{font-size:12px;line-height:1.35;color:#7f87ab;max-width:15ch}
.section-heading{margin:28px 4px 14px}
.section-heading h2{font-size:31px!important;letter-spacing:-.045em}
.section-heading button{font-size:15px;font-weight:700;color:#5b3cff}
.trend-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.trend-card{display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:#fff!important;border:1px solid #eaebf5!important;box-shadow:0 10px 26px rgba(53,48,126,.05)!important}
.trend-media{position:relative;height:auto!important;aspect-ratio:1.45/1;overflow:hidden;background:#ecebfa}
.trend-media>.cover{width:100%;height:100%;display:block;object-fit:cover}
.trend-card-body{position:relative;min-height:0!important;padding:14px 50px 16px 14px!important}
.trend-card-body h3{margin:0 0 7px;font-size:20px;font-weight:700!important;line-height:1.08;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trend-card-body p{margin:0;color:#7f87ab;font-size:12px;line-height:1.36;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.72em}
.card-arrow{position:absolute;right:12px;bottom:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f3f0ff!important;color:#5a3cff!important}
.card-arrow svg{width:16px;height:16px;stroke-width:2.05}
.card-badge{right:10px!important;top:10px!important;min-height:28px;padding:0 10px;font-size:10px;font-weight:700;letter-spacing:0;background:linear-gradient(100deg,#7254ff,#5f39ff)!important;box-shadow:0 8px 18px rgba(77,52,255,.23)!important}
.card-badge.hot{background:linear-gradient(100deg,#ff6a31,#ff397a)!important}
.card-badge-icon,.card-badge-icon svg{width:12px;height:12px}
.catalog-grid .trend-media,.trend-grid .trend-media{border-bottom:1px solid rgba(233,234,244,.55)}
.bottom-nav{height:88px!important;padding:8px 10px calc(10px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.98)!important;box-shadow:0 -10px 24px rgba(50,48,118,.035)!important}
.nav-item{gap:4px;color:#7480a0!important;position:relative;border:0!important;background:none!important}
.nav-icon{width:28px!important;height:28px!important;border-radius:0!important;background:transparent!important;display:grid;place-items:center}
.nav-icon svg{width:24px!important;height:24px!important;stroke-width:1.9!important}
.nav-item em{font-size:12px!important;font-weight:600!important;color:inherit!important}
.nav-item.active{color:#5a3cff!important}
.nav-item.active .nav-icon{background:transparent!important}
.nav-item.active svg{stroke-width:2.2!important}
.nav-item.active::after{content:"";position:absolute;left:50%;bottom:1px;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#5a3cff}
.nav-item.active em{font-weight:700!important;color:#5a3cff!important}

@media (max-width:760px){
  .marketing-hero{min-height:534px;padding:22px 18px 102px;background-image:linear-gradient(180deg,rgba(44,40,215,.90) 0%,rgba(44,40,215,.88) 34%,rgba(36,28,165,.66) 56%,rgba(22,15,83,.18) 100%),var(--hero-art);background-size:cover,cover;background-position:center center,center center}
  .marketing-hero-copy{width:100%}
  .marketing-hero h1{font-size:clamp(28px,7.6vw,42px)!important;max-width:8.9ch}
  .marketing-hero p{font-size:14px!important;max-width:22ch}
  .marketing-cta{width:100%;height:62px;border-radius:18px}
  .marketing-cta span{font-size:16px}
  .marketing-proof{left:14px;right:14px;bottom:14px;gap:8px}
  .marketing-proof>div{padding:10px 9px;border-radius:16px}
  .marketing-proof i{width:32px;height:32px;flex-basis:32px}
  .marketing-proof span{font-size:10px!important}
}
@media (max-width:430px){
  .main{padding:12px 12px 28px!important}
  .steps-section{padding:18px 14px;border-radius:28px}
  .steps-section h2{font-size:28px!important;margin-bottom:14px}
  .steps-grid{gap:10px}
  .steps-grid article{min-height:148px;padding:14px 10px 14px;border-radius:20px}
  .steps-grid article:not(:last-child)::after{display:none}
  .step-no{width:32px;height:32px;top:10px;left:10px;font-size:11px}
  .steps-grid article>i{width:46px;height:46px;margin-bottom:10px}
  .steps-grid article>i svg{width:21px;height:21px}
  .steps-grid b{font-size:15px}
  .steps-grid small{font-size:11px;line-height:1.28}
  .section-heading{margin:24px 2px 12px}
  .section-heading h2{font-size:27px!important}
  .section-heading button{font-size:13px}
  .trend-grid{gap:10px}
  .trend-card{border-radius:22px}
  .trend-media{aspect-ratio:1.18/1}
  .trend-card-body{padding:12px 44px 14px 12px!important}
  .trend-card-body h3{font-size:16px;line-height:1.08}
  .trend-card-body p{font-size:11px;min-height:2.5em}
  .card-arrow{right:10px;bottom:12px;width:34px;height:34px}
  .card-arrow svg{width:14px;height:14px}
  .card-badge{right:8px!important;top:8px!important;min-height:26px;padding:0 9px;font-size:9px}
  .bottom-nav{height:84px!important;padding-left:6px!important;padding-right:6px!important}
  .nav-icon{width:26px!important;height:26px!important}
  .nav-icon svg{width:22px!important;height:22px!important}
  .nav-item em{font-size:11px!important}
}
@media (max-width:365px){
  .marketing-proof span{font-size:9px!important}
  .trend-media{aspect-ratio:1.08/1}
  .trend-card-body h3{font-size:15px}
}


/* === V3.3 approved-home fidelity pass === */
:root{
  --bg:#f8f8ff;
  --surface:#ffffff;
  --surface-soft:#f7f6ff;
  --text:#111735;
  --muted:#7b84aa;
  --violet:#5738ff;
  --pink:#ff3f79;
  --line:#ececf5;
}
html,body{background:#f8f8ff!important;color:var(--text)!important;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
.app-shell{width:min(100%,820px)!important;max-width:820px!important;background:linear-gradient(180deg,#fdfdff 0%,#f8f8ff 100%)!important;padding-bottom:112px!important}
.main{padding:16px 18px 30px!important}
.topbar{min-height:90px!important;padding:14px 34px!important;background:rgba(255,255,255,.98)!important;border-bottom:0!important;box-shadow:none!important}
.brand-lockup{gap:13px!important}
.brand-mark{width:60px!important;height:60px!important;border-radius:17px!important;font-size:32px!important;box-shadow:0 10px 25px rgba(210,58,155,.21)!important}
.brand-mark:after{width:5px!important;height:5px!important;right:9px!important;bottom:8px!important}
.brand{font-size:31px!important;line-height:1!important;font-weight:700!important;letter-spacing:-.045em!important}
.brand-sub{margin-top:6px!important;font-size:16px!important;line-height:1!important;color:#7d86a8!important;font-weight:500!important}
.topbar-actions{gap:10px!important}
.balance-pill{height:54px!important;padding:0 18px!important;gap:10px!important;background:#f2f0ff!important}
.balance-pill .balance-lightning,.balance-pill .balance-lightning svg{width:27px!important;height:27px!important;color:#5638ff!important}
.balance-pill .balance-lightning svg{stroke-width:2.25!important}
.balance-pill b{font-size:24px!important;font-weight:700!important}
.quick-topup{width:48px!important;height:48px!important;box-shadow:0 8px 18px rgba(89,55,255,.2)!important}
.quick-topup svg{width:24px!important;height:24px!important;stroke-width:2!important}
.top-avatar{width:52px!important;height:52px!important;padding:3px!important;border:2px solid #ded5ff!important}

.marketing-hero{
  min-height:460px!important;
  height:460px!important;
  padding:24px 24px 102px!important;
  border-radius:28px!important;
  background-image:linear-gradient(90deg,#262bd4 0%,rgba(45,38,205,.97) 39%,rgba(45,33,172,.72) 56%,rgba(25,15,93,.14) 100%),var(--hero-art)!important;
  background-size:100% 100%,auto 100%!important;
  background-position:left top,right center!important;
  background-repeat:no-repeat!important;
  box-shadow:0 18px 46px rgba(53,47,145,.08)!important;
}
.marketing-hero:after{height:32%!important;background:linear-gradient(180deg,transparent,rgba(22,18,106,.18))!important}
.marketing-hero-copy{width:59%!important;max-width:455px!important}
.marketing-pill{min-height:38px!important;padding:0 15px!important;gap:9px!important;border:1px solid rgba(255,255,255,.28)!important;background:rgba(255,255,255,.11)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.045em!important}
.marketing-pill i{width:17px!important;height:17px!important;color:#ffd967!important}
.marketing-pill i svg{width:17px!important;height:17px!important;stroke-width:1.7!important;fill:#ffd967!important;stroke:#ffd967!important}
.marketing-hero h1{margin:20px 0 13px!important;max-width:450px!important;font-size:43px!important;line-height:1.06!important;letter-spacing:-.047em!important;font-weight:700!important}
.marketing-hero p{margin:0 0 21px!important;max-width:455px!important;color:rgba(255,255,255,.87)!important;font-size:17px!important;line-height:1.35!important;font-weight:400!important}
.marketing-cta{width:425px!important;max-width:100%!important;height:66px!important;border-radius:20px!important;padding:0 22px!important;background:linear-gradient(105deg,#ff3e79 0%,#e327b9 53%,#7437ff 100%)!important;box-shadow:0 12px 28px rgba(168,44,223,.18)!important}
.marketing-cta span{font-size:20px!important;font-weight:700!important;gap:12px!important}
.marketing-cta span svg,.marketing-cta>svg{width:23px!important;height:23px!important;stroke-width:2!important}
.marketing-proof{left:22px!important;right:22px!important;bottom:17px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
.marketing-proof>div{min-height:62px!important;padding:10px 13px!important;gap:11px!important;border-radius:18px!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.17)!important;backdrop-filter:blur(9px)!important}
.marketing-proof i{width:36px!important;height:36px!important;flex:0 0 36px!important;background:rgba(255,255,255,.13)!important}
.marketing-proof i svg{width:20px!important;height:20px!important;stroke-width:1.85!important}
.marketing-proof span{font-size:13px!important;line-height:1.17!important;font-weight:600!important}

.steps-section{margin-top:16px!important;padding:22px 22px 20px!important;border:1px solid #efeff7!important;border-radius:28px!important;background:#fff!important;box-shadow:0 14px 38px rgba(50,46,125,.045)!important}
.section-kicker{font-size:12px!important;font-weight:700!important;letter-spacing:.14em!important;color:#5338ff!important}
.steps-section h2{margin:6px 0 18px!important;font-size:31px!important;line-height:1.02!important;font-weight:700!important;letter-spacing:-.042em!important}
.steps-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.steps-grid article{min-height:178px!important;padding:17px 14px 18px!important;border-radius:20px!important;background:linear-gradient(180deg,#fbfaff 0%,#f6f4ff 100%)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important}
.steps-grid article:not(:last-child)::after{display:block!important;content:""!important;position:absolute!important;top:62px!important;right:-19px!important;width:20px!important;border-top:3px dotted #ddd5ff!important}
.step-no{top:13px!important;left:13px!important;width:42px!important;height:42px!important;background:#efeaff!important;color:#5839ff!important;font-size:14px!important;font-weight:700!important}
.steps-grid article>i{width:60px!important;height:60px!important;margin:2px auto 13px!important;background:#ebe8ff!important;color:#5238ff!important}
.steps-grid article>i svg{width:28px!important;height:28px!important;stroke-width:1.9!important}
.steps-grid b{font-size:18px!important;line-height:1.15!important;font-weight:700!important}
.steps-grid small{margin-top:8px!important;color:#7c85aa!important;font-size:13px!important;line-height:1.35!important;font-weight:400!important}

.section-heading{margin:29px 8px 13px!important;align-items:end!important}
.section-heading h2{margin:5px 0 0!important;font-size:31px!important;line-height:1!important;font-weight:700!important;letter-spacing:-.045em!important}
.section-heading button{font-size:15px!important;font-weight:700!important;color:#5438ff!important;gap:8px!important}
.section-heading button svg{width:18px!important;height:18px!important;stroke-width:2!important}

.trend-grid{gap:14px!important;align-items:start!important}
.trend-card{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;border-radius:22px!important;border:1px solid #ececf4!important;background:#fff!important;box-shadow:0 9px 24px rgba(55,49,132,.045)!important}
.trend-media{height:auto!important;min-height:0!important;aspect-ratio:2.02/1!important;background:#efeff7!important}
.trend-media>.cover{position:static!important;inset:auto!important;width:100%!important;height:100%!important;display:block!important;object-fit:cover!important}
.trend-card-body{min-height:0!important;height:auto!important;padding:13px 52px 14px 14px!important}
.trend-card-body h3{margin:0 0 5px!important;font-family:Georgia,"Times New Roman",serif!important;font-size:20px!important;line-height:1.08!important;font-weight:700!important;letter-spacing:-.018em!important}
.trend-card-body p{margin:0!important;color:#7c85aa!important;font-size:12px!important;line-height:1.35!important;font-weight:400!important;min-height:0!important;-webkit-line-clamp:2!important}
.card-arrow{right:12px!important;bottom:14px!important;width:40px!important;height:40px!important;background:#f3f1ff!important;color:#5638ff!important}
.card-arrow svg{width:17px!important;height:17px!important;stroke-width:2!important}
.card-badge,.card-badge.hot{right:10px!important;top:10px!important;left:auto!important;min-height:29px!important;padding:0 11px!important;border-radius:999px!important;font-size:10px!important;font-weight:700!important;letter-spacing:.02em!important;box-shadow:0 6px 16px rgba(77,52,255,.22)!important}
.card-badge{background:linear-gradient(100deg,#7254ff,#5d37ff)!important}
.card-badge.hot{background:linear-gradient(100deg,#ff6b30,#ff3977)!important}
.card-badge-icon,.card-badge-icon svg{width:13px!important;height:13px!important}

.bottom-nav{width:min(820px,100%)!important;height:108px!important;padding:12px 24px calc(12px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.99)!important;border:0!important;box-shadow:0 -12px 30px rgba(48,45,117,.035)!important;backdrop-filter:blur(18px)!important}
.nav-item{min-height:70px!important;padding:4px 2px 3px!important;gap:4px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#6f7899!important;box-shadow:none!important;position:relative!important}
.nav-icon{position:relative!important;width:32px!important;height:32px!important;border-radius:0!important;background:transparent!important;transform:none!important}
.nav-icon::before,.nav-icon:before{display:none!important;content:none!important;opacity:0!important;background:none!important}
.nav-icon svg{position:static!important;width:28px!important;height:28px!important;stroke-width:1.8!important;animation:none!important;transform:none!important}
.nav-icon .active-glyph{display:none!important}
.nav-item.active .nav-icon .outline-glyph{display:none!important}
.nav-item.active .nav-icon .active-glyph{display:block!important}
.nav-item em{font-size:14px!important;line-height:1.15!important;font-weight:500!important;letter-spacing:0!important;color:inherit!important}
.nav-item.active{color:#5034f5!important}
.nav-item.active .nav-icon{background:transparent!important;transform:none!important}
.nav-item.active em{font-weight:700!important;color:#5034f5!important}
.nav-item.active::after{content:""!important;display:block!important;position:absolute!important;left:50%!important;bottom:-1px!important;transform:translateX(-50%)!important;width:7px!important;height:7px!important;border-radius:50%!important;background:#5034f5!important}

@media(max-width:820px){
  .app-shell{max-width:100%!important}
  .topbar{min-height:76px!important;padding:10px 16px!important}
  .brand-mark{width:46px!important;height:46px!important;border-radius:13px!important;font-size:25px!important}
  .brand{font-size:25px!important}.brand-sub{font-size:12px!important;margin-top:5px!important}
  .balance-pill{height:44px!important;padding:0 13px!important;gap:7px!important}.balance-pill .balance-lightning,.balance-pill .balance-lightning svg{width:22px!important;height:22px!important}.balance-pill b{font-size:20px!important}
  .quick-topup{width:42px!important;height:42px!important}.quick-topup svg{width:22px!important;height:22px!important}
  .top-avatar{width:44px!important;height:44px!important}
  .main{padding:12px 8px 26px!important}
  .marketing-hero{height:450px!important;min-height:450px!important;padding:18px 16px 96px!important;border-radius:26px!important;background-size:100% 100%,auto 100%!important;background-position:left top,calc(100% + 52px) center!important}
  .marketing-hero-copy{width:66%!important;max-width:none!important}
  .marketing-pill{min-height:34px!important;padding:0 13px!important;font-size:10px!important}
  .marketing-hero h1{margin:17px 0 10px!important;font-size:35px!important;line-height:1.02!important;max-width:320px!important}
  .marketing-hero p{font-size:13px!important;line-height:1.35!important;max-width:260px!important;margin-bottom:17px!important}
  .marketing-cta{width:100%!important;height:56px!important;border-radius:17px!important;padding:0 18px!important}.marketing-cta span{font-size:15px!important}.marketing-cta span svg,.marketing-cta>svg{width:20px!important;height:20px!important}
  .marketing-proof{left:12px!important;right:12px!important;bottom:12px!important;gap:8px!important}.marketing-proof>div{min-height:54px!important;padding:8px 9px!important;gap:7px!important;border-radius:15px!important}.marketing-proof i{width:30px!important;height:30px!important;flex-basis:30px!important}.marketing-proof i svg{width:16px!important;height:16px!important}.marketing-proof span{font-size:9px!important}
  .steps-section{padding:18px 14px 16px!important;border-radius:26px!important}.steps-section h2{font-size:27px!important;margin-bottom:14px!important}.steps-grid{gap:10px!important}.steps-grid article{min-height:154px!important;padding:14px 8px 14px!important;border-radius:18px!important}.steps-grid article:not(:last-child)::after{top:54px!important;right:-11px!important;width:12px!important;border-top-width:2px!important}.step-no{width:32px!important;height:32px!important;top:10px!important;left:10px!important;font-size:11px!important}.steps-grid article>i{width:48px!important;height:48px!important;margin-bottom:10px!important}.steps-grid article>i svg{width:22px!important;height:22px!important}.steps-grid b{font-size:14px!important}.steps-grid small{font-size:10px!important;line-height:1.3!important}
  .section-heading{margin:24px 4px 12px!important}.section-heading h2{font-size:27px!important}.section-heading button{font-size:12px!important}
  .trend-grid{gap:10px!important}.trend-card{border-radius:20px!important}.trend-card-body{padding:11px 42px 12px 11px!important}.trend-card-body h3{font-size:16px!important}.trend-card-body p{font-size:10px!important}.card-arrow{width:33px!important;height:33px!important;right:8px!important;bottom:10px!important}.card-arrow svg{width:14px!important;height:14px!important}.card-badge,.card-badge.hot{right:7px!important;top:7px!important;min-height:25px!important;padding:0 8px!important;font-size:8px!important}.card-badge-icon,.card-badge-icon svg{width:11px!important;height:11px!important}
  .bottom-nav{height:82px!important;padding:8px 7px calc(8px + env(safe-area-inset-bottom))!important}.nav-item{min-height:59px!important}.nav-icon{width:27px!important;height:27px!important}.nav-icon svg{width:24px!important;height:24px!important}.nav-item em{font-size:10px!important}.nav-item.active::after{width:5px!important;height:5px!important;bottom:0!important}
}
@media(max-width:430px){
  .marketing-hero{height:430px!important;min-height:430px!important;background-position:left top,calc(100% + 65px) center!important}
  .marketing-hero-copy{width:72%!important}
  .marketing-hero h1{font-size:31px!important;max-width:280px!important}
  .marketing-hero p{font-size:12px!important;max-width:225px!important}
  .steps-grid article:not(:last-child)::after{display:none!important}
  .trend-media{aspect-ratio:1.85/1!important}
}


/* === V3.3.1 final home calibration after visual comparison === */
.main{padding-top:17px!important}
.marketing-hero{
  background-image:linear-gradient(90deg,#262bd4 0%,rgba(45,38,205,.97) 42%,rgba(45,33,172,.40) 59%,rgba(25,15,93,.06) 76%,rgba(25,15,93,0) 100%),var(--hero-art)!important;
}
.steps-section{margin-top:10px!important}
.steps-grid small{max-width:none!important;width:100%!important}
.trend-card{aspect-ratio:auto!important}
@media(max-width:820px){
  .main{padding-top:12px!important}
  .marketing-hero{background-image:linear-gradient(90deg,#292ddc 0%,rgba(43,37,211,.95) 44%,rgba(39,29,166,.38) 61%,rgba(22,15,83,.04) 82%,rgba(22,15,83,0) 100%),var(--hero-art)!important}
  .steps-section{margin-top:10px!important}
}


/* final pixel calibration against 941px approved reference */
@media(min-width:821px){
  .marketing-hero h1{margin-top:22px!important}
  .marketing-hero p{margin-bottom:30px!important}
  .marketing-cta{height:74px!important}
  .marketing-proof{bottom:21px!important}
  .steps-section{padding-bottom:23px!important}
  .steps-section h2{margin-bottom:24px!important}
}
@media(max-width:820px){
  .marketing-hero-copy{width:70%!important}
  .marketing-hero h1{font-size:31px!important;max-width:360px!important;margin-top:18px!important}
  .marketing-hero p{max-width:280px!important}
  .marketing-cta{width:88%!important}
}


/* === V3.4 hero seam + CTA vertical calibration === */
.marketing-hero{
  background:#292ddc!important;
}
.marketing-hero::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  right:0;
  bottom:0;
  width:64%;
  background-image:var(--hero-art);
  background-position:right center;
  background-size:auto 100%;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.10) 8%,rgba(0,0,0,.55) 20%,#000 36%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.10) 8%,rgba(0,0,0,.55) 20%,#000 36%,#000 100%);
  pointer-events:none;
}
.marketing-hero::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  height:auto!important;
  background:
    linear-gradient(90deg,#292ddc 0%,rgba(43,42,216,.95) 30%,rgba(43,38,199,.72) 43%,rgba(36,29,161,.30) 58%,rgba(25,17,103,.06) 74%,rgba(25,17,103,0) 88%),
    linear-gradient(180deg,rgba(255,255,255,.025) 0%,transparent 52%,rgba(20,17,112,.20) 100%)!important;
  pointer-events:none!important;
}
.marketing-hero-copy,.marketing-proof{position:relative;z-index:2!important}
.marketing-proof{position:absolute!important}
.marketing-cta{margin-top:14px!important}

@media(max-width:820px){
  .marketing-hero::before{width:66%;}
  .marketing-hero::after{
    background:
      linear-gradient(90deg,#292ddc 0%,rgba(43,42,216,.96) 32%,rgba(43,38,199,.75) 46%,rgba(36,29,161,.30) 61%,rgba(25,17,103,.05) 78%,rgba(25,17,103,0) 90%),
      linear-gradient(180deg,rgba(255,255,255,.02) 0%,transparent 52%,rgba(20,17,112,.22) 100%)!important;
  }
  .marketing-cta{margin-top:16px!important}
}
/* V3.4 final seamless art geometry */
.marketing-hero::before{
  width:auto!important;
  height:100%!important;
  bottom:auto!important;
  aspect-ratio:324/365!important;
  background-size:100% 100%!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 6%,rgba(0,0,0,.65) 16%,#000 30%,#000 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 6%,rgba(0,0,0,.65) 16%,#000 30%,#000 100%)!important;
}

/* === V3.5 narrow-screen hero calibration === */
@media(max-width:680px){
  .marketing-hero::before{
    top:0!important;
    right:0!important;
    bottom:0!important;
    width:76%!important;
    height:100%!important;
    aspect-ratio:auto!important;
    transform:none!important;
    background-image:url('/app/hero-neon-mobile.png')!important;
    background-size:auto 100%!important;
    background-position:right center!important;
    background-repeat:no-repeat!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .marketing-cta{margin-top:54px!important}
}
@media(max-width:430px){
  .marketing-hero::before{width:82%!important}
  .marketing-cta{margin-top:48px!important}
}


/* === V3.6 mobile hero compaction + fixed-light Telegram theme === */
html{
  color-scheme:light!important;
  --bg:#f7f7ff!important;
  --surface:#ffffff!important;
  --surface-2:#f3f1fb!important;
  --surface-glass:rgba(255,255,255,.94)!important;
  --text:#101633!important;
  --muted:#7d87aa!important;
  --line:#e6e8f4!important;
  --line-strong:#dfe1ef!important;
}
html[data-tg-theme="dark"],html[data-tg-theme="light"]{
  color-scheme:light!important;
  --bg:#f7f7ff!important;
  --surface:#ffffff!important;
  --surface-2:#f3f1fb!important;
  --surface-glass:rgba(255,255,255,.94)!important;
  --text:#101633!important;
  --muted:#7d87aa!important;
  --line:#e6e8f4!important;
  --line-strong:#dfe1ef!important;
}
body,.app-shell,.main{color:#101633!important}
.topbar,.steps-section,.trend-card,.bottom-nav{color:#101633!important}
.brand,.steps-section h2,.steps-grid b,.section-heading h2,.trend-card-body h3,.nav-item em{opacity:1!important}
.brand{color:#101633!important}
.brand-sub,.steps-grid small,.trend-card-body p{color:#7d87aa!important}
.balance-pill{color:#101633!important;background:#f3f1ff!important}
.bottom-nav{background:rgba(255,255,255,.99)!important}
@media(prefers-color-scheme:dark){
  html,body{color-scheme:light!important;background:#f7f7ff!important;color:#101633!important}
  .topbar{background:rgba(255,255,255,.97)!important}
  .brand,.steps-section h2,.steps-grid b,.section-heading h2,.trend-card-body h3{color:#101633!important;opacity:1!important}
  .brand-sub,.steps-grid small,.trend-card-body p{color:#7d87aa!important;opacity:1!important}
  .steps-section,.trend-card,.bottom-nav{background:#fff!important}
  .card-badge,.card-badge.hot{color:#fff!important;border:0!important}
}

/* 431–680px: keep the hero close to the approved wide-card proportions. */
@media(min-width:431px) and (max-width:680px){
  .marketing-hero{
    height:285px!important;
    min-height:285px!important;
    padding:14px 14px 70px!important;
    border-radius:24px!important;
  }
  .marketing-hero::before{
    top:0!important;
    right:0!important;
    bottom:auto!important;
    width:64%!important;
    height:100%!important;
    aspect-ratio:auto!important;
    background-image:url('/app/hero-neon-mobile.png')!important;
    background-size:100% 100%!important;
    background-position:right top!important;
    background-repeat:no-repeat!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 8%,rgba(0,0,0,.70) 22%,#000 40%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 8%,rgba(0,0,0,.70) 22%,#000 40%,#000 100%)!important;
  }
  .marketing-hero::after{
    background:
      linear-gradient(90deg,#292ddc 0%,rgba(43,42,216,.96) 34%,rgba(43,38,199,.68) 48%,rgba(36,29,161,.23) 64%,rgba(25,17,103,0) 86%),
      linear-gradient(180deg,rgba(255,255,255,.015) 0%,transparent 64%,rgba(20,17,112,.18) 100%)!important;
  }
  .marketing-hero-copy{width:61%!important;max-width:none!important}
  .marketing-pill{min-height:28px!important;padding:0 10px!important;gap:6px!important;font-size:8px!important}
  .marketing-pill i,.marketing-pill i svg{width:13px!important;height:13px!important}
  .marketing-hero h1{
    margin:11px 0 7px!important;
    max-width:320px!important;
    font-size:27px!important;
    line-height:1.02!important;
  }
  .marketing-hero p{
    margin:0 0 11px!important;
    max-width:250px!important;
    font-size:10.5px!important;
    line-height:1.35!important;
  }
  .marketing-cta{
    width:88%!important;
    max-width:330px!important;
    height:45px!important;
    margin-top:0!important;
    border-radius:15px!important;
    padding:0 14px!important;
  }
  .marketing-cta span{font-size:13px!important;gap:8px!important}
  .marketing-cta span svg,.marketing-cta>svg{width:17px!important;height:17px!important}
  .marketing-proof{left:10px!important;right:10px!important;bottom:9px!important;gap:7px!important}
  .marketing-proof>div{min-height:43px!important;padding:6px 7px!important;gap:6px!important;border-radius:13px!important}
  .marketing-proof i{width:25px!important;height:25px!important;flex-basis:25px!important}
  .marketing-proof i svg{width:14px!important;height:14px!important}
  .marketing-proof span{font-size:7.5px!important;line-height:1.12!important}
}

/* === V3.7 narrow hero: preserve portrait proportions and readable proof cards ===
   The artwork must only be cropped/zoomed.  Never fit it independently on X/Y. */
@media(max-width:680px){
  .marketing-hero::before{
    width:100%!important;
    background-size:auto 100%!important;
    background-position:right top!important;
  }
}

@media(min-width:431px) and (max-width:680px){
  .marketing-hero::before{
    width:100%!important;
    background-size:auto 100%!important;
  }
  .marketing-proof>div{min-height:50px!important;padding:7px 9px!important}
  .marketing-proof i{width:28px!important;height:28px!important;flex-basis:28px!important}
  .marketing-proof span{font-size:9px!important;line-height:1.16!important}
}

/* === V3.9: one continuous tablet transition — no jump at 680px === */
@media(min-width:431px) and (max-width:820px){
  .marketing-hero{
    height:clamp(285px,calc(53.5vw - 79px),360px)!important;
    min-height:clamp(285px,calc(53.5vw - 79px),360px)!important;
    padding:clamp(14px,2.1vw,20px) clamp(14px,2.1vw,20px) clamp(70px,9vw,92px)!important;
  }
  .marketing-hero::before{
    width:100%!important;
    height:100%!important;
    background-image:url('/app/hero-neon-mobile.png')!important;
    background-size:auto 100%!important;
    background-position:right top!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .marketing-hero::after{
    background:
      linear-gradient(90deg,#292ddc 0%,#292ddc 40%,rgba(43,42,216,.98) 50%,rgba(43,38,199,.86) 59%,rgba(36,29,161,.50) 70%,rgba(25,17,103,.12) 82%,rgba(25,17,103,0) 94%),
      linear-gradient(180deg,rgba(255,255,255,.015) 0%,transparent 63%,rgba(20,17,112,.18) 100%)!important;
  }
  .marketing-hero-copy{width:62%!important;max-width:none!important}
  .marketing-pill{min-height:clamp(28px,4vw,34px)!important;padding:0 clamp(10px,1.5vw,13px)!important;font-size:clamp(8px,1.15vw,10px)!important}
  .marketing-hero h1{margin:clamp(11px,1.8vw,16px) 0 clamp(7px,1vw,10px)!important;max-width:360px!important;font-size:clamp(27px,4.1vw,34px)!important;line-height:1.02!important}
  .marketing-hero p{margin:0 0 clamp(11px,1.4vw,16px)!important;max-width:270px!important;font-size:clamp(10.5px,1.55vw,13px)!important;line-height:1.35!important}
  .marketing-cta{width:clamp(300px,52vw,400px)!important;max-width:100%!important;height:clamp(45px,7vw,58px)!important;margin-top:0!important;border-radius:clamp(15px,2vw,19px)!important;padding:0 clamp(14px,2.2vw,20px)!important}
  .marketing-cta span{font-size:clamp(13px,1.85vw,16px)!important;gap:clamp(8px,1vw,11px)!important}
  .marketing-cta span svg,.marketing-cta>svg{width:clamp(17px,2.3vw,21px)!important;height:clamp(17px,2.3vw,21px)!important}
  .marketing-proof{left:clamp(10px,1.5vw,14px)!important;right:clamp(10px,1.5vw,14px)!important;bottom:clamp(9px,1.2vw,13px)!important;gap:clamp(7px,1vw,10px)!important}
  .marketing-proof>div{min-height:clamp(50px,8vw,64px)!important;padding:clamp(7px,1vw,10px)!important;gap:clamp(6px,.9vw,9px)!important;border-radius:clamp(13px,2vw,18px)!important}
  .marketing-proof i{width:clamp(26px,4vw,35px)!important;height:clamp(26px,4vw,35px)!important;flex-basis:clamp(26px,4vw,35px)!important}
  .marketing-proof i svg{width:clamp(14px,2vw,19px)!important;height:clamp(14px,2vw,19px)!important}
  .marketing-proof span{font-size:clamp(8.5px,1.45vw,11.5px)!important;line-height:1.15!important}
}

@media(max-width:430px){
  .marketing-hero::before{
    width:100%!important;
    background-size:auto 100%!important;
  }
  .marketing-cta{margin-top:27px!important}
  .marketing-proof>div{min-height:58px!important;padding:8px 8px!important;gap:6px!important}
  .marketing-proof i{width:28px!important;height:28px!important;flex-basis:28px!important}
  .marketing-proof span{font-size:9px!important;line-height:1.16!important}
}

/* Phone widths: allow text wrapping, but remove the old dead space around CTA. */
@media(max-width:430px){
  .marketing-hero{
    height:392px!important;
    min-height:392px!important;
    padding:17px 15px 74px!important;
  }
  .marketing-hero::before{
    top:0!important;
    right:0!important;
    bottom:auto!important;
    width:76%!important;
    height:100%!important;
    aspect-ratio:auto!important;
    background-image:url('/app/hero-neon-mobile.png')!important;
    background-size:100% 100%!important;
    background-position:right top!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 8%,rgba(0,0,0,.62) 22%,#000 42%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 8%,rgba(0,0,0,.62) 22%,#000 42%,#000 100%)!important;
  }
  .marketing-hero-copy{width:72%!important}
  .marketing-pill{min-height:31px!important;padding:0 11px!important;font-size:8px!important}
  .marketing-hero h1{margin:13px 0 8px!important;font-size:28px!important;line-height:1.01!important;max-width:270px!important}
  .marketing-hero p{margin:0 0 14px!important;font-size:11px!important;line-height:1.34!important;max-width:225px!important}
  .marketing-cta{width:90%!important;height:50px!important;margin-top:0!important;border-radius:16px!important;padding:0 15px!important}
  .marketing-cta span{font-size:13px!important}
  .marketing-proof{left:10px!important;right:10px!important;bottom:10px!important;gap:6px!important}
  .marketing-proof>div{min-height:47px!important;padding:6px 7px!important;gap:5px!important;border-radius:14px!important}
  .marketing-proof i{width:26px!important;height:26px!important;flex-basis:26px!important}
  .marketing-proof i svg{width:14px!important;height:14px!important}
  .marketing-proof span{font-size:7.5px!important;line-height:1.12!important}
}