/* ═══════════ BanchPay V3 — neo-brutalism, red brand ═══════════ */
:root{
  --paper:#f6f2e9;
  --card:#ffffff;
  --ink:#17130e;
  --dim:#8a8375;
  --dim-2:#bcb4a5;
  --red:#ff4655;
  --red-deep:#e13345;
  --peach:#ffe8df;
  --sun:#ffb43c;
  --sun-soft:#fff1d8;
  --blue:#4a63e7;
  --blue-soft:#e6ebff;
  --green:#17a05e;
  --green-soft:#def3e7;
  --down:#e13345;
  --bw:2.5px;
  --shadow:4px 4px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
  --r-lg:20px; --r-md:16px; --r-sm:12px;
  --nav-h:calc(66px + env(safe-area-inset-bottom,0px));
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --font-num:'Space Grotesk',var(--font);
  --font-logo:'Unbounded',var(--font);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font);background:var(--paper);color:var(--ink);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;user-select:none;
}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font-family:inherit;color:inherit}
.hidden{display:none!important}
.bg-orbs{display:none}

/* ── logo ── */
.logo-mark{width:36px;height:36px;border-radius:11px;position:relative;flex:none;
  background:var(--red);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm)}
.logo-mark::before{content:"";position:absolute;inset:6px;border:2.4px solid var(--ink);border-radius:5px;
  clip-path:polygon(0 0,100% 0,100% 38%,62% 38%,62% 62%,100% 62%,100% 100%,0 100%)}
.logo-mark::after{content:"";position:absolute;right:6px;top:44%;width:7px;height:7px;background:var(--ink);border-radius:2px}
.logo-mark.big{width:72px;height:72px;border-radius:20px;box-shadow:var(--shadow)}
.logo-mark.big::before{inset:14px;border-width:5px;border-radius:8px}
.logo-mark.big::after{right:13px;width:13px;height:13px;border-radius:4px}
.logo-mark.small{width:28px;height:28px;border-radius:9px;box-shadow:2px 2px 0 var(--ink)}
.logo-mark.small::before{inset:5px;border-width:2px;border-radius:4px}
.logo-mark.small::after{right:5px;width:5px;height:5px}
.logo-word{font-family:var(--font-logo);font-weight:700;font-size:25px;letter-spacing:-.5px}
.logo-word span{color:var(--red)}

/* ── splash ── */
.splash{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;transition:opacity .4s,visibility .4s}
.splash.out{opacity:0;visibility:hidden}
.splash-logo{display:flex;flex-direction:column;align-items:center;gap:16px;animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.splash-pet{width:86px;filter:drop-shadow(3px 4px 0 rgba(23,19,14,.12));animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.splash-tag{color:var(--dim);font-size:13.5px;font-weight:600}
.splash-loader{width:130px;height:10px;border-radius:8px;background:var(--card);border:var(--bw) solid var(--ink);overflow:hidden}
.splash-loader i{display:block;height:100%;width:40%;background:var(--red);border-right:var(--bw) solid var(--ink);animation:load 1s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-110%)}100%{transform:translateX(340%)}}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

/* ── language onboarding ── */
.screen{position:relative;z-index:1;min-height:100dvh;padding:24px 20px calc(24px + env(safe-area-inset-bottom))}
.lang-screen{display:flex;flex-direction:column;justify-content:center;gap:26px;max-width:440px;margin:0 auto}
.lang-hero{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.art-hero{width:min(52vw,208px);filter:drop-shadow(4px 6px 0 rgba(23,19,14,.13))}
.lang-title{font-size:24px;font-weight:800;font-family:var(--font-num)}
.lang-title b{color:var(--red)}
.lang-sub{color:var(--dim);font-size:13px;font-weight:600}
.lang-list{display:flex;flex-direction:column;gap:12px}
.lang-card{display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:var(--r-md);
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow);font-size:16px;font-weight:700;transition:.12s}
.lang-card:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.lang-name{flex:1;text-align:left}
.lang-chev{color:var(--dim);font-size:20px}
.lang-foot{text-align:center;color:var(--dim);font-size:12px;font-weight:600}

/* ── app shell ── */
.app{position:relative;z-index:1;max-width:480px;margin:0 auto;min-height:100dvh}
.tab-page{padding:14px 18px 0;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.home-spacer{height:calc(var(--nav-h) + 30px)}

/* header */
.app-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0 16px;gap:10px}
.greet .greet-hi{font-size:18px;font-weight:800;font-family:var(--font-num)}
.greet .greet-sub{color:var(--dim);font-size:12.5px;font-weight:600;margin-top:2px}
.head-right{display:flex;align-items:center;gap:10px}
.country-pill{display:flex;align-items:center;gap:6px;padding:0 11px;height:42px;border-radius:13px;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);transition:.12s}
.country-pill:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.country-pill svg{color:var(--ink)}
.bell-btn{position:relative;width:42px;height:42px;border-radius:13px;background:var(--card);border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.12s}
.bell-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.bell-dot{position:absolute;right:9px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid var(--ink)}

/* portfolio */
.hero-top{display:flex;align-items:center;gap:8px}
.hero-label{color:var(--dim);font-size:13px;font-weight:700}
.eye-btn{color:var(--dim);padding:4px;display:flex}
.hero-amount{font-family:var(--font-num);font-weight:700;font-size:44px;letter-spacing:-1.5px;padding:6px 0 2px;display:flex;align-items:baseline;gap:3px}
.hero-amount .cur{font-size:26px;color:var(--dim)}
.hero-delta{font-size:13px;color:var(--dim);font-weight:600}
.hero-delta b{color:var(--green);font-weight:700;font-family:var(--font-num)}
.demo-chip{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.8px;color:var(--ink);
  border:2px solid var(--ink);border-radius:7px;padding:2px 6px;background:var(--sun);box-shadow:2px 2px 0 var(--ink)}

/* action tiles */
.tiles{display:flex;gap:10px;padding:18px 0 4px}
.tile{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 4px 11px;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:var(--shadow);transition:.12s}
.tile:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.tile-ico{width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.tile-ico img{width:52px;height:52px;object-fit:contain}
.tile-lbl{font-size:10.5px;font-weight:700;color:var(--ink);white-space:nowrap}

/* invite banner */
.banner{position:relative;display:flex;align-items:center;gap:12px;margin-top:16px;padding:15px 16px;width:100%;
  background:var(--peach);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow);transition:.12s;overflow:visible}
.banner:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.banner-glow{display:none}
.banner-txt{flex:1;text-align:left}
.banner-title{font-size:14.5px;font-weight:800;font-family:var(--font-num)}
.banner-sub{color:#6d5c50;font-size:12px;margin-top:3px;line-height:1.45;font-weight:600}
.banner-cta{display:inline-block;color:var(--red);font-size:12.5px;font-weight:800;margin-top:8px}
.banner-pet{width:70px;flex:none;transform:rotate(5deg);filter:drop-shadow(3px 4px 0 rgba(23,19,14,.14))}

/* sections */
.section-head{display:flex;align-items:center;justify-content:space-between;padding:22px 0 10px;font-size:15px;font-weight:800;font-family:var(--font-num)}
.link-btn{color:var(--red);font-size:13px;font-weight:800;display:inline-flex;align-items:center;gap:5px}
.link-btn svg{width:14px;height:14px}
.coin-ic{width:22px;height:22px;object-fit:contain}

/* countries strip */
.countries-strip{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px 8px}
.countries-strip::-webkit-scrollbar{display:none}
.c-chip{flex:none;display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:100px;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);transition:.12s}
.c-chip:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.c-chip.sel{background:var(--red);color:#fff}
.c-chip.sel .cs{color:#ffd9d3}
.c-chip .cn{font-size:12.5px;font-weight:800}
.c-chip .cs{font-size:10px;color:var(--dim);font-weight:600;white-space:nowrap}

/* flags */
.flag{width:21px;height:15px;border-radius:4px;object-fit:cover;display:inline-block;vertical-align:-2px;
  outline:2px solid var(--ink);outline-offset:0}
.flag.lg{width:27px;height:20px;border-radius:5px}
.flag.sm{width:15px;height:11px;border-radius:3px;outline-width:1.5px}

/* assets */
.asset-list{display:flex;flex-direction:column;gap:10px}
.asset-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow);transition:.12s}
.asset-row:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.a-ico{width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;border:2px solid var(--ink);background:#fff}
.a-ico img{width:100%;height:100%;display:block}
.a-info{flex:1;min-width:0}
.a-name{font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:7px;font-family:var(--font-num)}
.net-tag{font-size:9.5px;font-weight:800;color:var(--ink);border:1.5px solid var(--ink);border-radius:5px;padding:1.5px 5px;letter-spacing:.4px;background:var(--paper)}
.a-sub{color:var(--dim);font-size:12px;margin-top:2px;font-weight:600}
.a-right{text-align:right}
.a-amt{font-family:var(--font-num);font-weight:700;font-size:15px}
.a-fiat{color:var(--dim);font-size:12px;margin-top:2px;font-weight:600}
.a-delta{font-family:var(--font-num);font-size:11.5px;font-weight:700;margin-left:6px}
.a-delta.up{color:var(--green)}
.a-delta.dn{color:var(--down)}
.a-delta.zero{color:var(--dim-2)}
.blurred{filter:blur(9px)}

/* page heads */
.page-head{padding:10px 0 16px}
.page-head h2{font-size:23px;font-weight:800;font-family:var(--font-num)}

/* history */
.tx-list{display:flex;flex-direction:column;gap:10px}
.tx-date{color:var(--dim);font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:12px 2px 3px}
.tx-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);transition:.12s}
.tx-row:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.tx-ico{width:40px;height:40px;flex:none;border-radius:12px;background:var(--paper);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;color:var(--ink);position:relative}
.tx-ico>svg{width:19px;height:19px}
.tx-flag{position:absolute;right:-6px;bottom:-6px;line-height:0}
.tx-info{flex:1;min-width:0}
.tx-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-sub{color:var(--dim);font-size:11.5px;margin-top:2px;font-weight:600}
.tx-right{text-align:right}
.tx-amt{font-family:var(--font-num);font-weight:700;font-size:14px}
.tx-amt.minus{color:var(--ink)}
.tx-amt.plus{color:var(--green)}
.tx-fiat{color:var(--dim);font-size:11.5px;margin-top:2px;font-weight:600}
.empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 0;text-align:center;color:var(--dim);font-weight:600}
.empty-art{width:120px;filter:drop-shadow(3px 5px 0 rgba(23,19,14,.12))}

/* earn */
.earn-hero{position:relative;border-radius:var(--r-lg);padding:20px;text-align:center;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow)}
.earn-glow{display:none}
.earn-art{width:128px;margin:0 auto 8px;display:block;filter:drop-shadow(3px 5px 0 rgba(23,19,14,.12))}
.earn-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#fff;
  border:2px solid var(--ink);background:var(--red);border-radius:100px;padding:5px 12px;box-shadow:2px 2px 0 var(--ink)}
.earn-big{font-family:var(--font-num);font-weight:700;font-size:60px;letter-spacing:-2px;padding:8px 0 2px;color:var(--red);
  text-shadow:3px 3px 0 rgba(23,19,14,.12)}
.earn-sub{color:var(--dim);font-size:13.5px;max-width:270px;margin:0 auto 16px;font-weight:600}
.ref-box{display:flex;align-items:center;gap:10px;background:var(--paper);border:2px dashed var(--ink);
  border-radius:13px;padding:11px 13px}
.ref-link{flex:1;font-family:var(--font-num);font-size:13px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.copy-btn{background:var(--ink);color:#fff;font-weight:800;font-size:12.5px;border-radius:9px;padding:9px 14px;flex:none;transition:.12s;border:2px solid var(--ink)}
.copy-btn:active{transform:scale(.94)}
.earn-stats{display:flex;gap:10px;padding:14px 0}
.stat-card{flex:1;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-md);padding:13px 8px;text-align:center;box-shadow:var(--shadow-sm)}
.stat-val{font-family:var(--font-num);font-weight:700;font-size:17px}
.stat-val.green{color:var(--green)}
.stat-lbl{color:var(--dim);font-size:11.5px;margin-top:3px;font-weight:700}
.earn-how{display:flex;flex-direction:column;gap:12px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-sm)}
.how-row{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink);font-weight:600}
.how-row i{width:26px;height:26px;flex:none;border-radius:50%;background:var(--red);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--font-num);font-weight:700;font-size:12.5px;color:#fff}

/* settings */
.profile-card{display:flex;align-items:center;gap:13px;background:var(--card);border:var(--bw) solid var(--ink);
  border-radius:var(--r-lg);padding:15px;margin-bottom:16px;box-shadow:var(--shadow)}
.avatar{width:50px;height:50px;flex:none;border-radius:50%;background:var(--red);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-num);font-weight:700;font-size:20px;color:#fff;background-size:cover;background-position:center}
.profile-info{flex:1;min-width:0}
.profile-name{font-weight:800;font-size:15.5px;font-family:var(--font-num)}
.profile-sub{color:var(--dim);font-size:12.5px;margin-top:2px;font-weight:600}
.lvl-chip{font-size:10px;font-weight:800;letter-spacing:.6px;color:var(--ink);background:var(--sun);border:2px solid var(--ink);border-radius:7px;padding:4px 8px;box-shadow:2px 2px 0 var(--ink)}
.set-group{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-md);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow)}
.set-row{display:flex;align-items:center;gap:12px;padding:14px 15px;border-bottom:2px solid rgba(23,19,14,.1);transition:.12s}
.set-row:last-child{border-bottom:0}
.set-row:active{background:var(--paper)}
.set-ico{width:34px;height:34px;flex:none;border-radius:10px;background:var(--paper);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.set-ico svg{width:17px;height:17px}
.set-lbl{flex:1;font-size:14.5px;font-weight:700}
.set-val{color:var(--dim);font-size:13px;font-weight:700}
.set-chev{color:var(--dim);font-size:19px}
.switch{position:relative;display:inline-block;width:48px;height:28px}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;border-radius:100px;background:var(--paper);border:2px solid var(--ink);transition:.2s}
.switch i::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;border:2px solid var(--ink);transition:.2s;box-sizing:border-box}
.switch input:checked+i{background:var(--red)}
.switch input:checked+i::before{transform:translateX(19px)}
.about-box{display:flex;align-items:center;gap:12px;justify-content:center;padding:8px 0 0;color:var(--dim);font-size:12px;text-align:left;font-weight:600}
.about-pet{width:42px}
.about-dim{color:var(--dim-2)}

/* bottom nav */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;height:var(--nav-h);
  display:flex;align-items:stretch;max-width:480px;margin:0 auto;
  padding:0 6px env(safe-area-inset-bottom);
  background:var(--card);border-top:var(--bw) solid var(--ink)}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--dim);font-size:10px;font-weight:700;transition:.15s}
.nav-btn svg{width:22px;height:22px}
.nav-btn img{width:29px;height:29px;object-fit:contain;transition:transform .16s cubic-bezier(.2,1.4,.4,1)}
.nav-btn.active{color:var(--ink)}
.nav-btn.active svg{color:var(--red)}
.nav-btn.active img{transform:translateY(-3px) scale(1.12)}
.nav-btn.active span{color:var(--red)}
.nav-scan-wrap{flex:1;position:relative}
.nav-scan{position:absolute;left:50%;top:-22px;transform:translateX(-50%);width:58px;height:58px;border-radius:50%;
  background:var(--red);color:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;transition:.12s}
.nav-scan:active{transform:translateX(-50%) translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* overlay / sheets */
.overlay{position:fixed;inset:0;z-index:44;background:rgba(23,19,14,.45);opacity:0;transition:opacity .22s}
.overlay.show{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:45;max-width:480px;margin:0 auto;
  background:var(--paper);border:var(--bw) solid var(--ink);border-bottom:0;
  border-radius:22px 22px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .3s cubic-bezier(.2,1,.3,1);max-height:88dvh;overflow-y:auto}
.sheet.show{transform:none}
.sheet-grab{width:44px;height:6px;border-radius:4px;background:var(--ink);opacity:.25;margin:6px auto 14px}
.sheet-title{font-size:17px;font-weight:800;padding-bottom:14px;font-family:var(--font-num)}

.country-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cg-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r-md);
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);transition:.12s;text-align:left}
.cg-item:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.cg-item.sel{background:var(--red);color:#fff}
.cg-item.sel .cg-std{color:#ffd9d3}
.cg-name{font-size:13px;font-weight:800}
.cg-std{font-size:10.5px;color:var(--dim);margin-top:1px;font-weight:600}
.lang-list.in-sheet .lang-card{padding:13px 16px;box-shadow:var(--shadow-sm)}

/* top-up */
.topup-assets{display:flex;flex-direction:column;gap:10px}
.topup-detail{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:4px}
.net-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.net-chip{font-size:12px;font-weight:800;padding:7px 13px;border-radius:100px;background:var(--card);border:2px solid var(--ink);color:var(--ink);transition:.12s;box-shadow:2px 2px 0 var(--ink)}
.net-chip:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.net-chip.sel{color:#fff;background:var(--red)}
.qr-tile{width:224px;height:224px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;
  border:var(--bw) solid var(--ink);box-shadow:var(--shadow)}
.qr-tile img{border-radius:8px}
.qr-fallback{color:var(--ink);font-family:var(--font-num);font-weight:700;font-size:28px}
.net-scroll{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.net-scroll::-webkit-scrollbar{display:none}
.net-chip{flex:none;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;
  background:var(--card);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  font-weight:800;font-size:12.5px;color:var(--ink);white-space:nowrap;transition:.12s}
.net-chip img{width:22px;height:22px;display:block;border-radius:50%}
.net-chip.sel{background:var(--red);color:#fff}
.net-chip.off{opacity:.45}
.net-chip:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.dep-flow{display:flex;flex-direction:column;gap:13px;padding-bottom:6px}
.dep-note{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);border-radius:14px;padding:11px 13px;
  font-size:12.5px;font-weight:600;line-height:1.5;color:var(--ink)}
.dep-note b{font-weight:900}
.dn-ico{font-size:17px;line-height:1.2;flex:none}
.addr-full{display:block;width:100%;background:var(--card);border:2px dashed var(--ink);border-radius:14px;
  padding:11px 14px;text-align:center;cursor:pointer}
.addr-full:active{background:var(--bg)}
.addr-lbl{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
.addr-txt{display:block;font-family:var(--font-num);font-size:14px;font-weight:700;color:var(--ink);
  word-break:break-all;line-height:1.5}
.ph-row{display:flex;align-items:center;justify-content:space-between}
.mini-btn{height:34px;padding:0 13px;border-radius:11px;background:var(--card);border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);font-weight:800;font-size:12px;color:var(--ink)}
.mini-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.addr-box{display:flex;align-items:center;gap:10px;width:100%;background:var(--card);border:2px dashed var(--ink);
  border-radius:13px;padding:10px 13px}
.addr{flex:1;font-family:var(--font-num);font-size:12.5px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topup-note{color:#a9631c;font-size:12px;text-align:center;font-weight:700;background:var(--sun-soft);border:2px solid var(--ink);border-radius:10px;padding:8px 12px}

/* asset detail */
.ad-head{display:flex;align-items:center;gap:12px;padding-bottom:6px}
.ad-name{flex:1}
.ad-name b{font-size:16px;display:block;font-family:var(--font-num)}
.ad-name span{color:var(--dim);font-size:12px;font-weight:600}
.ad-price{font-family:var(--font-num);font-weight:700;font-size:34px;letter-spacing:-1px;padding-top:8px}
.ad-delta{font-family:var(--font-num);font-size:13.5px;font-weight:700;padding:2px 0 6px}
.ad-delta.up{color:var(--green)}
.ad-delta.dn{color:var(--down)}
.chart-wrap{position:relative;margin:8px 0 0;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-md);padding:10px 6px 4px;box-shadow:var(--shadow-sm)}
.chart-wrap canvas{width:100%;height:140px;display:block}
.tf-pills{display:flex;gap:7px;justify-content:center;padding:12px 0 4px}
.tf{font-family:var(--font-num);font-size:12px;font-weight:800;color:var(--dim);padding:7px 13px;border-radius:100px;transition:.12s;border:2px solid transparent}
.tf.sel{background:var(--red);color:#fff;border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.ad-stats{display:flex;gap:10px;padding:12px 0 4px}
.ad-actions{display:flex;gap:10px;padding-top:10px}
.ad-actions .big-btn{flex:1.2}
.ad-actions .ghost-btn{flex:1;margin-top:0;height:54px}

/* pay flow */
.flow{position:fixed;inset:0;z-index:40;background:var(--paper);display:flex;flex-direction:column;
  max-width:480px;margin:0 auto;animation:fadeUp .25s ease}
.flow-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
.flow-back,.flow-close{width:40px;height:40px;border-radius:12px;background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.12s}
.flow-back:active,.flow-close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.flow-steps{display:flex;gap:6px}
.flow-steps i{width:28px;height:8px;border-radius:5px;background:var(--card);border:2px solid var(--ink);transition:.3s}
.flow-steps i.on{background:var(--red)}
.flow-step{flex:1;display:flex;flex-direction:column;padding:12px 20px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;animation:fadeUp .25s ease}
.flow-title{font-size:21px;font-weight:800;text-align:center;font-family:var(--font-num)}
.flow-sub{color:var(--dim);font-size:13px;text-align:center;padding:8px 0 4px;font-weight:600}
.flow-sub b{color:var(--ink)}
.inline-link{color:var(--red);font-size:13px;font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* scan */
.scan-frame{position:relative;width:min(58vw,232px);aspect-ratio:1;margin:24px auto 30px;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:22px;box-shadow:var(--shadow)}
.scan-corners i{position:absolute;width:40px;height:40px;border:5px solid var(--red)}
.scan-corners i:nth-child(1){left:14px;top:14px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.scan-corners i:nth-child(2){right:14px;top:14px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.scan-corners i:nth-child(3){left:14px;bottom:14px;border-right:0;border-top:0;border-radius:0 0 0 10px}
.scan-corners i:nth-child(4){right:14px;bottom:14px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.scan-beam{position:absolute;left:12%;right:12%;height:4px;border-radius:3px;top:12%;
  background:var(--red);border:1.5px solid var(--ink);
  animation:beam 2.2s ease-in-out infinite alternate}
@keyframes beam{from{top:12%}to{top:84%}}
.scan-qr-ghost{color:rgba(23,19,14,.14)}
.scan-pet{position:absolute;right:-20px;bottom:-26px;width:72px;transform:rotate(-7deg);filter:drop-shadow(2px 3px 0 rgba(23,19,14,.15))}
.big-btn{display:flex;align-items:center;justify-content:center;gap:9px;height:54px;border-radius:15px;width:100%;
  background:var(--red);color:#fff;font-size:15.5px;font-weight:800;transition:.12s;
  border:var(--bw) solid var(--ink);box-shadow:var(--shadow)}
.big-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.big-btn:disabled{opacity:.45;box-shadow:var(--shadow)}
.ghost-btn{height:50px;border-radius:14px;width:100%;margin-top:12px;font-size:14px;font-weight:800;color:var(--ink);
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);transition:.12s;display:flex;align-items:center;justify-content:center;gap:8px}
.ghost-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* amount */
.merchant-card{display:flex;align-items:center;gap:12px;background:var(--card);border:var(--bw) solid var(--ink);
  border-radius:var(--r-md);padding:12px 14px;box-shadow:var(--shadow-sm)}
.merchant-ico{width:42px;height:42px;flex:none;border-radius:12px;background:var(--peach);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;color:var(--ink)}
.merchant-ico svg{width:21px;height:21px}
.merchant-info{flex:1;min-width:0}
.merchant-name{font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:6px}
.merchant-sub{color:var(--dim);font-size:12px;margin-top:2px;font-weight:600}
.merchant-flag{line-height:0}
.amount-zone{padding:14px 0 4px;text-align:center}
.amount-row{display:flex;align-items:baseline;justify-content:center;gap:8px}
.amount-input{background:none;border:0;outline:0;font-family:var(--font-num);font-weight:700;font-size:46px;
  width:58%;text-align:right;letter-spacing:-1px;caret-color:var(--red);pointer-events:none;color:var(--ink)}
.amount-input::placeholder{color:rgba(23,19,14,.22)}
.amount-cur{font-family:var(--font-num);font-weight:700;font-size:20px;color:var(--dim)}
.amount-approx{color:var(--dim);font-size:13px;padding-top:4px;font-weight:700}
.quick-amounts{display:flex;gap:8px;justify-content:center;padding-top:12px}
.qa{font-family:var(--font-num);font-size:12.5px;font-weight:800;padding:7px 13px;border-radius:100px;
  background:var(--card);border:2px solid var(--ink);color:var(--ink);transition:.12s;box-shadow:2px 2px 0 var(--ink)}
.qa:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);background:var(--peach)}
.pay-with{display:flex;align-items:center;gap:10px;background:var(--card);border:var(--bw) solid var(--ink);
  border-radius:var(--r-md);padding:10px 14px;margin:12px 0 8px;box-shadow:var(--shadow-sm);transition:.12s}
.pay-with:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.pw-lbl{color:var(--dim);font-size:13px;flex:none;font-weight:700}
.pw-asset{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:9px;font-weight:800;font-size:14px;font-family:var(--font-num)}
.pw-asset .a-ico{width:26px;height:26px}
.pw-bal{color:var(--dim);font-size:11.5px;font-weight:600}
.fee-line{display:flex;justify-content:space-between;color:var(--dim);font-size:12.5px;padding:3px 2px;font-weight:600}
.fee-line b{color:var(--ink);font-weight:700;font-family:var(--font-num)}

/* keypad */
.keypad{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;padding:12px 0 10px;margin-top:auto}
.kp{height:50px;border-radius:13px;background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);
  font-family:var(--font-num);font-weight:700;font-size:20px;transition:.1s;display:flex;align-items:center;justify-content:center}
.kp:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);background:var(--paper)}
.kp.kp-del{color:var(--red)}

/* confirm */
.confirm-card{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);padding:20px 18px;margin-top:16px;text-align:center;box-shadow:var(--shadow)}
.confirm-amt{font-family:var(--font-num);font-weight:700;font-size:36px;letter-spacing:-1px}
.confirm-merch{color:var(--dim);font-size:14px;padding-top:4px;font-weight:600}
.confirm-sep{height:2px;background:rgba(23,19,14,.12);margin:16px -18px}
.c-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--dim);padding:6px 0;font-weight:600}
.c-row b{color:var(--ink);font-weight:700;font-family:var(--font-num)}
.hold-wrap{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:26px}
.hold-btn{position:relative;width:86px;height:86px;border-radius:50%;background:var(--red);color:#fff;
  border:var(--bw) solid var(--ink);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;transition:transform .15s}
.hold-btn.holding{transform:scale(1.06)}
.hold-ring{position:absolute;inset:-10px;width:102px;height:102px;transform:rotate(-90deg)}
.hold-ring circle{fill:none;stroke-width:5}
.ring-bg{stroke:rgba(23,19,14,.15)}
.ring-fg{stroke:var(--ink);stroke-linecap:round;stroke-dasharray:201;stroke-dashoffset:201}
.hold-hint{color:var(--dim);font-size:13px;font-weight:700}

/* processing / success */
.processing{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
.proc-spinner{position:relative;width:96px;height:96px}
.proc-spinner svg{width:96px;height:96px;animation:spin 1.1s linear infinite}
.proc-spinner circle{fill:none;stroke:var(--red);stroke-width:6;stroke-linecap:round;stroke-dasharray:150 90}
@keyframes spin{to{transform:rotate(360deg)}}
.proc-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.proc-steps{display:flex;flex-direction:column;gap:14px;min-width:230px}
.proc-step{display:flex;align-items:center;gap:11px;color:var(--dim-2);font-size:14px;font-weight:700;transition:.3s}
.proc-step i{width:22px;height:22px;flex:none;border-radius:50%;border:2.5px solid var(--dim-2);transition:.3s;position:relative;background:var(--card)}
.proc-step.on{color:var(--ink)}
.proc-step.on i{border-color:var(--red)}
.proc-step.ok{color:var(--ink)}
.proc-step.ok i{border-color:var(--ink);background:var(--green)}
.proc-step.ok i::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.success{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.success-art{width:min(56vw,225px);filter:drop-shadow(5px 7px 0 rgba(23,19,14,.13));animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.success-title{font-size:26px;font-weight:800;padding-top:10px;font-family:var(--font-num)}
.success-amt{font-family:var(--font-num);font-weight:700;font-size:34px;letter-spacing:-1px;padding:4px 0;color:var(--red)}
.success-sub{color:var(--dim);font-size:14px;padding-bottom:26px;font-weight:600}
.success .big-btn{width:min(100%,320px)}
.success .ghost-btn{width:min(100%,320px)}

/* receipt */
.receipt{padding-bottom:6px}
.r-head{text-align:center;padding-bottom:14px}
.r-check{line-height:0}
.r-check svg{width:46px;height:46px}
.r-amt{font-family:var(--font-num);font-weight:700;font-size:28px;padding-top:6px}
.r-merch{color:var(--dim);font-size:13.5px;padding-top:3px;font-weight:600}
.r-rows{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-md);padding:6px 14px;margin-top:6px;box-shadow:var(--shadow-sm)}
.r-row{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);padding:9px 0;border-bottom:2px solid rgba(23,19,14,.08);font-weight:600}
.r-row:last-child{border-bottom:0}
.r-row b{color:var(--ink);font-weight:700;font-family:var(--font-num);text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-status{color:var(--green)!important}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px);transform:translateX(-50%) translateY(8px);z-index:50;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;
  padding:11px 18px;border-radius:100px;box-shadow:var(--shadow-sm);opacity:0;transition:.25s;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(min-width:481px){
  .bottom-nav{border-left:var(--bw) solid var(--ink);border-right:var(--bw) solid var(--ink)}
}

/* ── eSIM ── */
.esim-head{display:flex;align-items:center;justify-content:space-between}
.refresh-btn{width:40px;height:40px;border-radius:12px;background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.12s}
.refresh-btn:active{transform:translate(2px,2px) rotate(80deg);box-shadow:1px 1px 0 var(--ink)}
.refresh-btn svg{width:18px;height:18px}
.esim-balance{display:flex;align-items:center;gap:12px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-md);box-shadow:var(--shadow);padding:12px 14px;margin-bottom:14px}
.esim-balance img{width:38px;height:38px;object-fit:contain}
.eb-info{flex:1}
.eb-lbl{color:var(--dim);font-size:11.5px;font-weight:700}
.eb-val{font-family:var(--font-num);font-weight:700;font-size:20px;margin-top:1px}
.seg{display:flex;gap:8px;padding-bottom:12px}
.seg-btn{flex:1;height:40px;border-radius:100px;background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);font-size:13px;font-weight:800;transition:.12s;display:flex;align-items:center;justify-content:center;gap:6px}
.seg-ico{width:21px;height:21px;object-fit:contain}
.seg-btn .seg-ico{transition:transform .16s cubic-bezier(.2,1.4,.4,1)}
.seg-btn.active .seg-ico{transform:scale(1.12)}
.trip-seg .seg-btn{font-size:12px;padding:0 4px}
.seg-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.seg-btn.active{background:var(--red);color:#fff}
.esim-list{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.esim-card{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:13px 14px}
.ec-top{display:flex;align-items:center;gap:10px}
.ec-name{flex:1;font-weight:800;font-size:14px;font-family:var(--font-num);min-width:0}
.ec-price{font-family:var(--font-num);font-weight:700;font-size:16px;color:var(--red);white-space:nowrap}
.ec-retail{color:var(--dim-2);font-size:11px;text-decoration:line-through;margin-left:5px;font-weight:600}
.ec-meta{display:flex;gap:6px;flex-wrap:wrap;padding-top:9px}
.ec-chip{font-size:10.5px;font-weight:800;padding:3.5px 8px;border-radius:7px;border:1.5px solid var(--ink);background:var(--paper)}
.ec-chip.b{background:var(--blue-soft)}
.ec-chip.g{background:var(--green-soft)}
.ec-chip.s{background:var(--sun-soft)}
.ec-ops{color:var(--dim);font-size:11px;font-weight:600;padding-top:8px}
.ec-buy{margin-top:11px;height:40px;border-radius:12px;width:100%;background:var(--red);color:#fff;font-weight:800;font-size:13.5px;border:2px solid var(--ink);box-shadow:var(--shadow-sm);transition:.12s;display:flex;align-items:center;justify-content:center;gap:7px}
.ec-buy:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.ec-buy:disabled{opacity:.4}
/* profile card */
.st-badge{font-size:10px;font-weight:800;letter-spacing:.4px;padding:3.5px 8px;border-radius:7px;border:1.5px solid var(--ink);white-space:nowrap}
.st-new{background:var(--blue-soft)}
.st-active{background:var(--green-soft)}
.st-dim{background:var(--paper);color:var(--dim)}
.st-bad{background:#ffd9d3}
.ec-iccid{font-family:var(--font-num);font-size:11px;color:var(--dim);padding-top:6px;font-weight:600;word-break:break-all}
.databar{height:12px;border-radius:7px;background:var(--paper);border:2px solid var(--ink);overflow:hidden;margin-top:9px}
.databar i{display:block;height:100%;background:var(--green);border-right:2px solid var(--ink)}
.databar i.warn{background:var(--sun)}
.databar i.low{background:var(--red)}
.ec-data{display:flex;justify-content:space-between;color:var(--dim);font-size:11px;font-weight:700;padding-top:5px}
.ec-actions{display:flex;gap:8px;padding-top:11px}
.ec-act{flex:1;height:38px;border-radius:11px;background:var(--card);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-weight:800;font-size:12.5px;transition:.12s;display:flex;align-items:center;justify-content:center;gap:6px}
.ec-act:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.ec-act.primary{background:var(--red);color:#fff}
.ec-act.danger{color:var(--red)}
.esim-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 0;color:var(--dim);font-weight:700;font-size:13px}
.esim-loading .proc-spinner{width:52px;height:52px}
.esim-loading .proc-spinner svg{width:52px;height:52px}
/* qr sheet body */
.eq-wrap{display:flex;flex-direction:column;align-items:center;gap:13px;padding-bottom:4px}
.eq-title{font-size:16px;font-weight:800;font-family:var(--font-num);text-align:center}
.eq-hint{color:var(--dim);font-size:12px;font-weight:600;text-align:center;max-width:280px}

/* ── travel (flights & hotels) ── */
.trip-seg{padding-bottom:14px}
.f-card{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-md);box-shadow:var(--shadow);padding:14px;margin-bottom:12px}
.f-row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;min-width:0}
.f-row label{font-size:11px;font-weight:800;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.f-input{height:44px;border-radius:12px;border:2px solid var(--ink);background:var(--paper);padding:0 12px;font-family:var(--font-num);font-weight:700;font-size:15px;outline:none;width:100%}
.f-input:focus{background:#fff;box-shadow:2px 2px 0 var(--ink)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qa-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.qa.active{background:var(--red);color:#fff;border-color:var(--ink)}
.stepper{display:flex;align-items:center;gap:12px;height:44px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);padding:0 8px;justify-content:space-between}
.stepper b{font-family:var(--font-num);font-size:16px}
.step-btn{width:32px;height:32px;border-radius:9px;background:var(--card);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:.1s}
.step-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.fl-row{display:flex;align-items:center;gap:10px}
.fl-times{font-family:var(--font-num);font-weight:700;font-size:17px}
.fl-times span{color:var(--dim);font-weight:600;font-size:11px}
.fl-mid{flex:1;text-align:center;color:var(--dim);font-size:11px;font-weight:700}
.fl-line{height:2.5px;background:var(--ink);border-radius:2px;margin:4px 6px;position:relative}
.fl-line::after{content:"";position:absolute;right:-2px;top:-3.5px;border:5px solid transparent;border-left:7px solid var(--ink)}
.fl-price{font-family:var(--font-num);font-weight:700;font-size:17px;color:var(--red);white-space:nowrap}
.fl-carrier{color:var(--dim);font-size:11.5px;font-weight:700;padding-top:7px}
.stars{color:var(--sun);font-size:13px;letter-spacing:1px;-webkit-text-stroke:.6px var(--ink)}
.hot-photo{width:100%;height:110px;object-fit:cover;border-radius:10px;border:2px solid var(--ink);margin-bottom:10px}
.demo-note{background:var(--sun-soft);border:2px solid var(--ink);border-radius:12px;padding:9px 12px;color:#a9631c;font-size:12px;font-weight:700;margin-bottom:10px}
.tb-summary{background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:11px 13px;margin-bottom:12px;font-weight:700;font-size:13.5px}
.tb-summary .r-row{border:0;padding:5px 0}
.big-check{width:74px;height:74px;border-radius:50%;background:var(--green);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;margin:6px auto 12px}
.big-check svg{width:36px;height:36px}

/* hotel detail */
.ph-strip{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px 12px;padding:2px 18px 6px;scrollbar-width:none}
.ph-strip::-webkit-scrollbar{display:none}
.ph-strip img{width:84%;flex:none;height:172px;object-fit:cover;border-radius:14px;border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);scroll-snap-align:center;background:var(--paper)}
.hd-name{font-size:19px;font-weight:800;font-family:var(--font-num)}
.hd-meta{display:flex;align-items:center;gap:8px;padding:7px 0 2px;flex-wrap:wrap}
.hd-addr{color:var(--dim);font-size:12.5px;font-weight:600;padding-bottom:8px}
.hd-sec{font-size:12px;font-weight:800;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;padding:10px 0 7px}
.hd-desc{font-size:13.5px;line-height:1.55;color:var(--ink);font-weight:500}
.hd-foot{display:flex;align-items:center;gap:12px;padding-top:14px}
.hd-price{font-family:var(--font-num);font-weight:700;font-size:22px;color:var(--red)}
.hd-price span{display:block;font-size:10.5px;color:var(--dim);font-weight:700}
.hd-foot .big-btn{flex:1;margin:0}

/* wallet */
.w-actions{display:flex;gap:8px;padding:10px 0 2px}
.w-btn{flex:1;height:38px;border-radius:11px;background:var(--card);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-weight:800;font-size:11.5px;transition:.1s}
.w-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.memo-box{background:var(--sun-soft);border:2.5px solid var(--ink);border-radius:14px;padding:12px;text-align:center;margin:10px 0}
.memo-box b{font-family:var(--font-num);font-size:26px;letter-spacing:1px;display:block}
.memo-box span{font-size:11px;color:#a9631c;font-weight:700}
.wh-row{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:10px 13px}
.wh-kind{font-size:12.5px;font-weight:700}
.wh-ts{color:var(--dim);font-size:10.5px;font-weight:600}
.wh-amt{font-family:var(--font-num);font-weight:700;font-size:14px}
.wh-amt.plus{color:var(--green)}
.sp-bar{height:10px;border-radius:6px;background:var(--paper);border:2px solid var(--ink);overflow:hidden;margin-top:8px}
.sp-bar i{display:block;height:100%;background:var(--green)}


/* ═══ home v17: real balance + animations ═══ */
.bal-card{position:relative;overflow:hidden;background:var(--card);border:var(--bw) solid var(--ink);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px 16px 14px;margin-bottom:14px;animation:cardIn .4s cubic-bezier(.2,1,.3,1)}
.bal-shine{position:absolute;top:-60%;left:-30%;width:60%;height:220%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,70,85,.10),transparent);animation:shine 5.5s ease-in-out infinite}
@keyframes shine{0%,100%{left:-40%}50%{left:130%}}
.live-chip{background:var(--green);color:#fff;border-color:var(--ink)}
.live-chip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:5px;vertical-align:1px;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.hero-amount .cur{font-size:19px}
.w-actions{display:flex;gap:8px;padding-top:14px}
.w-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:52px;justify-content:center;
  border-radius:13px;background:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  font-weight:800;font-size:10.5px;transition:transform .1s,box-shadow .1s}
.w-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.w-btn.primary{background:var(--red);color:#fff}
.wb-i{font-size:16px;line-height:1}
.add-pill{font-size:11px;font-weight:800;color:var(--red);background:var(--red-soft);border:1.5px solid var(--red);border-radius:100px;padding:2px 9px}
.a-ico img{width:100%;height:100%;object-fit:contain}

/* stagger list entrance */
.stagger{animation:staggerIn .34s both cubic-bezier(.2,1,.3,1);animation-delay:var(--d,0ms)}
@keyframes staggerIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* balance pulse on update */
.pulse{animation:pulseHit .5s ease}
@keyframes pulseHit{0%{transform:scale(1)}30%{transform:scale(1.06);color:var(--green)}100%{transform:scale(1)}}

/* tab pages: smooth slide-fade already via fadeUp; strengthen */
.tab-page{animation:pageIn .32s cubic-bezier(.2,1,.3,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* sheet content entrance */
.sheet.show .sheet-title,.sheet.show .esim-card,.sheet.show .f-card{animation:staggerIn .3s both}

/* skeleton shimmer (optional loaders) */
.skel{background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.09),rgba(0,0,0,.05));
  background-size:200% 100%;animation:shimmer 1.1s linear infinite;border-radius:10px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* button press ripple-ish (scale) for primary CTAs already has active; add tap feedback to cards */
.esim-card,.tx-row,.asset-row,.c-chip,.tile{will-change:transform}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .stagger,.tab-page,.bal-card,.pulse,.bal-shine,.live-chip::before{animation:none!important}
}

/* ═══ v20: sheets UX, deposit redesign, promo, eSIM install ═══ */
/* close button + swipe affordance */
.sheet{padding-top:6px}
.sheet-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border-radius:11px;
  background:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  font-size:14px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;
  z-index:3;transition:transform .1s,box-shadow .1s}
.sheet-close:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.sheet-grab{width:52px;height:6px;border-radius:4px;background:var(--ink);opacity:.22;margin:6px auto 14px;cursor:grab}
.sheet.dragging{transition:none}

/* deposit: coin cards on top, networks below */
.dep-sec{font-size:11px;font-weight:800;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;margin:4px 0 8px}
.coin-row{display:flex;gap:10px;margin-bottom:14px}
.coin-card{flex:1;display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:14px;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);transition:.12s}
.coin-card:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.coin-card.sel{background:var(--red);color:#fff}
.coin-card img{width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);background:#fff;flex:none}
.coin-nm{font-family:var(--font-num);font-weight:800;font-size:14px;line-height:1.1}
.coin-sub{font-size:10px;font-weight:700;opacity:.65}
.dep-divider{height:2px;background:rgba(23,19,14,.1);margin:4px 0 12px;border-radius:2px}
.net-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.net-card{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:13px;text-align:left;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);transition:.12s}
.net-card:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.net-card.sel{background:var(--red);color:#fff}
.net-card.off{opacity:.45}
.net-logo{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);font-family:var(--font-num);font-weight:800;font-size:11px;color:#fff}
.net-ton{background:#0098EA}.net-trc{background:#EC0928}.net-erc{background:#627EEA}
.net-pol{background:#8247E5}.net-sol{background:linear-gradient(135deg,#9945FF,#14F195);color:#fff}
.net-nm{font-size:12.5px;font-weight:800;line-height:1.15}
.net-fee{font-size:10px;font-weight:700;opacity:.6}

/* promo banner rotation */
.banner{overflow:hidden}
.promo-dots{position:absolute;right:14px;bottom:12px;display:flex;gap:5px}
.promo-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.22;transition:.2s}
.promo-dots i.on{opacity:1;background:var(--red);width:16px;border-radius:4px}
.promo-fade{animation:promoIn .45s cubic-bezier(.2,1,.3,1)}
@keyframes promoIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* eSIM install */
.inst-btns{display:flex;flex-direction:column;gap:9px;width:100%;margin-top:4px}
.inst-btn{text-decoration:none;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:9px;
  font-weight:800;font-size:14.5px;border:var(--bw) solid var(--ink);box-shadow:var(--shadow);transition:.12s}
.inst-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.inst-ios{background:var(--ink);color:#fff}
.inst-android{background:#3ddc84;color:var(--ink)}
.inst-note{font-size:11.5px;color:var(--dim);font-weight:600;text-align:center;padding-top:2px}
.man-box{width:100%;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:4px 13px;margin-top:6px}
.man-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:2px solid rgba(23,19,14,.08)}
.man-row:last-child{border-bottom:0}
.man-k{font-size:10.5px;font-weight:800;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;flex:none;width:96px}
.man-v{flex:1;font-family:var(--font-num);font-size:12.5px;font-weight:700;word-break:break-all}
.man-copy{flex:none;width:30px;height:30px;border-radius:9px;background:var(--paper);border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);font-size:12px;display:flex;align-items:center;justify-content:center;transition:.1s}
.man-copy:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}

/* ═══ v27: send/gift/request/myqr/pin/levels/trips/visa/kassa ═══ */
.fee-zero{color:var(--green)!important}
.resolve-box{min-height:0;margin:-4px 0 10px}
.resolve-line{font-size:13px;font-weight:700;padding:9px 12px;border-radius:11px;border:2px solid var(--ink);background:var(--card)}
.resolve-line.ok{background:var(--green-soft)}
.resolve-line.ok em{font-style:normal;color:var(--green);font-size:11px;margin-left:4px}
.resolve-line.warn{background:var(--sun-soft)}
.resolve-line.dim{color:var(--dim);border-style:dashed}
.resolve-sub{font-size:12px;color:var(--dim);font-weight:600;padding:7px 2px 0;line-height:1.45}
.ghost-btn.sm{height:40px;margin-top:8px;font-size:12.5px}
.rc-av{width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;border:2px solid var(--ink);flex:none}
.vtheme-row{display:flex;gap:9px;padding-bottom:10px}
.vtheme{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:14px;border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);font-size:11px;font-weight:800;transition:.12s}
.vtheme img{width:44px;height:44px;object-fit:contain}
.vtheme.sel{outline:3px solid var(--red);outline-offset:-1px;transform:translateY(-3px)}
.vtheme:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.vpreview{width:100%;border-radius:16px;border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);background:#fff;aspect-ratio:3/2}
.vdone-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:8px 0 4px}
.vdone-art{width:120px;filter:drop-shadow(3px 5px 0 rgba(23,19,14,.12));animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.vdone-title{font-size:20px;font-weight:800;font-family:var(--font-num)}
.vdone-amt{font-family:var(--font-num);font-weight:700;font-size:36px}
.vdone-sub{color:var(--dim);font-size:13px;font-weight:600;max-width:280px;line-height:1.5}
.claim-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:10px 0 6px}
.claim-art{width:150px;filter:drop-shadow(4px 6px 0 rgba(23,19,14,.13))}
.claim-art.pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.claim-art.shakeup{animation:shakeup .6s ease}
@keyframes shakeup{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg) scale(1.03)}40%{transform:rotate(7deg) scale(1.06)}60%{transform:rotate(-8deg) scale(1.09)}80%{transform:rotate(6deg) scale(1.05)}}
.claim-title{font-size:19px;font-weight:800;font-family:var(--font-num);max-width:300px}
.claim-sub{color:var(--dim);font-size:13px;font-weight:600;max-width:290px;line-height:1.5}
.claim-amt{font-family:var(--font-num);font-weight:700;font-size:52px;letter-spacing:-1.5px;line-height:1}
.claim-cur{color:var(--dim);font-weight:800;font-size:15px;margin-top:-4px}
.claim-wish{font-size:14px;font-weight:700;background:var(--sun-soft);border:2px solid var(--ink);border-radius:12px;padding:9px 14px;max-width:300px}
.stamp{display:inline-block;font-family:var(--font-num);font-weight:800;font-size:19px;letter-spacing:1.5px;color:var(--red);border:4px solid var(--red);border-radius:10px;padding:7px 16px;transform:rotate(-7deg);margin:6px 0 4px}
.stamp.paid{color:var(--green);border-color:var(--green)}
.stamp.pop{animation:stampIn .45s cubic-bezier(.2,1.6,.4,1)}
.stamp.mini{font-size:10px;border-width:2.5px;padding:2px 7px;letter-spacing:.8px;transform:rotate(-6deg)}
@keyframes stampIn{from{transform:rotate(-7deg) scale(1.9);opacity:0}to{transform:rotate(-7deg) scale(1);opacity:1}}
.multi-chk{display:flex;gap:10px;align-items:flex-start;margin:2px 0 12px;cursor:pointer}
.multi-chk em{font-style:normal;color:var(--dim);font-size:11.5px;font-weight:600}
.multi-chk b{font-size:13.5px}
.chk{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;cursor:pointer}
.chk input{display:none}
.chk i{width:24px;height:24px;flex:none;border-radius:8px;border:2.5px solid var(--ink);background:var(--card);position:relative;transition:.15s}
.chk input:checked+i{background:var(--red)}
.chk input:checked+i::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(40deg)}
.myqr-wrap{display:flex;flex-direction:column;align-items:center;gap:11px;padding-top:4px}
.myqr-canvas{border-radius:20px;border:var(--bw) solid var(--ink);box-shadow:var(--shadow);background:#fff}
.qr-in{animation:qrIn .45s cubic-bezier(.2,1,.3,1)}
@keyframes qrIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.pr-ava{width:56px;height:56px;margin:0 auto 8px;border-radius:50%;background:var(--peach);border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px}
.addr-warn{background:#ffd9d3;border:2.5px solid var(--ink);border-radius:12px;padding:10px 12px;font-size:12px;font-weight:700;margin:-4px 0 10px;line-height:1.5;animation:shake .35s ease}
.addr-warn .mini-btn{margin-top:7px;display:inline-flex;background:var(--card)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.save-addr-row{margin:-2px 0 10px;display:flex;flex-direction:column;gap:8px}
.f-input.sm{height:40px;font-size:13px}
.ab-net{font-style:normal;font-size:9.5px;color:var(--dim);display:block;font-weight:700}
.opt-row{display:flex;gap:7px}
.qa.opt.active{background:var(--red);color:#fff}
.ins-feats{padding-top:9px;display:flex;flex-direction:column;gap:4px}
.ins-feat{font-size:12px;font-weight:600;color:var(--ink)}
.ins-feat.no{color:var(--red)}
.esim-card.ins-top{outline:3px solid var(--red);outline-offset:-1px}
.policy-card{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px}
.policy-head{display:flex;align-items:center;gap:9px;font-family:var(--font-num);font-size:15px}
.policy-head span.stamp{margin-left:auto}
.policy-head b span{color:var(--red)}
.policy-num{font-family:var(--font-num);font-weight:700;font-size:26px;letter-spacing:1px;padding:12px 0 10px;border-bottom:2px dashed rgba(23,19,14,.25);margin-bottom:8px}
/* pin overlay */
.pin-overlay{position:fixed;inset:0;z-index:70;background:rgba(23,19,14,.55);display:flex;align-items:flex-end;justify-content:center}
.pin-box{width:100%;max-width:480px;background:var(--paper);border:var(--bw) solid var(--ink);border-bottom:0;border-radius:22px 22px 0 0;padding:22px 22px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;animation:pinUp .3s cubic-bezier(.2,1,.3,1)}
@keyframes pinUp{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.pin-box.shake{animation:shake .4s ease}
.pin-art{width:76px;filter:drop-shadow(3px 4px 0 rgba(23,19,14,.12))}
.pin-title{font-family:var(--font-num);font-weight:800;font-size:18px}
.pin-sub{color:var(--dim);font-size:12.5px;font-weight:600;min-height:16px}
.pin-dots{display:flex;gap:14px;padding:10px 0 6px}
.pin-dots i{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--ink);background:var(--card);transition:.15s}
.pin-dots i.on{background:var(--red);transform:scale(1.15)}
.pin-pad{width:100%;max-width:300px;margin-top:2px}
.kp-bio{font-size:22px}
/* levels */
.lvl-card{--lvlc:#bcb4a5;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);padding:15px;margin-bottom:16px;box-shadow:6px 6px 0 var(--lvlc),6px 6px 0 2.5px var(--ink)}
.lvl-top{display:flex;align-items:center;gap:12px}
.lvl-badge{width:64px;height:64px;object-fit:contain;filter:drop-shadow(2px 3px 0 rgba(23,19,14,.15))}
.lvl-info{flex:1}
.lvl-name{font-family:var(--font-num);font-weight:800;font-size:19px}
.lvl-pct{color:var(--dim);font-size:12px;font-weight:700;margin-top:2px}
.runway{position:relative;height:22px;border-radius:12px;background:var(--ink);border:2.5px solid var(--ink);margin:14px 0 4px;overflow:visible}
.runway-marks{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-evenly;pointer-events:none}
.runway-marks i{width:14px;height:3px;background:rgba(255,255,255,.55);border-radius:2px}
.runway-fill{position:relative;height:100%;background:var(--red);border-radius:9px 0 0 9px;border-right:2.5px solid var(--ink);min-width:24px;transition:width .8s cubic-bezier(.2,1,.3,1)}
.runway-plane{position:absolute;right:-14px;top:-16px;width:34px;height:34px;object-fit:contain;transform:rotate(8deg);filter:drop-shadow(2px 2px 0 rgba(23,19,14,.3))}
.lvl-next{font-size:12.5px;font-weight:700;color:var(--ink);padding:8px 0 2px}
.lvl-scale{display:flex;gap:6px;padding-top:8px}
.lvl-step{flex:1;text-align:center;border:2px solid var(--ink);border-radius:9px;background:var(--paper);padding:5px 2px;opacity:.5}
.lvl-step.on{opacity:1;background:var(--card)}
.lvl-step.cur{background:var(--red);color:#fff;opacity:1;box-shadow:2px 2px 0 var(--ink)}
.lvl-step b{display:block;font-family:var(--font-num);font-size:12px}
.lvl-step span{font-size:9px;font-weight:700;opacity:.75}
/* trips */
.trip-card{padding:14px}
.trip-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.trip-city{font-family:var(--font-num);font-weight:800;font-size:17px}
.trip-dates{color:var(--dim);font-size:12px;font-weight:700;flex:1}
.tl{margin-top:10px;padding-left:6px;border-left:2.5px dashed rgba(23,19,14,.35)}
.tl-row{position:relative;padding:7px 0 7px 16px}
.tl-dot{position:absolute;left:-7.5px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--card);border:2.5px solid var(--ink)}
.tl-row.past .tl-dot{background:var(--green)}
.tl-row.today .tl-dot{background:var(--red);animation:blink 1.4s ease-in-out infinite}
.tl-t{font-size:13px;font-weight:700}
.tl-s{color:var(--dim);font-size:11px;font-weight:600;margin-top:1px}
.tl-ref{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.trip-foot{color:var(--dim);font-size:11.5px;font-weight:700;padding-top:8px;border-top:2px solid rgba(23,19,14,.08);margin-top:6px}
/* visa */
.visa-card{position:relative}
.visa-count{font-family:var(--font-num);font-weight:700;font-size:52px;letter-spacing:-2px;line-height:1;padding:8px 0 6px}
.visa-count span{font-size:13px;letter-spacing:0;color:var(--dim);font-weight:700;margin-left:8px}
.visa-count.over{color:var(--red)}
.visa-alarm{outline:3px solid var(--red);outline-offset:-1px}
.visa-kinds{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.vk{text-align:left;padding:10px 13px;border-radius:12px;border:2px solid var(--ink);background:var(--card);font-size:13px;font-weight:700;box-shadow:2px 2px 0 var(--ink);transition:.12s}
.vk.sel{background:var(--red);color:#fff}
.vk:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
/* kassa */
.kassa-head-mid{flex:1;text-align:center}
.kassa-name{font-family:var(--font-num);font-weight:800;font-size:15px}
.kassa-today{color:var(--dim);font-size:11px;font-weight:700}
.kassa-amt-lbl{text-align:center;font-family:var(--font-num);font-weight:700;font-size:34px;padding:6px 0 14px}
.kassa-qr{width:auto;height:auto;padding:18px;margin:0 auto}
.kassa-wait{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--dim);font-size:13px;font-weight:700;padding:16px 0 6px}
.radar{width:11px;height:11px;border-radius:50%;background:var(--green);border:2px solid var(--ink);animation:blink 1.2s ease-in-out infinite}
.kassa-links{display:flex;gap:8px;justify-content:center;padding-top:12px}
.kassa-flash{position:fixed;inset:0;z-index:75;background:rgba(23,160,94,.92);display:flex;align-items:center;justify-content:center;animation:pop .3s ease}
.kassa-flash-in{text-align:center;color:#fff}
.kf-amt{font-family:var(--font-num);font-weight:700;font-size:46px;padding-top:12px}
.kf-from{font-size:15px;font-weight:700;opacity:.9;padding-top:4px}
.sec-hero{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:4px 0 14px}
.sec-hero img{width:92px;filter:drop-shadow(3px 4px 0 rgba(23,19,14,.12))}
.sec-hero p{color:var(--dim);font-size:13px;font-weight:600;max-width:300px;line-height:1.5}
.offline-bar{position:fixed;top:0;left:0;right:0;z-index:66;background:var(--sun);border-bottom:2.5px solid var(--ink);color:var(--ink);font-size:12px;font-weight:800;text-align:center;padding:7px 10px calc(7px + env(safe-area-inset-top))}
.trip-seg{overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px 14px}
.trip-seg::-webkit-scrollbar{display:none}
.trip-seg .seg-btn{flex:none;padding:0 13px}

/* ═══ v28: icon sprites everywhere + ref revamp + splash logo ═══ */
.splash-logo-img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(4px 5px 0 rgba(23,19,14,.14))}
.ki{width:20px;height:20px;object-fit:contain;vertical-align:-5px}
.ci{width:17px;height:17px;object-fit:contain;vertical-align:-3px}
.oi{width:19px;height:19px;object-fit:contain;vertical-align:-4px}
.wb-img{width:22px;height:22px;object-fit:contain}
.dn-img{width:22px;height:22px;object-fit:contain;flex:none}
.pr-img{width:34px;height:34px;object-fit:contain}
.pr-img.sm{width:20px;height:20px}
.pol-logo{width:30px;height:30px;object-fit:contain}
.wh-kind .rc-av{width:22px;height:22px;font-size:11px;vertical-align:-6px;display:inline-flex;margin-right:2px}
.alias-row{margin-bottom:8px}
.alias-prefix{font-family:var(--font-num);font-size:12.5px;font-weight:700;color:var(--dim);word-break:break-all}
#refHistHead{padding-top:16px}

/* ═══ v29: referral empty state ═══ */
.ref-empty{display:flex;align-items:center;gap:14px;background:var(--card);border:2px dashed var(--ink);border-radius:var(--r-md);padding:14px 16px}
.ref-empty img{width:74px;height:74px;object-fit:contain;flex:none;filter:drop-shadow(2px 3px 0 rgba(23,19,14,.12))}
.re-txt{display:flex;flex-direction:column;gap:4px}
.re-txt b{font-size:13.5px;font-weight:800;font-family:var(--font-num)}
.re-txt span{color:var(--dim);font-size:12px;font-weight:600;line-height:1.5}
#refHist{margin-bottom:16px}
#tab-earn .earn-how{margin-top:2px}