/* Preserve the reference grids while allowing translated labels to wrap. */
.shortcut strong { white-space: normal; overflow-wrap: anywhere; }
.shortcut small { overflow-wrap: anywhere; }
.team-facts > div, .summary-three > div, .summary-three span,
.service-progress-grid > div, .progress-sub > div { min-width: 0; }
.service-plan-name, .account-stat strong, .account-stat small,
.summary-three strong { overflow-wrap: anywhere; }
.team-facts strong { line-height: 1.3; }
.account-code { flex-wrap: wrap; }
.account-code button, .account-info > button, .status-row,
.notification-button, .dialog-close, .vip-select { min-height: 44px; }
.notification-button, .dialog-close { min-width: 44px; }
.header-actions { gap: clamp(8px, 3vw, 22px); }
.topbar { padding-top: env(safe-area-inset-top); height: calc(clamp(65px,15vw,108px) + env(safe-area-inset-top)); }
.bottom-nav { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); box-sizing: border-box; height: calc(clamp(66px,12vw,87px) + env(safe-area-inset-bottom)); }
dialog { max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; padding-top: 44px; }
dialog input, dialog textarea, select { font-size: 16px; }
button { touch-action: manipulation; }
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #008c69; outline-offset: 2px; }
@media (max-width:430px) {
  .account-service-grid .shortcut strong { font-size: 10px; line-height: 1.35; }
  .account-service-grid .shortcut small { font-size: 9px; line-height: 1.4; color: #68766f; }
  .account-service-grid .shortcut { align-items: flex-start; min-height: 82px; }
  .account-service-grid .shortcut-icon { padding-top: 3px; }
  .account-stat > small, .balance-card > small, .shortcut small { color: #68766f; }
  .progress-sub { flex-wrap: wrap; }
  .progress-sub > div + div { padding-left: 0; border-left: 0; }
  .account-actions .big-action { padding: 12px 10px; gap: 8px; }
}
@media (max-width:350px) {
  .profile-label strong { font-size: 15px; }
  .profile-label small { font-size: 10px; }
  .account-button { gap: 8px; }
  .topbar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .team-facts > div { padding-left: 9px; padding-right: 9px; }
  .service-progress-grid { grid-template-columns: minmax(0,1.3fr) 10px minmax(0,1fr) minmax(0,1fr); gap: 5px; }
  .status-row { grid-template-columns: 17px minmax(0,1.5fr) minmax(0,.45fr) minmax(0,.8fr); }
}