/* Legacy mobile unification layer. Keep before page-scoped CSS files. */
/* 2026-05-12 production mobile unification:
   keep every user-facing screen in the same Polymarket-like visual language
   as the homepage: white cards, subtle borders, soft shadows, compact type. */
@media (min-width: 0px) {
  :root {
    --vp-card-bg: #ffffff;
    --vp-page-bg: #f7f8fa;
    --vp-line: #e5e7eb;
    --vp-line-strong: #d7dde5;
    --vp-ink: #111827;
    --vp-muted: #6b7280;
    --vp-teal: #14b8a6;
    --vp-green-soft: #e8f7ef;
    --vp-red-soft: #fff0f0;
    --vp-blue-soft: #eef4ff;
    --vp-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
  }

  html,
  body,
  .mobile-app,
  .mobile-home,
  .mobile-page,
  .mobile-topic-detail-screen,
  .mobile-room-screen,
  .modal-backdrop,
  .wallet-deposit-overlay {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .mobile-app::-webkit-scrollbar,
  .mobile-home::-webkit-scrollbar,
  .mobile-page::-webkit-scrollbar,
  .mobile-topic-detail-screen::-webkit-scrollbar,
  .mobile-room-screen::-webkit-scrollbar,
  .modal-backdrop::-webkit-scrollbar,
  .wallet-deposit-overlay::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .mobile-app,
  .mobile-topic-detail-screen,
  .mobile-room-screen,
  .modal-backdrop,
  .wallet-deposit-overlay {
    background:
      radial-gradient(circle at 20% -10%, rgba(19, 184, 166, 0.08), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, var(--vp-page-bg) 48%, #ffffff 100%) !important;
    color: var(--vp-ink) !important;
  }

  .mobile-page,
  .topic-detail-body,
  .room-view-body,
  .quick-room-body {
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }

  .topic-detail-shell,
  .room-view-shell,
  .quick-room-shell {
    width: min(100vw, 560px) !important;
    margin: 0 auto !important;
    background: var(--vp-page-bg) !important;
    color: var(--vp-ink) !important;
  }

  .topic-detail-toolbar,
  .room-view-toolbar,
  .quick-room-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    min-height: 54px !important;
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px !important;
    border-bottom: 1px solid var(--vp-line) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    color: var(--vp-ink) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
  }

  .topic-detail-back,
  .room-view-back,
  .room-view-more,
  .party-toolbar-btn,
  .party-toolbar-close {
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid var(--vp-line) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--vp-ink) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  .topic-detail-toolbar-label,
  .room-view-toolbar-label,
  .party-toolbar-title {
    color: var(--vp-ink) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  .topic-detail-panel,
  .topic-detail-feed,
  .topic-detail-core,
  .topic-detail-roomline,
  .topic-detail-meta,
  .party-stage,
  .party-main-card,
  .party-side-card,
  .party-chat,
  .party-bet-panel,
  .quick-room-card,
  .wallet-panel,
  .wallet-balance-card,
  .messages-head,
  .wallet-head,
  .message-card,
  .profile-identity-card,
  .profile-panel,
  .agent-hero,
  .agent-level-card,
  .agent-rule-card,
  .agent-section,
  .auth-modal,
  .topic-create-modal,
  .topic-rule-modal,
  .bet-modal,
  .wallet-deposit-progress {
    border: 1px solid var(--vp-line) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--vp-ink) !important;
    box-shadow: var(--vp-shadow) !important;
  }

  .topic-detail-panel,
  .topic-detail-feed,
  .topic-detail-core,
  .wallet-panel,
  .profile-panel,
  .agent-level-card,
  .agent-rule-card,
  .agent-section {
    padding: 14px !important;
  }

  .topic-detail-stack,
  .agent-stack,
  .message-list,
  .wallet-record-list,
  .profile-list,
  .profile-setting-list {
    gap: 10px !important;
  }

  .topic-detail-panel .pm-topic-cover,
  .topic-detail-panel .pm-rule-summary,
  .topic-detail-core,
  .topic-detail-feed,
  .topic-detail-meta,
  .topic-detail-roomline {
    margin-top: 10px !important;
  }

  .topic-detail-core-head h3,
  .topic-detail-feed-title,
  .wallet-panel-head h3,
  .messages-head h2,
  .wallet-head h2,
  .profile-identity-main h2,
  .agent-hero h3,
  .auth-modal h2 {
    color: var(--vp-ink) !important;
    letter-spacing: -0.03em !important;
  }

  .topic-detail-core-head span,
  .topic-detail-feed-desc,
  .topic-detail-meta,
  .topic-detail-roomline,
  .topic-detail-footnote,
  .wallet-panel-head span,
  .wallet-field span,
  .wallet-risk-note,
  .message-card p,
  .profile-identity-main p,
  .agent-hero span,
  .agent-level-card p,
  .modal-field span,
  .topic-modal-lead,
  .bet-modal-desc {
    color: var(--vp-muted) !important;
  }

  .topic-detail-data-grid,
  .wallet-fee-grid,
  .wallet-deposit-meta,
  .wallet-deposit-progress-meta,
  .agent-metrics,
  .profile-stats,
  .agent-team-grid {
    gap: 8px !important;
  }

  .topic-detail-data-grid span,
  .wallet-fee-grid span,
  .wallet-deposit-meta span,
  .wallet-deposit-progress-meta span,
  .wallet-deposit-overlay-pay,
  .agent-metrics span,
  .profile-stats span,
  .agent-team-grid article,
  .wallet-record,
  .profile-list-item,
  .agent-record,
  .topic-detail-comments li,
  .topic-rule-list li,
  .topic-preview-card,
  .wallet-address-box,
  .wallet-deposit-submit-row,
  .wallet-deposit-order,
  .wallet-withdraw-summary,
  .wallet-convert-box {
    border: 1px solid var(--vp-line) !important;
    border-radius: 12px !important;
    background: #fbfcfd !important;
    box-shadow: none !important;
  }

  .mobile-bottom-nav {
    border: 1px solid rgba(229, 231, 235, 0.95) !important;
    border-radius: 20px 20px 0 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(18px) !important;
  }

  .mobile-bottom-nav button {
    border-radius: 14px !important;
    color: var(--vp-muted) !important;
  }

  .mobile-bottom-nav button.active {
    background: #f3f7ff !important;
    color: var(--vp-ink) !important;
  }

  .mobile-bottom-nav small {
    font-size: 10px !important;
    font-weight: 850 !important;
  }

  .message-tabs button,
  .wallet-mode-tabs button,
  .profile-switch button,
  .wallet-quick-row button,
  .wallet-address-box button,
  .wallet-withdraw-summary button,
  .message-card-side button,
  .profile-identity-card > button,
  .profile-panel-head button,
  .profile-list-item button,
  .agent-hero button,
  .agent-section-head button,
  .topic-footer-ghost,
  .verify-row button,
  .modal-later,
  .modal-link,
  .topic-template-delete {
    border: 1px solid var(--vp-line) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--vp-ink) !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  .message-tabs button.active,
  .wallet-mode-tabs button.active,
  .profile-switch button.active,
  .wallet-exchange-grid button.active,
  .bet-stake-grid button.active {
    border-color: rgba(19, 184, 166, 0.48) !important;
    background: rgba(19, 184, 166, 0.11) !important;
    color: var(--vp-ink) !important;
  }

  .modal-submit,
  .wallet-primary,
  .mobile-enter,
  .party-room-actions button,
  .party-dock-send,
  .topic-footer-primary,
  .bet-submit {
    border: 1px solid #111827 !important;
    border-radius: 12px !important;
    background: #111827 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    box-shadow: none !important;
  }

  .mobile-enter.danger,
  .party-close-btn {
    border-color: #fecaca !important;
    background: #fff1f2 !important;
    color: #dc2626 !important;
  }

  .modal-backdrop,
  .topic-create-backdrop,
  .topic-rule-backdrop,
  .bet-modal-backdrop {
    align-items: center !important;
    justify-content: center !important;
    padding: max(18px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)) !important;
    background: rgba(247, 248, 250, 0.86) !important;
    backdrop-filter: blur(14px) !important;
  }

  .topic-create-backdrop {
    align-items: flex-start !important;
    padding-top: max(18px, env(safe-area-inset-top)) !important;
  }

  .auth-modal,
  .topic-create-modal,
  .topic-rule-modal,
  .bet-modal {
    width: min(100%, 430px) !important;
    max-height: min(88vh, 720px) !important;
    overflow-y: auto !important;
  }

  .modal-close,
  .modal-back {
    border: 1px solid var(--vp-line) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--vp-ink) !important;
  }

  .modal-field input,
  .modal-field select,
  .modal-field textarea,
  .wallet-field input,
  .wallet-field select,
  .topic-create-modal .modal-field textarea,
  .topic-create-modal .modal-field select {
    border: 1px solid var(--vp-line-strong) !important;
    border-radius: 12px !important;
    background: #f9fafb !important;
    color: var(--vp-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  }

  .party-body,
  .party-shell,
  .room-party-shell,
  .party-stage {
    background: transparent !important;
    color: var(--vp-ink) !important;
  }

  .party-host-avatar,
  .party-rank-face,
  .party-seat-avatar,
  .profile-avatar,
  .wallet-record > span,
  .profile-list-item > span,
  .agent-record > span {
    border: 1px solid rgba(19, 184, 166, 0.35) !important;
    background: #111827 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .party-host-meta strong,
  .party-online,
  .party-wallet-gold,
  .party-wallet-rank,
  .party-like-count,
  .party-host-tag,
  .party-seat-name,
  .party-chat-message,
  .party-chat-user,
  .party-chat-time {
    color: var(--vp-ink) !important;
  }

  .party-like-btn,
  .party-follow,
  .party-rules-btn,
  .party-share-btn,
  .party-collapse-btn {
    border: 1px solid var(--vp-line) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--vp-ink) !important;
    box-shadow: none !important;
  }

  .party-like-btn--liked {
    border-color: #fecaca !important;
    background: #fff1f2 !important;
    color: #dc2626 !important;
  }

  .wallet-qr,
  .wallet-deposit-progress,
  .topic-mic-panel,
  .topic-voice-panel,
  .topic-play-panel,
  .topic-preview-play {
    border-radius: 14px !important;
  }

  .toast {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    border-radius: 999px !important;
    background: #111827 !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16) !important;
  }
}

/* Align secondary user pages with the compact homepage card language. */
.mobile-page-messages,
.mobile-page-wallet,
.mobile-page-profile,
.topic-detail-body,
.room-view-body,
.quick-room-body {
  font-family: inherit !important;
  color: #111827 !important;
}

.messages-head,
.wallet-head,
.profile-panel-head,
.topic-detail-toolbar,
.room-view-toolbar,
.quick-room-toolbar {
  min-height: 48px !important;
  margin: 0 0 10px !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
}

.messages-head .eyebrow,
.wallet-head .eyebrow,
.profile-panel-head .eyebrow,
.auth-modal .eyebrow,
.topic-create-modal .eyebrow,
.topic-rule-modal .eyebrow,
.bet-modal .eyebrow {
  margin: 0 0 3px !important;
  color: #6b7280 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

.messages-head h2,
.wallet-head h2,
.profile-panel-head h3,
.topic-detail-toolbar-label,
.room-view-toolbar-label,
.quick-room-toolbar .room-view-toolbar-label,
.auth-modal h2,
.topic-create-modal h2,
.topic-rule-modal h2,
.bet-modal h2 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

.wallet-rule,
.wallet-panel-head span,
.wallet-field span,
.wallet-risk-note,
.wallet-convert-box small,
.message-card p,
.profile-identity-main p,
.profile-list-item small,
.profile-list-item em,
.agent-hero span,
.agent-level-card p,
.agent-rule-card span,
.agent-section-head span,
.topic-detail-meta,
.topic-detail-roomline,
.topic-detail-feed-desc,
.bet-modal-desc,
.confirm-modal-desc {
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

.message-tabs,
.wallet-mode-tabs,
.profile-switch {
  gap: 8px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.message-tabs button,
.wallet-mode-tabs button,
.profile-switch button {
  min-height: 28px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.message-tabs button.active,
.wallet-mode-tabs button.active,
.profile-switch button.active {
  background: #eef4ff !important;
  color: #2563eb !important;
}

.message-card,
.wallet-panel,
.wallet-balance-card,
.wallet-address-box,
.wallet-deposit-order,
.wallet-withdraw-summary,
.wallet-convert-box,
.wallet-risk-note,
.wallet-record,
.profile-identity-card,
.profile-panel,
.profile-list-item,
.profile-setting-list button,
.agent-hero,
.agent-level-card,
.agent-rule-card,
.agent-section,
.agent-record,
.topic-detail-panel,
.topic-detail-core,
.topic-detail-feed,
.topic-detail-comment,
.quick-room-hero,
.quick-room-card,
.confirm-modal,
.auth-modal,
.topic-rule-modal,
.bet-modal {
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
}

.message-card,
.wallet-panel,
.profile-panel,
.profile-identity-card,
.topic-detail-panel,
.topic-detail-feed,
.topic-detail-core,
.quick-room-card {
  padding: 12px !important;
}

.wallet-balance-card,
.profile-stats,
.wallet-field-grid,
.wallet-fee-grid,
.wallet-deposit-meta,
.agent-metrics,
.agent-team-grid {
  gap: 8px !important;
}

.wallet-balance-card span,
.profile-stats span,
.wallet-fee-grid span,
.wallet-deposit-meta span,
.agent-metrics span,
.agent-team-grid article {
  border: 1px solid #eef0f3 !important;
  border-radius: 12px !important;
  background: #f9fafb !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.wallet-balance-card strong,
.profile-stats strong,
.wallet-fee-grid strong,
.wallet-deposit-meta strong,
.wallet-panel-head h3,
.message-card h3,
.profile-list-item strong,
.profile-setting-list strong,
.agent-level-top strong,
.agent-section-head h4,
.agent-rule-card strong,
.agent-record strong,
.topic-detail-core-head strong,
.topic-detail-data-grid strong {
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

.wallet-field input,
.wallet-field select,
.modal-field input,
.modal-field select,
.modal-field textarea,
.topic-create-modal textarea,
.topic-create-modal select {
  min-height: 40px !important;
  padding: 0 11px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #f9fafb !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.wallet-primary,
.modal-submit,
.bet-submit {
  min-height: 40px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.wallet-quick-row button,
.wallet-address-box button,
.wallet-withdraw-summary button,
.message-card-side button,
.profile-identity-card > button,
.profile-panel-head button,
.profile-list-item button,
.agent-hero button,
.agent-section-head button,
.modal-link,
.modal-later,
.topic-template-delete {
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  box-shadow: none !important;
}

.agent-hero .agent-summary-toggle {
  min-height: 30px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--vp-muted) !important;
}

.agent-summary-detail {
  display: grid;
  gap: 10px;
}

.confirm-modal.agent-rule-modal {
  box-sizing: border-box !important;
  width: min(calc(100vw - 40px), 380px) !important;
  max-width: 380px !important;
  max-height: 86vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  display: grid !important;
  gap: 10px !important;
  color: var(--vp-ink) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.confirm-modal.agent-rule-modal h3 {
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

.confirm-modal.agent-rule-modal p,
.confirm-modal.agent-rule-modal .agent-rule-card span,
.confirm-modal.agent-rule-modal .agent-team-grid small,
.confirm-modal.agent-rule-modal .agent-team-grid em,
.confirm-modal.agent-rule-modal .agent-rule-levels span {
  color: var(--vp-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
}

.confirm-modal.agent-rule-modal .agent-rule-card strong,
.confirm-modal.agent-rule-modal .agent-team-grid strong {
  color: var(--vp-ink) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 860 !important;
}

.confirm-modal.agent-rule-modal .agent-bucket-row span {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.confirm-modal.agent-rule-modal .agent-bucket-row b {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.confirm-modal.agent-rule-modal .agent-team-grid {
  grid-template-columns: 1fr !important;
}

.confirm-modal.agent-rule-modal .agent-rule-card,
.confirm-modal.agent-rule-modal .agent-bucket-row span,
.confirm-modal.agent-rule-modal .agent-team-grid article,
.confirm-modal.agent-rule-modal .agent-rule-levels span {
  min-width: 0 !important;
}

.confirm-modal.agent-rule-modal .confirm-actions {
  display: flex !important;
  justify-content: center !important;
}

.confirm-modal.agent-rule-modal .confirm-actions button {
  min-width: 150px !important;
  min-height: 42px !important;
  padding: 0 22px !important;
  border-color: rgba(20, 184, 166, 0.42) !important;
  background: var(--vp-teal) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 860 !important;
  box-shadow: 0 12px 26px rgba(20, 184, 166, 0.24) !important;
}

.message-list,
.wallet-record-list,
.profile-list,
.profile-setting-list,
.agent-stack,
.agent-record-list,
.topic-detail-stack {
  gap: 10px !important;
}

.profile-avatar,
.profile-list-item > span,
.wallet-record > span,
.agent-record > span {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

.profile-identity-main h2 {
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

.modal-backdrop[data-modal-backdrop][hidden] {
  display: none !important;
}

.modal-backdrop[data-modal-backdrop] .auth-modal {
  width: min(100%, 430px) !important;
  max-height: calc(100vh - 104px - env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 auto !important;
  overflow: visible !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 22px 22px 0 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 -18px 45px rgba(15, 23, 42, 0.16) !important;
  pointer-events: auto !important;
}

.modal-backdrop[data-modal-backdrop] .auth-modal::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin: -8px auto 12px;
  border-radius: 999px;
  background: #d1d5db;
}

@media (max-height: 720px) {
  .modal-backdrop[data-modal-backdrop] .auth-modal {
    max-height: calc(100vh - 92px - env(safe-area-inset-bottom, 0px)) !important;
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }
}

.mobile-list-more {
  width: 100%;
  padding: 10px 0 4px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
  text-align: center;
}

.mobile-list-more.done {
  color: #cbd5e1;
}

.topic-detail-comment--empty {
  display: block;
  padding: 12px;
  border: 1px dashed #dbe3ea;
  border-radius: 14px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 760;
  text-align: center;
}

/* Business modals follow the user auth/register bottom-sheet style. */
.topic-create-backdrop,
.topic-rule-backdrop,
.bet-modal-backdrop {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 12px calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(
    180deg,
    rgba(247, 248, 250, 0.08) 0%,
    rgba(247, 248, 250, 0.18) 45%,
    rgba(247, 248, 250, 0.72) 100%
  ) !important;
  backdrop-filter: blur(14px) !important;
}

.topic-create-backdrop[hidden],
.topic-rule-backdrop[hidden],
.bet-modal-backdrop[hidden] {
  display: none !important;
}

.topic-create-modal,
.topic-rule-modal,
.bet-modal {
  width: min(100%, 430px) !important;
  max-height: calc(100vh - 104px - env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 auto !important;
  overflow-y: auto !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 22px 22px 0 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #111827 !important;
  box-shadow: 0 -18px 45px rgba(15, 23, 42, 0.16) !important;
  scrollbar-width: none !important;
}

.topic-create-modal {
  display: flex !important;
  flex-direction: column !important;
  height: min(calc(100vh - 104px - env(safe-area-inset-bottom, 0px)), 680px) !important;
}

.topic-rule-modal,
.bet-modal {
  height: min(calc(100vh - 104px - env(safe-area-inset-bottom, 0px)), 520px) !important;
}

.topic-create-modal::before,
.topic-rule-modal::before,
.bet-modal::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin: -8px auto 12px;
  border-radius: 999px;
  background: #d1d5db;
}

.topic-create-modal::-webkit-scrollbar,
.topic-rule-modal::-webkit-scrollbar,
.bet-modal::-webkit-scrollbar,
.topic-create-modal textarea::-webkit-scrollbar,
.topic-rule-modal textarea::-webkit-scrollbar,
.bet-modal textarea::-webkit-scrollbar {
  display: none;
}

.topic-create-modal textarea,
.topic-rule-modal textarea,
.bet-modal textarea {
  scrollbar-width: none !important;
}

.topic-create-modal .topic-type-switch button {
  min-height: 36px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 820 !important;
}

.topic-create-modal .topic-type-switch button.is-active {
  border-color: rgba(20, 184, 166, 0.48) !important;
  background: rgba(20, 184, 166, 0.1) !important;
  color: #0f766e !important;
}

.topic-create-modal .topic-step {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
  scrollbar-width: none !important;
}

.topic-create-modal .topic-step::-webkit-scrollbar {
  display: none;
}

.topic-create-modal .topic-modal-footer {
  flex: 0 0 auto !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.98) 32%) !important;
}

.topic-create-modal .topic-footer-ghost,
.topic-create-modal .topic-footer-primary,
.topic-create-modal .modal-submit,
.bet-modal .bet-submit,
.bet-modal [data-action="bet-recharge-submit"],
.bet-modal .bet-recharge-choice-row button,
.bet-modal .bet-recharge-address button {
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  box-shadow: none !important;
}

.topic-create-modal .topic-footer-primary,
.topic-create-modal .modal-submit {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 112px !important;
}

.bet-modal .bet-submit {
  display: block !important;
  width: auto !important;
  min-width: 128px !important;
  margin: 10px auto 0 !important;
}

.topic-create-modal .topic-footer-primary,
.topic-create-modal .modal-submit,
.bet-modal .bet-submit,
.bet-modal [data-action="bet-recharge-submit"] {
  border: 1px solid rgba(20, 184, 166, 0.52) !important;
  background: rgba(20, 184, 166, 0.12) !important;
  color: #0f766e !important;
}

.topic-create-modal .topic-footer-ghost,
.bet-modal .bet-recharge-choice-row button,
.bet-modal .bet-recharge-address button {
  border: 1px solid rgba(20, 184, 166, 0.24) !important;
  background: #ffffff !important;
  color: #0f766e !important;
}

@media (hover: none), (pointer: coarse), (max-width: 768px) {
  body.topic-create-open {
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body.topic-create-open::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .topic-create-backdrop {
    align-items: flex-end !important;
    box-sizing: border-box !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      12px
      max(10px, env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  @supports (height: 100dvh) {
    .topic-create-backdrop {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }

  .topic-create-modal {
    box-sizing: border-box !important;
    width: min(calc(100vw - 24px), 430px) !important;
    max-width: calc(100vw - 24px) !important;
    height: min(calc(100vh - max(8px, env(safe-area-inset-top, 0px)) - max(10px, env(safe-area-inset-bottom, 0px)) - 10px), 680px) !important;
    max-height: min(calc(100vh - max(8px, env(safe-area-inset-top, 0px)) - max(10px, env(safe-area-inset-bottom, 0px)) - 10px), 680px) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  @supports (height: 100dvh) {
    .topic-create-modal {
      height: min(calc(100dvh - max(8px, env(safe-area-inset-top, 0px)) - max(10px, env(safe-area-inset-bottom, 0px)) - 10px), 680px) !important;
      max-height: min(calc(100dvh - max(8px, env(safe-area-inset-top, 0px)) - max(10px, env(safe-area-inset-bottom, 0px)) - 10px), 680px) !important;
    }
  }

  .topic-create-modal::-webkit-scrollbar,
  .topic-create-modal .topic-step::-webkit-scrollbar,
  .topic-create-modal textarea::-webkit-scrollbar,
  .topic-create-backdrop::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .topic-create-modal .topic-step {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .topic-create-modal .topic-modal-footer {
    position: sticky !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    margin-right: 0 !important;
    padding-bottom: max(2px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

.bet-modal .bet-stake-grid button {
  min-height: 38px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

.bet-modal .bet-stake-grid button.active {
  border-color: rgba(20, 184, 166, 0.52) !important;
  background: rgba(20, 184, 166, 0.1) !important;
  color: #0f766e !important;
}

@media (max-height: 720px) {
  .topic-rule-modal,
  .bet-modal {
    max-height: calc(100vh - 92px - env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100vh - 92px - env(safe-area-inset-bottom, 0px)) !important;
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }
}