/* Display-only safeguards: no changes to amounts, account data or rewards. */
.app-shell .screen .balance-value,
.app-shell .screen .tasks-balance > strong,
.app-shell .screen [data-vp-money],
.dialog-panel [data-vp-money],
.withdrawal-form [data-vp-money],
.vp-daily-reward-card [data-vp-money] {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-variant-numeric: lining-nums tabular-nums;
}
[data-vp-money-fit] { font-size: var(--vp-money-size) !important; }

/* Reserve space for each column instead of allowing the label to squeeze Q away. */
.app-shell .tasks-screen .tasks-balance {
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  height: auto !important;
  max-height: none !important;
}
.app-shell .tasks-screen .tasks-balance > span,
.app-shell .tasks-screen .tasks-balance > strong { min-width: 0 !important; width: 100% !important; }
.app-shell .tasks-screen .tasks-balance > span > small {
  font-size: 12px !important; line-height: 1.35 !important;
  letter-spacing: .06em !important; overflow-wrap: normal !important;
}
.app-shell .tasks-screen .tasks-balance > span > b {
  font-size: 10px !important; line-height: 1.4 !important;
  margin-top: 4px !important; overflow-wrap: normal !important;
}
.app-shell .tasks-screen .tasks-balance > strong {
  display: block !important; text-align: right !important;
  font-size: var(--vp-money-size, clamp(22px, 7.3vw, 32px)) !important;
  line-height: 1.15 !important; letter-spacing: -.035em !important;
}
.app-shell .tasks-screen .tasks-balance > strong > small {
  display: block !important; font-size: 10px !important; line-height: 1.4 !important;
  margin-top: 5px !important; white-space: normal !important;
  overflow-wrap: normal !important; letter-spacing: 0 !important;
}

/* Wallet: today is in the header row, never on top of the balance or USD line. */
.app-shell .wallet-screen > .balance-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 12px !important; row-gap: 10px !important;
  align-items: center !important;
}
.app-shell .wallet-screen > .balance-panel > .eyebrow { grid-column: 1 !important; grid-row: 1 !important; }
.app-shell .wallet-screen > .balance-panel > .vp-wallet-earned-today {
  position: static !important; inset: auto !important;
  grid-column: 2 !important; grid-row: 1 !important;
  justify-self: end !important; margin: 0 !important;
  max-width: 100% !important; padding: 7px 9px !important;
}
.app-shell .wallet-screen > .balance-panel > .vp-wallet-earned-today strong {
  font-size: var(--vp-money-size, 13px) !important;
  white-space: nowrap !important; overflow-wrap: normal !important;
}
.app-shell .wallet-screen > .balance-panel > .balance-value {
  grid-column: 1 / -1 !important; grid-row: 2 !important;
  display: block !important; min-width: 0 !important; width: 100% !important;
  margin: 0 !important; line-height: 1.12 !important;
  font-size: var(--vp-money-size, clamp(30px, 9vw, 42px)) !important;
}
.app-shell .wallet-screen > .balance-panel > .usd-value { grid-column: 1 / -1 !important; grid-row: 3 !important; margin: 0 !important; }
.app-shell .wallet-screen > .balance-panel > .wallet-withdraw { grid-column: 1 / -1 !important; grid-row: 4 !important; margin-top: 4px !important; }
.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-amount > .balance-value {
  font-size: var(--vp-money-size, clamp(29px, 8.8vw, 40px)) !important;
}
.app-shell .referrals-screen .balance-value { display: block; max-width: 100%; font-size: var(--vp-money-size, clamp(30px, 9vw, 42px)) !important; }
.app-shell .screen .usd-value { overflow-wrap: normal; }

@media (max-width: 350px) {
  .app-shell .wallet-screen > .balance-panel { column-gap: 8px !important; }
  .app-shell .tasks-screen .tasks-balance { gap: 8px !important; padding: 11px 12px !important; }
}
@media (max-width: 380px) {
  .app-shell .home-screen.vp-emerald-live .vp-live-top { gap: 5px !important; }
  .app-shell .home-screen.vp-emerald-live .vp-live-brand { gap: 5px !important; min-width: 0 !important; flex-shrink: 0 !important; }
  .app-shell .home-screen.vp-emerald-live .vp-live-brand img { width: 26px !important; height: 26px !important; }
  .app-shell .home-screen.vp-emerald-live .vp-live-brand b { font-size: 18px !important; letter-spacing: .025em !important; }
  .app-shell .home-screen.vp-emerald-live .vp-verified-badge { gap: 3px !important; padding: 0 5px !important; margin-right: 0 !important; }
  .app-shell .home-screen.vp-emerald-live .vp-verified-badge span { font-size: 7px !important; letter-spacing: 0 !important; }
  .app-shell .home-screen.vp-emerald-live .vp-verified-badge b { font-size: 7px !important; padding: 0 3px !important; letter-spacing: 0 !important; }
}