/* XSeller R23.4.4.5 — CLEAN UI CONSOLIDATION
   Source-audited final layer. Exact class selectors only. */
html,body{max-width:100%;overflow-x:hidden}

/* Canonical logo: only actual logo classes/containers, never mascot/support images. */
.xs-brand-logo,.xsRealLogo,.xsVideoLogo,
.brand.brandImage>img,#sidebar>a.logo>img,.authbox>a.logo>img{
  object-fit:contain!important;object-position:left center!important;
  width:auto!important;height:auto!important;max-height:48px!important;
}
.brand.brandImage>img{max-width:190px!important}
#sidebar>a.logo>img{max-width:170px!important;max-height:52px!important}
.authbox>a.logo>img{max-width:190px!important;max-height:54px!important}

/* Restore genuine mascot/media sizing that old broad logo selector accidentally capped. */
.heroMascot,.mascotStage img,.xs-v365r15-mid-showcase img,
.xs-r17-mini img,.xs-r17-avatar,.xsAiImgBox img,.xsPrImgBox img{
  max-width:none!important;max-height:none!important;
}
body.xs-v365r15-home .xs-v365r15-mid-showcase img{
  width:min(560px,54vw)!important;height:auto!important;max-height:350px!important;
}

/* Support HUD: use the real R1.8 DOM only. No spatial/heuristic JS. */
.xs-r17-hud{
  left:auto!important;right:18px!important;bottom:18px!important;
  width:auto!important;height:auto!important;max-width:calc(100vw - 24px)!important;
  align-items:flex-end!important;transform:none!important;
}
.xs-r17-launch{display:flex!important;align-items:flex-end!important;gap:10px!important;width:auto!important;height:auto!important}
.xs-r17-mini{position:relative!important;width:96px!important;height:108px!important;min-width:96px!important;min-height:108px!important;max-width:96px!important;max-height:108px!important;padding:0!important;margin:0!important}
.xs-r17-mini img{display:block!important;width:96px!important;height:108px!important;min-width:96px!important;min-height:108px!important;max-width:96px!important;max-height:108px!important;object-fit:contain!important;object-position:center bottom!important;margin:0!important;transform:none!important}
.xs-r17-online{position:absolute!important;right:58px!important;top:6px!important;bottom:auto!important;left:auto!important;width:max-content!important;max-width:110px!important;height:auto!important;min-height:0!important;white-space:nowrap!important;transform:none!important}
.xs-r17-pill{width:auto!important;height:auto!important;min-height:52px!important;max-width:260px!important}

/* Workspace: explicit source DOM, preserves desktop and uses native mobile drawer. */
body.dash main.workspace{box-sizing:border-box;min-width:0}
body.dash .panel,body.dash .history{min-width:0}
body.dash .panel *,body.dash .history *{box-sizing:border-box}

@media(max-width:900px){
  body.dash{display:block!important;width:100%!important;min-width:0!important}
  body.dash main.workspace,
  body.dash .workspace{
    display:block!important;visibility:visible!important;opacity:1!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin-left:0!important;margin-right:0!important;
    padding:62px 12px 96px!important;transform:none!important;
  }
  body.dash .workspace>header{
    width:100%!important;max-width:100%!important;min-height:64px!important;height:auto!important;
    padding:8px 4px!important;gap:8px!important;flex-wrap:wrap!important;
  }
  body.dash .workspace>header>div:first-child{min-width:0!important}
  body.dash .headerRight{margin-left:auto!important;flex-wrap:wrap!important;justify-content:flex-end!important}
  body.dash .panel,body.dash .history{
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:14px 0!important;padding:16px!important;
  }
  body.dash .panelHead{align-items:flex-start!important;gap:10px!important}
  body.dash .panelHead h1{font-size:clamp(24px,7vw,30px)!important;line-height:1.12!important}
  body.dash .twocol{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  body.dash input,body.dash textarea,body.dash select,body.dash button{max-width:100%!important;min-width:0!important}
  body.dash #productInput{min-height:135px!important}
  body.dash .result{width:100%!important;max-width:100%!important;min-width:0!important}
  body.dash .historyCard{width:100%!important;max-width:100%!important;min-width:0!important;flex-wrap:wrap!important}
  body.dash .historyMeta{white-space:normal!important;flex-wrap:wrap!important}

  /* Keep the existing mobile drawer; never hide the workspace itself. */
  body.dash #sidebar{display:block!important}

  .xs-r17-hud{left:auto!important;right:8px!important;bottom:8px!important;max-width:calc(100vw - 16px)!important}
  .xs-r17-pill{display:none!important}
  .xs-r17-mini{width:72px!important;height:84px!important;min-width:72px!important;min-height:84px!important;max-width:72px!important;max-height:84px!important}
  .xs-r17-mini img{width:72px!important;height:84px!important;min-width:72px!important;min-height:84px!important;max-width:72px!important;max-height:84px!important}
  .xs-r17-online{right:46px!important;top:5px!important;font-size:10px!important;padding:6px 9px!important;max-width:96px!important}
  .xs-r17-panel{width:min(400px,calc(100vw - 16px))!important;max-height:calc(100dvh - 80px)!important}

  body.xs-v365r15-home .xs-v365r15-mid-showcase img{width:min(520px,86vw)!important;max-height:300px!important}
}

@media(max-width:520px){
  body.dash main.workspace,body.dash .workspace{padding-left:9px!important;padding-right:9px!important}
  body.dash .panel,body.dash .history{padding:14px!important}
  body.dash .workspace>header .muted{display:none!important}
  body.xsLanding .heroContent{max-width:100%!important}
  body.xs-v365r15-home .xs-v365r15-mid-showcase{min-height:190px!important}
  body.xs-v365r15-home .xs-v365r15-mid-showcase img{width:92vw!important;max-height:245px!important}
}

/* ======================================================================
   XSeller R23.4.4.6 — FINAL RESIDUAL LIGHT FIX
   Scope: homepage Features + injected Home Video HUD + mobile app drawer.
   No JS geometry. No media replacement. Actual <video> pixels stay untouched.
   ====================================================================== */

/* 1) Homepage feature/tool section: force every UI chrome surface light. */
html body.xsLanding #features,
html body.xsLanding #features .featureGrid{
  color:#111827!important;
}
html body.xsLanding #features .featureCard,
html body.xsLanding #features .featureLarge,
html body.xsLanding #features .featureWide{
  background:linear-gradient(155deg,#fff4f7 0%,#ffffff 72%)!important;
  color:#111827!important;
  border-color:#efc8d1!important;
  box-shadow:0 16px 42px rgba(196,61,88,.055)!important;
}
html body.xsLanding #features .cardGlow{
  background:rgba(217,74,99,.10)!important;
}
html body.xsLanding #features .featureIcon{
  background:#ffffff!important;
  color:#111827!important;
  border-color:#efc8d1!important;
}
html body.xsLanding #features .featureIcon.red{
  background:#fff0f4!important;
  color:#d94a63!important;
}
html body.xsLanding #features .featureIcon.green{color:#159447!important}
html body.xsLanding #features .featureNumber{color:#111827!important;opacity:.72!important}
html body.xsLanding #features .featureCard h2,
html body.xsLanding #features .featureCard h3,
html body.xsLanding #features .featureCard b,
html body.xsLanding #features .featureCard strong{color:#111827!important}
html body.xsLanding #features .featureCard p,
html body.xsLanding #features .featureCard span,
html body.xsLanding #features .featureCard small{color:#374151!important}
html body.xsLanding #features .miniPreview,
html body.xsLanding #features .miniPreview>div,
html body.xsLanding #features .hookPreview,
html body.xsLanding #features .socialStats span,
html body.xsLanding #features .resizePreview span,
html body.xsLanding #features .historyPreview,
html body.xsLanding #features .historyPreview>div{
  background:#ffffff!important;
  color:#111827!important;
  border-color:#e8d6dc!important;
}
html body.xsLanding #features .historyPreview>div:nth-child(even){background:#fff8fa!important}
html body.xsLanding #features .timeline span{background:#d8dce3!important}
html body.xsLanding #features .timeline span:first-child{background:#e33f5f!important}
html body.xsLanding #features .timeline span:nth-child(2){background:#b83b55!important}

/* 2) Home video HUD injected by v365-global.js: light shell, dark readable copy.
      The video element itself deliberately remains unmodified. */
html body.xsLanding .xs-v365-home-video{
  background:linear-gradient(145deg,#fff2f5 0%,#ffffff 76%)!important;
  color:#111827!important;
  border:1px solid #efc5cf!important;
  box-shadow:0 18px 46px rgba(184,55,83,.09)!important;
}
html body.xsLanding .xs-v365-home-video .eyebrow{
  color:#c43e59!important;
}
html body.xsLanding .xs-v365-home-video h2{
  color:#111827!important;
}
html body.xsLanding .xs-v365-home-video p{
  color:#4b5563!important;
}
html body.xsLanding .xs-v365-home-video .xsVideoFacts span{
  background:#ffffff!important;
  color:#111827!important;
  border-color:#e6cdd4!important;
}
html body.xsLanding .xs-v365-home-video .xsVideoFrame{
  background:linear-gradient(180deg,#fff7f9 0%,#ffffff 100%)!important;
  border:1px solid #e5c7cf!important;
  box-shadow:0 14px 34px rgba(17,24,39,.10)!important;
}
html body.xsLanding .xs-v365-home-video video{
  background:#000!important;
}

/* 3) Mobile app/tool drawer: remove the last legacy black shell. */
@media(max-width:900px){
  html body.dash #sidebar,
  html body.voiceStudioPage #sidebar,
  html body.xs-sidebar-ui-page #sidebar,
  html body #sidebar{
    background:linear-gradient(180deg,#fff4f7 0%,#ffffff 72%)!important;
    color:#111827!important;
    border-right:1px solid #efc8d1!important;
    box-shadow:18px 0 44px rgba(68,24,34,.16)!important;
  }
  html body #sidebar a,
  html body #sidebar button,
  html body #sidebar .tool,
  html body #sidebar .sideLink,
  html body #sidebar .adminlink,
  html body #sidebar .logout,
  html body #sidebar .xs-r42-label{
    color:#111827!important;
  }
  html body #sidebar>p.muted,
  html body #sidebar .muted,
  html body #sidebar .sectionTitle,
  html body #sidebar .groupTitle{
    color:#6b7280!important;
  }
  html body #sidebar .tool small,
  html body #sidebar .sideLink small,
  html body #sidebar .adminlink small{
    color:#7c6670!important;
  }
  html body #sidebar .tool:hover,
  html body #sidebar .sideLink:hover,
  html body #sidebar .adminlink:hover{
    background:#fff1f4!important;
    color:#111827!important;
    border-color:#efc4cf!important;
  }
  html body #sidebar .tool.activeTool,
  html body #sidebar .tool.active,
  html body #sidebar .sideLink.activeLink,
  html body #sidebar .sideLink.active,
  html body #sidebar a.activeLink{
    background:linear-gradient(90deg,#fff0f4 0%,#ffffff 100%)!important;
    color:#c83f59!important;
    border-color:#ed9fb0!important;
    box-shadow:inset 3px 0 0 #d94a63!important;
  }
  html body #sidebar .xs-r42-icon .s{stroke:#111827!important}
  html body #sidebar .xs-r42-icon .f{fill:#111827!important}
  html body #sidebar .xs-r42-icon .a{fill:#d94a63!important}

  html body .mobileMenu{
    background:#ffffff!important;
    color:#111827!important;
    border-color:#e6bdc7!important;
    box-shadow:0 8px 24px rgba(81,24,39,.14)!important;
  }
  html body.sidebarOpen .mobileMenu,
  html body.xsMobileNavOpen .mobileMenu{
    background:#fff1f4!important;
    color:#b8324f!important;
  }
  html body .xsMobileNavBackdrop{
    background:rgba(17,24,39,.28)!important;
    backdrop-filter:blur(2px)!important;
    -webkit-backdrop-filter:blur(2px)!important;
  }
}

/* 4) Small-screen home video geometry: no black full-width slab. */
@media(max-width:800px){
  html body.xsLanding .xs-v365-home-video{
    width:calc(100% - 20px)!important;
    padding:18px!important;
    gap:18px!important;
  }
  html body.xsLanding .xs-v365-home-video .xsVideoFrame{
    width:min(100%,300px)!important;
    padding:7px!important;
  }
  html body.xsLanding .xs-v365-home-video h2{
    font-size:clamp(26px,8vw,34px)!important;
    line-height:1.12!important;
  }
}

/* ======================================================================
   XSeller R23.4.4.7 — FINAL REMAINING DARK TABS LIGHT THEME
   Exact residual surfaces only:
   - /sales-knowledge
   - /social-marketing
   - /admin/platform#content
   - /admin/platform#tools
   - /admin/platform#video
   - /admin/platform#architecture
   Keeps video/image pixels untouched. No layout geometry hacks.
   ====================================================================== */

/* ---------- Sales Knowledge ---------- */
html body.salesKnowledgePage{
  background:linear-gradient(180deg,#fff4f7 0%,#fffafb 55%,#ffffff 100%)!important;
  color:#111827!important;
}
html body.salesKnowledgePage .skHero,
html body.salesKnowledgePage .skHeroStat,
html body.salesKnowledgePage .skQuick,
html body.salesKnowledgePage .skCard{
  background:linear-gradient(155deg,#fff3f6 0%,#ffffff 74%)!important;
  color:#111827!important;
  border-color:#edcbd3!important;
  box-shadow:0 14px 36px rgba(184,55,83,.06)!important;
}
html body.salesKnowledgePage .skHero h1,
html body.salesKnowledgePage .skHero h1 span:not(.accent),
html body.salesKnowledgePage .skHeroStat b,
html body.salesKnowledgePage .skCard h2,
html body.salesKnowledgePage .skQuick h2,
html body.salesKnowledgePage .skCard b,
html body.salesKnowledgePage .skCard strong{color:#111827!important}
html body.salesKnowledgePage .skHero h1 span{color:#c74761!important}
html body.salesKnowledgePage .skHero p,
html body.salesKnowledgePage .skHero p:last-child,
html body.salesKnowledgePage .skHeroStat span,
html body.salesKnowledgePage .skCard p,
html body.salesKnowledgePage .skCard li,
html body.salesKnowledgePage .skQuick ol,
html body.salesKnowledgePage .skQuick li{color:#4b5563!important}
html body.salesKnowledgePage .skToolbar,
html body.salesKnowledgePage .skTabs{background:transparent!important;color:#111827!important}
html body.salesKnowledgePage .skTabs button,
html body.salesKnowledgePage .skToolbar input{
  background:#ffffff!important;color:#111827!important;border-color:#e6cbd2!important;
  box-shadow:none!important;
}
html body.salesKnowledgePage .skTabs button:hover{background:#fff4f6!important;color:#111827!important}
html body.salesKnowledgePage .skTabs button.active{
  background:#fff0f3!important;color:#b73550!important;border-color:#e9aebc!important;
}
html body.salesKnowledgePage .skFormula,
html body.salesKnowledgePage .skCard pre{
  background:#ffffff!important;color:#273142!important;border-color:#ead8dd!important;
}
html body.salesKnowledgePage .skCopy{
  background:#fff1f4!important;color:#b73550!important;border-color:#e8b9c4!important;
}
html body.salesKnowledgePage .skCopy:hover{background:#fde8ed!important}
html body.salesKnowledgePage .skNum{color:#c74761!important}

/* ---------- Social Marketing ---------- */
html body.smPage{
  background:linear-gradient(180deg,#fff4f7 0%,#fffafb 55%,#ffffff 100%)!important;
  color:#111827!important;
}
html body.smPage .smHeader,
html body.smPage .smWorkspace,
html body.smPage .smGrid{color:#111827!important}
html body.smPage .smStats article,
html body.smPage .smCard,
html body.smPage .smNotice,
html body.smPage .smBudgetPreview div,
html body.smPage .smProvider,
html body.smPage .smMetricRow div,
html body.smPage .smEmptyChart,
html body.smPage .smBindingBox{
  background:linear-gradient(155deg,#fff4f7 0%,#ffffff 76%)!important;
  color:#111827!important;
  border-color:#edcbd3!important;
  box-shadow:0 12px 30px rgba(184,55,83,.05)!important;
}
html body.smPage .smStats b,
html body.smPage .smCard h1,
html body.smPage .smCard h2,
html body.smPage .smCard h3,
html body.smPage .smCard b,
html body.smPage .smBudgetPreview b,
html body.smPage .smMetricRow b{color:#111827!important}
html body.smPage .smStats span,
html body.smPage .smStats small,
html body.smPage .smCard p,
html body.smPage .smSafeText,
html body.smPage .smProvider span,
html body.smPage .smBudgetPreview span,
html body.smPage .smMetricRow span,
html body.smPage .smBindingBox p,
html body.smPage .smTable td small,
html body.smPage .smFooter{color:#596273!important}
html body.smPage .smForm label{color:#374151!important}
html body.smPage .smForm input,
html body.smPage .smForm textarea,
html body.smPage .smForm select{
  background:#ffffff!important;color:#111827!important;border-color:#d9cbd1!important;
}
html body.smPage .smTable th,
html body.smPage .smTable td{color:#111827!important;border-bottom-color:#ecdce1!important}
html body.smPage .smIconBtn{
  background:#fff1f4!important;color:#bd3f59!important;border-color:#e7b6c1!important;
}
html body.smPage .smBadge.ghost{
  background:#ffffff!important;color:#4b5563!important;border-color:#ded3d7!important;
}
html body.smPage .smNoData{color:#6b7280!important}

/* Keep semantic status chips colored but light. */
html body.smPage .smState.ready,
html body.smPage .smLivePaused,
html body.smPage .smGateReady,
html body.smPage .smDraftLink,
html body.smPage .smPreflightLink{
  background:#f0fff5!important;color:#13753b!important;border-color:#b9e5c8!important;
}
html body.smPage .smState.draft,
html body.smPage .smGateLink,
html body.smPage .smPreflightBtn{
  background:#fff9e8!important;color:#8a6514!important;border-color:#ead89c!important;
}
html body.smPage .smLiveCreateLink,
html body.smPage .smPreflightFail,
html body.smPage .smDraftBtn{
  background:#fff0f3!important;color:#b73550!important;border-color:#e8b6c1!important;
}

/* ---------- Admin Platform: make the entire manager chrome light ---------- */
html body.xs-platform-tools-page{
  background:linear-gradient(180deg,#fff4f7 0%,#fffafb 56%,#ffffff 100%)!important;
  color:#111827!important;
}
html body.xs-platform-tools-page .topbar,
html body.xs-platform-tools-page .hero,
html body.xs-platform-tools-page .tabs,
html body.xs-platform-tools-page .tabpane,
html body.xs-platform-tools-page dialog{
  background:linear-gradient(180deg,#fff5f7 0%,#ffffff 100%)!important;
  color:#111827!important;
  border-color:#e9cfd6!important;
  box-shadow:0 12px 32px rgba(184,55,83,.05)!important;
}
html body.xs-platform-tools-page .topbar nav a,
html body.xs-platform-tools-page .ghost,
html body.xs-platform-tools-page .filePick,
html body.xs-platform-tools-page .tabs button{
  background:#ffffff!important;color:#111827!important;border-color:#e3d4d9!important;
}
html body.xs-platform-tools-page .tabs button.active{
  background:linear-gradient(90deg,#dd526b,#c83f59)!important;color:#ffffff!important;border-color:#c83f59!important;
}
html body.xs-platform-tools-page .sectionHead,
html body.xs-platform-tools-page .toolSummary,
html body.xs-platform-tools-page .savebar,
html body.xs-platform-tools-page .checkRow,
html body.xs-platform-tools-page .toolActions,
html body.xs-platform-tools-page .reconcileBar{
  background:transparent!important;color:#111827!important;
}
html body.xs-platform-tools-page .sectionHead h2,
html body.xs-platform-tools-page .sectionHead h3,
html body.xs-platform-tools-page .toolName b,
html body.xs-platform-tools-page .assetInfo h3,
html body.xs-platform-tools-page .archGrid h3,
html body.xs-platform-tools-page .videoModelTop b,
html body.xs-platform-tools-page .videoPresetTop b{color:#111827!important}
html body.xs-platform-tools-page .sectionHead span,
html body.xs-platform-tools-page .assetInfo p,
html body.xs-platform-tools-page .toolName span,
html body.xs-platform-tools-page .archGrid p,
html body.xs-platform-tools-page .reconcileBar p,
html body.xs-platform-tools-page .videoModelCard>p,
html body.xs-platform-tools-page .videoSecurityNote span{color:#596273!important}

/* Content tab */
html body.xs-platform-tools-page #tab-content,
html body.xs-platform-tools-page #tab-content .settingsForm,
html body.xs-platform-tools-page #tab-content .formGrid{
  background:#ffffff!important;color:#111827!important;
}

/* Tools tab */
html body.xs-platform-tools-page #tab-tools,
html body.xs-platform-tools-page #tab-tools .toolList,
html body.xs-platform-tools-page #tab-tools .toolCard,
html body.xs-platform-tools-page #tab-tools .toolCard summary,
html body.xs-platform-tools-page #tab-tools .toolForm,
html body.xs-platform-tools-page #tab-tools .newToolForm{
  background:#ffffff!important;color:#111827!important;border-color:#ead8dd!important;
}
html body.xs-platform-tools-page #tab-tools .toolCard{box-shadow:0 10px 28px rgba(184,55,83,.045)!important}
html body.xs-platform-tools-page #tab-tools .toolIcon{
  background:#fff0f3!important;color:#c74761!important;border-color:#efc3cd!important;
}
html body.xs-platform-tools-page #tab-tools .toolSummary span,
html body.xs-platform-tools-page #tab-tools .pill{
  background:#ffffff!important;color:#111827!important;border-color:#e2d5da!important;
}
html body.xs-platform-tools-page #tab-tools .pill.on{
  background:#effcf4!important;color:#167440!important;border-color:#bde4ca!important;
}

/* Video tab */
html body.xs-platform-tools-page #tab-video,
html body.xs-platform-tools-page #tab-video .videoConfigBox,
html body.xs-platform-tools-page #tab-video .videoAdminStats article,
html body.xs-platform-tools-page #tab-video .videoActualStats article,
html body.xs-platform-tools-page #tab-video .videoModelCard,
html body.xs-platform-tools-page #tab-video .videoPresetCard,
html body.xs-platform-tools-page #tab-video .profitFormula,
html body.xs-platform-tools-page #tab-video .videoSecurityNote,
html body.xs-platform-tools-page #tab-video .reconcileBar,
html body.xs-platform-tools-page #tab-video .videoLedger{
  background:linear-gradient(155deg,#fff4f7 0%,#ffffff 80%)!important;
  color:#111827!important;border-color:#ead3d9!important;
  box-shadow:0 10px 28px rgba(184,55,83,.045)!important;
}
html body.xs-platform-tools-page #tab-video input,
html body.xs-platform-tools-page #tab-video textarea,
html body.xs-platform-tools-page #tab-video select{
  background:#ffffff!important;color:#111827!important;border-color:#d7cbd0!important;
}
html body.xs-platform-tools-page #tab-video input:focus,
html body.xs-platform-tools-page #tab-video textarea:focus,
html body.xs-platform-tools-page #tab-video select:focus{
  background:#ffffff!important;color:#111827!important;border-color:#d94a63!important;
  box-shadow:0 0 0 4px rgba(217,74,99,.08)!important;
}
html body.xs-platform-tools-page #tab-video .videoConfigBox label span,
html body.xs-platform-tools-page #tab-video .videoModelCard label span,
html body.xs-platform-tools-page #tab-video .videoPresetCard label span,
html body.xs-platform-tools-page #tab-video .videoModelTop label,
html body.xs-platform-tools-page #tab-video .videoPresetTop label{color:#374151!important}
html body.xs-platform-tools-page #tab-video .videoMarginPreview span,
html body.xs-platform-tools-page #tab-video .videoMarginPreview b,
html body.xs-platform-tools-page #tab-video .videoMarginPreview strong{
  background:#ffffff!important;border-color:#ead8dd!important;
}
html body.xs-platform-tools-page #tab-video .videoMarginPreview span{color:#4b5563!important}
html body.xs-platform-tools-page #tab-video .videoLedger th{
  background:#fff1f4!important;color:#4b5563!important;border-bottom-color:#ead5db!important;
}
html body.xs-platform-tools-page #tab-video .videoLedger td{
  background:#ffffff!important;color:#111827!important;border-bottom-color:#eee0e4!important;
}
html body.xs-platform-tools-page #tab-video .videoLedger tbody tr:hover td{background:#fff8fa!important}
html body.xs-platform-tools-page #tab-video .videoLedger td b{color:#111827!important}
html body.xs-platform-tools-page #tab-video .videoApiState{
  background:#ffffff!important;color:#111827!important;border-color:#dfd3d7!important;
}
html body.xs-platform-tools-page #tab-video .videoApiState.ready{
  background:#effcf4!important;color:#167440!important;border-color:#bde4ca!important;
}

/* Architecture tab */
html body.xs-platform-tools-page #tab-architecture,
html body.xs-platform-tools-page #tab-architecture .archGrid article{
  background:linear-gradient(155deg,#fff4f7 0%,#ffffff 80%)!important;
  color:#111827!important;border-color:#ead3d9!important;
  box-shadow:0 10px 28px rgba(184,55,83,.045)!important;
}
html body.xs-platform-tools-page #tab-architecture .archGrid article>b{color:#c74761!important}
html body.xs-platform-tools-page #tab-architecture .archGrid p{color:#596273!important}

/* Shared form fields inside all four remaining platform tabs. */
html body.xs-platform-tools-page :is(#tab-content,#tab-tools,#tab-video,#tab-architecture) input:not([type="checkbox"]):not([type="radio"]),
html body.xs-platform-tools-page :is(#tab-content,#tab-tools,#tab-video,#tab-architecture) textarea,
html body.xs-platform-tools-page :is(#tab-content,#tab-tools,#tab-video,#tab-architecture) select{
  background:#ffffff!important;color:#111827!important;border-color:#d7cbd0!important;
}
html body.xs-platform-tools-page :is(#tab-content,#tab-tools,#tab-video,#tab-architecture) label,
html body.xs-platform-tools-page :is(#tab-content,#tab-tools,#tab-video,#tab-architecture) label>span{
  color:#374151!important;
}

@media(max-width:700px){
  html body.salesKnowledgePage .skHero,
  html body.salesKnowledgePage .skCard,
  html body.salesKnowledgePage .skQuick,
  html body.smPage .smStats article,
  html body.smPage .smCard,
  html body.xs-platform-tools-page .tabpane{box-shadow:none!important}
}

/* ==========================================================================
   XSELLER R23.4.4.11
   RUNTIME BRANDING LOGO -> TRUE CANONICAL FIX
   --------------------------------------------------------------------------
   Root-cause fix:
   the previous canonical files were stale duplicates (414x128, same SHA).
   This release copies the actual platform branding upload
   /static/uploads/branding/logo_main.png (729x243) to one immutable alias:
   /static/brand/xseller-logo-branding-r234411.png
   ========================================================================== */

:root{
  --xs-logo-ratio: 3 / 1;
  --xs-logo-sidebar-w: 150px;
  --xs-logo-sidebar-h: 50px;
  --xs-logo-header-w: 135px;
  --xs-logo-header-h: 45px;
  --xs-logo-admin-w: 120px;
  --xs-logo-admin-h: 40px;
  --xs-logo-auth-w: 150px;
  --xs-logo-auth-h: 50px;
}

/* Never stretch/distort the real 3:1 brand asset. */
html body img.xs-logo-canonical,
html body img.xs-brand-logo.xs-logo-canonical,
html body img.xsRealLogo.xs-logo-canonical,
html body img.xsVideoLogo.xs-logo-canonical{
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:left center!important;
  aspect-ratio:3 / 1!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  filter:none!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  mix-blend-mode:normal!important;
}

/* Canonical anchor geometry. */
html body a.xs-logo-anchor,
html body #sidebar > a.logo,
html body .authbox > a.logo,
html body .sa-shell aside > a.brand,
html body a.admBrand{
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:flex-start!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-decoration:none!important;
  line-height:1!important;
  opacity:1!important;
}

/* Kill any legacy textual brand fragments that could duplicate AI. */
html body a.xs-logo-anchor > b,
html body a.xs-logo-anchor > span,
html body a.xs-logo-anchor > strong,
html body a.admBrand > span,
html body a.admBrand > strong{
  display:none!important;
}

/* Workspace and feature sidebars. */
html body #sidebar > a.logo.xs-logo-anchor{
  width:var(--xs-logo-sidebar-w)!important;
  height:var(--xs-logo-sidebar-h)!important;
  min-width:var(--xs-logo-sidebar-w)!important;
  min-height:var(--xs-logo-sidebar-h)!important;
  max-width:var(--xs-logo-sidebar-w)!important;
  max-height:var(--xs-logo-sidebar-h)!important;
}

/* Homepage header. */
html body header .brand.brandImage.xs-logo-anchor,
html body .topbar .brand.brandImage.xs-logo-anchor,
html body nav .brand.brandImage.xs-logo-anchor{
  width:var(--xs-logo-header-w)!important;
  height:var(--xs-logo-header-h)!important;
  min-width:var(--xs-logo-header-w)!important;
  min-height:var(--xs-logo-header-h)!important;
  max-width:var(--xs-logo-header-w)!important;
  max-height:var(--xs-logo-header-h)!important;
}

/* Auth. */
html body .authbox > a.logo.xs-logo-anchor{
  width:var(--xs-logo-auth-w)!important;
  height:var(--xs-logo-auth-h)!important;
  min-width:var(--xs-logo-auth-w)!important;
  min-height:var(--xs-logo-auth-h)!important;
  max-width:var(--xs-logo-auth-w)!important;
  max-height:var(--xs-logo-auth-h)!important;
}

/* Sales Agent. */
html body .sa-shell aside > a.brand.xs-logo-anchor{
  width:145px!important;
  height:48px!important;
  min-width:145px!important;
  min-height:48px!important;
  max-width:145px!important;
  max-height:48px!important;
}

/* Admin Center. */
html body a.admBrand.xs-logo-anchor{
  width:var(--xs-logo-admin-w)!important;
  height:var(--xs-logo-admin-h)!important;
  min-width:var(--xs-logo-admin-w)!important;
  min-height:var(--xs-logo-admin-h)!important;
  max-width:var(--xs-logo-admin-w)!important;
  max-height:var(--xs-logo-admin-h)!important;
}

/* Admin Platform uses a bare img in .brandline. */
html body .brandline > img.xs-logo-canonical{
  width:var(--xs-logo-admin-w)!important;
  height:var(--xs-logo-admin-h)!important;
  min-width:var(--xs-logo-admin-w)!important;
  min-height:var(--xs-logo-admin-h)!important;
  max-width:var(--xs-logo-admin-w)!important;
  max-height:var(--xs-logo-admin-h)!important;
  flex:0 0 var(--xs-logo-admin-w)!important;
}

/* Public legal pages. */
html body a.brand.xs-logo-anchor:not(.brandImage){
  width:145px!important;
  height:48px!important;
  min-width:145px!important;
  min-height:48px!important;
  max-width:145px!important;
  max-height:48px!important;
}

/* Mobile drawer and header: same asset, conservative geometry. */
@media (max-width:900px){
  :root{
    --xs-logo-sidebar-w: 138px;
    --xs-logo-sidebar-h: 46px;
    --xs-logo-header-w: 126px;
    --xs-logo-header-h: 42px;
    --xs-logo-admin-w: 114px;
    --xs-logo-admin-h: 38px;
    --xs-logo-auth-w: 144px;
    --xs-logo-auth-h: 48px;
  }

  html body #sidebar > a.logo.xs-logo-anchor{
    margin-left:0!important;
    margin-right:0!important;
  }

  html body .sa-shell aside > a.brand.xs-logo-anchor{
    width:138px!important;
    height:46px!important;
    min-width:138px!important;
    min-height:46px!important;
    max-width:138px!important;
    max-height:46px!important;
  }
}

@media (max-width:560px){
  :root{
    --xs-logo-sidebar-w: 132px;
    --xs-logo-sidebar-h: 44px;
    --xs-logo-header-w: 120px;
    --xs-logo-header-h: 40px;
  }
}

/* ==========================================================================
   XSELLER R23.4.4.12
   HIDE INTERNAL SOCIAL MARKETING NAVIGATION
   --------------------------------------------------------------------------
   UI-only: hide internal/provider/test Social Marketing links from navigation.
   Routes and backend logic remain intact for admin maintenance and rollback.
   ========================================================================== */

/* Workspace / feature sidebars */
html body #sidebar a[href="/admin/social-marketing"],
html body #sidebar a[href="/admin/social-marketing/meta-test"],
html body #sidebar a[href="/admin/social-marketing/meta-discovery"],
html body #sidebar a[href="/admin/social-marketing/meta-binding"],
html body #sidebar a[href="/social-marketing"],

/* Sales Agent / alternate sidebars */
html body aside a[href="/admin/social-marketing"],
html body aside a[href="/admin/social-marketing/meta-test"],
html body aside a[href="/admin/social-marketing/meta-discovery"],
html body aside a[href="/admin/social-marketing/meta-binding"],
html body aside a[href="/social-marketing"],

/* Any navigation component carrying these internal links */
html body nav a[href="/admin/social-marketing"],
html body nav a[href="/admin/social-marketing/meta-test"],
html body nav a[href="/admin/social-marketing/meta-discovery"],
html body nav a[href="/admin/social-marketing/meta-binding"],
html body nav a[href="/social-marketing"]{
  display:none!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  max-width:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* ==========================================================================
   XSELLER R23.4.4.13
   GLOBAL TEXT CONTRAST NORMALIZATION — LIGHT SURFACES
   --------------------------------------------------------------------------
   Goal:
   - light background: primary text = near black
   - secondary/helper text = dark gray
   - placeholders = readable medium gray
   - preserve intentional red accents
   - DO NOT recolor dark panels/cards
   ========================================================================== */

:root{
  --xs-text-primary:#111827;
  --xs-text-secondary:#4b5563;
  --xs-text-tertiary:#596273;
  --xs-text-placeholder:#6b7280;
}

/* Public homepage: previously pale gray copy */
html body .heroDesc,
html body .whyLead,
html body .scrollHint,
html body .sectionEyebrow,
html body .hero .sub,
html body .hero p:not(.badge):not(.eyebrow),
html body .features p,
html body .feature-card p,
html body .benefit-card p,
html body .how-card p{
  color:var(--xs-text-secondary)!important;
  opacity:1!important;
}

/* Auth: helper copy and field text on white/pink card */
html body.xs-auth-page .authbox p,
html body.xs-auth-page .authbox label,
html body.xs-auth-page .authbox .notice,
html body.xs-auth-page .authbox .forgotLink,
html body.xs-auth-page .authbox input{
  color:var(--xs-text-primary)!important;
  opacity:1!important;
}
html body.xs-auth-page .authbox p,
html body.xs-auth-page .authbox .notice{
  color:var(--xs-text-secondary)!important;
}
html body.xs-auth-page .authbox input::placeholder{
  color:var(--xs-text-placeholder)!important;
  opacity:1!important;
}

/* Workspace / common light surfaces */
html body #sidebar,
html body #sidebar a,
html body #sidebar span,
html body #sidebar small,
html body #sidebar .sectionTitle,
html body #sidebar .groupTitle,
html body #sidebar .muted{
  color:var(--xs-text-primary)!important;
  opacity:1!important;
}
html body #sidebar .sectionTitle,
html body #sidebar .groupTitle,
html body #sidebar small,
html body #sidebar .muted{
  color:var(--xs-text-secondary)!important;
}

/* Common semantic helper classes used across XSeller templates */
html body .heroDesc,
html body .whyLead,
html body .lead,
html body .small,
html body .accountMeta,
html body .historyMeta,
html body .historyDetailMeta,
html body .paymentHelp,
html body .voiceTextMeta,
html body .automation-note,
html body .avsDirectorNote,
html body .avsCostNote,
html body .smDraftMuted,
html body .marbHint,
html body .mapfHint,
html body .mbHint,
html body .mdHint,
html body .mrrHint,
html body .mpgHint,
html body .metaHint,
html body .madScheduleHelp,
html body .malcSafetySmall,
html body .mapfSafetySmall,
html body .mdPermissionHint{
  color:var(--xs-text-secondary)!important;
  opacity:1!important;
}

/* Light cards/forms — readable labels, values and helpers */
html body :where(
  .authbox,
  .workspace,
  .content,
  .panel,
  .card,
  .toolCard,
  .metaCard,
  .historyCard,
  .accountCard,
  .pricingCard,
  .avsCard,
  .avsPanel,
  .smPanel,
  .smCard
) :where(label, .label, small){
  color:var(--xs-text-secondary)!important;
  opacity:1!important;
}

/* Form controls are always light in the current white/red theme. */
html body input,
html body textarea,
html body select,
html body option{
  color:var(--xs-text-primary)!important;
  opacity:1!important;
}
html body input::placeholder,
html body textarea::placeholder{
  color:var(--xs-text-placeholder)!important;
  opacity:1!important;
}

/* Generic muted class:
   change COLOR only. Do not touch layout/display behavior from older releases. */
html body .muted{
  color:var(--xs-text-secondary)!important;
  opacity:1!important;
}

/* Keep intentionally dark surfaces readable.
   These declarations override the light-surface normalization above. */
html body :where(
  .dark,
  .darkCard,
  .darkPanel,
  .videoHero,
  .videoPanel,
  .videoCard,
  .smDark,
  .adminDark,
  [data-theme="dark"]
) :where(
  h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,a,.muted,.lead,.small
){
  color:#f8fafc!important;
}
html body :where(
  .dark,
  .darkCard,
  .darkPanel,
  .videoHero,
  .videoPanel,
  .videoCard,
  .smDark,
  .adminDark,
  [data-theme="dark"]
) :where(.muted,small,.small,.lead){
  color:#cbd5e1!important;
}

/* Never override brand/accent red semantics. */
html body :where(
  .accent,
  .red,
  .danger,
  .active,
  .badge,
  .eyebrow,
  .sectionEyebrow,
  .smEyebrow,
  .admEyebrow
){
  opacity:1!important;
}

/* ==========================================================================
   XSELLER R23.4.4.14
   HOMEPAGE SECONDARY CTA TEXT CONTRAST FIX
   --------------------------------------------------------------------------
   Fix the remaining pale "Xem bộ công cụ" secondary CTA on the homepage.
   UI-only; no geometry/business/backend changes.
   ========================================================================== */

html body .heroActions .heroSecondary,
html body .heroActions a.heroSecondary,
html body a.heroSecondary[href="#features"]{
  color:#374151!important;
  opacity:1!important;
  -webkit-text-fill-color:#374151!important;
  text-shadow:none!important;
  filter:none!important;
}

html body .heroActions .heroSecondary > span,
html body .heroActions a.heroSecondary > span,
html body a.heroSecondary[href="#features"] > span{
  color:#374151!important;
  opacity:1!important;
  -webkit-text-fill-color:#374151!important;
}

html body .heroActions .heroSecondary:hover,
html body .heroActions .heroSecondary:focus-visible,
html body a.heroSecondary[href="#features"]:hover,
html body a.heroSecondary[href="#features"]:focus-visible{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
}

html body .heroActions .heroSecondary:hover > span,
html body .heroActions .heroSecondary:focus-visible > span{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
}