@media (max-width: 359px) {
  .app-shell { padding-inline: max(12px, var(--safe-left)); }
  .screen-heading .card-header { align-items: flex-start; flex-direction: column; }
  .screen-heading h1 { overflow-wrap: normal; word-break: normal; }
  .hero-card { min-height: 310px; padding: 20px; }
  .hero-card h1 { font-size: 2.5rem; }
  .carousel-rail { grid-auto-columns: 90%; }
  .style-grid, .occasion-grid, .wardrobe-grid { gap: 9px; }
  .style-card { min-height: 176px; }
  .style-art { height: 84px; }
  .bottom-nav { padding-inline: 3px; }
  .nav-link { font-size: 0.64rem; }
  .exploration-option { min-height: 44px; padding: 11px 12px; }
  .exploration-option-hint { font-size: 0.78rem; }
  .composer-board { min-height: 380px; padding-inline: 10px; }
  .composer-stack { height: 340px; }
}
@media (min-width: 375px) { .app-shell { --tested-width: 375px; } }
@media (max-width: 430px) {
  .language-card, .future-plan { align-items: stretch; flex-direction: column; }
  .language-select { width: 100%; }
  .plan-grid { grid-template-columns: 1fr; }
  .support-section-heading { align-items: flex-start; flex-direction: column; }
  .support-section-heading .caption { text-align: left; }
  .faq-category-heading { align-items: flex-start; flex-direction: column; }
  .support-privacy-link { width: 100%; }
}
@media (min-width: 390px) { .app-shell { --tested-width: 390px; } }
@media (min-width: 430px) {
  .app-shell { --tested-width: 430px; padding-inline: max(22px, var(--safe-left)); }
  .carousel-rail { grid-auto-columns: minmax(270px, 76%); }
  .wardrobe-grid { gap: 16px; }
}
@media (min-width: 720px) {
  .app-shell { padding: calc(var(--safe-top) + 20px) 28px 40px; }
  .app-main { margin-left: 96px; }
  .bottom-nav { top: 0; right: auto; width: 88px; min-height: 100vh; min-height: 100dvh; grid-template-columns: 1fr; grid-template-rows: repeat(5, min-content); align-content: center; gap: 8px; padding: calc(var(--safe-top) + 16px) 8px calc(var(--safe-bottom) + 16px); border-top: 0; border-right: 1px solid rgb(123 63 92 / 0.11); box-shadow: 12px 0 32px rgb(81 48 57 / 0.06); }
  .nav-plus { margin-top: 0; }
  .carousel-controls { display: flex; }
  .carousel-rail { grid-auto-columns: minmax(280px, 38%); }
  .hero-card { min-height: 380px; }
  .hero-card h1 { max-width: 11ch; }
  .style-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .occasion-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wardrobe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vto-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1020px) {
  .home-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); align-items: start; gap: 24px; }
  .hero-card { min-height: 440px; }
  .wardrobe-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .composer-layout { display: grid; grid-template-columns: minmax(420px, 1.2fr) minmax(320px, 0.8fr); align-items: start; gap: 22px; }
  .profile-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
}
@media (hover: hover) and (pointer: fine) {
  .garment-card:hover, .style-card:hover, .decision-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
}
@media print {
  .bottom-nav, .top-actions, .carousel-controls, .button { display: none !important; }
  .app-shell, .app-main { margin: 0; padding: 0; }
}
/* A 320px desktop viewport can reserve 15px for its scrollbar. */
@media (max-width: 360px) {
  html, body { min-width: 0; }
}