*{box-sizing:border-box}
:root{
  --bg:#10081d;
  --panel:#1b1030;
  --text:#fff;
  --muted:#c7bdd5;
  --purple:#7f50ff;
  --purple2:#5b2bc9;
  --pink:#ff3f7d;
  --blue:#3d9cff;
  --line:rgba(255,255,255,.10);
}
/* Scoped: dark theme applies ONLY inside the Explore screen, not the whole app */
.hc-native-discover-v3{min-height:100%;background:
radial-gradient(circle at 50% -10%,#261343 0,#12091f 48%,#0d0717 100%);
color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
button,input{font:inherit}
.ex2-shell{width:min(100%,620px);margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px calc(92px + env(safe-area-inset-bottom))}
.ex2-topbar{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 14px}
.ex2-brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:20px}
.ex2-flag{font-size:22px}
.ex2-round-btn{width:50px;height:50px;border:1px solid var(--line);border-radius:50%;background:#2a1749;color:white;font-size:20px}
.ex2-hero{padding:12px 2px 20px}
.ex2-hero h1{margin:0;font-size:clamp(30px,8vw,46px);line-height:1.04;letter-spacing:-1.2px}
.ex2-hero p{margin:14px 0 0;color:#c4b9d4;font-size:16px;line-height:1.5;max-width:470px}
.ex2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ex2-card{position:relative;height:320px;border-radius:24px;overflow:hidden;border:1px solid rgba(165,116,255,.35);
background:#23123d;box-shadow:0 18px 40px rgba(0,0,0,.28);cursor:pointer;isolation:isolate;transition:transform .18s ease,box-shadow .18s ease}
.ex2-card:active{transform:scale(.975)}
.ex2-art{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);filter:saturate(1.06)}
.ex2-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,6,20,.02) 20%,rgba(10,6,20,.22) 42%,rgba(10,6,20,.92) 100%)}
.ex2-art-city{background:
radial-gradient(circle at 68% 22%,rgba(255,179,111,.55),transparent 24%),
linear-gradient(160deg,#7f3b86 0,#33235e 32%,#153c65 60%,#11182d 100%)}
.ex2-art-city:after,.ex2-art-network:after,.ex2-art-friends:after,.ex2-art-vibes:after,.ex2-art-kompa:after,.ex2-art-creative:after,.ex2-art-dating:after,.ex2-art-travel:after{
content:"";position:absolute;inset:0;opacity:.92}
.ex2-art-city:after{background:
linear-gradient(to top,transparent 0 25%,rgba(255,255,255,.06) 25% 28%,transparent 28%),
repeating-linear-gradient(90deg,transparent 0 11%,rgba(255,255,255,.09) 11% 14%,transparent 14% 24%);clip-path:polygon(0 60%,11% 50%,17% 60%,24% 39%,31% 60%,42% 44%,48% 60%,57% 30%,64% 60%,74% 45%,80% 60%,90% 35%,100% 60%,100% 100%,0 100%)}
.ex2-art-friends{background:
radial-gradient(circle at 38% 28%,#f8a16e 0 10%,transparent 11%),
radial-gradient(circle at 60% 27%,#c76e49 0 10%,transparent 11%),
radial-gradient(circle at 30% 52%,#372b3c 0 23%,transparent 24%),
radial-gradient(circle at 69% 54%,#443129 0 25%,transparent 26%),
linear-gradient(140deg,#7d4d62,#2d2438 55%,#111621)}
.ex2-art-friends:after{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.22),transparent 40%)}
.ex2-art-network{background:
radial-gradient(circle at 32% 30%,#a96846 0 9%,transparent 10%),
radial-gradient(circle at 66% 28%,#7d4b34 0 9%,transparent 10%),
linear-gradient(145deg,#493657,#1e2835 55%,#10131c)}
.ex2-art-network:after{background:
linear-gradient(62deg,transparent 0 35%,rgba(255,255,255,.08) 35% 37%,transparent 37% 100%),
linear-gradient(118deg,transparent 0 45%,rgba(255,255,255,.07) 45% 47%,transparent 47%)}
.ex2-art-vibes{background:
radial-gradient(circle at 75% 14%,rgba(94,193,255,.85),transparent 13%),
radial-gradient(circle at 55% 12%,rgba(255,50,129,.9),transparent 16%),
radial-gradient(circle at 30% 25%,rgba(255,147,66,.8),transparent 15%),
linear-gradient(150deg,#5f194e,#291445 55%,#101126)}
.ex2-art-vibes:after{background:repeating-radial-gradient(circle at 50% 55%,transparent 0 24px,rgba(255,255,255,.05) 25px 27px)}
.ex2-art-kompa{background:
radial-gradient(circle at 25% 20%,rgba(255,176,73,.8),transparent 16%),
radial-gradient(circle at 75% 20%,rgba(109,78,255,.8),transparent 18%),
linear-gradient(135deg,#522047,#1b1a43 55%,#0d1322)}
.ex2-art-kompa:after{background:
linear-gradient(90deg,transparent 0 15%,rgba(255,255,255,.10) 15% 18%,transparent 18% 34%,rgba(255,255,255,.08) 34% 36%,transparent 36%)}
.ex2-art-creative{background:
radial-gradient(circle at 56% 31%,#6e4b34 0 10%,transparent 11%),
linear-gradient(140deg,#395372,#182637 55%,#111822)}
.ex2-art-creative:after{background:
radial-gradient(circle at 51% 54%,transparent 0 22px,#121821 23px 39px,transparent 40px),
radial-gradient(circle at 51% 54%,#4d8fd0 0 10px,transparent 11px)}
.ex2-art-dating{background:
radial-gradient(circle at 34% 28%,#8e533d 0 9%,transparent 10%),
radial-gradient(circle at 66% 28%,#a36a52 0 9%,transparent 10%),
linear-gradient(145deg,#7a214b,#35152e 55%,#17111e)}
.ex2-art-dating:after{background:radial-gradient(circle at 50% 30%,rgba(255,136,184,.25),transparent 40%)}
.ex2-art-travel{background:
radial-gradient(circle at 72% 18%,rgba(255,179,106,.7),transparent 15%),
linear-gradient(160deg,#5c87b7,#d79670 45%,#60425a 75%,#171329)}
.ex2-art-travel:after{background:
linear-gradient(24deg,transparent 0 43%,rgba(19,32,50,.65) 44% 51%,transparent 52%),
linear-gradient(to top,rgba(9,18,32,.45),transparent 45%)}
.ex2-card-top{position:absolute;left:14px;top:14px;z-index:3}
.ex2-badge{display:inline-flex;align-items:center;border-radius:999px;padding:7px 10px;background:rgba(75,38,144,.86);backdrop-filter:blur(8px);font-size:11px;font-weight:900;box-shadow:0 7px 18px rgba(0,0,0,.2)}
.ex2-badge.pink{background:rgba(226,49,108,.88)}
.ex2-badge.blue{background:rgba(42,137,225,.9)}
.ex2-icon{position:absolute;left:16px;top:64px;z-index:3;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#9a62ff,#6031dd);font-size:22px;box-shadow:0 12px 26px rgba(89,45,198,.4)}
.ex2-icon.pink{background:linear-gradient(145deg,#ff5c96,#d82f72)}
.ex2-icon.blue{background:linear-gradient(145deg,#61b3ff,#3278d5)}
.ex2-content{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;padding-right:42px}
.ex2-content h2{margin:0 0 7px;font-size:22px;line-height:1.05}
.ex2-content p{margin:0;color:#e4ddec;font-size:13px;line-height:1.35;min-height:35px}
.ex2-content strong{display:block;margin-top:12px;color:#ab7cff;font-size:12px}
.ex2-friends .ex2-content strong,.ex2-vibes .ex2-content strong,.ex2-dating .ex2-content strong{color:#ff5f99}
.ex2-creatives .ex2-content strong,.ex2-newtown .ex2-content strong{color:#61b3ff}
.ex2-arrow{position:absolute;right:14px;bottom:16px;z-index:4;width:42px;height:42px;border:0;border-radius:50%;display:grid;place-items:center;background:#5d31bd;color:white}
.ex2-arrow.pink{background:#cf3471}
.ex2-arrow.blue{background:#317ed2}
.ex2-community{margin-top:24px;border:1px solid rgba(139,86,255,.25);background:linear-gradient(135deg,#241142,#37175f);border-radius:22px;padding:18px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.ex2-community-emoji{font-size:35px}
.ex2-community h3{margin:0 0 4px;font-size:16px}
.ex2-community p{margin:0;color:#bcb0ce;font-size:12px;line-height:1.4}
.ex2-community button{border:0;border-radius:999px;background:linear-gradient(135deg,#a64cff,#7b35e6);color:white;padding:11px 14px;font-weight:850;white-space:nowrap}
.ex2-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,620px);z-index:20;padding:10px 8px calc(10px + env(safe-area-inset-bottom));background:rgba(12,6,21,.94);backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(5,1fr)}
.ex2-nav button{border:0;background:none;color:#9f94b1;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px}
.ex2-nav i{font-size:20px}
.ex2-nav .active{color:#ff4a8a}
.ex2-nav .active i{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#ff4a8a;color:#1a0d23}
.ex2-search-sheet{position:fixed;inset:0;z-index:40;background:rgba(8,4,15,.72);backdrop-filter:blur(10px)}
.ex2-search-panel{width:min(100%,620px);margin:0 auto;background:#160c28;min-height:100%;padding:max(18px,env(safe-area-inset-top)) 16px}
.ex2-search-row{display:flex;gap:10px}
.ex2-search-row input{flex:1;border:1px solid rgba(255,255,255,.12);background:#281641;color:white;border-radius:14px;padding:13px 14px;outline:0}
.ex2-search-row button{border:0;background:none;color:#ad82ff;font-weight:800}
.ex2-result{display:flex;justify-content:space-between;align-items:center;padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
.ex2-result span{color:#bcaed0;font-size:12px}
.ex2-toast{position:fixed;left:50%;bottom:95px;transform:translateX(-50%);z-index:60;background:#211333;border:1px solid rgba(255,255,255,.12);padding:11px 15px;border-radius:999px;font-size:12px;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.3)}
@media(max-width:430px){
  .ex2-grid{gap:10px}
  .ex2-card{height:286px;border-radius:20px}
  .ex2-content h2{font-size:19px}
  .ex2-content p{font-size:12px}
  .ex2-icon{width:52px;height:52px;top:60px}
  .ex2-community{grid-template-columns:auto 1fr}
  .ex2-community button{grid-column:1/-1}
}
@media(max-width:340px){.ex2-grid{grid-template-columns:1fr}.ex2-card{height:300px}}


/* ==================================================
   EXPLORE V2 — DISCOVER NAVIGATION CONTEXT
   ================================================== */
.ex2-community-feed-top{
    display:flex;
    align-items:center;
    margin:0 2px 8px;
}
.ex2-community-feed-top button{
    border:1px solid rgba(255,255,255,.09);
    background:#24143a;
    color:#fff;
    border-radius:999px;
    padding:9px 13px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    font-weight:850;
}
.ex2-nav{
    grid-template-columns:repeat(5,1fr) !important;
}

/* Explore live member count */
.ex2-live-count {
    display: block;
    margin-top: 8px;

    font-size: 11px;
    font-weight: 800;

    color: rgba(255,255,255,.82);
}


/* ==========================================
   EXPLORE — MEMBER AVATAR STACK
   ========================================== */

.ex2-member-preview {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.ex2-avatar-stack {
    display: flex;
    align-items: center;
    min-width: 28px;
}

.ex2-mini-avatar {
    width: 30px;
    height: 30px;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.95);

    background: #281b35;

    margin-left: -8px;

    box-shadow:
        0 3px 10px rgba(0,0,0,.35);

    position: relative;
    z-index: calc(5 - var(--i));
}

.ex2-mini-avatar:first-child {
    margin-left: 0;
}

.ex2-member-total {
    font-size: 11px;
    font-weight: 850;
    color: rgba(255,255,255,.9);
    white-space: nowrap;
}


/* Explore Online Now */
.ex2-member-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ex2-online-now {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 800;
    color: #68e6a2;
}

.ex2-online-now i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #38d98b;
    box-shadow: 0 0 0 3px rgba(56,217,139,.12);
}

/* ==========================================
   HC DARK DISCOVER THEME
   ========================================== */

.hc-native-discover-v3 {
    background: radial-gradient(circle at 50% -10%, #261343 0%, #12091f 48%, #0d0717 100%) !important;
    color: #ffffff !important;
}


/* Explore V2 background — scoped to the embedded screen only */
#explore.hc-native-discover-v3,
#explore .ex2-shell {
    background: radial-gradient(circle at 50% -10%, #261343 0%, #12091f 48%, #0d0717 100%) !important;
    color: #ffffff !important;
}
/* Full-bleed dark coverage for the embedded Explore screen (no white gaps) */
#explore.hc-native-discover-v3 {
    min-height:100dvh !important;
    padding-bottom:0 !important;
    width:100% !important;
}