@media (max-width: 700px) {
  .premium-view {
    box-sizing: border-box;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .premium-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 14px 12px;
  }

  .premium-hero {
    padding-inline: 4px;
  }

  .premium-feature-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .premium-comparison {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .premium-comparison-row {
    min-width: 350px;
  }

  .premium-plan-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .app .premium-manage-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .premium-manage-actions > button {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 11px 14px;
    line-height: 1.25;
    white-space: normal;
    touch-action: manipulation;
  }
}

@media (max-width: 380px) {
  .premium-page {
    padding-inline: 9px;
  }

  .premium-comparison-row {
    min-width: 330px;
  }
}

.radar-premium-cta {
  display: none;
}

.radar-premium-cta[hidden],
.radar-premium-upgrade-btn[hidden],
.radar-premium-active[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  .app .radar-premium-cta,
  .app:has(.radar-view:not(.hidden)) .radar-premium-cta {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-content: start;
    width: 100%;
    min-width: 0;
    margin: 8px 0 0;
    padding: 0 12px 12px;
    box-sizing: border-box;
    position: relative;
    z-index: 4;
  }

  .app .radar-premium-upgrade-btn,
  .app:has(.radar-view:not(.hidden)) .radar-premium-upgrade-btn {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 51px;
    margin: -1.5% -1.5%;
    padding: 13px 16px;
    line-height: 1.2;
    white-space: normal;
    touch-action: manipulation;
  }

  .app .radar-premium-active,
  .app:has(.radar-view:not(.hidden)) .radar-premium-active {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid rgba(255, 112, 171, 0.42);
    border-radius: 12px;
    background: rgba(255, 79, 159, 0.1);
    color: #ffd6e8;
    font-weight: 800;
    text-align: center;
  }

  /* Reserve a visible slot for Premium between Adjust Radar and the bottom nav. */
  .app:has(.radar-view:not(.hidden)) .radar-premium-cta {
    position: absolute;
    right: 8px;
    bottom: -30px;
    left: 8px;
    min-height: 48px;
    margin: 0;
    padding: 0 12px;
    z-index: 1260;
    pointer-events: auto;
  }

  .app:has(.radar-view:not(.hidden)) .radar-slider-row {
    bottom: 34px !important;
  }

  .app:has(.radar-view:not(.hidden)) .top-control-row {
    bottom: 84px !important;
  }

  #radarPremiumCta:has(#radarPremiumActive:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .app:has(.radar-view:not(.hidden)) .radar-premium-active {
    width: auto !important;
    min-width: 0;
    padding: 8px 9px;
    font-size: 10px;
    white-space: nowrap;
  }
}