/* Compact-phone hardening for Frontend V2. Keep this layer presentation-only. */
@media (max-width: 480px) {
  body[data-ui-version="2.0"] .shell {
    width: calc(100% - 20px);
    max-width: 100%;
    padding: 18px 0 30px;
  }

  body[data-ui-version="2.0"] .page-header {
    min-width: 0;
    padding-right: 0;
    gap: 12px;
  }

  body[data-ui-version="2.0"] .page-header > div,
  body[data-ui-version="2.0"] .source-card,
  body[data-ui-version="2.0"] #result,
  body[data-ui-version="2.0"] .song-head,
  body[data-ui-version="2.0"] .song-details,
  body[data-ui-version="2.0"] .transpose-panel,
  body[data-ui-version="2.0"] .stems-panel,
  body[data-ui-version="2.0"] .melody-panel,
  body[data-ui-version="2.0"] .panel-heading,
  body[data-ui-version="2.0"] .v2-locked-stage,
  body[data-ui-version="2.0"] .v2-output-heading,
  body[data-ui-version="2.0"] .downloads,
  body[data-ui-version="2.0"] .notation-draft,
  body[data-ui-version="2.0"] .notation-renderer {
    min-width: 0;
    max-width: 100%;
  }

  body[data-ui-version="2.0"] h1 {
    font-size: clamp(1.65rem, 9vw, 2rem);
    overflow-wrap: anywhere;
  }

  body[data-ui-version="2.0"] .page-header .compact {
    flex: 0 0 auto;
    min-width: 0;
    padding-inline: 12px;
  }

  body[data-ui-version="2.0"] .card,
  body[data-ui-version="2.0"] .status {
    padding: 18px 14px;
    border-radius: 14px;
  }

  body[data-ui-version="2.0"] .source-card.v2-has-result {
    padding: 16px 14px;
  }

  body[data-ui-version="2.0"] .input-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-ui-version="2.0"] .primary-action,
  body[data-ui-version="2.0"] .panel-heading .primary-action {
    width: 100%;
    min-width: 0;
  }

  body[data-ui-version="2.0"] .analysis-settings > summary,
  body[data-ui-version="2.0"] .v2-bitrate-details > summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  body[data-ui-version="2.0"] .analysis-settings > summary small,
  body[data-ui-version="2.0"] .v2-bitrate-details > summary strong,
  body[data-ui-version="2.0"] .v2-bitrate-details > summary span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-ui-version="2.0"] .ai-key-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  body[data-ui-version="2.0"] .ai-key-option > div {
    min-width: 0;
  }

  body[data-ui-version="2.0"] .ai-key-option small,
  body[data-ui-version="2.0"] .song-details,
  body[data-ui-version="2.0"] .v2-friendly-status,
  body[data-ui-version="2.0"] .v2-output-heading,
  body[data-ui-version="2.0"] .v2-output-key-note {
    overflow-wrap: anywhere;
  }

  body[data-ui-version="2.0"] .song-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  body[data-ui-version="2.0"] .song-head img {
    width: 100%;
    max-width: 100%;
  }

  body[data-ui-version="2.0"] .key-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-ui-version="2.0"] .shift-grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(96px, 32vw);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0 34% 6px;
    scroll-padding-inline: 34%;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body[data-ui-version="2.0"] .shift-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-ui-version="2.0"] .shift-label {
    display: none;
  }

  body[data-ui-version="2.0"] .shift-option,
  body[data-ui-version="2.0"] .shift-button {
    min-width: 0;
  }

  body[data-ui-version="2.0"] .shift-option {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  body[data-ui-version="2.0"] .shift-button {
    white-space: normal;
  }

  body[data-ui-version="2.0"] .v2-output-heading,
  body[data-ui-version="2.0"] .v2-locked-stage .v2-lock-row,
  body[data-ui-version="2.0"] .panel-heading,
  body[data-ui-version="2.0"] .notation-draft-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-ui-version="2.0"] .v2-output-heading,
  body[data-ui-version="2.0"] .v2-bitrate-details > summary,
  body[data-ui-version="2.0"] .v2-friendly-status,
  body[data-ui-version="2.0"] .notation-draft {
    padding-inline: 12px;
  }

  body[data-ui-version="2.0"] .notation-downloads {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  body[data-ui-version="2.0"] .notation-downloads button,
  body[data-ui-version="2.0"] .downloads button,
  body[data-ui-version="2.0"] .downloads .download {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  body[data-ui-version="2.0"] .downloads.v2-output-panel {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    align-items: stretch;
  }

  body[data-ui-version="2.0"] .downloads.v2-output-panel [data-download] {
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 12px 16px;
    font-size: .9rem;
    line-height: 1.25;
    white-space: normal;
  }

  body[data-ui-version="2.0"] .notation-renderer {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  body[data-ui-version="2.0"] .jianpu-v2 {
    max-width: none;
  }
}


@media (max-width: 480px) {
  .source-unit-option { grid-template-columns: 1rem minmax(0, 1fr); min-height: 56px; }
  .source-unit-state { grid-column: 2; }
  .v2-song-actions > button { min-height: 44px; }
}