@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #181a20;
  --bg-deep: #0b0e11;
  --bg-sidebar: #0b0e11;
  --surface: #1e2329;
  --surface-2: #2b3139;
  --line: #2b3139;
  --text: #eaecef;
  --muted: #848e9c;
  --accent: #fcd535;
  --accent-hover: #f0b90b;
  --green: #fcd535;
  --green-hover: #f0b90b;
  --gold: #f0b90b;
  --up: #0ecb81;
  --danger: #f6465d;
  --ink: #0b0e11;
  --radius: 8px;
  --header-h: 64px;
  --sidebar-w: 240px;
  --sidebar-mini: 60px;
  --bottom-h: 0px;
  --sec-gap: 20px;
  --sec-gap-sm: 14px;
  --app-vh: 100dvh;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body.shell {
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; }
img { max-width: 100%; display: block; }

.shell-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  height: var(--app-vh);
  width: 100%;
}
.shell-app.is-mini { grid-template-columns: var(--sidebar-mini) 1fr; }

.shell-sidebar {
  grid-row: 1 / span 2;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  z-index: 30;
}

.shell-brand {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.shell-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-deep);
}
.shell-logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shell-logo-text {
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
}

.shell-nav {
  overflow-y: auto;
  padding: 12px 10px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shell-nav::-webkit-scrollbar { width: 6px; }
.shell-nav::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }

.shell-nav-main { display: flex; flex-direction: column; gap: 2px; }
.shell-nav-div {
  height: 1px;
  background: var(--line);
  margin: 12px 8px;
}
.shell-nav-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shell-nav a,
.shell-nav-btn,
.shell-nav-group > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  list-style: none;
  position: relative;
}
.shell-nav-group > summary::-webkit-details-marker { display: none; }
.shell-nav a:hover,
.shell-nav-btn:hover,
.shell-nav-group > summary:hover { background: var(--surface); color: var(--text); }
.shell-nav a.is-active {
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
}
.shell-nav a.is-active::before { display: none; }
.shell-nav i {
  font-size: 22px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}
.shell-nav-caret {
  margin-left: auto;
  font-size: 14px;
  width: auto;
  opacity: 0.55;
  transition: transform 0.15s ease;
}
.shell-nav-group[open] > summary .shell-nav-caret { transform: rotate(180deg); }
.shell-nav-group { margin: 0; }
.shell-nav-group a { padding-left: 14px; font-weight: 600; font-size: 13px; }
.nav-dot {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.shell-header {
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 0 12px;
  border-bottom: 1px solid var(--line);
  z-index: 20;
}

.hd-icon {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  transition: color 0.15s;
}
.hd-icon i { font-size: 24px; line-height: 1; }
.hd-icon:hover { color: var(--text); }

.shell-icon-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.shell-icon-btn:hover { background: var(--surface-2); }

.shell-search {
  flex: 1;
  max-width: 280px;
  position: relative;
}
.shell-search input {
  width: 100%;
  height: 32px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  padding: 0 36px 0 34px;
  font-size: 13px;
  font-weight: 500;
  outline: none;
}
.shell-search input:hover { border-color: var(--line); }
.shell-search input:focus { border-color: var(--accent); }
.shell-search input::placeholder { color: var(--muted); }
.shell-search > i {
  position: absolute;
  left: 10px;
  top: 8px;
  font-size: 16px;
  color: var(--muted);
  pointer-events: none;
  line-height: 1;
}
.shell-search kbd {
  position: absolute;
  right: 6px;
  top: 5px;
  min-width: 20px;
  height: 22px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.shell-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hd-cash {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hd-menu { position: relative; }
.hd-asset {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.hd-asset:hover,
.hd-menu.is-open .hd-asset { background: var(--surface); }
.hd-asset > .ph-wallet { font-size: 18px; color: var(--accent); line-height: 1; }
.hd-amt {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hd-ccy {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1;
}
.hd-caret { font-size: 12px; color: var(--muted); line-height: 1; }

.hd-deposit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.hd-deposit:hover { background: var(--accent-hover); }

.hd-login {
  height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
}
.hd-login:hover { color: var(--accent); }

.hd-avatar {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  line-height: 1;
  overflow: hidden;
  padding: 0;
}
.hd-avatar img,
.hd-avatar .hd-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hd-avatar .hd-avatar-img { display: none; }
.hd-avatar .hd-avatar-init { display: grid; }
@media (max-width: 760px) {
  .hd-avatar .hd-avatar-img { display: block; }
  .hd-avatar .hd-avatar-init { display: none; }
}
body.is-tg .hd-avatar .hd-avatar-img { display: block; }
body.is-tg .hd-avatar .hd-avatar-init { display: none; }
.hd-avatar:hover,
.hd-menu.is-open .hd-avatar { box-shadow: 0 0 0 1px var(--accent); }
.hd-avatar-sm { width: 28px; height: 28px; font-size: 12px; cursor: default; }

.hd-drop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  z-index: 40;
}
.hd-menu.is-open > .hd-drop { display: block; }
@media (hover: hover) and (pointer: fine) {
  .hd-menu:hover > .hd-drop { display: block; }
}
.hd-drop-head {
  padding: 6px 6px 10px;
}
.hd-drop-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.hd-drop-sum {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hd-drop-sum em {
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.hd-drop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 2px 12px;
  border-top: 1px solid var(--line);
}
.hd-drop-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.hd-drop-action i { font-size: 16px; line-height: 1; }
.hd-drop-action-primary { background: var(--accent); color: var(--ink); }
.hd-drop-action-primary:hover { background: var(--accent-hover); }
.hd-drop-action-ghost { background: var(--bg); border: 1px solid var(--line); color: var(--text); }
.hd-drop-action-ghost:hover { border-color: var(--accent); color: var(--accent); }
.hd-drop-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 6px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
button.hd-drop-link {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.hd-drop-link i { font-size: 16px; color: var(--muted); }
.hd-drop-link:hover { background: var(--surface-2); }
.hd-drop-link .ph-caret-right { margin-left: auto; }
.hd-drop-userhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.hd-drop-userhead strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.hd-drop-userhead span:last-child {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.shell-btn {
  border: 0;
  border-radius: 4px;
  height: 32px;
  padding: 0 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease;
}
.shell-btn-green { background: var(--green); color: var(--ink); }
.shell-btn-green:hover { background: var(--green-hover); }
.shell-btn-blue { background: var(--accent); color: var(--ink); }
.shell-btn-blue:hover { background: var(--accent-hover); }
.shell-btn-ghost { background: var(--surface); color: var(--text); }
.shell-btn-ghost:hover { background: var(--surface-2); }

.shell-main {
  background: var(--bg);
  overflow: auto;
  padding: 18px 24px 88px;
}
.shell-main::-webkit-scrollbar { width: 8px; }
.shell-main::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }

/* ============ Live wins (RainBet-style cards) ============ */
.lwrb {
  /* margin: 0 0 12px; */
}
.lwrb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.lwrb-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.lwrb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.55);
  animation: lw-pulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes lw-pulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(14, 203, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 203, 129, 0); }
}
.lwrb-viewport {
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 0;
  mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%);
}
.lwrb-track {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-height: 196px;
}
.lwrb-card {
  width: 92px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.lwrb-art {
  position: relative;
  width: 100%;
  height: 124px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(43, 49, 57, 0.9), #0b0e11 80%);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lwrb-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lwrb-card:hover .lwrb-art {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.lwrb-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.lwrb-nickrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
}
.lwrb-rank { width: 18px; height: 18px; flex-shrink: 0; }
.lwrb-rank img { width: 100%; height: 100%; display: block; }
.lwrb-nick {
  min-width: 0;
  max-width: 56px;
  font-size: 12px;
  font-weight: 500;
  color: #7179a5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lwrb-nick.is-hidden {
  color: var(--muted);
  font-style: italic;
}
.lwrb-amt {
  font-size: 13px;
  font-weight: 500;
  color: #7dd934;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .lwrb { margin-bottom: 10px; }
  .lwrb-card { width: 84px; }
  .lwrb-art { height: 112px; }
}

.shell-btn-lg {
  height: 48px;
  padding: 0 22px;
  font-size: 15px;
  gap: 8px;
  border-radius: 10px;
}
.shell-btn-lg svg { width: 18px; height: 18px; }

/* ——— Hero (Binance-style) ——— */
.hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) 1.28fr;
  gap: 32px;
  align-items: center;
  margin-bottom: var(--sec-gap);
}
.hero-copy { min-width: 0; }
.hero-copy h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.hero-lead {
  margin-top: 12px;
  max-width: 44ch;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--muted);
}
.hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 22px;
}
.hero-cta .shell-btn-lg {
  height: 44px;
  padding: 0 22px;
  font-size: 15px;
  border-radius: 6px;
}
.hero-cta .shell-btn-lg:hover { background: var(--accent-hover); }
.hero-or {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.shell-btn-login {
  height: 44px;
  padding: 0 18px;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.shell-btn-login:hover {
  background: var(--surface);
  border-color: transparent;
}

.hero-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hero-tile {
  position: relative;
  display: block;
  height: 248px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-deep);
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-tile:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.hero-tile-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 16, 26, 0.88) 0%, rgba(7, 16, 26, 0.42) 46%, rgba(7, 16, 26, 0.08) 72%),
    linear-gradient(180deg, rgba(7, 16, 26, 0.12) 0%, rgba(7, 16, 26, 0.55) 100%);
}
.hero-tile-casino .hero-tile-media {
  background-image: url("/frontend/Shell/img/promo-welcome.jpg");
  background-position: 78% 48%;
}
.hero-tile-jp .hero-tile-media {
  background-image: url("/frontend/Shell/img/promo-jackpot.jpg");
  background-position: 82% 42%;
}
.hero-tile-bonus .hero-tile-media {
  background: var(--bngrad);
  background-position: 70% 40%;
}
.hero-tile-bonus .hero-tile-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.16) 0%, transparent 55%);
}
.hero-tile-bonus .hero-tile-go {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(11, 14, 17, 0.45);
  color: #fff;
}
.hero-tile-bonus .hero-tile-go i { font-size: 15px; line-height: 1; }
.hero-tile-bonus:hover .hero-tile-go { color: #fff; background: rgba(11, 14, 17, 0.65); }
.hero-tile-copy {
  position: relative;
  z-index: 2;
  max-width: 18ch;
  padding: 22px 20px 0;
}
.hero-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.hero-kicker-gold { color: var(--gold); }
.hero-tile-copy strong {
  display: block;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #fff;
}
.hero-jp-sum {
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.2vw, 28px);
}
.hero-jp-sum small {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0;
}
.hero-tile-copy p {
  margin-top: 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #d5dce8;
}

.hero-tile-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(11, 14, 17, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-tile-go {
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color 0.18s ease;
}
.hero-tile-go svg { width: 16px; height: 16px; }
.hero-tile:hover .hero-tile-go { color: var(--accent); }

/* ——— Rails ——— */
.rail {
  --rail-gap: 12px;
  --rail-card-w: 148px;
  margin-bottom: 16px;
}
.rail-track .game-card {
  flex: 0 0 var(--rail-card-w);
  max-width: var(--rail-card-w);
}
.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.rail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rail-ico {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(252, 213, 53, 0.12);
  color: var(--accent);
  flex-shrink: 0;
}
.rail-ico i { font-size: 13px; line-height: 1; }
.rail-ico-trending {
  background: rgba(255, 157, 0, 0.12);
  color: #ff9d00;
}
.rail-ico-new {
  background: rgba(14, 203, 129, 0.12);
  color: var(--up);
}
.rail-head h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.rail-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.rail-all {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.rail-all:hover { color: var(--text); }
.rail-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.rail-btn:hover { background: var(--surface); color: var(--text); }
.rail-btn svg { width: 16px; height: 16px; }
.rail-track {
  display: flex;
  gap: var(--rail-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 0 12px;
  margin: 0;
  scrollbar-width: none;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track .game-card {
  flex: 0 0 var(--rail-card-w);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.provider-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.provider-track::-webkit-scrollbar { display: none; }
.provider-tile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.provider-tile span { display: none; }
.provider-tile:hover { color: var(--text); border-color: var(--surface-2); background: var(--surface); }

.lobby-more { display: flex; justify-content: center; padding: 4px 0 8px; }

.all-games { margin-top: 26px; }
.grid-sentinel { height: 1px; }

.shell-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 14px;
}
.shell-section-head h2 { font-size: 20px; font-weight: 700; }
.shell-count { color: var(--muted); font-size: 13px; font-weight: 600; }

.shell-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 16px;
}
.shell-chip {
  white-space: nowrap;
  background: var(--surface);
  color: var(--muted);
  border-radius: 4px;
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}
.shell-chip:hover, .shell-chip.is-active { background: var(--surface-2); color: var(--text); }

.shell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px 12px;
  align-items: start;
}

.game-card { position: relative; }
.game-card-art {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(43, 49, 57, 0.9), #0b0e11 80%),
    repeating-linear-gradient(135deg, #1e2329 0 8px, #181a20 8px 16px);
  aspect-ratio: 3 / 4;
  transform: translateZ(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.game-card img { width: 100%; height: 100%; object-fit: cover; }
.game-card-name {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-card:hover .game-card-art,
.game-card:focus-within .game-card-art {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.game-card-art::after { display: none; }
.game-card:hover .game-card-name { color: var(--text); }
.game-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 14, 17, 0.66);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.game-card:hover .game-card-overlay,
.game-card:focus-within .game-card-overlay { opacity: 1; }
.game-card-overlay .shell-btn {
  height: 36px;
  padding: 0 18px 0 14px;
  font-size: 13px;
  gap: 8px;
  border-radius: 6px;
}
.game-card-overlay .shell-btn i { font-size: 15px; line-height: 1; }
.game-card.is-more { display: none; }

.game-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.game-label.is-new { background: var(--accent); }
.game-label.is-hot { background: #ff9d00; }

.shell-empty { color: var(--muted); padding: 48px 0; text-align: center; grid-column: 1 / -1; }

.shell-page { max-width: 880px; }
.shell-page h1 { font-size: 28px; margin-bottom: 18px; }
.shell-faq-item, .shell-bonus-card {
  background: var(--bg-deep);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 10px;
}
.shell-faq-item h2 { font-size: 16px; margin-bottom: 8px; }
.shell-faq-item p, .shell-page p { color: var(--muted); line-height: 1.55; font-size: 14px; }

/* ——— Wallet ——— */
.shell-wallet-balance {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 22px;
  color: var(--ink);
}
.shell-wallet-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
}
.shell-wallet-amount {
  font-size: 34px;
  font-weight: 800;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.shell-wallet-amount em { font-style: normal; font-size: 18px; opacity: 0.8; margin-left: 4px; }
.shell-wallet-refund {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  padding: 4px 8px;
}
.shell-wallet-card {
  background: var(--bg-deep);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.shell-wallet-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.shell-wallet-row:last-child { margin-bottom: 0; }
.shell-field-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  background: var(--surface);
  border: 0;
  border-radius: 8px;
  color: var(--text);
  padding: 0 12px;
  outline: none;
  font-size: 14px;
}
.shell-wallet-hint { font-size: 13px; color: var(--up); margin-top: 8px; }
.shell-wallet-hint.is-error { color: var(--danger); }
.shell-wallet-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.shell-wallet-table th {
  text-align: left;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
.shell-wallet-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.shell-wallet-table tr:last-child td { border-bottom: 0; }
.shell-wallet-form { display: flex; flex-direction: column; }
.shell-wallet-form .shell-btn { width: 100%; margin-top: 8px; }
.nyx-address-label { font-size: 12px; color: var(--muted); margin-top: 6px; }
.nyx-address-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--surface);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 4px;
  word-break: break-all;
  color: var(--text);
}
.nyx-timer {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--up);
  font-variant-numeric: tabular-nums;
}

/* ——— Crypto deposit widget (Binance-style) ——— */
.nyx-card { padding-bottom: 18px; }
.nyx-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 8px;
}
.nyx-label .nyx-dim { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.8; }
.nyx-coins {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nyx-coin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nyx-coin:hover { border-color: var(--accent); }
.nyx-coin.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.nyx-coin-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c, var(--accent));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nyx-nets { display: flex; flex-wrap: wrap; gap: 8px; }
.nyx-net {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s;
}
.nyx-net:hover { border-color: var(--accent); }
.nyx-net.active { border-color: var(--accent); color: var(--accent); }
.nyx-warn {
  margin-top: 8px;
  font-size: 12px;
  color: var(--danger);
}
.nyx-eq {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--up);
  font-variant-numeric: tabular-nums;
  min-height: 18px;
}
.nyx-submit { width: 100%; margin-top: 10px; }
.nyx-amount-line {
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.nyx-half { flex: 1; }
.nyx-mini-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 0 5px;
}
.nyx-status {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}
.nyx-status-pending { background: rgba(240, 185, 11, 0.15); color: #F0B90B; }
.nyx-status-paid { background: rgba(38, 161, 123, 0.15); color: #26A17B; }
.nyx-status-expired, .nyx-status-cancelled { background: rgba(230, 57, 70, 0.12); color: var(--danger); }

.shell-auth {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
}
.shell-auth-card {
  width: min(420px, 100%);
  background: var(--bg-deep);
  border-radius: 12px;
  padding: 28px;
}
.shell-auth-card h1 { font-size: 22px; margin-bottom: 18px; }
.shell-field { margin-bottom: 12px; }
.shell-field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.shell-field input {
  width: 100%;
  height: 42px;
  background: var(--surface);
  border: 0;
  border-radius: 8px;
  color: var(--text);
  padding: 0 12px;
  outline: none;
}
.shell-auth-card .shell-btn { width: 100%; margin-top: 8px; }
.shell-auth-alt { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }
.shell-auth-alt a { color: var(--green); font-weight: 700; }

.shell-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 16px;
}
.shell-modal.is-open { display: flex; }

.shell-bottom { display: none; }

.shell-app.is-mini .shell-logo-text,
.shell-app.is-mini .shell-nav a span,
.shell-app.is-mini .shell-nav-btn span,
.shell-app.is-mini .shell-nav-group summary span,
.shell-app.is-mini .shell-nav-caret { display: none; }
.shell-app.is-mini .shell-nav-div { margin: 8px 4px; }
.shell-app.is-mini .shell-brand,
.shell-app.is-mini .shell-nav a,
.shell-app.is-mini .shell-nav-btn,
.shell-app.is-mini .shell-nav-group > summary { justify-content: center; padding-left: 0; padding-right: 0; }
.shell-app.is-mini .shell-nav a.is-active::before { display: none; }

.shell-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 90;
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 8px;
  max-width: 320px;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-tile, .game-card-art, .live-track, .hd-drop, .shell-bottom a, .shell-bottom button { animation: none !important; transition: none !important; }
}

@media (max-width: 1280px) {
}
@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hero-copy h1 { font-size: 36px; }
  .hero-lead { max-width: 46ch; }
}
@media (max-width: 860px) {
  .hero-tiles { grid-template-columns: 1fr; }
  .hero-tile { height: 210px; }
  .hero-tile-copy { max-width: 22ch; }
}
@media (max-width: 760px) {
  :root {
    --bottom-h: 60px;
  }
  .rail { --rail-card-w: 128px; }
  .shell-app, .shell-app.is-mini {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) 1fr;
  }
  .shell-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 280px);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    grid-row: auto;
  }
  .shell-sidebar.is-open { transform: none; }
  .shell-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 25;
  }
  .shell-backdrop.is-on { display: block; }
  .shell-search { max-width: none; flex: 1 1 80px; min-width: 0; }
  .shell-search kbd { display: none; }
  .hd-ccy, .hd-caret { display: none; }
  .hd-icon { width: 44px; height: 44px; }
  .hd-cash .hd-deposit { display: none; }
  .hd-icon[aria-label="Support"] { display: none; }
  .hero-play-cta { display: none; }
  .hero.is-user .hero-cta { display: none; }
  .shell-header { padding: 0 10px 0 6px; gap: 6px; }
  .live-strip { display: none; }
  .shell-main { padding: 14px 12px calc(var(--bottom-h) + env(safe-area-inset-bottom, 0px) + 14px); }
  .shell-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .hero { margin-bottom: var(--sec-gap-sm); }
  .rail { margin-bottom: 12px; }
  .rail-track { padding: 6px 0 8px; }
  .lobby-more { padding: 2px 0 6px; }
  .all-games { margin-top: 18px; }

  /* Нижняя навигация — crypto-стиль с центральным кругом */
  .shell-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background: rgba(11, 14, 17, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
    padding: 0 8px calc(3px + env(safe-area-inset-bottom, 0px));
    min-height: calc(50px + env(safe-area-inset-bottom, 0px));
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    will-change: transform, opacity;
  }
  body.is-typing .shell-bottom,
  body.is-modal-open .shell-bottom {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  .shell-bottom-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 2px 2px 2px;
    color: var(--muted);
    font-family: inherit;
  }
  .shell-bottom-item .shell-bottom-ic { width: 24px; height: 22px; display: flex; align-items: center; justify-content: center; }
  .shell-bottom-item .shell-bottom-ic i { font-size: 20px; line-height: 1; }
  .shell-bottom-item.is-active { color: var(--accent); }
  .shell-bottom-item.is-active .shell-bottom-ic,
  .shell-bottom-item.is-active .shell-bottom-ic i,
  .shell-bottom-item.is-active .shell-bottom-lb { color: var(--accent); }
  .shell-bottom-item.is-active .shell-bottom-ic i { text-shadow: 0 0 10px rgba(252, 213, 53, 0.35); }

  .shell-bottom-fab {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    margin-top: -19px;
    color: var(--muted);
    font-family: inherit;
  }
  .shell-bottom-fab-ic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe06b 0%, var(--accent) 55%, #d8a50c 100%);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--bg-deep);
    box-shadow: 0 5px 18px rgba(252, 213, 53, 0.35);
    transition: box-shadow 0.25s ease-out;
  }
  .shell-bottom-fab-ic i { font-size: 19px; line-height: 1; }
  .shell-bottom-fab.is-active .shell-bottom-fab-ic { animation: fab-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  .shell-bottom-lb {
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
    font-family: inherit;
    letter-spacing: 0.2px;
  }
  @keyframes fab-pulse {
    0%, 100% { box-shadow: 0 5px 18px rgba(252, 213, 53, 0.35); }
    50% { box-shadow: 0 5px 26px rgba(252, 213, 53, 0.6); }
  }
}

/* =========================================================
   WALLET (Binance-style)
   ========================================================= */
.wallet { max-width: 760px; margin: 0 auto; }

/* — Hero balance — */
.wallet-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(252,213,53,0.16) 0%, rgba(240,185,11,0.06) 34%, rgba(14,203,129,0.05) 68%, rgba(246,70,93,0.05) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px 20px;
  margin-bottom: 16px;
}
.wallet-hero-glow {
  position: absolute;
  top: -70px; right: -50px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252,213,53,0.20) 0%, transparent 70%);
  pointer-events: none;
}
.wallet-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.wallet-hero-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.wallet-hero-icons {
  display: inline-flex;
  gap: 2px;
}
.wallet-eye {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 7px;
  border-radius: 8px;
  display: inline-flex;
  transition: color 0.15s, background 0.15s;
}
.wallet-eye:hover { color: var(--text); background: rgba(43,49,57,0.5); }
.wallet-hero-amount {
  font-size: 40px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff;
}
.wallet-hero-amount #wallet-amount-val {
  text-shadow: 0 0 22px rgba(252,213,53,0.35), 0 1px 0 rgba(0,0,0,0.4);
}
.wallet-hero-ccy { font-size: 24px; font-weight: 800; color: var(--accent); margin-left: 6px; }
.wallet-hero-refund {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--up);
}
.wallet-hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.wallet-btn {
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: 0;
  padding: 11px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.12s, background 0.15s, border-color 0.15s, color 0.15s;
}
.wallet-btn:active { transform: scale(0.97); }
.wallet-btn-primary {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 4px 18px rgba(252,213,53,0.25);
}
.wallet-btn-primary:hover { background: var(--accent-hover); }
.wallet-btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--surface-2);
}
.wallet-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* — Tabs — */
.wallet-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 16px;
}
.wallet-tab {
  flex: 1;
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.wallet-tab:hover { color: var(--text); }
.wallet-tab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* — Panel / labels — */
.wallet-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
}
.wallet-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 14px 0 10px;
}
.wallet-label:first-child { margin-top: 0; }
.wallet-label-dim { color: var(--muted); font-weight: 600; }

/* — Coin cards grid — */
.wallet-coins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.wallet-coins.collapsed { grid-template-columns: 1fr 46px; }
.wallet-coins.collapsed .wallet-coin { display: none; }
.wallet-coins.collapsed .wallet-coin.active { display: flex; }
.wallet-coins-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  cursor: pointer;
  min-height: 46px;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
}
.wallet-coins-toggle:hover { border-color: var(--accent); color: var(--accent); }
.wallet-coins-toggle:active { transform: scale(0.97); }
.wallet-coin {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  text-align: left;
}
.wallet-coin:hover { border-color: var(--surface-2); transform: translateY(-1px); }
.wallet-coin.active {
  border-color: var(--accent);
  background: rgba(252,213,53,0.05);
  box-shadow: 0 0 0 3px rgba(252,213,53,0.12);
}
.wallet-coin-ic {
  position: relative;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: #1e2329;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wallet-coin-ic img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 2px;
}
.wallet-coin-fallback {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}
.wallet-coin-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wallet-coin-name { font-size: 14px; font-weight: 800; color: var(--text); }
.wallet-coin-price { font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.wallet-coin-check {
  margin-left: auto;
  display: none;
  color: var(--accent);
}
.wallet-coin.active .wallet-coin-check { display: inline-flex; }

/* — Networks — */
.wallet-nets { display: flex; flex-wrap: wrap; gap: 8px; }
.wallet-net {
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.wallet-net:hover { border-color: var(--surface-2); color: var(--text); }
.wallet-net.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(252,213,53,0.08);
}

/* — Amount — */
.wallet-amount-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 16px;
  min-height: 54px;
  transition: border-color 0.15s;
}
.wallet-amount-box:focus-within { border-color: var(--accent); }
.wallet-amount-usd { font-size: 18px; font-weight: 800; color: var(--muted); }
.wallet-amount-box input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0;
  min-width: 0;
  line-height: 1.2;
}
.wallet-amount-box input::placeholder { color: #3a424d; }

.wallet-amt-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}
.wallet-amt-head .wallet-label { margin-top: 0; }
.wallet-avl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding-bottom: 2px;
}
.wallet-avl strong { color: var(--text); font-variant-numeric: tabular-nums; }
.wallet-max {
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  border: 0;
  background: rgba(252,213,53,0.14);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}
.wallet-max:hover { background: rgba(252,213,53,0.24); }
.wallet-max:active { transform: scale(0.96); }

.wallet-receive {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.wallet-receive-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wallet-receive-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.wallet-receive-rate { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.wallet-netinfo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.wallet-netinfo-limit { font-variant-numeric: tabular-nums; }
.wallet-limits {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.wallet-warn { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); font-weight: 500; }
.wallet-warn-strong { color: var(--danger); font-weight: 600; }

.wallet-addr2 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 6px 4px 10px;
  min-height: 54px;
  transition: border-color 0.15s;
}
.wallet-addr2:focus-within { border-color: var(--accent); }
.wallet-addr2-ic {
  position: relative;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wallet-addr2-ic img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 3px;
}
.wallet-addr2-fallback {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.wallet-addr2-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 10px 0;
}
.wallet-addr2-input::placeholder { color: #3a424d; }
.wallet-addr2-paste {
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.wallet-addr2-paste:hover { border-color: var(--accent); color: var(--accent); }
.wallet-addr2-hint {
  margin-top: 8px;
  min-height: 16px;
  font-size: 12px;
  font-weight: 600;
}
.wallet-addr2-hint.ok { color: var(--up); }
.wallet-addr2-hint.bad { color: var(--danger); }

.wallet-msg {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.wallet-msg-error { color: var(--danger); }

.wallet-cta {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.wallet-cta:hover { background: var(--accent-hover); }
.wallet-cta:active { transform: scale(0.98); }
.wallet-cta:disabled { opacity: 0.5; cursor: not-allowed; }
.wallet-cta-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--surface-2);
}
.wallet-cta-ghost:hover { background: rgba(43,49,57,0.5); border-color: var(--accent); color: var(--accent); }

/* — QR panel (Web3 style) — */
.wqr {
  animation: walletIn 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@keyframes walletIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.wqr-head {
  text-align: center;
  margin-bottom: 16px;
}
.wqr-amount {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.15;
}
.wqr-usd {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.wqr-qr {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
  margin-bottom: 18px;
}
.wqr-qr::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(252,213,53,0.28), rgba(252,213,53,0) 40%, rgba(14,203,129,0.22) 90%);
  opacity: 0.5;
  pointer-events: none;
}
.wqr-qr img {
  position: relative;
  z-index: 1;
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 12px;
}
.wqr-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  margin-bottom: 8px;
}
.wqr-addr {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 10px 10px 14px;
  transition: border-color 0.15s;
}
.wqr-addr:focus-within, .wqr-addr:hover { border-color: var(--surface-2); }
.wqr-addr-val {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--text);
  word-break: break-all;
  line-height: 1.5;
  min-width: 0;
}
.wqr-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.wqr-copy:hover { border-color: var(--accent); color: var(--accent); }
.wqr-copy.copied { border-color: var(--up); color: var(--up); background: rgba(14,203,129,0.1); }
.wqr-steps {
  width: 100%;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.wqr-step {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wqr-step-ic {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(252,213,53,0.1);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wqr-step-txt {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}
.wqr-foot {
  width: 100%;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wqr-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.wqr-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: wqrPulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(252,213,53,0.4);
}
@keyframes wqrPulse {
  0% { box-shadow: 0 0 0 0 rgba(252,213,53,0.4); }
  70% { box-shadow: 0 0 0 7px rgba(252,213,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(252,213,53,0); }
}
.wqr-status.done { color: var(--up); }
.wqr-status.done .wqr-status-dot {
  background: var(--up);
  animation: none;
  box-shadow: 0 0 0 3px rgba(14,203,129,0.18);
}
.wqr-status.error { color: var(--danger); }
.wqr-status.error .wqr-status-dot {
  background: var(--danger);
  animation: none;
  box-shadow: 0 0 0 3px rgba(246,70,93,0.16);
}
.wqr-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.wqr-timer svg { color: var(--accent); }
.wqr-done {
  width: 100%;
  margin-top: 14px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.wqr-done:hover { border-color: var(--accent); color: var(--accent); background: rgba(43,49,57,0.5); }
.wqr-done:active { transform: scale(0.98); }

/* — Invite Friends — */
.wallet-invite {
  position: relative;
  margin-bottom: 14px;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(252,213,53,0.07) 0%, rgba(20,22,27,0.4) 38%),
    var(--surface);
  border: 1px solid rgba(252,213,53,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(11,14,17,0.2);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wallet-invite::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(252,213,53,0.55), transparent);
  pointer-events: none;
}
.wallet-invite:hover {
  border-color: rgba(252,213,53,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 22px rgba(252,213,53,0.08);
}
.wallet-invite-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wallet-invite-ic {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(252,213,53,0.2), rgba(240,185,11,0.06));
  color: var(--accent);
  border: 1px solid rgba(252,213,53,0.22);
}
.wallet-invite-ic svg { width: 19px; height: 19px; }
.wallet-invite-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wallet-invite-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.wallet-invite-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.wallet-invite-sub b {
  color: var(--accent);
  font-weight: 800;
}
.wallet-invite-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--up);
  background: rgba(14,203,129,0.12);
  border: 1px solid rgba(14,203,129,0.2);
  border-radius: 999px;
  padding: 4px 10px;
  margin-left: auto;
  white-space: nowrap;
}
.wallet-invite-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wallet-invite-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wallet-invite-input:focus {
  border-color: rgba(252,213,53,0.5);
  box-shadow: 0 0 0 3px rgba(252,213,53,0.12);
}
.wallet-invite-copy {
  flex-shrink: 0;
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #fcd535, #f0b90b);
  color: var(--ink);
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12.5px;
  padding: 0 16px;
  box-shadow: 0 4px 14px rgba(240,185,11,0.22);
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.wallet-invite-copy:hover { filter: brightness(1.07); box-shadow: 0 6px 18px rgba(240,185,11,0.32); }
.wallet-invite-copy:active { transform: scale(0.97); }
.wallet-invite-copy.copied {
  background: linear-gradient(135deg, #0ecb81, #0a9f66);
  color: #fff;
  box-shadow: 0 4px 14px rgba(14,203,129,0.25);
}
/* Share в Telegram WebApp: скрыта вне TG, в TG заменяет input+copy */
.wallet-invite-share {
  display: none;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, #fcd535, #f0b90b);
  color: var(--ink);
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(240,185,11,0.22);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.wallet-invite-share:hover { filter: brightness(1.07); box-shadow: 0 6px 18px rgba(240,185,11,0.32); }
.wallet-invite-share:active { transform: scale(0.97); }
body.is-tg .wallet-invite-row { display: none; }
body.is-tg .wallet-invite-share { display: inline-flex; }
@media (max-width: 560px) {
  .wallet-invite-row { flex-direction: column; align-items: stretch; }
  .wallet-invite-copy { justify-content: center; }
}

/* — Promo Code — */
.wallet-promo {
  position: relative;
  margin-bottom: 14px;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(14,203,129,0.07) 0%, rgba(20,22,27,0.4) 38%),
    var(--surface);
  border: 1px solid rgba(14,203,129,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(11,14,17,0.2);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wallet-promo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14,203,129,0.5), transparent);
  pointer-events: none;
}
.wallet-promo:hover {
  border-color: rgba(14,203,129,0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 22px rgba(14,203,129,0.08);
}
.wallet-promo-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wallet-promo-ic {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(14,203,129,0.2), rgba(14,203,129,0.05));
  color: var(--up);
  border: 1px solid rgba(14,203,129,0.22);
}
.wallet-promo-ic svg { width: 19px; height: 19px; }
.wallet-promo-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wallet-promo-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.wallet-promo-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.wallet-promo-btn {
  flex-shrink: 0;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0ecb81, #0a9f66);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12.5px;
  padding: 0 16px;
  margin-left: auto;
  box-shadow: 0 4px 14px rgba(14,203,129,0.22);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.wallet-promo-btn:hover { filter: brightness(1.07); box-shadow: 0 6px 18px rgba(14,203,129,0.32); }
.wallet-promo-btn:active { transform: scale(0.97); }
/* Поле ввода раскрывается по клику на Activate */
.wallet-promo-row {
  display: none;
  align-items: center;
  gap: 10px;
  animation: walletPromoIn 0.18s ease;
}
@keyframes walletPromoIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.wallet-promo.is-open .wallet-promo-row { display: flex; }
.wallet-promo-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wallet-promo-input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 600; color: #5a6472; }
.wallet-promo-input:focus {
  border-color: rgba(14,203,129,0.5);
  box-shadow: 0 0 0 3px rgba(14,203,129,0.12);
}
.wallet-promo-apply {
  flex-shrink: 0;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0ecb81, #0a9f66);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12.5px;
  padding: 0 18px;
  box-shadow: 0 4px 14px rgba(14,203,129,0.22);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.wallet-promo-apply:hover { filter: brightness(1.07); box-shadow: 0 6px 18px rgba(14,203,129,0.32); }
.wallet-promo-apply:active { transform: scale(0.97); }
.wallet-promo-apply:disabled { opacity: 0.55; pointer-events: none; }
.wallet-promo-msg {
  font-size: 12px;
  font-weight: 600;
  padding: 0 2px;
  display: none;
}
.wallet-promo-msg-ok { color: var(--up); display: block; }
.wallet-promo-msg-err { color: #ff5d5d; display: block; }
@media (max-width: 560px) {
  .wallet-promo-row { flex-direction: column; align-items: stretch; }
  .wallet-promo-apply { justify-content: center; }
}

/* — History (on page) — */
.wallet-history-section { margin-bottom: 14px; }
.wallet-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}
.wallet-history-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.wallet-history-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
}
.wallet-history-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2px 14px;
  overflow: hidden;
}

.wallet-history { display: flex; flex-direction: column; }
.wallet-hrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
}
.wallet-hrow + .wallet-hrow { border-top: 1px solid rgba(43,49,57,0.55); }
.wallet-hrow-ic {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #1e2329;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wallet-hrow-ic img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.wallet-hrow-fallback {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.wallet-hrow-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
}
.wallet-hrow-main {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wallet-hrow-net {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}
.wallet-hrow-sub { font-size: 11px; color: var(--muted); }
.wallet-hrow-amt {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wallet-hrow-amt em { font-style: normal; color: var(--muted); font-weight: 700; font-size: 11px; margin-left: 3px; }
.wallet-hrow-meta {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.wallet-hrow-usd {
  font-size: 12px;
  font-weight: 800;
  color: var(--up);
  font-variant-numeric: tabular-nums;
}
.wallet-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 6px;
}
.wallet-badge-paid { background: rgba(14,203,129,0.14); color: var(--up); }
.wallet-badge-pending { background: rgba(252,213,53,0.14); color: var(--accent); }
.wallet-badge-expired, .wallet-badge-cancelled { background: rgba(246,70,93,0.12); color: var(--danger); }

.wallet-empty { text-align: center; padding: 30px 12px; }
.wallet-empty-ic {
  width: 56px; height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.wallet-empty-title { font-size: 14px; font-weight: 800; color: var(--text); }
.wallet-empty-sub { margin-top: 3px; font-size: 12px; color: var(--muted); }

/* — Sections / forms — */
.wallet-section { margin-bottom: 16px; }
.wallet-card-stack {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wallet-rowform {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wallet-static { justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text); }
.wallet-pin-code { font-family: ui-monospace, monospace; font-weight: 800; color: var(--accent); }
.wallet-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.15s;
}
.wallet-input:focus { border-color: var(--accent); }
.wallet-field { display: flex; flex-direction: column; gap: 6px; }
.wallet-field label { font-size: 12px; font-weight: 700; color: var(--muted); }

@media (max-width: 640px) {
  .wallet-hero { padding: 18px 16px; }
  .wallet-hero-amount { font-size: 36px; }
  .wallet-hero-actions { flex-direction: row; }
  .wallet-btn { flex: 1; text-align: center; }
  .wallet-coins { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wallet-coin { padding: 10px; }
  .wallet-coin-ic { width: 36px; height: 36px; min-width: 36px; font-size: 14px; }
  .wallet-coin-fallback { font-size: 14px; }
  .wallet-qr img { width: 160px; height: 160px; }
  .wqr-amount { font-size: 22px; }
  .wqr-foot { flex-direction: column; align-items: stretch; }
  .wqr-timer { justify-content: center; }
  .wallet-amt-head { align-items: center; }
}

/* =========================================================
   WALLET MODALS (Binance-style)
   ========================================================= */
.wallet-sub {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
body.wallet-lock { overflow: hidden; }

.wallet-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 10, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.wallet-modal-overlay.open {
  display: flex;
  animation: walletFade 0.18s ease;
}
@keyframes walletFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.wallet-modal {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.55);
  animation: walletPop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.wallet-modal-wide { max-width: 500px; }
@keyframes walletPop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.wallet-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.wallet-modal-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.wallet-modal-close {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.wallet-modal-close:hover { color: var(--text); background: rgba(43,49,57,0.6); }
.wallet-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (max-width: 480px) {
  .wallet-modal-overlay { padding: 12px; align-items: flex-end; }
  .wallet-modal {
    max-height: 92vh;
    border-radius: 20px 20px 16px 16px;
  }
}

/* =========================================================
   GAME PLAY (windowed mode)
   ========================================================= */
.shell-main-game {
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.shell-main-game .game-play {
  flex: 0 0 auto;
  min-height: 0;
}
.shell-main-game .shell-footer { margin: 0; flex-shrink: 0; }

.game-play {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-deep);
}
.game-play-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.3) brightness(0.6);
  transform: scale(1.15);
  opacity: 0.55;
  pointer-events: none;
}
.game-play-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 8, 10, 0.72) 0%, rgba(6, 8, 10, 0.35) 40%, rgba(6, 8, 10, 0.85) 100%),
    radial-gradient(120% 90% at 50% 10%, rgba(6, 8, 10, 0) 0%, rgba(6, 8, 10, 0.7) 100%);
}

/* Top bar is desktop-free; mobile browsers keep it, Telegram WebApp hides it (native back button) */

.game-bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  flex-shrink: 0;
  padding: 0 16px;
  background: rgba(9, 12, 15, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.game-bar-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 8px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.game-bar-back:hover { color: var(--text); background: var(--surface); }
.game-bar-back i { font-size: 16px; }

.game-bar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
}
.game-bar-title img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}
.game-bar-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-bar-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(252, 213, 53, 0.4);
  border-radius: 6px;
  padding: 2px 6px;
}

.game-bar-actions { display: flex; align-items: center; gap: 6px; }
.game-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.game-bar-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(252, 213, 53, 0.06); }
.game-bar-btn.is-on { border-color: var(--accent); color: var(--accent); }
.game-bar-btn i { font-size: 15px; }

.game-stage-wrap {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 24px 20px;
  overflow-y: auto;
}
.game-left {
  width: 100%;
  max-width: min(100%, calc((var(--app-vh) - var(--header-h) - 190px) * 16 / 9));
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
}
.game-stage {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.game-stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ================= Stake-style side panel ================= */
.game-play-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}
.game-play.side-hidden .game-play-body { display: block; }
.game-play.side-hidden .game-side { display: none; }

.game-side {
  flex: 0 0 360px;
  width: 360px;
  min-height: 0;
  overflow: hidden;
  background: rgba(9, 12, 15, 0.78);
  border-left: 1px solid var(--line);
  padding: 16px 16px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.game-side-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0 14px;
}
.game-side-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-side-top-actions { display: flex; align-items: center; gap: 6px; }
.game-side-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.game-side-icon:hover { color: var(--accent); border-color: var(--accent); background: rgba(252, 213, 53, 0.06); }
.game-side-icon.is-on { border-color: var(--accent); color: var(--accent); }

/* ================= Game banner (заставка) ================= */
/* ================= Game insights (Stake-style, under the game) ================= */
.game-insights {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 24, 30, 0.92), rgba(12, 15, 19, 0.92));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.gi-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
}
.gi-logo {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.gi-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gi-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.gi-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gi-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.gi-provider { color: var(--accent); font-weight: 700; }
.gi-live { display: inline-flex; align-items: center; gap: 6px; color: var(--up); font-weight: 700; }
.gi-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
  animation: gsPulse 1.8s ease-out infinite;
}
@keyframes gsPulse {
  0% { box-shadow: 0 0 0 0 rgba(30, 192, 100, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(30, 192, 100, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 192, 100, 0); }
}
.gi-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.gi-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gi-meta-item .ph-bookmark-simple { color: var(--accent); font-size: 13px; }
.gi-actions { display: flex; gap: 8px; flex-shrink: 0; }
.gi-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.gi-btn:hover { border-color: var(--accent); color: var(--accent); }
.gi-btn.is-active {
  border-color: transparent;
  background: linear-gradient(180deg, #fcd535 0%, #f0b90b 100%);
  color: #1c1303;
}
.gi-btn i { font-size: 16px; }
.gi-btn-save {
  padding: 0 14px;
}
.gi-btn-save .ph-bookmark-simple { color: var(--accent); }
.gi-btn-save.is-saved {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(252, 213, 53, 0.08);
}
.gi-btn-play { padding: 0 22px; }
.gi-btn-play.is-active { border-color: transparent; }
.gi-btn-play:not(.is-active) { background: linear-gradient(180deg, rgba(252, 213, 53, 0.14), rgba(240, 185, 11, 0.1)); border-color: rgba(252, 213, 53, 0.35); color: var(--accent); }

.game-side-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}
.game-side-btn:hover { border-color: var(--accent); color: var(--accent); }
.game-side-btn.is-active {
  border-color: transparent;
  background: linear-gradient(180deg, #fcd535 0%, #f0b90b 100%);
  color: #1c1303;
}

.game-side-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  overflow: hidden;
  align-content: flex-start;
}
.gs-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 13px;
  background: var(--bg-deep);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.gs-card:hover { background: var(--surface); transform: translateY(-1px); }
.gs-card-ic {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
}
.gs-card-ic img { width: 100%; height: 100%; object-fit: cover; }
.gs-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.gs-card-name {
  max-width: 100%;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-card-prov {
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-card-go {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 14px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.gs-card:hover .gs-card-go { color: #1c1303; background: linear-gradient(180deg, #fcd535 0%, #f0b90b 100%); border-color: transparent; }

.game-side-floatbar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 8px;
}
.game-play.side-hidden .game-side-floatbar { display: flex; }
.game-side-float {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(9, 12, 15, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.game-side-float:hover { color: var(--accent); border-color: var(--accent); background: rgba(252, 213, 53, 0.06); }
.game-side-float.is-on { border-color: var(--accent); color: var(--accent); }
.game-side-float-icon {
  width: 38px;
  padding: 0;
  justify-content: center;
  font-size: 15px;
}

.game-stage:fullscreen,
.game-stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
.game-stage.is-fs .game-fs-exit { display: inline-flex; }
.game-fs-exit {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  align-items: center;
  gap: 8px;
  z-index: 60;
  background: rgba(11, 14, 17, 0.92);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.game-fs-exit button, .game-fs-exit a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.game-fs-exit button:hover, .game-fs-exit a:hover { color: var(--accent); }
.game-fs-exit i { font-size: 15px; }

@media (max-width: 760px) {
  .shell-main-game { display: block; }
  .game-play { height: calc(var(--app-vh) - var(--header-h) - var(--bottom-h)); min-height: 0; }
  .game-bar { height: 48px; padding: 0 10px; }
  .game-bar-btn { padding: 0 10px; }
  .game-bar-btn-txt { display: none; }
  .game-bar-back span { display: none; }
  .game-bar-back { padding: 0 8px; }
  .game-side-float, .game-side-floatbar { display: none !important; }
  .game-play-body { flex: 1 1 auto; display: flex; flex-direction: column; }
  .game-side { display: none; }
  .game-stage-wrap { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; overflow: hidden; }
  .game-left { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .game-insights { display: none; }
  .game-stage {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
}

@media (min-width: 761px) {
  .game-bar { display: none; }
}
body.is-tg .game-bar { display: none; }
body.is-tg [data-fs-btn] { display: none !important; }

/* ================= Footer (Stake-style) ================= */
.shell-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: rgba(9, 12, 15, 0.96);
  padding: 44px 0 28px;
  margin: 32px -24px -88px;
}
.shell-footer-inner {
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
}
.shell-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}
.shell-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.shell-footer-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.shell-footer-brand span {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  background: linear-gradient(180deg, #fcd535 0%, #f0b90b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.shell-footer-about {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 300px;
  margin-bottom: 16px;
}
.shell-footer-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shell-footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.15s;
}
.shell-footer-social a:hover { color: var(--accent); border-color: var(--accent); background: rgba(252, 213, 53, 0.06); }
.shell-footer-title {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.shell-footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.shell-footer-col a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  opacity: 0.82;
  transition: color 0.15s, opacity 0.15s;
}
.shell-footer-col a:hover { color: var(--accent); opacity: 1; }
.shell-footer-pay {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.shell-footer-pay-title {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.shell-footer-pay-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.shell-footer-pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.shell-footer-pay-badge i { color: var(--accent); font-size: 14px; }
.shell-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--faint);
}
.shell-footer-legal { color: var(--faint); }

@media (max-width: 900px) {
  .shell-footer-grid { grid-template-columns: 1fr 1fr; }
  .shell-footer-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .shell-footer { padding: 32px 0 96px; }
  .shell-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .shell-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Footer hidden on mobile & Telegram WebApp */
@media (max-width: 760px) {
  .shell-footer { display: none !important; }
  .lwrb { display: none !important; }
}
body.is-tg .shell-footer { display: none !important; }
body.is-tg .lwrb { display: none !important; }
body.is-tg .hd-logout { display: none !important; }

/* ============ VIP badge ============ */
.hd-drop-userhead .hd-name-line {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 210px;
}
.hd-drop-userhead .hd-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-drop-userhead .hd-vip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  line-height: 0;
}
.hd-drop-userhead .hd-vip img { width: 17px; height: 17px; object-fit: contain; display: block; }

/* ============ Bonuses page ============ */
.bn-page { max-width: 920px; }
.bn-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.bn-title { font-size: 26px; font-weight: 800; letter-spacing: -0.3px; }
.bn-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }

.bn-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tier-color) 10%, transparent), rgba(255, 255, 255, 0.015) 60%);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
}
.bn-tier-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 2px solid color-mix(in srgb, var(--tier-color) 55%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--tier-color) 20%, transparent);
}
.bn-tier-icon img { width: 32px; height: 32px; object-fit: contain; }
.bn-tier-titles { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bn-tier-row { display: flex; align-items: center; gap: 10px; }
.bn-tier-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--tier-color);
}
.bn-tier-level {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}
.bn-tier-sub { color: var(--muted); font-size: 12px; }

.bn-progress { margin: 4px 0 0; width: 100%; }
.bn-progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.bn-progress-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.bn-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 7px;
  font-size: 12px;
  color: var(--muted);
}
.bn-progress-amounts { display: flex; align-items: baseline; gap: 6px; }
.bn-progress-amounts i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-block;
}
.bn-progress-meta b { color: var(--up); font-weight: 700; }
.bn-level-bonus {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
}
.bn-level-bonus i { color: var(--tier-color); font-size: 16px; flex-shrink: 0; }
.bn-level-bonus span { font-weight: 600; }
.bn-level-bonus em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: auto;
}
.bn-level-bonus strong { color: var(--up); font-weight: 800; font-size: 14px; }
.bn-maxed { color: var(--up); font-size: 14px; font-weight: 600; padding: 16px 0 4px; }

/* Accordion sections */
.bn-acc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
}
.bn-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  text-align: left;
}
.bn-acc-head:hover { background: rgba(255, 255, 255, 0.02); }
.bn-acc-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.bn-acc-ico i { font-size: 19px; line-height: 1; }
.bn-card-ico-gold { background: rgba(252, 213, 53, 0.12); color: var(--accent); }
.bn-card-ico-green { background: rgba(14, 203, 129, 0.12); color: var(--up); }
.bn-card-ico-blue { background: rgba(14, 165, 233, 0.12); color: #0ea5e9; }
.bn-acc-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bn-acc-title { font-size: 15px; font-weight: 700; }
.bn-acc-sub { color: var(--muted); font-size: 12px; }
.bn-acc-caret {
  font-size: 15px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.bn-acc.is-open .bn-acc-caret { transform: rotate(180deg); }
.bn-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.bn-acc.is-open .bn-acc-body { grid-template-rows: 1fr; }
.bn-acc-inner { overflow: hidden; padding: 0 18px; }
.bn-acc.is-open .bn-acc-inner { padding: 2px 18px 18px; }
.bn-acc-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
  margin-bottom: 16px;
}
.bn-acc-amount em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }
.bn-acc-note { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: auto; text-align: right; }
.bn-acc-actions { margin-top: 4px; }
.bn-acc-actions .bn-btn { width: 100%; }
.bn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 10px;
  border: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.bn-btn i { font-size: 16px; }
.bn-btn-primary { background: var(--accent); color: var(--ink); }
.bn-btn-primary:hover { filter: brightness(1.08); }
.bn-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
.bn-btn-disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
  font-variant-numeric: tabular-nums;
}

/* Level-up compact list */
.bn-levels {
  max-height: 316px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}
.bn-levels::-webkit-scrollbar { width: 6px; }
.bn-levels::-webkit-scrollbar-track { background: transparent; }
.bn-levels::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; }
.bn-lvl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 6px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.bn-lvl:first-child { border-top: 0; }
.bn-lvl-num {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  flex-shrink: 0;
}
.bn-lvl.is-current .bn-lvl-num { background: rgba(252, 213, 53, 0.15); border-color: rgba(252, 213, 53, 0.4); color: var(--accent); }
.bn-lvl.is-done .bn-lvl-num { background: rgba(14, 203, 129, 0.12); border-color: rgba(14, 203, 129, 0.3); color: var(--up); }
.bn-lvl-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bn-lvl-name { font-size: 13px; font-weight: 700; }
.bn-lvl-name em { font-style: normal; color: var(--accent); font-size: 11px; font-weight: 600; }
.bn-lvl.is-done .bn-lvl-name { color: var(--muted); }
.bn-lvl-req { color: var(--muted); font-size: 12px; }
.bn-lvl-reward { text-align: right; flex-shrink: 0; display: flex; align-items: baseline; gap: 6px; }
.bn-lvl-reward b { font-size: 15px; font-weight: 800; color: var(--up); }
.bn-lvl-reward span { font-size: 11px; font-weight: 600; color: var(--muted); }
.bn-lvl.is-done .bn-lvl-reward b { color: var(--muted); }
.bn-empty { color: var(--muted); font-size: 13px; padding: 14px 0; }

/* Active bonuses */
.bn-bonus-list { display: flex; flex-direction: column; }
.bn-bonus {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid var(--line);
}
.bn-bonus:first-child { border-top: 0; }
.bn-bonus-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
.bn-bonus-ico i { font-size: 17px; line-height: 1; }
.bn-bonus-body { flex: 1 1 auto; min-width: 0; }
.bn-bonus-name { font-size: 14px; font-weight: 700; }
.bn-bonus-desc { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.bn-bonus-desc b { color: var(--text); font-weight: 700; }

.bn-toast { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.bn-toast-ok { border: 1px solid rgba(14, 203, 129, 0.4); }
.bn-toast-err { border: 1px solid rgba(246, 70, 93, 0.4); }
.bn-toast.is-out { opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }

/* ============ Wheel of Fortune ============ */
.bn-wheel {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 0 4px;
  flex-wrap: wrap;
}
.bn-wheel-stage {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
  margin: 0 auto;
}
.bn-wheel-disc {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(0deg);
  will-change: transform;
}
.bn-wheel-pin {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 15px solid var(--accent);
  filter: drop-shadow(0 0 6px rgba(252, 213, 53, 0.55));
  z-index: 2;
}
.bn-wheel-cntr {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #10161d;
  border: 2px solid rgba(252, 213, 53, 0.4);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 20px;
  pointer-events: none;
  z-index: 2;
}
.bn-wheel-actions {
  flex: 1 1 220px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bn-wheel-hint { color: var(--muted); font-size: 12px; text-align: center; margin-top: -4px; }

/* ============ Welcome Package ============ */
.bn-wel { display: flex; flex-direction: column; }
.bn-wel-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 4px;
  border-top: 1px solid var(--line);
}
.bn-wel-row:first-child { border-top: 0; }
.bn-wel-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  flex-shrink: 0;
}
.bn-wel-row.is-current .bn-wel-num {
  background: rgba(252, 213, 53, 0.15);
  border-color: rgba(252, 213, 53, 0.45);
  color: var(--accent);
  box-shadow: 0 0 14px rgba(252, 213, 53, 0.18);
}
.bn-wel-row.is-done .bn-wel-num {
  background: rgba(14, 203, 129, 0.12);
  border-color: rgba(14, 203, 129, 0.35);
  color: var(--up);
}
.bn-wel-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bn-wel-name { font-size: 14px; font-weight: 700; }
.bn-wel-name b { color: var(--accent); font-weight: 800; }
.bn-wel-name em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(252, 213, 53, 0.12);
  border: 1px solid rgba(252, 213, 53, 0.3);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
}
.bn-wel-row.is-done .bn-wel-name { color: var(--muted); }
.bn-wel-req { color: var(--muted); font-size: 12px; }
.bn-wel-reward { text-align: right; flex-shrink: 0; display: flex; align-items: center; gap: 9px; }
.bn-wel-reward b { font-size: 16px; font-weight: 800; color: var(--up); }
.bn-wel-row.is-done .bn-wel-reward b { color: var(--muted); }
.bn-wel-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(14, 203, 129, 0.14);
  border: 1px solid rgba(14, 203, 129, 0.4);
  color: var(--up);
  display: none;
  place-items: center;
  font-size: 12px;
}
.bn-wel-row.is-done .bn-wel-check { display: grid; }
.bn-wel-note { color: var(--muted); font-size: 11.5px; margin: 8px 4px 2px; }

@media (max-width: 760px) {
  .bn-hero { padding: 20px; }
  .bn-tier-icon { width: 48px; height: 48px; }
  .bn-tier-icon img { width: 28px; height: 28px; }
  .bn-tier-name { font-size: 18px; }
  .bn-head { align-items: flex-start; flex-direction: column; }
  .bn-acc-note { display: none; }
  .bn-wheel { gap: 16px; }
  .bn-wheel-stage { width: 190px; height: 190px; }
}

/* ============ Bonuses modal ============ */
.bn-modal {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: min(720px, calc(100vh - 32px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.bn-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  flex-shrink: 0;
}
.bn-modal-title { display: flex; align-items: center; gap: 12px; }
.bn-modal-title-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(252, 213, 53, 0.14);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.bn-modal-title-ico i { font-size: 21px; line-height: 1; }
.bn-modal-title h4 { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; }
.bn-modal-title p { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.bn-modal-scroll {
  overflow-y: auto;
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
}
.bn-modal-scroll > * { flex-shrink: 0; }
.bn-modal .bn-hero { padding: 22px; gap: 12px; }
.bn-modal .bn-hero-top { display: flex; align-items: center; gap: 14px; width: 100%; }
.bn-modal .bn-tier-icon { width: 52px; height: 52px; }
.bn-modal .bn-tier-icon img { width: 30px; height: 30px; }
.bn-modal .bn-tier-titles { align-items: flex-start; gap: 4px; }
.bn-modal .bn-tier-name { font-size: 17px; }
.bn-modal .bn-progress { margin-top: 2px; }
.bn-modal .bn-level-bonus { margin-top: 6px; }
.bn-modal .bn-acc-head { padding: 13px 16px; }
.bn-modal .bn-acc-inner { padding: 0 16px; }
.bn-modal .bn-acc.is-open .bn-acc-inner { padding: 2px 16px 16px; }
.bn-modal .bn-acc-actions .bn-btn { min-height: 42px; }
.bn-modal .bn-acc-amount { font-size: 20px; }
.bn-modal .bn-acc-amount em { font-size: 14px; }
.bn-modal .bn-btn { min-height: 40px; }

/* Bonus claim row (sum + button inline) */
.bn-claim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 2px;
}
.bn-claim-info { min-width: 0; }
.bn-claim-amount {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.bn-claim-amount em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bn-claim-note { color: var(--muted); font-size: 12px; margin-top: 3px; }
.bn-claim-action { flex-shrink: 0; }
.bn-claim-action .bn-btn { width: auto; min-width: 140px; padding: 12px 22px; white-space: nowrap; }

/* Status badge in accordion header */
.bn-acc-status {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.bn-status-live { background: rgba(14, 203, 129, 0.14); color: var(--up); }
.bn-status-muted { background: var(--surface-2); color: var(--muted); }
.bn-status-gold { background: rgba(252, 213, 53, 0.14); color: var(--accent); }

@media (max-width: 760px) {
  .bn-modal { max-height: calc(100vh - 20px); border-radius: 14px; }
  .bn-modal-head { padding: 14px 16px; }
  .bn-modal-scroll { padding: 14px 14px 18px; gap: 10px; }
  .bn-modal .bn-hero { padding: 18px 16px; }
  .bn-modal .bn-acc-head { padding: 12px 14px; }
  .bn-claim { flex-direction: column; align-items: stretch; gap: 14px; }
  .bn-claim-action .bn-btn { width: 100%; min-width: 0; }
  .bn-acc-status { font-size: 10px; padding: 3px 8px; }
}



/* ——— Partner Hub (pn) v2 ——— */
.pn {
  max-width: 1180px;
  margin: 0 auto;
  padding: 6px 0 40px;
}

/* Head */
.pn-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 2px 18px;
}
.pn-head-txt { display: flex; flex-direction: column; gap: 2px; }
.pn-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.pn-title { font-size: 26px; font-weight: 800; line-height: 1.15; }
.pn-head-sub { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 460px; }
.pn-head-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pn-rate {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: rgba(252, 213, 53, 0.12);
  border: 1px solid rgba(252, 213, 53, 0.35);
  color: var(--accent);
  padding: 8px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.pn-rate b { font-size: 17px; font-weight: 800; }

/* Tabs */
.pn-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px;
}
.pn-tab {
  padding: 7px 15px; border-radius: 9px; font-size: 13px; font-weight: 700;
  color: var(--muted); transition: background 0.15s ease, color 0.15s ease;
}
.pn-tab:hover { color: var(--text); }
.pn-tab.is-active { background: var(--accent); color: var(--ink); }

/* Layout: main + side */
.pn-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: start;
}
.pn-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pn-side { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1200px) {
  .pn-side { position: sticky; top: calc(var(--header-h) + 10px); }
}
@media (max-width: 900px) {
  .pn-layout { grid-template-columns: minmax(0, 1fr); }
  .pn-head { flex-direction: column; align-items: flex-start; }
}

/* Cards */
.pn-card {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}
.pn-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pn-card-ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(252,213,53,0.18), rgba(252,213,53,0.06));
  color: var(--accent); font-size: 19px;
  border: 1px solid rgba(252,213,53,0.18);
}
.pn-card-titles { display: flex; flex-direction: column; gap: 1px; }
.pn-card-title { font-size: 15px; font-weight: 700; }
.pn-card-sub { font-size: 12px; color: var(--muted); }

/* Invite */
.pn-invite-row { display: flex; gap: 8px; }
.pn-input {
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text); font-size: 12.5px; padding: 11px 12px; outline: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pn-input:focus { border-color: var(--accent); }
.pn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; cursor: pointer; border-radius: 10px; font-weight: 700;
  font-size: 13.5px; padding: 11px 18px; transition: transform 0.12s ease, filter 0.15s ease;
  color: var(--ink); white-space: nowrap;
}
.pn-btn:active { transform: scale(0.97); }
.pn-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); box-shadow: 0 4px 18px rgba(252,213,53,0.25); }
.pn-btn-primary:hover { filter: brightness(1.06); }
.pn-btn-copy { background: var(--surface-2); color: var(--text); padding: 11px 14px; }
.pn-btn-copy:hover { background: #343c45; }
.pn-btn-block { width: 100%; }
.pn-share-btn {
  margin-top: 10px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #2aabee, #1f9be0); color: #fff;
  border: none; border-radius: 10px; font-weight: 700; font-size: 14px;
  padding: 12px 16px; cursor: pointer; transition: filter 0.15s ease, transform 0.12s ease;
}
.pn-share-btn:hover { filter: brightness(1.08); }
.pn-share-btn:active { transform: scale(0.98); }

/* KPI grid */
.pn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pn-kpi {
  background: var(--bg-deep); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; display: flex; flex-direction: column; gap: 2px; position: relative;
  overflow: hidden;
}
.pn-kpi-ic {
  position: absolute; right: 10px; top: 10px; font-size: 16px; color: var(--muted); opacity: 0.5;
}
.pn-kpi-lb { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.pn-kpi-val { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 3px; }
.pn-kpi-gold .pn-kpi-ic { color: var(--accent); opacity: 0.9; }
.pn-kpi-gold .pn-kpi-lb { color: var(--accent); }
.pn-kpi-gold { border-color: rgba(252,213,53,0.28); }

/* Chart */
.pn-chart { background: var(--surface); border-radius: 12px; padding: 14px 10px 6px; }
.pn-chart-svg { width: 100%; height: 150px; display: block; }
.pn-chart-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding: 8px 12px 0; }

/* Table */
.pn-table-wrap { overflow-x: auto; margin: 0 -4px; }
.pn-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 540px; }
.pn-table th {
  text-align: left; padding: 8px 10px; color: var(--muted); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pn-table td { padding: 10px; border-bottom: 1px solid rgba(43, 49, 57, 0.6); white-space: nowrap; }
.pn-table tr:last-child td { border-bottom: none; }
.pn-table td.pn-num, .pn-table td.pn-earn { text-align: right; font-variant-numeric: tabular-nums; }
.pn-table td.pn-earn { color: var(--accent); font-weight: 800; }
.pn-player { display: inline-flex; align-items: center; gap: 10px; }
.pn-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--accent); font-weight: 800; font-size: 13px;
  border: 1px solid var(--line);
}
.pn-player-name { display: block; font-weight: 700; }
.pn-player-sub { display: block; font-size: 11px; color: var(--muted); }

/* Balance card */
.pn-balance {
  background: linear-gradient(150deg, #182a1e 0%, var(--bg-deep) 46%);
  border: 1px solid rgba(14, 203, 129, 0.22);
}
.pn-balance-top { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pn-balance-badge {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 11px; font-weight: 700; color: var(--up);
  background: rgba(14, 203, 129, 0.12); padding: 4px 9px; border-radius: 999px;
}
.pn-balance-amt { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pn-balance-rows { margin-top: 14px; display: flex; flex-direction: column; }
.pn-balance-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; font-size: 13px; color: var(--muted);
  border-bottom: 1px solid rgba(43,49,57,0.55);
}
.pn-balance-row:last-child { border-bottom: none; }
.pn-balance-row b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Payouts list */
.pn-payouts { display: flex; flex-direction: column; gap: 8px; }
.pn-payout {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
}
.pn-payout-amt { display: block; font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.pn-payout-date { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.pn-status {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.pn-status-paid { background: rgba(14, 203, 129, 0.14); color: var(--up); }
.pn-status-pending { background: rgba(252, 213, 53, 0.14); color: var(--accent); }
.pn-status-cancelled { background: rgba(246, 70, 93, 0.14); color: var(--danger); }

/* Empty states */
.pn-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 26px 10px;
}
.pn-empty-sm { padding: 18px 10px; }
.pn-empty-ic {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--muted); font-size: 21px; margin-bottom: 2px;
}
.pn-empty-title { font-size: 14px; font-weight: 700; }
.pn-empty-sub { font-size: 12px; color: var(--muted); }

/* Modal */
.pn-modal-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6); padding: 20px; backdrop-filter: blur(4px);
}
.pn-modal-overlay.is-open { display: flex; }
.pn-modal {
  width: 100%; max-width: 420px; background: var(--bg-deep); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px; max-height: 86vh; overflow-y: auto;
}
.pn-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pn-modal-title { font-size: 17px; font-weight: 800; }
.pn-modal-close {
  background: var(--surface); color: var(--text); border: none; width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.pn-modal-form { display: flex; flex-direction: column; gap: 13px; }
.pn-field { display: flex; flex-direction: column; gap: 6px; }
.pn-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.pn-note { font-size: 12px; color: var(--muted); line-height: 1.5; }

@media (max-width: 640px) {
  .pn-title { font-size: 22px; }
  .pn-grid { grid-template-columns: repeat(2, 1fr); }
  .pn-head-right { width: 100%; justify-content: space-between; }
  .pn-balance-amt { font-size: 26px; }
  .pn-card { padding: 14px; }
}

/* ===== Wallet: wager / withdrawal status ===== */
.wallet-wager {
  position: relative;
  margin-bottom: 14px;
  border-radius: 16px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, rgba(252,213,53,0.06) 0%, rgba(20,22,27,0.35) 45%), var(--surface);
  border: 1px solid rgba(252,213,53,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(11,14,17,0.2);
  overflow: hidden;
}
.wallet-wager-head { display: flex; align-items: center; gap: 12px; }
.wallet-wager-ic {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(252,213,53,0.2), rgba(240,185,11,0.06));
  color: var(--accent);
  border: 1px solid rgba(252,213,53,0.22);
}
.wallet-wager-ic svg { width: 19px; height: 19px; }
.wallet-wager-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wallet-wager-title { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.wallet-wager-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.wallet-wager-amount {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 17px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.wallet-wager-details { display: flex; flex-wrap: wrap; gap: 6px; }
.ww-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}
.ww-chip i { font-size: 12px; color: var(--accent); }
.ww-chip b { color: var(--text); font-weight: 800; margin-left: 2px; }
.wallet-wager-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  background: rgba(246,70,93,0.06);
  border: 1px solid rgba(246,70,93,0.16);
  border-radius: 10px;
  padding: 8px 11px;
}
.wallet-wager-note i { color: var(--danger); font-size: 15px; }
.wallet-wager-note b { color: var(--danger); font-weight: 800; }
.wallet-wager-ok {
  flex-direction: row;
  align-items: center;
  background: linear-gradient(180deg, rgba(14,203,129,0.08) 0%, rgba(20,22,27,0.35) 55%), var(--surface);
  border-color: rgba(14,203,129,0.22);
}
.wallet-wager-ok .wallet-wager-ic {
  background: linear-gradient(135deg, rgba(14,203,129,0.22), rgba(14,203,129,0.05));
  color: var(--up);
  border-color: rgba(14,203,129,0.25);
}
.wallet-wager-ok .wallet-wager-title { color: var(--up); }

/* ===== Deposit QR: amount-line copy + status as third row ===== */
.wqr-amount-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wqr-copy-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  border-radius: 8px;
}
.wqr-copy-sm svg { width: 12px; height: 12px; }

.wqr-step-status {
  border-top: 1px dashed rgba(132,142,156,0.22);
  margin-top: 2px;
  padding-top: 12px;
  justify-content: center;
}
.wqr-step-status .wqr-step-ic {
  border-radius: 50%;
  background: rgba(132,142,156,0.14);
  color: var(--text);
}
.wqr-step-status .wqr-step-txt {
  font-weight: 700;
  color: var(--text);
}
.wqr-st-ic { display: none; }
.wqr-step-status.is-wait .wqr-st-ic-wait,
.wqr-step-status.is-ok .wqr-st-ic-ok,
.wqr-step-status.is-err .wqr-st-ic-err { display: inline-block; }

.wqr-step-status.is-wait .wqr-step-ic { background: rgba(252,213,53,0.12); color: var(--accent); }
.wqr-step-status.is-wait .wqr-st-ic-wait { animation: wqrClock 1.6s ease-in-out infinite; }
.wqr-step-status.is-wait .wqr-step-txt { color: var(--text); }
@keyframes wqrClock {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.wqr-step-status.is-ok .wqr-step-ic { background: rgba(14,203,129,0.14); color: var(--up); }
.wqr-step-status.is-ok .wqr-step-txt { color: var(--up); }
.wqr-step-status.is-err .wqr-step-ic { background: rgba(246,70,93,0.14); color: var(--danger); }
.wqr-step-status.is-err .wqr-step-txt { color: var(--danger); }

.wqr-foot-solo { justify-content: center; }

/* ===== Clickable deposit history rows ===== */
.wallet-hrow { cursor: pointer; }
.wallet-hrow-chev {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  opacity: 0.35;
  transform: translateX(-3px);
  transition: opacity 0.15s, transform 0.15s, color 0.15s;
}
.wallet-hrow:hover .wallet-hrow-chev,
.wallet-hrow:focus-visible .wallet-hrow-chev {
  opacity: 1;
  transform: translateX(0);
}
.wallet-hrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 10px;
}
.wallet-hrow:active { opacity: 0.8; }

/* ===== Welcome bonus opt-out on deposit ===== */
.wallet-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 12px;
  padding: 11px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.wallet-opt:hover { border-color: var(--surface-2); }
.wallet-opt-input { position: absolute; opacity: 0; pointer-events: none; }
.wallet-opt-ui {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.wallet-opt-input:checked + .wallet-opt-ui {
  background: var(--accent);
  border-color: var(--accent);
  color: #17181b;
}
.wallet-opt-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wallet-opt-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.wallet-opt-title i {
  font-style: normal;
  color: var(--up);
}
.wallet-opt-sub {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}
.wallet-opt.is-off { border-color: rgba(246,70,93,0.22); }
.wallet-opt.is-off .wallet-opt-title,
.wallet-opt.is-off .wallet-opt-title i { color: var(--muted); }

/* =========================================================
   Wallet: deposit QR header (amount + usd + icon copy)
   ========================================================= */
.wqr-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wqr-usd-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.wqr-usd { margin-top: 0; }

/* Тонкая иконка-копия рядом с «≈ $X.XX» */
.wqr-copy-amt {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.wqr-copy-amt:hover { border-color: var(--accent); color: var(--accent); }
.wqr-copy-amt .wqr-ca-check { display: none; }
.wqr-copy-amt.copied {
  border-color: var(--up);
  color: var(--up);
  background: rgba(14,203,129,0.1);
}
.wqr-copy-amt.copied .wqr-ca-copy { display: none; }
.wqr-copy-amt.copied .wqr-ca-check { display: block; }

/* =========================================================
   Wallet history: компактная схема
     TON            [⌛] 4.411765 TON
     Sep 03, 19:31              +$6.00
   Статус — маленькая иконка слева от суммы (title = текст статуса)
   ========================================================= */
.wallet-hrow-sum {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}
.wallet-hrow-sum .wallet-hrow-amt {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
.wallet-hrow-sum .wallet-hrow-amt em { font-size: 10px; }
.wallet-hrow-sum .wallet-hrow-usd { font-size: 11px; line-height: 1.2; }

/* Статус-иконка по состоянию (часы/галочка/крестик) */
.wallet-st {
  display: inline-flex;
  flex-shrink: 0;
}
.wallet-st svg { display: none; }
.wallet-st-pending { color: var(--accent); }
.wallet-st-pending .wallet-st-ic-pending { display: block; animation: walletStClock 1.6s ease-in-out infinite; }
.wallet-st-paid { color: var(--up); }
.wallet-st-paid .wallet-st-ic-paid { display: block; }
.wallet-st-expired, .wallet-st-cancelled { color: var(--danger); }
.wallet-st-expired .wallet-st-ic-bad,
.wallet-st-cancelled .wallet-st-ic-bad { display: block; }
@keyframes walletStClock {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ===== Запрет зума двойным тапом (в дополнение к JS-защите) ===== */
body { touch-action: manipulation; }