/* Cross-screen spacing and overflow safeguards. */
.app-shell .screen,
.app-shell .screen > *,
.app-shell .screen article,
.app-shell .screen section,
.app-shell .screen button,
.app-shell .screen span {
  min-width: 0;
}

/* Final readability pass without increasing the cards' footprint. */
.app-shell.vp-home-active .home-screen.vp-emerald-live .balance-amount > .vp-earned-today small {
  font-size: 8px !important;
}

.app-shell.vp-home-active .home-screen.vp-emerald-live .vp-daily-availability small {
  font-size: clamp(8px, 2vw, 9.5px) !important;
}

.app-shell .profile-screen .telegram-identity i,
.app-shell .profile-screen .telegram-identity b {
  font-size: 9px !important;
}

@media (max-height: 820px) {
  .app-shell.vp-home-active .home-screen.vp-emerald-live {
    gap: 6px !important;
  }

  .app-shell.vp-home-active .home-screen.vp-emerald-live .telegram-actions {
    padding-top: 4px !important;
  }
}

.app-shell .tasks-screen,
.app-shell .wallet-screen,
.app-shell .referrals-screen,
.app-shell .profile-screen {
  width: 100%;
  max-width: 100%;
  padding-bottom: 16px;
}

.app-shell .tasks-screen strong,
.app-shell .tasks-screen small,
.app-shell .wallet-screen strong,
.app-shell .wallet-screen small,
.app-shell .referrals-screen strong,
.app-shell .referrals-screen small,
.app-shell .profile-screen strong,
.app-shell .profile-screen small,
.app-shell .profile-screen span {
  overflow-wrap: anywhere;
}

/* Perfil / Ajustes: one premium emerald visual system. */
.app-shell .profile-screen .profile-user-row {
  padding: 13px 14px;
  border: 1px solid rgba(119, 226, 178, .24);
  border-radius: 19px;
  background:
    radial-gradient(circle at 92% 0, rgba(241, 197, 91, .10), transparent 36%),
    linear-gradient(140deg, rgba(7, 88, 62, .88), rgba(2, 44, 33, .94));
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.18);
}

.app-shell .profile-screen .profile-row {
  min-height: 60px;
  margin-bottom: 9px;
  padding: 10px 16px;
  gap: 12px;
  border: 1px solid rgba(116, 224, 175, .18);
  color: #eefbf4;
  background:
    radial-gradient(circle at 100% 0, rgba(226, 181, 71, .07), transparent 38%),
    linear-gradient(135deg, rgba(6, 76, 54, .91), rgba(2, 41, 31, .96));
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 8px 20px rgba(0,0,0,.16);
}

.app-shell .profile-screen .profile-row span {
  color: #eefbf4;
  font-size: clamp(12px, 3.4vw, 14px);
  line-height: 1.25;
}

.app-shell .profile-screen .profile-row b {
  flex: 0 0 auto;
  max-width: 46%;
  color: #f5d688;
  font-size: clamp(11px, 3vw, 13px);
  line-height: 1.2;
  text-align: right;
}

.app-shell .profile-screen .profile-row-support {
  border-color: rgba(89, 193, 217, .34);
  background: linear-gradient(135deg, rgba(7, 91, 91, .86), rgba(2, 43, 36, .96));
}

.app-shell .profile-screen .profile-row-channel-subscribed {
  border-color: rgba(87, 213, 151, .34);
  background: linear-gradient(135deg, rgba(7, 103, 69, .88), rgba(2, 46, 34, .96));
}

.app-shell .profile-screen .profile-row-channel-unsubscribed {
  border-color: rgba(224, 166, 75, .34);
  background: linear-gradient(135deg, rgba(91, 67, 19, .66), rgba(3, 47, 35, .96));
}

.app-shell .profile-screen .profile-row-sound {
  border-color: rgba(240, 201, 109, .27);
  background: linear-gradient(135deg, rgba(72, 63, 24, .48), rgba(2, 44, 33, .96));
}

.app-shell .profile-screen .settings-picker {
  margin: -2px 0 10px;
  padding: 9px;
  border: 1px solid rgba(112, 222, 172, .22);
  background: linear-gradient(145deg, rgba(3, 67, 49, .98), rgba(1, 31, 24, .99));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 16px 34px rgba(0,0,0,.28);
}

.app-shell .profile-screen .settings-picker button {
  min-height: 44px;
  border-color: rgba(111, 220, 171, .10);
  color: #dcefe5;
  background: rgba(20, 123, 84, .14);
}

.app-shell .profile-screen .settings-picker button.selected {
  border-color: rgba(246, 211, 124, .48);
  color: #fff0bd;
  background: linear-gradient(135deg, rgba(25, 135, 91, .42), rgba(127, 91, 24, .30));
}

/* Give every card a visible breathing gap from the next one. */
.app-shell .wallet-screen .summary-row,
.app-shell .wallet-screen .payment-methods,
.app-shell .referrals-screen .referral-callout,
.app-shell .referrals-screen .referral-link,
.app-shell .referrals-screen .referral-rules,
.app-shell .tasks-screen .task-list {
  margin-bottom: 10px;
}

@media (max-width: 360px), (max-height: 700px) {
  .app-shell .tasks-screen,
  .app-shell .wallet-screen,
  .app-shell .referrals-screen,
  .app-shell .profile-screen {
    padding-bottom: 10px;
  }

  .app-shell .profile-screen .profile-row {
    min-height: 54px;
    margin-bottom: 7px;
    padding: 8px 12px;
  }

  .app-shell .profile-screen .profile-row b {
    max-width: 43%;
  }
}