/* ============================================================
   CIPHER · Apple Liquid Glass  ·  cipher.casa
   Mobile-first (Telegram Mini App) → rich desktop layout
   ============================================================ */

:root {
  --bg-0:#05070b; --bg-1:#080b12;
  --ink:#eef2f8; --ink-soft:#9aa6bd; --ink-dim:#5b667d;
  --accent:#3aa0ff; --accent-2:#2af0c8; --accent-deep:#1d6fd0;
  --telegram:#2AABEE; --ok:#2af0c8;
  --line:rgba(255,255,255,.08); --placeholder-color:#8a94a6;

  --c-glass:#bbbbbc; --c-light:#fff; --c-dark:#000;
  --glass-reflex-dark:2; --glass-reflex-light:.35; --saturation:170%;

  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --slide:transform .44s cubic-bezier(.5,.05,.2,1), width .44s cubic-bezier(.5,.05,.2,1), height .44s cubic-bezier(.5,.05,.2,1);

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
/* base canvas colour (JS keeps it in sync with theme) — prevents a white strip
   peeking below the body in the Telegram WebView */
html { background:#05070b; }
body { background:radial-gradient(140% 100% at 50% -10%,#0d1320 0%,var(--bg-0) 55%,#020305 100%);
  color:var(--ink); overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-weight:600; }
/* основной текст — жирный */
p, span, small, li, label, button, input, b, .hero-sub, .pf-note, .svc-row small, .mock-row { font-weight:600; }
.hero-sub, .pf-note, .verify-head p, .promo-head small, .svc-row small, .rail-list li, .rail-support p { font-weight:500; }
.mono { font-family:"JetBrains Mono",ui-monospace,monospace; }
a { color:var(--accent); text-decoration:none; }
button { font-family:inherit; cursor:pointer; color:inherit; background:none; border:none; }
em { font-style:normal; color:var(--accent); }
input { font-family:inherit; }
.tg { color:var(--telegram); }

/* ============================================================
   LIQUID GLASS
   ============================================================ */
.glass {
  background-color:color-mix(in srgb,var(--c-glass) 11%,transparent);
  backdrop-filter:blur(16px) saturate(var(--saturation));
  -webkit-backdrop-filter:blur(16px) saturate(var(--saturation));
  position:relative;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light)*10%),transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light)*90%),transparent),
    inset -2px -2px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light)*80%),transparent),
    inset -3px -8px 1px -6px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light)*60%),transparent),
    inset -.3px -1px 4px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark)*12%),transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark)*20%),transparent),
    inset 0 3px 4px -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark)*20%),transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark)*10%),transparent),
    0 1px 5px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark)*10%),transparent),
    0 8px 24px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark)*12%),transparent);
}
.glass-soft {
  background-color:color-mix(in srgb,var(--c-glass) 9%,transparent);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 1.5px 2px 0 -2px rgba(255,255,255,.5),
    inset -2px -3px 6px -4px rgba(0,0,0,.6),0 4px 16px rgba(0,0,0,.3);
}
.glass-blue {
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,white 8%),var(--accent-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(0,0,0,.25),
    0 6px 22px color-mix(in srgb,var(--accent) 45%,transparent); color:#fff;
}

/* ============================================================
   SLIDING PILL (smooth indicator)
   ============================================================ */
.slider { position:relative; }
.pill-bg { position:absolute; top:0; left:0; border-radius:100px; z-index:0; pointer-events:none;
  transition:var(--slide); }
.pill-blue { background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,white),var(--accent-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 16px color-mix(in srgb,var(--accent) 50%,transparent); }
.pill-soft { background:color-mix(in srgb,var(--accent) 18%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent); border-radius:12px; }
.slider-item { position:relative; z-index:1; }

/* ============================================================
   MATRIX BOOT — binary rain decoding into the CIPHER logo
   ============================================================ */
.boot { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#0a1018 0%,#070a0f 55%,#04060a 100%);
  transition:opacity .5s ease,visibility .5s; }
.boot.is-done { opacity:0; visibility:hidden; pointer-events:none; }
/* falling 1/0 rain (matrix.js) — masked to a soft vignette so the centre stays readable */
.boot-matrix { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  -webkit-mask:radial-gradient(120% 90% at 50% 42%,transparent 14%,#000 78%);
          mask:radial-gradient(120% 90% at 50% 42%,transparent 14%,#000 78%); }
/* faint horizontal scan-line sweep over the rain */
.boot-scan { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.6;
  background:linear-gradient(180deg,transparent,rgba(58,160,255,.07) 50%,transparent);
  background-size:100% 220px; animation:boot-scan 2.4s linear infinite; }
@keyframes boot-scan { from{background-position:0 -240px} to{background-position:0 100vh} }

.boot-center { position:relative; z-index:2; text-align:center; padding:24px; width:min(460px,92vw); }
.boot-badge { width:88px; height:88px; margin:0 auto 16px; filter:drop-shadow(0 6px 30px rgba(58,160,255,.5));
  animation:boot-pop .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes boot-pop { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:none} }
.boot-title { font-family:"Chakra Petch","JetBrains Mono",monospace; font-weight:700; line-height:1;
  font-size:clamp(46px,15vw,90px); letter-spacing:.18em; white-space:nowrap;
  background:linear-gradient(180deg,#eaf4ff 0%,#7fb8ff 52%,#2af0c8 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 24px rgba(58,160,255,.4)); }
.boot-bits { margin-top:16px; font-size:13px; letter-spacing:.5em; color:#3f6a8f; font-weight:500;
  text-shadow:0 0 12px rgba(58,160,255,.2); padding-left:.5em; }
.boot-bar { width:min(260px,66vw); height:3px; border-radius:4px; margin:22px auto 12px;
  background:rgba(255,255,255,.07); overflow:hidden; }
.boot-bar i { display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 14px var(--accent-2); animation:load 1.5s cubic-bezier(.55,0,.25,1) forwards; }
@keyframes load { 0%{width:0} 55%{width:68%} 100%{width:100%} }
.boot-domain { font-size:10.5px; letter-spacing:.34em; color:var(--accent-2); opacity:.85;
  text-transform:lowercase; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app { position:relative; min-height:100dvh;
  padding:calc(var(--safe-top) + 14px) 14px calc(24px + var(--safe-bottom));
  max-width:560px; margin:0 auto; opacity:0; transition:opacity .8s ease .1s; }
.app.is-ready { opacity:1; }
.sphere-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.85; }
.vignette { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(75% 55% at 50% 32%,transparent 38%,rgba(2,3,5,.9) 100%); }
.app > *:not(.sphere-canvas):not(.vignette):not(.topfade) { position:relative; z-index:2; }

/* frosted strip under Telegram's floating top controls (✕ · ⌄ · ⋮) — content
   scrolling up gets blurred softly behind them. Only meaningful in the TG WebView
   where --safe-top > 0; negligible (and hidden on desktop) otherwise. */
.topfade { position:fixed; top:0; left:0; right:0; height:calc(var(--safe-top) + 12px); z-index:6;
  pointer-events:none; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(5,7,11,.72),rgba(5,7,11,.32) 55%,transparent);
  -webkit-mask:linear-gradient(180deg,#000 50%,transparent);
          mask:linear-gradient(180deg,#000 50%,transparent); }
body[data-theme="light"] .topfade {
  background:linear-gradient(180deg,rgba(238,241,246,.78),rgba(238,241,246,.34) 55%,transparent); }
@media (min-width:860px) { .topfade { display:none; } }

.show-mobile { display:inline-flex; } .hide-mobile { display:none; }
.is-hidden { display:none !important; }

/* topbar */
.topbar { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; }
.brand-badge { width:22px; height:22px; display:inline-block; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 55%,transparent)); }
.brand-name { font-family:"Chakra Petch",sans-serif; letter-spacing:.06em; font-size:19px; }

.hero-nav { display:none; gap:0; border-radius:100px; padding:4px; }
.hero-nav-item { padding:9px 20px; border-radius:100px; color:var(--ink-soft); font-size:.92em; font-weight:600;
  transition:color .3s; }
.hero-nav-item.is-active { color:#fff; }

/* wallet button */
.wallet-btn { margin-left:auto; display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  border-radius:100px; font-weight:600; font-size:.88em; white-space:nowrap; transition:transform .12s; }
.wallet-btn:active { transform:scale(.95); }
.wallet-btn .w-dot { width:7px; height:7px; border-radius:50%; background:var(--ink-dim); transition:background .3s,box-shadow .3s; }
.wallet-btn .w-ico { color:var(--accent); width:20px; height:20px; display:inline-grid; place-items:center; flex:none; }
.wallet-btn .w-ico svg { width:100% !important; height:100% !important; display:block; }
/* animated wallet icon is white — keep white in dark theme, flip to black in light theme */
body[data-theme="light"] .wallet-btn .w-ico { filter:invert(1); }
.wallet-btn.is-connected .w-dot { background:var(--ok); box-shadow:0 0 10px var(--ok); }
.wallet-btn.is-connected #walletLabel { font-family:"JetBrains Mono",monospace; font-size:.92em; }

/* connected-wallet sheet (full address + copy + disconnect) */
.wallet-sheet { position:fixed; inset:0; z-index:120; display:flex; align-items:flex-end; justify-content:center;
  padding:16px; background:rgba(3,5,9,.55); opacity:0; transition:opacity .24s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.wallet-sheet.show { opacity:1; }
.ws-card { width:100%; max-width:420px; border-radius:24px; padding:18px; display:flex; flex-direction:column; gap:12px;
  transform:translateY(16px); transition:transform .26s cubic-bezier(.22,1,.36,1); }
.wallet-sheet.show .ws-card { transform:none; }
.ws-head { display:flex; align-items:center; gap:12px; }
.ws-ico { width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; font-size:18px;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); overflow:hidden; }
.ws-ico svg { width:78% !important; height:78% !important; display:block; }
body[data-theme="light"] .ws-ico svg { filter:invert(1); }
.ws-meta { flex:1; min-width:0; }
.ws-meta b { display:block; font-size:15px; }
.ws-meta small { color:var(--ink-soft); font-size:12px; }
.ws-x { flex:none; width:30px; height:30px; border-radius:50%; color:var(--ink-soft); font-size:13px;
  background:color-mix(in srgb,var(--c-glass) 14%,transparent); }
.ws-x:active { transform:scale(.9); }
.ws-addr { display:flex; align-items:center; gap:10px; justify-content:space-between; width:100%; padding:13px 15px;
  border-radius:14px; text-align:left; transition:transform .12s; }
.ws-addr:active { transform:scale(.985); }
.ws-addr code { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--ink); }
.ws-copy { flex:none; font-size:12.5px; font-weight:700; color:var(--accent); }
.ws-disc { width:100%; padding:14px; border-radius:14px; text-align:center; font-weight:700; font-size:14px;
  color:#ff6b6b; transition:transform .12s; }
.ws-disc:active { transform:scale(.985); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding:6px 0 22px; animation:fade-up .6s cubic-bezier(.22,1,.36,1) .1s both; }
.hero-text { text-align:center; }
.eyebrow { font-size:10.5px; letter-spacing:.3em; color:var(--accent-2); margin-bottom:12px; }
.hero-title { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(28px,8vw,44px);
  line-height:1.08; letter-spacing:-.01em; }
.hero-sub { color:var(--ink-soft); max-width:440px; margin:14px auto 0; font-size:15px; line-height:1.6; }
.hero-cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.btn-primary,.btn-ghost { padding:14px 24px; border-radius:100px; font-weight:600; font-size:15px;
  transition:transform .15s ease; display:inline-flex; align-items:center; }
.btn-primary:active,.btn-ghost:active { transform:scale(.96); }
.trust { display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:20px;
  font-size:12px; color:var(--ink-soft); letter-spacing:.03em; }
.trust b { color:var(--ink); } .trust .sep { color:var(--ink-dim); }
/* mobile: cleaner hero — primary CTAs + stats + eyebrow live in the dock/topbar instead */
.eyebrow, .hero-cta, .trust { display:none; }

.hero-promo { display:none; border-radius:24px; padding:22px; }
.promo-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.promo-badge { width:42px; height:42px; flex:none; }
.promo-head b { display:block; font-size:17px; font-family:"Chakra Petch",sans-serif; }
.promo-head small { color:var(--ink-soft); font-size:12.5px; }
/* demo photo placeholder inside the promo card (replace assets/promo-demo.jpg) */
.promo-demo { position:relative; margin-top:4px; border-radius:16px; overflow:hidden; aspect-ratio:16/10;
  display:grid; place-items:center; border:1.5px dashed var(--line);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--c-glass) 10%,transparent)); }
.promo-demo-label { font-family:"Chakra Petch",sans-serif; font-weight:700; letter-spacing:.18em; font-size:15px; color:var(--ink-soft); }
.promo-demo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ============================================================
   LAYOUT
   ============================================================ */
.layout { display:grid; }
.rail { display:none; }
.panels { display:grid; }
/* opacity-only entrance — a transform here would create a backdrop-root and break
   the cards' backdrop-filter (frosted glass over the matrix canvas) */
.panel { grid-area:1/1; display:none; animation:panel-fade .42s ease both; }
@keyframes panel-fade { from{opacity:0} to{opacity:1} }
.panel.is-active { display:block; }

/* ============================================================
   VERIFY
   ============================================================ */
.verify { border-radius:24px; padding:22px;
  backdrop-filter:blur(26px) saturate(170%); -webkit-backdrop-filter:blur(26px) saturate(170%); }
.verify-head { display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.mark-badge { width:54px; height:54px; flex:none; filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--accent) 50%,transparent)); }
.verify-head h3 { font-size:20px; } .verify-head p { color:var(--ink-soft); font-size:13px; margin-top:5px; line-height:1.5; }

.field { display:flex; align-items:center; gap:8px; border-radius:15px; padding:15px 16px; margin-bottom:12px; }
.field .at { color:var(--ink-dim); font-weight:700; }
.field input { flex:1; min-width:0; background:none; border:none; outline:none; color:var(--ink); font-size:16px; }
.field input::placeholder { color:var(--placeholder-color); }
.field-check { flex:none; font-size:12.5px; font-weight:600; color:var(--ink-soft); max-width:48%;
  display:inline-flex; align-items:center; gap:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field-check.ok { color:var(--ok); }
.field-check.err { color:#ff7a7a; }
.field-check img { width:20px; height:20px; border-radius:50%; object-fit:cover; flex:none; }

.seg { display:flex; gap:0; padding:5px; border-radius:15px; margin-bottom:12px;
  background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line); }
.seg-wide { margin-bottom:16px; }
.seg-btn { flex:1; padding:12px 6px; border-radius:11px; font-weight:600; font-size:13.5px; color:var(--ink-soft);
  transition:color .3s; text-align:center; }
.seg-btn.is-active { color:#fff; }

.pay-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.pay-ico { width:20px; height:20px; flex:none; display:inline-grid; place-items:center; font-style:normal; font-size:16px; }
.pay-ico svg { width:100% !important; height:100% !important; display:block; }
.pay { display:flex; align-items:center; justify-content:center; gap:7px; padding:14px 8px; border-radius:14px;
  font-weight:600; font-size:14px; transition:box-shadow .25s,transform .12s; }
.pay i { font-style:normal; font-size:16px; }
.pay .i-ton{color:var(--accent)} .pay .i-usdt{color:#26a17b} .pay .i-star{color:#f5c542}
.pay.is-active { box-shadow:inset 0 0 0 1.5px var(--accent),0 6px 18px color-mix(in srgb,var(--accent) 30%,transparent); }
.pay:active { transform:scale(.97); }

.promo { display:flex; align-items:center; border-radius:14px; padding:3px 5px 3px 16px; margin-bottom:14px; }
.promo input { flex:1; background:none; border:none; outline:none; color:var(--ink); font-size:12.5px; letter-spacing:.06em; padding:13px 0; }
.promo input::placeholder { color:var(--ink-dim); }
.promo-apply { color:var(--accent); font-weight:600; padding:11px 14px; font-size:14px; }

.price-line { display:flex; justify-content:space-between; align-items:center; padding:17px 18px; border-radius:15px; margin-bottom:14px; }
.price-line span { color:var(--ink-soft); font-size:14px; }
.price-line b { font-family:"Chakra Petch",sans-serif; font-size:23px; }

.btn-buy { width:100%; padding:17px; border-radius:16px; font-weight:700; font-size:16px; transition:transform .12s ease;
  display:flex; align-items:center; justify-content:center; }
.btn-buy:active { transform:scale(.98); }
.btn-badge { width:24px; height:24px; display:inline-block; margin-right:8px; }
/* Telegram plane icon on the "Войти через Telegram" button */
.tg-ico { width:20px; height:20px; flex:none; display:inline-grid; place-items:center; margin-right:9px; color:#fff; }
.tg-ico svg { width:100%; height:100%; display:block; }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-group { display:none; animation:fade-up .4s cubic-bezier(.22,1,.36,1) both; }
.svc-group.is-active { display:block; }
.svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stars-grid { grid-template-columns:1fr 1fr 1fr; }
.product { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 12px;
  border-radius:18px; transition:transform .12s,box-shadow .25s; text-align:center; overflow:hidden;
  /* near-opaque frosted surface so the matrix canvas doesn't show through */
  background-color:color-mix(in srgb,#101826 82%,transparent);
  backdrop-filter:blur(26px) saturate(170%); -webkit-backdrop-filter:blur(26px) saturate(170%); }
.product:active { transform:scale(.96); }
.product.is-best { box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 60%,transparent),0 8px 24px color-mix(in srgb,var(--accent) 22%,transparent); }

/* when the typed recipient isn't a real Telegram user — block buying visually */
.recipient-bad .svc-grid,
.recipient-bad .svc-buy .sb-go { opacity:.4; filter:grayscale(.4); pointer-events:none; }

/* crisp services (apps grid) icon in the dock "Сервисы" button */
.svc-apps { width:19px; height:19px; display:inline-grid; place-items:center; color:currentColor; }
.svc-apps svg { width:100%; height:100%; display:block; }
/* animated guest avatar (assets/user.json) centred in the circle */
.ava-lottie { width:100%; height:100%; display:grid; place-items:center; }
.ava-lottie svg { width:100% !important; height:100% !important; display:block; }
.dock-profile .ava-lottie svg, .nav-profile .ava-lottie svg { transform:scale(1.05); }
.p-badge { position:absolute; top:9px; right:9px; font-size:9px; font-weight:700; letter-spacing:.08em; padding:3px 7px;
  border-radius:100px; background:var(--accent); color:#fff; font-family:"JetBrains Mono",monospace; }
.p-ico { font-size:26px; color:var(--accent); margin-bottom:2px; }
.p-ico.star { color:#f5c542; }
.p-name { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:19px; }
.p-meta { color:var(--ink-soft); font-size:12px; }
.p-price { margin-top:8px; font-weight:700; font-size:15px; color:var(--accent-2); font-family:"JetBrains Mono",monospace; }
.stars-grid .p-name { font-size:22px; }
.stars-grid .product { padding:18px 8px; }

.svc-list { display:flex; flex-direction:column; gap:10px; }
.svc-row { display:flex; align-items:center; gap:14px; padding:17px 18px; border-radius:16px; text-align:left; transition:transform .12s; }
.svc-row:active { transform:scale(.985); }
.r-ico { font-size:22px; width:26px; text-align:center; }
.r-lottie { width:30px; height:30px; flex:none; display:inline-grid; place-items:center; margin:-2px 0; }
.r-lottie svg { width:100% !important; height:100% !important; display:block; }
/* animated feature icons in the desktop "Почему Cipher" list */
.rail-ico { width:24px !important; height:24px; flex:none; display:inline-grid; place-items:center; }
.rail-ico svg { width:100% !important; height:100% !important; display:block; }
.svc-row div { flex:1; }
.svc-row b { display:block; font-size:15px; }
.svc-row small { color:var(--ink-soft); font-size:12.5px; }
.r-go { color:var(--ink-dim); font-size:18px; }

/* shared Fragment recipient field */
.svc-recipient { display:flex; align-items:center; gap:6px; border-radius:15px; padding:13px 15px; margin-bottom:14px; }
.svc-recipient .r-at { color:var(--ink-soft); font-size:15px; }
.svc-recipient input { flex:1; min-width:0; background:none; border:none; outline:none; color:var(--ink); font-size:15px; }
.svc-recipient input::placeholder { color:var(--placeholder-color); }
.svc-rcheck { flex:none; font-size:12px; color:var(--ink-soft); max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.svc-rcheck.ok { color:var(--ok); }
.svc-rcheck.err { color:#ff7a7a; }
.svc-rcheck img { width:18px; height:18px; border-radius:50%; vertical-align:middle; margin-right:5px; object-fit:cover; }

/* Ads / TON custom-amount purchase blocks */
.svc-buy { border-radius:16px; padding:15px 16px; display:flex; flex-direction:column; gap:11px; }
.svc-buy .sb-head { display:flex; align-items:center; gap:14px; }
.svc-buy .sb-head div { flex:1; }
.svc-buy .sb-head b { display:block; font-size:15px; }
.svc-buy .sb-head small { color:var(--ink-soft); font-size:12.5px; }
.svc-buy .sb-row { display:flex; gap:10px; align-items:stretch; }
.svc-buy .sb-amt { flex:1; min-width:0; background:color-mix(in srgb,var(--c-glass) 8%,transparent);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--ink); font-size:15px; outline:none; }
.svc-buy .sb-amt::placeholder { color:var(--placeholder-color); }
.svc-buy .sb-amt:focus { border-color:color-mix(in srgb,var(--accent) 55%,transparent); }
.svc-buy .sb-go { flex:none; padding:12px 22px; border-radius:12px; font-weight:700; font-size:14px; transition:transform .12s; }
.svc-buy .sb-go:active { transform:scale(.96); }
.svc-buy .sb-price { font-size:13px; color:var(--accent-2); min-height:16px; }

/* real loading state — spinner overlay on the buying element + inline lookup spinner */
@keyframes spin { to { transform:rotate(360deg); } }
.mini-spin { display:inline-block; width:14px; height:14px; vertical-align:middle;
  border:2px solid color-mix(in srgb,var(--ink) 28%,transparent); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite; }
.sb-go { position:relative; }
.is-loading { pointer-events:none; }
.is-loading > * { opacity:.32; }
.is-loading::after { content:""; position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px;
  border:2px solid rgba(255,255,255,.32); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }

/* ============================================================
   PROFILE
   ============================================================ */
.profile { border-radius:24px; padding:22px; }
.pf-head { display:flex; align-items:center; gap:15px; margin-bottom:18px; }
.pf-avatar { width:62px; height:62px; border-radius:50%; flex:none; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(160deg,#11161f,#06080d);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent),0 6px 18px rgba(0,0,0,.4); }
.pf-avatar img { width:100%; height:100%; object-fit:cover; }
.pf-avatar span { color:var(--accent); font-size:26px; }
.pf-name { font-family:"Chakra Petch",sans-serif; font-size:20px; font-weight:700; }
.pf-username { color:var(--ink-soft); font-size:13px; margin-top:3px; }
.pf-auth { margin-bottom:18px; }
.pf-note { color:var(--ink-soft); font-size:13.5px; line-height:1.5; margin-bottom:12px; text-align:center; }
.pf-auth.is-authed { display:none; }
.pf-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px; }
.pf-stat { border-radius:15px; padding:15px 8px; text-align:center; }
.pf-stat b { display:block; font-family:"Chakra Petch",sans-serif; font-size:18px; }
.pf-stat small { color:var(--ink-soft); font-size:11px; }
.pf-menu { display:flex; flex-direction:column; gap:10px; }

/* ============================================================
   DOCK (mobile) — stronger glass + sliding pill
   ============================================================ */
/* single full-width dock bar (like reference): items + divider + profile, flush at bottom */
/* anchored by TOP edge to Telegram's real visible height (--tg-vh, set in app.js)
   — pinning to `bottom` left dead air below the dock inside the TG WebView */
/* two separate equal-height pills (nav slider + profile), anchored by TOP edge to
   Telegram's real visible height (--tg-vh in app.js) — pinning to `bottom` left dead air */
/* dock sits in the normal content flow, right under the panel (per request) */
/* dock lives at the very bottom of the column — margin-top:auto eats any leftover
   space so there's never an empty gap below it on short screens (verify panel etc.) */
.dockwrap { position:static; z-index:30;
  margin:20px auto calc(8px + var(--safe-bottom)); padding:0 2px;
  animation:dock-in .5s ease .2s both;
  display:flex; gap:10px; align-items:center; justify-content:center; }
/* mobile: make the app a flex column so the dock can be pushed to the bottom */
@media (max-width:859px) {
  .app { display:flex; flex-direction:column; }
  .dockwrap { margin-top:auto; }
}
@keyframes dock-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.dock { position:relative; display:flex; flex-wrap:nowrap; align-items:center; gap:2px;
  flex:1 1 auto; max-width:470px;
  padding:8px; border-radius:30px; pointer-events:auto;
  background-color:color-mix(in srgb,var(--c-glass) 16%,transparent);
  backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); }
.dock .pill-bg { border-radius:22px; }
.dock-item { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 6px; border-radius:22px; color:var(--ink-soft); font-size:11px; font-weight:600; transition:color .3s; }
.dock-item b { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.dock-item .d-ico { font-size:18px; line-height:1; }
.dock-item .d-badge { width:20px; height:20px; }
.dock-item.is-active { color:#fff; }
.dock-sep { flex:none; width:1px; align-self:stretch; margin:5px 4px; background:var(--line); }
.d-ava { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  color:var(--accent); font-size:15px; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 50%,transparent); }
.d-ava img { width:100%; height:100%; object-fit:cover; }
.dock-item.is-active .d-ava { box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); color:#fff; }
.avatar-fallback { color:var(--accent); font-size:20px; }

/* toast */
.toast { position:fixed; left:50%; bottom:auto;
  top:calc(var(--tg-vh, 100dvh) - var(--dock-h, 96px) - 86px - var(--safe-bottom)); transform:translate(-50%,20px); z-index:50;
  padding:13px 20px; border-radius:16px; font-weight:600; font-size:14px; opacity:0; pointer-events:none;
  transition:opacity .3s,transform .3s; max-width:90vw; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@keyframes fade-up { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:359px) { .seg-btn { font-size:12.5px; } .pay { font-size:13px; padding:12px 6px; } .stars-grid { gap:8px; } }

/* ── DESKTOP / WEB ── */
@media (min-width:860px) {
  .app { max-width:1120px; padding:26px 28px 48px; }
  .show-mobile { display:none; } .hide-mobile { display:inline-flex; }
  .hero-nav { display:inline-flex; margin:0 auto; }
  .wallet-btn { margin-left:0; }
  .topbar { gap:16px; }

  .hero { display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:center; padding:30px 0 36px; }
  .hero-text { text-align:left; }
  .hero-title { font-size:clamp(40px,4.4vw,60px); }
  .hero-sub { margin:18px 0 0; max-width:520px; font-size:16px; }
  /* eyebrow / hero CTA buttons / trust stats stay hidden on desktop too (per request) */
  .hero-promo { display:block; }

  .layout { grid-template-columns:1fr 320px; gap:24px; align-items:start; }
  .rail { display:flex; flex-direction:column; gap:16px; position:sticky; top:24px; }
  .rail-card { border-radius:20px; padding:20px; }
  .rail-card h4 { font-size:16px; margin-bottom:12px; }
  .rail-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
  .rail-list li { display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:14px; }
  .rail-list li > span:first-child { color:var(--accent); width:22px; flex:none; text-align:center; }
  .rail-list li > span:last-child { flex:1; }
  .rail-support p { color:var(--ink-soft); font-size:14px; margin-bottom:14px; line-height:1.5; }
  .rail-support .btn-ghost { width:100%; justify-content:center; }

  .panels { max-width:680px; }
  .verify,.profile { padding:26px; }
  .svc-grid { gap:14px; }

  .dockwrap { display:none; }
}
@media (min-width:1024px) {
  .stars-grid { grid-template-columns:repeat(3,1fr); }
}
@media (prefers-reduced-motion:reduce) { *,.pill-bg { animation-duration:.001s !important; transition-duration:.001s !important; } }

/* ============================================================
   THEME TRANSITION + LIGHT THEME
   ============================================================ */
body { transition:background-color .45s ease, color .45s ease; }
.glass, .glass-soft, .field, .price-line, .seg, .product, .svc-row, .pf-stat, .rail-card, .dock, .dock-profile, .wallet-btn, .hero-nav {
  transition:background-color .45s ease, box-shadow .45s ease, color .3s ease; }

body[data-theme="light"] {
  --ink:#0d1626; --ink-soft:#56627a; --ink-dim:#98a2b6;
  --line:rgba(10,20,40,.10); --placeholder-color:#7b8599;
  --c-glass:#7e8ba6; --c-light:#ffffff; --c-dark:#0a1426;
  --glass-reflex-light:.65; --glass-reflex-dark:.6; --saturation:140%;
  color-scheme:light;
  background:radial-gradient(140% 100% at 50% -10%,#ffffff 0%,#e7ecf3 55%,#d6dde8 100%);
}
body[data-theme="light"] .vignette { display:none; }
body[data-theme="light"] .sphere-canvas { opacity:.18; }
body[data-theme="light"] .hero-title em,
body[data-theme="light"] .brand-name { color:var(--accent-deep); }
body[data-theme="light"] .hero-title { background:linear-gradient(180deg,#0d1626,#1d3a63); -webkit-background-clip:text; background-clip:text; color:transparent; }
body[data-theme="light"] .seg { background:rgba(10,20,40,.05); }
body[data-theme="light"] .tiers, body[data-theme="light"] .mini-seg { background:rgba(10,20,40,.05); }

/* service cards were hard-coded dark — give them a light frosted surface in light theme */
body[data-theme="light"] .product {
  background-color:color-mix(in srgb,#ffffff 78%,transparent); }
body[data-theme="light"] .product .p-meta { color:var(--ink-soft); }
body[data-theme="light"] .star-card {
  background:linear-gradient(170deg,color-mix(in srgb,#ffe9a8 70%,#ffffff 30%),color-mix(in srgb,#ffffff 92%,transparent)); }
body[data-theme="light"] .star-card .star-ico { color:#f5a623;
  text-shadow:0 0 8px rgba(245,166,35,.35); }
body[data-theme="light"] .star-card .p-name {
  background:linear-gradient(180deg,#9a6a00,#d98f00); -webkit-background-clip:text; background-clip:text; color:transparent; }
body[data-theme="light"] .star-card .p-meta { color:#b07d1a; }
body[data-theme="light"] .star-card.is-best { box-shadow:inset 0 0 0 1.5px rgba(245,166,35,.6),0 8px 24px rgba(245,166,35,.2); }
/* history rows + wallet sheet readable on light */
body[data-theme="light"] .pfh-amt { background:color-mix(in srgb,#13a589 16%,transparent); color:#0c8a72; }
/* guest avatar (user.json) is white art — flip to dark on the light topbar/dock pills
   (the big profile-card avatar keeps its dark circle, so leave it white) */
body[data-theme="light"] .d-ava .ava-lottie svg { filter:invert(1) brightness(.82); }

/* ============================================================
   MINI SEGMENTS (theme / language)
   ============================================================ */
.mini-seg { position:relative; display:inline-flex; gap:2px; padding:3px; border-radius:100px; background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px var(--line); }
.mini-seg button { position:relative; z-index:1; padding:7px 14px; border-radius:100px; font-size:13px; font-weight:600;
  color:var(--ink-soft); transition:color .25s; }
.mini-seg button.is-active { color:#fff; background:none; box-shadow:none; }
.mini-seg .pill-bg { border-radius:100px; }

/* transaction history (profile) — premium rows, smooth expand/collapse */
.pf-history { overflow:hidden; max-height:0; opacity:0; margin-top:0; padding-top:0;
  border-top:1px solid transparent;
  transition:max-height .46s cubic-bezier(.5,.05,.2,1), opacity .34s ease,
             margin-top .46s ease, padding-top .46s ease, border-color .3s ease; }
.pf-history.open { max-height:560px; opacity:1; margin-top:16px; padding-top:16px;
  border-top-color:var(--line); }
/* each row slides in with a gentle stagger when the panel opens */
.pf-history.open .pfh-item { animation:hist-in .44s cubic-bezier(.22,1,.36,1) both; }
@keyframes hist-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.pf-history.open .pfh-item:nth-child(1){animation-delay:.05s}
.pf-history.open .pfh-item:nth-child(2){animation-delay:.10s}
.pf-history.open .pfh-item:nth-child(3){animation-delay:.15s}
.pf-history.open .pfh-item:nth-child(4){animation-delay:.20s}
.pf-history.open .pfh-item:nth-child(5){animation-delay:.25s}
.pf-history.open .pfh-item:nth-child(6){animation-delay:.30s}
.pf-history.open .pfh-item:nth-child(n+7){animation-delay:.34s}
.pfh-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pfh-head b { font-size:15px; font-family:"Chakra Petch",sans-serif; letter-spacing:.01em; }
.pfh-refresh { width:32px; height:32px; border-radius:50%; color:var(--ink-soft); font-size:16px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--c-glass) 12%,transparent);
  box-shadow:inset 0 0 0 1px var(--line); transition:transform .4s cubic-bezier(.5,.05,.2,1),color .25s; }
.pfh-refresh:hover { color:var(--accent); }
.pfh-refresh:active { transform:rotate(180deg) scale(.9); }
.pfh-list { display:flex; flex-direction:column; gap:9px; max-height:320px; overflow-y:auto;
  margin:0 -2px; padding:2px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.pfh-list::-webkit-scrollbar { width:5px; }
.pfh-list::-webkit-scrollbar-thumb { background:var(--line); border-radius:4px; }
.pfh-item { display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:16px;
  transition:transform .14s ease; }
.pfh-item:active { transform:scale(.985); }
.pfh-ico { width:42px; height:42px; flex:none; border-radius:13px; display:grid; place-items:center; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px rgba(0,0,0,.28); }
.pfh-ico svg { width:23px; height:23px; display:block; }
/* per-type gradients */
.pfh-verify  { background:linear-gradient(150deg,#3aa0ff,#1d6fd0); }
.pfh-stars   { background:linear-gradient(150deg,#ffcf45,#f5a623); color:#3a2a00; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(245,166,35,.32); }
.pfh-premium { background:linear-gradient(150deg,#7c5cff,#4b32c7); }
.pfh-ton     { background:linear-gradient(150deg,#3ab6ff,#1f8ad6); }
.pfh-topup   { background:linear-gradient(150deg,#2af0c8,#13a589); color:#06241d; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(42,240,200,.3); }
.pfh-other   { background:linear-gradient(150deg,#5b667d,#3a4456); }
.pfh-main { flex:1; min-width:0; }
.pfh-main b { display:block; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pfh-main small { color:var(--ink-soft); font-size:11.5px; letter-spacing:.01em; }
.pfh-amt { flex:none; font-weight:700; font-size:13px; color:var(--accent-2);
  font-family:"JetBrains Mono",monospace; white-space:nowrap;
  padding:5px 10px; border-radius:9px; background:color-mix(in srgb,var(--accent-2) 14%,transparent); }
.pfh-empty { text-align:center; color:var(--ink-dim); font-size:13px; padding:22px 0; }

.pf-settings { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:14px; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.set-row > span { color:var(--ink-soft); font-size:14px; font-weight:600; }

/* ============================================================
   FOOTER (desktop)
   ============================================================ */
.footer { display:none; }
@media (min-width:860px) {
  .footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
    margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
  .foot-ctrls { display:flex; gap:12px; }
  .foot-copy { color:var(--ink-dim); font-size:13px; }
  /* avoid duplication on desktop: theme/lang are in the footer, support is in the rail */
  .pf-settings { display:none; }
  #pfSupport { display:none; }
}

/* ============================================================
   PROFILE CIRCLE (separate from Verify/Services nav)
   ============================================================ */
/* desktop topbar profile button */
.nav-profile { display:none; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  border-radius:50%; padding:0; transition:box-shadow .3s,transform .12s; }
.nav-profile:active { transform:scale(.94); }
.nav-profile .d-ava { width:30px; height:30px; font-size:18px; }
.nav-profile.is-active { box-shadow:inset 0 0 0 2px var(--accent),0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent); }
@media (min-width:860px) { .nav-profile.hide-mobile { display:inline-flex; } }

/* profile — separate circular pill, sized to match the nav pill height (--pill-h from app.js) */
.dock-profile { flex:none; width:var(--pill-h,64px); height:var(--pill-h,64px); border-radius:50%; padding:0; pointer-events:auto;
  display:flex; align-items:center; justify-content:center; transition:box-shadow .3s,transform .12s;
  background-color:color-mix(in srgb,var(--c-glass) 16%,transparent);
  backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); }
.dock-profile:active { transform:scale(.92); }
.dock-profile .d-ava { width:62%; height:62%; font-size:20px; }
.dock-profile.is-active { box-shadow:inset 0 0 0 2px var(--accent),0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent); }
.dock-profile.is-active .d-ava { box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); color:#fff; }

/* verify auto-detect hint */
.verify-auto { color:var(--ink-dim); font-size:11px; letter-spacing:.02em; margin:-4px 0 14px; padding-left:2px; }
.verify-auto.detected { color:var(--accent-2); }

/* ============================================================
   PREMIUM animated icon
   ============================================================ */
.product.prem .p-anim { width:54px; height:54px; display:grid; place-items:center; margin-bottom:2px;
  font-size:26px; line-height:1; }
.product.prem .p-anim svg { width:100% !important; height:100% !important; display:block;
  filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--accent) 45%,transparent)); }
.product.prem .p-anim.has-anim { font-size:0; }

/* ============================================================
   STARS — refreshed cards
   ============================================================ */
.star-card { background:linear-gradient(170deg,color-mix(in srgb,#5a4a14 60%,#101826 40%),color-mix(in srgb,#101826 90%,transparent)); }
.star-card .star-ico { font-size:30px; line-height:1; color:#ffd24a;
  text-shadow:0 0 10px rgba(245,197,66,.6),0 0 26px rgba(245,197,66,.35); margin-bottom:4px; }
.star-card .p-name { font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:22px;
  background:linear-gradient(180deg,#fff,#ffd24a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.star-card .p-meta { color:#e8c98a; letter-spacing:.06em; font-size:11px; text-transform:uppercase; }
.star-card .p-price { color:var(--accent-2); }
.star-card.is-best { box-shadow:inset 0 0 0 1.5px rgba(245,197,66,.55),0 8px 24px rgba(245,197,66,.22); }
.star-card.is-best .p-badge { background:#f5c542; color:#3a2a00; }
/* stars.json animation on star cards */
.star-card .star-ico.p-anim { width:42px; height:42px; display:grid; place-items:center; }
.star-card .star-ico.p-anim svg { width:100% !important; height:100% !important;
  filter:drop-shadow(0 0 10px rgba(245,197,66,.5)); }
.star-card .star-ico.has-anim { font-size:0; text-shadow:none; }