/* Tokens copied from uy-joy-agent/app/admin (PayStars neumorphism) */
:root{
  --bg:#EAF2FF;--card:#EAF2FF;--primary:#2563EB;--sky:#60A5FA;--lavender:#7C83FD;
  --text:#0F172A;--muted:#64748B;--success:#16A34A;--danger:#DC2626;--pending:#D97706;
  --sh-l:rgba(255,255,255,.95);--sh-d:rgba(160,180,212,.55);--term-bg:#0B1220;--term-text:#CBD5E1;
  --font-sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-sm:14px;--r-md:18px;--r-lg:22px;--r-xl:28px;
  --shadow-up:-6px -6px 14px var(--sh-l),6px 6px 16px var(--sh-d);
  --shadow-up-sm:-4px -4px 9px var(--sh-l),4px 4px 11px var(--sh-d);
  --shadow-up-lg:-10px -10px 24px var(--sh-l),10px 10px 28px var(--sh-d);
  --shadow-in:inset -4px -4px 9px var(--sh-l),inset 4px 4px 10px var(--sh-d);
  --shadow-glow:0 10px 22px color-mix(in srgb,var(--primary) 35%,transparent);
  --shadow-glow-sm:0 8px 16px color-mix(in srgb,var(--primary) 30%,transparent);
  --tint:color-mix(in srgb,var(--primary) 10%,transparent);
  --tint-12:color-mix(in srgb,var(--primary) 12%,transparent);
}
[data-theme="dark"]{
  --bg:#0B1220;--card:#0B1220;--primary:#3B82F6;--sky:#60A5FA;--lavender:#8B92FF;--text:#F8FAFC;--muted:#94A3B8;
  --success:#22C55E;--danger:#F87171;--pending:#FBBF24;--sh-l:rgba(38,55,90,.5);--sh-d:rgba(2,5,12,.8);--term-bg:#060B15;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:500 14px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased}
body{min-height:var(--tg-viewport-height,100vh);padding:12px 14px calc(24px + env(safe-area-inset-bottom))}
a{color:var(--primary);text-decoration:none}
.mono{font-family:var(--font-mono);font-weight:600}
.muted{color:var(--muted)}
.grad-text{background:linear-gradient(120deg,var(--primary),var(--lavender));-webkit-background-clip:text;background-clip:text;color:transparent}
.hdr{position:sticky;top:8px;z-index:10;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:999px;background:var(--card);box-shadow:var(--shadow-up)}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:800;flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.logo{display:grid;place-items:center;width:32px;height:32px;border-radius:12px;background:var(--primary);color:#fff;font-size:12px;box-shadow:var(--shadow-glow-sm)}
.pill-bal{padding:6px 12px;border-radius:999px;box-shadow:var(--shadow-in);font-size:12px;color:var(--primary)}
.icon-btn{width:36px;height:36px;border:0;border-radius:12px;background:var(--card);color:var(--text);box-shadow:var(--shadow-up-sm);font-size:18px;cursor:pointer}
.icon-btn:active{box-shadow:var(--shadow-in)}
main{padding-top:18px;display:grid;gap:16px}
h1{font-size:clamp(22px,6vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:4px 0}
h2{font-size:16px;font-weight:800;margin:0 0 10px}
.eyebrow{font-size:13px;font-weight:700;color:var(--primary)}
.label{font-size:12px;font-weight:700;color:var(--muted)}
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-up);padding:20px}
.card.lg{border-radius:var(--r-xl);box-shadow:var(--shadow-up-lg)}
.card.inset{box-shadow:var(--shadow-in)}
.hero{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 10%,var(--card)),var(--card))}
.grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-up);color:var(--text);font-weight:700;min-height:104px}
.tile:active{box-shadow:var(--shadow-in);transform:scale(.98)}
.tile.wide{grid-column:1/-1}
.tile .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--tint-12);font-size:20px}
.tile small{font-weight:600;color:var(--muted);font-size:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 20px;border:0;border-radius:999px;font:700 15px var(--font-sans);cursor:pointer;transition:transform .1s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-glow)}
.btn-ghost{background:var(--card);color:var(--text);box-shadow:var(--shadow-up-sm)}
.btn[disabled]{opacity:.55;pointer-events:none}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--r-sm);box-shadow:var(--shadow-in)}
.list{display:grid;gap:10px}
.price{font-family:var(--font-mono);font-weight:600;color:var(--primary)}
.big{font-size:30px;letter-spacing:-.02em}
.field{width:100%;padding:12px 14px;border:0;border-radius:var(--r-sm);background:var(--card);box-shadow:var(--shadow-in);color:var(--text);font:600 16px var(--font-mono);outline:none}
.field:focus{box-shadow:var(--shadow-in),0 0 0 2px color-mix(in srgb,var(--primary) 40%,transparent)}
.seg{display:flex;gap:6px;padding:6px;border-radius:999px;box-shadow:var(--shadow-in)}
.seg button{flex:1;border:0;background:transparent;color:var(--muted);padding:9px;border-radius:999px;font:700 13px var(--font-sans);cursor:pointer}
.seg button.on{background:var(--primary);color:#fff;box-shadow:var(--shadow-glow-sm)}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.b-success{color:var(--success);background:color-mix(in srgb,var(--success) 14%,transparent)}
.b-danger{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}
.b-pending{color:var(--pending);background:color-mix(in srgb,var(--pending) 14%,transparent)}
.b-muted{color:var(--muted);background:color-mix(in srgb,var(--muted) 14%,transparent)}
.state{text-align:center;padding:36px 20px;display:grid;gap:12px;justify-items:center}
.state .ic{font-size:36px}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--tint-12);border-top-color:var(--primary);animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{height:64px;border-radius:var(--r-md);box-shadow:var(--shadow-in);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
.stack{display:grid;gap:12px}
.term{background:var(--term-bg);color:var(--term-text);font-family:var(--font-mono);border-radius:var(--r-sm);padding:12px 14px;word-break:break-all;font-size:13px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,40px);opacity:0;transition:.25s;background:var(--card);box-shadow:var(--shadow-up-lg);padding:12px 18px;border-radius:999px;font-weight:700;z-index:20;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:560px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}body{max-width:640px;margin:0 auto}}
.cover{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border-radius:var(--r-md);box-shadow:var(--shadow-up-sm);background:var(--tint-12)}
.tile .cover{border-radius:var(--r-sm);margin-bottom:2px}
main>.cover{border-radius:var(--r-xl);box-shadow:var(--shadow-up-lg)}

/* product thumbs */
.tile.product{display:flex;flex-direction:column;align-items:stretch;gap:10px;overflow:hidden}
.tile.product .thumb{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;display:block;box-shadow:var(--shadow-in)}
.tile.product .ic{align-self:flex-start}
.hero-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:18px;margin:0 0 12px;box-shadow:var(--shadow-up-sm);display:block}

/* ===== App shell + bottom tabbar ===== */
body{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;width:min(612px,calc(100% - 20px));display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:8px calc(8px + env(safe-area-inset-left)) 8px calc(8px + env(safe-area-inset-right));border-radius:26px;background:var(--card);box-shadow:var(--shadow-up-lg)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:18px;color:var(--muted);font-size:10.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;transition:.15s}
.tabbar a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabbar a.on{color:var(--primary);box-shadow:var(--shadow-in)}
.tabbar a:active{transform:scale(.96)}
.methods{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.method{display:flex;align-items:center;gap:10px;padding:12px;border:0;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-up-sm);color:var(--text);font:700 14px var(--font-sans);cursor:pointer;text-align:left}
.method .mi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;flex:none}
.method.on{box-shadow:var(--shadow-in);outline:2px solid color-mix(in srgb,var(--primary) 50%,transparent)}
.stepper{display:flex;gap:10px;align-items:center}
.stepper .field{text-align:center}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:0;padding:8px 14px;border-radius:999px;background:var(--card);box-shadow:var(--shadow-up-sm);color:var(--text);font:700 13px var(--font-sans);cursor:pointer}
.chip:active,.chip.on{box-shadow:var(--shadow-in);color:var(--primary)}
.avatar{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--lavender));color:#fff;font-size:22px;font-weight:800;box-shadow:var(--shadow-glow-sm);flex:none}
.menu-row{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-up-sm);color:var(--text);font-weight:700}
.menu-row .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--tint-12);font-size:18px}
.menu-row .chev{margin-left:auto;color:var(--muted)}
.menu-row:active{box-shadow:var(--shadow-in)}
.bal-hero{text-align:center}
.bal-hero .price.big{font-size:36px}
.preview-flag{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--tint-12);color:var(--primary);font-weight:800}
/* ===== v3: 5-tab additions ===== */
.banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:color-mix(in srgb,var(--pending) 12%,var(--card));box-shadow:var(--shadow-up-sm);color:var(--text)}
.banner .cd{margin-left:auto;font-family:var(--font-mono);font-weight:700;color:var(--pending);font-size:16px}
.prod{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-up);color:var(--text)}
.prod:active{box-shadow:var(--shadow-in)}
.prod img{width:92px;height:56px;object-fit:cover;border-radius:12px;flex:none;background:var(--tint-12)}
.prod .meta{display:grid;gap:2px;min-width:0;flex:1}
.prod .meta b{font-weight:800}
.prod .meta small{color:var(--muted);font-weight:600;font-size:12px}
.hrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-up-sm);color:var(--text)}
.hrow:active{box-shadow:var(--shadow-in)}
.hrow .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--tint-12);font-size:18px;flex:none}
.hrow .meta{flex:1;min-width:0;display:grid}
.hrow .meta small{color:var(--muted);font-size:12px}
.hrow .r{text-align:right;display:grid;gap:4px;justify-items:end}
.seg.scroll{overflow-x:auto}
.seg.scroll button{flex:none;padding:9px 14px}
.lb-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);box-shadow:var(--shadow-in)}
.lb-row.me{outline:2px solid color-mix(in srgb,var(--primary) 45%,transparent)}
.lb-row .rk{width:30px;font-family:var(--font-mono);font-weight:800;color:var(--primary)}
.note{font-size:13px;color:var(--muted);padding:12px 14px;border-radius:var(--r-sm);box-shadow:var(--shadow-in)}
.sheet-bg{position:fixed;inset:0;background:rgba(2,6,23,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:min(640px,100%);background:var(--bg);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));display:grid;gap:14px;box-shadow:var(--shadow-up-lg);max-height:90vh;overflow:auto}
.copy-row{display:flex;gap:8px;align-items:center}
.copy-row .term{flex:1}
/* perf: lighter shadows (fewer/blurrier layers are costly in Telegram WebView) */
:root{--shadow-up:-4px -4px 8px var(--sh-l),4px 4px 10px var(--sh-d);--shadow-up-sm:-3px -3px 6px var(--sh-l),3px 3px 7px var(--sh-d);--shadow-up-lg:-6px -6px 14px var(--sh-l),6px 6px 16px var(--sh-d);--shadow-in:inset -3px -3px 6px var(--sh-l),inset 3px 3px 7px var(--sh-d)}
.hrow,.lb-row,.prod{content-visibility:auto;contain-intrinsic-size:auto 64px}
@media (prefers-reduced-motion:reduce){.skel,.spinner{animation:none}}
 
/* services: 3 products in one row */
.grid.products{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid.products .tile{padding:10px;gap:4px;min-height:0;font-size:13px}
.grid.products .tile .cover{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border-radius:10px;margin:0}
.grid.products .tile small{font-size:11px}
.grid.products .tile .badge{font-size:10px;padding:2px 6px;align-self:flex-start}

.tile.tgcard{flex-direction:row;align-items:center;gap:14px;min-height:0;margin-top:14px}
.tgcard .tgmeta{display:flex;flex-direction:column;gap:2px;flex:1}
.tgcard .tgmeta b{font-size:17px}
.tgchev{font-size:26px;color:var(--muted)}
.tglogo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.tghero{align-items:center;text-align:center}
.tghero .tglogo{width:64px;height:64px}

.grid.products.g2{grid-template-columns:repeat(2,minmax(0,1fr))}