/* Telegram Mini App — adapts COPYRIGHTV to in-app WebView while keeping browser styling elsewhere */

html.tg-webapp,
html.tg-webapp body {
  background: var(--tg-theme-bg-color, var(--g-base));
  color: var(--tg-theme-text-color, var(--text));
}

html.tg-webapp {
  --bg: var(--tg-theme-bg-color, var(--g-base));
  --surface: var(--tg-theme-secondary-bg-color, var(--g-rich));
  --surface-2: var(--tg-theme-section-bg-color, var(--g-deep));
  --surface-3: var(--tg-theme-section-bg-color, var(--g-charcoal));
  --text: var(--tg-theme-text-color, var(--g-silver));
  --text-bright: var(--tg-theme-text-color, var(--g-frost));
  --muted: var(--tg-theme-hint-color, var(--g-stone));
  --accent: var(--tg-theme-link-color, var(--g-frost));
  --border: color-mix(in srgb, var(--tg-theme-hint-color, #888) 24%, transparent);
  --border-soft: color-mix(in srgb, var(--tg-theme-hint-color, #888) 12%, transparent);
}

html.tg-webapp .ambient,
html.tg-webapp .texture {
  opacity: 0.45;
}

html.tg-webapp .shell {
  width: min(1140px, calc(100% - 1.25rem));
  padding-bottom: calc(1.5rem + var(--tg-content-safe-area-inset-bottom, 0px) + 72px);
}

html.tg-webapp .nav-shell {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 0.75rem;
  padding-top: var(--tg-content-safe-area-inset-top, 0px);
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--tg-theme-bg-color, #2c2c2c) 88%, transparent);
}

html.tg-webapp .topbar {
  border-color: var(--border-soft);
}

html.tg-webapp .foot {
  display: none;
}

html.tg-webapp .btn--solid {
  background: var(--tg-theme-button-color, var(--g-frost));
  color: var(--tg-theme-button-text-color, #111);
  border-color: transparent;
}

html.tg-webapp .btn--outline,
html.tg-webapp .btn--outline-nav {
  border-color: var(--border);
  color: var(--tg-theme-text-color, var(--text));
}

html.tg-webapp .card {
  background: var(--tg-theme-secondary-bg-color, var(--surface));
  border-color: var(--border-soft);
}

html.tg-webapp input,
html.tg-webapp textarea,
html.tg-webapp select {
  background: var(--tg-theme-bg-color, var(--bg));
  color: var(--tg-theme-text-color, var(--text));
  border-color: var(--border);
}

html.tg-webapp .tg-browser-only {
  display: none !important;
}

html:not(.tg-webapp) .tg-app-only {
  display: none !important;
}

html.tg-webapp .nav .nav-form button {
  color: var(--tg-theme-link-color, var(--text));
}

.tg-auth-banner {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--tg-theme-secondary-bg-color, var(--surface));
  border: 1px solid var(--border-soft);
  font-size: 0.92rem;
}

.tg-auth-banner.is-error {
  color: var(--tg-theme-destructive-text-color, #ff6b6b);
}

html.tg-webapp .page-verify__form .btn--block.tg-use-main-button,
html.tg-webapp #upload-btn.tg-use-main-button,
html.tg-webapp #instagram-btn.tg-use-main-button,
html.tg-webapp #admin-upload-btn.tg-use-main-button {
  display: none;
}

html.tg-webapp.tg-theme-light .ambient {
  opacity: 0.2;
}

html.tg-webapp.tg-theme-light .texture {
  opacity: 0.02;
}