/* ═══════════════════════════════════════════════════════════════
   SIGNAL SOCIETY — SHARED STYLES
   Used by every society-*.html page. Reuses the same color tokens
   and visual language as the After Dark pages (afterdark.html,
   after-dark-profile.html) so Society feels like the same product,
   just under its own nav. Loaded via <link> — keep this additive
   and don't rename existing classes, other pages may adopt it later.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --black: #080808; --dark: #111111; --card: #1a1a1a; --border: #2a2a2a;
  --red: #e50914; --red-light: #ff1f2b; --white: #ffffff; --gray: #888888; --green: #22c55e;
  --ad-blue: #00d4ff; --ad-purple: #9b5cff; --ad-gold: #f5c518;
  --tier-basic: #00d4ff; --tier-premium: #9b5cff; --tier-vip: #f5c518; --tier-free: #555555;
  --ad-border: rgba(255,255,255,0.07); --ad-danger: #ff4444;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #030408; color: var(--white); font-family: 'DM Sans', sans-serif; min-height: 100vh; padding-bottom: 90px; }
button { font-family: 'DM Sans', sans-serif; cursor: pointer; border: none; }
a { text-decoration: none; color: inherit; }
input, select, textarea { font-family: 'DM Sans', sans-serif; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

.page-bg { position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse at 30% 20%, rgba(40,0,60,0.4) 0%, transparent 60%), linear-gradient(to bottom, #03040a, #050208); background-size: cover; }
.page-bg::after { content:''; position:absolute; inset:0; background: rgba(3,4,8,0.55); }

/* ─── GLOBAL INCOMING VIDEO BOOTH CALL BANNER ───────────────────────────────
   Injected by society-shared.js on every Society page (not just Video Booth
   itself), so a member gets notified of an incoming call no matter where in
   the Society they're currently browsing. */
#soc-incoming-banner { display: none; position: fixed; top: 66px; left: 50%; transform: translateX(-50%); z-index: 300; background: rgba(8,9,18,0.97); border: 1px solid rgba(0,212,255,0.3); border-radius: 16px; padding: 14px 18px; align-items: center; gap: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
#soc-incoming-banner.show { display: flex; }
#soc-incoming-banner .soc-ib-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #2a1f3d, #1a1220); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 13px; color: #666; flex-shrink: 0; }
#soc-incoming-banner .soc-ib-name { font-size: 13px; font-weight: 700; }
#soc-incoming-banner .soc-ib-sub { font-size: 10px; color: #888; }
#soc-incoming-banner .soc-ib-btn { padding: 8px 16px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
#soc-incoming-banner .soc-ib-accept { background: var(--ad-blue); color: #04121a; }
#soc-incoming-banner .soc-ib-decline { background: rgba(255,68,68,0.12); color: var(--ad-danger); }

/* ─── TOP NAV ─── */
.soc-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 56px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
  background: rgba(3,4,8,0.95); border-bottom: 1px solid var(--ad-border); backdrop-filter: blur(12px); }
.soc-nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 3px; display: flex; align-items: center; gap: 6px; }
.soc-nav-logo em { color: var(--red); font-style: normal; }
.soc-nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 3px; color: #ccc; pointer-events: none; }
.soc-nav-home { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: #aaa; text-decoration: none; white-space: nowrap; padding: 6px 10px 6px 0; transition: color 0.2s; }
.soc-nav-home:hover { color: #fff; }
.soc-nav-profile-link { display: flex; align-items: center; gap: 7px; text-decoration: none; padding: 4px 10px 4px 4px; border-radius: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); transition: background 0.2s, border-color 0.2s; }
.soc-nav-profile-link:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.soc-nav-profile-label { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: #ccc; }
.soc-nav-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 2px solid transparent; cursor: pointer; background-size: cover; background-position: center; }
.soc-nav-avatar.tier-basic   { border-color: var(--tier-basic);   background-color: rgba(0,212,255,0.15);   color: var(--tier-basic); }
.soc-nav-avatar.tier-premium { border-color: var(--tier-premium); background-color: rgba(155,92,255,0.15);  color: var(--tier-premium); }
.soc-nav-avatar.tier-vip     { border-color: var(--tier-vip);     background-color: rgba(245,197,24,0.15);  color: var(--tier-vip); }
.soc-nav-avatar.tier-free    { border-color: var(--tier-free);    background-color: rgba(85,85,85,0.15);    color: var(--tier-free); }
@media (max-width: 480px) {
  .soc-nav-home { font-size: 0; padding: 6px 6px 6px 0; }
  .soc-nav-home::before { content: '←'; font-size: 15px; }
  .soc-nav-profile-label { display: none; }
  .soc-nav-profile-link { padding: 4px; }
}

/* ─── TAB STRIP (Society sub-nav, sits under the top bar) ─── */
.soc-tabs-wrap { position: fixed; top: 56px; left: 0; right: 0; z-index: 190; background: rgba(3,4,8,0.92); border-bottom: 1px solid var(--ad-border); backdrop-filter: blur(10px); }
.soc-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; max-width: 1000px; margin: 0 auto; scrollbar-width: none; }
.soc-tabs::-webkit-scrollbar { display: none; }
.soc-tab { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #888; background: rgba(255,255,255,0.03); border: 1px solid transparent; white-space: nowrap; }
.soc-tab .soc-tab-icon { font-size: 12px; }
.soc-tab.active { color: var(--ad-blue); background: rgba(0,212,255,0.1); border-color: rgba(0,212,255,0.3); }
.soc-tab.locked { opacity: 0.45; }
.soc-tab .lock-dot { font-size: 9px; }

/* ─── MAIN ─── */
.soc-main { position: relative; z-index: 10; max-width: 1000px; margin: 0 auto; padding: 130px 20px 24px; }
.soc-page-title { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 2px; margin-bottom: 4px; }
.soc-page-sub { font-size: 12px; color: #666; margin-bottom: 24px; }

#soc-loading { display: flex; align-items: center; justify-content: center; min-height: 40vh; flex-direction: column; gap: 16px; }
.soc-spinner { width: 32px; height: 32px; border: 2px solid rgba(0,212,255,0.15); border-top-color: var(--ad-blue); border-radius: 50%; animation: soc-spin .8s linear infinite; }
@keyframes soc-spin { to { transform: rotate(360deg); } }
.soc-loading-text { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #444; }

/* ─── CARDS / GRID ─── */
.soc-card { background: rgba(8,9,18,0.88); border: 1px solid var(--ad-border); border-radius: 16px; padding: 20px; }
.soc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.soc-empty { text-align: center; padding: 60px 20px; color: #555; }
.soc-empty-icon { font-size: 32px; margin-bottom: 10px; }
.soc-empty-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; color: #999; margin-bottom: 6px; }
.soc-empty-desc { font-size: 12px; color: #555; }

/* ─── MEMBER CARD ─── */
.member-card { background: rgba(8,9,18,0.88); border: 1px solid var(--ad-border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; transition: border-color .15s; cursor: pointer; }
.member-card:hover { border-color: rgba(0,212,255,0.25); }
.member-avatar { width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg, #2a1f3d, #1a1220); display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: #666; background-size: cover; background-position: center; position: relative; border: 2px solid rgba(255,255,255,0.08); }
.member-online-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 2px solid #080912; }
.member-handle { font-size: 13px; font-weight: 700; }
.member-meta { font-size: 10px; color: #666; }
.member-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }

/* ─── PILLS / BUTTONS ─── */
.pill-btn { padding: 9px 16px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; background: var(--ad-blue); color: #001a22; }
.pill-btn.secondary { background: rgba(255,255,255,0.06); color: var(--white); border: 1px solid rgba(255,255,255,0.15); }
.pill-btn.purple { background: var(--ad-purple); color: #14001f; }
.pill-btn.gold { background: var(--ad-gold); color: #2a1f00; }
.pill-btn.danger { background: rgba(255,68,68,0.12); color: var(--ad-danger); border: 1px solid rgba(255,68,68,0.3); }
.pill-btn:disabled { opacity: 0.5; cursor: default; }
.tag-pill { font-size: 10px; font-weight: 600; padding: 4px 10px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); color: #aaa; background: rgba(255,255,255,0.03); }

/* ─── LOCKED / UPSELL ─── */
.soc-lock-card { text-align: center; padding: 60px 24px; max-width: 420px; margin: 40px auto; }
.soc-lock-icon { font-size: 34px; margin-bottom: 14px; }
.soc-lock-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; margin-bottom: 8px; }
.soc-lock-desc { font-size: 13px; color: #888; line-height: 1.6; margin-bottom: 20px; }

/* ─── SEARCH / FILTER BAR ─── */
.soc-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.soc-filter-bar input, .soc-filter-bar select { padding: 9px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--ad-border); border-radius: 8px; color: white; font-size: 12px; }
.soc-filter-bar input { flex: 1; min-width: 160px; }

/* ─── MODAL (shared pattern with after-dark pages) ─── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px); z-index: 300; display: none; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.modal-overlay.visible { display: flex; }
.edit-modal-box { background: #0a0c14; border: 1px solid var(--ad-border); border-radius: 16px; max-width: 460px; width: 100%; padding: 28px; max-height: 90vh; overflow-y: auto; }
.edit-modal-box.wide-modal-box { max-width: 620px; }
.edit-modal-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 2px; margin-bottom: 20px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-save-btn { flex: 1; padding: 13px; background: var(--ad-blue); color: #001a22; border-radius: 8px; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.modal-cancel-btn { padding: 13px 18px; background: rgba(255,255,255,0.06); color: white; border-radius: 8px; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.field-group { margin-bottom: 16px; }
.field-group label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #777; margin-bottom: 6px; }
.field-group input, .field-group select, .field-group textarea { width: 100%; padding: 11px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--ad-border); border-radius: 8px; color: white; font-size: 13px; }
.field-hint { font-size: 11px; color: #555; margin-top: 6px; }

/* ─── PHONE VERIFICATION WIDGET ───
   Injected by renderPhoneVerifyWidget() (society-shared.js) directly on the
   page that needs it (Cyber XXX, Tap In) instead of sending members hunting
   through Profile/Settings for a verification screen that never existed. */
.pv-widget { max-width: 380px; margin: 14px 0; }
.pv-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #888; margin-bottom: 8px; }
.pv-row { display: flex; gap: 8px; }
.pv-row input { flex: 1; padding: 11px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--ad-border); border-radius: 8px; color: white; font-size: 14px; min-width: 0; }
.pv-btn { padding: 11px 18px; background: var(--ad-blue); color: #001a22; border-radius: 8px; font-weight: 700; font-size: 12px; letter-spacing: 0.5px; white-space: nowrap; }
.pv-btn:disabled { opacity: 0.5; cursor: default; }
.pv-msg { font-size: 12px; color: #888; margin-top: 8px; min-height: 16px; }
.pv-msg.pv-error { color: var(--ad-danger); }
.pv-links { display: flex; justify-content: space-between; margin-top: 10px; }
.pv-link { font-size: 11px; color: var(--ad-blue); cursor: pointer; text-decoration: underline; }
.pv-success { font-size: 14px; font-weight: 700; color: var(--green); padding: 10px 0; }

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL NAVIGATION SHELL (renderSocietyNav in society-shared.js)
   Desktop (>=900px): a FIXED left-side dock (position:fixed, 100dvh,
     never scrolls with the page) — includes the permanent Channel Remote
     (all six channels, always visible, no flyout to open first).
   Mobile (<900px): a FIXED bottom dock + the "23 Channels" bottom sheet,
     both position:fixed and safe-area aware.
   Corrects the earlier version of this shell, which rendered as two
   horizontal bars stacked across the top of the page — that was never
   the approved design (see the reference mockup: left rail on desktop,
   bottom dock on mobile).
   2026-08-02: the old "Explore All" desktop flyout was removed entirely
   (Henderson: "we shouldn't need Explore All if you set it up right, as
   everything for Explore All is now displayed another way") — every
   destination it used to hold is now reachable straight from the always-
   visible Channel Remote, so it was pure redundancy once that shipped.

   Layering (documented once here — don't invent new z-indexes elsewhere):
     1  content              default stacking, no z-index needed
     200  nav shell           .uni-dock-desktop / .uni-mobile-dock
     299  sheet backdrop      .uni-sheet-overlay
     300  sheet surface       .uni-sheet

   Only applied on pages that actually render this shell: renderSocietyNav()
   adds `uni-shell-active` to <body>, so pages that haven't been migrated
   yet (Arcade/Gayborhood — task #85) keep their existing layout untouched.
   ═══════════════════════════════════════════════════════════════ */

.uni-logo { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.uni-logo-mark { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; color: var(--red); }
.uni-logo-word { font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 2px; color: #ddd; }

/* ─── Desktop: fixed left dock ─── */
.uni-dock-desktop { display: none; position: fixed; top: 0; left: 0; z-index: 200; width: 232px; height: 100dvh;
  flex-direction: column; padding: 20px 14px calc(16px + env(safe-area-inset-bottom));
  background: rgba(3,4,8,0.97); border-right: 1px solid var(--ad-border); backdrop-filter: blur(12px);
  overflow-y: auto; }
.uni-dock-logo { padding: 2px 10px 22px; }
.uni-dock-nav { display: flex; flex-direction: column; gap: 3px; }
.uni-dock-spacer { flex: 1; min-height: 12px; }
.uni-dock-wallet { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 4px;
  border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: #ccc; }
.uni-dock-wallet:hover { background: rgba(255,255,255,0.05); color: #fff; }
.uni-dock-points { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.3px; color: var(--ad-gold, #f5c518); }
.uni-dock-points:hover { background: rgba(245,197,24,0.1); }
/* Signal Cash tokens — same treatment as the points badge just above (both
   link to account.html: the points/rank card and the Buy Tokens flow live
   on the same page), in a distinct green so the two currencies read as
   separate things at a glance. Per Henderson: "add the token count to the
   nav... easy for people to access to buy more tokens and know their
   balance along the way." */
.uni-dock-tokens { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-top: 2px;
  border-radius: 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.3px; color: #4ade80; }
.uni-dock-tokens:hover { background: rgba(74,222,128,0.1); }
.uni-dock-user { display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; margin-top: 8px;
  border-top: 1px solid var(--ad-border); }
.uni-dock-user-info { display: flex; flex-direction: column; gap: 1px; overflow: hidden; min-width: 0; }
.uni-dock-user-name { font-size: 12px; font-weight: 700; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uni-dock-user-tier { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.uni-dock-signout { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-top: 4px;
  border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: #999;
  background: transparent; border: none; cursor: pointer; text-align: left; font-family: inherit; }
.uni-dock-signout:hover { background: rgba(255,255,255,0.05); color: #fff; }

/* Shared avatar hover-preview popup — Club Frequency, Cyber XXX Maze,
   Gayborhood (see showAvatarPreview()/hideAvatarPreview() in society-shared.js). */
.soc-avatar-preview { position: fixed; z-index: 9999; pointer-events: none; background: #141018;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.soc-avatar-preview img { width: 160px; height: 160px; object-fit: cover; border-radius: 8px; display: block; }
.soc-avatar-preview-name { font-size: 12px; font-weight: 700; color: #eee; max-width: 160px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Vertical rail item (dock's own variant of the generic item pill below) */
.uni-item-dockrail { padding: 10px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: #999; }
.uni-item-dockrail.active { color: var(--ad-blue); background: rgba(0,212,255,0.1); }
.uni-item-dockrail:hover:not(.active) { color: #ccc; background: rgba(255,255,255,0.04); }
.uni-item-dockrail .uni-item-icon { font-size: 15px; width: 18px; text-align: center; }

/* ─── Generic item pill (shared across dock/mobile-dock/sheet) ─── */
.uni-item { display: flex; align-items: center; gap: 8px; position: relative; text-decoration: none; }
.uni-item-menu { padding: 7px 8px; border-radius: 8px; font-size: 12px; color: #ccc; }
.uni-item-menu:hover { background: rgba(255,255,255,0.05); }
.uni-item-menu.active { color: var(--ad-blue); background: rgba(0,212,255,0.08); }
.uni-item-menu.locked, .uni-item-sheet.locked, .uni-item-recent.locked { color: #a55; }
.uni-item.disabled { color: #555; cursor: default; opacity: 0.6; }
.uni-item-icon { font-size: 14px; line-height: 1; }
.uni-item-label { white-space: nowrap; }
.uni-lock-icon { font-size: 10px; margin-left: 2px; }
.uni-soon-tag { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; color: #666; background: rgba(255,255,255,0.06); border-radius: 6px; padding: 1px 5px; margin-left: 4px; text-transform: uppercase; }
.uni-badge { display: none; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; }

@media (min-width: 900px) {
  body.uni-shell-active .uni-dock-desktop { display: flex; }
  body.uni-shell-active .soc-main { margin-left: 232px; padding-top: 0; padding-bottom: 0; }
  .uni-mobile-dock, .uni-sheet, .uni-sheet-overlay { display: none !important; }
}

/* ─── Mobile: fixed bottom dock ─── */
@media (max-width: 899px) {
  .uni-dock-desktop { display: none !important; }
  body.uni-shell-active .soc-main { margin-left: 0; padding-top: 14px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .uni-mobile-dock { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; display: flex;
    align-items: center; justify-content: space-around; min-height: 64px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: rgba(3,4,8,0.96); border-top: 1px solid var(--ad-border); backdrop-filter: blur(12px); }
  .uni-item-dock { flex-direction: column; gap: 3px; padding: 6px 8px; font-size: 9px; color: #888; }
  .uni-item-dock.active { color: var(--ad-blue); }
  .uni-item-dock .uni-item-icon { font-size: 18px; }
  /* 2026-08-03 (Henderson): "why is there a white square around this
     button?" — .uni-dock-explore is a real <button> (every other dock
     item is an <a>, which never gets native form-control chrome). With
     .uni-dock-explore-inner's own opaque background removed in the icon
     swap above, the browser's default button background/appearance was
     left showing through as a white box behind the icon + label. Strip it
     explicitly instead of relying on nothing painting over it. */
  .uni-dock-explore { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ad-blue); font-size: 9px; font-weight: 700;
    background: none; -webkit-appearance: none; appearance: none; padding: 0; margin: 0; }
  /* 2026-08-03 (Henderson): the new button art (center23Button, a real
     photographed/rendered glowing button) already carries its own ring and
     glow — the old radial-gradient background + solid border + box-shadow
     combo was designed around the plain "23" text fallback and, layered
     under the new image, read as a washed-out white halo. Simplified to
     just size/position the image; no code-drawn ring behind it anymore. */
  .uni-dock-explore-inner { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 13px; color: var(--ad-blue); }
}

/* ─── Explore Society bottom sheet (mobile) ─── */
.uni-sheet-overlay { display: none; position: fixed; inset: 0; z-index: 299; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity .2s; }
.uni-sheet-overlay.open { opacity: 1; }
.uni-sheet { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; max-height: 82vh;
  background: #0a0b14; border-radius: 20px 20px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto; transform: translateY(100%); transition: transform .25s ease; }
@media (max-width: 899px) {
  .uni-sheet-overlay.open, .uni-sheet.open { display: block; }
  .uni-sheet.open { transform: translateY(0); }
}
.uni-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: #333; margin: 6px auto 14px; }
.uni-sheet-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 2px; text-align: center; margin-bottom: 14px; }
.uni-item-sheet { padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,0.04); font-size: 12px; color: #ddd; min-height: 44px; }
.uni-item-sheet.active { background: rgba(0,212,255,0.12); color: var(--ad-blue); }

/* ═══════════════════════════════════════════════════════════════
   SIGNAL SOCIETY REDESIGN (2026-08-02) — approved asset library
   Real SVG icons, cinematic hero photography, image-led destination
   cards, the branded 23-Channels control, and the mobile header. All
   driven by window.SOCIETY_NAV (society-nav-config.js) via
   renderSocietyNav()/renderChannelHub() in society-shared.js. Kept in
   its own section (additive — nothing above this line was removed)
   so earlier revisions of the shell remain easy to diff against.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Real SVG icons everywhere an emoji glyph used to sit ─── */
.uni-icon-svg { width: 17px; height: 17px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.uni-item-dockrail .uni-icon-svg, .uni-item-dock .uni-icon-svg { width: 18px; height: 18px; }
.uni-item-menu .uni-icon-svg, .uni-item-sheet .uni-icon-svg, .uni-item-recent .uni-icon-svg { width: 15px; height: 15px; }

/* ─── Desktop Channel Remote — permanent, always-visible six-channel
   set in the fixed left sidebar. Replaces the old hidden "Explore All"
   flyout: every channel is one click away, always in view, each with
   its real icon + branded name + plain-language subtitle. ─── */
.uni-channel-remote { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ad-border); }
.uni-remote-heading { font-size: 9px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #555; padding: 0 12px 6px; }
.uni-channel-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; }
.uni-channel-item:hover { background: rgba(255,255,255,0.045); }
.uni-channel-item.active { background: var(--ch-tint, rgba(255,255,255,0.06)); border-color: var(--ch-border, var(--ad-border)); }
.uni-channel-icon-wrap { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--ch-tint, rgba(255,255,255,0.05)); }
.uni-channel-icon-wrap .uni-icon-svg { width: 17px; height: 17px; }
.uni-channel-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.uni-channel-label { font-size: 12.5px; font-weight: 800; letter-spacing: 0.2px; color: #e8e8ea; white-space: nowrap; }
.uni-channel-item.active .uni-channel-label { color: var(--ch-accent, var(--ad-blue)); }
.uni-channel-subtitle { font-size: 9.5px; color: #767a86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Mobile top header (MobileSocietyHeader): wordmark, back to
   Universe, mailbox + unread badge. Fixed, sits above page content;
   only shown once the shell is active and only under 900px — desktop
   gets the equivalent info in the sidebar + floating back-to-Universe
   pill instead (see .uni-desktop-topbar below). ─── */
.uni-mobile-header { display: none; }
@media (max-width: 899px) {
  body.uni-shell-active .uni-mobile-header { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 201;
    align-items: center; justify-content: space-between; height: 52px; padding: 0 14px;
    background: rgba(3,4,8,0.95); border-bottom: 1px solid var(--ad-border); backdrop-filter: blur(12px); }
  body.uni-shell-active .soc-main { padding-top: calc(52px + 14px) !important; }
}
.uni-mh-brand { display: flex; align-items: center; }
.uni-mh-wordmark { height: 15px; width: auto; display: block; }
.uni-mh-back { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #aaa; text-decoration: none; white-space: nowrap; }
.uni-mh-back .uni-icon-svg { width: 13px; height: 13px; }
.uni-mh-mail { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.05); flex-shrink: 0; }
.uni-mh-mail .uni-icon-svg { width: 17px; height: 17px; }
.uni-mh-mail-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 9px; font-weight: 800; display: none; align-items: center; justify-content: center; }
.uni-mh-mail-badge.show { display: flex; }

/* ─── Desktop-only floating "Back to Signal 23 Universe" pill — the
   desktop shell's only top-of-main-area chrome per spec (identity
   lives permanently in the sidebar already). ─── */
.uni-desktop-topbar { display: none; }
@media (min-width: 900px) {
  body.uni-shell-active .uni-desktop-topbar { display: flex; position: fixed; top: 18px; right: 26px; z-index: 150; }
  body.uni-shell-active .uni-dt-back { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
    color: #ccc; text-decoration: none; padding: 8px 14px; border-radius: 20px; background: rgba(8,9,18,0.85);
    border: 1px solid var(--ad-border); backdrop-filter: blur(8px); }
  body.uni-shell-active .uni-dt-back:hover { background: rgba(255,255,255,0.08); color: #fff; }
  body.uni-shell-active .uni-dt-back .uni-icon-svg { width: 13px; height: 13px; }
}

/* ─── Mobile bottom dock center control: the branded "23 Channels"
   button (never an infinity glyph, hamburger, or bare number). ─── */
.uni-dock-explore-inner-img { width: 48px; height: 48px; display: block; object-fit: contain; }

/* ─── Channel hub page chrome: ChannelHero + DestinationCard +
   RecentlyVisitedRail. One shared system, all six channels. ─── */
.ch-hero { position: relative; border-radius: 20px; overflow: hidden; min-height: 340px; margin-bottom: 30px;
  display: flex; align-items: flex-end; border: 1px solid var(--ad-border); }
.ch-hero-photo-desktop, .ch-hero-photo-mobile { position: absolute; inset: 0; }
.ch-hero-photo-desktop img, .ch-hero-photo-mobile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-hero-photo-mobile { display: none; }
.ch-hero-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(3,4,10,0.92) 0%, rgba(3,4,10,0.58) 42%, rgba(3,4,10,0.18) 100%); }
.ch-hero-content { position: relative; z-index: 2; padding: 40px 44px 34px; max-width: 580px; }
.ch-hero-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; }
.ch-hero-title { font-family: 'Bebas Neue', sans-serif; font-size: 44px; letter-spacing: 1px; line-height: 1.05; color: #fff; margin-bottom: 14px; }
.ch-hero-desc { font-size: 14px; color: #dcdce0; line-height: 1.55; margin-bottom: 22px; max-width: 480px; }
.ch-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 899px) {
  .ch-hero { min-height: 300px; border-radius: 16px; margin-bottom: 22px; }
  .ch-hero-photo-desktop { display: none; }
  .ch-hero-photo-mobile { display: block; }
  .ch-hero-scrim { background: linear-gradient(to top, rgba(3,4,10,0.95) 0%, rgba(3,4,10,0.55) 48%, rgba(3,4,10,0.1) 100%); }
  .ch-hero-content { padding: 24px 20px 22px; max-width: none; }
  .ch-hero-title { font-size: 30px; }
  .ch-hero-desc { font-size: 13px; }
}

.ch-dest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 30px; }
.ch-dest-card { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--ad-border);
  display: block; aspect-ratio: 1200 / 760; text-decoration: none; }
.ch-dest-card:hover, .ch-dest-card:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.45); outline: none;
  border-color: var(--ch-accent, rgba(255,255,255,0.3)); transition: transform .15s, box-shadow .15s, border-color .15s; }
.ch-dest-photo-desktop, .ch-dest-photo-mobile { position: absolute; inset: 0; }
.ch-dest-photo-desktop img, .ch-dest-photo-mobile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-dest-photo-mobile { display: none; }
.ch-dest-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(3,4,10,0.92) 0%, rgba(3,4,10,0.12) 55%, transparent 100%); }
.ch-dest-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; display: flex; align-items: center; gap: 10px; z-index: 2; }
.ch-dest-icon { width: 22px; height: 22px; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.ch-dest-label { font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 1px; color: #fff; }
.ch-dest-desc { font-size: 11px; color: #bbb; margin-top: 2px; line-height: 1.3; }
.ch-dest-locked-tag { position: absolute; top: 10px; right: 10px; z-index: 2; font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.6); color: #ffb4b4; }
@media (max-width: 899px) {
  .ch-dest-grid { grid-template-columns: 1fr; gap: 12px; }
  .ch-dest-card { aspect-ratio: 1080 / 560; min-height: 108px; }
  .ch-dest-photo-desktop { display: none; }
  .ch-dest-photo-mobile { display: block; }
  .ch-dest-scrim { background: linear-gradient(to right, rgba(3,4,10,0.94) 0%, rgba(3,4,10,0.6) 42%, transparent 88%); }
  .ch-dest-body { left: 0; right: auto; bottom: 0; top: 0; width: 62%; flex-direction: column; align-items: flex-start; justify-content: center; padding: 14px; gap: 6px; }
}

/* ─── Fallback state for any manifest asset that's missing — the
   layout still renders (per spec: never fake an asset, never break
   layout), it just shows a clearly-marked placeholder tile instead of
   a broken image. ─── */
.ch-asset-missing { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 10px, rgba(255,255,255,0.01) 10px 20px);
  color: #665; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; padding: 8px; }

.ch-recent-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ch-recent-chip { flex-shrink: 0; display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 20px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--ad-border); font-size: 11px; font-weight: 700; color: #ccc; white-space: nowrap; text-decoration: none; }
.ch-recent-chip:hover { background: rgba(255,255,255,0.09); color: #fff; }
.ch-recent-chip .uni-icon-svg { width: 15px; height: 15px; }

.soc-section-head { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 14px; }
.soc-section-title { font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #666; }

/* ─── Mobile "23 Channels" bottom sheet content: a 2-column grid of the
   six channel tiles (bigger tap targets than the desktop rail rows),
   followed by a compact Tokens / Points / Wallet row. ─── */
.uni-sheet-channel-grid.uni-sheet-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 18px; }
.uni-channel-tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 14px; min-height: 84px;
  background: var(--ch-tint, rgba(255,255,255,0.04)); border: 1px solid var(--ch-border, var(--ad-border)); }
.uni-channel-tile .uni-channel-icon-wrap { width: 32px; height: 32px; }
.uni-channel-tile .uni-channel-label { font-size: 13px; }
.uni-channel-tile .uni-channel-subtitle { font-size: 10px; white-space: normal; }
.uni-sheet-wallet-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid var(--ad-border); margin-bottom: 4px; }
.uni-sheet-wallet-row .uni-item-sheet { flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 10px; font-weight: 700; color: #ccc; }
.uni-sheet-wallet-row .uni-item-sheet .uni-icon-svg { width: 17px; height: 17px; }

/* ═══════════════════════════════════════════════════════════════
   SIGNAL SOCIETY HOME (2026-08-02) — the visual command center for the
   whole Society, distinct from any single channel hub page. Built from
   window.SOCIETY_NAV.home (hero copy + tonightActions) and .categories
   (six-channel overview) via the render*() functions in society-shared.js
   (SocietyHomeHero / TonightAction / ChannelOverviewPanel /
   RecentlyVisitedRail / LiveNowModule / RankSnapshot — see that file's
   "SOCIETY HOME" section). Kept in its own section, additive.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Page-level heading: gradient wordmark only. The "Back to Signal 23
   Universe" action is NOT duplicated here — .uni-desktop-topbar (desktop)
   and .uni-mobile-header (mobile) already render it shell-wide, on every
   page including this one; a second copy inline would just be the same
   link twice on screen. ─── */
.soc-home-heading { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 3px; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--red), var(--ad-purple), var(--ad-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 899px) { .soc-home-heading { display: none; } } /* .uni-mobile-header's own wordmark already covers mobile */

/* ─── SocietyHomeHero + TonightAction ─── */
.soc-home-hero { position: relative; border-radius: 20px; overflow: hidden; min-height: 380px; margin-bottom: 34px;
  display: flex; align-items: flex-end; border: 1px solid var(--ad-border); }
.soc-home-hero-photo-desktop, .soc-home-hero-photo-mobile { position: absolute; inset: 0; }
.soc-home-hero-photo-desktop img, .soc-home-hero-photo-mobile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-home-hero-photo-mobile { display: none; }
.soc-home-hero-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(3,4,10,0.93) 0%, rgba(3,4,10,0.55) 45%, rgba(3,4,10,0.14) 100%); }
.soc-home-hero-content { position: relative; z-index: 2; padding: 44px 46px 32px; max-width: 620px; }
.soc-home-hero-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #bda9ff; margin-bottom: 10px; }
.soc-home-hero-title { font-family: 'Bebas Neue', sans-serif; font-size: 46px; letter-spacing: 1px; color: #fff; line-height: 1.05; margin-bottom: 12px; }
.soc-home-hero-desc { font-size: 14px; color: #dcdce0; line-height: 1.55; margin-bottom: 24px; max-width: 480px; }
.soc-tonight-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.soc-tonight-action { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 14px;
  background: rgba(8,9,18,0.72); border: 1px solid var(--ch-border, rgba(255,255,255,0.16)); backdrop-filter: blur(6px);
  text-decoration: none; flex: 1 1 210px; min-width: 210px; max-width: 280px; }
.soc-tonight-action:hover, .soc-tonight-action:focus-visible { background: rgba(8,9,18,0.9); border-color: var(--ch-accent, rgba(255,255,255,0.32)); outline: none; }
.soc-tonight-action-icon-wrap { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--ch-tint, rgba(255,255,255,0.09)); }
.soc-tonight-action-icon-wrap .uni-icon-svg { width: 18px; height: 18px; }
.soc-tonight-action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.soc-tonight-action-label { font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: 0.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-tonight-action-sub { font-size: 10.5px; color: #a9adba; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) {
  .soc-home-hero { min-height: 300px; border-radius: 16px; margin-bottom: 24px; }
  .soc-home-hero-photo-desktop { display: none; }
  .soc-home-hero-photo-mobile { display: block; }
  .soc-home-hero-scrim { background: linear-gradient(to top, rgba(3,4,10,0.95) 0%, rgba(3,4,10,0.6) 46%, rgba(3,4,10,0.1) 100%); }
  .soc-home-hero-content { padding: 22px 18px 20px; max-width: none; }
  .soc-home-hero-title { font-size: 28px; }
  .soc-home-hero-desc { margin-bottom: 18px; }
  .soc-tonight-actions { flex-direction: column; }
  .soc-tonight-action { max-width: none; width: 100%; }
}

/* ─── ChannelOverviewPanel — "Universe at a Glance" six-card grid.
   Same desktop/mobile photo + card-scrim swap pattern as .ch-dest-card,
   under its own class names since this is a distinct component (per
   spec: Home must be visually distinct from a channel hub page). ─── */
.soc-overview-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 30px; }
.soc-overview-card { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--ad-border);
  display: block; aspect-ratio: 3 / 4; text-decoration: none; }
.soc-overview-card:hover, .soc-overview-card:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.42); outline: none;
  border-color: var(--ch-accent, rgba(255,255,255,0.3)); transition: transform .15s, box-shadow .15s, border-color .15s; }
.soc-overview-photo-desktop, .soc-overview-photo-mobile { position: absolute; inset: 0; }
.soc-overview-photo-desktop img, .soc-overview-photo-mobile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-overview-photo-mobile { display: none; }
.soc-overview-scrim-desktop, .soc-overview-scrim-mobile { position: absolute; inset: 0; z-index: 1; }
.soc-overview-scrim-desktop img, .soc-overview-scrim-mobile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-overview-scrim-mobile { display: none; }
.soc-overview-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.soc-overview-icon-wrap { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--ch-tint, rgba(255,255,255,0.08)); border: 1px solid var(--ch-border, rgba(255,255,255,0.15)); }
.soc-overview-icon-wrap .uni-icon-svg { width: 16px; height: 16px; }
.soc-overview-name { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1px; color: #fff; }
.soc-overview-sub { font-size: 11px; color: #bbb; }
@media (max-width: 1180px) { .soc-overview-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) {
  .soc-overview-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; }
  .soc-overview-card { aspect-ratio: 4 / 3; }
  .soc-overview-photo-desktop { display: none; }
  .soc-overview-photo-mobile { display: block; }
  .soc-overview-scrim-desktop { display: none; }
  .soc-overview-scrim-mobile { display: block; }
  .soc-overview-body { padding: 12px; }
  .soc-overview-name { font-size: 14px; }
}

/* ─── RecentlyVisitedRail (Home-level: recent CHANNELS, not individual
   destinations — see _socHomeRecentChannelsHtml() in society-shared.js).
   Compact and image-led, but visibly smaller than the six-channel grid
   above it so it reads as secondary. ─── */
.soc-home-recent-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.soc-home-recent-card { flex-shrink: 0; width: 150px; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; position: relative;
  border: 1px solid var(--ad-border); text-decoration: none; }
.soc-home-recent-card:hover { border-color: var(--ch-accent, rgba(255,255,255,0.3)); }
.soc-home-recent-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-home-recent-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(3,4,10,0.92) 0%, rgba(3,4,10,0.15) 65%, transparent 100%); }
.soc-home-recent-label { position: absolute; left: 10px; bottom: 20px; z-index: 2; font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 0.5px; color: #fff; }
.soc-home-recent-sub { position: absolute; left: 10px; bottom: 7px; z-index: 2; font-size: 9.5px; color: #bbb; }

/* ─── Supporting activity row: LiveNowModule ("What's Happening Now") +
   RankSnapshot, side by side on desktop, stacked on mobile. Both are
   real-data panels — see loadLiveNowModule()/loadRankSnapshot() in
   society.html, backed by GET /api/kickback/events and
   GET /society/leaderboard(/my-rank). No fabricated activity or fake
   tier/XP progress bars (Henderson's redesign spec: "if no live data
   exists, use a polished empty state rather than fabricated activity"). ─── */
.soc-supporting-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 10px; }
@media (max-width: 899px) { .soc-supporting-grid { grid-template-columns: 1fr; } }
.soc-panel { background: rgba(8,9,18,0.88); border: 1px solid var(--ad-border); border-radius: 16px; padding: 18px 20px; }
.soc-panel-title { font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #666; margin-bottom: 14px; }
.soc-live-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); text-decoration: none; }
.soc-live-row:last-child { border-bottom: none; padding-bottom: 2px; }
.soc-live-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.06); }
.soc-live-badge { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; padding: 3px 7px; border-radius: 5px;
  background: rgba(255,68,68,0.15); color: var(--red); text-transform: uppercase; flex-shrink: 0; }
.soc-live-badge.upcoming { background: rgba(255,255,255,0.08); color: #999; }
.soc-live-info { flex: 1; min-width: 0; }
.soc-live-name { font-size: 12.5px; font-weight: 700; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-live-meta { font-size: 10.5px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-live-count { font-size: 11px; color: #aaa; flex-shrink: 0; white-space: nowrap; }
.soc-rank-you-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(245,197,24,0.08); margin-bottom: 14px; }
.soc-rank-you-num { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--ad-gold); min-width: 34px; }
.soc-rank-you-text { font-size: 12px; color: #ddd; line-height: 1.4; }
.soc-rank-you-text strong { color: #fff; }
.soc-lb-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; text-decoration: none; }
.soc-lb-medal { font-family: 'Bebas Neue', sans-serif; font-size: 14px; color: var(--ad-gold); min-width: 22px; }
.soc-lb-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.06); flex-shrink: 0; }
.soc-lb-handle { font-size: 12px; font-weight: 700; color: #ddd; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-lb-pts { font-family: 'Bebas Neue', sans-serif; font-size: 13px; color: var(--ad-gold); flex-shrink: 0; }
.soc-panel-cta { display: inline-block; margin-top: 14px; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ad-blue); text-decoration: none; }
.soc-panel-empty { font-size: 12px; color: #666; padding: 6px 0 2px; line-height: 1.6; }

/* ─── Photo lightbox (2026-08-03) — shared click-to-enlarge viewer,
   injected by openPhotoLightbox() in society-shared.js. Sits above the
   Explore sheet (z-index 300) and everything else in the documented
   layering system. ─── */
.soc-lightbox-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(2,2,6,0.94); display: none; align-items: center; justify-content: center; padding: 32px; }
.soc-lightbox-overlay.visible { display: flex; }
.soc-lightbox-img { max-width: 92vw; max-height: 90vh; border-radius: 12px; object-fit: contain; box-shadow: 0 24px 70px rgba(0,0,0,0.65); }
.soc-lightbox-close { position: fixed; top: 18px; right: 20px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.soc-lightbox-close:hover, .soc-lightbox-close:focus-visible { background: rgba(255,255,255,0.18); outline: none; }
@media (max-width: 480px) {
  .soc-lightbox-img { max-width: 96vw; max-height: 84vh; }
  .soc-lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }
}