:root{--bg:#f7f8fc;--card:#fff;--ink:#10131b;--muted:#748097;--line:#edf0f6;--blue:#287cff;--purple:#5738ff;--soft:#f0f3fb;--shadow:0 5px 22px rgba(29,43,79,.055)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.brand{font-weight:900;font-size:25px;letter-spacing:-1.6px;white-space:nowrap}.brand span{color:#6138ff}.layout{max-width:1440px;margin:auto;display:grid;grid-template-columns:220px minmax(0,720px) 270px;gap:24px;padding:0 22px}.side{height:100vh;position:sticky;top:0;padding:28px 5px 20px 0;display:flex;flex-direction:column;gap:25px}.side .brand{margin:0 0 12px 8px}.side-nav{display:grid;gap:6px}.side-nav a{padding:13px 14px;border-radius:13px;color:#68738a;font-weight:700;display:flex;align-items:center;gap:13px}.side-nav a .ico{width:22px;font-size:22px;text-align:center}.side-nav a.active,.side-nav a:hover{background:#eeecff;color:var(--purple)}.side-note{margin-top:auto;background:white;border:1px solid var(--line);padding:16px;border-radius:17px;color:var(--muted);font-size:12px;line-height:1.6}.side-note b{display:block;color:var(--ink);font-size:14px;margin-bottom:5px}.center{min-width:0;border-left:1px solid #f0f1f7;border-right:1px solid #f0f1f7;background:var(--bg);min-height:100vh;padding:0 8px 90px}.topbar{height:68px;display:flex;align-items:center;gap:14px;padding:0 8px;position:sticky;top:0;background:rgba(247,248,252,.93);backdrop-filter:blur(15px);z-index:15}.topbar .brand{margin-right:auto}.search-form{display:flex;align-items:center;gap:8px;width:min(260px,45%);height:39px;border:1px solid var(--line);background:#fff;border-radius:13px;padding:0 11px}.search-form .search-icon{font-size:22px;color:#58647b}.search-form input{border:0;outline:0;background:transparent;min-width:0;width:100%;font-size:12px}.top-icon{border:0;background:transparent;font-size:23px;position:relative;padding:5px;color:#202638}.notif-dot{position:absolute;top:0;right:-1px;width:15px;height:15px;border-radius:50%;background:#ff3152;color:#fff;font-size:9px;display:grid;place-items:center;border:1px solid white}.topic-pills{display:flex;gap:7px;overflow-x:auto;padding:0 4px 12px;scrollbar-width:none}.topic-pills::-webkit-scrollbar{display:none}.topic-pills a{background:#f0f3fa;border-radius:30px;padding:9px 15px;font-size:11px;white-space:nowrap;color:#3f4960}.topic-pills a.active{background:linear-gradient(120deg,#297cff,#5c32fa);color:#fff;box-shadow:0 4px 10px #5338ff26}.hero{height:172px;position:relative;overflow:hidden;border-radius:15px;margin:0 0 10px;color:#fff;background:#273d5c}.hero img{width:100%;height:100%;object-fit:cover;display:block}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,15,29,.84),rgba(7,15,29,.04)),linear-gradient(0deg,rgba(0,0,0,.25),transparent)}.hero-copy{position:absolute;z-index:1;left:17px;top:50%;transform:translateY(-50%);width:75%}.hero-copy h1{font-size:23px;line-height:1.1;margin:0 0 8px;letter-spacing:-.8px}.hero-copy p{font-size:11px;line-height:1.45;margin:0;max-width:230px}.hero-arrow{position:absolute;right:13px;bottom:14px;z-index:2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:white;color:#4c39ff;font-size:21px}.feed-head{display:flex;align-items:center;justify-content:space-between;padding:13px 2px 10px}.feed-head h2{font-size:17px;margin:0;letter-spacing:-.4px}.feed-head .muted{font-size:11px;color:var(--muted)}.post{background:var(--card);border:1px solid #eef0f6;border-radius:16px;margin-bottom:11px;overflow:hidden;box-shadow:var(--shadow)}.post-head{display:flex;align-items:center;gap:9px;padding:12px 12px 0}.avatar{width:34px;height:34px;object-fit:cover;border-radius:50%;background:#e8edf7;flex-shrink:0}.post-owner{flex:1;min-width:0}.post-owner b{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.post-owner small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.more{font-size:22px;color:#596277;line-height:1}.post-text{padding:8px 12px 10px;line-height:1.45;font-size:12px;overflow-wrap:anywhere}.post-media{display:block;width:calc(100% - 24px);margin:0 12px;height:auto;max-height:360px;object-fit:cover;border-radius:11px;background:#e9edf5}.post-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:0 12px}.post-gallery a{height:98px;border-radius:8px;overflow:hidden;position:relative;background:#e9edf5}.post-gallery img{width:100%;height:100%;object-fit:cover}.post-gallery .more-photos{position:absolute;inset:0;background:#0009;color:#fff;display:grid;place-items:center;font-size:23px;font-weight:800}.post-actions{display:flex;align-items:center;gap:19px;padding:12px;color:#566176}.post-actions a,.post-actions button{border:0;background:transparent;color:inherit;padding:0;display:flex;gap:5px;align-items:center;font-size:12px}.post-actions .heart{color:#ff3152;font-size:19px}.post-actions .save{margin-left:auto;font-size:21px}.section-title{display:flex;align-items:center;justify-content:space-between;margin:25px 2px 12px}.section-title h2{font-size:17px;margin:0}.section-title a{font-size:11px;color:var(--purple);font-weight:700}.category-row{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:10px 0 20px}.category-row a{text-align:center;font-size:10px;display:grid;gap:6px;justify-items:center}.category-icon{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:#e7efff;color:#287cff;font-size:19px}.category-row a:nth-child(2) .category-icon{background:#ffe9f2;color:#ff624c}.category-row a:nth-child(3) .category-icon{background:#e8efff;color:#315cff}.category-row a:nth-child(4) .category-icon{background:#efe8ff;color:#6739f7}.category-row a:nth-child(5) .category-icon{background:#fff0e7;color:#d57a32}.trending-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.trend-card{height:120px;position:relative;border-radius:10px;overflow:hidden;color:#fff;background:#ddd}.trend-card img{width:100%;height:100%;object-fit:cover}.trend-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000b,transparent 75%)}.trend-label{position:absolute;z-index:1;left:8px;right:5px;bottom:8px;font-size:10px;font-weight:800;line-height:1.3}.trend-label small{display:block;font-size:9px;font-weight:500;margin-top:3px}.right-rail{padding:86px 0 30px}.rail-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:16px;margin-bottom:13px}.rail-card h3{font-size:14px;margin:0 0 12px}.rail-card p{font-size:12px;color:var(--muted);line-height:1.55}.creator{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #f1f2f6}.creator:last-child{border-bottom:0}.creator .avatar{width:37px;height:37px}.creator-info{flex:1;min-width:0}.creator-info b{font-size:11px;display:block}.creator-info small{font-size:10px;color:var(--muted)}.follow-btn{border:1px solid #6850ff;color:#5537ff;border-radius:30px;padding:6px 10px;background:#fff;font-size:10px;font-weight:700}.footer-mini{font-size:10px;color:#9aa2b3;line-height:1.8;padding:5px}.mobile-nav{display:none}.search-results{display:none;position:absolute;top:58px;left:8px;right:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 15px 35px #16204420;max-height:65vh;overflow:auto;z-index:30;padding:8px}.search-results.show{display:block}.search-group-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#8791a5;font-weight:800;padding:10px}.search-result{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px}.search-result:hover{background:#f5f6fb}.search-result-thumb,.search-result-icon{width:40px;height:40px;flex:0 0 40px;object-fit:cover;border-radius:9px;background:#eef0f8}.search-result-icon{display:grid;place-items:center}.search-result-title{font-size:12px;font-weight:700}.search-result-meta{font-size:10px;color:var(--muted);margin-top:3px}.empty{padding:30px;text-align:center;color:var(--muted)}.content-link{color:inherit}.bottom-space{height:20px}
@media(min-width:1200px){.layout{grid-template-columns:220px minmax(0,720px) 270px;gap:24px}.center{padding-left:12px;padding-right:12px}.hero{height:210px}.hero-copy h1{font-size:28px}.post-gallery a{height:130px}}
@media(max-width:1050px){.layout{grid-template-columns:190px minmax(0,1fr);max-width:900px}.right-rail{display:none}.center{border-right:0}.side{padding-right:10px}}
@media(max-width:650px){body{background:#f7f8fc}.layout{display:block;padding:0;max-width:500px}.side,.right-rail{display:none}.center{padding:0 3px 86px;border:0;min-height:100vh}.topbar{height:49px;padding:0 10px;gap:10px}.topbar .brand{font-size:22px}.search-form{width:36px;flex:0 0 36px;height:35px;border:0;background:transparent;padding:0;justify-content:center}.search-form .search-icon{font-size:23px}.search-form input{position:absolute;left:10px;right:50px;top:54px;width:calc(100% - 20px);height:40px;display:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 12px;box-shadow:var(--shadow)}.search-form.open input{display:block}.top-icon{font-size:22px;padding:3px}.topic-pills{gap:6px;padding:3px 3px 10px}.topic-pills a{padding:7px 13px;font-size:10px}.hero{height:auto;aspect-ratio:1.9/1;margin:0 0 8px;border-radius:13px}.hero-copy{left:16px;width:78%}.hero-copy h1{font-size:22px;margin-bottom:7px}.hero-copy p{font-size:11px}.hero-arrow{width:32px;height:32px}.feed-head{padding:12px 9px 9px}.feed-head h2{font-size:16px}.post{border-radius:14px;margin:0 0 9px}.post-head{padding:11px 10px 0}.avatar{width:32px;height:32px}.post-text{padding:8px 10px;font-size:12px}.post-media{width:calc(100% - 20px);margin:0 10px;max-height:390px}.post-gallery{padding:0 10px;gap:4px}.post-gallery a{height:auto;aspect-ratio:1/1}.post-actions{padding:10px;gap:17px}.category-row{margin:8px 6px 18px}.category-icon{width:40px;height:40px}.trending-strip{padding:0 7px}.trend-card{height:112px}.section-title{margin:22px 9px 11px}.mobile-nav{display:flex;position:fixed;z-index:40;bottom:0;left:0;right:0;height:66px;padding:6px 8px calc(5px + env(safe-area-inset-bottom));justify-content:space-around;align-items:center;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border-top:1px solid #e8ebf2}.mobile-nav a{min-width:45px;display:grid;justify-items:center;gap:2px;color:#66718a;font-size:10px}.mobile-nav a span{font-size:21px;line-height:1.2}.mobile-nav a.active{color:#4f35ff;font-weight:800}.mobile-create{width:42px;height:42px;margin-top:-21px;border:0;border-radius:50%;background:linear-gradient(135deg,#287cff,#6032f5);color:#fff;font-size:29px;box-shadow:0 5px 13px #5438ff40}.search-results{top:48px;left:8px;right:8px}.search-form.open{position:static}.search-form.open input{display:block;z-index:31}.bottom-space{height:5px}}


/* ExploreX layout safety patch: prevent unstyled full-width media */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.layout{display:grid!important;grid-template-columns:220px minmax(0,720px) 270px!important;gap:24px!important;max-width:1440px!important;margin:0 auto!important;padding:0 22px!important}
.side{display:flex!important;flex-direction:column!important;min-width:0!important}
.center{display:block!important;min-width:0!important;width:100%!important;max-width:100%!important;overflow:hidden!important}
.right-rail{display:block!important;min-width:0!important}
.hero{display:block!important;height:210px!important;max-height:210px!important;min-height:210px!important;position:relative!important;overflow:hidden!important;width:100%!important}
.hero>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover!important}
.post{width:100%!important;max-width:100%!important;overflow:hidden!important}
.post-media{display:block!important;width:calc(100% - 24px)!important;height:auto!important;max-height:360px!important;object-fit:cover!important}
.post-media video,.post video{max-height:360px!important;width:calc(100% - 24px)!important;object-fit:cover!important}
.trending-strip{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
.trend-card{display:block!important;min-width:0!important;height:120px!important;overflow:hidden!important;position:relative!important}
.trend-card img{width:100%!important;height:100%!important;object-fit:cover!important}
@media(max-width:1050px){
 .layout{grid-template-columns:190px minmax(0,1fr)!important;max-width:900px!important;padding:0 14px!important}
 .right-rail{display:none!important}
}
@media(max-width:650px){
 .layout{display:block!important;max-width:500px!important;padding:0!important}
 .side,.right-rail{display:none!important}
 .center{width:100%!important;padding:0 3px 86px!important;border:0!important}
 .hero{height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:1.9/1!important}
 .post-media{width:calc(100% - 20px)!important;max-height:390px!important;margin-left:10px!important;margin-right:10px!important}
 .trend-card{height:112px!important}
}

/* =========================================================
   ExploreX FULL-WIDTH HEADER PATCH
   Header spans the complete viewport; page columns begin below it.
   ========================================================= */
:root { --explorex-header-height: 68px; }

/* The topbar is nested in .center in the current PHP layout,
   but fixed positioning lets it span the entire viewport. */
.center > .topbar,
.center .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--explorex-header-height) !important;
    padding: 0 max(22px, calc((100vw - 1440px) / 2 + 22px)) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(247, 248, 252, .96) !important;
    color: #202638 !important;
    border-bottom: 1px solid #e8ebf2 !important;
    box-shadow: 0 5px 22px rgba(12, 20, 40, .08) !important;
    backdrop-filter: blur(15px);
    z-index: 1000 !important;
}
.center .topbar .brand { color: #202638 !important; }
.center .topbar .top-icon { color: #202638 !important; }
.center .topbar .search-form {
    background: #fff !important;
    border-color: #e1e6f0 !important;
}
.center .topbar .search-form input { color: #202638 !important; }
.center .topbar .search-form input::placeholder { color: #7b8498 !important; }

/* Keep the main page content below the fixed full-width header. */
.layout { padding-top: var(--explorex-header-height) !important; }
.center { padding-top: 0 !important; }
.center > :not(.topbar) { position: relative; }
.center .topbar + * { margin-top: 0; }

/* Fixed side rails also start below the full-width header. */
@media (min-width: 1051px) {
    .side {
        top: var(--explorex-header-height) !important;
        height: calc(100vh - var(--explorex-header-height)) !important;
    }
    .right-rail {
        top: var(--explorex-header-height) !important;
        height: calc(100vh - var(--explorex-header-height)) !important;
        padding-top: 18px !important;
    }
    .center {
        height: calc(100vh - var(--explorex-header-height)) !important;
        margin-top: 0 !important;
    }
}
@media (min-width: 651px) and (max-width: 1050px) {
    .side {
        top: var(--explorex-header-height) !important;
        height: calc(100vh - var(--explorex-header-height)) !important;
    }
    .center {
        height: calc(100vh - var(--explorex-header-height)) !important;
    }
}
@media (max-width: 650px) {
    :root { --explorex-header-height: 52px; }
    .layout { padding-top: var(--explorex-header-height) !important; }
    .center .topbar {
        height: var(--explorex-header-height) !important;
        padding: 0 10px !important;
    }
    .center { height: auto !important; min-height: calc(100vh - var(--explorex-header-height)) !important; }
}


/* ExploreX: hide scrollbar visuals but preserve scrolling */
html,
body,
.layout,
.side,
.center,
.right-rail,
.topic-pills,
.search-results,
.ex-menu-panel {
  scrollbar-width: none !important;       /* Firefox */
  -ms-overflow-style: none !important;    /* legacy Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.layout::-webkit-scrollbar,
.side::-webkit-scrollbar,
.center::-webkit-scrollbar,
.right-rail::-webkit-scrollbar,
.topic-pills::-webkit-scrollbar,
.search-results::-webkit-scrollbar,
.ex-menu-panel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;               /* Chrome, Safari, Chromium */
}


/* ==========================================================
   ExploreX Light/Dark Theme
   Controlled by the Theme switch in the shared sidebar drawer.
   ========================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#090e1b;
  --card:#111827;
  --ink:#eef2ff;
  --muted:#9aa8bf;
  --line:#263249;
  --soft:#182236;
  --shadow:0 8px 28px rgba(0,0,0,.28);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .layout,
html[data-theme="dark"] .center { background:var(--bg)!important; color:var(--ink)!important; }
html[data-theme="dark"] .center { border-left-color:#202b40!important;border-right-color:#202b40!important; }
html[data-theme="dark"] .side-nav a { color:#b7c4da!important; }
html[data-theme="dark"] .side-nav a.active,
html[data-theme="dark"] .side-nav a:hover { background:#252044!important;color:#c4b5fd!important; }
html[data-theme="dark"] .side-note,
html[data-theme="dark"] .post,
html[data-theme="dark"] .rail-card,
html[data-theme="dark"] .simple-list,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .page-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .search-results {
  background:#111827!important;color:#eef2ff!important;border-color:#263249!important;
}
html[data-theme="dark"] .topbar .brand,
html[data-theme="dark"] .topbar .ex-mobile-brand { color:#eef2ff!important; }
html[data-theme="dark"] .topbar .ex-header-btn { background:#111827!important;color:#eef2ff!important;border-color:#334155!important; }
html[data-theme="dark"] .topbar .search-form,
html[data-theme="dark"] .search-form { background:#111827!important;border-color:#334155!important; }
html[data-theme="dark"] .search-form input,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background-color:#0c1322;color:#eef2ff;border-color:#334155; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#91a0b8; }
html[data-theme="dark"] .topic-pills a { background:#182236!important;color:#c7d2e5!important; }
html[data-theme="dark"] .topic-pills a.active { background:linear-gradient(120deg,#297cff,#5c32fa)!important;color:#fff!important; }
html[data-theme="dark"] .post-owner b,
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .feed-head h2,
html[data-theme="dark"] .rail-card h3,
html[data-theme="dark"] .side-note b,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] label,
html[data-theme="dark"] .list-row b { color:#eef2ff!important; }
html[data-theme="dark"] .post-actions,
html[data-theme="dark"] .post-text,
html[data-theme="dark"] .page-intro,
html[data-theme="dark"] .rail-card p { color:#bdc8dc!important; }
html[data-theme="dark"] .creator,
html[data-theme="dark"] .list-row { border-bottom-color:#263249!important; }
html[data-theme="dark"] .follow-btn { background:#111827!important;color:#c4b5fd!important;border-color:#6255a8!important; }
html[data-theme="dark"] .mobile-nav { background:rgba(9,14,27,.97)!important;border-top-color:#263249!important; }
html[data-theme="dark"] .mobile-nav a { color:#9aa8bf!important; }
html[data-theme="dark"] .mobile-nav a.active { color:#c4b5fd!important; }
html[data-theme="dark"] .ex-menu-panel { background:#000!important;color:#eee!important; }
html[data-theme="dark"] .ex-theme-row { border-color:rgba(255,255,255,.14)!important; }
html[data-theme="dark"] .profile-summary .avatar { border-color:#111827!important; }
html[data-theme="dark"] .form-card input,
html[data-theme="dark"] .form-card textarea,
html[data-theme="dark"] .form-card select { background:#0c1322!important;color:#eef2ff!important;border-color:#334155!important; }

/* Homepage feed layout rules moved out of index.php */
/* Desktop: only the center column scrolls. Side rails remain fixed. */
@media (min-width: 1051px) {
    html, body { height:100%; overflow:hidden; }
    .layout {
        height:100vh !important; min-height:100vh !important;
        overflow:hidden !important;
        grid-template-columns:220px minmax(0,720px) 270px !important;
        align-items:stretch !important;
    }
    .side {
        position:fixed !important; top:0 !important; left:max(22px,calc((100vw - 1440px)/2 + 22px)) !important;
        width:220px !important; height:100vh !important; overflow-y:auto !important;
        overscroll-behavior:contain; z-index:30;
    }
    .center {
        grid-column:2 !important; height:100vh !important; min-height:0 !important;
        overflow-y:auto !important; overflow-x:hidden !important;
        overscroll-behavior-y:contain; scrollbar-gutter:stable;
    }
    .right-rail {
        position:fixed !important; top:0 !important;
        left:calc(50% + 310px) !important; width:270px !important;
        height:100vh !important; overflow-y:auto !important;
        padding-top:86px !important; overscroll-behavior:contain; z-index:20;
    }
    .center .topbar { position:sticky !important; top:0 !important; }
}
@media (min-width:651px) and (max-width:1050px) {
    html, body { height:100%; overflow:hidden; }
    .layout { height:100vh !important; overflow:hidden !important; grid-template-columns:190px minmax(0,1fr) !important; }
    .side { position:fixed !important; left:14px !important; top:0 !important; width:190px !important; height:100vh !important; overflow-y:auto !important; }
    .center { grid-column:2 !important; height:100vh !important; min-height:0 !important; overflow-y:auto !important; overscroll-behavior:contain; }
    .right-rail { display:none !important; }
}
@media (max-width:650px) {
    html, body { height:auto !important; overflow-x:hidden !important; overflow-y:auto !important; }
    .layout { height:auto !important; min-height:0 !important; overflow:visible !important; display:block !important; }
    .center { height:auto !important; min-height:100vh !important; overflow:visible !important; }
    .side,.right-rail { display:none !important; }
}
/* Media ratios: still images 4:5; reels/videos 9:16. */
#homeFeed .post-media { width:calc(100% - 24px) !important; height:auto !important; max-height:none !important; margin:0 12px !important; object-fit:cover !important; background:#edf0f7; }
#homeFeed img.post-media { aspect-ratio:4 / 5 !important; }
#homeFeed video.post-media { aspect-ratio:9 / 16 !important; max-height:720px !important; }
#homeFeed .post-media a { display:block; }

#homeFeed .post { overflow:hidden; }

/* Product cards inside the existing Explore your feed stream */
#homeFeed .home-product-post { padding-bottom: 14px; }
#homeFeed .home-product-heading { display:flex; align-items:center; gap:10px; min-width:0; padding:12px 12px 10px; }
#homeFeed .home-product-heading .post-user-info { display:flex; flex-direction:column; align-items:flex-start; gap:3px; line-height:1.25; }
#homeFeed .home-product-heading .post-user-info strong { display:block; font-size:12px; font-weight:700; }
#homeFeed .home-product-heading .post-user-info small { display:block; color:#748097; font-size:12px; }
#homeFeed .home-product-logo-link { display:inline-flex; flex:0 0 38px; width:38px; height:38px; border-radius:50%; overflow:hidden; align-items:center; justify-content:center; background:#f0f2f8; }
#homeFeed .home-product-logo { display:block; width:100%; height:100%; object-fit:cover; }
#homeFeed .home-product-heading .post-user-info { min-width:0; }
#homeFeed .home-product-link { display:block; color:inherit; text-decoration:none; }
#homeFeed .home-product-media {
    width:calc(100% - 24px);
    margin:0 12px;
    overflow:hidden;
    border-radius:12px;
    background:#edf0f7;
}
#homeFeed .home-product-media img,
#homeFeed .home-product-image {
    display:block;
    width:100%;
    aspect-ratio:4 / 5;
    object-fit:cover;
}
#homeFeed .home-product-info { padding:12px 16px 0; }
#homeFeed .home-product-category { color:#748097; font-size:11px; text-transform:uppercase; letter-spacing:.6px; }
#homeFeed .home-product-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 6px; }
#homeFeed .home-product-name { margin:0; min-width:0; font-size:16px; line-height:1.35; font-weight:700; }
#homeFeed .home-product-name a { color:inherit; text-decoration:none; }
#homeFeed .home-product-name a:hover { text-decoration:underline; }
#homeFeed .home-product-seller { color:#748097; font-size:12px; margin-bottom:8px; }
#homeFeed .home-product-price { font-size:16px; font-weight:800; }
#homeFeed .home-product-buy {
    display:inline-flex;
    flex:0 0 auto;
    width:max-content;
    align-items:center;
    justify-content:center;
    margin:0;
    min-height:38px;
    padding:0 18px;
    border-radius:9px;
    background:var(--primary, #6366f1);
    color:#fff !important;
    font-size:13px;
    font-weight:700;
    text-decoration:none !important;
}
#homeFeed .home-product-buy:hover { filter:brightness(.95); }
#homeFeed .feed-loader { text-align:center; padding:20px; color:#748097; font-size:13px; }
#homeFeed img.post-media.wide-media { aspect-ratio:16/9 !important; width:calc(100% - 24px) !important; height:auto !important; max-height:none !important; object-fit:cover !important; }

/* Instagram-style reel cards and common engagement row */
#homeFeed .home-reel-post { padding:0 0 10px; }
#homeFeed .home-reel-stage { position:relative; width:min(100%,430px); margin:0 auto; aspect-ratio:9/16; max-height:780px; overflow:hidden; background:#080808; border-radius:14px; }
#homeFeed .home-reel-video { display:block; width:100%; height:100%; object-fit:cover; background:#080808; }
#homeFeed .home-reel-overlay { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 20%,transparent 58%,rgba(0,0,0,.62)); }
#homeFeed .home-reel-user { position:absolute; left:14px; bottom:16px; display:flex; align-items:center; gap:9px; max-width:calc(100% - 74px); color:#fff; text-decoration:none; z-index:2; text-shadow:0 1px 4px #000; pointer-events:auto; }
#homeFeed .home-reel-avatar { width:38px; height:38px; border:2px solid #fff; border-radius:50%; object-fit:cover; background:#ddd; flex:0 0 38px; }
#homeFeed .home-reel-user-copy { min-width:0; }
#homeFeed .home-reel-user-copy strong { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#homeFeed .home-reel-caption { display:block; font-size:12px; line-height:1.35; max-height:34px; overflow:hidden; margin-top:3px; }
#homeFeed .home-reel-mute { position:absolute; top:12px; right:12px; z-index:3; width:38px; height:38px; border:0; border-radius:50%; color:#fff; background:rgba(0,0,0,.52); font-size:17px; cursor:pointer; }
#homeFeed .home-reel-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:48px; text-shadow:0 2px 10px #000; pointer-events:none; opacity:0; transition:opacity .2s; }
#homeFeed .home-reel-stage.is-paused .home-reel-play { opacity:1; }
#homeFeed .home-feed-actions { display:flex; align-items:center; gap:22px; padding:12px 16px 2px; color:#6b7280; font-size:13px; }
#homeFeed .home-feed-action { display:inline-flex; align-items:center; gap:6px; border:0; padding:3px 0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
#homeFeed .home-feed-action.is-liked { color:#f43f5e; }
#homeFeed .home-feed-action .action-icon { font-size:17px; line-height:1; }
#homeFeed .home-reel-post .home-feed-actions { width:min(100%,430px); margin:0 auto; }
@media(max-width:650px){ #homeFeed .home-reel-stage { width:100%; border-radius:0; max-height:none; } #homeFeed .home-reel-post .home-feed-actions { width:100%; } }


/* FORCE HIDE SCROLLBARS ON HOMEPAGE */
html,
body,
.layout,
.side,
.center,
.right-rail,
* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.layout::-webkit-scrollbar,
.side::-webkit-scrollbar,
.center::-webkit-scrollbar,
.right-rail::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Keep scrolling enabled */
.side,
.center,
.right-rail {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Remove reserved space for scrollbar */
.center {
    scrollbar-gutter: auto !important;
}


/* Shift homepage content below the header */
@media (min-width: 651px) {
    .center {
        padding-top: 12px !important;
        box-sizing: border-box !important;
    }

    .center .topbar {
        z-index: 100 !important;
    }
}

@media (max-width: 650px) {
    .center {
        padding-top: 8px !important;
    }
}


/* Dynamic trending sectors: keep three cards in view, swipe/scroll horizontally for more. */
.trending-strip {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - 24px) / 3) !important;
    grid-template-columns: unset !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 2px 10px !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.trending-strip .trend-card {
    min-width: 0 !important;
    width: 100% !important;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}
.trending-strip .trend-card img,
.trending-strip .trend-card-fallback {
    width: 100%;
    height: 132px;
    object-fit: cover;
    display: block;
}
.trending-strip .trend-card-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg,#536dfe,#a855f7);
}
.trending-strip .trend-label {
    overflow-wrap: anywhere;
}
.trending-strip .trend-card.is-selected {
    outline: 2px solid var(--primary, #6366f1);
    outline-offset: 2px;
}
.trending-empty {
    padding: 18px 12px;
    color: #748097;
    font-size: 13px;
}
.sector-filter-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin: 0 0 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    font-size: 13px;
}
.sector-filter-active a { white-space: nowrap; }
@media (max-width: 650px) {
    .trending-strip { grid-auto-columns: calc((100% - 12px) / 2.15) !important; }
    .trending-strip .trend-card img,
    .trending-strip .trend-card-fallback { height: 118px; }
}


#sectorFilterNotice {
    display: none !important;
}


/* Mobile: Trending Now cards in 1:1 square ratio — 3 cards per row */
@media (max-width: 650px) {
    .trending-strip {
        grid-auto-columns: calc((100% - 24px) / 3) !important;
        grid-auto-flow: column !important;
        grid-template-columns: unset !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 2px 10px !important;
    }

    .trending-strip .trend-card {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
        scroll-snap-align: start;
    }

    .trending-strip .trend-card img,
    .trending-strip .trend-card-fallback {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        display: block !important;
    }

    .trending-strip .trend-label {
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 22px 5px 7px;
        color: #fff !important;
        font-size: 11px;
        line-height: 1.3;
        background: linear-gradient(transparent, rgba(0, 0, 0, .82));
        overflow-wrap: anywhere;
        z-index: 2;
    }

    .trending-strip .trend-label small {
        display: block;
        font-size: 9px;
        margin-top: 3px;
    }
}


/* ExploreX home feed: Instagram-like reels, lazy media and engagement */
#homeFeed .home-reel-stage{position:relative;width:min(100%,430px);aspect-ratio:9/16;max-height:780px;margin:0 auto;overflow:hidden;background:#050505;border-radius:14px}
#homeFeed video.home-reel-video{display:block;width:100%;height:100%;object-fit:cover;background:#050505}
#homeFeed .home-reel-overlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.48),transparent 26%,transparent 70%,rgba(0,0,0,.52))}
#homeFeed .home-reel-user{position:absolute;top:14px;left:14px;bottom:auto;display:flex;align-items:center;gap:9px;max-width:calc(100% - 70px);color:#fff;text-decoration:none;z-index:2;text-shadow:0 1px 4px #000;pointer-events:auto}
#homeFeed .home-reel-avatar{width:38px;height:38px;border:2px solid #fff;border-radius:50%;object-fit:cover;background:#ddd;flex:0 0 38px}
#homeFeed .home-reel-avatar-fallback{display:flex;align-items:center;justify-content:center;color:#333;text-shadow:none}
#homeFeed .home-reel-user-copy{min-width:0}
#homeFeed .home-reel-user-copy strong{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#homeFeed .home-reel-caption{display:block;font-size:12px;line-height:1.35;max-height:34px;overflow:hidden;margin-top:3px}
#homeFeed .home-reel-mute{position:absolute;top:12px;right:12px;z-index:4;width:40px;height:40px;border:1px solid #ffffff45;border-radius:50%;color:#fff;background:rgba(0,0,0,.58);display:grid;place-items:center;cursor:pointer}
#homeFeed .home-reel-mute svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#homeFeed .home-reel-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:48px;text-shadow:0 2px 10px #000;pointer-events:none;opacity:0;transition:opacity .2s}
#homeFeed .home-reel-stage.is-paused .home-reel-play{opacity:1}
#homeFeed .home-reel-unavailable{display:flex;align-items:center;justify-content:center;color:#fff;padding:20px;text-align:center;height:100%}
#homeFeed .home-feed-actions{display:flex;align-items:center;gap:22px;padding:12px 16px 4px;color:var(--muted,#748097)}
#homeFeed .home-feed-action{display:inline-flex;align-items:center;gap:6px;border:0;padding:4px 0;background:transparent;color:inherit;font:inherit;cursor:pointer}
#homeFeed .home-feed-action .action-icon{font-size:18px;line-height:1}
#homeFeed .home-feed-action.is-liked{color:#f43f5e}
#homeFeed .home-feed-action:disabled{opacity:.55;cursor:wait}
#homeFeed .home-product-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
#homeFeed .home-product-name{flex:1}
#homeFeed .home-product-buy{flex-shrink:0}
.home-comment-backdrop{position:fixed;inset:0;z-index:20000;background:rgba(9,14,27,.62);backdrop-filter:blur(7px);display:flex;align-items:flex-end;justify-content:center;padding:18px}
.home-comment-dialog{width:min(100%,520px);max-height:min(78vh,720px);display:flex;flex-direction:column;background:var(--card,#fff);color:var(--ink,#10131b);border:1px solid var(--line,#edf0f6);border-radius:24px 24px 18px 18px;box-shadow:0 25px 90px #0004;overflow:hidden}
.home-comment-close{align-self:flex-end;margin:10px 12px -4px;border:0;border-radius:50%;width:34px;height:34px;background:var(--soft,#f0f3fb);color:inherit;font-size:24px;line-height:1}
.home-comment-heading{display:flex;align-items:center;gap:12px;padding:6px 20px 16px;border-bottom:1px solid var(--line,#edf0f6)}
.home-comment-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#287cff,#5738ff);color:#fff;font-size:20px}
.home-comment-heading strong{display:block;font-size:15px}
.home-comment-heading small{display:block;margin-top:4px;color:var(--muted,#748097);font-size:12px;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-comment-list{padding:12px 18px;overflow:auto;min-height:110px}
.home-comment-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0}
.home-comment-avatar{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#dbeafe,#ede9fe);color:#4f46e5;font-weight:800}
.home-comment-item>div{min-width:0;flex:1}
.home-comment-item strong{font-size:12px}
.home-comment-item p{margin:4px 0;color:var(--ink,#10131b);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.home-comment-item small{color:var(--muted,#748097);font-size:10px}
.home-comment-loading,.home-comment-empty{padding:24px 8px;text-align:center;color:var(--muted,#748097);font-size:13px}
.home-comment-form{display:flex;align-items:flex-end;gap:10px;padding:14px;border-top:1px solid var(--line,#edf0f6);background:var(--card,#fff)}
.home-comment-form textarea{flex:1;resize:vertical;min-height:44px;max-height:120px;padding:12px 14px;border:1px solid var(--line,#dfe4ee);border-radius:15px;background:var(--bg,#f7f8fc);color:var(--ink,#10131b);outline:none}
.home-comment-form textarea:focus{border-color:#6850ff;box-shadow:0 0 0 3px #6850ff1c}
.home-comment-form button{border:0;border-radius:13px;padding:12px 15px;background:linear-gradient(120deg,#287cff,#5738ff);color:#fff;font-size:12px;font-weight:800;white-space:nowrap}
.home-comment-form button:disabled{opacity:.6}
html[data-theme="dark"] .home-comment-dialog,html[data-theme="dark"] .home-comment-form{background:#111827;color:#eef2ff}
html[data-theme="dark"] .home-comment-item p{color:#eef2ff}
@media(max-width:650px){#homeFeed .home-reel-stage{width:100%;max-height:none;border-radius:12px}#homeFeed .home-reel-post .home-feed-actions{width:100%}.home-comment-backdrop{padding:0}.home-comment-dialog{width:100%;max-height:82vh;border-radius:24px 24px 0 0}}


/* FINAL REEL FIT FIX: isolate reel video from generic .post video sizing rules */
#homeFeed .home-reel-post .home-reel-stage {
    position: relative !important;
    display: block !important;
    width: min(100%, 430px) !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    max-height: min(780px, calc(100vh - 100px)) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #050505 !important;
    border-radius: 12px !important;
}
#homeFeed .home-reel-post .home-reel-stage > video.home-reel-video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #050505 !important;
}
#homeFeed .home-reel-post .home-reel-stage > .home-reel-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
#homeFeed .home-reel-post .home-reel-user { z-index: 2 !important; }
#homeFeed .home-reel-post .home-reel-mute { z-index: 4 !important; }
#homeFeed .home-reel-post .home-reel-play { z-index: 3 !important; }
#homeFeed .home-reel-post .home-feed-actions { width: min(100%, 430px) !important; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 650px) {
    #homeFeed .home-reel-post .home-reel-stage {
        width: 100% !important;
        max-height: none !important;
        border-radius: 10px !important;
    }
    #homeFeed .home-reel-post .home-feed-actions { width: 100% !important; }
}


/* FINAL OVERRIDE: make the reel video fill its own 9:16 stage.
   Only affects homepage reel cards; all other media styles remain unchanged. */
#homeFeed .home-reel-post .home-reel-stage {
    display: block !important;
    position: relative !important;
    width: min(100%, 430px) !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    max-height: min(780px, calc(100vh - 100px)) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #050505 !important;
}
#homeFeed .home-reel-post .home-reel-stage > video.home-reel-video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #050505 !important;
}
@media (max-width: 650px) {
    #homeFeed .home-reel-post .home-reel-stage {
        width: 100% !important;
        max-height: none !important;
        border-radius: 10px !important;
    }
}


/* FIX: Set only ExploreX mobile bottom-navigation text labels.
   Higher specificity prevents the legacy .mobile-nav a span {font-size:21px}
   rule from overriding the label size. Icons keep their own dimensions. */
@media (max-width: 768px) {
    .exx-mobile-nav .mobile-nav-item > span {
        font-size: 5px !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }
}


/* ==========================================================
   FINAL FIX: News/Blog media matches product media width;
   publisher logos/avatars are always circular.
   Keep this block at the very end so it overrides legacy rules.
   ========================================================== */
#homeFeed .post:not(.home-product-post):not(.home-reel-post) > img.post-media,
#homeFeed .post:not(.home-product-post):not(.home-reel-post) img.post-media,
#homeFeed .post:not(.home-product-post):not(.home-reel-post) img.post-media.wide-media {
    display: block !important;
    box-sizing: border-box !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 12px !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 0 !important;
}

/* Wide/landscape news images keep their natural ratio when explicitly marked. */
#homeFeed .post:not(.home-product-post):not(.home-reel-post) img.post-media.wide-media {
    aspect-ratio: 16 / 9 !important;
}

/* Ensure publisher/author logos are circular, including images whose
   source file itself is square. This does not affect post media images. */
#homeFeed .post-head .avatar,
#homeFeed .post-head img.avatar,
#homeFeed .post-owner .avatar,
#homeFeed .post-logo,
#homeFeed .news-logo,
#homeFeed .blog-logo,
#homeFeed .publisher-logo,
#homeFeed .post-avatar,
#homeFeed .avatar {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* If a logo is placed inside a link/wrapper, round the wrapper too. */
#homeFeed .post-head a:has(> img.avatar),
#homeFeed .post-head a:has(> img.post-logo),
#homeFeed .post-head a:has(> img.news-logo),
#homeFeed .post-head a:has(> img.blog-logo),
#homeFeed .post-head a:has(> img.publisher-logo) {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

@media (max-width: 650px) {
    #homeFeed .post:not(.home-product-post):not(.home-reel-post) > img.post-media,
    #homeFeed .post:not(.home-product-post):not(.home-reel-post) img.post-media {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin: 0 10px !important;
        aspect-ratio: 4 / 5 !important;
    }

    #homeFeed .post:not(.home-product-post):not(.home-reel-post) img.post-media.wide-media {
        aspect-ratio: 16 / 9 !important;
    }

    #homeFeed .post-head .avatar,
    #homeFeed .post-head img.avatar,
    #homeFeed .post-logo,
    #homeFeed .news-logo,
    #homeFeed .blog-logo,
    #homeFeed .publisher-logo,
    #homeFeed .post-avatar,
    #homeFeed .avatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        flex-basis: 38px !important;
        border-radius: 50% !important;
    }

    /* Keep the three-up swipeable Trending strip and rounded cards. */
    .trending-strip {
        grid-auto-columns: calc((100% - 24px) / 3) !important;
        grid-auto-flow: column !important;
        grid-template-columns: unset !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .trending-strip .trend-card {
        border-radius: 10px !important;
        overflow: hidden !important;
        scroll-snap-align: start !important;
    }
}

/* ==========================================================
   ExploreX centralized page styles
   Former inline styles from index.php are maintained here.
   ========================================================== */

/* Welcome screen: scoped so these rules do not affect the main app. */
html.ex-welcome-page { color-scheme: dark; }
            .ex-welcome, .ex-welcome * { box-sizing: border-box; }
            html.ex-welcome-page, body.ex-welcome-page { width:100%; height:100%; margin:0; }
            body.ex-welcome-page {
                overflow:hidden;
                background:#101522;
                color:#fff;
                font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
                -webkit-font-smoothing:antialiased;
            }
            .ex-welcome {
                position:relative;
                display:flex;
                flex-direction:column;
                align-items:center;
                width:100%;
                min-height:100%;
                height:100vh;
                height:100dvh;
                overflow:hidden;
                isolation:isolate;
                background:#101522;
            }
            .ex-welcome-cover {
                position:absolute;
                z-index:-2;
                inset:0;
                width:100%;
                height:100%;
                object-fit:cover;
                object-position:center;
            }
            .ex-welcome::before {
                content:"";
                position:absolute;
                z-index:-1;
                inset:0;
                background:linear-gradient(180deg,
                    rgba(7,14,31,.18) 0%,
                    rgba(7,12,27,.04) 35%,
                    rgba(7,10,20,.04) 59%,
                    rgba(4,7,15,.38) 78%,
                    rgba(3,5,12,.94) 100%);
                pointer-events:none;
            }
            .ex-welcome-brand {
                width:min(86%, 340px);
                max-height:88px;
                object-fit:contain;
                margin-top:clamp(42px, 9vh, 76px);
                filter:drop-shadow(0 2px 12px rgba(0,0,0,.16));
            }
            .ex-welcome-heading {
                /* Pull the title upward so it sits closer to / slightly overlaps the logo. */
                position:relative;
                z-index:1;
                margin:-9px 18px 0;
                font-size:clamp(34px, 9vw, 48px);
                line-height:1.06;
                letter-spacing:-1.7px;
                font-weight:800;
                text-align:center;
                text-shadow:0 2px 16px rgba(0,0,0,.15);
            }
            .ex-welcome-heading .ex-x {
                color:#7938ff;
                text-shadow:0 0 24px rgba(106,51,255,.35);
            }
            .ex-welcome-subtitle {
                position:relative;
                z-index:1;
                max-width:340px;
                margin:0 24px 0;
                transform:translateY(-7px);
                font-size:clamp(16px, 4.3vw, 18px);
                line-height:1.4;
                font-weight:450;
                text-align:center;
                color:rgba(255,255,255,.96);
                text-shadow:0 1px 8px rgba(0,0,0,.4);
            }
            .ex-welcome-spacer { flex:1 1 auto; min-height:16px; }
            .ex-welcome-actions {
                width:100%;
                padding:0 30px max(22px, env(safe-area-inset-bottom));
                display:flex;
                flex-direction:column;
                align-items:center;
                flex:0 0 auto;
            }
            .ex-welcome-start {
                display:flex;
                align-items:center;
                justify-content:center;
                gap:9px;
                width:100%;
                min-height:49px;
                border:0;
                border-radius:999px;
                background:linear-gradient(105deg,#1689ff 0%,#315bff 48%,#6424f5 100%);
                color:#fff;
                text-decoration:none;
                font-size:14px;
                font-weight:700;
                letter-spacing:.1px;
                box-shadow:0 8px 25px rgba(28,67,255,.24);
                -webkit-tap-highlight-color:transparent;
                transition:transform .18s ease,filter .18s ease;
            }
            .ex-welcome-start:hover { filter:brightness(1.08); }
            .ex-welcome-start:active { transform:scale(.985); }
            .ex-welcome-start svg { width:18px;height:18px; }
            .ex-welcome-signin {
                margin-top:17px;
                color:#fff;
                font-size:12px;
                line-height:1.4;
                text-align:center;
                text-shadow:0 1px 7px rgba(0,0,0,.7);
            }
            .ex-welcome-signin a {
                color:#fff;
                font-weight:750;
                text-decoration:none;
                margin-left:7px;
            }
            .ex-welcome-signin a:hover { text-decoration:underline; }
            @media (max-height:620px) {
                .ex-welcome-brand { margin-top:28px; max-height:62px; }
                .ex-welcome-heading { margin-top:-7px; font-size:34px; }
                .ex-welcome-subtitle { margin-top:0; transform:translateY(-5px); font-size:15px; }
                .ex-welcome-actions { padding-bottom:max(13px, env(safe-area-inset-bottom)); }
                .ex-welcome-signin { margin-top:11px; }
            }

/* Homepage feed responsive rules formerly embedded in index.php. */
/* Mobile feed: edge-to-edge Instagram-inspired layout */
/* Brand/profile marks should be circular; keep actual post and product media untouched. */
#homeFeed .home-product-logo,
#homeFeed .home-reel-avatar,
#homeFeed .home-comment-avatar,
#homeFeed .post-header img,
#homeFeed .post-user img,
#homeFeed .post-author img,
#homeFeed .author-avatar,
#homeFeed .user-avatar,
#homeFeed .profile-avatar,
#homeFeed .post-avatar,
#homeFeed .business-logo,
#homeFeed .business-logo img,
#homeFeed .profile-logo,
#homeFeed .profile-logo img,
#homeFeed .post-header .logo,
#homeFeed .post-header .avatar {
    border-radius: 50% !important;
    object-fit: cover !important;
    overflow: hidden;
}
.home-product-logo-link,
.home-reel-avatar {
    flex: 0 0 auto;
}
@media (max-width: 650px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    body { margin: 0; }
    .topic-pills {
        display: flex;
        gap: 18px;
        margin: 0 !important;
        padding: 10px 14px !important;
        overflow-x: auto;
        border-radius: 0 !important;
        scrollbar-width: none;
        white-space: nowrap;
    }
    .topic-pills::-webkit-scrollbar { display: none; }

    /* Keep the discovery banner, but remove rounded-card styling. */
    a.hero, .hero {
        display: block;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 12px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden;
    }
    .hero img {
        display: block;
        width: 100% !important;
        max-width: none !important;
        border-radius: 0 !important;
        object-fit: cover;
    }

    /* Trending: three rounded tiles visible at once, swipe horizontally for more. */
    .section-title {
        margin: 12px 14px 7px !important;
        padding: 0 !important;
    }
    .section-title h2 { font-size: 17px !important; }
    .trending-strip {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 2px 14px 12px !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-radius: 0 !important;
    }
    .trending-strip::-webkit-scrollbar { display: none; }
    .trend-card {
        flex: 0 0 calc((100% - 16px) / 3) !important;
        width: calc((100% - 16px) / 3) !important;
        min-width: calc((100% - 16px) / 3) !important;
        height: 104px !important;
        min-height: 104px !important;
        padding: 0 0 7px !important;
        margin: 0 !important;
        border: 1px solid #e7eaf0 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(20,35,60,.06) !important;
        background: #fff !important;
        overflow: hidden !important;
        scroll-snap-align: start;
        text-decoration: none !important;
    }
    .trend-card img,
    .trend-card-fallback {
        display: block;
        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
    .trend-label {
        display: block !important;
        width: 100%;
        padding: 6px 5px 0 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 650 !important;
        text-align: center !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .trend-label small { display: none !important; }
    .trend-card.is-selected {
        border-color: #1689ff !important;
        box-shadow: 0 0 0 1px #1689ff !important;
    }

    .feed-head {
        margin: 8px 14px 10px !important;
        padding: 0 !important;
    }
    .feed-head h2 { font-size: 18px !important; }
    #homeFeed {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    #homeFeed > .post,
    #homeFeed .post,
    #homeFeed article.post,
    #homeFeed .home-product-post,
    #homeFeed .home-reel-post {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff;
        overflow: hidden;
    }
    #homeFeed .post-header,
    #homeFeed .home-product-heading {
        padding: 10px 12px !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    /* Keep post/media photos square-edged, but never flatten profile/business logos. */
    #homeFeed img:not(.home-product-logo):not(.home-reel-avatar):not(.home-comment-avatar):not(.author-avatar):not(.user-avatar):not(.profile-avatar):not(.post-avatar):not(.business-logo):not(.profile-logo):not(.logo):not(.avatar) {
        border-radius: 0 !important;
    }

    /* News and blog author/business logos must remain perfectly circular. */
    #homeFeed .post-header img,
    #homeFeed .post-user img,
    #homeFeed .post-author img,
    #homeFeed .author-avatar,
    #homeFeed .user-avatar,
    #homeFeed .profile-avatar,
    #homeFeed .post-avatar,
    #homeFeed .business-logo,
    #homeFeed .business-logo img,
    #homeFeed .profile-logo,
    #homeFeed .profile-logo img,
    #homeFeed .post-header .logo,
    #homeFeed .post-header .avatar,
    #homeFeed img.home-product-logo,
    #homeFeed img.home-reel-avatar {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        flex: 0 0 48px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        overflow: hidden !important;
    }
    #homeFeed .home-product-logo-link,
    #homeFeed .post-header a:has(img),
    #homeFeed .post-user a:has(img),
    #homeFeed .post-author a:has(img) {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        flex: 0 0 48px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }
    /* Images use the full viewport width instead of a boxed media area. */
    #homeFeed .post-media,
    #homeFeed .post-image,
    #homeFeed .post-image-wrap,
    #homeFeed .post-media-wrap,
    #homeFeed .media,
    #homeFeed .post-content img:not(.author-avatar):not(.user-avatar):not(.profile-avatar):not(.post-avatar):not(.business-logo):not(.profile-logo),
    #homeFeed .home-product-media,
    #homeFeed .home-reel-stage {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden;
    }
    #homeFeed .post-media img,
    #homeFeed .post-image img,
    #homeFeed .post-image-wrap img,
    #homeFeed .post-media-wrap img,
    #homeFeed .media img,
    #homeFeed .post-content img:not(.author-avatar):not(.user-avatar):not(.profile-avatar):not(.post-avatar):not(.business-logo):not(.profile-logo),
    #homeFeed .home-product-media img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
    #homeFeed .home-reel-stage {
        height: min(78vh, 680px) !important;
        min-height: 420px;
        background: #000;
    }
    #homeFeed .home-reel-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    #homeFeed .home-feed-actions {
        display: flex;
        gap: 20px;
        padding: 10px 12px 12px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    #homeFeed .home-product-info { padding: 8px 12px !important; }
    #homeFeed .home-product-link { display: block; border-radius: 0 !important; }
    .sector-filter-active { margin: 8px 14px !important; border-radius: 0 !important; }
    .home-comment-backdrop { padding: 0 !important; }
    .home-comment-dialog { border-radius: 0 !important; }
}
    /* Match editorial images to the product image: edge-to-edge, natural aspect ratio. */
    @media (max-width: 650px) {
        #homeFeed .home-feed-news .post-image,
        #homeFeed .home-feed-article .post-image,
        #homeFeed .home-feed-blog .post-image,
        #homeFeed .home-feed-news .post-image-wrap,
        #homeFeed .home-feed-article .post-image-wrap,
        #homeFeed .home-feed-blog .post-image-wrap,
        #homeFeed .home-feed-news .post-media,
        #homeFeed .home-feed-article .post-media,
        #homeFeed .home-feed-blog .post-media,
        #homeFeed .home-feed-news .post-media-wrap,
        #homeFeed .home-feed-article .post-media-wrap,
        #homeFeed .home-feed-blog .post-media-wrap {
            display:block !important;
            width:100% !important;
            max-width:100% !important;
            height:auto !important;
            max-height:none !important;
            margin:0 !important;
            padding:0 !important;
            overflow:hidden !important;
            box-sizing:border-box !important;
        }
        #homeFeed .home-feed-news .post-image img,
        #homeFeed .home-feed-article .post-image img,
        #homeFeed .home-feed-blog .post-image img,
        #homeFeed .home-feed-news .post-image-wrap img,
        #homeFeed .home-feed-article .post-image-wrap img,
        #homeFeed .home-feed-blog .post-image-wrap img,
        #homeFeed .home-feed-news .post-media img,
        #homeFeed .home-feed-article .post-media img,
        #homeFeed .home-feed-blog .post-media img,
        #homeFeed .home-feed-news .post-media-wrap img,
        #homeFeed .home-feed-article .post-media-wrap img,
        #homeFeed .home-feed-blog .post-media-wrap img {
            display:block !important;
            width:100% !important;
            min-width:100% !important;
            max-width:100% !important;
            height:auto !important;
            max-height:none !important;
            margin:0 !important;
            padding:0 !important;
            object-fit:contain !important;
            border-radius:0 !important;
        }
        /* Circular masks only for author/business logos, never post media. */
        #homeFeed .post-header img,
        #homeFeed .post-user img,
        #homeFeed .post-author img,
        #homeFeed .author-avatar,
        #homeFeed .user-avatar,
        #homeFeed .profile-avatar,
        #homeFeed .post-avatar,
        #homeFeed .business-logo,
        #homeFeed .profile-logo,
        #homeFeed .home-product-logo,
        #homeFeed .home-reel-avatar {
            border-radius:50% !important;
            object-fit:cover !important;
            flex-shrink:0 !important;
        }
        #homeFeed .post-header img,
        #homeFeed .post-user img,
        #homeFeed .post-author img,
        #homeFeed .author-avatar,
        #homeFeed .user-avatar,
        #homeFeed .profile-avatar,
        #homeFeed .post-avatar,
        #homeFeed .business-logo,
        #homeFeed .profile-logo {
            width:48px !important;
            height:48px !important;
            min-width:48px !important;
            max-width:48px !important;
            aspect-ratio:1 / 1 !important;
            overflow:hidden !important;
        }
    }

/* ==========================================================
   OCT 24 HOTFIX: reels have square corners; blog/news images
   use the full available width and retain their natural ratio.
   Keep last to override older conflicting mobile rules.
   ========================================================== */
#homeFeed .home-reel-post,
#homeFeed .home-reel-post .home-reel-stage,
#homeFeed .home-reel-post .home-reel-stage > video,
#homeFeed .home-reel-post video.home-reel-video {
    border-radius: 0 !important;
}
#homeFeed .home-reel-post .home-reel-stage {
    overflow: hidden !important;
}

@media (max-width: 650px) {
    #homeFeed .home-feed-news .post-image,
    #homeFeed .home-feed-article .post-image,
    #homeFeed .home-feed-blog .post-image,
    #homeFeed .home-feed-news .post-image-wrap,
    #homeFeed .home-feed-article .post-image-wrap,
    #homeFeed .home-feed-blog .post-image-wrap,
    #homeFeed .home-feed-news .post-media-wrap,
    #homeFeed .home-feed-article .post-media-wrap,
    #homeFeed .home-feed-blog .post-media-wrap,
    #homeFeed .home-feed-news .media,
    #homeFeed .home-feed-article .media,
    #homeFeed .home-feed-blog .media {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    #homeFeed .home-feed-news img.post-media,
    #homeFeed .home-feed-article img.post-media,
    #homeFeed .home-feed-blog img.post-media,
    #homeFeed .home-feed-news .post-image img,
    #homeFeed .home-feed-article .post-image img,
    #homeFeed .home-feed-blog .post-image img,
    #homeFeed .home-feed-news .post-image-wrap img,
    #homeFeed .home-feed-article .post-image-wrap img,
    #homeFeed .home-feed-blog .post-image-wrap img,
    #homeFeed .home-feed-news .post-media-wrap img,
    #homeFeed .home-feed-article .post-media-wrap img,
    #homeFeed .home-feed-blog .post-media-wrap img,
    #homeFeed .home-feed-news .media img,
    #homeFeed .home-feed-article .media img,
    #homeFeed .home-feed-blog .media img {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        object-position: center !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }
}


/* ExploreX mobile bottom navigation: black bar, white icons, no labels */
@media (max-width: 768px) {
  .exx-mobile-nav, nav.mobile-nav.exx-mobile-nav {
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
    border-top: 1px solid #242424 !important;
    box-shadow: 0 -5px 22px rgba(0,0,0,.35) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .exx-mobile-nav a,
  .exx-mobile-nav a:link,
  .exx-mobile-nav a:visited,
  .exx-mobile-nav a.active,
  .exx-mobile-nav a:hover,
  .exx-mobile-nav a:active,
  .exx-mobile-nav a:focus,
  .exx-mobile-nav a:focus-visible {
    color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  .exx-mobile-nav .mobile-nav-item > span { display: none !important; }
  .exx-mobile-nav .mobile-nav-item svg,
  .exx-mobile-nav a svg {
    color: #fff !important;
    stroke: #fff !important;
  }
  .exx-mobile-nav .mobile-profile-logo { border-color: #444 !important; }
}


/* ==========================================================
   ExploreX COLORFUL DESKTOP THEME
   Replaces the forced black desktop override with a bright,
   reference-inspired blue / violet / pink background.
   Mobile and tablet styles remain unchanged.
   ========================================================== */
@media (min-width: 1051px) {
  :root {
    --bg: #f3f6ff !important;
    --card: #ffffff !important;
    --ink: #14213d !important;
    --muted: #71809c !important;
    --line: #e7ecf7 !important;
    --soft: #edf2ff !important;
    --shadow: 0 10px 30px rgba(43, 70, 130, .09) !important;
  }

  html, body {
    background:
      radial-gradient(ellipse at 8% 18%, rgba(93, 190, 255, .20), transparent 34%),
      radial-gradient(ellipse at 86% 28%, rgba(153, 125, 255, .18), transparent 32%),
      radial-gradient(ellipse at 28% 92%, rgba(255, 171, 207, .18), transparent 30%),
      linear-gradient(135deg, #f7fbff 0%, #f2f4ff 52%, #fff7fb 100%) !important;
    color: #14213d !important;
  }

  .layout, .side, .center, .right-rail {
    background: transparent !important;
    color: #14213d !important;
  }

  .center {
    border-left-color: rgba(218, 226, 244, .75) !important;
    border-right-color: rgba(218, 226, 244, .75) !important;
  }

  .center .topbar, .center > .topbar {
    background: rgba(255, 255, 255, .90) !important;
    color: #14213d !important;
    border-bottom: 1px solid rgba(225, 231, 245, .9) !important;
    box-shadow: 0 5px 24px rgba(39, 58, 110, .06) !important;
    backdrop-filter: blur(18px) !important;
  }

  .topbar .brand, .topbar .ex-mobile-brand,
  .topbar .top-icon, .topbar .ex-header-btn {
    color: #172746 !important;
  }

  .topbar .search-form, .search-form, .search-results {
    background: #f2f5fb !important;
    color: #172746 !important;
    border-color: #e5eaf5 !important;
  }

  .topbar .search-form input, .search-form input {
    background: transparent !important;
    color: #172746 !important;
  }

  .topbar .search-form input::placeholder,
  .search-form input::placeholder {
    color: #8190aa !important;
  }

  .side-nav a { color: #31415f !important; }
  .side-nav a.active, .side-nav a:hover {
    background: linear-gradient(110deg, #0ba5f5 0%, #5264ff 56%, #7851f7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(72, 99, 255, .20) !important;
  }

  .side-note, .post, .rail-card, .simple-list, .form-card,
  .page-card, .settings-card, .modal-content, .dropdown-menu,
  .home-comment-dialog, .home-comment-form {
    background: rgba(255, 255, 255, .96) !important;
    color: #172746 !important;
    border-color: #e7ecf7 !important;
    box-shadow: 0 8px 26px rgba(43, 70, 130, .07) !important;
  }

  .post-owner b, .section-title h2, .feed-head h2,
  .rail-card h3, .side-note b, .page-title, label,
  .list-row b, .post-text, .post-actions,
  .creator-info b, .search-result-title, .home-comment-item p {
    color: #172746 !important;
  }

  .post-owner small, .feed-head .muted, .rail-card p,
  .creator-info small, .search-result-meta, .page-intro,
  .side-note, .footer-mini {
    color: #71809c !important;
  }

  .topic-pills a {
    background: rgba(255,255,255,.92) !important;
    color: #51617e !important;
    box-shadow: 0 3px 12px rgba(43,70,130,.05) !important;
  }
  .topic-pills a.active {
    background: linear-gradient(110deg,#0ba5f5,#6254ff) !important;
    color: #fff !important;
  }

  .creator, .list-row { border-bottom-color: #e9edf6 !important; }
  .follow-btn {
    background: #f5f3ff !important;
    color: #5a43e8 !important;
    border-color: #dcd6ff !important;
  }

  input, textarea, select {
    background: #ffffff !important;
    color: #172746 !important;
    border-color: #dfe6f3 !important;
  }
  input::placeholder, textarea::placeholder { color: #8b98b0 !important; }

  .mobile-nav, .exx-mobile-nav { background: #fff !important; }
}

/* ==========================================================
   CSS migrated from the shared ExploreX PHP header
   Kept at the end to preserve the original inline-style cascade.
   ========================================================== */
.page-title{font-size:23px;letter-spacing:-.6px;margin:12px 4px 16px}
.page-intro{color:#748097;font-size:12px;line-height:1.6;margin:0 4px 16px}
.page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.page-grid .post{margin:0}
.simple-list{background:#fff;border:1px solid #edf0f6;border-radius:16px;padding:8px 13px}
.list-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #f0f1f6}.list-row:last-child{border-bottom:0}.list-row .grow{flex:1;min-width:0}.list-row b{font-size:12px;display:block}.list-row small{font-size:10px;color:#748097;display:block;margin-top:4px}
.profile-cover{height:190px;border-radius:16px;background-size:cover;background-position:center}.profile-summary{display:flex;align-items:center;gap:12px;margin-top:-24px;padding:0 14px;position:relative}.profile-summary .avatar{width:70px;height:70px;border:4px solid #fff}.profile-stats{display:flex;justify-content:space-around;padding:18px 0;text-align:center}.profile-stats b{display:block;font-size:17px}.profile-stats small{font-size:10px;color:#748097}
.form-card{background:#fff;border:1px solid #edf0f6;border-radius:16px;padding:16px}.form-card input,.form-card textarea,.form-card select{width:100%;border:1px solid #e7eaf2;border-radius:10px;padding:12px;margin:5px 0 12px;background:#fff}.primary-btn{border:0;border-radius:24px;background:linear-gradient(120deg,#297cff,#5c32fa);color:#fff;font-weight:800;padding:12px 20px}
/* ExploreX shared header: deliberately scoped so it does not override feed cards/layout. */
.ex-header-tools{display:flex;align-items:center;gap:8px;margin-left:4px;flex-shrink:0}.ex-header-btn{position:relative;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #273044;border-radius:12px;background:#101522;color:#fff;font-size:20px;cursor:pointer;text-decoration:none}.ex-header-btn:hover{background:#1a2335}.ex-header-btn .ex-count{position:absolute;right:-4px;top:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:20px;background:#ff3152;color:#fff;font-size:9px;line-height:16px;text-align:center;border:1px solid #080b14}.ex-mobile-brand{display:none}.topbar{position:relative;z-index:25}
.ex-logo-glow{display:inline-flex;align-items:center;font-weight:950;letter-spacing:-1.3px;color:#fff;text-decoration:none;white-space:nowrap}.ex-logo-glow span{color:#48a5ff;text-shadow:0 0 7px #168dff,0 0 16px #168dff,0 0 27px #168dff}
.ex-drawer-overlay{position:fixed;inset:0;background:rgba(1,5,14,.68);backdrop-filter:blur(5px);z-index:1000;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}.ex-drawer-overlay.show{opacity:1;visibility:visible}.ex-side-drawer{position:fixed;z-index:1001;top:0;right:0;width:min(390px,88vw);height:100dvh;overflow:auto;background:#0b1020;color:#f5f7ff;border-left:1px solid #26334d;box-shadow:-20px 0 70px #0008;padding:20px 18px 28px;transform:translateX(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);visibility:hidden}.ex-side-drawer.open{transform:translateX(0);visibility:visible}.ex-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:4px 0 18px;border-bottom:1px solid #222b40}.ex-drawer-close{border:1px solid #2b3550;background:#141b2b;color:#fff;border-radius:11px;width:38px;height:38px;font-size:24px;cursor:pointer}.ex-drawer-user{display:flex;align-items:center;gap:12px;padding:17px 2px}.ex-drawer-avatar{width:43px;height:43px;border-radius:50%;object-fit:cover;background:#1e2b43;border:1px solid #3b4b6c}.ex-drawer-user strong{display:block;font-size:13px}.ex-drawer-user small{display:block;color:#9ba9c4;font-size:11px;margin-top:3px}.ex-pwa-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 16px}.ex-pwa-btn{border:1px solid #2d3d5d;border-radius:12px;background:linear-gradient(135deg,#17233a,#11192b);color:#fff;font-weight:750;padding:11px 9px;font-size:11px;cursor:pointer}.ex-drawer-label{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:#8292b1;font-weight:900;margin:18px 8px 7px}.ex-drawer-links{display:grid;gap:4px}.ex-drawer-links a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;color:#dce5f7;font-size:13px;font-weight:650;text-decoration:none}.ex-drawer-links a:hover,.ex-drawer-links a.active{background:#172641;color:#74b8ff}.ex-drawer-links .ex-link-icon{width:22px;text-align:center;font-size:17px;color:#80baff}.ex-drawer-foot{border-top:1px solid #222b40;margin-top:17px;padding-top:14px;color:#8493ae;font-size:10px;line-height:1.6}
@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:0!important}.layout>.side{display:none!important}.center{border-left:0!important;border-right:0!important;padding-left:10px!important;padding-right:10px!important}.right-rail{display:none!important}.topbar{padding:0 2px!important;gap:8px!important}.topbar>.brand{display:none}.ex-mobile-brand{display:inline-flex;font-size:22px;margin-right:auto}.search-form{width:min(260px,47%)!important}.ex-header-tools{gap:6px}.ex-header-btn{width:35px;height:35px;border-radius:11px}}
@media(max-width:650px){.page-title{font-size:21px;margin:12px 8px}.page-intro{margin:0 8px 14px}.page-grid{grid-template-columns:1fr}.profile-cover{height:155px}.topbar{height:60px!important}.search-form{width:min(190px,43%)!important;height:36px!important}.ex-mobile-brand{font-size:20px}.ex-header-btn{width:33px;height:33px;font-size:18px}.ex-header-tools{gap:5px}}
@media(min-width:901px){.ex-mobile-brand{display:none}}

/* Final ExploreX header correction */
.topbar{
  height:64px!important; padding:0 14px!important; gap:12px!important;
  background:#ffffff!important; color:#10131b!important;
  border-bottom:1px solid #edf0f6!important;
  box-shadow:0 5px 22px rgba(29,43,79,.055)!important;
}
.topbar .brand,.topbar .ex-mobile-brand{color:#10131b!important;text-shadow:none!important}
.ex-image-brand{display:inline-flex!important;align-items:center;flex-shrink:0}
.ex-image-brand img{display:block;width:135px;height:auto;max-height:48px;object-fit:contain}
@media(max-width:900px){.ex-image-brand img{width:125px;max-height:44px}}
@media(max-width:650px){.ex-image-brand img{width:115px;max-height:42px}}
.topbar .brand span,.topbar .ex-mobile-brand span{color:#4d9cff!important;text-shadow:none!important}
.topbar .search-form{background:#111827!important;border:1px solid #29354b!important;border-radius:13px!important;color:#fff!important}
.topbar .search-form input{background:transparent!important;color:#f8fafc!important}
.topbar .search-form input::placeholder{color:#9aa8bf!important}
.topbar .search-icon{color:#9cb9e9!important}
.topbar .ex-header-btn{background:#fff!important;border:1px solid #e1e6ef!important;color:#202638!important;box-shadow:0 2px 8px rgba(29,43,79,.06)!important}
.topbar .ex-header-btn:hover{background:#f5f7fb!important;border-color:#b9c9e6!important}
.topbar .search-results{color:#10131b}
.ex-drawer-overlay{z-index:10000!important}
.ex-side-drawer{z-index:10001!important}
body.menu-open{overflow:hidden!important}
@media(max-width:900px){
 .topbar{margin:0 -10px!important;padding:0 12px!important;border-radius:0!important}
 .center{padding-top:0!important}
}
@media(max-width:650px){
 .topbar{height:56px!important;gap:7px!important;padding:0 10px!important}
 .topbar .search-form{width:min(44vw,210px)!important;min-width:100px!important}
 .topbar .ex-mobile-brand{font-size:21px!important}
}


/* Full-screen split navigation matching the supplied ExploreX reference */
.ex-drawer-overlay{background:rgba(0,0,0,.35)!important;backdrop-filter:none!important;z-index:10000!important}
.ex-side-drawer{inset:0!important;top:0!important;right:0!important;width:100%!important;height:100vh!important;height:100dvh!important;max-width:none!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important;display:grid!important;grid-template-columns:45% 55%!important;background:#000!important;transform:none!important;visibility:hidden!important;pointer-events:none!important;transition:visibility .45s!important}
.ex-side-drawer.open{visibility:visible!important;pointer-events:auto!important}
.ex-menu-photo{position:relative;min-width:0;height:100%;background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),url('https://explorex.me/assets/cover.png');background-size:cover;background-position:center;transform:translateX(-100%);transition:transform .75s cubic-bezier(.76,0,.24,1)}
.ex-menu-photo:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.08)}
.ex-photo-logo{position:absolute;z-index:2;top:34px;left:40px;display:block}.ex-photo-logo img{width:155px;height:auto;display:block;object-fit:contain}
.ex-menu-panel{position:relative;min-width:0;height:100%;overflow-y:auto;background:#000;color:#eee;padding:170px clamp(35px,7vw,100px) 35px;transform:translateX(100%);transition:transform .75s cubic-bezier(.76,0,.24,1)}
.ex-side-drawer.open .ex-menu-photo,.ex-side-drawer.open .ex-menu-panel{transform:translateX(0)}
.ex-menu-panel:before{content:"";position:absolute;top:70px;left:clamp(35px,7vw,100px);right:clamp(35px,7vw,100px);height:1px;background:rgba(255,255,255,.13)}
.ex-drawer-close{position:absolute!important;top:18px!important;right:25px!important;width:45px!important;height:45px!important;border:0!important;background:transparent!important;color:#ddd!important;border-radius:0!important;font-size:38px!important;font-weight:200!important;line-height:1!important;cursor:pointer;z-index:5}
.ex-menu-install{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 0 24px;border-bottom:1px solid rgba(255,255,255,.13)}
.ex-menu-install-label strong{display:block;color:#eee;font-size:13px;font-weight:700}.ex-menu-install-label small{display:block;color:#8c9ab0;font-size:10px;margin-top:4px}
.ex-menu-install-buttons{display:flex;gap:8px;flex-shrink:0}.ex-device-btn{width:53px;height:53px;border:1px solid #777;border-radius:16px;background:#111;color:#eee;font-size:25px;cursor:pointer}.ex-device-btn:hover{background:#222;border-color:#ddd}
.ex-menu-section-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#a58d57;margin:28px 0 22px}
.ex-menu-links{display:flex;flex-direction:column;align-items:flex-start;gap:0}.ex-menu-links a{display:block!important;padding:0!important;margin:0 0 6px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#dedede!important;text-decoration:none!important;font-size:clamp(25px,2.7vw,38px)!important;font-weight:400!important;line-height:1.24!important;letter-spacing:-1.1px;transition:color .2s,transform .2s}.ex-menu-links a:hover{color:#fff!important;transform:translateX(5px)}.ex-menu-links .ex-link-icon{display:none!important}.ex-media-title{margin-top:42px}.ex-media-links a{font-size:clamp(25px,2.7vw,38px)!important}
@media(max-width:768px){.ex-side-drawer{grid-template-columns:1fr!important}.ex-menu-photo{display:none}.ex-menu-panel{padding:135px 28px 30px;transform:translateX(100%)}.ex-menu-panel:before{top:85px;left:28px;right:28px}.ex-drawer-close{right:15px!important;top:14px!important}.ex-menu-install{align-items:flex-start;flex-direction:column}.ex-device-btn{width:48px;height:48px}.ex-menu-links a,.ex-media-links a{font-size:32px!important}.ex-menu-section-title{margin-top:24px}}
@media(max-width:420px){.ex-menu-panel{padding-left:22px;padding-right:22px}.ex-menu-panel:before{left:22px;right:22px}.ex-menu-links a,.ex-media-links a{font-size:29px!important}}


/* Full-width fixed header + content begins below it */
html body .topbar,
html body .center > .topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  z-index: 900 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}
html body .layout {
  padding-top: 64px !important;
}
@media (min-width:1051px) {
  html body .layout { height: 100vh !important; }
  html body .layout > .side {
    top: 64px !important;
    height: calc(100vh - 64px) !important;
  }
  html body .layout > .center {
    height: calc(100vh - 64px) !important;
    min-height: 0 !important;
  }
  html body .layout > .right-rail {
    top: 64px !important;
    height: calc(100vh - 64px) !important;
    padding-top: 14px !important;
  }
}
@media (min-width:651px) and (max-width:1050px) {
  html body .layout > .side {
    top: 64px !important;
    height: calc(100vh - 64px) !important;
  }
  html body .layout > .center {
    height: calc(100vh - 64px) !important;
  }
}
@media (max-width:900px) {
  html body .topbar,
  html body .center > .topbar {
    height: 56px !important;
    padding: 0 12px !important;
  }
  html body .layout { padding-top: 56px !important; }
}
@media (max-width:650px) {
  html body .layout { padding-top: 56px !important; }
  html body .layout > .center {
    height: auto !important;
    min-height: calc(100vh - 56px) !important;
  }
}

/* Header refinements: show exactly one logo at the top-left */
.topbar{display:flex!important;align-items:center!important;justify-content:flex-start!important;background:#fff!important;color:#10131b!important}
.topbar > a.brand.ex-image-brand:first-child{display:inline-flex!important;align-items:center!important;margin-right:auto!important}
.topbar > .ex-mobile-brand{display:none!important}
.layout > .side > a.brand.ex-image-brand{display:none!important}
.topbar .ex-header-tools{margin-left:auto!important}
.topbar .search-form,.topbar .search-results{display:none!important}
.topbar .ex-image-brand img{content:none!important}

/* Theme preference: menu content moves upward; close button position is unchanged. */
.ex-menu-panel{padding-top:125px!important}
.ex-menu-panel:before{top:55px!important}
.ex-theme-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 8px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.ex-theme-copy strong{display:block;color:#f5f7ff;font-size:13px;font-weight:750}
.ex-theme-copy small{display:block;color:#a4afc4;font-size:10px;margin-top:4px}
.ex-theme-switch{position:relative;display:inline-flex;align-items:center;width:54px;height:30px;flex:0 0 54px;border:1px solid #64748b;border-radius:30px;background:#e8edf5;padding:3px;cursor:pointer;transition:background .2s,border-color .2s}
.ex-theme-switch:after{content:"";width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 5px #0003;transform:translateX(0);transition:transform .2s}
.ex-theme-switch[aria-checked="true"]{background:#4f46e5;border-color:#818cf8}
.ex-theme-switch[aria-checked="true"]:after{transform:translateX(24px);background:#111827}
.ex-theme-switch:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}
@media(max-width:768px){.ex-menu-panel{padding-top:105px!important}.ex-menu-panel:before{top:65px!important}}
/* Global Dark theme, applied only when the saved user preference is dark. */
html[data-theme="dark"]{color-scheme:dark;--bg:#0b1020;--card:#111827;--ink:#f3f6fc;--muted:#a0aec4;--line:#263149;--soft:#172033;--shadow:0 5px 22px rgba(0,0,0,.22)}
html[data-theme="dark"] body{background:var(--bg)!important;color:var(--ink)!important}
html[data-theme="dark"] .center{background:var(--bg)!important;border-color:#202b40!important}
html[data-theme="dark"] .topbar .brand,html[data-theme="dark"] .topbar .ex-mobile-brand{color:#f8fafc!important}
html[data-theme="dark"] .topbar .ex-header-btn{background:#111827!important;border-color:#2b3851!important;color:#f8fafc!important}
html[data-theme="dark"] .topic-pills a{background:#172033!important;color:#c8d2e5!important}
html[data-theme="dark"] .topic-pills a.active{background:linear-gradient(120deg,#297cff,#5c32fa)!important;color:#fff!important}
html[data-theme="dark"] .post,html[data-theme="dark"] .rail-card,html[data-theme="dark"] .side-note,html[data-theme="dark"] .simple-list,html[data-theme="dark"] .form-card{background:#111827!important;color:#f3f6fc!important;border-color:#263149!important}
html[data-theme="dark"] .post-owner b,html[data-theme="dark"] .section-title h2,html[data-theme="dark"] .feed-head h2,html[data-theme="dark"] .rail-card h3,html[data-theme="dark"] .side-note b{color:#f3f6fc!important}
html[data-theme="dark"] .side-nav a{color:#b7c3d8!important}
html[data-theme="dark"] .side-nav a.active,html[data-theme="dark"] .side-nav a:hover{background:#242044!important;color:#b9a8ff!important}
html[data-theme="dark"] .search-form,html[data-theme="dark"] .topbar .search-form{background:#111827!important;border-color:#334155!important}
html[data-theme="dark"] .search-form input{color:#f8fafc!important}
html[data-theme="dark"] .search-results,html[data-theme="dark"] .search-result:hover{background:#111827!important;color:#f3f6fc!important;border-color:#263149!important}
html[data-theme="dark"] .search-result-title{color:#f3f6fc!important}
html[data-theme="dark"] .follow-btn{background:#111827!important;color:#c4b5fd!important;border-color:#6255a8!important}
html[data-theme="dark"] .mobile-nav{background:rgba(11,16,32,.97)!important;border-color:#263149!important}
html[data-theme="dark"] .mobile-nav a{color:#a0aec4!important}
html[data-theme="dark"] .mobile-nav a.active{color:#b9a8ff!important}
html[data-theme="dark"] .profile-summary .avatar{border-color:#111827!important}
html[data-theme="dark"] .form-card input,html[data-theme="dark"] .form-card textarea,html[data-theme="dark"] .form-card select{background:#0b1020!important;color:#f3f6fc!important;border-color:#334155!important}


/* Theme toggle UI + menu positioning */
.ex-menu-panel{padding-top:125px!important}
.ex-menu-panel:before{top:55px!important}
.ex-theme-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 8px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.ex-theme-copy strong{display:block;color:#f5f7ff;font-size:13px;font-weight:750}
.ex-theme-copy small{display:block;color:#a4afc4;font-size:10px;margin-top:4px}
.ex-theme-switch{position:relative;display:inline-flex;align-items:center;width:54px;height:30px;flex:0 0 54px;border:1px solid #64748b;border-radius:30px;background:#e8edf5;padding:3px;cursor:pointer;transition:background .2s,border-color .2s}
.ex-theme-switch:after{content:"";width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 5px #0003;transform:translateX(0);transition:transform .2s}
.ex-theme-switch[aria-checked="true"]{background:#4f46e5;border-color:#818cf8}
.ex-theme-switch[aria-checked="true"]:after{transform:translateX(24px);background:#111827}
.ex-theme-switch:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}
@media(max-width:768px){.ex-menu-panel{padding-top:105px!important}.ex-menu-panel:before{top:65px!important}}

/* ExploreX desktop: match index.php's light, colorful discovery layout.
   Mobile black header rules remain unchanged below. */
@media (min-width: 1051px) {
  html, html body,
  html body .layout,
  html body .layout > .side,
  html body .layout > .center,
  html body .layout > .right-rail {
    background: #f4f7ff !important;
    color: #122345 !important;
  }

  html body,
  html body .layout {
    background-image:
      radial-gradient(ellipse at 72% 32%, rgba(132,166,255,.20), transparent 34%),
      radial-gradient(ellipse at 9% 77%, rgba(255,185,211,.23), transparent 30%) !important;
  }

  html body .layout > .side,
  html body .layout > .center,
  html body .layout > .right-rail {
    background: transparent !important;
  }

  html body .topbar,
  html body .center > .topbar {
    background: rgba(255,255,255,.96) !important;
    color: #14264a !important;
    border-color: #edf1fa !important;
    box-shadow: 0 3px 20px rgba(29,54,104,.06) !important;
  }

  html body .topbar .brand,
  html body .topbar .ex-mobile-brand {
    color: #10131b !important;
  }

  html body .topbar .ex-header-btn {
    background: #f5f7fc !important;
    color: #18335e !important;
    border-color: #edf1fa !important;
    box-shadow: none !important;
  }

  html body .post,
  html body article.post,
  html body .rail-card,
  html body .side-note,
  html body .simple-list,
  html body .form-card {
    background: #ffffff !important;
    color: #122345 !important;
    border-color: #edf1fa !important;
  }

  html body .post h1,
  html body .post h2,
  html body .post h3,
  html body .section-title h2,
  html body .feed-head h2,
  html body .page-title,
  html body .side-note b,
  html body .rail-card h3 {
    color: #122345 !important;
  }

  html body .form-card input,
  html body .form-card textarea,
  html body .form-card select {
    background: #ffffff !important;
    color: #122345 !important;
    border-color: #e7eaf2 !important;
  }

  html body .topbar .search-form {
    background: #f0f3f9 !important;
    border-color: #eef1f8 !important;
    color: #22395f !important;
  }
  html body .topbar .search-form input { color: #17294c !important; }
  html body .topbar .search-form input::placeholder { color: #8492ad !important; }
}

/* Menu button: normal white with black lines; hover inverts to black with white lines. */
.topbar .ex-menu-header-btn,
.topbar .ex-menu-header-btn:focus-visible {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}
.topbar .ex-menu-header-btn span {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
.topbar .ex-menu-header-btn:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
.topbar .ex-menu-header-btn:hover span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.ex-profile-header-btn { overflow: hidden; padding: 0 !important; }
.ex-profile-header-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ex-profile-fallback { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; }
.ex-profile-fallback svg { width: 21px; height: 21px; display:block; }
.ex-profile-header-btn .ex-business-profile-logo,
.ex-profile-header-btn .ex-user-profile-image { display: none !important; }
@media (min-width: 1051px) {
  .ex-profile-header-btn .ex-business-profile-logo { display: block !important; }
  .ex-profile-header-btn .ex-desktop-profile-fallback { display: inline-flex; }
  .ex-profile-header-btn .ex-mobile-profile-fallback { display: none !important; }
  .ex-profile-header-btn .ex-user-profile-image { display: none !important; }
}
@media (max-width: 1050px) {
  .ex-profile-header-btn .ex-business-profile-logo { display: none !important; }
  .ex-profile-header-btn .ex-desktop-profile-fallback { display: none !important; }
  .ex-profile-header-btn .ex-user-profile-image { display: block !important; }
  .ex-profile-header-btn .ex-mobile-profile-fallback { display: inline-flex; }
}

/* Desktop menu drawer: white panel to match the light index.php theme. Mobile remains unchanged. */
@media (min-width: 1051px) {
  html body .ex-side-drawer { background: #ffffff !important; color: #122345 !important; }
  html body .ex-menu-panel { background: #ffffff !important; color: #122345 !important; }
  html body .ex-menu-panel:before { background: rgba(18,35,69,.14) !important; }
  html body .ex-drawer-close { color: #122345 !important; }
  html body .ex-menu-install { border-bottom-color: rgba(18,35,69,.14) !important; }
  html body .ex-menu-install-label strong { color: #122345 !important; }
  html body .ex-menu-install-label small { color: #64748b !important; }
  html body .ex-device-btn { background: #f5f7fc !important; color: #18335e !important; border-color: #dbe3f0 !important; }
  html body .ex-device-btn:hover { background: #e8eef9 !important; border-color: #b8c7df !important; }
  html body .ex-menu-section-title { color: #8b6b25 !important; }
  html body .ex-menu-links a { color: #243b60 !important; }
  html body .ex-menu-links a:hover { color: #2563eb !important; }
  html body .ex-theme-row { border-top-color: rgba(18,35,69,.14) !important; border-bottom-color: rgba(18,35,69,.14) !important; }
  html body .ex-theme-copy strong { color: #122345 !important; }
  html body .ex-theme-copy small { color: #64748b !important; }
}

@media(max-width:900px){
  .topbar{position:relative!important;top:auto!important}
}
.ex-theme-row{display:none!important}

/* Mobile header: black background and normal document flow (scrolls with page). */
@media (max-width: 768px) {
  html body .topbar,
  html body .center > .topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    z-index: 25 !important;
  }

  html body .topbar .brand,
  html body .topbar .ex-mobile-brand,
  html body .topbar .ex-logo-glow {
    color: #ffffff !important;
  }

  html body .topbar .ex-header-btn {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
    box-shadow: none !important;
  }

  html body .topbar .ex-header-btn:hover {
    background: #202020 !important;
    border-color: #555555 !important;
  }

  html body .layout {
    padding-top: 0 !important;
  }

  html body .layout > .center {
    padding-top: 0 !important;
  }
}

/* Final menu hover colors; stronger than shared theme button rules. */
@media (min-width: 901px) {
  html body .topbar .ex-menu-header-btn { background:#fff !important; color:#000 !important; border-color:#cbd5e1 !important; }
  html body .topbar .ex-menu-header-btn span { color:#000 !important; -webkit-text-fill-color:#000 !important; }
  html body .topbar .ex-menu-header-btn:hover { background:#000 !important; color:#fff !important; border-color:#fff !important; }
  html body .topbar .ex-menu-header-btn:hover span { color:#fff !important; -webkit-text-fill-color:#fff !important; }
}

@media(max-width:900px){html body .topbar::before,html body .topbar::after{display:none!important;content:none!important}html body .topbar{border-bottom:0!important;box-shadow:none!important}}

/* Hide the shared top header ONLY on Explore page mobile view. */
@media (max-width: 768px) {
  body.page-explore .topbar,
  body.page-explore .center > header.topbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  body.page-explore .layout { padding-top: 0 !important; }
  body.page-explore .layout > .center {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Mobile: hide the header profile shortcut and remove blue tap/focus highlight from menu controls. */
@media (max-width: 768px) {
  html body .topbar .ex-profile-header-btn { display: none !important; }
  html body .topbar #menuBtn,
  html body .topbar .ex-header-btn {
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none !important;
  }
  html body .topbar #menuBtn:focus,
  html body .topbar #menuBtn:focus-visible,
  html body .topbar #menuBtn:active {
    outline: none !important;
    box-shadow: none !important;
    background: #111111 !important;
    color: #ffffff !important;
  }
}

/* ==========================================================
   Migrated inline CSS from the supplied ExploreX homepage PHP.
   Source order is preserved for cascade compatibility.
   ========================================================== */


/* Migrated inline style block 1 */
:root { color-scheme: dark; }
            * { box-sizing: border-box; }
            html, body { width:100%; height:100%; margin:0; }
            body {
                overflow:hidden;
                background:#101522;
                color:#fff;
                font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
                -webkit-font-smoothing:antialiased;
            }
            .ex-welcome {
                position:relative;
                display:flex;
                flex-direction:column;
                align-items:center;
                width:100%;
                min-height:100%;
                height:100vh;
                height:100dvh;
                overflow:hidden;
                isolation:isolate;
                background:#101522;
            }
            .ex-welcome-cover {
                position:absolute;
                z-index:-2;
                inset:0;
                width:100%;
                height:100%;
                object-fit:cover;
                object-position:center;
            }
            .ex-welcome::before {
                content:"";
                position:absolute;
                z-index:-1;
                inset:0;
                background:linear-gradient(180deg,
                    rgba(7,14,31,.18) 0%,
                    rgba(7,12,27,.04) 35%,
                    rgba(7,10,20,.04) 59%,
                    rgba(4,7,15,.38) 78%,
                    rgba(3,5,12,.94) 100%);
                pointer-events:none;
            }
            .ex-welcome-brand {
                width:min(86%, 340px);
                max-height:88px;
                object-fit:contain;
                margin-top:clamp(42px, 9vh, 76px);
                filter:drop-shadow(0 2px 12px rgba(0,0,0,.16));
            }
            .ex-welcome-heading {
                /* Pull the title upward so it sits closer to / slightly overlaps the logo. */
                position:relative;
                z-index:1;
                margin:-9px 18px 0;
                font-size:clamp(34px, 9vw, 48px);
                line-height:1.06;
                letter-spacing:-1.7px;
                font-weight:800;
                text-align:center;
                text-shadow:0 2px 16px rgba(0,0,0,.15);
            }
            .ex-welcome-heading .ex-x {
                color:#7938ff;
                text-shadow:0 0 24px rgba(106,51,255,.35);
            }
            .ex-welcome-subtitle {
                position:relative;
                z-index:1;
                max-width:340px;
                margin:0 24px 0;
                transform:translateY(-7px);
                font-size:clamp(16px, 4.3vw, 18px);
                line-height:1.4;
                font-weight:450;
                text-align:center;
                color:rgba(255,255,255,.96);
                text-shadow:0 1px 8px rgba(0,0,0,.4);
            }
            .ex-welcome-spacer { flex:1 1 auto; min-height:16px; }
            .ex-welcome-actions {
                width:100%;
                padding:0 30px max(22px, env(safe-area-inset-bottom));
                display:flex;
                flex-direction:column;
                align-items:center;
                flex:0 0 auto;
            }
            .ex-welcome-start {
                display:flex;
                align-items:center;
                justify-content:center;
                gap:9px;
                width:100%;
                min-height:49px;
                border:0;
                border-radius:999px;
                background:linear-gradient(105deg,#1689ff 0%,#315bff 48%,#6424f5 100%);
                color:#fff;
                text-decoration:none;
                font-size:14px;
                font-weight:700;
                letter-spacing:.1px;
                box-shadow:0 8px 25px rgba(28,67,255,.24);
                -webkit-tap-highlight-color:transparent;
                transition:transform .18s ease,filter .18s ease;
            }
            .ex-welcome-start:hover { filter:brightness(1.08); }
            .ex-welcome-start:active { transform:scale(.985); }
            .ex-welcome-start svg { width:18px;height:18px; }
            .ex-welcome-signin {
                margin-top:17px;
                color:#fff;
                font-size:12px;
                line-height:1.4;
                text-align:center;
                text-shadow:0 1px 7px rgba(0,0,0,.7);
            }
            .ex-welcome-signin a {
                color:#fff;
                font-weight:750;
                text-decoration:none;
                margin-left:7px;
            }
            .ex-welcome-signin a:hover { text-decoration:underline; }
            @media (max-height:620px) {
                .ex-welcome-brand { margin-top:28px; max-height:62px; }
                .ex-welcome-heading { margin-top:-7px; font-size:34px; }
                .ex-welcome-subtitle { margin-top:0; transform:translateY(-5px); font-size:15px; }
                .ex-welcome-actions { padding-bottom:max(13px, env(safe-area-inset-bottom)); }
                .ex-welcome-signin { margin-top:11px; }
            }

/* Migrated inline style block 2 (id="explorex-critical-light-first-paint") */
@media (min-width:1051px) {
  html, body { color-scheme:light !important; background:#f4f7ff !important; color:#122345 !important; }
  body { background-image:radial-gradient(ellipse at 72% 32%,rgba(132,166,255,.20),transparent 34%),radial-gradient(ellipse at 9% 77%,rgba(255,185,211,.23),transparent 30%) !important; }
  html[data-theme="dark"] { color-scheme:light !important; --bg:#f4f7ff !important; --card:#fff !important; --ink:#122345 !important; --muted:#748097 !important; --line:#edf1fa !important; --soft:#f0f3fb !important; --shadow:0 5px 22px rgba(29,43,79,.055) !important; }
  html[data-theme="dark"] body, html[data-theme="dark"] .layout, html[data-theme="dark"] .center { background-color:#f4f7ff !important; color:#122345 !important; }
  html[data-theme="dark"] .topbar { background:rgba(255,255,255,.96) !important; color:#14264a !important; }
}
/* Hide scrollbar tracks while preserving wheel, touch and arrow-button scrolling. */
.work-services-strip, .center, .side, .right-rail, .topic-pills { scrollbar-width:none !important; -ms-overflow-style:none !important; }
.work-services-strip::-webkit-scrollbar, .center::-webkit-scrollbar, .side::-webkit-scrollbar, .right-rail::-webkit-scrollbar, .topic-pills::-webkit-scrollbar { display:none !important; width:0 !important; height:0 !important; }

/* Migrated inline style block 3 (id="explorex-reference-desktop") */
/* Desktop ExploreX refresh: light, colorful, three-column discovery layout. */
@media (min-width: 1051px) {
  html, body { background:#f4f7ff !important; color:#122345 !important; }
  body { background-image:radial-gradient(ellipse at 72% 32%,rgba(132,166,255,.20),transparent 34%),radial-gradient(ellipse at 9% 77%,rgba(255,185,211,.23),transparent 30%) !important; }
  html body .layout { display:grid !important; grid-template-columns:280px minmax(440px,1fr) 420px !important; gap:20px !important; max-width:none !important; width:100% !important; padding:78px 24px 0 !important; height:100vh !important; box-sizing:border-box !important; background:transparent !important; }
  html body .layout > .side { display:block !important; position:fixed !important; left:24px !important; top:82px !important; bottom:18px !important; width:250px !important; height:auto !important; overflow:auto !important; padding:8px 0 20px !important; background:transparent !important; border:0 !important; }
  html body .layout > .center { grid-column:2 !important; width:100% !important; height:calc(100vh - 82px) !important; min-width:0 !important; overflow-y:auto !important; overflow-x:hidden !important; padding:12px 0 30px !important; border:0 !important; background:transparent !important; scrollbar-width:thin; scrollbar-color:#c6d1e7 transparent; }
  html body .layout > .right-rail { display:block !important; grid-column:3 !important; position:relative !important; top:auto !important; right:auto !important; width:100% !important; height:calc(100vh - 82px) !important; overflow-y:auto !important; padding:12px 0 24px !important; background:transparent !important; }
  html body .topbar, html body .center > .topbar { position:fixed !important; left:0 !important; right:0 !important; top:0 !important; width:100% !important; height:72px !important; padding:0 38px !important; display:flex !important; gap:28px !important; background:rgba(255,255,255,.94) !important; color:#14264a !important; border-bottom:1px solid #edf1fa !important; box-shadow:0 3px 20px rgba(29,54,104,.06) !important; backdrop-filter:blur(18px); z-index:900 !important; }
  html body .topbar > .ex-image-brand { margin:0 !important; flex:0 0 390px !important; }
  html body .topbar .ex-image-brand img { width:180px !important; max-height:55px !important; }
  html body .topbar .search-form, html body .topbar .search-results { display:flex !important; }
  html body .topbar .search-form { position:relative !important; flex:1 1 auto !important; width:auto !important; max-width:690px !important; height:46px !important; margin:0 auto !important; background:#f0f3f9 !important; border:1px solid #eef1f8 !important; border-radius:28px !important; color:#22395f !important; box-shadow:none !important; }
  html body .topbar .search-form input { color:#17294c !important; }
  html body .topbar .search-form input::placeholder { color:#8492ad !important; }
  html body .topbar .ex-header-tools { gap:12px !important; margin-left:10px !important; }
  html body .topbar .ex-header-btn { width:48px !important; height:48px !important; border-radius:50% !important; background:#f5f7fc !important; border:1px solid #edf1fa !important; color:#18335e !important; box-shadow:none !important; }
  html body .side .side-nav { display:flex !important; flex-direction:column !important; gap:8px !important; }
  html body .side .side-nav a { display:flex !important; align-items:center !important; gap:14px !important; min-height:58px !important; padding:0 18px !important; border-radius:15px !important; color:#1b2e52 !important; font-size:15px !important; font-weight:700 !important; background:transparent !important; text-decoration:none !important; }
  html body .side .side-nav a .ico { display:inline-flex !important; align-items:center; justify-content:center; width:28px !important; font-size:23px !important; color:#347cf4 !important; }
  html body .side .side-nav a.active { color:#fff !important; background:linear-gradient(110deg,#08a7f7,#6554ff) !important; box-shadow:0 9px 22px rgba(49,105,255,.22) !important; }
  html body .side .side-nav a.active .ico { color:#fff !important; }
  html body .side .side-note { margin-top:42px !important; padding:20px !important; border:0 !important; border-radius:17px !important; background:linear-gradient(125deg,#d8f7ff,#dcd8ff) !important; color:#5b6c91 !important; line-height:1.55 !important; }
  html body .side .side-note b { color:#15264b !important; }
  .topic-pills { display:flex !important; gap:10px !important; padding:0 0 14px !important; margin:0 !important; overflow:visible !important; white-space:nowrap; }
  .topic-pills a { padding:11px 23px !important; border-radius:30px !important; background:#fff !important; color:#62718f !important; box-shadow:0 3px 14px rgba(31,55,103,.05) !important; font-weight:700 !important; text-decoration:none !important; }
  .topic-pills a.active { background:linear-gradient(110deg,#00a8f7,#6550ff) !important; color:#fff !important; }
  .explorex-ad-section { height:250px !important; margin:0 0 18px !important; border-radius:17px !important; box-shadow:0 10px 28px rgba(24,61,116,.10); }
  .explorex-ad-fallback .hero-copy { left:32px !important; bottom:26px !important; width:62% !important; }
  .explorex-ad-fallback .hero-copy h1 { font-size:clamp(34px,3vw,52px) !important; line-height:1.06 !important; }
  .explorex-ad-fallback .hero-copy p { font-size:16px !important; max-width:360px; }
  .section-title, .feed-head { display:flex !important; align-items:center !important; justify-content:space-between !important; margin:16px 0 12px !important; padding:0 !important; }
  .section-title h2, .feed-head h2 { color:#13274d !important; font-size:21px !important; font-weight:850 !important; letter-spacing:-.45px; }
  .trend-flame { margin-right:5px; }
  .trend-see-all, .feed-head .muted { color:#5b8fff !important; font-weight:700 !important; text-decoration:none !important; }
  .work-services-section { margin:0 0 18px !important; }
  .work-services-strip { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; overflow:visible !important; padding:0 !important; }
  .work-service-card { width:100% !important; min-width:0 !important; height:150px !important; border:1px solid rgba(255,255,255,.75) !important; border-radius:14px !important; box-shadow:0 5px 16px rgba(25,48,94,.09) !important; }
  .work-service-title { font-size:14px !important; }
  #homeFeed { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:16px !important; padding:0 !important; }
  #homeFeed > .post, #homeFeed .post, #homeFeed article.post { margin:0 0 14px !important; padding:14px !important; border:1px solid #edf1f8 !important; border-radius:17px !important; background:#fff !important; color:#17294c !important; box-shadow:0 5px 20px rgba(27,53,104,.045) !important; overflow:hidden !important; }
  #homeFeed .post-media { border-radius:13px !important; }
  #homeFeed .post-text { color:#344667 !important; }
  .right-rail .explorex-right-ad-wrap { display:block !important; position:static !important; width:100% !important; max-width:none !important; margin:0 0 18px !important; }
  .explorex-right-ad-label { font-size:18px !important; color:#14264a !important; font-weight:850 !important; margin:0 0 10px !important; }
  .explorex-right-ad-stack { display:block !important; }
  .explorex-right-ad-box { height:238px !important; border:0 !important; border-radius:16px !important; background:#dff5ff !important; box-shadow:0 5px 20px rgba(29,55,105,.07); }
  .explorex-right-ad-box + .explorex-right-ad-box { display:none !important; }
  .explorex-right-ad-box ins.adsbygoogle { min-height:238px !important; background:transparent !important; }
  .right-rail .explorex-right-ad-wrap:after { content:"Explore more. Go further."; display:block; margin-top:-64px; position:relative; z-index:2; pointer-events:none; color:#fff; font-size:18px; font-weight:800; padding:0 18px 18px; text-shadow:0 1px 6px #064b8a; }
  .right-rail .explorex-right-ad-wrap .explorex-right-ad-label:after { content:" · ExploreX"; color:#6c7ea0; font-size:12px; }
}
@media (min-width:1051px) and (max-width:1350px) {
  html body .layout { grid-template-columns:235px minmax(390px,1fr) 330px !important; gap:15px !important; padding-left:16px !important; padding-right:16px !important; }
  html body .layout > .side { left:16px !important; width:220px !important; }
  html body .topbar > .ex-image-brand { flex-basis:250px !important; }
  .work-services-strip { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}

/* Migrated inline style block 4 */
/* Ad keeps the exact dimensions of the original ExploreX hero banner. */
.explorex-ad-section {
    position: relative;
    display: block;
    width: 100%;
    height: 172px;
    margin: 0 0 10px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 15px;
    background: #273d5c;
    isolation: isolate;
}
.explorex-ad-section .adsbygoogle {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    z-index: 1;
}
.explorex-ad-fallback {
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #fff;
    background: #273d5c;
    text-decoration: none;
    z-index: 2;
}
.explorex-ad-fallback.is-visible { display: block; }
.explorex-ad-fallback > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.explorex-ad-fallback::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(7,15,29,.84),rgba(7,15,29,.04)),linear-gradient(0deg,rgba(0,0,0,.25),transparent);
}
.explorex-ad-fallback .hero-copy {
    position: absolute;
    z-index: 1;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    width: 75%;
}
.explorex-ad-fallback .hero-copy h1 {
    margin: 0 0 8px;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: -.8px;
}
.explorex-ad-fallback .hero-copy p {
    margin: 0;
    max-width: 230px;
    font-size: 11px;
    line-height: 1.45;
}
.explorex-ad-fallback .hero-arrow {
    position: absolute;
    z-index: 2;
    right: 13px;
    bottom: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: #4c39ff;
    font-size: 21px;
}
@media (min-width: 1200px) {
    .explorex-ad-section { height: 210px; }
    .explorex-ad-fallback .hero-copy h1 { font-size: 28px; }
}
@media (max-width: 650px) {
    .explorex-ad-section {
        width: 100%;
        height: auto;
        aspect-ratio: 1.9 / 1;
        margin: 0 0 8px;
        border-radius: 13px;
    }
    .explorex-ad-fallback .hero-copy { left: 16px; width: 78%; }
    .explorex-ad-fallback .hero-copy h1 { font-size: 22px; margin-bottom: 7px; }
    .explorex-ad-fallback .hero-copy p { font-size: 11px; }
    .explorex-ad-fallback .hero-arrow { width: 32px; height: 32px; }
}

/* Mobile feed: edge-to-edge Instagram-inspired layout */
/* Brand/profile marks should be circular; keep actual post and product media untouched. */
#homeFeed .home-product-logo,
#homeFeed .home-reel-avatar,
#homeFeed .home-comment-avatar,
#homeFeed .post-header img,
#homeFeed .post-user img,
#homeFeed .post-author img,
#homeFeed .author-avatar,
#homeFeed .user-avatar,
#homeFeed .profile-avatar,
#homeFeed .post-avatar,
#homeFeed .business-logo,
#homeFeed .business-logo img,
#homeFeed .profile-logo,
#homeFeed .profile-logo img,
#homeFeed .post-header .logo,
#homeFeed .post-header .avatar {
    border-radius: 50% !important;
    object-fit: cover !important;
    overflow: hidden;
}
.home-product-logo-link,
.home-reel-avatar {
    flex: 0 0 auto;
}
@media (max-width: 650px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    body { margin: 0; }
    .topic-pills {
        display: flex;
        gap: 18px;
        margin: 0 !important;
        padding: 10px 14px !important;
        overflow-x: auto;
        border-radius: 0 !important;
        scrollbar-width: none;
        white-space: nowrap;
    }
    .topic-pills::-webkit-scrollbar { display: none; }

    /* Keep the discovery banner, but remove rounded-card styling. */
    a.hero, .hero {
        display: block;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 12px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden;
    }
    .hero img {
        display: block;
        width: 100% !important;
        max-width: none !important;
        border-radius: 0 !important;
        object-fit: cover;
    }

    /* Trending: three rounded tiles visible at once, swipe horizontally for more. */
    .section-title {
        margin: 12px 14px 7px !important;
        padding: 0 !important;
    }
    .section-title h2 { font-size: 17px !important; }
    .trending-strip {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 2px 14px 12px !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-radius: 0 !important;
    }
    .trending-strip::-webkit-scrollbar { display: none; }
    .trend-card {
        flex: 0 0 calc((100% - 16px) / 3) !important;
        width: calc((100% - 16px) / 3) !important;
        min-width: calc((100% - 16px) / 3) !important;
        height: 104px !important;
        min-height: 104px !important;
        padding: 0 0 7px !important;
        margin: 0 !important;
        border: 1px solid #e7eaf0 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(20,35,60,.06) !important;
        background: #fff !important;
        overflow: hidden !important;
        scroll-snap-align: start;
        text-decoration: none !important;
    }
    .trend-card img,
    .trend-card-fallback {
        display: block;
        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
    .trend-label {
        display: block !important;
        width: 100%;
        padding: 6px 5px 0 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 650 !important;
        text-align: center !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .trend-label small { display: none !important; }
    .trend-card.is-selected {
        border-color: #1689ff !important;
        box-shadow: 0 0 0 1px #1689ff !important;
    }

    .feed-head {
        margin: 8px 14px 10px !important;
        padding: 0 !important;
    }
    .feed-head h2 { font-size: 18px !important; }
    #homeFeed {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    #homeFeed > .post,
    #homeFeed .post,
    #homeFeed article.post,
    #homeFeed .home-product-post,
    #homeFeed .home-reel-post {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff;
        overflow: hidden;
    }
    #homeFeed .post-header,
    #homeFeed .home-product-heading {
        padding: 10px 12px !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    /* Keep post/media photos square-edged, but never flatten profile/business logos. */
    #homeFeed img:not(.home-product-logo):not(.home-reel-avatar):not(.home-comment-avatar):not(.author-avatar):not(.user-avatar):not(.profile-avatar):not(.post-avatar):not(.business-logo):not(.profile-logo):not(.logo):not(.avatar) {
        border-radius: 0 !important;
    }

    /* News and blog author/business logos must remain perfectly circular. */
    #homeFeed .post-header img,
    #homeFeed .post-user img,
    #homeFeed .post-author img,
    #homeFeed .author-avatar,
    #homeFeed .user-avatar,
    #homeFeed .profile-avatar,
    #homeFeed .post-avatar,
    #homeFeed .business-logo,
    #homeFeed .business-logo img,
    #homeFeed .profile-logo,
    #homeFeed .profile-logo img,
    #homeFeed .post-header .logo,
    #homeFeed .post-header .avatar,
    #homeFeed img.home-product-logo,
    #homeFeed img.home-reel-avatar {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        flex: 0 0 48px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        overflow: hidden !important;
    }
    #homeFeed .home-product-logo-link,
    #homeFeed .post-header a:has(img),
    #homeFeed .post-user a:has(img),
    #homeFeed .post-author a:has(img) {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        flex: 0 0 48px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }
    /* Images use the full viewport width instead of a boxed media area. */
    #homeFeed .post-media,
    #homeFeed .post-image,
    #homeFeed .post-image-wrap,
    #homeFeed .post-media-wrap,
    #homeFeed .media,
    #homeFeed .post-content img:not(.author-avatar):not(.user-avatar):not(.profile-avatar):not(.post-avatar):not(.business-logo):not(.profile-logo),
    #homeFeed .home-product-media,
    #homeFeed .home-reel-stage {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden;
    }
    #homeFeed .post-media img,
    #homeFeed .post-image img,
    #homeFeed .post-image-wrap img,
    #homeFeed .post-media-wrap img,
    #homeFeed .media img,
    #homeFeed .post-content img:not(.author-avatar):not(.user-avatar):not(.profile-avatar):not(.post-avatar):not(.business-logo):not(.profile-logo),
    #homeFeed .home-product-media img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
    #homeFeed .home-reel-stage {
        height: min(78vh, 680px) !important;
        min-height: 420px;
        background: #000;
    }
    #homeFeed .home-reel-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    #homeFeed .home-feed-actions {
        display: flex;
        gap: 20px;
        padding: 10px 12px 12px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #080808 !important;
        color: #f5f5f5 !important;
        border-top: 1px solid #202020 !important;
        border-bottom: 1px solid #202020 !important;
    }
    #homeFeed .home-feed-actions .home-feed-action {
        color: #d1d5db !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    #homeFeed .home-feed-actions .home-feed-action .action-icon {
        color: #f3f4f6 !important;
    }
    #homeFeed .home-product-info { padding: 8px 12px !important; }
    #homeFeed .home-product-link { display: block; border-radius: 0 !important; }
    .sector-filter-active { margin: 8px 14px !important; border-radius: 0 !important; }
    .home-comment-backdrop { padding: 0 !important; }
    .home-comment-dialog { border-radius: 0 !important; }
}
    /* Match editorial images to the product image: edge-to-edge, natural aspect ratio. */
    @media (max-width: 650px) {
        #homeFeed .home-feed-news .post-image,
        #homeFeed .home-feed-article .post-image,
        #homeFeed .home-feed-blog .post-image,
        #homeFeed .home-feed-news .post-image-wrap,
        #homeFeed .home-feed-article .post-image-wrap,
        #homeFeed .home-feed-blog .post-image-wrap,
        #homeFeed .home-feed-news .post-media,
        #homeFeed .home-feed-article .post-media,
        #homeFeed .home-feed-blog .post-media,
        #homeFeed .home-feed-news .post-media-wrap,
        #homeFeed .home-feed-article .post-media-wrap,
        #homeFeed .home-feed-blog .post-media-wrap {
            display:block !important;
            width:100% !important;
            max-width:100% !important;
            height:auto !important;
            max-height:none !important;
            margin:0 !important;
            padding:0 !important;
            overflow:hidden !important;
            box-sizing:border-box !important;
        }
        #homeFeed .home-feed-news .post-image img,
        #homeFeed .home-feed-article .post-image img,
        #homeFeed .home-feed-blog .post-image img,
        #homeFeed .home-feed-news .post-image-wrap img,
        #homeFeed .home-feed-article .post-image-wrap img,
        #homeFeed .home-feed-blog .post-image-wrap img,
        #homeFeed .home-feed-news .post-media img,
        #homeFeed .home-feed-article .post-media img,
        #homeFeed .home-feed-blog .post-media img,
        #homeFeed .home-feed-news .post-media-wrap img,
        #homeFeed .home-feed-article .post-media-wrap img,
        #homeFeed .home-feed-blog .post-media-wrap img {
            display:block !important;
            width:100% !important;
            min-width:100% !important;
            max-width:100% !important;
            height:auto !important;
            max-height:none !important;
            margin:0 !important;
            padding:0 !important;
            object-fit:contain !important;
            border-radius:0 !important;
        }
        /* Circular masks only for author/business logos, never post media. */
        #homeFeed .post-header img,
        #homeFeed .post-user img,
        #homeFeed .post-author img,
        #homeFeed .author-avatar,
        #homeFeed .user-avatar,
        #homeFeed .profile-avatar,
        #homeFeed .post-avatar,
        #homeFeed .business-logo,
        #homeFeed .profile-logo,
        #homeFeed .home-product-logo,
        #homeFeed .home-reel-avatar {
            border-radius:50% !important;
            object-fit:cover !important;
            flex-shrink:0 !important;
        }
        #homeFeed .post-header img,
        #homeFeed .post-user img,
        #homeFeed .post-author img,
        #homeFeed .author-avatar,
        #homeFeed .user-avatar,
        #homeFeed .profile-avatar,
        #homeFeed .post-avatar,
        #homeFeed .business-logo,
        #homeFeed .profile-logo {
            width:48px !important;
            height:48px !important;
            min-width:48px !important;
            max-width:48px !important;
            aspect-ratio:1 / 1 !important;
            overflow:hidden !important;
        }
    }

/* Migrated inline style block 5 */
.work-services-section{margin:12px 0 22px;min-width:0}
.work-services-strip{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 14px 14px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#737373 transparent;-webkit-overflow-scrolling:touch}
.work-services-strip::-webkit-scrollbar{height:5px}
.work-services-strip::-webkit-scrollbar-thumb{background:#737373;border-radius:99px}
.work-services-strip::-webkit-scrollbar-track{background:transparent}
.work-service-card{position:relative;isolation:isolate;flex:0 0 178px;width:178px;height:188px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;text-align:right;padding:13px;border:1px solid rgba(255,255,255,.3);border-radius:15px;background-color:#242831;background-image:var(--service-image);background-position:center;background-size:cover;background-repeat:no-repeat;color:#fff;text-decoration:none;scroll-snap-align:start;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.work-service-card:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(0,0,0,.02) 35%,rgba(0,0,0,.12) 58%,rgba(0,0,0,.72) 100%)}
.work-service-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.8);box-shadow:0 7px 20px rgba(0,0,0,.18)}
.work-service-title{max-width:100%;font-size:13px;line-height:1.25;font-weight:800;text-shadow:0 1px 5px rgba(0,0,0,.95);overflow-wrap:anywhere}
.work-service-job{border-color:rgba(255,255,255,.45)}
@media(max-width:650px){.work-services-strip{gap:10px;padding:4px 14px 14px}.work-service-card{flex:0 0 160px;width:160px;min-width:160px;height:180px;min-height:180px;padding:11px;border-radius:12px}.work-service-title{font-size:12px;line-height:1.25}}

/* Migrated inline style block 6 */
/* Mobile interaction polish: suppress the blue tap flash on feed controls and menu close. */
@media (max-width: 768px) {
  html, body, button, a, [role="button"], .ex-drawer-close,
  .home-feed-action, .home-comment-close, .home-comment-form button {
    -webkit-tap-highlight-color: transparent !important;
  }
  button, a, [role="button"], .ex-drawer-close,
  .home-feed-action, .home-comment-close, .home-comment-form button {
    outline: none;
  }
  button:focus, a:focus, [role="button"]:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  .ex-drawer-close:active, .home-comment-close:active,
  .home-feed-action:active, .home-comment-form button:active {
    background-color: inherit !important;
    color: inherit;
  }
  #homeCommentDialog.home-comment-backdrop {
    background: rgba(0, 0, 0, .78) !important;
    color: #f8fafc !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  #homeCommentDialog .home-comment-dialog {
    background: #080808 !important;
    color: #f8fafc !important;
    border: 1px solid #252525 !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.6) !important;
  }
  #homeCommentDialog .home-comment-heading,
  #homeCommentDialog .home-comment-list,
  #homeCommentDialog .home-comment-item,
  #homeCommentDialog .home-comment-empty,
  #homeCommentDialog .home-comment-loading {
    background: #080808 !important;
    color: #f8fafc !important;
    border-color: #292929 !important;
  }
  #homeCommentDialog .home-comment-heading strong,
  #homeCommentDialog .home-comment-item strong,
  #homeCommentDialog .home-comment-item p {
    color: #f8fafc !important;
  }
  #homeCommentDialog .home-comment-heading small,
  #homeCommentDialog .home-comment-item small {
    color: #a1a1aa !important;
  }
  #homeCommentDialog .home-comment-form {
    background: #080808 !important;
    border-color: #292929 !important;
  }
  #homeCommentDialog .home-comment-form textarea {
    background: #151515 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    outline: none !important;
    box-shadow: none !important;
  }
  #homeCommentDialog .home-comment-form textarea::placeholder {
    color: #9ca3af !important;
  }
  #homeCommentDialog .home-comment-close {
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* Migrated inline style block 7 (id="explorex-desktop-colorful-final") */
/* Final desktop-only color correction: override legacy black desktop theme. */
@media (min-width: 1051px) {
  html, html body, body, html body .layout,
  html body .layout > .side, html body .layout > .center,
  html body .layout > .right-rail {
    background-color: #f4f7ff !important;
    color: #17294c !important;
  }
  html body { background-image:
    radial-gradient(ellipse at 78% 26%, rgba(115,159,255,.25), transparent 36%),
    radial-gradient(ellipse at 8% 70%, rgba(255,177,211,.28), transparent 32%),
    linear-gradient(135deg,#f8fbff 0%,#eef4ff 48%,#fff5fb 100%) !important;
    background-attachment: fixed !important;
  }
  html body .layout, html body .layout > .side,
  html body .layout > .center, html body .layout > .right-rail {
    background: transparent !important;
  }
  html body .topbar, html body .center > .topbar {
    background: rgba(255,255,255,.94) !important;
    color: #17294c !important; border-color: #e8edf7 !important;
    box-shadow: 0 4px 22px rgba(35,61,111,.07) !important;
  }
  html body .topbar .brand, html body .topbar .ex-mobile-brand,
  html body .topbar .ex-header-btn { color: #1b3158 !important; }
  html body .topbar .ex-header-btn { background:#f5f7fc !important; border-color:#e5ebf6 !important; }
  html body .topbar .search-form { background:#f0f3f9 !important; border-color:#e7edf7 !important; color:#20385f !important; }
  html body .topbar .search-form input { color:#17294c !important; }
  html body .topbar .search-form input::placeholder { color:#8492ad !important; }
  html body .side .side-nav a { color:#1b2e52 !important; }
  html body .side .side-nav a:not(.active) { background:transparent !important; }
  html body .side .side-nav a .ico { color:#347cf4 !important; }
  html body .side .side-nav a.active { color:#fff !important; background:linear-gradient(110deg,#08a7f7,#6554ff) !important; }
  html body .side .side-note { background:linear-gradient(125deg,#d8f7ff,#dcd8ff) !important; color:#5b6c91 !important; border:1px solid #e2e8ff !important; }
  html body .side .side-note b { color:#15264b !important; }
  html body .section-title h2, html body .feed-head h2,
  html body .page-title, html body .work-services-section h2,
  html body .section-title, html body .feed-head { color:#13274d !important; }
  html body .topic-pills a { background:#fff !important; color:#62718f !important; }
  html body .topic-pills a.active { background:linear-gradient(110deg,#00a8f7,#6550ff) !important; color:#fff !important; }
  html body #homeFeed > .post, html body #homeFeed .post,
  html body #homeFeed article.post, html body .rail-card,
  html body .simple-list, html body .form-card {
    background:rgba(255,255,255,.96) !important; color:#17294c !important;
    border:1px solid #e8edf7 !important;
    box-shadow:0 7px 24px rgba(35,61,111,.07) !important;
  }
  html body #homeFeed .post h1, html body #homeFeed .post h2,
  html body #homeFeed .post h3, html body #homeFeed .post-owner,
  html body #homeFeed .post-text { color:#17294c !important; }
  html body #homeFeed .home-feed-actions { background:#fff !important; color:#314565 !important; border-color:#edf1f8 !important; }
  html body #homeFeed .home-feed-actions .home-feed-action,
  html body #homeFeed .home-feed-actions .home-feed-action .action-icon { color:#425779 !important; }
  html body .explorex-right-ad-box { background:linear-gradient(135deg,#dff5ff,#dce5ff) !important; border-color:#e5edff !important; }
  html body .explorex-right-ad-label { color:#14264a !important; }
  html body .work-service-card { box-shadow:0 7px 20px rgba(25,48,94,.12) !important; }
  html body .empty { color:#748097 !important; }
}

/* Migrated inline style block 8 (id="explorex-compact-hero-trending-scroll") */
/* Compact Explore Beyond Limits banner and make Trending Now horizontally scrollable. */
@media (min-width: 1051px) {
    .explorex-ad-section {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
        margin-bottom: 16px !important;
        border-radius: 17px !important;
    }
    .explorex-ad-fallback .hero-copy h1 {
        font-size: clamp(30px, 2.45vw, 42px) !important;
    }
    .work-services-section {
        min-width: 0 !important;
        margin: 0 0 18px !important;
    }
    .work-services-section .trending-section-heading {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin: 12px 0 10px !important;
    }
    .trending-heading-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
    }
    .trending-heading-actions .trend-see-all {
        margin-left: 4px;
        white-space: nowrap;
    }
    .trending-scroll-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: 1px solid #e0e8f7;
        border-radius: 50%;
        background: #fff;
        color: #315baf;
        font-size: 25px;
        line-height: 1;
        box-shadow: 0 3px 10px rgba(35,61,111,.09);
        cursor: pointer;
        transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .trending-scroll-arrow:hover {
        background: linear-gradient(120deg,#08a7f7,#6554ff);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(49,105,255,.2);
    }
    .work-services-strip {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        grid-auto-flow: unset !important;
        gap: 12px !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 3px 3px 12px !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        -webkit-overflow-scrolling: touch;
    }
    .work-services-strip::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
    .work-services-strip .work-service-card {
        flex: 0 0 calc((100% - 24px) / 3) !important;
        width: calc((100% - 24px) / 3) !important;
        min-width: calc((100% - 24px) / 3) !important;
        height: 145px !important;
        min-height: 145px !important;
        scroll-snap-align: start !important;
    }
}
@media (min-width: 651px) and (max-width: 1050px) {
    .explorex-ad-section {
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
    }
    .work-services-section { min-width: 0 !important; }
    .work-services-section .trending-section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .trending-heading-actions { display:flex; align-items:center; gap:6px; }
    .trending-scroll-arrow { width:32px;height:32px;border:1px solid #e0e8f7;border-radius:50%;background:#fff;color:#315baf;font-size:23px;line-height:1; }
    .work-services-strip { display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; gap:10px !important; scroll-behavior:smooth !important; }
    .work-services-strip .work-service-card { flex:0 0 31% !important; width:31% !important; min-width:31% !important; height:135px !important; }
}
@media (max-width: 650px) {
    .trending-heading-actions { display:flex; align-items:center; gap:5px; }
    .trending-scroll-arrow { display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #e0e8f7;border-radius:50%;background:#fff;color:#315baf;font-size:21px;line-height:1; }
    .trending-heading-actions .trend-see-all { margin-left:2px; }
    .work-services-strip { scroll-behavior:smooth !important; }
}

/* Migrated inline style block 9 (id="explorex-final-scrollbar-hide") */
.work-services-strip,.center,.side,.right-rail,.topic-pills { scrollbar-width:none !important; -ms-overflow-style:none !important; }
.work-services-strip::-webkit-scrollbar,.center::-webkit-scrollbar,.side::-webkit-scrollbar,.right-rail::-webkit-scrollbar,.topic-pills::-webkit-scrollbar { display:none !important; width:0 !important; height:0 !important; }


/* Final homepage rendering fixes after moving inline styles into assets/app.css. */
.explorex-ad-section {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    position: relative !important;
    overflow: hidden !important;
}
.explorex-ad-fallback {
    display: block;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.explorex-ad-fallback.is-visible { display: block !important; }
.explorex-ad-fallback > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
@media (min-width: 1051px) {
    html body .layout > .side .side-nav a { color: #53627d !important; }
    html body .layout > .side .side-nav a.active,
    html body .layout > .side .side-nav a:hover {
        color: #fff !important;
        background: #1b1b1b !important;
    }
    html body .layout > .center { background: transparent !important; }
    html body .layout > .center .topic-pills a {
        background: #1b1b1b !important;
        color: #fff !important;
    }
    html body .layout > .center .topic-pills a.active { background: #1b1b1b !important; }
}


/* Externalized CSS from includes/footer.php */

/* ExploreX desktop sponsored card */
.explorex-right-ad-wrap{display:none}
@media (min-width: 1024px){
  .explorex-right-ad-wrap{display:block;width:300px;max-width:300px;margin:0;position:fixed;top:140px;right:max(55px,calc((100vw - 1360px)/2 + 30px));align-self:start;z-index:100;overflow:visible;max-height:none;overflow-y:visible}
  .explorex-right-ad-label{font:600 12px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#7b8494;margin:0 0 8px}
  .explorex-right-ad-stack{display:grid;grid-template-columns:1fr;gap:14px}
  .explorex-right-ad-box{position:relative;width:100%;height:250px;overflow:hidden;border-radius:12px;background:#000;border:1px solid #202020;box-sizing:border-box}
  .explorex-right-ad-box ins.adsbygoogle{display:block;width:100%;min-height:250px;background:#000}
  .right-rail{min-width:0}
}
@media (min-width:1024px) and (max-height:650px){.explorex-right-ad-wrap{top:105px}}


.exx-right-widget{display:none}
@media(min-width:1051px){
 .exx-right-widget{display:block;background:rgba(255,255,255,.94);border:1px solid #edf1f8;border-radius:17px;padding:16px;margin:0 0 16px;box-shadow:0 5px 20px rgba(27,53,104,.045)}
 .exx-widget-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 13px;color:#14264a;font-size:17px}
 .exx-widget-heading a{font-size:12px;color:#416fff;text-decoration:none;font-weight:750}
 .exx-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
 .exx-category-grid a{display:flex;flex-direction:column;align-items:center;gap:5px;color:#334667;text-decoration:none;font-size:12px}
 .exx-category-icon{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:27px;font-weight:800}
 .exx-category-icon.travel{background:#e5f3ff;color:#238af4}.exx-category-icon.food{background:#fff0e5;color:#ff963e}.exx-category-icon.shopping{background:#ffe8f0;color:#ff3d79}.exx-category-icon.gaming{background:#f0e8ff;color:#8852ed}.exx-category-icon.health{background:#ffe9f0;color:#f43f70}.exx-category-icon.education{background:#e5f0ff;color:#286ef5}.exx-category-icon.business{background:#fff0e1;color:#f39b24}.exx-category-icon.music{background:#eee8ff;color:#8050ef}
 .exx-latest-reels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .exx-latest-reel{position:relative;display:block;height:154px;border-radius:11px;overflow:hidden;background:linear-gradient(145deg,#7dd3fc,#4338ca);color:#fff;text-decoration:none}
 .exx-latest-reel img{width:100%;height:100%;object-fit:cover;display:block}.exx-latest-reel:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.68))}
 .exx-reel-play{position:absolute;z-index:2;left:50%;top:43%;transform:translate(-50%,-50%);width:29px;height:29px;display:flex;align-items:center;justify-content:center;background:#ffffffd9;color:#24334e;border-radius:50%;font-size:11px}
 .exx-latest-reel small{position:absolute;z-index:3;left:7px;right:4px;bottom:7px;color:#fff;font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 5px #000}
 .exx-reel-placeholder{display:flex;height:100%;align-items:center;justify-content:center;font-size:28px;color:#fff}.exx-reel-fallback{background:linear-gradient(145deg,#23b8ff,#7148f5)}
}


.exx-mobile-nav{display:none}
@media(max-width:768px){
 .exx-mobile-nav{position:fixed!important;z-index:9999;left:0;right:0;bottom:0;height:54px;padding:3px max(8px,env(safe-area-inset-right)) calc(3px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));box-sizing:content-box;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;background:#000!important;border-top:1px solid #222!important;box-shadow:0 -5px 22px rgba(0,0,0,.35);backdrop-filter:blur(16px)}
 .exx-mobile-nav a{min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:#fff!important;font-family:inherit;font-size:0;line-height:1.05}
 /* Single source of truth for mobile navigation icon dimensions. */
 .exx-mobile-nav .mobile-nav-item svg,
 .exx-mobile-nav .mobile-profile-logo{width:30px;height:30px;min-width:30px;min-height:30px;flex:0 0 30px}
 .exx-mobile-nav .mobile-nav-item svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
 .exx-mobile-nav .mobile-profile-logo{object-fit:cover;border-radius:50%}
 /* Navigation interaction colors and focus cleanup */
 .exx-mobile-nav a.active,
 .exx-mobile-nav a:hover,
 .exx-mobile-nav a:active,
 .exx-mobile-nav a:focus,
 .exx-mobile-nav a:focus-visible{color:#287cff!important;outline:0!important;border:0!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
 .exx-mobile-nav a svg{outline:0!important}
 .exx-mobile-nav a:focus svg,
 .exx-mobile-nav a:focus-visible svg{outline:0!important;filter:none!important}
 .exx-mobile-nav .mobile-nav-item>span{display:none!important}
 .exx-mobile-nav .mobile-nav-center{height:100%;justify-content:flex-start;overflow:visible}
 .mobile-ai-glow{width:46px;height:46px;margin-top:-14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#000;border:3px solid #00baff;box-shadow:0 0 10px #00baff,0 0 25px rgba(0,153,255,.8),0 0 42px rgba(0,153,255,.4);overflow:hidden}
 .mobile-ai-glow img{width:100%;height:100%;object-fit:contain;border-radius:50%}
 .exx-mobile-nav .mobile-profile-logo{border:1px solid #444}
 body{padding-bottom:64px}
}
@media(min-width:769px){.exx-mobile-nav{display:none!important}}


#exo-global-order-overlay{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom));background:rgba(3,10,25,.28);-webkit-backdrop-filter:blur(9px) saturate(125%);backdrop-filter:blur(9px) saturate(125%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease;cursor:pointer}
#exo-global-order-overlay.exo-visible{opacity:1;visibility:visible;pointer-events:auto}
#exo-global-order-overlay .exo-order-logo{width:clamp(76px,18vw,112px);height:clamp(76px,18vw,112px);flex:0 0 auto;border-radius:50%;padding:4px;background:#020915;border:2px solid #35cfff;box-shadow:0 0 12px #00bfff,0 0 32px rgba(0,160,255,.85),0 0 70px rgba(0,105,255,.48);overflow:hidden;margin-bottom:22px;animation:exoGlobalLogoPulse 1.7s ease-in-out infinite}
#exo-global-order-overlay .exo-order-logo img{width:100%;height:100%;object-fit:contain;border-radius:50%;display:block;position:relative;z-index:2}
#exo-global-order-overlay .exo-logo-wave{position:absolute;inset:-3px;border:2px solid rgba(50,205,255,.9);border-radius:50%;pointer-events:none;opacity:0;z-index:1;box-shadow:0 0 15px rgba(0,190,255,.65),inset 0 0 12px rgba(0,190,255,.3)}
#exo-global-order-overlay.exo-speaking .exo-logo-wave{animation:exoLogoWave 1.65s ease-out infinite}
#exo-global-order-overlay.exo-speaking .exo-logo-wave:nth-child(2){animation-delay:.55s}
#exo-global-order-overlay.exo-speaking .exo-logo-wave:nth-child(3){animation-delay:1.1s}
#exo-global-order-overlay .exo-order-icon svg{width:29px;height:29px;display:block;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(80,210,255,.35))}
#exo-global-order-overlay .exo-order-card{position:relative;width:min(92vw,500px);max-height:58dvh;overflow:auto;border:1px solid rgba(180,225,255,.42);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(14,52,95,.82) 55%,rgba(4,19,42,.92));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 25px 75px rgba(0,0,0,.34),0 0 45px rgba(30,155,255,.25);-webkit-backdrop-filter:blur(25px) saturate(155%);backdrop-filter:blur(25px) saturate(155%);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;animation:exoGlobalCardIn .42s cubic-bezier(.22,1,.36,1)}
#exo-global-order-overlay .exo-order-head{padding:22px 22px 17px;text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(65,185,255,.3),transparent 72%)}
#exo-global-order-overlay .exo-order-icon{width:54px;height:54px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;border-radius:17px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#e8faff}
#exo-global-order-overlay .exo-order-title{font-weight:800;font-size:clamp(19px,4vw,23px);margin-bottom:5px}
#exo-global-order-overlay .exo-order-subtitle{font-size:12px;color:rgba(235,246,255,.76)}
#exo-global-order-overlay .exo-order-message{padding:17px 20px 20px;text-align:center;background:linear-gradient(135deg,rgba(35,130,220,.2),rgba(5,23,54,.22));border-top:1px solid rgba(255,255,255,.13);overflow-wrap:anywhere;font-size:15px}
#exo-global-order-overlay .exo-order-meta{margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(235,245,255,.84)}
#exo-global-order-overlay .exo-order-hint{margin-top:14px;font-size:11px;color:rgba(245,250,255,.72);text-align:center}
@keyframes exoLogoWave{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.9);opacity:0}}
@keyframes exoGlobalLogoPulse{0%,100%{transform:scale(1);box-shadow:0 0 12px #00bfff,0 0 32px rgba(0,160,255,.85),0 0 70px rgba(0,105,255,.48)}50%{transform:scale(1.045);box-shadow:0 0 18px #39d7ff,0 0 42px rgba(0,160,255,.98),0 0 82px rgba(0,105,255,.58)}}
@keyframes exoGlobalCardIn{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){#exo-global-order-overlay .exo-order-logo{animation:none}}


/* EXX NEWS / ARTICLE FEED MEDIA */
#homeFeed img.post-media.wide-media { aspect-ratio:16/9 !important; width:calc(100% - 24px) !important; height:auto !important; max-height:none !important; object-fit:cover !important; }
#homeFeed .news-title-link, #homeFeed .news-body-link { color:inherit; text-decoration:none; }
#homeFeed .news-title-link:hover h3 { color:#4f46e5; }
#homeFeed .post-head > a { display:flex; flex:0 0 auto; }

/* Footer markup styles formerly written as inline style attributes */
.exx-ad-slot{display:block;width:100%;height:250px;background:#000}
.exx-side-card{display:flex;gap:10px;padding:10px;align-items:center}
.exx-side-card-thumb{width:74px;height:62px;object-fit:cover;border-radius:9px}
.exx-side-card-title{font-size:12px}
.exx-side-card-meta{display:block;color:#8791a5;margin-top:5px}
.exx-news-title{margin:10px 12px;font-size:17px;line-height:1.4}
.exx-hidden{display:none}
.search-result-pad{padding:16px}


/* ==========================================================
   ExploreX final layout conflict fix
   Keep the global header full-width, prevent duplicate overrides,
   and preserve independent desktop-column scrolling.
   ========================================================== */
:root { --explorex-header-height: 68px; }

@media (min-width: 1051px) {
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
    }
    .layout {
        display: grid !important;
        grid-template-columns: 220px minmax(0, 720px) 270px !important;
        gap: 24px !important;
        width: 100%;
        max-width: 1440px !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding: var(--explorex-header-height) 22px 0 !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        align-items: stretch !important;
    }
    .layout > .side {
        position: fixed !important;
        top: var(--explorex-header-height) !important;
        left: max(22px, calc((100vw - 1440px) / 2 + 22px)) !important;
        width: 220px !important;
        height: calc(100vh - var(--explorex-header-height)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-top: 20px !important;
        z-index: 30 !important;
    }
    .layout > .center {
        grid-column: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
        height: calc(100vh - var(--explorex-header-height)) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 12px 90px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        scrollbar-gutter: auto !important;
        background: transparent !important;
    }
    .layout > .center > .topbar,
    .layout > .center .topbar {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: var(--explorex-header-height) !important;
        margin: 0 !important;
        padding: 0 max(22px, calc((100vw - 1440px) / 2 + 22px)) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(8, 11, 22, .98) !important;
        color: #fff !important;
        box-shadow: 0 5px 22px rgba(12, 20, 40, .18) !important;
        backdrop-filter: blur(15px);
        z-index: 10000 !important;
    }
    .layout > .center .topbar .brand,
    .layout > .center .topbar .top-icon { color: #202638 !important; }
    .layout > .center .topbar .search-form {
        background: #111827 !important;
        border-color: #26334b !important;
    }
    .layout > .center .topbar .search-form input { color: #202638 !important; }
    .layout > .right-rail {
        display: block !important;
        position: fixed !important;
        top: var(--explorex-header-height) !important;
        left: calc(50% + 310px) !important;
        width: 270px !important;
        height: calc(100vh - var(--explorex-header-height)) !important;
        padding: 18px 0 30px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 20 !important;
    }
}

@media (min-width: 651px) and (max-width: 1050px) {
    :root { --explorex-header-height: 68px; }
    html, body { height: 100%; overflow: hidden !important; }
    .layout {
        display: grid !important;
        grid-template-columns: 190px minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 900px !important;
        height: 100vh !important;
        padding: var(--explorex-header-height) 14px 0 !important;
        overflow: hidden !important;
    }
    .layout > .side {
        position: fixed !important;
        top: var(--explorex-header-height) !important;
        left: 14px !important;
        width: 190px !important;
        height: calc(100vh - var(--explorex-header-height)) !important;
        overflow-y: auto !important;
        z-index: 30 !important;
    }
    .layout > .center {
        grid-column: 2 !important;
        height: calc(100vh - var(--explorex-header-height)) !important;
        min-height: 0 !important;
        padding: 0 10px 86px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    .layout > .center .topbar {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: var(--explorex-header-height) !important;
        padding: 0 18px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: rgba(8, 11, 22, .98) !important;
        color: #fff !important;
        z-index: 10000 !important;
    }
    .layout > .center .topbar .brand,
    .layout > .center .topbar .top-icon { color: #202638 !important; }
    .layout > .right-rail { display: none !important; }
}

@media (max-width: 650px) {
    :root { --explorex-header-height: 52px; }
    html, body {
        width: 100%;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    .layout {
        display: block !important;
        width: 100% !important;
        max-width: 500px !important;
        height: auto !important;
        min-height: 0 !important;
        padding: var(--explorex-header-height) 0 0 !important;
        overflow: visible !important;
    }
    .layout > .side,
    .layout > .right-rail { display: none !important; }
    .layout > .center {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100vh - var(--explorex-header-height)) !important;
        padding: 8px 3px 86px !important;
        overflow: visible !important;
        border: 0 !important;
    }
    .layout > .center .topbar {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: var(--explorex-header-height) !important;
        padding: 0 10px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: rgba(8, 11, 22, .98) !important;
        color: #fff !important;
        z-index: 10000 !important;
    }
    .layout > .center .topbar .brand,
    .layout > .center .topbar .top-icon { color: #202638 !important; }
    .layout > .center .topbar .search-form {
        background: #111827 !important;
        border-color: #26334b !important;
    }
    .layout > .center .topbar .search-form input { color: #202638 !important; }
    .exx-mobile-nav { z-index: 10001 !important; }
}


/* ExploreX desktop header: match the homepage light background */
@media (min-width: 651px) {
  .center > .topbar,
  .center .topbar,
  html[data-theme="dark"] .topbar {
    background: rgba(244, 247, 255, .96) !important;
    color: #122345 !important;
    border-bottom: 1px solid rgba(237, 241, 250, .9) !important;
    box-shadow: 0 5px 22px rgba(29, 43, 79, .055) !important;
  }
  .center .topbar .brand,
  .center .topbar .top-icon,
  .center .topbar .search-icon { color: #122345 !important; }
  .center .topbar .search-form {
    background: #fff !important;
    border-color: #edf1fa !important;
  }
  .center .topbar .search-form input { color: #122345 !important; }
}

/* ==========================================================
   FINAL RESPONSIVE THEME POLISH
   Desktop: always use the homepage light header, independent
   of the saved theme preference.
   Mobile: the complete website uses a black/dark appearance.
   ========================================================== */
@media (min-width: 651px) {
  html body .center .topbar,
  html[data-theme="dark"] body .center .topbar,
  html[data-theme="dark"] body .topbar {
    background: #f4f7ff !important;
    background-color: #f4f7ff !important;
    color: #122345 !important;
    border-bottom: 1px solid #e4eaf7 !important;
    box-shadow: 0 5px 22px rgba(29, 43, 79, .055) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
  }
  html body .center .topbar .brand,
  html body .center .topbar .ex-mobile-brand,
  html body .center .topbar .top-icon,
  html body .center .topbar a,
  html body .center .topbar button,
  html body .center .topbar .search-icon,
  html[data-theme="dark"] body .center .topbar .brand,
  html[data-theme="dark"] body .center .topbar .top-icon,
  html[data-theme="dark"] body .center .topbar a,
  html[data-theme="dark"] body .center .topbar button {
    color: #122345 !important;
  }
  html body .center .topbar .search-form,
  html[data-theme="dark"] body .center .topbar .search-form {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #dfe6f3 !important;
  }
  html body .center .topbar .search-form input,
  html[data-theme="dark"] body .center .topbar .search-form input {
    background: transparent !important;
    color: #122345 !important;
  }
  html body .center .topbar .search-form input::placeholder {
    color: #748097 !important;
  }
  html body .center .topbar .ex-header-btn,
  html[data-theme="dark"] body .center .topbar .ex-header-btn {
    background: #f8faff !important;
    color: #122345 !important;
    border-color: #dfe6f3 !important;
    box-shadow: 0 2px 8px rgba(29, 43, 79, .06) !important;
  }
}

/* Mobile black theme: deliberately independent of html[data-theme]. */
@media (max-width: 650px) {
  html,
  html body,
  html body .layout,
  html body .layout > .center,
  html body .center,
  html body main,
  html body .page-content,
  html body .content,
  html body .feed,
  html body #homeFeed {
    color-scheme: dark !important;
    background: #000000 !important;
    background-color: #000000 !important;
    color: #f5f5f5 !important;
  }

  html body .center .topbar,
  html[data-theme="dark"] body .center .topbar {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #202020 !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .4) !important;
  }
  html body .center .topbar .brand,
  html body .center .topbar .ex-mobile-brand,
  html body .center .topbar .top-icon,
  html body .center .topbar a,
  html body .center .topbar button,
  html body .center .topbar .search-icon,
  html[data-theme="dark"] body .center .topbar .brand,
  html[data-theme="dark"] body .center .topbar .top-icon {
    color: #ffffff !important;
  }
  html body .center .topbar .ex-image-brand img {
    filter: none !important;
  }
  html body .center .topbar .search-form,
  html body .center .topbar .ex-header-btn {
    background: #111111 !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
    box-shadow: none !important;
  }
  html body .center .topbar .search-form input {
    background: transparent !important;
    color: #ffffff !important;
  }
  html body .center .topbar .search-form input::placeholder {
    color: #a3a3a3 !important;
  }

  /* Main cards, panels, and form surfaces */
  html body .post,
  html body .rail-card,
  html body .side-note,
  html body .simple-list,
  html body .form-card,
  html body .page-card,
  html body .settings-card,
  html body .modal-content,
  html body .dropdown-menu,
  html body .search-results,
  html body .home-comment-dialog,
  html body .home-comment-form,
  html body .home-comment-item,
  html body .home-product-media,
  html body .home-product-logo-link {
    background: #0b0b0b !important;
    background-color: #0b0b0b !important;
    color: #f5f5f5 !important;
    border-color: #242424 !important;
    box-shadow: none;
  }
  html body .feed-head h2,
  html body .section-title h2,
  html body .page-title,
  html body .post-owner b,
  html body .home-product-name,
  html body .home-product-title-row,
  html body .list-row b,
  html body .rail-card h3,
  html body label,
  html body .home-comment-item p {
    color: #f5f5f5 !important;
  }
  html body .post-text,
  html body .post-actions,
  html body .post-owner small,
  html body .page-intro,
  html body .rail-card p,
  html body .list-row small,
  html body .home-product-seller,
  html body .home-product-category,
  html body .home-comment-item small,
  html body .home-comment-loading,
  html body .home-comment-empty {
    color: #a3a3a3 !important;
  }
  html body input,
  html body textarea,
  html body select,
  html body .home-comment-form textarea,
  html body .form-card input,
  html body .form-card textarea,
  html body .form-card select {
    background: #111111 !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
  }
  html body input::placeholder,
  html body textarea::placeholder {
    color: #9a9a9a !important;
  }
  html body .topic-pills a {
    background: #151515 !important;
    color: #dedede !important;
    border: 1px solid #292929 !important;
    box-shadow: none !important;
  }
  html body .topic-pills a.active {
    background: #252525 !important;
    color: #ffffff !important;
    border-color: #454545 !important;
  }
  html body .mobile-nav,
  html body .exx-mobile-nav {
    background: rgba(0, 0, 0, .98) !important;
    background-color: #000000 !important;
    border-top: 1px solid #242424 !important;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .35) !important;
  }
  html body .mobile-nav a,
  html body .exx-mobile-nav a,
  html body .exx-mobile-nav .mobile-nav-item {
    color: #a3a3a3 !important;
  }
  html body .mobile-nav a.active,
  html body .exx-mobile-nav a.active,
  html body .exx-mobile-nav .mobile-nav-item.active {
    color: #ffffff !important;
  }
  html body .category-icon {
    background: #171717 !important;
    color: #d4d4d4 !important;
  }
  html body .simple-list .list-row,
  html body .creator,
  html body .home-comment-heading,
  html body .home-comment-form {
    border-color: #242424 !important;
  }
  html body .follow-btn {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
  }
  html body .ex-menu-panel,
  html body .ex-side-drawer {
    background: #000000 !important;
    color: #f5f5f5 !important;
  }
}


/* ==========================================================
   EXPLOREX FINAL DEVICE THEME RULES
   Desktop: always light/colorful homepage theme, including header.
   Mobile: force the complete interface into a black theme.
   ========================================================== */

/* Desktop/tablet: ignore any saved dark-theme preference. */
@media (min-width: 651px) {
  html,
  html[data-theme="dark"] {
    color-scheme: light !important;
    --bg: #f4f7ff !important;
    --card: #ffffff !important;
    --ink: #122345 !important;
    --muted: #748097 !important;
    --line: #e8edf8 !important;
    --soft: #eef3ff !important;
    --shadow: 0 5px 22px rgba(29, 43, 79, .055) !important;
  }

  html body,
  html[data-theme="dark"] body,
  html[data-theme="dark"] .layout,
  html[data-theme="dark"] .center {
    color-scheme: light !important;
    color: #122345 !important;
    background-color: #f4f7ff !important;
  }

  html[data-theme="dark"] .post,
  html[data-theme="dark"] .rail-card,
  html[data-theme="dark"] .side-note,
  html[data-theme="dark"] .simple-list,
  html[data-theme="dark"] .form-card,
  html[data-theme="dark"] .page-card,
  html[data-theme="dark"] .settings-card,
  html[data-theme="dark"] .modal-content,
  html[data-theme="dark"] .dropdown-menu,
  html[data-theme="dark"] .search-results {
    background: #ffffff !important;
    color: #122345 !important;
    border-color: #e8edf8 !important;
  }

  html[data-theme="dark"] .post-owner b,
  html[data-theme="dark"] .section-title h2,
  html[data-theme="dark"] .feed-head h2,
  html[data-theme="dark"] .rail-card h3,
  html[data-theme="dark"] .side-note b,
  html[data-theme="dark"] .page-title,
  html[data-theme="dark"] label,
  html[data-theme="dark"] .list-row b,
  html[data-theme="dark"] .post-text,
  html[data-theme="dark"] .post-actions,
  html[data-theme="dark"] .page-intro,
  html[data-theme="dark"] .rail-card p {
    color: #122345 !important;
  }

  html[data-theme="dark"] .side-nav a { color: #53627e !important; }
  html[data-theme="dark"] .side-nav a.active,
  html[data-theme="dark"] .side-nav a:hover {
    background: #eeecff !important;
    color: #5738ff !important;
  }

  html[data-theme="dark"] .topbar,
  html[data-theme="dark"] body .topbar,
  html[data-theme="dark"] body .center .topbar,
  html body .center .topbar {
    background: rgba(244, 247, 255, .98) !important;
    background-color: #f4f7ff !important;
    color: #122345 !important;
    border-bottom: 1px solid #e4eaf7 !important;
    box-shadow: 0 5px 22px rgba(29, 43, 79, .055) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
  }

  html[data-theme="dark"] .topbar .brand,
  html[data-theme="dark"] .topbar .ex-mobile-brand,
  html[data-theme="dark"] .topbar .top-icon,
  html[data-theme="dark"] .topbar a,
  html[data-theme="dark"] .topbar button,
  html[data-theme="dark"] .topbar .search-icon,
  html body .center .topbar .brand,
  html body .center .topbar .top-icon {
    color: #122345 !important;
  }

  html[data-theme="dark"] .topbar .search-form,
  html[data-theme="dark"] .search-form {
    background: #ffffff !important;
    border-color: #dfe6f3 !important;
  }

  html[data-theme="dark"] .topbar .search-form input,
  html[data-theme="dark"] .search-form input {
    background: transparent !important;
    color: #122345 !important;
  }

  html[data-theme="dark"] .topbar .ex-header-btn {
    background: #f8faff !important;
    color: #122345 !important;
    border-color: #dfe6f3 !important;
  }

  html[data-theme="dark"] input,
  html[data-theme="dark"] textarea,
  html[data-theme="dark"] select,
  html[data-theme="dark"] .form-card input,
  html[data-theme="dark"] .form-card textarea,
  html[data-theme="dark"] .form-card select {
    background: #ffffff !important;
    color: #122345 !important;
    border-color: #dfe6f3 !important;
  }

  html[data-theme="dark"] .topic-pills a {
    background: #f0f3fa !important;
    color: #3f4960 !important;
  }
  html[data-theme="dark"] .topic-pills a.active {
    background: linear-gradient(120deg, #297cff, #5c32fa) !important;
    color: #ffffff !important;
  }
}

/* Mobile: the entire website is black, regardless of saved theme. */
@media (max-width: 650px) {
  html,
  html body,
  html body .layout,
  html body .layout > .center,
  html body .center,
  html body main,
  html body section,
  html body .page-content,
  html body .content,
  html body .feed,
  html body #homeFeed {
    color-scheme: dark !important;
    background: #000000 !important;
    background-color: #000000 !important;
    color: #f5f5f5 !important;
  }

  html body .center .topbar,
  html[data-theme="dark"] body .center .topbar,
  html body .topbar {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #242424 !important;
    box-shadow: none !important;
  }

  html body .post,
  html body .rail-card,
  html body .side-note,
  html body .simple-list,
  html body .form-card,
  html body .page-card,
  html body .settings-card,
  html body .modal-content,
  html body .dropdown-menu,
  html body .search-results,
  html body .home-comment-dialog,
  html body .home-comment-form,
  html body .creator,
  html body .list-row {
    background: #0b0b0b !important;
    background-color: #0b0b0b !important;
    color: #f5f5f5 !important;
    border-color: #252525 !important;
    box-shadow: none !important;
  }

  html body h1,
  html body h2,
  html body h3,
  html body h4,
  html body p,
  html body label,
  html body .page-title,
  html body .feed-head h2,
  html body .section-title h2,
  html body .post-owner b,
  html body .home-product-name,
  html body .list-row b {
    color: #f5f5f5 !important;
  }

  html body input,
  html body textarea,
  html body select,
  html body .form-card input,
  html body .form-card textarea,
  html body .form-card select {
    background: #111111 !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
  }

  html body .mobile-nav,
  html body .exx-mobile-nav {
    background: #000000 !important;
    background-color: #000000 !important;
    border-top: 1px solid #242424 !important;
  }

  html body .ex-menu-panel,
  html body .ex-side-drawer {
    background: #000000 !important;
    color: #f5f5f5 !important;
  }
}


/* ==========================================================
   ExploreX desktop reference layout + mobile all-black theme
   Desktop: bright gradient canvas, full-width light header,
   roomy three-column feed. Mobile: unified black app surface.
   ========================================================== */

/* Shared header search (desktop) */
.ex-desktop-search{
  display:flex!important;align-items:center!important;gap:12px!important;
  width:min( min(46vw, 690px), 690px)!important;min-width:260px!important;
  height:46px!important;margin:0 auto!important;padding:0 18px!important;
  border:1px solid #e8edf7!important;border-radius:28px!important;
  background:rgba(240,243,250,.94)!important;box-shadow:inset 0 1px 2px rgba(24,44,86,.025)!important;
  position:relative!important;flex:0 1 690px!important;
}
.ex-desktop-search .ex-search-symbol{font-size:27px!important;line-height:1!important;color:#50658b!important;transform:rotate(-20deg)}
.ex-desktop-search input{width:100%!important;min-width:0!important;border:0!important;outline:0!important;background:transparent!important;color:#17294e!important;font-size:14px!important}
.ex-desktop-search input::placeholder{color:#8291ad!important;opacity:1}
.ex-desktop-search button{border:0!important;background:transparent!important;color:#3557a0!important;font-size:12px!important;font-weight:800!important;padding:6px 0!important}
@media(min-width:1051px){
  html,body{color-scheme:light!important;background:#f4f7ff!important;color:#14264a!important}
  body{background-image:radial-gradient(ellipse at 70% 38%,rgba(126,164,255,.19),transparent 36%),radial-gradient(ellipse at 12% 74%,rgba(255,184,214,.24),transparent 32%)!important}
  html[data-theme="dark"]{color-scheme:light!important}
  html[data-theme="dark"] body,html[data-theme="dark"] .layout,html[data-theme="dark"] .center{background-color:transparent!important;color:#14264a!important}
  html body .layout{
    display:grid!important;grid-template-columns:260px minmax(560px,1fr) 400px!important;
    gap:24px!important;width:100%!important;max-width:1680px!important;margin:0 auto!important;
    padding:72px 24px 0!important;height:100vh!important;min-height:100vh!important;
    overflow:hidden!important;align-items:stretch!important;background:transparent!important
  }
  html body .layout>.side{
    position:fixed!important;top:72px!important;left:max(24px,calc((100vw - 1680px)/2 + 24px))!important;
    width:260px!important;height:calc(100vh - 72px)!important;overflow-y:auto!important;
    padding:24px 4px 24px 0!important;gap:20px!important;background:transparent!important;
    z-index:40!important
  }
  html body .layout>.center{
    grid-column:2!important;grid-row:1!important;min-width:0!important;width:100%!important;
    height:calc(100vh - 72px)!important;min-height:0!important;overflow-y:auto!important;
    overflow-x:hidden!important;padding:18px 0 90px!important;border:0!important;
    background:transparent!important;scrollbar-gutter:auto!important
  }
  html body .layout>.right-rail{
    display:block!important;position:fixed!important;top:72px!important;
    left:calc(50% + min( calc((100vw - 1680px)/2 + 24px + 260px + 24px + 1px), 20vw))!important;
    right:max(24px,calc((100vw - 1680px)/2 + 24px))!important;
    width:400px!important;height:calc(100vh - 72px)!important;overflow-y:auto!important;
    padding:20px 0 30px!important;background:transparent!important;z-index:25!important
  }
  /* Use a robust viewport-relative right rail placement on common desktop widths. */
  html body .layout>.right-rail{left:auto!important;right:max(24px,calc((100vw - 1680px)/2 + 24px))!important}
  html body .topbar,html body .center>.topbar{
    position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;
    max-width:none!important;height:72px!important;padding:0 max(28px,calc((100vw - 1680px)/2 + 28px))!important;
    margin:0!important;display:flex!important;align-items:center!important;gap:24px!important;
    background:rgba(255,255,255,.94)!important;background-color:#fff!important;color:#14264a!important;
    border:0!important;border-bottom:1px solid #e8edf7!important;border-radius:0!important;
    box-shadow:0 4px 22px rgba(32,57,105,.055)!important;backdrop-filter:blur(18px)!important;z-index:2000!important
  }
  html body .topbar>.ex-image-brand:first-child{display:inline-flex!important;flex:0 0 230px!important;width:230px!important;margin:0!important}
  html body .topbar>.ex-image-brand:first-child img{width:190px!important;max-width:190px!important;max-height:56px!important;object-fit:contain!important}
  html body .topbar .ex-mobile-brand{display:none!important}
  html body .topbar .ex-header-tools{margin-left:20px!important;gap:12px!important;flex:0 0 auto!important}
  html body .topbar .ex-header-btn{width:46px!important;height:46px!important;border-radius:50%!important;background:#f3f6fc!important;border:1px solid #e8edf7!important;color:#1c3768!important;box-shadow:none!important;font-size:21px!important}
  html body .topbar .ex-profile-header-btn{background:linear-gradient(135deg,#287cff,#693cff)!important;color:#fff!important;border-color:transparent!important}
  html body .topbar .ex-profile-header-btn svg{stroke:#fff!important}
  html body .topbar .ex-menu-header-btn{background:transparent!important;border-color:transparent!important;color:#20365e!important}
  html body .topbar .brand,html body .topbar .top-icon,html body .topbar a,html body .topbar button{color:#1c3768!important}
  html body .topbar .ex-desktop-search{display:flex!important}
  html body .side .brand{display:none!important}
  html body .side-nav{gap:7px!important}
  html body .side-nav a{min-height:58px!important;padding:14px 18px!important;border-radius:16px!important;color:#20375e!important;font-size:15px!important;gap:15px!important}
  html body .side-nav a .ico{width:26px!important;font-size:23px!important;color:#287cff!important}
  html body .side-nav a.active,html body .side-nav a:hover{background:linear-gradient(115deg,#08a6f7,#6755ff)!important;color:#fff!important;box-shadow:0 8px 20px rgba(55,111,255,.19)!important}
  html body .side-nav a.active .ico,html body .side-nav a:hover .ico{color:#fff!important}
  html body .side-note{margin-top:auto!important;background:linear-gradient(120deg,#d8f7ff,#dcd9ff)!important;border:1px solid rgba(255,255,255,.65)!important;border-radius:18px!important;padding:20px!important;color:#61789e!important;font-size:13px!important}
  html body .side-note b{color:#162d54!important;font-size:14px!important}
  html body .topic-pills{display:flex!important;gap:10px!important;padding:0 0 14px!important;overflow-x:auto!important}
  html body .topic-pills a{padding:11px 23px!important;border-radius:28px!important;background:rgba(255,255,255,.82)!important;color:#5d6e8e!important;font-size:14px!important;font-weight:700!important;box-shadow:0 2px 12px rgba(44,70,118,.04)!important}
  html body .topic-pills a.active{background:linear-gradient(120deg,#08a6f7,#6945ff)!important;color:#fff!important;box-shadow:0 7px 18px rgba(64,102,255,.2)!important}
  html body .explorex-ad-section{margin:0 0 14px!important;border-radius:18px!important;overflow:hidden!important}
  html body .explorex-ad-fallback{height:clamp(270px,22vw,360px)!important;border-radius:18px!important;overflow:hidden!important;box-shadow:0 8px 26px rgba(32,63,122,.10)!important}
  html body .explorex-ad-fallback img{width:100%!important;height:100%!important;object-fit:cover!important}
  html body .explorex-ad-fallback .hero-copy{left:32px!important;top:50%!important;width:66%!important}
  html body .explorex-ad-fallback .hero-copy h1{font-size:clamp(34px,3.1vw,58px)!important;line-height:1.04!important;letter-spacing:-1.8px!important}
  html body .explorex-ad-fallback .hero-copy p{font-size:16px!important;line-height:1.45!important;max-width:430px!important}
  html body .feed-head,html body .section-title{margin-top:26px!important}
  html body .feed-head h2,html body .section-title h2{font-size:22px!important;color:#152b52!important}
  html body .trending-strip{grid-auto-columns:calc((100% - 24px)/3)!important;gap:12px!important;padding:0 0 8px!important}
  html body .trending-strip .trend-card{height:clamp(130px,10vw,180px)!important;border-radius:14px!important;box-shadow:0 5px 14px rgba(22,42,80,.08)!important}
  html body .trending-strip .trend-card img{height:100%!important}
  html body #homeFeed .post{border-radius:17px!important;border:1px solid rgba(229,235,247,.95)!important;box-shadow:0 6px 24px rgba(29,50,94,.055)!important;background:rgba(255,255,255,.9)!important;color:#14264a!important}
  html body .explorex-right-ad-wrap,html body .exx-right-widget{background:rgba(255,255,255,.92)!important;border:1px solid rgba(231,237,248,.95)!important;border-radius:18px!important;box-shadow:0 5px 20px rgba(28,49,91,.05)!important;margin:0 0 18px!important;padding:18px!important;color:#14264a!important}
  html body .explorex-right-ad-label,html body .exx-widget-heading strong{color:#14264a!important;font-size:17px!important}
  html body .exx-widget-heading a{color:#315fff!important}
  html body .explorex-right-ad-box{border-radius:13px!important;overflow:hidden!important}
  html body .exx-category-grid{gap:12px!important}
  html body .exx-category-grid a{color:#20375e!important}
  html body .exx-category-icon{border-radius:15px!important}
  html body .exx-latest-reels{gap:8px!important}
}
@media (min-width:1051px) and (max-width:1350px){
  html body .layout{grid-template-columns:220px minmax(460px,1fr) 300px!important;gap:18px!important;padding-left:18px!important;padding-right:18px!important}
  html body .layout>.side{width:220px!important;left:18px!important}
  html body .layout>.right-rail{width:300px!important;right:18px!important}
  html body .topbar{padding-left:20px!important;padding-right:20px!important;gap:14px!important}
  html body .topbar>.ex-image-brand:first-child{flex-basis:190px!important;width:190px!important}
  html body .topbar>.ex-image-brand:first-child img{width:170px!important}
  html body .ex-desktop-search{min-width:180px!important}
}
@media (max-width:1050px){
  .ex-desktop-search{display:none!important}
}

/* Mobile/tablet app appearance: black surfaces throughout. */
@media (max-width:900px){
  html,html body,html body .layout,html body .center,html body .side,html body .right-rail{
    background:#000!important;color:#f5f5f7!important
  }
  html body{background-image:none!important;color-scheme:dark!important}
  html body .topbar,html body .center>.topbar{
    background:rgba(0,0,0,.97)!important;background-color:#000!important;color:#fff!important;
    border-bottom:1px solid #242424!important;box-shadow:0 5px 20px rgba(0,0,0,.45)!important
  }
  html body .topbar .brand,html body .topbar .ex-mobile-brand,html body .topbar a,html body .topbar button{color:#fff!important}
  html body .topbar .ex-header-btn{background:#151515!important;border-color:#303030!important;color:#fff!important}
  html body .topbar .ex-profile-header-btn{background:linear-gradient(135deg,#287cff,#6945ff)!important}
  html body .side-nav a,html body .topic-pills a{background:#111!important;color:#e7e7e7!important}
  html body .side-nav a.active,html body .topic-pills a.active{background:linear-gradient(120deg,#087ff5,#613cff)!important;color:#fff!important}
  html body .post,html body .rail-card,html body .simple-list,html body .form-card,html body .exx-right-widget,html body .explorex-right-ad-wrap{
    background:#101010!important;color:#f5f5f7!important;border-color:#292929!important
  }
  html body .post-text,html body .post-owner b,html body .section-title h2,html body .feed-head h2,html body .page-title,html body .list-row b,html body label{color:#f5f5f7!important}
  html body .post-owner small,html body .post-actions,html body .page-intro,html body .list-row small,html body .rail-card p{color:#aaa!important}
  html body input,html body textarea,html body select,html body .form-card input,html body .form-card textarea,html body .form-card select{
    background:#161616!important;color:#fff!important;border-color:#333!important
  }
  html body .mobile-nav{background:rgba(0,0,0,.98)!important;border-top:1px solid #292929!important}
  html body .mobile-nav a{color:#aaa!important}
  html body .mobile-nav a.active{color:#fff!important}
  html body .side-note{background:linear-gradient(120deg,#171717,#101010)!important;color:#aaa!important;border-color:#292929!important}
  html body .side-note b{color:#fff!important}
  html body .ex-menu-panel{background:#000!important;color:#fff!important}
}


/* ==========================================================
   FINAL DESKTOP HEADER + RIGHT SPONSORED CARD FIT FIX
   Desktop: light/colorful header, no search bar.
   Mobile/tablet: retain the existing black app theme.
   ========================================================== */
@media (min-width: 1051px) {
  html body .topbar,
  html body .center > .topbar,
  html[data-theme="dark"] body .topbar,
  html[data-theme="dark"] body .center > .topbar {
    background: #f4f7ff !important;
    background-color: #f4f7ff !important;
    color: #14264a !important;
    border: 0 !important;
    border-bottom: 1px solid #e5ebf8 !important;
    box-shadow: 0 4px 20px rgba(35, 62, 112, .07) !important;
    backdrop-filter: blur(18px) !important;
  }

  /* Remove both header search variants on desktop; keep logo and actions. */
  html body .topbar .search-form,
  html body .topbar .search-results,
  html body .topbar .ex-desktop-search,
  html[data-theme="dark"] body .topbar .search-form,
  html[data-theme="dark"] body .topbar .search-results,
  html[data-theme="dark"] body .topbar .ex-desktop-search {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
  }

  html body .topbar > .ex-image-brand:first-child {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 auto 0 0 !important;
  }
  html body .topbar > .ex-image-brand:first-child img {
    width: 170px !important;
    max-width: 190px !important;
    max-height: 54px !important;
    object-fit: contain !important;
  }
  html body .topbar .brand,
  html body .topbar .ex-mobile-brand,
  html body .topbar a,
  html body .topbar button,
  html[data-theme="dark"] body .topbar .brand,
  html[data-theme="dark"] body .topbar .ex-mobile-brand,
  html[data-theme="dark"] body .topbar a,
  html[data-theme="dark"] body .topbar button {
    color: #17345f !important;
  }
  html body .topbar .ex-header-tools {
    margin-left: auto !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
  }
  html body .topbar .ex-header-btn,
  html[data-theme="dark"] body .topbar .ex-header-btn {
    background: #f9fbff !important;
    border: 1px solid #e1e9f7 !important;
    color: #17345f !important;
    box-shadow: 0 2px 8px rgba(29, 55, 104, .06) !important;
  }
  html body .topbar .ex-profile-header-btn {
    background: linear-gradient(135deg, #287cff, #6945ff) !important;
    color: #fff !important;
    border-color: transparent !important;
  }
  html body .topbar .ex-profile-header-btn svg { stroke: #fff !important; }

  /* Keep the sponsored panel inside the right rail's available width. */
  html body .layout > .right-rail {
    width: 400px !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  html body .right-rail .explorex-right-ad-wrap {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 0 16px !important;
    padding: 16px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }
  html body .right-rail .explorex-right-ad-label {
    display: block !important;
    margin: 0 0 10px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    color: #14264a !important;
  }
  html body .right-rail .explorex-right-ad-stack {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body .right-rail .explorex-right-ad-box {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #c9f4ff 0%, #dceaff 55%, #dcd8ff 100%) !important;
  }
  html body .right-rail .explorex-right-ad-box + .explorex-right-ad-box {
    display: none !important;
  }
  html body .right-rail .explorex-right-ad-box ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: transparent !important;
  }
  html body .right-rail .explorex-right-ad-wrap:after {
    content: "Explore more. Go further." !important;
    position: absolute !important;
    left: 30px !important;
    right: 12px !important;
    bottom: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    color: #fff !important;
    font-size: clamp(14px, 1.1vw, 18px) !important;
    line-height: 1.3 !important;
    font-weight: 850 !important;
    text-shadow: 0 1px 6px #064b8a !important;
  }
}

/* Do not apply desktop header rules to mobile; mobile remains fully black. */
@media (max-width: 1050px) {
  html body .topbar,
  html body .center > .topbar {
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
  }
}


/* ==========================================================
   Shared header and page styles moved from includes/header.php
   ========================================================== */

.page-title{font-size:23px;letter-spacing:-.6px;margin:12px 4px 16px}
.page-intro{color:#748097;font-size:12px;line-height:1.6;margin:0 4px 16px}
.page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.page-grid .post{margin:0}
.simple-list{background:#fff;border:1px solid #edf0f6;border-radius:16px;padding:8px 13px}
.list-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #f0f1f6}.list-row:last-child{border-bottom:0}.list-row .grow{flex:1;min-width:0}.list-row b{font-size:12px;display:block}.list-row small{font-size:10px;color:#748097;display:block;margin-top:4px}
.profile-cover{height:190px;border-radius:16px;background-size:cover;background-position:center}.profile-summary{display:flex;align-items:center;gap:12px;margin-top:-24px;padding:0 14px;position:relative}.profile-summary .avatar{width:70px;height:70px;border:4px solid #fff}.profile-stats{display:flex;justify-content:space-around;padding:18px 0;text-align:center}.profile-stats b{display:block;font-size:17px}.profile-stats small{font-size:10px;color:#748097}
.form-card{background:#fff;border:1px solid #edf0f6;border-radius:16px;padding:16px}.form-card input,.form-card textarea,.form-card select{width:100%;border:1px solid #e7eaf2;border-radius:10px;padding:12px;margin:5px 0 12px;background:#fff}.primary-btn{border:0;border-radius:24px;background:linear-gradient(120deg,#297cff,#5c32fa);color:#fff;font-weight:800;padding:12px 20px}
/* ExploreX shared header: deliberately scoped so it does not override feed cards/layout. */
.ex-header-tools{display:flex;align-items:center;gap:8px;margin-left:4px;flex-shrink:0}.ex-header-btn{position:relative;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #273044;border-radius:12px;background:#101522;color:#fff;font-size:20px;cursor:pointer;text-decoration:none}.ex-header-btn:hover{background:#1a2335}.ex-header-btn .ex-count{position:absolute;right:-4px;top:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:20px;background:#ff3152;color:#fff;font-size:9px;line-height:16px;text-align:center;border:1px solid #080b14}.ex-mobile-brand{display:none}.topbar{position:relative;z-index:25}
.ex-logo-glow{display:inline-flex;align-items:center;font-weight:950;letter-spacing:-1.3px;color:#fff;text-decoration:none;white-space:nowrap}.ex-logo-glow span{color:#48a5ff;text-shadow:0 0 7px #168dff,0 0 16px #168dff,0 0 27px #168dff}
.ex-drawer-overlay{position:fixed;inset:0;background:rgba(1,5,14,.68);backdrop-filter:blur(5px);z-index:1000;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}.ex-drawer-overlay.show{opacity:1;visibility:visible}.ex-side-drawer{position:fixed;z-index:1001;top:0;right:0;width:min(390px,88vw);height:100dvh;overflow:auto;background:#0b1020;color:#f5f7ff;border-left:1px solid #26334d;box-shadow:-20px 0 70px #0008;padding:20px 18px 28px;transform:translateX(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);visibility:hidden}.ex-side-drawer.open{transform:translateX(0);visibility:visible}.ex-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:4px 0 18px;border-bottom:1px solid #222b40}.ex-drawer-close{border:1px solid #2b3550;background:#141b2b;color:#fff;border-radius:11px;width:38px;height:38px;font-size:24px;cursor:pointer}.ex-drawer-user{display:flex;align-items:center;gap:12px;padding:17px 2px}.ex-drawer-avatar{width:43px;height:43px;border-radius:50%;object-fit:cover;background:#1e2b43;border:1px solid #3b4b6c}.ex-drawer-user strong{display:block;font-size:13px}.ex-drawer-user small{display:block;color:#9ba9c4;font-size:11px;margin-top:3px}.ex-pwa-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 16px}.ex-pwa-btn{border:1px solid #2d3d5d;border-radius:12px;background:linear-gradient(135deg,#17233a,#11192b);color:#fff;font-weight:750;padding:11px 9px;font-size:11px;cursor:pointer}.ex-drawer-label{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:#8292b1;font-weight:900;margin:18px 8px 7px}.ex-drawer-links{display:grid;gap:4px}.ex-drawer-links a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;color:#dce5f7;font-size:13px;font-weight:650;text-decoration:none}.ex-drawer-links a:hover,.ex-drawer-links a.active{background:#172641;color:#74b8ff}.ex-drawer-links .ex-link-icon{width:22px;text-align:center;font-size:17px;color:#80baff}.ex-drawer-foot{border-top:1px solid #222b40;margin-top:17px;padding-top:14px;color:#8493ae;font-size:10px;line-height:1.6}
@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:0!important}.layout>.side{display:none!important}.center{border-left:0!important;border-right:0!important;padding-left:10px!important;padding-right:10px!important}.right-rail{display:none!important}.topbar{padding:0 2px!important;gap:8px!important}.topbar>.brand{display:none}.ex-mobile-brand{display:inline-flex;font-size:22px;margin-right:auto}.search-form{width:min(260px,47%)!important}.ex-header-tools{gap:6px}.ex-header-btn{width:35px;height:35px;border-radius:11px}}
@media(max-width:650px){.page-title{font-size:21px;margin:12px 8px}.page-intro{margin:0 8px 14px}.page-grid{grid-template-columns:1fr}.profile-cover{height:155px}.topbar{height:60px!important}.search-form{width:min(190px,43%)!important;height:36px!important}.ex-mobile-brand{font-size:20px}.ex-header-btn{width:33px;height:33px;font-size:18px}.ex-header-tools{gap:5px}}
@media(min-width:901px){.ex-mobile-brand{display:none}}

/* Final ExploreX header correction */
.topbar{
  height:64px!important; padding:0 14px!important; gap:12px!important;
  background:#ffffff!important; color:#10131b!important;
  border-bottom:1px solid #edf0f6!important;
  box-shadow:0 5px 22px rgba(29,43,79,.055)!important;
}
.topbar .brand,.topbar .ex-mobile-brand{color:#10131b!important;text-shadow:none!important}
.ex-image-brand{display:inline-flex!important;align-items:center;flex-shrink:0}
.ex-image-brand img{display:block;width:135px;height:auto;max-height:48px;object-fit:contain}
@media(max-width:900px){.ex-image-brand img{width:125px;max-height:44px}}
@media(max-width:650px){.ex-image-brand img{width:115px;max-height:42px}}
.topbar .brand span,.topbar .ex-mobile-brand span{color:#4d9cff!important;text-shadow:none!important}
.topbar .search-form{background:#111827!important;border:1px solid #29354b!important;border-radius:13px!important;color:#fff!important}
.topbar .search-form input{background:transparent!important;color:#f8fafc!important}
.topbar .search-form input::placeholder{color:#9aa8bf!important}
.topbar .search-icon{color:#9cb9e9!important}
.topbar .ex-header-btn{background:#fff!important;border:1px solid #e1e6ef!important;color:#202638!important;box-shadow:0 2px 8px rgba(29,43,79,.06)!important}
.topbar .ex-header-btn:hover{background:#f5f7fb!important;border-color:#b9c9e6!important}
.topbar .search-results{color:#10131b}
.ex-drawer-overlay{z-index:10000!important}
.ex-side-drawer{z-index:10001!important}
body.menu-open{overflow:hidden!important}
@media(max-width:900px){
 .topbar{margin:0 -10px!important;padding:0 12px!important;border-radius:0!important}
 .center{padding-top:0!important}
}
@media(max-width:650px){
 .topbar{height:56px!important;gap:7px!important;padding:0 10px!important}
 .topbar .search-form{width:min(44vw,210px)!important;min-width:100px!important}
 .topbar .ex-mobile-brand{font-size:21px!important}
}


/* Full-screen split navigation matching the supplied ExploreX reference */
.ex-drawer-overlay{background:rgba(0,0,0,.35)!important;backdrop-filter:none!important;z-index:10000!important}
.ex-side-drawer{inset:0!important;top:0!important;right:0!important;width:100%!important;height:100vh!important;height:100dvh!important;max-width:none!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important;display:grid!important;grid-template-columns:45% 55%!important;background:#000!important;transform:none!important;visibility:hidden!important;pointer-events:none!important;transition:visibility .45s!important}
.ex-side-drawer.open{visibility:visible!important;pointer-events:auto!important}
.ex-menu-photo{position:relative;min-width:0;height:100%;background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),url('https://explorex.me/assets/cover.png');background-size:cover;background-position:center;transform:translateX(-100%);transition:transform .75s cubic-bezier(.76,0,.24,1)}
.ex-menu-photo:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.08)}
.ex-photo-logo{position:absolute;z-index:2;top:34px;left:40px;display:block}.ex-photo-logo img{width:155px;height:auto;display:block;object-fit:contain}
.ex-menu-panel{position:relative;min-width:0;height:100%;overflow-y:auto;background:#000;color:#eee;padding:170px clamp(35px,7vw,100px) 35px;transform:translateX(100%);transition:transform .75s cubic-bezier(.76,0,.24,1)}
.ex-side-drawer.open .ex-menu-photo,.ex-side-drawer.open .ex-menu-panel{transform:translateX(0)}
.ex-menu-panel:before{content:"";position:absolute;top:70px;left:clamp(35px,7vw,100px);right:clamp(35px,7vw,100px);height:1px;background:rgba(255,255,255,.13)}
.ex-drawer-close{position:absolute!important;top:18px!important;right:25px!important;width:45px!important;height:45px!important;border:0!important;background:transparent!important;color:#ddd!important;border-radius:0!important;font-size:38px!important;font-weight:200!important;line-height:1!important;cursor:pointer;z-index:5}
.ex-menu-install{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 0 24px;border-bottom:1px solid rgba(255,255,255,.13)}
.ex-menu-install-label strong{display:block;color:#eee;font-size:13px;font-weight:700}.ex-menu-install-label small{display:block;color:#8c9ab0;font-size:10px;margin-top:4px}
.ex-menu-install-buttons{display:flex;gap:8px;flex-shrink:0}.ex-device-btn{width:53px;height:53px;border:1px solid #777;border-radius:16px;background:#111;color:#eee;font-size:25px;cursor:pointer}.ex-device-btn:hover{background:#222;border-color:#ddd}
.ex-menu-section-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#a58d57;margin:28px 0 22px}
.ex-menu-links{display:flex;flex-direction:column;align-items:flex-start;gap:0}.ex-menu-links a{display:block!important;padding:0!important;margin:0 0 6px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#dedede!important;text-decoration:none!important;font-size:clamp(25px,2.7vw,38px)!important;font-weight:400!important;line-height:1.24!important;letter-spacing:-1.1px;transition:color .2s,transform .2s}.ex-menu-links a:hover{color:#fff!important;transform:translateX(5px)}.ex-menu-links .ex-link-icon{display:none!important}.ex-media-title{margin-top:42px}.ex-media-links a{font-size:clamp(25px,2.7vw,38px)!important}
@media(max-width:768px){.ex-side-drawer{grid-template-columns:1fr!important}.ex-menu-photo{display:none}.ex-menu-panel{padding:135px 28px 30px;transform:translateX(100%)}.ex-menu-panel:before{top:85px;left:28px;right:28px}.ex-drawer-close{right:15px!important;top:14px!important}.ex-menu-install{align-items:flex-start;flex-direction:column}.ex-device-btn{width:48px;height:48px}.ex-menu-links a,.ex-media-links a{font-size:32px!important}.ex-menu-section-title{margin-top:24px}}
@media(max-width:420px){.ex-menu-panel{padding-left:22px;padding-right:22px}.ex-menu-panel:before{left:22px;right:22px}.ex-menu-links a,.ex-media-links a{font-size:29px!important}}


/* Full-width fixed header + content begins below it */
html body .topbar,
html body .center > .topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  z-index: 900 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}
html body .layout {
  padding-top: 64px !important;
}
@media (min-width:1051px) {
  html body .layout { height: 100vh !important; }
  html body .layout > .side {
    top: 64px !important;
    height: calc(100vh - 64px) !important;
  }
  html body .layout > .center {
    height: calc(100vh - 64px) !important;
    min-height: 0 !important;
  }
  html body .layout > .right-rail {
    top: 64px !important;
    height: calc(100vh - 64px) !important;
    padding-top: 14px !important;
  }
}
@media (min-width:651px) and (max-width:1050px) {
  html body .layout > .side {
    top: 64px !important;
    height: calc(100vh - 64px) !important;
  }
  html body .layout > .center {
    height: calc(100vh - 64px) !important;
  }
}
@media (max-width:900px) {
  html body .topbar,
  html body .center > .topbar {
    height: 56px !important;
    padding: 0 12px !important;
  }
  html body .layout { padding-top: 56px !important; }
}
@media (max-width:650px) {
  html body .layout { padding-top: 56px !important; }
  html body .layout > .center {
    height: auto !important;
    min-height: calc(100vh - 56px) !important;
  }
}

/* Header refinements: show exactly one logo at the top-left */
.topbar{display:flex!important;align-items:center!important;justify-content:flex-start!important;background:#fff!important;color:#10131b!important}
.topbar > a.brand.ex-image-brand:first-child{display:inline-flex!important;align-items:center!important;margin-right:auto!important}
.topbar > .ex-mobile-brand{display:none!important}
.layout > .side > a.brand.ex-image-brand{display:none!important}
.topbar .ex-header-tools{margin-left:auto!important}
.topbar .search-form,.topbar .search-results{display:none!important}
.topbar .ex-image-brand img{content:none!important}

/* Theme preference: menu content moves upward; close button position is unchanged. */
.ex-menu-panel{padding-top:125px!important}
.ex-menu-panel:before{top:55px!important}
.ex-theme-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 8px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.ex-theme-copy strong{display:block;color:#f5f7ff;font-size:13px;font-weight:750}
.ex-theme-copy small{display:block;color:#a4afc4;font-size:10px;margin-top:4px}
.ex-theme-switch{position:relative;display:inline-flex;align-items:center;width:54px;height:30px;flex:0 0 54px;border:1px solid #64748b;border-radius:30px;background:#e8edf5;padding:3px;cursor:pointer;transition:background .2s,border-color .2s}
.ex-theme-switch:after{content:"";width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 5px #0003;transform:translateX(0);transition:transform .2s}
.ex-theme-switch[aria-checked="true"]{background:#4f46e5;border-color:#818cf8}
.ex-theme-switch[aria-checked="true"]:after{transform:translateX(24px);background:#111827}
.ex-theme-switch:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}
@media(max-width:768px){.ex-menu-panel{padding-top:105px!important}.ex-menu-panel:before{top:65px!important}}
/* Global Dark theme, applied only when the saved user preference is dark. */
html[data-theme="dark"]{color-scheme:dark;--bg:#0b1020;--card:#111827;--ink:#f3f6fc;--muted:#a0aec4;--line:#263149;--soft:#172033;--shadow:0 5px 22px rgba(0,0,0,.22)}
html[data-theme="dark"] body{background:var(--bg)!important;color:var(--ink)!important}
html[data-theme="dark"] .center{background:var(--bg)!important;border-color:#202b40!important}
html[data-theme="dark"] .topic-pills a{background:#172033!important;color:#c8d2e5!important}
html[data-theme="dark"] .topic-pills a.active{background:linear-gradient(120deg,#297cff,#5c32fa)!important;color:#fff!important}
html[data-theme="dark"] .post,html[data-theme="dark"] .rail-card,html[data-theme="dark"] .side-note,html[data-theme="dark"] .simple-list,html[data-theme="dark"] .form-card{background:#111827!important;color:#f3f6fc!important;border-color:#263149!important}
html[data-theme="dark"] .post-owner b,html[data-theme="dark"] .section-title h2,html[data-theme="dark"] .feed-head h2,html[data-theme="dark"] .rail-card h3,html[data-theme="dark"] .side-note b{color:#f3f6fc!important}
html[data-theme="dark"] .side-nav a{color:#b7c3d8!important}
html[data-theme="dark"] .side-nav a.active,html[data-theme="dark"] .side-nav a:hover{background:#242044!important;color:#b9a8ff!important}
html[data-theme="dark"] .search-form,html[data-theme="dark"] .topbar .search-form{background:#111827!important;border-color:#334155!important}
html[data-theme="dark"] .search-form input{color:#f8fafc!important}
html[data-theme="dark"] .search-results,html[data-theme="dark"] .search-result:hover{background:#111827!important;color:#f3f6fc!important;border-color:#263149!important}
html[data-theme="dark"] .search-result-title{color:#f3f6fc!important}
html[data-theme="dark"] .follow-btn{background:#111827!important;color:#c4b5fd!important;border-color:#6255a8!important}
html[data-theme="dark"] .mobile-nav{background:rgba(11,16,32,.97)!important;border-color:#263149!important}
html[data-theme="dark"] .mobile-nav a{color:#a0aec4!important}
html[data-theme="dark"] .mobile-nav a.active{color:#b9a8ff!important}
html[data-theme="dark"] .profile-summary .avatar{border-color:#111827!important}
html[data-theme="dark"] .form-card input,html[data-theme="dark"] .form-card textarea,html[data-theme="dark"] .form-card select{background:#0b1020!important;color:#f3f6fc!important;border-color:#334155!important}


/* Theme toggle UI + menu positioning */
.ex-menu-panel{padding-top:125px!important}
.ex-menu-panel:before{top:55px!important}
.ex-theme-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 8px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.ex-theme-copy strong{display:block;color:#f5f7ff;font-size:13px;font-weight:750}
.ex-theme-copy small{display:block;color:#a4afc4;font-size:10px;margin-top:4px}
.ex-theme-switch{position:relative;display:inline-flex;align-items:center;width:54px;height:30px;flex:0 0 54px;border:1px solid #64748b;border-radius:30px;background:#e8edf5;padding:3px;cursor:pointer;transition:background .2s,border-color .2s}
.ex-theme-switch:after{content:"";width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 5px #0003;transform:translateX(0);transition:transform .2s}
.ex-theme-switch[aria-checked="true"]{background:#4f46e5;border-color:#818cf8}
.ex-theme-switch[aria-checked="true"]:after{transform:translateX(24px);background:#111827}
.ex-theme-switch:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}
@media(max-width:768px){.ex-menu-panel{padding-top:105px!important}.ex-menu-panel:before{top:65px!important}}

/* ExploreX desktop: match index.php's light, colorful discovery layout.
   Mobile black header rules remain unchanged below. */
@media (min-width: 1051px) {
  html, html body,
  html body .layout,
  html body .layout > .side,
  html body .layout > .center,
  html body .layout > .right-rail {
    background: #f4f7ff !important;
    color: #122345 !important;
  }

  html body,
  html body .layout {
    background-image:
      radial-gradient(ellipse at 72% 32%, rgba(132,166,255,.20), transparent 34%),
      radial-gradient(ellipse at 9% 77%, rgba(255,185,211,.23), transparent 30%) !important;
  }

  html body .layout > .side,
  html body .layout > .center,
  html body .layout > .right-rail {
    background: transparent !important;
  }

  html body .topbar,
  html body .center > .topbar {
    /* Desktop header matches the light ExploreX homepage background. */
    background: rgba(244,247,255,.98) !important;
    background-color: #f4f7ff !important;
    color: #14264a !important;
    border-color: #edf1fa !important;
    box-shadow: 0 3px 20px rgba(29,54,104,.06) !important;
  }

  html body .topbar .brand,
  html body .topbar .ex-mobile-brand {
    color: #10131b !important;
  }

  html body .topbar .ex-header-btn {
    background: #f5f7fc !important;
    color: #18335e !important;
    border-color: #edf1fa !important;
    box-shadow: none !important;
  }

  html body .post,
  html body article.post,
  html body .rail-card,
  html body .side-note,
  html body .simple-list,
  html body .form-card {
    background: #ffffff !important;
    color: #122345 !important;
    border-color: #edf1fa !important;
  }

  html body .post h1,
  html body .post h2,
  html body .post h3,
  html body .section-title h2,
  html body .feed-head h2,
  html body .page-title,
  html body .side-note b,
  html body .rail-card h3 {
    color: #122345 !important;
  }

  html body .form-card input,
  html body .form-card textarea,
  html body .form-card select {
    background: #ffffff !important;
    color: #122345 !important;
    border-color: #e7eaf2 !important;
  }

  html body .topbar .search-form {
    background: #f0f3f9 !important;
    border-color: #eef1f8 !important;
    color: #22395f !important;
  }
  html body .topbar .search-form input { color: #17294c !important; }
  html body .topbar .search-form input::placeholder { color: #8492ad !important; }
}

/* Menu button: normal white with black lines; hover inverts to black with white lines. */
.topbar .ex-menu-header-btn,
.topbar .ex-menu-header-btn:focus-visible {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}
.topbar .ex-menu-header-btn span {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
.topbar .ex-menu-header-btn:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
.topbar .ex-menu-header-btn:hover span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.ex-profile-header-btn { overflow: hidden; padding: 0 !important; }
.ex-profile-header-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ex-profile-fallback { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; }
.ex-profile-fallback svg { width: 21px; height: 21px; display:block; }
.ex-profile-header-btn .ex-business-profile-logo,
.ex-profile-header-btn .ex-user-profile-image { display: none !important; }
@media (min-width: 1051px) {
  .ex-profile-header-btn .ex-business-profile-logo { display: block !important; }
  .ex-profile-header-btn .ex-desktop-profile-fallback { display: inline-flex; }
  .ex-profile-header-btn .ex-mobile-profile-fallback { display: none !important; }
  .ex-profile-header-btn .ex-user-profile-image { display: none !important; }
}
@media (max-width: 1050px) {
  .ex-profile-header-btn .ex-business-profile-logo { display: none !important; }
  .ex-profile-header-btn .ex-desktop-profile-fallback { display: none !important; }
  .ex-profile-header-btn .ex-user-profile-image { display: block !important; }
  .ex-profile-header-btn .ex-mobile-profile-fallback { display: inline-flex; }
}

/* Desktop menu drawer: white panel to match the light index.php theme. Mobile remains unchanged. */
@media (min-width: 1051px) {
  html body .ex-side-drawer { background: #ffffff !important; color: #122345 !important; }
  html body .ex-menu-panel { background: #ffffff !important; color: #122345 !important; }
  html body .ex-menu-panel:before { background: rgba(18,35,69,.14) !important; }
  html body .ex-drawer-close { color: #122345 !important; }
  html body .ex-menu-install { border-bottom-color: rgba(18,35,69,.14) !important; }
  html body .ex-menu-install-label strong { color: #122345 !important; }
  html body .ex-menu-install-label small { color: #64748b !important; }
  html body .ex-device-btn { background: #f5f7fc !important; color: #18335e !important; border-color: #dbe3f0 !important; }
  html body .ex-device-btn:hover { background: #e8eef9 !important; border-color: #b8c7df !important; }
  html body .ex-menu-section-title { color: #8b6b25 !important; }
  html body .ex-menu-links a { color: #243b60 !important; }
  html body .ex-menu-links a:hover { color: #2563eb !important; }
  html body .ex-theme-row { border-top-color: rgba(18,35,69,.14) !important; border-bottom-color: rgba(18,35,69,.14) !important; }
  html body .ex-theme-copy strong { color: #122345 !important; }
  html body .ex-theme-copy small { color: #64748b !important; }
}

/* Final desktop header override: intentionally wins over saved dark-theme rules. */
@media (min-width: 1051px) {
  html[data-theme="dark"] body .topbar,
  html[data-theme="dark"] body .center > .topbar,
  html body .topbar,
  html body .center > .topbar {
    background: #f4f7ff !important;
    background-color: #f4f7ff !important;
    color: #14264a !important;
    border: 0 !important;
    border-bottom: 1px solid #e4eaf7 !important;
    box-shadow: 0 4px 18px rgba(29,54,104,.07) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  html[data-theme="dark"] body .topbar .brand,
  html body .topbar .brand,
  html body .topbar .ex-mobile-brand {
    color: #14264a !important;
  }
  html[data-theme="dark"] body .topbar .ex-header-btn,
  html body .topbar .ex-header-btn {
    background: rgba(255,255,255,.88) !important;
    color: #18335e !important;
    border: 1px solid #e1e8f5 !important;
    box-shadow: 0 2px 8px rgba(29,43,79,.06) !important;
  }
  html body .topbar .ex-header-btn:hover {
    background: #e8eefb !important;
    border-color: #cbd8ef !important;
  }
  html body .topbar .ex-image-brand img {
    display: block !important;
    width: 135px !important;
    height: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }
}

/* Permanently remove the saved dark-theme header color on desktop.
   Mobile black header is intentionally preserved by the max-width:1050px rule. */
@media (min-width: 1051px) {
  html[data-theme="dark"] body header.topbar,
  html[data-theme="dark"] body .center > header.topbar,
  html body header.topbar,
  html body .center > header.topbar {
    background: #f4f7ff !important;
    background-color: #f4f7ff !important;
    color: #14264a !important;
    border-color: #e4eaf7 !important;
    box-shadow: 0 4px 18px rgba(29,54,104,.07) !important;
  }
  html[data-theme="dark"] body header.topbar .ex-header-btn,
  html body header.topbar .ex-header-btn {
    background: #ffffff !important;
    color: #18335e !important;
    border-color: #e1e8f5 !important;
  }
}

@media(max-width:900px){
  .topbar{position:relative!important;top:auto!important}
}
.ex-theme-row{display:none!important}

/* Mobile header: black background and normal document flow (scrolls with page). */
@media (max-width: 768px) {
  html body .topbar,
  html body .center > .topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    z-index: 25 !important;
  }

  html body .topbar .brand,
  html body .topbar .ex-mobile-brand,
  html body .topbar .ex-logo-glow {
    color: #ffffff !important;
  }

  html body .topbar .ex-header-btn {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
    box-shadow: none !important;
  }

  html body .topbar .ex-header-btn:hover {
    background: #202020 !important;
    border-color: #555555 !important;
  }

  html body .layout {
    padding-top: 0 !important;
  }

  html body .layout > .center {
    padding-top: 0 !important;
  }
}

/* Final menu hover colors; stronger than shared theme button rules. */
@media (min-width: 901px) {
  html body .topbar .ex-menu-header-btn { background:#fff !important; color:#000 !important; border-color:#cbd5e1 !important; }
  html body .topbar .ex-menu-header-btn span { color:#000 !important; -webkit-text-fill-color:#000 !important; }
  html body .topbar .ex-menu-header-btn:hover { background:#000 !important; color:#fff !important; border-color:#fff !important; }
  html body .topbar .ex-menu-header-btn:hover span { color:#fff !important; -webkit-text-fill-color:#fff !important; }
}

@media(max-width:900px){html body .topbar::before,html body .topbar::after{display:none!important;content:none!important}html body .topbar{border-bottom:0!important;box-shadow:none!important}}

/* Hide the shared top header ONLY on Explore page mobile view. */
@media (max-width: 768px) {
  body.page-explore .topbar,
  body.page-explore .center > header.topbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  body.page-explore .layout { padding-top: 0 !important; }
  body.page-explore .layout > .center {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Mobile: hide the header profile shortcut and remove blue tap/focus highlight from menu controls. */
@media (max-width: 768px) {
  html body .topbar .ex-profile-header-btn { display: none !important; }
  html body .topbar #menuBtn,
  html body .topbar .ex-header-btn {
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none !important;
  }
  html body .topbar #menuBtn:focus,
  html body .topbar #menuBtn:focus-visible,
  html body .topbar #menuBtn:active {
    outline: none !important;
    box-shadow: none !important;
    background: #111111 !important;
    color: #ffffff !important;
  }
}


/* ==========================================================
   ExploreX RESPONSIVE THEME — SIMPLE RULE
   Desktop/tablet: colorful light UI.
   Mobile: dark UI.
   Ignores the old theme toggle/data-theme setting.
   ========================================================== */

/* DESKTOP + TABLET: always use the colorful light palette */
@media (min-width: 651px) {
  html, html[data-theme="dark"] {
    color-scheme: light !important;
    --bg: #f7f8fc !important;
    --card: #ffffff !important;
    --ink: #10131b !important;
    --muted: #748097 !important;
    --line: #edf0f6 !important;
    --soft: #f0f3fb !important;
    --shadow: 0 5px 22px rgba(29,43,79,.055) !important;
  }

  html body,
  html[data-theme="dark"] body,
  html[data-theme="dark"] body .layout,
  html[data-theme="dark"] body .center {
    background: #f7f8fc !important;
    color: #10131b !important;
  }

  html[data-theme="dark"] body .center {
    border-left-color: #f0f1f7 !important;
    border-right-color: #f0f1f7 !important;
  }

  html[data-theme="dark"] body .topbar,
  html[data-theme="dark"] body .center .topbar,
  html[data-theme="dark"] body header.topbar {
    background: rgba(247,248,252,.97) !important;
    background-color: rgba(247,248,252,.97) !important;
    color: #202638 !important;
    border-color: #e8ebf2 !important;
  }

  html[data-theme="dark"] body .topbar .brand,
  html[data-theme="dark"] body .topbar .ex-mobile-brand,
  html[data-theme="dark"] body .topbar a,
  html[data-theme="dark"] body .topbar button,
  html[data-theme="dark"] body .topbar .top-icon,
  html[data-theme="dark"] body .topbar .ex-header-btn {
    color: #202638 !important;
  }

  html[data-theme="dark"] body .topbar .ex-header-btn {
    background: #ffffff !important;
    border-color: #e1e6f0 !important;
  }

  html[data-theme="dark"] body .topbar .search-form,
  html[data-theme="dark"] body .search-form {
    background: #ffffff !important;
    border-color: #e1e6f0 !important;
  }

  html[data-theme="dark"] body .topbar .search-form input,
  html[data-theme="dark"] body .search-form input {
    background: transparent !important;
    color: #202638 !important;
  }

  html[data-theme="dark"] body .post,
  html[data-theme="dark"] body .rail-card,
  html[data-theme="dark"] body .side-note,
  html[data-theme="dark"] body .simple-list,
  html[data-theme="dark"] body .form-card,
  html[data-theme="dark"] body .page-card,
  html[data-theme="dark"] body .settings-card,
  html[data-theme="dark"] body .modal-content,
  html[data-theme="dark"] body .dropdown-menu,
  html[data-theme="dark"] body .search-results,
  html[data-theme="dark"] body .home-comment-dialog {
    background: #ffffff !important;
    color: #10131b !important;
    border-color: #edf0f6 !important;
  }

  html[data-theme="dark"] body .post-owner b,
  html[data-theme="dark"] body .section-title h2,
  html[data-theme="dark"] body .feed-head h2,
  html[data-theme="dark"] body .rail-card h3,
  html[data-theme="dark"] body .side-note b,
  html[data-theme="dark"] body .page-title,
  html[data-theme="dark"] body label,
  html[data-theme="dark"] body .list-row b,
  html[data-theme="dark"] body .home-comment-item p {
    color: #10131b !important;
  }

  html[data-theme="dark"] body .post-text,
  html[data-theme="dark"] body .post-actions,
  html[data-theme="dark"] body .page-intro,
  html[data-theme="dark"] body .rail-card p {
    color: #566176 !important;
  }

  html[data-theme="dark"] body .side-nav a { color: #68738a !important; }
  html[data-theme="dark"] body .side-nav a.active,
  html[data-theme="dark"] body .side-nav a:hover {
    background: #eeecff !important;
    color: #5738ff !important;
  }

  html[data-theme="dark"] body .topic-pills a {
    background: #f0f3fa !important;
    color: #3f4960 !important;
  }

  html[data-theme="dark"] body .topic-pills a.active {
    background: linear-gradient(120deg,#297cff,#5c32fa) !important;
    color: #ffffff !important;
  }

  html[data-theme="dark"] body input,
  html[data-theme="dark"] body textarea,
  html[data-theme="dark"] body select,
  html[data-theme="dark"] body .form-card input,
  html[data-theme="dark"] body .form-card textarea,
  html[data-theme="dark"] body .form-card select {
    background-color: #ffffff !important;
    color: #10131b !important;
    border-color: #dfe4ee !important;
  }

  html[data-theme="dark"] body .search-results,
  html[data-theme="dark"] body .search-result:hover {
    background: #ffffff !important;
    color: #10131b !important;
    border-color: #edf0f6 !important;
  }

  html[data-theme="dark"] body .search-result-title { color: #10131b !important; }
  html[data-theme="dark"] body .follow-btn {
    background: #ffffff !important;
    color: #5537ff !important;
    border-color: #6850ff !important;
  }
  html[data-theme="dark"] body .mobile-nav {
    background: rgba(255,255,255,.96) !important;
    border-top-color: #e8ebf2 !important;
  }
  html[data-theme="dark"] body .mobile-nav a { color: #66718a !important; }
  html[data-theme="dark"] body .mobile-nav a.active { color: #4f35ff !important; }
}

/* MOBILE: always dark, regardless of the old theme toggle */
@media (max-width: 650px) {
  html, html[data-theme="dark"] {
    color-scheme: dark !important;
    --bg: #090e1b !important;
    --card: #111827 !important;
    --ink: #eef2ff !important;
    --muted: #9aa8bf !important;
    --line: #263249 !important;
    --soft: #182236 !important;
    --shadow: 0 8px 28px rgba(0,0,0,.28) !important;
  }

  html body,
  html body .layout,
  html body .center {
    background: #090e1b !important;
    color: #eef2ff !important;
  }

  html body .center { border-color: #202b40 !important; }

  html body .topbar,
  html body .center .topbar,
  html body header.topbar {
    background: rgba(9,14,27,.97) !important;
    background-color: rgba(9,14,27,.97) !important;
    color: #eef2ff !important;
    border-color: #263249 !important;
  }

  html body .topbar .brand,
  html body .topbar .ex-mobile-brand,
  html body .topbar a,
  html body .topbar button,
  html body .topbar .top-icon,
  html body .topbar .ex-header-btn {
    color: #eef2ff !important;
  }

  html body .topbar .ex-header-btn,
  html body .topbar .search-form,
  html body .search-form {
    background: #111827 !important;
    color: #eef2ff !important;
    border-color: #334155 !important;
  }

  html body .topbar .search-form input,
  html body .search-form input,
  html body input,
  html body textarea,
  html body select {
    background-color: #0c1322 !important;
    color: #eef2ff !important;
    border-color: #334155 !important;
  }

  html body input::placeholder,
  html body textarea::placeholder { color: #91a0b8 !important; }

  html body .post,
  html body .rail-card,
  html body .side-note,
  html body .simple-list,
  html body .form-card,
  html body .page-card,
  html body .settings-card,
  html body .modal-content,
  html body .dropdown-menu,
  html body .search-results,
  html body .home-comment-dialog,
  html body .home-comment-form {
    background: #111827 !important;
    color: #eef2ff !important;
    border-color: #263249 !important;
  }

  html body .post-owner b,
  html body .section-title h2,
  html body .feed-head h2,
  html body .rail-card h3,
  html body .side-note b,
  html body .page-title,
  html body label,
  html body .list-row b,
  html body .search-result-title,
  html body .home-comment-item p {
    color: #eef2ff !important;
  }

  html body .post-text,
  html body .post-actions,
  html body .page-intro,
  html body .rail-card p,
  html body .home-comment-item small {
    color: #bdc8dc !important;
  }

  html body .topic-pills a {
    background: #182236 !important;
    color: #c7d2e5 !important;
  }
  html body .topic-pills a.active {
    background: linear-gradient(120deg,#297cff,#5c32fa) !important;
    color: #ffffff !important;
  }

  html body .mobile-nav {
    background: rgba(9,14,27,.97) !important;
    border-top-color: #263249 !important;
  }
  html body .mobile-nav a { color: #9aa8bf !important; }
  html body .mobile-nav a.active { color: #c4b5fd !important; }

  html body .search-results,
  html body .search-result:hover {
    background: #111827 !important;
    color: #eef2ff !important;
    border-color: #263249 !important;
  }
  html body .follow-btn {
    background: #111827 !important;
    color: #c4b5fd !important;
    border-color: #6255a8 !important;
  }
}


/* ExploreX header: keep the desktop top bar light and readable.
   Mobile styling remains governed by the responsive rules below. */
@media (min-width: 1051px) {
  html body .layout .center header.topbar,
  html[data-theme="dark"] body .layout .center header.topbar,
  html[data-theme="light"] body .layout .center header.topbar {
    background: #f4f7ff !important;
    background-color: #f4f7ff !important;
    color: #14264a !important;
    border: 0 !important;
    border-bottom: 1px solid #e4eaf7 !important;
    box-shadow: 0 4px 18px rgba(29,54,104,.07) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
  }
  html body .layout .center header.topbar .brand,
  html body .layout .center header.topbar a,
  html body .layout .center header.topbar button,
  html[data-theme="dark"] body .layout .center header.topbar .brand,
  html[data-theme="dark"] body .layout .center header.topbar a,
  html[data-theme="dark"] body .layout .center header.topbar button {
    color: #14264a !important;
  }
  html body .layout .center header.topbar .ex-header-btn,
  html[data-theme="dark"] body .layout .center header.topbar .ex-header-btn {
    background: #fff !important;
    color: #18335e !important;
    border: 1px solid #e1e8f5 !important;
  }
}


/* v8: Keep the original logo artwork untouched. JS selects the correct asset by device. */
html body .layout .center header.topbar .ex-image-brand img {
  content: normal !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}

/* =========================================================
   ExploreX desktop polish — single authoritative desktop layer
   Keeps mobile styling intact while neutralizing legacy conflicts.
   ========================================================= */
@media (min-width: 1051px) {
  :root {
    --bg: #f3f5ff;
    --card: #ffffff;
    --ink: #10264b;
    --muted: #7585a4;
    --line: #e8edf8;
    --soft: #edf2ff;
    --shadow: 0 8px 26px rgba(43, 65, 117, .07);
  }
  html, body {
    min-height: 100%;
    color-scheme: light !important;
    background-color: #f3f5ff !important;
    color: #10264b !important;
  }
  body {
    background-image:
      radial-gradient(ellipse at 13% 70%, rgba(211, 190, 255, .30), transparent 32%),
      radial-gradient(ellipse at 88% 32%, rgba(198, 220, 255, .38), transparent 35%),
      radial-gradient(ellipse at 52% 100%, rgba(255, 220, 231, .24), transparent 34%) !important;
    background-attachment: fixed !important;
  }
  html[data-theme="dark"] { color-scheme: light !important; }
  html[data-theme="dark"] body { background-color: #f3f5ff !important; color: #10264b !important; }
  html body .topbar,
  html body .center > .topbar {
    height: 72px !important;
    padding: 0 40px !important;
    background: rgba(255,255,255,.97) !important;
    background-color: #fff !important;
    color: #10264b !important;
    border: 0 !important;
    border-bottom: 1px solid #e9edf7 !important;
    box-shadow: 0 2px 12px rgba(36, 55, 100, .035) !important;
    backdrop-filter: blur(16px) !important;
  }
  html body .topbar .ex-image-brand img { width: 184px !important; max-width: 184px !important; max-height: 58px !important; object-fit: contain !important; }
  html body .topbar .ex-header-tools { margin-left: auto !important; gap: 14px !important; }
  html body .topbar .ex-header-btn {
    width: 48px !important; height: 48px !important; border-radius: 50% !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    background: #f3f5fb !important; color: #17335f !important;
    border: 1px solid #edf0f7 !important; box-shadow: none !important;
  }
  html body .topbar .ex-menu-header-btn { background: transparent !important; border-color: transparent !important; border-radius: 12px !important; font-size: 25px !important; }
  html body .topbar .ex-profile-header-btn { background: linear-gradient(135deg,#168bff,#663cf6) !important; color: #fff !important; border: 0 !important; }
  html body .topbar .ex-profile-header-btn svg { stroke: #fff !important; }
  html body .layout {
    width: 100% !important; max-width: none !important;
    min-height: calc(100vh - 72px) !important; height: calc(100vh - 72px) !important;
    margin: 0 !important; padding: 72px 40px 0 !important;
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr) 420px !important;
    gap: 24px !important; align-items: stretch !important;
    background: transparent !important;
  }
  html body .layout > .side {
    position: sticky !important; top: 72px !important; height: calc(100vh - 72px) !important;
    min-width: 0 !important; padding: 26px 0 24px !important; gap: 22px !important;
    background: transparent !important; overflow-y: auto !important;
  }
  html body .layout > .side .side-nav { gap: 7px !important; }
  html body .layout > .side .side-nav a {
    min-height: 58px !important; padding: 13px 18px !important; gap: 15px !important;
    border-radius: 15px !important; color: #18345e !important; font-size: 16px !important;
    transition: background .18s ease, color .18s ease, transform .18s ease !important;
  }
  html body .layout > .side .side-nav a .ico { width: 24px !important; font-size: 24px !important; color: #286eea !important; }
  html body .layout > .side .side-nav a.active {
    background: linear-gradient(115deg,#08a7f4,#6850ff) !important; color: #fff !important;
    box-shadow: 0 7px 18px rgba(56, 105, 255, .20) !important;
  }
  html body .layout > .side .side-nav a.active .ico { color: #fff !important; }
  html body .layout > .side .side-nav a:hover:not(.active) { background: #e7edff !important; color: #315dce !important; }
  html body .layout > .center {
    height: calc(100vh - 72px) !important; min-height: 0 !important; min-width: 0 !important;
    padding: 20px 0 44px !important; overflow-y: auto !important; overflow-x: hidden !important;
    border: 0 !important; background: transparent !important;
    scrollbar-width: none !important;
  }
  html body .layout > .center::-webkit-scrollbar,
  html body .layout > .side::-webkit-scrollbar,
  html body .layout > .right-rail::-webkit-scrollbar { display: none !important; width: 0 !important; }
  html body .layout > .center .topic-pills { gap: 10px !important; padding: 0 0 14px !important; }
  html body .layout > .center .topic-pills a { padding: 12px 22px !important; font-size: 14px !important; font-weight: 700 !important; background: #fff !important; color: #5d6d8e !important; box-shadow: 0 3px 12px rgba(42,61,104,.035) !important; }
  html body .layout > .center .topic-pills a.active { background: linear-gradient(115deg,#079ff4,#6546ff) !important; color: #fff !important; }
  html body .layout > .center .explorex-ad-section { margin: 0 0 12px !important; border-radius: 16px !important; overflow: hidden !important; }
  html body .layout > .center .explorex-ad-fallback { min-height: 300px !important; border-radius: 16px !important; }
  html body .layout > .center .explorex-ad-fallback .hero-copy { left: 32px !important; width: 68% !important; }
  html body .layout > .center .explorex-ad-fallback .hero-copy h1 { font-size: clamp(30px, 3vw, 52px) !important; line-height: 1.06 !important; }
  html body .layout > .center .explorex-ad-fallback .hero-copy p { max-width: 360px !important; font-size: 16px !important; }
  html body .layout > .center .feed-head h2,
  html body .layout > .center .section-title h2 { color: #10264b !important; font-size: 21px !important; }
  html body .layout > .center .post,
  html body .layout > .center .rail-card,
  html body .layout > .side .side-note { background: rgba(255,255,255,.96) !important; color: #10264b !important; border: 1px solid #edf0f8 !important; box-shadow: var(--shadow) !important; }
  html body .layout > .center .post-owner b,
  html body .layout > .center .post-text,
  html body .layout > .center .post-actions,
  html body .layout > .center .section-title h2,
  html body .layout > .center .feed-head h2 { color: #10264b !important; }
  html body .layout > .right-rail {
    display: block !important; position: sticky !important; top: 72px !important;
    height: calc(100vh - 72px) !important; min-width: 0 !important;
    padding: 20px 0 28px !important; overflow-y: auto !important;
    background: transparent !important;
  }
  html body .layout > .right-rail .rail-card { padding: 18px !important; border-radius: 17px !important; margin-bottom: 16px !important; }
  html body .layout > .right-rail .rail-card h3 { color: #10264b !important; font-size: 17px !important; }
  html body .layout > .right-rail .rail-card p { color: #7182a0 !important; }
}

/* ExploreX desktop correction: responsive columns, full pastel canvas, readable hero and ad fallback. */
@media (min-width: 1051px) {
  html, body { background-color: #f3f5ff !important; }
  body { background-image: radial-gradient(ellipse at 12% 72%, rgba(213,190,255,.30), transparent 34%), radial-gradient(ellipse at 90% 35%, rgba(190,220,255,.38), transparent 36%), radial-gradient(ellipse at 48% 100%, rgba(255,220,232,.26), transparent 38%) !important; }
  html body .layout {
    box-sizing: border-box !important;
    padding-left: clamp(22px, 2.4vw, 40px) !important;
    padding-right: clamp(22px, 2.4vw, 40px) !important;
    grid-template-columns: clamp(205px, 18vw, 250px) minmax(0, 1fr) clamp(300px, 25vw, 420px) !important;
    column-gap: clamp(16px, 1.5vw, 24px) !important;
  }
  html body .layout > .center { min-width: 0 !important; }
  html body .topbar .brand.ex-image-brand:first-child { display: inline-flex !important; }
  html body .topbar .brand.ex-image-brand:first-child img { width: 184px !important; height: 58px !important; max-width: 184px !important; object-fit: contain !important; }
  html body .topbar .ex-mobile-brand { display: none !important; }
  html body .explorex-ad-section { height: clamp(270px, 26vw, 345px) !important; min-height: 270px !important; }
  html body .explorex-ad-fallback { border-radius: 16px !important; }
  html body .explorex-ad-fallback::after { background: linear-gradient(90deg,rgba(7,22,48,.56),rgba(7,22,48,.02) 78%), linear-gradient(0deg,rgba(0,0,0,.08),transparent 55%) !important; }
  html body .explorex-ad-fallback .hero-copy { left: clamp(24px, 2.5vw, 34px) !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; width: min(72%, 490px) !important; }
  html body .explorex-ad-fallback .hero-copy h1 { font-size: clamp(32px, 3.25vw, 52px) !important; line-height: 1.05 !important; margin-bottom: 12px !important; }
  html body .explorex-ad-fallback .hero-copy p { max-width: 360px !important; font-size: clamp(14px, 1.15vw, 17px) !important; line-height: 1.4 !important; }
  html body .right-rail .explorex-right-ad-box { position: relative !important; background: #bdeaff !important; }
  html body .right-rail .explorex-right-ad-box::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(90deg,rgba(0,104,198,.42),rgba(0,104,198,0) 90%), url("https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=1000&q=85"); background-size: cover; background-position: center; }
  html body .right-rail .explorex-right-ad-box ins.adsbygoogle { position: relative !important; z-index: 1 !important; background: transparent !important; }
  html body .right-rail .explorex-right-ad-wrap:after { position: relative !important; z-index: 2 !important; color: #fff !important; text-shadow: 0 2px 8px rgba(0,45,90,.7) !important; }
}
@media (min-width: 1051px) and (max-width: 1450px) {
  html body .layout { grid-template-columns: 220px minmax(0, 1fr) 320px !important; gap: 18px !important; padding-left: 24px !important; padding-right: 24px !important; }
  html body .layout > .center .topic-pills a { padding: 11px 17px !important; }
  html body .layout > .right-rail { padding-top: 20px !important; }
  html body .right-rail .explorex-right-ad-box { height: 238px !important; }
}

/* ==========================================================
   FINAL OVERRIDE: Reduce LEFT SIDEBAR width consistently.
   Keep this block at the very end to beat earlier !important rules.
   Desktop: 180px sidebar. Tablet: 170px. Mobile remains unchanged.
   ========================================================== */
@media (min-width: 1051px) {
  html body .layout {
    grid-template-columns: 180px minmax(0, 1fr) clamp(300px, 25vw, 420px) !important;
    column-gap: clamp(16px, 1.5vw, 24px) !important;
  }
  html body .layout > .side {
    box-sizing: border-box !important;
    width: 180px !important;
    min-width: 0 !important;
    max-width: 180px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .layout > .side .side-nav {
    width: 100% !important;
    min-width: 0 !important;
  }
  html body .layout > .side .side-nav a {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 11px 10px !important;
    gap: 9px !important;
    border-radius: 13px !important;
    overflow: hidden !important;
  }
  html body .layout > .side .side-nav a .ico {
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    font-size: 21px !important;
  }
  html body .layout > .side .side-nav a > span:not(.ico) {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 651px) and (max-width: 1050px) {
  html body .layout {
    grid-template-columns: 170px minmax(0, 1fr) !important;
    column-gap: 16px !important;
  }
  html body .layout > .side {
    width: 170px !important;
    min-width: 0 !important;
    max-width: 170px !important;
    padding-right: 0 !important;
  }
  html body .layout > .side .side-nav a {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 9px !important;
    gap: 8px !important;
  }
}


/* ================================================================
   FINAL DESKTOP GRID REPAIR — prevent center feed and right rail overlap.
   Resets legacy fixed-position sidebar / oversized center-column rules.
   ================================================================ */
@media (min-width: 1051px) {
  html body .layout {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) minmax(280px, 320px) !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 72px 24px 0 !important;
    margin: 0 !important;
    height: calc(100vh - 72px) !important;
    min-height: calc(100vh - 72px) !important;
    align-items: start !important;
    overflow: visible !important;
  }
  html body .layout > .side {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    inset: auto !important;
    top: 72px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    transform: none !important;
    width: 180px !important;
    min-width: 0 !important;
    max-width: 180px !important;
    height: calc(100vh - 72px) !important;
    max-height: calc(100vh - 72px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 24px 0 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 2 !important;
  }
  html body .layout > .side .brand { max-width: 176px !important; margin-left: 0 !important; }
  html body .layout > .side .brand img { max-width: 170px !important; height: auto !important; }
  html body .layout > .side .side-nav,
  html body .layout > .side .side-note {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body .layout > .side .side-nav a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 10px !important;
    gap: 9px !important;
    overflow: hidden !important;
  }
  html body .layout > .side .side-nav a .ico {
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
  }
  html body .layout > .center {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(100vh - 72px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 72px) !important;
    margin: 0 !important;
    padding: 20px 0 36px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    border: 0 !important;
    z-index: 1 !important;
  }
  html body .layout > .right-rail {
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: sticky !important;
    inset: auto !important;
    top: 72px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(100vh - 72px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 72px) !important;
    margin: 0 !important;
    padding: 20px 0 28px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
  }
  html body .layout > .center > .topbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 72px !important;
    box-sizing: border-box !important;
    z-index: 900 !important;
  }
  html body .layout > .center .explorex-ad-section,
  html body .layout > .center .post,
  html body .layout > .center .work-services-section,
  html body .layout > .center .feed-head {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 1051px) and (max-width: 1200px) {
  html body .layout {
    grid-template-columns: 170px minmax(0, 1fr) 280px !important;
    column-gap: 14px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  html body .layout > .side { width: 170px !important; max-width: 170px !important; }
}

/* FINAL FIX: Sponsored card must be a true 1:1 square on desktop.
   Overrides earlier viewport-height rules that made the ad extremely tall. */
@media (min-width: 1051px) {
  html body .layout > .right-rail .explorex-right-ad-wrap {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 16px !important;
    padding: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid #edf1f8 !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.96) !important;
  }
  html body .layout > .right-rail .explorex-right-ad-label {
    display: block !important;
    margin: 0 0 10px !important;
    color: #14264a !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
  }
  html body .layout > .right-rail .explorex-right-ad-stack {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .layout > .right-rail .explorex-right-ad-box {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #c8eaff !important;
  }
  html body .layout > .right-rail .explorex-right-ad-box::before {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }
  html body .layout > .right-rail .explorex-right-ad-box ins.adsbygoogle {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
  }
}


/* HARD FIX: enforce a mathematically square sponsored creative even when
   Google AdSense injects an inline height into its <ins> element. */
@media (min-width: 1051px) {
  html body aside.right-rail .explorex-right-ad-wrap {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  html body aside.right-rail .explorex-right-ad-wrap .explorex-right-ad-stack {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html body aside.right-rail .explorex-right-ad-wrap .explorex-right-ad-box {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 0 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 12px !important;
  }
  html body aside.right-rail .explorex-right-ad-wrap .explorex-right-ad-box + .explorex-right-ad-box {
    display: none !important;
  }
  html body aside.right-rail .explorex-right-ad-wrap .explorex-right-ad-box ins.adsbygoogle,
  html body aside.right-rail .explorex-right-ad-wrap .explorex-right-ad-box iframe,
  html body aside.right-rail .explorex-right-ad-wrap .explorex-right-ad-box > div {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}

/* FINAL SHARED DESKTOP GRID: use one common width system for index.php and chat.php.
   Keep this in app.css (not inside index.php) so all pages inherit the same columns. */
@media (min-width: 1051px) {
  html body .layout {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) 320px !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }
  html body .layout > .side {
    grid-column: 1 !important;
    width: 180px !important;
    min-width: 0 !important;
    max-width: 180px !important;
    box-sizing: border-box !important;
  }
  html body .layout > .center {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  html body .layout > .right-rail {
    grid-column: 3 !important;
    width: 320px !important;
    min-width: 0 !important;
    max-width: 320px !important;
    box-sizing: border-box !important;
  }
}


/* ==========================================================
   ExploreX FINAL LOGO RULES
   Desktop: black logo in topbar only; Mobile: white logo in topbar.
   Sidebar logo is intentionally hidden.
   ========================================================== */
.layout > .side > .ex-image-brand {
    display: none !important;
}
.topbar > a.ex-image-brand {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-right: auto !important;
}
.topbar > a.ex-image-brand picture {
    display: block !important;
    line-height: 0 !important;
}
.topbar > a.ex-image-brand img {
    display: block !important;
    content: normal !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    width: 184px !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 58px !important;
    object-fit: contain !important;
}
.topbar > .ex-mobile-brand {
    display: none !important;
}
@media (max-width: 1050px) {
    .layout > .side > .ex-image-brand { display: none !important; }
    .topbar > a.ex-image-brand { display: inline-flex !important; }
    .topbar > a.ex-image-brand img {
        width: 125px !important;
        max-height: 44px !important;
    }
}
@media (max-width: 650px) {
    .topbar > a.ex-image-brand img {
        width: 115px !important;
        max-height: 42px !important;
    }
}

/* ==========================================================
   EXPLOREX FINAL MENU ICON FIX
   Desktop only: black button mask on hover, white hamburger lines.
   This block is intentionally LAST to beat legacy/theme overrides.
   Mobile behavior is not changed.
   ========================================================== */
@media (min-width: 1051px) and (hover: hover) and (pointer: fine) {
  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn,
  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:focus,
  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:focus-visible {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn > span {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
  }

  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:hover,
  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:active {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #000000 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  }

  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:hover > span,
  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:active > span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}


/* ==========================================================
   EXPLOREX FINAL MENU BUTTON FIX — 2026-10-31
   Desktop normal: white button + black hamburger.
   Desktop hover: black button + white hamburger.
   Mobile rules are intentionally untouched.
   ========================================================== */
@media (min-width: 1051px) and (hover: hover) and (pointer: fine) {
  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn,
  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn > span {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
  }

  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:hover,
  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:focus-visible,
  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:active {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #000000 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  }

  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:hover > span,
  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:focus-visible > span,
  html body .layout > .center > header.topbar .ex-header-tools > button.ex-menu-header-btn:active > span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* ==========================================================
   EXPLOREX MOBILE NAVIGATION — FINAL / SINGLE SOURCE
   28px SVG icons, consistent alignment, isolated profile avatar.
   ========================================================== */
@media (max-width: 768px) {
  html body nav.mobile-nav.exx-mobile-nav {
    position: fixed !important;
    inset: auto 0 0 !important;
    z-index: 10020 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: stretch !important;
    width: 100% !important;
    height: calc(70px + env(safe-area-inset-bottom)) !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 6px max(5px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    overflow: visible !important;
    background: rgba(255,255,255,.98) !important;
    border: 0 !important;
    border-top: 1px solid #e7eaf0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -6px 24px rgba(15,23,42,.075) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
    backdrop-filter: blur(20px) saturate(1.35) !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
    color: #647084 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a > svg.nav-icon {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    flex: 0 0 28px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.85 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a > span:not(.mobile-profile-avatar) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: .05px !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a.active {
    color: #2563eb !important;
    font-weight: 700 !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a.active::before {
    content: "" !important;
    position: absolute !important;
    top: 1px !important;
    left: 50% !important;
    width: 18px !important;
    height: 3px !important;
    border-radius: 99px !important;
    background: #2563eb !important;
    transform: translateX(-50%) !important;
  }

  /* Profile photo and fallback share one fixed 28px circular frame.
     They cannot sit side-by-side or push the label out of alignment. */
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar {
    position: relative !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    flex: 0 0 28px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background: #eef2f7 !important;
    border: 1px solid #d8dee8 !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > img.mobile-profile-logo {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #eef2f7 !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > svg.mobile-profile-fallback {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    fill: none !important;
    stroke: #657286 !important;
    stroke-width: 1.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > [hidden] {
    display: none !important;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
}
@media (min-width: 769px) {
  html body nav.mobile-nav.exx-mobile-nav { display: none !important; }
}


/* ==========================================================
   ExploreX Instagram-style mobile bottom navigation
   Compact icon-only bar; profile uses the real shared-header photo URL.
   ========================================================== */
@media (max-width: 768px) {
  html body nav.mobile-nav.exx-mobile-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10020 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
    height: calc(58px + env(safe-area-inset-bottom)) !important;
    min-height: 58px !important;
    padding: 4px 5px calc(4px + env(safe-area-inset-bottom)) !important;
    gap: 0 !important;
    background: rgba(255,255,255,.98) !important;
    border: 0 !important;
    border-top: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    box-shadow: 0 -2px 12px rgba(15,23,42,.045) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a {
    position: relative !important;
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    color: #171717 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a > svg.nav-icon {
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    max-width: 27px !important;
    max-height: 27px !important;
    flex: 0 0 27px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* Instagram-style navigation is icon-only; keep accessible labels in markup. */
  html body nav.mobile-nav.exx-mobile-nav .mobile-nav-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a.active {
    color: #111827 !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a.active::before {
    content: none !important;
    display: none !important;
  }

  /* Profile photo is rendered as the final Instagram-style circular avatar. */
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar {
    position: relative !important;
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    flex: 0 0 27px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background: #f1f5f9 !important;
    border: 1.5px solid #6b7280 !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > img.mobile-profile-logo {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > svg.mobile-profile-fallback {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    fill: none !important;
    stroke: #374151 !important;
    stroke-width: 1.7 !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > [hidden] {
    display: none !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar.is-fallback {
    border-color: #9ca3af !important;
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 769px) {
  html body nav.mobile-nav.exx-mobile-nav {
    display: none !important;
  }
}



/* ==========================================================
   ExploreX mobile navigation — Instagram-inspired 5-icon bar
   This block intentionally overrides legacy mobile-nav rules above.
   AI navigation remains a separate include and is not part of this bar.
   ========================================================== */
@media (max-width: 768px) {
  html body nav.mobile-nav.exx-mobile-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 10050 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    height: calc(58px + env(safe-area-inset-bottom)) !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 4px max(7px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
    gap: 0 !important;
    background: #080b12 !important;
    background-color: #080b12 !important;
    border: 0 !important;
    border-top: 1px solid #171b24 !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,.22) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item {
    position: relative !important;
    display: flex !important;
    flex: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
    color: #f5f6fa !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item::before {
    content: none !important;
    display: none !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex: 0 0 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    box-sizing: border-box !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item.active {
    color: #ffffff !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item.active::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: -1 !important;
    display: block !important;
    width: 62px !important;
    height: 40px !important;
    border-radius: 24px !important;
    background: #252a33 !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Keep accessible labels in the DOM without rendering text in the bar. */
  html body nav.mobile-nav.exx-mobile-nav .mobile-nav-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Older stylesheet rules hide every direct span in the nav.
     Re-enable the profile avatar wrapper explicitly; only labels stay hidden. */
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* The profile photo and fallback share one circular frame. */
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar {
    position: relative !important;
    display: block !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    flex: 0 0 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1.5px solid #d7dbe3 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background: #e5e7eb !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > img.mobile-profile-logo {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #e5e7eb !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > svg.mobile-profile-fallback {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    fill: none !important;
    stroke: #687080 !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > [hidden] {
    display: none !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar.is-fallback {
    border-color: #d7dbe3 !important;
  }

  /* Reserve enough page space so content never sits behind the fixed bar. */
  html body {
    padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 769px) {
  html body nav.mobile-nav.exx-mobile-nav {
    display: none !important;
  }
}


@media (max-width: 768px) {
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > img.mobile-profile-logo,
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > svg.mobile-profile-fallback {
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > img.mobile-profile-logo[hidden],
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > svg.mobile-profile-fallback[hidden] {
    display: none !important;
  }
}


/* ==========================================================
   EXPLOREX MOBILE NAV — SINGLE ICON SIZE CONTROL
   Change only --exx-mobile-nav-icon-size to resize all 5 items.
   ========================================================== */
:root {
  --exx-mobile-nav-icon-size: 28px;
}

@media (max-width: 768px) {
  /* Home, Reels, Messages and Search SVG icons */
  html body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon {
    display: block !important;
    width: var(--exx-mobile-nav-icon-size) !important;
    height: var(--exx-mobile-nav-icon-size) !important;
    min-width: var(--exx-mobile-nav-icon-size) !important;
    min-height: var(--exx-mobile-nav-icon-size) !important;
    max-width: var(--exx-mobile-nav-icon-size) !important;
    max-height: var(--exx-mobile-nav-icon-size) !important;
    flex: 0 0 var(--exx-mobile-nav-icon-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Profile photo and fallback use the same outer dimensions. */
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar {
    display: block !important;
    position: relative !important;
    width: var(--exx-mobile-nav-icon-size) !important;
    height: var(--exx-mobile-nav-icon-size) !important;
    min-width: var(--exx-mobile-nav-icon-size) !important;
    min-height: var(--exx-mobile-nav-icon-size) !important;
    max-width: var(--exx-mobile-nav-icon-size) !important;
    max-height: var(--exx-mobile-nav-icon-size) !important;
    flex: 0 0 var(--exx-mobile-nav-icon-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > img.mobile-profile-logo,
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > svg.mobile-profile-fallback {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > svg.mobile-profile-fallback {
    padding: 4px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > img.mobile-profile-logo[hidden],
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > svg.mobile-profile-fallback[hidden],
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar > [hidden] {
    display: none !important;
  }
}


/* FINAL CACHE-BUSTED NAV SIZE OVERRIDE — keep this as the last CSS rule */
@media (max-width: 768px) {
  html body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon {
    width:28px !important; height:28px !important;
    min-width:28px !important; min-height:28px !important;
    max-width:28px !important; max-height:28px !important;
    flex:0 0 28px !important;
    transform:none !important;
  }
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar {
    width:28px !important; height:28px !important;
    min-width:28px !important; min-height:28px !important;
    max-width:28px !important; max-height:28px !important;
    flex:0 0 28px !important;
  }
}


/* ================================================================
   EXPLOREX — SINGLE AUTHORITATIVE THEME LAYER (FINAL)
   Theme is controlled only by html[data-theme="light|dark"].
   This block intentionally comes last to neutralize legacy hardcoded
   desktop/mobile colors without changing layout, sizing or behavior.
   ================================================================ */

html[data-theme="light"] {
  color-scheme: light !important;
  --bg: #f4f6fb !important;
  --card: #ffffff !important;
  --ink: #172033 !important;
  --muted: #748097 !important;
  --line: #e7ebf3 !important;
  --soft: #f0f3fa !important;
  --blue: #287cff !important;
  --purple: #5738ff !important;
  --shadow: 0 5px 22px rgba(29,43,79,.055) !important;
}

html[data-theme="dark"] {
  color-scheme: dark !important;
  --bg: #090e1b !important;
  --card: #111827 !important;
  --ink: #eef2ff !important;
  --muted: #9aa8bf !important;
  --line: #263249 !important;
  --soft: #182236 !important;
  --blue: #60a5fa !important;
  --purple: #a78bfa !important;
  --shadow: 0 8px 28px rgba(0,0,0,.28) !important;
}

/* Page canvas and primary layout surfaces */
html[data-theme="light"] body,
html[data-theme="light"] body .layout,
html[data-theme="light"] body .center,
html[data-theme="light"] body .side,
html[data-theme="light"] body .right-rail {
  background-color: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] body,
html[data-theme="dark"] body .layout,
html[data-theme="dark"] body .center,
html[data-theme="dark"] body .side,
html[data-theme="dark"] body .right-rail {
  background-color: var(--bg) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Shared header: explicitly undo the legacy mobile black header in light mode. */
html[data-theme="light"] body .topbar,
html[data-theme="light"] body .center > .topbar,
html[data-theme="light"] body header.topbar {
  background: rgba(255,255,255,.97) !important;
  background-color: #ffffff !important;
  color: #172033 !important;
  border-color: var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 3px 18px rgba(25,40,75,.06) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}
html[data-theme="dark"] body .topbar,
html[data-theme="dark"] body .center > .topbar,
html[data-theme="dark"] body header.topbar {
  background: rgba(9,14,27,.97) !important;
  background-color: #090e1b !important;
  color: #eef2ff !important;
  border-color: var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 3px 18px rgba(0,0,0,.22) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}
html[data-theme="light"] body .topbar .brand,
html[data-theme="light"] body .topbar .ex-mobile-brand,
html[data-theme="light"] body .topbar a,
html[data-theme="light"] body .topbar button,
html[data-theme="light"] body .topbar .top-icon,
html[data-theme="light"] body .topbar .ex-header-btn {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}
html[data-theme="dark"] body .topbar .brand,
html[data-theme="dark"] body .topbar .ex-mobile-brand,
html[data-theme="dark"] body .topbar a,
html[data-theme="dark"] body .topbar button,
html[data-theme="dark"] body .topbar .top-icon,
html[data-theme="dark"] body .topbar .ex-header-btn {
  color: #eef2ff !important;
  -webkit-text-fill-color: #eef2ff !important;
}
html[data-theme="light"] body .topbar .ex-header-btn,
html[data-theme="light"] body .topbar .ex-menu-header-btn {
  background: #ffffff !important;
  color: #172033 !important;
  border-color: #dce3ef !important;
}
html[data-theme="dark"] body .topbar .ex-header-btn,
html[data-theme="dark"] body .topbar .ex-menu-header-btn {
  background: #111827 !important;
  color: #eef2ff !important;
  border-color: #334155 !important;
}
html[data-theme="light"] body .topbar .ex-menu-header-btn span { color:#172033 !important; -webkit-text-fill-color:#172033 !important; }
html[data-theme="dark"] body .topbar .ex-menu-header-btn span { color:#eef2ff !important; -webkit-text-fill-color:#eef2ff !important; }

/* Cards, panels, dialogs, dropdowns and content blocks */
html[data-theme="light"] body .post,
html[data-theme="light"] body article.post,
html[data-theme="light"] body .rail-card,
html[data-theme="light"] body .side-note,
html[data-theme="light"] body .simple-list,
html[data-theme="light"] body .form-card,
html[data-theme="light"] body .page-card,
html[data-theme="light"] body .settings-card,
html[data-theme="light"] body .modal-content,
html[data-theme="light"] body .dropdown-menu,
html[data-theme="light"] body .search-results,
html[data-theme="light"] body .home-comment-dialog,
html[data-theme="light"] body .home-comment-form,
html[data-theme="light"] body .page-panel,
html[data-theme="light"] body .content-card,
html[data-theme="light"] body .service-card,
html[data-theme="light"] body .job-card,
html[data-theme="light"] body .list-card,
html[data-theme="light"] body .settings-panel {
  background-color: #ffffff !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}
html[data-theme="dark"] body .post,
html[data-theme="dark"] body article.post,
html[data-theme="dark"] body .rail-card,
html[data-theme="dark"] body .side-note,
html[data-theme="dark"] body .simple-list,
html[data-theme="dark"] body .form-card,
html[data-theme="dark"] body .page-card,
html[data-theme="dark"] body .settings-card,
html[data-theme="dark"] body .modal-content,
html[data-theme="dark"] body .dropdown-menu,
html[data-theme="dark"] body .search-results,
html[data-theme="dark"] body .home-comment-dialog,
html[data-theme="dark"] body .home-comment-form,
html[data-theme="dark"] body .page-panel,
html[data-theme="dark"] body .content-card,
html[data-theme="dark"] body .service-card,
html[data-theme="dark"] body .job-card,
html[data-theme="dark"] body .list-card,
html[data-theme="dark"] body .settings-panel {
  background-color: #111827 !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}

/* Typography and muted copy */
html[data-theme="light"] body .post-owner b,
html[data-theme="light"] body .section-title h2,
html[data-theme="light"] body .feed-head h2,
html[data-theme="light"] body .rail-card h3,
html[data-theme="light"] body .side-note b,
html[data-theme="light"] body .page-title,
html[data-theme="light"] body .list-row b,
html[data-theme="light"] body .search-result-title,
html[data-theme="light"] body .home-comment-item p,
html[data-theme="light"] body .home-product-name,
html[data-theme="light"] body .home-product-price { color: #172033 !important; }
html[data-theme="dark"] body .post-owner b,
html[data-theme="dark"] body .section-title h2,
html[data-theme="dark"] body .feed-head h2,
html[data-theme="dark"] body .rail-card h3,
html[data-theme="dark"] body .side-note b,
html[data-theme="dark"] body .page-title,
html[data-theme="dark"] body .list-row b,
html[data-theme="dark"] body .search-result-title,
html[data-theme="dark"] body .home-comment-item p,
html[data-theme="dark"] body .home-product-name,
html[data-theme="dark"] body .home-product-price { color: #eef2ff !important; }
html[data-theme="light"] body .post-text,
html[data-theme="light"] body .post-actions,
html[data-theme="light"] body .page-intro,
html[data-theme="light"] body .rail-card p,
html[data-theme="light"] body .post-owner small,
html[data-theme="light"] body .home-comment-item small,
html[data-theme="light"] body .home-product-category,
html[data-theme="light"] body .home-product-seller { color: #748097 !important; }
html[data-theme="dark"] body .post-text,
html[data-theme="dark"] body .post-actions,
html[data-theme="dark"] body .page-intro,
html[data-theme="dark"] body .rail-card p,
html[data-theme="dark"] body .post-owner small,
html[data-theme="dark"] body .home-comment-item small,
html[data-theme="dark"] body .home-product-category,
html[data-theme="dark"] body .home-product-seller { color: #aab7cc !important; }
html[data-theme="light"] body label { color:#263247 !important; }
html[data-theme="dark"] body label { color:#dbe4f3 !important; }

/* Topic/filter pills and navigation */
html[data-theme="light"] body .topic-pills a { background:#edf1f8 !important; color:#3f4960 !important; }
html[data-theme="dark"] body .topic-pills a { background:#182236 !important; color:#c7d2e5 !important; }
html[data-theme="light"] body .topic-pills a.active,
html[data-theme="dark"] body .topic-pills a.active { background:linear-gradient(120deg,#297cff,#5c32fa) !important; color:#ffffff !important; }
html[data-theme="light"] body .side-nav a { color:#68738a !important; }
html[data-theme="dark"] body .side-nav a { color:#b7c4da !important; }
html[data-theme="light"] body .side-nav a.active,
html[data-theme="light"] body .side-nav a:hover { background:#eeecff !important; color:#5738ff !important; }
html[data-theme="dark"] body .side-nav a.active,
html[data-theme="dark"] body .side-nav a:hover { background:#252044 !important; color:#c4b5fd !important; }
html[data-theme="light"] body .mobile-nav { background:rgba(255,255,255,.97) !important; border-top-color:var(--line) !important; }
html[data-theme="dark"] body .mobile-nav { background:rgba(9,14,27,.98) !important; border-top-color:var(--line) !important; }
html[data-theme="light"] body .mobile-nav a { color:#66718a !important; }
html[data-theme="dark"] body .mobile-nav a { color:#9aa8bf !important; }
html[data-theme="light"] body .mobile-nav a.active { color:#4f35ff !important; }
html[data-theme="dark"] body .mobile-nav a.active { color:#c4b5fd !important; }

/* Forms and search controls */
html[data-theme="light"] body input,
html[data-theme="light"] body textarea,
html[data-theme="light"] body select,
html[data-theme="light"] body .search-form { background-color:#ffffff !important; color:#172033 !important; border-color:#dfe5ef !important; }
html[data-theme="dark"] body input,
html[data-theme="dark"] body textarea,
html[data-theme="dark"] body select,
html[data-theme="dark"] body .search-form { background-color:#0c1322 !important; color:#eef2ff !important; border-color:#334155 !important; }
html[data-theme="light"] body input::placeholder,
html[data-theme="light"] body textarea::placeholder { color:#8792a6 !important; }
html[data-theme="dark"] body input::placeholder,
html[data-theme="dark"] body textarea::placeholder { color:#91a0b8 !important; }
html[data-theme="light"] body .search-result:hover { background:#f4f6fb !important; }
html[data-theme="dark"] body .search-result:hover { background:#1a263b !important; }

/* Menu drawer and theme control */
html[data-theme="light"] body .ex-side-drawer,
html[data-theme="light"] body .ex-menu-panel { background:#ffffff !important; color:#172033 !important; border-color:var(--line) !important; }
html[data-theme="dark"] body .ex-side-drawer,
html[data-theme="dark"] body .ex-menu-panel { background:#080d18 !important; color:#eef2ff !important; border-color:var(--line) !important; }
html[data-theme="light"] body .ex-menu-panel:before { background:rgba(23,32,51,.12) !important; }
html[data-theme="dark"] body .ex-menu-panel:before { background:rgba(255,255,255,.14) !important; }
html[data-theme="light"] body .ex-menu-section-title { color:#8b6b25 !important; }
html[data-theme="dark"] body .ex-menu-section-title { color:#f0c66e !important; }
html[data-theme="light"] body .ex-menu-links a,
html[data-theme="light"] body .ex-menu-install-label strong,
html[data-theme="light"] body .ex-theme-copy strong { color:#243b60 !important; }
html[data-theme="dark"] body .ex-menu-links a,
html[data-theme="dark"] body .ex-menu-install-label strong,
html[data-theme="dark"] body .ex-theme-copy strong { color:#eef2ff !important; }
html[data-theme="light"] body .ex-menu-install-label small,
html[data-theme="light"] body .ex-theme-copy small { color:#748097 !important; }
html[data-theme="dark"] body .ex-menu-install-label small,
html[data-theme="dark"] body .ex-theme-copy small { color:#9aa8bf !important; }
html[data-theme="light"] body .ex-theme-row { border-color:rgba(23,32,51,.14) !important; }
html[data-theme="dark"] body .ex-theme-row { border-color:rgba(255,255,255,.14) !important; }

/* Keep media overlays/reels intentionally dark; only their surrounding cards follow theme. */
html[data-theme="light"] body .home-reel-stage,
html[data-theme="light"] body .home-reel-video,
html[data-theme="dark"] body .home-reel-stage,
html[data-theme="dark"] body .home-reel-video { background:#050505 !important; }
html[data-theme="light"] body .home-reel-user,
html[data-theme="dark"] body .home-reel-user { color:#ffffff !important; }
html[data-theme="light"] body .home-reel-mute,
html[data-theme="dark"] body .home-reel-mute { color:#ffffff !important; }

/* Common borders, separators and follow controls */
html[data-theme="light"] body .creator,
html[data-theme="light"] body .list-row,
html[data-theme="light"] body .home-comment-heading,
html[data-theme="light"] body .home-comment-form { border-color:var(--line) !important; }
html[data-theme="dark"] body .creator,
html[data-theme="dark"] body .list-row,
html[data-theme="dark"] body .home-comment-heading,
html[data-theme="dark"] body .home-comment-form { border-color:var(--line) !important; }
html[data-theme="light"] body .follow-btn { background:#ffffff !important; color:#5537ff !important; border-color:#6850ff !important; }
html[data-theme="dark"] body .follow-btn { background:#111827 !important; color:#c4b5fd !important; border-color:#6255a8 !important; }
html[data-theme="light"] body .profile-summary .avatar { border-color:#ffffff !important; }
html[data-theme="dark"] body .profile-summary .avatar { border-color:#111827 !important; }

/* Respect reduced motion and avoid theme-switch flashes caused by forced transitions. */
html[data-theme="light"], html[data-theme="dark"] { transition:none !important; }



/* ============================================================
   ExploreX FINAL THEME CONSOLIDATION
   Keep layout/geometry independent from theme colors.
   The shared header sets html[data-theme="light"|"dark"].
   ============================================================ */
html[data-theme="light"] {
  color-scheme: light !important;
  --bg:#f4f6fb;
  --card:#ffffff;
  --ink:#182235;
  --muted:#687386;
  --line:#e4e8f0;
  --soft:#f7f8fc;
  --shadow:0 5px 22px rgba(29,43,79,.07);
}
html[data-theme="dark"] {
  color-scheme: dark !important;
  --bg:#090e1b;
  --card:#111827;
  --ink:#eef2ff;
  --muted:#9aa8bf;
  --line:#263249;
  --soft:#182236;
  --shadow:0 8px 28px rgba(0,0,0,.28);
}
html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] .layout,
html[data-theme="light"] .center {
  background-color:var(--bg) !important;
  color:var(--ink) !important;
}
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .layout,
html[data-theme="dark"] .center {
  background-color:var(--bg) !important;
  color:var(--ink) !important;
}

/* Header and search bar */
html[data-theme="light"] body .topbar {
  background:rgba(255,255,255,.97) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
  box-shadow:0 4px 18px rgba(29,54,104,.07) !important;
}
html[data-theme="dark"] body .topbar {
  background:rgba(9,14,27,.97) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
  box-shadow:0 4px 18px rgba(0,0,0,.24) !important;
}
html[data-theme="light"] body .topbar a,
html[data-theme="light"] body .topbar button,
html[data-theme="light"] body .topbar .brand,
html[data-theme="light"] body .topbar .top-icon { color:var(--ink) !important; }
html[data-theme="dark"] body .topbar a,
html[data-theme="dark"] body .topbar button,
html[data-theme="dark"] body .topbar .brand,
html[data-theme="dark"] body .topbar .top-icon { color:var(--ink) !important; }

/* Main surfaces and cards */
html[data-theme="light"] body .post,
html[data-theme="light"] body .rail-card,
html[data-theme="light"] body .side-note,
html[data-theme="light"] body .simple-list,
html[data-theme="light"] body .form-card,
html[data-theme="light"] body .page-card,
html[data-theme="light"] body .settings-card,
html[data-theme="light"] body .modal-content,
html[data-theme="light"] body .dropdown-menu,
html[data-theme="light"] body .search-results,
html[data-theme="light"] body .home-comment-dialog,
html[data-theme="light"] body .home-comment-form,
html[data-theme="light"] body .page-panel,
html[data-theme="light"] body .content-card,
html[data-theme="light"] body .service-card,
html[data-theme="light"] body .job-card,
html[data-theme="light"] body .list-card,
html[data-theme="light"] body .settings-panel,
html[data-theme="light"] body .work-services-section,
html[data-theme="light"] body .explorex-ad-section,
html[data-theme="light"] body #homeFeed,
html[data-theme="light"] body #feedLoader {
  background-color:#fff !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}
html[data-theme="dark"] body .post,
html[data-theme="dark"] body .rail-card,
html[data-theme="dark"] body .side-note,
html[data-theme="dark"] body .simple-list,
html[data-theme="dark"] body .form-card,
html[data-theme="dark"] body .page-card,
html[data-theme="dark"] body .settings-card,
html[data-theme="dark"] body .modal-content,
html[data-theme="dark"] body .dropdown-menu,
html[data-theme="dark"] body .search-results,
html[data-theme="dark"] body .home-comment-dialog,
html[data-theme="dark"] body .home-comment-form,
html[data-theme="dark"] body .page-panel,
html[data-theme="dark"] body .content-card,
html[data-theme="dark"] body .service-card,
html[data-theme="dark"] body .job-card,
html[data-theme="dark"] body .list-card,
html[data-theme="dark"] body .settings-panel,
html[data-theme="dark"] body .work-services-section,
html[data-theme="dark"] body .explorex-ad-section,
html[data-theme="dark"] body #homeFeed,
html[data-theme="dark"] body #feedLoader {
  background-color:#080b12 !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}

/* Homepage cards and all text layers */
html[data-theme="light"] body #homeFeed > .post,
html[data-theme="light"] body #homeFeed .post-header,
html[data-theme="light"] body #homeFeed .home-product-heading,
html[data-theme="light"] body #homeFeed .home-feed-actions,
html[data-theme="light"] body #homeFeed .home-product-link,
html[data-theme="light"] body #homeFeed .home-product-info,
html[data-theme="light"] body .feed-head { background:#fff !important; color:var(--ink) !important; }
html[data-theme="dark"] body #homeFeed > .post,
html[data-theme="dark"] body #homeFeed .post-header,
html[data-theme="dark"] body #homeFeed .home-product-heading,
html[data-theme="dark"] body #homeFeed .home-feed-actions,
html[data-theme="dark"] body #homeFeed .home-product-link,
html[data-theme="dark"] body #homeFeed .home-product-info,
html[data-theme="dark"] body .feed-head { background:#000 !important; color:#fff !important; }

html[data-theme="light"] body .post-owner b,
html[data-theme="light"] body .section-title h2,
html[data-theme="light"] body .feed-head h2,
html[data-theme="light"] body .rail-card h3,
html[data-theme="light"] body .side-note b,
html[data-theme="light"] body .page-title,
html[data-theme="light"] body .list-row b,
html[data-theme="light"] body .search-result-title,
html[data-theme="light"] body .home-product-name,
html[data-theme="light"] body #homeFeed .post-header *,
html[data-theme="light"] body #homeFeed .home-product-heading *,
html[data-theme="light"] body #homeFeed .home-product-name a,
html[data-theme="light"] body #homeFeed .home-feed-action,
html[data-theme="light"] body .work-service-card { color:var(--ink) !important; }

html[data-theme="dark"] body .post-owner b,
html[data-theme="dark"] body .section-title h2,
html[data-theme="dark"] body .feed-head h2,
html[data-theme="dark"] body .rail-card h3,
html[data-theme="dark"] body .side-note b,
html[data-theme="dark"] body .page-title,
html[data-theme="dark"] body .list-row b,
html[data-theme="dark"] body .search-result-title,
html[data-theme="dark"] body .home-product-name,
html[data-theme="dark"] body #homeFeed .post-header *,
html[data-theme="dark"] body #homeFeed .home-product-heading *,
html[data-theme="dark"] body #homeFeed .home-product-name a,
html[data-theme="dark"] body #homeFeed .home-feed-action { color:#f5f6fa !important; }

html[data-theme="light"] body .post-text,
html[data-theme="light"] body .post-actions,
html[data-theme="light"] body .page-intro,
html[data-theme="light"] body .rail-card p,
html[data-theme="light"] body .post-owner small,
html[data-theme="light"] body .home-product-category,
html[data-theme="light"] body .home-product-seller,
html[data-theme="light"] body .home-product-price,
html[data-theme="light"] body .feed-head .muted { color:var(--muted) !important; }
html[data-theme="dark"] body .post-text,
html[data-theme="dark"] body .post-actions,
html[data-theme="dark"] body .page-intro,
html[data-theme="dark"] body .rail-card p,
html[data-theme="dark"] body .post-owner small,
html[data-theme="dark"] body .home-product-category,
html[data-theme="dark"] body .home-product-seller,
html[data-theme="dark"] body .home-product-price,
html[data-theme="dark"] body .feed-head .muted { color:#aab7cc !important; }

/* Pills, side menu, bottom navigation */
html[data-theme="light"] body .topic-pills { background:var(--bg) !important; }
html[data-theme="light"] body .topic-pills a { background:#edf1f8 !important; color:#3f4960 !important; }
html[data-theme="dark"] body .topic-pills { background:var(--bg) !important; }
html[data-theme="dark"] body .topic-pills a { background:#182236 !important; color:#c7d2e5 !important; }
html[data-theme="light"] body .side-nav a { color:#68738a !important; }
html[data-theme="dark"] body .side-nav a { color:#b7c4da !important; }
html[data-theme="light"] body .mobile-nav { background:rgba(255,255,255,.98) !important; border-top-color:var(--line) !important; }
html[data-theme="dark"] body .mobile-nav { background:rgba(9,14,27,.98) !important; border-top-color:var(--line) !important; }
html[data-theme="light"] body .mobile-nav a { color:#66718a !important; }
html[data-theme="dark"] body .mobile-nav a { color:#9aa8bf !important; }
html[data-theme="light"] body .mobile-nav a.active { color:#4f35ff !important; }
html[data-theme="dark"] body .mobile-nav a.active { color:#c4b5fd !important; }

/* Forms, controls and menus */
html[data-theme="light"] body input,
html[data-theme="light"] body textarea,
html[data-theme="light"] body select { background-color:#fff !important; color:#172033 !important; border-color:#dfe5ef !important; }
html[data-theme="dark"] body input,
html[data-theme="dark"] body textarea,
html[data-theme="dark"] body select { background-color:#0c1322 !important; color:#eef2ff !important; border-color:#334155 !important; }
html[data-theme="light"] body .ex-side-drawer,
html[data-theme="light"] body .ex-menu-panel { background:#fff !important; color:#172033 !important; }
html[data-theme="dark"] body .ex-side-drawer,
html[data-theme="dark"] body .ex-menu-panel { background:#080d18 !important; color:#eef2ff !important; }

/* Media itself remains naturally dark; surrounding UI follows selected theme. */
html[data-theme="light"] body .home-reel-stage,
html[data-theme="light"] body .home-reel-video,
html[data-theme="dark"] body .home-reel-stage,
html[data-theme="dark"] body .home-reel-video { background:#050505 !important; }
html[data-theme="light"] body .home-reel-user,
html[data-theme="light"] body .home-reel-caption,
html[data-theme="dark"] body .home-reel-user,
html[data-theme="dark"] body .home-reel-caption { color:#fff !important; }
html[data-theme="light"] body .home-reel-mute,
html[data-theme="dark"] body .home-reel-mute { color:#fff !important; }

/* Preserve layout; do not allow theme CSS to change header/nav dimensions. */
html[data-theme="light"], html[data-theme="dark"] { transition:none !important; }



/* Welcome cover: keep every text element white in both light and dark themes. */
html[data-theme="light"] .ex-welcome .ex-welcome-heading,
html[data-theme="dark"] .ex-welcome .ex-welcome-heading,
html[data-theme="light"] .ex-welcome .ex-welcome-heading .ex-x,
html[data-theme="dark"] .ex-welcome .ex-welcome-heading .ex-x,
html[data-theme="light"] .ex-welcome .ex-welcome-subtitle,
html[data-theme="dark"] .ex-welcome .ex-welcome-subtitle,
html[data-theme="light"] .ex-welcome .ex-welcome-signin,
html[data-theme="dark"] .ex-welcome .ex-welcome-signin,
html[data-theme="light"] .ex-welcome .ex-welcome-signin a,
html[data-theme="dark"] .ex-welcome .ex-welcome-signin a {
    color: #ffffff !important;
    text-shadow: 0 1px 9px rgba(0,0,0,.75) !important;
}
.ex-welcome .ex-welcome-start {
    color: #ffffff !important;
}


/* ================================================================
   EXPLOREX FOOTER + MOBILE NAV — AUTHORITATIVE THEME OVERRIDE
   Keep this block at the very end of app.css.
   Layout and icon dimensions remain controlled by existing rules.
   ================================================================ */

/* Right rail / category widget */
html[data-theme="light"] body .right-rail,
html[data-theme="light"] body .exx-right-widget,
html[data-theme="light"] body .exx-categories-widget {
    color: #172033 !important;
}
html[data-theme="light"] body .exx-right-widget,
html[data-theme="light"] body .exx-categories-widget {
    background: #ffffff !important;
    border-color: #e5e9f0 !important;
}
html[data-theme="light"] body .exx-widget-heading,
html[data-theme="light"] body .exx-widget-heading strong,
html[data-theme="light"] body .exx-category-grid a,
html[data-theme="light"] body .exx-category-grid small {
    color: #172033 !important;
}
html[data-theme="light"] body .exx-widget-heading a {
    color: #2563eb !important;
}
html[data-theme="light"] body .explorex-right-ad-label {
    color: #64748b !important;
}

html[data-theme="dark"] body .right-rail,
html[data-theme="dark"] body .exx-right-widget,
html[data-theme="dark"] body .exx-categories-widget {
    color: #f5f5f5 !important;
}
html[data-theme="dark"] body .exx-right-widget,
html[data-theme="dark"] body .exx-categories-widget {
    background: #111111 !important;
    border-color: #292929 !important;
}
html[data-theme="dark"] body .exx-widget-heading,
html[data-theme="dark"] body .exx-widget-heading strong,
html[data-theme="dark"] body .exx-category-grid a,
html[data-theme="dark"] body .exx-category-grid small {
    color: #f5f5f5 !important;
}
html[data-theme="dark"] body .exx-widget-heading a {
    color: #60a5fa !important;
}
html[data-theme="dark"] body .explorex-right-ad-label {
    color: #a3a3a3 !important;
}

/* Mobile navigation surface */
html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav {
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 -5px 22px rgba(15,23,42,.08) !important;
}
html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav {
    background: rgba(0,0,0,.98) !important;
    border-top: 1px solid #262626 !important;
    box-shadow: 0 -5px 22px rgba(0,0,0,.32) !important;
}

/* Set color on the anchor itself, then force SVG paths to inherit it.
   This fixes icons that retained a hard-coded stroke/fill from old CSS. */
html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item,
html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item:visited {
    color: #64748b !important;
}
html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item.active,
html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item.active:visited {
    color: #2563eb !important;
}
html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item,
html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item:visited {
    color: #a3a3a3 !important;
}
html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item.active,
html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item.active:visited {
    color: #ffffff !important;
}

html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon,
html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon,
html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav .mobile-profile-fallback,
html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav .mobile-profile-fallback {
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
}
html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon *,
html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon *,
html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav .mobile-profile-fallback *,
html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav .mobile-profile-fallback * {
    fill: none !important;
    stroke: currentColor !important;
}
html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav .mobile-nav-label {
    color: inherit !important;
}
html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav .mobile-nav-label {
    color: inherit !important;
}
nav.mobile-nav.exx-mobile-nav .mobile-nav-item {
    -webkit-tap-highlight-color: transparent !important;
}
nav.mobile-nav.exx-mobile-nav .mobile-nav-item:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: -3px !important;
    border-radius: 10px !important;
}
nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar {
    overflow: hidden !important;
}
nav.mobile-nav.exx-mobile-nav .mobile-profile-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


/* ==========================================================
   FINAL MOBILE FOOTER ICON VISIBILITY FIX
   All five navigation links must remain visible on mobile.
   This block intentionally overrides legacy display/width rules.
   ========================================================== */
@media (max-width: 767px) {
  html body nav.mobile-nav.exx-mobile-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 62px !important;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 99999 !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item {
    display: flex !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    flex: 0 0 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible !important;
  }

  html body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon * {
    fill: none !important;
    stroke: currentColor !important;
    vector-effect: non-scaling-stroke;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-nav-label {
    display: none !important;
  }

  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-avatar,
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-logo,
  html body nav.mobile-nav.exx-mobile-nav .mobile-profile-fallback {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item {
    color: #64748b !important;
  }
  html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item.active {
    color: #2563eb !important;
  }
  html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item {
    color: #a3a3a3 !important;
  }
  html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item.active {
    color: #ffffff !important;
  }
}

/* ==========================================================
   FINAL MOBILE BOTTOM NAV ICON THEME COLORS
   Light theme: every navigation icon is black.
   Dark theme: every navigation icon is white.
   This intentionally overrides active/inactive icon colors.
   ========================================================== */
@media (max-width: 767px) {
  html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav,
  html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item,
  html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item.active,
  html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item:focus,
  html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item:hover {
    color: #000000 !important;
  }

  html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon,
  html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon * ,
  html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav .mobile-profile-fallback,
  html[data-theme="light"] body nav.mobile-nav.exx-mobile-nav .mobile-profile-fallback * {
    color: #000000 !important;
    stroke: #000000 !important;
    fill: none !important;
  }

  html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav,
  html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item,
  html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item.active,
  html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item:focus,
  html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item:hover {
    color: #ffffff !important;
  }

  html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon,
  html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav > a.mobile-nav-item > svg.nav-icon *,
  html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav .mobile-profile-fallback,
  html[data-theme="dark"] body nav.mobile-nav.exx-mobile-nav .mobile-profile-fallback * {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
  }
}


/* ==========================================================
   EXPLORE PAGE — FINAL THEME CONFLICT OVERRIDE
   Fixes legacy @media(max-width:900px) black-only rules.
   ========================================================== */
@media (max-width: 900px) {
  html[data-theme="light"] body.page-explore,
  html[data-theme="light"] body.page-explore .layout,
  html[data-theme="light"] body.page-explore .center,
  html[data-theme="light"] body.page-explore main,
  html[data-theme="light"] body.page-explore .explore-category-section,
  html[data-theme="light"] body.page-explore .explore-category-grid,
  html[data-theme="light"] body.page-explore .featured-creators-section,
  html[data-theme="light"] body.page-explore .featured-creators-section .featured-creator-row {
    background: #fff !important;
    background-color: #fff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
  }
  html[data-theme="light"] body.page-explore .explore-category-name,
  html[data-theme="light"] body.page-explore .featured-creators-section *,
  html[data-theme="light"] body.page-explore .page-title,
  html[data-theme="light"] body.page-explore .page-intro {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }
  html[data-theme="light"] body.page-explore .explore-category-icon {
    background: #e5e7eb !important;
    color: #111827 !important;
  }
  /* Search trigger styles are owned by explore.php to avoid shared-CSS conflicts. */
html[data-theme="light"] body.page-explore nav.mobile-nav.exx-mobile-nav {
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid #e5e7eb !important;
  }
  html[data-theme="light"] body.page-explore nav.mobile-nav.exx-mobile-nav a {
    color: #374151 !important;
  }

  html[data-theme="dark"] body.page-explore,
  html[data-theme="dark"] body.page-explore .layout,
  html[data-theme="dark"] body.page-explore .center,
  html[data-theme="dark"] body.page-explore main,
  html[data-theme="dark"] body.page-explore .explore-category-section,
  html[data-theme="dark"] body.page-explore .explore-category-grid,
  html[data-theme="dark"] body.page-explore .featured-creators-section,
  html[data-theme="dark"] body.page-explore .featured-creators-section .featured-creator-row {
    background: #000 !important;
    background-color: #000 !important;
    color: #f9fafb !important;
    border-color: #292929 !important;
  }
  html[data-theme="dark"] body.page-explore .explore-category-name,
  html[data-theme="dark"] body.page-explore .featured-creators-section *,
  html[data-theme="dark"] body.page-explore .page-title,
  html[data-theme="dark"] body.page-explore .page-intro {
    color: #f9fafb !important;
    -webkit-text-fill-color: #f9fafb !important;
  }
  html[data-theme="dark"] body.page-explore nav.mobile-nav.exx-mobile-nav {
    background: rgba(0,0,0,.98) !important;
    border-top: 1px solid #292929 !important;
  }
}


/* ==========================================================
   ExploreX SERVICES PAGE ISOLATION PATCH
   The shared homepage stylesheet also contains global .layout,
   .center and .topbar rules. Those rules were leaking into
   services.php and forcing homepage grid/scroll behavior there.
   Scope this reset only to pages containing .market-wrap.
   ========================================================== */
body:has(.market-wrap),
body:has(.market-wrap) .layout,
body:has(.market-wrap) .layout > .center {
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:auto !important;
  min-height:100vh !important;
  margin:0 !important;
  overflow-x:hidden !important;
}
body:has(.market-wrap) .layout {
  display:block !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
body:has(.market-wrap) .layout > .side,
body:has(.market-wrap) .layout > .right-rail,
body:has(.market-wrap) .layout > aside.side {
  display:none !important;
}
body:has(.market-wrap) .layout > .center {
  display:block !important;
  grid-column:auto !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  background:transparent !important;
}
body:has(.market-wrap) .layout > .center > .topbar,
body:has(.market-wrap) .layout > .center header.topbar {
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  z-index:1000 !important;
}
body:has(.market-wrap) .market-wrap {
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:1320px !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
body:has(.market-wrap) footer {
  position:relative;
  z-index:1;
  width:100%;
}

/* Keep theme controlled by the shared mobile theme switch.
   Do not allow the homepage's hard-coded white/black surfaces
   to bleed into the freelancer marketplace wrapper. */
html[data-theme="light"] body:has(.market-wrap),
html[data-theme="light"] body:has(.market-wrap) .layout,
html[data-theme="light"] body:has(.market-wrap) .layout > .center {
  background:#ffffff !important;
  color:#14213a !important;
  color-scheme:light !important;
}
html[data-theme="dark"] body:has(.market-wrap),
html[data-theme="dark"] body:has(.market-wrap) .layout,
html[data-theme="dark"] body:has(.market-wrap) .layout > .center {
  background:#000000 !important;
  color:#f5f5f5 !important;
  color-scheme:dark !important;
}
html[data-theme="light"] body:has(.market-wrap) .layout > .center > .topbar {
  background:rgba(255,255,255,.97) !important;
  color:#14213a !important;
  border-bottom:1px solid #e5eaf2 !important;
}
html[data-theme="dark"] body:has(.market-wrap) .layout > .center > .topbar {
  background:rgba(0,0,0,.97) !important;
  color:#f5f5f5 !important;
  border-bottom:1px solid #292929 !important;
}
html[data-theme="dark"] body:has(.market-wrap) .layout > .center > .topbar a,
html[data-theme="dark"] body:has(.market-wrap) .layout > .center > .topbar button {
  color:#f5f5f5 !important;
}
html[data-theme="light"] body:has(.market-wrap) .layout > .center > .topbar a,
html[data-theme="light"] body:has(.market-wrap) .layout > .center > .topbar button {
  color:#14213a !important;
}

/* Avoid homepage feed scroll-lock on this page, especially on phones. */
@media (min-width:651px) {
  body:has(.market-wrap),
  body:has(.market-wrap) .layout,
  body:has(.market-wrap) .layout > .center {
    overflow-y:auto !important;
  }
}
@media (max-width:650px) {
  body:has(.market-wrap) .layout,
  body:has(.market-wrap) .layout > .center {
    display:block !important;
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
    padding:0 !important;
  }
  body:has(.market-wrap) .market-wrap {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
}




/* ==========================================================
   ExploreX drawer animation - authoritative split slide
   Left image enters from left; right menu enters from right.
   Only the two panels transform. Drawer shell stays fixed.
   ========================================================== */

html body .ex-drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99990 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: rgba(0, 0, 0, .42) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: opacity .35s ease, visibility 0s linear .35s !important;
}

html body .ex-drawer-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .35s ease, visibility 0s linear 0s !important;
}

/* Fixed shell: it never slides or fades. */
html body .ex-side-drawer,
html body .ex-side-drawer.open {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 100000 !important;
    display: grid !important;
    grid-template-columns: 45% 55% !important;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    animation: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: visibility 0s linear .75s !important;
    will-change: auto !important;
}

html body .ex-side-drawer.open {
    visibility: visible !important;
    pointer-events: auto !important;
    transition: visibility 0s linear 0s !important;
}

/* Left half: moves in from the left edge. */
html body .ex-side-drawer .ex-menu-photo {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    transform: translateX(-100%) !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    transition: transform .75s cubic-bezier(.76, 0, .24, 1) !important;
    animation: none !important;
    will-change: auto !important;
}

html body .ex-side-drawer.open .ex-menu-photo {
    transform: translateX(0) !important;
}

/* Right half: moves in from the right edge. */
html body .ex-side-drawer .ex-menu-panel {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateX(100%) !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform .75s cubic-bezier(.76, 0, .24, 1) !important;
    animation: none !important;
    will-change: auto !important;
}

html body .ex-side-drawer.open .ex-menu-panel {
    transform: translateX(0) !important;
}

/* Do not let global entrance effects animate drawer descendants. */
html body .ex-side-drawer,
html body .ex-side-drawer *,
html body .ex-side-drawer *::before,
html body .ex-side-drawer *::after {
    animation-name: none !important;
}

/* Mobile: image half is hidden; menu panel still slides from the right. */
@media (max-width: 768px) {
    html body .ex-side-drawer,
    html body .ex-side-drawer.open {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .ex-side-drawer .ex-menu-photo {
        display: none !important;
    }

    html body .ex-side-drawer .ex-menu-panel {
        grid-column: 1 / -1 !important;
        transform: translateX(100%) !important;
    }

    html body .ex-side-drawer.open .ex-menu-panel {
        transform: translateX(0) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .ex-side-drawer,
    html body .ex-side-drawer.open {
        transition: none !important;
    }
    html body .ex-side-drawer .ex-menu-photo,
    html body .ex-side-drawer .ex-menu-panel {
        transition-duration: .01ms !important;
    }
    html body .ex-drawer-overlay,
    html body .ex-drawer-overlay.show {
        transition: none !important;
    }
}