/* ==========================================================
   TH Social V87 — White + Blue UI Phase 1
   Goal: mobile-first, simple, readable, low-computer-literacy friendly
   ========================================================== */
:root{
  --v87-blue:#1677ff;
  --v87-blue-strong:#075fd7;
  --v87-blue-soft:#eef6ff;
  --v87-blue-line:#cfe4ff;
  --v87-ink:#172033;
  --v87-muted:#68758a;
  --v87-bg:#f7faff;
  --v87-card:#ffffff;
  --v87-line:#e3ebf5;
  color:var(--v87-ink);
  background:var(--v87-bg);
}
html,body{background:var(--v87-bg)!important;color:var(--v87-ink)!important}
body{background:linear-gradient(180deg,#fff 0,#f7faff 240px,#f7faff 100%)!important}

/* Header */
.siteHeaderV87{
  height:72px;
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid var(--v87-blue-line)!important;
  box-shadow:0 3px 18px rgba(48,104,170,.06);
  backdrop-filter:blur(14px);
  padding:0 max(24px,5vw)!important;
  gap:24px!important;
}
.brandV87{gap:9px!important}
.brandV87 .logoMark{width:38px;height:38px;filter:none!important}
.brandNameV87{font-size:17px;font-weight:900;color:#156ddd;white-space:nowrap;letter-spacing:-.2px}
.mainNavV87{gap:4px!important;align-items:center}
.mainNavV87 button{
  border:1px solid transparent!important;
  background:transparent!important;
  color:#536177!important;
  font-weight:750;
  border-radius:999px!important;
  padding:10px 15px!important;
  min-height:42px;
}
.mainNavV87 button:hover{background:var(--v87-blue-soft)!important;color:var(--v87-blue-strong)!important}
.mainNavV87 button.active{
  background:var(--v87-blue)!important;
  color:#fff!important;
  border-color:var(--v87-blue)!important;
  box-shadow:0 7px 18px rgba(22,119,255,.20);
}
#accountArea{gap:8px!important}
#accountArea .outlineBtn{
  background:#fff!important;color:var(--v87-blue-strong)!important;border:1px solid #a9d0ff!important;
  min-height:42px;border-radius:999px!important;font-weight:800;
}
#accountArea .primary,.headerSellerBtn{
  background:linear-gradient(135deg,#1677ff,#0796e9)!important;
  color:#fff!important;border:1px solid transparent!important;border-radius:999px!important;
  min-height:42px;box-shadow:0 7px 18px rgba(22,119,255,.17)!important;
}
#accountArea .chatNavBtn{
  background:#fff!important;color:#156ddd!important;border:1px solid #b9d8ff!important;
  box-shadow:none!important;border-radius:999px!important;min-height:42px;
}
.bellBtn{background:#fff!important;color:#156ddd!important;border-color:#b9d8ff!important}
.balance{background:#f2f8ff!important;color:#156ddd!important;border-color:#cfe4ff!important}
.avatarBtn{background:#fff!important;color:var(--v87-ink)!important;border:1px solid var(--v87-line)!important}

/* Common customer-facing surfaces */
main{color:var(--v87-ink)}
.hero{
  border-color:#dceaff!important;
  background:linear-gradient(125deg,#fff 0,#f2f8ff 55%,#e5f2ff 100%)!important;
  box-shadow:0 18px 55px rgba(57,105,160,.09);
}
.hero h1,.pageHead h1,.sectionTitle h2,.card h3,.panel h3{color:var(--v87-ink)!important}
.hero p,.muted,.sectionTitle span,.pageHead p{color:var(--v87-muted)!important}
.eyebrow,.cat{color:#1677ff!important;font-weight:850}
.heroBrand,.heroIconArt{filter:drop-shadow(0 15px 28px rgba(22,119,255,.15))!important}
.primary{
  background:linear-gradient(135deg,#1677ff,#0796e9)!important;
  color:#fff!important;border:0!important;box-shadow:0 9px 24px rgba(22,119,255,.18)!important;
}
.card,.panel,.walletCard,.order,.stats>div,.info>div,.categoryCard,.authCard,.profileShowcase{
  background:#fff!important;border-color:var(--v87-line)!important;color:var(--v87-ink)!important;
  box-shadow:0 8px 28px rgba(49,91,140,.055);
}
.card:hover,.categoryCard:hover{border-color:#9ccaff!important;box-shadow:0 12px 34px rgba(22,119,255,.10)!important}
.thumb,.miniThumb,.productImage{background:linear-gradient(145deg,#f4f8fd,#eaf3ff)!important;border-color:#dce9f8!important}
.pageHead input,.form input,.form select,.form textarea,input,select,textarea{
  background:#fff;color:var(--v87-ink);border-color:#d9e5f3;
}
.chips span,.badges span{background:#f4f8fd!important;border-color:#dbe7f3!important;color:#506078!important}
.empty{color:#7a879a!important;border-color:#cddbeb!important;background:#fff!important}
.price,.row b{color:#0b72e7!important}
.toast{background:#fff!important;border-color:#b8d7ff!important;color:var(--v87-ink)!important;box-shadow:0 18px 50px rgba(42,77,120,.18)!important}

/* Account dropdown stays readable on white theme */
.accountDropdown{background:#fff!important;border-color:#dce7f3!important;color:var(--v87-ink)!important;box-shadow:0 18px 55px rgba(25,55,95,.18)!important}
.accountDropdownHeader,.accountMiniStats,.accountMenuList{color:var(--v87-ink)!important}
.accountMenuBtn{color:var(--v87-ink)!important}
.accountMenuBtn:hover{background:#f2f7fd!important}
.accountMenuBtn small,.accountDropdownHeader span,.accountMiniStat span{color:#738096!important}

/* Auth is deliberately large/simple */
.authCard label{color:#42516a!important}
.authCard input{background:#fff!important;color:#172033!important;border:1px solid #cddceb!important;min-height:48px}
.authSwitch{color:#68758a!important}
.authSwitch button{color:#126edc!important}

/* Mobile: usable, not desktop squeezed onto phone */
@media(max-width:768px){
  .siteHeaderV87{
    grid-template-columns:auto 1fr auto!important;
    grid-template-areas:"logo spacer account" "nav nav nav"!important;
    min-height:108px!important;
    padding:8px 10px 7px!important;
    gap:7px 8px!important;
    position:sticky!important;
  }
  .brandV87 .logoMark{width:34px!important;height:34px!important}
  .brandNameV87{font-size:14px}
  .mainNavV87{
    width:100%!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;
    overflow:visible!important;gap:6px!important;
  }
  .mainNavV87 button{
    width:100%;min-height:42px!important;padding:8px 6px!important;
    font-size:12px!important;white-space:nowrap!important;
  }
  #accountArea .outlineBtn,#accountArea .primary{min-height:38px!important;padding:7px 10px!important}
  #accountArea:not(:has(.avatarMenuWrap)) .outlineBtn,#accountArea:not(:has(.avatarMenuWrap)) .primary{font-size:11px!important}
  .hero{padding:28px 20px!important;min-height:0!important;border-radius:20px!important;grid-template-columns:1fr!important}
  .hero h1{font-size:36px!important}
  .hero p{font-size:15px!important;line-height:1.65}
  .heroArt{display:none!important}
  main{width:min(94vw,1180px)!important;margin-top:18px!important}
}
@media(max-width:430px){
  .brandNameV87{display:none}
  .siteHeaderV87{grid-template-columns:38px 1fr auto!important}
  #accountArea:not(:has(.avatarMenuWrap)) .outlineBtn,#accountArea:not(:has(.avatarMenuWrap)) .primary{padding:7px 9px!important}
}
@media(max-width:360px){
  .mainNavV87 button{font-size:11px!important;padding:7px 4px!important}
  #accountArea:not(:has(.avatarMenuWrap)) .outlineBtn{display:none!important}
}

/* ==========================================================
   TH Social V92 — Strong Blue Hero
   Darker, high-contrast hero inspired by bold blue marketplace banners.
   Right-side laptop visual removed; copy is rebalanced for clarity.
   ========================================================== */
.heroV89{
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  padding:68px 64px 64px!important;
  min-height:390px!important;
  border-radius:30px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:
    radial-gradient(circle at 86% 18%,rgba(48,175,255,.38),transparent 25%),
    radial-gradient(circle at 72% 78%,rgba(0,213,255,.18),transparent 26%),
    linear-gradient(128deg,#052a72 0%,#0757c9 47%,#0a84ef 100%)!important;
  box-shadow:0 22px 50px rgba(4,62,145,.24)!important;
}
.heroV89:before{
  content:"";position:absolute;right:-95px;top:-130px;width:430px;height:430px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 36px rgba(255,255,255,.035),0 0 0 80px rgba(255,255,255,.02);
  pointer-events:none;
}
.heroV89:after{
  content:"";position:absolute;right:70px;bottom:36px;width:300px;height:180px;border-radius:32px;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.14);transform:rotate(-8deg);pointer-events:none;
}
.heroV89Copy{position:relative;z-index:2;max-width:850px}
.heroV89Kicker{
  display:inline-flex;align-items:center;min-height:34px;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:900;margin-bottom:18px;
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)
}
.heroV89 h1{
  margin:0 0 20px!important;font-size:clamp(48px,5.7vw,78px)!important;line-height:1.02!important;
  letter-spacing:-1.7px!important;color:#fff!important;text-shadow:0 6px 24px rgba(0,31,83,.18)
}
.heroV89Copy>p{
  max-width:760px;font-size:18px!important;line-height:1.8!important;margin:0!important;color:rgba(255,255,255,.88)!important
}
.heroV89Copy>p b{color:#fff!important}
.heroV89Actions{display:flex;align-items:center;margin-top:30px}
.heroV89Primary{
  min-height:54px!important;padding:0 26px!important;border-radius:15px!important;font-size:16px!important;font-weight:900!important;
  background:#fff!important;color:#0868d7!important;border:0!important;box-shadow:0 14px 28px rgba(0,35,92,.24)!important
}
.heroV89Primary:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(0,35,92,.3)!important}
.heroV89Note{margin-top:17px;color:rgba(255,255,255,.72);font-size:14px;line-height:1.6;max-width:700px}
.heroV89Visual,.heroV89Highlights,.heroV89Secondary,.heroV89Guide{display:none!important}

@media(max-width:768px){
  .heroV89{padding:38px 24px 36px!important;min-height:0!important;border-radius:24px!important}
  .heroV89:before{right:-170px;top:-145px;width:340px;height:340px}
  .heroV89:after{right:-100px;bottom:-70px;width:260px;height:160px;opacity:.7}
  .heroV89 h1{font-size:42px!important;line-height:1.06!important;letter-spacing:-1px!important}
  .heroV89Copy>p{font-size:15.5px!important;line-height:1.72!important}
  .heroV89Actions{display:grid;grid-template-columns:1fr;margin-top:24px}
  .heroV89Primary{width:100%!important;min-height:54px!important}
  .heroV89Kicker{font-size:13px}
}
@media(max-width:430px){
  .heroV89{padding:30px 18px 28px!important;border-radius:20px!important}
  .heroV89 h1{font-size:36px!important}
  .heroV89Note{font-size:13px}
}

/* ==========================================================
   TH Social V93 — Header member actions matched to strong-blue theme
   ========================================================== */
#accountArea{gap:9px!important;align-items:center!important}

#accountArea .balance{
  position:relative;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#eef6ff,#e2efff)!important;
  border:1px solid #bfd9ff!important;
  color:#0b5ecf!important;
  font-weight:900!important;
  box-shadow:0 6px 18px rgba(26,104,210,.10)!important;
}
#accountArea .balance:before{
  content:"฿";
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#0a54c7,#1499ff);
  color:#fff;font-size:12px;font-weight:950;
  box-shadow:0 5px 12px rgba(13,100,218,.20);
}

#accountArea .headerSellerBtn{
  min-height:42px!important;
  padding:0 15px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#0a51c2 0%,#0d7be8 58%,#16a4ff 100%)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
  font-weight:900!important;
  box-shadow:0 8px 20px rgba(10,83,194,.22)!important;
}
#accountArea .headerSellerBtn:hover{transform:translateY(-1px);filter:brightness(1.03)}

#accountArea .chatNavBtn{
  min-height:42px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid #9fcaff!important;
  color:#0a5ac8!important;
  font-weight:900!important;
  box-shadow:0 6px 18px rgba(22,102,210,.09)!important;
}
#accountArea .chatNavBtn:hover{background:#eef6ff!important;border-color:#63a8ff!important}
#accountArea .chatNavBtn.hasUnread{box-shadow:0 0 0 3px rgba(45,139,255,.12),0 7px 18px rgba(22,102,210,.12)!important}
#accountArea .chatNavBadge{
  background:#ff4d68!important;
  border:2px solid #fff!important;
  box-shadow:0 4px 10px rgba(220,48,74,.24)!important;
}

#accountArea .bellBtn{
  width:42px!important;height:42px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#ffffff,#f3f8ff)!important;
  border:1px solid #9fcaff!important;
  color:#0a5ac8!important;
  box-shadow:0 6px 18px rgba(22,102,210,.09)!important;
  transition:.18s ease;
}
#accountArea .bellBtn:hover{background:#eaf4ff!important;border-color:#5ba3ff!important;transform:translateY(-1px)}
#accountArea .bellBtn.hasUnread{box-shadow:0 0 0 3px rgba(255,191,38,.14),0 7px 18px rgba(22,102,210,.10)!important}
#accountArea .notifBadge{
  background:linear-gradient(135deg,#ffb020,#ff7a00)!important;
  color:#fff!important;
  border:2px solid #fff!important;
  box-shadow:0 4px 10px rgba(255,142,0,.30)!important;
}

#accountArea .avatarBtn{
  width:42px!important;height:42px!important;min-width:42px!important;
  padding:2px!important;
  border-radius:50%!important;
  border:2px solid #c9ddff!important;
  background:#fff!important;
  box-shadow:0 7px 18px rgba(22,102,210,.13)!important;
  overflow:visible!important;
}
#accountArea .avatarBtn:hover{border-color:#5ba3ff!important;transform:translateY(-1px)}
#accountArea .avatarBtn .avatarImg{
  width:34px!important;height:34px!important;
  border-radius:50%!important;
  background:linear-gradient(135deg,#0b5bd3,#1ca7ff)!important;
  color:#fff!important;
  overflow:hidden!important;
}
#accountArea .avatarBtn .avatarDot{
  width:10px!important;height:10px!important;
  right:-1px!important;bottom:0!important;
  background:#22c55e!important;
  border:2px solid #fff!important;
}

/* Dropdown palette follows the new customer-facing theme */
#accountArea .accountDropdown{
  background:#fff!important;
  border:1px solid #d8e7f9!important;
  box-shadow:0 22px 55px rgba(28,72,125,.18)!important;
}
#accountArea .accountDropdownArrow{background:#fff!important;border-color:#d8e7f9!important}
#accountArea .accountDropdownAvatar{background:linear-gradient(135deg,#0b5bd3,#1ca7ff)!important}
#accountArea .accountMiniStat{background:#f3f8ff!important;border-color:#dce9f8!important}
#accountArea .accountMenuBtn{background:#fff!important;border-color:#e1eaf5!important;color:#172033!important}
#accountArea .accountMenuBtn:hover{background:#eef6ff!important;border-color:#a8cfff!important}
#accountArea .accountMenuBtn .menuIcon{background:#eef6ff!important;border-color:#d7e8fb!important}

@media(max-width:768px){
  #accountArea{gap:6px!important}
  #accountArea .headerSellerBtn,#accountArea .chatNavBtn{padding:0 10px!important;min-height:38px!important}
  #accountArea .bellBtn,#accountArea .avatarBtn{width:38px!important;height:38px!important;min-width:38px!important}
  #accountArea .avatarBtn .avatarImg{width:30px!important;height:30px!important}
}


/* ==========================================================
   TH Social V94 — Full customer-facing White / Blue theme
   Header wallet, seller application, chat, notifications.
   ========================================================== */

/* HEADER: wallet uses one baht icon only; text is number */
#accountArea .balance{
  background:linear-gradient(135deg,#eaf4ff 0%,#dcecff 100%)!important;
  border:1px solid #b8d7ff!important;
  color:#075fc9!important;
  letter-spacing:.1px;
}
#accountArea .balance:before{
  content:"฿"!important;
  background:linear-gradient(135deg,#0757c8,#1597f5)!important;
}
#accountArea .chatNavBtn{
  background:linear-gradient(135deg,#eaf4ff,#d8eaff)!important;
  border:1px solid #9bc8ff!important;
  color:#075fc9!important;
  box-shadow:0 7px 18px rgba(20,101,210,.12)!important;
}
#accountArea .chatNavBtn:hover{
  background:linear-gradient(135deg,#dcecff,#cbe3ff)!important;
  border-color:#66adff!important;
}

/* SELLER APPLICATION: remove legacy black cards */
.privacyBox{
  background:linear-gradient(135deg,#eef7ff,#e7f2ff)!important;
  border:1px solid #bed9fb!important;
  color:#34516f!important;
  box-shadow:0 10px 25px rgba(24,88,155,.06);
}
.privacyBox b{color:#103f78!important}
.applyGrid{gap:16px!important}
.applyCard{
  background:#ffffff!important;
  border:1px solid #d7e6f7!important;
  border-radius:20px!important;
  box-shadow:0 14px 34px rgba(31,78,128,.08)!important;
}
.applyCard h3{color:#16345b!important}
.applyCard label{color:#294766!important;font-weight:700!important}
.applyCard input,.applyCard textarea,.applyCard select{
  background:#f8fbff!important;
  color:#172c45!important;
  border:1px solid #cfdeef!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.applyCard input:focus,.applyCard textarea:focus,.applyCard select:focus{
  outline:none!important;
  border-color:#55a4ff!important;
  box-shadow:0 0 0 3px rgba(45,139,255,.12)!important;
}
.applyCard input::placeholder,.applyCard textarea::placeholder{color:#93a5b8!important}
.checkRow{color:#60758c!important}
.statusBox{
  background:#fff!important;
  border:1px solid #d7e6f7!important;
  box-shadow:0 14px 34px rgba(31,78,128,.08)!important;
}

/* NOTIFICATION MENU: white/blue instead of black/purple */
#accountArea .notificationMenu{
  background:#ffffff!important;
  border:1px solid #d7e6f7!important;
  box-shadow:0 22px 55px rgba(25,72,126,.18)!important;
  color:#172c45!important;
}
#accountArea .notifHead{
  background:linear-gradient(180deg,#f8fbff,#f0f7ff)!important;
  border-bottom:1px solid #dce8f5!important;
}
#accountArea .notifHead b{color:#15385f!important}
#accountArea .notifHead button{color:#0b6bdc!important;font-weight:800!important}
#accountArea .notifList{background:#fff!important}
#accountArea .notifItem{
  border-bottom:1px solid #e7eef7!important;
  color:#18314f!important;
}
#accountArea .notifItem:hover{background:#f4f9ff!important}
#accountArea .notifItem.unread{
  background:#eaf4ff!important;
  box-shadow:inset 3px 0 0 #2587f4!important;
}
#accountArea .notifIcon{
  background:#e5f1ff!important;
  color:#0967d6!important;
}
#accountArea .notifText b{color:#193755!important}
#accountArea .notifText p{color:#6d8197!important}
#accountArea .notifTime{color:#8395a8!important}
#accountArea .notifDot{background:#2b86f2!important}
#accountArea .notifFooter{
  background:#f8fbff!important;
  border-top:1px solid #dce8f5!important;
}
#accountArea .notifFooter button{color:#0b6bdc!important;font-weight:850!important}
#accountArea .notifEmpty{color:#7990a8!important}

/* Full notifications page follows customer theme too */
.notificationPageItem{
  background:#fff!important;
  border:1px solid #d8e6f6!important;
  color:#193755!important;
  box-shadow:0 8px 20px rgba(32,78,128,.05)!important;
}
.notificationPageItem.unread{
  border-color:#9cc8ff!important;
  background:#eef7ff!important;
}

/* CHAT: replace all legacy dark/purple surfaces with clean white/blue */
.chatPageMain{color:#18314f!important}
.chatShell{
  background:#ffffff!important;
  border:1px solid #cfe0f2!important;
  box-shadow:0 20px 55px rgba(25,72,126,.14)!important;
}
.chatSidebar2{
  background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%)!important;
  border-right:1px solid #d8e6f5!important;
}
.chatBrand{
  background:#f5faff!important;
  border-bottom:1px solid #d8e6f5!important;
}
.chatBrandLogo{color:#075fc9!important}
.chatBrandLogoMark{
  background:#dcecff!important;
  color:#075fc9!important;
  border:1px solid #bdd9fb!important;
}
.chatSidebarSearch input,.chatSearch{
  background:#ffffff!important;
  color:#173554!important;
  border:1px solid #cbdced!important;
}
.chatSidebarSearch input:focus,.chatSearch:focus{
  outline:none!important;
  border-color:#55a4ff!important;
  box-shadow:0 0 0 3px rgba(45,139,255,.11)!important;
}
.chatSidebarMeta,.chatSidebarFilter{color:#617994!important}
.chatTabs button{
  background:#f3f8ff!important;
  border:1px solid #d5e4f4!important;
  color:#55718e!important;
}
.chatTabs button.active{
  background:linear-gradient(135deg,#0b61d5,#1998f4)!important;
  border-color:#0d73df!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(20,106,219,.18)!important;
}
.chatAdminSupportBtn{
  width:100%;
  border:1px solid #0d73df!important;
  background:linear-gradient(135deg,#0758c8,#1499f5)!important;
  color:#fff!important;
  border-radius:12px;
  padding:11px 12px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(10,91,198,.18);
}
.chatThreadList2{background:transparent!important}
.chatThreadRow{
  background:#ffffff!important;
  border-color:#dce7f3!important;
  color:#193755!important;
}
.chatThreadRow:hover{background:#f4f9ff!important;border-color:#acd0fb!important}
.chatThreadRow.active{
  background:#e8f3ff!important;
  border-color:#68adf8!important;
  box-shadow:inset 3px 0 0 #1684ef!important;
}
.chatThreadText b,.chatThreadName{color:#15385f!important}
.chatThreadSub,.chatThreadPreview2,.chatThreadPreview,.chatThreadRight{color:#74899e!important}
.adminThreadBadge{background:#e3f1ff!important;color:#075fc9!important;border-color:#bad9fb!important}

.chatStage{
  background:#f8fbff!important;
  color:#193755!important;
}
.chatStageHead{
  background:#ffffff!important;
  border-bottom:1px solid #dbe7f3!important;
}
.chatPeerTitle b{color:#15385f!important}
.chatPeerMeta{color:#71869d!important}
.chatHistoryBtn{
  background:#eef6ff!important;
  border-color:#c7ddf5!important;
  color:#075fc9!important;
}
.chatBoard,.chatMessages{
  background:
    radial-gradient(circle at 12% 8%,rgba(54,151,255,.08),transparent 26%),
    linear-gradient(180deg,#f6faff,#edf5ff)!important;
}
.chatMsg.theirs{
  background:#ffffff!important;
  border:1px solid #d8e5f2!important;
  color:#1a3655!important;
  box-shadow:0 6px 14px rgba(30,74,124,.05)!important;
}
.chatMsg.mine{
  background:linear-gradient(135deg,#075bcf,#1598f4)!important;
  color:#fff!important;
}
.chatMsg.system{
  background:#eaf4ff!important;
  border:1px dashed #9bc8fa!important;
  color:#54708d!important;
}
.chatComposer2,.chatComposer{
  background:#ffffff!important;
  border-top:1px solid #d8e6f5!important;
}
.chatComposerBox,.chatInputWrap{
  background:#f8fbff!important;
  border-color:#d4e2f1!important;
}
.chatInputWrap textarea,.chatComposer textarea{
  background:#ffffff!important;
  color:#18314f!important;
  border-color:#cbdced!important;
}
.chatIconBtn{
  background:#eef6ff!important;
  color:#075fc9!important;
  border-color:#cce0f6!important;
}
.chatSendBtn2,.chatSendBtn{
  background:linear-gradient(135deg,#0758c8,#1598f4)!important;
  border-color:#0b6fd9!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(10,91,198,.18)!important;
}
.chatHistoryHint,.chatCounter{color:#7b8fa4!important}

/* right-side chat information */
.chatRightPanel{
  background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%)!important;
  border-left:1px solid #d8e6f5!important;
  color:#193755!important;
}
.chatRightTabs{border-bottom-color:#d8e6f5!important}
.chatRightTabs button{color:#6e8399!important}
.chatRightTabs button.active{color:#075fc9!important}
.chatRightTabs button.active::after{background:linear-gradient(90deg,#0758c8,#1598f4)!important}
.chatOrderSearch input{background:#fff!important;color:#18314f!important;border-color:#cbdced!important}
.chatOrderFilters button{background:#fff!important;color:#607992!important;border-color:#d1e0ef!important}
.chatOrderFilters button.active{background:#0b6bdc!important;color:#fff!important;border-color:#0b6bdc!important}
.chatOrderCard,.chatProfileStat{
  background:#ffffff!important;
  border-color:#d7e5f3!important;
  color:#193755!important;
}
.chatOrderTitle,.chatProfileInfo b{color:#193755!important}
.chatOrderMeta,.chatProfileHero span,.chatProfileStat span,.chatProfileInfo div,.chatRightEmpty{color:#70859b!important}
.chatProfileHero{border-bottom-color:#d8e6f5!important}
.chatProfileInfo div{border-bottom-color:#e0eaf4!important}
.chatOrderCount{color:#0b6bdc!important}
.chatOrderPrice{color:#075fc9!important}
.chatAfterSaleBtn{background:#eef6ff!important;color:#075fc9!important;border-color:#bad8f8!important}

/* Chat scrollbars: blue, not purple/black */
.chatBoard,.chatThreadList2,.chatRightScroll{
  scrollbar-color:#5aa9ff #e7f2ff!important;
}
.chatBoard::-webkit-scrollbar-track,.chatThreadList2::-webkit-scrollbar-track,.chatRightScroll::-webkit-scrollbar-track{
  background:#e7f2ff!important;border-left-color:#d3e4f5!important;
}
.chatBoard::-webkit-scrollbar-thumb,.chatThreadList2::-webkit-scrollbar-thumb,.chatRightScroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#3e9cff,#0b6bdc)!important;
  border-color:#e7f2ff!important;
  box-shadow:none!important;
}

/* General customer-facing panels that still inherit the legacy black theme */
body:not(.adminBody) .panel,
body:not(.adminBody) .walletCard,
body:not(.adminBody) .order{
  background:#fff!important;
  border-color:#d8e6f5!important;
  color:#193755!important;
  box-shadow:0 10px 28px rgba(31,78,128,.06)!important;
}


/* ==========================================================
   TH Social V95 — Wallet / Top Up customer theme refresh
   White + light blue theme for top-up pages.
   ========================================================== */

/* Top up page wrapper */
.topupPage .pageHead .outlineBtn{
  background:linear-gradient(135deg,#f8fbff,#eef6ff)!important;
  border:1px solid #bed8f7!important;
  color:#0b67d4!important;
  box-shadow:0 8px 22px rgba(20,101,210,.08)!important;
}
.topupPage .pageHead .outlineBtn:hover{
  background:linear-gradient(135deg,#eaf4ff,#ddecff)!important;
  border-color:#87bcff!important;
}

/* Current balance hero */
.topupBalanceHero{
  background:radial-gradient(circle at 85% 20%,rgba(77,167,255,.18),transparent 34%),linear-gradient(135deg,#f4f9ff 0%,#e8f2ff 100%)!important;
  border:1px solid #cfe0f2!important;
  border-radius:22px!important;
  padding:22px 24px!important;
  box-shadow:0 16px 38px rgba(26,84,142,.08)!important;
  margin-bottom:14px!important;
}
.topupBalanceHero span{display:block;color:#6682a0!important;font-weight:700!important;letter-spacing:.15px}
.topupBalanceHero b,.topupBalanceHero strong{display:block;font-size:34px!important;margin-top:4px;color:#0b61d5!important;line-height:1.1}
.topupBalanceHero small{color:#89a0b7!important}

/* Grid/cards */
.topupGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px!important}
.topupCard{
  position:relative;
  background:#ffffff!important;
  border:1px solid #d7e6f7!important;
  border-radius:20px!important;
  padding:22px!important;
  box-shadow:0 16px 34px rgba(31,78,128,.08)!important;
}
.topupCard h3{margin:0 0 16px!important;color:#17385f!important;font-size:28px;font-weight:900}
.topupStep{
  position:absolute;
  right:16px;
  top:14px;
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#0b61d5,#1696f4)!important;
  color:#fff!important;
  font-weight:900;
  box-shadow:0 8px 18px rgba(20,101,210,.18)!important;
}

/* Bank info rows */
.topupBankRows{display:grid;gap:10px!important}
.topupBankRows>div{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px!important;
  background:#f8fbff!important;
  border:1px solid #d7e6f7!important;
  border-radius:14px!important;
}
.topupBankRows span{color:#6b84a0!important;min-width:84px;font-weight:700!important}
.topupBankRows b{flex:1;color:#173554!important;word-break:break-word}
.topupBankRows .outlineBtn{
  background:#ffffff!important;
  border:1px solid #bed8f7!important;
  color:#0b67d4!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
.topupBankRows .outlineBtn:hover{background:#eef6ff!important;border-color:#87bcff!important}

/* Quick amount buttons */
.topupQuickAmounts{display:flex;gap:8px!important;margin-top:14px!important;flex-wrap:wrap}
.topupQuickAmounts button{
  padding:9px 12px!important;
  border:1px solid #cbe0f6!important;
  background:linear-gradient(135deg,#f7fbff,#edf5ff)!important;
  color:#0b67d4!important;
  border-radius:10px!important;
  font-weight:800!important;
  cursor:pointer;
  box-shadow:0 5px 12px rgba(24,88,155,.05)!important;
}
.topupQuickAmounts button:hover{
  background:linear-gradient(135deg,#0b61d5,#1696f4)!important;
  border-color:#0b61d5!important;
  color:#fff!important;
}

/* Labels + amount input */
.topupAmountLabel{
  display:block!important;
  color:#607a95!important;
  font-size:13px!important;
  font-weight:800!important;
}
.topupAmountLabel input{
  width:100%!important;
  box-sizing:border-box!important;
  margin-top:10px!important;
  background:#f8fbff!important;
  color:#173554!important;
  border:1px solid #cfdeef!important;
  border-radius:14px!important;
  padding:14px 16px!important;
  font-size:24px!important;
  font-weight:900!important;
  outline:none!important;
}
.topupAmountLabel input::placeholder{color:#93a5b8!important}
.topupAmountLabel input:focus{
  border-color:#59a7ff!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(45,139,255,.12)!important;
}

/* Slip upload box */
.topupUploadBox{
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  margin:14px 0!important;
  padding:28px 22px!important;
  min-height:168px!important;
  border:1px dashed #9bc7fa!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#f8fbff,#eef6ff)!important;
  cursor:pointer!important;
  transition:.18s;
}
.topupUploadBox:hover{
  background:linear-gradient(180deg,#eef6ff,#e5f1ff)!important;
  border-color:#59a7ff!important;
}
.topupUploadBox input{display:none!important}
.topupUploadBox span{font-weight:850!important;color:#1d426c!important;font-size:16px!important}
.topupUploadBox small{color:#7189a1!important;margin-top:6px!important}
.topupFileReady{color:#149b53!important}

/* Verify button */
.topupVerifyV78,.topupVerifyBtn{
  width:100%!important;
  padding:14px 18px!important;
  border-radius:14px!important;
  border:1px solid #0c71dd!important;
  background:linear-gradient(135deg,#0b61d5,#1696f4)!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:900!important;
  box-shadow:0 12px 28px rgba(20,101,210,.20)!important;
}
.topupVerifyV78:hover,.topupVerifyBtn:hover{filter:brightness(1.04)}
.topupVerifyV78:disabled,.topupVerifyBtn:disabled{opacity:.6!important;cursor:not-allowed!important}
.topupSpinner{border:2px solid rgba(255,255,255,.35)!important;border-top-color:#fff!important}

/* Status / warning */
.topupStatus{
  display:none;
  margin-top:14px!important;
  padding:14px 16px!important;
  border-radius:14px!important;
  line-height:1.55!important;
  font-size:14px!important;
}
.topupStatus.show{display:block}
.topupStatus.loading{background:#eef6ff!important;border:1px solid #bfd9f8!important;color:#2a5179!important}
.topupStatus.success{background:#edfdf3!important;border:1px solid #9fd8b6!important;color:#187347!important}
.topupStatus.error{background:#fff2f4!important;border:1px solid #f3bcc4!important;color:#b4233d!important}
#topupConfigWarn{
  background:#fff8e9!important;
  border:1px solid #f6df9a!important;
  color:#8a6514!important;
  border-radius:14px!important;
  padding:12px 14px!important;
  margin-bottom:14px!important;
}
#topupConfigWarn:empty{display:none!important}

/* Top up history page (keep consistent if user clicks history) */
.topupHistoryWrap{
  margin-top:20px!important;
  border:1px solid #d7e6f7!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#ffffff!important;
  box-shadow:0 16px 34px rgba(31,78,128,.08)!important;
}
.topupHistoryToolbar{
  display:flex;gap:10px;align-items:center;
  padding:14px!important;
  border-bottom:1px solid #e5eef7!important;
  background:linear-gradient(180deg,#f8fbff,#f1f7ff)!important;
}
.topupSearch input{
  width:100%;box-sizing:border-box;
  background:#ffffff!important;
  border:1px solid #cfdeef!important;
  color:#173554!important;
  border-radius:12px!important;
  padding:11px 14px 11px 38px!important;
  outline:none!important;
}
.topupSearch input:focus{border-color:#59a7ff!important;box-shadow:0 0 0 3px rgba(45,139,255,.12)!important}
.topupSearch span{color:#82a0bf!important}
.topupToolBtn{
  width:40px;height:40px;border-radius:11px!important;
  border:1px solid #cfe0f2!important;
  background:#ffffff!important;
  color:#0b67d4!important;
  display:grid;place-items:center;cursor:pointer;font-size:17px;
}
.topupToolBtn:hover{background:#eef6ff!important;border-color:#87bcff!important}
.topupHistoryTable th,.topupHistoryTable td{padding:14px 16px!important;border-bottom:1px solid #e8eef5!important;text-align:left;vertical-align:middle}
.topupHistoryTable th{font-size:11px;color:#7b91a8!important;font-weight:800;background:#f8fbff!important;letter-spacing:.2px}
.topupHistoryTable td{font-size:13px;color:#173554!important;background:#fff!important}
.topupHistoryTable tbody tr:hover{background:#f8fbff!important}
.topupRowMain small,.topupHistoryMeta,.topupHistoryCount,.topupHistoryEmpty,.topupMobileCard small{color:#7990a8!important}
.topupRef,.topupMobileRef{color:#5e7690!important}
.topupHistoryStatus.success{background:#edfdf3!important;color:#187347!important}
.topupHistoryStatus.pending{background:#fff8e9!important;color:#8a6514!important}
.topupHistoryStatus.failed{background:#fff2f4!important;color:#b4233d!important}
.topupMobileCard{border:1px solid #d7e6f7!important;border-radius:14px!important;padding:14px!important;background:#fff!important;box-shadow:0 8px 20px rgba(32,78,128,.05)!important}

@media(max-width:800px){
  .topupGrid{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .topupCard{padding:16px!important}
  .topupBalanceHero{padding:18px!important}
  .topupBalanceHero b,.topupBalanceHero strong{font-size:28px!important}
  .topupBankRows>div{align-items:flex-start;flex-wrap:wrap}
  .topupBankRows span{min-width:72px}
}


/* ==========================================================
   TH Social V96 — Theme sweep for remaining customer pages
   Fix profile, seller application/status, and top-up history
   lingering dark sections from legacy v83 styles.
   ========================================================== */

/* ---------- Profile page ---------- */
.profileShowcase{
  max-width:760px!important;
  margin:0 auto 22px!important;
  background:#ffffff!important;
  border:1px solid #d7e6f7!important;
  border-radius:24px!important;
  overflow:hidden!important;
  box-shadow:0 18px 40px rgba(32,78,128,.08)!important;
}
.profileCover{
  height:130px!important;
  position:relative!important;
  background:
    radial-gradient(circle at 70% 25%, rgba(96,177,255,.24), transparent 28%),
    linear-gradient(135deg,#33226e 0%,#1d245e 50%,#162342 100%)!important;
}
.profileShowBody{
  padding:0 24px 24px!important;
  text-align:center!important;
  position:relative!important;
  color:#173554!important;
}
.profileShowAvatar{
  width:94px!important;height:94px!important;border-radius:50%!important;
  margin:-47px auto 10px!important;border:4px solid #ffffff!important;
  background:linear-gradient(135deg,#8d78ff,#4ba6ff)!important;
  color:#ffffff!important;overflow:hidden!important;display:grid!important;place-items:center!important;
  font-size:34px!important;font-weight:900!important;position:relative!important;
  box-shadow:0 12px 28px rgba(45,106,175,.18)!important;
}
.profileShowAvatar img{width:100%!important;height:100%!important;object-fit:cover!important}
.profileCameraBtn{
  position:absolute!important;left:50%!important;transform:translateX(30px)!important;top:20px!important;
  width:34px!important;height:34px!important;border-radius:50%!important;
  border:2px solid #ffffff!important;background:linear-gradient(135deg,#0b61d5,#1696f4)!important;
  color:#ffffff!important;display:grid!important;place-items:center!important;cursor:pointer!important;font-size:15px!important;
  box-shadow:0 10px 20px rgba(20,101,210,.18)!important;
}
.profileShowName{font-size:23px!important;font-weight:950!important;margin-top:6px!important;color:#132f4f!important}
.profileShowHandle{color:#8298b0!important;font-size:14px!important;margin-top:2px!important}
.profileStatTiles{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important;margin-top:22px!important}
.profileStatTile{
  background:linear-gradient(180deg,#fbfdff,#f2f8ff)!important;
  border:1px solid #d8e7f7!important;
  border-radius:17px!important;padding:18px 12px!important;
  box-shadow:0 8px 20px rgba(32,78,128,.05)!important;
}
.profileStatIcon{font-size:20px!important;margin-bottom:8px!important}
.profileStatTile b{display:block!important;font-size:20px!important;color:#0b67d4!important}
.profileStatTile span{display:block!important;color:#6f89a3!important;font-size:12px!important;margin-top:4px!important}
.profileQuickActions{display:flex!important;justify-content:center!important;gap:10px!important;flex-wrap:wrap!important;margin-top:18px!important}
.profileQuickActions .outlineBtn{
  background:#ffffff!important;border:1px solid #c7dbf3!important;color:#0b67d4!important;
}
.profileQuickActions .outlineBtn:hover{background:#eef6ff!important;border-color:#87bcff!important}
.profileSellerBlock{max-width:760px!important;margin:0 auto!important}

/* Seller CTA on profile */
.sellerCta{
  margin-top:20px!important;
  background:linear-gradient(135deg,#1b2554 0%,#111d3f 55%,#0f2349 100%)!important;
  border:1px solid #273f74!important;
  border-radius:18px!important;
  padding:22px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;
  box-shadow:0 16px 34px rgba(22,50,95,.12)!important;
}
.sellerCta h3{margin:0 0 6px!important;color:#ffffff!important}
.sellerCta p{margin:0!important;color:#c7d7ef!important}
.sellerCta .statusPill,.sellerCta .done,.sellerCta .pending{box-shadow:none!important}

/* ---------- Seller application / status pages ---------- */
.privacyBox{
  background:linear-gradient(180deg,#f8fbff,#eef6ff)!important;
  border:1px solid #d6e7fa!important;
  border-radius:14px!important;
  padding:15px!important;
  margin:16px 0!important;
  color:#537190!important;
}
.privacyBox b{color:#173554!important}
.applyGrid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important}
.applyCard,.statusBox{
  background:#ffffff!important;
  border:1px solid #d7e6f7!important;
  border-radius:20px!important;
  padding:22px!important;
  color:#173554!important;
  box-shadow:0 16px 34px rgba(31,78,128,.08)!important;
}
.applyCard h3,.statusBox h1,.statusBox h3{color:#173554!important}
.applyCard label,.statusBox .muted,.checkRow{color:#62809d!important}
.applyCard input,.applyCard textarea,.applyCard select,.statusBox input,.statusBox textarea,.statusBox select{
  width:100%!important;
  background:#f8fbff!important;
  color:#173554!important;
  border:1px solid #cfdeef!important;
  border-radius:11px!important;
  padding:12px 13px!important;
}
.applyCard textarea{min-height:90px!important;resize:vertical!important}
.applyCard input:focus,.applyCard textarea:focus,.applyCard select:focus{
  outline:none!important;border-color:#59a7ff!important;background:#ffffff!important;box-shadow:0 0 0 3px rgba(45,139,255,.12)!important;
}
.statusBox .outlineBtn{
  background:#ffffff!important;border:1px solid #c7dbf3!important;color:#0b67d4!important;
}
.statusBox .outlineBtn:hover{background:#eef6ff!important;border-color:#87bcff!important}
.checkRow{display:flex!important;gap:10px!important;align-items:flex-start!important;margin:14px 0!important;color:#61809b!important}
.checkRow input{margin-top:4px!important}
.statusPill,.pending,.done{
  display:inline-flex!important;align-items:center!important;gap:6px!important;padding:8px 12px!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important;
}
.statusPill,.pending{background:#fff8e9!important;color:#8a6514!important;border:1px solid #f6df9a!important}
.done{background:#edfdf3!important;color:#187347!important;border:1px solid #9fd8b6!important}

/* ---------- Top up history ---------- */
main .topupHistoryWrap{
  margin-top:20px!important;
  border:1px solid #d7e6f7!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#ffffff!important;
  box-shadow:0 16px 34px rgba(31,78,128,.08)!important;
}
main .topupHistoryToolbar{
  display:flex!important;gap:10px!important;align-items:center!important;
  padding:14px!important;
  border-bottom:1px solid #e5eef7!important;
  background:linear-gradient(180deg,#f8fbff,#f1f7ff)!important;
}
main .topupSearch{position:relative!important;flex:1 1 auto!important}
main .topupSearch span{position:absolute!important;left:14px!important;top:50%!important;transform:translateY(-50%)!important;color:#82a0bf!important}
main .topupSearch input{
  width:100%!important;box-sizing:border-box!important;
  background:#ffffff!important;
  border:1px solid #cfdeef!important;
  color:#173554!important;
  border-radius:12px!important;
  padding:11px 14px 11px 38px!important;
  outline:none!important;
}
main .topupSearch input:focus{border-color:#59a7ff!important;box-shadow:0 0 0 3px rgba(45,139,255,.12)!important}
main .topupToolBtn{
  width:40px!important;height:40px!important;border-radius:11px!important;
  border:1px solid #cfe0f2!important;background:#ffffff!important;color:#0b67d4!important;
  display:grid!important;place-items:center!important;cursor:pointer!important;font-size:17px!important;
}
main .topupToolBtn:hover{background:#eef6ff!important;border-color:#87bcff!important}
main #topupHistoryList,main #adminTopupList{background:#ffffff!important}
main .topupHistoryTable{width:100%!important;border-collapse:collapse!important;background:#ffffff!important}
main .topupHistoryTable th,main .topupHistoryTable td{
  padding:14px 16px!important;border-bottom:1px solid #e8eef5!important;text-align:left!important;vertical-align:middle!important;
}
main .topupHistoryTable th{font-size:11px!important;color:#7b91a8!important;font-weight:800!important;background:#f8fbff!important;letter-spacing:.2px!important}
main .topupHistoryTable td{font-size:13px!important;color:#173554!important;background:#ffffff!important}
main .topupHistoryTable tbody tr:nth-child(even) td{background:#fcfdff!important}
main .topupHistoryTable tbody tr:hover td{background:#f5faff!important}
main .topupRowIndex{color:#7d94aa!important}
main .topupHistoryAmount{font-weight:800!important;color:#0b67d4!important}
main .topupRowMain b,main .topupMobileCard b{color:#173554!important}
main .topupRowMain small,main .topupHistoryMeta,main .topupHistoryCount,main .topupHistoryEmpty,main .topupMobileCard small{color:#7990a8!important}
main .topupRef,main .topupMobileRef{color:#5e7690!important}
main .topupHistoryEmpty{
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-height:110px!important;background:#ffffff!important;padding:24px!important;color:#7990a8!important;
}
main .topupMobileCards{display:none;background:#ffffff!important;padding:14px!important}
main .topupMobileCard{border:1px solid #d7e6f7!important;border-radius:14px!important;padding:14px!important;background:#fff!important;box-shadow:0 8px 20px rgba(32,78,128,.05)!important;margin-bottom:12px!important}
main .topupMobileCardTop{display:flex!important;justify-content:space-between!important;gap:10px!important;align-items:flex-start!important}
main .topupHistoryStatus.success{background:#edfdf3!important;color:#187347!important;border:1px solid #9fd8b6!important}
main .topupHistoryStatus.pending{background:#fff8e9!important;color:#8a6514!important;border:1px solid #f6df9a!important}
main .topupHistoryStatus.failed{background:#fff2f4!important;color:#b4233d!important;border:1px solid #f3bcc4!important}
main .topupHistoryStatus{display:inline-flex!important;align-items:center!important;padding:6px 10px!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important}

/* Sweep a few old seller/customer cards that may still appear dark */
.breadcrumb{color:#6f89a3!important}
.breadcrumb b,.breadcrumb span{color:#173554!important}

@media(max-width:700px){
  .sellerCta{align-items:flex-start!important;flex-direction:column!important}
  .applyGrid{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  .profileStatTiles{grid-template-columns:1fr!important}
  .profileCover{height:110px!important}
}
@media(max-width:760px){
  main .topupHistoryTable{display:none!important}
  main .topupMobileCards{display:block!important}
}


/* ==========================================================
   TH Social V97 — Contact + FAQ / Help Center
   ========================================================== */

/* Header with 5 simple customer actions */
.mainNavV87 .contactNavBtn{color:#536177!important}
.mainNavV87 .contactNavBtn:hover{background:var(--v87-blue-soft)!important;color:var(--v87-blue-strong)!important}

/* Contact modal */
.v97ContactModal{position:fixed;inset:0;z-index:99999;display:grid;place-items:start center;padding-top:76px;opacity:0;transition:.16s ease}
.v97ContactModal.show{opacity:1}
.v97ContactBackdrop{position:absolute;inset:0;background:rgba(26,44,68,.28);backdrop-filter:blur(2px)}
.v97ContactCard{position:relative;width:min(430px,calc(100vw - 24px));background:#fff;border:1px solid #d8e6f6;border-radius:22px;box-shadow:0 28px 80px rgba(23,61,106,.24);overflow:hidden;transform:translateY(-8px);transition:.16s ease}
.v97ContactModal.show .v97ContactCard{transform:none}
.v97ContactHead{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #e5eef8;background:linear-gradient(180deg,#fbfdff,#f5faff)}
.v97ContactHead>div{display:grid;gap:3px}.v97ContactHead b{font-size:18px;color:#123459}.v97ContactHead span{font-size:12px;color:#758ba2}
.v97ContactHead>button{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:#64788e;font-size:27px;line-height:1}.v97ContactHead>button:hover{background:#eef6ff;color:#0b67d4}
.v97ContactList{display:grid;gap:10px;padding:16px}
.v97ContactItem{display:grid;grid-template-columns:48px 1fr 28px;align-items:center;gap:12px;width:100%;padding:13px;border:1px solid #dce8f5;background:#fff;border-radius:16px;text-align:left;color:#163554;transition:.15s}
.v97ContactItem:hover{border-color:#9ec9fb;background:#f7fbff;transform:translateY(-1px);box-shadow:0 10px 24px rgba(31,88,151,.08)}
.v97ContactItem>div{display:grid;gap:3px}.v97ContactItem b{font-size:15px}.v97ContactItem span{font-size:12px;color:#748ba3}.v97ContactItem strong{font-size:22px;color:#6e88a5;text-align:center}
.v97ContactLogo{width:44px;height:44px;border-radius:13px;display:grid!important;place-items:center!important;color:#fff!important;font-weight:950!important;font-size:28px!important;box-shadow:0 8px 18px rgba(28,77,132,.12)}
.v97ContactLogo svg{width:27px;height:27px;display:block}.v97ContactLogo.fb{background:#1877f2!important;font-family:Arial,sans-serif}.v97ContactLogo.line{background:#06c755!important}.v97ContactLogo.discord{background:#5865f2!important}

/* Help center */
.v97HelpPage{width:min(1260px,94vw)!important}
.v97HelpHero{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:34px 36px;border:1px solid #d7e6f7;border-radius:24px;background:radial-gradient(circle at 90% 20%,rgba(68,159,255,.17),transparent 28%),linear-gradient(135deg,#fff,#f0f7ff);box-shadow:0 16px 36px rgba(31,78,128,.07)}
.v97HelpHero h1{margin:6px 0 8px;font-size:36px;color:#132f4f}.v97HelpHero p{margin:0;max-width:700px;color:#6c829a;line-height:1.7}
.v97HelpSearch{position:relative;min-width:280px}.v97HelpSearch span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#7e9ab8;font-size:18px}.v97HelpSearch input{width:100%;height:48px;padding:0 14px 0 42px;border-radius:14px!important;border:1px solid #ccdef1!important;background:#fff!important;color:#173554!important;box-shadow:0 8px 22px rgba(32,78,128,.06)}
.v97HelpShell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;margin-top:22px;align-items:start}
.v97HelpSide{background:#fff;border:1px solid #d8e6f5;border-radius:20px;padding:14px;box-shadow:0 12px 28px rgba(31,78,128,.06);position:sticky;top:94px}
.v97HelpSideTitle{padding:6px 8px 12px;color:#738ba4;font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.v97HelpSide button{width:100%;display:grid;grid-template-columns:32px 1fr 26px;gap:8px;align-items:center;text-align:left;border:1px solid transparent;background:transparent;color:#36526f;padding:11px 10px;border-radius:13px;margin:2px 0}
.v97HelpSide button:hover{background:#f3f8ff}.v97HelpSide button.active{background:#eaf4ff;border-color:#c8dff9;color:#075fc9}.v97HelpSide button span{font-size:19px}.v97HelpSide button b{font-size:14px}.v97HelpSide button small{font-size:11px;color:#8ca0b5;text-align:center}
.v97HelpMain{min-height:430px;background:#fff;border:1px solid #d8e6f5;border-radius:20px;box-shadow:0 12px 28px rgba(31,78,128,.06);overflow:hidden}
.v97HelpMainHead{padding:20px 22px;border-bottom:1px solid #e6eef7;background:linear-gradient(180deg,#fbfdff,#f5faff)}
.v97HelpMainHead>div{display:flex;align-items:center;gap:12px}.v97HelpMainHead>div>span{width:44px;height:44px;border-radius:13px;background:#e8f3ff;display:grid;place-items:center;font-size:23px}.v97HelpMainHead h2{margin:0;color:#163554}.v97HelpMainHead p{margin:3px 0 0;color:#7b91a8;font-size:12px}
.v97HelpItems{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:20px}
.v97HelpItems>button{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;padding:16px;border:1px solid #dbe7f4;background:#fff;border-radius:14px;color:#193755;min-height:86px}.v97HelpItems>button:hover{border-color:#9bc7fa;background:#f8fbff;box-shadow:0 8px 20px rgba(31,78,128,.06)}
.v97HelpItems>button>div{display:grid;gap:5px}.v97HelpItems b{font-size:15px}.v97HelpItems span{font-size:12px;color:#7a90a7;line-height:1.45}.v97HelpItems strong{font-size:26px;color:#7c96b2}
.v97HelpEmpty{grid-column:1/-1;min-height:280px;display:grid;place-items:center;align-content:center;text-align:center;color:#7890a8}.v97HelpEmpty>span{font-size:42px}.v97HelpEmpty b{margin-top:10px;color:#3a5877}.v97HelpEmpty p{margin:4px 0 0;font-size:13px}
.v97HelpArticle{padding:26px 28px}.v97HelpBack{border:1px solid #cddff2;background:#f4f9ff;color:#0b67d4;border-radius:11px;padding:9px 12px;font-weight:800}.v97HelpArticle h2{font-size:28px;color:#153657;margin:22px 0 14px}.v97HelpBody{color:#526f8d;line-height:1.9;font-size:15px;white-space:normal}

/* Admin Contact + FAQ */
.v97AdminHelpStack{display:grid;gap:18px}.v97AdminContactGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 16px}.v97AdminContactGrid label{display:grid;grid-template-columns:44px 1fr;gap:8px 10px;align-items:center;padding:14px;border:1px solid #d8e6f5;background:#f8fbff;border-radius:16px}.v97AdminContactGrid label>span:not(.v97ContactLogo){font-weight:850;color:#274766}.v97AdminContactGrid input{grid-column:1/-1;width:100%;background:#fff!important;color:#173554!important;border:1px solid #cfdeef!important;border-radius:11px!important;padding:11px 12px!important}
.v97AdminHelpLayout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;margin-top:16px}.v97AdminHelpCats{display:grid;gap:8px;align-content:start}.v97AdminHelpCats button{display:grid;grid-template-columns:32px 1fr 24px;gap:7px;align-items:center;text-align:left;padding:11px;border:1px solid #dce7f4;background:#f9fbfe;color:#2e4d6c;border-radius:12px}.v97AdminHelpCats button.active{background:#eaf4ff;border-color:#9fc9f8;color:#075fc9}.v97AdminHelpCats button small{text-align:center;color:#849ab1}
.v97AdminHelpEditor{border:1px solid #dce7f4;border-radius:16px;background:#fbfdff;padding:16px}.v97AdminCatEdit{display:grid;gap:12px}.v97AdminInlineFields{display:grid;grid-template-columns:110px 1fr;gap:10px}.v97AdminInlineFields label,.v97AdminArticleEditor label{display:grid;gap:6px;color:#53708e;font-size:12px;font-weight:800}.v97AdminInlineFields input,.v97AdminArticleEditor input,.v97AdminArticleEditor textarea{background:#fff!important;color:#173554!important;border:1px solid #cfdeef!important;border-radius:11px!important;padding:11px 12px!important}.v97AdminArticleEditor textarea{min-height:220px;resize:vertical}.v97AdminRowActions{display:flex;gap:8px;flex-wrap:wrap}.v97AdminArticlesHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 10px;padding-top:16px;border-top:1px solid #e2ebf5}.v97AdminArticleList{display:grid;gap:7px}.v97AdminArticleList>button{display:flex;justify-content:space-between;gap:10px;text-align:left;padding:11px 12px;border:1px solid #dce7f4;background:#fff;color:#294a6a;border-radius:11px}.v97AdminArticleList>button.active{background:#eaf4ff;border-color:#a3cbf8;color:#075fc9}.v97AdminArticleEditor{display:grid;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid #e2ebf5}.v97AdminHelpEmpty{padding:32px;text-align:center;color:#7c92a9;background:#f8fbff;border:1px dashed #cbdff2;border-radius:12px}

@media(max-width:960px){.v97HelpShell{grid-template-columns:1fr}.v97HelpSide{position:static;display:flex;gap:7px;overflow-x:auto}.v97HelpSideTitle{display:none}.v97HelpSide button{min-width:190px}.v97AdminContactGrid{grid-template-columns:1fr}.v97AdminHelpLayout{grid-template-columns:1fr}.v97AdminHelpCats{display:flex;overflow-x:auto}.v97AdminHelpCats button{min-width:190px}}
@media(max-width:768px){.siteHeaderV87{min-height:150px!important}.mainNavV87{grid-template-columns:repeat(3,1fr)!important;align-content:start}.v97ContactModal{padding-top:14px;place-items:center}.v97HelpHero{display:grid;padding:24px 20px}.v97HelpHero h1{font-size:28px}.v97HelpSearch{min-width:0}.v97HelpItems{grid-template-columns:1fr;padding:14px}.v97HelpMainHead{padding:16px}.v97HelpArticle{padding:20px}.v97AdminInlineFields{grid-template-columns:90px 1fr}}
@media(max-width:430px){.siteHeaderV87{min-height:154px!important}.mainNavV87 button{font-size:11px!important;padding:7px 5px!important}.v97ContactCard{border-radius:18px}.v97ContactItem{grid-template-columns:44px 1fr 24px}.v97ContactLogo{width:40px;height:40px}.v97HelpPage{width:94vw!important}.v97HelpSide button{min-width:170px}.v97HelpHero{border-radius:19px}.v97HelpMain{border-radius:16px}}


/* ==========================================================
   TH Social V98 — ADMIN WHITE / BLUE DESKTOP THEME
   Keeps admin functionality unchanged; replaces legacy
   black/purple surfaces with clean white / blue controls.
   ========================================================== */

/* Admin page base */
.adminPageV77{
  color:#173554!important;
}
.adminPageV77 .muted,
.adminPageV77 p{
  color:#68819a;
}
.adminPageV77 h1,
.adminPageV77 h2,
.adminPageV77 h3,
.adminPageV77 h4,
.adminPageV77 b,
.adminPageV77 strong{
  color:#173554;
}

/* Owner badge / identity */
.adminIdentityV77{
  background:#ffffff!important;
  border:1px solid #d5e5f6!important;
  color:#173554!important;
  box-shadow:0 10px 26px rgba(31,78,128,.07)!important;
}
.adminIdentityV77 .owner{
  background:#fff7df!important;
  color:#8a5d00!important;
  border:1px solid #f1d67f!important;
}
.adminIdentityV77 .staff{
  background:#eaf4ff!important;
  color:#0b67d4!important;
  border:1px solid #b9d8fb!important;
}

/* Sidebar: blue rather than black */
.adminSideV77{
  background:linear-gradient(180deg,#f7fbff 0%,#edf5ff 100%)!important;
  border:1px solid #d2e4f6!important;
  box-shadow:0 16px 36px rgba(31,78,128,.09)!important;
}
.adminSideBrand{
  border-bottom:1px solid #dce8f5!important;
}
.adminSideBrand>span{
  background:linear-gradient(135deg,#0b61d5,#1696f4)!important;
  box-shadow:0 8px 22px rgba(20,101,210,.18)!important;
}
.adminSideBrand b{color:#173554!important}
.adminSideBrand small{color:#7890a8!important}
.adminSideV77 button{
  color:#486781!important;
}
.adminSideV77 button:hover{
  background:#e4f1ff!important;
  color:#0b61d5!important;
}
.adminSideV77 button.active{
  background:linear-gradient(135deg,#0b61d5,#1696f4)!important;
  color:#ffffff!important;
  box-shadow:0 9px 20px rgba(20,101,210,.18)!important;
}
.adminSideFoot{color:#8aa0b5!important}

/* Dashboard hero */
.adminDashHeroV77{
  background:
    radial-gradient(circle at 86% 24%,rgba(72,158,255,.19),transparent 29%),
    linear-gradient(135deg,#f8fbff 0%,#eaf4ff 100%)!important;
  border:1px solid #d3e5f7!important;
  box-shadow:0 14px 32px rgba(31,78,128,.07)!important;
}
.adminDashHeroV77 h2{color:#173554!important}
.adminDashHeroV77 p{color:#647e98!important}
.adminDashKicker{color:#0b67d4!important}
.adminDashHeroV77 button,
.adminPageV77 .outlineBtn{
  background:#ffffff!important;
  border:1px solid #c3daf3!important;
  color:#0b67d4!important;
}
.adminDashHeroV77 button:hover,
.adminPageV77 .outlineBtn:hover{
  background:#edf6ff!important;
  border-color:#84bbfa!important;
}

/* KPI cards */
.adminQuickV77 button,
.adminStatsFiveV77>div,
.adminFinanceCardsV77>div{
  background:#ffffff!important;
  border:1px solid #d7e6f7!important;
  color:#173554!important;
  box-shadow:0 10px 26px rgba(31,78,128,.055)!important;
}
.adminQuickV77 button:hover{
  transform:translateY(-2px);
  border-color:#8fc1fb!important;
  box-shadow:0 14px 30px rgba(20,101,210,.09)!important;
}
.adminQuickV77 small,
.adminQuickV77 span,
.adminStatsFiveV77 small,
.adminStatsFiveV77 span,
.adminFinanceCardsV77 small,
.adminFinanceCardsV77 span{
  color:#7189a1!important;
}
.adminQuickV77 strong,
.adminStatsFiveV77 b,
.adminFinanceCardsV77 b{
  color:#0b61d5!important;
}
.adminQuickV77 span{color:#0f78e7!important}

/* Section / generic admin panels */
.adminPageV77 .panel,
.adminChartPanelV77,
.adminMembersPanelV77,
.adminHistoryPanelV77,
.adminMemberSummaryV77,
.adminCard,
.adminCards>div{
  background:#ffffff!important;
  border-color:#d7e6f7!important;
  color:#173554!important;
  box-shadow:0 12px 30px rgba(31,78,128,.055)!important;
}
.adminDashSectionTitleV77 h3,
.adminPanelHeadV77 b{color:#173554!important}
.adminDashSectionTitleV77 p,
.adminPanelHeadV77 small{color:#7189a1!important}

.adminPillV77{
  background:#eaf4ff!important;
  border:1px solid #b9d8fb!important;
  color:#0b67d4!important;
}

/* Charts */
.adminMiniChartV77{
  background:linear-gradient(180deg,#f8fbff,#eef6ff)!important;
  border:1px solid #d7e6f7!important;
}
.adminBarV77{
  background:linear-gradient(180deg,#48a8ff,#0b61d5)!important;
  box-shadow:0 0 22px rgba(20,101,210,.14)!important;
}
.adminMiniChartV77.money .adminBarV77{
  background:linear-gradient(180deg,#4ccda0,#16966f)!important;
}
.adminBarV77 span{color:#5f7891!important}
.adminBarColV77 small{color:#8499ad!important}

/* Summary rows */
.adminSummaryRowsV77>div,
.adminLatestV77>div{
  background:#f8fbff!important;
  border:1px solid #dde9f5!important;
}
.adminSummaryRowsV77 span,
.adminLatestV77 small{color:#6e879f!important}
.adminSummaryRowsV77 b,
.adminLatestV77 strong{color:#173554!important}

/* Search, filters, tabs */
.adminMemberCountV77{
  background:#eaf4ff!important;
  border:1px solid #bad9fb!important;
  color:#0b67d4!important;
}
.adminMemberSearchV77{
  background:#ffffff!important;
  border:1px solid #cfdfee!important;
  color:#7890a8!important;
}
.adminMemberSearchV77 input{
  background:transparent!important;
  color:#173554!important;
}
.adminMemberSearchV77 input::placeholder{color:#93a6b8!important}
.adminMemberToolbarV77 select,
.adminHistoryToolbarV77 input[type=date],
.adminPageV77 input,
.adminPageV77 select,
.adminPageV77 textarea{
  background:#ffffff!important;
  color:#173554!important;
  border-color:#cfdeef!important;
}
.adminPageV77 input:focus,
.adminPageV77 select:focus,
.adminPageV77 textarea:focus{
  outline:none!important;
  border-color:#59a7ff!important;
  box-shadow:0 0 0 3px rgba(45,139,255,.11)!important;
}
.adminHistoryTabsV77{
  background:#f5f9ff!important;
  border:1px solid #d7e6f7!important;
}
.adminHistoryTabsV77 button{color:#607991!important}
.adminHistoryTabsV77 button.active{
  background:#0b67d4!important;
  color:#ffffff!important;
}

/* Tables */
.adminMemberTableWrapV77{
  border:1px solid #d7e6f7!important;
  background:#ffffff!important;
}
.adminPageV77 .adminTable,
.adminMemberTableV77{
  background:#ffffff!important;
  color:#173554!important;
}
.adminPageV77 .adminTable th,
.adminMemberTableV77 th{
  background:#f3f8ff!important;
  color:#5d7790!important;
  border-color:#e2ebf5!important;
}
.adminPageV77 .adminTable td,
.adminMemberTableV77 td{
  background:#ffffff!important;
  color:#173554!important;
  border-color:#e8eef5!important;
}
.adminPageV77 .adminTable tbody tr:hover td,
.adminMemberTableV77 tbody tr:hover td{
  background:#f7fbff!important;
}
.superAdminRowV77 td{
  background:#fffdf5!important;
}
.adminMemberIdentityV77 small{color:#7890a8!important}
.adminMemberAvatarV77{
  background:#eaf4ff!important;
  border:1px solid #bad9fb!important;
  color:#0b67d4!important;
}
.walletAmountV77{color:#087c54!important}
.roleBadgeV77.admin{background:#eaf4ff!important;border-color:#bad9fb!important;color:#0b67d4!important}
.roleBadgeV77.seller{background:#edfdf3!important;border-color:#a7dec0!important;color:#187347!important}
.roleBadgeV77.member{background:#f3f6f9!important;border-color:#d9e2eb!important;color:#60758b!important}

/* Three-dot menus */
.adminDotsBtnV77{
  background:#ffffff!important;
  border:1px solid #cfdfee!important;
  color:#42627f!important;
}
.adminDotsBtnV77:hover{background:#edf6ff!important;border-color:#8fc1fb!important}
.adminMemberMenuV77{
  background:#ffffff!important;
  border:1px solid #d5e4f4!important;
  box-shadow:0 18px 48px rgba(25,72,126,.16)!important;
}
.adminMemberMenuV77 button{color:#294866!important}
.adminMemberMenuV77 button:hover{background:#eef6ff!important}
.adminMenuDividerV77{background:#e3ebf4!important}
.dangerTextV77{color:#c83b50!important}

/* Member modal */
.adminMemberOverlayV77{
  background:rgba(18,40,66,.34)!important;
  backdrop-filter:blur(8px)!important;
}
.adminMemberModalV77{
  background:#ffffff!important;
  border:1px solid #d5e4f4!important;
  box-shadow:0 30px 80px rgba(18,48,86,.25)!important;
  color:#173554!important;
}
.adminMemberModalHeadV77{border-bottom:1px solid #e2ebf4!important}
.adminMemberModalHeadV77 h3{color:#173554!important}
.adminMemberModalHeadV77 p{color:#7189a1!important}
.adminMemberModalHeadV77>button{
  background:#f4f9ff!important;
  border:1px solid #d3e3f3!important;
  color:#45647f!important;
}
.superLockNoticeV77{
  background:#fff8e9!important;
  border:1px solid #f4dd9a!important;
  color:#866215!important;
}
.adminMemberInfoGridV77>div{
  background:#f8fbff!important;
  border:1px solid #dce8f5!important;
}
.adminMemberInfoGridV77 small{color:#7189a1!important}
.adminMemberInfoGridV77 b{color:#173554!important}
.adminMemberControlSectionV77{border-top:1px solid #e2ebf4!important}
.adminMemberControlSectionV77 p{color:#7189a1!important}
.adminRoleActionsV77 button,
.adminWalletAdjustV77 button{
  background:#f5f9ff!important;
  border:1px solid #cfdfee!important;
  color:#245078!important;
}
.adminRoleActionsV77 button:hover,
.adminWalletAdjustV77 button:hover{
  background:#eaf4ff!important;
  border-color:#8fc1fb!important;
}
.warningBtnV77{
  background:#fff8e9!important;
  border-color:#f0d688!important;
  color:#8a6514!important;
}
.adminWalletAdjustV77 input{
  background:#ffffff!important;
  color:#173554!important;
  border:1px solid #cfdfee!important;
}

/* Old admin shell/sidebar classes still used by some views */
.adminShell{
  color:#173554!important;
}
.adminSide{
  background:linear-gradient(180deg,#f7fbff,#edf5ff)!important;
  border:1px solid #d2e4f6!important;
  color:#173554!important;
  box-shadow:0 14px 34px rgba(31,78,128,.08)!important;
}
.adminSide h3{color:#0b61d5!important}
.adminSide button{
  background:transparent!important;
  color:#486781!important;
}
.adminSide button:hover{background:#e4f1ff!important;color:#0b61d5!important}
.adminSide button.active{
  background:linear-gradient(135deg,#0b61d5,#1696f4)!important;
  color:#fff!important;
}
.adminMain,
.adminMain .adminCard{
  color:#173554!important;
}
.adminPageV77 .adminSearch{
  background:#fff!important;
  color:#173554!important;
  border-color:#cfdfee!important;
}
.adminTabs{
  background:#f5f9ff!important;
  border-color:#d7e6f7!important;
}
.adminTabs button{color:#607991!important}
.adminTabs button.active{background:#0b67d4!important;color:#fff!important}

/* Claim confirmation modal */
.adminClaimConfirmOverlay{
  background:rgba(18,40,66,.34)!important;
  backdrop-filter:blur(8px)!important;
}
.adminClaimConfirmCard{
  background:#ffffff!important;
  border:1px solid #d5e4f4!important;
  color:#173554!important;
  box-shadow:0 30px 80px rgba(18,48,86,.25)!important;
}
.adminClaimConfirmIcon{
  background:#eaf4ff!important;
  color:#0b67d4!important;
  border-color:#bad9fb!important;
}
.adminClaimConfirmBadge{
  background:#fff8e9!important;
  color:#8a6514!important;
  border-color:#f1d67f!important;
}
.adminClaimConfirmOrder{
  background:#f8fbff!important;
  border-color:#dce8f5!important;
  color:#173554!important;
}
.adminClaimConfirmWarning{
  background:#fff8e9!important;
  border-color:#f1d67f!important;
  color:#866215!important;
}
.adminClaimConfirmCancel{
  background:#f5f9ff!important;
  border-color:#cfdfee!important;
  color:#45647f!important;
}
.adminClaimConfirmSubmit.refund{
  background:linear-gradient(135deg,#d94a61,#bd304a)!important;
  border-color:#bd304a!important;
  color:#fff!important;
}
.adminClaimConfirmSubmit.release{
  background:linear-gradient(135deg,#20a66d,#148457)!important;
  border-color:#148457!important;
  color:#fff!important;
}

/* Admin top-up history should remain white too */
.adminPageV77 .topupHistoryWrap{
  background:#ffffff!important;
  border-color:#d7e6f7!important;
}
.adminPageV77 .topupHistoryToolbar{
  background:#f5f9ff!important;
  border-bottom-color:#e2ebf4!important;
}
.adminPageV77 .topupHistoryTable th{background:#f3f8ff!important;color:#5d7790!important}
.adminPageV77 .topupHistoryTable td{background:#fff!important;color:#173554!important}

/* Keep alerts/status semantically colored but light */
.adminPageV77 .statusGreen{background:#edfdf3!important;color:#187347!important;border-color:#a7dec0!important}
.adminPageV77 .statusOrange{background:#fff8e9!important;color:#8a6514!important;border-color:#f1d67f!important}
.adminPageV77 .statusRed{background:#fff1f3!important;color:#b4233d!important;border-color:#f0bdc5!important}

/* Make admin area visually separated from customer header */
.adminPageV77:before{
  content:"";
  position:fixed;
  inset:72px 0 0;
  z-index:-1;
  background:linear-gradient(180deg,#f7fbff 0%,#f2f7fd 100%);
  pointer-events:none;
}

/* ==========================================================
   TH Social V99 — Admin theme sweep (remove remaining dark blocks)
   Covers: History / Tutorial Links / Recommendation admin pages,
   plus order detail modal and remaining V78/V79 panels.
   ========================================================== */

/* Shared white/blue panels for V78 / V79 */
.adminPageV77 .v78AdminPanel,
.adminPageV77 .v78RecommendConfig,
.adminPageV77 .v78TutorialSetting,
.adminPageV77 .v79OrderHistoryHint,
.adminPageV77 .v78ManualPick,
.adminPageV77 .v78HelpHint,
.adminPageV77 .v79OrderSection,
.adminPageV77 .v79ProductBox,
.adminPageV77 .v79DeliveryItem,
.adminPageV77 .v79NoDelivery,
.adminPageV77 .v79Timeline > div{
  background:#ffffff!important;
  border:1px solid #d7e6f7!important;
  color:#173554!important;
  box-shadow:0 10px 26px rgba(31,78,128,.055)!important;
}

/* Recommendation mode cards */
.adminPageV77 .v78ModeCards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:15px 0;
}
.adminPageV77 .v78ModeCards label{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:9px;
  row-gap:2px;
  padding:15px;
  border:1px solid #d7e6f7!important;
  background:#ffffff!important;
  border-radius:13px;
  cursor:pointer;
  color:#173554!important;
  box-shadow:0 8px 22px rgba(31,78,128,.045)!important;
}
.adminPageV77 .v78ModeCards label.active{
  border-color:#8fc1fb!important;
  background:linear-gradient(135deg,#f7fbff 0%,#edf6ff 100%)!important;
  box-shadow:0 12px 28px rgba(20,101,210,.08)!important;
}
.adminPageV77 .v78ModeCards input{grid-row:1/3}
.adminPageV77 .v78ModeCards b{color:#0b61d5!important}
.adminPageV77 .v78ModeCards span{font-size:11px;color:#6f879f!important}

/* Recommendation config row */
.adminPageV77 .v78RecommendConfig{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin:13px 0;
  padding:12px;
}
.adminPageV77 .v78RecommendConfig label{
  display:grid;
  gap:5px;
  color:#6f879f!important;
}
.adminPageV77 .v78RecommendConfig input{
  width:110px;
  background:#ffffff!important;
  border:1px solid #cfdfee!important;
  color:#173554!important;
  border-radius:8px;
  padding:9px;
}
.adminPageV77 .v78RecommendPreview{
  margin:18px 0;
  padding-top:12px;
  border-top:1px solid #dde8f3!important;
}
.adminPageV77 .v78RecommendPreview h3,
.adminPageV77 .v78RecommendPreview b,
.adminPageV77 .v78ManualPick b,
.adminPageV77 .v78TutorialSetting h3{
  color:#173554!important;
}
.adminPageV77 .v78RecommendPreview h3{font-size:14px}

/* Manual pick lists */
.adminPageV77 .v78ManualPick{margin-top:18px;padding:14px;border-radius:14px}
.adminPageV77 .v78ShopPickList,
.adminPageV77 .v78ProductPickList{
  display:grid;
  gap:8px;
}
.adminPageV77 .v78ProductPickList{max-height:520px;overflow:auto;padding-right:3px}
.adminPageV77 .v78ShopPickList label,
.adminPageV77 .v78ProductPickList label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid #dce8f5!important;
  background:#f8fbff!important;
  border-radius:10px;
  color:#173554!important;
}
.adminPageV77 .v78ShopPickList label:hover,
.adminPageV77 .v78ProductPickList label:hover{
  border-color:#8fc1fb!important;
  background:#edf6ff!important;
}
.adminPageV77 .v78ProductPickList > label > span,
.adminPageV77 .v78ShopPickList label > span{
  width:48px;
  height:42px;
  display:grid;
  place-items:center;
  background:#ffffff!important;
  border:1px solid #dbe7f3!important;
  border-radius:8px;
  overflow:hidden;
}
.adminPageV77 .v78PickImg{width:100%;height:100%;object-fit:cover}
.adminPageV77 .v78ProductPickList label > div{display:grid;flex:1}
.adminPageV77 .v78ShopPickList small,
.adminPageV77 .v78ProductPickList small,
.adminPageV77 .v78TutorialSetting p,
.adminPageV77 .v79OrderHistoryHint small,
.adminPageV77 .v79SectionHead p,
.adminPageV77 .v79Timeline span,
.adminPageV77 .v79ProductBox small,
.adminPageV77 .v79NoDelivery{
  color:#7189a1!important;
}
.adminPageV77 .v78ProductPickList strong{font-size:12px;color:#087c54!important}

/* Tutorial Links */
.adminPageV77 .v78TutorialSetting{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:16px;
  align-items:center;
  padding:18px;
  border-radius:14px;
  margin-top:14px;
}
.adminPageV77 .v78TutorialInput{display:flex;gap:7px}
.adminPageV77 .v78TutorialInput input{
  flex:1;
  background:#ffffff!important;
  color:#173554!important;
  border:1px solid #cfdfee!important;
  border-radius:9px;
  padding:10px;
}
.adminPageV77 .v78HelpHint{
  margin-top:12px;
  padding:12px;
  border-radius:10px;
  background:#f8fbff!important;
  border:1px solid #dce8f5!important;
  color:#6f879f!important;
  font-size:11px;
}

/* Order history hint + rows/buttons */
.adminPageV77 .v79OrderHistoryHint{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
  padding:12px 14px;
  border-radius:12px;
  background:linear-gradient(135deg,#f7fbff 0%,#eef6ff 100%)!important;
}
.adminPageV77 .v79OrderHistoryHint > span{font-size:20px}
.adminPageV77 .v79OrderHistoryHint > div{display:grid;flex:1}
.adminPageV77 .v79OrderHistoryHint b{color:#173554!important}
.adminPageV77 .v79LinkBtn,
.adminPageV77 .v79ProductLink,
.adminPageV77 .v79ProductTitleBig,
.adminPageV77 .v79ShopTitle{
  background:none!important;
  border:none!important;
  padding:0!important;
  margin:0!important;
  color:#0b67d4!important;
  cursor:pointer;
  text-align:left;
}
.adminPageV77 .v79ViewOrderBtn{
  background:#edf6ff!important;
  border:1px solid #bcd9fb!important;
  color:#0b67d4!important;
  border-radius:10px;
  padding:7px 10px;
}
.adminPageV77 .v79ViewOrderBtn:hover{
  background:#dfefff!important;
  border-color:#8fc1fb!important;
}

/* Order detail modal */
.v79OrderOverlay{
  position:fixed;
  inset:0;
  background:rgba(18,40,66,.34)!important;
  backdrop-filter:blur(8px)!important;
  display:grid;
  place-items:center;
  padding:24px;
  z-index:1200;
}
.v79OrderModal{
  width:min(980px,100%);
  max-height:90vh;
  overflow:auto;
  background:#ffffff!important;
  color:#173554!important;
  border:1px solid #d5e4f4!important;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(18,48,86,.25)!important;
}
.v79OrderHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:20px 22px;
  border-bottom:1px solid #e2ebf4!important;
}
.v79OrderHead h2,
.v79SectionHead h3,
.v79ProductBox b{color:#173554!important}
.v79OrderHead p{color:#7189a1!important;margin:4px 0 0}
.v79OrderHead > button{
  background:#f4f9ff!important;
  border:1px solid #d3e3f3!important;
  color:#45647f!important;
  width:38px;height:38px;border-radius:10px;
}
.v79OrderBody{padding:18px 22px 22px;display:grid;gap:16px}
.v79OrderSummary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.v79OrderSummary > div{
  background:#f8fbff!important;
  border:1px solid #dce8f5!important;
  border-radius:14px;
  padding:12px 14px;
}
.v79OrderSummary small{display:block;color:#7189a1!important;margin-bottom:4px}
.v79OrderSummary b{color:#173554!important}
.v79OrderSection{padding:14px;border-radius:16px}
.v79OrderSection.sensitive{
  background:#fffaf1!important;
  border-color:#f1dfab!important;
}
.v79SectionHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.v79ProductBox{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:14px;
}
.v79ProductBox .grow{flex:1;display:grid;gap:5px}
.v79OrderProductVisual{
  width:74px;height:74px;border-radius:14px;
  display:grid;place-items:center;
  background:#f8fbff!important;border:1px solid #dce8f5!important;overflow:hidden;
}
.v79OrderProductVisual img{width:100%;height:100%;object-fit:cover}
.v79DeliveryItem{
  padding:12px 14px;
  border-radius:12px;
  margin-top:10px;
}
.v79DeliveryItem > div{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;
}
.v79DeliveryItem > div button{
  background:#edf6ff!important;
  border:1px solid #bcd9fb!important;
  color:#0b67d4!important;
  border-radius:10px;
  padding:6px 10px;
}
.v79DeliveryItem pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  background:#f8fbff!important;
  border:1px solid #dce8f5!important;
  color:#173554!important;
  border-radius:10px;
  padding:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
}
.v79NoDelivery{padding:14px;border-radius:12px}
.v79Timeline{display:grid;gap:10px}
.v79Timeline > div{
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
  padding:12px 14px;border-radius:12px;
}
.v79Timeline b{color:#173554!important;text-align:right}
.v79Timeline b small{display:block;color:#7a91a8!important;font-weight:400}

/* Responsive helpers */
@media(max-width:800px){
  .adminPageV77 .v78ModeCards,
  .adminPageV77 .v78TutorialSetting,
  .adminPageV77 .v78ShopPickList{grid-template-columns:1fr!important}
  .adminPageV77 .v78TutorialInput{flex-wrap:wrap}
  .adminPageV77 .v78TutorialInput input{flex-basis:100%}
  .v79OrderSummary{grid-template-columns:1fr 1fr}
  .v79ProductBox{flex-direction:column;align-items:flex-start}
  .v79Timeline > div{flex-direction:column}
}

/* ==========================================================
   TH Social V100 — Admin Light Theme 100% Sweep
   Goal: remove remaining dark surfaces anywhere in Admin backend.
   This is an aggressive final override for admin-only pages.
   ========================================================== */

/* 1) Convert almost all admin content surfaces to white/blue cards */
.adminPageV77 :is(
  section[class], article[class], aside[class], div[class], form[class],
  ul[class], ol[class], li[class], label[class]
):not(.adminSideV77):not(.adminSide):not(.adminBarV77):not(.adminBarColV77):not(.adminMiniChartV77):not(.adminClaimConfirmIcon):not(.adminClaimConfirmBadge):not(.adminClaimConfirmOverlay):not(.adminMemberOverlayV77):not(.v79OrderOverlay):not(.owner):not(.staff):not(.statusGreen):not(.statusOrange):not(.statusRed):not(.roleBadgeV77):not(.adminPillV77):not(.superLockNoticeV77):not(.warningBtnV77):not(.adminClaimConfirmWarning):not(.adminClaimConfirmSubmit):not(.adminClaimConfirmCancel):not(.adminMemberAvatarV77):not(.adminSideBrand):not(.adminIdentityV77):not(.adminQuickV77):not(.adminStatsFiveV77):not(.adminFinanceCardsV77):not(.adminSummaryRowsV77):not(.adminLatestV77):not(.adminHistoryTabsV77):not(.adminTabs):not(.topupHistoryToolbar):not(.v78ModeCards):not(.v78RecommendPreview){
  background:#ffffff!important;
  background-image:none!important;
  border-color:#d9e7f5!important;
  color:#173554!important;
}

/* 2) Keep pale blue sections instead of pure black in nested surfaces */
.adminPageV77 .panel,
.adminPageV77 .adminCard,
.adminPageV77 .adminCards>div,
.adminPageV77 .adminHistoryPanelV77,
.adminPageV77 .adminMembersPanelV77,
.adminPageV77 .adminChartPanelV77,
.adminPageV77 .adminMemberSummaryV77,
.adminPageV77 .adminMemberInfoGridV77>div,
.adminPageV77 .adminSummaryRowsV77>div,
.adminPageV77 .adminLatestV77>div,
.adminPageV77 .adminQuickV77 button,
.adminPageV77 .adminStatsFiveV77>div,
.adminPageV77 .adminFinanceCardsV77>div,
.adminPageV77 .adminMemberTableWrapV77,
.adminPageV77 .topupHistoryWrap,
.adminPageV77 .v78AdminPanel,
.adminPageV77 .v78RecommendConfig,
.adminPageV77 .v78TutorialSetting,
.adminPageV77 .v79OrderHistoryHint,
.adminPageV77 .v78ManualPick,
.adminPageV77 .v78HelpHint,
.adminPageV77 .v79OrderSection,
.adminPageV77 .v79ProductBox,
.adminPageV77 .v79DeliveryItem,
.adminPageV77 .v79NoDelivery,
.adminPageV77 .v79Timeline > div{
  background:#ffffff!important;
  background-image:none!important;
  border:1px solid #d9e7f5!important;
  box-shadow:0 10px 26px rgba(31,78,128,.055)!important;
}

/* 3) Pale blue strips/toolbars/hints */
.adminPageV77 .adminHistoryTabsV77,
.adminPageV77 .adminTabs,
.adminPageV77 .topupHistoryToolbar,
.adminPageV77 .v78HelpHint,
.adminPageV77 .v79OrderHistoryHint,
.adminPageV77 .adminClaimConfirmOrder{
  background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 100%)!important;
  border-color:#d7e6f7!important;
  color:#173554!important;
}

/* 4) Inputs / search / textarea / code blocks */
.adminPageV77 input,
.adminPageV77 select,
.adminPageV77 textarea,
.adminPageV77 pre,
.adminPageV77 code{
  background:#ffffff!important;
  color:#173554!important;
  border-color:#cfdeef!important;
}
.adminPageV77 pre{
  background:#f8fbff!important;
  border:1px solid #dce8f5!important;
  border-radius:12px;
}

/* 5) Tables / list rows */
.adminPageV77 table,
.adminPageV77 thead,
.adminPageV77 tbody,
.adminPageV77 tr,
.adminPageV77 td,
.adminPageV77 th{
  color:#173554!important;
  border-color:#e4edf6!important;
}
.adminPageV77 th{background:#f4f9ff!important;color:#5d7790!important}
.adminPageV77 td{background:#ffffff!important}
.adminPageV77 tbody tr:hover td{background:#f8fbff!important}

/* 6) Generic titles/text inside admin */
.adminPageV77 :is(h1,h2,h3,h4,h5,h6,b,strong,label){color:#173554!important}
.adminPageV77 :is(p,small,span):not(.owner):not(.staff):not(.statusGreen):not(.statusOrange):not(.statusRed):not(.roleBadgeV77):not(.adminPillV77){color:#6f879f!important}
.adminPageV77 a{color:#0b67d4!important}

/* 7) Keep action buttons blue/light and prevent inherited dark backgrounds */
.adminPageV77 button:not(.adminClaimConfirmSubmit):not(.adminClaimConfirmCancel):not(.warningBtnV77):not(.outlineBtn):not(.adminViewOrderBtnV77):not(.adminQuickV77 button):not(.adminSideV77 button):not(.adminSide button):not(.adminTabs button):not(.adminHistoryTabsV77 button):not(.v79ViewOrderBtn){
  background:#ffffff!important;
  color:#0b67d4!important;
  border:1px solid #c9ddf3!important;
}
.adminPageV77 button:hover:not(.adminClaimConfirmSubmit):not(.adminClaimConfirmCancel):not(.warningBtnV77):not(.adminSideV77 button):not(.adminSide button):not(.adminTabs button.active):not(.adminHistoryTabsV77 button.active){
  background:#edf6ff!important;
  border-color:#8fc1fb!important;
}
.adminPageV77 .adminTabs button.active,
.adminPageV77 .adminHistoryTabsV77 button.active,
.adminPageV77 .adminSideV77 button.active,
.adminPageV77 .adminSide button.active,
.adminPageV77 .adminQuickV77 button.active,
.adminPageV77 .v79ViewOrderBtn,
.adminPageV77 .primaryBtn,
.adminPageV77 .saveBtn,
.adminPageV77 .submitBtn{
  background:linear-gradient(135deg,#0b61d5,#1696f4)!important;
  color:#ffffff!important;
  border-color:#0b61d5!important;
}

/* 8) Recommendation cards/manual lists should stay light */
.adminPageV77 .v78ModeCards label,
.adminPageV77 .v78ShopPickList label,
.adminPageV77 .v78ProductPickList label,
.adminPageV77 .v79DeliveryItem pre,
.adminPageV77 .v79OrderProductVisual{
  background:#f8fbff!important;
  border:1px solid #dce8f5!important;
  color:#173554!important;
}
.adminPageV77 .v78ModeCards label.active,
.adminPageV77 .v78ShopPickList label:hover,
.adminPageV77 .v78ProductPickList label:hover{
  background:linear-gradient(135deg,#f7fbff 0%,#edf6ff 100%)!important;
  border-color:#8fc1fb!important;
}

/* 9) Order modal final light enforcement */
.v79OrderModal,
.v79OrderModal *{
  color:#173554!important;
}
.v79OrderModal p,
.v79OrderModal small,
.v79OrderModal span{
  color:#6f879f!important;
}
.v79OrderModal b,
.v79OrderModal h2,
.v79OrderModal h3,
.v79OrderModal strong{
  color:#173554!important;
}

/* 10) Small responsive safety */
@media(max-width:900px){
  .adminPageV77 .v78RecommendConfig{flex-wrap:wrap}
  .adminPageV77 .v78RecommendConfig input{width:100%}
}

/* ==========================================================
   TH Social V102 — Marketplace White / Blue Theme Sweep
   Removes remaining legacy black/purple surfaces on category
   browsing and category detail pages.
   ========================================================== */

/* Browse by platform cards */
.categoryGrid{
  gap:16px!important;
}
.categoryCard{
  background:#ffffff!important;
  background-image:none!important;
  border:1px solid #d9e7f5!important;
  color:#173554!important;
  box-shadow:0 10px 28px rgba(31,78,128,.06)!important;
}
.categoryCard:hover{
  background:linear-gradient(180deg,#ffffff 0%,#f6fbff 100%)!important;
  border-color:#8fc1fb!important;
  box-shadow:0 14px 34px rgba(20,101,210,.10)!important;
}
.categoryCard h3{color:#173554!important}
.categoryCard p{color:#7189a1!important}
.categoryCount{
  background:#eaf4ff!important;
  color:#0b67d4!important;
  border:1px solid #bad9fb!important;
  box-shadow:none!important;
  font-weight:800!important;
}
.categoryIcon{
  background:#f7fbff!important;
  border:1px solid #dce8f5!important;
  color:#173554!important;
  box-shadow:none!important;
}
.categoryIcon .v78CategoryImg{
  background:#ffffff!important;
}

/* Category detail hero */
.platformHero,
.platformHero.compact{
  background:
    radial-gradient(circle at 92% 18%,rgba(65,154,255,.16),transparent 29%),
    linear-gradient(135deg,#f9fcff 0%,#edf6ff 100%)!important;
  border:1px solid #d3e5f7!important;
  color:#173554!important;
  box-shadow:0 14px 34px rgba(31,78,128,.07)!important;
}
.platformHero .bigIcon,
.platformHero.compact .bigIcon{
  background:#ffffff!important;
  border:1px solid #d7e6f7!important;
  color:#173554!important;
  box-shadow:0 10px 24px rgba(31,78,128,.07)!important;
  overflow:hidden!important;
}
.platformHero .bigIcon .v78CategoryImg,
.platformHero.compact .bigIcon .v78CategoryImg{
  width:100%!important;
  height:100%!important;
  padding:7px!important;
  box-sizing:border-box!important;
  object-fit:contain!important;
  border-radius:15px!important;
  background:#ffffff!important;
}
.platformHero h1{color:#173554!important}
.platformHero .cat{color:#0b67d4!important}
.platformHero .muted{color:#667f99!important}
.backBtn{
  background:#ffffff!important;
  color:#0b67d4!important;
  border:1px solid #bdd9f8!important;
  box-shadow:0 6px 16px rgba(31,78,128,.045)!important;
}
.backBtn:hover{
  background:#eaf4ff!important;
  border-color:#8fc1fb!important;
}

/* Search and sorting on marketplace */
.marketTools{
  gap:10px!important;
}
.marketTools input,
.marketTools select{
  background:#ffffff!important;
  color:#173554!important;
  border:1px solid #cfdfee!important;
  box-shadow:0 6px 18px rgba(31,78,128,.035)!important;
}
.marketTools input::placeholder{color:#91a5b8!important}
.marketTools input:focus,
.marketTools select:focus{
  outline:none!important;
  border-color:#59a7ff!important;
  box-shadow:0 0 0 3px rgba(45,139,255,.11)!important;
}
.marketTools select option{
  background:#ffffff!important;
  color:#173554!important;
}

/* Product booth / offer cards, including when products are later added */
.productBooth,
.offer{
  background:#ffffff!important;
  background-image:none!important;
  border:1px solid #d9e7f5!important;
  color:#173554!important;
  box-shadow:0 10px 26px rgba(31,78,128,.055)!important;
}
.productBooth:hover,
.offer:hover{
  background:#fafdff!important;
  border-color:#8fc1fb!important;
  box-shadow:0 14px 34px rgba(20,101,210,.09)!important;
}
.boothImage,
.offerIcon{
  background:linear-gradient(145deg,#f8fbff,#edf5ff)!important;
  border:1px solid #dce8f5!important;
  color:#173554!important;
}
.boothTitle,
.offer b{color:#173554!important}
.boothMeta,
.boothStock,
.offer .shopline,
.offerMetric small,
.marketResultInfo{color:#7189a1!important}
.boothShop{color:#0b67d4!important}
.boothPrice,
.offerPrice{color:#0b67d4!important}
.boothWarranty{
  color:#0b67d4!important;
  background:#eaf4ff!important;
  border:1px solid #bad9fb!important;
}

/* Breadcrumb and section count */
.breadcrumb{color:#7288a0!important}
.breadcrumb b{color:#173554!important}
.breadcrumb span{color:#5f7b98!important}
.sectionTitle h2{color:#173554!important}
.sectionTitle span{color:#7189a1!important}

/* Empty state remains clean */
.boothGrid .empty,
.offerList .empty,
#platformProducts .empty{
  background:#ffffff!important;
  border:1px dashed #c6dbf1!important;
  color:#7890a8!important;
}

/* Search field on category listing page */
.searchWide,
.pageHead .searchWide{
  background:#ffffff!important;
  color:#173554!important;
  border:1px solid #cfdfee!important;
  box-shadow:0 6px 18px rgba(31,78,128,.035)!important;
}
.searchWide::placeholder{color:#91a5b8!important}
.searchWide:focus{
  outline:none!important;
  border-color:#59a7ff!important;
  box-shadow:0 0 0 3px rgba(45,139,255,.11)!important;
}

@media(max-width:768px){
  .platformHero,
  .platformHero.compact{
    background:linear-gradient(145deg,#f9fcff,#edf6ff)!important;
  }
}

/* ==========================================================
   TH Social V103 — Category card scale A / B / C
   B is the recommended default.
   ========================================================== */
.categoryGridSizeA{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
.categoryGridSizeB{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}
.categoryGridSizeC{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important}

.categoryCard.categorySizeA{min-height:180px!important;padding:20px!important;border-radius:18px!important}
.categoryCard.categorySizeA .categoryIcon{width:68px!important;height:68px!important;margin-bottom:14px!important}
.categoryCard.categorySizeA .categoryIcon .v78CategoryImg{width:68px!important;height:68px!important}
.categoryCard.categorySizeA h3{font-size:18px!important}
.categoryCard.categorySizeA p{font-size:12px!important}

.categoryCard.categorySizeB{min-height:235px!important;padding:26px!important;border-radius:22px!important}
.categoryCard.categorySizeB .categoryIcon{width:92px!important;height:92px!important;margin-bottom:18px!important;border-radius:18px!important}
.categoryCard.categorySizeB .categoryIcon .v78CategoryImg{width:92px!important;height:92px!important;border-radius:16px!important}
.categoryCard.categorySizeB h3{font-size:22px!important;margin-bottom:9px!important}
.categoryCard.categorySizeB p{font-size:14px!important;line-height:1.55!important}
.categoryCard.categorySizeB .categoryCount{font-size:12px!important;padding:7px 10px!important;right:18px!important;top:18px!important}

.categoryCard.categorySizeC{min-height:300px!important;padding:32px!important;border-radius:26px!important}
.categoryCard.categorySizeC .categoryIcon{width:124px!important;height:124px!important;margin-bottom:22px!important;border-radius:22px!important}
.categoryCard.categorySizeC .categoryIcon .v78CategoryImg{width:124px!important;height:124px!important;border-radius:20px!important}
.categoryCard.categorySizeC h3{font-size:27px!important;margin-bottom:10px!important}
.categoryCard.categorySizeC p{font-size:15px!important;line-height:1.6!important;max-width:90%}
.categoryCard.categorySizeC .categoryCount{font-size:13px!important;padding:8px 12px!important;right:22px!important;top:22px!important}

/* Admin scale chooser */
.v103ScalePanel{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:16px 0 18px;padding:18px 20px;border-radius:16px;
  background:linear-gradient(135deg,#f8fbff,#eef6ff)!important;
  border:1px solid #d4e6f8!important;
}
.v103ScalePanel>div:first-child{display:grid;gap:4px}
.v103ScalePanel b{color:#173554!important;font-size:15px}
.v103ScalePanel small{color:#7189a1!important}
.v103ScaleChoices{display:flex;gap:9px;flex-wrap:wrap}
.v103ScaleChoices button{
  min-width:108px;padding:11px 14px;border-radius:12px!important;
  background:#fff!important;border:1px solid #cbdff4!important;color:#173554!important;
  display:grid;gap:2px;text-align:center;box-shadow:0 6px 16px rgba(31,78,128,.04)!important;
}
.v103ScaleChoices button strong{font-size:18px;color:#0b67d4!important}
.v103ScaleChoices button span{font-size:11px;color:#7189a1!important}
.v103ScaleChoices button.active{
  background:linear-gradient(135deg,#0b61d5,#1696f4)!important;
  border-color:#0b61d5!important;box-shadow:0 10px 22px rgba(20,101,210,.18)!important;
}
.v103ScaleChoices button.active strong,.v103ScaleChoices button.active span{color:#fff!important}

@media(max-width:1000px){
  .categoryGridSizeB{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .categoryGridSizeC{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:768px){
  .categoryGridSizeA,.categoryGridSizeB,.categoryGridSizeC{grid-template-columns:1fr!important;gap:14px!important}
  .categoryCard.categorySizeB,.categoryCard.categorySizeC{min-height:auto!important;padding:20px!important}
  .v103ScalePanel{align-items:flex-start;flex-direction:column}
  .v103ScaleChoices{width:100%}
  .v103ScaleChoices button{flex:1;min-width:84px}
}


/* ==========================================================
   TH Social V105 — Product detail / shop product page white-blue theme
   Remove remaining dark marketplace product theme.
   ========================================================== */
.productDetailShell{
  background:linear-gradient(145deg,#ffffff,#f7fbff)!important;
  border:1px solid #d7e5f3!important;
  box-shadow:0 18px 38px rgba(24,74,124,.08)!important;
}
.productMainVisual{
  background:radial-gradient(circle at 50% 22%,#ffffff 0,#f4f9ff 62%,#eaf3ff 100%)!important;
  border:1px solid #d9e7f4!important;
}
.productMainVisual:after{background:rgba(81,130,187,.12)!important;filter:blur(18px)!important}
.productTrustBar{
  background:#ffffff!important;
  border:1px solid #d7e5f3!important;
}
.productTrustItem+.productTrustItem{border-left:1px solid #e2ecf7!important}
.productTrustItem b{color:#173554!important}
.productTrustItem small{color:#7189a1!important}
.productBuyPanel .cat{color:#0b67d4!important;font-weight:800!important;letter-spacing:.04em!important}
.productBuyPanel h1{color:#173554!important}
.sellerLine{color:#6f889f!important}
.sellerLine .shopName{color:#0b67d4!important}
.productRating{color:#6f889f!important}
.productPriceBig{color:#0b67d4!important}
.stockLine{color:#6f889f!important}
.escrowNotice{
  background:linear-gradient(145deg,#fff8e8,#fff2cc)!important;
  border:1px solid #efd796!important;
  color:#8b6512!important;
}
.productOption label{color:#5f7b98!important}
.qtyBox,
.warrantyReadOnly,
.optionBox{
  background:#ffffff!important;
  border:1px solid #cfe0ef!important;
  color:#173554!important;
  box-shadow:0 4px 14px rgba(24,74,124,.04)!important;
}
.qtyBox button,.qtyBox input{color:#173554!important}
.qtyBox button:hover{background:#eef6ff!important}
.qtyBox input::placeholder{color:#91a5b8!important}
.helpTip{
  background:#eef6ff!important;
  color:#0b67d4!important;
  border:1px solid #cfe0ef!important;
}
.skuLine{color:#7189a1!important}
.skuCode{background:#eef6ff!important;color:#0b67d4!important;border:1px solid #cfe0ef!important}
.productActionRow .primary{box-shadow:0 12px 24px rgba(11,103,212,.16)!important}
.favoriteBtn{
  background:#ffffff!important;
  border:1px solid #cfe0ef!important;
  color:#173554!important;
}
.favoriteBtn:hover{background:#f5faff!important}
.productShare{color:#7189a1!important}
.shareCircle{
  background:#ffffff!important;
  border:1px solid #cfe0ef!important;
  color:#173554!important;
}
.shareCircle:hover{background:#eef6ff!important;color:#0b67d4!important}
.productTabs{
  background:#ffffff!important;
  border:1px solid #d7e5f3!important;
  box-shadow:0 14px 32px rgba(24,74,124,.06)!important;
}
.productTabHead{background:#fbfdff!important;border-bottom:1px solid #e3edf7!important}
.productTabBtn{color:#6f889f!important}
.productTabBtn.active{color:#173554!important;border-bottom-color:#0b67d4!important}
.productTabBody{color:#4f6b87!important}
.sellerDetailFull h3,.purchaseConditions h3{color:#173554!important}
.sellerDescription{color:#4f6b87!important}
.detailNote{
  background:#eef6ff!important;
  border:1px solid #cfe0ef!important;
  color:#436582!important;
}
.purchaseConditions{border-top:1px solid #e3edf7!important}
.purchaseConditions li{color:#4f6b87!important}

/* Product image / booth image cards */
.productVisualCard,
.productVisualCard img,
.productMainVisual img{border-radius:18px!important}

/* Purchase confirm modal keep matching light theme */
.purchaseConfirmCard{background:#ffffff!important;border:1px solid #d7e5f3!important;box-shadow:0 22px 46px rgba(24,74,124,.18)!important}
.purchaseConfirmCard h3,.purchaseConfirmRow b,.purchaseConfirmTotal b{color:#173554!important}
.purchaseConfirmCard p,.purchaseConfirmRow span,.purchaseConfirmNote{color:#6f889f!important}
.purchaseConfirmBody{background:transparent!important}
.purchaseConfirmTotal{background:#eef6ff!important;border:1px solid #cfe0ef!important}
.purchaseConfirmNote{background:#fff8e8!important;border:1px solid #efd796!important}
.purchaseConfirmCancel{background:#ffffff!important;border:1px solid #cfe0ef!important;color:#173554!important}

@media(max-width:560px){
  .productDetailShell{padding:14px!important}
  .productTrustItem+.productTrustItem{border-left:0!important;border-top:1px solid #e2ecf7!important}
}


/* ==========================================================
   TH Social V106 — Final product detail LIGHT THEME override
   New filename fixes immutable CDN/browser cache from v103.css
   ========================================================== */
.productDetailShell,
.productGallery,
.productBuyPanel,
.productTabs,
.productTabBody,
.productTabHead,
.sellerDetailFull,
.purchaseConditions{
  background:#ffffff!important;
  background-image:none!important;
  color:#173554!important;
  border-color:#d7e6f7!important;
}

.productDetailShell{
  border:1px solid #d7e6f7!important;
  box-shadow:0 18px 42px rgba(31,78,128,.09)!important;
}

.productBuyPanel h1,
.productTabBody h1,
.productTabBody h2,
.productTabBody h3,
.sellerDetailFull h3,
.purchaseConditions h3{
  color:#173554!important;
}

.productBuyPanel p,
.productBuyPanel span:not(.stars):not(.stockOk):not(.stockNo):not(.onlineDot),
.productTabBody p,
.productTabBody li,
.productTabBody span,
.sellerDescription{
  color:#5f7891!important;
}

.productPriceBig,
.productBuyPanel .cat,
.sellerLine .shopName{
  color:#0b67d4!important;
}

.productTrustBar{
  background:#f8fbff!important;
  border:1px solid #dbe8f5!important;
}
.productTrustItem{
  background:#f8fbff!important;
}
.productTrustItem+.productTrustItem{
  border-color:#e1ebf5!important;
}
.productTrustItem b{color:#173554!important}
.productTrustItem small{color:#7189a1!important}

.escrowNotice{
  background:#fff8e9!important;
  border:1px solid #f2d98d!important;
  color:#8a6514!important;
}

.qtyBox,
.warrantyReadOnly,
.optionBox{
  background:#ffffff!important;
  border:1px solid #cfdfee!important;
  color:#173554!important;
}
.qtyBox button,
.qtyBox input{color:#173554!important}
.qtyBox button:hover{background:#eef6ff!important}

.skuCode{
  background:#eef6ff!important;
  color:#0b67d4!important;
  border:1px solid #cfe0ef!important;
}

.favoriteBtn{
  background:#ffffff!important;
  color:#173554!important;
  border:1px solid #cfdfee!important;
}
.favoriteBtn:hover{background:#eef6ff!important}

.shareCircle{
  background:#ffffff!important;
  color:#173554!important;
  border:1px solid #cfdfee!important;
}

.productTabs{
  margin-top:22px!important;
  background:#ffffff!important;
  border:1px solid #d7e6f7!important;
  overflow:hidden!important;
  box-shadow:0 14px 32px rgba(31,78,128,.06)!important;
}
.productTabHead{
  background:#f8fbff!important;
  border-bottom:1px solid #e2ecf6!important;
}
.productTabBtn{
  color:#6e879f!important;
  background:transparent!important;
}
.productTabBtn.active{
  color:#0b67d4!important;
  border-bottom-color:#0b67d4!important;
}
.productTabBody{
  background:#ffffff!important;
  color:#4f6b87!important;
}
.sellerDescription{
  color:#4f6b87!important;
}
.detailNote{
  background:#eef6ff!important;
  color:#436582!important;
  border:1px solid #cfe0ef!important;
}
.purchaseConditions{
  border-top:1px solid #e2ecf6!important;
}
.purchaseConditions li{color:#4f6b87!important}

/* Make the product image area light too, without affecting the uploaded image itself */
.productMainVisual{
  background:linear-gradient(145deg,#ffffff,#f5f9ff)!important;
  border:1px solid #d7e6f7!important;
}

/* Purchase confirmation */
.purchaseConfirmCard{
  background:#ffffff!important;
  color:#173554!important;
  border:1px solid #d7e6f7!important;
}
.purchaseConfirmHead,
.purchaseConfirmBody,
.purchaseConfirmActions{
  background:#ffffff!important;
}
.purchaseConfirmRow,
.purchaseConfirmTotal{
  border-color:#dbe8f5!important;
}
.purchaseConfirmTotal{
  background:#eef6ff!important;
}
.purchaseConfirmNote{
  background:#fff8e9!important;
  border:1px solid #f2d98d!important;
  color:#8a6514!important;
}


/* ==========================================================
   TH Social V107 — Card contrast tune
   Add soft blue-tinted surfaces so cards separate from white page bg
   Applies to 2 areas requested:
   1) Product detail top card + detail tabs
   2) Category product listing cards
   ========================================================== */

/* 1) Product detail main blocks */
.productDetailShell{
  background:linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%)!important;
  border:1px solid #cfe0f2!important;
  box-shadow:0 16px 34px rgba(31,78,128,.08)!important;
}
.productBuyPanel{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
}
.productTabs{
  background:linear-gradient(180deg,#ffffff 0%,#f4f9ff 100%)!important;
  border:1px solid #cfdef0!important;
  box-shadow:0 14px 30px rgba(31,78,128,.06)!important;
}
.productTabHead{
  background:linear-gradient(180deg,#f7fbff 0%,#eef5ff 100%)!important;
}
.productTabBody,
.sellerDetailFull,
.purchaseConditions{
  background:#fbfdff!important;
}

/* 2) Category detail product cards */
.productBooth,
.offer{
  background:linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%)!important;
  border:1px solid #cfe0f2!important;
  box-shadow:0 12px 28px rgba(31,78,128,.06)!important;
}
.productBooth:hover,
.offer:hover{
  background:linear-gradient(180deg,#ffffff 0%,#edf6ff 100%)!important;
  border-color:#9dc7f3!important;
  box-shadow:0 16px 34px rgba(20,101,210,.11)!important;
}
.boothImage,
.offerIcon{
  background:linear-gradient(145deg,#ffffff,#edf5ff)!important;
  border:1px solid #d9e7f5!important;
}


/* ==========================================================
   TH Social V108 — Selectable Marketplace Card Themes
   html[data-market-card-theme="soft"|"premium"]
   ========================================================== */

/* Admin theme selector */
.v108ThemePanel{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:0 0 18px;padding:18px 20px;border-radius:16px;
  background:linear-gradient(135deg,#f8fbff,#eef6ff)!important;
  border:1px solid #d4e6f8!important;
}
.v108ThemeIntro{display:grid;gap:4px;min-width:250px}
.v108ThemeIntro b{color:#173554!important;font-size:14px}
.v108ThemeIntro small{color:#7189a1!important;font-size:11px}
.v108ThemeChoices{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:440px}
.v108ThemeChoice{
  position:relative;display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;
  column-gap:11px;align-items:center;text-align:left;padding:11px 13px!important;border-radius:13px!important;
  background:#fff!important;border:1px solid #cfe0f2!important;color:#173554!important;cursor:pointer!important;
}
.v108ThemeChoice:hover{border-color:#8fc1fb!important;box-shadow:0 8px 22px rgba(20,101,210,.08)!important}
.v108ThemeChoice.active{border:2px solid #1683ef!important;background:#f7fbff!important;box-shadow:0 10px 24px rgba(20,101,210,.12)!important}
.v108ThemeChoice strong{color:#173554!important;font-size:13px}
.v108ThemeChoice small{color:#7189a1!important;font-size:10px}
.v108ThemePreview{grid-row:1/3;width:44px;height:34px;border-radius:9px;display:block}
.softPreview{background:linear-gradient(145deg,#eef7ff,#dfeeff);border:1px solid #bcd8f5;box-shadow:0 5px 12px rgba(35,104,170,.08)}
.premiumPreview{background:linear-gradient(145deg,#fffdf7,#e9f3ff);border:1px solid #b9d2ed;box-shadow:0 8px 18px rgba(23,74,126,.18)}

/* ------------------------------------------
   Soft Blue — intentionally more visible blue
   ------------------------------------------ */
html[data-market-card-theme="soft"] .productDetailShell{
  background:linear-gradient(145deg,#eef7ff 0%,#e5f1ff 100%)!important;
  border:1px solid #bcd8f5!important;
  box-shadow:0 15px 34px rgba(35,104,170,.09)!important;
}
html[data-market-card-theme="soft"] .productBuyPanel{
  background:linear-gradient(180deg,#f7fbff 0%,#edf6ff 100%)!important;
  border-radius:18px!important;
  padding:18px!important;
}
html[data-market-card-theme="soft"] .productGallery{
  background:linear-gradient(180deg,#f7fbff,#edf6ff)!important;
  border-radius:18px!important;
  padding:14px!important;
}
html[data-market-card-theme="soft"] .productTabs{
  background:linear-gradient(180deg,#edf6ff 0%,#e6f1ff 100%)!important;
  border:1px solid #bcd8f5!important;
  box-shadow:0 13px 28px rgba(35,104,170,.08)!important;
}
html[data-market-card-theme="soft"] .productTabHead{background:#dfeeff!important}
html[data-market-card-theme="soft"] .productTabBody,
html[data-market-card-theme="soft"] .sellerDetailFull,
html[data-market-card-theme="soft"] .purchaseConditions{background:#f5faff!important}
html[data-market-card-theme="soft"] .productBooth,
html[data-market-card-theme="soft"] .offer{
  background:linear-gradient(145deg,#f4faff 0%,#e7f2ff 100%)!important;
  border:1px solid #bcd8f5!important;
  box-shadow:0 12px 28px rgba(35,104,170,.08)!important;
}
html[data-market-card-theme="soft"] .productBooth:hover,
html[data-market-card-theme="soft"] .offer:hover{
  background:linear-gradient(145deg,#f8fcff 0%,#dcecff 100%)!important;
  border-color:#7fb9f1!important;
  box-shadow:0 16px 34px rgba(24,108,201,.13)!important;
}
html[data-market-card-theme="soft"] .boothImage,
html[data-market-card-theme="soft"] .offerIcon{background:#f8fbff!important;border-color:#c7ddf3!important}

/* ------------------------------------------
   More Premium — cream/blue + stronger depth
   ------------------------------------------ */
html[data-market-card-theme="premium"] .productDetailShell{
  position:relative;
  background:linear-gradient(135deg,#fffdf8 0%,#f7fbff 48%,#e7f2ff 100%)!important;
  border:1px solid #bad2ec!important;
  box-shadow:0 22px 50px rgba(23,74,126,.16),0 5px 16px rgba(52,127,206,.08)!important;
}
html[data-market-card-theme="premium"] .productDetailShell:before{
  content:"";position:absolute;left:22px;right:22px;top:0;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#0b61d5,#54b4ff,#b9d9ff);pointer-events:none;
}
html[data-market-card-theme="premium"] .productBuyPanel{
  background:linear-gradient(160deg,#fffdf9 0%,#f4f9ff 100%)!important;
  border:1px solid rgba(190,214,239,.72)!important;border-radius:18px!important;padding:18px!important;
  box-shadow:0 10px 26px rgba(23,74,126,.07)!important;
}
html[data-market-card-theme="premium"] .productGallery{
  background:linear-gradient(160deg,#fffdf9,#edf6ff)!important;border:1px solid rgba(190,214,239,.72)!important;
  border-radius:18px!important;padding:14px!important;box-shadow:0 10px 26px rgba(23,74,126,.06)!important;
}
html[data-market-card-theme="premium"] .productTabs{
  background:linear-gradient(150deg,#fffdf8 0%,#ecf5ff 100%)!important;
  border:1px solid #bad2ec!important;
  box-shadow:0 20px 42px rgba(23,74,126,.13)!important;
}
html[data-market-card-theme="premium"] .productTabHead{background:linear-gradient(90deg,#fffaf0,#e7f2ff)!important}
html[data-market-card-theme="premium"] .productTabBody,
html[data-market-card-theme="premium"] .sellerDetailFull,
html[data-market-card-theme="premium"] .purchaseConditions{background:rgba(255,255,255,.72)!important}
html[data-market-card-theme="premium"] .productBooth,
html[data-market-card-theme="premium"] .offer{
  position:relative;
  background:linear-gradient(145deg,#fffdf8 0%,#f6faff 55%,#e6f1ff 100%)!important;
  border:1px solid #bad2ec!important;
  box-shadow:0 17px 38px rgba(23,74,126,.14)!important;
}
html[data-market-card-theme="premium"] .productBooth:before,
html[data-market-card-theme="premium"] .offer:before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:2px;
  background:linear-gradient(90deg,#0b61d5,#65baff,#d3e8ff);border-radius:0 0 3px 3px;pointer-events:none;
}
html[data-market-card-theme="premium"] .productBooth:hover,
html[data-market-card-theme="premium"] .offer:hover{
  transform:translateY(-2px)!important;
  border-color:#82b6e8!important;
  box-shadow:0 22px 46px rgba(23,74,126,.18)!important;
}
html[data-market-card-theme="premium"] .boothImage,
html[data-market-card-theme="premium"] .offerIcon{
  background:linear-gradient(145deg,#fffefb,#edf5ff)!important;
  border-color:#c2d9ef!important;
}

@media(max-width:760px){
  .v108ThemePanel{align-items:stretch;flex-direction:column}
  .v108ThemeChoices{min-width:0;grid-template-columns:1fr}
}