/* ============================================================
   TGHelperX — Telegram мини-апп «Подписчики» (порт SubscriberMiniApp.dc.html).
   Большая часть стилей — инлайн в разметке (как в дизайне). Здесь: сброс, фон,
   шрифты, анимации, скрытый скролл. Тёмная TGX-тема (tokens.css). Без themeParams.
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg-page); }
body {
  font-family: var(--font-ui); color: var(--text-primary);
  overscroll-behavior: none; -webkit-user-select: none; user-select: none;
}
::-webkit-scrollbar { width: 0; height: 0; }
input { font-family: var(--font-ui); -webkit-user-select: text; user-select: text; }
input::placeholder { color: var(--text-disabled); }
button { font-family: var(--font-ui); cursor: pointer; }
button:active { filter: brightness(1.06); }
a { color: var(--text-link); }

@keyframes tghxblink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes tghxup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tghxfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tghxshimmer { 0% { background-position: -280px 0; } 100% { background-position: 280px 0; } }
@keyframes tghxspin { to { transform: rotate(360deg); } }
@keyframes tghxslide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }

#root { height: 100vh; height: 100dvh; }
.app {
  height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: var(--grad-page); font-family: var(--font-ui); color: var(--text-primary);
}
.app .hdr { padding-top: calc(env(safe-area-inset-top) + 9px); }
.app .tabbar { padding-bottom: env(safe-area-inset-bottom); }
.app .mainbar { padding-bottom: calc(env(safe-area-inset-bottom) + 9px); }
.skelbar { background: linear-gradient(90deg, var(--surface-card), var(--surface-hover), var(--surface-card)); background-size: 280px 100%; animation: tghxshimmer 1.1s linear infinite; }