:root{
  --bg:#060709;
  --panel:#0a0c10;
  --panel2:#0f1217;
  --text:#ffffff;
  --muted:#a6aab3;
  --line:rgba(255,255,255,.07);

  --gold:#f0a12b;
  --gold2:#d48b1e;

  --pos:#27d17f;
  --neg:#ff5d5d;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
  color:var(--text);
}

.app{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  padding: clamp(14px, 3.5vw, 18px) clamp(12px, 3.2vw, 16px) 22px;
}

.content{
  display:flex;
  flex-direction:column;
  gap: clamp(12px, 2.6vw, 14px);
  min-height: calc(100vh - 22px);
}

/* HERO */
.hero{
  border-radius: 18px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  overflow:hidden;
  min-height: clamp(320px, 46vh, 440px);
}

.heroInner{
  position:relative;
  height:100%;
  padding: clamp(16px, 3.6vw, 18px);
}

.heroDeco{
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 320px at 30% 5%, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7px);
  opacity:.18;
  pointer-events:none;
}

.heroText{
  position:relative;
  z-index:1;
  max-width: 92%;
}

.kicker{
  color:var(--muted);
  font-size: clamp(12px, 3.2vw, 13px);
  margin-bottom: clamp(10px, 2.8vw, 12px);
}

.title{
  margin:0;
  font-size: clamp(16px, 7.2vw, 26px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.accent{
  white-space:nowrap;
}

.sub{
  margin-top: clamp(10px, 2.8vw, 12px);
  color:#d6d8de;
  font-size: clamp(13px, 3.4vw, 14px);
}

/* слот под картинку */
.heroImageSlot{
  margin-top: clamp(12px, 3vw, 14px);
  width: min(260px, 72%);
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  position:relative;
}

.heroImg{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.55));
}

.heroImgFallback{
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 80% at 30% 30%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(180deg, #2b2f38, #141820);
  opacity:.35;
}

/* LIST */
.listSection{
  border-radius:18px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 10px 10px 4px;
}

.listTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 10px 10px;
}

.listTitle{
  font-weight:800;
  font-size: 14px;
  letter-spacing:.02em;
  color:#e8e9ee;
}

.updated{
  font-size:12px;
  color: var(--muted);
}

.coins{display:flex;flex-direction:column}
.loading{
  color:var(--muted);
  padding:14px 10px;
  font-size:14px;
}

.coin{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 10px;
  border-top:1px solid var(--line);
}

.coin:first-child{border-top:0}

.coinLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.coinIcon{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, #2a2f39, #161a21);
  overflow:hidden;
  flex:0 0 auto;
}

.coinIcon img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.coinMeta{min-width:0}
.coinSymbol{
  font-weight:800;
  font-size:16px;
  letter-spacing:.02em;
}

.coinName{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 220px;
}

.coinRight{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.price{
  font-weight:800;
  font-size:16px;
}

.change{
  font-size:13px;
  font-weight:800;
}

.change.pos{color:var(--pos)}
.change.neg{color:var(--neg)}

/* BUTTON */
.bottom{
  margin-top:auto;
  padding-top: 6px;
  display:flex;
  justify-content:center;
}

.cta{
  width:100%;
  border:0;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  color:#131313;
  box-shadow: 0 16px 24px rgba(240,161,43,.14);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.cta:active{transform: translateY(1px)}

/* чуть компактнее на совсем маленьких экранах */
@media (max-width: 340px){
  .coinName{max-width: 160px}
  .heroImageSlot{width: 76%}
}
/* ===========================
   AUTH (Login/Register)
   =========================== */

/* чтобы CTA работала и как <a> */
.ctaLink{
  display:block;
  text-align:center;
  text-decoration:none;
  line-height: 1.2;
}

/* отдельная страница */
.authPage{
  gap: 14px;
}

/* верх */
.authTop{
  padding: 8px 6px 2px;
}

.authLogo{
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 28px;
}

.authMotivation{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

/* панель навигации */
.authHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 2px;
}

.iconBtn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: #e8e9ee;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.iconBtn svg{
  width: 22px;
  height: 22px;
}

.iconBtn:active{
  transform: translateY(1px);
}

.authLink{
  color: var(--gold);
  font-weight: 800;
  text-decoration: none;
  font-size: 14px;
}

.authLink.small{
  font-size: 13px;
}

/* карточка формы */
.authCard{
  border-radius: 18px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 14px;
}

.field{
  display:block;
  margin-bottom: 12px;
}

.fieldLabel{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin: 2px 2px 8px;
}

.input{
  width:100%;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  padding: 14px 14px;
  color: var(--text);
  font-size: 16px;
  outline: none;
}

.input::placeholder{
  color: rgba(255,255,255,.30);
}

.input:focus{
  border-color: rgba(240,161,43,.35);
  box-shadow: 0 0 0 3px rgba(240,161,43,.10);
}

.authRow{
  display:flex;
  justify-content:flex-end;
  margin: 2px 2px 12px;
}

/* кнопка входа */
.ctaBtn{
  width:100%;
}

.ctaBtn:disabled{
  opacity: .45;
  filter: saturate(.6);
  cursor: default;
  box-shadow: none;
  transform: none;
}

.authHint{
  margin-top: 10px;
  min-height: 18px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}
/* ===== Register steps / center (WIDTH FIX) ===== */

.authCenter .authCard{
  max-width: 100%;          /* было узко — теперь на всю ширину контейнера */
  width: 100%;
  margin: 0 auto;
}

/* шаги — обычный поток, без растягивания по высоте */
.step{
  display: flex;
  flex-direction: column;
}

.step.hidden{
  display:none;
}

/* заголовок */
.authTitle{
  margin-top: 6px;
  font-weight: 900;
  letter-spacing: .01em;
  font-size: 18px;
}

/* индикатор шагов */
.stepDots{
  display:flex;
  gap:8px;
  padding: 2px 2px 10px;
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.dot.active{
  background: rgba(240,161,43,.85);
  border-color: rgba(240,161,43,.35);
}

/* поля ближе друг к другу */
.authCenter .field{
  margin-bottom: 8px;
}

.fieldError{
  margin-top: 4px;
  font-size: 12px;
  color: var(--neg);
  min-height: 16px;
}

.fieldHint{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.optional{
  color: rgba(255,255,255,.45);
  font-weight: 600;
}

/* ошибка поля */
.inputError{
  border-color: rgba(255,93,93,.65) !important;
  box-shadow: 0 0 0 3px rgba(255,93,93,.10) !important;
}

/* чекбокс — компактнее */
.checkboxRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin: 8px 2px 12px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.35;
}

.checkboxRow input{
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

.authLink.inline{
  font-size: 12px;
  font-weight: 800;
}

.ctaIcon{
  margin-left: 8px;
}

/* кнопка не прижата вплотную */
.authCenter .step .ctaBtn{
  margin-top: 12px;
}

/* на совсем узких экранах */
@media (max-width: 360px){
  .authCenter .field{ margin-bottom: 7px; }
  .authCenter .step .ctaBtn{ margin-top: 10px; }
}
/* ===========================
   Bottom Navigation (Main)
   =========================== */

.appWithNav{
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

.pageTitle{
  padding: 6px 2px 10px;
}
.pageH1{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.pageSub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.bottomNav{
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(520px, 100%);
  z-index: 50;

  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 12, 16, 0.78); /* темная полупрозрачная */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden;
}

.bottomNavTopLine{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.08); /* очень тонкая серая линия */
}

.bottomNav{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.navItem{
  text-decoration: none;
  color: rgba(255,255,255,.55); /* серый */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}

.navItem svg{
  width: 22px;
  height: 22px;
  color: rgba(255,255,255,.55);
}

.navItem span{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
}

.navItem:active{
  transform: translateY(1px);
}

/* активное можно оставить серым, но чуть ярче (не золотим пока) */
.navItem.active{
  color: #ffffff;          /* ярко-белый текст */
  background: transparent; /* УБРАЛИ квадрат */
}
.navItem.active svg{
  color: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.25));
}
/* ===========================
   Profile tab
   =========================== */

.profileHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 6px 2px 2px;
}

.profileLeft{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}

.profileAvatar{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.profileAvatar svg{
  width: 26px;
  height: 26px;
  color: #ffffff;
}

.profileMeta{
  min-width:0;
  padding-top: 2px;
}

.profileName{
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -.01em;
}

.profileMini{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.profileBell{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto;
}

.profileBell svg{
  width: 22px;
  height: 22px;
  color: #ffffff;
}

.profileMenu{
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap: 2px;
}

/* пункты: без "выделения", просто строка */
.profileItem{
  text-decoration:none;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 8px;
  border-radius: 14px;
}

.profileItem:active{
  transform: translateY(1px);
}

.piLeft{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}

.piIcon{
  width: 22px;
  height: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  flex: 0 0 auto;
}

.piIcon svg{
  width: 22px;
  height: 22px;
  color:#ffffff;
}

.piText{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  color:#ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.piArrow{
  width: 18px;
  height: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.45); /* серая стрелка вправо */
  flex: 0 0 auto;
}

.piArrow svg{
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.45);
}
/* VIP — золотой текст/иконка */
.profileItem.vipItem .piIcon,
.profileItem.vipItem .piText{
  color: var(--gold);
}
.profileItem.vipItem .piIcon svg{
  color: var(--gold);
}
/* ---- balance near nickname ---- */
.profileNameRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

.profileBalance{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 800;
}

.profileBalance svg{
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,.70);
}

/* ---- logout button ---- */
.profileLogoutWrap{
  margin-top: 10px;
  padding: 10px 2px calc(14px + env(safe-area-inset-bottom));
  /* чтобы не уехало под bottomNav */
  margin-bottom: 90px;
}

.logoutBtn{
  width: 100%;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  color: #ffffff;
  font-weight: 900;
  letter-spacing: .01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.logoutBtn:active{
  transform: translateY(1px);
}

/* на маленьких экранах чуть короче подпись UID... */
@media (max-width: 360px){
  .profileMini{ max-width: 240px; }
}
/* ===========================
   Home tab (UPDATED)
   =========================== */

/* чтобы элементы не были прижаты друг к другу */
#tab-home{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

/* Top bar */
.homeTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

.homeBell{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.homeBell svg{ width:22px; height:22px; color:#fff; }
.homeBell:active{ transform: translateY(1px); }

.homeBalance{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 900;
}
.homeBalance svg{ width:16px; height:16px; color: rgba(255,255,255,.70); }

/* ===== Carousel (16:9, banners only) ===== */
.carousel{
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  position:relative;
  aspect-ratio: 16 / 10;
}

.carouselTrack{
  height: 100%;
  display:flex;
  transition: transform .35s ease;
  will-change: transform;
}

.slide{
  flex: 0 0 100%;
  height: 100%;
  text-decoration:none;
  position:relative;
  color:#fff;
}

/* баннер-заглушка под картинки (заменишь на реальные) */
.bannerImg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 320px at 25% 10%, rgba(255,255,255,.09), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

/* разные вариации заглушек */
.bannerImg.b1{ opacity: 1; }
.bannerImg.b2{ opacity: .95; filter: contrast(1.05); }
.bannerImg.b3{ opacity: .9; filter: brightness(.95); }
.bannerImg.b4{ opacity: .92; filter: saturate(.95); }

.carouselDots{
  position:absolute;
  left: 12px;
  bottom: 10px;
  display:flex;
  gap: 8px;
}

.cDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
}
.cDot.active{
  background: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.25);
}

/* ===== Quick actions ===== */
.quickActions{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 2px;
}

.qaItem{
  border: 0;
  background: transparent;
  color: #fff;
  padding: 6px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.qaIcon{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* увеличили SVG */
.qaIcon svg{
  width: 28px;
  height: 28px;
  color: rgba(255,255,255,.92);
}

.qaText{
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.80);
}

/* ===== Single banner (same size as carousel, clickable) ===== */
.homeBanner{
  display:block;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  position:relative;
  aspect-ratio: 16 / 7;
  text-decoration:none;
  color:#fff;
}

/* ===== Coins section spacing (чтобы не прилипало) ===== */
.listSection{
  margin-top: 4px;
}
/* FIX tabs: hidden must always win */
.tabPage.hidden{
  display:none !important;
}
/* small screens */
@media (max-width: 360px){
  #tab-home{ gap: 12px; }
  .quickActions{ gap: 8px; }
  .qaIcon{ width: 52px; height: 52px; }
  .qaIcon svg{ width: 26px; height: 26px; }
}
.bannerPic{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
/* ===========================
   Shop
   =========================== */
.shopHeader{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 4px 2px 6px;
}

.shopHeadText{ min-width:0; }
.shopTitle{
  font-weight: 900;
  letter-spacing: -.01em;
  font-size: 18px;
}
.shopSub{
  margin-top: 4px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.shopGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.botCard{
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  overflow:hidden;
}

.botTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.botImg{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.botImgPh{
  font-size: 11px;
  color: rgba(255,255,255,.45);
  font-weight: 900;
  letter-spacing: .08em;
}

.botBadges{ display:flex; gap: 6px; }
.botRarity{
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}

.botName{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -.01em;
  color:#fff;
}

.botStats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.botStat{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  border-radius: 14px;
  padding: 8px 10px;
}
.botStatK{
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-weight: 800;
}
.botStatV{
  margin-top: 2px;
  font-size: 13px;
  font-weight: 900;
}

.botReq{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.botReq b{ color:#fff; }

.botFeat{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.70);
  font-size: 12px;
  line-height: 1.35;
}
.botFeat li{ margin: 4px 0; }

.botBuyBtn{
  width:100%;
  border: 0;
  border-radius: 16px;
  padding: 12px 12px;
  font-weight: 900;
  cursor:pointer;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  color:#131313;
  -webkit-tap-highlight-color: transparent;
}
.botBuyBtn:disabled{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.60);
  cursor: default;
}

.botNote{
  font-size: 11px;
  color: rgba(255,255,255,.45);
}

/* rarity accents */
.botCard.rCommon .botRarity{ border-color: rgba(255,255,255,.18); }
.botCard.rUncommon .botRarity{ border-color: rgba(39,209,127,.35); color: #d8ffe9; }
.botCard.rRare .botRarity{ border-color: rgba(80,160,255,.40); color: #dcecff; }
.botCard.rEpic .botRarity{ border-color: rgba(170,90,255,.45); color: #f0e5ff; }
.botCard.rLegendary .botRarity{ border-color: rgba(240,161,43,.45); color: #ffe8c6; }
.botCard.rMythic .botRarity{ border-color: rgba(255,93,93,.55); color: #ffd6d6; }

/* responsive */
@media (max-width: 360px){
  .shopGrid{ gap: 10px; }
  .botImg{ width: 58px; height: 58px; }
}
/* ===========================
   Trade tab
   =========================== */
.tradeTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

.tradeBell{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.tradeBell svg{ width:22px; height:22px; color:#fff; }

.tradeBalance{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 900;
}
.tradeBalance svg{ width:16px; height:16px; color: rgba(255,255,255,.70); }

.tradeHead{ padding: 6px 2px 2px; }
.tradeTitle{ font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.tradeSub{ margin-top: 6px; color: rgba(255,255,255,.55); font-size: 12px; }

.tradeBots{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.tradeBotCard{
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.tbcTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.tbcName{ font-weight: 900; font-size: 14px; }

.tbcBadge{
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.85);
}
.tbcBadge.running{ border-color: rgba(39,209,127,.35); }
.tbcBadge.cooldown{ border-color: rgba(255,255,255,.12); opacity: .9; }

.tbcRow{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tbcPill{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}
.tbcPill b{ color:#fff; }

.tbcTimer{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}

.tbcBtn{
  width:100%;
  border:0;
  border-radius:16px;
  padding: 12px 12px;
  font-weight: 900;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  color:#131313;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.tbcBtn:disabled{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.60);
  cursor: default;
}

.tradeHistory{
  margin-top: 2px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 10px;
}

.tradeHistoryTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 6px 10px;
}

.tradeHistoryTitle{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .01em;
}

.tradeFilter{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.90);
  padding: 8px 10px;
  font-weight: 800;
  outline: none;
}

.tradeList{ display:flex; flex-direction:column; }
.tradeRow{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 6px;
  border-top: 1px solid var(--line);
}
.tradeRow:first-child{ border-top: 0; }

.trCoin{ font-weight: 900; font-size: 13px; }
.trMeta{ margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.55); }
.trRight{ text-align:right; }
.trPrices{ font-weight: 900; font-size: 13px; }
.trProfit{ margin-top: 4px; font-weight: 900; font-size: 13px; color: rgba(39,209,127,.95); }

.tradeEmpty{
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 14px;
}
.tradeEmptyTitle{ font-weight: 900; }
.tradeEmptySub{ margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.55); }
.tradeGoShop{
  margin-top: 12px;
  width:100%;
  border:0;
  border-radius: 16px;
  padding: 12px 12px;
  font-weight: 900;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
}
/* ===========================
   Assets tab
   =========================== */

#tab-assets{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.assetsTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

.assetsBell{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.assetsBell svg{ width:22px; height:22px; color:#fff; }

.assetsBalance{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 900;
}
.assetsBalance svg{ width:16px; height:16px; color: rgba(255,255,255,.70); }

.assetsHead{ padding: 6px 2px 2px; }
.assetsTitle{ font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.assetsSub{ margin-top: 6px; color: rgba(255,255,255,.55); font-size: 12px; }

.assetsCards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.aCard{
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 12px;
}

.aCardWide{
  grid-column: 1 / -1;
}

.aK{
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,.55);
  letter-spacing: .02em;
}

.aV{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: #fff;
}

.aS{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.assetsRefresh{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.90);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.assetsRefresh:active{ transform: translateY(1px); }

.assetsList{
  display:flex;
  flex-direction:column;
}

.assetRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 10px;
  border-top: 1px solid var(--line);
}
.assetRow:first-child{ border-top: 0; }

.arLeft{ min-width:0; }
.arTitle{
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.arMeta{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.arRight{ text-align:right; flex: 0 0 auto; }
.arAmount{
  font-weight: 900;
  font-size: 14px;
}
.arAmount.pos{ color: rgba(39,209,127,.95); }
.arAmount.neg{ color: rgba(255,93,93,.95); }
.arAfter{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

@media (max-width: 360px){
  .assetsCards{ gap: 10px; }
  .arTitle, .arMeta{ max-width: 200px; }
}
/* ===========================
   Partners tab
   =========================== */
#tab-partners{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.partnersTop{ padding: 6px 2px 2px; }
.partnersTitle{ font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.partnersSub{ margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.55); }

.partnersCards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pCard{
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 12px;
}
.pWide{ grid-column: 1 / -1; }

.pK{
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,.55);
  letter-spacing: .02em;
}
.pV{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  color:#fff;
}
.pS{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.partnersHint{
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-weight: 800;
}

.partnersList{
  display:flex;
  flex-direction:column;
}

.partnerRow{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 10px;
  border-top: 1px solid var(--line);
}
.partnerRow:first-child{ border-top: 0; }

.prLeft{ min-width:0; }
.prName{
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.prMeta{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.prRight{ text-align:right; flex:0 0 auto; }
.prProfit{
  font-weight: 900;
  font-size: 13px;
  color: rgba(39,209,127,.95);
}
.prTag{
  margin-top: 4px;
  display:inline-block;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.85);
}
.prTag.active{ border-color: rgba(240,161,43,.35); color: rgba(255,255,255,.95); }

@media (max-width: 360px){
  .partnersCards{ gap: 10px; }
  .prName,.prMeta{ max-width: 180px; }
}
/* ===== Partners: referral block ===== */
.refBlock{
  display:flex;
  gap: 12px;
  align-items:stretch;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 12px;
}

.refLeft{ flex:1; min-width:0; }
.refTitle{
  font-weight: 900;
  font-size: 13px;
  color:#fff;
}

.refCodeRow, .refLinkRow{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:center;
}

.refCode{
  flex: 1;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  padding: 10px 12px;
  font-weight: 900;
  letter-spacing: .08em;
  color:#fff;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.refLink{
  flex: 1;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 10px 12px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.refCopyBtn{
  border: 0;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  cursor:pointer;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color:#fff;
  -webkit-tap-highlight-color: transparent;
}

.refHint{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.refQrWrap{
  width: 148px;
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  padding: 8px;
}

.refQrText{
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,.55);
}

@media (max-width: 420px){
  .refBlock{ flex-direction:column; }
  .refQrWrap{ width: 100%; flex-direction:row; justify-content:space-between; }
}
/* ===== Withdraw PIN modal ===== */
.pinModal{ position:fixed; inset:0; z-index:99; }
.pinModal.hidden{ display:none; }
.pinBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); }
.pinCard{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(520px, calc(100% - 24px));
  border-radius: 18px;
  border:1px solid var(--line);
  background: rgba(10,12,16,.92);
  padding: 14px;
}
/* ===========================
   Sub pages (Withdraw address / History)
   =========================== */
.subTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 2px 10px;
}

.subBack{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.subBack svg{ width:22px; height:22px; color:#fff; }
.subBack:active{ transform: translateY(1px); }

.subTitle{
  font-weight: 900;
  letter-spacing: -.01em;
  color:#fff;
}

.subBody{
  padding: 2px 2px 110px; /* чтобы не пряталось за нижним баром */
}

.withdrawList{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.wCard{
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 12px;
}

.wTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.wSum{
  font-weight: 900;
  font-size: 16px;
  color:#fff;
}
.wMeta{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

.wStatus{
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}

.wStatus.done{
  border-color: rgba(48,209,88,.25);
  color: rgba(48,209,88,.95);
}
.wStatus.rejected{
  border-color: rgba(255,93,93,.25);
  color: rgba(255,93,93,.95);
}
.wStatus.pending{
  border-color: rgba(240,161,43,.25);
  color: rgba(240,161,43,.95);
}

.wGrid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.kv{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.kv:first-child{ border-top: 0; padding-top: 0; }
.kv .k{ color: rgba(255,255,255,.55); }
.kv .v{ color: rgba(255,255,255,.90); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 64%; }

.waAddress{
  margin-top: 8px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  word-break: break-all;
  font-size: 12.5px;
  line-height: 1.35;
}

.waRow{
  margin-top: 10px;
  display:flex;
  gap: 10px;
}

.btnGhost{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:#fff;
  font-weight: 900;
  cursor:pointer;
}
.btnGhost:active{ transform: translateY(1px); }
.txWrap{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
}

.txText{
  font-size: 12px;
  color: rgba(255,255,255,.82);
  word-break: break-all;
}

.txCopyBtn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.txCopyBtn:active{ transform: translateY(1px); }
/* ===========================
   Profile sub-pages (Nexa style)
   =========================== */

.subTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 4px 2px 0;
}
.backBtn{
  width:44px;height:44px;
  border-radius:14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:#fff;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.backBtn:active{ transform: translateY(1px); }
.subTitle{
  font-weight: 900;
  letter-spacing: .01em;
}
.subRight{ width:44px; height:44px; }

.subBody{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  margin-bottom: 90px; /* чтоб не под bottom nav */
}

.card{
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 14px;
}
.cardTitle{
  font-weight: 900;
  color: rgba(255,255,255,.95);
}
.muted{
  color: rgba(255,255,255,.65);
  font-size: 13px;
}

.in{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  padding: 12px 12px;
  color:#fff;
  outline:none;
}
.in::placeholder{ color: rgba(255,255,255,.45); }
.ta{ min-height: 110px; resize: vertical; }

.formGrid{ display:flex; flex-direction:column; gap: 10px; }
.formErr{ color: rgba(255,120,120,.95); font-size: 13px; min-height: 16px; }

.btnPrimary{
  width:100%;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  color:#fff;
  font-weight: 900;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.btnPrimary:disabled{ opacity:.6; cursor:not-allowed; }

.infoGrid{ display:flex; flex-direction:column; gap: 10px; }
.infoRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.infoLabel{ color: rgba(255,255,255,.65); font-size: 13px; }
.infoValue{ color: rgba(255,255,255,.95); font-weight: 800; font-size: 13px; }

.divider{ height:1px; background: rgba(255,255,255,.10); }

.faq{ display:flex; flex-direction:column; gap: 10px; }
.faqItem{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  overflow:hidden;
}
.faqQ{
  width:100%;
  padding: 12px 12px;
  background: transparent;
  border:0;
  color:#fff;
  text-align:left;
  font-weight: 900;
  cursor:pointer;
}
.faqA{
  display:none;
  padding: 0 12px 12px;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
  font-size: 13px;
}
.faqItem.open .faqA{ display:block; }

.tgLink{
  display:block;
  margin-top: 12px;
  text-decoration:none;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  color:#fff;
  font-weight: 900;
}

.reviewItem{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  margin-bottom: 10px;
}
.reviewTop{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:center;
}
.reviewNick{ font-weight: 900; }
.reviewDate{ color: rgba(255,255,255,.55); font-size: 12px; }
.reviewText{ margin-top: 8px; color: rgba(255,255,255,.78); line-height: 1.45; }

.communityGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.communityCard{
  display:block;
  text-decoration:none;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color:#fff;
}
.ccTitle{ font-weight: 900; }
.ccMeta{ margin-top: 6px; color: rgba(255,255,255,.65); font-size: 13px; }

.vipCard{ border: 1px solid rgba(255,80,80,.28); }
.vipBadge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,80,80,.35);
  background: rgba(255,60,60,.10);
  font-weight: 900;
}
.vipList .vipItem{ color: rgba(255,255,255,.80); margin-top: 6px; }
/* ===== Free Money (BONUS WHEEL) ===== */
.bonusWheelWrap{
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
}

.bonusWheel{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;

  /* ВАЖНО: старт конуса с ВЕРХА, чтобы стрелка сверху совпадала */
  background: conic-gradient(from -90deg, #333 0 45deg, #444 45deg 90deg, #333 90deg 135deg, #444 135deg 180deg, #333 180deg 225deg, #444 225deg 270deg, #333 270deg 315deg, #444 315deg 360deg);

  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  transform: rotate(0deg);
  transition: transform 3800ms cubic-bezier(.12,.8,.12,1);
}

.wheelPointer{
  position:absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  z-index: 10;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 18px solid rgba(255,255,255,.92);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
}
/* ===== BONUS SLOT (Free Money) ===== */
.bonusSlotWrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  padding: 10px 0 4px;
}

.bonusSlotViewport{
  position: relative;
  width: 240px;
  height: 92px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.slotCenterLine{
  position:absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.22);
  box-shadow: 0 0 18px rgba(255,255,255,.08);
  z-index: 5;
}

.bonusSlotTrack{
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(0px);
  transition: transform 2800ms cubic-bezier(.12,.85,.12,1);
  will-change: transform;
}

.slotItem{
  height: 92px;                 /* ВАЖНО: совпадает с высотой viewport */
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 0 14px;
  box-sizing: border-box;
  user-select:none;
}

.slotItem img{
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
}

.slotItem .slotLabel{
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  white-space: nowrap;
}

/* выделение суперпризов (если у приза стоит super:true в JS) */
.slotItem.superPrize .slotLabel{
  color:#fff;
  text-shadow: 0 0 14px rgba(255,60,60,.35), 0 2px 12px rgba(0,0,0,.35);
}
.slotItem.superPrize img{
  filter: drop-shadow(0 0 18px rgba(255,60,60,.35));
}

/* стрелки по бокам */
.slotArrow{
  width: 0;
  height: 0;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
  opacity: .95;
}
.slotArrowLeft{
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 18px solid rgba(255,255,255,.9);
}
.slotArrowRight{
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid rgba(255,255,255,.9);
}

/* 1 сегмент (контейнер), позиционируется JS-ом */
.wSeg{
  position: absolute;
  top: 46%;
  left: 50%;
  transform-origin: 0% 50%;
  z-index: 2;
  pointer-events: none;
}

/* Внутри сегмента: ТЕКСТ -> ИКОНКА (иконка в конце текста) */
.wSegInner{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* важное: стартуем из центра и идём наружу */
  transform: translateX(5px);
  white-space: nowrap;

  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.wSegInner img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

/* выделение суперпризов */
.wSeg.superPrize .wSegInner{
  color: #fff;
  text-shadow: 0 0 14px rgba(255,60,60,.35), 0 2px 12px rgba(0,0,0,.35);
}
.wSeg.superPrize .wSegInner img{
  filter: drop-shadow(0 0 18px rgba(255,60,60,.35));
}


.taskCard{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
}

.taskTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.taskTitle{
  font-weight: 900;
  color: rgba(255,255,255,.94);
}

.taskBadge{
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.90);
  white-space: nowrap;
}

.taskDesc{
  margin-top: 6px;
  color: rgba(255,255,255,.70);
  font-size: 12.5px;
  line-height: 1.35;
}

.taskMeta{
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

.pBar{
  margin-top: 8px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
}

.pFill{
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,.88);
  border-radius: 999px;
}

.taskBtn{
  margin-top: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  cursor:pointer;
}

.taskBtn:disabled{
  opacity: .55;
  cursor: default;
}
.botSellBtn{
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,70,70,.12);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  cursor: pointer;
}
.botSellBtn:active{ transform: translateY(1px); }
.shopCTA{
  display:block;
  margin: 14px 0 6px;
  padding: 14px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,140,0,.22), rgba(255,60,60,.18));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  text-decoration: none;
}

.shopCTATitle{
  font-weight: 900;
  color: rgba(255,255,255,.96);
  letter-spacing: .2px;
  font-size: 16px;
}

.shopCTASub{
  margin-top: 6px;
  color: rgba(255,255,255,.70);
  font-size: 12px;
  line-height: 1.35;
}
/* ===== Deposit page ===== */
.depQrWrap{
  display:flex;
  justify-content:center;
  align-items:center;
}
.depQr{
  width:220px;
  height:220px;
  border-radius:18px;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.depAddress{
  margin-top:10px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,161,43,0.18);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  word-break: break-all;
  line-height: 1.35;
}
.depRow{
  display:flex;
  gap:10px;
}
.depRow .btnGold,
.depRow .btnGhost{
  flex:1;
}
/* ===== Withdraw info block ===== */
.withdrawInfo{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.withdrawInfoTitle{
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
}

.withdrawInfoList{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.withdrawInfoList li{
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.withdrawInfoNote{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(240,161,43,0.08); /* лёгкий золотой акцент */
  border: 1px solid rgba(240,161,43,0.25);
  font-size: 12px;
  line-height: 1.4;
}
/* ===== Nexa modal (Telegram bind) ===== */
.nexaModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.nexaModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.nexaModalCard {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 24px));
  max-height: min(640px, calc(100vh - 24px));
  overflow: auto;
  border-radius: 18px;
  background: rgba(18,18,22,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  padding: 14px;
}

.nexaModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 10px;
}

.nexaModalTitle {
  font-weight: 700;
  font-size: 16px;
}

.nexaModalX {
  border: 0;
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.nexaModalBody {
  padding: 6px;
}

.tgCodeRow {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}

.tgCodePill {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  text-align: center;
  user-select: text;
}

.btnSmall {
  white-space: nowrap;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
}

.btnPrimary {
  display: block;
  text-align: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(67, 135, 255, .20);
  border: 1px solid rgba(67, 135, 255, .35);
  color: #fff;
  text-decoration: none;
}
/* ===== Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.modal.active {
  display: block;
}

.modalBg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
}

.modalCard {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  background: rgba(18,18,22,.95);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 16px;
}

.modalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.modalTitle {
  font-weight: 700;
  font-size: 16px;
}

.modalClose {
  background: rgba(255,255,255,.08);
  border: 0;
  color: #fff;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.modalBody {
  font-size: 14px;
  line-height: 1.6;
}

.modalBody p {
  margin-bottom: 10px;
}
.modalCard {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {

  .modalCard {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;

    transform: none;

    width: 100%;
    max-height: 92vh;

    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .modalHeader {
    position: sticky;
    top: 0;
    background: rgba(18,18,22,.96);
    padding: 12px 8px;
    z-index: 5;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .modalBody {
    padding-bottom: 24px;
    font-size: 15px;
  }

  .modalClose {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 600px) {
  .modalCard::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,.35);
    margin: 6px auto 10px;
  }
}
/* ===== Notifications ===== */
.bellHasUnread{
  position: relative;
}
.bellHasUnread::after{
  content:"";
  position:absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.55);
}

/* overlay */
.notifOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
}
.notifOverlay.hidden{ display:none; }

.notifSheet{
  width: min(520px, 100%);
  max-height: 82vh;
  background: rgba(20,20,22,0.92);
  border: 1px solid rgba(240,161,43,0.18);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.notifHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.notifTitle{
  font-weight: 800;
  letter-spacing: 0.2px;
}

.notifList{
  padding: 10px 10px 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.notifItem{
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 10px;
}
.notifItem.unread{
  border-color: rgba(240,161,43,0.22);
  box-shadow: 0 0 0 1px rgba(240,161,43,0.08) inset;
}
.notifItemTop{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.notifItemTitle{
  font-weight: 800;
  font-size: 14px;
}
.notifItemTime{
  opacity: 0.65;
  font-size: 12px;
  white-space: nowrap;
}
.notifItemBody{
  margin-top: 6px;
  opacity: 0.9;
  font-size: 13px;
  line-height: 1.35;
}

.notifFoot{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* mobile */
@media (max-width: 420px){
  .notifOverlay{ padding: 10px; }
  .notifSheet{ border-radius: 16px; max-height: 86vh; }
  .notifItem{ padding: 11px; }
}