/* Compact Principal layout: balance first, video availability directly below,
   and today's earned amount in its own framed badge at the upper right. */
.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-panel {
  position: relative !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-main {
  display: block !important;
  min-width: 0 !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-value {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  font-size: clamp(30px, 9.2vw, 40px) !important;
  line-height: 1.04 !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-panel > .vp-daily-availability {
  position: absolute !important;
  z-index: 3 !important;
  left: 19px !important;
  right: auto !important;
  bottom: 15px !important;
  top: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: auto !important;
  max-width: calc(100% - 38px) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .vp-daily-availability b {
  color: #dd7188 !important;
  font-size: clamp(15px, 4.6vw, 20px) !important;
  font-weight: 900 !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .vp-daily-availability small {
  margin: 0 !important;
  color: #d9b8bf !important;
  font-size: clamp(6.5px, 1.9vw, 8.5px) !important;
  font-weight: 850 !important;
  letter-spacing: .075em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-amount > .vp-earned-today {
  position: absolute !important;
  z-index: 4 !important;
  top: 15px !important;
  right: 15px !important;
  left: auto !important;
  bottom: auto !important;
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(223, 201, 147, .45) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(73, 16, 28, .9), rgba(77, 62, 26, .9)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 6px 14px rgba(17, 18, 20, .2) !important;
  white-space: nowrap !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-amount > .vp-earned-today small {
  color: #e39eac !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-amount > .vp-earned-today b {
  color: #e9d8b2 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

/* Restore the original compact page flow. Small screens may scroll only when
   their real content exceeds the available Telegram viewport. */
.app-shell.vp-home-active > .page-scroll {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.app-shell.vp-home-active > .page-scroll > .home-screen.vp-emerald-live {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

@media (max-height: 700px) {
  .app-shell.vp-home-active .home-screen.vp-emerald-live {
    gap: 6px !important;
  }
  .app-shell.vp-home-active .home-screen.vp-emerald-live .balance-panel {
    padding-top: 14px !important;
    padding-bottom: 34px !important;
  }
  .app-shell.vp-home-active .home-screen.vp-emerald-live .telegram-actions {
    margin-bottom: 6px !important;
  }
}

/* Tall phones: keep the utility buttons directly above the bottom navigation
   instead of leaving a large unused block underneath them. Intrinsic content
   can still exceed this minimum height and scroll normally on small screens. */
@media (max-width: 960px) and (min-height: 800px) {
  .app-shell.vp-home-active > .page-scroll > .home-screen.vp-emerald-live {
    min-height: calc(var(--tg-viewport-stable-height, 100dvh) - 96px) !important;
  }

  .app-shell.vp-home-active .home-screen.vp-emerald-live .telegram-actions {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 10px !important;
  }
}

/* Stable balance header: the label and today's earnings own separate columns,
   while the balance always starts on a new full-width row. */
.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-panel {
  padding-bottom: 42px !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-amount {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  column-gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-amount > .eyebrow {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-amount > .vp-earned-today {
  position: static !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-amount > .balance-value {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 9px !important;
  font-size: clamp(29px, 8.8vw, 40px) !important;
}