@media (max-width: 640px) {
  body.app-layout .universal-header {
    grid-template-columns: auto 1fr !important;
  }

  .universal-header .header-search {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    order: 4;
    margin-top: 8px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .universal-header .header-controls {
    margin-left: auto;
  }

  .universal-header .logo h2 {
    font-size: 0.98rem;
  }

  .universal-header #search-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
  }

  .universal-header #search-bar {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 0.92rem;
    color: #eef3ff !important;
    background: #12203f !important;
    border-color: #2b4ca3 !important;
  }

  .universal-header #search-bar::placeholder {
    color: #9fb1dc !important;
  }

  .universal-header .header-search .input-wrapper {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .profile-preview-content {
    width: 92vw !important;
    max-width: 92vw !important;
    max-height: 88dvh !important;
    padding: 14px !important;
    gap: 12px !important;
    overflow: auto !important;
  }

  .profile-preview-image-box.profile-preview-circle {
    width: min(62vw, 210px) !important;
    height: min(62vw, 210px) !important;
    min-height: min(62vw, 210px) !important;
  }

  .profile-action-row {
    width: 100% !important;
    gap: 8px !important;
  }

  .btn-danger,
  .btn-primary,
  .btn-secondary,
  .btn-success {
    padding: 10px !important;
    font-size: 0.95rem !important;
  }

  .preview-zoom-controls {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  body.app-layout .universal-header .header-search {
    order: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    grid-template-columns: none !important;
  }

  body.app-layout #nav-menu {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 72px !important;
  }
}