/* Бытовка — Mini App. Night violet neon, glass and silver, like the brand banners. */
:root {
  --bg: #08050f;
  --bg2: #0e0a1a;
  --surface: rgba(255, 255, 255, .045);
  --surface2: rgba(255, 255, 255, .075);
  --line: rgba(190, 160, 255, .14);
  --line2: rgba(190, 160, 255, .26);
  --text: #f4f1ff;
  --muted: #a49cbf;
  --dim: #6f688a;
  --violet: #8b5cf6;
  --violet2: #a78bfa;
  --neon: #b388ff;
  --pink: #e879f9;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #fb7185;
  --r: 22px;
  --r-sm: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --top: max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), env(safe-area-inset-top, 0px));
  --bottom: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --display: "Unbounded", "Manrope", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  font: 500 15px/1.45 "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
  user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font: inherit; color: var(--text); }
img { display: block; }
[hidden] { display: none !important; }
.sel { user-select: text; -webkit-user-select: text; }

/* ---------------------------------------------------------------- ambient background */
.aurora { position: fixed; inset: -20vmax; z-index: 0; pointer-events: none; filter: blur(60px) saturate(1.2); opacity: .9; }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.aurora .a1 { width: 60vmax; height: 60vmax; left: 10%; top: 0; background: radial-gradient(circle, rgba(124, 58, 237, .55), transparent 65%); animation: drift1 22s var(--ease) infinite alternate; }
.aurora .a2 { width: 50vmax; height: 50vmax; right: 0; top: 30%; background: radial-gradient(circle, rgba(217, 70, 239, .28), transparent 65%); animation: drift2 26s var(--ease) infinite alternate; }
.aurora .a3 { width: 55vmax; height: 55vmax; left: 20%; bottom: -10%; background: radial-gradient(circle, rgba(59, 7, 100, .7), transparent 65%); animation: drift3 30s var(--ease) infinite alternate; }
@keyframes drift1 { to { transform: translate3d(18vmax, 12vmax, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-22vmax, -8vmax, 0) scale(.9); } }
@keyframes drift3 { to { transform: translate3d(10vmax, -16vmax, 0) scale(1.1); } }
.stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 72% 12%, #d9c9ff, transparent),
    radial-gradient(1.5px 1.5px at 38% 42%, #fff, transparent), radial-gradient(1px 1px at 86% 56%, #e9d5ff, transparent),
    radial-gradient(1px 1px at 22% 76%, #fff, transparent), radial-gradient(1.5px 1.5px at 62% 86%, #c4b5fd, transparent),
    radial-gradient(1px 1px at 92% 92%, #fff, transparent), radial-gradient(1px 1px at 6% 52%, #ddd6fe, transparent);
  animation: twinkle 6s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .25; } to { opacity: .6; } }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- splash */
.splash { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 18px; transition: opacity .6s var(--ease), visibility .6s; }
.splash.out { opacity: 0; visibility: hidden; }
.splash-logo { position: relative; width: 112px; height: 112px; animation: pop .9s var(--spring) both; }
.splash-logo img, .brand-logo img { width: 100%; height: 100%; border-radius: 50%; position: relative; }
.ring { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--neon), var(--pink), transparent 60%); animation: spin 2.4s linear infinite; filter: blur(.5px); }
.ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bg); }
.splash-logo::after { content: ""; position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .45), transparent 70%); z-index: -1; animation: breathe 2.4s ease-in-out infinite; }
.splash-word { font: 800 26px/1 var(--display); letter-spacing: .14em; animation: rise .8s .15s var(--ease) both; }
.splash-bar { width: 120px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; animation: rise .8s .25s var(--ease) both; }
.splash-bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: linear-gradient(90deg, var(--violet), var(--pink)); animation: load 1.1s ease-in-out infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .7; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

.silver { background: linear-gradient(180deg, #ffffff 0%, #e4defa 45%, #9d94c4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- shell */
.app { position: relative; z-index: 2; min-height: 100vh; padding: calc(var(--top) + 10px) 16px calc(var(--bottom) + 104px); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; animation: rise .7s var(--ease) both; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-logo { position: relative; width: 42px; height: 42px; flex: none; }
.brand-logo .ring { inset: -2.5px; animation-duration: 5s; }
.brand-text { display: grid; line-height: 1.1; min-width: 0; }
.brand-text b { font: 800 16px/1.1 var(--display); letter-spacing: .1em; background: linear-gradient(180deg, #fff, #b9b0de); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-text small { color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balance-pill { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(139, 92, 246, .22), rgba(232, 121, 249, .12)); border: 1px solid var(--line2); box-shadow: 0 8px 30px -10px rgba(139, 92, 246, .7), inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .2s var(--ease); flex: none; }
.balance-pill:active { transform: scale(.95); }
.bp-label { display: none; }
.bp-val { font: 700 14px/1 var(--display); letter-spacing: .01em; }
.bp-plus { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 17px/1 var(--display); background: linear-gradient(135deg, var(--violet), var(--pink)); box-shadow: 0 4px 14px rgba(167, 139, 250, .6); }

.view { animation: viewIn .45s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------------------------------------------------------------- tab bar */
.tabbar { position: fixed; z-index: 20; left: 50%; bottom: calc(var(--bottom) + 14px); transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); width: min(360px, calc(100% - 32px)); padding: 6px; border-radius: 26px; background: rgba(20, 14, 36, .62); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: 1px solid var(--line); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }
.tab { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; padding: 8px 0 7px; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .02em; transition: color .3s; }
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--spring); }
.tab.active { color: #fff; }
.tab.active svg { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 8px rgba(179, 136, 255, .9)); }
.tab-glow { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 3); border-radius: 20px; background: linear-gradient(135deg, rgba(139, 92, 246, .38), rgba(232, 121, 249, .2)); border: 1px solid var(--line2); box-shadow: 0 0 24px -4px rgba(139, 92, 246, .8); transition: transform .45s var(--spring); }

/* ---------------------------------------------------------------- home */
.hero { position: relative; height: 172px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 50px -20px rgba(124, 58, 237, .7); isolation: isolate; animation: rise .7s .05s var(--ease) both; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.12); will-change: transform; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 5, 15, 0) 30%, rgba(8, 5, 15, .92) 100%); }
.hero::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); transform: translateX(-120%); animation: sweep 5.5s 1.2s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
.hero-body { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 14px; }
.hero-body h1 { margin: 0; font: 800 19px/1.15 var(--display); letter-spacing: .01em; }
.hero-body p { margin: 4px 0 0; color: #cfc6ee; font-size: 12.5px; font-weight: 600; }

.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 22px; animation: rise .7s .12s var(--ease) both; }
.perk { display: grid; justify-items: center; gap: 4px; padding: 11px 6px 10px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); text-align: center; font-size: 11px; font-weight: 700; color: #d9d2f5; line-height: 1.2; }
.perk i { font-style: normal; font-size: 18px; filter: drop-shadow(0 0 8px rgba(179, 136, 255, .55)); }

.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 12px; }
.section-title h2 { margin: 0; font: 700 17px/1.2 var(--display); }
.section-title span { color: var(--dim); font-size: 12px; font-weight: 700; }

/* categories wrap onto several lines: every category is visible on phone and desktop (no hidden side-scroll) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 2px 0 4px; }
.chip { flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 14px 8px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: 13px; color: #d7d0f2; scroll-snap-align: start; transition: background .3s, border-color .3s, color .3s, transform .2s var(--ease); }
.chip:active { transform: scale(.94); }
.chip .em { width: 22px; height: 22px; }
.chip.all { padding-left: 14px; }
.chip.on { color: #fff; background: linear-gradient(135deg, rgba(139, 92, 246, .45), rgba(232, 121, 249, .25)); border-color: rgba(200, 170, 255, .45); box-shadow: 0 6px 22px -8px rgba(139, 92, 246, .9); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card { position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); border: 1px solid var(--line); text-align: left; transform: translateZ(0); transition: transform .35s var(--spring), border-color .3s, box-shadow .3s; animation: cardIn .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.card:active { transform: scale(.965); }
.card.out { opacity: .55; }
.card-body { padding: 11px 12px 12px; display: grid; gap: 7px; }
.card-title { font-weight: 800; font-size: 13.5px; line-height: 1.25; min-height: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.price { font: 700 15px/1 var(--display); }
.badge { font-size: 10.5px; font-weight: 800; padding: 4px 7px; border-radius: 8px; background: rgba(52, 211, 153, .12); color: var(--green); border: 1px solid rgba(52, 211, 153, .2); white-space: nowrap; }
.badge.warn { background: rgba(251, 191, 36, .1); color: var(--amber); border-color: rgba(251, 191, 36, .22); }
.badge.off { background: rgba(255, 255, 255, .05); color: var(--dim); border-color: var(--line); }

/* designed product art (replaced by a real photo when the admin uploads one) */
.art { --c1: #8b5cf6; --c2: #4c1d95; --c3: #e9d5ff; position: relative; aspect-ratio: 1 / .86; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 90% at 18% 10%, color-mix(in srgb, var(--c1) 70%, transparent), transparent 60%),
    radial-gradient(110% 90% at 92% 100%, color-mix(in srgb, var(--c2) 85%, transparent), transparent 62%),
    linear-gradient(160deg, #120c22, #07050d); }
.art::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px; -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 10%, transparent 70%); mask-image: radial-gradient(circle at 50% 45%, #000 10%, transparent 70%); }
.art::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%); transform: translateX(-130%); animation: sweep 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .45s + 1s); pointer-events: none; }
.art .orb { position: absolute; left: 50%; top: 46%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c3) 55%, transparent), transparent 65%); filter: blur(10px); animation: breathe 4s ease-in-out infinite; }
.art .orbit { position: absolute; left: 50%; top: 46%; width: 74%; aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(68deg); border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--c3) 45%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--c1) 60%, transparent); }
.art .orbit::after { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px var(--c3); }
.art .orbit { animation: orbit 7s linear infinite; }
@keyframes orbit { from { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(0); } to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(360deg); } }
.art .hero-em { position: absolute; left: 50%; top: 46%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 2; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); animation: float 4.5s ease-in-out infinite; }
@keyframes float { 50% { transform: translate(-50%, -58%); } }
.art .hero-em.em { height: auto; }
.sum { transition: opacity .2s; }
.sum.loading { opacity: .55; }
.art .wm { position: absolute; left: 10px; bottom: 7px; z-index: 2; font: 800 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .82); text-shadow: 0 0 14px color-mix(in srgb, var(--c1) 90%, transparent); }
.art .spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px var(--c3); opacity: 0; animation: spark 3.2s ease-in-out infinite; }
@keyframes spark { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
.art.photo { background: #0b0816; }
.art.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art.photo::before { display: none; }

.em { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.28em; position: relative; }
.em > svg, .em > img, .em > video { width: 100% !important; height: 100% !important; display: block; }
.em .fb { display: grid; place-items: center; width: 100%; height: 100%; font-size: .95em; line-height: 1; }
.hero-em .fb { font-size: 300%; }

/* skeleton */
.sk { background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .04) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- full-screen layer (product, order) */
.layer { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.page { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--bg); pointer-events: auto; transform: translateX(100%); transition: transform .5s var(--ease); padding: 0 0 calc(var(--bottom) + 110px); -webkit-overflow-scrolling: touch; }
.page.in { transform: none; }
.page.leave { transform: translateX(30%); opacity: 0; transition: transform .35s var(--ease), opacity .3s; }
.page .bgfx { position: absolute; inset: 0 0 auto; height: 420px; z-index: 0; pointer-events: none; opacity: .9; }
.page > .inner { position: relative; z-index: 1; padding: calc(var(--top) + 10px) 16px 0; }

.p-visual { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 30px 70px -25px color-mix(in srgb, var(--c1, #8b5cf6) 80%, transparent); animation: pop .6s var(--spring) both; }
.p-visual .art { aspect-ratio: 1 / .72; }
.p-visual .art .hero-em { width: 34%; }
.p-visual .art .wm { font-size: 14px; left: 16px; bottom: 13px; }
.p-head { margin: 18px 2px 4px; animation: rise .6s .08s var(--ease) both; }
.p-cat { color: var(--violet2); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.p-title { margin: 6px 0 0; font: 700 22px/1.2 var(--display); }
.p-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.p-price { font: 800 28px/1 var(--display); background: linear-gradient(180deg, #fff, #c9bdf5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tiers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.tier { font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 10px; background: rgba(232, 121, 249, .1); color: #f5d0fe; border: 1px solid rgba(232, 121, 249, .22); }

.box { margin-top: 14px; padding: 15px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); animation: rise .6s .14s var(--ease) both; }
.box h3 { margin: 0 0 10px; font: 700 14px/1.2 var(--display); color: #e6e0ff; display: flex; align-items: center; gap: 8px; }
.rich { color: #d8d2ef; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.rich b { color: #fff; }
.rich a { color: var(--neon); text-decoration: none; border-bottom: 1px solid rgba(179, 136, 255, .35); }
.rich code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; padding: 2px 6px; border-radius: 6px; background: rgba(139, 92, 246, .16); color: #e9d5ff; }
.rich pre { white-space: pre-wrap; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); }
.rich blockquote { margin: 8px 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--violet); color: #c9c1e6; }
.rich .spoiler { background: rgba(255, 255, 255, .15); color: transparent; border-radius: 4px; transition: color .3s; }
.rich .spoiler.open { color: inherit; background: none; }
.rich .em { width: 1.3em; height: 1.3em; }

.qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qty-label { font-weight: 700; color: #ddd6fb; }
.qty-label small { display: block; color: var(--dim); font-size: 12px; font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.stepper button { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 600 22px/1 var(--display); background: var(--surface2); transition: transform .15s, background .2s; }
.stepper button:active { transform: scale(.88); background: rgba(139, 92, 246, .35); }
.stepper button:disabled { opacity: .3; }
.stepper output { min-width: 42px; text-align: center; font: 700 17px/1 var(--display); }

.promo { display: flex; gap: 8px; margin-top: 12px; }
.field { flex: 1; width: 100%; min-width: 0; height: 46px; padding: 0 14px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); outline: none; font-weight: 700; letter-spacing: .04em; transition: border-color .25s, box-shadow .25s; user-select: text; -webkit-user-select: text; }
.field:focus { border-color: rgba(179, 136, 255, .6); box-shadow: 0 0 0 4px rgba(139, 92, 246, .16); }
.field::placeholder { color: var(--dim); letter-spacing: 0; font-weight: 600; }
.promo-msg { margin-top: 8px; font-size: 12.5px; font-weight: 700; min-height: 0; }
.promo-msg.ok { color: var(--green); }
.promo-msg.bad { color: var(--red); }

.sum { display: grid; gap: 8px; }
.sum-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); font-weight: 600; }
.sum-row b { color: #eee9ff; font-weight: 700; }
.sum-row.disc b { color: var(--green); }
.sum-row.total { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line2); color: #fff; font-size: 16px; }
.sum-row.total b { font: 800 18px/1 var(--display); }
.note { margin-top: 12px; padding: 11px 13px; border-radius: 14px; font-size: 13px; font-weight: 600; line-height: 1.45; background: rgba(139, 92, 246, .1); border: 1px solid rgba(139, 92, 246, .22); color: #ddd3ff; }
.note.warn { background: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .22); color: #fde9b0; }

/* sticky action bar */
.actionbar { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; padding: 14px 16px calc(var(--bottom) + 14px); background: linear-gradient(180deg, rgba(8, 5, 15, 0), rgba(8, 5, 15, .92) 35%); pointer-events: auto; transform: translateY(110%); transition: transform .5s var(--ease); }
.actionbar.in { transform: none; }
.btn { position: relative; width: 100%; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 15.5px/1 var(--display); letter-spacing: .01em; color: #fff; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #7c3aed 0%, #a855f7 55%, #d946ef 100%); box-shadow: 0 14px 40px -12px rgba(168, 85, 247, .95), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s var(--ease), filter .2s, opacity .2s; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); animation: sweep 3.8s ease-in-out infinite; }
.btn:active { transform: scale(.97); filter: brightness(1.1); }
.btn:disabled { opacity: .5; filter: grayscale(.4); }
.btn.ghost { background: var(--surface2); box-shadow: none; border: 1px solid var(--line2); font-size: 14.5px; }
.btn.ghost::after { display: none; }
.btn.green { background: linear-gradient(135deg, #059669, #10b981 60%, #34d399); box-shadow: 0 14px 40px -12px rgba(16, 185, 129, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn.sm { height: 44px; border-radius: 14px; font-size: 13.5px; width: auto; padding: 0 16px; }
.btn .spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* ---------------------------------------------------------------- bottom sheet */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; visibility: hidden; }
.sheet-wrap.open { visibility: visible; }
.sheet-bg { position: absolute; inset: 0; background: rgba(4, 2, 10, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s; }
.sheet-wrap.open .sheet-bg { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; padding: 10px 18px calc(var(--bottom) + 20px); border-radius: 28px 28px 0 0; background: linear-gradient(180deg, #171029, #0c0817 60%); border: 1px solid var(--line2); border-bottom: 0; box-shadow: 0 -30px 80px -20px rgba(124, 58, 237, .55); transform: translateY(105%); transition: transform .5s var(--ease); }
.sheet-wrap.open .sheet { transform: none; }
.sheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 5px; margin: 0 auto 14px; background: rgba(255, 255, 255, .18); }
.sheet h2 { margin: 0 0 4px; font: 700 19px/1.2 var(--display); }
.sheet .sub { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; font-weight: 600; }

.amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.amt { height: 50px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font: 700 14.5px/1 var(--display); transition: transform .15s, background .25s, border-color .25s; }
.amt:active { transform: scale(.94); }
.amt.on { background: linear-gradient(135deg, rgba(139, 92, 246, .4), rgba(232, 121, 249, .22)); border-color: rgba(200, 170, 255, .55); }
.amt.hint { grid-column: 1 / -1; background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .3); color: #a7f3d0; font-size: 13.5px; }
.methods { display: grid; gap: 9px; margin: 16px 0 6px; }
.method { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: left; transition: transform .15s, border-color .25s, background .25s; }
.method:active { transform: scale(.97); }
.method .mi { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; flex: none; background: linear-gradient(135deg, var(--m1, #7c3aed), var(--m2, #c026d3)); box-shadow: 0 8px 20px -8px var(--m1, #7c3aed); }
.method .mt { flex: 1; min-width: 0; }
.method .mt b { display: block; font-size: 15px; }
.method .mt small { color: var(--muted); font-size: 12px; font-weight: 600; }
.method .arr { color: var(--dim); font-size: 20px; }

.invoice { text-align: center; }
.inv-amount { font: 800 34px/1.1 var(--display); margin: 6px 0 2px; }
.inv-timer { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 16px; padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 700 13px/1 var(--display); color: #ddd6fe; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(251, 191, 36, .6); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); } 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } }
.copyrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); text-align: left; }
.copyrow small { display: block; color: var(--dim); font-size: 11.5px; font-weight: 700; }
.copyrow b { font: 700 15px/1.3 var(--display); word-break: break-all; }
.copy-btn { flex: none; height: 34px; padding: 0 12px; border-radius: 11px; background: rgba(139, 92, 246, .22); border: 1px solid rgba(179, 136, 255, .35); font-size: 12.5px; font-weight: 800; color: #ede9fe; transition: transform .15s; }
.copy-btn:active { transform: scale(.92); }
.copy-btn.done { background: rgba(52, 211, 153, .2); border-color: rgba(52, 211, 153, .4); color: #a7f3d0; }

/* ---------------------------------------------------------------- orders */
.list { display: grid; gap: 10px; }
.order { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); text-align: left; animation: cardIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); transition: transform .2s var(--ease); }
.order:active { transform: scale(.98); }
.order .art { width: 54px; height: 54px; aspect-ratio: auto; border-radius: 15px; flex: none; }
.order .art .hero-em { width: 62%; animation: none; transform: translate(-50%, -50%); }
.order .art .orbit, .order .art .wm, .order .art::after, .order .art .spark { display: none; }
.order .ot { flex: 1; min-width: 0; }
.order .ot b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order .ot small { color: var(--dim); font-size: 12px; font-weight: 600; }
.order .or { text-align: right; display: grid; gap: 5px; justify-items: end; }
.order .or b { font: 700 13.5px/1 var(--display); }
.st { font-size: 10.5px; font-weight: 800; padding: 4px 8px; border-radius: 8px; white-space: nowrap; background: rgba(52, 211, 153, .12); color: var(--green); }
.st.wait { background: rgba(251, 191, 36, .12); color: var(--amber); }
.st.ref { background: rgba(251, 113, 133, .12); color: var(--red); }
.codes { display: grid; gap: 8px; }
.code { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.code .ctext { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.4; word-break: break-all; color: #f3e8ff; user-select: text; -webkit-user-select: text; }
.code .ctext a { color: var(--neon); text-decoration: none; }

.empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 46px 20px; color: var(--muted); font-weight: 600; }
.empty .big { font-size: 46px; filter: drop-shadow(0 0 18px rgba(139, 92, 246, .7)); animation: float2 4s ease-in-out infinite; }
@keyframes float2 { 50% { transform: translateY(-8px); } }

/* ---------------------------------------------------------------- profile */
.pf-head { display: flex; align-items: center; gap: 14px; margin: 4px 2px 16px; }
.avatar { position: relative; width: 64px; height: 64px; flex: none; }
.avatar .ring { inset: -3px; animation-duration: 4s; }
.avatar .face { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font: 800 24px/1 var(--display); background: linear-gradient(135deg, #4c1d95, #86198f); }
.avatar .face img { width: 100%; height: 100%; object-fit: cover; }
.pf-name { min-width: 0; }
.pf-name b { display: block; font: 700 19px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-name small { color: var(--muted); font-weight: 600; font-size: 13px; }
.wallet { position: relative; padding: 18px; border-radius: 26px; overflow: hidden; isolation: isolate; border: 1px solid rgba(200, 170, 255, .3); background: radial-gradient(120% 120% at 0% 0%, rgba(139, 92, 246, .55), transparent 55%), radial-gradient(100% 100% at 100% 100%, rgba(217, 70, 239, .4), transparent 55%), linear-gradient(135deg, #1b1035, #0e0a1c); box-shadow: 0 24px 60px -20px rgba(139, 92, 246, .8); }
.wallet::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .25; background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255, 255, 255, .05) 18px 19px); }
.wallet::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%); transform: translateX(-120%); animation: sweep 6s 2s ease-in-out infinite; pointer-events: none; }
.wallet small { color: #d8cdfa; font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.wallet .wv { font: 800 34px/1.1 var(--display); margin: 6px 0 16px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stat { padding: 12px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.stat b { display: block; font: 700 15px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat small { color: var(--dim); font-size: 11px; font-weight: 700; }
.menu { margin-top: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.mrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 15px; text-align: left; font-weight: 700; transition: background .2s; }
.mrow + .mrow { border-top: 1px solid rgba(190, 160, 255, .08); }
.mrow:active { background: rgba(139, 92, 246, .12); }
.mrow .mic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; background: rgba(139, 92, 246, .16); flex: none; }
.mrow span { flex: 1; }
.mrow em { font-style: normal; color: var(--dim); font-size: 13px; font-weight: 700; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.seg button { padding: 6px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 800; color: var(--muted); transition: background .25s, color .25s; }
.seg button.on { background: linear-gradient(135deg, var(--violet), #c026d3); color: #fff; }
.ref-card { margin-top: 14px; padding: 16px; border-radius: var(--r); background: linear-gradient(135deg, rgba(52, 211, 153, .1), rgba(139, 92, 246, .1)); border: 1px solid rgba(110, 231, 183, .22); }
.ref-card h3 { margin: 0 0 4px; font: 700 15px/1.2 var(--display); }
.ref-card p { margin: 0 0 12px; color: #c9d9d2; font-size: 13px; font-weight: 600; }

/* ---------------------------------------------------------------- success & gates */
.done { display: grid; justify-items: center; text-align: center; padding: 22px 6px 6px; }
.check { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(52, 211, 153, .3), rgba(52, 211, 153, .06) 70%); box-shadow: 0 0 60px -6px rgba(52, 211, 153, .7); animation: pop .7s var(--spring) both; }
.check svg { width: 46px; height: 46px; fill: none; stroke: #6ee7b7; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .6s .35s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.check.wait { background: radial-gradient(circle, rgba(251, 191, 36, .25), rgba(251, 191, 36, .05) 70%); box-shadow: 0 0 60px -6px rgba(251, 191, 36, .6); }
.check.wait svg { stroke: #fcd34d; animation: spin 1.6s linear infinite; stroke-dasharray: none; stroke-dashoffset: 0; }
.done h2 { margin: 16px 0 6px; font: 700 21px/1.2 var(--display); }
.done p { margin: 0 0 18px; color: var(--muted); font-weight: 600; font-size: 14px; }

.gate { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; text-align: center; gap: 14px; padding: 30px 26px; }
.gate .gl { position: relative; width: 120px; height: 120px; margin-bottom: 8px; }
.gate .gl::after { content: ""; position: absolute; inset: -36px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .5), transparent 70%); z-index: -1; animation: breathe 3s ease-in-out infinite; }
.gate .gl img { width: 100%; height: 100%; border-radius: 50%; position: relative; }
.gate h1 { margin: 0; font: 800 22px/1.25 var(--display); }
.gate p { margin: 0; max-width: 330px; color: var(--muted); font-weight: 600; font-size: 14.5px; white-space: pre-line; }
.gate .btn { max-width: 320px; margin-top: 8px; }
.gate .lock { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: #ddd6fe; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; }

/* ---------------------------------------------------------------- toast & fx */
.toast { position: fixed; z-index: 70; left: 50%; top: calc(var(--top) + 14px); max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 16px; background: rgba(28, 20, 48, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line2); box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .7); font-weight: 700; font-size: 14px; text-align: center; transform: translate(-50%, -160%); transition: transform .5s var(--spring); pointer-events: none; }
.toast.show { transform: translate(-50%, 0); }
.toast.bad { border-color: rgba(251, 113, 133, .45); }
.toast.ok { border-color: rgba(52, 211, 153, .45); }
.fx { position: fixed; inset: 0; z-index: 80; pointer-events: none; width: 100%; height: 100%; }

@media (min-width: 560px) {
  .app, .page > .inner { max-width: 560px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .actionbar { padding-left: calc(50% - 264px); padding-right: calc(50% - 264px); }
  .sheet { max-width: 560px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}