/* NFTишник — оформление под нативный Telegram. Цвета берутся из themeParams (см. main.js), ниже — тёмные значения по умолчанию */
:root{
  --bg:#000; --bg2:#000; --card:#1c1c1d; --card2:#2c2c2e; --text:#fff; --hint:#8d8e93; --accent:#3e88f7; --accent2:#2f78e6;
  --link:#3e88f7; --danger:#ff453a; --ok:#30d158; --sep:rgba(84,84,88,.55);
  --t1:#9aa7b5; --t2:#5fd38d; --t3:#4aa3f2; --t4:#a56cf2; --t5:#f2a53f; --t6:#ff5a7a;
  --tab-h:64px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --r:12px; --ease:cubic-bezier(.22,.9,.28,1); --spring:cubic-bezier(.34,1.56,.64,1);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
:root.light{ --bg:#fff; --bg2:#efeff4; --card:#fff; --card2:#e9e9ee; --text:#000; --hint:#8a8a8f; --accent:#007aff; --link:#007aff; --sep:rgba(60,60,67,.29); }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;background:var(--bg2);color:var(--text);overscroll-behavior:none;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.3}
body{overflow:hidden;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#app{position:fixed;inset:0;display:flex;flex-direction:column}
.screen{flex:1;overflow-y:auto;overflow-x:hidden;padding:calc(var(--safe-t) + 12px) 14px calc(var(--tab-h) + var(--safe-b) + 24px);-webkit-overflow-scrolling:touch;animation:fadeUp .35s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
h1{font-size:26px;font-weight:700;letter-spacing:-.3px}
h2{font-size:13px;font-weight:600;color:var(--hint);text-transform:uppercase;letter-spacing:.4px;margin:20px 6px 8px}
.muted{color:var(--hint)} .small{font-size:12px} .center{text-align:center} .row{display:flex;align-items:center;gap:10px} .grow{flex:1} .between{justify-content:space-between}

/* Верхняя панель ресурсов */
.topbar{display:flex;gap:8px;margin-bottom:14px}
.pill{display:flex;align-items:center;gap:6px;background:var(--card);border-radius:999px;padding:7px 12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill .ico{font-size:16px}
.pill.btn:active{transform:scale(.96)}
.pill small{color:var(--hint);font-weight:500;font-size:11px}

/* Карточки и списки в стиле Telegram */
.card{background:var(--card);border-radius:var(--r);overflow:hidden}
.list>*+*{border-top:1px solid var(--sep)}
.cell{display:flex;align-items:center;gap:12px;padding:12px 14px;width:100%;text-align:left}
.cell:active{background:var(--card2)}
.cell .t{font-weight:500} .cell .s{font-size:13px;color:var(--hint)}
.chev::after{content:"›";color:var(--hint);font-size:22px;margin-left:auto}
.btn-main{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:14px;background:var(--accent);color:#fff;font-weight:600;font-size:16px;transition:transform .15s var(--ease),filter .2s;box-shadow:0 6px 18px -6px var(--accent)}
.btn-main:active{transform:scale(.98);filter:brightness(.92)}
.btn-main[disabled]{opacity:.45;box-shadow:none;pointer-events:none}
.btn-sec{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-weight:600}
.btn-sec:active{transform:scale(.97)}
.btn-danger{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}
.seg{display:flex;background:var(--card);border-radius:12px;padding:3px;gap:2px}
.seg button{flex:1;padding:8px 6px;border-radius:10px;font-weight:600;font-size:13px;color:var(--hint);transition:background .25s,color .25s}
.seg button.on{background:var(--card2);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.25)}

/* Нижняя панель (как в Telegram: матовое стекло) */
.tabbar{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);display:flex;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border-top:1px solid var(--sep);z-index:20}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--hint);font-size:10.5px;font-weight:500;transition:color .2s}
.tabbar button .i{font-size:22px;transition:transform .35s var(--spring);filter:grayscale(1) opacity(.7)}
.tabbar button.on{color:var(--accent)} .tabbar button.on .i{transform:translateY(-2px) scale(1.12);filter:none}
.tabbar .badge{position:absolute;top:6px;margin-left:16px;background:var(--danger);color:#fff;border-radius:9px;min-width:16px;height:16px;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ───── Подарок ───── */
.gift,.gp-hero{container-type:inline-size}
.gift{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:1;isolation:isolate;background:var(--g-bg,var(--card));transition:transform .25s var(--ease)}
.gift.tap:active{transform:scale(.94)}
.gift .pat{position:absolute;inset:0;z-index:0;pointer-events:none}
.gift .pat i,.gp-hero .pat i{position:absolute;font-style:normal;opacity:.22;transform:translate(-50%,-50%);line-height:1;filter:saturate(.3) brightness(1.6)}
.pat i.m{background:var(--g-pat);-webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat;width:var(--s);height:var(--s);opacity:.35}
.gift .mdl{position:absolute;inset:14%;z-index:1;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.gift .mdl svg,.gift .mdl img,.gift .mdl>div{width:100%;height:100%}
.gift .num{position:absolute;top:5px;right:6px;z-index:2;font-size:10px;font-weight:700;color:var(--g-text,#fff);opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.gift .tag{position:absolute;left:5px;bottom:5px;z-index:2;font-size:10px;font-weight:700;padding:2px 6px;border-radius:8px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);color:#fff}
.gift .ribbon{position:absolute;top:0;left:0;z-index:2;font-size:9px;font-weight:800;color:#fff;background:linear-gradient(135deg,#f5b53f,#f07a2b);padding:2px 12px 2px 6px;border-bottom-right-radius:10px}
.gift .pin{position:absolute;top:5px;left:5px;z-index:2;font-size:11px}
.gift.t6{box-shadow:0 0 0 1.5px var(--t6) inset}.gift.t5{box-shadow:0 0 0 1.5px var(--t5) inset}
.gift.plain{--g-bg:linear-gradient(160deg,color-mix(in srgb,var(--tc) 28%,var(--card2)),var(--card))}
.gift.plain::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--tc) 35%,transparent),transparent 62%);z-index:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.cardgift{background:var(--card);border-radius:16px;padding:6px 6px 10px;display:flex;flex-direction:column;gap:6px;text-align:left}
.cardgift .n{font-weight:600;font-size:13px;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardgift .p{padding:0 4px;font-size:12px;color:var(--hint)}
.price{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--text)}

/* Редкость-чип (как "0.8%" в Telegram) */
.rar{display:inline-block;font-size:11px;font-weight:600;padding:1px 6px;border-radius:7px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);margin-left:8px}
.rar.legendary{background:rgba(245,181,63,.2);color:#f5b53f}.rar.epic{background:rgba(165,108,242,.2);color:#b98af7}.rar.rare{background:rgba(74,163,242,.2);color:#6ab3f3}

/* ───── Нижние шторки ───── */
#layer-sheets{position:fixed;inset:0;z-index:50;pointer-events:none}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:94%;background:var(--bg);border-radius:22px 22px 0 0;transform:translateY(100%);transition:transform .42s var(--ease);pointer-events:auto;display:flex;flex-direction:column;overflow:hidden;touch-action:pan-y}
.sheet.full{top:calc(var(--safe-t) + 6px);max-height:none}
.sheet.in{transform:none}.scrim.in{opacity:1}
.sheet{isolation:isolate}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:var(--hint);opacity:.4;margin:8px auto 0;flex:none;position:relative;z-index:5}
.sheet .x{position:absolute;top:12px;left:12px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.35);backdrop-filter:blur(10px);color:#fff;font-size:16px;z-index:6;display:flex;align-items:center;justify-content:center}
.sheet .body{overflow-y:auto;flex:1;padding-bottom:calc(var(--safe-b) + 14px)}
.sheet .head{padding:14px 56px 10px;text-align:center;font-weight:700;font-size:16px}

/* Страница подарка */
.gp-hero{position:relative;padding:54px 0 0;text-align:center;color:var(--g-text,#fff);background:var(--g-bg);overflow:hidden}
.gp-hero .pat{position:absolute;inset:0}
.gp-art{position:relative;width:46%;max-width:190px;aspect-ratio:1;margin:0 auto;z-index:1}
.gp-art .mdl{position:absolute;inset:0;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4));animation:float 4s ease-in-out infinite}
.gp-art .mdl svg,.gp-art .mdl>div,.gp-art .mdl img{width:100%;height:100%}
@keyframes float{50%{transform:translateY(-5px) rotate(-1.5deg)}}
.gp-title{position:relative;z-index:1;font-size:21px;font-weight:700;margin-top:6px}
.gp-title small{font-weight:500;opacity:.7;font-size:16px;margin-left:4px}
.gp-sub{position:relative;z-index:1;opacity:.7;font-size:13px;margin-bottom:14px}
.gp-actions{position:relative;z-index:1;display:flex;gap:8px;padding:0 14px 14px}
.gp-actions button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:500}
.gp-actions button .i{font-size:19px}
.gp-actions button:active{transform:scale(.95)}
.gp-actions button[disabled]{opacity:.5}
.props{margin:12px 14px;background:var(--card);border-radius:14px;overflow:hidden}
.props .pr{display:flex;padding:11px 14px;gap:14px;align-items:baseline}
.props .pr+.pr{border-top:1px solid var(--sep)}
.props .k{width:96px;color:var(--hint);flex:none;font-size:14px}
.props .v{font-weight:500;flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap}
.props .v a{color:var(--link);text-decoration:none}
.blurtxt{filter:blur(3.5px);transition:filter .4s var(--ease)}.blurtxt.ok{filter:none}
.note{margin:6px 22px;font-size:12px;color:var(--hint);text-align:center}

/* ───── Рулетка (как кейсы CS) ───── */
.roll-wrap{position:fixed;inset:0;z-index:60;background:radial-gradient(ellipse at 50% 30%,#1b2740,#070b12);display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .3s}
.roll-wrap.in{opacity:1}
.roll-view{position:relative;height:150px;overflow:hidden;mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.roll-strip{display:flex;gap:10px;position:absolute;left:0;top:10px;will-change:transform}
.roll-card{flex:none;width:110px;height:130px;border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:5px;background:var(--card);border-bottom:3px solid var(--tc)}
.roll-card .gift{flex:1;aspect-ratio:auto}
.roll-card span{font-size:11px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.roll-marker{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:linear-gradient(#fff,var(--accent));box-shadow:0 0 18px 2px var(--accent);z-index:3;border-radius:2px}
.roll-marker::before{content:"";position:absolute;top:-2px;left:-6px;border:7px solid transparent;border-top-color:#fff}
.roll-title{text-align:center;font-size:18px;font-weight:700;margin-bottom:18px;color:#fff}
.reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(7,11,18,.86);backdrop-filter:blur(8px);animation:fadeIn .4s;padding:20px}
@keyframes fadeIn{from{opacity:0}}
.reveal .big{width:min(58vw,240px);animation:pop .55s var(--spring)}
.reveal h3{font-size:22px;color:#fff;text-align:center}
.multi{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;max-width:420px}
.multi .gift{opacity:0;animation:pop .45s var(--spring) forwards}

/* ───── Улучшение / крафт ───── */
.shimmer{animation:shimmer .5s linear infinite}
@keyframes shimmer{50%{filter:brightness(1.5) saturate(1.4)}}
.craft-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:260px;margin:10px auto}
.slot{aspect-ratio:1;border-radius:18px;background:var(--card);display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--sep);font-size:26px;color:var(--hint);position:relative;transition:transform .25s var(--spring)}
.slot:active{transform:scale(.94)}
.slot .gift{position:absolute;inset:0;border-radius:18px}
.slot .rm{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--danger);color:#fff;font-size:12px;z-index:5;display:flex;align-items:center;justify-content:center}
.ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:108px;height:108px;z-index:3;background:var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--bg)}
.ring>svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring b{font-size:22px;font-variant-numeric:tabular-nums}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 14px}
.chip{display:flex;align-items:center;gap:6px;background:var(--card);border-radius:999px;padding:5px 10px 5px 6px;font-size:12px;font-weight:600}
.chip .gift{width:22px;border-radius:50%}
.cube-stage{perspective:700px;height:200px;display:flex;align-items:center;justify-content:center}
.cube{position:relative;width:110px;height:110px;transform-style:preserve-3d;animation:spin3d 2.6s cubic-bezier(.5,0,.3,1) forwards}
.cube div{position:absolute;inset:0;border-radius:18px;background:linear-gradient(145deg,#32435a,#1b2736);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:44px;backface-visibility:hidden}
.cube .f1{transform:translateZ(55px)}.cube .f2{transform:rotateY(90deg) translateZ(55px)}.cube .f3{transform:rotateY(180deg) translateZ(55px)}.cube .f4{transform:rotateY(-90deg) translateZ(55px)}.cube .f5{transform:rotateX(90deg) translateZ(55px)}.cube .f6{transform:rotateX(-90deg) translateZ(55px)}
@keyframes spin3d{0%{transform:rotateX(0) rotateY(0) scale(.8)}60%{transform:rotateX(540deg) rotateY(720deg) scale(1.1)}100%{transform:rotateX(720deg) rotateY(1080deg) scale(1)}}
.flyin{position:absolute;width:64px;height:64px;z-index:10;transition:transform .9s var(--ease),opacity .9s}
.fail-bg{background:linear-gradient(#4a1f1c,#2a1412)!important}
.craftbox.fail{background:#35191a}
.craftbox{transition:background .6s}

/* ───── Топ / профиль ───── */
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#e17ab0);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#fff;flex:none;overflow:hidden;position:relative}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar.vip{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #f5b53f}
.rank{width:26px;text-align:center;font-weight:700;color:var(--hint);font-variant-numeric:tabular-nums}
.rank.r1{color:#f5b53f}.rank.r2{color:#c5ccd6}.rank.r3{color:#d08a5a}
.prof-head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 14px}
.prof-head .avatar{width:88px;height:88px;font-size:36px}
.prof-head h1{font-size:22px;display:flex;align-items:center;gap:6px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--card);border-radius:14px;padding:10px;text-align:center}
.stat b{display:block;font-size:17px;font-variant-numeric:tabular-nums}.stat span{font-size:11px;color:var(--hint)}
.empty{padding:40px 20px;text-align:center;color:var(--hint)}
.empty .big{font-size:46px;margin-bottom:6px}
.progress{height:6px;border-radius:3px;background:var(--card2);overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#e17ab0);border-radius:3px;transition:width .5s var(--ease)}
.season,.dyn-gap{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 38%,var(--card)),var(--card));border-radius:var(--r);padding:14px;position:relative;overflow:hidden}
.season .cols{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.season .cols::-webkit-scrollbar{display:none}
.season .cols .gift{width:56px;flex:none;border-radius:12px}
.dyn{margin-top:14px}
.hero-btn{position:relative;width:100%;border-radius:22px;padding:22px 16px;background:linear-gradient(135deg,#8774e1,#e17ab0);color:#fff;overflow:hidden;text-align:left;box-shadow:0 14px 30px -12px #8774e1}
.hero-btn:active{transform:scale(.985)}
.hero-btn h3{font-size:22px}.hero-btn p{opacity:.85;font-size:13px;margin-top:2px}
.hero-btn .emoji{position:absolute;right:-6px;top:-6px;font-size:84px;opacity:.9;animation:float 3.5s ease-in-out infinite}
.hero-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 3.6s infinite}
@keyframes sheen{60%,100%{transform:translateX(120%)}}
.toast{position:fixed;left:50%;top:calc(var(--safe-t) + 12px);transform:translate(-50%,-30px);background:rgba(30,40,54,.96);backdrop-filter:blur(14px);color:#fff;padding:11px 16px;border-radius:14px;font-size:14px;font-weight:500;max-width:90vw;opacity:0;transition:all .4s var(--spring);z-index:100;display:flex;gap:10px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.in{opacity:1;transform:translate(-50%,0)}.toast.err{background:rgba(120,32,32,.97)}
#layer-toast{position:fixed;inset:0;z-index:100;pointer-events:none}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}
.skeleton{background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:14px;aspect-ratio:1}
@keyframes sk{to{background-position:-200% 0}}
input.tf,select.tf{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--sep);background:var(--card);color:var(--text);font:inherit;outline:none;user-select:text;-webkit-user-select:text}
input.tf:focus{border-color:var(--accent)}
.picker-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 14px 14px}
.picker-list .gift.sel{outline:3px solid var(--accent);outline-offset:-3px}
.q-row{display:flex;align-items:center;gap:12px;padding:12px 14px}
.q-row .progress{margin-top:6px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.gift .qty{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;font-weight:700;padding:1px 6px;border-radius:9px;backdrop-filter:blur(6px)}
select.tf{appearance:none;-webkit-appearance:none;margin-top:0}

/* ───── Нативный проход: iOS/Telegram-стиль ───── */
.screen{padding-left:16px;padding-right:16px}
h1{font-size:28px;letter-spacing:.3px}
h2{font-size:13px;font-weight:400;letter-spacing:0;margin:26px 16px 7px}
.card{border-radius:12px}
.card.list>*+*,.list>*+*{border-top:0}
.list>*{position:relative}
.list>*+*::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
.list.ic>*+*::before{left:60px}
.cell{padding:11px 16px;min-height:50px}
.cell .t{font-weight:400;font-size:16px}.cell .s{font-size:13px;margin-top:1px}
.chev::after{content:"";width:7px;height:7px;border-right:2px solid color-mix(in srgb,var(--hint) 70%,transparent);border-top:2px solid color-mix(in srgb,var(--hint) 70%,transparent);transform:rotate(45deg);margin-left:auto;margin-right:2px;flex:none}
.sq{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;color:#fff}
.btn-main{border-radius:12px;padding:15px;box-shadow:none;font-weight:600;font-size:17px}
.btn-main:active{transform:none;filter:brightness(.88)}
.btn-sec{border-radius:12px;background:color-mix(in srgb,var(--accent) 15%,transparent);padding:13px 14px}
.btn-sec:active{transform:none;opacity:.6}
.seg{border-radius:9px;padding:2px;background:var(--card)}
.seg button{border-radius:7px;padding:7px 6px;font-weight:500;font-size:13px;color:var(--text)}
.seg button.on{background:var(--card2);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);font-weight:600}
:root.light .seg{background:rgba(118,118,128,.12)}:root.light .seg button.on{background:#fff}
.pill{border-radius:999px;padding:7px 12px;font-weight:500}
.topbar{margin-bottom:16px}

/* таб-бар */
.tabbar{height:calc(49px + var(--safe-b));background:color-mix(in srgb,var(--card) 86%,transparent);border-top:.5px solid var(--sep)}
.tabbar button{gap:2px;font-size:10px;font-weight:500;padding-top:6px;justify-content:flex-start}
.tabbar button .i{display:block;width:26px;height:26px;filter:none;transform:none;font-size:0}
.tabbar button .i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabbar button.on .i{transform:none}.tabbar button.on .i svg{fill:color-mix(in srgb,currentColor 18%,transparent)}
.screen{padding-bottom:calc(49px + var(--safe-b) + 24px)}

/* главная: карточка с подарком по центру, как в магазине подарков Telegram */
.hero-card{background:var(--card);border-radius:12px;padding:20px 16px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.hero-card .emoji{font-size:92px;line-height:1;animation:float 3.5s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.hero-card h3{font-size:20px;font-weight:700;margin-top:6px}
.hero-card p{color:var(--hint);font-size:14px;max-width:300px;margin-bottom:12px}
.hero-card .btn-main{margin-top:2px}
.hero-card .row{width:100%;margin-top:8px}
.season{background:var(--card);border-radius:12px;padding:14px 16px}
.season .cols .gift{width:60px;border-radius:12px}
.q-row{padding:12px 16px}
.progress{height:4px}.progress i{background:var(--accent)}

/* подарки */
.gift{border-radius:12px}
.cardgift{background:var(--card);border-radius:12px;padding:6px 6px 10px;align-items:stretch}
.cardgift .n{font-size:14px;font-weight:500;padding:0 4px}
.cardgift .p{padding:0 4px;color:var(--hint);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardgift .buy{display:flex;align-items:center;justify-content:center;gap:4px;margin:2px 2px 0;padding:6px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}

/* шторки */
.sheet{background:var(--bg2);border-radius:12px 12px 0 0;transition:transform .45s cubic-bezier(.32,.72,0,1)}
.sheet .head{font-size:17px}
.props{border-radius:12px;margin:12px 16px}
.props .pr{padding:12px 16px}
.props .pr+.pr{border-top:0;position:relative}
.props .pr+.pr::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
.props .k{font-size:15px}
.note{font-size:13px;margin:8px 32px}

/* аватарки: палитра «цвета пользователя» Telegram */
.avatar{background:linear-gradient(180deg,var(--a1,#72d5fd),var(--a2,#2a9ef1));font-weight:600}
.avatar.c0{--a1:#ff885e;--a2:#ff516a}.avatar.c1{--a1:#ffcd6a;--a2:#ffa85c}.avatar.c2{--a1:#82b1ff;--a2:#665fff}.avatar.c3{--a1:#a0de7e;--a2:#54cb68}.avatar.c4{--a1:#53edd6;--a2:#28c9b7}.avatar.c5{--a1:#72d5fd;--a2:#2a9ef1}.avatar.c6{--a1:#e0a2f3;--a2:#d669ed}

/* профиль */
.prof-head{gap:2px;padding:6px 0 16px}
.prof-head .avatar{width:100px;height:100px;font-size:42px;margin-bottom:8px}
.prof-head h1{font-size:24px;font-weight:700;letter-spacing:0}
.prof-head .st{color:var(--hint);font-size:15px}
.stats{background:var(--card);border-radius:12px;padding:4px 0;grid-template-columns:repeat(3,1fr);gap:0}
.stat{background:none;border-radius:0;padding:10px 4px;position:relative}
.stat b{font-size:18px;font-weight:600}
.stat span{font-size:12px}
.utabs{display:flex;border-bottom:.5px solid var(--sep);margin:22px -16px 12px;padding:0 16px}
.utabs span{padding:10px 4px;margin-right:22px;font-weight:600;font-size:15px;color:var(--accent);position:relative}
.utabs span::after{content:"";position:absolute;left:0;right:0;bottom:-.5px;height:2.5px;border-radius:2px 2px 0 0;background:var(--accent)}
.utabs span small{color:var(--hint);font-weight:500;margin-left:5px}
.rank{font-weight:500}

/* уведомления */
.toast{background:rgba(44,44,46,.95);border-radius:12px;font-weight:400;font-size:15px;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.toast.err{background:rgba(70,30,30,.96)}
.roll-wrap{background:radial-gradient(ellipse at 50% 30%,#141824,#000)}
.rar{border-radius:6px;font-weight:600}
/* плашка-объявление от админа */
.announce{display:flex;gap:10px;align-items:flex-start;margin:10px 14px 0;padding:11px 13px;border-radius:14px;background:color-mix(in srgb,var(--accent) 16%,var(--card));font-size:14px;line-height:1.35}
.announce.warn{background:color-mix(in srgb,#ff9f0a 20%,var(--card))}.announce.promo{background:linear-gradient(135deg,color-mix(in srgb,#bf5af2 28%,var(--card)),color-mix(in srgb,#ff375f 24%,var(--card)))}

/* ───── «Магазин подарков Telegram»: карточки с тонировкой тира, ценники-пилюли, чипсы-фильтры ───── */
.screen h1{font-size:28px;font-weight:700;letter-spacing:-.02em}
.screen>h2,.dyn>h2{font-size:13px;font-weight:600;color:var(--hint);text-transform:uppercase;letter-spacing:.04em;margin:20px 6px 8px}
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.sc,.cardgift{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px 8px 10px;border-radius:18px;text-align:center;overflow:hidden;isolation:isolate;
  background:linear-gradient(170deg,color-mix(in srgb,var(--tc,var(--accent)) 26%,var(--card)) 0%,var(--card) 70%);border:1px solid color-mix(in srgb,var(--tc,var(--accent)) 22%,transparent);transition:transform .2s var(--ease)}
.sc:active,.cardgift:active{transform:scale(.97)}
.sc::before,.cardgift::before{content:"";position:absolute;inset:-30% -20% 40% -20%;z-index:-1;background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--tc,var(--accent)) 38%,transparent),transparent 70%)}
.sc .gift,.cardgift .gift{background:none!important;box-shadow:none!important;border-radius:0}
.sc .gift::after,.cardgift .gift.plain::after{display:none}
.sc .rb{position:absolute;top:10px;left:-26px;transform:rotate(-45deg);width:96px;padding:2px 0;font-size:10px;font-weight:700;color:#fff;background:var(--accent);text-align:center;z-index:2}
.sc .sn{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc .buy,.cardgift .buy{display:flex;align-items:center;justify-content:center;gap:4px;margin:2px 4px 0;padding:7px 10px;border-radius:999px;background:var(--accent);color:#fff!important;font-weight:700;font-size:13px}
.cardgift{text-align:left}.cardgift .n{font-weight:600;font-size:14px}.cardgift .p{font-size:12px}
.screen .seg{background:none;padding:0;gap:8px;overflow-x:auto;scrollbar-width:none}.screen .seg::-webkit-scrollbar{display:none}
.screen .seg button{flex:none;padding:8px 14px;border-radius:999px;background:var(--card);color:var(--text);font-weight:600;font-size:14px;box-shadow:none}
.screen .seg button.on{background:var(--accent);color:#fff;box-shadow:none}
.hero-card{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 20%,var(--card)),var(--card) 80%);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:22px}
.season{background:none;padding:0}

/* иконка монеты вместо системного эмодзи */
.coin{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.17em;margin:0 .06em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23f2a51f'/%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%23c77a07' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='7.6' fill='%23ffd45c' stroke='%23d98e0c' stroke-width='1.2'/%3E%3Cpath d='M12 7.2v9.6M9.4 9.6c.6-.9 1.6-1.2 2.6-1.2s2.2.5 2.2 1.6c0 2.2-4.8 1.2-4.8 3.6 0 1.1 1.2 1.7 2.6 1.7 1 0 2-.3 2.6-1.2' fill='none' stroke='%23b87206' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* изготовление: кольцо шанса меньше и не перекрывает слоты, кнопки ✕ — по внешним углам */
.craft-grid{width:min(300px,82vw);gap:12px}
.ring{width:72px;height:72px;box-shadow:0 0 0 5px var(--bg)}.ring b{font-size:17px}
.slot .rm{top:-8px;right:auto;left:-8px}.slot:nth-child(even) .rm{left:auto;right:-8px}
.slot .gift .num{top:auto;bottom:5px;right:6px}.slot .gift .pin{display:none}

.cardgift .buy.gr{background:linear-gradient(135deg,#d9b25a,#b88a2e)!important;color:#241a05!important}

/* Бесплатный кейс за друзей */
.fc-card{margin:12px 0;padding:14px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 28%,var(--card)),var(--card));border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.fc-top{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.fc-top .t{font-weight:700;font-size:16px}.fc-top .s{font-size:13px;color:var(--muted);margin-top:2px}
.fc-ico{font-size:34px;width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:var(--card2)}
.fc-dots{display:flex;gap:6px;margin:6px 0}.fc-dots i{flex:1;height:8px;border-radius:99px;background:var(--card2)}.fc-dots i.on{background:var(--accent)}
.fc-st{font-size:13px;margin:2px 0 10px;color:var(--text)}
.pill.luck{background:color-mix(in srgb,#30d158 22%,var(--card));color:#7ee79c}
.cell.dim{opacity:.55}
.tag-once{margin-left:6px;font-size:11px;padding:1px 6px;border-radius:99px;background:var(--card2);color:var(--muted);font-weight:500}
.ins-row{display:flex;gap:10px;align-items:center;margin:4px 22px 8px;font-size:14px}
.topbar small{display:none}

/* Майнинг TON */
.mn-card{margin:12px 0;padding:14px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,#2ea8ff 24%,var(--card)),var(--card));border:1px solid color-mix(in srgb,#2ea8ff 30%,transparent)}
.mn-top{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.mn-top .t{font-weight:700;font-size:16px}.mn-top .s{font-size:12.5px;color:var(--muted);margin-top:2px}
.mn-ico{font-size:30px;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--card2)}
.mn-bal{text-align:right;cursor:pointer}.mn-bal b{display:block;font-size:15px;color:#6ec5ff}.mn-bal small{font-size:11px;color:var(--muted)}
.mn-slots{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}.mn-slots::-webkit-scrollbar{display:none}
.mn-slot{flex:0 0 74px;text-align:center}.mn-slot .gift,.mn-slot>div:first-child{width:74px}
.mn-slot small{display:block;font-size:10.5px;color:#6ec5ff;margin-top:3px;white-space:nowrap}
.mn-slot.empty{opacity:.5}.mn-plus{height:74px;border-radius:14px;border:1.5px dashed var(--muted);display:grid;place-items:center;font-size:26px;color:var(--muted)}
.mn-bar{height:8px;border-radius:99px;background:var(--card2);overflow:hidden;margin:4px 0 6px}.mn-bar i{display:block;height:100%;background:linear-gradient(90deg,#2ea8ff,#6ec5ff);border-radius:99px}
.mn-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:10px}
.mn-badge{padding:2px 8px;border-radius:99px;background:color-mix(in srgb,#ffd60a 22%,var(--card2));color:#ffd60a;font-size:11.5px;font-weight:600}