:root {
  --bg: var(--tg-theme-bg-color, #0f1115);
  --fg: var(--tg-theme-text-color, #ffffff);
  --hint: var(--tg-theme-hint-color, #8a8f98);
  --card: var(--tg-theme-secondary-bg-color, #1a1d24);
  --accent: var(--tg-theme-button-color, #f5b301);
  --accent-fg: var(--tg-theme-button-text-color, #111111);

  /* Безопасные зоны. В полноэкранном режиме Telegram рисует свои кнопки поверх контента:
     --tg-safe-area-inset-*: вырез и системные панели устройства,
     --tg-content-safe-area-inset-top: зона кнопок Telegram (закрыть, меню). Переменные выставляет SDK. */
  --safe-top: max(env(safe-area-inset-top), var(--tg-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
  --content-top: var(--tg-content-safe-area-inset-top, 0px);

  --edge: 20px; /* отступ нижней панели от краёв экрана */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
main { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: calc(16px + var(--safe-top) + var(--content-top)) 16px calc(16px + var(--safe-bottom)); text-align: center; }
button { font: inherit; cursor: pointer; }

.loader { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--card); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.notice h1 { font-size: 22px; margin: 0 0 8px; }
.notice p { color: var(--hint); margin: 0 0 20px; line-height: 1.4; }
.btn { display: inline-block; padding: 12px 24px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-fg); font-weight: 600; text-decoration: none; }

.profile { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; padding: 12px; border-radius: 16px; background: var(--card); text-align: left; }
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex-shrink: 0; }
.profile .name { font-weight: 600; }
.profile .meta { color: var(--hint); font-size: 13px; margin-top: 2px; }

.balance { font-size: 44px; font-weight: 800; }
.balance small { display: block; font-size: 13px; font-weight: 400; color: var(--hint); }

/* ---------- Каркас страниц ---------- */
.page { flex: 1; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding-bottom: calc(var(--edge) + 88px); }
.title { margin: 0; font-size: 24px; align-self: flex-start; }
.card { width: 100%; padding: 16px; border-radius: 16px; background: var(--card); display: flex; flex-direction: column; gap: 8px; text-align: left; }
.stat { font-size: 36px; font-weight: 800; }
.link { font-size: 14px; word-break: break-all; padding: 10px 12px; border-radius: 10px; background: var(--bg); user-select: all; }
.row { display: flex; gap: 8px; }
.row .btn { flex: 1; }
.btn-secondary { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--hint); }

/* ---------- Нижняя панель ----------
   Тёмная капсула с иконками + отдельная круглая кнопка профиля.
   Палитра панели фиксированная (не зависит от темы Telegram): плавающий тёмный элемент читается на любом фоне. */
.tabbar {
  --bar-h: 64px;
  --bar-bg: linear-gradient(180deg, #1d1d20 0%, #121214 100%);
  --bar-edge: rgba(255, 255, 255, .07);
  --bar-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);
  position: fixed; z-index: 5;
  left: var(--edge); right: var(--edge);
  bottom: calc(var(--edge) + var(--safe-bottom));
  max-width: 480px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}

.tab-capsule {
  position: relative; flex: 1;
  height: var(--bar-h); padding: 6px;
  display: grid; grid-template-columns: repeat(var(--n, 4), 1fr);
  border-radius: 999px;
  overflow: hidden; /* «пилюля», уезжающая за край, обрезается по капсуле */
  background: var(--bar-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--bar-edge), var(--bar-shadow);
}

/* Светлая «пилюля» под активной вкладкой, переезжает при переключении */
.tab-indicator {
  position: absolute; top: 6px; bottom: 6px; left: 6px;
  width: calc((100% - 12px) / var(--n, 4));
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 4px 12px rgba(0, 0, 0, .35);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .38s cubic-bezier(.3, .8, .25, 1), opacity .2s;
  opacity: 0;
}
.tab-capsule.has-active .tab-indicator { opacity: 1; }

.tab {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 999px; background: transparent;
  color: #fff; opacity: .55;
  transition: opacity .2s, transform .15s;
}
.tab .icon { width: 24px; height: 24px; }
.tab.active { opacity: 1; }
.tab:active { transform: scale(.9); }

/* Профиль: отдельный круг справа. Кнопка занимает высоту панели (--bar-h),
   а сам круг меньше на 10px: вместе с кольцом выбора (3px зазор + 1.5px линия) он не выходит за границы капсулы. */
.tab-round {
  flex: 0 0 var(--bar-h); width: var(--bar-h); height: var(--bar-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%; background: transparent;
  transition: transform .15s;
}
.tab-round:active { transform: scale(.93); }

.tab-avatar-wrap {
  position: relative;
  width: calc(var(--bar-h) - 10px); height: calc(var(--bar-h) - 10px);
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(180deg, #3a3a3f 0%, #232327 100%);
  box-shadow: var(--bar-shadow);
  transition: box-shadow .25s;
}
/* Такой же блик и кромка, как у капсулы */
.tab-avatar-wrap::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px var(--bar-edge);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 45%);
}
/* Выбран: тонкое светлое кольцо с зазором */
.tab-round.active .tab-avatar-wrap {
  overflow: visible;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px rgba(255, 255, 255, .55), var(--bar-shadow);
}

.tab-avatar {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 700;
}

/* ---------- Заглушки «Скоро» ---------- */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 280px; }
.empty-icon { width: 72px; height: 72px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--accent); margin-bottom: 8px; }
.icon-lg { width: 34px; height: 34px; }
.empty-title { margin: 0; font-size: 20px; }
.empty .hint { margin: 0; line-height: 1.4; }

.toast { position: fixed; left: 50%; bottom: calc(var(--edge) + 80px + var(--safe-bottom)); transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; background: var(--fg); color: var(--bg); font-size: 14px; z-index: 10; }

.coin { width: 200px; height: 200px; border-radius: 50%; border: 0; user-select: none; touch-action: manipulation;
  background: radial-gradient(circle at 35% 30%, #ffe27a, #f5b301 60%, #b37f00);
  box-shadow: 0 10px 40px rgba(245, 179, 1, .35); font-size: 64px; transition: transform .06s; }
.coin:active { transform: scale(.94); }
.hint { color: var(--hint); font-size: 13px; }