@media (min-width: 320px) {
  .container, .app-shell { width: min(100% - 20px, 1200px); }
}

@media (min-width: 375px) {
  .container, .app-shell { width: min(100% - 24px, 1200px); }
}

@media (min-width: 414px) {
  .container, .app-shell { width: min(100% - 28px, 1200px); }
}

@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-profile-stats { gap: 10px; }
  .public-profile-stats > div { width: auto; min-width: 0; flex: 1 1 0; min-height: 78px; padding: 10px 8px; }
  .public-profile-stats .profile-stat-icon { width: 30px; height: 30px; }
  .public-profile-stats strong { font-size: 1rem; }
  .public-profile-stats small { font-size: 0.68rem; }
  .public-profile-stats > div:nth-child(3) strong { font-size: 0.72rem; }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .hero-grid { grid-template-columns: 1.08fr 0.92fr; }
}

@media (max-width: 767px) {
  .brand { font-size: 1.2rem; }
  .navbar {
    gap: 10px;
    flex-direction: row-reverse;
    padding-right: 0;
  }
  .brand-logo {
    width: clamp(120px, 28vw, 170px);
    max-height: 54px;
  }
  .navbar .brand {
    position: absolute;
    top: 2px;
    right: 8px;
    transform: none;
    z-index: 4;
  }
  .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
  }
  .navbar .brand { order: 0; }
  .navbar .nav-actions {
    order: 0;
    margin-left: 0;
    margin-right: auto;
  }
  .nav-actions { gap: 8px; }
  .topbar .pill-button {
    padding: 0.7rem 0.9rem;
    font-size: 0.86rem;
  }
  .message-head { align-items: flex-start; }
  .page-intro .pill-button { width: auto; }
  .public-profile-intro, .public-profile-footer { align-items: flex-start; flex-direction: column; }
  .public-profile-panel { padding: 20px; }
  .public-profile-identity .page-title { font-size: 2.1rem; }
  .feature-icon {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }
  .support-page-grid { grid-template-columns: 1fr; }
  .hero-meta {
    gap: 10px;
    font-size: 0.8rem;
  }
  .hero-visual {
    min-height: 500px;
  }
  .ghost-card.card-a {
    top: 18px;
    left: 16px;
    width: calc(100% - 32px);
    padding: 14px;
  }
  .ghost-card.card-c {
    top: 154px;
    left: 16px;
    width: calc(100% - 32px);
    padding: 14px;
    transform: none;
  }
  .ghost-card.card-b {
    right: 16px;
    bottom: 18px;
    width: calc(100% - 32px);
    padding: 14px;
  }
}

@media (max-width: 600px) {
  .chrome-tools { gap: 6px; }
  .site-search { width: 84px; max-width: none; padding: 3px 5px; flex: 0 0 84px; }
  .chrome-coins, .chrome-dollars { min-width: 84px; flex: 0 0 84px; min-height: 32px; }
  .site-search-results { position: fixed; top: 72px; left: 10px; right: 10px; width: auto; max-width: none; max-height: 260px; z-index: 2000; padding: 6px; }
  .site-search-results a { min-width: 0; gap: 8px; padding: 8px 10px; }
  .site-search-results a:nth-child(1) { min-height: 82px; }
  .site-search-results a:nth-child(2), .site-search-results a:nth-child(3) { min-height: 58px; }
  .search-result-avatar { width: 30px; height: 30px; flex-basis: 30px; }
  .site-search-results a:nth-child(1) .search-result-avatar { width: 40px; height: 40px; flex-basis: 40px; }
  .search-result-copy { min-width: 0; }
  .search-result-copy strong { font-size: 0.72rem; }
  .search-result-copy small { font-size: 0.58rem; }
  .search-result-copy strong,
  .search-result-copy small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; overflow-wrap: normal; }
  .search-show-all { min-height: 32px; font-size: 0.68rem; }
  .chrome-coins, .chrome-dollars { min-height: 28px; padding: 0 7px; }
  .chrome-coins strong, .chrome-dollars strong { font-size: 0.7rem; }
  .chrome-coins > span, .chrome-dollars > span { width: 14px; height: 14px; font-size: 0.55rem; }
  .chrome-icon-button, .chrome-menu-button { width: 40px; height: 40px; flex-basis: 40px; }
  .notification-button img { width: 22px; height: 22px; }
  .site-search { padding: 6px 8px; }
  .site-search input { font-size: 0.7rem; }
}

@media (max-width: 480px) {
  .site-search { width: 100%; max-width: none; }
  .site-search-results { top: 64px; left: 8px; right: 8px; max-height: 240px; }
  .search-results-grid { gap: 8px; }
  .search-result-card { min-height: 74px; gap: 8px; padding: 10px 10px; border-radius: 14px; }
  .search-result-card-copy { gap: 1px; }
  .search-result-card-copy strong { font-size: 1.05rem; line-height: 1.25; }
  .search-result-card-copy small { font-size: 0.68rem; }
  .search-result-card-copy span { font-size: 0.6rem; }
  .search-result-card-meta { gap: 8px; }
  .search-result-premium { min-width: 52px; height: 34px; padding: 0 6px; border-radius: 10px; font-size: 0.42rem; }
  .search-result-card-avatar { width: 42px; height: 42px; border-width: 2px; }
  .navbar { width: calc(100% - 20px); box-sizing: border-box; }
  .store-page .page-intro { align-items: stretch; flex-direction: column; gap: 12px; margin-bottom: 18px; }
  .store-page .page-intro .page-title { font-size: 1.5rem; line-height: 1.3; }
  .store-intro-copy { font-size: 0.8rem; }
  .store-balance-link { width: auto; min-height: 0; align-self: flex-start; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 9px 12px; }
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .store-section-heading { align-items: flex-start; flex-direction: column; }
  .store-banner { padding: 20px 18px; }
  .store-banner-flower { font-size: 3rem; }
  .store-product { min-height: 190px; padding: 11px; }
  .product-icon { width: 42px; height: 42px; margin-bottom: 8px; font-size: 1.35rem; }
  .product-copy h3 { font-size: 0.88rem; }
  .product-copy p { min-height: 48px; margin-bottom: 8px; font-size: 0.68rem; }
  .collection-heading { align-items: flex-start; flex-direction: column; }
  .collection-count { width: 100%; box-sizing: border-box; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-item { gap: 10px; padding: 13px; }
  .collection-item-icon { width: 46px; height: 46px; font-size: 1.4rem; }
  .wallet-actions-grid { grid-template-columns: 1fr; }
  .wallet-balance-card { padding: 22px 18px; }
  .wallet-action { padding: 16px; }
  .wallet-package-grid { gap: 6px; }
  .wallet-package { min-height: 68px; }
  .anonymous-message-actions { align-items: stretch; flex-direction: column; }.anonymous-message-actions > * { width: 100%; }
  .wallet-tabs { margin-top: 14px; }
  .wallet-tab { font-size: 0.67rem; }
  .wallet-input-row { align-items: stretch; flex-direction: column; }
  .wallet-input-row .pill-button { width: 100%; }
  .wallet-history { margin-top: 14px; padding: 16px; }
  .wallet-history .section-header { align-items: center; margin-bottom: 0; }
  .wallet-history .section-title { font-size: 1.38rem; line-height: 1.25; }
  .wallet-history [data-wallet-count] { font-size: 0.72rem; }
  .wallet-transaction { grid-template-columns: auto 1fr; gap: 8px; padding: 10px 0; }
  .wallet-transaction > div strong { font-size: 0.82rem; }
  .wallet-transaction small { margin-top: 1px; font-size: 0.64rem; }
  .wallet-transaction .transaction-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 1.05rem; }
  .transaction-amount { grid-column: 2; font-size: 0.74rem; }
  .page-shell { padding-top: 36px; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .section { padding-block: 24px; }
  .pill-button {
    padding: 0.72rem 1rem;
    font-size: 0.85rem;
  }
  .nav-actions {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .hero-actions {
    gap: 10px;
  }
  .hero-meta span {
    font-size: 0.78rem;
  }
  .dashboard-heading .page-title { font-size: 1.8rem; }
  .dashboard-heading .pill-button { min-width: 180px; }
  .share-new-button { min-width: 132px; padding: 0.62rem 0.82rem; font-size: 0.78rem; }
  .dashboard-subtitle { font-size: 0.9rem; }
  .daily-rewards-panel { grid-template-columns: 1fr; gap: 12px; padding: 16px; }.daily-rewards-days { gap: 3px; }.daily-reward-day { min-height: 52px; }.daily-reward-day b { font-size: 0.5rem; }.daily-reward-day strong { font-size: 0.82rem; }.daily-claim-button { width: 100%; }.wheel-card { padding: 24px 12px; }.wheel span:nth-of-type(1) { transform: translateY(-30vw); }.wheel span:nth-of-type(2) { transform: translate(22vw,-22vw); }.wheel span:nth-of-type(3) { transform: translate(30vw); }.wheel span:nth-of-type(4) { transform: translate(22vw,22vw); }.wheel span:nth-of-type(5) { transform: translateY(30vw); }.wheel span:nth-of-type(6) { transform: translate(-22vw,22vw); }.wheel span:nth-of-type(7) { transform: translate(-30vw); }.wheel span:nth-of-type(8) { transform: translate(-22vw,-22vw); }
  .wheel-card { padding: 24px 12px; }.wheel span:nth-of-type(1) { transform: translateY(-30vw); }.wheel span:nth-of-type(2) { transform: translate(22vw,-22vw); }.wheel span:nth-of-type(3) { transform: translate(30vw); }.wheel span:nth-of-type(4) { transform: translate(22vw,22vw); }.wheel span:nth-of-type(5) { transform: translateY(30vw); }.wheel span:nth-of-type(6) { transform: translate(-22vw,22vw); }.wheel span:nth-of-type(7) { transform: translate(-30vw); }.wheel span:nth-of-type(8) { transform: translate(-22vw,-22vw); }
  .wheel-shortcut { right: 12px; bottom: 112px; width: 64px; height: 64px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }.wheel-shortcut-icon { width: 64px; height: 64px; border: 0 !important; border-radius: 0 !important; background: transparent !important; }.wheel-shortcut-icon img { width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: contain; }.wheel-shortcut-close { width: 20px; height: 20px; }
  .dashboard-hero { padding: 22px; gap: 18px; }
  .dashboard-hero h2 { font-size: 1.65rem; }
  .stat-card h2 { font-size: 1.65rem; }
  .dashboard-panel .section-title { font-size: 1.25rem; }
  .share-creator .section-header { align-items: center; }
  .share-creator .section-title { font-size: 1.3rem; }
  .share-limit { font-size: 0.7rem; }
  .link-row { flex-direction: column; }
  .link-row .pill-button { width: 100%; }
  .share-actions { flex-direction: column; }
  .dashboard-panel { padding: 18px; }
  .support-widget { left: 16px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
  .support-fab { width: 54px; height: 54px; }
  .support-menu { width: min(230px, calc(100vw - 32px)); }
  .messages-page-title { margin-bottom: 4px; font-size: 1.28rem; line-height: 1.25; letter-spacing: 0; }
  .messages-page-title + .message-filters { width: auto; justify-content: flex-start; }
  .messages-page-title + .message-filters .action-chip { flex: 0 0 auto; min-width: 74px; min-height: 30px; padding: 5px 14px; border-radius: 8px; font-size: 0.7rem; }
  .account-photo-editor { align-items: flex-start; flex-wrap: wrap; }
  .account-photo-editor > div:nth-child(2) { min-width: calc(100% - 86px); }
  .account-photo-editor .profile-upload { margin-right: 80px; }
  .account-cover-editor { align-items: flex-start; flex-wrap: wrap; }
  .account-cover-editor > div:nth-child(2) { min-width: calc(100% - 86px); }
  .account-cover-editor .cover-preview { order: -1; width: 100%; height: 116px; }
  .account-cover-editor .profile-upload { margin-right: 0; }
  .profile-page-content { padding: 22px 16px; }
  .profile-page-stats { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gift-dialog { max-height: 80vh; }
  .public-account-card .profile-page-stats { display: flex; width: 100%; grid-template-columns: none; gap: 5px; }
  .public-account-card .profile-page-stats div { min-width: 0; flex: 1 1 0; padding-inline: 6px; }
  .site-search-results { width: 100%; }
  .chat-page-shell { padding-top: 22px; }
  .chat-page-shell .chat-page-wrap { width: 100%; max-width: none; }
  .chat-messages { min-height: 56vh; padding: 16px 12px; }
  .chat-bubble { max-width: 86%; }
}

@media (max-width: 600px) {
  .wheel > span { top: 50% !important; left: 50% !important; width: auto !important; height: auto !important; margin: 0 !important; transform: translate(-50%, -50%) rotate(var(--wheel-angle)) translateY(-25vw) rotate(calc(var(--wheel-angle) * -1)) !important; }
  .wheel > span > .wheel-reward-icon { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; transform: none !important; }
  .wheel .wheel-reward-icon { font-size: 1.5rem !important; }
  .wheel .wheel-coins { font-size: 0.7rem !important; }
  .wheel .wheel-coins i { font-size: 0.9rem !important; }
}

@media (min-width: 601px) {
  .wheel > span { top: 50% !important; left: 50% !important; width: auto !important; height: auto !important; margin: 0 !important; transform: translate(-50%, -50%) rotate(var(--wheel-angle)) translateY(-105px) rotate(calc(var(--wheel-angle) * -1)) !important; }
  .wheel > span > .wheel-reward-icon { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; transform: none !important; }
  .wheel .wheel-reward-icon { font-size: 1.7rem !important; }
  .wheel .wheel-coins { font-size: 0.78rem !important; }
  .wheel .wheel-coins i { font-size: 1rem !important; }
}

/* Keep the existing mobile layout for real mobile devices in Desktop Site mode. */
html.is-mobile-device .grid-3,
html.is-mobile-device .store-grid,
html.is-mobile-device .collection-grid { grid-template-columns: 1fr; }

html.is-mobile-device .hero-grid,
html.is-mobile-device .dashboard-hero,
html.is-mobile-device .store-hero-card { grid-template-columns: 1fr; }

html.is-mobile-device .card-grid[data-messages-list] {
  width: 100%;
  margin-inline-start: 0;
  justify-items: stretch;
}

html.is-mobile-device .card-grid[data-messages-list] > .message-card,
html.is-mobile-device .card-grid[data-messages-list] > [data-message-id] {
  width: 100%;
  margin-inline-start: 0;
  justify-self: stretch;
}

html.is-mobile-device .message-card.is-collapsed {
  width: calc(100% - 10px);
  margin-inline-start: 0;
  justify-self: end;
}

html.is-mobile-device .settings-quick-nav {
  display: grid;
  left: 50%;
  bottom: 0;
  width: min(96vw, 520px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 8px max(12px, env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  transform: translateX(-50%);
}

html.is-mobile-device .settings-quick-link span { display: none; }
html.is-mobile-device .settings-quick-link.is-primary span { display: none; }
html.is-mobile-device .page-shell { padding-bottom: 110px; }

html.is-mobile-device .wheel > span {
  top: 50% !important;
  left: 50% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(var(--wheel-angle)) translateY(-25vw) rotate(calc(var(--wheel-angle) * -1)) !important;
}

html.is-mobile-device .wheel > span > .wheel-reward-icon {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

html.is-mobile-device .wheel .wheel-reward-icon { font-size: 1.5rem !important; }
html.is-mobile-device .wheel .wheel-coins { font-size: 0.7rem !important; }
html.is-mobile-device .wheel .wheel-coins i { font-size: 0.9rem !important; }