/* SFA VPN — «Тёмная контрастная»: тёплый почти чёрный, белый текст, оранжевые акценты.
   This stylesheet changes presentation only; the native Bedolaga app owns all UI. */
:root {
  --bento-radius: 18px;
  --bento-radius-lg: 24px;
}

/* Фон не задаём: цвет #121010 приходит из настроек оформления кабинета (darkBackground).
   Свой фон у html отключал перенос фона body на холст и закрывал анимированный фон (z-index -2). */

h1, h2 {
  font-weight: 800 !important;
  letter-spacing: -0.04em;
}

h1 { line-height: 1.1; }
h2 { line-height: 1.2; }

.dark .btn-primary {
  color: #121010;
  border-radius: 14px;
  font-weight: 800;
  box-shadow: none;
}

.dark .btn-secondary, .dark .input { border-radius: 14px; }
.dark .bento-card, .dark .card { box-shadow: none; }

.dark [data-onboarding="connect-devices"] {
  background: #FF8A1F !important;
  border-color: #FF8A1F !important;
  border-radius: 18px !important;
}

.dark [data-onboarding="connect-devices"],
.dark [data-onboarding="connect-devices"] * {
  color: #121010 !important;
}

.dark [data-onboarding="balance"] > div {
  background: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 18px !important;
}

.dark [data-onboarding="balance"] > div,
.dark [data-onboarding="balance"] [class*="text-accent"],
.dark [data-onboarding="balance"] [class*="text-dark"] {
  color: #121010 !important;
}

.dark [data-onboarding="balance"] [class*="bg-accent"] {
  background-color: #FFE1C2 !important;
}

.dark nav.fixed {
  background-color: #1E1917 !important;
  border-color: #3A2E2A !important;
  box-shadow: none !important;
}

.dark nav.fixed [class*="text-accent"] { color: #FF8A1F !important; }
.dark nav.fixed [class*="bg-accent"] { background-color: #FF8A1F22 !important; }

/* Use Bedolaga's native bot-confirmation login until the owner links the
   browser widget domain in BotFather. Mini App initData authentication remains native. */
div.space-y-4:has(script[data-telegram-login]) > div:first-child,
div.space-y-4:has(script[data-telegram-login]) > div:has(> .h-px) {
  display: none;
}

.dark div.space-y-4:has(script[data-telegram-login]) > button:last-child,
.dark a[href*="start=webauth_"] {
  background-color: #FF8A1F !important;
  border-color: #FF8A1F !important;
  color: #121010 !important;
  border-radius: 14px;
  font-weight: 800;
  box-shadow: none;
}

.dark div.space-y-4:has(script[data-telegram-login]) > button:last-child svg {
  color: #121010;
}

@media (max-width: 600px) {
  main h1 { font-size: 32px; }
  [data-onboarding="welcome"] h1 { font-size: 34px; }
  .app-mobile-header { background-color: #121010 !important; }
}