/* ============================================================
   BTB Wallet — Telegram Mini App (оболочка, Фаза 1)
   Светлая холодная тема. Компоненты те же, что в утверждённом мокапе,
   но layout — полноэкранный под Telegram.
   ============================================================ */
:root{
  --bg:#EEF0F8;
  --ink:#0E1220; --ink2:#3A4056; --mut:#727A93; --dim:#9AA1B6;
  --panel:#FFFFFF; --panel2:#F6F7FC; --line:#ECEEF6; --line2:#DBDEEC;
  --indigo:#5B6CFF; --indigo-d:#4453E6; --viol:#8B5CF6;
  --grad:linear-gradient(120deg,#5B6CFF 0%,#7A63FF 55%,#8B5CF6 100%);
  --green:#12B76A; --red:#F04438;
  --c8-or:#DE8A1C; --c8-teal:#0E9BAF; --c8-green:#6E9A2E;
  --c8-grad:linear-gradient(115deg,#DE8A1C 0%,#0E9BAF 55%,#6E9A2E 100%);
  --sh-sm:0 6px 18px -10px rgba(20,26,60,.35);
  --f:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --m:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --navh:66px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(700px 380px at 12% -6%,rgba(91,108,255,.16),transparent 60%),
    radial-gradient(600px 460px at 100% 3%,rgba(139,92,246,.14),transparent 55%),
    var(--bg);
  color:var(--ink); font-family:var(--f); line-height:1.5; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
/* ---- app shell ---- */
#app{max-width:480px; margin:0 auto; min-height:100%; position:relative}
.view{padding:calc(8px + env(safe-area-inset-top)) 16px calc(var(--navh) + 26px + env(safe-area-inset-bottom));}
.view[hidden]{display:none}
[hidden]{display:none!important}   /* чтобы атрибут hidden перебивал display у .sec-t/.card и т.п. */

/* top greeting */
.greet{display:flex; align-items:center; gap:11px; padding:8px 2px 16px}
.ava{width:42px; height:42px; border-radius:14px; background:var(--grad); display:grid; place-items:center; color:#fff; font-weight:800; font-size:16px; flex:0 0 auto}
.greet .g1{font:600 12px var(--f); color:var(--mut)}
.greet .g2{font-size:16px; font-weight:800; letter-spacing:-.2px}
.bell{margin-left:auto; width:40px; height:40px; border-radius:13px; background:var(--panel); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink2); position:relative; cursor:pointer; box-shadow:var(--sh-sm)}
.bell.dot::after{content:""; position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--indigo); border:2px solid #fff}

/* balance */
.balance{background:var(--grad); border-radius:26px; padding:20px 21px; color:#fff; position:relative; overflow:hidden; box-shadow:0 22px 44px -20px rgba(91,108,255,.85)}
.balance::after{content:""; position:absolute; right:-50px; top:-50px; width:200px; height:200px; background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.balance .top{display:flex; justify-content:space-between; align-items:flex-start}
.balance .lab{font:600 13px var(--f); opacity:.9; display:flex; align-items:center; gap:6px}
.pay{width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; border:1px solid rgba(255,255,255,.18)}
.pay small{font:700 8px var(--m); letter-spacing:.5px}
.amt{font-size:38px; font-weight:800; letter-spacing:-1.5px; margin-top:10px; font-variant-numeric:tabular-nums; line-height:1}
.amt .c{font-size:23px; opacity:.85}
.balance .sub{font:600 12.5px var(--m); opacity:.92; margin-top:9px; display:flex; align-items:center; gap:6px}

.actions{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:15px}
.act{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:14px 4px 11px; text-align:center; cursor:pointer; box-shadow:var(--sh-sm); transition:transform .12s}
.act:active{transform:scale(.95)}
.act .ic{width:30px; height:30px; margin:0 auto 8px; color:var(--indigo); display:grid; place-items:center}
.act .ic svg{width:24px; height:24px}
.act small{font-size:12px; font-weight:700; color:var(--ink2)}

.sec-t{display:flex; align-items:center; justify-content:space-between; margin:24px 2px 12px}
.sec-t h3{font-size:16px; font-weight:800; letter-spacing:-.2px}
.sec-t a{font:700 12.5px var(--f); color:var(--indigo); cursor:pointer}

.card{background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:var(--sh-sm)}

/* crypto cards promo w/ visa */
.promo{display:flex; align-items:center; gap:12px; padding:17px}
.promo .tx{flex:1}
.promo .tx b{font-size:15px; display:block}
.promo .tx small{font-size:11.5px; color:var(--mut); display:block; margin:3px 0 8px; line-height:1.35}
.promo .tx a{font:700 12px var(--f); color:var(--indigo); cursor:pointer}
.visa{width:118px; height:74px; border-radius:12px; background:linear-gradient(135deg,#4453E6,#8B5CF6); position:relative; flex:0 0 auto; box-shadow:0 12px 22px -12px rgba(91,108,255,.9); color:#fff; padding:10px 11px}
.visa b{font:800 12px var(--m); letter-spacing:1px}
.visa .chip{position:absolute; left:11px; top:30px; width:20px; height:15px; border-radius:4px; background:linear-gradient(135deg,#ffe08a,#e0a934)}
.visa .num{position:absolute; left:11px; bottom:20px; font:600 9px var(--m); letter-spacing:1px; opacity:.9}
.visa .vs{position:absolute; right:11px; bottom:9px; font:800 13px var(--f); font-style:italic}

/* asset rows */
.row{display:flex; align-items:center; gap:11px; padding:13px 15px; border-bottom:1px solid var(--line); cursor:pointer}
.row:last-child{border-bottom:none}
.row:active{background:var(--panel2)}
.coin{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font:800 12px var(--m); color:#fff; flex:0 0 auto; position:relative; overflow:hidden}
.coin .coin-logo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.row .nm{min-width:0}
.row .nm b{font-size:14px; display:block}
.row .nm small{font-size:11px; color:var(--mut); font-family:var(--m)}
.spark{width:50px; height:26px; margin-left:auto; flex:0 0 auto}
.row .vl{text-align:right; min-width:70px}
.row .vl b{font-size:13.5px; font-variant-numeric:tabular-nums; display:block}
.row .vl small{font-size:11px; font-family:var(--m); color:var(--mut)}
.up{color:var(--green)} .down{color:var(--red)}
.qchg{font-variant-numeric:tabular-nums; font-weight:700} .mutchg{color:var(--mut)}
.chip-chain{font:700 8px var(--m); letter-spacing:.4px; text-transform:uppercase; padding:1px 5px; border-radius:5px;
  background:var(--panel2); border:1px solid var(--line); color:var(--mut); margin-left:2px}
.stk{font:700 9px var(--m); color:var(--indigo-d); background:#EEF0FF; border:1px solid #DADFFF; padding:2px 6px; border-radius:6px; margin-left:3px}

/* NFT */
.nftgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.nft{background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--sh-sm); cursor:pointer}
.nft .img{height:104px; background:var(--grad)}
.nft .img.b{background:linear-gradient(135deg,#0E9BAF,#6E9A2E)}
.nft .img.c{background:linear-gradient(135deg,#DE8A1C,#F04438)}
.nft .img.d{background:linear-gradient(135deg,#8B5CF6,#F04438)}
.nft .meta{padding:10px 12px}
.nft .meta b{font-size:13px; display:block}
.nft .meta small{font-size:10.5px; color:var(--mut); font-family:var(--m)}

/* projects */
.plead{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:17px; box-shadow:var(--sh-sm); text-align:center}
.plead b{font-size:16px}
.plead p{font-size:12.5px; color:var(--ink2); margin-top:5px}
.proj{display:flex; align-items:center; gap:13px; padding:16px; cursor:pointer}
.proj .pl{width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-weight:800; color:#fff; flex:0 0 auto; font-size:16px; overflow:hidden}
.proj .pl img{width:100%; height:100%; object-fit:cover}
.proj .pi{flex:1}
.proj .pi b{font-size:14.5px; display:flex; gap:7px; align-items:center}
.proj .pi small{font-size:11.5px; color:var(--mut); display:block; margin-top:2px}
.tag{font:700 9px var(--m); padding:2px 6px; border-radius:6px; text-transform:uppercase; letter-spacing:.5px}
.tag.live{color:var(--green); background:#E6F9F0; border:1px solid #B6ECD1}
.tag.soon{color:var(--mut); background:var(--panel2); border:1px solid var(--line2)}
.chev{color:var(--dim); font-size:20px}

/* profile */
.prof-top{display:flex; align-items:center; gap:13px; padding:17px}
.menu .row .mic{width:36px;height:36px;border-radius:11px;background:var(--panel2); display:grid; place-items:center; font-size:16px}

/* bottom nav (fixed) */
.nav{position:fixed; bottom:0; left:0; right:0; height:calc(var(--navh) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.92); backdrop-filter:blur(18px); border-top:1px solid var(--line); z-index:30;
  display:grid; grid-template-columns:repeat(5,1fr); max-width:480px; margin:0 auto}
.nav button{background:none; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:11px; color:var(--dim); font:700 10px var(--f)}
.nav button svg{width:22px; height:22px}
.nav button.on{color:var(--indigo)}

/* ===== C8 Club ===== */
#v-c8 .c8top{display:flex; align-items:center; gap:12px; margin-bottom:15px}
.c8logo{height:40px; width:auto; border-radius:9px; flex:0 0 auto; box-shadow:0 4px 12px -6px rgba(20,26,60,.4)}
.c8top .t b{font-size:16px; font-weight:800; display:block; letter-spacing:-.2px}
.c8tag{font:600 11px var(--m)} .c8tag em{color:var(--c8-or); font-style:normal; font-weight:700} .c8tag span{color:var(--mut)}
.c8top .pf{margin-left:auto; width:42px; height:42px; border-radius:14px; background:var(--panel); border:1px solid var(--line); display:grid; place-items:center; position:relative; box-shadow:var(--sh-sm); color:var(--ink2)}
.c8top .pf::after{content:""; position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--c8-or); border:2px solid #fff}

.c8hero{position:relative; border-radius:24px; overflow:hidden; padding:22px 22px 24px; color:#fff; min-height:150px;
  background:linear-gradient(112deg,#E0921F 0%,#C98A2C 26%,#0E9BAF 60%,#5FA02B 100%);
  box-shadow:0 26px 50px -20px rgba(14,155,175,.8), inset 0 1px 0 rgba(255,255,255,.3)}
.c8hero .net{position:absolute; inset:0; width:100%; height:100%}
.c8hero .gloss{position:absolute; inset:0; background:linear-gradient(178deg,rgba(255,255,255,.28),rgba(255,255,255,0) 42%),radial-gradient(120% 80% at 90% 110%,rgba(0,0,0,.18),transparent 60%)}
.c8hero h2{position:relative; font-size:40px; font-weight:800; letter-spacing:-1.5px; text-shadow:0 3px 14px rgba(90,50,0,.28)}
.c8hero p{position:relative; font-size:12.5px; opacity:.96; margin-top:5px; max-width:56%; line-height:1.4; text-shadow:0 1px 6px rgba(0,0,0,.15)}
.c8hero .coinwrap{position:absolute; right:8px; bottom:2px; width:132px; height:132px}

.c8stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px}
.c8stat{background:linear-gradient(180deg,#FFFFFF,#F8FAFD); border:1px solid var(--line); border-radius:18px; padding:14px 13px 13px; position:relative; overflow:hidden; box-shadow:0 12px 26px -16px rgba(20,26,60,.4), inset 0 1px 0 #fff}
.c8stat small{font:600 10.5px var(--f); color:var(--mut); display:block}
.c8stat b{font-size:21px; display:block; margin-top:6px; font-variant-numeric:tabular-nums; letter-spacing:-.6px; -webkit-background-clip:text; background-clip:text; color:transparent}
.c8stat b i{font-size:12px; font-style:normal}
.c8stat span{font:600 10px var(--m); color:var(--mut)}
.c8stat.oc b{background-image:linear-gradient(120deg,#F0A62A,#C9791A)}
.c8stat.tc b{background-image:linear-gradient(120deg,#12B0C6,#0B7D8D)}
.c8stat.gc b{background-image:linear-gradient(120deg,#82B23A,#587A24)}
.c8stat .si{position:absolute; right:11px; top:12px; width:26px; height:26px; border-radius:9px; display:grid; place-items:center}
.c8stat .si svg{width:15px; height:15px}

.stakebox{background:linear-gradient(180deg,#FFFFFF,#FAFBFE); border:1px solid var(--line); border-radius:24px; padding:19px; margin-top:14px; position:relative; overflow:hidden; box-shadow:0 16px 34px -20px rgba(20,26,60,.42), inset 0 1px 0 #fff}
.stakebox h4{font-size:20px; font-weight:800; letter-spacing:-.4px}
.stakebox .hint{font-size:11.5px; color:var(--mut); margin-top:3px; max-width:64%}
.stakebox .coins{position:absolute; right:14px; top:10px; width:78px; height:64px}
.flab{font:600 11px var(--f); color:var(--ink2); margin:15px 0 6px}
.field{background:var(--panel2); border:1px solid var(--line2); border-radius:14px; padding:13px 14px; display:flex; align-items:center; justify-content:space-between; transition:.15s}
.field:focus-within{border-color:#9FDCE4; box-shadow:0 0 0 3px rgba(14,155,175,.1)}
.field input{border:none; background:none; outline:none; font:800 21px var(--f); color:var(--ink); width:60%; font-variant-numeric:tabular-nums}
.field .u{font:700 12px var(--m); color:var(--mut)}
.field .rt{display:flex; align-items:center; gap:9px}
.field .max{font:700 10px var(--m); color:var(--c8-teal); cursor:pointer; border:1px solid #A9DEE6; background:linear-gradient(180deg,#EDF9FB,#E0F3F6); padding:4px 8px; border-radius:7px}
.stakebtn{width:100%; margin-top:16px; color:#fff; border:none; border-radius:15px; padding:15px; font:800 14.5px var(--f); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#13AEC2,#0B8395); box-shadow:0 16px 28px -12px rgba(14,155,175,.85), inset 0 1px 0 rgba(255,255,255,.35)}
.stakebtn:active{transform:scale(.98)}
.stakebtn::after{content:""; position:absolute; inset:0 0 55% 0; background:linear-gradient(180deg,rgba(255,255,255,.28),transparent)}
.stakebtn svg{width:17px; height:17px; position:relative}
.stakebtn span{position:relative}
.claimrow{display:flex; align-items:center; gap:13px; margin-top:12px; padding:14px; border-radius:18px; cursor:pointer;
  background:linear-gradient(120deg,#FFF6E7,#FDF1E9); border:1px solid #F3DCB4; box-shadow:0 10px 24px -16px rgba(222,138,28,.6), inset 0 1px 0 #fff}
.claimrow .gi{width:40px; height:40px; border-radius:13px; display:grid; place-items:center; color:#fff; flex:0 0 auto; background:linear-gradient(150deg,#F0A62A,#DE8A1C); box-shadow:0 8px 16px -8px rgba(222,138,28,.9), inset 0 1px 0 rgba(255,255,255,.4)}
.claimrow .gi svg{width:20px; height:20px}
.claimrow .ct b{font-size:14px; display:block} .claimrow .ct small{font-size:11px; color:#96692a}
.claimrow .amt2{margin-left:auto; font:800 16px var(--m); color:var(--c8-or); display:flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums}

.note{font-size:11px; color:var(--mut); text-align:center; margin-top:16px; font-family:var(--m)}

/* toast */
#toast{position:fixed; left:50%; bottom:calc(var(--navh) + 20px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; font:600 13px var(--f); padding:11px 18px; border-radius:12px; box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:.25s; z-index:60; max-width:82%; text-align:center}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---- C8 hero: staked + live mining ---- */
.c8hero-info{position:relative; max-width:60%}
.c8hero-info .hl,.c8hero-info .hl2{font:600 10.5px var(--f); opacity:.92; text-transform:uppercase; letter-spacing:.6px}
.c8hero-info .hstaked{font-size:30px; font-weight:800; letter-spacing:-1px; margin-top:2px; text-shadow:0 2px 12px rgba(90,50,0,.3); font-variant-numeric:tabular-nums}
.c8hero-info .hl2{margin-top:14px; display:flex; align-items:center; gap:7px}
.c8hero-info .hl2::before{content:""; width:7px; height:7px; border-radius:50%; background:#C9FFE6; box-shadow:0 0 8px #C9FFE6; animation:cmPulse 1.2s infinite}
.c8hero-info .hmine{font:800 17px var(--m); color:#EAFBF0; font-variant-numeric:tabular-nums; text-shadow:0 1px 6px rgba(0,0,0,.2); margin-top:2px}

/* ---- C8 profile (status) ---- */
.profhero{display:flex; align-items:center; gap:13px; margin-bottom:14px}
.ph-ava{width:56px; height:56px; border-radius:17px; background:var(--c8-grad); display:grid; place-items:center; color:#fff; font-weight:800; font-size:22px; flex:0 0 auto; box-shadow:0 10px 22px -12px rgba(14,155,175,.7)}
.ph-id b{font-size:15px; display:block; font-family:var(--m)}
.ph-id small{font-size:12px; color:var(--mut)}
.rankcard{background:linear-gradient(180deg,#FFFFFF,#FAFBFE); border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:0 16px 34px -20px rgba(20,26,60,.42), inset 0 1px 0 #fff}
.rk-top{display:flex; align-items:center; gap:12px}
.rk-badge{width:48px; height:48px; border-radius:14px; background:linear-gradient(150deg,#FBEFD9,#F3DCB4); display:grid; place-items:center; font-size:22px; flex:0 0 auto; overflow:hidden}
.rk-badge:has(img){background:none}
.rk-badge img{width:100%; height:100%; object-fit:contain}
.rk-lab{font:600 10.5px var(--f); color:var(--mut); text-transform:uppercase; letter-spacing:.5px}
.rk-name{font-size:20px; font-weight:800; letter-spacing:-.4px; color:var(--c8-or)}
.rk-bonus{margin-left:auto; font:800 15px var(--m); color:#fff; background:var(--c8-green); padding:5px 11px; border-radius:10px}
.rk-bar{height:9px; border-radius:6px; background:var(--panel2); border:1px solid var(--line2); margin:15px 0 8px; overflow:hidden}
.rk-fill{height:100%; background:var(--c8-grad); border-radius:6px}
.rk-next{font-size:12px; color:var(--ink2)}
.ladder-row{display:flex; align-items:center; gap:11px; padding:12px 15px; border-bottom:1px solid var(--line)}
.ladder-row:last-child{border-bottom:none}
.ladder-row .lb{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:14px; flex:0 0 auto; background:var(--panel2); overflow:hidden}
.ladder-row .lb:has(img){background:none}
.ladder-row .lb img{width:100%; height:100%; object-fit:contain}
.ladder-row.done .lb{background:var(--c8-green); color:#fff}
.ladder-row.cur{background:#FFF8EE}
.ladder-row .ln{flex:1; font-size:13.5px; font-weight:700}
.ladder-row .ln small{display:block; font:500 11px var(--m); color:var(--mut)}
.ladder-row .lp{font:700 12px var(--m); color:var(--c8-teal)}

/* ---- C8 referrals ---- */
.reflink{background:linear-gradient(120deg,#EEF0FF,#F3ECFF); border:1px solid #DADFFF; border-radius:20px; padding:16px; box-shadow:var(--sh-sm)}
.rl-lab{font:600 11px var(--f); color:var(--indigo-d); text-transform:uppercase; letter-spacing:.5px}
.rl-row{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line2); border-radius:12px; padding:11px 13px; margin:9px 0 11px}
.rl-row span{flex:1; font-family:var(--m); font-size:11.5px; color:var(--ink2); word-break:break-all}
.rl-row span.muted{font-family:var(--f); font-style:italic; color:var(--ink3,#9aa0b4); word-break:normal}

/* канал проекта (Telegram) */
.tgchannel{display:flex; align-items:center; gap:13px; margin-top:14px; padding:15px 16px; border-radius:18px;
  background:linear-gradient(120deg,#2AABEE,#229ED9); color:#fff; cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(34,158,217,.8)}
.tgchannel:active{transform:scale(.99)}
.tgchannel .tgc-ic{width:46px; height:46px; border-radius:14px; background:rgba(255,255,255,.22);
  display:grid; place-items:center; flex:0 0 auto}
.tgchannel .tgc-ic svg{width:26px; height:26px}
.tgchannel .tgc-t{flex:1}
.tgchannel .tgc-t b{font:800 15.5px var(--f)}
.tgchannel .tgc-t small{display:block; font:600 12px var(--f); opacity:.9; margin-top:1px}
.tgchannel .tgc-arrow{font-size:24px; font-weight:700; opacity:.95}

/* мини-иконка TG-канала BTB (главная) */
.tgmini-wrap{display:flex; justify-content:center; padding:20px 0 8px}
.tgmini{width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#2AABEE,#229ED9);
  display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 20px -8px rgba(34,158,217,.85)}
.tgmini svg{width:24px; height:24px; fill:#fff}
.tgmini:active{transform:scale(.93)}

/* NFT: качается ТОЛЬКО карта (вырезанная) над статичной «сценой».
   Движение из JS (requestAnimationFrame) — работает и при «Уменьшении движения». */
.nftsway{ position:relative; perspective:820px; border-radius:16px; overflow:hidden; aspect-ratio:1/1;
  background:
    radial-gradient(120% 85% at 50% 12%, rgba(46,124,255,.22), transparent 62%),
    radial-gradient(120% 90% at 50% 115%, rgba(120,92,255,.12), transparent 60%),
    linear-gradient(180deg,#0a1024 0%, #070912 70%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.45); }
.nftsway-img{ position:absolute; left:50%; top:50%; width:94%;
  transform:translate(-50%,-50%); transform-origin:center center;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.55)); will-change:transform; }

/* NFT-карточка с 3D-спином (front + фирменная рубашка) */
.nftx{display:flex; flex-direction:column}
.nftx-3d{perspective:1000px}
.nftx-inner{position:relative; width:100%; padding-top:100%; transform-style:preserve-3d; animation:nftspin 9s linear infinite; will-change:transform}
.nftx-face{position:absolute; inset:0; border-radius:16px; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; box-shadow:0 12px 26px -12px rgba(10,14,30,.6)}
.nftx-front{background-size:cover; background-position:center}
.nftx-back{transform:rotateY(180deg); background:linear-gradient(150deg,#0a1024,#151b36); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid rgba(255,255,255,.08)}
.nftx-back-logo{font:900 34px var(--m); letter-spacing:1px; background:linear-gradient(120deg,#ffd77a,#5b8cff); -webkit-background-clip:text; background-clip:text; color:transparent}
.nftx-back-name{font:800 14px var(--f); color:#e3e7f6}
.nftx-back-sub{font:600 10px var(--f); color:#8b90a3}
/* живой видео-рендер карты */
.nftv{position:relative; width:100%; padding-top:100%; border-radius:16px; overflow:hidden; box-shadow:0 12px 26px -12px rgba(10,14,30,.6); background:#0a1024}
.nftv-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.nftx .meta{padding:9px 2px 0}
.nftx .meta b{font:800 13px var(--f); display:block}
.nftx .meta small{font:600 11px var(--f); color:var(--mut)}
@keyframes nftspin{from{transform:rotateY(0)} to{transform:rotateY(360deg)}}
/* разводим фазы, чтобы карты не крутились синхронно */
.nftgrid .nftx:nth-child(2) .nftx-inner{animation-delay:-2.2s}
.nftgrid .nftx:nth-child(3) .nftx-inner{animation-delay:-4.5s}
.nftgrid .nftx:nth-child(4) .nftx-inner{animation-delay:-6.7s}

/* лента начислений */
.c8notif .nrow{display:flex; gap:11px; padding:12px 14px; border-bottom:1px solid var(--line); align-items:center}
.c8notif .nrow:last-child{border-bottom:none}
.c8notif .ni{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:16px; flex:0 0 auto; background:var(--panel2)}
.c8notif .nt{flex:1; font-size:12.5px; line-height:1.35}
.c8notif .nt small{display:block; color:var(--mut); font-size:10.5px; margin-top:2px}

/* вывод из стейка */
.unstakebtn{width:100%; margin-top:12px; padding:13px; border-radius:14px; border:1.5px solid var(--c8-teal,#12b3a6);
  background:transparent; color:var(--c8-teal,#12b3a6); font:800 14px var(--f); cursor:pointer}
.unstakebtn:active{transform:scale(.99)}
.unstakebtn.go{background:var(--c8-teal,#12b3a6); color:#fff; border:none; margin-top:10px}
.unstake-note{text-align:center; font:600 11.5px var(--f); color:var(--mut); margin-top:7px}
.unstake-note b{color:var(--ink,#222)}
.unstake-panel{margin-top:10px}
.withdrawbtn{width:100%; margin-top:10px; padding:13px; border-radius:14px; border:none;
  background:linear-gradient(120deg,#F5A623,#F7931A); color:#fff; font:800 14px var(--f); cursor:pointer;
  box-shadow:0 12px 26px -12px rgba(247,147,26,.7)}
.ubrow{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line)}
.ubrow:last-child{border-bottom:none}
.ubrow .ub-a{font:800 13.5px var(--m)}
.ubrow .ub-s{font:600 12px var(--f); color:var(--mut)}
.ubrow .ub-ok{color:#1a9e5f; font-weight:700}
.rl-row button{flex:0 0 auto; width:32px; height:32px; border-radius:9px; border:1px solid var(--line2); background:var(--panel2); cursor:pointer; color:var(--indigo-d)}
.rl-share{width:100%; background:var(--grad); color:#fff; border:none; border-radius:13px; padding:13px; font:800 13.5px var(--f); cursor:pointer; box-shadow:0 12px 24px -12px rgba(91,108,255,.8)}
.reflvl{display:flex; align-items:center; gap:12px; padding:12px 15px; border-bottom:1px solid var(--line)}
.reflvl:last-child{border-bottom:none}
.reflvl .rn{width:28px; height:28px; border-radius:8px; background:var(--panel2); display:grid; place-items:center; font:800 12px var(--m); color:var(--indigo-d); flex:0 0 auto}
.reflvl .rt{flex:1; font-size:13px; font-weight:600}
.reflvl .rc{font:700 13px var(--m); font-variant-numeric:tabular-nums}
.reflvl .rp{font:700 11px var(--m); color:var(--mut); margin-left:8px}
.refitem{display:flex; align-items:center; gap:11px; padding:12px 15px; border-bottom:1px solid var(--line)}
.refitem:last-child{border-bottom:none}
.refitem .ri-a{width:34px; height:34px; border-radius:10px; background:var(--c8-grad); display:grid; place-items:center; color:#fff; font-size:14px; flex:0 0 auto}
.refitem .ri-n{flex:1}
.refitem .ri-n b{font-size:12.5px; font-family:var(--m); display:block}
.refitem .ri-n small{font-size:11px; color:var(--mut)}
.refitem .ri-s{text-align:right; font:700 12.5px var(--m); font-variant-numeric:tabular-nums}
.refitem .ri-s small{display:block; font-weight:500; color:var(--mut)}

/* ---- connect modal ---- */
#connectModal{position:fixed; inset:0; z-index:70; display:none}
#connectModal.show{display:block}
.cm-backdrop{position:absolute; inset:0; background:rgba(14,18,32,.5); backdrop-filter:blur(3px)}
.cm-sheet{position:absolute; left:0; right:0; bottom:0; max-width:480px; margin:0 auto;
  background:var(--panel); border-radius:26px 26px 0 0; padding:24px 20px calc(28px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 50px -20px rgba(20,26,60,.5); animation:cmUp .28s ease}
@keyframes cmUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cm-x{position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:10px; border:none; background:var(--panel2); color:var(--ink2); font-size:14px; cursor:pointer}
.cm-h{font-size:19px; font-weight:800; letter-spacing:-.3px; display:flex; align-items:center; gap:8px}
.cm-plug{font-size:20px}
.cm-desc{font-size:13px; color:var(--mut); margin:8px 0 16px; line-height:1.45}
.cm-open{display:block; text-align:center; background:var(--grad); color:#fff; text-decoration:none; font-weight:800; font-size:14.5px; padding:15px; border-radius:15px; box-shadow:0 14px 26px -12px rgba(91,108,255,.8)}
.cm-or{text-align:center; font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; margin:16px 0 10px; position:relative}
.cm-code{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--panel2); border:1px solid var(--line2); border-radius:13px; padding:13px 15px}
.cm-code span{font-family:var(--m); font-size:13px; word-break:break-all}
.cm-code button{flex:0 0 auto; width:34px; height:34px; border-radius:9px; border:1px solid var(--line2); background:#fff; cursor:pointer; font-size:15px; color:var(--indigo-d)}
.cm-wait{display:flex; align-items:center; gap:9px; justify-content:center; margin-top:18px; font-size:13px; color:var(--ink2); font-weight:600}
.cm-dot{width:9px; height:9px; border-radius:50%; background:var(--indigo); animation:cmPulse 1s infinite}
@keyframes cmPulse{0%,100%{opacity:.3; transform:scale(.8)}50%{opacity:1; transform:scale(1.1)}}
.cm-spin{width:38px; height:38px; margin:8px auto 0; border:3px solid var(--line2); border-top-color:var(--indigo); border-radius:50%; animation:cmSpin .8s linear infinite}
@keyframes cmSpin{to{transform:rotate(360deg)}}
.cm-status{text-align:center; font-size:13px; color:var(--ink2); margin-top:14px; font-weight:600}

@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ============================================================
   ЧЁРНО-ЗОЛОТАЯ ТЕМА BTB (айдентика логотипа).
   Применяется КО ВСЕМУ, КРОМЕ экранов C8 (body.c8mode отключает тему,
   возвращая исходный светлый дизайн C8 — его не трогаем).
   ============================================================ */
body:not(.c8mode){
  --bg:#07080B;
  --ink:#F5F1E7; --ink2:#C9CDDA; --mut:#8B90A0; --dim:#6F7686;
  --panel:#0F131B; --panel2:#141A26; --line:rgba(231,190,90,.16); --line2:rgba(231,190,90,.24);
  --indigo:#E7BE5A; --indigo-d:#F7DE96; --viol:#C79A34;
  --grad:linear-gradient(135deg,#F7DE96 0%,#E7BE5A 45%,#C79A34 100%);
  --blue:#2E7CFF;
  --sh-sm:0 10px 24px -14px rgba(0,0,0,.8);
  background:
    radial-gradient(760px 420px at 82% -8%, rgba(46,124,255,.16), transparent 60%),
    radial-gradient(720px 520px at 6% 4%, rgba(231,190,90,.12), transparent 58%),
    var(--bg);
}

/* аватар — золото, тёмная буква */
body:not(.c8mode) .ava{color:#1a1204; box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 6px 16px -8px rgba(231,190,90,.5)}
body:not(.c8mode) #uava,
body:not(.c8mode) .ava.brand{background:#08090d center/cover no-repeat; background-image:url(../assets/logo-btb.png); color:transparent}
/* аватар профиля с фото Telegram */
.ava.hasphoto{background-size:cover; background-position:center; color:transparent}

/* колокольчик — тёмная фаска */
body:not(.c8mode) .bell{background:linear-gradient(180deg,#1d2432,#0e131c); border:1px solid var(--line); color:var(--indigo-d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -7px 12px rgba(0,0,0,.42), 0 9px 15px -9px rgba(0,0,0,.85)}
body:not(.c8mode) .bell.dot::after{background:var(--blue); border-color:#0b0d13; box-shadow:0 0 8px var(--blue)}

/* баланс — тёмное стекло + золотая цифра Playfair */
body:not(.c8mode) .balance{color:var(--ink); border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(231,190,90,.06),rgba(231,190,90,0) 40%),linear-gradient(155deg,#12151d,#0C0E14 70%);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9), 0 0 40px -22px rgba(46,124,255,.35) inset}
body:not(.c8mode) .balance::after{display:none}
body:not(.c8mode) .balance .lab{color:var(--mut); opacity:1}
body:not(.c8mode) .amt{font-family:'Playfair Display',Georgia,serif; font-weight:800; letter-spacing:.5px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(231,190,90,.18))}
body:not(.c8mode) .balance .sub{color:var(--mut); opacity:1}
body:not(.c8mode) .pay{background:linear-gradient(180deg,#1d2432,#0f141d); border:1px solid var(--line); color:var(--indigo-d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 12px -8px rgba(0,0,0,.8)}
body:not(.c8mode) .pay small{color:var(--indigo-d)}

/* действия — литые золотые кнопки + выпуклые иконки */
body:not(.c8mode) .actions{gap:12px; margin-top:20px}
body:not(.c8mode) .act{background:none; border:none; box-shadow:none; padding:0; gap:10px; display:flex; flex-direction:column; align-items:center}
body:not(.c8mode) .act:active{transform:none}
body:not(.c8mode) .act .ic{width:62px; height:66px; margin:0; display:block; transition:transform .1s ease;
  filter:drop-shadow(0 11px 13px rgba(0,0,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.4)) drop-shadow(0 0 22px rgba(46,124,255,.16))}
body:not(.c8mode) .act:active .ic{transform:translateY(4px)}
body:not(.c8mode) .act .ic svg.plate{width:100%; height:100%; overflow:visible}
body:not(.c8mode) .eng path{fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
body:not(.c8mode) .eng .hl path{stroke:#2A1B05; opacity:.5}
body:not(.c8mode) .eng .dk path{stroke:#FFEFBE; filter:drop-shadow(0 -0.7px 0.2px rgba(255,255,255,.55))}
body:not(.c8mode) .act small{color:var(--ink); font-weight:700}

/* крипто-карта VISA — чёрное золото */
body:not(.c8mode) .visa{color:#EDE6D2; border:1px solid var(--line);
  background:radial-gradient(120% 140% at 85% -20%, rgba(46,124,255,.42), transparent 45%),linear-gradient(135deg,#1a1408,#0b0b0e 55%,#05060a);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.9)}
body:not(.c8mode) .visa b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
body:not(.c8mode) .visa .chip{background:linear-gradient(135deg,#F7DE96,#B8892F)}

/* значок STAKE в списке активов */
body:not(.c8mode) .stk{background:rgba(231,190,90,.12); border-color:var(--line); color:var(--indigo-d)}

/* кнопки stakebtn / rl-share вне C8 — золотые */
body:not(.c8mode) .stakebtn{background:var(--grad); color:#231708;
  box-shadow:0 14px 26px -12px rgba(231,190,90,.6), inset 0 1px 0 rgba(255,255,255,.5)}
body:not(.c8mode) .stakebtn::after{background:linear-gradient(180deg,rgba(255,255,255,.35),transparent)}
body:not(.c8mode) .stakebtn svg{stroke:#231708}
body:not(.c8mode) .rl-share{color:#231708}

/* партнёрская ссылка (экран BTB-партнёров) — тёмная */
body:not(.c8mode) .reflink{background:linear-gradient(120deg,#141A26,#12151d); border:1px solid var(--line)}
body:not(.c8mode) .rl-lab{color:var(--indigo-d)}
body:not(.c8mode) .rl-row{background:#0c0f16; border:1px solid var(--line)}
body:not(.c8mode) .rl-row span{color:var(--ink2)}
body:not(.c8mode) .rl-row button{background:#141A26; border:1px solid var(--line); color:var(--indigo-d)}

/* нижняя навигация — тёмная, активная вкладка золотая */
body:not(.c8mode) .nav{background:rgba(9,10,15,.92); border-top:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 -10px 30px -22px rgba(0,0,0,.9)}
body:not(.c8mode) .nav button{color:var(--dim)}
body:not(.c8mode) .nav button.on{color:var(--indigo-d)}
body:not(.c8mode) .nav button.on svg{background:var(--grad); color:#231708; border-radius:12px; padding:6px; width:34px; height:34px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 5px rgba(120,80,10,.4), 0 5px 10px -5px rgba(0,0,0,.7), 0 0 18px -8px rgba(46,124,255,.4)}

/* тост — тёмный */
body:not(.c8mode) #toast{background:#12151d; color:var(--ink); border:1px solid var(--line)}

/* ===== PWA-гейт: экран входа по почте (вне Telegram) ===== */
#pwaGate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:calc(24px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(120% 80% at 50% 0%,#17171d 0%,#0e0e12 60%,#0a0a0d 100%);}
#pwaGate .pwabox{width:100%;max-width:360px;text-align:center;
  background:rgba(255,255,255,.035);border:1px solid rgba(214,169,74,.28);border-radius:22px;
  padding:26px 20px 22px;box-shadow:0 24px 60px -24px rgba(0,0,0,.8);}
#pwaGate .pwalogo{width:76px;height:76px;border-radius:20px;object-fit:contain;
  box-shadow:0 10px 28px -10px rgba(214,169,74,.5)}
#pwaGate .pwatitle{margin-top:12px;font:800 22px/1.1 var(--f,'Manrope',sans-serif);
  background:linear-gradient(180deg,#FCE9A8,#D6A94A);-webkit-background-clip:text;background-clip:text;color:transparent}
#pwaGate .pwasub{margin-top:6px;font:600 12px var(--m,'Manrope',sans-serif);color:#9aa0b4}
#pwaGate input{width:100%;box-sizing:border-box;margin-top:14px;padding:13px 14px;border-radius:13px;
  border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28);color:#fff;
  font:600 15px var(--m,'Manrope',sans-serif);outline:none}
#pwaGate #pwaCode{letter-spacing:7px;text-align:center;font:700 19px var(--m,'Manrope',sans-serif)}
#pwaGate input:focus{border-color:rgba(214,169,74,.6)}
#pwaGate .pwabtn{width:100%;margin-top:12px;padding:13px;border:none;border-radius:13px;cursor:pointer;
  font:800 15px var(--f,'Manrope',sans-serif);color:#2a1c04;
  background:linear-gradient(180deg,#F6D982,#D6A94A);box-shadow:0 12px 26px -12px rgba(214,169,74,.7)}
#pwaGate .pwabtn:disabled{opacity:.6;cursor:default}
#pwaGate #pwaMsg{min-height:16px;margin-top:10px;font:600 12px var(--m,'Manrope',sans-serif);color:#9aa0b4}
#pwaGate .pwahint{margin-top:8px;font:600 11px var(--m,'Manrope',sans-serif);color:#8a8f9f;line-height:1.4}

/* ===== NFT: под-вкладки + рич-карты маркета ===== */
.nftseg{display:flex;gap:6px;background:rgba(255,255,255,.05);border-radius:12px;padding:4px;margin:4px 0 14px}
.nftseg button{flex:1;padding:9px;border:none;border-radius:9px;cursor:pointer;background:transparent;color:var(--mut,#9aa0b4);font:700 13px var(--f)}
.nftseg button.on{background:linear-gradient(180deg,#F6D982,#D6A94A);color:#2a1c04}
.nftmk{display:flex;gap:12px;background:var(--card,rgba(255,255,255,.04));border:1px solid var(--ln,rgba(255,255,255,.08));border-radius:16px;padding:12px;margin-bottom:12px}
.nftmk-media{flex:0 0 108px;width:108px;height:108px;aspect-ratio:auto;perspective:820px;border-radius:14px;overflow:hidden;position:relative}
.nftmk-body{flex:1;min-width:0;display:flex;flex-direction:column}
.nftmk-hd{display:flex;align-items:center;gap:8px}
.nftmk-hd b{font:800 15px var(--f)}
.rar{font:700 10px var(--m);text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:20px;white-space:nowrap}
.rar.common{background:rgba(150,160,180,.18);color:#aab2c4}
.rar.rare{background:rgba(84,140,255,.20);color:#7ea6ff}
.rar.epic{background:rgba(178,102,255,.20);color:#c79bff}
.rar.legendary{background:linear-gradient(90deg,#F6D982,#D6A94A);color:#2a1c04}
.nftmk-grid{display:flex;gap:14px;margin:8px 0 7px;flex-wrap:wrap}
.nftmk-grid small{display:block;font:600 10px var(--m);color:var(--mut)}
.nftmk-grid b{font:800 13px var(--f)}
.nftmk-desc{margin:0 0 10px;font:500 12px var(--m);color:var(--mut,#9aa0b4);line-height:1.4}
.nftmk-buy{margin-top:auto;align-self:flex-start;padding:9px 22px;border:none;border-radius:11px;cursor:pointer;font:800 13px var(--f);color:#2a1c04;background:linear-gradient(180deg,#F6D982,#D6A94A);box-shadow:0 10px 22px -12px rgba(214,169,74,.7)}

/* ===== NFT: экран-деталь (по тапу на карточку) ===== */
#nftDetail{position:fixed;inset:0;z-index:9998;overflow-y:auto;
  background:radial-gradient(120% 80% at 50% 0%,#17171d 0%,#0e0e12 60%,#0a0a0d 100%);
  padding:calc(14px + env(safe-area-inset-top,0px)) 18px calc(28px + env(safe-area-inset-bottom,0px))}
#nftDetail .back{color:#c9cdda;font:700 14px var(--f);cursor:pointer;padding:6px 0;display:inline-block}
.nftx-hero{max-width:260px;margin:6px auto 0;aspect-ratio:1/1;border-radius:20px}
.nftx-hd{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.nftx-hd b{font:800 22px var(--f)}
.nftx-specs{justify-content:center;gap:26px;margin:16px 0}
.nftx-specs small{display:block;font:600 10px var(--m);color:var(--mut);text-align:center}
.nftx-specs b{font:800 15px var(--f);text-align:center;display:block;margin-top:2px}
.nftx-desc{max-width:440px;margin:2px auto 20px;font:500 14px var(--m);color:#b6bccb;line-height:1.55;text-align:center}
.nftx-buy{display:block;margin:0 auto;width:100%;max-width:440px}

/* ===== Выбор языка (нижняя шторка) ===== */
#langModal{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-end;justify-content:center}
.lm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.lm-sheet{position:relative;width:100%;max-width:480px;background:#15151b;border-radius:22px 22px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -20px 60px -20px rgba(0,0,0,.7);animation:lmUp .25s ease}
@keyframes lmUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.lm-title{font:800 16px var(--f);text-align:center;margin-bottom:12px;color:#fff}
.lm-opt{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:13px;cursor:pointer}
.lm-opt:active{background:rgba(255,255,255,.06)}
.lm-opt.on{background:rgba(214,169,74,.12)}
.lm-flag{font-size:22px}
.lm-opt b{flex:1;font:700 15px var(--f);color:#e7eaf3}
.lm-check{color:#D6A94A;font-weight:800}