html.tm-dark {
  color-scheme: dark;
}

.logo-mark,
.brand-mark,
.nav-logo-mark {
  background: transparent !important;
  color: #FF6B47 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.logo-mark img,
.brand-mark img,
.nav-logo-mark img {
  width: 86% !important;
  height: 86% !important;
  object-fit: contain !important;
  display: block;
}

.logo-text,
.nav-logo-text,
.footer-logo-text,
.brand > span:not(.brand-mark) {
  font-family: "Clash Display", "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px;
  color: #14213D !important;
}

.logo-text > span,
.footer-logo-text > span,
.logo-mall,
.logo-mall-wrap span,
.brand-mall {
  color: #FF6B47 !important;
}

.left-logo .logo-text > span,
.footer-logo-text > span {
  position: relative;
  display: inline-block;
}

.left-logo .logo-text > span::after,
.footer-logo-text > span::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 0;
  bottom: -8px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 46 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 C8 1.5 16 6.5 23 3.5 C30 .5 38 6 44 3' stroke='%23FF6B47' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  pointer-events: none;
}

.left .logo-text,
.hero-dark .logo-text,
.auth-hero .logo-text {
  color: #F8FAFC !important;
}

.left .logo-text > span,
.hero-dark .logo-text > span,
.auth-hero .logo-text > span {
  color: #FF6B47 !important;
}

html.tm-dark .logo-mark,
html.tm-dark .brand-mark,
html.tm-dark .nav-logo-mark {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.tm-dark .logo-text,
html.tm-dark .nav-logo-text,
html.tm-dark .footer-logo-text,
html.tm-dark .brand > span:not(.brand-mark),
body.dark-mode .logo-text,
body.dark-mode .nav-logo-text,
body.dark-mode .footer-logo-text,
body.dark-mode .brand > span:not(.brand-mark) {
  color: #F8FAFC !important;
}

html.tm-dark .logo-text > span,
html.tm-dark .footer-logo-text > span,
html.tm-dark .logo-mall,
html.tm-dark .logo-mall-wrap span,
html.tm-dark .brand-mall,
body.dark-mode .logo-text > span,
body.dark-mode .footer-logo-text > span,
body.dark-mode .logo-mall,
body.dark-mode .logo-mall-wrap span,
body.dark-mode .brand-mall {
  color: #FF6B47 !important;
}

html.tm-dark body,
body.dark-mode {
  background: #0B1118 !important;
  color: #F8FAFC !important;
}

html.tm-dark {
  --white: #17202B;
  --surface: #0B1118;
  --gray-l: #0F1720;
  --sand: #2A2520;
  --sand-2: #3B342D;
  --navy: #F8FAFC;
  --navy-2: #E5E7EB;
  --slate: #CBD5E1;
  --muted: #8A98AA;
  --line: rgba(255,255,255,0.1);
  --soft: #111A24;
}

html.tm-dark .topnav,
html.tm-dark .topbar,
html.tm-dark .nav,
html.tm-dark .site-header,
html.tm-dark .sidebar-left,
html.tm-dark .sidebar-right,
html.tm-dark .panel,
html.tm-dark .card,
html.tm-dark .prod-card,
html.tm-dark .highlight-card,
html.tm-dark .modal,
html.tm-dark .form-box,
html.tm-dark .side-panel,
html.tm-dark .profile-panel,
html.tm-dark .post-shell,
html.tm-dark .tabs,
html.tm-dark .content-tabs,
html.tm-dark .drawer-panel {
  background-color: #17202B !important;
  border-color: rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
}

html.tm-dark .nav.scrolled {
  background: rgba(23,32,43,0.92) !important;
}

html.tm-dark .nav .logo-text,
html.tm-dark .nav.scrolled .logo-text {
  color: #F8FAFC !important;
}

html.tm-dark .nav .logo-text span,
html.tm-dark .nav.scrolled .logo-text span,
html.tm-dark .nav .logo-mall-wrap span,
html.tm-dark .nav.scrolled .logo-mall-wrap span {
  color: #FF6B47 !important;
}

html.tm-dark .nav .nav-link,
html.tm-dark .nav.scrolled .nav-link {
  color: #CBD5E1 !important;
}

html.tm-dark .nav .btn-ghost,
html.tm-dark .nav.scrolled .btn-ghost {
  color: #F8FAFC !important;
  border-color: rgba(248,250,252,0.28) !important;
  background: rgba(15,23,32,0.72) !important;
}

html.tm-dark .nav .btn-ghost:hover,
html.tm-dark .nav.scrolled .btn-ghost:hover {
  color: #FF8A6A !important;
  border-color: rgba(255,107,71,0.5) !important;
  background: rgba(255,107,71,0.14) !important;
}

html.tm-dark input,
html.tm-dark textarea,
html.tm-dark select,
html.tm-dark .sort-select,
html.tm-dark .cat-pill,
html.tm-dark .filter-check,
html.tm-dark .faq-item,
html.tm-dark .field input,
html.tm-dark .field textarea,
html.tm-dark .field select {
  background-color: #0F1720 !important;
  color: #F8FAFC !important;
  border-color: rgba(255,255,255,0.12) !important;
}

html.tm-dark select option,
html.tm-dark .field select option,
html.tm-dark .sort-select option {
  background-color: #111B29 !important;
  color: #F8FAFC !important;
}

html.tm-dark select option:checked,
html.tm-dark .field select option:checked,
html.tm-dark .sort-select option:checked {
  background-color: #FF6B47 !important;
  color: #FFFFFF !important;
}

html.tm-dark select:focus,
html.tm-dark .field select:focus,
html.tm-dark .sort-select:focus {
  border-color: rgba(255,107,71,0.68) !important;
  box-shadow: 0 0 0 3px rgba(255,107,71,0.16) !important;
}

html.tm-dark input::placeholder,
html.tm-dark textarea::placeholder {
  color: #8A98AA !important;
}

html.tm-dark .btn,
html.tm-dark .nav-btn,
html.tm-dark .btn-ghost,
html.tm-dark .tab-btn,
html.tm-dark .theme-toggle,
html.tm-dark .global-theme-toggle,
html.tm-dark .profile-chip,
html.tm-dark .icon-btn {
  background-color: #17202B;
  color: #F8FAFC;
  border-color: rgba(255,255,255,0.14);
}

html.tm-dark .btn-coral,
html.tm-dark .btn-primary,
html.tm-dark .btn-green,
html.tm-dark .btn-submit,
html.tm-dark .action-contact {
  color: #FFFFFF !important;
}

html.tm-dark .close-drawer,
body.dark-mode .close-drawer {
  background: rgba(255,107,71,0.14) !important;
  border-color: rgba(255,107,71,0.5) !important;
  color: #FF8A6A !important;
}

html.tm-dark .close-drawer:hover,
body.dark-mode .close-drawer:hover {
  background: #FF6B47 !important;
  color: #FFFFFF !important;
}

html.tm-dark .hero,
html.tm-dark .premium-banner {
  background: #17202B !important;
}

html.tm-dark .premium-panel,
html.tm-dark .contact-card,
html.tm-dark .support-card {
  background: #111A2D !important;
}

html.tm-dark .features-section {
  background: #0F1720 !important;
}

html.tm-dark .features-section .section-eyebrow {
  color: #FF8A6A !important;
}

html.tm-dark .features-section .section-title {
  color: #FFFFFF !important;
}

html.tm-dark .features-section .section-sub {
  color: rgba(248,250,252,0.72) !important;
}

html.tm-dark .feat-card {
  background: #17202B !important;
  border-color: rgba(255,255,255,0.12) !important;
}

html.tm-dark .feat-card:hover {
  background: #1D2938 !important;
  border-color: rgba(255,107,71,0.38) !important;
}

html.tm-dark .feat-card h3 {
  color: #F8FAFC !important;
}

html.tm-dark .feat-card p {
  color: #CBD5E1 !important;
}

html.tm-dark .plans-section {
  background: #0B1118 !important;
}

html.tm-dark .plans-section .section-title {
  color: #F8FAFC !important;
}

html.tm-dark .plans-section .section-sub {
  color: #CBD5E1 !important;
}

html.tm-dark .plan-card,
html.tm-dark .plan-card.featured {
  background: #17202B !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #F8FAFC !important;
}

html.tm-dark .plan-card.featured {
  border-color: rgba(255,107,71,0.7) !important;
}

html.tm-dark .plan-name,
html.tm-dark .plan-card.featured .plan-name,
html.tm-dark .plan-type {
  color: #F8FAFC !important;
}

html.tm-dark .plan-tagline,
html.tm-dark .plan-card.featured .plan-tagline,
html.tm-dark .plan-features li,
html.tm-dark .plan-card.featured .plan-features li,
html.tm-dark .paypal-note {
  color: #CBD5E1 !important;
}

html.tm-dark .plan-divider,
html.tm-dark .plan-card.featured .plan-divider {
  background: rgba(255,255,255,0.12) !important;
}

html.tm-dark .cta-outline {
  border-color: rgba(255,255,255,0.18) !important;
  color: #F8FAFC !important;
}

html.tm-dark .cta-outline:hover {
  background: rgba(255,107,71,0.16) !important;
  border-color: rgba(255,107,71,0.55) !important;
  color: #FF8A6A !important;
}

html.tm-dark .cta-solid {
  color: #FFFFFF !important;
}

html.tm-dark .cta-final {
  background: #FF6B47 !important;
}

html.tm-dark .cta-final h2,
html.tm-dark .cta-final p,
html.tm-dark .cta-final-trust span {
  color: #FFFFFF !important;
}

html.tm-dark .cta-final .btn-white {
  background: #FFFFFF !important;
  color: #FF6B47 !important;
}

html.tm-dark .cta-final .btn-white-outline {
  background: rgba(20,33,61,0.18) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.56) !important;
}

html.tm-dark .terms-strip,
html.tm-dark footer {
  background: #0B1118 !important;
}

html.tm-dark .terms-strip p,
html.tm-dark .footer-tagline,
html.tm-dark .footer-col a,
html.tm-dark .footer-copy {
  color: #CBD5E1 !important;
}

html.tm-dark .footer-col h4 {
  color: #8A98AA !important;
}

html.tm-dark .footer-logo-text {
  color: #F8FAFC !important;
}

html.tm-dark .footer-divider {
  background: rgba(255,255,255,0.1) !important;
}

html.tm-dark .left {
  background: linear-gradient(155deg, #111827 0%, #14213D 55%, #0B1118 100%) !important;
}

html.tm-dark .left::before {
  background: radial-gradient(circle, rgba(255,107,71,0.2) 0%, transparent 70%) !important;
}

html.tm-dark .left::after {
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%) !important;
}

html.tm-dark .right {
  background: #0B1118 !important;
}

html.tm-dark .right .form-box {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.tm-dark .left .logo-text,
html.tm-dark .left h2,
html.tm-dark .left .preview-text strong {
  color: #FFFFFF !important;
}

html.tm-dark .left .logo-text span,
html.tm-dark .left h2 em {
  color: #FF6B47 !important;
}

html.tm-dark .left-desc,
html.tm-dark .left .perk,
html.tm-dark .left .preview-text {
  color: rgba(248,250,252,0.72) !important;
}

html.tm-dark .left-badge {
  background: rgba(255,107,71,0.16) !important;
  border-color: rgba(255,107,71,0.32) !important;
}

html.tm-dark .left-badge span {
  color: #FF8A6A !important;
}

html.tm-dark .left .perk-icon {
  background: rgba(255,107,71,0.18) !important;
}

html.tm-dark .left-preview,
html.tm-dark .plan-mini {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

html.tm-dark .preview-avatar {
  border-color: #14213D !important;
}

html.tm-dark .left-footer {
  color: rgba(248,250,252,0.38) !important;
}

html.tm-dark .logo-tuyo,
html.tm-dark .brand,
html.tm-dark .brand span,
html.tm-dark .logo-text,
html.tm-dark .nav-logo-text,
html.tm-dark .profile-title,
html.tm-dark h1,
html.tm-dark h2,
html.tm-dark h3,
html.tm-dark label,
html.tm-dark strong {
  color: #F8FAFC;
}

html.tm-dark .logo-mall,
html.tm-dark .brand-mall,
html.tm-dark .logo-text span,
html.tm-dark .footer-logo-text span {
  color: #FF6B47;
}

html.tm-dark .prod-name,
html.tm-dark .bio,
html.tm-dark .form-sub,
html.tm-dark .left-desc,
html.tm-dark .hint,
html.tm-dark p,
html.tm-dark li,
html.tm-dark small {
  color: #CBD5E1;
}

.global-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(20,33,61,0.14);
  background: #FFFFFF;
  color: #14213D;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(20,33,61,0.14);
  transition: transform 0.18s, background 0.18s, border-color 0.18s;
}

.global-theme-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(255,107,71,0.35);
  background: #FFF0EC;
  color: #FF6B47;
}

.global-theme-toggle .theme-symbol {
  width: 20px;
  height: 20px;
  display: block;
}

@media (max-width: 720px) {
  .global-theme-toggle {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}

/* Responsive safety net for all TuyoMall pages */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

@media (max-width: 980px) {
  .page,
  main.page,
  .hero,
  .auth-layout,
  .main-grid,
  .content-grid {
    grid-template-columns: 1fr !important;
  }

  .sidebar,
  .sidebar-right {
    width: 100% !important;
    max-width: none !important;
  }

  .topnav,
  .topbar-inner,
  .nav {
    max-width: 100%;
  }

  .plans-grid,
  .features-grid,
  .steps-grid,
  .reviews-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body {
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
  }

  body:has(.left):has(.right) {
    grid-template-columns: 1fr !important;
  }

  .left,
  .right {
    width: 100% !important;
    min-width: 0 !important;
  }

  .left {
    min-height: auto !important;
    padding: 24px 18px !important;
  }

  .right {
    padding: 24px 18px 86px !important;
  }

  .left h1,
  .left h2,
  .hero-h1,
  h1 {
    overflow-wrap: anywhere;
  }

  .topnav,
  .topbar-inner {
    height: auto !important;
    min-height: 70px;
    padding: 10px 14px !important;
    gap: 10px !important;
    flex-wrap: wrap;
  }

  .nav-search {
    order: 3;
    flex: 1 0 100% !important;
    max-width: none !important;
    width: 100% !important;
  }

  .nav-right,
  .nav-actions,
  .nav-public-actions,
  .nav-session-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
  }

  .nav-btn,
  .btn {
    min-width: 0;
    white-space: nowrap;
  }

  .layout {
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .feed,
  .page {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .feed-header,
  .feed-controls,
  .profile-actions,
  .field-row,
  .form-grid,
  .plan-grid,
  .auth-choice-actions {
    grid-template-columns: 1fr !important;
    flex-direction: column;
    align-items: stretch;
  }

  .profile-head,
  .profile-main {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .profile-meta,
  .info-strip,
  .title-row {
    justify-content: center;
  }

  .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .content-tabs,
  .tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .content-tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none;
  }

  .modal,
  .modal-wide,
  .drawer-panel,
  .crop-panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .drawer {
    justify-content: center !important;
  }

  .drawer-panel {
    height: calc(100vh - 20px) !important;
    margin: 10px 0;
    border-radius: 22px;
    padding: 18px !important;
  }

  .modal-body {
    max-height: calc(100vh - 150px) !important;
  }
}

@media (max-width: 520px) {
  .products-grid,
  .posts-grid {
    grid-template-columns: 1fr !important;
  }

  .products-grid.list-view .prod-card {
    grid-template-columns: 1fr !important;
  }

  .products-grid.list-view .prod-img-wrap,
  .products-grid.list-view .prod-header,
  .products-grid.list-view .prod-body,
  .products-grid.list-view .prod-actions {
    grid-column: auto !important;
    width: auto !important;
  }

  .stats-row {
    grid-template-columns: 1fr 1fr !important;
  }

  .nav-logo-text,
  .logo-text {
    font-size: 20px !important;
  }

  .brand-mark,
  .logo-mark,
  .nav-logo-mark {
    width: 46px !important;
    height: 46px !important;
  }

  .btn,
  .nav-btn,
  button,
  input,
  select,
  textarea {
    max-width: 100%;
  }

  .premium-lock::after {
    white-space: normal;
    border-radius: 18px;
  }
}

@media (max-width: 380px) {
  .topnav,
  .topbar-inner,
  .nav {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .nav-btn,
  .btn {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 12px !important;
  }

  .hero-ctas,
  .profile-actions,
  .feed-controls {
    gap: 8px !important;
  }

  .stat strong,
  .price,
  .prod-price {
    font-size: 18px !important;
  }
}