/* 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(226, 119, 141, .24);
  border-radius: 19px;
  background:
    radial-gradient(circle at 92% 0, rgba(215, 186, 117, .10), transparent 36%),
    linear-gradient(140deg, rgba(61, 13, 23, .88), rgba(30, 6, 11, .94));
  box-shadow: inset 0 1px rgba(255, 255, 255,.10), 0 10px 24px rgba(17, 18, 20,.18);
}

.app-shell .profile-screen .profile-row {
  min-height: 60px;
  margin-bottom: 9px;
  padding: 10px 16px;
  gap: 12px;
  border: 1px solid rgba(224, 116, 139, .18);
  color: #fbeef1;
  background:
    radial-gradient(circle at 100% 0, rgba(207, 172, 90, .07), transparent 38%),
    linear-gradient(135deg, rgba(53, 11, 20, .91), rgba(28, 6, 10, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255,.07), 0 8px 20px rgba(17, 18, 20,.16);
}

.app-shell .profile-screen .profile-row span {
  color: #fbeef1;
  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: #e2cd9b;
  font-size: clamp(11px, 3vw, 13px);
  line-height: 1.2;
  text-align: right;
}

.app-shell .profile-screen .profile-row-support {
  border-color: rgba(217, 89, 116, .34);
  background: linear-gradient(135deg, rgba(63, 13, 24, .86), rgba(29, 6, 11, .96));
}

.app-shell .profile-screen .profile-row-channel-subscribed {
  border-color: rgba(213, 87, 113, .34);
  background: linear-gradient(135deg, rgba(71, 15, 27, .88), rgba(31, 7, 12, .96));
}

.app-shell .profile-screen .profile-row-channel-unsubscribed {
  border-color: rgba(208, 173, 91, .34);
  background: linear-gradient(135deg, rgba(85, 67, 25, .66), rgba(32, 7, 12, .96));
}

.app-shell .profile-screen .profile-row-sound {
  border-color: rgba(219, 192, 130, .27);
  background: linear-gradient(135deg, rgba(72, 58, 24, .48), rgba(30, 6, 11, .96));
}

.app-shell .profile-screen .settings-picker {
  margin: -2px 0 10px;
  padding: 9px;
  border: 1px solid rgba(222, 112, 135, .22);
  background: linear-gradient(145deg, rgba(45, 10, 17, .98), rgba(21, 4, 8, .99));
  box-shadow: inset 0 1px rgba(255, 255, 255,.06), 0 16px 34px rgba(17, 18, 20,.28);
}

.app-shell .profile-screen .settings-picker button {
  min-height: 44px;
  border-color: rgba(220, 111, 134, .10);
  color: #efdce0;
  background: rgba(92, 20, 35, .14);
}

.app-shell .profile-screen .settings-picker button.selected {
  border-color: rgba(223, 201, 147, .48);
  color: #f0e5cc;
  background: linear-gradient(135deg, rgba(103, 22, 39, .42), rgba(117, 92, 34, .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%;
  }
}